@covalent/components 0.0.0-COVALENT

package/src/button/Overview.mdx

@@ -0,0 +1,160 @@
+import { Canvas, DocsContainer, Meta, Story } from '@storybook/blocks';
+import * as ButtonStories from './button.stories';
+
+<Meta of={ButtonStories} />
+
+<style>
+  {`
+    cv-button {
+      margin-right: 8px;
+    }
+    .docs-story div:first-of-type {
+      text-align: center;
+    }
+    #story--example-button--outlined,
+    #story--example-button--text {
+      margin-right: 8px;
+    }
+    cv-button[outlined].destructive {
+      margin-right: 4rem;
+    }
+    `}
+</style>
+
+# Buttons
+
+## Basics
+
+- Each page can have only one primary action button
+- It is common and okay for some pages to have no primary action
+- Include an icon in your button only in specific circumstances
+
+<Canvas>
+  <cv-button label="Text button" />
+
+{' '}
+<cv-button label="Outlined button" outlined />
+
+  <cv-button label="Contained button" raised />
+</Canvas>
+
+---
+
+## Anatomy
+
+Buttons contain a text label and optional icon.
+
+<Canvas>
+  <cv-button id="no-icon" raised label="No icon" />
+
+{' '}
+<cv-button id="left-icon" raised label="Left icon" icon="sailing" />
+
+  <cv-button id="right-icon" raised label="Right icon" icon="sailing" trailingIcon="true" />
+</Canvas>
+
+### Spacing
+
+Separate all buttons with an 8px gap.
+
+<Canvas>
+  <cv-button outlined label="Button" />
+
+{' '}
+<cv-button outlined label="Button" />
+
+  <cv-button outlined label="Button" />
+</Canvas>
+
+---
+
+## Placement
+
+Place the primary action to the right, followed by secondary actions.
+
+#### Sequence
+
+1. Primary action button (if any)
+
+   Many pages will not have primary actions. This is OK.
+
+2. Secondary action buttons
+
+3. Lesser functions as icon buttons
+
+<Canvas>
+  <cv-button outlined label="Button" />
+
+{' '}
+<cv-button outlined label="Button" />
+
+  <cv-button raised label="Primary" class="primary accent" />
+</Canvas>
+
+### In footers
+
+In footers (such as card, dialog, page, or sheet footers) align all buttons to the right, but place destructive actions to the left to minimize accidental clicks.
+
+<Canvas>
+  <cv-button outlined label="Delete" class="destructive" />
+
+{' '}
+<cv-button outlined label="Button" />
+
+  <cv-button raised label="Primary" class="primary accent" />
+</Canvas>
+
+---
+
+## Styling
+
+Use “default” outline buttons for everything except the primary action (if any).
+
+<Canvas>
+  <cv-button outlined label="Button" />
+
+  <cv-button outlined label="Button" />
+</Canvas>
+
+### Primary action
+
+If the page has a primary action, use an “accent” contained button.
+
+<Canvas>
+  <cv-button outlined label="Button" />
+
+{' '}
+<cv-button outlined label="Button" />
+
+  <cv-button raised label="Primary" class="primary accent" />
+</Canvas>
+
+### Destructive action
+
+#### When the primary action is destructive
+
+If the primary action is a destructive one (for example, it deletes some data), then it uses the negative color.
+
+<Canvas>
+  <form>
+    <cv-button outlined label="Button" />
+
+    <cv-button outlined label="Button" />
+
+    <cv-button raised label="Delete" color="negative" />
+
+  </form>
+</Canvas>
+
+#### When the destructive action is not the primary action
+
+If the destructive action is not the primary action, do not use the negative color. This calls extra attention to it, and we want the focus to remain on the primary action.
+
+<Canvas>
+  <cv-button outlined label="Delete" class="destructive" />
+
+{' '}
+<cv-button outlined label="Button" />
+
+  <cv-button raised label="Primary" />
+</Canvas>

package/src/button/button.scss

