Merge pull request #4857 from penpot/eva-add-text-component-to-storybook

✨ Add text component to storybook

frontend/src/app/main/ui/ds/foundations/heading.cljs

@@ -9,7 +9,7 @@
    [app.common.data.macros :as dm]
    [app.main.style :as stl])
   (:require
-   [app.main.ui.ds.foundations.typography :refer [typography-list]]
+   [app.main.ui.ds.foundations.typography :as t]
    [rumext.v2 :as mf]))
 
 (defn- valid-level? [value]
@@ -17,7 +17,7 @@
     (contains? number-set (dm/str value))))
 
 (defn- valid-typography? [value]
-  (contains? typography-list value))
+  (contains? t/typography-list value))
 
 (mf/defc heading*
   {::mf/props :obj}
@@ -31,17 +31,17 @@
 
   (let [level (or level "1")
         tag   (dm/str "h" level)
-        class (dm/str (or class "") " " (stl/css-case :display-typography (= typography "display")
+        class (dm/str (or class "") " " (stl/css-case :display-typography (= typography t/display)
-                                                      :title-large-typography (= typography "title-large")
+                                                      :title-large-typography (= typography t/title-large)
-                                                      :title-medium-typography (= typography "title-medium")
+                                                      :title-medium-typography (= typography t/title-medium)
-                                                      :title-small-typography (= typography "title-small")
+                                                      :title-small-typography (= typography t/title-small)
-                                                      :headline-large-typography (= typography "headline-large")
+                                                      :headline-large-typography (= typography t/headline-large)
-                                                      :headline-medium-typography (= typography "headline-medium")
+                                                      :headline-medium-typography (= typography t/headline-medium)
-                                                      :headline-small-typography (= typography "headline-small")
+                                                      :headline-small-typography (= typography t/headline-small)
-                                                      :body-large-typography (= typography "body-large")
+                                                      :body-large-typography (= typography t/body-large)
-                                                      :body-medium-typography (= typography "body-medium")
+                                                      :body-medium-typography (= typography t/body-medium)
-                                                      :body-small-typography (= typography "body-small")
+                                                      :body-small-typography (= typography t/body-small)
-                                                      :code-font-typography (= typography "code-font")))
+                                                      :code-font-typography (= typography t/code-font)))
         props (mf/spread-props props {:class class})]
     [:> tag props
      children]))

frontend/src/app/main/ui/ds/foundations/heading.mdx

@@ -16,7 +16,6 @@ This components accepts to props:
 
 You can check passed props to renderized components on hover `level / typography`;
 
-
 ### Using typography IDs
 
 There are typography ID definitions you can use in your code rather than typing the

frontend/src/app/main/ui/ds/foundations/text.cljs

