@covalent/components 0.0.0-COVALENT

package/src/radio/radio.scss

@@ -0,0 +1,3 @@
+:host {
+  --mdc-radio-unchecked-color: var(--mdc-theme-text-icon-on-background);
+}

package/src/radio/radio.spec.ts

@@ -0,0 +1,11 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { it, describe, expect } from 'vitest';
+import { CovalentRadio } from './radio';
+
+describe('Radio', () => {
+  it('should work', () => {
+    expect(new CovalentRadio()).toBeDefined();
+  });
+});

package/src/radio/radio.stories.js

@@ -0,0 +1,56 @@
+import './radio';
+import '../formfield/formfield';
+
+export default {
+  title: 'Components/Radio',
+  argTypes: {},
+};
+
+const Template = ({ disabled }) => {
+  return `<cv-radio
+                ${disabled ? `disabled` : null}>
+            </cv-radio>
+            <cv-radio
+                checked
+                ${disabled ? `disabled` : null}>
+            </cv-radio>
+            <cv-radio
+                indeterminate
+                ${disabled ? `disabled` : null}>
+            </cv-radio>`;
+};
+
+const LabelTemplate = ({ label = 'Bananas', indeterminate }) => {
+  return `
+            <style>
+                cv-formfield {
+                    display: block;
+                }
+                .child {
+                    margin-left: 20px;
+                }
+            </style>
+            <cv-formfield label="${label}">
+                <cv-radio ${indeterminate ? `indeterminate` : null}></cv-radio>
+            </cv-formfield>
+            
+            <cv-formfield label="${label}">
+                <cv-radio class="child"></cv-radio>
+            </cv-formfield>
+            
+            <cv-formfield label="${label}">
+                <cv-radio class="child" checked></cv-radio>
+            </cv-formfield>`;
+};
+
+export const Basic = Template.bind({});
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  disabled: true,
+};
+
+export const WithLabel = LabelTemplate.bind({});
+WithLabel.args = {
+  indeterminate: true,
+};

package/src/radio/radio.ts

@@ -0,0 +1,18 @@
+import { css, unsafeCSS } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { RadioBase } from '@material/mwc-radio/mwc-radio-base';
+import { styles as baseStyles } from '@material/mwc-radio/mwc-radio.css';
+import styles from './radio.scss?inline';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'cv-radio': CovalentRadio;
+  }
+}
+
+@customElement('cv-radio')
+export class CovalentRadio extends RadioBase {
+  static override styles = [baseStyles, css`${unsafeCSS(styles)}`];
+}
+
+export default CovalentRadio;

package/src/select/select.scss

@@ -0,0 +1,16 @@
+:host {
+  --mdc-select-idle-line-color: var(--mdc-theme-border);
+  --mdc-select-hover-line-color: var(--mdc-theme-text-icon-on-background);
+  --mdc-select-fill-color: var(--mdc-theme-surface-canvas);
+  --mdc-select-ink-color: var(--mdc-theme-text-primary-on-background);
+  --mdc-select-label-ink-color: var(--mdc-theme-text-secondary-on-background);
+  --mdc-select-outlined-idle-border-color: var(--mdc-theme-border);
+  --mdc-select-outlined-hover-border-color: var(
+    --mdc-theme-text-icon-on-background
+  );
+  --mdc-select-dropdown-icon-color: var(--mdc-theme-text-icon-on-background);
+
+  .mdc-select:not(.mdc-select--disabled) .mdc-select__icon {
+    color: var(--mdc-select-dropdown-icon-color);
+  }
+}

package/src/select/select.spec.ts

@@ -0,0 +1,11 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { it, describe, expect } from 'vitest';
+import { CovalentSelect } from './select';
+
+describe('Select', () => {
+  it('should work', () => {
+    expect(new CovalentSelect()).toBeDefined();
+  });
+});

package/src/select/select.stories.js

