@covalent/components 0.0.0-COVALENT

package/project.json

@@ -0,0 +1,104 @@
+{
+  "name": "components",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "libs/components/src",
+  "projectType": "library",
+  "implicitDependencies": ["tokens"],
+  "targets": {
+    "serve": {
+      "executor": "nx:run-commands",
+      "options": {
+        "commands": ["cd libs/components/ && vite"],
+        "parallel": false
+      }
+    },
+    "build": {
+      "executor": "nx:run-commands",
+      "options": {
+        "customWebpackConfig": {
+          "path": "./monaco-webpack.config.js",
+          "mergeRules": {
+            "module.rules": "prepend"
+          }
+        },
+        "commands": [
+          "mkdir -p dist/libs/components/",
+          "vite build --config libs/components/vite.config.js  --outDir dist/libs/components",
+          "./node_modules/.bin/tsc --project libs/components/tsconfig.lib.json  --declaration --declarationMap --emitDeclarationOnly --outDir dist/libs/components",
+          "cp libs/components/package.json dist/libs/components"
+        ],
+        "parallel": false
+      },
+      "outputs": ["{workspaceRoot}/dist/libs/components"]
+    },
+    "build-scss": {
+      "executor": "nx:run-commands",
+      "options": {
+        "commands": [
+          "mkdir -p dist/libs/components/theme/prebuilt",
+          "cp libs/components/src/index.scss dist/libs/components",
+          "cp libs/components/src/theme/_index.scss dist/libs/components/theme",
+          "./node_modules/.bin/sass --trace --color --style=compressed --load-path=node_modules ./libs/components/src/theme/prebuilt:./dist/libs/components/theme/prebuilt"
+        ],
+        "parallel": false
+      },
+      "outputs": ["{workspaceRoot}/dist/libs/components/theme"],
+      "dependsOn": ["build"]
+    },
+    "test": {
+      "executor": "nx:run-commands",
+      "options": {
+        "commands": ["vitest -r libs/components -c vite.config.js -w false"],
+        "parallel": false
+      },
+      "coverage": {
+        "dir": "coverage/libs/components"
+      }
+    },
+    "lint": {
+      "executor": "@nx/eslint:lint",
+      "outputs": ["{options.outputFile}"],
+      "options": {
+        "lintFilePatterns": ["libs/components/**/*.ts"]
+      }
+    },
+    "scsslint": {
+      "executor": "nx:run-commands",
+      "options": {
+        "commands": [
+          {
+            "command": "./node_modules/.bin/stylelint --allow-empty-input 'libs/components/**/*.scss'"
+          }
+        ]
+      }
+    },
+    "storybook": {
+      "executor": "nx:run-commands",
+      "options": {
+        "commands": [
+          {
+            "command": "storybook dev -c libs/components/.storybook"
+          }
+        ]
+      }
+    },
+    "build-storybook": {
+      "executor": "nx:run-commands",
+      "options": {
+        "commands": [
+          {
+            "command": "storybook build -c libs/components/.storybook -o dist/storybook/components"
+          }
+        ]
+      }
+    },
+    "build-exports": {
+      "executor": "nx:run-commands",
+      "options": {
+        "commands": ["node ./scripts/export-components"],
+        "parallel": false
+      }
+    }
+  },
+  "tags": []
+}

package/public/index.scss

@@ -0,0 +1 @@
+@import '../../icons/covalent-icons.css';

package/public/reset.css

@@ -0,0 +1,128 @@
+/* http://meyerweb.com/eric/tools/css/reset/ 
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+}
+/* HTML5 display-role reset for older browsers */
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
+  display: block;
+}
+body {
+  line-height: 1;
+}
+ol,
+ul {
+  list-style: none;
+}
+blockquote,
+q {
+  quotes: none;
+}
+blockquote:before,
+blockquote:after,
+q:before,
+q:after {
+  content: '';
+  content: none;
+}
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}

package/src/action-ribbon/_action-ribbon.theme.scss

