@pepperi-addons/ngx-lib 0.4.2-beta.7 → 0.4.2-beta.71

package/src/core/style/base/ZIndex.stories.mdx

@@ -0,0 +1,47 @@
+import { Meta, Story } from "@storybook/addon-docs";
+
+import ZIndex from "./zIndex.component";
+
+<Meta title="Abstracts/Z Index" component={ZIndex} />
+
+export const Template = (args) => ({ props: args });
+
+# Z Index
+
+The see the z-index play out in the box below
+
+- `$z-index-high`
+- `$z-index-medium`
+- `$z-index-low`
+- `$z-index-lowest`
+
+
+Use them like so `↓`
+
+```css
+// Make sure you call the `variables.scss` at the top of the file
+@use "@pepperi-addons/ngx-lib/src/core/style/abstracts/variables";
+
+.high-class {
+    z-index: variables.$z-index-high;
+}
+```
+
+### Todos
+
+- [ ] Make them into a class
+
+<Story name="Z Index" args={{
+        storyIndex: 1,
+    }}>
+    {Template.bind({})}
+</Story>
+
+BTW, these are the vaules of the z-indices `↓`
+
+```css
+$z-index-high: 999;
+$z-index-medium: 100;
+$z-index-low: 50;
+$z-index-lowest: 1;
+```

package/src/core/style/base/base.scss

