@everchron/ec-shards 0.8.27 → 1.0.0

package/src/components/tokens/_colors.scss

@@ -1,141 +0,0 @@
-// Color Variables
-//
-
-$gray-1: #F9FAFC;
-$gray-2: #F3F4F7;
-$gray-3: #ECEDF2;
-$gray-4: #D7DAE1;
-$gray-5: #B9BCC2;
-$gray-6: #A1A6B0;
-$gray-7: #929AA9;
-$gray-8: #858E9E;
-$gray-9: #75798F;
-$gray-10: #65687A;
-$gray-11: #474B60;
-$gray-12: #3C4051;
-$gray-13: #2A2D3D;
-$gray-14: #1D1F28;
-$gray-15: #202127;
-
-$blue-1: #F4F9FF;
-$blue-2: #E9F3FF;
-$blue-3: #DFEEFF;
-$blue-4: #CBE3FF;
-$blue-5: #A7CFFF;
-$blue-6: #6BAFFF;
-$blue-7: #3893FF;
-$blue-8: #157EFB;
-$blue-9: #0B71EB;
-$blue-10: #0961EB;
-$blue-11: #0050CE;
-$blue-12: #0045B2;
-$blue-13: #003992;
-$blue-14: #002C71;
-$blue-15: #001D4B;
-
-$green-1: #F5FDF9;
-$green-2: #ECFDF5;
-$green-3: #E0FBEE;
-$green-4: #D3F4E4;
-$green-5: #ACEDCD;
-$green-6: #76E2AD;
-$green-7: #4AD390;
-$green-8: #19CC74;
-$green-9: #0EBA65;
-$green-10: #08AF5C;
-$green-11: #019049;
-$green-12: #006432;
-$green-13: #004925;
-$green-14: #00331A;
-$green-15: #001A0D;
-
-$red-1: #FFF7F9;
-$red-2: #FFF3F5;
-$red-3: #FFE9EC;
-$red-4: #FFDADF;
-$red-5: #FFBEC6;
-$red-6: #FF99A6;
-$red-7: #FF6F81;
-$red-8: #FF4B62;
-$red-9: #FF3750;
-$red-10: #ED223C;
-$red-11: #D1112A;
-$red-12: #B3051C;
-$red-13: #940014;
-$red-14: #65000E;
-$red-15: #45000A;
-
-$yellow-1: #FFFCF0;
-$yellow-2: #FFF6D5;
-$yellow-3: #FEEFB3;
-$yellow-4: #F6E3C7;
-$yellow-5: #F5DAAE;
-$yellow-6: #F6CD90;
-$yellow-7: #F4BF6E;
-$yellow-8: #F1B251;
-$yellow-9: #E9A032;
-$yellow-10: #C1862F;
-$yellow-11: #A2722D;
-$yellow-12: #835D2A;
-$yellow-13: #664B29;
-$yellow-14: #443626;
-$yellow-15: #312824;
-
-// Parties
-$party-client-background:     #C4DFF7;
-$party-client-text:           #0F5CA2;
-$party-opposition-background: #C6EAA5;
-$party-opposition-text:       #3D7301;
-$party-joint-background:      #EEE9E5;
-$party-joint-text:            #81715B;
-$party-other-background:      #E4E9EE;
-$party-other-text:            #7C7E82;
-$party-court-background:      #FDE4C0;
-$party-court-text:            #C07001;
-
-
-// Tags
-$tag-entry-background:    #D5EBFF;
-$tag-entry-text:          #00417A;
-$tag-group-background:  #E7E8EB;
-$tag-group-text:        #5A6166;
-
-//Popovers
-$popover-arrow-outer:   rgba($gray-10, 0.15);
-$popover-arrow:         #FFF;
-
-// Data Tables
-$table-accent-bg:       $gray-2;
-$table-hover-bg:        $blue-2;
-
-
-// Annotation markers
-
-$mc-1-background: #F9DF00;
-$mc-1-border: #F5CB00;
-$mc-1-color: #B57100;
-$mc-2-background: #F3A100;
-$mc-2-border: #EE7F00;
-$mc-2-color: #A95A00;
-$mc-3-background: #B7EA80;
-$mc-3-border: #89DD3C;
-$mc-3-color: #5CB907;
-$mc-4-background: #48E4C2;
-$mc-4-border: #1AD3A1;
-$mc-4-color: #06956E;
-$mc-5-background: #489DFF;
-$mc-5-border: #2873FF;
-$mc-5-color: #0E4BBE;
-$mc-6-background: #B877F0;
-$mc-6-border: #9845EA;
-$mc-6-color: #6B1ABA;
-$mc-7-background: #FD78FD;
-$mc-7-border: #FB3EFC;
-$mc-7-color: #BE15BF;
-$mc-8-background: #C59465;
-$mc-8-border: #AB673F;
-$mc-8-color: #7B3F1B;
-$mc-9-background: #858E9F;
-$mc-9-border: #566580;
-$mc-9-color: #364258;
-

