creates Components and Foundations storybook folders (#527)

Author: jasonbasuil

.storybook/preview.js

@@ -2,3 +2,11 @@ import React from 'react';
 import { addDecorator } from "@storybook/react";
 
 addDecorator(story => <div style={{ padding: '1rem' }}>{story()}</div>);
+
+export const parameters = {
+  options: {
+    storySort: {
+      order: ['Foundations', 'Components'],
+    },
+  },
+};

cypress/integration/alert_spec.js

@@ -1,38 +1,38 @@
 const alerts = [
   {
     name: 'Success',
-    path: 'design-system-alert--success',
+    path: 'components-alert--success',
     class: '.Alert__title',
   },
   {
     name: 'Info',
-    path: 'design-system-alert--info',
+    path: 'components-alert--info',
     class: '.Alert__title',
   },
   {
     name: 'Announcement',
-    path: 'design-system-alert--announcement',
+    path: 'components-alert--announcement',
     class: '.Alert__title',
   },
   {
     name: 'Error',
-    path: 'design-system-alert--error',
+    path: 'components-alert--error',
     class: '.Alert__title',
   },
   {
     name: 'Warning',
-    path: 'design-system-alert--warning',
+    path: 'components-alert--warning',
     class: '.Alert__title',
   },
   {
     name: 'With Dismiss',
-    path: 'design-system-alert--with-dismiss',
+    path: 'components-alert--with-dismiss',
     class: '.Alert__title',
     match: 'Default title',
   },
   {
     name: 'With Call To Action',
-    path: 'design-system-alert--with-call-to-action',
+    path: 'components-alert--with-call-to-action',
     class: '.Alert__title',
     match: 'Success title',
   },

cypress/integration/avatar_spec.js

@@ -1,19 +1,19 @@
 const avatars = [
   {
     name: 'Small',
-    path: 'design-system-avatar--small',
+    path: 'components-avatar--small',
     class: '.Avatar__circle__initials',
     match: 'RR',
   },
   {
     name: 'Large',
-    path: 'design-system-avatar--large',
+    path: 'components-avatar--large',
     class: '.Avatar__circle__initials',
     match: 'RR',
   },
   {
     name: 'With Alert',
-    path: 'design-system-avatar--with-alert',
+    path: 'components-avatar--with-alert',
     class: '.Avatar__circle__initials',
     match: 'RR',
   },
@@ -29,10 +29,10 @@ describe('Avatar', () => {
   });
 
   it('With Image', () => {
-    cy.visit('design-system-avatar--with-image');
+    cy.visit('components-avatar--with-image');
     cy.get('#storybook-preview-iframe').iframe().find('.Avatar__circle')
       .find('img')
       .should('be.visible');
-    cy.takePercySnapshot('design-system-alert--with-image');
+    cy.takePercySnapshot('components-alert--with-image');
   });
 });

cypress/integration/button_spec.js

@@ -1,19 +1,19 @@
 const buttons = [
   {
     name: 'Primary',
-    path: 'design-system-button--primary',
+    path: 'components-button--primary',
     class: '.Button',
     match: 'Confirm',
   },
   {
     name: 'Danger',
-    path: 'design-system-button--danger',
+    path: 'components-button--danger',
     class: '.Button',
     match: 'Delete',
   },
   {
     name: 'Warning',
-    path: 'design-system-button--warning',
+    path: 'components-button--warning',
     class: '.Button',
     match: 'Edit',
   },

cypress/integration/card_spec.js

@@ -1,8 +1,8 @@
 describe('Card', () => {
   it('Default', () => {
-    cy.visit('design-system-card--default');
+    cy.visit('components-card--default');
     cy.get('#storybook-preview-iframe').iframe().find('.Card__title')
       .should('contain', 'Large card with title');
-    cy.takePercySnapshot('design-system-card--default');
+    cy.takePercySnapshot('components-card--default');
   });
 });

cypress/integration/checkbox_button_spec.js

@@ -1,20 +1,20 @@
 describe('CheckboxButton', () => {
   it('Default', () => {
-    cy.visit('design-system-checkboxbutton--default');
+    cy.visit('components-checkboxbutton--default');
     cy.get('#storybook-preview-iframe').iframe().find('.checkbox').should('exist');
-    cy.takePercySnapshot('design-system-checkboxbutton--default');
+    cy.takePercySnapshot('components-checkboxbutton--default');
   });
 
   it('Indeterminate', () => {
-    cy.visit('design-system-checkboxbutton--indeterminate');
+    cy.visit('components-checkboxbutton--indeterminate');
     cy.get('#storybook-preview-iframe').iframe().find('#select-all').should('exist');
-    cy.takePercySnapshot('design-system-checkboxbutton--indeterminate');
+    cy.takePercySnapshot('components-checkboxbutton--indeterminate');
   });
 
   it('With Description', () => {
-    cy.visit('design-system-checkboxbutton--with-description');
+    cy.visit('components-checkboxbutton--with-description');
     cy.get('#storybook-preview-iframe').iframe().find('.FormControlLabel__label')
       .should('contain', 'Label 2');
-    cy.takePercySnapshot('design-system-checkboxbutton--with-description');
+    cy.takePercySnapshot('components-checkboxbutton--with-description');
   });
 });

cypress/integration/copy_to_clipboard_button_spec.js

@@ -1,13 +1,13 @@
 describe('Copy to Clipboard Button', () => {
   it('Default', () => {
-    cy.visit('design-system-copy-to-clipboard-button--default');
+    cy.visit('components-copy-to-clipboard-button--default');
     cy.get('#storybook-preview-iframe').iframe().find('.CopyToClipboardButton').should('exist');
-    cy.takePercySnapshot('design-system-copy-to-clipboard-button--default');
+    cy.takePercySnapshot('components-copy-to-clipboard-button--default');
   });
 
   it('Secondary', () => {
-    cy.visit('design-system-copy-to-clipboard-button--secondary');
+    cy.visit('components-copy-to-clipboard-button--secondary');
     cy.get('#storybook-preview-iframe').iframe().find('.CopyToClipboardButton').should('exist');
-    cy.takePercySnapshot('design-system-copy-to-clipboard-button--secondary');
+    cy.takePercySnapshot('components-copy-to-clipboard-button--secondary');
   });
 });

cypress/integration/copy_to_clipboard_spec.js

@@ -1,7 +1,7 @@
 describe('Copy to Clipboard', () => {
   it('Default', () => {
-    cy.visit('design-system-copy-to-clipboard--default');
+    cy.visit('components-copy-to-clipboard--default');
     cy.get('#storybook-preview-iframe').iframe().find('.CopyToClipboard').should('exist');
-    cy.takePercySnapshot('design-system-copy-to-clipboard--default');
+    cy.takePercySnapshot('components-copy-to-clipboard--default');
   });
 });

cypress/integration/dropdown_spec.js

@@ -1,17 +1,17 @@
 const dropdowns = [
   {
     name: 'Default',
-    path: 'design-system-dropdown--default',
+    path: 'components-dropdown--default',
     class: '.Dropdown',
   },
   {
     name: 'Sizes',
-    path: 'design-system-dropdown--sizes',
+    path: 'components-dropdown--sizes',
     class: '.Dropdown',
   },
   {
     name: 'Icon',
-    path: 'design-system-dropdown--icon',
+    path: 'components-dropdown--icon',
     class: '.Dropdown',
   },
 ];

cypress/integration/form_elements/checkbox_button_group_spec.js

@@ -1,27 +1,27 @@
 const checkboxButtonGroups = [
   {
     name: 'Default',
-    path: 'design-system-form-elements-checkboxbuttongroup--default',
+    path: 'components-form-elements-checkboxbuttongroup--default',
     class: '.InputLabel',
   },
   {
     name: 'Default Row',
-    path: 'design-system-form-elements-checkboxbuttongroup--default-row',
+    path: 'components-form-elements-checkboxbuttongroup--default-row',
     class: '.InputLabel',
   },
   {
     name: 'Bordered Row',
-    path: 'design-system-form-elements-checkboxbuttongroup--bordered-row',
+    path: 'components-form-elements-checkboxbuttongroup--bordered-row',
     class: '.InputLabel',
   },
   {
     name: 'Description',
-    path: 'design-system-form-elements-checkboxbuttongroup--description',
+    path: 'components-form-elements-checkboxbuttongroup--description',
     class: '.InputLabel',
   },
   {
     name: 'Description Row',
-    path: 'design-system-form-elements-checkboxbuttongroup--description-row',
+    path: 'components-form-elements-checkboxbuttongroup--description-row',
     class: '.InputLabel',
   },
 ];