@everchron/ec-shards 0.8.30 → 1.0.1

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

@@ -1,121 +0,0 @@
-import { Meta, Story, ArgsTable, Canvas, Description } from '@storybook/addon-docs/blocks';
-import EcsPopoverListItem from '@components/popover-list-item/popover-list-item';
-import * as stories from './popover-list-item.stories.js';
-
-<Meta
-  title="Popovers/Popover List Item"
-  component={EcsPopoverListItem} />
-
-# Popover List Item `EcsPopoverListItem`
-
-EcsPopoverList is a wrapper component for EcsPopoverListItem's and should only be used within EcsPopover.
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Popover List Item" height="120px">
-    {stories.popoverListItem()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-popover-list>
-  <ecs-popover-list-item>List Item</ecs-popover-list-item>
-</ecs-popover-list>
-```
-
-## Help Text
-
-A second line of text can be added to the popover list item by adding the `help` attribute and providing the help text.
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Popover List Item Help Text" height="120px">
-    {stories.popoverListItemHelpText()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-popover-list>
-  <ecs-popover-list-item help="Helper Text">List Item</ecs-popover-list-item>
-</ecs-popover-list>
-```
-
-## Suffix Text
-
-A short suffix text can be added to the popover list item by adding the `suffix` attribute and providing the suffix text.
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Popover List Item Suffix Text" height="120px">
-    {stories.popoverListItemSuffixText()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-popover-list>
-  <ecs-popover-list-item suffix="XLS">List Item</ecs-popover-list-item>
-</ecs-popover-list>
-```
-
-## Icons
-
-An icon can be added to the popover list item by adding the `icon` attribute and providing a valid icon type. Additionally, you can set the icon color theme to a toned down gray by adding the `subtle` attribute, or red on hover by adding the `danger` attribute.
-
-If the icon that should be used is an `EcsFileIcon`, use the attribute `file-icon` instead of icon.
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Popover List Item Icon" height="200px">
-    {stories.popoverListItemIcon()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-popover-list>
-  <ecs-popover-list-item file-icon="pdf">List Item Default</ecs-popover-list-item>
-  <ecs-popover-list-item icon="share" subtle>List Item Subtle</ecs-popover-list-item>
-  <ecs-popover-list-item icon="delete" danger>List Item Danger</ecs-popover-list-item>
-</ecs-popover-list>
-```
-
-## Colors
-
-A picked color can be indicated by setting the `type` attribute to `color`. The additional `color` attributes need to be set to any valid color value (HEX, RGB, HSL).
-
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Popover List Item Color" height="200px">
-    {stories.popoverListItemColor()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-popover-list>
-  <ecs-popover-list-item type="color" color="yellow">Yellow</ecs-popover-list-item>
-  <ecs-popover-list-item type="color" color="green">Green</ecs-popover-list-item>
-</ecs-popover-list>
-```
-
-## Controls
-
-Popover list items can contain a single form control. Adding the `type` attribute and assigning one of the following values, will transform the list item from a button into that control:
-
-+ `checkbox`
-+ `radiobutton`
-+ `switch`
-+ `sort`
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Popover List Item Controls" height="200px">
-    {stories.popoverListItemControls()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-popover-list>
-  <ecs-popover-list-item type="checkbox">List Item Checkbox</ecs-popover-list-item>
-  <ecs-popover-list-item type="radiobutton">List Item Radio</ecs-popover-list-item>
-  <ecs-popover-list-item type="sort">List Item Sort</ecs-popover-list-item>
-  <ecs-popover-list-item type="switch">List Item Switch</ecs-popover-list-item>
-</ecs-popover-list>
-```
-
-## Props, Slots and Events
-
-<ArgsTable of={EcsPopoverListItem} />

package/src/stories/progress/progress.stories.mdx

@@ -1,71 +0,0 @@
-import { Meta, Story, ArgsTable, Canvas, Description } from '@storybook/addon-docs/blocks';
-import EcsProgress from '@components/progress/progress';
-import * as stories from './progress.stories.js';
-
-<Meta
-  title="Feedback/Progress"
-  component={EcsProgress} />
-
-# Progress Bar `EcsProgress`
-
-Use the progress bar component to communicate progress of running processes.
-
-## Value
-
-Set the maximum value with the `max` prop (default is 100), and the current value via the `value prop (default 0).
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Progress" height="80px">
-    {stories.progress()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-progress value="34" />
-```
-
-## Running Indicator
-
-For processes that are currently ongoing (not paused, cancelled or finished), add the `running` attribute to add a small pulse animation to the progress bar.
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Progress Running" height="80px">
-    {stories.progressRunning()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-progress running value="34" />
-```
-
-## Cancelled State
-
-For cancelled processed, add the `cancelled` attribute.
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Progress Cancelled" height="80px">
-    {stories.progressCancelled()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-progress cancelled :value="34" />
-```
-
-## Infinite
-
-For processes where we can't show the exact progress, or make a good estimation, add the `infinite` attribute to show an ever ongoing progress bar. A value or max value is not required.
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Progress Infinite" height="80px">
-    {stories.progressInfinite()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-progress infinite />
-```
-
-## Props
-
-<ArgsTable of={EcsProgress} />

package/src/stories/quicklink/quicklink.stories.mdx

@@ -1,101 +0,0 @@
-import { Meta, Story, ArgsTable, Canvas, Description } from '@storybook/addon-docs/blocks';
-import EcsQuicklink from '@components/quicklink/quicklink';
-import * as stories from './quicklink.stories.js';
-
-<Meta
-  title="Sidebar/Quicklink"
-  component={EcsQuicklink} />
-
-# Quicklinks `EcsQuicklink`
-
-Used exclusively in EcsSidebar component, to apply a specific filter on the current view.
-
-## Label & Counts
-
-Set the label of the quicklink via the `label` prop. Showing a count (total amount of matching items) is possible by setting the `count` prop.
-
-## Active State
-
-For filters that are currently activated, set the `active` prop to indicate the active state. 
-
-## Types
-
-The following quicklink types are available to be set via the `type` prop:
-
-+ `icon`
-+ `checkbox`
-+ `rating`
-+ `favorability`
-+ `switch`
-
-### Quicklink Icon
-
-For boolean icon quicklinks, provide a valid icon name via the `icon` prop.
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Quicklink Icon" height="80px">
-    {stories.quicklinkIcon()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-quicklink type="icon" label="Filter" icon="calendar" count="12" />
-```
-
-### Quicklink Checkbox
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Quicklink Checkbox" height="80px">
-    {stories.quicklinkCheckbox()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-quicklink type="checkbox" label="Filter" count="12" />
-```
-
-### Quicklink Star Rating
-
-Set the `rating` prop to a value of 0 ... 4 (number of blue stars). A label is not required.
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Quicklink Rating" height="80px">
-    {stories.quicklinkRating()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-quicklink type="rating" :rating="1" label="Filter" :count="12" />
-```
-
-### Quicklink Favorability Rating
-
-To set the favorability type, set the `rating` prop to `good`, `mixed`, `bad`, or `unrated`.
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Quicklink Favorability" height="80px">
-    {stories.quicklinkFavorability()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-quicklink type="favorability" rating="good" label="Good for Us" :count="12" />
-```
-
-### Quicklink Three Way Switch
-
-Three way switch quicklinks can be used to filter for HAS value, or HAS NOT value.
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Quicklink Three Way Switch" height="80px">
-    {stories.quicklinkThreeWaySwitch()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-quicklink type="switch" label="Filter" :count="12" />
-```
-
-## Props and Events
-
-<ArgsTable of={EcsQuicklink} />

package/src/stories/radiobutton/radiobutton.stories.mdx

@@ -1,42 +0,0 @@
-import { Meta, Story, ArgsTable, Canvas, Description } from '@storybook/addon-docs/blocks';
-import EcsRadiobutton from '@components/radiobutton/radiobutton';
-import * as stories from './radiobutton.stories.js';
-
-<Meta
-  title="Forms/Radiobutton"
-  component={EcsRadiobutton} />
-
-# Radiobutton `EcsRadiobutton`
-
-Radiobuttons are used for selecting a single value from several options.
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Radiobutton" height="200px">
-    {stories.radiobutton()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-radiobutton name="fruits" v-model="selected" value="orange">Label</ecs-radiobutton>
-<ecs-radiobutton name="fruits" v-model="selected" value="apple" checked>Checked</ecs-radiobutton>
-<ecs-radiobutton name="fruits" v-model="selected" value="grape" disabled>Disabled</ecs-radiobutton>
-```
-
-## Inline
-
-If more than one radiobutton should be placed within one row, use the `inline` attribute to avoid the block style.
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Radiobutton Inline" height="50px">
-    {stories.radiobuttonInline()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-radiobutton inline name="fruity" v-model="selected" value="apples">Apples</ecs-radiobutton>
-<ecs-radiobutton inline name="fruity" v-model="selected" value="oranges">Oranges</ecs-radiobutton>
-```
-
-## Props, Slots and Events
-
-<ArgsTable of={EcsRadiobutton} />

package/src/stories/rating-favorability/rating-favorability.stories.mdx

@@ -1,78 +0,0 @@
-import { Meta, Story, ArgsTable, Canvas, Description } from '@storybook/addon-docs/blocks';
-import EcsRatingFavorability from '@components/rating-favorability/rating-favorability';
-import * as stories from './rating-favorability.stories.js';
-
-<Meta
-  title="Forms/Rating Favorability"
-  component={EcsRatingFavorability} />
-
-# Rating Favorability `EcsRatingFavorability`
-
-Rating component to rate documents and entries by favorability.
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Favorability" height="80px">
-    {stories.favorability()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-rating-favorability rating="good" />
-<ecs-rating-favorability rating="mixed" />
-<ecs-rating-favorability rating="bad" />
-<ecs-rating-favorability rating="unrated" />
-```
-
-## Labels
-
-Add a label to show the favorability name by adding the `label` prop.
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Favorability Label" height="80px">
-    {stories.favorabilityLabel()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-rating-favorability label rating="good" />
-<ecs-rating-favorability label rating="mixed" />
-<ecs-rating-favorability label rating="bad" />
-<ecs-rating-favorability label rating="unrated" />
-```
-
-## Type
-
-There are several visual variants of favorability ratings available. Set the `type` prop to one of the following values: `null`, `active`, `subtle`.
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Favorability Types" height="80px">
-    {stories.favorabilityTypes()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-rating-favorability rating="good" />
-<ecs-rating-favorability type="active" rating="good" />
-<ecs-rating-favorability type="subtle" rating="good" />
-```
-
-## Loading
-
-Add the `loading` attribute to display a skeleton loader for the favorability component.
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Favorability Loading" height="80px">
-    {stories.favorabilityLoading()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-rating-favorability label loading rating="good" />
-<ecs-rating-favorability label loading rating="mixed" />
-<ecs-rating-favorability label loading rating="bad" />
-<ecs-rating-favorability label loading rating="unrated" />
-```
-
-## Props
-
-<ArgsTable of={EcsRatingFavorability} />

package/src/stories/rating-star-read/rating-star-read.stories.mdx

@@ -1,53 +0,0 @@
-import { Meta, Story, ArgsTable, Canvas, Description } from '@storybook/addon-docs/blocks';
-import EcsRatingStarRead from '@components/rating-star-read/rating-star-read';
-import * as stories from './rating-star-read.stories.js';
-
-<Meta
-  title="Elements/Rating Star Read"
-  component={EcsRatingStarRead} />
-
-# Star Rating Read `EcsRatingStarRead`
-
-Read only component to show the star rating of documents and entries. Set the amount of current and maximum stars with the `rating` and `maximum` props.
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Star Rating Read" height="80px">
-    {stories.starRatingRead()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-rating-star-read :rating="2" />
-```
-
-## Small Variant
-
-Set the `size` attribute to `sml` to reduce the size of the rating component.
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Star Rating Read Small" height="80px">
-    {stories.starRatingReadSmall()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-rating-star-read size="sml" :rating="2" />
-```
-
-## Loading
-
-Set the `loading` attribute to display a skeleton loader.
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Star Rating Read Loading" height="80px">
-    {stories.starRatingReadLoading()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-rating-star-read size="sml" :rating="2" />
-```
-
-## Props
-
-<ArgsTable of={EcsRatingStarRead} />

package/src/stories/rating-star-write/rating-star-write.stories.mdx

@@ -1,53 +0,0 @@
-import { Meta, Story, ArgsTable, Canvas, Description } from '@storybook/addon-docs/blocks';
-import EcsRatingStarWrite from '@components/rating-star-write/rating-star-write';
-import * as stories from './rating-star-write.stories.js';
-
-<Meta
-  title="Forms/Rating Star"
-  component={EcsRatingStarWrite} />
-
-# Star Rating Write `EcsRatingStarWrite`
-
-Rating component that allows the user to set the rating of documents and entries. Set the amount of current and maximum stars with the `rating` and `maximum` props.
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Regular" height="80px">
-    {stories.regular()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-rating-star-write />
-```
-
-## Unrated Option
-
-To add an option to set the rating back to unrated, add the `unrated` attribute.
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Unrated" height="80px">
-    {stories.unrated()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-rating-star-write unrated />
-```
-
-## Large
-
-To show a larger variant of the rating component, add the `large` attribute.
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Large" height="80px">
-    {stories.large()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-rating-star-write large />
-```
-
-## Props
-
-<ArgsTable of={EcsRatingStarWrite} />

package/src/stories/scroll-container/scroll-container.stories.mdx

@@ -1,25 +0,0 @@
-import { Meta, Story, ArgsTable, Canvas, Description } from '@storybook/addon-docs/blocks';
-import EcsScrollContainer from '@components/scroll-container/scroll-container';
-import * as stories from './scroll-container.stories.js';
-
-<Meta
-  title="Elements/Scroll Container"
-  component={EcsScrollContainer} />
-
-# Scroll Container `EcsScrollContainer`
-
-A scroll container is a wrapper element that should be used for areas that should be scrollable with a limited height.
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Scroll Container" height="500px">
-    {stories.scrollContainer()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-scroll-container><div style="height:640px">content</div></ecs-scroll-container>
-```
-
-## Props and Slots
-
-<ArgsTable of={EcsScrollContainer} />

package/src/stories/section/section.stories.mdx

@@ -1,97 +0,0 @@
-import { Meta, Story, ArgsTable, Canvas, Description } from '@storybook/addon-docs/blocks';
-import EcsSection from '@components/section/section';
-import * as stories from './section.stories.js';
-
-<Meta
-  title="Content Structures/Section"
-  component={EcsSection} />
-
-# Section `EcsSection`
-
-Sections are simple content blocks used for grouping related content or forms.
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Section" height="120px">
-    {stories.section()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-section title="Headline" border-top border-bottom>Content</ecs-section>
-```
-
-## 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. 
-
-By not passing any headline, the section component will render without a headline.
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="noHeadline" height="200px">
-    {stories.noHeadline()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-section>Content</ecs-collapse>
-```
-
-## 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 section is rendered without any borders.
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Borderless" height="200px">
-    {stories.borderless()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-section title="Headline">Content</ecs-collapse>
-```
-
-## Indentation
-
-For usage within other containers, such as sidebar, you might want to add some padding to the section 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-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>
-```
-
-## Controls
-
-To show additional controls on the right side of the headline, you can use the `controls` slot.
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Controls" height="200px">
-    {stories.controls()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-section indent border-bottom border-top title="Headline">
-  Content
-  
-  <template v-slot:controls>
-    <ecs-button>Button</ecs-button>
-  </template>
-</ecs-collapse>
-```
-
-## Props and Slots
-
-<ArgsTable of={EcsSection} />