@ukic/web-components 2.35.2 → 3.0.0-alpha.10

package/dist/collection/components/ic-badge/ic-badge.stories.js

@@ -5,10 +5,11 @@ const defaultArgs = {
   customColor: null,
   maxNumber: 1000,
   position: "far",
-  size: "default",
-  textLabel: "1",
+  size: "medium",
+  label: "1",
   type: "text",
   variant: "neutral",
+  theme: "inherit",
 };
 
 export default {
@@ -21,7 +22,7 @@ export const Success = {
     html`<div style="padding:16px;">
         <ic-button variant="secondary" style="margin-right:16px"
           ><ic-badge
-            text-label="1"
+            label="1"
             slot="badge"
             variant="success"
             size="small"
@@ -29,12 +30,12 @@ export const Success = {
           >Small</ic-button
         >
         <ic-button variant="secondary" style="margin-right:16px"
-          ><ic-badge text-label="1" slot="badge" variant="success"></ic-badge
+          ><ic-badge label="1" slot="badge" variant="success"></ic-badge
           >Default</ic-button
         >
         <ic-button variant="secondary"
           ><ic-badge
-            text-label="1"
+            label="1"
             slot="badge"
             variant="success"
             size="large"
@@ -125,7 +126,7 @@ export const Error = {
     html`<div style="padding:16px;">
         <ic-button variant="secondary" style="margin-right:16px"
           ><ic-badge
-            text-label="1"
+            label="1"
             slot="badge"
             variant="error"
             size="small"
@@ -133,12 +134,12 @@ export const Error = {
           >Small</ic-button
         >
         <ic-button variant="secondary" style="margin-right:16px"
-          ><ic-badge text-label="1" slot="badge" variant="error"></ic-badge
+          ><ic-badge label="1" slot="badge" variant="error"></ic-badge
           >Default</ic-button
         >
         <ic-button variant="secondary"
           ><ic-badge
-            text-label="1"
+            label="1"
             slot="badge"
             variant="error"
             size="large"
@@ -231,7 +232,7 @@ export const Warning = {
     html`<div style="padding:16px;">
         <ic-button variant="secondary" style="margin-right:16px"
           ><ic-badge
-            text-label="1"
+            label="1"
             slot="badge"
             variant="warning"
             size="small"
@@ -239,12 +240,12 @@ export const Warning = {
           >Small</ic-button
         >
         <ic-button variant="secondary" style="margin-right:16px"
-          ><ic-badge text-label="1" slot="badge" variant="warning"></ic-badge
+          ><ic-badge label="1" slot="badge" variant="warning"></ic-badge
           >Default</ic-button
         >
         <ic-button variant="secondary"
           ><ic-badge
-            text-label="1"
+            label="1"
             slot="badge"
             variant="warning"
             size="large"
@@ -337,7 +338,7 @@ export const Neutral = {
     html`<div style="padding:16px;">
         <ic-button variant="secondary" style="margin-right:16px"
           ><ic-badge
-            text-label="1"
+            label="1"
             slot="badge"
             variant="neutral"
             size="small"
@@ -345,12 +346,12 @@ export const Neutral = {
           >Small</ic-button
         >
         <ic-button variant="secondary" style="margin-right:16px"
-          ><ic-badge text-label="1" slot="badge" variant="neutral"></ic-badge
+          ><ic-badge label="1" slot="badge" variant="neutral"></ic-badge
           >Default</ic-button
         >
         <ic-button variant="secondary"
           ><ic-badge
-            text-label="1"
+            label="1"
             slot="badge"
             variant="neutral"
             size="large"
@@ -443,7 +444,7 @@ export const Light = {
     html`<div style="padding:16px;">
         <ic-button variant="secondary" style="margin-right:16px"
           ><ic-badge
-            text-label="1"
+            label="1"
             slot="badge"
             variant="light"
             size="small"
@@ -451,12 +452,12 @@ export const Light = {
           >Small</ic-button
         >
         <ic-button variant="secondary" style="margin-right:16px"
-          ><ic-badge text-label="1" slot="badge" variant="light"></ic-badge
+          ><ic-badge label="1" slot="badge" variant="light"></ic-badge
           >Default</ic-button
         >
         <ic-button variant="secondary"
           ><ic-badge
-            text-label="1"
+            label="1"
             slot="badge"
             variant="light"
             size="large"
@@ -549,7 +550,7 @@ export const Info = {
     html`<div style="padding:16px;">
         <ic-button variant="secondary" style="margin-right:16px"
           ><ic-badge
-            text-label="1"
+            label="1"
             slot="badge"
             variant="info"
             size="small"
@@ -557,12 +558,12 @@ export const Info = {
           >Small</ic-button
         >
         <ic-button variant="secondary" style="margin-right:16px"
-          ><ic-badge text-label="1" slot="badge" variant="info"></ic-badge
+          ><ic-badge label="1" slot="badge" variant="info"></ic-badge
           >Default</ic-button
         >
         <ic-button variant="secondary"
           ><ic-badge
-            text-label="1"
+            label="1"
             slot="badge"
             variant="info"
             size="large"
@@ -655,7 +656,7 @@ export const Custom = {
     html`<div style="padding:16px;">
         <ic-button variant="secondary" style="margin-right:16px"
           ><ic-badge
-            text-label="1"
+            label="1"
             slot="badge"
             variant="custom"
             custom-color="#F8C8DC"
@@ -665,7 +666,7 @@ export const Custom = {
         >
         <ic-button variant="secondary" style="margin-right:16px"
           ><ic-badge
-            text-label="1"
+            label="1"
             slot="badge"
             variant="custom"
             custom-color="#F8C8DC"
@@ -674,7 +675,7 @@ export const Custom = {
         >
         <ic-button variant="secondary"
           ><ic-badge
-            text-label="1"
+            label="1"
             slot="badge"
             variant="custom"
             custom-color="#F8C8DC"
@@ -792,7 +793,7 @@ export const MaxNumber = {
     html`<div style="padding:16px;">
         <ic-button variant="secondary" style="margin-right:16px"
           ><ic-badge
-            text-label="1000"
+            label="1000"
             slot="badge"
             size="small"
             max-number="9"
@@ -800,12 +801,12 @@ export const MaxNumber = {
           >Small</ic-button
         >
         <ic-button variant="secondary" style="margin-right:16px"
-          ><ic-badge text-label="1000" max-number="9" slot="badge"></ic-badge
+          ><ic-badge label="1000" max-number="9" slot="badge"></ic-badge
           >Default</ic-button
         >
         <ic-button variant="secondary"
           ><ic-badge
-            text-label="1000"
+            label="1000"
             slot="badge"
             size="large"
             max-number="9"
@@ -816,7 +817,7 @@ export const MaxNumber = {
       <div style="padding:16px;">
         <ic-button variant="secondary" style="margin-right:16px"
           ><ic-badge
-            text-label="1000"
+            label="1000"
             slot="badge"
             size="small"
             max-number="99"
@@ -824,12 +825,12 @@ export const MaxNumber = {
           >Small</ic-button
         >
         <ic-button variant="secondary" style="margin-right:16px"
-          ><ic-badge text-label="1000" max-number="99" slot="badge"></ic-badge
+          ><ic-badge label="1000" max-number="99" slot="badge"></ic-badge
           >Default</ic-button
         >
         <ic-button variant="secondary"
           ><ic-badge
-            text-label="1000"
+            label="1000"
             slot="badge"
             size="large"
             max-number="99"
@@ -846,18 +847,18 @@ export const PositionNear = {
     html`<div style="padding:16px;">
         <ic-chip label="Small" style="margin-right:16px;"
           ><ic-badge
-            text-label="1"
+            label="1"
             slot="badge"
             position="near"
             size="small"
           ></ic-badge
         ></ic-chip>
         <ic-chip label="Default" style="margin-right:16px;"
-          ><ic-badge text-label="1" slot="badge" position="near"></ic-badge
+          ><ic-badge label="1" slot="badge" position="near"></ic-badge
         ></ic-chip>
         <ic-chip label="Large"
           ><ic-badge
-            text-label="1"
+            label="1"
             slot="badge"
             position="near"
             size="large"
@@ -895,7 +896,7 @@ export const PositionInline = {
       <ic-tab-group label="Example tab group">
         <ic-tab
           >Small<ic-badge
-            text-label="1"
+            label="1"
             slot="badge"
             position="inline"
             size="small"
@@ -904,7 +905,7 @@ export const PositionInline = {
         ></ic-tab>
         <ic-tab
           >Default<ic-badge
-            text-label="1"
+            label="1"
             slot="badge"
             position="inline"
             accessible-label="1 notification found"
@@ -912,7 +913,7 @@ export const PositionInline = {
         ></ic-tab>
         <ic-tab
           >Large<ic-badge
-            text-label="1"
+            label="1"
             slot="badge"
             position="inline"
             size="large"
@@ -955,7 +956,7 @@ export const HideBadge = {
     html`<script>
         function showHideBadge() {
           badge = document.querySelector("ic-badge");
-          if (badge.classList.contains("show")) {
+          if (badge.classList.contains("ic-badge-show")) {
             badge.visible = false;
           } else {
             badge.visible = true;
@@ -964,7 +965,7 @@ export const HideBadge = {
       </script>
       <div style="padding:16px;">
         <ic-button variant="secondary" onclick="showHideBadge()"
-          ><ic-badge text-label="1" slot="badge"></ic-badge>Show/Hide
+          ><ic-badge label="1" slot="badge"></ic-badge>Show/Hide
           badge</ic-button
         >
       </div> `,
@@ -977,7 +978,7 @@ export const AccessibleLabel = {
     html`<div style="padding:16px;">
       <ic-button variant="secondary" style="margin-right:16px"
         ><ic-badge
-          text-label="1"
+          label="1"
           slot="badge"
           size="large"
           accessible-label="1 notification found"
@@ -1007,9 +1008,10 @@ export const Playground = {
         max-number=${args.maxNumber}
         position=${args.position}
         size=${args.size}
-        text-label=${args.textLabel}
+        label=${args.label}
         type=${args.type}
         variant=${args.variant}
+        theme=${args.theme}
       >
         <svg
           slot="badge-icon"
@@ -1046,7 +1048,7 @@ export const Playground = {
     },
 
     size: {
-      options: ["small", "default", "large"],
+      options: ["small", "medium", "large"],
 
       control: {
         type: "radio",
@@ -1076,6 +1078,14 @@ export const Playground = {
         type: "select",
       },
     },
+
+    theme: {
+      options: ["inherit", "light", "dark"],
+
+      control: {
+        type: "inline-radio",
+      },
+    },
   },
 
   name: "Playground",

package/dist/collection/components/ic-badge/test/basic/ic-badge.spec.js

@@ -3,7 +3,7 @@ import { Badge } from "../../ic-badge";
 import { Button } from "../../../ic-button/ic-button";
 import { Chip } from "../../../ic-chip/ic-chip";
 import { Tab } from "../../../ic-tab/ic-tab";
-import { Card } from "../../../ic-card/ic-card";
+import { CardVertical } from "../../../ic-card-vertical/ic-card-vertical";
 import { NavigationButton } from "../../../ic-navigation-button/ic-navigation-button";
 import { NavigationItem } from "../../../ic-navigation-item/ic-navigation-item";
 import { TopNavigation } from "../../../ic-top-navigation/ic-top-navigation";
@@ -11,84 +11,84 @@ describe("ic-badge", () => {
     it("should render with text slotted in a button", async () => {
         const page = await newSpecPage({
             components: [Button, Badge],
-            html: `<ic-button>Button<ic-badge slot="badge" text-label="1"/></ic-button>`,
+            html: `<ic-button>Button<ic-badge slot="badge" label="1"/></ic-button>`,
         });
         expect(page.root).toMatchSnapshot("should render with text slotted in a button");
     });
     it("should render light variant", async () => {
         const page = await newSpecPage({
             components: [Button, Badge],
-            html: `<ic-button>Button<ic-badge slot="badge" variant="light" text-label="1"/></ic-button>`,
+            html: `<ic-button>Button<ic-badge slot="badge" variant="light" label="1"/></ic-button>`,
         });
         expect(page.root).toMatchSnapshot("should render light variant");
     });
     it("should render error variant", async () => {
         const page = await newSpecPage({
             components: [Button, Badge],
-            html: `<ic-button>Button<ic-badge slot="badge" variant="error" text-label="1"/></ic-button>`,
+            html: `<ic-button>Button<ic-badge slot="badge" variant="error" label="1"/></ic-button>`,
         });
         expect(page.root).toMatchSnapshot("should render error variant");
     });
     it("should render success variant", async () => {
         const page = await newSpecPage({
             components: [Button, Badge],
-            html: `<ic-button>Button<ic-badge slot="badge" variant="success" text-label="1"/></ic-button>`,
+            html: `<ic-button>Button<ic-badge slot="badge" variant="success" label="1"/></ic-button>`,
         });
         expect(page.root).toMatchSnapshot("should render success variant");
     });
     it("should render warning variant", async () => {
         const page = await newSpecPage({
             components: [Button, Badge],
-            html: `<ic-button>Button<ic-badge slot="badge" variant="warning" text-label="1"/></ic-button>`,
+            html: `<ic-button>Button<ic-badge slot="badge" variant="warning" label="1"/></ic-button>`,
         });
         expect(page.root).toMatchSnapshot("should render warning variant");
     });
     it("should render info variant", async () => {
         const page = await newSpecPage({
             components: [Button, Badge],
-            html: `<ic-button>Button<ic-badge slot="badge" variant="info" text-label="1"/></ic-button>`,
+            html: `<ic-button>Button<ic-badge slot="badge" variant="info" label="1"/></ic-button>`,
         });
         expect(page.root).toMatchSnapshot("should render info variant");
     });
     it("should render custom variant with custom colour in hex", async () => {
         const page = await newSpecPage({
             components: [Button, Badge],
-            html: `<ic-button>Button<ic-badge slot="badge" variant="custom" text-label="1" custom-color="#F8C8DC"/></ic-button>`,
+            html: `<ic-button>Button<ic-badge slot="badge" variant="custom" label="1" custom-color="#F8C8DC"/></ic-button>`,
         });
         expect(page.root).toMatchSnapshot("should render custom variant with custom colour in hex");
     });
     it("should render custom variant with custom colour in rgb", async () => {
         const page = await newSpecPage({
             components: [Button, Badge],
-            html: `<ic-button>Button<ic-badge slot="badge" variant="custom" text-label="1" custom-color="rgb(248,200,220)"/></ic-button>`,
+            html: `<ic-button>Button<ic-badge slot="badge" variant="custom" label="1" custom-color="rgb(248,200,220)"/></ic-button>`,
         });
         expect(page.root).toMatchSnapshot("should render custom variant with custom colour in rgb");
     });
     it("should render with max number prop set", async () => {
         const page = await newSpecPage({
             components: [Button, Badge],
-            html: `<ic-button>Button<ic-badge slot="badge" text-label="100" max-number="9"/></ic-button>`,
+            html: `<ic-button>Button<ic-badge slot="badge" label="100" max-number="9"/></ic-button>`,
         });
         expect(page.root).toMatchSnapshot("should render with max number prop set");
     });
     it("should render with accessible label", async () => {
         const page = await newSpecPage({
             components: [Button, Badge],
-            html: `<ic-button>Button<ic-badge slot="badge" text-label="1" accessible-label="1 notification found"/></ic-button>`,
+            html: `<ic-button>Button<ic-badge slot="badge" label="1" accessible-label="1 notification found"/></ic-button>`,
         });
         expect(page.root).toMatchSnapshot("should render with accessible label");
     });
     it("should render size small", async () => {
         const page = await newSpecPage({
             components: [Button, Badge],
-            html: `<ic-button>Button<ic-badge slot="badge" text-label="100" size="small"/></ic-button>`,
+            html: `<ic-button>Button<ic-badge slot="badge" label="100" size="small"/></ic-button>`,
         });
         expect(page.root).toMatchSnapshot("should render size small");
     });
     it("should render size large", async () => {
         const page = await newSpecPage({
             components: [Button, Badge],
-            html: `<ic-button>Button<ic-badge slot="badge" text-label="100" size="large"/></ic-button>`,
+            html: `<ic-button>Button<ic-badge slot="badge" label="100" size="large"/></ic-button>`,
         });
         expect(page.root).toMatchSnapshot("should render size large");
     });
@@ -114,28 +114,28 @@ describe("ic-badge", () => {
     it("should render with visible false", async () => {
         const page = await newSpecPage({
             components: [Button, Badge],
-            html: `<ic-button>Button<ic-badge slot="badge" visible="false" text-label="1"/></ic-button>`,
+            html: `<ic-button>Button<ic-badge slot="badge" visible="false" label="1"/></ic-button>`,
         });
         expect(page.root).toMatchSnapshot("should render with visible false");
     });
     it("should render slotted in a chip", async () => {
         const page = await newSpecPage({
             components: [Chip, Badge],
-            html: `<ic-chip label="Badge"><ic-badge slot="badge" text-label="1" position="near"/></ic-chip>`,
+            html: `<ic-chip label="Badge"><ic-badge slot="badge" label="1" position="near"/></ic-chip>`,
         });
         expect(page.root).toMatchSnapshot("should render slotted in a chip");
     });
     it("should render slotted in a tab with aria-label set on badge", async () => {
         const page = await newSpecPage({
             components: [Tab, Badge],
-            html: `<ic-tab>Tab<ic-badge slot="badge" text-label="1" position="inline"/></ic-tab>`,
+            html: `<ic-tab>Tab<ic-badge slot="badge" label="1" position="inline"/></ic-tab>`,
         });
         expect(page.root).toMatchSnapshot("should render slotted in a tab");
     });
-    it("should render slotted in a card with aria-label set on badge", async () => {
+    it("should render slotted in a vertical card with aria-label set on badge", async () => {
         const page = await newSpecPage({
-            components: [Card, Badge],
-            html: `<ic-card heading="Badge"><ic-badge slot="badge" text-label="1" position="near"/></ic-card>`,
+            components: [CardVertical, Badge],
+            html: `<ic-card-vertical heading="Badge"><ic-badge slot="badge" label="1" position="near"/></ic-card-vertical>`,
         });
         expect(page.root).toMatchSnapshot("should render slotted in a card");
     });
@@ -163,7 +163,7 @@ describe("ic-badge", () => {
         />
       </svg>
       <ic-badge
-        text-label="1"
+        label="1"
         slot="badge"
         position="near"
         variant="light"
@@ -270,7 +270,7 @@ describe("ic-badge", () => {
             components: [NavigationItem, Badge],
             html: `<ic-navigation-item label="Navigation" href="/">
       <ic-badge
-        text-label="1"
+        label="1"
         slot="badge"
         variant="light"
         position="far"
@@ -295,7 +295,7 @@ describe("ic-badge", () => {
     it("should hide and show the badge using visible prop", async () => {
         const page = await newSpecPage({
             components: [Badge],
-            html: `<ic-button>Button<ic-badge slot="badge" text-label="1"/></ic-button>`,
+            html: `<ic-button>Button<ic-badge slot="badge" label="1"/></ic-button>`,
         });
         const badge = document.querySelector("ic-badge");
         expect(page.rootInstance.visible).toBe(true);
@@ -306,56 +306,46 @@ describe("ic-badge", () => {
         await page.waitForChanges();
         expect(page.rootInstance.visible).toBe(true);
     });
-    //To be removed when we remove show and hide methods
-    it("should hide and show the badge using methods", async () => {
-        const page = await newSpecPage({
-            components: [Badge],
-            html: `<ic-button>Button<ic-badge slot="badge" text-label="1"/></ic-button>`,
-        });
-        const badge = document.querySelector("ic-badge");
-        expect(page.rootInstance.visible).toBe(true);
-        await badge.hideBadge();
-        await page.waitForChanges();
-        expect(page.rootInstance.visible).toBe(false);
-        await badge.showBadge();
-        await page.waitForChanges();
-        expect(page.rootInstance.visible).toBe(true);
-    });
     it("should set the correct badge colour", async () => {
         const page = await newSpecPage({
             components: [Badge],
-            html: `<ic-button>Button<ic-badge slot="badge" variant="custom" text-label="1" custom-color="#F8C8DC"/></ic-button>`,
+            html: `<ic-button>Button<ic-badge slot="badge" variant="custom" label="1" custom-color="#F8C8DC"/></ic-button>`,
         });
         await page.rootInstance.setBadgeColour();
-        expect(page.rootInstance.customColorRGBA).toEqual({
-            a: 1,
-            b: 220,
-            g: 200,
-            r: 248,
-        });
+        const badge = document.querySelector("ic-badge");
+        expect(badge.style.backgroundColor).toBe("rgba(248, 200, 220, 1)");
     });
     it("should set the correct foreground colour", async () => {
         const page = await newSpecPage({
             components: [Badge],
-            html: `<ic-button>Button<ic-badge slot="badge" variant="custom" text-label="1" custom-color="#F8C8DC"/></ic-button>`,
+            html: `<ic-button>Button<ic-badge slot="badge" variant="custom" label="1" custom-color="#F8C8DC"/></ic-button>`,
         });
-        await page.rootInstance.getBadgeForeground();
+        await page.rootInstance.setBadgeColour();
         expect(page.rootInstance.foregroundColour).toBe("dark");
     });
-    it("should set the correct text label when max number is set", async () => {
+    it("should set the correct label when max number is set", async () => {
         const page = await newSpecPage({
             components: [Badge],
-            html: `<ic-button>Button<ic-badge slot="badge" text-label="100" max-number="9"/></ic-button>`,
+            html: `<ic-button>Button<ic-badge slot="badge" label="100" max-number="9"/></ic-button>`,
         });
-        expect(page.rootInstance.getTextLabel()).toBe("9+");
+        expect(page.rootInstance.getLabel()).toBe("9+");
     });
     it("should render with id set", async () => {
         const page = await newSpecPage({
             components: [Button, Badge],
-            html: `<ic-button>Button<ic-badge slot="badge" id="badge-1" text-label="1"/></ic-button>`,
+            html: `<ic-button>Button<ic-badge slot="badge" id="badge-1" label="1"/></ic-button>`,
         });
         expect(page.root).toMatchSnapshot("should render with id");
     });
+    it("should set the correct badge colour if the custom colour is updated", async () => {
+        const page = await newSpecPage({
+            components: [Badge],
+            html: `<ic-button>Button<ic-badge slot="badge" variant="custom" label="1" custom-color="#F8C8DC"/></ic-button>`,
+        });
+        page.rootInstance.customColor = "rgb(222,10,43)";
+        const badge = document.querySelector("ic-badge");
+        expect(badge.style.backgroundColor).toBe("rgba(222, 10, 43, 1)");
+    });
     it("should set the correct variant when navigation menu is opened and closed", async () => {
         const page = await newSpecPage({
             components: [Badge, NavigationButton],