From 8d4081ccd04ecbaf37a786db4099088710610e6d Mon Sep 17 00:00:00 2001
From: corcorankt1 <guern1kn@gmail.com>
Date: Wed, 23 Oct 2019 14:47:51 -0400
Subject: [PATCH 1/9] add footer story for angular

---
 .../sprk-footer/sprk-footer.stories.ts        | 257 ++++++++++++++++++
 1 file changed, 257 insertions(+)
 create mode 100644 angular/projects/spark-angular/src/lib/components/sprk-footer/sprk-footer.stories.ts

diff --git a/angular/projects/spark-angular/src/lib/components/sprk-footer/sprk-footer.stories.ts b/angular/projects/spark-angular/src/lib/components/sprk-footer/sprk-footer.stories.ts
new file mode 100644
index 0000000000..ff5cf08802
--- /dev/null
+++ b/angular/projects/spark-angular/src/lib/components/sprk-footer/sprk-footer.stories.ts
@@ -0,0 +1,257 @@
+import { SprkFooterModule } from './sprk-footer.module';
+import { RouterModule } from '@angular/router';
+import { APP_BASE_HREF } from '@angular/common';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { SprkFooterComponent } from './sprk-footer.component';
+
+export default {
+  title: 'Components|Footer',
+  component: SprkFooterModule,
+};
+
+const modules = {
+  imports: [
+    SprkFooterModule,
+    RouterModule.forRoot([{ path: 'iframe.html', component: SprkFooterComponent }]),
+    BrowserAnimationsModule,
+  ],
+  providers: [{ provide: APP_BASE_HREF, useValue: '/' }]
+};
+
+export const defaultStory = () => ({
+  moduleMetadata: modules,
+  template: `
+    <sprk-footer
+      idString="footer-1"
+      [localLinks]="[
+        {
+          heading: 'Site Links',
+          links: [
+            {
+              text: 'About This',
+              href: '/about-this',
+              analyticsString: 'Link to Sub Item 1'
+            },
+            {
+              text: 'About This Other Thing',
+              href: '/about-this-other-thing'
+            },
+            {
+              text: 'About That',
+              href: '/about-that'
+            },
+            {
+              text: 'Link Item',
+              href: '/link-item',
+              analyticsString: 'Link to Sub Item 1'
+            },
+            {
+              text: 'This Link Item',
+              href: '/this-link-item',
+              analyticsString: 'Link to Sub Item 1'
+            }
+          ]
+        },
+        {
+          heading: 'Learn More',
+          links: [
+            {
+              text: 'About This Other Thing',
+              href: '/learn-more-1'
+            },
+            {
+              text: 'About This',
+              href: '/learn-more-2'
+            },
+            {
+              text: 'About That',
+              href: '/learn-more-3'
+            },
+            {
+              text: 'Link Item',
+              href: '/learn-more-4',
+              analyticsString: 'Link to Sub Item 1'
+            }
+          ]
+        },
+        {
+          heading: 'Support',
+          links: [
+            {
+              text: 'Share Your Screen',
+              href: '/share-screen',
+              analyticsString: 'Link to Sub Item 1'
+            },
+            {
+              text: 'Opt Out',
+              href: '/opt-out'
+            },
+            {
+              text: 'About That',
+              href: '/about-that'
+            },
+            {
+              text: 'Disclosures and Other Things',
+              href: '/things',
+              analyticsString: 'Link to Sub Item 1'
+            },
+            {
+              text: 'We Want Your Feedback',
+              href: '/feedback',
+              analyticsString: 'Link to Sub Item 1'
+            }
+          ]
+        }
+      ]"
+
+      globalHeading="Global Links"
+      [globalLinks]="[
+        {
+          text: 'Lorem ipsum dolor sit amet, consectetur.',
+          href: '/global-1',
+          icon: 'auto-loans',
+          iconCSS: 'sprk-c-Icon--xl sprk-c-Icon--stroke-current-color',
+          analytics: 'link-1',
+          iconScreenReaderText: 'auto loans'
+        },
+        {
+          text: 'Lorem ipsum dolor sit amet, consectetur.',
+          href: '/global-2',
+          imgSrc:
+            'https://spark-assets.netlify.com/spark-placeholder.jpg',
+          imgCSS: 'sprk-u-Width-20',
+          imgAlt: 'Spark Placeholder Image',
+          analytics: 'link-2'
+        },
+        {
+          text: 'Lorem ipsum dolor sit amet, consectetur.',
+          href: '/global-3',
+          imgSrc:
+            'https://spark-assets.netlify.com/spark-placeholder.jpg',
+          imgCSS: 'sprk-u-Width-20',
+          imgAlt: 'Spark Placeholder Image',
+          analytics: 'link-3'
+        },
+        {
+          text: 'Lorem ipsum dolor sit amet, consectetur.',
+          href: '/global-4',
+          icon: 'auto-loans',
+          iconCSS: 'sprk-c-Icon--xl sprk-c-Icon--stroke-current-color',
+          analytics: 'link-4',
+          iconScreenReaderText: 'auto loans'
+        },
+        {
+          text: 'Lorem ipsum dolor sit amet, consectetur.',
+          href: '/global-5',
+          icon: 'payment-center',
+          iconCSS: 'sprk-c-Icon--xl sprk-c-Icon--stroke-current-color',
+          analytics: 'link-5',
+          iconScreenReaderText: 'payment center'
+        }
+      ]"
+
+      [socialLinks]="[
+        {
+          href: '/icons-1',
+          icon: 'facebook-two-color',
+          iconCSS: 'sprk-c-Icon--l sprk-c-Icon--stroke-current-color',
+          analytics: 'social-link-1',
+          iconScreenReaderText: 'facebook'
+        },
+        {
+          href: '/icons-2',
+          icon: 'instagram-two-color',
+          iconCSS: 'sprk-c-Icon--l sprk-c-Icon--stroke-current-color',
+          analytics: 'social-link-2',
+          iconScreenReaderText: 'instagram'
+        },
+        {
+          href: '/icons-3',
+          icon: 'twitter-two-color',
+          iconCSS: 'sprk-c-Icon--l sprk-c-Icon--stroke-current-color',
+          analytics: 'social-link-3',
+          iconScreenReaderText: 'twitter'
+        },
+        {
+          href: '/icons-4',
+          icon: 'youtube-two-color',
+          iconCSS: 'sprk-c-Icon--l sprk-c-Icon--stroke-current-color',
+          analytics: 'social-link-4',
+          iconScreenReaderText: 'youtube'
+        }
+      ]"
+
+      [badgeLinks]="[
+        {
+          href: '/badge-1',
+          icon: 'townhouse',
+          iconCSS: 'sprk-c-Icon--l sprk-c-Icon--stroke-current-color',
+          analytics: 'link-1',
+          iconScreenReaderText: 'townhouse'
+        },
+        {
+          href: '/badge-2',
+          icon: 'townhouse',
+          iconCSS: 'sprk-c-Icon--l sprk-c-Icon--stroke-current-color',
+          analytics: 'link-2',
+          iconScreenReaderText: 'townhouse'
+        },
+        {
+          href: '/badge-3',
+          icon: 'townhouse',
+          iconCSS: 'sprk-c-Icon--l sprk-c-Icon--stroke-current-color',
+          analytics: 'link-3',
+          iconScreenReaderText: 'townhouse'
+        }
+      ]"
+
+      awardsHeading="Awards"
+      [awards]="[
+        {
+          href: '/awards-1',
+          imgSrc:
+            'https://spark-assets.netlify.com/spark-placeholder.jpg',
+          imgCSS: 'drizzle-c-Logo-placeholder drizzle-c-Logo-placeholder--large',
+          imgAlt: 'placeholder',
+          analytics: 'awards-link-1'
+        },
+        {
+          href: '/awards-2',
+          imgSrc:
+            'https://spark-assets.netlify.com/spark-placeholder.jpg',
+          imgCSS: 'drizzle-c-Logo-placeholder drizzle-c-Logo-placeholder--large',
+          imgAlt: 'placeholder',
+          analytics: 'awards-link-2'
+        }
+      ]"
+
+      connectHeading="Connect With Us"
+      [disclaimerText]="[
+        {
+          text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
+        },
+        {
+          text: 'Incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.'
+        },
+        {
+          text: 'Lorem ipsum dolor sit amet, consectetur.'
+        },
+        {
+          text: 'Lorem ipsum dolor sit amet, consectetur.'
+        }
+      ]"
+      [disclaimerToggle]="[
+        {
+          title: 'My Award Disclaimer',
+          body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam in laoreet ante.',
+          analytics: 'disclaimer'
+        }
+      ]"
+    >
+    </sprk-footer>
+  `,
+});
+
+defaultStory.story = {
+  name: 'Default'
+};