@@ -0,0 +1,57 @@
+import './select';
+import '../list/list-item';
+
+export default {
+  title: 'Components/Select',
+  argTypes: {
+    style: {
+      options: ['outlined', 'filled'],
+      control: { type: 'radio' },
+    },
+  },
+  args: {
+    style: 'outlined',
+  },
+};
+
+const Template = ({ icon, style, required, helper }) => {
+  return `
+        <cv-select
+            label="${style}"
+            validationMessage="This Field is Required"
+            ${style}
+            ${icon ? `icon="${icon}"` : null}
+            ${helper ? `helper="${helper}"` : null}
+            ${required ? `required` : null}>
+            <cv-list-item selected></cv-list-item>
+            <cv-list-item ${
+              icon ? `graphic="icon"` : null
+            } value="0">Item 0</cv-list-item>
+            <cv-list-item ${
+              icon ? `graphic="icon"` : null
+            } value="1">Item 1</cv-list-item>
+            <cv-list-item ${
+              icon ? `graphic="icon"` : null
+            } value="2">Item 2</cv-list-item>
+            <cv-list-item ${
+              icon ? `graphic="icon"` : null
+            } value="3">Item 3</cv-list-item>
+        </cv-select>`;
+};
+
+export const Basic = Template.bind({});
+
+export const Required = Template.bind({});
+Required.args = {
+  required: true,
+};
+
+export const Icon = Template.bind({});
+Icon.args = {
+  icon: 'event',
+};
+
+export const HelperText = Template.bind({});
+HelperText.args = {
+  helper: 'Helper Text',
+};

package/src/select/select.ts

@@ -0,0 +1,18 @@
+import { css, unsafeCSS } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { SelectBase } from '@material/mwc-select/mwc-select-base';
+import { styles as baseStyles } from '@material/mwc-select/mwc-select.css';
+import styles from './select.scss?inline';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'cv-select': CovalentSelect;
+  }
+}
+
+@customElement('cv-select')
+export class CovalentSelect extends SelectBase {
+  static override styles = [css`${unsafeCSS(styles)}`, baseStyles];
+}
+
+export default CovalentSelect;

package/src/side-sheet/side-sheet.scss

@@ -0,0 +1,49 @@
+:host {
+  --cv-side-sheet-width: 800px;
+  --mdc-dialog-heading-ink-color: var(--mdc-theme-text-primary-on-background);
+}
+
+.mdc-dialog {
+  justify-content: flex-end;
+
+  .mdc-dialog__surface {
+    border-radius: 0;
+    height: 100%;
+    min-height: inherit;
+    max-height: inherit;
+    min-width: var(--cv-side-sheet-width, 400px);
+  }
+}
+
+.mdc-dialog--opening {
+  .mdc-dialog__container {
+    transform: translate(100%, 0);
+    transition: transform 150ms cubic-bezier(0.4, 0, 1, 1);
+  }
+}
+
+.mdc-dialog--open {
+  .mdc-dialog__container {
+    transform: translate(0);
+  }
+}
+
+.mdc-dialog--closing {
+  .mdc-dialog__container {
+    opacity: 1;
+    transform: translate(100%, 0);
+    transition: transform 150ms cubic-bezier(0, 0, 0.2, 1);
+  }
+}
+
+:host([pushed]) {
+  .mdc-dialog__surface {
+    min-width: 100vw;
+  }
+}
+
+:host([noPadding]) {
+  .mdc-dialog .mdc-dialog__content {
+    padding: 0;
+  }
+}

package/src/side-sheet/side-sheet.spec.ts

@@ -0,0 +1,11 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { it, describe, expect } from 'vitest';
+import { CovalentSideSheet } from './side-sheet';
+
+describe('Side sheet', () => {
+  it('should work', () => {
+    expect(new CovalentSideSheet()).toBeDefined();
+  });
+});

package/src/side-sheet/side-sheet.stories.js

