@everchron/ec-shards 0.8.31 → 1.0.2

package/src/components/video/video.vue

@@ -18,22 +18,27 @@
 <script>
   export default {
     props: {
+      /** URL to an optional poster image. */
       posterImage: {
         type: String,
         default: null
       },
+      /** If set, the video auto-plays once added to the DOM. */
       autoplay: {
         type: Boolean,
         default: false
       },
+      /** Loops the video. */
       loop: {
         type: Boolean,
         default: false
       },
+      /** Determines if the video player should have any controls. */
       controls: {
         type: Boolean,
         default: true
       },
+      /** URL to the MP-4 video file. */
       mp4Source: {
         type: String,
         default: null

package/src/stories/Changelog.stories.mdx

@@ -0,0 +1,43 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+
+<Meta title="Changelog" />
+
+<h1 style={{ marginBottom: '32px', letterSpacing: '-.02em' }}>
+  Changelog
+</h1>
+
+## Version 1.0.2 (undated)
+
+### Fixes
+
+- EcsSwitch sizes to match input heights
+- Replaced old add icon with new add icon
+- EcsButton type `create` icons are now white instead of dark green
+
+## Version 1.0.1 (undated)
+
+### Fixes
+
+- Changed standard EcsTabButton font scale to 3.
+
+## Version 1.0.0 (undated)
+
+### Features
+
+- Added new `EcsFlexRow` and `EcsFlexCol` components.
+- Added new `EcsFavicon` component.
+
+### Changes
+
+- Implemented Style Dictionary to automatically generate design tokens for all platforms
+- Refactored all components to use the new design tokens
+- Redesigned most components to be in line with the design changes of the Figma design library
+- Refactored EcsFlag component to use new SVG assets, reduces package size by 40KB.
+- Visual hover effects for EcsTabButton added.
+- Refactored EcsDialog component to use native HTML5 `<dialog>` element. Fixing z-index and various overflow issues.
+
+### Breaking Changes
+
+- EcsAlert: prop `action` was renamed to `actionLabel`
+- EcsButton: sizes prop possible options changed to `sml`, `md`, `lg`. Removed `xsml` variant.
+

package/src/stories/action-toolbar/action-toolbar.stories.js

@@ -2,38 +2,22 @@ import EcsActionToolbar from '@components/action-toolbar/action-toolbar';
 import EcsButton from '@components/button/button';
 
 export default {
-  title: 'Toolbars/Action Toolbar',
+  title: 'Patterns/Action Toolbar',
   component: EcsActionToolbar
 };
 
-export const selectionActions = () => ({
+export const actionToolbar = () => ({
   components: { EcsActionToolbar, EcsButton },
   template: `
               <ecs-action-toolbar has-selection selected-type="Entry" show>
-                <ecs-button icon="evidence" size="sml">Chronology</ecs-button>
-                <ecs-button icon="folder" size="sml">Folder</ecs-button>
+                <ecs-button icon="evidence">Chronology</ecs-button>
+                <ecs-button icon="folder">Folder</ecs-button>
                 <span class="divider" />
-                <ecs-button icon="download" size="sml">Export</ecs-button>
-                <ecs-button icon="tags" size="sml">Tag</ecs-button>
-                <ecs-button icon="edit" size="sml">Edit</ecs-button>
+                <ecs-button icon="download">Export</ecs-button>
+                <ecs-button icon="tags">Tag</ecs-button>
+                <ecs-button icon="edit">Edit</ecs-button>
                 <span class="divider" />
-                <ecs-button type="danger" icon="delete" size="sml">Remove</ecs-button>
-              </ecs-action-toolbar>
-              `,
-});
-
-export const actions = () => ({
-  components: { EcsActionToolbar, EcsButton },
-  template: `
-              <ecs-action-toolbar show>
-                <ecs-button icon="evidence" size="sml">Chronology</ecs-button>
-                <ecs-button icon="folder" size="sml">Folder</ecs-button>
-                <span class="divider" />
-                <ecs-button icon="download" size="sml">Export</ecs-button>
-                <ecs-button icon="tags" size="sml">Tag</ecs-button>
-                <ecs-button icon="edit" size="sml">Edit</ecs-button>
-                <span class="divider" />
-                <ecs-button type="danger" icon="delete" size="sml">Remove</ecs-button>
+                <ecs-button type="danger" icon="delete">Remove</ecs-button>
               </ecs-action-toolbar>
               `,
 });

package/src/stories/audio/audio.stories.js

@@ -1,7 +1,7 @@
 import EcsAudio from '@components/audio/audio';
 
 export default {
-  title: 'Elements/Audio',
+  title: 'Data/Audio',
   component: EcsAudio
 };
 

package/src/stories/avatar/avatar.stories.js

@@ -1,7 +1,7 @@
 import EcsAvatar from '@components/avatar/avatar';
 
 export default {
-  title: 'Elements/Avatar',
+  title: 'Data/Avatar',
   component: EcsAvatar
 };
 

package/src/stories/breadcrumb/breadcrumb.stories.js

@@ -3,7 +3,7 @@ import EcsBreadcrumbButton from '@components/breadcrumb-button/breadcrumb-button
 import EcsBreadcrumbTitle from '@components/breadcrumb-title/breadcrumb-title';
 
 export default {
-  title: 'Navigation/Breadcrumb',
+  title: 'Navigation/Breadcrumb/Wrapper',
   component: EcsBreadcrumb
 };
 

package/src/stories/breadcrumb-button/breadcrumb-button.stories.js

@@ -0,0 +1,18 @@
+import EcsBreadcrumbButton from '@components/breadcrumb-button/breadcrumb-button';
+
+export default {
+  title: 'Navigation/Breadcrumb/Breadcrumb Button',
+  component: EcsBreadcrumbButton
+};
+
+export const breadcrumbButton = () => ({
+  components: { EcsBreadcrumbButton },
+  template: `<main>
+              <ecs-breadcrumb-button type="root" icon="everchron" title="Everchron" />
+              <ecs-breadcrumb-button clickable>Plaintiffs - RFPs to SFX & Sillerman</ecs-breadcrumb-button>
+              <ecs-breadcrumb-button clickable>Mike Moran in Omaha</ecs-breadcrumb-button>
+              <ecs-breadcrumb-button type="more" clickable />
+              <ecs-breadcrumb-button clickable>Omaha Papers</ecs-breadcrumb-button>
+            </main>
+            `,
+});

package/src/stories/button/button.stories.js

@@ -2,7 +2,7 @@ import EcsButton from '@components/button/button';
 import { action } from '@storybook/addon-actions';
 
 export default {
-  title: 'Buttons/Button',
+  title: 'Action/Button',
   component: EcsButton
 };
 
@@ -24,10 +24,9 @@ export const sizes = () => ({
   components: { EcsButton },
   methods: { action: action('clicked') },
   template: `<main>
-              <ecs-button @click="action" size='xsml' type="primary">Extra Small</ecs-button>
-              <ecs-button @click="action" size='sml' type="primary">Small</ecs-button>
-              <ecs-button @click="action" type="primary">Default</ecs-button>
-              <ecs-button @click="action" size='lg' type="primary">Large</ecs-button>
+              <ecs-button @click="action" size='sml' type="primary" icon="settings">Small</ecs-button>
+              <ecs-button @click="action" size='md' type="primary" icon="settings">Medium</ecs-button>
+              <ecs-button @click="action" size='lg' type="primary"  icon="settings">Large</ecs-button>
             </main>`,
 });
 

package/src/stories/button-collapse/button-collapse.stories.js

@@ -1,7 +1,7 @@
 import EcsButtonCollapse from '@components/button-collapse/button-collapse';
 
 export default {
-  title: 'Buttons/Button Collapse',
+  title: 'Action/Button Collapse',
   component: EcsButtonCollapse
 };
 

package/src/stories/button-context/button-context.stories.js

@@ -3,7 +3,7 @@ import EcsButtonContextGroup from '@components/button-context-group/button-conte
 import { action } from '@storybook/addon-actions';
 
 export default {
-  title: 'Buttons/Button Context',
+  title: 'Action/Button Context',
   component: EcsButtonContext
 };
 

package/src/stories/button-dialog/button-dialog.stories.js

@@ -1,7 +1,7 @@
 import EcsButtonDialog from '@components/button-dialog/button-dialog';
 
 export default {
-  title: 'Buttons/Button Dialog',
+  title: 'Action/Button Dialog',
   component: EcsButtonDialog
 };
 

package/src/stories/button-more/button-more.stories.js

@@ -1,7 +1,7 @@
 import EcsButtonMore from '@components/button-more/button-more';
 
 export default {
-  title: 'Buttons/Button More',
+  title: 'Action/Button More',
   component: EcsButtonMore
 };
 

package/src/stories/button-table/button-table.stories.js

@@ -1,7 +1,7 @@
 import EcsButtonTable from '@components/button-table/button-table';
 
 export default {
-  title: 'Buttons/Button Table',
+  title: 'Action/Button Table',
   component: EcsButtonTable
 };
 

package/src/stories/button-toolbar/button-toolbar.stories.js

@@ -2,13 +2,13 @@ import EcsButtonToolbar from '@components/button-toolbar/button-toolbar';
 import EcsButtonToolbarGroup from '@components/button-toolbar-group/button-toolbar-group';
 
 export default {
-  title: 'Buttons/Button Toolbar',
+  title: 'Action/Button Toolbar',
   component: EcsButtonToolbar
 };
 
 export const regular = () => ({
   components: { EcsButtonToolbar },
-  template: `<ecs-button-toolbar loading icon="marker"></ecs-button-toolbar>`,
+  template: `<ecs-button-toolbar icon="marker"></ecs-button-toolbar>`,
 });
 
 export const regularText = () => ({

package/src/stories/button-toolbar-icon/button-toolbar-icon.stories.js

@@ -1,7 +1,7 @@
 import EcsButtonToolbarIcon from '@components/button-toolbar-icon/button-toolbar-icon';
 
 export default {
-  title: 'Buttons/Button Toolbar Icon',
+  title: 'Action/Button Toolbar Icon',
   component: EcsButtonToolbarIcon
 };
 

package/src/stories/card/card.stories.js

@@ -1,7 +1,7 @@
 import EcsCard from '@components/card/card';
 
 export default {
-  title: 'Content Structures/Card',
+  title: 'Layout/Card',
   component: EcsCard
 };
 

package/src/stories/checkbox/checkbox.stories.js

@@ -1,7 +1,7 @@
 import EcsCheckbox from '@components/checkbox/checkbox';
 
 export default {
-  title: 'Forms/Checkbox',
+  title: 'Input/Checkbox',
   component: EcsCheckbox
 };
 

package/src/stories/collapse/collapse.stories.js

@@ -1,7 +1,7 @@
 import EcsCollapse from '@components/collapse/collapse';
 
 export default {
-  title: 'Content Structures/Collapse',
+  title: 'Navigation/Collapse',
   component: EcsCollapse
 };
 
@@ -28,4 +28,4 @@ export const indentation = () => ({
 export const removable = () => ({
   components: { EcsCollapse },
   template: `<ecs-collapse visible headline-indent="sml" removable id="test7" title="Removable" border-bottom border-top>Content</ecs-collapse>`,
-});
+});

package/src/stories/collection-control/collection-control.stories.js

@@ -3,7 +3,7 @@ import EcsPopoverList from '@components/popover-list/popover-list';
 import EcsPopoverListItem from '@components/popover-list-item/popover-list-item';
 
 export default {
-  title: 'Forms/Collection Control',
+  title: 'Input/Collection Control',
   component: EcsCollectionControl
 };
 

package/src/stories/comment/comment.stories.js

@@ -2,7 +2,7 @@ import EcsCommentList from '@components/comment-list/comment-list';
 import EcsComment from '@components/comment/comment';
 
 export default {
-  title: 'Content Structures/Comment',
+  title: 'Data/Comment',
   component: EcsComment
 };
 

package/src/stories/data-card/data-card.stories.js

@@ -5,7 +5,7 @@ import EcsCheckbox from '@components/checkbox/checkbox';
 
 
 export default {
-  title: 'Content Structures/Data Card',
+  title: 'Data/Data Card',
   component: EcsDataCard
 };
 

package/src/stories/data-list-item/data-list-item.stories.js

@@ -3,7 +3,7 @@ import EcsDataListItem from '@components/data-list-item/data-list-item';
 import EcsButton from '@components/button/button';
 
 export default {
-  title: 'Content Structures/Data List',
+  title: 'Data/Data List',
   component: EcsDataList
 };
 
@@ -12,7 +12,7 @@ export const dataListItem = () => ({
   template: `<ecs-data-list>
                 <ecs-data-list-item identifier="Identifier">Data</ecs-data-list-item>
                 <ecs-data-list-item identifier="Identifier">Data</ecs-data-list-item>
-                <ecs-data-list-item identifier="Identifier">Data<ecs-button type="secondary" icon="download" size="xsml" href="https://google.com" icon-only /></ecs-data-list-item>
+                <ecs-data-list-item identifier="Identifier">Data<ecs-button type="secondary" icon="download" size="sml" href="https://google.com" icon-only /></ecs-data-list-item>
               </ecs-data-list>`
 });
 

package/src/stories/dialog/dialog.stories.js

@@ -3,7 +3,7 @@ import EcsDialogHeader from '@components/dialog-header/dialog-header'
 import EcsButtonDialog from '@components/button-dialog/button-dialog'
 
 export default {
-  title: 'Modals & Dialogs/Dialog',
+  title: 'Feedback/Dialog/Dialog',
   component: EcsDialog
 };
 

package/src/stories/dialog-header/dialog-header.stories.js

@@ -1,7 +1,7 @@
 import EcsDialogHeader from '@components/dialog-header/dialog-header';
 
 export default {
-  title: 'Modals & Dialogs/Dialog Header',
+  title: 'Feedback/Dialog/Dialog Header',
   component: EcsDialogHeader
 };
 

package/src/stories/directory-entry/directory-entry.stories.js

@@ -1,7 +1,7 @@
 import EcsDirectoryEntry from '@components/directory-entry/directory-entry';
 
 export default {
-  title: 'Content Structures/Directory Entry',
+  title: 'Data/Directory Entry',
   component: EcsDirectoryEntry
 };
 

package/src/stories/dropzone/dropzone.stories.js

@@ -1,7 +1,7 @@
 import EcsDropzone from '@components/dropzone/dropzone';
 
 export default {
-  title: 'Forms/Dropzone',
+  title: 'Input/Dropzone',
   component: EcsDropzone
 };
 

package/src/stories/empty-state/empty-state.stories.js

@@ -2,7 +2,7 @@ import EcsEmptyState from '@components/empty-state/empty-state';
 import EcsButton from '@components/button/button';
 
 export default {
-  title: 'Elements/Empty State',
+  title: 'Feedback/Empty State',
   component: EcsEmptyState
 };
 
@@ -37,4 +37,4 @@ export const emptyStateLoading = () => ({
   template: `<div style="height:400px">
               <ecs-empty-state type="loading" />
             </div>`,
-});
+});

package/src/stories/excerpt-snippet/excerpt-snippet.stories.js

@@ -1,7 +1,7 @@
 import EcsExcerptSnippet from '@components/excerpt-snippet/excerpt-snippet';
 
 export default {
-  title: 'Content Structures/Excerpt Snippet',
+  title: 'Data/Excerpt Snippet',
   component: EcsExcerptSnippet
 };
 

package/src/stories/favicon/favicon.stories.js

@@ -0,0 +1,28 @@
+import EcsFavicon from '@components/favicon/favicon';
+
+export default {
+  title: 'Icons/Favicon',
+  component: EcsFavicon
+};
+
+export const favicon = () => ({
+  components: { EcsFavicon },
+  template: `<main>
+              <ecs-favicon website="facebook" />
+              <ecs-favicon website="github" />
+              <ecs-favicon website="instagram" />
+              <ecs-favicon website="linkedin" />
+              <ecs-favicon website="medium" />
+              <ecs-favicon website="pinterest" />
+              <ecs-favicon website="quora" />
+              <ecs-favicon website="reddit" />
+              <ecs-favicon website="tiktok" />
+              <ecs-favicon website="tumblr" />
+              <ecs-favicon website="twitter" />
+              <ecs-favicon website="vimeo" />
+              <ecs-favicon website="vkontakte" />
+              <ecs-favicon website="weibo" />
+              <ecs-favicon website="xing" />
+              <ecs-favicon website="youtube" />
+            </main>`,
+});

package/src/stories/file-list-item/file-list-item.stories.js

@@ -2,7 +2,7 @@ import EcsFileList from '@components/file-list/file-list';
 import EcsFileListItem from '@components/file-list-item/file-list-item';
 
 export default {
-  title: 'Content Structures/File List',
+  title: 'Data/File List',
   component: EcsFileListItem
 };
 

package/src/stories/flex/flex-col.stories.js

@@ -0,0 +1,41 @@
+import EcsFlexRow from '@components/flex/flex-row';
+import EcsFlexCol from '@components/flex/flex-col';
+
+export default {
+  title: 'Layout/Flexbox/Column',
+  component: EcsFlexCol
+};
+
+export const flexColumnsGrid = () => ({
+  components: { EcsFlexRow, EcsFlexCol },
+  template: `<ecs-flex-row class="highlight">
+              <ecs-flex-col :columns="2">Width 2</ecs-flex-col>
+              <ecs-flex-col :columns="2">Width 2</ecs-flex-col>
+              <ecs-flex-col :columns="8">Width 8</ecs-flex-col>
+            </ecs-flex-row>`,
+});
+
+export const flexColumnsGrow = () => ({
+  components: { EcsFlexRow, EcsFlexCol },
+  template: `<ecs-flex-row class="highlight">
+              <ecs-flex-col grow>I will grow.</ecs-flex-col>
+              <ecs-flex-col>I won't.</ecs-flex-col>
+            </ecs-flex-row>`,
+});
+
+export const flexColumnsAvoidShrink = () => ({
+  components: { EcsFlexRow, EcsFlexCol },
+  template: `<ecs-flex-row class="highlight">
+              <ecs-flex-col grow>I will grow.</ecs-flex-col>
+              <ecs-flex-col avoid-shrink>I won't shrink smaller.</ecs-flex-col>
+            </ecs-flex-row>`,
+});
+
+export const flexColumnsAutoMargin = () => ({
+  components: { EcsFlexRow, EcsFlexCol },
+  template: `<ecs-flex-row class="highlight">
+              <ecs-flex-col>Column 1</ecs-flex-col>
+              <ecs-flex-col>Column 2</ecs-flex-col>
+              <ecs-flex-col auto-margin="left">Column 3</ecs-flex-col>
+              </ecs-flex-row>`,
+});

package/src/stories/flex/flex-row.stories.js

@@ -0,0 +1,145 @@
+import EcsFlexRow from '@components/flex/flex-row';
+import EcsFlexCol from '@components/flex/flex-col';
+
+export default {
+  title: 'Layout/Flexbox/Row',
+  component: EcsFlexRow
+};
+
+export const flexRow = () => ({
+  components: { EcsFlexRow, EcsFlexCol },
+  template: `<ecs-flex-row class="highlight">
+              <div>Flex Item 1</div>
+              <div>Flex Item 2</div>
+              <div>Flex Item 3</div>
+            </ecs-flex-row>`,
+});
+
+export const flexRowDirection = () => ({
+  components: { EcsFlexRow, EcsFlexCol },
+  template: `<div>
+              <ecs-flex-row direction="row" class="highlight" style="margin-bottom: 20px">
+                <div>Flex Item 1</div>
+                <div>Flex Item 2</div>
+                <div>Flex Item 3</div>
+              </ecs-flex-row>
+              <ecs-flex-row direction="row-reverse" class="highlight" style="margin-bottom: 20px">
+                <div>Flex Item 1</div>
+                <div>Flex Item 2</div>
+                <div>Flex Item 3</div>
+              </ecs-flex-row>
+              <ecs-flex-row direction="column" class="highlight" style="margin-bottom: 20px">
+                <div>Flex Item 1</div>
+                <div>Flex Item 2</div>
+                <div>Flex Item 3</div>
+              </ecs-flex-row>
+              <ecs-flex-row direction="column-reverse" class="highlight" style="margin-bottom: 20px">
+                <div>Flex Item 1</div>
+                <div>Flex Item 2</div>
+                <div>Flex Item 3</div>
+              </ecs-flex-row>
+            </div>`,
+});
+
+export const flexRowJustify = () => ({
+  components: { EcsFlexRow, EcsFlexCol },
+  template: `<div>
+              <ecs-flex-row justify="start" class="highlight" style="margin-bottom: 20px">
+                <div>Flex Item 1</div>
+                <div>Flex Item 2</div>
+                <div>Flex Item 3</div>
+              </ecs-flex-row>
+              <ecs-flex-row justify="end" class="highlight" style="margin-bottom: 20px">
+                <div>Flex Item 1</div>
+                <div>Flex Item 2</div>
+                <div>Flex Item 3</div>
+              </ecs-flex-row>
+              <ecs-flex-row justify="center" class="highlight" style="margin-bottom: 20px">
+                <div>Flex Item 1</div>
+                <div>Flex Item 2</div>
+                <div>Flex Item 3</div>
+              </ecs-flex-row>
+              <ecs-flex-row justify="around" class="highlight" style="margin-bottom: 20px">
+                <div>Flex Item 1</div>
+                <div>Flex Item 2</div>
+                <div>Flex Item 3</div>
+              </ecs-flex-row>
+              <ecs-flex-row justify="between" class="highlight" style="margin-bottom: 20px">
+                <div>Flex Item 1</div>
+                <div>Flex Item 2</div>
+                <div>Flex Item 3</div>
+              </ecs-flex-row>
+              <ecs-flex-row justify="evenly" class="highlight" style="margin-bottom: 20px">
+                <div>Flex Item 1</div>
+                <div>Flex Item 2</div>
+                <div>Flex Item 3</div>
+              </ecs-flex-row>
+            </div>`,
+});
+
+export const flexRowAlignment = () => ({
+  components: { EcsFlexRow, EcsFlexCol },
+  template: `<div>
+              <ecs-flex-row align="start" class="highlight" style="margin-bottom: 20px; height: 80px;">
+                <div>Flex Item 1</div>
+                <div>Flex Item 2</div>
+                <div>Flex Item 3</div>
+              </ecs-flex-row>
+              <ecs-flex-row align="end" class="highlight" style="margin-bottom: 20px; height: 80px;">
+                <div>Flex Item 1</div>
+                <div>Flex Item 2</div>
+                <div>Flex Item 3</div>
+              </ecs-flex-row>
+              <ecs-flex-row align="center" class="highlight" style="margin-bottom: 20px; height: 80px;">
+                <div>Flex Item 1</div>
+                <div>Flex Item 2</div>
+                <div>Flex Item 3</div>
+              </ecs-flex-row>
+              <ecs-flex-row align="baseline" class="highlight" style="margin-bottom: 20px; height: 80px;">
+                <div>Flex Item 1</div>
+                <div>Flex Item 2</div>
+                <div>Flex Item 3</div>
+              </ecs-flex-row>
+              <ecs-flex-row align="stretch" class="highlight" style="margin-bottom: 20px; height: 80px;">
+                <div>Flex Item 1</div>
+                <div>Flex Item 2</div>
+                <div>Flex Item 3</div>
+              </ecs-flex-row>
+            </div>`,
+});
+
+export const flexRowWrap = () => ({
+  components: { EcsFlexRow, EcsFlexCol },
+  template: `<div>
+              <ecs-flex-row wrap class="highlight" style="margin-bottom: 20px;">
+                <div>Flex Item 1</div>
+                <div>Flex Item 2</div>
+                <div>Flex Item 3</div>
+                <div>Flex Item 4</div>
+                <div>Flex Item 5</div>
+                <div>Flex Item 6</div>
+                <div>Flex Item 7</div>
+                <div>Flex Item 8</div>
+                <div>Flex Item 9</div>
+                <div>Flex Item 10</div>
+                <div>Flex Item 11</div>
+                <div>Flex Item 12</div>
+                <div>Flex Item 13</div>
+              </ecs-flex-row>
+              <ecs-flex-row class="highlight" style="margin-bottom: 20px;">
+                <div>Flex Item 1</div>
+                <div>Flex Item 2</div>
+                <div>Flex Item 3</div>
+                <div>Flex Item 4</div>
+                <div>Flex Item 5</div>
+                <div>Flex Item 6</div>
+                <div>Flex Item 7</div>
+                <div>Flex Item 8</div>
+                <div>Flex Item 9</div>
+                <div>Flex Item 10</div>
+                <div>Flex Item 11</div>
+                <div>Flex Item 12</div>
+                <div>Flex Item 13</div>
+              </ecs-flex-row>
+            </div>`,
+});