feat(fn): introduce fn-card and fn-info-label (#3037)

* feat(fn): start on card component

* feat(fn): add basic info label and fix some heights/margins etc

* feat(fn): new changes for card

* feat(fn): update storyshot

* feat(fn): remove non-card things

* feat(fn): address PR comments

* feat(fn): finish info label (#3066) [ci visual]

src/fn/fn-card.scss

@@ -0,0 +1,81 @@
+@import "./fn-settings";
+
+$block: #{$fn-namespace}-card;
+
+.#{$block} {
+  @include fn-reset();
+  @include fn-flex(column);
+
+  background-color: $fn-color-white;
+  border-radius: $fn-border-radius-16;
+  box-shadow: $fn-shadow-grey-level-2;
+  min-height: 10.5rem;
+  min-width: 30rem;
+  padding: 1.5rem;
+
+  &--data {
+    box-shadow: $fn-shadow-grey-level-0;
+
+    @include fn-hover() {
+      box-shadow: $fn-shadow-grey-level-1;
+    }
+
+    @include fn-focus() {
+      border: 0.125rem solid $fn-color-blue-500;
+    }
+
+    @include fn-selected() {
+      background-color: $fn-color-blue-100;
+      box-shadow: $fn-shadow-blue-level-0;
+
+      @include fn-hover() {
+        box-shadow: $fn-shadow-blue-level-1;
+      }
+    }
+  }
+
+  &__title-icon-button-container {
+    @include fn-flex();
+    @include fn-flex-vertical-center();
+
+    .#{$block}__title-button {
+      @include fn-set-margin-left(auto);
+    }
+    .#{$block}__title-icon {
+      @include fn-reset();
+      @include fn-set-rectangle(1rem, 1rem);
+      @include fn-set-margin-right(0.5rem);
+
+      background: $fn-color-blue-500;
+      border-color: $fn-color-blue-500;
+
+      span {
+        color: $fn-color-white;
+        margin-top: 0.125rem;
+      }
+    }
+
+    .#{$block}__title-container {
+      @include fn-reset();
+      @include fn-flex(column);
+    }
+  }
+
+  &__title {
+    @include fn-reset();
+    @include fn-ellipsis();
+
+    font-weight: bolder;
+    color: $fn-color-grey-800;
+    font-size: 1.125rem;
+    line-height: 1.375rem;
+  }
+
+  &__subtitle {
+    @include fn-reset();
+    @include fn-ellipsis();
+
+    font-size: 0.75rem;
+    line-height: 1rem;
+  }
+}

src/fn/fn-info-label.scss

@@ -0,0 +1,50 @@
+@import "./fn-settings";
+
+$block: #{$fn-namespace}-info-label;
+
+$color-accents: (
+  "yellow": ("background": $fn-color-yellow-50, "color": $fn-color-yellow-600),
+  "crimson": ("background": $fn-color-crimson-50, "color": $fn-color-crimson-600),
+  "lime": ("background": $fn-color-lime-50, "color": $fn-color-lime-600),
+  "indigo": ("background": $fn-color-indigo-50, "color": $fn-color-indigo-600),
+  "grey": ("background": $fn-color-grey-50, "color": $fn-color-grey-700),
+  "cyan": ("background": $fn-color-cyan-50, "color": $fn-color-cyan-600),
+  "pink": ("background": $fn-color-pink-50, "color": $fn-color-pink-600),
+  "teal": ("background": $fn-color-teal-50, "color": $fn-color-teal-600)
+);
+
+.#{$block} {
+  @include fn-reset();
+  @include fn-flex();
+  @include fn-set-paddings-x(0.375rem, 0.375rem);
+  @include fn-set-rectangle(fit-content, 1.375rem);
+
+  border-radius: $fn-border-radius-4;
+
+  &__text {
+    @include fn-reset();
+
+    color: inherit;
+  }
+
+  &__circle {
+    @include fn-reset();
+    @include fn-set-margin-right(0.25rem);
+    @include fn-set-square(0.5rem);
+
+    content: ' ';
+    border-radius: $fn-border-radius-4;
+    color: inherit;
+    background-color: currentColor;
+    position: relative;
+    margin-top: auto;
+    margin-bottom: auto;
+  }
+
+  @each $set-name, $color-set in $color-accents {
+    &--#{$set-name} {
+      background-color: map_get($color-set, "background");
+      color: map_get($color-set, "color");
+    }
+  }
+}

stories/fn-card/__snapshots__/fn-card.stories.storyshot

