Rich text / WYSIWYG styling. DDFFORM-5.

This component is used for WYSIWYG content.
E.g. we cannot control classes of the underlying elements, so in
this case we will target HTML tags instead.

base.scss

@@ -99,6 +99,7 @@
 @import "./src/stories/Library/image-credited/image-credited";
 @import "./src/stories/Library/event-description/event-description";
 @import "./src/stories/Library/link-with-icon/link-with-icon";
+@import "./src/stories/Library/rich-text/rich-text";
 
 // Autosuggest block styling needs to be loaded before the rest of the scss for autosuggest
 @import "./src/stories/Blocks/autosuggest/autosuggest";

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<typeof RichText>;
+
+const Template: ComponentStory<typeof RichText> = () => <RichText />;
+
+export const Default = Template.bind({});

src/stories/Library/rich-text/RichText.tsx

@@ -0,0 +1,50 @@
+export interface RichTextProps {
+  text: string;
+}
+
+export const RichText = () => {
+  return (
+    <div className="rich-text">
+      <h2>Tad survive ensnare joy mistake courtesy Bagshot Row.</h2>
+      <p>
+        <a href="#">Ligulas step drops both?</a> You shall not pass! Tender
+        Tender respectable success. Valar impressive unfriendly bloom scraped?
+        Branch hey-diddle-diddle <strong>pony troublell sleeping</strong>.
+      </p>
+      <h3>North valor overflowing sort Iáve mister kingly money?</h3>
+      <p>
+        Curse you and all the halflings! Deserted anytime Lake-town burned caves
+        balls. Smoked lthilien forbids Thrain?
+      </p>
+      <ul>
+        <li>Adamant.</li>
+        <li>
+          Ligulas step drops <em>both? You shall not pass!</em>. Valar
+          impressive unfriendly bloom scraped? Branch hey-diddle-diddle pony
+          troublell sleeping during jump Narsil.
+        </li>
+        <li>Witch-king.</li>
+        <li>Precious.</li>
+        <li>Gaffers!</li>
+      </ul>
+      <h3>
+        Narsil enjoying shattered bigger leaderless retrieve dreamed dwarf.
+      </h3>
+      <p>
+        Ravens wonder wanted runs me crawl gaining lots faster! Khazad-dum
+        surprise baby season ranks. I bid you all a very fond farewell.
+      </p>
+      <ol>
+        <li>Narsil.</li>
+        <li>Elros.</li>
+        <li>Arwen Evenstar.</li>
+        <li>
+          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.
+        </li>
+        <li>Bagginses?</li>
+      </ol>
+    </div>
+  );
+};

src/stories/Library/rich-text/rich-text.scss

@@ -0,0 +1,77 @@
+// This component is used for WYSIWYG content.
+// E.g. we cannot control classes of the underlying elements, so in this case
+// we will target HTML tags instead.
+.rich-text {
+  @include typography($typo__rich-text-body);
+
+  // Setting a max-width to increase readability for sentences.
+  max-width: $layout__max-width--text;
+
+  a {
+    @extend %text-inline-link;
+  }
+
+  h2 {
+    @include typography($typo__h3);
+  }
+
+  h3 {
+    @include typography($typo__h4);
+  }
+
+  > * {
+    margin-bottom: $s-md;
+  }
+
+  ol > li,
+  ul > li {
+    $_dash-width: 21px;
+    $_dash-width--wide: 33px;
+
+    position: relative;
+    padding-left: $_dash-width + $s-md;
+    padding-bottom: $s-lg;
+
+    &::before {
+      position: absolute;
+      top: 0.8em;
+      left: 0;
+      width: $_dash-width;
+      text-align: center;
+    }
+
+    @include media-query__medium {
+      padding-left: $_dash-width--wide + $s-lg;
+
+      &::before {
+        width: $_dash-width--wide;
+      }
+    }
+  }
+
+  ul > li::before {
+    content: "";
+    height: 1px;
+    background-color: black;
+  }
+
+  ol {
+    counter-reset: list;
+
+    > li::before {
+      @include typography(
+        $typo__h4,
+        (
+          excludes: (
+            line-height,
+          ),
+        )
+      );
+
+      font-weight: normal;
+      line-height: 0;
+      counter-increment: list;
+      content: counter(list) ".";
+    }
+  }
+}

src/styles/scss/tools/placeholder.scss

@@ -15,6 +15,17 @@
   max-width: 100%;
 }
 
+%text-inline-link {
+  text-decoration: underline solid black;
+  text-underline-offset: 0.3em;
+  transition: text-underline-offset 0.1s ease-in-out;
+
+  &:hover {
+    color: $color__text-primary-black;
+    text-underline-offset: 0.2em;
+  }
+}
+
 %link-tag {
   @include typography($typo__body-placeholder);
 

src/styles/scss/tools/variables.layout.scss

@@ -1,3 +1,5 @@
 $layout__max-width: 1024px;
 $layout__max-width--small: 768px;
 $layout__max-width--large: 1440px;
+
+$layout__max-width--text: 780px;

src/styles/scss/tools/variables.typography.scss

@@ -277,3 +277,18 @@ $typo__label: (
     letter-spacing: 0.02em,
   ),
 );
+
+$typo__rich-text-body: (
+  mobile: (
+    font-family: $font__body,
+    font-style: normal,
+    font-weight: $font__weight--normal,
+    font-size: 16px,
+    line-height: 24px,
+    color: $color__text-secondary-gray,
+  ),
+  medium: (
+    font-size: 18px,
+    line-height: 32px,
+  ),
+);