@everchron/ec-shards 0.0.12

package/src/stories/section/section.stories.js

@@ -0,0 +1,39 @@
+import EcsSection from '@components/section/section';
+import EcsButton from '@components/button/button';
+
+export default {
+  title: 'Layout/Section',
+  component: EcsSection
+};
+
+export const section = () => ({
+  components: { EcsSection },
+  template: `<ecs-section title="Headline" border-top border-bottom>Content</ecs-section>`,
+});
+
+export const borderless = () => ({
+  components: { EcsSection },
+  template: `<ecs-section title="Headline">Content</ecs-section>`,
+});
+
+export const noHeadline = () => ({
+  components: { EcsSection },
+  template: `<ecs-section>Content</ecs-section>`,
+});
+
+export const indentation = () => ({
+  components: { EcsSection },
+  template: `<div>
+              <ecs-section indent="md" title="All Indent (md)" border-top border-bottom>Content</ecs-section>
+              <ecs-section headline-indent="md" title="Headline Indent (md)" border-bottom>Content</ecs-section>
+              <ecs-section indent="sml" title="All Indent (sml)" border-bottom>Content</ecs-section>
+              <ecs-section headline-indent="sml" title="Headline Indent (sml)" border-bottom>Content</ecs-section>
+            </div>`,
+});
+
+export const controls = () => ({
+  components: { EcsSection, EcsButton },
+  template: `<ecs-section indent="md" title="Headline" border-top border-bottom>Content <template slot="controls">
+    <ecs-button>Button</ecs-button>
+  </template></ecs-section>`,
+});

package/src/stories/segment/segment.stories.js

@@ -0,0 +1,51 @@
+import EcsSegment from '@components/segment/segment';
+
+export default {
+  title: 'Input/Segment',
+  component: EcsSegment
+};
+
+export const segment = () => ({
+  components: { EcsSegment },
+  data (){
+    return {
+      options: [
+        { label: 'Orange', id: 'orange' },
+        { label: 'Apple', id: 'apple' },
+        { label: 'Grapefruit', id: 'grapefruit', disabled: true }
+      ],
+      value: "orange",
+    }
+  },
+  template: `<ecs-segment :options="options" :value="value" name="first"></ecs-segment>`,
+});
+
+export const segmentIcons = () => ({
+  components: { EcsSegment },
+  data() {
+    return {
+      options: [
+        { label: 'Orange', id: 'orange', icon: 'scroll' },
+        { label: 'Apple', id: 'apple', icon: 'calendar' },
+        { label: 'Grapefruit', id: 'grapefruit', icon: 'clone-dna' }
+      ],
+      value: "orange",
+    }
+  },
+  template: `<ecs-segment :options="options" :value="value" name="second"></ecs-segment>`,
+});
+
+export const segmentIconOnly = () => ({
+  components: { EcsSegment },
+  data() {
+    return {
+      options: [
+        { title: 'Orange', id: 'orange', icon: 'scroll' },
+        { title: 'Apple', id: 'apple', icon: 'calendar' },
+        { title: 'Grapefruit', id: 'grapefruit', icon: 'clone-dna' }
+      ],
+      value: "orange",
+    }
+  },
+  template: `<ecs-segment inline :options="options" :value="value" name="third"></ecs-segment>`,
+});

package/src/stories/select/select.stories.js