@@ -477,36 +477,34 @@
     }
 
     &.small {
-        max-width: 10rem !important;
+        max-width: 18rem !important;
         height: auto;
     }
 
     &.regular {
-        max-width: 34rem !important;
+        max-width: 36rem !important;
         height: auto;
     }
 
     &.large {
-        max-width: 40rem !important;
+        max-width: 54rem !important;
         width: 90vw;
         height: auto;
-        max-height: 90vh;
+        max-height: calc(100% - (var(--pep-spacing-2xl) * 2)) !important; // 90vh;
 
         .mat-dialog-container {
             .mat-dialog-content {
                 $border-size: 1px;
-                max-height: calc(90vh - (#{variables.$dialog-header-height} + (#{variables.$content-padding} * 2) + (#{$border-size} * 2))); 
+                max-height: 100% // calc(90vh - (#{variables.$dialog-header-height} + (#{variables.$content-padding} * 2) + (#{$border-size} * 2))); 
             }
         }
     }
 
     &.full-screen {
-        $dialog-height: 95vh;
-
-        max-width: 95vw !important;
         width: 95vw !important;
-        max-height: $dialog-height !important;
-        height: $dialog-height !important;
+        height: 95vh !important;
+        max-width: calc(100vw - (var(--pep-spacing-2xl) * 2)) !important;
+        max-height: calc(100vh - (var(--pep-spacing-2xl) * 2)) !important;
 
         .mat-dialog-container {
             .mat-dialog-content {

package/src/core/style/base/borderRadius.component.ts

@@ -0,0 +1,27 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+    selector: 'storybook-border-radius',
+    template: `<div *ngIf="storyIndex === 1" class="set-grid">
+        <div class="side-grid flex-wrap">
+            <div class="size-it round-it border-radius-sm">
+                <h3 class="body-sm color-invert">.border-radius-sm</h3>
+            </div>
+            <div class="size-it round-it border-radius-md">
+                <h3 class="body-sm color-invert">.border-radius-md</h3>
+            </div>
+            <div class="size-it round-it border-radius-lg">
+                <h3 class="body-sm color-invert">.border-radius-lg</h3>
+            </div>
+            <div class="size-it round-it border-radius-xl">
+                <h3 class="body-sm color-invert">.border-radius-xl</h3>
+            </div>
+        </div>
+    </div> `,
+})
+export default class BorderRadiusComponent {
+    /**
+     */
+    @Input()
+    storyIndex?: number = 1;
+}

package/src/core/style/base/breakpoints.component.ts

@@ -0,0 +1,14 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+    selector: 'storybook-breakpoints',
+    template: `<div *ngIf="storyIndex === 1" class="set-grid">
+        <div class="size-it this-is-screen-size"></div>
+    </div> `,
+})
+export default class BreakpointsComponent {
+    /**
+     */
+    @Input()
+    storyIndex?: number = 1;
+}

package/src/core/style/base/colors.component.ts

@@ -0,0 +1,174 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+    selector: 'storybook-colors',
+    template: `<div *ngIf="storyIndex === 1" class="set-grid">
+            <div class="color-text-grid">
+                <div class="color-text-color-main"></div>
+                <div class="color-text-color-dimmed"></div>
+                <div class="color-text-color-disabled"></div>
+                <div class="color-text-color-invert"></div>
+                <div class="color-text-color-link"></div>
+                <div class="color-text-color-link-highlight"></div>
+                <div class="color-text-color-link-focus"></div>
+                <div class="color-text-color-success"></div>
+                <div class="color-text-color-caution"></div>
+            </div>
+        </div>
+        <div *ngIf="storyIndex === 3" class="set-grid" id="color-system-primary-invert">
+            <h2 class="body-sm">tran</h2>
+            <div class="color-system-primary-invert-grid">
+                <div class="t00"></div>
+                <div class="t10"></div>
+                <div class="t20"></div>
+                <div class="t30"></div>
+                <div class="t40"></div>
+                <div class="t50"></div>
+                <div class="t60"></div>
+                <div class="t70"></div>
+                <div class="t80"></div>
+                <div class="t90"></div>
+            </div>
+            <h2 class="body-sm">flat</h2>
+            <div class="color-system-primary-invert-grid">
+                <div class="flat-l-20"></div>
+                <div class="flat-l-10"></div>
+                <div class="base"></div>
+                <div class="flat-r-10"></div>
+                <div class="flat-r-20"></div>
+                <div class="flat-r-30"></div>
+                <div class="flat-r-40"></div>
+            </div>
+        </div>
+        <div *ngIf="storyIndex === 2" class="set-grid" id="color-system-primary">
+            <h2 class="body-sm">tran</h2>
+            <div class="color-system-primary-grid">
+                <div class="t00"></div>
+                <div class="t10"></div>
+                <div class="t20"></div>
+                <div class="t30"></div>
+                <div class="t40"></div>
+                <div class="t50"></div>
+                <div class="t60"></div>
+                <div class="t70"></div>
+                <div class="t80"></div>
+                <div class="t90"></div>
+            </div>
+            <h2 class="body-sm">flat</h2>
+            <div class="color-system-primary-grid">
+                <div class="flat-l-20"></div>
+                <div class="flat-l-10"></div>
+                <div class="base"></div>
+                <div class="flat-r-10"></div>
+                <div class="flat-r-20"></div>
+                <div class="flat-r-30"></div>
+                <div class="flat-r-40"></div>
+            </div>
+        </div>
+        <div *ngIf="storyIndex === 4" class="set-grid" id="color-system-success">
+            <h2 class="body-sm">tran</h2>
+            <div class="color-system-success-grid">
+                <div class="t00"></div>
+                <div class="t10"></div>
+                <div class="t20"></div>
+                <div class="t30"></div>
+                <div class="t40"></div>
+                <div class="t50"></div>
+                <div class="t60"></div>
+                <div class="t70"></div>
+                <div class="t80"></div>
+                <div class="t90"></div>
+            </div>
+            <h2 class="body-sm">flat</h2>
+            <div class="color-system-success-grid">
+                <div class="flat-l-20"></div>
+                <div class="flat-l-10"></div>
+                <div class="base"></div>
+                <div class="flat-r-10"></div>
+                <div class="flat-r-20"></div>
+                <div class="flat-r-30"></div>
+                <div class="flat-r-40"></div>
+            </div>
+        </div>
+        <div *ngIf="storyIndex === 5" class="set-grid" id="color-system-caution">
+            <h2 class="body-sm">tran</h2>
+            <div class="color-system-caution-grid">
+                <div class="t00"></div>
+                <div class="t10"></div>
+                <div class="t20"></div>
+                <div class="t30"></div>
+                <div class="t40"></div>
+                <div class="t50"></div>
+                <div class="t60"></div>
+                <div class="t70"></div>
+                <div class="t80"></div>
+                <div class="t90"></div>
+            </div>
+            <h2 class="body-sm">flat</h2>
+            <div class="color-system-caution-grid">
+                <div class="flat-l-20"></div>
+                <div class="flat-l-10"></div>
+                <div class="base"></div>
+                <div class="flat-r-10"></div>
+                <div class="flat-r-20"></div>
+                <div class="flat-r-30"></div>
+                <div class="flat-r-40"></div>
+            </div>
+        </div>
+        <div *ngIf="storyIndex === 6" class="set-grid" id="color-user-primary">
+            <h2 class="body-sm">tran</h2>
+            <div class="color-user-primary-grid">
+                <div class="t00"></div>
+                <div class="t10"></div>
+                <div class="t20"></div>
+                <div class="t30"></div>
+                <div class="t40"></div>
+                <div class="t50"></div>
+                <div class="t60"></div>
+                <div class="t70"></div>
+                <div class="t80"></div>
+                <div class="t90"></div>
+            </div>
+            <h2 class="body-sm">flat</h2>
+            <div class="color-user-primary-grid">
+                <div class="flat-l-20"></div>
+                <div class="flat-l-10"></div>
+                <div class="base"></div>
+                <div class="flat-r-10"></div>
+                <div class="flat-r-20"></div>
+                <div class="flat-r-30"></div>
+                <div class="flat-r-40"></div>
+            </div>
+        </div>
+        <div *ngIf="storyIndex === 7" class="set-grid" id="color-user-secondary">
+            <h2 class="body-sm">tran</h2>
+            <div class="color-user-secondary-grid">
+                <div class="t00"></div>
+                <div class="t10"></div>
+                <div class="t20"></div>
+                <div class="t30"></div>
+                <div class="t40"></div>
+                <div class="t50"></div>
+                <div class="t60"></div>
+                <div class="t70"></div>
+                <div class="t80"></div>
+                <div class="t90"></div>
+            </div>
+            <h2 class="body-sm">flat</h2>
+            <div class="color-user-secondary-grid">
+                <div class="flat-l-20"></div>
+                <div class="flat-l-10"></div>
+                <div class="base"></div>
+                <div class="flat-r-10"></div>
+                <div class="flat-r-20"></div>
+                <div class="flat-r-30"></div>
+                <div class="flat-r-40"></div>
+            </div>
+        </div>`,
+})
+export default class ColorsComponent {
+    /**
+     */
+    @Input()
+    storyIndex?: number = 1;
+}

