@everchron/ec-shards 0.0.12

package/src/stories/Changelog.stories.mdx

@@ -0,0 +1,355 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+
+<Meta title="Changelog" />
+
+<h1 style={{ marginBottom: '32px', letterSpacing: '-.02em' }}>
+  Changelog
+</h1>
+
+## Version 3.4.0 (1 February 2023)
+
+### Features
+
+- Added new EcsTreeListHeadline component
+
+## Version 3.3.0 (12 January 2023)
+
+### Features
+
+- Added new EcsFillIcon component
+- Added `login-key` icon
+- Added EU flag icon
+- Added new `placeholder` prop support for EcsSelect component
+- Added new EcsSeparator component
+
+## Version 3.2.0 (11 January 2023)
+
+### Fixes
+
+Reverted all EcsPagination updates and moved these changes to the @next branch, until infinite scroll feature can be implemented. This means 3.2.0 can be used again as a stable release for current application development.
+
+## Version 3.1.5 (undefined)
+
+### Features
+
+- Added item range indicator to EcsPagination component
+
+### Fixes
+
+- Overwrite margins of dialog
+- Only add EcsDialog to the DOM when it's being shown
+- Fix subtle layout shift on EcsTabButton of type `sheet`. 
+- Replaced soon to be deprecated `width` and `height` props of EcsIcon with `size`. 
+
+## Version 3.1.2 (15 December 2022)
+
+### Fixes
+
+- Fixed readonly state styles of EcsInput
+- Fixed line height scales of EcsFormatted
+
+## Version 3.1.1 (29 November 2022)
+
+### Fixes
+
+- Fixed padding of pagination slot in EcsLayoutIndex component
+- Fixed position of sidebar in EcsLayoutIndex component
+
+## Version 3.1.0 (24 November 2022)
+
+### Fixes
+
+- Added `type` prop to EcsPagination component
+- Added loading indicator to EcsPagination component
+
+## Version 3.0.0 (21 November 2022)
+
+### Breaking Changes
+
+- Refactored EcsPagination component
+    - New First/Last page buttons
+    - Added optional controls slot
+    - Added optional "items per page" dropdown
+
+### Features
+
+- Added 4 new chevron type icons
+
+### Fixes
+
+- Added `warning` type to EcsText component
+- Fixed some spacings on EcsFormHeadline
+
+## Version 2.2.4 (8 November 2022)
+
+### Fixes
+
+- Added `us` to EcsFlag validator options
+
+## Version 2.2.3 (7 November 2022)
+
+### Fixes
+
+- Fixed pushed out sidebar in EcsIndexLayout when the content of the main canvas is larger than 100%
+
+## Version 2.2.2 (4 November 2022)
+
+### Fixes
+
+- Fix broken skeleton instances introduced in 2.2.0
+- Fix some general styling issues
+
+## Version 2.2.0 (4 November 2022)
+
+### Features
+
+- Added `circle` variant to skeleton loader component
+- Added `loading` state to comment component
+- Added line height scales to EcsSkeletonLoader component, to match common text line heights
+
+### Fixes
+
+- Style fixes in EcsCommentsList component
+- Fixed line height in EcsDataListItem
+
+## Version 2.1.9 (1 November 2022)
+
+### Features
+
+- Added `indent` and `bordered` props to EcsDataListItem for more variants in possible style.
+
+## Version 2.1.8 (30 October 2022)
+
+### Features
+
+- Added `help` prop to EcsCheckbox and EcsRadiobutton to render a small helper text underneath the label.
+
+## Version 2.1.6 (28 October 2022)
+
+### Features
+
+- Added `loading` prop to EcsLogMessage component
+
+## Version 2.1.5 (28 October 2022)
+
+### Features
+
+- Added `fixedHeight` prop to modal component
+
+## Version 2.1.4 (26 October 2022)
+
+### Features
+
+- Added icon toolbar-annotation-import
+
+## Version 2.1.2 (24 Octobier 2022)
+
+### Fixes
+
+- Refactor EcsFormGroup error text with EcsText component
+- Added some padding to EcsTreeListItem suffix
+
+## Version 2.1.0 (11 October 2022)
+
+### Breaking Changes
+
+- Deprecated the `type="color"` and `color` props of EcsPopoverListItem. Since EcsSwatchesPicker is now fully implemented, this component variant will no longer be needed.
+
+### Fixes
+
+- Allows `suffix` and `help` text for control type popover-list-items components.
+
+## Version 2.0.7 (10 October 2022)
+
+### Fixes
+
+- Popover list item of type switch now uses the `sml-toggle` size variant to make it consistent with other popover list items.
+
+## Version 2.0.6 (6 October 2022)
+
+### Features
+
+- Added custom label slot to EcsDropzone
+
+## Version 2.0.5 (5 October 2022)
+
+### Features
+
+- Added `state` prop to EcsDropzone that allows to change the dropzone icon.
+
+## Version 2.0.4 (5 October 2022)
+
+### Features
+
+- Animated the icons for virus check and file upload.
+
+## Version 2.0.2 (22 September 2022)
+
+### Breaking Changes
+
+- Refactored the EcsPartyEntry component to accept custom color values. Deprecated the old annotation color classes.
+- Refactored EcsSwatchesPicker. Now accepts all color values as a prop and does not handle color management within the component.
+
+### Fixes
+
+- Unscoped content styles for `EcsDataListItem`
+
+## Version 1.6.4 (15 September 2022)
+
+### Features
+
+- Added new props and functionality to `EcsSwitch` component
+    - `indeterminate`: sets the switch to indeterminate state (only visually)
+    - `colored`: alters the switch colors to red/green
+    - `size="sml-toggle"`: shows the switch toggle in small, but it's label in a regular size
+    - improved disabled styles
+- `EcsQuicklink` now uses the new colored switch theme for quicklinks that contain a switch.
+
+## Version 1.6.1 (13 September 2022)
+
+### Fixes
+
+- Unscoped content styles of `EcsDataListItem` to allow more dynamic content injeciton.
+
+## Version 1.6.0 (13 September 2022)
+
+### Features
+
+- Added new `EcsLegendItem` component.
+
+## Version 1.5.0 (9 September 2022)
+
+### Features
+
+- Added new `blockContent` prop to `EcsOverlay` which allows to block any interactions on the content area.
+
+### Fixes
+
+- Added dynamic padding on `EcsOverlay` footer, depending if the content area is scrollable.
+- Added minimum padding for `EcsOverlay` content, when it's not the full width variant.
+
+## Version 1.4.1 (7 September 2022)
+
+### Fixes
+
+- Correct size for EcsTranscriptState button, added active styles and removed not needed `repair` state.
+
+## Version 1.4.0 (6 September 2022)
+
+### Features
+
+- Added new `EcsTranscriptState` component
+- Added new `EcsLogMessage` component
+- Added broken transcript empty state icon
+- Added info sticker icon
+
+### Fixes
+
+- Cleaned up styles on the EcsDocumentState component and reduced weight of inline styles a bit.
+
+## Version 1.3.6 (29 August 2022)
+
+### Fixes
+
+- Added flex and flexDirection prop to EcsTab component.
+- Removed flex and flexDirection props from EcsTabs component.
+
+## Version 1.3.2 (27 August 2022)
+
+### Fixes
+
+- Fix height and padding of column tab buttons.
+- Set height and max-height to fill variant of EcsTab.
+
+## Version 1.3.0 (26 August 2022)
+
+### Features
+
+- Added the EcsDropzone component which can be used for file upload dropzones.
+
+### Changes
+
+- Allow to change the color of the illustrations within EcsEmptyState by using the new `iconColor` prop.
+- Small text style adjustments on EcsEmptyState
+- Added a transition for color on EcsIcon
+
+## Version 1.2.3 (25 August 2022)
+
+### Features
+
+- Added `gap` prop to EcsFlexRow component.
+
+### Changes
+
+- Increased the EcsOverlay content area width from 900 to 920 pixels.
+
+## Version 1.2.2 (25 August 2022)
+
+### Features
+
+- Added `fill` prop to EcsTabs component.
+
+## Version 1.2.1 (25 August 2022)
+
+### Features
+
+- Added icons: `citation`, `card-view-settings`, `check`.
+
+## Version 1.2.0 (24 August 2022)
+
+### Features
+
+- Added new EcsCitationLine component.
+
+## Version 1.1.0 (23 August 2022)
+
+### Features
+
+- Added new EcsSelectTile component.
+
+## Version 1.0.3 (21 August 2022)
+
+### Features
+
+- Added new `addon` prop for EcsButton, which renders a small dropdown addition.
+- Added new EcsButtonGroup component to create groups of regular Buttons, as well as dropdown addons.
+
+### Fixes
+
+- Fixed positioning of stickers on column EcsTabButton variant
+
+## Version 1.0.2 (16 August 2022)
+
+### Fixes
+
+- EcsSwitch sizes to match input heights
+- Replaced old add icon with new add icon
+- EcsButton type `create` icons are now white instead of dark green
+
+## Version 1.0.1 (19 August 2022)
+
+### Fixes
+
+- Changed standard EcsTabButton font scale to 3.
+
+## Version 1.0.0 (16 August 2022)
+
+### Features
+
+- Added new `EcsFlexRow` and `EcsFlexCol` components.
+- Added new `EcsFavicon` component.
+
+### Changes
+
+- Implemented Style Dictionary to automatically generate design tokens for all platforms
+- Refactored all components to use the new design tokens
+- Redesigned most components to be in line with the design changes of the Figma design library
+- Refactored EcsFlag component to use new SVG assets, reduces package size by 40KB.
+- Visual hover effects for EcsTabButton added.
+- Refactored EcsDialog component to use native HTML5 `<dialog>` element. Fixing z-index and various overflow issues.
+
+### Breaking Changes
+
+- EcsAlert: prop `action` was renamed to `actionLabel`
+- EcsButton: sizes prop possible options changed to `sml`, `md`, `lg`. Removed `xsml` variant.
+

