3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-07-23 18:17:19 +02:00
Code Issues Projects Releases Packages Wiki 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
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/defc text*
{::mf/props :obj} {::mf/props :obj}
[{:keys [tag typography children class] :rest props}] [{:keys [as typography children class] :rest props}]
(assert (valid-typography? (dm/str typography)) (assert (valid-typography? (dm/str typography))
(dm/str typography " is an unknown 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) class (dm/str (or class "") " " (stl/css-case :display-typography (= typography t/display)
:title-large-typography (= typography t/title-large) :title-large-typography (= typography t/title-large)
:title-medium-typography (= typography t/title-medium) :title-medium-typography (= typography t/title-medium)
@ -35,5 +35,5 @@
:body-small-typography (= typography t/body-small) :body-small-typography (= typography t/body-small)
:code-font-typography (= typography t/code-font))) :code-font-typography (= typography t/code-font)))
props (mf/spread-props props {:class class})] props (mf/spread-props props {:class class})]
[:> tag props [:> as props
children])) children]))

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

@ -1,54 +1,40 @@
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 { Text } = Components; const { Text } = Components;
const { StoryWrapper, StoryGridRow } = Components.storybook; const { StoryWrapper } = Components.storybook;
export default { export default {
title: "Foundations/Text", title: "Foundations/Typography/Text",
component: Components.Text, component: Text,
argTypes: {
typography: {
options: typographyIds,
control: { type: "select" },
}
}
}; };
export const TextTags = { export const Default = {
render: () => ( render: ({typography, ...args}) => (
<StoryWrapper theme="default"> <StoryWrapper theme="default">
<StoryGridRow title={"p / title-large"}> <Text typography={typography} {...args}>Lorem ipsum</Text>
<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>
</StoryWrapper> </StoryWrapper>
), ),
args: {
typography: "display"
}
}; };
export const TypographyParagraph = { export const CustomTag = {
render: () => ( render: ({typography, ...args}) => (
<StoryWrapper theme="default"> <StoryWrapper theme="default">
<StoryGridRow title={"p / title-large"}> <Text typography={typography} {...args}>Lorem ipsum</Text>
<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>
</StoryWrapper> </StoryWrapper>
), ),
}; args: {
typography: "display",
as: "li"
}
}