feat(vwc-badge): deprecates slot in favor of props (#986)

* feat(vwc-badge): deprecates slot in favor of props * fixes icon typo * validate icon requirement * icon trailing * icon leading trailing * added icons tests * all tests pass * update badge ui test * added readme * migrate connotation test to UI * update ui tests * reflect trailingicon * Update components/badge/readme.md Co-authored-by: Yonatan Kra <yonatan.kra@vonage.com> * readme format * flaky test fixed * fix flaky test * fix flacky tests Co-authored-by: Yonatan Kra <yonatan.kra@vonage.com>
Vonage · Jul 27, 2021 · 3513345 · 3513345
1 parent 45fe21d
commit 3513345
Show file tree

Hide file tree

Showing 13 changed files with 338 additions and 197 deletions.
diff --git a/.github/PULL_REQUEST_TEMPLATE/pull_request_template_component.md b/.github/PULL_REQUEST_TEMPLATE/pull_request_template_component.md
@@ -16,7 +16,7 @@
 <!--- Include details of your testing environment, and the tests you ran to -->
 <!--- see how your change affects other areas of the code, etc. -->
 * [ ] A11y tests
-* [ ] Ui tests 
+* [ ] Ui tests
 * [ ] Unit and coverage
 * [ ] Test for Aria [matching roles](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles)
 * [ ] [Check the markup](https://validator.w3.org/)

diff --git a/__snapshots__/badge.md b/__snapshots__/badge.md
@@ -1,10 +1,100 @@
 # `badge`
 
-#### `should internal contents`
+#### `should match internal contents`
 
 ```html
-<slot>
-</slot>
+
+```
+
+#### `should match internal contents (legacy)`
+
+```html
+<span class="vwc-badge">
+ <slot>
+ </slot>
+</span>
+
+```
+
+## `icons`
+
+#### `should have icons when icons are set`
+
+```html
+<span class="vwc-badge">
+ <vwc-icon
+ class="icon icon--leading"
+ type="thumbs-down-line"
+ >
+ </vwc-icon>
+ <slot>
+ </slot>
+ <vwc-icon
+ class="icon icon--trailing"
+ type="thumbs-up-line"
+ >
+ </vwc-icon>
+</span>
+
+```
+
+#### `should have icons added when icons are set dynamically (property)`
+
+```html
+<span class="vwc-badge">
+ <vwc-icon
+ class="icon icon--leading"
+ type="thumbs-down-line"
+ >
+ </vwc-icon>
+ <slot>
+ </slot>
+ <vwc-icon
+ class="icon icon--trailing"
+ type="thumbs-down-line"
+ >
+ </vwc-icon>
+</span>
+
+```
+
+#### `should have icons added when icons are set dynamically (attribute)`
+
+```html
+<span class="vwc-badge">
+ <vwc-icon
+ class="icon icon--leading"
+ type="thumbs-down-line"
+ >
+ </vwc-icon>
+ <slot>
+ </slot>
+ <vwc-icon
+ class="icon icon--trailing"
+ type="thumbs-up-line"
+ >
+ </vwc-icon>
+</span>
+
+```
+
+#### `should have icons removed when icons are unset (property)`
+
+```html
+<span class="vwc-badge">
+ <slot>
+ </slot>
+</span>
+
+```
+
+#### `should have icon removed when icon is unset (attribute)`
+
+```html
+<span class="vwc-badge">
+ <slot>
+ </slot>
+</span>
 
 ```
 
diff --git a/components/badge/package.json b/components/badge/package.json
@@ -29,8 +29,10 @@
  },
  "dependencies": {
  "@vonage/vvd-core": "2.15.0",
+ "@vonage/vwc-icon": "2.15.0",
  "@vonage/vvd-foundation": "2.15.0",
  "lit-element": "^2.4.0",
+ "lit-html": "^1.3.0",
  "tslib": "^2.3.0"
  },
  "devDependencies": {
@@ -39,4 +41,4 @@
  "@vonage/vvd-umbrella": "2.15.0",
  "typescript": "^4.3.2"
  }
-}
+}
diff --git a/components/badge/readme.md b/components/badge/readme.md
@@ -1,51 +1,23 @@
-# vwc-select
+# vwc-badge
 
