3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-05-23 21:26:13 +02:00
Code Issues Projects Releases Packages Wiki Activity

✨ Revamp Heading stories to display controls

Browse source
This commit is contained in:
Belén Albeza 2024-07-10 13:31:56 +02:00
parent 0d0b5ead86
commit 508f4fcd3c
2 changed files with 23 additions and 41 deletions
Download patch file Download diff file Expand all files Collapse all files

62
frontend/src/app/main/ui/ds/foundations/heading.stories.jsx
View file

@ -1,54 +1,34 @@
import * as React from "react"; import * as React from "react";
import Components from "@target/components"; import Components from "@target/components";
import { typographyIds } from "./typography.stories";
const { Heading } = Components; const { Heading } = Components;
const { StoryWrapper, StoryGridRow } = Components.storybook; const { StoryWrapper } = Components.storybook;
export default { export default {
title: "Foundations/Heading", title: "Foundations/Typography/Heading",
component: Components.Heading, component: Components.Heading,
argTypes: {
level: {
options: [1, 2, 3, 4, 5, 6],
control: { type: "select" },
},
typography: {
options: typographyIds,
control: { type: "select" },
},
},
}; };
export const Levels = { export const AnyHeading = {
render: () => ( name: "Heading",
render: ({level, typography, ...args}) => (
<StoryWrapper theme="default"> <StoryWrapper theme="default">
<StoryGridRow title={"1 / display"}> <Heading level={level} typography={typography} {...args}>Lorem ipsum</Heading>
<Heading level="1" typography="display">
h1 / display
</Heading>
</StoryGridRow>
<StoryGridRow title={"2 / display"}>
<Heading level="2" typography="display">
h2 / display
</Heading>
</StoryGridRow>
<StoryGridRow title={"3 / display"}>
<Heading level="3" typography="display">
h3 / display
</Heading>
</StoryGridRow>
</StoryWrapper>
),
};
export const HeadingTypography = {
render: () => (
<StoryWrapper theme="default">
<StoryGridRow title={"1 / title-large"}>
<Heading level="1" typography="title-large">
h1 / title-large
</Heading>
</StoryGridRow>
<StoryGridRow title={"1 / title-medium"}>
<Heading level="1" typography="title-medium">
h1 / title-medium
</Heading>
</StoryGridRow>
<StoryGridRow title={"1 / code-font"}>
<Heading level="1" typography="code-font">
h1 / code-font
</Heading>
</StoryGridRow>
</StoryWrapper> </StoryWrapper>
), ),
args: {
level: 1,
typography: "display",
}
}; };

2
frontend/src/app/main/ui/ds/foundations/typography.stories.jsx
View file

@ -106,6 +106,8 @@ const typographyList = {
}, },
}; };
export const typographyIds = Object.values(typographyList).map(x => x.id);
export default { export default {
title: "Foundations/Typography", title: "Foundations/Typography",
component: Components.StoryHeader, component: Components.StoryHeader,