@ukic/canary-web-components 2.0.0-canary.4 → 2.0.0-canary.41

package/dist/collection/components/ic-card-horizontal/ic-card-horizontal.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ic-card-horizontal.stories.js","sourceRoot":"","sources":["../../../src/components/ic-card-horizontal/ic-card-horizontal.stories.js"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable @typescript-eslint/explicit-module-boundary-types */\nimport { html } from \"lit-html\";\nimport readme from \"./readme.md\";\n\nexport default {\n  title: \"Web Components/Horizontal Card\",\n  component: \"Horizontal Card\",\n\n  parameters: {\n    componentAPI: {\n      data: readme,\n    },\n  },\n};\n\n/**\n * Use a horizontal card to display a message or content in a horizontal layout.\n * There is one required prop for a horizontal card:\n * - heading: `string`\n *\n * Click the 'Component API' tab to view all the available props and events for horizontal card.\n *\n * To use the horizontal card component, import `@ukic/canary-web-components` into your application.\n */\nexport const Default = {\n  render: () =>\n    html`<ic-card-horizontal heading=\"Card heading\"></ic-card-horizontal>`,\n  name: \"Default\",\n};\n\n/**\n * Add more information to the horizontal card by including a message.\n */\nexport const Message = {\n  render: () =>\n    html`<ic-card-horizontal\n      heading=\"Card heading\"\n      message=\"Card message\"\n    ></ic-card-horizontal>`,\n\n  name: \"Message\",\n};\n\n/**\n * Add an icon to the horizontal card.\n */\nexport const Icon = {\n  render: () =>\n    html`<ic-card-horizontal heading=\"Card heading\" message=\"Card message\">\n      <svg\n        slot=\"icon\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        height=\"24px\"\n        viewBox=\"0 0 24 24\"\n        width=\"24px\"\n        fill=\"#000000\"\n      >\n        <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n        <path\n          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\"\n        />\n      </svg>\n    </ic-card-horizontal>`,\n\n  name: \"Icon\",\n};\n\n/**\n * Direct users to another page by making the horizontal card clickable.\n */\nexport const Clickable = {\n  render: () =>\n    html`<ic-card-horizontal\n      heading=\"Card heading\"\n      message=\"Card message\"\n      clickable=\"true\"\n    >\n      <svg\n        slot=\"icon\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        height=\"24px\"\n        viewBox=\"0 0 24 24\"\n        width=\"24px\"\n        fill=\"#000000\"\n      >\n        <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n        <path\n          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\"\n        />\n      </svg>\n    </ic-card-horizontal>`,\n\n  name: \"Clickable\",\n};\n\n/**\n * Direct users to another page by making the horizontal card clickable with an href.\n */\nexport const ClickableHref = {\n  render: () =>\n    html`<ic-card-horizontal\n      heading=\"Card heading\"\n      message=\"Card message\"\n      clickable=\"true\"\n      href=\"https://www.google.com\"\n    >\n      <svg\n        slot=\"icon\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        height=\"24px\"\n        viewBox=\"0 0 24 24\"\n        width=\"24px\"\n        fill=\"#000000\"\n      >\n        <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n        <path\n          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\"\n        />\n      </svg>\n    </ic-card-horizontal>`,\n\n  name: \"Clickable - href\",\n};\n\n/**\n * Another method of making horizontal card clickable is wrapping it in a link.\n */\nexport const WrappedByLink = {\n  render: () =>\n    html`<a href=\"/\">\n      <ic-card-horizontal heading=\"Card heading\" message=\"Card message\">\n        <svg\n          slot=\"icon\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          height=\"24px\"\n          viewBox=\"0 0 24 24\"\n          width=\"24px\"\n          fill=\"#000000\"\n        >\n          <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n          <path\n            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\"\n          />\n        </svg> </ic-card-horizontal\n    ></a>`,\n\n  name: \"Wrapped by link\",\n};\n\n/**\n * Add an image to the horizontal card.\n */\nexport const Image = {\n  render: () =>\n    html`<ic-card-horizontal heading=\"Card heading\" message=\"Card message\">\n      <svg\n        slot=\"icon\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        height=\"24px\"\n        viewBox=\"0 0 24 24\"\n        width=\"24px\"\n        fill=\"#000000\"\n      >\n        <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n        <path\n          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\"\n        />\n      </svg>\n      <svg\n        slot=\"image\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 1600 900\"\n      >\n        <rect fill=\"#ff7700\" width=\"1600\" height=\"1600\" y=\"-350\" />\n        <polygon fill=\"#cc0000\" points=\"957 450 539 900 1396 900\" />\n        <polygon fill=\"#aa0000\" points=\"957 450 872.9 900 1396 900\" />\n        <polygon fill=\"#c50022\" points=\"-60 900 398 662 816 900\" />\n        <polygon fill=\"#a3001b\" points=\"337 900 398 662 816 900\" />\n        <polygon fill=\"#be0044\" points=\"1203 546 1552 900 876 900\" />\n        <polygon fill=\"#9c0036\" points=\"1203 546 1552 900 1162 900\" />\n        <polygon fill=\"#b80066\" points=\"641 695 886 900 367 900\" />\n        <polygon fill=\"#960052\" points=\"587 900 641 695 886 900\" />\n        <polygon fill=\"#b10088\" points=\"1710 900 1401 632 1096 900\" />\n        <polygon fill=\"#8f006d\" points=\"1710 900 1401 632 1365 900\" />\n        <polygon fill=\"#aa00aa\" points=\"1210 900 971 687 725 900\" />\n        <polygon fill=\"#880088\" points=\"943 900 1210 900 971 687\" />\n      </svg>\n    </ic-card-horizontal>`,\n\n  name: \"Image\",\n};\n\n/**\n * The horizontal card can be displayed in different sizes.\n */\nexport const Sizes = {\n  render: () =>\n    html`<div>\n      <ic-card-horizontal\n        heading=\"Card heading\"\n        message=\"This card is used for small bits of text.\"\n        size=\"small\"\n      >\n        <svg\n          slot=\"icon\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          height=\"24px\"\n          viewBox=\"0 0 24 24\"\n          width=\"24px\"\n          fill=\"#000000\"\n        >\n          <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n          <path\n            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\"\n          />\n        </svg>\n        <svg\n          slot=\"image\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 1600 900\"\n        >\n          <rect fill=\"#ff7700\" width=\"1600\" height=\"1600\" y=\"-350\" />\n          <polygon fill=\"#cc0000\" points=\"957 450 539 900 1396 900\" />\n          <polygon fill=\"#aa0000\" points=\"957 450 872.9 900 1396 900\" />\n          <polygon fill=\"#c50022\" points=\"-60 900 398 662 816 900\" />\n          <polygon fill=\"#a3001b\" points=\"337 900 398 662 816 900\" />\n          <polygon fill=\"#be0044\" points=\"1203 546 1552 900 876 900\" />\n          <polygon fill=\"#9c0036\" points=\"1203 546 1552 900 1162 900\" />\n          <polygon fill=\"#b80066\" points=\"641 695 886 900 367 900\" />\n          <polygon fill=\"#960052\" points=\"587 900 641 695 886 900\" />\n          <polygon fill=\"#b10088\" points=\"1710 900 1401 632 1096 900\" />\n          <polygon fill=\"#8f006d\" points=\"1710 900 1401 632 1365 900\" />\n          <polygon fill=\"#aa00aa\" points=\"1210 900 971 687 725 900\" />\n          <polygon fill=\"#880088\" points=\"943 900 1210 900 971 687\" />\n        </svg>\n      </ic-card-horizontal>\n      <br />\n      <ic-card-horizontal\n        heading=\"Card heading\"\n        message=\"This card is used for small to medium bits of text. It's slightly bigger.\"\n        size=\"default\"\n      >\n        <svg\n          slot=\"icon\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          height=\"24px\"\n          viewBox=\"0 0 24 24\"\n          width=\"24px\"\n          fill=\"#000000\"\n        >\n          <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n          <path\n            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\"\n          />\n        </svg>\n        <svg\n          slot=\"image\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 1600 900\"\n        >\n          <rect fill=\"#ff7700\" width=\"1600\" height=\"1600\" y=\"-350\" />\n          <polygon fill=\"#cc0000\" points=\"957 450 539 900 1396 900\" />\n          <polygon fill=\"#aa0000\" points=\"957 450 872.9 900 1396 900\" />\n          <polygon fill=\"#c50022\" points=\"-60 900 398 662 816 900\" />\n          <polygon fill=\"#a3001b\" points=\"337 900 398 662 816 900\" />\n          <polygon fill=\"#be0044\" points=\"1203 546 1552 900 876 900\" />\n          <polygon fill=\"#9c0036\" points=\"1203 546 1552 900 1162 900\" />\n          <polygon fill=\"#b80066\" points=\"641 695 886 900 367 900\" />\n          <polygon fill=\"#960052\" points=\"587 900 641 695 886 900\" />\n          <polygon fill=\"#b10088\" points=\"1710 900 1401 632 1096 900\" />\n          <polygon fill=\"#8f006d\" points=\"1710 900 1401 632 1365 900\" />\n          <polygon fill=\"#aa00aa\" points=\"1210 900 971 687 725 900\" />\n          <polygon fill=\"#880088\" points=\"943 900 1210 900 971 687\" />\n        </svg>\n      </ic-card-horizontal>\n      <br />\n      <ic-card-horizontal\n        heading=\"Card heading\"\n        message=\"This card is used for medium to large bits of text. This will take up more space on the page.\"\n        size=\"large\"\n      >\n        <svg\n          slot=\"icon\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          height=\"24px\"\n          viewBox=\"0 0 24 24\"\n          width=\"24px\"\n          fill=\"#000000\"\n        >\n          <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n          <path\n            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\"\n          />\n        </svg>\n        <svg\n          slot=\"image\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 1600 900\"\n        >\n          <rect fill=\"#ff7700\" width=\"1600\" height=\"1600\" y=\"-350\" />\n          <polygon fill=\"#cc0000\" points=\"957 450 539 900 1396 900\" />\n          <polygon fill=\"#aa0000\" points=\"957 450 872.9 900 1396 900\" />\n          <polygon fill=\"#c50022\" points=\"-60 900 398 662 816 900\" />\n          <polygon fill=\"#a3001b\" points=\"337 900 398 662 816 900\" />\n          <polygon fill=\"#be0044\" points=\"1203 546 1552 900 876 900\" />\n          <polygon fill=\"#9c0036\" points=\"1203 546 1552 900 1162 900\" />\n          <polygon fill=\"#b80066\" points=\"641 695 886 900 367 900\" />\n          <polygon fill=\"#960052\" points=\"587 900 641 695 886 900\" />\n          <polygon fill=\"#b10088\" points=\"1710 900 1401 632 1096 900\" />\n          <polygon fill=\"#8f006d\" points=\"1710 900 1401 632 1365 900\" />\n          <polygon fill=\"#aa00aa\" points=\"1210 900 971 687 725 900\" />\n          <polygon fill=\"#880088\" points=\"943 900 1210 900 971 687\" />\n        </svg>\n      </ic-card-horizontal>\n      <br />\n      <ic-card-horizontal\n        heading=\"Card heading\"\n        message=\"This card is used for large bits of text. It's the biggest card size option so will take up the most space on the application's page.\"\n        size=\"extra-large\"\n      >\n        <svg\n          slot=\"icon\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          height=\"24px\"\n          viewBox=\"0 0 24 24\"\n          width=\"24px\"\n          fill=\"#000000\"\n        >\n          <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n          <path\n            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\"\n          />\n        </svg>\n        <svg\n          slot=\"image\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 1600 900\"\n        >\n          <rect fill=\"#ff7700\" width=\"1600\" height=\"1600\" y=\"-350\" />\n          <polygon fill=\"#cc0000\" points=\"957 450 539 900 1396 900\" />\n          <polygon fill=\"#aa0000\" points=\"957 450 872.9 900 1396 900\" />\n          <polygon fill=\"#c50022\" points=\"-60 900 398 662 816 900\" />\n          <polygon fill=\"#a3001b\" points=\"337 900 398 662 816 900\" />\n          <polygon fill=\"#be0044\" points=\"1203 546 1552 900 876 900\" />\n          <polygon fill=\"#9c0036\" points=\"1203 546 1552 900 1162 900\" />\n          <polygon fill=\"#b80066\" points=\"641 695 886 900 367 900\" />\n          <polygon fill=\"#960052\" points=\"587 900 641 695 886 900\" />\n          <polygon fill=\"#b10088\" points=\"1710 900 1401 632 1096 900\" />\n          <polygon fill=\"#8f006d\" points=\"1710 900 1401 632 1365 900\" />\n          <polygon fill=\"#aa00aa\" points=\"1210 900 971 687 725 900\" />\n          <polygon fill=\"#880088\" points=\"943 900 1210 900 971 687\" />\n        </svg>\n      </ic-card-horizontal>\n    </div>`,\n\n  name: \"Sizes\",\n};\n\n/**\n * When there is too much text content for the horizontal card, the heading and message with truncate.\n */\nexport const Truncation = {\n  render: () =>\n    html`<div>\n      <ic-card-horizontal\n        heading=\"Really long card heading to show truncation\"\n        message=\"This card is used for small bits of text. More text has been added to show truncation.\"\n        size=\"small\"\n      >\n        <svg\n          slot=\"icon\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          height=\"24px\"\n          viewBox=\"0 0 24 24\"\n          width=\"24px\"\n          fill=\"#000000\"\n        >\n          <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n          <path\n            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\"\n          />\n        </svg>\n        <svg\n          slot=\"image\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 1600 900\"\n        >\n          <rect fill=\"#ff7700\" width=\"1600\" height=\"1600\" y=\"-350\" />\n          <polygon fill=\"#cc0000\" points=\"957 450 539 900 1396 900\" />\n          <polygon fill=\"#aa0000\" points=\"957 450 872.9 900 1396 900\" />\n          <polygon fill=\"#c50022\" points=\"-60 900 398 662 816 900\" />\n          <polygon fill=\"#a3001b\" points=\"337 900 398 662 816 900\" />\n          <polygon fill=\"#be0044\" points=\"1203 546 1552 900 876 900\" />\n          <polygon fill=\"#9c0036\" points=\"1203 546 1552 900 1162 900\" />\n          <polygon fill=\"#b80066\" points=\"641 695 886 900 367 900\" />\n          <polygon fill=\"#960052\" points=\"587 900 641 695 886 900\" />\n          <polygon fill=\"#b10088\" points=\"1710 900 1401 632 1096 900\" />\n          <polygon fill=\"#8f006d\" points=\"1710 900 1401 632 1365 900\" />\n          <polygon fill=\"#aa00aa\" points=\"1210 900 971 687 725 900\" />\n          <polygon fill=\"#880088\" points=\"943 900 1210 900 971 687\" />\n        </svg>\n      </ic-card-horizontal>\n      <br />\n      <ic-card-horizontal\n        heading=\"Really long card heading to show truncation\"\n        message=\"This card is used for small to medium bits of text. It's slightly bigger. More text has been added to show truncation.\"\n        size=\"default\"\n      >\n        <svg\n          slot=\"icon\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          height=\"24px\"\n          viewBox=\"0 0 24 24\"\n          width=\"24px\"\n          fill=\"#000000\"\n        >\n          <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n          <path\n            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\"\n          />\n        </svg>\n        <svg\n          slot=\"image\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 1600 900\"\n        >\n          <rect fill=\"#ff7700\" width=\"1600\" height=\"1600\" y=\"-350\" />\n          <polygon fill=\"#cc0000\" points=\"957 450 539 900 1396 900\" />\n          <polygon fill=\"#aa0000\" points=\"957 450 872.9 900 1396 900\" />\n          <polygon fill=\"#c50022\" points=\"-60 900 398 662 816 900\" />\n          <polygon fill=\"#a3001b\" points=\"337 900 398 662 816 900\" />\n          <polygon fill=\"#be0044\" points=\"1203 546 1552 900 876 900\" />\n          <polygon fill=\"#9c0036\" points=\"1203 546 1552 900 1162 900\" />\n          <polygon fill=\"#b80066\" points=\"641 695 886 900 367 900\" />\n          <polygon fill=\"#960052\" points=\"587 900 641 695 886 900\" />\n          <polygon fill=\"#b10088\" points=\"1710 900 1401 632 1096 900\" />\n          <polygon fill=\"#8f006d\" points=\"1710 900 1401 632 1365 900\" />\n          <polygon fill=\"#aa00aa\" points=\"1210 900 971 687 725 900\" />\n          <polygon fill=\"#880088\" points=\"943 900 1210 900 971 687\" />\n        </svg>\n      </ic-card-horizontal>\n      <br />\n      <ic-card-horizontal\n        heading=\"Really long card heading to show truncation in the large size variant\"\n        message=\"This card is used for medium to large bits of text. This will take up more space on the page. More text has been added to show truncation. The large card can hold 3 lines of text before it gets cut off, displaying an ellipsis instead of all the text.\"\n        size=\"large\"\n      >\n        <svg\n          slot=\"icon\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          height=\"24px\"\n          viewBox=\"0 0 24 24\"\n          width=\"24px\"\n          fill=\"#000000\"\n        >\n          <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n          <path\n            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\"\n          />\n        </svg>\n        <svg\n          slot=\"image\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 1600 900\"\n        >\n          <rect fill=\"#ff7700\" width=\"1600\" height=\"1600\" y=\"-350\" />\n          <polygon fill=\"#cc0000\" points=\"957 450 539 900 1396 900\" />\n          <polygon fill=\"#aa0000\" points=\"957 450 872.9 900 1396 900\" />\n          <polygon fill=\"#c50022\" points=\"-60 900 398 662 816 900\" />\n          <polygon fill=\"#a3001b\" points=\"337 900 398 662 816 900\" />\n          <polygon fill=\"#be0044\" points=\"1203 546 1552 900 876 900\" />\n          <polygon fill=\"#9c0036\" points=\"1203 546 1552 900 1162 900\" />\n          <polygon fill=\"#b80066\" points=\"641 695 886 900 367 900\" />\n          <polygon fill=\"#960052\" points=\"587 900 641 695 886 900\" />\n          <polygon fill=\"#b10088\" points=\"1710 900 1401 632 1096 900\" />\n          <polygon fill=\"#8f006d\" points=\"1710 900 1401 632 1365 900\" />\n          <polygon fill=\"#aa00aa\" points=\"1210 900 971 687 725 900\" />\n          <polygon fill=\"#880088\" points=\"943 900 1210 900 971 687\" />\n        </svg>\n      </ic-card-horizontal>\n      <br />\n      <ic-card-horizontal\n        heading=\"Really long card heading to show truncation in the extra large size variant of horizontal cards\"\n        message=\"This card is used for large bits of text. It's the biggest card size option so will take up the most space on the application's page. More text has been added to show truncation. The extra large card can hold 5 lines of text before it gets cut off, displaying an ellipsis instead of all the text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum pharetra scelerisque arcu, vitae semper nisl rhoncusut. 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.\"\n        size=\"extra-large\"\n      >\n        <svg\n          slot=\"icon\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          height=\"24px\"\n          viewBox=\"0 0 24 24\"\n          width=\"24px\"\n          fill=\"#000000\"\n        >\n          <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n          <path\n            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\"\n          />\n        </svg>\n        <svg\n          slot=\"image\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 1600 900\"\n        >\n          <rect fill=\"#ff7700\" width=\"1600\" height=\"1600\" y=\"-350\" />\n          <polygon fill=\"#cc0000\" points=\"957 450 539 900 1396 900\" />\n          <polygon fill=\"#aa0000\" points=\"957 450 872.9 900 1396 900\" />\n          <polygon fill=\"#c50022\" points=\"-60 900 398 662 816 900\" />\n          <polygon fill=\"#a3001b\" points=\"337 900 398 662 816 900\" />\n          <polygon fill=\"#be0044\" points=\"1203 546 1552 900 876 900\" />\n          <polygon fill=\"#9c0036\" points=\"1203 546 1552 900 1162 900\" />\n          <polygon fill=\"#b80066\" points=\"641 695 886 900 367 900\" />\n          <polygon fill=\"#960052\" points=\"587 900 641 695 886 900\" />\n          <polygon fill=\"#b10088\" points=\"1710 900 1401 632 1096 900\" />\n          <polygon fill=\"#8f006d\" points=\"1710 900 1401 632 1365 900\" />\n          <polygon fill=\"#aa00aa\" points=\"1210 900 971 687 725 900\" />\n          <polygon fill=\"#880088\" points=\"943 900 1210 900 971 687\" />\n        </svg>\n      </ic-card-horizontal>\n    </div>`,\n\n  name: \"Truncation\",\n};\n\n/**\n * Disable the horizontal card to prevent users from interacting with it.\n */\nexport const Disabled = {\n  render: () =>\n    html`<ic-card-horizontal\n      heading=\"Card heading\"\n      message=\"Card message\"\n      clickable=\"true\"\n      disabled=\"true\"\n    >\n      <svg\n        slot=\"icon\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        height=\"24px\"\n        viewBox=\"0 0 24 24\"\n        width=\"24px\"\n        fill=\"#000000\"\n      >\n        <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n        <path\n          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\"\n        />\n      </svg>\n      <svg\n        slot=\"image\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 1600 900\"\n      >\n        <rect fill=\"#ff7700\" width=\"1600\" height=\"1600\" y=\"-350\" />\n        <polygon fill=\"#cc0000\" points=\"957 450 539 900 1396 900\" />\n        <polygon fill=\"#aa0000\" points=\"957 450 872.9 900 1396 900\" />\n        <polygon fill=\"#c50022\" points=\"-60 900 398 662 816 900\" />\n        <polygon fill=\"#a3001b\" points=\"337 900 398 662 816 900\" />\n        <polygon fill=\"#be0044\" points=\"1203 546 1552 900 876 900\" />\n        <polygon fill=\"#9c0036\" points=\"1203 546 1552 900 1162 900\" />\n        <polygon fill=\"#b80066\" points=\"641 695 886 900 367 900\" />\n        <polygon fill=\"#960052\" points=\"587 900 641 695 886 900\" />\n        <polygon fill=\"#b10088\" points=\"1710 900 1401 632 1096 900\" />\n        <polygon fill=\"#8f006d\" points=\"1710 900 1401 632 1365 900\" />\n        <polygon fill=\"#aa00aa\" points=\"1210 900 971 687 725 900\" />\n        <polygon fill=\"#880088\" points=\"943 900 1210 900 971 687\" />\n      </svg>\n    </ic-card-horizontal>`,\n\n  name: \"Disabled\",\n};\n\nexport const SlottedHeadingAndMessage = {\n  render: () =>\n    html`<ic-card-horizontal>\n      <h4 slot=\"heading\">Card heading</h4>\n      <p slot=\"message\">Card message</p>\n      <svg\n        slot=\"icon\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        height=\"24px\"\n        viewBox=\"0 0 24 24\"\n        width=\"24px\"\n        fill=\"#000000\"\n      >\n        <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n        <path\n          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\"\n        />\n      </svg>\n    </ic-card-horizontal>`,\n\n  name: \"Slotted heading and message\",\n};\n\n/**\n * Set the width of the horizontal card by using the `--card-horizontal-width` CSS custom property. The horizontal card will grow, but not exceed its maximum supported width.\n */\nexport const CustomWidth = {\n  render: () =>\n    html`<ic-card-horizontal\n      heading=\"Card heading\"\n      message=\"Card message\"\n      style=\"--card-horizontal-width: 400px\"\n    >\n      <svg\n        slot=\"icon\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        height=\"24px\"\n        viewBox=\"0 0 24 24\"\n        width=\"24px\"\n        fill=\"#000000\"\n      >\n        <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n        <path\n          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\"\n        />\n      </svg>\n      <svg\n        slot=\"image\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 1600 900\"\n      >\n        <rect fill=\"#ff7700\" width=\"1600\" height=\"1600\" y=\"-350\" />\n        <polygon fill=\"#cc0000\" points=\"957 450 539 900 1396 900\" />\n        <polygon fill=\"#aa0000\" points=\"957 450 872.9 900 1396 900\" />\n        <polygon fill=\"#c50022\" points=\"-60 900 398 662 816 900\" />\n        <polygon fill=\"#a3001b\" points=\"337 900 398 662 816 900\" />\n        <polygon fill=\"#be0044\" points=\"1203 546 1552 900 876 900\" />\n        <polygon fill=\"#9c0036\" points=\"1203 546 1552 900 1162 900\" />\n        <polygon fill=\"#b80066\" points=\"641 695 886 900 367 900\" />\n        <polygon fill=\"#960052\" points=\"587 900 641 695 886 900\" />\n        <polygon fill=\"#b10088\" points=\"1710 900 1401 632 1096 900\" />\n        <polygon fill=\"#8f006d\" points=\"1710 900 1401 632 1365 900\" />\n        <polygon fill=\"#aa00aa\" points=\"1210 900 971 687 725 900\" />\n        <polygon fill=\"#880088\" points=\"943 900 1210 900 971 687\" />\n      </svg>\n    </ic-card-horizontal>`,\n\n  name: \"Custom width\",\n};\n"]}