package/src/stories/Introduction.stories.mdx

@@ -0,0 +1,33 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+
+<Meta title="Introduction" />
+
+<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: '80px' }}>
+  <img src="https://i.imgur.com/IPJHm2i.png" style={{ maxWidth: '173px' }} />
+  <img src="https://badge.fury.io/js/%40everchron%2Fec-shards.svg" />
+</div>
+
+<h1 style={{ marginBottom: '32px', letterSpacing: '-.02em' }}>
+  <div style={{ fontSize: '32px' }}>Meet Shards,</div>
+  <div style={{ fontSize: '32px' }}>Everchron’s design system.</div>
+</h1>
+
+<div style={{ maxWidth: '640px', color: '#858E9E', fontSize: '20px', lineHeight: '30px', letterSpacing: '-.02em' }}>The single source of truth for building Everchron products. Shards is a series of guidelines used for creating unified experience and UI. Avoid design missteps by combining styles and components together.
+</div>
+
+<aside style={{ display: 'flex', marginTop: '60px', justifyContent: 'space-between' }}>
+  <a href="https://github.com/everchron/ec-shards/" target="_blank" style={{ marginRight: '20px' }}>
+    <span>vue.js Components</span>
+    <span>Building blocks for putting your interface together.</span>
+  </a>
+
+  <a href="https://www.figma.com/file/VdnGdnfdtYLkcVjXFDpKSx/Core?node-id=15%3A312" target="_blank">
+    <span>Figma Library</span>
+    <span>Flexible Figma components, that match their implemented counterparts.</span>
+  </a>
+
+  <a href="https://everchron.com/brand" target="_blank" style={{ marginLeft: '20px' }}>
+    <span>Brand Guidelines</span>
+    <span>Everchron basic branding and marketing guidelines.</span>
+  </a>
+</aside>

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

