@ukic/web-components 3.0.0-alpha.1 → 3.0.0-alpha.11

package/dist/collection/components/ic-card-vertical/ic-card-vertical.stories.js

@@ -0,0 +1,1050 @@
+import { html } from "lit-html";
+
+const defaultArgs = {
+  clickable: false,
+  disabled: false,
+  expandable: false,
+  fullWidth: false,
+  heading: "Heading",
+  href: "/",
+  message: "Message",
+  subheading: "Subheading",
+  showIcon: false,
+  showBadge: false,
+  showInteractionButton: false,
+  showAdornment: false,
+  showImageTop: false,
+  showImageMid: false,
+  showInteractionControls: false,
+  showExpandedContent: false,
+  theme: "inherit",
+};
+
+export default {
+  title: "Web Components/Card",
+  component: "ic-card-vertical",
+};
+
+export const Heading = {
+  render: () =>
+    html`<ic-card-vertical
+      heading="This is the card heading"
+    ></ic-card-vertical>`,
+
+  name: "Heading",
+};
+
+export const Icon = {
+  render: () =>
+    html`<ic-card-vertical heading="This is the card heading">
+      <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="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-card-vertical>`,
+
+  name: "Icon",
+};
+
+export const Message = {
+  render: () =>
+    html`<ic-card-vertical
+      heading="This is the card heading"
+      message="This is an example of a new card component with text included."
+    >
+      <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="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-card-vertical>`,
+
+  name: "Message",
+};
+
+export const WithSubheading = {
+  render: () =>
+    html`<ic-card-vertical
+      heading="This is the card heading"
+      message="This is an example of a new card component with text included."
+      subheading="This is the subheading"
+      ><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="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-card-vertical>`,
+
+  name: "With subheading",
+};
+
+export const SlottedHeadingMessageAndSubheading = {
+  render: () =>
+    html`<ic-card-vertical>
+      <ic-typography variant="h4" slot="heading"
+        >This is the slotted card heading</ic-typography
+      >
+      <ic-typography slot="message"
+        >This is an example of a new card component with slotted text
+        included.</ic-typography
+      >
+      <ic-typography variant="subtitle-small" slot="subheading"
+        >This is the slotted subheading</ic-typography
+      >
+      <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="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-card-vertical>`,
+
+  name: "Slotted heading, message, and subheading",
+};
+
+export const WithBadge = {
+  render: () =>
+    html`<ic-card-vertical
+        heading="This is the card heading"
+        clickable="true"
+        href="https://www.google.com"
+        style="margin-bottom: 8px"
+      >
+        <ic-badge label="1" slot="badge"></ic-badge>
+      </ic-card-vertical>
+      <ic-card-vertical
+        heading="This is the card heading"
+        clickable="true"
+        href="https://www.google.com"
+      >
+        <ic-badge slot="badge" type="dot"></ic-badge>
+      </ic-card-vertical>`,
+
+  name: "With badge",
+};
+
+export const WithInteractionButton = {
+  render: () =>
+    html`<ic-card-vertical
+      heading="This is the card heading"
+      subheading="This is the subheading"
+      message="This is an example of a new card component with text included."
+    >
+      <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="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-button
+        variant="icon"
+        title="More information"
+        slot="interaction-button"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="16"
+          height="16"
+          fill="currentColor"
+          class="bi bi-three-dots-vertical"
+          viewBox="0 0 16 16"
+        >
+          <path
+            d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z"
+          />
+        </svg>
+      </ic-button>
+    </ic-card-vertical>`,
+
+  name: "With interaction button",
+};
+
+export const Adornment = {
+  render: () =>
+    html`<ic-card-vertical
+      heading="This is the card heading"
+      subheading="This is the subheading"
+      message="This is an example of a new card component with text included."
+    >
+      <ic-status-tag
+        slot="adornment"
+        label="Neutral"
+        size="small"
+      ></ic-status-tag>
+      <ic-button
+        variant="icon"
+        title="More information"
+        slot="interaction-button"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="16"
+          height="16"
+          fill="currentColor"
+          class="bi bi-three-dots-vertical"
+          viewBox="0 0 16 16"
+        >
+          <path
+            d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z"
+          />
+        </svg>
+      </ic-button>
+      <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="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-card-vertical>`,
+
+  name: "Adornment",
+};
+
+export const TopImage = {
+  render: () =>
+    html`<ic-card-vertical
+      heading="This is the card heading"
+      subheading="This is the subheading"
+      message="This is an example of a new card component with text included."
+      style="width:360px;"
+    >
+      <ic-status-tag
+        slot="adornment"
+        label="Neutral"
+        size="small"
+      ></ic-status-tag>
+      <ic-button
+        variant="icon"
+        title="More information"
+        slot="interaction-button"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="16"
+          height="16"
+          fill="currentColor"
+          class="bi bi-three-dots-vertical"
+          viewBox="0 0 16 16"
+        >
+          <path
+            d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z"
+          />
+        </svg>
+      </ic-button>
+      <svg
+        slot="image-top"
+        style="height:326px;width:326px;"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 1600 900"
+      >
+        <rect fill="#ff7700" width="1600" height="1600" y="-350" />
+        <polygon fill="#cc0000" points="957 450 539 900 1396 900" />
+        <polygon fill="#aa0000" points="957 450 872.9 900 1396 900" />
+        <polygon fill="#c50022" points="-60 900 398 662 816 900" />
+        <polygon fill="#a3001b" points="337 900 398 662 816 900" />
+        <polygon fill="#be0044" points="1203 546 1552 900 876 900" />
+        <polygon fill="#9c0036" points="1203 546 1552 900 1162 900" />
+        <polygon fill="#b80066" points="641 695 886 900 367 900" />
+        <polygon fill="#960052" points="587 900 641 695 886 900" />
+        <polygon fill="#b10088" points="1710 900 1401 632 1096 900" />
+        <polygon fill="#8f006d" points="1710 900 1401 632 1365 900" />
+        <polygon fill="#aa00aa" points="1210 900 971 687 725 900" />
+        <polygon fill="#880088" points="943 900 1210 900 971 687" />
+      </svg>
+      <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="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-card-vertical>`,
+
+  name: "Top image",
+};
+
+export const MiddleImage = {
+  render: () =>
+    html`<ic-card-vertical
+      heading="This is the card heading"
+      subheading="This is the subheading"
+      message="This is an example of a new card component with text included."
+      style="width:360px;"
+    >
+      <ic-status-tag
+        slot="adornment"
+        label="Neutral"
+        size="small"
+      ></ic-status-tag>
+      <ic-button
+        variant="icon"
+        title="More information"
+        slot="interaction-button"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="16"
+          height="16"
+          fill="currentColor"
+          class="bi bi-three-dots-vertical"
+          viewBox="0 0 16 16"
+        >
+          <path
+            d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z"
+          />
+        </svg>
+      </ic-button>
+      <svg
+        slot="image-mid"
+        style="height:326px;width:326px;"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 1600 900"
+      >
+        <rect fill="#ff7700" width="1600" height="1600" y="-350" />
+        <polygon fill="#cc0000" points="957 450 539 900 1396 900" />
+        <polygon fill="#aa0000" points="957 450 872.9 900 1396 900" />
+        <polygon fill="#c50022" points="-60 900 398 662 816 900" />
+        <polygon fill="#a3001b" points="337 900 398 662 816 900" />
+        <polygon fill="#be0044" points="1203 546 1552 900 876 900" />
+        <polygon fill="#9c0036" points="1203 546 1552 900 1162 900" />
+        <polygon fill="#b80066" points="641 695 886 900 367 900" />
+        <polygon fill="#960052" points="587 900 641 695 886 900" />
+        <polygon fill="#b10088" points="1710 900 1401 632 1096 900" />
+        <polygon fill="#8f006d" points="1710 900 1401 632 1365 900" />
+        <polygon fill="#aa00aa" points="1210 900 971 687 725 900" />
+        <polygon fill="#880088" points="943 900 1210 900 971 687" />
+      </svg>
+      <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="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-card-vertical>`,
+
+  name: "Middle image",
+};
+
+export const InteractionControls = {
+  render: () =>
+    html`<ic-card-vertical
+      heading="This is the card heading"
+      subheading="This is the subheading"
+      message="This is an example of a new card component with text included."
+      style="width:360px;"
+    >
+      <ic-status-tag
+        slot="adornment"
+        label="Neutral"
+        size="small"
+      ></ic-status-tag>
+      <ic-button
+        variant="icon"
+        title="More information"
+        slot="interaction-button"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="16"
+          height="16"
+          fill="currentColor"
+          class="bi bi-three-dots-vertical"
+          viewBox="0 0 16 16"
+        >
+          <path
+            d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z"
+          />
+        </svg>
+      </ic-button>
+      <svg
+        slot="image-mid"
+        style="height:326px;width:326px;"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 1600 900"
+      >
+        <rect fill="#ff7700" width="1600" height="1600" y="-350" />
+        <polygon fill="#cc0000" points="957 450 539 900 1396 900" />
+        <polygon fill="#aa0000" points="957 450 872.9 900 1396 900" />
+        <polygon fill="#c50022" points="-60 900 398 662 816 900" />
+        <polygon fill="#a3001b" points="337 900 398 662 816 900" />
+        <polygon fill="#be0044" points="1203 546 1552 900 876 900" />
+        <polygon fill="#9c0036" points="1203 546 1552 900 1162 900" />
+        <polygon fill="#b80066" points="641 695 886 900 367 900" />
+        <polygon fill="#960052" points="587 900 641 695 886 900" />
+        <polygon fill="#b10088" points="1710 900 1401 632 1096 900" />
+        <polygon fill="#8f006d" points="1710 900 1401 632 1365 900" />
+        <polygon fill="#aa00aa" points="1210 900 971 687 725 900" />
+        <polygon fill="#880088" points="943 900 1210 900 971 687" />
+      </svg>
+      <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="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-button slot="interaction-controls" variant="primary"
+        >Learn more</ic-button
+      >
+      <ic-button slot="interaction-controls" variant="secondary"
+        >Hide</ic-button
+      >
+    </ic-card-vertical>`,
+
+  name: "Interaction controls",
+};
+
+export const CustomWidth = {
+  render: () =>
+    html`<div style="display: flex; gap: 16px; flex-direction: column;">
+      <ic-card-vertical
+        heading="This is the card heading"
+        subheading="This is the subheading"
+        message="This is an example of a reduced width card component."
+        style="width:300px;"
+        expandable="true"
+      >
+        <ic-status-tag
+          slot="adornment"
+          label="Neutral"
+          size="small"
+        ></ic-status-tag>
+        <ic-button
+          variant="icon"
+          title="More information"
+          slot="interaction-button"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="16"
+            height="16"
+            fill="currentColor"
+            class="bi bi-three-dots-vertical"
+            viewBox="0 0 16 16"
+          >
+            <path
+              d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z"
+            />
+          </svg>
+        </ic-button>
+        <svg
+          slot="image-mid"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 1600 900"
+          style="height:326px;width:326px;"
+        >
+          <rect fill="#ff7700" width="1600" height="1600" y="-350" />
+          <polygon fill="#cc0000" points="957 450 539 900 1396 900" />
+          <polygon fill="#aa0000" points="957 450 872.9 900 1396 900" />
+          <polygon fill="#c50022" points="-60 900 398 662 816 900" />
+          <polygon fill="#a3001b" points="337 900 398 662 816 900" />
+          <polygon fill="#be0044" points="1203 546 1552 900 876 900" />
+          <polygon fill="#9c0036" points="1203 546 1552 900 1162 900" />
+          <polygon fill="#b80066" points="641 695 886 900 367 900" />
+          <polygon fill="#960052" points="587 900 641 695 886 900" />
+          <polygon fill="#b10088" points="1710 900 1401 632 1096 900" />
+          <polygon fill="#8f006d" points="1710 900 1401 632 1365 900" />
+          <polygon fill="#aa00aa" points="1210 900 971 687 725 900" />
+          <polygon fill="#880088" points="943 900 1210 900 971 687" />
+        </svg>
+        <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="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-button slot="interaction-controls" variant="primary"
+          >Learn more</ic-button
+        >
+        <ic-button slot="interaction-controls" variant="secondary"
+          ><svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            slot="left-icon"
+          >
+            <title>heart-outline</title>
+            <path
+              d="M12.1,18.55L12,18.65L11.89,18.55C7.14,14.24 4,11.39 4,8.5C4,6.5 5.5,5 7.5,5C9.04,5 10.54,6 11.07,7.36H12.93C13.46,6 14.96,5 16.5,5C18.5,5 20,6.5 20,8.5C20,11.39 16.86,14.24 12.1,18.55M16.5,3C14.76,3 13.09,3.81 12,5.08C10.91,3.81 9.24,3 7.5,3C4.42,3 2,5.41 2,8.5C2,12.27 5.4,15.36 10.55,20.03L12,21.35L13.45,20.03C18.6,15.36 22,12.27 22,8.5C22,5.41 19.58,3 16.5,3Z"
+            /></svg
+          >Add to favourites</ic-button
+        >
+        <ic-button slot="interaction-controls" variant="secondary"
+          >Hide</ic-button
+        >
+      </ic-card-vertical>
+      <ic-card-vertical
+        heading="This is the card heading"
+        subheading="This is the subheading"
+        message="This is an example of an increased width card component."
+        style="width:500px;"
+        expandable="true"
+      >
+        <ic-status-tag
+          slot="adornment"
+          label="Neutral"
+          size="small"
+        ></ic-status-tag>
+        <ic-button
+          variant="icon"
+          title="More information"
+          slot="interaction-button"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="16"
+            height="16"
+            fill="currentColor"
+            class="bi bi-three-dots-vertical"
+            viewBox="0 0 16 16"
+          >
+            <path
+              d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z"
+            />
+          </svg>
+        </ic-button>
+        <svg
+          slot="image-mid"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 1600 900"
+          style="height:526px;width:526px;"
+        >
+          <rect fill="#ff7700" width="1600" height="1600" y="-350" />
+          <polygon fill="#cc0000" points="957 450 539 900 1396 900" />
+          <polygon fill="#aa0000" points="957 450 872.9 900 1396 900" />
+          <polygon fill="#c50022" points="-60 900 398 662 816 900" />
+          <polygon fill="#a3001b" points="337 900 398 662 816 900" />
+          <polygon fill="#be0044" points="1203 546 1552 900 876 900" />
+          <polygon fill="#9c0036" points="1203 546 1552 900 1162 900" />
+          <polygon fill="#b80066" points="641 695 886 900 367 900" />
+          <polygon fill="#960052" points="587 900 641 695 886 900" />
+          <polygon fill="#b10088" points="1710 900 1401 632 1096 900" />
+          <polygon fill="#8f006d" points="1710 900 1401 632 1365 900" />
+          <polygon fill="#aa00aa" points="1210 900 971 687 725 900" />
+          <polygon fill="#880088" points="943 900 1210 900 971 687" />
+        </svg>
+        <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="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-button slot="interaction-controls" variant="primary"
+          >Learn more</ic-button
+        >
+        <ic-button slot="interaction-controls" variant="secondary"
+          ><svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            slot="left-icon"
+          >
+            <title>heart-outline</title>
+            <path
+              d="M12.1,18.55L12,18.65L11.89,18.55C7.14,14.24 4,11.39 4,8.5C4,6.5 5.5,5 7.5,5C9.04,5 10.54,6 11.07,7.36H12.93C13.46,6 14.96,5 16.5,5C18.5,5 20,6.5 20,8.5C20,11.39 16.86,14.24 12.1,18.55M16.5,3C14.76,3 13.09,3.81 12,5.08C10.91,3.81 9.24,3 7.5,3C4.42,3 2,5.41 2,8.5C2,12.27 5.4,15.36 10.55,20.03L12,21.35L13.45,20.03C18.6,15.36 22,12.27 22,8.5C22,5.41 19.58,3 16.5,3Z"
+            /></svg
+          >Add to favourites</ic-button
+        >
+        <ic-button slot="interaction-controls" variant="secondary"
+          >Hide</ic-button
+        >
+      </ic-card-vertical>
+    </div>`,
+
+  name: "Custom width",
+};
+
+export const AdditionalHeight = {
+  render: () =>
+    html`<ic-card-vertical
+      heading="This is the card heading"
+      subheading="This is the subheading"
+      message="This is an example of a new card component with text included."
+      style="width:360px; height: 700px"
+    >
+      <ic-status-tag
+        slot="adornment"
+        label="Neutral"
+        size="small"
+      ></ic-status-tag>
+      <ic-button
+        variant="icon"
+        title="More information"
+        slot="interaction-button"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="16"
+          height="16"
+          fill="currentColor"
+          class="bi bi-three-dots-vertical"
+          viewBox="0 0 16 16"
+        >
+          <path
+            d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z"
+          />
+        </svg>
+      </ic-button>
+      <svg
+        slot="image-mid"
+        style="height:326px;width:326px;"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 1600 900"
+      >
+        <rect fill="#ff7700" width="1600" height="1600" y="-350" />
+        <polygon fill="#cc0000" points="957 450 539 900 1396 900" />
+        <polygon fill="#aa0000" points="957 450 872.9 900 1396 900" />
+        <polygon fill="#c50022" points="-60 900 398 662 816 900" />
+        <polygon fill="#a3001b" points="337 900 398 662 816 900" />
+        <polygon fill="#be0044" points="1203 546 1552 900 876 900" />
+        <polygon fill="#9c0036" points="1203 546 1552 900 1162 900" />
+        <polygon fill="#b80066" points="641 695 886 900 367 900" />
+        <polygon fill="#960052" points="587 900 641 695 886 900" />
+        <polygon fill="#b10088" points="1710 900 1401 632 1096 900" />
+        <polygon fill="#8f006d" points="1710 900 1401 632 1365 900" />
+        <polygon fill="#aa00aa" points="1210 900 971 687 725 900" />
+        <polygon fill="#880088" points="943 900 1210 900 971 687" />
+      </svg>
+      <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="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-button slot="interaction-controls" variant="primary"
+        >Learn more</ic-button
+      >
+      <ic-button slot="interaction-controls" variant="secondary"
+        >Hide</ic-button
+      >
+    </ic-card-vertical>`,
+
+  name: "Additional height",
+};
+
+export const Expandable = {
+  render: () =>
+    html`<ic-card-vertical
+      heading="This is the card heading"
+      subheading="This is the subheading"
+      message="This is an example of a new card component with text included."
+      expandable
+      style="width:360px;"
+    >
+      <ic-status-tag
+        slot="adornment"
+        label="Neutral"
+        size="small"
+      ></ic-status-tag>
+      <ic-button
+        variant="icon"
+        title="More information"
+        slot="interaction-button"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="16"
+          height="16"
+          fill="currentColor"
+          class="bi bi-three-dots-vertical"
+          viewBox="0 0 16 16"
+        >
+          <path
+            d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z"
+          />
+        </svg>
+      </ic-button>
+      <svg
+        slot="image-mid"
+        style="height:326px;width:326px;"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 1600 900"
+      >
+        <rect fill="#ff7700" width="1600" height="1600" y="-350" />
+        <polygon fill="#cc0000" points="957 450 539 900 1396 900" />
+        <polygon fill="#aa0000" points="957 450 872.9 900 1396 900" />
+        <polygon fill="#c50022" points="-60 900 398 662 816 900" />
+        <polygon fill="#a3001b" points="337 900 398 662 816 900" />
+        <polygon fill="#be0044" points="1203 546 1552 900 876 900" />
+        <polygon fill="#9c0036" points="1203 546 1552 900 1162 900" />
+        <polygon fill="#b80066" points="641 695 886 900 367 900" />
+        <polygon fill="#960052" points="587 900 641 695 886 900" />
+        <polygon fill="#b10088" points="1710 900 1401 632 1096 900" />
+        <polygon fill="#8f006d" points="1710 900 1401 632 1365 900" />
+        <polygon fill="#aa00aa" points="1210 900 971 687 725 900" />
+        <polygon fill="#880088" points="943 900 1210 900 971 687" />
+      </svg>
+      <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="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-button slot="interaction-controls" variant="primary"
+        >Learn more</ic-button
+      >
+      <ic-button slot="interaction-controls" variant="secondary"
+        >Hide</ic-button
+      >
+      <ic-typography slot="expanded-content" variant="body"
+        >This is an example of a new card component with text
+        included.</ic-typography
+      >
+    </ic-card-vertical>`,
+
+  name: "Expandable",
+};
+
+export const ClickableLink = {
+  render: () =>
+    html`<ic-card-vertical
+      heading="This is the card heading"
+      subheading="This is the subheading"
+      message="This is an example of a new card component with text included."
+      clickable="true"
+      href="https://www.google.com"
+      ><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="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-card-vertical>`,
+
+  name: "Clickable link",
+};
+
+export const ClickableButton = {
+  render: () =>
+    html`<ic-card-vertical
+      heading="This is the card heading"
+      subheading="This is the subheading"
+      message="This is an example of a new card component with text included."
+      clickable="true"
+      onclick="alert('clicked')"
+      ><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="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-card-vertical>`,
+
+  name: "Clickable button",
+};
+
+export const Disabled = {
+  render: () =>
+    html`<ic-card-vertical
+      heading="This is the card heading"
+      subheading="This is the subheading"
+      message="This is an example of a new card component with text included."
+      clickable="true"
+      disabled="true"
+      onClick="alert('clicked')"
+      ><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="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-card-vertical>`,
+
+  name: "Disabled",
+};
+
+export const FullWidth = {
+  render: () => html`
+    <ic-card-vertical
+      heading="This is the card heading"
+      subheading="This is the subheading"
+      message="This is an example of a card component that fills it's parent container."
+      clickable="true"
+      full-width="true"
+      href="https://www.google.com"
+      ><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="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-card-vertical>
+  `,
+
+  name: "Full width",
+};
+
+export const WrappedByLink = {
+  render: () =>
+    html`<a href="/"
+      ><ic-card-vertical
+        heading="This is the card heading"
+        subheading="This is the subheading"
+        message="This is an example of a new card component with text included."
+        ><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="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-card-vertical
+    ></a>`,
+
+  name: "Wrapped by link",
+};
+
+export const Playground = {
+  render: (args) =>
+    html`<ic-card-vertical
+      clickable=${args.clickable}
+      disabled=${args.disabled}
+      expandable=${args.expandable}
+      full-width=${args.fullWidth}
+      heading=${args.heading}
+      href=${args.href}
+      message=${args.message}
+      subheading=${args.subheading}
+      theme=${args.theme}
+    >
+      ${args.showIcon &&
+      html`
+        <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="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>
+      `}
+      ${args.showBadge &&
+      html` <ic-badge text-label="1" slot="badge"></ic-badge> `}
+      ${args.showInteractionButton &&
+      html`
+        <ic-button
+          variant="icon"
+          title="More information"
+          slot="interaction-button"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="16"
+            height="16"
+            fill="currentColor"
+            class="bi bi-three-dots-vertical"
+            viewBox="0 0 16 16"
+          >
+            <path
+              d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z"
+            />
+          </svg>
+        </ic-button>
+      `}
+      ${args.showAdornment &&
+      html`
+        <ic-status-tag
+          slot="adornment"
+          label="Neutral"
+          size="small"
+        ></ic-status-tag>
+      `}
+      ${args.showImageTop &&
+      html`
+        <svg
+          slot="image-top"
+          style="height:200px;width:326px;"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 1600 900"
+        >
+          <rect fill="#edb99d" width="1600" height="1600" y="-350" />
+          <polygon fill="#cc0000" points="957 450 539 900 1396 900" />
+          <polygon fill="#aa0000" points="957 450 872.9 900 1396 900" />
+          <polygon fill="#c50022" points="-60 900 398 662 816 900" />
+          <polygon fill="#a3001b" points="337 900 398 662 816 900" />
+          <polygon fill="#be0044" points="1203 546 1552 900 876 900" />
+          <polygon fill="#9c0036" points="1203 546 1552 900 1162 900" />
+          <polygon fill="#b80066" points="641 695 886 900 367 900" />
+          <polygon fill="#960052" points="587 900 641 695 886 900" />
+          <polygon fill="#b10088" points="1710 900 1401 632 1096 900" />
+          <polygon fill="#8f006d" points="1710 900 1401 632 1365 900" />
+          <polygon fill="#aa00aa" points="1210 900 971 687 725 900" />
+          <polygon fill="#880088" points="943 900 1210 900 971 687" />
+        </svg>
+      `}
+      ${args.showImageMid &&
+      html`
+        <svg
+          slot="image-mid"
+          style="height:200px;width:326px;"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 1600 900"
+        >
+          <rect fill="#FFC0CB" width="1600" height="1600" y="-350" />
+          <polygon fill="#cc0000" points="957 450 539 900 1396 900" />
+          <polygon fill="#aa0000" points="957 450 872.9 900 1396 900" />
+          <polygon fill="#c50022" points="-60 900 398 662 816 900" />
+          <polygon fill="#ff3300" points="337 900 398 662 816 900" />
+          <polygon fill="#be0044" points="1203 546 1552 900 876 900" />
+          <polygon fill="#9c0036" points="1203 546 1552 900 1162 900" />
+          <polygon fill="#b80066" points="641 695 886 900 367 900" />
+          <polygon fill="#960052" points="587 900 641 695 886 900" />
+          <polygon fill="#b10088" points="1710 900 1401 632 1096 900" />
+          <polygon fill="#8f006d" points="1710 900 1401 632 1365 900" />
+          <polygon fill="#aa00aa" points="1210 900 971 687 725 900" />
+          <polygon fill="#880088" points="943 900 1210 900 971 687" />
+        </svg>
+      `}
+      ${args.showInteractionControls &&
+      html`
+        <ic-button slot="interaction-controls" variant="primary"
+          >Learn more</ic-button
+        >
+        <ic-button slot="interaction-controls" variant="secondary"
+          >Hide</ic-button
+        >
+      `}
+      ${args.showExpandedContent &&
+      html`
+        <ic-typography slot="expanded-content" variant="body"
+          >This is an example of a new card component with text
+          included.</ic-typography
+        >
+      `}
+    </ic-card-vertical>`,
+
+  args: defaultArgs,
+  name: "Playground",
+
+  argTypes: {
+    theme: {
+      options: ["inherit", "light", "dark"],
+
+      control: {
+        type: "inline-radio",
+      },
+    },
+  },
+};