@ukic/web-components 3.0.0 → 3.2.0

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

@@ -0,0 +1,434 @@
+import { html } from "lit-html";
+
+const defaultArgs = {
+  brandColor: "rgba(27, 60, 121, 1)",
+  theme: "light",
+};
+
+const defaultThemeArgs = {
+  theme: "light",
+  componentTheme: "light",
+};
+
+export default {
+  title: "Web Components/Theme",
+  component: "ic-theme",
+};
+
+export const SwitchBrand = {
+  render: () =>
+    html` <ic-theme brand-color="rgba(27, 60, 121, 1)">
+      <ic-button
+        variant="primary"
+        id="default-btn"
+        onClick="document.querySelector('ic-theme').brandColor='rgb(27, 60, 121)'"
+      >
+        Default brand
+      </ic-button>
+      <ic-button
+        variant="primary"
+        id="custom-btn"
+        onClick="document.querySelector('ic-theme').brandColor='rgba(255, 201, 60, 1)'"
+      >
+        Sunrise brand
+      </ic-button>
+      <div style="padding-top:10px">
+        <ic-top-navigation
+          app-title="ApplicationName"
+          status="alpha"
+          version="v0.0.7"
+        >
+          <svg
+            slot="app-icon"
+            xmlns="http://www.w3.org/2000/svg"
+            height="24px"
+            viewBox="0 0 24 24"
+            width="24px"
+            fill="#000000"
+          >
+            <path d="M0 0h24v24H0V0z" fill="none" />
+            <path
+              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z"
+            />
+          </svg>
+          <ic-search-bar
+            slot="search"
+            placeholder="Search"
+            label="Search"
+          ></ic-search-bar>
+          <ic-navigation-button
+            label="button1"
+            slot="buttons"
+            onclick="alert('test')"
+          >
+            <svg
+              slot="icon"
+              xmlns="http://www.w3.org/2000/svg"
+              height="24px"
+              viewBox="0 0 24 24"
+              width="24px"
+              fill="#000000"
+            >
+              <path d="M0 0h24v24H0V0z" fill="none" />
+              <path
+                d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z"
+              />
+            </svg>
+          </ic-navigation-button>
+          <ic-navigation-item
+            slot="navigation"
+            label="Navigation"
+            href="/"
+          ></ic-navigation-item>
+          <ic-navigation-item
+            slot="navigation"
+            label="Navigation"
+            href="/"
+          ></ic-navigation-item>
+          <ic-navigation-item
+            slot="navigation"
+            label="Navigation"
+            href="/"
+          ></ic-navigation-item>
+          <ic-navigation-item
+            slot="navigation"
+            label="Navigation"
+            href="/"
+            selected="true"
+          ></ic-navigation-item>
+          <ic-navigation-item
+            slot="navigation"
+            label="Navigation"
+            href="/"
+          ></ic-navigation-item>
+        </ic-top-navigation>
+        <ic-hero
+          heading="Hero heading"
+          subheading="Hero description. This is a Hero component, it should be used as a page heading."
+          secondary-heading="Secondary Heading"
+          secondary-subheading="This is a secondary description."
+          full-width
+        >
+          <div slot="interaction" style="display: flex">
+            <ic-text-field
+              placeholder="Filter display"
+              label="Filter display"
+              hide-label
+            ></ic-text-field>
+            <ic-button variant="primary" style="margin-left:16px"
+              >Filter</ic-button
+            >
+          </div>
+          <ic-button variant="secondary" slot="interaction">See all</ic-button>
+          <ic-link
+            href="https://google.com"
+            slot="interaction"
+            style="margin-top:10px"
+            >Help</ic-link
+          >
+        </ic-hero>
+        <ic-alert
+          heading="This alert uses a custom message slot"
+          dismissible="true"
+          ><ic-button slot="action" variant="secondary">Button</ic-button>
+          <ic-typography variant="body" slot="message">
+            <p>
+              This is some text and
+              <ic-link href="/" inline> this is an inline link</ic-link> within
+              the text.
+            </p>
+          </ic-typography>
+        </ic-alert>
+        <ic-footer
+          align="full-width"
+          description="The ICDS is maintained by the Design Practice Team. If you've got a question or want to feedback, 
+          please get in touch."
+          caption="All content is available under the Open Government Licence v3.0, except source code and code examples which are available under the MIT Licence."
+        >
+          <ic-footer-link slot="link" href="/">Get Started</ic-footer-link>
+          <ic-footer-link slot="link" href="/">Accessibility</ic-footer-link>
+          <ic-footer-link slot="link" href="/">Styles</ic-footer-link>
+          <ic-footer-link slot="link" href="/">Components</ic-footer-link>
+          <ic-footer-link slot="link" href="/">Patterns</ic-footer-link>
+          <ic-footer-link slot="link" href="/">Design toolkit</ic-footer-link>
+          <div
+            slot="logo"
+            style="display:flex; align-items:center; gap:var(--ic-space-sm);"
+          >
+            <ic-button>Slotted Button</ic-button>
+            <ic-footer-link href="/">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                height="48px"
+                viewBox="0 0 24 24"
+                width="48px"
+              >
+                <path d="M0 0h24v24H0V0z" fill="none" />
+                <path
+                  d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-4.86 8.86l-3 3.87L9 13.14 6 17h12l-3.86-5.14z"
+                />
+              </svg>
+            </ic-footer-link>
+          </div>
+        </ic-footer>
+      </div>
+    </ic-theme>`,
+
+  name: "Switch brand",
+};
+
+const inlineRadioSelector = "inline-radio";
+
+export const Playground = {
+  render: (args) =>
+    html` <ic-theme brand-color=${args.brandColor} theme=${args.theme}>
+      <div style="padding-top:10px">
+        <ic-top-navigation
+          app-title="ApplicationName"
+          status="alpha"
+          version="v0.0.7"
+        >
+          <svg
+            slot="app-icon"
+            xmlns="http://www.w3.org/2000/svg"
+            height="24px"
+            viewBox="0 0 24 24"
+            width="24px"
+            fill="#000000"
+          >
+            <path d="M0 0h24v24H0V0z" fill="none" />
+            <path
+              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z"
+            />
+          </svg>
+          <ic-search-bar
+            slot="search"
+            placeholder="Search"
+            label="Search"
+          ></ic-search-bar>
+          <ic-navigation-button
+            label="button1"
+            slot="buttons"
+            onclick="alert('test')"
+          >
+            <svg
+              slot="icon"
+              xmlns="http://www.w3.org/2000/svg"
+              height="24px"
+              viewBox="0 0 24 24"
+              width="24px"
+              fill="#000000"
+            >
+              <path d="M0 0h24v24H0V0z" fill="none" />
+              <path
+                d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z"
+              />
+            </svg>
+          </ic-navigation-button>
+          <ic-navigation-item
+            slot="navigation"
+            label="Navigation"
+            href="/"
+          ></ic-navigation-item>
+          <ic-navigation-item
+            slot="navigation"
+            label="Navigation"
+            href="/"
+          ></ic-navigation-item>
+          <ic-navigation-item
+            slot="navigation"
+            label="Navigation"
+            href="/"
+          ></ic-navigation-item>
+          <ic-navigation-item
+            slot="navigation"
+            label="Navigation"
+            href="/"
+            selected="true"
+          ></ic-navigation-item>
+          <ic-navigation-item
+            slot="navigation"
+            label="Navigation"
+            href="/"
+          ></ic-navigation-item>
+        </ic-top-navigation>
+        <ic-hero
+          heading="Hero heading"
+          subheading="Hero description. This is a Hero component, it should be used as a page heading."
+          secondary-heading="Secondary Heading"
+          secondary-subheading="This is a secondary description."
+          full-width
+        >
+          <div slot="interaction" style="display: flex">
+            <ic-text-field
+              placeholder="Filter display"
+              label="Filter display"
+              hide-label
+            ></ic-text-field>
+            <ic-button variant="primary" style="margin-left:16px"
+              >Filter</ic-button
+            >
+          </div>
+          <ic-button variant="secondary" slot="interaction">See all</ic-button>
+          <ic-link
+            href="https://google.com"
+            slot="interaction"
+            style="margin-top:10px"
+            >Help</ic-link
+          >
+        </ic-hero>
+        <ic-section-container
+          style="display:flex; flex-direction: column; gap: 0.5rem"
+        >
+          <ic-checkbox
+            value="valueName1"
+            label="Unselected / Default"
+          ></ic-checkbox>
+          <ic-text-field
+            label="What is your favourite coffee?"
+            required
+            placeholder="Placeholder"
+            helper-text="Such as Arabica, Robusta or Liberica"
+          >
+          </ic-text-field>
+          <ic-alert
+            heading="This alert uses a custom message slot"
+            dismissible="true"
+            ><ic-button slot="action" variant="secondary">Button</ic-button>
+            <ic-typography variant="body" slot="message">
+              <p>
+                This is some text and
+                <ic-link href="/" inline> this is an inline link</ic-link>
+                within the text.
+              </p>
+            </ic-typography>
+          </ic-alert>
+          <ic-card-vertical
+            heading="This is the card heading"
+          ></ic-card-vertical>
+          <ic-text-field
+            label="What is your favourite coffee?"
+            required
+            placeholder="Placeholder"
+            helper-text="Such as Arabica, Robusta or Liberica"
+          >
+          </ic-text-field>
+          <div style="background-color:#000000; border: 1px solid #ffffff;">
+            <span style="color:#ffffff"
+              >This content is in an ic-theme component with dark mode set</span
+            >
+            <ic-theme theme="dark">
+              <ic-card-vertical
+                heading="This is the card heading"
+              ></ic-card-vertical>
+              <ic-text-field
+                label="What is your favourite coffee?"
+                required
+                placeholder="Placeholder"
+                helper-text="Such as Arabica, Robusta or Liberica"
+              >
+              </ic-text-field>
+            </ic-theme>
+          </div>
+        </ic-section-container>
+        <ic-footer
+          align="full-width"
+          description="The ICDS is maintained by the Design Practice Team. If you've got a question or want to feedback, 
+          please get in touch."
+          caption="All content is available under the Open Government Licence v3.0, except source code and code examples which are available under the MIT Licence."
+        >
+          <ic-footer-link slot="link" href="/">Get Started</ic-footer-link>
+          <ic-footer-link slot="link" href="/">Accessibility</ic-footer-link>
+          <ic-footer-link slot="link" href="/">Styles</ic-footer-link>
+          <ic-footer-link slot="link" href="/">Components</ic-footer-link>
+          <ic-footer-link slot="link" href="/">Patterns</ic-footer-link>
+          <ic-footer-link slot="link" href="/">Design toolkit</ic-footer-link>
+          <div
+            slot="logo"
+            style="display:flex; align-items:center; gap:var(--ic-space-sm);"
+          >
+            <ic-button>Slotted Button</ic-button>
+            <ic-footer-link href="/">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                height="48px"
+                viewBox="0 0 24 24"
+                width="48px"
+              >
+                <path d="M0 0h24v24H0V0z" fill="none" />
+                <path
+                  d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-4.86 8.86l-3 3.87L9 13.14 6 17h12l-3.86-5.14z"
+                />
+              </svg>
+            </ic-footer-link>
+          </div>
+        </ic-footer>
+        <ic-back-to-top target="topEl"></ic-back-to-top>
+      </div>
+    </ic-theme>`,
+
+  name: "Playground",
+  args: defaultArgs,
+
+  parameters: {
+    layout: "fullscreen",
+  },
+
+  argTypes: {
+    theme: {
+      options: ["system", "light", "dark"],
+
+      control: {
+        type: inlineRadioSelector,
+      },
+    },
+  },
+};
+
+export const ThemeVisualisationPlayground = {
+  render: (args) =>
+    html`<div
+      style="background-color: ${args.theme == "dark"
+        ? "black"
+        : args.theme == "light"
+        ? "white"
+        : null};width:450px;height:150px"
+    >
+      <ic-theme theme=${args.theme}>
+        <div
+          style="background-color: ${args.componentTheme == "dark"
+            ? "black"
+            : args.componentTheme == "light"
+            ? "white"
+            : null};width:250px"
+        >
+          <ic-typography theme=${args.componentTheme}>Theme test</ic-typography>
+        </div>
+      </ic-theme>
+    </div>`,
+
+  name: "Theme visualisation playground",
+  args: defaultThemeArgs,
+
+  parameters: {
+    layout: "fullscreen",
+  },
+
+  argTypes: {
+    theme: {
+      options: ["system", "light", "dark"],
+
+      control: {
+        type: inlineRadioSelector,
+      },
+    },
+
+    componentTheme: {
+      options: ["inherit", "light", "dark"],
+
+      control: {
+        type: inlineRadioSelector,
+      },
+    },
+  },
+};

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

