@ukic/web-components 3.0.0 → 3.1.0

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

@@ -0,0 +1,366 @@
+import { html } from "lit-html";
+
+const defaultArgs = {
+  disableHover: false,
+  maxLines: 3,
+  placement: "bottom",
+  label: "This is a description of the button",
+  theme: "inherit",
+};
+
+export default {
+  title: "Web Components/Tooltip",
+  component: "ic-tooltip",
+};
+
+export const Default = {
+  render: (args) =>
+    html`<ic-tooltip
+      label="This is a description of the button"
+      target="test-button-default"
+      id="ic-tooltip-test-button-default"
+      ><button
+        id="test-button-default"
+        aria-describedby="ic-tooltip-test-button-default"
+      >
+        Default
+      </button></ic-tooltip
+    >`,
+
+  name: "Default",
+  height: "100px",
+};
+
+export const UsingExternalMethod = {
+  render: (args) =>
+    html`<script>
+        let display = true;
+        document
+          .querySelector("#clickMe")
+          .addEventListener("click", handleDisplay);
+        const tooltip = document.querySelector("ic-tooltip");
+        function handleDisplay() {
+          tooltip.displayTooltip(display, display);
+          display = !display;
+        }
+      </script>
+      <button id="clickMe">Show tooltip</button>
+      <ic-tooltip
+        label="This is a description of the button"
+        target="test-button-default"
+        id="ic-tooltip-test-button-default"
+        ><button
+          id="test-button-default"
+          aria-describedby="ic-tooltip-test-button-default"
+        >
+          Default
+        </button></ic-tooltip
+      >`,
+
+  name: "Using external method",
+  height: "100px",
+};
+
+export const DisabledHover = {
+  render: (args) =>
+    html`<ic-tooltip
+      label="This shows 'Code' has been copied"
+      target="test-button-disable-hover"
+      id="ic-tooltip-test-button-disable-hover"
+      disable-hover="true"
+      ><button
+        id="test-button-disable-hover"
+        aria-labelledby="ic-tooltip-test-button-disable-hover"
+        onclick="navigator.clipboard.writeText('Code')"
+      >
+        Show tooltip
+      </button></ic-tooltip
+    >`,
+
+  name: "Disabled Hover",
+  height: "100px",
+};
+
+export const TopPlacements = {
+  render: (args) =>
+    html` <div style="margin: 40px">
+      <ic-tooltip
+        placement="top-start"
+        label="This is a description of the button"
+        id="ic-tooltip-test-button-top-start"
+        target="test-button-top-start"
+      >
+        <button
+          id="test-button-top-start"
+          aria-describedby="ic-tooltip-test-button-top-start"
+        >
+          Top start
+        </button>
+      </ic-tooltip>
+      <ic-tooltip
+        placement="top"
+        label="This is a description of the button"
+        id="ic-tooltip-test-button-top"
+        target="test-button-top"
+      >
+        <button
+          id="test-button-top"
+          aria-describedby="ic-tooltip-test-button-top"
+        >
+          Top
+        </button>
+      </ic-tooltip>
+      <ic-tooltip
+        placement="top-end"
+        label="This is a description of the button"
+        id="ic-tooltip-test-button-top-end"
+        target="test-button-top-end"
+      >
+        <button
+          id="test-button-top-end"
+          aria-describedby="ic-tooltip-test-button-top-end"
+        >
+          Top end
+        </button></ic-tooltip
+      >
+    </div>`,
+
+  name: "Top placements",
+};
+
+export const BottomPlacements = {
+  render: (args) =>
+    html` <div style="margin: 40px">
+      <ic-tooltip
+        placement="bottom-start"
+        label="This is a description of the button"
+        id="ic-tooltip-test-button-bottom-start"
+        target="test-button-bottom-start"
+      >
+        <button
+          id="test-button-bottom-start"
+          aria-describedby="ic-tooltip-test-button-bottom-start"
+        >
+          Bottom start
+        </button>
+      </ic-tooltip>
+      <ic-tooltip
+        placement="bottom"
+        label="This is a description of the button"
+        id="ic-tooltip-test-button-bottom"
+        target="test-button-bottom"
+      >
+        <button
+          id="test-button-bottom"
+          aria-describedby="ic-tooltip-test-button-bottom"
+        >
+          Bottom
+        </button>
+      </ic-tooltip>
+      <ic-tooltip
+        placement="bottom-end"
+        label="This is a description of the button"
+        id="ic-tooltip-test-button-bottom-end"
+        target="test-button-bottom-end"
+      >
+        <button
+          id="test-button-bottom-end"
+          aria-describedby="ic-tooltip-test-button-bottom-end"
+        >
+          Bottom end
+        </button></ic-tooltip
+      >
+    </div>`,
+
+  name: "Bottom placements",
+};
+
+export const RightPlacements = {
+  render: (args) =>
+    html` <div style="margin: 40px">
+      <ic-tooltip
+        placement="right-start"
+        label="This is a description of the button"
+        id="ic-tooltip-test-button-right-start"
+        target="test-button-right-start"
+      >
+        <button
+          id="test-button-right-start"
+          aria-describedby="ic-tooltip-test-button-right-start"
+        >
+          Right start
+        </button>
+      </ic-tooltip>
+      <ic-tooltip
+        placement="right"
+        label="This is a description of the button"
+        id="ic-tooltip-test-button-right"
+        target="test-button-right"
+      >
+        <button
+          id="test-button-right"
+          aria-describedby="ic-tooltip-test-button-right"
+        >
+          Right
+        </button>
+      </ic-tooltip>
+      <ic-tooltip
+        placement="right-end"
+        label="This is a description of the button"
+        id="ic-tooltip-test-button-right-end"
+        target="test-button-right-end"
+      >
+        <button
+          id="test-button-right-end"
+          aria-describedby="ic-tooltip-test-button-right-end"
+        >
+          Right end
+        </button></ic-tooltip
+      >
+    </div>`,
+
+  name: "Right placements",
+};
+
+export const LeftPlacements = {
+  render: (args) =>
+    html` <div style="margin-left: 400px">
+      <ic-tooltip
+        placement="left-start"
+        label="This is a description of the button"
+        id="ic-tooltip-test-button-left-start"
+        target="test-button-left-start"
+      >
+        <button
+          id="test-button-left-start"
+          aria-describedby="ic-tooltip-test-button-left-start"
+        >
+          Left start
+        </button>
+      </ic-tooltip>
+      <ic-tooltip
+        placement="left"
+        label="This is a description of the button"
+        id="ic-tooltip-test-button-left"
+        target="test-button-left"
+      >
+        <button
+          id="test-button-left"
+          aria-describedby="ic-tooltip-test-button-left"
+        >
+          Left
+        </button>
+      </ic-tooltip>
+      <ic-tooltip
+        placement="left-end"
+        label="This is a description of the button"
+        id="ic-tooltip-test-button-left-end"
+        target="test-button-left-end"
+      >
+        <button
+          id="test-button-left-end"
+          aria-describedby="ic-tooltip-test-button-left-end"
+        >
+          Left end
+        </button></ic-tooltip
+      >
+    </div>`,
+
+  name: "Left placements",
+};
+
+export const Truncation = {
+  render: (args) =>
+    html`<ic-tooltip
+      label="This is a body of text that is truncated to three lines within a tooltip. It has been truncated based on the max-lines property. The number of lines in the text is clamped to the number passed through the max-lines property."
+      target="test-button-truncation"
+      max-lines="3"
+      id="ic-tooltip-test-button-truncation"
+      ><button
+        id="test-button-truncation"
+        aria-describedby="ic-tooltip-test-button-truncation"
+      >
+        Default
+      </button></ic-tooltip
+    >`,
+
+  name: "Truncation",
+  height: "100px",
+};
+
+export const DarkBackground = {
+  render: (args) =>
+    html`<div style="height: 100px;background-color:#333333;">
+      <ic-tooltip
+        label="This is a description of the button"
+        id="ic-tooltip-test-button-dark"
+        target="test-button-dark"
+      >
+        <button
+          id="test-button-dark"
+          aria-describedby="ic-tooltip-test-button-dark"
+        >
+          Default
+        </button>
+      </ic-tooltip>
+    </div>`,
+
+  name: "Dark background",
+};
+
+export const Playground = {
+  render: (args) =>
+    html`<div style="margin: 250px">
+      <ic-tooltip
+        label=${args.label}
+        placement=${args.placement}
+        max-lines=${args.maxLines}
+        disable-hover=${args.disableHover}
+        id="ic-tooltip-test-button-default"
+        target="button-id"
+        theme=${args.theme}
+      >
+        <button
+          id="button-id"
+          aria-describedby="ic-tooltip-test-button-default"
+        >
+          Button 1
+        </button>
+      </ic-tooltip>
+    </div> `,
+
+  args: defaultArgs,
+
+  argTypes: {
+    placement: {
+      options: [
+        "bottom",
+        "top-start",
+        "top",
+        "top-end",
+        "right-start",
+        "right",
+        "right-end",
+        "bottom-end",
+        "bottom-start",
+        "left-end",
+        "left",
+        "left-start",
+      ],
+
+      control: {
+        type: "select",
+      },
+    },
+
+    theme: {
+      options: ["inherit", "light", "dark"],
+
+      control: {
+        type: "inline-radio",
+      },
+    },
+  },
+
+  name: "Playground",
+};