package/src/core/style/base/shadows.component.ts

@@ -0,0 +1,90 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+    selector: 'shadows-colors',
+    template: `<div *ngIf="storyIndex === 1" class="set-grid">
+        <h2 class="body-md color-dimmed">XS Shadows</h2>
+        <div class="shadow-grid">
+            <div class="shadow-xs-xsoft">
+                <p class="body-sm"><code>.shadow-xs-xsoft</code></p>
+            </div>
+            <div class="shadow-xs-soft">
+                <p class="body-sm"><code>.shadow-xs-soft</code></p>
+            </div>
+            <div class="shadow-xs-regular">
+                <p class="body-sm"><code>.shadow-xs-regular</code></p>
+            </div>
+            <div class="shadow-xs-hard">
+                <p class="body-sm"><code>.shadow-xs-hard</code></p>
+            </div>
+        </div>
+        <h2 class="body-md color-dimmed">SM Shadows</h2>
+        <div class="shadow-grid">
+            <div class="shadow-sm-xsoft">
+                <p class="body-sm"><code>.shadow-sm-xsoft</code></p>
+            </div>
+            <div class="shadow-sm-soft">
+                <p class="body-sm"><code>.shadow-sm-soft</code></p>
+            </div>
+            <div class="shadow-sm-regular">
+                <p class="body-sm"><code>.shadow-sm-regular</code></p>
+            </div>
+            <div class="shadow-sm-hard">
+                <p class="body-sm"><code>.shadow-sm-hard</code></p>
+            </div>
+        </div>
+        <h2 class="body-md color-dimmed">MD Shadows</h2>
+        <div class="shadow-grid">
+            <div class="shadow-md-xsoft">
+                <p class="body-sm"><code>.shadow-md-xsoft</code></p>
+            </div>
+            <div class="shadow-md-soft">
+                <p class="body-sm"><code>.shadow-md-soft</code></p>
+            </div>
+            <div class="shadow-md-regular">
+                <p class="body-sm"><code>.shadow-md-regular</code></p>
+            </div>
+            <div class="shadow-md-hard">
+                <p class="body-sm"><code>.shadow-md-hard</code></p>
+            </div>
+        </div>
+        <h2 class="body-md color-dimmed">LG Shadows</h2>
+        <div class="shadow-grid">
+            <div class="shadow-lg-xsoft">
+                <p class="body-sm">
+                    <code>.shadow-lg-xsoft</code>
+                </p>
+            </div>
+            <div class="shadow-lg-soft">
+                <p class="body-sm"><code>.shadow-lg-soft</code></p>
+            </div>
+            <div class="shadow-lg-regular">
+                <p class="body-sm"><code>.shadow-lg-regular</code></p>
+            </div>
+            <div class="shadow-lg-hard">
+                <p class="body-sm"><code>.shadow-lg-hard</code></p>
+            </div>
+        </div>
+        <h2 class="body-md color-dimmed">XL Shadows</h2>
+        <div class="shadow-grid">
+            <div class="shadow-xl-xsoft">
+                <p class="body-sm"><code>.shadow-xl-xsoft</code></p>
+            </div>
+            <div class="shadow-xl-soft">
+                <p class="body-sm"><code>.shadow-xl-soft</code></p>
+            </div>
+            <div class="shadow-xl-regular">
+                <p class="body-sm"><code>.shadow-xl-regular</code></p>
+            </div>
+            <div class="shadow-xl-hard">
+                <p class="body-sm"><code>.shadow-xl-hard</code></p>
+            </div>
+        </div>
+    </div> `,
+})
+export default class ShadowsComponent {
+    /**
+     */
+    @Input()
+    storyIndex?: number = 1;
+}

