@covalent/components 0.0.0-COVALENT

package/src/icon/icon.stories.js

@@ -0,0 +1,55 @@
+import './icon';
+import './icon-demo';
+import { MAT_ICON_LIST, COV_ICON_LIST } from './_icon-list';
+
+export default {
+  title: 'Components/Icon',
+  argTypes: {
+    icon: {
+      options: MAT_ICON_LIST,
+      control: { type: 'select' },
+    },
+    size: {
+      options: ['64px', '48px', '24px', '16px'],
+      control: { type: 'select' },
+    },
+  },
+  args: {
+    icon: 'houseboat',
+    size: '48px',
+  },
+};
+
+const Template = ({ icon, size }, ...args) => {
+  const icoElem = document.createElement('cv-icon');
+  icoElem.innerText = icon;
+  icoElem.style.fontSize = size;
+
+  if (args[0].parameters.showCovIcons) {
+    icoElem.setAttribute('iconFont', 'covalent-icons');
+  }
+
+  return icoElem;
+};
+
+const AllCovalentIconsTemplate = () => {
+  return `<cv-icon-demo></cv-icon-demo>`;
+};
+
+export const MaterialIcons = Template.bind({});
+
+export const CovalentIcons = Template.bind({});
+CovalentIcons.parameters = {
+  showCovIcons: true,
+};
+
+CovalentIcons.argTypes = {
+  icon: {
+    options: COV_ICON_LIST,
+  },
+};
+CovalentIcons.args = {
+  icon: 'product_editor',
+};
+
+export const AllCovalentIcons = AllCovalentIconsTemplate.bind({});

package/src/icon/icon.ts

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

package/src/icon-button/_icon-button.theme.scss

@@ -0,0 +1,9 @@
+@use '@material/icon-button';
+
+@mixin icon-button-theme($theme) {
+  $icon: map-get($theme, text-icon-on-background);
+
+  .mdc-icon-button {
+    @include icon-button.ink-color($icon);
+  }
+}

package/src/icon-button/icon-button.scss

@@ -0,0 +1,12 @@
+:host {
+  color: var(--mdc-theme-text-icon-on-background);
+
+  .mdc-icon-button {
+    cursor: var(--cv-icon-button-cursor, pointer);
+
+    &:active,
+    &:focus {
+      font-variation-settings: 'FILL' 1;
+    }
+  }
+}

package/src/icon-button/icon-button.spec.ts

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

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

@@ -0,0 +1,24 @@
+import './icon-button';
+import iconList from '../../../icons/material-codepoints.json';
+
+export default {
+  title: 'Components/Icon Button',
+  argTypes: {
+    icon: {
+      control: 'select',
+      options: Object.keys(iconList),
+    },
+  },
+  args: {
+    icon: 'houseboat',
+    disabled: false,
+  },
+};
+
+const Template = ({ disabled, icon }) => {
+  return `
+    <cv-icon-button icon="${icon}" ${disabled ? `disabled` : ``}>
+    </cv-icon-button>`;
+};
+
+export const Basic = Template.bind({});

package/src/icon-button/icon-button.ts

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

package/src/icon-button-toggle/icon-button-toggle.scss

@@ -0,0 +1,19 @@
+:host {
+  border-radius: 50%;
+  color: var(--cv-theme-on-surface-variant);
+}
+
+:host([disabled]) {
+  background-color: transparent;
+}
+
+:host([on]) {
+  --mdc-ripple-color: var(--cv-theme-on-surface);
+
+  background-color: var(--cv-theme-secondary-container);
+  color: var(--cv-theme-on-secondary-container);
+
+  .material-icons {
+    font-variation-settings: 'FILL' 1;
+  }
+}

package/src/icon-button-toggle/icon-button-toggle.spec.ts

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

package/src/icon-button-toggle/icon-button-toggle.stories.js

@@ -0,0 +1,32 @@
+import './icon-button-toggle';
+import iconList from '../../../icons/material-codepoints.json';
+
+export default {
+  title: 'Components/Icon Button Toggle',
+  argTypes: {
+    onIcon: {
+      control: 'select',
+      options: Object.keys(iconList),
+    },
+    offIcon: {
+      control: 'select',
+      options: Object.keys(iconList),
+    },
+  },
+  args: {
+    onIcon: 'flashlight_on',
+    offIcon: 'flashlight_off',
+    disabled: false,
+    toggledOn: false,
+  },
+};
+
+const Template = ({ disabled, onIcon, offIcon, toggledOn }) => {
+  return `
+    <cv-icon-button-toggle onIcon="${onIcon}" offIcon="${offIcon}"${
+    disabled ? ` disabled` : ``
+  }${toggledOn ? ' toggledOn' : ''}>
+    </cv-icon-button-toggle>`;
+};
+
+export const Basic = Template.bind({});