package/dist/collection/components/ic-card-horizontal/ic-card-horizontal.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=ic-card-horizontal.types.js.map

package/dist/collection/components/ic-card-horizontal/ic-card-horizontal.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ic-card-horizontal.types.js","sourceRoot":"","sources":["../../../src/components/ic-card-horizontal/ic-card-horizontal.types.ts"],"names":[],"mappings":"","sourcesContent":["export type IcCardSizes = \"small\" | \"medium\" | \"large\" | \"extra-large\";\n"]}

package/dist/collection/components/ic-card-horizontal/test/basic/ic-card-horizontal.spec.js

@@ -0,0 +1,140 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { Card } from "../../ic-card-horizontal";
+import { IcTypography as Typography } from "@ukic/web-components/dist/components/ic-typography";
+describe("ic-card-horizontal", () => {
+    it("should render", async () => {
+        const page = await newSpecPage({
+            components: [Card],
+            html: `<ic-card-horizontal heading="Card" message="This is a static card"></ic-card-horizontal>`,
+        });
+        expect(page.root).toMatchSnapshot();
+    });
+    it("should render small", async () => {
+        const page = await newSpecPage({
+            components: [Card],
+            html: `<ic-card-horizontal heading="Card" message="This is a static card" size="small"></ic-card-horizontal>`,
+        });
+        expect(page.root).toMatchSnapshot();
+    });
+    it("should render large", async () => {
+        const page = await newSpecPage({
+            components: [Card],
+            html: `<ic-card-horizontal heading="Card" message="This is a static card" size="large"></ic-card-horizontal>`,
+        });
+        expect(page.root).toMatchSnapshot();
+    });
+    it("should render extra large", async () => {
+        const page = await newSpecPage({
+            components: [Card],
+            html: `<ic-card-horizontal heading="Card" message="This is a static card" size="extra large"></ic-card-horizontal>`,
+        });
+        expect(page.root).toMatchSnapshot();
+    });
+    it("should render as a button", async () => {
+        const page = await newSpecPage({
+            components: [Card],
+            html: `<ic-card-horizontal heading="Card" message="This is a clickable card rendered as a button" clickable=true></ic-card-horizontal>`,
+        });
+        expect(page.root).toMatchSnapshot();
+    });
+    it("should render as a link", async () => {
+        const page = await newSpecPage({
+            components: [Card],
+            html: `<ic-card-horizontal heading="Card" message="This is a clickable card rendered as a button" clickable=true href="/"></ic-card-horizontal>`,
+        });
+        expect(page.root).toMatchSnapshot();
+    });
+    it("should render with a link parent", async () => {
+        const page = await newSpecPage({
+            components: [Card],
+            html: `<a href="/"><ic-card-horizontal heading="Card" message="This is a clickable card" clickable=true></ic-card-horizontal></a>`,
+        });
+        expect(page.root).toMatchSnapshot();
+    });
+    it("should render disabled", async () => {
+        const page = await newSpecPage({
+            components: [Card],
+            html: `<ic-card-horizontal heading="Card" message="This is a static card" disabled clickable></ic-card-horizontal>`,
+        });
+        expect(page.root).toMatchSnapshot();
+        page.rootInstance.disabled = false;
+        await page.waitForChanges();
+        expect(page.root).toMatchSnapshot("disabled-removed");
+    });
+    it("should apply 'focussed' style when parent is focussed", async () => {
+        const page = await newSpecPage({
+            components: [Card],
+            html: `<a href="/"><ic-card-horizontal id="test-id" heading="Card" message="This is a clickable card" clickable=true></ic-card-horizontal></a>`,
+        });
+        expect(page.root).not.toBeNull;
+        const element = await document.getElementById("test-id");
+        await expect(element.classList.contains("focussed")).toBeFalsy;
+        await element.focus();
+        await expect(element.classList.contains("focussed")).toBeTruthy;
+    });
+    it("should lose 'focussed' style when parent loses focus", async () => {
+        const page = await newSpecPage({
+            components: [Card],
+            html: `<a href="/"><ic-card-horizontal id="test-card" heading="Card" message="This is a clickable card" clickable=true></ic-card-horizontal></a>`,
+        });
+        expect(page.root).not.toBeNull;
+        const element = await document.getElementById("test-card");
+        await element.focus();
+        await expect(element.classList.contains("focussed")).toBeTruthy;
+        await element.blur();
+        await expect(element.classList.contains("focussed")).toBeFalsy;
+        await page.rootInstance.disconnectedCallback();
+    });
+    it("should stop immediate propagation of a click event when disabled", async () => {
+        const page = await newSpecPage({
+            components: [Card],
+            html: `<ic-card-horizontal id="test-card" heading="Card" message="This is a clickable card" clickable=true disabled=true onclick="alert('test')"></ic-card-horizontal>`,
+        });
+        jest.spyOn(window, "alert").mockImplementation();
+        const element = await document.getElementById("test-card");
+        element.click();
+        await page.waitForChanges();
+        await expect(window.alert).not.toHaveBeenCalled;
+    });
+    it("should render with an image", async () => {
+        const page = await newSpecPage({
+            components: [Card],
+            html: `<ic-card-horizontal id="test-card" heading="Card" message="This is a card"><div slot="image">Image placeholder</div></ic-card-horizontal>`,
+        });
+        expect(page.root).toMatchSnapshot();
+    });
+    it("should render with an icon", async () => {
+        const page = await newSpecPage({
+            components: [Card],
+            html: `<ic-card-horizontal id="test-card" heading="Card" message="This is a card"><div slot="icon">Image placeholder</div></ic-card-horizontal>`,
+        });
+        expect(page.root).toMatchSnapshot();
+    });
+    it("should render with a slotted heading and message", async () => {
+        const page = await newSpecPage({
+            components: [Card, Typography],
+            html: `<ic-card-horizontal id="test-card">
+      <ic-typography slot="heading">Heading</ic-typography>
+      <ic-typography slot="message">Message</ic-typography>
+    </ic-card-horizontal>`,
+        });
+        expect(page.root).toMatchSnapshot();
+    });
+    it("should call 'setFocus' when card as a button is focused", async () => {
+        const page = await newSpecPage({
+            components: [Card],
+            html: `<ic-card-horizontal heading="Card" message="This is a clickable card rendered as a button" clickable=true></ic-card-horizontal>`,
+        });
+        //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-horizontal heading="Card" message="This is a clickable card rendered as a button" clickable=true href="/"></ic-card-horizontal>`,
+        });
+        //Can't expect anything in this test - this is to increase code coverage only
+        await page.rootInstance.setFocus().toHaveBeenCalled;
+    });
+});
+//# sourceMappingURL=ic-card-horizontal.spec.js.map