@@ -0,0 +1,148 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Experimental/Card Card 1`] = `
+
+
+`;
+
+exports[`Storyshots Experimental/Card Data Card 1`] = `
+<section>
+
+
+  <div
+    class="fn-card fn-card--data"
+    style="max-width: 40rem"
+  >
+
+
+    <h1
+      class="fn-card__title"
+    >
+      Data Card Title
+    </h1>
+
+
+    <span
+      class="fn-card__subtitle"
+    >
+      Card Subtitle
+    </span>
+
+
+  </div>
+
+
+  <br />
+  <br />
+
+
+  <div
+    class="fn-card fn-card--data is-focus"
+    style="max-width: 40rem"
+  >
+
+
+    <div
+      class="fn-card__title-icon-button-container"
+    >
+
+
+      <h1
+        class="fn-card__title"
+      >
+        Focused Data Card Title
+      </h1>
+
+
+      <button
+        class="fn-button fn-button--ghost fn-card__title-button"
+      >
+
+
+        <span
+          class="fn-button__text"
+        >
+          Button
+        </span>
+
+
+      </button>
+
+
+    </div>
+
+
+  </div>
+
+
+  <br />
+  <br />
+
+
+  <div
+    aria-selected="true"
+    class="fn-card fn-card--data is-selected"
+    style="max-width: 40rem"
+  >
+
+
+    <div
+      class="fn-card__title-icon-button-container"
+    >
+
+
+      <div
+        class="fn-avatar fn-avatar--xs fn-avatar--circle fn-card__title-icon"
+      >
+
+
+        <div
+          class="fn-avatar__icon"
+        >
+
+
+          <span
+            class="sap-icon sap-icon--accept"
+          />
+
+
+        </div>
+
+
+      </div>
+
+
+      <div
+        class="fn-card__title-container"
+      >
+
+
+        <h1
+          class="fn-card__title"
+        >
+          Selected Data Card Title
+        </h1>
+
+
+        <span
+          class="fn-card__subtitle"
+        >
+          Card Subtitle
+        </span>
+
+
+      </div>
+
+
+    </div>
+
+
+  </div>
+
+
+  <br />
+  <br />
+
+
+</section>
+`;

stories/fn-card/fn-card.stories.js

@@ -0,0 +1,62 @@
+export default {
+    title: 'Experimental/Card',
+    parameters: {
+        components: ['fn-card', 'icon', 'fn-button', 'fn-avatar'],
+        description: `
+There are two types of cards - "container" cards (default), and "data" cards which are interactive / hoverable / focusable / selectable. Typically container cards will contain complex
+controls within the card whereas the data cards are themselves what the user will be interacting with.
+<br><br>
+By default, cards only have a minimum width, so the developer should set width rules or keep the card in a container of appropriate width.
+`
+    }
+};
+
+export const Card = () => `
+    <div class="fn-card" style="max-width: 40rem">
+        <h1 class="fn-card__title">Card Title</h1>
+        <span class="fn-card__subtitle">Card Subtitle</span>
+    </div>
+`;
+
+Card.parameters = {
+    docs: {
+        storyDescription: 'This is a container (default) card component.'
+    }
+};
+
+export const DataCard = () => `
+    <div class="fn-card fn-card--data" style="max-width: 40rem">
+        <h1 class="fn-card__title">Data Card Title</h1>
+        <span class="fn-card__subtitle">Card Subtitle</span>
+    </div>
+    <br/><br/>
+    <div class="fn-card fn-card--data is-focus" style="max-width: 40rem">
+        <div class="fn-card__title-icon-button-container">
+            <h1 class="fn-card__title">Focused Data Card Title</h1>
+            <button class="fn-button fn-button--ghost fn-card__title-button">
+                <span class="fn-button__text">Button</span>
+            </button>
+        </div>
+    </div>
+    <br/><br/>
+    <div class="fn-card fn-card--data is-selected" aria-selected="true" style="max-width: 40rem">
+        <div class="fn-card__title-icon-button-container">
+            <div class="fn-avatar fn-avatar--xs fn-avatar--circle fn-card__title-icon">
+                <div class="fn-avatar__icon">
+                    <span class="sap-icon sap-icon--accept"></span>
+                </div>
+            </div>
+            <div class="fn-card__title-container">
+                <h1 class="fn-card__title">Selected Data Card Title</h1>
+                <span class="fn-card__subtitle">Card Subtitle</span>
+            </div>
+        </div>
+    </div>
+    <br/><br/>  
+`;
+
+DataCard.parameters = {
+    docs: {
+        storyDescription: 'This is a data card with hover, focus, and selected states.'
+    }
+};