@@ -9,29 +9,31 @@
    [app.common.data.macros :as dm]
    [app.main.style :as stl])
   (:require
-   [app.main.ui.ds.foundations.typography :refer [typography-list]]
+   [app.main.ui.ds.foundations.typography :as t]
    [rumext.v2 :as mf]))
 
 (defn- valid-typography? [value]
-  (contains? typography-list value))
+  (contains? t/typography-list value))
 
 (mf/defc text*
   {::mf/props :obj}
-  [{:keys [tag typography children] :rest props}]
+  [{:keys [tag typography children class] :rest props}]
 
   (assert (valid-typography? (dm/str typography))
           (dm/str typography " is an unknown typography"))
 
-  (let [props (mf/spread-props props {:class (stl/css-case :display-typography (= typography "display")
+  (let [tag (or tag "p")
-                                                           :title-large-typography (= typography "title-large")
+        class (dm/str (or class "") " " (stl/css-case :display-typography (= typography t/display)
-                                                           :title-medium-typography (= typography "title-medium")
+                                                      :title-large-typography (= typography t/title-large)
-                                                           :title-small-typography (= typography "title-small")
+                                                      :title-medium-typography (= typography t/title-medium)
-                                                           :headline-large-typography (= typography "headline-large")
+                                                      :title-small-typography (= typography t/title-small)
-                                                           :headline-medium-typography (= typography "headline-medium")
+                                                      :headline-large-typography (= typography t/headline-large)
-                                                           :headline-small-typography (= typography "headline-small")
+                                                      :headline-medium-typography (= typography t/headline-medium)
-                                                           :body-large-typography (= typography "body-large")
+                                                      :headline-small-typography (= typography t/headline-small)
-                                                           :body-medium-typography (= typography "body-medium")
+                                                      :body-large-typography (= typography t/body-large)
-                                                           :body-small-typography (= typography "body-small")
+                                                      :body-medium-typography (= typography t/body-medium)
-                                                           :code-font-typography (= typography "code-font"))})]
+                                                      :body-small-typography (= typography t/body-small)
+                                                      :code-font-typography (= typography t/code-font)))
+        props (mf/spread-props props {:class class})]
     [:> tag props
      children]))

frontend/src/app/main/ui/ds/foundations/text.mdx

@@ -0,0 +1,48 @@
+import { Canvas, Meta } from "@storybook/blocks";
+import * as TextStories from "./text.stories";
+
+<Meta of={TextStories} />
+
+# Texts
+This component will add a text element to our code that will match the tag prop.
+
+## Technical notes
+
+This components accepts to props:
+
+- `tag` (default value: `p`) : Give a proper tag name (i.e. `p`, `span`, etc.). 
+- `typography` (mandatory): Any of the [supported typography IDs](?path=/docs/foundations-typography--docs).
+
+You can check passed props to renderized components on hover `tag / typography`
+
+
+### Using typography IDs
+
+There are typography ID definitions you can use in your code rather than typing the
+typography ID by hand.
+
+**Using these IDs is recommended**.
+
+Assuming the namespace of the typography is required as `t`:
+
+```clj
+(ns app.main.ui.foo
+  (:require
+   [app.main.ui.ds.foundations.text :refer [text*]]
+   [app.main.ui.ds.foundations.typography :as t]))
+```
+
+You can now use the typography IDs defined in the namespace:
+
+```clj
+[:> text* {:typography t/title-large :tag "p"} "Welcome to Penpot"]
+```
+
+## Accesibility
+
+There should only be one level 1 heading `<h1>` per page.
+
+Headings are used to navigate the page and must follow the `<h1>` -> `<h2>` -> `<h3>` -> `<h4>` -> `<h5>` ->  `<h6>` hierarchy.
+For example, do not skip levels in the `<h1>` -> `<h3>` hierarchy if there is no `<h2>` in between.
+
+We should not choose the heading level by its visual aspect.

frontend/src/app/main/ui/ds/foundations/text.scss

@@ -0,0 +1,50 @@
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at http://mozilla.org/MPL/2.0/.
+//
+// Copyright (c) KALEIDOS INC
+@use "../typography.scss" as t;
+
+.display-typography {
+  @include t.use-typography("display");
+}
+
+.title-large-typography {
+  @include t.use-typography("title-large");
+}
+
+.title-medium-typography {
+  @include t.use-typography("title-medium");
+}
+
+.title-small-typography {
+  @include t.use-typography("title-small");
+}
+
+.headline-large-typography {
+  @include t.use-typography("headline-large");
+}
+
+.headline-medium-typography {
+  @include t.use-typography("headline-medium");
+}
+
+.headline-small-typography {
+  @include t.use-typography("headline-small");
+}
+
+.body-large-typography {
+  @include t.use-typography("body-large");
+}
+
+.body-medium-typography {
+  @include t.use-typography("body-medium");
+}
+
+.body-small-typography {
+  @include t.use-typography("body-small");
+}
+
+.code-font-typography {
+  @include t.use-typography("code-font");
+}

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

@@ -0,0 +1,54 @@
+import * as React from "react";
+import Components from "@target/components";
+
+const { Text } = Components;
+const { StoryWrapper, StoryGridRow } = Components.storybook;
+
+export default {
+  title: "Foundations/Text",
+  component: Components.Text,
+};
+
+export const TextTags = {
+  render: () => (
+    <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>
+    </StoryWrapper>
+  ),
+};
+
+export const TypographyParagraph = {
+  render: () => (
+    <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>
+    </StoryWrapper>
+  ),
+};

frontend/src/app/main/ui/ds/foundations/typography.cljs

@@ -29,4 +29,4 @@
                        body-large
                        body-medium
                        body-small
-                       code-font})
+                       code-font})