@covalent/components 0.0.0-COVALENT

package/stories/item-detail-and-editing.mdx

@@ -0,0 +1,529 @@
+import { Canvas, Meta, DocsContainer } from '@storybook/blocks';
+
+<Meta
+  title="Guides/Item Detail and Editing"
+  parameters={{
+    layout: 'fullscreen',
+    previewTabs: {
+      canvas: { hidden: true },
+    },
+  }}
+/>
+
+<style>
+  {`
+      .container {
+          display: flex;
+          flex-direction: column;
+          border-radius: 8px;
+          border: var(--mdc-theme-border) 1px solid;
+          margin-top: 24px;
+          background-color: var(--mdc-theme-surface);
+      }
+      .toolbar {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          width: 100%;
+          padding-top: 16px;
+          border-top: solid 2px #ff5f02;
+          border-top-left-radius: 3px;
+          border-top-right-radius: 3px;
+      }
+      .header {
+          font-family: var(--mdc-typography-headline6-font-family);
+          font-size: var(--mdc-typography-headline6-font-size);
+          font-weight: var(--mdc-typography-headline6-font-weight);
+          line-height: var(--mdc-typography-headline6-line-height);
+          color: var(--mdc-theme-text-primary-on-background);
+          margin-left: 16px;
+      }
+      .actions {
+          margin-right: 16px;
+      }
+      .actions cv-button:first-of-type {
+          margin-right: 8px;
+      }
+      cv-tab-bar {
+          width: 405px;
+          margin-left: 16px;
+          margin-top: 8px;
+      }
+      .sbdocs hr {
+          margin-top: 0;
+          padding-bottom: 16px;
+      }
+      .content {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          position: relative;
+      }
+      .content div:first-of-type {
+          width: 60%;
+      }
+      .content cv-icon-button {
+          position: absolute;
+          right: 8px;
+          top: -8px;
+          padding: 0;
+      }
+      .content-text {
+          color: var(--mdc-theme-text-primary-on-background);
+      }
+      .subtitle {
+          font-family: var(--mdc-typography-body2-font-family);
+          font-size: var(--mdc-typography-body2-font-size);
+          font-weight: var(--mdc-typography-body2-font-weight);
+          line-height: var(--mdc-typography-body2-line-height);
+          margin-bottom: 4px;
+      }
+      .subtitle:last-of-type {
+          margin-top: 16px;
+      }
+      .divider {
+        border: solid 1px var(--mdc-theme-border);
+        margin-top: 72px;
+        margin-bottom: 24px;
+      }
+      .changes-container {
+          display: flex;
+          flex-direction: column;
+          gap: 24px;
+      }
+      .changes-container-item {
+          display: flex;
+          gap: 24px;
+      }
+      .changes-container-item > div:first-of-type {
+          width: 30%;
+      }
+      .changes-container-item > div:last-of-type {
+          width: 60%;
+      }
+      .changes-container hr {
+          padding: 0;
+      }
+      .changes-title {
+          font-family: var(--mdc-typography-headline6-font-family);
+          font-size: var(--mdc-typography-headline6-font-size);
+          font-weight: var(--mdc-typography-headline6-font-weight);
+          line-height: var(--mdc-typography-headline6-line-height);
+          color: var(--mdc-theme-text-primary-on-background);
+          margin-bottom: 8px;
+      }
+      .changes-example {
+          width: 632px;
+          min-height: 200px;
+          border: solid 1px var(--mdc-theme-border);
+          border-radius: 8px;
+          background-color: var(--mdc-theme-surface);
+      }
+      .list-item {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          height: 56px;
+          padding-left: 16px;
+          border-bottom: solid var(--mdc-theme-border) 1px;
+      }
+      .list-item:last-of-type {
+          border-bottom: none;
+      }
+      .list-item-text {
+          font-family: var(--mdc-typography-body1-font-family);
+          font-size: var(--mdc-typography-body1-font-size);
+          font-weight: var(--mdc-typography-body1-font-weight);
+          line-height: var(--mdc-typography-body1-line-height);
+          color: var(--mdc-theme-text-primary-on-background);
+      }
+      .list-item-subtext {
+          font-family: var(--mdc-typography-body2-font-family);
+          font-size: var(--mdc-typography-body2-font-size);
+          font-weight: var(--mdc-typography-body2-font-weight);
+          line-height: var(--mdc-typography-body2-line-height);
+      }
+      .list-item-blue-bg {
+          background-color: var(--mdc-theme-surface-primary-highlight-hover);
+      }
+      .skeleton-text {
+        color: var(--mdc-theme-border) !important;
+        letter-spacing: 0 !important;
+      }
+      .skeleton-title {
+          margin-left: 16px;
+          margin-top: 8px;
+      }
+      .skeleton-block {
+          width: 96px;
+          height: 32px;
+          border-radius: 8px;
+          background-color: var(--mdc-theme-border) !important;
+          margin-right: 16px;
+      }
+      .skeleton-square {
+          width: 24px;
+          height: 24px;
+          background-color: var(--mdc-theme-border);
+          margin-right: 16px;
+      }
+      .object-list-example {
+          display: flex;
+      }
+      .object-list-left {
+          width: 50%;
+          border-right: solid 1px var(--mdc-theme-border);
+      }
+      .object-list-item {
+          justify-content: flex-start;
+          column-gap: 16px;
+      }
+      .object-list-left > div.list-item {
+          height: 33%;
+      }
+      cv-icon {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          background-color: var(--mdc-theme-border);
+          width: 40px;
+          height: 40px;
+          border-radius: 50%;
+      }
+      .object-list-right {
+          padding-left: 16px;
+          padding-top: 14px;
+          overflow: hidden;
+      }
+      .action-ribbon-bottom-content {
+          padding-left: 16px;
+          padding-top: 14px;
+          padding-right: 56px;
+          border-top: solid 1px var(--mdc-theme-border);
+      }
+      .new-text-block {
+          margin-top: 16px;
+      }
+    `}
+</style>
+
+# Item detail & editing
+
+## Viewing item details
+
+For content that’s intended to be browsed for information, display in read-only form, with an edit icon in the top right of the tab to enable editing.
+
+<div class="container">
+  <div class="toolbar">
+    <div class="header">
+      Interdum pellentesque cras ornare porttitor tellus ante.
+    </div>
+
+    <div class="actions">
+      <cv-button outlined slot="buttonActions" label="Action" />
+
+      <cv-button outlined slot="buttonActions" label="Action" />
+    </div>
+
+  </div>
+
+  <cv-tab-bar activeIndex="0">
+    <cv-tab label="Details" />
+
+    <cv-tab label="Tab 2" />
+
+    <cv-tab label="Tab 3" />
+
+    <cv-tab label="Tab 4" />
+
+  </cv-tab-bar>
+
+{' '}
+<hr />
+
+  <div class="content">
+    <div>
+      <div class="subtitle">Description</div>
+
+      <div class="content-text">
+        Elit in semper faucibus aliquam. Nisl, augue porta eu urna adipiscing
+        amet scelerisque enim odio. Arcu, posuere ultricies egestas viverra
+        quis. Id pharetra lacinia donec orci.
+      </div>
+
+      <div class="subtitle">Tags</div>
+
+      <cv-chip-set>
+        <cv-chip label="Lorem" />
+
+        <cv-chip label="Ipsum" />
+
+        <cv-chip label="Dolor sit" />
+      </cv-chip-set>
+    </div>
+
+    <cv-icon-button icon="edit" />
+
+  </div>
+</div>
+
+<div class="divider" />
+
+## Editing
+
+Editing takes place in context, not in a separate view. Show form fields by default, and use the action ribbon to display state, save changes, or perform other relevant operations.
+
+### Indicating changes
+
+<div class="changes-container">
+  <div class="changes-container-item">
+    <div>
+      <div class="changes-title">Tabs</div>
+      <div>Show a change indicator in the relevant tab.</div>
+    </div>
+
+    <div class="changes-example">
+      <div class="skeleton-text skeleton-title">
+        Elit in semper faucibus aliquam. Nisl, augue porta eu urna.
+      </div>
+
+      <cv-tab-bar activeIndex="0">
+        <cv-tab label="Details ●" />
+
+        <cv-tab label="Tab 2" />
+
+        <cv-tab label="Tab 3" />
+
+        <cv-tab label="Tab 4" />
+      </cv-tab-bar>
+
+      <hr />
+
+      <div class="list-item list-item-blue-bg">
+        <div class="skeleton-text">Filler text</div>
+
+        <div class="skeleton-block" />
+      </div>
+
+      <div class="list-item">
+        <div class="skeleton-text">
+          Filler text Filler text Filler text Filler text Filler text Filler
+          text
+        </div>
+      </div>
+    </div>
+
+  </div>
+
+  <div class="changes-container-item">
+    <div>
+      <div class="changes-title">Object list</div>
+
+      <div>
+        If the object list is visible, show a change indicator in the relevant
+        list item.
+      </div>
+    </div>
+
+    <div class="changes-example object-list-example">
+      <div class="object-list-left">
+        <div class="list-item">
+          <div class="skeleton-text">Some filler text</div>
+
+          <div class="skeleton-square" />
+        </div>
+
+        <div class="list-item list-item-blue-bg object-list-item">
+          <cv-icon>square</cv-icon>
+
+          <div>
+            <div class="list-item-text">● Interdum pellentesque cra...</div>
+            <div class="list-item-subtext">June 24, 2020 5:12 PM</div>
+          </div>
+        </div>
+
+        <div class="list-item object-list-item">
+          <cv-icon />
+
+          <div>
+            <div class="skeleton-text">Interdum pellentesque cra...</div>
+            <div class="skeleton-text">June 24, 2020 5:12 PM</div>
+          </div>
+        </div>
+      </div>
+
+      <div class="object-list-right">
+        <div class="skeleton-text">Filler text filler text filler text</div>
+        <div class="skeleton-text">Filler text filler text filler text</div>
+        <div class="skeleton-text">Filler text filler text filler text</div>
+
+        <br />
+
+        <div class="skeleton-text">Filler text filler text filler text</div>
+        <div class="skeleton-text">Filler text filler text filler text</div>
+        <div class="skeleton-text">Filler text filler text filler text</div>
+        <div class="skeleton-text">Filler text filler text filler text</div>
+      </div>
+    </div>
+
+  </div>
+
+  <div class="changes-container-item">
+    <div>
+      <div class="changes-title">
+        Action ribbon - <br /> Nothing changed
+      </div>
+
+      <div>Provide “No changes” text to the left of the ribbon.</div>
+      <div class="new-text-block">Disable actions.</div>
+    </div>
+
+    <div class="changes-example">
+      <cv-tab-bar activeIndex="0">
+        <cv-tab label="Details" />
+
+        <cv-tab label="Tab 2" />
+
+        <cv-tab label="Tab 3" />
+
+        <cv-tab label="Tab 4" />
+      </cv-tab-bar>
+
+      <hr />
+
+      <cv-action-ribbon labelText="No changes">
+        <cv-button slot="action-items" label="Cancel" outlined />
+
+        <cv-button slot="action-items" label="Save" raised disabled />
+      </cv-action-ribbon>
+
+      <div class="action-ribbon-bottom-content">
+        <div class="skeleton-text">
+          Filler text filler text filler text filler text filler text filler
+        </div>
+
+        <div class="skeleton-text">
+          Filler text filler text filler text filler text filler text filler
+        </div>
+
+        <div class="skeleton-text">
+          Filler text filler text filler text filler text filler text filler
+        </div>
+
+        <br />
+
+        <div class="skeleton-text">
+          Filler text filler text filler text filler text filler text filler
+        </div>
+
+        <div class="skeleton-text">
+          Filler text filler text filler text filler text filler text filler
+        </div>
+
+        <div class="skeleton-text">
+          Filler text filler text filler text filler text filler text filler
+        </div>
+
+        <div class="skeleton-text">
+          Filler text filler text filler text filler text filler text filler
+        </div>
+
+        <div class="skeleton-text">
+          Filler text filler text filler text filler text filler text filler
+        </div>
+
+        <div class="skeleton-text">
+          Filler text filler text filler text filler text filler text filler
+        </div>
+
+        <div class="skeleton-text">
+          Filler text filler text filler text filler text filler text filler
+        </div>
+
+        <div class="skeleton-text">Filler text filler text filler text </div>
+      </div>
+    </div>
+
+  </div>
+
+  <div class="changes-container-item">
+    <div>
+      <div class="changes-title">
+        Action ribbon - <br /> Unsaved changes
+      </div>
+
+      <div>
+        Provide “You have unsaved changes” text to the left of the ribbon.
+      </div>
+
+      <div class="new-text-block">Enable any relevant actions.</div>
+    </div>
+
+    <div class="changes-example">
+      <cv-tab-bar activeIndex="0">
+        <cv-tab label="Details ●" />
+
+        <cv-tab label="Tab 2" />
+
+        <cv-tab label="Tab 3" />
+
+        <cv-tab label="Tab 4" />
+      </cv-tab-bar>
+
+      <hr />
+
+      <cv-action-ribbon labelText="You have unsaved changes" state="active">
+        <cv-button slot="action-items" label="Cancel" outlined />
+
+        <cv-button slot="action-items" label="Save" raised />
+      </cv-action-ribbon>
+
+      <div class="action-ribbon-bottom-content">
+        <div class="skeleton-text">
+          Filler text filler text filler text filler text filler text filler
+        </div>
+
+        <div class="skeleton-text">
+          Filler text filler text filler text filler text filler text filler
+        </div>
+
+        <div class="skeleton-text">
+          Filler text filler text filler text filler text filler text filler
+        </div>
+
+        <br />
+
+        <div class="skeleton-text">
+          Filler text filler text filler text filler text filler text filler
+        </div>
+
+        <div class="skeleton-text">
+          Filler text filler text filler text filler text filler text filler
+        </div>
+
+        <div class="skeleton-text">
+          Filler text filler text filler text filler text filler text filler
+        </div>
+
+        <div class="skeleton-text">
+          Filler text filler text filler text filler text filler text filler
+        </div>
+
+        <div class="skeleton-text">
+          Filler text filler text filler text filler text filler text filler
+        </div>
+
+        <div class="skeleton-text">
+          Filler text filler text filler text filler text filler text filler
+        </div>
+
+        <div class="skeleton-text">
+          Filler text filler text filler text filler text filler text filler
+        </div>
+
+        <div class="skeleton-text">Filler text filler text filler text </div>
+      </div>
+    </div>
+
+  </div>
+</div>

