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:
parent
0fce6c5ebb
commit
93d9438f6c
2 changed files with 21 additions and 15 deletions
|
@ -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.
|
||||
|
||||
|
|
|
@ -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",
|
||||
|
|
Loading…
Add table
Reference in a new issue