From 27a11e909c9124bca916e6a22f7b4ba96b8fad64 Mon Sep 17 00:00:00 2001
From: corcorankt1 <guern1kn@gmail.com>
Date: Thu, 24 Oct 2019 11:24:49 -0400
Subject: [PATCH 2/9] Add sprk-table story file

---
 .../sprk-table/sprk-table.stories.ts          | 22 +++++++++++++++++++
 1 file changed, 22 insertions(+)
 create mode 100644 angular/projects/spark-angular/src/lib/components/sprk-table/sprk-table.stories.ts

diff --git a/angular/projects/spark-angular/src/lib/components/sprk-table/sprk-table.stories.ts b/angular/projects/spark-angular/src/lib/components/sprk-table/sprk-table.stories.ts
new file mode 100644
index 0000000000..2acec361d4
--- /dev/null
+++ b/angular/projects/spark-angular/src/lib/components/sprk-table/sprk-table.stories.ts
@@ -0,0 +1,22 @@
+import { SprkTableModule } from './sprk-table.module';
+
+export default {
+  title: 'Components|Table',
+  component: SprkTableModule,
+};
+
+const modules = {
+  imports: [
+    SprkTableModule,
+  ],
+};
+
+export const defaultStory = () => ({
+  moduleMetadata: modules,
+  template: `
+  `,
+});
+
+defaultStory.story = {
+  name: 'Default',
+};

