[BOOKINGSG-9311][RYN] migrate local nav component#1178
Conversation
…ons to class names within the 'styled' tags
…gs to Linaria 'css' tags
There was a problem hiding this comment.
eh can exclude the custom content and scroll jumping since that's meant to be done by the consumer. it's not relevant to the DS. we only need to set up a basic example that showcases the sticky nav behaviour
| const [selectedItemIndex, setSelectedItemIndex] = useState(0); | ||
|
|
||
| return ( | ||
| <div className="story-row-container story-background"> |
There was a problem hiding this comment.
can exclude the container class since there's only 1 item being rendered
| `); | ||
| }); | ||
|
|
||
| test("Keyboard navigation", async ({ story }) => { |
There was a problem hiding this comment.
move keyboard navigation to unit tests
| await story.init("menu"); | ||
| }); | ||
|
|
||
| test("Default", async ({ story }) => { |
There was a problem hiding this comment.
include the hover state and non-selected state. currently it only covers the item-selected state
|
|
||
| test("Default", async ({ story }) => { | ||
| await compareScreenshot(story, "mount", { | ||
| locator: story.locators.menu, |
There was a problem hiding this comment.
exclude the locators by default. we want to check the default width and height behaviour in most cases
|
|
||
| test("Accessibility", async ({ story }) => { | ||
| await expect(story.locators.dropdown).toMatchAriaSnapshot(` | ||
| - menu: |
There was a problem hiding this comment.
check the expanded state here as well
There was a problem hiding this comment.
this doesn't look right. the dropdown should be fixed to the top of the page
| .click(); | ||
| }); | ||
|
|
||
| await test.step("Scroll until sticky", async () => { |
There was a problem hiding this comment.
include a snapshot for the sticky unopened dropdown
| }); | ||
|
|
||
| test("Sticky on scroll", async ({ story }) => { | ||
| await test.step("Select an item", async () => { |
There was a problem hiding this comment.
include a snapshot for the non-sticky opened dropdown
| }); | ||
| }); | ||
|
|
||
| test("Sticky on scroll", async ({ story }) => { |
|
|
||
| export const navWrapperStickied = css` | ||
| .${navSelect} { | ||
| margin: 0 calc(-1 * var(${tokens.navWrapper.sideMargin}, 0px)); |
There was a problem hiding this comment.
update all for consistency
| margin: 0 calc(-1 * var(${tokens.navWrapper.sideMargin}, 0px)); | |
| margin: 0 calc(var(${tokens.navWrapper.sideMargin} * -1px, 0px)); |
| const text = | ||
| await story.locators.dropdownLabel.textContent(); | ||
| return (text ?? "").includes("Title 2"); |
There was a problem hiding this comment.
Can we have a longer list? I was thinking that since we're only on title 2, it can resulted in zero scrolling or non-sticky result
| }); | ||
| await story.locators.dropdownLabel.click(); | ||
| await expect(story.locators.dropdownList).toBeVisible(); | ||
| await compareScreenshot(story, "sticky-open", { |
There was a problem hiding this comment.
It seems to be missing the scrolling part for this to have a sticky state
3 participants
Checklist
classNameis chained correctly withclsx- [ ] Updated Storybook documentation- [ ] Added/updated unit tests