package/src/components/tokens/_fonts.scss

@@ -1,6 +0,0 @@
-// Typography Variables
-//
-
-$sf:    -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Helvetica", sans-serif, "Apple Color Emoji";
-$segoe: "Segoe UI", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
-$mono:  "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;

package/src/components/tokens/_layout.scss

@@ -1,37 +0,0 @@
-// Layout Variables
-//
-
-$header_height:           41px;
-$toolbar_main_height:     60px;
-$toolbar_sub_height:      41px;
-$detachbar_height:        60px;
-$modal_header_web_height: 72px;
-
-
-// Inputs Atom
-$input-padding-y: 10px;
-$input-padding-x: 10px;
-$input-border-width: 1px;
-$input-line-height: 1.4em;
-$form-group-margin-bottom: 30px;
-$form-check-margin-bottom: 20px;
-$form-text-margin-top: 10px;
-$form-text-margin-bottom: 10px;
-$form-check-input-gutter: 30px;
-$form-check-input-margin-y: 0;
-$form-check-input-margin-x: 30px;
-$form-check-inline-margin-x: 30px;
-
-// Popover Molecule
-$popover-arrow-width: 12px;
-$popover-arrow-height: 12px;
-$popover-border-width: 1px;
-
-//Alerts
-$alert-padding-y: 15px;
-$alert-padding-x: 15px;
-$alert-margin-bottom: 30px;
-
-// Data Tables
-$table-cell-padding: 10px;
-$table-border-width: 1px;

package/src/components/tokens/tokens.scss

@@ -1,3 +0,0 @@
-@import "colors";
-@import "fonts";
-@import "layout";

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

@@ -1,69 +0,0 @@
-import { Meta, Story, ArgsTable, Canvas, Description } from '@storybook/addon-docs/blocks';
-import EcsActionToolbar from '@components/action-toolbar/action-toolbar';
-import * as stories from './action-toolbar.stories.js';
-
-<Meta
-  title="Toolbars/Action Toolbar"
-  component={EcsActionToolbar} />
-
-# Action Toolbar `EcsActionToolbar`
-
-Action toolbars are used to apply bulk, or single actions to a selected number of entries (eg. in tables or data lists). They can also just contain information about the selected entries, or actions that do not require a selection.
-
-## Show & Hide
-
-Action toolbars are hidden by default. They can be revealed (with a transition) by applying the `action-toolbar-show` class to any parent container.
-
-## With Selection
-
-Requires the `has-selection` attribute and will render a checkbox with select all functionality on the left of the sidebar. Provide the data type with the `selected-type` attribute (eg. "Documents", "Entries") to describe the type of selected items.
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Selection Actions" height="200px">
-    {stories.selectionActions()}
-  </Story>
-</Canvas>
-
-```js
-<div class="action-toolbar-show">
-  <ecs-action-toolbar has-selection selected-type="Entries">
-    <ecs-button icon="evidence" size="sml">Chronology</ecs-button>
-    <ecs-button icon="folder" size="sml">Folder</ecs-button>
-    <span class="divider" />
-    <ecs-button icon="download" size="sml">Export</ecs-button>
-    <ecs-button icon="tags" size="sml">Tag</ecs-button>
-    <ecs-button icon="edit" size="sml">Edit</ecs-button>
-    <span class="divider" />
-    <ecs-button type="danger" icon="delete" size="sml">Remove</ecs-button>
-  </ecs-action-toolbar>
-</div>
-```
-
-## Without Selection
-
-If an action toolbar just contains actions that are related to the view, but do not require any selection, just remove the `has-selection` attribute. You can also make use of the `custom` slot, to add completely custom content to the action bar.
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Actions" height="200px">
-    {stories.actions()}
-  </Story>
-</Canvas>
-
-```js
-<div class="action-toolbar-show">
-  <ecs-action-toolbar>
-    <ecs-button icon="evidence" size="sml">Chronology</ecs-button>
-    <ecs-button icon="folder" size="sml">Folder</ecs-button>
-    <span class="divider" />
-    <ecs-button icon="download" size="sml">Export</ecs-button>
-    <ecs-button icon="tags" size="sml">Tag</ecs-button>
-    <ecs-button icon="edit" size="sml">Edit</ecs-button>
-    <span class="divider" />
-    <ecs-button type="danger" icon="delete" size="sml">Remove</ecs-button>
-  </ecs-action-toolbar>
-</div>
-```
-
-## Props and Slots
-
-<ArgsTable of={EcsActionToolbar} />

