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

package/dist/collection/components/ic-page-header/ic-page-header.stories.js

@@ -1,5 +1,23 @@
 import { html } from "lit-html";
 
+const defaultArgs = {
+  aligned: "left",
+  border: true,
+  heading: "Latte recipe",
+  ["reverse-order"]: false,
+  size: "medium",
+  sticky: false,
+  ["sticky-desktop-only"]: false,
+  subheading:
+    "A Latte is a popular Italian coffee, made with espresso, steamed milk and a thin layer of foam.",
+  theme: "inherit",
+  ["--ic-page-header-text-primary"]: "",
+  ["--ic-page-header-background"]: "",
+  ["--ic-page-header-border"]: "",
+  ["--ic-page-header-text-tertiary"]: "",
+  ["--ic-page-header-placeholder-text-field"]: "",
+};
+
 export default {
   title: "Web Components/Page header",
   component: "ic-page-header",
@@ -9,6 +27,220 @@ export default {
   },
 };
 
+export const Playground = {
+  render: (args) =>
+    html`<ic-page-header
+        aligned=${args.aligned}
+        border=${args.border}
+        heading=${args.heading}
+        reverse-order=${args["reverse-order"]}
+        size=${args.size}
+        sticky=${args.sticky}
+        sticky-desktop-only=${args["sticky-desktop-only"]}
+        subheading=${args.subheading}
+        theme=${args.theme}
+        style="
+      ${args["--ic-page-header-text-primary"] !== ""
+          ? `--ic-page-header-text-primary: ${args["--ic-page-header-text-primary"]};`
+          : ""}
+      ${args["--ic-page-header-background"] !== ""
+          ? `--ic-page-header-background: ${args["--ic-page-header-background"]};`
+          : ""}
+      ${args["--ic-page-header-border"] !== ""
+          ? `--ic-page-header-border: ${args["--ic-page-header-border"]};`
+          : ""}
+      ${args["--ic-page-header-text-tertiary"] !== ""
+          ? `--ic-page-header-text-tertiary: ${args["--ic-page-header-text-tertiary"]};`
+          : ""}
+      ${args["--ic-page-header-placeholder-text-field"] !== ""
+          ? `--ic-page-header-placeholder-text-field: ${args["--ic-page-header-placeholder-text-field"]};`
+          : ""}"
+      >
+        <ic-breadcrumb-group slot="breadcrumbs">
+          <ic-breadcrumb
+            current="true"
+            page-title="Drinks"
+            href="#"
+          ></ic-breadcrumb>
+          <ic-breadcrumb page-title="Coffees" href="#"> </ic-breadcrumb>
+          <ic-breadcrumb page-title="Latte" href="#"></ic-breadcrumb>
+        </ic-breadcrumb-group>
+        <ic-chip slot="heading-adornment" label="Beta" size="large"></ic-chip>
+        <ic-button slot="actions" variant="primary"
+          >Create coffee
+          <svg
+            slot="left-icon"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M19 13H13V19H11V13H5V11H11V5H13V11H19V13Z"
+              fill="currentColor"
+            />
+          </svg>
+        </ic-button>
+        <ic-button slot="actions" variant="tertiary">Filter coffee</ic-button>
+        <ic-stepper slot="stepper">
+          <ic-step heading="Warm kettle" type="completed"></ic-step>
+          <ic-step
+            heading="Warm milk"
+            subheading="Optional"
+            type="completed"
+          ></ic-step>
+          <ic-step heading="Pour milk" type="current" current></ic-step>
+        </ic-stepper>
+      </ic-page-header>
+      <ic-section-container aligned=${args.aligned}>
+        <ic-typography
+          >Example page content to test out the sticky prop.</ic-typography
+        >
+        <ic-typography
+          >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non
+          risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec,
+          ultricies sed, dolor.</ic-typography
+        >
+        <ic-typography
+          >Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper
+          congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie,
+          enim est eleifend mi, non fermentum diam nisl sit amet
+          erat.</ic-typography
+        >
+        <ic-typography
+          >Duis semper. Duis arcu massa, scelerisque vitae, consequat in,
+          pretium a, enim. Pellentesque congue. Ut in risus volutpat libero
+          pharetra tempor. Cras vestibulum bibendum augue.</ic-typography
+        >
+        <ic-typography
+          >Praesent egestas leo in pede. Praesent blandit odio eu enim.
+          Pellentesque sed dui ut augue blandit sodales. Vestibulum ante ipsum
+          primis in faucibus orci luctus et ultrices posuere cubilia Curae;
+          Aliquam nibh.</ic-typography
+        >
+        <ic-typography
+          >Mauris ac mauris sed pede pellentesque fermentum. Maecenas adipiscing
+          ante non diam sodales hendrerit.</ic-typography
+        >
+        <ic-typography
+          >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non
+          risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec,
+          ultricies sed, dolor.</ic-typography
+        >
+        <ic-typography
+          >Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper
+          congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie,
+          enim est eleifend mi, non fermentum diam nisl sit amet
+          erat.</ic-typography
+        >
+        <ic-typography
+          >Duis semper. Duis arcu massa, scelerisque vitae, consequat in,
+          pretium a, enim. Pellentesque congue. Ut in risus volutpat libero
+          pharetra tempor. Cras vestibulum bibendum augue.</ic-typography
+        >
+        <ic-typography
+          >Praesent egestas leo in pede. Praesent blandit odio eu enim.
+          Pellentesque sed dui ut augue blandit sodales. Vestibulum ante ipsum
+          primis in faucibus orci luctus et ultrices posuere cubilia Curae;
+          Aliquam nibh.</ic-typography
+        >
+        <ic-typography
+          >Mauris ac mauris sed pede pellentesque fermentum. Maecenas adipiscing
+          ante non diam sodales hendrerit.</ic-typography
+        >
+        <ic-typography
+          >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non
+          risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec,
+          ultricies sed, dolor.</ic-typography
+        >
+        <ic-typography
+          >Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper
+          congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie,
+          enim est eleifend mi, non fermentum diam nisl sit amet
+          erat.</ic-typography
+        >
+        <ic-typography
+          >Duis semper. Duis arcu massa, scelerisque vitae, consequat in,
+          pretium a, enim. Pellentesque congue. Ut in risus volutpat libero
+          pharetra tempor. Cras vestibulum bibendum augue.</ic-typography
+        >
+        <ic-typography
+          >Praesent egestas leo in pede. Praesent blandit odio eu enim.
+          Pellentesque sed dui ut augue blandit sodales. Vestibulum ante ipsum
+          primis in faucibus orci luctus et ultrices posuere cubilia Curae;
+          Aliquam nibh.</ic-typography
+        >
+        <ic-typography
+          >Mauris ac mauris sed pede pellentesque fermentum. Maecenas adipiscing
+          ante non diam sodales hendrerit.</ic-typography
+        >
+      </ic-section-container>`,
+
+  args: defaultArgs,
+  name: "Playground",
+
+  parameters: {
+    layout: "fullscreen",
+  },
+
+  argTypes: {
+    aligned: {
+      options: ["center", "full-width", "left"],
+
+      control: {
+        type: "inline-radio",
+      },
+    },
+
+    size: {
+      options: ["medium", "small"],
+
+      control: {
+        type: "inline-radio",
+      },
+    },
+
+    theme: {
+      options: ["inherit", "dark", "light"],
+
+      control: {
+        type: "radio",
+      },
+    },
+
+    "--ic-page-header-text-primary": {
+      control: {
+        type: "color",
+      },
+    },
+
+    "--ic-page-header-background": {
+      control: {
+        type: "color",
+      },
+    },
+
+    "--ic-page-header-border": {
+      control: {
+        type: "color",
+      },
+    },
+
+    "--ic-page-header-text-tertiary": {
+      control: {
+        type: "color",
+      },
+    },
+
+    "--ic-page-header-placeholder-text-field": {
+      control: {
+        type: "color",
+      },
+    },
+  },
+};
+
 export const HeadingWithAdornment = {
   render: () => html`
     <ic-page-header heading="Page header">
@@ -52,25 +284,6 @@ export const Small = {
   name: "Small",
 };
 
-export const DeprecatedSmall = {
-  render: () => html`
-    <ic-page-header
-      aligned="left"
-      heading="Page header"
-      subheading="This is a simple page header component and this is the text."
-      small
-    >
-      <ic-status-tag
-        slot="heading-adornment"
-        label="Beta"
-        size="small"
-      ></ic-status-tag>
-    </ic-page-header>
-  `,
-
-  name: "Deprecated - small",
-};
-
 export const WithoutBorder = {
   render: () => html`
     <ic-page-header heading="Page header" border="false">
@@ -165,7 +378,7 @@ export const StickyWithContentAndFooter = {
       <div
         slot="logo"
         style="width:100px;height:100px;display:flex;align-items:center;justify-content:center;
-          background-color:var(--ic-theme-primary);color:var(--ic-theme-text);"
+          background-color:var(--ic-brand-color-primary);color:var(--ic-brand-text-color);"
       >
         Logo
       </div>
@@ -217,7 +430,7 @@ export const StickyForLargeAndExtraLargeBreakpointsOnly = {
       <div
         slot="logo"
         style="width:100px;height:100px;display:flex;align-items:center;justify-content:center;
-          background-color:var(--ic-theme-primary);color:var(--ic-theme-text);"
+          background-color:var(--ic-brand-color-primary);color:var(--ic-brand-text-color);"
       >
         Logo
       </div>
@@ -261,7 +474,7 @@ export const WithActions = {
       <ic-button slot="actions" variant="primary"
         >Create coffee
         <svg
-          slot="icon"
+          slot="left-icon"
           width="24"
           height="24"
           viewBox="0 0 24 24"
@@ -302,13 +515,13 @@ export const WithStepper = {
       subheading="This is a page header component with additional functionality and this is the text."
     >
       <ic-stepper slot="stepper">
-        <ic-step step-title="Warm kettle" step-type="completed"></ic-step>
+        <ic-step heading="Warm kettle" type="completed"></ic-step>
         <ic-step
-          step-title="Warm milk"
-          step-subtitle="Optional"
-          step-type="completed"
+          heading="Warm milk"
+          subheading="Optional"
+          type="completed"
         ></ic-step>
-        <ic-step step-title="Pour milk" step-type="current" current></ic-step>
+        <ic-step heading="Pour milk" type="current" current></ic-step>
       </ic-stepper>
     </ic-page-header>
   `,
@@ -405,7 +618,7 @@ export const WithBreadcrumbsInputActionsAndTabs = {
       <ic-button slot="actions" variant="primary"
         >Create coffee
         <svg
-          slot="icon"
+          slot="left-icon"
           width="24"
           height="24"
           viewBox="0 0 24 24"
@@ -459,7 +672,7 @@ export const WithBreadcrumbsInputActionsAndStepper = {
       <ic-button slot="actions" variant="primary"
         >Create coffee
         <svg
-          slot="icon"
+          slot="left-icon"
           width="24"
           height="24"
           viewBox="0 0 24 24"
@@ -474,13 +687,13 @@ export const WithBreadcrumbsInputActionsAndStepper = {
       </ic-button>
       <ic-button slot="actions" variant="tertiary">Filter coffee</ic-button>
       <ic-stepper slot="stepper">
-        <ic-step step-title="Warm kettle" step-type="completed"></ic-step>
+        <ic-step heading="Warm kettle" type="completed"></ic-step>
         <ic-step
-          step-title="Warm milk"
-          step-subtitle="Optional"
-          step-type="completed"
+          heading="Warm milk"
+          subheading="Optional"
+          type="completed"
         ></ic-step>
-        <ic-step step-title="Pour milk" step-type="current" current></ic-step>
+        <ic-step heading="Pour milk" type="current" current></ic-step>
       </ic-stepper>
       <ic-text-field slot="input" placeholder="Enter your input" hide-label />
     </ic-page-header>
@@ -526,7 +739,7 @@ export const WithBreadcrumbsInputActionsAndStepperAndLongTitle = {
       <ic-button slot="actions" variant="primary"
         >Create coffee
         <svg
-          slot="icon"
+          slot="left-icon"
           width="24"
           height="24"
           viewBox="0 0 24 24"
@@ -541,13 +754,13 @@ export const WithBreadcrumbsInputActionsAndStepperAndLongTitle = {
       </ic-button>
       <ic-button slot="actions" variant="tertiary">Filter coffee</ic-button>
       <ic-stepper slot="stepper">
-        <ic-step step-title="Warm kettle" step-type="completed"></ic-step>
+        <ic-step heading="Warm kettle" type="completed"></ic-step>
         <ic-step
-          step-title="Warm milk"
-          step-subtitle="Optional"
-          step-type="completed"
+          heading="Warm milk"
+          subheading="Optional"
+          type="completed"
         ></ic-step>
-        <ic-step step-title="Pour milk" step-type="current" current></ic-step>
+        <ic-step heading="Pour milk" type="current" current></ic-step>
       </ic-stepper>
       <ic-text-field slot="input" placeholder="Enter your input" hide-label />
     </ic-page-header>
@@ -555,3 +768,56 @@ export const WithBreadcrumbsInputActionsAndStepperAndLongTitle = {
 
   name: "With breadcrumbs, input, actions and stepper and long title",
 };
+
+export const DarkTheme = {
+  render: () => html`
+    <ic-page-header
+      heading="Coffee recipes"
+      subheading="This is a page header component that has breadcrumbs, an input area, actions & stepper."
+      reverse-order="true"
+      theme="dark"
+    >
+      <ic-breadcrumb-group slot="breadcrumbs">
+        <ic-breadcrumb
+          page-title="Breadcrumb 1"
+          href="/breadcrumb-1"
+        ></ic-breadcrumb>
+        <ic-breadcrumb
+          current="true"
+          page-title="Breadcrumb 2"
+          href="/breadcrumb-2"
+        ></ic-breadcrumb>
+      </ic-breadcrumb-group>
+      <ic-chip slot="heading-adornment" label="Beta" size="large"></ic-chip>
+      <ic-button slot="actions" variant="primary"
+        >Create coffee
+        <svg
+          slot="left-icon"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M19 13H13V19H11V13H5V11H11V5H13V11H19V13Z"
+            fill="currentColor"
+          />
+        </svg>
+      </ic-button>
+      <ic-button slot="actions" variant="tertiary">Filter coffee</ic-button>
+      <ic-stepper slot="stepper">
+        <ic-step heading="Warm kettle" type="completed"></ic-step>
+        <ic-step
+          heading="Warm milk"
+          subheading="Optional"
+          type="completed"
+        ></ic-step>
+        <ic-step heading="Pour milk" type="current" current></ic-step>
+      </ic-stepper>
+      <ic-text-field slot="input" placeholder="Enter your input" hide-label />
+    </ic-page-header>
+  `,
+
+  name: "Dark theme",
+};

package/dist/collection/components/ic-page-header/test/basic/ic-page-header.spec.js

@@ -31,7 +31,7 @@ describe("ic-page-header component renders additional functionality", () => {
         <ic-button slot="actions" variant="primary"
           >Create coffee
           <svg
-            slot="icon"
+            slot="left-icon"
             width="24"
             height="24"
             viewBox="0 0 24 24"
@@ -68,13 +68,13 @@ describe("ic-page-header component renders additional functionality", () => {
             html: `
       <ic-page-header heading="Create a coffee">
         <ic-stepper slot="stepper">
-          <ic-step step-title="Warm kettle" step-type="completed"></ic-step>
+          <ic-step heading="Warm kettle" type="completed"></ic-step>
           <ic-step
-            step-title="Warm milk"
-            step-subtitle="Optional"
-            step-type="completed"
+            heading="Warm milk"
+            subheading="Optional"
+            type="completed"
           ></ic-step>
-          <ic-step step-title="Pour milk" step-type="current"></ic-step>
+          <ic-step heading="Pour milk" type="current"></ic-step>
         </ic-stepper>
       </ic-page-header>`,
         });
@@ -111,7 +111,7 @@ describe("ic-page-header component renders additional functionality", () => {
         <ic-button slot="actions" variant="primary"
           >Create coffee
           <svg
-            slot="icon"
+            slot="left-icon"
             width="24"
             height="24"
             viewBox="0 0 24 24"
@@ -146,20 +146,20 @@ describe("ic-page-header component renders additional functionality", () => {
             html: `
       <ic-page-header heading="Coffee recipes" subheading="This is a simple page header component and this is the text.">
         <ic-stepper slot="stepper">
-          <ic-step step-title="Warm kettle" step-type="completed"></ic-step>
+          <ic-step heading="Warm kettle" type="completed"></ic-step>
           <ic-step
-            step-title="Warm milk"
-            step-subtitle="Optional"
-            step-type="completed"
+            heading="Warm milk"
+            subheading="Optional"
+            type="completed"
           ></ic-step>
-          <ic-step step-title="Pour milk" step-type="current"></ic-step>
+          <ic-step heading="Pour milk" type="current"></ic-step>
         </ic-stepper>
         <ic-status-tag slot="heading-adornment" label="Beta"></ic-status-tag>
         <ic-button slot="actions" variant="tertiary">Filter coffee</ic-button>
         <ic-button slot="actions" variant="primary"
           >Create coffee
           <svg
-            slot="icon"
+            slot="left-icon"
             width="24"
             height="24"
             viewBox="0 0 24 24"
@@ -218,7 +218,7 @@ describe("resizeObserver for ic-page-header", () => {
         <ic-button slot="actions" variant="primary"
           >Create coffee
           <svg
-            slot="icon"
+            slot="left-icon"
             width="24"
             height="24"
             viewBox="0 0 24 24"
@@ -267,7 +267,7 @@ describe("resizeObserver for ic-page-header", () => {
         <ic-button slot="actions" variant="primary"
           >Create coffee
           <svg
-            slot="icon"
+            slot="left-icon"
             width="24"
             height="24"
             viewBox="0 0 24 24"

package/dist/collection/components/ic-page-header/test/basic/ic-page-header.spec.js.map

@@ -1 +1 @@
-{"version":3,"file":"ic-page-header.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-page-header/test/basic/ic-page-header.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { newSpecPage } from \"@stencil/core/testing\";\nimport { PageHeader } from \"../../ic-page-header\";\nimport { DEVICE_SIZES } from \"../../../../utils/helpers\";\nimport { mockDeviceSize } from \"../../../../testspec.setup\";\nimport { Button } from \"../../../ic-button/ic-button\";\nimport * as helpers from \"../../../../utils/helpers\";\nimport { BreadcrumbGroup } from \"../../../ic-breadcrumb-group/ic-breadcrumb-group\";\nimport { Breadcrumb } from \"../../../ic-breadcrumb/ic-breadcrumb\";\n\ndescribe(\"simple ic-page-header renders\", () => {\n  it(\"should render with a heading & sub-heading\", async () => {\n    const page = await newSpecPage({\n      components: [PageHeader],\n      html: `<ic-page-header heading=\"Page header\" subheading=\"This is a simple page header component and this is the text.\"></ic-page-header>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\n      \"should render with a heading & sub-heading\"\n    );\n  });\n\n  it(\"should return null for slot 'tabs'\", async () => {\n    expect(helpers.getSlot(undefined, \"tabs\")).toBeNull();\n  });\n});\n\ndescribe(\"ic-page-header component renders additional functionality\", () => {\n  it(\"should render actions\", async () => {\n    const page = await newSpecPage({\n      components: [PageHeader],\n      html: `\n      <ic-page-header\n        heading=\"Page header\"\n        subheading=\"This is a simple page header component and this is the text.\"\n      >\n        <ic-button slot=\"actions\" variant=\"tertiary\">Filter coffee</ic-button>\n        <ic-button slot=\"actions\" variant=\"primary\"\n          >Create coffee\n          <svg\n            slot=\"icon\"\n            width=\"24\"\n            height=\"24\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path\n              d=\"M19 13H13V19H11V13H5V11H11V5H13V11H19V13Z\"\n              fill=\"currentColor\"\n            />\n          </svg>\n        </ic-button>\n      </ic-page-header>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"should render actions\");\n  });\n\n  it(\"should render an input field\", async () => {\n    const page = await newSpecPage({\n      components: [PageHeader],\n      html: `\n      <ic-page-header\n        heading=\"Page header\"\n        subheading=\"This is a simple page header component and this is the text.\"\n      >\n        <ic-status-tag slot=\"heading-adornment\" label=\"Beta\"></ic-status-tag>\n        <ic-text-field slot=\"input\" placeholder=\"Enter your input\" hide-label />\n      </ic-page-header>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"should render an input field\");\n  });\n\n  it(\"should render a stepper\", async () => {\n    const page = await newSpecPage({\n      components: [PageHeader],\n      html: `\n      <ic-page-header heading=\"Create a coffee\">\n        <ic-stepper slot=\"stepper\">\n          <ic-step step-title=\"Warm kettle\" step-type=\"completed\"></ic-step>\n          <ic-step\n            step-title=\"Warm milk\"\n            step-subtitle=\"Optional\"\n            step-type=\"completed\"\n          ></ic-step>\n          <ic-step step-title=\"Pour milk\" step-type=\"current\"></ic-step>\n        </ic-stepper>\n      </ic-page-header>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"should render a stepper\");\n  });\n\n  it(\"should render tabs\", async () => {\n    const page = await newSpecPage({\n      components: [PageHeader],\n      html: `\n      <ic-page-header heading=\"Coffee recipes\" subheading=\"This is a simple page header component and this is the text.\">\n        <ic-status-tag slot=\"heading-adornment\" label=\"Beta\"></ic-status-tag>\n        <ic-navigation-item\n          slot=\"tabs\"\n          label=\"All recipes\"\n          href=\"/all-recipes\"\n          selected\n        ></ic-navigation-item>\n        <ic-navigation-item\n          slot=\"tabs\"\n          label=\"Favourites\"\n          href=\"/favourites\"\n        ></ic-navigation-item>\n      </ic-page-header>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"should render tabs\");\n  });\n\n  it(\"should render actions, input & tabs\", async () => {\n    const page = await newSpecPage({\n      components: [PageHeader],\n      html: `\n      <ic-page-header heading=\"Coffee recipes\" subheading=\"This is a simple page header component and this is the text.\">\n        <ic-status-tag slot=\"heading-adornment\" label=\"Beta\"></ic-status-tag>\n        <ic-button slot=\"actions\" variant=\"tertiary\">Filter coffee</ic-button>\n        <ic-button slot=\"actions\" variant=\"primary\"\n          >Create coffee\n          <svg\n            slot=\"icon\"\n            width=\"24\"\n            height=\"24\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path\n              d=\"M19 13H13V19H11V13H5V11H11V5H13V11H19V13Z\"\n              fill=\"currentColor\"\n            />\n          </svg>\n        </ic-button>\n        <ic-navigation-item\n          slot=\"tabs\"\n          label=\"All recipes\"\n          href=\"/all-recipes\"\n          selected\n        ></ic-navigation-item>\n        <ic-navigation-item\n          slot=\"tabs\"\n          label=\"Favourites\"\n          href=\"/favourites\"\n        ></ic-navigation-item>\n        <ic-text-field slot=\"input\" placeholder=\"Enter your input\" hide-label />\n      </ic-page-header>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"should render actions, input & tabs\");\n  });\n\n  it(\"should render actions, input & stepper\", async () => {\n    const page = await newSpecPage({\n      components: [PageHeader],\n      html: `\n      <ic-page-header heading=\"Coffee recipes\" subheading=\"This is a simple page header component and this is the text.\">\n        <ic-stepper slot=\"stepper\">\n          <ic-step step-title=\"Warm kettle\" step-type=\"completed\"></ic-step>\n          <ic-step\n            step-title=\"Warm milk\"\n            step-subtitle=\"Optional\"\n            step-type=\"completed\"\n          ></ic-step>\n          <ic-step step-title=\"Pour milk\" step-type=\"current\"></ic-step>\n        </ic-stepper>\n        <ic-status-tag slot=\"heading-adornment\" label=\"Beta\"></ic-status-tag>\n        <ic-button slot=\"actions\" variant=\"tertiary\">Filter coffee</ic-button>\n        <ic-button slot=\"actions\" variant=\"primary\"\n          >Create coffee\n          <svg\n            slot=\"icon\"\n            width=\"24\"\n            height=\"24\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path\n              d=\"M19 13H13V19H11V13H5V11H11V5H13V11H19V13Z\"\n              fill=\"currentColor\"\n            />\n          </svg>\n        </ic-button>\n        <ic-text-field slot=\"input\" placeholder=\"Enter your input\" hide-label />\n      </ic-page-header>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"should render actions, input & stepper\");\n  });\n\n  it(\"should render with breadcrumbs\", async () => {\n    const page = await newSpecPage({\n      components: [PageHeader, BreadcrumbGroup, Breadcrumb],\n      html: `\n      <ic-page-header heading=\"Coffee recipes\" subheading=\"This is a simple page header component and this is the text.\">\n        <ic-breadcrumb-group slot=\"breadcrumbs\">\n          <ic-breadcrumb\n            page-title=\"Breadcrumb 1\"\n            href=\"/breadcrumb-1\"\n          ></ic-breadcrumb>\n          <ic-breadcrumb\n            current=\"true\"\n            page-title=\"Breadcrumb 2\"\n            href=\"/breadcrumb-2\"\n          ></ic-breadcrumb>\n        </ic-breadcrumb-group>          \n      </ic-page-header>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"should render with breadcrumbs\");\n  });\n\n  it(\"should render with a custom aria-label\", async () => {\n    const page = await newSpecPage({\n      components: [PageHeader],\n      html: `<ic-page-header heading=\"Page header\" subheading=\"This is a simple page header component and this is the text.\" aria-label=\"header\"></ic-page-header>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"should render with a custom aria-label\");\n  });\n});\n\ndescribe(\"resizeObserver for ic-page-header\", () => {\n  it(\"should set the deviceSize prop correctly in resizeObserver\", async () => {\n    const page = await newSpecPage({\n      components: [PageHeader, Button],\n      html: `\n    <ic-page-header\n        heading=\"Page header\"\n        sub-heading=\"This is a page header component with additional functionality and this is the text.\"\n        reverse-order\n      >\n        <ic-button slot=\"actions\" variant=\"primary\"\n          >Create coffee\n          <svg\n            slot=\"icon\"\n            width=\"24\"\n            height=\"24\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path\n              d=\"M19 13H13V19H11V13H5V11H11V5H13V11H19V13Z\"\n              fill=\"currentColor\"\n            />\n          </svg>\n        </ic-button>\n        <ic-button slot=\"actions\" variant=\"tertiary\">Filter coffee</ic-button>\n      </ic-page-header>\n    `,\n    });\n\n    await page.waitForChanges();\n\n    page.rootInstance.areButtonsReversed = true;\n    await page.waitForChanges();\n\n    mockDeviceSize(DEVICE_SIZES.S);\n\n    await page.rootInstance.resizeObserverCallback();\n    await page.waitForChanges();\n\n    expect(page.rootInstance.deviceSize).toBe(DEVICE_SIZES.S);\n\n    mockDeviceSize(DEVICE_SIZES.M);\n\n    await page.rootInstance.resizeObserverCallback();\n    await page.waitForChanges();\n    expect(page.rootInstance.deviceSize).toBe(DEVICE_SIZES.M);\n\n    mockDeviceSize(DEVICE_SIZES.L);\n\n    await page.rootInstance.resizeObserverCallback();\n    await page.waitForChanges();\n    expect(page.rootInstance.deviceSize).toBe(DEVICE_SIZES.L);\n\n    mockDeviceSize(DEVICE_SIZES.XL);\n\n    await page.rootInstance.resizeObserverCallback();\n    await page.waitForChanges();\n    expect(page.rootInstance.deviceSize).toBe(DEVICE_SIZES.XL);\n  });\n\n  it(\"should not call the resizeObserver if the resizeObserver is null\", async () => {\n    const page = await newSpecPage({\n      components: [PageHeader, Button],\n      html: `\n    <ic-page-header\n        heading=\"Page header\"\n        sub-heading=\"This is a page header component with additional functionality and this is the text.\"\n        reverse-order\n      >\n        <ic-button slot=\"actions\" variant=\"primary\"\n          >Create coffee\n          <svg\n            slot=\"icon\"\n            width=\"24\"\n            height=\"24\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path\n              d=\"M19 13H13V19H11V13H5V11H11V5H13V11H19V13Z\"\n              fill=\"currentColor\"\n            />\n          </svg>\n        </ic-button>\n        <ic-button slot=\"actions\" variant=\"tertiary\">Filter coffee</ic-button>\n      </ic-page-header>\n    `,\n    });\n\n    await page.rootInstance.runResizeObserver();\n\n    page.setContent(\"\");\n  });\n});\n"]}
+{"version":3,"file":"ic-page-header.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-page-header/test/basic/ic-page-header.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { newSpecPage } from \"@stencil/core/testing\";\nimport { PageHeader } from \"../../ic-page-header\";\nimport { DEVICE_SIZES } from \"../../../../utils/helpers\";\nimport { mockDeviceSize } from \"../../../../testspec.setup\";\nimport { Button } from \"../../../ic-button/ic-button\";\nimport * as helpers from \"../../../../utils/helpers\";\nimport { BreadcrumbGroup } from \"../../../ic-breadcrumb-group/ic-breadcrumb-group\";\nimport { Breadcrumb } from \"../../../ic-breadcrumb/ic-breadcrumb\";\n\ndescribe(\"simple ic-page-header renders\", () => {\n  it(\"should render with a heading & sub-heading\", async () => {\n    const page = await newSpecPage({\n      components: [PageHeader],\n      html: `<ic-page-header heading=\"Page header\" subheading=\"This is a simple page header component and this is the text.\"></ic-page-header>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\n      \"should render with a heading & sub-heading\"\n    );\n  });\n\n  it(\"should return null for slot 'tabs'\", async () => {\n    expect(helpers.getSlot(undefined, \"tabs\")).toBeNull();\n  });\n});\n\ndescribe(\"ic-page-header component renders additional functionality\", () => {\n  it(\"should render actions\", async () => {\n    const page = await newSpecPage({\n      components: [PageHeader],\n      html: `\n      <ic-page-header\n        heading=\"Page header\"\n        subheading=\"This is a simple page header component and this is the text.\"\n      >\n        <ic-button slot=\"actions\" variant=\"tertiary\">Filter coffee</ic-button>\n        <ic-button slot=\"actions\" variant=\"primary\"\n          >Create coffee\n          <svg\n            slot=\"left-icon\"\n            width=\"24\"\n            height=\"24\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path\n              d=\"M19 13H13V19H11V13H5V11H11V5H13V11H19V13Z\"\n              fill=\"currentColor\"\n            />\n          </svg>\n        </ic-button>\n      </ic-page-header>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"should render actions\");\n  });\n\n  it(\"should render an input field\", async () => {\n    const page = await newSpecPage({\n      components: [PageHeader],\n      html: `\n      <ic-page-header\n        heading=\"Page header\"\n        subheading=\"This is a simple page header component and this is the text.\"\n      >\n        <ic-status-tag slot=\"heading-adornment\" label=\"Beta\"></ic-status-tag>\n        <ic-text-field slot=\"input\" placeholder=\"Enter your input\" hide-label />\n      </ic-page-header>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"should render an input field\");\n  });\n\n  it(\"should render a stepper\", async () => {\n    const page = await newSpecPage({\n      components: [PageHeader],\n      html: `\n      <ic-page-header heading=\"Create a coffee\">\n        <ic-stepper slot=\"stepper\">\n          <ic-step heading=\"Warm kettle\" type=\"completed\"></ic-step>\n          <ic-step\n            heading=\"Warm milk\"\n            subheading=\"Optional\"\n            type=\"completed\"\n          ></ic-step>\n          <ic-step heading=\"Pour milk\" type=\"current\"></ic-step>\n        </ic-stepper>\n      </ic-page-header>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"should render a stepper\");\n  });\n\n  it(\"should render tabs\", async () => {\n    const page = await newSpecPage({\n      components: [PageHeader],\n      html: `\n      <ic-page-header heading=\"Coffee recipes\" subheading=\"This is a simple page header component and this is the text.\">\n        <ic-status-tag slot=\"heading-adornment\" label=\"Beta\"></ic-status-tag>\n        <ic-navigation-item\n          slot=\"tabs\"\n          label=\"All recipes\"\n          href=\"/all-recipes\"\n          selected\n        ></ic-navigation-item>\n        <ic-navigation-item\n          slot=\"tabs\"\n          label=\"Favourites\"\n          href=\"/favourites\"\n        ></ic-navigation-item>\n      </ic-page-header>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"should render tabs\");\n  });\n\n  it(\"should render actions, input & tabs\", async () => {\n    const page = await newSpecPage({\n      components: [PageHeader],\n      html: `\n      <ic-page-header heading=\"Coffee recipes\" subheading=\"This is a simple page header component and this is the text.\">\n        <ic-status-tag slot=\"heading-adornment\" label=\"Beta\"></ic-status-tag>\n        <ic-button slot=\"actions\" variant=\"tertiary\">Filter coffee</ic-button>\n        <ic-button slot=\"actions\" variant=\"primary\"\n          >Create coffee\n          <svg\n            slot=\"left-icon\"\n            width=\"24\"\n            height=\"24\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path\n              d=\"M19 13H13V19H11V13H5V11H11V5H13V11H19V13Z\"\n              fill=\"currentColor\"\n            />\n          </svg>\n        </ic-button>\n        <ic-navigation-item\n          slot=\"tabs\"\n          label=\"All recipes\"\n          href=\"/all-recipes\"\n          selected\n        ></ic-navigation-item>\n        <ic-navigation-item\n          slot=\"tabs\"\n          label=\"Favourites\"\n          href=\"/favourites\"\n        ></ic-navigation-item>\n        <ic-text-field slot=\"input\" placeholder=\"Enter your input\" hide-label />\n      </ic-page-header>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"should render actions, input & tabs\");\n  });\n\n  it(\"should render actions, input & stepper\", async () => {\n    const page = await newSpecPage({\n      components: [PageHeader],\n      html: `\n      <ic-page-header heading=\"Coffee recipes\" subheading=\"This is a simple page header component and this is the text.\">\n        <ic-stepper slot=\"stepper\">\n          <ic-step heading=\"Warm kettle\" type=\"completed\"></ic-step>\n          <ic-step\n            heading=\"Warm milk\"\n            subheading=\"Optional\"\n            type=\"completed\"\n          ></ic-step>\n          <ic-step heading=\"Pour milk\" type=\"current\"></ic-step>\n        </ic-stepper>\n        <ic-status-tag slot=\"heading-adornment\" label=\"Beta\"></ic-status-tag>\n        <ic-button slot=\"actions\" variant=\"tertiary\">Filter coffee</ic-button>\n        <ic-button slot=\"actions\" variant=\"primary\"\n          >Create coffee\n          <svg\n            slot=\"left-icon\"\n            width=\"24\"\n            height=\"24\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path\n              d=\"M19 13H13V19H11V13H5V11H11V5H13V11H19V13Z\"\n              fill=\"currentColor\"\n            />\n          </svg>\n        </ic-button>\n        <ic-text-field slot=\"input\" placeholder=\"Enter your input\" hide-label />\n      </ic-page-header>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"should render actions, input & stepper\");\n  });\n\n  it(\"should render with breadcrumbs\", async () => {\n    const page = await newSpecPage({\n      components: [PageHeader, BreadcrumbGroup, Breadcrumb],\n      html: `\n      <ic-page-header heading=\"Coffee recipes\" subheading=\"This is a simple page header component and this is the text.\">\n        <ic-breadcrumb-group slot=\"breadcrumbs\">\n          <ic-breadcrumb\n            page-title=\"Breadcrumb 1\"\n            href=\"/breadcrumb-1\"\n          ></ic-breadcrumb>\n          <ic-breadcrumb\n            current=\"true\"\n            page-title=\"Breadcrumb 2\"\n            href=\"/breadcrumb-2\"\n          ></ic-breadcrumb>\n        </ic-breadcrumb-group>          \n      </ic-page-header>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"should render with breadcrumbs\");\n  });\n\n  it(\"should render with a custom aria-label\", async () => {\n    const page = await newSpecPage({\n      components: [PageHeader],\n      html: `<ic-page-header heading=\"Page header\" subheading=\"This is a simple page header component and this is the text.\" aria-label=\"header\"></ic-page-header>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"should render with a custom aria-label\");\n  });\n});\n\ndescribe(\"resizeObserver for ic-page-header\", () => {\n  it(\"should set the deviceSize prop correctly in resizeObserver\", async () => {\n    const page = await newSpecPage({\n      components: [PageHeader, Button],\n      html: `\n    <ic-page-header\n        heading=\"Page header\"\n        sub-heading=\"This is a page header component with additional functionality and this is the text.\"\n        reverse-order\n      >\n        <ic-button slot=\"actions\" variant=\"primary\"\n          >Create coffee\n          <svg\n            slot=\"left-icon\"\n            width=\"24\"\n            height=\"24\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path\n              d=\"M19 13H13V19H11V13H5V11H11V5H13V11H19V13Z\"\n              fill=\"currentColor\"\n            />\n          </svg>\n        </ic-button>\n        <ic-button slot=\"actions\" variant=\"tertiary\">Filter coffee</ic-button>\n      </ic-page-header>\n    `,\n    });\n\n    await page.waitForChanges();\n\n    page.rootInstance.areButtonsReversed = true;\n    await page.waitForChanges();\n\n    mockDeviceSize(DEVICE_SIZES.S);\n\n    await page.rootInstance.resizeObserverCallback();\n    await page.waitForChanges();\n\n    expect(page.rootInstance.deviceSize).toBe(DEVICE_SIZES.S);\n\n    mockDeviceSize(DEVICE_SIZES.M);\n\n    await page.rootInstance.resizeObserverCallback();\n    await page.waitForChanges();\n    expect(page.rootInstance.deviceSize).toBe(DEVICE_SIZES.M);\n\n    mockDeviceSize(DEVICE_SIZES.L);\n\n    await page.rootInstance.resizeObserverCallback();\n    await page.waitForChanges();\n    expect(page.rootInstance.deviceSize).toBe(DEVICE_SIZES.L);\n\n    mockDeviceSize(DEVICE_SIZES.XL);\n\n    await page.rootInstance.resizeObserverCallback();\n    await page.waitForChanges();\n    expect(page.rootInstance.deviceSize).toBe(DEVICE_SIZES.XL);\n  });\n\n  it(\"should not call the resizeObserver if the resizeObserver is null\", async () => {\n    const page = await newSpecPage({\n      components: [PageHeader, Button],\n      html: `\n    <ic-page-header\n        heading=\"Page header\"\n        sub-heading=\"This is a page header component with additional functionality and this is the text.\"\n        reverse-order\n      >\n        <ic-button slot=\"actions\" variant=\"primary\"\n          >Create coffee\n          <svg\n            slot=\"left-icon\"\n            width=\"24\"\n            height=\"24\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path\n              d=\"M19 13H13V19H11V13H5V11H11V5H13V11H19V13Z\"\n              fill=\"currentColor\"\n            />\n          </svg>\n        </ic-button>\n        <ic-button slot=\"actions\" variant=\"tertiary\">Filter coffee</ic-button>\n      </ic-page-header>\n    `,\n    });\n\n    await page.rootInstance.runResizeObserver();\n\n    page.setContent(\"\");\n  });\n});\n"]}

package/dist/collection/components/ic-pagination/ic-pagination.css

@@ -472,6 +472,21 @@ ic-button.first-last {
   --icon-height: calc(var(--ic-space-xs) + var(--ic-space-xxxs));
 }
 
+ic-button.first-last::part(button),
+ic-button.next-previous::part(button) {
+  color: var(--ic-pagination-chevron);
+}
+
+:host(.ic-pagination-monochrome) ic-button.first-last::part(button),
+:host(.ic-pagination-monochrome) ic-button.next-previous::part(button) {
+  color: var(--ic-pagination-chevron-monochrome);
+}
+
+ic-button.ic-button-disabled.first-last::part(button),
+ic-button.ic-button-disabled.next-previous::part(button) {
+  color: var(--ic-pagination-chevron-disabled);
+}
+
 .disabled {
   color: var(--ic-architectural-200);
   pointer-events: none;