diff --git a/frontend/src/app/main/ui/ds/foundations/heading.cljs b/frontend/src/app/main/ui/ds/foundations/heading.cljs
index 4d0545dbc..59c8e3dde 100644
--- a/frontend/src/app/main/ui/ds/foundations/heading.cljs
+++ b/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")
- :title-large-typography (= typography "title-large")
- :title-medium-typography (= typography "title-medium")
- :title-small-typography (= typography "title-small")
- :headline-large-typography (= typography "headline-large")
- :headline-medium-typography (= typography "headline-medium")
- :headline-small-typography (= typography "headline-small")
- :body-large-typography (= typography "body-large")
- :body-medium-typography (= typography "body-medium")
- :body-small-typography (= typography "body-small")
- :code-font-typography (= typography "code-font")))
+ 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)
+ :title-small-typography (= typography t/title-small)
+ :headline-large-typography (= typography t/headline-large)
+ :headline-medium-typography (= typography t/headline-medium)
+ :headline-small-typography (= typography t/headline-small)
+ :body-large-typography (= typography t/body-large)
+ :body-medium-typography (= typography t/body-medium)
+ :body-small-typography (= typography t/body-small)
+ :code-font-typography (= typography t/code-font)))
props (mf/spread-props props {:class class})]
[:> tag props
children]))
diff --git a/frontend/src/app/main/ui/ds/foundations/heading.mdx b/frontend/src/app/main/ui/ds/foundations/heading.mdx
index 85380a760..52e3bb120 100644
--- a/frontend/src/app/main/ui/ds/foundations/heading.mdx
+++ b/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
diff --git a/frontend/src/app/main/ui/ds/foundations/text.cljs b/frontend/src/app/main/ui/ds/foundations/text.cljs
index 3b74ba853..180ee703f 100644
--- a/frontend/src/app/main/ui/ds/foundations/text.cljs
+++ b/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")
- :title-large-typography (= typography "title-large")
- :title-medium-typography (= typography "title-medium")
- :title-small-typography (= typography "title-small")
- :headline-large-typography (= typography "headline-large")
- :headline-medium-typography (= typography "headline-medium")
- :headline-small-typography (= typography "headline-small")
- :body-large-typography (= typography "body-large")
- :body-medium-typography (= typography "body-medium")
- :body-small-typography (= typography "body-small")
- :code-font-typography (= typography "code-font"))})]
+ (let [tag (or tag "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)
+ :title-small-typography (= typography t/title-small)
+ :headline-large-typography (= typography t/headline-large)
+ :headline-medium-typography (= typography t/headline-medium)
+ :headline-small-typography (= typography t/headline-small)
+ :body-large-typography (= typography t/body-large)
+ :body-medium-typography (= typography t/body-medium)
+ :body-small-typography (= typography t/body-small)
+ :code-font-typography (= typography t/code-font)))
+ props (mf/spread-props props {:class class})]
[:> tag props
children]))
diff --git a/frontend/src/app/main/ui/ds/foundations/text.mdx b/frontend/src/app/main/ui/ds/foundations/text.mdx
new file mode 100644
index 000000000..0f526cf27
--- /dev/null
+++ b/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";
+
+
+
+# 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 `` per page.
+
+Headings are used to navigate the page and must follow the `` -> `` -> `` -> `` -> `` -> `` hierarchy.
+For example, do not skip levels in the `` -> `` hierarchy if there is no `` in between.
+
+We should not choose the heading level by its visual aspect.
diff --git a/frontend/src/app/main/ui/ds/foundations/text.scss b/frontend/src/app/main/ui/ds/foundations/text.scss
new file mode 100644
index 000000000..1cd69b7bc
--- /dev/null
+++ b/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");
+}
diff --git a/frontend/src/app/main/ui/ds/foundations/text.stories.jsx b/frontend/src/app/main/ui/ds/foundations/text.stories.jsx
new file mode 100644
index 000000000..703522c3f
--- /dev/null
+++ b/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: () => (
+
+
+
+ p / Title
+
+
+
+
+ span / Title large
+
+
+
+
+ div / Title large
+
+
+
+ ),
+};
+
+export const TypographyParagraph = {
+ render: () => (
+
+
+
+ p / Title large
+
+
+
+
+ p / Title medium
+
+
+
+
+ p / Code font
+
+
+
+ ),
+};
diff --git a/frontend/src/app/main/ui/ds/foundations/typography.cljs b/frontend/src/app/main/ui/ds/foundations/typography.cljs
index 1a211b110..9fd00b2c5 100644
--- a/frontend/src/app/main/ui/ds/foundations/typography.cljs
+++ b/frontend/src/app/main/ui/ds/foundations/typography.cljs
@@ -29,4 +29,4 @@
body-large
body-medium
body-small
- code-font})
\ No newline at end of file
+ code-font})