@@ -0,0 +1,107 @@
+import EcsSelect from '@components/select/select';
+
+export default {
+  title: 'Input/Select',
+  component: EcsSelect
+};
+
+export const select = () => ({
+  components: { EcsSelect },
+  template: `<div>
+                <ecs-select class="mb-4">
+                  <option value="admin">Admin</option>
+                  <option value="basic">Basic</option>
+                  <option value="guest">Guest</option>
+                </ecs-select>
+                <ecs-select disabled>
+                  <option value="admin">Admin</option>
+                  <option value="basic">Basic</option>
+                  <option value="guest">Guest</option>
+                </ecs-select>
+              </div>`,
+});
+
+export const selectSizes = () => ({
+  components: { EcsSelect },
+  template: `<div>
+                <ecs-select size="sml" class="mb-4">
+                  <option value="admin">Admin</option>
+                  <option value="basic">Basic</option>
+                  <option value="guest">Guest</option>
+                </ecs-select>
+                <ecs-select size="md" class="mb-4">
+                  <option value="admin">Admin</option>
+                  <option value="basic">Basic</option>
+                  <option value="guest">Guest</option>
+                </ecs-select>
+                <ecs-select size="lg">
+                  <option value="admin">Admin</option>
+                  <option value="basic">Basic</option>
+                  <option value="guest">Guest</option>
+                </ecs-select>
+              </div>`,
+});
+
+export const selectSubtle = () => ({
+  components: { EcsSelect },
+  template: `<div>
+                <ecs-select type="subtle" class="mb-4">
+                  <option value="admin">Admin</option>
+                  <option value="basic">Basic</option>
+                  <option value="guest">Guest</option>
+                </ecs-select>
+                <ecs-select type="subtle" disabled>
+                  <option value="admin">Admin</option>
+                  <option value="basic">Basic</option>
+                  <option value="guest">Guest</option>
+                </ecs-select>
+              </div>`,
+});
+
+export const selectInvisible = () => ({
+  components: { EcsSelect },
+  template: `<div>
+                <ecs-select type="invisible" class="mb-4">
+                  <option value="admin">Admin</option>
+                  <option value="basic">Basic</option>
+                  <option value="guest">Guest</option>
+                </ecs-select>
+                <ecs-select type="invisible" disabled>
+                  <option value="admin">Admin</option>
+                  <option value="basic">Basic</option>
+                  <option value="guest">Guest</option>
+                </ecs-select>
+              </div>`,
+});
+
+export const selectNaked = () => ({
+  components: { EcsSelect },
+  template: `<div>
+                <ecs-select type="naked" class="mb-4">
+                  <option value="admin">Admin</option>
+                  <option value="basic">Basic</option>
+                  <option value="guest">Guest</option>
+                </ecs-select>
+                <ecs-select type="naked" disabled>
+                  <option value="admin">Admin</option>
+                  <option value="basic">Basic</option>
+                  <option value="guest">Guest</option>
+                </ecs-select>
+              </div>`,
+});
+
+export const selectPlaceholders = () => ({
+  components: { EcsSelect },
+  template: `<div>
+                <ecs-select placeholder="Placeholder" class="mb-4">
+                  <option value="admin">Admin</option>
+                  <option value="basic">Basic</option>
+                  <option value="guest">Guest</option>
+                </ecs-select>
+                <ecs-select placeholder="Placeholder" subtle>
+                  <option value="admin">Admin</option>
+                  <option value="basic">Basic</option>
+                  <option value="guest">Guest</option>
+                </ecs-select>
+              </div>`,
+});

package/src/stories/select-tile/select-tile.stories.js

@@ -0,0 +1,23 @@
+import EcsSelectTile from '@components/select-tile/select-tile';
+
+export default {
+  title: 'Input/Select Tile',
+  component: EcsSelectTile
+};
+
+export const selectTile = () => ({
+  components: { EcsSelectTile },
+  data() {
+    return {
+      selectedTile: null
+    }
+  },
+  template: `
+  <main>
+    <ecs-select-tile @click="selectedTile = 1" :selected="selectedTile == 1" label="Designation Load File Import" help-text="CSV or XLS Load File" illustration="load-file-designation" />
+    <ecs-select-tile @click="selectedTile = 2" :selected="selectedTile == 2" label="Designation Report Import" help-text="XLS Report" illustration="load-file-designation-report" />
+    <ecs-select-tile @click="selectedTile = 3" disabled :selected="selectedTile == 3" label="Designation Report Import" help-text="XLS Report" illustration="load-file-designation-report" />
+  </main>
+  `,
+});
+

package/src/stories/separator/separator.stories.js

@@ -0,0 +1,33 @@
+import EcsSeparator from '@components/separator/separator';
+
+export default {
+  title: 'Layout/Separator',
+  component: EcsSeparator
+};
+
+export const separator = () => ({
+  components: { EcsSeparator },
+  template: `<div>
+              <ecs-separator :margin="20" />
+              <ecs-separator type="vertical" height="24px" />
+            </div>`,
+});
+
+export const separatorStrengths = () => ({
+  components: { EcsSeparator },
+  template: `<div>
+              <ecs-separator strength="soft" :margin="20" />
+              <ecs-separator strength="medium" :margin="20" />
+              <ecs-separator strength="strong" :margin="20" />
+            </div>`,
+});
+
+export const separatorMargins = () => ({
+  components: { EcsSeparator },
+  template: `<div>
+              <ecs-separator :margin="20" />
+              <ecs-separator type="vertical" :margin="20" height="24px" />
+              <ecs-separator :margin="[20, 40]" />
+              <ecs-separator type="vertical" :margin="[8, 16, 12, 20]" height="24px" />
+            </div>`,
+});

package/src/stories/sequence-map-button/sequence-map-button.stories.js