@@ -0,0 +1,23 @@
+import EcsActionToolbar from '@components/action-toolbar/action-toolbar';
+import EcsButton from '@components/button/button';
+
+export default {
+  title: 'Patterns/Action Toolbar',
+  component: EcsActionToolbar
+};
+
+export const actionToolbar = () => ({
+  components: { EcsActionToolbar, EcsButton },
+  template: `
+              <ecs-action-toolbar has-selection selected-type="Entry" show>
+                <ecs-button icon="evidence">Chronology</ecs-button>
+                <ecs-button icon="folder">Folder</ecs-button>
+                <span class="divider" />
+                <ecs-button icon="download">Export</ecs-button>
+                <ecs-button icon="tags">Tag</ecs-button>
+                <ecs-button icon="edit">Edit</ecs-button>
+                <span class="divider" />
+                <ecs-button type="danger" icon="delete">Remove</ecs-button>
+              </ecs-action-toolbar>
+              `,
+});

package/src/stories/alert/alert.stories.js

@@ -0,0 +1,38 @@
+import EcsAlert from '@components/alert/alert';
+
+export default {
+  title: 'Feedback/Alert',
+  component: EcsAlert
+};
+
+export const types = () => ({
+  components: { EcsAlert },
+  template: `<div>
+              <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>
+            </div>`,
+});
+
+export const dismissable = () => ({
+  components: { EcsAlert },
+  template: `<ecs-alert type="success" dismissable>This is a success alert — check it out!</ecs-alert>`,
+});
+
+export const headline = () => ({
+  components: { EcsAlert },
+  template: `<ecs-alert type="warning" headline="Alert Headline" icon="versions">This is an alert that comes with a separate headline and supportive icon.</ecs-alert>`,
+});
+
+export const actions = () => ({
+  components: { EcsAlert },
+  template: `<ecs-alert type="warning" dismissable action-label="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>`,
+});

