@ukic/web-components 3.0.0-alpha.9 → 3.1.0

package/dist/collection/components/ic-breadcrumb-group/ic-breadcrumb-group.stories.js

@@ -0,0 +1,362 @@
+import { html } from "lit-html";
+
+const defaultArgs = {
+  backBreadcrumbOnly: false,
+  collapsed: false,
+  current: false,
+  href: "/",
+  pageTitle: "Home",
+  iconSlot: true,
+  theme: "inherit",
+  monochrome: false,
+};
+
+export default {
+  title: "Web Components/Breadcrumb",
+  component: "ic-breadcrumb-group",
+};
+
+export const Default = {
+  render: () => html`
+    <ic-breadcrumb-group>
+      <ic-breadcrumb
+        page-title="Breadcrumb 1"
+        href="/breadcrumb-1"
+      ></ic-breadcrumb>
+    </ic-breadcrumb-group>
+    <ic-breadcrumb-group>
+      <ic-breadcrumb
+        current="true"
+        page-title="Breadcrumb 1"
+        href="/breadcrumb-1"
+      ></ic-breadcrumb>
+    </ic-breadcrumb-group>
+    <ic-breadcrumb-group>
+      <ic-breadcrumb
+        page-title="Breadcrumb 1"
+        href="/breadcrumb-1"
+      ></ic-breadcrumb>
+      <ic-breadcrumb
+        current="true"
+        page-title="Breadcrumb 2"
+        href="/breadcrumb-2"
+      ></ic-breadcrumb>
+    </ic-breadcrumb-group>
+    <ic-breadcrumb-group>
+      <ic-breadcrumb
+        page-title="Breadcrumb 1"
+        href="/breadcrumb-1"
+      ></ic-breadcrumb>
+      <ic-breadcrumb
+        page-title="Breadcrumb 2"
+        href="/breadcrumb-2"
+      ></ic-breadcrumb>
+      <ic-breadcrumb
+        current="true"
+        page-title="Breadcrumb 3"
+        href="/breadcrumb-3"
+      ></ic-breadcrumb>
+    </ic-breadcrumb-group>
+  `,
+
+  name: "Default",
+};
+
+export const SlottedLinks = {
+  render: () => html`
+    <ic-breadcrumb-group>
+      <ic-breadcrumb page-title="breadcrumb-1">
+        <ic-link>
+          <a slot="router-item" href="/breadcrumb-1">Breadcrumb 1</a>
+        </ic-link>
+      </ic-breadcrumb>
+    </ic-breadcrumb-group>
+    <ic-breadcrumb-group>
+      <ic-breadcrumb current="true" page-title="breadcrumb 1">
+        <ic-link href="/breadcrumb-1">Breadcrumb 1</ic-link>
+      </ic-breadcrumb>
+    </ic-breadcrumb-group>
+    <ic-breadcrumb-group>
+      <ic-breadcrumb page-title="breadcrumb-1">
+        <ic-link>
+          <a slot="router-item" href="/breadcrumb-1">Breadcrumb 1</a>
+        </ic-link>
+      </ic-breadcrumb>
+      <ic-breadcrumb current="true" page-title="breadcrumb 2">
+        <a href="/breadcrumb-2">Breadcrumb 2</a>
+      </ic-breadcrumb>
+    </ic-breadcrumb-group>
+    <ic-breadcrumb-group>
+      <ic-breadcrumb page title="breadcrumb 1">
+        <ic-link>
+          <a slot="router-item" href="/breadcrumb-1">Breadcrumb 1</a>
+        </ic-link>
+      </ic-breadcrumb>
+      <ic-breadcrumb page-title="breadcrumb 2">
+        <ic-link>
+          <a slot="router-item" href="/breadcrumb-2">Breadcrumb 2</a>
+        </ic-link>
+      </ic-breadcrumb>
+      <ic-breadcrumb current="true" page-title="breadcrumb 3">
+        <ic-link>
+          <a href="/breadcrumb-3">Breadcrumb 3</a>
+        </ic-link>
+      </ic-breadcrumb>
+    </ic-breadcrumb-group>
+  `,
+
+  name: "Slotted links",
+};
+
+export const Back = {
+  render: () => html`
+    <ic-breadcrumb-group back-breadcrumb-only="true">
+      <ic-breadcrumb
+        page-title="Breadcrumb 1"
+        href="/breadcrumb-1"
+      ></ic-breadcrumb>
+    </ic-breadcrumb-group>
+    <ic-breadcrumb-group back-breadcrumb-only="true">
+      <ic-breadcrumb
+        page-title="Breadcrumb 1"
+        href="/breadcrumb-1"
+      ></ic-breadcrumb>
+      <ic-breadcrumb
+        current="true"
+        page-title="Breadcrumb 2"
+        href="/breadcrumb-2"
+      ></ic-breadcrumb>
+    </ic-breadcrumb-group>
+    <ic-breadcrumb-group back-breadcrumb-only="true">
+      <ic-breadcrumb
+        page-title="Breadcrumb 1"
+        href="/breadcrumb-1"
+      ></ic-breadcrumb>
+      <ic-breadcrumb
+        page-title="Breadcrumb 2"
+        href="/breadcrumb-2"
+      ></ic-breadcrumb>
+      <ic-breadcrumb
+        current="true"
+        page-title="Breadcrumb 3"
+        href="/breadcrumb-3"
+      ></ic-breadcrumb>
+    </ic-breadcrumb-group>
+  `,
+
+  name: "Back",
+};
+
+export const Icon = {
+  render: () => html`
+    <ic-breadcrumb-group>
+      <ic-breadcrumb
+        page-title="Breadcrumb 1"
+        href="/breadcrumb-1"
+        current="true"
+      >
+        <svg
+          slot="icon"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z"
+            fill="currentColor"
+          ></path>
+        </svg>
+      </ic-breadcrumb>
+    </ic-breadcrumb-group>
+    <ic-breadcrumb-group>
+      <ic-breadcrumb page-title="Breadcrumb 1" href="/breadcrumb-1">
+        <svg
+          slot="icon"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z"
+            fill="currentColor"
+          ></path>
+        </svg>
+      </ic-breadcrumb>
+      <ic-breadcrumb page-title="Breadcrumb 2" href="/breadcrumb-2">
+        <svg
+          slot="icon"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z"
+            fill="currentColor"
+          ></path>
+        </svg>
+      </ic-breadcrumb>
+    </ic-breadcrumb-group>
+    <ic-breadcrumb-group>
+      <ic-breadcrumb page-title="Breadcrumb 1" href="/breadcrumb-1">
+        <svg
+          slot="icon"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z"
+            fill="currentColor"
+          ></path>
+        </svg>
+      </ic-breadcrumb>
+      <ic-breadcrumb page-title="Breadcrumb 2" current="true" href="/">
+        <svg
+          slot="icon"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z"
+            fill="currentColor"
+          ></path>
+        </svg>
+      </ic-breadcrumb>
+    </ic-breadcrumb-group>
+  `,
+
+  name: "Icon",
+};
+
+export const Collapsed = {
+  render: () => html`
+    <ic-breadcrumb-group collapsed="true">
+      <ic-breadcrumb
+        page-title="Breadcrumb 1"
+        href="/breadcrumb-1"
+      ></ic-breadcrumb>
+    </ic-breadcrumb-group>
+    <ic-breadcrumb-group collapsed="true">
+      <ic-breadcrumb
+        page-title="Breadcrumb 1"
+        href="/breadcrumb-1"
+      ></ic-breadcrumb>
+      <ic-breadcrumb
+        current="page"
+        page-title="Breadcrumb 2"
+        href="/breadcrumb-2"
+      ></ic-breadcrumb>
+    </ic-breadcrumb-group>
+    <ic-breadcrumb-group collapsed="true">
+      <ic-breadcrumb
+        page-title="Breadcrumb 1"
+        href="/breadcrumb-1"
+      ></ic-breadcrumb>
+      <ic-breadcrumb
+        page-title="Breadcrumb 2"
+        href="/breadcrumb-2"
+      ></ic-breadcrumb>
+      <ic-breadcrumb
+        current="page"
+        page-title="Breadcrumb 3"
+        href="/breadcrumb-3"
+      ></ic-breadcrumb>
+    </ic-breadcrumb-group>
+  `,
+
+  name: "Collapsed",
+};
+
+export const SlottedLinksCollapsed = {
+  render: () => html`
+    <ic-breadcrumb-group collapsed="true">
+      <ic-breadcrumb page-title="breadcrumb 1">
+        <ic-link
+          ><a slot="router-item" href="/breadcrumb-1">Breadcrumb 1</a></ic-link
+        >
+      </ic-breadcrumb>
+      <ic-breadcrumb page-title="breadcrumb 2">
+        <ic-link
+          ><a slot="router-item" href="/breadcrumb-2">Breadcrumb 2</a></ic-link
+        >
+      </ic-breadcrumb>
+      <ic-breadcrumb current="page" page-title="breadcrumb 3">
+        <ic-link
+          ><a slot="router-item" href="/breadcrumb-3">Breadcrumb 3</a></ic-link
+        >
+      </ic-breadcrumb>
+    </ic-breadcrumb-group>
+  `,
+
+  name: "Slotted links collapsed",
+};
+
+export const Playground = {
+  render: (args) =>
+    html`<ic-breadcrumb-group
+      back-breadcrumb-only=${args.backBreadcrumbOnly}
+      collapsed=${args.collapsed}
+      theme=${args.theme}
+      monochrome=${args.monochrome}
+    >
+      <ic-breadcrumb
+        current=${args.current}
+        page-title=${args.pageTitle}
+        href=${args.href}
+      >
+        <svg
+          slot=${args.iconSlot}
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z"
+            fill="currentColor"
+          ></path>
+        </svg>
+      </ic-breadcrumb>
+      <ic-breadcrumb
+        page-title="Breadcrumb 2"
+        href="/breadcrumb-2"
+      ></ic-breadcrumb>
+      <ic-breadcrumb
+        page-title="Breadcrumb 3"
+        href="/breadcrumb-3"
+      ></ic-breadcrumb>
+    </ic-breadcrumb-group>`,
+
+  args: defaultArgs,
+
+  argTypes: {
+    iconSlot: {
+      mapping: {
+        true: "icon",
+        false: "",
+      },
+    },
+
+    theme: {
+      options: ["inherit", "light", "dark"],
+
+      control: {
+        type: "inline-radio",
+      },
+    },
+  },
+
+  name: "Playground",
+};

