@everchron/ec-shards 0.8.31 → 1.0.2

package/src/stories/layout-data-table/layout-data-table.stories.mdx

@@ -1,36 +0,0 @@
-import { Meta, Story, ArgsTable, Canvas, Description } from '@storybook/addon-docs/blocks';
-import EcsLayoutDataTable from '@components/layout-data-table/layout-data-table';
-import * as stories from './layout-data-table.stories.js';
-
-<Meta
-  title="Layouts/Data Table"
-  component={EcsLayoutDataTable} />
-
-# Data Table `EcsLayoutDataTable`
-
-The data table layout is commonly used in App Settings pages. It always features a larger content area (which is most of the time filled by a full width data table component) and an optional sidebar that can expand or collapse.
-
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Data Table" height="900px">
-    {stories.dataTable()}
-  </Story>
-</Canvas>
-
-
-```js
-<ecs-layout-data-table sidebar-expanded>
-  <template slot="toolbar">toolbar</template>
-  <template slot="actionbar">actionbar</template>
-
-  table
-
-  <template slot="sidebarheader">sidebarheader</template>
-  <template slot="sidebarcontent">sidebar</template>
-</ecs-layout-data-table>
-```
-
-
-## Props and Slots
-
-<ArgsTable of={EcsLayoutDataTable} />

package/src/stories/layout-directory/layout-directory.stories.mdx

@@ -1,50 +0,0 @@
-import { Meta, Story, ArgsTable, Canvas, Description } from '@storybook/addon-docs/blocks';
-import EcsLayoutDirectory from '@components/layout-directory/layout-directory';
-import * as stories from './layout-directory.stories.js';
-
-<Meta
-  title="Layouts/Directory"
-  component={EcsLayoutDirectory} />
-
-# Directory Layout `EcsLayoutDirectory`
-
-Directory layout are used for pages where you do a pre-selection of an item in a sidebar, and the details of that item are shown in the right content area. Consists of a large scrollable content area, and the following optional components:
-
-- toolbar
-- action toolbar
-- left sidebar (the directory)
-- right sidebar (filters)
-
-The `overlay-sidebar` attribute sets the sidebar container to be fixed and overlaying other content when expanded (this is used for content areas that need a lot of space, like large tables).
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Directory" height="900px">
-    {stories.directory()}
-  </Story>
-</Canvas>
-
-
-```js
-<ecs-layout-directory>
-  <template slot="toolbar">
-    <div>toolbar</div>
-  </template>
-  <template slot="action-toolbar">
-    <div>action-toolbar</div>
-  </template>
-  <template slot="directory">
-    <div>directory</div>
-  </template>
-
-  <div>content slot</div>
-
-  <template slot="sidebar">
-    <div>sidebar</div>
-  </template>
-</ecs-layout-directory>
-```
-
-
-## Props and Slots
-
-<ArgsTable of={EcsLayoutDirectory} />

package/src/stories/layout-index/layout-index.stories.mdx

@@ -1,50 +0,0 @@
-import { Meta, Story, ArgsTable, Canvas, Description } from '@storybook/addon-docs/blocks';
-import EcsLayoutIndex from '@components/layout-index/layout-index';
-import * as stories from './layout-index.stories.js';
-
-<Meta
-  title="Layouts/Index"
-  component={EcsLayoutIndex} />
-
-# Index Layout `EcsLayoutIndex`
-
-The most common layout to be used within the Everchron app. Consists of a large scrollable content area, and the following optional components:
-
-- toolbar
-- action toolbar
-- sidebar
-- pagination
-
-You can use the `indent` attribute to enable some inner padding on the content areas. The `overlay-sidebar` attribute sets the sidebar container to be fixed and overlaying other content when expanded (this is used for content areas that need a lot of space, like large tables).
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Index" height="900px">
-    {stories.index()}
-  </Story>
-</Canvas>
-
-
-```js
-<ecs-layout-index>
-  <template slot="toolbar">
-    <div>toolbar</div>
-  </template>
-  <template slot="action-toolbar">
-    <div>action-toolbar</div>
-  </template>
-
-  <div>content slot</div>
-
-  <template slot="pagination">
-    <div>pagination</div>
-  </template>
-  <template slot="sidebar">
-    <div>sidebar</div>
-  </template>
-</ecs-layout-index>
-```
-
-
-## Props and Slots
-
-<ArgsTable of={EcsLayoutIndex} />

package/src/stories/map/map.stories.mdx

@@ -1,41 +0,0 @@
-import { Meta, Story, ArgsTable, Canvas, Description } from '@storybook/addon-docs/blocks';
-import EcsMap from '@components/map/map';
-import * as stories from './map.stories.js';
-
-<Meta
-  title="Elements/Map"
-  component={EcsMap} />
-
-# Map `EcsMap`
-
-Displays a Google Maps image of a specified address.
-
-## Basic
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Regular" height="260px">
-    {stories.regular()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-map address="New York City" />
-```
-
-## With Location Marker
-
-Add a location marker at pointing at the exact address by adding the `marker` attribute.
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="With Marker" height="260px">
-    {stories.withMarker()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-map address="White Sand Beach, Koh Chang" marker />
-```
-
-## Props
-
-<ArgsTable of={EcsMap} />

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} />