package/src/core/style/base/spacing.component.ts

@@ -0,0 +1,71 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+    selector: 'storybook-spacing',
+    template: `<div *ngIf="storyIndex === 1" class="set-grid">
+        <div class="side-grid flex-wrap">
+            <div>
+                <code class="body-xs">$spacing-2xs</code>
+                <div class="size-of-box-2xs"></div>
+            </div>
+            <div>
+                <code class="body-xs">$spacing-xs</code>
+                <div class="size-of-box-xs"></div>
+            </div>
+            <div>
+                <code class="body-xs">$spacing-sm</code>
+                <div class="size-of-box-sm"></div>
+            </div>
+            <div>
+                <code class="body-xs">$spacing-md</code>
+                <div class="size-of-box-md"></div>
+            </div>
+            <div>
+                <code class="body-xs">$spacing-lg</code>
+                <div class="size-of-box-lg"></div>
+            </div>
+            <div>
+                <code class="body-xs">$spacing-xl</code>
+                <div class="size-of-box-xl"></div>
+            </div>
+            <div>
+                <code class="body-xs">$spacing-xl2</code>
+                <div class="size-of-box-xl2"></div>
+            </div>
+            <div>
+                <code class="body-xs">$spacing-xl3</code>
+                <div class="size-of-box-xl3"></div>
+            </div>
+            <div>
+                <code class="body-xs">$spacing-xl4</code>
+                <div class="size-of-box-xl4"></div>
+            </div>
+            <div>
+                <code class="body-xs">$spacing-xl5</code>
+                <div class="size-of-box-xl5"></div>
+            </div>
+            <div>
+                <code class="body-xs">$spacing-xl6</code>
+                <div class="size-of-box-xl6"></div>
+            </div>
+            <div>
+                <code class="body-xs">$spacing-xl7</code>
+                <div class="size-of-box-xl7"></div>
+            </div>
+            <div>
+                <code class="body-xs">$spacing-xl8</code>
+                <div class="size-of-box-xl8"></div>
+            </div>
+            <div>
+                <code class="body-xs">$spacing-xl9</code>
+                <div class="size-of-box-xl9"></div>
+            </div>
+        </div>
+    </div> `,
+})
+export default class SpacingComponent {
+    /**
+     */
+    @Input()
+    storyIndex?: number = 1;
+}

package/src/core/style/base/states.component.ts

