@ukic/web-components 2.35.0 → 2.35.2

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

@@ -0,0 +1,383 @@
+import { html } from "lit-html";
+
+export default {
+  title: "Web Components/Footer",
+  component: "ic-footer",
+};
+
+export const UngroupedLinks = {
+  render: () => html`
+    <ic-footer
+      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="/" target="_blank"
+        >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="width:100px;height:100px;display:flex;align-items:center;justify-content:center;
+          background-color:var(--ic-theme-primary);color:var(--ic-theme-text);"
+      >
+        Logo
+      </div>
+    </ic-footer>
+  `,
+
+  name: "Ungrouped links",
+};
+
+export const GroupedLinks = {
+  render: () => html`
+    <ic-footer
+      group-links
+      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-group slot="link" group-title="Links 1">
+        <ic-footer-link href="/">Get Started</ic-footer-link>
+        <ic-footer-link href="/">Accessibility</ic-footer-link>
+        <ic-footer-link href="/">Styles</ic-footer-link>
+        <ic-footer-link href="/" target="_blank">Components</ic-footer-link>
+        <ic-footer-link href="/">Patterns</ic-footer-link>
+        <ic-footer-link href="/">Design toolkit</ic-footer-link>
+      </ic-footer-link-group>
+      <ic-footer-link-group slot="link" group-title="Links 2">
+        <ic-footer-link href="/">Get Started</ic-footer-link>
+        <ic-footer-link href="/">Accessibility</ic-footer-link>
+        <ic-footer-link href="/">Styles</ic-footer-link>
+        <ic-footer-link href="/">Components</ic-footer-link>
+        <ic-footer-link href="/">Patterns</ic-footer-link>
+        <ic-footer-link href="/">Design toolkit</ic-footer-link>
+      </ic-footer-link-group>
+      <ic-footer-link-group slot="link" group-title="Links 3">
+        <ic-footer-link href="/">Get Started</ic-footer-link>
+        <ic-footer-link href="/">Accessibility</ic-footer-link>
+        <ic-footer-link href="/">Styles</ic-footer-link>
+        <ic-footer-link href="/">Components</ic-footer-link>
+        <ic-footer-link href="/">Patterns</ic-footer-link>
+        <ic-footer-link href="/">Design toolkit</ic-footer-link>
+      </ic-footer-link-group>
+      <div
+        slot="logo"
+        style="width:100px;height:100px;display:flex;align-items:center;justify-content:center;
+          background-color:var(--ic-theme-primary);color:var(--ic-theme-text);"
+      >
+        Logo
+      </div>
+    </ic-footer>
+  `,
+
+  name: "Grouped links",
+};
+
+export const WithClassificationBanner = {
+  render: () =>
+    html` <ic-classification-banner
+        classification="official"
+      ></ic-classification-banner>
+      <ic-footer
+        aligned="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."
+        style="position:fixed;bottom:0;left:0;right:0;"
+      >
+        <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="width:100px;height:100px;display:flex;align-items:center;justify-content:center;
+          background-color:var(--ic-theme-primary);color:var(--ic-theme-text);"
+        >
+          Logo
+        </div>
+        <div
+          slot="logo"
+          style="width:100px;height:100px;display:flex;align-items:center;justify-content:center;
+          background-color:var(--ic-theme-primary);color:var(--ic-theme-texy);"
+        >
+          Logo
+        </div>
+        <div
+          slot="logo"
+          style="width:100px;height:100px;display:flex;align-items:center;justify-content:center;
+          background-color:var(--ic-theme-primary);color:var(--ic-theme-text);"
+        >
+          Logo
+        </div>
+      </ic-footer>`,
+
+  name: "With classification banner",
+};
+
+export const Theming = {
+  render: () =>
+    html` <ic-theme color="rgb(27, 60, 121)"></ic-theme>
+      <ic-button
+        variant="primary"
+        id="default-btn"
+        onClick="document.querySelector('ic-theme').color='rgb(27, 60, 121)'"
+      >
+        Default theme
+      </ic-button>
+      <ic-button
+        variant="primary"
+        id="custom-btn"
+        onClick="document.querySelector('ic-theme').color='rgb(255, 201, 60)'"
+      >
+        Sunrise theme
+      </ic-button>
+      <ic-footer
+        group-links
+        aligned="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."
+        style="position:fixed;bottom:0;left:0;right:0;"
+      >
+        <ic-footer-link-group slot="link" group-title="Links 1">
+          <ic-footer-link href="/">Get Started</ic-footer-link>
+          <ic-footer-link href="/">Accessibility</ic-footer-link>
+          <ic-footer-link href="/">Styles</ic-footer-link>
+          <ic-footer-link href="/">Components</ic-footer-link>
+          <ic-footer-link href="/">Patterns</ic-footer-link>
+          <ic-footer-link href="/">Design toolkit</ic-footer-link>
+        </ic-footer-link-group>
+        <ic-footer-link-group slot="link" group-title="Links 2">
+          <ic-footer-link href="/">Get Started</ic-footer-link>
+          <ic-footer-link href="/">Accessibility</ic-footer-link>
+          <ic-footer-link href="/">Styles</ic-footer-link>
+          <ic-footer-link href="/">Components</ic-footer-link>
+          <ic-footer-link href="/">Patterns</ic-footer-link>
+          <ic-footer-link href="/">Design toolkit</ic-footer-link>
+        </ic-footer-link-group>
+        <ic-footer-link-group slot="link" group-title="Links 3">
+          <ic-footer-link href="/">Get Started</ic-footer-link>
+          <ic-footer-link href="/">Accessibility</ic-footer-link>
+          <ic-footer-link href="/">Styles</ic-footer-link>
+          <ic-footer-link href="/">Components</ic-footer-link>
+          <ic-footer-link href="/">Patterns</ic-footer-link>
+          <ic-footer-link href="/">Design toolkit</ic-footer-link>
+        </ic-footer-link-group>
+        <div
+          slot="logo"
+          style="width:100px;height:100px;display:flex;align-items:center;justify-content:center;
+            background-color:var(--ic-theme-primary);color:var(--ic-theme-text);"
+        >
+          Logo
+        </div>
+        <div
+          slot="logo"
+          style="width:100px;height:100px;display:flex;align-items:center;justify-content:center;
+            background-color:var(--ic-theme-primary);color:var(--ic-theme-texy);"
+        >
+          Logo
+        </div>
+        <div
+          slot="logo"
+          style="width:100px;height:100px;display:flex;align-items:center;justify-content:center;
+            background-color:var(--ic-theme-primary);color:var(--ic-theme-text);"
+        >
+          Logo
+        </div>
+      </ic-footer>`,
+
+  name: "Theming",
+};
+
+export const WithLogoLinks = {
+  render: () => html`
+    <ic-footer
+      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;gap:var(--ic-space-sm);">
+        <ic-footer-link href="/">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            height="48px"
+            viewBox="0 0 24 24"
+            width="48px"
+            fill="#FFFFFF"
+            aria-label="logo"
+          >
+            <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>
+        <ic-footer-link href="/">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            height="48px"
+            viewBox="0 0 24 24"
+            width="48px"
+            fill="#FFFFFF"
+            aria-label="logo"
+          >
+            <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>
+        <ic-footer-link href="/">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            height="48px"
+            viewBox="0 0 24 24"
+            width="48px"
+            fill="#FFFFFF"
+            aria-label="logo"
+          >
+            <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>
+  `,
+
+  name: "With logo links",
+};
+
+export const FooterWithNoCaptionOrLogoOrCopyright = {
+  render: () => html`
+    <ic-footer
+      description="The ICDS is maintained by the Design Practice Team. If you've got a question or want to feedback, 
+          please get in touch."
+      copyright="false"
+    >
+      <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="/" target="_blank"
+        >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>
+    </ic-footer>
+  `,
+
+  name: "Footer with no caption or logo or copyright",
+};
+
+export const FooterWithNoLinks = {
+  render: () => html`
+    <ic-footer
+      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>
+  `,
+
+  name: "Footer with no links",
+};
+
+export const Breakpoint = {
+  render: () => html`
+    <ic-footer
+      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."
+      breakpoint="extra large"
+    >
+      <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;gap:var(--ic-space-sm);">
+        <ic-footer-link href="/">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            height="48px"
+            viewBox="0 0 24 24"
+            width="48px"
+            fill="#FFFFFF"
+            aria-label="logo"
+          >
+            <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>
+        <ic-footer-link href="/">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            height="48px"
+            viewBox="0 0 24 24"
+            width="48px"
+            fill="#FFFFFF"
+            aria-label="logo"
+          >
+            <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>
+        <ic-footer-link href="/">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            height="48px"
+            viewBox="0 0 24 24"
+            width="48px"
+            fill="#FFFFFF"
+            aria-label="logo"
+          >
+            <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>
+  `,
+
+  name: "Breakpoint",
+};
+
+export const SlottedDescriptionAndCaption = {
+  render: () => html`
+    <ic-footer>
+      <ic-typography slot="description"
+        >The ICDS is maintained by the Design Practice Team. If you've got a
+        question or want to feedback, please get in touch.</ic-typography
+      >
+      <ic-typography slot="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-typography
+      >
+    </ic-footer>
+  `,
+
+  name: "Slotted description and caption",
+};