feat(root): add code examples for page header using slots

t03857785 · Feb 29, 2024 · 3bef91d · 3bef91d
1 parent 3aca06a
commit 3bef91d
Showing 1 changed file with 68 additions and 0 deletions.
diff --git a/src/content/structured/components/page-header/code.mdx b/src/content/structured/components/page-header/code.mdx
@@ -31,6 +31,7 @@ import {
   IcBreadcrumbGroup,
   IcSectionContainer,
   IcChip,
+  IcTypography,
 } from "@ukic/react";
 
 import { NavLink, MemoryRouter } from "react-router-dom";
@@ -480,3 +481,70 @@ export const withReactRouter = [
     <IcSectionContainer />
   </MemoryRouter>
 </ComponentPreview>
+
+### With Slots
+
+export const withSlots = [
+  {
+    language: "Web component",
+    snippet: `<ic-page-header>
+  <ic-typography variant="h1" slot="heading">Latte recipe</ic-typography>
+  <ic-typography slot="subheading">A Latte is a popular Italian coffee, made with espresso, steamed milk and a thin layer of foam.</ic-typography>
+  <ic-chip slot="heading-adornment" label="BETA" size="large"></ic-chip>
+  <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-text-field slot="input" placeholder="Search for ingredients…" label="Input" hide-label="true" />
+</ic-page-header>`,
+  },
+  {
+    language: "React",
+    snippet: `<IcPageHeader>
+  <IcTypography variant="h1" slot="heading">
+    Latte recipe
+  </IcTypography>
+  <IcTypography slot="subheading">
+    A Latte is a popular Italian coffee, made with espresso, steamed milk and
+    a thin layer of foam.
+  </IcTypography>
+  <IcChip slot="heading-adornment" label="BETA" size="large" />
+  <IcBreadcrumbGroup slot="breadcrumbs">
+    <IcBreadcrumb pageTitle="Drinks" href="#" />
+    <IcBreadcrumb pageTitle="Coffees" href="#" />
+    <IcBreadcrumb current pageTitle="Latte" href="#" />
+  </IcBreadcrumbGroup>
+  <IcTextField
+    slot="input"
+    placeholder="Search for ingredients…"
+    label="Input"
+    hideLabel
+  />
+</IcPageHeader>`,
+  },
+];
+
+<ComponentPreview snippets={withSlots} style={{ flexDirection: "column" }}>
+  <IcPageHeader>
+    <IcTypography variant="h1" slot="heading">
+      Latte recipe
+    </IcTypography>
+    <IcTypography slot="subheading">
+      A Latte is a popular Italian coffee, made with espresso, steamed milk and
+      a thin layer of foam.
+    </IcTypography>
+    <IcChip slot="heading-adornment" label="BETA" size="large" />
+    <IcBreadcrumbGroup slot="breadcrumbs">
+      <IcBreadcrumb pageTitle="Drinks" href="#" />
+      <IcBreadcrumb pageTitle="Coffees" href="#" />
+      <IcBreadcrumb current pageTitle="Latte" href="#" />
+    </IcBreadcrumbGroup>
+    <IcTextField
+      slot="input"
+      placeholder="Search for ingredients…"
+      label="Input"
+      hideLabel
+    />
+  </IcPageHeader>
+</ComponentPreview>