@@ -0,0 +1,96 @@
+import './side-sheet';
+import '../button/button';
+import { Active as ActiveStatusHeader } from '../status-header/status-header.stories';
+import tableRowSelectionContent from '../../stories/demos/table-row-selection.content.html?raw';
+import '../data-table/data-table.stories.scss';
+
+export default {
+  title: 'Components/Side sheet',
+  argTypes: { onClick: { action: 'clicked' } },
+  parameters: {
+    actions: {
+      handles: ['click cv-button'],
+    },
+  },
+};
+
+export const Basic = () => {
+  document.addEventListener(
+    'DOMContentLoaded',
+    () => {
+      const sideSheet = document.querySelector('cv-side-sheet');
+      document
+        .querySelector('cv-button')
+        ?.addEventListener('click', () =>
+          sideSheet?.open ? sideSheet.close() : sideSheet?.show()
+        );
+    },
+    { once: true }
+  );
+  return `
+        <cv-button raised>Open side sheet</cv-button>
+        <cv-side-sheet heading="Sample side sheet">
+        </cv-side-sheet>
+    `;
+};
+
+export const Multiple = () => {
+  document.addEventListener(
+    'DOMContentLoaded',
+    () => {
+      const sideSheet = document.querySelector('#parentSideSheet');
+      const childSideSheet = document.querySelector('#childSideSheet');
+
+      document
+        .querySelector('#parentTarget')
+        ?.addEventListener('click', () =>
+          sideSheet?.open ? sideSheet.close() : sideSheet?.show()
+        );
+      document
+        .querySelector('#childTarget')
+        ?.addEventListener('click', () =>
+          childSideSheet?.open ? childSideSheet.close() : childSideSheet?.show()
+        );
+    },
+    { once: true }
+  );
+  return `
+        <cv-button id="parentTarget" raised>Open side sheet</cv-button>
+        <cv-side-sheet id="parentSideSheet" heading="Sample side sheet">
+            <cv-button id="childTarget" raised>Open child</cv-button>
+        </cv-side-sheet>
+        <cv-side-sheet id="childSideSheet" heading="Child side sheet" >
+        </cv-side-sheet>
+    `;
+};
+
+export const StatusHeader = () => {
+  document.addEventListener(
+    'DOMContentLoaded',
+    () => {
+      const sideSheet = document.querySelector('cv-side-sheet');
+      console.log(sideSheet);
+      document
+        .querySelector('cv-button')
+        ?.addEventListener('click', () =>
+          sideSheet?.open ? sideSheet.close() : sideSheet?.show()
+        );
+    },
+    { once: true }
+  );
+  return `
+        <style>
+            cv-side-sheet {
+                --cv-side-sheet-width: 800px;
+            }
+        </style>
+        <cv-button raised>Open side sheet</cv-button>
+        <cv-side-sheet noPadding>
+          ${ActiveStatusHeader({
+            state: 'active',
+            title: 'Example status from a side sheet',
+          })}
+          ${tableRowSelectionContent}
+        </cv-side-sheet>
+    `;
+};

package/src/side-sheet/side-sheet.ts

@@ -0,0 +1,37 @@
+import { css, unsafeCSS } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { styles } from '@material/mwc-dialog/mwc-dialog.css';
+import { CovalentDialog } from '../dialog/dialog';
+import baseStyles from './side-sheet.scss?inline';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'cv-side-sheet': CovalentSideSheet;
+  }
+}
+
+/**
+ * Side sheet element.
+ *
+ * @slot - This element has a slot
+ */
+@customElement('cv-side-sheet')
+export class CovalentSideSheet extends CovalentDialog {
+  static override styles = [
+    styles,
+    css`
+      ${unsafeCSS(baseStyles)}
+    `,
+  ];
+
+  @property({ type: Boolean, reflect: true })
+  pushed = false;
+
+  @property({ type: Boolean, reflect: true })
+  noPadding = false;
+
+  constructor() {
+    super();
+    this.hideActions = true;
+  }
+}

package/src/skeleton/_skeleton.styles.scss

@@ -0,0 +1,24 @@
+@mixin core-styles() {
+  .skeleton-text * {
+    font-family: skeleton, sans-serif !important;
+  }
+
+  .skeleton-text {
+    --mdc-typography-headline1-font-family: 'skeleton';
+    --mdc-typography-headline2-font-family: 'skeleton';
+    --mdc-typography-headline3-font-family: 'skeleton';
+    --mdc-typography-headline4-font-family: 'skeleton';
+    --mdc-typography-headline5-font-family: 'skeleton';
+    --mdc-typography-headline6-font-family: 'skeleton';
+    --mdc-typography-subtitle1-font-family: 'skeleton';
+    --mdc-typography-subtitle2-font-family: 'skeleton';
+    --mdc-typography-button-font-family: 'skeleton';
+    --mdc-typography-caption-font-family: 'skeleton';
+    --mdc-typography-overline-font-family: 'skeleton';
+    --mdc-typography-body1-font-family: 'skeleton';
+    --mdc-typography-body2-font-family: 'skeleton';
+    --mdc-typography-body2-letter-spacing: -0.03em;
+    --mdc-theme-text-primary-on-background: #cccccc;
+    --skeleton-color: #cccccc;
+  }
+}