@@ -445,6 +445,16 @@ video {
  * @prop --ic-z-index-toast: z-index of toast
  */
 
+@media (prefers-reduced-motion: no-preference) {
+  :host {
+    animation: fadein var(--ic-transition-duration-slow) ease-in-out;
+  }
+
+  :host(.hidden) {
+    animation: fadeout var(--ic-transition-duration-slow) ease-in-out;
+  }
+}
+
 :host {
   --bottom-position: var(--ic-space-xl);
 
@@ -452,13 +462,11 @@ video {
   bottom: var(--bottom-position);
   left: 50%;
   transform: translate(-50%);
-  animation: fadein var(--ic-transition-duration-slow) ease-in-out;
   z-index: var(--ic-z-index-toast);
 }
 
 :host(.ic-toast-hidden) {
   display: none;
-  animation: fadeout var(--ic-transition-duration-slow) ease-in-out;
 }
 
 :host(:focus) {
@@ -470,8 +478,7 @@ video {
   min-width: 18rem;
   box-shadow: var(--ic-elevation-overlay);
   min-height: 3.5rem;
-  background-color: var(--ic-architectural-800);
-  color: var(--ic-color-white-text);
+  background-color: var(--ic-toast-background);
   display: flex;
   align-items: center;
   position: relative;
@@ -492,23 +499,23 @@ video {
 }
 
 .divider-neutral {
-  background-color: var(--ic-status-unknown);
+  background-color: var(--ic-toast-status-neutral);
 }
 
 .divider-info {
-  background-color: var(--ic-status-info-contrast);
+  background-color: var(--ic-toast-status-info);
 }
 
 .divider-warning {
-  background-color: var(--ic-status-warning-contrast);
+  background-color: var(--ic-toast-status-warning);
 }
 
 .divider-error {
-  background-color: var(--ic-status-error-contrast);
+  background-color: var(--ic-toast-status-error);
 }
 
 .divider-success {
-  background-color: var(--ic-status-success-contrast);
+  background-color: var(--ic-toast-status-success);
 }
 
 .toast-icon,
@@ -520,23 +527,23 @@ video {
 
 :host([variant="neutral"]) .toast-icon svg,
 ::slotted(svg) {
-  fill: var(--ic-status-unknown);
+  fill: var(--ic-toast-icon-neutral);
 }
 
 :host([variant="info"]) .toast-icon svg {
-  fill: var(--ic-status-info-contrast);
+  fill: var(--ic-toast-icon-info);
 }
 
 :host([variant="warning"]) .toast-icon svg {
-  fill: var(--ic-status-warning-contrast);
+  fill: var(--ic-toast-icon-warning);
 }
 
 :host([variant="error"]) .toast-icon svg {
-  fill: var(--ic-status-error-contrast);
+  fill: var(--ic-toast-icon-error);
 }
 
 :host([variant="success"]) .toast-icon svg {
-  fill: var(--ic-status-success-contrast);
+  fill: var(--ic-toast-icon-success);
 }
 
 .toast-content {
@@ -548,18 +555,35 @@ video {
   margin-left: var(--ic-space-md);
 }
 
-.toast-message {
+.toast-text {
   padding: var(--ic-space-xs) var(--ic-space-xs) var(--ic-space-xs) 0;
 }
 
+.toast-heading {
+  --ic-typography-color: var(--ic-toast-title);
+}
+
+.toast-message {
+  --ic-typography-color: var(--ic-toast-description);
+}
+
 .toast-action-container {
   padding-bottom: var(--ic-space-md);
 }
 
-ic-button {
+#dismiss-button {
   padding: var(--ic-space-xs);
 }
 
+#dismiss-button > svg {
+  color: var(--ic-toast-dismiss-button);
+}
+
+ic-loading-indicator {
+  --outer-color: transparent;
+  --inner-color: var(--ic-action-monochrome);
+}
+
 .toast-dismiss-timer {
   padding: var(--ic-space-sm);
 }
@@ -580,7 +604,7 @@ ic-button {
 
 @media (forced-colors: active) {
   .container {
-    border: var(--ic-hc-border);
+    border: var(--ic-border-hc);
   }
 }