package/dist/collection/components/ic-top-navigation/ic-top-navigation.css

@@ -443,13 +443,42 @@ video {
 
 :host {
   display: block;
-  color: var(--ic-theme-text);
+  color: var(--ic-top-navigation-text);
   width: 100%;
   position: relative;
+
+  --ic-typography-color: var(--ic-top-navigation-text);
+
+  --ic-button-secondary-text-monochrome: var(--ic-brand-text-color);
+  --ic-button-secondary-border-monochrome: var(--ic-brand-text-color);
+  --navigation-link-colour: var(--ic-top-navigation-text);
+}
+
+:host(.dark) {
+  color: var(--ic-color-text-primary-light);
+  --ic-typography-color: var(--ic-color-text-primary-light);
+  --ic-top-navigation-logo: var(--ic-color-icon-neutral);
+  --ic-top-navigation-icon: var(--ic-color-icon-neutral);
+  --ic-top-navigation-icon-and-label: var(--ic-color-text-primary-light);
+  --ic-top-navigation-theme: var(--ic-color-icon-neutral);
+  --ic-top-navigation-status-tag: var(--ic-color-background-primary-dark);
+  --ic-top-navigation-status-tag-text: var(--ic-color-brand-text);
+  --ic-top-navigation-status-tag-secondary: var(--ic-state-layer-darken-10);
+  --ic-top-navigation-title-hover: var(--ic-action-dark-bg-hover);
+  --ic-top-navigation-title-pressed: var(--ic-action-dark-bg-pressed);
+  --navigation-link-colour: var(--ic-color-text-primary-light);
+}
+
+:host(.dark) ::slotted(ic-navigation-button) {
+  --ic-button-icon-monochrome: var(--ic-color-text-primary-light);
+}
+
+::slotted(ic-navigation-button) {
+  --ic-button-icon-monochrome: white;
 }
 
 :host .top-navigation {
-  background-color: var(--ic-theme-primary);
+  background-color: var(--ic-top-navigation-background);
   height: -moz-max-content;
   height: max-content;
 }
@@ -472,17 +501,17 @@ video {
 :host .title-link ::slotted(a),
 :host .title-link:visited ::slotted(a),
 :host .title-link:active ::slotted(a) {
-  color: var(--ic-theme-text);
+  color: var(--ic-top-navigation-icon-and-label);
   text-decoration: none;
   outline: none;
 }
 
 :host .title-link:hover:not(:focus) {
-  background-color: var(--ic-theme-hover);
+  background-color: var(--ic-top-navigation-title-hover);
 }
 
 :host .title-link:active:not(:focus) {
-  background-color: var(--ic-theme-active);
+  background-color: var(--ic-top-navigation-title-pressed);
 }
 
 :host .title-link:hover {
@@ -501,7 +530,7 @@ video {
 }
 
 :host .nav-panel-container {
-  border-top: var(--ic-keyline-lighten);
+  border-top: var(--ic-space-1px) solid var(--ic-top-navigation-keyline);
   padding: 0 var(--ic-space-lg);
   margin-left: calc(-1 * var(--section-container-margin));
   margin-right: calc(-1 * var(--section-container-margin));
@@ -509,7 +538,7 @@ video {
 }
 
 :host(.dark) .nav-panel-container {
-  border-top: var(--ic-keyline-darken);
+  border-top: var(--ic-border-keyline-darken);
 }
 
 .top-panel-container {
@@ -554,8 +583,9 @@ video {
 
 :host .app-status {
   border-radius: var(--ic-space-md);
-  background-color: var(--ic-architectural-white);
-  color: var(--ic-color-primary-text);
+  background-color: var(--ic-top-navigation-status-tag);
+  color: var(--ic-top-navigation-status-tag-text);
+  --ic-typography-color: var(--ic-top-navigation-status-tag-text);
   padding: var(--ic-space-xxs) var(--ic-space-lg);
   margin-left: var(--ic-space-md);
   flex: 1 1 0;
@@ -563,14 +593,10 @@ video {
   max-width: fit-content;
 }
 
-:host(.dark) .app-status {
-  background-color: var(--ic-theme-text);
-  color: var(--ic-color-white-text);
-}
-
 :host .app-version {
   border-radius: var(--ic-space-md);
-  background-color: var(--ic-theme-active);
+  background-color: var(--ic-top-navigation-status-tag-secondary);
+  color: var(--ic-top-navigation-status-tag);
   padding: var(--ic-space-xxs) var(--ic-space-sm);
   margin-left: var(--ic-space-xs);
   flex: 1 1 0;
@@ -579,13 +605,13 @@ video {
 }
 
 slot[name="app-icon"]::slotted(*) {
-  fill: var(--ic-theme-text);
+  fill: var(--ic-top-navigation-logo);
   width: 2em;
   height: 2em;
 }
 
 slot[name="toggle-icon"] svg {
-  fill: var(--ic-theme-text);
+  fill: var(--ic-top-navigation-icon);
 }
 
 .search-menu-container {
@@ -600,13 +626,17 @@ slot[name="toggle-icon"] svg {
 
 .menu-button-container .navigation-landmark-button-text {
   position: absolute;
-  left: -10000px;
+  left: -9999px;
   top: auto;
   width: 1px;
   height: 1px;
   overflow: hidden;
 }
 
+.menu-button-container .navigation-landmark-button-text:dir(rtl) {
+  right: -9999px;
+}
+
 .search-actions-container {
   display: flex;
 }
@@ -671,7 +701,7 @@ slot[name="toggle-icon"] svg {
   display: flex;
   justify-content: center;
   align-items: center;
-  border-top: var(--ic-keyline-darken);
+  border-top: var(--ic-border-keyline-darken);
   height: 4rem;
   padding-left: var(--ic-space-md);
   padding-right: var(--ic-space-md);
@@ -716,15 +746,19 @@ slot[name="toggle-icon"] svg {
 
 @media (forced-colors: active) {
   :host .top-navigation {
-    border-bottom: var(--ic-hc-border);
+    border-bottom: var(--ic-border-hc);
   }
 
   .app-status,
   .app-version {
-    border: var(--ic-hc-border);
+    border: var(--ic-border-hc);
   }
 
   slot[name="app-icon"]::slotted(*) {
     fill: currentcolor;
   }
+
+  slot[name="toggle-icon"] svg {
+    fill: currentcolor;
+  }
 }