@everchron/ec-shards 0.8.29 → 1.0.0

package/src/stories/segment/segment.stories.mdx

@@ -1,65 +0,0 @@
-import { Meta, Story, ArgsTable, Canvas, Description } from '@storybook/addon-docs/blocks';
-import EcsSegment from '@components/segment/segment';
-import * as stories from './segment.stories.js';
-
-<Meta
-  title="Forms/Segment"
-  component={EcsSegment} />
-
-# Segment `EcsSegment`
-
-The segment control is a visual alternative to radiobutton group.
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Segment" height="120px">
-    {stories.segment()}
-  </Story>
-</Canvas>
-
-```js
-options: [
-  { label: 'Orange', id: 'orange' },
-  { label: 'Apple', id: 'apple' },
-  { label: 'Grapefruit', id: 'grapefruit', disabled: true }
-]
-
-<ecs-segment :options="options" :value="value" name="fruits"></ecs-segment>
-```
-
-Segment buttons can contain text, icon & text, or just an icon (a supportive tooltip should be used in that case).
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Segment Icons" height="120px">
-    {stories.segmentIcons()}
-  </Story>
-</Canvas>
-
-```js
-options: [
-  { label: 'Orange', id: 'orange', icon: 'scroll' },
-  { label: 'Apple', id: 'apple', icon: 'calendar' },
-  { label: 'Grapefruit', id: 'grapefruit', icon: 'clone-dna' }
-]
-
-<ecs-segment :options="options" :value="value" name="fruits"></ecs-segment>
-```
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Segment Icon Only" height="120px">
-    {stories.segmentIconOnly()}
-  </Story>
-</Canvas>
-
-```js
-options: [
-  { title: 'Orange', id: 'orange', icon: 'scroll' },
-  { title: 'Apple', id: 'apple', icon: 'calendar' },
-  { title: 'Grapefruit', id: 'grapefruit', icon: 'clone-dna' }
-]
-
-<ecs-segment :options="options" :value="value" name="fruits"></ecs-segment>
-```
-
-## Props and Events
-
-<ArgsTable of={EcsSegment} />

package/src/stories/select/select.stories.mdx

