@everchron/ec-shards 0.8.29 → 1.0.0

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>`,
+});

package/src/stories/form-group/form-group.stories.js

@@ -2,7 +2,7 @@ import EcsFormGroup from '@components/form-group/form-group';
 import EcsInput from '@components/input/input';
 
 export default {
-  title: 'Forms/Form Group',
+  title: 'Input/Form Group',
   component: EcsFormGroup
 };
 

package/src/stories/form-set/form-set.stories.js

@@ -1,7 +1,7 @@
 import EcsFormSet from '@components/form-set/form-set';
 
 export default {
-  title: 'Forms/Form Set',
+  title: 'Layout/Form Set',
   component: EcsFormSet
 };
 

package/src/stories/formatted/formatted.stories.js

@@ -1,7 +1,7 @@
 import EcsFormatted from '@components/formatted/formatted';
 
 export default {
-  title: 'Typography/Formatted Text',
+  title: 'Data/Formatted Text',
   component: EcsFormatted
 };
 

package/src/stories/icon/icon.stories.js

@@ -3,6 +3,13 @@ import EcsIcon from '@components/icon/icon';
 export default {
   title: 'Icons/Icon',
   component: EcsIcon,
+  parameters: {
+    docs: {
+      description: {
+        component: 'The `EcsIcon` component makes use of the default Everchron icon set. A list of available icons can be found in the [Github Repository](https://github.com/everchron/ec-shards/tree/main/src/assets/icons). A full preview of all icons is available on [Figma](https://www.figma.com/file/Z9gXzG8hJHIDtDKuMb5AS0/Icons?node-id=5%3A1349).',
+      },
+    }
+  }
 };
 
 export const icon = () => ({

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

@@ -1,7 +1,7 @@
 import EcsIndexToolbar from '@components/index-toolbar/index-toolbar';
 
 export default {
-  title: 'Toolbars/Index Toolbar',
+  title: 'Patterns/Index Toolbar',
   component: EcsIndexToolbar
 };
 

package/src/stories/input/input.stories.js

@@ -1,7 +1,7 @@
 import EcsInput from '@components/input/input';
 
 export default {
-  title: 'Forms/Input',
+  title: 'Input/Input',
   component: EcsInput
 };
 
@@ -24,9 +24,9 @@ export const inputTextarea = () => ({
 export const inputSizes = () => ({
   components: { EcsInput },
   template: `<div>
-              <ecs-input size="xsml" placeholder="Enter your name" class="mb-2" />
               <ecs-input size="sml" placeholder="Enter your name" class="mb-2" />
-              <ecs-input placeholder="Enter your name" class="mb-2" />
+              <ecs-input size="md" placeholder="Enter your name" class="mb-2" />
+              <ecs-input size="lg" placeholder="Enter your name" class="mb-2" />
             </div>`,
 });
 

package/src/stories/input-float/input-float.stories.js

@@ -1,7 +1,7 @@
 import EcsInputFloat from '@components/input-float/input-float';
 
 export default {
-  title: 'Forms/Input Float',
+  title: 'Input/Input Float',
   component: EcsInputFloat
 };
 
@@ -13,7 +13,7 @@ export const inputFloat = () => ({
             </div>`,
 });
 
-export const inputFloatsizes = () => ({
+export const inputFloatSizes = () => ({
   components: { EcsInputFloat },
   template: `<div>
               <ecs-input-float label="Email" size="sml" class="mb-4" />

package/src/stories/input-group/input-group.stories.js

@@ -6,7 +6,7 @@ import EcsInputAddon from '@components/input-addon/input-addon';
 import EcsInputClear from '@components/input-clear/input-clear';
 
 export default {
-  title: 'Forms/Input Group',
+  title: 'Input/Input Group',
   component: EcsInputGroup
 };
 
@@ -71,4 +71,4 @@ export const inputClear = () => ({
                 <ecs-input />
                 <ecs-input-clear />
               </ecs-input-group>`,
-});
+});

package/src/stories/input-search/input-search.stories.js

@@ -1,8 +1,15 @@
 import EcsInputSearch from '@components/input-search/input-search';
 
 export default {
-  title: 'Forms/Search Input',
-  component: EcsInputSearch
+  title: 'Input/Search Input',
+  component: EcsInputSearch,
+  parameters: {
+    docs: {
+      description: {
+        component: '',
+      },
+    }
+  }
 };
 
 export const searchInput = () => ({

package/src/stories/layout-data-table/layout-data-table.stories.js

@@ -1,7 +1,7 @@
 import EcsLayoutDataTable from '@components/layout-data-table/layout-data-table';
 
 export default {
-  title: 'Layouts/Data Table',
+  title: 'Templates/Data Table',
   component: EcsLayoutDataTable
 };
 

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

@@ -1,7 +1,7 @@
 import EcsLayoutDirectory from '@components/layout-directory/layout-directory';
 
 export default {
-  title: 'Layouts/Directory',
+  title: 'Templates/Directory',
   component: EcsLayoutDirectory
 };
 

package/src/stories/layout-index/layout-index.stories.js

@@ -1,7 +1,7 @@
 import EcsLayoutIndex from '@components/layout-index/layout-index';
 
 export default {
-  title: 'Layouts/Index',
+  title: 'Templates/Index',
   component: EcsLayoutIndex
 };
 

package/src/stories/map/map.stories.js

@@ -1,7 +1,7 @@
 import EcsMap from '@components/map/map';
 
 export default {
-  title: 'Elements/Map',
+  title: 'Data/Map',
   component: EcsMap
 };
 

package/src/stories/modal/modal.stories.js

@@ -5,7 +5,7 @@ import EcsSequenceMap from '@components/sequence-map/sequence-map';
 import EcsSequenceMapButton from '@components/sequence-map-button/sequence-map-button';
 
 export default {
-  title: 'Modals & Dialogs/Modal',
+  title: 'Patterns/Modal',
   component: EcsModal
 };
 

package/src/stories/multiselect-option/multiselect-option.stories.js

@@ -1,7 +1,7 @@
 import EcsMultiselectOption from '@components/multiselect-option/multiselect-option';
 
 export default {
-  title: 'Forms/Multiselect/Option',
+  title: 'Input/Multiselect/Option',
   component: EcsMultiselectOption
 };
 

package/src/stories/multiselect-search-token/multiselect-search-token.stories.js

@@ -1,7 +1,7 @@
 import EcsMultiselectSearchToken from '@components/multiselect-search-token/multiselect-search-token';
 
 export default {
-  title: 'Forms/Multiselect/Search Token',
+  title: 'Input/Multiselect/Search Token',
   component: EcsMultiselectSearchToken
 };
 

package/src/stories/multiselect-token/multiselect-token.stories.js

@@ -1,7 +1,7 @@
 import EcsMultiselectToken from '@components/multiselect-token/multiselect-token';
 
 export default {
-  title: 'Forms/Multiselect/Token',
+  title: 'Input/Multiselect/Token',
   component: EcsMultiselectToken
 };
 

package/src/stories/overlay/overlay.stories.js

@@ -1,7 +1,7 @@
 import EcsOverlay from '@components/overlay/overlay';
 
 export default {
-  title: 'Modals & Dialogs/Overlay',
+  title: 'Templates/Overlay',
   component: EcsOverlay
 };
 

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

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