From d4c57b7aff666ac4a8c79990b3ceb65f63aac1c8 Mon Sep 17 00:00:00 2001
From: corcorankt1 <guern1kn@gmail.com>
Date: Thu, 24 Oct 2019 14:39:24 -0400
Subject: [PATCH 3/9] add sprk-table stories for angular

---
 .../sprk-table/sprk-table.stories.ts          | 208 +++++++++++++++++-
 1 file changed, 203 insertions(+), 5 deletions(-)

diff --git a/angular/projects/spark-angular/src/lib/components/sprk-table/sprk-table.stories.ts b/angular/projects/spark-angular/src/lib/components/sprk-table/sprk-table.stories.ts
index 2acec361d4..03b884402a 100644
--- a/angular/projects/spark-angular/src/lib/components/sprk-table/sprk-table.stories.ts
+++ b/angular/projects/spark-angular/src/lib/components/sprk-table/sprk-table.stories.ts
@@ -2,7 +2,6 @@ import { SprkTableModule } from './sprk-table.module';
 
 export default {
   title: 'Components|Table',
-  component: SprkTableModule,
 };
 
 const modules = {
@@ -11,12 +10,211 @@ const modules = {
   ],
 };
 
-export const defaultStory = () => ({
+export const columnComparison = () => ({
   moduleMetadata: modules,
   template: `
+    <sprk-table idString="table-1">
+      <thead sprkTableHead>
+        <tr>
+          <th>Column Heading</th>
+          <th>Column Heading</th>
+          <th>Column Heading</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>Data 1</td>
+          <td>Data 2</td>
+          <td>Data 3</td>
+        </tr>
+        <tr>
+          <td>Data 1</td>
+          <td>Data 2</td>
+          <td>Data 3</td>
+        </tr>
+        <tr>
+          <td>Data 1</td>
+          <td>Data 2</td>
+          <td>Data 3</td>
+        </tr>
+        <tr>
+          <td>Data 1</td>
+          <td>Data 2</td>
+          <td>Data 3</td>
+        </tr>
+      </tbody>
+    </sprk-table>
   `,
 });
 
-defaultStory.story = {
-  name: 'Default',
-};
+export const secondary = () => ({
+  moduleMetadata: modules,
+  template: `
+    <sprk-table
+      idString="table-2"
+      additionalTableClasses="sprk-b-Table--secondary"
+    >
+      <thead sprkTableHead>
+        <tr>
+          <th>Column Heading</th>
+          <th>Column Heading</th>
+          <th>Column Heading</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>Data 1</td>
+          <td>Data 2</td>
+          <td>Data 3</td>
+        </tr>
+        <tr>
+          <td>Data 1</td>
+          <td>Data 2</td>
+          <td>Data 3</td>
+        </tr>
+        <tr>
+          <td>Data 1</td>
+          <td>Data 2</td>
+          <td>Data 3</td>
+        </tr>
+        <tr>
+          <td>Data 1</td>
+          <td>Data 2</td>
+          <td>Data 3</td>
+        </tr>
+      </tbody>
+    </sprk-table>
+  `,
+});
+
+export const groupedColumns = () => ({
+  moduleMetadata: modules,
+  template: `
+    <sprk-table idString="table-3">
+      <thead sprkTableHead>
+        <tr>
+          <th rowspan="2">Column Heading</th>
+          <th colspan="3">Column Heading</th>
+          <th rowspan="2">Column Heading</th>
+        </tr>
+        <tr>
+          <th sprkTableGroupedColumn>SubHeading</th>
+          <th sprkTableGroupedColumn>SubHeading</th>
+          <th sprkTableGroupedColumn>SubHeading</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>Data 1</td>
+          <td>Data 2</td>
+          <td>Data 3</td>
+          <td>Data 4</td>
+          <td>Data 5</td>
+        </tr>
+        <tr>
+          <td>Data 1</td>
+          <td>Data 2</td>
+          <td>Data 3</td>
+          <td>Data 4</td>
+          <td>Data 5</td>
+        </tr>
+        <tr>
+          <td>Data 1</td>
+          <td>Data 2</td>
+          <td>Data 3</td>
+          <td>Data 4</td>
+          <td>Data 5</td>
+        </tr>
+        <tr>
+          <td>Data 1</td>
+          <td>Data 2</td>
+          <td>Data 3</td>
+          <td>Data 4</td>
+          <td>Data 5</td>
+        </tr>
+      </tbody>
+    </sprk-table>
+  `,
+});
+
+export const rowComparison = () => ({
+  moduleMetadata: modules,
+  template: `
+    <sprk-table idString="table-4">
+      <thead sprkTableHead>
+        <tr>
+          <th sprkTableEmptyHeading></th>
+          <th>Column Heading</th>
+          <th>Column Heading</th>
+          <th>Column Heading</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <th sprkTableRowHeading>Row Heading</th>
+          <td>Data 1</td>
+          <td>Data 2</td>
+          <td>Data 3</td>
+        </tr>
+        <tr>
+          <th sprkTableRowHeading>Row Heading</th>
+          <td>Data 1</td>
+          <td>Data 2</td>
+          <td>Data 3</td>
+        </tr>
+        <tr>
+          <th sprkTableRowHeading>Row Heading</th>
+          <td>Data 1</td>
+          <td>Data 2</td>
+          <td>Data 3</td>
+        </tr>
+        <tr>
+          <th sprkTableRowHeading>Row Heading</th>
+          <td>Data 1</td>
+          <td>Data 2</td>
+          <td>Data 3</td>
+        </tr>
+      </tbody>
+    </sprk-table>
+  `,
+});
+
+export const secondaryRowComparison = () => ({
+  moduleMetadata: modules,
+  template: `
+    <sprk-table idString="table-5">
+      <tbody>
+        <tr>
+          <th sprkTableRowHeading>Row Heading</th>
+          <td>Data</td>
+          <td>Data</td>
+          <td class="sprk-o-Stack sprk-o-Stack--end-column">
+            <div class="sprk-o-Stack__item">
+              <button class="sprk-c-Button sprk-c-Button--secondary" type="button">Learn More</button>
+            </div>
+          </td>
+        </tr>
+        <tr>
+          <th sprkTableRowHeading>Row Heading</th>
+          <td>Data</td>
+          <td>Data</td>
+          <td class="sprk-o-Stack sprk-o-Stack--end-column">
+            <div class="sprk-o-Stack__item">
+              <button class="sprk-c-Button sprk-c-Button--secondary" type="button">Learn More</button>
+            </div>
+          </td>
+        </tr>
+        <tr>
+          <th sprkTableRowHeading>Row Heading</th>
+          <td>Data</td>
+          <td>Data</td>
+          <td class="sprk-o-Stack sprk-o-Stack--end-column">
+            <div class="sprk-o-Stack__item">
+              <button class="sprk-c-Button sprk-c-Button--secondary" type="button">Learn More</button>
+            </div>
+          </td>
+        </tr>
+      </tbody>
+    </sprk-table>
+  `,
+});

From dd91a0a5d5c69f9acea0ad343e29f34307468868 Mon Sep 17 00:00:00 2001
From: corcorankt1 <guern1kn@gmail.com>
Date: Thu, 24 Oct 2019 15:06:23 -0400
Subject: [PATCH 4/9] fix line lengths

---
 .../sprk-table/sprk-table.stories.ts          | 21 ++++++++++++++++---
 1 file changed, 18 insertions(+), 3 deletions(-)

diff --git a/angular/projects/spark-angular/src/lib/components/sprk-table/sprk-table.stories.ts b/angular/projects/spark-angular/src/lib/components/sprk-table/sprk-table.stories.ts
index 03b884402a..fa4ef6f380 100644
--- a/angular/projects/spark-angular/src/lib/components/sprk-table/sprk-table.stories.ts
+++ b/angular/projects/spark-angular/src/lib/components/sprk-table/sprk-table.stories.ts
@@ -190,7 +190,12 @@ export const secondaryRowComparison = () => ({
           <td>Data</td>
           <td class="sprk-o-Stack sprk-o-Stack--end-column">
             <div class="sprk-o-Stack__item">
-              <button class="sprk-c-Button sprk-c-Button--secondary" type="button">Learn More</button>
+              <button
+                class="sprk-c-Button sprk-c-Button--secondary"
+                type="button"
+              >
+                Learn More
+              </button>
             </div>
           </td>
         </tr>
@@ -200,7 +205,12 @@ export const secondaryRowComparison = () => ({
           <td>Data</td>
           <td class="sprk-o-Stack sprk-o-Stack--end-column">
             <div class="sprk-o-Stack__item">
-              <button class="sprk-c-Button sprk-c-Button--secondary" type="button">Learn More</button>
+              <button
+                class="sprk-c-Button sprk-c-Button--secondary"
+                type="button"
+              >
+                Learn More
+              </button>
             </div>
           </td>
         </tr>
@@ -210,7 +220,12 @@ export const secondaryRowComparison = () => ({
           <td>Data</td>
           <td class="sprk-o-Stack sprk-o-Stack--end-column">
             <div class="sprk-o-Stack__item">
-              <button class="sprk-c-Button sprk-c-Button--secondary" type="button">Learn More</button>
+              <button
+                class="sprk-c-Button sprk-c-Button--secondary"
+                type="button"
+              >
+                Learn More
+              </button>
             </div>
           </td>
         </tr>

From 42b0cf0c1ca1397568385fe67caa7e4c31df8f8d Mon Sep 17 00:00:00 2001
From: corcorankt1 <guern1kn@gmail.com>
Date: Thu, 24 Oct 2019 15:31:59 -0400
Subject: [PATCH 5/9] add decorators and update line lengths

---
 .../sprk-footer/sprk-footer.stories.ts        | 28 +++++++++++++++----
 .../sprk-table/sprk-table.stories.ts          |  8 ++++++
 2 files changed, 30 insertions(+), 6 deletions(-)

diff --git a/angular/projects/spark-angular/src/lib/components/sprk-footer/sprk-footer.stories.ts b/angular/projects/spark-angular/src/lib/components/sprk-footer/sprk-footer.stories.ts
index ff5cf08802..187d4fd78a 100644
--- a/angular/projects/spark-angular/src/lib/components/sprk-footer/sprk-footer.stories.ts
+++ b/angular/projects/spark-angular/src/lib/components/sprk-footer/sprk-footer.stories.ts
@@ -1,3 +1,4 @@
+import { storyWrapper } from '../../../../../../.storybook/helpers/storyWrapper';
 import { SprkFooterModule } from './sprk-footer.module';
 import { RouterModule } from '@angular/router';
 import { APP_BASE_HREF } from '@angular/common';
@@ -6,13 +7,22 @@ import { SprkFooterComponent } from './sprk-footer.component';
 
 export default {
   title: 'Components|Footer',
-  component: SprkFooterModule,
+  decorators: [
+    storyWrapper(
+      storyContent => (
+        `<div class="sprk-o-Box">${ storyContent }<div>`
+      )
+    )
+  ]
 };
 
 const modules = {
   imports: [
     SprkFooterModule,
-    RouterModule.forRoot([{ path: 'iframe.html', component: SprkFooterComponent }]),
+    RouterModule.forRoot([{
+      path: 'iframe.html',
+      component: SprkFooterComponent,
+    }]),
     BrowserAnimationsModule,
   ],
   providers: [{ provide: APP_BASE_HREF, useValue: '/' }]
@@ -211,7 +221,8 @@ export const defaultStory = () => ({
           href: '/awards-1',
           imgSrc:
             'https://spark-assets.netlify.com/spark-placeholder.jpg',
-          imgCSS: 'drizzle-c-Logo-placeholder drizzle-c-Logo-placeholder--large',
+          imgCSS:
+            'drizzle-c-Logo-placeholder drizzle-c-Logo-placeholder--large',
           imgAlt: 'placeholder',
           analytics: 'awards-link-1'
         },
@@ -219,7 +230,8 @@ export const defaultStory = () => ({
           href: '/awards-2',
           imgSrc:
             'https://spark-assets.netlify.com/spark-placeholder.jpg',
-          imgCSS: 'drizzle-c-Logo-placeholder drizzle-c-Logo-placeholder--large',
+          imgCSS:
+            'drizzle-c-Logo-placeholder drizzle-c-Logo-placeholder--large',
           imgAlt: 'placeholder',
           analytics: 'awards-link-2'
         }
@@ -231,7 +243,9 @@ export const defaultStory = () => ({
           text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
         },
         {
-          text: 'Incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.'
+          text:
+            'Incididunt ut labore et dolore magna aliqua.
+             Ut enim ad minim veniam.'
         },
         {
           text: 'Lorem ipsum dolor sit amet, consectetur.'
@@ -243,7 +257,9 @@ export const defaultStory = () => ({
       [disclaimerToggle]="[
         {
           title: 'My Award Disclaimer',
-          body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam in laoreet ante.',
+          body:
+            'Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+             Aliquam in laoreet ante.',
           analytics: 'disclaimer'
         }
       ]"
diff --git a/angular/projects/spark-angular/src/lib/components/sprk-table/sprk-table.stories.ts b/angular/projects/spark-angular/src/lib/components/sprk-table/sprk-table.stories.ts
index fa4ef6f380..b6e47c7018 100644
--- a/angular/projects/spark-angular/src/lib/components/sprk-table/sprk-table.stories.ts
+++ b/angular/projects/spark-angular/src/lib/components/sprk-table/sprk-table.stories.ts
@@ -1,7 +1,15 @@
+import { storyWrapper } from '../../../../../../.storybook/helpers/storyWrapper';
 import { SprkTableModule } from './sprk-table.module';
 
 export default {
   title: 'Components|Table',
+  decorators: [
+    storyWrapper(
+      storyContent => (
+        `<div class="sprk-o-Box">${ storyContent }<div>`
+      )
+    )
+  ]
 };
 
 const modules = {

From 1b5f6e587dbfade32a109487a9f498b5f670789d Mon Sep 17 00:00:00 2001
From: corcorankt1 <guern1kn@gmail.com>
Date: Thu, 24 Oct 2019 15:44:14 -0400
Subject: [PATCH 6/9] remove drizzle classes

---
 .../src/lib/components/sprk-footer/sprk-footer.stories.ts     | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/angular/projects/spark-angular/src/lib/components/sprk-footer/sprk-footer.stories.ts b/angular/projects/spark-angular/src/lib/components/sprk-footer/sprk-footer.stories.ts
index 187d4fd78a..83bd97a17b 100644
--- a/angular/projects/spark-angular/src/lib/components/sprk-footer/sprk-footer.stories.ts
+++ b/angular/projects/spark-angular/src/lib/components/sprk-footer/sprk-footer.stories.ts
@@ -222,7 +222,7 @@ export const defaultStory = () => ({
           imgSrc:
             'https://spark-assets.netlify.com/spark-placeholder.jpg',
           imgCSS:
-            'drizzle-c-Logo-placeholder drizzle-c-Logo-placeholder--large',
+            'sprk-u-Width-50',
           imgAlt: 'placeholder',
           analytics: 'awards-link-1'
         },
@@ -231,7 +231,7 @@ export const defaultStory = () => ({
           imgSrc:
             'https://spark-assets.netlify.com/spark-placeholder.jpg',
           imgCSS:
-            'drizzle-c-Logo-placeholder drizzle-c-Logo-placeholder--large',
+            'sprk-u-Width-50',
           imgAlt: 'placeholder',
           analytics: 'awards-link-2'
         }

From 3ad11a7b6e1e8749a42cdf40b62f3e86a756c48f Mon Sep 17 00:00:00 2001
From: corcorankt1 <guern1kn@gmail.com>
Date: Thu, 24 Oct 2019 15:45:30 -0400
Subject: [PATCH 7/9] update spacing

---
 .../src/lib/components/sprk-footer/sprk-footer.stories.ts   | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/angular/projects/spark-angular/src/lib/components/sprk-footer/sprk-footer.stories.ts b/angular/projects/spark-angular/src/lib/components/sprk-footer/sprk-footer.stories.ts
index 83bd97a17b..a3058d986f 100644
--- a/angular/projects/spark-angular/src/lib/components/sprk-footer/sprk-footer.stories.ts
+++ b/angular/projects/spark-angular/src/lib/components/sprk-footer/sprk-footer.stories.ts
@@ -221,8 +221,7 @@ export const defaultStory = () => ({
           href: '/awards-1',
           imgSrc:
             'https://spark-assets.netlify.com/spark-placeholder.jpg',
-          imgCSS:
-            'sprk-u-Width-50',
+          imgCSS: 'sprk-u-Width-50',
           imgAlt: 'placeholder',
           analytics: 'awards-link-1'
         },
@@ -230,8 +229,7 @@ export const defaultStory = () => ({
           href: '/awards-2',
           imgSrc:
             'https://spark-assets.netlify.com/spark-placeholder.jpg',
-          imgCSS:
-            'sprk-u-Width-50',
+          imgCSS: 'sprk-u-Width-50',
           imgAlt: 'placeholder',
           analytics: 'awards-link-2'
         }

From 9c3470dceeb72f3609cafb805b2bf5fcb53b6804 Mon Sep 17 00:00:00 2001
From: corcorankt1 <guern1kn@gmail.com>
Date: Thu, 24 Oct 2019 16:30:18 -0400
Subject: [PATCH 8/9] add sprk-link stories for angular

---
 .../components/sprk-link/sprk-link.stories.ts | 88 +++++++++++++++++++
 1 file changed, 88 insertions(+)
 create mode 100644 angular/projects/spark-angular/src/lib/components/sprk-link/sprk-link.stories.ts

diff --git a/angular/projects/spark-angular/src/lib/components/sprk-link/sprk-link.stories.ts b/angular/projects/spark-angular/src/lib/components/sprk-link/sprk-link.stories.ts
new file mode 100644
index 0000000000..cc2bb38898
--- /dev/null
+++ b/angular/projects/spark-angular/src/lib/components/sprk-link/sprk-link.stories.ts
@@ -0,0 +1,88 @@
+import { storyWrapper } from '../../../../../../.storybook/helpers/storyWrapper';
+import { SprkLinkModule } from './sprk-link.module';
+import { SprkIconModule } from '../sprk-icon/sprk-icon.module';
+import { RouterModule } from '@angular/router';
+import { APP_BASE_HREF } from '@angular/common';
+import { SprkLinkComponent } from './sprk-link.component';
+
+export default {
+  title: 'Components|Links',
+  decorators: [
+    storyWrapper(
+      storyContent => (
+        `<div class="sprk-o-Box">${ storyContent }<div>`
+      )
+    )
+  ]
+};
+
+const modules = {
+  imports: [
+    SprkLinkModule,
+    SprkIconModule,
+    RouterModule.forRoot([{
+      path: 'iframe.html',
+      component: SprkLinkComponent,
+    }]),
+  ],
+  providers: [{ provide: APP_BASE_HREF, useValue: '/' }]
+};
+
+export const base = () => ({
+  moduleMetadata: modules,
+  template: `
+    <sprk-link
+      href="#"
+      idString="link-1"
+      analyticsString="object.action.event"
+    >
+      Base Link
+    </sprk-link>
+  `,
+});
+
+export const simple = () => ({
+  moduleMetadata: modules,
+  template: `
+    <sprk-link
+      linkType="simple"
+      href="#"
+      idString="link-2"
+      analyticsString="object.action.event"
+    >
+      Simple Link
+    </sprk-link>
+  `,
+});
+
+export const iconWithText = () => ({
+  moduleMetadata: modules,
+  template: `
+    <sprk-link
+      linkType="icon"
+      href="#"
+      idString="link-3"
+      analyticsString="object.action.event"
+    >
+      <sprk-icon
+        iconType="communication"
+        additionalClasses="sprk-c-Icon--l sprk-c-Icon--stroke-current-color sprk-u-mrs"
+      >
+      </sprk-icon>
+      Message Us
+    </sprk-link>
+  `,
+});
+
+export const disabled = () => ({
+  moduleMetadata: modules,
+  template: `
+    <sprk-link
+      isDisabled="true"
+      idString="link-4"
+      analyticsString="object.action.event"
+    >
+      Disabled Link
+    </sprk-link>
+  `,
+});

From 90b7067fde7dcf0a38de96da7533a9337025a0d7 Mon Sep 17 00:00:00 2001
From: corcorankt1 <guern1kn@gmail.com>
Date: Thu, 24 Oct 2019 16:37:01 -0400
Subject: [PATCH 9/9] updates to mirror react stories for link

---
 .../src/lib/components/sprk-link/sprk-link.stories.ts     | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/angular/projects/spark-angular/src/lib/components/sprk-link/sprk-link.stories.ts b/angular/projects/spark-angular/src/lib/components/sprk-link/sprk-link.stories.ts
index cc2bb38898..3cd59ec79e 100644
--- a/angular/projects/spark-angular/src/lib/components/sprk-link/sprk-link.stories.ts
+++ b/angular/projects/spark-angular/src/lib/components/sprk-link/sprk-link.stories.ts
@@ -28,7 +28,7 @@ const modules = {
   providers: [{ provide: APP_BASE_HREF, useValue: '/' }]
 };
 
-export const base = () => ({
+export const defaultStory = () => ({
   moduleMetadata: modules,
   template: `
     <sprk-link
@@ -41,6 +41,10 @@ export const base = () => ({
   `,
 });
 
+defaultStory.story = {
+  name: 'Default',
+};
+
 export const simple = () => ({
   moduleMetadata: modules,
   template: `
@@ -55,7 +59,7 @@ export const simple = () => ({
   `,
 });
 
-export const iconWithText = () => ({
+export const iconWithTextLink = () => ({
   moduleMetadata: modules,
   template: `
     <sprk-link