package/dist/collection/components/ic-card-horizontal/test/basic/ic-card-horizontal.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ic-card-horizontal.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-card-horizontal/test/basic/ic-card-horizontal.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { newSpecPage } from \"@stencil/core/testing\";\nimport { Card } from \"../../ic-card-horizontal\";\nimport { IcTypography as Typography } from \"@ukic/web-components/dist/components/ic-typography\";\n\ndescribe(\"ic-card-horizontal\", () => {\n  it(\"should render\", async () => {\n    const page = await newSpecPage({\n      components: [Card],\n      html: `<ic-card-horizontal heading=\"Card\" message=\"This is a static card\"></ic-card-horizontal>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render small\", async () => {\n    const page = await newSpecPage({\n      components: [Card],\n      html: `<ic-card-horizontal heading=\"Card\" message=\"This is a static card\" size=\"small\"></ic-card-horizontal>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render large\", async () => {\n    const page = await newSpecPage({\n      components: [Card],\n      html: `<ic-card-horizontal heading=\"Card\" message=\"This is a static card\" size=\"large\"></ic-card-horizontal>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render extra large\", async () => {\n    const page = await newSpecPage({\n      components: [Card],\n      html: `<ic-card-horizontal heading=\"Card\" message=\"This is a static card\" size=\"extra large\"></ic-card-horizontal>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render as a button\", async () => {\n    const page = await newSpecPage({\n      components: [Card],\n      html: `<ic-card-horizontal heading=\"Card\" message=\"This is a clickable card rendered as a button\" clickable=true></ic-card-horizontal>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render as a link\", async () => {\n    const page = await newSpecPage({\n      components: [Card],\n      html: `<ic-card-horizontal heading=\"Card\" message=\"This is a clickable card rendered as a button\" clickable=true href=\"/\"></ic-card-horizontal>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render with a link parent\", async () => {\n    const page = await newSpecPage({\n      components: [Card],\n      html: `<a href=\"/\"><ic-card-horizontal heading=\"Card\" message=\"This is a clickable card\" clickable=true></ic-card-horizontal></a>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render disabled\", async () => {\n    const page = await newSpecPage({\n      components: [Card],\n      html: `<ic-card-horizontal heading=\"Card\" message=\"This is a static card\" disabled clickable></ic-card-horizontal>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n\n    page.rootInstance.disabled = false;\n\n    await page.waitForChanges();\n    expect(page.root).toMatchSnapshot(\"disabled-removed\");\n  });\n\n  it(\"should apply 'focussed' style when parent is focussed\", async () => {\n    const page = await newSpecPage({\n      components: [Card],\n      html: `<a href=\"/\"><ic-card-horizontal id=\"test-id\" heading=\"Card\" message=\"This is a clickable card\" clickable=true></ic-card-horizontal></a>`,\n    });\n\n    expect(page.root).not.toBeNull;\n\n    const element = await document.getElementById(\"test-id\");\n\n    await expect(element.classList.contains(\"focussed\")).toBeFalsy;\n\n    await element.focus();\n\n    await expect(element.classList.contains(\"focussed\")).toBeTruthy;\n  });\n\n  it(\"should lose 'focussed' style when parent loses focus\", async () => {\n    const page = await newSpecPage({\n      components: [Card],\n      html: `<a href=\"/\"><ic-card-horizontal id=\"test-card\" heading=\"Card\" message=\"This is a clickable card\" clickable=true></ic-card-horizontal></a>`,\n    });\n\n    expect(page.root).not.toBeNull;\n\n    const element = await document.getElementById(\"test-card\");\n\n    await element.focus();\n\n    await expect(element.classList.contains(\"focussed\")).toBeTruthy;\n\n    await element.blur();\n\n    await expect(element.classList.contains(\"focussed\")).toBeFalsy;\n\n    await page.rootInstance.disconnectedCallback();\n  });\n\n  it(\"should stop immediate propagation of a click event when disabled\", async () => {\n    const page = await newSpecPage({\n      components: [Card],\n      html: `<ic-card-horizontal id=\"test-card\" heading=\"Card\" message=\"This is a clickable card\" clickable=true disabled=true onclick=\"alert('test')\"></ic-card-horizontal>`,\n    });\n\n    jest.spyOn(window, \"alert\").mockImplementation();\n\n    const element = await document.getElementById(\"test-card\");\n\n    element.click();\n\n    await page.waitForChanges();\n\n    await expect(window.alert).not.toHaveBeenCalled;\n  });\n\n  it(\"should render with an image\", async () => {\n    const page = await newSpecPage({\n      components: [Card],\n      html: `<ic-card-horizontal id=\"test-card\" heading=\"Card\" message=\"This is a card\"><div slot=\"image\">Image placeholder</div></ic-card-horizontal>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render with an icon\", async () => {\n    const page = await newSpecPage({\n      components: [Card],\n      html: `<ic-card-horizontal id=\"test-card\" heading=\"Card\" message=\"This is a card\"><div slot=\"icon\">Image placeholder</div></ic-card-horizontal>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render with a slotted heading and message\", async () => {\n    const page = await newSpecPage({\n      components: [Card, Typography],\n      html: `<ic-card-horizontal id=\"test-card\">\n      <ic-typography slot=\"heading\">Heading</ic-typography>\n      <ic-typography slot=\"message\">Message</ic-typography>\n    </ic-card-horizontal>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should call 'setFocus' when card as a button is focused\", async () => {\n    const page = await newSpecPage({\n      components: [Card],\n      html: `<ic-card-horizontal heading=\"Card\" message=\"This is a clickable card rendered as a button\" clickable=true></ic-card-horizontal>`,\n    });\n\n    //Can't expect anything in this test - this is to increase code coverage only\n    await page.rootInstance.setFocus().toHaveBeenCalled;\n  });\n\n  it(\"should call 'setFocus' when card as a link is focused\", async () => {\n    const page = await newSpecPage({\n      components: [Card],\n      html: `<ic-card-horizontal heading=\"Card\" message=\"This is a clickable card rendered as a button\" clickable=true href=\"/\"></ic-card-horizontal>`,\n    });\n\n    //Can't expect anything in this test - this is to increase code coverage only\n    await page.rootInstance.setFocus().toHaveBeenCalled;\n  });\n});\n"]}

