@ukic/web-components 2.35.0 → 2.35.1

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

@@ -0,0 +1,257 @@
+import { html } from "lit-html";
+
+const defaultArgs = {
+  dismissible: false,
+  heading: "Heading",
+  message: "Message",
+  titleAbove: false,
+  variant: "neutral",
+  showAction: false,
+  showDefaultIcon: true,
+  showSlottedIcon: false,
+};
+
+export default {
+  title: "Web Components/Alert",
+  component: "ic-alert",
+};
+
+export const Variants = {
+  render: () =>
+    html`<ic-alert
+        heading="Neutral"
+        message="This alert is for displaying miscellaneous messages"
+      ></ic-alert>
+      <ic-alert
+        variant="info"
+        heading="Info"
+        message="This alert is for displaying information"
+      ></ic-alert>
+      <ic-alert
+        variant="error"
+        heading="Error"
+        message="This alert is for displaying errors"
+      ></ic-alert>
+      <ic-alert
+        variant="warning"
+        heading="Warning"
+        message="This alert is for displaying warnings"
+      ></ic-alert>
+      <ic-alert
+        variant="success"
+        heading="Success"
+        message="This alert is for displaying success messages. It has a very long message with lots of text which goes over multiple
+        lines so the alert should expand as well to make sure it doesn't overflow"
+      ></ic-alert>`,
+
+  name: "Variants",
+};
+
+export const MessageOnly = {
+  render: () =>
+    html`<ic-alert
+      message="This alert is for displaying miscellaneous messages"
+    ></ic-alert>`,
+
+  name: "Message only",
+};
+
+export const Dismissible = {
+  render: () =>
+    html`<ic-alert
+      heading="Neutral"
+      message="This alert is for displaying miscellaneous messages"
+      dismissible="true"
+    ></ic-alert>`,
+
+  name: "Dismissible",
+};
+
+export const WithAction = {
+  render: () =>
+    html`<ic-alert
+      heading="Neutral"
+      message="This alert is for displaying miscellaneous messages"
+      ><ic-button slot="action" variant="secondary">Button</ic-button></ic-alert
+    >`,
+
+  name: "With action",
+};
+
+export const DismissibleWithAction = {
+  render: () =>
+    html`<ic-alert
+      heading="Neutral"
+      message="This alert is for displaying miscellaneous messages"
+      dismissible="true"
+      ><ic-button slot="action" variant="secondary">Button</ic-button></ic-alert
+    >`,
+
+  name: "Dismissible with action",
+};
+
+export const TitleAbove = {
+  render: () =>
+    html`<ic-alert
+      heading="Neutral"
+      message="This alert is for displaying miscellaneous messages"
+      title-above="true"
+    ></ic-alert>`,
+
+  name: "Title above",
+};
+
+export const ResponsiveTitle = {
+  render: () =>
+    html`<ic-alert
+        heading="This title is very long so should force the alert to add 'title-above'"
+        message="This alert does not have 'title-above' added as a prop but it is forced to add it due to the length of the title"
+      ></ic-alert>
+      <ic-alert
+        variant="success"
+        heading="Shorter title"
+        message="Neither of these has 'title-above' set to true"
+      ></ic-alert>`,
+
+  name: "Responsive title",
+};
+
+export const CustomMessage = {
+  render: () =>
+    html`<ic-alert heading="This alert uses a custom message slot">
+      <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>`,
+
+  name: "Custom message",
+};
+
+export const CustomMessageAndTitleAbove = {
+  render: () => html`<ic-alert
+      heading="Want to know more about our coffee?"
+      title-above="true"
+    >
+      <span slot="message" style="font:var(--ic-font-body)">
+        Go to our <ic-link href="/">coffee page</ic-link> to learn more.
+      </ic-typography>
+    </ic-alert>`,
+
+  name: "Custom message and title above",
+};
+
+export const Announced = {
+  render: () => html`
+    <ic-alert
+      id="alert"
+      heading="Neutral"
+      message="This alert is for displaying miscellaneous messages"
+      announced="false"
+    ></ic-alert>
+    <br />
+    <br />
+    <ic-button variant="primary" size="small" onClick="onClick()" id="btn"
+      >Toggle announced prop</ic-button
+    >
+    <script>
+      const alert = document.getElementById("alert");
+      const btn = document.getElementById("btn");
+      btn.addEventListener("click", onClick);
+      function onClick(e) {
+        e.preventDefault();
+        alert.announced
+          ? (alert.announced = "false")
+          : (alert.announced = "true");
+      }
+    </script>
+  `,
+
+  name: "Announced",
+};
+
+export const SlottedIcon = {
+  render: () => html`
+    <ic-alert
+      id="alert"
+      heading="Neutral"
+      message="This alert contains a slotted icon"
+      show-default-icon="false"
+    >
+      <svg
+        slot="neutral-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="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
+        />
+      </svg>
+    </ic-alert>
+  `,
+
+  name: "Slotted icon",
+};
+
+export const NoIcon = {
+  render: () => html`
+    <ic-alert
+      id="alert"
+      heading="Neutral"
+      message="This alert has no icon"
+      show-default-icon="false"
+    ></ic-alert>
+  `,
+
+  name: "No icon",
+};
+
+export const Playground = {
+  render: (args) =>
+    html`<ic-alert
+      dismissible=${args.dismissible}
+      variant=${args.variant}
+      heading=${args.heading}
+      message=${args.message}
+      title-above=${args.titleAbove}
+      show-default-icon=${args.showDefaultIcon}
+    >
+      ${args.showAction &&
+      html`<ic-button slot="action" variant="secondary">Button</ic-button>`}
+      ${args.showSlottedIcon &&
+      html`<svg
+        slot="neutral-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="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
+        />
+      </svg>`}
+    </ic-alert>`,
+
+  args: defaultArgs,
+
+  argTypes: {
+    variant: {
+      options: ["neutral", "info", "warning", "error", "success"],
+
+      control: {
+        type: "select",
+      },
+    },
+  },
+
+  name: "Playground",
+};

