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

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

@@ -0,0 +1,447 @@
+import { html } from "lit-html";
+
+const defaultArgs = {
+  applyVerticalMargins: false,
+  bold: false,
+  italic: false,
+  strikethrough: false,
+  underline: false,
+  variant: "body",
+  theme: "inherit",
+};
+
+export default {
+  title: "Web Components/Typography",
+  component: "ic-typography",
+};
+
+export const Default = {
+  render: (args) => html`<ic-typography>I am typography</ic-typography>`,
+  name: "Default",
+};
+
+export const Variants = {
+  render: () => html`
+    <ic-typography variant="h1">Extra large title</ic-typography>
+    <ic-typography variant="h2">Large title</ic-typography>
+    <ic-typography variant="h3">Medium title</ic-typography>
+    <ic-typography variant="h4">Small title</ic-typography>
+    <ic-typography variant="subtitle-large">Subtitle 1</ic-typography>
+    <ic-typography variant="subtitle-small">Subtitle 2</ic-typography>
+    <ic-typography variant="body">Body text</ic-typography>
+    <ic-typography variant="label">Label</ic-typography>
+    <ic-typography variant="caption">Caption text</ic-typography>
+    <ic-typography variant="caption-uppercase">Caption uppercase</ic-typography>
+    <ic-typography variant="label-uppercase">Label uppercase</ic-typography>
+    <ic-typography variant="code-large">Code large</ic-typography>
+    <ic-typography variant="code-small">Code small</ic-typography>
+    <ic-typography variant="code-extra-small">Code extra small</ic-typography>
+    <ic-typography variant="badge">Badge</ic-typography>
+    <ic-typography variant="badge-small">Badge small</ic-typography>
+  `,
+
+  name: "Variants",
+};
+
+export const ComponentOverride = {
+  render: () => html`
+    <ic-typography variant="h1"><h3>H3 rendered as H1</h3></ic-typography>
+  `,
+
+  name: "Component override",
+};
+
+export const VerticalMargins = {
+  render: () => html`
+    <ic-typography apply-vertical-margins variant="h1"
+      >Extra large title</ic-typography
+    >
+    <ic-typography apply-vertical-margins variant="h2"
+      >Large title</ic-typography
+    >
+    <ic-typography apply-vertical-margins variant="h3"
+      >Medium title</ic-typography
+    >
+    <ic-typography apply-vertical-margins variant="h4"
+      >Small title</ic-typography
+    >
+    <ic-typography apply-vertical-margins variant="subtitle-large"
+      >Subtitle 1</ic-typography
+    >
+    <ic-typography apply-vertical-margins variant="subtitle-small"
+      >Subtitle 2</ic-typography
+    >
+    <ic-typography apply-vertical-margins variant="body"
+      >Body text</ic-typography
+    >
+    <ic-typography apply-vertical-margins variant="caption"
+      >Caption text</ic-typography
+    >
+    <ic-typography apply-vertical-margins variant="caption-uppercase"
+      >Caption uppercase</ic-typography
+    >
+    <ic-typography apply-vertical-margins variant="code-large"
+      >Code large</ic-typography
+    >
+    <ic-typography apply-vertical-margins variant="code-small"
+      >Code small</ic-typography
+    >
+    <ic-typography apply-vertical-margins variant="code-extra-small"
+      >Code extra small</ic-typography
+    >
+  `,
+
+  name: "Vertical margins",
+};
+
+export const Truncation = {
+  render: () => html`
+    <ic-typography max-lines="3" variant="body">
+      Body of text that is truncated to three lines. Click the 'See more' link
+      to expand the text, then click 'See less' to truncate the text once more!
+      <br />
+      Dripper caramelization java saucer grounds galão, mocha, and robusta
+      kopi-luwak, percolator, instant, qui saucer latte in brewed café au lait.
+      Con panna, cup, cream, body americano affogato cup espresso, rich milk
+      seasonal saucer grinder spoon that cultivar strong redeye frappuccino
+      barista extraction redeye mazagran. Grounds, french press dripper organic
+      and foam id saucer, crema, black rich dark, grounds breve coffee steamed
+      caramelization percolator.
+    </ic-typography>
+  `,
+
+  name: "Truncation",
+};
+
+export const Bold = {
+  render: () => html`
+    <ic-typography variant="h1" bold="true">Extra large title</ic-typography>
+    <ic-typography variant="h2" bold="true">Large title</ic-typography>
+    <ic-typography variant="h3" bold="true">Medium title</ic-typography>
+    <ic-typography variant="h4" bold="true">Small title</ic-typography>
+    <ic-typography variant="subtitle-large" bold="true"
+      >Subtitle 1</ic-typography
+    >
+    <ic-typography variant="subtitle-small" bold="true"
+      >Subtitle 2</ic-typography
+    >
+    <ic-typography variant="body" bold="true">Body text</ic-typography>
+    <ic-typography variant="label" bold="true">Label</ic-typography>
+    <ic-typography variant="caption" bold="true">Caption text</ic-typography>
+    <ic-typography variant="caption-uppercase" bold="true"
+      >Caption uppercase</ic-typography
+    >
+    <ic-typography variant="label-uppercase" bold="true"
+      >Label uppercase</ic-typography
+    >
+    <ic-typography variant="code-large" bold="true">Code large</ic-typography>
+    <ic-typography variant="code-small" bold="true">Code small</ic-typography>
+    <ic-typography variant="code-extra-small" bold="true"
+      >Code extra small</ic-typography
+    >
+  `,
+
+  name: "Bold",
+};
+
+export const Italic = {
+  render: () => html`
+    <ic-typography variant="h1" italic="true">Extra large title</ic-typography>
+    <ic-typography variant="h2" italic="true">Large title</ic-typography>
+    <ic-typography variant="h3" italic="true">Medium title</ic-typography>
+    <ic-typography variant="h4" italic="true">Small title</ic-typography>
+    <ic-typography variant="subtitle-large" italic="true"
+      >Subtitle 1</ic-typography
+    >
+    <ic-typography variant="subtitle-small" italic="true"
+      >Subtitle 2</ic-typography
+    >
+    <ic-typography variant="body" italic="true">Body text</ic-typography>
+    <ic-typography variant="label" italic="true">Label</ic-typography>
+    <ic-typography variant="caption" italic="true">Caption text</ic-typography>
+    <ic-typography variant="caption-uppercase" italic="true"
+      >Caption uppercase</ic-typography
+    >
+    <ic-typography variant="label-uppercase" italic="true"
+      >Label uppercase</ic-typography
+    >
+    <ic-typography variant="code-large" italic="true">Code large</ic-typography>
+    <ic-typography variant="code-small" italic="true">Code small</ic-typography>
+    <ic-typography variant="code-extra-small" italic="true"
+      >Code extra small</ic-typography
+    >
+  `,
+
+  name: "Italic",
+};
+
+export const Strikethrough = {
+  render: () => html`
+    <ic-typography variant="h1" strikethrough="true"
+      >Extra large title</ic-typography
+    >
+    <ic-typography variant="h2" strikethrough="true">Large title</ic-typography>
+    <ic-typography variant="h3" strikethrough="true"
+      >Medium title</ic-typography
+    >
+    <ic-typography variant="h4" strikethrough="true">Small title</ic-typography>
+    <ic-typography variant="subtitle-large" strikethrough="true"
+      >Subtitle 1</ic-typography
+    >
+    <ic-typography variant="subtitle-small" strikethrough="true"
+      >Subtitle 2</ic-typography
+    >
+    <ic-typography variant="body" strikethrough="true">Body text</ic-typography>
+    <ic-typography variant="label" strikethrough="true">Label</ic-typography>
+    <ic-typography variant="caption" strikethrough="true"
+      >Caption text</ic-typography
+    >
+    <ic-typography variant="caption-uppercase" strikethrough="true"
+      >Caption uppercase</ic-typography
+    >
+    <ic-typography variant="label-uppercase" strikethrough="true"
+      >Label uppercase</ic-typography
+    >
+    <ic-typography variant="code-large" strikethrough="true"
+      >Code large</ic-typography
+    >
+    <ic-typography variant="code-small" strikethrough="true"
+      >Code small</ic-typography
+    >
+    <ic-typography variant="code-extra-small" strikethrough="true"
+      >Code extra small</ic-typography
+    >
+  `,
+
+  name: "Strikethrough",
+};
+
+export const Underline = {
+  render: () => html`
+    <ic-typography variant="h1" underline="true"
+      >Extra large title</ic-typography
+    >
+    <ic-typography variant="h2" underline="true">Large title</ic-typography>
+    <ic-typography variant="h3" underline="true">Medium title</ic-typography>
+    <ic-typography variant="h4" underline="true">Small title</ic-typography>
+    <ic-typography variant="subtitle-large" underline="true"
+      >Subtitle 1</ic-typography
+    >
+    <ic-typography variant="subtitle-small" underline="true"
+      >Subtitle 2</ic-typography
+    >
+    <ic-typography variant="body" underline="true">Body text</ic-typography>
+    <ic-typography variant="label" underline="true">Label</ic-typography>
+    <ic-typography variant="caption" underline="true"
+      >Caption text</ic-typography
+    >
+    <ic-typography variant="caption-uppercase" underline="true"
+      >Caption uppercase</ic-typography
+    >
+    <ic-typography variant="label-uppercase" underline="true"
+      >Label uppercase</ic-typography
+    >
+    <ic-typography variant="code-large" underline="true"
+      >Code large</ic-typography
+    >
+    <ic-typography variant="code-small" underline="true"
+      >Code small</ic-typography
+    >
+    <ic-typography variant="code-extra-small" underline="true"
+      >Code extra small</ic-typography
+    >
+  `,
+
+  name: "Underline",
+};
+
+export const AllPropTextStyles = {
+  render: () => html`
+    <ic-typography
+      variant="h1"
+      strikethrough="true"
+      italic="true"
+      bold="true"
+      underline="true"
+      >Extra large title</ic-typography
+    >
+    <ic-typography
+      variant="h2"
+      strikethrough="true"
+      italic="true"
+      bold="true"
+      underline="true"
+      >Large title</ic-typography
+    >
+    <ic-typography
+      variant="h3"
+      strikethrough="true"
+      italic="true"
+      bold="true"
+      underline="true"
+      >Medium title</ic-typography
+    >
+    <ic-typography
+      variant="h4"
+      strikethrough="true"
+      italic="true"
+      bold="true"
+      underline="true"
+      >Small title</ic-typography
+    >
+    <ic-typography
+      variant="subtitle-large"
+      strikethrough="true"
+      italic="true"
+      bold="true"
+      underline="true"
+      >Subtitle 1</ic-typography
+    >
+    <ic-typography
+      variant="subtitle-small"
+      strikethrough="true"
+      italic="true"
+      bold="true"
+      underline="true"
+      >Subtitle 2</ic-typography
+    >
+    <ic-typography
+      variant="body"
+      strikethrough="true"
+      italic="true"
+      bold="true"
+      underline="true"
+      >Body text</ic-typography
+    >
+    <ic-typography
+      variant="label"
+      strikethrough="true"
+      italic="true"
+      bold="true"
+      underline="true"
+      >Label</ic-typography
+    >
+    <ic-typography
+      variant="caption"
+      strikethrough="true"
+      italic="true"
+      bold="true"
+      underline="true"
+      >Caption text</ic-typography
+    >
+    <ic-typography
+      variant="caption-uppercase"
+      strikethrough="true"
+      italic="true"
+      bold="true"
+      underline="true"
+      >Caption uppercase</ic-typography
+    >
+    <ic-typography
+      variant="label-uppercase"
+      strikethrough="true"
+      italic="true"
+      bold="true"
+      underline="true"
+      >Label uppercase</ic-typography
+    >
+    <ic-typography
+      variant="code-large"
+      strikethrough="true"
+      italic="true"
+      bold="true"
+      underline="true"
+      >Code large</ic-typography
+    >
+    <ic-typography
+      variant="code-small"
+      strikethrough="true"
+      italic="true"
+      bold="true"
+      underline="true"
+      >Code small</ic-typography
+    >
+    <ic-typography
+      variant="code-extra-small"
+      strikethrough="true"
+      italic="true"
+      bold="true"
+      underline="true"
+      >Code extra small</ic-typography
+    >
+  `,
+
+  name: "All prop text styles",
+};
+
+export const MinAndMaxContent = {
+  render: () => html`
+    <ic-typography variant="body">A</ic-typography>
+    <ic-typography variant="body"
+      >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam egestas
+      eget lorem sed luctus. Aenean vitae lorem leo. Pellentesque fringilla
+      semper posuere. Nullam eget sem felis. Fusce quis laoreet arcu. Nulla
+      commodo fringilla magna eget vehicula. Morbi ac nisl tellus. Ut mollis,
+      nunc blandit aliquam dignissim, neque neque rhoncus nisi, at maximus
+      ligula est vitae felis. Nunc at eros posuere, finibus metus sit amet,
+      cursus mi. Nunc euismod ac turpis sit amet luctus. Pellentesque dictum
+      tempor congue. Vivamus consectetur orci eget ante molestie, eget luctus
+      enim tempus. Nam iaculis odio et orci consequat, et volutpat dolor
+      finibus. Proin et porttitor diam. Ut quis est vel diam tincidunt congue
+      nec at ipsum.</ic-typography
+    >
+  `,
+
+  name: "Min and max content",
+};
+
+export const Playground = {
+  render: (args) =>
+    html`<ic-typography
+      apply-vertical-margins=${args.applyVerticalMargins}
+      variant=${args.variant}
+      bold=${args.bold}
+      italic=${args.italic}
+      strikethrough=${args.strikethrough}
+      underline=${args.underline}
+      theme=${args.theme}
+      >Typography to test</ic-typography
+    >`,
+
+  args: defaultArgs,
+
+  argTypes: {
+    variant: {
+      options: [
+        "body",
+        "caption",
+        "h1",
+        "h2",
+        "h3",
+        "h4",
+        "label",
+        "subtitle-large",
+        "subtitle-small",
+        "label-uppercase",
+        "caption-uppercase",
+        "code-large",
+        "code-small",
+        "code-extra-small",
+      ],
+
+      control: {
+        type: "select",
+      },
+    },
+
+    theme: {
+      options: ["inherit", "light", "dark"],
+
+      control: {
+        type: "inline-radio",
+      },
+    },
+  },
+
+  name: "Playground",
+};