@@ -0,0 +1,90 @@
+@mixin theme() {
+  .mdc-banner {
+    --cv-action-ribbon-background: transparent;
+
+    background-color: var(--cv-action-ribbon-background);
+    overflow: hidden;
+
+    .mdc-banner__content {
+      max-width: inherit;
+    }
+
+    .mdc-banner__graphic,
+    .mdc-banner__text {
+      --mdc-theme-on-surface: var(--cv-theme-on-surface-38);
+
+      color: var(--mdc-theme-on-surface);
+    }
+
+    .mdc-banner__text {
+      margin-left: 16px;
+      font-family: var(--mdc-typography-caption-font-family);
+      font-size: var(--mdc-typography-caption-font-size);
+      font-weight: var(--mdc-typography-caption-font-weight);
+      line-height: var(--mdc-typography-caption-line-height);
+    }
+
+    &.caution {
+      --cv-action-ribbon-background: var(--cv-theme-caution-8);
+
+      .mdc-banner__graphic,
+      .mdc-banner__text {
+        --mdc-theme-on-surface: var(--mdc-theme-caution);
+      }
+    }
+
+    &.negative {
+      --cv-action-ribbon-background: var(--cv-theme-negative-8);
+
+      .mdc-banner__graphic,
+      .mdc-banner__text {
+        --mdc-theme-on-surface: var(--mdc-theme-negative);
+      }
+    }
+
+    &.active {
+      --cv-action-ribbon-background: var(--cv-theme-primary-8);
+
+      .mdc-banner__graphic,
+      .mdc-banner__text {
+        --mdc-theme-on-surface: var(--cv-theme-primary);
+      }
+    }
+
+    &.positive {
+      --cv-action-ribbon-background: var(--cv-theme-positive-8);
+
+      .mdc-banner__graphic,
+      .mdc-banner__text {
+        --mdc-theme-on-surface: var(--mdc-theme-positive);
+      }
+    }
+
+    &.loading {
+      .mdc-banner__graphic,
+      .mdc-banner__text {
+        --mdc-theme-on-surface: var(--mdc-theme-primary);
+      }
+    }
+
+    &.pending {
+      .mdc-banner__graphic,
+      .mdc-banner__text {
+        --mdc-theme-on-surface: var(--mdc-theme-on-surface-variant);
+      }
+    }
+
+    &.checked {
+      --cv-action-ribbon-background: var(--cv-theme-primary-8);
+
+      .mdc-banner__graphic,
+      .mdc-banner__text {
+        --mdc-theme-on-surface: var(--mdc-theme-on-surface-variant);
+      }
+    }
+  }
+
+  ::slotted(*) {
+    margin-left: 8px;
+  }
+}

package/src/action-ribbon/action-ribbon-base.ts