package/dist/collection/components/ic-back-to-top/ic-back-to-top.stories.js

@@ -0,0 +1,162 @@
+import { html } from "lit-html";
+
+export default {
+  title: "Web Components/Back to top",
+  component: "ic-back-to-top",
+};
+
+export const Default = {
+  render: () => html`
+    <div id="topEl" style="margin-top:-20px;">
+      <ic-typography variant="h2">Top of the page</ic-typography>
+    </div>
+    <div style="height:1200px;"></div>
+    <ic-back-to-top target="topEl"></ic-back-to-top>
+  `,
+
+  name: "Default",
+};
+
+export const IconOnly = {
+  render: () => html`
+    <div id="topEl" style="margin-top:-20px;">
+      <ic-typography variant="h2">Top of the page</ic-typography>
+    </div>
+    <div style="height:1200px;"></div>
+    <ic-back-to-top target="topEl" variant="icon"></ic-back-to-top>
+  `,
+
+  name: "Icon Only",
+};
+
+export const PageExample = {
+  render: () => html`
+    <div
+      id="header"
+      style="width:100%;height:100px;background-color:#23508e;color:var(--ic-architectural-white)"
+    >
+      <ic-typography variant="h1">Header</ic-typography>
+      <ic-button variant="secondary" appearance="light">Button</ic-button>
+    </div>
+    <div id="topPageEl">
+      <ic-typography variant="h2">Top of the page</ic-typography>
+    </div>
+    <ic-typography variant="h3">Some content</ic-typography>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel velit
+      turpis. Cras ac ligula et lectus mollis molestie in a enim. In ac turpis
+      in leo rutrum eleifend. Fusce consectetur posuere ligula, vitae semper
+      lorem mollis vitae. Fusce vel blandit turpis. Nulla justo ligula, egestas
+      quis rutrum id, vulputate eget diam. Integer mattis quis nisi id blandit.
+      Duis nisi lectus, suscipit elementum iaculis sed, porta et risus.
+    </p>
+    <br />
+    <br />
+    <br />
+    <ic-typography variant="h3">More content</ic-typography>
+    <p>
+      Phasellus accumsan ligula enim, a iaculis sapien rhoncus vitae. Curabitur
+      pulvinar posuere diam in luctus. Sed blandit diam id odio aliquam aliquet.
+      Pellentesque eros enim, tristique vel mattis eu, blandit at enim.
+      Pellentesque sollicitudin pellentesque tellus vel eleifend. Nulla mauris
+      lorem, porttitor vel orci eu, iaculis maximus nunc. Ut rhoncus ex ipsum.
+      Mauris ultricies, augue sed eleifend pellentesque, leo purus efficitur
+      orci, sit amet volutpat tortor diam non lorem. Morbi venenatis neque vel
+      accumsan sagittis. Nunc rutrum augue non urna tincidunt auctor in at
+      libero. Sed in risus sit amet nisl tempor viverra. Phasellus maximus
+      sapien eu erat maximus iaculis. Praesent ultricies id orci eu euismod.
+      Fusce eu urna turpis. Praesent ut neque tincidunt, porta sem id, accumsan
+      massa.
+    </p>
+    <br />
+    <br />
+    <br />
+    <ic-typography variant="h3">Some other content</ic-typography>
+    <p>
+      Curabitur eu tempor justo. Nunc congue viverra tristique. Maecenas massa
+      enim, tincidunt consequat maximus at, fermentum vel lectus. Curabitur at
+      ligula tellus. Ut a elit sit amet augue sagittis feugiat. Mauris mi enim,
+      viverra id turpis ac, auctor vulputate ipsum. Nunc efficitur volutpat
+      augue eget sollicitudin. Pellentesque eget pharetra ligula. Integer
+      finibus feugiat sapien a pulvinar. Phasellus fermentum est lacus, quis
+      volutpat justo pellentesque vitae. Sed vitae diam porta, facilisis metus
+      ut, dictum lorem. Proin sed bibendum libero. Maecenas justo neque,
+      ultricies sed magna ac, mattis vehicula elit. Donec ac lacus eget sapien
+      luctus ultricies in in nibh.
+    </p>
+    <p>
+      Curabitur in nulla urna. Donec ligula est, suscipit eget malesuada vitae,
+      elementum et quam. Lorem ipsum dolor sit amet, consectetur adipiscing
+      elit. Nulla eu dui a quam mollis porta. Nulla ante nunc, ultrices luctus
+      dolor at, ullamcorper convallis erat. Aenean viverra semper arcu nec
+      semper. Sed non magna purus. Integer accumsan dui et volutpat auctor.
+      Phasellus nec risus ultricies, maximus nunc eu, placerat diam. Etiam
+      pulvinar lacinia urna eget molestie. Suspendisse semper hendrerit ipsum,
+      vel porttitor lacus venenatis sit amet. Nullam non elit in sem vestibulum
+      molestie tempor eget augue. Sed neque ligula, tempus ac mollis bibendum,
+      ultrices suscipit risus. Duis suscipit pulvinar varius.
+    </p>
+    <br />
+    <br />
+    <br />
+    <ic-typography variant="h3">Some more</ic-typography>
+    <p>
+      Etiam accumsan nibh erat, condimentum tempus metus suscipit nec. Duis
+      placerat varius dolor eget ornare. Vestibulum egestas tellus non tellus
+      ornare, eu scelerisque erat pulvinar. Nam tempus lacus eu libero
+      consequat, in elementum magna ultricies. Etiam at suscipit odio. Duis quis
+      quam vitae quam varius luctus. Aliquam erat volutpat. Fusce laoreet
+      consectetur tortor, ac suscipit sem feugiat non. Etiam tempus tellus
+      aliquet orci pretium, nec pretium nulla faucibus
+    </p>
+    <br />
+    <ic-button>Button</ic-button>
+    <br />
+    <br />
+    <br />
+    <ic-typography variant="h3">Nearly there</ic-typography>
+    <p>
+      Curabitur eu tempor justo. Nunc congue viverra tristique. Maecenas massa
+      enim, tincidunt consequat maximus at, fermentum vel lectus. Curabitur at
+      ligula tellus. Ut a elit sit amet augue sagittis feugiat. Mauris mi enim,
+      viverra id turpis ac, auctor vulputate ipsum. Nunc efficitur volutpat
+      augue eget sollicitudin. Pellentesque eget pharetra ligula. Integer
+      finibus feugiat sapien a pulvinar. Phasellus fermentum est lacus, quis
+      volutpat justo pellentesque vitae. Sed vitae diam porta, facilisis metus
+      ut, dictum lorem. Proin sed bibendum libero. Maecenas justo neque,
+      ultricies sed magna ac, mattis vehicula elit. Donec ac lacus eget sapien
+      luctus ultricies in in nibh.
+    </p>
+    <p>
+      Curabitur in nulla urna. Donec ligula est, suscipit eget malesuada vitae,
+      elementum et quam. Lorem ipsum dolor sit amet, consectetur adipiscing
+      elit. Nulla eu dui a quam mollis porta. Nulla ante nunc, ultrices luctus
+      dolor at, ullamcorper convallis erat. Aenean viverra semper arcu nec
+      semper. Sed non magna purus. Integer accumsan dui et volutpat auctor.
+      Phasellus nec risus ultricies, maximus nunc eu, placerat diam. Etiam
+      pulvinar lacinia urna eget molestie. Suspendisse semper hendrerit ipsum,
+      vel porttitor lacus venenatis sit amet. Nullam non elit in sem vestibulum
+      molestie tempor eget augue. Sed neque ligula, tempus ac mollis bibendum,
+      ultrices suscipit risus. Duis suscipit pulvinar varius.
+    </p>
+    <br />
+    <br />
+    <br />
+    <ic-typography variant="h3">The end</ic-typography>
+    <br />
+    <ic-back-to-top target="topPageEl"></ic-back-to-top>
+    <footer>
+      <div
+        id="footer"
+        style="width:100%;height:200px;background-color:#23508e;color:var(--ic-architectural-white)"
+      >
+        <ic-typography variant="h3">Footer</ic-typography>
+      </div>
+    </footer>
+    <ic-classification-banner
+      classification="official"
+    ></ic-classification-banner>
+  `,
+
+  name: "Page example",
+};