mirror of
https://github.com/penpot/penpot.git
synced 2025-04-06 12:01:19 -05:00
Merge pull request #4865 from penpot/ladybenko-8347-storybook-controls
Use Storybook controls for stories
This commit is contained in:
Eva Marco
GitHub
commit
5ab7123566
27 changed files with 231 additions and 662 deletions
|
|
@ -2,12 +2,7 @@
|
|||
const config = {
|
||||
stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
|
||||
staticDirs: ["../resources/public"],
|
||||
addons: [
|
||||
"@storybook/addon-links",
|
||||
"@storybook/addon-essentials",
|
||||
"@storybook/addon-onboarding",
|
||||
"@storybook/addon-interactions",
|
||||
],
|
||||
addons: ["@storybook/addon-essentials"],
|
||||
framework: {
|
||||
name: "@storybook/react-vite",
|
||||
options: {},
|
||||
|
|
|
|||
|
|
@ -42,13 +42,9 @@
|
|||
"devDependencies": {
|
||||
"@playwright/test": "1.44.1",
|
||||
"@storybook/addon-essentials": "^7.6.17",
|
||||
"@storybook/addon-interactions": "^7.6.17",
|
||||
"@storybook/addon-links": "^7.6.17",
|
||||
"@storybook/addon-onboarding": "^1.0.11",
|
||||
"@storybook/blocks": "^7.6.17",
|
||||
"@storybook/react": "^7.6.17",
|
||||
"@storybook/react-vite": "^7.6.17",
|
||||
"@storybook/testing-library": "^0.2.2",
|
||||
"@types/node": "^20.11.20",
|
||||
"autoprefixer": "^10.4.19",
|
||||
"concurrently": "^8.2.2",
|
||||
|
|
|
|||
|
|
@ -6,11 +6,11 @@
|
|||
|
||||
(ns app.main.ui.ds
|
||||
(:require
|
||||
[app.main.ui.ds.foundations.heading :refer [heading*]]
|
||||
[app.main.ui.ds.foundations.icon :refer [icon* icon-list]]
|
||||
[app.main.ui.ds.foundations.raw-svg :refer [raw-svg* raw-svg-list]]
|
||||
[app.main.ui.ds.foundations.text :refer [text*]]
|
||||
[app.main.ui.ds.foundations.assets.icon :refer [icon* icon-list]]
|
||||
[app.main.ui.ds.foundations.assets.raw-svg :refer [raw-svg* raw-svg-list]]
|
||||
[app.main.ui.ds.foundations.typography :refer [typography-list]]
|
||||
[app.main.ui.ds.foundations.typography.heading :refer [heading*]]
|
||||
[app.main.ui.ds.foundations.typography.text :refer [text*]]
|
||||
[app.main.ui.ds.storybook :as sb]))
|
||||
|
||||
(def default
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
;;
|
||||
;; Copyright (c) KALEIDOS INC
|
||||
|
||||
(ns app.main.ui.ds.foundations.icon
|
||||
(ns app.main.ui.ds.foundations.assets.icon
|
||||
(:require
|
||||
[clojure.core :as c]
|
||||
[cuerdas.core :as str]
|
||||
|
|
@ -4,12 +4,12 @@
|
|||
;;
|
||||
;; Copyright (c) KALEIDOS INC
|
||||
|
||||
(ns app.main.ui.ds.foundations.icon
|
||||
(ns app.main.ui.ds.foundations.assets.icon
|
||||
(:refer-clojure :exclude [mask])
|
||||
(:require-macros
|
||||
[app.common.data.macros :as dm]
|
||||
[app.main.style :as stl]
|
||||
[app.main.ui.ds.foundations.icon :refer [collect-icons]])
|
||||
[app.main.ui.ds.foundations.assets.icon :refer [collect-icons]])
|
||||
(:require
|
||||
[rumext.v2 :as mf]))
|
||||
|
||||
|
|
@ -279,10 +279,10 @@
|
|||
|
||||
(mf/defc icon*
|
||||
{::mf/props :obj}
|
||||
[{:keys [icon size class] :rest props}]
|
||||
[{:keys [id size class] :rest props}]
|
||||
(let [class (dm/str (or class "") " " (stl/css :icon))
|
||||
props (mf/spread-props props {:class class :width icon-size-m :height icon-size-m})
|
||||
size-px (cond (= size "s") icon-size-s :else icon-size-m)
|
||||
offset (/ (- icon-size-m size-px) 2)]
|
||||
[:> "svg" props
|
||||
[:use {:href (dm/str "#icon-" icon) :width size-px :height size-px :x offset :y offset}]]))
|
||||
[:use {:href (dm/str "#icon-" id) :width size-px :height size-px :x offset :y offset}]]))
|
||||
|
|
@ -41,13 +41,13 @@ Assuming the namespace is required as `i`:
|
|||
```clj
|
||||
(ns app.main.ui.foo
|
||||
(:require
|
||||
[app.main.ui.ds.foundations.icon :as i]))
|
||||
[app.main.ui.ds.foundations.assets.icon :as i]))
|
||||
```
|
||||
|
||||
You can now use the icon IDs defined in the namespace:
|
||||
|
||||
```clj
|
||||
[:> i/icon* {:icon i/pin}]
|
||||
[:> i/icon* {:id i/pin}]
|
||||
```
|
||||
|
||||
### Customizing colors
|
||||
|
|
@ -59,7 +59,7 @@ If you need to override this behavior, you can use a `class` in the `<Icon>`
|
|||
component and set `color` to whatever value you prefer:
|
||||
|
||||
```clj
|
||||
[:> i/icon* {:icon i/add :class (stl/css :toolbar-icon)}]
|
||||
[:> i/icon* {:id i/add :class (stl/css :toolbar-icon)}]
|
||||
```
|
||||
|
||||
```scss
|
||||
|
|
@ -74,7 +74,7 @@ By default, icons do not have any accessible text attached to them. You should
|
|||
add an `aria-label` attribute to set a proper text:
|
||||
|
||||
```clj
|
||||
[:> i/icon* {:icon i/add :aria-label (tr "foo.bar")}]
|
||||
[:> i/icon* {:id i/add :aria-label (tr "foo.bar")}]
|
||||
```
|
||||
|
||||
## Usage guidelines for design
|
||||
|
|
@ -6,21 +6,31 @@ const { StoryWrapper, StoryGrid, StoryGridCell, StoryHeader } =
|
|||
Components.storybook;
|
||||
const { icons } = Components.meta;
|
||||
|
||||
export default {
|
||||
title: "Foundations/Icons",
|
||||
component: Components.Icon,
|
||||
};
|
||||
|
||||
const iconList = Object.entries(icons)
|
||||
.map(([_, value]) => value)
|
||||
.sort();
|
||||
|
||||
export const AllIcons = {
|
||||
render: () => (
|
||||
export default {
|
||||
title: "Foundations/Assets/Icon",
|
||||
component: Components.Icon,
|
||||
argTypes: {
|
||||
id: {
|
||||
options: iconList,
|
||||
control: { type: "select" },
|
||||
},
|
||||
size: {
|
||||
options: ["m", "s"],
|
||||
control: { type: "radio" },
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const All = {
|
||||
render: ({ size }) => (
|
||||
<StoryWrapper theme="default">
|
||||
<StoryHeader>
|
||||
<h1>All Icons</h1>
|
||||
<p>Hover on an icon to see its ID</p>
|
||||
<p>Hover on an icon to see its ID.</p>
|
||||
</StoryHeader>
|
||||
<StoryGrid>
|
||||
{iconList.map((iconId) => (
|
||||
|
|
@ -29,29 +39,43 @@ export const AllIcons = {
|
|||
key={iconId}
|
||||
style={{ color: "var(--color-accent-primary)" }}
|
||||
>
|
||||
<Icon icon={iconId} />
|
||||
<Icon id={iconId} size={size} />
|
||||
</StoryGridCell>
|
||||
))}
|
||||
</StoryGrid>
|
||||
</StoryWrapper>
|
||||
),
|
||||
args: {
|
||||
size: "m",
|
||||
},
|
||||
parameters: {
|
||||
controls: { exclude: ["id", "size"] },
|
||||
backgrounds: { disable: true },
|
||||
},
|
||||
};
|
||||
|
||||
export const Default = {
|
||||
render: () => (
|
||||
render: ({ id, ...args }) => (
|
||||
<StoryWrapper theme="default">
|
||||
<Icon icon={icons.Pin} />
|
||||
<Icon id={id} {...args} />
|
||||
</StoryWrapper>
|
||||
),
|
||||
args: {
|
||||
id: "pin",
|
||||
},
|
||||
parameters: {
|
||||
controls: { exclude: ["size"] },
|
||||
},
|
||||
};
|
||||
|
||||
export const Small = {
|
||||
render: () => (
|
||||
export const CustomSize = {
|
||||
render: ({ id, size, ...args }) => (
|
||||
<StoryWrapper theme="default">
|
||||
<Icon icon={icons.Pin} size="s" />
|
||||
<Icon id={id} size={size} {...args} />
|
||||
</StoryWrapper>
|
||||
),
|
||||
args: {
|
||||
id: "pin",
|
||||
size: "m",
|
||||
},
|
||||
};
|
||||
|
|
@ -4,7 +4,7 @@
|
|||
;;
|
||||
;; Copyright (c) KALEIDOS INC
|
||||
|
||||
(ns app.main.ui.ds.foundations.raw-svg
|
||||
(ns app.main.ui.ds.foundations.assets.raw-svg
|
||||
(:require
|
||||
[clojure.core :as c]
|
||||
[cuerdas.core :as str]
|
||||
|
|
@ -4,11 +4,11 @@
|
|||
;;
|
||||
;; Copyright (c) KALEIDOS INC
|
||||
|
||||
(ns app.main.ui.ds.foundations.raw-svg
|
||||
(ns app.main.ui.ds.foundations.assets.raw-svg
|
||||
(:refer-clojure :exclude [mask])
|
||||
(:require-macros
|
||||
[app.common.data.macros :as dm]
|
||||
[app.main.ui.ds.foundations.raw-svg :refer [collect-raw-svgs]])
|
||||
[app.main.ui.ds.foundations.assets.raw-svg :refer [collect-raw-svgs]])
|
||||
(:require
|
||||
[rumext.v2 :as mf]))
|
||||
|
||||
|
|
@ -32,6 +32,6 @@
|
|||
|
||||
(mf/defc raw-svg*
|
||||
{::mf/props :obj}
|
||||
[{:keys [asset] :rest props}]
|
||||
[{:keys [id] :rest props}]
|
||||
[:> "svg" props
|
||||
[:use {:href (dm/str "#asset-" asset)}]])
|
||||
[:use {:href (dm/str "#asset-" id)}]])
|
||||
|
|
@ -20,7 +20,7 @@ For convenience, asset IDs are available in the component namespace.
|
|||
```clj
|
||||
(ns app.main.ui.foo
|
||||
(:require
|
||||
[app.main.ui.ds.foundations.raw-svg :as svg]))
|
||||
[app.main.ui.ds.foundations.assets.raw-svg :as svg]))
|
||||
```
|
||||
|
||||
```clj
|
||||
|
|
@ -6,41 +6,51 @@ const { StoryWrapper, StoryGrid, StoryGridCell, StoryHeader } =
|
|||
Components.storybook;
|
||||
const { svgs } = Components.meta;
|
||||
|
||||
export default {
|
||||
title: "Foundations/RawSvg",
|
||||
component: Components.RawSvg,
|
||||
};
|
||||
|
||||
const assetList = Object.entries(svgs)
|
||||
.map(([_, value]) => value)
|
||||
.sort();
|
||||
|
||||
export const AllAssets = {
|
||||
render: () => (
|
||||
export default {
|
||||
title: "Foundations/Assets/RawSvg",
|
||||
component: Components.RawSvg,
|
||||
argTypes: {
|
||||
id: {
|
||||
options: assetList,
|
||||
control: { type: "select" },
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const All = {
|
||||
render: ({}) => (
|
||||
<StoryWrapper theme="light">
|
||||
<StoryHeader>
|
||||
<h1>All assets</h1>
|
||||
<p>Hover on a asset to see its id.</p>
|
||||
<h1>All SVG Assets</h1>
|
||||
<p>Hover on an asset to see its ID.</p>
|
||||
</StoryHeader>
|
||||
|
||||
<StoryGrid size="200">
|
||||
{assetList.map((x) => (
|
||||
<StoryGridCell key={x} title={x}>
|
||||
<RawSvg asset={x} style={{ maxWidth: "100%" }} />
|
||||
<RawSvg id={x} style={{ maxWidth: "100%" }} />
|
||||
</StoryGridCell>
|
||||
))}
|
||||
</StoryGrid>
|
||||
</StoryWrapper>
|
||||
),
|
||||
parameters: {
|
||||
controls: { exclude: ["id"] },
|
||||
backgrounds: { values: [{ name: "debug", value: "#ccc" }] },
|
||||
},
|
||||
};
|
||||
|
||||
export const Default = {
|
||||
render: () => (
|
||||
render: ({ id, ...args }) => (
|
||||
<StoryWrapper theme="default">
|
||||
<RawSvg asset={svgs.BrandGitlab} width="200" />
|
||||
<RawSvg id={id} {...args} width="200" />
|
||||
</StoryWrapper>
|
||||
),
|
||||
args: {
|
||||
id: "brand-gitlab",
|
||||
},
|
||||
};
|
||||
|
|
@ -1,54 +0,0 @@
|
|||
import * as React from "react";
|
||||
import Components from "@target/components";
|
||||
|
||||
const { Heading } = Components;
|
||||
const { StoryWrapper, StoryGridRow } = Components.storybook;
|
||||
|
||||
export default {
|
||||
title: "Foundations/Heading",
|
||||
component: Components.Heading,
|
||||
};
|
||||
|
||||
export const Levels = {
|
||||
render: () => (
|
||||
<StoryWrapper theme="default">
|
||||
<StoryGridRow title={"1 / display"}>
|
||||
<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>
|
||||
),
|
||||
};
|
||||
|
|
@ -1,48 +0,0 @@
|
|||
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.
|
||||
|
|
@ -1,54 +0,0 @@
|
|||
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>
|
||||
),
|
||||
};
|
||||
|
|
@ -18,7 +18,6 @@
|
|||
(def ^:typography-id body-small "body-small")
|
||||
(def ^:typography-id code-font "code-font")
|
||||
|
||||
|
||||
(def typography-list #{display
|
||||
title-large
|
||||
title-medium
|
||||
|
|
|
|||
|
|
@ -1,135 +0,0 @@
|
|||
import * as React from "react";
|
||||
import Components from "@target/components";
|
||||
|
||||
const { Heading } = Components;
|
||||
const { StoryWrapper, StoryHeader, StoryGridRow } = Components.storybook;
|
||||
|
||||
const typographyList = {
|
||||
display: {
|
||||
name: "Display",
|
||||
id: "display",
|
||||
size: "36px",
|
||||
weight: "400",
|
||||
line: "1.4",
|
||||
uppercase: false,
|
||||
font: "Work Sans",
|
||||
},
|
||||
titleLarge: {
|
||||
name: "Title large",
|
||||
id: "title-large",
|
||||
size: "24px",
|
||||
weight: "400",
|
||||
line: "1.4",
|
||||
uppercase: false,
|
||||
font: "Work Sans",
|
||||
},
|
||||
titleMedium: {
|
||||
name: "Title medium",
|
||||
id: "title-medium",
|
||||
size: "20px",
|
||||
weight: "400",
|
||||
line: "1.4",
|
||||
uppercase: false,
|
||||
font: "Work Sans",
|
||||
},
|
||||
titleSmall: {
|
||||
name: "Title small",
|
||||
id: "title-small",
|
||||
size: "14px",
|
||||
weight: "400",
|
||||
line: "1.2",
|
||||
uppercase: false,
|
||||
font: "Work Sans",
|
||||
},
|
||||
headlineLarge: {
|
||||
name: "Headline large",
|
||||
id: "headline-large",
|
||||
size: "18px",
|
||||
weight: "400",
|
||||
line: "1.4",
|
||||
uppercase: true,
|
||||
font: "Work Sans",
|
||||
},
|
||||
headlineMedium: {
|
||||
name: "Headline medium",
|
||||
id: "headline-medium",
|
||||
size: "16px",
|
||||
weight: "400",
|
||||
line: "1.4",
|
||||
uppercase: true,
|
||||
font: "Work Sans",
|
||||
},
|
||||
headlineSmall: {
|
||||
name: "Headline small",
|
||||
id: "headline-small",
|
||||
size: "12px",
|
||||
weight: "500",
|
||||
line: "1.2",
|
||||
uppercase: true,
|
||||
font: "Work Sans",
|
||||
},
|
||||
bodyLarge: {
|
||||
name: "Body large",
|
||||
id: "body-large",
|
||||
size: "16px",
|
||||
weight: "400",
|
||||
line: "1.4",
|
||||
uppercase: false,
|
||||
font: "Work Sans",
|
||||
},
|
||||
bodyMedium: {
|
||||
name: "Body medium",
|
||||
id: "body-medium",
|
||||
size: "14px",
|
||||
weight: "400",
|
||||
line: "1.3",
|
||||
uppercase: false,
|
||||
font: "Work Sans",
|
||||
},
|
||||
bodySmall: {
|
||||
name: "Body small",
|
||||
id: "body-small",
|
||||
size: "12px",
|
||||
weight: "400",
|
||||
line: "1.3",
|
||||
uppercase: false,
|
||||
font: "Work Sans",
|
||||
},
|
||||
codeFont: {
|
||||
name: "Code font",
|
||||
id: "code-font",
|
||||
size: "12px",
|
||||
weight: "400",
|
||||
line: "1.2",
|
||||
uppercase: false,
|
||||
font: "Roboto Mono",
|
||||
},
|
||||
};
|
||||
|
||||
export default {
|
||||
title: "Foundations/Typography",
|
||||
component: Components.StoryHeader,
|
||||
};
|
||||
|
||||
export const AllTypography = {
|
||||
render: () => (
|
||||
<StoryWrapper theme="default">
|
||||
<StoryHeader>
|
||||
<h1>All Typography</h1>
|
||||
<p>Hover on a heading to see its ID</p>
|
||||
</StoryHeader>
|
||||
{Object.values(typographyList).map(
|
||||
({ id, name, size, weight, line, font }) => (
|
||||
<StoryGridRow title={id} key={id}>
|
||||
<Heading level="1" typography={id}>
|
||||
{name} - {weight} - {size}/{line} {font}
|
||||
</Heading>
|
||||
</StoryGridRow>
|
||||
),
|
||||
)}
|
||||
</StoryWrapper>
|
||||
),
|
||||
parameters: {
|
||||
backgrounds: { disable: true },
|
||||
},
|
||||
};
|
||||
|
|
@ -4,7 +4,7 @@
|
|||
;;
|
||||
;; Copyright (c) KALEIDOS INC
|
||||
|
||||
(ns app.main.ui.ds.foundations.heading
|
||||
(ns app.main.ui.ds.foundations.typography.heading
|
||||
(:require-macros
|
||||
[app.common.data.macros :as dm]
|
||||
[app.main.style :as stl])
|
||||
|
|
@ -25,7 +25,6 @@
|
|||
(assert (or (valid-level? level)
|
||||
(nil? level))
|
||||
(dm/str "Invalid level: " level ". Valid numbers are 1 to 6."))
|
||||
|
||||
(assert (valid-typography? (dm/str typography))
|
||||
(dm/str typography " is an unknown typography"))
|
||||
|
||||
|
|
@ -11,7 +11,7 @@ This component will add a heading tag element to our code.
|
|||
|
||||
This components accepts to props:
|
||||
|
||||
- `level` (default value: `1`) : A number from `1` to `6`, to set the heading level (i.e. `<h1>`, `<h2>`, etc.).
|
||||
- `level` (default value: `1`) : A number from `1` to `6`, to set the heading level (i.e. `<h1>`, `<h2>`, etc.).
|
||||
- `typography` (mandatory): Any of the [supported typography IDs](?path=/docs/foundations-typography--docs).
|
||||
|
||||
You can check passed props to renderized components on hover `level / typography`;
|
||||
|
|
@ -28,8 +28,8 @@ Assuming the namespace of the typography is required as `t`:
|
|||
```clj
|
||||
(ns app.main.ui.foo
|
||||
(:require
|
||||
[app.main.ui.ds.foundations.heading :refer [heading*]]
|
||||
[app.main.ui.ds.foundations.typography :as t]))
|
||||
[app.main.ui.ds.foundations.typography :as t]
|
||||
[app.main.ui.ds.foundations.typography.heading :refer [heading*]]))
|
||||
```
|
||||
|
||||
You can now use the typography IDs defined in the namespace:
|
||||
|
|
@ -3,7 +3,7 @@
|
|||
// file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
//
|
||||
// Copyright (c) KALEIDOS INC
|
||||
@use "../typography.scss" as t;
|
||||
@use "../../typography.scss" as t;
|
||||
|
||||
.display-typography {
|
||||
@include t.use-typography("display");
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
import * as React from "react";
|
||||
import Components from "@target/components";
|
||||
|
||||
const { Heading } = Components;
|
||||
const { StoryWrapper } = Components.storybook;
|
||||
const { typography } = Components.meta;
|
||||
|
||||
const typographyIds = typography.sort();
|
||||
|
||||
export default {
|
||||
title: "Foundations/Typography/Heading",
|
||||
component: Components.Heading,
|
||||
argTypes: {
|
||||
level: {
|
||||
options: [1, 2, 3, 4, 5, 6],
|
||||
control: { type: "select" },
|
||||
},
|
||||
typography: {
|
||||
options: typographyIds,
|
||||
control: { type: "select" },
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const AnyHeading = {
|
||||
name: "Heading",
|
||||
render: ({ level, typography, ...args }) => (
|
||||
<StoryWrapper theme="default">
|
||||
<Heading level={level} typography={typography} {...args}>
|
||||
Lorem ipsum
|
||||
</Heading>
|
||||
</StoryWrapper>
|
||||
),
|
||||
args: {
|
||||
level: 1,
|
||||
typography: "display",
|
||||
},
|
||||
};
|
||||
|
|
@ -4,7 +4,7 @@
|
|||
;;
|
||||
;; Copyright (c) KALEIDOS INC
|
||||
|
||||
(ns app.main.ui.ds.foundations.text
|
||||
(ns app.main.ui.ds.foundations.typography.text
|
||||
(:require-macros
|
||||
[app.common.data.macros :as dm]
|
||||
[app.main.style :as stl])
|
||||
|
|
@ -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 (if (or (empty? as) (nil? as)) "p" as)
|
||||
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]))
|
||||
31
frontend/src/app/main/ui/ds/foundations/typography/text.mdx
Normal file
31
frontend/src/app/main/ui/ds/foundations/typography/text.mdx
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
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
|
||||
|
||||
### 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.typography :as t]
|
||||
[app.main.ui.ds.foundations.typography.text :refer [text*]]))
|
||||
```
|
||||
|
||||
You can now use the typography IDs defined in the namespace:
|
||||
|
||||
```clj
|
||||
[:> text* {:typography t/title-large :as "p"} "Welcome to Penpot"]
|
||||
```
|
||||
|
|
@ -3,7 +3,7 @@
|
|||
// file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
//
|
||||
// Copyright (c) KALEIDOS INC
|
||||
@use "../typography.scss" as t;
|
||||
@use "../../typography.scss" as t;
|
||||
|
||||
.display-typography {
|
||||
@include t.use-typography("display");
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
import * as React from "react";
|
||||
import Components from "@target/components";
|
||||
|
||||
const { Text } = Components;
|
||||
const { StoryWrapper } = Components.storybook;
|
||||
const { typography } = Components.meta;
|
||||
|
||||
const typographyIds = typography.sort();
|
||||
|
||||
export default {
|
||||
title: "Foundations/Typography/Text",
|
||||
component: Text,
|
||||
argTypes: {
|
||||
typography: {
|
||||
options: typographyIds,
|
||||
control: { type: "select" },
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const Default = {
|
||||
render: ({ typography, ...args }) => (
|
||||
<StoryWrapper theme="default">
|
||||
<Text typography={typography} {...args}>
|
||||
Lorem ipsum
|
||||
</Text>
|
||||
</StoryWrapper>
|
||||
),
|
||||
args: {
|
||||
typography: "display",
|
||||
},
|
||||
};
|
||||
|
||||
export const CustomTag = {
|
||||
render: ({ typography, ...args }) => (
|
||||
<StoryWrapper theme="default">
|
||||
<Text typography={typography} {...args}>
|
||||
Lorem ipsum
|
||||
</Text>
|
||||
</StoryWrapper>
|
||||
),
|
||||
args: {
|
||||
typography: "display",
|
||||
as: "li",
|
||||
},
|
||||
};
|
||||
|
|
@ -1,8 +1,7 @@
|
|||
import { Canvas, Meta, Story } from "@storybook/blocks";
|
||||
import * as TypographyStories from "./typography.stories";
|
||||
import { Canvas, Meta } from "@storybook/blocks";
|
||||
import Components from "@target/components";
|
||||
|
||||
<Meta of={TypographyStories} />
|
||||
<Meta title="Foundations/Typography" />
|
||||
|
||||
# Typography
|
||||
|
||||
|
|
@ -19,7 +18,7 @@ This situation is something to be corrected in future improvements.
|
|||
Typographic colours are used in text elements such as headers
|
||||
and body and in the various components that make up the tool...
|
||||
|
||||
The colours used in typography are the Foreground colours such
|
||||
The colours used in typography are the Foreground colours such
|
||||
`--color-foreground-primary` or `--color-foreground-secondary`
|
||||
but different colours can be applied in specific component
|
||||
applications with their own styles, such as buttons.
|
||||
|
|
@ -55,7 +54,7 @@ for exceptions based on the size of the components.
|
|||
Hero style text for transitional pages (Login). If too large use large title in narrow windows.
|
||||
|
||||
<Canvas style={{background: "var(--color-background-primary)", color: "var(--color-foreground-primary)"}}>
|
||||
<Components.Heading level="1" typography="display" >Display - 400 - 36px/1.4 "Work Sans" </Components.Heading>
|
||||
<Components.Text typography="display" >Display - 400 - 36px/1.4 "Work Sans" </Components.Text>
|
||||
</Canvas>
|
||||
|
||||
### Title large `title-large`
|
||||
|
|
@ -64,7 +63,7 @@ Page headers for main pages (dashboard, Profiles...). If too big use title
|
|||
(medium) in narrow windows.
|
||||
|
||||
<Canvas style={{background: "var(--color-background-primary)", color: "var(--color-foreground-primary)"}}>
|
||||
<Components.Heading level="1" typography="title-large" >Title large - 400 - 24px/1.4 "Work Sans" </Components.Heading>
|
||||
<Components.Text typography="title-large" >Title large - 400 - 24px/1.4 "Work Sans" </Components.Text>
|
||||
</Canvas>
|
||||
|
||||
### Title medium `title-medium`
|
||||
|
|
@ -73,7 +72,7 @@ Default page title. Equivalent line height of 32px matches the height
|
|||
of buttons and other medium controls. Ideal for page header layout.
|
||||
|
||||
<Canvas style={{background: "var(--color-background-primary)", color: "var(--color-foreground-primary)"}}>
|
||||
<Components.Heading level="1" typography="title-medium" >Title medium - 400 - 20px/1.4 "Work Sans"</Components.Heading>
|
||||
<Components.Text typography="title-medium" >Title medium - 400 - 20px/1.4 "Work Sans"</Components.Text>
|
||||
</Canvas>
|
||||
|
||||
### Title small `title-small`
|
||||
|
|
@ -81,7 +80,7 @@ of buttons and other medium controls. Ideal for page header layout.
|
|||
Uses the same size as body (large).
|
||||
|
||||
<Canvas style={{background: "var(--color-background-primary)", color: "var(--color-foreground-primary)"}}>
|
||||
<Components.Heading level="1" typography="title-small" >Title small - 400 - 14px/1.2 "Work Sans"</Components.Heading>
|
||||
<Components.Text typography="title-small" >Title small - 400 - 14px/1.2 "Work Sans"</Components.Text>
|
||||
</Canvas>
|
||||
|
||||
## Headline
|
||||
|
|
@ -92,20 +91,20 @@ page titles (automated action titles, for example). Same line height as title (m
|
|||
### Headline large `headline-large`
|
||||
|
||||
<Canvas style={{background: "var(--color-background-primary)", color: "var(--color-foreground-primary)"}}>
|
||||
<Components.Heading level="1" typography="headline-large" >Headline large - 400 - 18px/1.4 "Work Sans"</Components.Heading>
|
||||
<Components.Text typography="headline-large" >Headline large - 400 - 18px/1.4 "Work Sans"</Components.Text>
|
||||
</Canvas>
|
||||
|
||||
### Headline medium `headline-medium`
|
||||
|
||||
<Canvas style={{background: "var(--color-background-primary)", color: "var(--color-foreground-primary)"}}>
|
||||
<Components.Heading level="1" typography="headline-medium" >Headline medium - 400 - 16px/1.4 "Work Sans"</Components.Heading>
|
||||
<Components.Text typography="headline-medium" >Headline medium - 400 - 16px/1.4 "Work Sans"</Components.Text>
|
||||
</Canvas>
|
||||
|
||||
|
||||
### Headline small `headline-small`
|
||||
|
||||
<Canvas style={{background: "var(--color-background-primary)", color: "var(--color-foreground-primary)"}}>
|
||||
<Components.Heading level="1" typography="headline-small" >Headline small - 500 - 12px/1.2 "Work Sans"</Components.Heading>
|
||||
<Components.Text typography="headline-small" >Headline small - 500 - 12px/1.2 "Work Sans"</Components.Text>
|
||||
</Canvas>
|
||||
|
||||
## Body
|
||||
|
|
@ -115,7 +114,7 @@ page titles (automated action titles, for example). Same line height as title (m
|
|||
Generic content.
|
||||
|
||||
<Canvas style={{background: "var(--color-background-primary)", color: "var(--color-foreground-primary)"}}>
|
||||
<Components.Heading level="1" typography="body-large" >Body large - 400 - 16px/1.4 "Work Sans"</Components.Heading>
|
||||
<Components.Text typography="body-large" >Body large - 400 - 16px/1.4 "Work Sans"</Components.Text>
|
||||
</Canvas>
|
||||
|
||||
### Body medium `body-medium`
|
||||
|
|
@ -123,7 +122,7 @@ Generic content.
|
|||
Default UI font. Most commonly used for body text.
|
||||
|
||||
<Canvas style={{background: "var(--color-background-primary)", color: "var(--color-foreground-primary)"}}>
|
||||
<Components.Heading level="1" typography="body-medium" >Body medium - 400 - 14px/1.3 "Work Sans"</Components.Heading>
|
||||
<Components.Text typography="body-medium" >Body medium - 400 - 14px/1.3 "Work Sans"</Components.Text>
|
||||
</Canvas>
|
||||
|
||||
|
||||
|
|
@ -133,7 +132,7 @@ Small compact font with a line height of less than 16px.
|
|||
Use for single line scenarios, as the small size does not meet accessibility requirements.
|
||||
|
||||
<Canvas style={{background: "var(--color-background-primary)", color: "var(--color-foreground-primary)"}}>
|
||||
<Components.Heading level="1" typography="body-small" >Body small - 400 - 12px/1.3 "Work Sans"</Components.Heading>
|
||||
<Components.Text typography="body-small" >Body small - 400 - 12px/1.3 "Work Sans"</Components.Text>
|
||||
</Canvas>
|
||||
|
||||
## Code font `code-font`
|
||||
|
|
@ -141,7 +140,7 @@ Use for single line scenarios, as the small size does not meet accessibility req
|
|||
Default style for rendering code blocks.
|
||||
|
||||
<Canvas style={{background: "var(--color-background-primary)", color: "var(--color-foreground-primary)"}}>
|
||||
<Components.Heading level="1" typography="code-font" >Code font - 400 - 12px/1.2 "Roboto Mono"</Components.Heading>
|
||||
<Components.Text typography="code-font" >Code font - 400 - 12px/1.2 "Roboto Mono"</Components.Text>
|
||||
</Canvas>
|
||||
|
||||
## Fonts
|
||||
|
|
@ -26,7 +26,7 @@ __metadata:
|
|||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@babel/code-frame@npm:^7.0.0, @babel/code-frame@npm:^7.10.4, @babel/code-frame@npm:^7.23.5, @babel/code-frame@npm:^7.24.2":
|
||||
"@babel/code-frame@npm:^7.0.0, @babel/code-frame@npm:^7.23.5, @babel/code-frame@npm:^7.24.2":
|
||||
version: 7.24.2
|
||||
resolution: "@babel/code-frame@npm:7.24.2"
|
||||
dependencies:
|
||||
|
|
@ -1428,7 +1428,7 @@ __metadata:
|
|||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.13.10, @babel/runtime@npm:^7.17.8, @babel/runtime@npm:^7.21.0, @babel/runtime@npm:^7.7.2, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.8.7":
|
||||
"@babel/runtime@npm:^7.13.10, @babel/runtime@npm:^7.17.8, @babel/runtime@npm:^7.21.0, @babel/runtime@npm:^7.7.2, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.8.7":
|
||||
version: 7.24.5
|
||||
resolution: "@babel/runtime@npm:7.24.5"
|
||||
dependencies:
|
||||
|
|
@ -1981,19 +1981,6 @@ __metadata:
|
|||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@jest/types@npm:^27.5.1":
|
||||
version: 27.5.1
|
||||
resolution: "@jest/types@npm:27.5.1"
|
||||
dependencies:
|
||||
"@types/istanbul-lib-coverage": "npm:^2.0.0"
|
||||
"@types/istanbul-reports": "npm:^3.0.0"
|
||||
"@types/node": "npm:*"
|
||||
"@types/yargs": "npm:^16.0.0"
|
||||
chalk: "npm:^4.0.0"
|
||||
checksum: 10c0/4598b302398db0eb77168b75a6c58148ea02cc9b9f21c5d1bbe985c1c9257110a5653cf7b901c3cab87fba231e3fed83633687f1c0903b4bc6939ab2a8452504
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@jest/types@npm:^29.6.3":
|
||||
version: 29.6.3
|
||||
resolution: "@jest/types@npm:29.6.3"
|
||||
|
|
@ -3104,35 +3091,6 @@ __metadata:
|
|||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@storybook/addon-interactions@npm:^7.6.17":
|
||||
version: 7.6.19
|
||||
resolution: "@storybook/addon-interactions@npm:7.6.19"
|
||||
dependencies:
|
||||
"@storybook/global": "npm:^5.0.0"
|
||||
"@storybook/types": "npm:7.6.19"
|
||||
jest-mock: "npm:^27.0.6"
|
||||
polished: "npm:^4.2.2"
|
||||
ts-dedent: "npm:^2.2.0"
|
||||
checksum: 10c0/430d62298930b5e78398024de99f8f5d19ef22d7eda51015fa88e8ed3fafd2e003b0c8694a97192848ebf3e013ba363d96bf753ef1ff844e8129a9c47d41894c
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@storybook/addon-links@npm:^7.6.17":
|
||||
version: 7.6.19
|
||||
resolution: "@storybook/addon-links@npm:7.6.19"
|
||||
dependencies:
|
||||
"@storybook/csf": "npm:^0.1.2"
|
||||
"@storybook/global": "npm:^5.0.0"
|
||||
ts-dedent: "npm:^2.0.0"
|
||||
peerDependencies:
|
||||
react: ^16.8.0 || ^17.0.0 || ^18.0.0
|
||||
peerDependenciesMeta:
|
||||
react:
|
||||
optional: true
|
||||
checksum: 10c0/c7f40095e8f00ed1dc9a6118b074d513e3a7dd77334e044d152b42ea5922a0fd26397bbcd45abaa2968a3b27a27b810af0e8039ab07ecee7043582fa2a14ca67
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@storybook/addon-measure@npm:7.6.19":
|
||||
version: 7.6.19
|
||||
resolution: "@storybook/addon-measure@npm:7.6.19"
|
||||
|
|
@ -3143,19 +3101,6 @@ __metadata:
|
|||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@storybook/addon-onboarding@npm:^1.0.11":
|
||||
version: 1.0.11
|
||||
resolution: "@storybook/addon-onboarding@npm:1.0.11"
|
||||
dependencies:
|
||||
"@storybook/telemetry": "npm:^7.1.0"
|
||||
react-confetti: "npm:^6.1.0"
|
||||
peerDependencies:
|
||||
react: ^16.8.0 || ^17.0.0 || ^18.0.0
|
||||
react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
|
||||
checksum: 10c0/ca3de3eb85fb6d04309dbc07c26956777c064bb5032fb99aca3e43361b0816ac4326183aac99204d795fdc2010aa69c4978353c70a42926e9da0819343fcd2a0
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@storybook/addon-outline@npm:7.6.19":
|
||||
version: 7.6.19
|
||||
resolution: "@storybook/addon-outline@npm:7.6.19"
|
||||
|
|
@ -3712,7 +3657,7 @@ __metadata:
|
|||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@storybook/telemetry@npm:7.6.19, @storybook/telemetry@npm:^7.1.0":
|
||||
"@storybook/telemetry@npm:7.6.19":
|
||||
version: 7.6.19
|
||||
resolution: "@storybook/telemetry@npm:7.6.19"
|
||||
dependencies:
|
||||
|
|
@ -3728,17 +3673,6 @@ __metadata:
|
|||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@storybook/testing-library@npm:^0.2.2":
|
||||
version: 0.2.2
|
||||
resolution: "@storybook/testing-library@npm:0.2.2"
|
||||
dependencies:
|
||||
"@testing-library/dom": "npm:^9.0.0"
|
||||
"@testing-library/user-event": "npm:^14.4.0"
|
||||
ts-dedent: "npm:^2.2.0"
|
||||
checksum: 10c0/3179c74148c92267ea449068ce9fb00bf960dbf06654354de7869428415d16dc730a0d58b5adca7619d21e5a058ae0bf713e34c09be8bca574388ec0106c5068
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@storybook/theming@npm:7.6.19":
|
||||
version: 7.6.19
|
||||
resolution: "@storybook/theming@npm:7.6.19"
|
||||
|
|
@ -3766,31 +3700,6 @@ __metadata:
|
|||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@testing-library/dom@npm:^9.0.0":
|
||||
version: 9.3.4
|
||||
resolution: "@testing-library/dom@npm:9.3.4"
|
||||
dependencies:
|
||||
"@babel/code-frame": "npm:^7.10.4"
|
||||
"@babel/runtime": "npm:^7.12.5"
|
||||
"@types/aria-query": "npm:^5.0.1"
|
||||
aria-query: "npm:5.1.3"
|
||||
chalk: "npm:^4.1.0"
|
||||
dom-accessibility-api: "npm:^0.5.9"
|
||||
lz-string: "npm:^1.5.0"
|
||||
pretty-format: "npm:^27.0.2"
|
||||
checksum: 10c0/147da340e8199d7f98f3a4ad8aa22ed55b914b83957efa5eb22bfea021a979ebe5a5182afa9c1e5b7a5f99a7f6744a5a4d9325ae46ec3b33b5a15aed8750d794
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@testing-library/user-event@npm:^14.4.0":
|
||||
version: 14.5.2
|
||||
resolution: "@testing-library/user-event@npm:14.5.2"
|
||||
peerDependencies:
|
||||
"@testing-library/dom": ">=7.21.4"
|
||||
checksum: 10c0/68a0c2aa28a3c8e6eb05cafee29705438d7d8a9427423ce5064d44f19c29e89b5636de46dd2f28620fb10abba75c67130185bbc3aa23ac1163a227a5f36641e1
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@trysound/sax@npm:0.2.0":
|
||||
version: 0.2.0
|
||||
resolution: "@trysound/sax@npm:0.2.0"
|
||||
|
|
@ -3798,13 +3707,6 @@ __metadata:
|
|||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@types/aria-query@npm:^5.0.1":
|
||||
version: 5.0.4
|
||||
resolution: "@types/aria-query@npm:5.0.4"
|
||||
checksum: 10c0/dc667bc6a3acc7bba2bccf8c23d56cb1f2f4defaa704cfef595437107efaa972d3b3db9ec1d66bc2711bfc35086821edd32c302bffab36f2e79b97f312069f08
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@types/babel__core@npm:^7.0.0, @types/babel__core@npm:^7.18.0, @types/babel__core@npm:^7.20.5":
|
||||
version: 7.20.5
|
||||
resolution: "@types/babel__core@npm:7.20.5"
|
||||
|
|
@ -4183,15 +4085,6 @@ __metadata:
|
|||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@types/yargs@npm:^16.0.0":
|
||||
version: 16.0.9
|
||||
resolution: "@types/yargs@npm:16.0.9"
|
||||
dependencies:
|
||||
"@types/yargs-parser": "npm:*"
|
||||
checksum: 10c0/be24bd9a56c97ddb2964c1c18f5b9fe8271a50e100dc6945989901aae58f7ce6fb8f3a591c749a518401b6301358dbd1997e83c36138a297094feae7f9ac8211
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@types/yargs@npm:^17.0.8":
|
||||
version: 17.0.32
|
||||
resolution: "@types/yargs@npm:17.0.32"
|
||||
|
|
@ -4570,15 +4463,6 @@ __metadata:
|
|||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"aria-query@npm:5.1.3":
|
||||
version: 5.1.3
|
||||
resolution: "aria-query@npm:5.1.3"
|
||||
dependencies:
|
||||
deep-equal: "npm:^2.0.5"
|
||||
checksum: 10c0/edcbc8044c4663d6f88f785e983e6784f98cb62b4ba1e9dd8d61b725d0203e4cfca38d676aee984c31f354103461102a3d583aa4fbe4fd0a89b679744f4e5faf
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"arr-diff@npm:^4.0.0":
|
||||
version: 4.0.0
|
||||
resolution: "arr-diff@npm:4.0.0"
|
||||
|
|
@ -4618,7 +4502,7 @@ __metadata:
|
|||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"array-buffer-byte-length@npm:^1.0.0, array-buffer-byte-length@npm:^1.0.1":
|
||||
"array-buffer-byte-length@npm:^1.0.1":
|
||||
version: 1.0.1
|
||||
resolution: "array-buffer-byte-length@npm:1.0.1"
|
||||
dependencies:
|
||||
|
|
@ -6325,32 +6209,6 @@ __metadata:
|
|||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"deep-equal@npm:^2.0.5":
|
||||
version: 2.2.3
|
||||
resolution: "deep-equal@npm:2.2.3"
|
||||
dependencies:
|
||||
array-buffer-byte-length: "npm:^1.0.0"
|
||||
call-bind: "npm:^1.0.5"
|
||||
es-get-iterator: "npm:^1.1.3"
|
||||
get-intrinsic: "npm:^1.2.2"
|
||||
is-arguments: "npm:^1.1.1"
|
||||
is-array-buffer: "npm:^3.0.2"
|
||||
is-date-object: "npm:^1.0.5"
|
||||
is-regex: "npm:^1.1.4"
|
||||
is-shared-array-buffer: "npm:^1.0.2"
|
||||
isarray: "npm:^2.0.5"
|
||||
object-is: "npm:^1.1.5"
|
||||
object-keys: "npm:^1.1.1"
|
||||
object.assign: "npm:^4.1.4"
|
||||
regexp.prototype.flags: "npm:^1.5.1"
|
||||
side-channel: "npm:^1.0.4"
|
||||
which-boxed-primitive: "npm:^1.0.2"
|
||||
which-collection: "npm:^1.0.1"
|
||||
which-typed-array: "npm:^1.1.13"
|
||||
checksum: 10c0/a48244f90fa989f63ff5ef0cc6de1e4916b48ea0220a9c89a378561960814794a5800c600254482a2c8fd2e49d6c2e196131dc983976adb024c94a42dfe4949f
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"default-browser-id@npm:3.0.0":
|
||||
version: 3.0.0
|
||||
resolution: "default-browser-id@npm:3.0.0"
|
||||
|
|
@ -6597,13 +6455,6 @@ __metadata:
|
|||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"dom-accessibility-api@npm:^0.5.9":
|
||||
version: 0.5.16
|
||||
resolution: "dom-accessibility-api@npm:0.5.16"
|
||||
checksum: 10c0/b2c2eda4fae568977cdac27a9f0c001edf4f95a6a6191dfa611e3721db2478d1badc01db5bb4fa8a848aeee13e442a6c2a4386d65ec65a1436f24715a2f8d053
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"dom-helpers@npm:^5.1.3":
|
||||
version: 5.2.1
|
||||
resolution: "dom-helpers@npm:5.2.1"
|
||||
|
|
@ -6932,23 +6783,6 @@ __metadata:
|
|||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"es-get-iterator@npm:^1.1.3":
|
||||
version: 1.1.3
|
||||
resolution: "es-get-iterator@npm:1.1.3"
|
||||
dependencies:
|
||||
call-bind: "npm:^1.0.2"
|
||||
get-intrinsic: "npm:^1.1.3"
|
||||
has-symbols: "npm:^1.0.3"
|
||||
is-arguments: "npm:^1.1.1"
|
||||
is-map: "npm:^2.0.2"
|
||||
is-set: "npm:^2.0.2"
|
||||
is-string: "npm:^1.0.7"
|
||||
isarray: "npm:^2.0.5"
|
||||
stop-iteration-iterator: "npm:^1.0.0"
|
||||
checksum: 10c0/ebd11effa79851ea75d7f079405f9d0dc185559fd65d986c6afea59a0ff2d46c2ed8675f19f03dce7429d7f6c14ff9aede8d121fbab78d75cfda6a263030bac0
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"es-module-lexer@npm:^0.9.3":
|
||||
version: 0.9.3
|
||||
resolution: "es-module-lexer@npm:0.9.3"
|
||||
|
|
@ -7907,13 +7741,9 @@ __metadata:
|
|||
dependencies:
|
||||
"@playwright/test": "npm:1.44.1"
|
||||
"@storybook/addon-essentials": "npm:^7.6.17"
|
||||
"@storybook/addon-interactions": "npm:^7.6.17"
|
||||
"@storybook/addon-links": "npm:^7.6.17"
|
||||
"@storybook/addon-onboarding": "npm:^1.0.11"
|
||||
"@storybook/blocks": "npm:^7.6.17"
|
||||
"@storybook/react": "npm:^7.6.17"
|
||||
"@storybook/react-vite": "npm:^7.6.17"
|
||||
"@storybook/testing-library": "npm:^0.2.2"
|
||||
"@types/node": "npm:^20.11.20"
|
||||
autoprefixer: "npm:^10.4.19"
|
||||
compression: "npm:^1.7.4"
|
||||
|
|
@ -8164,7 +7994,7 @@ __metadata:
|
|||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"get-intrinsic@npm:^1.1.3, get-intrinsic@npm:^1.2.1, get-intrinsic@npm:^1.2.2, get-intrinsic@npm:^1.2.3, get-intrinsic@npm:^1.2.4":
|
||||
"get-intrinsic@npm:^1.1.3, get-intrinsic@npm:^1.2.1, get-intrinsic@npm:^1.2.3, get-intrinsic@npm:^1.2.4":
|
||||
version: 1.2.4
|
||||
resolution: "get-intrinsic@npm:1.2.4"
|
||||
dependencies:
|
||||
|
|
@ -9014,7 +8844,7 @@ __metadata:
|
|||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"internal-slot@npm:^1.0.4, internal-slot@npm:^1.0.7":
|
||||
"internal-slot@npm:^1.0.7":
|
||||
version: 1.0.7
|
||||
resolution: "internal-slot@npm:1.0.7"
|
||||
dependencies:
|
||||
|
|
@ -9098,7 +8928,7 @@ __metadata:
|
|||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"is-arguments@npm:^1.0.4, is-arguments@npm:^1.1.1":
|
||||
"is-arguments@npm:^1.0.4":
|
||||
version: 1.1.1
|
||||
resolution: "is-arguments@npm:1.1.1"
|
||||
dependencies:
|
||||
|
|
@ -9108,7 +8938,7 @@ __metadata:
|
|||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"is-array-buffer@npm:^3.0.2, is-array-buffer@npm:^3.0.4":
|
||||
"is-array-buffer@npm:^3.0.4":
|
||||
version: 3.0.4
|
||||
resolution: "is-array-buffer@npm:3.0.4"
|
||||
dependencies:
|
||||
|
|
@ -9210,7 +9040,7 @@ __metadata:
|
|||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"is-date-object@npm:^1.0.1, is-date-object@npm:^1.0.5":
|
||||
"is-date-object@npm:^1.0.1":
|
||||
version: 1.0.5
|
||||
resolution: "is-date-object@npm:1.0.5"
|
||||
dependencies:
|
||||
|
|
@ -9342,13 +9172,6 @@ __metadata:
|
|||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"is-map@npm:^2.0.2, is-map@npm:^2.0.3":
|
||||
version: 2.0.3
|
||||
resolution: "is-map@npm:2.0.3"
|
||||
checksum: 10c0/2c4d431b74e00fdda7162cd8e4b763d6f6f217edf97d4f8538b94b8702b150610e2c64961340015fe8df5b1fcee33ccd2e9b62619c4a8a3a155f8de6d6d355fc
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"is-nan@npm:^1.3.2":
|
||||
version: 1.3.2
|
||||
resolution: "is-nan@npm:1.3.2"
|
||||
|
|
@ -9468,13 +9291,6 @@ __metadata:
|
|||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"is-set@npm:^2.0.2, is-set@npm:^2.0.3":
|
||||
version: 2.0.3
|
||||
resolution: "is-set@npm:2.0.3"
|
||||
checksum: 10c0/f73732e13f099b2dc879c2a12341cfc22ccaca8dd504e6edae26484bd5707a35d503fba5b4daad530a9b088ced1ae6c9d8200fd92e09b428fe14ea79ce8080b7
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"is-shared-array-buffer@npm:^1.0.2, is-shared-array-buffer@npm:^1.0.3":
|
||||
version: 1.0.3
|
||||
resolution: "is-shared-array-buffer@npm:1.0.3"
|
||||
|
|
@ -9555,13 +9371,6 @@ __metadata:
|
|||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"is-weakmap@npm:^2.0.2":
|
||||
version: 2.0.2
|
||||
resolution: "is-weakmap@npm:2.0.2"
|
||||
checksum: 10c0/443c35bb86d5e6cc5929cd9c75a4024bb0fff9586ed50b092f94e700b89c43a33b186b76dbc6d54f3d3d09ece689ab38dcdc1af6a482cbe79c0f2da0a17f1299
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"is-weakref@npm:^1.0.2":
|
||||
version: 1.0.2
|
||||
resolution: "is-weakref@npm:1.0.2"
|
||||
|
|
@ -9571,16 +9380,6 @@ __metadata:
|
|||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"is-weakset@npm:^2.0.3":
|
||||
version: 2.0.3
|
||||
resolution: "is-weakset@npm:2.0.3"
|
||||
dependencies:
|
||||
call-bind: "npm:^1.0.7"
|
||||
get-intrinsic: "npm:^1.2.4"
|
||||
checksum: 10c0/8ad6141b6a400e7ce7c7442a13928c676d07b1f315ab77d9912920bf5f4170622f43126f111615788f26c3b1871158a6797c862233124507db0bcc33a9537d1a
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"is-windows@npm:^1.0.1, is-windows@npm:^1.0.2":
|
||||
version: 1.0.2
|
||||
resolution: "is-windows@npm:1.0.2"
|
||||
|
|
@ -9711,16 +9510,6 @@ __metadata:
|
|||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"jest-mock@npm:^27.0.6":
|
||||
version: 27.5.1
|
||||
resolution: "jest-mock@npm:27.5.1"
|
||||
dependencies:
|
||||
"@jest/types": "npm:^27.5.1"
|
||||
"@types/node": "npm:*"
|
||||
checksum: 10c0/6ad58454b37ee3f726930b07efbf40a7c79d2d2d9c7b226708b4b550bc0904de93bcacf714105d11952a5c0bc855e5d59145c8c9dbbb4e69b46e7367abf53b52
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"jest-regex-util@npm:^29.6.3":
|
||||
version: 29.6.3
|
||||
resolution: "jest-regex-util@npm:29.6.3"
|
||||
|
|
@ -10299,15 +10088,6 @@ __metadata:
|
|||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"lz-string@npm:^1.5.0":
|
||||
version: 1.5.0
|
||||
resolution: "lz-string@npm:1.5.0"
|
||||
bin:
|
||||
lz-string: bin/bin.js
|
||||
checksum: 10c0/36128e4de34791838abe979b19927c26e67201ca5acf00880377af7d765b38d1c60847e01c5ec61b1a260c48029084ab3893a3925fd6e48a04011364b089991b
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"magic-string@npm:^0.27.0":
|
||||
version: 0.27.0
|
||||
resolution: "magic-string@npm:0.27.0"
|
||||
|
|
@ -12119,17 +11899,6 @@ __metadata:
|
|||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"pretty-format@npm:^27.0.2":
|
||||
version: 27.5.1
|
||||
resolution: "pretty-format@npm:27.5.1"
|
||||
dependencies:
|
||||
ansi-regex: "npm:^5.0.1"
|
||||
ansi-styles: "npm:^5.0.0"
|
||||
react-is: "npm:^17.0.1"
|
||||
checksum: 10c0/0cbda1031aa30c659e10921fa94e0dd3f903ecbbbe7184a729ad66f2b6e7f17891e8c7d7654c458fa4ccb1a411ffb695b4f17bbcd3fe075fabe181027c4040ed
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"pretty-format@npm:^29.7.0":
|
||||
version: 29.7.0
|
||||
resolution: "pretty-format@npm:29.7.0"
|
||||
|
|
@ -12460,17 +12229,6 @@ __metadata:
|
|||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"react-confetti@npm:^6.1.0":
|
||||
version: 6.1.0
|
||||
resolution: "react-confetti@npm:6.1.0"
|
||||
dependencies:
|
||||
tween-functions: "npm:^1.2.0"
|
||||
peerDependencies:
|
||||
react: ^16.3.0 || ^17.0.1 || ^18.0.0
|
||||
checksum: 10c0/5b4eb23eef564695f6db1d25b294ed31d5fa21ff4092c6a38e641f85cd10e3e0b50014366e3ac0f7cf772e73faaecd14614e5b11a5531336fa769dda8068ab59
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"react-docgen-typescript@npm:^2.2.2":
|
||||
version: 2.2.2
|
||||
resolution: "react-docgen-typescript@npm:2.2.2"
|
||||
|
|
@ -12538,13 +12296,6 @@ __metadata:
|
|||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"react-is@npm:^17.0.1":
|
||||
version: 17.0.2
|
||||
resolution: "react-is@npm:17.0.2"
|
||||
checksum: 10c0/2bdb6b93fbb1820b024b496042cce405c57e2f85e777c9aabd55f9b26d145408f9f74f5934676ffdc46f3dcff656d78413a6e43968e7b3f92eea35b3052e9053
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"react-is@npm:^18.0.0":
|
||||
version: 18.3.1
|
||||
resolution: "react-is@npm:18.3.1"
|
||||
|
|
@ -12829,7 +12580,7 @@ __metadata:
|
|||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"regexp.prototype.flags@npm:^1.5.1, regexp.prototype.flags@npm:^1.5.2":
|
||||
"regexp.prototype.flags@npm:^1.5.2":
|
||||
version: 1.5.2
|
||||
resolution: "regexp.prototype.flags@npm:1.5.2"
|
||||
dependencies:
|
||||
|
|
@ -14089,15 +13840,6 @@ __metadata:
|
|||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"stop-iteration-iterator@npm:^1.0.0":
|
||||
version: 1.0.0
|
||||
resolution: "stop-iteration-iterator@npm:1.0.0"
|
||||
dependencies:
|
||||
internal-slot: "npm:^1.0.4"
|
||||
checksum: 10c0/c4158d6188aac510d9e92925b58709207bd94699e9c31186a040c80932a687f84a51356b5895e6dc72710aad83addb9411c22171832c9ae0e6e11b7d61b0dfb9
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"store2@npm:^2.14.2":
|
||||
version: 2.14.3
|
||||
resolution: "store2@npm:2.14.3"
|
||||
|
|
@ -14823,7 +14565,7 @@ __metadata:
|
|||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"ts-dedent@npm:^2.0.0, ts-dedent@npm:^2.2.0":
|
||||
"ts-dedent@npm:^2.0.0":
|
||||
version: 2.2.0
|
||||
resolution: "ts-dedent@npm:2.2.0"
|
||||
checksum: 10c0/175adea838468cc2ff7d5e97f970dcb798bbcb623f29c6088cb21aa2880d207c5784be81ab1741f56b9ac37840cbaba0c0d79f7f8b67ffe61c02634cafa5c303
|
||||
|
|
@ -14851,13 +14593,6 @@ __metadata:
|
|||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"tween-functions@npm:^1.2.0":
|
||||
version: 1.2.0
|
||||
resolution: "tween-functions@npm:1.2.0"
|
||||
checksum: 10c0/7e59295b8b0ee4132ed2fe335f56a9db5c87056dad6b6fd3011be72239fd20398003ddb4403bc98ad9f5c94468890830f64016edbbde35581faf95b32cda8305
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"type-detect@npm:^4.0.0, type-detect@npm:^4.0.8":
|
||||
version: 4.0.8
|
||||
resolution: "type-detect@npm:4.0.8"
|
||||
|
|
@ -15727,18 +15462,6 @@ __metadata:
|
|||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"which-collection@npm:^1.0.1":
|
||||
version: 1.0.2
|
||||
resolution: "which-collection@npm:1.0.2"
|
||||
dependencies:
|
||||
is-map: "npm:^2.0.3"
|
||||
is-set: "npm:^2.0.3"
|
||||
is-weakmap: "npm:^2.0.2"
|
||||
is-weakset: "npm:^2.0.3"
|
||||
checksum: 10c0/3345fde20964525a04cdf7c4a96821f85f0cc198f1b2ecb4576e08096746d129eb133571998fe121c77782ac8f21cbd67745a3d35ce100d26d4e684c142ea1f2
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"which-module@npm:^1.0.0":
|
||||
version: 1.0.0
|
||||
resolution: "which-module@npm:1.0.0"
|
||||
|
|
@ -15746,7 +15469,7 @@ __metadata:
|
|||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"which-typed-array@npm:^1.1.13, which-typed-array@npm:^1.1.14, which-typed-array@npm:^1.1.15, which-typed-array@npm:^1.1.2":
|
||||
"which-typed-array@npm:^1.1.14, which-typed-array@npm:^1.1.15, which-typed-array@npm:^1.1.2":
|
||||
version: 1.1.15
|
||||
resolution: "which-typed-array@npm:1.1.15"
|
||||
dependencies:
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue