@everchron/ec-shards 0.8.29 → 1.0.0

package/src/stories/button/button.stories.mdx

@@ -1,121 +0,0 @@
-import { Meta, Story, ArgsTable, Canvas, Description } from '@storybook/addon-docs/blocks';
-import EcsButton from '@components/button/button';
-import * as stories from './button.stories.js';
-
-<Meta
-  title="Buttons/Button"
-  component={EcsButton} />
-
-# Buttons `EcsButton`
-
-Use the ec-button component for actions in forms, dialogs, and more. Includes support for a handful of contextual variations, sizes, states, and more.
-
-## Types
-
-Use `type` prop to generate various buttons.
-
-Available types: `primary`, `secondary`, `danger`, `create`, `vibrant`.
-
-By default `<ecs-button>` component will render with `primary` type.
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Types" height="100px">
-    {stories.types()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-button>Primary</ecs-button>
-<ecs-button type="primary">Primary</ecs-button>
-<ecs-button type="secondary">Secondary</ecs-button>
-<ecs-button type="danger">Danger</ecs-button>
-<ecs-button type="create">Create</ecs-button>
-<ecs-button type="vibrant">vibrant</ecs-button>
-```
-
-## Sizing
-
-Fancy larger or smaller buttons? Specify `lg`, `sml`, or `xsml` via the `size` prop.
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Sizes" height="100px">
-    {stories.sizes()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-button size='sml' type="primary">Small</ecs-button>
-<ecs-button type="primary">Default</ecs-button>
-<ecs-button size='lg' type="primary">Large</ecs-button>
-```
-
-## With Icons
-
-You can easily use the `icon` prop to add an icon in your button.
-
-`icon` prop accept `String`. Just pass icon name as `icon` prop.
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="With Icon" height="100px">
-    {stories.withIcon()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-button icon="add-plus" type="create">Create</ecs-button>
-```
-
-## Icon only
-
-Stand alone icon buttons are possible by adding the `icon-only` attribute to the button. Keep in mind that the `icon` attribute with a defined icon type is mandatory for these buttons.
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Icon Only" height="100px">
-    {stories.iconOnly()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-button icon-only icon="add-plus" type="create"></ecs-button>
-```
-
-## Active
-
-Make your button active by adding the `active` attribute.
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Active" height="100px">
-    {stories.active()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-button active type="primary">Active Button</ecs-button>
-```
-
-## Loading
-
-Add the `loading` attribute when a loader should appear in your button.
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Loading" height="100px">
-    {stories.loading()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-button loading type="primary">Loading...</ecs-button>
-```
-
-## Full width
-
-Add the `full-width` attribute to get a block button. That's all you need.
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Full Width" height="100px">
-    {stories.fullWidth()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-button full-width type="create">Block button</ecs-button>
-```
-
-## Props, Slots and Events
-
-<ArgsTable of={EcsButton} />

package/src/stories/button-collapse/button-collapse.stories.mdx

@@ -1,53 +0,0 @@
-import { Meta, Story, ArgsTable, Canvas, Description } from '@storybook/addon-docs/blocks';
-import EcsButtonCollapse from '@components/button-collapse/button-collapse';
-import * as stories from './button-collapse.stories.js';
-
-<Meta
-  title="Buttons/Button Collapse"
-  component={EcsButtonCollapse} />
-
-# Collapse Button `EcsButtonCollapse`
-
-Collapse buttons are used for expandable and nested content structures, such as tree views or data cards. There are two different types available: `classic` and `chevron`, which can be set via the `types` attribute. Classic should be used for browing file systems and folder structures, while chevron should be used for data structures that only have a single level of nesting (for example tag sets).
-
-## Chevron
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Chevron" height="60px">
-    {stories.chevron()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-button-collapse type="chevron" />
-<ecs-button-collapse type="chevron" collapsed />
-<ecs-button-collapse type="chevron" loading />
-<ecs-button-collapse type="chevron" disabled />
-```
-
-## Classic
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Classic" height="60px">
-    {stories.classic()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-button-collapse />
-<ecs-button-collapse collapsed />
-<ecs-button-collapse loading />
-<ecs-button-collapse disabled />
-```
-
-## States
-
-Collapse buttons can have different states, which can be applied by setting the following attributes:
-
-+ `loading`
-+ `disabled`
-+ `collapsed`
-
-## Props and Events
-
-<ArgsTable of={EcsButtonCollapse} />

package/src/stories/button-context/button-context.stories.mdx

@@ -1,77 +0,0 @@
-import { Meta, Story, ArgsTable, Canvas, Description } from '@storybook/addon-docs/blocks';
-import EcsButtonContext from '@components/button-context/button-context';
-import * as stories from './button-context.stories.js';
-
-<Meta
-  title="Buttons/Button Context"
-  component={EcsButtonContext} />
-
-# Context Buttons `EcsButtonContext`
-
-Special button type that is used for providing options on (text) selections, primarly used in document and transcript annotations. Context buttons must be wrapped by the `<ecs-button-context-group>` component, even if they are stand alone single buttons.
-
-## Single
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Single" height="100px">
-    {stories.single()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-button-context-group>
-  <ecs-button-context @click="action">Primary</ecs-button-context>
-</ecs-button-context-group>
-```
-
-## Groups
-
-Multiple context buttons appear as a group when they are wrapped by `<ecs-button-context-group>`.
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Grouped" height="100px">
-    {stories.grouped()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-button-context-group>
-  <ecs-button-context @click="action">Copy</ecs-button-context>
-  <ecs-button-context @click="action">Paste</ecs-button-context>
-  <ecs-button-context @click="action">Annotate</ecs-button-context>
-</ecs-button-context-group>
-```
-
-## With Icon
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="With Icon" height="100px">
-    {stories.withIcon()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-button-context-group>
-  <ecs-button-context @click="action" icon="edit">Edit</ecs-button-context>
-</ecs-button-context-group>
-```
-
-## With Color Selection
-
-Context buttons can be used to set a specific text or annotation color on the selection. Pass any color value (HEX, RGBA) with the `selected-color` attribute.
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="With Color Selection" height="100px">
-    {stories.withColorSelection()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-button-context-group>
-  <ecs-button-context @click="action" selected-color="#F9DF00">Yellow</ecs-button-context>
-</ecs-button-context-group>
-```
-
-## Props, Slots and Events
-
-<ArgsTable of={EcsButtonContext} />

package/src/stories/button-dialog/button-dialog.stories.mdx

@@ -1,46 +0,0 @@
-import { Meta, Story, ArgsTable, Canvas, Description } from '@storybook/addon-docs/blocks';
-import EcsButtonDialog from '@components/button-dialog/button-dialog';
-import * as stories from './button-dialog.stories.js';
-
-<Meta
-  title="Buttons/Button Dialog"
-  component={EcsButtonDialog} />
-
-# Dialog Button `EcsButtonDialog`
-
-Dialog buttons are a special type of button, that can be used within a dialog footer (and nowhere else).
-
-## Types
-
-There are three different button types available: Regular (default), `confirm` for primary close or confirm actions and `danger` for destructive actions. The type can be controlled by setting the `type` attribute.
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Types" height="175px">
-    {stories.types()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-button-dialog>Cancel</ecs-button-dialog>
-<ecs-button-dialog type="confirm">Confirm</ecs-button-dialog>
-<ecs-button-dialog type="danger">Destroy</ecs-button-dialog>
-```
-
-## With Icon
-
-You can add an icon to the button, by providing a valid icon name via the `icon` attribute.
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="With Icon" height="125px">
-    {stories.withIcon()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-button-dialog type="confirm" icon="download">Download</ecs-button-dialog>
-<ecs-button-dialog type="danger" icon="delete">Delete</ecs-button-dialog>
-```
-
-## Props, Slots and Events
-
-<ArgsTable of={EcsButtonDialog} />

package/src/stories/button-more/button-more.stories.mdx

@@ -1,61 +0,0 @@
-import { Meta, Story, ArgsTable, Canvas, Description } from '@storybook/addon-docs/blocks';
-import EcsButtonMore from '@components/button-more/button-more';
-import * as stories from './button-more.stories.js';
-
-<Meta
-  title="Buttons/Button More"
-  component={EcsButtonMore} />
-
-# More Button `EcsButtonMore`
-
-More buttons are a special type of button, that can be used for dropdown-like actions, or to expand additional content that is currently hidden. There are 3 different types available to be used via the `type` attribute: `dropdown` (default), `ellipsis`, and `expand`.
-
-## Dropdown
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Dropdown" height="50px">
-    {stories.dropdown()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-button-more></ecs-button-more>
-<ecs-button-more active></ecs-button-more>
-<ecs-button-more disabled></ecs-button-more>
-```
-
-## Ellipse
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Ellipse" height="50px">
-    {stories.ellipse()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-button-more type="ellipsis"></ecs-button-more>
-<ecs-button-more type="ellipsis" active></ecs-button-more>
-<ecs-button-more type="ellipsis" disabled></ecs-button-more>
-```
-
-## Expand
-
-Expand buttons do not have a diabled state, as they should not be disabled but become a toggle button when there is no more content to load. Expand buttons can, but do not have to contain a descriptive label.
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Expand" height="50px">
-    {stories.expand()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-button-more type="expand"></ecs-button-more>
-<ecs-button-more type="expand" active></ecs-button-more>
-<ecs-button-more type="expand">Show More</ecs-button-more>
-<ecs-button-more type="expand" active>Show Less</ecs-button-more>
-```
-
-
-## Props, Slots and Events
-
-<ArgsTable of={EcsButtonMore} />

package/src/stories/button-table/button-table.stories.mdx

@@ -1,56 +0,0 @@
-import { Meta, Story, ArgsTable, Canvas, Description } from '@storybook/addon-docs/blocks';
-import EcsButtonTable from '@components/button-table/button-table';
-import * as stories from './button-table.stories.js';
-
-<Meta
-  title="Buttons/Button Table"
-  component={EcsButtonTable} />
-
-# Table Button `EcsButtonTable`
-
-Table buttons are used within tables and data cards.
-
-## With Label
-
-Add text (usually a count) by using the `label` attribute. An icon should always be added, by using the `icon` attribute.
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="text" height="60px">
-    {stories.text()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-button-table size="md" icon="parties" label="5" />
-<ecs-button-table size="sml" icon="parties" label="5" />
-<ecs-button-table size="md" chevron pale icon="parties" label="5" />
-<ecs-button-table size="sml" chevron pale icon="parties" label="5" active />
-```
-
-## Icon Only
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="iconOnly" height="60px">
-    {stories.iconOnly()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-button-table icon="expand" active />
-```
-
-## Subtle Variant
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="subtle" height="60px">
-    {stories.subtle()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-button-table icon="person" subtle label="5" />
-```
-
-## Props and Events
-
-<ArgsTable of={EcsButtonTable} />

package/src/stories/button-toolbar/button-toolbar.stories.mdx

@@ -1,86 +0,0 @@
-import { Meta, Story, ArgsTable, Canvas, Description } from '@storybook/addon-docs/blocks';
-import EcsButtonToolbar from '@components/button-toolbar/button-toolbar';
-import EcsButtonToolbarGroup from '@components/button-toolbar-group/button-toolbar-group';
-import * as stories from './button-toolbar.stories.js';
-
-<Meta
-  title="Buttons/Button Toolbar"
-  component={EcsButtonToolbar, EcsButtonToolbarGroup} />
-
-# Toolbar Button `EcsButtonToolbar`
-
-Toolbar buttons are a special type of button, that should be used for buttons of toolbars and action bars.
-
-## Regular
-
-The default toolbar button has an icon and no label.
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Regular" height="50px">
-    {stories.regular()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-button-toolbar icon="marker"></ecs-button-toolbar>
-```
-
-## With Text
-
-You can set the icon position to the right side by using the `icon-position="right"` attribute.
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Regular Text" height="50px">
-    {stories.regularText()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-button-toolbar icon="marker">Annotations</ecs-button-toolbar>
-```
-
-## Dropdown Button
-
-Toolbar buttons can act as dropdown buttons to reveal additional information, such as a popover. To use the dropdown functionality, add the `dropdown` attribute and make sure to use the default slot for the selected information.
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Dropdown" height="50px">
-    {stories.dropdown()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-button-toolbar dropdown>
-  <span class="description">Show: </span>
-  <span>All</span>
-</ecs-button-toolbar>
-```
-
-## Grouped
-
-Toolbar buttons can be grouped by wrapping them with the EcsToolbarButtonGroup component.
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Group" height="50px">
-    {stories.group()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-button-toolbar-group>
-  <ecs-button-toolbar icon="marker" active />
-  <ecs-button-toolbar icon="rectangle" />
-  <ecs-button-toolbar icon="rectangle" active-highlight />
-  <ecs-button-toolbar icon="delete" badge />
-</ecs-button-toolbar-group>
-```
-
-## Props, Slots and Events
-
-### EcsButtonToolbar
-
-<ArgsTable of={EcsButtonToolbar} />
-
-### EcsToolbarButtonGroup
-
-<ArgsTable of={EcsButtonToolbarGroup} />

package/src/stories/button-toolbar-icon/button-toolbar-icon.stories.mdx

@@ -1,53 +0,0 @@
-import { Meta, Story, ArgsTable, Canvas, Description } from '@storybook/addon-docs/blocks';
-import EcsButtonToolbarIcon from '@components/button-toolbar-icon/button-toolbar-icon';
-import * as stories from './button-toolbar-icon.stories.js';
-
-<Meta
-  title="Buttons/Button Toolbar Icon"
-  component={EcsButtonToolbarIcon} />
-
-# Toolbar Icon Button `EcsButtonToolbarIcon`
-
-Toolbar icon buttons are a special type of button, that should be used exclusively for main actions within the EcsToolbar component. The available icon types that can be set with the `icon` attribute can be found [here](https://github.com/everchron/ec-shards/tree/master/src/assets/icons) (only use icons that have a toolbar- prefix).
-
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Regular" height="50px">
-    {stories.regular()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-button-toolbar-icon icon="toolbar-sort" />
-<ecs-button-toolbar-icon active icon="toolbar-sort" />
-<ecs-button-toolbar-icon loading icon="toolbar-sort" />
-<ecs-button-toolbar-icon disabled icon="toolbar-sort" />
-<ecs-button-toolbar-icon icon="toolbar-cards" has-badge />
-```
-
-## States
-
-Toolbar icon buttons can have different states, which can be applied by setting the following attributes:
-
-+ `loading`
-+ `disabled`
-+ `active`
-+ `has-badge`
-
-## Sub Icon
-
-A sub icon can be shown in the bottom left edge, which can communicate additional activity state changes.
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Sub Icon" height="50px">
-    {stories.subIcon()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-button-toolbar-icon icon="refresh" sub-icon="mail" />
-```
-
-## Props, Slots and Events
-
-<ArgsTable of={EcsButtonToolbarIcon} />

package/src/stories/card/card.stories.mdx

@@ -1,42 +0,0 @@
-import { Meta, Story, ArgsTable, Canvas, Description } from '@storybook/addon-docs/blocks';
-import EcsCard from '@components/card/card';
-import * as stories from './card.stories.js';
-
-<Meta
-  title="Content Structures/Card"
-  component={EcsCard} />
-
-# Card `EcsCard`
-
-A simple card that contains content of some sort. Cards support various states via boolean props:
-
-- `selected` (only use in combination with a checkbox/radiobutton selection)
-- `hover` indicates the card can be clicked
-- `expanded` for cards that contain expandable content
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Cards" height="200px">
-    {stories.cards()}
-  </Story>
-</Canvas>
-
-Add the `progress` attribute (Number) to display a progress bar in the card background.
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Card Progress" height="80px">
-    {stories.cardProgress()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-card class="mb-4"><div class="p-4">Regular Card</div></ecs-card>
-<ecs-card class="mb-4" hover><div class="p-4">Clickable Card</div></ecs-card>
-<ecs-card class="mb-4" selected><div class="p-4">Selected Card</div></ecs-card>
-<ecs-card class="mb-4" expanded><div class="p-4">Expanded Card</div></ecs-card>
-<ecs-card class="mb-4" hover :progress="34"><div class="p-4">Expanded Card</div></ecs-card>
-```
-
-
-## Props and Slots
-
-<ArgsTable of={EcsCard} />

package/src/stories/checkbox/checkbox.stories.mdx

@@ -1,70 +0,0 @@
-import { Meta, Story, ArgsTable, Canvas, Description } from '@storybook/addon-docs/blocks';
-import EcsCheckbox from '@components/checkbox/checkbox';
-import * as stories from './checkbox.stories.js';
-
-<Meta
-  title="Forms/Checkbox"
-  component={EcsCheckbox} />
-
-# Checkbox `EcsCheckbox`
-
-Checkboxes are used for selecting multiple values from several options.
-
-If you use only one checkbox, it is the same as using EcsSwitch to toggle between two states. Checkboxes do support a third state for indeterminate selection (x of n selected, but not all or none).
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Checkbox" height="200px">
-    {stories.checkbox()}
-  </Story>
-</Canvas>
-
-```js
-<script>
-data() {
-  return {
-    first: false,
-    second: true,
-    third: true,
-  }
-}
-</script>
-
-<template>
-  <ecs-checkbox v-model="first" name="name">Label</ecs-checkbox>
-  <ecs-checkbox v-model="second" name="name">Checked</ecs-checkbox>
-  <ecs-checkbox v-model="third" name="name" disabled>Disabled</ecs-checkbox>
-</template>
-```
-
-## Inline
-
-If more than one checkbox should be placed within one row, use the `inline` attribute to avoid the block style.
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Checkbox Inline" height="50px">
-    {stories.checkboxInline()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-checkbox v-model="first" inline name="apple">Apple</ecs-checkbox>
-<ecs-checkbox v-model="second" inline name="orange">Orange</ecs-checkbox>
-```
-
-## Indeterminate State
-
-Set the checkbox state to indeterminate by using the `indeterminate` prop. Note that this is only a visual state change.
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Checkbox Indeterminate" height="50px">
-    {stories.checkboxIndeterminate()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-checkbox indeterminate inline name="apple">Apples</ecs-checkbox>
-```
-
-## Props, Slots and Events
-
-<ArgsTable of={EcsCheckbox} />