@@ -0,0 +1,25 @@
+import EcsSequenceMapButton from '@components/sequence-map-button/sequence-map-button';
+import EcsSequenceMap from '@components/sequence-map/sequence-map';
+
+export default {
+  title: 'Navigation/Sequence Map',
+  component: EcsSequenceMapButton
+};
+
+export const sequenceMapButton = () => ({
+  components: { EcsSequenceMapButton, EcsSequenceMap },
+  template: `<ecs-sequence-map>
+              <ecs-sequence-map-button :step="1" active>Upload Sync File</ecs-sequence-map-button>
+              <ecs-sequence-map-button :step="2">Upload Video Files</ecs-sequence-map-button>
+              <ecs-sequence-map-button :step="3">Add Exhibits</ecs-sequence-map-button>
+            </ecs-sequence-map>`,
+});
+
+export const sequenceMapButtonLoading = () => ({
+  components: { EcsSequenceMapButton, EcsSequenceMap },
+  template: `<ecs-sequence-map>
+              <ecs-sequence-map-button :step="1" completed disabled>Upload Sync File</ecs-sequence-map-button>
+              <ecs-sequence-map-button :step="2" active loading>Upload Video Files</ecs-sequence-map-button>
+              <ecs-sequence-map-button :step="3">Add Exhibits</ecs-sequence-map-button>
+            </ecs-sequence-map>`,
+});

package/src/stories/sidebar/sidebar-content.stories.js

@@ -0,0 +1,27 @@
+import EcsSidebarContent from '@components/sidebar-content/sidebar-content';
+
+export default {
+  title: 'Patterns/Sidebar/Sidebar Content',
+  component: EcsSidebarContent
+};
+
+export const sidebarContent = () => ({
+  components: { EcsSidebarContent },
+  template: `<ecs-sidebar-content>
+                Content
+              </ecs-sidebar-content>`
+});
+
+export const sidebarContentIndentation = () => ({
+  components: { EcsSidebarContent },
+  template: `<ecs-sidebar-content indent>
+                Content
+              </ecs-sidebar-content>`
+});
+
+export const sidebarContentBlocked = () => ({
+  components: { EcsSidebarContent },
+  template: `<ecs-sidebar-content block-content>
+                Blocked Content
+              </ecs-sidebar-content>`
+});

package/src/stories/sidebar/sidebar-footer.stories.js

@@ -0,0 +1,38 @@
+import EcsSidebarFooter from '@components/sidebar-footer/sidebar-footer';
+import EcsButton from '@components/button/button';
+import EcsAlert from '@components/alert/alert';
+
+export default {
+  title: 'Patterns/Sidebar/Sidebar Footer',
+  component: EcsSidebarFooter
+};
+
+export const footer = () => ({
+  components: { EcsSidebarFooter, EcsButton },
+  template: `<ecs-sidebar-footer>
+                <ecs-button type="secondary">Cancel</ecs-button>
+                <ecs-button type="primary" icon="add-plus">Add Version</ecs-button>
+              </ecs-sidebar-footer>`
+});
+
+export const footerWithExtension = () => ({
+  components: { EcsSidebarFooter, EcsButton, EcsAlert },
+  template: `<ecs-sidebar-footer condensed>
+                <template slot="extension">
+                  This is an extension row.
+                </template>
+                <ecs-button type="secondary">Cancel</ecs-button>
+                <ecs-button type="primary" icon="add-plus">Add Version</ecs-button>
+              </ecs-sidebar-footer>`
+});
+
+export const footerWithAlert = () => ({
+  components: { EcsSidebarFooter, EcsButton, EcsAlert },
+  template: `<ecs-sidebar-footer>
+                <template slot="alert">
+                  <ecs-alert inset>This is an info message.</ecs-alert>
+                </template>
+                <ecs-button type="secondary">Cancel</ecs-button>
+                <ecs-button type="primary" icon="add-plus">Add Version</ecs-button>
+              </ecs-sidebar-footer>`
+});

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

