@ukic/web-components 2.35.2 → 3.0.0-alpha.10

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

@@ -0,0 +1 @@
+{"version":3,"file":"ic-card-vertical.js","sourceRoot":"","sources":["../../../src/components/ic-card-vertical/ic-card-vertical.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Element,\n  Listen,\n  Prop,\n  State,\n  h,\n  Method,\n  Host,\n  Watch,\n} from \"@stencil/core\";\nimport {\n  onComponentRequiredPropUndefined,\n  isSlotUsed,\n  getBrandFromContext,\n  removeDisabledFalse,\n  renderDynamicChildSlots,\n} from \"../../utils/helpers\";\nimport {\n  IcBrand,\n  IcBrandForeground,\n  IcBrandForegroundEnum,\n  IcThemeMode,\n} from \"../../utils/types\";\nimport chevronIcon from \"../../assets/chevron-icon.svg\";\n\n/**\n * @slot heading - Content will be placed at the top of the card to the right of the icon.\n * @slot message - Content will be placed in the main body of the card.\n * @slot subheading - Content will be placed below the card heading.\n * @slot adornment - Content will be placed below the card subheading.\n * @slot image-top - Content will be placed at the top of the card above all other content.\n * @slot image-mid - Content will be placed below the card heading section.\n * @slot icon - Content will be placed to the left of the card heading.\n * @slot interaction-button - Content will be placed in the top right corner of the heading section.\n * @slot interaction-controls - Content will be placed below the card message.\n * @slot expanded-content - Content will be placed below the interaction controls but will not initially be rendered.\n * @slot badge - Badge component overlaying the top right of the card.\n */\n@Component({\n  tag: \"ic-card-vertical\",\n  styleUrl: \"ic-card-vertical.css\",\n  shadow: true,\n})\nexport class CardVertical {\n  private hostMutationObserver: MutationObserver = null;\n\n  @Element() el: HTMLIcCardVerticalElement;\n\n  @State() areaExpanded: boolean = false;\n  @State() isFocussed: boolean = false;\n  @State() monochrome: boolean = false;\n  @State() parentEl: HTMLElement | null = null;\n  @State() parentIsAnchorTag: boolean = false;\n\n  /**\n   * If `true`, the card will be a clickable variant, instead of static.\n   */\n  @Prop({ mutable: true }) clickable?: boolean = false;\n\n  /**\n   * If `true`, the card will be disabled if it is clickable.\n   */\n  @Prop() disabled?: boolean = false;\n  @Watch(\"disabled\")\n  watchDisabledHandler(): void {\n    removeDisabledFalse(this.disabled, this.el);\n  }\n\n  /**\n   *  If `true`, the card will have an expandable area and expansion toggle button.\n   */\n  @Prop() expandable?: boolean = false;\n\n  /**\n   *  If `true`, the card will fill the width of the container.\n   */\n  @Prop() fullWidth?: boolean = false;\n\n  /**\n   * The heading for the card. This is required, unless a slotted heading is used.\n   */\n  @Prop() heading?: string;\n\n  /**\n   * The URL that the clickable card link points to. If set, the clickable card will render as an \"a\" tag, otherwise it will render as a button.\n   */\n  @Prop() href?: string;\n\n  /**\n   * The human language of the linked URL.\n   */\n  @Prop() hreflang?: string = \"\";\n\n  /**\n   * The main body message of the card.\n   */\n  @Prop() message?: string = \"\";\n\n  /**\n   * How much of the referrer to send when following the link.\n   */\n  @Prop() referrerpolicy?: ReferrerPolicy;\n\n  /**\n   * The relationship of the linked URL as space-separated link types.\n   */\n  @Prop() rel?: string;\n\n  /**\n   * The subheading for the card.\n   */\n  @Prop() subheading?: string;\n\n  /**\n   * The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).\n   */\n  @Prop() target?: string;\n\n  /**\n   * Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n   */\n  @Prop({ mutable: true }) theme?: IcThemeMode = \"inherit\";\n\n  disconnectedCallback(): void {\n    if (this.parentIsAnchorTag) {\n      this.parentEl.removeEventListener(\"focus\", this.parentFocussed);\n      this.parentEl.removeEventListener(\"blur\", this.parentBlurred);\n    }\n\n    this.hostMutationObserver?.disconnect();\n  }\n\n  componentWillLoad(): void {\n    this.parentEl = this.el.parentElement;\n\n    if (this.parentEl.tagName === \"A\") {\n      this.clickable = true;\n      this.parentIsAnchorTag = true;\n      this.parentEl.classList.add(\"ic-card-wrapper-link\");\n      this.parentEl.addEventListener(\"focus\", this.parentFocussed);\n      this.parentEl.addEventListener(\"blur\", this.parentBlurred);\n    }\n    removeDisabledFalse(this.disabled, this.el);\n  }\n\n  componentDidLoad(): void {\n    !isSlotUsed(this.el, \"heading\") &&\n      onComponentRequiredPropUndefined(\n        [{ prop: this.heading, propName: \"heading\" }],\n        \"Card\"\n      );\n    this.updateTheme();\n\n    this.hostMutationObserver = new MutationObserver((mutationList) =>\n      renderDynamicChildSlots(\n        mutationList,\n        [\n          \"message\",\n          \"adornment\",\n          \"expanded-content\",\n          \"image-top\",\n          \"image-mid\",\n          \"icon\",\n          \"interaction-button\",\n          \"badge\",\n          \"interaction-controls\",\n        ],\n        this\n      )\n    );\n    this.hostMutationObserver.observe(this.el, {\n      childList: true,\n    });\n  }\n\n  @Listen(\"click\", { capture: true })\n  handleHostClick(event: Event): void {\n    if (this.disabled) {\n      event.stopImmediatePropagation();\n    }\n  }\n\n  @Listen(\"brandChange\", { target: \"document\" })\n  brandChangeHandler(ev: CustomEvent<IcBrand>): void {\n    this.updateTheme(ev.detail.mode);\n  }\n\n  /**\n   * Sets focus on the card.\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    if (this.el.shadowRoot.querySelector(\"a\")) {\n      this.el.shadowRoot.querySelector(\"a\").focus();\n    } else if (this.el.shadowRoot.querySelector(\"button\")) {\n      this.el.shadowRoot.querySelector(\"button\").focus();\n    }\n  }\n\n  private parentFocussed = (): void => {\n    this.isFocussed = true;\n  };\n\n  private parentBlurred = (): void => {\n    this.isFocussed = false;\n  };\n\n  private updateTheme(mode: IcBrandForeground = null): void {\n    const foregroundColor = getBrandFromContext(this.el, mode);\n\n    if (foregroundColor !== IcBrandForegroundEnum.Default) {\n      this.monochrome = true;\n      this.theme =\n        foregroundColor === IcBrandForegroundEnum.Light\n          ? IcBrandForegroundEnum.Dark\n          : IcBrandForegroundEnum.Light;\n    }\n  }\n\n  private toggleExpanded = (): void => {\n    this.areaExpanded = !this.areaExpanded;\n  };\n\n  render() {\n    const {\n      clickable,\n      disabled,\n      expandable,\n      fullWidth,\n      heading,\n      isFocussed,\n      message,\n      monochrome,\n      href,\n      hreflang,\n      parentIsAnchorTag,\n      referrerpolicy,\n      rel,\n      subheading,\n      target,\n      theme,\n    } = this;\n\n    const Component =\n      parentIsAnchorTag || !clickable\n        ? \"div\"\n        : href === undefined\n        ? \"button\"\n        : \"a\";\n\n    const attrs = Component == \"a\" && {\n      href: href,\n      hrefLang: hreflang,\n      referrerPolicy: referrerpolicy,\n      rel: rel,\n      target: target,\n    };\n\n    return (\n      <Host\n        class={{\n          [`ic-theme-${theme}`]: theme !== \"inherit\",\n        }}\n      >\n        <Component\n          class={{\n            card: true,\n            clickable: clickable && !disabled,\n            disabled,\n            fullwidth: fullWidth,\n            focussed: isFocussed,\n            monochrome: monochrome,\n          }}\n          tabindex={clickable && !parentIsAnchorTag ? 0 : null}\n          aria-disabled={disabled ? \"true\" : null}\n          disabled={disabled ? true : null}\n          {...attrs}\n        >\n          {isSlotUsed(this.el, \"image-top\") && (\n            <div class=\"image-top\">\n              <slot name=\"image-top\"></slot>\n            </div>\n          )}\n          <div class=\"card-header\">\n            {isSlotUsed(this.el, \"icon\") && (\n              <div class=\"icon\">\n                <slot name=\"icon\" />\n              </div>\n            )}\n            <div class=\"card-title\">\n              <slot name=\"heading\">\n                <ic-typography variant=\"h4\">\n                  <p>{heading}</p>\n                </ic-typography>\n              </slot>\n            </div>\n            {isSlotUsed(this.el, \"interaction-button\") && (\n              <div class=\"interaction-button\">\n                <slot name=\"interaction-button\"></slot>\n              </div>\n            )}\n          </div>\n          {(subheading || isSlotUsed(this.el, \"subheading\")) && (\n            <div class=\"subheading\">\n              <slot name=\"subheading\">\n                <ic-typography variant=\"subtitle-small\">\n                  {subheading}\n                </ic-typography>\n              </slot>\n            </div>\n          )}\n          {isSlotUsed(this.el, \"adornment\") && (\n            <div class=\"adornment\">\n              <slot name=\"adornment\"></slot>\n            </div>\n          )}\n          {isSlotUsed(this.el, \"image-mid\") && (\n            <div class=\"image-mid\">\n              <slot name=\"image-mid\"></slot>\n            </div>\n          )}\n          {(message || isSlotUsed(this.el, \"message\")) && (\n            <div class=\"card-message\">\n              {message && (\n                <ic-typography variant=\"body\">{message}</ic-typography>\n              )}\n              {isSlotUsed(this.el, \"message\") && <slot name=\"message\"></slot>}\n            </div>\n          )}\n          {(isSlotUsed(this.el, \"interaction-controls\") || expandable) && (\n            <div class=\"interaction-area\">\n              <div class=\"interaction-controls\">\n                <slot name=\"interaction-controls\"></slot>\n              </div>\n              {expandable && (\n                <ic-tooltip\n                  id=\"ic-tooltip-expand-button\"\n                  label=\"Toggle expandable area\"\n                  silent\n                >\n                  <button\n                    class={{\n                      \"toggle-button\": true,\n                      [`toggle-button-${\n                        this.areaExpanded ? \"expanded\" : \"closed\"\n                      }`]: true,\n                    }}\n                    aria-label=\"Toggle expandable area\"\n                    aria-expanded={`${this.areaExpanded}`}\n                    aria-controls={\n                      this.areaExpanded ? \"expanded-content-area\" : null\n                    }\n                    onClick={this.toggleExpanded}\n                    innerHTML={chevronIcon}\n                  ></button>\n                </ic-tooltip>\n              )}\n            </div>\n          )}\n          {isSlotUsed(this.el, \"expanded-content\") && this.areaExpanded && (\n            <div class=\"expanded-content\" id=\"expanded-content-area\">\n              <slot name=\"expanded-content\"></slot>\n            </div>\n          )}\n          {isSlotUsed(this.el, \"badge\") && <slot name=\"badge\"></slot>}\n        </Component>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -17,21 +17,26 @@ const defaultArgs = {
   showImageMid: false,
   showInteractionControls: false,
   showExpandedContent: false,
+  theme: "inherit",
 };
 
 export default {
   title: "Web Components/Card",
-  component: "ic-card",
+  component: "ic-card-vertical",
 };
 
 export const Heading = {
-  render: () => html`<ic-card heading="This is the card heading"></ic-card>`,
+  render: () =>
+    html`<ic-card-vertical
+      heading="This is the card heading"
+    ></ic-card-vertical>`,
+
   name: "Heading",
 };
 
 export const Icon = {
   render: () =>
-    html`<ic-card heading="This is the card heading">
+    html`<ic-card-vertical heading="This is the card heading">
       <svg
         slot="icon"
         xmlns="http://www.w3.org/2000/svg"
@@ -45,14 +50,14 @@ export const Icon = {
           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>`,
+    </ic-card-vertical>`,
 
   name: "Icon",
 };
 
 export const Message = {
   render: () =>
-    html`<ic-card
+    html`<ic-card-vertical
       heading="This is the card heading"
       message="This is an example of a new card component with text included."
     >
@@ -69,14 +74,14 @@ export const Message = {
           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>`,
+    </ic-card-vertical>`,
 
   name: "Message",
 };
 
 export const WithSubheading = {
   render: () =>
-    html`<ic-card
+    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"
@@ -92,14 +97,14 @@ export const WithSubheading = {
         <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>`,
+    ></ic-card-vertical>`,
 
   name: "With subheading",
 };
 
 export const SlottedHeadingMessageAndSubheading = {
   render: () =>
-    html`<ic-card>
+    html`<ic-card-vertical>
       <ic-typography variant="h4" slot="heading"
         >This is the slotted card heading</ic-typography
       >
@@ -122,35 +127,35 @@ export const SlottedHeadingMessageAndSubheading = {
         <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>`,
+    ></ic-card-vertical>`,
 
   name: "Slotted heading, message, and subheading",
 };
 
 export const WithBadge = {
   render: () =>
-    html`<ic-card
+    html`<ic-card-vertical
         heading="This is the card heading"
         clickable="true"
         href="https://www.google.com"
         style="margin-bottom: 8px"
       >
-        <ic-badge text-label="1" slot="badge"></ic-badge>
-      </ic-card>
-      <ic-card
+        <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>`,
+      </ic-card-vertical>`,
 
   name: "With badge",
 };
 
 export const WithInteractionButton = {
   render: () =>
-    html`<ic-card
+    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."
@@ -186,14 +191,14 @@ export const WithInteractionButton = {
           />
         </svg>
       </ic-button>
-    </ic-card>`,
+    </ic-card-vertical>`,
 
   name: "With interaction button",
 };
 
 export const Adornment = {
   render: () =>
-    html`<ic-card
+    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."
@@ -234,14 +239,14 @@ export const Adornment = {
           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>`,
+    </ic-card-vertical>`,
 
   name: "Adornment",
 };
 
 export const TopImage = {
   render: () =>
-    html`<ic-card
+    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."
@@ -303,14 +308,14 @@ export const TopImage = {
           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>`,
+    </ic-card-vertical>`,
 
   name: "Top image",
 };
 
 export const MiddleImage = {
   render: () =>
-    html`<ic-card
+    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."
@@ -372,14 +377,14 @@ export const MiddleImage = {
           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>`,
+    </ic-card-vertical>`,
 
   name: "Middle image",
 };
 
 export const InteractionControls = {
   render: () =>
-    html`<ic-card
+    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."
@@ -447,7 +452,7 @@ export const InteractionControls = {
       <ic-button slot="interaction-controls" variant="secondary"
         >Hide</ic-button
       >
-    </ic-card>`,
+    </ic-card-vertical>`,
 
   name: "Interaction controls",
 };
@@ -455,7 +460,7 @@ export const InteractionControls = {
 export const CustomWidth = {
   render: () =>
     html`<div style="display: flex; gap: 16px; flex-direction: column;">
-      <ic-card
+      <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."
@@ -536,8 +541,8 @@ export const CustomWidth = {
         <ic-button slot="interaction-controls" variant="secondary"
           >Hide</ic-button
         >
-      </ic-card>
-      <ic-card
+      </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."
@@ -618,7 +623,7 @@ export const CustomWidth = {
         <ic-button slot="interaction-controls" variant="secondary"
           >Hide</ic-button
         >
-      </ic-card>
+      </ic-card-vertical>
     </div>`,
 
   name: "Custom width",
@@ -626,7 +631,7 @@ export const CustomWidth = {
 
 export const AdditionalHeight = {
   render: () =>
-    html`<ic-card
+    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."
@@ -694,14 +699,14 @@ export const AdditionalHeight = {
       <ic-button slot="interaction-controls" variant="secondary"
         >Hide</ic-button
       >
-    </ic-card>`,
+    </ic-card-vertical>`,
 
   name: "Additional height",
 };
 
 export const Expandable = {
   render: () =>
-    html`<ic-card
+    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."
@@ -774,14 +779,14 @@ export const Expandable = {
         >This is an example of a new card component with text
         included.</ic-typography
       >
-    </ic-card>`,
+    </ic-card-vertical>`,
 
   name: "Expandable",
 };
 
 export const ClickableLink = {
   render: () =>
-    html`<ic-card
+    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."
@@ -799,14 +804,14 @@ export const ClickableLink = {
         <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>`,
+    ></ic-card-vertical>`,
 
   name: "Clickable link",
 };
 
 export const ClickableButton = {
   render: () =>
-    html`<ic-card
+    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."
@@ -824,14 +829,14 @@ export const ClickableButton = {
         <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>`,
+    ></ic-card-vertical>`,
 
   name: "Clickable button",
 };
 
 export const Disabled = {
   render: () =>
-    html`<ic-card
+    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."
@@ -850,14 +855,14 @@ export const Disabled = {
         <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>`,
+    ></ic-card-vertical>`,
 
   name: "Disabled",
 };
 
 export const FullWidth = {
   render: () => html`
-    <ic-card
+    <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."
@@ -876,7 +881,7 @@ export const FullWidth = {
         <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>
+    ></ic-card-vertical>
   `,
 
   name: "Full width",
@@ -885,7 +890,7 @@ export const FullWidth = {
 export const WrappedByLink = {
   render: () =>
     html`<a href="/"
-      ><ic-card
+      ><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."
@@ -900,7 +905,7 @@ export const WrappedByLink = {
           <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
+          /></svg></ic-card-vertical
     ></a>`,
 
   name: "Wrapped by link",
@@ -908,7 +913,7 @@ export const WrappedByLink = {
 
 export const Playground = {
   render: (args) =>
-    html`<ic-card
+    html`<ic-card-vertical
       clickable=${args.clickable}
       disabled=${args.disabled}
       expandable=${args.expandable}
@@ -917,6 +922,7 @@ export const Playground = {
       href=${args.href}
       message=${args.message}
       subheading=${args.subheading}
+      theme=${args.theme}
     >
       ${args.showIcon &&
       html`
@@ -1027,8 +1033,18 @@ export const Playground = {
           included.</ic-typography
         >
       `}
-    </ic-card>`,
+    </ic-card-vertical>`,
 
   args: defaultArgs,
   name: "Playground",
+
+  argTypes: {
+    theme: {
+      options: ["inherit", "light", "dark"],
+
+      control: {
+        type: "inline-radio",
+      },
+    },
+  },
 };

package/dist/collection/components/{ic-card/test/basic/ic-card.spec.js → ic-card-vertical/test/basic/ic-card-vertical.spec.js}

@@ -1,7 +1,7 @@
 import { newSpecPage } from "@stencil/core/testing";
-import { Card } from "../../ic-card";
+import { CardVertical } from "../../ic-card-vertical";
 import { mockHasDynamicChildSlots, mockMutationObserverImplementation, mockRenderDynamicChildSlots, } from "../../../../testspec.setup";
-describe("ic-card", () => {
+describe("ic-card-vertical", () => {
     afterAll(() => {
         jest.restoreAllMocks();
     });
@@ -10,43 +10,43 @@ describe("ic-card", () => {
     });
     it("should render", async () => {
         const page = await newSpecPage({
-            components: [Card],
-            html: `<ic-card heading="Card" message="This is a static card"></ic-card>`,
+            components: [CardVertical],
+            html: `<ic-card-vertical heading="Card" message="This is a static card"></ic-card-vertical>`,
         });
         expect(page.root).toMatchSnapshot();
     });
     it("should render as a button", async () => {
         const page = await newSpecPage({
-            components: [Card],
-            html: `<ic-card heading="Card" message="This is a clickable card rendered as a button" clickable=true></ic-card>`,
+            components: [CardVertical],
+            html: `<ic-card-vertical heading="Card" message="This is a clickable card rendered as a button" clickable=true></ic-card-vertical>`,
         });
         expect(page.root).toMatchSnapshot();
     });
     it("should render as a link", async () => {
         const page = await newSpecPage({
-            components: [Card],
-            html: `<ic-card heading="Card" message="This is a clickable card rendered as a button" clickable=true href="/"></ic-card>`,
+            components: [CardVertical],
+            html: `<ic-card-vertical heading="Card" message="This is a clickable card rendered as a button" clickable=true href="/"></ic-card-vertical>`,
         });
         expect(page.root).toMatchSnapshot();
     });
     it("should render full width variant", async () => {
         const page = await newSpecPage({
-            components: [Card],
-            html: `<ic-card heading="Card" full-width=true message="This is a full width card" clickable=true></ic-card>`,
+            components: [CardVertical],
+            html: `<ic-card-vertical heading="Card" full-width=true message="This is a full width card" clickable=true></ic-card-vertical>`,
         });
         expect(page.root).toMatchSnapshot();
     });
     it("should render with a link parent", async () => {
         const page = await newSpecPage({
-            components: [Card],
-            html: `<a href="/"><ic-card heading="Card" message="This is a clickable card" clickable=true></ic-card></a>`,
+            components: [CardVertical],
+            html: `<a href="/"><ic-card-vertical heading="Card" message="This is a clickable card" clickable=true></ic-card-vertical></a>`,
         });
         expect(page.root).toMatchSnapshot();
     });
     it("should correctly remove disabled attribute when setting disabled to false", async () => {
         const page = await newSpecPage({
-            components: [Card],
-            html: `<ic-card heading="Card" disabled message="This is a full width card" clickable=true></ic-card>`,
+            components: [CardVertical],
+            html: `<ic-card-vertical heading="Card" disabled message="This is a full width card" clickable=true></ic-card-vertical>`,
         });
         expect(page.root).toMatchSnapshot("disabled");
         page.rootInstance.disabled = false;
@@ -55,8 +55,8 @@ describe("ic-card", () => {
     });
     it("should apply 'focussed' style when parent is focussed", async () => {
         const page = await newSpecPage({
-            components: [Card],
-            html: `<a href="/"><ic-card id="test-id" heading="Card" message="This is a clickable card" clickable=true></ic-card></a>`,
+            components: [CardVertical],
+            html: `<a href="/"><ic-card-vertical id="test-id" heading="Card" message="This is a clickable card" clickable=true></ic-card-vertical></a>`,
         });
         expect(page.root).not.toBeNull;
         const element = await document.getElementById("test-id");
@@ -66,8 +66,8 @@ describe("ic-card", () => {
     });
     it("should lose 'focussed' style when parent loses focus", async () => {
         const page = await newSpecPage({
-            components: [Card],
-            html: `<a href="/"><ic-card id="test-card" heading="Card" message="This is a clickable card" clickable=true></ic-card></a>`,
+            components: [CardVertical],
+            html: `<a href="/"><ic-card-vertical id="test-card" heading="Card" message="This is a clickable card" clickable=true></ic-card-vertical></a>`,
         });
         expect(page.root).not.toBeNull;
         const element = await document.getElementById("test-card");
@@ -79,8 +79,8 @@ describe("ic-card", () => {
     });
     it("should stop immediate propagation of a click event when disabled", async () => {
         const page = await newSpecPage({
-            components: [Card],
-            html: `<ic-card id="test-card" heading="Card" message="This is a clickable card" clickable=true disabled=true onclick="alert('test')"></ic-card>`,
+            components: [CardVertical],
+            html: `<ic-card-vertical id="test-card" heading="Card" message="This is a clickable card" clickable=true disabled=true onclick="alert('test')"></ic-card-vertical>`,
         });
         jest.spyOn(window, "alert").mockImplementation();
         const element = await document.getElementById("test-card");
@@ -90,50 +90,50 @@ describe("ic-card", () => {
     });
     it("should render with a subheading", async () => {
         const page = await newSpecPage({
-            components: [Card],
-            html: `<ic-card id="test-card" heading="Card" subheading="Card subheading" message="This is a card"></ic-card>`,
+            components: [CardVertical],
+            html: `<ic-card-vertical id="test-card" heading="Card" subheading="Card subheading" message="This is a card"></ic-card-vertical>`,
         });
         expect(page.root).toMatchSnapshot();
     });
     it("should render with an interaction button", async () => {
         const page = await newSpecPage({
-            components: [Card],
-            html: `<ic-card id="test-card" heading="Card" subheading="Card subheading" message="This is a card"><ic-button variant="primary" slot="interaction-button">Click here</ic-button></ic-card>`,
+            components: [CardVertical],
+            html: `<ic-card-vertical id="test-card" heading="Card" subheading="Card subheading" message="This is a card"><ic-button variant="primary" slot="interaction-button">Click here</ic-button></ic-card-vertical>`,
         });
         expect(page.root).toMatchSnapshot();
     });
     it("should render with a top image", async () => {
         const page = await newSpecPage({
-            components: [Card],
-            html: `<ic-card id="test-card" heading="Card" subheading="Card subheading" message="This is a card"><div slot="image-top">Image placeholder</div></ic-card>`,
+            components: [CardVertical],
+            html: `<ic-card-vertical id="test-card" heading="Card" subheading="Card subheading" message="This is a card"><div slot="image-top">Image placeholder</div></ic-card-vertical>`,
         });
         expect(page.root).toMatchSnapshot();
     });
     it("should render with a middle image", async () => {
         const page = await newSpecPage({
-            components: [Card],
-            html: `<ic-card id="test-card" heading="Card" subheading="Card subheading" message="This is a card"><div slot="image-mid">Image placeholder</div></ic-card>`,
+            components: [CardVertical],
+            html: `<ic-card-vertical id="test-card" heading="Card" subheading="Card subheading" message="This is a card"><div slot="image-mid">Image placeholder</div></ic-card-vertical>`,
         });
         expect(page.root).toMatchSnapshot();
     });
     it("should render with interaction controls", async () => {
         const page = await newSpecPage({
-            components: [Card],
-            html: `<ic-card id="test-card" heading="Card" subheading="Card subheading" message="This is a card"><ic-button slot="interaction-controls">Click here</ic-button></ic-card>`,
+            components: [CardVertical],
+            html: `<ic-card-vertical id="test-card" heading="Card" subheading="Card subheading" message="This is a card"><ic-button slot="interaction-controls">Click here</ic-button></ic-card-vertical>`,
         });
         expect(page.root).toMatchSnapshot();
     });
     it("should render as expandable", async () => {
         const page = await newSpecPage({
-            components: [Card],
-            html: `<ic-card id="test-card" heading="Card" subheading="Card subheading" message="This is a card" expandable></ic-card>`,
+            components: [CardVertical],
+            html: `<ic-card-vertical id="test-card" heading="Card" subheading="Card subheading" message="This is a card" expandable></ic-card-vertical>`,
         });
         expect(page.root).toMatchSnapshot();
     });
     it("should render content in expanded area", async () => {
         const page = await newSpecPage({
-            components: [Card],
-            html: `<ic-card id="test-card" heading="Card" subheading="Card subheading" message="This is a card" expandable><ic-typography slot="expanded-content">Extra content</ic-typography></ic-card>`,
+            components: [CardVertical],
+            html: `<ic-card-vertical id="test-card" heading="Card" subheading="Card subheading" message="This is a card" expandable><ic-typography slot="expanded-content">Extra content</ic-typography></ic-card-vertical>`,
         });
         page.rootInstance.areaExpanded = true;
         await page.waitForChanges();
@@ -141,8 +141,8 @@ describe("ic-card", () => {
     });
     it("should toggle expanded content when expansion toggle is clicked", async () => {
         const page = await newSpecPage({
-            components: [Card],
-            html: `<ic-card id="test-card" heading="Card" message="This is a clickable card" expandable><ic-typography slot="expanded-content">Expanded</ic-typography></ic-card>`,
+            components: [CardVertical],
+            html: `<ic-card-vertical id="test-card" heading="Card" message="This is a clickable card" expandable><ic-typography slot="expanded-content">Expanded</ic-typography></ic-card-vertical>`,
         });
         expect(page.root).toMatchSnapshot();
         page.rootInstance.toggleExpanded();
@@ -151,24 +151,24 @@ describe("ic-card", () => {
     });
     it("should call 'setFocus' when card as a button is focused", async () => {
         const page = await newSpecPage({
-            components: [Card],
-            html: `<ic-card heading="Card" message="This is a clickable card rendered as a button" clickable=true></ic-card>`,
+            components: [CardVertical],
+            html: `<ic-card-vertical heading="Card" message="This is a clickable card rendered as a button" clickable=true></ic-card-vertical>`,
         });
         //Can't expect anything in this test - this is to increase code coverage only
         await page.rootInstance.setFocus().toHaveBeenCalled;
     });
     it("should call 'setFocus' when card as a link is focused", async () => {
         const page = await newSpecPage({
-            components: [Card],
-            html: `<ic-card heading="Card" message="This is a clickable card rendered as a button" clickable=true href="/"></ic-card>`,
+            components: [CardVertical],
+            html: `<ic-card-vertical heading="Card" message="This is a clickable card rendered as a button" clickable=true href="/"></ic-card-vertical>`,
         });
         //Can't expect anything in this test - this is to increase code coverage only
         await page.rootInstance.setFocus().toHaveBeenCalled;
     });
     it("should test rendering slotted after initial render", async () => {
         const page = await newSpecPage({
-            components: [Card],
-            html: `<ic-card heading="Card" message="This is a static card"></ic-card>`,
+            components: [CardVertical],
+            html: `<ic-card-vertical heading="Card" message="This is a static card"></ic-card-vertical>`,
         });
         const component = page.rootInstance;
         const host = page.root;
@@ -211,4 +211,4 @@ describe("ic-card", () => {
         expect(page.root).toMatchSnapshot();
     });
 });
-//# sourceMappingURL=ic-card.spec.js.map
+//# sourceMappingURL=ic-card-vertical.spec.js.map