package/src/stories/audio/audio.stories.js

@@ -0,0 +1,13 @@
+import EcsAudio from '@components/audio/audio';
+
+export default {
+  title: 'Data/Audio',
+  component: EcsAudio
+};
+
+export const player = () => ({
+  components: { EcsAudio },
+  template: `<ecs-audio 
+              mp3-source="https://github.com/anars/blank-audio/blob/master/30-seconds-of-silence.mp3?raw=true"
+             />`,
+});

package/src/stories/avatar/avatar.stories.js

@@ -0,0 +1,39 @@
+import EcsAvatar from '@components/avatar/avatar';
+
+export default {
+  title: 'Data/Avatar',
+  component: EcsAvatar
+};
+
+export const avatars = () => ({
+  components: { EcsAvatar },
+  template: `<main>
+              <ecs-avatar name="Ivo Mynttinen" :size="36" />
+              <ecs-avatar name="Ivo Mynttinen" image="https://i.pravatar.cc/100" :size="36" />
+            </main>`,
+});
+
+export const sizes = () => ({
+  components: { EcsAvatar },
+  template: `<main>
+              <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" />
+            </main>`,
+});
+
+export const rounded = () => ({
+  components: { EcsAvatar },
+  template: `<ecs-avatar name="Ivo Mynttinen" image="https://i.pravatar.cc/100" :size="36" rounded />`,
+});
+
+export const partyBadges = () => ({
+  components: { EcsAvatar },
+  template: `<main>
+              <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" />
+            </main>`,
+});

package/src/stories/breadcrumb/breadcrumb.stories.js

@@ -0,0 +1,38 @@
+import EcsBreadcrumb from '@components/breadcrumb/breadcrumb';
+import EcsBreadcrumbButton from '@components/breadcrumb-button/breadcrumb-button';
+import EcsBreadcrumbTitle from '@components/breadcrumb-title/breadcrumb-title';
+
+export default {
+  title: 'Navigation/Breadcrumb/Wrapper',
+  component: EcsBreadcrumb
+};
+
+export const breadcrumb = () => ({
+  components: { EcsBreadcrumb, EcsBreadcrumbButton, EcsBreadcrumbTitle },
+  template: `<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>
+                <span>Agreement - CIBC World Markets</span>
+              </ecs-breadcrumb-title>
+            </ecs-breadcrumb>
+            `,
+});
+
+export const breadcrumbSmall = () => ({
+  components: { EcsBreadcrumb, EcsBreadcrumbButton, EcsBreadcrumbTitle },
+  template: `<ecs-breadcrumb size="sml">
+              <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>
+                <span>Agreement - CIBC World Markets</span>
+              </ecs-breadcrumb-title>
+            </ecs-breadcrumb>
+            `,
+});

package/src/stories/breadcrumb-button/breadcrumb-button.stories.js

@@ -0,0 +1,18 @@
+import EcsBreadcrumbButton from '@components/breadcrumb-button/breadcrumb-button';
+
+export default {
+  title: 'Navigation/Breadcrumb/Breadcrumb Button',
+  component: EcsBreadcrumbButton
+};
+
+export const breadcrumbButton = () => ({
+  components: { EcsBreadcrumbButton },
+  template: `<main>
+              <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>
+            </main>
+            `,
+});

package/src/stories/button/button.stories.js