@@ -0,0 +1,62 @@
+import EcsSidebarHeader from '@components/sidebar-header/sidebar-header';
+import EcsButton from '@components/button/button';
+import EcsTabBar from '@components/tab-bar/tab-bar';
+import EcsTabButton from '@components/tab-button/tab-button';
+
+
+export default {
+  title: 'Patterns/Sidebar/Sidebar Header',
+  component: EcsSidebarHeader
+};
+
+export const header = () => ({
+  components: { EcsSidebarHeader, EcsButton, EcsTabBar, EcsTabButton },
+  template: `<ecs-sidebar-header>
+              <h3 class="headline-2">Sidebar</h3>
+              <template slot="primary-controls">
+                <ecs-button type="secondary" icon-only icon="search" />
+                <ecs-button type="primary" icon="add-plus" class="ml-2">Add</ecs-button>
+              </template>
+            </ecs-sidebar-header>`
+});
+
+export const headerWithSubheaderExpanded = () => ({
+  components: { EcsSidebarHeader, EcsButton, EcsTabBar, EcsTabButton },
+  template: `<ecs-sidebar-header sub-header-expanded>
+              <h3 class="headline-2">Sidebar</h3>
+              <template slot="primary-controls">
+                <ecs-button type="secondary" icon-only icon="search" />
+                <ecs-button type="primary" icon="add-plus" class="ml-2">Add</ecs-button>
+              </template>
+              <template slot="subheader">
+                <ecs-tab-bar type="segment">
+                  <ecs-tab-button show>Locations</ecs-tab-button>
+                  <ecs-tab-button>Family</ecs-tab-button>
+                  <ecs-tab-button>Versions</ecs-tab-button>
+                </ecs-tab-bar>
+              </template>
+            </ecs-sidebar-header>`
+});
+
+export const headerWithSubheader = () => ({
+  components: { EcsSidebarHeader, EcsButton, EcsTabBar, EcsTabButton },
+  data() {
+    return {
+      expand: false
+    }
+  },
+  template: `<ecs-sidebar-header :sub-header-expanded="expand">
+              <h3 class="headline-2">Sidebar</h3>
+              <template slot="primary-controls">
+                <ecs-button @click="expand = !expand" type="secondary" icon-only icon="search" />
+                <ecs-button type="primary" icon="add-plus" class="ml-2">Add</ecs-button>
+              </template>
+              <template slot="subheader">
+                <ecs-tab-bar type="segment">
+                  <ecs-tab-button show>Locations</ecs-tab-button>
+                  <ecs-tab-button>Family</ecs-tab-button>
+                  <ecs-tab-button>Versions</ecs-tab-button>
+                </ecs-tab-bar>
+              </template>
+            </ecs-sidebar-header>`
+});

package/src/stories/sidebar/sidebar.stories.js

@@ -0,0 +1,52 @@
+import EcsSidebar from '@components/sidebar/sidebar';
+import EcsTabButton from '@components/tab-button/tab-button';
+import EcsTab from '@components/tab/tab';
+import EcsSidebarHeader from '@components/sidebar-header/sidebar-header';
+import EcsSidebarContent from '@components/sidebar-content/sidebar-content';
+import EcsSidebarFooter from '@components/sidebar-footer/sidebar-footer';
+import EcsButton from '@components/button/button';
+
+export default {
+  title: 'Patterns/Sidebar/Sidebar',
+  component: EcsSidebar
+};
+
+export const sidebar = () => ({
+  components: { EcsSidebar, EcsTabButton, EcsTab, EcsSidebarHeader, EcsButton, EcsSidebarContent, EcsSidebarFooter },
+  template: `
+            <div style="height:700px">
+            <ecs-sidebar :tab-count="2" expanded size="dynamic">
+              <template slot="tab-buttons">
+                <ecs-tab-button show icon="evidence" title="Versions" />
+                <ecs-tab-button icon="settings" title="Settings" />
+                <ecs-tab-button icon="collapse" title="Collapse" class="collapse mt-auto" />
+              </template>
+              <template slot="tabs">
+                <ecs-tab show>
+                  <ecs-sidebar-header>
+                    <h3 class="headline-2">Versions</h3>
+                    <template slot="primary-controls">
+                      <ecs-button type="secondary" icon-only icon="search" />
+                      <ecs-button type="primary" icon="add-plus" class="ml-2">Add</ecs-button>
+                    </template>
+                  </ecs-sidebar-header>
+                  <ecs-sidebar-content indent>
+                    ...
+                  </ecs-sidebar-content>
+                  <ecs-sidebar-footer>
+                    <ecs-button type="secondary">Cancel</ecs-button>
+                    <ecs-button type="primary" icon="add-plus">Add Version</ecs-button>
+                  </ecs-sidebar-footer>
+                </ecs-tab>
+                <ecs-tab>
+                  <ecs-sidebar-header>
+                    <h3 class="headline-2">Second Tab</h3>
+                  </ecs-sidebar-header>
+                  <ecs-sidebar-content indent>
+                    ...
+                  </ecs-sidebar-content>
+                </ecs-tab>
+              </template>
+            </ecs-sidebar>
+            </div>`
+});

package/src/stories/skeleton-loader/skeleton-loader.stories.js

