DS implementation - Table of Contents #13156
Conversation
✅ Deploy Preview for ethereumorg ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
pettinarip
changed the title
|
This can likely replace #11957, as it fixes the indicator alignment issue... This PR also incorporates the new styling, so it should be preferred. That PR got blocked when trying to polish for both LTR and RTL... this seems to also currently be a bug here: https://deploy-preview-13156--ethereumorg.netlify.app/fa/developers/docs/transactions/ 
|
Hmm is weird because on Storybook is working fine. For some reason, @TylerAPfledderer do you have any ideas on what could be going on here? |
…prop is not working fine with rtl
|
@pettinarip This is looking good now! Still in draft mode though... is this ready for a formal review yet? Flip to "Ready for review" and @ me when ready and will try to get this in. |
|
Only thing I'm noticing now (not a blocker imo) is the direction of the chevron's for the accordion, RTL vs LTR: 
Notice they point RIGHT no matter what... in LTR (ie English) these should point Right, but in RTL (ie. Farsi, Arabic, Hebrew, Urdu) these should point Left. We can address this separately though to prevent scope creep... I suspect there may be a couple annoyances fixing that when it comes to the animation. |
|
Oops, never mind! Wrong PR... my previous comments are fixed in #13063, please disregard |
wackerow
added
the
needs design approval 🧑🎨
There was a problem hiding this comment.
@pettinarip Looks great, just spotting one color mis-match.
| {t("edit-page")} | ||
| </ButtonLink> | ||
| )} | ||
| <Box textTransform="uppercase">{t("on-this-page")}</Box> |
There was a problem hiding this comment.
Figma:
Preview:
| <Box textTransform="uppercase">{t("on-this-page")}</Box> | |
| <Box textTransform="uppercase" color="body.medium"> | |
| {t("on-this-page")} | |
| </Box> |
| type Story = StoryObj<typeof meta> | ||
|
|
||
| export const Default: Story = { | ||
| render: () => <TableOfContents slug="#web3" items={tocItems} maxDepth={2} />, |
There was a problem hiding this comment.
9:11:34 AM: Failed to compile.
9:11:34 AM:
9:11:34 AM: ./src/components/TableOfContents/TableOfContents.stories.tsx:94:34
9:11:34 AM: Type error: Type '{ slug: string; items: ToCItem[]; maxDepth: number; }' is not assignable to type 'IntrinsicAttributes & BoxProps & { items: ToCItem[]; maxDepth?: number | undefined; editPath?: string | undefined; hideEditButton?: boolean | undefined; isMobile?: boolean | undefined; }'.
9:11:34 AM: Property 'slug' does not exist on type 'IntrinsicAttributes & BoxProps & { items: ToCItem[]; maxDepth?: number | undefined; editPath?: string | undefined; hideEditButton?: boolean | undefined; isMobile?: boolean | undefined; }'.
9:11:34 AM: 92 |
9:11:34 AM: 93 | export const Default: Story = {
9:11:34 AM: > 94 | render: () => <TableOfContents slug="#web3" items={tocItems} maxDepth={2} />,
9:11:34 AM: | ^
9:11:34 AM: 95 | }
9:11:34 AM: 96 |
9:11:34 AM: error Command failed with exit code 1. (https://ntl.fyi/exit-code-1)
cc: @pettinarip Getting an error here... slug is not a prop on TableOfContents, do we need this here?
// src/components/TableOfContents/index.tsx
export type TableOfContentsProps = BoxProps & {
items: Array<ToCItem>
maxDepth?: number
editPath?: string
hideEditButton?: boolean
isMobile?: boolean
}
Related issue
Preview URLs