package/src/icon-button-toggle/icon-button-toggle.ts

@@ -0,0 +1,50 @@
+import { css, html, PropertyValues, unsafeCSS } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { IconButtonToggle } from '@material/mwc-icon-button-toggle/mwc-icon-button-toggle';
+import styles from './icon-button-toggle.scss?inline';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'cv-icon-button-toggle': CovalentIconButtonToggle;
+  }
+}
+
+@customElement('cv-icon-button-toggle')
+export class CovalentIconButtonToggle extends IconButtonToggle {
+  /**
+   * Angular doesn't allow properties that begin with 'on' to be set due to security reasons.
+   * This is an alias for the 'on' property in mwc-icon-button-toggle, which can be used to toggle the button on/off.
+   */
+  @property({ type: Boolean, reflect: true })
+  toggledOn = false;
+
+  static override styles = [
+    ...IconButtonToggle.styles,
+    css`
+      ${unsafeCSS(styles)}
+    `,
+  ];
+
+  protected update(changedProperties: PropertyValues) {
+    if (changedProperties.has('toggledOn') && this.toggledOn !== this.on) {
+      this.on = this.toggledOn;
+    }
+    if (changedProperties.has('on') && this.toggledOn !== this.on) {
+      this.toggledOn = this.on;
+    }
+    super.update(changedProperties);
+  }
+
+  protected renderRipple() {
+    return this.shouldRenderRipple
+      ? html` <mwc-ripple
+          .disabled="${this.disabled}"
+          .activated="${this.toggledOn}"
+          unbounded
+        >
+        </mwc-ripple>`
+      : '';
+  }
+}
+
+export default CovalentIconButtonToggle;

package/src/icon-checkbox/icon-check-toggle.ts

@@ -0,0 +1,64 @@
+import { css, html, unsafeCSS } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { styleMap } from 'lit/directives/style-map.js';
+import { CheckboxBase } from '@material/mwc-checkbox/mwc-checkbox-base';
+import { styles as checkboxStyle } from '@material/mwc-checkbox/mwc-checkbox.css';
+import styles from './icon-checkbox.scss?inline';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'cv-icon-check-item': CovalentIconCheckToggle;
+  }
+}
+
+@customElement('cv-checkbox-icon')
+export class CovalentIconCheckToggle extends CheckboxBase {
+  static override styles = [
+    css`
+      ${unsafeCSS(styles)}
+    `,
+    checkboxStyle,
+  ];
+
+  @property() width: number | string = '200';
+  @property() height: number | string = '160';
+  @property({ type: Boolean }) iconOnly = false;
+
+  @query('.container') declare protected mdcRoot: HTMLElement;
+
+  override render() {
+    const classes = {
+      checked: this.checked,
+      cornerFill: this.checked,
+    };
+    const checkmark = {
+      showCheck: this.checked,
+    };
+    const styles = {
+      '--width': this.width == 'fill' ? '100%' : `${this.width}px`,
+      '--height': `${this.height}px`,
+    };
+    return html`
+        <div class="${classMap(classes)} container" style="${styleMap(styles)}" @click="${this._handleClick}">
+            <input type="checkbox" class="mdc-checkbox__native-control"></input>
+            <div class="mdc-toggle__background">
+                <svg class="mdc-toggle__checkmark ${classMap(
+                  checkmark,
+                )}" viewBox="0 0 24 24">
+                    <path class="mdc-toggle__checkmark-path ${classMap(
+                      checkmark,
+                    )}" fill="none" d="M1.73,12.91 8.1,19.28 22.79,4.59"></path>
+                </svg>
+            </div>
+            <slot name="icon"></slot>
+            ${this.iconOnly ? '' : html`<div><slot name="text"></slot></div>`}
+        </div>
+    `;
+  }
+  private _handleClick() {
+    this.checked = !this.checked;
+  }
+}
+
+export default CovalentIconCheckToggle;

package/src/icon-checkbox/icon-check.spec.ts

@@ -0,0 +1,11 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { it, describe, expect } from 'vitest';
+import { CovalentIconCheckToggle } from './icon-check-toggle';
+
+describe('Icon check', () => {
+  it('should work', () => {
+    expect(new CovalentIconCheckToggle()).toBeDefined();
+  });
+});