package/dist/collection/components/ic-data-table/ic-data-table.css

@@ -1,13 +1,47 @@
 :host {
   position: relative;
-  display: block;
-  height: 100%;
+  display: inline-flex;
   max-height: 100%;
+  width: var(--table-width, 100%);
+  height: 100%;
+  min-width: var(--table-min-width);
+  max-width: var(--table-max-width);
+}
+
+tbody {
+  vertical-align: top;
 }
 
 .table-container {
   position: relative;
   height: calc(100% - var(--ic-space-xxxs));
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+.cell-container {
+  display: flex;
+  min-height: 1.5rem;
+  overflow-y: hidden;
+  height: var(--row-height);
+}
+
+.truncation-show-hide {
+  display: block;
+}
+
+.cell-icon.truncation-show-hide {
+  display: flex;
+}
+
+.cell-container:not(.data-type-element, .truncation-show-hide) {
+  overflow-x: hidden;
+}
+
+ic-loading-indicator {
+  position: sticky;
+  top: 20px;
 }
 
 .table-row-container {
@@ -23,9 +57,10 @@
 }
 
 table {
-  table-layout: fixed;
+  table-layout: var(--table-layout, "fixed");
   border-spacing: 0;
   width: 100%;
+  height: var(--table-height, auto);
 }
 
 .table-row-container:focus {
@@ -36,10 +71,27 @@ table {
   z-index: 1;
 }
 
-:host([embedded="true"]) .table-container {
+:host([embedded="true"]) .table-row-container {
   border: var(--ic-border-light);
 }
 
+.column-header-inner-container {
+  padding: var(--ic-space-xs);
+  box-sizing: border-box;
+}
+
+.column-header-inner-container ic-tooltip {
+  pointer-events: none;
+}
+
+.column-header-inner-container ic-tooltip.show-trunc-tooltip {
+  pointer-events: auto;
+}
+
+.column-header-inner-container ic-tooltip .column-header-text {
+  --ic-line-clamp: 1;
+}
+
 .column-header-sticky {
   position: sticky;
   top: 0;
@@ -88,7 +140,8 @@ table {
   color: var(--ic-color-tertiary-text);
 }
 
-.table-density-dense {
+.table-density-dense .column-header-inner-container,
+td.table-density-dense {
   padding: var(--ic-space-xxs) var(--ic-space-xs) !important;
 }
 
@@ -96,7 +149,8 @@ table {
   font-size: var(--ic-font-size-label);
 }
 
-.table-density-spacious {
+.table-density-spacious .column-header-inner-container,
+td.table-density-spacious {
   padding: 0.625rem var(--ic-space-xs) !important;
 }
 
@@ -108,8 +162,16 @@ table {
   font-weight: var(--ic-font-weight-bold);
 }
 
-.column-header,
-.row-header {
+.dummy-column-header-text {
+  white-space: nowrap;
+  overflow: hidden;
+  height: 0;
+  width: -moz-fit-content;
+  width: fit-content;
+}
+
+.row-header,
+.column-header {
   text-align: left;
   padding: var(--ic-space-xs);
   background-color: var(--ic-architectural-40);
@@ -117,6 +179,13 @@ table {
   border-bottom: var(--ic-border-light);
 }
 
+.column-header {
+  padding: 0;
+  width: var(--column-width);
+  min-width: var(--column-min-width, 4rem);
+  max-width: var(--column-max-width);
+}
+
 .column-header:last-child {
   border-right: none;
 }
@@ -134,18 +203,29 @@ table {
 .row-header-alignment-left,
 .cell-alignment-left {
   text-align: left !important;
+  justify-content: start !important;
 }
 
 .column-header-alignment-right,
 .row-header-alignment-right,
 .cell-alignment-right {
   text-align: right !important;
+  justify-content: end !important;
+}
+
+.cell-alignment-right.truncation-tooltip ic-tooltip ic-typography {
+  padding-right: calc(var(--ic-space-xxs) + var(--ic-space-xs));
+}
+
+.cell-alignment-right.truncation-show-hide ic-typography {
+  --ellipsis-padding-right: calc(var(--ic-space-xxs) + var(--ic-space-xs));
 }
 
 .column-header-alignment-center,
 .row-header-alignment-center,
 .cell-alignment-center {
   text-align: center !important;
+  justify-content: center !important;
 }
 
 .table-row:nth-child(even) {
@@ -155,9 +235,18 @@ table {
 .table-cell {
   padding: var(--ic-space-xs);
   border-bottom: solid var(--ic-architectural-100) var(--ic-space-1px);
+  overflow: hidden;
+  box-sizing: border-box;
+  max-width: var(--column-max-width);
+  min-width: var(--column-min-width);
+}
+
+.table-cell.with-overflow {
+  overflow: visible;
 }
 
-.data-type-string {
+.data-type-string,
+.data-type-address {
   text-align: left;
   vertical-align: top;
 }
@@ -165,19 +254,23 @@ table {
 .data-type-number,
 .data-type-date {
   text-align: right;
+  justify-content: end;
   vertical-align: top;
 }
 
 .cell-alignment-top {
   vertical-align: top;
+  align-items: flex-start;
 }
 
 .cell-alignment-middle {
   vertical-align: middle;
+  align-items: center;
 }
 
 .cell-alignment-bottom {
   vertical-align: bottom;
+  align-items: flex-end;
 }
 
 .cell-emphasis-low {
@@ -206,9 +299,192 @@ table {
   white-space: pre-wrap;
 }
 
-@media screen and (min-width: 576px) {
+.loading-empty {
+  padding: var(--ic-space-xl) var(--ic-space-xxl);
+  margin-top: var(--ic-space-xl);
+}
+
+.updating-state {
+  padding: 0;
+  border-bottom: var(--ic-border-light);
+}
+
+.updating-state-headers {
+  border-bottom: none;
+}
+
+.loading {
+  position: absolute;
+  left: calc(50% - 5.9741rem);
+  opacity: 0;
+  transition: opacity var(--ic-transition-duration-slow);
+  z-index: calc(var(--ic-z-index-dialog) - 1);
+}
+
+.loading.show-background {
+  background-color: var(--ic-architectural-white);
+  border: var(--ic-border-light);
+}
+
+.loading.show {
+  opacity: 1;
+}
+
+.icon,
+::slotted(svg) {
+  height: var(--ic-space-lg);
+  width: var(--ic-space-lg);
+  margin-right: var(--ic-space-xxs);
+}
+
+.column-header-alignment-right > .icon,
+.row-header-alignment-right > .icon,
+.cell-alignment-right > .icon,
+.column-header-alignment-right > ::slotted(svg),
+.row-header-alignment-right > ::slotted(svg),
+.cell-alignment-right > ::slotted(svg) {
+  margin-right: auto;
+}
+
+.column-header-alignment-center > ic-typography,
+.column-header-alignment-center > .cell-text-wrapper,
+.row-header-alignment-right > ic-typography,
+.row-header-alignment-right > .cell-text-wrapper,
+.cell-alignment-center > ic-typography,
+.cell-alignment-center > .cell-text-wrapper {
+  flex: 1;
+}
+
+.icon > svg {
+  height: var(--ic-space-lg);
+  width: var(--ic-space-lg);
+  display: inline-block;
+}
+
+.truncation-tooltip ic-typography {
+  display: -webkit-box;
+  -webkit-line-clamp: var(--ic-line-clamp, 0);
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.truncation-tooltip ic-typography,
+.truncation-show-hide ic-typography {
+  white-space: normal;
+}
+
+.ic-tooltip-overflow {
+  overflow: hidden;
+  width: 100%;
+}
+
+.action-element {
+  display: flex;
+  justify-content: right;
+}
+
+.cell-grid-wrapper {
+  display: grid;
+  grid-template-columns: auto auto;
+}
+
+.loading-overlay {
+  visibility: hidden;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: var(--ic-architectural-black);
+  z-index: calc(var(--ic-z-index-dialog) - 2);
+  opacity: 0;
+  transition: opacity var(--ic-transition-duration-slow);
+}
+
+.loading-overlay.show {
+  visibility: visible;
+  opacity: 0.6;
+}
+
+.sr-only {
+  position: absolute;
+  left: -9999px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .loading-overlay {
+    transition: none;
+  }
+}
+
+.cell-text-wrapper {
+  overflow: hidden;
+}
+
+.cell-text-wrapper > ic-typography {
+  margin-left: 2px;
+}
+
+.cell-text-no-wrap {
+  word-wrap: initial;
+}
+
+.cell-container-with-description {
+  display: flex;
+  flex-direction: row;
+}
+
+.cell-description {
+  display: flex;
+  flex-direction: row;
+  margin-top: var(--ic-space-xxs);
+  word-break: break-all;
+}
+
+.cell-description-text {
+  color: var(--ic-color-secondary-text);
+}
+
+.cell-description-icon {
+  padding-right: var(--ic-space-xs);
+}
+
+.cell-description-icon > svg {
+  height: calc(var(--ic-space-lg) - var(--ic-space-xxs));
+  width: calc(var(--ic-space-lg) - var(--ic-space-xxs));
+  display: flex;
+}
+
+@media (min-width: 577px) {
   .column-header-inner-container {
     display: flex;
     align-items: center;
   }
 }
+
+@media (max-width: 577px) {
+  .cell-icon {
+    flex-wrap: wrap;
+  }
+
+  .cell-description-icon {
+    padding-right: 0;
+  }
+}
+
+/** High Contrast **/
+@media (forced-colors: active) {
+  .icon,
+  ::slotted(svg),
+  .cell-description-icon > svg {
+    fill: currentcolor;
+  }
+
+  .sort-button svg {
+    color: currentcolor;
+  }
+
+  .table-row-selected {
+    background-color: Highlight !important;
+  }
+}