feat: add badge component

adobe · May 26, 2022 · cabfdfe · cabfdfe
1 parent 6ae59cb
commit cabfdfe
Show file tree

Hide file tree

Showing 19 changed files with 1,087 additions and 1 deletion.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -9,7 +9,7 @@ executors:
 parameters:
     current_golden_images_hash:
         type: string
-        default: 9586195fb1990d52099696881c1e0ae6a98762fc
+        default: ac5d05ad1177d733d638fd7a0e8606820e863ab5
 commands:
     downstream:
         steps:

diff --git a/packages/badge/.npmignore b/packages/badge/.npmignore
@@ -0,0 +1,2 @@
+stories
+test
diff --git a/packages/badge/README.md b/packages/badge/README.md
@@ -0,0 +1,113 @@
+## Description
+
+`<sp-badge>` elements display a small amount of color-categorized metadata. They're ideal for getting a user's attention.
+
+### Usage
+
+[![See it on NPM!](https://img.shields.io/npm/v/@spectrum-web-components/badge?style=for-the-badge)](https://www.npmjs.com/package/@spectrum-web-components/badge)
+[![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@spectrum-web-components/badge?style=for-the-badge)](https://bundlephobia.com/result?p=@spectrum-web-components/badge)
+
+```
+yarn add @spectrum-web-components/badge
+```
+
+Import the side effectful registration of `<sp-badge>` via:
+
+```
+import '@spectrum-web-components/badge/sp-badge.js';
+```
+
+When looking to leverage the `Badge` base class as a type and/or for extension purposes, do so via:
+
+```
+import { Badge } from '@spectrum-web-components/badge';
+```
+
+## Sizes
+
+<sp-tabs selected="m" auto label="Size Attribute Options">
+<sp-tab value="s">Small</sp-tab>
+<sp-tab-panel value="s">
+
+```html demo
+<div style="display: flex; gap: var(--spectrum-global-dimension-size-50);">
+    <sp-badge size="s">Label</sp-badge>
+    <sp-badge size="s">
+        <sp-icon-checkmark-circle slot="icon"></sp-icon-checkmark-circle>
+        Icon and label
+    </sp-badge>
+</div>
+```
+
+</sp-tab-panel>
+<sp-tab value="m">Medium</sp-tab>
+<sp-tab-panel value="m">
+
+```html demo
+<div style="display: flex; gap: var(--spectrum-global-dimension-size-50);">
+    <sp-badge size="m">Label</sp-badge>
+    <sp-badge size="m">
+        <sp-icon-checkmark-circle slot="icon"></sp-icon-checkmark-circle>
+        Icon and label
+    </sp-badge>
+</div>
+```
+
+</sp-tab-panel>
+<sp-tab value="l">Large</sp-tab>
+<sp-tab-panel value="l">
+
+```html demo
+<div style="display: flex; gap: var(--spectrum-global-dimension-size-50);">
+    <sp-badge size="l">Label</sp-badge>
+    <sp-badge size="l">
+        <sp-icon-checkmark-circle slot="icon"></sp-icon-checkmark-circle>
+        Icon and label
+    </sp-badge>
+</div>
+```
+
+</sp-tab-panel>
+<sp-tab value="xl">Extra Large</sp-tab>
+<sp-tab-panel value="xl">
+
+```html demo
+<div style="display: flex; gap: var(--spectrum-global-dimension-size-50);">
+    <sp-badge size="xl">Label</sp-badge>
+    <sp-badge size="xl">
+        <sp-icon-checkmark-circle slot="icon"></sp-icon-checkmark-circle>
+        Icon and label
+    </sp-badge>
+</div>
+```
+
+</sp-tab-panel>
+</sp-tabs>
+
+## Variants
+
+The `<sp-badge>` can the customized with either semantic or non-semantic variants.
+
+### Semantic
+
+```html demo
+<div style="display: flex; gap: var(--spectrum-global-dimension-size-50);">
+    <sp-badge variant="neutral">Neutral</sp-badge>
+    <sp-badge variant="informative">Informative</sp-badge>
+    <sp-badge variant="positive">Positive</sp-badge>
+    <sp-badge variant="negative">Negative</sp-badge>
+</div>
+```
+
+### Non-Semantic
+
+```html demo
+<div style="display: flex; gap: var(--spectrum-global-dimension-size-50);">
+    <sp-badge variant="fuchsia">Fuchsia</sp-badge>
+    <sp-badge variant="indigo">Indigo</sp-badge>
+    <sp-badge variant="magenta">Magenta</sp-badge>
+    <sp-badge variant="purple">Purple</sp-badge>
+    <sp-badge variant="seafoam">Seafoam</sp-badge>
+    <sp-badge variant="yellow">Yellow</sp-badge>
+</div>
+```
diff --git a/packages/badge/package.json b/packages/badge/package.json
@@ -0,0 +1,59 @@
+{
+    "name": "@spectrum-web-components/badge",
+    "version": "0.0.1",
+    "publishConfig": {
+        "access": "public"
+    },
+    "description": "Web component implementation of a Spectrum design Badge",
+    "license": "Apache-2.0",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/adobe/spectrum-web-components.git",
+        "directory": "packages/badge"
+    },
+    "author": "",
+    "homepage": "https://adobe.github.io/spectrum-web-components/components/badge",
+    "bugs": {
+        "url": "https://github.com/adobe/spectrum-web-components/issues"
+    },
+    "main": "src/index.js",
+    "module": "src/index.js",
+    "type": "module",
+    "exports": {
+        ".": "./src/index.js",
+        "./src/*": "./src/*.js",
+        "./package.json": "./package.json",
+        "./sp-badge": "./sp-badge.js",
+        "./sp-badge.js": "./sp-badge.js"
+    },
+    "scripts": {
+        "test": "echo \"Error: run tests from mono-repo root.\" && exit 1"
+    },
+    "files": [
+        "**/*.d.ts",
+        "**/*.js",
+        "**/*.js.map",
+        "custom-elements.json",
+        "!stories/",
+        "!test/"
+    ],
+    "keywords": [
+        "spectrum css",
+        "web components",
+        "lit-element",
+        "lit-html"
+    ],
+    "dependencies": {
+        "@spectrum-web-components/base": "^0.5.6",
+        "@spectrum-web-components/shared": "^0.14.1",
+        "tslib": "^2.0.0"
+    },
+    "devDependencies": {
+        "@spectrum-css/badge": "^1.0.18"
+    },
+    "types": "./src/index.d.ts",
+    "customElementsManifest": "custom-elements.json",
+    "sideEffects": [
+        "./sp-*.js"
+    ]
+}
diff --git a/packages/badge/sp-badge.ts b/packages/badge/sp-badge.ts
@@ -0,0 +1,21 @@
+/*
+Copyright 2020 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+
+import { Badge } from './src/Badge.js';
+
+customElements.define('sp-badge', Badge);
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'sp-badge': Badge;
+    }
+}
diff --git a/packages/badge/src/Badge.ts b/packages/badge/src/Badge.ts
@@ -0,0 +1,61 @@
+/*
+Copyright 2020 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+
+import {
+    CSSResultArray,
+    html,
+    SizedMixin,
+    SpectrumElement,
+    TemplateResult,
+} from '@spectrum-web-components/base';
+import { property } from '@spectrum-web-components/base/src/decorators.js';
+
+import { ObserveSlotText } from '@spectrum-web-components/shared/src/observe-slot-text.js';
+import styles from './badge.css.js';
+
+export const BADGE_VARIANTS = [
+    'neutral',
+    'informative',
+    'positive',
+    'negative',
+    'fuchsia',
+    'indigo',
+    'magenta',
+    'purple',
+    'seafoam',
+    'yellow',
+] as const;
+export type BadgeVariant = typeof BADGE_VARIANTS[number];
+
+/**
+ * @element sp-badge
+ *
+ * @slot - Text label of the badge
+ * @slot icon - Optional icon that appears to the left of the label
+ */
+export class Badge extends SizedMixin(ObserveSlotText(SpectrumElement, '')) {
+    public static get styles(): CSSResultArray {
+        return [styles];
+    }
+
+    @property({ type: String, reflect: true })
+    public variant: BadgeVariant = 'informative';
+
+    protected render(): TemplateResult {
+        return html`
+            <slot name="icon" ?icon-only=${!this.slotHasContent}></slot>
+            <div id="label">
+                <slot></slot>
+            </div>
+        `;
+    }
+}