diff --git a/src/stories/Library/rich-text/RichText.stories.tsx b/src/stories/Library/rich-text/RichText.stories.tsx new file mode 100644 index 000000000..3a12f8371 --- /dev/null +++ b/src/stories/Library/rich-text/RichText.stories.tsx @@ -0,0 +1,20 @@ +import { ComponentMeta, ComponentStory } from "@storybook/react"; +import { withDesign } from "storybook-addon-designs"; +import { RichText } from "./RichText"; + +export default { + title: "Library / Rich Text", + component: RichText, + decorators: [withDesign], + parameters: { + design: { + type: "figma", + url: "https://www.figma.com/file/Zx9GrkFA3l4ISvyZD2q0Qi/Designsystem?type=design&node-id=7880-59101&mode=design&t=dMcJmvsouH6erxzA-4", + }, + layout: "centered", + }, +} as ComponentMeta; + +const Template: ComponentStory = () => ; + +export const Default = Template.bind({}); diff --git a/src/stories/Library/rich-text/RichText.tsx b/src/stories/Library/rich-text/RichText.tsx new file mode 100644 index 000000000..d93f6e619 --- /dev/null +++ b/src/stories/Library/rich-text/RichText.tsx @@ -0,0 +1,44 @@ +export interface RichTextProps { + text: string; +} + +export const RichText = () => { + return ( +
+

Tad survive ensnare joy mistake courtesy Bagshot Row.

+

+ Ligulas step drops both? You shall not pass! Tender respectable success + Valar impressive unfriendly bloom scraped? Branch hey-diddle-diddle pony + troublell sleeping during jump Narsil. +

+

North valor overflowing sort Iáve mister kingly money?

+

+ Curse you and all the halflings! Deserted anytime Lake-town burned caves + balls. Smoked lthilien forbids Thrain? +

+
    +
  • Adamant.
  • +
  • Southfarthing!
  • +
  • Witch-king.
  • +
  • Precious.
  • +
  • Gaffers!
  • +
+

+ Narsil enjoying shattered bigger leaderless retrieve dreamed dwarf. +

+

+ Ravens wonder wanted runs me crawl gaining lots faster! Khazad-dum + surprise baby season ranks. I bid you all a very fond farewell. +

+
    +
  1. Narsil.
  2. +
  3. Elros.
  4. +
  5. Arwen Evenstar.
  6. +
  7. Maggots?
  8. +
  9. Bagginses?
  10. +
+
+ ); +}; + +export default RichText; diff --git a/src/stories/Library/rich-text/rich-text.scss b/src/stories/Library/rich-text/rich-text.scss new file mode 100644 index 000000000..a2c4307e8 --- /dev/null +++ b/src/stories/Library/rich-text/rich-text.scss @@ -0,0 +1,29 @@ +.rich-text { + @include typography($typo__body-placeholder); + + ul > li { + $_dash-width: 21px; + $_dash-width--wide: 33px; + $_padding: $s-sm; + + position: relative; + padding-left: $_dash-width + $_padding; + + &::before { + content: ""; + position: absolute; + width: $_dash-width; + height: 1px; + left: 0; + background-color: black; + } + } + + h2 { + @include typography($typo__h3); + } + + h3 { + @include typography($typo__h4); + } +}