@@ -0,0 +1,84 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+    selector: 'storybook-states',
+    template: `<div *ngIf="storyIndex === 1" class="set-grid">
+        <div class="color-text-grid">
+            <span>
+                <span class="side-grid-col">
+                    <h2 class="body-lg color-dimmed">Weak</h2>
+                    <pre class="body-xs">class="pep-button weak"</pre>
+                    <button class="size-it pep-button weak"></button>
+                    <hr />
+                    <h3 class="body-sm color-dimmed">Caution</h3>
+                    <pre class="body-xs">class="pep-button weak caution"</pre>
+                    <button class="size-it pep-button weak caution"></button>
+                    <h3 class="body-sm color-dimmed">Success</h3>
+                    <pre class="body-xs">class="pep-button weak success"</pre>
+                    <button class="size-it pep-button weak success"></button>
+                    <h3 class="body-sm color-dimmed">System</h3>
+                    <pre class="body-xs">class="pep-button weak system-primary"</pre>
+                    <button class="size-it pep-button weak system-primary"></button>
+                    <h3 class="body-sm color-dimmed">Primary</h3>
+                    <pre class="body-xs">class="pep-button weak user-primary"</pre>
+                    <button class="size-it pep-button weak user-primary"></button>
+                    <h3 class="body-sm color-dimmed">Secondary</h3>
+                    <pre class="body-xs">class="pep-button weak user-secondary"</pre>
+                    <button class="size-it pep-button weak user-secondary"></button>
+                </span>
+            </span>
+            <span>
+                <span class="side-grid-col">
+                    <h2 class="body-lg color-dimmed">Regular</h2>
+                    <pre class="body-xs">class="pep-button regular"</pre>
+                    <button class="size-it pep-button regular"></button>
+                    <hr />
+                    <h3 class="body-sm color-dimmed">...</h3>
+                    <pre class="body-xs">class="pep-button regular caution"</pre>
+                    <button class="size-it pep-button regular caution"></button>
+                    <h3 class="body-sm color-dimmed">...</h3>
+                    <pre class="body-xs">class="pep-button regular success"</pre>
+                    <button class="size-it pep-button regular success"></button>
+                    <h3 class="body-sm color-dimmed">...</h3>
+                    <pre class="body-xs">class="pep-button regular system-primary"</pre>
+                    <button class="size-it pep-button regular system-primary"></button>
+                    <h3 class="body-sm color-dimmed">...</h3>
+                    <pre class="body-xs">class="pep-button regular user-primary"</pre>
+                    <button class="size-it pep-button regular user-primary"></button>
+                    <h3 class="body-sm color-dimmed">...</h3>
+                    <pre class="body-xs">class="pep-button regular user-secondary"</pre>
+                    <button class="size-it pep-button regular user-secondary"></button>
+                </span>
+            </span>
+            <span>
+                <span class="side-grid-col">
+                    <h2 class="body-lg color-dimmed">Strong</h2>
+                    <pre class="body-xs">class="pep-button strong"</pre>
+                    <button class="size-it pep-button strong"></button>
+                    <hr />
+                    <h3 class="body-sm color-dimmed">...</h3>
+                    <pre class="body-xs">class="pep-button strong caution"</pre>
+                    <button class="size-it pep-button strong caution"></button>
+                    <h3 class="body-sm color-dimmed">...</h3>
+                    <pre class="body-xs">class="pep-button strong success"</pre>
+                    <button class="size-it pep-button strong success"></button>
+                    <h3 class="body-sm color-dimmed">...</h3>
+                    <pre class="body-xs">class="pep-button strong system-primary"</pre>
+                    <button class="size-it pep-button strong system-primary"></button>
+                    <h3 class="body-sm color-dimmed">...</h3>
+                    <pre class="body-xs">class="pep-button strong user-primary"</pre>
+                    <button class="size-it pep-button strong user-primary"></button>
+                    <h3 class="body-sm color-dimmed">...</h3>
+                    <pre class="body-xs">class="pep-button strong user-secondary"</pre>
+                    <button class="size-it pep-button strong user-secondary"></button>
+                </span>
+            </span>
+        </div>
+    </div> `,
+})
+export default class StatesComponent {
+    /**
+     */
+    @Input()
+    storyIndex?: number = 1;
+}

package/src/core/style/base/typography.component.ts