package/src/skeleton/skeleton.stories.js

@@ -0,0 +1,77 @@
+import '../checkbox/checkbox';
+import '../formfield/formfield';
+
+import { Basic } from '../typography/typography.stories';
+import loremIpsumContent from '../../stories/demos/lorem-ipsum.content.html?raw';
+import tableProgressContent from '../../stories/demos/table-progress-indicator.content.html?raw';
+
+import 'skeleton-elements/css';
+
+export default {
+  title: 'Components/Skeleton',
+};
+
+const skeletonClsName = 'skeleton-text';
+const skeletonEffect = 'skeleton-effect-fade';
+
+export const DataTable = () => {
+  const container = document.createElement('div');
+  container.innerHTML = tableProgressContent;
+  const tableCell = container.getElementsByClassName('mdc-data-table__cell');
+  Array.from(tableCell).forEach((cell) => {
+    cell.classList.add(skeletonClsName);
+    cell.classList.add(skeletonEffect);
+  });
+
+  return container;
+};
+
+export const Typography = () => {
+  const container = document.createElement('div');
+  container.classList.add(skeletonClsName);
+  container.classList.add(skeletonEffect);
+  container.innerHTML = `${Basic()}`;
+
+  return container;
+};
+
+export const Content = () => {
+  const container = document.createElement('div');
+  container.classList.add(skeletonClsName);
+  container.classList.add(skeletonEffect);
+  container.innerHTML = loremIpsumContent;
+
+  return container;
+};
+
+export const Checkbox = ({ label = 'Bananas', indeterminate }) => {
+  const container = document.createElement('div');
+  container.innerHTML = `
+      <style>
+          cv-formfield {
+              display: block;
+          }
+          .child {
+              margin-left: 20px;
+          }
+      </style>
+      <cv-formfield label="${label}">
+          <cv-checkbox ${indeterminate ? `indeterminate` : null}></cv-checkbox>
+      </cv-formfield>
+      
+      <cv-formfield label="${label}">
+          <cv-checkbox class="child"></cv-checkbox>
+      </cv-formfield>
+      
+      <cv-formfield label="${label}">
+          <cv-checkbox class="child" checked></cv-checkbox>
+      </cv-formfield>`;
+
+  const labels = container.getElementsByTagName('cv-formfield');
+  Array.from(labels).forEach((label) => {
+    label.classList.add(skeletonClsName);
+    label.classList.add(skeletonEffect);
+  });
+
+  return container;
+};

package/src/slider/slider-range.ts

@@ -0,0 +1,16 @@
+import { SliderRangeBase } from '@material/mwc-slider/slider-range-base';
+import { styles } from '@material/mwc-slider/mwc-slider.css';
+import { customElement } from 'lit/decorators.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'cv-slider-range': CovalentSliderRange;
+  }
+}
+
+@customElement('cv-slider-range')
+export class CovalentSliderRange extends SliderRangeBase {
+  static override styles = [styles];
+}
+
+export default CovalentSliderRange;

package/src/slider/slider.spec.ts

@@ -0,0 +1,11 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { it, describe, expect } from 'vitest';
+import { CovalentSlider } from './slider';
+
+describe('Slider', () => {
+  it('should work', () => {
+    expect(new CovalentSlider()).toBeDefined();
+  });
+});

package/src/slider/slider.stories.js