package/dist/collection/patterns/top-nav-content-footer.stories.js

@@ -0,0 +1,109 @@
+import { html } from "lit-html";
+
+export default {
+  title: "Patterns/Single Column",
+};
+
+export const SingleColumnWithTopNavigationAndFooter = {
+  render: (args) =>
+    html`<div>
+      <div style="display: flex; flex-direction: column; min-height: 100vh;">
+        <ic-top-navigation
+          app-title="Application Name"
+          status="alpha"
+          version="v0.0.7"
+          content-aligned="center"
+        >
+          <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-group
+            slot="navigation"
+            label="Navigation group"
+            expandable="true"
+          >
+            <ic-navigation-item
+              label="Navigation"
+              href="/"
+            ></ic-navigation-item>
+            <ic-navigation-item
+              label="Navigation"
+              href="/"
+            ></ic-navigation-item>
+          </ic-navigation-group>
+        </ic-top-navigation>
+        <main style="height: 100%">
+          <ic-section-container aligned="center">
+            <ic-typography
+              >Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+              Vestibulum pharetra scelerisque arcu, vitae semper nisl rhoncus
+              ut. Vestibulum molestie enim at sollicitudin pellentesque. Proin
+              sit amet augue sit amet dui suscipit lobortis. Nullam at
+              consectetur ante. Suspendisse mollis ultricies porttitor. Nunc
+              laoreet leo tortor, ut tristique odio finibus a. In rutrum
+              convallis purus, vitae tristique tortor sagittis vel. Donec dictum
+              nunc a elit tristique, et facilisis est condimentum. Pellentesque
+              maximus nulla libero, nec auctor urna consequat nec. Class aptent
+              taciti sociosqu ad litora torquent per conubia nostra, per
+              inceptos himenaeos. In maximus velit a erat volutpat, sit amet
+              consequat velit rhoncus. Mauris pretium neque eget ante
+              consectetur consectetur. Morbi a consequat lectus. Donec venenatis
+              ultricies sem nec pulvinar. Fusce lacus augue, laoreet id pretium
+              id, efficitur nec leo.</ic-typography
+            >
+          </ic-section-container>
+        </main>
+      </div>
+      <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."
+      ></ic-footer>
+    </div>`,
+
+  name: "Single Column with Top Navigation and Footer",
+
+  parameters: {
+    layout: "fullscreen",
+  },
+};