feat(ui): add nested list option for html section EBS-1547 (#235)

* feat(ui): add nested list option for html section EBS-1547 * fix(style): nested list option style EBS-1547 --------- Co-authored-by: Vanessa.Jalakas <[email protected]> Co-authored-by: Mihkel.Paloots <[email protected]>
e-gov · Sep 11, 2024 · 48d71a6 · 48d71a6
1 parent a7dc4e9
commit 48d71a6
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 0 deletions.
diff --git a/libs/styles/src/lib/scss/components/_html-section.scss b/libs/styles/src/lib/scss/components/_html-section.scss
@@ -56,6 +56,17 @@
     }
   }
 
+  li li {
+    &.list-style-none {
+      list-style: none;
+      padding-left: 0;
+    }
+
+    &:not(.list-style-none) {
+      padding-left: 18px;
+    }
+  }
+
   p, a {
     overflow-wrap: break-word;
     min-width: 0;

diff --git a/libs/ui/src/lib/html-section/html-section.component.stories.ts b/libs/ui/src/lib/html-section/html-section.component.stories.ts
@@ -93,3 +93,28 @@ export const List = {
     `,
   },
 };
+
+export const NestedList = {
+  ...Default,
+  args: {
+    html: `
+      <p>Ordered nested list</p>
+      <ol>
+        <li>Heading one:
+            <ul>
+                <li>Step one</li>
+                <li>Step two</li>
+                <li>Step three</li>
+            </ul>
+        </li>
+        <li>Heading two:
+            <ul>
+                <li>Step one</li>
+                <li>Step two</li>
+                <li>Step three</li>
+            </ul>
+      </li>
+      </ol>
+    `,
+  },
+};