Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-01-09 00:10:11 -05:00
Code Issues Activity

✨ Revamp Text stories to display controls + rename tag prop to as

Browse source
This commit is contained in:
Belén Albeza 2024-07-10 13:34:09 +02:00
parent 508f4fcd3c
commit 54da6832f3
2 changed files with 27 additions and 41 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
frontend/src/app/main/ui/ds/foundations/text.cljs
View file

@ -17,12 +17,12 @@
(mf/defc text*
{::mf/props :obj}
[{:keys [tag typography children class] :rest props}]
[{:keys [as typography children class] :rest props}]
(assert (valid-typography? (dm/str typography))
(dm/str typography " is an unknown typography"))
(let [tag (or tag "p")
(let [as (or as "p")
class (dm/str (or class "") " " (stl/css-case :display-typography (= typography t/display)
:title-large-typography (= typography t/title-large)
:title-medium-typography (= typography t/title-medium)
@ -35,5 +35,5 @@
:body-small-typography (= typography t/body-small)
:code-font-typography (= typography t/code-font)))
props (mf/spread-props props {:class class})]
[:> tag props
[:> as props
children]))

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

@ -1,54 +1,40 @@
import * as React from "react";
import Components from "@target/components";
import { typographyIds } from "./typography.stories";
const { Text } = Components;
const { StoryWrapper, StoryGridRow } = Components.storybook;
const { StoryWrapper } = Components.storybook;
export default {
title: "Foundations/Text",
component: Components.Text,
title: "Foundations/Typography/Text",
component: Text,
argTypes: {
typography: {
options: typographyIds,
control: { type: "select" },
}
}
};
export const TextTags = {
render: () => (
export const Default = {
render: ({typography, ...args}) => (
<StoryWrapper theme="default">
<StoryGridRow title={"p / title-large"}>
<Text tag="p" typography="title-large">
p / Title
</Text>
</StoryGridRow>
<StoryGridRow title={"span / title-large"}>
<Text tag="span" typography="title-large">
span / Title large
</Text>
</StoryGridRow>
<StoryGridRow title={"div / title-large"}>
<Text tag="div" typography="title-large">
div / Title large
</Text>
</StoryGridRow>
<Text typography={typography} {...args}>Lorem ipsum</Text>
</StoryWrapper>
),
args: {
typography: "display"
}
};
export const TypographyParagraph = {
render: () => (
export const CustomTag = {
render: ({typography, ...args}) => (
<StoryWrapper theme="default">
<StoryGridRow title={"p / title-large"}>
<Text tag="p" typography="title-large">
p / Title large
</Text>
</StoryGridRow>
<StoryGridRow title={"p / title-medium"}>
<Text tag="p" typography="title-medium">
p / Title medium
</Text>
</StoryGridRow>
<StoryGridRow title={"p / code-font"}>
<Text tag="p" typography="code-font">
p / Code font
</Text>
</StoryGridRow>
<Text typography={typography} {...args}>Lorem ipsum</Text>
</StoryWrapper>
),
};
args: {
typography: "display",
as: "li"
}
}