@@ -0,0 +1,38 @@
+import EcsSkeletonLoader from '@components/skeleton-loader/skeleton-loader';
+
+export default {
+  title: 'Feedback/Skeleton Loader',
+  component: EcsSkeletonLoader
+};
+
+export const singleLine = () => ({
+  components: { EcsSkeletonLoader },
+  template: `<ecs-skeleton-loader type="single" />`,
+});
+
+export const typeScales = () => ({
+  components: { EcsSkeletonLoader },
+  template: `<main>
+              <ecs-skeleton-loader type="single" :line-height="1" />
+              <ecs-skeleton-loader type="single" :line-height="2" />
+              <ecs-skeleton-loader type="single" :line-height="3" />
+              <ecs-skeleton-loader type="single" :line-height="4" />
+              <ecs-skeleton-loader type="single" :line-height="5" />
+              <ecs-skeleton-loader type="single" :line-height="6" />
+            </main>`,
+});
+
+export const multiLine = () => ({
+  components: { EcsSkeletonLoader },
+  template: `<ecs-skeleton-loader type="multi" :count="4" />`,
+});
+
+export const rectangle = () => ({
+  components: { EcsSkeletonLoader },
+  template: `<ecs-skeleton-loader type="rect" :width="22" :height="22" />`,
+});
+
+export const circle = () => ({
+  components: { EcsSkeletonLoader },
+  template: `<ecs-skeleton-loader type="circle" :width="22" :height="22" />`,
+});

package/src/stories/sortbutton/sortbutton.stories.js

@@ -0,0 +1,24 @@
+import EcsSortbutton from '@components/sortbutton/sortbutton';
+
+export default {
+  title: 'Action/Sortbutton',
+  component: EcsSortbutton
+};
+
+export const sortbutton = () => ({
+  components: { EcsSortbutton },
+  template: `<div>
+                <ecs-sortbutton>Null</ecs-sortbutton>
+                <ecs-sortbutton sort="desc">Descending</ecs-sortbutton>
+                <ecs-sortbutton sort="asc">Ascending</ecs-sortbutton>
+              </div>`,
+});
+
+export const sortbuttonInline = () => ({
+  components: { EcsSortbutton },
+  template: `<main>
+                <ecs-sortbutton inline>Null</ecs-sortbutton>
+                <ecs-sortbutton inline sort="desc">Descending</ecs-sortbutton>
+                <ecs-sortbutton inline sort="asc">Ascending</ecs-sortbutton>
+              </main>`,
+});

package/src/stories/sticker/sticker.stories.js

@@ -0,0 +1,18 @@
+import EcsSticker from '@components/sticker/sticker';
+
+export default {
+  title: 'Icons/Sticker',
+  component: EcsSticker,
+};
+
+export const sticker = () => ({
+  components: { EcsSticker },
+  template: `<main>
+              <ecs-sticker type="error" />
+              <ecs-sticker type="loading" />
+              <ecs-sticker type="success" />
+              <ecs-sticker type="warning" />
+              <ecs-sticker type="warning-critical" />
+              <ecs-sticker type="current" />
+            </main>`,
+});

package/src/stories/structured-content/structured-content.stories.js

@@ -0,0 +1,47 @@
+import EcsStructuredContent from '@components/structured-content/structured-content';
+import EcsAvatar from '@components/avatar/avatar';
+
+export default {
+  title: 'Data/Structured Content',
+  component: EcsStructuredContent
+};
+
+export const structuredContent = () => ({
+  components: { EcsStructuredContent, EcsAvatar },
+  template: `<ecs-structured-content>
+                <span class="bold">Title</span>
+                <span>Label</span>
+
+                <template slot="extend">
+                  <span class="semi">Semi</span>
+                  <span class="semi mono">01234</span>
+                </template>
+              </ecs-structured-content>`,
+});
+
+export const structuredContentAvatar = () => ({
+  components: { EcsStructuredContent, EcsAvatar },
+  template: `<ecs-structured-content>
+                <ecs-avatar name="Ivo Mynttinen" image="https://i.pravatar.cc/100" :size="36" />
+                <span class="bold">Title</span>
+                <span>Label</span>
+
+                <template slot="extend">
+                  <span class="semi">Semi</span>
+                  <span class="semi mono">01234</span>
+                </template>
+              </ecs-structured-content>`,
+});
+
+export const structuredContentVertical = () => ({
+  components: { EcsStructuredContent, EcsAvatar },
+  template: `<ecs-structured-content vertical>
+                <span class="bold">Title</span>
+                <span>Label</span>
+
+                <template slot="extend">
+                  <span class="semi">Semi</span>
+                  <span class="semi mono">01234</span>
+                </template>
+              </ecs-structured-content>`,
+});