package/src/stories/alert/alert.stories.mdx

@@ -1,83 +0,0 @@
-import { Meta, Story, ArgsTable, Canvas, Description } from '@storybook/addon-docs/blocks';
-import EcsAlert from '@components/alert/alert';
-import * as stories from './alert.stories.js';
-
-<Meta
-  title="Feedback/Alert"
-  component={EcsAlert} />
-
-# Alert `EcsAlert`
-
-Alerts allow you to display contextual feedback for various user actions.
-
-## Types
-
-Alerts come in various contextual theme colors. The theme color can be modified via the `type` attribute, available options are `success` `error` and `info`.
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Types" height="240px">
-    {stories.types()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-alert type="success">This is a success alert — check it out!</ecs-alert>
-<ecs-alert type="info">This is an info alert — check it out!</ecs-alert>
-<ecs-alert type="error">This is an error alert — check it out!</ecs-alert>
-<ecs-alert type="warning">This is a warning alert — check it out!</ecs-alert>
-<ecs-alert type="important">This is an important alert — check it out!</ecs-alert>
-```
-
-## Dismissable
-
-Dismissible alerts provide the option to hide the alert with a close X button.
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Dismissable" height="100px">
-    {stories.dismissable()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-alert type="success" dismissable>This is a success alert — check it out!</ecs-alert>
-```
-
-## Headline & Icon
-
-Alerts can have a headline along with a supportive icon.
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Headline" height="100px">
-    {stories.headline()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-alert type="warning" headline="Alert Headline" icon="versions">
-  This is an alert that comes with a separate headline and supportive icon.
-</ecs-alert>
-```
-
-## Action
-
-Alerts can have a primary action button. Use the `action` attribute to provide a text for the button, and the `@action` event for adding functionality.
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Actions" height="120px">
-    {stories.actions()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-alert type="warning" dismissable action="Review" @action="">
-  <p>This is a warning alert with a primary action — check it out!</p>
-  <ul>
-    <li>This is the first bullet point</li>
-    <li>You can also put lists in here</li>
-  </ul>
-</ecs-alert>
-```
-
-## Props and Slots
-
-<ArgsTable of={EcsAlert} />

package/src/stories/audio/audio.stories.mdx

@@ -1,27 +0,0 @@
-import { Meta, Story, ArgsTable, Canvas, Description } from '@storybook/addon-docs/blocks';
-import EcsAudio from '@components/audio/audio';
-import * as stories from './audio.stories.js';
-
-<Meta
-  title="Elements/Audio"
-  component={EcsAudio} />
-
-# Audio Player `EcsAudio`
-
-Wrapper component for a standard HTML5-Audio player.
-
-## Basic
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Player" height="260px">
-    {stories.player()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-audio mp3-source="seconds-of-silence.mp3" />
-```
-
-## Props
-
-<ArgsTable of={EcsAudio} />

package/src/stories/avatar/avatar.stories.mdx

@@ -1,74 +0,0 @@
-import { Meta, Story, ArgsTable, Canvas, Description } from '@storybook/addon-docs/blocks';
-import EcsAvatar from '@components/avatar/avatar';
-import * as stories from './avatar.stories.js';
-
-<Meta
-  title="Elements/Avatar"
-  component={EcsAvatar} />
-
-# Avatar `EcsAvatar`
-
-Avatars can be used to represent people, parties or objects. If there is no picture available, the avatar will show initial letters of the provided name.
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Avatars" height="60px">
-    {stories.avatars()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-avatar name="Ivo Mynttinen" :size="36" />
-<ecs-avatar name="Ivo Mynttinen" image="https://i.pravatar.cc/100" :size="36" />
-```
-
-## Sizes
-
-The size of avatar can be modified by setting any number (pixel value) as `size` attribute.
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Sizes" height="60px">
-    {stories.sizes()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-avatar name="Ivo Mynttinen" image="https://i.pravatar.cc/100" :size="24" />
-<ecs-avatar name="Ivo Mynttinen" image="https://i.pravatar.cc/100" :size="36" />
-<ecs-avatar name="Ivo Mynttinen" image="https://i.pravatar.cc/100" :size="54" />
-```
-
-## Rounded
-
-A rounded avatar will be shown when the `rounded` attribute is set. Rounded avatars should only be used for users within Everchron (not profiles, or other entities).
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Rounded" height="60px">
-    {stories.rounded()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-avatar name="Ivo Mynttinen" image="https://i.pravatar.cc/100" :size="36" rounded />
-```
-
-## Party Badges
-
-In some situations, an avatar should also reflect the party side (witness profiles, entities). To add a badge with a party color to the avatar, set the `party` attribute to one of the available options: `client`, `opposing`, `joint`, `other`, `court`.
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Party Badges" height="60px">
-    {stories.partyBadges()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-avatar party="client" name="Ivo Mynttinen" image="https://i.pravatar.cc/100" :size="36" />
-<ecs-avatar party="opposition" name="Ivo Mynttinen" image="https://i.pravatar.cc/100" :size="36" />
-<ecs-avatar party="joint" name="Ivo Mynttinen" image="https://i.pravatar.cc/100" :size="36" />
-<ecs-avatar party="other" name="Ivo Mynttinen" image="https://i.pravatar.cc/100" :size="36" />
-<ecs-avatar party="court" name="Ivo Mynttinen" image="https://i.pravatar.cc/100" :size="36" />
-```
-
-## Props
-
-<ArgsTable of={EcsAvatar} />

package/src/stories/breadcrumb/breadcrumb.stories.mdx

@@ -1,63 +0,0 @@
-import { Meta, Story, ArgsTable, Canvas, Description } from '@storybook/addon-docs/blocks';
-import EcsBreadcrumb from '@components/breadcrumb/breadcrumb';
-import EcsBreadcrumbButton from '@components/breadcrumb-button/breadcrumb-button';
-import EcsBreadcrumbTitle from '@components/breadcrumb-title/breadcrumb-title';
-import * as stories from './breadcrumb.stories.js';
-
-<Meta
-  title="Navigation/Breadcrumb"
-  component={EcsBreadcrumb} />
-
-# Breadcrumb `EcsBreadcrumb` `EcsBreadcrumbButton` `EcsBreadcrumbTitle`
-
-The breadcrumb is a secondary navigation pattern that helps a user understand the hierarchy among levels and navigate back through them.
-
-## When to use
-
-Breadcrumbs are effective in products and experiences that have a large amount of content organized in a hierarchy of more than two levels. They take up little space but still provide context for the user’s place in the navigation hierarchy.
-
-## Overflow menu
-
-When space becomes limited, use a popover menu to truncate the breadcrumbs. The first and last two page links should always be shown, but the remaining breadcrumbs in between are condensed into an overflow menu. Breadcrumbs should never wrap onto a second line.
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Breadcrumb" height="240px">
-    {stories.breadcrumb()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-breadcrumb>
-  <ecs-breadcrumb-button type="root" icon="everchron" title="Everchron" />
-  <ecs-breadcrumb-button clickable>Plaintiffs - RFPs to SFX & Sillerman</ecs-breadcrumb-button>
-  <ecs-breadcrumb-button clickable>Mike Moran in Omaha</ecs-breadcrumb-button>
-  <ecs-breadcrumb-button type="more" clickable />
-  <ecs-breadcrumb-button clickable>Omaha Papers</ecs-breadcrumb-button>
-  <ecs-breadcrumb-title>Agreement - CIBC World Markets</ecs-breadcrumb-title>
-</ecs-breadcrumb>
-```
-
-## Condensed Variant
-
-When there isn't a lot of space available for the breadcrumb navigation (such as in title bars), use the `size` attribute to render a condensed version.
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Breadcrumb Small" height="240px">
-    {stories.breadcrumbSmall()}
-  </Story>
-</Canvas>
-
-
-## Props and Slots
-
-### EcsBreadcrumb
-
-<ArgsTable of={EcsBreadcrumb} />
-
-### EcsBreadcrumbButton
-
-<ArgsTable of={EcsBreadcrumbButton} />
-
-### EcsBreadcrumbTitle
-
-<ArgsTable of={EcsBreadcrumbTitle} />