@everchron/ec-shards 0.8.29 → 1.0.0

package/src/stories/collapse/collapse.stories.mdx

@@ -1,81 +0,0 @@
-import { Meta, Story, ArgsTable, Canvas, Description } from '@storybook/addon-docs/blocks';
-import EcsCollapse from '@components/collapse/collapse';
-import * as stories from './collapse.stories.js';
-
-<Meta
-  title="Content Structures/Collapse"
-  component={EcsCollapse} />
-
-# Collapse `EcsCollapse`
-
-Collapses are content areas which can be collapsed and expanded. They are be used to group or hide complex regions to keep the page, or a specific section clean.
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Collapse" height="200px">
-    {stories.collapse()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-collapse visible title="Headline" border-bottom border-top>Content</ecs-collapse>
-```
-
-## Headline
-
-A headline can be set (only text) with the `title` attribute. By setting the `headline-bold` attribute, the headline will appear as a bolder, more emphasized version. 
-
-## Initial State
-
-You can control if the Collapse should appear collapsed or expanded initially, by adding or removing the `visible` attribute.
-
-## Borders
-
-The top and bottom borders can be turned on by adding the `border-top` and `border-bottom` attributes. When these attributes are missing, the collapse is rendered without any borders.
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Borderless" height="200px">
-    {stories.borderless()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-collapse visible title="Headline">Content</ecs-collapse>
-```
-
-## Indentation
-
-For usage within other containers, such as sidebar, you might want to add some padding to the Collapse content. This can be achieved by adding the `indent` attribute.
-
-It's also possible to just add indentation to the headline, by using the `headline-indent` attribute instead. This is especially helpful when the collapse content contains elements that have their own indentation rules.
-
-Note that there are 2 different indentation levels available: `sml` (15px padding), and `md` (20px padding).
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Indentation" height="220px">
-    {stories.indentation()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-collapse visible id="test3" indent="md" border-bottom border-top title="Headline">Indent All (md)</ecs-collapse>
-
-<ecs-collapse visible id="test4" headline-indent="md" border-bottom title="Headline">Headline Indent (md)</ecs-collapse>
-
-<ecs-collapse visible id="test5" indent="sml" border-bottom title="Headline">Indent (sml)</ecs-collapse>
-
-<ecs-collapse visible id="test6" headline-indent="sml" border-bottom title="Headline">Headline Indent (sml)</ecs-collapse>
-```
-
-## Removable
-
-A button to remove the section/collapse can be added to the title by setting the `removeable` attribute to true.
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Removable" height="220px">
-    {stories.removable()}
-  </Story>
-</Canvas>
-
-## Props and Slots
-
-<ArgsTable of={EcsCollapse} />

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

@@ -1,67 +0,0 @@
-import { Meta, Story, ArgsTable, Canvas, Description } from '@storybook/addon-docs/blocks';
-import EcsCollectionControl from '@components/collection-control/collection-control';
-import * as stories from './collection-control.stories.js';
-
-<Meta
-  title="Forms/Collection Control"
-  component={EcsCollectionControl} />
-
-# Collection Control `EcsCollectionControl`
-
-Collection controls are lists of controls that can be toggled on or off. There are two sizes available: `md` and `lg`.
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Collection Control" height="240px">
-    {stories.collectionControl()}
-  </Story>
-</Canvas>
-
-```js
-data() {
-  return {
-    collection: [
-      { name: 'Editors', value: true },
-      { name: 'Clients', value: true },
-      { name: 'Translation Agency', value: false }
-    ]
-  }
-}
-
-<ecs-collection-control :collection="collection" label="Grant Access:" icon="parties">
-  <ecs-popover-list>
-    <ecs-popover-list-item @input="accessToggle" v-for="item in collection" :value="item.value" type="checkbox">{{ item.name }}</ecs-popover-list-item>
-  </ecs-popover-list>
-  </ecs-collection-control>
-  
-  <ecs-collection-control size="md" :collection="collection" label="Grant Access:" icon="parties">
-  <ecs-popover-list>
-    <ecs-popover-list-item @input="accessToggle" v-for="item in collection" :value="item.value" type="checkbox">{{ item.name }}</ecs-popover-list-item>
-  </ecs-popover-list>
-  </ecs-collection-control>
-</div>
-```
-
-## Without Borders and no Interactivity
-
-By adding the `no-border` attribute, the border will be removed.
-Sometimes you may want to disable to collapse functionality, this can be done by adding the `non-interactive` attribute.
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Collection Control Without Borders" height="240px">
-    {stories.collectionControlWithoutBorders()}
-  </Story>
-</Canvas>
-
-## Limited Height
-
-You can control the maximum height of the (scrollable) collection list by setting the `max-height` attribute (number).
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Collection Control Limited Height" height="240px">
-    {stories.collectionControlLimitedHeight()}
-  </Story>
-</Canvas>
-
-## Props and Slots
-
-<ArgsTable of={EcsCollectionControl} />

package/src/stories/color.stories.mdx

@@ -1,120 +0,0 @@
-import { Meta, ColorPalette, ColorItem } from '@storybook/addon-docs/blocks';
-
-<Meta title="Colors" />
-
-# Color Guidelines
-
-## Primary Swatches
-
-<ColorPalette>
-  <ColorItem title="Gray" subtitle="$gray-1 ... $gray-15" colors={[
-    '#F9FAFC',
-    '#F3F4F7',
-    '#ECEDF2',
-    '#D7DAE1',
-    '#B9BCC2',
-    '#A1A6B0',
-    '#929AA9',
-    '#858E9E',
-    '#75798F',
-    '#65687A',
-    '#474B60',
-    '#3C4051',
-    '#2A2D3D',
-    '#1D1F28',
-    '#202127'
-  ]} />
-  <ColorItem title="Blue" subtitle="$blue-1 ... $blue-15" colors={[
-    '#F4F9FF',
-    '#E9F3FF',
-    '#DFEEFF',
-    '#CBE3FF',
-    '#A7CFFF',
-    '#6BAFFF',
-    '#3893FF',
-    '#157EFB',
-    '#0B71EB',
-    '#0961EB',
-    '#0050CE',
-    '#0045B2',
-    '#003992',
-    '#002C71',
-    '#001D4B'
-  ]} />
-  <ColorItem title="Green" subtitle="$green-1 ... $green-15" colors={[
-    '#F5FDF9',
-    '#ECFDF5',
-    '#E0FBEE',
-    '#D3F4E4',
-    '#ACEDCD',
-    '#76E2AD',
-    '#4AD390',
-    '#19CC74',
-    '#0EBA65',
-    '#08AF5C',
-    '#019049',
-    '#006432',
-    '#004925',
-    '#00331A',
-    '#001A0D'
-  ]} />
-  <ColorItem title="Yellow" subtitle="$yellow-1 ... $yellow-15" colors={[
-    '#FAF7F4',
-    '#FBF2E6',
-    '#FAECD7',
-    '#F6E3C7',
-    '#F5DAAE',
-    '#F6CD90',
-    '#F4BF6E',
-    '#F1B251',
-    '#E9A032',
-    '#C1862F',
-    '#A2722D',
-    '#835D2A',
-    '#664B29',
-    '#443626',
-    '#312824'
-  ]} />
-  <ColorItem title="Red" subtitle="$red-1 ... $red-15" colors={[
-    '#FFF7F9',
-    '#FFF3F5',
-    '#FFE9EC',
-    '#FFDADF',
-    '#FFBEC6',
-    '#FF99A6',
-    '#FF6F81',
-    '#FF4B62',
-    '#FF3750',
-    '#ED223C',
-    '#D1112A',
-    '#B3051C',
-    '#940014',
-    '#65000E',
-    '#45000A'
-]} />
-
-</ColorPalette>
-
-## Party Side Swatches
-
-<ColorPalette>
-  <ColorItem title="Client" subtitle="$party-client-background, $party-client-text" colors={['#C4DFF7', '#0F5CA2']} />
-  <ColorItem title="Opposition" subtitle="$party-opposition-background, $party-opposition-text" colors={['#C6EAA5', '#3D7301']} />
-  <ColorItem title="Joint" subtitle="$party-joint-background, $party-joint-text" colors={['#EEE9E5', '#81715B']} />
-  <ColorItem title="Other" subtitle="$party-other-background, $party-other-text" colors={['#E4E9EE', '#7C7E82']} />
-  <ColorItem title="Court" subtitle="$party-court-background, $party-court-text" colors={['#FDE4C0', '#C07001']} />
-</ColorPalette>
-
-## Annotation Markers
-
-<ColorPalette>
-  <ColorItem title="Yellow" subtitle="$mc-1-background, -border, -color" colors={['#F9DF00', '#F5CB00', '#B57100']} />
-  <ColorItem title="Orange" subtitle="$mc-2-background, -border, -color" colors={['#F3A100', '#EE7F00', '#A95A00']} />
-  <ColorItem title="Lime" subtitle="$mc-3-background, -border, -color" colors={['#B7EA80', '#89DD3C', '#5CB907']} />
-  <ColorItem title="Cyan" subtitle="$mc-4-background, -border, -color" colors={['#48E4C2', '#1AD3A1', '#06956E']} />
-  <ColorItem title="Blue" subtitle="$mc-5-background, -border, -color" colors={['#489DFF', '#2873FF', '#0E4BBE']} />
-  <ColorItem title="Grape" subtitle="$mc-6-background, -border, -color" colors={['#B877F0', '#9845EA', '#6B1ABA']} />
-  <ColorItem title="Pink" subtitle="$mc-7-background, -border, -color" colors={['#FD78FD', '#FB3EFC', '#BE15BF']} />
-  <ColorItem title="Brown" subtitle="$mc-8-background, -border, -color" colors={['#C59465', '#AB673F', '#7B3F1B']} />
-  <ColorItem title="Gray" subtitle="$mc-9-background, -border, -color" colors={['#858E9F', '#566580', '#364258']} />
-</ColorPalette>

package/src/stories/comment/comment.stories.mdx

@@ -1,50 +0,0 @@
-import { Meta, Story, ArgsTable, Canvas, Description } from '@storybook/addon-docs/blocks';
-import EcsComment from '@components/comment/comment';
-import * as stories from './comment.stories.js';
-
-<Meta
-  title="Content Structures/Comment"
-  component={EcsComment} />
-
-# Comment `EcsComment`
-
-Multiple comments should always be wrapped by the `<ecs-comment-list>` component, which ensures the correct spacing and separator lines are used between comments. 
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Comment" height="240px">
-    {stories.comment()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-comment-list>
-  <ecs-comment user-name="Ivo Mynttinen">
-    This is my comment.
-    <template slot="commentdate">Apr 13, 2021 at 3:42 pm</template>
-  </ecs-comment>
-</ecs-comment-list>
-```
-
-## Editable
-
-If a comment needs to be editable (either by the author, or an admin), add the `can-edit` attribute.
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Comment Edit" height="240px">
-    {stories.commentEdit()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-comment-list>
-  <ecs-comment can-edit user-name="Ivo Mynttinen" user-image="https://i.pravatar.cc/100">
-    This is my comment.
-    <template slot="commentdate">Apr 13, 2021 at 3:42 pm</template>
-  </ecs-comment>
-</ecs-comment-list>
-```
-
-
-## Props and Slots
-
-<ArgsTable of={EcsComment} />

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

@@ -1,256 +0,0 @@
-import { Meta, Story, ArgsTable, Canvas, Description } from '@storybook/addon-docs/blocks';
-import EcsDataCard from '@components/data-card/data-card';
-import * as stories from './data-card.stories.js';
-
-<Meta
-  title="Content Structures/Data Card"
-  component={EcsDataCard} />
-
-# Data Card `EcsDataCard`
-
-Data cards are content structures that represent an object within a list of items. They can contain various content types, variable rows, as well as additional actions as a popover.
-
-## Lists
-
-If more than one data card is used in a list-like structure, they should be wrapped by a `<ecs-data-list>`. This has no functional impact, but ensures better styling (like no border on the last element, etc).
-
-## States
-
-+ `hover` If a data card should be clickable (and communicate clickability to the user), add the `hover` attribute.
-+ `active` If a data card has been selected, add the `active` attribute.
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="States" height="200px">
-    {stories.states()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-data-card hover>
-  <span>Added last 2 months</span>
-  <span class="subtle">4h ago</span>
-</ecs-data-card>
-<ecs-data-card hover active>
-  <span>Added last 2 months</span>
-  <span class="subtle">4h ago</span>
-</ecs-data-card>
-<ecs-data-card>
-  <span>Added last 2 months</span>
-  <span class="subtle">4h ago</span>
-</ecs-data-card>
-<ecs-data-card shadow>
-  <span>Added last 2 months</span>
-  <span class="subtle">4h ago</span>
-</ecs-data-card>
-```
-
-## Content Types
-
-Rows in data cards can contain any text based content, but a maximum of 2 `<span>` elements (aligned left and right). The following `<span>` classes are supported for data card row contents:
-
-+ `small` Smaller text size
-+ `subtle` Smaller text size and subtle color tone
-+ `mono` Monoface font
-+ `escape` Long text content that should be escaped if it overflows
-
-## Single Row
-
-Single row data cards feature one line of content.
-
-### Regular
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Single" height="120px">
-    {stories.single()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-data-card hover>
-  <span>Added last 2 months</span>
-  <span class="subtle">4h ago</span>
-</ecs-data-card>
-```
-
-### Single Row with Icon
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Single Icon" height="120px">
-    {stories.singleIcon()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-data-card hover icon="search" icon-color="#858E9E">
-  <span>Added last 2 months</span>
-  <span class="subtle">4h ago</span>
-</ecs-data-card>
-```
-
-### Single Row with Actions
-
-The `actions` slot allows you to add either one single icon-only button, or an EcsPopover for multiple actions. Data cards with actions should always have the `hover` attribute set to true.
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Single Actions" height="120px">
-    {stories.singleActions()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-data-card hover>
-  <span>Added last 2 months</span>
-  <span class="subtle">4h ago</span>
-  <template slot="actions">
-    <ecs-popover button-more>
-      <div slot="content">Actions</div>
-    </ecs-popover>
-  </template>
-</ecs-data-card>
-```
-
-## Double Row
-
-Double row data cards feature two lines of content. The second line can be added by using the `meta` slot.
-
-### Regular
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Double" height="120px">
-    {stories.double()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-data-card hover>
-  <span>Added last 2 months</span>
-  <span class="subtle">4h ago</span>
-  <template slot="meta">
-    <span class="subtle"><span class="color-venta-1">32 documents</span> added by Marie Walsh</span>
-  </template>
-</ecs-data-card>
-```
-
-### Double Row with Icon
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Double Icon" height="120px">
-    {stories.doubleIcon()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-data-card hover icon="search" icon-color="#858E9E">
-  <span>Added last 2 months</span>
-  <span class="subtle">4h ago</span>
-  <template slot="meta">
-    <span class="subtle"><span class="color-venta-1">32 documents</span> added by Marie Walsh</span>
-  </template>
-</ecs-data-card>
-```
-
-### Double Row with Actions
-
-The `actions` slot allows you to add either one single icon-only button, or an EcsPopover for multiple actions. Data cards with actions should always have the `hover` attribute set to true.
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Double Action" height="120px">
-    {stories.doubleAction()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-data-card hover>
-  <span>Added last 2 months</span>
-  <span class="subtle">4h ago</span>
-  <template slot="meta">
-    <span class="subtle"><span class="color-venta-1">32 documents</span> added by Marie Walsh</span>
-  </template>
-  <template slot="actions">
-    <ecs-popover button-more>
-      <div slot="content">Actions</div>
-    </ecs-popover>
-  </template>
-</ecs-data-card>
-```
-
-### Enabled Controls
-
-The `control` prop and slot allows to show a simple control (checkbox, radiobutton, switch) to select the data card.
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Controls" height="180px">
-    {stories.controls()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-data-card-list>
-  <ecs-data-card :control="showControls" hover icon="search" icon-color="#858E9E">
-    <span>Added last 2 months</span>
-    <span class="subtle">4h ago</span>
-    <template slot="meta">
-      <span class="subtle"><span class="color-venta-1">32 documents</span> added by Marie Walsh</span>
-    </template>
-  </ecs-data-card>
-  <ecs-data-card :control="showControls" hover>
-    <span>Added last 2 months</span>
-    <span class="subtle">4h ago</span>
-  </ecs-data-card>
-  <ecs-data-card :control="showControls" hover icon="search" icon-color="#858E9E">
-    <span>Added last 2 months</span>
-    <span class="subtle">4h ago</span>
-  </ecs-data-card>
-</ecs-data-card-list>
-```
-
-### Expandable Area
-
-The `expand` slot allows you to add an expandable area to the data card. Please note that if the expand slot is used, the props `expandable` (bool), `expandIcon` (String, icon for expand button) and `expandLabel` (String, label for expand button) will be required.
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Expandable" height="200px">
-    {stories.expandable()}
-  </Story>
-</Canvas>
-
-### Loading States
-
-Add a dynamic skeleton loading state to each data card by using the `loading` attribute. Note that this requires content within the data card, so if no content exists yet, you need to place some text as a placeholder.
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Loading" height="300px">
-    {stories.loading()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-data-card-list>
-  <ecs-data-card loading>
-    <span>Added last 2 months</span>
-    <span class="subtle">4h ago</span>
-  </ecs-data-card>
-  <ecs-data-card loading icon="search" icon-color="#858E9E">
-    <span>Added last 2 months</span>
-    <span class="subtle">4h ago</span>
-  </ecs-data-card>
-  <ecs-data-card loading icon="search" icon-color="#858E9E">
-    <span>Added last 2 months</span>
-    <span class="subtle">4h ago</span>
-    <template slot="meta">
-      <span class="subtle"><span class="color-venta-1">32 documents</span> added by Marie Walsh</span>
-    </template>
-  </ecs-data-card>
-  <ecs-data-card loading>
-    <span>Added last 2 months</span>
-    <span class="subtle">4h ago</span>
-    <template slot="meta">
-      <span class="subtle"><span class="color-venta-1">32 documents</span> added by Marie Walsh</span>
-    </template>
-  </ecs-data-card>
-</ecs-data-card-list>
-```
-
-## Props and Slots
-
-<ArgsTable of={EcsDataCard} />

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

@@ -1,110 +0,0 @@
-import { Meta, Story, ArgsTable, Canvas, Description } from '@storybook/addon-docs/blocks';
-import EcsDataListItem from '@components/data-list-item/data-list-item';
-import * as stories from './data-list-item.stories.js';
-
-<Meta
-  title="Content Structures/Data List"
-  component={EcsDataListItem} />
-
-# Data List Item `EcsDataListItem`
-
-Data lists are a content structure built as a more advanced equivalent for the HTML definition list tag `<dl>`. It allows simple data structured with an `identifier` (title) attribute and generic data content (default slot). 
-
-## Basic Usage
-
-Every group of EcsDataListItem must be wrapped by an EcsDataList. Both the `identifier` and the default slot are required.
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Data List Item" height="200px">
-    {stories.dataListItem()}
-  </Story>
-</Canvas>
-
-```js
-<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-data-list-item>
-</ecs-data-list>
-```
-
-## Full width Identifier
-
-In some cases, the data will require more space than 2/3 of the list item width. By adding the `full` attribute, you can extend the available space for both the identifier and the data part.
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Data List Item Full" height="200px">
-    {stories.dataListItemFull()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-data-list>
-  <ecs-data-list-item full identifier="Identifier">Data</ecs-data-list-item>
-  <ecs-data-list-item full identifier="Identifier">Data</ecs-data-list-item>
-  <ecs-data-list-item full identifier="Identifier">Data</ecs-data-list-item>
-</ecs-data-list>
-```
-
-## Expandable lists with sub items
-
-Data list items can have child items (single nesting only), to display data groups. To add child items to an item, just use the `collapse` slot. You do **not** have to wrap child items with another EcsDataList.
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Data List Item Expandable" height="200px">
-    {stories.dataListItemExpandable()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-data-list>
-  <ecs-data-list-item identifier="Identifier">
-    Data
-    <template slot="collapse">
-      <ecs-data-list-item identifier="Identifier" small>Data</ecs-data-list-item>
-      <ecs-data-list-item identifier="Identifier" small>Data</ecs-data-list-item>
-      <ecs-data-list-item identifier="Identifier" small>Data</ecs-data-list-item>
-    </template>
-  </ecs-data-list-item>
-</ecs-data-list>
-```
-
-## Progress Bar State
-
-Add the `progress` attribute with a percentage value (0-100) to show a progress bar within the data item. To communicate an error during the progress, add the `error` attribute.
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Data List Item Progress" height="200px">
-    {stories.dataListItemProgress()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-data-list>
-  <ecs-data-list-item identifier="Identifier" :progress="65">Data</ecs-data-list-item>
-  <ecs-data-list-item identifier="Identifier">Data</ecs-data-list-item>
-  <ecs-data-list-item identifier="Identifier" :progress="25" error>Error State</ecs-data-list-item>
-</ecs-data-list>
-```
-
-## Skeleton Loading State
-
-Add the `loading` attribute to show hide the data content and show a skeleton loading bar.
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Data List Item Loading" height="200px">
-    {stories.dataListItemLoading()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-data-list>
-  <ecs-data-list-item identifier="Identifier" loading>Data</ecs-data-list-item>
-  <ecs-data-list-item identifier="Identifier" loading>Data</ecs-data-list-item>
-  <ecs-data-list-item identifier="Identifier" loading>Data</ecs-data-list-item>
-</ecs-data-list>
-```
-
-## Props and Slots
-
-<ArgsTable of={EcsDataListItem} />