-This component is an extension of [<mwc-select>](https://github.com/material-components/material-components-web-components/tree/master/packages/select)
+Represents a badge custom element.
+badge is a label that holds small amounts of information. A badge can be used to display unread notifications, or to label a block of text. Badges don’t work for navigation because they can't include a hyperlink.
 
 ## Properties
 
-| Property | Modifiers | Type | Description |
-|---------------------------|-----------|--------------------------------------------------|--------------------------------------------------|
-| `disabled` | | `boolean` | |
-| `floatingLabelFoundation` | | `MDCFloatingLabelFoundation \| undefined` | |
-| `helper` | | `string` | |
-| `icon` | | `string` | |
-| `index` | readonly | `number` | |
-| `items` | readonly | `ListItemBase[]` | |
-| `label` | | `string` | |
-| `lineRippleFoundation` | | `MDCLineRippleFoundation \| undefined` | |
-| `naturalMenuWidth` | | `boolean` | |
-| `outlined` | | `boolean` | |
-| `required` | | `boolean` | |
-| `ripple` | readonly | `RippleInterface \| Promise<RippleInterface \| null> \| undefined` | Implement ripple getter for Ripple integration with mwc-formfield |
-| `selected` | readonly | `ListItemBase \| null` | |
-| `validateOnInitialRender` | | `boolean` | |
-| `validationMessage` | | `string` | |
-| `validity` | readonly | `ValidityState` | |
-| `validityTransform` | | `((value: string, nativeValidity: ValidityState) => Partial<ValidityState>) \| null` | |
-| `value` | | `string` | |
+| Property | Attribute | Type | Default |
+| -------------- | -------------- | -------------------------------------------------------------------------------------------------------------------------------------------- | -------- |
+| `connotation` | `connotation` | `Connotation.Primary \| Connotation.CTA \| Connotation.Success \| Connotation.Alert \| Connotation.Warning \| Connotation.Info \| undefined` | |
+| `dense` | `dense` | `boolean` | false |
+| `enlarged` | `enlarged` | `boolean` | false |
+| `icon` | `icon` | `string \| undefined` | |
+| `iconTrailing` | `iconTrailing` | `string \| undefined` | |
+| `layout` | `layout` | `Layout.Filled \| Layout.Outlined \| Layout.Soft` | "filled" |
+| `shape` | `shape` | `Shape.Rounded \| Shape.Pill \| undefined` | |
+| `text` | `text` | `string \| undefined` | |
 
-## Methods
+## Slots
 
-| Method | Type |
-|---------------------|--------------------------------------------------|
-| `blur` | `(): void` |
-| `checkValidity` | `(): boolean` |
-| `click` | `(): void` |
-| `focus` | `(): void` |
-| `layout` | `(updateItems?: boolean \| undefined): Promise<void>` |
-| `reportValidity` | `(): boolean` |
-| `select` | `(index: number): void` |
-| `setAriaLabel` | `(label: string): void` |
-| `setCustomValidity` | `(message: string): void` |
-
-## Events
-
-| Event | Description |
-|------------|------------------|
-| `action` | {ActionDetail} |
-| `change` | |
-| `closed` | |
-| `invalid` | |
-| `opened` | |
-| `selected` | {SelectedDetail} |
+| Name | Description |
+| --------- | ------------------------------------------------------------------------------------------------------ |
+| _default_ | This is a default/unnamed slot to assign text content. *deprecated* please use _text_ property instead |
diff --git a/components/badge/src/vwc-badge-base.ts b/components/badge/src/vwc-badge-base.ts
@@ -1,6 +1,9 @@
 import {
  html, LitElement, property, TemplateResult
 } from 'lit-element';
+import { nothing } from 'lit-html';
+import { classMap } from 'lit-html/directives/class-map';
+
 import { Connotation, Shape, Layout } from '@vonage/vvd-foundation/constants';
 import { handleMultipleDenseProps } from '@vonage/vvd-foundation/general-utils';
 
@@ -21,6 +24,9 @@ type BadgeLayout = Extract<
 
 type BadgeShape = Extract<Shape, Shape.Rounded | Shape.Pill>;
 
+/**
+ * @slot - This is a default/unnamed slot to assign text content. *deprecated* please use _text_ property instead
+ */
 export class VWCBadgeBase extends LitElement {
  @property({ type: String, reflect: true })
  connotation?: BadgeConnotation;
@@ -37,11 +43,38 @@ export class VWCBadgeBase extends LitElement {
  @property({ type: Boolean, reflect: true })
  enlarged = false;
 
+ @property({ type: String, reflect: true })
+ text?: string;
+
+ @property({ type: String, reflect: true })
+ icon?: string;
+
+ @property({ type: String, reflect: true })
+ iconTrailing?: string;
+
+ protected renderIcon(type?: string, isTrailingIcon = false): TemplateResult | typeof nothing {
+ const classes = {
+ 'icon--leading': !isTrailingIcon,
+ 'icon--trailing': isTrailingIcon
+ };
+
+ return type ?
+ html`<vwc-icon class="icon ${classMap(classes)}" .type="${type}"></vwc-icon>`
+ : nothing;
+ }
+
  protected updated(changes: Map<string, boolean>): void {
-  handleMultipleDenseProps(this, changes);
+  handleMultipleDenseProps(this, changes);
  }
 
  protected render(): TemplateResult {
- return html`<slot></slot>`;
+ return html`
+ <span class="vwc-badge">
+ ${this.renderIcon(this.icon)}
+ <slot>
+ ${this.text || nothing}
+ </slot>
+ ${this.renderIcon(this.iconTrailing, true)}
+ </span>`;
  }
 }
diff --git a/components/badge/src/vwc-badge.scss b/components/badge/src/vwc-badge.scss
@@ -31,6 +31,17 @@ $vvd-badge-block-size: --#{$namespace}-block-size;
 
 :host {
  #{$vvd-badge-block-size}: 24px;
+}
+
+:host([dense]) {
+ #{$vvd-badge-block-size}: 20px;
+}
+
+:host([enlarged]) {
+ #{$vvd-badge-block-size}: 28px;
+}
+
+.vwc-badge {
  @include typography.typography-cat-shorthand('caption-bold');
  display: inline-block;
  padding: 0 10px;
@@ -39,24 +50,24 @@ $vvd-badge-block-size: --#{$namespace}-block-size;
  border-radius: var(--#{$namespace}-shape);
  color: var(--#{$namespace}-color);
  line-height: var(#{$vvd-badge-block-size});
-}
 
-:host([layout="outlined"i]) {
- --color: var(#{scheme-variables.$vvd-color-on-base});
-}
+ :host([dense]) & {
+  padding: 0 8px;
+ }
 
-:host([disabled]) {
- background-color: var(#{scheme-variables.$vvd-color-neutral-30});
- color: var(#{scheme-variables.$vvd-color-neutral-50});
+ :host([enlarged]) & {
+  padding: 0 12px;
+ }
 }
 
-:host([dense]) {
- #{$vvd-badge-block-size}: 20px;
- padding: 0 8px;
-}
+.icon {
+ --icon-size: 12px;
+ $margin: 8px;
 
-:host([enlarged]) {
- #{$vvd-badge-block-size}: 28px;
- padding: 0 12px;
+ &.icon--leading {
+ margin-inline-end: $margin;
+ }
+ &.icon--trailing {
+ margin-inline-start: $margin;
+ }
 }
-
diff --git a/components/badge/src/vwc-badge.ts b/components/badge/src/vwc-badge.ts
@@ -1,9 +1,14 @@
 import '@vonage/vvd-core';
+import '@vonage/vwc-icon';
 import { customElement } from 'lit-element';
 
 import { VWCBadgeBase } from './vwc-badge-base.js';
 import { style } from './vwc-badge.css.js';
 
+/**
+ * Represents a badge custom element.
+ * badge is a label that holds small amounts of information. A badge can be used to display unread notifications, or to label a block of text. Badges don’t work for navigation because they can't include a hyperlink.
+ */
 @customElement('vwc-badge')
 export class VWCBadge extends VWCBadgeBase {
  static styles = style;

diff --git a/components/badge/stories/badge-introduction.config.mjs b/components/badge/stories/badge-introduction.config.mjs
@@ -0,0 +1,14 @@
+export default {
+ sourcePath: '../readme.md',
+ outputName: 'badge-introduction',
+ story: {
+ title: 'Alpha/Components/Badge/Introduction',
+ name: 'Introduction',
+ parameters: {
+ options: {
+ showPanel: false,
+ isToolshown: false
+ }
+ }
+ }
+};
diff --git a/components/badge/stories/badge.stories.js b/components/badge/stories/badge.stories.js
@@ -7,24 +7,29 @@ export default {
  title: 'Components/Badge',
  component: 'vwc-badge',
  argTypes
-}
+};
 
-const Template = args => html`<vwc-badge ...=${spread(args)}>I'm a badge</vwc-badge>`;
+const Template = args => html`<vwc-badge ...=${spread(args)}></vwc-badge>`;
 
 export const Basic = Template.bind({});
-Basic.args = { connotation: 'cta', layout: 'filled' };
+Basic.args = { connotation: 'cta', layout: 'filled', text: 'badge' };
+
+export const WithIcons = Template.bind({});
+WithIcons.args = {
+ connotation: 'cta', layout: 'filled', text: 'badge', icon: 'check-line', iconTrailing: 'check-line'
+};
 
 export const Soft = Template.bind({});
-Soft.args = { connotation: 'cta', layout: 'soft' };
+Soft.args = { connotation: 'cta', layout: 'soft', text: 'badge' };
 
 export const Outlined = Template.bind({});
-Outlined.args = { layout: 'outlined' };
+Outlined.args = { layout: 'outlined', text: 'badge' };
 
 export const PillShape = Template.bind({});
-PillShape.args = { layout: 'filled', shape: 'pill' };
+PillShape.args = { layout: 'filled', shape: 'pill', text: 'badge' };
 
 export const Dense = Template.bind({});
-Dense.args = { layout: 'filled', dense: '' };
+Dense.args = { layout: 'filled', dense: '', text: 'badge' };
 
 export const Enlarged = Template.bind({});
-Enlarged.args = { layout: 'filled', enlarged: '' };
+Enlarged.args = { layout: 'filled', enlarged: '', text: 'badge' };