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..a3058d986f
--- /dev/null
+++ b/angular/projects/spark-angular/src/lib/components/sprk-footer/sprk-footer.stories.ts
@@ -0,0 +1,271 @@
+import { storyWrapper } from '../../../../../../.storybook/helpers/storyWrapper';
+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',
+  decorators: [
+    storyWrapper(
+      storyContent => (
+        `<div class="sprk-o-Box">${ storyContent }<div>`
+      )
+    )
+  ]
+};
+
+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: 'sprk-u-Width-50',
+          imgAlt: 'placeholder',
+          analytics: 'awards-link-1'
+        },
+        {
+          href: '/awards-2',
+          imgSrc:
+            'https://spark-assets.netlify.com/spark-placeholder.jpg',
+          imgCSS: 'sprk-u-Width-50',
+          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'
+};
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..3cd59ec79e
--- /dev/null
+++ b/angular/projects/spark-angular/src/lib/components/sprk-link/sprk-link.stories.ts
@@ -0,0 +1,92 @@
+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 defaultStory = () => ({
+  moduleMetadata: modules,
+  template: `
+    <sprk-link
+      href="#"
+      idString="link-1"
+      analyticsString="object.action.event"
+    >
+      Base Link
+    </sprk-link>
+  `,
+});
+
+defaultStory.story = {
+  name: 'Default',
+};
+
+export const simple = () => ({
+  moduleMetadata: modules,
+  template: `
+    <sprk-link
+      linkType="simple"
+      href="#"
+      idString="link-2"
+      analyticsString="object.action.event"
+    >
+      Simple Link
+    </sprk-link>
+  `,
+});
+
+export const iconWithTextLink = () => ({
+  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>
+  `,
+});
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..b6e47c7018
--- /dev/null
+++ b/angular/projects/spark-angular/src/lib/components/sprk-table/sprk-table.stories.ts
@@ -0,0 +1,243 @@
+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 = {
+  imports: [
+    SprkTableModule,
+  ],
+};
+
+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>
+  `,
+});
+
+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>
+  `,
+});