feat(ccd): added new component (#2327)

.changeset/sixty-bananas-kick.md

@@ -0,0 +1,5 @@
+---
+"@ebay/ebayui-core": minor
+---
+
+ebay-ccd: new component

src/components/ebay-ccd/README.md

@@ -0,0 +1,16 @@
+<h1 style="display: flex; justify-content: space-between; align-items: center;">
+    <span>
+        ebayccd-
+    </span>
+    <span style="font-weight: normal; font-size: medium; margin-bottom: -15px;">
+        DS v1.0.0
+    </span>
+</h1>
+
+EU energy label
+
+## Examples and Documentation
+
+-   [Storybook](https://ebay.github.io/ebayui-core/?path=/story/graphics-icons-ebay-ccd)
+-   [Storybook Docs](https://ebay.github.io/ebayui-core/?path=/docs/graphics-icons-ebay-ccd)
+-   [Code Examples](https://github.com/eBay/ebayui-core/tree/master/src/components/ebay-ccd/examples)

src/components/ebay-ccd/browser.json

@@ -0,0 +1,9 @@
+{
+    "requireRemap": [
+        {
+            "from": "./style",
+            "to": "../../common/empty",
+            "if-flag": "ebayui-no-skin"
+        }
+    ]
+}

src/components/ebay-ccd/ccd.stories.ts

@@ -0,0 +1,90 @@
+import Readme from "./README.md";
+import { buildExtensionTemplate } from "../../common/storybook/utils";
+import ccd from "./index.marko";
+import DefaultTemplate from "./examples/default.marko";
+import DefaultTemplateCode from "./examples/default.marko?raw";
+
+export default {
+    title: "graphics & icons/ebay-ccd",
+    component: ccd,
+    parameters: {
+        docs: {
+            description: {
+                component: Readme,
+            },
+        },
+    },
+
+    argTypes: {
+        max: {
+            control: { type: "text" },
+            description: "The maximum range",
+        },
+        min: {
+            control: { type: "text" },
+            description: "The minimum range",
+        },
+        chargerIcon: {
+            control: { type: "select" },
+            options: [undefined, "included", "not-included"],
+            description:
+                "Toggles the charger icon visible or if its included or not",
+            table: {
+                defaultValue: {
+                    summary: "none",
+                },
+            },
+        },
+        units: {
+            control: { type: "text" },
+            description: "The units of the rating.",
+            table: {
+                defaultValue: {
+                    summary: "w",
+                },
+            },
+        },
+        secondaryType: {
+            control: { type: "select" },
+            options: ["none", "usbpd"],
+            description: "Toggles the usbpd secondary text",
+            table: {
+                defaultValue: {
+                    summary: "none",
+                },
+            },
+        },
+        secondaryText: {
+            control: { type: "text" },
+            description:
+                "The text used for secodnary text. Will also be used in aria-label",
+            table: {
+                defaultValue: {
+                    summary: "usbpd",
+                },
+            },
+        },
+        a11yUnits: {
+            control: { type: "text" },
+            description: "The units for the rating used for a11y",
+            table: {
+                defaultValue: {
+                    summary: "watts",
+                },
+            },
+        },
+        a11yText: {
+            control: { type: "text" },
+            description: "Overrides the default aria-label text",
+        },
+    },
+};
+
+export const Default = buildExtensionTemplate(
+    DefaultTemplate,
+    DefaultTemplateCode,
+    {
+        max: "2000",
+        min: "1000",
+    },
+);

src/components/ebay-ccd/examples/default.marko

@@ -0,0 +1 @@
+<ebay-ccd min="1000" max="2000" ...input />

src/components/ebay-ccd/examples/withCharger.marko

@@ -0,0 +1 @@
+<ebay-ccd min="1000" max="2000" chargerIcon="included" />

src/components/ebay-ccd/examples/withChargerAndUSBPD.marko

@@ -0,0 +1 @@
+<ebay-ccd min="1000" max="2000" secondaryText="usbpd" />

src/components/ebay-ccd/examples/withUSBPD.marko

@@ -0,0 +1 @@
+<ebay-ccd min="1000" max="2000" secondary-type="usbpd" />

src/components/ebay-ccd/examples/withoutCharger.marko

@@ -0,0 +1 @@
+<ebay-ccd min="1000" max="2000" chargerIcon="not-included" />

src/components/ebay-ccd/index.marko

@@ -0,0 +1,59 @@
+import { processHtmlAttributes } from "../../common/html-attributes";
+import type { WithNormalizedProps } from "../../global";
+static interface CCDInput extends Omit<Marko.Input<"div">, `on${string}`> {
+    max?: string;
+    min?: string;
+    "charger-icon"?: "included" | "not-included";
+    units?: string;
+    "secondary-type"?: string;
+    "secondary-text"?: string;
+    "a11y-units"?: string;
+    "a11y-text"?: string;
+}
+export interface Input extends WithNormalizedProps<CCDInput> {}
+static function noop() {}
+$ const {
+    class: inputClass,
+    style,
+    a11yText,
+    chargerIcon,
+    units = "W",
+    a11yUnits = "watts",
+    max,
+    min,
+    secondaryType = "none",
+    secondaryText = "USB PD",
+    ...htmlInput
+} = input;
+$ (input as any).toJSON = noop;
+
+$ const hasFastCharging = secondaryType === "usbpd";
+
+<div
+    ...processHtmlAttributes(htmlInput)
+    role="figure"
+    style=style
+    aria-label=a11yText || `${
+        chargerIcon
+            ? `Charger ${chargerIcon === "included" ? "" : "not "} included.`
+            : ""
+        } ${min} - ${max} ${a11yUnits}. ${hasFastCharging ? secondaryText : ""}`
+    class=["ccd", inputClass]
+>
+    <if(chargerIcon === "included")>
+        <ebay-ccd-charger-included-icon class="ccd__charger-icon"/>
+    </if>
+    <else-if(chargerIcon === "not-included")>
+        <ebay-ccd-charger-not-included-icon class="ccd__charger-icon"/>
+    </else-if>
+    <div class="ccd__description-figure">
+        <ebay-ccd-top-icon class="ccd__top-icon"/>
+        <div class="ccd__body">
+            <div>${min} - ${max}</div>
+            <div>${units}</div>
+            <if(hasFastCharging)>
+                <div>${secondaryText}</div>
+            </if>
+        </div>
+    </div>
+</div>

src/components/ebay-ccd/marko-tag.json

@@ -0,0 +1,21 @@
+{
+    "attribute-groups": ["html-attributes"],
+    "@*": {
+        "targetProperty": null,
+        "type": "expression"
+    },
+    "@html-attributes": "expression",
+    "@max": "string",
+    "@min": "string",
+    "@charger-icon": {
+        "enum": ["included", "not-included"]
+    },
+    "@units": "string",
+    "@secondary-type": {
+        "enum": ["none", "usbpd"]
+    },
+    "@secondary-text": "string",
+    "@a11y-units": "string",
+    "@a11y-text": "string",
+    "description": "[view documentation](https://ebay.github.io/ebayui-core/?path=/story/graphics-icons-ebay-ccd)"
+}

src/components/ebay-ccd/style.ts

@@ -0,0 +1 @@
+import "@ebay/skin/ccd";