package/src/icon-checkbox/icon-checkbox.scss

@@ -0,0 +1,95 @@
+@use '@material/ripple';
+
+:host {
+  .mdc-toggle__background {
+    position: absolute;
+    top: 4px;
+    right: 4px;
+    width: 15px;
+    height: 15px;
+    border: none;
+    color: var(--mdc-theme-on-primary);
+  }
+
+  .mdc-toggle__checkmark-path {
+    transition: stroke-dashoffset 180ms cubic-bezier(0.4, 0, 0.6, 1) 0ms;
+    stroke: currentcolor;
+    stroke-width: 3.12px;
+    stroke-dashoffset: 29.7833;
+    stroke-dasharray: 29.7833;
+  }
+
+  .showCheck {
+    stroke-dashoffset: 0;
+    opacity: 1;
+  }
+}
+
+:host([width='fill']) {
+  width: 100%;
+}
+
+.container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  text-align: center;
+  row-gap: 8px;
+  width: var(--width);
+  height: var(--height);
+  border: solid 2px var(--mdc-theme-border);
+  border-radius: 8px;
+  color: var(--mdc-theme-text-primary-on-background);
+  @include ripple.surface;
+  @include ripple.radius-unbounded;
+  @include ripple.states;
+}
+
+.container::after,
+.container::before {
+  border-radius: 8px;
+}
+
+.container:hover {
+  cursor: pointer;
+}
+
+.cornerFill {
+  background: linear-gradient(
+    225deg,
+    var(--mdc-theme-primary) 28px,
+    transparent 0
+  );
+}
+
+.checked {
+  border: solid 2px var(--mdc-theme-primary);
+  background-color: var(--mdc-theme-surface-primary-highlight);
+}
+
+.checked:hover {
+  background-color: var(--mdc-theme-surface-primary-highlight-hover);
+}
+
+[name='icon']::slotted(*) {
+  font-size: 40px;
+  color: var(--mdc-theme-text-icon-on-background);
+}
+
+[name='text']::slotted(*) {
+  color: var(--mdc-theme-text-primary-on-background);
+  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);
+  letter-spacing: 0.4px;
+}
+
+[name='text']::slotted(*:last-child) {
+  color: var(--mdc-theme-text-secondary-on-background);
+  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);
+}

package/src/icon-checkbox/icon-checkbox.stories.js

@@ -0,0 +1,77 @@
+import './icon-check-toggle';
+import '../icon/icon';
+
+export default {
+  title: 'Components/Icon Checkbox',
+  args: {
+    width: 200,
+    height: 160,
+    iconOnly: false,
+  },
+};
+
+export const Template = ({ width, height, iconOnly }) => {
+  return `
+  <cv-checkbox-icon  ${iconOnly ? ' iconOnly' : ''}>
+        <cv-icon slot="icon">work</cv-icon>
+        <div slot="text">Balanced</div>
+        <div slot="text">Every week</div>
+      </cv-checkbox-icon>
+      <cv-checkbox-icon  ${iconOnly ? 'iconOnly' : ''}>
+        <cv-icon slot="icon">work</cv-icon>
+        <div slot="text">Balanced</div>
+        <div slot="text">Every week</div>
+      </cv-checkbox-icon>
+  `;
+};
+
+const GridExample = ({ iconOnly }) => {
+  return `
+  <div class="mdc-layout-grid">
+  <div class="mdc-layout-grid__inner">
+    <cv-checkbox-icon ${
+      iconOnly ? 'iconOnly' : ''
+    } class="mdc-layout-grid__cell">
+          <cv-icon slot="icon">storage</cv-icon>
+          <div slot="text">Data</div>
+        </cv-checkbox-icon>
+        <cv-checkbox-icon ${
+          iconOnly ? 'iconOnly' : ''
+        } class="mdc-layout-grid__cell">
+          <cv-icon slot="icon">description</cv-icon>
+          <div slot="text">Files</div>
+        </cv-checkbox-icon>
+        <cv-checkbox-icon ${
+          iconOnly ? 'iconOnly' : ''
+        } class="mdc-layout-grid__cell">
+          <cv-icon slot="icon">bookmark</cv-icon>
+          <div slot="text">Articles</div>
+        </cv-checkbox-icon>
+        <cv-checkbox-icon ${
+          iconOnly ? 'iconOnly' : ''
+        } class="mdc-layout-grid__cell">
+          <cv-icon slot="icon">folder</cv-icon>
+          <div slot="text">Projects</div>
+        </cv-checkbox-icon>
+        <cv-checkbox-icon ${
+          iconOnly ? 'iconOnly' : ''
+        } class="mdc-layout-grid__cell">
+          <cv-icon slot="icon">assignment</cv-icon>
+          <div slot="text">Notebooks</div>
+        </cv-checkbox-icon>
+        <cv-checkbox-icon ${
+          iconOnly ? 'iconOnly' : ''
+        } class="mdc-layout-grid__cell">
+          <cv-icon slot="icon" >receipt_long</cv-icon>
+          <div slot="text">Scripts</div>
+        </cv-checkbox-icon>
+        </div>
+        </div>
+  `;
+};
+
+export const WithGrid = GridExample.bind({});
+WithGrid.args = {
+  width: '105',
+  height: '100',
+};