package/stories/markdown-elements.mdx

@@ -0,0 +1,194 @@
+import { Meta, DocsContainer } from '@storybook/blocks';
+import { Icons, Code } from '@storybook/components';
+
+<Meta
+  title="Basics/Markdown Elements"
+  parameters={{
+    layout: 'fullscreen',
+    previewTabs: {
+      canvas: { hidden: true },
+    },
+  }}
+/>
+
+<style>
+  {`
+    table svg {
+      height: 1.5rem;
+      width: auto;
+    }
+    `}
+</style>
+
+# Markdown elements
+
+---
+
+# h1 Heading
+
+## h2 Heading
+
+### h3 Heading
+
+#### h4 Heading
+
+##### h5 Heading
+
+###### h6 Heading
+
+## Paragraphs
+
+The Storybook design system codifies existing UI components into a central, well-maintained repository. It is built to address having to paste the same components into multiple projects again and again. This simplifies building UI's with Storybook's design patterns.
+
+SDS was created by Kyle Suss, Dominic Nguyen (me!), and Michael Shilman with invaluable accessibility contributions from Jimmy Somsanith.
+
+## Emphasis
+
+**This is bold text**
+
+**_This is bold italic text_**
+
+_This is italic text_
+
+_This is italic text_
+
+\~~Strikethrough~~
+
+## Blockquotes
+
+> Blockquotes can also be nested...
+>
+> > ...by using additional greater-than signs right next to each other...
+> >
+> > > ...or with spaces between arrows.
+
+---
+
+## Lists
+
+### Unordered
+
+- Create a list by starting a line with `+`, `-`, or `*`
+- Sub-lists are made by indenting 2 spaces:
+  - Marker character change forces new list start:
+    - Ac tristique libero volutpat at
+    - Facilisis in pretium nisl aliquet
+    - Nulla volutpat aliquam velit
+- Very easy!
+  - Marker character change forces new list start:
+    - Ac tristique libero volutpat at
+    - Facilisis in pretium nisl aliquet
+  - Nulla volutpat aliquam velit
+- Final item
+
+### Ordered
+
+1. Lorem ipsum dolor sit amet
+2. Consectetur adipiscing elit
+3. Integer molestie lorem at massa
+
+### Start numbering with offset:
+
+57. foo
+58. bar
+
+---
+
+## Code
+
+### Inline
+
+This `code` is inline
+
+### Indented code
+
+// Some comments
+line 1 of code
+line 2 of code
+line 3 of code
+
+### Block code "fences"
+
+```
+Sample text here...
+```
+
+### JS syntax highlighting
+
+```js
+var foo = function (bar) {
+  return bar++;
+};
+
+console.log(foo(5));
+```
+
+### CSS syntax
+
+```css
+.foo {
+  color: #eee;
+}
+```
+
+### HTML syntax
+
+```html
+<h1>yo html</h1>
+
+<p>And here we go</p>
+```
+
+---
+
+## Tables
+
+| Option | Description                                                               |
+| ------ | ------------------------------------------------------------------------- |
+| data   | path to data files to supply the data that will be passed into templates. |
+| engine | engine to be used for processing templates. Handlebars is the default.    |
+| ext    | extension to be used for dest files.                                      |
+
+### Right aligned columns
+
+| Option |                                                               Description |
+| -----: | ------------------------------------------------------------------------: |
+|   data | path to data files to supply the data that will be passed into templates. |
+| engine |    engine to be used for processing templates. Handlebars is the default. |
+|    ext |                                      extension to be used for dest files. |
+
+### Table with icons
+
+| SVG                     | Name     |
+| ----------------------- | -------- |
+| <Icons icon="mobile" /> | `mobile` |
+| <Icons icon="grid" />   | `grid`   |
+| <Icons icon="alert" />  | `alert`  |
+| <Icons icon="check" />  | `check`  |
+
+---
+
+## Links
+
+[external link](https://hichroma.com)
+
+[external link with title](https://hichroma.com 'Insert title!')
+
+[link to in page anchor](#h1-heading)
+
+[link to another story (docs, without prefix)](/docs/addons-docs-docs-only--page)
+
+[link to another story (docs)](?path=/docs/addons-docs-docs-only--page)
+
+[link to another story (canvas)](?path=/story/addons-docs-buttongroup--basic)
+
+[link to about page](?path=/settings/about)
+
+[link to absolute local url](/absolute)
+
+---
+
+## Images
+
+![Minion](https://octodex.github.com/images/minion.png)
+![Stormtroopocat](https://octodex.github.com/images/stormtroopocat.jpg 'The Stormtroopocat')