@@ -1,135 +0,0 @@
-import { Meta, Story, ArgsTable, Canvas, Description } from '@storybook/addon-docs/blocks';
-import EcsSelect from '@components/select/select';
-import * as stories from './select.stories.js';
-
-<Meta
-  title="Forms/Select"
-  component={EcsSelect} />
-
-# Select `EcsSelect`
-
-Select component to select value from options.
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Select" height="120px">
-    {stories.select()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-select>
-  <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>
-```
-
-## Sizes
-
-Set heights using the size prop to `xsml` extra small or `sml` for small.
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Select Sizes" height="180px">
-    {stories.selectSizes()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-select size="xsml">
-  <option value="admin">Admin</option>
-  <option value="basic">Basic</option>
-  <option value="guest">Guest</option>
-</ecs-select>
-<ecs-select size="sml">
-  <option value="admin">Admin</option>
-  <option value="basic">Basic</option>
-  <option value="guest">Guest</option>
-</ecs-select>
-<ecs-select>
-  <option value="admin">Admin</option>
-  <option value="basic">Basic</option>
-  <option value="guest">Guest</option>
-</ecs-select>
-```
-
-## Subtle style
-
-The subtle alternative select style is primarly used within EcsDialog, or toolbars. Set the `type` prop to `subtle` to turn on the subtle select style.
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Select Subtle" height="120px">
-    {stories.selectSubtle()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-select type="subtle">
-  <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>
-```
-
-## Invisible style
-
-The invisible alternative select style is primarly used within EcsDialog, or toolbars. Set the `type` prop to `invisible` to turn on the invisible select style.
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Select Invisible" height="120px">
-    {stories.selectInvisible()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-select type="invisible">
-  <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>
-```
-
-## Naked style
-
-The naked alternative select style is primarly used within EcsSidebar, as a tertiary selector. Set the `type` prop to `naked` to turn on the naked select style. Naked selects must be right-aligned in any situation.
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Select Naked" height="120px">
-    {stories.selectNaked()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-select type="naked">
-  <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>
-```
-
-## Validation and labels
-
-To extend selects with validation styles, help and error text, wrap them with the EcsFormGroup component.
-
-## Props, Slots and Events
-
-<ArgsTable of={EcsSelect} />

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

@@ -1,35 +0,0 @@
-import { Meta, Story, ArgsTable, Canvas, Description } from '@storybook/addon-docs/blocks';
-import EcsSequenceMapButton from '@components/sequence-map-button/sequence-map-button';
-import * as stories from './sequence-map-button.stories.js';
-
-<Meta
-  title="Navigation/Sequence Map"
-  component={EcsSequenceMapButton} />
-
-# Sequence Map `EcsSequenceMapButton`
-
-A sequence map is a list of buttons that reflect the current step within a linear workflow. They can act as purely informational elements, as navigation buttons, or tab buttons.
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Sequence Map Button" height="150px">
-    {stories.sequenceMapButton()}
-  </Story>
-</Canvas>
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Sequence Map Button Loading" height="150px">
-    {stories.sequenceMapButtonLoading()}
-  </Story>
-</Canvas>
-
-```js
-<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>
-```
-
-## Props and Slots
-
-<ArgsTable of={EcsSequenceMapButton} />

package/src/stories/sidebar/sidebar.stories.mdx

@@ -1,81 +0,0 @@
-import { Meta, Story, ArgsTable, Canvas, Description } from '@storybook/addon-docs/blocks';
-import EcsSidebar from '@components/sidebar/sidebar';
-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 * as stories from './sidebar.stories.js';
-
-<Meta
-  title="Sidebar/Sidebar"
-  component={EcsSidebar} />
-
-# Sidebar `EcsSidebar`
-
-The sidebar is a complex core component that relies on a lot of component nesting and carefully applied props. It's recommended to copy the source below when getting started with a new sidebar.
-
-## Guidelines
-
-- a sidebar must always contain tabs (`tab-buttons` slot) and tab content (`tabs` slot).
-- a sidebar must always have the `tab-count` attribute set to the total number of tabs.
-- each tab within the sidebar content must contain a `<ecs-sidebar-header />` element.
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Sidebar" height="800px">
-    {stories.sidebar()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-sidebar :tab-count="2" expanded>
-  <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>
-```
-
-
-## Props and Slots
-
-### EcsSidebar
-
-<ArgsTable of={EcsSidebar} />
-
-### EcsSidebarHeader
-
-<ArgsTable of={EcsSidebarHeader} />
-
-### EcsSidebarContent
-
-<ArgsTable of={EcsSidebarContent} />
-
-### EcsSidebarFooter
-
-<ArgsTable of={EcsSidebarFooter} />

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

@@ -1,65 +0,0 @@
-import { Meta, Story, ArgsTable, Canvas, Description } from '@storybook/addon-docs/blocks';
-import EcsSidebarFooter from '@components/sidebar-footer/sidebar-footer';
-import * as stories from './sidebar-footer.stories.js';
-
-<Meta
-  title="Sidebar/Footer"
-  component={EcsSidebarFooter} />
-
-# Sidebar Footer `EcsSidebarFooter`
-
-The Sidebar Footer is a sub component that should only be used within the EcsSidebar component. It's used to display buttons related to the opened sidebar tab, and other controls such as alerts.
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Footer" height="100px">
-    {stories.footer()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-sidebar-footer>
-  <ecs-button type="secondary">Cancel</ecs-button>
-  <ecs-button type="primary" icon="add-plus">Add Version</ecs-button>
-</ecs-sidebar-footer>
-```
-
-### With Extension Row
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Footer With Extension" height="100px">
-    {stories.footerWithExtension()}
-  </Story>
-</Canvas>
-
-```js
-<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>
-```
-
-
-### With Alert Row
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Footer With Alert" height="100px">
-    {stories.footerWithAlert()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-sidebar-footer>
-  <template slot="alert">
-    <ecs-alert class="mb-0">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>
-```
-
-## Props and Slots
-
-<ArgsTable of={EcsSidebarFooter} />

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

@@ -1,81 +0,0 @@
-import { Meta, Story, ArgsTable, Canvas, Description } from '@storybook/addon-docs/blocks';
-import EcsSidebarHeader from '@components/sidebar-header/sidebar-header';
-import * as stories from './sidebar-header.stories.js';
-
-<Meta
-  title="Sidebar/Header"
-  component={EcsSidebarHeader} />
-
-# Sidebar Header `EcsSidebarHeader`
-
-The sidebar header is a required sub component of EcsSidebar. It always needs to have a title, and can optionally contain controls (via `primary-controls` slot) and an either visible, or collapsed but expandable sub header for additional controls. The sub header is added by using the `sub-header` slot, and can be visible from the beginning by adding the `sub-header-expanded` attribute.
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Header" height="100px">
-    {stories.header()}
-  </Story>
-</Canvas>
-
-```js
-<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>
-```
-
-## Sub Header Expandable
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Header With Subheader" height="100px">
-    {stories.headerWithSubheader()}
-  </Story>
-</Canvas>
-
-```js
-<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>
-```
-
-## Sub Header Expanded
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Header With Subheader Expanded" height="100px">
-    {stories.headerWithSubheaderExpanded()}
-  </Story>
-</Canvas>
-
-```js
-<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>
-```
-
-## Props and Slots
-
-<ArgsTable of={EcsSidebarHeader} />

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

@@ -1,61 +0,0 @@
-import { Meta, Story, ArgsTable, Canvas, Description } from '@storybook/addon-docs/blocks';
-import EcsSkeletonLoader from '@components/skeleton-loader/skeleton-loader';
-import * as stories from './skeleton-loader.stories.js';
-
-<Meta
-  title="Feedback/Skeleton Loader"
-  component={EcsSkeletonLoader} />
-
-# Skeleton Loader `EcsSkeletonLoader`
-
-Skeleton Loaders are used within other components to indicate a loading state of content fragments. This is useful for initial loading state where parts of the UI are already rendered, or when switching between entries while new content is being fetched.
-
-## Types
-
-The following loader types are available:
-
-### Single
-
-A single line loader, used for data list items, inputs and form groups.
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="singleLine" height="80px">
-    {stories.singleLine()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-skeleton-loader type="single" />
-```
-
-### Multi
-
-Multi line loader, used for formatted content. The amount of skeleton lines can be controlled via the `count` attribute (default is 3 lines).
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="multiLine" height="180px">
-    {stories.multiLine()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-skeleton-loader type="multi" :count="4" />
-```
-
-### Rectangle
-
-Rectanlge loader, used for images, maps, checkboxes, ratings, etc. The size (in pixels for both width and height) can be controlled via the `width` and `height` attributes.
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="rectangle" height="80px">
-    {stories.rectangle()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-skeleton-loader type="rect" :width="22" :height="22" />
-```
-
-## Props and Slots
-
-<ArgsTable of={EcsSkeletonLoader} />

package/src/stories/sortbutton/sortbutton.stories.mdx

@@ -1,45 +0,0 @@
-import { Meta, Story, ArgsTable, Canvas, Description } from '@storybook/addon-docs/blocks';
-import EcsSortbutton from '@components/sortbutton/sortbutton';
-import * as stories from './sortbutton.stories.js';
-
-<Meta
-  title="Forms/Sortbutton"
-  component={EcsSortbutton} />
-
-# Sortbuttons `EcsSortbutton`
-
-Sortbuttons are toggle buttons that allow the user to set the sort option of an index to null, ascending and descending.
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Sortbutton" height="120px">
-    {stories.sortbutton()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-sortbutton>Null</ecs-sortbutton>
-<ecs-sortbutton sort="descending">Descending</ecs-sortbutton>
-<ecs-sortbutton sort="ascending">Ascending</ecs-sortbutton>
-```
-
-You can set the current sorting by setting the `sort` prop to `null`, `ascending` or `descending`.
-
-## Inline style
-
-To show sort options inline, without a line break, add the `inline` attribute.
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Sortbutton Inline" height="120px">
-    {stories.sortbuttonInline()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-sortbutton inline>Null</ecs-sortbutton>
-<ecs-sortbutton inline sort="descending">Descending</ecs-sortbutton>
-<ecs-sortbutton inline sort="ascending">Ascending</ecs-sortbutton>
-```
-
-## Props, Slots and Events
-
-<ArgsTable of={EcsSortbutton} />

package/src/stories/sticker/sticker.stories.mdx

@@ -1,30 +0,0 @@
-import { Meta, Story, ArgsTable, Canvas, Description } from '@storybook/addon-docs/blocks';
-import EcsSticker from '@components/sticker/sticker';
-import * as stories from './sticker.stories.js';
-
-<Meta
-  title="Icons/Sticker"
-  component={EcsSticker} />
-
-# Sticker `EcsSticker`
-
-Stickers are another type of icon, used primaryly to overlay on regular icons,  to indicate a specific status.
-
-The following `type`s are available:
-
-- error
-- loading
-- success
-- warning
-- warning-critical
-- current
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Sticker" height="50px">
-    {stories.sticker()}
-  </Story>
-</Canvas>
-
-## Props
-
-<ArgsTable of={EcsSticker} />