@@ -0,0 +1,54 @@
+import './slider';
+import './slider-range';
+
+export default {
+  title: 'Components/Slider',
+  parameters: {
+    layout: 'padded',
+  },
+  args: {
+    discrete: false,
+    disabled: false,
+    markers: false,
+  },
+};
+
+const SingleTemplate = ({ discrete, disabled, markers, value = 10 }) => {
+  const progressBar = document.createElement('cv-slider');
+  progressBar.discrete = discrete;
+  progressBar.disabled = disabled;
+  progressBar.markers = markers;
+  progressBar.value = value;
+  progressBar.max = 50;
+  progressBar.min = 5;
+
+  if (markers) {
+    progressBar.step = 5;
+  }
+
+  return progressBar;
+};
+
+const RangeTemplate = ({ discrete, disabled, markers, value = 10 }) => {
+  const progressBar = document.createElement('cv-slider-range');
+  progressBar.discrete = discrete;
+  progressBar.disabled = disabled;
+  progressBar.markers = markers;
+  progressBar.valueStart = value;
+  progressBar.valueEnd = value + 10;
+
+  progressBar.max = 50;
+  progressBar.min = 5;
+
+  if (markers) {
+    progressBar.step = 5;
+  }
+
+  return progressBar;
+};
+
+export const Basic = SingleTemplate.bind({});
+Basic.args = {};
+
+export const Range = RangeTemplate.bind({});
+Range.args = {};

package/src/slider/slider.ts

@@ -0,0 +1,16 @@
+import { SliderSingleBase } from '@material/mwc-slider/slider-single-base';
+import { styles } from '@material/mwc-slider/mwc-slider.css';
+import { customElement } from 'lit/decorators.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'cv-slider': CovalentSlider;
+  }
+}
+
+@customElement('cv-slider')
+export class CovalentSlider extends SliderSingleBase {
+  static override styles = [styles];
+}
+
+export default CovalentSlider;

package/src/snackbar/snackbar.scss

@@ -0,0 +1,8 @@
+:host {
+  --mdc-snackbar-action-color: var(--mdc-theme-text-primary-on-dark);
+  --mdc-theme-text-primary-on-background: var(--mdc-theme-text-primary-on-dark);
+  
+  ::slotted(cv-icon-button) {
+    color: var(--mdc-theme-text-icon-on-dark);
+  }
+}

package/src/snackbar/snackbar.spec.ts

@@ -0,0 +1,11 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { it, describe, expect } from 'vitest';
+import { CovalentSnackbar } from './snackbar';
+
+describe('Snackbar', () => {
+  it('should work', () => {
+    expect(new CovalentSnackbar()).toBeDefined();
+  });
+});

package/src/snackbar/snackbar.stories.js

@@ -0,0 +1,42 @@
+import './snackbar';
+import '../button/button';
+import '../icon-button/icon-button';
+
+export default {
+  title: 'Components/Snackbar',
+  args: {
+    stacked: false,
+    leading: false,
+    label: "Can't send photo. Retry in 5 seconds.",
+  },
+};
+
+const Template = ({ label, leading, stacked }) => {
+  document.addEventListener(
+    'DOMContentLoaded',
+    () => {
+      const snackbar = document.querySelector('cv-snackbar');
+      const snackbarTarget = document.querySelector('.show-snackbar-button');
+
+      snackbarTarget.addEventListener('click', () => {
+        return snackbar.open ? snackbar.close() : snackbar.show();
+      });
+    },
+    { once: true }
+  );
+
+  return `
+    <cv-button class="show-snackbar-button">Toggle snackbar</cv-button>
+    <cv-snackbar
+       class="my-snackbar"
+       labelText="${label}"
+       ${leading ? 'leading' : ''}
+       ${stacked ? 'stacked' : ''}
+       open>
+      <cv-button slot="action">Retry</cv-button>
+      <cv-icon-button icon="close" slot="dismiss"></cv-icon-button>
+    </cv-snackbar>`;
+};
+
+export const Basic = Template.bind({});
+Basic.args = {};

package/src/snackbar/snackbar.ts

@@ -0,0 +1,18 @@
+import { css, unsafeCSS } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { SnackbarBase } from '@material/mwc-snackbar/mwc-snackbar-base';
+import { styles as baseStyles } from '@material/mwc-snackbar/mwc-snackbar.css';
+import styles from './snackbar.scss?inline';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'cv-snackbar': CovalentSnackbar;
+  }
+}
+
+@customElement('cv-snackbar')
+export class CovalentSnackbar extends SnackbarBase {
+  static override styles = [baseStyles, css`${unsafeCSS(styles)}`];
+}
+
+export default CovalentSnackbar;