package/dist/collection/components/ic-button/ic-button.css

@@ -523,6 +523,7 @@ video {
 
 :host(.ic-button-variant-primary) ::slotted(a),
 :host(.ic-button-variant-icon-primary) ::slotted(a) {
+  --ic-typography-color: var(--ic-button-primary-text);
   color: var(--ic-button-primary-text);
   background-color: var(--ic-button-primary-background) !important;
 }
@@ -561,6 +562,7 @@ video {
 :host(.ic-button-variant-primary.ic-button-disabled) ::slotted(a),
 :host(.ic-button-variant-icon-primary.ic-button-disabled) ::slotted(a) {
   background: var(--ic-button-primary-background-disabled) !important;
+  --ic-typography-color: var(--ic-button-primary-text-disabled) !important;
   color: var(--ic-button-primary-text-disabled) !important;
 }
 
@@ -631,6 +633,7 @@ video {
 :host(.ic-button-variant-icon-secondary) ::slotted(a) {
   border: var(--ic-border-width) solid var(--ic-button-secondary-border) !important;
   color: var(--ic-button-secondary-text) !important;
+  --ic-typography-color: var(--ic-button-secondary-text) !important;
 }
 
 :host(.ic-button-variant-secondary) .button:hover,
@@ -669,8 +672,10 @@ video {
     var(--ic-button-secondary-background-pressed-active)
   ) !important;
   color: var(--ic-button-secondary-text-pressed-active);
-  --button-loading-inner-color: var(--ic-button-secondary-text-pressed-active);
-  --button-loading-outer-color: var(--ic-button-secondary-background-pressed);
+  --button-loading-inner-color: var(--ic-button-secondary-border-pressed);
+  --button-loading-outer-color: var(
+    --ic-button-secondary-background-pressed-active
+  );
 }
 
 :host(.ic-button-variant-secondary.ic-button-disabled) .button,
@@ -830,9 +835,7 @@ video {
 
 :host(.ic-button-variant-secondary.background.monochrome.ic-button-disabled)
   .button,
-:host(
-    .ic-button-variant-icon-secondary.background.monochrome.ic-button-disabled
-  )
+:host(.ic-button-variant-icon-secondary.background.monochrome.ic-button-disabled)
   .button {
   background-color: var(
     --ic-button-secondary-background-non-transparent-monochrome-disabled
@@ -842,9 +845,7 @@ video {
 
 :host(.ic-button-variant-secondary.background.monochrome.ic-button-disabled)
   ::slotted(a),
-:host(
-    .ic-button-variant-icon-secondary.background.monochrome.ic-button-disabled
-  )
+:host(.ic-button-variant-icon-secondary.background.monochrome.ic-button-disabled)
   ::slotted(a) {
   background-color: var(
     --ic-button-secondary-background-non-transparent-monochrome-disabled
@@ -888,6 +889,7 @@ video {
 :host(.ic-button-variant-tertiary) ::slotted(a),
 :host(.ic-button-variant-icon-tertiary) ::slotted(a) {
   color: var(--ic-button-tertiary-text-active);
+  --ic-typography-color: var(--ic-button-tertiary-text-active);
 }
 
 :host(.ic-button-variant-tertiary) .button:hover,
@@ -938,6 +940,7 @@ video {
 :host(.ic-button-variant-icon-tertiary.monochrome) .button,
 :host(.ic-button-variant-icon-tertiary.monochrome) ::slotted(a) {
   color: var(--ic-button-tertiary-text-monochrome);
+  --ic-typography-color: var(--ic-button-tertiary-text-monochrome);
 }
 
 :host(.ic-button-variant-tertiary.monochrome) .button:hover,
@@ -998,6 +1001,7 @@ video {
 :host(.ic-button-variant-destructive) ::slotted(a),
 :host(.ic-button-variant-icon-destructive) ::slotted(a) {
   color: var(--ic-button-destructive-text) !important;
+  --ic-typography-color: var(--ic-button-destructive-text) !important;
   background-color: var(--ic-button-destructive-background) !important;
   text-transform: uppercase !important;
 }
@@ -1048,7 +1052,6 @@ video {
   background-color: var(--ic-button-icon-color-background);
   min-width: 0;
   gap: var(--ic-space-xs);
-  margin: var(--ic-space-1px) 0;
 }
 
 :host(.ic-button-variant-icon) ::slotted(a) {
@@ -1056,7 +1059,6 @@ video {
   background-color: var(--ic-button-icon-color-background) !important;
   min-width: 0;
   gap: var(--ic-space-xs);
-  margin: var(--ic-space-1px) 0;
 }
 
 :host(.ic-button-variant-icon) .icon-container {
@@ -1077,21 +1079,21 @@ video {
 :host(.ic-button-variant-icon) .button:active:not(:focus),
 :host(.ic-button-variant-icon.ic-button-loading) .button {
   color: var(--ic-button-icon-color-active);
-  background-color: var(--ic-button-icon-color-background-acti);
+  background-color: var(--ic-button-icon-color-background-active);
 }
 
 :host(.ic-button-variant-icon) ::slotted(a:active:not(:focus)) {
   color: var(--ic-button-icon-color-active);
-  background-color: var(--ic-button-icon-color-background-acti) !important;
+  background-color: var(--ic-button-icon-color-background-active) !important;
 }
 
 :host(.ic-button-variant-icon.ic-button-disabled) .button {
-  color: var(--ic-architectural-300);
+  color: var(--ic-color-icon-disabled-mid);
   background: none;
 }
 
 :host(.ic-button-variant-icon.ic-button-disabled) ::slotted(a) {
-  color: var(--ic-architectural-300);
+  color: var(--ic-color-icon-disabled-mid);
   background: none !important;
 }
 
@@ -1101,7 +1103,6 @@ video {
 :host(.ic-button-variant-icon-primary) ::slotted(a) {
   min-width: 0;
   gap: var(--ic-space-xs);
-  margin: var(--ic-space-1px) 0;
 }
 
 :host(.ic-button-variant-icon-primary) .icon-container {
@@ -1120,7 +1121,6 @@ video {
 :host(.ic-button-variant-icon-secondary) ::slotted(a) {
   min-width: 0;
   gap: var(--ic-space-xs);
-  margin: var(--ic-space-1px) 0;
 }
 
 :host(.ic-button-variant-icon-secondary) .icon-container {
@@ -1134,7 +1134,6 @@ video {
 :host(.ic-button-variant-icon-tertiary) ::slotted(a) {
   min-width: 0;
   gap: var(--ic-space-xs);
-  margin: var(--ic-space-1px) 0;
 }
 
 :host(.ic-button-variant-icon-tertiary) .icon-container {
@@ -1148,7 +1147,6 @@ video {
 :host(.ic-button-variant-icon-destructive) ::slotted(a) {
   min-width: 0;
   gap: var(--ic-space-xs);
-  margin: var(--ic-space-1px) 0;
 }
 
 :host(.ic-button-variant-icon-destructive) .icon-container {
@@ -1376,7 +1374,6 @@ div.right-icon {
   background-color: inherit;
   min-width: 0;
   gap: var(--ic-space-xs);
-  margin: var(--ic-space-1px) 0;
 }
 
 :host(.ic-button-variant-icon) .icon-container {
@@ -1389,7 +1386,6 @@ div.right-icon {
   color: var(--button-default);
   min-width: 0;
   gap: var(--ic-space-xs);
-  margin: var(--ic-space-1px) 0;
 }
 
 :host(.button-variant-icon) .icon-container {
@@ -1412,7 +1408,7 @@ div.right-icon {
 
 :host(.button-variant-icon.disabled) .button,
 :host(.button-variant-icon.disabled) ::slotted(a) {
-  color: var(--ic-architectural-300);
+  color: var(--ic-color-icon-disabled-mid);
   background: none;
 }
 
@@ -1521,15 +1517,19 @@ slot[name="router-item"]::slotted(a) {
   * uses secondary monochrome tokens which are duplicated here to avoid multiple copies in each component
   */
 
-:host(#menu-button.ic-theme-light) {
+:host(#menu-button.ic-theme-dark) {
   --ic-button-secondary-background-hover-monochrome: var(
     --ic-action-dark-bg-hover
   );
   --ic-button-secondary-background-pressed-monochrome: var(
     --ic-action-dark-bg-pressed
   );
-  --ic-button-secondary-text-hover-monochrome: var(--ic-action-dark-hover);
-  --ic-button-secondary-text-pressed-monochrome: var(--ic-action-dark-pressed);
+  --ic-button-secondary-text-hover-monochrome: var(
+    --ic-action-monochrome-hover-dark
+  );
+  --ic-button-secondary-text-pressed-monochrome: var(
+    --ic-action-monochrome-pressed-dark
+  );
   --ic-button-secondary-border-hover-monochrome: var(
     --ic-color-border-neutral-hover-dark
   );
@@ -1538,15 +1538,19 @@ slot[name="router-item"]::slotted(a) {
   );
 }
 
-:host(#menu-button.ic-theme-dark) {
+:host(#menu-button.ic-theme-light) {
   --ic-button-secondary-background-hover-monochrome: var(
     --ic-action-light-bg-hover
   );
   --ic-button-secondary-background-pressed-monochrome: var(
     --ic-action-light-bg-pressed
   );
-  --ic-button-secondary-text-hover-monochrome: var(--ic-action-light-hover);
-  --ic-button-secondary-text-pressed-monochrome: var(--ic-action-light-pressed);
+  --ic-button-secondary-text-hover-monochrome: var(
+    --ic-action-monochrome-hover
+  );
+  --ic-button-secondary-text-pressed-monochrome: var(
+    --ic-action-monochrome-pressed
+  );
   --ic-button-secondary-border-hover-monochrome: var(
     --ic-color-border-neutral-hover-light
   );