@everchron/ec-shards 0.8.27 → 1.0.0

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

@@ -1,89 +0,0 @@
-import { Meta, Story, ArgsTable, Canvas, Description } from '@storybook/addon-docs/blocks';
-import EcsStructuredContent from '@components/structured-content/structured-content';
-import * as stories from './structured-content.stories.js';
-
-<Meta
-  title="Content Structures/Structured Content"
-  component={EcsStructuredContent} />
-
-# Structured Content `EcsStructuredContent`
-
-Structured content components are grouped content areas for related content. The amount of content to show is limited, but can be customized heavily. 
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Structured Content" height="120px">
-    {stories.structuredContent()}
-  </Story>
-</Canvas>
-
-```js
-<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>
-```
-
-## Supported Content
-
-The default slot contains content of the left area, usually up to two label and an optional avatar or graphic. The `extend` slot contains all content that should be rendered on the right side area.
-
-Structured content components can contain any content, but it should be limited to regular text, links and avatars. Each separate content element should be wrapped by a `<span>`. The following `<span>` classes are supported for structured content row contents:
-
-+ `<ecs-avatar>` Avatar component
-+ `<ecs-tag>` Tag component
-+ `bold` Bolder text
-+ `semi` Subtle text
-+ `link` Links
-+ `mono` Monoface font
-
-## With Avatar
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Structured Content Avatar" height="120px">
-    {stories.structuredContentAvatar()}
-  </Story>
-</Canvas>
-
-```js
-<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>
-```
-
-## Vertical
-
-Add the `vertical` attribute to allow each content area to take up 100% of the space available.
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Structured Content Vertical" height="120px">
-    {stories.structuredContentVertical()}
-  </Story>
-</Canvas>
-
-```js
-<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>
-```
-
-## Props and Slots
-
-<ArgsTable of={EcsStructuredContent} />

package/src/stories/switch/switch.stories.mdx

