@everchron/ec-shards 0.8.27 → 1.0.0

package/src/stories/dialog/dialog.stories.mdx

@@ -1,67 +0,0 @@
-import { Meta, Story, ArgsTable, Canvas, Description } from '@storybook/addon-docs/blocks';
-import EcsDialog from '@components/dialog/dialog';
-import * as stories from './dialog.stories.js';
-
-<Meta
-  title="Modals & Dialogs/Dialog"
-  component={EcsDialog} />
-
-# Dialog `EcsDialog`
-
-When requiring users to interact with the application, but without jumping to a new page and interrupting the user's workflow, you can use EcsDialog to create a new floating layer over the current view to get user feedback or display information.
-
-Primary use of EcsDialog is for prompt dialogs, to get additional user confirmation on potentially destructive actions.
-
-## Dialog Header
-
-While not required, it is recommended to use the EcsDialogHeader component for the title area (with or without a specific illustration).
-
-## Button Footer
-
-Use the `actions` slot for buttons such as Confirm or Close actions. At least one button is required to make sure there is a prominent option to close the dialog available. Only EcsDialogButton components should be used for any button footer.
-
-## Prompts
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Dialog Prompt" height="500px">
-    {stories.dialogPrompt()}
-  </Story>
-</Canvas>
-
-```js
-<button v-b-modal.example>Open</button>
-<ecs-dialog id="example">
-  <ecs-dialog-header icon="document">Send Documents</ecs-dialog-header>
-  <p>Are you sure you want to delete the selected documents?</p>
-  <template slot="actions">
-    <ecs-button-dialog>Cancel</ecs-button-dialog>
-    <ecs-button-dialog type="confirm" icon="download">Confirm</ecs-button-dialog>
-  </template>
-</ecs-dialog>
-```
-
-## Large Dialogs
-
-Larger dialogs are used if there is more space needed, for a required user input or selection. A typical example would be a dialog with the use case of selecting a folder from a tree view, to move a document. Add the `large` attribute to render a larger dialog window.
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Dialog Large" height="500px">
-    {stories.dialogLarge()}
-  </Story>
-</Canvas>
-
-```js
-<button v-b-modal.example2>Open</button>
-<ecs-dialog id="example2" large>
-  <ecs-dialog-header>Choose Attachment</ecs-dialog-header>
-  <p>Select documents to attach to.</p>
-  <template slot="actions">
-    <ecs-button-dialog>Cancel</ecs-button-dialog>
-    <ecs-button-dialog type="confirm" icon="download">Confirm</ecs-button-dialog>
-  </template>
-</ecs-dialog>
-```
-
-## Props and Slots
-
-<ArgsTable of={EcsDialog} />

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