@@ -0,0 +1,164 @@
+import { addHasRemoveClass } from '@material/mwc-base/base-element';
+import { observer } from '@material/mwc-base/observer';
+import { MDCBannerAdapter } from '@material/banner/adapter';
+import {
+  Action,
+  CloseReason,
+  events,
+  selectors,
+} from '@material/banner/constants';
+import { MDCBannerFoundation } from '@material/banner';
+import { html, LitElement, TemplateResult } from 'lit';
+import { classMap } from 'lit/directives/class-map.js';
+import { property, query } from 'lit/decorators.js';
+
+export class ActionRibbonBase extends LitElement {
+  protected mdcFoundation!: MDCBannerFoundation;
+  protected readonly mdcFoundationClass = MDCBannerFoundation;
+
+  @query('.mdc-banner') protected mdcRoot!: HTMLElement;
+  @query(selectors.CONTENT) protected mdcContent!: HTMLElement;
+  @query(selectors.PRIMARY_ACTION) protected primaryActionEl!: HTMLElement;
+
+  @property({ type: Boolean, reflect: true })
+  @observer(function (this: ActionRibbonBase, value: boolean) {
+    if (this.mdcFoundation) {
+      if (value) {
+        this.mdcFoundation.open();
+      } else {
+        this.mdcFoundation.close(this.reason);
+        this.reason = CloseReason.UNSPECIFIED;
+      }
+    }
+  })
+  open = true;
+
+  @property({ type: String }) labelText = '';
+
+  @property({ type: String }) icon = '';
+  @property({ type: String }) iconAriaLabel = '';
+
+  @property({ type: Boolean }) centered = true;
+
+  /**
+   * The state representation active|negative|positive|caution|loading|pending|checked
+   */
+  @property()
+  state?:
+    | 'active'
+    | 'negative'
+    | 'positive'
+    | 'caution'
+    | 'loading'
+    | 'pending'
+    | 'checked';
+
+  protected reason: CloseReason = CloseReason.UNSPECIFIED;
+
+  protected override render() {
+    const classes = {
+      'mdc-banner': true,
+      negative: this.state === 'negative',
+      positive: this.state === 'positive',
+      caution: this.state === 'caution',
+      active: this.state === 'active',
+      loading: this.state === 'loading',
+      pending: this.state === 'pending',
+      checked: this.state === 'checked',
+      'mdc-banner--centered': this.centered,
+    };
+    return html` <div class="${classMap(classes)}" role="banner">
+      <div
+        class="mdc-banner__content"
+        role="alertdialog"
+        aria-live="assertive"
+        aria-label="${this.labelText}"
+      >
+        <div class="mdc-banner__graphic-text-wrapper">
+          ${this.icon ? this.renderIcon() : ''}
+          <div class="mdc-banner__text">${this.labelText}</div>
+        </div>
+        <div class="mdc-banner__actions">
+          <slot name="action-items"></slot>
+        </div>
+      </div>
+    </div>`;
+  }
+
+  protected renderIcon(): TemplateResult {
+    return html` <div
+      class="mdc-banner__graphic"
+      role="img"
+      aria-label="${this.iconAriaLabel}"
+    >
+      <slot name="icon">
+        <cv-icon class="mdc-banner__icon"> ${this.icon} </cv-icon>
+      </slot>
+    </div>`;
+  }
+
+  protected createAdapter(): MDCBannerAdapter {
+    return {
+      ...addHasRemoveClass(this.mdcRoot),
+      getContentHeight: () => this.mdcContent.offsetHeight,
+      setStyleProperty: (property: any, value: string) =>
+        this.mdcRoot.style.setProperty(property, value),
+      trapFocus: () => this.primaryActionEl?.focus(),
+      releaseFocus: () => this.primaryActionEl?.blur(),
+      notifyActionClicked: (action: Action) =>
+        this.dispatchEvent(
+          new CustomEvent(events.ACTION_CLICKED, {
+            bubbles: true,
+            cancelable: true,
+            detail: { reason: action },
+          }),
+        ),
+      notifyClosed: (reason: CloseReason) =>
+        this.dispatchEvent(
+          new CustomEvent(events.CLOSED, {
+            bubbles: true,
+            cancelable: true,
+            detail: { reason: reason },
+          }),
+        ),
+      notifyClosing: (reason: CloseReason) =>
+        this.dispatchEvent(
+          new CustomEvent(events.CLOSING, {
+            bubbles: true,
+            cancelable: true,
+            detail: { reason: reason },
+          }),
+        ),
+      notifyOpened: () =>
+        this.dispatchEvent(
+          new CustomEvent(events.OPENED, { bubbles: true, cancelable: true }),
+        ),
+      notifyOpening: () =>
+        this.dispatchEvent(
+          new CustomEvent(events.OPENING, { bubbles: true, cancelable: true }),
+        ),
+    };
+  }
+
+  /** @export */
+  show() {
+    this.open = true;
+  }
+
+  /** @export */
+  close(reason = CloseReason.UNSPECIFIED) {
+    this.reason = reason;
+    this.open = false;
+  }
+
+  protected override async firstUpdated() {
+    if (this.mdcFoundation !== undefined) {
+      this.mdcFoundation.destroy();
+    }
+    this.mdcFoundation = new this.mdcFoundationClass(this.createAdapter());
+
+    if (this.open) {
+      this.mdcFoundation.open();
+    }
+  }
+}