@@ -0,0 +1,94 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+    selector: 'storybook-typography',
+    template: `<div *ngIf="storyIndex === 1" class="set-grid">
+        <pre>.title-2xs</pre>
+        <span class="title-2xs">This is a 2XS title </span>
+        <pre>.title-xs</pre>
+        <span class="title-xs">This is a XS title </span>
+        <pre>.title-sm</pre>
+        <span class="title-sm">This is a SM title </span>
+        <pre>.title-md</pre>
+        <span class="title-md">This is a MD title </span>
+        <pre>.title-lg</pre>
+        <span class="title-lg">This is a LG title </span>
+        <pre>.title-xl</pre>
+        <span class="title-xl">This is a XL title </span>
+        <pre>.title-2xl</pre>
+        <span class="title-2xl">This is a 2XL title </span>
+        <pre>.title-3xl</pre>
+        <span class="title-3xl">This is a 3XL title </span>
+        <pre>.title-4xl</pre>
+        <span class="title-4xl">This is a 4XL title </span>
+        <pre>.title-5xl</pre>
+        <span class="title-5xl">This is a 5XL title </span>
+        <pre>.title-6xl</pre>
+        <span class="title-6xl">This is a 6XL title </span>
+        <pre>.title-7xl</pre>
+        <span class="title-7xl">This is a 7XL title </span>
+        <pre>.title-8xl</pre>
+        <span class="title-8xl">This is a 8XL title </span>
+    </div>
+    <div *ngIf="storyIndex === 2" class="set-grid">
+        <pre>&#60;h6&#62;</pre>
+        <h6>This is an h6 tag</h6>
+        <pre>&#60;h5&#62;</pre>
+        <h5>This is an h5 tag</h5>
+        <pre>&#60;h4&#62;</pre>
+        <h4>This is an h4 tag</h4>
+        <pre>&#60;h3&#62;</pre>
+        <h3>This is an h3 tag</h3>
+        <pre>&#60;h2&#62;</pre>
+        <h2>This is an h2 tag</h2>
+        <pre>&#60;h1&#62;</pre>
+        <h1>This is an h1 tag</h1>
+        </div>
+    <div *ngIf="storyIndex === 3" class="set-grid">
+        <pre>.body-2xs</pre>
+        <span class="body-2xs">This is a 2XS body class</span>
+        <pre>.body-xs</pre>
+        <span class="body-xs">This is a XS body class</span>
+        <pre>.body-sm</pre>
+        <span class="body-sm">This is a SM body class</span>
+        <pre>.body-md</pre>
+        <span class="body-md">This is a MD body class</span>
+        <pre>.body-lg</pre>
+        <span class="body-lg">This is a LG body class</span>
+        <pre>.body-xl</pre>
+        <span class="body-xl">This is a XL body class</span>
+        <pre>.body-2xl</pre>
+        <span class="body-2xl">This is a 2XL body class</span>
+        <hr/>
+        <p>This is a classless <strong>&#60;p&#62;</strong> tag</p>
+        </div>
+    <div *ngIf="storyIndex === 4" class="set-grid">
+        <pre>.color-user-primary</pre>
+        <p class="color-user-primary">This one is using the <strong>primary</strong> color class</p>
+        <pre>.color-user-secondary</pre>
+        <p class="color-user-secondary">This one is using the <strong>secondary</strong> color class</p>
+        <pre>.color-main</pre>
+        <p class="color-main">This one is using the <strong>main</strong> color class</p>
+        <pre>.color-invert</pre>
+        <p class="color-invert">This one is using the <strong>invert</strong> color class</p>
+        <pre>.color-link</pre>
+        <p class="color-link">This one is using the <strong>link</strong> color class</p>
+        <pre>.color-caution</pre>
+        <p class="color-caution">This one is using the <strong>caution</strong> color class</p>
+        <pre>.color-success</pre>
+        <p class="color-success">This one is using the <strong>success</strong> color class</p>
+        <pre>.color-dimmed class</pre>
+        <p class="color-dimmed">This one is using the <strong>dimmed</strong> color class</p>
+    </div>
+    <div *ngIf="storyIndex === 5" class="set-grid">
+        <p class="color-user-primary body-md">Unify B2B eCommerce, SFA & Trade Promotions</p>
+        <h4 class="color-dimmed body-xl">Unify B2B eCommerce, SFA & Trade Promotions</h4>
+        <span class="color-caution title-md">Unify B2B eCommerce, SFA & Trade Promotions</span>
+    </div>`,
+})
+export default class TypographyComponent {
+    /**
+   */
+    @Input()
+    storyIndex?: number = 1;
+}