@everchron/ec-shards 0.8.29 → 1.0.0

package/src/stories/modal/modal.stories.mdx

@@ -1,68 +0,0 @@
-import { Meta, Story, ArgsTable, Canvas, Description } from '@storybook/addon-docs/blocks';
-import EcsModal from '@components/modal/modal';
-import EcsModalHeader from '@components/modal-header/modal-header';
-import EcsModalFooter from '@components/modal-footer/modal-footer';
-import * as stories from './modal.stories.js';
-
-<Meta
-  title="Modals & Dialogs/Modal"
-  component={EcsModal} />
-
-# Modal `EcsModal`
-
-Modals are simple dialog windows that allow fully custom content. There are no styling constraints like for EcsDialog.
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Regular" height="800px">
-    {stories.regular()}
-  </Story>
-</Canvas>
-
-```js
-<button @click="showdialog = !showdialog">Open</button>
-<ecs-modal :show="showdialog">
-  <p>Modal Content Slot</p>
-</ecs-modal>
-```
-
-The modal type `drawer` is an alternative template that shows a full width modal sheet at the bottom of the screen.
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Drawer" height="800px">
-    {stories.drawer()}
-  </Story>
-</Canvas>
-
-## Modal Headers
-
-You can add a header to a modal by utilizing the `header` slot. Headers can be of `type`: none (default), `scroll` and `tabs`.
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Headers" height="800px">
-    {stories.headers()}
-  </Story>
-</Canvas>
-
-## Modal Footer
-
-You can add a footer to a modal by utilizing the `footer` slot.
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Footer" height="800px">
-    {stories.footer()}
-  </Story>
-</Canvas>
-
-## Props and Slots
-
-### Modal
-
-<ArgsTable of={EcsModal} />
-
-### Modal Header
-
-<ArgsTable of={EcsModalHeader} />
-
-### Modal Footer
-
-<ArgsTable of={EcsModalFooter} />

package/src/stories/multiselect-option/multiselect-option.stories.mdx