package/src/icon-lockup/icon-lockup.scss

@@ -0,0 +1,47 @@
+.filled {
+  font-variation-settings: 'FILL' 1;
+}
+
+.hidden {
+  display: none;
+}
+
+.icon-lockup {
+  align-items: center;
+  display: flex;
+  gap: 4px;
+  max-width: 100%;
+
+  cv-typography {
+    flex: 1 0 0;
+  }
+}
+
+.icon-lockup--primary,
+.icon-lockup--loading {
+  color: var(--cv-theme-primary);
+}
+
+.icon-lockup--positive {
+  color: var(--cv-theme-positive);
+}
+
+.icon-lockup--negative {
+  color: var(--cv-theme-negative);
+}
+
+.icon-lockup--caution {
+  color: var(--cv-theme-caution);
+}
+
+.text {
+  font-feature-settings: 'liga' off, 'clig' off;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.trailing-icon {
+  flex-direction: row-reverse;
+}

package/src/icon-lockup/icon-lockup.spec.ts

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

package/src/icon-lockup/icon-lockup.stories.js

@@ -0,0 +1,93 @@
+import './icon-lockup';
+import '../circular-progress/circular-progress';
+
+export default {
+  title: 'Components/Icon lockup',
+  argTypes: {
+    scale: {
+      options: [
+        'headline1',
+        'headline2',
+        'headline3',
+        'headline4',
+        'headline5',
+        'headline6',
+        'subtitle1',
+        'subtitle2',
+        'button',
+        'caption',
+        'overline',
+        'body1',
+        'body2',
+      ],
+      control: { type: 'select' },
+    },
+    state: {
+      options: ['primary', 'positive', 'negative', 'caution', null],
+      control: { type: 'select' },
+    },
+  },
+  args: {
+    covalentIcon: false,
+    filledIcon: false,
+    icon: 'houseboat',
+    scale: 'body1',
+    state: 'null',
+    trailingIcon: false,
+  },
+};
+
+const Template = ({
+  icon,
+  scale,
+  trailingIcon,
+  state,
+  covalentIcon,
+  filledIcon,
+}) => {
+  return `<cv-icon-lockup icon="${icon}" scale="${scale}"${
+    trailingIcon ? ' trailingIcon' : ''
+  }${covalentIcon ? ' covalentIcon' : ''}${filledIcon ? ' filledIcon' : ''}${
+    state ? ` state=${state}` : ''
+  }>Lorem ipsum dolor sit amet</cv-icon-lockup>`;
+};
+
+const LoadingTemplate = ({ scale, trailingIcon, state }) => {
+  return `<cv-icon-lockup scale="${scale}"${
+    trailingIcon ? ' trailingIcon' : ''
+  }${state ? ` state=${state}` : ''}>Lorem ipsum dolor sit amet
+    <cv-circular-progress indeterminate slot="icon" density="-6"></cv-circular-progress>
+  </cv-icon-lockup>`;
+};
+
+export const Basic = Template.bind({});
+
+export const Primary = Template.bind({});
+Primary.args = {
+  state: 'primary',
+};
+
+export const Positive = Template.bind({});
+Positive.args = {
+  state: 'positive',
+  icon: 'check',
+};
+
+export const Negative = Template.bind({});
+Negative.args = {
+  state: 'negative',
+  icon: 'error',
+  filledIcon: true,
+};
+
+export const Caution = Template.bind({});
+Caution.args = {
+  state: 'caution',
+  icon: 'warning',
+  filledIcon: true,
+};
+
+export const Loading = LoadingTemplate.bind({});
+Loading.args = {
+  state: 'primary',
+};