feat: unread selection (#1997)

SAP · Jan 4, 2021 · 9d74d88 · 9d74d88
1 parent 85f243e
commit 9d74d88
Show file tree

Hide file tree

Showing 3 changed files with 120 additions and 0 deletions.
diff --git a/src/_listBase.scss b/src/_listBase.scss
@@ -26,6 +26,12 @@
     background: var(--sapList_Background);
     position: relative;
 
+    &--unread {
+      .#{$block}__title {
+        font-weight: bold;
+      }
+    }
+
     &--no-data {
       .#{$block}__title {
         text-align: center;

diff --git a/stories/list/standard/__snapshots__/standard-list.stories.storyshot b/stories/list/standard/__snapshots__/standard-list.stories.storyshot
@@ -1544,3 +1544,90 @@ exports[`Storyshots Components/List/Standard Selection 1`] = `
 
 </section>
 `;
+
+exports[`Storyshots Components/List/Standard Unread 1`] = `
+<section>
+  <h4>
+    Unread Options
+  </h4>
+
+
+  <ul
+    class="fd-list"
+    role="list"
+  >
+
+
+    <li
+      class="fd-list__item fd-list__item--unread"
+      role="listitem"
+      tabindex="0"
+    >
+
+
+      <span
+        class="fd-list__title"
+      >
+        List item 1 Unread
+      </span>
+
+
+    </li>
+
+
+    <li
+      class="fd-list__item fd-list__item--unread"
+      role="listitem"
+      tabindex="0"
+    >
+
+
+      <span
+        class="fd-list__title"
+      >
+        List item 2 Unread
+      </span>
+
+
+    </li>
+
+
+    <li
+      class="fd-list__item"
+      role="listitem"
+      tabindex="0"
+    >
+
+
+      <span
+        class="fd-list__title"
+      >
+        List item 3 Read
+      </span>
+
+
+    </li>
+
+
+    <li
+      class="fd-list__item"
+      role="listitem"
+      tabindex="0"
+    >
+
+
+      <span
+        class="fd-list__title"
+      >
+        List item 4 Read
+      </span>
+
+
+    </li>
+
+
+  </ul>
+
+
+</section>
+`;
diff --git a/stories/list/standard/standard-list.stories.js b/stories/list/standard/standard-list.stories.js
@@ -66,6 +66,33 @@ standard.parameters = {
     }
 };
 
+export const unread = () => `<h4>Unread Options</h4>
+<ul class="fd-list" role="list">
+  <li role="listitem" tabindex="0" class="fd-list__item fd-list__item--unread">
+      <span class="fd-list__title">List item 1 Unread</span>
+  </li>
+  <li role="listitem" tabindex="0" class="fd-list__item fd-list__item--unread">
+      <span class="fd-list__title">List item 2 Unread</span>
+  </li>
+  <li role="listitem" tabindex="0" class="fd-list__item">
+      <span class="fd-list__title">List item 3 Read</span>
+  </li>
+  <li role="listitem" tabindex="0" class="fd-list__item">
+      <span class="fd-list__title">List item 4 Read</span>
+  </li>
+</ul>
+`;
+
+unread.storyName = 'Unread';
+
+unread.parameters = {
+    docs: {
+        iframeHeight: 445,
+        storyDescription: `The \`fd-list__item--unread\` modifier will change the font weight to bold for easier legibility.
+        `
+    }
+};
+
 export const navigation = () => `<ul class="fd-list fd-list--navigation" role="list">
   <li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--link">
       <a tabindex="0" class="fd-list__link">