@@ -1,39 +0,0 @@
-import { Meta, Story, ArgsTable, Canvas, Description } from '@storybook/addon-docs/blocks';
-import EcsMultiselectOption from '@components/multiselect-option/multiselect-option';
-import * as stories from './multiselect-option.stories.js';
-
-<Meta
-  title="Forms/Multiselect/Option"
-  component={EcsMultiselectOption} />
-
-# Multiselect Option `EcsMultiselectOption`
-
-The multiselect option is the list entry that appears for search hits (direct hits, or group headlines) within the multislect dropdown.
-
-## Key Option
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Option Key" height="80px">
-    {stories.optionKey()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-multiselect-option type="key" icon="person">Amanda Clark</ecs-multiselect-option>
-```
-
-## Group Option
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Option Group" height="80px">
-    {stories.optionGroup()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-multiselect-option type="header">Profiles</ecs-multiselect-option>
-```
-
-## Props and Events
-
-<ArgsTable of={EcsMultiselectOption} />

package/src/stories/multiselect-search-token/multiselect-search-token.stories.mdx

@@ -1,41 +0,0 @@
-import { Meta, Story, ArgsTable, Canvas, Description } from '@storybook/addon-docs/blocks';
-import EcsMultiselectSearchToken from '@components/multiselect-search-token/multiselect-search-token';
-import * as stories from './multiselect-search-token.stories.js';
-
-<Meta
-  title="Forms/Multiselect/Search Token"
-  component={EcsMultiselectSearchToken} />
-
-# Multiselect Search Token `EcsMultiselectSearchToken`
-
-Multiselect search tokens should be used within the multiselect component, and exclusively for tag based search inputs.
-
-There are two variants available: `default` and `not`, which can be controlled via the `type` attribute.
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Search Token" height="80px">
-    {stories.searchToken()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-multiselect-search-token icon="person">Amanda Clark</ecs-multiselect-search-token>
-<ecs-multiselect-search-token type="not" icon="person">Profiles</ecs-multiselect-search-token>
-```
-
-The props `descriptor` and `oparator` can be added to display optional field and operator labels.
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Search Token Addons" height="80px">
-    {stories.searchTokenAddons()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-multiselect-search-token icon="person" operator="OR" descriptor="Name">Amanda Clark</ecs-multiselect-search-token>
-<ecs-multiselect-search-token type="not" icon="calendar" operator="OR" descriptor="Date added">04/05/2021</ecs-multiselect-search-token>
-```
-
-## Props and Events
-
-<ArgsTable of={EcsMultiselectSearchToken} />

package/src/stories/multiselect-token/multiselect-token.stories.mdx

@@ -1,25 +0,0 @@
-import { Meta, Story, ArgsTable, Canvas, Description } from '@storybook/addon-docs/blocks';
-import EcsMultiselectToken from '@components/multiselect-token/multiselect-token';
-import * as stories from './multiselect-token.stories.js';
-
-<Meta
-  title="Forms/Multiselect/Token"
-  component={EcsMultiselectToken} />
-
-# Multiselect Token `EcsMultiselectToken`
-
-Multiselect tokens should be used within the default multiselect component.
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Token" height="80px">
-    {stories.token()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-multiselect-token>Amanda Clark</ecs-multiselect-token>
-```
-
-## Props and Events
-
-<ArgsTable of={EcsMultiselectToken} />

package/src/stories/overlay/overlay.stories.mdx

@@ -1,79 +0,0 @@
-import { Meta, Story, ArgsTable, Canvas, Description } from '@storybook/addon-docs/blocks';
-import EcsOverlay from '@components/overlay/overlay';
-import * as stories from './overlay.stories.js';
-
-<Meta
-  title="Modals & Dialogs/Overlay"
-  component={EcsOverlay} />
-
-# Overlay `EcsOverlay`
-
-Modals are simple dialog windows that allow fully custom content. There are no styling constraints like for EcsDialog.
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Overlay" height="800px">
-    {stories.overlay()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-overlay :show="showOverlay" @close="showOverlay = false" icon="archive" header-title="Title" header-title-emphasized="Overlay:" header-title-subline="John G. Deposition (10/12/2020) – Pages 1 - 321">
-  
-  content area
-
-  <template slot="footer">footer area</template>
-</ecs-overlay>
-```
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Overlay Full Width" height="800px">
-    {stories.overlayFullWidth()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-overlay full-width :show="showOverlay" @close="showOverlay = false" icon="archive" header-title="Title" header-title-emphasized="Overlay:" header-title-subline="John G. Deposition (10/12/2020) – Pages 1 - 321">
-  
-  content area
-
-  <template slot="footer">footer area</template>
-</ecs-overlay>
-```
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Overlay Tabs" height="800px">
-    {stories.overlayTabs()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-overlay :show="showOverlay" @close="showOverlay = false" icon="archive" header-title="Title" header-title-emphasized="Overlay:" header-title-subline="John G. Deposition (10/12/2020) – Pages 1 - 321">
-  
-  content area
-
-  <template slot="tabs">tab area</template>
-  <template slot="footer">footer area</template>
-</ecs-overlay>
-```
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Overlay Full Width Tabs" height="800px">
-    {stories.overlayFullWidthTabs()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-overlay full-width :show="showOverlay" @close="showOverlay = false" icon="archive" header-title="Title" header-title-emphasized="Overlay:" header-title-subline="John G. Deposition (10/12/2020) – Pages 1 - 321">
-  
-  content area
-
-  <template slot="tabs">tab area</template>
-  <template slot="footer">footer area</template>
-</ecs-overlay>
-```
-
-## Props and Slots
-
-### Modal
-
-<ArgsTable of={EcsOverlay} />

package/src/stories/pagination/pagination.stories.mdx

@@ -1,68 +0,0 @@
-import { Meta, Story, ArgsTable, Canvas, Description } from '@storybook/addon-docs/blocks';
-import EcsPagination from '@components/pagination/pagination';
-import * as stories from './pagination.stories.js';
-
-<Meta
-  title="Navigation/Pagination"
-  component={EcsPagination} />
-
-# Pagination `EcsPagination`
-
-The pagination control is used to navigate through pages of main index pages (and should never be used for anything else).
-
-## Types
-
-### Floating
-
-Pagination can be floating when: the main content table is not embedded into a visually visible wrapping container (applies mostly to card based index views).
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Floating Pagination" height="120px">
-    {stories.floatingPagination()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-pagination floating :current-page="2" :total-pages="10" />
-```
-
-### Appended
-
-Appended pagination should be used when the table is wrapped by a container and the pagination should appear directly underneath the table.
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Appended Pagination" height="120px">
-    {stories.appendedPagination()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-pagination :current-page="2" :total-pages="10" />
-```
-
-## Tabs
-
-The pagination component can optionally contain tab buttons. These should only be used to toggle content of the main content area (index table).
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Tab Pagination" height="120px">
-    {stories.tabPagination()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-pagination :current-page="2" :total-pages="10">
-  <template slot="tabs">
-    <ecs-tab-bar type="sheet">
-      <ecs-tab-button show>Settings</ecs-tab-button>
-      <ecs-tab-button>Calendar</ecs-tab-button>
-      <ecs-tab-button>Versions</ecs-tab-button>
-    </ecs-tab-bar>
-  </template>
-</ecs-pagination>
-```
-
-
-## Props and Slots
-
-<ArgsTable of={EcsPagination} />

package/src/stories/party-entry/party-entry.stories.mdx

@@ -1,108 +0,0 @@
-import { Meta, Story, ArgsTable, Canvas, Description } from '@storybook/addon-docs/blocks';
-import EcsPartyEntry from '@components/party-entry/party-entry';
-import * as stories from './party-entry.stories.js';
-
-<Meta
-  title="Content Structures/Party Entry"
-  component={EcsPartyEntry} />
-
-# Party Entry `EcsPartyEntry`
-
-Party entries are simple labels in a specific color coding (by side) and a type icon. They are used to represent document structures by the producing party.
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Party Entry" height="80px">
-    {stories.partyEntry()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-party-entry icon="document" party="opposition">Document</ecs-party-entry>
-```
-
-## Icon
-
-The following entry types are available to be set via the `type` attribute: `document`, `sequence`, `folder`, and `pacer`. Additionally, you can use any custom icon from the general icon set, or leave the icon attribute blank.
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Party Entry Types" height="80px">
-    {stories.partyEntryTypes()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-party-entry icon="document" party="opposing">Document</ecs-party-entry>
-<ecs-party-entry icon="sequence" party="opposing">Sequence</ecs-party-entry>
-<ecs-party-entry icon="folder" party="opposing">Folder</ecs-party-entry>
-<ecs-party-entry icon="pacer" party="opposing">Pacer</ecs-party-entry>
-<ecs-party-entry icon="doctext" party="opposing">Custom Icon</ecs-party-entry>
-<ecs-party-entry party="opposing">No Icon</ecs-party-entry>
-```
-
-## Party Sides
-
-Use the `party` attribute to set the party side. The following sides are available:
-
-+ Client: `client`
-+ Opposition: `opposing`
-+ Joint: `joint`
-+ Other: `other`
-+ Court: `court`
-+ Unaffiliated: `unaffiliated`
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Party Entry Sides" height="80px">
-    {stories.partyEntrySides()}
-  </Story>
-</Canvas>
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Party Entry with Background" height="80px">
-    {stories.partyEntryWithBackground()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-party-entry icon="document" party="opposing">Opposition</ecs-party-entry>
-<ecs-party-entry icon="document" party="client">Client</ecs-party-entry>
-<ecs-party-entry icon="document" party="joint">Joint</ecs-party-entry>
-<ecs-party-entry icon="document" party="other">Other</ecs-party-entry>
-<ecs-party-entry icon="document" party="court">Court</ecs-party-entry>
-<ecs-party-entry icon="document" party="unaffiliated">Unaffiliated</ecs-party-entry>
-```
-
-## Annotations
-
-By not using the `party` prop, but `annotation-color` prop instead, you can show the entry tag with a defined annotation mark color. Note that the annotation colors must be a `Number` between `1` and `9` - mapping to the Everchron mark colors table.
-
-+ Yellow: `1`
-+ Orange: `2`
-+ Lime: `3`
-+ Cyan: `4`
-+ Blue: `5`
-+ Indigo: `6`
-+ Pink: `7`
-+ Brown: `8`
-+ Grey: `9`
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Party Entry Annotations" height="80px">
-    {stories.partyEntryAnnotations()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-party-entry background icon="marker" :annotation-color="1">Annotation</ecs-party-entry>
-<ecs-party-entry background icon="marker" :annotation-color="2">Annotation</ecs-party-entry>
-<ecs-party-entry background icon="marker" :annotation-color="3">Annotation</ecs-party-entry>
-<ecs-party-entry background icon="marker" :annotation-color="4">Annotation</ecs-party-entry>
-<ecs-party-entry background icon="marker" :annotation-color="5">Annotation</ecs-party-entry>
-<ecs-party-entry background icon="marker" :annotation-color="6">Annotation</ecs-party-entry>
-<ecs-party-entry background icon="marker" :annotation-color="7">Annotation</ecs-party-entry>
-<ecs-party-entry background icon="marker" :annotation-color="8">Annotation</ecs-party-entry>
-<ecs-party-entry background icon="marker" :annotation-color="9">Annotation</ecs-party-entry>
-```
-
-## Props and Slots
-
-<ArgsTable of={EcsPartyEntry} />

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

@@ -1,60 +0,0 @@
-import { Meta, Story, ArgsTable, Canvas, Description } from '@storybook/addon-docs/blocks';
-import EcsPopoverHeader from '@components/popover-header/popover-header';
-import * as stories from './popover-header.stories.js';
-
-<Meta
-  title="Popovers/Popover Header"
-  component={EcsPopoverHeader} />
-
-# Popover Header `EcsPopoverHeader`
-
-Popover headers are a header component that can be used within EcsPopover's. They can be plain text headlines, a headline with an icon, or contain additional controls such as buttons or inputs.
-
-## Headline 
-
-Use the `title` attribute to change the headline.
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Popover Header" height="80px">
-    {stories.popoverHeader()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-popover-header title="Headline"></ecs-popover-header>
-```
-
-## With Icon
-
-You can add any icon supported by the EcsIconHeadline component by adding the `icon` attribute and providing an icon name.
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Popover Header Icon" height="80px">
-    {stories.popoverHeaderIcon()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-popover-header title="Icon Title" icon="share"></ecs-popover-header>
-```
-
-## With Controls
-
-Custom content can be added via the default slot.
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Popover Header Controls" height="80px">
-    {stories.popoverHeaderControls()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-popover-header title="Headline">
-  <ecs-button type="secondary">Cancel</ecs-button>
-  <ecs-button icon="save">Done</ecs-button>
-</ecs-popover-header>
-```
-
-## Props and Slots
-
-<ArgsTable of={EcsPopoverHeader} />

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

@@ -1,43 +0,0 @@
-import { Meta, Story, ArgsTable, Canvas, Description } from '@storybook/addon-docs/blocks';
-import EcsPopoverList from '@components/popover-list/popover-list';
-import * as stories from './popover-list.stories.js';
-
-<Meta
-  title="Popovers/Popover List"
-  component={EcsPopoverList} />
-
-# Popover List `EcsPopoverList`
-
-EcsPopoverList is a wrapper component for EcsPopoverListItem's and should only be used within EcsPopover.
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Popover List" height="120px">
-    {stories.popoverList()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-popover-list>
-  <ecs-popover-list-item>Label</ecs-popover-list-item>
-  <ecs-popover-list-item>Label</ecs-popover-list-item>
-</ecs-popover-list>
-```
-
-To remove the list's padding, but add additional padding to the items, add the `inner` attribute.
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Popover List Inner" height="120px">
-    {stories.popoverListInner()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-popover-list inner>
-  <ecs-popover-list-item>Label</ecs-popover-list-item>
-  <ecs-popover-list-item>Label</ecs-popover-list-item>
-</ecs-popover-list>
-```
-
-## Slots
-
-<ArgsTable of={EcsPopoverList} />

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

@@ -1,41 +0,0 @@
-import { Meta, Story, ArgsTable, Canvas, Description } from '@storybook/addon-docs/blocks';
-import EcsPopoverListHeadline from '@components/popover-list-headline/popover-list-headline';
-import * as stories from './popover-list-headline.stories.js';
-
-<Meta
-  title="Popovers/Popover List Headline"
-  component={EcsPopoverListHeadline} />
-
-# Popover List Headline `EcsPopoverListHeadline`
-
-A simple headline to be used to describe groups within popover lists.
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Popover List Headline" height="120px">
-    {stories.popoverListHeadline()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-popover-list>
-  <ecs-popover-list-headline>Headline</ecs-popover-list-headline>
-</ecs-popover-list>
-```
-
-Also available as sticky header, that stays fixed within it's given list container.
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Popover List Sticky Headline" height="120px">
-    {stories.popoverListStickyHeadline()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-popover-list>
-  <ecs-popover-list-headline sticky> Sticky Headline</ecs-popover-list-headline>
-</ecs-popover-list>
-```
-
-## Slots
-
-<ArgsTable of={EcsPopoverListHeadline} />