0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-02-13 10:38:13 -05:00

📚 Adapts Heading docs/stories to be as the Text component

This commit is contained in:
Belén Albeza 2024-07-11 17:06:15 +02:00
parent 0fce6c5ebb
commit 93d9438f6c
2 changed files with 21 additions and 15 deletions

View file

@ -5,19 +5,14 @@ import * as HeadingStories from "./heading.stories";
# Headings
This component will add a heading tag element to our code.
This component will add a heading tag element (ie. `<h1>`, `<h2>`, etc.) to our code.
## Technical notes
This components accepts to props:
- `level` (default value: `1`) : A number from `1` to `6`, to set the heading level (i.e. `<h1>`, `<h2>`, etc.).
- `typography` (mandatory): Any of the [supported typography IDs](?path=/docs/foundations-typography--docs).
You can check passed props to renderized components on hover `level / typography`;
### Using typography IDs
This component accepts any [typography IDs](?path=/docs/foundations-typography--docs).
There are typography ID definitions you can use in your code rather than typing the
typography ID by hand.

View file

@ -20,17 +20,28 @@ export default {
control: { type: "select" },
},
},
parameters: {
controls: { exclude: ["children", "theme", "style"] },
backgrounds: { default: "light" },
},
args: {
children: "Lorem ipsum",
theme: "light",
style: {
color: "var(--color-foreground-primary)",
background: "var(--color-background-primary)",
},
},
render: ({ style, children, theme, ...args }) => (
// TODO: this <div> is a hack until we have proper theming
<div style={style} className={theme}>
<Heading {...args}>{children}</Heading>
</div>
),
};
export const AnyHeading = {
name: "Heading",
render: ({ level, typography, ...args }) => (
<StoryWrapper theme="default">
<Heading level={level} typography={typography} {...args}>
Lorem ipsum
</Heading>
</StoryWrapper>
),
args: {
level: 1,
typography: "display",