feat(vwc-tags): 1st component draft

__snapshots__/Tag.md

@@ -0,0 +1,10 @@
+# `Tag`
+
+#### `should internal contents`
+
+```html
+<span class="vwc-tag">
+</span>
+
+```
+

components/audio/package.json

@@ -36,7 +36,6 @@
  },
  "devDependencies": {
  "@vonage/vvd-design-tokens": "2.18.1",
- "@vonage/vvd-foundation": "2.14.0",
  "@vonage/vvd-typography": "2.18.1",
  "@vonage/vvd-umbrella": "2.18.1",
  "typescript": "^4.3.2"

components/tags/package.json

@@ -0,0 +1,39 @@
+{
+ "name": "@vonage/vwc-tags",
+ "version": "2.18.1",
+ "description": "tags component",
+ "homepage": "https://github.com/Vonage/vivid/tree/master/components/tags#readme",
+ "license": "ISC",
+ "main": "vwc-tags.js",
+ "module": "vwc-tags.js",
+ "files": [
+ "*.js",
+ "*.ts",
+ "*.map"
+ ],
+ "repository": {
+ "type": "git",
+ "url": "https://github.com/vonage/vivid.git",
+ "directory": "components/tags"
+ },
+ "scripts": {
+ "build:typescript": "tsc -b",
+ "build:styles": "umbrella-style-modules --path=\"./src\"",
+ "build": "yarn run build:styles && yarn run build:typescript"
+ },
+ "bugs": {
+ "url": "https://github.com/Vonage/vivid/issues"
+ },
+ "dependencies": {
+ "@material/mwc-ripple": "^0.22.1",
+ "@vonage/vvd-foundation": "2.18.1",
+ "@vonage/vvd-typography": "2.18.1",
+ "@vonage/vwc-icon": "2.18.1",
+ "lit-element": "^2.4.0",
+ "lit-html": "^1.3.0",
+ "tslib": "^2.3.0"
+ },
+ "devDependencies": {
+ "@vonage/vvd-umbrella": "2.18.1"
+ }
+}

components/tags/readme.md

@@ -0,0 +1,35 @@
+# vwc-tags
+
+## Properties
+
+| Property | Attribute | Type |
+| -------------- | -------------- | ----------------------------------------------------- |
+| `connotation` | `connotation` | `Connotation.Primary \| Connotation.CTA \| undefined` |
+| `dense` | `dense` | `boolean \| undefined` |
+| `enlarged` | `enlarged` | `boolean \| undefined` |
+| `icon` | `icon` | `string \| undefined` |
+| `layout` | `layout` | `string \| undefined` |
+| `selected` | `selected` | `boolean \| undefined` |
+| `shape` | `shape` | `Shape.Rounded \| Shape.Pill \| undefined` |
+| `text` | `text` | `string \| undefined` |
+| `trailingIcon` | `trailingIcon` | `string \| undefined` |
+
+# vwc-tag
+
+## Properties
+
+| Property | Type |
+| -------------- | ----------------------------------------------------- |
+| `connotation` | `Connotation.Primary \| Connotation.CTA \| undefined` |
+| `dense` | `boolean \| undefined` |
+| `enlarged` | `boolean \| undefined` |
+| `icon` | `string \| undefined` |
+| `layout` | `string \| undefined` |
+| `selected` | `boolean \| undefined` |
+| `shape` | `Shape.Rounded \| Shape.Pill \| undefined` |
+| `text` | `string \| undefined` |
+| `trailingIcon` | `string \| undefined` |
+
+## Accessibility
+
+Authors MUST ensure tags default to role _option_ are contained in, or owned by, a tags set which default to the *listbox* role. Options not associated with a listbox might not be correctly mapped to an accessibility API

components/tags/src/partials/_vwc-tags-variables.scss

@@ -0,0 +1,6 @@
+$namespace: --vvd-tag;
+$namespace-shape: #{$namespace}--shape;
+$namespace-block-size: #{$namespace}--block-size;
+$namespace-padding-inline: #{$namespace}--padding-inline;
+$namespace-icon-checkmark--size: #{$namespace}__icon-checkmark--size;
+$namespace-icon-checkmark--padding-inline-end: #{$namespace}__icon-checkmark--padding-inline-end;

components/tags/src/vwc-tag-base.ts

@@ -0,0 +1,167 @@
+import '@material/mwc-ripple/mwc-ripple';
+import type { Ripple } from '@material/mwc-ripple/mwc-ripple';
+import { RippleHandlers } from '@material/mwc-ripple/ripple-handlers';
+
+import type { Connotation, Shape, Layout } from '@vonage/vvd-foundation/constants';
+import { ClassInfo, classMap } from 'lit-html/directives/class-map';
+import {
+ LitElement, html, property, TemplateResult, queryAsync, state, query, eventOptions
+} from 'lit-element';
+
+
+type TagConnotation = Extract<
+ Connotation,
+ | Connotation.Primary
+ | Connotation.CTA
+ >;
+
+type TagShape = Extract<Shape, Shape.Rounded | Shape.Pill>;
+
+type TagLayout = Extract<
+ Layout, Layout.Outlined | Layout.Soft
+>;
+export class VWCTagBase extends LitElement {
+ @queryAsync('mwc-ripple') ripple!: Promise<Ripple|null>;
+
+ @query('#selectable') selectableElement!: HTMLElement;
+
+ @property({ type: String, reflect: true })
+ text?: string;
+
+ @property({ type: Boolean, reflect: true })
+ selected = false;
+
+ @property({ type: String, reflect: true })
+ connotation?: TagConnotation;
+
+ @property({ type: String, reflect: true })
+ shape?: TagShape;
+
+ @property({ type: String, reflect: true })
+ layout?: TagLayout;
+
+ @property({ type: Boolean, reflect: true })
+ selectable = false;
+
+ @state() protected shouldRenderRipple = false;
+
+ protected rippleHandlers = new RippleHandlers(() => {
+ this.shouldRenderRipple = true;
+ return this.ripple;
+ });
+
+ focus(): void {
+ const selectableElement = this.selectableElement;
+ if (selectableElement) {
+ this.rippleHandlers.startFocus();
+ selectableElement.focus();
+ }
+ }
+
+ blur(): void {
+ const selectableElement = this.selectableElement;
+ if (selectableElement) {
+ this.rippleHandlers.endFocus();
+ selectableElement.blur();
+ }
+ }
+
+ // protected firstUpdated(): void {
+ // if (this.selected) {
+ // this.handleRippleActivate();
+ // }
+ // }
+
+ protected renderRipple(): TemplateResult | string {
+ return this.shouldRenderRipple ?
+ html`<mwc-ripple class="ripple"></mwc-ripple>` : '';
+ }
+
+ protected renderIcon(type?: string): TemplateResult {
+ return html`<vwc-icon class="vwc-tag__icon" .type="${type}"></vwc-icon>`;
+ }
+
+ protected getRenderClasses(): ClassInfo {
+ return {
+ [`connotation-${this.connotation}`]: !!this.connotation,
+ [`layout-${this.layout}`]: !!this.layout
+ };
+ }
+
+ protected renderTagSelectable(): TemplateResult {
+ const classes = {
+ 'vwc-tag--selected': this.selected,
+ ...this.getRenderClasses()
+ };
+
+ return html`<span
+ id="selectable"
+ class="vwc-tag vwc-tag-selectable ${classMap(classes)}"
+ role="option"
+ aria-selected="${this.selected}"
+ @focus="${this.handleRippleFocus}"
+ @blur="${this.handleRippleBlur}"
+ @mousedown="${this.handleRippleActivate}"
+ @mouseenter="${this.handleRippleMouseEnter}"
+ @mouseleave="${this.handleRippleMouseLeave}"
+ @touchstart="${this.handleRippleActivate}"
+ @touchend="${this.handleRippleDeactivate}"
+ @touchcancel="${this.handleRippleDeactivate}"
+ @click="${() => this.selected = !this.selected}"
+ @keydown="${this.handleKeydown}">
+ ${this.renderRipple()}
+ <span class="vwc-tag__checkmark">
+ ${this.renderIcon('check-circle-solid')}
+ </span>
+ <span class="text">
+ ${this.text}
+ </span>
+ </span>`;
+ }
+
+ render(): TemplateResult {
+ return this.selectable
+ ? this.renderTagSelectable()
+ : html`<span class="vwc-tag ${classMap(this.getRenderClasses())}">
+ ${this.text}
+ </span>`;
+ }
+
+ handleKeydown({ key }: KeyboardEvent): void {
+ if (key === ' '/* spacebar */) {
+ this.selected = !this.selected;
+ }
+ }
+
+ @eventOptions({ passive: true })
+ protected handleRippleActivate(evt?: Event): void {
+ const onUp = () => {
+ window.removeEventListener('mouseup', onUp);
+
+ this.handleRippleDeactivate();
+ };
+
+ window.addEventListener('mouseup', onUp);
+ this.rippleHandlers.startPress(evt);
+ }
+
+ protected handleRippleDeactivate(): void {
+ this.rippleHandlers.endPress();
+ }
+
+ protected handleRippleMouseEnter(): void {
+ this.rippleHandlers.startHover();
+ }
+
+ protected handleRippleMouseLeave(): void {
+ this.rippleHandlers.endHover();
+ }
+
+ protected handleRippleFocus(): void {
+ this.rippleHandlers.startFocus();
+ }
+
+ protected handleRippleBlur(): void {
+ this.rippleHandlers.endFocus();
+ }
+}

components/tags/src/vwc-tag.scss

@@ -0,0 +1,128 @@
+@use 'partials/vwc-tags-variables' as tags-variables;
+@use '@vonage/vwc-icon/src/partials/vwc-icon-variables' as icon-variables;
+@use '@vonage/vvd-design-tokens/build/scss/semantic-variables/scheme-variables' as scheme-variables;
+@use '@vonage/vvd-typography/scss/typography' as typography;
+@use '@vonage/vvd-foundation/scss/mixins/connotation/config' with (
+ $connotations-set: primary cta,
+ $shades: soft contrast,
+ $default: primary,
+);
+@use '@vonage/vvd-foundation/scss/mixins/connotation' as connotation;
+@use '@vonage/vvd-foundation/scss/mixins/shape-mixins' as shape-mixins with (
+ $variable-name: #{tags-variables.$namespace-shape}
+);
+@use '@vonage/vvd-foundation/scss/mixins/layout/config' as layout-config with (
+ $layout-set: outlined soft,
+ $outline-duotone: true,
+ $default: soft
+);
+@use '@vonage/vvd-foundation/scss/mixins/layout' as layout;
+
+
+@include shape-mixins.shape(
+ $shapes: (
+ rounded: 4px,
+ pill: 14px,
+ ),
+ $default: pill
+);
+
+.vwc-tag {
+ @include typography.typography-cat-shorthand('body-2-bold');
+ @include connotation.connotation;
+ @include layout.layout;
+ #{tags-variables.$namespace-padding-inline}: 10px;
+ #{tags-variables.$namespace-icon-checkmark--padding-inline-end}: 6px;
+ #{tags-variables.$namespace-block-size}: 24px;
+ #{tags-variables.$namespace-icon-checkmark--size}: 16px;
+ #{layout.$vvd-layout-color-outline}: var(#{scheme-variables.$vvd-color-neutral-50});
+ z-index: 0;
+ display: inline-flex;
+ align-items: center;
+ padding: 0 var(#{tags-variables.$namespace-padding-inline});
+ // ignore layout outline color for this component
+ border-color: var(#{scheme-variables.$vvd-color-neutral-50});
+ background-color: var(#{layout.$vvd-layout-color-fill});
+ block-size: var(#{tags-variables.$namespace-block-size});
+ border-radius: var(#{tags-variables.$namespace-shape});
+ color: var(#{layout.$vvd-layout-color-text});
+ vertical-align: top;
+
+ &.layout-outlined {
+ box-sizing: border-box;
+ border-width: 1px;
+ border-style: solid;
+ }
+
+ &:not(&-selectable) {
+ #{layout.$vvd-layout-color-text}: var(#{scheme-variables.$vvd-color-neutral-90});
+ &.layout-filled,
+ &:not(.layout-filled):not(.layout-outlined) {
+ #{layout.$vvd-layout-color-fill}: var(#{scheme-variables.$vvd-color-neutral-20});
+ }
+ }
+
+}
+
+.vwc-tag-selectable {
+ position: relative;
+ overflow: hidden;
+ cursor: pointer;
+
+ .ripple {
+ --mdc-ripple-color: currentColor;
+ }
+
+ &:not(.vwc-tag--selected) {
+ #{layout.$vvd-layout-color-text}: var(#{scheme-variables.$vvd-color-neutral-90});
+ &.layout-filled,
+ &:not(.layout-filled):not(.layout-outlined) {
+ background-color: var(#{scheme-variables.$vvd-color-neutral-20});
+ }
+ }
+
+ &.vwc-tag--selected {
+ &.layout-outlined {
+ background-color: var(#{connotation.$vvd-color-connotation}-soft);
+ color: var(#{connotation.$vvd-color-connotation}-contrast);
+ }
+ }
+}
+
+.vwc-tag__checkmark {
+ block-size: var(#{tags-variables.$namespace-icon-checkmark--size});
+ line-height: 1;
+ margin-inline-end: 0;
+ margin-inline-start: 0;
+
+ @media (prefers-reduced-motion: no-preference) {
+ transition-duration: 0.1s;
+ transition-property: margin-inline-start, margin-inline-end;
+ }
+ .vwc-tag.vwc-tag--selected & {
+ margin-inline-end: var(#{tags-variables.$namespace-icon-checkmark--padding-inline-end});
+ margin-inline-start: calc(4px - var(#{tags-variables.$namespace-padding-inline}));
+ }
+
+ > .vwc-tag__icon {
+ block-size: var(#{tags-variables.$namespace-icon-checkmark--size});
+ inline-size: var(#{tags-variables.$namespace-icon-checkmark--size});
+
+ @media (prefers-reduced-motion: no-preference) {
+ transition: inline-size 0.1s;
+ }
+
+ .vwc-tag:not(.vwc-tag--selected) & {
+ inline-size: 0;
+ }
+ }
+}
+
+// disable connotation if not selected
+// .vwc-tag:not(.vwc-tag--selected) {
+// :host([connotation="cta"i]) & {
+// --vvd-color-connotation: unset;
+// --vvd-color-on-connotation: unset;
+// }
+// }
+