[FAD-57] - Add typography #8
Conversation
| import React from "react"; | ||
| import { DocsContainer as BaseContainer } from "@storybook/addon-docs/blocks"; | ||
| import { useDarkMode } from "storybook-dark-mode"; | ||
| import { themes } from "@storybook/theming"; | ||
|
|
||
| export const DocsContainer = ({ children, context }) => { | ||
| const dark = useDarkMode(); | ||
|
|
||
| return ( | ||
| <BaseContainer | ||
| context={{ | ||
| ...context, | ||
| storyById: (id) => { | ||
| const storyContext = context.storyById(id); | ||
| return { | ||
| ...storyContext, | ||
| parameters: { | ||
| ...storyContext?.parameters, | ||
| docs: { | ||
| ...storyContext?.parameters?.docs, | ||
| theme: dark ? themes.dark : themes.light, | ||
| }, | ||
| }, | ||
| }; | ||
| }, | ||
| }} | ||
| > | ||
| {children} | ||
| </BaseContainer> | ||
| ); | ||
| }; |
There was a problem hiding this comment.
There was a problem hiding this comment.
lol what a url for a reference
There was a problem hiding this comment.
This component is a solution for dark mode with docs, apparently, they are both addons from the storybook and docs are not currently working with dark mode...
| <></> | ||
| ) : // <HelperText className="mt-2"> | ||
| // {/* @ts-expect-error Same as above */} | ||
| // Error: {errors[reservedErrorField].message} | ||
| // </HelperText> | ||
| null} |
There was a problem hiding this comment.
Old component used by goldfinch. I commented instead of deleting for future references.
There was a problem hiding this comment.
Food for thought - this reference is in client2, could we not just delete it outright?
| <></> | ||
| ) : // <HelperText | ||
| // className={clsx( | ||
| // isError ? "text-state-error" : "text-dark-80", | ||
| // "mt-1 text-sm leading-none" | ||
| // )} | ||
| // > | ||
| // {_errorMessage ? _errorMessage : helperText} | ||
| // </HelperText> | ||
| null} |
There was a problem hiding this comment.
Old component used by goldfinch. I commented instead of deleting for future references.
| ) : // <HelperText | ||
| // className={clsx( | ||
| // isError | ||
| // ? "text-clay-500" | ||
| // : colorScheme === "light" | ||
| // ? "text-sand-500" | ||
| // : colorScheme === "dark" | ||
| // ? "text-sand-300" | ||
| // : null, | ||
| // "mt-1 text-sm leading-none" | ||
| // )} | ||
| // > | ||
| // {errorMessage ? errorMessage : helperText} | ||
| // </HelperText> |
There was a problem hiding this comment.
Old component used by goldfinch. I commented instead of deleting for future references.
| <></> | ||
| ) : // <HelperText isError>Error while fetching wallet status</HelperText> | ||
| null} |
There was a problem hiding this comment.
Old component used by goldfinch. I commented instead of deleting it for future reference.
| {/* <Paragraph className="mb-8"> | ||
| By connecting your wallet, you agree to our{" "} | ||
| <Link href="/terms">Terms of Service</Link> and{" "} | ||
| <Link href="/privacy">Privacy Policy</Link> | ||
| </Paragraph> | ||
| </Paragraph> */} |
There was a problem hiding this comment.
Old component used by goldfinch. I commented instead of deleting it for future reference.
| <></> | ||
| ) : // <HelperText isError className="mb-12"> | ||
| // There was a problem fetching data on pools. Shown data may be | ||
| // outdated. | ||
| // </HelperText> | ||
| null} |
There was a problem hiding this comment.
Old component used by goldfinch. I commented instead of deleting it for future reference.
| <></> | ||
| ) : // <HelperText isError> | ||
| // There was a problem fetching data on this pool. Shown data may be | ||
| // outdated. | ||
| // </HelperText> | ||
| null} |
There was a problem hiding this comment.
Old component used by goldfinch. I commented instead of deleting it for future reference.
| <></> | ||
| ) : // <HelperText isError> | ||
| // There was a problem fetching data on the senior pool. Shown data | ||
| // may be outdated. | ||
| // </HelperText> | ||
| null} |
There was a problem hiding this comment.
Old component used by goldfinch. I commented instead of deleting it for future reference.
| <></> | ||
| ) : // <HelperText className="mt-2"> | ||
| // {/* @ts-expect-error Same as above */} | ||
| // Error: {errors[reservedErrorField].message} | ||
| // </HelperText> | ||
| null} |
There was a problem hiding this comment.
Food for thought - this reference is in client2, could we not just delete it outright?
| className, | ||
| ...rest | ||
| }: BodyTextProps) { | ||
| const Component = "p"; |
There was a problem hiding this comment.
Just asking, is there any reasoning for declaring the component at the top?
| level === 1 | ||
| ? "font-bold" | ||
| : level < 5 | ||
| ? "font-semibold" | ||
| : medium | ||
| ? "font-medium" | ||
| : "font-semibold", |
There was a problem hiding this comment.
I would suggest using objects when there are multiple ternary operations involved.
Something like this,
clsx("font-semibold",{"font-semibold":level < 5,"font-bold":level === 1,"font-medium":medium},className)
Thoughts?
There was a problem hiding this comment.
I'm not quite familiar with this, but I've tested, and doing this way results in wrong results with the fonts. such as:
font-semibold font-semibold or font-semibold font-bold
Description
This PR includes the dark mode on storybook:
BodyText
Caption
Display
Heading
Link
Checklist
CHANGELOGhas been updated (if appropriate)