package/src/action-ribbon/action-ribbon.scss

@@ -0,0 +1,20 @@
+@use '@material/banner/banner' as banner-core;
+@use './action-ribbon.theme';
+
+@include banner-core.core-styles();
+@include action-ribbon.theme();
+
+.mdc-banner__content {
+  min-height: 56px;
+}
+
+.mdc-banner__graphic {
+  background-color: transparent;
+  margin-top: 8px;
+  margin-bottom: 8px;
+  font-variation-settings: 'FILL' 1;
+}
+
+.mdc-banner__actions {
+  align-self: center;
+}

package/src/action-ribbon/action-ribbon.spec.ts

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

package/src/action-ribbon/action-ribbon.stories.js

@@ -0,0 +1,78 @@
+import './action-ribbon';
+import '../button/button';
+import '../icon/icon';
+
+export default {
+  title: 'Components/Action Ribbon',
+  parameters: {
+    layout: 'fullscreen',
+  },
+  argTypes: {
+    label: { control: 'text' },
+    icon: {
+      control: 'text',
+    },
+  },
+};
+
+export const Neutral = ({
+  label = 'No changes',
+  color,
+  icon,
+  saveDisabled = false,
+}) => {
+  return `
+    <cv-action-ribbon
+      labelText="${label}"
+      state="${color}" 
+      ${icon ? `icon="${icon}"` : null}
+      ${icon ? `iconAriaLabel="${icon}"` : null}>
+      <cv-button slot="action-items" outlined>Cancel</cv-button>
+      <cv-button slot="action-items" ${
+        saveDisabled ? 'disabled' : null
+      } raised>Save</cv-button>
+    </cv-action-ribbon>`;
+};
+
+export const Active = Neutral.bind({});
+Active.args = {
+  color: 'active',
+  label: 'You have unsaved changes',
+};
+export const Positive = Neutral.bind({});
+Positive.args = {
+  color: 'positive',
+  label: '(3/3) items selected',
+  icon: 'check',
+};
+export const Negative = Neutral.bind({});
+Negative.args = {
+  color: 'negative',
+  label: 'The name field may not contain numbers',
+  icon: 'error',
+  saveDisabled: true,
+};
+export const Caution = Neutral.bind({});
+Caution.args = {
+  color: 'caution',
+  label: 'These changes will increase your monthly spending rate',
+  icon: 'warning',
+};
+export const Loading = Neutral.bind({});
+Loading.args = {
+  color: 'loading',
+  label: 'These changes will increase your monthly spending rate',
+  icon: 'houseboat',
+};
+export const Pending = Neutral.bind({});
+Pending.args = {
+  color: 'pending',
+  label: 'These changes will increase your monthly spending rate',
+  icon: 'houseboat',
+};
+export const Checked = Neutral.bind({});
+Checked.args = {
+  color: 'checked',
+  label: 'These changes will increase your monthly spending rate',
+  icon: 'houseboat',
+};

package/src/action-ribbon/action-ribbon.ts

@@ -0,0 +1,26 @@
+import { css, unsafeCSS } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { ActionRibbonBase } from './action-ribbon-base';
+import styles from './action-ribbon.scss?inline';
+
+/**
+ * Action ribbon
+ *
+ * @slot - This element has a slot
+ */
+@customElement('cv-action-ribbon')
+export class CovalentActionRibbon extends ActionRibbonBase {
+  static override styles = [
+    css`
+      ${unsafeCSS(styles)}
+    `,
+  ];
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'cv-action-ribbon': CovalentActionRibbon;
+  }
+}
+
+export default CovalentActionRibbon;