@@ -0,0 +1,28 @@
+:host {
+  // override MDC button color
+  --mdc-button-outline-color: var(--cv-theme-outline);
+  // override MDC button text tranform
+  --mdc-typography-button-text-transform: none;
+}
+
+@mixin buttonColor($colorMap) {
+  @each $color, $value in $colorMap {
+    :host([color='#{$color}']) {
+      --mdc-theme-primary: var(--cv-theme-#{$value});
+      --mdc-theme-on-primary: var(--cv-theme-on-#{$value});
+    }
+  }
+}
+
+// --- apply button color --- //
+@include buttonColor(
+  (
+    'primary': 'primary',
+    'secondary': 'secondary',
+    'emphasis': 'emphasis',
+    'neutral': 'neutral',
+    'caution': 'caution',
+    'negative': 'negative',
+    'positive': 'positive',
+  )
+);

package/src/button/button.spec.ts

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

package/src/button/button.stories.js

@@ -0,0 +1,102 @@
+import './button';
+
+export default {
+  title: 'Components/Button',
+  args: {
+    label: 'Button',
+    icon: 'houseboat',
+    showIcon: false,
+    trailingIcon: false,
+    disabled: false,
+    dense: false,
+  },
+  argTypes: {
+    style: {
+      options: ['raised', 'outlined'],
+      control: { type: 'select' },
+    },
+    color: {
+      options: [
+        'primary',
+        'secondary',
+        'emphasis',
+        'positive',
+        'negative',
+        'caution',
+      ],
+      control: { type: 'select' },
+    },
+  },
+};
+
+const Template = ({
+  label,
+  showIcon,
+  trailingIcon,
+  icon,
+  style,
+  color,
+  disabled,
+  dense,
+}) => {
+  return `<cv-button id="myButton"
+                      label="${label}"
+                      ${showIcon && trailingIcon ? `trailingIcon` : ''}
+                      ${showIcon && icon ? `icon="${icon}"` : ''}
+                      ${dense ? 'dense' : ''}
+                      ${disabled ? 'disabled' : ''}
+                      ${style}
+                      ${color ? `color="${color}"` : ''}>         
+        </cv-button>`;
+};
+
+export const Contained = Template.bind({});
+Contained.args = {
+  style: 'raised',
+};
+
+export const Outlined = Template.bind({});
+Outlined.args = {
+  style: 'outlined',
+};
+
+export const Text = Template.bind({});
+Text.args = {
+  style: 'text',
+};
+
+export const secondary = Template.bind({});
+secondary.args = {
+  style: 'raised',
+  color: 'secondary',
+};
+
+export const emphasis = Template.bind({});
+emphasis.args = {
+  style: 'raised',
+  color: 'emphasis',
+};
+
+export const caution = Template.bind({});
+caution.args = {
+  style: 'raised',
+  color: 'caution',
+};
+
+export const negative = Template.bind({});
+negative.args = {
+  style: 'raised',
+  color: 'negative',
+};
+
+export const positive = Template.bind({});
+positive.args = {
+  style: 'raised',
+  color: 'positive',
+};
+
+export const dense = Template.bind({});
+dense.args = {
+  dense: true,
+  style: 'raised',
+};

package/src/button/button.ts

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

package/src/card/card-base.ts

@@ -0,0 +1,69 @@
+import { html, LitElement } from 'lit';
+import { classMap } from 'lit/directives/class-map.js';
+import { property } from 'lit/decorators.js';
+
+export class CardBase extends LitElement {
+  /**
+   * The title of the card
+   */
+  @property()
+  cardTitle = '';
+
+  /**
+   * The sub-title of the card
+   */
+  @property()
+  subTitle = '';
+
+  /**
+   * Displays the action bar
+   */
+  @property({ type: Boolean }) actionBar = false;
+
+  /**
+   * Displays the ripple affect in primary area
+   */
+  @property({ type: Boolean }) interactive = false;
+
+  /**
+   * Style the card as an outline variant
+   */
+  @property({ type: Boolean }) outlined = false;
+
+  /**
+   * Style the card 100% height
+   */
+  @property({ type: Boolean }) fullHeight = false;
+
+  override render() {
+    const classes = {
+      'mdc-card': true,
+      'mdc-card--outlined': this.outlined,
+      'cv-height-full': this.fullHeight,
+    };
+    return html` <div class="${classMap(classes)}">
+      ${this.cardTitle
+        ? html`
+            <div class="mdc-card__actions mdc-typography--headline5">
+              ${this.cardTitle}
+            </div>
+          `
+        : ''}
+      ${this.interactive
+        ? html`
+            <div class="mdc-card__primary-action">
+              <slot></slot>
+              <div class="mdc-card__ripple"></div>
+            </div>
+          `
+        : html`<slot></slot>`}
+      ${this.actionBar
+        ? html`
+            <div class="mdc-card__actions">
+              <slot name="card-actions"></slot>
+            </div>
+          `
+        : ''}
+    </div>`;
+  }
+}

package/src/card/card.scss

@@ -0,0 +1,45 @@
+@use '@material/card';
+
+@include card.core-styles;
+
+:host([fullHeight]) {
+  display: block;
+  height: 100%;
+}
+
+.mdc-card {
+  --mdc-theme-surface: var(--cv-theme-surface-container-lowest, #ffffff);
+
+  box-shadow: none;
+
+  &.cv-height-full {
+    height: 100%;
+
+    .mdc-card__primary-action {
+      height: 100%;
+    }
+  }
+}
+
+.mdc-typography--headline5 {
+  font-family: var(--mdc-typography-headline5-font-family);
+  font-size: var(--mdc-typography-headline5-font-size);
+  font-weight: var(--mdc-typography-headline5-font-weight);
+  line-height: var(--mdc-typography-headline5-line-height);
+  color: var(--mdc-theme-text-primary-on-background);
+}
+
+.mdc-card__actions {
+  color: var(--mdc-theme-text-primary-on-background);
+  justify-content: space-between;
+}
+
+.mdc-card__actions:first-of-type {
+  border-bottom: 1px solid var(--mdc-theme-border);
+  padding-left: 16px;
+}
+
+.mdc-card.mdc-card--outlined {
+  background-color: var(--mdc-theme-surface);
+  border-color: var(--cv-theme-outline-variant);
+}

package/src/card/card.spec.ts

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

package/src/card/card.ts

@@ -0,0 +1,21 @@
+import { css, unsafeCSS } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { CardBase } from './card-base';
+import styles from './card.scss?inline';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'cv-card': CovalentCard;
+  }
+}
+
+@customElement('cv-card')
+export class CovalentCard extends CardBase {
+  static override styles = [
+    css`
+      ${unsafeCSS(styles)}
+    `,
+  ];
+}
+
+export default CovalentCard;

package/src/card/cards.stories.js

@@ -0,0 +1,40 @@
+import './card';
+import tableContent from '../../stories/demos/table.content.html?raw';
+import '../data-table/data-table.stories.scss';
+
+export default {
+  title: 'Components/Cards',
+  args: {
+    cardTitle: 'Card title',
+    outlined: false,
+    actionBar: false,
+    fullHeight: false,
+  },
+};
+
+export const Basic = ({ outlined, fullHeight, actionBar, cardTitle }) => {
+  return `
+  <cv-card 
+    cardTitle='${cardTitle}'
+    ${actionBar ? 'actionBar' : ''}
+    ${outlined ? 'outlined' : ''}
+    ${fullHeight ? 'fullHeight' : ''}
+  >
+    ${tableContent}
+    <div slot="card-actions" class="mdc-card__action-buttons">
+      <cv-button label="Action 1"></cv-button>
+      <cv-button label="Action 2"></cv-button>
+    </div>
+    <div slot="card-actions" class="mdc-card__action-icons">
+      <cv-icon-button icon="share"></cv-icon-button>
+      <cv-icon-button icon="more_vert"></cv-icon-button>
+    </div>
+  </cv-card>
+  `;
+};
+
+export const Outline = Basic.bind({});
+Outline.args = {
+  outlined: true,
+  cardTitle: '',
+};

package/src/checkbox/checkbox.scss

@@ -0,0 +1,8 @@
+
+
+:host {
+  --mdc-checkbox-checked-color: var(--mdc-theme-primary);
+  --mdc-checkbox-disabled-color: var(--mdc-theme-text-disabled-on-background);
+  --mdc-checkbox-ink-color: var(--mdc-theme-on-primary);
+  --mdc-checkbox-unchecked-color: var(--mdc-theme-text-icon-on-background);
+}

package/src/checkbox/checkbox.spec.ts

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

package/src/checkbox/checkbox.stories.js

@@ -0,0 +1,61 @@
+import './checkbox';
+import '../formfield/formfield';
+
+export default {
+  title: 'Components/Checkbox',
+  argTypes: {},
+};
+
+const Template = ({ label = 'Bananas', disabled }) => {
+  return `<cv-checkbox
+                aria-label="${label}"
+                ${disabled ? `disabled` : null}>
+            </cv-checkbox>
+            <cv-checkbox
+                aria-label="${label}"
+                checked
+                ${disabled ? `disabled` : null}>
+            </cv-checkbox>
+            <cv-checkbox
+                aria-label="${label}"
+                indeterminate
+                ${disabled ? `disabled` : null}>
+            </cv-checkbox>`;
+};
+
+const LabelTemplate = ({ label = 'Bananas', indeterminate }) => {
+  return `
+            <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>`;
+};
+
+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/checkbox/checkbox.ts

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