@@ -1,69 +0,0 @@
-import { Meta, Story, ArgsTable, Canvas, Description } from '@storybook/addon-docs/blocks';
-import EcsSwitch from '@components/switch/switch';
-import * as stories from './switch.stories.js';
-
-<Meta
-  title="Forms/Switch"
-  component={EcsSwitch} />
-
-# Switch `EcsSwitch`
-
-Switches are used for representing the switching between two states or on-off state.
-
-The difference between Switch and Checkbox is that Switch will trigger a state change directly when you toggle it, while Checkbox is generally used for state marking, which should work in conjunction with submit operation.
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Regular" height="120px">
-    {stories.regular()}
-  </Story>
-</Canvas>
-
-```js
-<script>
-  data() {
-    return {
-      first: false,
-      second: true
-    }
-  }
-</script>
-
-<template>
-  <ecs-switch v-model="first">{{ first }}</ecs-switch>
-  <ecs-switch v-model="second" disabled>{{ second }}</ecs-switch>
-</template>
-```
-
-## Switch Sizes
-
-Set heights using the size prop to `sml` for small or `lg` for large.
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Sizes" height="120px">
-    {stories.sizes()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-switch size="sml">Small</ecs-switch>
-<ecs-switch>Default</ecs-switch>
-<ecs-switch size="lg">Large</ecs-switch>
-```
-
-## Standalone
-
-You can use a switch without a text label by adding the `standalone` attribute.
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Standalone" height="120px">
-    {stories.standalone()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-switch standalone />
-```
-
-## Props, Slots and Events
-
-<ArgsTable of={EcsSwitch} />

package/src/stories/tabs/tabs.stories.mdx

@@ -1,199 +0,0 @@
-import { Meta, Story, ArgsTable, Canvas, Description } from '@storybook/addon-docs/blocks';
-import EcsTabs from '@components/tabs/tabs';
-import EcsTab from '@components/tab/tab';
-import EcsTabBar from '@components/tab-bar/tab-bar';
-import EcsTabButton from '@components/tab-button/tab-button';
-
-import * as stories from './tabs.stories.js';
-
-<Meta
-  title="Navigation/Tabs"
-  component={EcsTabs} />
-
-# Tabs `EcsTabs` `EcsTab` `EcsTabBar` `EcsTabButton`
-
-Tabs allow you to separate content into different sections, while making sure that only one of these sections can be visible at all time.
-
-## The components that make a complete tab control
-
-Unlike many other components in our design system, tabs require a nested component structure of various related components. This allows us to keep tabs very flexible, and separate tab bars (and the button) from the actual tab content.
-
-```
-<ecs-tab-bar />
-├─ <ecs-tab-button />
-├─ <ecs-tab-button />
-├─ <ecs-tab-button />
-
-<ecs-tabs />
-├─ <ecs-tab />
-├─ <ecs-tab />
-├─ <ecs-tab />
-```
-
-## Tab Bar Types & Directions
-
-There are various types of tab-bar appearances available via the `type` attribute: `standard` (default) `segment` and `sidebar`. Not all tab-button variants are compatible with each theme, and in general the theme _should_ match (but there could be edge cases).
-
-Tab bars support 2 directions via the `direction` attribute: `row` (default) and `column`. There are several constraints regarding mixing different tab bars types, tab bar directions, and tab bar button types. Here are the most common tab bars that are used across the everchron app:
-
-
-## Standard Row
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Standard Row" height="240px">
-    {stories.standardRow()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-tab-bar>
-  <ecs-tab-button show>Bundles</ecs-tab-button>
-  <ecs-tab-button badge>Calendar</ecs-tab-button>
-  <ecs-tab-button>Versions</ecs-tab-button>
-</ecs-tab-bar>
-```
-
-## Standard Row with Icons
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Standard Row Icons" height="240px">
-    {stories.standardRowIcons()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-tab-bar>
-  <ecs-tab-button show icon="book">Bundles</ecs-tab-button>
-  <ecs-tab-button icon="calendar" badge>Calendar</ecs-tab-button>
-  <ecs-tab-button icon="evidence">Versions</ecs-tab-button>
-</ecs-tab-bar>
-```
-
-## Standard Column
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Standard Column" height="240px">
-    {stories.standardColumn()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-tab-bar direction="column">
-  <ecs-tab-button show>Bundles</ecs-tab-button>
-  <ecs-tab-button badge>Calendar</ecs-tab-button>
-  <ecs-tab-button>Versions</ecs-tab-button>
-</ecs-tab-bar>
-```
-
-## Standard Column with Subtabs and Icons
-
-Sub tabs are "real" tabs and control their own tab pane - however, they visually appear as a child tab of their next sibling tab that is not a subtab.  Subtabs are only supported for tab bars of type `standard` and direction `column`.
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Standard Column Icons Subtabs" height="240px">
-    {stories.standardColumnIconsSubtabs()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-tab-bar direction="column">
-  <ecs-tab-button show icon="book">Bundles</ecs-tab-button>
-  <ecs-tab-button icon="calendar" badge>Calendar</ecs-tab-button>
-  <ecs-tab-button subtab>Calendar Settings</ecs-tab-button>
-</ecs-tab-bar>
-```
-
-## Sidebar Tabs
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Sidebar Tabs" height="240px">
-    {stories.sidebarTabs()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-tab-bar type="sidebar">
-  <ecs-tab-button show icon="book" title="Bundles"></ecs-tab-button>
-  <ecs-tab-button icon="calendar" title="Calendar" badge></ecs-tab-button>
-  <ecs-tab-button icon="evidence" title="Versions"></ecs-tab-button>
-</ecs-tab-bar>
-```
-
-## Segmented Tabs
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Segment Tabs" height="240px">
-    {stories.segmentTabs()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-tab-bar type="segment">
-  <ecs-tab-button show>Bundles</ecs-tab-button>
-  <ecs-tab-button badge>Calendar</ecs-tab-button>
-  <ecs-tab-button>Versions</ecs-tab-button>
-</ecs-tab-bar>
-```
-
-## Sheet Tabs
-
-Sheet tab bars are used exclusively as a tab bar for controlling table sheets, within the EcsPagination component.
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Sheet Tabs" height="240px">
-    {stories.sheetTabs()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-tab-bar type="sheet">
-  <ecs-tab-button show>Bundles</ecs-tab-button>
-  <ecs-tab-button>Calendar</ecs-tab-button>
-  <ecs-tab-button>Versions</ecs-tab-button>
-</ecs-tab-bar>
-```
-
-## Modal Tabs
-
-Modal tab bars are used exclusively as a tab bar within EcsModalHeader components.
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Modal Tabs" height="240px">
-    {stories.modalTabs()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-tab-bar type="modal">
-  <ecs-tab-button show>Bundles</ecs-tab-button>
-  <ecs-tab-button>Calendar</ecs-tab-button>
-  <ecs-tab-button>Versions</ecs-tab-button>
-</ecs-tab-bar>
-```
-
-## Guidelines and Best Practices
-
-- Stickers (small additional icons to indicate a status of a tab) can be added via the `sticker` attribute. The following stickers are available: `success`, `error`, `warning`, and `warning-critical`. **Do not** use a sticker for anything else but a standard tab bar (either horizontal or vertical), also only tabs that have an icon will display a sticker.
-- Icons should be used for any tab bar, but only preferred **not** on the segmented tab bar.
-- Icons are **required** for the sidebar tab bar.
-- Tooltips should be used when a tab has no text content.
-- Each tab button can have an optional notification badge added via the `badge` attribute. This should be used to communicate that something "new" is available in that tab, or data is generally available (eg. for comments or annotations). 
-
-
-## Props and Slots
-
-### EcsTabs
-
-<ArgsTable of={EcsTabs} />
-
-### EcsTab
-
-<ArgsTable of={EcsTab} />
-
-### EcsTabBar
-
-<ArgsTable of={EcsTabBar} />
-
-### EcsTabButton
-
-<ArgsTable of={EcsTabButton} />

package/src/stories/tag/tag.stories.mdx

@@ -1,117 +0,0 @@
-import { Meta, Story, ArgsTable, Canvas, Description } from '@storybook/addon-docs/blocks';
-import EcsTag from '@components/tag/tag';
-import * as stories from './tag.stories.js';
-
-<Meta
-  title="Elements/Tag"
-  component={EcsTag} />
-
-# Tag `EcsTag`
-
-Tags are used to categorize data. Different tag styles are used to reprenset specific data: issues (documents), filters, party sides and groups (profiles, entities).
-
-## Hover and Active States
-
-Each tag style has an `active` state (eg. to indicate an active filter) as well as the `hover` attribute. The hover attribute should be added if the tag is interactive.
-
-## Issue Tag
-
-For the issue tag style, set the `type` prop to `regular`.
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Entry Tag" height="120px">
-    {stories.entryTag()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-tag type="regular">issue</ecs-tag>
-<ecs-tag type="regular" hover>hover</ecs-tag>
-<ecs-tag type="regular" active>active</ecs-tag>
-```
-
-## Filter Tag
-
-For the filter tag style, set the `type` prop to `filter`. Filter tags can have an optional `count` to reflect the total results that match this filter.
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Filter Tag" height="120px">
-    {stories.filterTag()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-tag type="filter" count="3">filter</ecs-tag>
-<ecs-tag type="filter" count="3" hover>hover</ecs-tag>
-<ecs-tag type="filter" count="3" active>active</ecs-tag>
-```
-
-## Party Tag
-
-For the party tag style, set the `type` prop to `party`. Party tags require the `party` prop set to:
-
-+ Client: `client`
-+ Opposition: `opposition`
-+ Joint: `joint`
-+ Other: `other`
-+ Court: `court`
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Party Tag" height="240px">
-    {stories.partyTag()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-tag type="party" party="client">client</ecs-tag>
-<ecs-tag type="party" party="client" hover>hover</ecs-tag>
-<ecs-tag type="party" party="client" active>active</ecs-tag>
-<ecs-tag type="party" party="opposing">opposition</ecs-tag>
-<ecs-tag type="party" party="opposing" hover>hover</ecs-tag>
-<ecs-tag type="party" party="opposing" active>active</ecs-tag>
-<ecs-tag type="party" party="joint">joint</ecs-tag>
-<ecs-tag type="party" party="joint" hover>hover</ecs-tag>
-<ecs-tag type="party" party="joint" active>active</ecs-tag>
-<ecs-tag type="party" party="other">other</ecs-tag>
-<ecs-tag type="party" party="other" hover>hover</ecs-tag>
-<ecs-tag type="party" party="other" active>active</ecs-tag>
-<ecs-tag type="party" party="court">court</ecs-tag>
-<ecs-tag type="party" party="court" hover>hover</ecs-tag>
-<ecs-tag type="party" party="court" active>active</ecs-tag>
-```
-
-## Group Tag
-
-For the group tag style, set the `type` prop to `group`.
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Group Tag" height="120px">
-    {stories.groupTag()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-tag type="group">group</ecs-tag>
-<ecs-tag type="group" hover>hover</ecs-tag>
-<ecs-tag type="group" active>active</ecs-tag>
-```
-
-## Loading States
-
-Add the `loading` attribute to show a skeleton loader within the tag.
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Tags Loading" height="120px">
-    {stories.tagsLoading()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-tag type="regular" loading>issue</ecs-tag>
-<ecs-tag type="group" loading>hover</ecs-tag>
-<ecs-tag type="filter" loading>active</ecs-tag>
-```
-
-## Props, Slots and Events
-
-<ArgsTable of={EcsTag} />

package/src/stories/tag-cloud/tag-cloud.stories.mdx

@@ -1,29 +0,0 @@
-import { Meta, Story, ArgsTable, Canvas, Description } from '@storybook/addon-docs/blocks';
-import EcsTagCloud from '@components/tag-cloud/tag-cloud';
-import * as stories from './tag-cloud.stories.js';
-
-<Meta
-  title="Elements/Tag Cloud"
-  component={EcsTagCloud} />
-
-# Tag Cloud `EcsTagCloud`
-
-Tag cloud is a wrapper component for a list of EcsTag. It ensures correct spacing between tags and line breaks.
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Tag Cloud" height="80px">
-    {stories.tagCloud()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-tag-cloud>
-  <ecs-tag type="regular">fraud</ecs-tag>
-  <ecs-tag type="regular">document</ecs-tag>
-  <ecs-tag type="regular">tag</ecs-tag>
-</ecs-tag-cloud>
-```
-
-## Slots
-
-<ArgsTable of={EcsTagCloud} />

package/src/stories/toast/toast.stories.mdx

@@ -1,72 +0,0 @@
-import { Meta, Story, ArgsTable, Canvas, Description } from '@storybook/addon-docs/blocks';
-import EcsToast from '@components/toast/toast';
-import EcsToasts from '@components/toasts/toasts';
-import * as stories from './toast.stories.js';
-
-<Meta
-  title="Feedback/Toast"
-  component={EcsToast} />
-
-# Toasts `EcsToast`
-
-Toasts are lightweight notifications designed to mimic the push notifications that have been popularized by mobile and desktop operating systems.
-
-Toasts are intended to be small interruptions to your visitors or users, and therefore should contain minimal, to-the-point, non-interactive content.
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Toast" height="80px">
-    {stories.toast()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-toast message="This is a toast message." button="View" :key="1" />
-```
-
-## Message and Button
-
-Each toast should have a message passed via the `message` prop. Optionally, a single button can be added via the `button` prop.
-
-## Toast List
-
-Toasts must be wrapped by a toast list, to ensure they appear at the correct position and have correct spacing between them, in case multiple toast messages show up at the same time.
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Toast List" height="120px">
-    {stories.toastList()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-toasts>
-  <ecs-toast message="This is a toast message." :key="1" />
-  <ecs-toast message="This is another a toast message." button="View" :key="2" />
-</ecs-toasts>
-```
-
-## Themes
-
-There are three different themes for toasts available, which can be controlled via the `theme` attribute: neutral (default), error, and success.
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Toast Variants" height="120px">
-    {stories.toastVariants()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-toasts>
-  <ecs-toast theme="success" message="This is a toast message." button="View" :key="1" />
-  <ecs-toast theme="error" message="This is another a toast message." button="View" :key="2" />
-</ecs-toasts>
-```
-
-## Slots
-
-### Toast 
-
-<ArgsTable of={EcsToast} />
-
-### Toasts (Wrapper)
-
-<ArgsTable of={EcsToasts} />

package/src/stories/tree-list/tree-list.stories.mdx

@@ -1,81 +0,0 @@
-import { Meta, Story, ArgsTable, Canvas, Description } from '@storybook/addon-docs/blocks';
-import EcsTreeList from '@components/tree-list/tree-list'
-import * as stories from './tree-list.stories.js';
-
-<Meta
-  title="Content Structures/Tree List"
-  component={EcsTreeList} />
-
-# Tree List `EcsTreeList`
-
-Tree lists are a content structure that allows infinite nesting items, mostly used for file systems or Master File folder structures. It is a wrapper component, exclusively for EcsTreeListItem components.
-
-
-## Single level lists
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Tree List" height="120px">
-    {stories.treeList()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-tree-list>
-  <ecs-tree-list-item selectable>First Entry</ecs-tree-list-item>
-  <ecs-tree-list-item selectable>Second Entry</ecs-tree-list-item>
-  <ecs-tree-list-item selectable>Last Entry</ecs-tree-list-item>
-</ecs-tree-list>
-```
-
-## Sub lists
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Tree List Collapse" height="200px">
-    {stories.treeListCollapse()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-tree-list>
-  <ecs-tree-list-item selectable :collapse-button="buttonType">
-    First Level Item
-
-    <ecs-tree-list slot="collapse">
-      <ecs-tree-list-item selectable>Second Level Entry</ecs-tree-list-item>
-      <ecs-tree-list-item selectable>Last Second Level Entry</ecs-tree-list-item>
-    </ecs-tree-list>
-  </ecs-tree-list-item>
-</ecs-tree-list>
-```
-
-## Infinite nesting
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Tree List Infinite Nesting" height="200px">
-    {stories.treeListInfiniteNesting()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-tree-list>
-  <ecs-tree-list-item selectable :collapse-button="buttonType">
-    First Level Item
-
-    <ecs-tree-list slot="collapse">
-      <ecs-tree-list-item selectable :collapse-button="buttonType">
-        Second Level Entry
-
-        <ecs-tree-list slot="collapse">
-          <ecs-tree-list-item selectable>Third Level Entry</ecs-tree-list-item>
-          <ecs-tree-list-item selectable>Last Third Level Entry</ecs-tree-list-item>
-        </ecs-tree-list>
-      </ecs-tree-list-item>
-      <ecs-tree-list-item selectable>Last Second Level Entry</ecs-tree-list-item>
-    </ecs-tree-list>
-  </ecs-tree-list-item>
-</ecs-tree-list>
-```
-
-## Slots
-
-<ArgsTable of={EcsTreeList} />