@@ -0,0 +1,110 @@
+import EcsButton from '@components/button/button';
+import EcsButtonGroup from '@components/button-group/button-group';
+import { action } from '@storybook/addon-actions';
+
+export default {
+  title: 'Action/Button',
+  component: EcsButton
+};
+
+export const types = () => ({
+  components: { EcsButton },
+  methods: { action: action('clicked') },
+  template: `<main>
+              <ecs-button @click="action" type="primary">Primary</ecs-button>
+              <ecs-button @click="action" type="secondary">Secondary</ecs-button>
+              <ecs-button @click="action" type="danger">Danger</ecs-button>
+              <ecs-button @click="action" type="danger-vibrant">Danger Vibrant</ecs-button>
+              <ecs-button @click="action" type="warning">Warning</ecs-button>
+              <ecs-button @click="action" type="create">Create</ecs-button>
+              <ecs-button @click="action" type="vibrant">Vibrant</ecs-button>
+            </main>`,
+});
+
+export const sizes = () => ({
+  components: { EcsButton },
+  methods: { action: action('clicked') },
+  template: `<main>
+              <ecs-button @click="action" size='sml' type="primary" icon="settings">Small</ecs-button>
+              <ecs-button @click="action" size='md' type="primary" icon="settings">Medium</ecs-button>
+              <ecs-button @click="action" size='lg' type="primary"  icon="settings">Large</ecs-button>
+            </main>`,
+});
+
+export const withIcon = () => ({
+  components: { EcsButton },
+  methods: { action: action('clicked') },
+  template: `<main>
+              <ecs-button @click="action" icon="add-plus" type="primary">Create</ecs-button>
+              <ecs-button @click="action" icon="add-plus" type="secondary">Create</ecs-button>
+              <ecs-button @click="action" icon="add-plus" type="danger">Create</ecs-button>
+              <ecs-button @click="action" icon="add-plus" type="danger-vibrant">Create</ecs-button>
+              <ecs-button @click="action" icon="add-plus" type="warning">Create</ecs-button>
+              <ecs-button @click="action" icon="add-plus" type="create">Create</ecs-button>
+              <ecs-button @click="action" icon="add-plus" type="vibrant">Create</ecs-button>
+            </main>`,
+});
+
+export const iconOnly = () => ({
+  components: { EcsButton },
+  methods: { action: action('clicked') },
+  template: `
+            <main>
+              <ecs-button @click="action" icon-only icon="add-plus" type="primary"></ecs-button>
+              <ecs-button @click="action" icon-only icon="add-plus" type="secondary"></ecs-button>
+              <ecs-button @click="action" icon-only icon="add-plus" type="danger"></ecs-button>
+              <ecs-button @click="action" icon-only icon="add-plus" type="danger-vibrant"></ecs-button>
+              <ecs-button @click="action" icon-only icon="add-plus" type="warning"></ecs-button>
+              <ecs-button @click="action" icon-only icon="add-plus" type="create"></ecs-button>
+              <ecs-button @click="action" icon-only icon="add-plus" type="vibrant"></ecs-button>
+            </main>
+            `,
+});
+
+export const active = () => ({
+  components: { EcsButton },
+  methods: { action: action('clicked') },
+  template: `<ecs-button @click="action" active type="primary">Active Button</ecs-button>`,
+});
+
+export const loading = () => ({
+  components: { EcsButton },
+  template: `<ecs-button loading type="primary">Loading...</ecs-button>`,
+});
+
+export const fullWidth = () => ({
+  components: { EcsButton },
+  methods: { action: action('clicked') },
+  template: `<ecs-button @click="action" full-width type="vibrant">Block button</ecs-button>`,
+});
+
+export const grouped = () => ({
+  components: { EcsButton, EcsButtonGroup },
+  methods: { action: action('clicked') },
+  template: `<ecs-button-group>
+              <ecs-button @click="action" type="create">First</ecs-button>
+              <ecs-button @click="action" type="create">Middle</ecs-button>
+              <ecs-button @click="action" type="create">Last</ecs-button>
+            </ecs-button-group>`,
+});
+
+export const addons = () => ({
+  components: { EcsButton, EcsButtonGroup },
+  methods: { action: action('clicked') },
+  template: `
+            <main>
+              <ecs-button-group>
+                <ecs-button @click="action" type="create" size="sml">Small</ecs-button>
+                <ecs-button @click="action" type="create" size="sml" addon />
+              </ecs-button-group>
+              <ecs-button-group>
+                <ecs-button @click="action" type="create">Medium</ecs-button>
+                <ecs-button @click="action" type="create" addon />
+              </ecs-button-group>
+              <ecs-button-group>
+                <ecs-button @click="action" type="create" size="lg">Large</ecs-button>
+                <ecs-button @click="action" type="create" size="lg" addon />
+              </ecs-button-group>
+            </main>
+            `,
+});