@@ -1,76 +0,0 @@
-import { Meta, Story, ArgsTable, Canvas, Description } from '@storybook/addon-docs/blocks';
-import EcsDialogHeader from '@components/dialog-header/dialog-header';
-import * as stories from './dialog-header.stories.js';
-
-<Meta
-  title="Modals & Dialogs/Dialog Header"
-  component={EcsDialogHeader} />
-
-# Dialog Header `EcsDialogHeader`
-
-Dialog headers are simple headlines to be used within the EcsDialog component. They can be pure text, or have a supportive illustration.
-
-## Text Header
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Text" height="200px">
-    {stories.text()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-dialog-header>Headline</ecs-dialog-header>
-```
-
-## Illustration Header
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Illustration" height="200px">
-    {stories.illustration()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-dialog-header icon="security" icon-color="vibrant">Headline</ecs-dialog-header>
-```
-
-### Available Illustrations
-
-To add an illustration, add the `icon` attribute with one of the following values:
-
-+ `annotation` Annotation related actions
-+ `archive` Archiving related actions
-+ `comment` Comment related actions
-+ `document` Document related actions
-+ `download` Downloads and Exports
-+ `edit` Edit related actions
-+ `entry-add` Adding entries
-+ `error` General errors
-+ `flag` Flagging actions
-+ `folder-add` Folder creation or adding
-+ `folder-remove` Folder removal or delete
-+ `merge` Merging actions
-+ `organization` Organization related actions
-+ `rate` Rating actions
-+ `relativity` Relativity related actions
-+ `search` Search actions
-+ `security` Security related actions
-+ `sync` Syncing related actions
-+ `tag` Tagging related actions
-+ `translation` Translation related actions
-+ `upload` Uploads
-+ `user` User or witness related actions
-+ `video` Video related actions
-+ `link` Linking related actions
-
-### Illustration Background Color
-
-The background color of illustrations can be changed by setting the `icon-color` attribute to one of the following values:
-
-+ `neutral` or `null`
-+ `vibrant`
-+ `danger`
-
-## Props and Slots
-
-<ArgsTable of={EcsDialogHeader} />

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

@@ -1,48 +0,0 @@
-import { Meta, Story, ArgsTable, Canvas, Description } from '@storybook/addon-docs/blocks';
-import { EcsDirectoryEntry } from '@components/directory-entry/directory-entry';
-import * as stories from './directory-entry.stories.js';
-
-<Meta
-  title="Content Structures/Directory Entry"
-  component={EcsDirectoryEntry} />
-
-# Directory Entry `EcsDirectoryEntry`
-
-A directory can display a single point of data, or a collection of data (usually links or phone numbers). Directory entries do always have an icon.
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Directory Entry" height="200px">
-    {stories.directoryEntry()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-directory-entry icon="mail">
-  <a href="mailto:info@everchron.com">info@everchron.com</a>
-</ecs-directory-entry>
-<ecs-directory-entry icon="mail">
-  <ul>
-    <li><a href="https://everchron.com">everchron.com</a></li>
-    <li><a href="https://google.com">google.com</a></li>
-    <li><a href="https://twitter.com">twitter.com</a></li>
-  </ul>
-</ecs-directory-entry>
-```
-
-## Indicator
-
-Optionally you can add an indicator to the directory entry icon. Use the `indicator` prop to set the indicator to a specific color (HEX or RGB, no alpha values).
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Directory Entry Indicator" height="200px">
-    {stories.directoryEntryIndicator()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-directory-entry icon="person" indicator="#0EBA65">Active</ecs-directory-entry>
-```
-
-## Props
-
-<ArgsTable of={EcsDirectoryEntry} />

package/src/stories/document-state/document-state.stories.mdx

@@ -1,38 +0,0 @@
-import { Meta, Story, ArgsTable, Canvas, Description } from '@storybook/addon-docs/blocks';
-import EcsDocumentState from '@components/document-state/document-state';
-import * as stories from './document-state.stories.js';
-
-<Meta
-  title="Feedback/Document State"
-  component={EcsDocumentState} />
-
-# Document State Indicator `EcsDocumentState`
-
-An icon that indicates the status of a document in the Viewer.
-
-
-## States
-
-| Attribute      | `true`                                     | `false` (default)              |
-|----------------|--------------------------------------------|--------------------------------|
-| `ocr`          | Document text is selectable and searchable | Document text is not available |
-| `instant-view` | Instant view available                     | Instant view unavailable       |
-| `loading`      | Document is processing                     | Document is ready              |
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Status Indicator" height="80px">
-    {stories.statusIndicator()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-document-state />
-<ecs-document-state ocr />
-<ecs-document-state loading />
-<ecs-document-state instant-view />
-<ecs-document-state ocr instant-view />
-```
-
-## Props and Slots
-
-<ArgsTable of={EcsDocumentState} />

package/src/stories/dropzone/dropzone.stories.mdx

@@ -1,27 +0,0 @@
-import { Meta, Story, ArgsTable, Canvas, Description } from '@storybook/addon-docs/blocks';
-import EcsDropzone from '@components/dropzone/dropzone';
-import * as stories from './dropzone.stories.js';
-
-<Meta
-  title="Forms/Dropzone"
-  component={EcsDropzone} />
-
-# Dropzone File Upload `EcsDropzone`
-
-The dropzone file upload allows the user to drag files to a specific area, to upload. Alternatively, the file dialog can be opened by clicking the (optional) link within the dropzone.
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Dropzone" height="300px">
-    {stories.dropzone()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-dropzone>Drag and drop here or <i>browse</i> to upload.</ecs-dropzone>
-```
-
-`<i>` elements within the dropzone message are styled as a fake button.
-
-## Props and Slots
-
-<ArgsTable of={EcsDropzone} />

package/src/stories/empty-state/empty-state.stories.mdx

@@ -1,77 +0,0 @@
-import { Meta, Story, ArgsTable, Canvas, Description } from '@storybook/addon-docs/blocks';
-import EcsEmptyState from '@components/empty-state/empty-state';
-import * as stories from './empty-state.stories.js';
-
-<Meta
-  title="Elements/Empty State"
-  component={EcsEmptyState} />
-
-# Empty States `EcsEmptyState`
-
-Empty states are used for large content areas that do not have any content yet, and would otherwise be blank. They can be used to communicate with the user and offer actions to start a new workflow.
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Empty State" height="460px">
-    {stories.emptyState()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-empty-state type="empty-comments">There are no comments on this entry.</ecs-empty-state>
-```
-
-## Sizes
-
-Empty states can be used in large (default) or small size. Set the `size` attribute to `sml` to shrink the empty state to a smaller size (commonly used within sidebars or areas that do not have a minimum width and height of 500 pixels).
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Empty State Small" height="460px">
-    {stories.emptyStateSmall()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-empty-state size="sml" type="empty-comments">There are no comments on this entry.</ecs-empty-state>
-```
-
-## Actions
-
-Use the `actions` slot to add additional call to action (like an Add button) to the empty state.
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Empty State Actions" height="460px">
-    {stories.emptyStateActions()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-empty-state type="empty-comments">
-  There are no comments on this entry.
-  <template slot="actions">
-    <ecs-button icon="comment">Add Comment</ecs-button>
-  </template>
-</ecs-empty-state>
-```
-
-## Loading Spinner
-
-The `type` loading displays the Everchron loading spinner, without any additional text or actions.
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Empty State Loading" height="460px">
-    {stories.emptyStateLoading()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-empty-state type="loading" />
-```
-
-## Available Empty States
-
-Set the `type` attribute to one of the following values to change the empty state illustration: `loading`, or any icon that has a file name prefixed with `empty-` [here](https://github.com/everchron/ec-shards/tree/master/src/assets/icons).
-
-
-## Props and Slots
-
-<ArgsTable of={EcsEmptyState} />

package/src/stories/excerpt-snippet/excerpt-snippet.stories.mdx

@@ -1,98 +0,0 @@
-import { Meta, Story, ArgsTable, Canvas, Description } from '@storybook/addon-docs/blocks';
-import EcsExcerptSnippet from '@components/excerpt-snippet/excerpt-snippet';
-import * as stories from './excerpt-snippet.stories.js';
-
-<Meta
-  title="Content Structures/Excerpt Snippet"
-  component={EcsExcerptSnippet} />
-
-# Excerpt Snippet `EcsExcerptSnippet`
-
-Excerpt snippets are small containers that are used to display a summary of a piece of content. They are used mostly for excerpts of transcripts.
-
-## Transcript Excerpt
-
-The default exerpt snippet type is a transcript text snippet.
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Transcript" height="100px">
-    {stories.transcript()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-excerpt-snippet cite="3:6-4:3" headline="Excerpt Text">
-  BY MR. KANTER:
-    Q.   Do you have any college education?
-    A.   Oh, yeah, yeah, uh-uh.  Oh, you want to
-  know what the details of it is?
-    Q.   Sure.
-</ecs-excerpt-snippet>
-```
-
-## Regular Excerpt
-
-By setting the `type` prop to `regular`, you can render a regular excerpt.
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Regular" height="100px">
-    {stories.regular()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-excerpt-snippet headline="Document Headline" type="regular" icon="document">
-The below note outlines the changes I made to the Enron Machine and
-Mechanical Services, Inc.
-</ecs-excerpt-snippet>
-```
-
-## Regular Excerpt
-
-By setting the `type` prop to `rectangle`, you can render a rectangle annotation with it's given `annotation-color` (1-9).
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Rectangle Annotation" height="100px">
-    {stories.rectangleAnnotation()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-excerpt-snippet headline="Document Headline" type="rectangle" icon="document" :annotation-color="1" />
-```
-
-## Formatted Text
-
-By setting the `type` prop to `formatted`, you can render formatted text inside the snippet content area.
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Formatted Text" height="100px">
-    {stories.formattedText()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-excerpt-snippet headline="Summary" type="formatted">
-  <p>This is a <b>formatted</b> text.</p>
-</ecs-excerpt-snippet>
-```
-
-## Loading
-
-By setting the `loading` prop, the excerpt snippet shows a loading indicator.
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Loading" height="100px">
-    {stories.loading()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-excerpt-snippet loading headline="Summary" type="formatted">
-  <p>This is a <b>formatted</b> text.</p>
-</ecs-excerpt-snippet>
-```
-
-## Props, Slots and Events
-
-<ArgsTable of={EcsExcerptSnippet} />

package/src/stories/file-icon/file-icon.stories.mdx

@@ -1,53 +0,0 @@
-import { Meta, Story, ArgsTable, Canvas, Description } from '@storybook/addon-docs/blocks';
-import EcsFileIcon from '@components/file-icon/file-icon';
-import * as stories from './file-icon.stories.js';
-
-<Meta
-  title="Icons/File Icon"
-  component={EcsFileIcon} />
-
-# File Icon `EcsFileIcon`
-
-File Icons are used to represent a specific file type (not Document Type) of a document. The following file types are currently available as an icon (`type` attribute):
-
-- audio
-- email
-- docx
-- exe
-- image
-- native
-- pdf
-- ppt
-- rtf
-- transcript-mini
-- transcript
-- video
-- xls
-- zip
-
-<Canvas withSource="none" withToolbar={true}>
-  <Story name="Icon" height="50px">
-    {stories.icon()}
-  </Story>
-</Canvas>
-
-```js
-<ecs-file-icon type="audio" />
-<ecs-file-icon type="docx" />
-<ecs-file-icon type="email" />
-<ecs-file-icon type="exe" />
-<ecs-file-icon type="image" />
-<ecs-file-icon type="native" />
-<ecs-file-icon type="pdf" />
-<ecs-file-icon type="ppt" />
-<ecs-file-icon type="rtf" />
-<ecs-file-icon type="transcript-mini" />
-<ecs-file-icon type="transcript" />
-<ecs-file-icon type="video" />
-<ecs-file-icon type="xls" />
-<ecs-file-icon type="zip" />
-```
-
-## Props
-
-<ArgsTable of={EcsFileIcon} />