From ce13302fefccffe7f7ddb066fb3639fdcd3fad30 Mon Sep 17 00:00:00 2001
From: GCHQ-Developer-741
<117368893+GCHQ-Developer-741@users.noreply.github.com>
Date: Wed, 4 Dec 2024 12:13:40 +0000
Subject: [PATCH 1/2] fix(root): removed attribute sections if they aren't
included
added check if value exists before rendering section in the attribute table
---
.../ComponentDetails/AttributeName/index.tsx | 17 +++++++++++------
.../components/popover-menu/guidance.mdx | 7 ++++++-
2 files changed, 17 insertions(+), 7 deletions(-)
diff --git a/src/components/ComponentDetails/AttributeName/index.tsx b/src/components/ComponentDetails/AttributeName/index.tsx
index fd37c070f..6a5d60fc1 100644
--- a/src/components/ComponentDetails/AttributeName/index.tsx
+++ b/src/components/ComponentDetails/AttributeName/index.tsx
@@ -6,12 +6,17 @@ const AttributeName: React.FC<{
value: (string | undefined)[];
}> = ({ name, value }) => (
<div className="attribute-name">
- {name.map((attributeName, i) => (
- <div key={`attribute-${attributeName.toLowerCase().split(" ")[0]}`}>
- <ic-typography variant="subtitle-small">{attributeName}</ic-typography>
- <ic-typography variant="subtitle-large">{value[i]}</ic-typography>
- </div>
- ))}
+ {name.map(
+ (attributeName, i) =>
+ value[i] && (
+ <div key={`attribute-${attributeName.toLowerCase().split(" ")[0]}`}>
+ <ic-typography variant="subtitle-small">
+ {attributeName}
+ </ic-typography>
+ <ic-typography variant="subtitle-large">{value[i]}</ic-typography>
+ </div>
+ )
+ )}
</div>
);
diff --git a/src/content/structured/components/popover-menu/guidance.mdx b/src/content/structured/components/popover-menu/guidance.mdx
index 44036583a..d87786305 100644
--- a/src/content/structured/components/popover-menu/guidance.mdx
+++ b/src/content/structured/components/popover-menu/guidance.mdx
@@ -63,7 +63,12 @@ export const IntroPopover = () => {
<path d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z" />
</svg>
</IcButton>
- <IcPopoverMenu anchor="button-1" aria-label="popover" open={popoverOpen} onIcPopoverClosed={handlePopoverClosed}>
+ <IcPopoverMenu
+ anchor="button-1"
+ aria-label="popover"
+ open={popoverOpen}
+ onIcPopoverClosed={handlePopoverClosed}
+ >
<IcMenuItem label="Copy code" />
<IcMenuItem label="Paste code" />
<IcMenuItem label="Actions" submenuTriggerFor="actions" />
From 7e19b41d289564f839f8759d994707be5510029c Mon Sep 17 00:00:00 2001
From: GCHQ-Developer-741
<117368893+GCHQ-Developer-741@users.noreply.github.com>
Date: Wed, 4 Dec 2024 13:26:20 +0000
Subject: [PATCH 2/2] fix(root): added aria-role to wrapper element in
ic-footer
added role="list" to wrapper of footer-links to prevent a11y failures. Also added example to code
snippets to show how to do it
---
src/components/Layout/index.tsx | 2 +-
.../structured/components/footer/code.mdx | 5 +-
src/icds-pages-data.json | 1644 ++++++++---------
3 files changed, 826 insertions(+), 825 deletions(-)
diff --git a/src/components/Layout/index.tsx b/src/components/Layout/index.tsx
index 64c3700a9..d88bd27ab 100644
--- a/src/components/Layout/index.tsx
+++ b/src/components/Layout/index.tsx
@@ -273,7 +273,7 @@ const Layout: React.FC<LayoutProps> = ({
{footerLink.text}
</ic-footer-link>
))}
- <div slot="logo" className="logo-wrapper">
+ <div slot="logo" className="logo-wrapper" role="list">
<ic-footer-link href="https://sis.gov.uk">
<SISLogo aria-hidden="true" />
<span className="link-text">Go to S.I.S. website</span>
diff --git a/src/content/structured/components/footer/code.mdx b/src/content/structured/components/footer/code.mdx
index 1bd85290b..9aa5edf8c 100644
--- a/src/content/structured/components/footer/code.mdx
+++ b/src/content/structured/components/footer/code.mdx
@@ -226,7 +226,7 @@ export const snippetsLogoLinks = [
<ic-footer-link slot="link" href="#">Styles</ic-footer-link>
<ic-footer-link slot="link" href="#">Components</ic-footer-link>
<ic-footer-link slot="link" href="#">Patterns</ic-footer-link>
- <div slot="logo">
+ <div slot="logo" role="list">
<ic-footer-link href="#">
<svg xmlns="http://www.w3.org/2000/svg"
height="48"
@@ -267,7 +267,7 @@ export const snippetsLogoLinks = [
<IcFooterLink slot="link" href="#">Styles</IcFooterLink>
<IcFooterLink slot="link" href="#">Components</IcFooterLink>
<IcFooterLink slot="link" href="#">Patterns</IcFooterLink>
- <div slot="logo">
+ <div slot="logo" role="list">
<IcFooterLink href="#">
<SlottedSVG
xmlns="http://www.w3.org/2000/svg"
@@ -332,6 +332,7 @@ export const snippetsLogoLinks = [
display: "flex",
gap: "var(--ic-space-lg)",
}}
+ role="list"
>
<IcFooterLink href="#">
<svg
diff --git a/src/icds-pages-data.json b/src/icds-pages-data.json
index 61bd7b724..1f0b2ada6 100644
--- a/src/icds-pages-data.json
+++ b/src/icds-pages-data.json
@@ -25,9 +25,9 @@
"subTitle": "Follow our accessibility tips for alt text.",
"contribute": "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/accessibility/coding/alt-text.mdx",
"meta": {
- "relativePath": "accessibility/coding/alt-text.mdx",
- "createdAt": "2024-11-06T10:27:49.416Z",
- "lastModified": "2024-11-06T10:18:59.908Z",
+ "relativePath": "accessibility\\coding\\alt-text.mdx",
+ "createdAt": "2024-11-05T11:57:48.865Z",
+ "lastModified": "2024-11-05T11:57:48.865Z",
"size": 1743,
"formattedSize": "1.7 KB"
}
@@ -42,9 +42,9 @@
"subTitle": "Follow our accessibility tips for ARIA.",
"contribute": "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/accessibility/coding/aria.mdx",
"meta": {
- "relativePath": "accessibility/coding/aria.mdx",
- "createdAt": "2024-11-06T10:27:49.416Z",
- "lastModified": "2024-11-06T10:18:59.908Z",
+ "relativePath": "accessibility\\coding\\aria.mdx",
+ "createdAt": "2024-11-05T11:57:48.894Z",
+ "lastModified": "2024-11-05T11:57:48.894Z",
"size": 3652,
"formattedSize": "3.6 KB"
}
@@ -59,9 +59,9 @@
"subTitle": "Follow our accessibility tips for CSS.",
"contribute": "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/accessibility/coding/css.mdx",
"meta": {
- "relativePath": "accessibility/coding/css.mdx",
- "createdAt": "2024-11-06T10:27:49.416Z",
- "lastModified": "2024-11-06T10:18:59.908Z",
+ "relativePath": "accessibility\\coding\\css.mdx",
+ "createdAt": "2024-11-05T11:57:48.911Z",
+ "lastModified": "2024-11-05T11:57:48.911Z",
"size": 1389,
"formattedSize": "1.4 KB"
}
@@ -76,9 +76,9 @@
"subTitle": "Follow our accessibility tips for doctypes.",
"contribute": "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/accessibility/documenting/index.mdx",
"meta": {
- "relativePath": "accessibility/coding/doctype.mdx",
- "createdAt": "2024-11-06T10:27:49.416Z",
- "lastModified": "2024-11-06T10:18:59.908Z",
+ "relativePath": "accessibility\\coding\\doctype.mdx",
+ "createdAt": "2024-11-05T11:57:48.931Z",
+ "lastModified": "2024-11-05T11:57:48.931Z",
"size": 1342,
"formattedSize": "1.3 KB"
}
@@ -93,9 +93,9 @@
"subTitle": "Follow our accessibility tips for document structure.",
"contribute": "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/accessibility/coding/document-structure.mdx",
"meta": {
- "relativePath": "accessibility/coding/document-structure.mdx",
- "createdAt": "2024-11-06T10:27:49.416Z",
- "lastModified": "2024-11-06T10:18:59.908Z",
+ "relativePath": "accessibility\\coding\\document-structure.mdx",
+ "createdAt": "2024-11-05T11:57:48.958Z",
+ "lastModified": "2024-11-05T11:57:48.958Z",
"size": 1833,
"formattedSize": "1.8 KB"
}
@@ -110,9 +110,9 @@
"subTitle": "Follow our accessibility tips for headings.",
"contribute": "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/accessibility/coding/headings.mdx",
"meta": {
- "relativePath": "accessibility/coding/headings.mdx",
- "createdAt": "2024-11-06T10:27:49.412Z",
- "lastModified": "2024-11-06T10:18:59.908Z",
+ "relativePath": "accessibility\\coding\\headings.mdx",
+ "createdAt": "2024-11-05T11:57:48.971Z",
+ "lastModified": "2024-11-05T11:57:48.971Z",
"size": 1295,
"formattedSize": "1.3 KB"
}
@@ -127,9 +127,9 @@
"subTitle": "This section introduces some tips for making sure you code with accessibility best practice.",
"contribute": "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/accessibility/coding/index.mdx",
"meta": {
- "relativePath": "accessibility/coding/index.mdx",
- "createdAt": "2024-11-06T10:27:49.416Z",
- "lastModified": "2024-11-06T10:18:59.908Z",
+ "relativePath": "accessibility\\coding\\index.mdx",
+ "createdAt": "2024-11-05T11:57:48.989Z",
+ "lastModified": "2024-11-05T11:57:48.989Z",
"size": 2086,
"formattedSize": "2.0 KB"
}
@@ -144,9 +144,9 @@
"subTitle": "Follow our accessibility tips for semantic HTML.",
"contribute": "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/accessibility/coding/semantic-html.mdx",
"meta": {
- "relativePath": "accessibility/coding/semantic-html.mdx",
- "createdAt": "2024-11-06T10:27:49.416Z",
- "lastModified": "2024-11-06T10:18:59.908Z",
+ "relativePath": "accessibility\\coding\\semantic-html.mdx",
+ "createdAt": "2024-11-05T11:57:49.007Z",
+ "lastModified": "2024-11-05T11:57:49.007Z",
"size": 1918,
"formattedSize": "1.9 KB"
}
@@ -161,9 +161,9 @@
"subTitle": "Follow our accessibility tips for layout.",
"contribute": "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/accessibility/coding/semantic-layout.mdx",
"meta": {
- "relativePath": "accessibility/coding/semantic-layout.mdx",
- "createdAt": "2024-11-06T10:27:49.416Z",
- "lastModified": "2024-11-06T10:18:59.908Z",
+ "relativePath": "accessibility\\coding\\semantic-layout.mdx",
+ "createdAt": "2024-11-05T11:57:49.022Z",
+ "lastModified": "2024-11-05T11:57:49.022Z",
"size": 1366,
"formattedSize": "1.3 KB"
}
@@ -178,9 +178,9 @@
"subTitle": "Follow our accessibility tips for tables.",
"contribute": "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/accessibility/coding/tables.mdx",
"meta": {
- "relativePath": "accessibility/coding/tables.mdx",
- "createdAt": "2024-11-06T10:27:49.416Z",
- "lastModified": "2024-11-06T10:18:59.908Z",
+ "relativePath": "accessibility\\coding\\tables.mdx",
+ "createdAt": "2024-11-05T11:57:49.058Z",
+ "lastModified": "2024-11-05T11:57:49.058Z",
"size": 2533,
"formattedSize": "2.5 KB"
}
@@ -195,9 +195,9 @@
"subTitle": "Follow our accessibility tips for titles.",
"contribute": "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/accessibility/coding/title.mdx",
"meta": {
- "relativePath": "accessibility/coding/title.mdx",
- "createdAt": "2024-11-06T10:27:49.416Z",
- "lastModified": "2024-11-06T10:18:59.908Z",
+ "relativePath": "accessibility\\coding\\title.mdx",
+ "createdAt": "2024-11-05T11:57:49.077Z",
+ "lastModified": "2024-11-05T11:57:49.077Z",
"size": 1265,
"formattedSize": "1.2 KB"
}
@@ -212,9 +212,9 @@
"subTitle": "The word 'accessibility' can mean a lot of different things.",
"contribute": "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/accessibility/definition.mdx",
"meta": {
- "relativePath": "accessibility/definition.mdx",
- "createdAt": "2024-11-06T10:27:49.412Z",
- "lastModified": "2024-11-06T10:18:59.908Z",
+ "relativePath": "accessibility\\definition.mdx",
+ "createdAt": "2024-11-05T11:57:49.093Z",
+ "lastModified": "2024-11-05T11:57:49.093Z",
"size": 2149,
"formattedSize": "2.1 KB"
}
@@ -229,9 +229,9 @@
"subTitle": "How to talk about disability and needs.",
"contribute": "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/accessibility/discussing.mdx",
"meta": {
- "relativePath": "accessibility/discussing.mdx",
- "createdAt": "2024-11-06T10:27:49.412Z",
- "lastModified": "2024-11-06T10:18:59.908Z",
+ "relativePath": "accessibility\\discussing.mdx",
+ "createdAt": "2024-11-05T11:57:49.115Z",
+ "lastModified": "2024-11-05T11:57:49.115Z",
"size": 2005,
"formattedSize": "2.0 KB"
}
@@ -246,9 +246,9 @@
"subTitle": "How to fill out and maintain an Accessibility Statement.",
"contribute": "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/accessibility/documenting/accessibility-statements-guidance.mdx",
"meta": {
- "relativePath": "accessibility/documenting/accessibility-statements-guidance.mdx",
- "createdAt": "2024-11-06T10:27:49.412Z",
- "lastModified": "2024-11-06T10:18:59.908Z",
+ "relativePath": "accessibility\\documenting\\accessibility-statements-guidance.mdx",
+ "createdAt": "2024-11-05T11:57:49.191Z",
+ "lastModified": "2024-11-05T11:57:49.191Z",
"size": 10683,
"formattedSize": "10.4 KB"
}
@@ -263,9 +263,9 @@
"subTitle": "Accessibility Statements are simple but important documents that are useful to everyone.",
"contribute": "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/accessibility/documenting/accessibility-statements.mdx",
"meta": {
- "relativePath": "accessibility/documenting/accessibility-statements.mdx",
- "createdAt": "2024-11-06T10:27:49.412Z",
- "lastModified": "2024-11-06T10:18:59.908Z",
+ "relativePath": "accessibility\\documenting\\accessibility-statements.mdx",
+ "createdAt": "2024-11-05T11:57:49.207Z",
+ "lastModified": "2024-11-05T11:57:49.207Z",
"size": 2192,
"formattedSize": "2.1 KB"
}
@@ -280,9 +280,9 @@
"subTitle": "An Accessibility Conformance Report is used for accurate and consistent reporting of accessibility status in apps and services.",
"contribute": "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/accessibility/documenting/conformance-reports.mdx",
"meta": {
- "relativePath": "accessibility/documenting/conformance-report.mdx",
- "createdAt": "2024-11-06T10:27:49.412Z",
- "lastModified": "2024-11-06T10:18:59.908Z",
+ "relativePath": "accessibility\\documenting\\conformance-report.mdx",
+ "createdAt": "2024-11-05T11:57:49.239Z",
+ "lastModified": "2024-11-05T11:57:49.239Z",
"size": 4056,
"formattedSize": "4.0 KB"
}
@@ -297,9 +297,9 @@
"subTitle": "This section tells you how to document how accessible your app or service is.",
"contribute": "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/accessibility/documenting/index.mdx",
"meta": {
- "relativePath": "accessibility/documenting/index.mdx",
- "createdAt": "2024-11-06T10:27:49.412Z",
- "lastModified": "2024-11-06T10:18:59.908Z",
+ "relativePath": "accessibility\\documenting\\index.mdx",
+ "createdAt": "2024-11-05T11:57:49.259Z",
+ "lastModified": "2024-11-05T11:57:49.259Z",
"size": 1910,
"formattedSize": "1.9 KB"
}
@@ -314,9 +314,9 @@
"subTitle": "Keep your documentation current and transparent.",
"contribute": "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/accessibility/documenting/when-to-create-and-update.mdx",
"meta": {
- "relativePath": "accessibility/documenting/when-to-create-and-update.mdx",
- "createdAt": "2024-11-06T10:27:49.412Z",
- "lastModified": "2024-11-06T10:18:59.908Z",
+ "relativePath": "accessibility\\documenting\\when-to-create-and-update.mdx",
+ "createdAt": "2024-11-05T11:57:49.274Z",
+ "lastModified": "2024-11-05T11:57:49.274Z",
"size": 1691,
"formattedSize": "1.7 KB"
}
@@ -331,9 +331,9 @@
"subTitle": "This section introduces accessibility and how to design, build and test for accessible apps and services.",
"contribute": "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/accessibility/index.mdx",
"meta": {
- "relativePath": "accessibility/index.mdx",
- "createdAt": "2024-11-06T10:27:49.412Z",
- "lastModified": "2024-11-06T10:18:59.908Z",
+ "relativePath": "accessibility\\index.mdx",
+ "createdAt": "2024-11-05T11:57:49.294Z",
+ "lastModified": "2024-11-05T11:57:49.294Z",
"size": 2213,
"formattedSize": "2.2 KB"
}
@@ -348,9 +348,9 @@
"subTitle": "Many people who work for us are directly impacted by the accessibility decisions we make.",
"contribute": "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/accessibility/introduction.mdx",
"meta": {
- "relativePath": "accessibility/introduction.mdx",
- "createdAt": "2024-11-06T10:27:49.412Z",
- "lastModified": "2024-11-06T10:18:59.908Z",
+ "relativePath": "accessibility\\introduction.mdx",
+ "createdAt": "2024-11-05T11:57:49.309Z",
+ "lastModified": "2024-11-05T11:57:49.309Z",
"size": 1739,
"formattedSize": "1.7 KB"
}
@@ -365,9 +365,9 @@
"subTitle": "Hearing impairment means a complete or partial loss of the ability to hear in one or both ears.",
"contribute": "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/accessibility/needs/auditory.mdx",
"meta": {
- "relativePath": "accessibility/needs/auditory.mdx",
- "createdAt": "2024-11-06T10:27:49.412Z",
- "lastModified": "2024-11-06T10:18:59.908Z",
+ "relativePath": "accessibility\\needs\\auditory.mdx",
+ "createdAt": "2024-11-05T11:57:49.342Z",
+ "lastModified": "2024-11-05T11:57:49.342Z",
"size": 3858,
"formattedSize": "3.8 KB"
}
@@ -382,9 +382,9 @@
"subTitle": "Every app and service you create must have a minimal baseline of accessible designs.",
"contribute": "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/accessibility/needs/general.mdx",
"meta": {
- "relativePath": "accessibility/needs/general.mdx",
- "createdAt": "2024-11-06T10:27:49.412Z",
- "lastModified": "2024-11-06T10:18:59.908Z",
+ "relativePath": "accessibility\\needs\\general.mdx",
+ "createdAt": "2024-11-05T11:57:49.368Z",
+ "lastModified": "2024-11-05T11:57:49.368Z",
"size": 3980,
"formattedSize": "3.9 KB"
}
@@ -399,9 +399,9 @@
"subTitle": "When building apps and services, be careful not to assume everyone is like you.",
"contribute": "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/accessibility/needs/index.mdx",
"meta": {
- "relativePath": "accessibility/needs/index.mdx",
- "createdAt": "2024-11-06T10:27:49.412Z",
- "lastModified": "2024-11-06T10:18:59.920Z",
+ "relativePath": "accessibility\\needs\\index.mdx",
+ "createdAt": "2024-11-05T11:57:49.391Z",
+ "lastModified": "2024-11-05T11:57:49.391Z",
"size": 3652,
"formattedSize": "3.6 KB"
}
@@ -416,9 +416,9 @@
"subTitle": "Invisible illness is an umbrella term for medical conditions that are invisible to others.",
"contribute": "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/accessibility/needs/invisible.mdx",
"meta": {
- "relativePath": "accessibility/needs/invisible.mdx",
- "createdAt": "2024-11-06T10:27:49.412Z",
- "lastModified": "2024-11-06T10:18:59.920Z",
+ "relativePath": "accessibility\\needs\\invisible.mdx",
+ "createdAt": "2024-11-05T11:57:49.426Z",
+ "lastModified": "2024-11-05T11:57:49.426Z",
"size": 5433,
"formattedSize": "5.3 KB"
}
@@ -433,9 +433,9 @@
"subTitle": "'Motor impairment' means a partial or total lack of function in a body part, usually a limb or limbs.",
"contribute": "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/accessibility/needs/motor.mdx",
"meta": {
- "relativePath": "accessibility/needs/motor.mdx",
- "createdAt": "2024-11-06T10:27:49.412Z",
- "lastModified": "2024-11-06T10:18:59.920Z",
+ "relativePath": "accessibility\\needs\\motor.mdx",
+ "createdAt": "2024-11-05T11:57:49.454Z",
+ "lastModified": "2024-11-05T11:57:49.454Z",
"size": 4775,
"formattedSize": "4.7 KB"
}
@@ -450,9 +450,9 @@
"subTitle": "People often think, communicate, understand or remember things in ways we might not consider.",
"contribute": "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/accessibility/needs/neurodiversity.mdx",
"meta": {
- "relativePath": "accessibility/needs/neurodiversity.mdx",
- "createdAt": "2024-11-06T10:27:49.412Z",
- "lastModified": "2024-11-06T10:18:59.920Z",
+ "relativePath": "accessibility\\needs\\neurodiversity.mdx",
+ "createdAt": "2024-11-05T11:57:49.502Z",
+ "lastModified": "2024-11-05T11:57:49.502Z",
"size": 8699,
"formattedSize": "8.5 KB"
}
@@ -467,9 +467,9 @@
"subTitle": "A visual impairment is a reduction in clarity or loss of vision that may be temporary or permanent.",
"contribute": "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/accessibility/needs/visual.mdx",
"meta": {
- "relativePath": "accessibility/needs/visual.mdx",
- "createdAt": "2024-11-06T10:27:49.412Z",
- "lastModified": "2024-11-06T10:18:59.920Z",
+ "relativePath": "accessibility\\needs\\visual.mdx",
+ "createdAt": "2024-11-05T11:57:49.532Z",
+ "lastModified": "2024-11-05T11:57:49.532Z",
"size": 4733,
"formattedSize": "4.6 KB"
}
@@ -485,9 +485,9 @@
"status": "LIVE",
"contribute": "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/accessibility/requirement/index.mdx",
"meta": {
- "relativePath": "accessibility/requirement/index.mdx",
- "createdAt": "2024-11-06T10:27:49.412Z",
- "lastModified": "2024-11-06T10:18:59.920Z",
+ "relativePath": "accessibility\\requirement\\index.mdx",
+ "createdAt": "2024-11-05T11:57:49.555Z",
+ "lastModified": "2024-11-05T11:57:49.555Z",
"size": 3658,
"formattedSize": "3.6 KB"
}
@@ -503,9 +503,9 @@
"status": "LIVE",
"contribute": "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/accessibility/requirement/meeting-the-policy.mdx",
"meta": {
- "relativePath": "accessibility/requirement/meeting-the-policy.mdx",
- "createdAt": "2024-11-06T10:27:49.412Z",
- "lastModified": "2024-11-06T10:18:59.920Z",
+ "relativePath": "accessibility\\requirement\\meeting-the-policy.mdx",
+ "createdAt": "2024-11-05T11:57:49.584Z",
+ "lastModified": "2024-11-05T11:57:49.584Z",
"size": 3969,
"formattedSize": "3.9 KB"
}
@@ -520,9 +520,9 @@
"subTitle": "This section tells you how to make videos and audio accessible.",
"contribute": "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/accessibility/requirement/subtitles-transcripts-captions.mdx",
"meta": {
- "relativePath": "accessibility/requirement/subtitles-transcripts-captions.mdx",
- "createdAt": "2024-11-06T10:27:49.412Z",
- "lastModified": "2024-11-06T10:18:59.920Z",
+ "relativePath": "accessibility\\requirement\\subtitles-transcripts-captions.mdx",
+ "createdAt": "2024-11-05T11:57:49.615Z",
+ "lastModified": "2024-11-05T11:57:49.615Z",
"size": 4335,
"formattedSize": "4.2 KB"
}
@@ -537,9 +537,9 @@
"subTitle": "This section briefly introduces the Web Content Accessibility Guidelines (WCAG).",
"contribute": "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/accessibility/requirement/wcag.mdx",
"meta": {
- "relativePath": "accessibility/requirement/wcag.mdx",
- "createdAt": "2024-11-06T10:27:49.412Z",
- "lastModified": "2024-11-06T10:18:59.920Z",
+ "relativePath": "accessibility\\requirement\\wcag.mdx",
+ "createdAt": "2024-11-05T11:57:49.643Z",
+ "lastModified": "2024-11-05T11:57:49.643Z",
"size": 3859,
"formattedSize": "3.8 KB"
}
@@ -554,9 +554,9 @@
"subTitle": "Don't rely on users of assistive technology to do the testing for you.",
"contribute": "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/accessibility/testing/assistive-tech-testing.mdx",
"meta": {
- "relativePath": "accessibility/testing/assistive-tech-testing.mdx",
- "createdAt": "2024-11-06T10:27:49.412Z",
- "lastModified": "2024-11-06T10:18:59.920Z",
+ "relativePath": "accessibility\\testing\\assistive-tech-testing.mdx",
+ "createdAt": "2024-11-05T11:57:49.688Z",
+ "lastModified": "2024-11-05T11:57:49.688Z",
"size": 8622,
"formattedSize": "8.4 KB"
}
@@ -571,9 +571,9 @@
"subTitle": "Automated accessibility testing is essential but it has limitations and only finds between 30-50% of accessibility problems.",
"contribute": "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/accessibility/testing/automated-testing-limitation.mdx",
"meta": {
- "relativePath": "accessibility/testing/automated-testing-limitation.mdx",
- "createdAt": "2024-11-06T10:27:49.412Z",
- "lastModified": "2024-11-06T10:18:59.920Z",
+ "relativePath": "accessibility\\testing\\automated-testing-limitation.mdx",
+ "createdAt": "2024-11-05T11:57:49.721Z",
+ "lastModified": "2024-11-05T11:57:49.721Z",
"size": 3718,
"formattedSize": "3.6 KB"
}
@@ -588,9 +588,9 @@
"subTitle": "Use a variety of automated testing tools to capture as many accessibility issues as possible.",
"contribute": "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/accessibility/testing/automated-testing.mdx",
"meta": {
- "relativePath": "accessibility/testing/automated-testing.mdx",
- "createdAt": "2024-11-06T10:27:49.412Z",
- "lastModified": "2024-11-06T10:18:59.920Z",
+ "relativePath": "accessibility\\testing\\automated-testing.mdx",
+ "createdAt": "2024-11-05T11:57:49.763Z",
+ "lastModified": "2024-11-05T11:57:49.763Z",
"size": 6892,
"formattedSize": "6.7 KB"
}
@@ -605,9 +605,9 @@
"subTitle": "This section introduces you to different types of accessibility testing.",
"contribute": "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/accessibility/testing/index.mdx",
"meta": {
- "relativePath": "accessibility/testing/index.mdx",
- "createdAt": "2024-11-06T10:27:49.412Z",
- "lastModified": "2024-11-06T10:18:59.920Z",
+ "relativePath": "accessibility\\testing\\index.mdx",
+ "createdAt": "2024-11-05T11:57:49.785Z",
+ "lastModified": "2024-11-05T11:57:49.785Z",
"size": 3100,
"formattedSize": "3.0 KB"
}
@@ -622,9 +622,9 @@
"subTitle": "Manual accessibility testing can include keyboard, screen reader and documentation checks.",
"contribute": "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/accessibility/testing/manual-testing.mdx",
"meta": {
- "relativePath": "accessibility/testing/manual-testing.mdx",
- "createdAt": "2024-11-06T10:27:49.412Z",
- "lastModified": "2024-11-06T10:18:59.920Z",
+ "relativePath": "accessibility\\testing\\manual-testing.mdx",
+ "createdAt": "2024-11-05T11:57:49.818Z",
+ "lastModified": "2024-11-05T11:57:49.818Z",
"size": 4498,
"formattedSize": "4.4 KB"
}
@@ -639,9 +639,9 @@
"subTitle": "The contents of the Design System must be of a high quality, meet user needs and always be accessible.",
"contribute": "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/community/contribute-criteria.mdx?at=develop",
"meta": {
- "relativePath": "community/contribute-criteria.mdx",
- "createdAt": "2024-11-06T10:27:49.412Z",
- "lastModified": "2024-11-06T10:18:59.920Z",
+ "relativePath": "community\\contribute-criteria.mdx",
+ "createdAt": "2024-11-05T11:57:49.837Z",
+ "lastModified": "2024-11-05T11:57:49.837Z",
"size": 2845,
"formattedSize": "2.8 KB"
}
@@ -656,16 +656,16 @@
"subTitle": "Anyone can contribute to the Design System and UI Kit.",
"contribute": "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/community/contribute.mdx?at=develop",
"meta": {
- "relativePath": "community/contribute.mdx",
- "createdAt": "2024-11-06T10:27:49.412Z",
- "lastModified": "2024-11-06T10:18:59.920Z",
+ "relativePath": "community\\contribute.mdx",
+ "createdAt": "2024-11-05T11:57:49.865Z",
+ "lastModified": "2024-11-05T11:57:49.865Z",
"size": 3993,
"formattedSize": "3.9 KB"
}
},
{
"id": "community\\glossary-of-termsx",
- "contents": "\n## Props\n\nTo help explain usage, each prop has the most common type options and a description.\n\n| Prop name | Most common type options | Description |\n| ---------------------- | --------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| accessibleLabel | string | Extra context to apply to the component for use with a screen reader |\n| additionalFieldDisplay | \"static\", \"dynamic\" | How an additional field would present itself within the component |\n| aligned | \"center\", \"left\", \"right\", \"full-width\" | The alignment of the component |\n| announced | boolean | Changes the component's role to get announced to a screen reader |\n| appearance | \"default\", \"dark\", \"light\" | The main colour used for the component |\n| appTitle | string | The title text for the component |\n| checked | boolean | The checked state of the component |\n| contentAligned | \"center\", \"left\" | The alignment of content within the component |\n| debounce | number | The wait time in milliseconds before a change event is triggered |\n| description | string | The descriptive text for the component |\n| disabled | boolean | The component will display as unusable |\n| dismissible | boolean | The component will display a close button which will hide the component when clicked |\n| expandable | boolean | The component will have an expandable state |\n| expanded | boolean | The component will display in the expanded state |\n| fullWidth | boolean | The component will take up the available width |\n| groupLabel/groupTitle | string | The title text for a component's overarching group |\n| heading | string | The title text for the component |\n| helperText | string | The informative text for the component |\n| hideLabel | boolean | Sets the visibility for the component's label |\n| href | string | The URL for the component |\n| label | string | Text within the component |\n| loading | boolean | The component will display in a loading state |\n| message | string | The body text for the component |\n| name | string | The name for the component |\n| open | boolean | The component will display in an open state |\n| placeholder | string | The placeholder text for the component |\n| progress | number | The progress made within the component |\n| readonly | boolean | The component will display in a readonly state |\n| required | boolean | The component will display as a required field |\n| selected | boolean | The selected state of the component |\n| shortAppTitle | string | The shorter variation of the title text for the component |\n| size | \"default\", \"small\", \"large\" | The size of the component |\n| subheading | string | The subtitle text for the component |\n| transparentBackground | boolean | Determines whether the component displays with a white background or transparent background |\n| type | Varies depending on the component | The type of the component. This can affect either how the component looks (e.g. circular or linear) or how the component functions (e.g. simple or complex) |\n| validationStatus | \"warning\", \"error\", \"success\" | The status of the validation message within the component |\n| validationText | string | The text of the validation message within the component |\n| value | string | The value for the component |\n| variant | Varies depending on the component | The variation of the component. This can affect either the styling of the component (e.g. the status colour) or how the component looks (e.g. rectangle or circle) |\n\n## Slots\n\nTo help explain usage, each slot has the expected slotted content and a description.\n\n| Slot name | Expected content | Description |\n| ---------------- | ------------------ | ------------------------------------------------------------- |\n| action(s) | buttons/links | Additional interactive elements to the component |\n| additional-field | inputs | Additional input field for checkbox/radio components |\n| app-title | typography/links | The title text for the component |\n| badge | badge | A badge component appears alongside the component |\n| buttons | buttons | Additional buttons for the component |\n| heading | typography/links | The title text for the component |\n| icon | image/icon | Additional icon for the component |\n| label | typography/links | Text within the component |\n| message | typography/links | The body text for the component |\n| navigation | navigation items | The content rendered in the navigation panel of the component |\n| router-item | router items/links | Handle routing by nesting routes in the component |\n| subheading | typography/links | The subtitle text for the component |\n",
+ "contents": "\r\n## Props\r\n\r\nTo help explain usage, each prop has the most common type options and a description.\r\n\r\n| Prop name | Most common type options | Description |\r\n| ---------------------- | --------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\r\n| accessibleLabel | string | Extra context to apply to the component for use with a screen reader |\r\n| additionalFieldDisplay | \"static\", \"dynamic\" | How an additional field would present itself within the component |\r\n| aligned | \"center\", \"left\", \"right\", \"full-width\" | The alignment of the component |\r\n| announced | boolean | Changes the component's role to get announced to a screen reader |\r\n| appearance | \"default\", \"dark\", \"light\" | The main colour used for the component |\r\n| appTitle | string | The title text for the component |\r\n| checked | boolean | The checked state of the component |\r\n| contentAligned | \"center\", \"left\" | The alignment of content within the component |\r\n| debounce | number | The wait time in milliseconds before a change event is triggered |\r\n| description | string | The descriptive text for the component |\r\n| disabled | boolean | The component will display as unusable |\r\n| dismissible | boolean | The component will display a close button which will hide the component when clicked |\r\n| expandable | boolean | The component will have an expandable state |\r\n| expanded | boolean | The component will display in the expanded state |\r\n| fullWidth | boolean | The component will take up the available width |\r\n| groupLabel/groupTitle | string | The title text for a component's overarching group |\r\n| heading | string | The title text for the component |\r\n| helperText | string | The informative text for the component |\r\n| hideLabel | boolean | Sets the visibility for the component's label |\r\n| href | string | The URL for the component |\r\n| label | string | Text within the component |\r\n| loading | boolean | The component will display in a loading state |\r\n| message | string | The body text for the component |\r\n| name | string | The name for the component |\r\n| open | boolean | The component will display in an open state |\r\n| placeholder | string | The placeholder text for the component |\r\n| progress | number | The progress made within the component |\r\n| readonly | boolean | The component will display in a readonly state |\r\n| required | boolean | The component will display as a required field |\r\n| selected | boolean | The selected state of the component |\r\n| shortAppTitle | string | The shorter variation of the title text for the component |\r\n| size | \"default\", \"small\", \"large\" | The size of the component |\r\n| subheading | string | The subtitle text for the component |\r\n| transparentBackground | boolean | Determines whether the component displays with a white background or transparent background |\r\n| type | Varies depending on the component | The type of the component. This can affect either how the component looks (e.g. circular or linear) or how the component functions (e.g. simple or complex) |\r\n| validationStatus | \"warning\", \"error\", \"success\" | The status of the validation message within the component |\r\n| validationText | string | The text of the validation message within the component |\r\n| value | string | The value for the component |\r\n| variant | Varies depending on the component | The variation of the component. This can affect either the styling of the component (e.g. the status colour) or how the component looks (e.g. rectangle or circle) |\r\n\r\n## Slots\r\n\r\nTo help explain usage, each slot has the expected slotted content and a description.\r\n\r\n| Slot name | Expected content | Description |\r\n| ---------------- | ------------------ | ------------------------------------------------------------- |\r\n| action(s) | buttons/links | Additional interactive elements to the component |\r\n| additional-field | inputs | Additional input field for checkbox/radio components |\r\n| app-title | typography/links | The title text for the component |\r\n| badge | badge | A badge component appears alongside the component |\r\n| buttons | buttons | Additional buttons for the component |\r\n| heading | typography/links | The title text for the component |\r\n| icon | image/icon | Additional icon for the component |\r\n| label | typography/links | Text within the component |\r\n| message | typography/links | The body text for the component |\r\n| navigation | navigation items | The content rendered in the navigation panel of the component |\r\n| router-item | router items/links | Handle routing by nesting routes in the component |\r\n| subheading | typography/links | The subtitle text for the component |\r\n",
"path": "/community/glossary-of-terms",
"navPriority": 3,
"date": "2024-03-27",
@@ -673,10 +673,10 @@
"subTitle": "A glossary of the most common prop/slot names used throughout the Intelligence Community Design System.",
"contribute": "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/community/glossary-of-terms.mdx?at=develop",
"meta": {
- "relativePath": "community/glossary-of-terms.mdx",
- "createdAt": "2024-11-06T10:27:49.412Z",
- "lastModified": "2024-11-06T10:18:59.920Z",
- "size": 11629,
+ "relativePath": "community\\glossary-of-terms.mdx",
+ "createdAt": "2024-12-04T13:23:54.052Z",
+ "lastModified": "2024-12-04T13:23:54.052Z",
+ "size": 11707,
"formattedSize": "11.4 KB"
}
},
@@ -689,16 +689,16 @@
"subTitle": "The UK Intelligence Community Design System is a community effort endorsed across the UK Intelligence Community.",
"contribute": "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/community/index.mdx",
"meta": {
- "relativePath": "community/index.mdx",
- "createdAt": "2024-11-06T10:27:49.412Z",
- "lastModified": "2024-11-06T10:18:59.920Z",
+ "relativePath": "community\\index.mdx",
+ "createdAt": "2024-11-05T11:57:49.918Z",
+ "lastModified": "2024-11-05T11:57:49.918Z",
"size": 1850,
"formattedSize": "1.8 KB"
}
},
{
"id": "community\\roadmapx",
- "contents": "\n## Introduction\n\nThe purpose of sharing the roadmap is to give our community an insight into our strategic plan, goals and milestones.\n\nPriorities may change because of organisation strategies, or community requirements. We will aim to keep this page up to date.\n\nWe welcome contributions of code, issues raised and more. You can read more about [how to contribute](/community/contribute).\n\nCheck out our [GitHub](https://github.com/orgs/mi6/projects/2/views/1) for a more detailed view of our day-to-day activities.\n\n## Recently shipped\n\n- Canary release of [data table component](/components/data-table).\n- Canary release of [date input component](/components/date-input).\n- Canary release of [date picker component](/components/date-picker).\n- Canary release of [multi-select component](/components/multi-select).\n- Development of [top navigation layout pattern](/patterns/navigation-patterns/top-navigation-layout).\n- Development of [side navigation layout pattern](/patterns/navigation-patterns/side-navigation-layout).\n- Development of [file upload component](/components/button/code/#file-upload).\n- Development of [toggle button component](/components/toggle-button).\n- Added [component images to component galley](/components).\n\n## Current focus\n\n- Customisation and theming of colours and components within the library.\n- Understand the scope for dark mode.\n- Development of drawer component.\n- Development of tree navigation component.\n- Continue Cypress test migration.\n- Development of form pattern.\n- Add StackBlitz and show more show less functionality to component demos.\n\n## Future\n\n- Understand the scope for v3 of the Design System.\n",
+ "contents": "\r\n## Introduction\r\n\r\nThe purpose of sharing the roadmap is to give our community an insight into our strategic plan, goals and milestones.\r\n\r\nPriorities may change because of organisation strategies, or community requirements. We will aim to keep this page up to date.\r\n\r\nWe welcome contributions of code, issues raised and more. You can read more about [how to contribute](/community/contribute).\r\n\r\nCheck out our [GitHub](https://github.com/orgs/mi6/projects/2/views/1) for a more detailed view of our day-to-day activities.\r\n\r\n## Recently shipped\r\n\r\n- Canary release of [data table component](/components/data-table).\r\n- Canary release of [date input component](/components/date-input).\r\n- Canary release of [date picker component](/components/date-picker).\r\n- Canary release of [multi-select component](/components/multi-select).\r\n- Development of [top navigation layout pattern](/patterns/navigation-patterns/top-navigation-layout).\r\n- Development of [side navigation layout pattern](/patterns/navigation-patterns/side-navigation-layout).\r\n- Development of [file upload component](/components/button/code/#file-upload).\r\n- Development of [toggle button component](/components/toggle-button).\r\n- Added [component images to component galley](/components).\r\n\r\n## Current focus\r\n\r\n- Customisation and theming of colours and components within the library.\r\n- Understand the scope for dark mode.\r\n- Development of drawer component.\r\n- Development of tree navigation component.\r\n- Continue Cypress test migration.\r\n- Development of form pattern.\r\n- Add StackBlitz and show more show less functionality to component demos.\r\n\r\n## Future\r\n\r\n- Understand the scope for v3 of the Design System.\r\n",
"path": "/community/roadmap",
"navPriority": 1,
"date": "2024-05-07",
@@ -706,11 +706,11 @@
"subTitle": "Our roadmap shows an overview of recent work, current focus and work we have planned.",
"contribute": "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/community/roadmap.mdx",
"meta": {
- "relativePath": "community/roadmap.mdx",
- "createdAt": "2024-11-06T10:27:49.412Z",
- "lastModified": "2024-11-06T10:18:59.920Z",
- "size": 1951,
- "formattedSize": "1.9 KB"
+ "relativePath": "community\\roadmap.mdx",
+ "createdAt": "2024-12-04T13:23:54.053Z",
+ "lastModified": "2024-12-04T13:23:54.053Z",
+ "size": 2000,
+ "formattedSize": "2.0 KB"
}
},
{
@@ -737,16 +737,16 @@
}
],
"meta": {
- "relativePath": "components/accordion/accessibility.mdx",
- "createdAt": "2024-11-06T10:27:49.408Z",
- "lastModified": "2024-11-06T10:18:59.920Z",
+ "relativePath": "components\\accordion\\accessibility.mdx",
+ "createdAt": "2024-11-05T11:57:49.962Z",
+ "lastModified": "2024-11-05T11:57:49.962Z",
"size": 3260,
"formattedSize": "3.2 KB"
}
},
{
"id": "components\\accordion\\codex",
- "contents": "\nimport {\n IcAccordion,\n IcAccordionGroup,\n IcTypography,\n SlottedSVG,\n} from \"@ukic/react\";\n\n## Component demo\n\nexport const snippets = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-accordion heading=\"English Breakfast\">\n <ic-typography variant=\"body\">\n A blend of different black teas.\n </ic-typography>\n</ic-accordion>\n<ic-accordion heading=\"Earl Grey\">\n <ic-typography variant=\"body\">\n A tea blend that has been flavoured with oil of bergamot.\n </ic-typography>\n</ic-accordion>`,\n long: `.parent-container {\n padding: var(--ic-space-md);\n }\n</style>\n<body>\n <div class=\"parent-container\">\n {shortCode}\n </div>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcAccordion heading=\"English Breakfast\">\n <IcTypography variant=\"body\">\n A blend of different black teas.\n </IcTypography>\n</IcAccordion>\n<IcAccordion heading=\"Earl Grey\">\n <IcTypography variant=\"body\">\n A tea blend that has been flavoured with oil of bergamot.\n </IcTypography>\n</IcAccordion>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n padding: \"var(--ic-space-md)\",\n },\n});\nconst classes = useStyles();\nreturn (\n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n padding: \"var(--ic-space-md)\",\n },\n});\nconst classes = useStyles();\nreturn (\n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview style={{ flexDirection: \"column\" }} snippets={snippets}>\n <IcAccordion heading=\"English Breakfast\">\n <IcTypography variant=\"body\">A blend of different black teas.</IcTypography>\n </IcAccordion>\n <IcAccordion heading=\"Earl Grey\">\n <IcTypography variant=\"body\">\n A tea blend that has been flavoured with oil of bergamot.\n </IcTypography>\n </IcAccordion>\n</ComponentPreview>\n\n## Accordion details\n\n<ComponentDetails component=\"ic-accordion\" />\n\n## Accordion group details\n\n<ComponentDetails component=\"ic-accordion-group\" />\n\n## Variants\n\n### With icon\n\nexport const withIcon = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-accordion heading=\"English Breakfast\">\n <svg\n slot=\"icon\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n </svg>\n <ic-typography variant=\"body\">\n A blend of different black teas.\n </ic-typography>\n </ic-accordion>\n <ic-accordion heading=\"Earl Grey\">\n <svg\n slot=\"icon\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n </svg>\n <ic-typography variant=\"body\">\n A tea blend that has been flavoured with oil of bergamot.\n </ic-typography>\n</ic-accordion>`,\n long: `.parent-container {\n padding: var(--ic-space-md);\n }\n</style>\n<body>\n <div class=\"parent-container\">\n {shortCode}\n </div>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcAccordion heading=\"English Breakfast\">\n <SlottedSVG\n slot=\"icon\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n </SlottedSVG>\n <IcTypography variant=\"body\">\n A blend of different black teas.\n </IcTypography>\n </IcAccordion>\n <IcAccordion heading=\"Earl Grey\">\n <SlottedSVG\n slot=\"icon\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n </SlottedSVG>\n <IcTypography variant=\"body\">\n A tea blend that has been flavoured with oil of bergamot.\n </IcTypography>\n</IcAccordion>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n padding: \"var(--ic-space-md)\",\n },\n});\nconst classes = useStyles();\nreturn (\n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n padding: \"var(--ic-space-md)\",\n },\n});\nconst classes = useStyles();\nreturn (\n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={withIcon} style={{ flexDirection: \"column\" }}>\n <IcAccordion heading=\"English Breakfast\">\n <SlottedSVG\n slot=\"icon\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n </SlottedSVG>\n <IcTypography variant=\"body\">A blend of different black teas.</IcTypography>\n </IcAccordion>\n <IcAccordion heading=\"Earl Grey\">\n <SlottedSVG\n slot=\"icon\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n </SlottedSVG>\n <IcTypography variant=\"body\">\n A tea blend that has been flavoured with oil of bergamot.\n </IcTypography>\n </IcAccordion>\n</ComponentPreview>\n\n### With group title and see all / hide all button\n\n<ComponentPreview snippets={groupTitle} style={{ flexDirection: \"column\" }}>\n <IcAccordionGroup group-title=\"Coffee\">\n <IcAccordion heading=\"Cappuccino\">\n <IcTypography variant=\"body\">\n An espresso-based drink that is traditionally prepared with steamed milk\n foam.\n </IcTypography>\n </IcAccordion>\n <IcAccordion heading=\"Americano\">\n <IcTypography variant=\"body\">\n An espresso-based drink that is diluted with hot water.\n </IcTypography>\n </IcAccordion>\n </IcAccordionGroup>\n</ComponentPreview>\n\nexport const groupTitle = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-accordion-group group-title=\"Coffee\">\n <ic-accordion heading=\"Cappuccino\">\n <ic-typography variant=\"body\">\n An espresso-based drink that is traditionally prepared with steamed milk foam.\n </ic-typography>\n </ic-accordion>\n <ic-accordion heading=\"Americano\">\n <ic-typography variant=\"body\">\n An espresso-based drink that is diluted with hot water.\n </ic-typography>\n </ic-accordion>\n</ic-accordion-group>`,\n long: `.parent-container {\n padding: var(--ic-space-md);\n }\n</style>\n<body>\n <div class=\"parent-container\">\n {shortCode}\n </div>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcAccordionGroup groupTitle=\"Coffee\">\n <IcAccordion heading=\"Cappucino\">\n <IcTypography variant=\"body\">\n An espresso-based drink that is traditionally prepared with steamed milk foam.\n </IcTypography>\n </IcAccordion>\n <IcAccordion heading=\"Americano\">\n <IcTypography variant=\"body\">\n An espresso-based drink that is diluted with hot water.\n </IcTypography>\n </IcAccordion>\n</IcAccordionGroup>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n padding: \"var(--ic-space-md)\",\n },\n});\nconst classes = useStyles();\nreturn (\n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n padding: \"var(--ic-space-md)\",\n },\n});\nconst classes = useStyles();\nreturn (\n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n ],\n },\n },\n];\n\n### With nested accordions\n\nexport const snippetsNested = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-accordion-group group-title=\"Coffee\">\n <ic-accordion heading=\"Cappuccino\">\n <ic-typography variant=\"body\">\n An espresso-based drink that is traditionally prepared with steamed milk foam.\n </ic-typography>\n </ic-accordion>\n <ic-accordion heading=\"Other coffees\">\n <ic-accordion heading=\"Americano\">\n <ic-typography variant=\"body\">\n An espresso-based drink that is diluted with hot water.\n </ic-typography>\n </ic-accordion>\n <ic-accordion heading=\"Latte\">\n <ic-typography variant=\"body\">\n A milkier coffee than a cappuccino.\n </ic-typography>\n </ic-accordion>\n </ic-accordion>\n</ic-accordion-group>`,\n long: `.parent-container {\n padding: var(--ic-space-md);\n }\n</style>\n<body>\n <div class=\"parent-container\">\n {shortCode}\n </div>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcAccordionGroup groupTitle=\"Coffee\">\n <IcAccordion heading=\"Cappucino\">\n <IcTypography variant=\"body\">\n An espresso-based drink that is traditionally prepared with steamed milk foam.\n </IcTypography>\n </IcAccordion>\n <IcAccordion heading=\"Other coffees\">\n <IcAccordion heading=\"Americano\">\n <IcTypography variant=\"body\">\n An espresso-based drink that is diluted with hot water.\n </IcTypography>\n </IcAccordion>\n <IcAccordion heading=\"Latte\">\n <IcTypography variant=\"body\">\n A milkier coffee than a cappuccino.\n </IcTypography>\n </IcAccordion>\n </IcAccordion>\n</IcAccordionGroup>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n padding: \"var(--ic-space-md)\",\n },\n});\nconst classes = useStyles();\nreturn (\n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n padding: \"var(--ic-space-md)\",\n },\n});\nconst classes = useStyles();\nreturn (\n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={snippetsNested} style={{ flexDirection: \"column\" }}>\n <IcAccordionGroup group-title=\"Coffee\">\n <IcAccordion heading=\"Cappuccino\">\n <IcTypography variant=\"body\">\n An espresso-based drink that is traditionally prepared with steamed milk\n foam.\n </IcTypography>\n </IcAccordion>\n <IcAccordion heading=\"Other coffees\">\n <IcAccordion heading=\"Americano\">\n <IcTypography variant=\"body\">\n An espresso-based drink that is diluted with hot water.\n </IcTypography>\n </IcAccordion>\n <IcAccordion heading=\"Latte\">\n <IcTypography variant=\"body\">\n A milkier coffee than a cappuccino.\n </IcTypography>\n </IcAccordion>\n </IcAccordion>\n </IcAccordionGroup>\n</ComponentPreview>\n",
+ "contents": "\r\nimport {\r\n IcAccordion,\r\n IcAccordionGroup,\r\n IcTypography,\r\n SlottedSVG,\r\n} from \"@ukic/react\";\r\n\r\n## Component demo\r\n\r\nexport const snippets = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-accordion heading=\"English Breakfast\">\r\n <ic-typography variant=\"body\">\r\n A blend of different black teas.\r\n </ic-typography>\r\n</ic-accordion>\r\n<ic-accordion heading=\"Earl Grey\">\r\n <ic-typography variant=\"body\">\r\n A tea blend that has been flavoured with oil of bergamot.\r\n </ic-typography>\r\n</ic-accordion>`,\r\n long: `.parent-container {\r\n padding: var(--ic-space-md);\r\n }\r\n</style>\r\n<body>\r\n <div class=\"parent-container\">\r\n {shortCode}\r\n </div>`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcAccordion heading=\"English Breakfast\">\r\n <IcTypography variant=\"body\">\r\n A blend of different black teas.\r\n </IcTypography>\r\n</IcAccordion>\r\n<IcAccordion heading=\"Earl Grey\">\r\n <IcTypography variant=\"body\">\r\n A tea blend that has been flavoured with oil of bergamot.\r\n </IcTypography>\r\n</IcAccordion>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `const useStyles = createUseStyles({\r\n parentContainer: {\r\n padding: \"var(--ic-space-md)\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nreturn (\r\n <div className={classes.parentContainer}>\r\n {shortCode}\r\n </div>\r\n)`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `const useStyles = createUseStyles({\r\n parentContainer: {\r\n padding: \"var(--ic-space-md)\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nreturn (\r\n <div className={classes.parentContainer}>\r\n {shortCode}\r\n </div>\r\n)`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview style={{ flexDirection: \"column\" }} snippets={snippets}>\r\n <IcAccordion heading=\"English Breakfast\">\r\n <IcTypography variant=\"body\">A blend of different black teas.</IcTypography>\r\n </IcAccordion>\r\n <IcAccordion heading=\"Earl Grey\">\r\n <IcTypography variant=\"body\">\r\n A tea blend that has been flavoured with oil of bergamot.\r\n </IcTypography>\r\n </IcAccordion>\r\n</ComponentPreview>\r\n\r\n## Accordion details\r\n\r\n<ComponentDetails component=\"ic-accordion\" />\r\n\r\n## Accordion group details\r\n\r\n<ComponentDetails component=\"ic-accordion-group\" />\r\n\r\n## Variants\r\n\r\n### With icon\r\n\r\nexport const withIcon = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-accordion heading=\"English Breakfast\">\r\n <svg\r\n slot=\"icon\"\r\n width=\"24\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n >\r\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\r\n </svg>\r\n <ic-typography variant=\"body\">\r\n A blend of different black teas.\r\n </ic-typography>\r\n </ic-accordion>\r\n <ic-accordion heading=\"Earl Grey\">\r\n <svg\r\n slot=\"icon\"\r\n width=\"24\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n >\r\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\r\n </svg>\r\n <ic-typography variant=\"body\">\r\n A tea blend that has been flavoured with oil of bergamot.\r\n </ic-typography>\r\n</ic-accordion>`,\r\n long: `.parent-container {\r\n padding: var(--ic-space-md);\r\n }\r\n</style>\r\n<body>\r\n <div class=\"parent-container\">\r\n {shortCode}\r\n </div>`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcAccordion heading=\"English Breakfast\">\r\n <SlottedSVG\r\n slot=\"icon\"\r\n width=\"24\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n >\r\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\r\n </SlottedSVG>\r\n <IcTypography variant=\"body\">\r\n A blend of different black teas.\r\n </IcTypography>\r\n </IcAccordion>\r\n <IcAccordion heading=\"Earl Grey\">\r\n <SlottedSVG\r\n slot=\"icon\"\r\n width=\"24\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n >\r\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\r\n </SlottedSVG>\r\n <IcTypography variant=\"body\">\r\n A tea blend that has been flavoured with oil of bergamot.\r\n </IcTypography>\r\n</IcAccordion>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `const useStyles = createUseStyles({\r\n parentContainer: {\r\n padding: \"var(--ic-space-md)\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nreturn (\r\n <div className={classes.parentContainer}>\r\n {shortCode}\r\n </div>\r\n)`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `const useStyles = createUseStyles({\r\n parentContainer: {\r\n padding: \"var(--ic-space-md)\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nreturn (\r\n <div className={classes.parentContainer}>\r\n {shortCode}\r\n </div>\r\n)`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview snippets={withIcon} style={{ flexDirection: \"column\" }}>\r\n <IcAccordion heading=\"English Breakfast\">\r\n <SlottedSVG\r\n slot=\"icon\"\r\n width=\"24\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n >\r\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\r\n </SlottedSVG>\r\n <IcTypography variant=\"body\">A blend of different black teas.</IcTypography>\r\n </IcAccordion>\r\n <IcAccordion heading=\"Earl Grey\">\r\n <SlottedSVG\r\n slot=\"icon\"\r\n width=\"24\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n >\r\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\r\n </SlottedSVG>\r\n <IcTypography variant=\"body\">\r\n A tea blend that has been flavoured with oil of bergamot.\r\n </IcTypography>\r\n </IcAccordion>\r\n</ComponentPreview>\r\n\r\n### With group title and see all / hide all button\r\n\r\n<ComponentPreview snippets={groupTitle} style={{ flexDirection: \"column\" }}>\r\n <IcAccordionGroup group-title=\"Coffee\">\r\n <IcAccordion heading=\"Cappuccino\">\r\n <IcTypography variant=\"body\">\r\n An espresso-based drink that is traditionally prepared with steamed milk\r\n foam.\r\n </IcTypography>\r\n </IcAccordion>\r\n <IcAccordion heading=\"Americano\">\r\n <IcTypography variant=\"body\">\r\n An espresso-based drink that is diluted with hot water.\r\n </IcTypography>\r\n </IcAccordion>\r\n </IcAccordionGroup>\r\n</ComponentPreview>\r\n\r\nexport const groupTitle = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-accordion-group group-title=\"Coffee\">\r\n <ic-accordion heading=\"Cappuccino\">\r\n <ic-typography variant=\"body\">\r\n An espresso-based drink that is traditionally prepared with steamed milk foam.\r\n </ic-typography>\r\n </ic-accordion>\r\n <ic-accordion heading=\"Americano\">\r\n <ic-typography variant=\"body\">\r\n An espresso-based drink that is diluted with hot water.\r\n </ic-typography>\r\n </ic-accordion>\r\n</ic-accordion-group>`,\r\n long: `.parent-container {\r\n padding: var(--ic-space-md);\r\n }\r\n</style>\r\n<body>\r\n <div class=\"parent-container\">\r\n {shortCode}\r\n </div>`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcAccordionGroup groupTitle=\"Coffee\">\r\n <IcAccordion heading=\"Cappucino\">\r\n <IcTypography variant=\"body\">\r\n An espresso-based drink that is traditionally prepared with steamed milk foam.\r\n </IcTypography>\r\n </IcAccordion>\r\n <IcAccordion heading=\"Americano\">\r\n <IcTypography variant=\"body\">\r\n An espresso-based drink that is diluted with hot water.\r\n </IcTypography>\r\n </IcAccordion>\r\n</IcAccordionGroup>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `const useStyles = createUseStyles({\r\n parentContainer: {\r\n padding: \"var(--ic-space-md)\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nreturn (\r\n <div className={classes.parentContainer}>\r\n {shortCode}\r\n </div>\r\n)`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `const useStyles = createUseStyles({\r\n parentContainer: {\r\n padding: \"var(--ic-space-md)\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nreturn (\r\n <div className={classes.parentContainer}>\r\n {shortCode}\r\n </div>\r\n)`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n### With nested accordions\r\n\r\nexport const snippetsNested = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-accordion-group group-title=\"Coffee\">\r\n <ic-accordion heading=\"Cappuccino\">\r\n <ic-typography variant=\"body\">\r\n An espresso-based drink that is traditionally prepared with steamed milk foam.\r\n </ic-typography>\r\n </ic-accordion>\r\n <ic-accordion heading=\"Other coffees\">\r\n <ic-accordion heading=\"Americano\">\r\n <ic-typography variant=\"body\">\r\n An espresso-based drink that is diluted with hot water.\r\n </ic-typography>\r\n </ic-accordion>\r\n <ic-accordion heading=\"Latte\">\r\n <ic-typography variant=\"body\">\r\n A milkier coffee than a cappuccino.\r\n </ic-typography>\r\n </ic-accordion>\r\n </ic-accordion>\r\n</ic-accordion-group>`,\r\n long: `.parent-container {\r\n padding: var(--ic-space-md);\r\n }\r\n</style>\r\n<body>\r\n <div class=\"parent-container\">\r\n {shortCode}\r\n </div>`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcAccordionGroup groupTitle=\"Coffee\">\r\n <IcAccordion heading=\"Cappucino\">\r\n <IcTypography variant=\"body\">\r\n An espresso-based drink that is traditionally prepared with steamed milk foam.\r\n </IcTypography>\r\n </IcAccordion>\r\n <IcAccordion heading=\"Other coffees\">\r\n <IcAccordion heading=\"Americano\">\r\n <IcTypography variant=\"body\">\r\n An espresso-based drink that is diluted with hot water.\r\n </IcTypography>\r\n </IcAccordion>\r\n <IcAccordion heading=\"Latte\">\r\n <IcTypography variant=\"body\">\r\n A milkier coffee than a cappuccino.\r\n </IcTypography>\r\n </IcAccordion>\r\n </IcAccordion>\r\n</IcAccordionGroup>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `const useStyles = createUseStyles({\r\n parentContainer: {\r\n padding: \"var(--ic-space-md)\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nreturn (\r\n <div className={classes.parentContainer}>\r\n {shortCode}\r\n </div>\r\n)`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `const useStyles = createUseStyles({\r\n parentContainer: {\r\n padding: \"var(--ic-space-md)\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nreturn (\r\n <div className={classes.parentContainer}>\r\n {shortCode}\r\n </div>\r\n)`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview snippets={snippetsNested} style={{ flexDirection: \"column\" }}>\r\n <IcAccordionGroup group-title=\"Coffee\">\r\n <IcAccordion heading=\"Cappuccino\">\r\n <IcTypography variant=\"body\">\r\n An espresso-based drink that is traditionally prepared with steamed milk\r\n foam.\r\n </IcTypography>\r\n </IcAccordion>\r\n <IcAccordion heading=\"Other coffees\">\r\n <IcAccordion heading=\"Americano\">\r\n <IcTypography variant=\"body\">\r\n An espresso-based drink that is diluted with hot water.\r\n </IcTypography>\r\n </IcAccordion>\r\n <IcAccordion heading=\"Latte\">\r\n <IcTypography variant=\"body\">\r\n A milkier coffee than a cappuccino.\r\n </IcTypography>\r\n </IcAccordion>\r\n </IcAccordion>\r\n </IcAccordionGroup>\r\n</ComponentPreview>\r\n",
"path": "/components/accordion/code",
"date": "2024-05-31",
"title": "Accordion",
@@ -768,16 +768,16 @@
}
],
"meta": {
- "relativePath": "components/accordion/code.mdx",
- "createdAt": "2024-11-06T10:27:49.408Z",
- "lastModified": "2024-11-06T10:18:59.920Z",
- "size": 12314,
- "formattedSize": "12.0 KB"
+ "relativePath": "components\\accordion\\code.mdx",
+ "createdAt": "2024-12-04T13:23:54.056Z",
+ "lastModified": "2024-12-04T13:23:54.056Z",
+ "size": 12786,
+ "formattedSize": "12.5 KB"
}
},
{
"id": "components\\accordion\\guidancex",
- "contents": "\nimport {\n IcAccordion,\n IcAccordionGroup,\n IcTypography,\n SlottedSVG,\n} from \"@ukic/react\";\nimport accordionFig1 from \"./images/fig-1-add-accordion-titles-to-help-organise-content.png\";\nimport accordionFig2a from \"./images/fig-2a-use-see-all-button-to-open-all-accordions-within-an-accordion-group-at-once.png\";\nimport accordionFig2b from \"./images/fig-2b-use-hide-all-button-to-close-all-accordions-within-an-accordion-group-at-once.png\";\nimport accordionFig3 from \"./images/fig-3-use-the-slotted-content-of-an-accordion-to-house-other-content.png\";\nimport accordionFig4 from \"./images/fig-4-do-not-nest-an-accordion-or-accordion-group-within-an-already-nested-accordion-one-level-of-nesting-is-the-maximum.png\";\nimport accordionFig5a from \"./images/fig-5a-use-an-accordion-group-with-a-title-for-clearer-organisation.png\";\nimport accordionFig5b from \"./images/fig-5b-consider-using-an-accordion-group-instead-of-nested-accordions-for-clearer-organisation.png\";\nimport accordionFig6 from \"./images/fig-6-always-make-sure-your-title-is-relevant-to-your-accordion-group-content.png\";\nimport accordionFig7 from \"./images/fig-7-do-not-use-scroll-bars-within-accordions.png\";\n\n## Introduction\n\nAn accordion is an expandable and collapsible section that is used to show and hide content. Accordions are used to shorten the length of a page by hiding information.\n\nGroup accordions to hide more content on the page and to structure content into different sections.\n\nAn accordion group can be nested within another accordion to create one layer of nested content. Do not nest more accordion groups within an already nested accordion group. Only use one level of nesting.\n\n<ComponentPreview style={{ flexDirection: \"column\" }}>\n <IcAccordionGroup groupTitle=\"Our coffees - Ingredients\">\n <IcAccordion heading=\"Americano\">\n <SlottedSVG\n slot=\"icon\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n </SlottedSVG>\n <IcTypography variant=\"body\">\n A simple drink made by topping up espresso with hot water.\n </IcTypography>\n </IcAccordion>\n <IcAccordion heading=\"Cappuccino\">\n <SlottedSVG\n slot=\"icon\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n </SlottedSVG>\n <IcAccordion heading=\"Espresso\">\n <IcTypography variant=\"body\">\n Our tasty double shot of espresso made from the finest Arabica beans.\n </IcTypography>\n </IcAccordion>\n <IcAccordion heading=\"Steamed milk\">\n <IcTypography variant=\"body\">\n Steamy milk how you like it. Choose from whole, semi-skimmed, soy, oat\n or almond.\n </IcTypography>\n </IcAccordion>\n <IcAccordion heading=\"Chocolate sprinkles\">\n <IcTypography variant=\"body\">\n No cappuccino is complete without the sprinkles. Ours are made from\n sumptuous dark Belgian chocolate.\n </IcTypography>\n </IcAccordion>\n </IcAccordion>\n </IcAccordionGroup>\n</ComponentPreview>\n\n## When to use\n\nUse accordions to organise information, shorten the page length and reduce the scroll time when the page is initially loaded.\n\nUse accordion groups to categorise accordions into sections with a title.\n\nFor example, use an accordion group for a frequently asked questions (FAQs) page.\n\n<DoubleDoDontCaution>\n <DoDontCaution\n imageSrc={accordionFig1}\n imageAlt=\"Two collapsed accordion groups. One titled ‘Bari-star member benefits’ and one titled ‘FAQs’, both containing three accordions.\"\n state=\"good\"\n caption=\"Add accordion titles to help organise content.\"\n />\n</DoubleDoDontCaution>\n\nUse the accordion title section to title the group of accordions and contain the 'see all' or 'hide all' button. Don’t display a title to achieve a title section with only the 'see all' or 'hide all' button.\n\nUse 'see all' and 'hide all' functionality to show or hide all information from all accordions at once.\n\n<DoubleDoDontCaution>\n <DoDontCaution\n imageSrc={accordionFig2a}\n imageAlt=\"A collapsed accordion group titled ‘Bari-star member benefits’ with a ‘see all’ button.\"\n state=\"good\"\n caption=\"Use the 'see all' button to open all accordions within an accordion group at once. \"\n />\n</DoubleDoDontCaution>\n\n<DoubleDoDontCaution>\n <DoDontCaution\n imageSrc={accordionFig2b}\n imageAlt=\"An expanded accordion group titled ‘Bari-star member benefits’ with a ‘hide all’ button.\"\n state=\"good\"\n caption=\"Use the 'hide all' button to close all accordions within an accordion group at once.\"\n />\n</DoubleDoDontCaution>\n\nAdd custom content to an accordion using the slotted section to create different uses for your accordions.\n\n<DoubleDoDontCaution>\n <DoDontCaution\n imageSrc={accordionFig3}\n imageAlt=\"An accordion titled ‘Order details’ including a three-row data entity for a coffee order in the content area.\"\n state=\"good\"\n caption=\"Use the slotted content of an accordion to house other content.\"\n />\n</DoubleDoDontCaution>\n\nSet an accordion to open one at a time when the information in the accordions is unrelated.\n\nSet an accordion to open all at once when all information can be viewed at the same time and is related.\n\n## When not to use\n\nDo not use accordions when all information is critical to the people using the page.\n\nAvoid overusing accordions to hide all information on a page. Accordions may be ignored if used too frequently.\n\nDo not place accordion groups within nested accordion groups, one layer of nesting is the maximum.\n\n<DoubleDoDontCaution>\n <DoDontCaution\n imageSrc={accordionFig4}\n imageAlt=\"An accordion group titled ‘Roasting hot’ containing an accordion group with another nested accordion group within it.\"\n state=\"bad\"\n caption=\"Do not nest an accordion or accordion group within an already nested accordion. One level of nesting is the maximum. \"\n />\n</DoubleDoDontCaution>\n\nDo not use nested accordions as a replacement for an accordion group. Consider using multiple accordion groups on the page instead.\n\n<DoubleDoDontCaution>\n <DoDontCaution\n imageSrc={accordionFig5a}\n imageAlt=\"An accordion group titled Coffee with three collapsed accordions\"\n state=\"good\"\n caption=\"Use an accordion group with a title for clearer organisation.\"\n />\n <DoDontCaution\n imageSrc={accordionFig5b}\n imageAlt=\"A parent accordion with the heading Coffee with a nested accordion group containing three accordions.\"\n state=\"caution\"\n caption=\"Avoid nesting an accordion group to add a title. Instead, use an accordion group title.\"\n />\n</DoubleDoDontCaution>\n\n## Colour\n\nUse the dark or light appearance to achieve colour contrast compliance when using accordions on different coloured backgrounds.\n\n## Sizing\n\nUse an accordion's size property to change its vertical size and achieve compact or spacious layouts.\n\nSet the width of the accordion depending on the screen size or the container that is being used.\n\n## Layout and placement\n\nUse accordions in main page content. Accordions can also be placed within other components to organise content.\n\n## Content\n\n### Heading and title\n\nWhen using a title for an accordion group, make sure it is relevant to the information provided by each accordion header.\n\n<DoubleDoDontCaution>\n <DoDontCaution\n imageSrc={accordionFig6}\n imageAlt=\"An accordion group containing three accordions with headings of different types of tea, with a title of ‘Our coffee menu’\"\n state=\"bad\"\n caption=\"Always make sure your title is relevant to your accordion group content.\"\n />\n</DoubleDoDontCaution>\n\nAlways give an accordion a suitable header that is relevant to the information that it contains.\n\nRelevant titles and headings allow people to skip over the information if it is not relevant.\n\n### Accordion content\n\nUse text content by default or use the accordion slot to provide custom content or layouts.\n\nDo not make accordion content scrollable as this will interfere with the page scroll.\n\n<DoubleDoDontCaution>\n <DoDontCaution\n imageSrc={accordionFig7}\n imageAlt=\"An accordion group with three accordions where the first accordion is expanded, containing a scroll bar.\"\n state=\"bad\"\n caption=\"Do not use scroll bars within accordions.\"\n />\n</DoubleDoDontCaution>\n\n### Icons\n\nUse an icon on an accordion header to provide additional meaning or to aid in recognition.\n\nMake sure that the icon is understandable and relevant to the accordion header and content.\n\nAlways provide alternative descriptions for icons if they aren't decorative. Only use icons if they are necessary, they are removed as default.\n\n## Accessibility considerations\n\nMake sure to change an accordion’s semantic heading style to achieve a logical heading structure on the page.\n",
+ "contents": "\r\nimport {\r\n IcAccordion,\r\n IcAccordionGroup,\r\n IcTypography,\r\n SlottedSVG,\r\n} from \"@ukic/react\";\r\nimport accordionFig1 from \"./images/fig-1-add-accordion-titles-to-help-organise-content.png\";\r\nimport accordionFig2a from \"./images/fig-2a-use-see-all-button-to-open-all-accordions-within-an-accordion-group-at-once.png\";\r\nimport accordionFig2b from \"./images/fig-2b-use-hide-all-button-to-close-all-accordions-within-an-accordion-group-at-once.png\";\r\nimport accordionFig3 from \"./images/fig-3-use-the-slotted-content-of-an-accordion-to-house-other-content.png\";\r\nimport accordionFig4 from \"./images/fig-4-do-not-nest-an-accordion-or-accordion-group-within-an-already-nested-accordion-one-level-of-nesting-is-the-maximum.png\";\r\nimport accordionFig5a from \"./images/fig-5a-use-an-accordion-group-with-a-title-for-clearer-organisation.png\";\r\nimport accordionFig5b from \"./images/fig-5b-consider-using-an-accordion-group-instead-of-nested-accordions-for-clearer-organisation.png\";\r\nimport accordionFig6 from \"./images/fig-6-always-make-sure-your-title-is-relevant-to-your-accordion-group-content.png\";\r\nimport accordionFig7 from \"./images/fig-7-do-not-use-scroll-bars-within-accordions.png\";\r\n\r\n## Introduction\r\n\r\nAn accordion is an expandable and collapsible section that is used to show and hide content. Accordions are used to shorten the length of a page by hiding information.\r\n\r\nGroup accordions to hide more content on the page and to structure content into different sections.\r\n\r\nAn accordion group can be nested within another accordion to create one layer of nested content. Do not nest more accordion groups within an already nested accordion group. Only use one level of nesting.\r\n\r\n<ComponentPreview style={{ flexDirection: \"column\" }}>\r\n <IcAccordionGroup groupTitle=\"Our coffees - Ingredients\">\r\n <IcAccordion heading=\"Americano\">\r\n <SlottedSVG\r\n slot=\"icon\"\r\n width=\"24\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n >\r\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\r\n </SlottedSVG>\r\n <IcTypography variant=\"body\">\r\n A simple drink made by topping up espresso with hot water.\r\n </IcTypography>\r\n </IcAccordion>\r\n <IcAccordion heading=\"Cappuccino\">\r\n <SlottedSVG\r\n slot=\"icon\"\r\n width=\"24\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n >\r\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\r\n </SlottedSVG>\r\n <IcAccordion heading=\"Espresso\">\r\n <IcTypography variant=\"body\">\r\n Our tasty double shot of espresso made from the finest Arabica beans.\r\n </IcTypography>\r\n </IcAccordion>\r\n <IcAccordion heading=\"Steamed milk\">\r\n <IcTypography variant=\"body\">\r\n Steamy milk how you like it. Choose from whole, semi-skimmed, soy, oat\r\n or almond.\r\n </IcTypography>\r\n </IcAccordion>\r\n <IcAccordion heading=\"Chocolate sprinkles\">\r\n <IcTypography variant=\"body\">\r\n No cappuccino is complete without the sprinkles. Ours are made from\r\n sumptuous dark Belgian chocolate.\r\n </IcTypography>\r\n </IcAccordion>\r\n </IcAccordion>\r\n </IcAccordionGroup>\r\n</ComponentPreview>\r\n\r\n## When to use\r\n\r\nUse accordions to organise information, shorten the page length and reduce the scroll time when the page is initially loaded.\r\n\r\nUse accordion groups to categorise accordions into sections with a title.\r\n\r\nFor example, use an accordion group for a frequently asked questions (FAQs) page.\r\n\r\n<DoubleDoDontCaution>\r\n <DoDontCaution\r\n imageSrc={accordionFig1}\r\n imageAlt=\"Two collapsed accordion groups. One titled ‘Bari-star member benefits’ and one titled ‘FAQs’, both containing three accordions.\"\r\n state=\"good\"\r\n caption=\"Add accordion titles to help organise content.\"\r\n />\r\n</DoubleDoDontCaution>\r\n\r\nUse the accordion title section to title the group of accordions and contain the 'see all' or 'hide all' button. Don’t display a title to achieve a title section with only the 'see all' or 'hide all' button.\r\n\r\nUse 'see all' and 'hide all' functionality to show or hide all information from all accordions at once.\r\n\r\n<DoubleDoDontCaution>\r\n <DoDontCaution\r\n imageSrc={accordionFig2a}\r\n imageAlt=\"A collapsed accordion group titled ‘Bari-star member benefits’ with a ‘see all’ button.\"\r\n state=\"good\"\r\n caption=\"Use the 'see all' button to open all accordions within an accordion group at once. \"\r\n />\r\n</DoubleDoDontCaution>\r\n\r\n<DoubleDoDontCaution>\r\n <DoDontCaution\r\n imageSrc={accordionFig2b}\r\n imageAlt=\"An expanded accordion group titled ‘Bari-star member benefits’ with a ‘hide all’ button.\"\r\n state=\"good\"\r\n caption=\"Use the 'hide all' button to close all accordions within an accordion group at once.\"\r\n />\r\n</DoubleDoDontCaution>\r\n\r\nAdd custom content to an accordion using the slotted section to create different uses for your accordions.\r\n\r\n<DoubleDoDontCaution>\r\n <DoDontCaution\r\n imageSrc={accordionFig3}\r\n imageAlt=\"An accordion titled ‘Order details’ including a three-row data entity for a coffee order in the content area.\"\r\n state=\"good\"\r\n caption=\"Use the slotted content of an accordion to house other content.\"\r\n />\r\n</DoubleDoDontCaution>\r\n\r\nSet an accordion to open one at a time when the information in the accordions is unrelated.\r\n\r\nSet an accordion to open all at once when all information can be viewed at the same time and is related.\r\n\r\n## When not to use\r\n\r\nDo not use accordions when all information is critical to the people using the page.\r\n\r\nAvoid overusing accordions to hide all information on a page. Accordions may be ignored if used too frequently.\r\n\r\nDo not place accordion groups within nested accordion groups, one layer of nesting is the maximum.\r\n\r\n<DoubleDoDontCaution>\r\n <DoDontCaution\r\n imageSrc={accordionFig4}\r\n imageAlt=\"An accordion group titled ‘Roasting hot’ containing an accordion group with another nested accordion group within it.\"\r\n state=\"bad\"\r\n caption=\"Do not nest an accordion or accordion group within an already nested accordion. One level of nesting is the maximum. \"\r\n />\r\n</DoubleDoDontCaution>\r\n\r\nDo not use nested accordions as a replacement for an accordion group. Consider using multiple accordion groups on the page instead.\r\n\r\n<DoubleDoDontCaution>\r\n <DoDontCaution\r\n imageSrc={accordionFig5a}\r\n imageAlt=\"An accordion group titled Coffee with three collapsed accordions\"\r\n state=\"good\"\r\n caption=\"Use an accordion group with a title for clearer organisation.\"\r\n />\r\n <DoDontCaution\r\n imageSrc={accordionFig5b}\r\n imageAlt=\"A parent accordion with the heading Coffee with a nested accordion group containing three accordions.\"\r\n state=\"caution\"\r\n caption=\"Avoid nesting an accordion group to add a title. Instead, use an accordion group title.\"\r\n />\r\n</DoubleDoDontCaution>\r\n\r\n## Colour\r\n\r\nUse the dark or light appearance to achieve colour contrast compliance when using accordions on different coloured backgrounds.\r\n\r\n## Sizing\r\n\r\nUse an accordion's size property to change its vertical size and achieve compact or spacious layouts.\r\n\r\nSet the width of the accordion depending on the screen size or the container that is being used.\r\n\r\n## Layout and placement\r\n\r\nUse accordions in main page content. Accordions can also be placed within other components to organise content.\r\n\r\n## Content\r\n\r\n### Heading and title\r\n\r\nWhen using a title for an accordion group, make sure it is relevant to the information provided by each accordion header.\r\n\r\n<DoubleDoDontCaution>\r\n <DoDontCaution\r\n imageSrc={accordionFig6}\r\n imageAlt=\"An accordion group containing three accordions with headings of different types of tea, with a title of ‘Our coffee menu’\"\r\n state=\"bad\"\r\n caption=\"Always make sure your title is relevant to your accordion group content.\"\r\n />\r\n</DoubleDoDontCaution>\r\n\r\nAlways give an accordion a suitable header that is relevant to the information that it contains.\r\n\r\nRelevant titles and headings allow people to skip over the information if it is not relevant.\r\n\r\n### Accordion content\r\n\r\nUse text content by default or use the accordion slot to provide custom content or layouts.\r\n\r\nDo not make accordion content scrollable as this will interfere with the page scroll.\r\n\r\n<DoubleDoDontCaution>\r\n <DoDontCaution\r\n imageSrc={accordionFig7}\r\n imageAlt=\"An accordion group with three accordions where the first accordion is expanded, containing a scroll bar.\"\r\n state=\"bad\"\r\n caption=\"Do not use scroll bars within accordions.\"\r\n />\r\n</DoubleDoDontCaution>\r\n\r\n### Icons\r\n\r\nUse an icon on an accordion header to provide additional meaning or to aid in recognition.\r\n\r\nMake sure that the icon is understandable and relevant to the accordion header and content.\r\n\r\nAlways provide alternative descriptions for icons if they aren't decorative. Only use icons if they are necessary, they are removed as default.\r\n\r\n## Accessibility considerations\r\n\r\nMake sure to change an accordion’s semantic heading style to achieve a logical heading structure on the page.\r\n",
"path": "/components/accordion",
"navPriority": 1,
"date": "2023-10-11",
@@ -810,11 +810,11 @@
"Show hide"
],
"meta": {
- "relativePath": "components/accordion/guidance.mdx",
- "createdAt": "2024-11-06T10:27:49.408Z",
- "lastModified": "2024-11-06T10:18:59.920Z",
- "size": 10009,
- "formattedSize": "9.8 KB"
+ "relativePath": "components\\accordion\\guidance.mdx",
+ "createdAt": "2024-12-04T13:23:54.056Z",
+ "lastModified": "2024-12-04T13:23:54.056Z",
+ "size": 10264,
+ "formattedSize": "10.0 KB"
}
},
{
@@ -841,16 +841,16 @@
}
],
"meta": {
- "relativePath": "components/alerts/accessibility.mdx",
- "createdAt": "2024-11-06T10:27:49.404Z",
- "lastModified": "2024-11-06T10:18:59.920Z",
+ "relativePath": "components\\alerts\\accessibility.mdx",
+ "createdAt": "2024-11-05T11:57:50.072Z",
+ "lastModified": "2024-11-05T11:57:50.072Z",
"size": 2230,
"formattedSize": "2.2 KB"
}
},
{
"id": "components\\alerts\\codex",
- "contents": "\n## Component demo\n\nimport { IcAlert, IcButton, IcLink } from \"@ukic/react\";\n\nexport const snippetsDefault = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-alert\n heading=\"Americano order\"\n message=\"Preparation status is unavailable.\"\n></ic-alert>\n<ic-alert\n variant=\"info\"\n heading=\"Did you know?\"\n message=\"Coffee is a brewed drink prepared from roasted coffee beans.\"\n></ic-alert>\n<ic-alert\n variant=\"error\"\n heading=\"Americano order error\"\n message=\"Americano couldn't be made, we ran out of beans.\"\n></ic-alert>\n<ic-alert\n variant=\"warning\"\n heading=\"Hot drink\"\n message=\"Please be careful the drink is hot.\"\n></ic-alert>\n<ic-alert\n variant=\"success\"\n heading=\"Americano order complete\"\n message=\"Success, your coffee is good to go.\"\n></ic-alert>`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcAlert\n heading=\"Americano order\"\n message=\"Preparation status is unavailable.\"\n/>\n<IcAlert\n variant=\"info\"\n heading=\"Did you know?\"\n message=\"Coffee is a brewed drink prepared from roasted coffee beans.\"\n/>\n<IcAlert\n variant=\"error\"\n heading=\"Americano order error\"\n message=\"Americano couldn't be made, we ran out of beans.\"\n/>\n<IcAlert\n variant=\"warning\"\n heading=\"Hot drink\"\n message=\"Please be careful the drink is hot.\"\n/>\n<IcAlert\n variant=\"success\"\n heading=\"Americano order complete\"\n message=\"Success, your coffee is good to go.\"\n/>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `<>\n {shortCode}\n</>`,\n },\n {\n language: \"Javascript\",\n snippet: `<>\n {shortCode}\n</>`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview style={{ display: \"block\" }} snippets={snippetsDefault}>\n <IcAlert\n style={{ marginBottom: \"1rem\" }}\n heading=\"Americano order\"\n message=\"Preparation status is unavailable.\"\n />\n <IcAlert\n style={{ marginBottom: \"1rem\" }}\n variant=\"info\"\n heading=\"Did you know?\"\n message=\"Coffee is a brewed drink prepared from roasted coffee beans.\"\n />\n <IcAlert\n style={{ marginBottom: \"1rem\" }}\n variant=\"error\"\n heading=\"Americano order error\"\n message=\"Americano couldn't be made, we ran out of beans.\"\n />\n <IcAlert\n style={{ marginBottom: \"1rem\" }}\n variant=\"warning\"\n heading=\"Hot drink\"\n message=\"Please be careful the drink is hot.\"\n />\n <IcAlert\n style={{ marginBottom: \"1rem\" }}\n variant=\"success\"\n heading=\"Americano order complete\"\n message=\"Success, your coffee is good to go.\"\n />\n</ComponentPreview>\n\n## Alert details\n\n<ComponentDetails component=\"ic-alert\" />\n\n## Variants\n\n### Dismissible\n\nexport const snippetsDismissible = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-alert\n heading=\"Americano order nearly ready\"\n message=\"Your coffee is nearly ready. We'll send you another alert once it is complete.\"\n dismissible=\"true\"\n></ic-alert>`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcAlert \n heading=\"Americano order nearly ready\" \n message=\"Your coffee is nearly ready. We'll send you another alert once it is complete.\" \n dismissible\n/>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `{shortCode}`,\n },\n {\n language: \"Javascript\",\n snippet: `{shortCode}`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={snippetsDismissible}>\n <IcAlert\n heading=\"Americano order nearly ready\"\n message=\"Your coffee is nearly ready. We'll send you another alert once it is complete.\"\n dismissible\n />\n</ComponentPreview>\n\n### With action\n\nexport const snippetsWithAction = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-alert variant=\"info\" heading=\"Did you know?\" message=\"There is a new range of coffees to try.\">\n <ic-button slot=\"action\" variant=\"secondary\" appearance=\"dark\">View Drinks</ic-button></ic-alert>`,\n long: `{shortCode}\n<script>\n const btn = document.querySelector('ic-button');\n btn.addEventListener('click', (ev) => {\n console.log(ev)\n })\n</script>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcAlert \n variant=\"info\" \n heading=\"Did you know?\" \n message=\"There is a new range of coffees to try.\"\n>\n <IcButton \n slot=\"action\" \n variant=\"secondary\" \n appearance=\"dark\" \n onClick={(ev) => console.log(ev)}\n >\n View Drinks\n </IcButton>\n</IcAlert>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `{shortCode}`,\n },\n {\n language: \"Javascript\",\n snippet: `{shortCode}`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={snippetsWithAction}>\n <IcAlert\n variant=\"info\"\n heading=\"Did you know?\"\n message=\"There is a new range of coffees to try.\"\n >\n <IcButton\n slot=\"action\"\n variant=\"secondary\"\n appearance=\"dark\"\n onClick={(ev) => console.log(ev)}\n >\n View Drinks\n </IcButton>\n </IcAlert>\n</ComponentPreview>\n\n### Title above\n\nexport const snippetsTitleAbove = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-alert \n heading=\"What is Coffee?\" \n message=\"Coffee is a brewed drink prepared from roasted coffee beans, the seeds of berries from certain flowering plants in the Coffea genus.\" \n title-above=\"true\" \n variant=\"info\"\n></ic-alert>`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcAlert \n heading=\"What is Coffee?\" \n message=\"Coffee is a brewed drink prepared from roasted coffee beans, the seeds of berries from certain flowering plants in the Coffea genus.\" \n titleAbove \n variant=\"info\"\n/>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `{shortCode}`,\n },\n {\n language: \"Javascript\",\n snippet: `{shortCode}`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={snippetsTitleAbove}>\n <IcAlert\n heading=\"What is Coffee?\"\n message=\"Coffee is a brewed drink prepared from roasted coffee beans, the seeds of berries from certain flowering plants in the Coffea genus.\"\n titleAbove\n variant=\"info\"\n />\n</ComponentPreview>\n\n### Responsive title\n\nexport const snippetsResponsiveTitle = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-alert \n heading=\"Here you can find out lots more information about the world's favourite hot drink.\" \n message=\"Coffee is a brewed drink prepared from roasted coffee beans, the seeds of berries from certain flowering plants in the Coffea genus. From the coffee fruit, the seeds are separated to produce a stable, raw product: unroasted green coffee.\"\n variant=\"info\"\n></ic-alert>`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcAlert \n heading=\"Here you can find out lots more information about the world's favourite hot drink.\" \n message=\"Coffee is a brewed drink prepared from roasted coffee beans, the seeds of berries from certain flowering plants in the Coffea genus. From the coffee fruit, the seeds are separated to produce a stable, raw product: unroasted green coffee.\" \n variant=\"info\"\n/>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `{shortCode}`,\n },\n {\n language: \"Javascript\",\n snippet: `{shortCode}`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={snippetsResponsiveTitle}>\n <IcAlert\n heading=\"Here you can find out lots more information about the world's favourite hot drink.\"\n message=\"Coffee is a brewed drink prepared from roasted coffee beans, the seeds of berries from certain flowering plants in the Coffea genus. From the coffee fruit, the seeds are separated to produce a stable, raw product: unroasted green coffee.\"\n variant=\"info\"\n />\n</ComponentPreview>\n\n### Custom message\n\nexport const snippetsCustomMessage = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-alert variant=\"info\" heading=\"Want to know more about our coffee?\">\n <span slot=\"message\"> Go to our <ic-link href=\"/\">coffee page</ic-link> to learn more.</span></ic-alert>`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcAlert variant=\"info\" heading=\"Want to know more about our coffee?\">\n <span slot=\"message\"> Go to our <IcLink href=\"/\">coffee page</IcLink> to learn more.</span>\n</IcAlert>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `{shortCode}`,\n },\n {\n language: \"Javascript\",\n snippet: `{shortCode}`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={snippetsCustomMessage}>\n <IcAlert variant=\"info\" heading=\"Want to know more about our coffee?\">\n <span\n slot=\"message\"\n style={{\n font: \"var(--ic-font-body)\",\n letterSpacing: \"var(--ic-font-letter-spacing-0pt005)\",\n }}\n >\n Got to our{\" \"}\n <IcLink href=\"#\" onClick={(e) => e.preventDefault()}>\n coffee page\n </IcLink>{\" \"}\n to learn more.\n </span>\n </IcAlert>\n</ComponentPreview>\n",
+ "contents": "\r\n## Component demo\r\n\r\nimport { IcAlert, IcButton, IcLink } from \"@ukic/react\";\r\n\r\nexport const snippetsDefault = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-alert\r\n heading=\"Americano order\"\r\n message=\"Preparation status is unavailable.\"\r\n></ic-alert>\r\n<ic-alert\r\n variant=\"info\"\r\n heading=\"Did you know?\"\r\n message=\"Coffee is a brewed drink prepared from roasted coffee beans.\"\r\n></ic-alert>\r\n<ic-alert\r\n variant=\"error\"\r\n heading=\"Americano order error\"\r\n message=\"Americano couldn't be made, we ran out of beans.\"\r\n></ic-alert>\r\n<ic-alert\r\n variant=\"warning\"\r\n heading=\"Hot drink\"\r\n message=\"Please be careful the drink is hot.\"\r\n></ic-alert>\r\n<ic-alert\r\n variant=\"success\"\r\n heading=\"Americano order complete\"\r\n message=\"Success, your coffee is good to go.\"\r\n></ic-alert>`,\r\n long: `{shortCode}`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcAlert\r\n heading=\"Americano order\"\r\n message=\"Preparation status is unavailable.\"\r\n/>\r\n<IcAlert\r\n variant=\"info\"\r\n heading=\"Did you know?\"\r\n message=\"Coffee is a brewed drink prepared from roasted coffee beans.\"\r\n/>\r\n<IcAlert\r\n variant=\"error\"\r\n heading=\"Americano order error\"\r\n message=\"Americano couldn't be made, we ran out of beans.\"\r\n/>\r\n<IcAlert\r\n variant=\"warning\"\r\n heading=\"Hot drink\"\r\n message=\"Please be careful the drink is hot.\"\r\n/>\r\n<IcAlert\r\n variant=\"success\"\r\n heading=\"Americano order complete\"\r\n message=\"Success, your coffee is good to go.\"\r\n/>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `<>\r\n {shortCode}\r\n</>`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `<>\r\n {shortCode}\r\n</>`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview style={{ display: \"block\" }} snippets={snippetsDefault}>\r\n <IcAlert\r\n style={{ marginBottom: \"1rem\" }}\r\n heading=\"Americano order\"\r\n message=\"Preparation status is unavailable.\"\r\n />\r\n <IcAlert\r\n style={{ marginBottom: \"1rem\" }}\r\n variant=\"info\"\r\n heading=\"Did you know?\"\r\n message=\"Coffee is a brewed drink prepared from roasted coffee beans.\"\r\n />\r\n <IcAlert\r\n style={{ marginBottom: \"1rem\" }}\r\n variant=\"error\"\r\n heading=\"Americano order error\"\r\n message=\"Americano couldn't be made, we ran out of beans.\"\r\n />\r\n <IcAlert\r\n style={{ marginBottom: \"1rem\" }}\r\n variant=\"warning\"\r\n heading=\"Hot drink\"\r\n message=\"Please be careful the drink is hot.\"\r\n />\r\n <IcAlert\r\n style={{ marginBottom: \"1rem\" }}\r\n variant=\"success\"\r\n heading=\"Americano order complete\"\r\n message=\"Success, your coffee is good to go.\"\r\n />\r\n</ComponentPreview>\r\n\r\n## Alert details\r\n\r\n<ComponentDetails component=\"ic-alert\" />\r\n\r\n## Variants\r\n\r\n### Dismissible\r\n\r\nexport const snippetsDismissible = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-alert\r\n heading=\"Americano order nearly ready\"\r\n message=\"Your coffee is nearly ready. We'll send you another alert once it is complete.\"\r\n dismissible=\"true\"\r\n></ic-alert>`,\r\n long: `{shortCode}`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcAlert \r\n heading=\"Americano order nearly ready\" \r\n message=\"Your coffee is nearly ready. We'll send you another alert once it is complete.\" \r\n dismissible\r\n/>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `{shortCode}`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `{shortCode}`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview snippets={snippetsDismissible}>\r\n <IcAlert\r\n heading=\"Americano order nearly ready\"\r\n message=\"Your coffee is nearly ready. We'll send you another alert once it is complete.\"\r\n dismissible\r\n />\r\n</ComponentPreview>\r\n\r\n### With action\r\n\r\nexport const snippetsWithAction = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-alert variant=\"info\" heading=\"Did you know?\" message=\"There is a new range of coffees to try.\">\r\n <ic-button slot=\"action\" variant=\"secondary\" appearance=\"dark\">View Drinks</ic-button></ic-alert>`,\r\n long: `{shortCode}\r\n<script>\r\n const btn = document.querySelector('ic-button');\r\n btn.addEventListener('click', (ev) => {\r\n console.log(ev)\r\n })\r\n</script>`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcAlert \r\n variant=\"info\" \r\n heading=\"Did you know?\" \r\n message=\"There is a new range of coffees to try.\"\r\n>\r\n <IcButton \r\n slot=\"action\" \r\n variant=\"secondary\" \r\n appearance=\"dark\" \r\n onClick={(ev) => console.log(ev)}\r\n >\r\n View Drinks\r\n </IcButton>\r\n</IcAlert>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `{shortCode}`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `{shortCode}`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview snippets={snippetsWithAction}>\r\n <IcAlert\r\n variant=\"info\"\r\n heading=\"Did you know?\"\r\n message=\"There is a new range of coffees to try.\"\r\n >\r\n <IcButton\r\n slot=\"action\"\r\n variant=\"secondary\"\r\n appearance=\"dark\"\r\n onClick={(ev) => console.log(ev)}\r\n >\r\n View Drinks\r\n </IcButton>\r\n </IcAlert>\r\n</ComponentPreview>\r\n\r\n### Title above\r\n\r\nexport const snippetsTitleAbove = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-alert \r\n heading=\"What is Coffee?\" \r\n message=\"Coffee is a brewed drink prepared from roasted coffee beans, the seeds of berries from certain flowering plants in the Coffea genus.\" \r\n title-above=\"true\" \r\n variant=\"info\"\r\n></ic-alert>`,\r\n long: `{shortCode}`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcAlert \r\n heading=\"What is Coffee?\" \r\n message=\"Coffee is a brewed drink prepared from roasted coffee beans, the seeds of berries from certain flowering plants in the Coffea genus.\" \r\n titleAbove \r\n variant=\"info\"\r\n/>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `{shortCode}`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `{shortCode}`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview snippets={snippetsTitleAbove}>\r\n <IcAlert\r\n heading=\"What is Coffee?\"\r\n message=\"Coffee is a brewed drink prepared from roasted coffee beans, the seeds of berries from certain flowering plants in the Coffea genus.\"\r\n titleAbove\r\n variant=\"info\"\r\n />\r\n</ComponentPreview>\r\n\r\n### Responsive title\r\n\r\nexport const snippetsResponsiveTitle = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-alert \r\n heading=\"Here you can find out lots more information about the world's favourite hot drink.\" \r\n message=\"Coffee is a brewed drink prepared from roasted coffee beans, the seeds of berries from certain flowering plants in the Coffea genus. From the coffee fruit, the seeds are separated to produce a stable, raw product: unroasted green coffee.\"\r\n variant=\"info\"\r\n></ic-alert>`,\r\n long: `{shortCode}`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcAlert \r\n heading=\"Here you can find out lots more information about the world's favourite hot drink.\" \r\n message=\"Coffee is a brewed drink prepared from roasted coffee beans, the seeds of berries from certain flowering plants in the Coffea genus. From the coffee fruit, the seeds are separated to produce a stable, raw product: unroasted green coffee.\" \r\n variant=\"info\"\r\n/>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `{shortCode}`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `{shortCode}`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview snippets={snippetsResponsiveTitle}>\r\n <IcAlert\r\n heading=\"Here you can find out lots more information about the world's favourite hot drink.\"\r\n message=\"Coffee is a brewed drink prepared from roasted coffee beans, the seeds of berries from certain flowering plants in the Coffea genus. From the coffee fruit, the seeds are separated to produce a stable, raw product: unroasted green coffee.\"\r\n variant=\"info\"\r\n />\r\n</ComponentPreview>\r\n\r\n### Custom message\r\n\r\nexport const snippetsCustomMessage = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-alert variant=\"info\" heading=\"Want to know more about our coffee?\">\r\n <span slot=\"message\"> Go to our <ic-link href=\"/\">coffee page</ic-link> to learn more.</span></ic-alert>`,\r\n long: `{shortCode}`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcAlert variant=\"info\" heading=\"Want to know more about our coffee?\">\r\n <span slot=\"message\"> Go to our <IcLink href=\"/\">coffee page</IcLink> to learn more.</span>\r\n</IcAlert>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `{shortCode}`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `{shortCode}`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview snippets={snippetsCustomMessage}>\r\n <IcAlert variant=\"info\" heading=\"Want to know more about our coffee?\">\r\n <span\r\n slot=\"message\"\r\n style={{\r\n font: \"var(--ic-font-body)\",\r\n letterSpacing: \"var(--ic-font-letter-spacing-0pt005)\",\r\n }}\r\n >\r\n Go to our{\" \"}\r\n <IcLink href=\"#\" onClick={(e) => e.preventDefault()}>\r\n coffee page\r\n </IcLink>{\" \"}\r\n to learn more.\r\n </span>\r\n </IcAlert>\r\n</ComponentPreview>\r\n\r\n### With custom icon\r\n\r\nexport const snippetsCustomIcon = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-alert \r\n variant=\"neutral\" \r\n heading=\"Increased wait times\" \r\n message=\"Due to unprecedented coffee demand, wait times may be longer than usual.\"\r\n>\r\n <svg\r\n slot=\"neutral-icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n width=\"24\"\r\n fill=\"#000000\"\r\n >\r\n <path d=\"M12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22C6.47,22 2,17.5 2,12A10,10 0 0,1 12,2M12.5,7V12.25L17,14.92L16.25,16.15L11,13V7H12.5Z\"/>\r\n </svg>\r\n</ic-alert>`,\r\n long: `{shortCode}`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcAlert \r\n variant=\"neutral\" \r\n heading=\"Increased wait times\" \r\n message=\"Due to unprecedented coffee demand, wait times may be longer than usual.\"\r\n>\r\n <SlottedSVG\r\n slot=\"neutral-icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n width=\"24\"\r\n fill=\"#000000\"\r\n >\r\n <path d=\"M12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22C6.47,22 2,17.5 2,12A10,10 0 0,1 12,2M12.5,7V12.25L17,14.92L16.25,16.15L11,13V7H12.5Z\"/>\r\n </SlottedSVG>\r\n</IcAlert>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `{shortCode}`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `{shortCode}`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview snippets={snippetsCustomIcon}>\r\n <IcAlert\r\n variant=\"neutral\"\r\n heading=\"Increased wait times\"\r\n message=\"Due to unprecedented coffee demand, wait times may be longer than usual.\"\r\n >\r\n <svg\r\n slot=\"neutral-icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n width=\"24\"\r\n fill=\"#000000\"\r\n >\r\n <path d=\"M12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22C6.47,22 2,17.5 2,12A10,10 0 0,1 12,2M12.5,7V12.25L17,14.92L16.25,16.15L11,13V7H12.5Z\" />\r\n </svg>\r\n </IcAlert>\r\n</ComponentPreview>\r\n\r\n### With no icon\r\n\r\nexport const snippetsNoIcon = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-alert \r\n heading=\"Order queued\" \r\n show-default-icon=\"false\"\r\n message=\"Your coffee order is in the queue. We'll notify you when it's ready to be picked up.\"\r\n></ic-alert>`,\r\n long: `{shortCode}`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcAlert \r\n heading=\"Order queued\" \r\n showDefaultIcon=\"false\"\r\n message=\"Your coffee order is in the queue. We'll notify you when it's ready to be picked up.\"\r\n></IcAlert>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `{shortCode}`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `{shortCode}`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview snippets={snippetsNoIcon}>\r\n <IcAlert\r\n heading=\"Order queued\"\r\n showDefaultIcon=\"false\"\r\n message=\"Your coffee order is in the queue. We'll notify you when it's ready to be picked up.\"\r\n />\r\n</ComponentPreview>\r\n",
"path": "/components/alert/code",
"date": "2024-05-31",
"title": "Alert",
@@ -872,11 +872,11 @@
}
],
"meta": {
- "relativePath": "components/alerts/code.mdx",
- "createdAt": "2024-11-06T10:27:49.404Z",
- "lastModified": "2024-11-06T10:18:59.920Z",
- "size": 9736,
- "formattedSize": "9.5 KB"
+ "relativePath": "components\\alerts\\code.mdx",
+ "createdAt": "2024-12-04T13:23:54.057Z",
+ "lastModified": "2024-12-04T13:23:54.057Z",
+ "size": 13418,
+ "formattedSize": "13.1 KB"
}
},
{
@@ -905,9 +905,9 @@
],
"tags": ["Notification", "Feedback", "Message", "Banner", "Callout"],
"meta": {
- "relativePath": "components/alerts/guidance.mdx",
- "createdAt": "2024-11-06T10:27:49.404Z",
- "lastModified": "2024-11-06T10:18:59.920Z",
+ "relativePath": "components\\alerts\\guidance.mdx",
+ "createdAt": "2024-11-05T11:57:50.139Z",
+ "lastModified": "2024-11-05T11:57:50.139Z",
"size": 4693,
"formattedSize": "4.6 KB"
}
@@ -936,9 +936,9 @@
}
],
"meta": {
- "relativePath": "components/back-to-top/accessibility.mdx",
- "createdAt": "2024-11-06T10:27:49.408Z",
- "lastModified": "2024-11-06T10:18:59.924Z",
+ "relativePath": "components\\back-to-top\\accessibility.mdx",
+ "createdAt": "2024-11-05T11:57:50.163Z",
+ "lastModified": "2024-11-05T11:57:50.163Z",
"size": 3061,
"formattedSize": "3.0 KB"
}
@@ -967,9 +967,9 @@
}
],
"meta": {
- "relativePath": "components/back-to-top/code.mdx",
- "createdAt": "2024-11-06T10:27:49.408Z",
- "lastModified": "2024-11-06T10:18:59.924Z",
+ "relativePath": "components\\back-to-top\\code.mdx",
+ "createdAt": "2024-11-05T11:57:50.182Z",
+ "lastModified": "2024-11-05T11:57:50.182Z",
"size": 1619,
"formattedSize": "1.6 KB"
}
@@ -1000,9 +1000,9 @@
],
"tags": ["Button", "Anchor", "Scroll to top"],
"meta": {
- "relativePath": "components/back-to-top/guidance.mdx",
- "createdAt": "2024-11-06T10:27:49.408Z",
- "lastModified": "2024-11-06T10:18:59.924Z",
+ "relativePath": "components\\back-to-top\\guidance.mdx",
+ "createdAt": "2024-11-05T11:57:50.217Z",
+ "lastModified": "2024-11-05T11:57:50.217Z",
"size": 5450,
"formattedSize": "5.3 KB"
}
@@ -1031,16 +1031,16 @@
}
],
"meta": {
- "relativePath": "components/badge/accessibility.mdx",
- "createdAt": "2024-11-06T10:27:49.404Z",
- "lastModified": "2024-11-06T10:18:59.924Z",
+ "relativePath": "components\\badge\\accessibility.mdx",
+ "createdAt": "2024-11-05T11:57:50.242Z",
+ "lastModified": "2024-11-05T11:57:50.242Z",
"size": 2448,
"formattedSize": "2.4 KB"
}
},
{
"id": "components\\badge\\codex",
- "contents": "\nimport {\n IcButton,\n IcBadge,\n SlottedSVG,\n IcChip,\n IcTab,\n IcTabPanel,\n IcTabContext,\n IcTabGroup,\n} from \"@ukic/react\";\nimport { useState } from \"react\";\n\n## Component demo\n\nexport const snippetsDefault = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-button variant=\"secondary\">\n <ic-badge\n text-label=\"1000\"\n max-number=\"99\"\n slot=\"badge\"\n variant=\"info\"\n ></ic-badge>\n Coffee orders\n</ic-button>`,\n long: `.parent-container {\n padding: var(--ic-space-md);\n }\n</style>\n<body>\n <div class=\"parent-container\">\n {shortCode}\n </div>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcButton variant=\"secondary\">\n <IcBadge textLabel=\"1000\" maxNumber={99} slot=\"badge\" variant=\"info\"/>\n Coffee orders\n</IcButton>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n padding: \"var(--ic-space-md)\",\n },\n});\nconst classes = useStyles();\nreturn (\n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n padding: \"var(--ic-space-md)\",\n },\n});\nconst classes = useStyles();\nreturn (\n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={snippetsDefault}>\n <IcButton variant=\"secondary\">\n <IcBadge textLabel=\"1000\" maxNumber={99} slot=\"badge\" variant=\"info\" />\n Coffee orders\n </IcButton>\n</ComponentPreview>\n\n## Badge details\n\n<ComponentDetails component=\"ic-badge\" />\n\n## Variants\n\n### Sizes\n\nexport const snippetsSizes = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-button size=\"small\" variant=\"secondary\">\n <ic-badge text-label=\"8\" slot=\"badge\" variant=\"info\"></ic-badge>\n Coffee orders\n</ic-button>\n<ic-button variant=\"secondary\">\n <ic-badge text-label=\"8\" slot=\"badge\" variant=\"info\"></ic-badge>\n Coffee orders\n</ic-button>\n<ic-button size=\"large\" variant=\"secondary\">\n <ic-badge size=\"large\" text-label=\"8\" slot=\"badge\" variant=\"info\"></ic-badge>\n Coffee orders\n</ic-button>`,\n long: `.parent-container {\n display: flex;\n flex-wrap: wrap;\n padding: var(--ic-space-md);\n gap: var(--ic-space-md);\n }\n</style>\n<body>\n <div class=\"parent-container\">\n {shortCode}\n </div>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcButton size=\"small\" variant=\"secondary\">\n <IcBadge size=\"small\" textLabel=\"8\" slot=\"badge\" variant=\"info\"/>\n Coffee orders\n</IcButton>\n<IcButton variant=\"secondary\">\n <IcBadge textLabel=\"8\" slot=\"badge\" variant=\"info\"/>\n Coffee orders\n</IcButton>\n<IcButton size=\"large\" variant=\"secondary\">\n <IcBadge size=\"large\" textLabel=\"8\" slot=\"badge\" variant=\"info\"/>\n Coffee orders\n</IcButton>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({ \n parentContainer: {\n display: \"flex\",\n flexWrap: \"wrap\",\n padding: \"var(--ic-space-md)\",\n gap: \"var(--ic-space-md)\",\n },\n});\nconst classes = useStyles();\nreturn (\n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({ \n parentContainer: {\n display: \"flex\",\n flexWrap: \"wrap\",\n padding: \"var(--ic-space-md)\",\n gap: \"var(--ic-space-md)\",\n },\n});\nconst classes = useStyles();\nreturn (\n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={snippetsSizes} style={{ gap: \"1rem\" }}>\n <IcButton size=\"small\" variant=\"secondary\">\n <IcBadge textLabel=\"8\" slot=\"badge\" variant=\"info\" size=\"small\" />\n Coffee orders\n </IcButton>\n <IcButton variant=\"secondary\">\n <IcBadge textLabel=\"8\" slot=\"badge\" variant=\"info\" size=\"default\" />\n Coffee orders\n </IcButton>\n <IcButton size=\"large\" variant=\"secondary\">\n <IcBadge textLabel=\"8\" slot=\"badge\" variant=\"info\" size=\"large\" />\n Coffee orders\n </IcButton>\n</ComponentPreview>\n\n### Status\n\nexport const snippetsStatus = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-button variant=\"secondary\">\n <ic-badge slot=\"badge\" text-label=\"8\" variant=\"neutral\"></ic-badge>\n Coffee orders\n</ic-button>\n<ic-button variant=\"secondary\">\n <ic-badge slot=\"badge\" text-label=\"New\" variant=\"info\"></ic-badge>\n Coffee orders\n</ic-button>\n<ic-button variant=\"secondary\">\n <ic-badge slot=\"badge\" text-label=\"Unavailable\" variant=\"error\"></ic-badge>\n Coffee orders\n</ic-button>\n<ic-button variant=\"secondary\">\n <ic-badge slot=\"badge\" text-label=\"Available\" variant=\"success\"></ic-badge>\n Coffee orders\n</ic-button>`,\n long: `.parent-container {\n display: flex;\n flex-wrap: wrap;\n padding: var(--ic-space-md);\n gap: var(--ic-space-md);\n }\n</style>\n<body>\n <div class=\"parent-container\">\n {shortCode}\n </div>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcButton variant=\"secondary\">\n <IcBadge slot=\"badge\" textLabel=\"8\" variant=\"neutral\"/>\n Coffee orders\n</IcButton>\n<IcButton variant=\"secondary\">\n <IcBadge slot=\"badge\" textLabel=\"New\" variant=\"info\"/>\n Coffee orders\n</IcButton>\n<IcButton variant=\"secondary\">\n <IcBadge slot=\"badge\" textLabel=\"Unavailable\" variant=\"error\"/>\n Coffee orders\n</IcButton>\n<IcButton variant=\"secondary\">\n <IcBadge slot=\"badge\" textLabel=\"Available\" variant=\"success\"/>\n Coffee orders\n</IcButton>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n display: \"flex\",\n flexWrap: \"wrap\",\n padding: \"var(--ic-space-md)\",\n gap: \"var(--ic-space-md)\",\n },\n});\nconst classes = useStyles();\nreturn (\n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n display: \"flex\",\n flexWrap: \"wrap\",\n padding: \"var(--ic-space-md)\",\n gap: \"var(--ic-space-md)\",\n },\n});\nconst classes = useStyles();\nreturn (\n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={snippetsStatus} style={{ gap: \"1rem\" }}>\n <IcButton variant=\"secondary\">\n <IcBadge slot=\"badge\" textLabel=\"8\" variant=\"neutral\" />\n Coffee orders\n </IcButton>\n <IcButton variant=\"secondary\">\n <IcBadge slot=\"badge\" textLabel=\"New\" variant=\"info\" />\n Coffee orders\n </IcButton>\n <IcButton variant=\"secondary\">\n <IcBadge slot=\"badge\" textLabel=\"Unavailable\" variant=\"error\" />\n Coffee orders\n </IcButton>\n <IcButton variant=\"secondary\">\n <IcBadge slot=\"badge\" textLabel=\"Available\" variant=\"success\" />\n Coffee orders\n </IcButton>\n</ComponentPreview>\n\n### Types\n\nexport const snippetsInformation = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-button variant=\"secondary\">\n <ic-badge slot=\"badge\" type=\"text\" text-label=\"8\" variant=\"info\"></ic-badge>\n Coffee orders\n</ic-button>\n<ic-button variant=\"secondary\">\n <ic-badge slot=\"badge\" type=\"dot\" variant=\"info\"></ic-badge>\n Coffee orders\n</ic-button>\n<ic-button variant=\"secondary\">\n<ic-badge type=\"icon\" slot=\"badge\" variant=\"info\">\n <svg\n slot=\"badge-icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n aria-label=\"retry\"\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-badge> \n Coffee orders\n</ic-button>`,\n long: `.parent-container {\n display: flex;\n flex-wrap: wrap;\n padding: var(--ic-space-md);\n gap: var(--ic-space-md);\n }\n</style>\n<body>\n <div class=\"parent-container\">\n {shortCode}\n </div>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcButton variant=\"secondary\">\n <IcBadge slot=\"badge\" type=\"text\" textLabel=\"8\" variant=\"info\"/>\n Coffee orders\n</IcButton>\n<IcButton variant=\"secondary\">\n <IcBadge slot=\"badge\" type=\"dot\" variant=\"info\"/>\n Coffee orders\n</IcButton>\n<IcButton variant=\"secondary\">\n <IcBadge type=\"icon\" slot=\"badge\" variant=\"info\">\n <SlottedSVG\n slot=\"badge-icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n aria-label=\"retry\"\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 </SlottedSVG>\n </IcBadge>\n Coffee orders\n</IcButton>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n display: \"flex\",\n flexWrap: \"wrap\",\n padding: \"var(--ic-space-md)\",\n gap: \"var(--ic-space-md)\",\n },\n});\nconst classes = useStyles();\nreturn (\n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n display: \"flex\",\n flexWrap: \"wrap\",\n padding: \"var(--ic-space-md)\",\n gap: \"var(--ic-space-md)\",\n },\n});\nconst classes = useStyles();\nreturn (\n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={snippetsInformation} style={{ gap: \"1rem\" }}>\n <IcButton variant=\"secondary\">\n <IcBadge textLabel=\"8\" slot=\"badge\" type=\"text\" variant=\"info\" />\n Coffee orders\n </IcButton>\n <IcButton variant=\"secondary\">\n <IcBadge type=\"dot\" slot=\"badge\" variant=\"info\" />\n Coffee orders\n </IcButton>\n <IcButton variant=\"secondary\">\n <IcBadge type=\"icon\" slot=\"badge\" variant=\"info\">\n <SlottedSVG\n width=\"24\"\n height=\"24\"\n slot=\"badge-icon\"\n viewBox=\"0 0 24 24\"\n aria-label=\"retry\"\n >\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n <path d=\"M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z\" />\n </SlottedSVG>\n </IcBadge>\n Coffee orders\n </IcButton>\n</ComponentPreview>\n\n### Max number\n\nexport const snippetsMaxNumber = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-button variant=\"secondary\">\n <ic-badge\n text-label=\"1000\" \n max-number=\"99\" \n slot=\"badge\" \n variant=\"info\"\n ></ic-badge>\n Coffee orders\n</ic-button>`,\n long: `.parent-container {\n padding: var(--ic-space-md);\n }\n</style>\n<body>\n <div class=\"parent-container\">\n {shortCode}\n </div>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcButton variant=\"secondary\">\n <IcBadge\n textLabel=\"1000\"\n maxNumber={99}\n slot=\"badge\"\n variant=\"info\"\n />\n Coffee orders\n</IcButton>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n padding: \"var(--ic-space-md)\",\n },\n});\nconst classes = useStyles();\nreturn (\n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n padding: \"var(--ic-space-md)\",\n },\n});\nconst classes = useStyles();\nreturn (\n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={snippetsMaxNumber}>\n <IcButton variant=\"secondary\">\n <IcBadge textLabel=\"1000\" maxNumber={99} slot=\"badge\" variant=\"info\" />\n Coffee orders\n </IcButton>\n</ComponentPreview>\n\n### Positioning\n\nexport const snippetsNear = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-chip label=\"Americano\">\n <ic-badge type=\"icon\" slot=\"badge\" position=\"near\" variant=\"success\">\n <svg\n slot=\"badge-icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n aria-label=\"success\"\n >\n <path d=\"M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z\"/>\n </svg> \n </ic-badge>\n</ic-chip>\n<ic-chip label=\"Americano\">\n <ic-badge type=\"icon\" slot=\"badge\" position=\"far\" variant=\"success\">\n <svg\n slot=\"badge-icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n aria-label=\"success\"\n >\n <path d=\"M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z\"/>\n </svg> \n </ic-badge>\n</ic-chip>`,\n long: `.parent-container {\n display: flex;\n flex-wrap: wrap;\n padding: var(--ic-space-md);\n gap: var(--ic-space-md);\n }\n</style>\n<body>\n <div class=\"parent-container\">\n {shortCode}\n </div>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcChip label=\"Americano\">\n <IcBadge type=\"icon\" slot=\"badge\" position=\"near\" variant=\"success\">\n <SlottedSVG\n slot=\"badge-icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n aria-label=\"success\"\n >\n <path d=\"M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z\"/>\n </SlottedSVG> \n </IcBadge>\n</IcChip>\n <IcChip label=\"Americano\">\n <IcBadge type=\"icon\" slot=\"badge\" position=\"far\" variant=\"success\">\n <svg\n slot=\"badge-icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n aria-label=\"success\"\n >\n <path d=\"M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z\"/>\n </svg>\n </IcBadge> \n</IcChip>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n display: \"flex\",\n flexWrap: \"wrap\",\n padding: \"var(--ic-space-md)\",\n gap: \"var(--ic-space-md)\",\n },\n});\nconst classes = useStyles();\nreturn (\n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n display: \"flex\",\n flexWrap: \"wrap\",\n padding: \"var(--ic-space-md)\",\n gap: \"var(--ic-space-md)\",\n },\n});\nconst classes = useStyles();\nreturn (\n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={snippetsNear} style={{ gap: \"1rem\" }}>\n <IcChip label=\"Americano\">\n <IcBadge type=\"icon\" slot=\"badge\" position=\"near\" variant=\"success\">\n <SlottedSVG\n width=\"24\"\n height=\"24\"\n slot=\"badge-icon\"\n viewBox=\"0 0 24 24\"\n aria-label=\"success\"\n >\n <path d=\"M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z\" />\n </SlottedSVG>\n </IcBadge>\n </IcChip>\n <IcChip label=\"Americano\">\n <IcBadge type=\"icon\" slot=\"badge\" position=\"far\" variant=\"success\">\n <SlottedSVG\n width=\"24\"\n height=\"24\"\n slot=\"badge-icon\"\n viewBox=\"0 0 24 24\"\n aria-label=\"success\"\n >\n <path d=\"M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z\" />\n </SlottedSVG>\n </IcBadge>\n </IcChip>\n</ComponentPreview>\n\n### Position inline\n\nexport const snippetsInline = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-tab-context>\n <ic-tab-group label=\"Example tab group\">\n <ic-tab>\n About\n </ic-tab>\n <ic-tab>\n Ingredients\n </ic-tab>\n <ic-tab>\n <ic-badge\n text-label=\"8\"\n slot=\"badge\"\n position=\"inline\"\n size=\"large\"\n accessible-label=\"1 notification found\"\n variant=\"info\"\n ></ic-badge>\n Orders\n </ic-tab>\n </ic-tab-group>\n <ic-tab-panel>About page</ic-tab-panel>\n <ic-tab-panel>Ingredients page</ic-tab-panel>\n <ic-tab-panel>Orders page</ic-tab-panel>\n</ic-tab-context>`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcTabContext>\n <IcTabGroup label=\"Example tab group\">\n <IcTab>\n About\n </IcTab>\n <IcTab>\n Ingredients\n </IcTab>\n <IcTab>\n <IcBadge\n textLabel=\"8\"\n slot=\"badge\"\n position=\"inline\"\n size=\"large\"\n accessibleLabel=\"1 notification found\"\n variant=\"info\"\n />\n Orders\n </IcTab>\n </IcTabGroup>\n <IcTabPanel>About page</IcTabPanel>\n <IcTabPanel>Ingredients page</IcTabPanel>\n <IcTabPanel>Orders page</IcTabPanel>\n</IcTabContext>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `{shortCode}`,\n },\n {\n language: \"Javascript\",\n snippet: `{shortCode}`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={snippetsInline}>\n <IcTabContext>\n <IcTabGroup label=\"Example tab group\">\n <IcTab>About</IcTab>\n <IcTab>Ingredients</IcTab>\n <IcTab>\n Orders\n <IcBadge\n textLabel=\"8\"\n slot=\"badge\"\n position=\"inline\"\n size=\"large\"\n accessibleLabel=\"1 notification found\"\n variant=\"info\"\n />\n </IcTab>\n </IcTabGroup>\n <IcTabPanel>About page</IcTabPanel>\n <IcTabPanel>Ingredients page</IcTabPanel>\n <IcTabPanel>Orders page</IcTabPanel>\n </IcTabContext>\n</ComponentPreview>\n\n### Hide and show badge\n\nClick the button to hide and show the badge.\n\nexport const snippetsHideBadge = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-button variant=\"secondary\" onclick=\"showHideBadge()\">\n <ic-badge text-label=\"8\" slot=\"badge\"></ic-badge>\n Coffee orders\n</ic-button>`,\n long: `.parent-container {\n padding: var(--ic-space-md);\n }\n</style>\n<body>\n <div class=\"parent-container\">\n {shortCode}\n </div> \n <script>\n function showHideBadge() {\n badge = document.querySelector(\"ic-badge\");\n if (badge.classList.contains(\"show\")) {\n badge.visible = false;\n } else {\n badge.visible = true;\n }\n }\n </script>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcButton variant=\"secondary\" onClick={handleShowHideBadge}>\n <IcBadge\n variant=\"info\"\n textLabel=\"8\"\n slot=\"badge\"\n visible={showBadge}\n />\n Coffee orders\n</IcButton>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const [showBadge, setShowBadge] = useState<boolean>(false);\nconst handleShowHideBadge = () => {\n setShowBadge(!showBadge);\n};\nconst useStyles = createUseStyles({\n parentContainer: {\n padding: \"var(--ic-space-md)\",\n },\n});\nconst classes = useStyles();\nreturn (\n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const [showBadge, setShowBadge] = useState(false);\nconst handleShowHideBadge = () => {\n setShowBadge(!showBadge);\n};\nconst useStyles = createUseStyles({\n parentContainer: {\n padding: \"var(--ic-space-md)\",\n },\n});\nconst classes = useStyles();\nreturn (\n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n ],\n },\n },\n];\n\nexport const ToggleBadge = () => {\n const [showBadge, setShowBadge] = useState(false);\n const handleShowHideBadge = () => {\n setShowBadge(!showBadge);\n };\n return (\n <div style={{ padding: \"1rem\" }}>\n <IcButton variant=\"secondary\" onClick={handleShowHideBadge}>\n <IcBadge\n variant=\"info\"\n textLabel=\"8\"\n slot=\"badge\"\n visible={showBadge}\n />\n Coffee orders\n </IcButton>\n </div>\n );\n};\n\n<ComponentPreview\n style={{\n display: \"flex\",\n justifyContent: \"center\",\n }}\n snippets={snippetsHideBadge}\n>\n <ToggleBadge />\n</ComponentPreview>\n\n### Accessible label\n\nexport const snippetsAccessibleLabel = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-button variant=\"secondary\"> \n <ic-badge\n text-label=\"8\"\n slot=\"badge\"\n size=\"large\"\n variant=\"info\"\n accessible-label=\"8 coffee orders found\"\n >\n </ic-badge>\n Coffee orders\n</ic-button>`,\n long: `.parent-container {\n padding: var(--ic-space-md);\n}\n</style>\n<body>\n <div class=\"parent-container\">\n {shortCode}\n </div>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcButton variant=\"secondary\">\n <IcBadge\n textLabel=\"8\"\n slot=\"badge\"\n size=\"large\"\n variant=\"info\"\n accessibleLabel=\"8 coffee orders found\"\n />\n Coffee orders\n</IcButton>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n padding: \"var(--ic-space-md)\",\n },\n});\nconst classes = useStyles();\nreturn (\n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n padding: \"var(--ic-space-md)\",\n },\n});\nconst classes = useStyles();\nreturn (\n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={snippetsAccessibleLabel} style={{ gap: \"1rem\" }}>\n <IcButton variant=\"secondary\">\n <IcBadge\n textLabel=\"8\"\n slot=\"badge\"\n size=\"large\"\n accessibleLabel=\"8 coffee orders found\"\n variant=\"info\"\n />\n Coffee orders\n </IcButton>\n</ComponentPreview>\n",
+ "contents": "\r\nimport {\r\n IcButton,\r\n IcBadge,\r\n SlottedSVG,\r\n IcChip,\r\n IcTab,\r\n IcTabPanel,\r\n IcTabContext,\r\n IcTabGroup,\r\n} from \"@ukic/react\";\r\nimport { useState } from \"react\";\r\n\r\n## Component demo\r\n\r\nexport const snippetsDefault = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-button variant=\"secondary\">\r\n <ic-badge\r\n text-label=\"1000\"\r\n max-number=\"99\"\r\n slot=\"badge\"\r\n variant=\"info\"\r\n ></ic-badge>\r\n Coffee orders\r\n</ic-button>`,\r\n long: `.parent-container {\r\n padding: var(--ic-space-md);\r\n }\r\n</style>\r\n<body>\r\n <div class=\"parent-container\">\r\n {shortCode}\r\n </div>`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcButton variant=\"secondary\">\r\n <IcBadge textLabel=\"1000\" maxNumber={99} slot=\"badge\" variant=\"info\"/>\r\n Coffee orders\r\n</IcButton>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `const useStyles = createUseStyles({\r\n parentContainer: {\r\n padding: \"var(--ic-space-md)\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nreturn (\r\n <div className={classes.parentContainer}>\r\n {shortCode}\r\n </div>\r\n)`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `const useStyles = createUseStyles({\r\n parentContainer: {\r\n padding: \"var(--ic-space-md)\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nreturn (\r\n <div className={classes.parentContainer}>\r\n {shortCode}\r\n </div>\r\n)`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview snippets={snippetsDefault}>\r\n <IcButton variant=\"secondary\">\r\n <IcBadge textLabel=\"1000\" maxNumber={99} slot=\"badge\" variant=\"info\" />\r\n Coffee orders\r\n </IcButton>\r\n</ComponentPreview>\r\n\r\n## Badge details\r\n\r\n<ComponentDetails component=\"ic-badge\" />\r\n\r\n## Variants\r\n\r\n### Sizes\r\n\r\nexport const snippetsSizes = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-button size=\"small\" variant=\"secondary\">\r\n <ic-badge text-label=\"8\" slot=\"badge\" variant=\"info\"></ic-badge>\r\n Coffee orders\r\n</ic-button>\r\n<ic-button variant=\"secondary\">\r\n <ic-badge text-label=\"8\" slot=\"badge\" variant=\"info\"></ic-badge>\r\n Coffee orders\r\n</ic-button>\r\n<ic-button size=\"large\" variant=\"secondary\">\r\n <ic-badge size=\"large\" text-label=\"8\" slot=\"badge\" variant=\"info\"></ic-badge>\r\n Coffee orders\r\n</ic-button>`,\r\n long: `.parent-container {\r\n display: flex;\r\n flex-wrap: wrap;\r\n padding: var(--ic-space-md);\r\n gap: var(--ic-space-md);\r\n }\r\n</style>\r\n<body>\r\n <div class=\"parent-container\">\r\n {shortCode}\r\n </div>`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcButton size=\"small\" variant=\"secondary\">\r\n <IcBadge size=\"small\" textLabel=\"8\" slot=\"badge\" variant=\"info\"/>\r\n Coffee orders\r\n</IcButton>\r\n<IcButton variant=\"secondary\">\r\n <IcBadge textLabel=\"8\" slot=\"badge\" variant=\"info\"/>\r\n Coffee orders\r\n</IcButton>\r\n<IcButton size=\"large\" variant=\"secondary\">\r\n <IcBadge size=\"large\" textLabel=\"8\" slot=\"badge\" variant=\"info\"/>\r\n Coffee orders\r\n</IcButton>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `const useStyles = createUseStyles({ \r\n parentContainer: {\r\n display: \"flex\",\r\n flexWrap: \"wrap\",\r\n padding: \"var(--ic-space-md)\",\r\n gap: \"var(--ic-space-md)\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nreturn (\r\n <div className={classes.parentContainer}>\r\n {shortCode}\r\n </div>\r\n)`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `const useStyles = createUseStyles({ \r\n parentContainer: {\r\n display: \"flex\",\r\n flexWrap: \"wrap\",\r\n padding: \"var(--ic-space-md)\",\r\n gap: \"var(--ic-space-md)\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nreturn (\r\n <div className={classes.parentContainer}>\r\n {shortCode}\r\n </div>\r\n)`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview snippets={snippetsSizes} style={{ gap: \"1rem\" }}>\r\n <IcButton size=\"small\" variant=\"secondary\">\r\n <IcBadge textLabel=\"8\" slot=\"badge\" variant=\"info\" size=\"small\" />\r\n Coffee orders\r\n </IcButton>\r\n <IcButton variant=\"secondary\">\r\n <IcBadge textLabel=\"8\" slot=\"badge\" variant=\"info\" size=\"default\" />\r\n Coffee orders\r\n </IcButton>\r\n <IcButton size=\"large\" variant=\"secondary\">\r\n <IcBadge textLabel=\"8\" slot=\"badge\" variant=\"info\" size=\"large\" />\r\n Coffee orders\r\n </IcButton>\r\n</ComponentPreview>\r\n\r\n### Status\r\n\r\nexport const snippetsStatus = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-button variant=\"secondary\">\r\n <ic-badge slot=\"badge\" text-label=\"8\" variant=\"neutral\"></ic-badge>\r\n Coffee orders\r\n</ic-button>\r\n<ic-button variant=\"secondary\">\r\n <ic-badge slot=\"badge\" text-label=\"New\" variant=\"info\"></ic-badge>\r\n Coffee orders\r\n</ic-button>\r\n<ic-button variant=\"secondary\">\r\n <ic-badge slot=\"badge\" text-label=\"Unavailable\" variant=\"error\"></ic-badge>\r\n Coffee orders\r\n</ic-button>\r\n<ic-button variant=\"secondary\">\r\n <ic-badge slot=\"badge\" text-label=\"Available\" variant=\"success\"></ic-badge>\r\n Coffee orders\r\n</ic-button>`,\r\n long: `.parent-container {\r\n display: flex;\r\n flex-wrap: wrap;\r\n padding: var(--ic-space-md);\r\n gap: var(--ic-space-md);\r\n }\r\n</style>\r\n<body>\r\n <div class=\"parent-container\">\r\n {shortCode}\r\n </div>`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcButton variant=\"secondary\">\r\n <IcBadge slot=\"badge\" textLabel=\"8\" variant=\"neutral\"/>\r\n Coffee orders\r\n</IcButton>\r\n<IcButton variant=\"secondary\">\r\n <IcBadge slot=\"badge\" textLabel=\"New\" variant=\"info\"/>\r\n Coffee orders\r\n</IcButton>\r\n<IcButton variant=\"secondary\">\r\n <IcBadge slot=\"badge\" textLabel=\"Unavailable\" variant=\"error\"/>\r\n Coffee orders\r\n</IcButton>\r\n<IcButton variant=\"secondary\">\r\n <IcBadge slot=\"badge\" textLabel=\"Available\" variant=\"success\"/>\r\n Coffee orders\r\n</IcButton>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `const useStyles = createUseStyles({\r\n parentContainer: {\r\n display: \"flex\",\r\n flexWrap: \"wrap\",\r\n padding: \"var(--ic-space-md)\",\r\n gap: \"var(--ic-space-md)\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nreturn (\r\n <div className={classes.parentContainer}>\r\n {shortCode}\r\n </div>\r\n)`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `const useStyles = createUseStyles({\r\n parentContainer: {\r\n display: \"flex\",\r\n flexWrap: \"wrap\",\r\n padding: \"var(--ic-space-md)\",\r\n gap: \"var(--ic-space-md)\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nreturn (\r\n <div className={classes.parentContainer}>\r\n {shortCode}\r\n </div>\r\n)`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview snippets={snippetsStatus} style={{ gap: \"1rem\" }}>\r\n <IcButton variant=\"secondary\">\r\n <IcBadge slot=\"badge\" textLabel=\"8\" variant=\"neutral\" />\r\n Coffee orders\r\n </IcButton>\r\n <IcButton variant=\"secondary\">\r\n <IcBadge slot=\"badge\" textLabel=\"New\" variant=\"info\" />\r\n Coffee orders\r\n </IcButton>\r\n <IcButton variant=\"secondary\">\r\n <IcBadge slot=\"badge\" textLabel=\"Unavailable\" variant=\"error\" />\r\n Coffee orders\r\n </IcButton>\r\n <IcButton variant=\"secondary\">\r\n <IcBadge slot=\"badge\" textLabel=\"Available\" variant=\"success\" />\r\n Coffee orders\r\n </IcButton>\r\n</ComponentPreview>\r\n\r\n### Types\r\n\r\nexport const snippetsInformation = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-button variant=\"secondary\">\r\n <ic-badge slot=\"badge\" type=\"text\" text-label=\"8\" variant=\"info\"></ic-badge>\r\n Coffee orders\r\n</ic-button>\r\n<ic-button variant=\"secondary\">\r\n <ic-badge slot=\"badge\" type=\"dot\" variant=\"info\"></ic-badge>\r\n Coffee orders\r\n</ic-button>\r\n<ic-button variant=\"secondary\">\r\n<ic-badge type=\"icon\" slot=\"badge\" variant=\"info\">\r\n <svg\r\n slot=\"badge-icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n width=\"24\"\r\n aria-label=\"retry\"\r\n >\r\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\r\n <path\r\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\"\r\n />\r\n </svg>\r\n</ic-badge> \r\n Coffee orders\r\n</ic-button>`,\r\n long: `.parent-container {\r\n display: flex;\r\n flex-wrap: wrap;\r\n padding: var(--ic-space-md);\r\n gap: var(--ic-space-md);\r\n }\r\n</style>\r\n<body>\r\n <div class=\"parent-container\">\r\n {shortCode}\r\n </div>`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcButton variant=\"secondary\">\r\n <IcBadge slot=\"badge\" type=\"text\" textLabel=\"8\" variant=\"info\"/>\r\n Coffee orders\r\n</IcButton>\r\n<IcButton variant=\"secondary\">\r\n <IcBadge slot=\"badge\" type=\"dot\" variant=\"info\"/>\r\n Coffee orders\r\n</IcButton>\r\n<IcButton variant=\"secondary\">\r\n <IcBadge type=\"icon\" slot=\"badge\" variant=\"info\">\r\n <SlottedSVG\r\n slot=\"badge-icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n width=\"24\"\r\n aria-label=\"retry\"\r\n >\r\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\r\n <path\r\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\"\r\n />\r\n </SlottedSVG>\r\n </IcBadge>\r\n Coffee orders\r\n</IcButton>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `const useStyles = createUseStyles({\r\n parentContainer: {\r\n display: \"flex\",\r\n flexWrap: \"wrap\",\r\n padding: \"var(--ic-space-md)\",\r\n gap: \"var(--ic-space-md)\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nreturn (\r\n <div className={classes.parentContainer}>\r\n {shortCode}\r\n </div>\r\n)`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `const useStyles = createUseStyles({\r\n parentContainer: {\r\n display: \"flex\",\r\n flexWrap: \"wrap\",\r\n padding: \"var(--ic-space-md)\",\r\n gap: \"var(--ic-space-md)\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nreturn (\r\n <div className={classes.parentContainer}>\r\n {shortCode}\r\n </div>\r\n)`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview snippets={snippetsInformation} style={{ gap: \"1rem\" }}>\r\n <IcButton variant=\"secondary\">\r\n <IcBadge textLabel=\"8\" slot=\"badge\" type=\"text\" variant=\"info\" />\r\n Coffee orders\r\n </IcButton>\r\n <IcButton variant=\"secondary\">\r\n <IcBadge type=\"dot\" slot=\"badge\" variant=\"info\" />\r\n Coffee orders\r\n </IcButton>\r\n <IcButton variant=\"secondary\">\r\n <IcBadge type=\"icon\" slot=\"badge\" variant=\"info\">\r\n <SlottedSVG\r\n width=\"24\"\r\n height=\"24\"\r\n slot=\"badge-icon\"\r\n viewBox=\"0 0 24 24\"\r\n aria-label=\"retry\"\r\n >\r\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\r\n <path d=\"M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z\" />\r\n </SlottedSVG>\r\n </IcBadge>\r\n Coffee orders\r\n </IcButton>\r\n</ComponentPreview>\r\n\r\n### Max number\r\n\r\nexport const snippetsMaxNumber = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-button variant=\"secondary\">\r\n <ic-badge\r\n text-label=\"1000\" \r\n max-number=\"99\" \r\n slot=\"badge\" \r\n variant=\"info\"\r\n ></ic-badge>\r\n Coffee orders\r\n</ic-button>`,\r\n long: `.parent-container {\r\n padding: var(--ic-space-md);\r\n }\r\n</style>\r\n<body>\r\n <div class=\"parent-container\">\r\n {shortCode}\r\n </div>`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcButton variant=\"secondary\">\r\n <IcBadge\r\n textLabel=\"1000\"\r\n maxNumber={99}\r\n slot=\"badge\"\r\n variant=\"info\"\r\n />\r\n Coffee orders\r\n</IcButton>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `const useStyles = createUseStyles({\r\n parentContainer: {\r\n padding: \"var(--ic-space-md)\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nreturn (\r\n <div className={classes.parentContainer}>\r\n {shortCode}\r\n </div>\r\n)`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `const useStyles = createUseStyles({\r\n parentContainer: {\r\n padding: \"var(--ic-space-md)\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nreturn (\r\n <div className={classes.parentContainer}>\r\n {shortCode}\r\n </div>\r\n)`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview snippets={snippetsMaxNumber}>\r\n <IcButton variant=\"secondary\">\r\n <IcBadge textLabel=\"1000\" maxNumber={99} slot=\"badge\" variant=\"info\" />\r\n Coffee orders\r\n </IcButton>\r\n</ComponentPreview>\r\n\r\n### Positioning\r\n\r\nexport const snippetsNear = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-chip label=\"Americano\">\r\n <ic-badge type=\"icon\" slot=\"badge\" position=\"near\" variant=\"success\">\r\n <svg\r\n slot=\"badge-icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n width=\"24\"\r\n aria-label=\"success\"\r\n >\r\n <path d=\"M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z\"/>\r\n </svg> \r\n </ic-badge>\r\n</ic-chip>\r\n<ic-chip label=\"Americano\">\r\n <ic-badge type=\"icon\" slot=\"badge\" position=\"far\" variant=\"success\">\r\n <svg\r\n slot=\"badge-icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n width=\"24\"\r\n aria-label=\"success\"\r\n >\r\n <path d=\"M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z\"/>\r\n </svg> \r\n </ic-badge>\r\n</ic-chip>`,\r\n long: `.parent-container {\r\n display: flex;\r\n flex-wrap: wrap;\r\n padding: var(--ic-space-md);\r\n gap: var(--ic-space-md);\r\n }\r\n</style>\r\n<body>\r\n <div class=\"parent-container\">\r\n {shortCode}\r\n </div>`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcChip label=\"Americano\">\r\n <IcBadge type=\"icon\" slot=\"badge\" position=\"near\" variant=\"success\">\r\n <SlottedSVG\r\n slot=\"badge-icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n width=\"24\"\r\n aria-label=\"success\"\r\n >\r\n <path d=\"M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z\"/>\r\n </SlottedSVG> \r\n </IcBadge>\r\n</IcChip>\r\n <IcChip label=\"Americano\">\r\n <IcBadge type=\"icon\" slot=\"badge\" position=\"far\" variant=\"success\">\r\n <svg\r\n slot=\"badge-icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n width=\"24\"\r\n aria-label=\"success\"\r\n >\r\n <path d=\"M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z\"/>\r\n </svg>\r\n </IcBadge> \r\n</IcChip>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `const useStyles = createUseStyles({\r\n parentContainer: {\r\n display: \"flex\",\r\n flexWrap: \"wrap\",\r\n padding: \"var(--ic-space-md)\",\r\n gap: \"var(--ic-space-md)\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nreturn (\r\n <div className={classes.parentContainer}>\r\n {shortCode}\r\n </div>\r\n)`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `const useStyles = createUseStyles({\r\n parentContainer: {\r\n display: \"flex\",\r\n flexWrap: \"wrap\",\r\n padding: \"var(--ic-space-md)\",\r\n gap: \"var(--ic-space-md)\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nreturn (\r\n <div className={classes.parentContainer}>\r\n {shortCode}\r\n </div>\r\n)`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview snippets={snippetsNear} style={{ gap: \"1rem\" }}>\r\n <IcChip label=\"Americano\">\r\n <IcBadge type=\"icon\" slot=\"badge\" position=\"near\" variant=\"success\">\r\n <SlottedSVG\r\n width=\"24\"\r\n height=\"24\"\r\n slot=\"badge-icon\"\r\n viewBox=\"0 0 24 24\"\r\n aria-label=\"success\"\r\n >\r\n <path d=\"M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z\" />\r\n </SlottedSVG>\r\n </IcBadge>\r\n </IcChip>\r\n <IcChip label=\"Americano\">\r\n <IcBadge type=\"icon\" slot=\"badge\" position=\"far\" variant=\"success\">\r\n <SlottedSVG\r\n width=\"24\"\r\n height=\"24\"\r\n slot=\"badge-icon\"\r\n viewBox=\"0 0 24 24\"\r\n aria-label=\"success\"\r\n >\r\n <path d=\"M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z\" />\r\n </SlottedSVG>\r\n </IcBadge>\r\n </IcChip>\r\n</ComponentPreview>\r\n\r\n### Position inline\r\n\r\nexport const snippetsInline = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-tab-context>\r\n <ic-tab-group label=\"Example tab group\">\r\n <ic-tab>\r\n About\r\n </ic-tab>\r\n <ic-tab>\r\n Ingredients\r\n </ic-tab>\r\n <ic-tab>\r\n <ic-badge\r\n text-label=\"8\"\r\n slot=\"badge\"\r\n position=\"inline\"\r\n size=\"large\"\r\n accessible-label=\"1 notification found\"\r\n variant=\"info\"\r\n ></ic-badge>\r\n Orders\r\n </ic-tab>\r\n </ic-tab-group>\r\n <ic-tab-panel>About page</ic-tab-panel>\r\n <ic-tab-panel>Ingredients page</ic-tab-panel>\r\n <ic-tab-panel>Orders page</ic-tab-panel>\r\n</ic-tab-context>`,\r\n long: `{shortCode}`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcTabContext>\r\n <IcTabGroup label=\"Example tab group\">\r\n <IcTab>\r\n About\r\n </IcTab>\r\n <IcTab>\r\n Ingredients\r\n </IcTab>\r\n <IcTab>\r\n <IcBadge\r\n textLabel=\"8\"\r\n slot=\"badge\"\r\n position=\"inline\"\r\n size=\"large\"\r\n accessibleLabel=\"1 notification found\"\r\n variant=\"info\"\r\n />\r\n Orders\r\n </IcTab>\r\n </IcTabGroup>\r\n <IcTabPanel>About page</IcTabPanel>\r\n <IcTabPanel>Ingredients page</IcTabPanel>\r\n <IcTabPanel>Orders page</IcTabPanel>\r\n</IcTabContext>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `{shortCode}`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `{shortCode}`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview snippets={snippetsInline}>\r\n <IcTabContext>\r\n <IcTabGroup label=\"Example tab group\">\r\n <IcTab>About</IcTab>\r\n <IcTab>Ingredients</IcTab>\r\n <IcTab>\r\n Orders\r\n <IcBadge\r\n textLabel=\"8\"\r\n slot=\"badge\"\r\n position=\"inline\"\r\n size=\"large\"\r\n accessibleLabel=\"1 notification found\"\r\n variant=\"info\"\r\n />\r\n </IcTab>\r\n </IcTabGroup>\r\n <IcTabPanel>About page</IcTabPanel>\r\n <IcTabPanel>Ingredients page</IcTabPanel>\r\n <IcTabPanel>Orders page</IcTabPanel>\r\n </IcTabContext>\r\n</ComponentPreview>\r\n\r\n### Hide and show badge\r\n\r\nClick the button to hide and show the badge.\r\n\r\nexport const snippetsHideBadge = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-button variant=\"secondary\" onclick=\"showHideBadge()\">\r\n <ic-badge text-label=\"8\" slot=\"badge\"></ic-badge>\r\n Coffee orders\r\n</ic-button>`,\r\n long: `.parent-container {\r\n padding: var(--ic-space-md);\r\n }\r\n</style>\r\n<body>\r\n <div class=\"parent-container\">\r\n {shortCode}\r\n </div> \r\n <script>\r\n function showHideBadge() {\r\n badge = document.querySelector(\"ic-badge\");\r\n if (badge.classList.contains(\"show\")) {\r\n badge.visible = false;\r\n } else {\r\n badge.visible = true;\r\n }\r\n }\r\n </script>`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcButton variant=\"secondary\" onClick={handleShowHideBadge}>\r\n <IcBadge\r\n variant=\"info\"\r\n textLabel=\"8\"\r\n slot=\"badge\"\r\n visible={showBadge}\r\n />\r\n Coffee orders\r\n</IcButton>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `const [showBadge, setShowBadge] = useState<boolean>(false);\r\nconst handleShowHideBadge = () => {\r\n setShowBadge(!showBadge);\r\n};\r\nconst useStyles = createUseStyles({\r\n parentContainer: {\r\n padding: \"var(--ic-space-md)\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nreturn (\r\n <div className={classes.parentContainer}>\r\n {shortCode}\r\n </div>\r\n)`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `const [showBadge, setShowBadge] = useState(false);\r\nconst handleShowHideBadge = () => {\r\n setShowBadge(!showBadge);\r\n};\r\nconst useStyles = createUseStyles({\r\n parentContainer: {\r\n padding: \"var(--ic-space-md)\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nreturn (\r\n <div className={classes.parentContainer}>\r\n {shortCode}\r\n </div>\r\n)`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\nexport const ToggleBadge = () => {\r\n const [showBadge, setShowBadge] = useState(false);\r\n const handleShowHideBadge = () => {\r\n setShowBadge(!showBadge);\r\n };\r\n return (\r\n <div style={{ padding: \"1rem\" }}>\r\n <IcButton variant=\"secondary\" onClick={handleShowHideBadge}>\r\n <IcBadge\r\n variant=\"info\"\r\n textLabel=\"8\"\r\n slot=\"badge\"\r\n visible={showBadge}\r\n />\r\n Coffee orders\r\n </IcButton>\r\n </div>\r\n );\r\n};\r\n\r\n<ComponentPreview\r\n style={{\r\n display: \"flex\",\r\n justifyContent: \"center\",\r\n }}\r\n snippets={snippetsHideBadge}\r\n>\r\n <ToggleBadge />\r\n</ComponentPreview>\r\n\r\n### Accessible label\r\n\r\nexport const snippetsAccessibleLabel = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-button variant=\"secondary\"> \r\n <ic-badge\r\n text-label=\"8\"\r\n slot=\"badge\"\r\n size=\"large\"\r\n variant=\"info\"\r\n accessible-label=\"8 coffee orders found\"\r\n >\r\n </ic-badge>\r\n Coffee orders\r\n</ic-button>`,\r\n long: `.parent-container {\r\n padding: var(--ic-space-md);\r\n}\r\n</style>\r\n<body>\r\n <div class=\"parent-container\">\r\n {shortCode}\r\n </div>`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcButton variant=\"secondary\">\r\n <IcBadge\r\n textLabel=\"8\"\r\n slot=\"badge\"\r\n size=\"large\"\r\n variant=\"info\"\r\n accessibleLabel=\"8 coffee orders found\"\r\n />\r\n Coffee orders\r\n</IcButton>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `const useStyles = createUseStyles({\r\n parentContainer: {\r\n padding: \"var(--ic-space-md)\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nreturn (\r\n <div className={classes.parentContainer}>\r\n {shortCode}\r\n </div>\r\n)`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `const useStyles = createUseStyles({\r\n parentContainer: {\r\n padding: \"var(--ic-space-md)\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nreturn (\r\n <div className={classes.parentContainer}>\r\n {shortCode}\r\n </div>\r\n)`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview snippets={snippetsAccessibleLabel} style={{ gap: \"1rem\" }}>\r\n <IcButton variant=\"secondary\">\r\n <IcBadge\r\n textLabel=\"8\"\r\n slot=\"badge\"\r\n size=\"large\"\r\n accessibleLabel=\"8 coffee orders found\"\r\n variant=\"info\"\r\n />\r\n Coffee orders\r\n </IcButton>\r\n</ComponentPreview>\r\n",
"path": "/components/badge/code",
"date": "2024-05-31",
"title": "Badge",
@@ -1062,16 +1062,16 @@
}
],
"meta": {
- "relativePath": "components/badge/code.mdx",
- "createdAt": "2024-11-06T10:27:49.404Z",
- "lastModified": "2024-11-06T10:18:59.924Z",
- "size": 22485,
- "formattedSize": "22.0 KB"
+ "relativePath": "components\\badge\\code.mdx",
+ "createdAt": "2024-12-04T13:23:54.057Z",
+ "lastModified": "2024-12-04T13:23:54.057Z",
+ "size": 23475,
+ "formattedSize": "22.9 KB"
}
},
{
"id": "components\\badge\\guidancex",
- "contents": "\nimport { IcBadge, IcButton } from \"@ukic/react\";\nimport badgeFig1 from \"./images/fig-1-badge-types.png\";\nimport badgeFig2 from \"./images/fig-2-badge-notification-on-inbox.png\";\nimport badgeFig3 from \"./images/fig-3-text-badge-notification-on-new-list-item.png\";\nimport badgeFig4 from \"./images/fig-4-dont-use-text-badge-with-long-label.png\";\nimport badgeFig5 from \"./images/fig-5-use-dot-badges.png\";\nimport badgeFig6 from \"./images/fig-6-use-icon-badges.png\";\nimport badgeFig7 from \"./images/fig-7-dont-add-badges-to-non-components.png\";\nimport badgeFig9 from \"./images/fig-9-use-plus-symbol-for-large-numbers.png\";\nimport badgeFig10 from \"./images/fig-10-use-high-contrast-combinations.png\";\nimport badgeFig11 from \"./images/fig-11-dont-use-low-conotrast-combinations.png\";\nimport badgeFig12 from \"./images/fig-12-badge-positioning.png\";\nimport badgeFig13 from \"./images/fig-13-understandable-badge-content.png\";\nimport badgeFig14 from \"./images/fig-14-confusing-badge-content.png\";\n\n## Introduction\n\nAn example of the badge component.\n\n<ComponentPreview>\n <IcButton variant=\"secondary\" style={{ marginRight: \"1rem\" }}>\n <IcBadge textLabel=\"1000\" maxNumber={99} slot=\"badge\" variant=\"info\" />\n Coffee orders\n </IcButton>\n</ComponentPreview>\n\n## Component variants\n\nThere are three types of badge available:\n\n- Text badge: Contains a short text label.\n- Icon badge: Contains an icon.\n- Dot badge: Badge background without any content.\n\n<DoDontCaution\n imageSrc={badgeFig1}\n imageAlt=\"Three types of badges applied to a secondary button titled ‘inbox’.\"\n caption=\"Three types of badge are available: a text, icon and a dot badge.\"\n/>\n\n## When to use\n\nUse badges to draw attention to new or updated information. For example, use them to display an item count such as the number of new notifications, or to display an icon such as a padlock icon for locked content.\n\n<DoDontCaution\n imageSrc={badgeFig2}\n imageAlt=\"An example app showing a top navigation bar that includes an icon button for messages. A badge is displayed on the messages icon button showing the number 8 in its label.\"\n state=\"good\"\n caption=\"Use text badges to draw attention to new information such as new messages in an inbox.\"\n/>\n\nUse text badges to attach short labels to other information. For example, a badge could be used to highlight a new item in a list. Remember to keep labels concise.\n\n<DoubleDoDontCaution>\n <DoDontCaution\n imageSrc={badgeFig3}\n imageAlt=\"Use text badges to add short labels to other page elements.\"\n state=\"good\"\n caption=\"A list of cards showing coffee-themed blog posts. The top card has a text badge displaying the label ‘New’.\"\n />\n <DoDontCaution\n imageSrc={badgeFig4}\n imageAlt=\"A list of cards showing coffee themed blog posts. The top card has a text badge displaying the label ‘Brand new content’.\"\n state=\"bad\"\n caption=\"Don’t use long labels in text badges.\"\n />\n</DoubleDoDontCaution>\n\nUse a dot badge to indicate that something has changed or updated without displaying a text label or icon.\n\nUse a text badge with numerical label to show the number of updates.\n\nFor example, use a dot badge to highlight that new comments are available to review, without giving the number of new comments.\n\n<DoubleDoDontCaution>\n <DoDontCaution\n imageSrc={badgeFig5}\n imageAlt=\"A side navigation component with an icon button for accessing an inbox. The icon button shows a dot badge indicating that something is available in the inbox.\"\n state=\"good\"\n caption=\"Use dot badges as a subtle way to indicate the presence of something without using a text label or an icon.\"\n />\n</DoubleDoDontCaution>\n\nOnly use badges when the component that it is attached to allows navigation to where the information related to the badge is stored. For example, a button that navigates someone to their inbox may show a badge displaying the number of new notifications that can be found there.\n\nOne exception is when using icon badges to add additional meaning only. For example, use an icon badge with a padlock icon to indicate that something may be currently locked due to access rights.\n\n<DoubleDoDontCaution>\n <DoDontCaution\n imageSrc={badgeFig6}\n imageAlt=\"A side navigation showing an icon button for accessing a trends page. An icon badge is displayed showing a closed padlock icon indicating that it can’t be accessed.\"\n state=\"good\"\n caption=\"Use icon badges to add additional information. Here a lock icon is used to indicate limited access rights to a feature of the app.\"\n />\n</DoubleDoDontCaution>\n\nUse badges to convey status, but make sure to use a status icon on the badge to provide a clear way of understanding the status. Don’t rely only on the colour of the badge to indicate status.\n\nFor example, use a success status dot badge to indicate that something has gone online, but always try to back up the status message with textual messaging elsewhere on the page.\n\n## When not to use\n\nDon’t use text badges as the only method of showing information, back the message up elsewhere. For example, show a toast notification for a new message whilst also adding a text badge to an inbox icon button.\n\nAvoid attaching badges to non-interactive components. Aim to attach a badge to components that allow navigation to the information that the badge relates to.\n\nDon’t use an icon badge as the only means of showing information on a non-navigational component. Always back up the message by including written messaging elsewhere on the page or showing feedback when the component is clicked.\n\nFor example, if using an icon badge with a lock symbol to indicate limited access to a navigation button, then allow the navigation button to still be clicked, but show a message stating that it is locked using a dialog or alert.\n\n<DoDontCaution\n imageSrc={badgeFig7}\n imageAlt=\"An example app with a hero component with the title ‘Come and taste our cool beans.’ A text badge is attached to the title and shows the number 8.\"\n state=\"bad\"\n caption=\"Don’t add badges to non-navigational components as it can be hard to understand what it means.\"\n/>\n\nAvoid using badges as the only way of indicating status. Always show information about the status in full on the page that the badged component navigates to.\n\nDon’t use multiple badges to indicate many different statuses at the same time as it is hard to understand what the different statuses could mean. When using badges to convey status, use one type of status badge at a time.\n\nFor an application showing different system statuses, don’t place multiple status badges on a component to show separate information such as online status as well as system health status.\n\nFor example, on an app for displaying coffee orders to baristas, don’t show multiple status badges on a single order. Don't display a badge to indicate time since the order was placed as well as a badge to indicate remaining number of products.\n\nAvoid using badges with more than four characters, including the ‘+’ symbol. Use the ‘maxNumber’ property to limit what is displayed before a ‘+’ symbol is added. For example, this can be used to show ‘99+’ notifications.\n\n<DoDontCaution\n imageSrc={badgeFig9}\n imageAlt=\"An example app with a top navigation showing an icon button for an inbox page. The inbox icon button shows a badge that reads ‘99+’.\"\n state=\"bad\"\n caption=\"Use the maxNumber property to limit large numbers in text badges and display a ‘+’ symbol instead.\"\n/>\n\n## Colour\n\nUse the different colour variations of badges to make sure it achieves at least 3:1 colour contrast ratio with its background.\n\nSpecify a custom colour for the badge, but take care to make sure the colour contrast requirements are met.\n\n<DoubleDoDontCaution>\n <DoDontCaution\n imageSrc={badgeFig10}\n imageAlt=\"A secondary button on a white background showing a badge with a contrasting blue colour.\"\n state=\"good\"\n caption=\"Use high contrast badges so that they stand out against background colours.\"\n />\n <DoDontCaution\n imageSrc={badgeFig11}\n imageAlt=\"A secondary button on a white background showing a badge with a light grey colour that has a low contrast. The badge is difficult to make out.\"\n state=\"bad\"\n caption=\"Don’t use colour combinations with low contrast ratios.\"\n />\n</DoubleDoDontCaution>\n\n## Sizing\n\nUse the same sized badge for the size of the component that the badge is attached to. For example, use a large sized badge with a large sized button.\n\n## Layout and placement\n\nBadges are always positioned in the top right corner of the component they are attached to. Make sure the badge overlaps the border of the component by adjusting the badge’s positioning using the ‘far’ and ‘near’ positioning options. For square components use the ‘far’ positioning option, and for rounded components use the ‘near’ positioning.\n\nFor components that are adjacent to one another, such as tabs, use ‘inline’ badge positioning so that the badge sits in line with the component’s label.\n\n<DoubleDoDontCaution>\n <DoDontCaution\n imageSrc={badgeFig12}\n imageAlt=\"A secondary button with a badge using ‘far’ positioning, a chip with a badge using ‘near’ positioning, and a tab bar containing a tab with a badge using ‘inline’ positioning.\"\n state=\"good\"\n caption=\"Use the badge positioning options to change where a badge is placed on a component.\"\n />\n</DoubleDoDontCaution>\n\n## Content\n\nMake sure that it is obvious what the badge relates to. Only use badges when the component it is attached to is labelled clearly to indicate what the badge references. For example, a numeric badge on an inbox is easily understandable, whereas a numeric badge on a menu button may not be as clear as to what the badge represents.\n\n<DoubleDoDontCaution>\n <DoDontCaution\n imageSrc={badgeFig13}\n imageAlt=\"An app showing a top navigation with an icon button for an inbox page. It shows a badge showing the number 5, representing the number of messages in the inbox.\"\n state=\"good\"\n caption=\"Use badges where it is understandable what they represent. In this example the badge clearly indicates 5 messages in the inbox.\"\n />\n <DoDontCaution\n imageSrc={badgeFig14}\n imageAlt=\"An app showing a menu button with a badge showing the number 5. It is not clear what the number 5 represents.\"\n state=\"caution\"\n caption=\"Avoid using them in cases where the badge’s meaning is difficult to understand. In this example it is not clear what the 5 in the badge represents.\"\n />\n</DoubleDoDontCaution>\n\nWhen using text badges, keep the text label short and only use a single word. Avoid using more than four characters on a text badge. For example, use a text badge to label something as ‘New’. Don’t use badges to add long labels; consider adding that information elsewhere instead.\n\nIf displaying numbers in a text badge, then set the ‘maxNumber’ property to limit the number of characters shown. This will show a ‘+’ symbol if the value is larger than the maxNumber.\n\nAlways provide an accessible label to add context to a badge’s label for the benefit of people who use a screen reader. Make sure to include any visible label within the accessible label.\n\nTake care when using icon badges so that the icon is immediately understandable to its context. Don’t use abstract or ambiguous icons as this will make it hard to understand what the badge represents.\n\n## Accessibility considerations\n\nAlways provide a badge with an accessible label to add context for people who use screen readers. For example, a text badge displaying the number 10 might have an accessible label that reads ‘10 new notifications’.\n\nWhen using an icon badge, make sure that the icon alt-text makes sense to its function and use the accessible label to add context.\n\nWhen setting a badge’s colour, make sure it meets the minimum contrast requirement of 3:1 for non-text elements.\n\nIf a badge is added to a page because of a status update, make sure that screen readers announce its presence by using a live region.\n",
+ "contents": "\r\nimport { IcBadge, IcButton } from \"@ukic/react\";\r\nimport badgeFig1 from \"./images/fig-1-badge-types.png\";\r\nimport badgeFig2 from \"./images/fig-2-badge-notification-on-inbox.png\";\r\nimport badgeFig3 from \"./images/fig-3-text-badge-notification-on-new-list-item.png\";\r\nimport badgeFig4 from \"./images/fig-4-dont-use-text-badge-with-long-label.png\";\r\nimport badgeFig5 from \"./images/fig-5-use-dot-badges.png\";\r\nimport badgeFig6 from \"./images/fig-6-use-icon-badges.png\";\r\nimport badgeFig7 from \"./images/fig-7-dont-add-badges-to-non-components.png\";\r\nimport badgeFig9 from \"./images/fig-9-use-plus-symbol-for-large-numbers.png\";\r\nimport badgeFig10 from \"./images/fig-10-use-high-contrast-combinations.png\";\r\nimport badgeFig11 from \"./images/fig-11-dont-use-low-conotrast-combinations.png\";\r\nimport badgeFig12 from \"./images/fig-12-badge-positioning.png\";\r\nimport badgeFig13 from \"./images/fig-13-understandable-badge-content.png\";\r\nimport badgeFig14 from \"./images/fig-14-confusing-badge-content.png\";\r\n\r\n## Introduction\r\n\r\nAn example of the badge component.\r\n\r\n<ComponentPreview>\r\n <IcButton variant=\"secondary\" style={{ marginRight: \"1rem\" }}>\r\n <IcBadge textLabel=\"1000\" maxNumber={99} slot=\"badge\" variant=\"info\" />\r\n Coffee orders\r\n </IcButton>\r\n</ComponentPreview>\r\n\r\n## Component variants\r\n\r\nThere are three types of badge available:\r\n\r\n- Text badge: Contains a short text label.\r\n- Icon badge: Contains an icon.\r\n- Dot badge: Badge background without any content.\r\n\r\n<DoDontCaution\r\n imageSrc={badgeFig1}\r\n imageAlt=\"Three types of badges applied to a secondary button titled ‘inbox’.\"\r\n caption=\"Three types of badge are available: a text, icon and a dot badge.\"\r\n/>\r\n\r\n## When to use\r\n\r\nUse badges to draw attention to new or updated information. For example, use them to display an item count such as the number of new notifications, or to display an icon such as a padlock icon for locked content.\r\n\r\n<DoDontCaution\r\n imageSrc={badgeFig2}\r\n imageAlt=\"An example app showing a top navigation bar that includes an icon button for messages. A badge is displayed on the messages icon button showing the number 8 in its label.\"\r\n state=\"good\"\r\n caption=\"Use text badges to draw attention to new information such as new messages in an inbox.\"\r\n/>\r\n\r\nUse text badges to attach short labels to other information. For example, a badge could be used to highlight a new item in a list. Remember to keep labels concise.\r\n\r\n<DoubleDoDontCaution>\r\n <DoDontCaution\r\n imageSrc={badgeFig3}\r\n imageAlt=\"Use text badges to add short labels to other page elements.\"\r\n state=\"good\"\r\n caption=\"A list of cards showing coffee-themed blog posts. The top card has a text badge displaying the label ‘New’.\"\r\n />\r\n <DoDontCaution\r\n imageSrc={badgeFig4}\r\n imageAlt=\"A list of cards showing coffee themed blog posts. The top card has a text badge displaying the label ‘Brand new content’.\"\r\n state=\"bad\"\r\n caption=\"Don’t use long labels in text badges.\"\r\n />\r\n</DoubleDoDontCaution>\r\n\r\nUse a dot badge to indicate that something has changed or updated without displaying a text label or icon.\r\n\r\nUse a text badge with numerical label to show the number of updates.\r\n\r\nFor example, use a dot badge to highlight that new comments are available to review, without giving the number of new comments.\r\n\r\n<DoubleDoDontCaution>\r\n <DoDontCaution\r\n imageSrc={badgeFig5}\r\n imageAlt=\"A side navigation component with an icon button for accessing an inbox. The icon button shows a dot badge indicating that something is available in the inbox.\"\r\n state=\"good\"\r\n caption=\"Use dot badges as a subtle way to indicate the presence of something without using a text label or an icon.\"\r\n />\r\n</DoubleDoDontCaution>\r\n\r\nOnly use badges when the component that it is attached to allows navigation to where the information related to the badge is stored. For example, a button that navigates someone to their inbox may show a badge displaying the number of new notifications that can be found there.\r\n\r\nOne exception is when using icon badges to add additional meaning only. For example, use an icon badge with a padlock icon to indicate that something may be currently locked due to access rights.\r\n\r\n<DoubleDoDontCaution>\r\n <DoDontCaution\r\n imageSrc={badgeFig6}\r\n imageAlt=\"A side navigation showing an icon button for accessing a trends page. An icon badge is displayed showing a closed padlock icon indicating that it can’t be accessed.\"\r\n state=\"good\"\r\n caption=\"Use icon badges to add additional information. Here a lock icon is used to indicate limited access rights to a feature of the app.\"\r\n />\r\n</DoubleDoDontCaution>\r\n\r\nUse badges to convey status, but make sure to use a status icon on the badge to provide a clear way of understanding the status. Don’t rely only on the colour of the badge to indicate status.\r\n\r\nFor example, use a success status dot badge to indicate that something has gone online, but always try to back up the status message with textual messaging elsewhere on the page.\r\n\r\n## When not to use\r\n\r\nDon’t use text badges as the only method of showing information, back the message up elsewhere. For example, show a toast notification for a new message whilst also adding a text badge to an inbox icon button.\r\n\r\nAvoid attaching badges to non-interactive components. Aim to attach a badge to components that allow navigation to the information that the badge relates to.\r\n\r\nDon’t use an icon badge as the only means of showing information on a non-navigational component. Always back up the message by including written messaging elsewhere on the page or showing feedback when the component is clicked.\r\n\r\nFor example, if using an icon badge with a lock symbol to indicate limited access to a navigation button, then allow the navigation button to still be clicked, but show a message stating that it is locked using a dialog or alert.\r\n\r\n<DoDontCaution\r\n imageSrc={badgeFig7}\r\n imageAlt=\"An example app with a hero component with the title ‘Come and taste our cool beans.’ A text badge is attached to the title and shows the number 8.\"\r\n state=\"bad\"\r\n caption=\"Don’t add badges to non-navigational components as it can be hard to understand what it means.\"\r\n/>\r\n\r\nAvoid using badges as the only way of indicating status. Always show information about the status in full on the page that the badged component navigates to.\r\n\r\nDon’t use multiple badges to indicate many different statuses at the same time as it is hard to understand what the different statuses could mean. When using badges to convey status, use one type of status badge at a time.\r\n\r\nFor an application showing different system statuses, don’t place multiple status badges on a component to show separate information such as online status as well as system health status.\r\n\r\nFor example, on an app for displaying coffee orders to baristas, don’t show multiple status badges on a single order. Don't display a badge to indicate time since the order was placed as well as a badge to indicate remaining number of products.\r\n\r\nAvoid using badges with more than four characters, including the ‘+’ symbol. Use the ‘maxNumber’ property to limit what is displayed before a ‘+’ symbol is added. For example, this can be used to show ‘99+’ notifications.\r\n\r\n<DoDontCaution\r\n imageSrc={badgeFig9}\r\n imageAlt=\"An example app with a top navigation showing an icon button for an inbox page. The inbox icon button shows a badge that reads ‘99+’.\"\r\n state=\"bad\"\r\n caption=\"Use the maxNumber property to limit large numbers in text badges and display a ‘+’ symbol instead.\"\r\n/>\r\n\r\n## Colour\r\n\r\nUse the different colour variations of badges to make sure it achieves at least 3:1 colour contrast ratio with its background.\r\n\r\nSpecify a custom colour for the badge, but take care to make sure the colour contrast requirements are met.\r\n\r\n<DoubleDoDontCaution>\r\n <DoDontCaution\r\n imageSrc={badgeFig10}\r\n imageAlt=\"A secondary button on a white background showing a badge with a contrasting blue colour.\"\r\n state=\"good\"\r\n caption=\"Use high contrast badges so that they stand out against background colours.\"\r\n />\r\n <DoDontCaution\r\n imageSrc={badgeFig11}\r\n imageAlt=\"A secondary button on a white background showing a badge with a light grey colour that has a low contrast. The badge is difficult to make out.\"\r\n state=\"bad\"\r\n caption=\"Don’t use colour combinations with low contrast ratios.\"\r\n />\r\n</DoubleDoDontCaution>\r\n\r\n## Sizing\r\n\r\nUse the same sized badge for the size of the component that the badge is attached to. For example, use a large sized badge with a large sized button.\r\n\r\n## Layout and placement\r\n\r\nBadges are always positioned in the top right corner of the component they are attached to. Make sure the badge overlaps the border of the component by adjusting the badge’s positioning using the ‘far’ and ‘near’ positioning options. For square components use the ‘far’ positioning option, and for rounded components use the ‘near’ positioning.\r\n\r\nFor components that are adjacent to one another, such as tabs, use ‘inline’ badge positioning so that the badge sits in line with the component’s label.\r\n\r\n<DoubleDoDontCaution>\r\n <DoDontCaution\r\n imageSrc={badgeFig12}\r\n imageAlt=\"A secondary button with a badge using ‘far’ positioning, a chip with a badge using ‘near’ positioning, and a tab bar containing a tab with a badge using ‘inline’ positioning.\"\r\n state=\"good\"\r\n caption=\"Use the badge positioning options to change where a badge is placed on a component.\"\r\n />\r\n</DoubleDoDontCaution>\r\n\r\n## Content\r\n\r\nMake sure that it is obvious what the badge relates to. Only use badges when the component it is attached to is labelled clearly to indicate what the badge references. For example, a numeric badge on an inbox is easily understandable, whereas a numeric badge on a menu button may not be as clear as to what the badge represents.\r\n\r\n<DoubleDoDontCaution>\r\n <DoDontCaution\r\n imageSrc={badgeFig13}\r\n imageAlt=\"An app showing a top navigation with an icon button for an inbox page. It shows a badge showing the number 5, representing the number of messages in the inbox.\"\r\n state=\"good\"\r\n caption=\"Use badges where it is understandable what they represent. In this example the badge clearly indicates 5 messages in the inbox.\"\r\n />\r\n <DoDontCaution\r\n imageSrc={badgeFig14}\r\n imageAlt=\"An app showing a menu button with a badge showing the number 5. It is not clear what the number 5 represents.\"\r\n state=\"caution\"\r\n caption=\"Avoid using them in cases where the badge’s meaning is difficult to understand. In this example it is not clear what the 5 in the badge represents.\"\r\n />\r\n</DoubleDoDontCaution>\r\n\r\nWhen using text badges, keep the text label short and only use a single word. Avoid using more than four characters on a text badge. For example, use a text badge to label something as ‘New’. Don’t use badges to add long labels; consider adding that information elsewhere instead.\r\n\r\nIf displaying numbers in a text badge, then set the ‘maxNumber’ property to limit the number of characters shown. This will show a ‘+’ symbol if the value is larger than the maxNumber.\r\n\r\nAlways provide an accessible label to add context to a badge’s label for the benefit of people who use a screen reader. Make sure to include any visible label within the accessible label.\r\n\r\nTake care when using icon badges so that the icon is immediately understandable to its context. Don’t use abstract or ambiguous icons as this will make it hard to understand what the badge represents.\r\n\r\n## Accessibility considerations\r\n\r\nAlways provide a badge with an accessible label to add context for people who use screen readers. For example, a text badge displaying the number 10 might have an accessible label that reads ‘10 new notifications’.\r\n\r\nWhen using an icon badge, make sure that the icon alt-text makes sense to its function and use the accessible label to add context.\r\n\r\nWhen setting a badge’s colour, make sure it meets the minimum contrast requirement of 3:1 for non-text elements.\r\n\r\nIf a badge is added to a page because of a status update, make sure that screen readers announce its presence by using a live region.\r\n",
"path": "/components/badge",
"navPriority": 4,
"date": "2024-05-10",
@@ -1095,11 +1095,11 @@
],
"tags": ["Tab", "Label", "Chip"],
"meta": {
- "relativePath": "components/badge/guidance.mdx",
- "createdAt": "2024-11-06T10:27:49.404Z",
- "lastModified": "2024-11-06T10:18:59.924Z",
- "size": 12711,
- "formattedSize": "12.4 KB"
+ "relativePath": "components\\badge\\guidance.mdx",
+ "createdAt": "2024-12-04T13:23:54.058Z",
+ "lastModified": "2024-12-04T13:23:54.058Z",
+ "size": 12946,
+ "formattedSize": "12.6 KB"
}
},
{
@@ -1126,16 +1126,16 @@
}
],
"meta": {
- "relativePath": "components/breadcrumbs/accessibility.mdx",
- "createdAt": "2024-11-06T10:27:49.404Z",
- "lastModified": "2024-11-06T10:18:59.936Z",
+ "relativePath": "components\\breadcrumbs\\accessibility.mdx",
+ "createdAt": "2024-11-05T11:57:50.412Z",
+ "lastModified": "2024-11-05T11:57:50.412Z",
"size": 2389,
"formattedSize": "2.3 KB"
}
},
{
"id": "components\\breadcrumbs\\codex",
- "contents": "\nimport { IcBreadcrumbGroup, IcBreadcrumb, IcLink } from \"@ukic/react\";\n\nimport { NavLink, MemoryRouter } from \"react-router-dom\";\n\n## Component demo\n\nexport const snippets = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-breadcrumb-group>\n <ic-breadcrumb page-title=\"Home\" href=\"#\"></ic-breadcrumb>\n <ic-breadcrumb page-title=\"Beverages\" href=\"#\"></ic-breadcrumb>\n <ic-breadcrumb \n current=\"true\" \n page-title=\"Coffee\" \n href=\"#\"\n >\n </ic-breadcrumb>\n</ic-breadcrumb-group>`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcBreadcrumbGroup>\n <IcBreadcrumb pageTitle=\"Home\" href=\"#\" />\n <IcBreadcrumb pageTitle=\"Beverages\" href=\"#\" />\n <IcBreadcrumb \n current \n pageTitle=\"Coffee\"\n href=\"#\"\n />\n</IcBreadcrumbGroup>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `{shortCode}`,\n },\n {\n language: \"Javascript\",\n snippet: `{shortCode}`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={snippets}>\n <IcBreadcrumbGroup>\n <IcBreadcrumb\n pageTitle=\"Home\"\n href=\"#\"\n onClick={(e) => e.preventDefault()}\n />\n <IcBreadcrumb\n pageTitle=\"Beverages\"\n href=\"#\"\n onClick={(e) => e.preventDefault()}\n />\n <IcBreadcrumb\n current\n pageTitle=\"Coffee\"\n href=\"#\"\n onClick={(e) => e.preventDefault()}\n />\n </IcBreadcrumbGroup>\n</ComponentPreview>\n\n## Breadcrumb details\n\n<ComponentDetails component=\"ic-breadcrumb\" />\n\n## Breadcrumb group details\n\n<ComponentDetails component=\"ic-breadcrumb-group\" />\n\n## Variants\n\n### Back\n\nexport const back = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-breadcrumb-group back-breadcrumb-only=\"true\">\n <ic-breadcrumb page-title=\"Home\" href=\"#\"></ic-breadcrumb>\n <ic-breadcrumb page-title=\"Beverages\" href=\"#\"></ic-breadcrumb>\n <ic-breadcrumb \n current=\"true\" \n page-title=\"Coffee\" \n href=\"#\"\n >\n </ic-breadcrumb>\n</ic-breadcrumb-group>`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcBreadcrumbGroup backBreadcrumbOnly>\n <IcBreadcrumb pageTitle=\"Home\" href=\"#\" />\n <IcBreadcrumb pageTitle=\"Beverages\" href=\"#\" />\n <IcBreadcrumb \n current \n pageTitle=\"Coffee\"\n href=\"#\"\n />\n</IcBreadcrumbGroup>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `{shortCode}`,\n },\n {\n language: \"Javascript\",\n snippet: `{shortCode}`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={back}>\n <IcBreadcrumbGroup backBreadcrumbOnly>\n <IcBreadcrumb\n pageTitle=\"Home\"\n href=\"#\"\n onClick={(e) => e.preventDefault()}\n />\n <IcBreadcrumb\n pageTitle=\"Beverages\"\n href=\"#\"\n onClick={(e) => e.preventDefault()}\n />\n <IcBreadcrumb\n current\n pageTitle=\"Coffee\"\n href=\"#\"\n onClick={(e) => e.preventDefault()}\n />\n </IcBreadcrumbGroup>\n</ComponentPreview>\n\n### With icons\n\nexport const withIcons = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-breadcrumb-group>\n <ic-breadcrumb page-title=\"Home\" href=\"#\">\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=\"M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z\"\n fill=\"currentColor\"\n />\n </svg>\n </ic-breadcrumb>\n <ic-breadcrumb page-title=\"Beverages\" href=\"#\">\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=\"M20 3H4v10c0 2.21 1.79 4 4 4h6c2.21 0 4-1.79 4-4v-3h2c1.11 0 2-.9 2-2V5c0-1.11-.89-2-2-2zm0 5h-2V5h2v3zM4 19h16v2H4z\"\n fill=\"currentColor\"\n />\n </svg>\n </ic-breadcrumb>\n <ic-breadcrumb \n current=\"true\" \n page-title=\"Coffee\" \n href=\"#\"\n >\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=\"M18.5 3H6c-1.1 0-2 .9-2 2v5.71c0 3.83 2.95 7.18 6.78 7.29 3.96.12 7.22-3.06 7.22-7v-1h.5c1.93 0 3.5-1.57 3.5-3.5S20.43 3 18.5 3zM16 5v3H6V5h10zm2.5 3H18V5h.5c.83 0 1.5.67 1.5 1.5S19.33 8 18.5 8zM4 19h16v2H4v-2z\"\n fill=\"currentColor\"\n />\n </svg>\n </ic-breadcrumb>\n</ic-breadcrumb-group>`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcBreadcrumbGroup>\n <IcBreadcrumb pageTitle=\"Home\" href=\"#\">\n <SlottedSVG\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=\"M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z\"\n fill=\"currentColor\"\n />\n </SlottedSVG>\n </IcBreadcrumb>\n <IcBreadcrumb pageTitle=\"Beverages\" href=\"#\">\n <SlottedSVG\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=\"M20 3H4v10c0 2.21 1.79 4 4 4h6c2.21 0 4-1.79 4-4v-3h2c1.11 0 2-.9 2-2V5c0-1.11-.89-2-2-2zm0 5h-2V5h2v3zM4 19h16v2H4z\"\n fill=\"currentColor\"\n />\n </SlottedSVG>\n </IcBreadcrumb>\n <IcBreadcrumb \n pageTitle=\"Coffee\" \n current\n href=\"#\"\n >\n <SlottedSVG\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=\"M18.5 3H6c-1.1 0-2 .9-2 2v5.71c0 3.83 2.95 7.18 6.78 7.29 3.96.12 7.22-3.06 7.22-7v-1h.5c1.93 0 3.5-1.57 3.5-3.5S20.43 3 18.5 3zM16 5v3H6V5h10zm2.5 3H18V5h.5c.83 0 1.5.67 1.5 1.5S19.33 8 18.5 8zM4 19h16v2H4v-2z\"\n fill=\"currentColor\"\n />\n </SlottedSVG>\n </IcBreadcrumb>\n</IcBreadcrumbGroup>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `{shortCode}`,\n },\n {\n language: \"Javascript\",\n snippet: `{shortCode}`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={withIcons}>\n <IcBreadcrumbGroup>\n <IcBreadcrumb pageTitle=\"Home\" href=\"#\" onClick={(e) => e.preventDefault()}>\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=\"M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z\"\n fill=\"currentColor\"\n />\n </svg>\n </IcBreadcrumb>\n <IcBreadcrumb\n pageTitle=\"Beverages\"\n href=\"#\"\n onClick={(e) => e.preventDefault()}\n >\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=\"M20 3H4v10c0 2.21 1.79 4 4 4h6c2.21 0 4-1.79 4-4v-3h2c1.11 0 2-.9 2-2V5c0-1.11-.89-2-2-2zm0 5h-2V5h2v3zM4 19h16v2H4z\"\n fill=\"currentColor\"\n />\n </svg>\n </IcBreadcrumb>\n <IcBreadcrumb\n pageTitle=\"Coffee\"\n current\n href=\"#\"\n onClick={(e) => e.preventDefault()}\n >\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=\"M18.5 3H6c-1.1 0-2 .9-2 2v5.71c0 3.83 2.95 7.18 6.78 7.29 3.96.12 7.22-3.06 7.22-7v-1h.5c1.93 0 3.5-1.57 3.5-3.5S20.43 3 18.5 3zM16 5v3H6V5h10zm2.5 3H18V5h.5c.83 0 1.5.67 1.5 1.5S19.33 8 18.5 8zM4 19h16v2H4v-2z\"\n fill=\"currentColor\"\n />\n </svg>\n </IcBreadcrumb>\n </IcBreadcrumbGroup>\n</ComponentPreview>\n\n### Collapsed\n\nexport const collapsed = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-breadcrumb-group collapsed=\"true\">\n <ic-breadcrumb page-title=\"Home\" href=\"#\"></ic-breadcrumb>\n <ic-breadcrumb page-title=\"Beverages\" href=\"#\"></ic-breadcrumb>\n <ic-breadcrumb \n current=\"true\" \n page-title=\"Coffee\" \n href=\"#\"\n >\n </ic-breadcrumb>\n</ic-breadcrumb-group>`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcBreadcrumbGroup collapsed>\n <IcBreadcrumb pageTitle=\"Home\" href=\"#\" />\n <IcBreadcrumb pageTitle=\"Beverages\" href=\"#\" />\n <IcBreadcrumb \n pageTitle=\"Coffee\" \n current\n href=\"#\"\n />\n</IcBreadcrumbGroup>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `{shortCode}`,\n },\n {\n language: \"Javascript\",\n snippet: `{shortCode}`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={collapsed}>\n <IcBreadcrumbGroup collapsed>\n <IcBreadcrumb\n pageTitle=\"Home\"\n href=\"#\"\n onClick={(e) => e.preventDefault()}\n />\n <IcBreadcrumb\n pageTitle=\"Beverages\"\n href=\"#\"\n onClick={(e) => e.preventDefault()}\n />\n <IcBreadcrumb\n pageTitle=\"Coffee\"\n current\n href=\"#\"\n onClick={(e) => e.preventDefault()}\n />\n </IcBreadcrumbGroup>\n</ComponentPreview>\n\n### With React Router\n\nexport const withReactRouter = [\n {\n technology: \"React\",\n snippets: {\n short: `<MemoryRouter initialEntries={[\"/\"]}>\n <IcBreadcrumbGroup>\n <IcBreadcrumb pageTitle=\"Home\">\n <IcLink>\n <NavLink slot=\"router-item\" to=\"/\">Home</NavLink>\n </IcLink>\n </IcBreadcrumb>\n <IcBreadcrumb pageTitle=\"Beverages\">\n <IcLink>\n <NavLink slot=\"router-item\" to=\"/\">Beverages</NavLink>\n </IcLink>\n </IcBreadcrumb>\n <IcBreadcrumb pageTitle=\"Coffee\" current>\n <IcLink>\n <NavLink to=\"/\" slot=\"router-item\">Coffee</NavLink>\n </IcLink>\n </IcBreadcrumb>\n </IcBreadcrumbGroup>\n</MemoryRouter>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `{shortCode}`,\n },\n {\n language: \"Javascript\",\n snippet: `{shortCode}`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={withReactRouter}>\n <MemoryRouter initialEntries={[\"/\"]}>\n <IcBreadcrumbGroup>\n <IcBreadcrumb pageTitle=\"Home\">\n <IcLink>\n <NavLink slot=\"router-item\" to=\"/\">\n Home\n </NavLink>\n </IcLink>\n </IcBreadcrumb>\n <IcBreadcrumb pageTitle=\"Beverages\">\n <IcLink>\n <NavLink slot=\"router-item\" to=\"/\">\n Beverages\n </NavLink>\n </IcLink>\n </IcBreadcrumb>\n <IcBreadcrumb pageTitle=\"Coffee\" current>\n <IcLink>\n <NavLink to=\"/\" slot=\"router-item\">\n Coffee\n </NavLink>\n </IcLink>\n </IcBreadcrumb>\n </IcBreadcrumbGroup>\n </MemoryRouter>\n</ComponentPreview>\n",
+ "contents": "\r\nimport { IcBreadcrumbGroup, IcBreadcrumb, IcLink } from \"@ukic/react\";\r\n\r\nimport { NavLink, MemoryRouter } from \"react-router-dom\";\r\n\r\n## Component demo\r\n\r\nexport const snippets = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-breadcrumb-group>\r\n <ic-breadcrumb page-title=\"Home\" href=\"#\"></ic-breadcrumb>\r\n <ic-breadcrumb page-title=\"Beverages\" href=\"#\"></ic-breadcrumb>\r\n <ic-breadcrumb \r\n current=\"true\" \r\n page-title=\"Coffee\" \r\n href=\"#\"\r\n >\r\n </ic-breadcrumb>\r\n</ic-breadcrumb-group>`,\r\n long: `{shortCode}`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcBreadcrumbGroup>\r\n <IcBreadcrumb pageTitle=\"Home\" href=\"#\" />\r\n <IcBreadcrumb pageTitle=\"Beverages\" href=\"#\" />\r\n <IcBreadcrumb \r\n current \r\n pageTitle=\"Coffee\"\r\n href=\"#\"\r\n />\r\n</IcBreadcrumbGroup>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `{shortCode}`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `{shortCode}`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview snippets={snippets}>\r\n <IcBreadcrumbGroup>\r\n <IcBreadcrumb\r\n pageTitle=\"Home\"\r\n href=\"#\"\r\n onClick={(e) => e.preventDefault()}\r\n />\r\n <IcBreadcrumb\r\n pageTitle=\"Beverages\"\r\n href=\"#\"\r\n onClick={(e) => e.preventDefault()}\r\n />\r\n <IcBreadcrumb\r\n current\r\n pageTitle=\"Coffee\"\r\n href=\"#\"\r\n onClick={(e) => e.preventDefault()}\r\n />\r\n </IcBreadcrumbGroup>\r\n</ComponentPreview>\r\n\r\n## Breadcrumb details\r\n\r\n<ComponentDetails component=\"ic-breadcrumb\" />\r\n\r\n## Breadcrumb group details\r\n\r\n<ComponentDetails component=\"ic-breadcrumb-group\" />\r\n\r\n## Variants\r\n\r\n### Back\r\n\r\nexport const back = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-breadcrumb-group back-breadcrumb-only=\"true\">\r\n <ic-breadcrumb page-title=\"Home\" href=\"#\"></ic-breadcrumb>\r\n <ic-breadcrumb page-title=\"Beverages\" href=\"#\"></ic-breadcrumb>\r\n <ic-breadcrumb \r\n current=\"true\" \r\n page-title=\"Coffee\" \r\n href=\"#\"\r\n >\r\n </ic-breadcrumb>\r\n</ic-breadcrumb-group>`,\r\n long: `{shortCode}`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcBreadcrumbGroup backBreadcrumbOnly>\r\n <IcBreadcrumb pageTitle=\"Home\" href=\"#\" />\r\n <IcBreadcrumb pageTitle=\"Beverages\" href=\"#\" />\r\n <IcBreadcrumb \r\n current \r\n pageTitle=\"Coffee\"\r\n href=\"#\"\r\n />\r\n</IcBreadcrumbGroup>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `{shortCode}`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `{shortCode}`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview snippets={back}>\r\n <IcBreadcrumbGroup backBreadcrumbOnly>\r\n <IcBreadcrumb\r\n pageTitle=\"Home\"\r\n href=\"#\"\r\n onClick={(e) => e.preventDefault()}\r\n />\r\n <IcBreadcrumb\r\n pageTitle=\"Beverages\"\r\n href=\"#\"\r\n onClick={(e) => e.preventDefault()}\r\n />\r\n <IcBreadcrumb\r\n current\r\n pageTitle=\"Coffee\"\r\n href=\"#\"\r\n onClick={(e) => e.preventDefault()}\r\n />\r\n </IcBreadcrumbGroup>\r\n</ComponentPreview>\r\n\r\n### With icons\r\n\r\nexport const withIcons = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-breadcrumb-group>\r\n <ic-breadcrumb page-title=\"Home\" href=\"#\">\r\n <svg\r\n slot=\"icon\"\r\n width=\"24\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n >\r\n <path\r\n d=\"M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z\"\r\n fill=\"currentColor\"\r\n />\r\n </svg>\r\n </ic-breadcrumb>\r\n <ic-breadcrumb page-title=\"Beverages\" href=\"#\">\r\n <svg\r\n slot=\"icon\"\r\n width=\"24\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n >\r\n <path\r\n d=\"M20 3H4v10c0 2.21 1.79 4 4 4h6c2.21 0 4-1.79 4-4v-3h2c1.11 0 2-.9 2-2V5c0-1.11-.89-2-2-2zm0 5h-2V5h2v3zM4 19h16v2H4z\"\r\n fill=\"currentColor\"\r\n />\r\n </svg>\r\n </ic-breadcrumb>\r\n <ic-breadcrumb \r\n current=\"true\" \r\n page-title=\"Coffee\" \r\n href=\"#\"\r\n >\r\n <svg\r\n slot=\"icon\"\r\n width=\"24\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n >\r\n <path\r\n d=\"M18.5 3H6c-1.1 0-2 .9-2 2v5.71c0 3.83 2.95 7.18 6.78 7.29 3.96.12 7.22-3.06 7.22-7v-1h.5c1.93 0 3.5-1.57 3.5-3.5S20.43 3 18.5 3zM16 5v3H6V5h10zm2.5 3H18V5h.5c.83 0 1.5.67 1.5 1.5S19.33 8 18.5 8zM4 19h16v2H4v-2z\"\r\n fill=\"currentColor\"\r\n />\r\n </svg>\r\n </ic-breadcrumb>\r\n</ic-breadcrumb-group>`,\r\n long: `{shortCode}`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcBreadcrumbGroup>\r\n <IcBreadcrumb pageTitle=\"Home\" href=\"#\">\r\n <SlottedSVG\r\n slot=\"icon\"\r\n width=\"24\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n >\r\n <path\r\n d=\"M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z\"\r\n fill=\"currentColor\"\r\n />\r\n </SlottedSVG>\r\n </IcBreadcrumb>\r\n <IcBreadcrumb pageTitle=\"Beverages\" href=\"#\">\r\n <SlottedSVG\r\n slot=\"icon\"\r\n width=\"24\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n >\r\n <path\r\n d=\"M20 3H4v10c0 2.21 1.79 4 4 4h6c2.21 0 4-1.79 4-4v-3h2c1.11 0 2-.9 2-2V5c0-1.11-.89-2-2-2zm0 5h-2V5h2v3zM4 19h16v2H4z\"\r\n fill=\"currentColor\"\r\n />\r\n </SlottedSVG>\r\n </IcBreadcrumb>\r\n <IcBreadcrumb \r\n pageTitle=\"Coffee\" \r\n current\r\n href=\"#\"\r\n >\r\n <SlottedSVG\r\n slot=\"icon\"\r\n width=\"24\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n >\r\n <path\r\n d=\"M18.5 3H6c-1.1 0-2 .9-2 2v5.71c0 3.83 2.95 7.18 6.78 7.29 3.96.12 7.22-3.06 7.22-7v-1h.5c1.93 0 3.5-1.57 3.5-3.5S20.43 3 18.5 3zM16 5v3H6V5h10zm2.5 3H18V5h.5c.83 0 1.5.67 1.5 1.5S19.33 8 18.5 8zM4 19h16v2H4v-2z\"\r\n fill=\"currentColor\"\r\n />\r\n </SlottedSVG>\r\n </IcBreadcrumb>\r\n</IcBreadcrumbGroup>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `{shortCode}`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `{shortCode}`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview snippets={withIcons}>\r\n <IcBreadcrumbGroup>\r\n <IcBreadcrumb pageTitle=\"Home\" href=\"#\" onClick={(e) => e.preventDefault()}>\r\n <svg\r\n slot=\"icon\"\r\n width=\"24\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n >\r\n <path\r\n d=\"M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z\"\r\n fill=\"currentColor\"\r\n />\r\n </svg>\r\n </IcBreadcrumb>\r\n <IcBreadcrumb\r\n pageTitle=\"Beverages\"\r\n href=\"#\"\r\n onClick={(e) => e.preventDefault()}\r\n >\r\n <svg\r\n slot=\"icon\"\r\n width=\"24\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n >\r\n <path\r\n d=\"M20 3H4v10c0 2.21 1.79 4 4 4h6c2.21 0 4-1.79 4-4v-3h2c1.11 0 2-.9 2-2V5c0-1.11-.89-2-2-2zm0 5h-2V5h2v3zM4 19h16v2H4z\"\r\n fill=\"currentColor\"\r\n />\r\n </svg>\r\n </IcBreadcrumb>\r\n <IcBreadcrumb\r\n pageTitle=\"Coffee\"\r\n current\r\n href=\"#\"\r\n onClick={(e) => e.preventDefault()}\r\n >\r\n <svg\r\n slot=\"icon\"\r\n width=\"24\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n >\r\n <path\r\n d=\"M18.5 3H6c-1.1 0-2 .9-2 2v5.71c0 3.83 2.95 7.18 6.78 7.29 3.96.12 7.22-3.06 7.22-7v-1h.5c1.93 0 3.5-1.57 3.5-3.5S20.43 3 18.5 3zM16 5v3H6V5h10zm2.5 3H18V5h.5c.83 0 1.5.67 1.5 1.5S19.33 8 18.5 8zM4 19h16v2H4v-2z\"\r\n fill=\"currentColor\"\r\n />\r\n </svg>\r\n </IcBreadcrumb>\r\n </IcBreadcrumbGroup>\r\n</ComponentPreview>\r\n\r\n### Collapsed\r\n\r\nexport const collapsed = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-breadcrumb-group collapsed=\"true\">\r\n <ic-breadcrumb page-title=\"Home\" href=\"#\"></ic-breadcrumb>\r\n <ic-breadcrumb page-title=\"Beverages\" href=\"#\"></ic-breadcrumb>\r\n <ic-breadcrumb \r\n current=\"true\" \r\n page-title=\"Coffee\" \r\n href=\"#\"\r\n >\r\n </ic-breadcrumb>\r\n</ic-breadcrumb-group>`,\r\n long: `{shortCode}`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcBreadcrumbGroup collapsed>\r\n <IcBreadcrumb pageTitle=\"Home\" href=\"#\" />\r\n <IcBreadcrumb pageTitle=\"Beverages\" href=\"#\" />\r\n <IcBreadcrumb \r\n pageTitle=\"Coffee\" \r\n current\r\n href=\"#\"\r\n />\r\n</IcBreadcrumbGroup>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `{shortCode}`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `{shortCode}`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview snippets={collapsed}>\r\n <IcBreadcrumbGroup collapsed>\r\n <IcBreadcrumb\r\n pageTitle=\"Home\"\r\n href=\"#\"\r\n onClick={(e) => e.preventDefault()}\r\n />\r\n <IcBreadcrumb\r\n pageTitle=\"Beverages\"\r\n href=\"#\"\r\n onClick={(e) => e.preventDefault()}\r\n />\r\n <IcBreadcrumb\r\n pageTitle=\"Coffee\"\r\n current\r\n href=\"#\"\r\n onClick={(e) => e.preventDefault()}\r\n />\r\n </IcBreadcrumbGroup>\r\n</ComponentPreview>\r\n\r\n### With React Router\r\n\r\nexport const withReactRouter = [\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<MemoryRouter initialEntries={[\"/\"]}>\r\n <IcBreadcrumbGroup>\r\n <IcBreadcrumb pageTitle=\"Home\">\r\n <IcLink>\r\n <NavLink slot=\"router-item\" to=\"/\">Home</NavLink>\r\n </IcLink>\r\n </IcBreadcrumb>\r\n <IcBreadcrumb pageTitle=\"Beverages\">\r\n <IcLink>\r\n <NavLink slot=\"router-item\" to=\"/\">Beverages</NavLink>\r\n </IcLink>\r\n </IcBreadcrumb>\r\n <IcBreadcrumb pageTitle=\"Coffee\" current>\r\n <IcLink>\r\n <NavLink to=\"/\" slot=\"router-item\">Coffee</NavLink>\r\n </IcLink>\r\n </IcBreadcrumb>\r\n </IcBreadcrumbGroup>\r\n</MemoryRouter>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `{shortCode}`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `{shortCode}`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview snippets={withReactRouter}>\r\n <MemoryRouter initialEntries={[\"/\"]}>\r\n <IcBreadcrumbGroup>\r\n <IcBreadcrumb pageTitle=\"Home\">\r\n <IcLink>\r\n <NavLink slot=\"router-item\" to=\"/\">\r\n Home\r\n </NavLink>\r\n </IcLink>\r\n </IcBreadcrumb>\r\n <IcBreadcrumb pageTitle=\"Beverages\">\r\n <IcLink>\r\n <NavLink slot=\"router-item\" to=\"/\">\r\n Beverages\r\n </NavLink>\r\n </IcLink>\r\n </IcBreadcrumb>\r\n <IcBreadcrumb pageTitle=\"Coffee\" current>\r\n <IcLink>\r\n <NavLink to=\"/\" slot=\"router-item\">\r\n Coffee\r\n </NavLink>\r\n </IcLink>\r\n </IcBreadcrumb>\r\n </IcBreadcrumbGroup>\r\n </MemoryRouter>\r\n</ComponentPreview>\r\n",
"path": "/components/breadcrumb/code",
"date": "2024-05-31",
"title": "Breadcrumb",
@@ -1157,16 +1157,16 @@
}
],
"meta": {
- "relativePath": "components/breadcrumbs/code.mdx",
- "createdAt": "2024-11-06T10:27:49.404Z",
- "lastModified": "2024-11-06T10:18:59.936Z",
- "size": 11522,
- "formattedSize": "11.3 KB"
+ "relativePath": "components\\breadcrumbs\\code.mdx",
+ "createdAt": "2024-12-04T13:23:54.060Z",
+ "lastModified": "2024-12-04T13:23:54.060Z",
+ "size": 12008,
+ "formattedSize": "11.7 KB"
}
},
{
"id": "components\\breadcrumbs\\guidancex",
- "contents": "\nimport { IcBreadcrumbGroup, IcBreadcrumb } from \"@ukic/react\";\nimport breadcrumbsFig1 from \"./images/fig-1-use-breadcrumbs-as-a-secondary-navigation-method.png\";\nimport breadcrumbsFig2 from \"./images/fig-2-dont-use-breadcrumbs-for-shallow-app-structures.png\";\nimport breadcrumbsFig3 from \"./images/fig-3-dont-include-current-page-in-breadcrumbs.png\";\nimport breadcrumbsFig4 from \"./images/fig-4-use-contrast-breadcrumbs-for-different-backgrounds.png\";\n\n## Introduction\n\nAn example of the breadcrumbs component.\n\n<ComponentPreview>\n <IcBreadcrumbGroup>\n <IcBreadcrumb\n pageTitle=\"Home\"\n href=\"#\"\n onClick={(e) => e.preventDefault()}\n />\n <IcBreadcrumb\n pageTitle=\"Beverages\"\n href=\"#\"\n onClick={(e) => e.preventDefault()}\n />\n <IcBreadcrumb\n current=\"true\"\n pageTitle=\"Coffee\"\n href=\"#\"\n onClick={(e) => e.preventDefault()}\n />\n </IcBreadcrumbGroup>\n</ComponentPreview>\n\n## When to use\n\nUse breadcrumbs to describe an app’s hierarchy and where the current page sits within it. Use breadcrumbs for apps that have a large number of pages within a complex structure.\n\nShow the current page’s parents, grandparents and other ancestors so that the user can easily move back up the hierarchy. Always show a link to the app’s homepage as the top-level link in the breadcrumb component.\n\nUse breadcrumbs as a secondary navigation option to supplement the app’s main navigation method.\n\n<DoDontCaution\n imageSrc={breadcrumbsFig1}\n imageAlt=\"Above the page header is a breadcrumb component with links to parent pages for ‘Coffees’, ‘Beverages’ and ‘Home’. This is separate from the site navigation.\"\n state=\"good\"\n caption=\"A breadcrumb providing a secondary method of navigation that supplements the main navigation from the top navigation.\"\n/>\n\nUse the ‘back breadcrumb’ for apps with simple structures that are only one or two levels deep. Show the current page’s immediate parent in the back breadcrumb link.\n\nUse a condensed breadcrumb to hide the middle steps between the page’s parent and the homepage. However, always allow the condensed breadcrumb to be expanded to show the full path.\n\n## When not to use\n\nDon’t use breadcrumbs as the primary method of navigating through an app’s pages. Always include a global navigation method to allow any page to be easily accessed from any other page.\n\nDon’t use breadcrumbs to show the history of recently visited pages. Only use breadcrumbs to show the location of the current page within an app’s structure.\n\nDon’t use breadcrumbs if the app’s structure is only one or two pages deep. Use the ‘back breadcrumb’ or use a different method to indicate the page’s position.\n\n<DoDontCaution\n imageSrc={breadcrumbsFig2}\n imageAlt=\"Above the page header is a breadcrumb component with links to parent pages for ‘Coffee’ and ‘Home’.\"\n state=\"bad\"\n caption=\"Don’t use breadcrumbs for apps with structures that are only one or two pages deep.\"\n/>\n\nDon’t include the current page as a link within the breadcrumbs. Instead use clear titling on the page itself to label the current page. If displaying the current page within the breadcrumb, then make sure it is not clickable.\n\n<DoDontCaution\n imageSrc={breadcrumbsFig3}\n imageAlt=\"An example app called ‘A whole latte love’ showing a page titled ‘Latte’. A breadcrumb exists in the page header that includes links to the current page ‘Latte’, and its ancestors ‘Coffee’, ‘Beverages’ and ‘Home’.\"\n state=\"bad\"\n caption=\"Don’t include the current page as a link within the breadcrumb.\"\n/>\n\nAvoid showing more than six levels in a breadcrumb. Consider your app’s information architecture and whether the site’s structure can be flattened. If this can’t be achieved, use hub pages as the first link in a breadcrumb, which themselves provide a method of returning back to the homepage.\n\n## Colour\n\nAlways use the default appearance of breadcrumbs to ensure that the links are recognisable as links. However, use the light or dark appearance if breadcrumbs are positioned on different coloured backgrounds to ensure good colour contrast.\n\n<DoDontCaution\n imageSrc={breadcrumbsFig4}\n imageAlt=\"An example app called ‘A whole latte love’ that shows a page titled ‘Latte’. A hero banner sits at the top of the page with a dark blue background. A breadcrumb component that sits on top of the dark hero banner uses white styled links to achieve high contrast.\"\n state=\"good\"\n caption=\"Use contrast styling if using breadcrumbs on different coloured backgrounds.\"\n/>\n\n## Content\n\nMake sure that the breadcrumb label is the exact title of the page it links to.\n\n## Layout and placement\n\nAlways position breadcrumbs at the top of page content but below main navigation components such as the [top navigation](/components/top-navigation).\n\n## Related components\n\n- [Page header](/components/page-header)\n",
+ "contents": "\r\nimport { IcBreadcrumbGroup, IcBreadcrumb } from \"@ukic/react\";\r\nimport breadcrumbsFig1 from \"./images/fig-1-use-breadcrumbs-as-a-secondary-navigation-method.png\";\r\nimport breadcrumbsFig2 from \"./images/fig-2-dont-use-breadcrumbs-for-shallow-app-structures.png\";\r\nimport breadcrumbsFig3 from \"./images/fig-3-dont-include-current-page-in-breadcrumbs.png\";\r\nimport breadcrumbsFig4 from \"./images/fig-4-use-contrast-breadcrumbs-for-different-backgrounds.png\";\r\n\r\n## Introduction\r\n\r\nAn example of the breadcrumbs component.\r\n\r\n<ComponentPreview>\r\n <IcBreadcrumbGroup>\r\n <IcBreadcrumb\r\n pageTitle=\"Home\"\r\n href=\"#\"\r\n onClick={(e) => e.preventDefault()}\r\n />\r\n <IcBreadcrumb\r\n pageTitle=\"Beverages\"\r\n href=\"#\"\r\n onClick={(e) => e.preventDefault()}\r\n />\r\n <IcBreadcrumb\r\n current=\"true\"\r\n pageTitle=\"Coffee\"\r\n href=\"#\"\r\n onClick={(e) => e.preventDefault()}\r\n />\r\n </IcBreadcrumbGroup>\r\n</ComponentPreview>\r\n\r\n## When to use\r\n\r\nUse breadcrumbs to describe an app’s hierarchy and where the current page sits within it. Use breadcrumbs for apps that have a large number of pages within a complex structure.\r\n\r\nShow the current page’s parents, grandparents and other ancestors so that the user can easily move back up the hierarchy. Always show a link to the app’s homepage as the top-level link in the breadcrumb component.\r\n\r\nUse breadcrumbs as a secondary navigation option to supplement the app’s main navigation method.\r\n\r\n<DoDontCaution\r\n imageSrc={breadcrumbsFig1}\r\n imageAlt=\"Above the page header is a breadcrumb component with links to parent pages for ‘Coffees’, ‘Beverages’ and ‘Home’. This is separate from the site navigation.\"\r\n state=\"good\"\r\n caption=\"A breadcrumb providing a secondary method of navigation that supplements the main navigation from the top navigation.\"\r\n/>\r\n\r\nUse the ‘back breadcrumb’ for apps with simple structures that are only one or two levels deep. Show the current page’s immediate parent in the back breadcrumb link.\r\n\r\nUse a condensed breadcrumb to hide the middle steps between the page’s parent and the homepage. However, always allow the condensed breadcrumb to be expanded to show the full path.\r\n\r\n## When not to use\r\n\r\nDon’t use breadcrumbs as the primary method of navigating through an app’s pages. Always include a global navigation method to allow any page to be easily accessed from any other page.\r\n\r\nDon’t use breadcrumbs to show the history of recently visited pages. Only use breadcrumbs to show the location of the current page within an app’s structure.\r\n\r\nDon’t use breadcrumbs if the app’s structure is only one or two pages deep. Use the ‘back breadcrumb’ or use a different method to indicate the page’s position.\r\n\r\n<DoDontCaution\r\n imageSrc={breadcrumbsFig2}\r\n imageAlt=\"Above the page header is a breadcrumb component with links to parent pages for ‘Coffee’ and ‘Home’.\"\r\n state=\"bad\"\r\n caption=\"Don’t use breadcrumbs for apps with structures that are only one or two pages deep.\"\r\n/>\r\n\r\nDon’t include the current page as a link within the breadcrumbs. Instead use clear titling on the page itself to label the current page. If displaying the current page within the breadcrumb, then make sure it is not clickable.\r\n\r\n<DoDontCaution\r\n imageSrc={breadcrumbsFig3}\r\n imageAlt=\"An example app called ‘A whole latte love’ showing a page titled ‘Latte’. A breadcrumb exists in the page header that includes links to the current page ‘Latte’, and its ancestors ‘Coffee’, ‘Beverages’ and ‘Home’.\"\r\n state=\"bad\"\r\n caption=\"Don’t include the current page as a link within the breadcrumb.\"\r\n/>\r\n\r\nAvoid showing more than six levels in a breadcrumb. Consider your app’s information architecture and whether the site’s structure can be flattened. If this can’t be achieved, use hub pages as the first link in a breadcrumb, which themselves provide a method of returning back to the homepage.\r\n\r\n## Colour\r\n\r\nAlways use the default appearance of breadcrumbs to ensure that the links are recognisable as links. However, use the light or dark appearance if breadcrumbs are positioned on different coloured backgrounds to ensure good colour contrast.\r\n\r\n<DoDontCaution\r\n imageSrc={breadcrumbsFig4}\r\n imageAlt=\"An example app called ‘A whole latte love’ that shows a page titled ‘Latte’. A hero banner sits at the top of the page with a dark blue background. A breadcrumb component that sits on top of the dark hero banner uses white styled links to achieve high contrast.\"\r\n state=\"good\"\r\n caption=\"Use contrast styling if using breadcrumbs on different coloured backgrounds.\"\r\n/>\r\n\r\n## Content\r\n\r\nMake sure that the breadcrumb label is the exact title of the page it links to.\r\n\r\n## Layout and placement\r\n\r\nAlways position breadcrumbs at the top of page content but below main navigation components such as the [top navigation](/components/top-navigation).\r\n\r\n## Related components\r\n\r\n- [Page header](/components/page-header)\r\n",
"path": "/components/breadcrumb",
"navPriority": 5,
"date": "2023-02-03",
@@ -1190,11 +1190,11 @@
],
"tags": ["Breadcrumb trail"],
"meta": {
- "relativePath": "components/breadcrumbs/guidance.mdx",
- "createdAt": "2024-11-06T10:27:49.404Z",
- "lastModified": "2024-11-06T10:18:59.936Z",
- "size": 5560,
- "formattedSize": "5.4 KB"
+ "relativePath": "components\\breadcrumbs\\guidance.mdx",
+ "createdAt": "2024-12-04T13:23:54.060Z",
+ "lastModified": "2024-12-04T13:23:54.060Z",
+ "size": 5683,
+ "formattedSize": "5.5 KB"
}
},
{
@@ -1221,15 +1221,15 @@
}
],
"meta": {
- "relativePath": "components/buttons/accessibility.mdx",
- "createdAt": "2024-11-06T10:27:49.404Z",
- "lastModified": "2024-11-06T10:18:59.968Z",
+ "relativePath": "components\\buttons\\accessibility.mdx",
+ "createdAt": "2024-11-05T11:57:50.498Z",
+ "lastModified": "2024-11-05T11:57:50.498Z",
"size": 1688,
"formattedSize": "1.6 KB"
}
},
{
- "id": "components__buttons__codex",
+ "id": "components\\buttons\\codex",
"contents": "\nimport { IcButton, IcMenuGroup, IcMenuItem, IcPopoverMenu } from \"@ukic/react\";\nimport { useState } from \"react\";\n\n## Component demo\n\nexport const snippetsDefault = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-button id='my-button' variant=\"primary\">Add to order</ic-button>\n<ic-button variant=\"secondary\">View coffees</ic-button>\n<ic-button variant=\"tertiary\">Find out more</ic-button>\n<ic-button variant=\"destructive\">Cancel order</ic-button>`,\n long: `.parent-container {\n display: flex;\n flex-wrap: wrap;\n gap: var(--ic-space-xs);\n padding: var(--ic-space-md);\n }\n</style>\n<body>\n <div class=\"parent-container\">\n {shortCode}\n </div>\n <script>\n const btn = document.querySelector('#my-button');\n btn.addEventListener('click', (ev) => {\n console.log(ev);\n })\n </script>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcButton variant=\"primary\" onClick={(ev) => console.log(ev)}>\n Add to order\n</IcButton>\n<IcButton variant=\"secondary\">View coffees</IcButton>\n<IcButton variant=\"tertiary\">Find out more</IcButton>\n<IcButton variant=\"destructive\">Cancel order</IcButton>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n display: \"flex\",\n flexWrap: \"wrap\",\n gap: \"var(--ic-space-xs)\",\n padding: \"var(--ic-space-md)\",\n },\n});\nconst classes = useStyles();\nreturn (\n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n display: \"flex\",\n flexWrap: \"wrap\",\n gap: \"var(--ic-space-xs)\",\n padding: \"var(--ic-space-md)\",\n },\n});\nconst classes = useStyles();\nreturn (\n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview style={{ gap: \"0.5rem\" }} snippets={snippetsDefault}>\n <IcButton variant=\"primary\" onClick={(ev) => console.log(ev)}>\n Add to order\n </IcButton>\n <IcButton variant=\"secondary\">View coffees</IcButton>\n <IcButton variant=\"tertiary\">Find out more</IcButton>\n <IcButton variant=\"destructive\">Cancel order</IcButton>\n</ComponentPreview>\n\n## Button details\n\n<ComponentDetails component=\"ic-button\" />\n\n## Variants\n\n### Other states\n\nexport const snippetsOtherStates = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-button variant=\"primary\" disabled=\"true\">Add to order</ic-button>\n<ic-button variant=\"secondary\" loading=\"true\">Loading button</ic-button>\n<ic-button variant=\"primary\" dropdown=\"true\">Add to order</ic-button>`,\n long: `.parent-container {\n display: flex;\n flex-wrap: wrap;\n gap: var(--ic-space-xs);\n padding: var(--ic-space-md);\n }\n</style>\n<body> \n <div class=\"parent-container\">\n {shortCode}\n </div>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcButton variant=\"primary\" disabled>Add to order</IcButton>\n<IcButton variant=\"secondary\" loading>Loading button</IcButton>\n<IcButton variant=\"primary\" dropdown>Add to order</IcButton>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n display: \"flex\",\n flexWrap: \"wrap\",\n gap: \"var(--ic-space-xs)\",\n padding: \"var(--ic-space-md)\",\n },\n});\nconst classes = useStyles();\nreturn (\n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n display: \"flex\",\n flexWrap: \"wrap\",\n gap: \"var(--ic-space-xs)\",\n padding: \"var(--ic-space-md)\",\n },\n});\nconst classes = useStyles();\nreturn (\n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview style={{ gap: \"0.5rem\" }} snippets={snippetsOtherStates}>\n <IcButton variant=\"primary\" disabled>\n Add to order\n </IcButton>\n <IcButton variant=\"secondary\" loading>\n Loading button\n </IcButton>\n <IcButton variant=\"primary\" dropdown>\n Add to order\n </IcButton>\n</ComponentPreview>\n\n### With icon\n\nexport const snippetsWithIcon = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-button variant=\"primary\">\n <svg\n slot=\"left-icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n fill=\"#000000\"\n >\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\"></path>\n <path d=\"M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z\"></path>\n </svg>\n Refresh order status\n</ic-button>`,\n long: `.parent-container {\n padding: var(--ic-space-md);\n }\n</style>\n<body> \n <div class=\"parent-container\">\n {shortCode}\n </div>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcButton variant=\"primary\">\n <SlottedSVG\n slot=\"left-icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n fill=\"#000000\"\n >\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\"></path>\n <path d=\"M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z\"></path>\n </SlottedSVG>\n Refresh order status\n</IcButton>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n padding: \"var(--ic-space-md)\",\n },\n});\nconst classes = useStyles();\nreturn (\n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n padding: \"var(--ic-space-md)\",\n },\n});\nconst classes = useStyles();\nreturn (\n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview style={{ gap: \"0.5rem\" }} snippets={snippetsWithIcon}>\n <IcButton variant=\"primary\">\n Refresh order status\n <svg\n slot=\"left-icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n fill=\"#000000\"\n >\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n <path d=\"M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z\" />\n </svg>\n </IcButton>\n</ComponentPreview>\n\n### Icon Button\n\nWhen using an icon button, refer to the guidance of using [tooltips](/components/tooltip/#when-to-use). When disabling tooltips, provide a suitable `aria-label` or `title` to provide context to screen readers.\n\nexport const snippetsIcon = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-button \n variant=\"icon-primary\" \n aria-label=\"refresh\"\n>\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"#000000\"\n >\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\"></path>\n <path d=\"M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z\"></path>\n </svg>\n</ic-button>\n<ic-button \n variant=\"icon-secondary\" \n aria-label=\"refresh\"\n>\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"#000000\"\n >\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\"></path>\n <path d=\"M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z\"></path>\n </svg>\n</ic-button>\n<ic-button \n variant=\"icon-tertiary\" \n aria-label=\"refresh\"\n>\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"#000000\"\n >\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\"></path>\n <path d=\"M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z\"></path>\n </svg>\n</ic-button>\n<ic-button \n variant=\"icon-destructive\" \n aria-label=\"refresh\"\n>\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"#000000\"\n >\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\"></path>\n <path d=\"M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z\"></path>\n </svg>\n</ic-button>\n<ic-button\n variant=\"icon\"\n aria-label=\"you can disable tooltips on icon buttons\"\n disable-tooltip=\"true\"\n>\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"#000000\"\n >\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\"></path>\n <path d=\"M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z\"></path>\n </svg>\n</ic-button>`,\n long: `.parent-container {\n display: flex;\n flex-wrap: wrap;\n gap: var(--ic-space-xs);\n padding: var(--ic-space-md);\n }\n</style>\n<body> \n <div class=\"parent-container\">\n {shortCode}\n </div>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcButton \n variant=\"icon-primary\" \n aria-label=\"refresh\"\n>\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n fill=\"#000000\"\n >\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\"></path>\n <path d=\"M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z\"></path>\n </svg>\n</IcButton>\n<IcButton \n variant=\"icon-secondary\" \n aria-label=\"refresh\"\n>\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n fill=\"#000000\"\n >\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\"></path>\n <path d=\"M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z\"></path>\n </svg>\n</IcButton>\n<IcButton \n variant=\"icon-tertiary\" \n aria-label=\"refresh\"\n>\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n fill=\"#000000\"\n >\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\"></path>\n <path d=\"M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z\"></path>\n </svg>\n</IcButton>\n<IcButton \n variant=\"icon-destructive\" \n aria-label=\"refresh\"\n>\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n fill=\"#000000\"\n >\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\"></path>\n <path d=\"M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z\"></path>\n </svg>\n</IcButton>\n<IcButton\n variant=\"icon\"\n aria-label=\"you can disable tooltips on icon buttons\"\n disableTooltip\n>\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\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</IcButton>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n display: \"flex\",\n flexWrap: \"wrap\",\n gap: \"var(--ic-space-xs)\",\n padding: \"var(--ic-space-md)\",\n },\n});\nconst classes = useStyles();\nreturn (\n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n display: \"flex\",\n flexWrap: \"wrap\",\n gap: \"var(--ic-space-xs)\",\n padding: \"var(--ic-space-md)\",\n },\n});\nconst classes = useStyles();\nreturn (\n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview style={{ gap: \"0.5rem\" }} snippets={snippetsIcon}>\n <IcButton variant=\"icon-primary\" aria-label=\"refresh\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n fill=\"#000000\"\n >\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n <path d=\"M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z\" />\n </svg>\n </IcButton>\n <IcButton\n variant=\"icon-secondary\"\n aria-label=\"you can disable tooltips on icon buttons\"\n >\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"#000000\"\n >\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n <path d=\"M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z\" />\n </svg>\n </IcButton>\n <IcButton variant=\"icon-tertiary\" aria-label=\"refresh\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"#000000\"\n >\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n <path d=\"M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z\" />\n </svg>\n </IcButton>\n <IcButton variant=\"icon-destructive\" aria-label=\"refresh\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"#000000\"\n >\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n <path d=\"M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z\" />\n </svg>\n </IcButton>\n <IcButton\n variant=\"icon\"\n aria-label=\"you can disable tooltips on icon buttons\"\n disableTooltip\n >\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"#000000\"\n >\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n <path d=\"M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z\" />\n </svg>\n </IcButton>\n</ComponentPreview>\n\n### Tooltip\n\nexport const snippetsTooltip = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-button variant=\"primary\" title=\"We can add tooltips to text buttons\">Button With Title</ic-button>\n<ic-button\n variant=\"primary\"\n title=\"the tooltipPlacement prop allows us to change the location of the tooltip\"\n tooltip-placement=\"right\"\n>\n Different positions\n</ic-button>`,\n long: `.parent-container {\n display: flex;\n flex-wrap: wrap;\n gap: var(--ic-space-xs);\n padding: var(--ic-space-md);\n }\n</style>\n<body> \n <div class=\"parent-container\">\n {shortCode}\n </div>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcButton variant=\"primary\" title=\"We can add tooltips to text buttons\">\n Button With Title\n</IcButton>\n<IcButton\n variant=\"primary\"\n title=\"the tooltipPlacement prop allows us to change the location of the tooltip\"\n tooltipPlacement=\"right\"\n>\n Different positions\n</IcButton>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n display: \"flex\",\n flexWrap: \"wrap\",\n gap: \"var(--ic-space-xs)\",\n padding: \"var(--ic-space-md)\",\n },\n});\nconst classes = useStyles();\nreturn (\n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n display: \"flex\",\n flexWrap: \"wrap\",\n gap: \"var(--ic-space-xs)\",\n padding: \"var(--ic-space-md)\",\n },\n});\nconst classes = useStyles();\nreturn (\n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview\n style={{ gap: \"var(--ic-space-xs)\" }}\n snippets={snippetsTooltip}\n>\n <IcButton variant=\"primary\" title=\"We can add tooltips to text buttons\">\n Button With Title\n </IcButton>\n <IcButton\n variant=\"primary\"\n title=\"the tooltipPlacement prop allows us to change the location of the tooltip\"\n tooltipPlacement=\"right\"\n >\n Different positions\n </IcButton>\n</ComponentPreview>\n\n### Sizing\n\nexport const snippetsSizing = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-button variant=\"primary\" size=\"small\">Add to order</ic-button>\n<ic-button variant=\"primary\">Add to order</ic-button>\n<ic-button variant=\"primary\" size=\"large\">Add to order</ic-button>`,\n long: `.parent-container {\n display: flex;\n flex-wrap: wrap;\n gap: var(--ic-space-xs);\n padding: var(--ic-space-md);\n }\n</style>\n<body> \n <div class=\"parent-container\">\n {shortCode}\n </div>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcButton variant=\"primary\" size=\"small\">Add to order</IcButton>\n<IcButton variant=\"primary\">Add to order</IcButton>\n<IcButton variant=\"primary\" size=\"large\">Add to order</IcButton>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n display: \"flex\",\n flexWrap: \"wrap\",\n gap: \"var(--ic-space-xs)\",\n padding: \"var(--ic-space-md)\",\n },\n});\nconst classes = useStyles();\nreturn (\n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n display: \"flex\",\n flexWrap: \"wrap\",\n gap: \"var(--ic-space-xs)\",\n padding: \"var(--ic-space-md)\",\n },\n});\nconst classes = useStyles();\nreturn (\n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview style={{ gap: \"0.5rem\" }} snippets={snippetsSizing}>\n <IcButton variant=\"primary\" size=\"small\">\n Add to order\n </IcButton>\n <IcButton variant=\"primary\">Add to order</IcButton>\n <IcButton variant=\"primary\" size=\"large\">\n Add to order\n </IcButton>\n</ComponentPreview>\n\n### Colour variants\n\nexport const snippetsColour = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-button variant=\"primary\">Add to order</ic-button>\n<ic-button variant=\"primary\" appearance=\"dark\">Add to order</ic-button>\n<ic-button variant=\"primary\" appearance=\"light\">Add to order</ic-button>`,\n long: `.parent-container {\n display: flex;\n flex-wrap: wrap;\n gap: var(--ic-space-xs);\n padding: var(--ic-space-md);\n }\n</style>\n<body> \n <div class=\"parent-container\">\n {shortCode}\n </div>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcButton variant=\"primary\">Add to order</IcButton>\n<IcButton variant=\"primary\" appearance=\"dark\">Add to order</IcButton>\n<IcButton variant=\"primary\" appearance=\"light\">Add to order</IcButton>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n display: \"flex\",\n flexWrap: \"wrap\",\n gap: \"var(--ic-space-xs)\",\n padding: \"var(--ic-space-md)\",\n },\n});\nconst classes = useStyles();\nreturn (\n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n display: \"flex\",\n flexWrap: \"wrap\",\n gap: \"var(--ic-space-xs)\",\n padding: \"var(--ic-space-md)\",\n },\n});\nconst classes = useStyles();\nreturn (\n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview style={{ gap: \"0.5rem\" }} snippets={snippetsColour}>\n <IcButton variant=\"primary\">Add to order</IcButton>\n <IcButton variant=\"primary\" appearance=\"dark\">\n Add to order\n </IcButton>\n <IcButton variant=\"primary\" appearance=\"light\">\n Add to order\n </IcButton>\n</ComponentPreview>\n\n### File upload\n\nexport const snippetsFileUpload = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-button\n variant=\"primary\"\n id=\"file-button-single\"\n file-upload=\"true\"\n accept=\".doc, text/plain, .json, .png\"\n>\n Upload a file\n</ic-button>\n<ic-button\n variant=\"primary\"\n id=\"file-button-multiple\"\n file-upload=\"true\"\n multiple=\"true\"\n accept=\".doc, text/plain, .json, .png\"\n>\n Upload multiple files\n</ic-button>`,\n long: `.parent-container {\n display: flex;\n flex-wrap: wrap;\n gap: var(--ic-space-xs);\n padding: var(--ic-space-md);\n }\n</style>\n<body> \n <div class=\"parent-container\">\n {shortCode}\n </div>\n <script>\n document\n .querySelector(\"#file-button-single\")\n .addEventListener(\"icFileSelection\", (ev) => {\n console.log(\"Single file upload\", ev.detail);\n });\n document\n .querySelector(\"#file-button-multiple\")\n .addEventListener(\"icFileSelection\", (ev) => {\n console.log(\"Multiple files upload\", ev.detail);\n });\n </script>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcButton\n variant=\"primary\"\n fileUpload\n accept=\".doc, text/plain, .json, .png\"\n onIcFileSelection={(event) =>\n console.log(\"Single file upload\", event.detail)\n }\n>\n Upload a file\n</IcButton>\n<IcButton\n variant=\"primary\"\n fileUpload\n multiple\n accept=\".doc, text/plain, .json, .png\"\n onIcFileSelection={(event) =>\n console.log(\"Multiple files upload\", event.detail)\n }\n>\n Upload multiple files\n</IcButton>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n display: \"flex\",\n flexWrap: \"wrap\",\n gap: \"var(--ic-space-xs)\",\n padding: \"var(--ic-space-md)\",\n },\n});\nconst classes = useStyles();\nreturn (\n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n display: \"flex\",\n flexWrap: \"wrap\",\n gap: \"var(--ic-space-xs)\",\n padding: \"var(--ic-space-md)\",\n },\n});\nconst classes = useStyles();\nreturn (\n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={snippetsFileUpload} style={{ gap: \"0.5rem\" }}>\n <IcButton\n variant=\"primary\"\n fileUpload\n accept=\".doc, text/plain, .json, .png\"\n onIcFileSelection={(event) =>\n console.log(\"Single file upload\", event.detail)\n }\n >\n Upload a file\n </IcButton>\n <IcButton\n variant=\"primary\"\n fileUpload\n multiple\n accept=\".doc, text/plain, .json, .png\"\n onIcFileSelection={(event) =>\n console.log(\"Multiple files upload\", event.detail)\n }\n >\n Upload multiple files\n </IcButton>\n</ComponentPreview>\n\n### Dropdown button with popover menu\n\nexport const snippetsDropdownButton = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-button\n dropdown=\"true\"\n variant=\"primary\"\n id=\"dropdown-button-popover\"\n onclick=\"handleClick()\"\n>\n Actions\n</ic-button>\n<ic-popover-menu\n anchor=\"dropdown-button-popover\"\n aria-label=\"popover\"\n id=\"dropdown-button-popover-menu\"\n>\n <ic-menu-group label=\"Sort\">\n <ic-menu-item label=\"Sort ascending\">\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n >\n <path\n d=\"M7.03 9.97H11.03V18.89L13.04 18.92V9.97H17.03L12.03 4.97Z\"\n />\n </svg>\n </ic-menu-item>\n <ic-menu-item label=\"Sort descending\">\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n >\n <path d=\"M7.03 13.92H11.03V5L13.04 4.97V13.92H17.03L12.03 18.92Z\" />\n </svg>\n </ic-menu-item>\n </ic-menu-group>\n <ic-menu-item label=\"Filter\" variant=\"toggle\">\n <svg slot=\"icon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <path\n d=\"M2.39 1.73L1.11 3L9 10.89V15.87C8.96 16.16 9.06 16.47 9.29 16.7L13.3 20.71C13.69 21.1 14.32 21.1 14.71 20.71C14.94 20.5 15.04 20.18 15 19.88V16.89L20.84 22.73L22.11 21.46L15 14.35V14.34L13 12.35L11 10.34L4.15 3.5L2.39 1.73M6.21 3L8.2 5H16.96L13.11 9.91L15 11.8V10.75L19.79 4.62C20.13 4.19 20.05 3.56 19.62 3.22C19.43 3.08 19.22 3 19 3H6.21M11 12.89L13 14.89V17.58L11 15.58V12.89Z\"\n />\n </svg>\n </ic-menu-item>\n <ic-menu-group label=\"Manage columns\">\n <ic-menu-item label=\"Hide column\" variant=\"toggle\">\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n >\n <path\n d=\"M2,5.27L3.28,4L20,20.72L18.73,22L15.65,18.92C14.5,19.3 13.28,19.5 12,19.5C7,19.5 2.73,16.39 1,12C1.69,10.24 2.79,8.69 4.19,7.46L2,5.27M12,9A3,3 0 0,1 15,12C15,12.35 14.94,12.69 14.83,13L11,9.17C11.31,9.06 11.65,9 12,9M12,4.5C17,4.5 21.27,7.61 23,12C22.18,14.08 20.79,15.88 19,17.19L17.58,15.76C18.94,14.82 20.06,13.54 20.82,12C19.17,8.64 15.76,6.5 12,6.5C10.91,6.5 9.84,6.68 8.84,7L7.3,5.47C8.74,4.85 10.33,4.5 12,4.5M3.18,12C4.83,15.36 8.24,17.5 12,17.5C12.69,17.5 13.37,17.43 14,17.29L11.72,15C10.29,14.85 9.15,13.71 9,12.28L5.6,8.87C4.61,9.72 3.78,10.78 3.18,12Z\"\n />\n </svg>\n </ic-menu-item>\n <ic-menu-item label=\"Column width\">\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n >\n <path d=\"M21,9L17,5V8H10V10H17V13M7,11L3,15L7,19V16H14V14H7V11Z\" />\n </svg>\n </ic-menu-item>\n </ic-menu-group>\n</ic-popover-menu>`,\n long: `{shortCode}\n<script>\n let icPopover = document.querySelector('#dropdown-button-popover-menu');\n let icButton = document.querySelector('#dropdown-button-popover');\n function handleClick() {\n icPopover.open = !icPopover.open;\n }\n icPopover.addEventListener('icPopoverClosed', (ev) => {\n icButton.setAttribute('dropdown-expanded', false);\n });\n</script>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcButton\n dropdown\n dropdownExpanded={popoverOpen}\n variant=\"primary\"\n id=\"dropdown-button-popover\"\n onClick={handlePopoverToggled}\n>\n Actions\n</IcButton>\n<IcPopoverMenu\n anchor=\"dropdown-button-popover\"\n aria-label=\"popover\"\n open={popoverOpen}\n onIcPopoverClosed={handlePopoverClosed}\n>\n <IcMenuGroup label=\"Sort\">\n <IcMenuItem label=\"Sort ascending\">\n <SlottedSVG\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n path={mdiArrowUpThin}\n />\n </IcMenuItem>\n <IcMenuItem label=\"Sort descending\">\n <SlottedSVG\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n path={mdiArrowDownThin}\n />\n </IcMenuItem>\n </IcMenuGroup>\n <IcMenuItem label=\"Filter\" variant=\"toggle\">\n <SlottedSVG\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n path={mdiFilterOffOutline}\n />\n </IcMenuItem>\n <IcMenuGroup label=\"Manage columns\">\n <IcMenuItem label=\"Hide column\" variant=\"toggle\">\n <SlottedSVG\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n path={mdiEyeOffOutline}\n />\n </IcMenuItem>\n <IcMenuItem label=\"Column width\">\n <SlottedSVG\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n path={mdiSwapHorizontal}\n />\n </IcMenuItem>\n </IcMenuGroup>\n</IcPopoverMenu>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const [popoverOpen, setPopoverOpen] = useState<boolean>(false);\nconst handlePopoverToggled = () => setPopoverOpen(value => !value);\nconst handlePopoverClosed = () => setPopoverOpen(false);\nreturn (\n <>\n {shortCode}\n </>\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const [popoverOpen, setPopoverOpen] = useState(false);\nconst handlePopoverToggled = () => setPopoverOpen(value => !value);\nconst handlePopoverClosed = () => setPopoverOpen(false);\nreturn (\n <>\n {shortCode}\n </>\n)`,\n },\n ],\n },\n },\n];\n\nexport const DropdownButtonPopover = () => {\n const [popoverOpen, setPopoverOpen] = useState(false);\n const handlePopoverToggled = () => setPopoverOpen((value) => !value);\n const handlePopoverClosed = () => setPopoverOpen(false);\n return (\n <>\n <IcButton\n dropdown\n dropdownExpanded={popoverOpen}\n variant=\"primary\"\n id=\"dropdown-button-popover\"\n onClick={handlePopoverToggled}\n >\n Actions\n </IcButton>\n <IcPopoverMenu\n anchor=\"dropdown-button-popover\"\n aria-label=\"popover\"\n open={popoverOpen}\n onIcPopoverClosed={handlePopoverClosed}\n >\n <IcMenuGroup label=\"Sort\">\n <IcMenuItem label=\"Sort ascending\">\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n >\n <path d=\"M7.03 9.97H11.03V18.89L13.04 18.92V9.97H17.03L12.03 4.97Z\" />\n </svg>\n </IcMenuItem>\n <IcMenuItem label=\"Sort descending\">\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n >\n <path d=\"M7.03 13.92H11.03V5L13.04 4.97V13.92H17.03L12.03 18.92Z\" />\n </svg>\n </IcMenuItem>\n </IcMenuGroup>\n <IcMenuItem label=\"Filter\" variant=\"toggle\">\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n >\n <path d=\"M2.39 1.73L1.11 3L9 10.89V15.87C8.96 16.16 9.06 16.47 9.29 16.7L13.3 20.71C13.69 21.1 14.32 21.1 14.71 20.71C14.94 20.5 15.04 20.18 15 19.88V16.89L20.84 22.73L22.11 21.46L15 14.35V14.34L13 12.35L11 10.34L4.15 3.5L2.39 1.73M6.21 3L8.2 5H16.96L13.11 9.91L15 11.8V10.75L19.79 4.62C20.13 4.19 20.05 3.56 19.62 3.22C19.43 3.08 19.22 3 19 3H6.21M11 12.89L13 14.89V17.58L11 15.58V12.89Z\" />\n </svg>\n </IcMenuItem>\n <IcMenuGroup label=\"Manage columns\">\n <IcMenuItem label=\"Hide column\" variant=\"toggle\">\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n >\n <path d=\"M2,5.27L3.28,4L20,20.72L18.73,22L15.65,18.92C14.5,19.3 13.28,19.5 12,19.5C7,19.5 2.73,16.39 1,12C1.69,10.24 2.79,8.69 4.19,7.46L2,5.27M12,9A3,3 0 0,1 15,12C15,12.35 14.94,12.69 14.83,13L11,9.17C11.31,9.06 11.65,9 12,9M12,4.5C17,4.5 21.27,7.61 23,12C22.18,14.08 20.79,15.88 19,17.19L17.58,15.76C18.94,14.82 20.06,13.54 20.82,12C19.17,8.64 15.76,6.5 12,6.5C10.91,6.5 9.84,6.68 8.84,7L7.3,5.47C8.74,4.85 10.33,4.5 12,4.5M3.18,12C4.83,15.36 8.24,17.5 12,17.5C12.69,17.5 13.37,17.43 14,17.29L11.72,15C10.29,14.85 9.15,13.71 9,12.28L5.6,8.87C4.61,9.72 3.78,10.78 3.18,12Z\" />\n </svg>\n </IcMenuItem>\n <IcMenuItem label=\"Column width\">\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n >\n <path d=\"M21,9L17,5V8H10V10H17V13M7,11L3,15L7,19V16H14V14H7V11Z\" />\n </svg>\n </IcMenuItem>\n </IcMenuGroup>\n </IcPopoverMenu>\n </>\n );\n};\n\n<ComponentPreview\n style={{\n display: \"flex\",\n justifyContent: \"center\",\n }}\n snippets={snippetsDropdownButton}\n>\n <DropdownButtonPopover />\n</ComponentPreview>\n",
"path": "/components/button/code",
"date": "2024-05-31",
@@ -1252,9 +1252,9 @@
}
],
"meta": {
- "relativePath": "components/buttons/code.mdx",
- "createdAt": "2024-11-06T14:48:03.255Z",
- "lastModified": "2024-11-06T14:48:03.255Z",
+ "relativePath": "components\\buttons\\code.mdx",
+ "createdAt": "2024-11-13T13:49:38.752Z",
+ "lastModified": "2024-11-13T13:49:38.752Z",
"size": 33585,
"formattedSize": "32.8 KB"
}
@@ -1284,16 +1284,16 @@
}
],
"meta": {
- "relativePath": "components/buttons/guidance.mdx",
- "createdAt": "2024-11-06T10:27:49.404Z",
- "lastModified": "2024-11-06T10:18:59.968Z",
+ "relativePath": "components\\buttons\\guidance.mdx",
+ "createdAt": "2024-11-05T11:57:50.611Z",
+ "lastModified": "2024-11-05T11:57:50.611Z",
"size": 15266,
"formattedSize": "14.9 KB"
}
},
{
"id": "components\\card-horizontal\\codex",
- "contents": "\nimport { IcCardHorizontal } from \"@ukic/canary-react\";\nimport { IcTypography } from \"@ukic/react\";\n\n## Component demo\n\nexport const snippetsDefault = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-card-horizontal \n heading=\"Americano order\" \n message=\"Extras: Double espresso shot and oat milk.\"\n>\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n fill=\"#000000\"\n >\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\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 long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcCardHorizontal\n heading=\"Americano order\"\n message=\"Extras: Double espresso shot and oat milk.\"\n>\n <SlottedSVG\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n fill=\"#000000\"\n >\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\n </SlottedSVG>\n <SlottedSVG\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 </SlottedSVG>\n</IcCardHorizontal>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `{shortCode}`,\n },\n {\n language: \"Javascript\",\n snippet: `{shortCode}`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={snippetsDefault}>\n <IcCardHorizontal\n heading=\"Americano order\"\n message=\"Extras: Double espresso shot and oat milk.\"\n >\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n fill=\"#000000\"\n >\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n </svg>\n <svg slot=\"image\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 1600 900\">\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 </IcCardHorizontal>\n</ComponentPreview>\n\n## Horizontal card details\n\n<ComponentDetails component=\"ic-card-horizontal\" canary />\n\n## Variants\n\n### Heading only\n\nexport const snippetsHeadingOnly = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-card-horizontal heading=\"Americano order\"></ic-card-horizontal>`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcCardHorizontal heading=\"Americano order\" />`,\n long: [\n {\n language: \"Typescript\",\n snippet: `{shortCode}`,\n },\n {\n language: \"Javascript\",\n snippet: `{shortCode}`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={snippetsHeadingOnly}>\n <IcCardHorizontal heading=\"Americano order\" />\n</ComponentPreview>\n\n### With icon\n\nexport const snippetsWithIcon = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-card-horizontal heading=\"Americano order\">\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n fill=\"#000000\"\n >\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\n </svg>\n</ic-card-horizontal>`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcCardHorizontal heading=\"Americano order\">\n <SlottedSVG\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n fill=\"#000000\"\n >\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\n </SlottedSVG>\n</IcCardHorizontal>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `{shortCode}`,\n },\n {\n language: \"Javascript\",\n snippet: `{shortCode}`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={snippetsWithIcon}>\n <IcCardHorizontal heading=\"Americano order\">\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n fill=\"#000000\"\n >\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n </svg>\n </IcCardHorizontal>\n</ComponentPreview>\n\n### With message\n\nexport const snippetsWithMessage = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-card-horizontal \n heading=\"Americano order\" \n message=\"Extras: Double espresso shot and oat milk.\"\n>\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n fill=\"#000000\"\n >\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\n </svg>\n</ic-card-horizontal>`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcCardHorizontal \n heading=\"Americano order\" \n message=\"Extras: Double espresso shot and oat milk.\"\n>\n <SlottedSVG\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n fill=\"#000000\"\n >\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\n </SlottedSVG>\n</IcCardHorizontal>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `{shortCode}`,\n },\n {\n language: \"Javascript\",\n snippet: `{shortCode}`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={snippetsWithMessage}>\n <IcCardHorizontal\n heading=\"Americano order\"\n message=\"Extras: Double espresso shot and oat milk.\"\n >\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n fill=\"#000000\"\n >\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n </svg>\n </IcCardHorizontal>\n</ComponentPreview>\n\n### With image\n\nexport const snippetsWithImage = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-card-horizontal \n heading=\"Americano order\" \n message=\"Extras: Double espresso shot and oat milk.\"\n>\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n fill=\"#000000\"\n >\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\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 long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcCardHorizontal\n heading=\"Americano order\"\n message=\"Extras: Double espresso shot and oat milk.\"\n>\n <SlottedSVG\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n fill=\"#000000\"\n >\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\n </SlottedSVG>\n <SlottedSVG\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 </SlottedSVG>\n</IcCardHorizontal>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `{shortCode}`,\n },\n {\n language: \"Javascript\",\n snippet: `{shortCode}`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={snippetsWithImage}>\n <IcCardHorizontal\n heading=\"Americano order\"\n message=\"Extras: Double espresso shot and oat milk.\"\n >\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n fill=\"#000000\"\n >\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n </svg>\n <svg slot=\"image\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 1600 900\">\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 </IcCardHorizontal>\n</ComponentPreview>\n\n### Small\n\nexport const snippetsSmall = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-card-horizontal \n heading=\"Americano order\" \n message=\"Extras: Double espresso shot and oat milk.\" \n size=\"small\"\n>\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n fill=\"#000000\"\n >\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\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 long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcCardHorizontal\n heading=\"Americano order\"\n message=\"Extras: Double espresso shot and oat milk.\"\n size=\"small\"\n>\n <SlottedSVG\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n fill=\"#000000\"\n >\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\n </SlottedSVG>\n <SlottedSVG\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 </SlottedSVG>\n</IcCardHorizontal>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `{shortCode}`,\n },\n {\n language: \"Javascript\",\n snippet: `{shortCode}`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={snippetsSmall}>\n <IcCardHorizontal\n heading=\"Americano order\"\n message=\"Extras: Double espresso shot and oat milk.\"\n size=\"small\"\n >\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n fill=\"#000000\"\n >\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n </svg>\n <svg slot=\"image\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 1600 900\">\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 </IcCardHorizontal>\n</ComponentPreview>\n\n### Large\n\nexport const snippetsLarge = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-card-horizontal \n heading=\"Americano order\" \n message=\"Extras: Double espresso shot and oat milk. Size: Grande. Order type: Takeaway.\" \n size=\"large\"\n>\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n fill=\"#000000\"\n >\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\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 long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcCardHorizontal\n heading=\"Americano order\"\n message=\"Extras: Double espresso shot and oat milk. Size: Grande. Order type: Takeaway.\"\n size=\"large\"\n>\n <SlottedSVG\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n fill=\"#000000\"\n >\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\n </SlottedSVG>\n <SlottedSVG\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 </SlottedSVG>\n</IcCardHorizontal>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `{shortCode}`,\n },\n {\n language: \"Javascript\",\n snippet: `{shortCode}`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={snippetsLarge}>\n <IcCardHorizontal\n heading=\"Americano order\"\n message=\"Extras: Double espresso shot and oat milk. Size: Grande. Order type: Takeaway.\"\n size=\"large\"\n >\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n fill=\"#000000\"\n >\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n </svg>\n <svg slot=\"image\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 1600 900\">\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 </IcCardHorizontal>\n</ComponentPreview>\n\n### Extra large\n\nexport const snippetsXL = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-card-horizontal \n heading=\"Americano order\" \n message=\"Extras: Double espresso shot and oat milk. Size: Venti. Order type: Takeaway via drive-through.\" \n size=\"extra-large\"\n>\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n fill=\"#000000\"\n >\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\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 long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcCardHorizontal\n heading=\"Americano order\"\n message=\"Extras: Double espresso shot and oat milk. Size: Venti. Order type: Takeaway via drive-through.\"\n size=\"extra-large\"\n>\n <SlottedSVG\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n fill=\"#000000\"\n >\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\n </SlottedSVG>\n <SlottedSVG\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 </SlottedSVG>\n</IcCardHorizontal>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `{shortCode}`,\n },\n {\n language: \"Javascript\",\n snippet: `{shortCode}`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={snippetsXL}>\n <IcCardHorizontal\n heading=\"Americano order\"\n message=\"Extras: Double espresso shot and oat milk. Size: Venti. Order type: Takeaway via drive-through.\"\n size=\"extra-large\"\n >\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n fill=\"#000000\"\n >\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n </svg>\n <svg slot=\"image\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 1600 900\">\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 </IcCardHorizontal>\n</ComponentPreview>\n\n### Clickable\n\nexport const snippetsClickable = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-card-horizontal \n heading=\"Americano order\" \n message=\"Extras: Double espresso shot and oat milk.\" \n clickable=\"true\"\n>\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n fill=\"#000000\"\n >\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\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 long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcCardHorizontal\n heading=\"Americano order\"\n message=\"Extras: Double espresso shot and oat milk.\"\n clickable\n>\n <SlottedSVG\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n fill=\"#000000\"\n >\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\n </SlottedSVG>\n <SlottedSVG\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 </SlottedSVG>\n</IcCardHorizontal>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `{shortCode}`,\n },\n {\n language: \"Javascript\",\n snippet: `{shortCode}`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={snippetsClickable}>\n <IcCardHorizontal\n heading=\"Americano order\"\n message=\"Extras: Double espresso shot and oat milk.\"\n clickable\n >\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n fill=\"#000000\"\n >\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n </svg>\n <svg slot=\"image\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 1600 900\">\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 </IcCardHorizontal>\n</ComponentPreview>\n\n### Clickable link\n\nexport const snippetsClickableHref = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-card-horizontal \n heading=\"Americano order\" \n message=\"Extras: Double espresso shot and oat milk.\" \n clickable=\"true\" \n href=\"#\"\n>\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n fill=\"#000000\"\n >\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\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 long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcCardHorizontal\n heading=\"Americano order\"\n message=\"Extras: Double espresso shot and oat milk.\"\n clickable\n href=\"#\"\n>\n <SlottedSVG\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n fill=\"#000000\"\n >\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\n </SlottedSVG>\n <SlottedSVG\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 </SlottedSVG>\n</IcCardHorizontal>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `{shortCode}`,\n },\n {\n language: \"Javascript\",\n snippet: `{shortCode}`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={snippetsClickableHref}>\n <IcCardHorizontal\n heading=\"Americano order\"\n message=\"Extras: Double espresso shot and oat milk.\"\n clickable\n href=\"#\"\n >\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n fill=\"#000000\"\n >\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n </svg>\n <svg slot=\"image\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 1600 900\">\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 </IcCardHorizontal>\n</ComponentPreview>\n\n### Wrapped by link\n\nexport const snippetsWrapped = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<a href=\"/\">\n <ic-card-horizontal \n heading=\"Americano order\" \n message=\"Extras: Double espresso shot and oat milk.\" \n >\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n fill=\"#000000\"\n >\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\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</a>`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<a href=\"/\">\n <IcCardHorizontal\n heading=\"Americano order\"\n message=\"Extras: Double espresso shot and oat milk.\"\n >\n <SlottedSVG\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n fill=\"#000000\"\n >\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\n </SlottedSVG>\n <SlottedSVG\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 </SlottedSVG>\n </IcCardHorizontal>\n</a>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `{shortCode}`,\n },\n {\n language: \"Javascript\",\n snippet: `{shortCode}`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={snippetsWrapped}>\n <a\n href=\"/\"\n onClick={(e) => e.preventDefault()}\n style={{ textDecoration: \"none\", color: \"var(--ic-architechtural-black)\" }}\n aria-label=\"Americano order card\"\n >\n <IcCardHorizontal\n heading=\"Americano order\"\n message=\"Extras: Double espresso shot and oat milk.\"\n >\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n fill=\"#000000\"\n >\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\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 </IcCardHorizontal>\n </a>\n</ComponentPreview>\n\n### Disabled\n\nexport const snippetsDisabled = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-card-horizontal \n heading=\"Americano order\" \n message=\"Extras: Double espresso shot and oat milk.\" \n clickable=\"true\" \n disabled=\"true\"\n>\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n fill=\"#000000\"\n >\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\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 long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcCardHorizontal\n heading=\"Americano order\"\n message=\"Extras: Double espresso shot and oat milk.\"\n clickable\n disabled\n>\n <SlottedSVG\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n fill=\"#000000\"\n >\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\n </SlottedSVG>\n <SlottedSVG\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 </SlottedSVG>\n</IcCardHorizontal>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `{shortCode}`,\n },\n {\n language: \"Javascript\",\n snippet: `{shortCode}`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={snippetsDisabled}>\n <IcCardHorizontal\n heading=\"Americano order\"\n message=\"Extras: Double espresso shot and oat milk.\"\n clickable\n disabled\n >\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n fill=\"#000000\"\n >\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n </svg>\n <svg slot=\"image\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 1600 900\">\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 </IcCardHorizontal>\n</ComponentPreview>\n\n### Slotted heading and message\n\nexport const snippetsSlottedHeading = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-card-horizontal>\n <ic-typography slot=\"heading\" variant=\"h4\">Americano order</ic-typography>\n <ic-typography slot=\"message\">Extras: Double espresso shot and oat milk.</ic-typography>\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n fill=\"#000000\"\n >\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\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 long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcCardHorizontal>\n <IcTypography slot=\"heading\" variant=\"h4\">Americano order</IcTypography>\n <IcTypography slot=\"message\">Extras: Double espresso shot and oat milk.</IcTypography>\n <SlottedSVG\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n fill=\"#000000\"\n >\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\n </SlottedSVG>\n <SlottedSVG\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 </SlottedSVG>\n</IcCardHorizontal>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `{shortCode}`,\n },\n {\n language: \"Javascript\",\n snippet: `{shortCode}`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={snippetsSlottedHeading}>\n <IcCardHorizontal>\n <IcTypography slot=\"heading\" variant=\"h4\">\n Americano order\n </IcTypography>\n <IcTypography slot=\"message\">\n Extras: Double espresso shot and oat milk.\n </IcTypography>\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n fill=\"#000000\"\n >\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n </svg>\n <svg slot=\"image\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 1600 900\">\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 </IcCardHorizontal>\n</ComponentPreview>\n",
+ "contents": "\r\nimport { IcCardHorizontal } from \"@ukic/canary-react\";\r\nimport { IcTypography } from \"@ukic/react\";\r\n\r\n## Component demo\r\n\r\nexport const snippetsDefault = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-card-horizontal \r\n heading=\"Americano order\" \r\n message=\"Extras: Double espresso shot and oat milk.\"\r\n>\r\n <svg\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n width=\"24\"\r\n fill=\"#000000\"\r\n >\r\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\r\n </svg>\r\n <svg\r\n slot=\"image\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 1600 900\"\r\n >\r\n <rect fill=\"#ff7700\" width=\"1600\" height=\"1600\" y=\"-350\" />\r\n <polygon fill=\"#cc0000\" points=\"957 450 539 900 1396 900\" />\r\n <polygon fill=\"#aa0000\" points=\"957 450 872.9 900 1396 900\" />\r\n <polygon fill=\"#c50022\" points=\"-60 900 398 662 816 900\" />\r\n <polygon fill=\"#a3001b\" points=\"337 900 398 662 816 900\" />\r\n <polygon fill=\"#be0044\" points=\"1203 546 1552 900 876 900\" />\r\n <polygon fill=\"#9c0036\" points=\"1203 546 1552 900 1162 900\" />\r\n <polygon fill=\"#b80066\" points=\"641 695 886 900 367 900\" />\r\n <polygon fill=\"#960052\" points=\"587 900 641 695 886 900\" />\r\n <polygon fill=\"#b10088\" points=\"1710 900 1401 632 1096 900\" />\r\n <polygon fill=\"#8f006d\" points=\"1710 900 1401 632 1365 900\" />\r\n <polygon fill=\"#aa00aa\" points=\"1210 900 971 687 725 900\" />\r\n <polygon fill=\"#880088\" points=\"943 900 1210 900 971 687\" />\r\n </svg>\r\n</ic-card-horizontal>`,\r\n long: `{shortCode}`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcCardHorizontal\r\n heading=\"Americano order\"\r\n message=\"Extras: Double espresso shot and oat milk.\"\r\n>\r\n <SlottedSVG\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n width=\"24\"\r\n fill=\"#000000\"\r\n >\r\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\r\n </SlottedSVG>\r\n <SlottedSVG\r\n slot=\"image\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 1600 900\"\r\n >\r\n <rect fill=\"#ff7700\" width=\"1600\" height=\"1600\" y=\"-350\" />\r\n <polygon fill=\"#cc0000\" points=\"957 450 539 900 1396 900\" />\r\n <polygon fill=\"#aa0000\" points=\"957 450 872.9 900 1396 900\" />\r\n <polygon fill=\"#c50022\" points=\"-60 900 398 662 816 900\" />\r\n <polygon fill=\"#a3001b\" points=\"337 900 398 662 816 900\" />\r\n <polygon fill=\"#be0044\" points=\"1203 546 1552 900 876 900\" />\r\n <polygon fill=\"#9c0036\" points=\"1203 546 1552 900 1162 900\" />\r\n <polygon fill=\"#b80066\" points=\"641 695 886 900 367 900\" />\r\n <polygon fill=\"#960052\" points=\"587 900 641 695 886 900\" />\r\n <polygon fill=\"#b10088\" points=\"1710 900 1401 632 1096 900\" />\r\n <polygon fill=\"#8f006d\" points=\"1710 900 1401 632 1365 900\" />\r\n <polygon fill=\"#aa00aa\" points=\"1210 900 971 687 725 900\" />\r\n <polygon fill=\"#880088\" points=\"943 900 1210 900 971 687\" />\r\n </SlottedSVG>\r\n</IcCardHorizontal>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `{shortCode}`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `{shortCode}`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview snippets={snippetsDefault}>\r\n <IcCardHorizontal\r\n heading=\"Americano order\"\r\n message=\"Extras: Double espresso shot and oat milk.\"\r\n >\r\n <svg\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n width=\"24\"\r\n fill=\"#000000\"\r\n >\r\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\r\n </svg>\r\n <svg slot=\"image\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 1600 900\">\r\n <rect fill=\"#ff7700\" width=\"1600\" height=\"1600\" y=\"-350\" />\r\n <polygon fill=\"#cc0000\" points=\"957 450 539 900 1396 900\" />\r\n <polygon fill=\"#aa0000\" points=\"957 450 872.9 900 1396 900\" />\r\n <polygon fill=\"#c50022\" points=\"-60 900 398 662 816 900\" />\r\n <polygon fill=\"#a3001b\" points=\"337 900 398 662 816 900\" />\r\n <polygon fill=\"#be0044\" points=\"1203 546 1552 900 876 900\" />\r\n <polygon fill=\"#9c0036\" points=\"1203 546 1552 900 1162 900\" />\r\n <polygon fill=\"#b80066\" points=\"641 695 886 900 367 900\" />\r\n <polygon fill=\"#960052\" points=\"587 900 641 695 886 900\" />\r\n <polygon fill=\"#b10088\" points=\"1710 900 1401 632 1096 900\" />\r\n <polygon fill=\"#8f006d\" points=\"1710 900 1401 632 1365 900\" />\r\n <polygon fill=\"#aa00aa\" points=\"1210 900 971 687 725 900\" />\r\n <polygon fill=\"#880088\" points=\"943 900 1210 900 971 687\" />\r\n </svg>\r\n </IcCardHorizontal>\r\n</ComponentPreview>\r\n\r\n## Horizontal card details\r\n\r\n<ComponentDetails component=\"ic-card-horizontal\" canary />\r\n\r\n## Variants\r\n\r\n### Heading only\r\n\r\nexport const snippetsHeadingOnly = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-card-horizontal heading=\"Americano order\"></ic-card-horizontal>`,\r\n long: `{shortCode}`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcCardHorizontal heading=\"Americano order\" />`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `{shortCode}`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `{shortCode}`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview snippets={snippetsHeadingOnly}>\r\n <IcCardHorizontal heading=\"Americano order\" />\r\n</ComponentPreview>\r\n\r\n### With icon\r\n\r\nexport const snippetsWithIcon = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-card-horizontal heading=\"Americano order\">\r\n <svg\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n width=\"24\"\r\n fill=\"#000000\"\r\n >\r\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\r\n </svg>\r\n</ic-card-horizontal>`,\r\n long: `{shortCode}`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcCardHorizontal heading=\"Americano order\">\r\n <SlottedSVG\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n width=\"24\"\r\n fill=\"#000000\"\r\n >\r\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\r\n </SlottedSVG>\r\n</IcCardHorizontal>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `{shortCode}`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `{shortCode}`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview snippets={snippetsWithIcon}>\r\n <IcCardHorizontal heading=\"Americano order\">\r\n <svg\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n width=\"24\"\r\n fill=\"#000000\"\r\n >\r\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\r\n </svg>\r\n </IcCardHorizontal>\r\n</ComponentPreview>\r\n\r\n### With message\r\n\r\nexport const snippetsWithMessage = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-card-horizontal \r\n heading=\"Americano order\" \r\n message=\"Extras: Double espresso shot and oat milk.\"\r\n>\r\n <svg\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n width=\"24\"\r\n fill=\"#000000\"\r\n >\r\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\r\n </svg>\r\n</ic-card-horizontal>`,\r\n long: `{shortCode}`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcCardHorizontal \r\n heading=\"Americano order\" \r\n message=\"Extras: Double espresso shot and oat milk.\"\r\n>\r\n <SlottedSVG\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n width=\"24\"\r\n fill=\"#000000\"\r\n >\r\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\r\n </SlottedSVG>\r\n</IcCardHorizontal>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `{shortCode}`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `{shortCode}`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview snippets={snippetsWithMessage}>\r\n <IcCardHorizontal\r\n heading=\"Americano order\"\r\n message=\"Extras: Double espresso shot and oat milk.\"\r\n >\r\n <svg\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n width=\"24\"\r\n fill=\"#000000\"\r\n >\r\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\r\n </svg>\r\n </IcCardHorizontal>\r\n</ComponentPreview>\r\n\r\n### With image\r\n\r\nexport const snippetsWithImage = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-card-horizontal \r\n heading=\"Americano order\" \r\n message=\"Extras: Double espresso shot and oat milk.\"\r\n>\r\n <svg\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n width=\"24\"\r\n fill=\"#000000\"\r\n >\r\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\r\n </svg>\r\n <svg\r\n slot=\"image\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 1600 900\"\r\n >\r\n <rect fill=\"#ff7700\" width=\"1600\" height=\"1600\" y=\"-350\" />\r\n <polygon fill=\"#cc0000\" points=\"957 450 539 900 1396 900\" />\r\n <polygon fill=\"#aa0000\" points=\"957 450 872.9 900 1396 900\" />\r\n <polygon fill=\"#c50022\" points=\"-60 900 398 662 816 900\" />\r\n <polygon fill=\"#a3001b\" points=\"337 900 398 662 816 900\" />\r\n <polygon fill=\"#be0044\" points=\"1203 546 1552 900 876 900\" />\r\n <polygon fill=\"#9c0036\" points=\"1203 546 1552 900 1162 900\" />\r\n <polygon fill=\"#b80066\" points=\"641 695 886 900 367 900\" />\r\n <polygon fill=\"#960052\" points=\"587 900 641 695 886 900\" />\r\n <polygon fill=\"#b10088\" points=\"1710 900 1401 632 1096 900\" />\r\n <polygon fill=\"#8f006d\" points=\"1710 900 1401 632 1365 900\" />\r\n <polygon fill=\"#aa00aa\" points=\"1210 900 971 687 725 900\" />\r\n <polygon fill=\"#880088\" points=\"943 900 1210 900 971 687\" />\r\n </svg>\r\n</ic-card-horizontal>`,\r\n long: `{shortCode}`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcCardHorizontal\r\n heading=\"Americano order\"\r\n message=\"Extras: Double espresso shot and oat milk.\"\r\n>\r\n <SlottedSVG\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n width=\"24\"\r\n fill=\"#000000\"\r\n >\r\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\r\n </SlottedSVG>\r\n <SlottedSVG\r\n slot=\"image\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 1600 900\"\r\n >\r\n <rect fill=\"#ff7700\" width=\"1600\" height=\"1600\" y=\"-350\" />\r\n <polygon fill=\"#cc0000\" points=\"957 450 539 900 1396 900\" />\r\n <polygon fill=\"#aa0000\" points=\"957 450 872.9 900 1396 900\" />\r\n <polygon fill=\"#c50022\" points=\"-60 900 398 662 816 900\" />\r\n <polygon fill=\"#a3001b\" points=\"337 900 398 662 816 900\" />\r\n <polygon fill=\"#be0044\" points=\"1203 546 1552 900 876 900\" />\r\n <polygon fill=\"#9c0036\" points=\"1203 546 1552 900 1162 900\" />\r\n <polygon fill=\"#b80066\" points=\"641 695 886 900 367 900\" />\r\n <polygon fill=\"#960052\" points=\"587 900 641 695 886 900\" />\r\n <polygon fill=\"#b10088\" points=\"1710 900 1401 632 1096 900\" />\r\n <polygon fill=\"#8f006d\" points=\"1710 900 1401 632 1365 900\" />\r\n <polygon fill=\"#aa00aa\" points=\"1210 900 971 687 725 900\" />\r\n <polygon fill=\"#880088\" points=\"943 900 1210 900 971 687\" />\r\n </SlottedSVG>\r\n</IcCardHorizontal>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `{shortCode}`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `{shortCode}`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview snippets={snippetsWithImage}>\r\n <IcCardHorizontal\r\n heading=\"Americano order\"\r\n message=\"Extras: Double espresso shot and oat milk.\"\r\n >\r\n <svg\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n width=\"24\"\r\n fill=\"#000000\"\r\n >\r\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\r\n </svg>\r\n <svg slot=\"image\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 1600 900\">\r\n <rect fill=\"#ff7700\" width=\"1600\" height=\"1600\" y=\"-350\" />\r\n <polygon fill=\"#cc0000\" points=\"957 450 539 900 1396 900\" />\r\n <polygon fill=\"#aa0000\" points=\"957 450 872.9 900 1396 900\" />\r\n <polygon fill=\"#c50022\" points=\"-60 900 398 662 816 900\" />\r\n <polygon fill=\"#a3001b\" points=\"337 900 398 662 816 900\" />\r\n <polygon fill=\"#be0044\" points=\"1203 546 1552 900 876 900\" />\r\n <polygon fill=\"#9c0036\" points=\"1203 546 1552 900 1162 900\" />\r\n <polygon fill=\"#b80066\" points=\"641 695 886 900 367 900\" />\r\n <polygon fill=\"#960052\" points=\"587 900 641 695 886 900\" />\r\n <polygon fill=\"#b10088\" points=\"1710 900 1401 632 1096 900\" />\r\n <polygon fill=\"#8f006d\" points=\"1710 900 1401 632 1365 900\" />\r\n <polygon fill=\"#aa00aa\" points=\"1210 900 971 687 725 900\" />\r\n <polygon fill=\"#880088\" points=\"943 900 1210 900 971 687\" />\r\n </svg>\r\n </IcCardHorizontal>\r\n</ComponentPreview>\r\n\r\n### Small\r\n\r\nexport const snippetsSmall = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-card-horizontal \r\n heading=\"Americano order\" \r\n message=\"Extras: Double espresso shot and oat milk.\" \r\n size=\"small\"\r\n>\r\n <svg\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n width=\"24\"\r\n fill=\"#000000\"\r\n >\r\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\r\n </svg>\r\n <svg\r\n slot=\"image\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 1600 900\"\r\n >\r\n <rect fill=\"#ff7700\" width=\"1600\" height=\"1600\" y=\"-350\" />\r\n <polygon fill=\"#cc0000\" points=\"957 450 539 900 1396 900\" />\r\n <polygon fill=\"#aa0000\" points=\"957 450 872.9 900 1396 900\" />\r\n <polygon fill=\"#c50022\" points=\"-60 900 398 662 816 900\" />\r\n <polygon fill=\"#a3001b\" points=\"337 900 398 662 816 900\" />\r\n <polygon fill=\"#be0044\" points=\"1203 546 1552 900 876 900\" />\r\n <polygon fill=\"#9c0036\" points=\"1203 546 1552 900 1162 900\" />\r\n <polygon fill=\"#b80066\" points=\"641 695 886 900 367 900\" />\r\n <polygon fill=\"#960052\" points=\"587 900 641 695 886 900\" />\r\n <polygon fill=\"#b10088\" points=\"1710 900 1401 632 1096 900\" />\r\n <polygon fill=\"#8f006d\" points=\"1710 900 1401 632 1365 900\" />\r\n <polygon fill=\"#aa00aa\" points=\"1210 900 971 687 725 900\" />\r\n <polygon fill=\"#880088\" points=\"943 900 1210 900 971 687\" />\r\n </svg>\r\n</ic-card-horizontal>`,\r\n long: `{shortCode}`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcCardHorizontal\r\n heading=\"Americano order\"\r\n message=\"Extras: Double espresso shot and oat milk.\"\r\n size=\"small\"\r\n>\r\n <SlottedSVG\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n width=\"24\"\r\n fill=\"#000000\"\r\n >\r\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\r\n </SlottedSVG>\r\n <SlottedSVG\r\n slot=\"image\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 1600 900\"\r\n >\r\n <rect fill=\"#ff7700\" width=\"1600\" height=\"1600\" y=\"-350\" />\r\n <polygon fill=\"#cc0000\" points=\"957 450 539 900 1396 900\" />\r\n <polygon fill=\"#aa0000\" points=\"957 450 872.9 900 1396 900\" />\r\n <polygon fill=\"#c50022\" points=\"-60 900 398 662 816 900\" />\r\n <polygon fill=\"#a3001b\" points=\"337 900 398 662 816 900\" />\r\n <polygon fill=\"#be0044\" points=\"1203 546 1552 900 876 900\" />\r\n <polygon fill=\"#9c0036\" points=\"1203 546 1552 900 1162 900\" />\r\n <polygon fill=\"#b80066\" points=\"641 695 886 900 367 900\" />\r\n <polygon fill=\"#960052\" points=\"587 900 641 695 886 900\" />\r\n <polygon fill=\"#b10088\" points=\"1710 900 1401 632 1096 900\" />\r\n <polygon fill=\"#8f006d\" points=\"1710 900 1401 632 1365 900\" />\r\n <polygon fill=\"#aa00aa\" points=\"1210 900 971 687 725 900\" />\r\n <polygon fill=\"#880088\" points=\"943 900 1210 900 971 687\" />\r\n </SlottedSVG>\r\n</IcCardHorizontal>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `{shortCode}`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `{shortCode}`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview snippets={snippetsSmall}>\r\n <IcCardHorizontal\r\n heading=\"Americano order\"\r\n message=\"Extras: Double espresso shot and oat milk.\"\r\n size=\"small\"\r\n >\r\n <svg\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n width=\"24\"\r\n fill=\"#000000\"\r\n >\r\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\r\n </svg>\r\n <svg slot=\"image\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 1600 900\">\r\n <rect fill=\"#ff7700\" width=\"1600\" height=\"1600\" y=\"-350\" />\r\n <polygon fill=\"#cc0000\" points=\"957 450 539 900 1396 900\" />\r\n <polygon fill=\"#aa0000\" points=\"957 450 872.9 900 1396 900\" />\r\n <polygon fill=\"#c50022\" points=\"-60 900 398 662 816 900\" />\r\n <polygon fill=\"#a3001b\" points=\"337 900 398 662 816 900\" />\r\n <polygon fill=\"#be0044\" points=\"1203 546 1552 900 876 900\" />\r\n <polygon fill=\"#9c0036\" points=\"1203 546 1552 900 1162 900\" />\r\n <polygon fill=\"#b80066\" points=\"641 695 886 900 367 900\" />\r\n <polygon fill=\"#960052\" points=\"587 900 641 695 886 900\" />\r\n <polygon fill=\"#b10088\" points=\"1710 900 1401 632 1096 900\" />\r\n <polygon fill=\"#8f006d\" points=\"1710 900 1401 632 1365 900\" />\r\n <polygon fill=\"#aa00aa\" points=\"1210 900 971 687 725 900\" />\r\n <polygon fill=\"#880088\" points=\"943 900 1210 900 971 687\" />\r\n </svg>\r\n </IcCardHorizontal>\r\n</ComponentPreview>\r\n\r\n### Large\r\n\r\nexport const snippetsLarge = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-card-horizontal \r\n heading=\"Americano order\" \r\n message=\"Extras: Double espresso shot and oat milk. Size: Grande. Order type: Takeaway.\" \r\n size=\"large\"\r\n>\r\n <svg\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n width=\"24\"\r\n fill=\"#000000\"\r\n >\r\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\r\n </svg>\r\n <svg\r\n slot=\"image\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 1600 900\"\r\n >\r\n <rect fill=\"#ff7700\" width=\"1600\" height=\"1600\" y=\"-350\" />\r\n <polygon fill=\"#cc0000\" points=\"957 450 539 900 1396 900\" />\r\n <polygon fill=\"#aa0000\" points=\"957 450 872.9 900 1396 900\" />\r\n <polygon fill=\"#c50022\" points=\"-60 900 398 662 816 900\" />\r\n <polygon fill=\"#a3001b\" points=\"337 900 398 662 816 900\" />\r\n <polygon fill=\"#be0044\" points=\"1203 546 1552 900 876 900\" />\r\n <polygon fill=\"#9c0036\" points=\"1203 546 1552 900 1162 900\" />\r\n <polygon fill=\"#b80066\" points=\"641 695 886 900 367 900\" />\r\n <polygon fill=\"#960052\" points=\"587 900 641 695 886 900\" />\r\n <polygon fill=\"#b10088\" points=\"1710 900 1401 632 1096 900\" />\r\n <polygon fill=\"#8f006d\" points=\"1710 900 1401 632 1365 900\" />\r\n <polygon fill=\"#aa00aa\" points=\"1210 900 971 687 725 900\" />\r\n <polygon fill=\"#880088\" points=\"943 900 1210 900 971 687\" />\r\n </svg>\r\n</ic-card-horizontal>`,\r\n long: `{shortCode}`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcCardHorizontal\r\n heading=\"Americano order\"\r\n message=\"Extras: Double espresso shot and oat milk. Size: Grande. Order type: Takeaway.\"\r\n size=\"large\"\r\n>\r\n <SlottedSVG\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n width=\"24\"\r\n fill=\"#000000\"\r\n >\r\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\r\n </SlottedSVG>\r\n <SlottedSVG\r\n slot=\"image\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 1600 900\"\r\n >\r\n <rect fill=\"#ff7700\" width=\"1600\" height=\"1600\" y=\"-350\" />\r\n <polygon fill=\"#cc0000\" points=\"957 450 539 900 1396 900\" />\r\n <polygon fill=\"#aa0000\" points=\"957 450 872.9 900 1396 900\" />\r\n <polygon fill=\"#c50022\" points=\"-60 900 398 662 816 900\" />\r\n <polygon fill=\"#a3001b\" points=\"337 900 398 662 816 900\" />\r\n <polygon fill=\"#be0044\" points=\"1203 546 1552 900 876 900\" />\r\n <polygon fill=\"#9c0036\" points=\"1203 546 1552 900 1162 900\" />\r\n <polygon fill=\"#b80066\" points=\"641 695 886 900 367 900\" />\r\n <polygon fill=\"#960052\" points=\"587 900 641 695 886 900\" />\r\n <polygon fill=\"#b10088\" points=\"1710 900 1401 632 1096 900\" />\r\n <polygon fill=\"#8f006d\" points=\"1710 900 1401 632 1365 900\" />\r\n <polygon fill=\"#aa00aa\" points=\"1210 900 971 687 725 900\" />\r\n <polygon fill=\"#880088\" points=\"943 900 1210 900 971 687\" />\r\n </SlottedSVG>\r\n</IcCardHorizontal>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `{shortCode}`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `{shortCode}`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview snippets={snippetsLarge}>\r\n <IcCardHorizontal\r\n heading=\"Americano order\"\r\n message=\"Extras: Double espresso shot and oat milk. Size: Grande. Order type: Takeaway.\"\r\n size=\"large\"\r\n >\r\n <svg\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n width=\"24\"\r\n fill=\"#000000\"\r\n >\r\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\r\n </svg>\r\n <svg slot=\"image\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 1600 900\">\r\n <rect fill=\"#ff7700\" width=\"1600\" height=\"1600\" y=\"-350\" />\r\n <polygon fill=\"#cc0000\" points=\"957 450 539 900 1396 900\" />\r\n <polygon fill=\"#aa0000\" points=\"957 450 872.9 900 1396 900\" />\r\n <polygon fill=\"#c50022\" points=\"-60 900 398 662 816 900\" />\r\n <polygon fill=\"#a3001b\" points=\"337 900 398 662 816 900\" />\r\n <polygon fill=\"#be0044\" points=\"1203 546 1552 900 876 900\" />\r\n <polygon fill=\"#9c0036\" points=\"1203 546 1552 900 1162 900\" />\r\n <polygon fill=\"#b80066\" points=\"641 695 886 900 367 900\" />\r\n <polygon fill=\"#960052\" points=\"587 900 641 695 886 900\" />\r\n <polygon fill=\"#b10088\" points=\"1710 900 1401 632 1096 900\" />\r\n <polygon fill=\"#8f006d\" points=\"1710 900 1401 632 1365 900\" />\r\n <polygon fill=\"#aa00aa\" points=\"1210 900 971 687 725 900\" />\r\n <polygon fill=\"#880088\" points=\"943 900 1210 900 971 687\" />\r\n </svg>\r\n </IcCardHorizontal>\r\n</ComponentPreview>\r\n\r\n### Extra large\r\n\r\nexport const snippetsXL = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-card-horizontal \r\n heading=\"Americano order\" \r\n message=\"Extras: Double espresso shot and oat milk. Size: Venti. Order type: Takeaway via drive-through.\" \r\n size=\"extra-large\"\r\n>\r\n <svg\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n width=\"24\"\r\n fill=\"#000000\"\r\n >\r\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\r\n </svg>\r\n <svg\r\n slot=\"image\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 1600 900\"\r\n >\r\n <rect fill=\"#ff7700\" width=\"1600\" height=\"1600\" y=\"-350\" />\r\n <polygon fill=\"#cc0000\" points=\"957 450 539 900 1396 900\" />\r\n <polygon fill=\"#aa0000\" points=\"957 450 872.9 900 1396 900\" />\r\n <polygon fill=\"#c50022\" points=\"-60 900 398 662 816 900\" />\r\n <polygon fill=\"#a3001b\" points=\"337 900 398 662 816 900\" />\r\n <polygon fill=\"#be0044\" points=\"1203 546 1552 900 876 900\" />\r\n <polygon fill=\"#9c0036\" points=\"1203 546 1552 900 1162 900\" />\r\n <polygon fill=\"#b80066\" points=\"641 695 886 900 367 900\" />\r\n <polygon fill=\"#960052\" points=\"587 900 641 695 886 900\" />\r\n <polygon fill=\"#b10088\" points=\"1710 900 1401 632 1096 900\" />\r\n <polygon fill=\"#8f006d\" points=\"1710 900 1401 632 1365 900\" />\r\n <polygon fill=\"#aa00aa\" points=\"1210 900 971 687 725 900\" />\r\n <polygon fill=\"#880088\" points=\"943 900 1210 900 971 687\" />\r\n </svg>\r\n</ic-card-horizontal>`,\r\n long: `{shortCode}`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcCardHorizontal\r\n heading=\"Americano order\"\r\n message=\"Extras: Double espresso shot and oat milk. Size: Venti. Order type: Takeaway via drive-through.\"\r\n size=\"extra-large\"\r\n>\r\n <SlottedSVG\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n width=\"24\"\r\n fill=\"#000000\"\r\n >\r\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\r\n </SlottedSVG>\r\n <SlottedSVG\r\n slot=\"image\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 1600 900\"\r\n >\r\n <rect fill=\"#ff7700\" width=\"1600\" height=\"1600\" y=\"-350\" />\r\n <polygon fill=\"#cc0000\" points=\"957 450 539 900 1396 900\" />\r\n <polygon fill=\"#aa0000\" points=\"957 450 872.9 900 1396 900\" />\r\n <polygon fill=\"#c50022\" points=\"-60 900 398 662 816 900\" />\r\n <polygon fill=\"#a3001b\" points=\"337 900 398 662 816 900\" />\r\n <polygon fill=\"#be0044\" points=\"1203 546 1552 900 876 900\" />\r\n <polygon fill=\"#9c0036\" points=\"1203 546 1552 900 1162 900\" />\r\n <polygon fill=\"#b80066\" points=\"641 695 886 900 367 900\" />\r\n <polygon fill=\"#960052\" points=\"587 900 641 695 886 900\" />\r\n <polygon fill=\"#b10088\" points=\"1710 900 1401 632 1096 900\" />\r\n <polygon fill=\"#8f006d\" points=\"1710 900 1401 632 1365 900\" />\r\n <polygon fill=\"#aa00aa\" points=\"1210 900 971 687 725 900\" />\r\n <polygon fill=\"#880088\" points=\"943 900 1210 900 971 687\" />\r\n </SlottedSVG>\r\n</IcCardHorizontal>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `{shortCode}`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `{shortCode}`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview snippets={snippetsXL}>\r\n <IcCardHorizontal\r\n heading=\"Americano order\"\r\n message=\"Extras: Double espresso shot and oat milk. Size: Venti. Order type: Takeaway via drive-through.\"\r\n size=\"extra-large\"\r\n >\r\n <svg\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n width=\"24\"\r\n fill=\"#000000\"\r\n >\r\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\r\n </svg>\r\n <svg slot=\"image\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 1600 900\">\r\n <rect fill=\"#ff7700\" width=\"1600\" height=\"1600\" y=\"-350\" />\r\n <polygon fill=\"#cc0000\" points=\"957 450 539 900 1396 900\" />\r\n <polygon fill=\"#aa0000\" points=\"957 450 872.9 900 1396 900\" />\r\n <polygon fill=\"#c50022\" points=\"-60 900 398 662 816 900\" />\r\n <polygon fill=\"#a3001b\" points=\"337 900 398 662 816 900\" />\r\n <polygon fill=\"#be0044\" points=\"1203 546 1552 900 876 900\" />\r\n <polygon fill=\"#9c0036\" points=\"1203 546 1552 900 1162 900\" />\r\n <polygon fill=\"#b80066\" points=\"641 695 886 900 367 900\" />\r\n <polygon fill=\"#960052\" points=\"587 900 641 695 886 900\" />\r\n <polygon fill=\"#b10088\" points=\"1710 900 1401 632 1096 900\" />\r\n <polygon fill=\"#8f006d\" points=\"1710 900 1401 632 1365 900\" />\r\n <polygon fill=\"#aa00aa\" points=\"1210 900 971 687 725 900\" />\r\n <polygon fill=\"#880088\" points=\"943 900 1210 900 971 687\" />\r\n </svg>\r\n </IcCardHorizontal>\r\n</ComponentPreview>\r\n\r\n### Clickable\r\n\r\nexport const snippetsClickable = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-card-horizontal \r\n heading=\"Americano order\" \r\n message=\"Extras: Double espresso shot and oat milk.\" \r\n clickable=\"true\"\r\n>\r\n <svg\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n width=\"24\"\r\n fill=\"#000000\"\r\n >\r\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\r\n </svg>\r\n <svg\r\n slot=\"image\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 1600 900\"\r\n >\r\n <rect fill=\"#ff7700\" width=\"1600\" height=\"1600\" y=\"-350\" />\r\n <polygon fill=\"#cc0000\" points=\"957 450 539 900 1396 900\" />\r\n <polygon fill=\"#aa0000\" points=\"957 450 872.9 900 1396 900\" />\r\n <polygon fill=\"#c50022\" points=\"-60 900 398 662 816 900\" />\r\n <polygon fill=\"#a3001b\" points=\"337 900 398 662 816 900\" />\r\n <polygon fill=\"#be0044\" points=\"1203 546 1552 900 876 900\" />\r\n <polygon fill=\"#9c0036\" points=\"1203 546 1552 900 1162 900\" />\r\n <polygon fill=\"#b80066\" points=\"641 695 886 900 367 900\" />\r\n <polygon fill=\"#960052\" points=\"587 900 641 695 886 900\" />\r\n <polygon fill=\"#b10088\" points=\"1710 900 1401 632 1096 900\" />\r\n <polygon fill=\"#8f006d\" points=\"1710 900 1401 632 1365 900\" />\r\n <polygon fill=\"#aa00aa\" points=\"1210 900 971 687 725 900\" />\r\n <polygon fill=\"#880088\" points=\"943 900 1210 900 971 687\" />\r\n </svg>\r\n</ic-card-horizontal>`,\r\n long: `{shortCode}`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcCardHorizontal\r\n heading=\"Americano order\"\r\n message=\"Extras: Double espresso shot and oat milk.\"\r\n clickable\r\n>\r\n <SlottedSVG\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n width=\"24\"\r\n fill=\"#000000\"\r\n >\r\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\r\n </SlottedSVG>\r\n <SlottedSVG\r\n slot=\"image\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 1600 900\"\r\n >\r\n <rect fill=\"#ff7700\" width=\"1600\" height=\"1600\" y=\"-350\" />\r\n <polygon fill=\"#cc0000\" points=\"957 450 539 900 1396 900\" />\r\n <polygon fill=\"#aa0000\" points=\"957 450 872.9 900 1396 900\" />\r\n <polygon fill=\"#c50022\" points=\"-60 900 398 662 816 900\" />\r\n <polygon fill=\"#a3001b\" points=\"337 900 398 662 816 900\" />\r\n <polygon fill=\"#be0044\" points=\"1203 546 1552 900 876 900\" />\r\n <polygon fill=\"#9c0036\" points=\"1203 546 1552 900 1162 900\" />\r\n <polygon fill=\"#b80066\" points=\"641 695 886 900 367 900\" />\r\n <polygon fill=\"#960052\" points=\"587 900 641 695 886 900\" />\r\n <polygon fill=\"#b10088\" points=\"1710 900 1401 632 1096 900\" />\r\n <polygon fill=\"#8f006d\" points=\"1710 900 1401 632 1365 900\" />\r\n <polygon fill=\"#aa00aa\" points=\"1210 900 971 687 725 900\" />\r\n <polygon fill=\"#880088\" points=\"943 900 1210 900 971 687\" />\r\n </SlottedSVG>\r\n</IcCardHorizontal>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `{shortCode}`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `{shortCode}`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview snippets={snippetsClickable}>\r\n <IcCardHorizontal\r\n heading=\"Americano order\"\r\n message=\"Extras: Double espresso shot and oat milk.\"\r\n clickable\r\n >\r\n <svg\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n width=\"24\"\r\n fill=\"#000000\"\r\n >\r\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\r\n </svg>\r\n <svg slot=\"image\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 1600 900\">\r\n <rect fill=\"#ff7700\" width=\"1600\" height=\"1600\" y=\"-350\" />\r\n <polygon fill=\"#cc0000\" points=\"957 450 539 900 1396 900\" />\r\n <polygon fill=\"#aa0000\" points=\"957 450 872.9 900 1396 900\" />\r\n <polygon fill=\"#c50022\" points=\"-60 900 398 662 816 900\" />\r\n <polygon fill=\"#a3001b\" points=\"337 900 398 662 816 900\" />\r\n <polygon fill=\"#be0044\" points=\"1203 546 1552 900 876 900\" />\r\n <polygon fill=\"#9c0036\" points=\"1203 546 1552 900 1162 900\" />\r\n <polygon fill=\"#b80066\" points=\"641 695 886 900 367 900\" />\r\n <polygon fill=\"#960052\" points=\"587 900 641 695 886 900\" />\r\n <polygon fill=\"#b10088\" points=\"1710 900 1401 632 1096 900\" />\r\n <polygon fill=\"#8f006d\" points=\"1710 900 1401 632 1365 900\" />\r\n <polygon fill=\"#aa00aa\" points=\"1210 900 971 687 725 900\" />\r\n <polygon fill=\"#880088\" points=\"943 900 1210 900 971 687\" />\r\n </svg>\r\n </IcCardHorizontal>\r\n</ComponentPreview>\r\n\r\n### Clickable link\r\n\r\nexport const snippetsClickableHref = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-card-horizontal \r\n heading=\"Americano order\" \r\n message=\"Extras: Double espresso shot and oat milk.\" \r\n clickable=\"true\" \r\n href=\"#\"\r\n>\r\n <svg\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n width=\"24\"\r\n fill=\"#000000\"\r\n >\r\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\r\n </svg>\r\n <svg\r\n slot=\"image\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 1600 900\"\r\n >\r\n <rect fill=\"#ff7700\" width=\"1600\" height=\"1600\" y=\"-350\" />\r\n <polygon fill=\"#cc0000\" points=\"957 450 539 900 1396 900\" />\r\n <polygon fill=\"#aa0000\" points=\"957 450 872.9 900 1396 900\" />\r\n <polygon fill=\"#c50022\" points=\"-60 900 398 662 816 900\" />\r\n <polygon fill=\"#a3001b\" points=\"337 900 398 662 816 900\" />\r\n <polygon fill=\"#be0044\" points=\"1203 546 1552 900 876 900\" />\r\n <polygon fill=\"#9c0036\" points=\"1203 546 1552 900 1162 900\" />\r\n <polygon fill=\"#b80066\" points=\"641 695 886 900 367 900\" />\r\n <polygon fill=\"#960052\" points=\"587 900 641 695 886 900\" />\r\n <polygon fill=\"#b10088\" points=\"1710 900 1401 632 1096 900\" />\r\n <polygon fill=\"#8f006d\" points=\"1710 900 1401 632 1365 900\" />\r\n <polygon fill=\"#aa00aa\" points=\"1210 900 971 687 725 900\" />\r\n <polygon fill=\"#880088\" points=\"943 900 1210 900 971 687\" />\r\n </svg>\r\n</ic-card-horizontal>`,\r\n long: `{shortCode}`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcCardHorizontal\r\n heading=\"Americano order\"\r\n message=\"Extras: Double espresso shot and oat milk.\"\r\n clickable\r\n href=\"#\"\r\n>\r\n <SlottedSVG\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n width=\"24\"\r\n fill=\"#000000\"\r\n >\r\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\r\n </SlottedSVG>\r\n <SlottedSVG\r\n slot=\"image\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 1600 900\"\r\n >\r\n <rect fill=\"#ff7700\" width=\"1600\" height=\"1600\" y=\"-350\" />\r\n <polygon fill=\"#cc0000\" points=\"957 450 539 900 1396 900\" />\r\n <polygon fill=\"#aa0000\" points=\"957 450 872.9 900 1396 900\" />\r\n <polygon fill=\"#c50022\" points=\"-60 900 398 662 816 900\" />\r\n <polygon fill=\"#a3001b\" points=\"337 900 398 662 816 900\" />\r\n <polygon fill=\"#be0044\" points=\"1203 546 1552 900 876 900\" />\r\n <polygon fill=\"#9c0036\" points=\"1203 546 1552 900 1162 900\" />\r\n <polygon fill=\"#b80066\" points=\"641 695 886 900 367 900\" />\r\n <polygon fill=\"#960052\" points=\"587 900 641 695 886 900\" />\r\n <polygon fill=\"#b10088\" points=\"1710 900 1401 632 1096 900\" />\r\n <polygon fill=\"#8f006d\" points=\"1710 900 1401 632 1365 900\" />\r\n <polygon fill=\"#aa00aa\" points=\"1210 900 971 687 725 900\" />\r\n <polygon fill=\"#880088\" points=\"943 900 1210 900 971 687\" />\r\n </SlottedSVG>\r\n</IcCardHorizontal>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `{shortCode}`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `{shortCode}`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview snippets={snippetsClickableHref}>\r\n <IcCardHorizontal\r\n heading=\"Americano order\"\r\n message=\"Extras: Double espresso shot and oat milk.\"\r\n clickable\r\n href=\"#\"\r\n >\r\n <svg\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n width=\"24\"\r\n fill=\"#000000\"\r\n >\r\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\r\n </svg>\r\n <svg slot=\"image\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 1600 900\">\r\n <rect fill=\"#ff7700\" width=\"1600\" height=\"1600\" y=\"-350\" />\r\n <polygon fill=\"#cc0000\" points=\"957 450 539 900 1396 900\" />\r\n <polygon fill=\"#aa0000\" points=\"957 450 872.9 900 1396 900\" />\r\n <polygon fill=\"#c50022\" points=\"-60 900 398 662 816 900\" />\r\n <polygon fill=\"#a3001b\" points=\"337 900 398 662 816 900\" />\r\n <polygon fill=\"#be0044\" points=\"1203 546 1552 900 876 900\" />\r\n <polygon fill=\"#9c0036\" points=\"1203 546 1552 900 1162 900\" />\r\n <polygon fill=\"#b80066\" points=\"641 695 886 900 367 900\" />\r\n <polygon fill=\"#960052\" points=\"587 900 641 695 886 900\" />\r\n <polygon fill=\"#b10088\" points=\"1710 900 1401 632 1096 900\" />\r\n <polygon fill=\"#8f006d\" points=\"1710 900 1401 632 1365 900\" />\r\n <polygon fill=\"#aa00aa\" points=\"1210 900 971 687 725 900\" />\r\n <polygon fill=\"#880088\" points=\"943 900 1210 900 971 687\" />\r\n </svg>\r\n </IcCardHorizontal>\r\n</ComponentPreview>\r\n\r\n### Wrapped by link\r\n\r\nexport const snippetsWrapped = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<a href=\"/\">\r\n <ic-card-horizontal \r\n heading=\"Americano order\" \r\n message=\"Extras: Double espresso shot and oat milk.\" \r\n >\r\n <svg\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n width=\"24\"\r\n fill=\"#000000\"\r\n >\r\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\r\n </svg>\r\n <svg\r\n slot=\"image\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 1600 900\"\r\n >\r\n <rect fill=\"#ff7700\" width=\"1600\" height=\"1600\" y=\"-350\" />\r\n <polygon fill=\"#cc0000\" points=\"957 450 539 900 1396 900\" />\r\n <polygon fill=\"#aa0000\" points=\"957 450 872.9 900 1396 900\" />\r\n <polygon fill=\"#c50022\" points=\"-60 900 398 662 816 900\" />\r\n <polygon fill=\"#a3001b\" points=\"337 900 398 662 816 900\" />\r\n <polygon fill=\"#be0044\" points=\"1203 546 1552 900 876 900\" />\r\n <polygon fill=\"#9c0036\" points=\"1203 546 1552 900 1162 900\" />\r\n <polygon fill=\"#b80066\" points=\"641 695 886 900 367 900\" />\r\n <polygon fill=\"#960052\" points=\"587 900 641 695 886 900\" />\r\n <polygon fill=\"#b10088\" points=\"1710 900 1401 632 1096 900\" />\r\n <polygon fill=\"#8f006d\" points=\"1710 900 1401 632 1365 900\" />\r\n <polygon fill=\"#aa00aa\" points=\"1210 900 971 687 725 900\" />\r\n <polygon fill=\"#880088\" points=\"943 900 1210 900 971 687\" />\r\n </svg>\r\n </ic-card-horizontal>\r\n</a>`,\r\n long: `{shortCode}`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<a href=\"/\">\r\n <IcCardHorizontal\r\n heading=\"Americano order\"\r\n message=\"Extras: Double espresso shot and oat milk.\"\r\n >\r\n <SlottedSVG\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n width=\"24\"\r\n fill=\"#000000\"\r\n >\r\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\r\n </SlottedSVG>\r\n <SlottedSVG\r\n slot=\"image\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 1600 900\"\r\n >\r\n <rect fill=\"#ff7700\" width=\"1600\" height=\"1600\" y=\"-350\" />\r\n <polygon fill=\"#cc0000\" points=\"957 450 539 900 1396 900\" />\r\n <polygon fill=\"#aa0000\" points=\"957 450 872.9 900 1396 900\" />\r\n <polygon fill=\"#c50022\" points=\"-60 900 398 662 816 900\" />\r\n <polygon fill=\"#a3001b\" points=\"337 900 398 662 816 900\" />\r\n <polygon fill=\"#be0044\" points=\"1203 546 1552 900 876 900\" />\r\n <polygon fill=\"#9c0036\" points=\"1203 546 1552 900 1162 900\" />\r\n <polygon fill=\"#b80066\" points=\"641 695 886 900 367 900\" />\r\n <polygon fill=\"#960052\" points=\"587 900 641 695 886 900\" />\r\n <polygon fill=\"#b10088\" points=\"1710 900 1401 632 1096 900\" />\r\n <polygon fill=\"#8f006d\" points=\"1710 900 1401 632 1365 900\" />\r\n <polygon fill=\"#aa00aa\" points=\"1210 900 971 687 725 900\" />\r\n <polygon fill=\"#880088\" points=\"943 900 1210 900 971 687\" />\r\n </SlottedSVG>\r\n </IcCardHorizontal>\r\n</a>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `{shortCode}`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `{shortCode}`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview snippets={snippetsWrapped}>\r\n <a\r\n href=\"/\"\r\n onClick={(e) => e.preventDefault()}\r\n style={{ textDecoration: \"none\", color: \"var(--ic-architechtural-black)\" }}\r\n aria-label=\"Americano order card\"\r\n >\r\n <IcCardHorizontal\r\n heading=\"Americano order\"\r\n message=\"Extras: Double espresso shot and oat milk.\"\r\n >\r\n <svg\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n width=\"24\"\r\n fill=\"#000000\"\r\n >\r\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\r\n </svg>\r\n <svg\r\n slot=\"image\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 1600 900\"\r\n >\r\n <rect fill=\"#ff7700\" width=\"1600\" height=\"1600\" y=\"-350\" />\r\n <polygon fill=\"#cc0000\" points=\"957 450 539 900 1396 900\" />\r\n <polygon fill=\"#aa0000\" points=\"957 450 872.9 900 1396 900\" />\r\n <polygon fill=\"#c50022\" points=\"-60 900 398 662 816 900\" />\r\n <polygon fill=\"#a3001b\" points=\"337 900 398 662 816 900\" />\r\n <polygon fill=\"#be0044\" points=\"1203 546 1552 900 876 900\" />\r\n <polygon fill=\"#9c0036\" points=\"1203 546 1552 900 1162 900\" />\r\n <polygon fill=\"#b80066\" points=\"641 695 886 900 367 900\" />\r\n <polygon fill=\"#960052\" points=\"587 900 641 695 886 900\" />\r\n <polygon fill=\"#b10088\" points=\"1710 900 1401 632 1096 900\" />\r\n <polygon fill=\"#8f006d\" points=\"1710 900 1401 632 1365 900\" />\r\n <polygon fill=\"#aa00aa\" points=\"1210 900 971 687 725 900\" />\r\n <polygon fill=\"#880088\" points=\"943 900 1210 900 971 687\" />\r\n </svg>\r\n </IcCardHorizontal>\r\n </a>\r\n</ComponentPreview>\r\n\r\n### Disabled\r\n\r\nexport const snippetsDisabled = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-card-horizontal \r\n heading=\"Americano order\" \r\n message=\"Extras: Double espresso shot and oat milk.\" \r\n clickable=\"true\" \r\n disabled=\"true\"\r\n>\r\n <svg\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n width=\"24\"\r\n fill=\"#000000\"\r\n >\r\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\r\n </svg>\r\n <svg\r\n slot=\"image\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 1600 900\"\r\n >\r\n <rect fill=\"#ff7700\" width=\"1600\" height=\"1600\" y=\"-350\" />\r\n <polygon fill=\"#cc0000\" points=\"957 450 539 900 1396 900\" />\r\n <polygon fill=\"#aa0000\" points=\"957 450 872.9 900 1396 900\" />\r\n <polygon fill=\"#c50022\" points=\"-60 900 398 662 816 900\" />\r\n <polygon fill=\"#a3001b\" points=\"337 900 398 662 816 900\" />\r\n <polygon fill=\"#be0044\" points=\"1203 546 1552 900 876 900\" />\r\n <polygon fill=\"#9c0036\" points=\"1203 546 1552 900 1162 900\" />\r\n <polygon fill=\"#b80066\" points=\"641 695 886 900 367 900\" />\r\n <polygon fill=\"#960052\" points=\"587 900 641 695 886 900\" />\r\n <polygon fill=\"#b10088\" points=\"1710 900 1401 632 1096 900\" />\r\n <polygon fill=\"#8f006d\" points=\"1710 900 1401 632 1365 900\" />\r\n <polygon fill=\"#aa00aa\" points=\"1210 900 971 687 725 900\" />\r\n <polygon fill=\"#880088\" points=\"943 900 1210 900 971 687\" />\r\n </svg>\r\n</ic-card-horizontal>`,\r\n long: `{shortCode}`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcCardHorizontal\r\n heading=\"Americano order\"\r\n message=\"Extras: Double espresso shot and oat milk.\"\r\n clickable\r\n disabled\r\n>\r\n <SlottedSVG\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n width=\"24\"\r\n fill=\"#000000\"\r\n >\r\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\r\n </SlottedSVG>\r\n <SlottedSVG\r\n slot=\"image\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 1600 900\"\r\n >\r\n <rect fill=\"#ff7700\" width=\"1600\" height=\"1600\" y=\"-350\" />\r\n <polygon fill=\"#cc0000\" points=\"957 450 539 900 1396 900\" />\r\n <polygon fill=\"#aa0000\" points=\"957 450 872.9 900 1396 900\" />\r\n <polygon fill=\"#c50022\" points=\"-60 900 398 662 816 900\" />\r\n <polygon fill=\"#a3001b\" points=\"337 900 398 662 816 900\" />\r\n <polygon fill=\"#be0044\" points=\"1203 546 1552 900 876 900\" />\r\n <polygon fill=\"#9c0036\" points=\"1203 546 1552 900 1162 900\" />\r\n <polygon fill=\"#b80066\" points=\"641 695 886 900 367 900\" />\r\n <polygon fill=\"#960052\" points=\"587 900 641 695 886 900\" />\r\n <polygon fill=\"#b10088\" points=\"1710 900 1401 632 1096 900\" />\r\n <polygon fill=\"#8f006d\" points=\"1710 900 1401 632 1365 900\" />\r\n <polygon fill=\"#aa00aa\" points=\"1210 900 971 687 725 900\" />\r\n <polygon fill=\"#880088\" points=\"943 900 1210 900 971 687\" />\r\n </SlottedSVG>\r\n</IcCardHorizontal>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `{shortCode}`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `{shortCode}`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview snippets={snippetsDisabled}>\r\n <IcCardHorizontal\r\n heading=\"Americano order\"\r\n message=\"Extras: Double espresso shot and oat milk.\"\r\n clickable\r\n disabled\r\n >\r\n <svg\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n width=\"24\"\r\n fill=\"#000000\"\r\n >\r\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\r\n </svg>\r\n <svg slot=\"image\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 1600 900\">\r\n <rect fill=\"#ff7700\" width=\"1600\" height=\"1600\" y=\"-350\" />\r\n <polygon fill=\"#cc0000\" points=\"957 450 539 900 1396 900\" />\r\n <polygon fill=\"#aa0000\" points=\"957 450 872.9 900 1396 900\" />\r\n <polygon fill=\"#c50022\" points=\"-60 900 398 662 816 900\" />\r\n <polygon fill=\"#a3001b\" points=\"337 900 398 662 816 900\" />\r\n <polygon fill=\"#be0044\" points=\"1203 546 1552 900 876 900\" />\r\n <polygon fill=\"#9c0036\" points=\"1203 546 1552 900 1162 900\" />\r\n <polygon fill=\"#b80066\" points=\"641 695 886 900 367 900\" />\r\n <polygon fill=\"#960052\" points=\"587 900 641 695 886 900\" />\r\n <polygon fill=\"#b10088\" points=\"1710 900 1401 632 1096 900\" />\r\n <polygon fill=\"#8f006d\" points=\"1710 900 1401 632 1365 900\" />\r\n <polygon fill=\"#aa00aa\" points=\"1210 900 971 687 725 900\" />\r\n <polygon fill=\"#880088\" points=\"943 900 1210 900 971 687\" />\r\n </svg>\r\n </IcCardHorizontal>\r\n</ComponentPreview>\r\n\r\n### Slotted heading and message\r\n\r\nexport const snippetsSlottedHeading = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-card-horizontal>\r\n <ic-typography slot=\"heading\" variant=\"h4\">Americano order</ic-typography>\r\n <ic-typography slot=\"message\">Extras: Double espresso shot and oat milk.</ic-typography>\r\n <svg\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n width=\"24\"\r\n fill=\"#000000\"\r\n >\r\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\r\n </svg>\r\n <svg\r\n slot=\"image\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 1600 900\"\r\n >\r\n <rect fill=\"#ff7700\" width=\"1600\" height=\"1600\" y=\"-350\" />\r\n <polygon fill=\"#cc0000\" points=\"957 450 539 900 1396 900\" />\r\n <polygon fill=\"#aa0000\" points=\"957 450 872.9 900 1396 900\" />\r\n <polygon fill=\"#c50022\" points=\"-60 900 398 662 816 900\" />\r\n <polygon fill=\"#a3001b\" points=\"337 900 398 662 816 900\" />\r\n <polygon fill=\"#be0044\" points=\"1203 546 1552 900 876 900\" />\r\n <polygon fill=\"#9c0036\" points=\"1203 546 1552 900 1162 900\" />\r\n <polygon fill=\"#b80066\" points=\"641 695 886 900 367 900\" />\r\n <polygon fill=\"#960052\" points=\"587 900 641 695 886 900\" />\r\n <polygon fill=\"#b10088\" points=\"1710 900 1401 632 1096 900\" />\r\n <polygon fill=\"#8f006d\" points=\"1710 900 1401 632 1365 900\" />\r\n <polygon fill=\"#aa00aa\" points=\"1210 900 971 687 725 900\" />\r\n <polygon fill=\"#880088\" points=\"943 900 1210 900 971 687\" />\r\n </svg>\r\n</ic-card-horizontal>`,\r\n long: `{shortCode}`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcCardHorizontal>\r\n <IcTypography slot=\"heading\" variant=\"h4\">Americano order</IcTypography>\r\n <IcTypography slot=\"message\">Extras: Double espresso shot and oat milk.</IcTypography>\r\n <SlottedSVG\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n width=\"24\"\r\n fill=\"#000000\"\r\n >\r\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\r\n </SlottedSVG>\r\n <SlottedSVG\r\n slot=\"image\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 1600 900\"\r\n >\r\n <rect fill=\"#ff7700\" width=\"1600\" height=\"1600\" y=\"-350\" />\r\n <polygon fill=\"#cc0000\" points=\"957 450 539 900 1396 900\" />\r\n <polygon fill=\"#aa0000\" points=\"957 450 872.9 900 1396 900\" />\r\n <polygon fill=\"#c50022\" points=\"-60 900 398 662 816 900\" />\r\n <polygon fill=\"#a3001b\" points=\"337 900 398 662 816 900\" />\r\n <polygon fill=\"#be0044\" points=\"1203 546 1552 900 876 900\" />\r\n <polygon fill=\"#9c0036\" points=\"1203 546 1552 900 1162 900\" />\r\n <polygon fill=\"#b80066\" points=\"641 695 886 900 367 900\" />\r\n <polygon fill=\"#960052\" points=\"587 900 641 695 886 900\" />\r\n <polygon fill=\"#b10088\" points=\"1710 900 1401 632 1096 900\" />\r\n <polygon fill=\"#8f006d\" points=\"1710 900 1401 632 1365 900\" />\r\n <polygon fill=\"#aa00aa\" points=\"1210 900 971 687 725 900\" />\r\n <polygon fill=\"#880088\" points=\"943 900 1210 900 971 687\" />\r\n </SlottedSVG>\r\n</IcCardHorizontal>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `{shortCode}`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `{shortCode}`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview snippets={snippetsSlottedHeading}>\r\n <IcCardHorizontal>\r\n <IcTypography slot=\"heading\" variant=\"h4\">\r\n Americano order\r\n </IcTypography>\r\n <IcTypography slot=\"message\">\r\n Extras: Double espresso shot and oat milk.\r\n </IcTypography>\r\n <svg\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n width=\"24\"\r\n fill=\"#000000\"\r\n >\r\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\r\n </svg>\r\n <svg slot=\"image\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 1600 900\">\r\n <rect fill=\"#ff7700\" width=\"1600\" height=\"1600\" y=\"-350\" />\r\n <polygon fill=\"#cc0000\" points=\"957 450 539 900 1396 900\" />\r\n <polygon fill=\"#aa0000\" points=\"957 450 872.9 900 1396 900\" />\r\n <polygon fill=\"#c50022\" points=\"-60 900 398 662 816 900\" />\r\n <polygon fill=\"#a3001b\" points=\"337 900 398 662 816 900\" />\r\n <polygon fill=\"#be0044\" points=\"1203 546 1552 900 876 900\" />\r\n <polygon fill=\"#9c0036\" points=\"1203 546 1552 900 1162 900\" />\r\n <polygon fill=\"#b80066\" points=\"641 695 886 900 367 900\" />\r\n <polygon fill=\"#960052\" points=\"587 900 641 695 886 900\" />\r\n <polygon fill=\"#b10088\" points=\"1710 900 1401 632 1096 900\" />\r\n <polygon fill=\"#8f006d\" points=\"1710 900 1401 632 1365 900\" />\r\n <polygon fill=\"#aa00aa\" points=\"1210 900 971 687 725 900\" />\r\n <polygon fill=\"#880088\" points=\"943 900 1210 900 971 687\" />\r\n </svg>\r\n </IcCardHorizontal>\r\n</ComponentPreview>\r\n",
"path": "/components/horizontal-card/code",
"navPriority": 7,
"date": "2024-08-30",
@@ -1311,16 +1311,16 @@
}
],
"meta": {
- "relativePath": "components/card-horizontal/code.mdx",
- "createdAt": "2024-11-06T10:27:49.404Z",
- "lastModified": "2024-11-06T10:18:59.968Z",
- "size": 54141,
- "formattedSize": "52.9 KB"
+ "relativePath": "components\\card-horizontal\\code.mdx",
+ "createdAt": "2024-12-04T13:23:54.061Z",
+ "lastModified": "2024-12-04T13:23:54.061Z",
+ "size": 55650,
+ "formattedSize": "54.3 KB"
}
},
{
"id": "components\\card-horizontal\\guidancex",
- "contents": "\nimport { IcAlert, IcLink } from \"@ukic/react\";\nimport { IcCardHorizontal } from \"@ukic/canary-react\";\n\n<IcAlert\n heading=\"Canary component\"\n variant=\"info\"\n message=\"This component is new and its guidance will be updated over time.\"\n/>\n\n## Canary components\n\nCanary components are unstable components that are released for testing purposes.\n\nWe value any feedback from users willing to try them in their applications.\n\nThese components should not be used in production apps without understanding the risk that changes may occur in order to fix bugs or improve functionality.\n\nFor more information on Canary components, read our approach to [releases and versions](/get-started/releases-versions).\n\n<p>\n Additional details on the props and events for this component can be found in\n the{\" \"}\n <IcLink\n href=\"https://mi6.github.io/ic-ui-kit/branches/develop/canary-web-components/?path=/docs/web-components-horizontal-card--docs\"\n target=\"_blank\"\n >\n Canary web components\n </IcLink>{\" \"}\n and{\" \"}\n <IcLink\n href=\"https://mi6.github.io/ic-ui-kit/branches/develop/canary-react/?path=/docs/react-components-horizontal-card--docs\"\n target=\"_blank\"\n >\n Canary React\n </IcLink>{\" \"}\n storybooks.\n</p>\n\n## Component demo\n\n<ComponentPreview>\n <IcCardHorizontal heading=\"Card heading\" message=\"Card message\">\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n fill=\"#000000\"\n >\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n </svg>\n <svg slot=\"image\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 1600 900\">\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 </IcCardHorizontal>\n</ComponentPreview>\n",
+ "contents": "\r\nimport { IcAlert, IcLink } from \"@ukic/react\";\r\nimport { IcCardHorizontal } from \"@ukic/canary-react\";\r\n\r\n<IcAlert\r\n heading=\"Canary component\"\r\n variant=\"info\"\r\n message=\"This component is new and its guidance will be updated over time.\"\r\n/>\r\n\r\n## Canary components\r\n\r\nCanary components are unstable components that are released for testing purposes.\r\n\r\nWe value any feedback from users willing to try them in their applications.\r\n\r\nThese components should not be used in production apps without understanding the risk that changes may occur in order to fix bugs or improve functionality.\r\n\r\nFor more information on Canary components, read our approach to [releases and versions](/get-started/releases-versions).\r\n\r\n<p>\r\n Additional details on the props and events for this component can be found in\r\n the{\" \"}\r\n <IcLink\r\n href=\"https://mi6.github.io/ic-ui-kit/branches/develop/canary-web-components/?path=/docs/web-components-horizontal-card--docs\"\r\n target=\"_blank\"\r\n >\r\n Canary web components\r\n </IcLink>{\" \"}\r\n and{\" \"}\r\n <IcLink\r\n href=\"https://mi6.github.io/ic-ui-kit/branches/develop/canary-react/?path=/docs/react-components-horizontal-card--docs\"\r\n target=\"_blank\"\r\n >\r\n Canary React\r\n </IcLink>{\" \"}\r\n storybooks.\r\n</p>\r\n\r\n## Component demo\r\n\r\n<ComponentPreview>\r\n <IcCardHorizontal heading=\"Card heading\" message=\"Card message\">\r\n <svg\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n width=\"24\"\r\n fill=\"#000000\"\r\n >\r\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\r\n </svg>\r\n <svg slot=\"image\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 1600 900\">\r\n <rect fill=\"#ff7700\" width=\"1600\" height=\"1600\" y=\"-350\" />\r\n <polygon fill=\"#cc0000\" points=\"957 450 539 900 1396 900\" />\r\n <polygon fill=\"#aa0000\" points=\"957 450 872.9 900 1396 900\" />\r\n <polygon fill=\"#c50022\" points=\"-60 900 398 662 816 900\" />\r\n <polygon fill=\"#a3001b\" points=\"337 900 398 662 816 900\" />\r\n <polygon fill=\"#be0044\" points=\"1203 546 1552 900 876 900\" />\r\n <polygon fill=\"#9c0036\" points=\"1203 546 1552 900 1162 900\" />\r\n <polygon fill=\"#b80066\" points=\"641 695 886 900 367 900\" />\r\n <polygon fill=\"#960052\" points=\"587 900 641 695 886 900\" />\r\n <polygon fill=\"#b10088\" points=\"1710 900 1401 632 1096 900\" />\r\n <polygon fill=\"#8f006d\" points=\"1710 900 1401 632 1365 900\" />\r\n <polygon fill=\"#aa00aa\" points=\"1210 900 971 687 725 900\" />\r\n <polygon fill=\"#880088\" points=\"943 900 1210 900 971 687\" />\r\n </svg>\r\n </IcCardHorizontal>\r\n</ComponentPreview>\r\n",
"path": "/components/horizontal-card",
"navPriority": 7,
"date": "2024-08-30",
@@ -1338,16 +1338,16 @@
}
],
"meta": {
- "relativePath": "components/card-horizontal/guidance.mdx",
- "createdAt": "2024-11-06T10:27:49.404Z",
- "lastModified": "2024-11-06T10:18:59.968Z",
- "size": 3071,
- "formattedSize": "3.0 KB"
+ "relativePath": "components\\card-horizontal\\guidance.mdx",
+ "createdAt": "2024-12-04T13:23:54.062Z",
+ "lastModified": "2024-12-04T13:23:54.062Z",
+ "size": 3160,
+ "formattedSize": "3.1 KB"
}
},
{
"id": "components\\cards\\accessibilityx",
- "contents": "\n## Easy to use for everyone\n\nInteractive and static cards inherit the accessibility features of the components within the card. Clickable cards act as links, and therefore inherit the accessibility features of links.\n\n## For Assistive Technology\n\nScreen readers should always read the heading first, even when an image is placed at the top of the card. To achieve this, we've re-ordered content using CSS Flexbox layout so that visually the image appears first but is placed after the heading section in HTML.\n\nThe container of interactive and static cards is not clickable, and therefore is not focusable. When navigating within the page, the focus switches between the different interactive components of the card.\n\nIn the case of clickable cards, since the whole area is interactive, then the whole container is focusable.\n\nClickable cards inherit the accessibility features of the link style, using an `<a href=\"\">` to wrap the whole component.\n\nProvide as much detail as possible to the purpose of any link or button present within interactive cards, or to the action of a clickable card. If you can't show this within the component, use the `class=”visuallyhidden”` to add descriptive text about the purpose of the call to action(s).\n\nWhen cards are arranged in group, these should be placed within an unordered list `<ul>`, with each card marked as a list item `<li>` to provide navigational cues for screen readers.\n\n## Based on\n\nThe cards component has been based on the following resources:\n\n<ul>\n <li>\n <ic-link\n target=\"_blank\"\n href=\"https://www.nomensa.com/blog/how-build-accessible-cards-block-links\"\n rel=\"noreferer noopener nofollow\"\n >\n How to build accessible cards-block links\n </ic-link>\n , Joel Strohmeier, accessed May 2022.\n </li>\n <li>\n <ic-link\n target=\"_blank\"\n href=\"https://adrianroselli.com/2020/02/block-links-cards-clickable-regions-etc.html\"\n rel=\"noreferer noopener nofollow\"\n >\n Block Links, Cards, Clickable Regions, Rows, Etc.\n </ic-link>\n , Adrian Roselli, accessed May 2022.\n </li>\n <li>\n <ic-link\n target=\"_blank\"\n href=\"https://inclusive-components.design/card\"\n rel=\"noreferer noopener nofollow\"\n >\n Cards\n </ic-link>\n , Inclusive components, accessed May 2022.\n </li>\n <li>\n <ic-link\n target=\"_blank\"\n href=\"https://a11y-style-guide.com/style-guide/section-cards.html\"\n rel=\"noreferer noopener nofollow\"\n >\n Cards\n </ic-link>\n , A11y style guide, accessed May 2022.\n </li>\n <li>\n <ic-link\n target=\"_blank\"\n href=\"https://bbc.github.io/gel/components/card/\"\n rel=\"noreferer noopener nofollow\"\n >\n Cards\n </ic-link>\n , BBC, accessed May 2022.\n </li>\n</ul>\n\n## Testing\n\nWe've tested this component against WCAG 2.2 Level AA. It's been tested with NVDA and VoiceOver, and several different users with different interaction methods.\n",
+ "contents": "\r\n## Easy to use for everyone\r\n\r\nInteractive and static cards inherit the accessibility features of the components within the card. Clickable cards act as links, and therefore inherit the accessibility features of links.\r\n\r\n## For Assistive Technology\r\n\r\nScreen readers should always read the heading first, even when an image is placed at the top of the card. To achieve this, we've re-ordered content using CSS Flexbox layout so that visually the image appears first but is placed after the heading section in HTML.\r\n\r\nThe container of interactive and static cards is not clickable, and therefore is not focusable. When navigating within the page, the focus switches between the different interactive components of the card.\r\n\r\nIn the case of clickable cards, since the whole area is interactive, then the whole container is focusable.\r\n\r\nClickable cards inherit the accessibility features of the link style, using an `<a href=\"\">` to wrap the whole component.\r\n\r\nProvide as much detail as possible to the purpose of any link or button present within interactive cards, or to the action of a clickable card. If you can't show this within the component, use the `class=”visuallyhidden”` to add descriptive text about the purpose of the call to action(s).\r\n\r\nWhen cards are arranged in group, these should be placed within an unordered list `<ul>`, with each card marked as a list item `<li>` to provide navigational cues for screen readers.\r\n\r\n## Based on\r\n\r\nThe cards component has been based on the following resources:\r\n\r\n<ul>\r\n <li>\r\n <ic-link\r\n target=\"_blank\"\r\n href=\"https://www.nomensa.com/blog/how-build-accessible-cards-block-links\"\r\n rel=\"noreferer noopener nofollow\"\r\n >\r\n How to build accessible cards-block links\r\n </ic-link>\r\n , Joel Strohmeier, accessed May 2022.\r\n </li>\r\n <li>\r\n <ic-link\r\n target=\"_blank\"\r\n href=\"https://adrianroselli.com/2020/02/block-links-cards-clickable-regions-etc.html\"\r\n rel=\"noreferer noopener nofollow\"\r\n >\r\n Block Links, Cards, Clickable Regions, Rows, Etc.\r\n </ic-link>\r\n , Adrian Roselli, accessed May 2022.\r\n </li>\r\n <li>\r\n <ic-link\r\n target=\"_blank\"\r\n href=\"https://inclusive-components.design/card\"\r\n rel=\"noreferer noopener nofollow\"\r\n >\r\n Cards\r\n </ic-link>\r\n , Inclusive components, accessed May 2022.\r\n </li>\r\n <li>\r\n <ic-link\r\n target=\"_blank\"\r\n href=\"https://a11y-style-guide.com/style-guide/section-cards.html\"\r\n rel=\"noreferer noopener nofollow\"\r\n >\r\n Cards\r\n </ic-link>\r\n , A11y style guide, accessed May 2022.\r\n </li>\r\n <li>\r\n <ic-link\r\n target=\"_blank\"\r\n href=\"https://bbc.github.io/gel/components/card/\"\r\n rel=\"noreferer noopener nofollow\"\r\n >\r\n Cards\r\n </ic-link>\r\n , BBC, accessed May 2022.\r\n </li>\r\n</ul>\r\n\r\n## Testing\r\n\r\nWe've tested this component against WCAG 2.2 Level AA. It's been tested with NVDA and VoiceOver, and several different users with different interaction methods.\r\n",
"path": "/components/card/accessibility",
"date": "2024-04-15",
"title": "Card",
@@ -1369,16 +1369,16 @@
}
],
"meta": {
- "relativePath": "components/cards/accessibility.mdx",
- "createdAt": "2024-11-06T10:27:49.404Z",
- "lastModified": "2024-11-06T10:18:59.968Z",
- "size": 3439,
- "formattedSize": "3.4 KB"
+ "relativePath": "components\\cards\\accessibility.mdx",
+ "createdAt": "2024-12-04T13:23:54.064Z",
+ "lastModified": "2024-12-04T13:23:54.064Z",
+ "size": 3538,
+ "formattedSize": "3.5 KB"
}
},
{
"id": "components\\cards\\codex",
- "contents": "\nimport {\n IcCard,\n IcStatusTag,\n IcButton,\n IcTypography,\n SlottedSVG,\n IcBadge,\n} from \"@ukic/react\";\n\nexport const CardIcon = () => (\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"#000000\"\n >\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n <path d=\"M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z\" />\n </svg>\n);\n\nexport const InteractionIcon = () => (\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"16\"\n height=\"16\"\n fill=\"currentColor\"\n viewBox=\"0 0 16 16\"\n >\n <path d=\"M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z\" />\n </svg>\n);\n\n## Component demo\n\nexport const snippets = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-card \n heading=\"Americano order\" \n subheading=\"Name: Michael\" \n message=\"Extras: Double espresso shot and oat milk.\"\n>\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"#000000\"\n >\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\n </svg>\n <ic-button variant=\"icon\" title=\"More information\" slot=\"interaction-button\">\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"16\"\n height=\"16\"\n fill=\"currentColor\"\n viewBox=\"0 0 16 16\"\n >\n <path d=\"M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z\" />\n </svg>\n </ic-button>\n <ic-status-tag slot=\"adornment\" label=\"In Progress\" small=\"true\"></ic-status-tag>\n <svg\n slot=\"image-mid\"\n class=\"card-image\"\n viewBox=\"0 0 1600 1250\"\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 <div \n slot=\"interaction-controls\" \n class=\"interaction-area\"\n >\n <ic-button variant=\"primary\">Accept</ic-button>\n <ic-button variant=\"secondary\">Cancel</ic-button>\n </div>\n <ic-typography slot=\"expanded-content\" variant=\"body\">\n To cancel your order click cancel.\n </ic-typography>\n</ic-card>`,\n long: `ic-card {\n width: 22.5rem;\n }\n .interaction-area {\n display: flex;\n gap: var(--ic-space-md);\n }\n .card-image {\n height: 100%;\n width: 100%;\n max-height: 20.375rem;\n max-width: 20.375rem;\n }\n</style>\n<body>\n {shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcCard \n heading=\"Americano order\" \n subheading=\"Name: Michael\" \n message=\"Extras: Double espresso shot and oat milk.\"\n className={classes.card}\n>\n <SlottedSVG\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"#000000\"\n >\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n </SlottedSVG>\n <IcButton variant=\"icon\" title=\"More information\" slot=\"interaction-button\">\n <SlottedSVG\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"16\"\n height=\"16\"\n fill=\"currentColor\"\n viewBox=\"0 0 16 16\"\n >\n <path d=\"M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z\" />\n </SlottedSVG>\n </IcButton> \n <IcStatusTag slot=\"adornment\" label=\"In Progress\" small />\n <SlottedSVG\n slot=\"image-mid\"\n viewBox=\"0 0 1600 1250\"\n className={classes.cardImage}\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 </SlottedSVG>\n <div \n slot=\"interaction-controls\" \n className={classes.interactionArea}>\n <IcButton variant=\"primary\">Accept</IcButton>\n <IcButton variant=\"secondary\">Cancel</IcButton>\n </div>\n <IcTypography slot=\"expanded-content\" variant=\"body\">\n To cancel your order click cancel.\n </IcTypography>\n</IcCard>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n card: {\n width: \"22.5rem\",\n },\n cardImage: {\n height: \"100%\",\n width: \"100%\",\n maxHeight: \"20.375rem\",\n maxWidth: \"20.375rem\",\n },\n interactionArea: {\n display: \"flex\",\n gap: \"var(--ic-space-md)\",\n },\n});\nconst classes = useStyles();\nreturn (\n {shortCode}\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n card: {\n width: \"22.5rem\",\n },\n cardImage: {\n height: \"100%\",\n width: \"100%\",\n maxHeight: \"20.375rem\",\n maxWidth: \"20.375rem\",\n },\n interactionArea: {\n display: \"flex\",\n gap: \"var(--ic-space-md)\",\n },\n});\nconst classes = useStyles();\nreturn (\n {shortCode}\n)`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={snippets}>\n <IcCard\n heading=\"Americano order\"\n subheading=\"Name: Michael\"\n message=\"Extras: Double espresso shot and oat milk.\"\n expandable\n style={{ width: \"22.5rem\" }}\n >\n <IcStatusTag slot=\"adornment\" status=\"warning\" label=\"In Progress\" small />\n <IcButton variant=\"icon\" title=\"More information\" slot=\"interaction-button\">\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"16\"\n height=\"16\"\n fill=\"currentColor\"\n class=\"bi bi-three-dots-vertical\"\n viewBox=\"0 0 16 16\"\n >\n <path d=\"M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z\" />\n </svg>\n </IcButton>\n <svg\n slot=\"image-mid\"\n style={{\n height: \"100%\",\n width: \"100%\",\n maxHeight: \"20.375rem\",\n maxWidth: \"20.375rem\",\n }}\n viewBox=\"0 0 1600 1250\"\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 <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n fill=\"#000000\"\n >\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n </svg>\n <div slot=\"interaction-controls\" style={{ display: \"flex\", gap: \"1rem\" }}>\n <IcButton variant=\"primary\">Accept</IcButton>\n <IcButton variant=\"secondary\">Cancel</IcButton>\n </div>\n <IcTypography slot=\"expanded-content\" variant=\"body\">\n To cancel your order click cancel.\n </IcTypography>\n </IcCard>\n</ComponentPreview>\n\n## Card details\n\n<ComponentDetails component=\"ic-card\" />\n\n## Variants\n\n### Heading only\n\nexport const headingOnly = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-card heading=\"Americano order\"></ic-card>`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcCard heading=\"Americano order\"></IcCard>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `{shortCode}`,\n },\n {\n language: \"Javascript\",\n snippet: `{shortCode}`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={headingOnly}>\n <IcCard heading=\"Americano order\" />\n</ComponentPreview>\n\n### With icon\n\nexport const withIcon = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-card heading=\"Americano order\">\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"#000000\"\n >\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\n </svg>\n</ic-card>`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcCard heading=\"Americano order\">\n <SlottedSVG \n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"#000000\"\n >\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\n </SlottedSVG>\n</IcCard>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `{shortCode}`,\n },\n {\n language: \"Javascript\",\n snippet: `{shortCode}`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={withIcon}>\n <IcCard heading=\"Americano order\">\n <SlottedSVG\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n fill=\"#000000\"\n >\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n </SlottedSVG>\n </IcCard>\n</ComponentPreview>\n\n### Message\n\nexport const withMessage = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-card heading=\"Americano order\" message=\"Extras: Double espresso shot and oat milk.\">\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"#000000\"\n >\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\n </svg>\n</ic-card>`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcCard heading=\"Americano order\" message=\"Extras: Double espresso shot and oat milk.\">\n <SlottedSVG \n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"#000000\"\n >\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\n </SlottedSVG>\n</IcCard>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `{shortCode}`,\n },\n {\n language: \"Javascript\",\n snippet: `{shortCode}`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={withMessage}>\n <IcCard\n heading=\"Americano order\"\n message=\"Extras: Double espresso shot and oat milk.\"\n >\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n fill=\"#000000\"\n >\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n </svg>\n </IcCard>\n</ComponentPreview>\n\n### With subheading\n\nexport const withSubHeading = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-card \n heading=\"Americano order\" \n subheading=\"Name: Michael\" \n message=\"Extras: Double espresso shot and oat milk.\"\n>\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"#000000\"\n >\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\n </svg>\n</ic-card>`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcCard \n heading=\"Americano order\" \n subheading=\"Name: Michael\" \n message=\"Extras: Double espresso shot and oat milk.\"\n>\n <SlottedSVG \n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"#000000\"\n >\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\n </SlottedSVG>\n</IcCard>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `{shortCode}`,\n },\n {\n language: \"Javascript\",\n snippet: `{shortCode}`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={withSubHeading}>\n <IcCard\n heading=\"Americano order\"\n subheading=\"Name: Michael\"\n message=\"Extras: Double espresso shot and oat milk.\"\n >\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n fill=\"#000000\"\n >\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n </svg>\n </IcCard>\n</ComponentPreview>\n\n### Interaction button\n\nexport const interactionButton = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-card \n heading=\"Americano order\" \n subheading=\"Name: Michael\" \n message=\"Extras: Double espresso shot and oat milk.\"\n>\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"#000000\"\n >\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\n </svg>\n <ic-button variant=\"icon\" title=\"More information\" slot=\"interaction-button\">\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"16\"\n height=\"16\"\n fill=\"currentColor\"\n viewBox=\"0 0 16 16\"\n >\n <path d=\"M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z\" />\n </svg>\n </ic-button>\n</ic-card>`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcCard \n heading=\"Americano order\" \n subheading=\"Name: Michael\" \n message=\"Extras: Double espresso shot and oat milk.\"\n>\n <SlottedSVG \n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"#000000\"\n >\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\n </SlottedSVG>\n <IcButton variant=\"icon\" title=\"More information\" slot=\"interaction-button\">\n <SlottedSVG slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"16\"\n height=\"16\"\n fill=\"currentColor\"\n viewBox=\"0 0 16 16\"\n >\n <path d=\"M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z\" />\n </SlottedSVG>\n </IcButton>\n</IcCard>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `{shortCode}`,\n },\n {\n language: \"Javascript\",\n snippet: `{shortCode}`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={interactionButton}>\n <IcCard\n heading=\"Americano order\"\n subheading=\"Name: Michael\"\n message=\"Extras: Double espresso shot and oat milk.\"\n >\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n fill=\"#000000\"\n >\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n </svg>\n <IcButton variant=\"icon\" title=\"More information\" slot=\"interaction-button\">\n <InteractionIcon />\n </IcButton>\n </IcCard>\n</ComponentPreview>\n\n### Adornment\n\nexport const adornment = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-card \n heading=\"Americano order\" \n subheading=\"Name: Michael\" \n message=\"Extras: Double espresso shot and oat milk.\"\n>\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"#000000\"\n >\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\n </svg>\n <ic-status-tag slot=\"adornment\" status=\"warning\" label=\"In Progress\" size=\"small\"></ic-status-tag>\n</ic-card>`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcCard \n heading=\"Americano order\" \n subheading=\"Name: Michael\" \n message=\"Extras: Double espresso shot and oat milk.\"\n>\n <SlottedSVG \n slot=\"icon\" \n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"#000000\"\n >\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\n </SlottedSVG>\n <IcStatusTag slot=\"adornment\" status=\"warning\" label=\"In Progress\" size=\"small\" />\n</IcCard>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `{shortCode}`,\n },\n {\n language: \"Javascript\",\n snippet: `{shortCode}`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={adornment}>\n <IcCard\n heading=\"Americano order\"\n subheading=\"Name: Michael\"\n message=\"Extras: Double espresso shot and oat milk.\"\n >\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n fill=\"#000000\"\n >\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n </svg>\n <IcStatusTag\n slot=\"adornment\"\n status=\"warning\"\n label=\"In Progress\"\n size=\"small\"\n />\n </IcCard>\n</ComponentPreview>\n\n### Top image\n\nexport const topImage = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-card \n heading=\"Americano order\" \n subheading=\"Name: Michael\" \n message=\"Extras: Double espresso shot and oat milk.\"\n>\n <svg\n slot=\"image-top\"\n class=\"card-image\"\n viewBox=\"0 0 1600 1250\"\n xmlns=\"http://www.w3.org/2000/svg\"\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 <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"#000000\"\n >\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\n </svg>\n <ic-button variant=\"icon\" title=\"More information\" slot=\"interaction-button\">\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"16\"\n height=\"16\"\n fill=\"currentColor\"\n viewBox=\"0 0 16 16\"\n >\n <path d=\"M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z\" />\n </svg>\n </ic-button>\n <ic-status-tag slot=\"adornment\" status=\"warning\" label=\"In Progress\" size=\"small\"></ic-status-tag>\n</ic-card>`,\n long: `ic-card {\n width: 22.5rem;\n }\n .card-image {\n height: 100%;\n width: 100%;\n maxHeight: 20.375rem;\n maxWidth: 20.375rem;\n }\n </style>\n <body>\n {shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcCard \n heading=\"Americano order\" \n subheading=\"Name: Michael\" \n message=\"Extras: Double espresso shot and oat milk.\"\n className={classes.card}\n>\n <SlottedSVG\n slot=\"image-top\"\n className={classes.cardImage}\n viewBox=\"0 0 1600 1250\"\n xmlns=\"http://www.w3.org/2000/svg\"\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 </SlottedSVG>\n <SlottedSVG\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"#000000\"\n >\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\n </SlottedSVG>\n <IcButton variant=\"icon\" title=\"More information\" slot=\"interaction-button\">\n <SlottedSVG\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"16\"\n height=\"16\"\n fill=\"currentColor\"\n viewBox=\"0 0 16 16\"\n >\n <path d=\"M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z\" />\n </SlottedSVG>\n </IcButton> \n <IcStatusTag slot=\"adornment\" status=\"warning\" label=\"In Progress\" size=\"small\" />\n</IcCard>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n card: {\n width: \"22.5rem\",\n },\n cardImage: {\n height: \"100%\",\n width: \"100%\",\n maxHeight: \"20.375rem\",\n maxWidth: \"20.375rem\",\n },\n});\nconst classes = useStyles();\nreturn (\n {shortCode}\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `{shortCode}`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={topImage}>\n <IcCard\n heading=\"Americano order\"\n subheading=\"Name: Michael\"\n message=\"Extras: Double espresso shot and oat milk.\"\n >\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n fill=\"#000000\"\n >\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n </svg>\n <IcStatusTag\n slot=\"adornment\"\n status=\"warning\"\n label=\"In Progress\"\n size=\"small\"\n />\n <IcButton variant=\"icon\" title=\"More information\" slot=\"interaction-button\">\n <InteractionIcon />\n </IcButton>\n <svg\n slot=\"image-top\"\n style={{\n height: \"100%\",\n width: \"100%\",\n maxHeight: \"20.375rem\",\n maxWidth: \"20.375rem\",\n }}\n viewBox=\"0 0 1600 1250\"\n xmlns=\"http://www.w3.org/2000/svg\"\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 </IcCard>\n</ComponentPreview>\n\n### Middle image\n\nexport const midImage = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-card \n heading=\"Americano order\" \n subheading=\"Name: Michael\" \n message=\"Extras: Double espresso shot and oat milk.\"\n>\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"#000000\"\n >\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\n </svg>\n <ic-button variant=\"icon\" title=\"More information\" slot=\"interaction-button\">\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"16\"\n height=\"16\"\n fill=\"currentColor\"\n viewBox=\"0 0 16 16\"\n >\n <path d=\"M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z\" />\n </svg>\n </ic-button>\n <ic-status-tag slot=\"adornment\" status=\"warning\" label=\"In Progress\" size=\"small\"></ic-status-tag>\n <svg\n slot=\"image-mid\"\n class=\"card-image\"\n viewBox=\"0 0 1600 1250\"\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>`,\n long: `ic-card {\n width: 22.5rem;\n }\n .card-image {\n height: 100%;\n width: 100%;\n maxHeight: 20.375rem;\n maxWidth: 20.375rem;\n }\n </style>\n <body>\n {shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcCard \n heading=\"Americano order\" \n subheading=\"Name: Michael\" \n message=\"Extras: Double espresso shot and oat milk.\"\n className={classes.card}\n>\n <SlottedSVG\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"#000000\"\n >\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\n </SlottedSVG>\n <IcButton variant=\"icon\" title=\"More information\" slot=\"interaction-button\">\n <SlottedSVG\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"16\"\n height=\"16\"\n fill=\"currentColor\"\n viewBox=\"0 0 16 16\"\n >\n <path d=\"M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z\" />\n </SlottedSVG>\n </IcButton> \n <IcStatusTag slot=\"adornment\" status=\"warning\" label=\"In Progress\" size=\"small\" />\n <SlottedSVG\n slot=\"image-mid\"\n viewBox=\"0 0 1600 1250\"\n className={classes.cardImage}\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 </SlottedSVG>\n</IcCard>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n card: {\n width: \"22.5rem\",\n },\n cardImage: {\n height: \"100%\",\n width: \"100%\",\n maxHeight: \"20.375rem\",\n maxWidth: \"20.375rem\",\n },\n});\nconst classes = useStyles();\nreturn (\n {shortCode}\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n card: {\n width: \"22.5rem\",\n },\n cardImage: {\n height: \"100%\",\n width: \"100%\",\n maxHeight: \"20.375rem\",\n maxWidth: \"20.375rem\",\n },\n});\nconst classes = useStyles();\nreturn (\n {shortCode}\n)`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={midImage}>\n <IcCard\n heading=\"Americano order\"\n subheading=\"Name: Michael\"\n message=\"Extras: Double espresso shot and oat milk.\"\n >\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n fill=\"#000000\"\n >\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n </svg>\n <IcButton variant=\"icon\" title=\"More information\" slot=\"interaction-button\">\n <InteractionIcon />\n </IcButton>\n <IcStatusTag\n slot=\"adornment\"\n status=\"warning\"\n label=\"In Progress\"\n size=\"small\"\n />\n <svg\n slot=\"image-mid\"\n style={{\n height: \"100%\",\n width: \"100%\",\n maxHeight: \"20.375rem\",\n maxWidth: \"20.375rem\",\n }}\n viewBox=\"0 0 1600 1250\"\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 </IcCard>\n</ComponentPreview>\n\n### Interaction controls\n\nexport const interactionControls = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-card \n heading=\"Americano order\" \n subheading=\"Name: Michael\" \n message=\"Extras: Double espresso shot and oat milk.\"\n>\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"#000000\"\n >\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n </svg>\n <div slot=\"interaction-controls\" class=\"interaction-area\">\n <ic-button variant=\"primary\">Accept</ic-button>\n <ic-button variant=\"secondary\">Cancel</ic-button>\n </div>\n</ic-card>`,\n long: `.interaction-area {\n display: flex;\n gap: var(--ic-space-md);\n }\n </style>\n <body>\n {shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcCard \n heading=\"Americano order\" \n subheading=\"Name: Michael\" \n message=\"Extras: Double espresso shot and oat milk.\"\n>\n <SlottedSVG\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"#000000\"\n >\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n </SlottedSVG>\n <div slot=\"interaction-controls\" className={classes.interactionArea}>\n <IcButton variant=\"primary\">Accept</IcButton>\n <IcButton variant=\"secondary\">Cancel</IcButton>\n </div>\n</IcCard>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n interactionArea: {\n display: \"flex\",\n gap: \"var(--ic-space-md)\",\n },\n});\nconst classes = useStyles();\nreturn (\n {shortCode}\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n interactionArea: {\n display: \"flex\",\n gap: \"var(--ic-space-md)\",\n },\n});\nconst classes = useStyles();\nreturn (\n {shortCode}\n)`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={interactionControls}>\n <IcCard\n heading=\"Americano order\"\n subheading=\"Name: Michael\"\n message=\"Extras: Double espresso shot and oat milk.\"\n >\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n fill=\"#000000\"\n >\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n </svg>\n <div slot=\"interaction-controls\" style={{ display: \"flex\", gap: \"1rem\" }}>\n <IcButton variant=\"primary\">Accept</IcButton>\n <IcButton variant=\"secondary\">Cancel</IcButton>\n </div>\n </IcCard>\n</ComponentPreview>\n\n### Expandable\n\nexport const expandable = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-card \n heading=\"Americano order\" \n subheading=\"Name: Michael\" \n message=\"Extras: Double espresso shot and oat milk.\"\n expandable=\"true\"\n>\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"#000000\"\n >\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\n </svg>\n <div slot=\"interaction-controls\" class=\"interaction-area\">\n <ic-button variant=\"primary\">Accept</ic-button>\n <ic-button variant=\"secondary\">Cancel</ic-button>\n </div>\n <ic-typography slot=\"expanded-content\" variant=\"body\">\n To cancel your order click cancel.\n </ic-typography>\n</ic-card>`,\n long: `.interaction-area {\n display: flex;\n gap: var(--ic-space-md);\n }\n</style>\n<body>\n {shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcCard \n heading=\"Americano order\" \n subheading=\"Name: Michael\" \n message=\"Extras: Double espresso shot and oat milk.\"\n expandable\n>\n <SlottedSVG\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"#000000\"\n >\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\n </SlottedSVG>\n <div slot=\"interaction-controls\" className={classes.interactionArea}>\n <IcButton variant=\"primary\">Accept</IcButton>\n <IcButton variant=\"secondary\">Cancel</IcButton>\n </div>\n <IcTypography slot=\"expanded-content\" variant=\"body\">\n To cancel your order click cancel.\n </IcTypography>\n</IcCard>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n interactionArea: {\n display: \"flex\",\n gap: \"var(--ic-space-md)\",\n },\n });\n const classes = useStyles();\n return (\n {shortCode}\n )`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n interactionArea: {\n display: \"flex\",\n gap: \"var(--ic-space-md)\",\n },\n });\n const classes = useStyles();\n return (\n {shortCode}\n )`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={expandable}>\n <IcCard\n heading=\"Americano order\"\n subheading=\"Name: Michael\"\n message=\"Extras: Double espresso shot and oat milk.\"\n expandable\n >\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n fill=\"#000000\"\n >\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n </svg>\n <div slot=\"interaction-controls\" style={{ display: \"flex\", gap: \"1rem\" }}>\n <IcButton variant=\"primary\">Accept</IcButton>\n <IcButton variant=\"secondary\">Cancel</IcButton>\n </div>\n <IcTypography slot=\"expanded-content\" variant=\"body\">\n To cancel your order click cancel.\n </IcTypography>\n </IcCard>\n</ComponentPreview>\n\n### Clickable link\n\nexport const clickableLink = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-card \n heading=\"Americano order\" \n subheading=\"Name: Michael\" \n message=\"Extras: Double espresso shot and oat milk.\"\n clickable=\"true\"\n href=\"#\"\n>\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"#000000\"\n >\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\n </svg>\n</ic-card>`,\n long: `.parent-container {\n padding: var(--ic-space-md);\n }\n</style>\n<body>\n <div class=\"parent-container\">\n {shortCode}\n </div>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcCard \n heading=\"Americano order\" \n subheading=\"Name: Michael\" \n message=\"Extras: Double espresso shot and oat milk.\"\n clickable\n href=\"#\"\n>\n <SlottedSVG\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"#000000\"\n >\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\n </SlottedSVG>\n</IcCard>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n padding: \"var(--ic-space-md)\",\n },\n});\nconst classes = useStyles();\nreturn ( \n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n padding: \"var(--ic-space-md)\",\n },\n});\nconst classes = useStyles();\nreturn ( \n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={clickableLink}>\n <IcCard\n heading=\"Americano order\"\n subheading=\"Name: Michael\"\n message=\"Extras: Double espresso shot and oat milk.\"\n clickable=\"true\"\n href=\"#\"\n onClick={(e) => e.preventDefault()}\n >\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n fill=\"#000000\"\n >\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n </svg>\n </IcCard>\n</ComponentPreview>\n\n### Clickable button\n\nexport const clickableBtn = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-card\n id=\"clickable-card\"\n heading=\"Americano order\" \n subheading=\"Name: Michael\" \n message=\"Extras: Double espresso shot and oat milk.\"\n clickable=\"true\"\n>\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"#000000\"\n >\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\n </svg>\n</ic-card>`,\n long: `.parent-container {\n padding: var(--ic-space-md);\n }\n</style>\n<body>\n <div class=\"parent-container\">\n {shortCode}\n </div>\n <script>\n const card = document.querySelector('#clickable-card');\n card.addEventListener('click', (ev) => {\n console.log(ev);\n })\n </script>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcCard \n heading=\"Americano order\" \n subheading=\"Name: Michael\" \n message=\"Extras: Double espresso shot and oat milk.\" \n clickable\n onClick={(ev) => console.log(ev)}\n>\n <SlottedSVG\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"#000000\"\n >\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\n </SlottedSVG>\n</IcCard>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n padding: \"var(--ic-space-md)\",\n },\n});\nconst classes = useStyles();\nreturn ( \n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n padding: \"var(--ic-space-md)\",\n },\n});\nconst classes = useStyles();\nreturn ( \n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={clickableBtn}>\n <IcCard\n heading=\"Americano order\"\n subheading=\"Name: Michael\"\n message=\"Extras: Double espresso shot and oat milk.\"\n clickable=\"true\"\n onClick={(ev) => console.log(ev)}\n >\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n fill=\"#000000\"\n >\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n </svg>\n </IcCard>\n</ComponentPreview>\n\n### With badge\n\nexport const withBadge = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-card \n heading=\"Americano order\" \n subheading=\"Name: Michael\" \n message=\"Extras: Double espresso shot and oat milk.\"\n clickable=\"true\"\n href=\"#\"\n>\n <ic-badge\n text-label=\"New\"\n slot=\"badge\"\n variant=\"info\"\n size=\"large\"\n ></ic-badge>\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"#000000\"\n >\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\n </svg>\n</ic-card>`,\n long: `.parent-container {\n padding: var(--ic-space-md);\n }\n</style>\n<body>\n <div class=\"parent-container\">\n {shortCode}\n </div>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcCard \n heading=\"Americano order\" \n subheading=\"Name: Michael\" \n message=\"Extras: Double espresso shot and oat milk.\" \n clickable\n href=\"#\"\n>\n <IcBadge size=\"large\" textLabel=\"New\" slot=\"badge\" variant=\"info\"/>\n <SlottedSVG\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"#000000\"\n >\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\n </SlottedSVG>\n</IcCard>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n padding: \"var(--ic-space-md)\",\n },\n});\nconst classes = useStyles();\nreturn ( \n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n padding: \"var(--ic-space-md)\",\n },\n});\nconst classes = useStyles();\nreturn ( \n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={withBadge}>\n <IcCard\n heading=\"Americano order\"\n subheading=\"Name: Michael\"\n message=\"Extras: Double espresso shot and oat milk.\"\n clickable=\"true\"\n href=\"#\"\n onClick={(e) => e.preventDefault()}\n >\n <IcBadge size=\"large\" textLabel=\"New\" slot=\"badge\" variant=\"info\" />\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n fill=\"#000000\"\n >\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n </svg>\n </IcCard>\n</ComponentPreview>\n\n### Disabled\n\nexport const disabled = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-card \n heading=\"Americano order\" \n subheading=\"Name: Michael\" \n message=\"Extras: Double espresso shot and oat milk.\"\n clickable=\"true\" \n disabled=\"true\"\n>\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"#000000\"\n >\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\n </svg>\n</ic-card>`,\n long: `.parent-container {\n padding: var(--ic-space-md);\n }\n</style>\n<body>\n <div class=\"parent-container\">\n {shortCode}\n </div>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcCard \n heading=\"Americano order\" \n subheading=\"Name: Michael\" \n message=\"Extras: Double espresso shot and oat milk.\" \n clickable\n disabled\n>\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"#000000\"\n >\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\n </svg>\n</IcCard>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n padding: \"var(--ic-space-md)\",\n },\n});\nconst classes = useStyles();\nreturn ( \n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n padding: \"var(--ic-space-md)\",\n },\n});\nconst classes = useStyles();\nreturn ( \n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={disabled}>\n <IcCard\n heading=\"Americano order\"\n subheading=\"Name: Michael\"\n message=\"Extras: Double espresso shot and oat milk.\"\n clickable\n disabled\n >\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n fill=\"#000000\"\n >\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n </svg>\n </IcCard>\n</ComponentPreview>\n\n### Full width\n\nexport const fullWidth = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-card \n heading=\"Americano order\" \n subheading=\"Name: Michael\" \n message=\"Extras: Double espresso shot and oat milk.\"\n full-width=\"true\"\n clickable=\"true\"\n>\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"#000000\"\n >\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\n </svg>\n</ic-card>`,\n long: `.parent-container {\n padding: var(--ic-space-md);\n }\n</style>\n<body>\n <div class=\"parent-container\">\n {shortCode}\n </div>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcCard \n heading=\"Americano order\" \n subheading=\"Name: Michael\" \n message=\"Extras: Double espresso shot and oat milk.\"\n fullWidth\n clickable\n>\n <SlottedSVG\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"#000000\"\n >\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\n </SlottedSVG>\n</IcCard>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n padding: \"var(--ic-space-md)\",\n },\n});\nconst classes = useStyles();\nreturn ( \n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n padding: \"var(--ic-space-md)\",\n },\n});\nconst classes = useStyles();\nreturn ( \n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={fullWidth}>\n <IcCard\n heading=\"Americano order\"\n subheading=\"Name: Michael\"\n message=\"Extras: Double espresso shot and oat milk.\"\n fullWidth\n clickable\n >\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n fill=\"#000000\"\n >\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n </svg>\n </IcCard>\n</ComponentPreview>\n\n### Wrapped by link\n\nexport const wrapped = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<a href=\"/\">\n <ic-card \n heading=\"Americano order\"\n subheading=\"Name: Michael\"\n message=\"Extras: Double espresso shot and oat milk.\"> \n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n fill=\"#000000\"\n >\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\n </svg>\n </ic-card>\n</a>`,\n long: `.parent-container {\n padding: var(--ic-space-md);\n }\n</style>\n<body>\n <div class=\"parent-container\">\n {shortCode}\n </div>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<a href=\"/\">\n <IcCard \n heading=\"Americano order\"\n subheading=\"Name: Michael\"\n message=\"Extras: Double espresso shot and oat milk.\"> \n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n fill=\"#000000\"\n >\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\n </svg>\n </IcCard>\n</a>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n padding: \"var(--ic-space-md)\",\n },\n});\nconst classes = useStyles();\nreturn ( \n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n padding: \"var(--ic-space-md)\",\n },\n});\nconst classes = useStyles();\nreturn ( \n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={wrapped}>\n <a\n href=\"/\"\n onClick={(e) => e.preventDefault()}\n style={{ textDecoration: \"none\", color: \"var(--ic-architechtural-black)\" }}\n aria-label=\"Americano order card\"\n >\n <IcCard\n heading=\"Americano order\"\n subheading=\"Name: Michael\"\n message=\"Extras: Double espresso shot and oat milk.\"\n >\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n fill=\"#000000\"\n >\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n </svg>\n </IcCard>\n </a>\n</ComponentPreview>\n",
+ "contents": "\r\nimport {\r\n IcCard,\r\n IcStatusTag,\r\n IcButton,\r\n IcTypography,\r\n SlottedSVG,\r\n IcBadge,\r\n} from \"@ukic/react\";\r\n\r\nexport const CardIcon = () => (\r\n <svg\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"24\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"#000000\"\r\n >\r\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\r\n <path d=\"M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z\" />\r\n </svg>\r\n);\r\n\r\nexport const InteractionIcon = () => (\r\n <svg\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"16\"\r\n height=\"16\"\r\n fill=\"currentColor\"\r\n viewBox=\"0 0 16 16\"\r\n >\r\n <path d=\"M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z\" />\r\n </svg>\r\n);\r\n\r\n## Component demo\r\n\r\nexport const snippets = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-card \r\n heading=\"Americano order\" \r\n subheading=\"Name: Michael\" \r\n message=\"Extras: Double espresso shot and oat milk.\"\r\n>\r\n <svg\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"24\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"#000000\"\r\n >\r\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\r\n </svg>\r\n <ic-button variant=\"icon\" title=\"More information\" slot=\"interaction-button\">\r\n <svg\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"16\"\r\n height=\"16\"\r\n fill=\"currentColor\"\r\n viewBox=\"0 0 16 16\"\r\n >\r\n <path d=\"M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z\" />\r\n </svg>\r\n </ic-button>\r\n <ic-status-tag slot=\"adornment\" label=\"In Progress\" small=\"true\"></ic-status-tag>\r\n <svg\r\n slot=\"image-mid\"\r\n class=\"card-image\"\r\n viewBox=\"0 0 1600 1250\"\r\n >\r\n <rect fill=\"#ff7700\" width=\"1600\" height=\"1600\" y=\"-350\" />\r\n <polygon fill=\"#cc0000\" points=\"957 450 539 900 1396 900\" />\r\n <polygon fill=\"#aa0000\" points=\"957 450 872.9 900 1396 900\" />\r\n <polygon fill=\"#c50022\" points=\"-60 900 398 662 816 900\" />\r\n <polygon fill=\"#a3001b\" points=\"337 900 398 662 816 900\" />\r\n <polygon fill=\"#be0044\" points=\"1203 546 1552 900 876 900\" />\r\n <polygon fill=\"#9c0036\" points=\"1203 546 1552 900 1162 900\" />\r\n <polygon fill=\"#b80066\" points=\"641 695 886 900 367 900\" />\r\n <polygon fill=\"#960052\" points=\"587 900 641 695 886 900\" />\r\n <polygon fill=\"#b10088\" points=\"1710 900 1401 632 1096 900\" />\r\n <polygon fill=\"#8f006d\" points=\"1710 900 1401 632 1365 900\" />\r\n <polygon fill=\"#aa00aa\" points=\"1210 900 971 687 725 900\" />\r\n <polygon fill=\"#880088\" points=\"943 900 1210 900 971 687\" />\r\n </svg>\r\n <div \r\n slot=\"interaction-controls\" \r\n class=\"interaction-area\"\r\n >\r\n <ic-button variant=\"primary\">Accept</ic-button>\r\n <ic-button variant=\"secondary\">Cancel</ic-button>\r\n </div>\r\n <ic-typography slot=\"expanded-content\" variant=\"body\">\r\n To cancel your order click cancel.\r\n </ic-typography>\r\n</ic-card>`,\r\n long: `ic-card {\r\n width: 22.5rem;\r\n }\r\n .interaction-area {\r\n display: flex;\r\n gap: var(--ic-space-md);\r\n }\r\n .card-image {\r\n height: 100%;\r\n width: 100%;\r\n max-height: 20.375rem;\r\n max-width: 20.375rem;\r\n }\r\n</style>\r\n<body>\r\n {shortCode}`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcCard \r\n heading=\"Americano order\" \r\n subheading=\"Name: Michael\" \r\n message=\"Extras: Double espresso shot and oat milk.\"\r\n className={classes.card}\r\n>\r\n <SlottedSVG\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"24\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"#000000\"\r\n >\r\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\r\n </SlottedSVG>\r\n <IcButton variant=\"icon\" title=\"More information\" slot=\"interaction-button\">\r\n <SlottedSVG\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"16\"\r\n height=\"16\"\r\n fill=\"currentColor\"\r\n viewBox=\"0 0 16 16\"\r\n >\r\n <path d=\"M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z\" />\r\n </SlottedSVG>\r\n </IcButton> \r\n <IcStatusTag slot=\"adornment\" label=\"In Progress\" small />\r\n <SlottedSVG\r\n slot=\"image-mid\"\r\n viewBox=\"0 0 1600 1250\"\r\n className={classes.cardImage}\r\n >\r\n <rect fill=\"#ff7700\" width=\"1600\" height=\"1600\" y=\"-350\" />\r\n <polygon fill=\"#cc0000\" points=\"957 450 539 900 1396 900\" />\r\n <polygon fill=\"#aa0000\" points=\"957 450 872.9 900 1396 900\" />\r\n <polygon fill=\"#c50022\" points=\"-60 900 398 662 816 900\" />\r\n <polygon fill=\"#a3001b\" points=\"337 900 398 662 816 900\" />\r\n <polygon fill=\"#be0044\" points=\"1203 546 1552 900 876 900\" />\r\n <polygon fill=\"#9c0036\" points=\"1203 546 1552 900 1162 900\" />\r\n <polygon fill=\"#b80066\" points=\"641 695 886 900 367 900\" />\r\n <polygon fill=\"#960052\" points=\"587 900 641 695 886 900\" />\r\n <polygon fill=\"#b10088\" points=\"1710 900 1401 632 1096 900\" />\r\n <polygon fill=\"#8f006d\" points=\"1710 900 1401 632 1365 900\" />\r\n <polygon fill=\"#aa00aa\" points=\"1210 900 971 687 725 900\" />\r\n <polygon fill=\"#880088\" points=\"943 900 1210 900 971 687\" />\r\n </SlottedSVG>\r\n <div \r\n slot=\"interaction-controls\" \r\n className={classes.interactionArea}>\r\n <IcButton variant=\"primary\">Accept</IcButton>\r\n <IcButton variant=\"secondary\">Cancel</IcButton>\r\n </div>\r\n <IcTypography slot=\"expanded-content\" variant=\"body\">\r\n To cancel your order click cancel.\r\n </IcTypography>\r\n</IcCard>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `const useStyles = createUseStyles({\r\n card: {\r\n width: \"22.5rem\",\r\n },\r\n cardImage: {\r\n height: \"100%\",\r\n width: \"100%\",\r\n maxHeight: \"20.375rem\",\r\n maxWidth: \"20.375rem\",\r\n },\r\n interactionArea: {\r\n display: \"flex\",\r\n gap: \"var(--ic-space-md)\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nreturn (\r\n {shortCode}\r\n)`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `const useStyles = createUseStyles({\r\n card: {\r\n width: \"22.5rem\",\r\n },\r\n cardImage: {\r\n height: \"100%\",\r\n width: \"100%\",\r\n maxHeight: \"20.375rem\",\r\n maxWidth: \"20.375rem\",\r\n },\r\n interactionArea: {\r\n display: \"flex\",\r\n gap: \"var(--ic-space-md)\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nreturn (\r\n {shortCode}\r\n)`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview snippets={snippets}>\r\n <IcCard\r\n heading=\"Americano order\"\r\n subheading=\"Name: Michael\"\r\n message=\"Extras: Double espresso shot and oat milk.\"\r\n expandable\r\n style={{ width: \"22.5rem\" }}\r\n >\r\n <IcStatusTag slot=\"adornment\" status=\"warning\" label=\"In Progress\" small />\r\n <IcButton variant=\"icon\" title=\"More information\" slot=\"interaction-button\">\r\n <svg\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"16\"\r\n height=\"16\"\r\n fill=\"currentColor\"\r\n class=\"bi bi-three-dots-vertical\"\r\n viewBox=\"0 0 16 16\"\r\n >\r\n <path d=\"M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z\" />\r\n </svg>\r\n </IcButton>\r\n <svg\r\n slot=\"image-mid\"\r\n style={{\r\n height: \"100%\",\r\n width: \"100%\",\r\n maxHeight: \"20.375rem\",\r\n maxWidth: \"20.375rem\",\r\n }}\r\n viewBox=\"0 0 1600 1250\"\r\n >\r\n <rect fill=\"#ff7700\" width=\"1600\" height=\"1600\" y=\"-350\" />\r\n <polygon fill=\"#cc0000\" points=\"957 450 539 900 1396 900\" />\r\n <polygon fill=\"#aa0000\" points=\"957 450 872.9 900 1396 900\" />\r\n <polygon fill=\"#c50022\" points=\"-60 900 398 662 816 900\" />\r\n <polygon fill=\"#a3001b\" points=\"337 900 398 662 816 900\" />\r\n <polygon fill=\"#be0044\" points=\"1203 546 1552 900 876 900\" />\r\n <polygon fill=\"#9c0036\" points=\"1203 546 1552 900 1162 900\" />\r\n <polygon fill=\"#b80066\" points=\"641 695 886 900 367 900\" />\r\n <polygon fill=\"#960052\" points=\"587 900 641 695 886 900\" />\r\n <polygon fill=\"#b10088\" points=\"1710 900 1401 632 1096 900\" />\r\n <polygon fill=\"#8f006d\" points=\"1710 900 1401 632 1365 900\" />\r\n <polygon fill=\"#aa00aa\" points=\"1210 900 971 687 725 900\" />\r\n <polygon fill=\"#880088\" points=\"943 900 1210 900 971 687\" />\r\n </svg>\r\n <svg\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n width=\"24\"\r\n fill=\"#000000\"\r\n >\r\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\r\n </svg>\r\n <div slot=\"interaction-controls\" style={{ display: \"flex\", gap: \"1rem\" }}>\r\n <IcButton variant=\"primary\">Accept</IcButton>\r\n <IcButton variant=\"secondary\">Cancel</IcButton>\r\n </div>\r\n <IcTypography slot=\"expanded-content\" variant=\"body\">\r\n To cancel your order click cancel.\r\n </IcTypography>\r\n </IcCard>\r\n</ComponentPreview>\r\n\r\n## Card details\r\n\r\n<ComponentDetails component=\"ic-card\" />\r\n\r\n## Variants\r\n\r\n### Heading only\r\n\r\nexport const headingOnly = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-card heading=\"Americano order\"></ic-card>`,\r\n long: `{shortCode}`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcCard heading=\"Americano order\"></IcCard>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `{shortCode}`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `{shortCode}`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview snippets={headingOnly}>\r\n <IcCard heading=\"Americano order\" />\r\n</ComponentPreview>\r\n\r\n### With icon\r\n\r\nexport const withIcon = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-card heading=\"Americano order\">\r\n <svg\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"24\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"#000000\"\r\n >\r\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\r\n </svg>\r\n</ic-card>`,\r\n long: `{shortCode}`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcCard heading=\"Americano order\">\r\n <SlottedSVG \r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"24\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"#000000\"\r\n >\r\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\r\n </SlottedSVG>\r\n</IcCard>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `{shortCode}`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `{shortCode}`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview snippets={withIcon}>\r\n <IcCard heading=\"Americano order\">\r\n <SlottedSVG\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n width=\"24\"\r\n fill=\"#000000\"\r\n >\r\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\r\n </SlottedSVG>\r\n </IcCard>\r\n</ComponentPreview>\r\n\r\n### Message\r\n\r\nexport const withMessage = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-card heading=\"Americano order\" message=\"Extras: Double espresso shot and oat milk.\">\r\n <svg\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"24\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"#000000\"\r\n >\r\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\r\n </svg>\r\n</ic-card>`,\r\n long: `{shortCode}`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcCard heading=\"Americano order\" message=\"Extras: Double espresso shot and oat milk.\">\r\n <SlottedSVG \r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"24\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"#000000\"\r\n >\r\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\r\n </SlottedSVG>\r\n</IcCard>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `{shortCode}`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `{shortCode}`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview snippets={withMessage}>\r\n <IcCard\r\n heading=\"Americano order\"\r\n message=\"Extras: Double espresso shot and oat milk.\"\r\n >\r\n <svg\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n width=\"24\"\r\n fill=\"#000000\"\r\n >\r\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\r\n </svg>\r\n </IcCard>\r\n</ComponentPreview>\r\n\r\n### With subheading\r\n\r\nexport const withSubHeading = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-card \r\n heading=\"Americano order\" \r\n subheading=\"Name: Michael\" \r\n message=\"Extras: Double espresso shot and oat milk.\"\r\n>\r\n <svg\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"24\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"#000000\"\r\n >\r\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\r\n </svg>\r\n</ic-card>`,\r\n long: `{shortCode}`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcCard \r\n heading=\"Americano order\" \r\n subheading=\"Name: Michael\" \r\n message=\"Extras: Double espresso shot and oat milk.\"\r\n>\r\n <SlottedSVG \r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"24\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"#000000\"\r\n >\r\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\r\n </SlottedSVG>\r\n</IcCard>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `{shortCode}`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `{shortCode}`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview snippets={withSubHeading}>\r\n <IcCard\r\n heading=\"Americano order\"\r\n subheading=\"Name: Michael\"\r\n message=\"Extras: Double espresso shot and oat milk.\"\r\n >\r\n <svg\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n width=\"24\"\r\n fill=\"#000000\"\r\n >\r\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\r\n </svg>\r\n </IcCard>\r\n</ComponentPreview>\r\n\r\n### Interaction button\r\n\r\nexport const interactionButton = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-card \r\n heading=\"Americano order\" \r\n subheading=\"Name: Michael\" \r\n message=\"Extras: Double espresso shot and oat milk.\"\r\n>\r\n <svg\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"24\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"#000000\"\r\n >\r\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\r\n </svg>\r\n <ic-button variant=\"icon\" title=\"More information\" slot=\"interaction-button\">\r\n <svg\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"16\"\r\n height=\"16\"\r\n fill=\"currentColor\"\r\n viewBox=\"0 0 16 16\"\r\n >\r\n <path d=\"M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z\" />\r\n </svg>\r\n </ic-button>\r\n</ic-card>`,\r\n long: `{shortCode}`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcCard \r\n heading=\"Americano order\" \r\n subheading=\"Name: Michael\" \r\n message=\"Extras: Double espresso shot and oat milk.\"\r\n>\r\n <SlottedSVG \r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"24\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"#000000\"\r\n >\r\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\r\n </SlottedSVG>\r\n <IcButton variant=\"icon\" title=\"More information\" slot=\"interaction-button\">\r\n <SlottedSVG slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"16\"\r\n height=\"16\"\r\n fill=\"currentColor\"\r\n viewBox=\"0 0 16 16\"\r\n >\r\n <path d=\"M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z\" />\r\n </SlottedSVG>\r\n </IcButton>\r\n</IcCard>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `{shortCode}`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `{shortCode}`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview snippets={interactionButton}>\r\n <IcCard\r\n heading=\"Americano order\"\r\n subheading=\"Name: Michael\"\r\n message=\"Extras: Double espresso shot and oat milk.\"\r\n >\r\n <svg\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n width=\"24\"\r\n fill=\"#000000\"\r\n >\r\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\r\n </svg>\r\n <IcButton variant=\"icon\" title=\"More information\" slot=\"interaction-button\">\r\n <InteractionIcon />\r\n </IcButton>\r\n </IcCard>\r\n</ComponentPreview>\r\n\r\n### Adornment\r\n\r\nexport const adornment = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-card \r\n heading=\"Americano order\" \r\n subheading=\"Name: Michael\" \r\n message=\"Extras: Double espresso shot and oat milk.\"\r\n>\r\n <svg\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"24\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"#000000\"\r\n >\r\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\r\n </svg>\r\n <ic-status-tag slot=\"adornment\" status=\"warning\" label=\"In Progress\" size=\"small\"></ic-status-tag>\r\n</ic-card>`,\r\n long: `{shortCode}`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcCard \r\n heading=\"Americano order\" \r\n subheading=\"Name: Michael\" \r\n message=\"Extras: Double espresso shot and oat milk.\"\r\n>\r\n <SlottedSVG \r\n slot=\"icon\" \r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"24\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"#000000\"\r\n >\r\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\r\n </SlottedSVG>\r\n <IcStatusTag slot=\"adornment\" status=\"warning\" label=\"In Progress\" size=\"small\" />\r\n</IcCard>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `{shortCode}`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `{shortCode}`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview snippets={adornment}>\r\n <IcCard\r\n heading=\"Americano order\"\r\n subheading=\"Name: Michael\"\r\n message=\"Extras: Double espresso shot and oat milk.\"\r\n >\r\n <svg\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n width=\"24\"\r\n fill=\"#000000\"\r\n >\r\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\r\n </svg>\r\n <IcStatusTag\r\n slot=\"adornment\"\r\n status=\"warning\"\r\n label=\"In Progress\"\r\n size=\"small\"\r\n />\r\n </IcCard>\r\n</ComponentPreview>\r\n\r\n### Top image\r\n\r\nexport const topImage = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-card \r\n heading=\"Americano order\" \r\n subheading=\"Name: Michael\" \r\n message=\"Extras: Double espresso shot and oat milk.\"\r\n>\r\n <svg\r\n slot=\"image-top\"\r\n class=\"card-image\"\r\n viewBox=\"0 0 1600 1250\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n >\r\n <rect fill=\"#ff7700\" width=\"1600\" height=\"1600\" y=\"-350\" />\r\n <polygon fill=\"#cc0000\" points=\"957 450 539 900 1396 900\" />\r\n <polygon fill=\"#aa0000\" points=\"957 450 872.9 900 1396 900\" />\r\n <polygon fill=\"#c50022\" points=\"-60 900 398 662 816 900\" />\r\n <polygon fill=\"#a3001b\" points=\"337 900 398 662 816 900\" />\r\n <polygon fill=\"#be0044\" points=\"1203 546 1552 900 876 900\" />\r\n <polygon fill=\"#9c0036\" points=\"1203 546 1552 900 1162 900\" />\r\n <polygon fill=\"#b80066\" points=\"641 695 886 900 367 900\" />\r\n <polygon fill=\"#960052\" points=\"587 900 641 695 886 900\" />\r\n <polygon fill=\"#b10088\" points=\"1710 900 1401 632 1096 900\" />\r\n <polygon fill=\"#8f006d\" points=\"1710 900 1401 632 1365 900\" />\r\n <polygon fill=\"#aa00aa\" points=\"1210 900 971 687 725 900\" />\r\n <polygon fill=\"#880088\" points=\"943 900 1210 900 971 687\" />\r\n </svg>\r\n <svg\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"24\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"#000000\"\r\n >\r\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\r\n </svg>\r\n <ic-button variant=\"icon\" title=\"More information\" slot=\"interaction-button\">\r\n <svg\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"16\"\r\n height=\"16\"\r\n fill=\"currentColor\"\r\n viewBox=\"0 0 16 16\"\r\n >\r\n <path d=\"M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z\" />\r\n </svg>\r\n </ic-button>\r\n <ic-status-tag slot=\"adornment\" status=\"warning\" label=\"In Progress\" size=\"small\"></ic-status-tag>\r\n</ic-card>`,\r\n long: `ic-card {\r\n width: 22.5rem;\r\n }\r\n .card-image {\r\n height: 100%;\r\n width: 100%;\r\n maxHeight: 20.375rem;\r\n maxWidth: 20.375rem;\r\n }\r\n </style>\r\n <body>\r\n {shortCode}`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcCard \r\n heading=\"Americano order\" \r\n subheading=\"Name: Michael\" \r\n message=\"Extras: Double espresso shot and oat milk.\"\r\n className={classes.card}\r\n>\r\n <SlottedSVG\r\n slot=\"image-top\"\r\n className={classes.cardImage}\r\n viewBox=\"0 0 1600 1250\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n >\r\n <rect fill=\"#ff7700\" width=\"1600\" height=\"1600\" y=\"-350\" />\r\n <polygon fill=\"#cc0000\" points=\"957 450 539 900 1396 900\" />\r\n <polygon fill=\"#aa0000\" points=\"957 450 872.9 900 1396 900\" />\r\n <polygon fill=\"#c50022\" points=\"-60 900 398 662 816 900\" />\r\n <polygon fill=\"#a3001b\" points=\"337 900 398 662 816 900\" />\r\n <polygon fill=\"#be0044\" points=\"1203 546 1552 900 876 900\" />\r\n <polygon fill=\"#9c0036\" points=\"1203 546 1552 900 1162 900\" />\r\n <polygon fill=\"#b80066\" points=\"641 695 886 900 367 900\" />\r\n <polygon fill=\"#960052\" points=\"587 900 641 695 886 900\" />\r\n <polygon fill=\"#b10088\" points=\"1710 900 1401 632 1096 900\" />\r\n <polygon fill=\"#8f006d\" points=\"1710 900 1401 632 1365 900\" />\r\n <polygon fill=\"#aa00aa\" points=\"1210 900 971 687 725 900\" />\r\n <polygon fill=\"#880088\" points=\"943 900 1210 900 971 687\" />\r\n </SlottedSVG>\r\n <SlottedSVG\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"24\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"#000000\"\r\n >\r\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\r\n </SlottedSVG>\r\n <IcButton variant=\"icon\" title=\"More information\" slot=\"interaction-button\">\r\n <SlottedSVG\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"16\"\r\n height=\"16\"\r\n fill=\"currentColor\"\r\n viewBox=\"0 0 16 16\"\r\n >\r\n <path d=\"M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z\" />\r\n </SlottedSVG>\r\n </IcButton> \r\n <IcStatusTag slot=\"adornment\" status=\"warning\" label=\"In Progress\" size=\"small\" />\r\n</IcCard>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `const useStyles = createUseStyles({\r\n card: {\r\n width: \"22.5rem\",\r\n },\r\n cardImage: {\r\n height: \"100%\",\r\n width: \"100%\",\r\n maxHeight: \"20.375rem\",\r\n maxWidth: \"20.375rem\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nreturn (\r\n {shortCode}\r\n)`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `{shortCode}`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview snippets={topImage}>\r\n <IcCard\r\n heading=\"Americano order\"\r\n subheading=\"Name: Michael\"\r\n message=\"Extras: Double espresso shot and oat milk.\"\r\n >\r\n <svg\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n width=\"24\"\r\n fill=\"#000000\"\r\n >\r\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\r\n </svg>\r\n <IcStatusTag\r\n slot=\"adornment\"\r\n status=\"warning\"\r\n label=\"In Progress\"\r\n size=\"small\"\r\n />\r\n <IcButton variant=\"icon\" title=\"More information\" slot=\"interaction-button\">\r\n <InteractionIcon />\r\n </IcButton>\r\n <svg\r\n slot=\"image-top\"\r\n style={{\r\n height: \"100%\",\r\n width: \"100%\",\r\n maxHeight: \"20.375rem\",\r\n maxWidth: \"20.375rem\",\r\n }}\r\n viewBox=\"0 0 1600 1250\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n >\r\n <rect fill=\"#ff7700\" width=\"1600\" height=\"1600\" y=\"-350\" />\r\n <polygon fill=\"#cc0000\" points=\"957 450 539 900 1396 900\" />\r\n <polygon fill=\"#aa0000\" points=\"957 450 872.9 900 1396 900\" />\r\n <polygon fill=\"#c50022\" points=\"-60 900 398 662 816 900\" />\r\n <polygon fill=\"#a3001b\" points=\"337 900 398 662 816 900\" />\r\n <polygon fill=\"#be0044\" points=\"1203 546 1552 900 876 900\" />\r\n <polygon fill=\"#9c0036\" points=\"1203 546 1552 900 1162 900\" />\r\n <polygon fill=\"#b80066\" points=\"641 695 886 900 367 900\" />\r\n <polygon fill=\"#960052\" points=\"587 900 641 695 886 900\" />\r\n <polygon fill=\"#b10088\" points=\"1710 900 1401 632 1096 900\" />\r\n <polygon fill=\"#8f006d\" points=\"1710 900 1401 632 1365 900\" />\r\n <polygon fill=\"#aa00aa\" points=\"1210 900 971 687 725 900\" />\r\n <polygon fill=\"#880088\" points=\"943 900 1210 900 971 687\" />\r\n </svg>\r\n </IcCard>\r\n</ComponentPreview>\r\n\r\n### Middle image\r\n\r\nexport const midImage = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-card \r\n heading=\"Americano order\" \r\n subheading=\"Name: Michael\" \r\n message=\"Extras: Double espresso shot and oat milk.\"\r\n>\r\n <svg\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"24\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"#000000\"\r\n >\r\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\r\n </svg>\r\n <ic-button variant=\"icon\" title=\"More information\" slot=\"interaction-button\">\r\n <svg\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"16\"\r\n height=\"16\"\r\n fill=\"currentColor\"\r\n viewBox=\"0 0 16 16\"\r\n >\r\n <path d=\"M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z\" />\r\n </svg>\r\n </ic-button>\r\n <ic-status-tag slot=\"adornment\" status=\"warning\" label=\"In Progress\" size=\"small\"></ic-status-tag>\r\n <svg\r\n slot=\"image-mid\"\r\n class=\"card-image\"\r\n viewBox=\"0 0 1600 1250\"\r\n >\r\n <rect fill=\"#ff7700\" width=\"1600\" height=\"1600\" y=\"-350\" />\r\n <polygon fill=\"#cc0000\" points=\"957 450 539 900 1396 900\" />\r\n <polygon fill=\"#aa0000\" points=\"957 450 872.9 900 1396 900\" />\r\n <polygon fill=\"#c50022\" points=\"-60 900 398 662 816 900\" />\r\n <polygon fill=\"#a3001b\" points=\"337 900 398 662 816 900\" />\r\n <polygon fill=\"#be0044\" points=\"1203 546 1552 900 876 900\" />\r\n <polygon fill=\"#9c0036\" points=\"1203 546 1552 900 1162 900\" />\r\n <polygon fill=\"#b80066\" points=\"641 695 886 900 367 900\" />\r\n <polygon fill=\"#960052\" points=\"587 900 641 695 886 900\" />\r\n <polygon fill=\"#b10088\" points=\"1710 900 1401 632 1096 900\" />\r\n <polygon fill=\"#8f006d\" points=\"1710 900 1401 632 1365 900\" />\r\n <polygon fill=\"#aa00aa\" points=\"1210 900 971 687 725 900\" />\r\n <polygon fill=\"#880088\" points=\"943 900 1210 900 971 687\" />\r\n </svg>\r\n</ic-card>`,\r\n long: `ic-card {\r\n width: 22.5rem;\r\n }\r\n .card-image {\r\n height: 100%;\r\n width: 100%;\r\n maxHeight: 20.375rem;\r\n maxWidth: 20.375rem;\r\n }\r\n </style>\r\n <body>\r\n {shortCode}`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcCard \r\n heading=\"Americano order\" \r\n subheading=\"Name: Michael\" \r\n message=\"Extras: Double espresso shot and oat milk.\"\r\n className={classes.card}\r\n>\r\n <SlottedSVG\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"24\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"#000000\"\r\n >\r\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\r\n </SlottedSVG>\r\n <IcButton variant=\"icon\" title=\"More information\" slot=\"interaction-button\">\r\n <SlottedSVG\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"16\"\r\n height=\"16\"\r\n fill=\"currentColor\"\r\n viewBox=\"0 0 16 16\"\r\n >\r\n <path d=\"M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z\" />\r\n </SlottedSVG>\r\n </IcButton> \r\n <IcStatusTag slot=\"adornment\" status=\"warning\" label=\"In Progress\" size=\"small\" />\r\n <SlottedSVG\r\n slot=\"image-mid\"\r\n viewBox=\"0 0 1600 1250\"\r\n className={classes.cardImage}\r\n >\r\n <rect fill=\"#ff7700\" width=\"1600\" height=\"1600\" y=\"-350\" />\r\n <polygon fill=\"#cc0000\" points=\"957 450 539 900 1396 900\" />\r\n <polygon fill=\"#aa0000\" points=\"957 450 872.9 900 1396 900\" />\r\n <polygon fill=\"#c50022\" points=\"-60 900 398 662 816 900\" />\r\n <polygon fill=\"#a3001b\" points=\"337 900 398 662 816 900\" />\r\n <polygon fill=\"#be0044\" points=\"1203 546 1552 900 876 900\" />\r\n <polygon fill=\"#9c0036\" points=\"1203 546 1552 900 1162 900\" />\r\n <polygon fill=\"#b80066\" points=\"641 695 886 900 367 900\" />\r\n <polygon fill=\"#960052\" points=\"587 900 641 695 886 900\" />\r\n <polygon fill=\"#b10088\" points=\"1710 900 1401 632 1096 900\" />\r\n <polygon fill=\"#8f006d\" points=\"1710 900 1401 632 1365 900\" />\r\n <polygon fill=\"#aa00aa\" points=\"1210 900 971 687 725 900\" />\r\n <polygon fill=\"#880088\" points=\"943 900 1210 900 971 687\" />\r\n </SlottedSVG>\r\n</IcCard>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `const useStyles = createUseStyles({\r\n card: {\r\n width: \"22.5rem\",\r\n },\r\n cardImage: {\r\n height: \"100%\",\r\n width: \"100%\",\r\n maxHeight: \"20.375rem\",\r\n maxWidth: \"20.375rem\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nreturn (\r\n {shortCode}\r\n)`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `const useStyles = createUseStyles({\r\n card: {\r\n width: \"22.5rem\",\r\n },\r\n cardImage: {\r\n height: \"100%\",\r\n width: \"100%\",\r\n maxHeight: \"20.375rem\",\r\n maxWidth: \"20.375rem\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nreturn (\r\n {shortCode}\r\n)`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview snippets={midImage}>\r\n <IcCard\r\n heading=\"Americano order\"\r\n subheading=\"Name: Michael\"\r\n message=\"Extras: Double espresso shot and oat milk.\"\r\n >\r\n <svg\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n width=\"24\"\r\n fill=\"#000000\"\r\n >\r\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\r\n </svg>\r\n <IcButton variant=\"icon\" title=\"More information\" slot=\"interaction-button\">\r\n <InteractionIcon />\r\n </IcButton>\r\n <IcStatusTag\r\n slot=\"adornment\"\r\n status=\"warning\"\r\n label=\"In Progress\"\r\n size=\"small\"\r\n />\r\n <svg\r\n slot=\"image-mid\"\r\n style={{\r\n height: \"100%\",\r\n width: \"100%\",\r\n maxHeight: \"20.375rem\",\r\n maxWidth: \"20.375rem\",\r\n }}\r\n viewBox=\"0 0 1600 1250\"\r\n >\r\n <rect fill=\"#ff7700\" width=\"1600\" height=\"1600\" y=\"-350\" />\r\n <polygon fill=\"#cc0000\" points=\"957 450 539 900 1396 900\" />\r\n <polygon fill=\"#aa0000\" points=\"957 450 872.9 900 1396 900\" />\r\n <polygon fill=\"#c50022\" points=\"-60 900 398 662 816 900\" />\r\n <polygon fill=\"#a3001b\" points=\"337 900 398 662 816 900\" />\r\n <polygon fill=\"#be0044\" points=\"1203 546 1552 900 876 900\" />\r\n <polygon fill=\"#9c0036\" points=\"1203 546 1552 900 1162 900\" />\r\n <polygon fill=\"#b80066\" points=\"641 695 886 900 367 900\" />\r\n <polygon fill=\"#960052\" points=\"587 900 641 695 886 900\" />\r\n <polygon fill=\"#b10088\" points=\"1710 900 1401 632 1096 900\" />\r\n <polygon fill=\"#8f006d\" points=\"1710 900 1401 632 1365 900\" />\r\n <polygon fill=\"#aa00aa\" points=\"1210 900 971 687 725 900\" />\r\n <polygon fill=\"#880088\" points=\"943 900 1210 900 971 687\" />\r\n </svg>\r\n </IcCard>\r\n</ComponentPreview>\r\n\r\n### Interaction controls\r\n\r\nexport const interactionControls = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-card \r\n heading=\"Americano order\" \r\n subheading=\"Name: Michael\" \r\n message=\"Extras: Double espresso shot and oat milk.\"\r\n>\r\n <svg\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"24\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"#000000\"\r\n >\r\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\r\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\r\n </svg>\r\n <div slot=\"interaction-controls\" class=\"interaction-area\">\r\n <ic-button variant=\"primary\">Accept</ic-button>\r\n <ic-button variant=\"secondary\">Cancel</ic-button>\r\n </div>\r\n</ic-card>`,\r\n long: `.interaction-area {\r\n display: flex;\r\n gap: var(--ic-space-md);\r\n }\r\n </style>\r\n <body>\r\n {shortCode}`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcCard \r\n heading=\"Americano order\" \r\n subheading=\"Name: Michael\" \r\n message=\"Extras: Double espresso shot and oat milk.\"\r\n>\r\n <SlottedSVG\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"24\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"#000000\"\r\n >\r\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\r\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\r\n </SlottedSVG>\r\n <div slot=\"interaction-controls\" className={classes.interactionArea}>\r\n <IcButton variant=\"primary\">Accept</IcButton>\r\n <IcButton variant=\"secondary\">Cancel</IcButton>\r\n </div>\r\n</IcCard>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `const useStyles = createUseStyles({\r\n interactionArea: {\r\n display: \"flex\",\r\n gap: \"var(--ic-space-md)\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nreturn (\r\n {shortCode}\r\n)`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `const useStyles = createUseStyles({\r\n interactionArea: {\r\n display: \"flex\",\r\n gap: \"var(--ic-space-md)\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nreturn (\r\n {shortCode}\r\n)`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview snippets={interactionControls}>\r\n <IcCard\r\n heading=\"Americano order\"\r\n subheading=\"Name: Michael\"\r\n message=\"Extras: Double espresso shot and oat milk.\"\r\n >\r\n <svg\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n width=\"24\"\r\n fill=\"#000000\"\r\n >\r\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\r\n </svg>\r\n <div slot=\"interaction-controls\" style={{ display: \"flex\", gap: \"1rem\" }}>\r\n <IcButton variant=\"primary\">Accept</IcButton>\r\n <IcButton variant=\"secondary\">Cancel</IcButton>\r\n </div>\r\n </IcCard>\r\n</ComponentPreview>\r\n\r\n### Expandable\r\n\r\nexport const expandable = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-card \r\n heading=\"Americano order\" \r\n subheading=\"Name: Michael\" \r\n message=\"Extras: Double espresso shot and oat milk.\"\r\n expandable=\"true\"\r\n>\r\n <svg\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"24\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"#000000\"\r\n >\r\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\r\n </svg>\r\n <div slot=\"interaction-controls\" class=\"interaction-area\">\r\n <ic-button variant=\"primary\">Accept</ic-button>\r\n <ic-button variant=\"secondary\">Cancel</ic-button>\r\n </div>\r\n <ic-typography slot=\"expanded-content\" variant=\"body\">\r\n To cancel your order click cancel.\r\n </ic-typography>\r\n</ic-card>`,\r\n long: `.interaction-area {\r\n display: flex;\r\n gap: var(--ic-space-md);\r\n }\r\n</style>\r\n<body>\r\n {shortCode}`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcCard \r\n heading=\"Americano order\" \r\n subheading=\"Name: Michael\" \r\n message=\"Extras: Double espresso shot and oat milk.\"\r\n expandable\r\n>\r\n <SlottedSVG\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"24\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"#000000\"\r\n >\r\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\r\n </SlottedSVG>\r\n <div slot=\"interaction-controls\" className={classes.interactionArea}>\r\n <IcButton variant=\"primary\">Accept</IcButton>\r\n <IcButton variant=\"secondary\">Cancel</IcButton>\r\n </div>\r\n <IcTypography slot=\"expanded-content\" variant=\"body\">\r\n To cancel your order click cancel.\r\n </IcTypography>\r\n</IcCard>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `const useStyles = createUseStyles({\r\n interactionArea: {\r\n display: \"flex\",\r\n gap: \"var(--ic-space-md)\",\r\n },\r\n });\r\n const classes = useStyles();\r\n return (\r\n {shortCode}\r\n )`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `const useStyles = createUseStyles({\r\n interactionArea: {\r\n display: \"flex\",\r\n gap: \"var(--ic-space-md)\",\r\n },\r\n });\r\n const classes = useStyles();\r\n return (\r\n {shortCode}\r\n )`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview snippets={expandable}>\r\n <IcCard\r\n heading=\"Americano order\"\r\n subheading=\"Name: Michael\"\r\n message=\"Extras: Double espresso shot and oat milk.\"\r\n expandable\r\n >\r\n <svg\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n width=\"24\"\r\n fill=\"#000000\"\r\n >\r\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\r\n </svg>\r\n <div slot=\"interaction-controls\" style={{ display: \"flex\", gap: \"1rem\" }}>\r\n <IcButton variant=\"primary\">Accept</IcButton>\r\n <IcButton variant=\"secondary\">Cancel</IcButton>\r\n </div>\r\n <IcTypography slot=\"expanded-content\" variant=\"body\">\r\n To cancel your order click cancel.\r\n </IcTypography>\r\n </IcCard>\r\n</ComponentPreview>\r\n\r\n### Clickable link\r\n\r\nexport const clickableLink = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-card \r\n heading=\"Americano order\" \r\n subheading=\"Name: Michael\" \r\n message=\"Extras: Double espresso shot and oat milk.\"\r\n clickable=\"true\"\r\n href=\"#\"\r\n>\r\n <svg\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"24\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"#000000\"\r\n >\r\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\r\n </svg>\r\n</ic-card>`,\r\n long: `.parent-container {\r\n padding: var(--ic-space-md);\r\n }\r\n</style>\r\n<body>\r\n <div class=\"parent-container\">\r\n {shortCode}\r\n </div>`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcCard \r\n heading=\"Americano order\" \r\n subheading=\"Name: Michael\" \r\n message=\"Extras: Double espresso shot and oat milk.\"\r\n clickable\r\n href=\"#\"\r\n>\r\n <SlottedSVG\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"24\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"#000000\"\r\n >\r\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\r\n </SlottedSVG>\r\n</IcCard>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `const useStyles = createUseStyles({\r\n parentContainer: {\r\n padding: \"var(--ic-space-md)\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nreturn ( \r\n <div className={classes.parentContainer}>\r\n {shortCode}\r\n </div>\r\n)`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `const useStyles = createUseStyles({\r\n parentContainer: {\r\n padding: \"var(--ic-space-md)\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nreturn ( \r\n <div className={classes.parentContainer}>\r\n {shortCode}\r\n </div>\r\n)`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview snippets={clickableLink}>\r\n <IcCard\r\n heading=\"Americano order\"\r\n subheading=\"Name: Michael\"\r\n message=\"Extras: Double espresso shot and oat milk.\"\r\n clickable=\"true\"\r\n href=\"#\"\r\n onClick={(e) => e.preventDefault()}\r\n >\r\n <svg\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n width=\"24\"\r\n fill=\"#000000\"\r\n >\r\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\r\n </svg>\r\n </IcCard>\r\n</ComponentPreview>\r\n\r\n### Clickable button\r\n\r\nexport const clickableBtn = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-card\r\n id=\"clickable-card\"\r\n heading=\"Americano order\" \r\n subheading=\"Name: Michael\" \r\n message=\"Extras: Double espresso shot and oat milk.\"\r\n clickable=\"true\"\r\n>\r\n <svg\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"24\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"#000000\"\r\n >\r\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\r\n </svg>\r\n</ic-card>`,\r\n long: `.parent-container {\r\n padding: var(--ic-space-md);\r\n }\r\n</style>\r\n<body>\r\n <div class=\"parent-container\">\r\n {shortCode}\r\n </div>\r\n <script>\r\n const card = document.querySelector('#clickable-card');\r\n card.addEventListener('click', (ev) => {\r\n console.log(ev);\r\n })\r\n </script>`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcCard \r\n heading=\"Americano order\" \r\n subheading=\"Name: Michael\" \r\n message=\"Extras: Double espresso shot and oat milk.\" \r\n clickable\r\n onClick={(ev) => console.log(ev)}\r\n>\r\n <SlottedSVG\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"24\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"#000000\"\r\n >\r\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\r\n </SlottedSVG>\r\n</IcCard>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `const useStyles = createUseStyles({\r\n parentContainer: {\r\n padding: \"var(--ic-space-md)\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nreturn ( \r\n <div className={classes.parentContainer}>\r\n {shortCode}\r\n </div>\r\n)`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `const useStyles = createUseStyles({\r\n parentContainer: {\r\n padding: \"var(--ic-space-md)\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nreturn ( \r\n <div className={classes.parentContainer}>\r\n {shortCode}\r\n </div>\r\n)`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview snippets={clickableBtn}>\r\n <IcCard\r\n heading=\"Americano order\"\r\n subheading=\"Name: Michael\"\r\n message=\"Extras: Double espresso shot and oat milk.\"\r\n clickable=\"true\"\r\n onClick={(ev) => console.log(ev)}\r\n >\r\n <svg\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n width=\"24\"\r\n fill=\"#000000\"\r\n >\r\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\r\n </svg>\r\n </IcCard>\r\n</ComponentPreview>\r\n\r\n### With badge\r\n\r\nexport const withBadge = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-card \r\n heading=\"Americano order\" \r\n subheading=\"Name: Michael\" \r\n message=\"Extras: Double espresso shot and oat milk.\"\r\n clickable=\"true\"\r\n href=\"#\"\r\n>\r\n <ic-badge\r\n text-label=\"New\"\r\n slot=\"badge\"\r\n variant=\"info\"\r\n size=\"large\"\r\n ></ic-badge>\r\n <svg\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"24\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"#000000\"\r\n >\r\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\r\n </svg>\r\n</ic-card>`,\r\n long: `.parent-container {\r\n padding: var(--ic-space-md);\r\n }\r\n</style>\r\n<body>\r\n <div class=\"parent-container\">\r\n {shortCode}\r\n </div>`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcCard \r\n heading=\"Americano order\" \r\n subheading=\"Name: Michael\" \r\n message=\"Extras: Double espresso shot and oat milk.\" \r\n clickable\r\n href=\"#\"\r\n>\r\n <IcBadge size=\"large\" textLabel=\"New\" slot=\"badge\" variant=\"info\"/>\r\n <SlottedSVG\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"24\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"#000000\"\r\n >\r\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\r\n </SlottedSVG>\r\n</IcCard>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `const useStyles = createUseStyles({\r\n parentContainer: {\r\n padding: \"var(--ic-space-md)\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nreturn ( \r\n <div className={classes.parentContainer}>\r\n {shortCode}\r\n </div>\r\n)`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `const useStyles = createUseStyles({\r\n parentContainer: {\r\n padding: \"var(--ic-space-md)\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nreturn ( \r\n <div className={classes.parentContainer}>\r\n {shortCode}\r\n </div>\r\n)`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview snippets={withBadge}>\r\n <IcCard\r\n heading=\"Americano order\"\r\n subheading=\"Name: Michael\"\r\n message=\"Extras: Double espresso shot and oat milk.\"\r\n clickable=\"true\"\r\n href=\"#\"\r\n onClick={(e) => e.preventDefault()}\r\n >\r\n <IcBadge size=\"large\" textLabel=\"New\" slot=\"badge\" variant=\"info\" />\r\n <svg\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n width=\"24\"\r\n fill=\"#000000\"\r\n >\r\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\r\n </svg>\r\n </IcCard>\r\n</ComponentPreview>\r\n\r\n### Disabled\r\n\r\nexport const disabled = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-card \r\n heading=\"Americano order\" \r\n subheading=\"Name: Michael\" \r\n message=\"Extras: Double espresso shot and oat milk.\"\r\n clickable=\"true\" \r\n disabled=\"true\"\r\n>\r\n <svg\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"24\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"#000000\"\r\n >\r\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\r\n </svg>\r\n</ic-card>`,\r\n long: `.parent-container {\r\n padding: var(--ic-space-md);\r\n }\r\n</style>\r\n<body>\r\n <div class=\"parent-container\">\r\n {shortCode}\r\n </div>`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcCard \r\n heading=\"Americano order\" \r\n subheading=\"Name: Michael\" \r\n message=\"Extras: Double espresso shot and oat milk.\" \r\n clickable\r\n disabled\r\n>\r\n <svg\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"24\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"#000000\"\r\n >\r\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\r\n </svg>\r\n</IcCard>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `const useStyles = createUseStyles({\r\n parentContainer: {\r\n padding: \"var(--ic-space-md)\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nreturn ( \r\n <div className={classes.parentContainer}>\r\n {shortCode}\r\n </div>\r\n)`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `const useStyles = createUseStyles({\r\n parentContainer: {\r\n padding: \"var(--ic-space-md)\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nreturn ( \r\n <div className={classes.parentContainer}>\r\n {shortCode}\r\n </div>\r\n)`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview snippets={disabled}>\r\n <IcCard\r\n heading=\"Americano order\"\r\n subheading=\"Name: Michael\"\r\n message=\"Extras: Double espresso shot and oat milk.\"\r\n clickable\r\n disabled\r\n >\r\n <svg\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n width=\"24\"\r\n fill=\"#000000\"\r\n >\r\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\r\n </svg>\r\n </IcCard>\r\n</ComponentPreview>\r\n\r\n### Full width\r\n\r\nexport const fullWidth = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-card \r\n heading=\"Americano order\" \r\n subheading=\"Name: Michael\" \r\n message=\"Extras: Double espresso shot and oat milk.\"\r\n full-width=\"true\"\r\n clickable=\"true\"\r\n>\r\n <svg\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"24\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"#000000\"\r\n >\r\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\r\n </svg>\r\n</ic-card>`,\r\n long: `.parent-container {\r\n padding: var(--ic-space-md);\r\n }\r\n</style>\r\n<body>\r\n <div class=\"parent-container\">\r\n {shortCode}\r\n </div>`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcCard \r\n heading=\"Americano order\" \r\n subheading=\"Name: Michael\" \r\n message=\"Extras: Double espresso shot and oat milk.\"\r\n fullWidth\r\n clickable\r\n>\r\n <SlottedSVG\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"24\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"#000000\"\r\n >\r\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\r\n </SlottedSVG>\r\n</IcCard>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `const useStyles = createUseStyles({\r\n parentContainer: {\r\n padding: \"var(--ic-space-md)\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nreturn ( \r\n <div className={classes.parentContainer}>\r\n {shortCode}\r\n </div>\r\n)`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `const useStyles = createUseStyles({\r\n parentContainer: {\r\n padding: \"var(--ic-space-md)\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nreturn ( \r\n <div className={classes.parentContainer}>\r\n {shortCode}\r\n </div>\r\n)`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview snippets={fullWidth}>\r\n <IcCard\r\n heading=\"Americano order\"\r\n subheading=\"Name: Michael\"\r\n message=\"Extras: Double espresso shot and oat milk.\"\r\n fullWidth\r\n clickable\r\n >\r\n <svg\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n width=\"24\"\r\n fill=\"#000000\"\r\n >\r\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\r\n </svg>\r\n </IcCard>\r\n</ComponentPreview>\r\n\r\n### Wrapped by link\r\n\r\nexport const wrapped = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<a href=\"/\">\r\n <ic-card \r\n heading=\"Americano order\"\r\n subheading=\"Name: Michael\"\r\n message=\"Extras: Double espresso shot and oat milk.\"> \r\n <svg\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n width=\"24\"\r\n fill=\"#000000\"\r\n >\r\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\r\n </svg>\r\n </ic-card>\r\n</a>`,\r\n long: `.parent-container {\r\n padding: var(--ic-space-md);\r\n }\r\n</style>\r\n<body>\r\n <div class=\"parent-container\">\r\n {shortCode}\r\n </div>`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<a href=\"/\">\r\n <IcCard \r\n heading=\"Americano order\"\r\n subheading=\"Name: Michael\"\r\n message=\"Extras: Double espresso shot and oat milk.\"> \r\n <svg\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n width=\"24\"\r\n fill=\"#000000\"\r\n >\r\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\r\n </svg>\r\n </IcCard>\r\n</a>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `const useStyles = createUseStyles({\r\n parentContainer: {\r\n padding: \"var(--ic-space-md)\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nreturn ( \r\n <div className={classes.parentContainer}>\r\n {shortCode}\r\n </div>\r\n)`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `const useStyles = createUseStyles({\r\n parentContainer: {\r\n padding: \"var(--ic-space-md)\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nreturn ( \r\n <div className={classes.parentContainer}>\r\n {shortCode}\r\n </div>\r\n)`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview snippets={wrapped}>\r\n <a\r\n href=\"/\"\r\n onClick={(e) => e.preventDefault()}\r\n style={{ textDecoration: \"none\", color: \"var(--ic-architechtural-black)\" }}\r\n aria-label=\"Americano order card\"\r\n >\r\n <IcCard\r\n heading=\"Americano order\"\r\n subheading=\"Name: Michael\"\r\n message=\"Extras: Double espresso shot and oat milk.\"\r\n >\r\n <svg\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n width=\"24\"\r\n fill=\"#000000\"\r\n >\r\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\r\n </svg>\r\n </IcCard>\r\n </a>\r\n</ComponentPreview>\r\n",
"path": "/components/card/code",
"date": "2024-05-31",
"title": "Card",
@@ -1400,16 +1400,16 @@
}
],
"meta": {
- "relativePath": "components/cards/code.mdx",
- "createdAt": "2024-11-06T10:27:49.404Z",
- "lastModified": "2024-11-06T10:18:59.968Z",
- "size": 56785,
- "formattedSize": "55.5 KB"
+ "relativePath": "components\\cards\\code.mdx",
+ "createdAt": "2024-12-04T13:23:54.064Z",
+ "lastModified": "2024-12-04T13:23:54.064Z",
+ "size": 58872,
+ "formattedSize": "57.5 KB"
}
},
{
"id": "components\\cards\\guidancex",
- "contents": "\nimport { IcCard, IcButton, IcTypography, IcStatusTag } from \"@ukic/react\";\nimport cardsFig1 from \"./images/fig-1-card-anatomy.png\";\nimport cardsFig2 from \"./images/fig-2-heading-area-anatomy.png\";\nimport cardsFig3 from \"./images/fig-3-place-images-either-at-the-top-or-in-the-middle-of-cards-if-content-is-present.png\";\nimport cardsFig4 from \"./images/fig-4-dont-place-images-below-content.png\";\nimport cardsFig5 from \"./images/fig-5-interaction-area-anatomy.png\";\nimport cardsFig6 from \"./images/fig-6-dont-mix-card-variants-when-arranged-in-a-group.png\";\nimport cardsFig7 from \"./images/fig-7-dont-vertically-align-cards-with-different-widths.png\";\nimport cardsFig10 from \"./images/fig-10-use-the-show-less-show-more-pattern-when-adding-long-portions-of-text-to-the-content-area.png\";\nimport cardsFig11 from \"./images/fig-11-avoid-displaying-lengthy-descriptions-in-the-content-area.png\";\n\n## Component variants\n\nThere are three variants of cards:\n\n- Interactive cards\n- Static cards\n- Clickable cards\n\n<ComponentPreview>\n <IcCard\n heading=\"Americano order\"\n subheading=\"Name: Michael\"\n message=\"Extras: Double espresso shot and oat milk.\"\n expandable\n style={{ width: \"22.5rem\" }}\n >\n <IcStatusTag slot=\"adornment\" status=\"warning\" label=\"In Progress\" small />\n <IcButton variant=\"icon\" title=\"More information\" slot=\"interaction-button\">\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"16\"\n height=\"16\"\n fill=\"currentColor\"\n class=\"bi bi-three-dots-vertical\"\n viewBox=\"0 0 16 16\"\n >\n <path d=\"M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z\" />\n </svg>\n </IcButton>\n <svg\n slot=\"image-mid\"\n style={{\n height: \"100%\",\n width: \"100%\",\n maxHeight: \"20.375rem\",\n maxWidth: \"20.375rem\",\n }}\n viewBox=\"0 0 1600 1250\"\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 <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n fill=\"#000000\"\n >\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n </svg>\n <div slot=\"interaction-controls\" style={{ display: \"flex\", gap: \"1rem\" }}>\n <IcButton variant=\"primary\">Accept</IcButton>\n <IcButton variant=\"secondary\">Cancel</IcButton>\n </div>\n <IcTypography slot=\"expanded-content\" variant=\"body\">\n To cancel your order click cancel.\n </IcTypography>\n </IcCard>\n</ComponentPreview>\n\n### Interactive cards\n\nInteractive cards contain different types of content and actions. The container itself is not interactive but can have interactive components.\n\n### Clickable cards\n\nClickable cards provide a single action that is triggered by clicking anywhere on the card.\n\n### Static cards\n\nStatic cards are non-interactive and contain static content only.\n\n## Anatomy\n\nThe following section describes the different areas of content on a card.\n\n<DoDontCaution\n imageSrc={cardsFig1}\n imageAlt=\"A diagram showing the positioning of the different areas within a card. The areas are a heading area, an image area, a content area, an interaction area, and an expandable area.\"\n state=\"none\"\n caption=\"A card includes a heading area, an image area, a content area, an interaction area and an expandable area.\"\n/>\n\n### 1. Heading area\n\n<DoDontCaution\n imageSrc={cardsFig2}\n imageAlt=\"A diagram showing the positioning of the different sections within the heading area. The area is split up into three different rows. The first row houses section 'A' on the left, section 'B' in the middle, and section 'E' on the right. The second row houses section 'C', and the third row houses section 'D'.\"\n state=\"none\"\n caption=\"A card's heading area includes five elements.\"\n/>\n\nThe heading area can contain:\n\n- A: Icon/Avatar\n- B: Heading\n- C: Subtitle\n- D: Adornment, for example [status tags](/components/status-tag)\n- E: More options icon button (only for interactive cards)\n\n### 2. Image\n\nInclude an image either at the top or in the middle of the card. Don't place images below content if this is included in the card.\n\n<DoubleDoDontCaution>\n <DoDontCaution\n imageSrc={cardsFig3}\n imageAlt=\"Two example cards vertically aligned, where the top card displays an image above the heading area and content area, and the bottom card displays an image below the heading area and above the content area.\"\n state=\"good\"\n caption=\"Place images either at the top or in the middle of cards if content is present.\"\n />\n <DoDontCaution\n imageSrc={cardsFig4}\n imageAlt=\"An example card where an image is displayed below the heading and content area.\"\n state=\"bad\"\n caption=\"Don't place images below content.\"\n />\n</DoubleDoDontCaution>\n\n### 3. Content area\n\nAdd a descriptive message within the card content section. Interactive and static cards can include a 'see more' link to expand hidden content.\n\nSince clickable cards can only contain one interaction, text can't be hidden.\n\n### 4. Interaction area (interactive cards only)\n\n<DoDontCaution\n imageSrc={cardsFig5}\n imageAlt=\"A diagram showing the positioning of the different sections within the interaction area. The area features one row with two different sections, 'A' on the left and 'E' on the far right.\"\n state=\"none\"\n caption=\"A card's interaction area includes two elements.\"\n/>\n\nAdd interactive components to the interaction area at the bottom of the card (A). Avoid using too many interactions. The interaction area is only found in interactive cards.\n\nUse any type of button in the interaction area to provide actions.\n\nInclude an expand button (E) if you include content in the [expandable area](/components/card#5-expandable-area-interactive-cards-only).\n\n### 5. Expandable area (interactive cards only)\n\nUse an expandable area to hold content that either doesn't fit in the collapsed card or doesn't align to the above areas.\n\nThis area can be expanded by clicking the “expand” button found on the interaction bar.\n\n## Layout and placement\n\n### Grouping\n\nWhen arranging multiple cards together, try to use the same card variant for each.\n\n<DoDontCaution\n imageSrc={cardsFig6}\n imageAlt=\"An image showing a three static cards, one interactive card, and one clickable card arranged in a group.\"\n state=\"caution\"\n caption=\"Avoid mixing card variants when arranged in a group.\"\n/>\n\n### Sizing\n\nWhen cards are shown in columns, make sure cards are vertically aligned and maintain the same width for all cards.\n\nWhen arranging cards in rows, try to match the vertical height of the cards by including similar amounts of content so that they automatically align horizontally.\n\n<DoDontCaution\n imageSrc={cardsFig7}\n imageAlt=\"An image showing six cards arranged into three rows and two columns, and the width of the cards changes for each row.\"\n state=\"bad\"\n caption=\"Don't vertically align cards with different widths.\"\n/>\n\n## Content\n\nKeep headings, subheadings and adornments clear and concise.\n\n### Image\n\nUse the pre-defined aspect ratios for images in cards. These are:\n\n- 16:9\n- 1:1\n- 9:16\n- 4:1\n- 4:3\n- 3:4\n\nSet an image to fit within the image container to show the whole image, but this may introduce empty areas in the image container if the image does not match the container aspect ratio. Alternatively, set the image to fill the image container, but be aware this may crop some of the image’s content.\n\nUse a custom image aspect ratio if your image doesn't fit into one of the pre-defined options.\n\nImages should always feature an `alt` attribute. Set the `alt` equal to a descriptive alternative when an image is informational.\n\n### Content area\n\nIf placing several lines of text in the content area, use a 'see more' link to make the content expandable.\n\n<DoubleDoDontCaution>\n <DoDontCaution\n imageSrc={cardsFig10}\n imageAlt=\"An example card titled ‘Your order' with two rows of content in the content area. The second line displays truncated content and a 'see more' clickable text button.\"\n state=\"good\"\n caption=\"Use a ‘see more’ link when adding long text to the content area.\"\n />\n <DoDontCaution\n imageSrc={cardsFig11}\n imageAlt=\"An example card titled 'Your order' with nine rows of content in the content area.\"\n state=\"caution\"\n caption=\"Avoid displaying lengthy descriptions in the content area.\"\n />\n</DoubleDoDontCaution>\n\n## Custom cards\n\nCards can also be used as custom containers if the pre-defined options don't meet your needs. When designing a custom card, make sure to respect the general anatomy and structure of cards as defined in this document.\n\nAny interactive components must be placed either within the interaction bar, or the expandable area. Make sure the interactive area is always placed at the bottom of a collapsed card.\n\nCards support one single image. If you need to place two or more images, place the additional images in the expandable area.\n\nDon't include any interactive components within a clickable card as these will interfere with the clickable card’s own action.\n",
+ "contents": "\r\nimport { IcCard, IcButton, IcTypography, IcStatusTag } from \"@ukic/react\";\r\nimport cardsFig1 from \"./images/fig-1-card-anatomy.png\";\r\nimport cardsFig2 from \"./images/fig-2-heading-area-anatomy.png\";\r\nimport cardsFig3 from \"./images/fig-3-place-images-either-at-the-top-or-in-the-middle-of-cards-if-content-is-present.png\";\r\nimport cardsFig4 from \"./images/fig-4-dont-place-images-below-content.png\";\r\nimport cardsFig5 from \"./images/fig-5-interaction-area-anatomy.png\";\r\nimport cardsFig6 from \"./images/fig-6-dont-mix-card-variants-when-arranged-in-a-group.png\";\r\nimport cardsFig7 from \"./images/fig-7-dont-vertically-align-cards-with-different-widths.png\";\r\nimport cardsFig10 from \"./images/fig-10-use-the-show-less-show-more-pattern-when-adding-long-portions-of-text-to-the-content-area.png\";\r\nimport cardsFig11 from \"./images/fig-11-avoid-displaying-lengthy-descriptions-in-the-content-area.png\";\r\n\r\n## Component variants\r\n\r\nThere are three variants of cards:\r\n\r\n- Interactive cards\r\n- Static cards\r\n- Clickable cards\r\n\r\n<ComponentPreview>\r\n <IcCard\r\n heading=\"Americano order\"\r\n subheading=\"Name: Michael\"\r\n message=\"Extras: Double espresso shot and oat milk.\"\r\n expandable\r\n style={{ width: \"22.5rem\" }}\r\n >\r\n <IcStatusTag slot=\"adornment\" status=\"warning\" label=\"In Progress\" small />\r\n <IcButton variant=\"icon\" title=\"More information\" slot=\"interaction-button\">\r\n <svg\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"16\"\r\n height=\"16\"\r\n fill=\"currentColor\"\r\n class=\"bi bi-three-dots-vertical\"\r\n viewBox=\"0 0 16 16\"\r\n >\r\n <path d=\"M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z\" />\r\n </svg>\r\n </IcButton>\r\n <svg\r\n slot=\"image-mid\"\r\n style={{\r\n height: \"100%\",\r\n width: \"100%\",\r\n maxHeight: \"20.375rem\",\r\n maxWidth: \"20.375rem\",\r\n }}\r\n viewBox=\"0 0 1600 1250\"\r\n >\r\n <rect fill=\"#ff7700\" width=\"1600\" height=\"1600\" y=\"-350\" />\r\n <polygon fill=\"#cc0000\" points=\"957 450 539 900 1396 900\" />\r\n <polygon fill=\"#aa0000\" points=\"957 450 872.9 900 1396 900\" />\r\n <polygon fill=\"#c50022\" points=\"-60 900 398 662 816 900\" />\r\n <polygon fill=\"#a3001b\" points=\"337 900 398 662 816 900\" />\r\n <polygon fill=\"#be0044\" points=\"1203 546 1552 900 876 900\" />\r\n <polygon fill=\"#9c0036\" points=\"1203 546 1552 900 1162 900\" />\r\n <polygon fill=\"#b80066\" points=\"641 695 886 900 367 900\" />\r\n <polygon fill=\"#960052\" points=\"587 900 641 695 886 900\" />\r\n <polygon fill=\"#b10088\" points=\"1710 900 1401 632 1096 900\" />\r\n <polygon fill=\"#8f006d\" points=\"1710 900 1401 632 1365 900\" />\r\n <polygon fill=\"#aa00aa\" points=\"1210 900 971 687 725 900\" />\r\n <polygon fill=\"#880088\" points=\"943 900 1210 900 971 687\" />\r\n </svg>\r\n <svg\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n width=\"24\"\r\n fill=\"#000000\"\r\n >\r\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\r\n </svg>\r\n <div slot=\"interaction-controls\" style={{ display: \"flex\", gap: \"1rem\" }}>\r\n <IcButton variant=\"primary\">Accept</IcButton>\r\n <IcButton variant=\"secondary\">Cancel</IcButton>\r\n </div>\r\n <IcTypography slot=\"expanded-content\" variant=\"body\">\r\n To cancel your order click cancel.\r\n </IcTypography>\r\n </IcCard>\r\n</ComponentPreview>\r\n\r\n### Interactive cards\r\n\r\nInteractive cards contain different types of content and actions. The container itself is not interactive but can have interactive components.\r\n\r\n### Clickable cards\r\n\r\nClickable cards provide a single action that is triggered by clicking anywhere on the card.\r\n\r\n### Static cards\r\n\r\nStatic cards are non-interactive and contain static content only.\r\n\r\n## Anatomy\r\n\r\nThe following section describes the different areas of content on a card.\r\n\r\n<DoDontCaution\r\n imageSrc={cardsFig1}\r\n imageAlt=\"A diagram showing the positioning of the different areas within a card. The areas are a heading area, an image area, a content area, an interaction area, and an expandable area.\"\r\n state=\"none\"\r\n caption=\"A card includes a heading area, an image area, a content area, an interaction area and an expandable area.\"\r\n/>\r\n\r\n### 1. Heading area\r\n\r\n<DoDontCaution\r\n imageSrc={cardsFig2}\r\n imageAlt=\"A diagram showing the positioning of the different sections within the heading area. The area is split up into three different rows. The first row houses section 'A' on the left, section 'B' in the middle, and section 'E' on the right. The second row houses section 'C', and the third row houses section 'D'.\"\r\n state=\"none\"\r\n caption=\"A card's heading area includes five elements.\"\r\n/>\r\n\r\nThe heading area can contain:\r\n\r\n- A: Icon/Avatar\r\n- B: Heading\r\n- C: Subtitle\r\n- D: Adornment, for example [status tags](/components/status-tag)\r\n- E: More options icon button (only for interactive cards)\r\n\r\n### 2. Image\r\n\r\nInclude an image either at the top or in the middle of the card. Don't place images below content if this is included in the card.\r\n\r\n<DoubleDoDontCaution>\r\n <DoDontCaution\r\n imageSrc={cardsFig3}\r\n imageAlt=\"Two example cards vertically aligned, where the top card displays an image above the heading area and content area, and the bottom card displays an image below the heading area and above the content area.\"\r\n state=\"good\"\r\n caption=\"Place images either at the top or in the middle of cards if content is present.\"\r\n />\r\n <DoDontCaution\r\n imageSrc={cardsFig4}\r\n imageAlt=\"An example card where an image is displayed below the heading and content area.\"\r\n state=\"bad\"\r\n caption=\"Don't place images below content.\"\r\n />\r\n</DoubleDoDontCaution>\r\n\r\n### 3. Content area\r\n\r\nAdd a descriptive message within the card content section. Interactive and static cards can include a 'see more' link to expand hidden content.\r\n\r\nSince clickable cards can only contain one interaction, text can't be hidden.\r\n\r\n### 4. Interaction area (interactive cards only)\r\n\r\n<DoDontCaution\r\n imageSrc={cardsFig5}\r\n imageAlt=\"A diagram showing the positioning of the different sections within the interaction area. The area features one row with two different sections, 'A' on the left and 'E' on the far right.\"\r\n state=\"none\"\r\n caption=\"A card's interaction area includes two elements.\"\r\n/>\r\n\r\nAdd interactive components to the interaction area at the bottom of the card (A). Avoid using too many interactions. The interaction area is only found in interactive cards.\r\n\r\nUse any type of button in the interaction area to provide actions.\r\n\r\nInclude an expand button (E) if you include content in the [expandable area](/components/card#5-expandable-area-interactive-cards-only).\r\n\r\n### 5. Expandable area (interactive cards only)\r\n\r\nUse an expandable area to hold content that either doesn't fit in the collapsed card or doesn't align to the above areas.\r\n\r\nThis area can be expanded by clicking the “expand” button found on the interaction bar.\r\n\r\n## Layout and placement\r\n\r\n### Grouping\r\n\r\nWhen arranging multiple cards together, try to use the same card variant for each.\r\n\r\n<DoDontCaution\r\n imageSrc={cardsFig6}\r\n imageAlt=\"An image showing a three static cards, one interactive card, and one clickable card arranged in a group.\"\r\n state=\"caution\"\r\n caption=\"Avoid mixing card variants when arranged in a group.\"\r\n/>\r\n\r\n### Sizing\r\n\r\nWhen cards are shown in columns, make sure cards are vertically aligned and maintain the same width for all cards.\r\n\r\nWhen arranging cards in rows, try to match the vertical height of the cards by including similar amounts of content so that they automatically align horizontally.\r\n\r\n<DoDontCaution\r\n imageSrc={cardsFig7}\r\n imageAlt=\"An image showing six cards arranged into three rows and two columns, and the width of the cards changes for each row.\"\r\n state=\"bad\"\r\n caption=\"Don't vertically align cards with different widths.\"\r\n/>\r\n\r\n## Content\r\n\r\nKeep headings, subheadings and adornments clear and concise.\r\n\r\n### Image\r\n\r\nUse the pre-defined aspect ratios for images in cards. These are:\r\n\r\n- 16:9\r\n- 1:1\r\n- 9:16\r\n- 4:1\r\n- 4:3\r\n- 3:4\r\n\r\nSet an image to fit within the image container to show the whole image, but this may introduce empty areas in the image container if the image does not match the container aspect ratio. Alternatively, set the image to fill the image container, but be aware this may crop some of the image’s content.\r\n\r\nUse a custom image aspect ratio if your image doesn't fit into one of the pre-defined options.\r\n\r\nImages should always feature an `alt` attribute. Set the `alt` equal to a descriptive alternative when an image is informational.\r\n\r\n### Content area\r\n\r\nIf placing several lines of text in the content area, use a 'see more' link to make the content expandable.\r\n\r\n<DoubleDoDontCaution>\r\n <DoDontCaution\r\n imageSrc={cardsFig10}\r\n imageAlt=\"An example card titled ‘Your order' with two rows of content in the content area. The second line displays truncated content and a 'see more' clickable text button.\"\r\n state=\"good\"\r\n caption=\"Use a ‘see more’ link when adding long text to the content area.\"\r\n />\r\n <DoDontCaution\r\n imageSrc={cardsFig11}\r\n imageAlt=\"An example card titled 'Your order' with nine rows of content in the content area.\"\r\n state=\"caution\"\r\n caption=\"Avoid displaying lengthy descriptions in the content area.\"\r\n />\r\n</DoubleDoDontCaution>\r\n\r\n## Custom cards\r\n\r\nCards can also be used as custom containers if the pre-defined options don't meet your needs. When designing a custom card, make sure to respect the general anatomy and structure of cards as defined in this document.\r\n\r\nAny interactive components must be placed either within the interaction bar, or the expandable area. Make sure the interactive area is always placed at the bottom of a collapsed card.\r\n\r\nCards support one single image. If you need to place two or more images, place the additional images in the expandable area.\r\n\r\nDon't include any interactive components within a clickable card as these will interfere with the clickable card’s own action.\r\n",
"path": "/components/card",
"navPriority": 8,
"date": "2023-02-03",
@@ -1432,11 +1432,11 @@
}
],
"meta": {
- "relativePath": "components/cards/guidance.mdx",
- "createdAt": "2024-11-06T10:27:49.404Z",
- "lastModified": "2024-11-06T10:18:59.968Z",
- "size": 10600,
- "formattedSize": "10.4 KB"
+ "relativePath": "components\\cards\\guidance.mdx",
+ "createdAt": "2024-12-04T13:23:54.064Z",
+ "lastModified": "2024-12-04T13:23:54.064Z",
+ "size": 10869,
+ "formattedSize": "10.6 KB"
}
},
{
@@ -1463,16 +1463,16 @@
}
],
"meta": {
- "relativePath": "components/checkboxes/accessibility.mdx",
- "createdAt": "2024-11-06T10:27:49.408Z",
- "lastModified": "2024-11-06T10:18:59.976Z",
+ "relativePath": "components\\checkboxes\\accessibility.mdx",
+ "createdAt": "2024-11-05T11:57:50.907Z",
+ "lastModified": "2024-11-05T11:57:50.907Z",
"size": 2745,
"formattedSize": "2.7 KB"
}
},
{
"id": "components\\checkboxes\\codex",
- "contents": "\nimport { IcCheckboxGroup, IcCheckbox, IcTextField } from \"@ukic/react\";\n\n## Component demo\n\nexport const snippetsDefault = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-checkbox-group label=\"Select your extras\" name=\"default\">\n <ic-checkbox value=\"extra\" label=\"Extra shot (50p)\"></ic-checkbox>\n <ic-checkbox value=\"Soya milk\" label=\"Soya milk\" checked ></ic-checkbox>\n <ic-checkbox value=\"keep cup\" label=\"Takeaway cup\" disabled=\"true\" ></ic-checkbox>\n</ic-checkbox-group>`,\n long: `{shortCode}\n<script>\n const checkboxGroup = document.querySelector('ic-checkbox-group');\n checkboxGroup.addEventListener('icChange', (ev) => console.log('icChange', ev.detail.value));\n const checkboxes = document.querySelector('ic-checkbox');\n checkboxes.forEach((checkbox) => {\n checkbox.addEventListener('icCheck', (ev) => {\n console.log('icCheck', ev);\n })\n })\n</script>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcCheckboxGroup label=\"Select your extras\" name=\"default\" onIcChange={(ev) => console.log(\"onIcChange\", ev.detail.value)}>\n <IcCheckbox value=\"extra\" label=\"Extra shot (50p)\" onIcCheck={(ev) => console.log(\"onIcCheck\", ev)} />\n <IcCheckbox value=\"Soya milk\" label=\"Soya milk\" checked />\n <IcCheckbox value=\"keep cup\" label=\"Takeaway cup\" disabled />\n</IcCheckboxGroup>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `{shortCode}`,\n },\n {\n language: \"Javascript\",\n snippet: `{shortCode}`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={snippetsDefault} style={{ marginTop: \"1.5rem\" }}>\n <IcCheckboxGroup\n label=\"Select your extras\"\n name=\"default\"\n onIcChange={(ev) => console.log(\"onIcChange\", ev.detail.value)}\n >\n <IcCheckbox\n value=\"extra\"\n label=\"Extra shot (50p)\"\n onIcCheck={(ev) => console.log(\"onIcCheck\", ev)}\n />\n <IcCheckbox value=\"Soya milk\" label=\"Soya milk\" checked />\n <IcCheckbox value=\"keep cup\" label=\"Takeaway cup\" disabled />\n </IcCheckboxGroup>\n</ComponentPreview>\n\n## Checkbox group details\n\n<ComponentDetails component=\"ic-checkbox-group\" />\n\n## Checkbox details\n\n<ComponentDetails component=\"ic-checkbox\" />\n\n## Variants\n\n### Hidden label\n\nexport const snippetsHiddenLabel = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-checkbox-group label=\"Select your extras\" hide-label=\"true\" name=\"1\">\n <ic-checkbox value=\"valueName1\" label=\"Extra shot (50p)\"></ic-checkbox>\n <ic-checkbox value=\"valueName2\" label=\"Soya milk\" checked=\"true\"></ic-checkbox>\n</ic-checkbox-group>`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcCheckboxGroup label=\"Select your extras\" hideLabel name=\"1\">\n <IcCheckbox value=\"valueName1\" label=\"Extra shot (50p)\" />\n <IcCheckbox value=\"valueName2\" label=\"Soya milk\" checked />\n</IcCheckboxGroup>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `{shortCode}`,\n },\n {\n language: \"Javascript\",\n snippet: `{shortCode}`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview\n snippets={snippetsHiddenLabel}\n style={{ marginTop: \"1.5rem\" }}\n>\n <IcCheckboxGroup label=\"Select your extras\" hideLabel name=\"1\">\n <IcCheckbox value=\"valueName1\" label=\"Extra shot (50p)\" />\n <IcCheckbox value=\"valueName2\" label=\"Soya milk\" checked />\n </IcCheckboxGroup>\n</ComponentPreview>\n\n### Helper text\n\nexport const snippetsHelperText = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-checkbox-group label=\"Select your extras\" name=\"1\" helper-text=\"Additional charges may apply.\">\n <ic-checkbox value=\"valueName1\" label=\"Extra shot (50p)\"></ic-checkbox>\n <ic-checkbox value=\"valueName2\" label=\"Soya milk\" checked=\"true\"></ic-checkbox>\n</ic-checkbox-group>`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcCheckboxGroup label=\"Select your extras\" name=\"1\" helperText=\"Additional charges may apply.\">\n <IcCheckbox value=\"valueName1\" label=\"Extra shot (50p)\" />\n <IcCheckbox value=\"valueName2\" label=\"Soya milk\" checked />\n</IcCheckboxGroup>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `{shortCode}`,\n },\n {\n language: \"Javascript\",\n snippet: `{shortCode}`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={snippetsHelperText} style={{ marginTop: \"1.5rem\" }}>\n <IcCheckboxGroup\n label=\"Select your extras\"\n name=\"1\"\n helperText=\"Additional charges may apply.\"\n >\n <IcCheckbox value=\"valueName1\" label=\"Extra shot (50p)\" />\n <IcCheckbox value=\"valueName2\" label=\"Soya milk\" checked />\n </IcCheckboxGroup>\n</ComponentPreview>\n\n### Sizes\n\nexport const snippetsSizes = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-checkbox-group label=\"Select your extras\" name=\"1\" size=\"small\">\n <ic-checkbox value=\"valueName1\" label=\"Extra shot (50p)\"></ic-checkbox>\n <ic-checkbox value=\"valueName2\" label=\"Soya milk\" checked=\"true\"></ic-checkbox>\n</ic-checkbox-group>\n<ic-checkbox-group label=\"Select your extras\" name=\"2\">\n <ic-checkbox value=\"valueName1\" label=\"Extra shot (50p)\"></ic-checkbox>\n <ic-checkbox value=\"valueName2\" label=\"Soya milk\" checked=\"true\"></ic-checkbox>\n</ic-checkbox-group>\n<ic-checkbox-group label=\"Select your extras\" name=\"3\" size=\"large\">\n <ic-checkbox value=\"valueName1\" label=\"Extra shot (50p)\"></ic-checkbox>\n <ic-checkbox value=\"valueName2\" label=\"Soya milk\" checked=\"true\"></ic-checkbox>\n</ic-checkbox-group>`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcCheckboxGroup label=\"Select your extras\" name=\"1\" size=\"small\">\n <IcCheckbox value=\"valueName1\" label=\"Extra shot (50p)\" />\n <IcCheckbox value=\"valueName2\" label=\"Soya milk\" checked />\n</IcCheckboxGroup>\n<IcCheckboxGroup label=\"Select your extras\" name=\"2\">\n <IcCheckbox value=\"valueName1\" label=\"Extra shot (50p)\" />\n <IcCheckbox value=\"valueName2\" label=\"Soya milk\" checked />\n</IcCheckboxGroup>\n<IcCheckboxGroup label=\"Select your extras\" name=\"3\" size=\"large\">\n <IcCheckbox value=\"valueName1\" label=\"Extra shot (50p)\" />\n <IcCheckbox value=\"valueName2\" label=\"Soya milk\" checked />\n</IcCheckboxGroup>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `<>\n {shortCode}\n</>`,\n },\n {\n language: \"Javascript\",\n snippet: `<>\n {shortCode}\n</>`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={snippetsSizes} style={{ gap: \"1.5rem\" }}>\n <IcCheckboxGroup label=\"Select your extras\" name=\"1\" size=\"small\">\n <IcCheckbox value=\"valueName1\" label=\"Extra shot (50p)\" />\n <IcCheckbox value=\"valueName2\" label=\"Soya milk\" checked />\n </IcCheckboxGroup>\n <IcCheckboxGroup label=\"Select your extras\" name=\"2\">\n <IcCheckbox value=\"valueName1\" label=\"Extra shot (50p)\" />\n <IcCheckbox value=\"valueName2\" label=\"Soya milk\" checked />\n </IcCheckboxGroup>\n <IcCheckboxGroup label=\"Select your extras\" name=\"3\" size=\"large\">\n <IcCheckbox value=\"valueName1\" label=\"Extra shot (50p)\" />\n <IcCheckbox value=\"valueName2\" label=\"Soya milk\" checked />\n </IcCheckboxGroup>\n</ComponentPreview>\n\n### Setting each checkbox size\n\nexport const snippetsSettingEachCheckboxSize = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-checkbox value=\"valueName1\" label=\"Extra shot (50p)\" size=\"small\" />\n<ic-checkbox value=\"valueName2\" label=\"Extra shot (50p)\" />\n<ic-checkbox value=\"valueName3\" label=\"Extra shot (50p)\" size=\"large\" />`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcCheckbox value=\"valueName1\" label=\"Extra shot (50p)\" size=\"small\" />\n<IcCheckbox value=\"valueName2\" label=\"Extra shot (50p)\" />\n<IcCheckbox value=\"valueName3\" label=\"Extra shot (50p)\" size=\"large\" />`,\n long: [\n {\n language: \"Typescript\",\n snippet: `<>\n {shortCode}\n</>`,\n },\n {\n language: \"Javascript\",\n snippet: `<>\n {shortCode}\n</>`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview\n snippets={snippetsSettingEachCheckboxSize}\n style={{\n gap: \"1.5rem\",\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n }}\n>\n <IcCheckbox value=\"valueName1\" label=\"Extra shot (50p)\" size=\"small\" />\n <IcCheckbox value=\"valueName2\" label=\"Extra shot (50p)\" />\n <IcCheckbox value=\"valueName3\" label=\"Extra shot (50p)\" size=\"large\" />\n</ComponentPreview>\n\n### Conditional\n\nexport const snippetsConditional = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-checkbox-group label=\"Which coffee do you like best?\" name=\"conditional\">\n <ic-checkbox value=\"americano\" label=\"Americano\"></ic-checkbox>\n <ic-checkbox value=\"espresso\" label=\"Espresso\"></ic-checkbox>\n <ic-checkbox value=\"flatwhite\" label=\"Flat white\"></ic-checkbox>\n <ic-checkbox value=\"latte\" label=\"Latte\"></ic-checkbox>\n <ic-checkbox value=\"cappuccino\" label=\"Cappuccino\"></ic-checkbox>\n <ic-checkbox value=\"other\" label=\"Other\">\n <ic-text-field\n slot=\"additional-field\"\n label=\"Please let us know...\"\n ></ic-text-field>\n </ic-checkbox>\n</ic-checkbox-group>`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcCheckboxGroup label=\"Which coffee do you like best?\" name=\"conditional\">\n <IcCheckbox value=\"americano\" label=\"Americano\" />\n <IcCheckbox value=\"espresso\" label=\"Espresso\" />\n <IcCheckbox value=\"flatwhite\" label=\"Flat white\" />\n <IcCheckbox value=\"latte\" label=\"Latte\" />\n <IcCheckbox value=\"cappuccino\" label=\"Cappuccino\" />\n <IcCheckbox value=\"other\" label=\"Other\">\n <IcTextField\n slot=\"additional-field\"\n label=\"Please let us know...\"\n />\n </IcCheckbox>\n</IcCheckboxGroup>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `{shortCode}`,\n },\n {\n language: \"Javascript\",\n snippet: `{shortCode}`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview\n snippets={snippetsConditional}\n style={{ marginTop: \"1.5rem\" }}\n>\n <IcCheckboxGroup label=\"Which coffee do you like best?\" name=\"conditional\">\n <IcCheckbox value=\"americano\" label=\"Americano\" />\n <IcCheckbox value=\"espresso\" label=\"Espresso\" />\n <IcCheckbox value=\"flatwhite\" label=\"Flat white\" />\n <IcCheckbox value=\"latte\" label=\"Latte\" />\n <IcCheckbox value=\"cappuccino\" label=\"Cappuccino\" />\n <IcCheckbox value=\"other\" label=\"Other\">\n <IcTextField slot=\"additional-field\" label=\"Please let us know...\" />\n </IcCheckbox>\n </IcCheckboxGroup>\n</ComponentPreview>\n\n### Conditional dynamic\n\nexport const snippetsConditionalDynamic = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-checkbox-group label=\"Which coffee do you like best?\" name=\"dynamic\">\n <ic-checkbox value=\"americano\" label=\"Americano\"></ic-checkbox>\n <ic-checkbox value=\"espresso\" label=\"Espresso\"></ic-checkbox>\n <ic-checkbox value=\"flatwhite\" label=\"Flat white\"></ic-checkbox>\n <ic-checkbox value=\"latte\" label=\"Latte\"></ic-checkbox>\n <ic-checkbox value=\"cappuccino\" label=\"Cappuccino\"></ic-checkbox>\n <ic-checkbox additional-field-display=\"dynamic\" value=\"other\" label=\"Other\">\n <ic-text-field\n slot=\"additional-field\"\n label=\"Please let us know...\"\n ></ic-text-field>\n </ic-checkbox>\n</ic-checkbox-group>`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcCheckboxGroup label=\"Which coffee do you like best?\" name=\"dynamic\">\n <IcCheckbox value=\"americano\" label=\"Americano\" />\n <IcCheckbox value=\"espresso\" label=\"Espresso\" />\n <IcCheckbox value=\"flatwhite\" label=\"Flat white\" />\n <IcCheckbox value=\"latte\" label=\"Latte\" />\n <IcCheckbox value=\"cappuccino\" label=\"Cappuccino\" />\n <IcCheckbox additionalFieldDisplay=\"dynamic\" value=\"other\" label=\"Other\">\n <IcTextField\n slot=\"additional-field\"\n label=\"Please let us know...\"\n />\n </IcCheckbox>\n</IcCheckboxGroup>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `{shortCode}`,\n },\n {\n language: \"Javascript\",\n snippet: `{shortCode}`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview\n snippets={snippetsConditionalDynamic}\n style={{ marginRight: \"1rem\" }}\n>\n <div style={{ width: \"21.875rem\" }}>\n <IcCheckboxGroup label=\"Which coffee do you like best?\" name=\"dynamic\">\n <IcCheckbox value=\"americano\" label=\"Americano\" />\n <IcCheckbox value=\"espresso\" label=\"Espresso\" />\n <IcCheckbox value=\"flatwhite\" label=\"Flat white\" />\n <IcCheckbox value=\"latte\" label=\"Latte\" />\n <IcCheckbox value=\"cappuccino\" label=\"Cappuccino\" />\n <IcCheckbox additionalFieldDisplay=\"dynamic\" value=\"other\" label=\"Other\">\n <IcTextField slot=\"additional-field\" label=\"Please let us know...\" />\n </IcCheckbox>\n </IcCheckboxGroup>\n </div>\n</ComponentPreview>\n\n### Validation\n\nexport const snippetsValidation = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-checkbox-group label=\"Select your extras\" name=\"1\" validation-status=\"error\" validation-text=\"Sorry, this is currently unavailable.\">\n <ic-checkbox value=\"valueName1\" label=\"Extra shot (50p)\"></ic-checkbox>\n <ic-checkbox value=\"valueName2\" label=\"Soya milk\" checked=\"true\"></ic-checkbox>\n</ic-checkbox-group>`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcCheckboxGroup label=\"Select your extras\" name=\"1\" validationStatus=\"error\" validationText=\"Sorry, this is currently unavailable.\">\n <IcCheckbox value=\"valueName1\" label=\"Extra shot (50p)\" />\n <IcCheckbox value=\"valueName2\" label=\"Soya milk\" checked />\n</IcCheckboxGroup>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `{shortCode}`,\n },\n {\n language: \"Javascript\",\n snippet: `{shortCode}`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={snippetsValidation} style={{ marginTop: \"1.5rem\" }}>\n <IcCheckboxGroup\n label=\"Select your extras\"\n name=\"1\"\n validationStatus=\"error\"\n validationText=\"Sorry, this is currently unavailable.\"\n >\n <IcCheckbox value=\"valueName1\" label=\"Extra shot (50p)\" />\n <IcCheckbox value=\"valueName2\" label=\"Soya milk\" checked />\n </IcCheckboxGroup>\n</ComponentPreview>\n\n### Indeterminate\n\nexport const snippetsIndeterminate = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-checkbox-group label=\"Select your preferred drinks\" name=\"1\">\n <ic-checkbox value=\"drinks\" label=\"Drinks\" checked=\"true\" indeterminate=\"true\">\n <ic-checkbox-group label=\"Coffee\" hide-label=\"true\" slot=\"additional-field\" name=\"2\">\n <ic-checkbox value=\"tea\" label=\"Tea\"></ic-checkbox>\n <ic-checkbox value=\"coffee\" label=\"Coffee\" checked=\"true\" indeterminate=\"true\">\n <ic-checkbox-group label=\"Coffees\" hide-label=\"true\" slot=\"additional-field\" name=\"3\">\n <ic-checkbox value=\"mocha\" label=\"Mocha\"></ic-checkbox>\n <ic-checkbox value=\"espresso\" label=\"Espresso\" checked=\"true\"></ic-checkbox>\n <ic-checkbox value=\"cappuccino\" label=\"Cappuccino\"></ic-checkbox>\n </ic-checkbox-group>\n </ic-checkbox>\n <ic-checkbox value=\"juice\" label=\"Juice\"></ic-checkbox>\n </ic-checkbox-group>\n </ic-checkbox>\n</ic-checkbox-group>`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcCheckboxGroup label=\"Select your preferred drinks\" name=\"1\">\n <IcCheckbox value=\"drinks\" label=\"Drinks\" checked indeterminate>\n <IcCheckboxGroup name=\"2\" label=\"Coffee\" hideLabel slot=\"additional-field\">\n <IcCheckbox value=\"tea\" label=\"Tea\" />\n <IcCheckbox value=\"coffee\" label=\"Coffee\" checked indeterminate>\n <IcCheckboxGroup label=\"Coffees\" hideLabel slot=\"additional-field\" name=\"3\">\n <IcCheckbox value=\"mocha\" label=\"Mocha\" />\n <IcCheckbox value=\"espresso\" label=\"Espresso\" checked />\n <IcCheckbox value=\"cappuccino\" label=\"Cappuccino\" />\n </IcCheckboxGroup>\n </IcCheckbox>\n <IcCheckbox value=\"juice\" label=\"Juice\" />\n </IcCheckboxGroup>\n </IcCheckbox>\n</IcCheckboxGroup>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `{shortCode}`,\n },\n {\n language: \"Javascript\",\n snippet: `{shortCode}`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview\n snippets={snippetsIndeterminate}\n style={{ marginTop: \"1.5rem\" }}\n>\n <IcCheckboxGroup label=\"Select your preferred drinks\" name=\"1\">\n <IcCheckbox value=\"drinks\" label=\"Drinks\" checked indeterminate>\n <IcCheckboxGroup\n name=\"2\"\n label=\"Coffee\"\n hideLabel\n slot=\"additional-field\"\n >\n <IcCheckbox value=\"tea\" label=\"Tea\" />\n <IcCheckbox value=\"coffee\" label=\"Coffee\" checked indeterminate>\n <IcCheckboxGroup\n label=\"Coffees\"\n hideLabel\n slot=\"additional-field\"\n name=\"3\"\n >\n <IcCheckbox value=\"mocha\" label=\"Mocha\" />\n <IcCheckbox value=\"espresso\" label=\"Espresso\" checked />\n <IcCheckbox value=\"cappuccino\" label=\"Cappuccino\" />\n </IcCheckboxGroup>\n </IcCheckbox>\n <IcCheckbox value=\"juice\" label=\"Juice\" />\n </IcCheckboxGroup>\n </IcCheckbox>\n </IcCheckboxGroup>\n</ComponentPreview>\n",
+ "contents": "\r\nimport { IcCheckboxGroup, IcCheckbox, IcTextField } from \"@ukic/react\";\r\n\r\n## Component demo\r\n\r\nexport const snippetsDefault = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-checkbox-group label=\"Select your extras\" name=\"default\">\r\n <ic-checkbox value=\"extra\" label=\"Extra shot (50p)\"></ic-checkbox>\r\n <ic-checkbox value=\"Soya milk\" label=\"Soya milk\" checked ></ic-checkbox>\r\n <ic-checkbox value=\"keep cup\" label=\"Takeaway cup\" disabled=\"true\" ></ic-checkbox>\r\n</ic-checkbox-group>`,\r\n long: `{shortCode}\r\n<script>\r\n const checkboxGroup = document.querySelector('ic-checkbox-group');\r\n checkboxGroup.addEventListener('icChange', (ev) => console.log('icChange', ev.detail.value));\r\n const checkboxes = document.querySelector('ic-checkbox');\r\n checkboxes.forEach((checkbox) => {\r\n checkbox.addEventListener('icCheck', (ev) => {\r\n console.log('icCheck', ev);\r\n })\r\n })\r\n</script>`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcCheckboxGroup label=\"Select your extras\" name=\"default\" onIcChange={(ev) => console.log(\"onIcChange\", ev.detail.value)}>\r\n <IcCheckbox value=\"extra\" label=\"Extra shot (50p)\" onIcCheck={(ev) => console.log(\"onIcCheck\", ev)} />\r\n <IcCheckbox value=\"Soya milk\" label=\"Soya milk\" checked />\r\n <IcCheckbox value=\"keep cup\" label=\"Takeaway cup\" disabled />\r\n</IcCheckboxGroup>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `{shortCode}`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `{shortCode}`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview snippets={snippetsDefault} style={{ marginTop: \"1.5rem\" }}>\r\n <IcCheckboxGroup\r\n label=\"Select your extras\"\r\n name=\"default\"\r\n onIcChange={(ev) => console.log(\"onIcChange\", ev.detail.value)}\r\n >\r\n <IcCheckbox\r\n value=\"extra\"\r\n label=\"Extra shot (50p)\"\r\n onIcCheck={(ev) => console.log(\"onIcCheck\", ev)}\r\n />\r\n <IcCheckbox value=\"Soya milk\" label=\"Soya milk\" checked />\r\n <IcCheckbox value=\"keep cup\" label=\"Takeaway cup\" disabled />\r\n </IcCheckboxGroup>\r\n</ComponentPreview>\r\n\r\n## Checkbox group details\r\n\r\n<ComponentDetails component=\"ic-checkbox-group\" />\r\n\r\n## Checkbox details\r\n\r\n<ComponentDetails component=\"ic-checkbox\" />\r\n\r\n## Variants\r\n\r\n### Hidden label\r\n\r\nexport const snippetsHiddenLabel = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-checkbox-group label=\"Select your extras\" hide-label=\"true\" name=\"1\">\r\n <ic-checkbox value=\"valueName1\" label=\"Extra shot (50p)\"></ic-checkbox>\r\n <ic-checkbox value=\"valueName2\" label=\"Soya milk\" checked=\"true\"></ic-checkbox>\r\n</ic-checkbox-group>`,\r\n long: `{shortCode}`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcCheckboxGroup label=\"Select your extras\" hideLabel name=\"1\">\r\n <IcCheckbox value=\"valueName1\" label=\"Extra shot (50p)\" />\r\n <IcCheckbox value=\"valueName2\" label=\"Soya milk\" checked />\r\n</IcCheckboxGroup>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `{shortCode}`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `{shortCode}`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview\r\n snippets={snippetsHiddenLabel}\r\n style={{ marginTop: \"1.5rem\" }}\r\n>\r\n <IcCheckboxGroup label=\"Select your extras\" hideLabel name=\"1\">\r\n <IcCheckbox value=\"valueName1\" label=\"Extra shot (50p)\" />\r\n <IcCheckbox value=\"valueName2\" label=\"Soya milk\" checked />\r\n </IcCheckboxGroup>\r\n</ComponentPreview>\r\n\r\n### Helper text\r\n\r\nexport const snippetsHelperText = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-checkbox-group label=\"Select your extras\" name=\"1\" helper-text=\"Additional charges may apply.\">\r\n <ic-checkbox value=\"valueName1\" label=\"Extra shot (50p)\"></ic-checkbox>\r\n <ic-checkbox value=\"valueName2\" label=\"Soya milk\" checked=\"true\"></ic-checkbox>\r\n</ic-checkbox-group>`,\r\n long: `{shortCode}`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcCheckboxGroup label=\"Select your extras\" name=\"1\" helperText=\"Additional charges may apply.\">\r\n <IcCheckbox value=\"valueName1\" label=\"Extra shot (50p)\" />\r\n <IcCheckbox value=\"valueName2\" label=\"Soya milk\" checked />\r\n</IcCheckboxGroup>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `{shortCode}`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `{shortCode}`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview snippets={snippetsHelperText} style={{ marginTop: \"1.5rem\" }}>\r\n <IcCheckboxGroup\r\n label=\"Select your extras\"\r\n name=\"1\"\r\n helperText=\"Additional charges may apply.\"\r\n >\r\n <IcCheckbox value=\"valueName1\" label=\"Extra shot (50p)\" />\r\n <IcCheckbox value=\"valueName2\" label=\"Soya milk\" checked />\r\n </IcCheckboxGroup>\r\n</ComponentPreview>\r\n\r\n### Sizes\r\n\r\nexport const snippetsSizes = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-checkbox-group label=\"Select your extras\" name=\"1\" size=\"small\">\r\n <ic-checkbox value=\"valueName1\" label=\"Extra shot (50p)\"></ic-checkbox>\r\n <ic-checkbox value=\"valueName2\" label=\"Soya milk\" checked=\"true\"></ic-checkbox>\r\n</ic-checkbox-group>\r\n<ic-checkbox-group label=\"Select your extras\" name=\"2\">\r\n <ic-checkbox value=\"valueName1\" label=\"Extra shot (50p)\"></ic-checkbox>\r\n <ic-checkbox value=\"valueName2\" label=\"Soya milk\" checked=\"true\"></ic-checkbox>\r\n</ic-checkbox-group>\r\n<ic-checkbox-group label=\"Select your extras\" name=\"3\" size=\"large\">\r\n <ic-checkbox value=\"valueName1\" label=\"Extra shot (50p)\"></ic-checkbox>\r\n <ic-checkbox value=\"valueName2\" label=\"Soya milk\" checked=\"true\"></ic-checkbox>\r\n</ic-checkbox-group>`,\r\n long: `{shortCode}`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcCheckboxGroup label=\"Select your extras\" name=\"1\" size=\"small\">\r\n <IcCheckbox value=\"valueName1\" label=\"Extra shot (50p)\" />\r\n <IcCheckbox value=\"valueName2\" label=\"Soya milk\" checked />\r\n</IcCheckboxGroup>\r\n<IcCheckboxGroup label=\"Select your extras\" name=\"2\">\r\n <IcCheckbox value=\"valueName1\" label=\"Extra shot (50p)\" />\r\n <IcCheckbox value=\"valueName2\" label=\"Soya milk\" checked />\r\n</IcCheckboxGroup>\r\n<IcCheckboxGroup label=\"Select your extras\" name=\"3\" size=\"large\">\r\n <IcCheckbox value=\"valueName1\" label=\"Extra shot (50p)\" />\r\n <IcCheckbox value=\"valueName2\" label=\"Soya milk\" checked />\r\n</IcCheckboxGroup>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `<>\r\n {shortCode}\r\n</>`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `<>\r\n {shortCode}\r\n</>`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview snippets={snippetsSizes} style={{ gap: \"1.5rem\" }}>\r\n <IcCheckboxGroup label=\"Select your extras\" name=\"1\" size=\"small\">\r\n <IcCheckbox value=\"valueName1\" label=\"Extra shot (50p)\" />\r\n <IcCheckbox value=\"valueName2\" label=\"Soya milk\" checked />\r\n </IcCheckboxGroup>\r\n <IcCheckboxGroup label=\"Select your extras\" name=\"2\">\r\n <IcCheckbox value=\"valueName1\" label=\"Extra shot (50p)\" />\r\n <IcCheckbox value=\"valueName2\" label=\"Soya milk\" checked />\r\n </IcCheckboxGroup>\r\n <IcCheckboxGroup label=\"Select your extras\" name=\"3\" size=\"large\">\r\n <IcCheckbox value=\"valueName1\" label=\"Extra shot (50p)\" />\r\n <IcCheckbox value=\"valueName2\" label=\"Soya milk\" checked />\r\n </IcCheckboxGroup>\r\n</ComponentPreview>\r\n\r\n### Setting each checkbox size\r\n\r\nexport const snippetsSettingEachCheckboxSize = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-checkbox value=\"valueName1\" label=\"Extra shot (50p)\" size=\"small\" />\r\n<ic-checkbox value=\"valueName2\" label=\"Extra shot (50p)\" />\r\n<ic-checkbox value=\"valueName3\" label=\"Extra shot (50p)\" size=\"large\" />`,\r\n long: `{shortCode}`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcCheckbox value=\"valueName1\" label=\"Extra shot (50p)\" size=\"small\" />\r\n<IcCheckbox value=\"valueName2\" label=\"Extra shot (50p)\" />\r\n<IcCheckbox value=\"valueName3\" label=\"Extra shot (50p)\" size=\"large\" />`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `<>\r\n {shortCode}\r\n</>`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `<>\r\n {shortCode}\r\n</>`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview\r\n snippets={snippetsSettingEachCheckboxSize}\r\n style={{\r\n gap: \"1.5rem\",\r\n display: \"flex\",\r\n justifyContent: \"center\",\r\n alignItems: \"center\",\r\n }}\r\n>\r\n <IcCheckbox value=\"valueName1\" label=\"Extra shot (50p)\" size=\"small\" />\r\n <IcCheckbox value=\"valueName2\" label=\"Extra shot (50p)\" />\r\n <IcCheckbox value=\"valueName3\" label=\"Extra shot (50p)\" size=\"large\" />\r\n</ComponentPreview>\r\n\r\n### Conditional\r\n\r\nexport const snippetsConditional = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-checkbox-group label=\"Which coffee do you like best?\" name=\"conditional\">\r\n <ic-checkbox value=\"americano\" label=\"Americano\"></ic-checkbox>\r\n <ic-checkbox value=\"espresso\" label=\"Espresso\"></ic-checkbox>\r\n <ic-checkbox value=\"flatwhite\" label=\"Flat white\"></ic-checkbox>\r\n <ic-checkbox value=\"latte\" label=\"Latte\"></ic-checkbox>\r\n <ic-checkbox value=\"cappuccino\" label=\"Cappuccino\"></ic-checkbox>\r\n <ic-checkbox value=\"other\" label=\"Other\">\r\n <ic-text-field\r\n slot=\"additional-field\"\r\n label=\"Please let us know...\"\r\n ></ic-text-field>\r\n </ic-checkbox>\r\n</ic-checkbox-group>`,\r\n long: `{shortCode}`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcCheckboxGroup label=\"Which coffee do you like best?\" name=\"conditional\">\r\n <IcCheckbox value=\"americano\" label=\"Americano\" />\r\n <IcCheckbox value=\"espresso\" label=\"Espresso\" />\r\n <IcCheckbox value=\"flatwhite\" label=\"Flat white\" />\r\n <IcCheckbox value=\"latte\" label=\"Latte\" />\r\n <IcCheckbox value=\"cappuccino\" label=\"Cappuccino\" />\r\n <IcCheckbox value=\"other\" label=\"Other\">\r\n <IcTextField\r\n slot=\"additional-field\"\r\n label=\"Please let us know...\"\r\n />\r\n </IcCheckbox>\r\n</IcCheckboxGroup>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `{shortCode}`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `{shortCode}`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview\r\n snippets={snippetsConditional}\r\n style={{ marginTop: \"1.5rem\" }}\r\n>\r\n <IcCheckboxGroup label=\"Which coffee do you like best?\" name=\"conditional\">\r\n <IcCheckbox value=\"americano\" label=\"Americano\" />\r\n <IcCheckbox value=\"espresso\" label=\"Espresso\" />\r\n <IcCheckbox value=\"flatwhite\" label=\"Flat white\" />\r\n <IcCheckbox value=\"latte\" label=\"Latte\" />\r\n <IcCheckbox value=\"cappuccino\" label=\"Cappuccino\" />\r\n <IcCheckbox value=\"other\" label=\"Other\">\r\n <IcTextField slot=\"additional-field\" label=\"Please let us know...\" />\r\n </IcCheckbox>\r\n </IcCheckboxGroup>\r\n</ComponentPreview>\r\n\r\n### Conditional dynamic\r\n\r\nexport const snippetsConditionalDynamic = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-checkbox-group label=\"Which coffee do you like best?\" name=\"dynamic\">\r\n <ic-checkbox value=\"americano\" label=\"Americano\"></ic-checkbox>\r\n <ic-checkbox value=\"espresso\" label=\"Espresso\"></ic-checkbox>\r\n <ic-checkbox value=\"flatwhite\" label=\"Flat white\"></ic-checkbox>\r\n <ic-checkbox value=\"latte\" label=\"Latte\"></ic-checkbox>\r\n <ic-checkbox value=\"cappuccino\" label=\"Cappuccino\"></ic-checkbox>\r\n <ic-checkbox additional-field-display=\"dynamic\" value=\"other\" label=\"Other\">\r\n <ic-text-field\r\n slot=\"additional-field\"\r\n label=\"Please let us know...\"\r\n ></ic-text-field>\r\n </ic-checkbox>\r\n</ic-checkbox-group>`,\r\n long: `{shortCode}`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcCheckboxGroup label=\"Which coffee do you like best?\" name=\"dynamic\">\r\n <IcCheckbox value=\"americano\" label=\"Americano\" />\r\n <IcCheckbox value=\"espresso\" label=\"Espresso\" />\r\n <IcCheckbox value=\"flatwhite\" label=\"Flat white\" />\r\n <IcCheckbox value=\"latte\" label=\"Latte\" />\r\n <IcCheckbox value=\"cappuccino\" label=\"Cappuccino\" />\r\n <IcCheckbox additionalFieldDisplay=\"dynamic\" value=\"other\" label=\"Other\">\r\n <IcTextField\r\n slot=\"additional-field\"\r\n label=\"Please let us know...\"\r\n />\r\n </IcCheckbox>\r\n</IcCheckboxGroup>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `{shortCode}`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `{shortCode}`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview\r\n snippets={snippetsConditionalDynamic}\r\n style={{ marginRight: \"1rem\" }}\r\n>\r\n <div style={{ width: \"21.875rem\" }}>\r\n <IcCheckboxGroup label=\"Which coffee do you like best?\" name=\"dynamic\">\r\n <IcCheckbox value=\"americano\" label=\"Americano\" />\r\n <IcCheckbox value=\"espresso\" label=\"Espresso\" />\r\n <IcCheckbox value=\"flatwhite\" label=\"Flat white\" />\r\n <IcCheckbox value=\"latte\" label=\"Latte\" />\r\n <IcCheckbox value=\"cappuccino\" label=\"Cappuccino\" />\r\n <IcCheckbox additionalFieldDisplay=\"dynamic\" value=\"other\" label=\"Other\">\r\n <IcTextField slot=\"additional-field\" label=\"Please let us know...\" />\r\n </IcCheckbox>\r\n </IcCheckboxGroup>\r\n </div>\r\n</ComponentPreview>\r\n\r\n### Validation\r\n\r\nexport const snippetsValidation = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-checkbox-group label=\"Select your extras\" name=\"1\" validation-status=\"error\" validation-text=\"Sorry, this is currently unavailable.\">\r\n <ic-checkbox value=\"valueName1\" label=\"Extra shot (50p)\"></ic-checkbox>\r\n <ic-checkbox value=\"valueName2\" label=\"Soya milk\" checked=\"true\"></ic-checkbox>\r\n</ic-checkbox-group>`,\r\n long: `{shortCode}`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcCheckboxGroup label=\"Select your extras\" name=\"1\" validationStatus=\"error\" validationText=\"Sorry, this is currently unavailable.\">\r\n <IcCheckbox value=\"valueName1\" label=\"Extra shot (50p)\" />\r\n <IcCheckbox value=\"valueName2\" label=\"Soya milk\" checked />\r\n</IcCheckboxGroup>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `{shortCode}`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `{shortCode}`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview snippets={snippetsValidation} style={{ marginTop: \"1.5rem\" }}>\r\n <IcCheckboxGroup\r\n label=\"Select your extras\"\r\n name=\"1\"\r\n validationStatus=\"error\"\r\n validationText=\"Sorry, this is currently unavailable.\"\r\n >\r\n <IcCheckbox value=\"valueName1\" label=\"Extra shot (50p)\" />\r\n <IcCheckbox value=\"valueName2\" label=\"Soya milk\" checked />\r\n </IcCheckboxGroup>\r\n</ComponentPreview>\r\n\r\n### Indeterminate\r\n\r\nexport const snippetsIndeterminate = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-checkbox-group label=\"Select your preferred drinks\" name=\"1\">\r\n <ic-checkbox value=\"drinks\" label=\"Drinks\" checked=\"true\" indeterminate=\"true\">\r\n <ic-checkbox-group label=\"Coffee\" hide-label=\"true\" slot=\"additional-field\" name=\"2\">\r\n <ic-checkbox value=\"tea\" label=\"Tea\"></ic-checkbox>\r\n <ic-checkbox value=\"coffee\" label=\"Coffee\" checked=\"true\" indeterminate=\"true\">\r\n <ic-checkbox-group label=\"Coffees\" hide-label=\"true\" slot=\"additional-field\" name=\"3\">\r\n <ic-checkbox value=\"mocha\" label=\"Mocha\"></ic-checkbox>\r\n <ic-checkbox value=\"espresso\" label=\"Espresso\" checked=\"true\"></ic-checkbox>\r\n <ic-checkbox value=\"cappuccino\" label=\"Cappuccino\"></ic-checkbox>\r\n </ic-checkbox-group>\r\n </ic-checkbox>\r\n <ic-checkbox value=\"juice\" label=\"Juice\"></ic-checkbox>\r\n </ic-checkbox-group>\r\n </ic-checkbox>\r\n</ic-checkbox-group>`,\r\n long: `{shortCode}`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcCheckboxGroup label=\"Select your preferred drinks\" name=\"1\">\r\n <IcCheckbox value=\"drinks\" label=\"Drinks\" checked indeterminate>\r\n <IcCheckboxGroup name=\"2\" label=\"Coffee\" hideLabel slot=\"additional-field\">\r\n <IcCheckbox value=\"tea\" label=\"Tea\" />\r\n <IcCheckbox value=\"coffee\" label=\"Coffee\" checked indeterminate>\r\n <IcCheckboxGroup label=\"Coffees\" hideLabel slot=\"additional-field\" name=\"3\">\r\n <IcCheckbox value=\"mocha\" label=\"Mocha\" />\r\n <IcCheckbox value=\"espresso\" label=\"Espresso\" checked />\r\n <IcCheckbox value=\"cappuccino\" label=\"Cappuccino\" />\r\n </IcCheckboxGroup>\r\n </IcCheckbox>\r\n <IcCheckbox value=\"juice\" label=\"Juice\" />\r\n </IcCheckboxGroup>\r\n </IcCheckbox>\r\n</IcCheckboxGroup>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `{shortCode}`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `{shortCode}`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview\r\n snippets={snippetsIndeterminate}\r\n style={{ marginTop: \"1.5rem\" }}\r\n>\r\n <IcCheckboxGroup label=\"Select your preferred drinks\" name=\"1\">\r\n <IcCheckbox value=\"drinks\" label=\"Drinks\" checked indeterminate>\r\n <IcCheckboxGroup\r\n name=\"2\"\r\n label=\"Coffee\"\r\n hideLabel\r\n slot=\"additional-field\"\r\n >\r\n <IcCheckbox value=\"tea\" label=\"Tea\" />\r\n <IcCheckbox value=\"coffee\" label=\"Coffee\" checked indeterminate>\r\n <IcCheckboxGroup\r\n label=\"Coffees\"\r\n hideLabel\r\n slot=\"additional-field\"\r\n name=\"3\"\r\n >\r\n <IcCheckbox value=\"mocha\" label=\"Mocha\" />\r\n <IcCheckbox value=\"espresso\" label=\"Espresso\" checked />\r\n <IcCheckbox value=\"cappuccino\" label=\"Cappuccino\" />\r\n </IcCheckboxGroup>\r\n </IcCheckbox>\r\n <IcCheckbox value=\"juice\" label=\"Juice\" />\r\n </IcCheckboxGroup>\r\n </IcCheckbox>\r\n </IcCheckboxGroup>\r\n</ComponentPreview>\r\n",
"path": "/components/checkbox/code",
"date": "2024-05-31",
"title": "Checkbox",
@@ -1494,11 +1494,11 @@
}
],
"meta": {
- "relativePath": "components/checkboxes/code.mdx",
- "createdAt": "2024-11-06T10:27:49.408Z",
- "lastModified": "2024-11-06T10:18:59.976Z",
- "size": 18091,
- "formattedSize": "17.7 KB"
+ "relativePath": "components\\checkboxes\\code.mdx",
+ "createdAt": "2024-12-04T13:23:54.083Z",
+ "lastModified": "2024-12-04T13:23:54.083Z",
+ "size": 18664,
+ "formattedSize": "18.2 KB"
}
},
{
@@ -1526,9 +1526,9 @@
}
],
"meta": {
- "relativePath": "components/checkboxes/guidance.mdx",
- "createdAt": "2024-11-06T10:27:49.408Z",
- "lastModified": "2024-11-06T10:18:59.980Z",
+ "relativePath": "components\\checkboxes\\guidance.mdx",
+ "createdAt": "2024-11-05T11:57:50.995Z",
+ "lastModified": "2024-11-05T11:57:50.995Z",
"size": 8556,
"formattedSize": "8.4 KB"
}
@@ -1557,16 +1557,16 @@
}
],
"meta": {
- "relativePath": "components/chips/accessibility.mdx",
- "createdAt": "2024-11-06T10:27:49.408Z",
- "lastModified": "2024-11-06T10:18:59.980Z",
+ "relativePath": "components\\chips\\accessibility.mdx",
+ "createdAt": "2024-11-05T11:57:51.015Z",
+ "lastModified": "2024-11-05T11:57:51.015Z",
"size": 2777,
"formattedSize": "2.7 KB"
}
},
{
"id": "components\\chips\\codex",
- "contents": "\nimport { IcChip } from \"@ukic/react\";\n\n## Component demo\n\nexport const snippetsDefault = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-chip label=\"Americano\" dismissible=\"true\" id='my-chip'>\n <svg\n slot=\"icon\"\n viewBox=\"0 0 24 24\"\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n aria-label=\"coffee\"\n >\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\n </svg>\n</ic-chip>\n<ic-chip label=\"Cappuccino\">\n <svg\n slot=\"icon\"\n viewBox=\"0 0 24 24\"\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n aria-label=\"coffee\"\n >\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\n </svg>\n</ic-chip>`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcChip label=\"Americano\" dismissible onIcDismiss={(ev) => console.log(ev)}>\n <SlottedSVG\n slot=\"icon\"\n viewBox=\"0 0 24 24\"\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n aria-label=\"coffee\"\n >\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\n </SlottedSVG>\n</IcChip>\n<IcChip label=\"Cappuccino\">\n <SlottedSVG\n slot=\"icon\"\n viewBox=\"0 0 24 24\"\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n aria-label=\"coffee\"\n >\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\n </SlottedSVG>\n</IcChip>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `<>\n {shortCode}\n</>`,\n },\n {\n language: \"Javascript\",\n snippet: `<>\n {shortCode}\n</>`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview\n style={{\n gap: \"0.5rem\",\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n }}\n snippets={snippetsDefault}\n>\n <IcChip label=\"Americano\" dismissible>\n <svg\n slot=\"icon\"\n viewBox=\"0 0 24 24\"\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n aria-label=\"coffee\"\n >\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n </svg>\n </IcChip>\n <IcChip label=\"Cappuccino\">\n <svg\n slot=\"icon\"\n viewBox=\"0 0 24 24\"\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n aria-label=\"coffee\"\n >\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n </svg>\n </IcChip>\n</ComponentPreview>\n\n## Chip details\n\n<ComponentDetails component=\"ic-chip\" />\n\n## Variants\n\n### Outline\n\nexport const snippetsOutline = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-chip label=\"Americano\" variant=\"outlined\">\n <svg\n slot=\"icon\"\n viewBox=\"0 0 24 24\"\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n aria-label=\"coffee\"\n >\n <path d=\"M2,21H20V19H2M20,8H18V5H20M20,3H4V13A4,4 0 0,0 8,17H14A4,4 0 0,0 18,13V10H20A2,2 0 0,0 22,8V5C22,3.89 21.1,3 20,3Z\"/>\n </svg>\n</ic-chip>`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcChip label=\"Americano\" variant=\"outlined\">\n <SlottedSVG\n slot=\"icon\"\n viewBox=\"0 0 24 24\"\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n aria-label=\"coffee\"\n >\n <path d=\"M2,21H20V19H2M20,8H18V5H20M20,3H4V13A4,4 0 0,0 8,17H14A4,4 0 0,0 18,13V10H20A2,2 0 0,0 22,8V5C22,3.89 21.1,3 20,3Z\"/>\n </SlottedSVG>\n</IcChip>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `{shortCode}`,\n },\n {\n language: \"Javascript\",\n snippet: `{shortCode}`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview\n style={{\n gap: \"0.5rem\",\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n }}\n snippets={snippetsOutline}\n>\n <IcChip label=\"Americano\" variant=\"outlined\">\n <svg\n slot=\"icon\"\n viewBox=\"0 0 24 24\"\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n aria-label=\"coffee\"\n >\n <path d=\"M2,21H20V19H2M20,8H18V5H20M20,3H4V13A4,4 0 0,0 8,17H14A4,4 0 0,0 18,13V10H20A2,2 0 0,0 22,8V5C22,3.89 21.1,3 20,3Z\" />\n </svg>\n </IcChip>\n</ComponentPreview>\n\n### Dismissible\n\nexport const snippetsDismissible = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-chip label=\"Americano\" dismissible=\"true\" id='my-chip'>\n <svg\n slot=\"icon\"\n viewBox=\"0 0 24 24\"\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n aria-label=\"coffee\"\n >\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\n </svg>\n</ic-chip>\n<script>\n const chip = document.querySelector('#my-chip');\n chip.addEventListener('icDismiss', (ev) => console.log(ev));\n</script>`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcChip label=\"Americano\" dismissible onIcDismiss={(ev) => console.log(ev)}>\n <SlottedSVG\n slot=\"icon\"\n viewBox=\"0 0 24 24\"\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n aria-label=\"coffee\"\n >\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\n </SlottedSVG>\n</IcChip>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `{shortCode}`,\n },\n {\n language: \"Javascript\",\n snippet: `{shortCode}`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview\n style={{\n gap: \"0.5rem\",\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n }}\n snippets={snippetsDismissible}\n>\n <IcChip label=\"Americano\" dismissible onIcDismiss={(ev) => console.log(ev)}>\n <svg\n slot=\"icon\"\n viewBox=\"0 0 24 24\"\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n aria-label=\"coffee\"\n >\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n </svg>\n </IcChip>\n</ComponentPreview>\n\n### Disabled\n\nexport const snippetsDisabled = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-chip label=\"Americano\" dismissible=\"true\" disabled=\"true\">\n <svg\n slot=\"icon\"\n viewBox=\"0 0 24 24\"\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n aria-label=\"coffee\"\n >\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\n </svg>\n</ic-chip>\n<ic-chip label=\"Americano\" variant=\"outlined\" dismissible=\"true\" disabled=\"true\">\n <svg\n slot=\"icon\"\n viewBox=\"0 0 24 24\"\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n aria-label=\"coffee\"\n >\n <path d=\"M2,21H20V19H2M20,8H18V5H20M20,3H4V13A4,4 0 0,0 8,17H14A4,4 0 0,0 18,13V10H20A2,2 0 0,0 22,8V5C22,3.89 21.1,3 20,3Z\"/>\n </svg>\n</ic-chip>`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcChip label=\"Americano\" dismissible disabled>\n <SlottedSVG\n slot=\"icon\"\n viewBox=\"0 0 24 24\"\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n aria-label=\"coffee\"\n >\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\n </SlottedSVG>\n</IcChip>\n<IcChip label=\"Americano\" variant=\"outlined\" dismissible disabled>\n <SlottedSVG\n slot=\"icon\"\n viewBox=\"0 0 24 24\"\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n aria-label=\"coffee\"\n >\n <path d=\"M2,21H20V19H2M20,8H18V5H20M20,3H4V13A4,4 0 0,0 8,17H14A4,4 0 0,0 18,13V10H20A2,2 0 0,0 22,8V5C22,3.89 21.1,3 20,3Z\"/>\n </SlottedSVG>\n</IcChip>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `<>\n {shortCode}\n</>`,\n },\n {\n language: \"Javascript\",\n snippet: `<>\n {shortCode}\n</>`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview\n style={{\n gap: \"0.5rem\",\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n }}\n snippets={snippetsDisabled}\n>\n <IcChip label=\"Americano\" dismissible disabled>\n <svg\n slot=\"icon\"\n viewBox=\"0 0 24 24\"\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n aria-label=\"coffee\"\n >\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n </svg>\n </IcChip>\n <IcChip label=\"Americano\" variant=\"outlined\" dismissible disabled>\n <svg\n slot=\"icon\"\n viewBox=\"0 0 24 24\"\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n aria-label=\"coffee\"\n >\n <path d=\"M2,21H20V19H2M20,8H18V5H20M20,3H4V13A4,4 0 0,0 8,17H14A4,4 0 0,0 18,13V10H20A2,2 0 0,0 22,8V5C22,3.89 21.1,3 20,3Z\" />\n </svg>\n </IcChip>\n</ComponentPreview>\n",
+ "contents": "\r\nimport { IcChip } from \"@ukic/react\";\r\n\r\n## Component demo\r\n\r\nexport const snippetsDefault = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-chip label=\"Americano\" dismissible=\"true\" id='my-chip'>\r\n <svg\r\n slot=\"icon\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n aria-label=\"coffee\"\r\n >\r\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\r\n </svg>\r\n</ic-chip>\r\n<ic-chip label=\"Cappuccino\">\r\n <svg\r\n slot=\"icon\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n aria-label=\"coffee\"\r\n >\r\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\r\n </svg>\r\n</ic-chip>`,\r\n long: `{shortCode}`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcChip label=\"Americano\" dismissible onIcDismiss={(ev) => console.log(ev)}>\r\n <SlottedSVG\r\n slot=\"icon\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n aria-label=\"coffee\"\r\n >\r\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\r\n </SlottedSVG>\r\n</IcChip>\r\n<IcChip label=\"Cappuccino\">\r\n <SlottedSVG\r\n slot=\"icon\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n aria-label=\"coffee\"\r\n >\r\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\r\n </SlottedSVG>\r\n</IcChip>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `<>\r\n {shortCode}\r\n</>`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `<>\r\n {shortCode}\r\n</>`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview\r\n style={{\r\n gap: \"0.5rem\",\r\n display: \"flex\",\r\n justifyContent: \"center\",\r\n alignItems: \"center\",\r\n }}\r\n snippets={snippetsDefault}\r\n>\r\n <IcChip label=\"Americano\" dismissible>\r\n <svg\r\n slot=\"icon\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n aria-label=\"coffee\"\r\n >\r\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\r\n </svg>\r\n </IcChip>\r\n <IcChip label=\"Cappuccino\">\r\n <svg\r\n slot=\"icon\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n aria-label=\"coffee\"\r\n >\r\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\r\n </svg>\r\n </IcChip>\r\n</ComponentPreview>\r\n\r\n## Chip details\r\n\r\n<ComponentDetails component=\"ic-chip\" />\r\n\r\n## Variants\r\n\r\n### Outline\r\n\r\nexport const snippetsOutline = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-chip label=\"Americano\" variant=\"outlined\">\r\n <svg\r\n slot=\"icon\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n aria-label=\"coffee\"\r\n >\r\n <path d=\"M2,21H20V19H2M20,8H18V5H20M20,3H4V13A4,4 0 0,0 8,17H14A4,4 0 0,0 18,13V10H20A2,2 0 0,0 22,8V5C22,3.89 21.1,3 20,3Z\"/>\r\n </svg>\r\n</ic-chip>`,\r\n long: `{shortCode}`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcChip label=\"Americano\" variant=\"outlined\">\r\n <SlottedSVG\r\n slot=\"icon\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n aria-label=\"coffee\"\r\n >\r\n <path d=\"M2,21H20V19H2M20,8H18V5H20M20,3H4V13A4,4 0 0,0 8,17H14A4,4 0 0,0 18,13V10H20A2,2 0 0,0 22,8V5C22,3.89 21.1,3 20,3Z\"/>\r\n </SlottedSVG>\r\n</IcChip>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `{shortCode}`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `{shortCode}`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview\r\n style={{\r\n gap: \"0.5rem\",\r\n display: \"flex\",\r\n justifyContent: \"center\",\r\n alignItems: \"center\",\r\n }}\r\n snippets={snippetsOutline}\r\n>\r\n <IcChip label=\"Americano\" variant=\"outlined\">\r\n <svg\r\n slot=\"icon\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n aria-label=\"coffee\"\r\n >\r\n <path d=\"M2,21H20V19H2M20,8H18V5H20M20,3H4V13A4,4 0 0,0 8,17H14A4,4 0 0,0 18,13V10H20A2,2 0 0,0 22,8V5C22,3.89 21.1,3 20,3Z\" />\r\n </svg>\r\n </IcChip>\r\n</ComponentPreview>\r\n\r\n### Dismissible\r\n\r\nexport const snippetsDismissible = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-chip label=\"Americano\" dismissible=\"true\" id='my-chip'>\r\n <svg\r\n slot=\"icon\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n aria-label=\"coffee\"\r\n >\r\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\r\n </svg>\r\n</ic-chip>\r\n<script>\r\n const chip = document.querySelector('#my-chip');\r\n chip.addEventListener('icDismiss', (ev) => console.log(ev));\r\n</script>`,\r\n long: `{shortCode}`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcChip label=\"Americano\" dismissible onIcDismiss={(ev) => console.log(ev)}>\r\n <SlottedSVG\r\n slot=\"icon\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n aria-label=\"coffee\"\r\n >\r\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\r\n </SlottedSVG>\r\n</IcChip>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `{shortCode}`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `{shortCode}`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview\r\n style={{\r\n gap: \"0.5rem\",\r\n display: \"flex\",\r\n justifyContent: \"center\",\r\n alignItems: \"center\",\r\n }}\r\n snippets={snippetsDismissible}\r\n>\r\n <IcChip label=\"Americano\" dismissible onIcDismiss={(ev) => console.log(ev)}>\r\n <svg\r\n slot=\"icon\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n aria-label=\"coffee\"\r\n >\r\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\r\n </svg>\r\n </IcChip>\r\n</ComponentPreview>\r\n\r\n### Disabled\r\n\r\nexport const snippetsDisabled = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-chip label=\"Americano\" dismissible=\"true\" disabled=\"true\">\r\n <svg\r\n slot=\"icon\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n aria-label=\"coffee\"\r\n >\r\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\r\n </svg>\r\n</ic-chip>\r\n<ic-chip label=\"Americano\" variant=\"outlined\" dismissible=\"true\" disabled=\"true\">\r\n <svg\r\n slot=\"icon\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n aria-label=\"coffee\"\r\n >\r\n <path d=\"M2,21H20V19H2M20,8H18V5H20M20,3H4V13A4,4 0 0,0 8,17H14A4,4 0 0,0 18,13V10H20A2,2 0 0,0 22,8V5C22,3.89 21.1,3 20,3Z\"/>\r\n </svg>\r\n</ic-chip>`,\r\n long: `{shortCode}`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcChip label=\"Americano\" dismissible disabled>\r\n <SlottedSVG\r\n slot=\"icon\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n aria-label=\"coffee\"\r\n >\r\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"/>\r\n </SlottedSVG>\r\n</IcChip>\r\n<IcChip label=\"Americano\" variant=\"outlined\" dismissible disabled>\r\n <SlottedSVG\r\n slot=\"icon\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n aria-label=\"coffee\"\r\n >\r\n <path d=\"M2,21H20V19H2M20,8H18V5H20M20,3H4V13A4,4 0 0,0 8,17H14A4,4 0 0,0 18,13V10H20A2,2 0 0,0 22,8V5C22,3.89 21.1,3 20,3Z\"/>\r\n </SlottedSVG>\r\n</IcChip>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `<>\r\n {shortCode}\r\n</>`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `<>\r\n {shortCode}\r\n</>`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview\r\n style={{\r\n gap: \"0.5rem\",\r\n display: \"flex\",\r\n justifyContent: \"center\",\r\n alignItems: \"center\",\r\n }}\r\n snippets={snippetsDisabled}\r\n>\r\n <IcChip label=\"Americano\" dismissible disabled>\r\n <svg\r\n slot=\"icon\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n aria-label=\"coffee\"\r\n >\r\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\r\n </svg>\r\n </IcChip>\r\n <IcChip label=\"Americano\" variant=\"outlined\" dismissible disabled>\r\n <svg\r\n slot=\"icon\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"currentColor\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n aria-label=\"coffee\"\r\n >\r\n <path d=\"M2,21H20V19H2M20,8H18V5H20M20,3H4V13A4,4 0 0,0 8,17H14A4,4 0 0,0 18,13V10H20A2,2 0 0,0 22,8V5C22,3.89 21.1,3 20,3Z\" />\r\n </svg>\r\n </IcChip>\r\n</ComponentPreview>\r\n",
"path": "/components/chip/code",
"date": "2024-05-31",
"title": "Chip",
@@ -1588,11 +1588,11 @@
}
],
"meta": {
- "relativePath": "components/chips/code.mdx",
- "createdAt": "2024-11-06T10:27:49.408Z",
- "lastModified": "2024-11-06T10:18:59.980Z",
- "size": 10153,
- "formattedSize": "9.9 KB"
+ "relativePath": "components\\chips\\code.mdx",
+ "createdAt": "2024-12-04T13:23:54.083Z",
+ "lastModified": "2024-12-04T13:23:54.083Z",
+ "size": 10539,
+ "formattedSize": "10.3 KB"
}
},
{
@@ -1621,9 +1621,9 @@
],
"tags": ["Tags"],
"meta": {
- "relativePath": "components/chips/guidance.mdx",
- "createdAt": "2024-11-06T10:27:49.408Z",
- "lastModified": "2024-11-06T10:18:59.980Z",
+ "relativePath": "components\\chips\\guidance.mdx",
+ "createdAt": "2024-11-05T11:57:51.086Z",
+ "lastModified": "2024-11-05T11:57:51.086Z",
"size": 6649,
"formattedSize": "6.5 KB"
}
@@ -1652,9 +1652,9 @@
}
],
"meta": {
- "relativePath": "components/classification-banner/accessibility.mdx",
- "createdAt": "2024-11-06T10:27:49.404Z",
- "lastModified": "2024-11-06T10:19:00.000Z",
+ "relativePath": "components\\classification-banner\\accessibility.mdx",
+ "createdAt": "2024-11-05T11:57:51.101Z",
+ "lastModified": "2024-11-05T11:57:51.101Z",
"size": 1188,
"formattedSize": "1.2 KB"
}
@@ -1683,9 +1683,9 @@
}
],
"meta": {
- "relativePath": "components/classification-banner/code.mdx",
- "createdAt": "2024-11-06T10:27:49.404Z",
- "lastModified": "2024-11-06T10:19:00.000Z",
+ "relativePath": "components\\classification-banner\\code.mdx",
+ "createdAt": "2024-11-05T11:57:51.118Z",
+ "lastModified": "2024-11-05T11:57:51.118Z",
"size": 3208,
"formattedSize": "3.1 KB"
}
@@ -1715,16 +1715,16 @@
}
],
"meta": {
- "relativePath": "components/classification-banner/guidance.mdx",
- "createdAt": "2024-11-06T10:27:49.404Z",
- "lastModified": "2024-11-06T10:19:00.000Z",
+ "relativePath": "components\\classification-banner\\guidance.mdx",
+ "createdAt": "2024-11-05T11:57:51.139Z",
+ "lastModified": "2024-11-05T11:57:51.139Z",
"size": 2020,
"formattedSize": "2.0 KB"
}
},
{
"id": "components\\data-entity\\accessibilityx",
- "contents": "\n## Easy to use for everyone\n\nThe data entity component is descriptive and designed to inform the user in a comprehensive format about their inputs before making a submission. By including an interaction area, it provides users with a direct link or action to interact with an individual row.\n\n## For Assistive Technology\n\nThe data entity can either be interactive or non-interactive. It is therefore included in the tab-indexing for keyboard navigation as individual entity items, allowing it to be read out by screen readers using the aria-current attribute.\n\n## Based on\n\nThe data entity component has been based on the following resources:\n\n<ul>\n <li>\n <ic-link\n target=\"_blank\"\n href=\"https://design-system.service.gov.uk/patterns/check-answers/\"\n rel=\"noreferer noopener nofollow\"\n >\n Check answers\n </ic-link>\n , GOV.UK Design System, accessed September 2022.\n </li>\n <li>\n <ic-link\n target=\"_blank\"\n href=\"https://dwpdigital.blog.gov.uk/2016/07/08/a-live-service-is-not-the-end-of-the-story/\"\n rel=\"noreferer noopener nofollow\"\n >\n A live service is not the end of the story\n </ic-link>\n , DWP Digital, accessed September 2022.\n </li>\n <li>\n <ic-link\n target=\"_blank\"\n href=\"https://ons-design-system.netlify.app/patterns/check-answers/\"\n rel=\"noreferer noopener nofollow\"\n >\n Help users to check answers\n </ic-link>\n , ONS, accessed September 2022.\n </li>\n</ul>\n\n## Testing\n\nWe’ve tested this component against WCAG 2.2 Level AA. It’s been tested with NVDA and VoiceOver, and several different users with different interaction methods.\n",
+ "contents": "\r\n## Easy to use for everyone\r\n\r\nThe data entity component is descriptive and designed to inform the user in a comprehensive format about their inputs before making a submission. By including an interaction area, it provides users with a direct link or action to interact with an individual row.\r\n\r\n## For Assistive Technology\r\n\r\nThe data entity can either be interactive or non-interactive. It is therefore included in the tab-indexing for keyboard navigation as individual entity items, allowing it to be read out by screen readers using the aria-current attribute.\r\n\r\n## Based on\r\n\r\nThe data entity component has been based on the following resources:\r\n\r\n<ul>\r\n <li>\r\n <ic-link\r\n target=\"_blank\"\r\n href=\"https://design-system.service.gov.uk/patterns/check-answers/\"\r\n rel=\"noreferer noopener nofollow\"\r\n >\r\n Check answers\r\n </ic-link>\r\n , GOV.UK Design System, accessed September 2022.\r\n </li>\r\n <li>\r\n <ic-link\r\n target=\"_blank\"\r\n href=\"https://dwpdigital.blog.gov.uk/2016/07/08/a-live-service-is-not-the-end-of-the-story/\"\r\n rel=\"noreferer noopener nofollow\"\r\n >\r\n A live service is not the end of the story\r\n </ic-link>\r\n , DWP Digital, accessed September 2022.\r\n </li>\r\n <li>\r\n <ic-link\r\n target=\"_blank\"\r\n href=\"https://ons-design-system.netlify.app/patterns/check-answers/\"\r\n rel=\"noreferer noopener nofollow\"\r\n >\r\n Help users to check answers\r\n </ic-link>\r\n , ONS, accessed September 2022.\r\n </li>\r\n</ul>\r\n\r\n## Testing\r\n\r\nWe’ve tested this component against WCAG 2.2 Level AA. It’s been tested with NVDA and VoiceOver, and several different users with different interaction methods.\r\n",
"path": "/components/data-entity/accessibility",
"date": "2024-04-15",
"title": "Data entity",
@@ -1746,16 +1746,16 @@
}
],
"meta": {
- "relativePath": "components/data-entity/accessibility.mdx",
- "createdAt": "2024-11-06T10:27:49.404Z",
- "lastModified": "2024-11-06T10:19:00.000Z",
- "size": 2202,
+ "relativePath": "components\\data-entity\\accessibility.mdx",
+ "createdAt": "2024-12-04T13:23:54.084Z",
+ "lastModified": "2024-12-04T13:23:54.084Z",
+ "size": 2271,
"formattedSize": "2.2 KB"
}
},
{
"id": "components\\data-entity\\codex",
- "contents": "\nimport {\n IcDataEntity,\n IcDataRow,\n IcLink,\n IcTypography,\n IcTextField,\n IcButton,\n IcStatusTag,\n} from \"@ukic/react\";\n\n## Component demo\n\nexport const snippets = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-data-entity heading=\"Order details\">\n <ic-data-row label=\"Order name\" value=\"Michael\">\n <ic-link href=\"#\" slot=\"end-component\">\n Edit\n </ic-link>\n </ic-data-row>\n <ic-data-row label=\"Drink\" value=\"Americano\">\n <ic-link href=\"#\" slot=\"end-component\">\n Edit\n </ic-link>\n </ic-data-row>\n <ic-data-row label=\"Milk option\" value=\"Soya milk\">\n <ic-link href=\"#\" slot=\"end-component\">\n Edit\n </ic-link>\n </ic-data-row>\n <ic-data-row label=\"Price\" value=\"£3.25\">\n <ic-link href=\"#\" slot=\"end-component\">\n Edit\n </ic-link>\n </ic-data-row>\n <ic-data-row label=\"Payment method\">\n <ic-typography variant=\"body\" slot=\"value\">\n VISA ending 5896\n </ic-typography>\n <ic-link href=\"#\" slot=\"end-component\">\n Edit\n </ic-link>\n </ic-data-row>\n <ic-data-row label=\"Download receipt\" value=\"CoffeeOrder_X46w32.pdf\">\n <ic-button variant=\"icon\" aria-label=\"Download\" slot=\"end-component\">\n <svg viewBox=\"0 0 24 24\" height=\"24\" width=\"24\">\n <path\n d=\"M5,20H19V18H5M19,9H15V3H9V9H5L12,16L19,9Z\"\n fill=\"currentColor\"\n />\n </svg>\n </ic-button>\n </ic-data-row>\n</ic-data-entity>`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcDataEntity heading=\"Order details\">\n <IcDataRow label=\"Order name\" value=\"Michael\">\n <IcLink href=\"#\" slot=\"end-component\">\n Edit\n </IcLink>\n </IcDataRow>\n <IcDataRow label=\"Drink\" value=\"Americano\">\n <IcLink href=\"#\" slot=\"end-component\">\n Edit\n </IcLink>\n </IcDataRow>\n <IcDataRow label=\"Milk option\" value=\"Soya milk\">\n <IcLink href=\"#\" slot=\"end-component\">\n Edit\n </IcLink>\n </IcDataRow>\n <IcDataRow label=\"Price\" value=\"£3.25\">\n <IcLink href=\"#\" slot=\"end-component\">\n Edit\n </IcLink>\n </IcDataRow>\n <IcDataRow label=\"Payment method\">\n <IcTypography variant=\"body\" slot=\"value\">\n VISA ending 5896\n </IcTypography>\n <IcLink href=\"#\" slot=\"end-component\">\n Edit\n </IcLink>\n </IcDataRow>\n <IcDataRow label=\"Download receipt\" value=\"CoffeeOrder_X46w32.pdf\">\n <IcButton variant=\"icon\" aria-label=\"Download\" slot=\"end-component\">\n <SlottedSVG viewBox=\"0 0 24 24\" height=\"24\" width=\"24\">\n <path\n d=\"M5,20H19V18H5M19,9H15V3H9V9H5L12,16L19,9Z\"\n fill=\"currentColor\"\n />\n </SlottedSVG>\n </IcButton>\n </IcDataRow>\n</IcDataEntity>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `{shortCode}`,\n },\n {\n language: \"Javascript\",\n snippet: `{shortCode}`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={snippets}>\n <IcDataEntity heading=\"Order details\" style={{ width: \"90%\" }}>\n <IcDataRow label=\"Order name\" value=\"Michael\">\n <IcLink href=\"#\" onClick={(e) => e.preventDefault()} slot=\"end-component\">\n Edit\n </IcLink>\n </IcDataRow>\n <IcDataRow label=\"Drink\" value=\"Americano\">\n <IcLink href=\"#\" onClick={(e) => e.preventDefault()} slot=\"end-component\">\n Edit\n </IcLink>\n </IcDataRow>\n <IcDataRow label=\"Milk option\" value=\"Soya milk\">\n <IcLink href=\"#\" onClick={(e) => e.preventDefault()} slot=\"end-component\">\n Edit\n </IcLink>\n </IcDataRow>\n <IcDataRow label=\"Price\" value=\"£3.25\">\n <IcLink href=\"#\" onClick={(e) => e.preventDefault()} slot=\"end-component\">\n Edit\n </IcLink>\n </IcDataRow>\n <IcDataRow label=\"Payment method\">\n <IcTypography variant=\"body\" slot=\"value\">\n VISA ending 5896\n </IcTypography>\n <IcLink href=\"#\" onClick={(e) => e.preventDefault()} slot=\"end-component\">\n Edit\n </IcLink>\n </IcDataRow>\n <IcDataRow label=\"Download receipt\" value=\"CoffeeOrder_X46w32.pdf\">\n <IcButton variant=\"icon\" aria-label=\"Download\" slot=\"end-component\">\n <svg viewBox=\"0 0 24 24\" height=\"24\" width=\"24\">\n <path\n d=\"M5,20H19V18H5M19,9H15V3H9V9H5L12,16L19,9Z\"\n fill=\"currentColor\"\n />\n </svg>\n </IcButton>\n </IcDataRow>\n </IcDataEntity>\n</ComponentPreview>\n\n## Data row details\n\n<ComponentDetails component=\"ic-data-row\" />\n\n## Data entity details\n\n<ComponentDetails component=\"ic-data-entity\" />\n\n## Variants\n\n### With status tags\n\nexport const withStatusTags = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-data-entity heading=\"Order details\">\n <ic-data-row label=\"Order name\" value=\"Michael\">\n </ic-data-row>\n <ic-data-row label=\"Drink\" value=\"Americano\">\n <ic-status-tag\n status=\"warning\"\n label=\"In Progress\"\n variant=\"filled\"\n slot=\"end-component\"\n />\n </ic-data-row>\n <ic-data-row label=\"Milk option\" value=\"Soya milk\">\n </ic-data-row>\n <ic-data-row label=\"Price\" value=\"£3.25\">\n </ic-data-row>\n <ic-data-row label=\"Payment method\">\n <ic-typography variant=\"body\" slot=\"value\">\n VISA ending 5896\n </ic-typography>\n <ic-status-tag\n label=\"Not Confirmed\"\n variant=\"filled\"\n slot=\"end-component\"\n />\n </ic-data-row>\n</ic-data-entity>`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcDataEntity heading=\"Order details\">\n <IcDataRow label=\"Order name\" value=\"Michael\" />\n <IcDataRow label=\"Drink\" value=\"Americano\">\n <IcStatusTag\n status=\"warning\"\n label=\"In Progress\"\n variant=\"filled\"\n slot=\"end-component\"\n />\n </IcDataRow>\n <IcDataRow label=\"Milk option\" value=\"Soya milk\" />\n <IcDataRow label=\"Price\" value=\"£3.25\" />\n <IcDataRow label=\"Payment method\">\n <IcTypography variant=\"body\" slot=\"value\">\n VISA ending 5896\n </IcTypography>\n <IcStatusTag\n label=\"Not Confirmed\"\n variant=\"filled\"\n slot=\"end-component\"\n />\n </IcDataRow>\n</IcDataEntity>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `{shortCode}`,\n },\n {\n language: \"Javascript\",\n snippet: `{shortCode}`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={withStatusTags}>\n <IcDataEntity heading=\"Order details\" style={{ width: \"90%\" }}>\n <IcDataRow label=\"Order name\" value=\"Michael\" />\n <IcDataRow label=\"Drink\" value=\"Americano\">\n <IcStatusTag\n status=\"warning\"\n label=\"In Progress\"\n variant=\"filled\"\n slot=\"end-component\"\n />\n </IcDataRow>\n <IcDataRow label=\"Milk option\" value=\"Soya milk\" />\n <IcDataRow label=\"Price\" value=\"£3.25\" />\n <IcDataRow label=\"Payment method\">\n <IcTypography variant=\"body\" slot=\"value\">\n VISA ending 5896\n </IcTypography>\n <IcStatusTag\n label=\"Not Confirmed\"\n variant=\"filled\"\n slot=\"end-component\"\n />\n </IcDataRow>\n </IcDataEntity>\n</ComponentPreview>\n\n### Size small\n\nexport const smallSnippet = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-data-entity heading=\"Personal details\" size=\"small\">\n <ic-data-row label=\"Name\" value=\"Michael Johnson\">\n <ic-status-tag\n status=\"success\"\n label=\"confirmed\"\n variant=\"filled\"\n slot=\"end-component\"\n size=\"small\"\n ></ic-status-tag>\n </ic-data-row>\n <ic-data-row label=\"Date of birth\" value=\"16 October 1995\">\n <ic-status-tag\n status=\"warning\"\n label=\"in review\"\n variant=\"filled\"\n slot=\"end-component\"\n size=\"small\"\n ></ic-status-tag>\n </ic-data-row>\n <ic-data-row label=\"Telephone\" value=\"07449 7654873\">\n <ic-status-tag\n status=\"warning\"\n label=\"in review\"\n variant=\"filled\"\n slot=\"end-component\"\n size=\"small\"\n ></ic-status-tag>\n </ic-data-row>\n <ic-data-row label=\"Email\" value=\"mjohnson@coffee.gov\">\n <ic-status-tag\n status=\"success\"\n label=\"confirmed\"\n variant=\"filled\"\n slot=\"end-component\"\n size=\"small\"\n ></ic-status-tag>\n </ic-data-row>\n <ic-data-row label=\"Address\">\n <ic-typography variant=\"body\" slot=\"value\">\n 383 Coffee Drive\n <br />\n London\n <br />\n SW7 988\n <br />\n United Kingdom\n </ic-typography>\n <ic-status-tag\n label=\"not confirmed\"\n variant=\"filled\"\n slot=\"end-component\"\n size=\"small\"\n ></ic-status-tag>\n </ic-data-row>\n</ic-data-entity>`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcDataEntity heading=\"Personal details\" size=\"small\">\n <IcDataRow label=\"Name\" value=\"Michael Johnson\">\n <IcStatusTag\n status=\"success\"\n label=\"confirmed\"\n variant=\"filled\"\n slot=\"end-component\"\n size=\"small\"\n />\n </IcDataRow>\n <IcDataRow label=\"Date of birth\" value=\"16 October 1995\">\n <IcStatusTag\n status=\"warning\"\n label=\"in review\"\n variant=\"filled\"\n slot=\"end-component\"\n size=\"small\"\n />\n </IcDataRow>\n <IcDataRow label=\"Telephone\" value=\"07449 7654873\">\n <IcStatusTag\n status=\"warning\"\n label=\"in review\"\n variant=\"filled\"\n slot=\"end-component\"\n size=\"small\"\n />\n </IcDataRow>\n <IcDataRow label=\"Email\" value=\"mjohnson@coffee.gov\">\n <IcStatusTag\n status=\"success\"\n label=\"confirmed\"\n variant=\"filled\"\n slot=\"end-component\"\n size=\"small\"\n />\n </IcDataRow>\n <IcDataRow label=\"Address\">\n <IcTypography variant=\"body\" slot=\"value\">\n 383 Coffee Drive\n <br />\n London\n <br />\n SW7 988\n <br />\n United Kingdom\n </IcTypography>\n <IcStatusTag\n label=\"not confirmed\"\n variant=\"filled\"\n slot=\"end-component\"\n size=\"small\"\n />\n </IcDataRow>\n</IcDataEntity>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `{shortCode}`,\n },\n {\n language: \"Javascript\",\n snippet: `{shortCode}`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={smallSnippet}>\n <IcDataEntity\n heading=\"Personal details\"\n size=\"small\"\n style={{ width: \"90%\" }}\n >\n <IcDataRow label=\"Name\" value=\"Michael Johnson\" />\n <IcDataRow label=\"Date of birth\" value=\"16 October 1995\" />\n <IcDataRow label=\"Telephone\" value=\"07449 7654873\" />\n <IcDataRow label=\"Email\" value=\"mjohnson@coffee.gov\" />\n <IcDataRow label=\"Address\">\n <IcTypography variant=\"body\" slot=\"value\">\n 383 Coffee Drive\n <br />\n London\n <br />\n SW7 988\n <br />\n United Kingdom\n </IcTypography>\n </IcDataRow>\n </IcDataEntity>\n</ComponentPreview>\n\n### Editable example\n\nexport const editableExample = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-data-entity heading=\"Order details\">\n <ic-data-row label=\"Order name\"> \n <ic-text-field \n slot=\"value\" \n label=\"Order name\" \n value=\"Michael\"\n readonly=\"true\"\n hide-label=\"true\"\n full-width=\"true\"\n />\n </ic-data-row>\n <ic-data-row label=\"Drink\">\n <ic-text-field \n slot=\"value\" \n label=\"Drink\" \n value=\"Americano\"\n readonly=\"true\"\n hide-label=\"true\"\n full-width=\"true\"\n />\n </ic-data-row>\n <ic-data-row label=\"Milk option\">\n <ic-text-field \n slot=\"value\" \n label=\"Milk option\" \n value=\"Soya milk\"\n readonly=\"true\"\n hide-label=\"true\"\n full-width=\"true\"\n />\n </ic-data-row>\n <ic-data-row label=\"Price\">\n <ic-text-field \n slot=\"value\" \n label=\"Price\" \n value=\"£3.25\"\n readonly=\"true\"\n hide-label=\"true\"\n full-width=\"true\"\n />\n </ic-data-row>\n <ic-data-row label=\"Payment method\">\n <ic-text-field \n slot=\"value\" \n label=\"Payment method\" \n value=\"VISA ending 5896\"\n readonly=\"true\"\n hide-label=\"true\"\n full-width=\"true\"\n />\n </ic-data-row>\n</ic-data-entity>\n<div class=\"btn-container\">\n <ic-button id=\"confirm-button\">\n Confirm\n </ic-button>\n <ic-button id=\"edit-button\" variant=\"secondary\">\n Edit\n </ic-button>\n</div>`,\n long: `.btn-container {\n display: flex;\n gap: var(--ic-space-md);\n padding-top: var(--ic-space-md);\n }\n .parent-container {\n padding: var(--ic-space-md);\n }\n</style>\n<body>\n <div class=\"parent-container\">\n {shortCode}\n </div>\n <script>\n const textFields = document.querySelectorAll('ic-text-field');\n const confirmBtn = document.querySelector('#confirm-button');\n confirmBtn.addEventListener('click', () => {\n textFields.forEach((textField) => {\n textField.setAttribute('readonly', '');\n });\n });\n const editBtn = document.querySelector('#edit-button');\n editBtn.addEventListener('click', () => {\n textFields.forEach((textField) => {\n textField.removeAttribute('readonly');\n });\n });\n </script>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcDataEntity heading=\"Order details\">\n <IcDataRow label=\"Order name\">\n <IcTextField\n slot=\"value\"\n label=\"Order name\"\n value=\"Michael\"\n readonly\n hideLabel\n fullWidth\n />\n </IcDataRow>\n <IcDataRow label=\"Drink\" value=\"Americano\">\n <IcTextField\n slot=\"value\"\n label=\"Drink\"\n value=\"Americano\"\n readonly\n hideLabel\n fullWidth\n />\n </IcDataRow>\n <IcDataRow label=\"Milk option\" value=\"Soya milk\">\n <IcTextField\n slot=\"value\"\n label=\"Milk option\"\n value=\"Soya milk\"\n readonly\n hideLabel\n fullWidth\n />\n </IcDataRow>\n <IcDataRow label=\"Price\" value=\"£3.25\">\n <IcTextField\n slot=\"value\"\n label=\"Price\"\n value=\"£3.25\"\n readonly\n hideLabel\n fullWidth\n />\n </IcDataRow>\n <IcDataRow label=\"Payment method\">\n <IcTextField\n slot=\"value\"\n label=\"Payment method\"\n value=\"VISA ending 5896\"\n readonly\n hideLabel\n fullWidth\n />\n </IcDataRow>\n</IcDataEntity>\n<div className={classes.btnContainer}>\n <IcButton\n onClick={() => {\n const textFields = document.querySelectorAll('ic-text-field');\n textFields.forEach((textField) => {\n textField.setAttribute('readonly', '');\n });\n }}\n >\n Confirm\n </IcButton>\n <IcButton\n onClick={() => {\n const textFields = document.querySelectorAll('ic-text-field');\n textFields.forEach((textField) => {\n textField.removeAttribute('readonly');\n });\n }}\n variant=\"secondary\"\n >\n Edit\n </IcButton>\n</div>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n btnContainer: {\n display: \"flex\",\n gap: \"var(--ic-space-md)\",\n paddingTop: \"var(--ic-space-md)\",\n },\n parentContainer: {\n padding: \"var(--ic-space-md)\",\n },\n});\nconst classes = useStyles();\nreturn ( \n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n btnContainer: {\n display: \"flex\",\n gap: \"var(--ic-space-md)\",\n paddingTop: \"var(--ic-space-md)\",\n },\n parentContainer: {\n padding: \"var(--ic-space-md)\",\n },\n});\nconst classes = useStyles();\nreturn ( \n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={editableExample} style={{ display: \"block\" }}>\n <IcDataEntity heading=\"Order details\" style={{ width: \"90%\" }}>\n <IcDataRow label=\"Order name\">\n <IcTextField\n slot=\"value\"\n label=\"Order name\"\n value=\"Michael\"\n readonly\n hideLabel\n fullWidth\n />\n </IcDataRow>\n <IcDataRow label=\"Drink\" value=\"Americano\">\n <IcTextField\n slot=\"value\"\n label=\"Drink\"\n value=\"Americano\"\n readonly\n hideLabel\n fullWidth\n />\n </IcDataRow>\n <IcDataRow label=\"Milk option\" value=\"Soya milk\">\n <IcTextField\n slot=\"value\"\n label=\"Milk option\"\n value=\"Soya milk\"\n readonly\n hideLabel\n fullWidth\n />\n </IcDataRow>\n <IcDataRow label=\"Price\" value=\"£3.25\">\n <IcTextField\n slot=\"value\"\n label=\"Price\"\n value=\"£3.25\"\n readonly\n hideLabel\n fullWidth\n />\n </IcDataRow>\n <IcDataRow label=\"Payment method\">\n <IcTextField\n slot=\"value\"\n label=\"Payment method\"\n value=\"VISA ending 5896\"\n readonly\n hideLabel\n fullWidth\n />\n </IcDataRow>\n </IcDataEntity>\n <IcButton\n onClick={() => {\n const textFields = document.querySelectorAll(\"ic-text-field\");\n textFields.forEach((textField) => {\n textField.setAttribute(\"readonly\", \"\");\n });\n }}\n style={{\n marginRight: \"var(--ic-space-md)\",\n marginTop: \"var(--ic-space-lg)\",\n }}\n >\n Confirm\n </IcButton>\n <IcButton\n onClick={() => {\n const textFields = document.querySelectorAll(\"ic-text-field\");\n textFields.forEach((textField) => {\n textField.removeAttribute(\"readonly\");\n });\n }}\n variant=\"secondary\"\n style={{ marginTop: \"var(--ic-space-lg)\" }}\n >\n Edit\n </IcButton>\n</ComponentPreview>\n",
+ "contents": "\r\nimport {\r\n IcDataEntity,\r\n IcDataRow,\r\n IcLink,\r\n IcTypography,\r\n IcTextField,\r\n IcButton,\r\n IcStatusTag,\r\n} from \"@ukic/react\";\r\n\r\n## Component demo\r\n\r\nexport const snippets = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-data-entity heading=\"Order details\">\r\n <ic-data-row label=\"Order name\" value=\"Michael\">\r\n <ic-link href=\"#\" slot=\"end-component\">\r\n Edit\r\n </ic-link>\r\n </ic-data-row>\r\n <ic-data-row label=\"Drink\" value=\"Americano\">\r\n <ic-link href=\"#\" slot=\"end-component\">\r\n Edit\r\n </ic-link>\r\n </ic-data-row>\r\n <ic-data-row label=\"Milk option\" value=\"Soya milk\">\r\n <ic-link href=\"#\" slot=\"end-component\">\r\n Edit\r\n </ic-link>\r\n </ic-data-row>\r\n <ic-data-row label=\"Price\" value=\"£3.25\">\r\n <ic-link href=\"#\" slot=\"end-component\">\r\n Edit\r\n </ic-link>\r\n </ic-data-row>\r\n <ic-data-row label=\"Payment method\">\r\n <ic-typography variant=\"body\" slot=\"value\">\r\n VISA ending 5896\r\n </ic-typography>\r\n <ic-link href=\"#\" slot=\"end-component\">\r\n Edit\r\n </ic-link>\r\n </ic-data-row>\r\n <ic-data-row label=\"Download receipt\" value=\"CoffeeOrder_X46w32.pdf\">\r\n <ic-button variant=\"icon\" aria-label=\"Download\" slot=\"end-component\">\r\n <svg viewBox=\"0 0 24 24\" height=\"24\" width=\"24\">\r\n <path\r\n d=\"M5,20H19V18H5M19,9H15V3H9V9H5L12,16L19,9Z\"\r\n fill=\"currentColor\"\r\n />\r\n </svg>\r\n </ic-button>\r\n </ic-data-row>\r\n</ic-data-entity>`,\r\n long: `{shortCode}`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcDataEntity heading=\"Order details\">\r\n <IcDataRow label=\"Order name\" value=\"Michael\">\r\n <IcLink href=\"#\" slot=\"end-component\">\r\n Edit\r\n </IcLink>\r\n </IcDataRow>\r\n <IcDataRow label=\"Drink\" value=\"Americano\">\r\n <IcLink href=\"#\" slot=\"end-component\">\r\n Edit\r\n </IcLink>\r\n </IcDataRow>\r\n <IcDataRow label=\"Milk option\" value=\"Soya milk\">\r\n <IcLink href=\"#\" slot=\"end-component\">\r\n Edit\r\n </IcLink>\r\n </IcDataRow>\r\n <IcDataRow label=\"Price\" value=\"£3.25\">\r\n <IcLink href=\"#\" slot=\"end-component\">\r\n Edit\r\n </IcLink>\r\n </IcDataRow>\r\n <IcDataRow label=\"Payment method\">\r\n <IcTypography variant=\"body\" slot=\"value\">\r\n VISA ending 5896\r\n </IcTypography>\r\n <IcLink href=\"#\" slot=\"end-component\">\r\n Edit\r\n </IcLink>\r\n </IcDataRow>\r\n <IcDataRow label=\"Download receipt\" value=\"CoffeeOrder_X46w32.pdf\">\r\n <IcButton variant=\"icon\" aria-label=\"Download\" slot=\"end-component\">\r\n <SlottedSVG viewBox=\"0 0 24 24\" height=\"24\" width=\"24\">\r\n <path\r\n d=\"M5,20H19V18H5M19,9H15V3H9V9H5L12,16L19,9Z\"\r\n fill=\"currentColor\"\r\n />\r\n </SlottedSVG>\r\n </IcButton>\r\n </IcDataRow>\r\n</IcDataEntity>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `{shortCode}`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `{shortCode}`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview snippets={snippets}>\r\n <IcDataEntity heading=\"Order details\" style={{ width: \"90%\" }}>\r\n <IcDataRow label=\"Order name\" value=\"Michael\">\r\n <IcLink href=\"#\" onClick={(e) => e.preventDefault()} slot=\"end-component\">\r\n Edit\r\n </IcLink>\r\n </IcDataRow>\r\n <IcDataRow label=\"Drink\" value=\"Americano\">\r\n <IcLink href=\"#\" onClick={(e) => e.preventDefault()} slot=\"end-component\">\r\n Edit\r\n </IcLink>\r\n </IcDataRow>\r\n <IcDataRow label=\"Milk option\" value=\"Soya milk\">\r\n <IcLink href=\"#\" onClick={(e) => e.preventDefault()} slot=\"end-component\">\r\n Edit\r\n </IcLink>\r\n </IcDataRow>\r\n <IcDataRow label=\"Price\" value=\"£3.25\">\r\n <IcLink href=\"#\" onClick={(e) => e.preventDefault()} slot=\"end-component\">\r\n Edit\r\n </IcLink>\r\n </IcDataRow>\r\n <IcDataRow label=\"Payment method\">\r\n <IcTypography variant=\"body\" slot=\"value\">\r\n VISA ending 5896\r\n </IcTypography>\r\n <IcLink href=\"#\" onClick={(e) => e.preventDefault()} slot=\"end-component\">\r\n Edit\r\n </IcLink>\r\n </IcDataRow>\r\n <IcDataRow label=\"Download receipt\" value=\"CoffeeOrder_X46w32.pdf\">\r\n <IcButton variant=\"icon\" aria-label=\"Download\" slot=\"end-component\">\r\n <svg viewBox=\"0 0 24 24\" height=\"24\" width=\"24\">\r\n <path\r\n d=\"M5,20H19V18H5M19,9H15V3H9V9H5L12,16L19,9Z\"\r\n fill=\"currentColor\"\r\n />\r\n </svg>\r\n </IcButton>\r\n </IcDataRow>\r\n </IcDataEntity>\r\n</ComponentPreview>\r\n\r\n## Data row details\r\n\r\n<ComponentDetails component=\"ic-data-row\" />\r\n\r\n## Data entity details\r\n\r\n<ComponentDetails component=\"ic-data-entity\" />\r\n\r\n## Variants\r\n\r\n### With status tags\r\n\r\nexport const withStatusTags = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-data-entity heading=\"Order details\">\r\n <ic-data-row label=\"Order name\" value=\"Michael\">\r\n </ic-data-row>\r\n <ic-data-row label=\"Drink\" value=\"Americano\">\r\n <ic-status-tag\r\n status=\"warning\"\r\n label=\"In Progress\"\r\n variant=\"filled\"\r\n slot=\"end-component\"\r\n />\r\n </ic-data-row>\r\n <ic-data-row label=\"Milk option\" value=\"Soya milk\">\r\n </ic-data-row>\r\n <ic-data-row label=\"Price\" value=\"£3.25\">\r\n </ic-data-row>\r\n <ic-data-row label=\"Payment method\">\r\n <ic-typography variant=\"body\" slot=\"value\">\r\n VISA ending 5896\r\n </ic-typography>\r\n <ic-status-tag\r\n label=\"Not Confirmed\"\r\n variant=\"filled\"\r\n slot=\"end-component\"\r\n />\r\n </ic-data-row>\r\n</ic-data-entity>`,\r\n long: `{shortCode}`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcDataEntity heading=\"Order details\">\r\n <IcDataRow label=\"Order name\" value=\"Michael\" />\r\n <IcDataRow label=\"Drink\" value=\"Americano\">\r\n <IcStatusTag\r\n status=\"warning\"\r\n label=\"In Progress\"\r\n variant=\"filled\"\r\n slot=\"end-component\"\r\n />\r\n </IcDataRow>\r\n <IcDataRow label=\"Milk option\" value=\"Soya milk\" />\r\n <IcDataRow label=\"Price\" value=\"£3.25\" />\r\n <IcDataRow label=\"Payment method\">\r\n <IcTypography variant=\"body\" slot=\"value\">\r\n VISA ending 5896\r\n </IcTypography>\r\n <IcStatusTag\r\n label=\"Not Confirmed\"\r\n variant=\"filled\"\r\n slot=\"end-component\"\r\n />\r\n </IcDataRow>\r\n</IcDataEntity>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `{shortCode}`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `{shortCode}`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview snippets={withStatusTags}>\r\n <IcDataEntity heading=\"Order details\" style={{ width: \"90%\" }}>\r\n <IcDataRow label=\"Order name\" value=\"Michael\" />\r\n <IcDataRow label=\"Drink\" value=\"Americano\">\r\n <IcStatusTag\r\n status=\"warning\"\r\n label=\"In Progress\"\r\n variant=\"filled\"\r\n slot=\"end-component\"\r\n />\r\n </IcDataRow>\r\n <IcDataRow label=\"Milk option\" value=\"Soya milk\" />\r\n <IcDataRow label=\"Price\" value=\"£3.25\" />\r\n <IcDataRow label=\"Payment method\">\r\n <IcTypography variant=\"body\" slot=\"value\">\r\n VISA ending 5896\r\n </IcTypography>\r\n <IcStatusTag\r\n label=\"Not Confirmed\"\r\n variant=\"filled\"\r\n slot=\"end-component\"\r\n />\r\n </IcDataRow>\r\n </IcDataEntity>\r\n</ComponentPreview>\r\n\r\n### Size small\r\n\r\nexport const smallSnippet = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-data-entity heading=\"Personal details\" size=\"small\">\r\n <ic-data-row label=\"Name\" value=\"Michael Johnson\">\r\n <ic-status-tag\r\n status=\"success\"\r\n label=\"confirmed\"\r\n variant=\"filled\"\r\n slot=\"end-component\"\r\n size=\"small\"\r\n ></ic-status-tag>\r\n </ic-data-row>\r\n <ic-data-row label=\"Date of birth\" value=\"16 October 1995\">\r\n <ic-status-tag\r\n status=\"warning\"\r\n label=\"in review\"\r\n variant=\"filled\"\r\n slot=\"end-component\"\r\n size=\"small\"\r\n ></ic-status-tag>\r\n </ic-data-row>\r\n <ic-data-row label=\"Telephone\" value=\"07449 7654873\">\r\n <ic-status-tag\r\n status=\"warning\"\r\n label=\"in review\"\r\n variant=\"filled\"\r\n slot=\"end-component\"\r\n size=\"small\"\r\n ></ic-status-tag>\r\n </ic-data-row>\r\n <ic-data-row label=\"Email\" value=\"mjohnson@coffee.gov\">\r\n <ic-status-tag\r\n status=\"success\"\r\n label=\"confirmed\"\r\n variant=\"filled\"\r\n slot=\"end-component\"\r\n size=\"small\"\r\n ></ic-status-tag>\r\n </ic-data-row>\r\n <ic-data-row label=\"Address\">\r\n <ic-typography variant=\"body\" slot=\"value\">\r\n 383 Coffee Drive\r\n <br />\r\n London\r\n <br />\r\n SW7 988\r\n <br />\r\n United Kingdom\r\n </ic-typography>\r\n <ic-status-tag\r\n label=\"not confirmed\"\r\n variant=\"filled\"\r\n slot=\"end-component\"\r\n size=\"small\"\r\n ></ic-status-tag>\r\n </ic-data-row>\r\n</ic-data-entity>`,\r\n long: `{shortCode}`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcDataEntity heading=\"Personal details\" size=\"small\">\r\n <IcDataRow label=\"Name\" value=\"Michael Johnson\">\r\n <IcStatusTag\r\n status=\"success\"\r\n label=\"confirmed\"\r\n variant=\"filled\"\r\n slot=\"end-component\"\r\n size=\"small\"\r\n />\r\n </IcDataRow>\r\n <IcDataRow label=\"Date of birth\" value=\"16 October 1995\">\r\n <IcStatusTag\r\n status=\"warning\"\r\n label=\"in review\"\r\n variant=\"filled\"\r\n slot=\"end-component\"\r\n size=\"small\"\r\n />\r\n </IcDataRow>\r\n <IcDataRow label=\"Telephone\" value=\"07449 7654873\">\r\n <IcStatusTag\r\n status=\"warning\"\r\n label=\"in review\"\r\n variant=\"filled\"\r\n slot=\"end-component\"\r\n size=\"small\"\r\n />\r\n </IcDataRow>\r\n <IcDataRow label=\"Email\" value=\"mjohnson@coffee.gov\">\r\n <IcStatusTag\r\n status=\"success\"\r\n label=\"confirmed\"\r\n variant=\"filled\"\r\n slot=\"end-component\"\r\n size=\"small\"\r\n />\r\n </IcDataRow>\r\n <IcDataRow label=\"Address\">\r\n <IcTypography variant=\"body\" slot=\"value\">\r\n 383 Coffee Drive\r\n <br />\r\n London\r\n <br />\r\n SW7 988\r\n <br />\r\n United Kingdom\r\n </IcTypography>\r\n <IcStatusTag\r\n label=\"not confirmed\"\r\n variant=\"filled\"\r\n slot=\"end-component\"\r\n size=\"small\"\r\n />\r\n </IcDataRow>\r\n</IcDataEntity>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `{shortCode}`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `{shortCode}`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview snippets={smallSnippet}>\r\n <IcDataEntity\r\n heading=\"Personal details\"\r\n size=\"small\"\r\n style={{ width: \"90%\" }}\r\n >\r\n <IcDataRow label=\"Name\" value=\"Michael Johnson\" />\r\n <IcDataRow label=\"Date of birth\" value=\"16 October 1995\" />\r\n <IcDataRow label=\"Telephone\" value=\"07449 7654873\" />\r\n <IcDataRow label=\"Email\" value=\"mjohnson@coffee.gov\" />\r\n <IcDataRow label=\"Address\">\r\n <IcTypography variant=\"body\" slot=\"value\">\r\n 383 Coffee Drive\r\n <br />\r\n London\r\n <br />\r\n SW7 988\r\n <br />\r\n United Kingdom\r\n </IcTypography>\r\n </IcDataRow>\r\n </IcDataEntity>\r\n</ComponentPreview>\r\n\r\n### Editable example\r\n\r\nexport const editableExample = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-data-entity heading=\"Order details\">\r\n <ic-data-row label=\"Order name\"> \r\n <ic-text-field \r\n slot=\"value\" \r\n label=\"Order name\" \r\n value=\"Michael\"\r\n readonly=\"true\"\r\n hide-label=\"true\"\r\n full-width=\"true\"\r\n />\r\n </ic-data-row>\r\n <ic-data-row label=\"Drink\">\r\n <ic-text-field \r\n slot=\"value\" \r\n label=\"Drink\" \r\n value=\"Americano\"\r\n readonly=\"true\"\r\n hide-label=\"true\"\r\n full-width=\"true\"\r\n />\r\n </ic-data-row>\r\n <ic-data-row label=\"Milk option\">\r\n <ic-text-field \r\n slot=\"value\" \r\n label=\"Milk option\" \r\n value=\"Soya milk\"\r\n readonly=\"true\"\r\n hide-label=\"true\"\r\n full-width=\"true\"\r\n />\r\n </ic-data-row>\r\n <ic-data-row label=\"Price\">\r\n <ic-text-field \r\n slot=\"value\" \r\n label=\"Price\" \r\n value=\"£3.25\"\r\n readonly=\"true\"\r\n hide-label=\"true\"\r\n full-width=\"true\"\r\n />\r\n </ic-data-row>\r\n <ic-data-row label=\"Payment method\">\r\n <ic-text-field \r\n slot=\"value\" \r\n label=\"Payment method\" \r\n value=\"VISA ending 5896\"\r\n readonly=\"true\"\r\n hide-label=\"true\"\r\n full-width=\"true\"\r\n />\r\n </ic-data-row>\r\n</ic-data-entity>\r\n<div class=\"btn-container\">\r\n <ic-button id=\"confirm-button\">\r\n Confirm\r\n </ic-button>\r\n <ic-button id=\"edit-button\" variant=\"secondary\">\r\n Edit\r\n </ic-button>\r\n</div>`,\r\n long: `.btn-container {\r\n display: flex;\r\n gap: var(--ic-space-md);\r\n padding-top: var(--ic-space-md);\r\n }\r\n .parent-container {\r\n padding: var(--ic-space-md);\r\n }\r\n</style>\r\n<body>\r\n <div class=\"parent-container\">\r\n {shortCode}\r\n </div>\r\n <script>\r\n const textFields = document.querySelectorAll('ic-text-field');\r\n const confirmBtn = document.querySelector('#confirm-button');\r\n confirmBtn.addEventListener('click', () => {\r\n textFields.forEach((textField) => {\r\n textField.setAttribute('readonly', '');\r\n });\r\n });\r\n const editBtn = document.querySelector('#edit-button');\r\n editBtn.addEventListener('click', () => {\r\n textFields.forEach((textField) => {\r\n textField.removeAttribute('readonly');\r\n });\r\n });\r\n </script>`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcDataEntity heading=\"Order details\">\r\n <IcDataRow label=\"Order name\">\r\n <IcTextField\r\n slot=\"value\"\r\n label=\"Order name\"\r\n value=\"Michael\"\r\n readonly\r\n hideLabel\r\n fullWidth\r\n />\r\n </IcDataRow>\r\n <IcDataRow label=\"Drink\" value=\"Americano\">\r\n <IcTextField\r\n slot=\"value\"\r\n label=\"Drink\"\r\n value=\"Americano\"\r\n readonly\r\n hideLabel\r\n fullWidth\r\n />\r\n </IcDataRow>\r\n <IcDataRow label=\"Milk option\" value=\"Soya milk\">\r\n <IcTextField\r\n slot=\"value\"\r\n label=\"Milk option\"\r\n value=\"Soya milk\"\r\n readonly\r\n hideLabel\r\n fullWidth\r\n />\r\n </IcDataRow>\r\n <IcDataRow label=\"Price\" value=\"£3.25\">\r\n <IcTextField\r\n slot=\"value\"\r\n label=\"Price\"\r\n value=\"£3.25\"\r\n readonly\r\n hideLabel\r\n fullWidth\r\n />\r\n </IcDataRow>\r\n <IcDataRow label=\"Payment method\">\r\n <IcTextField\r\n slot=\"value\"\r\n label=\"Payment method\"\r\n value=\"VISA ending 5896\"\r\n readonly\r\n hideLabel\r\n fullWidth\r\n />\r\n </IcDataRow>\r\n</IcDataEntity>\r\n<div className={classes.btnContainer}>\r\n <IcButton\r\n onClick={() => {\r\n const textFields = document.querySelectorAll('ic-text-field');\r\n textFields.forEach((textField) => {\r\n textField.setAttribute('readonly', '');\r\n });\r\n }}\r\n >\r\n Confirm\r\n </IcButton>\r\n <IcButton\r\n onClick={() => {\r\n const textFields = document.querySelectorAll('ic-text-field');\r\n textFields.forEach((textField) => {\r\n textField.removeAttribute('readonly');\r\n });\r\n }}\r\n variant=\"secondary\"\r\n >\r\n Edit\r\n </IcButton>\r\n</div>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `const useStyles = createUseStyles({\r\n btnContainer: {\r\n display: \"flex\",\r\n gap: \"var(--ic-space-md)\",\r\n paddingTop: \"var(--ic-space-md)\",\r\n },\r\n parentContainer: {\r\n padding: \"var(--ic-space-md)\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nreturn ( \r\n <div className={classes.parentContainer}>\r\n {shortCode}\r\n </div>\r\n)`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `const useStyles = createUseStyles({\r\n btnContainer: {\r\n display: \"flex\",\r\n gap: \"var(--ic-space-md)\",\r\n paddingTop: \"var(--ic-space-md)\",\r\n },\r\n parentContainer: {\r\n padding: \"var(--ic-space-md)\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nreturn ( \r\n <div className={classes.parentContainer}>\r\n {shortCode}\r\n </div>\r\n)`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview snippets={editableExample} style={{ display: \"block\" }}>\r\n <IcDataEntity heading=\"Order details\" style={{ width: \"90%\" }}>\r\n <IcDataRow label=\"Order name\">\r\n <IcTextField\r\n slot=\"value\"\r\n label=\"Order name\"\r\n value=\"Michael\"\r\n readonly\r\n hideLabel\r\n fullWidth\r\n />\r\n </IcDataRow>\r\n <IcDataRow label=\"Drink\" value=\"Americano\">\r\n <IcTextField\r\n slot=\"value\"\r\n label=\"Drink\"\r\n value=\"Americano\"\r\n readonly\r\n hideLabel\r\n fullWidth\r\n />\r\n </IcDataRow>\r\n <IcDataRow label=\"Milk option\" value=\"Soya milk\">\r\n <IcTextField\r\n slot=\"value\"\r\n label=\"Milk option\"\r\n value=\"Soya milk\"\r\n readonly\r\n hideLabel\r\n fullWidth\r\n />\r\n </IcDataRow>\r\n <IcDataRow label=\"Price\" value=\"£3.25\">\r\n <IcTextField\r\n slot=\"value\"\r\n label=\"Price\"\r\n value=\"£3.25\"\r\n readonly\r\n hideLabel\r\n fullWidth\r\n />\r\n </IcDataRow>\r\n <IcDataRow label=\"Payment method\">\r\n <IcTextField\r\n slot=\"value\"\r\n label=\"Payment method\"\r\n value=\"VISA ending 5896\"\r\n readonly\r\n hideLabel\r\n fullWidth\r\n />\r\n </IcDataRow>\r\n </IcDataEntity>\r\n <IcButton\r\n onClick={() => {\r\n const textFields = document.querySelectorAll(\"ic-text-field\");\r\n textFields.forEach((textField) => {\r\n textField.setAttribute(\"readonly\", \"\");\r\n });\r\n }}\r\n style={{\r\n marginRight: \"var(--ic-space-md)\",\r\n marginTop: \"var(--ic-space-lg)\",\r\n }}\r\n >\r\n Confirm\r\n </IcButton>\r\n <IcButton\r\n onClick={() => {\r\n const textFields = document.querySelectorAll(\"ic-text-field\");\r\n textFields.forEach((textField) => {\r\n textField.removeAttribute(\"readonly\");\r\n });\r\n }}\r\n variant=\"secondary\"\r\n style={{ marginTop: \"var(--ic-space-lg)\" }}\r\n >\r\n Edit\r\n </IcButton>\r\n</ComponentPreview>\r\n",
"path": "/components/data-entity/code",
"date": "2024-05-31",
"title": "Data entity",
@@ -1777,16 +1777,16 @@
}
],
"meta": {
- "relativePath": "components/data-entity/code.mdx",
- "createdAt": "2024-11-06T10:27:49.404Z",
- "lastModified": "2024-11-06T10:19:00.000Z",
- "size": 17951,
- "formattedSize": "17.5 KB"
+ "relativePath": "components\\data-entity\\code.mdx",
+ "createdAt": "2024-12-04T13:23:54.087Z",
+ "lastModified": "2024-12-04T13:23:54.087Z",
+ "size": 18700,
+ "formattedSize": "18.3 KB"
}
},
{
"id": "components\\data-entity\\guidancex",
- "contents": "\nimport { IcDataEntity, IcDataRow } from \"@ukic/react\";\nimport dataEntityFig1 from \"./images/fig-1-assign-interactions-to-individual-rows-within-the-interaction-area,-or-the-full-data-entity-table-by-using-buttons-at-the-end-of-the-table.png\";\nimport dataEntityFig2 from \"./images/fig-2-make-sure-the-data-in-the-cell-displays-in-its-correct-format.png\";\nimport dataEntityFig3 from \"./images/fig-3-do-not-pass-non-text-data-in-a-text-format.png\";\nimport dataEntityFig4 from \"./images/fig-4-set-the-width-of-all-data-entity-tables-on-a-page-to-the-same-size.png\";\nimport dataEntityFig5 from \"./images/fig-5-do-not-set-different-widths-for-different-data-entity-tables.png\";\nimport dataEntityFig6 from \"./images/fig-6-make-sure-that-a-data-entity-table-always-has-a-section-header.png\";\nimport dataEntityFig7 from \"./images/fig-7-do-not-omit-section-headers-from-data-entity-tables.png\";\n\n## Introduction\n\nAn example of the data entity component.\n\n<ComponentPreview>\n <IcDataEntity heading=\"Order details\">\n <IcDataRow label=\"Drink\" value=\"Espresso\" />\n <IcDataRow label=\"Order name\" value=\"Michael\" />\n <IcDataRow label=\"Price\" value=\"£2.80\" />\n </IcDataEntity>\n</ComponentPreview>\n\n## Interaction behaviour\n\nUse the interaction area in a data entity row to provide an action to that row's data. For example, providing an edit link could display an edit screen so that the value can be changed.\n\nTo include interactions that affect the whole data entity, design a pattern using buttons with clear labels.\n\n<DoDontCaution\n imageSrc={dataEntityFig1}\n imageAlt=\"A data entity titled ‘Personal details’ with six rows. The first five include an ‘edit’ link button, while the sixth includes a download icon button. At the end of the data table there are two buttons, one labelled ‘submit’, and the second labelled ‘edit’.\"\n state=\"good\"\n caption=\"Assign interactions to individual rows within the interaction area, or the full data entity by using buttons at the end of the table.\"\n/>\n\n## Content\n\nCells display the following types of data in a specific format:\n\n- Text\n- Numbers\n- Date\n- Telephone\n\n<DoubleDoDontCaution>\n <DoDontCaution\n imageSrc={dataEntityFig2}\n imageAlt=\"A data entity titled ‘details’ with four rows. The first row has a text entry in a text format, the second has a number in a number format, the third has a date in the correct date format, and the fourth has a telephone in the correct telephone format.\"\n state=\"good\"\n caption=\"Make sure the data in the cell displays in its correct format.\"\n />\n <DoDontCaution\n imageSrc={dataEntityFig3}\n imageAlt=\"A data entity titled ‘details’ with four rows. All four rows are displayed in normal text formatting even though they display a date, number and telephone.\"\n state=\"bad\"\n caption=\"Don’t pass non-text data in a text format.\"\n />\n</DoubleDoDontCaution>\n\n## Sizing\n\nWhen multiple data entities are present on a page, make sure to size them all equally.\n\n<DoubleDoDontCaution>\n <DoDontCaution\n imageSrc={dataEntityFig4}\n imageAlt=\"An image of two data entities. The top component, labelled ‘personal details’ is the same width as the bottom one, labelled ‘order details’.\"\n state=\"good\"\n caption=\"Set the width of all data entities on a page to the same size.\"\n />\n <DoDontCaution\n imageSrc={dataEntityFig5}\n imageAlt=\"An image of two data entities. The top component, labelled ‘personal details’ is wider than the bottom one, labelled ‘order details’.\"\n state=\"bad\"\n caption=\"Don’t set different widths for different data entities.\"\n />\n</DoubleDoDontCaution>\n\n## Layout and placement\n\nAlways include a section header, even when using a single row.\n\n<DoubleDoDontCaution>\n <DoDontCaution\n imageSrc={dataEntityFig6}\n imageAlt=\"An image of a data entity titled ‘Payment details’ with three rows.\"\n state=\"good\"\n caption=\"Make sure that a data entity always has a section header.\"\n />\n <DoDontCaution\n imageSrc={dataEntityFig7}\n imageAlt=\"An image of a data entity with three rows, but no title.\"\n state=\"bad\"\n caption=\"Don’t omit section headers from data entities.\"\n />\n</DoubleDoDontCaution>\n",
+ "contents": "\r\nimport { IcDataEntity, IcDataRow } from \"@ukic/react\";\r\nimport dataEntityFig1 from \"./images/fig-1-assign-interactions-to-individual-rows-within-the-interaction-area,-or-the-full-data-entity-table-by-using-buttons-at-the-end-of-the-table.png\";\r\nimport dataEntityFig2 from \"./images/fig-2-make-sure-the-data-in-the-cell-displays-in-its-correct-format.png\";\r\nimport dataEntityFig3 from \"./images/fig-3-do-not-pass-non-text-data-in-a-text-format.png\";\r\nimport dataEntityFig4 from \"./images/fig-4-set-the-width-of-all-data-entity-tables-on-a-page-to-the-same-size.png\";\r\nimport dataEntityFig5 from \"./images/fig-5-do-not-set-different-widths-for-different-data-entity-tables.png\";\r\nimport dataEntityFig6 from \"./images/fig-6-make-sure-that-a-data-entity-table-always-has-a-section-header.png\";\r\nimport dataEntityFig7 from \"./images/fig-7-do-not-omit-section-headers-from-data-entity-tables.png\";\r\n\r\n## Introduction\r\n\r\nAn example of the data entity component.\r\n\r\n<ComponentPreview>\r\n <IcDataEntity heading=\"Order details\">\r\n <IcDataRow label=\"Drink\" value=\"Espresso\" />\r\n <IcDataRow label=\"Order name\" value=\"Michael\" />\r\n <IcDataRow label=\"Price\" value=\"£2.80\" />\r\n </IcDataEntity>\r\n</ComponentPreview>\r\n\r\n## Interaction behaviour\r\n\r\nUse the interaction area in a data entity row to provide an action to that row's data. For example, providing an edit link could display an edit screen so that the value can be changed.\r\n\r\nTo include interactions that affect the whole data entity, design a pattern using buttons with clear labels.\r\n\r\n<DoDontCaution\r\n imageSrc={dataEntityFig1}\r\n imageAlt=\"A data entity titled ‘Personal details’ with six rows. The first five include an ‘edit’ link button, while the sixth includes a download icon button. At the end of the data table there are two buttons, one labelled ‘submit’, and the second labelled ‘edit’.\"\r\n state=\"good\"\r\n caption=\"Assign interactions to individual rows within the interaction area, or the full data entity by using buttons at the end of the table.\"\r\n/>\r\n\r\n## Content\r\n\r\nCells display the following types of data in a specific format:\r\n\r\n- Text\r\n- Numbers\r\n- Date\r\n- Telephone\r\n\r\n<DoubleDoDontCaution>\r\n <DoDontCaution\r\n imageSrc={dataEntityFig2}\r\n imageAlt=\"A data entity titled ‘details’ with four rows. The first row has a text entry in a text format, the second has a number in a number format, the third has a date in the correct date format, and the fourth has a telephone in the correct telephone format.\"\r\n state=\"good\"\r\n caption=\"Make sure the data in the cell displays in its correct format.\"\r\n />\r\n <DoDontCaution\r\n imageSrc={dataEntityFig3}\r\n imageAlt=\"A data entity titled ‘details’ with four rows. All four rows are displayed in normal text formatting even though they display a date, number and telephone.\"\r\n state=\"bad\"\r\n caption=\"Don’t pass non-text data in a text format.\"\r\n />\r\n</DoubleDoDontCaution>\r\n\r\n## Sizing\r\n\r\nWhen multiple data entities are present on a page, make sure to size them all equally.\r\n\r\n<DoubleDoDontCaution>\r\n <DoDontCaution\r\n imageSrc={dataEntityFig4}\r\n imageAlt=\"An image of two data entities. The top component, labelled ‘personal details’ is the same width as the bottom one, labelled ‘order details’.\"\r\n state=\"good\"\r\n caption=\"Set the width of all data entities on a page to the same size.\"\r\n />\r\n <DoDontCaution\r\n imageSrc={dataEntityFig5}\r\n imageAlt=\"An image of two data entities. The top component, labelled ‘personal details’ is wider than the bottom one, labelled ‘order details’.\"\r\n state=\"bad\"\r\n caption=\"Don’t set different widths for different data entities.\"\r\n />\r\n</DoubleDoDontCaution>\r\n\r\n## Layout and placement\r\n\r\nAlways include a section header, even when using a single row.\r\n\r\n<DoubleDoDontCaution>\r\n <DoDontCaution\r\n imageSrc={dataEntityFig6}\r\n imageAlt=\"An image of a data entity titled ‘Payment details’ with three rows.\"\r\n state=\"good\"\r\n caption=\"Make sure that a data entity always has a section header.\"\r\n />\r\n <DoDontCaution\r\n imageSrc={dataEntityFig7}\r\n imageAlt=\"An image of a data entity with three rows, but no title.\"\r\n state=\"bad\"\r\n caption=\"Don’t omit section headers from data entities.\"\r\n />\r\n</DoubleDoDontCaution>\r\n",
"path": "/components/data-entity",
"navPriority": 12,
"date": "2023-02-03",
@@ -1809,16 +1809,16 @@
}
],
"meta": {
- "relativePath": "components/data-entity/guidance.mdx",
- "createdAt": "2024-11-06T10:27:49.404Z",
- "lastModified": "2024-11-06T10:19:00.000Z",
- "size": 4762,
- "formattedSize": "4.7 KB"
+ "relativePath": "components\\data-entity\\guidance.mdx",
+ "createdAt": "2024-12-04T13:23:54.087Z",
+ "lastModified": "2024-12-04T13:23:54.087Z",
+ "size": 4880,
+ "formattedSize": "4.8 KB"
}
},
{
"id": "components\\data-table\\codex",
- "contents": "\nimport { IcDataTable, IcDataTableTitleBar } from \"@ukic/canary-react\";\nimport {\n IcEmptyState,\n IcButton,\n IcLink,\n SlottedSVG,\n IcTypography,\n} from \"@ukic/react\";\nimport { useRef } from \"react\";\nimport { mdiImage, mdiCakeVariantOutline } from \"@mdi/js\";\nimport {\n COLUMNS,\n DATA,\n LONG_COLUMNS,\n LONG_DATA,\n ROW_HEADER_COLUMNS,\n ROW_HEADER_DATA,\n COLUMN_OVERRIDES,\n ROW_OVERRIDES_DATA,\n CELL_OVERRIDES_DATA,\n COLUMNS_ELEMENTS,\n DATA_ELEMENTS,\n ICON_COLUMNS,\n ICON_DATA,\n LOADING_DATA,\n TRUNCATION_COLUMNS,\n TRUNCATION_DATA,\n} from \"./story-data\";\n\n## Component demo\n\nexport const snippetsDefault = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-data-table caption=\"Basic Table\"></ic-data-table>`,\n long: `{shortCode}\n<script>\n const dataTable = document.querySelector(\"ic-data-table\");\n const columns = [\n {\n key: \"firstName\",\n title: \"First name\",\n // dataType types: \"string\" | \"number\" | \"address\" | \"element\" | \"date\";\n dataType: \"string\",\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n ];\n const data = [\n {\n firstName: \"Joe\",\n lastName: \"Bloggs\",\n age: 30,\n },\n {\n firstName: \"Sarah\",\n lastName: \"Smith\",\n age: 28,\n },\n {\n firstName: \"Mark\",\n lastName: \"Owens\",\n age: 45,\n },\n ];\n dataTable.columns = columns;\n dataTable.data = data;\n</script>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcDataTable caption=\"Basic\" columns={columns} data={data} />`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const columns: IcDataTableColumnObject[] = [\n {\n key: \"firstName\",\n title: \"First name\",\n dataType: \"string\",\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n];\nconst data = [\n {\n firstName: \"Joe\",\n lastName: \"Bloggs\",\n age: 30,\n },\n {\n firstName: \"Sarah\",\n lastName: \"Smith\",\n age: 28,\n },\n {\n firstName: \"Mark\",\n lastName: \"Owens\",\n age: 45,\n },\n];\nreturn (\n {shortCode}\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const columns = [\n {\n key: \"firstName\",\n title: \"First name\",\n dataType: \"string\",\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n];\nconst data = [\n {\n firstName: \"Joe\",\n lastName: \"Bloggs\",\n age: 30,\n },\n {\n firstName: \"Sarah\",\n lastName: \"Smith\",\n age: 28,\n },\n {\n firstName: \"Mark\",\n lastName: \"Owens\",\n age: 45,\n },\n];\nreturn (\n {shortCode}\n)`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={snippetsDefault}>\n <IcDataTable caption=\"Basic\" columns={COLUMNS} data={DATA} />\n</ComponentPreview>\n\n## Data table details\n\n<ComponentDetails component=\"ic-data-table\" canary />\n\n## Variants\n\n### Embedded\n\nexport const snippetsEmbedded = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-data-table caption=\"Embedded Table\" embedded=\"true\"></ic-data-table>`,\n long: `{shortCode}\n<script>\n const dataTable = document.querySelector(\"ic-data-table\");\n const columns = [\n {\n key: \"firstName\",\n title: \"First name\",\n // dataType types: \"string\" | \"number\" | \"address\" | \"element\" | \"date\";\n dataType: \"string\",\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n ];\n const data = [\n {\n firstName: \"Joe\",\n lastName: \"Bloggs\",\n age: 30,\n },\n {\n firstName: \"Sarah\",\n lastName: \"Smith\",\n age: 28,\n },\n {\n firstName: \"Mark\",\n lastName: \"Owens\",\n age: 45,\n },\n ];\n dataTable.columns = columns;\n dataTable.data = data;\n</script>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcDataTable\n caption=\"Embedded\"\n columns={columns}\n data={data}\n embedded\n/>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const columns: IcDataTableColumnObject[] = [\n {\n key: \"firstName\",\n title: \"First name\",\n dataType: \"string\",\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n];\nconst data = [\n {\n firstName: \"Joe\",\n lastName: \"Bloggs\",\n age: 30,\n },\n {\n firstName: \"Sarah\",\n lastName: \"Smith\",\n age: 28,\n },\n {\n firstName: \"Mark\",\n lastName: \"Owens\",\n age: 45,\n },\n];\nreturn (\n {shortCode}\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const columns = [\n {\n key: \"firstName\",\n title: \"First name\",\n dataType: \"string\",\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n];\nconst data = [\n {\n firstName: \"Joe\",\n lastName: \"Bloggs\",\n age: 30,\n },\n {\n firstName: \"Sarah\",\n lastName: \"Smith\",\n age: 28,\n },\n {\n firstName: \"Mark\",\n lastName: \"Owens\",\n age: 45,\n },\n];\nreturn (\n {shortCode}\n)`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={snippetsEmbedded}>\n <IcDataTable caption=\"Embedded\" columns={COLUMNS} data={DATA} embedded />\n</ComponentPreview>\n\n### Dense\n\nexport const snippetsDense = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-data-table caption=\"Dense Table\" density=\"dense\"></ic-data-table>`,\n long: `{shortCode}\n<script>\n const dataTable = document.querySelector(\"ic-data-table\");\n const columns = [\n {\n key: \"firstName\",\n title: \"First name\",\n // dataType types: \"string\" | \"number\" | \"address\" | \"element\" | \"date\";\n dataType: \"string\",\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n ];\n const data = [\n {\n firstName: \"Joe\",\n lastName: \"Bloggs\",\n age: 30,\n },\n {\n firstName: \"Sarah\",\n lastName: \"Smith\",\n age: 28,\n },\n {\n firstName: \"Mark\",\n lastName: \"Owens\",\n age: 45,\n },\n ];\n dataTable.columns = columns;\n dataTable.data = data;\n</script>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcDataTable\n caption=\"Dense\"\n columns={columns}\n data={data}\n density=\"dense\"\n/>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const columns: IcDataTableColumnObject[] = [\n {\n key: \"firstName\",\n title: \"First name\",\n dataType: \"string\",\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n];\nconst data = [\n {\n firstName: \"Joe\",\n lastName: \"Bloggs\",\n age: 30,\n },\n {\n firstName: \"Sarah\",\n lastName: \"Smith\",\n age: 28,\n },\n {\n firstName: \"Mark\",\n lastName: \"Owens\",\n age: 45,\n },\n];\nreturn (\n {shortCode}\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const columns = [\n {\n key: \"firstName\",\n title: \"First name\",\n dataType: \"string\",\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n];\nconst data = [\n {\n firstName: \"Joe\",\n lastName: \"Bloggs\",\n age: 30,\n },\n {\n firstName: \"Sarah\",\n lastName: \"Smith\",\n age: 28,\n },\n {\n firstName: \"Mark\",\n lastName: \"Owens\",\n age: 45,\n },\n];\nreturn (\n {shortCode}\n)`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={snippetsDense}>\n <IcDataTable caption=\"Dense\" columns={COLUMNS} data={DATA} density=\"dense\" />\n</ComponentPreview>\n\n### Spacious\n\nexport const snippetsSpacious = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-data-table caption=\"Spacious Table\" density=\"spacious\"></ic-data-table>`,\n long: `{shortCode}\n<script>\n const dataTable = document.querySelector(\"ic-data-table\");\n const columns = [\n {\n key: \"firstName\",\n title: \"First name\",\n // dataType types: \"string\" | \"number\" | \"address\" | \"element\" | \"date\";\n dataType: \"string\",\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n ];\n const data = [\n {\n firstName: \"Joe\",\n lastName: \"Bloggs\",\n age: 30,\n },\n {\n firstName: \"Sarah\",\n lastName: \"Smith\",\n age: 28,\n },\n {\n firstName: \"Mark\",\n lastName: \"Owens\",\n age: 45,\n },\n ];\n dataTable.columns = columns;\n dataTable.data = data;\n</script>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcDataTable\n caption=\"Spacious\"\n columns={columns}\n data={data}\n density=\"spacious\"\n/>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const columns: IcDataTableColumnObject[] = [\n {\n key: \"firstName\",\n title: \"First name\",\n dataType: \"string\",\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n];\nconst data = [\n {\n firstName: \"Joe\",\n lastName: \"Bloggs\",\n age: 30,\n },\n {\n firstName: \"Sarah\",\n lastName: \"Smith\",\n age: 28,\n },\n {\n firstName: \"Mark\",\n lastName: \"Owens\",\n age: 45,\n },\n];\nreturn (\n {shortCode}\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const columns = [\n {\n key: \"firstName\",\n title: \"First name\",\n dataType: \"string\",\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n];\nconst data = [\n {\n firstName: \"Joe\",\n lastName: \"Bloggs\",\n age: 30,\n },\n {\n firstName: \"Sarah\",\n lastName: \"Smith\",\n age: 28,\n },\n {\n firstName: \"Mark\",\n lastName: \"Owens\",\n age: 45,\n },\n];\nreturn (\n {shortCode}\n)`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={snippetsSpacious}>\n <IcDataTable\n caption=\"Spacious\"\n columns={COLUMNS}\n data={DATA}\n density=\"spacious\"\n />\n</ComponentPreview>\n\n### Sticky column headers\n\nexport const snippetsStickyColumnHeaders = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-data-table\n caption=\"Sticky header Table\"\n sticky-column-headers=\"true\"\n></ic-data-table>`,\n long: `ic-data-table {\n height: 9.375rem;\n }\n</style>\n<body>\n {shortCode}\n <script>\n const dataTable = document.querySelector(\"ic-data-table\");\n const long_columns = [\n {\n key: \"employeeNumber\",\n title: \"Employee number\",\n dataType: \"number\",\n columnAlignment: { horizontal: \"left\" },\n },\n {\n key: \"name\",\n title: \"Name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n ];\n const long_data = [\n {\n employeeNumber: 1,\n name: \"Joe Bloggs\",\n age: 30,\n },\n {\n employeeNumber: 2,\n name: \"Sarah Jones\",\n age: 28,\n },\n {\n employeeNumber: 3,\n name: \"Mark Owens\",\n age: 45,\n },\n {\n employeeNumber: 4,\n name: \"Naomi Thomas\",\n age: 32,\n },\n {\n employeeNumber: 5,\n name: \"Luke Ashford\",\n age: 18,\n },\n {\n employeeNumber: 6,\n name: \"Dave Smith\",\n age: 33,\n },\n {\n employeeNumber: 7,\n name: \"Amy Fox\",\n age: 27,\n },\n {\n employeeNumber: 8,\n name: \"Mary Cooper\",\n age: 31,\n },\n {\n employeeNumber: 9,\n name: \"Alice Cole\",\n age: 38,\n },\n {\n employeeNumber: 10,\n name: \"Ben Fields\",\n age: 40,\n },\n {\n employeeNumber: 11,\n name: \"Pete Norton\",\n age: 32,\n },\n {\n employeeNumber: 12,\n name: \"Ashley Langford\",\n age: 29,\n },\n {\n employeeNumber: 13,\n name: \"Michael Hall\",\n age: 35,\n },\n {\n employeeNumber: 14,\n name: \"David Frank\",\n age: 28,\n },\n {\n employeeNumber: 15,\n name: \"Mary Lincoln\",\n age: 23,\n },\n {\n employeeNumber: 16,\n name: \"Will Barns\",\n age: 36,\n },\n {\n employeeNumber: 17,\n name: \"Elizabeth Long\",\n age: 43,\n },\n {\n employeeNumber: 18,\n name: \"Keith Jones\",\n age: 37,\n },\n {\n employeeNumber: 19,\n name: \"Olivia Brown\",\n age: 19,\n },\n {\n employeeNumber: 20,\n name: \"Tim Green\",\n age: 50,\n },\n ];\n dataTable.columns = long_columns;\n dataTable.data = long_data;\n </script>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcDataTable\n className={classes.dataTable}\n caption=\"Sticky Column Headers\"\n columns={long_columns}\n data={long_data}\n stickyColumnHeaders\n ref={dataTableEl}\n/>`,\n long: [\n {\n language: \"Typescript\",\n snippet: ` const dataTableEl = useRef(null);\nconst stickHeader = (sticky: boolean) => {\n dataTableEl.current.stickyColumnHeaders = sticky;\n};\nconst long_columns: IcDataTableColumnObject[] = [\n {\n key: \"employeeNumber\",\n title: \"Employee number\",\n dataType: \"number\",\n columnAlignment: { horizontal: \"left\" },\n },\n {\n key: \"name\",\n title: \"Name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n];\nconst long_data = [\n {\n employeeNumber: 1,\n name: \"Joe Bloggs\",\n age: 30,\n },\n {\n employeeNumber: 2,\n name: \"Sarah Jones\",\n age: 28,\n },\n {\n employeeNumber: 3,\n name: \"Mark Owens\",\n age: 45,\n },\n {\n employeeNumber: 4,\n name: \"Naomi Thomas\",\n age: 32,\n },\n {\n employeeNumber: 5,\n name: \"Luke Ashford\",\n age: 18,\n },\n {\n employeeNumber: 6,\n name: \"Dave Smith\",\n age: 33,\n },\n {\n employeeNumber: 7,\n name: \"Amy Fox\",\n age: 27,\n },\n {\n employeeNumber: 8,\n name: \"Mary Cooper\",\n age: 31,\n },\n {\n employeeNumber: 9,\n name: \"Alice Cole\",\n age: 38,\n },\n {\n employeeNumber: 10,\n name: \"Ben Fields\",\n age: 40,\n },\n {\n employeeNumber: 11,\n name: \"Pete Norton\",\n age: 32,\n },\n {\n employeeNumber: 12,\n name: \"Ashley Langford\",\n age: 29,\n },\n {\n employeeNumber: 13,\n name: \"Michael Hall\",\n age: 35,\n },\n {\n employeeNumber: 14,\n name: \"David Frank\",\n age: 28,\n },\n {\n employeeNumber: 15,\n name: \"Mary Lincoln\",\n age: 23,\n },\n {\n employeeNumber: 16,\n name: \"Will Barns\",\n age: 36,\n },\n {\n employeeNumber: 17,\n name: \"Elizabeth Long\",\n age: 43,\n },\n {\n employeeNumber: 18,\n name: \"Keith Jones\",\n age: 37,\n },\n {\n employeeNumber: 19,\n name: \"Olivia Brown\",\n age: 19,\n },\n {\n employeeNumber: 20,\n name: \"Tim Green\",\n age: 50,\n },\n];\nconst useStyles = createUseStyles({\n dataTable: {\n height: \"18.75rem\",\n },\n});\nconst classes = useStyles();\nreturn (\n <>\n {shortCode}\n <IcButton onClick={() => stickHeader(true)}>Stick Header</IcButton>\n <IcButton onClick={() => stickHeader(false)}>Unstick Header</IcButton>\n </>\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const dataTableEl = useRef(null);\nconst stickHeader = (sticky) => {\n dataTableEl.current.stickyColumnHeaders = sticky;\n};\nconst long_columns = [\n {\n key: \"employeeNumber\",\n title: \"Employee number\",\n dataType: \"number\",\n columnAlignment: { horizontal: \"left\" },\n },\n {\n key: \"name\",\n title: \"Name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n];\nconst long_data = [\n {\n employeeNumber: 1,\n name: \"Joe Bloggs\",\n age: 30,\n },\n {\n employeeNumber: 2,\n name: \"Sarah Jones\",\n age: 28,\n },\n {\n employeeNumber: 3,\n name: \"Mark Owens\",\n age: 45,\n },\n {\n employeeNumber: 4,\n name: \"Naomi Thomas\",\n age: 32,\n },\n {\n employeeNumber: 5,\n name: \"Luke Ashford\",\n age: 18,\n },\n {\n employeeNumber: 6,\n name: \"Dave Smith\",\n age: 33,\n },\n {\n employeeNumber: 7,\n name: \"Amy Fox\",\n age: 27,\n },\n {\n employeeNumber: 8,\n name: \"Mary Cooper\",\n age: 31,\n },\n {\n employeeNumber: 9,\n name: \"Alice Cole\",\n age: 38,\n },\n {\n employeeNumber: 10,\n name: \"Ben Fields\",\n age: 40,\n },\n {\n employeeNumber: 11,\n name: \"Pete Norton\",\n age: 32,\n },\n {\n employeeNumber: 12,\n name: \"Ashley Langford\",\n age: 29,\n },\n {\n employeeNumber: 13,\n name: \"Michael Hall\",\n age: 35,\n },\n {\n employeeNumber: 14,\n name: \"David Frank\",\n age: 28,\n },\n {\n employeeNumber: 15,\n name: \"Mary Lincoln\",\n age: 23,\n },\n {\n employeeNumber: 16,\n name: \"Will Barns\",\n age: 36,\n },\n {\n employeeNumber: 17,\n name: \"Elizabeth Long\",\n age: 43,\n },\n {\n employeeNumber: 18,\n name: \"Keith Jones\",\n age: 37,\n },\n {\n employeeNumber: 19,\n name: \"Olivia Brown\",\n age: 19,\n },\n {\n employeeNumber: 20,\n name: \"Tim Green\",\n age: 50,\n },\n];\nconst useStyles = createUseStyles({\n dataTable: {\n height: \"18.75rem\",\n },\n});\nconst classes = useStyles();\nreturn (\n <>\n {shortCode}\n <IcButton onClick={() => stickHeader(true)}>Stick Header</IcButton>\n <IcButton onClick={() => stickHeader(false)}>Unstick Header</IcButton>\n </>\n)`,\n },\n ],\n },\n },\n];\n\nexport const StickyColumnHeaders = () => {\n const dataTableEl = useRef(null);\n const stickHeader = (sticky) => {\n dataTableEl.current.stickyColumnHeaders = sticky;\n };\n return (\n <>\n <IcDataTable\n style={{ height: \"18.75rem\" }}\n ref={dataTableEl}\n caption=\"Sticky Column Headers\"\n columns={LONG_COLUMNS}\n data={LONG_DATA}\n />\n <IcButton onClick={() => stickHeader(true)}>Stick Header</IcButton>\n <IcButton onClick={() => stickHeader(false)}>Unstick Header</IcButton>\n </>\n );\n};\n\n<ComponentPreview snippets={snippetsStickyColumnHeaders}>\n <StickyColumnHeaders />\n</ComponentPreview>\n\n### Row headers\n\nexport const snippetsRowHeaders = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-data-table caption=\"Row headers\"></ic-data-table>`,\n long: `{shortCode}\n<script>\n const dataTable = document.querySelector(\"ic-data-table\");\n const columns = [\n {\n key: \"header\",\n title: \"Job type\",\n dataType: \"string\",\n },\n {\n key: \"firstName\",\n title: \"First name\",\n dataType: \"string\",\n },\n ];\n const data = [\n {\n // Each data row requires a 'header' key/value pair like below\n header: { title: 'Employee' },\n firstName: \"Joe\",\n lastName: \"Bloggs\",\n age: 30,\n },\n ];\n dataTable.columns = columns;\n dataTable.data = data;\n</script>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcDataTable\n caption=\"Row Headers\"\n columns={columns}\n data={data}\n />`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const columns: IcDataTableColumnObject[] = [\n {\n key: \"firstName\",\n title: \"First name\",\n // dataType types: \"string\" | \"number\" | \"address\" | \"element\" | \"date\";\n dataType: \"string\",\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n];\nconst data = [\n {\n firstName: \"Joe\",\n lastName: \"Bloggs\",\n age: 30,\n },\n {\n firstName: \"Sarah\",\n lastName: \"Smith\",\n age: 28,\n },\n {\n firstName: \"Mark\",\n lastName: \"Owens\",\n age: 45,\n },\n];\nreturn (\n {shortCode}\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const columns = [\n {\n key: \"firstName\",\n title: \"First name\",\n // dataType types: \"string\" | \"number\" | \"address\" | \"element\" | \"date\";\n dataType: \"string\",\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n];\nconst data = [\n {\n firstName: \"Joe\",\n lastName: \"Bloggs\",\n age: 30,\n },\n {\n firstName: \"Sarah\",\n lastName: \"Smith\",\n age: 28,\n },\n {\n firstName: \"Mark\",\n lastName: \"Owens\",\n age: 45,\n },\n];\nreturn (\n {shortCode}\n)`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={snippetsRowHeaders}>\n <IcDataTable\n caption=\"Row Headers\"\n columns={ROW_HEADER_COLUMNS}\n data={ROW_HEADER_DATA}\n />\n</ComponentPreview>\n\n### Sortable\n\nexport const snippetsSortable = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-data-table caption=\"Sort\" sortable=\"true\"></ic-data-table>`,\n long: `{shortCode}\n<script>\n const dataTable = document.querySelector(\"ic-data-table\");\n const columns = [\n {\n key: \"firstName\",\n title: \"First name\",\n // dataType types: \"string\" | \"number\" | \"address\" | \"element\" | \"date\";\n dataType: \"string\",\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n ];\n const data = [\n {\n firstName: \"Joe\",\n lastName: \"Bloggs\",\n age: 30,\n },\n {\n firstName: \"Sarah\",\n lastName: \"Smith\",\n age: 28,\n },\n {\n firstName: \"Mark\",\n lastName: \"Owens\",\n age: 45,\n },\n ];\n dataTable.columns = columns;\n dataTable.data = data;\n</script>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcDataTable\n caption=\"Sort\"\n columns={columns}\n data={data}\n sortable\n/>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const columns: IcDataTableColumnObject[] = [\n {\n key: \"firstName\",\n title: \"First name\",\n // dataType types: \"string\" | \"number\" | \"address\" | \"element\" | \"date\";\n dataType: \"string\",\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n];\nconst data = [\n {\n firstName: \"Joe\",\n lastName: \"Bloggs\",\n age: 30,\n },\n {\n firstName: \"Sarah\",\n lastName: \"Smith\",\n age: 28,\n },\n {\n firstName: \"Mark\",\n lastName: \"Owens\",\n age: 45,\n },\n];\nreturn (\n {shortCode}\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const columns = [\n {\n key: \"firstName\",\n title: \"First name\",\n // dataType types: \"string\" | \"number\" | \"address\" | \"element\" | \"date\";\n dataType: \"string\",\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n];\nconst data = [\n {\n firstName: \"Joe\",\n lastName: \"Bloggs\",\n age: 30,\n },\n {\n firstName: \"Sarah\",\n lastName: \"Smith\",\n age: 28,\n },\n {\n firstName: \"Mark\",\n lastName: \"Owens\",\n age: 45,\n },\n];\nreturn (\n {shortCode}\n)`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={snippetsSortable}>\n <IcDataTable caption=\"Sortable\" columns={COLUMNS} data={DATA} sortable />\n</ComponentPreview>\n\n### Sort options\n\nexport const snippetsSortOptions = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-data-table caption=\"Sort Options\" sortable=\"true\"></ic-data-table>`,\n long: `{shortCode}\n<script>\n const dataTable = document.querySelector(\"ic-data-table\");\n dataTable.sortOptions = {\n sortOrders: ['descending', 'unsorted'],\n defaultColumn: 'firstName'\n };\n const columns = [\n {\n key: \"firstName\",\n title: \"First name\",\n // dataType types: \"string\" | \"number\" | \"address\" | \"element\" | \"date\";\n dataType: \"string\",\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n ];\n const data = [\n {\n firstName: \"Joe\",\n lastName: \"Bloggs\",\n age: 30,\n },\n {\n firstName: \"Sarah\",\n lastName: \"Smith\",\n age: 28,\n },\n {\n firstName: \"Mark\",\n lastName: \"Owens\",\n age: 45,\n },\n ];\n dataTable.columns = columns;\n dataTable.data = data;\n</script>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcDataTable\n caption=\"Sort Options\"\n columns={columns}\n data={data}\n sortable\n sortOptions={{\n sortOrders: [\"descending\", \"unsorted\"],\n defaultColumn: \"firstName\",\n }}\n/>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const columns: IcDataTableColumnObject[] = [\n {\n key: \"firstName\",\n title: \"First name\",\n // dataType types: \"string\" | \"number\" | \"address\" | \"element\" | \"date\";\n dataType: \"string\",\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n];\nconst data = [\n {\n firstName: \"Joe\",\n lastName: \"Bloggs\",\n age: 30,\n },\n {\n firstName: \"Sarah\",\n lastName: \"Smith\",\n age: 28,\n },\n {\n firstName: \"Mark\",\n lastName: \"Owens\",\n age: 45,\n },\n];\nreturn (\n {shortCode}\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const columns: IcDataTableColumnObject[] = [\n {\n key: \"firstName\",\n title: \"First name\",\n // dataType types: \"string\" | \"number\" | \"address\" | \"element\" | \"date\";\n dataType: \"string\",\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n];\nconst data = [\n {\n firstName: \"Joe\",\n lastName: \"Bloggs\",\n age: 30,\n },\n {\n firstName: \"Sarah\",\n lastName: \"Smith\",\n age: 28,\n },\n {\n firstName: \"Mark\",\n lastName: \"Owens\",\n age: 45,\n },\n];\nreturn (\n {shortCode}\n)`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={snippetsSortOptions}>\n <IcDataTable\n caption=\"Sort Options\"\n columns={COLUMNS}\n data={DATA}\n sortable\n sortOptions={{\n sortOrders: [\"descending\", \"unsorted\"],\n defaultColumn: \"firstName\",\n }}\n />\n</ComponentPreview>\n\n### Pagination\n\nexport const snippetsPagination = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-data-table caption=\"Pagination\" show-pagination=\"true\"></ic-data-table>`,\n long: `{shortCode}\n<script>\n const dataTable = document.querySelector(\"ic-data-table\");\n dataTable.paginationOptions = {\n itemsPerPage: [\n { label: \"5\", value: \"5\" },\n { label: \"10\", value: \"10\" },\n { label: \"15\", value: \"15\" },\n ],\n itemsPerPageControl: true,\n };\n const long_columns = [\n {\n key: \"employeeNumber\",\n title: \"Employee number\",\n dataType: \"number\",\n columnAlignment: { horizontal: \"left\" },\n },\n {\n key: \"name\",\n title: \"Name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n ];\n const long_data = [\n {\n employeeNumber: 1,\n name: \"Joe Bloggs\",\n age: 30,\n },\n {\n employeeNumber: 2,\n name: \"Sarah Jones\",\n age: 28,\n },\n {\n employeeNumber: 3,\n name: \"Mark Owens\",\n age: 45,\n },\n {\n employeeNumber: 4,\n name: \"Naomi Thomas\",\n age: 32,\n },\n {\n employeeNumber: 5,\n name: \"Luke Ashford\",\n age: 18,\n },\n {\n employeeNumber: 6,\n name: \"Dave Smith\",\n age: 33,\n },\n {\n employeeNumber: 7,\n name: \"Amy Fox\",\n age: 27,\n },\n {\n employeeNumber: 8,\n name: \"Mary Cooper\",\n age: 31,\n },\n {\n employeeNumber: 9,\n name: \"Alice Cole\",\n age: 38,\n },\n {\n employeeNumber: 10,\n name: \"Ben Fields\",\n age: 40,\n },\n {\n employeeNumber: 11,\n name: \"Pete Norton\",\n age: 32,\n },\n {\n employeeNumber: 12,\n name: \"Ashley Langford\",\n age: 29,\n },\n {\n employeeNumber: 13,\n name: \"Michael Hall\",\n age: 35,\n },\n {\n employeeNumber: 14,\n name: \"David Frank\",\n age: 28,\n },\n {\n employeeNumber: 15,\n name: \"Mary Lincoln\",\n age: 23,\n },\n {\n employeeNumber: 16,\n name: \"Will Barns\",\n age: 36,\n },\n {\n employeeNumber: 17,\n name: \"Elizabeth Long\",\n age: 43,\n },\n {\n employeeNumber: 18,\n name: \"Keith Jones\",\n age: 37,\n },\n {\n employeeNumber: 19,\n name: \"Olivia Brown\",\n age: 19,\n },\n {\n employeeNumber: 20,\n name: \"Tim Green\",\n age: 50,\n },\n ];\n dataTable.columns = long_columns;\n dataTable.data = long_data;\n</script>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcDataTable\n caption=\"Pagination\"\n columns={long_columns}\n data={long_data}\n showPagination\n paginationOptions={{\n itemsPerPage: [\n { label: \"5\", value: \"5\" },\n { label: \"10\", value: \"10\" },\n { label: \"15\", value: \"15\" },\n ],\n itemsPerPageControl: true,\n }}\n/>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const long_columns: IcDataTableColumnObject[] = [\n {\n key: \"employeeNumber\",\n title: \"Employee number\",\n dataType: \"number\",\n columnAlignment: { horizontal: \"left\" },\n },\n {\n key: \"name\",\n title: \"Name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n];\nconst long_data = [\n {\n employeeNumber: 1,\n name: \"Joe Bloggs\",\n age: 30,\n },\n {\n employeeNumber: 2,\n name: \"Sarah Jones\",\n age: 28,\n },\n {\n employeeNumber: 3,\n name: \"Mark Owens\",\n age: 45,\n },\n {\n employeeNumber: 4,\n name: \"Naomi Thomas\",\n age: 32,\n },\n {\n employeeNumber: 5,\n name: \"Luke Ashford\",\n age: 18,\n },\n {\n employeeNumber: 6,\n name: \"Dave Smith\",\n age: 33,\n },\n {\n employeeNumber: 7,\n name: \"Amy Fox\",\n age: 27,\n },\n {\n employeeNumber: 8,\n name: \"Mary Cooper\",\n age: 31,\n },\n {\n employeeNumber: 9,\n name: \"Alice Cole\",\n age: 38,\n },\n {\n employeeNumber: 10,\n name: \"Ben Fields\",\n age: 40,\n },\n {\n employeeNumber: 11,\n name: \"Pete Norton\",\n age: 32,\n },\n {\n employeeNumber: 12,\n name: \"Ashley Langford\",\n age: 29,\n },\n {\n employeeNumber: 13,\n name: \"Michael Hall\",\n age: 35,\n },\n {\n employeeNumber: 14,\n name: \"David Frank\",\n age: 28,\n },\n {\n employeeNumber: 15,\n name: \"Mary Lincoln\",\n age: 23,\n },\n {\n employeeNumber: 16,\n name: \"Will Barns\",\n age: 36,\n },\n {\n employeeNumber: 17,\n name: \"Elizabeth Long\",\n age: 43,\n },\n {\n employeeNumber: 18,\n name: \"Keith Jones\",\n age: 37,\n },\n {\n employeeNumber: 19,\n name: \"Olivia Brown\",\n age: 19,\n },\n {\n employeeNumber: 20,\n name: \"Tim Green\",\n age: 50,\n },\n];\nreturn (\n {shortCode}\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const long_columns = [\n {\n key: \"employeeNumber\",\n title: \"Employee number\",\n dataType: \"number\",\n columnAlignment: { horizontal: \"left\" },\n },\n {\n key: \"name\",\n title: \"Name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n];\nconst long_data = [\n {\n employeeNumber: 1,\n name: \"Joe Bloggs\",\n age: 30,\n },\n {\n employeeNumber: 2,\n name: \"Sarah Jones\",\n age: 28,\n },\n {\n employeeNumber: 3,\n name: \"Mark Owens\",\n age: 45,\n },\n {\n employeeNumber: 4,\n name: \"Naomi Thomas\",\n age: 32,\n },\n {\n employeeNumber: 5,\n name: \"Luke Ashford\",\n age: 18,\n },\n {\n employeeNumber: 6,\n name: \"Dave Smith\",\n age: 33,\n },\n {\n employeeNumber: 7,\n name: \"Amy Fox\",\n age: 27,\n },\n {\n employeeNumber: 8,\n name: \"Mary Cooper\",\n age: 31,\n },\n {\n employeeNumber: 9,\n name: \"Alice Cole\",\n age: 38,\n },\n {\n employeeNumber: 10,\n name: \"Ben Fields\",\n age: 40,\n },\n {\n employeeNumber: 11,\n name: \"Pete Norton\",\n age: 32,\n },\n {\n employeeNumber: 12,\n name: \"Ashley Langford\",\n age: 29,\n },\n {\n employeeNumber: 13,\n name: \"Michael Hall\",\n age: 35,\n },\n {\n employeeNumber: 14,\n name: \"David Frank\",\n age: 28,\n },\n {\n employeeNumber: 15,\n name: \"Mary Lincoln\",\n age: 23,\n },\n {\n employeeNumber: 16,\n name: \"Will Barns\",\n age: 36,\n },\n {\n employeeNumber: 17,\n name: \"Elizabeth Long\",\n age: 43,\n },\n {\n employeeNumber: 18,\n name: \"Keith Jones\",\n age: 37,\n },\n {\n employeeNumber: 19,\n name: \"Olivia Brown\",\n age: 19,\n },\n {\n employeeNumber: 20,\n name: \"Tim Green\",\n age: 50,\n },\n];\nreturn (\n {shortCode}\n)`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={snippetsPagination}>\n <IcDataTable\n caption=\"Pagination\"\n columns={LONG_COLUMNS}\n data={LONG_DATA}\n showPagination\n paginationOptions={{\n itemsPerPage: [\n { label: \"5\", value: \"5\" },\n { label: \"10\", value: \"10\" },\n { label: \"15\", value: \"15\" },\n ],\n itemsPerPageControl: true,\n }}\n />\n</ComponentPreview>\n\n### Column overrides\n\nexport const snippetsColumnOverrides = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-data-table caption=\"Column Overrides\"></ic-data-table>`,\n long: `{shortCode}\n<script>\n const dataTable = document.querySelector(\"ic-data-table\");\n const columns = [\n {\n key: \"firstName\",\n title: \"First name\",\n dataType: \"string\",\n columnAlignment: { horizontal: 'center', vertical: 'middle'},\n emphasis: 'high',\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n ];\n const data = [\n {\n firstName: \"Joe\",\n lastName: \"Bloggs\",\n age: 30,\n },\n {\n firstName: \"Sarah\",\n lastName: \"Smith\",\n age: 28,\n },\n {\n firstName: \"Mark\",\n lastName: \"Owens\",\n age: 45,\n },\n ];\n dataTable.columns = columns;\n dataTable.data = data;\n</script>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcDataTable\n caption=\"Column overrides\"\n columns={columns}\n data={data}\n/>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const columns: IcDataTableColumnObject[] = [\n {\n key: \"firstName\",\n title: \"First name\",\n dataType: \"string\",\n columnAlignment: { horizontal: 'center', vertical: 'middle'},\n emphasis: 'high',\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n];\nconst data = [\n {\n firstName: \"Joe\",\n lastName: \"Bloggs\",\n age: 30,\n },\n {\n firstName: \"Sarah\",\n lastName: \"Smith\",\n age: 28,\n },\n {\n firstName: \"Mark\",\n lastName: \"Owens\",\n age: 45,\n },\n];\nreturn (\n {shortCode}\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const columns = [\n {\n key: \"firstName\",\n title: \"First name\",\n dataType: \"string\",\n columnAlignment: { horizontal: 'center', vertical: 'middle'},\n emphasis: 'high',\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n];\nconst data = [\n {\n firstName: \"Joe\",\n lastName: \"Bloggs\",\n age: 30,\n },\n {\n firstName: \"Sarah\",\n lastName: \"Smith\",\n age: 28,\n },\n {\n firstName: \"Mark\",\n lastName: \"Owens\",\n age: 45,\n },\n];\nreturn (\n {shortCode}\n)`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={snippetsColumnOverrides}>\n <IcDataTable\n caption=\"Column overrides\"\n columns={COLUMN_OVERRIDES}\n data={DATA}\n />\n</ComponentPreview>\n\n### Row overrides\n\nexport const snippetsRowOverrides = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-data-table caption=\"Row Overrides\"></ic-data-table>`,\n long: `{shortCode}\n<script>\n const dataTable = document.querySelector(\"ic-data-table\");\n const columns = [\n {\n key: \"header\",\n title: \"Job Title\",\n dataType: \"string\",\n },\n {\n key: \"firstName\",\n title: \"First name\",\n dataType: \"string\",\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n ];\n const data = [\n {\n header: { title: \"Employee\" },\n firstName: \"Joe\",\n lastName: \"Bloggs\",\n age: 30,\n },\n {\n header: { title: \"Employee\" },\n firstName: \"Sarah\",\n lastName: \"Smith\",\n age: 28,\n },\n {\n header: { title: \"Manager\" },\n firstName: \"Mark\",\n lastName: \"Owens\",\n age: 45,\n },\n ];\n dataTable.columns = columns;\n dataTable.data = data;\n</script>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcDataTable\n caption=\"Row overrides\"\n columns={columns}\n data={data}\n/>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const columns: IcDataTableColumnObject[] = [\n {\n key: \"header\",\n title: \"Job Title\",\n dataType: \"string\",\n },\n {\n key: \"firstName\",\n title: \"First name\",\n dataType: \"string\",\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n];\nconst data = [\n {\n header: { title: \"Employee\" },\n firstName: \"Joe\",\n lastName: \"Bloggs\",\n age: 30,\n },\n {\n header: { title: \"Employee\" },\n firstName: \"Sarah\",\n lastName: \"Smith\",\n age: 28,\n },\n {\n header: { title: \"Manager\" },\n firstName: \"Mark\",\n lastName: \"Owens\",\n age: 45,\n },\n];\nreturn (\n {shortCode}\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const columns = [\n {\n key: \"header\",\n title: \"Job Title\",\n dataType: \"string\",\n },\n {\n key: \"firstName\",\n title: \"First name\",\n dataType: \"string\",\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n];\nconst data = [\n {\n header: { title: \"Employee\" },\n firstName: \"Joe\",\n lastName: \"Bloggs\",\n age: 30,\n },\n {\n header: { title: \"Employee\" },\n firstName: \"Sarah\",\n lastName: \"Smith\",\n age: 28,\n },\n {\n header: { title: \"Manager\" },\n firstName: \"Mark\",\n lastName: \"Owens\",\n age: 45,\n },\n];\nreturn (\n {shortCode}\n)`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={snippetsRowOverrides}>\n <IcDataTable\n caption=\"Row overrides\"\n columns={ROW_HEADER_COLUMNS}\n data={ROW_OVERRIDES_DATA}\n />\n</ComponentPreview>\n\n### Cell overrides\n\nexport const snippetsCellOverrides = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-data-table caption=\"Cell Overrides\"></ic-data-table>`,\n long: `{shortCode}\n<script>\n const dataTable = document.querySelector(\"ic-data-table\");\n const columns = [\n {\n key: \"firstName\",\n title: \"First name\",\n // dataType types: \"string\" | \"number\" | \"address\" | \"element\" | \"date\";\n dataType: \"string\",\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n ];\n const data = [\n {\n firstName: {\n data: \"Joe\",\n cellAlignment: { horizontal: \"center\", vertical: \"middle\" },\n emphasis: \"high\",\n },\n lastName: \"Bloggs\",\n age: 30,\n },\n {\n firstName: \"Sarah\",\n lastName: \"Smith\",\n age: 28,\n },\n {\n firstName: \"Mark\",\n lastName: \"Owens\",\n age: 45,\n },\n ];\n dataTable.columns = columns;\n dataTable.data = data;\n</script>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcDataTable\n caption=\"Cell overrides\"\n columns={columns}\n data={data}\n/>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const columns: IcDataTableColumnObject[] = [\n {\n key: \"firstName\",\n title: \"First name\",\n // dataType types: \"string\" | \"number\" | \"address\" | \"element\" | \"date\";\n dataType: \"string\",\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n];\nconst data = [\n {\n firstName: {\n data: \"Joe\",\n cellAlignment: { horizontal: \"center\", vertical: \"middle\" },\n emphasis: \"high\",\n },\n lastName: \"Bloggs\",\n age: 30,\n },\n {\n firstName: \"Sarah\",\n lastName: \"Smith\",\n age: 28,\n },\n {\n firstName: \"Mark\",\n lastName: \"Owens\",\n age: 45,\n },\n];\nreturn (\n {shortCode}\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const columns = [\n {\n key: \"firstName\",\n title: \"First name\",\n // dataType types: \"string\" | \"number\" | \"address\" | \"element\" | \"date\";\n dataType: \"string\",\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n];\nconst data = [\n {\n firstName: {\n data: \"Joe\",\n cellAlignment: { horizontal: \"center\", vertical: \"middle\" },\n emphasis: \"high\",\n },\n lastName: \"Bloggs\",\n age: 30,\n },\n {\n firstName: \"Sarah\",\n lastName: \"Smith\",\n age: 28,\n },\n {\n firstName: \"Mark\",\n lastName: \"Owens\",\n age: 45,\n },\n];\nreturn (\n {shortCode}\n)`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={snippetsCellOverrides}>\n <IcDataTable\n caption=\"Cell overrides\"\n columns={COLUMNS}\n data={CELL_OVERRIDES_DATA}\n />\n</ComponentPreview>\n\n### Default Empty State\n\nexport const snippetsDefaultEmptyState = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-data-table caption=\"Default Empty State\"></ic-data-table>`,\n long: `{shortCode}\n<script>\n const dataTable = document.querySelector(\"ic-data-table\");\n const columns = [\n {\n key: \"firstName\",\n title: \"First name\",\n // dataType types: \"string\" | \"number\" | \"address\" | \"element\" | \"date\";\n dataType: \"string\",\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n ];\n dataTable.columns = columns;\n</script>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcDataTable caption=\"Default Empty State\" columns={columns} />`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const columns: IcDataTableColumnObject[] = [\n {\n key: \"firstName\",\n title: \"First name\",\n // dataType types: \"string\" | \"number\" | \"address\" | \"element\" | \"date\";\n dataType: \"string\",\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n];\nreturn (\n {shortCode}\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const columns = [\n {\n key: \"firstName\",\n title: \"First name\",\n // dataType types: \"string\" | \"number\" | \"address\" | \"element\" | \"date\";\n dataType: \"string\",\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n];\nreturn (\n {shortCode}\n)`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={snippetsDefaultEmptyState}>\n <IcDataTable caption=\"Default Empty State\" columns={COLUMNS} />\n</ComponentPreview>\n\n### Slotted Empty State\n\nexport const snippetsSlottedEmptyState = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-data-table id=\"data-table\" caption=\"Slotted Empty State\">\n <ic-empty-state\n aligned=\"left\"\n heading=\"Data source error\"\n body=\"Error loading new data\"\n >\n <ic-button slot=\"actions\">Retry</ic-button>\n </ic-empty-state>\n</ic-data-table>`,\n long: `{shortCode}\n<script>\n const dataTable = document.querySelector(\"ic-data-table\");\n const columns = [\n {\n key: \"firstName\",\n title: \"First name\",\n // dataType types: \"string\" | \"number\" | \"address\" | \"element\" | \"date\";\n dataType: \"string\",\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n ];\n dataTable.columns = columns;\n</script>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcDataTable\n caption=\"Slotted Empty State\"\n columns={columns}\n>\n <IcEmptyState slot=\"empty-state\" aligned=\"left\" heading=\"Data source error\" body=\"Error loading new data\">\n <IcButton slot=\"actions\">Retry</IcButton>\n </IcEmptyState>\n</IcDataTable>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const columns: IcDataTableColumnObject[] = [\n {\n key: \"firstName\",\n title: \"First name\",\n // dataType types: \"string\" | \"number\" | \"address\" | \"element\" | \"date\";\n dataType: \"string\",\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n];\nreturn (\n {shortCode}\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const columns = [\n {\n key: \"firstName\",\n title: \"First name\",\n // dataType types: \"string\" | \"number\" | \"address\" | \"element\" | \"date\";\n dataType: \"string\",\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n];\nreturn (\n {shortCode}\n)`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={snippetsSlottedEmptyState}>\n <IcDataTable caption=\"Slotted Empty State\" columns={COLUMNS}>\n <IcEmptyState\n slot=\"empty-state\"\n aligned=\"left\"\n heading=\"Data source error\"\n body=\"Error loading new data\"\n >\n <IcButton slot=\"actions\">Retry</IcButton>\n </IcEmptyState>\n </IcDataTable>\n</ComponentPreview>\n\n### Loading state\n\nexport const snippetsLoadingState = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-data-table id=\"data-table\" caption=\"Loading State\"></ic-data-table>`,\n long: `{shortCode}\n<script>\n const dataTable = document.querySelector(\"ic-data-table\");\n const columns = [\n {\n key: \"firstName\",\n title: \"First name\",\n // dataType types: \"string\" | \"number\" | \"address\" | \"element\" | \"date\";\n dataType: \"string\",\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n ];\n const data = [\n {\n firstName: \"Joe\",\n lastName: \"Bloggs\",\n age: 30,\n },\n {\n firstName: \"Sarah\",\n lastName: \"Smith\",\n age: 28,\n },\n {\n firstName: \"Mark\",\n lastName: \"Owens\",\n age: 45,\n },\n {\n firstName: \"Naomi\",\n lastName: \"Thomas\",\n age: 32,\n },\n {\n firstName: \"Luke\",\n lastName: \"Ashford\",\n age: 18,\n },\n ];\n dataTable.columns = columns;\n dataTable.data = data;\n dataTable.loading = true;\n</script>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcDataTable\n caption=\"Loading state\"\n columns={columns}\n data={data}\n loading\n/>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const columns: IcDataTableColumnObject[] = [\n {\n key: \"firstName\",\n title: \"First name\",\n // dataType types: \"string\" | \"number\" | \"address\" | \"element\" | \"date\";\n dataType: \"string\",\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n];\nconst data = [\n {\n firstName: \"Joe\",\n lastName: \"Bloggs\",\n age: 30,\n },\n {\n firstName: \"Sarah\",\n lastName: \"Smith\",\n age: 28,\n },\n {\n firstName: \"Mark\",\n lastName: \"Owens\",\n age: 45,\n },\n {\n firstName: \"Naomi\",\n lastName: \"Thomas\",\n age: 32,\n },\n {\n firstName: \"Luke\",\n lastName: \"Ashford\",\n age: 18,\n },\n];\nreturn (\n {shortCode}\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const columns = [\n {\n key: \"firstName\",\n title: \"First name\",\n // dataType types: \"string\" | \"number\" | \"address\" | \"element\" | \"date\";\n dataType: \"string\",\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n];\nconst data = [\n {\n firstName: \"Joe\",\n lastName: \"Bloggs\",\n age: 30,\n },\n {\n firstName: \"Sarah\",\n lastName: \"Smith\",\n age: 28,\n },\n {\n firstName: \"Mark\",\n lastName: \"Owens\",\n age: 45,\n },\n{\n firstName: \"Naomi\",\n lastName: \"Thomas\",\n age: 32,\n },\n {\n firstName: \"Luke\",\n lastName: \"Ashford\",\n age: 18,\n },\n];\nreturn (\n {shortCode}\n)`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={snippetsLoadingState}>\n <IcDataTable\n caption=\"Loading state\"\n columns={COLUMNS}\n data={LOADING_DATA}\n loading\n style={{ height: \"250px\" }}\n />\n</ComponentPreview>\n\n### Updating state\n\nexport const snippetsUpdatingState = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-data-table id=\"data-table\" caption=\"Updating State\"></ic-data-table>`,\n long: `{shortCode}\n<script>\n const dataTable = document.querySelector(\"ic-data-table\");\n const columns = [\n {\n key: \"firstName\",\n title: \"First name\",\n // dataType types: \"string\" | \"number\" | \"address\" | \"element\" | \"date\";\n dataType: \"string\",\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n ];\n const data = [\n {\n firstName: \"Joe\",\n lastName: \"Bloggs\",\n age: 30,\n },\n {\n firstName: \"Sarah\",\n lastName: \"Smith\",\n age: 28,\n },\n {\n firstName: \"Mark\",\n lastName: \"Owens\",\n age: 45,\n },\n ];\n dataTable.columns = columns;\n dataTable.data = data;\n</script>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcDataTable\n caption=\"Updating state\"\n columns={columns}\n data={data}\n updating\n updatingOptions={{ progress: 30 }}\n/>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const columns: IcDataTableColumnObject[] = [\n {\n key: \"firstName\",\n title: \"First name\",\n // dataType types: \"string\" | \"number\" | \"address\" | \"element\" | \"date\";\n dataType: \"string\",\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n];\nconst data = [\n {\n firstName: \"Joe\",\n lastName: \"Bloggs\",\n age: 30,\n },\n {\n firstName: \"Sarah\",\n lastName: \"Smith\",\n age: 28,\n },\n {\n firstName: \"Mark\",\n lastName: \"Owens\",\n age: 45,\n },\n];\nreturn (\n {shortCode}\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const columns = [\n {\n key: \"firstName\",\n title: \"First name\",\n // dataType types: \"string\" | \"number\" | \"address\" | \"element\" | \"date\";\n dataType: \"string\",\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n];\nconst data = [\n {\n firstName: \"Joe\",\n lastName: \"Bloggs\",\n age: 30,\n },\n {\n firstName: \"Sarah\",\n lastName: \"Smith\",\n age: 28,\n },\n {\n firstName: \"Mark\",\n lastName: \"Owens\",\n age: 45,\n },\n];\nreturn (\n {shortCode}\n)`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={snippetsUpdatingState}>\n <IcDataTable\n caption=\"Updating state\"\n columns={COLUMNS}\n data={DATA}\n updating\n updatingOptions={{ progress: 30 }}\n />\n</ComponentPreview>\n\n### Links and Elements in data\n\nexport const snippetsElements = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-data-table caption=\"Links and Elements in data\"></ic-data-table>`,\n long: `{shortCode}\n<script>\n const dataTable = document.querySelector(\"ic-data-table\");\n const columns = [\n {\n key: \"firstName\",\n title: \"First name\",\n dataType: \"string\",\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n {\n key: \"actions\",\n title: \"Actions\",\n dataType: \"element\",\n columnAlignment: { horizontal: \"center\" },\n },\n ];\n const data = [\n {\n firstName: {\n data: \"Joe\",\n href: \"#\",\n },\n lastName: \"Bloggs\",\n age: 30,\n actions: \\`<ic-button variant='destructive' onClick='this.closest(\"tr\").remove()'>Delete</ic-button>\\`,\n },\n {\n firstName: 'Sarah',\n lastName: 'Smith',\n age: 28,\n actions: \\`<ic-button variant='destructive' onClick='this.closest(\"tr\").remove()'>Delete</ic-button>\\`,\n },\n {\n firstName: 'Mark',\n lastName: 'Owens',\n age: 45,\n actions: \\`<ic-button variant='destructive' onClick='this.closest(\"tr\").remove()'>Delete</ic-button>\\`,\n },\n ];\n dataTable.columns = columns;\n dataTable.data = data;\n</script>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcDataTable\n caption=\"Links and Elements in data\"\n columns={columns}\n data={data}\n>\n {data.map((_, index) => (\n <IcButton\n key={index}\n slot={\\`actions-\\${index}\\`}\n variant=\"destructive\"\n onClick={() => _.closest('Delete')}\n >\n Delete\n </IcButton>\n ))}\n</IcDataTable>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const columns: IcDataTableColumnObject[] = [\n {\n key: \"firstName\",\n title: \"First name\",\n dataType: \"string\",\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n {\n key: \"actions\",\n title: \"Actions\",\n dataType: \"element\",\n columnAlignment: { horizontal: \"center\" },\n },\n];\nconst data = [\n {\n firstName: {\n data: \"Joe\",\n href: \"#\",\n },\n lastName: \"Bloggs\",\n age: 30,\n },\n {\n firstName: 'Sarah',\n lastName: 'Smith',\n age: 28,\n },\n {\n firstName: 'Mark',\n lastName: 'Owens',\n age: 45,\n },\n];\nreturn (\n {shortCode}\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const columns = [\n {\n key: \"firstName\",\n title: \"First name\",\n dataType: \"string\",\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n {\n key: \"actions\",\n title: \"Actions\",\n dataType: \"element\",\n columnAlignment: { horizontal: \"center\" },\n },\n];\nconst data = [\n {\n firstName: {\n data: \"Joe\",\n href: \"#\",\n },\n lastName: \"Bloggs\",\n age: 30,\n },\n {\n firstName: 'Sarah',\n lastName: 'Smith',\n age: 28,\n },\n {\n firstName: 'Mark',\n lastName: 'Owens',\n age: 45,\n },\n];\nreturn (\n {shortCode}\n)`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={snippetsElements}>\n <IcDataTable\n caption=\"Links and Elements in data\"\n columns={COLUMNS_ELEMENTS}\n data={DATA_ELEMENTS}\n >\n {DATA_ELEMENTS.map((_, index) => (\n <IcButton\n // eslint-disable-next-line react/no-array-index-key\n key={`actions-${index}`}\n slot={`actions-${index}`}\n variant=\"destructive\"\n onClick={() => console.log(\"Delete\")}\n >\n Delete\n </IcButton>\n ))}\n </IcDataTable>\n</ComponentPreview>\n\n### Custom icons\n\nexport const snippetsCustomIcons = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-data-table id=\"data-table\" caption=\"Custom Icons\">\n <svg\n slot=\"age-column-icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n >\n <path\n d=\"M12 6C13.11 6 14 5.1 14 4C14 3.62 13.9 3.27 13.71 2.97L12 0L10.29 2.97C10.1 3.27 10 3.62 10 4C10 5.1 10.9 6 12 6M18 9H13V7H11V9H6C4.34 9 3 10.34 3 12V21C3 21.55 3.45 22 4 22H20C20.55 22 21 21.55 21 21V12C21 10.34 19.66 9 18 9M19 20H5V17C5.9 17 6.76 16.63 7.4 16L8.5 14.92L9.56 16C10.87 17.3 13.15 17.29 14.45 16L15.53 14.92L16.6 16C17.24 16.63 18.1 17 19 17V20M19 15.5C18.5 15.5 18 15.3 17.65 14.93L15.5 12.8L13.38 14.93C12.64 15.67 11.35 15.67 10.61 14.93L8.5 12.8L6.34 14.93C6 15.29 5.5 15.5 5 15.5V12C5 11.45 5.45 11 6 11H18C18.55 11 19 11.45 19 12V15.5Z\"\n />\n </svg>\n</ic-data-table>`,\n long: `{shortCode}\n<script>\n const dataTable = document.querySelector(\"ic-data-table\");\n const accountSVG = \\`<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path d=\"M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z\" /></svg>\\`;\n const columns = [\n {\n key: \"firstName\",\n title: \"First name\",\n dataType: \"string\",\n cellAlignment: \"right\",\n columnAlignment: { horizontal: \"right\", vertical: \"middle\" },\n icon: {\n icon: \\`<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path d=\"M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,6A2,2 0 0,0 10,8A2,2 0 0,0 12,10A2,2 0 0,0 14,8A2,2 0 0,0 12,6M12,13C14.67,13 20,14.33 20,17V20H4V17C4,14.33 9.33,13 12,13M12,14.9C9.03,14.9 5.9,16.36 5.9,17V18.1H18.1V17C18.1,16.36 14.97,14.9 12,14.9Z\" /></svg>\\`,\n onAllCells: true,\n hideOnHeader: true,\n },\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n cellAlignment: \"center\",\n columnAlignment: { horizontal: \"center\", vertical: \"bottom\" },\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n ];\n const data = [\n {\n firstName: {\n data: \"Joe\",\n icon: accountSVG,\n },\n lastName: \"Bloggs\",\n age: 30,\n },\n {\n firstName: \"Sarah\",\n lastName: \"Smith\",\n age: 28,\n },\n {\n firstName: {\n data: \"Mark\",\n icon: accountSVG,\n },\n lastName: \"Owens\",\n age: 45,\n },\n ];\n dataTable.columns = columns;\n dataTable.data = data;\n</script>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcDataTable caption=\"Custom icons\" columns={columns} data={data}>\n <SlottedSVG slot=\"age-column-icon\" path={mdiCakeVariantOutline} />\n</IcDataTable>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const accountSVG = \\`<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path d=\"M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z\" /></svg>\\`;\nconst columns: IcDataTableColumnObject[] = [\n {\n key: \"firstName\",\n title: \"First name\",\n dataType: \"string\",\n cellAlignment: \"right\",\n columnAlignment: { horizontal: \"right\", vertical: \"middle\" },\n icon: {\n icon: \\`<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path d=\"M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,6A2,2 0 0,0 10,8A2,2 0 0,0 12,10A2,2 0 0,0 14,8A2,2 0 0,0 12,6M12,13C14.67,13 20,14.33 20,17V20H4V17C4,14.33 9.33,13 12,13M12,14.9C9.03,14.9 5.9,16.36 5.9,17V18.1H18.1V17C18.1,16.36 14.97,14.9 12,14.9Z\" /></svg>\\`,\n onAllCells: true,\n hideOnHeader: true,\n },\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n cellAlignment: \"center\",\n columnAlignment: { horizontal: \"center\", vertical: \"bottom\" },\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n];\nconst data = [\n {\n firstName: {\n data: \"Joe\",\n icon: accountSVG,\n },\n lastName: \"Bloggs\",\n age: 30,\n },\n {\n firstName: \"Sarah\",\n lastName: \"Smith\",\n age: 28,\n },\n {\n firstName: {\n data: \"Mark\",\n icon: accountSVG,\n },\n lastName: \"Owens\",\n age: 45,\n },\n];\nreturn (\n {shortCode}\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const accountSVG = \\`<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path d=\"M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z\" /></svg>\\`;\nconst columns = [\n {\n key: \"firstName\",\n title: \"First name\",\n dataType: \"string\",\n cellAlignment: \"right\",\n columnAlignment: { horizontal: \"right\", vertical: \"middle\" },\n icon: {\n icon: \\`<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path d=\"M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,6A2,2 0 0,0 10,8A2,2 0 0,0 12,10A2,2 0 0,0 14,8A2,2 0 0,0 12,6M12,13C14.67,13 20,14.33 20,17V20H4V17C4,14.33 9.33,13 12,13M12,14.9C9.03,14.9 5.9,16.36 5.9,17V18.1H18.1V17C18.1,16.36 14.97,14.9 12,14.9Z\" /></svg>\\`,\n onAllCells: true,\n hideOnHeader: true,\n },\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n cellAlignment: \"center\",\n columnAlignment: { horizontal: \"center\", vertical: \"bottom\" },\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n];\nconst data = [\n {\n firstName: {\n data: \"Joe\",\n icon: accountSVG,\n },\n lastName: \"Bloggs\",\n age: 30,\n },\n {\n firstName: \"Sarah\",\n lastName: \"Smith\",\n age: 28,\n },\n {\n firstName: {\n data: \"Mark\",\n icon: accountSVG,\n },\n lastName: \"Owens\",\n age: 45,\n },\n];\nreturn (\n {shortCode}\n)`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={snippetsCustomIcons}>\n <IcDataTable caption=\"Custom icons\" columns={ICON_COLUMNS} data={ICON_DATA}>\n <SlottedSVG slot=\"age-column-icon\" path={mdiCakeVariantOutline} />\n </IcDataTable>\n</ComponentPreview>\n\n### Custom row heights\n\nexport const snippetsRowHeights = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-data-table id=\"data-table\" caption=\"Custom Row Heights\"></ic-data-table>`,\n long: `{shortCode}\n<script>\n const dataTable = document.querySelector(\"ic-data-table\");\n const columns = [\n {\n key: \"firstName\",\n title: \"First name\",\n dataType: \"string\",\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n ];\n const data = [\n {\n firstName: \"Joe\",\n lastName: \"Bloggs\",\n age: 30,\n },\n {\n firstName: \"Sarah\",\n lastName: \"Smith\",\n age: 28,\n },\n {\n firstName: \"Mark\",\n lastName: \"Owens\",\n age: 45,\n },\n ];\n dataTable.columns = columns;\n dataTable.data = data;\n dataTable.globalRowHeight = 80;\n dataTable.variableRowHeight = ({ firstName, lastName }) => firstName === \"Joe\" || lastName === \"Owens\" ? 200 : null;\n</script>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcDataTable\n caption=\"Custom Row Heights\"\n columns={columns}\n data={data}\n globalRowHeight={80}\n variableRowHeight={rowHeightFunc}\n/>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const columns: IcDataTableColumnObject[] = [\n {\n key: \"firstName\",\n title: \"First name\",\n dataType: \"string\",\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n];\nconst data = [\n {\n firstName: \"Joe\",\n lastName: \"Bloggs\",\n age: 30,\n },\n {\n firstName: \"Sarah\",\n lastName: \"Smith\",\n age: 28,\n },\n {\n firstName: \"Mark\",\n lastName: \"Owens\",\n age: 45,\n },\n];\nconst rowHeightFunc = ({ firstName, lastName }) => firstName === \"Joe\" || lastName === \"Owens\" ? 200 : null;\nreturn (\n {shortCode}\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const columns = [\n {\n key: \"firstName\",\n title: \"First name\",\n dataType: \"string\",\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n];\nconst data = [\n {\n firstName: \"Joe\",\n lastName: \"Bloggs\",\n age: 30,\n },\n {\n firstName: \"Sarah\",\n lastName: \"Smith\",\n age: 28,\n },\n {\n firstName: \"Mark\",\n lastName: \"Owens\",\n age: 45,\n },\n];\nconst rowHeightFunc = ({ firstName, lastName }) => firstName === \"Joe\" || lastName === \"Owens\" ? 200 : null;\nreturn (\n {shortCode}\n)`,\n },\n ],\n },\n },\n];\n\nexport const rowHeightFunc = ({ firstName, lastName }) =>\n firstName === \"Joe\" || lastName === \"Owens\" ? 200 : null;\n\n<ComponentPreview snippets={snippetsRowHeights}>\n <IcDataTable\n caption=\"Custom Row Heights\"\n columns={COLUMNS}\n data={DATA}\n globalRowHeight={80}\n variableRowHeight={rowHeightFunc}\n />\n</ComponentPreview>\n\n### Custom title bar\n\nexport const snippetsTitleBar = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-data-table id=\"data-table\" caption=\"Custom Title Bar\">\n <ic-data-table-title-bar\n description=\"Data table description that describes the purpose of the table.\"\n metadata=\"128 items | 32gb | Updated: 01/02/03\"\n >\n <ic-button slot=\"primary-action\">Primary</ic-button>\n <ic-button slot=\"custom-actions\" variant=\"icon\" aria-label=\"Icon 1\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24\"\n viewBox=\"0 -960 960 960\"\n width=\"24\"\n >\n <path\n d=\"M180-120q-24 0-42-18t-18-42v-600q0-24 18-42t42-18h600q24 0 42 18t18 42v600q0 24-18 42t-42 18H180Zm0-60h600v-600H180v600Zm56-97h489L578-473 446-302l-93-127-117 152Zm-56 97v-600 600Z\"\n />\n </svg>\n </ic-button>\n <ic-button slot=\"custom-actions\" variant=\"icon\" aria-label=\"Icon 2\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24\"\n viewBox=\"0 -960 960 960\"\n width=\"24\"\n >\n <path\n d=\"M180-120q-24 0-42-18t-18-42v-600q0-24 18-42t42-18h600q24 0 42 18t18 42v600q0 24-18 42t-42 18H180Zm0-60h600v-600H180v600Zm56-97h489L578-473 446-302l-93-127-117 152Zm-56 97v-600 600Z\"\n />\n </svg>\n </ic-button>\n <ic-button slot=\"custom-actions\" variant=\"icon\" aria-label=\"Icon 3\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24\"\n viewBox=\"0 -960 960 960\"\n width=\"24\"\n >\n <path\n d=\"M180-120q-24 0-42-18t-18-42v-600q0-24 18-42t42-18h600q24 0 42 18t18 42v600q0 24-18 42t-42 18H180Zm0-60h600v-600H180v600Zm56-97h489L578-473 446-302l-93-127-117 152Zm-56 97v-600 600Z\"\n />\n </svg>\n </ic-button>\n <ic-typography slot=\"description\" variant=\"body\">\n <p>\n This is some text and{' '}\n <ic-link href=\"#\">this is an inline link</ic-link> within the text.\n </p>\n </ic-typography>\n </ic-data-table-title-bar>\n</ic-data-table>`,\n long: `{shortCode}\n<script>\n const dataTable = document.querySelector(\"ic-data-table\");\n const columns = [\n {\n key: \"firstName\",\n title: \"First name\",\n dataType: \"string\",\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n ];\n const data = [\n {\n firstName: \"Joe\",\n lastName: \"Bloggs\",\n age: 30,\n },\n {\n firstName: \"Sarah\",\n lastName: \"Smith\",\n age: 28,\n },\n {\n firstName: \"Mark\",\n lastName: \"Owens\",\n age: 45,\n },\n ];\n dataTable.columns = columns;\n dataTable.data = data;\n</script>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcDataTable caption=\"Custom Title Bar\" columns={columns} data={data}>\n <IcDataTableTitleBar\n slot=\"title-bar\"\n description=\"Data table description that describes the purpose of the table.\"\n metadata=\"128 items | 32gb | Updated: 01/02/03\"\n >\n <IcButton slot=\"primary-action\">Primary</IcButton>\n <IcButton slot=\"custom-actions\" variant=\"icon\" aria-label=\"Icon 1\">\n <SlottedSVG path={mdiImage} viewBox=\"0 0 24 24\" />\n </IcButton>\n <IcButton slot=\"custom-actions\" variant=\"icon\" aria-label=\"Icon 2\">\n <SlottedSVG path={mdiImage} viewBox=\"0 0 24 24\" />\n </IcButton>\n <IcButton slot=\"custom-actions\" variant=\"icon\" aria-label=\"Icon 3\">\n <SlottedSVG path={mdiImage} viewBox=\"0 0 24 24\" />\n </IcButton>\n <IcTypography slot=\"description\" variant=\"body\">\n <p>\n This is some text and{' '}\n <IcLink href=\"#\">this is an inline link</IcLink> within the text.\n </p>\n </IcTypography>\n </IcDataTableTitleBar>\n</IcDataTable>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const columns: IcDataTableColumnObject[] = [\n {\n key: \"firstName\",\n title: \"First name\",\n dataType: \"string\",\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n];\nconst data = [\n {\n firstName: \"Joe\",\n lastName: \"Bloggs\",\n age: 30,\n },\n {\n firstName: \"Sarah\",\n lastName: \"Smith\",\n age: 28,\n },\n {\n firstName: \"Mark\",\n lastName: \"Owens\",\n age: 45,\n },\n];\nreturn (\n {shortCode}\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const columns = [\n {\n key: \"firstName\",\n title: \"First name\",\n dataType: \"string\",\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n];\nconst data = [\n {\n firstName: \"Joe\",\n lastName: \"Bloggs\",\n age: 30,\n },\n {\n firstName: \"Sarah\",\n lastName: \"Smith\",\n age: 28,\n },\n {\n firstName: \"Mark\",\n lastName: \"Owens\",\n age: 45,\n },\n];\nreturn (\n {shortCode}\n)`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={snippetsTitleBar}>\n <IcDataTable caption=\"Custom Title Bar\" columns={COLUMNS} data={DATA}>\n <IcDataTableTitleBar\n slot=\"title-bar\"\n description=\"Data table description that describes the purpose of the table.\"\n metadata=\"128 items | 32gb | Updated: 01/02/03\"\n >\n <IcButton slot=\"primary-action\">Primary</IcButton>\n <IcButton slot=\"custom-actions\" variant=\"icon\" aria-label=\"Icon 1\">\n <SlottedSVG path={mdiImage} viewBox=\"0 0 24 24\" />\n </IcButton>\n <IcButton slot=\"custom-actions\" variant=\"icon\" aria-label=\"Icon 2\">\n <SlottedSVG path={mdiImage} viewBox=\"0 0 24 24\" />\n </IcButton>\n <IcButton slot=\"custom-actions\" variant=\"icon\" aria-label=\"Icon 3\">\n <SlottedSVG path={mdiImage} viewBox=\"0 0 24 24\" />\n </IcButton>\n <IcTypography slot=\"description\" variant=\"body\">\n <p>\n This is some text and <IcLink href=\"#\">this is an inline link</IcLink>{\" \"}\n within the text.\n </p>\n </IcTypography>\n </IcDataTableTitleBar>\n </IcDataTable>\n</ComponentPreview>\n\n### Truncation - tooltip\n\nexport const snippetsTooltip = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-data-table caption=\"Data table truncation - tooltip\" truncation-pattern=\"tooltip\"></ic-data-table>`,\n long: `{shortCode}\n<script>\n const dataTable = document.querySelector(\"ic-data-table\");\n const columns = [\n {\n key: \"firstName\",\n title: \"First name\",\n // dataType types: \"string\" | \"number\" | \"address\" | \"element\" | \"date\";\n dataType: \"string\",\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"jobTitle\",\n title: \"Job title\",\n dataType: \"string\",\n },\n ];\n const data = [\n {\n firstName: \"Joe\",\n lastName: \"Bloggs\",\n jobTitle: \"Senior Software Developer, Site Reliability Engineering\",\n },\n {\n firstName: \"Sarah\",\n lastName: \"Smith\",\n jobTitle: \"Junior developer\",\n },\n {\n firstName: \"Mark\",\n lastName: \"Owens\",\n jobTitle: \"Team lead\",\n },\n ];\n dataTable.columns = columns;\n dataTable.data = data;\n dataTable.globalRowHeight = 40;\n</script>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcDataTable caption=\"Data table truncation - tooltip\" columns={columns} data={data} truncationPattern=\"tooltip\" globalRowHeight={40}/>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const columns: IcDataTableColumnObject[] = [\n {\n key: \"firstName\",\n title: \"First name\",\n dataType: \"string\",\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"jobTitle\",\n title: \"Job title\",\n dataType: \"string\",\n },\n];\nconst data = [\n {\n firstName: \"Joe\",\n lastName: \"Bloggs\",\n jobTitle: \"Senior Software Developer, Site Reliability Engineering\",\n },\n {\n firstName: \"Sarah\",\n lastName: \"Smith\",\n jobTitle: \"Junior developer\",\n },\n {\n firstName: \"Mark\",\n lastName: \"Owens\",\n jobTitle: \"Team lead\",\n },\n];\nreturn (\n {shortCode}\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const columns = [\n {\n key: \"firstName\",\n title: \"First name\",\n dataType: \"string\",\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"jobTitle\",\n title: \"Job title\",\n dataType: \"string\",\n },\n];\nconst data = [\n {\n firstName: \"Joe\",\n lastName: \"Bloggs\",\n jobTitle: \"Senior Software Developer, Site Reliability Engineering\",\n },\n {\n firstName: \"Sarah\",\n lastName: \"Smith\",\n jobTitle: \"Junior developer\",\n },\n {\n firstName: \"Mark\",\n lastName: \"Owens\",\n jobTitle: \"Team lead\",\n },\n];\nreturn (\n {shortCode}\n)`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={snippetsTooltip}>\n <IcDataTable\n caption=\"Data table truncation - tooltip\"\n columns={TRUNCATION_COLUMNS}\n data={TRUNCATION_DATA}\n truncationPattern=\"tooltip\"\n globalRowHeight={40}\n />\n</ComponentPreview>\n\n### Truncation - show/hide\n\nexport const snippetsShowHide = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-data-table caption=\"Data table truncation - show/hide\" truncation-pattern=\"show-hide\"></ic-data-table>`,\n long: `{shortCode}\n<script>\n const dataTable = document.querySelector(\"ic-data-table\");\n const columns = [\n {\n key: \"firstName\",\n title: \"First name\",\n // dataType types: \"string\" | \"number\" | \"address\" | \"element\" | \"date\";\n dataType: \"string\",\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"jobTitle\",\n title: \"Job title\",\n dataType: \"string\",\n },\n ];\n const data = [\n {\n firstName: \"Joe\",\n lastName: \"Bloggs\",\n jobTitle: \"Senior Software Developer, Site Reliability Engineering\",\n },\n {\n firstName: \"Sarah\",\n lastName: \"Smith\",\n jobTitle: \"Junior developer\",\n },\n {\n firstName: \"Mark\",\n lastName: \"Owens\",\n jobTitle: \"Team lead\",\n },\n ];\n dataTable.columns = columns;\n dataTable.data = data;\n dataTable.globalRowHeight = 40;\n</script>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcDataTable caption=\"Data table truncation - show/hide\" columns={columns} data={data} truncationPattern=\"show-hide\" globalRowHeight={40}/>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const columns: IcDataTableColumnObject[] = [\n {\n key: \"firstName\",\n title: \"First name\",\n dataType: \"string\",\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"jobTitle\",\n title: \"Job title\",\n dataType: \"string\",\n },\n];\nconst data = [\n {\n firstName: \"Joe\",\n lastName: \"Bloggs\",\n jobTitle: \"Senior Software Developer, Site Reliability Engineering\",\n },\n {\n firstName: \"Sarah\",\n lastName: \"Smith\",\n jobTitle: \"Junior developer\",\n },\n {\n firstName: \"Mark\",\n lastName: \"Owens\",\n jobTitle: \"Team lead\",\n },\n];\nreturn (\n {shortCode}\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const columns = [\n {\n key: \"firstName\",\n title: \"First name\",\n dataType: \"string\",\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"jobTitle\",\n title: \"Job title\",\n dataType: \"string\",\n },\n];\nconst data = [\n {\n firstName: \"Joe\",\n lastName: \"Bloggs\",\n jobTitle: \"Senior Software Developer, Site Reliability Engineering\",\n },\n {\n firstName: \"Sarah\",\n lastName: \"Smith\",\n jobTitle: \"Junior developer\",\n },\n {\n firstName: \"Mark\",\n lastName: \"Owens\",\n jobTitle: \"Team lead\",\n },\n];\nreturn (\n {shortCode}\n)`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={snippetsShowHide}>\n <IcDataTable\n caption=\"Data table truncation - show/hide\"\n columns={TRUNCATION_COLUMNS}\n data={TRUNCATION_DATA}\n truncationPattern=\"show-hide\"\n globalRowHeight={40}\n />\n</ComponentPreview>\n\n### Text wrap\n\nexport const snippetsTextWrap = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-data-table caption=\"Data table text wrap\"></ic-data-table>`,\n long: `{shortCode}\n<script>\n const dataTable = document.querySelector(\"ic-data-table\");\n const columns = [\n {\n key: \"firstName\",\n title: \"First name\",\n // dataType types: \"string\" | \"number\" | \"address\" | \"element\" | \"date\";\n dataType: \"string\",\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"jobTitle\",\n title: \"Job title\",\n dataType: \"string\",\n textWrap: true,\n },\n ];\n const data = [\n {\n firstName: \"Joe\",\n lastName: \"Bloggs\",\n jobTitle: \"Senior Software Developer, Site Reliability Engineering\",\n },\n {\n firstName: \"Sarah\",\n lastName: \"Smith\",\n jobTitle: \"Junior developer\",\n },\n {\n firstName: \"Mark\",\n lastName: \"Owens\",\n jobTitle: \"Team lead\",\n },\n ];\n dataTable.globalRowHeight = 40;\n</script>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcDataTable caption=\"Data table text wrap\" columns={columns} data={data} globalRowHeight={40}/>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const columns: IcDataTableColumnObject[] = [\n {\n key: \"firstName\",\n title: \"First name\",\n dataType: \"string\",\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"jobTitle\",\n title: \"Job title\",\n dataType: \"string\",\n textWrap: true,\n },\n];\nconst data = [\n {\n firstName: \"Joe\",\n lastName: \"Bloggs\",\n jobTitle: \"Senior Software Developer, Site Reliability Engineering\",\n },\n {\n firstName: \"Sarah\",\n lastName: \"Smith\",\n jobTitle: \"Junior developer\",\n },\n {\n firstName: \"Mark\",\n lastName: \"Owens\",\n jobTitle: \"Team lead\",\n },\n];\nreturn (\n {shortCode}\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const columns = [\n {\n key: \"firstName\",\n title: \"First name\",\n dataType: \"string\",\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"jobTitle\",\n title: \"Job title\",\n dataType: \"string\",\n textWrap: true,\n },\n];\nconst data = [\n {\n firstName: \"Joe\",\n lastName: \"Bloggs\",\n jobTitle: \"Senior Software Developer, Site Reliability Engineering\",\n },\n {\n firstName: \"Sarah\",\n lastName: \"Smith\",\n jobTitle: \"Junior developer\",\n },\n {\n firstName: \"Mark\",\n lastName: \"Owens\",\n jobTitle: \"Team lead\",\n },\n];\nreturn (\n {shortCode}\n)`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={snippetsTextWrap}>\n <IcDataTable\n caption=\"Data table text wrap\"\n columns={TRUNCATION_COLUMNS}\n data={TRUNCATION_DATA}\n globalRowHeight={40}\n />\n</ComponentPreview>\n",
+ "contents": "\nimport { IcDataTable, IcDataTableTitleBar } from \"@ukic/canary-react\";\nimport {\n IcEmptyState,\n IcButton,\n IcLink,\n SlottedSVG,\n IcTypography,\n} from \"@ukic/react\";\nimport { useRef } from \"react\";\nimport { mdiImage, mdiCakeVariantOutline } from \"@mdi/js\";\nimport {\n COLUMNS,\n DATA,\n LONG_COLUMNS,\n LONG_DATA,\n ROW_HEADER_COLUMNS,\n ROW_HEADER_DATA,\n COLUMN_OVERRIDES,\n ROW_OVERRIDES_DATA,\n CELL_OVERRIDES_DATA,\n COLUMNS_ELEMENTS,\n DATA_ELEMENTS,\n ICON_COLUMNS,\n ICON_DATA,\n LOADING_DATA,\n TRUNCATION_COLUMNS,\n TRUNCATION_DATA,\n} from \"./story-data\";\n\n## Component demo\n\nexport const snippetsDefault = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-data-table caption=\"Basic Table\"></ic-data-table>`,\n long: `{shortCode}\n<script>\n const dataTable = document.querySelector(\"ic-data-table\");\n const columns = [\n {\n key: \"firstName\",\n title: \"First name\",\n // dataType types: \"string\" | \"number\" | \"address\" | \"element\" | \"date\";\n dataType: \"string\",\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n ];\n const data = [\n {\n firstName: \"Joe\",\n lastName: \"Bloggs\",\n age: 30,\n },\n {\n firstName: \"Sarah\",\n lastName: \"Smith\",\n age: 28,\n },\n {\n firstName: \"Mark\",\n lastName: \"Owens\",\n age: 45,\n },\n ];\n dataTable.columns = columns;\n dataTable.data = data;\n</script>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcDataTable caption=\"Basic\" columns={columns} data={data} />`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const columns: IcDataTableColumnObject[] = [\n {\n key: \"firstName\",\n title: \"First name\",\n dataType: \"string\",\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n];\nconst data = [\n {\n firstName: \"Joe\",\n lastName: \"Bloggs\",\n age: 30,\n },\n {\n firstName: \"Sarah\",\n lastName: \"Smith\",\n age: 28,\n },\n {\n firstName: \"Mark\",\n lastName: \"Owens\",\n age: 45,\n },\n];\nreturn (\n {shortCode}\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const columns = [\n {\n key: \"firstName\",\n title: \"First name\",\n dataType: \"string\",\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n];\nconst data = [\n {\n firstName: \"Joe\",\n lastName: \"Bloggs\",\n age: 30,\n },\n {\n firstName: \"Sarah\",\n lastName: \"Smith\",\n age: 28,\n },\n {\n firstName: \"Mark\",\n lastName: \"Owens\",\n age: 45,\n },\n];\nreturn (\n {shortCode}\n)`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={snippetsDefault}>\n <IcDataTable caption=\"Basic\" columns={COLUMNS} data={DATA} />\n</ComponentPreview>\n\n## Data table details\n\n<ComponentDetails component=\"ic-data-table\" canary />\n\n## Variants\n\n### Embedded\n\nexport const snippetsEmbedded = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-data-table caption=\"Embedded Table\" embedded=\"true\"></ic-data-table>`,\n long: `{shortCode}\n<script>\n const dataTable = document.querySelector(\"ic-data-table\");\n const columns = [\n {\n key: \"firstName\",\n title: \"First name\",\n // dataType types: \"string\" | \"number\" | \"address\" | \"element\" | \"date\";\n dataType: \"string\",\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n ];\n const data = [\n {\n firstName: \"Joe\",\n lastName: \"Bloggs\",\n age: 30,\n },\n {\n firstName: \"Sarah\",\n lastName: \"Smith\",\n age: 28,\n },\n {\n firstName: \"Mark\",\n lastName: \"Owens\",\n age: 45,\n },\n ];\n dataTable.columns = columns;\n dataTable.data = data;\n</script>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcDataTable\n caption=\"Embedded\"\n columns={columns}\n data={data}\n embedded\n/>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const columns: IcDataTableColumnObject[] = [\n {\n key: \"firstName\",\n title: \"First name\",\n dataType: \"string\",\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n];\nconst data = [\n {\n firstName: \"Joe\",\n lastName: \"Bloggs\",\n age: 30,\n },\n {\n firstName: \"Sarah\",\n lastName: \"Smith\",\n age: 28,\n },\n {\n firstName: \"Mark\",\n lastName: \"Owens\",\n age: 45,\n },\n];\nreturn (\n {shortCode}\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const columns = [\n {\n key: \"firstName\",\n title: \"First name\",\n dataType: \"string\",\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n];\nconst data = [\n {\n firstName: \"Joe\",\n lastName: \"Bloggs\",\n age: 30,\n },\n {\n firstName: \"Sarah\",\n lastName: \"Smith\",\n age: 28,\n },\n {\n firstName: \"Mark\",\n lastName: \"Owens\",\n age: 45,\n },\n];\nreturn (\n {shortCode}\n)`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={snippetsEmbedded}>\n <IcDataTable caption=\"Embedded\" columns={COLUMNS} data={DATA} embedded />\n</ComponentPreview>\n\n### Dense\n\nexport const snippetsDense = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-data-table caption=\"Dense Table\" density=\"dense\"></ic-data-table>`,\n long: `{shortCode}\n<script>\n const dataTable = document.querySelector(\"ic-data-table\");\n const columns = [\n {\n key: \"firstName\",\n title: \"First name\",\n // dataType types: \"string\" | \"number\" | \"address\" | \"element\" | \"date\";\n dataType: \"string\",\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n ];\n const data = [\n {\n firstName: \"Joe\",\n lastName: \"Bloggs\",\n age: 30,\n },\n {\n firstName: \"Sarah\",\n lastName: \"Smith\",\n age: 28,\n },\n {\n firstName: \"Mark\",\n lastName: \"Owens\",\n age: 45,\n },\n ];\n dataTable.columns = columns;\n dataTable.data = data;\n</script>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcDataTable\n caption=\"Dense\"\n columns={columns}\n data={data}\n density=\"dense\"\n/>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const columns: IcDataTableColumnObject[] = [\n {\n key: \"firstName\",\n title: \"First name\",\n dataType: \"string\",\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n];\nconst data = [\n {\n firstName: \"Joe\",\n lastName: \"Bloggs\",\n age: 30,\n },\n {\n firstName: \"Sarah\",\n lastName: \"Smith\",\n age: 28,\n },\n {\n firstName: \"Mark\",\n lastName: \"Owens\",\n age: 45,\n },\n];\nreturn (\n {shortCode}\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const columns = [\n {\n key: \"firstName\",\n title: \"First name\",\n dataType: \"string\",\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n];\nconst data = [\n {\n firstName: \"Joe\",\n lastName: \"Bloggs\",\n age: 30,\n },\n {\n firstName: \"Sarah\",\n lastName: \"Smith\",\n age: 28,\n },\n {\n firstName: \"Mark\",\n lastName: \"Owens\",\n age: 45,\n },\n];\nreturn (\n {shortCode}\n)`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={snippetsDense}>\n <IcDataTable caption=\"Dense\" columns={COLUMNS} data={DATA} density=\"dense\" />\n</ComponentPreview>\n\n### Spacious\n\nexport const snippetsSpacious = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-data-table caption=\"Spacious Table\" density=\"spacious\"></ic-data-table>`,\n long: `{shortCode}\n<script>\n const dataTable = document.querySelector(\"ic-data-table\");\n const columns = [\n {\n key: \"firstName\",\n title: \"First name\",\n // dataType types: \"string\" | \"number\" | \"address\" | \"element\" | \"date\";\n dataType: \"string\",\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n ];\n const data = [\n {\n firstName: \"Joe\",\n lastName: \"Bloggs\",\n age: 30,\n },\n {\n firstName: \"Sarah\",\n lastName: \"Smith\",\n age: 28,\n },\n {\n firstName: \"Mark\",\n lastName: \"Owens\",\n age: 45,\n },\n ];\n dataTable.columns = columns;\n dataTable.data = data;\n</script>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcDataTable\n caption=\"Spacious\"\n columns={columns}\n data={data}\n density=\"spacious\"\n/>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const columns: IcDataTableColumnObject[] = [\n {\n key: \"firstName\",\n title: \"First name\",\n dataType: \"string\",\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n];\nconst data = [\n {\n firstName: \"Joe\",\n lastName: \"Bloggs\",\n age: 30,\n },\n {\n firstName: \"Sarah\",\n lastName: \"Smith\",\n age: 28,\n },\n {\n firstName: \"Mark\",\n lastName: \"Owens\",\n age: 45,\n },\n];\nreturn (\n {shortCode}\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const columns = [\n {\n key: \"firstName\",\n title: \"First name\",\n dataType: \"string\",\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n];\nconst data = [\n {\n firstName: \"Joe\",\n lastName: \"Bloggs\",\n age: 30,\n },\n {\n firstName: \"Sarah\",\n lastName: \"Smith\",\n age: 28,\n },\n {\n firstName: \"Mark\",\n lastName: \"Owens\",\n age: 45,\n },\n];\nreturn (\n {shortCode}\n)`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={snippetsSpacious}>\n <IcDataTable\n caption=\"Spacious\"\n columns={COLUMNS}\n data={DATA}\n density=\"spacious\"\n />\n</ComponentPreview>\n\n### Sticky column headers\n\nexport const snippetsStickyColumnHeaders = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-data-table\n caption=\"Sticky header Table\"\n sticky-column-headers=\"true\"\n></ic-data-table>`,\n long: `ic-data-table {\n height: 9.375rem;\n }\n</style>\n<body>\n {shortCode}\n <script>\n const dataTable = document.querySelector(\"ic-data-table\");\n const long_columns = [\n {\n key: \"employeeNumber\",\n title: \"Employee number\",\n dataType: \"number\",\n columnAlignment: { horizontal: \"left\" },\n },\n {\n key: \"name\",\n title: \"Name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n ];\n const long_data = [\n {\n employeeNumber: 1,\n name: \"Joe Bloggs\",\n age: 30,\n },\n {\n employeeNumber: 2,\n name: \"Sarah Jones\",\n age: 28,\n },\n {\n employeeNumber: 3,\n name: \"Mark Owens\",\n age: 45,\n },\n {\n employeeNumber: 4,\n name: \"Naomi Thomas\",\n age: 32,\n },\n {\n employeeNumber: 5,\n name: \"Luke Ashford\",\n age: 18,\n },\n {\n employeeNumber: 6,\n name: \"Dave Smith\",\n age: 33,\n },\n {\n employeeNumber: 7,\n name: \"Amy Fox\",\n age: 27,\n },\n {\n employeeNumber: 8,\n name: \"Mary Cooper\",\n age: 31,\n },\n {\n employeeNumber: 9,\n name: \"Alice Cole\",\n age: 38,\n },\n {\n employeeNumber: 10,\n name: \"Ben Fields\",\n age: 40,\n },\n {\n employeeNumber: 11,\n name: \"Pete Norton\",\n age: 32,\n },\n {\n employeeNumber: 12,\n name: \"Ashley Langford\",\n age: 29,\n },\n {\n employeeNumber: 13,\n name: \"Michael Hall\",\n age: 35,\n },\n {\n employeeNumber: 14,\n name: \"David Frank\",\n age: 28,\n },\n {\n employeeNumber: 15,\n name: \"Mary Lincoln\",\n age: 23,\n },\n {\n employeeNumber: 16,\n name: \"Will Barns\",\n age: 36,\n },\n {\n employeeNumber: 17,\n name: \"Elizabeth Long\",\n age: 43,\n },\n {\n employeeNumber: 18,\n name: \"Keith Jones\",\n age: 37,\n },\n {\n employeeNumber: 19,\n name: \"Olivia Brown\",\n age: 19,\n },\n {\n employeeNumber: 20,\n name: \"Tim Green\",\n age: 50,\n },\n ];\n dataTable.columns = long_columns;\n dataTable.data = long_data;\n </script>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcDataTable\n className={classes.dataTable}\n caption=\"Sticky Column Headers\"\n columns={long_columns}\n data={long_data}\n stickyColumnHeaders\n ref={dataTableEl}\n/>`,\n long: [\n {\n language: \"Typescript\",\n snippet: ` const dataTableEl = useRef(null);\nconst stickHeader = (sticky: boolean) => {\n dataTableEl.current.stickyColumnHeaders = sticky;\n};\nconst long_columns: IcDataTableColumnObject[] = [\n {\n key: \"employeeNumber\",\n title: \"Employee number\",\n dataType: \"number\",\n columnAlignment: { horizontal: \"left\" },\n },\n {\n key: \"name\",\n title: \"Name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n];\nconst long_data = [\n {\n employeeNumber: 1,\n name: \"Joe Bloggs\",\n age: 30,\n },\n {\n employeeNumber: 2,\n name: \"Sarah Jones\",\n age: 28,\n },\n {\n employeeNumber: 3,\n name: \"Mark Owens\",\n age: 45,\n },\n {\n employeeNumber: 4,\n name: \"Naomi Thomas\",\n age: 32,\n },\n {\n employeeNumber: 5,\n name: \"Luke Ashford\",\n age: 18,\n },\n {\n employeeNumber: 6,\n name: \"Dave Smith\",\n age: 33,\n },\n {\n employeeNumber: 7,\n name: \"Amy Fox\",\n age: 27,\n },\n {\n employeeNumber: 8,\n name: \"Mary Cooper\",\n age: 31,\n },\n {\n employeeNumber: 9,\n name: \"Alice Cole\",\n age: 38,\n },\n {\n employeeNumber: 10,\n name: \"Ben Fields\",\n age: 40,\n },\n {\n employeeNumber: 11,\n name: \"Pete Norton\",\n age: 32,\n },\n {\n employeeNumber: 12,\n name: \"Ashley Langford\",\n age: 29,\n },\n {\n employeeNumber: 13,\n name: \"Michael Hall\",\n age: 35,\n },\n {\n employeeNumber: 14,\n name: \"David Frank\",\n age: 28,\n },\n {\n employeeNumber: 15,\n name: \"Mary Lincoln\",\n age: 23,\n },\n {\n employeeNumber: 16,\n name: \"Will Barns\",\n age: 36,\n },\n {\n employeeNumber: 17,\n name: \"Elizabeth Long\",\n age: 43,\n },\n {\n employeeNumber: 18,\n name: \"Keith Jones\",\n age: 37,\n },\n {\n employeeNumber: 19,\n name: \"Olivia Brown\",\n age: 19,\n },\n {\n employeeNumber: 20,\n name: \"Tim Green\",\n age: 50,\n },\n];\nconst useStyles = createUseStyles({\n dataTable: {\n height: \"18.75rem\",\n },\n});\nconst classes = useStyles();\nreturn (\n <>\n {shortCode}\n <IcButton onClick={() => stickHeader(true)}>Stick Header</IcButton>\n <IcButton onClick={() => stickHeader(false)}>Unstick Header</IcButton>\n </>\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const dataTableEl = useRef(null);\nconst stickHeader = (sticky) => {\n dataTableEl.current.stickyColumnHeaders = sticky;\n};\nconst long_columns = [\n {\n key: \"employeeNumber\",\n title: \"Employee number\",\n dataType: \"number\",\n columnAlignment: { horizontal: \"left\" },\n },\n {\n key: \"name\",\n title: \"Name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n];\nconst long_data = [\n {\n employeeNumber: 1,\n name: \"Joe Bloggs\",\n age: 30,\n },\n {\n employeeNumber: 2,\n name: \"Sarah Jones\",\n age: 28,\n },\n {\n employeeNumber: 3,\n name: \"Mark Owens\",\n age: 45,\n },\n {\n employeeNumber: 4,\n name: \"Naomi Thomas\",\n age: 32,\n },\n {\n employeeNumber: 5,\n name: \"Luke Ashford\",\n age: 18,\n },\n {\n employeeNumber: 6,\n name: \"Dave Smith\",\n age: 33,\n },\n {\n employeeNumber: 7,\n name: \"Amy Fox\",\n age: 27,\n },\n {\n employeeNumber: 8,\n name: \"Mary Cooper\",\n age: 31,\n },\n {\n employeeNumber: 9,\n name: \"Alice Cole\",\n age: 38,\n },\n {\n employeeNumber: 10,\n name: \"Ben Fields\",\n age: 40,\n },\n {\n employeeNumber: 11,\n name: \"Pete Norton\",\n age: 32,\n },\n {\n employeeNumber: 12,\n name: \"Ashley Langford\",\n age: 29,\n },\n {\n employeeNumber: 13,\n name: \"Michael Hall\",\n age: 35,\n },\n {\n employeeNumber: 14,\n name: \"David Frank\",\n age: 28,\n },\n {\n employeeNumber: 15,\n name: \"Mary Lincoln\",\n age: 23,\n },\n {\n employeeNumber: 16,\n name: \"Will Barns\",\n age: 36,\n },\n {\n employeeNumber: 17,\n name: \"Elizabeth Long\",\n age: 43,\n },\n {\n employeeNumber: 18,\n name: \"Keith Jones\",\n age: 37,\n },\n {\n employeeNumber: 19,\n name: \"Olivia Brown\",\n age: 19,\n },\n {\n employeeNumber: 20,\n name: \"Tim Green\",\n age: 50,\n },\n];\nconst useStyles = createUseStyles({\n dataTable: {\n height: \"18.75rem\",\n },\n});\nconst classes = useStyles();\nreturn (\n <>\n {shortCode}\n <IcButton onClick={() => stickHeader(true)}>Stick Header</IcButton>\n <IcButton onClick={() => stickHeader(false)}>Unstick Header</IcButton>\n </>\n)`,\n },\n ],\n },\n },\n];\n\nexport const StickyColumnHeaders = () => {\n const dataTableEl = useRef(null);\n const stickHeader = (sticky) => {\n dataTableEl.current.stickyColumnHeaders = sticky;\n };\n return (\n <>\n <IcDataTable\n style={{ height: \"18.75rem\" }}\n ref={dataTableEl}\n caption=\"Sticky Column Headers\"\n columns={LONG_COLUMNS}\n data={LONG_DATA}\n />\n <IcButton onClick={() => stickHeader(true)}>Stick Header</IcButton>\n <IcButton onClick={() => stickHeader(false)}>Unstick Header</IcButton>\n </>\n );\n};\n\n<ComponentPreview snippets={snippetsStickyColumnHeaders}>\n <StickyColumnHeaders />\n</ComponentPreview>\n\n### Row headers\n\nexport const snippetsRowHeaders = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-data-table caption=\"Row headers\"></ic-data-table>`,\n long: `{shortCode}\n<script>\n const dataTable = document.querySelector(\"ic-data-table\");\n const columns = [\n {\n key: \"header\",\n title: \"Job type\",\n dataType: \"string\",\n },\n {\n key: \"firstName\",\n title: \"First name\",\n dataType: \"string\",\n },\n ];\n const data = [\n {\n // Each data row requires a 'header' key/value pair like below\n header: { title: 'Employee' },\n firstName: \"Joe\",\n lastName: \"Bloggs\",\n age: 30,\n },\n ];\n dataTable.columns = columns;\n dataTable.data = data;\n</script>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcDataTable\n caption=\"Row Headers\"\n columns={columns}\n data={data}\n />`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const columns: IcDataTableColumnObject[] = [\n {\n key: \"firstName\",\n title: \"First name\",\n // dataType types: \"string\" | \"number\" | \"address\" | \"element\" | \"date\";\n dataType: \"string\",\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n];\nconst data = [\n {\n firstName: \"Joe\",\n lastName: \"Bloggs\",\n age: 30,\n },\n {\n firstName: \"Sarah\",\n lastName: \"Smith\",\n age: 28,\n },\n {\n firstName: \"Mark\",\n lastName: \"Owens\",\n age: 45,\n },\n];\nreturn (\n {shortCode}\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const columns = [\n {\n key: \"firstName\",\n title: \"First name\",\n // dataType types: \"string\" | \"number\" | \"address\" | \"element\" | \"date\";\n dataType: \"string\",\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n];\nconst data = [\n {\n firstName: \"Joe\",\n lastName: \"Bloggs\",\n age: 30,\n },\n {\n firstName: \"Sarah\",\n lastName: \"Smith\",\n age: 28,\n },\n {\n firstName: \"Mark\",\n lastName: \"Owens\",\n age: 45,\n },\n];\nreturn (\n {shortCode}\n)`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={snippetsRowHeaders}>\n <IcDataTable\n caption=\"Row Headers\"\n columns={ROW_HEADER_COLUMNS}\n data={ROW_HEADER_DATA}\n />\n</ComponentPreview>\n\n### Sortable\n\nexport const snippetsSortable = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-data-table caption=\"Sort\" sortable=\"true\"></ic-data-table>`,\n long: `{shortCode}\n<script>\n const dataTable = document.querySelector(\"ic-data-table\");\n dataTable.addEventListener(\"icSortChange\", (event: CustomEvent) => {\n console.log(\"Sort changed\", event.detail);\n });\n const columns = [\n {\n key: \"firstName\",\n title: \"First name\",\n // dataType types: \"string\" | \"number\" | \"address\" | \"element\" | \"date\";\n dataType: \"string\",\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n ];\n const data = [\n {\n firstName: \"Joe\",\n lastName: \"Bloggs\",\n age: 30,\n },\n {\n firstName: \"Sarah\",\n lastName: \"Smith\",\n age: 28,\n },\n {\n firstName: \"Mark\",\n lastName: \"Owens\",\n age: 45,\n },\n ];\n dataTable.columns = columns;\n dataTable.data = data;\n</script>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcDataTable\n caption=\"Sort\"\n columns={columns}\n data={data}\n sortable\n onIcSortChange={(e) => console.log(\"Sort changed\", e.detail)}\n/>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const columns: IcDataTableColumnObject[] = [\n {\n key: \"firstName\",\n title: \"First name\",\n // dataType types: \"string\" | \"number\" | \"address\" | \"element\" | \"date\";\n dataType: \"string\",\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n];\nconst data = [\n {\n firstName: \"Joe\",\n lastName: \"Bloggs\",\n age: 30,\n },\n {\n firstName: \"Sarah\",\n lastName: \"Smith\",\n age: 28,\n },\n {\n firstName: \"Mark\",\n lastName: \"Owens\",\n age: 45,\n },\n];\nreturn (\n {shortCode}\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const columns = [\n {\n key: \"firstName\",\n title: \"First name\",\n // dataType types: \"string\" | \"number\" | \"address\" | \"element\" | \"date\";\n dataType: \"string\",\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n];\nconst data = [\n {\n firstName: \"Joe\",\n lastName: \"Bloggs\",\n age: 30,\n },\n {\n firstName: \"Sarah\",\n lastName: \"Smith\",\n age: 28,\n },\n {\n firstName: \"Mark\",\n lastName: \"Owens\",\n age: 45,\n },\n];\nreturn (\n {shortCode}\n)`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={snippetsSortable}>\n <IcDataTable\n caption=\"Sortable\"\n columns={COLUMNS}\n data={DATA}\n sortable\n onIcSortChange={(e) => console.log(\"Sort changed\", e.detail)}\n />\n</ComponentPreview>\n\n### Sort options\n\nexport const snippetsSortOptions = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-data-table caption=\"Sort Options\" sortable=\"true\"></ic-data-table>`,\n long: `{shortCode}\n<script>\n const dataTable = document.querySelector(\"ic-data-table\");\n dataTable.sortOptions = {\n sortOrders: ['descending', 'unsorted'],\n defaultColumn: 'firstName'\n };\n const columns = [\n {\n key: \"firstName\",\n title: \"First name\",\n // dataType types: \"string\" | \"number\" | \"address\" | \"element\" | \"date\";\n dataType: \"string\",\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n ];\n const data = [\n {\n firstName: \"Joe\",\n lastName: \"Bloggs\",\n age: 30,\n },\n {\n firstName: \"Sarah\",\n lastName: \"Smith\",\n age: 28,\n },\n {\n firstName: \"Mark\",\n lastName: \"Owens\",\n age: 45,\n },\n ];\n dataTable.columns = columns;\n dataTable.data = data;\n</script>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcDataTable\n caption=\"Sort Options\"\n columns={columns}\n data={data}\n sortable\n sortOptions={{\n sortOrders: [\"descending\", \"unsorted\"],\n defaultColumn: \"firstName\",\n }}\n/>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const columns: IcDataTableColumnObject[] = [\n {\n key: \"firstName\",\n title: \"First name\",\n // dataType types: \"string\" | \"number\" | \"address\" | \"element\" | \"date\";\n dataType: \"string\",\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n];\nconst data = [\n {\n firstName: \"Joe\",\n lastName: \"Bloggs\",\n age: 30,\n },\n {\n firstName: \"Sarah\",\n lastName: \"Smith\",\n age: 28,\n },\n {\n firstName: \"Mark\",\n lastName: \"Owens\",\n age: 45,\n },\n];\nreturn (\n {shortCode}\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const columns: IcDataTableColumnObject[] = [\n {\n key: \"firstName\",\n title: \"First name\",\n // dataType types: \"string\" | \"number\" | \"address\" | \"element\" | \"date\";\n dataType: \"string\",\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n];\nconst data = [\n {\n firstName: \"Joe\",\n lastName: \"Bloggs\",\n age: 30,\n },\n {\n firstName: \"Sarah\",\n lastName: \"Smith\",\n age: 28,\n },\n {\n firstName: \"Mark\",\n lastName: \"Owens\",\n age: 45,\n },\n];\nreturn (\n {shortCode}\n)`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={snippetsSortOptions}>\n <IcDataTable\n caption=\"Sort Options\"\n columns={COLUMNS}\n data={DATA}\n sortable\n sortOptions={{\n sortOrders: [\"descending\", \"unsorted\"],\n defaultColumn: \"firstName\",\n }}\n />\n</ComponentPreview>\n\n### Pagination\n\nexport const snippetsPagination = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-data-table caption=\"Pagination\" show-pagination=\"true\"></ic-data-table>`,\n long: `{shortCode}\n<script>\n const dataTable = document.querySelector(\"ic-data-table\");\n dataTable.paginationOptions = {\n itemsPerPage: [\n { label: \"5\", value: \"5\" },\n { label: \"10\", value: \"10\" },\n { label: \"15\", value: \"15\" },\n ],\n itemsPerPageControl: true,\n };\n const long_columns = [\n {\n key: \"employeeNumber\",\n title: \"Employee number\",\n dataType: \"number\",\n columnAlignment: { horizontal: \"left\" },\n },\n {\n key: \"name\",\n title: \"Name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n ];\n const long_data = [\n {\n employeeNumber: 1,\n name: \"Joe Bloggs\",\n age: 30,\n },\n {\n employeeNumber: 2,\n name: \"Sarah Jones\",\n age: 28,\n },\n {\n employeeNumber: 3,\n name: \"Mark Owens\",\n age: 45,\n },\n {\n employeeNumber: 4,\n name: \"Naomi Thomas\",\n age: 32,\n },\n {\n employeeNumber: 5,\n name: \"Luke Ashford\",\n age: 18,\n },\n {\n employeeNumber: 6,\n name: \"Dave Smith\",\n age: 33,\n },\n {\n employeeNumber: 7,\n name: \"Amy Fox\",\n age: 27,\n },\n {\n employeeNumber: 8,\n name: \"Mary Cooper\",\n age: 31,\n },\n {\n employeeNumber: 9,\n name: \"Alice Cole\",\n age: 38,\n },\n {\n employeeNumber: 10,\n name: \"Ben Fields\",\n age: 40,\n },\n {\n employeeNumber: 11,\n name: \"Pete Norton\",\n age: 32,\n },\n {\n employeeNumber: 12,\n name: \"Ashley Langford\",\n age: 29,\n },\n {\n employeeNumber: 13,\n name: \"Michael Hall\",\n age: 35,\n },\n {\n employeeNumber: 14,\n name: \"David Frank\",\n age: 28,\n },\n {\n employeeNumber: 15,\n name: \"Mary Lincoln\",\n age: 23,\n },\n {\n employeeNumber: 16,\n name: \"Will Barns\",\n age: 36,\n },\n {\n employeeNumber: 17,\n name: \"Elizabeth Long\",\n age: 43,\n },\n {\n employeeNumber: 18,\n name: \"Keith Jones\",\n age: 37,\n },\n {\n employeeNumber: 19,\n name: \"Olivia Brown\",\n age: 19,\n },\n {\n employeeNumber: 20,\n name: \"Tim Green\",\n age: 50,\n },\n ];\n dataTable.columns = long_columns;\n dataTable.data = long_data;\n</script>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcDataTable\n caption=\"Pagination\"\n columns={long_columns}\n data={long_data}\n showPagination\n paginationOptions={{\n itemsPerPage: [\n { label: \"5\", value: \"5\" },\n { label: \"10\", value: \"10\" },\n { label: \"15\", value: \"15\" },\n ],\n itemsPerPageControl: true,\n }}\n/>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const long_columns: IcDataTableColumnObject[] = [\n {\n key: \"employeeNumber\",\n title: \"Employee number\",\n dataType: \"number\",\n columnAlignment: { horizontal: \"left\" },\n },\n {\n key: \"name\",\n title: \"Name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n];\nconst long_data = [\n {\n employeeNumber: 1,\n name: \"Joe Bloggs\",\n age: 30,\n },\n {\n employeeNumber: 2,\n name: \"Sarah Jones\",\n age: 28,\n },\n {\n employeeNumber: 3,\n name: \"Mark Owens\",\n age: 45,\n },\n {\n employeeNumber: 4,\n name: \"Naomi Thomas\",\n age: 32,\n },\n {\n employeeNumber: 5,\n name: \"Luke Ashford\",\n age: 18,\n },\n {\n employeeNumber: 6,\n name: \"Dave Smith\",\n age: 33,\n },\n {\n employeeNumber: 7,\n name: \"Amy Fox\",\n age: 27,\n },\n {\n employeeNumber: 8,\n name: \"Mary Cooper\",\n age: 31,\n },\n {\n employeeNumber: 9,\n name: \"Alice Cole\",\n age: 38,\n },\n {\n employeeNumber: 10,\n name: \"Ben Fields\",\n age: 40,\n },\n {\n employeeNumber: 11,\n name: \"Pete Norton\",\n age: 32,\n },\n {\n employeeNumber: 12,\n name: \"Ashley Langford\",\n age: 29,\n },\n {\n employeeNumber: 13,\n name: \"Michael Hall\",\n age: 35,\n },\n {\n employeeNumber: 14,\n name: \"David Frank\",\n age: 28,\n },\n {\n employeeNumber: 15,\n name: \"Mary Lincoln\",\n age: 23,\n },\n {\n employeeNumber: 16,\n name: \"Will Barns\",\n age: 36,\n },\n {\n employeeNumber: 17,\n name: \"Elizabeth Long\",\n age: 43,\n },\n {\n employeeNumber: 18,\n name: \"Keith Jones\",\n age: 37,\n },\n {\n employeeNumber: 19,\n name: \"Olivia Brown\",\n age: 19,\n },\n {\n employeeNumber: 20,\n name: \"Tim Green\",\n age: 50,\n },\n];\nreturn (\n {shortCode}\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const long_columns = [\n {\n key: \"employeeNumber\",\n title: \"Employee number\",\n dataType: \"number\",\n columnAlignment: { horizontal: \"left\" },\n },\n {\n key: \"name\",\n title: \"Name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n];\nconst long_data = [\n {\n employeeNumber: 1,\n name: \"Joe Bloggs\",\n age: 30,\n },\n {\n employeeNumber: 2,\n name: \"Sarah Jones\",\n age: 28,\n },\n {\n employeeNumber: 3,\n name: \"Mark Owens\",\n age: 45,\n },\n {\n employeeNumber: 4,\n name: \"Naomi Thomas\",\n age: 32,\n },\n {\n employeeNumber: 5,\n name: \"Luke Ashford\",\n age: 18,\n },\n {\n employeeNumber: 6,\n name: \"Dave Smith\",\n age: 33,\n },\n {\n employeeNumber: 7,\n name: \"Amy Fox\",\n age: 27,\n },\n {\n employeeNumber: 8,\n name: \"Mary Cooper\",\n age: 31,\n },\n {\n employeeNumber: 9,\n name: \"Alice Cole\",\n age: 38,\n },\n {\n employeeNumber: 10,\n name: \"Ben Fields\",\n age: 40,\n },\n {\n employeeNumber: 11,\n name: \"Pete Norton\",\n age: 32,\n },\n {\n employeeNumber: 12,\n name: \"Ashley Langford\",\n age: 29,\n },\n {\n employeeNumber: 13,\n name: \"Michael Hall\",\n age: 35,\n },\n {\n employeeNumber: 14,\n name: \"David Frank\",\n age: 28,\n },\n {\n employeeNumber: 15,\n name: \"Mary Lincoln\",\n age: 23,\n },\n {\n employeeNumber: 16,\n name: \"Will Barns\",\n age: 36,\n },\n {\n employeeNumber: 17,\n name: \"Elizabeth Long\",\n age: 43,\n },\n {\n employeeNumber: 18,\n name: \"Keith Jones\",\n age: 37,\n },\n {\n employeeNumber: 19,\n name: \"Olivia Brown\",\n age: 19,\n },\n {\n employeeNumber: 20,\n name: \"Tim Green\",\n age: 50,\n },\n];\nreturn (\n {shortCode}\n)`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={snippetsPagination}>\n <IcDataTable\n caption=\"Pagination\"\n columns={LONG_COLUMNS}\n data={LONG_DATA}\n showPagination\n paginationOptions={{\n itemsPerPage: [\n { label: \"5\", value: \"5\" },\n { label: \"10\", value: \"10\" },\n { label: \"15\", value: \"15\" },\n ],\n itemsPerPageControl: true,\n }}\n />\n</ComponentPreview>\n\n### Column overrides\n\nexport const snippetsColumnOverrides = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-data-table caption=\"Column Overrides\"></ic-data-table>`,\n long: `{shortCode}\n<script>\n const dataTable = document.querySelector(\"ic-data-table\");\n const columns = [\n {\n key: \"firstName\",\n title: \"First name\",\n dataType: \"string\",\n columnAlignment: { horizontal: 'center', vertical: 'middle'},\n emphasis: 'high',\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n ];\n const data = [\n {\n firstName: \"Joe\",\n lastName: \"Bloggs\",\n age: 30,\n },\n {\n firstName: \"Sarah\",\n lastName: \"Smith\",\n age: 28,\n },\n {\n firstName: \"Mark\",\n lastName: \"Owens\",\n age: 45,\n },\n ];\n dataTable.columns = columns;\n dataTable.data = data;\n</script>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcDataTable\n caption=\"Column overrides\"\n columns={columns}\n data={data}\n/>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const columns: IcDataTableColumnObject[] = [\n {\n key: \"firstName\",\n title: \"First name\",\n dataType: \"string\",\n columnAlignment: { horizontal: 'center', vertical: 'middle'},\n emphasis: 'high',\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n];\nconst data = [\n {\n firstName: \"Joe\",\n lastName: \"Bloggs\",\n age: 30,\n },\n {\n firstName: \"Sarah\",\n lastName: \"Smith\",\n age: 28,\n },\n {\n firstName: \"Mark\",\n lastName: \"Owens\",\n age: 45,\n },\n];\nreturn (\n {shortCode}\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const columns = [\n {\n key: \"firstName\",\n title: \"First name\",\n dataType: \"string\",\n columnAlignment: { horizontal: 'center', vertical: 'middle'},\n emphasis: 'high',\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n];\nconst data = [\n {\n firstName: \"Joe\",\n lastName: \"Bloggs\",\n age: 30,\n },\n {\n firstName: \"Sarah\",\n lastName: \"Smith\",\n age: 28,\n },\n {\n firstName: \"Mark\",\n lastName: \"Owens\",\n age: 45,\n },\n];\nreturn (\n {shortCode}\n)`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={snippetsColumnOverrides}>\n <IcDataTable\n caption=\"Column overrides\"\n columns={COLUMN_OVERRIDES}\n data={DATA}\n />\n</ComponentPreview>\n\n### Row overrides\n\nexport const snippetsRowOverrides = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-data-table caption=\"Row Overrides\"></ic-data-table>`,\n long: `{shortCode}\n<script>\n const dataTable = document.querySelector(\"ic-data-table\");\n const columns = [\n {\n key: \"header\",\n title: \"Job Title\",\n dataType: \"string\",\n },\n {\n key: \"firstName\",\n title: \"First name\",\n dataType: \"string\",\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n ];\n const data = [\n {\n header: { title: \"Employee\" },\n firstName: \"Joe\",\n lastName: \"Bloggs\",\n age: 30,\n },\n {\n header: { title: \"Employee\" },\n firstName: \"Sarah\",\n lastName: \"Smith\",\n age: 28,\n },\n {\n header: { title: \"Manager\" },\n firstName: \"Mark\",\n lastName: \"Owens\",\n age: 45,\n },\n ];\n dataTable.columns = columns;\n dataTable.data = data;\n</script>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcDataTable\n caption=\"Row overrides\"\n columns={columns}\n data={data}\n/>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const columns: IcDataTableColumnObject[] = [\n {\n key: \"header\",\n title: \"Job Title\",\n dataType: \"string\",\n },\n {\n key: \"firstName\",\n title: \"First name\",\n dataType: \"string\",\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n];\nconst data = [\n {\n header: { title: \"Employee\" },\n firstName: \"Joe\",\n lastName: \"Bloggs\",\n age: 30,\n },\n {\n header: { title: \"Employee\" },\n firstName: \"Sarah\",\n lastName: \"Smith\",\n age: 28,\n },\n {\n header: { title: \"Manager\" },\n firstName: \"Mark\",\n lastName: \"Owens\",\n age: 45,\n },\n];\nreturn (\n {shortCode}\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const columns = [\n {\n key: \"header\",\n title: \"Job Title\",\n dataType: \"string\",\n },\n {\n key: \"firstName\",\n title: \"First name\",\n dataType: \"string\",\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n];\nconst data = [\n {\n header: { title: \"Employee\" },\n firstName: \"Joe\",\n lastName: \"Bloggs\",\n age: 30,\n },\n {\n header: { title: \"Employee\" },\n firstName: \"Sarah\",\n lastName: \"Smith\",\n age: 28,\n },\n {\n header: { title: \"Manager\" },\n firstName: \"Mark\",\n lastName: \"Owens\",\n age: 45,\n },\n];\nreturn (\n {shortCode}\n)`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={snippetsRowOverrides}>\n <IcDataTable\n caption=\"Row overrides\"\n columns={ROW_HEADER_COLUMNS}\n data={ROW_OVERRIDES_DATA}\n />\n</ComponentPreview>\n\n### Cell overrides\n\nexport const snippetsCellOverrides = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-data-table caption=\"Cell Overrides\"></ic-data-table>`,\n long: `{shortCode}\n<script>\n const dataTable = document.querySelector(\"ic-data-table\");\n const columns = [\n {\n key: \"firstName\",\n title: \"First name\",\n // dataType types: \"string\" | \"number\" | \"address\" | \"element\" | \"date\";\n dataType: \"string\",\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n ];\n const data = [\n {\n firstName: {\n data: \"Joe\",\n cellAlignment: { horizontal: \"center\", vertical: \"middle\" },\n emphasis: \"high\",\n },\n lastName: \"Bloggs\",\n age: 30,\n },\n {\n firstName: \"Sarah\",\n lastName: \"Smith\",\n age: 28,\n },\n {\n firstName: \"Mark\",\n lastName: \"Owens\",\n age: 45,\n },\n ];\n dataTable.columns = columns;\n dataTable.data = data;\n</script>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcDataTable\n caption=\"Cell overrides\"\n columns={columns}\n data={data}\n/>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const columns: IcDataTableColumnObject[] = [\n {\n key: \"firstName\",\n title: \"First name\",\n // dataType types: \"string\" | \"number\" | \"address\" | \"element\" | \"date\";\n dataType: \"string\",\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n];\nconst data = [\n {\n firstName: {\n data: \"Joe\",\n cellAlignment: { horizontal: \"center\", vertical: \"middle\" },\n emphasis: \"high\",\n },\n lastName: \"Bloggs\",\n age: 30,\n },\n {\n firstName: \"Sarah\",\n lastName: \"Smith\",\n age: 28,\n },\n {\n firstName: \"Mark\",\n lastName: \"Owens\",\n age: 45,\n },\n];\nreturn (\n {shortCode}\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const columns = [\n {\n key: \"firstName\",\n title: \"First name\",\n // dataType types: \"string\" | \"number\" | \"address\" | \"element\" | \"date\";\n dataType: \"string\",\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n];\nconst data = [\n {\n firstName: {\n data: \"Joe\",\n cellAlignment: { horizontal: \"center\", vertical: \"middle\" },\n emphasis: \"high\",\n },\n lastName: \"Bloggs\",\n age: 30,\n },\n {\n firstName: \"Sarah\",\n lastName: \"Smith\",\n age: 28,\n },\n {\n firstName: \"Mark\",\n lastName: \"Owens\",\n age: 45,\n },\n];\nreturn (\n {shortCode}\n)`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={snippetsCellOverrides}>\n <IcDataTable\n caption=\"Cell overrides\"\n columns={COLUMNS}\n data={CELL_OVERRIDES_DATA}\n />\n</ComponentPreview>\n\n### Default Empty State\n\nexport const snippetsDefaultEmptyState = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-data-table caption=\"Default Empty State\"></ic-data-table>`,\n long: `{shortCode}\n<script>\n const dataTable = document.querySelector(\"ic-data-table\");\n const columns = [\n {\n key: \"firstName\",\n title: \"First name\",\n // dataType types: \"string\" | \"number\" | \"address\" | \"element\" | \"date\";\n dataType: \"string\",\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n ];\n dataTable.columns = columns;\n</script>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcDataTable caption=\"Default Empty State\" columns={columns} />`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const columns: IcDataTableColumnObject[] = [\n {\n key: \"firstName\",\n title: \"First name\",\n // dataType types: \"string\" | \"number\" | \"address\" | \"element\" | \"date\";\n dataType: \"string\",\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n];\nreturn (\n {shortCode}\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const columns = [\n {\n key: \"firstName\",\n title: \"First name\",\n // dataType types: \"string\" | \"number\" | \"address\" | \"element\" | \"date\";\n dataType: \"string\",\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n];\nreturn (\n {shortCode}\n)`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={snippetsDefaultEmptyState}>\n <IcDataTable caption=\"Default Empty State\" columns={COLUMNS} />\n</ComponentPreview>\n\n### Slotted Empty State\n\nexport const snippetsSlottedEmptyState = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-data-table id=\"data-table\" caption=\"Slotted Empty State\">\n <ic-empty-state\n aligned=\"left\"\n heading=\"Data source error\"\n body=\"Error loading new data\"\n >\n <ic-button slot=\"actions\">Retry</ic-button>\n </ic-empty-state>\n</ic-data-table>`,\n long: `{shortCode}\n<script>\n const dataTable = document.querySelector(\"ic-data-table\");\n const columns = [\n {\n key: \"firstName\",\n title: \"First name\",\n // dataType types: \"string\" | \"number\" | \"address\" | \"element\" | \"date\";\n dataType: \"string\",\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n ];\n dataTable.columns = columns;\n</script>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcDataTable\n caption=\"Slotted Empty State\"\n columns={columns}\n>\n <IcEmptyState slot=\"empty-state\" aligned=\"left\" heading=\"Data source error\" body=\"Error loading new data\">\n <IcButton slot=\"actions\">Retry</IcButton>\n </IcEmptyState>\n</IcDataTable>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const columns: IcDataTableColumnObject[] = [\n {\n key: \"firstName\",\n title: \"First name\",\n // dataType types: \"string\" | \"number\" | \"address\" | \"element\" | \"date\";\n dataType: \"string\",\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n];\nreturn (\n {shortCode}\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const columns = [\n {\n key: \"firstName\",\n title: \"First name\",\n // dataType types: \"string\" | \"number\" | \"address\" | \"element\" | \"date\";\n dataType: \"string\",\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n];\nreturn (\n {shortCode}\n)`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={snippetsSlottedEmptyState}>\n <IcDataTable caption=\"Slotted Empty State\" columns={COLUMNS}>\n <IcEmptyState\n slot=\"empty-state\"\n aligned=\"left\"\n heading=\"Data source error\"\n body=\"Error loading new data\"\n >\n <IcButton slot=\"actions\">Retry</IcButton>\n </IcEmptyState>\n </IcDataTable>\n</ComponentPreview>\n\n### Loading state\n\nexport const snippetsLoadingState = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-data-table id=\"data-table\" caption=\"Loading State\"></ic-data-table>`,\n long: `{shortCode}\n<script>\n const dataTable = document.querySelector(\"ic-data-table\");\n const columns = [\n {\n key: \"firstName\",\n title: \"First name\",\n // dataType types: \"string\" | \"number\" | \"address\" | \"element\" | \"date\";\n dataType: \"string\",\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n ];\n const data = [\n {\n firstName: \"Joe\",\n lastName: \"Bloggs\",\n age: 30,\n },\n {\n firstName: \"Sarah\",\n lastName: \"Smith\",\n age: 28,\n },\n {\n firstName: \"Mark\",\n lastName: \"Owens\",\n age: 45,\n },\n {\n firstName: \"Naomi\",\n lastName: \"Thomas\",\n age: 32,\n },\n {\n firstName: \"Luke\",\n lastName: \"Ashford\",\n age: 18,\n },\n ];\n dataTable.columns = columns;\n dataTable.data = data;\n dataTable.loading = true;\n</script>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcDataTable\n caption=\"Loading state\"\n columns={columns}\n data={data}\n loading\n/>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const columns: IcDataTableColumnObject[] = [\n {\n key: \"firstName\",\n title: \"First name\",\n // dataType types: \"string\" | \"number\" | \"address\" | \"element\" | \"date\";\n dataType: \"string\",\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n];\nconst data = [\n {\n firstName: \"Joe\",\n lastName: \"Bloggs\",\n age: 30,\n },\n {\n firstName: \"Sarah\",\n lastName: \"Smith\",\n age: 28,\n },\n {\n firstName: \"Mark\",\n lastName: \"Owens\",\n age: 45,\n },\n {\n firstName: \"Naomi\",\n lastName: \"Thomas\",\n age: 32,\n },\n {\n firstName: \"Luke\",\n lastName: \"Ashford\",\n age: 18,\n },\n];\nreturn (\n {shortCode}\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const columns = [\n {\n key: \"firstName\",\n title: \"First name\",\n // dataType types: \"string\" | \"number\" | \"address\" | \"element\" | \"date\";\n dataType: \"string\",\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n];\nconst data = [\n {\n firstName: \"Joe\",\n lastName: \"Bloggs\",\n age: 30,\n },\n {\n firstName: \"Sarah\",\n lastName: \"Smith\",\n age: 28,\n },\n {\n firstName: \"Mark\",\n lastName: \"Owens\",\n age: 45,\n },\n{\n firstName: \"Naomi\",\n lastName: \"Thomas\",\n age: 32,\n },\n {\n firstName: \"Luke\",\n lastName: \"Ashford\",\n age: 18,\n },\n];\nreturn (\n {shortCode}\n)`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={snippetsLoadingState}>\n <IcDataTable\n caption=\"Loading state\"\n columns={COLUMNS}\n data={LOADING_DATA}\n loading\n style={{ height: \"250px\" }}\n />\n</ComponentPreview>\n\n### Updating state\n\nexport const snippetsUpdatingState = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-data-table id=\"data-table\" caption=\"Updating State\"></ic-data-table>`,\n long: `{shortCode}\n<script>\n const dataTable = document.querySelector(\"ic-data-table\");\n const columns = [\n {\n key: \"firstName\",\n title: \"First name\",\n // dataType types: \"string\" | \"number\" | \"address\" | \"element\" | \"date\";\n dataType: \"string\",\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n ];\n const data = [\n {\n firstName: \"Joe\",\n lastName: \"Bloggs\",\n age: 30,\n },\n {\n firstName: \"Sarah\",\n lastName: \"Smith\",\n age: 28,\n },\n {\n firstName: \"Mark\",\n lastName: \"Owens\",\n age: 45,\n },\n ];\n dataTable.columns = columns;\n dataTable.data = data;\n</script>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcDataTable\n caption=\"Updating state\"\n columns={columns}\n data={data}\n updating\n updatingOptions={{ progress: 30 }}\n/>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const columns: IcDataTableColumnObject[] = [\n {\n key: \"firstName\",\n title: \"First name\",\n // dataType types: \"string\" | \"number\" | \"address\" | \"element\" | \"date\";\n dataType: \"string\",\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n];\nconst data = [\n {\n firstName: \"Joe\",\n lastName: \"Bloggs\",\n age: 30,\n },\n {\n firstName: \"Sarah\",\n lastName: \"Smith\",\n age: 28,\n },\n {\n firstName: \"Mark\",\n lastName: \"Owens\",\n age: 45,\n },\n];\nreturn (\n {shortCode}\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const columns = [\n {\n key: \"firstName\",\n title: \"First name\",\n // dataType types: \"string\" | \"number\" | \"address\" | \"element\" | \"date\";\n dataType: \"string\",\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n];\nconst data = [\n {\n firstName: \"Joe\",\n lastName: \"Bloggs\",\n age: 30,\n },\n {\n firstName: \"Sarah\",\n lastName: \"Smith\",\n age: 28,\n },\n {\n firstName: \"Mark\",\n lastName: \"Owens\",\n age: 45,\n },\n];\nreturn (\n {shortCode}\n)`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={snippetsUpdatingState}>\n <IcDataTable\n caption=\"Updating state\"\n columns={COLUMNS}\n data={DATA}\n updating\n updatingOptions={{ progress: 30 }}\n />\n</ComponentPreview>\n\n### Links and Elements in data\n\nexport const snippetsElements = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-data-table caption=\"Links and Elements in data\"></ic-data-table>`,\n long: `{shortCode}\n<script>\n const dataTable = document.querySelector(\"ic-data-table\");\n const columns = [\n {\n key: \"firstName\",\n title: \"First name\",\n dataType: \"string\",\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n {\n key: \"actions\",\n title: \"Actions\",\n dataType: \"element\",\n columnAlignment: { horizontal: \"center\" },\n },\n ];\n const data = [\n {\n firstName: {\n data: \"Joe\",\n href: \"#\",\n },\n lastName: \"Bloggs\",\n age: 30,\n actions: \\`<ic-button variant='destructive' onClick='this.closest(\"tr\").remove()'>Delete</ic-button>\\`,\n },\n {\n firstName: 'Sarah',\n lastName: 'Smith',\n age: 28,\n actions: \\`<ic-button variant='destructive' onClick='this.closest(\"tr\").remove()'>Delete</ic-button>\\`,\n },\n {\n firstName: 'Mark',\n lastName: 'Owens',\n age: 45,\n actions: \\`<ic-button variant='destructive' onClick='this.closest(\"tr\").remove()'>Delete</ic-button>\\`,\n },\n ];\n dataTable.columns = columns;\n dataTable.data = data;\n</script>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcDataTable\n caption=\"Links and Elements in data\"\n columns={columns}\n data={data}\n>\n {data.map((_, index) => (\n <IcButton\n key={index}\n slot={\\`actions-\\${index}\\`}\n variant=\"destructive\"\n onClick={() => _.closest('Delete')}\n >\n Delete\n </IcButton>\n ))}\n</IcDataTable>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const columns: IcDataTableColumnObject[] = [\n {\n key: \"firstName\",\n title: \"First name\",\n dataType: \"string\",\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n {\n key: \"actions\",\n title: \"Actions\",\n dataType: \"element\",\n columnAlignment: { horizontal: \"center\" },\n },\n];\nconst data = [\n {\n firstName: {\n data: \"Joe\",\n href: \"#\",\n },\n lastName: \"Bloggs\",\n age: 30,\n },\n {\n firstName: 'Sarah',\n lastName: 'Smith',\n age: 28,\n },\n {\n firstName: 'Mark',\n lastName: 'Owens',\n age: 45,\n },\n];\nreturn (\n {shortCode}\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const columns = [\n {\n key: \"firstName\",\n title: \"First name\",\n dataType: \"string\",\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n {\n key: \"actions\",\n title: \"Actions\",\n dataType: \"element\",\n columnAlignment: { horizontal: \"center\" },\n },\n];\nconst data = [\n {\n firstName: {\n data: \"Joe\",\n href: \"#\",\n },\n lastName: \"Bloggs\",\n age: 30,\n },\n {\n firstName: 'Sarah',\n lastName: 'Smith',\n age: 28,\n },\n {\n firstName: 'Mark',\n lastName: 'Owens',\n age: 45,\n },\n];\nreturn (\n {shortCode}\n)`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={snippetsElements}>\n <IcDataTable\n caption=\"Links and Elements in data\"\n columns={COLUMNS_ELEMENTS}\n data={DATA_ELEMENTS}\n >\n {DATA_ELEMENTS.map((_, index) => (\n <IcButton\n // eslint-disable-next-line react/no-array-index-key\n key={`actions-${index}`}\n slot={`actions-${index}`}\n variant=\"destructive\"\n onClick={() => console.log(\"Delete\")}\n >\n Delete\n </IcButton>\n ))}\n </IcDataTable>\n</ComponentPreview>\n\n### Custom icons\n\nexport const snippetsCustomIcons = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-data-table id=\"data-table\" caption=\"Custom Icons\">\n <svg\n slot=\"age-column-icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n >\n <path\n d=\"M12 6C13.11 6 14 5.1 14 4C14 3.62 13.9 3.27 13.71 2.97L12 0L10.29 2.97C10.1 3.27 10 3.62 10 4C10 5.1 10.9 6 12 6M18 9H13V7H11V9H6C4.34 9 3 10.34 3 12V21C3 21.55 3.45 22 4 22H20C20.55 22 21 21.55 21 21V12C21 10.34 19.66 9 18 9M19 20H5V17C5.9 17 6.76 16.63 7.4 16L8.5 14.92L9.56 16C10.87 17.3 13.15 17.29 14.45 16L15.53 14.92L16.6 16C17.24 16.63 18.1 17 19 17V20M19 15.5C18.5 15.5 18 15.3 17.65 14.93L15.5 12.8L13.38 14.93C12.64 15.67 11.35 15.67 10.61 14.93L8.5 12.8L6.34 14.93C6 15.29 5.5 15.5 5 15.5V12C5 11.45 5.45 11 6 11H18C18.55 11 19 11.45 19 12V15.5Z\"\n />\n </svg>\n</ic-data-table>`,\n long: `{shortCode}\n<script>\n const dataTable = document.querySelector(\"ic-data-table\");\n const accountSVG = \\`<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path d=\"M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z\" /></svg>\\`;\n const columns = [\n {\n key: \"firstName\",\n title: \"First name\",\n dataType: \"string\",\n cellAlignment: \"right\",\n columnAlignment: { horizontal: \"right\", vertical: \"middle\" },\n icon: {\n icon: \\`<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path d=\"M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,6A2,2 0 0,0 10,8A2,2 0 0,0 12,10A2,2 0 0,0 14,8A2,2 0 0,0 12,6M12,13C14.67,13 20,14.33 20,17V20H4V17C4,14.33 9.33,13 12,13M12,14.9C9.03,14.9 5.9,16.36 5.9,17V18.1H18.1V17C18.1,16.36 14.97,14.9 12,14.9Z\" /></svg>\\`,\n onAllCells: true,\n hideOnHeader: true,\n },\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n cellAlignment: \"center\",\n columnAlignment: { horizontal: \"center\", vertical: \"bottom\" },\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n ];\n const data = [\n {\n firstName: {\n data: \"Joe\",\n icon: accountSVG,\n },\n lastName: \"Bloggs\",\n age: 30,\n },\n {\n firstName: \"Sarah\",\n lastName: \"Smith\",\n age: 28,\n },\n {\n firstName: {\n data: \"Mark\",\n icon: accountSVG,\n },\n lastName: \"Owens\",\n age: 45,\n },\n ];\n dataTable.columns = columns;\n dataTable.data = data;\n</script>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcDataTable caption=\"Custom icons\" columns={columns} data={data}>\n <SlottedSVG slot=\"age-column-icon\" path={mdiCakeVariantOutline} />\n</IcDataTable>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const accountSVG = \\`<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path d=\"M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z\" /></svg>\\`;\nconst columns: IcDataTableColumnObject[] = [\n {\n key: \"firstName\",\n title: \"First name\",\n dataType: \"string\",\n cellAlignment: \"right\",\n columnAlignment: { horizontal: \"right\", vertical: \"middle\" },\n icon: {\n icon: \\`<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path d=\"M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,6A2,2 0 0,0 10,8A2,2 0 0,0 12,10A2,2 0 0,0 14,8A2,2 0 0,0 12,6M12,13C14.67,13 20,14.33 20,17V20H4V17C4,14.33 9.33,13 12,13M12,14.9C9.03,14.9 5.9,16.36 5.9,17V18.1H18.1V17C18.1,16.36 14.97,14.9 12,14.9Z\" /></svg>\\`,\n onAllCells: true,\n hideOnHeader: true,\n },\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n cellAlignment: \"center\",\n columnAlignment: { horizontal: \"center\", vertical: \"bottom\" },\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n];\nconst data = [\n {\n firstName: {\n data: \"Joe\",\n icon: accountSVG,\n },\n lastName: \"Bloggs\",\n age: 30,\n },\n {\n firstName: \"Sarah\",\n lastName: \"Smith\",\n age: 28,\n },\n {\n firstName: {\n data: \"Mark\",\n icon: accountSVG,\n },\n lastName: \"Owens\",\n age: 45,\n },\n];\nreturn (\n {shortCode}\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const accountSVG = \\`<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path d=\"M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z\" /></svg>\\`;\nconst columns = [\n {\n key: \"firstName\",\n title: \"First name\",\n dataType: \"string\",\n cellAlignment: \"right\",\n columnAlignment: { horizontal: \"right\", vertical: \"middle\" },\n icon: {\n icon: \\`<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path d=\"M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,6A2,2 0 0,0 10,8A2,2 0 0,0 12,10A2,2 0 0,0 14,8A2,2 0 0,0 12,6M12,13C14.67,13 20,14.33 20,17V20H4V17C4,14.33 9.33,13 12,13M12,14.9C9.03,14.9 5.9,16.36 5.9,17V18.1H18.1V17C18.1,16.36 14.97,14.9 12,14.9Z\" /></svg>\\`,\n onAllCells: true,\n hideOnHeader: true,\n },\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n cellAlignment: \"center\",\n columnAlignment: { horizontal: \"center\", vertical: \"bottom\" },\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n];\nconst data = [\n {\n firstName: {\n data: \"Joe\",\n icon: accountSVG,\n },\n lastName: \"Bloggs\",\n age: 30,\n },\n {\n firstName: \"Sarah\",\n lastName: \"Smith\",\n age: 28,\n },\n {\n firstName: {\n data: \"Mark\",\n icon: accountSVG,\n },\n lastName: \"Owens\",\n age: 45,\n },\n];\nreturn (\n {shortCode}\n)`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={snippetsCustomIcons}>\n <IcDataTable caption=\"Custom icons\" columns={ICON_COLUMNS} data={ICON_DATA}>\n <SlottedSVG slot=\"age-column-icon\" path={mdiCakeVariantOutline} />\n </IcDataTable>\n</ComponentPreview>\n\n### Custom row heights\n\nexport const snippetsRowHeights = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-data-table id=\"data-table\" caption=\"Custom Row Heights\"></ic-data-table>`,\n long: `{shortCode}\n<script>\n const dataTable = document.querySelector(\"ic-data-table\");\n const columns = [\n {\n key: \"firstName\",\n title: \"First name\",\n dataType: \"string\",\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n ];\n const data = [\n {\n firstName: \"Joe\",\n lastName: \"Bloggs\",\n age: 30,\n },\n {\n firstName: \"Sarah\",\n lastName: \"Smith\",\n age: 28,\n },\n {\n firstName: \"Mark\",\n lastName: \"Owens\",\n age: 45,\n },\n ];\n dataTable.columns = columns;\n dataTable.data = data;\n dataTable.globalRowHeight = 80;\n dataTable.variableRowHeight = ({ firstName, lastName }) => firstName === \"Joe\" || lastName === \"Owens\" ? 200 : null;\n</script>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcDataTable\n caption=\"Custom Row Heights\"\n columns={columns}\n data={data}\n globalRowHeight={80}\n variableRowHeight={rowHeightFunc}\n/>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const columns: IcDataTableColumnObject[] = [\n {\n key: \"firstName\",\n title: \"First name\",\n dataType: \"string\",\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n];\nconst data = [\n {\n firstName: \"Joe\",\n lastName: \"Bloggs\",\n age: 30,\n },\n {\n firstName: \"Sarah\",\n lastName: \"Smith\",\n age: 28,\n },\n {\n firstName: \"Mark\",\n lastName: \"Owens\",\n age: 45,\n },\n];\nconst rowHeightFunc = ({ firstName, lastName }) => firstName === \"Joe\" || lastName === \"Owens\" ? 200 : null;\nreturn (\n {shortCode}\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const columns = [\n {\n key: \"firstName\",\n title: \"First name\",\n dataType: \"string\",\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n];\nconst data = [\n {\n firstName: \"Joe\",\n lastName: \"Bloggs\",\n age: 30,\n },\n {\n firstName: \"Sarah\",\n lastName: \"Smith\",\n age: 28,\n },\n {\n firstName: \"Mark\",\n lastName: \"Owens\",\n age: 45,\n },\n];\nconst rowHeightFunc = ({ firstName, lastName }) => firstName === \"Joe\" || lastName === \"Owens\" ? 200 : null;\nreturn (\n {shortCode}\n)`,\n },\n ],\n },\n },\n];\n\nexport const rowHeightFunc = ({ firstName, lastName }) =>\n firstName === \"Joe\" || lastName === \"Owens\" ? 200 : null;\n\n<ComponentPreview snippets={snippetsRowHeights}>\n <IcDataTable\n caption=\"Custom Row Heights\"\n columns={COLUMNS}\n data={DATA}\n globalRowHeight={80}\n variableRowHeight={rowHeightFunc}\n />\n</ComponentPreview>\n\n### Custom title bar\n\nexport const snippetsTitleBar = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-data-table id=\"data-table\" caption=\"Custom Title Bar\">\n <ic-data-table-title-bar\n description=\"Data table description that describes the purpose of the table.\"\n metadata=\"128 items | 32gb | Updated: 01/02/03\"\n >\n <ic-button slot=\"primary-action\">Primary</ic-button>\n <ic-button slot=\"custom-actions\" variant=\"icon\" aria-label=\"Icon 1\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24\"\n viewBox=\"0 -960 960 960\"\n width=\"24\"\n >\n <path\n d=\"M180-120q-24 0-42-18t-18-42v-600q0-24 18-42t42-18h600q24 0 42 18t18 42v600q0 24-18 42t-42 18H180Zm0-60h600v-600H180v600Zm56-97h489L578-473 446-302l-93-127-117 152Zm-56 97v-600 600Z\"\n />\n </svg>\n </ic-button>\n <ic-button slot=\"custom-actions\" variant=\"icon\" aria-label=\"Icon 2\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24\"\n viewBox=\"0 -960 960 960\"\n width=\"24\"\n >\n <path\n d=\"M180-120q-24 0-42-18t-18-42v-600q0-24 18-42t42-18h600q24 0 42 18t18 42v600q0 24-18 42t-42 18H180Zm0-60h600v-600H180v600Zm56-97h489L578-473 446-302l-93-127-117 152Zm-56 97v-600 600Z\"\n />\n </svg>\n </ic-button>\n <ic-button slot=\"custom-actions\" variant=\"icon\" aria-label=\"Icon 3\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24\"\n viewBox=\"0 -960 960 960\"\n width=\"24\"\n >\n <path\n d=\"M180-120q-24 0-42-18t-18-42v-600q0-24 18-42t42-18h600q24 0 42 18t18 42v600q0 24-18 42t-42 18H180Zm0-60h600v-600H180v600Zm56-97h489L578-473 446-302l-93-127-117 152Zm-56 97v-600 600Z\"\n />\n </svg>\n </ic-button>\n <ic-typography slot=\"description\" variant=\"body\">\n <p>\n This is some text and{' '}\n <ic-link href=\"#\">this is an inline link</ic-link> within the text.\n </p>\n </ic-typography>\n </ic-data-table-title-bar>\n</ic-data-table>`,\n long: `{shortCode}\n<script>\n const dataTable = document.querySelector(\"ic-data-table\");\n const columns = [\n {\n key: \"firstName\",\n title: \"First name\",\n dataType: \"string\",\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n ];\n const data = [\n {\n firstName: \"Joe\",\n lastName: \"Bloggs\",\n age: 30,\n },\n {\n firstName: \"Sarah\",\n lastName: \"Smith\",\n age: 28,\n },\n {\n firstName: \"Mark\",\n lastName: \"Owens\",\n age: 45,\n },\n ];\n dataTable.columns = columns;\n dataTable.data = data;\n</script>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcDataTable caption=\"Custom Title Bar\" columns={columns} data={data}>\n <IcDataTableTitleBar\n slot=\"title-bar\"\n description=\"Data table description that describes the purpose of the table.\"\n metadata=\"128 items | 32gb | Updated: 01/02/03\"\n >\n <IcButton slot=\"primary-action\">Primary</IcButton>\n <IcButton slot=\"custom-actions\" variant=\"icon\" aria-label=\"Icon 1\">\n <SlottedSVG path={mdiImage} viewBox=\"0 0 24 24\" />\n </IcButton>\n <IcButton slot=\"custom-actions\" variant=\"icon\" aria-label=\"Icon 2\">\n <SlottedSVG path={mdiImage} viewBox=\"0 0 24 24\" />\n </IcButton>\n <IcButton slot=\"custom-actions\" variant=\"icon\" aria-label=\"Icon 3\">\n <SlottedSVG path={mdiImage} viewBox=\"0 0 24 24\" />\n </IcButton>\n <IcTypography slot=\"description\" variant=\"body\">\n <p>\n This is some text and{' '}\n <IcLink href=\"#\">this is an inline link</IcLink> within the text.\n </p>\n </IcTypography>\n </IcDataTableTitleBar>\n</IcDataTable>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const columns: IcDataTableColumnObject[] = [\n {\n key: \"firstName\",\n title: \"First name\",\n dataType: \"string\",\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n];\nconst data = [\n {\n firstName: \"Joe\",\n lastName: \"Bloggs\",\n age: 30,\n },\n {\n firstName: \"Sarah\",\n lastName: \"Smith\",\n age: 28,\n },\n {\n firstName: \"Mark\",\n lastName: \"Owens\",\n age: 45,\n },\n];\nreturn (\n {shortCode}\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const columns = [\n {\n key: \"firstName\",\n title: \"First name\",\n dataType: \"string\",\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n];\nconst data = [\n {\n firstName: \"Joe\",\n lastName: \"Bloggs\",\n age: 30,\n },\n {\n firstName: \"Sarah\",\n lastName: \"Smith\",\n age: 28,\n },\n {\n firstName: \"Mark\",\n lastName: \"Owens\",\n age: 45,\n },\n];\nreturn (\n {shortCode}\n)`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={snippetsTitleBar}>\n <IcDataTable caption=\"Custom Title Bar\" columns={COLUMNS} data={DATA}>\n <IcDataTableTitleBar\n slot=\"title-bar\"\n description=\"Data table description that describes the purpose of the table.\"\n metadata=\"128 items | 32gb | Updated: 01/02/03\"\n >\n <IcButton slot=\"primary-action\">Primary</IcButton>\n <IcButton slot=\"custom-actions\" variant=\"icon\" aria-label=\"Icon 1\">\n <SlottedSVG path={mdiImage} viewBox=\"0 0 24 24\" />\n </IcButton>\n <IcButton slot=\"custom-actions\" variant=\"icon\" aria-label=\"Icon 2\">\n <SlottedSVG path={mdiImage} viewBox=\"0 0 24 24\" />\n </IcButton>\n <IcButton slot=\"custom-actions\" variant=\"icon\" aria-label=\"Icon 3\">\n <SlottedSVG path={mdiImage} viewBox=\"0 0 24 24\" />\n </IcButton>\n <IcTypography slot=\"description\" variant=\"body\">\n <p>\n This is some text and <IcLink href=\"#\">this is an inline link</IcLink>{\" \"}\n within the text.\n </p>\n </IcTypography>\n </IcDataTableTitleBar>\n </IcDataTable>\n</ComponentPreview>\n\n### Truncation - tooltip\n\nexport const snippetsTooltip = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-data-table caption=\"Data table truncation - tooltip\" truncation-pattern=\"tooltip\"></ic-data-table>`,\n long: `{shortCode}\n<script>\n const dataTable = document.querySelector(\"ic-data-table\");\n const columns = [\n {\n key: \"firstName\",\n title: \"First name\",\n // dataType types: \"string\" | \"number\" | \"address\" | \"element\" | \"date\";\n dataType: \"string\",\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"jobTitle\",\n title: \"Job title\",\n dataType: \"string\",\n },\n ];\n const data = [\n {\n firstName: \"Joe\",\n lastName: \"Bloggs\",\n jobTitle: \"Senior Software Developer, Site Reliability Engineering\",\n },\n {\n firstName: \"Sarah\",\n lastName: \"Smith\",\n jobTitle: \"Junior developer\",\n },\n {\n firstName: \"Mark\",\n lastName: \"Owens\",\n jobTitle: \"Team lead\",\n },\n ];\n dataTable.columns = columns;\n dataTable.data = data;\n dataTable.globalRowHeight = 40;\n</script>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcDataTable caption=\"Data table truncation - tooltip\" columns={columns} data={data} truncationPattern=\"tooltip\" globalRowHeight={40}/>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const columns: IcDataTableColumnObject[] = [\n {\n key: \"firstName\",\n title: \"First name\",\n dataType: \"string\",\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"jobTitle\",\n title: \"Job title\",\n dataType: \"string\",\n },\n];\nconst data = [\n {\n firstName: \"Joe\",\n lastName: \"Bloggs\",\n jobTitle: \"Senior Software Developer, Site Reliability Engineering\",\n },\n {\n firstName: \"Sarah\",\n lastName: \"Smith\",\n jobTitle: \"Junior developer\",\n },\n {\n firstName: \"Mark\",\n lastName: \"Owens\",\n jobTitle: \"Team lead\",\n },\n];\nreturn (\n {shortCode}\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const columns = [\n {\n key: \"firstName\",\n title: \"First name\",\n dataType: \"string\",\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"jobTitle\",\n title: \"Job title\",\n dataType: \"string\",\n },\n];\nconst data = [\n {\n firstName: \"Joe\",\n lastName: \"Bloggs\",\n jobTitle: \"Senior Software Developer, Site Reliability Engineering\",\n },\n {\n firstName: \"Sarah\",\n lastName: \"Smith\",\n jobTitle: \"Junior developer\",\n },\n {\n firstName: \"Mark\",\n lastName: \"Owens\",\n jobTitle: \"Team lead\",\n },\n];\nreturn (\n {shortCode}\n)`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={snippetsTooltip}>\n <IcDataTable\n caption=\"Data table truncation - tooltip\"\n columns={TRUNCATION_COLUMNS}\n data={TRUNCATION_DATA}\n truncationPattern=\"tooltip\"\n globalRowHeight={40}\n />\n</ComponentPreview>\n\n### Truncation - show/hide\n\nexport const snippetsShowHide = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-data-table caption=\"Data table truncation - show/hide\" truncation-pattern=\"show-hide\"></ic-data-table>`,\n long: `{shortCode}\n<script>\n const dataTable = document.querySelector(\"ic-data-table\");\n const columns = [\n {\n key: \"firstName\",\n title: \"First name\",\n // dataType types: \"string\" | \"number\" | \"address\" | \"element\" | \"date\";\n dataType: \"string\",\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"jobTitle\",\n title: \"Job title\",\n dataType: \"string\",\n },\n ];\n const data = [\n {\n firstName: \"Joe\",\n lastName: \"Bloggs\",\n jobTitle: \"Senior Software Developer, Site Reliability Engineering\",\n },\n {\n firstName: \"Sarah\",\n lastName: \"Smith\",\n jobTitle: \"Junior developer\",\n },\n {\n firstName: \"Mark\",\n lastName: \"Owens\",\n jobTitle: \"Team lead\",\n },\n ];\n dataTable.columns = columns;\n dataTable.data = data;\n dataTable.globalRowHeight = 40;\n</script>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcDataTable caption=\"Data table truncation - show/hide\" columns={columns} data={data} truncationPattern=\"show-hide\" globalRowHeight={40}/>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const columns: IcDataTableColumnObject[] = [\n {\n key: \"firstName\",\n title: \"First name\",\n dataType: \"string\",\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"jobTitle\",\n title: \"Job title\",\n dataType: \"string\",\n },\n];\nconst data = [\n {\n firstName: \"Joe\",\n lastName: \"Bloggs\",\n jobTitle: \"Senior Software Developer, Site Reliability Engineering\",\n },\n {\n firstName: \"Sarah\",\n lastName: \"Smith\",\n jobTitle: \"Junior developer\",\n },\n {\n firstName: \"Mark\",\n lastName: \"Owens\",\n jobTitle: \"Team lead\",\n },\n];\nreturn (\n {shortCode}\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const columns = [\n {\n key: \"firstName\",\n title: \"First name\",\n dataType: \"string\",\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"jobTitle\",\n title: \"Job title\",\n dataType: \"string\",\n },\n];\nconst data = [\n {\n firstName: \"Joe\",\n lastName: \"Bloggs\",\n jobTitle: \"Senior Software Developer, Site Reliability Engineering\",\n },\n {\n firstName: \"Sarah\",\n lastName: \"Smith\",\n jobTitle: \"Junior developer\",\n },\n {\n firstName: \"Mark\",\n lastName: \"Owens\",\n jobTitle: \"Team lead\",\n },\n];\nreturn (\n {shortCode}\n)`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={snippetsShowHide}>\n <IcDataTable\n caption=\"Data table truncation - show/hide\"\n columns={TRUNCATION_COLUMNS}\n data={TRUNCATION_DATA}\n truncationPattern=\"show-hide\"\n globalRowHeight={40}\n />\n</ComponentPreview>\n\n### Text wrap\n\nexport const snippetsTextWrap = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-data-table caption=\"Data table text wrap\"></ic-data-table>`,\n long: `{shortCode}\n<script>\n const dataTable = document.querySelector(\"ic-data-table\");\n const columns = [\n {\n key: \"firstName\",\n title: \"First name\",\n // dataType types: \"string\" | \"number\" | \"address\" | \"element\" | \"date\";\n dataType: \"string\",\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"jobTitle\",\n title: \"Job title\",\n dataType: \"string\",\n textWrap: true,\n },\n ];\n const data = [\n {\n firstName: \"Joe\",\n lastName: \"Bloggs\",\n jobTitle: \"Senior Software Developer, Site Reliability Engineering\",\n },\n {\n firstName: \"Sarah\",\n lastName: \"Smith\",\n jobTitle: \"Junior developer\",\n },\n {\n firstName: \"Mark\",\n lastName: \"Owens\",\n jobTitle: \"Team lead\",\n },\n ];\n dataTable.globalRowHeight = 40;\n</script>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcDataTable caption=\"Data table text wrap\" columns={columns} data={data} globalRowHeight={40}/>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const columns: IcDataTableColumnObject[] = [\n {\n key: \"firstName\",\n title: \"First name\",\n dataType: \"string\",\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"jobTitle\",\n title: \"Job title\",\n dataType: \"string\",\n textWrap: true,\n },\n];\nconst data = [\n {\n firstName: \"Joe\",\n lastName: \"Bloggs\",\n jobTitle: \"Senior Software Developer, Site Reliability Engineering\",\n },\n {\n firstName: \"Sarah\",\n lastName: \"Smith\",\n jobTitle: \"Junior developer\",\n },\n {\n firstName: \"Mark\",\n lastName: \"Owens\",\n jobTitle: \"Team lead\",\n },\n];\nreturn (\n {shortCode}\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const columns = [\n {\n key: \"firstName\",\n title: \"First name\",\n dataType: \"string\",\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"jobTitle\",\n title: \"Job title\",\n dataType: \"string\",\n textWrap: true,\n },\n];\nconst data = [\n {\n firstName: \"Joe\",\n lastName: \"Bloggs\",\n jobTitle: \"Senior Software Developer, Site Reliability Engineering\",\n },\n {\n firstName: \"Sarah\",\n lastName: \"Smith\",\n jobTitle: \"Junior developer\",\n },\n {\n firstName: \"Mark\",\n lastName: \"Owens\",\n jobTitle: \"Team lead\",\n },\n];\nreturn (\n {shortCode}\n)`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={snippetsTextWrap}>\n <IcDataTable\n caption=\"Data table text wrap\"\n columns={TRUNCATION_COLUMNS}\n data={TRUNCATION_DATA}\n globalRowHeight={40}\n />\n</ComponentPreview>\n",
"path": "/components/data-table/code",
"date": "2024-08-21",
"title": "Data table",
@@ -1835,11 +1835,11 @@
}
],
"meta": {
- "relativePath": "components/data-table/code.mdx",
- "createdAt": "2024-11-06T10:27:49.408Z",
- "lastModified": "2024-11-06T10:19:00.004Z",
- "size": 81274,
- "formattedSize": "79.4 KB"
+ "relativePath": "components\\data-table\\code.mdx",
+ "createdAt": "2024-12-04T12:10:34.567Z",
+ "lastModified": "2024-12-04T12:10:34.567Z",
+ "size": 81546,
+ "formattedSize": "79.6 KB"
}
},
{
@@ -1863,9 +1863,9 @@
],
"tags": ["Table"],
"meta": {
- "relativePath": "components/data-table/guidance.mdx",
- "createdAt": "2024-11-06T10:27:49.408Z",
- "lastModified": "2024-11-06T10:19:00.004Z",
+ "relativePath": "components\\data-table\\guidance.mdx",
+ "createdAt": "2024-11-05T11:57:51.375Z",
+ "lastModified": "2024-11-05T11:57:51.375Z",
"size": 1735,
"formattedSize": "1.7 KB"
}
@@ -1893,9 +1893,9 @@
}
],
"meta": {
- "relativePath": "components/date-input/accessibility.mdx",
- "createdAt": "2024-11-06T10:27:49.404Z",
- "lastModified": "2024-11-06T10:19:00.004Z",
+ "relativePath": "components\\date-input\\accessibility.mdx",
+ "createdAt": "2024-11-05T11:57:51.446Z",
+ "lastModified": "2024-11-05T11:57:51.446Z",
"size": 3605,
"formattedSize": "3.5 KB"
}
@@ -1923,9 +1923,9 @@
}
],
"meta": {
- "relativePath": "components/date-input/code.mdx",
- "createdAt": "2024-11-06T10:27:49.404Z",
- "lastModified": "2024-11-06T10:19:00.004Z",
+ "relativePath": "components\\date-input\\code.mdx",
+ "createdAt": "2024-11-05T11:57:51.516Z",
+ "lastModified": "2024-11-05T11:57:51.516Z",
"size": 17301,
"formattedSize": "16.9 KB"
}
@@ -1954,9 +1954,9 @@
}
],
"meta": {
- "relativePath": "components/date-input/guidance.mdx",
- "createdAt": "2024-11-06T10:27:49.404Z",
- "lastModified": "2024-11-06T10:19:00.004Z",
+ "relativePath": "components\\date-input\\guidance.mdx",
+ "createdAt": "2024-11-05T11:57:51.562Z",
+ "lastModified": "2024-11-05T11:57:51.562Z",
"size": 8270,
"formattedSize": "8.1 KB"
}
@@ -1984,16 +1984,16 @@
}
],
"meta": {
- "relativePath": "components/date-picker/accessibility.mdx",
- "createdAt": "2024-11-06T10:27:49.408Z",
- "lastModified": "2024-11-06T10:19:00.008Z",
+ "relativePath": "components\\date-picker\\accessibility.mdx",
+ "createdAt": "2024-11-05T11:57:51.584Z",
+ "lastModified": "2024-11-05T11:57:51.584Z",
"size": 3243,
"formattedSize": "3.2 KB"
}
},
{
"id": "components\\date-picker\\codex",
- "contents": "\nimport { IcDatePicker } from \"@ukic/canary-react\";\nimport { useState } from \"react\";\n\n## Component demo\n\nexport const snippets = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-date-picker\n label=\"When would you like to collect your coffee?\"\n></ic-date-picker>`,\n long: `.parent-container {\n padding: var(--ic-space-md);\n }\n</style>\n<body>\n <div class=\"parent-container\">\n {shortCode}\n </div>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcDatePicker label=\"When would you like to collect your coffee?\" />`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n padding: \"var(--ic-space-md)\",\n },\n});\nconst classes = useStyles();\nreturn (\n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n padding: \"var(--ic-space-md)\",\n },\n});\nconst classes = useStyles();\nreturn (\n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={snippets}>\n <IcDatePicker label=\"When would you like to collect your coffee?\" />\n</ComponentPreview>\n\n## Date picker details\n\n<ComponentDetails component=\"ic-date-picker\" canary />\n\n## Variants\n\n### Sizes\n\nSet the size of the date picker by using the `size` prop. This prop takes the values `small`, `default` or `large`. Depending on the chosen size, the prop will apply styling to increase or decrease the amount of spacing within the component.\n\nexport const sizes = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-date-picker\n label=\"When would you like to collect your coffee?\"\n size=\"small\"\n></ic-date-picker>\n<ic-date-picker\n label=\"When would you like to collect your coffee?\"\n size=\"default\"\n></ic-date-picker>\n<ic-date-picker\n label=\"When would you like to collect your coffee?\"\n size=\"large\"\n></ic-date-picker>`,\n long: `.parent-container {\n padding: var(--ic-space-md);\n }\n</style>\n<body>\n <div class=\"parent-container\">\n {shortCode}\n </div>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `IcDatePicker\n label=\"When would you like to collect your coffee?\"\n size=\"small\"\n/>\n<IcDatePicker label=\"When would you like to collect your coffee?\" />\n<IcDatePicker\n label=\"When would you like to collect your coffee?\"\n size=\"large\"\n/>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"var(--ic-space-md)\",\n padding: \"var(--ic-space-md)\",\n },\n});\nconst classes = useStyles();\nreturn ( \n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"var(--ic-space-md)\",\n padding: \"var(--ic-space-md)\",\n },\n});\nconst classes = useStyles();\nreturn ( \n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={sizes} style={{ flexDirection: \"column\" }}>\n <div\n style={{\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"1rem\",\n }}\n >\n <IcDatePicker\n label=\"When would you like to collect your coffee?\"\n size=\"small\"\n />\n <IcDatePicker label=\"When would you like to collect your coffee?\" />\n <IcDatePicker\n label=\"When would you like to collect your coffee?\"\n size=\"large\"\n />\n </div>\n</ComponentPreview>\n\n### Max width\n\nSet the size of the input field by using the `--input-width` CSS custom property. The picker will grow, but not exceed its maximum supported width.\n\nexport const maxWidth = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-date-picker\n label=\"When would you like to collect your coffee?\"\n size=\"small\"\n></ic-date-picker>\n<ic-date-picker\n label=\"When would you like to collect your coffee?\"\n size=\"default\"\n></ic-date-picker>\n<ic-date-picker\n label=\"When would you like to collect your coffee?\"\n size=\"large\"\n></ic-date-picker>`,\n long: `.parent-container {\n display: flex;\n flex-direction: column;\n gap: var(--ic-space-md);\n padding: var(--ic-space-md);\n }\n ic-date-picker {\n --input-width: 31.25rem;\n }\n</style>\n<body>\n <div class=\"parent-container\">\n {shortCode}\n </div>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcDatePicker\n className={classes.datePicker}\n label=\"When would you like to collect your coffee?\"\n size=\"small\"\n/>\n<IcDatePicker\n className={classes.datePicker}\n label=\"When would you like to collect your coffee?\"\n/>\n<IcDatePicker\n className={classes.datePicker}\n label=\"When would you like to collect your coffee?\"\n size=\"large\"\n/>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"var(--ic-space-md)\",\n padding: \"var(--ic-space-md)\",\n },\n datePicker: {\n \"--input-width\": \"31.25rem\",\n },\n});\nconst classes = useStyles();\nreturn ( \n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"var(--ic-space-md)\",\n padding: \"var(--ic-space-md)\",\n },\n datePicker: {\n \"--input-width\": \"31.25rem\",\n },\n});\nconst classes = useStyles();\nreturn ( \n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={maxWidth} style={{ flexDirection: \"column\" }}>\n <div\n style={{\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"1rem\",\n }}\n >\n <IcDatePicker\n style={{ \"--input-width\": \"31.25rem\" }}\n label=\"When would you like to collect your coffee?\"\n size=\"small\"\n />\n <IcDatePicker\n style={{ \"--input-width\": \"31.25rem\" }}\n label=\"When would you like to collect your coffee?\"\n />\n <IcDatePicker\n style={{ \"--input-width\": \"31.25rem\" }}\n label=\"When would you like to collect your coffee?\"\n size=\"large\"\n />\n </div>\n</ComponentPreview>\n\n### Disabled\n\nexport const disabled = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-date-picker\n label=\"When would you like to collect your coffee?\"\n disabled=\"true\"\n></ic-date-picker>`,\n long: `.parent-container {\n padding: var(--ic-space-md);\n }\n</style>\n<body>\n <div class=\"parent-container\">\n {shortCode}\n </div>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcDatePicker\n label=\"When would you like to collect your coffee?\"\n disabled\n/>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n padding: \"var(--ic-space-md)\",\n },\n});\nconst classes = useStyles();\nreturn (\n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n padding: \"var(--ic-space-md)\",\n },\n});\nconst classes = useStyles();\nreturn (\n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={disabled} style={{ flexDirection: \"column\" }}>\n <IcDatePicker label=\"When would you like to collect your coffee?\" disabled />\n</ComponentPreview>\n\n### Date formats\n\nThe `dateFormat` prop determines how dates are displayed. The supported formats are `DD/MM/YYYY`, `MM/DD/YYYY` or `YYYY/MM/DD`.\nThe default format is `DD/MM/YYYY`.\n\nexport const dateFormats = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-date-picker label=\"When would you like to collect your coffee?\"></ic-date-picker>\n<ic-date-picker label=\"When would you like to collect your coffee?\" date-format=\"MM/DD/YYYY\"></ic-date-picker>\n<ic-date-picker label=\"When would you like to collect your coffee?\" date-format=\"YYYY/MM/DD\"></ic-date-picker>`,\n long: `.parent-container {\n display: flex;\n flex-direction: column;\n gap: var(--ic-space-md);\n padding: var(--ic-space-md);\n }\n ic-date-picker {\n --input-width: 31.25rem;\n }\n</style>\n<body>\n <div class=\"parent-container\">\n {shortCode}\n </div>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcDatePicker label=\"When would you like to collect your coffee?\" />\n<IcDatePicker label=\"When would you like to collect your coffee?\" dateFormat=\"MM/DD/YYYY\" />\n<IcDatePicker label=\"When would you like to collect your coffee?\" dateFormat=\"YYYY/MM/DD\" />`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"var(--ic-space-md)\",\n padding: \"var(--ic-space-md)\",\n },\n});\nconst classes = useStyles();\nreturn ( \n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"var(--ic-space-md)\",\n padding: \"var(--ic-space-md)\",\n },\n});\nconst classes = useStyles();\nreturn ( \n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={dateFormats} style={{ flexDirection: \"column\" }}>\n <div style={{ display: \"flex\", flexDirection: \"column\", gap: \"1rem\" }}>\n <IcDatePicker label=\"When would you like to collect your coffee?\" />\n <IcDatePicker\n label=\"When would you like to collect your coffee?\"\n dateFormat=\"MM/DD/YYYY\"\n />\n <IcDatePicker\n label=\"When would you like to collect your coffee?\"\n dateFormat=\"YYYY/MM/DD\"\n />\n </div>\n</ComponentPreview>\n\n### Value\n\nThe `value` prop sets the date in the input field. The value can be in any format supported by the `dateFormat` prop, in ISO 8601 date string format (yyyy-mm-dd) or as a JavaScript Date object.\n\nexport const valueSnippet = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-date-picker label=\"When would you like to collect your coffee?\" value=\"01/01/2024\"></ic-date-picker>`,\n long: `.parent-container {\n padding: var(--ic-space-md);\n }\n</style>\n<body>\n <div class=\"parent-container\">\n {shortCode}\n </div>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcDatePicker label=\"When would you like to collect your coffee?\" value=\"01/01/2024\" />`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n padding: \"var(--ic-space-md)\",\n },\n});\nconst classes = useStyles();\nreturn (\n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n padding: \"var(--ic-space-md)\",\n },\n});\nconst classes = useStyles();\nreturn (\n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={valueSnippet} style={{ flexDirection: \"column\" }}>\n <IcDatePicker\n label=\"When would you like to collect your coffee?\"\n value=\"01/01/2024\"\n />\n</ComponentPreview>\n\n### Open at date\n\nIf no `value` is set, the `openAtDate` prop can be used to specify the date in view when the calendar view is opened. If not set to a value, the calendar will default to showing the current date.\n\nThe supported formats are the same as for the `value` prop.\n\nexport const openDate = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-date-picker label=\"When would you like to collect your coffee?\" helper-text=\"The calendar will open showing 25th December 2024, if no date selected\" open-at-date=\"2024-12-25\"></ic-date-picker>`,\n long: `.parent-container {\n padding: var(--ic-space-md);\n }\n</style>\n<body>\n <div class=\"parent-container\">\n {shortCode}\n </div>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcDatePicker label=\"When would you like to collect your coffee?\" helperText=\"The calendar will open showing 25th December 2024, if no date selected\" openAtDate=\"2024-12-25\" />`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n padding: \"var(--ic-space-md)\",\n },\n});\nconst classes = useStyles();\nreturn (\n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n padding: \"var(--ic-space-md)\",\n },\n});\nconst classes = useStyles();\nreturn (\n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={openDate} style={{ flexDirection: \"column\" }}>\n <IcDatePicker\n label=\"When would you like to collect your coffee?\"\n helperText=\"The calendar will open showing 25th December 2024, if no date selected\"\n openAtDate=\"2024-12-25\"\n />\n</ComponentPreview>\n\n### Start of week\n\nThe first day of the week can be changed by setting the `startOfWeek` prop. This is a numeric value where 0 = Sunday, 1 = Monday, etc. up to 6 = Saturday.\n\nexport const startWeek = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-date-picker label=\"When would you like to collect your coffee?\" start-of-week=\"0\"></ic-date-picker>`,\n long: `.parent-container {\n padding: var(--ic-space-md);\n }\n</style>\n<body>\n <div class=\"parent-container\">\n {shortCode}\n </div>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcDatePicker label=\"When would you like to collect your coffee?\" startOfWeek={0} />`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n padding: \"var(--ic-space-md)\",\n },\n});\nconst classes = useStyles();\nreturn (\n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n padding: \"var(--ic-space-md)\",\n },\n});\nconst classes = useStyles();\nreturn (\n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={startWeek} style={{ flexDirection: \"column\" }}>\n <IcDatePicker\n label=\"When would you like to collect your coffee?\"\n startOfWeek=\"0\"\n />\n</ComponentPreview>\n\n### Disable days of week\n\nSpecific days of the week can be disabled from selection by setting the `disableDays` prop. The value can be set as an array of numeric values where 0 = Sunday, 1 = Monday, etc. up to 6 = Saturday.\n\nexport const disabledDaysOfWeek = [0, 6];\n\nexport const disableDays = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-date-picker id=\"weekday-picker\" label=\"When would you like to collect your coffee?\"></ic-date-picker>`,\n long: `.parent-container {\n padding: var(--ic-space-md);\n }\n</style>\n<body>\n <div class=\"parent-container\">\n {shortCode}\n </div>\n <script>\n document.querySelector(\"#weekday-picker\").disableDays = [0, 6];\n </script>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcDatePicker label=\"When would you like to collect your coffee?\" disableDays={disabledDaysOfWeek} />`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const disabledDaysOfWeek = [0, 6]\nconst useStyles = createUseStyles({\n parentContainer: {\n padding: \"var(--ic-space-md)\",\n },\n});\nconst classes = useStyles();\nreturn (\n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const disabledDaysOfWeek = [0, 6];\nconst useStyles = createUseStyles({\n parentContainer: {\n padding: \"var(--ic-space-md)\",\n },\n});\nconst classes = useStyles();\nreturn (\n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={disableDays} style={{ flexDirection: \"column\" }}>\n <IcDatePicker\n label=\"When would you like to collect your coffee?\"\n disableDays={disabledDaysOfWeek}\n />\n</ComponentPreview>\n\n### Max and min\n\nThe `max` and `min` props can be used to limit the range of dates available for selection. Values can be in any format supported by the `dateFormat` prop, in ISO 8601 date string format (yyyy-mm-dd) or as a JavaScript Date object.\n\nexport const maxMin = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-date-picker label=\"When would you like to collect your coffee?\" helper-text=\"Choose a date between the 1st and 31st of July\" min=\"2024-07-01\" max=\"2024-07-31\" show-picker-today-button=\"false\"></ic-date-picker>`,\n long: `.parent-container {\n padding: var(--ic-space-md);\n }\n</style>\n<body>\n <div class=\"parent-container\">\n {shortCode}\n </div>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcDatePicker label=\"When would you like to collect your coffee?\" helperText=\"Choose a date between the 1st and 31st of July\" min=\"2024-07-01\" max=\"2024-07-31\" showPickerTodayButton={false} />`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n padding: \"var(--ic-space-md)\",\n },\n});\nconst classes = useStyles();\nreturn (\n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n padding: \"var(--ic-space-md)\",\n },\n});\nconst classes = useStyles();\nreturn (\n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={maxMin} style={{ flexDirection: \"column\" }}>\n <IcDatePicker\n label=\"When would you like to collect your coffee?\"\n helperText=\"Choose a date between the 1st and 31st of July\"\n min=\"2024-07-01\"\n max=\"2024-07-31\"\n showPickerTodayButton=\"false\"\n />\n</ComponentPreview>\n\n### Disable dates in past\n\nDates before today can be disabled with the `disablePast` prop.\n\nexport const disablePast = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-date-picker label=\"When would you like to collect your coffee?\" disable-past=\"true\"></ic-date-picker>`,\n long: `.parent-container {\n padding: var(--ic-space-md);\n }\n</style>\n<body>\n <div class=\"parent-container\">\n {shortCode}\n </div>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcDatePicker label=\"When would you like to collect your coffee?\" disablePast />`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n padding: \"var(--ic-space-md)\",\n },\n});\nconst classes = useStyles();\nreturn (\n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n padding: \"var(--ic-space-md)\",\n },\n});\nconst classes = useStyles();\nreturn (\n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={disablePast} style={{ flexDirection: \"column\" }}>\n <IcDatePicker\n label=\"When would you like to collect your coffee?\"\n disablePast\n />\n</ComponentPreview>\n\n### Disable dates in future\n\nDates after today can be disabled with the `disableFuture` prop.\n\nexport const disableFuture = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-date-picker label=\"When would you like to collect your coffee?\" disable-future=\"true\"></ic-date-picker>`,\n long: `.parent-container {\n padding: var(--ic-space-md);\n }\n</style>\n<body>\n <div class=\"parent-container\">\n {shortCode}\n </div>}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcDatePicker label=\"When would you like to collect your coffee?\" disableFuture />`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n padding: \"var(--ic-space-md)\",\n },\n});\nconst classes = useStyles();\nreturn (\n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n padding: \"var(--ic-space-md)\",\n },\n});\nconst classes = useStyles();\nreturn (\n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={disableFuture} style={{ flexDirection: \"column\" }}>\n <IcDatePicker\n label=\"When would you like to collect your coffee?\"\n disableFuture\n />\n</ComponentPreview>\n\n### Days outside month hidden\n\nDays outside of the current month in view can be hidden by setting the `showDaysOutsideMonth` prop to `false`.\n\nexport const dayHidden = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-date-picker label=\"When would you like to collect your coffee?\" show-days-outside-month=\"false\"></ic-date-picker>`,\n long: `.parent-container {\n padding: var(--ic-space-md);\n }\n</style>\n<body>\n <div class=\"parent-container\">\n {shortCode}\n </div>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcDatePicker label=\"When would you like to collect your coffee?\" showDaysOutsideMonth={false} />`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n padding: \"var(--ic-space-md)\",\n },\n});\nconst classes = useStyles();\nreturn (\n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n padding: \"var(--ic-space-md)\",\n },\n});\nconst classes = useStyles();\nreturn (\n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={dayHidden} style={{ flexDirection: \"column\" }}>\n <IcDatePicker\n label=\"When would you like to collect your coffee?\"\n showDaysOutsideMonth=\"false\"\n />\n</ComponentPreview>\n\n### Today and clear buttons hidden\n\nThe 'Go to today' and 'Clear' buttons can be hidden from the calendar view by setting the `showPickerTodayButton` and `showPickerClearButton` props to `false`.\n\nexport const btnHidden = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-date-picker label=\"When would you like to collect your coffee?\" show-picker-today-button=\"false\" show-picker-clear-button=\"false\"></ic-date-picker>`,\n long: `.parent-container {\n padding: var(--ic-space-md);\n }\n</style>\n<body>\n <div class=\"parent-container\">\n {shortCode}\n </div>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcDatePicker label=\"When would you like to collect your coffee?\" showPickerTodayButton={false} showPickerClearButton={false} />`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n padding: \"var(--ic-space-md)\",\n },\n});\nconst classes = useStyles();\nreturn (\n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n padding: \"var(--ic-space-md)\",\n },\n});\nconst classes = useStyles();\nreturn (\n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={btnHidden} style={{ flexDirection: \"column\" }}>\n <IcDatePicker\n label=\"When would you like to collect your coffee?\"\n showPickerTodayButton=\"false\"\n showPickerClearButton=\"false\"\n />\n</ComponentPreview>\n\n### Javascript dates\n\nAny prop that accepts a date value can be set to a Javascript Date object. The following example sets the `value`, `max` and `min` props.\n\nexport const jsDates = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-date-picker\n id=\"js-date-picker\"\n label=\"When would you like to collect your coffee?\"\n helper-text=\"Choose a date between the 1st and 31st of July\"\n show-picker-today-button=\"false\"\n></ic-date-picker>`,\n long: `.parent-container {\n padding: var(--ic-space-md);\n }\n</style>\n<body>\n <div class=\"parent-container\">\n {shortCode}\n </div>\n <script>\n const datePicker = document.querySelector(\"#js-date-picker\");\n datePicker.min = new Date(2024, 6, 1);\n datePicker.max = new Date(2024, 6, 31);\n datePicker.value = new Date(2024, 6, 15);\n </script>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcDatePicker\n label=\"When would you like to collect your coffee?\"\n min={new Date(2024, 6, 1)}\n max={new Date(2024, 6, 31)}\n value={new Date(2024, 6, 15)}\n helperText=\"Choose a date between the 1st and 31st of July\"\n showPickerTodayButton={false}\n/>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n padding: \"var(--ic-space-md)\",\n },\n});\nconst classes = useStyles();\nreturn (\n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n padding: \"var(--ic-space-md)\",\n },\n});\nconst classes = useStyles();\nreturn (\n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={jsDates} style={{ flexDirection: \"column\" }}>\n <IcDatePicker\n label=\"When would you like to collect your coffee?\"\n min={new Date(2024, 6, 1)}\n max={new Date(2024, 6, 31)}\n value={new Date(2024, 6, 15)}\n helperText=\"Choose a date between the 1st and 31st of July\"\n showPickerTodayButton=\"false\"\n />\n</ComponentPreview>\n\n### IcChange Event\n\nThe `IcChange` event is emitted by the date picker when the selected date changes.\n\nexport const change = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-date-picker\n id=\"ic-change-date-picker\"\n label=\"When would you like to collect your coffee?\"\n></ic-date-picker>\n<span id=\"selected-date\">\n Selected date:\n</span>`,\n long: `.parent-container {\n display: flex;\n flex-direction: column;\n gap: 3.125rem;\n padding: var(--ic-space-md);\n }\n</style>\n<body>\n <div class=\"parent-container\">\n {shortCode}\n </div>\n <script>\n const updateSelectedDate = (ev) =>{\n const el = document.querySelector(\"#selected-date\");\n el.innerHTML = \"Selected date: \" + ev.detail.value;\n }\n const datePicker = document.querySelector(\"#ic-change-date-picker\");\n datePicker.addEventListener(\"icChange\", updateSelectedDate);\n </script>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcDatePicker\n label=\"When would you like to collect your coffee?\"\n onIcChange={dateChangedHandler}\n value={value}\n/>\n<span>\n {selectedDate}\n</span>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const [selectedDate, setSelectedDate] = useState<string>(\"Selected date:\");\nconst [value, setValue] = useState<Date | undefined>();\nconst dateChangedHandler = (event: { detail: { value: Date; }; }) => {\n setValue(event.detail.value);\n setSelectedDate(\"Selected date: \" + event.detail.value);\n};\nconst useStyles = createUseStyles({\n parentContainer: {\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"3.125rem\",\n padding: \"var(--ic-space-md)\",\n },\n});\nconst classes = useStyles();\nreturn (\n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const [selectedDate, setSelectedDate] = useState(\"Selected date:\");\nconst [value, setValue] = useState();\nconst dateChangedHandler = (event) => {\n setValue(event.detail.value);\n setSelectedDate(\"Selected date: \" + event.detail.value);\n};\nconst useStyles = createUseStyles({\n parentContainer: {\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"3.125rem\",\n padding: \"var(--ic-space-md)\",\n },\n});\nconst classes = useStyles();\nreturn (\n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n ],\n },\n },\n];\n\nexport const DatePickerWithIcChange = () => {\n const [selectedDate, setSelectedDate] = useState(\"Selected date:\");\n const [value, setValue] = useState();\n const dateChangedHandler = (event) => {\n setValue(event.detail.value);\n setSelectedDate(`Selected date: ${event.detail.value}`);\n };\n return (\n <div style={{ display: \"flex\", flexDirection: \"column\", gap: \"3.125rem\" }}>\n <IcDatePicker\n label=\"When would you like to collect your coffee?\"\n onIcChange={dateChangedHandler}\n value={value}\n />\n <span>{selectedDate}</span>\n </div>\n );\n};\n\n<ComponentPreview snippets={change} style={{ flexDirection: \"column\" }}>\n <DatePickerWithIcChange />\n</ComponentPreview>\n",
+ "contents": "\r\nimport { IcDatePicker } from \"@ukic/canary-react\";\r\nimport { useState } from \"react\";\r\n\r\n## Component demo\r\n\r\nexport const snippets = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-date-picker\r\n label=\"When would you like to collect your coffee?\"\r\n></ic-date-picker>`,\r\n long: `.parent-container {\r\n padding: var(--ic-space-md);\r\n }\r\n</style>\r\n<body>\r\n <div class=\"parent-container\">\r\n {shortCode}\r\n </div>`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcDatePicker label=\"When would you like to collect your coffee?\" />`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `const useStyles = createUseStyles({\r\n parentContainer: {\r\n padding: \"var(--ic-space-md)\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nreturn (\r\n <div className={classes.parentContainer}>\r\n {shortCode}\r\n </div>\r\n)`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `const useStyles = createUseStyles({\r\n parentContainer: {\r\n padding: \"var(--ic-space-md)\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nreturn (\r\n <div className={classes.parentContainer}>\r\n {shortCode}\r\n </div>\r\n)`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview snippets={snippets}>\r\n <IcDatePicker label=\"When would you like to collect your coffee?\" />\r\n</ComponentPreview>\r\n\r\n## Date picker details\r\n\r\n<ComponentDetails component=\"ic-date-picker\" canary />\r\n\r\n## Variants\r\n\r\n### Sizes\r\n\r\nSet the size of the date picker by using the `size` prop. This prop takes the values `small`, `default` or `large`. Depending on the chosen size, the prop will apply styling to increase or decrease the amount of spacing within the component.\r\n\r\nexport const sizes = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-date-picker\r\n label=\"When would you like to collect your coffee?\"\r\n size=\"small\"\r\n></ic-date-picker>\r\n<ic-date-picker\r\n label=\"When would you like to collect your coffee?\"\r\n size=\"default\"\r\n></ic-date-picker>\r\n<ic-date-picker\r\n label=\"When would you like to collect your coffee?\"\r\n size=\"large\"\r\n></ic-date-picker>`,\r\n long: `.parent-container {\r\n padding: var(--ic-space-md);\r\n }\r\n</style>\r\n<body>\r\n <div class=\"parent-container\">\r\n {shortCode}\r\n </div>`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `IcDatePicker\r\n label=\"When would you like to collect your coffee?\"\r\n size=\"small\"\r\n/>\r\n<IcDatePicker label=\"When would you like to collect your coffee?\" />\r\n<IcDatePicker\r\n label=\"When would you like to collect your coffee?\"\r\n size=\"large\"\r\n/>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `const useStyles = createUseStyles({\r\n parentContainer: {\r\n display: \"flex\",\r\n flexDirection: \"column\",\r\n gap: \"var(--ic-space-md)\",\r\n padding: \"var(--ic-space-md)\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nreturn ( \r\n <div className={classes.parentContainer}>\r\n {shortCode}\r\n </div>\r\n)`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `const useStyles = createUseStyles({\r\n parentContainer: {\r\n display: \"flex\",\r\n flexDirection: \"column\",\r\n gap: \"var(--ic-space-md)\",\r\n padding: \"var(--ic-space-md)\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nreturn ( \r\n <div className={classes.parentContainer}>\r\n {shortCode}\r\n </div>\r\n)`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview snippets={sizes} style={{ flexDirection: \"column\" }}>\r\n <div\r\n style={{\r\n display: \"flex\",\r\n flexDirection: \"column\",\r\n gap: \"1rem\",\r\n }}\r\n >\r\n <IcDatePicker\r\n label=\"When would you like to collect your coffee?\"\r\n size=\"small\"\r\n />\r\n <IcDatePicker label=\"When would you like to collect your coffee?\" />\r\n <IcDatePicker\r\n label=\"When would you like to collect your coffee?\"\r\n size=\"large\"\r\n />\r\n </div>\r\n</ComponentPreview>\r\n\r\n### Max width\r\n\r\nSet the size of the input field by using the `--input-width` CSS custom property. The picker will grow, but not exceed its maximum supported width.\r\n\r\nexport const maxWidth = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-date-picker\r\n label=\"When would you like to collect your coffee?\"\r\n size=\"small\"\r\n></ic-date-picker>\r\n<ic-date-picker\r\n label=\"When would you like to collect your coffee?\"\r\n size=\"default\"\r\n></ic-date-picker>\r\n<ic-date-picker\r\n label=\"When would you like to collect your coffee?\"\r\n size=\"large\"\r\n></ic-date-picker>`,\r\n long: `.parent-container {\r\n display: flex;\r\n flex-direction: column;\r\n gap: var(--ic-space-md);\r\n padding: var(--ic-space-md);\r\n }\r\n ic-date-picker {\r\n --input-width: 31.25rem;\r\n }\r\n</style>\r\n<body>\r\n <div class=\"parent-container\">\r\n {shortCode}\r\n </div>`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcDatePicker\r\n className={classes.datePicker}\r\n label=\"When would you like to collect your coffee?\"\r\n size=\"small\"\r\n/>\r\n<IcDatePicker\r\n className={classes.datePicker}\r\n label=\"When would you like to collect your coffee?\"\r\n/>\r\n<IcDatePicker\r\n className={classes.datePicker}\r\n label=\"When would you like to collect your coffee?\"\r\n size=\"large\"\r\n/>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `const useStyles = createUseStyles({\r\n parentContainer: {\r\n display: \"flex\",\r\n flexDirection: \"column\",\r\n gap: \"var(--ic-space-md)\",\r\n padding: \"var(--ic-space-md)\",\r\n },\r\n datePicker: {\r\n \"--input-width\": \"31.25rem\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nreturn ( \r\n <div className={classes.parentContainer}>\r\n {shortCode}\r\n </div>\r\n)`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `const useStyles = createUseStyles({\r\n parentContainer: {\r\n display: \"flex\",\r\n flexDirection: \"column\",\r\n gap: \"var(--ic-space-md)\",\r\n padding: \"var(--ic-space-md)\",\r\n },\r\n datePicker: {\r\n \"--input-width\": \"31.25rem\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nreturn ( \r\n <div className={classes.parentContainer}>\r\n {shortCode}\r\n </div>\r\n)`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview snippets={maxWidth} style={{ flexDirection: \"column\" }}>\r\n <div\r\n style={{\r\n display: \"flex\",\r\n flexDirection: \"column\",\r\n gap: \"1rem\",\r\n }}\r\n >\r\n <IcDatePicker\r\n style={{ \"--input-width\": \"31.25rem\" }}\r\n label=\"When would you like to collect your coffee?\"\r\n size=\"small\"\r\n />\r\n <IcDatePicker\r\n style={{ \"--input-width\": \"31.25rem\" }}\r\n label=\"When would you like to collect your coffee?\"\r\n />\r\n <IcDatePicker\r\n style={{ \"--input-width\": \"31.25rem\" }}\r\n label=\"When would you like to collect your coffee?\"\r\n size=\"large\"\r\n />\r\n </div>\r\n</ComponentPreview>\r\n\r\n### Disabled\r\n\r\nexport const disabled = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-date-picker\r\n label=\"When would you like to collect your coffee?\"\r\n disabled=\"true\"\r\n></ic-date-picker>`,\r\n long: `.parent-container {\r\n padding: var(--ic-space-md);\r\n }\r\n</style>\r\n<body>\r\n <div class=\"parent-container\">\r\n {shortCode}\r\n </div>`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcDatePicker\r\n label=\"When would you like to collect your coffee?\"\r\n disabled\r\n/>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `const useStyles = createUseStyles({\r\n parentContainer: {\r\n padding: \"var(--ic-space-md)\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nreturn (\r\n <div className={classes.parentContainer}>\r\n {shortCode}\r\n </div>\r\n)`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `const useStyles = createUseStyles({\r\n parentContainer: {\r\n padding: \"var(--ic-space-md)\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nreturn (\r\n <div className={classes.parentContainer}>\r\n {shortCode}\r\n </div>\r\n)`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview snippets={disabled} style={{ flexDirection: \"column\" }}>\r\n <IcDatePicker label=\"When would you like to collect your coffee?\" disabled />\r\n</ComponentPreview>\r\n\r\n### Date formats\r\n\r\nThe `dateFormat` prop determines how dates are displayed. The supported formats are `DD/MM/YYYY`, `MM/DD/YYYY` or `YYYY/MM/DD`.\r\nThe default format is `DD/MM/YYYY`.\r\n\r\nexport const dateFormats = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-date-picker label=\"When would you like to collect your coffee?\"></ic-date-picker>\r\n<ic-date-picker label=\"When would you like to collect your coffee?\" date-format=\"MM/DD/YYYY\"></ic-date-picker>\r\n<ic-date-picker label=\"When would you like to collect your coffee?\" date-format=\"YYYY/MM/DD\"></ic-date-picker>`,\r\n long: `.parent-container {\r\n display: flex;\r\n flex-direction: column;\r\n gap: var(--ic-space-md);\r\n padding: var(--ic-space-md);\r\n }\r\n ic-date-picker {\r\n --input-width: 31.25rem;\r\n }\r\n</style>\r\n<body>\r\n <div class=\"parent-container\">\r\n {shortCode}\r\n </div>`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcDatePicker label=\"When would you like to collect your coffee?\" />\r\n<IcDatePicker label=\"When would you like to collect your coffee?\" dateFormat=\"MM/DD/YYYY\" />\r\n<IcDatePicker label=\"When would you like to collect your coffee?\" dateFormat=\"YYYY/MM/DD\" />`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `const useStyles = createUseStyles({\r\n parentContainer: {\r\n display: \"flex\",\r\n flexDirection: \"column\",\r\n gap: \"var(--ic-space-md)\",\r\n padding: \"var(--ic-space-md)\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nreturn ( \r\n <div className={classes.parentContainer}>\r\n {shortCode}\r\n </div>\r\n)`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `const useStyles = createUseStyles({\r\n parentContainer: {\r\n display: \"flex\",\r\n flexDirection: \"column\",\r\n gap: \"var(--ic-space-md)\",\r\n padding: \"var(--ic-space-md)\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nreturn ( \r\n <div className={classes.parentContainer}>\r\n {shortCode}\r\n </div>\r\n)`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview snippets={dateFormats} style={{ flexDirection: \"column\" }}>\r\n <div style={{ display: \"flex\", flexDirection: \"column\", gap: \"1rem\" }}>\r\n <IcDatePicker label=\"When would you like to collect your coffee?\" />\r\n <IcDatePicker\r\n label=\"When would you like to collect your coffee?\"\r\n dateFormat=\"MM/DD/YYYY\"\r\n />\r\n <IcDatePicker\r\n label=\"When would you like to collect your coffee?\"\r\n dateFormat=\"YYYY/MM/DD\"\r\n />\r\n </div>\r\n</ComponentPreview>\r\n\r\n### Value\r\n\r\nThe `value` prop sets the date in the input field. The value can be in any format supported by the `dateFormat` prop, in ISO 8601 date string format (yyyy-mm-dd) or as a JavaScript Date object.\r\n\r\nexport const valueSnippet = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-date-picker label=\"When would you like to collect your coffee?\" value=\"01/01/2024\"></ic-date-picker>`,\r\n long: `.parent-container {\r\n padding: var(--ic-space-md);\r\n }\r\n</style>\r\n<body>\r\n <div class=\"parent-container\">\r\n {shortCode}\r\n </div>`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcDatePicker label=\"When would you like to collect your coffee?\" value=\"01/01/2024\" />`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `const useStyles = createUseStyles({\r\n parentContainer: {\r\n padding: \"var(--ic-space-md)\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nreturn (\r\n <div className={classes.parentContainer}>\r\n {shortCode}\r\n </div>\r\n)`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `const useStyles = createUseStyles({\r\n parentContainer: {\r\n padding: \"var(--ic-space-md)\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nreturn (\r\n <div className={classes.parentContainer}>\r\n {shortCode}\r\n </div>\r\n)`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview snippets={valueSnippet} style={{ flexDirection: \"column\" }}>\r\n <IcDatePicker\r\n label=\"When would you like to collect your coffee?\"\r\n value=\"01/01/2024\"\r\n />\r\n</ComponentPreview>\r\n\r\n### Open at date\r\n\r\nIf no `value` is set, the `openAtDate` prop can be used to specify the date in view when the calendar view is opened. If not set to a value, the calendar will default to showing the current date.\r\n\r\nThe supported formats are the same as for the `value` prop.\r\n\r\nexport const openDate = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-date-picker label=\"When would you like to collect your coffee?\" helper-text=\"The calendar will open showing 25th December 2024, if no date selected\" open-at-date=\"2024-12-25\"></ic-date-picker>`,\r\n long: `.parent-container {\r\n padding: var(--ic-space-md);\r\n }\r\n</style>\r\n<body>\r\n <div class=\"parent-container\">\r\n {shortCode}\r\n </div>`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcDatePicker label=\"When would you like to collect your coffee?\" helperText=\"The calendar will open showing 25th December 2024, if no date selected\" openAtDate=\"2024-12-25\" />`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `const useStyles = createUseStyles({\r\n parentContainer: {\r\n padding: \"var(--ic-space-md)\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nreturn (\r\n <div className={classes.parentContainer}>\r\n {shortCode}\r\n </div>\r\n)`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `const useStyles = createUseStyles({\r\n parentContainer: {\r\n padding: \"var(--ic-space-md)\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nreturn (\r\n <div className={classes.parentContainer}>\r\n {shortCode}\r\n </div>\r\n)`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview snippets={openDate} style={{ flexDirection: \"column\" }}>\r\n <IcDatePicker\r\n label=\"When would you like to collect your coffee?\"\r\n helperText=\"The calendar will open showing 25th December 2024, if no date selected\"\r\n openAtDate=\"2024-12-25\"\r\n />\r\n</ComponentPreview>\r\n\r\n### Start of week\r\n\r\nThe first day of the week can be changed by setting the `startOfWeek` prop. This is a numeric value where 0 = Sunday, 1 = Monday, etc. up to 6 = Saturday.\r\n\r\nexport const startWeek = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-date-picker label=\"When would you like to collect your coffee?\" start-of-week=\"0\"></ic-date-picker>`,\r\n long: `.parent-container {\r\n padding: var(--ic-space-md);\r\n }\r\n</style>\r\n<body>\r\n <div class=\"parent-container\">\r\n {shortCode}\r\n </div>`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcDatePicker label=\"When would you like to collect your coffee?\" startOfWeek={0} />`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `const useStyles = createUseStyles({\r\n parentContainer: {\r\n padding: \"var(--ic-space-md)\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nreturn (\r\n <div className={classes.parentContainer}>\r\n {shortCode}\r\n </div>\r\n)`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `const useStyles = createUseStyles({\r\n parentContainer: {\r\n padding: \"var(--ic-space-md)\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nreturn (\r\n <div className={classes.parentContainer}>\r\n {shortCode}\r\n </div>\r\n)`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview snippets={startWeek} style={{ flexDirection: \"column\" }}>\r\n <IcDatePicker\r\n label=\"When would you like to collect your coffee?\"\r\n startOfWeek=\"0\"\r\n />\r\n</ComponentPreview>\r\n\r\n### Disable days of week\r\n\r\nSpecific days of the week can be disabled from selection by setting the `disableDays` prop. The value can be set as an array of numeric values where 0 = Sunday, 1 = Monday, etc. up to 6 = Saturday.\r\n\r\nexport const disabledDaysOfWeek = [0, 6];\r\n\r\nexport const disableDays = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-date-picker id=\"weekday-picker\" label=\"When would you like to collect your coffee?\"></ic-date-picker>`,\r\n long: `.parent-container {\r\n padding: var(--ic-space-md);\r\n }\r\n</style>\r\n<body>\r\n <div class=\"parent-container\">\r\n {shortCode}\r\n </div>\r\n <script>\r\n document.querySelector(\"#weekday-picker\").disableDays = [0, 6];\r\n </script>`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcDatePicker label=\"When would you like to collect your coffee?\" disableDays={disabledDaysOfWeek} />`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `const disabledDaysOfWeek = [0, 6]\r\nconst useStyles = createUseStyles({\r\n parentContainer: {\r\n padding: \"var(--ic-space-md)\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nreturn (\r\n <div className={classes.parentContainer}>\r\n {shortCode}\r\n </div>\r\n)`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `const disabledDaysOfWeek = [0, 6];\r\nconst useStyles = createUseStyles({\r\n parentContainer: {\r\n padding: \"var(--ic-space-md)\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nreturn (\r\n <div className={classes.parentContainer}>\r\n {shortCode}\r\n </div>\r\n)`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview snippets={disableDays} style={{ flexDirection: \"column\" }}>\r\n <IcDatePicker\r\n label=\"When would you like to collect your coffee?\"\r\n disableDays={disabledDaysOfWeek}\r\n />\r\n</ComponentPreview>\r\n\r\n### Max and min\r\n\r\nThe `max` and `min` props can be used to limit the range of dates available for selection. Values can be in any format supported by the `dateFormat` prop, in ISO 8601 date string format (yyyy-mm-dd) or as a JavaScript Date object.\r\n\r\nexport const maxMin = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-date-picker label=\"When would you like to collect your coffee?\" helper-text=\"Choose a date between the 1st and 31st of July\" min=\"2024-07-01\" max=\"2024-07-31\" show-picker-today-button=\"false\"></ic-date-picker>`,\r\n long: `.parent-container {\r\n padding: var(--ic-space-md);\r\n }\r\n</style>\r\n<body>\r\n <div class=\"parent-container\">\r\n {shortCode}\r\n </div>`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcDatePicker label=\"When would you like to collect your coffee?\" helperText=\"Choose a date between the 1st and 31st of July\" min=\"2024-07-01\" max=\"2024-07-31\" showPickerTodayButton={false} />`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `const useStyles = createUseStyles({\r\n parentContainer: {\r\n padding: \"var(--ic-space-md)\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nreturn (\r\n <div className={classes.parentContainer}>\r\n {shortCode}\r\n </div>\r\n)`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `const useStyles = createUseStyles({\r\n parentContainer: {\r\n padding: \"var(--ic-space-md)\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nreturn (\r\n <div className={classes.parentContainer}>\r\n {shortCode}\r\n </div>\r\n)`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview snippets={maxMin} style={{ flexDirection: \"column\" }}>\r\n <IcDatePicker\r\n label=\"When would you like to collect your coffee?\"\r\n helperText=\"Choose a date between the 1st and 31st of July\"\r\n min=\"2024-07-01\"\r\n max=\"2024-07-31\"\r\n showPickerTodayButton=\"false\"\r\n />\r\n</ComponentPreview>\r\n\r\n### Disable dates in past\r\n\r\nDates before today can be disabled with the `disablePast` prop.\r\n\r\nexport const disablePast = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-date-picker label=\"When would you like to collect your coffee?\" disable-past=\"true\"></ic-date-picker>`,\r\n long: `.parent-container {\r\n padding: var(--ic-space-md);\r\n }\r\n</style>\r\n<body>\r\n <div class=\"parent-container\">\r\n {shortCode}\r\n </div>`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcDatePicker label=\"When would you like to collect your coffee?\" disablePast />`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `const useStyles = createUseStyles({\r\n parentContainer: {\r\n padding: \"var(--ic-space-md)\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nreturn (\r\n <div className={classes.parentContainer}>\r\n {shortCode}\r\n </div>\r\n)`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `const useStyles = createUseStyles({\r\n parentContainer: {\r\n padding: \"var(--ic-space-md)\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nreturn (\r\n <div className={classes.parentContainer}>\r\n {shortCode}\r\n </div>\r\n)`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview snippets={disablePast} style={{ flexDirection: \"column\" }}>\r\n <IcDatePicker\r\n label=\"When would you like to collect your coffee?\"\r\n disablePast\r\n />\r\n</ComponentPreview>\r\n\r\n### Disable dates in future\r\n\r\nDates after today can be disabled with the `disableFuture` prop.\r\n\r\nexport const disableFuture = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-date-picker label=\"When would you like to collect your coffee?\" disable-future=\"true\"></ic-date-picker>`,\r\n long: `.parent-container {\r\n padding: var(--ic-space-md);\r\n }\r\n</style>\r\n<body>\r\n <div class=\"parent-container\">\r\n {shortCode}\r\n </div>}`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcDatePicker label=\"When would you like to collect your coffee?\" disableFuture />`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `const useStyles = createUseStyles({\r\n parentContainer: {\r\n padding: \"var(--ic-space-md)\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nreturn (\r\n <div className={classes.parentContainer}>\r\n {shortCode}\r\n </div>\r\n)`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `const useStyles = createUseStyles({\r\n parentContainer: {\r\n padding: \"var(--ic-space-md)\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nreturn (\r\n <div className={classes.parentContainer}>\r\n {shortCode}\r\n </div>\r\n)`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview snippets={disableFuture} style={{ flexDirection: \"column\" }}>\r\n <IcDatePicker\r\n label=\"When would you like to collect your coffee?\"\r\n disableFuture\r\n />\r\n</ComponentPreview>\r\n\r\n### Days outside month hidden\r\n\r\nDays outside of the current month in view can be hidden by setting the `showDaysOutsideMonth` prop to `false`.\r\n\r\nexport const dayHidden = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-date-picker label=\"When would you like to collect your coffee?\" show-days-outside-month=\"false\"></ic-date-picker>`,\r\n long: `.parent-container {\r\n padding: var(--ic-space-md);\r\n }\r\n</style>\r\n<body>\r\n <div class=\"parent-container\">\r\n {shortCode}\r\n </div>`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcDatePicker label=\"When would you like to collect your coffee?\" showDaysOutsideMonth={false} />`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `const useStyles = createUseStyles({\r\n parentContainer: {\r\n padding: \"var(--ic-space-md)\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nreturn (\r\n <div className={classes.parentContainer}>\r\n {shortCode}\r\n </div>\r\n)`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `const useStyles = createUseStyles({\r\n parentContainer: {\r\n padding: \"var(--ic-space-md)\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nreturn (\r\n <div className={classes.parentContainer}>\r\n {shortCode}\r\n </div>\r\n)`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview snippets={dayHidden} style={{ flexDirection: \"column\" }}>\r\n <IcDatePicker\r\n label=\"When would you like to collect your coffee?\"\r\n showDaysOutsideMonth=\"false\"\r\n />\r\n</ComponentPreview>\r\n\r\n### Today and clear buttons hidden\r\n\r\nThe 'Go to today' and 'Clear' buttons can be hidden from the calendar view by setting the `showPickerTodayButton` and `showPickerClearButton` props to `false`.\r\n\r\nexport const btnHidden = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-date-picker label=\"When would you like to collect your coffee?\" show-picker-today-button=\"false\" show-picker-clear-button=\"false\"></ic-date-picker>`,\r\n long: `.parent-container {\r\n padding: var(--ic-space-md);\r\n }\r\n</style>\r\n<body>\r\n <div class=\"parent-container\">\r\n {shortCode}\r\n </div>`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcDatePicker label=\"When would you like to collect your coffee?\" showPickerTodayButton={false} showPickerClearButton={false} />`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `const useStyles = createUseStyles({\r\n parentContainer: {\r\n padding: \"var(--ic-space-md)\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nreturn (\r\n <div className={classes.parentContainer}>\r\n {shortCode}\r\n </div>\r\n)`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `const useStyles = createUseStyles({\r\n parentContainer: {\r\n padding: \"var(--ic-space-md)\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nreturn (\r\n <div className={classes.parentContainer}>\r\n {shortCode}\r\n </div>\r\n)`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview snippets={btnHidden} style={{ flexDirection: \"column\" }}>\r\n <IcDatePicker\r\n label=\"When would you like to collect your coffee?\"\r\n showPickerTodayButton=\"false\"\r\n showPickerClearButton=\"false\"\r\n />\r\n</ComponentPreview>\r\n\r\n### Javascript dates\r\n\r\nAny prop that accepts a date value can be set to a Javascript Date object. The following example sets the `value`, `max` and `min` props.\r\n\r\nexport const jsDates = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-date-picker\r\n id=\"js-date-picker\"\r\n label=\"When would you like to collect your coffee?\"\r\n helper-text=\"Choose a date between the 1st and 31st of July\"\r\n show-picker-today-button=\"false\"\r\n></ic-date-picker>`,\r\n long: `.parent-container {\r\n padding: var(--ic-space-md);\r\n }\r\n</style>\r\n<body>\r\n <div class=\"parent-container\">\r\n {shortCode}\r\n </div>\r\n <script>\r\n const datePicker = document.querySelector(\"#js-date-picker\");\r\n datePicker.min = new Date(2024, 6, 1);\r\n datePicker.max = new Date(2024, 6, 31);\r\n datePicker.value = new Date(2024, 6, 15);\r\n </script>`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcDatePicker\r\n label=\"When would you like to collect your coffee?\"\r\n min={new Date(2024, 6, 1)}\r\n max={new Date(2024, 6, 31)}\r\n value={new Date(2024, 6, 15)}\r\n helperText=\"Choose a date between the 1st and 31st of July\"\r\n showPickerTodayButton={false}\r\n/>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `const useStyles = createUseStyles({\r\n parentContainer: {\r\n padding: \"var(--ic-space-md)\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nreturn (\r\n <div className={classes.parentContainer}>\r\n {shortCode}\r\n </div>\r\n)`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `const useStyles = createUseStyles({\r\n parentContainer: {\r\n padding: \"var(--ic-space-md)\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nreturn (\r\n <div className={classes.parentContainer}>\r\n {shortCode}\r\n </div>\r\n)`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview snippets={jsDates} style={{ flexDirection: \"column\" }}>\r\n <IcDatePicker\r\n label=\"When would you like to collect your coffee?\"\r\n min={new Date(2024, 6, 1)}\r\n max={new Date(2024, 6, 31)}\r\n value={new Date(2024, 6, 15)}\r\n helperText=\"Choose a date between the 1st and 31st of July\"\r\n showPickerTodayButton=\"false\"\r\n />\r\n</ComponentPreview>\r\n\r\n### IcChange Event\r\n\r\nThe `IcChange` event is emitted by the date picker when the selected date changes.\r\n\r\nexport const change = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-date-picker\r\n id=\"ic-change-date-picker\"\r\n label=\"When would you like to collect your coffee?\"\r\n></ic-date-picker>\r\n<span id=\"selected-date\">\r\n Selected date:\r\n</span>`,\r\n long: `.parent-container {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 3.125rem;\r\n padding: var(--ic-space-md);\r\n }\r\n</style>\r\n<body>\r\n <div class=\"parent-container\">\r\n {shortCode}\r\n </div>\r\n <script>\r\n const updateSelectedDate = (ev) =>{\r\n const el = document.querySelector(\"#selected-date\");\r\n el.innerHTML = \"Selected date: \" + ev.detail.value;\r\n }\r\n const datePicker = document.querySelector(\"#ic-change-date-picker\");\r\n datePicker.addEventListener(\"icChange\", updateSelectedDate);\r\n </script>`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcDatePicker\r\n label=\"When would you like to collect your coffee?\"\r\n onIcChange={dateChangedHandler}\r\n value={value}\r\n/>\r\n<span>\r\n {selectedDate}\r\n</span>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `const [selectedDate, setSelectedDate] = useState<string>(\"Selected date:\");\r\nconst [value, setValue] = useState<Date | undefined>();\r\nconst dateChangedHandler = (event: { detail: { value: Date; }; }) => {\r\n setValue(event.detail.value);\r\n setSelectedDate(\"Selected date: \" + event.detail.value);\r\n};\r\nconst useStyles = createUseStyles({\r\n parentContainer: {\r\n display: \"flex\",\r\n flexDirection: \"column\",\r\n gap: \"3.125rem\",\r\n padding: \"var(--ic-space-md)\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nreturn (\r\n <div className={classes.parentContainer}>\r\n {shortCode}\r\n </div>\r\n)`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `const [selectedDate, setSelectedDate] = useState(\"Selected date:\");\r\nconst [value, setValue] = useState();\r\nconst dateChangedHandler = (event) => {\r\n setValue(event.detail.value);\r\n setSelectedDate(\"Selected date: \" + event.detail.value);\r\n};\r\nconst useStyles = createUseStyles({\r\n parentContainer: {\r\n display: \"flex\",\r\n flexDirection: \"column\",\r\n gap: \"3.125rem\",\r\n padding: \"var(--ic-space-md)\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nreturn (\r\n <div className={classes.parentContainer}>\r\n {shortCode}\r\n </div>\r\n)`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\nexport const DatePickerWithIcChange = () => {\r\n const [selectedDate, setSelectedDate] = useState(\"Selected date:\");\r\n const [value, setValue] = useState();\r\n const dateChangedHandler = (event) => {\r\n setValue(event.detail.value);\r\n setSelectedDate(`Selected date: ${event.detail.value}`);\r\n };\r\n return (\r\n <div style={{ display: \"flex\", flexDirection: \"column\", gap: \"3.125rem\" }}>\r\n <IcDatePicker\r\n label=\"When would you like to collect your coffee?\"\r\n onIcChange={dateChangedHandler}\r\n value={value}\r\n />\r\n <span>{selectedDate}</span>\r\n </div>\r\n );\r\n};\r\n\r\n<ComponentPreview snippets={change} style={{ flexDirection: \"column\" }}>\r\n <DatePickerWithIcChange />\r\n</ComponentPreview>\r\n",
"path": "/components/date-picker/code",
"date": "2024-05-31",
"title": "Date picker",
@@ -2014,11 +2014,11 @@
}
],
"meta": {
- "relativePath": "components/date-picker/code.mdx",
- "createdAt": "2024-11-06T10:27:49.408Z",
- "lastModified": "2024-11-06T10:19:00.008Z",
- "size": 30548,
- "formattedSize": "29.8 KB"
+ "relativePath": "components\\date-picker\\code.mdx",
+ "createdAt": "2024-12-04T13:23:54.096Z",
+ "lastModified": "2024-12-04T13:23:54.096Z",
+ "size": 31813,
+ "formattedSize": "31.1 KB"
}
},
{
@@ -2046,9 +2046,9 @@
],
"tags": ["Calendar", "Datetime picker"],
"meta": {
- "relativePath": "components/date-picker/guidance.mdx",
- "createdAt": "2024-11-06T10:27:49.408Z",
- "lastModified": "2024-11-06T10:19:00.008Z",
+ "relativePath": "components\\date-picker\\guidance.mdx",
+ "createdAt": "2024-11-05T11:57:51.706Z",
+ "lastModified": "2024-11-05T11:57:51.706Z",
"size": 5256,
"formattedSize": "5.1 KB"
}
@@ -2077,16 +2077,16 @@
}
],
"meta": {
- "relativePath": "components/dialog/accessibility.mdx",
- "createdAt": "2024-11-06T10:27:49.408Z",
- "lastModified": "2024-11-06T10:19:00.008Z",
+ "relativePath": "components\\dialog\\accessibility.mdx",
+ "createdAt": "2024-11-05T11:57:51.730Z",
+ "lastModified": "2024-11-05T11:57:51.730Z",
"size": 4110,
"formattedSize": "4.0 KB"
}
},
{
"id": "components\\dialog\\codex",
- "contents": "\nimport {\n IcAlert,\n IcDialog,\n IcButton,\n IcCheckboxGroup,\n IcCheckbox,\n IcTypography,\n IcSelect,\n} from \"@ukic/react\";\nimport { useRef, useState } from \"react\";\n\nexport const buttonProps = [\n {\n label: \"Go back\",\n onclick: \"this.cancelDialog()\",\n },\n {\n label: \"Continue\",\n onclick: \"alert('Added to basket'); this.open = false;\",\n },\n];\n\n## Component demo\n\nexport const snippetsDefault = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-button onclick=\"showDialog()\">Launch dialog</ic-button>\n<ic-dialog id=\"default-dialog\" heading=\"Are you sure?\" label=\"Coffee order\">\n <ic-typography>\n You are about to add 'Americano' to your basket. Are you sure you want to continue?\n </ic-typography>\n</ic-dialog>`,\n long: `{shortCode}\n<script>\n const dialog = document.querySelector(\"#default-dialog\");\n function showDialog() { \n dialog.open = true;\n }\n // Used if dismiss button is clicked\n function hideDialog() { \n if (dialog.open) {\n dialog.open = false;\n } \n }\n function dialogConfirmed(ev) {\n alert(\"Added to basket\");\n dialog.open = false;\n }\n dialog.addEventListener(\"icDialogConfirmed\", dialogConfirmed);\n dialog.addEventListener(\"icDialogClosed\", hideDialog);\n</script>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcButton onClick={handleDialogOpen}>Launch dialog</IcButton>\n<IcDialog\n heading=\"Are you sure?\"\n label=\"Coffee order\"\n open={openDialog}\n // Set state to false if dismiss button is clicked\n onIcDialogClosed={openDialog && handleDialogClose}\n onIcDialogConfirmed={handleDialogClose}\n onIcDialogCancelled={handleDialogClose}\n>\n <IcTypography>\n You are about to add 'Americano' to your basket. Are you sure you want\n to continue?\n </IcTypography>\n</IcDialog>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const [openDialog, setOpenDialog] = useState<boolean>(false);\nconst handleDialogOpen = () => setOpenDialog(true);\nconst handleDialogClose = () => setOpenDialog(false);\nreturn (\n <>\n {shortCode}\n </>\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const [openDialog, setOpenDialog] = useState(false);\nconst handleDialogOpen = () => setOpenDialog(true);\nconst handleDialogClose = () => setOpenDialog(false);\nreturn (\n <>\n {shortCode}\n </>\n)`,\n },\n ],\n },\n },\n];\n\nexport const DefaultDialog = () => {\n const [openDialog, setOpenDialog] = useState(false);\n const handleDialogOpen = () => setOpenDialog(true);\n const handleDialogClose = () => setOpenDialog(false);\n return (\n <>\n <IcButton onClick={handleDialogOpen}>Launch dialog</IcButton>\n <IcDialog\n heading=\"Are you sure?\"\n label=\"Coffee order\"\n open={openDialog}\n onIcDialogClosed={openDialog && handleDialogClose} // Event fired when dismiss button is clicked\n onIcDialogConfirmed={handleDialogClose}\n onIcDialogCancelled={handleDialogClose}\n >\n <IcTypography>\n You are about to add 'Americano' to your basket. Are you sure you want\n to continue?\n </IcTypography>\n </IcDialog>\n </>\n );\n};\n\n<ComponentPreview snippets={snippetsDefault}>\n <DefaultDialog />\n</ComponentPreview>\n\n## Dialog details\n\n<ComponentDetails component=\"ic-dialog\" />\n\n## Variants\n\n### Sizes\n\nexport const snippetsSizes = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-button onclick=\"showDialog()\">Launch dialog</ic-button>\n<ic-dialog id=\"size-dialog\" heading=\"Are you sure?\" label=\"Coffee order\">\n <ic-typography>\n You are about to add 'Americano' to your basket. Are you sure you want to continue?\n </ic-typography>\n</ic-dialog>`,\n long: `{shortCode}\n<script>\n const dialog = document.querySelector(\"#size-dialog\");\n function showDialog() {\n dialog.open = true;\n }\n function hideDialog() {\n if (dialog.open) {\n dialog.open = false;\n }\n }\n function dialogConfirmed(ev) {\n alert(\"Added to basket\");\n dialog.open = false;\n }\n dialog.addEventListener(\"icDialogConfirmed\", dialogConfirmed);\n dialog.addEventListener(\"icDialogClosed\", hideDialog);\n</script>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcButton onClick={handleDialogOpen}>Launch sizes dialog</IcButton>\n<IcDialog\n size=\"large\" // \"small\" | \"medium\" | \"large\"\n open={openDialog}\n label=\"Coffee order\" \n heading=\"Are you sure?\"\n onIcDialogClosed={openDialog && handleDialogClose}\n onIcDialogConfirmed={handleDialogClose}\n onIcDialogCancelled={handleDialogClose}\n>\n <IcTypography>\n You are about to add 'Americano' to your basket. Are you sure you want to\n continue?\n </IcTypography>\n</IcDialog>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const [openDialog, setOpenDialog] = useState<boolean>(false);\nconst handleDialogOpen = () => setOpenDialog(true);\nconst handleDialogClose = () => setOpenDialog(false);\nreturn (\n <>\n {shortCode}\n </>\n);`,\n },\n {\n language: \"Javascript\",\n snippet: `const [openDialog, setOpenDialog] = useState(false);\nconst handleDialogOpen = () => setOpenDialog(true);\nconst handleDialogClose = () => setOpenDialog(false);\nreturn (\n <>\n {shortCode}\n </>\n);`,\n },\n ],\n },\n },\n];\n\nexport const SizesDialogs = () => {\n const [openDialog, setOpenDialog] = useState(false);\n const handleDialogOpen = () => setOpenDialog(true);\n const handleDialogClose = () => setOpenDialog(false);\n return (\n <>\n <IcButton onClick={handleDialogOpen}>Launch sizes dialog</IcButton>\n <IcDialog\n size=\"large\"\n open={openDialog}\n label=\"Coffee order\"\n heading=\"Are you sure?\"\n onIcDialogClosed={openDialog && handleDialogClose}\n onIcDialogConfirmed={handleDialogClose}\n onIcDialogCancelled={handleDialogClose}\n >\n <IcTypography>\n You are about to add 'Americano' to your basket. Are you sure you want\n to continue?\n </IcTypography>\n </IcDialog>\n </>\n );\n};\n\n<ComponentPreview snippets={snippetsSizes}>\n <SizesDialogs />\n</ComponentPreview>\n\n### With status alerts\n\nexport const snippetsAlert = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-button onclick=\"showDialog('#status-dialog')\">Launch status dialog</ic-button>\n<ic-dialog\n id=\"status-dialog\"\n heading=\"Are you sure?\"\n label=\"Coffee order\"\n size=\"medium\"\n>\n <ic-alert\n slot=\"alert\"\n heading=\"They're both good\"\n message=\"Some say tea is just as good as coffee.\"\n variant=\"neutral\"\n title-above=\"true\"\n >\n </ic-alert>\n <ic-typography>\n You are about to add 'Americano' to your basket. Are you sure you want to continue?\n </ic-typography>\n</ic-dialog>`,\n long: `{shortCode}\n<script>\n const dialog = document.querySelector(\"#status-dialog\");\n function showDialog() {\n dialog.open = true;\n }\n function hideDialog() {\n if (dialog.open) {\n dialog.open = false;\n }\n }\n function dialogConfirmed(ev) {\n alert(\"Added to basket\");\n dialog.open = false;\n }\n dialog.addEventListener(\"icDialogConfirmed\", dialogConfirmed);\n dialog.addEventListener(\"icDialogClosed\", hideDialog);\n</script>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcButton\n variant=\"primary\"\n onClick={handleDialogOpen}\n>\n Launch status dialog\n</IcButton>\n<IcDialog\n open={openDialog}\n heading=\"Are you sure?\"\n label=\"Coffee order\"\n onIcDialogClosed={openDialog && handleDialogClose}\n onIcDialogConfirmed={handleDialogClose}\n onIcDialogCancelled={handleDialogClose}\n size=\"medium\"\n>\n <IcAlert\n slot=\"alert\"\n heading=\"They're both good\"\n message=\"Some say tea is just as good as coffee.\"\n variant=\"neutral\" // \"neutral\" | \"info\" | \"warn\" | \"error\" | \"success\" \n titleAbove\n />\n <IcTypography>\n You are about to add 'Americano' to your basket. Are you sure you want\n to continue?\n </IcTypography>\n</IcDialog>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const [openDialog, setOpenDialog] = useState<boolean>(false);\nconst handleDialogOpen = () => setOpenDialog(true);\nconst handleDialogClose = () => setOpenlDialog(false);\nreturn (\n <>\n {shortCode}\n </>\n);`,\n },\n {\n language: \"Javascript\",\n snippet: `const [openDialog, setOpenDialog] = useState(false);\nconst handleDialogOpen = () => setOpenDialog(true);\nconst handleDialogClose = () => setOpenlDialog(false);\nreturn (\n <>\n {shortCode}\n </>\n);`,\n },\n ],\n },\n },\n];\n\nexport const AlertDialog = () => {\n const dialogEl = useRef(null);\n const addTitleAboveAttribute = () => {\n dialogEl.current\n .querySelector(\"ic-alert\")\n .setAttribute(\"title-above\", \"true\");\n };\n const [openDialog, setOpenDialog] = useState(false);\n const handleDialogOpen = () => {\n addTitleAboveAttribute();\n setOpenDialog(true);\n };\n const handleDialogClose = () => setOpenDialog(false);\n return (\n <>\n <IcButton variant=\"primary\" onClick={handleDialogOpen}>\n Launch dialog\n </IcButton>\n <IcDialog\n ref={dialogEl}\n open={openDialog}\n heading=\"Are you sure?\"\n label=\"Coffee order\"\n onIcDialogClosed={openDialog && handleDialogClose}\n onIcDialogConfirmed={handleDialogClose}\n onIcDialogCancelled={handleDialogClose}\n size=\"medium\"\n >\n <IcAlert\n slot=\"alert\"\n heading=\"They're both good\"\n message=\"Some say tea is just as good as coffee.\"\n variant=\"neutral\"\n titleAbove\n />\n <IcTypography>\n You are about to add 'Americano' to your basket. Are you sure you want\n to continue?\n </IcTypography>\n </IcDialog>\n </>\n );\n};\n\n<ComponentPreview snippets={snippetsAlert}>\n <AlertDialog />\n</ComponentPreview>\n\n### Button variations\n\nexport const snippetsCustomButtons = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-button onclick=\"showDialog('#no-button-dialog')\">Launch no button dialog</ic-button>\n<ic-button onclick=\"showDialog('#single-button-dialog')\">Launch single button dialog</ic-button>\n<ic-button onclick=\"showDialog('#three-buttons-dialog')\">Launch three button dialog</ic-button>\n<ic-button onclick=\"showDialog('#destructive-dialog')\">Launch destructive button dialog</ic-button>\n<ic-dialog\n id=\"no-button-dialog\"\n buttons=\"false\"\n label=\"None\"\n heading=\"This dialog has no default buttons\"\n>\n Sorry, you cannot place orders at the moment. Please try again later.\n</ic-dialog>\n<ic-dialog id=\"single-button-dialog\" label=\"Single\" heading=\"This dialog has a single button\">\n <ic-typography>\n Your order for an Americano coffee has been placed.\n </ic-typography>\n</ic-dialog>\n<ic-dialog id=\"three-buttons-dialog\" label=\"Three buttons\" heading=\"This dialog has three default buttons\">\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod\n tempor incididunt ut labore et dolore magna aliqua.\n</ic-dialog>\n<ic-dialog\n id=\"destructive-dialog\"\n destructive=\"true\"\n label=\"Destructive\" \n heading=\"This dialog has a default destructive button\"\n>\n <ic-typography>\n You are about to cancel your order for an Americano. Are you sure you want to continue?\n </ic-typography>\n</ic-dialog>`,\n long: `{shortCode}\n<script>\n const singleButtonDialog = document.querySelector(\"#single-button-dialog\");\n const threeButtonsDialog = document.querySelector(\"#three-buttons-dialog\");\n const destructiveButtonDialog = document.querySelector(\"#destructive-dialog\");\n function showDialog(id) {\n document.querySelector(id).open = true;\n }\n function hideDialog(ev) {\n if (ev.target.open) {\n ev.target.open = false;\n }\n }\n function dialogConfirmed(ev) {\n alert(\"Confirmed\");\n ev.target.open = false;\n }\n singleButtonDialog.buttonProps = [\n { label: \"Confirm\", onclick: \"alert('Confirmed');this.open = false;\" },\n ];\n threeButtonsDialog.buttonProps = [\n { label: \"Cancel\", onclick: \"this.open = false;\" },\n { label: \"Options\", onclick: \"alert('Options...');\" },\n { label: \"Confirm\", onclick: \"alert('Confirmed'); this.open = false;\" },\n ];\n destructiveButtonDialog.buttonProps = [\n { label: \"Confirm\", onclick: \"alert('Confirmed'); this.open = false;\" },\n ];\n singleButtonDialog.addEventListener('icDialogClosed', hideDialog);\n threeButtonsDialog.addEventListener('icDialogClosed', hideDialog);\n destructiveButtonDialog.addEventListener('icDialogClosed', hideDialog);\n</script>\n `,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<div className={classes.btnContainer}>\n <IcButton onClick={handleNoButtonDialogOpen}>\n Launch no button dialog\n </IcButton>\n <IcButton onClick={handleSingleButtonDialogOpen}>\n Launch single button dialog\n </IcButton>\n <IcButton onClick={handleThreeButtonsDialogOpen}>\n Launch three button dialog\n </IcButton>\n <IcButton onClick={handleDestructiveButtonDialogOpen}>\n Launch destructive button dialog\n </IcButton>\n</div>\n<IcDialog\n open={openNoButtonDialog}\n buttons={false}\n label=\"None\"\n heading=\"This dialog has no default buttons\"\n onIcDialogClosed={openNoButtonDialog && handleDialogClose}\n onIcDialogConfirmed={handleDialogClose}\n onIcDialogCancelled={handleDialogClose}\n>\n <IcTypography>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do\n eiusmod tempor incididunt ut labore et dolore magna aliqua.\n </IcTypography>\n</IcDialog>\n<IcDialog\n open={openSingleButtonDialog}\n label=\"Single\"\n heading=\"This dialog has a single button\"\n buttonProps={[\n { label: \"Confirm\", onclick: \"alert('Confirmed'); this.hideDialog()\" },\n ]}\n onIcDialogClosed={openSingleButtonDialog && handleDialogClose}\n onIcDialogConfirmed={handleDialogClose}\n onIcDialogCancelled={handleDialogClose}\n>\n <IcTypography>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do\n eiusmod tempor incididunt ut labore et dolore magna aliqua.\n </IcTypography>\n</IcDialog>\n<IcDialog\n open={openThreeButtonsDialog}\n label=\"Triple\"\n heading=\"This dialog has three default buttons\"\n buttonProps={[\n { label: \"Close\", onclick: \"this.hideDialog()\" },\n { label: \"Options\", onclick: \"alert('Options...')\" },\n { label: \"Confirm\", onclick: \"alert('Confirmed'); this.hideDialog()\" },\n ]}\n onIcDialogClosed={openThreeButtonsDialog && handleDialogClose}\n onIcDialogConfirmed={handleDialogClose}\n onIcDialogCancelled={handleDialogClose}\n>\n <IcTypography>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do\n eiusmod tempor incididunt ut labore et dolore magna aliqua.\n </IcTypography>\n</IcDialog>\n<IcDialog\n open={openDestructiveButtonDialog}\n destructive\n label=\"Destructive\"\n heading=\"This dialog has a default destructive button\"\n buttonProps={[\n { label: \"Confirm\", onclick: \"alert('Confirmed'); this.hideDialog()\" },\n ]}\n onIcDialogClosed={openDestructiveButtonDialog && handleDialogClose}\n onIcDialogConfirmed={handleDialogClose}\n onIcDialogCancelled={handleDialogClose}\n>\n <IcTypography>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do\n eiusmod tempor incididunt ut labore et dolore magna aliqua.\n </IcTypography>\n</IcDialog>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const [openNoButtonDialog, setOpenNoButtonDialog] = useState<boolean>(false);\nconst [openSingleButtonDialog, setOpenSingleButtonDialog] = useState<boolean>(false);\nconst [openThreeButtonsDialog, setOpenThreeButtonsDialog] = useState<boolean>(false);\nconst [openDestructiveButtonDialog, setOpenDestructiveButtonDialog] = useState<boolean>(false);\nconst handleNoButtonDialogOpen = () => setOpenNoButtonDialog(true);\nconst handleSingleButtonDialogOpen = () => setOpenSingleButtonDialog(true);\nconst handleThreeButtonsDialogOpen = () => setOpenThreeButtonsDialog(true);\nconst handleDestructiveButtonDialogOpen = () => setOpenDestructiveButtonDialog(true);\nconst handleDialogClose = () => {\n setOpenNoButtonDialog(false);\n setOpenSingleButtonDialog(false);\n setOpenThreeButtonsDialog(false);\n setOpenDestructiveButtonDialog(false);\n}\nconst useStyles = createUseStyles({\n btnContainer: { \n display: \"flex\",\n gap: \"var(--ic-space-xs)\",\n flexWrap: \"wrap\",\n },\n});\nconst classes = useStyles();\nreturn (\n <>\n {shortCode}\n </>\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const [openNoButtonDialog, setOpenNoButtonDialog] = useState(false);\nconst [openSingleButtonDialog, setOpenSingleButtonDialog] = useState(false);\nconst [openThreeButtonsDialog, setOpenThreeButtonsDialog] = useState(false);\nconst [openDestructiveButtonDialog, setOpenDestructiveButtonDialog] = useState(false);\nconst handleNoButtonDialogOpen = () => setOpenNoButtonDialog(true);\nconst handleSingleButtonDialogOpen = () => setOpenSingleButtonDialog(true);\nconst handleThreeButtonsDialogOpen = () => setOpenThreeButtonsDialog(true);\nconst handleDestructiveButtonDialogOpen = () => setOpenDestructiveButtonDialog(true);\nconst handleDialogClose = () => {\n setOpenNoButtonDialog(false);\n setOpenSingleButtonDialog(false);\n setOpenThreeButtonsDialog(false);\n setOpenDestructiveButtonDialog(false);\n}\nconst useStyles = createUseStyles({\n btnContainer: { \n display: \"flex\",\n gap: \"var(--ic-space-xs)\",\n flexWrap: \"wrap\",\n },\n});\nconst classes = useStyles();\nreturn (\n <>\n {shortCode}\n </>\n)`,\n },\n ],\n },\n },\n];\n\nexport const CustomButtonsDialog = () => {\n const [openNoButtonDialog, setOpenNoButtonDialog] = useState(false);\n const [openSingleButtonDialog, setOpenSingleButtonDialog] = useState(false);\n const [openThreeButtonsDialog, setOpenThreeButtonsDialog] = useState(false);\n const [openDestructiveButtonDialog, setOpenDestructiveButtonDialog] =\n useState(false);\n const handleNoButtonDialogOpen = () => setOpenNoButtonDialog(true);\n const handleSingleButtonDialogOpen = () => setOpenSingleButtonDialog(true);\n const handleThreeButtonsDialogOpen = () => setOpenThreeButtonsDialog(true);\n const handleDestructiveButtonDialogOpen = () =>\n setOpenDestructiveButtonDialog(true);\n const handleDialogClose = () => {\n setOpenNoButtonDialog(false);\n setOpenSingleButtonDialog(false);\n setOpenThreeButtonsDialog(false);\n setOpenDestructiveButtonDialog(false);\n };\n return (\n <>\n <div style={{ display: \"flex\", gap: \"0.5rem\", flexWrap: \"wrap\" }}>\n <IcButton onClick={handleNoButtonDialogOpen}>\n Launch no button dialog\n </IcButton>\n <IcButton onClick={handleSingleButtonDialogOpen}>\n Launch single button dialog\n </IcButton>\n <IcButton onClick={handleThreeButtonsDialogOpen}>\n Launch three button dialog\n </IcButton>\n <IcButton onClick={handleDestructiveButtonDialogOpen}>\n Launch destructive button dialog\n </IcButton>\n </div>\n <IcDialog\n open={openNoButtonDialog}\n buttons={false}\n label=\"None\"\n heading=\"This dialog has no default buttons\"\n onIcDialogClosed={openNoButtonDialog && handleDialogClose}\n onIcDialogConfirmed={handleDialogClose}\n onIcDialogCancelled={handleDialogClose}\n >\n <IcTypography>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do\n eiusmod tempor incididunt ut labore et dolore magna aliqua.\n </IcTypography>\n </IcDialog>\n <IcDialog\n open={openSingleButtonDialog}\n label=\"Single\"\n heading=\"This dialog has a single button\"\n buttonProps={[\n {\n label: \"Confirm\",\n onclick: \"alert('Confirmed'); this.hideDialog()\",\n },\n ]}\n onIcDialogClosed={openSingleButtonDialog && handleDialogClose}\n onIcDialogConfirmed={handleDialogClose}\n onIcDialogCancelled={handleDialogClose}\n >\n <IcTypography>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do\n eiusmod tempor incididunt ut labore et dolore magna aliqua.\n </IcTypography>\n </IcDialog>\n <IcDialog\n open={openThreeButtonsDialog}\n label=\"Triple\"\n heading=\"This dialog has three default buttons\"\n buttonProps={[\n { label: \"Close\", onclick: \"this.hideDialog()\" },\n { label: \"Options\", onclick: \"alert('Options...')\" },\n {\n label: \"Confirm\",\n onclick: \"alert('Confirmed'); this.hideDialog()\",\n },\n ]}\n onIcDialogClosed={openThreeButtonsDialog && handleDialogClose}\n onIcDialogConfirmed={handleDialogClose}\n onIcDialogCancelled={handleDialogClose}\n >\n <IcTypography>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do\n eiusmod tempor incididunt ut labore et dolore magna aliqua.\n </IcTypography>\n </IcDialog>\n <IcDialog\n open={openDestructiveButtonDialog}\n destructive\n label=\"Destructive\"\n heading=\"This dialog has a default destructive button\"\n buttonProps={[\n {\n label: \"Confirm\",\n onclick: \"alert('Confirmed'); this.hideDialog()\",\n },\n ]}\n onIcDialogClosed={openDestructiveButtonDialog && handleDialogClose}\n onIcDialogConfirmed={handleDialogClose}\n onIcDialogCancelled={handleDialogClose}\n >\n <IcTypography>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do\n eiusmod tempor incididunt ut labore et dolore magna aliqua.\n </IcTypography>\n </IcDialog>\n </>\n );\n};\n\n<ComponentPreview snippets={snippetsCustomButtons}>\n <CustomButtonsDialog />\n</ComponentPreview>\n\n### Slotted buttons\n\nexport const snippetsSlottedButtons = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-button onclick=\"showDialog()\">Launch dialog</ic-button>\n<ic-dialog id=\"slotted-dialog\" heading=\"Are you sure?\" label=\"Coffee order\">\n <ic-typography>\n You are about to add 'Americano' to your basket. Are you sure you want to continue?\n </ic-typography>\n <ic-button slot=\"dialog-controls\" variant=\"secondary\" onclick=\"hideDialog()\">\n Go back\n </ic-button>\n <ic-button slot=\"dialog-controls\" onclick=\"addToBasket()\">\n Add to basket\n </ic-button>\n</ic-dialog>`,\n long: `{shortCode}\n<script>\n const dialog = document.querySelector(\"#slotted-dialog\");\n function showDialog() { \n dialog.open = true;\n }\n function hideDialog() {\n if (dialog.open) {\n dialog.open = false;\n }\n }\n function addToBasket() {\n alert(\"Added to basket\");\n dialog.open = false;\n }\n dialog.addEventListener('icDialogClosed', hideDialog);\n dialog.addEventListener('icDialogCancelled', hideDialog);\n</script>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcButton onClick={handleDialogOpen}>Launch slotted buttons dialog</IcButton>\n<IcDialog\n heading=\"Are you sure?\"\n label=\"Coffee order\"\n open={openDialog}\n onIcDialogClosed={openDialog && handleDialogClose}\n>\n <IcTypography>\n You are about to add 'Americano' to your basket. Are you sure you want\n to continue?\n </IcTypography>\n <IcButton slot=\"dialog-controls\" variant=\"secondary\" onClick={handleDialogClose}>\n Go back\n </IcButton>\n <IcButton slot=\"dialog-controls\" onClick={handleAddToBasket}>\n Add to basket\n </IcButton>\n</IcDialog>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const [openDialog, setOpenDialog] = useState<boolean>(false);\nconst handleDialogOpen = () => setOpenDialog(true);\nconst handleDialogClose = () => setOpenDialog(false);\nconst handleAddToBasket = () => {\n alert(\"Added to basket\");\n setOpenDialog(false);\n}\nreturn (\n <>\n {shortCode}\n </>\n);`,\n },\n {\n language: \"Javascript\",\n snippet: `const [openDialog, setOpenDialog] = useState(false);\nconst handleDialogOpen = () => setOpenDialog(true);\nconst handleDialogClose = () => setOpenDialog(false);\nconst handleAddToBasket = () => {\n alert(\"Added to basket\");\n setOpenDialog(false);\n}\nreturn (\n <>\n {shortCode}\n </>\n);`,\n },\n ],\n },\n },\n];\n\nexport const SlottedButtonsDialog = () => {\n const [openDialog, setOpenDialog] = useState(false);\n const handleDialogOpen = () => setOpenDialog(true);\n const handleDialogClose = () => setOpenDialog(false);\n const handleAddToBasket = () => {\n alert(\"Added to basket\");\n setOpenDialog(false);\n };\n return (\n <>\n <IcButton onClick={handleDialogOpen}>Launch dialog</IcButton>\n <IcDialog\n heading=\"Are you sure?\"\n label=\"Coffee order\"\n open={openDialog}\n onIcDialogClosed={openDialog && handleDialogClose}\n >\n <IcTypography>\n You are about to add 'Americano' to your basket. Are you sure you want\n to continue?\n </IcTypography>\n <IcButton\n slot=\"dialog-controls\"\n variant=\"secondary\"\n onClick={handleDialogClose}\n >\n Go back\n </IcButton>\n <IcButton slot=\"dialog-controls\" onClick={handleAddToBasket}>\n Add to basket\n </IcButton>\n </IcDialog>\n </>\n );\n};\n\n<ComponentPreview snippets={snippetsSlottedButtons}>\n <SlottedButtonsDialog />\n</ComponentPreview>\n\n### Interactive content\n\nexport const interactiveContentSnippet = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-button onclick=\"showDialog()\">Launch dialog</ic-button>\n<ic-dialog \n id=\"interactive-content-dialog\" \n label=\"Coffee order\"\n heading=\"Please agree to our terms and conditions\"\n>\n <ic-typography>\n Before continuing, please agree to our terms and conditions.\n </ic-typography>\n <ic-checkbox-group \n name=\"terms\" \n label=\"terms and conditions\" \n hide-label=\"true\"\n >\n <ic-checkbox label=\"I agree to the terms and conditions.\" value=\"agree\"></ic-checkbox>\n </ic-checkbox-group>\n</ic-dialog>`,\n long: `.parent-container {\n padding: var(--ic-space-md);\n }\n ic-checkbox-group {\n margin-top: var(--ic-space-xs)\n }\n</style>\n<body>\n <div class=\"parent-container\">\n {shortCode}\n </div>\n <script>\n const dialog = document.querySelector(\"#interactive-content-dialog\");\n const checkGroup = document.querySelector(\"ic-checkbox-group\");\n let termsAgreed = false;\n function showDialog() {\n dialog.open = true;\n }\n function hideDialog() {\n if (dialog.open) {\n dialog.open = false;\n }\n }\n function toggleTermsAgreed() {\n termsAgreed = !termsAgreed;\n }\n function dialogConfirmed(ev) {\n const message = (termsAgreed) ? \"Terms agreed\" : \"Terms not agreed\";\n alert(message);\n ev.target.open = false;\n }\n dialog.addEventListener(\"icDialogConfirmed\", dialogConfirmed);\n dialog.addEventListener(\"icDialogClosed\", hideDialog);\n checkGroup.addEventListener(\"icChange\", toggleTermsAgreed);\n </script>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcButton onClick={handleDialogOpen}>Launch dialog</IcButton>\n<IcDialog\n open={openDialog}\n label=\"Coffee order\"\n heading=\"Please agree to our terms and conditions\"\n onIcDialogClosed={openDialog && handleDialogClose}\n onIcDialogConfirmed={termsDialogConfirmed}\n onIcDialogCancelled={handleDialogClose}\n>\n <IcTypography>\n Before continuing, please agree to our terms and conditions.\n </IcTypography>\n <IcCheckboxGroup \n name=\"terms\" \n label=\"terms and conditions\" \n hideLabel\n onIcChange={toggleTermsAgreed}\n className={classes.checkboxGroup}\n >\n <IcCheckbox\n label=\"I agree to the terms and conditions.\"\n value=\"agree\"\n />\n </IcCheckboxGroup>\n</IcDialog>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const [termsAgreed, setTermsAgreed] = useState<boolean>(false);\nconst [openDialog, setOpenDialog] = useState<boolean>(false);\nconst handleDialogOpen = () => setOpenDialog(true);\nconst handleDialogClose = () => setOpenDialog(false);\nconst toggleTermsAgreed = () => {\n setTermsAgreed(!termsAgreed);\n};\nconst termsDialogConfirmed = (ev) => {\n const message = (termsAgreed) ? \"Terms agreed\" : \"Terms not agreed\";\n alert(message);\n setOpenDialog(false);\n};\nconst useStyles = createUseStyles({\n parentContainer: {\n padding: \"var(--ic-space-md)\",\n },\n checkboxGroup: {\n marginTop: \"var(--ic-space-xs)\",\n },\n});\nconst classes = useStyles();\nreturn (\n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const [termsAgreed, setTermsAgreed] = useState<boolean>(false);\nconst [openDialog, setOpenDialog] = useState<boolean>(false);\nconst handleDialogOpen = () => setOpenDialog(true);\nconst handleDialogClose = () => setOpenDialog(false);\nconst toggleTermsAgreed = () => {\n setTermsAgreed(!termsAgreed);\n};\nconst termsDialogConfirmed = (ev) => {\n const message = (termsAgreed) ? \"Terms agreed\" : \"Terms not agreed\";\n alert(message);\n setOpenDialog(false);\n};\nconst useStyles = createUseStyles({\n parentContainer: {\n padding: \"var(--ic-space-md)\",\n },\n checkboxGroup: {\n marginTop: \"var(--ic-space-xs)\",\n },\n});\nreturn (\n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n ],\n },\n },\n];\n\nexport const InteractiveContent = () => {\n const [termsAgreed, setTermsAgreed] = useState(false);\n const [openDialog, setOpenDialog] = useState(false);\n const handleDialogOpen = () => setOpenDialog(true);\n const handleDialogClose = () => setOpenDialog(false);\n const toggleTermsAgreed = () => {\n setTermsAgreed(!termsAgreed);\n };\n const termsDialogConfirmed = () => {\n const message = termsAgreed ? \"Terms agreed\" : \"Terms not agreed\";\n alert(message);\n setOpenDialog(false);\n };\n return (\n <>\n <IcButton onClick={handleDialogOpen}>Launch dialog</IcButton>\n <IcDialog\n open={openDialog}\n label=\"Coffee order\"\n heading=\"Please agree to our terms and conditions\"\n onIcDialogClosed={openDialog && handleDialogClose}\n onIcDialogConfirmed={termsDialogConfirmed}\n onIcDialogCancelled={handleDialogClose}\n >\n <IcTypography>\n Before continuing, please agree to our terms and conditions.\n </IcTypography>\n <IcCheckboxGroup\n name=\"terms\"\n label=\"terms and conditions\"\n hideLabel\n onIcChange={toggleTermsAgreed}\n style={{ marginTop: \"0.5rem\" }}\n >\n <IcCheckbox\n label=\"I agree to the terms and conditions.\"\n value=\"agree\"\n />\n </IcCheckboxGroup>\n </IcDialog>\n </>\n );\n};\n\n<ComponentPreview snippets={interactiveContentSnippet}>\n <InteractiveContent />\n</ComponentPreview>\n\n### Background close prevented\n\nexport const noCloseSnippet = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-button onclick=\"showDialog()\">Launch dialog</ic-button>\n<ic-dialog\n id=\"no-close-dialog\"\n close-on-backdrop-click=\"false\" \n label=\"Background close prevented\"\n heading=\"This dialog can't be closed by clicking the background\"\n>\n <ic-typography>\n You are about to add 'Americano' to your basket. Are you sure you want to continue?\n </ic-typography>\n</ic-dialog>`,\n long: `{shortCode}\n<script>\n const dialog = document.querySelector(\"#no-close-dialog\");\n function showDialog() {\n dialog.open = true;\n }\n function hideDialog() {\n if (dialog.open) {\n dialog.open = false;\n }\n }\n function dialogConfirmed(ev) {\n alert(\"Confirmed!\");\n ev.target.open = false;\n }\n dialog.addEventListener(\"icDialogClosed\", hideDialog);\n dialog.addEventListener(\"icDialogCancelled\", hideDialog);\n dialog.addEventListener(\"icDialogConfirmed\", dialogConfirmed);\n</script>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcButton onClick={handleDialogOpen}>Launch dialog</IcButton>\n<IcDialog\n open={openDialog}\n closeOnBackdropClick={false} \n label=\"Background close prevented\"\n heading=\"This dialog can't be closed by clicking the background\"\n onIcDialogClosed={openDialog && handleDialogClose} \n onIcDialogConfirmed={handleConfirmDialog} \n onIcDialogCancelled={handleDialogClose} \n>\n <IcTypography>\n You are about to add 'Americano' to your basket. Are you sure you want to continue?\n </IcTypography>\n</IcDialog>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const [openDialog, setOpenDialog] = useState<boolean>(false);\nconst handleDialogOpen = () => setOpenDialog(true); \nconst handleDialogClose = () => setOpenDialog(false); \nconst handleConfirmDialog = (ev) => { \n alert(\"Confirmed!\");\n setOpenDialog(false);\n};\nreturn (\n <>\n {shortCode} \n </>\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const [openDialog, setOpenDialog] = useState(false);\nconst handleDialogOpen = () => setOpenDialog(true); \nconst handleDialogClose = () => setOpenDialog(false); \nconst handleConfirmDialog = (ev) => { \n alert(\"Confirmed!\");\n setOpenDialog(false);\n};\nreturn (\n <>\n {shortCode} \n </>\n)`,\n },\n ],\n },\n },\n];\n\nexport const NoCloseContent = () => {\n const [openDialog, setOpenDialog] = useState(false);\n const handleDialogOpen = () => setOpenDialog(true);\n const handleDialogClose = () => setOpenDialog(false);\n const handleConfirmDialog = () => {\n alert(\"Confirmed!\");\n setOpenDialog(false);\n };\n return (\n <>\n <IcButton onClick={handleDialogOpen}>Launch dialog</IcButton>\n <IcDialog\n open={openDialog}\n closeOnBackdropClick={false}\n label=\"Background close prevented\"\n heading=\"This dialog can't be closed by clicking the background\"\n onIcDialogClosed={openDialog && handleDialogClose}\n onIcDialogConfirmed={handleConfirmDialog}\n onIcDialogCancelled={handleDialogClose}\n >\n <IcTypography>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do\n eiusmod tempor incididunt ut labore et dolore magna aliqua.\n </IcTypography>\n </IcDialog>\n </>\n );\n};\n\n<ComponentPreview snippets={noCloseSnippet}>\n <NoCloseContent />\n</ComponentPreview>\n\n### Events\n\nexport const eventsSnippet = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-button onclick=\"showDialog()\">Launch dialog</ic-button>\n<ic-dialog id=\"ev-dialog\" heading=\"Are you sure?\" label=\"Coffee order\">\n <ic-typography>\n You are about to add 'Americano' to your basket. Are you sure you want to continue?\n </ic-typography>\n <ic-button variant=\"tertiary\" onclick=\"cancelDialog()\" slot=\"dialog-controls\">\n Cancel\n </ic-button>\n <ic-button onclick=\"confirmDialog()\" slot=\"dialog-controls\">\n Confirm\n </ic-button>\n</ic-dialog>`,\n long: `{shortCode}\n<script>\n const dialog = document.querySelector(\"#ev-dialog\");\n function showDialog() {\n dialog.open = true;\n }\n function hideDialog() {\n if (dialog.open) {\n dialog.open = false;\n }\n }\n function dialogConfirmed() { \n alert(\"Dialog confirmed\");\n dialog.open = false;\n }\n function dialogCancelled() {\n alert(\"Dialog cancelled\");\n }\n function dialogOpened() {\n alert(\"Dialog opened\");\n }\n function dialogClosed() {\n alert(\"Dialog closed\");\n hideDialog();\n }\n function cancelDialog(){\n alert(\"Slotted cancel button\");\n dialog.open = false;\n }\n function confirmDialog(){\n alert(\"Slotted confirm button\");\n dialog.open = false;\n }\n dialog.addEventListener(\"icDialogConfirmed\", dialogConfirmed);\n dialog.addEventListener(\"icDialogCancelled\", dialogCancelled);\n dialog.addEventListener(\"icDialogOpened\", dialogOpened);\n dialog.addEventListener(\"icDialogClosed\", dialogClosed);\n</script>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcButton onClick={handleDialogOpen}>Launch dialog</IcButton>\n<IcDialog\n open={openDialog}\n heading=\"This dialog utilises events\"\n label=\"Events\"\n onIcDialogOpened={handleDialogOpened}\n onIcDialogConfirmed={handleDialogConfirmed}\n onIcDialogCancelled={handleDialogCancelled}\n onIcDialogClosed={handleDialogClosed}\n>\n <IcTypography>\n You are about to add 'Americano' to your basket. Are you sure you want to continue?\n </IcTypography>\n <IcButton variant=\"tertiary\" onClick={handleSlottedCancel} slot=\"dialog-controls\">\n Cancel\n </IcButton>\n <IcButton onClick={handleSlottedConfirm} slot=\"dialog-controls\">\n Confirm\n </IcButton>\n</IcDialog>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const [openDialog, setOpenDialog] = useState<boolean>(false);\nconst handleDialogOpen = () => setOpenDialog(true);\nconst handleDialogClose = () => setOpenDialog(false);\nconst handleDialogOpened = () => alert(\"Dialog opened\");\nconst handleDialogClosed = () => {\n alert(\"Dialog closed\");\n if (openDialog) {\n handleDialogClose();\n }\n}\nconst handleDialogCancelled = () => {\n alert(\"Dialog cancelled\");\n setOpenDialog(false);\n}\nconst handleDialogConfirmed = () => {\n alert(\"Dialog confirmed\");\n setOpenDialog(false);\n};\nconst handleSlottedCancel = () => {\n alert('Slotted cancel button');\n setOpenDialog(false);\n};\nconst handleSlottedConfirm = () => {\n alert('Slotted confirm button');\n setOpenDialog(false);\n};\nreturn (\n <>\n {shortCode}\n </>\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const [openDialog, setOpenDialog] = useState(false);\nconst handleDialogOpen = () => setOpenDialog(true);\nconst handleDialogClose = () => setOpenDialog(false);\nconst handleDialogOpened = () => alert(\"Dialog opened\");\nconst handleDialogClosed = () => {\n alert(\"Dialog closed\");\n if (openDialog) {\n handleDialogClose();\n }\n}\nconst handleDialogCancelled = () => {\n alert(\"Dialog cancelled\");\n setOpenDialog(false);\n}\nconst handleDialogConfirmed = () => {\n alert(\"Dialog confirmed\");\n setOpenDialog(false);\n};\nconst handleSlottedCancel = () => {\n alert('Slotted cancel button');\n setOpenDialog(false);\n};\nconst handleSlottedConfirm = () => {\n alert('Slotted confirm button');\n setOpenDialog(false);\n};\nreturn (\n <>\n {shortCode}\n </>\n)`,\n },\n ],\n },\n },\n];\n\nexport const EventsContent = () => {\n const [openDialog, setOpenDialog] = useState(false);\n const handleDialogOpen = () => setOpenDialog(true);\n const handleDialogClose = () => setOpenDialog(false);\n const handleDialogOpened = () => alert(\"Dialog opened\");\n const handleDialogClosed = () => {\n alert(\"Dialog closed\");\n if (openDialog) {\n handleDialogClose();\n }\n };\n const handleDialogCancelled = () => {\n alert(\"Dialog cancelled\");\n setOpenDialog(false);\n };\n const handleDialogConfirmed = () => {\n alert(\"Dialog confirmed\");\n setOpenDialog(false);\n };\n const handleSlottedCancel = () => {\n alert(\"Slotted cancel button\");\n setOpenDialog(false);\n };\n const handleSlottedConfirm = () => {\n alert(\"Slotted confirm button\");\n setOpenDialog(false);\n };\n return (\n <>\n <IcButton onClick={handleDialogOpen}>Launch dialog</IcButton>\n <IcDialog\n open={openDialog}\n heading=\"This dialog utilises events\"\n label=\"Events\"\n onIcDialogOpened={handleDialogOpened}\n onIcDialogConfirmed={handleDialogConfirmed}\n onIcDialogCancelled={handleDialogCancelled}\n onIcDialogClosed={handleDialogClosed}\n >\n <IcTypography>\n You are about to add 'Americano' to your basket. Are you sure you want\n to continue?\n </IcTypography>\n <IcButton\n variant=\"tertiary\"\n onClick={handleSlottedCancel}\n slot=\"dialog-controls\"\n >\n Cancel\n </IcButton>\n <IcButton onClick={handleSlottedConfirm} slot=\"dialog-controls\">\n Confirm\n </IcButton>\n </IcDialog>\n </>\n );\n};\n\n<ComponentPreview snippets={eventsSnippet}>\n <EventsContent />\n</ComponentPreview>\n\n### Disabled height constraint\n\nexport const popoutElements = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-button onclick='showDialog()'>Launch disabled height constraint dialog</ic-button>\n<ic-dialog\n label='Coffee order'\n heading='Please add your milk?'\n disable-height-constraint='true'\n>\n <ic-typography>Sure, let's dive into the delightful world of milk, where dairy dreams and coffee collide in the harmonious dance of a flat white. Picture this: you stroll into your favorite coffee haunt, the aroma of freshly ground beans tickling your senses. You approach the counter, ready to make a crucial decision – what kind of milk will accompany your flat white?</ic-typography><br/>\n <ic-typography>In the end, whether you go for the classic, embrace the trendy, or opt for the exotic, the flat white remains a canvas waiting to be painted with your milk of choice. So, next time you're at the coffee counter, let your taste buds embark on a journey – a journey where milk and coffee meet, and every sip tells a story, sprinkled with a dash of humor and a whole lot of flavor. Cheers to the caffeinated adventure!</ic-typography><br/>\n <ic-select label='Please select a type of milk'></ic-select>\n</ic-dialog>`,\n long: `{shortCode}\n<script>\n const milkSelect = document.querySelector('ic-select');\n const dialog = document.querySelector('ic-dialog');\n milkSelect.options = [\n { value: 'whole', label: 'Whole' },\n { value: 'semiskinned', label: 'Semi Skinned' },\n { value: 'oat', label: 'Oat' },\n { value: 'almond', label: 'Almond' }\n ];\n function showDialog() {\n dialog.open = true;\n }\n function hideDialog() {\n if (dialog.open) {\n dialog.open = false;\n }\n }\n dialog.addEventListener('icDialogClosed', hideDialog);\n dialog.addEventListener('icDialogCancelled', hideDialog);\n</script>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcButton onClick={handleDialogOpen}>Launch disabled height constraint dialog</IcButton>\n<IcDialog\n label='Coffee order'\n heading=\"Please add your milk\"\n disableHeightConstraint \n open={openDialog}\n onIcDialogConfirmed={openDialog && handleDialogClose}\n onIcDialogCancelled={handleDialogClose}\n>\n <IcTypography>\n Sure, let's dive into the delightful world of milk, where dairy dreams\n and coffee collide in the harmonious dance of a flat white. Picture\n this: you stroll into your favorite coffee haunt, the aroma of freshly\n ground beans tickling your senses. You approach the counter, ready to\n make a crucial decision – what kind of milk will accompany your flat\n white?\n </IcTypography>\n <br />\n <IcTypography>\n In the end, whether you go for the classic, embrace the trendy, or opt\n for the exotic, the flat white remains a canvas waiting to be painted\n with your milk of choice. So, next time you're at the coffee counter,\n let your taste buds embark on a journey – a journey where milk and\n coffee meet, and every sip tells a story, sprinkled with a dash of\n humor and a whole lot of flavor. Cheers to the caffeinated adventure!\n </IcTypography>\n <br />\n <IcSelect \n label='Select a type of milk'\n options={[\n { value: 'whole', label: 'Whole' },\n { value: 'semiskinned', label: 'Semi Skinned' },\n { value: 'oat', label: 'Oat' },\n { value: 'almond', label: 'Almond' }\n ]}\n />\n</IcDialog>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const [openDialog, setOpenDialog] = useState<boolean>(false);\nconst handleDialogOpen = () => setOpenDialog(true);\nconst handleDialogClose = () => setOpenDialog(false);\nreturn (\n <>\n {shortCode}\n </>\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const [openDialog, setOpenDialog] = useState(false);\nconst handleDialogOpen = () => setOpenDialog(true);\nconst handleDialogClose = () => setOpenDialog(false);\nreturn (\n <>\n {shortCode}\n </>\n)`,\n },\n ],\n },\n },\n];\n\nexport const DialogWithPopout = () => {\n const [openDialog, setOpenDialog] = useState(false);\n const handleDialogOpen = () => setOpenDialog(true);\n const handleDialogClose = () => setOpenDialog(false);\n return (\n <>\n <IcButton onClick={handleDialogOpen}>\n Launch disabled height constraint dialog\n </IcButton>\n <IcDialog\n label=\"Coffee order\"\n heading=\"Please add your milk\"\n disableHeightConstraint\n open={openDialog}\n onIcDialogClosed={openDialog && handleDialogClose}\n onIcDialogConfirmed={handleDialogClose}\n onIcDialogCancelled={handleDialogClose}\n >\n <IcTypography>\n Sure, let's dive into the delightful world of milk, where dairy dreams\n and coffee collide in the harmonious dance of a flat white. Picture\n this: you stroll into your favorite coffee haunt, the aroma of freshly\n ground beans tickling your senses. You approach the counter, ready to\n make a crucial decision – what kind of milk will accompany your flat\n white?\n </IcTypography>\n <br />\n <IcTypography>\n In the end, whether you go for the classic, embrace the trendy, or opt\n for the exotic, the flat white remains a canvas waiting to be painted\n with your milk of choice. So, next time you're at the coffee counter,\n let your taste buds embark on a journey – a journey where milk and\n coffee meet, and every sip tells a story, sprinkled with a dash of\n humor and a whole lot of flavor. Cheers to the caffeinated adventure!\n </IcTypography>\n <br />\n <IcSelect\n label=\"Select a type of milk\"\n options={[\n { value: \"whole\", label: \"Whole\" },\n { value: \"semiskinned\", label: \"Semi Skinned\" },\n { value: \"oat\", label: \"Oat\" },\n { value: \"almond\", label: \"Almond\" },\n ]}\n />\n </IcDialog>\n </>\n );\n};\n\n<ComponentPreview snippets={popoutElements}>\n <DialogWithPopout />\n</ComponentPreview>\n",
+ "contents": "\r\nimport {\r\n IcAlert,\r\n IcDialog,\r\n IcButton,\r\n IcCheckboxGroup,\r\n IcCheckbox,\r\n IcTypography,\r\n IcSelect,\r\n} from \"@ukic/react\";\r\nimport { useRef, useState } from \"react\";\r\n\r\nexport const buttonProps = [\r\n {\r\n label: \"Go back\",\r\n onclick: \"this.cancelDialog()\",\r\n },\r\n {\r\n label: \"Continue\",\r\n onclick: \"alert('Added to basket'); this.open = false;\",\r\n },\r\n];\r\n\r\n## Component demo\r\n\r\nexport const snippetsDefault = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-button onclick=\"showDialog()\">Launch dialog</ic-button>\r\n<ic-dialog id=\"default-dialog\" heading=\"Are you sure?\" label=\"Coffee order\">\r\n <ic-typography>\r\n You are about to add 'Americano' to your basket. Are you sure you want to continue?\r\n </ic-typography>\r\n</ic-dialog>`,\r\n long: `{shortCode}\r\n<script>\r\n const dialog = document.querySelector(\"#default-dialog\");\r\n function showDialog() { \r\n dialog.open = true;\r\n }\r\n // Used if dismiss button is clicked\r\n function hideDialog() { \r\n if (dialog.open) {\r\n dialog.open = false;\r\n } \r\n }\r\n function dialogConfirmed(ev) {\r\n alert(\"Added to basket\");\r\n dialog.open = false;\r\n }\r\n dialog.addEventListener(\"icDialogConfirmed\", dialogConfirmed);\r\n dialog.addEventListener(\"icDialogClosed\", hideDialog);\r\n</script>`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcButton onClick={handleDialogOpen}>Launch dialog</IcButton>\r\n<IcDialog\r\n heading=\"Are you sure?\"\r\n label=\"Coffee order\"\r\n open={openDialog}\r\n // Set state to false if dismiss button is clicked\r\n onIcDialogClosed={openDialog && handleDialogClose}\r\n onIcDialogConfirmed={handleDialogClose}\r\n onIcDialogCancelled={handleDialogClose}\r\n>\r\n <IcTypography>\r\n You are about to add 'Americano' to your basket. Are you sure you want\r\n to continue?\r\n </IcTypography>\r\n</IcDialog>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `const [openDialog, setOpenDialog] = useState<boolean>(false);\r\nconst handleDialogOpen = () => setOpenDialog(true);\r\nconst handleDialogClose = () => setOpenDialog(false);\r\nreturn (\r\n <>\r\n {shortCode}\r\n </>\r\n)`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `const [openDialog, setOpenDialog] = useState(false);\r\nconst handleDialogOpen = () => setOpenDialog(true);\r\nconst handleDialogClose = () => setOpenDialog(false);\r\nreturn (\r\n <>\r\n {shortCode}\r\n </>\r\n)`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\nexport const DefaultDialog = () => {\r\n const [openDialog, setOpenDialog] = useState(false);\r\n const handleDialogOpen = () => setOpenDialog(true);\r\n const handleDialogClose = () => setOpenDialog(false);\r\n return (\r\n <>\r\n <IcButton onClick={handleDialogOpen}>Launch dialog</IcButton>\r\n <IcDialog\r\n heading=\"Are you sure?\"\r\n label=\"Coffee order\"\r\n open={openDialog}\r\n onIcDialogClosed={openDialog && handleDialogClose} // Event fired when dismiss button is clicked\r\n onIcDialogConfirmed={handleDialogClose}\r\n onIcDialogCancelled={handleDialogClose}\r\n >\r\n <IcTypography>\r\n You are about to add 'Americano' to your basket. Are you sure you want\r\n to continue?\r\n </IcTypography>\r\n </IcDialog>\r\n </>\r\n );\r\n};\r\n\r\n<ComponentPreview snippets={snippetsDefault}>\r\n <DefaultDialog />\r\n</ComponentPreview>\r\n\r\n## Dialog details\r\n\r\n<ComponentDetails component=\"ic-dialog\" />\r\n\r\n## Variants\r\n\r\n### Sizes\r\n\r\nexport const snippetsSizes = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-button onclick=\"showDialog()\">Launch dialog</ic-button>\r\n<ic-dialog id=\"size-dialog\" heading=\"Are you sure?\" label=\"Coffee order\">\r\n <ic-typography>\r\n You are about to add 'Americano' to your basket. Are you sure you want to continue?\r\n </ic-typography>\r\n</ic-dialog>`,\r\n long: `{shortCode}\r\n<script>\r\n const dialog = document.querySelector(\"#size-dialog\");\r\n function showDialog() {\r\n dialog.open = true;\r\n }\r\n function hideDialog() {\r\n if (dialog.open) {\r\n dialog.open = false;\r\n }\r\n }\r\n function dialogConfirmed(ev) {\r\n alert(\"Added to basket\");\r\n dialog.open = false;\r\n }\r\n dialog.addEventListener(\"icDialogConfirmed\", dialogConfirmed);\r\n dialog.addEventListener(\"icDialogClosed\", hideDialog);\r\n</script>`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcButton onClick={handleDialogOpen}>Launch sizes dialog</IcButton>\r\n<IcDialog\r\n size=\"large\" // \"small\" | \"medium\" | \"large\"\r\n open={openDialog}\r\n label=\"Coffee order\" \r\n heading=\"Are you sure?\"\r\n onIcDialogClosed={openDialog && handleDialogClose}\r\n onIcDialogConfirmed={handleDialogClose}\r\n onIcDialogCancelled={handleDialogClose}\r\n>\r\n <IcTypography>\r\n You are about to add 'Americano' to your basket. Are you sure you want to\r\n continue?\r\n </IcTypography>\r\n</IcDialog>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `const [openDialog, setOpenDialog] = useState<boolean>(false);\r\nconst handleDialogOpen = () => setOpenDialog(true);\r\nconst handleDialogClose = () => setOpenDialog(false);\r\nreturn (\r\n <>\r\n {shortCode}\r\n </>\r\n);`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `const [openDialog, setOpenDialog] = useState(false);\r\nconst handleDialogOpen = () => setOpenDialog(true);\r\nconst handleDialogClose = () => setOpenDialog(false);\r\nreturn (\r\n <>\r\n {shortCode}\r\n </>\r\n);`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\nexport const SizesDialogs = () => {\r\n const [openDialog, setOpenDialog] = useState(false);\r\n const handleDialogOpen = () => setOpenDialog(true);\r\n const handleDialogClose = () => setOpenDialog(false);\r\n return (\r\n <>\r\n <IcButton onClick={handleDialogOpen}>Launch sizes dialog</IcButton>\r\n <IcDialog\r\n size=\"large\"\r\n open={openDialog}\r\n label=\"Coffee order\"\r\n heading=\"Are you sure?\"\r\n onIcDialogClosed={openDialog && handleDialogClose}\r\n onIcDialogConfirmed={handleDialogClose}\r\n onIcDialogCancelled={handleDialogClose}\r\n >\r\n <IcTypography>\r\n You are about to add 'Americano' to your basket. Are you sure you want\r\n to continue?\r\n </IcTypography>\r\n </IcDialog>\r\n </>\r\n );\r\n};\r\n\r\n<ComponentPreview snippets={snippetsSizes}>\r\n <SizesDialogs />\r\n</ComponentPreview>\r\n\r\n### With status alerts\r\n\r\nexport const snippetsAlert = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-button onclick=\"showDialog('#status-dialog')\">Launch status dialog</ic-button>\r\n<ic-dialog\r\n id=\"status-dialog\"\r\n heading=\"Are you sure?\"\r\n label=\"Coffee order\"\r\n size=\"medium\"\r\n>\r\n <ic-alert\r\n slot=\"alert\"\r\n heading=\"They're both good\"\r\n message=\"Some say tea is just as good as coffee.\"\r\n variant=\"neutral\"\r\n title-above=\"true\"\r\n >\r\n </ic-alert>\r\n <ic-typography>\r\n You are about to add 'Americano' to your basket. Are you sure you want to continue?\r\n </ic-typography>\r\n</ic-dialog>`,\r\n long: `{shortCode}\r\n<script>\r\n const dialog = document.querySelector(\"#status-dialog\");\r\n function showDialog() {\r\n dialog.open = true;\r\n }\r\n function hideDialog() {\r\n if (dialog.open) {\r\n dialog.open = false;\r\n }\r\n }\r\n function dialogConfirmed(ev) {\r\n alert(\"Added to basket\");\r\n dialog.open = false;\r\n }\r\n dialog.addEventListener(\"icDialogConfirmed\", dialogConfirmed);\r\n dialog.addEventListener(\"icDialogClosed\", hideDialog);\r\n</script>`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcButton\r\n variant=\"primary\"\r\n onClick={handleDialogOpen}\r\n>\r\n Launch status dialog\r\n</IcButton>\r\n<IcDialog\r\n open={openDialog}\r\n heading=\"Are you sure?\"\r\n label=\"Coffee order\"\r\n onIcDialogClosed={openDialog && handleDialogClose}\r\n onIcDialogConfirmed={handleDialogClose}\r\n onIcDialogCancelled={handleDialogClose}\r\n size=\"medium\"\r\n>\r\n <IcAlert\r\n slot=\"alert\"\r\n heading=\"They're both good\"\r\n message=\"Some say tea is just as good as coffee.\"\r\n variant=\"neutral\" // \"neutral\" | \"info\" | \"warn\" | \"error\" | \"success\" \r\n titleAbove\r\n />\r\n <IcTypography>\r\n You are about to add 'Americano' to your basket. Are you sure you want\r\n to continue?\r\n </IcTypography>\r\n</IcDialog>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `const [openDialog, setOpenDialog] = useState<boolean>(false);\r\nconst handleDialogOpen = () => setOpenDialog(true);\r\nconst handleDialogClose = () => setOpenlDialog(false);\r\nreturn (\r\n <>\r\n {shortCode}\r\n </>\r\n);`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `const [openDialog, setOpenDialog] = useState(false);\r\nconst handleDialogOpen = () => setOpenDialog(true);\r\nconst handleDialogClose = () => setOpenlDialog(false);\r\nreturn (\r\n <>\r\n {shortCode}\r\n </>\r\n);`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\nexport const AlertDialog = () => {\r\n const dialogEl = useRef(null);\r\n const addTitleAboveAttribute = () => {\r\n dialogEl.current\r\n .querySelector(\"ic-alert\")\r\n .setAttribute(\"title-above\", \"true\");\r\n };\r\n const [openDialog, setOpenDialog] = useState(false);\r\n const handleDialogOpen = () => {\r\n addTitleAboveAttribute();\r\n setOpenDialog(true);\r\n };\r\n const handleDialogClose = () => setOpenDialog(false);\r\n return (\r\n <>\r\n <IcButton variant=\"primary\" onClick={handleDialogOpen}>\r\n Launch dialog\r\n </IcButton>\r\n <IcDialog\r\n ref={dialogEl}\r\n open={openDialog}\r\n heading=\"Are you sure?\"\r\n label=\"Coffee order\"\r\n onIcDialogClosed={openDialog && handleDialogClose}\r\n onIcDialogConfirmed={handleDialogClose}\r\n onIcDialogCancelled={handleDialogClose}\r\n size=\"medium\"\r\n >\r\n <IcAlert\r\n slot=\"alert\"\r\n heading=\"They're both good\"\r\n message=\"Some say tea is just as good as coffee.\"\r\n variant=\"neutral\"\r\n titleAbove\r\n />\r\n <IcTypography>\r\n You are about to add 'Americano' to your basket. Are you sure you want\r\n to continue?\r\n </IcTypography>\r\n </IcDialog>\r\n </>\r\n );\r\n};\r\n\r\n<ComponentPreview snippets={snippetsAlert}>\r\n <AlertDialog />\r\n</ComponentPreview>\r\n\r\n### Button variations\r\n\r\nexport const snippetsCustomButtons = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-button onclick=\"showDialog('#no-button-dialog')\">Launch no button dialog</ic-button>\r\n<ic-button onclick=\"showDialog('#single-button-dialog')\">Launch single button dialog</ic-button>\r\n<ic-button onclick=\"showDialog('#three-buttons-dialog')\">Launch three button dialog</ic-button>\r\n<ic-button onclick=\"showDialog('#destructive-dialog')\">Launch destructive button dialog</ic-button>\r\n<ic-dialog\r\n id=\"no-button-dialog\"\r\n buttons=\"false\"\r\n label=\"None\"\r\n heading=\"This dialog has no default buttons\"\r\n>\r\n Sorry, you cannot place orders at the moment. Please try again later.\r\n</ic-dialog>\r\n<ic-dialog id=\"single-button-dialog\" label=\"Single\" heading=\"This dialog has a single button\">\r\n <ic-typography>\r\n Your order for an Americano coffee has been placed.\r\n </ic-typography>\r\n</ic-dialog>\r\n<ic-dialog id=\"three-buttons-dialog\" label=\"Three buttons\" heading=\"This dialog has three default buttons\">\r\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod\r\n tempor incididunt ut labore et dolore magna aliqua.\r\n</ic-dialog>\r\n<ic-dialog\r\n id=\"destructive-dialog\"\r\n destructive=\"true\"\r\n label=\"Destructive\" \r\n heading=\"This dialog has a default destructive button\"\r\n>\r\n <ic-typography>\r\n You are about to cancel your order for an Americano. Are you sure you want to continue?\r\n </ic-typography>\r\n</ic-dialog>`,\r\n long: `{shortCode}\r\n<script>\r\n const singleButtonDialog = document.querySelector(\"#single-button-dialog\");\r\n const threeButtonsDialog = document.querySelector(\"#three-buttons-dialog\");\r\n const destructiveButtonDialog = document.querySelector(\"#destructive-dialog\");\r\n function showDialog(id) {\r\n document.querySelector(id).open = true;\r\n }\r\n function hideDialog(ev) {\r\n if (ev.target.open) {\r\n ev.target.open = false;\r\n }\r\n }\r\n function dialogConfirmed(ev) {\r\n alert(\"Confirmed\");\r\n ev.target.open = false;\r\n }\r\n singleButtonDialog.buttonProps = [\r\n { label: \"Confirm\", onclick: \"alert('Confirmed');this.open = false;\" },\r\n ];\r\n threeButtonsDialog.buttonProps = [\r\n { label: \"Cancel\", onclick: \"this.open = false;\" },\r\n { label: \"Options\", onclick: \"alert('Options...');\" },\r\n { label: \"Confirm\", onclick: \"alert('Confirmed'); this.open = false;\" },\r\n ];\r\n destructiveButtonDialog.buttonProps = [\r\n { label: \"Confirm\", onclick: \"alert('Confirmed'); this.open = false;\" },\r\n ];\r\n singleButtonDialog.addEventListener('icDialogClosed', hideDialog);\r\n threeButtonsDialog.addEventListener('icDialogClosed', hideDialog);\r\n destructiveButtonDialog.addEventListener('icDialogClosed', hideDialog);\r\n</script>\r\n `,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<div className={classes.btnContainer}>\r\n <IcButton onClick={handleNoButtonDialogOpen}>\r\n Launch no button dialog\r\n </IcButton>\r\n <IcButton onClick={handleSingleButtonDialogOpen}>\r\n Launch single button dialog\r\n </IcButton>\r\n <IcButton onClick={handleThreeButtonsDialogOpen}>\r\n Launch three button dialog\r\n </IcButton>\r\n <IcButton onClick={handleDestructiveButtonDialogOpen}>\r\n Launch destructive button dialog\r\n </IcButton>\r\n</div>\r\n<IcDialog\r\n open={openNoButtonDialog}\r\n buttons={false}\r\n label=\"None\"\r\n heading=\"This dialog has no default buttons\"\r\n onIcDialogClosed={openNoButtonDialog && handleDialogClose}\r\n onIcDialogConfirmed={handleDialogClose}\r\n onIcDialogCancelled={handleDialogClose}\r\n>\r\n <IcTypography>\r\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do\r\n eiusmod tempor incididunt ut labore et dolore magna aliqua.\r\n </IcTypography>\r\n</IcDialog>\r\n<IcDialog\r\n open={openSingleButtonDialog}\r\n label=\"Single\"\r\n heading=\"This dialog has a single button\"\r\n buttonProps={[\r\n { label: \"Confirm\", onclick: \"alert('Confirmed'); this.hideDialog()\" },\r\n ]}\r\n onIcDialogClosed={openSingleButtonDialog && handleDialogClose}\r\n onIcDialogConfirmed={handleDialogClose}\r\n onIcDialogCancelled={handleDialogClose}\r\n>\r\n <IcTypography>\r\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do\r\n eiusmod tempor incididunt ut labore et dolore magna aliqua.\r\n </IcTypography>\r\n</IcDialog>\r\n<IcDialog\r\n open={openThreeButtonsDialog}\r\n label=\"Triple\"\r\n heading=\"This dialog has three default buttons\"\r\n buttonProps={[\r\n { label: \"Close\", onclick: \"this.hideDialog()\" },\r\n { label: \"Options\", onclick: \"alert('Options...')\" },\r\n { label: \"Confirm\", onclick: \"alert('Confirmed'); this.hideDialog()\" },\r\n ]}\r\n onIcDialogClosed={openThreeButtonsDialog && handleDialogClose}\r\n onIcDialogConfirmed={handleDialogClose}\r\n onIcDialogCancelled={handleDialogClose}\r\n>\r\n <IcTypography>\r\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do\r\n eiusmod tempor incididunt ut labore et dolore magna aliqua.\r\n </IcTypography>\r\n</IcDialog>\r\n<IcDialog\r\n open={openDestructiveButtonDialog}\r\n destructive\r\n label=\"Destructive\"\r\n heading=\"This dialog has a default destructive button\"\r\n buttonProps={[\r\n { label: \"Confirm\", onclick: \"alert('Confirmed'); this.hideDialog()\" },\r\n ]}\r\n onIcDialogClosed={openDestructiveButtonDialog && handleDialogClose}\r\n onIcDialogConfirmed={handleDialogClose}\r\n onIcDialogCancelled={handleDialogClose}\r\n>\r\n <IcTypography>\r\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do\r\n eiusmod tempor incididunt ut labore et dolore magna aliqua.\r\n </IcTypography>\r\n</IcDialog>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `const [openNoButtonDialog, setOpenNoButtonDialog] = useState<boolean>(false);\r\nconst [openSingleButtonDialog, setOpenSingleButtonDialog] = useState<boolean>(false);\r\nconst [openThreeButtonsDialog, setOpenThreeButtonsDialog] = useState<boolean>(false);\r\nconst [openDestructiveButtonDialog, setOpenDestructiveButtonDialog] = useState<boolean>(false);\r\nconst handleNoButtonDialogOpen = () => setOpenNoButtonDialog(true);\r\nconst handleSingleButtonDialogOpen = () => setOpenSingleButtonDialog(true);\r\nconst handleThreeButtonsDialogOpen = () => setOpenThreeButtonsDialog(true);\r\nconst handleDestructiveButtonDialogOpen = () => setOpenDestructiveButtonDialog(true);\r\nconst handleDialogClose = () => {\r\n setOpenNoButtonDialog(false);\r\n setOpenSingleButtonDialog(false);\r\n setOpenThreeButtonsDialog(false);\r\n setOpenDestructiveButtonDialog(false);\r\n}\r\nconst useStyles = createUseStyles({\r\n btnContainer: { \r\n display: \"flex\",\r\n gap: \"var(--ic-space-xs)\",\r\n flexWrap: \"wrap\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nreturn (\r\n <>\r\n {shortCode}\r\n </>\r\n)`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `const [openNoButtonDialog, setOpenNoButtonDialog] = useState(false);\r\nconst [openSingleButtonDialog, setOpenSingleButtonDialog] = useState(false);\r\nconst [openThreeButtonsDialog, setOpenThreeButtonsDialog] = useState(false);\r\nconst [openDestructiveButtonDialog, setOpenDestructiveButtonDialog] = useState(false);\r\nconst handleNoButtonDialogOpen = () => setOpenNoButtonDialog(true);\r\nconst handleSingleButtonDialogOpen = () => setOpenSingleButtonDialog(true);\r\nconst handleThreeButtonsDialogOpen = () => setOpenThreeButtonsDialog(true);\r\nconst handleDestructiveButtonDialogOpen = () => setOpenDestructiveButtonDialog(true);\r\nconst handleDialogClose = () => {\r\n setOpenNoButtonDialog(false);\r\n setOpenSingleButtonDialog(false);\r\n setOpenThreeButtonsDialog(false);\r\n setOpenDestructiveButtonDialog(false);\r\n}\r\nconst useStyles = createUseStyles({\r\n btnContainer: { \r\n display: \"flex\",\r\n gap: \"var(--ic-space-xs)\",\r\n flexWrap: \"wrap\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nreturn (\r\n <>\r\n {shortCode}\r\n </>\r\n)`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\nexport const CustomButtonsDialog = () => {\r\n const [openNoButtonDialog, setOpenNoButtonDialog] = useState(false);\r\n const [openSingleButtonDialog, setOpenSingleButtonDialog] = useState(false);\r\n const [openThreeButtonsDialog, setOpenThreeButtonsDialog] = useState(false);\r\n const [openDestructiveButtonDialog, setOpenDestructiveButtonDialog] =\r\n useState(false);\r\n const handleNoButtonDialogOpen = () => setOpenNoButtonDialog(true);\r\n const handleSingleButtonDialogOpen = () => setOpenSingleButtonDialog(true);\r\n const handleThreeButtonsDialogOpen = () => setOpenThreeButtonsDialog(true);\r\n const handleDestructiveButtonDialogOpen = () =>\r\n setOpenDestructiveButtonDialog(true);\r\n const handleDialogClose = () => {\r\n setOpenNoButtonDialog(false);\r\n setOpenSingleButtonDialog(false);\r\n setOpenThreeButtonsDialog(false);\r\n setOpenDestructiveButtonDialog(false);\r\n };\r\n return (\r\n <>\r\n <div style={{ display: \"flex\", gap: \"0.5rem\", flexWrap: \"wrap\" }}>\r\n <IcButton onClick={handleNoButtonDialogOpen}>\r\n Launch no button dialog\r\n </IcButton>\r\n <IcButton onClick={handleSingleButtonDialogOpen}>\r\n Launch single button dialog\r\n </IcButton>\r\n <IcButton onClick={handleThreeButtonsDialogOpen}>\r\n Launch three button dialog\r\n </IcButton>\r\n <IcButton onClick={handleDestructiveButtonDialogOpen}>\r\n Launch destructive button dialog\r\n </IcButton>\r\n </div>\r\n <IcDialog\r\n open={openNoButtonDialog}\r\n buttons={false}\r\n label=\"None\"\r\n heading=\"This dialog has no default buttons\"\r\n onIcDialogClosed={openNoButtonDialog && handleDialogClose}\r\n onIcDialogConfirmed={handleDialogClose}\r\n onIcDialogCancelled={handleDialogClose}\r\n >\r\n <IcTypography>\r\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do\r\n eiusmod tempor incididunt ut labore et dolore magna aliqua.\r\n </IcTypography>\r\n </IcDialog>\r\n <IcDialog\r\n open={openSingleButtonDialog}\r\n label=\"Single\"\r\n heading=\"This dialog has a single button\"\r\n buttonProps={[\r\n {\r\n label: \"Confirm\",\r\n onclick: \"alert('Confirmed'); this.hideDialog()\",\r\n },\r\n ]}\r\n onIcDialogClosed={openSingleButtonDialog && handleDialogClose}\r\n onIcDialogConfirmed={handleDialogClose}\r\n onIcDialogCancelled={handleDialogClose}\r\n >\r\n <IcTypography>\r\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do\r\n eiusmod tempor incididunt ut labore et dolore magna aliqua.\r\n </IcTypography>\r\n </IcDialog>\r\n <IcDialog\r\n open={openThreeButtonsDialog}\r\n label=\"Triple\"\r\n heading=\"This dialog has three default buttons\"\r\n buttonProps={[\r\n { label: \"Close\", onclick: \"this.hideDialog()\" },\r\n { label: \"Options\", onclick: \"alert('Options...')\" },\r\n {\r\n label: \"Confirm\",\r\n onclick: \"alert('Confirmed'); this.hideDialog()\",\r\n },\r\n ]}\r\n onIcDialogClosed={openThreeButtonsDialog && handleDialogClose}\r\n onIcDialogConfirmed={handleDialogClose}\r\n onIcDialogCancelled={handleDialogClose}\r\n >\r\n <IcTypography>\r\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do\r\n eiusmod tempor incididunt ut labore et dolore magna aliqua.\r\n </IcTypography>\r\n </IcDialog>\r\n <IcDialog\r\n open={openDestructiveButtonDialog}\r\n destructive\r\n label=\"Destructive\"\r\n heading=\"This dialog has a default destructive button\"\r\n buttonProps={[\r\n {\r\n label: \"Confirm\",\r\n onclick: \"alert('Confirmed'); this.hideDialog()\",\r\n },\r\n ]}\r\n onIcDialogClosed={openDestructiveButtonDialog && handleDialogClose}\r\n onIcDialogConfirmed={handleDialogClose}\r\n onIcDialogCancelled={handleDialogClose}\r\n >\r\n <IcTypography>\r\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do\r\n eiusmod tempor incididunt ut labore et dolore magna aliqua.\r\n </IcTypography>\r\n </IcDialog>\r\n </>\r\n );\r\n};\r\n\r\n<ComponentPreview snippets={snippetsCustomButtons}>\r\n <CustomButtonsDialog />\r\n</ComponentPreview>\r\n\r\n### Slotted buttons\r\n\r\nexport const snippetsSlottedButtons = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-button onclick=\"showDialog()\">Launch dialog</ic-button>\r\n<ic-dialog id=\"slotted-dialog\" heading=\"Are you sure?\" label=\"Coffee order\">\r\n <ic-typography>\r\n You are about to add 'Americano' to your basket. Are you sure you want to continue?\r\n </ic-typography>\r\n <ic-button slot=\"dialog-controls\" variant=\"secondary\" onclick=\"hideDialog()\">\r\n Go back\r\n </ic-button>\r\n <ic-button slot=\"dialog-controls\" onclick=\"addToBasket()\">\r\n Add to basket\r\n </ic-button>\r\n</ic-dialog>`,\r\n long: `{shortCode}\r\n<script>\r\n const dialog = document.querySelector(\"#slotted-dialog\");\r\n function showDialog() { \r\n dialog.open = true;\r\n }\r\n function hideDialog() {\r\n if (dialog.open) {\r\n dialog.open = false;\r\n }\r\n }\r\n function addToBasket() {\r\n alert(\"Added to basket\");\r\n dialog.open = false;\r\n }\r\n dialog.addEventListener('icDialogClosed', hideDialog);\r\n dialog.addEventListener('icDialogCancelled', hideDialog);\r\n</script>`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcButton onClick={handleDialogOpen}>Launch slotted buttons dialog</IcButton>\r\n<IcDialog\r\n heading=\"Are you sure?\"\r\n label=\"Coffee order\"\r\n open={openDialog}\r\n onIcDialogClosed={openDialog && handleDialogClose}\r\n>\r\n <IcTypography>\r\n You are about to add 'Americano' to your basket. Are you sure you want\r\n to continue?\r\n </IcTypography>\r\n <IcButton slot=\"dialog-controls\" variant=\"secondary\" onClick={handleDialogClose}>\r\n Go back\r\n </IcButton>\r\n <IcButton slot=\"dialog-controls\" onClick={handleAddToBasket}>\r\n Add to basket\r\n </IcButton>\r\n</IcDialog>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `const [openDialog, setOpenDialog] = useState<boolean>(false);\r\nconst handleDialogOpen = () => setOpenDialog(true);\r\nconst handleDialogClose = () => setOpenDialog(false);\r\nconst handleAddToBasket = () => {\r\n alert(\"Added to basket\");\r\n setOpenDialog(false);\r\n}\r\nreturn (\r\n <>\r\n {shortCode}\r\n </>\r\n);`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `const [openDialog, setOpenDialog] = useState(false);\r\nconst handleDialogOpen = () => setOpenDialog(true);\r\nconst handleDialogClose = () => setOpenDialog(false);\r\nconst handleAddToBasket = () => {\r\n alert(\"Added to basket\");\r\n setOpenDialog(false);\r\n}\r\nreturn (\r\n <>\r\n {shortCode}\r\n </>\r\n);`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\nexport const SlottedButtonsDialog = () => {\r\n const [openDialog, setOpenDialog] = useState(false);\r\n const handleDialogOpen = () => setOpenDialog(true);\r\n const handleDialogClose = () => setOpenDialog(false);\r\n const handleAddToBasket = () => {\r\n alert(\"Added to basket\");\r\n setOpenDialog(false);\r\n };\r\n return (\r\n <>\r\n <IcButton onClick={handleDialogOpen}>Launch dialog</IcButton>\r\n <IcDialog\r\n heading=\"Are you sure?\"\r\n label=\"Coffee order\"\r\n open={openDialog}\r\n onIcDialogClosed={openDialog && handleDialogClose}\r\n >\r\n <IcTypography>\r\n You are about to add 'Americano' to your basket. Are you sure you want\r\n to continue?\r\n </IcTypography>\r\n <IcButton\r\n slot=\"dialog-controls\"\r\n variant=\"secondary\"\r\n onClick={handleDialogClose}\r\n >\r\n Go back\r\n </IcButton>\r\n <IcButton slot=\"dialog-controls\" onClick={handleAddToBasket}>\r\n Add to basket\r\n </IcButton>\r\n </IcDialog>\r\n </>\r\n );\r\n};\r\n\r\n<ComponentPreview snippets={snippetsSlottedButtons}>\r\n <SlottedButtonsDialog />\r\n</ComponentPreview>\r\n\r\n### Interactive content\r\n\r\nexport const interactiveContentSnippet = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-button onclick=\"showDialog()\">Launch dialog</ic-button>\r\n<ic-dialog \r\n id=\"interactive-content-dialog\" \r\n label=\"Coffee order\"\r\n heading=\"Please agree to our terms and conditions\"\r\n>\r\n <ic-typography>\r\n Before continuing, please agree to our terms and conditions.\r\n </ic-typography>\r\n <ic-checkbox-group \r\n name=\"terms\" \r\n label=\"terms and conditions\" \r\n hide-label=\"true\"\r\n >\r\n <ic-checkbox label=\"I agree to the terms and conditions.\" value=\"agree\"></ic-checkbox>\r\n </ic-checkbox-group>\r\n</ic-dialog>`,\r\n long: `.parent-container {\r\n padding: var(--ic-space-md);\r\n }\r\n ic-checkbox-group {\r\n margin-top: var(--ic-space-xs)\r\n }\r\n</style>\r\n<body>\r\n <div class=\"parent-container\">\r\n {shortCode}\r\n </div>\r\n <script>\r\n const dialog = document.querySelector(\"#interactive-content-dialog\");\r\n const checkGroup = document.querySelector(\"ic-checkbox-group\");\r\n let termsAgreed = false;\r\n function showDialog() {\r\n dialog.open = true;\r\n }\r\n function hideDialog() {\r\n if (dialog.open) {\r\n dialog.open = false;\r\n }\r\n }\r\n function toggleTermsAgreed() {\r\n termsAgreed = !termsAgreed;\r\n }\r\n function dialogConfirmed(ev) {\r\n const message = (termsAgreed) ? \"Terms agreed\" : \"Terms not agreed\";\r\n alert(message);\r\n ev.target.open = false;\r\n }\r\n dialog.addEventListener(\"icDialogConfirmed\", dialogConfirmed);\r\n dialog.addEventListener(\"icDialogClosed\", hideDialog);\r\n checkGroup.addEventListener(\"icChange\", toggleTermsAgreed);\r\n </script>`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcButton onClick={handleDialogOpen}>Launch dialog</IcButton>\r\n<IcDialog\r\n open={openDialog}\r\n label=\"Coffee order\"\r\n heading=\"Please agree to our terms and conditions\"\r\n onIcDialogClosed={openDialog && handleDialogClose}\r\n onIcDialogConfirmed={termsDialogConfirmed}\r\n onIcDialogCancelled={handleDialogClose}\r\n>\r\n <IcTypography>\r\n Before continuing, please agree to our terms and conditions.\r\n </IcTypography>\r\n <IcCheckboxGroup \r\n name=\"terms\" \r\n label=\"terms and conditions\" \r\n hideLabel\r\n onIcChange={toggleTermsAgreed}\r\n className={classes.checkboxGroup}\r\n >\r\n <IcCheckbox\r\n label=\"I agree to the terms and conditions.\"\r\n value=\"agree\"\r\n />\r\n </IcCheckboxGroup>\r\n</IcDialog>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `const [termsAgreed, setTermsAgreed] = useState<boolean>(false);\r\nconst [openDialog, setOpenDialog] = useState<boolean>(false);\r\nconst handleDialogOpen = () => setOpenDialog(true);\r\nconst handleDialogClose = () => setOpenDialog(false);\r\nconst toggleTermsAgreed = () => {\r\n setTermsAgreed(!termsAgreed);\r\n};\r\nconst termsDialogConfirmed = (ev) => {\r\n const message = (termsAgreed) ? \"Terms agreed\" : \"Terms not agreed\";\r\n alert(message);\r\n setOpenDialog(false);\r\n};\r\nconst useStyles = createUseStyles({\r\n parentContainer: {\r\n padding: \"var(--ic-space-md)\",\r\n },\r\n checkboxGroup: {\r\n marginTop: \"var(--ic-space-xs)\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nreturn (\r\n <div className={classes.parentContainer}>\r\n {shortCode}\r\n </div>\r\n)`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `const [termsAgreed, setTermsAgreed] = useState<boolean>(false);\r\nconst [openDialog, setOpenDialog] = useState<boolean>(false);\r\nconst handleDialogOpen = () => setOpenDialog(true);\r\nconst handleDialogClose = () => setOpenDialog(false);\r\nconst toggleTermsAgreed = () => {\r\n setTermsAgreed(!termsAgreed);\r\n};\r\nconst termsDialogConfirmed = (ev) => {\r\n const message = (termsAgreed) ? \"Terms agreed\" : \"Terms not agreed\";\r\n alert(message);\r\n setOpenDialog(false);\r\n};\r\nconst useStyles = createUseStyles({\r\n parentContainer: {\r\n padding: \"var(--ic-space-md)\",\r\n },\r\n checkboxGroup: {\r\n marginTop: \"var(--ic-space-xs)\",\r\n },\r\n});\r\nreturn (\r\n <div className={classes.parentContainer}>\r\n {shortCode}\r\n </div>\r\n)`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\nexport const InteractiveContent = () => {\r\n const [termsAgreed, setTermsAgreed] = useState(false);\r\n const [openDialog, setOpenDialog] = useState(false);\r\n const handleDialogOpen = () => setOpenDialog(true);\r\n const handleDialogClose = () => setOpenDialog(false);\r\n const toggleTermsAgreed = () => {\r\n setTermsAgreed(!termsAgreed);\r\n };\r\n const termsDialogConfirmed = () => {\r\n const message = termsAgreed ? \"Terms agreed\" : \"Terms not agreed\";\r\n alert(message);\r\n setOpenDialog(false);\r\n };\r\n return (\r\n <>\r\n <IcButton onClick={handleDialogOpen}>Launch dialog</IcButton>\r\n <IcDialog\r\n open={openDialog}\r\n label=\"Coffee order\"\r\n heading=\"Please agree to our terms and conditions\"\r\n onIcDialogClosed={openDialog && handleDialogClose}\r\n onIcDialogConfirmed={termsDialogConfirmed}\r\n onIcDialogCancelled={handleDialogClose}\r\n >\r\n <IcTypography>\r\n Before continuing, please agree to our terms and conditions.\r\n </IcTypography>\r\n <IcCheckboxGroup\r\n name=\"terms\"\r\n label=\"terms and conditions\"\r\n hideLabel\r\n onIcChange={toggleTermsAgreed}\r\n style={{ marginTop: \"0.5rem\" }}\r\n >\r\n <IcCheckbox\r\n label=\"I agree to the terms and conditions.\"\r\n value=\"agree\"\r\n />\r\n </IcCheckboxGroup>\r\n </IcDialog>\r\n </>\r\n );\r\n};\r\n\r\n<ComponentPreview snippets={interactiveContentSnippet}>\r\n <InteractiveContent />\r\n</ComponentPreview>\r\n\r\n### Background close prevented\r\n\r\nexport const noCloseSnippet = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-button onclick=\"showDialog()\">Launch dialog</ic-button>\r\n<ic-dialog\r\n id=\"no-close-dialog\"\r\n close-on-backdrop-click=\"false\" \r\n label=\"Background close prevented\"\r\n heading=\"This dialog can't be closed by clicking the background\"\r\n>\r\n <ic-typography>\r\n You are about to add 'Americano' to your basket. Are you sure you want to continue?\r\n </ic-typography>\r\n</ic-dialog>`,\r\n long: `{shortCode}\r\n<script>\r\n const dialog = document.querySelector(\"#no-close-dialog\");\r\n function showDialog() {\r\n dialog.open = true;\r\n }\r\n function hideDialog() {\r\n if (dialog.open) {\r\n dialog.open = false;\r\n }\r\n }\r\n function dialogConfirmed(ev) {\r\n alert(\"Confirmed!\");\r\n ev.target.open = false;\r\n }\r\n dialog.addEventListener(\"icDialogClosed\", hideDialog);\r\n dialog.addEventListener(\"icDialogCancelled\", hideDialog);\r\n dialog.addEventListener(\"icDialogConfirmed\", dialogConfirmed);\r\n</script>`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcButton onClick={handleDialogOpen}>Launch dialog</IcButton>\r\n<IcDialog\r\n open={openDialog}\r\n closeOnBackdropClick={false} \r\n label=\"Background close prevented\"\r\n heading=\"This dialog can't be closed by clicking the background\"\r\n onIcDialogClosed={openDialog && handleDialogClose} \r\n onIcDialogConfirmed={handleConfirmDialog} \r\n onIcDialogCancelled={handleDialogClose} \r\n>\r\n <IcTypography>\r\n You are about to add 'Americano' to your basket. Are you sure you want to continue?\r\n </IcTypography>\r\n</IcDialog>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `const [openDialog, setOpenDialog] = useState<boolean>(false);\r\nconst handleDialogOpen = () => setOpenDialog(true); \r\nconst handleDialogClose = () => setOpenDialog(false); \r\nconst handleConfirmDialog = (ev) => { \r\n alert(\"Confirmed!\");\r\n setOpenDialog(false);\r\n};\r\nreturn (\r\n <>\r\n {shortCode} \r\n </>\r\n)`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `const [openDialog, setOpenDialog] = useState(false);\r\nconst handleDialogOpen = () => setOpenDialog(true); \r\nconst handleDialogClose = () => setOpenDialog(false); \r\nconst handleConfirmDialog = (ev) => { \r\n alert(\"Confirmed!\");\r\n setOpenDialog(false);\r\n};\r\nreturn (\r\n <>\r\n {shortCode} \r\n </>\r\n)`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\nexport const NoCloseContent = () => {\r\n const [openDialog, setOpenDialog] = useState(false);\r\n const handleDialogOpen = () => setOpenDialog(true);\r\n const handleDialogClose = () => setOpenDialog(false);\r\n const handleConfirmDialog = () => {\r\n alert(\"Confirmed!\");\r\n setOpenDialog(false);\r\n };\r\n return (\r\n <>\r\n <IcButton onClick={handleDialogOpen}>Launch dialog</IcButton>\r\n <IcDialog\r\n open={openDialog}\r\n closeOnBackdropClick={false}\r\n label=\"Background close prevented\"\r\n heading=\"This dialog can't be closed by clicking the background\"\r\n onIcDialogClosed={openDialog && handleDialogClose}\r\n onIcDialogConfirmed={handleConfirmDialog}\r\n onIcDialogCancelled={handleDialogClose}\r\n >\r\n <IcTypography>\r\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do\r\n eiusmod tempor incididunt ut labore et dolore magna aliqua.\r\n </IcTypography>\r\n </IcDialog>\r\n </>\r\n );\r\n};\r\n\r\n<ComponentPreview snippets={noCloseSnippet}>\r\n <NoCloseContent />\r\n</ComponentPreview>\r\n\r\n### Events\r\n\r\nexport const eventsSnippet = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-button onclick=\"showDialog()\">Launch dialog</ic-button>\r\n<ic-dialog id=\"ev-dialog\" heading=\"Are you sure?\" label=\"Coffee order\">\r\n <ic-typography>\r\n You are about to add 'Americano' to your basket. Are you sure you want to continue?\r\n </ic-typography>\r\n <ic-button variant=\"tertiary\" onclick=\"cancelDialog()\" slot=\"dialog-controls\">\r\n Cancel\r\n </ic-button>\r\n <ic-button onclick=\"confirmDialog()\" slot=\"dialog-controls\">\r\n Confirm\r\n </ic-button>\r\n</ic-dialog>`,\r\n long: `{shortCode}\r\n<script>\r\n const dialog = document.querySelector(\"#ev-dialog\");\r\n function showDialog() {\r\n dialog.open = true;\r\n }\r\n function hideDialog() {\r\n if (dialog.open) {\r\n dialog.open = false;\r\n }\r\n }\r\n function dialogConfirmed() { \r\n alert(\"Dialog confirmed\");\r\n dialog.open = false;\r\n }\r\n function dialogCancelled() {\r\n alert(\"Dialog cancelled\");\r\n }\r\n function dialogOpened() {\r\n alert(\"Dialog opened\");\r\n }\r\n function dialogClosed() {\r\n alert(\"Dialog closed\");\r\n hideDialog();\r\n }\r\n function cancelDialog(){\r\n alert(\"Slotted cancel button\");\r\n dialog.open = false;\r\n }\r\n function confirmDialog(){\r\n alert(\"Slotted confirm button\");\r\n dialog.open = false;\r\n }\r\n dialog.addEventListener(\"icDialogConfirmed\", dialogConfirmed);\r\n dialog.addEventListener(\"icDialogCancelled\", dialogCancelled);\r\n dialog.addEventListener(\"icDialogOpened\", dialogOpened);\r\n dialog.addEventListener(\"icDialogClosed\", dialogClosed);\r\n</script>`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcButton onClick={handleDialogOpen}>Launch dialog</IcButton>\r\n<IcDialog\r\n open={openDialog}\r\n heading=\"This dialog utilises events\"\r\n label=\"Events\"\r\n onIcDialogOpened={handleDialogOpened}\r\n onIcDialogConfirmed={handleDialogConfirmed}\r\n onIcDialogCancelled={handleDialogCancelled}\r\n onIcDialogClosed={handleDialogClosed}\r\n>\r\n <IcTypography>\r\n You are about to add 'Americano' to your basket. Are you sure you want to continue?\r\n </IcTypography>\r\n <IcButton variant=\"tertiary\" onClick={handleSlottedCancel} slot=\"dialog-controls\">\r\n Cancel\r\n </IcButton>\r\n <IcButton onClick={handleSlottedConfirm} slot=\"dialog-controls\">\r\n Confirm\r\n </IcButton>\r\n</IcDialog>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `const [openDialog, setOpenDialog] = useState<boolean>(false);\r\nconst handleDialogOpen = () => setOpenDialog(true);\r\nconst handleDialogClose = () => setOpenDialog(false);\r\nconst handleDialogOpened = () => alert(\"Dialog opened\");\r\nconst handleDialogClosed = () => {\r\n alert(\"Dialog closed\");\r\n if (openDialog) {\r\n handleDialogClose();\r\n }\r\n}\r\nconst handleDialogCancelled = () => {\r\n alert(\"Dialog cancelled\");\r\n setOpenDialog(false);\r\n}\r\nconst handleDialogConfirmed = () => {\r\n alert(\"Dialog confirmed\");\r\n setOpenDialog(false);\r\n};\r\nconst handleSlottedCancel = () => {\r\n alert('Slotted cancel button');\r\n setOpenDialog(false);\r\n};\r\nconst handleSlottedConfirm = () => {\r\n alert('Slotted confirm button');\r\n setOpenDialog(false);\r\n};\r\nreturn (\r\n <>\r\n {shortCode}\r\n </>\r\n)`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `const [openDialog, setOpenDialog] = useState(false);\r\nconst handleDialogOpen = () => setOpenDialog(true);\r\nconst handleDialogClose = () => setOpenDialog(false);\r\nconst handleDialogOpened = () => alert(\"Dialog opened\");\r\nconst handleDialogClosed = () => {\r\n alert(\"Dialog closed\");\r\n if (openDialog) {\r\n handleDialogClose();\r\n }\r\n}\r\nconst handleDialogCancelled = () => {\r\n alert(\"Dialog cancelled\");\r\n setOpenDialog(false);\r\n}\r\nconst handleDialogConfirmed = () => {\r\n alert(\"Dialog confirmed\");\r\n setOpenDialog(false);\r\n};\r\nconst handleSlottedCancel = () => {\r\n alert('Slotted cancel button');\r\n setOpenDialog(false);\r\n};\r\nconst handleSlottedConfirm = () => {\r\n alert('Slotted confirm button');\r\n setOpenDialog(false);\r\n};\r\nreturn (\r\n <>\r\n {shortCode}\r\n </>\r\n)`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\nexport const EventsContent = () => {\r\n const [openDialog, setOpenDialog] = useState(false);\r\n const handleDialogOpen = () => setOpenDialog(true);\r\n const handleDialogClose = () => setOpenDialog(false);\r\n const handleDialogOpened = () => alert(\"Dialog opened\");\r\n const handleDialogClosed = () => {\r\n alert(\"Dialog closed\");\r\n if (openDialog) {\r\n handleDialogClose();\r\n }\r\n };\r\n const handleDialogCancelled = () => {\r\n alert(\"Dialog cancelled\");\r\n setOpenDialog(false);\r\n };\r\n const handleDialogConfirmed = () => {\r\n alert(\"Dialog confirmed\");\r\n setOpenDialog(false);\r\n };\r\n const handleSlottedCancel = () => {\r\n alert(\"Slotted cancel button\");\r\n setOpenDialog(false);\r\n };\r\n const handleSlottedConfirm = () => {\r\n alert(\"Slotted confirm button\");\r\n setOpenDialog(false);\r\n };\r\n return (\r\n <>\r\n <IcButton onClick={handleDialogOpen}>Launch dialog</IcButton>\r\n <IcDialog\r\n open={openDialog}\r\n heading=\"This dialog utilises events\"\r\n label=\"Events\"\r\n onIcDialogOpened={handleDialogOpened}\r\n onIcDialogConfirmed={handleDialogConfirmed}\r\n onIcDialogCancelled={handleDialogCancelled}\r\n onIcDialogClosed={handleDialogClosed}\r\n >\r\n <IcTypography>\r\n You are about to add 'Americano' to your basket. Are you sure you want\r\n to continue?\r\n </IcTypography>\r\n <IcButton\r\n variant=\"tertiary\"\r\n onClick={handleSlottedCancel}\r\n slot=\"dialog-controls\"\r\n >\r\n Cancel\r\n </IcButton>\r\n <IcButton onClick={handleSlottedConfirm} slot=\"dialog-controls\">\r\n Confirm\r\n </IcButton>\r\n </IcDialog>\r\n </>\r\n );\r\n};\r\n\r\n<ComponentPreview snippets={eventsSnippet}>\r\n <EventsContent />\r\n</ComponentPreview>\r\n\r\n### Disabled height constraint\r\n\r\nexport const popoutElements = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-button onclick='showDialog()'>Launch disabled height constraint dialog</ic-button>\r\n<ic-dialog\r\n label='Coffee order'\r\n heading='Please add your milk?'\r\n disable-height-constraint='true'\r\n>\r\n <ic-typography>Sure, let's dive into the delightful world of milk, where dairy dreams and coffee collide in the harmonious dance of a flat white. Picture this: you stroll into your favorite coffee haunt, the aroma of freshly ground beans tickling your senses. You approach the counter, ready to make a crucial decision – what kind of milk will accompany your flat white?</ic-typography><br/>\r\n <ic-typography>In the end, whether you go for the classic, embrace the trendy, or opt for the exotic, the flat white remains a canvas waiting to be painted with your milk of choice. So, next time you're at the coffee counter, let your taste buds embark on a journey – a journey where milk and coffee meet, and every sip tells a story, sprinkled with a dash of humor and a whole lot of flavor. Cheers to the caffeinated adventure!</ic-typography><br/>\r\n <ic-select label='Please select a type of milk'></ic-select>\r\n</ic-dialog>`,\r\n long: `{shortCode}\r\n<script>\r\n const milkSelect = document.querySelector('ic-select');\r\n const dialog = document.querySelector('ic-dialog');\r\n milkSelect.options = [\r\n { value: 'whole', label: 'Whole' },\r\n { value: 'semiskinned', label: 'Semi Skinned' },\r\n { value: 'oat', label: 'Oat' },\r\n { value: 'almond', label: 'Almond' }\r\n ];\r\n function showDialog() {\r\n dialog.open = true;\r\n }\r\n function hideDialog() {\r\n if (dialog.open) {\r\n dialog.open = false;\r\n }\r\n }\r\n dialog.addEventListener('icDialogClosed', hideDialog);\r\n dialog.addEventListener('icDialogCancelled', hideDialog);\r\n</script>`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcButton onClick={handleDialogOpen}>Launch disabled height constraint dialog</IcButton>\r\n<IcDialog\r\n label='Coffee order'\r\n heading=\"Please add your milk\"\r\n disableHeightConstraint \r\n open={openDialog}\r\n onIcDialogConfirmed={openDialog && handleDialogClose}\r\n onIcDialogCancelled={handleDialogClose}\r\n>\r\n <IcTypography>\r\n Sure, let's dive into the delightful world of milk, where dairy dreams\r\n and coffee collide in the harmonious dance of a flat white. Picture\r\n this: you stroll into your favorite coffee haunt, the aroma of freshly\r\n ground beans tickling your senses. You approach the counter, ready to\r\n make a crucial decision – what kind of milk will accompany your flat\r\n white?\r\n </IcTypography>\r\n <br />\r\n <IcTypography>\r\n In the end, whether you go for the classic, embrace the trendy, or opt\r\n for the exotic, the flat white remains a canvas waiting to be painted\r\n with your milk of choice. So, next time you're at the coffee counter,\r\n let your taste buds embark on a journey – a journey where milk and\r\n coffee meet, and every sip tells a story, sprinkled with a dash of\r\n humor and a whole lot of flavor. Cheers to the caffeinated adventure!\r\n </IcTypography>\r\n <br />\r\n <IcSelect \r\n label='Select a type of milk'\r\n options={[\r\n { value: 'whole', label: 'Whole' },\r\n { value: 'semiskinned', label: 'Semi Skinned' },\r\n { value: 'oat', label: 'Oat' },\r\n { value: 'almond', label: 'Almond' }\r\n ]}\r\n />\r\n</IcDialog>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `const [openDialog, setOpenDialog] = useState<boolean>(false);\r\nconst handleDialogOpen = () => setOpenDialog(true);\r\nconst handleDialogClose = () => setOpenDialog(false);\r\nreturn (\r\n <>\r\n {shortCode}\r\n </>\r\n)`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `const [openDialog, setOpenDialog] = useState(false);\r\nconst handleDialogOpen = () => setOpenDialog(true);\r\nconst handleDialogClose = () => setOpenDialog(false);\r\nreturn (\r\n <>\r\n {shortCode}\r\n </>\r\n)`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\nexport const DialogWithPopout = () => {\r\n const [openDialog, setOpenDialog] = useState(false);\r\n const handleDialogOpen = () => setOpenDialog(true);\r\n const handleDialogClose = () => setOpenDialog(false);\r\n return (\r\n <>\r\n <IcButton onClick={handleDialogOpen}>\r\n Launch disabled height constraint dialog\r\n </IcButton>\r\n <IcDialog\r\n label=\"Coffee order\"\r\n heading=\"Please add your milk\"\r\n disableHeightConstraint\r\n open={openDialog}\r\n onIcDialogClosed={openDialog && handleDialogClose}\r\n onIcDialogConfirmed={handleDialogClose}\r\n onIcDialogCancelled={handleDialogClose}\r\n >\r\n <IcTypography>\r\n Sure, let's dive into the delightful world of milk, where dairy dreams\r\n and coffee collide in the harmonious dance of a flat white. Picture\r\n this: you stroll into your favorite coffee haunt, the aroma of freshly\r\n ground beans tickling your senses. You approach the counter, ready to\r\n make a crucial decision – what kind of milk will accompany your flat\r\n white?\r\n </IcTypography>\r\n <br />\r\n <IcTypography>\r\n In the end, whether you go for the classic, embrace the trendy, or opt\r\n for the exotic, the flat white remains a canvas waiting to be painted\r\n with your milk of choice. So, next time you're at the coffee counter,\r\n let your taste buds embark on a journey – a journey where milk and\r\n coffee meet, and every sip tells a story, sprinkled with a dash of\r\n humor and a whole lot of flavor. Cheers to the caffeinated adventure!\r\n </IcTypography>\r\n <br />\r\n <IcSelect\r\n label=\"Select a type of milk\"\r\n options={[\r\n { value: \"whole\", label: \"Whole\" },\r\n { value: \"semiskinned\", label: \"Semi Skinned\" },\r\n { value: \"oat\", label: \"Oat\" },\r\n { value: \"almond\", label: \"Almond\" },\r\n ]}\r\n />\r\n </IcDialog>\r\n </>\r\n );\r\n};\r\n\r\n<ComponentPreview snippets={popoutElements}>\r\n <DialogWithPopout />\r\n</ComponentPreview>\r\n",
"path": "/components/dialog/code",
"date": "2024-05-31",
"title": "Dialog",
@@ -2108,16 +2108,16 @@
}
],
"meta": {
- "relativePath": "components/dialog/code.mdx",
- "createdAt": "2024-11-06T10:27:49.408Z",
- "lastModified": "2024-11-06T10:19:00.008Z",
- "size": 46750,
- "formattedSize": "45.7 KB"
+ "relativePath": "components\\dialog\\code.mdx",
+ "createdAt": "2024-12-04T13:23:54.097Z",
+ "lastModified": "2024-12-04T13:23:54.097Z",
+ "size": 48334,
+ "formattedSize": "47.2 KB"
}
},
{
"id": "components\\dialog\\guidancex",
- "contents": "\nimport { IcDialog, IcButton, IcTypography } from \"@ukic/react\";\nimport { useRef } from \"react\";\nimport dialogFig1 from \"./images/fig-1-use-action-buttons-to-provide-user-with-choice.png\";\nimport dialogFig2 from \"./images/fig-2-use-inputs-to-get-important-information-from-users.png\";\nimport dialogFig3 from \"./images/fig-3-use-dialogs-to-show-additional-info.png\";\nimport dialogFig4 from \"./images/fig-4-use-status-alert-to-provide-status-information.png\";\nimport dialogFig5 from \"./images/fig-5-use-destructive-actions.png\";\nimport dialogFig6 from \"./images/fig-6-avoid-including-complex-content.png\";\nimport dialogFig7 from \"./images/fig-7-dialog-anatomy.png\";\n\n## Introduction\n\nDialogs prompt users for additional information to proceed with their task. Dialogs appear modally, meaning that the user must take action to acknowledge the dialog before continuing.\n\nDialogs work best when used for short tasks or to alert the user to information relevant for their current task. A dialog appears on top of the main page content and is persistent until dismissed.\n\n## Component demo\n\nexport const DialogExample = () => {\n const dialogEl = useRef(null);\n const showDialog = () => {\n dialogEl.current.open = true;\n };\n return (\n <>\n <IcButton onclick={showDialog} aria-label=\"Launch dialog\">\n Launch dialog\n </IcButton>\n <IcDialog\n heading=\"Are you sure?\"\n label=\"Coffee order\"\n ref={dialogEl}\n buttonProps={[\n { label: \"Cancel\", onclick: \"this.cancelDialog()\" },\n {\n label: \"Confirm\",\n onclick: \"alert('Confirmed!'); this.open = false;\",\n },\n ]}\n >\n <IcTypography>\n You are about to add 'Americano' to your basket. Are you sure you want\n to continue?\n </IcTypography>\n </IcDialog>\n </>\n );\n};\n\n<ComponentPreview\n style={{\n display: \"flex\",\n justifyContent: \"center\",\n }}\n>\n <DialogExample />\n</ComponentPreview>\n\n## When to use\n\nUse dialogs to interrupt the user flow to display, collect or confirm information that is important to enable the user to continue their task.\n\nAdd action buttons to a dialog to present the user with a set of actions to choose from to continue.\n\n<DoDontCaution\n imageSrc={dialogFig1}\n imageAlt=\"An example dialog message for a coffee order saying 'Are you sure?' with buttons for 'Continue' and 'Go back'.\"\n state=\"good\"\n caption=\"Use dialogs with buttons to present the user with a required action.\"\n/>\n\nAdd interactive content inside a dialog's content area to capture key input, such as providing confirmation of understanding by checking a checkbox.\n\n<DoDontCaution\n imageSrc={dialogFig2}\n imageAlt=\"An example dialog for a coffee order that says 'Please agree to our terms and conditions.' The dialog has a checkbox in its content that allows the user to signify agreement. There are two buttons for 'continue' and 'go back'.\"\n state=\"good\"\n caption=\"Use dialogs with interactive content in the content area to capture key input from a user before continuing.\"\n/>\n\nUse dialogs to show additional information that can be opened from the underlying page. These dialogs can be passive and contain no actions other than a dismiss button to close the dialog.\n\n<DoDontCaution\n imageSrc={dialogFig3}\n imageAlt=\": An example dialog containing additional information about the 'Americano' product.\"\n state=\"good\"\n caption=\"Use dialogs to provide additional information that isn't displayed on the underlying page.\"\n/>\n\nAdd a status [alert](/components/alert) to a dialog to provide additional meaning in relation to a specific status. These can include any alert status variant.\n\n<DoDontCaution\n imageSrc={dialogFig4}\n imageAlt=\"An example dialog for a coffee order asking if the user is sure they want to continue adding the product 'Americano' to their basket. It contains a warning alert that says 'Only a few left'.\"\n state=\"good\"\n caption=\"Use a status alert within a dialog to highlight important information related to the dialog's content.\"\n/>\n\nUse dialogs when a destructive action is about to take place. Ask the user to confirm if they want to continue to conduct the action and provide a way of cancelling the action.\n\n<DoDontCaution\n imageSrc={dialogFig5}\n imageAlt=\"An example dialog for removing an item from a basket. It provides a destructive action button for 'Remove' and a secondary button for 'Go back'.\"\n state=\"good\"\n caption=\"Use a dialog for destructive actions to give the user an option to back out at the last minute.\"\n/>\n\n## When not to use\n\nAvoid using dialogs to contain complicated tasks or processes. Instead consider if such complex tasks could be placed on a page themselves.\n\n<DoDontCaution\n imageSrc={dialogFig6}\n imageAlt=\"An example dialog containing a multi-step form for selecting and adding drinks to an order. A stepper with four steps is used with multiple form elements inside each step.\"\n state=\"caution\"\n caption=\"Whilst you can put any content within a dialog, avoid placing complex tasks in one and consider placing it on the main page itself.\"\n/>\n\nDon't place important information inside a dialog if it is not part of the main flow of task. Such information can be missed so consider placing it on the page itself. Avoid repeating information in a dialog that is displayed on the page itself.\n\nDon't use dialogs when information from the main page content is required to complete a task within a dialog. Keep all information required to complete the task in a dialog within the dialog. If more information is required, consider if dialogs may not be suitable for the task.\n\nAvoid overusing dialogs to bring every decision in a task to the user's attention. Use dialogs for the key actions in a task instead. Dialogs may be ignored if used too frequently.\n\nOnly show dialogs after a user action has triggered it, and make sure its content is contextual to the user action. Don't show dialogs if a user has not performed a specific action on the page.\n\n## Interaction behaviour\n\nDisplay dialogs after users complete a specific action on a page such as clicking a 'submit' button.\n\nAlways make sure the dismiss button is included within a dialog, and select whether to allow the dialog to close by clicking on the background scrim.\n\nWhen a dialog is displayed, the page content in the background cannot be interacted with.\n\nContent can scroll within the body of a dialog, whilst the header section and interaction section are sticky at the top and bottom of the dialog window.\n\n## Sizing\n\nSet the dialog's size dependent on the amount of content that is being displayed in it. Large dialogs take up most of the screen so are good to use when there is a lot of content to display such as a table. Small dialogs only use a small amount of the screen so are best used for short additional information.\n\nOn extra small breakpoints all dialogs automatically change to their full-screen setting to provide maximum space for their content.\n\n## Content\n\nAlways give dialogs a meaningful heading and describe the task that the dialog contains.\n\nAdd an optional label to a dialog to add categorisation or other secondary information.\n\nSpecify any content within the dialog's body section, but take care not to place too much information in a dialog if it is best placed as a page itself. Also, consider using a full page instead of a dialog when lots of interactive elements are required.\n\nAlways follow the [content style](/styles/content-style) when writing textual content.\n\n<DoDontCaution\n imageSrc={dialogFig7}\n imageAlt=\"A diagram showing the anatomy of a dialog. It has three areas, a title area at the top, a content area in the middle, and an action area at the bottom.\"\n state=\"none\"\n caption=\"Dialogs have three sections: a title area, a content area and an action area.\"\n/>\n\nWhen adding interactive content to a dialog and it has popover elements, to avoid the elements being cut off within the content area, use the prop `disableHeightConstraint` to allow the dialog to stretch to contain its content.\n",
+ "contents": "\r\nimport { IcDialog, IcButton, IcTypography } from \"@ukic/react\";\r\nimport { useRef } from \"react\";\r\nimport dialogFig1 from \"./images/fig-1-use-action-buttons-to-provide-user-with-choice.png\";\r\nimport dialogFig2 from \"./images/fig-2-use-inputs-to-get-important-information-from-users.png\";\r\nimport dialogFig3 from \"./images/fig-3-use-dialogs-to-show-additional-info.png\";\r\nimport dialogFig4 from \"./images/fig-4-use-status-alert-to-provide-status-information.png\";\r\nimport dialogFig5 from \"./images/fig-5-use-destructive-actions.png\";\r\nimport dialogFig6 from \"./images/fig-6-avoid-including-complex-content.png\";\r\nimport dialogFig7 from \"./images/fig-7-dialog-anatomy.png\";\r\n\r\n## Introduction\r\n\r\nDialogs prompt users for additional information to proceed with their task. Dialogs appear modally, meaning that the user must take action to acknowledge the dialog before continuing.\r\n\r\nDialogs work best when used for short tasks or to alert the user to information relevant for their current task. A dialog appears on top of the main page content and is persistent until dismissed.\r\n\r\n## Component demo\r\n\r\nexport const DialogExample = () => {\r\n const dialogEl = useRef(null);\r\n const showDialog = () => {\r\n dialogEl.current.open = true;\r\n };\r\n return (\r\n <>\r\n <IcButton onclick={showDialog} aria-label=\"Launch dialog\">\r\n Launch dialog\r\n </IcButton>\r\n <IcDialog\r\n heading=\"Are you sure?\"\r\n label=\"Coffee order\"\r\n ref={dialogEl}\r\n buttonProps={[\r\n { label: \"Cancel\", onclick: \"this.cancelDialog()\" },\r\n {\r\n label: \"Confirm\",\r\n onclick: \"alert('Confirmed!'); this.open = false;\",\r\n },\r\n ]}\r\n >\r\n <IcTypography>\r\n You are about to add 'Americano' to your basket. Are you sure you want\r\n to continue?\r\n </IcTypography>\r\n </IcDialog>\r\n </>\r\n );\r\n};\r\n\r\n<ComponentPreview\r\n style={{\r\n display: \"flex\",\r\n justifyContent: \"center\",\r\n }}\r\n>\r\n <DialogExample />\r\n</ComponentPreview>\r\n\r\n## When to use\r\n\r\nUse dialogs to interrupt the user flow to display, collect or confirm information that is important to enable the user to continue their task.\r\n\r\nAdd action buttons to a dialog to present the user with a set of actions to choose from to continue.\r\n\r\n<DoDontCaution\r\n imageSrc={dialogFig1}\r\n imageAlt=\"An example dialog message for a coffee order saying 'Are you sure?' with buttons for 'Continue' and 'Go back'.\"\r\n state=\"good\"\r\n caption=\"Use dialogs with buttons to present the user with a required action.\"\r\n/>\r\n\r\nAdd interactive content inside a dialog's content area to capture key input, such as providing confirmation of understanding by checking a checkbox.\r\n\r\n<DoDontCaution\r\n imageSrc={dialogFig2}\r\n imageAlt=\"An example dialog for a coffee order that says 'Please agree to our terms and conditions.' The dialog has a checkbox in its content that allows the user to signify agreement. There are two buttons for 'continue' and 'go back'.\"\r\n state=\"good\"\r\n caption=\"Use dialogs with interactive content in the content area to capture key input from a user before continuing.\"\r\n/>\r\n\r\nUse dialogs to show additional information that can be opened from the underlying page. These dialogs can be passive and contain no actions other than a dismiss button to close the dialog.\r\n\r\n<DoDontCaution\r\n imageSrc={dialogFig3}\r\n imageAlt=\": An example dialog containing additional information about the 'Americano' product.\"\r\n state=\"good\"\r\n caption=\"Use dialogs to provide additional information that isn't displayed on the underlying page.\"\r\n/>\r\n\r\nAdd a status [alert](/components/alert) to a dialog to provide additional meaning in relation to a specific status. These can include any alert status variant.\r\n\r\n<DoDontCaution\r\n imageSrc={dialogFig4}\r\n imageAlt=\"An example dialog for a coffee order asking if the user is sure they want to continue adding the product 'Americano' to their basket. It contains a warning alert that says 'Only a few left'.\"\r\n state=\"good\"\r\n caption=\"Use a status alert within a dialog to highlight important information related to the dialog's content.\"\r\n/>\r\n\r\nUse dialogs when a destructive action is about to take place. Ask the user to confirm if they want to continue to conduct the action and provide a way of cancelling the action.\r\n\r\n<DoDontCaution\r\n imageSrc={dialogFig5}\r\n imageAlt=\"An example dialog for removing an item from a basket. It provides a destructive action button for 'Remove' and a secondary button for 'Go back'.\"\r\n state=\"good\"\r\n caption=\"Use a dialog for destructive actions to give the user an option to back out at the last minute.\"\r\n/>\r\n\r\n## When not to use\r\n\r\nAvoid using dialogs to contain complicated tasks or processes. Instead consider if such complex tasks could be placed on a page themselves.\r\n\r\n<DoDontCaution\r\n imageSrc={dialogFig6}\r\n imageAlt=\"An example dialog containing a multi-step form for selecting and adding drinks to an order. A stepper with four steps is used with multiple form elements inside each step.\"\r\n state=\"caution\"\r\n caption=\"Whilst you can put any content within a dialog, avoid placing complex tasks in one and consider placing it on the main page itself.\"\r\n/>\r\n\r\nDon't place important information inside a dialog if it is not part of the main flow of task. Such information can be missed so consider placing it on the page itself. Avoid repeating information in a dialog that is displayed on the page itself.\r\n\r\nDon't use dialogs when information from the main page content is required to complete a task within a dialog. Keep all information required to complete the task in a dialog within the dialog. If more information is required, consider if dialogs may not be suitable for the task.\r\n\r\nAvoid overusing dialogs to bring every decision in a task to the user's attention. Use dialogs for the key actions in a task instead. Dialogs may be ignored if used too frequently.\r\n\r\nOnly show dialogs after a user action has triggered it, and make sure its content is contextual to the user action. Don't show dialogs if a user has not performed a specific action on the page.\r\n\r\n## Interaction behaviour\r\n\r\nDisplay dialogs after users complete a specific action on a page such as clicking a 'submit' button.\r\n\r\nAlways make sure the dismiss button is included within a dialog, and select whether to allow the dialog to close by clicking on the background scrim.\r\n\r\nWhen a dialog is displayed, the page content in the background cannot be interacted with.\r\n\r\nContent can scroll within the body of a dialog, whilst the header section and interaction section are sticky at the top and bottom of the dialog window.\r\n\r\n## Sizing\r\n\r\nSet the dialog's size dependent on the amount of content that is being displayed in it. Large dialogs take up most of the screen so are good to use when there is a lot of content to display such as a table. Small dialogs only use a small amount of the screen so are best used for short additional information.\r\n\r\nOn extra small breakpoints all dialogs automatically change to their full-screen setting to provide maximum space for their content.\r\n\r\n## Content\r\n\r\nAlways give dialogs a meaningful heading and describe the task that the dialog contains.\r\n\r\nAdd an optional label to a dialog to add categorisation or other secondary information.\r\n\r\nSpecify any content within the dialog's body section, but take care not to place too much information in a dialog if it is best placed as a page itself. Also, consider using a full page instead of a dialog when lots of interactive elements are required.\r\n\r\nAlways follow the [content style](/styles/content-style) when writing textual content.\r\n\r\n<DoDontCaution\r\n imageSrc={dialogFig7}\r\n imageAlt=\"A diagram showing the anatomy of a dialog. It has three areas, a title area at the top, a content area in the middle, and an action area at the bottom.\"\r\n state=\"none\"\r\n caption=\"Dialogs have three sections: a title area, a content area and an action area.\"\r\n/>\r\n\r\nWhen adding interactive content to a dialog and it has popover elements, to avoid the elements being cut off within the content area, use the prop `disableHeightConstraint` to allow the dialog to stretch to contain its content.\r\n",
"path": "/components/dialog",
"navPriority": 16,
"date": "2023-10-24",
@@ -2141,11 +2141,11 @@
],
"tags": ["Popup", "Modal window"],
"meta": {
- "relativePath": "components/dialog/guidance.mdx",
- "createdAt": "2024-11-06T10:27:49.408Z",
- "lastModified": "2024-11-06T10:19:00.008Z",
- "size": 8641,
- "formattedSize": "8.4 KB"
+ "relativePath": "components\\dialog\\guidance.mdx",
+ "createdAt": "2024-12-04T13:23:54.098Z",
+ "lastModified": "2024-12-04T13:23:54.098Z",
+ "size": 8826,
+ "formattedSize": "8.6 KB"
}
},
{
@@ -2172,16 +2172,16 @@
}
],
"meta": {
- "relativePath": "components/empty-state/accessibility.mdx",
- "createdAt": "2024-11-06T10:27:49.404Z",
- "lastModified": "2024-11-06T10:19:00.012Z",
+ "relativePath": "components\\empty-state\\accessibility.mdx",
+ "createdAt": "2024-11-05T11:57:51.867Z",
+ "lastModified": "2024-11-05T11:57:51.867Z",
"size": 1536,
"formattedSize": "1.5 KB"
}
},
{
"id": "components\\empty-state\\codex",
- "contents": "\nimport { IcEmptyState, IcButton, IcLink } from \"@ukic/react\";\n\n## Component demo\n\nexport const snippets = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-empty-state \n heading=\"Hmm...there's nothing here\" \n subheading=\"We don't currently have any favourite teas, probably because coffee is much better.\" \n body=\"Take a look at our favourite coffees instead, there's much more of those.\"\n>\n <svg slot=\"image\" viewBox=\"0 0 1600 1600\">\n <rect fill=\"#ff7700\" width=\"1600\" height=\"1600\" />\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-button slot=\"actions\">Go to favourite coffees</ic-button>\n <ic-link slot=\"actions\" href=\"/\">\n Customer support\n </ic-link>\n</ic-empty-state>`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcEmptyState \n heading=\"Hmm...there's nothing here\" \n subheading=\"We don't currently have any favourite teas, probably because coffee is much better.\" \n body=\"Take a look at our favourite coffees instead, there's much more of those.\" \n>\n <SlottedSVG slot=\"image\" viewBox=\"0 0 1600 1600\">\n <rect fill=\"#ff7700\" width=\"1600\" height=\"1600\" />\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 </SlottedSVG>\n <IcButton slot=\"actions\">Go to favourite coffees</IcButton>\n <IcLink slot=\"actions\" href=\"/\">\n Customer support\n </IcLink>\n</IcEmptyState>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `{shortCode}`,\n },\n {\n language: \"Javascript\",\n snippet: `{shortCode}`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={snippets}>\n <IcEmptyState\n heading=\"Hmm...there's nothing here\"\n subheading=\"We don't currently have any favourite teas, probably because coffee is much better.\"\n body=\"Take a look at our favourite coffees instead, there's much more of those.\"\n >\n <svg slot=\"image\" viewBox=\"0 0 1600 1600\">\n <rect fill=\"#ff7700\" width=\"1600\" height=\"1600\" />\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 <IcButton slot=\"actions\">Go to favourite coffees</IcButton>\n <IcLink slot=\"actions\" href=\"#\" onClick={(e) => e.preventDefault()}>\n Customer support\n </IcLink>\n </IcEmptyState>\n</ComponentPreview>\n\n## Empty state details\n\n<ComponentDetails component=\"ic-empty-state\" />\n\n## Variants\n\n### Actions slot\n\nexport const actionsSnippets = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-empty-state \n heading=\"Hmm...there's nothing here\" \n subheading=\"We don't currently have any favourite teas, probably because coffee is much better.\" \n body=\"Take a look at our favourite coffees instead, there's much more of those, or try again.\"\n>\n <ic-button slot=\"actions\">Go to favourite coffees</ic-button>\n <ic-link slot=\"actions\" href=\"/\">Customer support</ic-link>\n</ic-empty-state>`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcEmptyState \n heading=\"Hmm...there's nothing here\" \n subheading=\"We don't currently have any favourite teas, probably because coffee is much better.\" \n body=\"Take a look at our favourite coffees instead, there's much more of those, or try again.\"\n>\n <IcButton slot=\"actions\">Go to favourite coffees</IcButton>\n <IcLink slot=\"actions\" href=\"/\">Customer support</IcLink>\n</IcEmptyState>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `{shortCode}`,\n },\n {\n language: \"Javascript\",\n snippet: `{shortCode}`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={actionsSnippets}>\n <IcEmptyState\n heading=\"Hmm...there's nothing here\"\n subheading=\"We don't currently have any favourite teas, probably because coffee is much better.\"\n body=\"Take a look at our favourite coffees instead, there's much more of those, or try again.\"\n >\n <IcButton slot=\"actions\">Go to favourite coffees</IcButton>\n <IcLink slot=\"actions\" href=\"#\" onClick={(e) => e.preventDefault()}>\n Customer support\n </IcLink>\n </IcEmptyState>\n</ComponentPreview>\n\n### Image slot\n\nexport const imageSnippets = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-empty-state \n heading=\"Hmm...there's nothing here\" \n subheading=\"We don't currently have any favourite teas, probably because coffee is much better.\" \n body=\"Take a look at our favourite coffees instead, there's much more of those, or try again.\"\n>\n <svg\n slot=\"image\"\n viewBox=\"0 0 1600 1600\"\n >\n <rect fill=\"#ff7700\" width=\"1600\" height=\"1600\" />\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-empty-state>`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcEmptyState \n heading=\"Hmm...there's nothing here\" \n subheading=\"We don't currently have any favourite teas, probably because coffee is much better.\" \n body=\"Take a look at our favourite coffees instead, there's much more of those, or try again.\"\n>\n <SlottedSVG\n slot=\"image\"\n viewBox=\"0 0 1600 1600\"\n >\n <rect fill=\"#ff7700\" width=\"1600\" height=\"1600\" />\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 </SlottedSVG>\n</IcEmptyState>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `{shortCode}`,\n },\n {\n language: \"Javascript\",\n snippet: `{shortCode}`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={imageSnippets}>\n <IcEmptyState\n heading=\"Hmm...there's nothing here\"\n subheading=\"We don't currently have any favourite teas, probably because coffee is much better.\"\n body=\"Take a look at our favourite coffees instead, there's much more of those, or try again.\"\n >\n <svg slot=\"image\" viewBox=\"0 0 1600 1600\">\n <rect fill=\"#ff7700\" width=\"1600\" height=\"1600\" />\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 </IcEmptyState>\n</ComponentPreview>\n\n### Image size\n\nexport const imageLargeSnippets = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-empty-state \n image-size=\"large\" \n heading=\"Hmm...there's nothing here\" \n subheading=\"We don't currently have any favourite teas, probably because coffee is much better.\" \n body=\"Take a look at our favourite coffees instead, there's much more of those, or try again.\"\n>\n <svg\n slot=\"image\"\n viewBox=\"0 0 1600 1600\"\n >\n <rect fill=\"#ff7700\" width=\"1600\" height=\"1600\" />\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-empty-state>`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcEmptyState \n imageSize=\"large\" \n heading=\"Hmm...there's nothing here\" \n subheading=\"We don't currently have any favourite teas, probably because coffee is much better.\" \n body=\"Take a look at our favourite coffees instead, there's much more of those, or try again.\"\n>\n <SlottedSVG\n slot=\"image\"\n viewBox=\"0 0 1600 1600\"\n >\n <rect fill=\"#ff7700\" width=\"1600\" height=\"1600\" />\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 </SlottedSVG>\n</IcEmptyState>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `{shortCode}`,\n },\n {\n language: \"Javascript\",\n snippet: `{shortCode}`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={imageLargeSnippets}>\n <IcEmptyState\n imageSize=\"large\"\n heading=\"Hmm...there's nothing here\"\n subheading=\"We don't currently have any favourite teas, probably because coffee is much better.\"\n body=\"Take a look at our favourite coffees instead, there's much more of those, or try again.\"\n >\n <svg slot=\"image\" viewBox=\"0 0 1600 1600\">\n <rect fill=\"#ff7700\" width=\"1600\" height=\"1600\" />\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 </IcEmptyState>\n</ComponentPreview>\n\n### Icon in the image slot\n\nexport const iconSnippets = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-empty-state \n heading=\"Hmm...there's nothing here\"\n subheading=\"We don't currently have any favourite teas, probably because coffee is much better.\"\n body=\"Take a look at our favourite coffees instead, there's much more of those, or try again.\"\n>\n <svg\n slot=\"image\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"#D07932\"\n >\n <title id=\"warning-title\">Warning</title>\n <path d=\"M0 0h24v24H0z\" fill=\"none\" />\n <path d=\"M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z\" />\n </svg>\n</ic-empty-state>`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcEmptyState \n heading=\"Hmm...there's nothing here\"\n subheading=\"We don't currently have any favourite teas, probably because coffee is much better.\"\n body=\"Take a look at our favourite coffees instead, there's much more of those, or try again.\"\n>\n <SlottedSVG\n slot=\"image\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"#D07932\"\n >\n <title id=\"warning-title\">Warning</title>\n <path d=\"M0 0h24v24H0z\" fill=\"none\" />\n <path d=\"M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z\" />\n </SlottedSVG>\n</IcEmptyState>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `{shortCode}`,\n },\n {\n language: \"Javascript\",\n snippet: `{shortCode}`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={iconSnippets}>\n <IcEmptyState\n heading=\"Hmm...there's nothing here\"\n subheading=\"We don't currently have any favourite teas, probably because coffee is much better.\"\n body=\"Take a look at our favourite coffees instead, there's much more of those, or try again.\"\n >\n <svg\n slot=\"image\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"#D07932\"\n >\n <title id=\"warning-title\">Warning</title>\n <path d=\"M0 0h24v24H0z\" fill=\"none\" />\n <path d=\"M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z\" />\n </svg>\n </IcEmptyState>\n</ComponentPreview>\n\n### Right aligned\n\nexport const rightSnippets = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-empty-state \n aligned=\"right\" \n heading=\"Hmm...there's nothing here\"\n subheading=\"We don't currently have any favourite teas, probably because coffee is much better.\"\n body=\"Take a look at our favourite coffees instead, there's much more of those, or try again.\"\n></ic-empty-state>`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcEmptyState \n aligned=\"right\" \n heading=\"Hmm...there's nothing here\"\n subheading=\"We don't currently have any favourite teas, probably because coffee is much better.\"\n body=\"Take a look at our favourite coffees instead, there's much more of those, or try again.\" \n/>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `{shortCode}`,\n },\n {\n language: \"Javascript\",\n snippet: `{shortCode}`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={rightSnippets}>\n <IcEmptyState\n aligned=\"right\"\n heading=\"Hmm...there's nothing here\"\n subheading=\"We don't currently have any favourite teas, probably because coffee is much better.\"\n body=\"Take a look at our favourite coffees instead, there's much more of those, or try again.\"\n />\n</ComponentPreview>\n\n### Center aligned\n\nexport const centreSnippets = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-empty-state \n aligned=\"center\" \n heading=\"Hmm...there's nothing here\"\n subheading=\"We don't currently have any favourite teas, probably because coffee is much better.\"\n body=\"Take a look at our favourite coffees instead, there's much more of those, or try again.\"\n></ic-empty-state>`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcEmptyState \n aligned=\"center\" \n heading=\"Hmm...there's nothing here\"\n subheading=\"We don't currently have any favourite teas, probably because coffee is much better.\"\n body=\"Take a look at our favourite coffees instead, there's much more of those, or try again.\"\n/>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `{shortCode}`,\n },\n {\n language: \"Javascript\",\n snippet: `{shortCode}`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={centreSnippets}>\n <IcEmptyState\n aligned=\"center\"\n heading=\"Hmm...there's nothing here\"\n subheading=\"We don't currently have any favourite teas, probably because coffee is much better.\"\n body=\"Take a look at our favourite coffees instead, there's much more of those, or try again.\"\n />\n</ComponentPreview>\n\n### Max lines\n\nexport const maxLinesSnippets = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-empty-state \n body-max-lines=\"1\" \n heading=\"Hmm...there's nothing here\"\n subheading=\"We don't currently have any favourite teas, probably because coffee is much better.\"\n body=\"Take a look at our favourite coffees instead, there's much more of those. Please try looking again or come back later. We're very sorry for any inconvenience this may cause you.\"\n></ic-empty-state>`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcEmptyState \n bodyMaxLines=\"1\" \n heading=\"Hmm...there's nothing here\"\n subheading=\"We don't currently have any favourite teas, probably because coffee is much better.\"\n body=\"Take a look at our favourite coffees instead, there's much more of those. Please try looking again or come back later. We're very sorry for any inconvenience this may cause you.\"\n/>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `{shortCode}`,\n },\n {\n language: \"Javascript\",\n snippet: `{shortCode}`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={maxLinesSnippets}>\n <IcEmptyState\n bodyMaxLines=\"1\"\n heading=\"Hmm...there's nothing here\"\n subheading=\"We don't currently have any favourite teas, probably because coffee is much better.\"\n body=\"Take a look at our favourite coffees instead, there's much more of those. Please try looking again or come back later. We're very sorry for any inconvenience this may cause you.\"\n />\n</ComponentPreview>\n",
+ "contents": "\r\nimport { IcEmptyState, IcButton, IcLink } from \"@ukic/react\";\r\n\r\n## Component demo\r\n\r\nexport const snippets = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-empty-state \r\n heading=\"Hmm...there's nothing here\" \r\n subheading=\"We don't currently have any favourite teas, probably because coffee is much better.\" \r\n body=\"Take a look at our favourite coffees instead, there's much more of those.\"\r\n>\r\n <svg slot=\"image\" viewBox=\"0 0 1600 1600\">\r\n <rect fill=\"#ff7700\" width=\"1600\" height=\"1600\" />\r\n <polygon fill=\"#cc0000\" points=\"957 450 539 900 1396 900\" />\r\n <polygon fill=\"#aa0000\" points=\"957 450 872.9 900 1396 900\" />\r\n <polygon fill=\"#c50022\" points=\"-60 900 398 662 816 900\" />\r\n <polygon fill=\"#a3001b\" points=\"337 900 398 662 816 900\" />\r\n <polygon fill=\"#be0044\" points=\"1203 546 1552 900 876 900\" />\r\n <polygon fill=\"#9c0036\" points=\"1203 546 1552 900 1162 900\" />\r\n <polygon fill=\"#b80066\" points=\"641 695 886 900 367 900\" />\r\n <polygon fill=\"#960052\" points=\"587 900 641 695 886 900\" />\r\n <polygon fill=\"#b10088\" points=\"1710 900 1401 632 1096 900\" />\r\n <polygon fill=\"#8f006d\" points=\"1710 900 1401 632 1365 900\" />\r\n <polygon fill=\"#aa00aa\" points=\"1210 900 971 687 725 900\" />\r\n <polygon fill=\"#880088\" points=\"943 900 1210 900 971 687\" />\r\n </svg>\r\n <ic-button slot=\"actions\">Go to favourite coffees</ic-button>\r\n <ic-link slot=\"actions\" href=\"/\">\r\n Customer support\r\n </ic-link>\r\n</ic-empty-state>`,\r\n long: `{shortCode}`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcEmptyState \r\n heading=\"Hmm...there's nothing here\" \r\n subheading=\"We don't currently have any favourite teas, probably because coffee is much better.\" \r\n body=\"Take a look at our favourite coffees instead, there's much more of those.\" \r\n>\r\n <SlottedSVG slot=\"image\" viewBox=\"0 0 1600 1600\">\r\n <rect fill=\"#ff7700\" width=\"1600\" height=\"1600\" />\r\n <polygon fill=\"#cc0000\" points=\"957 450 539 900 1396 900\" />\r\n <polygon fill=\"#aa0000\" points=\"957 450 872.9 900 1396 900\" />\r\n <polygon fill=\"#c50022\" points=\"-60 900 398 662 816 900\" />\r\n <polygon fill=\"#a3001b\" points=\"337 900 398 662 816 900\" />\r\n <polygon fill=\"#be0044\" points=\"1203 546 1552 900 876 900\" />\r\n <polygon fill=\"#9c0036\" points=\"1203 546 1552 900 1162 900\" />\r\n <polygon fill=\"#b80066\" points=\"641 695 886 900 367 900\" />\r\n <polygon fill=\"#960052\" points=\"587 900 641 695 886 900\" />\r\n <polygon fill=\"#b10088\" points=\"1710 900 1401 632 1096 900\" />\r\n <polygon fill=\"#8f006d\" points=\"1710 900 1401 632 1365 900\" />\r\n <polygon fill=\"#aa00aa\" points=\"1210 900 971 687 725 900\" />\r\n <polygon fill=\"#880088\" points=\"943 900 1210 900 971 687\" />\r\n </SlottedSVG>\r\n <IcButton slot=\"actions\">Go to favourite coffees</IcButton>\r\n <IcLink slot=\"actions\" href=\"/\">\r\n Customer support\r\n </IcLink>\r\n</IcEmptyState>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `{shortCode}`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `{shortCode}`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview snippets={snippets}>\r\n <IcEmptyState\r\n heading=\"Hmm...there's nothing here\"\r\n subheading=\"We don't currently have any favourite teas, probably because coffee is much better.\"\r\n body=\"Take a look at our favourite coffees instead, there's much more of those.\"\r\n >\r\n <svg slot=\"image\" viewBox=\"0 0 1600 1600\">\r\n <rect fill=\"#ff7700\" width=\"1600\" height=\"1600\" />\r\n <polygon fill=\"#cc0000\" points=\"957 450 539 900 1396 900\" />\r\n <polygon fill=\"#aa0000\" points=\"957 450 872.9 900 1396 900\" />\r\n <polygon fill=\"#c50022\" points=\"-60 900 398 662 816 900\" />\r\n <polygon fill=\"#a3001b\" points=\"337 900 398 662 816 900\" />\r\n <polygon fill=\"#be0044\" points=\"1203 546 1552 900 876 900\" />\r\n <polygon fill=\"#9c0036\" points=\"1203 546 1552 900 1162 900\" />\r\n <polygon fill=\"#b80066\" points=\"641 695 886 900 367 900\" />\r\n <polygon fill=\"#960052\" points=\"587 900 641 695 886 900\" />\r\n <polygon fill=\"#b10088\" points=\"1710 900 1401 632 1096 900\" />\r\n <polygon fill=\"#8f006d\" points=\"1710 900 1401 632 1365 900\" />\r\n <polygon fill=\"#aa00aa\" points=\"1210 900 971 687 725 900\" />\r\n <polygon fill=\"#880088\" points=\"943 900 1210 900 971 687\" />\r\n </svg>\r\n <IcButton slot=\"actions\">Go to favourite coffees</IcButton>\r\n <IcLink slot=\"actions\" href=\"#\" onClick={(e) => e.preventDefault()}>\r\n Customer support\r\n </IcLink>\r\n </IcEmptyState>\r\n</ComponentPreview>\r\n\r\n## Empty state details\r\n\r\n<ComponentDetails component=\"ic-empty-state\" />\r\n\r\n## Variants\r\n\r\n### Actions slot\r\n\r\nexport const actionsSnippets = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-empty-state \r\n heading=\"Hmm...there's nothing here\" \r\n subheading=\"We don't currently have any favourite teas, probably because coffee is much better.\" \r\n body=\"Take a look at our favourite coffees instead, there's much more of those, or try again.\"\r\n>\r\n <ic-button slot=\"actions\">Go to favourite coffees</ic-button>\r\n <ic-link slot=\"actions\" href=\"/\">Customer support</ic-link>\r\n</ic-empty-state>`,\r\n long: `{shortCode}`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcEmptyState \r\n heading=\"Hmm...there's nothing here\" \r\n subheading=\"We don't currently have any favourite teas, probably because coffee is much better.\" \r\n body=\"Take a look at our favourite coffees instead, there's much more of those, or try again.\"\r\n>\r\n <IcButton slot=\"actions\">Go to favourite coffees</IcButton>\r\n <IcLink slot=\"actions\" href=\"/\">Customer support</IcLink>\r\n</IcEmptyState>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `{shortCode}`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `{shortCode}`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview snippets={actionsSnippets}>\r\n <IcEmptyState\r\n heading=\"Hmm...there's nothing here\"\r\n subheading=\"We don't currently have any favourite teas, probably because coffee is much better.\"\r\n body=\"Take a look at our favourite coffees instead, there's much more of those, or try again.\"\r\n >\r\n <IcButton slot=\"actions\">Go to favourite coffees</IcButton>\r\n <IcLink slot=\"actions\" href=\"#\" onClick={(e) => e.preventDefault()}>\r\n Customer support\r\n </IcLink>\r\n </IcEmptyState>\r\n</ComponentPreview>\r\n\r\n### Image slot\r\n\r\nexport const imageSnippets = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-empty-state \r\n heading=\"Hmm...there's nothing here\" \r\n subheading=\"We don't currently have any favourite teas, probably because coffee is much better.\" \r\n body=\"Take a look at our favourite coffees instead, there's much more of those, or try again.\"\r\n>\r\n <svg\r\n slot=\"image\"\r\n viewBox=\"0 0 1600 1600\"\r\n >\r\n <rect fill=\"#ff7700\" width=\"1600\" height=\"1600\" />\r\n <polygon fill=\"#cc0000\" points=\"957 450 539 900 1396 900\" />\r\n <polygon fill=\"#aa0000\" points=\"957 450 872.9 900 1396 900\" />\r\n <polygon fill=\"#c50022\" points=\"-60 900 398 662 816 900\" />\r\n <polygon fill=\"#a3001b\" points=\"337 900 398 662 816 900\" />\r\n <polygon fill=\"#be0044\" points=\"1203 546 1552 900 876 900\" />\r\n <polygon fill=\"#9c0036\" points=\"1203 546 1552 900 1162 900\" />\r\n <polygon fill=\"#b80066\" points=\"641 695 886 900 367 900\" />\r\n <polygon fill=\"#960052\" points=\"587 900 641 695 886 900\" />\r\n <polygon fill=\"#b10088\" points=\"1710 900 1401 632 1096 900\" />\r\n <polygon fill=\"#8f006d\" points=\"1710 900 1401 632 1365 900\" />\r\n <polygon fill=\"#aa00aa\" points=\"1210 900 971 687 725 900\" />\r\n <polygon fill=\"#880088\" points=\"943 900 1210 900 971 687\" />\r\n </svg>\r\n</ic-empty-state>`,\r\n long: `{shortCode}`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcEmptyState \r\n heading=\"Hmm...there's nothing here\" \r\n subheading=\"We don't currently have any favourite teas, probably because coffee is much better.\" \r\n body=\"Take a look at our favourite coffees instead, there's much more of those, or try again.\"\r\n>\r\n <SlottedSVG\r\n slot=\"image\"\r\n viewBox=\"0 0 1600 1600\"\r\n >\r\n <rect fill=\"#ff7700\" width=\"1600\" height=\"1600\" />\r\n <polygon fill=\"#cc0000\" points=\"957 450 539 900 1396 900\" />\r\n <polygon fill=\"#aa0000\" points=\"957 450 872.9 900 1396 900\" />\r\n <polygon fill=\"#c50022\" points=\"-60 900 398 662 816 900\" />\r\n <polygon fill=\"#a3001b\" points=\"337 900 398 662 816 900\" />\r\n <polygon fill=\"#be0044\" points=\"1203 546 1552 900 876 900\" />\r\n <polygon fill=\"#9c0036\" points=\"1203 546 1552 900 1162 900\" />\r\n <polygon fill=\"#b80066\" points=\"641 695 886 900 367 900\" />\r\n <polygon fill=\"#960052\" points=\"587 900 641 695 886 900\" />\r\n <polygon fill=\"#b10088\" points=\"1710 900 1401 632 1096 900\" />\r\n <polygon fill=\"#8f006d\" points=\"1710 900 1401 632 1365 900\" />\r\n <polygon fill=\"#aa00aa\" points=\"1210 900 971 687 725 900\" />\r\n <polygon fill=\"#880088\" points=\"943 900 1210 900 971 687\" />\r\n </SlottedSVG>\r\n</IcEmptyState>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `{shortCode}`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `{shortCode}`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview snippets={imageSnippets}>\r\n <IcEmptyState\r\n heading=\"Hmm...there's nothing here\"\r\n subheading=\"We don't currently have any favourite teas, probably because coffee is much better.\"\r\n body=\"Take a look at our favourite coffees instead, there's much more of those, or try again.\"\r\n >\r\n <svg slot=\"image\" viewBox=\"0 0 1600 1600\">\r\n <rect fill=\"#ff7700\" width=\"1600\" height=\"1600\" />\r\n <polygon fill=\"#cc0000\" points=\"957 450 539 900 1396 900\" />\r\n <polygon fill=\"#aa0000\" points=\"957 450 872.9 900 1396 900\" />\r\n <polygon fill=\"#c50022\" points=\"-60 900 398 662 816 900\" />\r\n <polygon fill=\"#a3001b\" points=\"337 900 398 662 816 900\" />\r\n <polygon fill=\"#be0044\" points=\"1203 546 1552 900 876 900\" />\r\n <polygon fill=\"#9c0036\" points=\"1203 546 1552 900 1162 900\" />\r\n <polygon fill=\"#b80066\" points=\"641 695 886 900 367 900\" />\r\n <polygon fill=\"#960052\" points=\"587 900 641 695 886 900\" />\r\n <polygon fill=\"#b10088\" points=\"1710 900 1401 632 1096 900\" />\r\n <polygon fill=\"#8f006d\" points=\"1710 900 1401 632 1365 900\" />\r\n <polygon fill=\"#aa00aa\" points=\"1210 900 971 687 725 900\" />\r\n <polygon fill=\"#880088\" points=\"943 900 1210 900 971 687\" />\r\n </svg>\r\n </IcEmptyState>\r\n</ComponentPreview>\r\n\r\n### Image size\r\n\r\nexport const imageLargeSnippets = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-empty-state \r\n image-size=\"large\" \r\n heading=\"Hmm...there's nothing here\" \r\n subheading=\"We don't currently have any favourite teas, probably because coffee is much better.\" \r\n body=\"Take a look at our favourite coffees instead, there's much more of those, or try again.\"\r\n>\r\n <svg\r\n slot=\"image\"\r\n viewBox=\"0 0 1600 1600\"\r\n >\r\n <rect fill=\"#ff7700\" width=\"1600\" height=\"1600\" />\r\n <polygon fill=\"#cc0000\" points=\"957 450 539 900 1396 900\" />\r\n <polygon fill=\"#aa0000\" points=\"957 450 872.9 900 1396 900\" />\r\n <polygon fill=\"#c50022\" points=\"-60 900 398 662 816 900\" />\r\n <polygon fill=\"#a3001b\" points=\"337 900 398 662 816 900\" />\r\n <polygon fill=\"#be0044\" points=\"1203 546 1552 900 876 900\" />\r\n <polygon fill=\"#9c0036\" points=\"1203 546 1552 900 1162 900\" />\r\n <polygon fill=\"#b80066\" points=\"641 695 886 900 367 900\" />\r\n <polygon fill=\"#960052\" points=\"587 900 641 695 886 900\" />\r\n <polygon fill=\"#b10088\" points=\"1710 900 1401 632 1096 900\" />\r\n <polygon fill=\"#8f006d\" points=\"1710 900 1401 632 1365 900\" />\r\n <polygon fill=\"#aa00aa\" points=\"1210 900 971 687 725 900\" />\r\n <polygon fill=\"#880088\" points=\"943 900 1210 900 971 687\" />\r\n </svg>\r\n</ic-empty-state>`,\r\n long: `{shortCode}`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcEmptyState \r\n imageSize=\"large\" \r\n heading=\"Hmm...there's nothing here\" \r\n subheading=\"We don't currently have any favourite teas, probably because coffee is much better.\" \r\n body=\"Take a look at our favourite coffees instead, there's much more of those, or try again.\"\r\n>\r\n <SlottedSVG\r\n slot=\"image\"\r\n viewBox=\"0 0 1600 1600\"\r\n >\r\n <rect fill=\"#ff7700\" width=\"1600\" height=\"1600\" />\r\n <polygon fill=\"#cc0000\" points=\"957 450 539 900 1396 900\" />\r\n <polygon fill=\"#aa0000\" points=\"957 450 872.9 900 1396 900\" />\r\n <polygon fill=\"#c50022\" points=\"-60 900 398 662 816 900\" />\r\n <polygon fill=\"#a3001b\" points=\"337 900 398 662 816 900\" />\r\n <polygon fill=\"#be0044\" points=\"1203 546 1552 900 876 900\" />\r\n <polygon fill=\"#9c0036\" points=\"1203 546 1552 900 1162 900\" />\r\n <polygon fill=\"#b80066\" points=\"641 695 886 900 367 900\" />\r\n <polygon fill=\"#960052\" points=\"587 900 641 695 886 900\" />\r\n <polygon fill=\"#b10088\" points=\"1710 900 1401 632 1096 900\" />\r\n <polygon fill=\"#8f006d\" points=\"1710 900 1401 632 1365 900\" />\r\n <polygon fill=\"#aa00aa\" points=\"1210 900 971 687 725 900\" />\r\n <polygon fill=\"#880088\" points=\"943 900 1210 900 971 687\" />\r\n </SlottedSVG>\r\n</IcEmptyState>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `{shortCode}`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `{shortCode}`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview snippets={imageLargeSnippets}>\r\n <IcEmptyState\r\n imageSize=\"large\"\r\n heading=\"Hmm...there's nothing here\"\r\n subheading=\"We don't currently have any favourite teas, probably because coffee is much better.\"\r\n body=\"Take a look at our favourite coffees instead, there's much more of those, or try again.\"\r\n >\r\n <svg slot=\"image\" viewBox=\"0 0 1600 1600\">\r\n <rect fill=\"#ff7700\" width=\"1600\" height=\"1600\" />\r\n <polygon fill=\"#cc0000\" points=\"957 450 539 900 1396 900\" />\r\n <polygon fill=\"#aa0000\" points=\"957 450 872.9 900 1396 900\" />\r\n <polygon fill=\"#c50022\" points=\"-60 900 398 662 816 900\" />\r\n <polygon fill=\"#a3001b\" points=\"337 900 398 662 816 900\" />\r\n <polygon fill=\"#be0044\" points=\"1203 546 1552 900 876 900\" />\r\n <polygon fill=\"#9c0036\" points=\"1203 546 1552 900 1162 900\" />\r\n <polygon fill=\"#b80066\" points=\"641 695 886 900 367 900\" />\r\n <polygon fill=\"#960052\" points=\"587 900 641 695 886 900\" />\r\n <polygon fill=\"#b10088\" points=\"1710 900 1401 632 1096 900\" />\r\n <polygon fill=\"#8f006d\" points=\"1710 900 1401 632 1365 900\" />\r\n <polygon fill=\"#aa00aa\" points=\"1210 900 971 687 725 900\" />\r\n <polygon fill=\"#880088\" points=\"943 900 1210 900 971 687\" />\r\n </svg>\r\n </IcEmptyState>\r\n</ComponentPreview>\r\n\r\n### Icon in the image slot\r\n\r\nexport const iconSnippets = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-empty-state \r\n heading=\"Hmm...there's nothing here\"\r\n subheading=\"We don't currently have any favourite teas, probably because coffee is much better.\"\r\n body=\"Take a look at our favourite coffees instead, there's much more of those, or try again.\"\r\n>\r\n <svg\r\n slot=\"image\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"#D07932\"\r\n >\r\n <title id=\"warning-title\">Warning</title>\r\n <path d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n <path d=\"M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z\" />\r\n </svg>\r\n</ic-empty-state>`,\r\n long: `{shortCode}`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcEmptyState \r\n heading=\"Hmm...there's nothing here\"\r\n subheading=\"We don't currently have any favourite teas, probably because coffee is much better.\"\r\n body=\"Take a look at our favourite coffees instead, there's much more of those, or try again.\"\r\n>\r\n <SlottedSVG\r\n slot=\"image\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"#D07932\"\r\n >\r\n <title id=\"warning-title\">Warning</title>\r\n <path d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n <path d=\"M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z\" />\r\n </SlottedSVG>\r\n</IcEmptyState>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `{shortCode}`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `{shortCode}`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview snippets={iconSnippets}>\r\n <IcEmptyState\r\n heading=\"Hmm...there's nothing here\"\r\n subheading=\"We don't currently have any favourite teas, probably because coffee is much better.\"\r\n body=\"Take a look at our favourite coffees instead, there's much more of those, or try again.\"\r\n >\r\n <svg\r\n slot=\"image\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"#D07932\"\r\n >\r\n <title id=\"warning-title\">Warning</title>\r\n <path d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n <path d=\"M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z\" />\r\n </svg>\r\n </IcEmptyState>\r\n</ComponentPreview>\r\n\r\n### Right aligned\r\n\r\nexport const rightSnippets = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-empty-state \r\n aligned=\"right\" \r\n heading=\"Hmm...there's nothing here\"\r\n subheading=\"We don't currently have any favourite teas, probably because coffee is much better.\"\r\n body=\"Take a look at our favourite coffees instead, there's much more of those, or try again.\"\r\n></ic-empty-state>`,\r\n long: `{shortCode}`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcEmptyState \r\n aligned=\"right\" \r\n heading=\"Hmm...there's nothing here\"\r\n subheading=\"We don't currently have any favourite teas, probably because coffee is much better.\"\r\n body=\"Take a look at our favourite coffees instead, there's much more of those, or try again.\" \r\n/>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `{shortCode}`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `{shortCode}`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview snippets={rightSnippets}>\r\n <IcEmptyState\r\n aligned=\"right\"\r\n heading=\"Hmm...there's nothing here\"\r\n subheading=\"We don't currently have any favourite teas, probably because coffee is much better.\"\r\n body=\"Take a look at our favourite coffees instead, there's much more of those, or try again.\"\r\n />\r\n</ComponentPreview>\r\n\r\n### Center aligned\r\n\r\nexport const centreSnippets = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-empty-state \r\n aligned=\"center\" \r\n heading=\"Hmm...there's nothing here\"\r\n subheading=\"We don't currently have any favourite teas, probably because coffee is much better.\"\r\n body=\"Take a look at our favourite coffees instead, there's much more of those, or try again.\"\r\n></ic-empty-state>`,\r\n long: `{shortCode}`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcEmptyState \r\n aligned=\"center\" \r\n heading=\"Hmm...there's nothing here\"\r\n subheading=\"We don't currently have any favourite teas, probably because coffee is much better.\"\r\n body=\"Take a look at our favourite coffees instead, there's much more of those, or try again.\"\r\n/>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `{shortCode}`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `{shortCode}`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview snippets={centreSnippets}>\r\n <IcEmptyState\r\n aligned=\"center\"\r\n heading=\"Hmm...there's nothing here\"\r\n subheading=\"We don't currently have any favourite teas, probably because coffee is much better.\"\r\n body=\"Take a look at our favourite coffees instead, there's much more of those, or try again.\"\r\n />\r\n</ComponentPreview>\r\n\r\n### Max lines\r\n\r\nexport const maxLinesSnippets = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-empty-state \r\n body-max-lines=\"1\" \r\n heading=\"Hmm...there's nothing here\"\r\n subheading=\"We don't currently have any favourite teas, probably because coffee is much better.\"\r\n body=\"Take a look at our favourite coffees instead, there's much more of those. Please try looking again or come back later. We're very sorry for any inconvenience this may cause you.\"\r\n></ic-empty-state>`,\r\n long: `{shortCode}`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcEmptyState \r\n bodyMaxLines=\"1\" \r\n heading=\"Hmm...there's nothing here\"\r\n subheading=\"We don't currently have any favourite teas, probably because coffee is much better.\"\r\n body=\"Take a look at our favourite coffees instead, there's much more of those. Please try looking again or come back later. We're very sorry for any inconvenience this may cause you.\"\r\n/>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `{shortCode}`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `{shortCode}`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview snippets={maxLinesSnippets}>\r\n <IcEmptyState\r\n bodyMaxLines=\"1\"\r\n heading=\"Hmm...there's nothing here\"\r\n subheading=\"We don't currently have any favourite teas, probably because coffee is much better.\"\r\n body=\"Take a look at our favourite coffees instead, there's much more of those. Please try looking again or come back later. We're very sorry for any inconvenience this may cause you.\"\r\n />\r\n</ComponentPreview>\r\n",
"path": "/components/empty-state/code",
"date": "2024-05-31",
"title": "Empty state",
@@ -2203,16 +2203,16 @@
}
],
"meta": {
- "relativePath": "components/empty-state/code.mdx",
- "createdAt": "2024-11-06T10:27:49.404Z",
- "lastModified": "2024-11-06T10:19:00.012Z",
- "size": 21654,
- "formattedSize": "21.1 KB"
+ "relativePath": "components\\empty-state\\code.mdx",
+ "createdAt": "2024-12-04T13:23:54.099Z",
+ "lastModified": "2024-12-04T13:23:54.099Z",
+ "size": 22258,
+ "formattedSize": "21.7 KB"
}
},
{
"id": "components\\empty-state\\guidancex",
- "contents": "\nimport { IcEmptyState, IcButton, IcLink } from \"@ukic/react\";\nimport emptyStateFig1 from \"./images/fig-1-data-table-with-empty-state.png\";\nimport emptyStateFig2 from \"./images/fig-2-use-empty-state-for-access-rights.png\";\nimport emptyStateFig3 from \"./images/fig-3-use-empty-state-with-positive-messaging.png\";\nimport emptyStateFig4 from \"./images/fig-4-use-empty-states-as-starting-points-for-flows.png\";\nimport emptyStateFig5 from \"./images/fig-5-dont-use-empty-states-for-messages-unrelated-to-empty-state.png\";\nimport emptyStateFig6 from \"./images/fig-6-dont-use-empty-state-for-loading-messages.png\";\nimport emptyStateFig7 from \"./images/fig-7-use-empty-states-on-a-full-screen.png\";\nimport emptyStateFig8 from \"./images/fig-8-use-empty-states-on-a-side-panel.png\";\nimport emptyStateFig9 from \"./images/fig-9-use-empty-states-on-other-containers.png\";\nimport emptyStateFig10 from \"./images/fig-10-empty-state-anatomy.png\";\nimport emptyStateFig11 from \"./images/fig-11-avoid-using-too-many-actions.png\";\nimport emptyStateFig12 from \"./images/fig-12-dont-use-other-component-in-interaction-area.png\";\n\n## Component demo\n\n<ComponentPreview>\n <IcEmptyState\n heading=\"Hmm...there's nothing here\"\n subheading=\"We don't currently have any favourite teas, probably because coffee is much better.\"\n body=\"Take a look at our favourite coffees instead, there's much more of those.\"\n >\n <svg slot=\"image\" viewBox=\"0 0 1600 1600\">\n <rect fill=\"#ff7700\" width=\"1600\" height=\"1600\" />\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 <IcButton slot=\"actions\">Go to favourite coffees</IcButton>\n <IcLink slot=\"actions\" href=\"#\" onClick={(e) => e.preventDefault()}>\n Customer support\n </IcLink>\n </IcEmptyState>\n</ComponentPreview>\n\n## When to use\n\nUse an empty state component to communicate to people that no content is available to display. Use them to engage people and guide them on what is best to do next by including a button or a link to the next best action.\n\nEmpty states are used for many different reasons such as:\n\n- No content yet exists due to the first-time use of the functionality.\n- Data was not successfully loaded.\n- A query or search term yielded no results.\n- Data was removed resulting in nothing remaining to display.\n\nUse empty states when no data can be displayed in a component’s contents. For example, show an empty state when no data is available to display in a data table, or if a search term didn’t find any results.\n\n<DoDontCaution\n imageSrc={emptyStateFig1}\n imageAlt=\"An example app called ‘We love coffee’ with a page displaying favourite teas. An empty data table is displayed with an empty state that reads ‘There’s nothing here’.\"\n state=\"good\"\n caption=\"Use empty states when there is no data available to display.\"\n/>\n\nUse empty states to highlight access issues. If a user does not have access to some content, use an empty state to provide this messaging as well as a means of continuing.\n\n<DoDontCaution\n imageSrc={emptyStateFig2}\n imageAlt=\"An example app showing favourite coffees. The ‘americano’ product is selected, but show’s a ‘locked’ status on it. A drawer is displayed containing an empty state component that reads ‘Sorry, you don’t have access to this at the moment’.\"\n state=\"good\"\n caption=\"Use empty states to show access rights issue if the content is not available to that user.\"\n/>\n\nEmpty states are not always due to errors, so use positive messaging as well. For example, in a to-do list app, all items might have been cleared and so the empty state message may be celebratory.\n\n<DoDontCaution\n imageSrc={emptyStateFig3}\n imageAlt=\"An example app that shows new orders for coffee that need to be fulfilled. After the orders have been completed, an empty state component is displayed showing a positive message that reads ‘All done! Have a cuppa’.\"\n state=\"good\"\n caption=\"Use empty states for positive messaging when empty is the desirable state, such as in a ticketing system or to-do list.\"\n/>\n\nUse empty states as starting points for processes that require people to add input into an app. For example, a calendar entry may have no events yet, so use an empty state to prompt for an event to be added.\n\n<DoubleDoDontCaution>\n <DoDontCaution\n imageSrc={emptyStateFig4}\n imageAlt=\"An example app showing a product customisation page for an Americano coffee. A section appears titled ‘Extras’ and an empty state message is displayed prompting the user to ‘add extras’.\"\n state=\"good\"\n caption=\"Use the empty state component as a starting point for a process, such as adding extras to a product customisation.\"\n />\n</DoubleDoDontCaution>\n\n## When not to use\n\nAvoid using custom components instead of empty states. The empty state component creates an easily understandable, consistent method of indicating that no data is available and therefore what to do next.\n\nDon’t use empty states to communicate other messages to people that are not related to something being empty, use [alerts](/components/alert) or [toasts](/components/toasts) instead. Only use empty states in situations where no data is present to display.\n\n<DoDontCaution\n imageSrc={emptyStateFig5}\n imageAlt=\"A blog post titled ‘The perfect blend’. An empty state component is used inline with the content that reads ‘This is a brand new post’.\"\n state=\"bad\"\n caption=\"Don’t use empty states to convey messages that are not related to an empty state.\"\n/>\n\nDon’t use empty states to show error messages that could otherwise be displayed using other [form validation](/patterns/form-validation) patterns. Only use empty states to show errors relating to data not being loaded successfully.\n\nDon’t use empty states to indicate something is loading, instead use a [loading indicator](/components/loading-indicator).\n\n<DoubleDoDontCaution>\n <DoDontCaution\n imageSrc={emptyStateFig6}\n imageAlt=\"An empty state component being used to indicate that an order history is loading.\"\n state=\"bad\"\n caption=\"Don’t use empty state components for loading messages.\"\n />\n</DoubleDoDontCaution>\n\n## Sizing\n\nEmbed empty states in components that would otherwise show data. For example, use them in containers, cards, dialogs or data tables.\n\nUse an empty state on a full screen in case something couldn’t be loaded, or there is no content available yet. For example, use an empty state to show a 404 message.\n\n<DoDontCaution\n imageSrc={emptyStateFig7}\n imageAlt=\"An empty state component displayed on a full screen that reads ‘There’s nothing here.’\"\n state=\"none\"\n caption=\"Use empty states on full screen page if no data is available to display.\"\n/>\n\n<DoDontCaution\n imageSrc={emptyStateFig8}\n imageAlt=\"An example app with a side panel displayed over the page content containing an empty state component that reads ‘No comments yet’.\"\n state=\"none\"\n caption=\"Use empty states in other containers such as drawers and side panels.\"\n/>\n\n<DoDontCaution\n imageSrc={emptyStateFig9}\n imageAlt=\"A grid of cards for coffee products with one card showing an empty state component that reads ‘Woops, this coffee cup is empty’.\"\n state=\"none\"\n caption=\"Use empty states within other components and containers when no data is present.\"\n/>\n\n## Layout and placement\n\nSet the alignment of the empty state to match the component or container it sits in.\n\nPlace empty states at the top and don’t resize the container, keep it sized the same as if the primary content was displayed instead.\n\n## Content\n\nUse the empty state to clearly communicate to someone what has happened, why they are seeing the empty state and what to do next.\n\n<DoDontCaution\n imageSrc={emptyStateFig10}\n imageAlt=\"A diagram showing the different elements that make up the empty state component. These are an image or icon, a title, a subtitle, some body text, and an interaction area.\"\n state=\"none\"\n caption=\"The empty state component has an image or icon, a title, a subtitle, some body text and an interaction area.\"\n/>\n\nAdd an illustration, image or icon to an empty state to provide additional recognition or reinforce the written message.\n\nUse the empty state heading to clearly indicate the state of the empty content.\n\nUse the subheading to add more detail and explain why this may have happened.\n\nUse the body to explain how to rectify the issue, or to explain what is best to do next.\n\nUse the interaction area to include actions and links that will help people to continue through the app. Always include either a primary button or a navigation link, and occasionally include a secondary button or link if other routes are possible.\n\nHowever, avoid placing too many actions in the interaction area as this will cause confusion about what to do next.\n\n<DoDontCaution\n imageSrc={emptyStateFig11}\n imageAlt=\"An empty state component that has three buttons and three links within its interaction area.\"\n state=\"caution\"\n caption=\"Avoid placing too many actions within the interaction area.\"\n/>\n\nDon’t place other interactive components, such as inputs, in an empty state’s interaction area. If input needs to be collected, then do this on a full page or on a dialog.\n\n<DoDontCaution imageSrc={emptyStateFig12} imageAlt=\"\" state=\"bad\" caption=\"\" />\n\n## Accessibility considerations\n\nIf an empty state is displayed as a result of a change on a page, make sure it is announced by a screen reader using a live region.\n\n## Related components\n\n- [Alert](/components/alert).\n- [Loading indicator](/components/loading-indicator).\n",
+ "contents": "\r\nimport { IcEmptyState, IcButton, IcLink } from \"@ukic/react\";\r\nimport emptyStateFig1 from \"./images/fig-1-data-table-with-empty-state.png\";\r\nimport emptyStateFig2 from \"./images/fig-2-use-empty-state-for-access-rights.png\";\r\nimport emptyStateFig3 from \"./images/fig-3-use-empty-state-with-positive-messaging.png\";\r\nimport emptyStateFig4 from \"./images/fig-4-use-empty-states-as-starting-points-for-flows.png\";\r\nimport emptyStateFig5 from \"./images/fig-5-dont-use-empty-states-for-messages-unrelated-to-empty-state.png\";\r\nimport emptyStateFig6 from \"./images/fig-6-dont-use-empty-state-for-loading-messages.png\";\r\nimport emptyStateFig7 from \"./images/fig-7-use-empty-states-on-a-full-screen.png\";\r\nimport emptyStateFig8 from \"./images/fig-8-use-empty-states-on-a-side-panel.png\";\r\nimport emptyStateFig9 from \"./images/fig-9-use-empty-states-on-other-containers.png\";\r\nimport emptyStateFig10 from \"./images/fig-10-empty-state-anatomy.png\";\r\nimport emptyStateFig11 from \"./images/fig-11-avoid-using-too-many-actions.png\";\r\nimport emptyStateFig12 from \"./images/fig-12-dont-use-other-component-in-interaction-area.png\";\r\n\r\n## Component demo\r\n\r\n<ComponentPreview>\r\n <IcEmptyState\r\n heading=\"Hmm...there's nothing here\"\r\n subheading=\"We don't currently have any favourite teas, probably because coffee is much better.\"\r\n body=\"Take a look at our favourite coffees instead, there's much more of those.\"\r\n >\r\n <svg slot=\"image\" viewBox=\"0 0 1600 1600\">\r\n <rect fill=\"#ff7700\" width=\"1600\" height=\"1600\" />\r\n <polygon fill=\"#cc0000\" points=\"957 450 539 900 1396 900\" />\r\n <polygon fill=\"#aa0000\" points=\"957 450 872.9 900 1396 900\" />\r\n <polygon fill=\"#c50022\" points=\"-60 900 398 662 816 900\" />\r\n <polygon fill=\"#a3001b\" points=\"337 900 398 662 816 900\" />\r\n <polygon fill=\"#be0044\" points=\"1203 546 1552 900 876 900\" />\r\n <polygon fill=\"#9c0036\" points=\"1203 546 1552 900 1162 900\" />\r\n <polygon fill=\"#b80066\" points=\"641 695 886 900 367 900\" />\r\n <polygon fill=\"#960052\" points=\"587 900 641 695 886 900\" />\r\n <polygon fill=\"#b10088\" points=\"1710 900 1401 632 1096 900\" />\r\n <polygon fill=\"#8f006d\" points=\"1710 900 1401 632 1365 900\" />\r\n <polygon fill=\"#aa00aa\" points=\"1210 900 971 687 725 900\" />\r\n <polygon fill=\"#880088\" points=\"943 900 1210 900 971 687\" />\r\n </svg>\r\n <IcButton slot=\"actions\">Go to favourite coffees</IcButton>\r\n <IcLink slot=\"actions\" href=\"#\" onClick={(e) => e.preventDefault()}>\r\n Customer support\r\n </IcLink>\r\n </IcEmptyState>\r\n</ComponentPreview>\r\n\r\n## When to use\r\n\r\nUse an empty state component to communicate to people that no content is available to display. Use them to engage people and guide them on what is best to do next by including a button or a link to the next best action.\r\n\r\nEmpty states are used for many different reasons such as:\r\n\r\n- No content yet exists due to the first-time use of the functionality.\r\n- Data was not successfully loaded.\r\n- A query or search term yielded no results.\r\n- Data was removed resulting in nothing remaining to display.\r\n\r\nUse empty states when no data can be displayed in a component’s contents. For example, show an empty state when no data is available to display in a data table, or if a search term didn’t find any results.\r\n\r\n<DoDontCaution\r\n imageSrc={emptyStateFig1}\r\n imageAlt=\"An example app called ‘We love coffee’ with a page displaying favourite teas. An empty data table is displayed with an empty state that reads ‘There’s nothing here’.\"\r\n state=\"good\"\r\n caption=\"Use empty states when there is no data available to display.\"\r\n/>\r\n\r\nUse empty states to highlight access issues. If a user does not have access to some content, use an empty state to provide this messaging as well as a means of continuing.\r\n\r\n<DoDontCaution\r\n imageSrc={emptyStateFig2}\r\n imageAlt=\"An example app showing favourite coffees. The ‘americano’ product is selected, but show’s a ‘locked’ status on it. A drawer is displayed containing an empty state component that reads ‘Sorry, you don’t have access to this at the moment’.\"\r\n state=\"good\"\r\n caption=\"Use empty states to show access rights issue if the content is not available to that user.\"\r\n/>\r\n\r\nEmpty states are not always due to errors, so use positive messaging as well. For example, in a to-do list app, all items might have been cleared and so the empty state message may be celebratory.\r\n\r\n<DoDontCaution\r\n imageSrc={emptyStateFig3}\r\n imageAlt=\"An example app that shows new orders for coffee that need to be fulfilled. After the orders have been completed, an empty state component is displayed showing a positive message that reads ‘All done! Have a cuppa’.\"\r\n state=\"good\"\r\n caption=\"Use empty states for positive messaging when empty is the desirable state, such as in a ticketing system or to-do list.\"\r\n/>\r\n\r\nUse empty states as starting points for processes that require people to add input into an app. For example, a calendar entry may have no events yet, so use an empty state to prompt for an event to be added.\r\n\r\n<DoubleDoDontCaution>\r\n <DoDontCaution\r\n imageSrc={emptyStateFig4}\r\n imageAlt=\"An example app showing a product customisation page for an Americano coffee. A section appears titled ‘Extras’ and an empty state message is displayed prompting the user to ‘add extras’.\"\r\n state=\"good\"\r\n caption=\"Use the empty state component as a starting point for a process, such as adding extras to a product customisation.\"\r\n />\r\n</DoubleDoDontCaution>\r\n\r\n## When not to use\r\n\r\nAvoid using custom components instead of empty states. The empty state component creates an easily understandable, consistent method of indicating that no data is available and therefore what to do next.\r\n\r\nDon’t use empty states to communicate other messages to people that are not related to something being empty, use [alerts](/components/alert) or [toasts](/components/toasts) instead. Only use empty states in situations where no data is present to display.\r\n\r\n<DoDontCaution\r\n imageSrc={emptyStateFig5}\r\n imageAlt=\"A blog post titled ‘The perfect blend’. An empty state component is used inline with the content that reads ‘This is a brand new post’.\"\r\n state=\"bad\"\r\n caption=\"Don’t use empty states to convey messages that are not related to an empty state.\"\r\n/>\r\n\r\nDon’t use empty states to show error messages that could otherwise be displayed using other [form validation](/patterns/form-validation) patterns. Only use empty states to show errors relating to data not being loaded successfully.\r\n\r\nDon’t use empty states to indicate something is loading, instead use a [loading indicator](/components/loading-indicator).\r\n\r\n<DoubleDoDontCaution>\r\n <DoDontCaution\r\n imageSrc={emptyStateFig6}\r\n imageAlt=\"An empty state component being used to indicate that an order history is loading.\"\r\n state=\"bad\"\r\n caption=\"Don’t use empty state components for loading messages.\"\r\n />\r\n</DoubleDoDontCaution>\r\n\r\n## Sizing\r\n\r\nEmbed empty states in components that would otherwise show data. For example, use them in containers, cards, dialogs or data tables.\r\n\r\nUse an empty state on a full screen in case something couldn’t be loaded, or there is no content available yet. For example, use an empty state to show a 404 message.\r\n\r\n<DoDontCaution\r\n imageSrc={emptyStateFig7}\r\n imageAlt=\"An empty state component displayed on a full screen that reads ‘There’s nothing here.’\"\r\n state=\"none\"\r\n caption=\"Use empty states on full screen page if no data is available to display.\"\r\n/>\r\n\r\n<DoDontCaution\r\n imageSrc={emptyStateFig8}\r\n imageAlt=\"An example app with a side panel displayed over the page content containing an empty state component that reads ‘No comments yet’.\"\r\n state=\"none\"\r\n caption=\"Use empty states in other containers such as drawers and side panels.\"\r\n/>\r\n\r\n<DoDontCaution\r\n imageSrc={emptyStateFig9}\r\n imageAlt=\"A grid of cards for coffee products with one card showing an empty state component that reads ‘Woops, this coffee cup is empty’.\"\r\n state=\"none\"\r\n caption=\"Use empty states within other components and containers when no data is present.\"\r\n/>\r\n\r\n## Layout and placement\r\n\r\nSet the alignment of the empty state to match the component or container it sits in.\r\n\r\nPlace empty states at the top and don’t resize the container, keep it sized the same as if the primary content was displayed instead.\r\n\r\n## Content\r\n\r\nUse the empty state to clearly communicate to someone what has happened, why they are seeing the empty state and what to do next.\r\n\r\n<DoDontCaution\r\n imageSrc={emptyStateFig10}\r\n imageAlt=\"A diagram showing the different elements that make up the empty state component. These are an image or icon, a title, a subtitle, some body text, and an interaction area.\"\r\n state=\"none\"\r\n caption=\"The empty state component has an image or icon, a title, a subtitle, some body text and an interaction area.\"\r\n/>\r\n\r\nAdd an illustration, image or icon to an empty state to provide additional recognition or reinforce the written message.\r\n\r\nUse the empty state heading to clearly indicate the state of the empty content.\r\n\r\nUse the subheading to add more detail and explain why this may have happened.\r\n\r\nUse the body to explain how to rectify the issue, or to explain what is best to do next.\r\n\r\nUse the interaction area to include actions and links that will help people to continue through the app. Always include either a primary button or a navigation link, and occasionally include a secondary button or link if other routes are possible.\r\n\r\nHowever, avoid placing too many actions in the interaction area as this will cause confusion about what to do next.\r\n\r\n<DoDontCaution\r\n imageSrc={emptyStateFig11}\r\n imageAlt=\"An empty state component that has three buttons and three links within its interaction area.\"\r\n state=\"caution\"\r\n caption=\"Avoid placing too many actions within the interaction area.\"\r\n/>\r\n\r\nDon’t place other interactive components, such as inputs, in an empty state’s interaction area. If input needs to be collected, then do this on a full page or on a dialog.\r\n\r\n<DoDontCaution imageSrc={emptyStateFig12} imageAlt=\"\" state=\"bad\" caption=\"\" />\r\n\r\n## Accessibility considerations\r\n\r\nIf an empty state is displayed as a result of a change on a page, make sure it is announced by a screen reader using a live region.\r\n\r\n## Related components\r\n\r\n- [Alert](/components/alert).\r\n- [Loading indicator](/components/loading-indicator).\r\n",
"path": "/components/empty-state",
"navPriority": 17,
"date": "2023-08-31",
@@ -2235,11 +2235,11 @@
}
],
"meta": {
- "relativePath": "components/empty-state/guidance.mdx",
- "createdAt": "2024-11-06T10:27:49.404Z",
- "lastModified": "2024-11-06T10:19:00.012Z",
- "size": 10935,
- "formattedSize": "10.7 KB"
+ "relativePath": "components\\empty-state\\guidance.mdx",
+ "createdAt": "2024-12-04T13:23:54.100Z",
+ "lastModified": "2024-12-04T13:23:54.100Z",
+ "size": 11152,
+ "formattedSize": "10.9 KB"
}
},
{
@@ -2266,16 +2266,16 @@
}
],
"meta": {
- "relativePath": "components/footer/accessibility.mdx",
- "createdAt": "2024-11-06T10:27:49.404Z",
- "lastModified": "2024-11-06T10:19:00.028Z",
+ "relativePath": "components\\footer\\accessibility.mdx",
+ "createdAt": "2024-11-05T11:57:51.983Z",
+ "lastModified": "2024-11-05T11:57:51.983Z",
"size": 2011,
"formattedSize": "2.0 KB"
}
},
{
"id": "components\\footer\\codex",
- "contents": "\nimport { IcFooter, IcLink, IcFooterLink, IcFooterLinkGroup } from \"@ukic/react\";\n\nimport { NavLink, MemoryRouter } from \"react-router-dom\";\n\n## Component demo\n\nexport const snippets = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-footer\n description=\"The UK Intelligence Community Design System (ICDS) is a joint project by MI6, GCHQ, MI5, and partners.\"\n caption=\"All content is available under the Open Government Licence v3.0, except source code and code examples which are available under the MIT Licence.\"\n>\n <ic-footer-link slot=\"link\" href=\"#\">\n Accessibility\n </ic-footer-link>\n <ic-footer-link slot=\"link\" href=\"#\">\n Styles\n </ic-footer-link>\n <ic-footer-link slot=\"link\" href=\"#\">\n Components\n </ic-footer-link>\n <ic-footer-link slot=\"link\" href=\"#\">\n Patterns\n </ic-footer-link>\n</ic-footer>`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcFooter\n description=\"The UK Intelligence Community Design System (ICDS) is a joint project by MI6, GCHQ, MI5, and partners.\"\n caption=\"All content is available under the Open Government Licence v3.0, except source code and code examples which are available under the MIT Licence.\"\n>\n <IcFooterLink slot=\"link\" href=\"#\">\n Accessibility\n </IcFooterLink>\n <IcFooterLink slot=\"link\" href=\"#\">\n Styles\n </IcFooterLink>\n <IcFooterLink slot=\"link\" href=\"#\">\n Components\n </IcFooterLink>\n <IcFooterLink slot=\"link\" href=\"#\">\n Patterns\n </IcFooterLink>\n</IcFooter>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `{shortCode}`,\n },\n {\n language: \"Javascript\",\n snippet: `{shortCode}`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={snippets}>\n <IcFooter\n description=\"The UK Intelligence Community Design System (ICDS) is a joint project by MI6, GCHQ, MI5, and partners.\"\n caption=\"All content is available under the Open Government Licence v3.0, except source code and code examples which are available under the MIT Licence.\"\n >\n <IcFooterLink slot=\"link\" href=\"#\">\n Accessibility\n </IcFooterLink>\n <IcFooterLink slot=\"link\" href=\"#\">\n Styles\n </IcFooterLink>\n <IcFooterLink slot=\"link\" href=\"#\">\n Components\n </IcFooterLink>\n <IcFooterLink slot=\"link\" href=\"#\">\n Patterns\n </IcFooterLink>\n </IcFooter>\n</ComponentPreview>\n\n## Footer details\n\n<ComponentDetails component=\"ic-footer\" />\n\n## Footer link details\n\n<ComponentDetails component=\"ic-footer-link\" />\n\n## Footer link group details\n\n<ComponentDetails component=\"ic-footer-link-group\" />\n\n## Variants\n\n### Grouped links\n\nexport const snippetsGroupedLinks = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-footer\n group-links=\"true\"\n description=\"The UK Intelligence Community Design System (ICDS) is a joint project by MI6, GCHQ, MI5, and partners.\"\n>\n <ic-footer-link-group slot=\"link\" group-title=\"Grouped heading\">\n <ic-footer-link href=\"#\">Accessibility</ic-footer-link>\n <ic-footer-link href=\"#\">Styles</ic-footer-link>\n <ic-footer-link href=\"#\">Components</ic-footer-link>\n <ic-footer-link href=\"#\">Patterns</ic-footer-link>\n </ic-footer-link-group>\n <ic-footer-link-group slot=\"link\" group-title=\"Grouped heading\">\n <ic-footer-link href=\"#\">Accessibility</ic-footer-link>\n <ic-footer-link href=\"#\">Styles</ic-footer-link>\n <ic-footer-link href=\"#\">Components</ic-footer-link>\n <ic-footer-link href=\"#\">Patterns</ic-footer-link>\n </ic-footer-link-group>\n <ic-footer-link-group slot=\"link\" group-title=\"Grouped heading\">\n <ic-footer-link href=\"#\">Accessibility</ic-footer-link>\n <ic-footer-link href=\"#\">Styles</ic-footer-link>\n <ic-footer-link href=\"#\">Components</ic-footer-link>\n <ic-footer-link href=\"#\">Patterns</ic-footer-link>\n </ic-footer-link-group>\n</ic-footer>`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcFooter\n groupLinks\n description=\"The UK Intelligence Community Design System (ICDS) is a joint project by MI6, GCHQ, MI5, and partners.\"\n>\n <IcFooterLinkGroup slot=\"link\" groupTitle=\"Grouped heading\">\n <IcFooterLink href=\"#\">Accessibility</IcFooterLink>\n <IcFooterLink href=\"#\">Styles</IcFooterLink>\n <IcFooterLink href=\"#\">Components</IcFooterLink>\n <IcFooterLink href=\"#\">Patterns</IcFooterLink>\n </IcFooterLinkGroup>\n <IcFooterLinkGroup slot=\"link\" groupTitle=\"Grouped heading\">\n <IcFooterLink href=\"#\">Accessibility</IcFooterLink>\n <IcFooterLink href=\"#\">Styles</IcFooterLink>\n <IcFooterLink href=\"#\">Components</IcFooterLink>\n <IcFooterLink href=\"#\">Patterns</IcFooterLink>\n </IcFooterLinkGroup>\n <IcFooterLinkGroup slot=\"link\" groupTitle=\"Grouped heading\">\n <IcFooterLink href=\"#\">Accessibility</IcFooterLink>\n <IcFooterLink href=\"#\">Styles</IcFooterLink>\n <IcFooterLink href=\"#\">Components</IcFooterLink>\n <IcFooterLink href=\"#\">Patterns</IcFooterLink>\n </IcFooterLinkGroup>\n</IcFooter>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `{shortCode}`,\n },\n {\n language: \"Javascript\",\n snippet: `{shortCode}`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={snippetsGroupedLinks}>\n <IcFooter\n groupLinks\n description=\"The UK Intelligence Community Design System (ICDS) is a joint project by MI6, GCHQ, MI5, and partners.\"\n >\n <IcFooterLinkGroup slot=\"link\" groupTitle=\"Grouped heading\">\n <IcFooterLink href=\"#\">Accessibility</IcFooterLink>\n <IcFooterLink href=\"#\">Styles</IcFooterLink>\n <IcFooterLink href=\"#\">Components</IcFooterLink>\n <IcFooterLink href=\"#\">Patterns</IcFooterLink>\n </IcFooterLinkGroup>\n <IcFooterLinkGroup slot=\"link\" groupTitle=\"Grouped heading\">\n <IcFooterLink href=\"#\">Accessibility</IcFooterLink>\n <IcFooterLink href=\"#\">Styles</IcFooterLink>\n <IcFooterLink href=\"#\">Components</IcFooterLink>\n <IcFooterLink href=\"#\">Patterns</IcFooterLink>\n </IcFooterLinkGroup>\n <IcFooterLinkGroup slot=\"link\" groupTitle=\"Grouped heading\">\n <IcFooterLink href=\"#\">Accessibility</IcFooterLink>\n <IcFooterLink href=\"#\">Styles</IcFooterLink>\n <IcFooterLink href=\"#\">Components</IcFooterLink>\n <IcFooterLink href=\"#\">Patterns</IcFooterLink>\n </IcFooterLinkGroup>\n </IcFooter>\n</ComponentPreview>\n\n### Logo links\n\nexport const snippetsLogoLinks = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-footer description=\" description=\"The UK Intelligence Community Design System (ICDS) is a joint project by MI6, GCHQ, MI5, and partners.\">\n <ic-footer-link slot=\"link\" href=\"#\">Accessibility</ic-footer-link>\n <ic-footer-link slot=\"link\" href=\"#\">Styles</ic-footer-link>\n <ic-footer-link slot=\"link\" href=\"#\">Components</ic-footer-link>\n <ic-footer-link slot=\"link\" href=\"#\">Patterns</ic-footer-link>\n <div slot=\"logo\">\n <ic-footer-link href=\"#\">\n <svg xmlns=\"http://www.w3.org/2000/svg\"\n height=\"48\"\n viewBox=\"0 0 24 24\"\n width=\"48\"\n fill=\"#FFFFFF\"\n >\n <path\n d=\"M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z\"\n fill=\"currentColor\"\n />\n </svg>\n </ic-footer-link>\n <ic-footer-link href=\"#\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"48\"\n viewBox=\"0 0 24 24\"\n width=\"48\"\n fill=\"#FFFFFF\"\n >\n <path\n d=\"M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z\"\n fill=\"currentColor\"\n />\n </svg>\n </ic-footer-link>\n </div>\n</ic-footer>`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcFooter description=\"The UK Intelligence Community Design System (ICDS) is a joint project by MI6, GCHQ, MI5, and partners.\">\n <IcFooterLink slot=\"link\" href=\"#\">Accessibility</IcFooterLink>\n <IcFooterLink slot=\"link\" href=\"#\">Styles</IcFooterLink>\n <IcFooterLink slot=\"link\" href=\"#\">Components</IcFooterLink>\n <IcFooterLink slot=\"link\" href=\"#\">Patterns</IcFooterLink>\n <div slot=\"logo\">\n <IcFooterLink href=\"#\">\n <SlottedSVG\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"48\"\n viewBox=\"0 0 24 24\"\n width=\"48\"\n fill=\"#FFFFFF\"\n >\n <path\n d=\"M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z\"\n fill=\"currentColor\"\n />\n </SlottedSVG>\n </IcFooterLink>\n <IcFooterLink href=\"#\">\n <SlottedSVG\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"48\"\n viewBox=\"0 0 24 24\"\n width=\"48\"\n fill=\"#FFFFFF\"\n >\n <path\n d=\"M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z\"\n fill=\"currentColor\"\n />\n </SlottedSVG>\n </IcFooterLink>\n </div>\n</IcFooter>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `{shortCode}`,\n },\n {\n language: \"Javascript\",\n snippet: `{shortCode}`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={snippetsLogoLinks}>\n <IcFooter description=\"The UK Intelligence Community Design System (ICDS) is a joint project by MI6, GCHQ, MI5, and partners.\">\n <IcFooterLink slot=\"link\" href=\"#\">\n Accessibility\n </IcFooterLink>\n <IcFooterLink slot=\"link\" href=\"#\">\n Styles\n </IcFooterLink>\n <IcFooterLink slot=\"link\" href=\"#\">\n Components\n </IcFooterLink>\n <IcFooterLink slot=\"link\" href=\"#\">\n Patterns\n </IcFooterLink>\n <div\n slot=\"logo\"\n style={{\n display: \"flex\",\n gap: \"var(--ic-space-lg)\",\n }}\n >\n <IcFooterLink href=\"#\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"48\"\n viewBox=\"0 0 24 24\"\n width=\"48\"\n fill=\"#FFFFFF\"\n >\n <path\n d=\"M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z\"\n fill=\"currentColor\"\n />\n </svg>\n </IcFooterLink>\n <IcFooterLink href=\"#\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"48\"\n viewBox=\"0 0 24 24\"\n width=\"48\"\n fill=\"#FFFFFF\"\n >\n <path\n d=\"M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z\"\n fill=\"currentColor\"\n />\n </svg>\n </IcFooterLink>\n </div>\n </IcFooter>\n</ComponentPreview>\n\n### With React Router\n\nexport const withReactRouter = [\n {\n technology: \"React\",\n snippets: {\n short: `<MemoryRouter initialEntries={[\"/\"]}>\n <Routes>\n <Route path=\"/\" element={<IcTypography>This is the accessibility page</IcTypography>} />\n <Route path=\"/Styles\" element={<IcTypography>This page is about styles</IcTypography>} />\n </Routes>\n <IcFooter description=\"The UK Intelligence Community Design System (ICDS) is a joint project by MI6, GCHQ, MI5, and partners.\" \n > \n <IcFooterLink slot=\"link\">\n <NavLink to=\"#\">Accessibility</NavLink>\n </IcFooterLink>\n <IcFooterLink slot=\"link\">\n <NavLink to=\"/Styles\">Styles</NavLink>\n </IcFooterLink>\n <div slot=\"logo\" className={classes.logoContainer}>\n Logo\n </div>\n </IcFooter>\n</MemoryRouter>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n logoContainer: {\n width: \"6.25rem\",\n height: \"6.25rem\",\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n backgroundColor: \"var(--ic-theme-primary)\",\n color: \"var(--ic-theme-text)\"\n },\n});\nconst classes = useStyles();\nreturn (\n {shortCode}\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n logoContainer: {\n width: \"6.25rem\",\n height: \"6.25rem\",\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n backgroundColor: \"var(--ic-theme-primary)\",\n color: \"var(--ic-theme-text)\"\n },\n});\nreturn (\n {shortCode}\n)`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview\n snippets={withReactRouter}\n style={{ flexDirection: \"column\" }}\n>\n <MemoryRouter initialEntries={[\"/\"]}>\n <IcFooter\n description=\"The UK Intelligence Community Design System (ICDS) is a joint project by MI6, GCHQ, MI5, and partners.\"\n caption=\"This information is exempt under the Freedom of Information Act 2000 (FOIA) and may be exempt under other UK information legislation.\"\n >\n <IcFooterLink slot=\"link\">\n <NavLink to=\"#\">Accessibility</NavLink>\n </IcFooterLink>\n <IcFooterLink slot=\"link\">\n <NavLink to=\"/Styles\">Styles</NavLink>\n </IcFooterLink>\n <div\n slot=\"logo\"\n style={{\n width: \"6.25rem\",\n height: \"25rem\",\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n backgroundColor: \"var(--ic-theme-primary)\",\n color: \"var(--ic-theme-text)\",\n }}\n >\n Logo\n </div>\n </IcFooter>\n </MemoryRouter>\n</ComponentPreview>\n\n## Layout example\n\nAdding a `minHeight` of `100vh` ensures the footer appears below the page fold.\n\nexport const footerLayoutExample = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<div class='footer-layout-root'>\n <div class=\"div-container> \n <ic-top-navigation appTitle=\"ICDS\" status=\"alpha\" version=\"v0.0.7\">\n <svg\n slot=\"app-icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"#000000\"\n >\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\" />\n </svg>\n </ic-top-navigation>\n <main>\n <ic-section-container>\n <ic-typography>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed\n vestibulum venenatis facilisis. Nam tortor felis, auctor vel\n ante quis, tempor interdum libero. In dictum sodales velit, eu\n egestas arcu dignissim ac. Aliquam facilisis eros dolor, id\n laoreet orci sagittis ut. Sed tempus, lacus in pretium molestie,\n lectus magna interdum risus, vel fringilla libero ex eu dui.\n Suspendisse ullamcorper vehicula lacinia. Phasellus congue velit\n nisl, vitae congue ligula rutrum id.\n </ic-typography>\n </ic-section-container>\n </main>\n </div>\n <ic-footer\n description=\"The UK Intelligence Community Design System (ICDS) is a joint project by MI6, GCHQ, MI5, and partners.\"\n caption=\"All content is available under the Open Government Licence v3.0, except source code and code examples which are available under the MIT Licence.\">\n <ic-footer-link slot=\"link\" href=\"#\">Accessibility</ic-footer-link>\n <ic-footer-link slot=\"link\" href=\"#\">Styles</ic-footer-link>\n <ic-footer-link slot=\"link\" href=\"#\">Components</ic-footer-link>\n <ic-footer-link slot=\"link\" href=\"#\">Patterns</ic-footer-link>\n </ic-footer>\n</div>\n `,\n long: `.div-container {\n min-height: 100vh;\n }\n</style>\n<body>\n <div class=\"parent-container\">\n {shortCode}\n </div>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<div className='footer-layout-root'>\n <div className={classes.divContainer}> \n <IcTopNavigation appTitle=\"ICDS\" status=\"alpha\" version=\"v0.0.7\">\n <SlottedSVG\n slot=\"app-icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n fill=\"#000000\"\n >\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\" />\n </SlottedSVG>\n </IcTopNavigation>\n <main>\n <IcSectionContainer>\n <IcTypography>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed\n vestibulum venenatis facilisis. Nam tortor felis, auctor vel\n ante quis, tempor interdum libero. In dictum sodales velit, eu\n egestas arcu dignissim ac. Aliquam facilisis eros dolor, id\n laoreet orci sagittis ut. Sed tempus, lacus in pretium molestie,\n lectus magna interdum risus, vel fringilla libero ex eu dui.\n Suspendisse ullamcorper vehicula lacinia. Phasellus congue velit\n nisl, vitae congue ligula rutrum id.\n </IcTypography>\n </IcSectionContainer>\n </main>\n </div>\n <IcFooter\n description=\"The UK Intelligence Community Design System (ICDS) is a joint project by MI6, GCHQ, MI5, and partners.\"\n caption=\"All content is available under the Open Government Licence v3.0, except source code and code examples which are available under the MIT Licence.\">\n <IcFooterLink slot=\"link\" href=\"#\">Accessibility</IcFooterLink>\n <IcFooterLink slot=\"link\" href=\"#\">Styles</IcFooterLink>\n <IcFooterLink slot=\"link\" href=\"#\">Components</IcFooterLink>\n <IcFooterLink slot=\"link\" href=\"#\">Patterns</IcFooterLink>\n </IcFooter>\n</div>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n divContainer: {\n minHeight: \"100vh\",\n },\n});\nconst classes = useStyles();\nreturn (\n {shortCode}\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n divContainer: {\n minHeight: \"100vh\",\n },\n});\nconst classes = useStyles();\nreturn (\n {shortCode}\n)`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={footerLayoutExample}>\n <IcLink href=\"/footer-layout\" target=\"_blank\">\n View example in new window\n </IcLink>\n</ComponentPreview>\n",
+ "contents": "\r\nimport { IcFooter, IcLink, IcFooterLink, IcFooterLinkGroup } from \"@ukic/react\";\r\n\r\nimport { NavLink, MemoryRouter } from \"react-router-dom\";\r\n\r\n## Component demo\r\n\r\nexport const snippets = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-footer\r\n description=\"The UK Intelligence Community Design System (ICDS) is a joint project by MI6, GCHQ, MI5, and partners.\"\r\n caption=\"All content is available under the Open Government Licence v3.0, except source code and code examples which are available under the MIT Licence.\"\r\n>\r\n <ic-footer-link slot=\"link\" href=\"#\">\r\n Accessibility\r\n </ic-footer-link>\r\n <ic-footer-link slot=\"link\" href=\"#\">\r\n Styles\r\n </ic-footer-link>\r\n <ic-footer-link slot=\"link\" href=\"#\">\r\n Components\r\n </ic-footer-link>\r\n <ic-footer-link slot=\"link\" href=\"#\">\r\n Patterns\r\n </ic-footer-link>\r\n</ic-footer>`,\r\n long: `{shortCode}`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcFooter\r\n description=\"The UK Intelligence Community Design System (ICDS) is a joint project by MI6, GCHQ, MI5, and partners.\"\r\n caption=\"All content is available under the Open Government Licence v3.0, except source code and code examples which are available under the MIT Licence.\"\r\n>\r\n <IcFooterLink slot=\"link\" href=\"#\">\r\n Accessibility\r\n </IcFooterLink>\r\n <IcFooterLink slot=\"link\" href=\"#\">\r\n Styles\r\n </IcFooterLink>\r\n <IcFooterLink slot=\"link\" href=\"#\">\r\n Components\r\n </IcFooterLink>\r\n <IcFooterLink slot=\"link\" href=\"#\">\r\n Patterns\r\n </IcFooterLink>\r\n</IcFooter>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `{shortCode}`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `{shortCode}`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview snippets={snippets}>\r\n <IcFooter\r\n description=\"The UK Intelligence Community Design System (ICDS) is a joint project by MI6, GCHQ, MI5, and partners.\"\r\n caption=\"All content is available under the Open Government Licence v3.0, except source code and code examples which are available under the MIT Licence.\"\r\n >\r\n <IcFooterLink slot=\"link\" href=\"#\">\r\n Accessibility\r\n </IcFooterLink>\r\n <IcFooterLink slot=\"link\" href=\"#\">\r\n Styles\r\n </IcFooterLink>\r\n <IcFooterLink slot=\"link\" href=\"#\">\r\n Components\r\n </IcFooterLink>\r\n <IcFooterLink slot=\"link\" href=\"#\">\r\n Patterns\r\n </IcFooterLink>\r\n </IcFooter>\r\n</ComponentPreview>\r\n\r\n## Footer details\r\n\r\n<ComponentDetails component=\"ic-footer\" />\r\n\r\n## Footer link details\r\n\r\n<ComponentDetails component=\"ic-footer-link\" />\r\n\r\n## Footer link group details\r\n\r\n<ComponentDetails component=\"ic-footer-link-group\" />\r\n\r\n## Variants\r\n\r\n### Grouped links\r\n\r\nexport const snippetsGroupedLinks = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-footer\r\n group-links=\"true\"\r\n description=\"The UK Intelligence Community Design System (ICDS) is a joint project by MI6, GCHQ, MI5, and partners.\"\r\n>\r\n <ic-footer-link-group slot=\"link\" group-title=\"Grouped heading\">\r\n <ic-footer-link href=\"#\">Accessibility</ic-footer-link>\r\n <ic-footer-link href=\"#\">Styles</ic-footer-link>\r\n <ic-footer-link href=\"#\">Components</ic-footer-link>\r\n <ic-footer-link href=\"#\">Patterns</ic-footer-link>\r\n </ic-footer-link-group>\r\n <ic-footer-link-group slot=\"link\" group-title=\"Grouped heading\">\r\n <ic-footer-link href=\"#\">Accessibility</ic-footer-link>\r\n <ic-footer-link href=\"#\">Styles</ic-footer-link>\r\n <ic-footer-link href=\"#\">Components</ic-footer-link>\r\n <ic-footer-link href=\"#\">Patterns</ic-footer-link>\r\n </ic-footer-link-group>\r\n <ic-footer-link-group slot=\"link\" group-title=\"Grouped heading\">\r\n <ic-footer-link href=\"#\">Accessibility</ic-footer-link>\r\n <ic-footer-link href=\"#\">Styles</ic-footer-link>\r\n <ic-footer-link href=\"#\">Components</ic-footer-link>\r\n <ic-footer-link href=\"#\">Patterns</ic-footer-link>\r\n </ic-footer-link-group>\r\n</ic-footer>`,\r\n long: `{shortCode}`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcFooter\r\n groupLinks\r\n description=\"The UK Intelligence Community Design System (ICDS) is a joint project by MI6, GCHQ, MI5, and partners.\"\r\n>\r\n <IcFooterLinkGroup slot=\"link\" groupTitle=\"Grouped heading\">\r\n <IcFooterLink href=\"#\">Accessibility</IcFooterLink>\r\n <IcFooterLink href=\"#\">Styles</IcFooterLink>\r\n <IcFooterLink href=\"#\">Components</IcFooterLink>\r\n <IcFooterLink href=\"#\">Patterns</IcFooterLink>\r\n </IcFooterLinkGroup>\r\n <IcFooterLinkGroup slot=\"link\" groupTitle=\"Grouped heading\">\r\n <IcFooterLink href=\"#\">Accessibility</IcFooterLink>\r\n <IcFooterLink href=\"#\">Styles</IcFooterLink>\r\n <IcFooterLink href=\"#\">Components</IcFooterLink>\r\n <IcFooterLink href=\"#\">Patterns</IcFooterLink>\r\n </IcFooterLinkGroup>\r\n <IcFooterLinkGroup slot=\"link\" groupTitle=\"Grouped heading\">\r\n <IcFooterLink href=\"#\">Accessibility</IcFooterLink>\r\n <IcFooterLink href=\"#\">Styles</IcFooterLink>\r\n <IcFooterLink href=\"#\">Components</IcFooterLink>\r\n <IcFooterLink href=\"#\">Patterns</IcFooterLink>\r\n </IcFooterLinkGroup>\r\n</IcFooter>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `{shortCode}`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `{shortCode}`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview snippets={snippetsGroupedLinks}>\r\n <IcFooter\r\n groupLinks\r\n description=\"The UK Intelligence Community Design System (ICDS) is a joint project by MI6, GCHQ, MI5, and partners.\"\r\n >\r\n <IcFooterLinkGroup slot=\"link\" groupTitle=\"Grouped heading\">\r\n <IcFooterLink href=\"#\">Accessibility</IcFooterLink>\r\n <IcFooterLink href=\"#\">Styles</IcFooterLink>\r\n <IcFooterLink href=\"#\">Components</IcFooterLink>\r\n <IcFooterLink href=\"#\">Patterns</IcFooterLink>\r\n </IcFooterLinkGroup>\r\n <IcFooterLinkGroup slot=\"link\" groupTitle=\"Grouped heading\">\r\n <IcFooterLink href=\"#\">Accessibility</IcFooterLink>\r\n <IcFooterLink href=\"#\">Styles</IcFooterLink>\r\n <IcFooterLink href=\"#\">Components</IcFooterLink>\r\n <IcFooterLink href=\"#\">Patterns</IcFooterLink>\r\n </IcFooterLinkGroup>\r\n <IcFooterLinkGroup slot=\"link\" groupTitle=\"Grouped heading\">\r\n <IcFooterLink href=\"#\">Accessibility</IcFooterLink>\r\n <IcFooterLink href=\"#\">Styles</IcFooterLink>\r\n <IcFooterLink href=\"#\">Components</IcFooterLink>\r\n <IcFooterLink href=\"#\">Patterns</IcFooterLink>\r\n </IcFooterLinkGroup>\r\n </IcFooter>\r\n</ComponentPreview>\r\n\r\n### Logo links\r\n\r\nexport const snippetsLogoLinks = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-footer description=\" description=\"The UK Intelligence Community Design System (ICDS) is a joint project by MI6, GCHQ, MI5, and partners.\">\r\n <ic-footer-link slot=\"link\" href=\"#\">Accessibility</ic-footer-link>\r\n <ic-footer-link slot=\"link\" href=\"#\">Styles</ic-footer-link>\r\n <ic-footer-link slot=\"link\" href=\"#\">Components</ic-footer-link>\r\n <ic-footer-link slot=\"link\" href=\"#\">Patterns</ic-footer-link>\r\n <div slot=\"logo\" role=\"list\">\r\n <ic-footer-link href=\"#\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n height=\"48\"\r\n viewBox=\"0 0 24 24\"\r\n width=\"48\"\r\n fill=\"#FFFFFF\"\r\n >\r\n <path\r\n d=\"M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z\"\r\n fill=\"currentColor\"\r\n />\r\n </svg>\r\n </ic-footer-link>\r\n <ic-footer-link href=\"#\">\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n height=\"48\"\r\n viewBox=\"0 0 24 24\"\r\n width=\"48\"\r\n fill=\"#FFFFFF\"\r\n >\r\n <path\r\n d=\"M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z\"\r\n fill=\"currentColor\"\r\n />\r\n </svg>\r\n </ic-footer-link>\r\n </div>\r\n</ic-footer>`,\r\n long: `{shortCode}`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcFooter description=\"The UK Intelligence Community Design System (ICDS) is a joint project by MI6, GCHQ, MI5, and partners.\">\r\n <IcFooterLink slot=\"link\" href=\"#\">Accessibility</IcFooterLink>\r\n <IcFooterLink slot=\"link\" href=\"#\">Styles</IcFooterLink>\r\n <IcFooterLink slot=\"link\" href=\"#\">Components</IcFooterLink>\r\n <IcFooterLink slot=\"link\" href=\"#\">Patterns</IcFooterLink>\r\n <div slot=\"logo\" role=\"list\">\r\n <IcFooterLink href=\"#\">\r\n <SlottedSVG\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n height=\"48\"\r\n viewBox=\"0 0 24 24\"\r\n width=\"48\"\r\n fill=\"#FFFFFF\"\r\n >\r\n <path\r\n d=\"M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z\"\r\n fill=\"currentColor\"\r\n />\r\n </SlottedSVG>\r\n </IcFooterLink>\r\n <IcFooterLink href=\"#\">\r\n <SlottedSVG\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n height=\"48\"\r\n viewBox=\"0 0 24 24\"\r\n width=\"48\"\r\n fill=\"#FFFFFF\"\r\n >\r\n <path\r\n d=\"M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z\"\r\n fill=\"currentColor\"\r\n />\r\n </SlottedSVG>\r\n </IcFooterLink>\r\n </div>\r\n</IcFooter>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `{shortCode}`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `{shortCode}`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview snippets={snippetsLogoLinks}>\r\n <IcFooter description=\"The UK Intelligence Community Design System (ICDS) is a joint project by MI6, GCHQ, MI5, and partners.\">\r\n <IcFooterLink slot=\"link\" href=\"#\">\r\n Accessibility\r\n </IcFooterLink>\r\n <IcFooterLink slot=\"link\" href=\"#\">\r\n Styles\r\n </IcFooterLink>\r\n <IcFooterLink slot=\"link\" href=\"#\">\r\n Components\r\n </IcFooterLink>\r\n <IcFooterLink slot=\"link\" href=\"#\">\r\n Patterns\r\n </IcFooterLink>\r\n <div\r\n slot=\"logo\"\r\n style={{\r\n display: \"flex\",\r\n gap: \"var(--ic-space-lg)\",\r\n }}\r\n role=\"list\"\r\n >\r\n <IcFooterLink href=\"#\">\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n height=\"48\"\r\n viewBox=\"0 0 24 24\"\r\n width=\"48\"\r\n fill=\"#FFFFFF\"\r\n >\r\n <path\r\n d=\"M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z\"\r\n fill=\"currentColor\"\r\n />\r\n </svg>\r\n </IcFooterLink>\r\n <IcFooterLink href=\"#\">\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n height=\"48\"\r\n viewBox=\"0 0 24 24\"\r\n width=\"48\"\r\n fill=\"#FFFFFF\"\r\n >\r\n <path\r\n d=\"M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z\"\r\n fill=\"currentColor\"\r\n />\r\n </svg>\r\n </IcFooterLink>\r\n </div>\r\n </IcFooter>\r\n</ComponentPreview>\r\n\r\n### With React Router\r\n\r\nexport const withReactRouter = [\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<MemoryRouter initialEntries={[\"/\"]}>\r\n <Routes>\r\n <Route path=\"/\" element={<IcTypography>This is the accessibility page</IcTypography>} />\r\n <Route path=\"/Styles\" element={<IcTypography>This page is about styles</IcTypography>} />\r\n </Routes>\r\n <IcFooter description=\"The UK Intelligence Community Design System (ICDS) is a joint project by MI6, GCHQ, MI5, and partners.\" \r\n > \r\n <IcFooterLink slot=\"link\">\r\n <NavLink to=\"#\">Accessibility</NavLink>\r\n </IcFooterLink>\r\n <IcFooterLink slot=\"link\">\r\n <NavLink to=\"/Styles\">Styles</NavLink>\r\n </IcFooterLink>\r\n <div slot=\"logo\" className={classes.logoContainer}>\r\n Logo\r\n </div>\r\n </IcFooter>\r\n</MemoryRouter>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `const useStyles = createUseStyles({\r\n logoContainer: {\r\n width: \"6.25rem\",\r\n height: \"6.25rem\",\r\n display: \"flex\",\r\n alignItems: \"center\",\r\n justifyContent: \"center\",\r\n backgroundColor: \"var(--ic-theme-primary)\",\r\n color: \"var(--ic-theme-text)\"\r\n },\r\n});\r\nconst classes = useStyles();\r\nreturn (\r\n {shortCode}\r\n)`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `const useStyles = createUseStyles({\r\n logoContainer: {\r\n width: \"6.25rem\",\r\n height: \"6.25rem\",\r\n display: \"flex\",\r\n alignItems: \"center\",\r\n justifyContent: \"center\",\r\n backgroundColor: \"var(--ic-theme-primary)\",\r\n color: \"var(--ic-theme-text)\"\r\n },\r\n});\r\nreturn (\r\n {shortCode}\r\n)`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview\r\n snippets={withReactRouter}\r\n style={{ flexDirection: \"column\" }}\r\n>\r\n <MemoryRouter initialEntries={[\"/\"]}>\r\n <IcFooter\r\n description=\"The UK Intelligence Community Design System (ICDS) is a joint project by MI6, GCHQ, MI5, and partners.\"\r\n caption=\"This information is exempt under the Freedom of Information Act 2000 (FOIA) and may be exempt under other UK information legislation.\"\r\n >\r\n <IcFooterLink slot=\"link\">\r\n <NavLink to=\"#\">Accessibility</NavLink>\r\n </IcFooterLink>\r\n <IcFooterLink slot=\"link\">\r\n <NavLink to=\"/Styles\">Styles</NavLink>\r\n </IcFooterLink>\r\n <div\r\n slot=\"logo\"\r\n style={{\r\n width: \"6.25rem\",\r\n height: \"25rem\",\r\n display: \"flex\",\r\n alignItems: \"center\",\r\n justifyContent: \"center\",\r\n backgroundColor: \"var(--ic-theme-primary)\",\r\n color: \"var(--ic-theme-text)\",\r\n }}\r\n >\r\n Logo\r\n </div>\r\n </IcFooter>\r\n </MemoryRouter>\r\n</ComponentPreview>\r\n\r\n## Layout example\r\n\r\nAdding a `minHeight` of `100vh` ensures the footer appears below the page fold.\r\n\r\nexport const footerLayoutExample = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<div class='footer-layout-root'>\r\n <div class=\"div-container> \r\n <ic-top-navigation appTitle=\"ICDS\" status=\"alpha\" version=\"v0.0.7\">\r\n <svg\r\n slot=\"app-icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"24\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"#000000\"\r\n >\r\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\r\n <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\" />\r\n </svg>\r\n </ic-top-navigation>\r\n <main>\r\n <ic-section-container>\r\n <ic-typography>\r\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed\r\n vestibulum venenatis facilisis. Nam tortor felis, auctor vel\r\n ante quis, tempor interdum libero. In dictum sodales velit, eu\r\n egestas arcu dignissim ac. Aliquam facilisis eros dolor, id\r\n laoreet orci sagittis ut. Sed tempus, lacus in pretium molestie,\r\n lectus magna interdum risus, vel fringilla libero ex eu dui.\r\n Suspendisse ullamcorper vehicula lacinia. Phasellus congue velit\r\n nisl, vitae congue ligula rutrum id.\r\n </ic-typography>\r\n </ic-section-container>\r\n </main>\r\n </div>\r\n <ic-footer\r\n description=\"The UK Intelligence Community Design System (ICDS) is a joint project by MI6, GCHQ, MI5, and partners.\"\r\n caption=\"All content is available under the Open Government Licence v3.0, except source code and code examples which are available under the MIT Licence.\">\r\n <ic-footer-link slot=\"link\" href=\"#\">Accessibility</ic-footer-link>\r\n <ic-footer-link slot=\"link\" href=\"#\">Styles</ic-footer-link>\r\n <ic-footer-link slot=\"link\" href=\"#\">Components</ic-footer-link>\r\n <ic-footer-link slot=\"link\" href=\"#\">Patterns</ic-footer-link>\r\n </ic-footer>\r\n</div>\r\n `,\r\n long: `.div-container {\r\n min-height: 100vh;\r\n }\r\n</style>\r\n<body>\r\n <div class=\"parent-container\">\r\n {shortCode}\r\n </div>`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<div className='footer-layout-root'>\r\n <div className={classes.divContainer}> \r\n <IcTopNavigation appTitle=\"ICDS\" status=\"alpha\" version=\"v0.0.7\">\r\n <SlottedSVG\r\n slot=\"app-icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n width=\"24\"\r\n fill=\"#000000\"\r\n >\r\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\r\n <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\" />\r\n </SlottedSVG>\r\n </IcTopNavigation>\r\n <main>\r\n <IcSectionContainer>\r\n <IcTypography>\r\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed\r\n vestibulum venenatis facilisis. Nam tortor felis, auctor vel\r\n ante quis, tempor interdum libero. In dictum sodales velit, eu\r\n egestas arcu dignissim ac. Aliquam facilisis eros dolor, id\r\n laoreet orci sagittis ut. Sed tempus, lacus in pretium molestie,\r\n lectus magna interdum risus, vel fringilla libero ex eu dui.\r\n Suspendisse ullamcorper vehicula lacinia. Phasellus congue velit\r\n nisl, vitae congue ligula rutrum id.\r\n </IcTypography>\r\n </IcSectionContainer>\r\n </main>\r\n </div>\r\n <IcFooter\r\n description=\"The UK Intelligence Community Design System (ICDS) is a joint project by MI6, GCHQ, MI5, and partners.\"\r\n caption=\"All content is available under the Open Government Licence v3.0, except source code and code examples which are available under the MIT Licence.\">\r\n <IcFooterLink slot=\"link\" href=\"#\">Accessibility</IcFooterLink>\r\n <IcFooterLink slot=\"link\" href=\"#\">Styles</IcFooterLink>\r\n <IcFooterLink slot=\"link\" href=\"#\">Components</IcFooterLink>\r\n <IcFooterLink slot=\"link\" href=\"#\">Patterns</IcFooterLink>\r\n </IcFooter>\r\n</div>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `const useStyles = createUseStyles({\r\n divContainer: {\r\n minHeight: \"100vh\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nreturn (\r\n {shortCode}\r\n)`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `const useStyles = createUseStyles({\r\n divContainer: {\r\n minHeight: \"100vh\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nreturn (\r\n {shortCode}\r\n)`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview snippets={footerLayoutExample}>\r\n <IcLink href=\"/footer-layout\" target=\"_blank\">\r\n View example in new window\r\n </IcLink>\r\n</ComponentPreview>\r\n",
"path": "/components/footer/code",
"date": "2024-05-31",
"title": "Footer",
@@ -2297,16 +2297,16 @@
}
],
"meta": {
- "relativePath": "components/footer/code.mdx",
- "createdAt": "2024-11-06T10:27:49.404Z",
- "lastModified": "2024-11-06T10:19:00.032Z",
- "size": 18992,
- "formattedSize": "18.5 KB"
+ "relativePath": "components\\footer\\code.mdx",
+ "createdAt": "2024-12-04T13:24:18.023Z",
+ "lastModified": "2024-12-04T13:24:18.023Z",
+ "size": 19635,
+ "formattedSize": "19.2 KB"
}
},
{
"id": "components\\footer\\guidancex",
- "contents": "\nimport { IcFooter, IcFooterLink } from \"@ukic/react\";\nimport footerFig1 from \"./images/fig-1-colours.png\";\nimport footerFig2 from \"./images/fig-2-not-full-width.png\";\nimport footerFig3 from \"./images/fig-3-below-the-fold.png\";\nimport footerFig4 from \"./images/fig-4-above-the-fold.png\";\nimport footerFig5 from \"./images/fig-5-app-drawer-layouts.png\";\nimport footerFig6 from \"./images/fig-6-left-aligned.png\";\nimport footerFig7 from \"./images/fig-7-centred.png\";\nimport footerFig8 from \"./images/fig-8-full-width.png\";\nimport footerFig9 from \"./images/fig-9-single-line-links.png\";\nimport footerFig10 from \"./images/fig-10-grouped-links.png\";\nimport footerFig11 from \"./images/fig-11-desktop-logos.png\";\nimport footerFig12 from \"./images/fig-12-correct-copy.png\";\nimport footerFig13 from \"./images/fig-13-incorrect-copy.png\";\n\n## Introduction\n\nAn example of the footer component.\n\n<ComponentPreview>\n <IcFooter\n description=\"The UK Intelligence Community Design System (ICDS) is a joint project by MI6, GCHQ, MI5, and partners.\"\n caption=\"All content is available under the Open Government Licence v3.0, except source code and code examples which are available under the MIT Licence.\"\n >\n <IcFooterLink slot=\"link\" href=\"#\">\n Accessibility\n </IcFooterLink>\n <IcFooterLink slot=\"link\" href=\"#\">\n Styles\n </IcFooterLink>\n <IcFooterLink slot=\"link\" href=\"#\">\n Components\n </IcFooterLink>\n <IcFooterLink slot=\"link\" href=\"#\">\n Patterns\n </IcFooterLink>\n </IcFooter>\n</ComponentPreview>\n\n## When to use\n\nThere are two types of footer that display links in different ways. These are single line footers and grouped footers.\n\nUse a footer on every page so that the required legal information is displayed.\n\n### Single line\n\nUse single line footers when eight or fewer links are required and there is no need to split those links into groups.\n\n### Grouped\n\nUse grouped footers when more than eight links are required or the links can be grouped meaningfully.\n\n## Colour\n\nThe background colour of the footer reflects the chosen theme colour for the application. Set the global theme colour token to change the footer’s appearance.\n\n<DoDontCaution\n imageSrc={footerFig1}\n imageAlt=\"A footer using automatically generated secondary and tertiary shades of the app’s theme colour as the background colours for the footer’s link section and logo section respectively.\"\n state=\"good\"\n caption=\"Change the global theme colour token to change the footer’s appearance.\"\n/>\n\n## Sizing\n\nThe footer always extends to the full width of the viewport.\n\nDon’t embed the footer within another container that is not full width.\n\n<DoDontCaution\n imageSrc={footerFig2}\n imageAlt=\"A footer positioned centred between two other content areas that sit to the left and right of the footer.\"\n state=\"bad\"\n caption=\"Don’t place the footer within other content. Always make sure it's the full width of the viewport.\"\n/>\n\n## Layout and placement\n\n### Placement\n\nAlways place the footer at the bottom of the page and below the fold, meaning users should scroll to see it.\n\n<DoDontCaution\n imageSrc={footerFig3}\n imageAlt=\"A footer component placed below the fold within a page design.\"\n state=\"good\"\n caption=\"Footer placed correctly below the fold on a page.\"\n/>\n\n<DoDontCaution\n imageSrc={footerFig4}\n imageAlt=\"A footer component placed above the fold within a page design.\"\n state=\"bad\"\n caption=\"Footer placed incorrectly above the fold.\"\n/>\n\nPosition the footer adjacent to the [side navigation](/components/side-navigation) if your app uses one.\n\n<DoDontCaution\n imageSrc={footerFig5}\n imageAlt=\"An example app showing a side navigation component with a footer component positioned on the right and adjacent to the side navigation.\"\n state=\"good\"\n caption=\"Place the footer adjacent to the side navigation.\"\n/>\n\n### Alignment\n\nThe footer can be set to left-aligned, centred or full width.\n\nUse left-aligned to align footer content to the left of the main body of the page. This works well with apps that use the side navigation.\n\n<DoDontCaution\n imageSrc={footerFig6}\n imageAlt=\"A footer component with its content left aligned.\"\n state=\"good\"\n caption=\"A footer with its content left aligned.\"\n/>\n\nUse centred alignment to centre footer content to the main body of the page.\n\n<DoDontCaution\n imageSrc={footerFig7}\n imageAlt=\"A footer component with its content centre aligned.\"\n state=\"good\"\n caption=\"A footer with its content centre aligned.\"\n/>\n\nUse full-width to position footer content so that it spans the full width of the viewport.\n\n<DoDontCaution\n imageSrc={footerFig8}\n imageAlt=\"A footer component with its content aligned to the full width of the viewport.\"\n state=\"good\"\n caption=\"A footer with its content aligned to the full width of the viewport.\"\n/>\n\n## Content\n\n### Links\n\nFooters provide a set of links that can be accessed from every page within an app. Specify either single links or grouped links when using a footer.\n\nGive link groups clear labels when using grouped links.\n\nOrder the links so that the most important links appear at the top left of the links section.\n\n<DoDontCaution\n imageSrc={footerFig9}\n imageAlt=\"A footer showing a single set of links. The four links include ‘Accessibility statement’, ‘Privacy’, ‘Cookies’ and ‘Contribute’.\"\n state=\"good\"\n caption=\"A footer with a single set of links.\"\n/>\n\n<DoDontCaution\n imageSrc={footerFig10}\n imageAlt=\"A footer showing two groups of links. The two link groups are titled ‘Services’ and ‘Policy’ and each group includes a set of links.\"\n state=\"good\"\n caption=\"A footer with grouped links.\"\n/>\n\n### Logos\n\nFooters can include a number of different logos. The logos appear at the bottom of the footer. Choose the correct variant (i.e., light or dark) of your logo to match the selected theme colour background.\n\n<DoDontCaution\n imageSrc={footerFig11}\n imageAlt=\"A footer displaying four different logos on a large screen.\"\n state=\"good\"\n caption=\"A footer displaying four different logos on a large screen.\"\n/>\n\n### Additional information\n\nProvide additional information in either the top section above the links or in the bottom section below the logos. Any additional information provided should be concise and easy to understand.\n\n<DoubleDoDontCaution>\n <DoDontCaution\n imageSrc={footerFig12}\n imageAlt=\"A footer component showing concise and easily understandable information. It reads ‘The ICDS is maintained by the Design Practice Team. If you’ve got a question or want to feedback, please get in touch.’\"\n state=\"good\"\n caption=\"Concise and easily understandable information shown in the footer.\"\n />\n <DoDontCaution\n imageSrc={footerFig13}\n imageAlt=\"A footer component showing overly lengthy information. It reads ‘The ICDS is maintained by the Design Practice Team. If you’ve got a question or want to feedback, please get in touch. The best way to contact the team would be through Microsoft Teams between the hours of 9am to 5pm, Monday to Friday. We will strive to get back to you as soon as possible.’\"\n state=\"bad\"\n caption=\"The information included in the footer is too long.\"\n />\n</DoubleDoDontCaution>\n",
+ "contents": "\r\nimport { IcFooter, IcFooterLink } from \"@ukic/react\";\r\nimport footerFig1 from \"./images/fig-1-colours.png\";\r\nimport footerFig2 from \"./images/fig-2-not-full-width.png\";\r\nimport footerFig3 from \"./images/fig-3-below-the-fold.png\";\r\nimport footerFig4 from \"./images/fig-4-above-the-fold.png\";\r\nimport footerFig5 from \"./images/fig-5-app-drawer-layouts.png\";\r\nimport footerFig6 from \"./images/fig-6-left-aligned.png\";\r\nimport footerFig7 from \"./images/fig-7-centred.png\";\r\nimport footerFig8 from \"./images/fig-8-full-width.png\";\r\nimport footerFig9 from \"./images/fig-9-single-line-links.png\";\r\nimport footerFig10 from \"./images/fig-10-grouped-links.png\";\r\nimport footerFig11 from \"./images/fig-11-desktop-logos.png\";\r\nimport footerFig12 from \"./images/fig-12-correct-copy.png\";\r\nimport footerFig13 from \"./images/fig-13-incorrect-copy.png\";\r\n\r\n## Introduction\r\n\r\nAn example of the footer component.\r\n\r\n<ComponentPreview>\r\n <IcFooter\r\n description=\"The UK Intelligence Community Design System (ICDS) is a joint project by MI6, GCHQ, MI5, and partners.\"\r\n caption=\"All content is available under the Open Government Licence v3.0, except source code and code examples which are available under the MIT Licence.\"\r\n >\r\n <IcFooterLink slot=\"link\" href=\"#\">\r\n Accessibility\r\n </IcFooterLink>\r\n <IcFooterLink slot=\"link\" href=\"#\">\r\n Styles\r\n </IcFooterLink>\r\n <IcFooterLink slot=\"link\" href=\"#\">\r\n Components\r\n </IcFooterLink>\r\n <IcFooterLink slot=\"link\" href=\"#\">\r\n Patterns\r\n </IcFooterLink>\r\n </IcFooter>\r\n</ComponentPreview>\r\n\r\n## When to use\r\n\r\nThere are two types of footer that display links in different ways. These are single line footers and grouped footers.\r\n\r\nUse a footer on every page so that the required legal information is displayed.\r\n\r\n### Single line\r\n\r\nUse single line footers when eight or fewer links are required and there is no need to split those links into groups.\r\n\r\n### Grouped\r\n\r\nUse grouped footers when more than eight links are required or the links can be grouped meaningfully.\r\n\r\n## Colour\r\n\r\nThe background colour of the footer reflects the chosen theme colour for the application. Set the global theme colour token to change the footer’s appearance.\r\n\r\n<DoDontCaution\r\n imageSrc={footerFig1}\r\n imageAlt=\"A footer using automatically generated secondary and tertiary shades of the app’s theme colour as the background colours for the footer’s link section and logo section respectively.\"\r\n state=\"good\"\r\n caption=\"Change the global theme colour token to change the footer’s appearance.\"\r\n/>\r\n\r\n## Sizing\r\n\r\nThe footer always extends to the full width of the viewport.\r\n\r\nDon’t embed the footer within another container that is not full width.\r\n\r\n<DoDontCaution\r\n imageSrc={footerFig2}\r\n imageAlt=\"A footer positioned centred between two other content areas that sit to the left and right of the footer.\"\r\n state=\"bad\"\r\n caption=\"Don’t place the footer within other content. Always make sure it's the full width of the viewport.\"\r\n/>\r\n\r\n## Layout and placement\r\n\r\n### Placement\r\n\r\nAlways place the footer at the bottom of the page and below the fold, meaning users should scroll to see it.\r\n\r\n<DoDontCaution\r\n imageSrc={footerFig3}\r\n imageAlt=\"A footer component placed below the fold within a page design.\"\r\n state=\"good\"\r\n caption=\"Footer placed correctly below the fold on a page.\"\r\n/>\r\n\r\n<DoDontCaution\r\n imageSrc={footerFig4}\r\n imageAlt=\"A footer component placed above the fold within a page design.\"\r\n state=\"bad\"\r\n caption=\"Footer placed incorrectly above the fold.\"\r\n/>\r\n\r\nPosition the footer adjacent to the [side navigation](/components/side-navigation) if your app uses one.\r\n\r\n<DoDontCaution\r\n imageSrc={footerFig5}\r\n imageAlt=\"An example app showing a side navigation component with a footer component positioned on the right and adjacent to the side navigation.\"\r\n state=\"good\"\r\n caption=\"Place the footer adjacent to the side navigation.\"\r\n/>\r\n\r\n### Alignment\r\n\r\nThe footer can be set to left-aligned, centred or full width.\r\n\r\nUse left-aligned to align footer content to the left of the main body of the page. This works well with apps that use the side navigation.\r\n\r\n<DoDontCaution\r\n imageSrc={footerFig6}\r\n imageAlt=\"A footer component with its content left aligned.\"\r\n state=\"good\"\r\n caption=\"A footer with its content left aligned.\"\r\n/>\r\n\r\nUse centred alignment to centre footer content to the main body of the page.\r\n\r\n<DoDontCaution\r\n imageSrc={footerFig7}\r\n imageAlt=\"A footer component with its content centre aligned.\"\r\n state=\"good\"\r\n caption=\"A footer with its content centre aligned.\"\r\n/>\r\n\r\nUse full-width to position footer content so that it spans the full width of the viewport.\r\n\r\n<DoDontCaution\r\n imageSrc={footerFig8}\r\n imageAlt=\"A footer component with its content aligned to the full width of the viewport.\"\r\n state=\"good\"\r\n caption=\"A footer with its content aligned to the full width of the viewport.\"\r\n/>\r\n\r\n## Content\r\n\r\n### Links\r\n\r\nFooters provide a set of links that can be accessed from every page within an app. Specify either single links or grouped links when using a footer.\r\n\r\nGive link groups clear labels when using grouped links.\r\n\r\nOrder the links so that the most important links appear at the top left of the links section.\r\n\r\n<DoDontCaution\r\n imageSrc={footerFig9}\r\n imageAlt=\"A footer showing a single set of links. The four links include ‘Accessibility statement’, ‘Privacy’, ‘Cookies’ and ‘Contribute’.\"\r\n state=\"good\"\r\n caption=\"A footer with a single set of links.\"\r\n/>\r\n\r\n<DoDontCaution\r\n imageSrc={footerFig10}\r\n imageAlt=\"A footer showing two groups of links. The two link groups are titled ‘Services’ and ‘Policy’ and each group includes a set of links.\"\r\n state=\"good\"\r\n caption=\"A footer with grouped links.\"\r\n/>\r\n\r\n### Logos\r\n\r\nFooters can include a number of different logos. The logos appear at the bottom of the footer. Choose the correct variant (i.e., light or dark) of your logo to match the selected theme colour background.\r\n\r\n<DoDontCaution\r\n imageSrc={footerFig11}\r\n imageAlt=\"A footer displaying four different logos on a large screen.\"\r\n state=\"good\"\r\n caption=\"A footer displaying four different logos on a large screen.\"\r\n/>\r\n\r\n### Additional information\r\n\r\nProvide additional information in either the top section above the links or in the bottom section below the logos. Any additional information provided should be concise and easy to understand.\r\n\r\n<DoubleDoDontCaution>\r\n <DoDontCaution\r\n imageSrc={footerFig12}\r\n imageAlt=\"A footer component showing concise and easily understandable information. It reads ‘The ICDS is maintained by the Design Practice Team. If you’ve got a question or want to feedback, please get in touch.’\"\r\n state=\"good\"\r\n caption=\"Concise and easily understandable information shown in the footer.\"\r\n />\r\n <DoDontCaution\r\n imageSrc={footerFig13}\r\n imageAlt=\"A footer component showing overly lengthy information. It reads ‘The ICDS is maintained by the Design Practice Team. If you’ve got a question or want to feedback, please get in touch. The best way to contact the team would be through Microsoft Teams between the hours of 9am to 5pm, Monday to Friday. We will strive to get back to you as soon as possible.’\"\r\n state=\"bad\"\r\n caption=\"The information included in the footer is too long.\"\r\n />\r\n</DoubleDoDontCaution>\r\n",
"path": "/components/footer",
"navPriority": 18,
"date": "2023-02-03",
@@ -2329,11 +2329,11 @@
}
],
"meta": {
- "relativePath": "components/footer/guidance.mdx",
- "createdAt": "2024-11-06T10:27:49.404Z",
- "lastModified": "2024-11-06T10:19:00.032Z",
- "size": 7787,
- "formattedSize": "7.6 KB"
+ "relativePath": "components\\footer\\guidance.mdx",
+ "createdAt": "2024-12-04T13:23:54.101Z",
+ "lastModified": "2024-12-04T13:23:54.101Z",
+ "size": 8000,
+ "formattedSize": "7.8 KB"
}
},
{
@@ -2360,16 +2360,16 @@
}
],
"meta": {
- "relativePath": "components/hero/accessibility.mdx",
- "createdAt": "2024-11-06T10:27:49.408Z",
- "lastModified": "2024-11-06T10:19:00.048Z",
+ "relativePath": "components\\hero\\accessibility.mdx",
+ "createdAt": "2024-11-05T11:57:52.082Z",
+ "lastModified": "2024-11-05T11:57:52.082Z",
"size": 2014,
"formattedSize": "2.0 KB"
}
},
{
"id": "components\\hero\\codex",
- "contents": "\nimport { IcHero, IcButton, IcSearchBar, IcCard } from \"@ukic/react\";\n\n## Component demo\n\nexport const snippets = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-hero\n heading=\"Everything I brew, I brew it for you\"\n subheading=\"This news is hot off the French press.\"\n>\n <ic-button variant=\"primary\" slot=\"interaction\">Explore</ic-button>\n <ic-button variant=\"secondary\" slot=\"interaction\">\n Check out our new drinks\n </ic-button>\n</ic-hero>`,\n long: `ic-hero {\n height: fit-content;\n }\n </style>\n <body>\n {shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcHero\n heading=\"Everything I brew, I brew it for you\"\n subheading=\"This news is hot off the French press.\"\n>\n <IcButton variant=\"primary\" slot=\"interaction\">\n Explore\n </IcButton>\n <IcButton variant=\"secondary\" slot=\"interaction\">\n Check out our new drinks\n </IcButton>\n</IcHero>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `{shortCode}`,\n },\n {\n language: \"Javascript\",\n snippet: `{shortCode}`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={snippets}>\n <IcHero\n heading=\"Everything I brew, I brew it for you\"\n subheading=\"This news is hot off the French press.\"\n >\n <IcButton variant=\"primary\" slot=\"interaction\">\n Explore\n </IcButton>\n <IcButton variant=\"secondary\" slot=\"interaction\">\n Check out our new drinks\n </IcButton>\n </IcHero>\n</ComponentPreview>\n\n## Hero details\n\n<ComponentDetails component=\"ic-hero\" />\n\n## Variants\n\n### Centre aligned\n\nexport const snippetsCentre = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-hero\n heading=\"Everything I brew, I brew it for you\"\n subheading=\"This news is hot off the French press.\"\n aligned=\"center\"\n>\n <ic-button variant=\"primary\" slot=\"interaction\">Explore</ic-button>\n <ic-button variant=\"secondary\" slot=\"interaction\">\n Check out our new drinks\n </ic-button>\n</ic-hero>`,\n long: `ic-hero {\n height: fit-content;\n }\n </style>\n <body>\n {shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcHero\n heading=\"Everything I brew, I brew it for you\"\n subheading=\"This news is hot off the French press.\"\n aligned=\"center\"\n class={classes.hero}\n>\n <IcButton variant=\"primary\" slot=\"interaction\">\n Explore\n </IcButton>\n <IcButton variant=\"secondary\" slot=\"interaction\">\n Check out our new drinks\n </IcButton>\n</IcHero>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n hero: {\n height: \"fit-content\",\n },\n });\n const classes = useStyles();\n return (\n {shortCode}\n )`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n hero: {\n height: \"fit-content\",\n },\n });\n const classes = useStyles();\n return (\n {shortCode}\n )`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={snippetsCentre}>\n <IcHero\n aligned=\"center\"\n heading=\"Everything I brew, I brew it for you\"\n subheading=\"This news is hot off the French press.\"\n >\n <IcButton variant=\"primary\" slot=\"interaction\">\n Explore\n </IcButton>\n <IcButton variant=\"secondary\" slot=\"interaction\">\n Check out our new drinks\n </IcButton>\n </IcHero>\n</ComponentPreview>\n\n### Content centre aligned\n\nexport const snippetsContentCentre = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-hero\n heading=\"Everything I brew, I brew it for you\"\n subheading=\"This news is hot off the French press.\"\n aligned=\"center\"\n content-aligned=\"center\"\n>\n <ic-button variant=\"primary\" slot=\"interaction\">Explore</ic-button>\n <ic-button variant=\"secondary\" slot=\"interaction\">\n Check out our new drinks\n </ic-button>\n</ic-hero>`,\n long: `ic-hero {\n height: fit-content;\n }\n </style>\n <body>\n {shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcHero\n heading=\"Everything I brew, I brew it for you\"\n subheading=\"This news is hot off the French press.\"\n aligned=\"center\"\n contentAligned=\"center\"\n class={classes.hero}\n>\n <IcButton variant=\"primary\" slot=\"interaction\">\n Explore\n </IcButton>\n <IcButton variant=\"secondary\" slot=\"interaction\">\n Check out our new drinks\n </IcButton>\n</IcHero>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n hero: {\n height: \"fit-content\",\n },\n });\n const classes = useStyles();\n return (\n {shortCode}\n )`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n hero: {\n height: \"fit-content\",\n },\n });\n const classes = useStyles();\n return (\n {shortCode}\n )`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={snippetsContentCentre}>\n <IcHero\n heading=\"Everything I brew, I brew it for you\"\n subheading=\"This news is hot off the French press.\"\n aligned=\"center\"\n contentAligned=\"center\"\n >\n <IcButton variant=\"primary\" slot=\"interaction\">\n Explore\n </IcButton>\n <IcButton variant=\"secondary\" slot=\"interaction\">\n Check out our new drinks\n </IcButton>\n </IcHero>\n</ComponentPreview>\n\n### Size small\n\nexport const snippetsSmall = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-hero\n heading=\"New coffee launches 14 September 2022\"\n subheading=\"Brand new flavours now available! Irresistible. Caramel. Decadence. Sugary.\"\n size=\"small\"\n>\n <ic-button variant=\"primary\" slot=\"interaction\" size=\"small\">Order now</ic-button>\n <ic-button variant=\"secondary\" slot=\"interaction\" size=\"small\">Submit new flavour</ic-button>\n</ic-hero>`,\n long: `ic-hero {\n height: fit-content;\n }\n </style>\n <body>\n {shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcHero\n heading=\"New coffee launches 14 September 2022\"\n subheading=\"Brand new flavours now available! Irresistible. Caramel. Decadence. Sugary.\"\n size=\"small\"\n class={classes.hero}\n>\n <IcButton variant=\"primary\" slot=\"interaction\" size=\"small\">\n Order now\n </IcButton>\n <IcButton variant=\"secondary\" slot=\"interaction\" size=\"small\">\n Submit new flavour\n </IcButton>\n</IcHero>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n hero: {\n height: \"fit-content\",\n },\n });\n const classes = useStyles();\n return (\n {shortCode}\n )`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n hero: {\n height: \"fit-content\",\n },\n });\n const classes = useStyles();\n return (\n {shortCode}\n )`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={snippetsSmall}>\n <IcHero\n heading=\"New coffee launches 14 September 2022\"\n subheading=\"Brand new flavours now available! Irresistible. Caramel. Decadence. Sugary.\"\n size=\"small\"\n >\n <IcButton variant=\"primary\" slot=\"interaction\" size=\"small\">\n Order now\n </IcButton>\n <IcButton variant=\"secondary\" slot=\"interaction\" size=\"small\">\n Submit new flavour\n </IcButton>\n </IcHero>\n</ComponentPreview>\n\n### Secondary heading and search\n\nexport const snippetsSecondHeadingSearch = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-hero\n heading=\"Everything I brew, I brew it for you\"\n subheading=\"This news is hot off the French press.\"\n secondary-heading=\"The classics\"\n secondary-subheading=\"Try our original flavours.\"\n>\n <ic-search-bar\n slot=\"interaction\"\n label=\"Search for coffee\"\n hide-label=\"true\"\n ></ic-search-bar>\n</ic-hero>`,\n long: `ic-hero {\n height: fit-content;\n }\n </style>\n <body>\n {shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcHero\n heading=\"Everything I brew, I brew it for you\"\n subheading=\"This news is hot off the French press.\"\n secondaryHeading=\"The classics\" \n secondarySubheading=\"Try our original flavours.\"\n class={classes.hero}\n>\n <IcSearchBar slot=\"interaction\" label=\"Search for coffee\" hideLabel/>\n</IcHero>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n hero: {\n height: \"fit-content\",\n },\n });\n const classes = useStyles();\n return (\n {shortCode}\n )`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n hero: {\n height: \"fit-content\",\n },\n });\n const classes = useStyles();\n return (\n {shortCode}\n )`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={snippetsSecondHeadingSearch}>\n <IcHero\n heading=\"Everything I brew, I brew it for you\"\n subheading=\"This news is hot off the French press.\"\n secondaryHeading=\"The classics\"\n secondarySubheading=\"Try our original flavours.\"\n >\n <IcSearchBar slot=\"interaction\" label=\"Search for coffee\" hideLabel />\n </IcHero>\n</ComponentPreview>\n\n### Card right content\n\nexport const snippetsCard = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-hero \n heading=\"Everything I brew, I brew it for you\" \n subheading=\"This news is hot off the French press.\" \n card-heading=\"Out now\" \n card-message=\"Try our new strawberry infused tea.\" \n aligned=\"full-width\"\n>\n <ic-button variant=\"primary\" slot=\"interaction\">Explore</ic-button>\n <ic-button variant=\"secondary\" slot=\"interaction\">Check out our new drinks</ic-button>\n <ic-card\n heading=\"Out now\"\n message=\"Try our new strawberry infused tea.\"\n slot=\"secondary\"\n class=\"hero-card\"\n ></ic-card>\n</ic-hero>\n `,\n long: `.hero-card {\n color: var(--ic-theme-text);\n width: 18.75rem;\n }\n ic-hero {\n height: fit-content;\n }\n </style>\n <body>\n {shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcHero \n heading=\"Everything I brew, I brew it for you\" \n subheading=\"This news is hot off the French press.\" \n cardHeading=\"Out now\" \n cardMessage=\"Try our new strawberry infused tea.\" \n aligned=\"full-width\"\n class={classes.hero}\n>\n <IcButton variant=\"primary\" slot=\"interaction\">Explore</IcButton>\n <IcButton variant=\"secondary\" slot=\"interaction\">Check out our new drinks</IcButton>\n <IcCard\n heading=\"Out now\"\n message=\"Try our new strawberry infused tea.\"\n slot=\"secondary\"\n className={classes.heroCard}\n />\n</IcHero>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n heroCard: {\n color: \"var(--ic-theme-text)\",\n width: \"18.75rem\",\n },\n hero: {\n height: \"fit-content\",\n },\n});\nconst classes = useStyles();\nreturn (\n {shortCode}\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n heroCard: {\n color: \"var(--ic-theme-text)\",\n width: \"18.75rem\",\n },\n hero: {\n height: \"fit-content\",\n },\n});\nconst classes = useStyles();\nreturn (\n {shortCode}\n)`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={snippetsCard}>\n <IcHero\n heading=\"Everything I brew, I brew it for you\"\n subheading=\"This news is hot off the French press.\"\n cardHeading=\"Out now\"\n cardMessage=\"Try our new strawberry infused tea.\"\n aligned=\"full-width\"\n >\n <IcButton variant=\"primary\" slot=\"interaction\">\n Explore\n </IcButton>\n <IcButton variant=\"secondary\" slot=\"interaction\">\n Check out our new drinks\n </IcButton>\n <IcCard\n heading=\"Out now\"\n message=\"Try our new strawberry infused tea.\"\n slot=\"secondary\"\n class=\"hero-card\"\n style={{\n color: \"var--ic-theme-text\",\n width: \"18.75rem\",\n }}\n />\n </IcHero>\n</ComponentPreview>\n\n### Image right content\n\nexport const snippetsImage = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-hero\n heading=\"Everything I brew, I brew it for you\"\n subheading=\"This news is hot off the French press.\"\n aligned=\"full-width\"\n>\n <ic-button variant=\"primary\" slot=\"interaction\">Explore</ic-button>\n <ic-button variant=\"secondary\" slot=\"interaction\">Check out our new drinks</ic-button>\n <svg\n slot=\"secondary\"\n class=\"card-image\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 1600 900\"\n >\n <rect fill=\"#ff7700\" width=\"1600\" height=\"900\" />\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-hero>`,\n long: `.card-image {\n width: 18.75rem;\n }\n ic-hero {\n height: fit-content;\n }\n</style>\n<body>\n {shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcHero\n heading=\"Everything I brew, I brew it for you\"\n subheading=\"This news is hot off the French press.\"\n aligned=\"full-width\"\n class={classes.hero}\n >\n <IcButton variant=\"primary\" slot=\"interaction\">Explore</IcButton>\n <IcButton variant=\"secondary\" slot=\"interaction\">Check out our new drinks</IcButton>\n <SlottedSVG\n slot=\"secondary\"\n className={classes.cardImage}\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 1600 900\"\n >\n <rect fill=\"#ff7700\" width=\"1600\" height=\"900\" />\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 </SlottedSVG>\n </IcHero>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n cardImage: {\n width: \"18.75rem\",\n },\n hero: {\n height: \"fit-content\",\n },\n});\nconst classes = useStyles();\nreturn (\n {shortCode}\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n cardImage: {\n width: \"18.75rem\",\n },\n hero: {\n height: \"fit-content\",\n },\n});\nconst classes = useStyles();\nreturn (\n {shortCode}\n)`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={snippetsImage}>\n <IcHero\n heading=\"Everything I brew, I brew it for you\"\n subheading=\"This news is hot off the French press.\"\n aligned=\"full-width\"\n >\n <IcButton variant=\"primary\" slot=\"interaction\">\n Explore\n </IcButton>\n <IcButton variant=\"secondary\" slot=\"interaction\">\n Check out our new drinks\n </IcButton>\n <svg\n slot=\"secondary\"\n style={{\n width: \"18.75rem\",\n }}\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 1600 900\"\n >\n <rect fill=\"#ff7700\" width=\"1600\" height=\"900\" />\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 </IcHero>\n</ComponentPreview>\n",
+ "contents": "\r\nimport { IcHero, IcButton, IcSearchBar, IcCard } from \"@ukic/react\";\r\n\r\n## Component demo\r\n\r\nexport const snippets = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-hero\r\n heading=\"Everything I brew, I brew it for you\"\r\n subheading=\"This news is hot off the French press.\"\r\n>\r\n <ic-button variant=\"primary\" slot=\"interaction\">Explore</ic-button>\r\n <ic-button variant=\"secondary\" slot=\"interaction\">\r\n Check out our new drinks\r\n </ic-button>\r\n</ic-hero>`,\r\n long: `ic-hero {\r\n height: fit-content;\r\n }\r\n </style>\r\n <body>\r\n {shortCode}`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcHero\r\n heading=\"Everything I brew, I brew it for you\"\r\n subheading=\"This news is hot off the French press.\"\r\n>\r\n <IcButton variant=\"primary\" slot=\"interaction\">\r\n Explore\r\n </IcButton>\r\n <IcButton variant=\"secondary\" slot=\"interaction\">\r\n Check out our new drinks\r\n </IcButton>\r\n</IcHero>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `{shortCode}`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `{shortCode}`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview snippets={snippets}>\r\n <IcHero\r\n heading=\"Everything I brew, I brew it for you\"\r\n subheading=\"This news is hot off the French press.\"\r\n >\r\n <IcButton variant=\"primary\" slot=\"interaction\">\r\n Explore\r\n </IcButton>\r\n <IcButton variant=\"secondary\" slot=\"interaction\">\r\n Check out our new drinks\r\n </IcButton>\r\n </IcHero>\r\n</ComponentPreview>\r\n\r\n## Hero details\r\n\r\n<ComponentDetails component=\"ic-hero\" />\r\n\r\n## Variants\r\n\r\n### Centre aligned\r\n\r\nexport const snippetsCentre = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-hero\r\n heading=\"Everything I brew, I brew it for you\"\r\n subheading=\"This news is hot off the French press.\"\r\n aligned=\"center\"\r\n>\r\n <ic-button variant=\"primary\" slot=\"interaction\">Explore</ic-button>\r\n <ic-button variant=\"secondary\" slot=\"interaction\">\r\n Check out our new drinks\r\n </ic-button>\r\n</ic-hero>`,\r\n long: `ic-hero {\r\n height: fit-content;\r\n }\r\n </style>\r\n <body>\r\n {shortCode}`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcHero\r\n heading=\"Everything I brew, I brew it for you\"\r\n subheading=\"This news is hot off the French press.\"\r\n aligned=\"center\"\r\n class={classes.hero}\r\n>\r\n <IcButton variant=\"primary\" slot=\"interaction\">\r\n Explore\r\n </IcButton>\r\n <IcButton variant=\"secondary\" slot=\"interaction\">\r\n Check out our new drinks\r\n </IcButton>\r\n</IcHero>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `const useStyles = createUseStyles({\r\n hero: {\r\n height: \"fit-content\",\r\n },\r\n });\r\n const classes = useStyles();\r\n return (\r\n {shortCode}\r\n )`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `const useStyles = createUseStyles({\r\n hero: {\r\n height: \"fit-content\",\r\n },\r\n });\r\n const classes = useStyles();\r\n return (\r\n {shortCode}\r\n )`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview snippets={snippetsCentre}>\r\n <IcHero\r\n aligned=\"center\"\r\n heading=\"Everything I brew, I brew it for you\"\r\n subheading=\"This news is hot off the French press.\"\r\n >\r\n <IcButton variant=\"primary\" slot=\"interaction\">\r\n Explore\r\n </IcButton>\r\n <IcButton variant=\"secondary\" slot=\"interaction\">\r\n Check out our new drinks\r\n </IcButton>\r\n </IcHero>\r\n</ComponentPreview>\r\n\r\n### Content centre aligned\r\n\r\nexport const snippetsContentCentre = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-hero\r\n heading=\"Everything I brew, I brew it for you\"\r\n subheading=\"This news is hot off the French press.\"\r\n aligned=\"center\"\r\n content-aligned=\"center\"\r\n>\r\n <ic-button variant=\"primary\" slot=\"interaction\">Explore</ic-button>\r\n <ic-button variant=\"secondary\" slot=\"interaction\">\r\n Check out our new drinks\r\n </ic-button>\r\n</ic-hero>`,\r\n long: `ic-hero {\r\n height: fit-content;\r\n }\r\n </style>\r\n <body>\r\n {shortCode}`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcHero\r\n heading=\"Everything I brew, I brew it for you\"\r\n subheading=\"This news is hot off the French press.\"\r\n aligned=\"center\"\r\n contentAligned=\"center\"\r\n class={classes.hero}\r\n>\r\n <IcButton variant=\"primary\" slot=\"interaction\">\r\n Explore\r\n </IcButton>\r\n <IcButton variant=\"secondary\" slot=\"interaction\">\r\n Check out our new drinks\r\n </IcButton>\r\n</IcHero>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `const useStyles = createUseStyles({\r\n hero: {\r\n height: \"fit-content\",\r\n },\r\n });\r\n const classes = useStyles();\r\n return (\r\n {shortCode}\r\n )`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `const useStyles = createUseStyles({\r\n hero: {\r\n height: \"fit-content\",\r\n },\r\n });\r\n const classes = useStyles();\r\n return (\r\n {shortCode}\r\n )`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview snippets={snippetsContentCentre}>\r\n <IcHero\r\n heading=\"Everything I brew, I brew it for you\"\r\n subheading=\"This news is hot off the French press.\"\r\n aligned=\"center\"\r\n contentAligned=\"center\"\r\n >\r\n <IcButton variant=\"primary\" slot=\"interaction\">\r\n Explore\r\n </IcButton>\r\n <IcButton variant=\"secondary\" slot=\"interaction\">\r\n Check out our new drinks\r\n </IcButton>\r\n </IcHero>\r\n</ComponentPreview>\r\n\r\n### Size small\r\n\r\nexport const snippetsSmall = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-hero\r\n heading=\"New coffee launches 14 September 2022\"\r\n subheading=\"Brand new flavours now available! Irresistible. Caramel. Decadence. Sugary.\"\r\n size=\"small\"\r\n>\r\n <ic-button variant=\"primary\" slot=\"interaction\" size=\"small\">Order now</ic-button>\r\n <ic-button variant=\"secondary\" slot=\"interaction\" size=\"small\">Submit new flavour</ic-button>\r\n</ic-hero>`,\r\n long: `ic-hero {\r\n height: fit-content;\r\n }\r\n </style>\r\n <body>\r\n {shortCode}`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcHero\r\n heading=\"New coffee launches 14 September 2022\"\r\n subheading=\"Brand new flavours now available! Irresistible. Caramel. Decadence. Sugary.\"\r\n size=\"small\"\r\n class={classes.hero}\r\n>\r\n <IcButton variant=\"primary\" slot=\"interaction\" size=\"small\">\r\n Order now\r\n </IcButton>\r\n <IcButton variant=\"secondary\" slot=\"interaction\" size=\"small\">\r\n Submit new flavour\r\n </IcButton>\r\n</IcHero>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `const useStyles = createUseStyles({\r\n hero: {\r\n height: \"fit-content\",\r\n },\r\n });\r\n const classes = useStyles();\r\n return (\r\n {shortCode}\r\n )`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `const useStyles = createUseStyles({\r\n hero: {\r\n height: \"fit-content\",\r\n },\r\n });\r\n const classes = useStyles();\r\n return (\r\n {shortCode}\r\n )`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview snippets={snippetsSmall}>\r\n <IcHero\r\n heading=\"New coffee launches 14 September 2022\"\r\n subheading=\"Brand new flavours now available! Irresistible. Caramel. Decadence. Sugary.\"\r\n size=\"small\"\r\n >\r\n <IcButton variant=\"primary\" slot=\"interaction\" size=\"small\">\r\n Order now\r\n </IcButton>\r\n <IcButton variant=\"secondary\" slot=\"interaction\" size=\"small\">\r\n Submit new flavour\r\n </IcButton>\r\n </IcHero>\r\n</ComponentPreview>\r\n\r\n### Secondary heading and search\r\n\r\nexport const snippetsSecondHeadingSearch = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-hero\r\n heading=\"Everything I brew, I brew it for you\"\r\n subheading=\"This news is hot off the French press.\"\r\n secondary-heading=\"The classics\"\r\n secondary-subheading=\"Try our original flavours.\"\r\n>\r\n <ic-search-bar\r\n slot=\"interaction\"\r\n label=\"Search for coffee\"\r\n hide-label=\"true\"\r\n ></ic-search-bar>\r\n</ic-hero>`,\r\n long: `ic-hero {\r\n height: fit-content;\r\n }\r\n </style>\r\n <body>\r\n {shortCode}`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcHero\r\n heading=\"Everything I brew, I brew it for you\"\r\n subheading=\"This news is hot off the French press.\"\r\n secondaryHeading=\"The classics\" \r\n secondarySubheading=\"Try our original flavours.\"\r\n class={classes.hero}\r\n>\r\n <IcSearchBar slot=\"interaction\" label=\"Search for coffee\" hideLabel/>\r\n</IcHero>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `const useStyles = createUseStyles({\r\n hero: {\r\n height: \"fit-content\",\r\n },\r\n });\r\n const classes = useStyles();\r\n return (\r\n {shortCode}\r\n )`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `const useStyles = createUseStyles({\r\n hero: {\r\n height: \"fit-content\",\r\n },\r\n });\r\n const classes = useStyles();\r\n return (\r\n {shortCode}\r\n )`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview snippets={snippetsSecondHeadingSearch}>\r\n <IcHero\r\n heading=\"Everything I brew, I brew it for you\"\r\n subheading=\"This news is hot off the French press.\"\r\n secondaryHeading=\"The classics\"\r\n secondarySubheading=\"Try our original flavours.\"\r\n >\r\n <IcSearchBar slot=\"interaction\" label=\"Search for coffee\" hideLabel />\r\n </IcHero>\r\n</ComponentPreview>\r\n\r\n### Card right content\r\n\r\nexport const snippetsCard = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-hero \r\n heading=\"Everything I brew, I brew it for you\" \r\n subheading=\"This news is hot off the French press.\" \r\n card-heading=\"Out now\" \r\n card-message=\"Try our new strawberry infused tea.\" \r\n aligned=\"full-width\"\r\n>\r\n <ic-button variant=\"primary\" slot=\"interaction\">Explore</ic-button>\r\n <ic-button variant=\"secondary\" slot=\"interaction\">Check out our new drinks</ic-button>\r\n <ic-card\r\n heading=\"Out now\"\r\n message=\"Try our new strawberry infused tea.\"\r\n slot=\"secondary\"\r\n class=\"hero-card\"\r\n ></ic-card>\r\n</ic-hero>\r\n `,\r\n long: `.hero-card {\r\n color: var(--ic-theme-text);\r\n width: 18.75rem;\r\n }\r\n ic-hero {\r\n height: fit-content;\r\n }\r\n </style>\r\n <body>\r\n {shortCode}`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcHero \r\n heading=\"Everything I brew, I brew it for you\" \r\n subheading=\"This news is hot off the French press.\" \r\n cardHeading=\"Out now\" \r\n cardMessage=\"Try our new strawberry infused tea.\" \r\n aligned=\"full-width\"\r\n class={classes.hero}\r\n>\r\n <IcButton variant=\"primary\" slot=\"interaction\">Explore</IcButton>\r\n <IcButton variant=\"secondary\" slot=\"interaction\">Check out our new drinks</IcButton>\r\n <IcCard\r\n heading=\"Out now\"\r\n message=\"Try our new strawberry infused tea.\"\r\n slot=\"secondary\"\r\n className={classes.heroCard}\r\n />\r\n</IcHero>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `const useStyles = createUseStyles({\r\n heroCard: {\r\n color: \"var(--ic-theme-text)\",\r\n width: \"18.75rem\",\r\n },\r\n hero: {\r\n height: \"fit-content\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nreturn (\r\n {shortCode}\r\n)`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `const useStyles = createUseStyles({\r\n heroCard: {\r\n color: \"var(--ic-theme-text)\",\r\n width: \"18.75rem\",\r\n },\r\n hero: {\r\n height: \"fit-content\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nreturn (\r\n {shortCode}\r\n)`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview snippets={snippetsCard}>\r\n <IcHero\r\n heading=\"Everything I brew, I brew it for you\"\r\n subheading=\"This news is hot off the French press.\"\r\n cardHeading=\"Out now\"\r\n cardMessage=\"Try our new strawberry infused tea.\"\r\n aligned=\"full-width\"\r\n >\r\n <IcButton variant=\"primary\" slot=\"interaction\">\r\n Explore\r\n </IcButton>\r\n <IcButton variant=\"secondary\" slot=\"interaction\">\r\n Check out our new drinks\r\n </IcButton>\r\n <IcCard\r\n heading=\"Out now\"\r\n message=\"Try our new strawberry infused tea.\"\r\n slot=\"secondary\"\r\n class=\"hero-card\"\r\n style={{\r\n color: \"var--ic-theme-text\",\r\n width: \"18.75rem\",\r\n }}\r\n />\r\n </IcHero>\r\n</ComponentPreview>\r\n\r\n### Image right content\r\n\r\nexport const snippetsImage = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-hero\r\n heading=\"Everything I brew, I brew it for you\"\r\n subheading=\"This news is hot off the French press.\"\r\n aligned=\"full-width\"\r\n>\r\n <ic-button variant=\"primary\" slot=\"interaction\">Explore</ic-button>\r\n <ic-button variant=\"secondary\" slot=\"interaction\">Check out our new drinks</ic-button>\r\n <svg\r\n slot=\"secondary\"\r\n class=\"card-image\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 1600 900\"\r\n >\r\n <rect fill=\"#ff7700\" width=\"1600\" height=\"900\" />\r\n <polygon fill=\"#cc0000\" points=\"957 450 539 900 1396 900\" />\r\n <polygon fill=\"#aa0000\" points=\"957 450 872.9 900 1396 900\" />\r\n <polygon fill=\"#c50022\" points=\"-60 900 398 662 816 900\" />\r\n <polygon fill=\"#a3001b\" points=\"337 900 398 662 816 900\" />\r\n <polygon fill=\"#be0044\" points=\"1203 546 1552 900 876 900\" />\r\n <polygon fill=\"#9c0036\" points=\"1203 546 1552 900 1162 900\" />\r\n <polygon fill=\"#b80066\" points=\"641 695 886 900 367 900\" />\r\n <polygon fill=\"#960052\" points=\"587 900 641 695 886 900\" />\r\n <polygon fill=\"#b10088\" points=\"1710 900 1401 632 1096 900\" />\r\n <polygon fill=\"#8f006d\" points=\"1710 900 1401 632 1365 900\" />\r\n <polygon fill=\"#aa00aa\" points=\"1210 900 971 687 725 900\" />\r\n <polygon fill=\"#880088\" points=\"943 900 1210 900 971 687\" />\r\n </svg>\r\n</ic-hero>`,\r\n long: `.card-image {\r\n width: 18.75rem;\r\n }\r\n ic-hero {\r\n height: fit-content;\r\n }\r\n</style>\r\n<body>\r\n {shortCode}`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcHero\r\n heading=\"Everything I brew, I brew it for you\"\r\n subheading=\"This news is hot off the French press.\"\r\n aligned=\"full-width\"\r\n class={classes.hero}\r\n >\r\n <IcButton variant=\"primary\" slot=\"interaction\">Explore</IcButton>\r\n <IcButton variant=\"secondary\" slot=\"interaction\">Check out our new drinks</IcButton>\r\n <SlottedSVG\r\n slot=\"secondary\"\r\n className={classes.cardImage}\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 1600 900\"\r\n >\r\n <rect fill=\"#ff7700\" width=\"1600\" height=\"900\" />\r\n <polygon fill=\"#cc0000\" points=\"957 450 539 900 1396 900\" />\r\n <polygon fill=\"#aa0000\" points=\"957 450 872.9 900 1396 900\" />\r\n <polygon fill=\"#c50022\" points=\"-60 900 398 662 816 900\" />\r\n <polygon fill=\"#a3001b\" points=\"337 900 398 662 816 900\" />\r\n <polygon fill=\"#be0044\" points=\"1203 546 1552 900 876 900\" />\r\n <polygon fill=\"#9c0036\" points=\"1203 546 1552 900 1162 900\" />\r\n <polygon fill=\"#b80066\" points=\"641 695 886 900 367 900\" />\r\n <polygon fill=\"#960052\" points=\"587 900 641 695 886 900\" />\r\n <polygon fill=\"#b10088\" points=\"1710 900 1401 632 1096 900\" />\r\n <polygon fill=\"#8f006d\" points=\"1710 900 1401 632 1365 900\" />\r\n <polygon fill=\"#aa00aa\" points=\"1210 900 971 687 725 900\" />\r\n <polygon fill=\"#880088\" points=\"943 900 1210 900 971 687\" />\r\n </SlottedSVG>\r\n </IcHero>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `const useStyles = createUseStyles({\r\n cardImage: {\r\n width: \"18.75rem\",\r\n },\r\n hero: {\r\n height: \"fit-content\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nreturn (\r\n {shortCode}\r\n)`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `const useStyles = createUseStyles({\r\n cardImage: {\r\n width: \"18.75rem\",\r\n },\r\n hero: {\r\n height: \"fit-content\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nreturn (\r\n {shortCode}\r\n)`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview snippets={snippetsImage}>\r\n <IcHero\r\n heading=\"Everything I brew, I brew it for you\"\r\n subheading=\"This news is hot off the French press.\"\r\n aligned=\"full-width\"\r\n >\r\n <IcButton variant=\"primary\" slot=\"interaction\">\r\n Explore\r\n </IcButton>\r\n <IcButton variant=\"secondary\" slot=\"interaction\">\r\n Check out our new drinks\r\n </IcButton>\r\n <svg\r\n slot=\"secondary\"\r\n style={{\r\n width: \"18.75rem\",\r\n }}\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 1600 900\"\r\n >\r\n <rect fill=\"#ff7700\" width=\"1600\" height=\"900\" />\r\n <polygon fill=\"#cc0000\" points=\"957 450 539 900 1396 900\" />\r\n <polygon fill=\"#aa0000\" points=\"957 450 872.9 900 1396 900\" />\r\n <polygon fill=\"#c50022\" points=\"-60 900 398 662 816 900\" />\r\n <polygon fill=\"#a3001b\" points=\"337 900 398 662 816 900\" />\r\n <polygon fill=\"#be0044\" points=\"1203 546 1552 900 876 900\" />\r\n <polygon fill=\"#9c0036\" points=\"1203 546 1552 900 1162 900\" />\r\n <polygon fill=\"#b80066\" points=\"641 695 886 900 367 900\" />\r\n <polygon fill=\"#960052\" points=\"587 900 641 695 886 900\" />\r\n <polygon fill=\"#b10088\" points=\"1710 900 1401 632 1096 900\" />\r\n <polygon fill=\"#8f006d\" points=\"1710 900 1401 632 1365 900\" />\r\n <polygon fill=\"#aa00aa\" points=\"1210 900 971 687 725 900\" />\r\n <polygon fill=\"#880088\" points=\"943 900 1210 900 971 687\" />\r\n </svg>\r\n </IcHero>\r\n</ComponentPreview>\r\n",
"path": "/components/hero/code",
"date": "2024-05-31",
"title": "Hero",
@@ -2391,16 +2391,16 @@
}
],
"meta": {
- "relativePath": "components/hero/code.mdx",
- "createdAt": "2024-11-06T10:27:49.408Z",
- "lastModified": "2024-11-06T10:19:00.048Z",
- "size": 17442,
- "formattedSize": "17.0 KB"
+ "relativePath": "components\\hero\\code.mdx",
+ "createdAt": "2024-12-04T13:23:54.101Z",
+ "lastModified": "2024-12-04T13:23:54.101Z",
+ "size": 18140,
+ "formattedSize": "17.7 KB"
}
},
{
"id": "components\\hero\\guidancex",
- "contents": "\nimport { IcHero, IcButton } from \"@ukic/react\";\nimport heroFig1 from \"./images/fig-1-dont-place-hero-banners-in-middle-of-page.png\";\nimport heroFig2 from \"./images/fig-2-hero-banners-automatically-use-personality-colour.png\";\nimport heroFig3 from \"./images/fig-3-use-grey-background-when-colour-is-not-appropriate.png\";\nimport heroFig4 from \"./images/fig-4-dont-place-hero-banners-not-full-width.png\";\nimport heroFig5 from \"./images/fig-5-hero-alignment-options.png\";\nimport heroFig6 from \"./images/fig-6-use-buttons-in-the-interaction-area.png\";\nimport heroFig7 from \"./images/fig-7-use-links-in-the-interaction-area.png\";\nimport heroFig8 from \"./images/fig-8-use-simple-inputs-in-the-interaction-area.png\";\nimport heroFig9 from \"./images/fig-9-don't-use-complex-forms-in-the-interaction-area.png\";\nimport heroFig10 from \"./images/fig-10-use-clickable-cards-for-latest-announcements.png\";\nimport heroFig11 from \"./images/fig-11-use-secondary-headings-for-more-info.png\";\nimport heroFig12 from \"./images/fig-12-use-empty-space-on-right-hand-side-to-emphasise-title.png\";\nimport heroFig13 from \"./images/fig-13-use-embedded-images.png\";\nimport heroFig14 from \"./images/fig-14-use-full-height-images.png\";\nimport heroFig15 from \"./images/fig-15-use-background imagery.png\";\nimport heroFig16 from \"./images/fig-16-use-safe-areas-when-using-background-imagery.png\";\n\n## Introduction\n\nAn example of the hero component.\n\n<ComponentPreview>\n <IcHero\n heading=\"Everything I brew, I brew it for you\"\n subheading=\"This news is hot off the French press.\"\n >\n <IcButton variant=\"primary\" appearance=\"light\" slot=\"interaction\">\n Explore\n </IcButton>\n <IcButton variant=\"secondary\" appearance=\"light\" slot=\"interaction\">\n Check out our new drinks\n </IcButton>\n </IcHero>\n</ComponentPreview>\n\n## When to use\n\nUse the hero on a homepage to introduce your app or service and provide navigation to its main functions. Use the hero to catch a user's attention as it's often the first thing that they see.\n\n## When not to use\n\nDon't use hero banners part way through page content to introduce sections. They should always appear at the top of the page to act as an introduction to the full page.\n\n<DoDontCaution\n imageSrc={heroFig1}\n imageAlt=\"An example application with some content at the top of the page, then a hero banner introducing a section, and then more content.\"\n state=\"bad\"\n caption=\"Don't position hero banners part way through a page. Always position them at the top of page content.\"\n/>\n\n## Colour\n\nHero banners use an automatic secondary variant of an app's chosen theme colour.\n\n<DoDontCaution\n imageSrc={heroFig2}\n imageAlt=\"A hero banner with background colours based of the selected green theme colour.\"\n state=\"none\"\n caption=\"Hero banners automatically set their colour based on the selected theme colour.\"\n/>\n\n<DoDontCaution\n imageSrc={heroFig3}\n imageAlt=\"A hero banner with a grey background colour and black text.\"\n state=\"none\"\n caption=\"Set the hero background colour to grey when colour is not appropriate.\"\n/>\n\n## Sizing\n\nUse default sized hero for most applications. Use small sized hero banners for apps with compact layouts.\n\n## Layout and placement\n\nAlways position the hero banner at the top of the page and make it span the width of the container.\n\n<DoDontCaution\n imageSrc={heroFig4}\n imageAlt=\"A hero that is embedded within a container and doesn't span its full width.\"\n state=\"bad\"\n caption=\"Don't place the hero so that it does not span its container's full width.\"\n/>\n\nUse the alignment options to align the hero content to either full-width, left or centre of its container.\n\n<DoDontCaution\n imageSrc={heroFig5}\n imageAlt=\"Three examples of a hero with content aligned to the full-width of the container, the left of the container, and to the centre of the container.\"\n state=\"none\"\n caption=\"Use full-width, left or centre alignment to position the hero's content.\"\n/>\n\n## Content\n\n### Interaction area\n\nUse the hero's interaction slot to add interactive elements such as buttons, links or search bars.\n\nDon't add too much to the slot as it may become too busy. A hero should introduce the page, but not contain all of the page's content.\n\n<DoubleDoDontCaution>\n <DoDontCaution\n imageSrc={heroFig6}\n imageAlt=\"A hero that says 'Everything I brew, I brew it for you' with a button that says 'Explore'.\"\n state=\"none\"\n caption=\"Use buttons to provide actions in the interaction area.\"\n />\n <DoDontCaution\n imageSrc={heroFig7}\n imageAlt=\"A hero that says 'Everything I brew, I brew it for you' with a link that says 'Explore'.\"\n state=\"none\"\n caption=\"Use links to provide navigation from the interaction area.\"\n />\n</DoubleDoDontCaution>\n\n<DoubleDoDontCaution>\n <DoDontCaution\n imageSrc={heroFig8}\n imageAlt=\" A hero that says 'Everything I brew, I brew it for you' with a search bar in the interaction area.\"\n state=\"none\"\n caption=\"Use simple inputs to provide page level functions in the interaction area.\"\n />\n <DoDontCaution\n imageSrc={heroFig9}\n imageAlt=\"A hero that says 'Everything I brew, I brew it for you' with a text field, a text area and a button in the interaction area.\"\n state=\"bad\"\n caption=\"Don't use complex forms in the interaction area.\"\n />\n</DoubleDoDontCaution>\n\n### Secondary area\n\nUse the hero's secondary area to add additional information or navigation options. For example, use a [clickable card](/components/card) to provide a link to recent posts, use a secondary heading to give more info about the app, or keep it empty to help the main heading stand out.\n\n<DoDontCaution\n imageSrc={heroFig10}\n imageAlt=\"A hero with a clickable card in the secondary area that says ‘Latest Announcement’.\"\n state=\"none\"\n caption=\"Use clickable cards to provide links to other pages.\"\n/>\n\n<DoDontCaution\n imageSrc={heroFig11}\n imageAlt=\"A hero with a secondary heading in the secondary area that says 'Grab a cuppa and make yourself at home'.\"\n state=\"none\"\n caption=\"Use a secondary heading in the secondary area to provide more information.\"\n/>\n\n<DoDontCaution\n imageSrc={heroFig12}\n imageAlt=\"A hero with a title that reads 'Everything I brew, I brew it for you' with no content in the secondary area.\"\n state=\"none\"\n caption=\"Keep the secondary area empty to provide more emphasis to the main hero heading.\"\n/>\n\n### Imagery\n\nUse imagery on a hero to add personality to your app. Either embed the image in the secondary area, specify a full-size image to fill the secondary area, or add an image to the hero background itself.\n\n<DoDontCaution\n imageSrc={heroFig13}\n imageAlt=\"A hero with an image of a coffee cup in the secondary area.\"\n state=\"none\"\n caption=\"Use embedded images in the secondary area.\"\n/>\n\n<DoDontCaution\n imageSrc={heroFig14}\n imageAlt=\"A hero with a full height image of a hand holding a coffee cup in the secondary area.\"\n state=\"none\"\n caption=\"Use full-height images in the secondary area for greater emphasis on the imagery.\"\n/>\n\n<DoDontCaution\n imageSrc={heroFig15}\n imageAlt=\"A hero with an image of a hexagon patterns as the background.\"\n state=\"none\"\n caption=\"Use an image as the hero's background to add personality.\"\n/>\n\nWhen using an image background, ensure that you include 'safe areas' in your image to avoid the image's content interfering with the hero's text content.\n\nAlways specify alt-text with any image that you use so that its content can be understood equally by everyone.\n\n<DoDontCaution\n imageSrc={heroFig16}\n imageAlt=\"A diagram showing safe areas for background imagery. The safe area appears on the left-hand side under where the hero's text content lives. The image content appears outside of the safe areas.\"\n state=\"none\"\n caption=\"Use safe areas with hero background images to avoid content interfering.\"\n/>\n",
+ "contents": "\r\nimport { IcHero, IcButton } from \"@ukic/react\";\r\nimport heroFig1 from \"./images/fig-1-dont-place-hero-banners-in-middle-of-page.png\";\r\nimport heroFig2 from \"./images/fig-2-hero-banners-automatically-use-personality-colour.png\";\r\nimport heroFig3 from \"./images/fig-3-use-grey-background-when-colour-is-not-appropriate.png\";\r\nimport heroFig4 from \"./images/fig-4-dont-place-hero-banners-not-full-width.png\";\r\nimport heroFig5 from \"./images/fig-5-hero-alignment-options.png\";\r\nimport heroFig6 from \"./images/fig-6-use-buttons-in-the-interaction-area.png\";\r\nimport heroFig7 from \"./images/fig-7-use-links-in-the-interaction-area.png\";\r\nimport heroFig8 from \"./images/fig-8-use-simple-inputs-in-the-interaction-area.png\";\r\nimport heroFig9 from \"./images/fig-9-don't-use-complex-forms-in-the-interaction-area.png\";\r\nimport heroFig10 from \"./images/fig-10-use-clickable-cards-for-latest-announcements.png\";\r\nimport heroFig11 from \"./images/fig-11-use-secondary-headings-for-more-info.png\";\r\nimport heroFig12 from \"./images/fig-12-use-empty-space-on-right-hand-side-to-emphasise-title.png\";\r\nimport heroFig13 from \"./images/fig-13-use-embedded-images.png\";\r\nimport heroFig14 from \"./images/fig-14-use-full-height-images.png\";\r\nimport heroFig15 from \"./images/fig-15-use-background imagery.png\";\r\nimport heroFig16 from \"./images/fig-16-use-safe-areas-when-using-background-imagery.png\";\r\n\r\n## Introduction\r\n\r\nAn example of the hero component.\r\n\r\n<ComponentPreview>\r\n <IcHero\r\n heading=\"Everything I brew, I brew it for you\"\r\n subheading=\"This news is hot off the French press.\"\r\n >\r\n <IcButton variant=\"primary\" appearance=\"light\" slot=\"interaction\">\r\n Explore\r\n </IcButton>\r\n <IcButton variant=\"secondary\" appearance=\"light\" slot=\"interaction\">\r\n Check out our new drinks\r\n </IcButton>\r\n </IcHero>\r\n</ComponentPreview>\r\n\r\n## When to use\r\n\r\nUse the hero on a homepage to introduce your app or service and provide navigation to its main functions. Use the hero to catch a user's attention as it's often the first thing that they see.\r\n\r\n## When not to use\r\n\r\nDon't use hero banners part way through page content to introduce sections. They should always appear at the top of the page to act as an introduction to the full page.\r\n\r\n<DoDontCaution\r\n imageSrc={heroFig1}\r\n imageAlt=\"An example application with some content at the top of the page, then a hero banner introducing a section, and then more content.\"\r\n state=\"bad\"\r\n caption=\"Don't position hero banners part way through a page. Always position them at the top of page content.\"\r\n/>\r\n\r\n## Colour\r\n\r\nHero banners use an automatic secondary variant of an app's chosen theme colour.\r\n\r\n<DoDontCaution\r\n imageSrc={heroFig2}\r\n imageAlt=\"A hero banner with background colours based of the selected green theme colour.\"\r\n state=\"none\"\r\n caption=\"Hero banners automatically set their colour based on the selected theme colour.\"\r\n/>\r\n\r\n<DoDontCaution\r\n imageSrc={heroFig3}\r\n imageAlt=\"A hero banner with a grey background colour and black text.\"\r\n state=\"none\"\r\n caption=\"Set the hero background colour to grey when colour is not appropriate.\"\r\n/>\r\n\r\n## Sizing\r\n\r\nUse default sized hero for most applications. Use small sized hero banners for apps with compact layouts.\r\n\r\n## Layout and placement\r\n\r\nAlways position the hero banner at the top of the page and make it span the width of the container.\r\n\r\n<DoDontCaution\r\n imageSrc={heroFig4}\r\n imageAlt=\"A hero that is embedded within a container and doesn't span its full width.\"\r\n state=\"bad\"\r\n caption=\"Don't place the hero so that it does not span its container's full width.\"\r\n/>\r\n\r\nUse the alignment options to align the hero content to either full-width, left or centre of its container.\r\n\r\n<DoDontCaution\r\n imageSrc={heroFig5}\r\n imageAlt=\"Three examples of a hero with content aligned to the full-width of the container, the left of the container, and to the centre of the container.\"\r\n state=\"none\"\r\n caption=\"Use full-width, left or centre alignment to position the hero's content.\"\r\n/>\r\n\r\n## Content\r\n\r\n### Interaction area\r\n\r\nUse the hero's interaction slot to add interactive elements such as buttons, links or search bars.\r\n\r\nDon't add too much to the slot as it may become too busy. A hero should introduce the page, but not contain all of the page's content.\r\n\r\n<DoubleDoDontCaution>\r\n <DoDontCaution\r\n imageSrc={heroFig6}\r\n imageAlt=\"A hero that says 'Everything I brew, I brew it for you' with a button that says 'Explore'.\"\r\n state=\"none\"\r\n caption=\"Use buttons to provide actions in the interaction area.\"\r\n />\r\n <DoDontCaution\r\n imageSrc={heroFig7}\r\n imageAlt=\"A hero that says 'Everything I brew, I brew it for you' with a link that says 'Explore'.\"\r\n state=\"none\"\r\n caption=\"Use links to provide navigation from the interaction area.\"\r\n />\r\n</DoubleDoDontCaution>\r\n\r\n<DoubleDoDontCaution>\r\n <DoDontCaution\r\n imageSrc={heroFig8}\r\n imageAlt=\" A hero that says 'Everything I brew, I brew it for you' with a search bar in the interaction area.\"\r\n state=\"none\"\r\n caption=\"Use simple inputs to provide page level functions in the interaction area.\"\r\n />\r\n <DoDontCaution\r\n imageSrc={heroFig9}\r\n imageAlt=\"A hero that says 'Everything I brew, I brew it for you' with a text field, a text area and a button in the interaction area.\"\r\n state=\"bad\"\r\n caption=\"Don't use complex forms in the interaction area.\"\r\n />\r\n</DoubleDoDontCaution>\r\n\r\n### Secondary area\r\n\r\nUse the hero's secondary area to add additional information or navigation options. For example, use a [clickable card](/components/card) to provide a link to recent posts, use a secondary heading to give more info about the app, or keep it empty to help the main heading stand out.\r\n\r\n<DoDontCaution\r\n imageSrc={heroFig10}\r\n imageAlt=\"A hero with a clickable card in the secondary area that says ‘Latest Announcement’.\"\r\n state=\"none\"\r\n caption=\"Use clickable cards to provide links to other pages.\"\r\n/>\r\n\r\n<DoDontCaution\r\n imageSrc={heroFig11}\r\n imageAlt=\"A hero with a secondary heading in the secondary area that says 'Grab a cuppa and make yourself at home'.\"\r\n state=\"none\"\r\n caption=\"Use a secondary heading in the secondary area to provide more information.\"\r\n/>\r\n\r\n<DoDontCaution\r\n imageSrc={heroFig12}\r\n imageAlt=\"A hero with a title that reads 'Everything I brew, I brew it for you' with no content in the secondary area.\"\r\n state=\"none\"\r\n caption=\"Keep the secondary area empty to provide more emphasis to the main hero heading.\"\r\n/>\r\n\r\n### Imagery\r\n\r\nUse imagery on a hero to add personality to your app. Either embed the image in the secondary area, specify a full-size image to fill the secondary area, or add an image to the hero background itself.\r\n\r\n<DoDontCaution\r\n imageSrc={heroFig13}\r\n imageAlt=\"A hero with an image of a coffee cup in the secondary area.\"\r\n state=\"none\"\r\n caption=\"Use embedded images in the secondary area.\"\r\n/>\r\n\r\n<DoDontCaution\r\n imageSrc={heroFig14}\r\n imageAlt=\"A hero with a full height image of a hand holding a coffee cup in the secondary area.\"\r\n state=\"none\"\r\n caption=\"Use full-height images in the secondary area for greater emphasis on the imagery.\"\r\n/>\r\n\r\n<DoDontCaution\r\n imageSrc={heroFig15}\r\n imageAlt=\"A hero with an image of a hexagon patterns as the background.\"\r\n state=\"none\"\r\n caption=\"Use an image as the hero's background to add personality.\"\r\n/>\r\n\r\nWhen using an image background, ensure that you include 'safe areas' in your image to avoid the image's content interfering with the hero's text content.\r\n\r\nAlways specify alt-text with any image that you use so that its content can be understood equally by everyone.\r\n\r\n<DoDontCaution\r\n imageSrc={heroFig16}\r\n imageAlt=\"A diagram showing safe areas for background imagery. The safe area appears on the left-hand side under where the hero's text content lives. The image content appears outside of the safe areas.\"\r\n state=\"none\"\r\n caption=\"Use safe areas with hero background images to avoid content interfering.\"\r\n/>\r\n",
"path": "/components/hero",
"navPriority": 19,
"date": "2023-02-03",
@@ -2424,11 +2424,11 @@
],
"tags": ["Banner"],
"meta": {
- "relativePath": "components/hero/guidance.mdx",
- "createdAt": "2024-11-06T10:27:49.408Z",
- "lastModified": "2024-11-06T10:19:00.048Z",
- "size": 8391,
- "formattedSize": "8.2 KB"
+ "relativePath": "components\\hero\\guidance.mdx",
+ "createdAt": "2024-12-04T13:23:54.102Z",
+ "lastModified": "2024-12-04T13:23:54.102Z",
+ "size": 8607,
+ "formattedSize": "8.4 KB"
}
},
{
@@ -2440,9 +2440,9 @@
"subTitle": "Components are reusable user interface elements that help create consistent, accessible and usable experiences.",
"contribute": "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/components/index.mdx",
"meta": {
- "relativePath": "components/index.mdx",
- "createdAt": "2024-11-06T10:27:49.400Z",
- "lastModified": "2024-11-06T10:19:00.064Z",
+ "relativePath": "components\\index.mdx",
+ "createdAt": "2024-11-05T11:57:52.187Z",
+ "lastModified": "2024-11-05T11:57:52.187Z",
"size": 597,
"formattedSize": "597 Bytes"
}
@@ -2471,16 +2471,16 @@
}
],
"meta": {
- "relativePath": "components/links/accessibility.mdx",
- "createdAt": "2024-11-06T10:27:49.404Z",
- "lastModified": "2024-11-06T10:19:00.064Z",
+ "relativePath": "components\\links\\accessibility.mdx",
+ "createdAt": "2024-11-05T11:57:52.204Z",
+ "lastModified": "2024-11-05T11:57:52.204Z",
"size": 1852,
"formattedSize": "1.8 KB"
}
},
{
"id": "components\\links\\codex",
- "contents": "\nimport { IcLink } from \"@ukic/react\";\n\nimport { MemoryRouter, NavLink } from \"react-router-dom\";\n\nexport const snippets = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-link href=\"/components/link/code\">About our coffees</ic-link>`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcLink href=\"/components/link/code\">About our coffees</IcLink>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `{shortCode}`,\n },\n {\n language: \"Javascript\",\n snippet: `{shortCode}`,\n },\n ],\n },\n },\n];\n\n## Component demo\n\n<ComponentPreview snippets={snippets}>\n <IcLink href=\"#\" onClick={(e) => e.preventDefault()}>\n About our coffees\n </IcLink>\n</ComponentPreview>\n\n## Link details\n\n<ComponentDetails component=\"ic-link\" />\n\n## Variants\n\n### With icon\n\nexport const snippetsIcon = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-link href=\"#\" target=\"_blank\">About our coffees</ic-link>`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcLink href=\"#\" target=\"_blank\">About our coffees</IcLink>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `{shortCode}`,\n },\n {\n language: \"Javascript\",\n snippet: `{shortCode}`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={snippetsIcon}>\n <IcLink href=\"/\" target=\"_blank\">\n About our coffees\n </IcLink>\n</ComponentPreview>\n\n### Appearance\n\nexport const snippetsLightDark = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-link href=\"#\" appearance=\"dark\" target=\"_blank\">About our coffees</ic-link>\n<ic-link href=\"#\" appearance=\"light\" target=\"_blank\">About our coffees</ic-link>`,\n long: `.parent-container {\n display: flex;\n flex-wrap: wrap;\n }\n .light-background {\n padding: var(--ic-space-xs);\n }\n .dark-background {\n background: #333333;\n padding: var(--ic-space-xs);\n }\n</style>\n<body>\n <div class=\"parent-container\">\n <div class=\"light-background\">\n <ic-link href=\"#\" appearance=\"dark\" target=\"_blank\">\n About our coffees\n </ic-link>\n </div>\n <div class=\"dark-background\">\n <ic-link href=\"#\" appearance=\"light\" target=\"_blank\">\n About our coffees\n </ic-link>\n </div>\n </div>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcLink href=\"#\" appearance=\"dark\" target=\"_blank\">About our coffees</IcLink>\n<IcLink href=\"#\" appearance=\"light\" target=\"_blank\">About our coffees</IcLink>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n display: 'flex',\n flexWrap: 'wrap',\n },\n lightBackground: {\n padding: 'var(--ic-space-xs)',\n },\n darkBackground: {\n background: '#333333',\n padding: 'var(--ic-space-xs)',\n },\n});\nconst classes = useStyles();\nreturn (\n <div className={classes.parentContainer}>\n <div className={classes.lightBackground}>\n <IcLink href=\"/\" appearance=\"dark\" target=\"_blank\">\n About our coffees\n </IcLink>\n </div>\n <div className={classes.darkBackground}>\n <IcLink href=\"#\" appearance=\"light\" target=\"_blank\">\n About our coffees\n </IcLink>\n </div>\n </div>\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n display: 'flex',\n flexWrap: 'wrap',\n },\n lightBackground: {\n padding: 'var(--ic-space-xs)',\n },\n darkBackground: {\n background: '#333333',\n padding: 'var(--ic-space-xs)',\n },\n});\nconst classes = useStyles();\nreturn (\n <div className={classes.parentContainer}>\n <div className={classes.lightBackground}>\n <IcLink href=\"/\" appearance=\"dark\" target=\"_blank\">\n About our coffees\n </IcLink>\n </div>\n <div className={classes.darkBackground}>\n <IcLink href=\"#\" appearance=\"light\" target=\"_blank\">\n About our coffees\n </IcLink>\n </div>\n </div>\n)`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={snippetsLightDark}>\n <div\n style={{\n padding: \"0.5rem\",\n }}\n >\n <IcLink href=\"/\" appearance=\"dark\" target=\"_blank\">\n About our coffees\n </IcLink>\n </div>\n <div\n style={{\n background: \"#333333\",\n padding: \"0.5rem\",\n }}\n >\n <IcLink href=\"/\" appearance=\"light\" target=\"_blank\">\n About our coffees\n </IcLink>\n </div>\n</ComponentPreview>\n\n### With React Router\n\nexport const withReactRouter = [\n {\n technology: \"React\",\n snippets: {\n short: `<MemoryRouter initialEntries={[\"/\"]}>\n <div className={classes.linkContainer}>\n <IcLink>\n <NavLink to=\"/\" slot=\"router-item\">Home</NavLink>\n </IcLink>\n <IcLink>\n <NavLink to=\"/daily-tippers\" slot=\"router-item\">Beverages</NavLink>\n </IcLink>\n </div>\n <IcSectionContainer>\n <Routes>\n <Route path=\"/\" element={<IcTypography>This is the home page</IcTypography>} />\n <Route path=\"/daily-tippers\" element={<IcTypography>This page is about beverages</IcTypography>} />\n </Routes>\n </IcSectionContainer>\n</MemoryRouter>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n linkContainer: {\n display: \"flex\",\n gap: \"var(--ic-space-xs)\",\n },\n});\nconst classes = useStyles();\nreturn (\n {shortCode}\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n linkContainer: {\n display: \"flex\",\n gap: \"var(--ic-space-xs)\",\n },\n});\nconst classes = useStyles();\nreturn (\n {shortCode}\n)`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview\n snippets={withReactRouter}\n style={{ flexDirection: \"column\" }}\n>\n <MemoryRouter initialEntries={[\"/\"]}>\n <div\n style={{\n display: \"flex\",\n flexDirection: \"row\",\n gap: \"0.5rem\",\n }}\n >\n <IcLink>\n <NavLink to=\"/\" slot=\"router-item\">\n Home\n </NavLink>\n </IcLink>\n <IcLink>\n <NavLink to=\"/daily-tippers\" slot=\"router-item\">\n Beverages\n </NavLink>\n </IcLink>\n </div>\n </MemoryRouter>\n</ComponentPreview>\n",
+ "contents": "\r\nimport { IcLink } from \"@ukic/react\";\r\n\r\nimport { MemoryRouter, NavLink } from \"react-router-dom\";\r\n\r\nexport const snippets = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-link href=\"/components/link/code\">About our coffees</ic-link>`,\r\n long: `{shortCode}`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcLink href=\"/components/link/code\">About our coffees</IcLink>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `{shortCode}`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `{shortCode}`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n## Component demo\r\n\r\n<ComponentPreview snippets={snippets}>\r\n <IcLink href=\"#\" onClick={(e) => e.preventDefault()}>\r\n About our coffees\r\n </IcLink>\r\n</ComponentPreview>\r\n\r\n## Link details\r\n\r\n<ComponentDetails component=\"ic-link\" />\r\n\r\n## Variants\r\n\r\n### With icon\r\n\r\nexport const snippetsIcon = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-link href=\"#\" target=\"_blank\">About our coffees</ic-link>`,\r\n long: `{shortCode}`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcLink href=\"#\" target=\"_blank\">About our coffees</IcLink>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `{shortCode}`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `{shortCode}`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview snippets={snippetsIcon}>\r\n <IcLink href=\"/\" target=\"_blank\">\r\n About our coffees\r\n </IcLink>\r\n</ComponentPreview>\r\n\r\n### Appearance\r\n\r\nexport const snippetsLightDark = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-link href=\"#\" appearance=\"dark\" target=\"_blank\">About our coffees</ic-link>\r\n<ic-link href=\"#\" appearance=\"light\" target=\"_blank\">About our coffees</ic-link>`,\r\n long: `.parent-container {\r\n display: flex;\r\n flex-wrap: wrap;\r\n }\r\n .light-background {\r\n padding: var(--ic-space-xs);\r\n }\r\n .dark-background {\r\n background: #333333;\r\n padding: var(--ic-space-xs);\r\n }\r\n</style>\r\n<body>\r\n <div class=\"parent-container\">\r\n <div class=\"light-background\">\r\n <ic-link href=\"#\" appearance=\"dark\" target=\"_blank\">\r\n About our coffees\r\n </ic-link>\r\n </div>\r\n <div class=\"dark-background\">\r\n <ic-link href=\"#\" appearance=\"light\" target=\"_blank\">\r\n About our coffees\r\n </ic-link>\r\n </div>\r\n </div>`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcLink href=\"#\" appearance=\"dark\" target=\"_blank\">About our coffees</IcLink>\r\n<IcLink href=\"#\" appearance=\"light\" target=\"_blank\">About our coffees</IcLink>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `const useStyles = createUseStyles({\r\n parentContainer: {\r\n display: 'flex',\r\n flexWrap: 'wrap',\r\n },\r\n lightBackground: {\r\n padding: 'var(--ic-space-xs)',\r\n },\r\n darkBackground: {\r\n background: '#333333',\r\n padding: 'var(--ic-space-xs)',\r\n },\r\n});\r\nconst classes = useStyles();\r\nreturn (\r\n <div className={classes.parentContainer}>\r\n <div className={classes.lightBackground}>\r\n <IcLink href=\"/\" appearance=\"dark\" target=\"_blank\">\r\n About our coffees\r\n </IcLink>\r\n </div>\r\n <div className={classes.darkBackground}>\r\n <IcLink href=\"#\" appearance=\"light\" target=\"_blank\">\r\n About our coffees\r\n </IcLink>\r\n </div>\r\n </div>\r\n)`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `const useStyles = createUseStyles({\r\n parentContainer: {\r\n display: 'flex',\r\n flexWrap: 'wrap',\r\n },\r\n lightBackground: {\r\n padding: 'var(--ic-space-xs)',\r\n },\r\n darkBackground: {\r\n background: '#333333',\r\n padding: 'var(--ic-space-xs)',\r\n },\r\n});\r\nconst classes = useStyles();\r\nreturn (\r\n <div className={classes.parentContainer}>\r\n <div className={classes.lightBackground}>\r\n <IcLink href=\"/\" appearance=\"dark\" target=\"_blank\">\r\n About our coffees\r\n </IcLink>\r\n </div>\r\n <div className={classes.darkBackground}>\r\n <IcLink href=\"#\" appearance=\"light\" target=\"_blank\">\r\n About our coffees\r\n </IcLink>\r\n </div>\r\n </div>\r\n)`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview snippets={snippetsLightDark}>\r\n <div\r\n style={{\r\n padding: \"0.5rem\",\r\n }}\r\n >\r\n <IcLink href=\"/\" appearance=\"dark\" target=\"_blank\">\r\n About our coffees\r\n </IcLink>\r\n </div>\r\n <div\r\n style={{\r\n background: \"#333333\",\r\n padding: \"0.5rem\",\r\n }}\r\n >\r\n <IcLink href=\"/\" appearance=\"light\" target=\"_blank\">\r\n About our coffees\r\n </IcLink>\r\n </div>\r\n</ComponentPreview>\r\n\r\n### With React Router\r\n\r\nexport const withReactRouter = [\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<MemoryRouter initialEntries={[\"/\"]}>\r\n <div className={classes.linkContainer}>\r\n <IcLink>\r\n <NavLink to=\"/\" slot=\"router-item\">Home</NavLink>\r\n </IcLink>\r\n <IcLink>\r\n <NavLink to=\"/daily-tippers\" slot=\"router-item\">Beverages</NavLink>\r\n </IcLink>\r\n </div>\r\n <IcSectionContainer>\r\n <Routes>\r\n <Route path=\"/\" element={<IcTypography>This is the home page</IcTypography>} />\r\n <Route path=\"/daily-tippers\" element={<IcTypography>This page is about beverages</IcTypography>} />\r\n </Routes>\r\n </IcSectionContainer>\r\n</MemoryRouter>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `const useStyles = createUseStyles({\r\n linkContainer: {\r\n display: \"flex\",\r\n gap: \"var(--ic-space-xs)\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nreturn (\r\n {shortCode}\r\n)`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `const useStyles = createUseStyles({\r\n linkContainer: {\r\n display: \"flex\",\r\n gap: \"var(--ic-space-xs)\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nreturn (\r\n {shortCode}\r\n)`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview\r\n snippets={withReactRouter}\r\n style={{ flexDirection: \"column\" }}\r\n>\r\n <MemoryRouter initialEntries={[\"/\"]}>\r\n <div\r\n style={{\r\n display: \"flex\",\r\n flexDirection: \"row\",\r\n gap: \"0.5rem\",\r\n }}\r\n >\r\n <IcLink>\r\n <NavLink to=\"/\" slot=\"router-item\">\r\n Home\r\n </NavLink>\r\n </IcLink>\r\n <IcLink>\r\n <NavLink to=\"/daily-tippers\" slot=\"router-item\">\r\n Beverages\r\n </NavLink>\r\n </IcLink>\r\n </div>\r\n </MemoryRouter>\r\n</ComponentPreview>\r\n",
"path": "/components/link/code",
"date": "2024-09-03",
"title": "Link",
@@ -2502,16 +2502,16 @@
}
],
"meta": {
- "relativePath": "components/links/code.mdx",
- "createdAt": "2024-11-06T10:27:49.404Z",
- "lastModified": "2024-11-06T10:19:00.064Z",
- "size": 6799,
- "formattedSize": "6.6 KB"
+ "relativePath": "components\\links\\code.mdx",
+ "createdAt": "2024-12-04T13:23:54.102Z",
+ "lastModified": "2024-12-04T13:23:54.102Z",
+ "size": 7107,
+ "formattedSize": "6.9 KB"
}
},
{
"id": "components\\links\\guidancex",
- "contents": "\nimport { IcLink, IcTypography } from \"@ukic/react\";\nimport linksFig1 from \"./images/always-include-a-launch-icon-when-directing-users-to-an-external-address.png\";\nimport linksFig2 from \"./images/dont-use-a-default-link-for-links-which-open-a-new-tab-or-website.png\";\nimport linksFig3 from \"./images/use-a-button-when-displaying-a-clickable-action.png\";\nimport linksFig4 from \"./images/dont-use-a-link-to-initiate-an-action.png\";\nimport linksFig5 from \"./images/when-using-inline-links-always-use-a-different-colour-to-the-adjacent-text.png\";\nimport linksFig6 from \"./images/avoid-using-the-same-colour-style-as-the-adjacent-text.png\";\nimport linksFig7 from \"./images/use-the-monochromatic-variant-when-listing-links.png\";\nimport linksFig8 from \"./images/do-not-use-bad-link-text.png\";\n\n## Component demo\n\nLinks can include a launch icon to the right of the link for clarity.\n\n<ComponentPreview>\n <IcTypography>\n Return to the{\" \"}\n <IcLink href=\"/components/link\" target=\"_blank\">\n café homepage\n </IcLink>\n </IcTypography>\n</ComponentPreview>\n\n## When to use\n\nUse links to navigate to a new page.\n\nLinks can be applied to any text element but will use the link styling.\n\nAlways show a launch icon when a link is set up to open a page in a new tab or window, or when directing to an external app.\n\n<DoDontCaution\n imageSrc={linksFig1}\n imageAlt=\"An example of a link labelled ‘Fairtrade Foundation” featuring a ‘launch’ icon to denote it will open a new tab or page.\"\n caption=\"Always include an external link icon formed by a square and an arrow when directing users to an external address.\"\n state=\"good\"\n/>\n\n<DoDontCaution\n imageSrc={linksFig2}\n imageAlt=\"An example of a link labelled ‘Fairtrade Foundation” not featuring an external link icon.\"\n caption=\"Don’t use a default link for links that open a new tab or website.\"\n state=\"bad\"\n/>\n\n## When not to use\n\nDon’t use a link to display an action on a page, use a [button](/components/button) instead.\n\n<DoubleDoDontCaution>\n <DoDontCaution\n imageSrc={linksFig3}\n imageAlt=\"An image of an example form featuring a group of radio buttons, with a submit button at the end.\"\n caption=\"Use a button when displaying a clickable action.\"\n state=\"good\"\n />\n <DoDontCaution\n imageSrc={linksFig4}\n imageAlt=\"An image of an example form featuring a group of radio buttons, and a link labelled ‘Submit’ at the end.\"\n caption=\"Don’t use a link to initiate an action.\"\n state=\"bad\"\n />\n</DoubleDoDontCaution>\n\n## Colour\n\nOnce a link has been visited, the browser will remember this and the link will change to use the visited styling.\n\nYour browser is set to remember what links have been visited. Visited links feature a different colour style.\n\nAll other states will use specific [hyperlink styling](/styles/colour#links).\n\nUse default appearance links when used inline with other text. If the text appears on a different coloured background, use the light or dark appearance links to achieve good colour contrast.\n\n<DoubleDoDontCaution>\n <DoDontCaution\n imageSrc={linksFig5}\n imageAlt=\"An example paragraph with black text, featuring a link with blue colour styling.\"\n caption=\"When using links, always use a different colour to the adjacent text.\"\n state=\"good\"\n />\n <DoDontCaution\n imageSrc={linksFig6}\n imageAlt=\"An example paragraph with black text, featuring a link the same colour styling.\"\n caption=\"Avoid using the same link appearance as the adjacent text. Only use the same appearance if the text is used on a dark background.\"\n state=\"bad\"\n />\n</DoubleDoDontCaution>\n\nUse the light or dark appearance links when listing a series of links on different coloured backgrounds.\n\n<DoDontCaution\n imageSrc={linksFig7}\n imageAlt=\"An image of a footer with two navigation groups titled ‘Services’ and ‘Policy’ which house a list of several links. Every text element in the footer is white, including the hyperlinks.\"\n caption=\"Use light appearance links when displaying links on a dark background.\"\n state=\"good\"\n/>\n\n## Content\n\n### Link text\n\nAlways use a concise string of text in a link rather than displaying the full URL. Make sure the link text is descriptive enough to be relevant to the page the link points to.\n\nDon’t omit important descriptive information from the link text. Avoid using unnecessarily lengthy descriptions, but strike a balance between relevance and conciseness.\n\n<ComponentPreview state=\"good\" caption=\"test\">\n <IcLink href=\"#\">About our coffees</IcLink>\n</ComponentPreview>\n\n<IcTypography\n variant=\"label\"\n style={{ marginTop: \"-1rem\", marginBottom: \"1.5rem\" }}\n>\n Use concise but relevant links.\n</IcTypography>\n\n<DoDontCaution\n imageSrc={linksFig8}\n imageAlt=\"An example of three links. One reads ‘www.coffeeshop.com/about-our-coffees', the second reads ‘Let us tell you all about our speciality coffees’, and the third reads ‘Coffees’.\"\n caption=\"Don’t use URLs in the link text, don’t use unnecessarily long link text, and don’t omit important descriptive information.\"\n state=\"bad\"\n/>\n\n### Email addresses\n\nWhen linking to email addresses use the full email address in the link text. Don’t describe the contact without showing the email address.\n\n<ComponentPreview state=\"good\">\n <IcLink href=\"mailto:info@icds.co.uk\">info@icds.co.uk</IcLink>\n</ComponentPreview>\n\n<IcTypography\n variant=\"label\"\n style={{ marginTop: \"-1rem\", marginBottom: \"1.5rem\" }}\n>\n Show the full email address.\n</IcTypography>\n\n<ComponentPreview state=\"bad\">\n <IcLink href=\"mailto:info@icds.co.uk\">ICDS team</IcLink>\n</ComponentPreview>\n\n<IcTypography\n variant=\"label\"\n style={{ marginTop: \"-1rem\", marginBottom: \"1.5rem\" }}\n>\n Don’t embed labels when linking email addresses.\n</IcTypography>\n\n## Accessibility considerations\n\nWhen reading a page, screen reader users might navigate to links independently of the adjacent content. Make sure links are descriptive enough that they make sense out of context.\n\nConsider that some screen readers allow users to view a full list of all links present on a page. This may be ordered either alphabetically, or in order of appearance. Make sure to label links with relevant information at the beginning of the string of text. For example, don’t embed “How to contact us”, but rather “Contact us”.\n",
+ "contents": "\r\nimport { IcLink, IcTypography } from \"@ukic/react\";\r\nimport linksFig1 from \"./images/always-include-a-launch-icon-when-directing-users-to-an-external-address.png\";\r\nimport linksFig2 from \"./images/dont-use-a-default-link-for-links-which-open-a-new-tab-or-website.png\";\r\nimport linksFig3 from \"./images/use-a-button-when-displaying-a-clickable-action.png\";\r\nimport linksFig4 from \"./images/dont-use-a-link-to-initiate-an-action.png\";\r\nimport linksFig5 from \"./images/when-using-inline-links-always-use-a-different-colour-to-the-adjacent-text.png\";\r\nimport linksFig6 from \"./images/avoid-using-the-same-colour-style-as-the-adjacent-text.png\";\r\nimport linksFig7 from \"./images/use-the-monochromatic-variant-when-listing-links.png\";\r\nimport linksFig8 from \"./images/do-not-use-bad-link-text.png\";\r\n\r\n## Component demo\r\n\r\nLinks can include a launch icon to the right of the link for clarity.\r\n\r\n<ComponentPreview>\r\n <IcTypography>\r\n Return to the{\" \"}\r\n <IcLink href=\"/components/link\" target=\"_blank\">\r\n café homepage\r\n </IcLink>\r\n </IcTypography>\r\n</ComponentPreview>\r\n\r\n## When to use\r\n\r\nUse links to navigate to a new page.\r\n\r\nLinks can be applied to any text element but will use the link styling.\r\n\r\nAlways show a launch icon when a link is set up to open a page in a new tab or window, or when directing to an external app.\r\n\r\n<DoDontCaution\r\n imageSrc={linksFig1}\r\n imageAlt=\"An example of a link labelled ‘Fairtrade Foundation” featuring a ‘launch’ icon to denote it will open a new tab or page.\"\r\n caption=\"Always include an external link icon formed by a square and an arrow when directing users to an external address.\"\r\n state=\"good\"\r\n/>\r\n\r\n<DoDontCaution\r\n imageSrc={linksFig2}\r\n imageAlt=\"An example of a link labelled ‘Fairtrade Foundation” not featuring an external link icon.\"\r\n caption=\"Don’t use a default link for links that open a new tab or website.\"\r\n state=\"bad\"\r\n/>\r\n\r\n## When not to use\r\n\r\nDon’t use a link to display an action on a page, use a [button](/components/button) instead.\r\n\r\n<DoubleDoDontCaution>\r\n <DoDontCaution\r\n imageSrc={linksFig3}\r\n imageAlt=\"An image of an example form featuring a group of radio buttons, with a submit button at the end.\"\r\n caption=\"Use a button when displaying a clickable action.\"\r\n state=\"good\"\r\n />\r\n <DoDontCaution\r\n imageSrc={linksFig4}\r\n imageAlt=\"An image of an example form featuring a group of radio buttons, and a link labelled ‘Submit’ at the end.\"\r\n caption=\"Don’t use a link to initiate an action.\"\r\n state=\"bad\"\r\n />\r\n</DoubleDoDontCaution>\r\n\r\n## Colour\r\n\r\nOnce a link has been visited, the browser will remember this and the link will change to use the visited styling.\r\n\r\nYour browser is set to remember what links have been visited. Visited links feature a different colour style.\r\n\r\nAll other states will use specific [hyperlink styling](/styles/colour#links).\r\n\r\nUse default appearance links when used inline with other text. If the text appears on a different coloured background, use the light or dark appearance links to achieve good colour contrast.\r\n\r\n<DoubleDoDontCaution>\r\n <DoDontCaution\r\n imageSrc={linksFig5}\r\n imageAlt=\"An example paragraph with black text, featuring a link with blue colour styling.\"\r\n caption=\"When using links, always use a different colour to the adjacent text.\"\r\n state=\"good\"\r\n />\r\n <DoDontCaution\r\n imageSrc={linksFig6}\r\n imageAlt=\"An example paragraph with black text, featuring a link the same colour styling.\"\r\n caption=\"Avoid using the same link appearance as the adjacent text. Only use the same appearance if the text is used on a dark background.\"\r\n state=\"bad\"\r\n />\r\n</DoubleDoDontCaution>\r\n\r\nUse the light or dark appearance links when listing a series of links on different coloured backgrounds.\r\n\r\n<DoDontCaution\r\n imageSrc={linksFig7}\r\n imageAlt=\"An image of a footer with two navigation groups titled ‘Services’ and ‘Policy’ which house a list of several links. Every text element in the footer is white, including the hyperlinks.\"\r\n caption=\"Use light appearance links when displaying links on a dark background.\"\r\n state=\"good\"\r\n/>\r\n\r\n## Content\r\n\r\n### Link text\r\n\r\nAlways use a concise string of text in a link rather than displaying the full URL. Make sure the link text is descriptive enough to be relevant to the page the link points to.\r\n\r\nDon’t omit important descriptive information from the link text. Avoid using unnecessarily lengthy descriptions, but strike a balance between relevance and conciseness.\r\n\r\n<ComponentPreview state=\"good\" caption=\"test\">\r\n <IcLink href=\"#\">About our coffees</IcLink>\r\n</ComponentPreview>\r\n\r\n<IcTypography\r\n variant=\"label\"\r\n style={{ marginTop: \"-1rem\", marginBottom: \"1.5rem\" }}\r\n>\r\n Use concise but relevant links.\r\n</IcTypography>\r\n\r\n<DoDontCaution\r\n imageSrc={linksFig8}\r\n imageAlt=\"An example of three links. One reads ‘www.coffeeshop.com/about-our-coffees', the second reads ‘Let us tell you all about our speciality coffees’, and the third reads ‘Coffees’.\"\r\n caption=\"Don’t use URLs in the link text, don’t use unnecessarily long link text, and don’t omit important descriptive information.\"\r\n state=\"bad\"\r\n/>\r\n\r\n### Email addresses\r\n\r\nWhen linking to email addresses use the full email address in the link text. Don’t describe the contact without showing the email address.\r\n\r\n<ComponentPreview state=\"good\">\r\n <IcLink href=\"mailto:info@icds.co.uk\">info@icds.co.uk</IcLink>\r\n</ComponentPreview>\r\n\r\n<IcTypography\r\n variant=\"label\"\r\n style={{ marginTop: \"-1rem\", marginBottom: \"1.5rem\" }}\r\n>\r\n Show the full email address.\r\n</IcTypography>\r\n\r\n<ComponentPreview state=\"bad\">\r\n <IcLink href=\"mailto:info@icds.co.uk\">ICDS team</IcLink>\r\n</ComponentPreview>\r\n\r\n<IcTypography\r\n variant=\"label\"\r\n style={{ marginTop: \"-1rem\", marginBottom: \"1.5rem\" }}\r\n>\r\n Don’t embed labels when linking email addresses.\r\n</IcTypography>\r\n\r\n## Accessibility considerations\r\n\r\nWhen reading a page, screen reader users might navigate to links independently of the adjacent content. Make sure links are descriptive enough that they make sense out of context.\r\n\r\nConsider that some screen readers allow users to view a full list of all links present on a page. This may be ordered either alphabetically, or in order of appearance. Make sure to label links with relevant information at the beginning of the string of text. For example, don’t embed “How to contact us”, but rather “Contact us”.\r\n",
"path": "/components/link",
"navPriority": 20,
"date": "2023-09-03",
@@ -2535,11 +2535,11 @@
],
"tags": ["Anchor", "Hyperlink"],
"meta": {
- "relativePath": "components/links/guidance.mdx",
- "createdAt": "2024-11-06T10:27:49.404Z",
- "lastModified": "2024-11-06T10:19:00.064Z",
- "size": 6871,
- "formattedSize": "6.7 KB"
+ "relativePath": "components\\links\\guidance.mdx",
+ "createdAt": "2024-12-04T13:23:54.103Z",
+ "lastModified": "2024-12-04T13:23:54.103Z",
+ "size": 7051,
+ "formattedSize": "6.9 KB"
}
},
{
@@ -2566,16 +2566,16 @@
}
],
"meta": {
- "relativePath": "components/loading-indicators/accessibility.mdx",
- "createdAt": "2024-11-06T10:27:49.404Z",
- "lastModified": "2024-11-06T10:19:00.072Z",
+ "relativePath": "components\\loading-indicators\\accessibility.mdx",
+ "createdAt": "2024-11-05T11:57:52.293Z",
+ "lastModified": "2024-11-05T11:57:52.293Z",
"size": 2469,
"formattedSize": "2.4 KB"
}
},
{
"id": "components\\loading-indicators\\codex",
- "contents": "\nimport { IcLoadingIndicator } from \"@ukic/react\";\n\n## Component demo\n\nexport const snippets = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-loading-indicator type=\"circular\" label=\"Loading...\"></ic-loading-indicator>\n<ic-loading-indicator type=\"linear\" label=\"Loading...\"></ic-loading-indicator>`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcLoadingIndicator type=\"circular\" label=\"Loading...\" />\n<IcLoadingIndicator type=\"linear\" label=\"Loading...\" />`,\n long: [\n {\n language: \"Typescript\",\n snippet: `<>\n {shortCode}\n</>`,\n },\n {\n language: \"Javascript\",\n snippet: `<>\n {shortCode}\n</>`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview\n snippets={snippets}\n style={{ flexDirection: \"column\", gap: \"0.5rem\" }}\n>\n <IcLoadingIndicator type=\"circular\" label=\"Loading...\" />\n <IcLoadingIndicator type=\"linear\" label=\"Loading...\" />\n</ComponentPreview>\n\n## Loading indicator details\n\n<ComponentDetails component=\"ic-loading-indicator\" />\n\n## Variants\n\n### Sizes\n\nexport const snippetsSizes = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-loading-indicator type=\"circular\" label=\"Loading...\" size=\"small\"></ic-loading-indicator>\n<ic-loading-indicator type=\"circular\" label=\"Loading...\" size=\"large\"></ic-loading-indicator>\n<ic-loading-indicator type=\"linear\" label=\"Loading...\" size=\"small\"></ic-loading-indicator>\n<ic-loading-indicator type=\"linear\" label=\"Loading...\" size=\"large\"></ic-loading-indicator>`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcLoadingIndicator type=\"circular\" label=\"Loading...\" size=\"small\" />\n<IcLoadingIndicator type=\"circular\" label=\"Loading...\" size=\"large\" />\n<IcLoadingIndicator type=\"linear\" label=\"Loading...\" size=\"small\" />\n<IcLoadingIndicator type=\"linear\" label=\"Loading...\" size=\"large\" />`,\n long: [\n {\n language: \"Typescript\",\n snippet: `<>\n {shortCode}\n</>`,\n },\n {\n language: \"Javascript\",\n snippet: `<>\n {shortCode}\n</>`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview\n snippets={snippetsSizes}\n style={{ flexDirection: \"column\", gap: \"0.5rem\" }}\n>\n <IcLoadingIndicator type=\"circular\" label=\"Loading...\" size=\"small\" />\n <IcLoadingIndicator type=\"circular\" label=\"Loading...\" size=\"large\" />\n <IcLoadingIndicator type=\"linear\" label=\"Loading...\" size=\"small\" />\n <IcLoadingIndicator type=\"linear\" label=\"Loading...\" size=\"large\" />\n</ComponentPreview>\n\n### Icon\n\nexport const snippetsIcon = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-loading-indicator size=\"icon\"></ic-loading-indicator>`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcLoadingIndicator size=\"icon\" />`,\n long: [\n {\n language: \"Typescript\",\n snippet: `{shortCode}`,\n },\n {\n language: \"Javascript\",\n snippet: `{shortCode}`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={snippetsIcon}>\n <IcLoadingIndicator size=\"icon\" />\n</ComponentPreview>\n\n### Determinate\n\nexport const snippetsDeterminate = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-loading-indicator type=\"circular\" label=\"Progress 30%\" progress=\"30\" min=\"0\" max=\"100\"></ic-loading-indicator>\n<ic-loading-indicator type=\"linear\" label=\"Progress 30%\" progress=\"30\" min=\"0\" max=\"100\"></ic-loading-indicator>`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcLoadingIndicator type=\"circular\" label=\"Progress 30%\" progress=\"30\" min=\"0\" max=\"100\" />\n<IcLoadingIndicator type=\"linear\" label=\"Progress 30%\" progress=\"30\" min=\"0\" max=\"100\" />`,\n long: [\n {\n language: \"Typescript\",\n snippet: `<>\n {shortCode}\n</>`,\n },\n {\n language: \"Javascript\",\n snippet: `<>\n {shortCode}\n</>`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview\n snippets={snippetsDeterminate}\n style={{ flexDirection: \"column\", gap: \"0.5rem\" }}\n>\n <IcLoadingIndicator\n type=\"circular\"\n label=\"Progress 30%\"\n progress=\"30\"\n min=\"0\"\n max=\"100\"\n />\n <IcLoadingIndicator\n type=\"linear\"\n label=\"Progress 30%\"\n progress=\"30\"\n min=\"0\"\n max=\"100\"\n />\n</ComponentPreview>\n\n### Light\n\nexport const snippetsLight = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-loading-indicator\n type=\"circular\"\n label=\"Loading\"\n appearance=\"light\"\n ></ic-loading-indicator>\n <ic-loading-indicator\n type=\"linear\"\n label=\"Loading\"\n appearance=\"light\"\n ></ic-loading-indicator>`,\n long: `.dark-background {\n flex-direction: column; \n gap: var(--ic-space-xs); \n background: #333333;\n }\n </style>\n <body>\n <div class=\"dark-background\">\n {shortCode}\n </div>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcLoadingIndicator type=\"circular\" label=\"Loading\" appearance=\"light\" />\n<IcLoadingIndicator type=\"linear\" label=\"Loading\" appearance=\"light\" />`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n darkBackground: {\n display: \"flex\",\n flexDirection: \"column\", \n gap: \"var(--ic-space-xs)\", \n background: \"#333333\",\n },\n});\nconst classes = useStyles();\nreturn (\n <div className={classes.darkBackground}>\n {shortCode}\n </div>\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n darkBackground: {\n display: \"flex\",\n flexDirection: \"column\", \n gap: \"var(--ic-space-xs)\", \n background: \"#333333\",\n },\n});\nconst classes = useStyles();\nreturn (\n <div className={classes.darkBackground}>\n {shortCode}\n </div>\n)`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview\n snippets={snippetsLight}\n style={{ flexDirection: \"column\", gap: \"0.5rem\", background: \"#333333\" }}\n>\n <IcLoadingIndicator type=\"circular\" label=\"Loading\" appearance=\"light\" />\n <IcLoadingIndicator type=\"linear\" label=\"Loading\" appearance=\"light\" />\n</ComponentPreview>\n\n### Changing label\n\nexport const snippetsChangingLabel = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-loading-indicator type=\"circular\" label=\"Loading.../Still loading...\" label-duration=\"4000\"></ic-loading-indicator>`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcLoadingIndicator\n type=\"circular\"\n label=\"Loading.../Still loading...\"\n labelDuration={4000}\n />`,\n long: [\n {\n language: \"Typescript\",\n snippet: `{shortCode}`,\n },\n {\n language: \"Javascript\",\n snippet: `{shortCode}`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={snippetsChangingLabel}>\n <IcLoadingIndicator\n type=\"circular\"\n label=\"Loading.../Still loading...\"\n labelDuration={4000}\n />\n</ComponentPreview>\n",
+ "contents": "\r\nimport { IcLoadingIndicator } from \"@ukic/react\";\r\n\r\n## Component demo\r\n\r\nexport const snippets = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-loading-indicator type=\"circular\" label=\"Loading...\"></ic-loading-indicator>\r\n<ic-loading-indicator type=\"linear\" label=\"Loading...\"></ic-loading-indicator>`,\r\n long: `{shortCode}`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcLoadingIndicator type=\"circular\" label=\"Loading...\" />\r\n<IcLoadingIndicator type=\"linear\" label=\"Loading...\" />`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `<>\r\n {shortCode}\r\n</>`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `<>\r\n {shortCode}\r\n</>`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview\r\n snippets={snippets}\r\n style={{ flexDirection: \"column\", gap: \"0.5rem\" }}\r\n>\r\n <IcLoadingIndicator type=\"circular\" label=\"Loading...\" />\r\n <IcLoadingIndicator type=\"linear\" label=\"Loading...\" />\r\n</ComponentPreview>\r\n\r\n## Loading indicator details\r\n\r\n<ComponentDetails component=\"ic-loading-indicator\" />\r\n\r\n## Variants\r\n\r\n### Sizes\r\n\r\nexport const snippetsSizes = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-loading-indicator type=\"circular\" label=\"Loading...\" size=\"small\"></ic-loading-indicator>\r\n<ic-loading-indicator type=\"circular\" label=\"Loading...\" size=\"large\"></ic-loading-indicator>\r\n<ic-loading-indicator type=\"linear\" label=\"Loading...\" size=\"small\"></ic-loading-indicator>\r\n<ic-loading-indicator type=\"linear\" label=\"Loading...\" size=\"large\"></ic-loading-indicator>`,\r\n long: `{shortCode}`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcLoadingIndicator type=\"circular\" label=\"Loading...\" size=\"small\" />\r\n<IcLoadingIndicator type=\"circular\" label=\"Loading...\" size=\"large\" />\r\n<IcLoadingIndicator type=\"linear\" label=\"Loading...\" size=\"small\" />\r\n<IcLoadingIndicator type=\"linear\" label=\"Loading...\" size=\"large\" />`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `<>\r\n {shortCode}\r\n</>`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `<>\r\n {shortCode}\r\n</>`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview\r\n snippets={snippetsSizes}\r\n style={{ flexDirection: \"column\", gap: \"0.5rem\" }}\r\n>\r\n <IcLoadingIndicator type=\"circular\" label=\"Loading...\" size=\"small\" />\r\n <IcLoadingIndicator type=\"circular\" label=\"Loading...\" size=\"large\" />\r\n <IcLoadingIndicator type=\"linear\" label=\"Loading...\" size=\"small\" />\r\n <IcLoadingIndicator type=\"linear\" label=\"Loading...\" size=\"large\" />\r\n</ComponentPreview>\r\n\r\n### Icon\r\n\r\nexport const snippetsIcon = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-loading-indicator size=\"icon\"></ic-loading-indicator>`,\r\n long: `{shortCode}`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcLoadingIndicator size=\"icon\" />`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `{shortCode}`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `{shortCode}`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview snippets={snippetsIcon}>\r\n <IcLoadingIndicator size=\"icon\" />\r\n</ComponentPreview>\r\n\r\n### Determinate\r\n\r\nexport const snippetsDeterminate = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-loading-indicator type=\"circular\" label=\"Progress 30%\" progress=\"30\" min=\"0\" max=\"100\"></ic-loading-indicator>\r\n<ic-loading-indicator type=\"linear\" label=\"Progress 30%\" progress=\"30\" min=\"0\" max=\"100\"></ic-loading-indicator>`,\r\n long: `{shortCode}`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcLoadingIndicator type=\"circular\" label=\"Progress 30%\" progress=\"30\" min=\"0\" max=\"100\" />\r\n<IcLoadingIndicator type=\"linear\" label=\"Progress 30%\" progress=\"30\" min=\"0\" max=\"100\" />`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `<>\r\n {shortCode}\r\n</>`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `<>\r\n {shortCode}\r\n</>`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview\r\n snippets={snippetsDeterminate}\r\n style={{ flexDirection: \"column\", gap: \"0.5rem\" }}\r\n>\r\n <IcLoadingIndicator\r\n type=\"circular\"\r\n label=\"Progress 30%\"\r\n progress=\"30\"\r\n min=\"0\"\r\n max=\"100\"\r\n />\r\n <IcLoadingIndicator\r\n type=\"linear\"\r\n label=\"Progress 30%\"\r\n progress=\"30\"\r\n min=\"0\"\r\n max=\"100\"\r\n />\r\n</ComponentPreview>\r\n\r\n### Light\r\n\r\nexport const snippetsLight = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-loading-indicator\r\n type=\"circular\"\r\n label=\"Loading\"\r\n appearance=\"light\"\r\n ></ic-loading-indicator>\r\n <ic-loading-indicator\r\n type=\"linear\"\r\n label=\"Loading\"\r\n appearance=\"light\"\r\n ></ic-loading-indicator>`,\r\n long: `.dark-background {\r\n flex-direction: column; \r\n gap: var(--ic-space-xs); \r\n background: #333333;\r\n }\r\n </style>\r\n <body>\r\n <div class=\"dark-background\">\r\n {shortCode}\r\n </div>`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcLoadingIndicator type=\"circular\" label=\"Loading\" appearance=\"light\" />\r\n<IcLoadingIndicator type=\"linear\" label=\"Loading\" appearance=\"light\" />`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `const useStyles = createUseStyles({\r\n darkBackground: {\r\n display: \"flex\",\r\n flexDirection: \"column\", \r\n gap: \"var(--ic-space-xs)\", \r\n background: \"#333333\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nreturn (\r\n <div className={classes.darkBackground}>\r\n {shortCode}\r\n </div>\r\n)`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `const useStyles = createUseStyles({\r\n darkBackground: {\r\n display: \"flex\",\r\n flexDirection: \"column\", \r\n gap: \"var(--ic-space-xs)\", \r\n background: \"#333333\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nreturn (\r\n <div className={classes.darkBackground}>\r\n {shortCode}\r\n </div>\r\n)`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview\r\n snippets={snippetsLight}\r\n style={{ flexDirection: \"column\", gap: \"0.5rem\", background: \"#333333\" }}\r\n>\r\n <IcLoadingIndicator type=\"circular\" label=\"Loading\" appearance=\"light\" />\r\n <IcLoadingIndicator type=\"linear\" label=\"Loading\" appearance=\"light\" />\r\n</ComponentPreview>\r\n\r\n### Changing label\r\n\r\nexport const snippetsChangingLabel = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-loading-indicator type=\"circular\" label=\"Loading.../Still loading...\" label-duration=\"4000\"></ic-loading-indicator>`,\r\n long: `{shortCode}`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcLoadingIndicator\r\n type=\"circular\"\r\n label=\"Loading.../Still loading...\"\r\n labelDuration={4000}\r\n />`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `{shortCode}`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `{shortCode}`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview snippets={snippetsChangingLabel}>\r\n <IcLoadingIndicator\r\n type=\"circular\"\r\n label=\"Loading.../Still loading...\"\r\n labelDuration={4000}\r\n />\r\n</ComponentPreview>\r\n",
"path": "/components/loading-indicator/code",
"date": "2024-05-31",
"title": "Loading indicator",
@@ -2597,16 +2597,16 @@
}
],
"meta": {
- "relativePath": "components/loading-indicators/code.mdx",
- "createdAt": "2024-11-06T10:27:49.404Z",
- "lastModified": "2024-11-06T10:19:00.072Z",
- "size": 7783,
- "formattedSize": "7.6 KB"
+ "relativePath": "components\\loading-indicators\\code.mdx",
+ "createdAt": "2024-12-04T13:23:54.104Z",
+ "lastModified": "2024-12-04T13:23:54.104Z",
+ "size": 8111,
+ "formattedSize": "7.9 KB"
}
},
{
"id": "components\\loading-indicators\\guidancex",
- "contents": "\nimport { IcLoadingIndicator, IcTypography } from \"@ukic/react\";\nimport loadingIndicatorFig1 from \"./images/fig-1-use-clear-concise-and-specific-labels.png\";\nimport loadingIndicatorFig2 from \"./images/fig-2-do-not-make-labels-unnecessarily-long.png\";\nimport loadingIndicatorFig3 from \"./images/fig-3-always-centre-the-component.png\";\nimport loadingIndicatorFig4 from \"./images/fig-4-do-not-position-the-loading-indicators-on-other-parts-of-the-page-or-container.png\";\nimport loadingIndicatorFig5 from \"./images/fig-5-place-the-full-width-indicator-at-the-top-of-the-container.png\";\nimport loadingIndicatorFig6 from \"./images/fig-6-do-not-position-full-width-loading-indicators-on-other-parts-of-the-container.png\";\nimport loadingIndicatorFig7 from \"./images/fig-7-place-loading-indicators-in-modals-when-overlayed-on-other-content.png\";\nimport loadingIndicatorFig8 from \"./images/fig-8-do-not-place-loading-indicators-over-other-content.png\";\n\n## Component variants\n\nLoading indicators have two variants: radial and linear.\n\nLoading indicators can either be determinate or indeterminate:\n\n- Use determinate loading indicators when the percentage of completion can be determined.\n- Use indeterminate loading indicators when the process completion rate can't be determined.\n\n## Radial\n\nRadial loading indicators have four sizes:\n\n- Small\n- Default\n- Large\n- Icon\n\nThe icon size is available for use within other components.\n\n<ComponentPreview>\n <IcLoadingIndicator type=\"circular\" progress=\"50\" max=\"100\" label=\"50%\" />\n</ComponentPreview>\n\n<IcTypography\n variant=\"label\"\n style={{ marginTop: \"-1rem\", marginBottom: \"1.5rem\" }}\n>\n Radial determinate.\n</IcTypography>\n\n<ComponentPreview>\n <IcLoadingIndicator type=\"circular\" label=\"Loading...\" />\n</ComponentPreview>\n\n<IcTypography\n variant=\"label\"\n style={{ marginTop: \"-1rem\", marginBottom: \"1.5rem\" }}\n>\n Radial indeterminate.\n</IcTypography>\n\n## Linear\n\nLinear loading indicators have three sizes:\n\n- Small\n- Default\n- Large\n\nLinear loading indicators have two variants:\n\n- Default\n- Full-width\n\nLinear loading indicators can be set to full-width to span its container.\n\n<ComponentPreview>\n <IcLoadingIndicator\n style={{ width: \"15rem\" }}\n type=\"linear\"\n label=\"50%\"\n progress=\"50\"\n max=\"100\"\n />\n</ComponentPreview>\n\n<IcTypography\n variant=\"label\"\n style={{ marginTop: \"-1rem\", marginBottom: \"1.5rem\" }}\n>\n Linear determinate.\n</IcTypography>\n\n<ComponentPreview>\n <IcLoadingIndicator\n style={{ width: \"15rem\" }}\n type=\"linear\"\n label=\"Loading...\"\n max=\"100\"\n />\n</ComponentPreview>\n\n<IcTypography\n variant=\"label\"\n style={{ marginTop: \"-1rem\", marginBottom: \"1.5rem\" }}\n>\n Linear indeterminate.\n</IcTypography>\n\n## When to use\n\nUse loading indicators when loading full pages or containers where the structure is unknown.\n\nUse determinate loading indicators wherever the percentage of completion can be calculated.\n\n## When not to use\n\nAvoid using loading indicators when loading full pages if the structure of the page loading is known. Instead, use the [skeleton](/components/skeleton) component.\n\n## Content\n\n### Labels\n\nDeterminate loading indicators feature the percentage completion rate in percentage points, 0 to 100%.\n\nIndeterminate loading indicators have a customisable label. The label can be set to change after a specified amount of time. Make sure to display each label for at least five seconds. Keep labels clear and concise. Where possible, provide specific labels to the process being performed.\n\n<DoubleDoDontCaution>\n <DoDontCaution\n imageSrc={loadingIndicatorFig1}\n imageAlt=\"A graphic of a radial loading indicator with the label of 'Submitting form...'.\"\n state=\"good\"\n caption=\"Use clear, concise and specific labels.\"\n />\n <DoDontCaution\n imageSrc={loadingIndicatorFig2}\n imageAlt=\"A graphic of a radial loading indicator with the label of ‘The form is now being submitted... Please wait...’.\"\n state=\"bad\"\n caption=\"Don’t make labels unnecessarily long.\"\n />\n</DoubleDoDontCaution>\n\n## Layout and placement\n\nLoading indicators always appear centred within their container. If the whole page is loading, position the loading indicator at the centre of the page. If the loading indicator is used inside another component, like a card, position the loading indicator at the centre of the component.\n\n<DoubleDoDontCaution>\n <DoDontCaution\n imageSrc={loadingIndicatorFig3}\n imageAlt=\"A graphic of a radial loading indicator positioned in the middle of a blank page.\"\n state=\"good\"\n caption=\"Always centre the component.\"\n />\n <DoDontCaution\n imageSrc={loadingIndicatorFig4}\n imageAlt=\"A graphic of a radial loading indicator positioned in the top left corner of a blank page.\"\n state=\"bad\"\n caption=\"Don’t position the loading indicators on other parts of the page or container.\"\n />\n</DoubleDoDontCaution>\n\nWhen using the full-width variant of linear loading indicators, make sure to place this at the top of the component or page. Also, make sure that the loading indicator takes up the full width of the component or page.\n\n<DoubleDoDontCaution>\n <DoDontCaution\n imageSrc={loadingIndicatorFig5}\n imageAlt=\"A graphic of a full width loading indicator at the top of a page.\"\n state=\"good\"\n caption=\"Place the full width indicator at the top of the container.\"\n />\n <DoDontCaution\n imageSrc={loadingIndicatorFig6}\n imageAlt=\"A graphic of a full width loading indicator positioned in the centre of a container with a bigger width.\"\n state=\"bad\"\n caption=\"Don’t position full width loading indicators on other parts of the container. Make sure it has the same width of this container.\"\n />\n</DoubleDoDontCaution>\n\nIf loading indicators are overlaid on other content, place them in a dialog.\n\n<DoDontCaution\n imageSrc={loadingIndicatorFig7}\n imageAlt=\"A loading indicator placed inside a modal dialog, overlaid on a page filled with content.\"\n state=\"good\"\n caption=\"Place loading indicators in dialogs when overlaid on other content.\"\n/>\n\n<DoDontCaution\n imageSrc={loadingIndicatorFig8}\n imageAlt=\"A loading indicator overlaid on a page filled with content.\"\n state=\"bad\"\n caption=\"Don’t place loading indicators over other content, even if changing the opacity of the background.\"\n/>\n",
+ "contents": "\r\nimport { IcLoadingIndicator, IcTypography } from \"@ukic/react\";\r\nimport loadingIndicatorFig1 from \"./images/fig-1-use-clear-concise-and-specific-labels.png\";\r\nimport loadingIndicatorFig2 from \"./images/fig-2-do-not-make-labels-unnecessarily-long.png\";\r\nimport loadingIndicatorFig3 from \"./images/fig-3-always-centre-the-component.png\";\r\nimport loadingIndicatorFig4 from \"./images/fig-4-do-not-position-the-loading-indicators-on-other-parts-of-the-page-or-container.png\";\r\nimport loadingIndicatorFig5 from \"./images/fig-5-place-the-full-width-indicator-at-the-top-of-the-container.png\";\r\nimport loadingIndicatorFig6 from \"./images/fig-6-do-not-position-full-width-loading-indicators-on-other-parts-of-the-container.png\";\r\nimport loadingIndicatorFig7 from \"./images/fig-7-place-loading-indicators-in-modals-when-overlayed-on-other-content.png\";\r\nimport loadingIndicatorFig8 from \"./images/fig-8-do-not-place-loading-indicators-over-other-content.png\";\r\n\r\n## Component variants\r\n\r\nLoading indicators have two variants: radial and linear.\r\n\r\nLoading indicators can either be determinate or indeterminate:\r\n\r\n- Use determinate loading indicators when the percentage of completion can be determined.\r\n- Use indeterminate loading indicators when the process completion rate can't be determined.\r\n\r\n## Radial\r\n\r\nRadial loading indicators have four sizes:\r\n\r\n- Small\r\n- Default\r\n- Large\r\n- Icon\r\n\r\nThe icon size is available for use within other components.\r\n\r\n<ComponentPreview>\r\n <IcLoadingIndicator type=\"circular\" progress=\"50\" max=\"100\" label=\"50%\" />\r\n</ComponentPreview>\r\n\r\n<IcTypography\r\n variant=\"label\"\r\n style={{ marginTop: \"-1rem\", marginBottom: \"1.5rem\" }}\r\n>\r\n Radial determinate.\r\n</IcTypography>\r\n\r\n<ComponentPreview>\r\n <IcLoadingIndicator type=\"circular\" label=\"Loading...\" />\r\n</ComponentPreview>\r\n\r\n<IcTypography\r\n variant=\"label\"\r\n style={{ marginTop: \"-1rem\", marginBottom: \"1.5rem\" }}\r\n>\r\n Radial indeterminate.\r\n</IcTypography>\r\n\r\n## Linear\r\n\r\nLinear loading indicators have three sizes:\r\n\r\n- Small\r\n- Default\r\n- Large\r\n\r\nLinear loading indicators have two variants:\r\n\r\n- Default\r\n- Full-width\r\n\r\nLinear loading indicators can be set to full-width to span its container.\r\n\r\n<ComponentPreview>\r\n <IcLoadingIndicator\r\n style={{ width: \"15rem\" }}\r\n type=\"linear\"\r\n label=\"50%\"\r\n progress=\"50\"\r\n max=\"100\"\r\n />\r\n</ComponentPreview>\r\n\r\n<IcTypography\r\n variant=\"label\"\r\n style={{ marginTop: \"-1rem\", marginBottom: \"1.5rem\" }}\r\n>\r\n Linear determinate.\r\n</IcTypography>\r\n\r\n<ComponentPreview>\r\n <IcLoadingIndicator\r\n style={{ width: \"15rem\" }}\r\n type=\"linear\"\r\n label=\"Loading...\"\r\n max=\"100\"\r\n />\r\n</ComponentPreview>\r\n\r\n<IcTypography\r\n variant=\"label\"\r\n style={{ marginTop: \"-1rem\", marginBottom: \"1.5rem\" }}\r\n>\r\n Linear indeterminate.\r\n</IcTypography>\r\n\r\n## When to use\r\n\r\nUse loading indicators when loading full pages or containers where the structure is unknown.\r\n\r\nUse determinate loading indicators wherever the percentage of completion can be calculated.\r\n\r\n## When not to use\r\n\r\nAvoid using loading indicators when loading full pages if the structure of the page loading is known. Instead, use the [skeleton](/components/skeleton) component.\r\n\r\n## Content\r\n\r\n### Labels\r\n\r\nDeterminate loading indicators feature the percentage completion rate in percentage points, 0 to 100%.\r\n\r\nIndeterminate loading indicators have a customisable label. The label can be set to change after a specified amount of time. Make sure to display each label for at least five seconds. Keep labels clear and concise. Where possible, provide specific labels to the process being performed.\r\n\r\n<DoubleDoDontCaution>\r\n <DoDontCaution\r\n imageSrc={loadingIndicatorFig1}\r\n imageAlt=\"A graphic of a radial loading indicator with the label of 'Submitting form...'.\"\r\n state=\"good\"\r\n caption=\"Use clear, concise and specific labels.\"\r\n />\r\n <DoDontCaution\r\n imageSrc={loadingIndicatorFig2}\r\n imageAlt=\"A graphic of a radial loading indicator with the label of ‘The form is now being submitted... Please wait...’.\"\r\n state=\"bad\"\r\n caption=\"Don’t make labels unnecessarily long.\"\r\n />\r\n</DoubleDoDontCaution>\r\n\r\n## Layout and placement\r\n\r\nLoading indicators always appear centred within their container. If the whole page is loading, position the loading indicator at the centre of the page. If the loading indicator is used inside another component, like a card, position the loading indicator at the centre of the component.\r\n\r\n<DoubleDoDontCaution>\r\n <DoDontCaution\r\n imageSrc={loadingIndicatorFig3}\r\n imageAlt=\"A graphic of a radial loading indicator positioned in the middle of a blank page.\"\r\n state=\"good\"\r\n caption=\"Always centre the component.\"\r\n />\r\n <DoDontCaution\r\n imageSrc={loadingIndicatorFig4}\r\n imageAlt=\"A graphic of a radial loading indicator positioned in the top left corner of a blank page.\"\r\n state=\"bad\"\r\n caption=\"Don’t position the loading indicators on other parts of the page or container.\"\r\n />\r\n</DoubleDoDontCaution>\r\n\r\nWhen using the full-width variant of linear loading indicators, make sure to place this at the top of the component or page. Also, make sure that the loading indicator takes up the full width of the component or page.\r\n\r\n<DoubleDoDontCaution>\r\n <DoDontCaution\r\n imageSrc={loadingIndicatorFig5}\r\n imageAlt=\"A graphic of a full width loading indicator at the top of a page.\"\r\n state=\"good\"\r\n caption=\"Place the full width indicator at the top of the container.\"\r\n />\r\n <DoDontCaution\r\n imageSrc={loadingIndicatorFig6}\r\n imageAlt=\"A graphic of a full width loading indicator positioned in the centre of a container with a bigger width.\"\r\n state=\"bad\"\r\n caption=\"Don’t position full width loading indicators on other parts of the container. Make sure it has the same width of this container.\"\r\n />\r\n</DoubleDoDontCaution>\r\n\r\nIf loading indicators are overlaid on other content, place them in a dialog.\r\n\r\n<DoDontCaution\r\n imageSrc={loadingIndicatorFig7}\r\n imageAlt=\"A loading indicator placed inside a modal dialog, overlaid on a page filled with content.\"\r\n state=\"good\"\r\n caption=\"Place loading indicators in dialogs when overlaid on other content.\"\r\n/>\r\n\r\n<DoDontCaution\r\n imageSrc={loadingIndicatorFig8}\r\n imageAlt=\"A loading indicator overlaid on a page filled with content.\"\r\n state=\"bad\"\r\n caption=\"Don’t place loading indicators over other content, even if changing the opacity of the background.\"\r\n/>\r\n",
"path": "/components/loading-indicator",
"navPriority": 21,
"date": "2023-02-03",
@@ -2630,16 +2630,16 @@
],
"tags": ["Progress bar", "Progress indicator", "Spinner"],
"meta": {
- "relativePath": "components/loading-indicators/guidance.mdx",
- "createdAt": "2024-11-06T10:27:49.404Z",
- "lastModified": "2024-11-06T10:19:00.072Z",
- "size": 7001,
- "formattedSize": "6.8 KB"
+ "relativePath": "components\\loading-indicators\\guidance.mdx",
+ "createdAt": "2024-12-04T13:23:54.105Z",
+ "lastModified": "2024-12-04T13:23:54.105Z",
+ "size": 7213,
+ "formattedSize": "7.0 KB"
}
},
{
"id": "components\\multi-select\\codex",
- "contents": "\nimport { IcSelectWithMulti } from \"@ukic/canary-react\";\n\nimport {\n OPTIONS,\n OPTIONS_WITH_DESCRIPTIONS,\n OPTIONS_WITH_DISABLED,\n GROUPED_OPTIONS,\n OPTIONS_WITH_RECOMMENDED,\n} from \"./story-data\";\n\n## Component demo\n\nexport const snippets = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-select-with-multi\n id=\"select-default\"\n label=\"What are your favourite types of coffee?\"\n multiple=\"true\"\n></ic-select-with-multi>`,\n long: `.parent-container {\n padding: var(--ic-space-md);\n }\n</style>\n<body>\n <div class=\"parent-container\">\n {shortCode}\n </div>\n <script>\n var select = document.querySelector(\"#select-default\");\n select.options = [\n { label: \"Cappuccino\", value: \"Cap\" },\n { label: \"Latte\", value: \"Lat\", disabled: true },\n { label: \"Americano\", value: \"Ame\" },\n { label: \"Filter\", value: \"Fil\", disabled: true },\n { label: \"Flat white\", value: \"Fla\", disabled: true },\n { label: \"Mocha\", value: \"Moc\" },\n { label: \"Macchiato\", value: \"Mac\" },\n ];\n select.addEventListener(\"icChange\", function (event) {\n console.log(event.detail.value);\n });\n </script>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcSelectWithMulti\n label=\"What are your favourite types of coffee?\"\n options={options}\n onIcChange={(event) => console.log(event.detail.value)}\n onIcOptionSelect={(event) => console.log(event.detail.value)}\n onIcOptionDeselect={(event) => console.log(event.detail.value)}\n multiple\n/>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n padding: \"var(--ic-space-md)\",\n },\n});\nconst classes = useStyles();\nconst options = [\n { label: \"Cappuccino\", value: \"Cap\" },\n { label: \"Latte\", value: \"Lat\" },\n { label: \"Americano\", value: \"Ame\" },\n { label: \"Filter\", value: \"Fil\" },\n { label: \"Flat white\", value: \"Fla\" },\n { label: \"Mocha\", value: \"Moc\" },\n { label: \"Macchiato\", value: \"Mac\" },\n];\nreturn ( \n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n padding: \"var(--ic-space-md)\",\n },\n});\nconst classes = useStyles();\nreturn ( \n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={snippets}>\n <IcSelectWithMulti\n label=\"What are your favourite types of coffee?\"\n options={OPTIONS}\n multiple\n />\n</ComponentPreview>\n\n## Select with multi details\n\n<ComponentDetails component=\"ic-select-with-multi\" canary />\n\n## Variants\n\n### Default value\n\nShow options as pre-selected by setting the `value` prop to an array containing the values of these options.\n\nexport const defaultValue = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-select-with-multi\n id=\"select-default\"\n label=\"What are your favourite types of coffee?\"\n multiple=\"true\"\n></ic-select-with-multi>`,\n long: `.parent-container {\n padding: var(--ic-space-md);\n }\n</style>\n<body>\n <div class=\"parent-container\">\n {shortCode}\n </div>\n <script>\n var select = document.querySelector(\"#select-default\");\n select.value = [\"Ame\", \"Fil\", \"Moc\"];\n select.options = [\n { label: \"Cappuccino\", value: \"Cap\" },\n { label: \"Latte\", value: \"Lat\" },\n { label: \"Americano\", value: \"Ame\" },\n { label: \"Filter\", value: \"Fil },\n { label: \"Flat white\", value: \"Fla\" },\n { label: \"Mocha\", value: \"Moc\" },\n { label: \"Macchiato\", value: \"Mac\" },\n ];\n select.value = [\"Cap\", \"Fla\", \"Moc\"];\n select.addEventListener(\"icChange\", function (event) {\n console.log(event.detail.value);\n });\n </script>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcSelectWithMulti\n label=\"What are your favourite types of coffee?\"\n value={[\"Ame\", \"Fil\", \"Moc\"]}\n options={options}\n onIcChange={(event) => console.log(event.detail.value)}\n onIcOptionSelect={(event) => console.log(event.detail.value)}\n onIcOptionDeselect={(event) => console.log(event.detail.value)}\n multiple\n/>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n padding: \"var(--ic-space-md)\",\n },\n});\nconst classes = useStyles();\nconst options = [\n { label: \"Cappuccino\", value: \"Cap\" },\n { label: \"Latte\", value: \"Lat\" },\n { label: \"Americano\", value: \"Ame\" },\n { label: \"Filter\", value: \"Fil\" },\n { label: \"Flat white\", value: \"Fla\" },\n { label: \"Mocha\", value: \"Moc\" },\n { label: \"Macchiato\", value: \"Mac\" },\n];\nreturn ( \n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n padding: \"var(--ic-space-md)\",\n },\n});\nconst classes = useStyles();\nconst options = [\n { label: \"Cappuccino\", value: \"Cap\" },\n { label: \"Latte\", value: \"Lat\" },\n { label: \"Americano\", value: \"Ame\" },\n { label: \"Filter\", value: \"Fil\" },\n { label: \"Flat white\", value: \"Fla\" },\n { label: \"Mocha\", value: \"Moc\" },\n { label: \"Macchiato\", value: \"Mac\" },\n];\nreturn ( \n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={defaultValue}>\n <IcSelectWithMulti\n label=\"What are your favourite types of coffee?\"\n value={[\"Ame\", \"Fil\", \"Moc\"]}\n options={OPTIONS}\n multiple\n />\n</ComponentPreview>\n\n### With clear button\n\nDisplay a clear button by using the `showClearButton` prop.\n\nThis will appear when the user has selected some options and allow them to easily clear their selection.\n\nexport const clear = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-select-with-multi\n id=\"select-default\"\n label=\"What are your favourite types of coffee?\"\n multiple=\"true\"\n show-clear-button=\"true\"\n></ic-select-with-multi>`,\n long: `.parent-container {\n padding: var(--ic-space-md);\n }\n</style>\n<body>\n <div class=\"parent-container\">\n {shortCode}\n </div>\n <script>\n var select = document.querySelector(\"#select-default\");\n select.options = [\n { label: \"Cappuccino\", value: \"Cap\" },\n { label: \"Latte\", value: \"Lat\" },\n { label: \"Americano\", value: \"Ame\" },\n { label: \"Filter\", value: \"Fil },\n { label: \"Flat white\", value: \"Fla\" },\n { label: \"Mocha\", value: \"Moc\" },\n { label: \"Macchiato\", value: \"Mac\" },\n ];\n select.addEventListener(\"icChange\", function (event) {\n console.log(event.detail.value);\n });\n </script>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcSelectWithMulti\n label=\"What are your favourite types of coffee?\"\n options={options}\n onIcChange={(event) => console.log(event.detail.value)}\n onIcOptionSelect={(event) => console.log(event.detail.value)}\n onIcOptionDeselect={(event) => console.log(event.detail.value)}\n multiple\n showClearButton\n/>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n padding: \"var(--ic-space-md)\",\n },\n});\nconst classes = useStyles();\nconst options = [\n { label: \"Cappuccino\", value: \"Cap\" },\n { label: \"Latte\", value: \"Lat\" },\n { label: \"Americano\", value: \"Ame\" },\n { label: \"Filter\", value: \"Fil\" },\n { label: \"Flat white\", value: \"Fla\" },\n { label: \"Mocha\", value: \"Moc\" },\n { label: \"Macchiato\", value: \"Mac\" },\n];\nreturn ( \n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n padding: \"var(--ic-space-md)\",\n },\n});\nconst classes = useStyles();\nconst options = [\n { label: \"Cappuccino\", value: \"Cap\" },\n { label: \"Latte\", value: \"Lat\" },\n { label: \"Americano\", value: \"Ame\" },\n { label: \"Filter\", value: \"Fil\" },\n { label: \"Flat white\", value: \"Fla\" },\n { label: \"Mocha\", value: \"Moc\" },\n { label: \"Macchiato\", value: \"Mac\" },\n];\nreturn ( \n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={clear}>\n <IcSelectWithMulti\n label=\"What are your favourite types of coffee?\"\n showClearButton\n options={OPTIONS}\n multiple\n />\n</ComponentPreview>\n\n### With descriptions\n\nDisplay extra information about the options by providing a description using the `description` property for each option.\n\nexport const desc = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-select-with-multi\n id=\"select-default\"\n label=\"What are your favourite types of coffee?\"\n multiple=\"true\"\n></ic-select-with-multi>`,\n long: `.parent-container {\n padding: var(--ic-space-md);\n }\n</style>\n<body>\n <div class=\"parent-container\">\n {shortCode}\n </div>\n <script>\n var select = document.querySelector(\"#select-default\");\n select.options = [\n {\n label: \"Cappuccino\",\n value: \"Cap\",\n description: \"Coffee frothed up with pressurised steam\",\n },\n {\n label: \"Latte\",\n value: \"Lat\",\n description: \"A milkier coffee than a cappuccino\",\n },\n {\n label: \"Americano\",\n value: \"Ame\",\n description: \"Espresso coffee diluted with hot water\",\n },\n {\n label: \"Filter\",\n value: \"Fil\",\n description: \"Coffee filtered using paper or a mesh\",\n },\n {\n label: \"Flat white\",\n value: \"Fla\",\n description:\n \"Coffee without froth made with espresso and hot steamed milk\",\n },\n {\n label: \"Mocha\",\n value: \"Moc\",\n description: \"A mixture of coffee and chocolate\",\n },\n {\n label: \"Macchiato\",\n value: \"Mac\",\n description: \"Espresso coffee with a dash of frothy steamed milk\",\n },\n ];\n </script>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcSelectWithMulti\n label=\"What are your favourite types of coffee?\"\n options={options}\n onIcChange={(event) => console.log(event.detail.value)}\n onIcOptionSelect={(event) => console.log(event.detail.value)}\n onIcOptionDeselect={(event) => console.log(event.detail.value)}\n multiple\n/>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n padding: \"var(--ic-space-md)\",\n },\n});\nconst classes = useStyles();\nconst options = [\n {\n label: \"Cappuccino\",\n value: \"Cap\",\n description: \"Coffee frothed up with pressurised steam\",\n },\n {\n label: \"Latte\",\n value: \"Lat\",\n description: \"A milkier coffee than a cappuccino\",\n },\n {\n label: \"Americano\",\n value: \"Ame\",\n description: \"Espresso coffee diluted with hot water\",\n },\n {\n label: \"Filter\",\n value: \"Fil\",\n description: \"Coffee filtered using paper or a mesh\",\n },\n {\n label: \"Flat white\",\n value: \"Fla\",\n description:\n \"Coffee without froth made with espresso and hot steamed milk\",\n },\n {\n label: \"Mocha\",\n value: \"Moc\",\n description: \"A mixture of coffee and chocolate\",\n },\n {\n label: \"Macchiato\",\n value: \"Mac\",\n description: \"Espresso coffee with a dash of frothy steamed milk\",\n },\n];\nreturn ( \n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n padding: \"var(--ic-space-md)\",\n },\n});\nconst classes = useStyles();\nconst options = [\n {\n label: \"Cappuccino\",\n value: \"Cap\",\n description: \"Coffee frothed up with pressurised steam\",\n },\n {\n label: \"Latte\",\n value: \"Lat\",\n description: \"A milkier coffee than a cappuccino\",\n },\n {\n label: \"Americano\",\n value: \"Ame\",\n description: \"Espresso coffee diluted with hot water\",\n },\n {\n label: \"Filter\",\n value: \"Fil\",\n description: \"Coffee filtered using paper or a mesh\",\n },\n {\n label: \"Flat white\",\n value: \"Fla\",\n description:\n \"Coffee without froth made with espresso and hot steamed milk\",\n },\n {\n label: \"Mocha\",\n value: \"Moc\",\n description: \"A mixture of coffee and chocolate\",\n },\n {\n label: \"Macchiato\",\n value: \"Mac\",\n description: \"Espresso coffee with a dash of frothy steamed milk\",\n },\n];\nreturn ( \n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={desc}>\n <IcSelectWithMulti\n label=\"What are your favourite types of coffee?\"\n options={OPTIONS_WITH_DESCRIPTIONS}\n multiple\n />\n</ComponentPreview>\n\n### Helper text\n\nDisplay helper text to provide additional information by using the `helperText` prop.\n\nexport const helper = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-select-with-multi\n id=\"select-default\"\n label=\"What are your favourite types of coffee?\"\n helper-text=\"Select some options from the list\"\n multiple=\"true\"\n></ic-select-with-multi>`,\n long: `.parent-container {\n padding: var(--ic-space-md);\n }\n</style>\n<body>\n <div class=\"parent-container\">\n {shortCode}\n </div>\n <script>\n var select = document.querySelector(\"#select-default\");\n select.options = [\n { label: \"Cappuccino\", value: \"Cap\" },\n { label: \"Latte\", value: \"Lat\" },\n { label: \"Americano\", value: \"Ame\" },\n { label: \"Filter\", value: \"Fil },\n { label: \"Flat white\", value: \"Fla\" },\n { label: \"Mocha\", value: \"Moc\" },\n { label: \"Macchiato\", value: \"Mac\" },\n ];\n select.addEventListener(\"icChange\", function (event) {\n console.log(event.detail.value);\n });\n </script>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcSelectWithMulti\n label=\"What are your favourite types of coffee?\"\n helperText=\"Select some options from the list\"\n options={options}\n onIcChange={(event) => console.log(event.detail.value)}\n onIcOptionSelect={(event) => console.log(event.detail.value)}\n onIcOptionDeselect={(event) => console.log(event.detail.value)}\n multiple\n/>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n padding: \"var(--ic-space-md)\",\n },\n});\nconst classes = useStyles();\nconst options = [\n { label: \"Cappuccino\", value: \"Cap\" },\n { label: \"Latte\", value: \"Lat\" },\n { label: \"Americano\", value: \"Ame\" },\n { label: \"Filter\", value: \"Fil\" },\n { label: \"Flat white\", value: \"Fla\" },\n { label: \"Mocha\", value: \"Moc\" },\n { label: \"Macchiato\", value: \"Mac\" },\n];\nreturn ( \n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n padding: \"var(--ic-space-md)\",\n },\n});\nconst classes = useStyles();\nconst options = [\n { label: \"Cappuccino\", value: \"Cap\" },\n { label: \"Latte\", value: \"Lat\" },\n { label: \"Americano\", value: \"Ame\" },\n { label: \"Filter\", value: \"Fil\" },\n { label: \"Flat white\", value: \"Fla\" },\n { label: \"Mocha\", value: \"Moc\" },\n { label: \"Macchiato\", value: \"Mac\" },\n];\nreturn ( \n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={helper}>\n <IcSelectWithMulti\n label=\"What are your favourite types of coffee?\"\n options={OPTIONS}\n multiple\n helperText=\"Select some options from the list\"\n />\n</ComponentPreview>\n\n### Sizes\n\nSet the size of the multi-select by using the `size` prop. This prop takes the values `small`, `default` or `large`.\nDepending on the chosen size, the prop will apply styling to increase or decrease the amount of spacing within the component.\nThe `default` variant is seen in the first [default](#default) example.\n\nexport const sizes = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-select-with-multi\n id=\"select-default-small\"\n label=\"What are your favourite types of coffee?\"\n multiple=\"true\"\n size=\"small\"\n></ic-select-with-multi>\n<ic-select-with-multi\n id=\"select-default\"\n label=\"What are your favourite types of coffee?\"\n multiple=\"true\"\n></ic-select-with-multi>\n<ic-select-with-multi\n id=\"select-default-large\"\n label=\"What are your favourite types of coffee?\"\n multiple=\"true\"\n size=\"large\"\n></ic-select-with-multi>`,\n long: `.parent-container {\n display: flex;\n flex-direction: column;\n gap: var(--ic-space-md);\n padding: var(--ic-space-md);\n }\n</style>\n<body>\n <div class=\"parent-container\">\n {shortCode}\n </div>\n <script>\n var select = document.querySelector(\"#select-default\");\n select.options = [\n { label: \"Cappuccino\", value: \"Cap\" },\n { label: \"Latte\", value: \"Lat\" },\n { label: \"Americano\", value: \"Ame\" },\n { label: \"Filter\", value: \"Fil },\n { label: \"Flat white\", value: \"Fla\" },\n { label: \"Mocha\", value: \"Moc\" },\n { label: \"Macchiato\", value: \"Mac\" },\n ];\n select.addEventListener(\"icChange\", function (event) {\n console.log(event.detail.value);\n });\n </script>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcSelectWithMulti\n label=\"What are your favourite types of coffee?\"\n options={options}\n multiple\n size=\"small\"\n/>\n<IcSelectWithMulti\n label=\"What are your favourite types of coffee?\"\n options={options}\n multiple\n/>\n<IcSelectWithMulti\n label=\"What are your favourite types of coffee?\"\n options={options}\n multiple\n size=\"large\"\n/>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"var(--ic-space-md)\",\n padding: \"var(--ic-space-md)\",\n },\n});\nconst classes = useStyles();\nconst options = [\n { label: \"Cappuccino\", value: \"Cap\" },\n { label: \"Latte\", value: \"Lat\" },\n { label: \"Americano\", value: \"Ame\" },\n { label: \"Filter\", value: \"Fil\" },\n { label: \"Flat white\", value: \"Fla\" },\n { label: \"Mocha\", value: \"Moc\" },\n { label: \"Macchiato\", value: \"Mac\" },\n];\nreturn ( \n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n display: \"flex\",\n flexDirection: \"column\",\n padding: \"var(--ic-space-md)\",\n },\n});\nconst classes = useStyles();\nconst options = [\n { label: \"Cappuccino\", value: \"Cap\" },\n { label: \"Latte\", value: \"Lat\" },\n { label: \"Americano\", value: \"Ame\" },\n { label: \"Filter\", value: \"Fil\" },\n { label: \"Flat white\", value: \"Fla\" },\n { label: \"Mocha\", value: \"Moc\" },\n { label: \"Macchiato\", value: \"Mac\" },\n];\nreturn ( \n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={sizes}>\n <div style={{ display: \"flex\", flexDirection: \"column\", gap: \"1rem\" }}>\n <IcSelectWithMulti\n label=\"What are your favourite types of coffee?\"\n options={OPTIONS}\n multiple\n size=\"small\"\n />\n <IcSelectWithMulti\n label=\"What are your favourite types of coffee?\"\n options={OPTIONS}\n multiple\n />\n <IcSelectWithMulti\n label=\"What are your favourite types of coffee?\"\n options={OPTIONS}\n multiple\n size=\"large\"\n />\n </div>\n</ComponentPreview>\n\n### Disabled\n\nDisable the multi-select and prevent user interaction by using the `disabled` prop.\n\nexport const disabled = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-select-with-multi\n label=\"What are your favourite types of coffee?\"\n multiple=\"true\"\n disabled=\"true\"\n></ic-select-with-multi>`,\n long: `.parent-container {\n padding: var(--ic-space-md);\n }\n</style>\n<body>\n <div class=\"parent-container\">\n {shortCode}\n </div>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcSelectWithMulti\n label=\"What are your favourite types of coffee?\"\n multiple\n disabled\n/>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n padding: \"var(--ic-space-md)\",\n },\n});\nconst classes = useStyles();\nconst options = [\n { label: \"Cappuccino\", value: \"Cap\" },\n { label: \"Latte\", value: \"Lat\" },\n { label: \"Americano\", value: \"Ame\" },\n { label: \"Filter\", value: \"Fil\" },\n { label: \"Flat white\", value: \"Fla\" },\n { label: \"Mocha\", value: \"Moc\" },\n { label: \"Macchiato\", value: \"Mac\" },\n];\nreturn ( \n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n padding: \"var(--ic-space-md)\",\n },\n});\nconst classes = useStyles();\nconst options = [\n { label: \"Cappuccino\", value: \"Cap\" },\n { label: \"Latte\", value: \"Lat\" },\n { label: \"Americano\", value: \"Ame\" },\n { label: \"Filter\", value: \"Fil\" },\n { label: \"Flat white\", value: \"Fla\" },\n { label: \"Mocha\", value: \"Moc\" },\n { label: \"Macchiato\", value: \"Mac\" },\n];\nreturn ( \n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={disabled}>\n <div style={{ display: \"flex\", flexDirection: \"column\", gap: \"1rem\" }}>\n <IcSelectWithMulti\n label=\"What are your favourite types of coffee?\"\n multiple\n disabled\n />\n </div>\n</ComponentPreview>\n\n### Disabled options\n\nDisable certain options by setting the `disabled` property to `true` for each option.\n\nexport const disabledOptions = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-select-with-multi\n id=\"select-default\"\n label=\"What are your favourite types of coffee?\"\n multiple=\"true\"\n></ic-select-with-multi>`,\n long: `.parent-container {\n padding: var(--ic-space-md);\n }\n</style>\n<body>\n <div class=\"parent-container\">\n {shortCode}\n </div>\n <script>\n var select = document.querySelector(\"#select-default\");\n select.options = [\n { label: \"Cappuccino\", value: \"Cap\" },\n { label: \"Latte\", value: \"Lat\", disabled: true },\n { label: \"Americano\", value: \"Ame\" },\n { label: \"Filter\", value: \"Fil\", disabled: true },\n { label: \"Flat white\", value: \"Fla\", disabled: true },\n { label: \"Mocha\", value: \"Moc\" },\n { label: \"Macchiato\", value: \"Mac\" },\n ];\n select.addEventListener(\"icChange\", function (event) {\n console.log(event.detail.value);\n });\n </script>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcSelectWithMulti\n label=\"What are your favourite types of coffee?\"\n options={options}\n onIcChange={(event) => console.log(event.detail.value)}\n onIcOptionSelect={(event) => console.log(event.detail.value)}\n onIcOptionDeselect={(event) => console.log(event.detail.value)}\n multiple\n/>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n padding: \"var(--ic-space-md)\",\n },\n});\nconst classes = useStyles();\nconst options = [\n { label: \"Cappuccino\", value: \"Cap\" },\n { label: \"Latte\", value: \"Lat\", disabled: true },\n { label: \"Americano\", value: \"Ame\" },\n { label: \"Filter\", value: \"Fil\", disabled: true },\n { label: \"Flat white\", value: \"Fla\", disabled: true },\n { label: \"Mocha\", value: \"Moc\" },\n { label: \"Macchiato\", value: \"Mac\" },\n];\nreturn ( \n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n padding: \"var(--ic-space-md)\",\n },\n});\nconst classes = useStyles();\nconst options = [\n { label: \"Cappuccino\", value: \"Cap\" },\n { label: \"Latte\", value: \"Lat\", disabled: true },\n { label: \"Americano\", value: \"Ame\" },\n { label: \"Filter\", value: \"Fil\", disabled: true },\n { label: \"Flat white\", value: \"Fla\", disabled: true },\n { label: \"Mocha\", value: \"Moc\" },\n { label: \"Macchiato\", value: \"Mac\" },\n];\nreturn ( \n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={disabledOptions}>\n <div style={{ display: \"flex\", flexDirection: \"column\", gap: \"1rem\" }}>\n <IcSelectWithMulti\n label=\"What are your favourite types of coffee?\"\n options={OPTIONS_WITH_DISABLED}\n multiple\n />\n </div>\n</ComponentPreview>\n\n### Hide label\n\nHide the visible label for the multi-select by using the `hideLabel` prop.\n\nexport const hideLabel = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-select-with-multi\n id=\"select-default\"\n label=\"What are your favourite types of coffee?\"\n multiple=\"true\"\n hide-label=\"true\"\n></ic-select-with-multi>`,\n long: `.parent-container {\n padding: var(--ic-space-md);\n }\n</style>\n<body>\n <div class=\"parent-container\">\n {shortCode}\n </div>\n <script>\n var select = document.querySelector(\"#select-default\");\n select.options = [\n { label: \"Cappuccino\", value: \"Cap\" },\n { label: \"Latte\", value: \"Lat\" },\n { label: \"Americano\", value: \"Ame\" },\n { label: \"Filter\", value: \"Fil\" },\n { label: \"Flat white\", value: \"Fla\" },\n { label: \"Mocha\", value: \"Moc\" },\n { label: \"Macchiato\", value: \"Mac\" },\n ];\n select.addEventListener(\"icChange\", function (event) {\n console.log(event.detail.value);\n });\n </script>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcSelectWithMulti\n label=\"What are your favourite types of coffee?\"\n options={options}\n multiple\n hideLabel\n/>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n padding: \"var(--ic-space-md)\",\n },\n});\nconst classes = useStyles();\nconst options = [\n { label: \"Cappuccino\", value: \"Cap\" },\n { label: \"Latte\", value: \"Lat\" },\n { label: \"Americano\", value: \"Ame\" },\n { label: \"Filter\", value: \"Fil\" },\n { label: \"Flat white\", value: \"Fla\" },\n { label: \"Mocha\", value: \"Moc\" },\n { label: \"Macchiato\", value: \"Mac\" },\n];\nreturn ( \n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n padding: \"var(--ic-space-md)\",\n },\n});\nconst classes = useStyles();\nconst options = [\n { label: \"Cappuccino\", value: \"Cap\" },\n { label: \"Latte\", value: \"Lat\" },\n { label: \"Americano\", value: \"Ame\" },\n { label: \"Filter\", value: \"Fil\" },\n { label: \"Flat white\", value: \"Fla\" },\n { label: \"Mocha\", value: \"Moc\" },\n { label: \"Macchiato\", value: \"Mac\" },\n];\nreturn (\n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={hideLabel}>\n <div style={{ display: \"flex\", flexDirection: \"column\", gap: \"1rem\" }}>\n <IcSelectWithMulti\n label=\"What are your favourite types of coffee?\"\n hideLabel\n multiple\n />\n </div>\n</ComponentPreview>\n\n### Required\n\nInform the user that the multi-select is a required field by using the `required` prop.\nThis will display an asterisk next to the label and apply the `aria-required` attribute.\n\nexport const required = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-select-with-multi\n id=\"select-default\"\n label=\"What are your favourite types of coffee?\"\n multiple=\"true\"\n required=\"true\"\n></ic-select-with-multi>`,\n long: `.parent-container {\n padding: var(--ic-space-md);\n }\n</style>\n<body>\n <div class=\"parent-container\">\n {shortCode}\n </div>\n <script>\n var select = document.querySelector(\"#select-default\");\n select.options = [\n { label: \"Cappuccino\", value: \"Cap\" },\n { label: \"Latte\", value: \"Lat\" },\n { label: \"Americano\", value: \"Ame\" },\n { label: \"Filter\", value: \"Fil\" },\n { label: \"Flat white\", value: \"Fla\" },\n { label: \"Mocha\", value: \"Moc\" },\n { label: \"Macchiato\", value: \"Mac\" },\n ];\n select.addEventListener(\"icChange\", function (event) {\n console.log(event.detail.value);\n });\n </script>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcSelectWithMulti\n label=\"What are your favourite types of coffee?\"\n options={options}\n multiple\n required\n/>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n padding: \"var(--ic-space-md)\",\n },\n});\nconst classes = useStyles();\nconst options = [\n { label: \"Cappuccino\", value: \"Cap\" },\n { label: \"Latte\", value: \"Lat\" },\n { label: \"Americano\", value: \"Ame\" },\n { label: \"Filter\", value: \"Fil\" },\n { label: \"Flat white\", value: \"Fla\" },\n { label: \"Mocha\", value: \"Moc\" },\n { label: \"Macchiato\", value: \"Mac\" },\n];\nreturn ( \n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n padding: \"var(--ic-space-md)\",\n },\n});\nconst classes = useStyles();\nconst options = [\n { label: \"Cappuccino\", value: \"Cap\" },\n { label: \"Latte\", value: \"Lat\" },\n { label: \"Americano\", value: \"Ame\" },\n { label: \"Filter\", value: \"Fil\" },\n { label: \"Flat white\", value: \"Fla\" },\n { label: \"Mocha\", value: \"Moc\" },\n { label: \"Macchiato\", value: \"Mac\" },\n];\nreturn ( \n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={required}>\n <div style={{ display: \"flex\", flexDirection: \"column\", gap: \"1rem\" }}>\n <IcSelectWithMulti\n label=\"What are your favourite types of coffee?\"\n multiple\n required\n options={OPTIONS}\n />\n </div>\n</ComponentPreview>\n\n### Read-only\n\nMake the multi-select read-only by using the `readonly` prop.\nUse the `value` prop to set which options are selected and will be displayed when it is read-only.\n\nexport const read = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-select-with-multi\n id=\"select-default\"\n label=\"What are your favourite types of coffee?\"\n multiple=\"true\"\n readonly=\"true\"\n></ic-select-with-multi>`,\n long: `.parent-container {\n padding: var(--ic-space-md);\n }\n</style>\n<body>\n <div class=\"parent-container\">\n {shortCode}\n </div>\n <script>\n var select = document.querySelector(\"#select-default\");\n select.options = [\n { label: \"Cappuccino\", value: \"Cap\" },\n { label: \"Latte\", value: \"Lat\" },\n { label: \"Americano\", value: \"Ame\" },\n { label: \"Filter\", value: \"Fil\" },\n { label: \"Flat white\", value: \"Fla\" },\n { label: \"Mocha\", value: \"Moc\" },\n { label: \"Macchiato\", value: \"Mac\" },\n ];\n select.value = [\"Cap\", \"Fla\", \"Moc\"];\n select.addEventListener(\"icChange\", function (event) {\n console.log(event.detail.value);\n });\n </script>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcSelectWithMulti\n value={[\"Cap\", \"Fla\", \"Moc\"]}\n label=\"What are your favourite types of coffee?\"\n options={options}\n multiple\n readonly\n/>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n padding: \"var(--ic-space-md)\",\n },\n});\nconst classes = useStyles();\nconst options = [\n { label: \"Cappuccino\", value: \"Cap\" },\n { label: \"Latte\", value: \"Lat\" },\n { label: \"Americano\", value: \"Ame\" },\n { label: \"Filter\", value: \"Fil\" },\n { label: \"Flat white\", value: \"Fla\" },\n { label: \"Mocha\", value: \"Moc\" },\n { label: \"Macchiato\", value: \"Mac\" },\n];\nreturn ( \n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n padding: \"var(--ic-space-md)\",\n },\n});\nconst classes = useStyles();\nconst options = [\n { label: \"Cappuccino\", value: \"Cap\" },\n { label: \"Latte\", value: \"Lat\" },\n { label: \"Americano\", value: \"Ame\" },\n { label: \"Filter\", value: \"Fil\" },\n { label: \"Flat white\", value: \"Fla\" },\n { label: \"Mocha\", value: \"Moc\" },\n { label: \"Macchiato\", value: \"Mac\" },\n];\nreturn ( \n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={read}>\n <div style={{ display: \"flex\", flexDirection: \"column\", gap: \"1rem\" }}>\n <IcSelectWithMulti\n label=\"What are your favourite types of coffee?\"\n multiple\n readonly\n options={OPTIONS}\n value={[\"Cap\", \"Fla\", \"Moc\"]}\n />\n </div>\n</ComponentPreview>\n\n### Groups\n\nDisplay options in groups by passing an array of child options to the `children` property of a parent option.\nThe parent option will be rendered as the title of the group.\n\nexport const group = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-select-with-multi\n id=\"select-default\"\n label=\"What are your favourite types of coffee?\"\n multiple=\"true\"\n></ic-select-with-multi>`,\n long: `.parent-container {\n padding: var(--ic-space-md);\n }\n</style>\n<body>\n <div class=\"parent-container\">\n {shortCode}\n </div>\n <script>\n var select = document.querySelector(\"#select-default\");\n select.options = [\n {\n label: \"Fancy\",\n children: [\n { label: \"Cappuccino\", value: \"Cap\" },\n { label: \"Flat white\", value: \"Flat\" },\n ],\n },\n {\n label: \"Boring\",\n children: [\n { label: \"Filter\", value: \"Fil\" },\n { label: \"Latte\", value: \"Lat\" },\n ],\n },\n ];\n select.addEventListener(\"icChange\", function (event) {\n console.log(event.detail.value);\n });\n </script>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcSelectWithMulti\n label=\"What are your favourite types of coffee?\"\n options={options}\n multiple\n/>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n padding: \"var(--ic-space-md)\",\n },\n});\nconst classes = useStyles();\nconst options = [\n {\n label: \"Fancy\",\n children: [\n { label: \"Cappuccino\", value: \"Cap\" },\n { label: \"Flat white\", value: \"Flat\" },\n ],\n },\n {\n label: \"Boring\",\n children: [\n { label: \"Filter\", value: \"Fil\" },\n { label: \"Latte\", value: \"Lat\" },\n ],\n },\n];\nreturn ( \n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n padding: \"var(--ic-space-md)\",\n },\n});\nconst classes = useStyles();\nconst options = [\n {\n label: \"Fancy\",\n children: [\n { label: \"Cappuccino\", value: \"Cap\" },\n { label: \"Flat white\", value: \"Flat\" },\n ],\n },\n {\n label: \"Boring\",\n children: [\n { label: \"Filter\", value: \"Fil\" },\n { label: \"Latte\", value: \"Lat\" },\n ],\n },\n];\nreturn ( \n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={group}>\n <div style={{ display: \"flex\", flexDirection: \"column\", gap: \"1rem\" }}>\n <IcSelectWithMulti\n label=\"What are your favourite types of coffee?\"\n multiple\n options={GROUPED_OPTIONS}\n />\n </div>\n</ComponentPreview>\n\n### Recommended\n\nDisplay certain options at the top of the option list by setting the `recommended` property to `true` on each option.\nThis will allow for quick access to these options.\n\nexport const recc = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-select-with-multi\n id=\"select-default\"\n label=\"What are your favourite types of coffee?\"\n multiple=\"true\"\n></ic-select-with-multi>`,\n long: `.parent-container {\n padding: var(--ic-space-md);\n }\n</style>\n<body>\n <div class=\"parent-container\">\n {shortCode}\n </div>\n <script>\n var select = document.querySelector(\"#select-default\");\n select.options = [\n { label: \"Cappuccino\", value: \"Cap\" },\n { label: \"Latte\", value: \"Lat\" },\n { label: \"Americano\", value: \"Ame\", recommended: true },\n { label: \"Filter\", value: \"Fil\" },\n { label: \"Flat white\", value: \"Fla\", recommended: true },\n { label: \"Mocha\", value: \"Moc\" },\n { label: \"Macchiato\", value: \"Mac\" },\n ];\n select.addEventListener(\"icChange\", function (event) {\n console.log(event.detail.value);\n });\n </script>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcSelectWithMulti\n label=\"What are your favourite types of coffee?\"\n options={options}\n multiple\n/>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n padding: \"var(--ic-space-md)\",\n },\n});\nconst classes = useStyles();\nconst options = [\n { label: \"Cappuccino\", value: \"Cap\" },\n { label: \"Latte\", value: \"Lat\" },\n { label: \"Americano\", value: \"Ame\", recommended: true },\n { label: \"Filter\", value: \"Fil\" },\n { label: \"Flat white\", value: \"Fla\", recommended: true },\n { label: \"Mocha\", value: \"Moc\" },\n { label: \"Macchiato\", value: \"Mac\" },\n];\nreturn ( \n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n padding: \"var(--ic-space-md)\",\n },\n});\nconst classes = useStyles();\nconst options = [\n { label: \"Cappuccino\", value: \"Cap\" },\n { label: \"Latte\", value: \"Lat\" },\n { label: \"Americano\", value: \"Ame\", recommended: true },\n { label: \"Filter\", value: \"Fil\" },\n { label: \"Flat white\", value: \"Fla\", recommended: true },\n { label: \"Mocha\", value: \"Moc\" },\n { label: \"Macchiato\", value: \"Mac\" },\n];\nreturn ( \n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={recc}>\n <div style={{ display: \"flex\", flexDirection: \"column\", gap: \"1rem\" }}>\n <IcSelectWithMulti\n label=\"What are your favourite types of coffee?\"\n multiple\n options={OPTIONS_WITH_RECOMMENDED}\n />\n </div>\n</ComponentPreview>\n\n### Validation\n\nDisplay a validation status and message by using the `validation-status` and `validation-message` props.\nThe `validation-status` prop takes the values `success`, `warning` or `error`.\n\nexport const validation = [\n {\n technology: \"Web component\",\n snippets: {\n short: ` <ic-select-with-multi\n id=\"select-default\"\n label=\"What are your favourite types of coffee?\"\n multiple=\"true\"\n validation-status=\"success\"\n validation-text=\"Coffee available\"\n></ic-select-with-multi>`,\n long: `.parent-container {\n padding: var(--ic-space-md);\n }\n</style>\n<body>\n <div class=\"parent-container\">\n {shortCode}\n </div>\n <script>\n var select = document.querySelector(\"#select-default\");\n select.options = [\n { label: \"Cappuccino\", value: \"Cap\" },\n { label: \"Latte\", value: \"Lat\" },\n { label: \"Americano\", value: \"Ame\" },\n { label: \"Filter\", value: \"Fil\" },\n { label: \"Flat white\", value: \"Fla\" },\n { label: \"Mocha\", value: \"Moc\" },\n { label: \"Macchiato\", value: \"Mac\" },\n ];\n select.addEventListener(\"icChange\", function (event) {\n console.log(event.detail.value);\n });\n </script>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcSelectWithMulti\n label=\"What are your favourite types of coffee?\"\n options={options}\n multiple\n validation-status=\"success\"\n validation-text=\"Coffee available\"\n/>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n padding: \"var(--ic-space-md)\",\n },\n});\nconst classes = useStyles();\nconst options = [\n { label: \"Cappuccino\", value: \"Cap\" },\n { label: \"Latte\", value: \"Lat\" },\n { label: \"Americano\", value: \"Ame\" },\n { label: \"Filter\", value: \"Fil\" },\n { label: \"Flat white\", value: \"Fla\" },\n { label: \"Mocha\", value: \"Moc\" },\n { label: \"Macchiato\", value: \"Mac\" },\n];\nreturn ( \n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n padding: \"var(--ic-space-md)\",\n },\n});\nconst classes = useStyles();\nconst options = [\n { label: \"Cappuccino\", value: \"Cap\" },\n { label: \"Latte\", value: \"Lat\" },\n { label: \"Americano\", value: \"Ame\" },\n { label: \"Filter\", value: \"Fil\" },\n { label: \"Flat white\", value: \"Fla\" },\n { label: \"Mocha\", value: \"Moc\" },\n { label: \"Macchiato\", value: \"Mac\" },\n];\nreturn ( \n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={validation}>\n <div style={{ display: \"flex\", flexDirection: \"column\", gap: \"1rem\" }}>\n <IcSelectWithMulti\n label=\"What are your favourite types of coffee?\"\n multiple\n options={OPTIONS}\n validation-status=\"success\"\n validation-text=\"Coffee available\"\n />\n </div>\n</ComponentPreview>\n\n### Loading with error\n\nDisplay the loading state by using the `loading` prop.\nThe multi-select will show a loading error after the amount of time specified using the `timeout` prop has elapsed.\n\nexport const loading = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-select-with-multi\n id=\"select-default\"\n label=\"What are your favourite types of coffee?\"\n multiple=\"true\"\n loading=\"true\"\n timeout=\"1000\"\n></ic-select-with-multi>`,\n long: `.parent-container {\n padding: var(--ic-space-md);\n }\n</style>\n<body>\n <div class=\"parent-container\">\n {shortCode}\n </div>\n <script>\n var select = document.querySelector(\"#select-default\");\n select.options = [\n { label: \"Cappuccino\", value: \"Cap\" },\n { label: \"Latte\", value: \"Lat\" },\n { label: \"Americano\", value: \"Ame\" },\n { label: \"Filter\", value: \"Fil\" },\n { label: \"Flat white\", value: \"Fla\" },\n { label: \"Mocha\", value: \"Moc\" },\n { label: \"Macchiato\", value: \"Mac\" },\n ];\n select.addEventListener(\"icChange\", function (event) {\n console.log(event.detail.value);\n });\n </script>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcSelectWithMulti\n label=\"What are your favourite types of coffee?\"\n options={options}\n multiple\n loading\n timeout={1000}\n/>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n padding: \"var(--ic-space-md)\",\n },\n});\nconst classes = useStyles();\nconst options = [\n { label: \"Cappuccino\", value: \"Cap\" },\n { label: \"Latte\", value: \"Lat\" },\n { label: \"Americano\", value: \"Ame\" },\n { label: \"Filter\", value: \"Fil\" },\n { label: \"Flat white\", value: \"Fla\" },\n { label: \"Mocha\", value: \"Moc\" },\n { label: \"Macchiato\", value: \"Mac\" },\n];\nreturn ( \n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n padding: \"var(--ic-space-md)\",\n },\n});\nconst classes = useStyles();\nconst options = [\n { label: \"Cappuccino\", value: \"Cap\" },\n { label: \"Latte\", value: \"Lat\" },\n { label: \"Americano\", value: \"Ame\" },\n { label: \"Filter\", value: \"Fil\" },\n { label: \"Flat white\", value: \"Fla\" },\n { label: \"Mocha\", value: \"Moc\" },\n { label: \"Macchiato\", value: \"Mac\" },\n];\nreturn ( \n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={loading}>\n <div style={{ display: \"flex\", flexDirection: \"column\", gap: \"1rem\" }}>\n <IcSelectWithMulti\n label=\"What are your favourite types of coffee?\"\n multiple\n loading\n timeout={1000}\n options={OPTIONS}\n />\n </div>\n</ComponentPreview>\n",
+ "contents": "\r\nimport { IcSelectWithMulti } from \"@ukic/canary-react\";\r\n\r\nimport {\r\n OPTIONS,\r\n OPTIONS_WITH_DESCRIPTIONS,\r\n OPTIONS_WITH_DISABLED,\r\n GROUPED_OPTIONS,\r\n OPTIONS_WITH_RECOMMENDED,\r\n} from \"./story-data\";\r\n\r\n## Component demo\r\n\r\nexport const snippets = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-select-with-multi\r\n id=\"select-default\"\r\n label=\"What are your favourite types of coffee?\"\r\n multiple=\"true\"\r\n></ic-select-with-multi>`,\r\n long: `.parent-container {\r\n padding: var(--ic-space-md);\r\n }\r\n</style>\r\n<body>\r\n <div class=\"parent-container\">\r\n {shortCode}\r\n </div>\r\n <script>\r\n var select = document.querySelector(\"#select-default\");\r\n select.options = [\r\n { label: \"Cappuccino\", value: \"Cap\" },\r\n { label: \"Latte\", value: \"Lat\", disabled: true },\r\n { label: \"Americano\", value: \"Ame\" },\r\n { label: \"Filter\", value: \"Fil\", disabled: true },\r\n { label: \"Flat white\", value: \"Fla\", disabled: true },\r\n { label: \"Mocha\", value: \"Moc\" },\r\n { label: \"Macchiato\", value: \"Mac\" },\r\n ];\r\n select.addEventListener(\"icChange\", function (event) {\r\n console.log(event.detail.value);\r\n });\r\n </script>`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcSelectWithMulti\r\n label=\"What are your favourite types of coffee?\"\r\n options={options}\r\n onIcChange={(event) => console.log(event.detail.value)}\r\n onIcOptionSelect={(event) => console.log(event.detail.value)}\r\n onIcOptionDeselect={(event) => console.log(event.detail.value)}\r\n multiple\r\n/>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `const useStyles = createUseStyles({\r\n parentContainer: {\r\n padding: \"var(--ic-space-md)\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nconst options = [\r\n { label: \"Cappuccino\", value: \"Cap\" },\r\n { label: \"Latte\", value: \"Lat\" },\r\n { label: \"Americano\", value: \"Ame\" },\r\n { label: \"Filter\", value: \"Fil\" },\r\n { label: \"Flat white\", value: \"Fla\" },\r\n { label: \"Mocha\", value: \"Moc\" },\r\n { label: \"Macchiato\", value: \"Mac\" },\r\n];\r\nreturn ( \r\n <div className={classes.parentContainer}>\r\n {shortCode}\r\n </div>\r\n)`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `const useStyles = createUseStyles({\r\n parentContainer: {\r\n padding: \"var(--ic-space-md)\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nreturn ( \r\n <div className={classes.parentContainer}>\r\n {shortCode}\r\n </div>\r\n)`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview snippets={snippets}>\r\n <IcSelectWithMulti\r\n label=\"What are your favourite types of coffee?\"\r\n options={OPTIONS}\r\n multiple\r\n />\r\n</ComponentPreview>\r\n\r\n## Select with multi details\r\n\r\n<ComponentDetails component=\"ic-select-with-multi\" canary />\r\n\r\n## Variants\r\n\r\n### Default value\r\n\r\nShow options as pre-selected by setting the `value` prop to an array containing the values of these options.\r\n\r\nexport const defaultValue = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-select-with-multi\r\n id=\"select-default\"\r\n label=\"What are your favourite types of coffee?\"\r\n multiple=\"true\"\r\n></ic-select-with-multi>`,\r\n long: `.parent-container {\r\n padding: var(--ic-space-md);\r\n }\r\n</style>\r\n<body>\r\n <div class=\"parent-container\">\r\n {shortCode}\r\n </div>\r\n <script>\r\n var select = document.querySelector(\"#select-default\");\r\n select.value = [\"Ame\", \"Fil\", \"Moc\"];\r\n select.options = [\r\n { label: \"Cappuccino\", value: \"Cap\" },\r\n { label: \"Latte\", value: \"Lat\" },\r\n { label: \"Americano\", value: \"Ame\" },\r\n { label: \"Filter\", value: \"Fil },\r\n { label: \"Flat white\", value: \"Fla\" },\r\n { label: \"Mocha\", value: \"Moc\" },\r\n { label: \"Macchiato\", value: \"Mac\" },\r\n ];\r\n select.value = [\"Cap\", \"Fla\", \"Moc\"];\r\n select.addEventListener(\"icChange\", function (event) {\r\n console.log(event.detail.value);\r\n });\r\n </script>`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcSelectWithMulti\r\n label=\"What are your favourite types of coffee?\"\r\n value={[\"Ame\", \"Fil\", \"Moc\"]}\r\n options={options}\r\n onIcChange={(event) => console.log(event.detail.value)}\r\n onIcOptionSelect={(event) => console.log(event.detail.value)}\r\n onIcOptionDeselect={(event) => console.log(event.detail.value)}\r\n multiple\r\n/>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `const useStyles = createUseStyles({\r\n parentContainer: {\r\n padding: \"var(--ic-space-md)\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nconst options = [\r\n { label: \"Cappuccino\", value: \"Cap\" },\r\n { label: \"Latte\", value: \"Lat\" },\r\n { label: \"Americano\", value: \"Ame\" },\r\n { label: \"Filter\", value: \"Fil\" },\r\n { label: \"Flat white\", value: \"Fla\" },\r\n { label: \"Mocha\", value: \"Moc\" },\r\n { label: \"Macchiato\", value: \"Mac\" },\r\n];\r\nreturn ( \r\n <div className={classes.parentContainer}>\r\n {shortCode}\r\n </div>\r\n)`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `const useStyles = createUseStyles({\r\n parentContainer: {\r\n padding: \"var(--ic-space-md)\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nconst options = [\r\n { label: \"Cappuccino\", value: \"Cap\" },\r\n { label: \"Latte\", value: \"Lat\" },\r\n { label: \"Americano\", value: \"Ame\" },\r\n { label: \"Filter\", value: \"Fil\" },\r\n { label: \"Flat white\", value: \"Fla\" },\r\n { label: \"Mocha\", value: \"Moc\" },\r\n { label: \"Macchiato\", value: \"Mac\" },\r\n];\r\nreturn ( \r\n <div className={classes.parentContainer}>\r\n {shortCode}\r\n </div>\r\n)`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview snippets={defaultValue}>\r\n <IcSelectWithMulti\r\n label=\"What are your favourite types of coffee?\"\r\n value={[\"Ame\", \"Fil\", \"Moc\"]}\r\n options={OPTIONS}\r\n multiple\r\n />\r\n</ComponentPreview>\r\n\r\n### With clear button\r\n\r\nDisplay a clear button by using the `showClearButton` prop.\r\n\r\nThis will appear when the user has selected some options and allow them to easily clear their selection.\r\n\r\nexport const clear = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-select-with-multi\r\n id=\"select-default\"\r\n label=\"What are your favourite types of coffee?\"\r\n multiple=\"true\"\r\n show-clear-button=\"true\"\r\n></ic-select-with-multi>`,\r\n long: `.parent-container {\r\n padding: var(--ic-space-md);\r\n }\r\n</style>\r\n<body>\r\n <div class=\"parent-container\">\r\n {shortCode}\r\n </div>\r\n <script>\r\n var select = document.querySelector(\"#select-default\");\r\n select.options = [\r\n { label: \"Cappuccino\", value: \"Cap\" },\r\n { label: \"Latte\", value: \"Lat\" },\r\n { label: \"Americano\", value: \"Ame\" },\r\n { label: \"Filter\", value: \"Fil },\r\n { label: \"Flat white\", value: \"Fla\" },\r\n { label: \"Mocha\", value: \"Moc\" },\r\n { label: \"Macchiato\", value: \"Mac\" },\r\n ];\r\n select.addEventListener(\"icChange\", function (event) {\r\n console.log(event.detail.value);\r\n });\r\n </script>`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcSelectWithMulti\r\n label=\"What are your favourite types of coffee?\"\r\n options={options}\r\n onIcChange={(event) => console.log(event.detail.value)}\r\n onIcOptionSelect={(event) => console.log(event.detail.value)}\r\n onIcOptionDeselect={(event) => console.log(event.detail.value)}\r\n multiple\r\n showClearButton\r\n/>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `const useStyles = createUseStyles({\r\n parentContainer: {\r\n padding: \"var(--ic-space-md)\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nconst options = [\r\n { label: \"Cappuccino\", value: \"Cap\" },\r\n { label: \"Latte\", value: \"Lat\" },\r\n { label: \"Americano\", value: \"Ame\" },\r\n { label: \"Filter\", value: \"Fil\" },\r\n { label: \"Flat white\", value: \"Fla\" },\r\n { label: \"Mocha\", value: \"Moc\" },\r\n { label: \"Macchiato\", value: \"Mac\" },\r\n];\r\nreturn ( \r\n <div className={classes.parentContainer}>\r\n {shortCode}\r\n </div>\r\n)`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `const useStyles = createUseStyles({\r\n parentContainer: {\r\n padding: \"var(--ic-space-md)\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nconst options = [\r\n { label: \"Cappuccino\", value: \"Cap\" },\r\n { label: \"Latte\", value: \"Lat\" },\r\n { label: \"Americano\", value: \"Ame\" },\r\n { label: \"Filter\", value: \"Fil\" },\r\n { label: \"Flat white\", value: \"Fla\" },\r\n { label: \"Mocha\", value: \"Moc\" },\r\n { label: \"Macchiato\", value: \"Mac\" },\r\n];\r\nreturn ( \r\n <div className={classes.parentContainer}>\r\n {shortCode}\r\n </div>\r\n)`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview snippets={clear}>\r\n <IcSelectWithMulti\r\n label=\"What are your favourite types of coffee?\"\r\n showClearButton\r\n options={OPTIONS}\r\n multiple\r\n />\r\n</ComponentPreview>\r\n\r\n### With descriptions\r\n\r\nDisplay extra information about the options by providing a description using the `description` property for each option.\r\n\r\nexport const desc = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-select-with-multi\r\n id=\"select-default\"\r\n label=\"What are your favourite types of coffee?\"\r\n multiple=\"true\"\r\n></ic-select-with-multi>`,\r\n long: `.parent-container {\r\n padding: var(--ic-space-md);\r\n }\r\n</style>\r\n<body>\r\n <div class=\"parent-container\">\r\n {shortCode}\r\n </div>\r\n <script>\r\n var select = document.querySelector(\"#select-default\");\r\n select.options = [\r\n {\r\n label: \"Cappuccino\",\r\n value: \"Cap\",\r\n description: \"Coffee frothed up with pressurised steam\",\r\n },\r\n {\r\n label: \"Latte\",\r\n value: \"Lat\",\r\n description: \"A milkier coffee than a cappuccino\",\r\n },\r\n {\r\n label: \"Americano\",\r\n value: \"Ame\",\r\n description: \"Espresso coffee diluted with hot water\",\r\n },\r\n {\r\n label: \"Filter\",\r\n value: \"Fil\",\r\n description: \"Coffee filtered using paper or a mesh\",\r\n },\r\n {\r\n label: \"Flat white\",\r\n value: \"Fla\",\r\n description:\r\n \"Coffee without froth made with espresso and hot steamed milk\",\r\n },\r\n {\r\n label: \"Mocha\",\r\n value: \"Moc\",\r\n description: \"A mixture of coffee and chocolate\",\r\n },\r\n {\r\n label: \"Macchiato\",\r\n value: \"Mac\",\r\n description: \"Espresso coffee with a dash of frothy steamed milk\",\r\n },\r\n ];\r\n </script>`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcSelectWithMulti\r\n label=\"What are your favourite types of coffee?\"\r\n options={options}\r\n onIcChange={(event) => console.log(event.detail.value)}\r\n onIcOptionSelect={(event) => console.log(event.detail.value)}\r\n onIcOptionDeselect={(event) => console.log(event.detail.value)}\r\n multiple\r\n/>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `const useStyles = createUseStyles({\r\n parentContainer: {\r\n padding: \"var(--ic-space-md)\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nconst options = [\r\n {\r\n label: \"Cappuccino\",\r\n value: \"Cap\",\r\n description: \"Coffee frothed up with pressurised steam\",\r\n },\r\n {\r\n label: \"Latte\",\r\n value: \"Lat\",\r\n description: \"A milkier coffee than a cappuccino\",\r\n },\r\n {\r\n label: \"Americano\",\r\n value: \"Ame\",\r\n description: \"Espresso coffee diluted with hot water\",\r\n },\r\n {\r\n label: \"Filter\",\r\n value: \"Fil\",\r\n description: \"Coffee filtered using paper or a mesh\",\r\n },\r\n {\r\n label: \"Flat white\",\r\n value: \"Fla\",\r\n description:\r\n \"Coffee without froth made with espresso and hot steamed milk\",\r\n },\r\n {\r\n label: \"Mocha\",\r\n value: \"Moc\",\r\n description: \"A mixture of coffee and chocolate\",\r\n },\r\n {\r\n label: \"Macchiato\",\r\n value: \"Mac\",\r\n description: \"Espresso coffee with a dash of frothy steamed milk\",\r\n },\r\n];\r\nreturn ( \r\n <div className={classes.parentContainer}>\r\n {shortCode}\r\n </div>\r\n)`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `const useStyles = createUseStyles({\r\n parentContainer: {\r\n padding: \"var(--ic-space-md)\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nconst options = [\r\n {\r\n label: \"Cappuccino\",\r\n value: \"Cap\",\r\n description: \"Coffee frothed up with pressurised steam\",\r\n },\r\n {\r\n label: \"Latte\",\r\n value: \"Lat\",\r\n description: \"A milkier coffee than a cappuccino\",\r\n },\r\n {\r\n label: \"Americano\",\r\n value: \"Ame\",\r\n description: \"Espresso coffee diluted with hot water\",\r\n },\r\n {\r\n label: \"Filter\",\r\n value: \"Fil\",\r\n description: \"Coffee filtered using paper or a mesh\",\r\n },\r\n {\r\n label: \"Flat white\",\r\n value: \"Fla\",\r\n description:\r\n \"Coffee without froth made with espresso and hot steamed milk\",\r\n },\r\n {\r\n label: \"Mocha\",\r\n value: \"Moc\",\r\n description: \"A mixture of coffee and chocolate\",\r\n },\r\n {\r\n label: \"Macchiato\",\r\n value: \"Mac\",\r\n description: \"Espresso coffee with a dash of frothy steamed milk\",\r\n },\r\n];\r\nreturn ( \r\n <div className={classes.parentContainer}>\r\n {shortCode}\r\n </div>\r\n)`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview snippets={desc}>\r\n <IcSelectWithMulti\r\n label=\"What are your favourite types of coffee?\"\r\n options={OPTIONS_WITH_DESCRIPTIONS}\r\n multiple\r\n />\r\n</ComponentPreview>\r\n\r\n### Helper text\r\n\r\nDisplay helper text to provide additional information by using the `helperText` prop.\r\n\r\nexport const helper = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-select-with-multi\r\n id=\"select-default\"\r\n label=\"What are your favourite types of coffee?\"\r\n helper-text=\"Select some options from the list\"\r\n multiple=\"true\"\r\n></ic-select-with-multi>`,\r\n long: `.parent-container {\r\n padding: var(--ic-space-md);\r\n }\r\n</style>\r\n<body>\r\n <div class=\"parent-container\">\r\n {shortCode}\r\n </div>\r\n <script>\r\n var select = document.querySelector(\"#select-default\");\r\n select.options = [\r\n { label: \"Cappuccino\", value: \"Cap\" },\r\n { label: \"Latte\", value: \"Lat\" },\r\n { label: \"Americano\", value: \"Ame\" },\r\n { label: \"Filter\", value: \"Fil },\r\n { label: \"Flat white\", value: \"Fla\" },\r\n { label: \"Mocha\", value: \"Moc\" },\r\n { label: \"Macchiato\", value: \"Mac\" },\r\n ];\r\n select.addEventListener(\"icChange\", function (event) {\r\n console.log(event.detail.value);\r\n });\r\n </script>`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcSelectWithMulti\r\n label=\"What are your favourite types of coffee?\"\r\n helperText=\"Select some options from the list\"\r\n options={options}\r\n onIcChange={(event) => console.log(event.detail.value)}\r\n onIcOptionSelect={(event) => console.log(event.detail.value)}\r\n onIcOptionDeselect={(event) => console.log(event.detail.value)}\r\n multiple\r\n/>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `const useStyles = createUseStyles({\r\n parentContainer: {\r\n padding: \"var(--ic-space-md)\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nconst options = [\r\n { label: \"Cappuccino\", value: \"Cap\" },\r\n { label: \"Latte\", value: \"Lat\" },\r\n { label: \"Americano\", value: \"Ame\" },\r\n { label: \"Filter\", value: \"Fil\" },\r\n { label: \"Flat white\", value: \"Fla\" },\r\n { label: \"Mocha\", value: \"Moc\" },\r\n { label: \"Macchiato\", value: \"Mac\" },\r\n];\r\nreturn ( \r\n <div className={classes.parentContainer}>\r\n {shortCode}\r\n </div>\r\n)`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `const useStyles = createUseStyles({\r\n parentContainer: {\r\n padding: \"var(--ic-space-md)\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nconst options = [\r\n { label: \"Cappuccino\", value: \"Cap\" },\r\n { label: \"Latte\", value: \"Lat\" },\r\n { label: \"Americano\", value: \"Ame\" },\r\n { label: \"Filter\", value: \"Fil\" },\r\n { label: \"Flat white\", value: \"Fla\" },\r\n { label: \"Mocha\", value: \"Moc\" },\r\n { label: \"Macchiato\", value: \"Mac\" },\r\n];\r\nreturn ( \r\n <div className={classes.parentContainer}>\r\n {shortCode}\r\n </div>\r\n)`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview snippets={helper}>\r\n <IcSelectWithMulti\r\n label=\"What are your favourite types of coffee?\"\r\n options={OPTIONS}\r\n multiple\r\n helperText=\"Select some options from the list\"\r\n />\r\n</ComponentPreview>\r\n\r\n### Sizes\r\n\r\nSet the size of the multi-select by using the `size` prop. This prop takes the values `small`, `default` or `large`.\r\nDepending on the chosen size, the prop will apply styling to increase or decrease the amount of spacing within the component.\r\nThe `default` variant is seen in the first [default](#default) example.\r\n\r\nexport const sizes = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-select-with-multi\r\n id=\"select-default-small\"\r\n label=\"What are your favourite types of coffee?\"\r\n multiple=\"true\"\r\n size=\"small\"\r\n></ic-select-with-multi>\r\n<ic-select-with-multi\r\n id=\"select-default\"\r\n label=\"What are your favourite types of coffee?\"\r\n multiple=\"true\"\r\n></ic-select-with-multi>\r\n<ic-select-with-multi\r\n id=\"select-default-large\"\r\n label=\"What are your favourite types of coffee?\"\r\n multiple=\"true\"\r\n size=\"large\"\r\n></ic-select-with-multi>`,\r\n long: `.parent-container {\r\n display: flex;\r\n flex-direction: column;\r\n gap: var(--ic-space-md);\r\n padding: var(--ic-space-md);\r\n }\r\n</style>\r\n<body>\r\n <div class=\"parent-container\">\r\n {shortCode}\r\n </div>\r\n <script>\r\n var select = document.querySelector(\"#select-default\");\r\n select.options = [\r\n { label: \"Cappuccino\", value: \"Cap\" },\r\n { label: \"Latte\", value: \"Lat\" },\r\n { label: \"Americano\", value: \"Ame\" },\r\n { label: \"Filter\", value: \"Fil },\r\n { label: \"Flat white\", value: \"Fla\" },\r\n { label: \"Mocha\", value: \"Moc\" },\r\n { label: \"Macchiato\", value: \"Mac\" },\r\n ];\r\n select.addEventListener(\"icChange\", function (event) {\r\n console.log(event.detail.value);\r\n });\r\n </script>`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcSelectWithMulti\r\n label=\"What are your favourite types of coffee?\"\r\n options={options}\r\n multiple\r\n size=\"small\"\r\n/>\r\n<IcSelectWithMulti\r\n label=\"What are your favourite types of coffee?\"\r\n options={options}\r\n multiple\r\n/>\r\n<IcSelectWithMulti\r\n label=\"What are your favourite types of coffee?\"\r\n options={options}\r\n multiple\r\n size=\"large\"\r\n/>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `const useStyles = createUseStyles({\r\n parentContainer: {\r\n display: \"flex\",\r\n flexDirection: \"column\",\r\n gap: \"var(--ic-space-md)\",\r\n padding: \"var(--ic-space-md)\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nconst options = [\r\n { label: \"Cappuccino\", value: \"Cap\" },\r\n { label: \"Latte\", value: \"Lat\" },\r\n { label: \"Americano\", value: \"Ame\" },\r\n { label: \"Filter\", value: \"Fil\" },\r\n { label: \"Flat white\", value: \"Fla\" },\r\n { label: \"Mocha\", value: \"Moc\" },\r\n { label: \"Macchiato\", value: \"Mac\" },\r\n];\r\nreturn ( \r\n <div className={classes.parentContainer}>\r\n {shortCode}\r\n </div>\r\n)`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `const useStyles = createUseStyles({\r\n parentContainer: {\r\n display: \"flex\",\r\n flexDirection: \"column\",\r\n padding: \"var(--ic-space-md)\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nconst options = [\r\n { label: \"Cappuccino\", value: \"Cap\" },\r\n { label: \"Latte\", value: \"Lat\" },\r\n { label: \"Americano\", value: \"Ame\" },\r\n { label: \"Filter\", value: \"Fil\" },\r\n { label: \"Flat white\", value: \"Fla\" },\r\n { label: \"Mocha\", value: \"Moc\" },\r\n { label: \"Macchiato\", value: \"Mac\" },\r\n];\r\nreturn ( \r\n <div className={classes.parentContainer}>\r\n {shortCode}\r\n </div>\r\n)`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview snippets={sizes}>\r\n <div style={{ display: \"flex\", flexDirection: \"column\", gap: \"1rem\" }}>\r\n <IcSelectWithMulti\r\n label=\"What are your favourite types of coffee?\"\r\n options={OPTIONS}\r\n multiple\r\n size=\"small\"\r\n />\r\n <IcSelectWithMulti\r\n label=\"What are your favourite types of coffee?\"\r\n options={OPTIONS}\r\n multiple\r\n />\r\n <IcSelectWithMulti\r\n label=\"What are your favourite types of coffee?\"\r\n options={OPTIONS}\r\n multiple\r\n size=\"large\"\r\n />\r\n </div>\r\n</ComponentPreview>\r\n\r\n### Disabled\r\n\r\nDisable the multi-select and prevent user interaction by using the `disabled` prop.\r\n\r\nexport const disabled = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-select-with-multi\r\n label=\"What are your favourite types of coffee?\"\r\n multiple=\"true\"\r\n disabled=\"true\"\r\n></ic-select-with-multi>`,\r\n long: `.parent-container {\r\n padding: var(--ic-space-md);\r\n }\r\n</style>\r\n<body>\r\n <div class=\"parent-container\">\r\n {shortCode}\r\n </div>`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcSelectWithMulti\r\n label=\"What are your favourite types of coffee?\"\r\n multiple\r\n disabled\r\n/>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `const useStyles = createUseStyles({\r\n parentContainer: {\r\n padding: \"var(--ic-space-md)\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nconst options = [\r\n { label: \"Cappuccino\", value: \"Cap\" },\r\n { label: \"Latte\", value: \"Lat\" },\r\n { label: \"Americano\", value: \"Ame\" },\r\n { label: \"Filter\", value: \"Fil\" },\r\n { label: \"Flat white\", value: \"Fla\" },\r\n { label: \"Mocha\", value: \"Moc\" },\r\n { label: \"Macchiato\", value: \"Mac\" },\r\n];\r\nreturn ( \r\n <div className={classes.parentContainer}>\r\n {shortCode}\r\n </div>\r\n)`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `const useStyles = createUseStyles({\r\n parentContainer: {\r\n padding: \"var(--ic-space-md)\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nconst options = [\r\n { label: \"Cappuccino\", value: \"Cap\" },\r\n { label: \"Latte\", value: \"Lat\" },\r\n { label: \"Americano\", value: \"Ame\" },\r\n { label: \"Filter\", value: \"Fil\" },\r\n { label: \"Flat white\", value: \"Fla\" },\r\n { label: \"Mocha\", value: \"Moc\" },\r\n { label: \"Macchiato\", value: \"Mac\" },\r\n];\r\nreturn ( \r\n <div className={classes.parentContainer}>\r\n {shortCode}\r\n </div>\r\n)`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview snippets={disabled}>\r\n <div style={{ display: \"flex\", flexDirection: \"column\", gap: \"1rem\" }}>\r\n <IcSelectWithMulti\r\n label=\"What are your favourite types of coffee?\"\r\n multiple\r\n disabled\r\n />\r\n </div>\r\n</ComponentPreview>\r\n\r\n### Disabled options\r\n\r\nDisable certain options by setting the `disabled` property to `true` for each option.\r\n\r\nexport const disabledOptions = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-select-with-multi\r\n id=\"select-default\"\r\n label=\"What are your favourite types of coffee?\"\r\n multiple=\"true\"\r\n></ic-select-with-multi>`,\r\n long: `.parent-container {\r\n padding: var(--ic-space-md);\r\n }\r\n</style>\r\n<body>\r\n <div class=\"parent-container\">\r\n {shortCode}\r\n </div>\r\n <script>\r\n var select = document.querySelector(\"#select-default\");\r\n select.options = [\r\n { label: \"Cappuccino\", value: \"Cap\" },\r\n { label: \"Latte\", value: \"Lat\", disabled: true },\r\n { label: \"Americano\", value: \"Ame\" },\r\n { label: \"Filter\", value: \"Fil\", disabled: true },\r\n { label: \"Flat white\", value: \"Fla\", disabled: true },\r\n { label: \"Mocha\", value: \"Moc\" },\r\n { label: \"Macchiato\", value: \"Mac\" },\r\n ];\r\n select.addEventListener(\"icChange\", function (event) {\r\n console.log(event.detail.value);\r\n });\r\n </script>`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcSelectWithMulti\r\n label=\"What are your favourite types of coffee?\"\r\n options={options}\r\n onIcChange={(event) => console.log(event.detail.value)}\r\n onIcOptionSelect={(event) => console.log(event.detail.value)}\r\n onIcOptionDeselect={(event) => console.log(event.detail.value)}\r\n multiple\r\n/>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `const useStyles = createUseStyles({\r\n parentContainer: {\r\n padding: \"var(--ic-space-md)\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nconst options = [\r\n { label: \"Cappuccino\", value: \"Cap\" },\r\n { label: \"Latte\", value: \"Lat\", disabled: true },\r\n { label: \"Americano\", value: \"Ame\" },\r\n { label: \"Filter\", value: \"Fil\", disabled: true },\r\n { label: \"Flat white\", value: \"Fla\", disabled: true },\r\n { label: \"Mocha\", value: \"Moc\" },\r\n { label: \"Macchiato\", value: \"Mac\" },\r\n];\r\nreturn ( \r\n <div className={classes.parentContainer}>\r\n {shortCode}\r\n </div>\r\n)`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `const useStyles = createUseStyles({\r\n parentContainer: {\r\n padding: \"var(--ic-space-md)\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nconst options = [\r\n { label: \"Cappuccino\", value: \"Cap\" },\r\n { label: \"Latte\", value: \"Lat\", disabled: true },\r\n { label: \"Americano\", value: \"Ame\" },\r\n { label: \"Filter\", value: \"Fil\", disabled: true },\r\n { label: \"Flat white\", value: \"Fla\", disabled: true },\r\n { label: \"Mocha\", value: \"Moc\" },\r\n { label: \"Macchiato\", value: \"Mac\" },\r\n];\r\nreturn ( \r\n <div className={classes.parentContainer}>\r\n {shortCode}\r\n </div>\r\n)`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview snippets={disabledOptions}>\r\n <div style={{ display: \"flex\", flexDirection: \"column\", gap: \"1rem\" }}>\r\n <IcSelectWithMulti\r\n label=\"What are your favourite types of coffee?\"\r\n options={OPTIONS_WITH_DISABLED}\r\n multiple\r\n />\r\n </div>\r\n</ComponentPreview>\r\n\r\n### Hide label\r\n\r\nHide the visible label for the multi-select by using the `hideLabel` prop.\r\n\r\nexport const hideLabel = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-select-with-multi\r\n id=\"select-default\"\r\n label=\"What are your favourite types of coffee?\"\r\n multiple=\"true\"\r\n hide-label=\"true\"\r\n></ic-select-with-multi>`,\r\n long: `.parent-container {\r\n padding: var(--ic-space-md);\r\n }\r\n</style>\r\n<body>\r\n <div class=\"parent-container\">\r\n {shortCode}\r\n </div>\r\n <script>\r\n var select = document.querySelector(\"#select-default\");\r\n select.options = [\r\n { label: \"Cappuccino\", value: \"Cap\" },\r\n { label: \"Latte\", value: \"Lat\" },\r\n { label: \"Americano\", value: \"Ame\" },\r\n { label: \"Filter\", value: \"Fil\" },\r\n { label: \"Flat white\", value: \"Fla\" },\r\n { label: \"Mocha\", value: \"Moc\" },\r\n { label: \"Macchiato\", value: \"Mac\" },\r\n ];\r\n select.addEventListener(\"icChange\", function (event) {\r\n console.log(event.detail.value);\r\n });\r\n </script>`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcSelectWithMulti\r\n label=\"What are your favourite types of coffee?\"\r\n options={options}\r\n multiple\r\n hideLabel\r\n/>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `const useStyles = createUseStyles({\r\n parentContainer: {\r\n padding: \"var(--ic-space-md)\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nconst options = [\r\n { label: \"Cappuccino\", value: \"Cap\" },\r\n { label: \"Latte\", value: \"Lat\" },\r\n { label: \"Americano\", value: \"Ame\" },\r\n { label: \"Filter\", value: \"Fil\" },\r\n { label: \"Flat white\", value: \"Fla\" },\r\n { label: \"Mocha\", value: \"Moc\" },\r\n { label: \"Macchiato\", value: \"Mac\" },\r\n];\r\nreturn ( \r\n <div className={classes.parentContainer}>\r\n {shortCode}\r\n </div>\r\n)`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `const useStyles = createUseStyles({\r\n parentContainer: {\r\n padding: \"var(--ic-space-md)\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nconst options = [\r\n { label: \"Cappuccino\", value: \"Cap\" },\r\n { label: \"Latte\", value: \"Lat\" },\r\n { label: \"Americano\", value: \"Ame\" },\r\n { label: \"Filter\", value: \"Fil\" },\r\n { label: \"Flat white\", value: \"Fla\" },\r\n { label: \"Mocha\", value: \"Moc\" },\r\n { label: \"Macchiato\", value: \"Mac\" },\r\n];\r\nreturn (\r\n <div className={classes.parentContainer}>\r\n {shortCode}\r\n </div>\r\n)`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview snippets={hideLabel}>\r\n <div style={{ display: \"flex\", flexDirection: \"column\", gap: \"1rem\" }}>\r\n <IcSelectWithMulti\r\n label=\"What are your favourite types of coffee?\"\r\n hideLabel\r\n multiple\r\n />\r\n </div>\r\n</ComponentPreview>\r\n\r\n### Required\r\n\r\nInform the user that the multi-select is a required field by using the `required` prop.\r\nThis will display an asterisk next to the label and apply the `aria-required` attribute.\r\n\r\nexport const required = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-select-with-multi\r\n id=\"select-default\"\r\n label=\"What are your favourite types of coffee?\"\r\n multiple=\"true\"\r\n required=\"true\"\r\n></ic-select-with-multi>`,\r\n long: `.parent-container {\r\n padding: var(--ic-space-md);\r\n }\r\n</style>\r\n<body>\r\n <div class=\"parent-container\">\r\n {shortCode}\r\n </div>\r\n <script>\r\n var select = document.querySelector(\"#select-default\");\r\n select.options = [\r\n { label: \"Cappuccino\", value: \"Cap\" },\r\n { label: \"Latte\", value: \"Lat\" },\r\n { label: \"Americano\", value: \"Ame\" },\r\n { label: \"Filter\", value: \"Fil\" },\r\n { label: \"Flat white\", value: \"Fla\" },\r\n { label: \"Mocha\", value: \"Moc\" },\r\n { label: \"Macchiato\", value: \"Mac\" },\r\n ];\r\n select.addEventListener(\"icChange\", function (event) {\r\n console.log(event.detail.value);\r\n });\r\n </script>`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcSelectWithMulti\r\n label=\"What are your favourite types of coffee?\"\r\n options={options}\r\n multiple\r\n required\r\n/>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `const useStyles = createUseStyles({\r\n parentContainer: {\r\n padding: \"var(--ic-space-md)\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nconst options = [\r\n { label: \"Cappuccino\", value: \"Cap\" },\r\n { label: \"Latte\", value: \"Lat\" },\r\n { label: \"Americano\", value: \"Ame\" },\r\n { label: \"Filter\", value: \"Fil\" },\r\n { label: \"Flat white\", value: \"Fla\" },\r\n { label: \"Mocha\", value: \"Moc\" },\r\n { label: \"Macchiato\", value: \"Mac\" },\r\n];\r\nreturn ( \r\n <div className={classes.parentContainer}>\r\n {shortCode}\r\n </div>\r\n)`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `const useStyles = createUseStyles({\r\n parentContainer: {\r\n padding: \"var(--ic-space-md)\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nconst options = [\r\n { label: \"Cappuccino\", value: \"Cap\" },\r\n { label: \"Latte\", value: \"Lat\" },\r\n { label: \"Americano\", value: \"Ame\" },\r\n { label: \"Filter\", value: \"Fil\" },\r\n { label: \"Flat white\", value: \"Fla\" },\r\n { label: \"Mocha\", value: \"Moc\" },\r\n { label: \"Macchiato\", value: \"Mac\" },\r\n];\r\nreturn ( \r\n <div className={classes.parentContainer}>\r\n {shortCode}\r\n </div>\r\n)`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview snippets={required}>\r\n <div style={{ display: \"flex\", flexDirection: \"column\", gap: \"1rem\" }}>\r\n <IcSelectWithMulti\r\n label=\"What are your favourite types of coffee?\"\r\n multiple\r\n required\r\n options={OPTIONS}\r\n />\r\n </div>\r\n</ComponentPreview>\r\n\r\n### Read-only\r\n\r\nMake the multi-select read-only by using the `readonly` prop.\r\nUse the `value` prop to set which options are selected and will be displayed when it is read-only.\r\n\r\nexport const read = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-select-with-multi\r\n id=\"select-default\"\r\n label=\"What are your favourite types of coffee?\"\r\n multiple=\"true\"\r\n readonly=\"true\"\r\n></ic-select-with-multi>`,\r\n long: `.parent-container {\r\n padding: var(--ic-space-md);\r\n }\r\n</style>\r\n<body>\r\n <div class=\"parent-container\">\r\n {shortCode}\r\n </div>\r\n <script>\r\n var select = document.querySelector(\"#select-default\");\r\n select.options = [\r\n { label: \"Cappuccino\", value: \"Cap\" },\r\n { label: \"Latte\", value: \"Lat\" },\r\n { label: \"Americano\", value: \"Ame\" },\r\n { label: \"Filter\", value: \"Fil\" },\r\n { label: \"Flat white\", value: \"Fla\" },\r\n { label: \"Mocha\", value: \"Moc\" },\r\n { label: \"Macchiato\", value: \"Mac\" },\r\n ];\r\n select.value = [\"Cap\", \"Fla\", \"Moc\"];\r\n select.addEventListener(\"icChange\", function (event) {\r\n console.log(event.detail.value);\r\n });\r\n </script>`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcSelectWithMulti\r\n value={[\"Cap\", \"Fla\", \"Moc\"]}\r\n label=\"What are your favourite types of coffee?\"\r\n options={options}\r\n multiple\r\n readonly\r\n/>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `const useStyles = createUseStyles({\r\n parentContainer: {\r\n padding: \"var(--ic-space-md)\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nconst options = [\r\n { label: \"Cappuccino\", value: \"Cap\" },\r\n { label: \"Latte\", value: \"Lat\" },\r\n { label: \"Americano\", value: \"Ame\" },\r\n { label: \"Filter\", value: \"Fil\" },\r\n { label: \"Flat white\", value: \"Fla\" },\r\n { label: \"Mocha\", value: \"Moc\" },\r\n { label: \"Macchiato\", value: \"Mac\" },\r\n];\r\nreturn ( \r\n <div className={classes.parentContainer}>\r\n {shortCode}\r\n </div>\r\n)`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `const useStyles = createUseStyles({\r\n parentContainer: {\r\n padding: \"var(--ic-space-md)\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nconst options = [\r\n { label: \"Cappuccino\", value: \"Cap\" },\r\n { label: \"Latte\", value: \"Lat\" },\r\n { label: \"Americano\", value: \"Ame\" },\r\n { label: \"Filter\", value: \"Fil\" },\r\n { label: \"Flat white\", value: \"Fla\" },\r\n { label: \"Mocha\", value: \"Moc\" },\r\n { label: \"Macchiato\", value: \"Mac\" },\r\n];\r\nreturn ( \r\n <div className={classes.parentContainer}>\r\n {shortCode}\r\n </div>\r\n)`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview snippets={read}>\r\n <div style={{ display: \"flex\", flexDirection: \"column\", gap: \"1rem\" }}>\r\n <IcSelectWithMulti\r\n label=\"What are your favourite types of coffee?\"\r\n multiple\r\n readonly\r\n options={OPTIONS}\r\n value={[\"Cap\", \"Fla\", \"Moc\"]}\r\n />\r\n </div>\r\n</ComponentPreview>\r\n\r\n### Groups\r\n\r\nDisplay options in groups by passing an array of child options to the `children` property of a parent option.\r\nThe parent option will be rendered as the title of the group.\r\n\r\nexport const group = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-select-with-multi\r\n id=\"select-default\"\r\n label=\"What are your favourite types of coffee?\"\r\n multiple=\"true\"\r\n></ic-select-with-multi>`,\r\n long: `.parent-container {\r\n padding: var(--ic-space-md);\r\n }\r\n</style>\r\n<body>\r\n <div class=\"parent-container\">\r\n {shortCode}\r\n </div>\r\n <script>\r\n var select = document.querySelector(\"#select-default\");\r\n select.options = [\r\n {\r\n label: \"Fancy\",\r\n children: [\r\n { label: \"Cappuccino\", value: \"Cap\" },\r\n { label: \"Flat white\", value: \"Flat\" },\r\n ],\r\n },\r\n {\r\n label: \"Boring\",\r\n children: [\r\n { label: \"Filter\", value: \"Fil\" },\r\n { label: \"Latte\", value: \"Lat\" },\r\n ],\r\n },\r\n ];\r\n select.addEventListener(\"icChange\", function (event) {\r\n console.log(event.detail.value);\r\n });\r\n </script>`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcSelectWithMulti\r\n label=\"What are your favourite types of coffee?\"\r\n options={options}\r\n multiple\r\n/>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `const useStyles = createUseStyles({\r\n parentContainer: {\r\n padding: \"var(--ic-space-md)\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nconst options = [\r\n {\r\n label: \"Fancy\",\r\n children: [\r\n { label: \"Cappuccino\", value: \"Cap\" },\r\n { label: \"Flat white\", value: \"Flat\" },\r\n ],\r\n },\r\n {\r\n label: \"Boring\",\r\n children: [\r\n { label: \"Filter\", value: \"Fil\" },\r\n { label: \"Latte\", value: \"Lat\" },\r\n ],\r\n },\r\n];\r\nreturn ( \r\n <div className={classes.parentContainer}>\r\n {shortCode}\r\n </div>\r\n)`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `const useStyles = createUseStyles({\r\n parentContainer: {\r\n padding: \"var(--ic-space-md)\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nconst options = [\r\n {\r\n label: \"Fancy\",\r\n children: [\r\n { label: \"Cappuccino\", value: \"Cap\" },\r\n { label: \"Flat white\", value: \"Flat\" },\r\n ],\r\n },\r\n {\r\n label: \"Boring\",\r\n children: [\r\n { label: \"Filter\", value: \"Fil\" },\r\n { label: \"Latte\", value: \"Lat\" },\r\n ],\r\n },\r\n];\r\nreturn ( \r\n <div className={classes.parentContainer}>\r\n {shortCode}\r\n </div>\r\n)`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview snippets={group}>\r\n <div style={{ display: \"flex\", flexDirection: \"column\", gap: \"1rem\" }}>\r\n <IcSelectWithMulti\r\n label=\"What are your favourite types of coffee?\"\r\n multiple\r\n options={GROUPED_OPTIONS}\r\n />\r\n </div>\r\n</ComponentPreview>\r\n\r\n### Recommended\r\n\r\nDisplay certain options at the top of the option list by setting the `recommended` property to `true` on each option.\r\nThis will allow for quick access to these options.\r\n\r\nexport const recc = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-select-with-multi\r\n id=\"select-default\"\r\n label=\"What are your favourite types of coffee?\"\r\n multiple=\"true\"\r\n></ic-select-with-multi>`,\r\n long: `.parent-container {\r\n padding: var(--ic-space-md);\r\n }\r\n</style>\r\n<body>\r\n <div class=\"parent-container\">\r\n {shortCode}\r\n </div>\r\n <script>\r\n var select = document.querySelector(\"#select-default\");\r\n select.options = [\r\n { label: \"Cappuccino\", value: \"Cap\" },\r\n { label: \"Latte\", value: \"Lat\" },\r\n { label: \"Americano\", value: \"Ame\", recommended: true },\r\n { label: \"Filter\", value: \"Fil\" },\r\n { label: \"Flat white\", value: \"Fla\", recommended: true },\r\n { label: \"Mocha\", value: \"Moc\" },\r\n { label: \"Macchiato\", value: \"Mac\" },\r\n ];\r\n select.addEventListener(\"icChange\", function (event) {\r\n console.log(event.detail.value);\r\n });\r\n </script>`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcSelectWithMulti\r\n label=\"What are your favourite types of coffee?\"\r\n options={options}\r\n multiple\r\n/>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `const useStyles = createUseStyles({\r\n parentContainer: {\r\n padding: \"var(--ic-space-md)\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nconst options = [\r\n { label: \"Cappuccino\", value: \"Cap\" },\r\n { label: \"Latte\", value: \"Lat\" },\r\n { label: \"Americano\", value: \"Ame\", recommended: true },\r\n { label: \"Filter\", value: \"Fil\" },\r\n { label: \"Flat white\", value: \"Fla\", recommended: true },\r\n { label: \"Mocha\", value: \"Moc\" },\r\n { label: \"Macchiato\", value: \"Mac\" },\r\n];\r\nreturn ( \r\n <div className={classes.parentContainer}>\r\n {shortCode}\r\n </div>\r\n)`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `const useStyles = createUseStyles({\r\n parentContainer: {\r\n padding: \"var(--ic-space-md)\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nconst options = [\r\n { label: \"Cappuccino\", value: \"Cap\" },\r\n { label: \"Latte\", value: \"Lat\" },\r\n { label: \"Americano\", value: \"Ame\", recommended: true },\r\n { label: \"Filter\", value: \"Fil\" },\r\n { label: \"Flat white\", value: \"Fla\", recommended: true },\r\n { label: \"Mocha\", value: \"Moc\" },\r\n { label: \"Macchiato\", value: \"Mac\" },\r\n];\r\nreturn ( \r\n <div className={classes.parentContainer}>\r\n {shortCode}\r\n </div>\r\n)`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview snippets={recc}>\r\n <div style={{ display: \"flex\", flexDirection: \"column\", gap: \"1rem\" }}>\r\n <IcSelectWithMulti\r\n label=\"What are your favourite types of coffee?\"\r\n multiple\r\n options={OPTIONS_WITH_RECOMMENDED}\r\n />\r\n </div>\r\n</ComponentPreview>\r\n\r\n### Validation\r\n\r\nDisplay a validation status and message by using the `validation-status` and `validation-message` props.\r\nThe `validation-status` prop takes the values `success`, `warning` or `error`.\r\n\r\nexport const validation = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: ` <ic-select-with-multi\r\n id=\"select-default\"\r\n label=\"What are your favourite types of coffee?\"\r\n multiple=\"true\"\r\n validation-status=\"success\"\r\n validation-text=\"Coffee available\"\r\n></ic-select-with-multi>`,\r\n long: `.parent-container {\r\n padding: var(--ic-space-md);\r\n }\r\n</style>\r\n<body>\r\n <div class=\"parent-container\">\r\n {shortCode}\r\n </div>\r\n <script>\r\n var select = document.querySelector(\"#select-default\");\r\n select.options = [\r\n { label: \"Cappuccino\", value: \"Cap\" },\r\n { label: \"Latte\", value: \"Lat\" },\r\n { label: \"Americano\", value: \"Ame\" },\r\n { label: \"Filter\", value: \"Fil\" },\r\n { label: \"Flat white\", value: \"Fla\" },\r\n { label: \"Mocha\", value: \"Moc\" },\r\n { label: \"Macchiato\", value: \"Mac\" },\r\n ];\r\n select.addEventListener(\"icChange\", function (event) {\r\n console.log(event.detail.value);\r\n });\r\n </script>`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcSelectWithMulti\r\n label=\"What are your favourite types of coffee?\"\r\n options={options}\r\n multiple\r\n validation-status=\"success\"\r\n validation-text=\"Coffee available\"\r\n/>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `const useStyles = createUseStyles({\r\n parentContainer: {\r\n padding: \"var(--ic-space-md)\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nconst options = [\r\n { label: \"Cappuccino\", value: \"Cap\" },\r\n { label: \"Latte\", value: \"Lat\" },\r\n { label: \"Americano\", value: \"Ame\" },\r\n { label: \"Filter\", value: \"Fil\" },\r\n { label: \"Flat white\", value: \"Fla\" },\r\n { label: \"Mocha\", value: \"Moc\" },\r\n { label: \"Macchiato\", value: \"Mac\" },\r\n];\r\nreturn ( \r\n <div className={classes.parentContainer}>\r\n {shortCode}\r\n </div>\r\n)`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `const useStyles = createUseStyles({\r\n parentContainer: {\r\n padding: \"var(--ic-space-md)\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nconst options = [\r\n { label: \"Cappuccino\", value: \"Cap\" },\r\n { label: \"Latte\", value: \"Lat\" },\r\n { label: \"Americano\", value: \"Ame\" },\r\n { label: \"Filter\", value: \"Fil\" },\r\n { label: \"Flat white\", value: \"Fla\" },\r\n { label: \"Mocha\", value: \"Moc\" },\r\n { label: \"Macchiato\", value: \"Mac\" },\r\n];\r\nreturn ( \r\n <div className={classes.parentContainer}>\r\n {shortCode}\r\n </div>\r\n)`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview snippets={validation}>\r\n <div style={{ display: \"flex\", flexDirection: \"column\", gap: \"1rem\" }}>\r\n <IcSelectWithMulti\r\n label=\"What are your favourite types of coffee?\"\r\n multiple\r\n options={OPTIONS}\r\n validation-status=\"success\"\r\n validation-text=\"Coffee available\"\r\n />\r\n </div>\r\n</ComponentPreview>\r\n\r\n### Loading with error\r\n\r\nDisplay the loading state by using the `loading` prop.\r\nThe multi-select will show a loading error after the amount of time specified using the `timeout` prop has elapsed.\r\n\r\nexport const loading = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-select-with-multi\r\n id=\"select-default\"\r\n label=\"What are your favourite types of coffee?\"\r\n multiple=\"true\"\r\n loading=\"true\"\r\n timeout=\"1000\"\r\n></ic-select-with-multi>`,\r\n long: `.parent-container {\r\n padding: var(--ic-space-md);\r\n }\r\n</style>\r\n<body>\r\n <div class=\"parent-container\">\r\n {shortCode}\r\n </div>\r\n <script>\r\n var select = document.querySelector(\"#select-default\");\r\n select.options = [\r\n { label: \"Cappuccino\", value: \"Cap\" },\r\n { label: \"Latte\", value: \"Lat\" },\r\n { label: \"Americano\", value: \"Ame\" },\r\n { label: \"Filter\", value: \"Fil\" },\r\n { label: \"Flat white\", value: \"Fla\" },\r\n { label: \"Mocha\", value: \"Moc\" },\r\n { label: \"Macchiato\", value: \"Mac\" },\r\n ];\r\n select.addEventListener(\"icChange\", function (event) {\r\n console.log(event.detail.value);\r\n });\r\n </script>`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcSelectWithMulti\r\n label=\"What are your favourite types of coffee?\"\r\n options={options}\r\n multiple\r\n loading\r\n timeout={1000}\r\n/>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `const useStyles = createUseStyles({\r\n parentContainer: {\r\n padding: \"var(--ic-space-md)\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nconst options = [\r\n { label: \"Cappuccino\", value: \"Cap\" },\r\n { label: \"Latte\", value: \"Lat\" },\r\n { label: \"Americano\", value: \"Ame\" },\r\n { label: \"Filter\", value: \"Fil\" },\r\n { label: \"Flat white\", value: \"Fla\" },\r\n { label: \"Mocha\", value: \"Moc\" },\r\n { label: \"Macchiato\", value: \"Mac\" },\r\n];\r\nreturn ( \r\n <div className={classes.parentContainer}>\r\n {shortCode}\r\n </div>\r\n)`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `const useStyles = createUseStyles({\r\n parentContainer: {\r\n padding: \"var(--ic-space-md)\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nconst options = [\r\n { label: \"Cappuccino\", value: \"Cap\" },\r\n { label: \"Latte\", value: \"Lat\" },\r\n { label: \"Americano\", value: \"Ame\" },\r\n { label: \"Filter\", value: \"Fil\" },\r\n { label: \"Flat white\", value: \"Fla\" },\r\n { label: \"Mocha\", value: \"Moc\" },\r\n { label: \"Macchiato\", value: \"Mac\" },\r\n];\r\nreturn ( \r\n <div className={classes.parentContainer}>\r\n {shortCode}\r\n </div>\r\n)`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview snippets={loading}>\r\n <div style={{ display: \"flex\", flexDirection: \"column\", gap: \"1rem\" }}>\r\n <IcSelectWithMulti\r\n label=\"What are your favourite types of coffee?\"\r\n multiple\r\n loading\r\n timeout={1000}\r\n options={OPTIONS}\r\n />\r\n </div>\r\n</ComponentPreview>\r\n",
"path": "/components/multi-select/code",
"date": "2024-06-05",
"title": "Multi-select",
@@ -2656,16 +2656,16 @@
}
],
"meta": {
- "relativePath": "components/multi-select/code.mdx",
- "createdAt": "2024-11-06T10:27:49.404Z",
- "lastModified": "2024-11-06T10:19:00.072Z",
- "size": 44849,
- "formattedSize": "43.8 KB"
+ "relativePath": "components\\multi-select\\code.mdx",
+ "createdAt": "2024-12-04T13:23:54.106Z",
+ "lastModified": "2024-12-04T13:23:54.106Z",
+ "size": 46676,
+ "formattedSize": "45.6 KB"
}
},
{
"id": "components\\multi-select\\guidancex",
- "contents": "\nimport { IcAlert, IcLink } from \"@ukic/react\";\nimport { IcSelectWithMulti } from \"@ukic/canary-react\";\n\nimport { OPTIONS } from \"./story-data\";\n\n<IcAlert\n heading=\"Canary component\"\n variant=\"info\"\n message=\"This component is new and its guidance will be updated over time.\"\n/>\n\n## Canary components\n\nCanary components are unstable components that are released for testing purposes.\n\nWe value any feedback from users willing to try them in their applications.\n\nThese components should not be used in production apps without understanding the risk that changes may occur in order to fix bugs or improve functionality.\n\nFor more information on Canary components, read our approach to [releases and versions](/get-started/releases-versions).\n\n<p>\n Additional details on the props and events for this component can be found in\n the{\" \"}\n <IcLink\n href=\"https://mi6.github.io/ic-ui-kit/branches/develop/canary-web-components/?path=/docs/web-components-multi-select--docs\"\n target=\"_blank\"\n >\n Canary web components\n </IcLink>{\" \"}\n and{\" \"}\n <IcLink\n href=\"https://mi6.github.io/ic-ui-kit/branches/develop/canary-react/?path=/docs/react-components-multi-select--docs\"\n target=\"_blank\"\n >\n Canary React\n </IcLink>{\" \"}\n storybooks.\n</p>\n\n## Single select\n\nTo view guidance and documentation relating to the single select component, check the [select page](/components/select).\n\n## Component demo\n\n<ComponentPreview>\n <IcSelectWithMulti\n label=\"What are your favourite types of coffee?\"\n options={OPTIONS}\n multiple\n />\n</ComponentPreview>\n",
+ "contents": "\r\nimport { IcAlert, IcLink } from \"@ukic/react\";\r\nimport { IcSelectWithMulti } from \"@ukic/canary-react\";\r\n\r\nimport { OPTIONS } from \"./story-data\";\r\n\r\n<IcAlert\r\n heading=\"Canary component\"\r\n variant=\"info\"\r\n message=\"This component is new and its guidance will be updated over time.\"\r\n/>\r\n\r\n## Canary components\r\n\r\nCanary components are unstable components that are released for testing purposes.\r\n\r\nWe value any feedback from users willing to try them in their applications.\r\n\r\nThese components should not be used in production apps without understanding the risk that changes may occur in order to fix bugs or improve functionality.\r\n\r\nFor more information on Canary components, read our approach to [releases and versions](/get-started/releases-versions).\r\n\r\n<p>\r\n Additional details on the props and events for this component can be found in\r\n the{\" \"}\r\n <IcLink\r\n href=\"https://mi6.github.io/ic-ui-kit/branches/develop/canary-web-components/?path=/docs/web-components-multi-select--docs\"\r\n target=\"_blank\"\r\n >\r\n Canary web components\r\n </IcLink>{\" \"}\r\n and{\" \"}\r\n <IcLink\r\n href=\"https://mi6.github.io/ic-ui-kit/branches/develop/canary-react/?path=/docs/react-components-multi-select--docs\"\r\n target=\"_blank\"\r\n >\r\n Canary React\r\n </IcLink>{\" \"}\r\n storybooks.\r\n</p>\r\n\r\n## Single select\r\n\r\nTo view guidance and documentation relating to the single select component, check the [select page](/components/select).\r\n\r\n## Component demo\r\n\r\n<ComponentPreview>\r\n <IcSelectWithMulti\r\n label=\"What are your favourite types of coffee?\"\r\n options={OPTIONS}\r\n multiple\r\n />\r\n</ComponentPreview>\r\n",
"path": "/components/multi-select",
"navPriority": 22,
"date": "2024-06-05",
@@ -2684,11 +2684,11 @@
],
"tags": ["Combobox", "Dropdown menu"],
"meta": {
- "relativePath": "components/multi-select/guidance.mdx",
- "createdAt": "2024-11-06T10:27:49.404Z",
- "lastModified": "2024-11-06T10:19:00.076Z",
- "size": 1982,
- "formattedSize": "1.9 KB"
+ "relativePath": "components\\multi-select\\guidance.mdx",
+ "createdAt": "2024-12-04T13:23:54.106Z",
+ "lastModified": "2024-12-04T13:23:54.106Z",
+ "size": 2057,
+ "formattedSize": "2.0 KB"
}
},
{
@@ -2715,16 +2715,16 @@
}
],
"meta": {
- "relativePath": "components/page-header/accessibility.mdx",
- "createdAt": "2024-11-06T10:27:49.404Z",
- "lastModified": "2024-11-06T10:19:00.076Z",
+ "relativePath": "components\\page-header\\accessibility.mdx",
+ "createdAt": "2024-11-05T11:57:52.511Z",
+ "lastModified": "2024-11-05T11:57:52.511Z",
"size": 2399,
"formattedSize": "2.3 KB"
}
},
{
"id": "components\\page-header\\codex",
- "contents": "\nimport {\n IcPageHeader,\n IcButton,\n IcStepper,\n IcStep,\n SlottedSVG,\n IcTextField,\n IcNavigationItem,\n IcBreadcrumb,\n IcBreadcrumbGroup,\n IcSectionContainer,\n IcChip,\n IcTypography,\n} from \"@ukic/react\";\n\nimport { NavLink, MemoryRouter } from \"react-router-dom\";\n\n## Component demo\n\nexport const snippets = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-page-header\n heading=\"Latte recipe\"\n subheading=\"A Latte is a popular Italian coffee, made with espresso, steamed milk and a thin layer of foam.\"\n reverse-order=\"true\"\n>\n <ic-chip slot=\"heading-adornment\" label=\"BETA\" size=\"large\"></ic-chip>\n <ic-button slot=\"actions\" variant=\"primary\">\n Create coffee\n </ic-button>\n <ic-button slot=\"actions\" variant=\"tertiary\">\n Filter coffee\n </ic-button>\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-text-field\n slot=\"input\"\n placeholder=\"Search for ingredients…\"\n label=\"Input\"\n hide-label=\"true\"\n ></ic-text-field>\n</ic-page-header>`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcPageHeader heading=\"Latte recipe\"\n subheading=\"A Latte is a popular Italian coffee, made with espresso, steamed milk and a thin layer of foam.\"\n reverseOrder \n>\n <IcChip slot=\"heading-adornment\" label=\"BETA\" size=\"large\" />\n <IcButton slot=\"actions\" variant=\"primary\">\n Create coffee\n </IcButton>\n <IcButton slot=\"actions\" variant=\"tertiary\">\n Filter coffee\n </IcButton>\n <IcStepper slot=\"stepper\">\n <IcStep stepTitle=\"Warm kettle\" stepType=\"completed\" />\n <IcStep\n stepTitle=\"Warm milk\"\n stepSubtitle=\"Optional\"\n stepType=\"completed\"\n />\n <IcStep stepTitle=\"Pour milk\" stepType=\"current\" />\n </IcStepper>\n <IcTextField\n slot=\"input\"\n placeholder=\"Search for ingredients…\"\n label=\"Input\"\n hideLabel\n />\n</IcPageHeader>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `{shortCode}`,\n },\n {\n language: \"Javascript\",\n snippet: `{shortCode}`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={snippets} style={{ flexDirection: \"column\" }}>\n <IcPageHeader\n heading=\"Latte recipe\"\n subheading=\"A Latte is a popular Italian coffee, made with espresso, steamed milk and a thin layer of foam. \"\n reverseOrder\n >\n <IcChip slot=\"heading-adornment\" label=\"BETA\" size=\"large\" />\n <IcButton slot=\"actions\" variant=\"primary\">\n Create coffee\n </IcButton>\n <IcButton slot=\"actions\" variant=\"tertiary\">\n Filter coffee\n </IcButton>\n <IcStepper slot=\"stepper\">\n <IcStep stepTitle=\"Warm kettle\" stepType=\"completed\" />\n <IcStep\n stepTitle=\"Warm milk\"\n stepSubtitle=\"Optional\"\n stepType=\"completed\"\n />\n <IcStep stepTitle=\"Pour milk\" stepType=\"current\" />\n </IcStepper>\n <IcTextField\n slot=\"input\"\n placeholder=\"Search for ingredients…\"\n label=\"Input\"\n hideLabel\n />\n </IcPageHeader>\n</ComponentPreview>\n\n## Page header details\n\n<ComponentDetails component=\"ic-page-header\" />\n\n## Variants\n\n### Size small\n\nexport const snippetsSmall = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-page-header\n size=\"small\"\n heading=\"Latte recipe\"\n subheading=\"A Latte is a popular Italian coffee, made with espresso, steamed milk and a thin layer of foam.\"\n></ic-page-header>`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcPageHeader\n size=\"small\"\n heading=\"Latte recipe\"\n subheading=\"A Latte is a popular Italian coffee, made with espresso, steamed milk and a thin layer of foam.\"\n/>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `{shortCode}`,\n },\n {\n language: \"Javascript\",\n snippet: `{shortCode}`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={snippetsSmall} style={{ flexDirection: \"column\" }}>\n <IcPageHeader\n size=\"small\"\n heading=\"Latte recipe\"\n subheading=\"A Latte is a popular Italian coffee, made with espresso, steamed milk and a thin layer of foam.\"\n />\n</ComponentPreview>\n\n### With breadcrumb navigation\n\nexport const withBreadcrumbNavigation = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-page-header heading=\"Latte recipe\" subheading=\"A Latte is a popular Italian coffee, made with espresso, steamed milk and a thin layer of foam.\">\n <ic-chip slot=\"heading-adornment\" label=\"BETA\" size=\"large\"></ic-chip>\n <ic-breadcrumb-group slot=\"breadcrumbs\">\n <ic-breadcrumb current=\"true\" page-title=\"Drinks\" href=\"#\"></ic-breadcrumb>\n <ic-breadcrumb\n page-title=\"Coffees\" \n href=\"#\"\n >\n </ic-breadcrumb>\n <ic-breadcrumb page-title=\"Latte\" href=\"#\"></ic-breadcrumb>\n </ic-breadcrumb-group>\n</ic-page-header>\n `,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcPageHeader heading=\"Latte recipe\" subheading=\"A Latte is a popular Italian coffee, made with espresso, steamed milk and a thin layer of foam.\">\n <IcChip slot=\"heading-adornment\" label=\"BETA\" size=\"large\" />\n <IcBreadcrumbGroup slot=\"breadcrumbs\">\n <IcBreadcrumb pageTitle=\"Drinks\" href=\"#\" />\n <IcBreadcrumb \n pageTitle=\"Coffees\" \n href=\"#\"\n />\n <IcBreadcrumb current pageTitle=\"Latte\" href=\"#\" />\n </IcBreadcrumbGroup>\n</IcPageHeader>\n `,\n long: [\n {\n language: \"Typescript\",\n snippet: `{shortCode}`,\n },\n {\n language: \"Javascript\",\n snippet: `{shortCode}`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview\n snippets={withBreadcrumbNavigation}\n style={{ flexDirection: \"column\" }}\n>\n <IcPageHeader\n heading=\"Latte recipe\"\n subheading=\"A Latte is a popular Italian coffee, made with espresso, steamed milk and a thin layer of foam.\"\n >\n <IcChip slot=\"heading-adornment\" label=\"BETA\" size=\"large\" />\n <IcBreadcrumbGroup slot=\"breadcrumbs\">\n <IcBreadcrumb pageTitle=\"Drinks\" href=\"#\" />\n <IcBreadcrumb pageTitle=\"Coffees\" href=\"#\" />\n <IcBreadcrumb current pageTitle=\"Latte\" href=\"#\" />\n </IcBreadcrumbGroup>\n </IcPageHeader>\n</ComponentPreview>\n\n### With actions, input and stepper\n\nexport const withActionsInputStepper = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-page-header heading=\"Latte recipe\" subheading=\"A Latte is a popular Italian coffee, made with espresso, steamed milk and a thin layer of foam.\" reverse-order=\"true\">\n <ic-chip slot=\"heading-adornment\" label=\"BETA\" size=\"large\"></ic-chip>\n <ic-button slot=\"actions\" variant=\"primary\">Create coffee</ic-button>\n <ic-button slot=\"actions\" variant=\"tertiary\">Filter coffee</ic-button>\n <ic-stepper slot=\"stepper\">\n <ic-step step-title=\"Warm kettle\" step-type=\"completed\"></ic-step>\n <ic-step step-title=\"Warm milk\" step-subtitle=\"Optional\" step-type=\"completed\"></ic-step>\n <ic-step step-title=\"Pour milk\" step-type=\"current\"></ic-step>\n </ic-stepper>\n <ic-text-field slot=\"input\" placeholder=\"Search for ingredients…\" label=\"Input\" hide-label=\"true\" />\n</ic-page-header>\n `,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcPageHeader \n heading=\"latte recipe\" \n subheading=\"A Latte is a popular Italian coffee, made with espresso, steamed milk and a thin layer of foam.\" \n reverseOrder\n>\n <IcChip slot=\"heading-adornment\" label=\"BETA\" size=\"large\" />\n <IcButton slot=\"actions\" variant=\"primary\">\n Create coffee\n </IcButton>\n <IcButton slot=\"actions\" variant=\"tertiary\">\n Filter coffee\n </IcButton>\n <IcStepper slot=\"stepper\">\n <IcStep stepTitle=\"Warm kettle\" stepType=\"completed\" />\n <IcStep stepTitle=\"Warm milk\" stepSubtitle=\"Optional\" stepType=\"completed\" />\n <IcStep stepTitle=\"Pour milk\" stepType=\"current\" />\n </IcStepper>\n <IcTextField slot=\"input\" placeholder=\"Search for ingredients…\" label=\"Input\" hideLabel />\n</IcPageHeader>\n `,\n long: [\n {\n language: \"Typescript\",\n snippet: `{shortCode}`,\n },\n {\n language: \"Javascript\",\n snippet: `{shortCode}`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview\n snippets={withActionsInputStepper}\n style={{ flexDirection: \"column\" }}\n>\n <IcPageHeader\n heading=\"Latte recipe\"\n subheading=\"A Latte is a popular Italian coffee, made with espresso, steamed milk and a thin layer of foam.\"\n reverseOrder\n >\n <IcChip slot=\"heading-adornment\" label=\"BETA\" size=\"large\" />\n <IcButton slot=\"actions\" variant=\"primary\">\n Create coffee\n </IcButton>\n <IcButton slot=\"actions\" variant=\"tertiary\">\n Filter coffee\n </IcButton>\n <IcStepper slot=\"stepper\">\n <IcStep stepTitle=\"Warm kettle\" stepType=\"completed\" />\n <IcStep\n stepTitle=\"Warm milk\"\n stepSubtitle=\"Optional\"\n stepType=\"completed\"\n />\n <IcStep stepTitle=\"Pour milk\" stepType=\"current\" />\n </IcStepper>\n <IcTextField\n slot=\"input\"\n placeholder=\"Search for ingredients…\"\n label=\"Input\"\n hideLabel\n />\n </IcPageHeader>\n</ComponentPreview>\n\n### With actions, input and tabs\n\nexport const withActionsInputTabs = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-page-header \n heading=\"Latte recipe\" \n subheading=\"A Latte is a popular Italian coffee, made with espresso, steamed milk and a thin layer of foam.\" \n reverse-order=\"true\"\n>\n <ic-chip slot=\"heading-adornment\" label=\"BETA\" size=\"large\"></ic-chip>\n <ic-button slot=\"actions\" variant=\"primary\">Create coffee</ic-button>\n <ic-button slot=\"actions\" variant=\"tertiary\">Filter coffee</ic-button>\n <ic-text-field slot=\"input\" placeholder=\"Search for ingredients…\" label=\"Input\" hide-label=\"true\"></ic-text-field>\n <ic-navigation-item \n slot=\"tabs\" \n label=\"Method\" \n href=\"#\" \n selected=\"true\"\n >\n </ic-navigation-item>\n <ic-navigation-item \n slot=\"tabs\" \n label=\"Ingredients\" \n href=\"#\"\n >\n </ic-navigation-item>\n</ic-page-header>\n `,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcPageHeader \n heading=\"Latte recipe\" \n subheading=\"A Latte is a popular Italian coffee, made with espresso, steamed milk and a thin layer of foam.\" \n reverseOrder\n>\n <IcChip slot=\"heading-adornment\" label=\"BETA\" size=\"large\" />\n <IcButton slot=\"actions\" variant=\"primary\">\n Create coffee\n </IcButton>\n <IcButton slot=\"actions\" variant=\"tertiary\">\n Filter coffee\n </IcButton>\n <IcTextField \n slot=\"input\" \n placeholder=\"Search for ingredients…\"\n label=\"Input\" \n hideLabel \n />\n <IcNavigationItem \n slot=\"tabs\" \n label=\"Method\" \n href=\"#\" \n selected \n />\n <IcNavigationItem \n slot=\"tabs\" \n label=\"Ingredients\" \n href=\"#\" \n />\n</IcPageHeader>\n `,\n long: [\n {\n language: \"Typescript\",\n snippet: `{shortCode}`,\n },\n {\n language: \"Javascript\",\n snippet: `{shortCode}`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview\n snippets={withActionsInputTabs}\n style={{ flexDirection: \"column\" }}\n>\n <IcPageHeader\n heading=\"Latte recipe\"\n subheading=\"A Latte is a popular Italian coffee, made with espresso, steamed milk and a thin layer of foam.\"\n reverseOrder\n >\n <IcChip slot=\"heading-adornment\" label=\"BETA\" size=\"large\" />\n <IcButton slot=\"actions\" variant=\"primary\">\n Create coffee\n </IcButton>\n <IcButton slot=\"actions\" variant=\"tertiary\">\n Filter coffee\n </IcButton>\n <IcTextField\n slot=\"input\"\n placeholder=\"Search for ingredients…\"\n label=\"Input\"\n hideLabel\n />\n <IcNavigationItem slot=\"tabs\" label=\"Method\" href=\"#\" selected />\n <IcNavigationItem slot=\"tabs\" label=\"Ingredients\" href=\"#\" />\n </IcPageHeader>\n</ComponentPreview>\n\n### With React Router\n\nexport const withReactRouter = [\n {\n technology: \"React\",\n snippets: {\n short: `<MemoryRouter initialEntries={[\"/\"]}>\n <IcPageHeader\n heading=\"Latte recipe\"\n subheading=\"A Latte is a popular Italian coffee, made with espresso, steamed milk and a thin layer of foam.\"\n reverseOrder\n >\n <IcChip slot=\"heading-adornment\" label=\"BETA\" size=\"large\"/>\n <IcButton slot=\"actions\" variant=\"primary\"\n >Create coffee\n <SlottedSVG \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 </SlottedSVG>\n </IcButton>\n <IcButton slot=\"actions\" variant=\"tertiary\">Filter coffee</IcButton>\n <IcNavigationItem slot=\"tabs\" selected>\n <NavLink slot=\"navigation-item\" to=\"/\">Method</NavLink>\n </IcNavigationItem> \n <IcNavigationItem slot=\"tabs\">\n <NavLink slot=\"navigation-item\" to=\"/favourites\">Ingredients</NavLink>\n </IcNavigationItem>\n <IcTextField \n slot=\"input\" \n placeholder=\"Search for ingredients…\"\n label=\"Input\" \n hideLabel \n class={classes.textField}\n />\n </IcPageHeader>\n <IcSectionContainer>\n <Routes>\n <Route path=\"/\" element={<IcTypography>This page is about our Latte making methods</IcTypography>}/>\n <Route path=\"/favourites\" element={<IcTypography>This page is about the ingredients used in our Latte</IcTypography>}/>\n </Routes>\n </IcSectionContainer>\n</MemoryRouter>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n textField: {\n '@media (max-width: 576px)': {\n width: '17.5rem'\n }\n }\n});\nconst classes = useStyles();\nreturn (\n {shortCode}\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n textField: {\n '@media (max-width: 576px)': {\n width: '17.5rem'\n }\n }\n});\nconst classes = useStyles();\nreturn (\n {shortCode}\n)`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview\n snippets={withReactRouter}\n style={{ flexDirection: \"column\" }}\n>\n <MemoryRouter initialEntries={[\"/\"]}>\n <IcPageHeader\n heading=\"Latte recipe\"\n subheading=\"A Latte is a popular Italian coffee, made with espresso, steamed milk and a thin layer of foam.\"\n reverseOrder\n >\n <IcChip slot=\"heading-adornment\" label=\"BETA\" size=\"large\" />\n <IcButton slot=\"actions\" variant=\"primary\">\n Create coffee\n <SlottedSVG\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 </SlottedSVG>\n </IcButton>\n <IcButton slot=\"actions\" variant=\"tertiary\">\n Filter coffee\n </IcButton>\n <IcNavigationItem slot=\"tabs\" selected>\n <NavLink slot=\"navigation-item\" to=\"/\">\n Method\n </NavLink>\n </IcNavigationItem>\n <IcNavigationItem slot=\"tabs\">\n <NavLink slot=\"navigation-item\" to=\"/favourites\">\n Ingredients\n </NavLink>\n </IcNavigationItem>\n <IcTextField\n slot=\"input\"\n placeholder=\"Search for ingredients…\"\n label=\"Input\"\n hideLabel\n style={{ \"@media (maxWidth: 576px)\": { width: \"17.5rem\" } }}\n />\n </IcPageHeader>\n <IcSectionContainer />\n </MemoryRouter>\n</ComponentPreview>\n\n### With Slots\n\nexport const withSlots = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-page-header>\n <ic-typography variant=\"h1\" slot=\"heading\">Latte recipe</ic-typography>\n <ic-typography slot=\"subheading\">A Latte is a popular Italian coffee, made with espresso, steamed milk and a thin layer of foam.</ic-typography>\n <ic-chip slot=\"heading-adornment\" label=\"BETA\" size=\"large\"></ic-chip>\n <ic-breadcrumb-group slot=\"breadcrumbs\">\n <ic-breadcrumb current=\"true\" page-title=\"Drinks\" href=\"#\"></ic-breadcrumb>\n <ic-breadcrumb page-title=\"Coffees\" href=\"#\"></ic-breadcrumb>\n <ic-breadcrumb page-title=\"Latte\" href=\"#\"></ic-breadcrumb>\n </ic-breadcrumb-group>\n <ic-text-field slot=\"input\" placeholder=\"Search for ingredients…\" label=\"Input\" hide-label=\"true\" />\n</ic-page-header>`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcPageHeader>\n <IcTypography variant=\"h1\" slot=\"heading\">\n Latte recipe\n </IcTypography>\n <IcTypography slot=\"subheading\">\n A Latte is a popular Italian coffee, made with espresso, steamed milk and\n a thin layer of foam.\n </IcTypography>\n <IcChip slot=\"heading-adornment\" label=\"BETA\" size=\"large\" />\n <IcBreadcrumbGroup slot=\"breadcrumbs\">\n <IcBreadcrumb pageTitle=\"Drinks\" href=\"#\" />\n <IcBreadcrumb pageTitle=\"Coffees\" href=\"#\" />\n <IcBreadcrumb current pageTitle=\"Latte\" href=\"#\" />\n </IcBreadcrumbGroup>\n <IcTextField\n slot=\"input\"\n placeholder=\"Search for ingredients…\"\n label=\"Input\"\n hideLabel\n />\n</IcPageHeader>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `{shortCode}`,\n },\n {\n language: \"Javascript\",\n snippet: `{shortCode}`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={withSlots} style={{ flexDirection: \"column\" }}>\n <IcPageHeader>\n <IcTypography variant=\"h1\" slot=\"heading\">\n Latte recipe\n </IcTypography>\n <IcTypography slot=\"subheading\">\n A Latte is a popular Italian coffee, made with espresso, steamed milk and\n a thin layer of foam.\n </IcTypography>\n <IcChip slot=\"heading-adornment\" label=\"BETA\" size=\"large\" />\n <IcBreadcrumbGroup slot=\"breadcrumbs\">\n <IcBreadcrumb pageTitle=\"Drinks\" href=\"#\" />\n <IcBreadcrumb pageTitle=\"Coffees\" href=\"#\" />\n <IcBreadcrumb current pageTitle=\"Latte\" href=\"#\" />\n </IcBreadcrumbGroup>\n <IcTextField\n slot=\"input\"\n placeholder=\"Search for ingredients…\"\n label=\"Input\"\n hideLabel\n />\n </IcPageHeader>\n</ComponentPreview>\n",
+ "contents": "\r\nimport {\r\n IcPageHeader,\r\n IcButton,\r\n IcStepper,\r\n IcStep,\r\n SlottedSVG,\r\n IcTextField,\r\n IcNavigationItem,\r\n IcBreadcrumb,\r\n IcBreadcrumbGroup,\r\n IcSectionContainer,\r\n IcChip,\r\n IcTypography,\r\n} from \"@ukic/react\";\r\n\r\nimport { NavLink, MemoryRouter } from \"react-router-dom\";\r\n\r\n## Component demo\r\n\r\nexport const snippets = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-page-header\r\n heading=\"Latte recipe\"\r\n subheading=\"A Latte is a popular Italian coffee, made with espresso, steamed milk and a thin layer of foam.\"\r\n reverse-order=\"true\"\r\n>\r\n <ic-chip slot=\"heading-adornment\" label=\"BETA\" size=\"large\"></ic-chip>\r\n <ic-button slot=\"actions\" variant=\"primary\">\r\n Create coffee\r\n </ic-button>\r\n <ic-button slot=\"actions\" variant=\"tertiary\">\r\n Filter coffee\r\n </ic-button>\r\n <ic-stepper slot=\"stepper\">\r\n <ic-step step-title=\"Warm kettle\" step-type=\"completed\"></ic-step>\r\n <ic-step\r\n step-title=\"Warm milk\"\r\n step-subtitle=\"Optional\"\r\n step-type=\"completed\"\r\n ></ic-step>\r\n <ic-step step-title=\"Pour milk\" step-type=\"current\" ></ic-step>\r\n </ic-stepper>\r\n <ic-text-field\r\n slot=\"input\"\r\n placeholder=\"Search for ingredients…\"\r\n label=\"Input\"\r\n hide-label=\"true\"\r\n ></ic-text-field>\r\n</ic-page-header>`,\r\n long: `{shortCode}`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcPageHeader heading=\"Latte recipe\"\r\n subheading=\"A Latte is a popular Italian coffee, made with espresso, steamed milk and a thin layer of foam.\"\r\n reverseOrder \r\n>\r\n <IcChip slot=\"heading-adornment\" label=\"BETA\" size=\"large\" />\r\n <IcButton slot=\"actions\" variant=\"primary\">\r\n Create coffee\r\n </IcButton>\r\n <IcButton slot=\"actions\" variant=\"tertiary\">\r\n Filter coffee\r\n </IcButton>\r\n <IcStepper slot=\"stepper\">\r\n <IcStep stepTitle=\"Warm kettle\" stepType=\"completed\" />\r\n <IcStep\r\n stepTitle=\"Warm milk\"\r\n stepSubtitle=\"Optional\"\r\n stepType=\"completed\"\r\n />\r\n <IcStep stepTitle=\"Pour milk\" stepType=\"current\" />\r\n </IcStepper>\r\n <IcTextField\r\n slot=\"input\"\r\n placeholder=\"Search for ingredients…\"\r\n label=\"Input\"\r\n hideLabel\r\n />\r\n</IcPageHeader>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `{shortCode}`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `{shortCode}`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview snippets={snippets} style={{ flexDirection: \"column\" }}>\r\n <IcPageHeader\r\n heading=\"Latte recipe\"\r\n subheading=\"A Latte is a popular Italian coffee, made with espresso, steamed milk and a thin layer of foam. \"\r\n reverseOrder\r\n >\r\n <IcChip slot=\"heading-adornment\" label=\"BETA\" size=\"large\" />\r\n <IcButton slot=\"actions\" variant=\"primary\">\r\n Create coffee\r\n </IcButton>\r\n <IcButton slot=\"actions\" variant=\"tertiary\">\r\n Filter coffee\r\n </IcButton>\r\n <IcStepper slot=\"stepper\">\r\n <IcStep stepTitle=\"Warm kettle\" stepType=\"completed\" />\r\n <IcStep\r\n stepTitle=\"Warm milk\"\r\n stepSubtitle=\"Optional\"\r\n stepType=\"completed\"\r\n />\r\n <IcStep stepTitle=\"Pour milk\" stepType=\"current\" />\r\n </IcStepper>\r\n <IcTextField\r\n slot=\"input\"\r\n placeholder=\"Search for ingredients…\"\r\n label=\"Input\"\r\n hideLabel\r\n />\r\n </IcPageHeader>\r\n</ComponentPreview>\r\n\r\n## Page header details\r\n\r\n<ComponentDetails component=\"ic-page-header\" />\r\n\r\n## Variants\r\n\r\n### Size small\r\n\r\nexport const snippetsSmall = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-page-header\r\n size=\"small\"\r\n heading=\"Latte recipe\"\r\n subheading=\"A Latte is a popular Italian coffee, made with espresso, steamed milk and a thin layer of foam.\"\r\n></ic-page-header>`,\r\n long: `{shortCode}`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcPageHeader\r\n size=\"small\"\r\n heading=\"Latte recipe\"\r\n subheading=\"A Latte is a popular Italian coffee, made with espresso, steamed milk and a thin layer of foam.\"\r\n/>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `{shortCode}`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `{shortCode}`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview snippets={snippetsSmall} style={{ flexDirection: \"column\" }}>\r\n <IcPageHeader\r\n size=\"small\"\r\n heading=\"Latte recipe\"\r\n subheading=\"A Latte is a popular Italian coffee, made with espresso, steamed milk and a thin layer of foam.\"\r\n />\r\n</ComponentPreview>\r\n\r\n### With breadcrumb navigation\r\n\r\nexport const withBreadcrumbNavigation = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-page-header heading=\"Latte recipe\" subheading=\"A Latte is a popular Italian coffee, made with espresso, steamed milk and a thin layer of foam.\">\r\n <ic-chip slot=\"heading-adornment\" label=\"BETA\" size=\"large\"></ic-chip>\r\n <ic-breadcrumb-group slot=\"breadcrumbs\">\r\n <ic-breadcrumb current=\"true\" page-title=\"Drinks\" href=\"#\"></ic-breadcrumb>\r\n <ic-breadcrumb\r\n page-title=\"Coffees\" \r\n href=\"#\"\r\n >\r\n </ic-breadcrumb>\r\n <ic-breadcrumb page-title=\"Latte\" href=\"#\"></ic-breadcrumb>\r\n </ic-breadcrumb-group>\r\n</ic-page-header>\r\n `,\r\n long: `{shortCode}`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcPageHeader heading=\"Latte recipe\" subheading=\"A Latte is a popular Italian coffee, made with espresso, steamed milk and a thin layer of foam.\">\r\n <IcChip slot=\"heading-adornment\" label=\"BETA\" size=\"large\" />\r\n <IcBreadcrumbGroup slot=\"breadcrumbs\">\r\n <IcBreadcrumb pageTitle=\"Drinks\" href=\"#\" />\r\n <IcBreadcrumb \r\n pageTitle=\"Coffees\" \r\n href=\"#\"\r\n />\r\n <IcBreadcrumb current pageTitle=\"Latte\" href=\"#\" />\r\n </IcBreadcrumbGroup>\r\n</IcPageHeader>\r\n `,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `{shortCode}`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `{shortCode}`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview\r\n snippets={withBreadcrumbNavigation}\r\n style={{ flexDirection: \"column\" }}\r\n>\r\n <IcPageHeader\r\n heading=\"Latte recipe\"\r\n subheading=\"A Latte is a popular Italian coffee, made with espresso, steamed milk and a thin layer of foam.\"\r\n >\r\n <IcChip slot=\"heading-adornment\" label=\"BETA\" size=\"large\" />\r\n <IcBreadcrumbGroup slot=\"breadcrumbs\">\r\n <IcBreadcrumb pageTitle=\"Drinks\" href=\"#\" />\r\n <IcBreadcrumb pageTitle=\"Coffees\" href=\"#\" />\r\n <IcBreadcrumb current pageTitle=\"Latte\" href=\"#\" />\r\n </IcBreadcrumbGroup>\r\n </IcPageHeader>\r\n</ComponentPreview>\r\n\r\n### With actions, input and stepper\r\n\r\nexport const withActionsInputStepper = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-page-header heading=\"Latte recipe\" subheading=\"A Latte is a popular Italian coffee, made with espresso, steamed milk and a thin layer of foam.\" reverse-order=\"true\">\r\n <ic-chip slot=\"heading-adornment\" label=\"BETA\" size=\"large\"></ic-chip>\r\n <ic-button slot=\"actions\" variant=\"primary\">Create coffee</ic-button>\r\n <ic-button slot=\"actions\" variant=\"tertiary\">Filter coffee</ic-button>\r\n <ic-stepper slot=\"stepper\">\r\n <ic-step step-title=\"Warm kettle\" step-type=\"completed\"></ic-step>\r\n <ic-step step-title=\"Warm milk\" step-subtitle=\"Optional\" step-type=\"completed\"></ic-step>\r\n <ic-step step-title=\"Pour milk\" step-type=\"current\"></ic-step>\r\n </ic-stepper>\r\n <ic-text-field slot=\"input\" placeholder=\"Search for ingredients…\" label=\"Input\" hide-label=\"true\" />\r\n</ic-page-header>\r\n `,\r\n long: `{shortCode}`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcPageHeader \r\n heading=\"latte recipe\" \r\n subheading=\"A Latte is a popular Italian coffee, made with espresso, steamed milk and a thin layer of foam.\" \r\n reverseOrder\r\n>\r\n <IcChip slot=\"heading-adornment\" label=\"BETA\" size=\"large\" />\r\n <IcButton slot=\"actions\" variant=\"primary\">\r\n Create coffee\r\n </IcButton>\r\n <IcButton slot=\"actions\" variant=\"tertiary\">\r\n Filter coffee\r\n </IcButton>\r\n <IcStepper slot=\"stepper\">\r\n <IcStep stepTitle=\"Warm kettle\" stepType=\"completed\" />\r\n <IcStep stepTitle=\"Warm milk\" stepSubtitle=\"Optional\" stepType=\"completed\" />\r\n <IcStep stepTitle=\"Pour milk\" stepType=\"current\" />\r\n </IcStepper>\r\n <IcTextField slot=\"input\" placeholder=\"Search for ingredients…\" label=\"Input\" hideLabel />\r\n</IcPageHeader>\r\n `,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `{shortCode}`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `{shortCode}`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview\r\n snippets={withActionsInputStepper}\r\n style={{ flexDirection: \"column\" }}\r\n>\r\n <IcPageHeader\r\n heading=\"Latte recipe\"\r\n subheading=\"A Latte is a popular Italian coffee, made with espresso, steamed milk and a thin layer of foam.\"\r\n reverseOrder\r\n >\r\n <IcChip slot=\"heading-adornment\" label=\"BETA\" size=\"large\" />\r\n <IcButton slot=\"actions\" variant=\"primary\">\r\n Create coffee\r\n </IcButton>\r\n <IcButton slot=\"actions\" variant=\"tertiary\">\r\n Filter coffee\r\n </IcButton>\r\n <IcStepper slot=\"stepper\">\r\n <IcStep stepTitle=\"Warm kettle\" stepType=\"completed\" />\r\n <IcStep\r\n stepTitle=\"Warm milk\"\r\n stepSubtitle=\"Optional\"\r\n stepType=\"completed\"\r\n />\r\n <IcStep stepTitle=\"Pour milk\" stepType=\"current\" />\r\n </IcStepper>\r\n <IcTextField\r\n slot=\"input\"\r\n placeholder=\"Search for ingredients…\"\r\n label=\"Input\"\r\n hideLabel\r\n />\r\n </IcPageHeader>\r\n</ComponentPreview>\r\n\r\n### With actions, input and tabs\r\n\r\nexport const withActionsInputTabs = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-page-header \r\n heading=\"Latte recipe\" \r\n subheading=\"A Latte is a popular Italian coffee, made with espresso, steamed milk and a thin layer of foam.\" \r\n reverse-order=\"true\"\r\n>\r\n <ic-chip slot=\"heading-adornment\" label=\"BETA\" size=\"large\"></ic-chip>\r\n <ic-button slot=\"actions\" variant=\"primary\">Create coffee</ic-button>\r\n <ic-button slot=\"actions\" variant=\"tertiary\">Filter coffee</ic-button>\r\n <ic-text-field slot=\"input\" placeholder=\"Search for ingredients…\" label=\"Input\" hide-label=\"true\"></ic-text-field>\r\n <ic-navigation-item \r\n slot=\"tabs\" \r\n label=\"Method\" \r\n href=\"#\" \r\n selected=\"true\"\r\n >\r\n </ic-navigation-item>\r\n <ic-navigation-item \r\n slot=\"tabs\" \r\n label=\"Ingredients\" \r\n href=\"#\"\r\n >\r\n </ic-navigation-item>\r\n</ic-page-header>\r\n `,\r\n long: `{shortCode}`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcPageHeader \r\n heading=\"Latte recipe\" \r\n subheading=\"A Latte is a popular Italian coffee, made with espresso, steamed milk and a thin layer of foam.\" \r\n reverseOrder\r\n>\r\n <IcChip slot=\"heading-adornment\" label=\"BETA\" size=\"large\" />\r\n <IcButton slot=\"actions\" variant=\"primary\">\r\n Create coffee\r\n </IcButton>\r\n <IcButton slot=\"actions\" variant=\"tertiary\">\r\n Filter coffee\r\n </IcButton>\r\n <IcTextField \r\n slot=\"input\" \r\n placeholder=\"Search for ingredients…\"\r\n label=\"Input\" \r\n hideLabel \r\n />\r\n <IcNavigationItem \r\n slot=\"tabs\" \r\n label=\"Method\" \r\n href=\"#\" \r\n selected \r\n />\r\n <IcNavigationItem \r\n slot=\"tabs\" \r\n label=\"Ingredients\" \r\n href=\"#\" \r\n />\r\n</IcPageHeader>\r\n `,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `{shortCode}`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `{shortCode}`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview\r\n snippets={withActionsInputTabs}\r\n style={{ flexDirection: \"column\" }}\r\n>\r\n <IcPageHeader\r\n heading=\"Latte recipe\"\r\n subheading=\"A Latte is a popular Italian coffee, made with espresso, steamed milk and a thin layer of foam.\"\r\n reverseOrder\r\n >\r\n <IcChip slot=\"heading-adornment\" label=\"BETA\" size=\"large\" />\r\n <IcButton slot=\"actions\" variant=\"primary\">\r\n Create coffee\r\n </IcButton>\r\n <IcButton slot=\"actions\" variant=\"tertiary\">\r\n Filter coffee\r\n </IcButton>\r\n <IcTextField\r\n slot=\"input\"\r\n placeholder=\"Search for ingredients…\"\r\n label=\"Input\"\r\n hideLabel\r\n />\r\n <IcNavigationItem slot=\"tabs\" label=\"Method\" href=\"#\" selected />\r\n <IcNavigationItem slot=\"tabs\" label=\"Ingredients\" href=\"#\" />\r\n </IcPageHeader>\r\n</ComponentPreview>\r\n\r\n### With React Router\r\n\r\nexport const withReactRouter = [\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<MemoryRouter initialEntries={[\"/\"]}>\r\n <IcPageHeader\r\n heading=\"Latte recipe\"\r\n subheading=\"A Latte is a popular Italian coffee, made with espresso, steamed milk and a thin layer of foam.\"\r\n reverseOrder\r\n >\r\n <IcChip slot=\"heading-adornment\" label=\"BETA\" size=\"large\"/>\r\n <IcButton slot=\"actions\" variant=\"primary\"\r\n >Create coffee\r\n <SlottedSVG \r\n slot=\"icon\" \r\n width=\"24\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n >\r\n <path\r\n d=\"M19 13H13V19H11V13H5V11H11V5H13V11H19V13Z\"\r\n fill=\"currentColor\"\r\n />\r\n </SlottedSVG>\r\n </IcButton>\r\n <IcButton slot=\"actions\" variant=\"tertiary\">Filter coffee</IcButton>\r\n <IcNavigationItem slot=\"tabs\" selected>\r\n <NavLink slot=\"navigation-item\" to=\"/\">Method</NavLink>\r\n </IcNavigationItem> \r\n <IcNavigationItem slot=\"tabs\">\r\n <NavLink slot=\"navigation-item\" to=\"/favourites\">Ingredients</NavLink>\r\n </IcNavigationItem>\r\n <IcTextField \r\n slot=\"input\" \r\n placeholder=\"Search for ingredients…\"\r\n label=\"Input\" \r\n hideLabel \r\n class={classes.textField}\r\n />\r\n </IcPageHeader>\r\n <IcSectionContainer>\r\n <Routes>\r\n <Route path=\"/\" element={<IcTypography>This page is about our Latte making methods</IcTypography>}/>\r\n <Route path=\"/favourites\" element={<IcTypography>This page is about the ingredients used in our Latte</IcTypography>}/>\r\n </Routes>\r\n </IcSectionContainer>\r\n</MemoryRouter>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `const useStyles = createUseStyles({\r\n textField: {\r\n '@media (max-width: 576px)': {\r\n width: '17.5rem'\r\n }\r\n }\r\n});\r\nconst classes = useStyles();\r\nreturn (\r\n {shortCode}\r\n)`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `const useStyles = createUseStyles({\r\n textField: {\r\n '@media (max-width: 576px)': {\r\n width: '17.5rem'\r\n }\r\n }\r\n});\r\nconst classes = useStyles();\r\nreturn (\r\n {shortCode}\r\n)`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview\r\n snippets={withReactRouter}\r\n style={{ flexDirection: \"column\" }}\r\n>\r\n <MemoryRouter initialEntries={[\"/\"]}>\r\n <IcPageHeader\r\n heading=\"Latte recipe\"\r\n subheading=\"A Latte is a popular Italian coffee, made with espresso, steamed milk and a thin layer of foam.\"\r\n reverseOrder\r\n >\r\n <IcChip slot=\"heading-adornment\" label=\"BETA\" size=\"large\" />\r\n <IcButton slot=\"actions\" variant=\"primary\">\r\n Create coffee\r\n <SlottedSVG\r\n slot=\"icon\"\r\n width=\"24\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n >\r\n <path\r\n d=\"M19 13H13V19H11V13H5V11H11V5H13V11H19V13Z\"\r\n fill=\"currentColor\"\r\n />\r\n </SlottedSVG>\r\n </IcButton>\r\n <IcButton slot=\"actions\" variant=\"tertiary\">\r\n Filter coffee\r\n </IcButton>\r\n <IcNavigationItem slot=\"tabs\" selected>\r\n <NavLink slot=\"navigation-item\" to=\"/\">\r\n Method\r\n </NavLink>\r\n </IcNavigationItem>\r\n <IcNavigationItem slot=\"tabs\">\r\n <NavLink slot=\"navigation-item\" to=\"/favourites\">\r\n Ingredients\r\n </NavLink>\r\n </IcNavigationItem>\r\n <IcTextField\r\n slot=\"input\"\r\n placeholder=\"Search for ingredients…\"\r\n label=\"Input\"\r\n hideLabel\r\n style={{ \"@media (maxWidth: 576px)\": { width: \"17.5rem\" } }}\r\n />\r\n </IcPageHeader>\r\n <IcSectionContainer />\r\n </MemoryRouter>\r\n</ComponentPreview>\r\n\r\n### With Slots\r\n\r\nexport const withSlots = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-page-header>\r\n <ic-typography variant=\"h1\" slot=\"heading\">Latte recipe</ic-typography>\r\n <ic-typography slot=\"subheading\">A Latte is a popular Italian coffee, made with espresso, steamed milk and a thin layer of foam.</ic-typography>\r\n <ic-chip slot=\"heading-adornment\" label=\"BETA\" size=\"large\"></ic-chip>\r\n <ic-breadcrumb-group slot=\"breadcrumbs\">\r\n <ic-breadcrumb current=\"true\" page-title=\"Drinks\" href=\"#\"></ic-breadcrumb>\r\n <ic-breadcrumb page-title=\"Coffees\" href=\"#\"></ic-breadcrumb>\r\n <ic-breadcrumb page-title=\"Latte\" href=\"#\"></ic-breadcrumb>\r\n </ic-breadcrumb-group>\r\n <ic-text-field slot=\"input\" placeholder=\"Search for ingredients…\" label=\"Input\" hide-label=\"true\" />\r\n</ic-page-header>`,\r\n long: `{shortCode}`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcPageHeader>\r\n <IcTypography variant=\"h1\" slot=\"heading\">\r\n Latte recipe\r\n </IcTypography>\r\n <IcTypography slot=\"subheading\">\r\n A Latte is a popular Italian coffee, made with espresso, steamed milk and\r\n a thin layer of foam.\r\n </IcTypography>\r\n <IcChip slot=\"heading-adornment\" label=\"BETA\" size=\"large\" />\r\n <IcBreadcrumbGroup slot=\"breadcrumbs\">\r\n <IcBreadcrumb pageTitle=\"Drinks\" href=\"#\" />\r\n <IcBreadcrumb pageTitle=\"Coffees\" href=\"#\" />\r\n <IcBreadcrumb current pageTitle=\"Latte\" href=\"#\" />\r\n </IcBreadcrumbGroup>\r\n <IcTextField\r\n slot=\"input\"\r\n placeholder=\"Search for ingredients…\"\r\n label=\"Input\"\r\n hideLabel\r\n />\r\n</IcPageHeader>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `{shortCode}`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `{shortCode}`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview snippets={withSlots} style={{ flexDirection: \"column\" }}>\r\n <IcPageHeader>\r\n <IcTypography variant=\"h1\" slot=\"heading\">\r\n Latte recipe\r\n </IcTypography>\r\n <IcTypography slot=\"subheading\">\r\n A Latte is a popular Italian coffee, made with espresso, steamed milk and\r\n a thin layer of foam.\r\n </IcTypography>\r\n <IcChip slot=\"heading-adornment\" label=\"BETA\" size=\"large\" />\r\n <IcBreadcrumbGroup slot=\"breadcrumbs\">\r\n <IcBreadcrumb pageTitle=\"Drinks\" href=\"#\" />\r\n <IcBreadcrumb pageTitle=\"Coffees\" href=\"#\" />\r\n <IcBreadcrumb current pageTitle=\"Latte\" href=\"#\" />\r\n </IcBreadcrumbGroup>\r\n <IcTextField\r\n slot=\"input\"\r\n placeholder=\"Search for ingredients…\"\r\n label=\"Input\"\r\n hideLabel\r\n />\r\n </IcPageHeader>\r\n</ComponentPreview>\r\n",
"path": "/components/page-header/code",
"date": "2024-05-31",
"title": "Page header",
@@ -2746,16 +2746,16 @@
}
],
"meta": {
- "relativePath": "components/page-header/code.mdx",
- "createdAt": "2024-11-06T10:27:49.404Z",
- "lastModified": "2024-11-06T10:19:00.076Z",
- "size": 19079,
- "formattedSize": "18.6 KB"
+ "relativePath": "components\\page-header\\code.mdx",
+ "createdAt": "2024-12-04T13:23:54.107Z",
+ "lastModified": "2024-12-04T13:23:54.107Z",
+ "size": 19765,
+ "formattedSize": "19.3 KB"
}
},
{
"id": "components\\page-header\\guidancex",
- "contents": "\nimport {\n IcPageHeader,\n IcButton,\n IcTextField,\n IcStepper,\n IcStep,\n IcChip,\n} from \"@ukic/react\";\nimport pageHeaderFig1 from \"./images/fig-1-page-header-anatomy.png\";\nimport pageHeaderFig2 from \"./images/fig-2-dont-use-global-actions-in-a-page-header.png\";\nimport pageHeaderFig3 from \"./images/fig-3-use-default-and-dense-sizing.png\";\nimport pageHeaderFig4 from \"./images/fig-4-set-width-of-page-header-to-match-width-of-main-content.png\";\nimport pageHeaderFig5 from \"./images/fig-5-dont-set-width-of-page-header-to-align-to-content.png\";\nimport pageHeaderFig6 from \"./images/fig-6-page-header-displayed-whilst-scroll-position-is-at-top-of-page.png\";\nimport pageHeaderFig7 from \"./images/fig-7-sticky-page-header-displayed-whilst-scrolled.png\";\nimport pageHeaderFig8 from \"./images/fig-8-centre-alignment.png\";\nimport pageHeaderFig9 from \"./images/fig-9-left-alignment.png\";\nimport pageHeaderFig10 from \"./images/fig-10-full-width.png\";\nimport pageHeaderFig11 from \"./images/fig-11-dont-mix-alignment.png\";\n\n## Introduction\n\nAn example of the page header component.\n\n<ComponentPreview>\n <IcPageHeader\n heading=\"Latte recipe\"\n subheading=\"A latte is a popular Italian coffee, made with espresso, steamed milk and a thin layer of foam. \"\n reverseOrder\n >\n <IcChip slot=\"heading-adornment\" label=\"BETA\" size=\"large\" />\n <IcButton slot=\"actions\" variant=\"primary\">\n Create coffee\n </IcButton>\n <IcButton slot=\"actions\" variant=\"tertiary\">\n Filter coffee\n </IcButton>\n <IcStepper slot=\"stepper\">\n <IcStep stepTitle=\"Warm kettle\" stepType=\"completed\" />\n <IcStep\n stepTitle=\"Warm milk\"\n stepSubtitle=\"Optional\"\n stepType=\"completed\"\n />\n <IcStep stepTitle=\"Pour milk\" stepType=\"current\" />\n </IcStepper>\n <IcTextField\n slot=\"input\"\n placeholder=\"Search for ingredients…\"\n label=\"Input\"\n hideLabel\n />\n </IcPageHeader>\n</ComponentPreview>\n\n## When to use\n\nUse a page header to display an introduction to the content of the page. Add additional elements to provide actions, navigation or inputs at the page level.\n\n<DoDontCaution\n imageSrc={pageHeaderFig1}\n imageAlt=\"A diagram showing the positioning of the content areas within a page header. The content areas are a breadcrumb area, a title area, an action area, an input area, and a navigation area. \"\n state=\"none\"\n caption=\"The anatomy of a page header that includes areas for breadcrumbs, titling, actions, inputs and additional navigation. \"\n/>\n\n### With action\n\nUse [buttons](/components/button) when you need to provide actions that affect all content on the page, for example to filter or to add a new record. Only use one primary button per page header. Use any type of button within the page header’s interaction area.\n\n### With input\n\nInclude an [input field](/components/search-bar) to search or filter data displayed on the page. Don’t overload the input area with components, consider placing them in the page content instead.\n\n### With breadcrumb navigation\n\nUse a [breadcrumb](/components/breadcrumb) to show the current page’s position in the app’s hierarchy or show a link to the parent page.\n\n### With tab navigation\n\nUse [tabs](/components/tabs) if the content grouped by the header can be split into distinct categories.\n\n### With stepper\n\nUse a [stepper](/components/stepper) to show progress through a multi-step process.\n\n## When not to use\n\nDon’t use the page header to include global actions or global navigation, instead use the [top navigation](/components/top-navigation) or [side navigation](/components/side-navigation).\n\n<DoDontCaution\n imageSrc={pageHeaderFig2}\n imageAlt=\"An example app called ‘Better latte than never’ that displays a page titled ‘Top 5 reasons why coffee is a way better choice than tea’. The page’s page header contains an action button titled ‘Main menu’.\"\n state=\"bad\"\n caption=\"Don‘t use global actions within a page header.\"\n/>\n\n## Sizing\n\n<DoDontCaution\n imageSrc={pageHeaderFig3}\n imageAlt=\"A default sized page header with a large title that says ‘Grande Frappé’ and small sized page header with the same title displayed much smaller.\"\n state=\"none\"\n caption=\"An example of default and small sized page headers.\"\n/>\n\nSet the width of the page header to match the width of the page’s main content.\n\n<DoDontCaution\n imageSrc={pageHeaderFig4}\n imageAlt=\"An example app titled ‘Better latte than never’ showing a page called ‘Top 5 reasons why coffee is better than tea’ with a page header that spans the full width of the content area.\"\n state=\"good\"\n caption=\"Set the width of the page header to fill the page’s main content area. \"\n/>\n\n<DoDontCaution\n imageSrc={pageHeaderFig5}\n imageAlt=\"An example app titled ‘Better latte than never’ showing a page called ‘Top 5 reasons why coffee is better than tea’ with a page header that is indented from the page margins to align with the page’s example content.\"\n state=\"bad\"\n caption=\"Don’t set the width of the page header to align with content. The page header content will align to your content container automatically.\"\n/>\n\n## Layout and placement\n\n### Sticky scroll\n\nSet the page header to stick to the top of the screen if you need it to be visible when scrolling. Otherwise, set it to scroll with content to maximise available space for content.\n\n<DoDontCaution\n imageSrc={pageHeaderFig6}\n imageAlt=\"An example app title ‘better latte than never’ that shows the top navigation component at the top of the screen, a page header below it, and some example content below that.\"\n state=\"none\"\n caption=\"The page header sits at the top of the page when scrolled to the top.\"\n/>\n\n<DoDontCaution\n imageSrc={pageHeaderFig7}\n imageAlt=\"An example app that is scrolled partway down the page. A page header is displayed stuck to the top of the screen and overlaying other example content.\"\n state=\"none\"\n caption=\"A sticky page header stays at the top of the screen when scrolling down the page.\"\n/>\n\n### Alignment\n\nAlign the page header either to the left, centre or full-width to match the rest of the content on the page.\n\n<DoDontCaution\n imageSrc={pageHeaderFig9}\n imageAlt=\"An example app that shows a page header and some example content. The page header’s title, description and action button are aligned to the left hand side of the screen, and the example page content below is also aligned to the left of the screen.\"\n state=\"good\"\n caption=\"Use left alignment to position page header content to the left of the page container.\"\n/>\n\n<DoDontCaution\n imageSrc={pageHeaderFig8}\n imageAlt=\"An example app that shows a page header and some example content. The page header’s title, description and action button are aligned to the centre of the screen, and the example page content below is also aligned to the centre of the screen.\"\n state=\"good\"\n caption=\"Use centred alignment to position page header content to the middle of the page container.\"\n/>\n\n<DoDontCaution\n imageSrc={pageHeaderFig10}\n imageAlt=\"An example app that shows a page header and some example content. The page header’s content spans the full screen width with its title and description aligned to the left margin and its action button aligned to the right margin. The example page content below is aligned to the centre of the screen.\"\n state=\"good\"\n caption=\"Use full-width to align page header content to the left and right margins of the page container.\"\n/>\n\nDon’t align a page header’s content differently to how the rest of the page content is aligned.\n\n<DoDontCaution\n imageSrc={pageHeaderFig11}\n imageAlt=\"An example app that shows a page header and some example content. The page header’s content is aligned to the left of the screen. The example page content below is aligned to the centre of the screen.\"\n state=\"bad\"\n caption=\"Don’t mix alignments in an app. Here the page header’s content has left alignment, whereas the rest of the page content is centre aligned.\"\n/>\n\n## Content\n\nUse short titles that clearly describe the page's content.\n\nKeep page subtitles concise within the page header. If more content is required, consider placing it within the page itself.\n\nInclude a title adornment to convey information such as a status or versioning.\n\n## Related components\n\n- [Hero](/components/hero)\n- [Top navigation](/components/top-navigation)\n- [Side navigation](/components/side-navigation)\n",
+ "contents": "\r\nimport {\r\n IcPageHeader,\r\n IcButton,\r\n IcTextField,\r\n IcStepper,\r\n IcStep,\r\n IcChip,\r\n} from \"@ukic/react\";\r\nimport pageHeaderFig1 from \"./images/fig-1-page-header-anatomy.png\";\r\nimport pageHeaderFig2 from \"./images/fig-2-dont-use-global-actions-in-a-page-header.png\";\r\nimport pageHeaderFig3 from \"./images/fig-3-use-default-and-dense-sizing.png\";\r\nimport pageHeaderFig4 from \"./images/fig-4-set-width-of-page-header-to-match-width-of-main-content.png\";\r\nimport pageHeaderFig5 from \"./images/fig-5-dont-set-width-of-page-header-to-align-to-content.png\";\r\nimport pageHeaderFig6 from \"./images/fig-6-page-header-displayed-whilst-scroll-position-is-at-top-of-page.png\";\r\nimport pageHeaderFig7 from \"./images/fig-7-sticky-page-header-displayed-whilst-scrolled.png\";\r\nimport pageHeaderFig8 from \"./images/fig-8-centre-alignment.png\";\r\nimport pageHeaderFig9 from \"./images/fig-9-left-alignment.png\";\r\nimport pageHeaderFig10 from \"./images/fig-10-full-width.png\";\r\nimport pageHeaderFig11 from \"./images/fig-11-dont-mix-alignment.png\";\r\n\r\n## Introduction\r\n\r\nAn example of the page header component.\r\n\r\n<ComponentPreview>\r\n <IcPageHeader\r\n heading=\"Latte recipe\"\r\n subheading=\"A latte is a popular Italian coffee, made with espresso, steamed milk and a thin layer of foam. \"\r\n reverseOrder\r\n >\r\n <IcChip slot=\"heading-adornment\" label=\"BETA\" size=\"large\" />\r\n <IcButton slot=\"actions\" variant=\"primary\">\r\n Create coffee\r\n </IcButton>\r\n <IcButton slot=\"actions\" variant=\"tertiary\">\r\n Filter coffee\r\n </IcButton>\r\n <IcStepper slot=\"stepper\">\r\n <IcStep stepTitle=\"Warm kettle\" stepType=\"completed\" />\r\n <IcStep\r\n stepTitle=\"Warm milk\"\r\n stepSubtitle=\"Optional\"\r\n stepType=\"completed\"\r\n />\r\n <IcStep stepTitle=\"Pour milk\" stepType=\"current\" />\r\n </IcStepper>\r\n <IcTextField\r\n slot=\"input\"\r\n placeholder=\"Search for ingredients…\"\r\n label=\"Input\"\r\n hideLabel\r\n />\r\n </IcPageHeader>\r\n</ComponentPreview>\r\n\r\n## When to use\r\n\r\nUse a page header to display an introduction to the content of the page. Add additional elements to provide actions, navigation or inputs at the page level.\r\n\r\n<DoDontCaution\r\n imageSrc={pageHeaderFig1}\r\n imageAlt=\"A diagram showing the positioning of the content areas within a page header. The content areas are a breadcrumb area, a title area, an action area, an input area, and a navigation area. \"\r\n state=\"none\"\r\n caption=\"The anatomy of a page header that includes areas for breadcrumbs, titling, actions, inputs and additional navigation. \"\r\n/>\r\n\r\n### With action\r\n\r\nUse [buttons](/components/button) when you need to provide actions that affect all content on the page, for example to filter or to add a new record. Only use one primary button per page header. Use any type of button within the page header’s interaction area.\r\n\r\n### With input\r\n\r\nInclude an [input field](/components/search-bar) to search or filter data displayed on the page. Don’t overload the input area with components, consider placing them in the page content instead.\r\n\r\n### With breadcrumb navigation\r\n\r\nUse a [breadcrumb](/components/breadcrumb) to show the current page’s position in the app’s hierarchy or show a link to the parent page.\r\n\r\n### With tab navigation\r\n\r\nUse [tabs](/components/tabs) if the content grouped by the header can be split into distinct categories.\r\n\r\n### With stepper\r\n\r\nUse a [stepper](/components/stepper) to show progress through a multi-step process.\r\n\r\n## When not to use\r\n\r\nDon’t use the page header to include global actions or global navigation, instead use the [top navigation](/components/top-navigation) or [side navigation](/components/side-navigation).\r\n\r\n<DoDontCaution\r\n imageSrc={pageHeaderFig2}\r\n imageAlt=\"An example app called ‘Better latte than never’ that displays a page titled ‘Top 5 reasons why coffee is a way better choice than tea’. The page’s page header contains an action button titled ‘Main menu’.\"\r\n state=\"bad\"\r\n caption=\"Don‘t use global actions within a page header.\"\r\n/>\r\n\r\n## Sizing\r\n\r\n<DoDontCaution\r\n imageSrc={pageHeaderFig3}\r\n imageAlt=\"A default sized page header with a large title that says ‘Grande Frappé’ and small sized page header with the same title displayed much smaller.\"\r\n state=\"none\"\r\n caption=\"An example of default and small sized page headers.\"\r\n/>\r\n\r\nSet the width of the page header to match the width of the page’s main content.\r\n\r\n<DoDontCaution\r\n imageSrc={pageHeaderFig4}\r\n imageAlt=\"An example app titled ‘Better latte than never’ showing a page called ‘Top 5 reasons why coffee is better than tea’ with a page header that spans the full width of the content area.\"\r\n state=\"good\"\r\n caption=\"Set the width of the page header to fill the page’s main content area. \"\r\n/>\r\n\r\n<DoDontCaution\r\n imageSrc={pageHeaderFig5}\r\n imageAlt=\"An example app titled ‘Better latte than never’ showing a page called ‘Top 5 reasons why coffee is better than tea’ with a page header that is indented from the page margins to align with the page’s example content.\"\r\n state=\"bad\"\r\n caption=\"Don’t set the width of the page header to align with content. The page header content will align to your content container automatically.\"\r\n/>\r\n\r\n## Layout and placement\r\n\r\n### Sticky scroll\r\n\r\nSet the page header to stick to the top of the screen if you need it to be visible when scrolling. Otherwise, set it to scroll with content to maximise available space for content.\r\n\r\n<DoDontCaution\r\n imageSrc={pageHeaderFig6}\r\n imageAlt=\"An example app title ‘better latte than never’ that shows the top navigation component at the top of the screen, a page header below it, and some example content below that.\"\r\n state=\"none\"\r\n caption=\"The page header sits at the top of the page when scrolled to the top.\"\r\n/>\r\n\r\n<DoDontCaution\r\n imageSrc={pageHeaderFig7}\r\n imageAlt=\"An example app that is scrolled partway down the page. A page header is displayed stuck to the top of the screen and overlaying other example content.\"\r\n state=\"none\"\r\n caption=\"A sticky page header stays at the top of the screen when scrolling down the page.\"\r\n/>\r\n\r\n### Alignment\r\n\r\nAlign the page header either to the left, centre or full-width to match the rest of the content on the page.\r\n\r\n<DoDontCaution\r\n imageSrc={pageHeaderFig9}\r\n imageAlt=\"An example app that shows a page header and some example content. The page header’s title, description and action button are aligned to the left hand side of the screen, and the example page content below is also aligned to the left of the screen.\"\r\n state=\"good\"\r\n caption=\"Use left alignment to position page header content to the left of the page container.\"\r\n/>\r\n\r\n<DoDontCaution\r\n imageSrc={pageHeaderFig8}\r\n imageAlt=\"An example app that shows a page header and some example content. The page header’s title, description and action button are aligned to the centre of the screen, and the example page content below is also aligned to the centre of the screen.\"\r\n state=\"good\"\r\n caption=\"Use centred alignment to position page header content to the middle of the page container.\"\r\n/>\r\n\r\n<DoDontCaution\r\n imageSrc={pageHeaderFig10}\r\n imageAlt=\"An example app that shows a page header and some example content. The page header’s content spans the full screen width with its title and description aligned to the left margin and its action button aligned to the right margin. The example page content below is aligned to the centre of the screen.\"\r\n state=\"good\"\r\n caption=\"Use full-width to align page header content to the left and right margins of the page container.\"\r\n/>\r\n\r\nDon’t align a page header’s content differently to how the rest of the page content is aligned.\r\n\r\n<DoDontCaution\r\n imageSrc={pageHeaderFig11}\r\n imageAlt=\"An example app that shows a page header and some example content. The page header’s content is aligned to the left of the screen. The example page content below is aligned to the centre of the screen.\"\r\n state=\"bad\"\r\n caption=\"Don’t mix alignments in an app. Here the page header’s content has left alignment, whereas the rest of the page content is centre aligned.\"\r\n/>\r\n\r\n## Content\r\n\r\nUse short titles that clearly describe the page's content.\r\n\r\nKeep page subtitles concise within the page header. If more content is required, consider placing it within the page itself.\r\n\r\nInclude a title adornment to convey information such as a status or versioning.\r\n\r\n## Related components\r\n\r\n- [Hero](/components/hero)\r\n- [Top navigation](/components/top-navigation)\r\n- [Side navigation](/components/side-navigation)\r\n",
"path": "/components/page-header",
"navPriority": 23,
"date": "2024-05-10",
@@ -2778,11 +2778,11 @@
}
],
"meta": {
- "relativePath": "components/page-header/guidance.mdx",
- "createdAt": "2024-11-06T10:27:49.404Z",
- "lastModified": "2024-11-06T10:19:00.076Z",
- "size": 9062,
- "formattedSize": "8.8 KB"
+ "relativePath": "components\\page-header\\guidance.mdx",
+ "createdAt": "2024-12-04T13:23:54.108Z",
+ "lastModified": "2024-12-04T13:23:54.108Z",
+ "size": 9274,
+ "formattedSize": "9.1 KB"
}
},
{
@@ -2809,16 +2809,16 @@
}
],
"meta": {
- "relativePath": "components/pagination/accessibility.mdx",
- "createdAt": "2024-11-06T10:27:49.408Z",
- "lastModified": "2024-11-06T10:19:00.088Z",
+ "relativePath": "components\\pagination\\accessibility.mdx",
+ "createdAt": "2024-11-05T11:57:52.618Z",
+ "lastModified": "2024-11-05T11:57:52.618Z",
"size": 3216,
"formattedSize": "3.1 KB"
}
},
{
"id": "components\\pagination\\codex",
- "contents": "\nimport { IcPagination } from \"@ukic/react\";\n\n## Component demo\n\nexport const snippets = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-pagination pages=\"15\"></ic-pagination>\n<ic-pagination pages=\"15\" type=\"complex\"></ic-pagination>`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcPagination pages={15} />\n<IcPagination pages={15} type=\"complex\" />`,\n long: [\n {\n language: \"Typescript\",\n snippet: `<>\n {shortCode}\n</>`,\n },\n {\n language: \"Javascript\",\n snippet: `<>\n {shortCode}\n</>`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview\n style={{ display: \"block\", margin: \"auto\" }}\n snippets={snippets}\n>\n <div style={{ width: \"fit-content\", margin: \"auto\" }}>\n <IcPagination pages={15} />\n </div>\n <IcPagination pages={15} type=\"complex\" />\n</ComponentPreview>\n\n## Pagination details\n\n<ComponentDetails component=\"ic-pagination\" />\n\n## Variants\n\n### Hide first and last page buttons\n\nexport const hideFirstLast = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-pagination \n hide-first-and-last-page-button=\"true\"\n pages=\"15\"\n></ic-pagination>`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcPagination hideFirstAndLastPageButton pages={15} />`,\n long: [\n {\n language: \"Typescript\",\n snippet: `{shortCode}`,\n },\n {\n language: \"Javascript\",\n snippet: `{shortCode}`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview\n style={{ display: \"block\", margin: \"auto\" }}\n snippets={hideFirstLast}\n>\n <IcPagination hideFirstAndLastPageButton pages={15} />\n</ComponentPreview>\n\n### Hide current page (only in 'simple' type)\n\nexport const hideCurrent = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-pagination hide-current-page=\"true\" pages=\"15\"></ic-pagination>`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcPagination hideCurrentPage pages={15} />`,\n long: [\n {\n language: \"Typescript\",\n snippet: `{shortCode}`,\n },\n {\n language: \"Javascript\",\n snippet: `{shortCode}`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview\n style={{ display: \"block\", margin: \"auto\" }}\n snippets={hideCurrent}\n>\n <IcPagination hideCurrentPage pages={15} />\n</ComponentPreview>\n\n### Appearance\n\nexport const appearance = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-pagination appearance=\"dark\" pages=\"15\"></ic-pagination>\n<ic-pagination appearance=\"light\" pages=\"15\" class=\"dark-background\"></ic-pagination>`,\n long: `.dark-background {\n background-color: #2c2f34;\n }\n </style>\n <body>\n {shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcPagination appearance=\"dark\" pages={15} />\n<IcPagination appearance=\"light\" pages={15} class={classes.darkBackground} />`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n darkBackground: {\n backgroundColor: \"#2c2f34\",\n }\n});\nconst classes = useStyles();\nreturn (\n <>\n {shortCode}\n </>\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `<>\n {shortCode}\n</>`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview\n style={{ display: \"block\", margin: \"auto\" }}\n snippets={appearance}\n>\n <IcPagination appearance=\"dark\" pages={15} />\n <div style={{ backgroundColor: \"#000\", marginBottom: \"0.75rem\" }}>\n <IcPagination appearance=\"light\" pages={15} />\n </div>\n</ComponentPreview>\n\n### Boundary and Adjacent items set\n\nexport const boundaryAdjacent = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-pagination\n type=\"complex\"\n adjacent-count=\"2\"\n boundary-count=\"2\"\n pages=\"15\"\n></ic-pagination>`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcPagination \n type=\"complex\"\n adjacentCount={2}\n boundaryCount={2}\n pages={15} \n/>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `{shortCode}`,\n },\n {\n language: \"Javascript\",\n snippet: `{shortCode}`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview\n style={{ display: \"block\", margin: \"auto\" }}\n snippets={boundaryAdjacent}\n>\n <IcPagination type=\"complex\" adjacentCount={2} boundaryCount={2} pages={15} />\n</ComponentPreview>\n\n### Disabled\n\nexport const disabled = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-pagination type=\"complex\" disabled=\"true\" pages=\"12\"></ic-pagination>`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcPagination type=\"complex\" disabled pages={12} />`,\n long: [\n {\n language: \"Typescript\",\n snippet: `{shortCode}`,\n },\n {\n language: \"Javascript\",\n snippet: `{shortCode}`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview\n style={{ display: \"block\", margin: \"auto\" }}\n snippets={disabled}\n>\n <IcPagination type=\"complex\" disabled pages={12} />\n</ComponentPreview>\n\n### Label\n\nexport const label = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-pagination label=\"Slide\" pages=\"12\"></ic-pagination>`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcPagination label=\"Slide\" pages={12} />`,\n long: [\n {\n language: \"Typescript\",\n snippet: `{shortCode}`,\n },\n {\n language: \"Javascript\",\n snippet: `{shortCode}`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview style={{ display: \"block\", margin: \"auto\" }} snippets={label}>\n <IcPagination label=\"Slide\" pages={12} />\n</ComponentPreview>\n\n### Default page\n\nexport const defaultPage = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-pagination pages=\"12\" default-page=\"4\"></ic-pagination>`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcPagination pages={12} defaultPage={4}/>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `{shortCode}`,\n },\n {\n language: \"Javascript\",\n snippet: `{shortCode}`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview\n style={{ display: \"block\", margin: \"auto\" }}\n snippets={defaultPage}\n>\n <IcPagination pages={12} defaultPage={4} />\n</ComponentPreview>\n",
+ "contents": "\r\nimport { IcPagination } from \"@ukic/react\";\r\n\r\n## Component demo\r\n\r\nexport const snippets = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-pagination pages=\"15\"></ic-pagination>\r\n<ic-pagination pages=\"15\" type=\"complex\"></ic-pagination>`,\r\n long: `{shortCode}`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcPagination pages={15} />\r\n<IcPagination pages={15} type=\"complex\" />`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `<>\r\n {shortCode}\r\n</>`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `<>\r\n {shortCode}\r\n</>`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview\r\n style={{ display: \"block\", margin: \"auto\" }}\r\n snippets={snippets}\r\n>\r\n <div style={{ width: \"fit-content\", margin: \"auto\" }}>\r\n <IcPagination pages={15} />\r\n </div>\r\n <IcPagination pages={15} type=\"complex\" />\r\n</ComponentPreview>\r\n\r\n## Pagination details\r\n\r\n<ComponentDetails component=\"ic-pagination\" />\r\n\r\n## Variants\r\n\r\n### Hide first and last page buttons\r\n\r\nexport const hideFirstLast = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-pagination \r\n hide-first-and-last-page-button=\"true\"\r\n pages=\"15\"\r\n></ic-pagination>`,\r\n long: `{shortCode}`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcPagination hideFirstAndLastPageButton pages={15} />`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `{shortCode}`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `{shortCode}`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview\r\n style={{ display: \"block\", margin: \"auto\" }}\r\n snippets={hideFirstLast}\r\n>\r\n <IcPagination hideFirstAndLastPageButton pages={15} />\r\n</ComponentPreview>\r\n\r\n### Hide current page (only in 'simple' type)\r\n\r\nexport const hideCurrent = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-pagination hide-current-page=\"true\" pages=\"15\"></ic-pagination>`,\r\n long: `{shortCode}`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcPagination hideCurrentPage pages={15} />`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `{shortCode}`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `{shortCode}`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview\r\n style={{ display: \"block\", margin: \"auto\" }}\r\n snippets={hideCurrent}\r\n>\r\n <IcPagination hideCurrentPage pages={15} />\r\n</ComponentPreview>\r\n\r\n### Appearance\r\n\r\nexport const appearance = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-pagination appearance=\"dark\" pages=\"15\"></ic-pagination>\r\n<ic-pagination appearance=\"light\" pages=\"15\" class=\"dark-background\"></ic-pagination>`,\r\n long: `.dark-background {\r\n background-color: #2c2f34;\r\n }\r\n </style>\r\n <body>\r\n {shortCode}`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcPagination appearance=\"dark\" pages={15} />\r\n<IcPagination appearance=\"light\" pages={15} class={classes.darkBackground} />`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `const useStyles = createUseStyles({\r\n darkBackground: {\r\n backgroundColor: \"#2c2f34\",\r\n }\r\n});\r\nconst classes = useStyles();\r\nreturn (\r\n <>\r\n {shortCode}\r\n </>\r\n)`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `<>\r\n {shortCode}\r\n</>`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview\r\n style={{ display: \"block\", margin: \"auto\" }}\r\n snippets={appearance}\r\n>\r\n <IcPagination appearance=\"dark\" pages={15} />\r\n <div style={{ backgroundColor: \"#000\", marginBottom: \"0.75rem\" }}>\r\n <IcPagination appearance=\"light\" pages={15} />\r\n </div>\r\n</ComponentPreview>\r\n\r\n### Boundary and Adjacent items set\r\n\r\nexport const boundaryAdjacent = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-pagination\r\n type=\"complex\"\r\n adjacent-count=\"2\"\r\n boundary-count=\"2\"\r\n pages=\"15\"\r\n></ic-pagination>`,\r\n long: `{shortCode}`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcPagination \r\n type=\"complex\"\r\n adjacentCount={2}\r\n boundaryCount={2}\r\n pages={15} \r\n/>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `{shortCode}`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `{shortCode}`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview\r\n style={{ display: \"block\", margin: \"auto\" }}\r\n snippets={boundaryAdjacent}\r\n>\r\n <IcPagination type=\"complex\" adjacentCount={2} boundaryCount={2} pages={15} />\r\n</ComponentPreview>\r\n\r\n### Disabled\r\n\r\nexport const disabled = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-pagination type=\"complex\" disabled=\"true\" pages=\"12\"></ic-pagination>`,\r\n long: `{shortCode}`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcPagination type=\"complex\" disabled pages={12} />`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `{shortCode}`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `{shortCode}`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview\r\n style={{ display: \"block\", margin: \"auto\" }}\r\n snippets={disabled}\r\n>\r\n <IcPagination type=\"complex\" disabled pages={12} />\r\n</ComponentPreview>\r\n\r\n### Label\r\n\r\nexport const label = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-pagination label=\"Slide\" pages=\"12\"></ic-pagination>`,\r\n long: `{shortCode}`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcPagination label=\"Slide\" pages={12} />`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `{shortCode}`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `{shortCode}`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview style={{ display: \"block\", margin: \"auto\" }} snippets={label}>\r\n <IcPagination label=\"Slide\" pages={12} />\r\n</ComponentPreview>\r\n\r\n### Default page\r\n\r\nexport const defaultPage = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-pagination pages=\"12\" default-page=\"4\"></ic-pagination>`,\r\n long: `{shortCode}`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcPagination pages={12} defaultPage={4}/>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `{shortCode}`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `{shortCode}`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview\r\n style={{ display: \"block\", margin: \"auto\" }}\r\n snippets={defaultPage}\r\n>\r\n <IcPagination pages={12} defaultPage={4} />\r\n</ComponentPreview>\r\n",
"path": "/components/pagination/code",
"date": "2024-05-31",
"title": "Pagination",
@@ -2840,16 +2840,16 @@
}
],
"meta": {
- "relativePath": "components/pagination/code.mdx",
- "createdAt": "2024-11-06T10:27:49.408Z",
- "lastModified": "2024-11-06T10:19:00.088Z",
- "size": 7202,
- "formattedSize": "7.0 KB"
+ "relativePath": "components\\pagination\\code.mdx",
+ "createdAt": "2024-12-04T13:23:54.108Z",
+ "lastModified": "2024-12-04T13:23:54.108Z",
+ "size": 7551,
+ "formattedSize": "7.4 KB"
}
},
{
"id": "components\\pagination\\guidancex",
- "contents": "\nimport { IcPagination } from \"@ukic/react\";\nimport paginationFig1 from \"./images/fig-1-use-pagination-to-split-content-across-pages.png\";\nimport paginationFig2 from \"./images/fig-2-complex-simple-pagination.png\";\nimport paginationFig3 from \"./images/fig-3-data-table-with-pagination-bar.png\";\nimport paginationFig4 from \"./images/fig-4-use-colour-variants.png\";\nimport paginationFig5 from \"./images/fig-5-place-pagination-at-bottom.png\";\nimport paginationFig6 from \"./images/fig-6-place-pagination-at-top-and-bottom.png\";\nimport paginationFig7 from \"./images/fig-7-setting-adjacent-and-boundary-items.png\";\nimport paginationFig8 from \"./images/fig-8-pagination-bars-with-different-elements.png\";\n\n## Introduction\n\nPagination enables large amounts of content to be split across multiple pages so that it is more manageable and doesn’t require overly long page lengths.\n\n<ComponentPreview style={{ margin: \"auto\" }}>\n <IcPagination pages={15} type=\"complex\" />\n</ComponentPreview>\n\n## Component variants\n\nThere are two types of pagination that can be used to control pages of content:\n\n- Complex pagination: Contains buttons for navigating to next, previous, first and last pages as well as individual page buttons for adjacent and boundary pages.\n- Simple pagination: Contains only buttons for navigating to next, previous, first and last pages. Displays the current page as a label.\n\nUse the pagination components within a pagination bar to provide other navigation controls including:\n\n- Items per page selector: Switch the number of content items visible per page.\n- Item count: Display the range of currently visible items as well as the total number of items.\n- Go to page shortcut: Allow quick access to any page number by typing the page number and hitting ‘go’.\n\n## When to use\n\nUse pagination when you have a large, known amount of content that can be split across pages. Order the content so the most relevant appears on the first page. Pagination works best for lists of content such as search results and data items.\n\nTry to create an understandable order to the content split across pages. This way it is easier to understand what content might appear on a later page.\n\nFor example, if content is ordered alphabetically, then it becomes obvious that entries beginning with a ‘Z’ would appear on the last few pages.\n\n<DoDontCaution\n imageSrc={paginationFig1}\n imageAlt=\"An example application showing a list of hot drink products split across pages. A pagination component provides access to navigate through the list of products.\"\n state=\"good\"\n caption=\"Use pagination to split content across multiple pages.\"\n/>\n\nUse pagination for content when there are other elements on the page that can be scrolled to. This means all elements on the page can easily be navigated to without scrolling through a large amount of content.\n\nPagination provides full control over the content; it allows navigation to any page of content quickly and gives an indication of the total amount of content available.\n\nUse complex pagination to allow people to easily navigate between pages without having to move sequentially through content. This allows people to quickly skip around between pages to search for specific content.\n\nUse simple pagination to navigate sequentially between pages using the ‘next’ and ‘previous’ buttons.\n\n<DoubleDoDontCaution>\n <DoDontCaution\n imageSrc={paginationFig2}\n imageAlt=\"An image showing two pagination components. Complex pagination provides numbered buttons for each page. Simple pagination simply provides next, previous, first and last buttons.\"\n state=\"none\"\n caption=\"Use complex or simple pagination variants for different implementations.\"\n />\n</DoubleDoDontCaution>\n\nUse a pagination bar to provide more navigation functionality through particularly complex data sets. For example, use pagination bars with data tables to navigate large data sets easily.\n\n<DoDontCaution\n imageSrc={paginationFig3}\n imageAlt=\"An example nutritional data table for coffee products. Coffee products are displayed in a table and a pagination bar allows the number of items per page to be changed, displays the total number of items, and includes a simple pagination control allowing navigation through the pages.\"\n state=\"good\"\n caption=\"Use a pagination bar to provide more functionality.\"\n/>\n\n## When not to use\n\nAvoid using pagination to split up linear content such as articles or blogs. Scrolling down the page makes it easier to consume this content.\n\nAvoid using pagination when the size of the content is unknown or if it frequently changes. This causes the number of pages to change frequently and means it is hard to create a ‘last page’ option.\n\nUse an infinite scrolling pattern when navigating content should be explorative, or when there is a near infinite amount of content. For example, newsfeeds and comments threads can be near endless and infinite scrolling allows exploration by simply continuing to scroll.\n\nAvoid using simple pagination when it is important to be able to move between specific pages; complex pagination is better for this as it shows more adjacent pages, allowing one click navigation.\n\n## Interaction behaviour\n\nPagination components fire an event when a new page is selected. Use this to trigger the switch of pages in the app.\n\nIn a pagination bar, when the number of items per page is changed, then the pagination component and the item count updates to show the new number of pages. Make sure to update the pagination component if anything else on the page changes the number of pages. For example, setting a filter may reduce the number of pages required to display the filtered results.\n\n## Colour\n\nUse the default, dark and light appearance pagination components when placing them on different coloured backgrounds to ensure the correct contrast ratios are met.\n\n<DoDontCaution\n imageSrc={paginationFig4}\n imageAlt=\"Three pagination examples on different coloured backgrounds. The default appearance pagination is used on a white background. The dark appearance pagination is used on a light yellow background. The light appearance pagination is used on a dark grey background.\"\n state=\"good\"\n caption=\"Use colour contrast variants when placing pagination components on different coloured backgrounds.\"\n/>\n\n## Layout and placement\n\nPlace the pagination component so that it is obvious what it controls. Match the width of a pagination bar to the width of the page.\n\nTry to place pagination at the bottom of the page it controls, as this encourages the user to read through the page before moving to the next. However, placing pagination at the top of the page is still a valid option.\n\n<DoDontCaution\n imageSrc={paginationFig5}\n imageAlt=\"An example product grid showing hot beverages. A pagination control appears below the drinks grid that it controls.\"\n state=\"good\"\n caption=\"Try to place pagination at the bottom of the container it controls.\"\n/>\n\nFor large page containers that require scrolling, use two pagination components at the top and bottom of the page container to provide easy access to navigation when at either the top or bottom of the page.\n\n<DoDontCaution\n imageSrc={paginationFig6}\n imageAlt=\"An example product grid showing hot beverages. A complex pagination control appears below the drinks grid that it controls. A simple pagination control is displayed in the top-right above the product grid.\"\n state=\"good\"\n caption=\"Place pagination controls at the top and bottom of the page container to provide additional navigation functionality.\"\n/>\n\n## Content\n\nWhen using complex pagination, specify the number of adjacent pages to display next to the current page. Also specify the number of boundary pages to display at the start and end of the page range.\n\n<DoDontCaution\n imageSrc={paginationFig7}\n imageAlt=\"Three complex pagination components with different settings for adjacent and boundary items. Increasing boundary items shows more page buttons at the start and end of the range. Increasing the adjacent items shows more page buttons next to the current page.\"\n state=\"none\"\n caption=\"Set the adjacent and boundary items to change which page buttons are displayed.\"\n/>\n\nSelect which elements within a pagination bar you want to display. Each element in the pagination bar can be toggled on or off except for the pagination component itself, which can be switched to use complex or simple pagination.\n\n<DoDontCaution\n imageSrc={paginationFig8}\n imageAlt=\"Three example pagination bars with different elements displaying. The top shows the ‘items per page selector’ and ‘go to page button’ displayed, whilst the other examples have these elements hidden.\"\n state=\"none\"\n caption=\"Select which elements to show within a pagination bar.\"\n/>\n\nBy default, pages are referred to as pages in the pagination component. Override the pagination label to change this. For example, change the term pages to ‘sheets’ if it makes more sense for a data table implementation.\n",
+ "contents": "\r\nimport { IcPagination } from \"@ukic/react\";\r\nimport paginationFig1 from \"./images/fig-1-use-pagination-to-split-content-across-pages.png\";\r\nimport paginationFig2 from \"./images/fig-2-complex-simple-pagination.png\";\r\nimport paginationFig3 from \"./images/fig-3-data-table-with-pagination-bar.png\";\r\nimport paginationFig4 from \"./images/fig-4-use-colour-variants.png\";\r\nimport paginationFig5 from \"./images/fig-5-place-pagination-at-bottom.png\";\r\nimport paginationFig6 from \"./images/fig-6-place-pagination-at-top-and-bottom.png\";\r\nimport paginationFig7 from \"./images/fig-7-setting-adjacent-and-boundary-items.png\";\r\nimport paginationFig8 from \"./images/fig-8-pagination-bars-with-different-elements.png\";\r\n\r\n## Introduction\r\n\r\nPagination enables large amounts of content to be split across multiple pages so that it is more manageable and doesn’t require overly long page lengths.\r\n\r\n<ComponentPreview style={{ margin: \"auto\" }}>\r\n <IcPagination pages={15} type=\"complex\" />\r\n</ComponentPreview>\r\n\r\n## Component variants\r\n\r\nThere are two types of pagination that can be used to control pages of content:\r\n\r\n- Complex pagination: Contains buttons for navigating to next, previous, first and last pages as well as individual page buttons for adjacent and boundary pages.\r\n- Simple pagination: Contains only buttons for navigating to next, previous, first and last pages. Displays the current page as a label.\r\n\r\nUse the pagination components within a pagination bar to provide other navigation controls including:\r\n\r\n- Items per page selector: Switch the number of content items visible per page.\r\n- Item count: Display the range of currently visible items as well as the total number of items.\r\n- Go to page shortcut: Allow quick access to any page number by typing the page number and hitting ‘go’.\r\n\r\n## When to use\r\n\r\nUse pagination when you have a large, known amount of content that can be split across pages. Order the content so the most relevant appears on the first page. Pagination works best for lists of content such as search results and data items.\r\n\r\nTry to create an understandable order to the content split across pages. This way it is easier to understand what content might appear on a later page.\r\n\r\nFor example, if content is ordered alphabetically, then it becomes obvious that entries beginning with a ‘Z’ would appear on the last few pages.\r\n\r\n<DoDontCaution\r\n imageSrc={paginationFig1}\r\n imageAlt=\"An example application showing a list of hot drink products split across pages. A pagination component provides access to navigate through the list of products.\"\r\n state=\"good\"\r\n caption=\"Use pagination to split content across multiple pages.\"\r\n/>\r\n\r\nUse pagination for content when there are other elements on the page that can be scrolled to. This means all elements on the page can easily be navigated to without scrolling through a large amount of content.\r\n\r\nPagination provides full control over the content; it allows navigation to any page of content quickly and gives an indication of the total amount of content available.\r\n\r\nUse complex pagination to allow people to easily navigate between pages without having to move sequentially through content. This allows people to quickly skip around between pages to search for specific content.\r\n\r\nUse simple pagination to navigate sequentially between pages using the ‘next’ and ‘previous’ buttons.\r\n\r\n<DoubleDoDontCaution>\r\n <DoDontCaution\r\n imageSrc={paginationFig2}\r\n imageAlt=\"An image showing two pagination components. Complex pagination provides numbered buttons for each page. Simple pagination simply provides next, previous, first and last buttons.\"\r\n state=\"none\"\r\n caption=\"Use complex or simple pagination variants for different implementations.\"\r\n />\r\n</DoubleDoDontCaution>\r\n\r\nUse a pagination bar to provide more navigation functionality through particularly complex data sets. For example, use pagination bars with data tables to navigate large data sets easily.\r\n\r\n<DoDontCaution\r\n imageSrc={paginationFig3}\r\n imageAlt=\"An example nutritional data table for coffee products. Coffee products are displayed in a table and a pagination bar allows the number of items per page to be changed, displays the total number of items, and includes a simple pagination control allowing navigation through the pages.\"\r\n state=\"good\"\r\n caption=\"Use a pagination bar to provide more functionality.\"\r\n/>\r\n\r\n## When not to use\r\n\r\nAvoid using pagination to split up linear content such as articles or blogs. Scrolling down the page makes it easier to consume this content.\r\n\r\nAvoid using pagination when the size of the content is unknown or if it frequently changes. This causes the number of pages to change frequently and means it is hard to create a ‘last page’ option.\r\n\r\nUse an infinite scrolling pattern when navigating content should be explorative, or when there is a near infinite amount of content. For example, newsfeeds and comments threads can be near endless and infinite scrolling allows exploration by simply continuing to scroll.\r\n\r\nAvoid using simple pagination when it is important to be able to move between specific pages; complex pagination is better for this as it shows more adjacent pages, allowing one click navigation.\r\n\r\n## Interaction behaviour\r\n\r\nPagination components fire an event when a new page is selected. Use this to trigger the switch of pages in the app.\r\n\r\nIn a pagination bar, when the number of items per page is changed, then the pagination component and the item count updates to show the new number of pages. Make sure to update the pagination component if anything else on the page changes the number of pages. For example, setting a filter may reduce the number of pages required to display the filtered results.\r\n\r\n## Colour\r\n\r\nUse the default, dark and light appearance pagination components when placing them on different coloured backgrounds to ensure the correct contrast ratios are met.\r\n\r\n<DoDontCaution\r\n imageSrc={paginationFig4}\r\n imageAlt=\"Three pagination examples on different coloured backgrounds. The default appearance pagination is used on a white background. The dark appearance pagination is used on a light yellow background. The light appearance pagination is used on a dark grey background.\"\r\n state=\"good\"\r\n caption=\"Use colour contrast variants when placing pagination components on different coloured backgrounds.\"\r\n/>\r\n\r\n## Layout and placement\r\n\r\nPlace the pagination component so that it is obvious what it controls. Match the width of a pagination bar to the width of the page.\r\n\r\nTry to place pagination at the bottom of the page it controls, as this encourages the user to read through the page before moving to the next. However, placing pagination at the top of the page is still a valid option.\r\n\r\n<DoDontCaution\r\n imageSrc={paginationFig5}\r\n imageAlt=\"An example product grid showing hot beverages. A pagination control appears below the drinks grid that it controls.\"\r\n state=\"good\"\r\n caption=\"Try to place pagination at the bottom of the container it controls.\"\r\n/>\r\n\r\nFor large page containers that require scrolling, use two pagination components at the top and bottom of the page container to provide easy access to navigation when at either the top or bottom of the page.\r\n\r\n<DoDontCaution\r\n imageSrc={paginationFig6}\r\n imageAlt=\"An example product grid showing hot beverages. A complex pagination control appears below the drinks grid that it controls. A simple pagination control is displayed in the top-right above the product grid.\"\r\n state=\"good\"\r\n caption=\"Place pagination controls at the top and bottom of the page container to provide additional navigation functionality.\"\r\n/>\r\n\r\n## Content\r\n\r\nWhen using complex pagination, specify the number of adjacent pages to display next to the current page. Also specify the number of boundary pages to display at the start and end of the page range.\r\n\r\n<DoDontCaution\r\n imageSrc={paginationFig7}\r\n imageAlt=\"Three complex pagination components with different settings for adjacent and boundary items. Increasing boundary items shows more page buttons at the start and end of the range. Increasing the adjacent items shows more page buttons next to the current page.\"\r\n state=\"none\"\r\n caption=\"Set the adjacent and boundary items to change which page buttons are displayed.\"\r\n/>\r\n\r\nSelect which elements within a pagination bar you want to display. Each element in the pagination bar can be toggled on or off except for the pagination component itself, which can be switched to use complex or simple pagination.\r\n\r\n<DoDontCaution\r\n imageSrc={paginationFig8}\r\n imageAlt=\"Three example pagination bars with different elements displaying. The top shows the ‘items per page selector’ and ‘go to page button’ displayed, whilst the other examples have these elements hidden.\"\r\n state=\"none\"\r\n caption=\"Select which elements to show within a pagination bar.\"\r\n/>\r\n\r\nBy default, pages are referred to as pages in the pagination component. Override the pagination label to change this. For example, change the term pages to ‘sheets’ if it makes more sense for a data table implementation.\r\n",
"path": "/components/pagination",
"navPriority": 24,
"date": "2023-05-05",
@@ -2872,11 +2872,11 @@
}
],
"meta": {
- "relativePath": "components/pagination/guidance.mdx",
- "createdAt": "2024-11-06T10:27:49.408Z",
- "lastModified": "2024-11-06T10:19:00.088Z",
- "size": 9583,
- "formattedSize": "9.4 KB"
+ "relativePath": "components\\pagination\\guidance.mdx",
+ "createdAt": "2024-12-04T13:23:54.109Z",
+ "lastModified": "2024-12-04T13:23:54.109Z",
+ "size": 9748,
+ "formattedSize": "9.5 KB"
}
},
{
@@ -2903,16 +2903,16 @@
}
],
"meta": {
- "relativePath": "components/popover-menu/accessibility.mdx",
- "createdAt": "2024-11-06T10:27:49.400Z",
- "lastModified": "2024-11-06T10:19:00.092Z",
+ "relativePath": "components\\popover-menu\\accessibility.mdx",
+ "createdAt": "2024-11-05T11:57:52.734Z",
+ "lastModified": "2024-11-05T11:57:52.734Z",
"size": 3359,
"formattedSize": "3.3 KB"
}
},
{
- "id": "components__popover-menu__codex",
- "contents": "\nimport { IcPopoverMenu, IcMenuItem, IcMenuGroup, IcButton } from \"@ukic/react\";\nimport { useState } from \"react\";\n\n## Component demo\n\nexport const snippets = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-button \n id=\"button-1\" \n variant=\"icon\"\n title=\"More information\" \n onclick=\"handleClick()\"\n>\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"16\"\n height=\"16\"\n fill=\"currentColor\"\n class=\"bi bi-three-dots-vertical\"\n viewBox=\"0 0 16 16\"\n >\n <path d=\"M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z\" />\n </svg>\n</ic-button>\n<div>\n <ic-popover-menu anchor=\"button-1\" aria-label=\"popover\" id=\"popover-menu\">\n <ic-menu-item label=\"Copy code\"></ic-menu-item>\n <ic-menu-item label=\"Paste code\"></ic-menu-item>\n <ic-menu-item\n label=\"Actions\"\n submenu-trigger-for=\"actions\"\n ></ic-menu-item>\n </ic-popover-menu>\n <ic-popover-menu submenu-id=\"actions\">\n <ic-menu-item label=\"Edit\"></ic-menu-item>\n <ic-menu-item label=\"Find\"></ic-menu-item>\n <ic-menu-item label=\"Delete\" variant=\"destructive\"></ic-menu-item>\n </ic-popover-menu>\n</div>`,\n long: `{shortCode}\n<script>\n var icPopover = document.querySelector(\"#popover-menu\");\n function handleClick() {\n icPopover.open = !icPopover.open;\n }\n</script>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcButton\n variant=\"icon\"\n title=\"More information\"\n id=\"button-1\"\n onClick={handlePopoverToggled}\n>\n <SlottedSVG\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"16\"\n height=\"16\"\n fill=\"currentColor\"\n class=\"bi bi-three-dots-vertical\"\n viewBox=\"0 0 16 16\"\n >\n <path d=\"M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z\" />\n </SlottedSVG>\n</IcButton>\n<IcPopoverMenu anchor=\"button-1\" aria-label=\"popover\" open={popoverOpen} onIcPopoverClosed={handlePopoverClosed}>\n <IcMenuItem label=\"Copy code\" />\n <IcMenuItem label=\"Paste code\" />\n <IcMenuItem label=\"Actions\" submenuTriggerFor=\"actions\" />\n</IcPopoverMenu>\n<IcPopoverMenu submenuId=\"actions\" aria-label=\"popover\">\n <IcMenuItem label=\"Edit\" />\n <IcMenuItem label=\"Find\" />\n <IcMenuItem label=\"Delete\" variant=\"destructive\" />\n</IcPopoverMenu>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const [popoverOpen, setPopoverOpen] = useState<boolean>(false);\nconst handlePopoverToggled = () => setPopoverOpen(value => !value);\nconst handlePopoverClosed = () => setPopoverOpen(false);\nreturn (\n <>\n {shortCode}\n </>\n);`,\n },\n {\n language: \"Javascript\",\n snippet: `const [popoverOpen, setPopoverOpen] = useState(false);\nconst handlePopoverToggled = () => setPopoverOpen(value => !value);\nconst handlePopoverClosed = () => setPopoverOpen(false);\nreturn (\n <>\n {shortCode}\n </>\n);`,\n },\n ],\n },\n },\n];\n\nexport const DemoPopover = () => {\n const [popoverOpen, setPopoverOpen] = useState(false);\n const handlePopoverToggled = () => setPopoverOpen((value) => !value);\n const handlePopoverClosed = () => setPopoverOpen(false);\n return (\n <>\n <IcButton\n variant=\"icon\"\n title=\"More information\"\n id=\"button-1\"\n onClick={handlePopoverToggled}\n >\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"16\"\n height=\"16\"\n fill=\"currentColor\"\n class=\"bi bi-three-dots-vertical\"\n viewBox=\"0 0 16 16\"\n >\n <path d=\"M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z\" />\n </svg>\n </IcButton>\n <IcPopoverMenu\n anchor=\"button-1\"\n aria-label=\"popover\"\n open={popoverOpen}\n onIcPopoverClosed={handlePopoverClosed}\n >\n <IcMenuItem label=\"Copy code\" />\n <IcMenuItem label=\"Paste code\" />\n <IcMenuItem label=\"Actions\" submenuTriggerFor=\"actions\" />\n </IcPopoverMenu>\n <IcPopoverMenu submenuId=\"actions\" aria-label=\"popover\">\n <IcMenuItem label=\"Edit\" />\n <IcMenuItem label=\"Find\" />\n <IcMenuItem label=\"Delete\" variant=\"destructive\" />\n </IcPopoverMenu>\n </>\n );\n};\n\n<ComponentPreview\n style={{\n display: \"flex\",\n justifyContent: \"center\",\n }}\n snippets={snippets}\n>\n <DemoPopover />\n</ComponentPreview>\n\n## Popover menu details\n\n<ComponentDetails component=\"ic-popover-menu\" />\n\n## Menu item details\n\n<ComponentDetails component=\"ic-menu-item\" />\n\n## Menu group details\n\n<ComponentDetails component=\"ic-menu-group\" />\n\n## Variants\n\n### With button variations\n\nexport const snippetsButtons = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-button \n id=\"button-2\" \n variant=\"icon\"\n title=\"More information\" \n onclick=\"handleClick()\"\n>\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"16\"\n height=\"16\"\n fill=\"currentColor\"\n class=\"bi bi-three-dots-vertical\"\n viewBox=\"0 0 16 16\"\n >\n <path d=\"M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z\" />\n </svg>\n</ic-button>\n<div>\n <ic-popover-menu anchor=\"button-2\" aria-label=\"popover\" id=\"popover-menu-2\">\n <ic-menu-item label=\"Copy\" disabled=\"true\"></ic-menu-item>\n <ic-menu-item label=\"Paste\" keyboard-shortcut=\"Cmd + V\"></ic-menu-item>\n <ic-menu-item label=\"Edit\" description=\"This is used to edit the original.\"></ic-menu-item>\n <ic-menu-item label=\"Show/Hide\" variant=\"toggle\"></ic-menu-item>\n <ic-menu-item label=\"Find icons\">\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\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-menu-item>\n <ic-menu-item label=\"Delete\" disabled=\"true\" variant=\"destructive\"></ic-menu-item>\n <ic-menu-item label=\"Log out\" variant=\"destructive\"></ic-menu-item>\n </ic-popover-menu>\n</div>`,\n long: `{shortCode}\n<script>\n var icPopover = document.querySelector(\"#popover-menu-2\");\n function handleClick() {\n icPopover.open = !icPopover.open;\n }\n</script>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcButton\n variant=\"icon\"\n title=\"More information\"\n id=\"button-2\"\n onClick={handlePopoverToggled}\n>\n <SlottedSVG\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"16\"\n height=\"16\"\n fill=\"currentColor\"\n class=\"bi bi-three-dots-vertical\"\n viewBox=\"0 0 16 16\"\n >\n <path d=\"M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z\" />\n </SlottedSVG>\n</IcButton>\n<IcPopoverMenu anchor=\"button-2\" aria-label=\"popover\" open={popoverOpen} onIcPopoverClosed={handlePopoverClosed}>\n <IcMenuItem label=\"Copy\" disabled />\n <IcMenuItem label=\"Paste\" keyboardShortcut=\"Cmd + V\" />\n <IcMenuItem label=\"Edit\" description=\"This is used to edit the original.\" />\n <IcMenuItem label=\"Show/Hide\" variant=\"toggle\" />\n <IcMenuItem label=\"Find icons\">\n <SlottedSVG\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\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 </SlottedSVG>\n </IcMenuItem>\n <IcMenuItem label=\"Delete\" disabled variant=\"destructive\" />\n <IcMenuItem label=\"Log out\" variant=\"destructive\" />\n</IcPopoverMenu>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const [popoverOpen, setPopoverOpen] = useState<boolean>(false);\nconst handlePopoverToggled = () => setPopoverOpen(value => !value);\nconst handlePopoverClosed = () => setPopoverOpen(false);\nreturn (\n <>\n {shortCode}\n </>\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const [popoverOpen, setPopoverOpen] = useState(false);\nconst handlePopoverToggled = () => setPopoverOpen(value => !value);\nconst handlePopoverClosed = () => setPopoverOpen(false);\nreturn (\n <>\n {shortCode}\n </>\n)`,\n },\n ],\n },\n },\n];\n\nexport const ButtonsPopover = () => {\n const [popoverOpen, setPopoverOpen] = useState(false);\n const handlePopoverToggled = () => setPopoverOpen((value) => !value);\n const handlePopoverClosed = () => setPopoverOpen(false);\n return (\n <>\n <IcButton\n variant=\"icon\"\n title=\"More information\"\n id=\"button-2\"\n onClick={handlePopoverToggled}\n >\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"16\"\n height=\"16\"\n fill=\"currentColor\"\n class=\"bi bi-three-dots-vertical\"\n viewBox=\"0 0 16 16\"\n >\n <path d=\"M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z\" />\n </svg>\n </IcButton>\n <IcPopoverMenu\n anchor=\"button-2\"\n aria-label=\"popover\"\n open={popoverOpen}\n onIcPopoverClosed={handlePopoverClosed}\n >\n <IcMenuItem label=\"Copy\" disabled />\n <IcMenuItem label=\"Paste\" keyboardShortcut=\"Cmd + V\" />\n <IcMenuItem\n label=\"Edit\"\n description=\"This is used to edit the original.\"\n />\n <IcMenuItem label=\"Show/Hide\" variant=\"toggle\" />\n <IcMenuItem label=\"Find icons\">\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n >\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n <path d=\"M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z\" />\n </svg>\n </IcMenuItem>\n <IcMenuItem label=\"Delete\" disabled variant=\"destructive\" />\n <IcMenuItem label=\"Log out\" variant=\"destructive\" />\n </IcPopoverMenu>\n </>\n );\n};\n\n<ComponentPreview\n style={{\n display: \"flex\",\n justifyContent: \"center\",\n }}\n snippets={snippetsButtons}\n>\n <ButtonsPopover />\n</ComponentPreview>\n\n### With menu groups\n\nexport const snippetsGroups = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-button \n id=\"button-3\" \n variant=\"icon\"\n title=\"More information\" \n onclick=\"handleClick()\"\n>\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"16\"\n height=\"16\"\n fill=\"currentColor\"\n class=\"bi bi-three-dots-vertical\"\n viewBox=\"0 0 16 16\"\n >\n <path d=\"M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z\" />\n </svg>\n</ic-button>\n<div>\n <ic-popover-menu anchor=\"button-3\" aria-label=\"popover\" id=\"popover-menu-3\">\n <ic-menu-group label=\"Edit options\">\n <ic-menu-item label=\"Copy\" disabled=\"true\"></ic-menu-item>\n <ic-menu-item label=\"Paste\" keyboard-shortcut=\"Cmd + V\"></ic-menu-item>\n </ic-menu-group>\n <ic-menu-group>\n <ic-menu-item label=\"Format\"></ic-menu-item>\n <ic-menu-item label=\"Help\"></ic-menu-item>\n <ic-menu-group>\n </ic-popover-menu>\n</div>`,\n long: `{shortCode}\n<script>\n var icPopover = document.querySelector(\"#popover-menu-3\");\n function handleClick() {\n icPopover.open = !icPopover.open;\n }\n</script>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcButton\n variant=\"icon\"\n title=\"More information\"\n id=\"button-3\"\n onClick={handlePopoverToggled}\n>\n <SlottedSVG\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"16\"\n height=\"16\"\n fill=\"currentColor\"\n class=\"bi bi-three-dots-vertical\"\n viewBox=\"0 0 16 16\"\n >\n <path d=\"M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z\" />\n </SlottedSVG>\n</IcButton>\n<IcPopoverMenu anchor=\"button-3\" aria-label=\"popover\" open={popoverOpen} onIcPopoverClosed={handlePopoverClosed}>\n <IcMenuGroup label=\"Edit options\">\n <IcMenuItem label=\"Copy\" disabled />\n <IcMenuItem label=\"Paste\" keyboardShortcut=\"Cmd + V\" />\n </IcMenuGroup>\n <IcMenuGroup>\n <IcMenuItem label=\"Format\" />\n <IcMenuItem label=\"Help\" />\n </IcMenuGroup>\n</IcPopoverMenu>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const [popoverOpen, setPopoverOpen] = useState<boolean>(false);\nconst handlePopoverToggled = () => setPopoverOpen(value => !value);\nconst handlePopoverClosed = () => setPopoverOpen(false);\nreturn (\n <>\n {shortCode}\n </>\n);`,\n },\n {\n language: \"Javascript\",\n snippet: `const [popoverOpen, setPopoverOpen] = useState(false);\nconst handlePopoverToggled = () => setPopoverOpen(value => !value);\nconst handlePopoverClosed = () => setPopoverOpen(false);\nreturn (\n <>\n {shortCode}\n </>\n);`,\n },\n ],\n },\n },\n];\n\nexport const GroupsPopover = () => {\n const [popoverOpen, setPopoverOpen] = useState(false);\n const handlePopoverToggled = () => setPopoverOpen((value) => !value);\n const handlePopoverClosed = () => setPopoverOpen(false);\n return (\n <>\n <IcButton\n variant=\"icon\"\n title=\"More information\"\n id=\"button-3\"\n onClick={handlePopoverToggled}\n >\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"16\"\n height=\"16\"\n fill=\"currentColor\"\n class=\"bi bi-three-dots-vertical\"\n viewBox=\"0 0 16 16\"\n >\n <path d=\"M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z\" />\n </svg>\n </IcButton>\n <IcPopoverMenu\n anchor=\"button-3\"\n aria-label=\"popover\"\n open={popoverOpen}\n onIcPopoverClosed={handlePopoverClosed}\n >\n <IcMenuGroup label=\"Edit options\">\n <IcMenuItem label=\"Copy\" disabled />\n <IcMenuItem label=\"Paste\" keyboardShortcut=\"Cmd + V\" />\n </IcMenuGroup>\n <IcMenuGroup>\n <IcMenuItem label=\"Format\" />\n <IcMenuItem label=\"Help\" />\n </IcMenuGroup>\n </IcPopoverMenu>\n </>\n );\n};\n\n<ComponentPreview\n style={{\n display: \"flex\",\n justifyContent: \"center\",\n }}\n snippets={snippetsGroups}\n>\n <GroupsPopover />\n</ComponentPreview>\n",
+ "id": "components\\popover-menu\\codex",
+ "contents": "\r\nimport { IcPopoverMenu, IcMenuItem, IcMenuGroup, IcButton } from \"@ukic/react\";\r\nimport { useState } from \"react\";\r\n\r\n## Component demo\r\n\r\nexport const snippets = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-button \r\n id=\"button-1\" \r\n variant=\"icon\"\r\n title=\"More information\" \r\n onclick=\"handleClick()\"\r\n aria-expanded=\"false\"\r\n>\r\n <svg\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"16\"\r\n height=\"16\"\r\n fill=\"currentColor\"\r\n class=\"bi bi-three-dots-vertical\"\r\n viewBox=\"0 0 16 16\"\r\n >\r\n <path d=\"M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z\" />\r\n </svg>\r\n</ic-button>\r\n<div>\r\n <ic-popover-menu anchor=\"button-1\" aria-label=\"popover\" id=\"popover-menu\">\r\n <ic-menu-item label=\"Copy code\"></ic-menu-item>\r\n <ic-menu-item label=\"Paste code\"></ic-menu-item>\r\n <ic-menu-item\r\n label=\"Actions\"\r\n submenu-trigger-for=\"actions\"\r\n ></ic-menu-item>\r\n </ic-popover-menu>\r\n <ic-popover-menu submenu-id=\"actions\">\r\n <ic-menu-item label=\"Edit\"></ic-menu-item>\r\n <ic-menu-item label=\"Find\"></ic-menu-item>\r\n <ic-menu-item label=\"Delete\" variant=\"destructive\"></ic-menu-item>\r\n </ic-popover-menu>\r\n</div>`,\r\n long: `{shortCode}\r\n<script>\r\n var icPopover = document.querySelector(\"#popover-menu\");\r\n var anchorButton = document.querySelector(\"#button-1\");\r\n function handleClick() {\r\n icPopover.open = !icPopover.open;\r\n anchorButton.setAttribute('aria-expanded', icPopover.open);\r\n }\r\n icPopover.addEventListener('icPopoverClosed', handleClose);\r\n function handleClose() {\r\n anchorButton.setAttribute('aria-expanded', 'false');\r\n }\r\n</script>`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcButton\r\n variant=\"icon\"\r\n title=\"More information\"\r\n id=\"button-1\"\r\n onClick={handlePopoverToggled}\r\n aria-expanded={popoverOpen}\r\n>\r\n <SlottedSVG\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"16\"\r\n height=\"16\"\r\n fill=\"currentColor\"\r\n class=\"bi bi-three-dots-vertical\"\r\n viewBox=\"0 0 16 16\"\r\n >\r\n <path d=\"M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z\" />\r\n </SlottedSVG>\r\n</IcButton>\r\n<IcPopoverMenu anchor=\"button-1\" aria-label=\"popover\" open={popoverOpen} onIcPopoverClosed={handlePopoverClosed}>\r\n <IcMenuItem label=\"Copy code\" />\r\n <IcMenuItem label=\"Paste code\" />\r\n <IcMenuItem label=\"Actions\" submenuTriggerFor=\"actions\" />\r\n</IcPopoverMenu>\r\n<IcPopoverMenu submenuId=\"actions\" aria-label=\"popover\">\r\n <IcMenuItem label=\"Edit\" />\r\n <IcMenuItem label=\"Find\" />\r\n <IcMenuItem label=\"Delete\" variant=\"destructive\" />\r\n</IcPopoverMenu>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `const [popoverOpen, setPopoverOpen] = useState<boolean>(false);\r\nconst handlePopoverToggled = () => setPopoverOpen(value => !value);\r\nconst handlePopoverClosed = () => setPopoverOpen(false);\r\nreturn (\r\n <>\r\n {shortCode}\r\n </>\r\n);`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `const [popoverOpen, setPopoverOpen] = useState(false);\r\nconst handlePopoverToggled = () => setPopoverOpen(value => !value);\r\nconst handlePopoverClosed = () => setPopoverOpen(false);\r\nreturn (\r\n <>\r\n {shortCode}\r\n </>\r\n);`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\nexport const DemoPopover = () => {\r\n const [popoverOpen, setPopoverOpen] = useState(false);\r\n const handlePopoverToggled = () => setPopoverOpen((value) => !value);\r\n const handlePopoverClosed = () => setPopoverOpen(false);\r\n return (\r\n <>\r\n <IcButton\r\n variant=\"icon\"\r\n title=\"More information\"\r\n id=\"button-1\"\r\n onClick={handlePopoverToggled}\r\n aria-expanded={popoverOpen}\r\n >\r\n <svg\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"16\"\r\n height=\"16\"\r\n fill=\"currentColor\"\r\n class=\"bi bi-three-dots-vertical\"\r\n viewBox=\"0 0 16 16\"\r\n >\r\n <path d=\"M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z\" />\r\n </svg>\r\n </IcButton>\r\n <IcPopoverMenu\r\n anchor=\"button-1\"\r\n aria-label=\"popover\"\r\n open={popoverOpen}\r\n onIcPopoverClosed={handlePopoverClosed}\r\n >\r\n <IcMenuItem label=\"Copy code\" />\r\n <IcMenuItem label=\"Paste code\" />\r\n <IcMenuItem label=\"Actions\" submenuTriggerFor=\"actions\" />\r\n </IcPopoverMenu>\r\n <IcPopoverMenu submenuId=\"actions\" aria-label=\"popover\">\r\n <IcMenuItem label=\"Edit\" />\r\n <IcMenuItem label=\"Find\" />\r\n <IcMenuItem label=\"Delete\" variant=\"destructive\" />\r\n </IcPopoverMenu>\r\n </>\r\n );\r\n};\r\n\r\n<ComponentPreview\r\n style={{\r\n display: \"flex\",\r\n justifyContent: \"center\",\r\n }}\r\n snippets={snippets}\r\n>\r\n <DemoPopover />\r\n</ComponentPreview>\r\n\r\n## Popover menu details\r\n\r\n<ComponentDetails component=\"ic-popover-menu\" />\r\n\r\n## Menu item details\r\n\r\n<ComponentDetails component=\"ic-menu-item\" />\r\n\r\n## Menu group details\r\n\r\n<ComponentDetails component=\"ic-menu-group\" />\r\n\r\n## Variants\r\n\r\n### With button variations\r\n\r\nexport const snippetsButtons = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-button \r\n id=\"button-2\" \r\n variant=\"icon\"\r\n title=\"More information\" \r\n onclick=\"handleClick()\"\r\n aria-expanded=\"false\"\r\n>\r\n <svg\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"16\"\r\n height=\"16\"\r\n fill=\"currentColor\"\r\n class=\"bi bi-three-dots-vertical\"\r\n viewBox=\"0 0 16 16\"\r\n >\r\n <path d=\"M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z\" />\r\n </svg>\r\n</ic-button>\r\n<div>\r\n <ic-popover-menu anchor=\"button-2\" aria-label=\"popover\" id=\"popover-menu-2\">\r\n <ic-menu-item label=\"Copy\" disabled=\"true\"></ic-menu-item>\r\n <ic-menu-item label=\"Paste\" keyboard-shortcut=\"Cmd + V\"></ic-menu-item>\r\n <ic-menu-item label=\"Edit\" description=\"This is used to edit the original.\"></ic-menu-item>\r\n <ic-menu-item label=\"Show/Hide\" variant=\"toggle\"></ic-menu-item>\r\n <ic-menu-item label=\"Find icons\">\r\n <svg\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n width=\"24\"\r\n >\r\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\r\n <path\r\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\"\r\n />\r\n </svg>\r\n </ic-menu-item>\r\n <ic-menu-item label=\"Delete\" disabled=\"true\" variant=\"destructive\"></ic-menu-item>\r\n <ic-menu-item label=\"Log out\" variant=\"destructive\"></ic-menu-item>\r\n </ic-popover-menu>\r\n</div>`,\r\n long: `{shortCode}\r\n<script>\r\n var icPopover = document.querySelector(\"#popover-menu-2\");\r\n var anchorButton = document.querySelector(\"#button-2\");\r\n function handleClick() {\r\n icPopover.open = !icPopover.open;\r\n anchorButton.setAttribute('aria-expanded', icPopover.open);\r\n }\r\n icPopover.addEventListener('icPopoverClosed', handleClose);\r\n function handleClose() {\r\n anchorButton.setAttribute('aria-expanded', 'false');\r\n }\r\n</script>`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcButton\r\n variant=\"icon\"\r\n title=\"More information\"\r\n id=\"button-2\"\r\n onClick={handlePopoverToggled}\r\n aria-expanded={popoverOpen}\r\n>\r\n <SlottedSVG\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"16\"\r\n height=\"16\"\r\n fill=\"currentColor\"\r\n class=\"bi bi-three-dots-vertical\"\r\n viewBox=\"0 0 16 16\"\r\n >\r\n <path d=\"M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z\" />\r\n </SlottedSVG>\r\n</IcButton>\r\n<IcPopoverMenu anchor=\"button-2\" aria-label=\"popover\" open={popoverOpen} onIcPopoverClosed={handlePopoverClosed}>\r\n <IcMenuItem label=\"Copy\" disabled />\r\n <IcMenuItem label=\"Paste\" keyboardShortcut=\"Cmd + V\" />\r\n <IcMenuItem label=\"Edit\" description=\"This is used to edit the original.\" />\r\n <IcMenuItem label=\"Show/Hide\" variant=\"toggle\" />\r\n <IcMenuItem label=\"Find icons\">\r\n <SlottedSVG\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n width=\"24\"\r\n >\r\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\r\n <path\r\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\"\r\n />\r\n </SlottedSVG>\r\n </IcMenuItem>\r\n <IcMenuItem label=\"Delete\" disabled variant=\"destructive\" />\r\n <IcMenuItem label=\"Log out\" variant=\"destructive\" />\r\n</IcPopoverMenu>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `const [popoverOpen, setPopoverOpen] = useState<boolean>(false);\r\nconst handlePopoverToggled = () => setPopoverOpen(value => !value);\r\nconst handlePopoverClosed = () => setPopoverOpen(false);\r\nreturn (\r\n <>\r\n {shortCode}\r\n </>\r\n)`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `const [popoverOpen, setPopoverOpen] = useState(false);\r\nconst handlePopoverToggled = () => setPopoverOpen(value => !value);\r\nconst handlePopoverClosed = () => setPopoverOpen(false);\r\nreturn (\r\n <>\r\n {shortCode}\r\n </>\r\n)`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\nexport const ButtonsPopover = () => {\r\n const [popoverOpen, setPopoverOpen] = useState(false);\r\n const handlePopoverToggled = () => setPopoverOpen((value) => !value);\r\n const handlePopoverClosed = () => setPopoverOpen(false);\r\n return (\r\n <>\r\n <IcButton\r\n variant=\"icon\"\r\n title=\"More information\"\r\n id=\"button-2\"\r\n onClick={handlePopoverToggled}\r\n aria-expanded={popoverOpen}\r\n >\r\n <svg\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"16\"\r\n height=\"16\"\r\n fill=\"currentColor\"\r\n class=\"bi bi-three-dots-vertical\"\r\n viewBox=\"0 0 16 16\"\r\n >\r\n <path d=\"M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z\" />\r\n </svg>\r\n </IcButton>\r\n <IcPopoverMenu\r\n anchor=\"button-2\"\r\n aria-label=\"popover\"\r\n open={popoverOpen}\r\n onIcPopoverClosed={handlePopoverClosed}\r\n >\r\n <IcMenuItem label=\"Copy\" disabled />\r\n <IcMenuItem label=\"Paste\" keyboardShortcut=\"Cmd + V\" />\r\n <IcMenuItem\r\n label=\"Edit\"\r\n description=\"This is used to edit the original.\"\r\n />\r\n <IcMenuItem label=\"Show/Hide\" variant=\"toggle\" />\r\n <IcMenuItem label=\"Find icons\">\r\n <svg\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n width=\"24\"\r\n >\r\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\r\n <path d=\"M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z\" />\r\n </svg>\r\n </IcMenuItem>\r\n <IcMenuItem label=\"Delete\" disabled variant=\"destructive\" />\r\n <IcMenuItem label=\"Log out\" variant=\"destructive\" />\r\n </IcPopoverMenu>\r\n </>\r\n );\r\n};\r\n\r\n<ComponentPreview\r\n style={{\r\n display: \"flex\",\r\n justifyContent: \"center\",\r\n }}\r\n snippets={snippetsButtons}\r\n>\r\n <ButtonsPopover />\r\n</ComponentPreview>\r\n\r\n### With menu groups\r\n\r\nexport const snippetsGroups = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-button \r\n id=\"button-3\" \r\n variant=\"icon\"\r\n title=\"More information\" \r\n onclick=\"handleClick()\"\r\n aria-expanded=\"false\"\r\n>\r\n <svg\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"16\"\r\n height=\"16\"\r\n fill=\"currentColor\"\r\n class=\"bi bi-three-dots-vertical\"\r\n viewBox=\"0 0 16 16\"\r\n >\r\n <path d=\"M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z\" />\r\n </svg>\r\n</ic-button>\r\n<div>\r\n <ic-popover-menu anchor=\"button-3\" aria-label=\"popover\" id=\"popover-menu-3\">\r\n <ic-menu-group label=\"Edit options\">\r\n <ic-menu-item label=\"Copy\" disabled=\"true\"></ic-menu-item>\r\n <ic-menu-item label=\"Paste\" keyboard-shortcut=\"Cmd + V\"></ic-menu-item>\r\n </ic-menu-group>\r\n <ic-menu-group>\r\n <ic-menu-item label=\"Format\"></ic-menu-item>\r\n <ic-menu-item label=\"Help\"></ic-menu-item>\r\n </ic-menu-group>\r\n </ic-popover-menu>\r\n</div>`,\r\n long: `{shortCode}\r\n<script>\r\n var icPopover = document.querySelector(\"#popover-menu-3\");\r\n var anchorButton = document.querySelector(\"#button-3\");\r\n function handleClick() {\r\n icPopover.open = !icPopover.open;\r\n anchorButton.setAttribute('aria-expanded', icPopover.open);\r\n }\r\n icPopover.addEventListener('icPopoverClosed', handleClose);\r\n function handleClose() {\r\n anchorButton.setAttribute('aria-expanded', 'false');\r\n }\r\n</script>`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcButton\r\n variant=\"icon\"\r\n title=\"More information\"\r\n id=\"button-3\"\r\n onClick={handlePopoverToggled}\r\n aria-expanded={popoverOpen}\r\n>\r\n <SlottedSVG\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"16\"\r\n height=\"16\"\r\n fill=\"currentColor\"\r\n class=\"bi bi-three-dots-vertical\"\r\n viewBox=\"0 0 16 16\"\r\n >\r\n <path d=\"M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z\" />\r\n </SlottedSVG>\r\n</IcButton>\r\n<IcPopoverMenu anchor=\"button-3\" aria-label=\"popover\" open={popoverOpen} onIcPopoverClosed={handlePopoverClosed}>\r\n <IcMenuGroup label=\"Edit options\">\r\n <IcMenuItem label=\"Copy\" disabled />\r\n <IcMenuItem label=\"Paste\" keyboardShortcut=\"Cmd + V\" />\r\n </IcMenuGroup>\r\n <IcMenuGroup>\r\n <IcMenuItem label=\"Format\" />\r\n <IcMenuItem label=\"Help\" />\r\n </IcMenuGroup>\r\n</IcPopoverMenu>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `const [popoverOpen, setPopoverOpen] = useState<boolean>(false);\r\nconst handlePopoverToggled = () => setPopoverOpen(value => !value);\r\nconst handlePopoverClosed = () => setPopoverOpen(false);\r\nreturn (\r\n <>\r\n {shortCode}\r\n </>\r\n);`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `const [popoverOpen, setPopoverOpen] = useState(false);\r\nconst handlePopoverToggled = () => setPopoverOpen(value => !value);\r\nconst handlePopoverClosed = () => setPopoverOpen(false);\r\nreturn (\r\n <>\r\n {shortCode}\r\n </>\r\n);`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\nexport const GroupsPopover = () => {\r\n const [popoverOpen, setPopoverOpen] = useState(false);\r\n const handlePopoverToggled = () => setPopoverOpen((value) => !value);\r\n const handlePopoverClosed = () => setPopoverOpen(false);\r\n return (\r\n <>\r\n <IcButton\r\n variant=\"icon\"\r\n title=\"More information\"\r\n id=\"button-3\"\r\n onClick={handlePopoverToggled}\r\n aria-expanded={popoverOpen}\r\n >\r\n <svg\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"16\"\r\n height=\"16\"\r\n fill=\"currentColor\"\r\n class=\"bi bi-three-dots-vertical\"\r\n viewBox=\"0 0 16 16\"\r\n >\r\n <path d=\"M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z\" />\r\n </svg>\r\n </IcButton>\r\n <IcPopoverMenu\r\n anchor=\"button-3\"\r\n aria-label=\"popover\"\r\n open={popoverOpen}\r\n onIcPopoverClosed={handlePopoverClosed}\r\n >\r\n <IcMenuGroup label=\"Edit options\">\r\n <IcMenuItem label=\"Copy\" disabled />\r\n <IcMenuItem label=\"Paste\" keyboardShortcut=\"Cmd + V\" />\r\n </IcMenuGroup>\r\n <IcMenuGroup>\r\n <IcMenuItem label=\"Format\" />\r\n <IcMenuItem label=\"Help\" />\r\n </IcMenuGroup>\r\n </IcPopoverMenu>\r\n </>\r\n );\r\n};\r\n\r\n<ComponentPreview\r\n style={{\r\n display: \"flex\",\r\n justifyContent: \"center\",\r\n }}\r\n snippets={snippetsGroups}\r\n>\r\n <GroupsPopover />\r\n</ComponentPreview>\r\n",
"path": "/components/popover-menu/code",
"date": "2024-05-31",
"title": "Popover menu",
@@ -2934,16 +2934,16 @@
}
],
"meta": {
- "relativePath": "components/popover-menu/code.mdx",
- "createdAt": "2024-11-06T10:36:50.788Z",
- "lastModified": "2024-11-06T10:36:50.788Z",
- "size": 15648,
- "formattedSize": "15.3 KB"
+ "relativePath": "components\\popover-menu\\code.mdx",
+ "createdAt": "2024-12-04T13:23:54.110Z",
+ "lastModified": "2024-12-04T13:23:54.110Z",
+ "size": 17310,
+ "formattedSize": "16.9 KB"
}
},
{
"id": "components\\popover-menu\\guidancex",
- "contents": "\nimport { IcPopoverMenu, IcMenuItem, IcButton } from \"@ukic/react\";\nimport { useRef } from \"react\";\nimport popoverFig1 from \"./images/fig-1-use-popover-menu-to-house-secondary-actions.png\";\nimport popoverFig2 from \"./images/fig-2-dont-use-popover-menu-for-few-actions.png\";\nimport popoverFig3 from \"./images/fig-3-set-maxheight-to-force-scroll.png\";\nimport popoverFig4 from \"./images/fig-4-position-menus-in-available-space.png\";\nimport popoverFig5 from \"./images/fig-5-menu-buttons-with-different-elements.png\";\nimport popoverFig6 from \"./images/fig-6-menu-toggle-buttons.png\";\nimport popoverFig7 from \"./images/fig-7-menu-groups.png\";\nimport popoverVid1 from \"./images/anim-1-popover-menu-interaction.mp4\";\nimport popoverVid2 from \"./images/anim-2-sub-menu-interaction.mp4\";\nimport popoverVid3 from \"./images/anim-3-avoid-nested-sub-menus.mp4\";\n\n## Introduction\n\nClick on the 'More Information' button below to view an example of the popover menu component.\n\nexport const IntroPopover = () => {\n const popoverEl = useRef(null);\n const handleClick = () => {\n popoverEl.current.open = !popoverEl.current.open;\n };\n return (\n <>\n <IcButton\n variant=\"icon\"\n title=\"More information\"\n id=\"button-1\"\n onClick={handleClick}\n >\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"16\"\n height=\"16\"\n fill=\"currentColor\"\n class=\"bi bi-three-dots-vertical\"\n viewBox=\"0 0 16 16\"\n >\n <path d=\"M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z\" />\n </svg>\n </IcButton>\n <IcPopoverMenu anchor=\"button-1\" aria-label=\"popover\" ref={popoverEl}>\n <IcMenuItem label=\"Copy code\" />\n <IcMenuItem label=\"Paste code\" />\n <IcMenuItem label=\"Actions\" submenuTriggerFor=\"actions\" />\n </IcPopoverMenu>\n <IcPopoverMenu submenuId=\"actions\" aria-label=\"popover\">\n <IcMenuItem label=\"Edit\" />\n <IcMenuItem label=\"Find\" />\n <IcMenuItem label=\"Delete\" variant=\"destructive\" />\n </IcPopoverMenu>\n </>\n );\n};\n\n<ComponentPreview\n style={{\n display: \"flex\",\n justifyContent: \"center\",\n }}\n>\n <IntroPopover />\n</ComponentPreview>\n\n## When to use\n\nUse a popover menu to place multiple actions behind a single trigger. This is especially useful when there is not enough space to include all actions on the base page. Popover menus are commonly used for ‘More actions’ and often triggered using an icon button.\n\n<DoubleDoDontCaution>\n <DoDontCaution\n imageSrc={popoverFig1}\n imageAlt=\"A popover menu with edit and view options using a mix of menu items, menu groups and menu toggle items.\"\n state=\"good\"\n caption=\"Use popover menus to contain multiple actions.\"\n />\n</DoubleDoDontCaution>\n\n## When not to use\n\nDon’t use a popover menu if there are only a small number of actions. Consider if the actions can be better placed on the page itself.\n\nAvoid placing important actions in popover menus as these may be missed. Instead, use popover menus to house secondary or less important actions and place your most important actions on the page itself.\n\n<DoubleDoDontCaution>\n <DoDontCaution\n imageSrc={popoverFig2}\n imageAlt=\"A popover menu with two options for edit and download. Plenty of space is available on the background interface to display these options.\"\n state=\"bad\"\n caption=\"Avoid using popover menus with few actions, or with important actions.\"\n />\n</DoubleDoDontCaution>\n\nDon’t include any other content within a popover menu other than the elements described in this page. If additional information is required about an action, consider using a [dialog](/components/dialog) instead.\n\n## Interaction behaviour\n\nWhen you click a trigger element, a popover menu appears. Make sure to associate the popover menu with a trigger and ensure that the trigger can be actioned via any input mode.\n\nWhen you click a menu item within a popover menu, the popover menu will hide and the menu item’s associated action will be triggered.\n\n<video\n class=\"half-width\"\n muted\n controls\n loop\n title=\"An animation showing a popover menu that appears after clicking a ‘more’ button. The menu is closed when a menu item is clicked.\"\n>\n <source src={popoverVid1} type=\"video/mp4\" />\n</video>\n\n### Sizing\n\nBy default, popover menus expand vertically to hug their contents. Set a max-height on the popover menu to constrain the height and allow the menu to scroll. Avoid setting the width of the popover menu to be greater than the available viewport.\n\n<DoDontCaution\n imageSrc={popoverFig3}\n imageAlt=\"Two examples of popover menus. The first displays all menu items within the menu container. The second example shows the same menu items, but with some hidden due to a smaller menu container. A scroll bar allows the menu to be scrolled.\"\n state=\"good\"\n caption=\"Set a max-height to constrain the height of the menu and cause its contents to scroll.\"\n/>\n\n### Layout and placement\n\nPopover menus appear adjacent to their triggering element. By default, they appear below and aligned to the left of the trigger element. However, if no space is available, the popover menu will appear above or aligned to the right of the trigger element.\n\n<DoDontCaution\n imageSrc={popoverFig4}\n imageAlt=\"Two examples of popover menus. The first example shows the menu aligned to the left of the screen. The second shows the menu aligned to the right.\"\n state=\"good\"\n caption=\"Popover menus position themselves based on the available space.\"\n/>\n\n## Content\n\nPopover menus contain menu items, menu toggle items, menu groups and menu sections.\n\n### Labels\n\nFollow the [content style](/styles/content-style) guidelines when writing labels and keep them concise but specific.\n\nAlways specify an accessible label for the menu items. The accessible label can include more detail than is described in the visible label.\n\nFor example, a menu item may have a visible label that reads ‘Edit’. The accessible label may read ‘Edit record’. This includes more information to aid assistive technology users.\n\n### Icons\n\nUse an icon on a menu item to provide additional meaning or to aid in recognition. Menu items, menu toggle items and parent menu items can display an icon.\n\nMake sure that the icon is understandable and relevant to the action.\n\nAlways provide alternative descriptions for icons if they aren't decorative. Only use icons if they are necessary.\n\n### Menu items\n\nUse the 'default' variant of menu items for single actions that do not have a selection status.\n\nAdd an additional description to a menu item to provide additional context. Keep the description concise and consider if the action is too complicated if too much information is required to describe the action.\n\nIf a keyboard shortcut is available for a menu item’s action, then display it using the keyboard shortcut label.\n\nUse the 'destructive' variant of a menu item to highlight a destructive action. Position destructive actions at the bottom of a popover menu.\n\nSpecify a menu item as a parent if it has children that appear in a sub-menu. When clicked, the sub-menu will slide into view.\n\n<DoubleDoDontCaution>\n <DoDontCaution\n imageSrc={popoverFig5}\n imageAlt=\"A popover menu showing a set of edit options that include icons and keyboard shortcuts alongside their labels.\"\n state=\"good\"\n caption=\"Use menu items for single actions. Add an icon or a description to provide more context. Highlight keyboard shortcuts using the keyboard shortcut label.\"\n />\n</DoubleDoDontCaution>\n\n### Menu toggle items\n\nUse the 'toggle' variant of menu items for actions that provide an ability to toggle something on or off. Menu toggle items will display a checkmark when toggled on and hide it when toggled off.\n\nLike default menu items, provide an icon or a description to add additional context if required.\n\n<DoubleDoDontCaution>\n <DoDontCaution\n imageSrc={popoverFig6}\n imageAlt=\"A popover menu containing two menu toggle items. Their labels read ‘Show/Hide’ and ‘Lock/Unlock’ and display a tick indicating that they are toggled on.\"\n state=\"good\"\n caption=\"Use menu toggle items to show a selection state alongside the action.\"\n />\n</DoubleDoDontCaution>\n\n### Menu groups\n\nUse menu groups to organise menu items into sections within the popover menu. Provide a label for the menu group to describe its contents. Alternatively, leave the menu group label blank if a description is unnecessary.\n\n<DoubleDoDontCaution>\n <DoDontCaution\n imageSrc={popoverFig7}\n imageAlt=\" A popover menu with a menu group for ‘Edit options’, a menu group for ‘View options’, an untitled menu group containing unrelated actions, and a final untitled menu group containing destructive actions.\"\n state=\"good\"\n caption=\"Use menu groups to create sections within a popover menu.\"\n />\n</DoubleDoDontCaution>\n\n### Parent menu items\n\nUse a parent menu item to open sub-menus that include more menu items. Use this to contain similar actions or options relating to the menu group name.\n\n<video\n class=\"half-width\"\n muted\n controls\n loop\n title=\"An animation showing a popover menu with a parent menu item titled ‘Zoom’. A sub-menu containing menu items for different zoom levels is opened after the ‘zoom’ parent menu item is clicked. After the back button is clicked in the sub-menu the main menu is displayed again.\"\n>\n <source src={popoverVid2} type=\"video/mp4\" />\n</video>\n\n### Sub-menus\n\nUse a sub-menu to contain a parent menu item’s children items. Use sub-menus for multiple related actions that are opened from the main menu.\n\nThe sub-menu displays the same label as the parent menu item. Clicking the back button in a sub-menu will return the user to the parent menu item in the main menu.\n\nUse menu items, toggle menu items, menu groups or parent menu items in a sub-menu but avoid nesting too many levels of sub-menus as this can be confusing to navigate.\n\n<video\n class=\"half-width\"\n muted\n controls\n loop\n title=\"An animation showing a popover menu that contains four parent menu items each with nested parent menu items in their sub-menus. The user clicks ‘help options’ to go into the sub-menu, then clicks ‘information’ to go into a second sub-menu, then clicks ‘tutorials’ to go into a third sub-menu.\"\n>\n <source src={popoverVid3} type=\"video/mp4\" />\n</video>\n\n## Accessibility considerations\n\nWhen specifying the trigger element for a popover menu, make use of ‘aria-expanded’ and ‘aria-collapsed’ so that a screen reader announces the appearance of the popover menu.\n",
+ "contents": "\nimport { IcPopoverMenu, IcMenuItem, IcButton } from \"@ukic/react\";\nimport { useState } from \"react\";\nimport popoverFig1 from \"./images/fig-1-use-popover-menu-to-house-secondary-actions.png\";\nimport popoverFig2 from \"./images/fig-2-dont-use-popover-menu-for-few-actions.png\";\nimport popoverFig3 from \"./images/fig-3-set-maxheight-to-force-scroll.png\";\nimport popoverFig4 from \"./images/fig-4-position-menus-in-available-space.png\";\nimport popoverFig5 from \"./images/fig-5-menu-buttons-with-different-elements.png\";\nimport popoverFig6 from \"./images/fig-6-menu-toggle-buttons.png\";\nimport popoverFig7 from \"./images/fig-7-menu-groups.png\";\nimport popoverVid1 from \"./images/anim-1-popover-menu-interaction.mp4\";\nimport popoverVid2 from \"./images/anim-2-sub-menu-interaction.mp4\";\nimport popoverVid3 from \"./images/anim-3-avoid-nested-sub-menus.mp4\";\n\n## Introduction\n\nClick on the 'More Information' button below to view an example of the popover menu component.\n\nexport const IntroPopover = () => {\n const [popoverOpen, setPopoverOpen] = useState(false);\n const handlePopoverToggled = () => setPopoverOpen((value) => !value);\n const handlePopoverClosed = () => setPopoverOpen(false);\n return (\n <>\n <IcButton\n variant=\"icon\"\n title=\"More information\"\n id=\"button-1\"\n onClick={handlePopoverToggled}\n aria-expanded={popoverOpen}\n >\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"16\"\n height=\"16\"\n fill=\"currentColor\"\n class=\"bi bi-three-dots-vertical\"\n viewBox=\"0 0 16 16\"\n >\n <path d=\"M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z\" />\n </svg>\n </IcButton>\n <IcPopoverMenu\n anchor=\"button-1\"\n aria-label=\"popover\"\n open={popoverOpen}\n onIcPopoverClosed={handlePopoverClosed}\n >\n <IcMenuItem label=\"Copy code\" />\n <IcMenuItem label=\"Paste code\" />\n <IcMenuItem label=\"Actions\" submenuTriggerFor=\"actions\" />\n </IcPopoverMenu>\n <IcPopoverMenu submenuId=\"actions\" aria-label=\"popover\">\n <IcMenuItem label=\"Edit\" />\n <IcMenuItem label=\"Find\" />\n <IcMenuItem label=\"Delete\" variant=\"destructive\" />\n </IcPopoverMenu>\n </>\n );\n};\n\n<ComponentPreview\n style={{\n display: \"flex\",\n justifyContent: \"center\",\n }}\n>\n <IntroPopover />\n</ComponentPreview>\n\n## When to use\n\nUse a popover menu to place multiple actions behind a single trigger. This is especially useful when there is not enough space to include all actions on the base page. Popover menus are commonly used for ‘More actions’ and often triggered using an icon button.\n\n<DoubleDoDontCaution>\n <DoDontCaution\n imageSrc={popoverFig1}\n imageAlt=\"A popover menu with edit and view options using a mix of menu items, menu groups and menu toggle items.\"\n state=\"good\"\n caption=\"Use popover menus to contain multiple actions.\"\n />\n</DoubleDoDontCaution>\n\n## When not to use\n\nDon’t use a popover menu if there are only a small number of actions. Consider if the actions can be better placed on the page itself.\n\nAvoid placing important actions in popover menus as these may be missed. Instead, use popover menus to house secondary or less important actions and place your most important actions on the page itself.\n\n<DoubleDoDontCaution>\n <DoDontCaution\n imageSrc={popoverFig2}\n imageAlt=\"A popover menu with two options for edit and download. Plenty of space is available on the background interface to display these options.\"\n state=\"bad\"\n caption=\"Avoid using popover menus with few actions, or with important actions.\"\n />\n</DoubleDoDontCaution>\n\nDon’t include any other content within a popover menu other than the elements described in this page. If additional information is required about an action, consider using a [dialog](/components/dialog) instead.\n\n## Interaction behaviour\n\nWhen you click a trigger element, a popover menu appears. Make sure to associate the popover menu with a trigger and ensure that the trigger can be actioned via any input mode.\n\nWhen you click a menu item within a popover menu, the popover menu will hide and the menu item’s associated action will be triggered.\n\n<video\n class=\"half-width\"\n muted\n controls\n loop\n title=\"An animation showing a popover menu that appears after clicking a ‘more’ button. The menu is closed when a menu item is clicked.\"\n>\n <source src={popoverVid1} type=\"video/mp4\" />\n</video>\n\n### Sizing\n\nBy default, popover menus expand vertically to hug their contents. Set a max-height on the popover menu to constrain the height and allow the menu to scroll. Avoid setting the width of the popover menu to be greater than the available viewport.\n\n<DoDontCaution\n imageSrc={popoverFig3}\n imageAlt=\"Two examples of popover menus. The first displays all menu items within the menu container. The second example shows the same menu items, but with some hidden due to a smaller menu container. A scroll bar allows the menu to be scrolled.\"\n state=\"good\"\n caption=\"Set a max-height to constrain the height of the menu and cause its contents to scroll.\"\n/>\n\n### Layout and placement\n\nPopover menus appear adjacent to their triggering element. By default, they appear below and aligned to the left of the trigger element. However, if no space is available, the popover menu will appear above or aligned to the right of the trigger element.\n\n<DoDontCaution\n imageSrc={popoverFig4}\n imageAlt=\"Two examples of popover menus. The first example shows the menu aligned to the left of the screen. The second shows the menu aligned to the right.\"\n state=\"good\"\n caption=\"Popover menus position themselves based on the available space.\"\n/>\n\n## Content\n\nPopover menus contain menu items, menu toggle items, menu groups and menu sections.\n\n### Labels\n\nFollow the [content style](/styles/content-style) guidelines when writing labels and keep them concise but specific.\n\nAlways specify an accessible label for the menu items. The accessible label can include more detail than is described in the visible label.\n\nFor example, a menu item may have a visible label that reads ‘Edit’. The accessible label may read ‘Edit record’. This includes more information to aid assistive technology users.\n\n### Icons\n\nUse an icon on a menu item to provide additional meaning or to aid in recognition. Menu items, menu toggle items and parent menu items can display an icon.\n\nMake sure that the icon is understandable and relevant to the action.\n\nAlways provide alternative descriptions for icons if they aren't decorative. Only use icons if they are necessary.\n\n### Menu items\n\nUse the 'default' variant of menu items for single actions that do not have a selection status.\n\nAdd an additional description to a menu item to provide additional context. Keep the description concise and consider if the action is too complicated if too much information is required to describe the action.\n\nIf a keyboard shortcut is available for a menu item’s action, then display it using the keyboard shortcut label.\n\nUse the 'destructive' variant of a menu item to highlight a destructive action. Position destructive actions at the bottom of a popover menu.\n\nSpecify a menu item as a parent if it has children that appear in a sub-menu. When clicked, the sub-menu will slide into view.\n\n<DoubleDoDontCaution>\n <DoDontCaution\n imageSrc={popoverFig5}\n imageAlt=\"A popover menu showing a set of edit options that include icons and keyboard shortcuts alongside their labels.\"\n state=\"good\"\n caption=\"Use menu items for single actions. Add an icon or a description to provide more context. Highlight keyboard shortcuts using the keyboard shortcut label.\"\n />\n</DoubleDoDontCaution>\n\n### Menu toggle items\n\nUse the 'toggle' variant of menu items for actions that provide an ability to toggle something on or off. Menu toggle items will display a checkmark when toggled on and hide it when toggled off.\n\nLike default menu items, provide an icon or a description to add additional context if required.\n\n<DoubleDoDontCaution>\n <DoDontCaution\n imageSrc={popoverFig6}\n imageAlt=\"A popover menu containing two menu toggle items. Their labels read ‘Show/Hide’ and ‘Lock/Unlock’ and display a tick indicating that they are toggled on.\"\n state=\"good\"\n caption=\"Use menu toggle items to show a selection state alongside the action.\"\n />\n</DoubleDoDontCaution>\n\n### Menu groups\n\nUse menu groups to organise menu items into sections within the popover menu. Provide a label for the menu group to describe its contents. Alternatively, leave the menu group label blank if a description is unnecessary.\n\n<DoubleDoDontCaution>\n <DoDontCaution\n imageSrc={popoverFig7}\n imageAlt=\" A popover menu with a menu group for ‘Edit options’, a menu group for ‘View options’, an untitled menu group containing unrelated actions, and a final untitled menu group containing destructive actions.\"\n state=\"good\"\n caption=\"Use menu groups to create sections within a popover menu.\"\n />\n</DoubleDoDontCaution>\n\n### Parent menu items\n\nUse a parent menu item to open sub-menus that include more menu items. Use this to contain similar actions or options relating to the menu group name.\n\n<video\n class=\"half-width\"\n muted\n controls\n loop\n title=\"An animation showing a popover menu with a parent menu item titled ‘Zoom’. A sub-menu containing menu items for different zoom levels is opened after the ‘zoom’ parent menu item is clicked. After the back button is clicked in the sub-menu the main menu is displayed again.\"\n>\n <source src={popoverVid2} type=\"video/mp4\" />\n</video>\n\n### Sub-menus\n\nUse a sub-menu to contain a parent menu item’s children items. Use sub-menus for multiple related actions that are opened from the main menu.\n\nThe sub-menu displays the same label as the parent menu item. Clicking the back button in a sub-menu will return the user to the parent menu item in the main menu.\n\nUse menu items, toggle menu items, menu groups or parent menu items in a sub-menu but avoid nesting too many levels of sub-menus as this can be confusing to navigate.\n\n<video\n class=\"half-width\"\n muted\n controls\n loop\n title=\"An animation showing a popover menu that contains four parent menu items each with nested parent menu items in their sub-menus. The user clicks ‘help options’ to go into the sub-menu, then clicks ‘information’ to go into a second sub-menu, then clicks ‘tutorials’ to go into a third sub-menu.\"\n>\n <source src={popoverVid3} type=\"video/mp4\" />\n</video>\n\n## Accessibility considerations\n\nWhen specifying the trigger element for a popover menu, make use of ‘aria-expanded’ and ‘aria-collapsed’ so that a screen reader announces the appearance of the popover menu.\n",
"path": "/components/popover-menu",
"navPriority": 25,
"date": "2023-07-31",
@@ -2966,11 +2966,11 @@
}
],
"meta": {
- "relativePath": "components/popover-menu/guidance.mdx",
- "createdAt": "2024-11-06T10:27:49.400Z",
- "lastModified": "2024-11-06T10:19:00.092Z",
- "size": 11283,
- "formattedSize": "11.0 KB"
+ "relativePath": "components\\popover-menu\\guidance.mdx",
+ "createdAt": "2024-12-04T12:10:36.046Z",
+ "lastModified": "2024-12-04T12:10:36.046Z",
+ "size": 11477,
+ "formattedSize": "11.2 KB"
}
},
{
@@ -2997,16 +2997,16 @@
}
],
"meta": {
- "relativePath": "components/radio/accessibility.mdx",
- "createdAt": "2024-11-06T10:27:49.404Z",
- "lastModified": "2024-11-06T10:19:00.112Z",
+ "relativePath": "components\\radio\\accessibility.mdx",
+ "createdAt": "2024-11-05T11:57:52.852Z",
+ "lastModified": "2024-11-05T11:57:52.852Z",
"size": 3539,
"formattedSize": "3.5 KB"
}
},
{
- "id": "components__radio__codex",
- "contents": "\nimport { IcRadioGroup, IcRadioOption, IcTextField } from \"@ukic/react\";\n\n## Component demo\n\nexport const snippets = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-radio-group\n name=\"radio-group-1\"\n label=\"Add a free purchase with any hot drink\"\n>\n <ic-radio-option value=\"crisps\" label=\"Crisps\"></ic-radio-option>\n <ic-radio-option\n value=\"cookie\"\n label=\"Deluxe chocolate chip cookie (sold out)\"\n disabled=\"true\"\n >\n </ic-radio-option>\n <ic-radio-option value=\"fruit\" label=\"Banana\"></ic-radio-option>\n <ic-radio-option\n value=\"No item\"\n label=\"No thanks, just my coffee\"\n ></ic-radio-option>\n</ic-radio-group>`,\n long: `{shortCode} \n<script>\n const radioGroup = document.querySelector(\"[name='radio-group-1']\");\n radioGroup.addEventListener('icChange', (ev) => console.log(ev.detail.value));\n</script>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcRadioGroup name='radio-group-1' label=\"Add a free purchase with any hot drink\" onIcChange={(ev) => console.log(ev.detail.value)}>\n <IcRadioOption value=\"crisps\" label=\"Crisps\" />\n <IcRadioOption\n value=\"cookie\"\n label=\"Deluxe chocolate chip cookie (sold out)\"\n disabled\n />\n <IcRadioOption value=\"fruit\" label=\"Banana\" />\n <IcRadioOption value=\"No item\" label=\"No thanks, just my coffee\" />\n</IcRadioGroup>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `{shortCode}`,\n },\n {\n language: \"Javascript\",\n snippet: `{shortCode}`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview style={{ marginTop: \"1.5rem\" }} snippets={snippets}>\n <IcRadioGroup\n name=\"radio-group-1\"\n label=\"Add a free purchase with any hot drink\"\n onIcChange={(ev) => console.log(ev.detail.value)}\n >\n <IcRadioOption value=\"crisps\" label=\"Crisps\" />\n <IcRadioOption\n value=\"cookie\"\n label=\"Deluxe chocolate chip cookie (sold out)\"\n disabled\n />\n <IcRadioOption value=\"fruit\" label=\"Banana\" />\n <IcRadioOption value=\"No item\" label=\"No thanks, just my coffee\" />\n </IcRadioGroup>\n</ComponentPreview>\n\n## Radio group details\n\n<ComponentDetails component=\"ic-radio-group\" />\n\n## Radio option details\n\n<ComponentDetails component=\"ic-radio-option\" />\n\n## Variants\n\n### Conditional\n\nexport const conditional = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-radio-group\n name=\"radio-group-2\"\n label=\"Do you have any special requests?\"\n>\n <ic-radio-option value=\"request\" label=\"Yes, I want to modify my order\">\n <ic-text-field\n slot=\"additional-field\"\n label=\"Please provide some additional information\"\n placeholder=\"i.e Soya milk please\"\n >\n </ic-text-field>\n </ic-radio-option>\n <ic-radio-option\n value=\"none\"\n label=\"No, standard please\"\n ></ic-radio-option>\n</ic-radio-group>`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcRadioGroup\nlabel=\"Do you have any special requests?\"\nname=\"radio-group-2\"\n>\n <IcRadioOption value=\"request\" label=\"Yes, I want to modify my order\">\n <IcTextField\n slot=\"additional-field\"\n label=\"Please provide some additional information\"\n placeholder=\"i.e Soya milk please\"\n />\n </IcRadioOption>\n <IcRadioOption \n value=\"none\" \n label=\"No, standard please\" \n />\n</IcRadioGroup>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `{shortCode}`,\n },\n {\n language: \"Javascript\",\n snippet: `{shortCode}`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview style={{ marginTop: \"1.5rem\" }} snippets={conditional}>\n <IcRadioGroup name=\"radio-group-2\" label=\"Do you have any special requests?\">\n <IcRadioOption value=\"request\" label=\"Yes, I want to modify my order\">\n <IcTextField\n slot=\"additional-field\"\n label=\"Please provide some additional information\"\n placeholder=\"i.e Soya milk please\"\n />\n </IcRadioOption>\n <IcRadioOption value=\"none\" label=\"No, standard please\" />\n </IcRadioGroup>\n</ComponentPreview>\n\n### Conditional dynamic\n\nexport const conditionalDynamic = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-radio-group\n name=\"radio-group-3\"\n label=\"Do you have any special requests?\"\n>\n <ic-radio-option \n value=\"request\" \n label=\"Yes, I want to modify my order\"\n additional-field-display=\"dynamic\"\n >\n <ic-text-field\n slot=\"additional-field\"\n label=\"Please provide some additional information\"\n placeholder=\"i.e Soya milk please\"\n >\n </ic-text-field>\n </ic-radio-option>\n <ic-radio-option\n value=\"none\"\n label=\"No, standard please\"\n ></ic-radio-option>\n</ic-radio-group>`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcRadioGroup\n name=\"radio-group-3\"\n label=\"Do you have any special requests?\"\n>\n <IcRadioOption \n value=\"request\" \n label=\"Yes, I want to modify my order\" \n additionalFieldDisplay=\"dynamic\"\n >\n <IcTextField\n slot=\"additional-field\"\n label=\"Please provide some additional information\"\n placeholder=\"i.e Soya milk please\"\n />\n </IcRadioOption>\n <IcRadioOption value=\"none\" label=\"No, standard please\" />\n</IcRadioGroup>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `{shortCode}`,\n },\n {\n language: \"Javascript\",\n snippet: `{shortCode}`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={conditionalDynamic}>\n <div style={{ width: \"18.75rem\" }}>\n <IcRadioGroup\n name=\"radio-group-3\"\n label=\"Do you have any special requests?\"\n >\n <IcRadioOption\n additionalFieldDisplay=\"dynamic\"\n value=\"request\"\n label=\"Yes, I want to modify my order\"\n >\n <IcTextField\n slot=\"additional-field\"\n label=\"Please provide some additional information\"\n placeholder=\"i.e Soya milk please\"\n />\n </IcRadioOption>\n <IcRadioOption value=\"none\" label=\"No, standard please\" />\n </IcRadioGroup>\n </div>\n</ComponentPreview>\n\n### With helper text\n\nexport const withHelperText = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-radio-group\n label=\"Do you have any special requests?\"\n helper-text=\"Let us know if you'd like an alternative to dairy milk.\"\n name=\"radio-group-4\"\n>\n <ic-radio-option\n value=\"request\"\n label=\"Yes, I want to modify my order\"\n ></ic-radio-option>\n <ic-radio-option\n value=\"none\"\n label=\"No, standard please\"\n ></ic-radio-option>\n</ic-radio-group>`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcRadioGroup \n label=\"Do you have any special requests?\" \n helperText=\"Let us know if you'd like an alternative to dairy milk.\"\n name='radio-group-4'\n>\n <IcRadioOption value=\"request\" label=\"Yes, I want to modify my order\" />\n <IcRadioOption value=\"none\" label=\"No, standard please\" />\n</IcRadioGroup>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `{shortCode}`,\n },\n {\n language: \"Javascript\",\n snippet: `{shortCode}`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview style={{ marginTop: \"1.5rem\" }} snippets={withHelperText}>\n <IcRadioGroup\n label=\"Do you have any special requests?\"\n helperText=\"Let us know if you'd like an alternative to dairy milk.\"\n name=\"radio-group-4\"\n >\n <IcRadioOption value=\"request\" label=\"Yes, I want to modify my order\" />\n <IcRadioOption value=\"none\" label=\"No, standard please\" />\n </IcRadioGroup>\n</ComponentPreview>\n\n### Size small\n\nexport const smallSnippet = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-radio-group\n label=\"Do you have any special requests?\"\n name=\"radio-group-5\"\n size=\"small\"\n>\n <ic-radio-option\n value=\"request\"\n label=\"Yes, I want to modify my order\"\n ></ic-radio-option>\n <ic-radio-option\n value=\"none\"\n label=\"No, standard please\"\n ></ic-radio-option>\n</ic-radio-group>`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcRadioGroup\n label=\"Do you have any special requests?\"\n name=\"radio-group-5\"\n size=\"small\"\n>\n <IcRadioOption value=\"request\" label=\"Yes, I want to modify my order\" />\n <IcRadioOption value=\"none\" label=\"No, standard please\" />\n</IcRadioGroup>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `{shortCode}`,\n },\n {\n language: \"Javascript\",\n snippet: `{shortCode}`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview style={{ marginTop: \"1.5rem\" }} snippets={smallSnippet}>\n <IcRadioGroup\n label=\"Do you have any special requests?\"\n name=\"radio-group-5\"\n size=\"small\"\n >\n <IcRadioOption value=\"request\" label=\"Yes, I want to modify my order\" />\n <IcRadioOption value=\"none\" label=\"No, standard please\" />\n </IcRadioGroup>\n</ComponentPreview>\n\n### With validation\n\nexport const withValidation = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-radio-group\n name=\"radio-group-6\"\n label=\"Do you have any special requests?\"\n validation-status=\"error\"\n validation-text=\"An answer to this question is required\"\n required=\"true\"\n>\n <ic-radio-option\n value=\"request\"\n label=\"Yes, I want to modify my order\"\n ></ic-radio-option>\n <ic-radio-option\n value=\"none\"\n label=\"No, standard please\"\n ></ic-radio-option>\n</ic-radio-group>`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcRadioGroup\n name=\"radio-group-6\"\n label=\"Do you have any special requests?\"\n validationStatus=\"error\"\n validationText=\"An answer to this question is required\"\n required\n>\n <IcRadioOption value=\"request\" label=\"Yes, I want to modify my order\" />\n <IcRadioOption value=\"none\" label=\"No, standard please\" />\n</IcRadioGroup>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `{shortCode}`,\n },\n {\n language: \"Javascript\",\n snippet: `{shortCode}`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview style={{ marginTop: \"1.5rem\" }} snippets={withValidation}>\n <IcRadioGroup\n label=\"Do you have any special requests?\"\n validationStatus=\"error\"\n validationText=\"An answer to this question is required\"\n required\n name=\"radio-group-6\"\n >\n <IcRadioOption value=\"request\" label=\"Yes, I want to modify my order\" />\n <IcRadioOption value=\"none\" label=\"No, standard please\" />\n </IcRadioGroup>\n</ComponentPreview>\n",
+ "id": "components\\radio\\codex",
+ "contents": "\r\nimport { IcRadioGroup, IcRadioOption, IcTextField } from \"@ukic/react\";\r\n\r\n## Component demo\r\n\r\nexport const snippets = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-radio-group\r\n name=\"radio-group-1\"\r\n label=\"Add a free purchase with any hot drink\"\r\n>\r\n <ic-radio-option value=\"crisps\" label=\"Crisps\"></ic-radio-option>\r\n <ic-radio-option\r\n value=\"cookie\"\r\n label=\"Deluxe chocolate chip cookie (sold out)\"\r\n disabled=\"true\"\r\n >\r\n </ic-radio-option>\r\n <ic-radio-option value=\"fruit\" label=\"Banana\"></ic-radio-option>\r\n <ic-radio-option\r\n value=\"No item\"\r\n label=\"No thanks, just my coffee\"\r\n ></ic-radio-option>\r\n</ic-radio-group>`,\r\n long: `{shortCode} \r\n<script>\r\n const radioGroup = document.querySelector(\"[name='radio-group-1']\");\r\n radioGroup.addEventListener('icChange', (ev) => console.log(ev.detail.value));\r\n</script>`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcRadioGroup name='radio-group-1' label=\"Add a free purchase with any hot drink\" onIcChange={(ev) => console.log(ev.detail.value)}>\r\n <IcRadioOption value=\"crisps\" label=\"Crisps\" />\r\n <IcRadioOption\r\n value=\"cookie\"\r\n label=\"Deluxe chocolate chip cookie (sold out)\"\r\n disabled\r\n />\r\n <IcRadioOption value=\"fruit\" label=\"Banana\" />\r\n <IcRadioOption value=\"No item\" label=\"No thanks, just my coffee\" />\r\n</IcRadioGroup>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `{shortCode}`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `{shortCode}`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview style={{ marginTop: \"1.5rem\" }} snippets={snippets}>\r\n <IcRadioGroup\r\n name=\"radio-group-1\"\r\n label=\"Add a free purchase with any hot drink\"\r\n onIcChange={(ev) => console.log(ev.detail.value)}\r\n >\r\n <IcRadioOption value=\"crisps\" label=\"Crisps\" />\r\n <IcRadioOption\r\n value=\"cookie\"\r\n label=\"Deluxe chocolate chip cookie (sold out)\"\r\n disabled\r\n />\r\n <IcRadioOption value=\"fruit\" label=\"Banana\" />\r\n <IcRadioOption value=\"No item\" label=\"No thanks, just my coffee\" />\r\n </IcRadioGroup>\r\n</ComponentPreview>\r\n\r\n## Radio group details\r\n\r\n<ComponentDetails component=\"ic-radio-group\" />\r\n\r\n## Radio option details\r\n\r\n<ComponentDetails component=\"ic-radio-option\" />\r\n\r\n## Variants\r\n\r\n### Conditional\r\n\r\nexport const conditional = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-radio-group\r\n name=\"radio-group-2\"\r\n label=\"Do you have any special requests?\"\r\n>\r\n <ic-radio-option value=\"request\" label=\"Yes, I want to modify my order\">\r\n <ic-text-field\r\n slot=\"additional-field\"\r\n label=\"Please provide some additional information\"\r\n placeholder=\"i.e Soya milk please\"\r\n >\r\n </ic-text-field>\r\n </ic-radio-option>\r\n <ic-radio-option\r\n value=\"none\"\r\n label=\"No, standard please\"\r\n ></ic-radio-option>\r\n</ic-radio-group>`,\r\n long: `{shortCode}`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcRadioGroup\r\nlabel=\"Do you have any special requests?\"\r\nname=\"radio-group-2\"\r\n>\r\n <IcRadioOption value=\"request\" label=\"Yes, I want to modify my order\">\r\n <IcTextField\r\n slot=\"additional-field\"\r\n label=\"Please provide some additional information\"\r\n placeholder=\"i.e Soya milk please\"\r\n />\r\n </IcRadioOption>\r\n <IcRadioOption \r\n value=\"none\" \r\n label=\"No, standard please\" \r\n />\r\n</IcRadioGroup>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `{shortCode}`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `{shortCode}`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview style={{ marginTop: \"1.5rem\" }} snippets={conditional}>\r\n <IcRadioGroup name=\"radio-group-2\" label=\"Do you have any special requests?\">\r\n <IcRadioOption value=\"request\" label=\"Yes, I want to modify my order\">\r\n <IcTextField\r\n slot=\"additional-field\"\r\n label=\"Please provide some additional information\"\r\n placeholder=\"i.e Soya milk please\"\r\n />\r\n </IcRadioOption>\r\n <IcRadioOption value=\"none\" label=\"No, standard please\" />\r\n </IcRadioGroup>\r\n</ComponentPreview>\r\n\r\n### Conditional dynamic\r\n\r\nexport const conditionalDynamic = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-radio-group\r\n name=\"radio-group-3\"\r\n label=\"Do you have any special requests?\"\r\n>\r\n <ic-radio-option \r\n value=\"request\" \r\n label=\"Yes, I want to modify my order\"\r\n additional-field-display=\"dynamic\"\r\n >\r\n <ic-text-field\r\n slot=\"additional-field\"\r\n label=\"Please provide some additional information\"\r\n placeholder=\"i.e Soya milk please\"\r\n >\r\n </ic-text-field>\r\n </ic-radio-option>\r\n <ic-radio-option\r\n value=\"none\"\r\n label=\"No, standard please\"\r\n ></ic-radio-option>\r\n</ic-radio-group>`,\r\n long: `{shortCode}`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcRadioGroup\r\n name=\"radio-group-3\"\r\n label=\"Do you have any special requests?\"\r\n>\r\n <IcRadioOption \r\n value=\"request\" \r\n label=\"Yes, I want to modify my order\" \r\n additionalFieldDisplay=\"dynamic\"\r\n >\r\n <IcTextField\r\n slot=\"additional-field\"\r\n label=\"Please provide some additional information\"\r\n placeholder=\"i.e Soya milk please\"\r\n />\r\n </IcRadioOption>\r\n <IcRadioOption value=\"none\" label=\"No, standard please\" />\r\n</IcRadioGroup>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `{shortCode}`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `{shortCode}`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview snippets={conditionalDynamic}>\r\n <div style={{ width: \"18.75rem\" }}>\r\n <IcRadioGroup\r\n name=\"radio-group-3\"\r\n label=\"Do you have any special requests?\"\r\n >\r\n <IcRadioOption\r\n additionalFieldDisplay=\"dynamic\"\r\n value=\"request\"\r\n label=\"Yes, I want to modify my order\"\r\n >\r\n <IcTextField\r\n slot=\"additional-field\"\r\n label=\"Please provide some additional information\"\r\n placeholder=\"i.e Soya milk please\"\r\n />\r\n </IcRadioOption>\r\n <IcRadioOption value=\"none\" label=\"No, standard please\" />\r\n </IcRadioGroup>\r\n </div>\r\n</ComponentPreview>\r\n\r\n### With helper text\r\n\r\nexport const withHelperText = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-radio-group\r\n label=\"Do you have any special requests?\"\r\n helper-text=\"Let us know if you'd like an alternative to dairy milk.\"\r\n name=\"radio-group-4\"\r\n>\r\n <ic-radio-option\r\n value=\"request\"\r\n label=\"Yes, I want to modify my order\"\r\n ></ic-radio-option>\r\n <ic-radio-option\r\n value=\"none\"\r\n label=\"No, standard please\"\r\n ></ic-radio-option>\r\n</ic-radio-group>`,\r\n long: `{shortCode}`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcRadioGroup \r\n label=\"Do you have any special requests?\" \r\n helperText=\"Let us know if you'd like an alternative to dairy milk.\"\r\n name='radio-group-4'\r\n>\r\n <IcRadioOption value=\"request\" label=\"Yes, I want to modify my order\" />\r\n <IcRadioOption value=\"none\" label=\"No, standard please\" />\r\n</IcRadioGroup>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `{shortCode}`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `{shortCode}`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview style={{ marginTop: \"1.5rem\" }} snippets={withHelperText}>\r\n <IcRadioGroup\r\n label=\"Do you have any special requests?\"\r\n helperText=\"Let us know if you'd like an alternative to dairy milk.\"\r\n name=\"radio-group-4\"\r\n >\r\n <IcRadioOption value=\"request\" label=\"Yes, I want to modify my order\" />\r\n <IcRadioOption value=\"none\" label=\"No, standard please\" />\r\n </IcRadioGroup>\r\n</ComponentPreview>\r\n\r\n### Size small\r\n\r\nexport const smallSnippet = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-radio-group\r\n label=\"Do you have any special requests?\"\r\n name=\"radio-group-5\"\r\n size=\"small\"\r\n>\r\n <ic-radio-option\r\n value=\"request\"\r\n label=\"Yes, I want to modify my order\"\r\n ></ic-radio-option>\r\n <ic-radio-option\r\n value=\"none\"\r\n label=\"No, standard please\"\r\n ></ic-radio-option>\r\n</ic-radio-group>`,\r\n long: `{shortCode}`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcRadioGroup\r\n label=\"Do you have any special requests?\"\r\n name=\"radio-group-5\"\r\n size=\"small\"\r\n>\r\n <IcRadioOption value=\"request\" label=\"Yes, I want to modify my order\" />\r\n <IcRadioOption value=\"none\" label=\"No, standard please\" />\r\n</IcRadioGroup>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `{shortCode}`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `{shortCode}`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview style={{ marginTop: \"1.5rem\" }} snippets={smallSnippet}>\r\n <IcRadioGroup\r\n label=\"Do you have any special requests?\"\r\n name=\"radio-group-5\"\r\n size=\"small\"\r\n >\r\n <IcRadioOption value=\"request\" label=\"Yes, I want to modify my order\" />\r\n <IcRadioOption value=\"none\" label=\"No, standard please\" />\r\n </IcRadioGroup>\r\n</ComponentPreview>\r\n\r\n### With validation\r\n\r\nexport const withValidation = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-radio-group\r\n name=\"radio-group-6\"\r\n label=\"Do you have any special requests?\"\r\n validation-status=\"error\"\r\n validation-text=\"An answer to this question is required\"\r\n required=\"true\"\r\n>\r\n <ic-radio-option\r\n value=\"request\"\r\n label=\"Yes, I want to modify my order\"\r\n ></ic-radio-option>\r\n <ic-radio-option\r\n value=\"none\"\r\n label=\"No, standard please\"\r\n ></ic-radio-option>\r\n</ic-radio-group>`,\r\n long: `{shortCode}`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcRadioGroup\r\n name=\"radio-group-6\"\r\n label=\"Do you have any special requests?\"\r\n validationStatus=\"error\"\r\n validationText=\"An answer to this question is required\"\r\n required\r\n>\r\n <IcRadioOption value=\"request\" label=\"Yes, I want to modify my order\" />\r\n <IcRadioOption value=\"none\" label=\"No, standard please\" />\r\n</IcRadioGroup>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `{shortCode}`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `{shortCode}`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview style={{ marginTop: \"1.5rem\" }} snippets={withValidation}>\r\n <IcRadioGroup\r\n label=\"Do you have any special requests?\"\r\n validationStatus=\"error\"\r\n validationText=\"An answer to this question is required\"\r\n required\r\n name=\"radio-group-6\"\r\n >\r\n <IcRadioOption value=\"request\" label=\"Yes, I want to modify my order\" />\r\n <IcRadioOption value=\"none\" label=\"No, standard please\" />\r\n </IcRadioGroup>\r\n</ComponentPreview>\r\n",
"path": "/components/radio/code",
"date": "2024-05-31",
"title": "Radio button",
@@ -3028,11 +3028,11 @@
}
],
"meta": {
- "relativePath": "components/radio/code.mdx",
- "createdAt": "2024-11-06T10:27:49.404Z",
- "lastModified": "2024-11-06T10:19:00.112Z",
- "size": 11155,
- "formattedSize": "10.9 KB"
+ "relativePath": "components\\radio\\code.mdx",
+ "createdAt": "2024-12-04T13:23:54.111Z",
+ "lastModified": "2024-12-04T13:23:54.111Z",
+ "size": 11602,
+ "formattedSize": "11.3 KB"
}
},
{
@@ -3060,9 +3060,9 @@
}
],
"meta": {
- "relativePath": "components/radio/guidance.mdx",
- "createdAt": "2024-11-06T10:27:49.404Z",
- "lastModified": "2024-11-06T10:19:00.112Z",
+ "relativePath": "components\\radio\\guidance.mdx",
+ "createdAt": "2024-11-05T11:57:52.933Z",
+ "lastModified": "2024-11-05T11:57:52.933Z",
"size": 8267,
"formattedSize": "8.1 KB"
}
@@ -3091,16 +3091,16 @@
}
],
"meta": {
- "relativePath": "components/search-bar/accessibility.mdx",
- "createdAt": "2024-11-06T10:27:49.408Z",
- "lastModified": "2024-11-06T10:19:00.112Z",
+ "relativePath": "components\\search-bar\\accessibility.mdx",
+ "createdAt": "2024-11-05T11:57:52.963Z",
+ "lastModified": "2024-11-05T11:57:52.963Z",
"size": 3997,
"formattedSize": "3.9 KB"
}
},
{
"id": "components\\search-bar\\codex",
- "contents": "\nimport { IcSearchBar, IcTypography } from \"@ukic/react\";\n\n## Component demo\n\nexport const snippets = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-search-bar label=\"What is your favourite coffee?\"></ic-search-bar>`,\n long: `.parent-container {\n padding: var(--ic-space-md);\n }\n</style>\n<body>\n <div class=\"parent-container\">\n {shortCode}\n </div> \n <script>\n const searchBar = document.querySelector(\"ic-search-bar\");\n searchBar.options = [\n { label: \"Espresso\", value: \"espresso\" },\n { label: \"Double Espresso\", value: \"doubleespresso\" },\n { label: \"Flat White\", value: \"flatwhite\" },\n { label: \"Cappuccino\", value: \"cappuccino\" },\n { label: \"Americano\", value: \"americano\" },\n { label: \"Mocha\", value: \"mocha\" },\n ];\n searchBar.addEventListener('icChange', (ev) => console.log(ev.detail.value));\n searchBar.addEventListener('icSubmitSearch', (ev) => console.log(ev.detail.value))\n placeholder=\"Start typing to search…\"\n </script>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcSearchBar \n label=\"What is your favourite coffee?\"\n options={options}\n onIcChange={(ev) => console.log(ev.detail.value)}\n onIcSubmitSearch={(ev) => console.log(ev.detail.value)}\n placeholder=\"Start typing to search…\"\n/>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const options = [\n { label: \"Espresso\", value: \"espresso\" },\n { label: \"Double Espresso\", value: \"doubleespresso\" },\n { label: \"Flat White\", value: \"flatwhite\" },\n { label: \"Cappuccino\", value: \"cappuccino\" },\n { label: \"Americano\", value: \"americano\" },\n { label: \"Mocha\", value: \"mocha\" },\n];\nconst useStyles = createUseStyles({\n parentContainer: {\n padding: \"var(--ic-space-md)\",\n },\n});\nconst classes = useStyles();\nreturn (\n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const options = [\n { label: \"Espresso\", value: \"espresso\" },\n { label: \"Double Espresso\", value: \"doubleespresso\" },\n { label: \"Flat White\", value: \"flatwhite\" },\n { label: \"Cappuccino\", value: \"cappuccino\" },\n { label: \"Americano\", value: \"americano\" },\n { label: \"Mocha\", value: \"mocha\" },\n];\nconst useStyles = createUseStyles({\n parentContainer: {\n padding: \"var(--ic-space-md)\",\n },\n});\nconst classes = useStyles();\nreturn (\n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={snippets}>\n <IcSearchBar\n label=\"What is your favourite coffee?\"\n options={[\n { label: \"Espresso\", value: \"espresso\" },\n { label: \"Double Espresso\", value: \"doubleespresso\" },\n { label: \"Flat White\", value: \"flatwhite\" },\n { label: \"Cappuccino\", value: \"cappuccino\" },\n { label: \"Americano\", value: \"americano\" },\n { label: \"Mocha\", value: \"mocha\" },\n ]}\n onIcChange={(ev) => console.log(\"onIcChange\", ev.detail.value)}\n onIcSubmitSearch={(ev) => console.log(\"onIcSubmitSearch\", ev.detail.value)}\n placeholder=\"Start typing to search…\"\n />\n</ComponentPreview>\n\n## Search bar details\n\n<ComponentDetails component=\"ic-search-bar\" />\n\n## Variants\n\n### With options (no filtering)\n\nexport const optionsNoFiltering = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-search-bar\n placeholder=\"Start typing to search…\"\n label=\"What is your favourite coffee?\"\n disable-filter=\"true\"\n></ic-search-bar>\n<br>\n<ic-typography>\n <p>All options will be displayed as you type</p>\n</ic-typography>`,\n long: `.parent-container {\n padding: var(--ic-space-md);\n }\n</style>\n<body>\n <div class=\"parent-container\">\n {shortCode}\n </div>\n <script>\n document.querySelector(\"ic-search-bar\").options = [\n { label: \"Espresso\", value: \"espresso\" },\n { label: \"Double Espresso\", value: \"doubleespresso\" },\n { label: \"Flat White\", value: \"flatwhite\" },\n { label: \"Cappuccino\", value: \"cappuccino\" },\n { label: \"Americano\", value: \"americano\" },\n { label: \"Mocha\", value: \"mocha\" },\n ];\n </script>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcSearchBar\n placeholder=\"Start typing to search…\"\n label=\"What is your favourite coffee?\"\n disableFilter\n options={options}\n/>\n<br/>\n<IcTypography>\n <p>All options will be displayed as you type</p>\n</IcTypography>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const options = [\n { label: \"Espresso\", value: \"espresso\" },\n { label: \"Double Espresso\", value: \"doubleespresso\" },\n { label: \"Flat White\", value: \"flatwhite\" },\n { label: \"Cappuccino\", value: \"cappuccino\" },\n { label: \"Americano\", value: \"americano\" },\n { label: \"Mocha\", value: \"mocha\" },\n];\nconst useStyles = createUseStyles({\n parentContainer: {\n padding: \"var(--ic-space-md)\",\n },\n});\nconst classes = useStyles();\nreturn (\n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const options = [\n { label: \"Espresso\", value: \"espresso\" },\n { label: \"Double Espresso\", value: \"doubleespresso\" },\n { label: \"Flat White\", value: \"flatwhite\" },\n { label: \"Cappuccino\", value: \"cappuccino\" },\n { label: \"Americano\", value: \"americano\" },\n { label: \"Mocha\", value: \"mocha\" },\n];\nconst useStyles = createUseStyles({\n parentContainer: {\n padding: \"var(--ic-space-md)\",\n },\n});\nconst classes = useStyles();\nreturn (\n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview\n snippets={optionsNoFiltering}\n style={{ flexDirection: \"column\", alignItems: \"center\" }}\n>\n <IcSearchBar\n placeholder=\"Start typing to search…\"\n label=\"What is your favourite coffee?\"\n disableFilter\n options={[\n { label: \"Espresso\", value: \"espresso\" },\n { label: \"Double Espresso\", value: \"doubleespresso\" },\n { label: \"Flat White\", value: \"flatwhite\" },\n { label: \"Cappuccino\", value: \"cappuccino\" },\n { label: \"Americano\", value: \"americano\" },\n { label: \"Mocha\", value: \"mocha\" },\n ]}\n />\n <br />\n <IcTypography>All options will be displayed as you type</IcTypography>\n</ComponentPreview>\n\n### With helper text\n\nexport const withHelperText = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-search-bar\n placeholder=\"Start typing to search…\"\n label=\"What is your favourite coffee?\"\n helper-text=\"Coffee options will be displayed as you type.\"\n></ic-search-bar>`,\n long: `.parent-container {\n padding: var(--ic-space-md);\n }\n</style>\n<body>\n <div class=\"parent-container\">\n {shortCode}\n </div>\n <script>\n document.querySelector(\"ic-search-bar\").options = [\n { label: \"Espresso\", value: \"espresso\" },\n { label: \"Double Espresso\", value: \"doubleespresso\" },\n { label: \"Flat White\", value: \"flatwhite\" },\n { label: \"Cappuccino\", value: \"cappuccino\" },\n { label: \"Americano\", value: \"americano\" },\n { label: \"Mocha\", value: \"mocha\" },\n ];\n </script>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcSearchBar\n placeholder=\"Start typing to search…\"\n label=\"What is your favourite coffee?\"\n helperText=\"Coffee options will be displayed as you type.\"\n options={options}\n/>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const options = [\n { label: \"Espresso\", value: \"espresso\" },\n { label: \"Double Espresso\", value: \"doubleespresso\" },\n { label: \"Flat White\", value: \"flatwhite\" },\n { label: \"Cappuccino\", value: \"cappuccino\" },\n { label: \"Americano\", value: \"americano\" },\n { label: \"Mocha\", value: \"mocha\" },\n];\nconst useStyles = createUseStyles({\n parentContainer: {\n padding: \"var(--ic-space-md)\",\n },\n});\nconst classes = useStyles();\nreturn (\n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const options = [\n { label: \"Espresso\", value: \"espresso\" },\n { label: \"Double Espresso\", value: \"doubleespresso\" },\n { label: \"Flat White\", value: \"flatwhite\" },\n { label: \"Cappuccino\", value: \"cappuccino\" },\n { label: \"Americano\", value: \"americano\" },\n { label: \"Mocha\", value: \"mocha\" },\n];\nconst useStyles = createUseStyles({\n parentContainer: {\n padding: \"var(--ic-space-md)\",\n },\n});\nconst classes = useStyles();\nreturn (\n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={withHelperText}>\n <IcSearchBar\n placeholder=\"Start typing to search…\"\n label=\"What is your favourite coffee?\"\n helperText=\"Coffee options will be displayed as you type.\"\n options={[\n { label: \"Espresso\", value: \"espresso\" },\n { label: \"Double Espresso\", value: \"doubleespresso\" },\n { label: \"Flat White\", value: \"flatwhite\" },\n { label: \"Cappuccino\", value: \"cappuccino\" },\n { label: \"Americano\", value: \"americano\" },\n { label: \"Mocha\", value: \"mocha\" },\n ]}\n />\n</ComponentPreview>\n\n### With hidden label\n\nexport const withHiddenLabel = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-search-bar\n placeholder=\"Start typing to search…\"\n label=\"What is your favourite coffee?\"\n hide-label=\"true\"\n></ic-search-bar>`,\n long: `.parent-container {\n padding: var(--ic-space-md);\n }\n</style>\n<body>\n <div class=\"parent-container\">\n {shortCode}\n </div>\n <script>\n const searchBar = document.querySelector(\"ic-search-bar\");\n searchBar.options = [\n { label: \"Espresso\", value: \"espresso\" },\n { label: \"Double Espresso\", value: \"doubleespresso\" },\n { label: \"Flat White\", value: \"flatwhite\" },\n { label: \"Cappuccino\", value: \"cappuccino\" },\n { label: \"Americano\", value: \"americano\" },\n { label: \"Mocha\", value: \"mocha\" },\n ];\n </script>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcSearchBar\n placeholder=\"Start typing to search…\"\n label=\"What is your favourite coffee?\"\n hideLabel\n options={options}\n/>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const options = [\n { label: \"Espresso\", value: \"espresso\" },\n { label: \"Double Espresso\", value: \"doubleespresso\" },\n { label: \"Flat White\", value: \"flatwhite\" },\n { label: \"Cappuccino\", value: \"cappuccino\" },\n { label: \"Americano\", value: \"americano\" },\n { label: \"Mocha\", value: \"mocha\" },\n];\nconst useStyles = createUseStyles({\n parentContainer: {\n padding: \"var(--ic-space-md)\",\n },\n});\nconst classes = useStyles();\nreturn (\n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const options = [\n { label: \"Espresso\", value: \"espresso\" },\n { label: \"Double Espresso\", value: \"doubleespresso\" },\n { label: \"Flat White\", value: \"flatwhite\" },\n { label: \"Cappuccino\", value: \"cappuccino\" },\n { label: \"Americano\", value: \"americano\" },\n { label: \"Mocha\", value: \"mocha\" },\n];\nconst useStyles = createUseStyles({\n parentContainer: {\n padding: \"var(--ic-space-md)\",\n },\n});\nconst classes = useStyles();\nreturn (\n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={withHiddenLabel}>\n <IcSearchBar\n placeholder=\"Start typing to search…\"\n label=\"What is your favourite coffee?\"\n hideLabel\n options={[\n { label: \"Espresso\", value: \"espresso\" },\n { label: \"Double Espresso\", value: \"doubleespresso\" },\n { label: \"Flat White\", value: \"flatwhite\" },\n { label: \"Cappuccino\", value: \"cappuccino\" },\n { label: \"Americano\", value: \"americano\" },\n { label: \"Mocha\", value: \"mocha\" },\n ]}\n />\n</ComponentPreview>\n\n### Disabled\n\nexport const disabled = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-search-bar\n label=\"What is your favourite coffee?\"\n disabled=\"true\"\n></ic-search-bar>`,\n long: `.parent-container {\n padding: var(--ic-space-md);\n }\n</style>\n<body>\n <div class=\"parent-container\">\n {shortCode}\n </div>\n <script>\n const searchBar = document.querySelector(\"ic-search-bar\");\n searchBar.options = [\n { label: \"Espresso\", value: \"espresso\" },\n { label: \"Double Espresso\", value: \"doubleespresso\" },\n { label: \"Flat White\", value: \"flatwhite\" },\n { label: \"Cappuccino\", value: \"cappuccino\" },\n { label: \"Americano\", value: \"americano\" },\n { label: \"Mocha\", value: \"mocha\" },\n ];\n </script>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcSearchBar\n label=\"What is your favourite coffee?\"\n disabled\n options={options}\n/>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const options = [\n { label: \"Espresso\", value: \"espresso\" },\n { label: \"Double Espresso\", value: \"doubleespresso\" },\n { label: \"Flat White\", value: \"flatwhite\" },\n { label: \"Cappuccino\", value: \"cappuccino\" },\n { label: \"Americano\", value: \"americano\" },\n { label: \"Mocha\", value: \"mocha\" },\n];\nconst useStyles = createUseStyles({\n parentContainer: {\n padding: \"var(--ic-space-md)\",\n },\n});\nconst classes = useStyles();\nreturn (\n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const options = [\n { label: \"Espresso\", value: \"espresso\" },\n { label: \"Double Espresso\", value: \"doubleespresso\" },\n { label: \"Flat White\", value: \"flatwhite\" },\n { label: \"Cappuccino\", value: \"cappuccino\" },\n { label: \"Americano\", value: \"americano\" },\n { label: \"Mocha\", value: \"mocha\" },\n];\nconst useStyles = createUseStyles({\n parentContainer: {\n padding: \"var(--ic-space-md)\",\n },\n});\nconst classes = useStyles();\nreturn (\n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={disabled}>\n <IcSearchBar\n label=\"What is your favourite coffee?\"\n disabled\n options={[\n { label: \"Espresso\", value: \"espresso\" },\n { label: \"Double Espresso\", value: \"doubleespresso\" },\n { label: \"Flat White\", value: \"flatwhite\" },\n { label: \"Cappuccino\", value: \"cappuccino\" },\n { label: \"Americano\", value: \"americano\" },\n { label: \"Mocha\", value: \"mocha\" },\n ]}\n />\n</ComponentPreview>\n\n### Size small\n\nexport const sizeSmall = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-search-bar\n label=\"What is your favourite coffee?\"\n size=\"small\"\n></ic-search-bar>`,\n long: `.parent-container {\n padding: var(--ic-space-md);\n }\n</style>\n<body>\n <div class=\"parent-container\">\n {shortCode}\n </div>\n <script>\n const searchBar = document.querySelector(\"ic-search-bar\");\n searchBar.options = [\n { label: \"Espresso\", value: \"espresso\" },\n { label: \"Double Espresso\", value: \"doubleespresso\" },\n { label: \"Flat White\", value: \"flatwhite\" },\n { label: \"Cappuccino\", value: \"cappuccino\" },\n { label: \"Americano\", value: \"americano\" },\n { label: \"Mocha\", value: \"mocha\" },\n ];\n </script>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcSearchBar\n label=\"What is your favourite coffee?\"\n size=\"small\"\n options={options}\n/>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const options = [\n { label: \"Espresso\", value: \"espresso\" },\n { label: \"Double Espresso\", value: \"doubleespresso\" },\n { label: \"Flat White\", value: \"flatwhite\" },\n { label: \"Cappuccino\", value: \"cappuccino\" },\n { label: \"Americano\", value: \"americano\" },\n { label: \"Mocha\", value: \"mocha\" },\n];\nconst useStyles = createUseStyles({\n parentContainer: {\n padding: \"var(--ic-space-md)\",\n },\n});\nconst classes = useStyles();\nreturn (\n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const options = [\n { label: \"Espresso\", value: \"espresso\" },\n { label: \"Double Espresso\", value: \"doubleespresso\" },\n { label: \"Flat White\", value: \"flatwhite\" },\n { label: \"Cappuccino\", value: \"cappuccino\" },\n { label: \"Americano\", value: \"americano\" },\n { label: \"Mocha\", value: \"mocha\" },\n];\nconst useStyles = createUseStyles({\n parentContainer: {\n padding: \"var(--ic-space-md)\",\n },\n});\nconst classes = useStyles();\nreturn (\n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={sizeSmall}>\n <IcSearchBar\n label=\"What is your favourite coffee?\"\n size=\"small\"\n options={[\n { label: \"Espresso\", value: \"espresso\" },\n { label: \"Double Espresso\", value: \"doubleespresso\" },\n { label: \"Flat White\", value: \"flatwhite\" },\n { label: \"Cappuccino\", value: \"cappuccino\" },\n { label: \"Americano\", value: \"americano\" },\n { label: \"Mocha\", value: \"mocha\" },\n ]}\n />\n</ComponentPreview>\n\n## Custom filtering example\n\nThis example shows how to filter data asynchronously when the value in the input field changes. The data is mocked and displayed after a one second delay, but could be replaced with a call to an API or database.\n\nexport const customFiltering = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-search-bar\n placeholder=\"Start typing to search…\"\n label=\"What is your favourite coffee?\" \n debounce=\"300\" \n disable-filter=\"true\"\n></ic-search-bar>`,\n long: `.parent-container {\n padding: var(--ic-space-md);\n }\n</style>\n<body>\n <div class=\"parent-container\">\n {shortCode}\n </div>\n <script>\n var mockData = [\n { label: \"Espresso\", value: \"espresso\" },\n { label: \"Double Espresso\", value: \"doubleespresso\" },\n { label: \"Flat White\", value: \"flatwhite\" },\n { label: \"Cappuccino\", value: \"cappucino\" },\n { label: \"Americano\", value: \"americano\" },\n { label: \"Mocha\", value: \"mocha\" },\n ];\n var select = document.querySelector(\"ic-search-bar\");\n select.addEventListener(\"icChange\", function (event) {\n const searchFor = event.detail.value;\n if (searchFor.length > 1) {\n mockAPI = (query) => {\n filteredResults = mockData.filter((item) =>\n item.label.toLowerCase().includes(query.toLowerCase())\n );\n return new Promise((resolve) => {\n setTimeout(() => resolve(filteredResults), 1000)\n });\n };\n mockAPI(searchFor).then((newResults) => { select.options = newResults });\n } else {\n select.options = [];\n }\n });\n </script>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcSearchBar\n placeholder=\"Start typing to search…\"\n label=\"What is your favourite coffee?\"\n debounce={300}\n disableFilter\n options={results}\n onIcChange={changeHandler}\n/>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const mockData = [\n { label: \"Espresso\", value: \"espresso\" },\n { label: \"Double Espresso\", value: \"doubleespresso\" },\n { label: \"Flat White\", value: \"flatwhite\" },\n { label: \"Cappuccino\", value: \"cappucino\" },\n { label: \"Americano\", value: \"americano\" },\n { label: \"Mocha\", value: \"mocha\" },\n];\nconst [results, setResults] = useState<IcMenuOption[]>([]);\nconst changeHandler = (event: { detail: { value: string; }; }) => {\n const searchFor = event.detail.value;\n if (searchFor.length > 1) {\n const mockAPI = (query: string) => {\n const filteredResults = mockData.filter((item) =>\n item.label.toLowerCase().includes(query.toLowerCase()),\n );\n return new Promise<IcMenuOption[]>((resolve) => {\n setTimeout(() => resolve(filteredResults), 1000);\n });\n };\n mockAPI(searchFor).then((newResults: IcMenuOption[]) => setResults(newResults));\n } else {\n setResults([]);\n }\n};\nconst useStyles = createUseStyles({\n parentContainer: {\n padding: \"var(--ic-space-md)\",\n },\n});\nconst classes = useStyles();\nreturn (\n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const mockData = [\n { label: \"Espresso\", value: \"espresso\" },\n { label: \"Double Espresso\", value: \"doubleespresso\" },\n { label: \"Flat White\", value: \"flatwhite\" },\n { label: \"Cappuccino\", value: \"cappucino\" },\n { label: \"Americano\", value: \"americano\" },\n { label: \"Mocha\", value: \"mocha\" },\n];\nconst [results, setResults] = useState([]);\nconst changeHandler = (event) =>{\n const searchFor = event.detail.value;\n if (searchFor.length > 1) {\n const mockAPI = (query) => {\n const filteredResults = mockData.filter((item) =>\n item.label.toLowerCase().includes(query.toLowerCase())\n );\n return new Promise((resolve) => {\n setTimeout(() => resolve(filteredResults), 1000);\n });\n };\n mockAPI(searchFor).then((newResults) => setResults(newResults));\n } else {\n setResults([]);\n }\n}\nconst useStyles = createUseStyles({\n parentContainer: {\n padding: \"var(--ic-space-md)\",\n },\n});\nconst classes = useStyles();\nreturn (\n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n ],\n },\n },\n];\n\nexport const CustomFilterExample = () => {\n const mockData = [\n { label: \"Espresso\", value: \"espresso\" },\n { label: \"Double Espresso\", value: \"doubleespresso\" },\n { label: \"Flat White\", value: \"flatwhite\" },\n { label: \"Cappuccino\", value: \"cappucino\" },\n { label: \"Americano\", value: \"americano\" },\n { label: \"Mocha\", value: \"mocha\" },\n ];\n const [results, setResults] = React.useState([]);\n const changeHandler = (event) => {\n const searchFor = event.detail.value;\n if (searchFor.length > 1) {\n const mockAPI = (query) => {\n const filteredResults = mockData.filter((item) =>\n item.label.toLowerCase().includes(query.toLowerCase())\n );\n return new Promise((resolve) => {\n setTimeout(() => resolve(filteredResults), 1000);\n });\n };\n mockAPI(searchFor).then((newResults) => setResults(newResults));\n } else {\n setResults([]);\n }\n };\n return (\n <IcSearchBar\n placeholder=\"Start typing to search…\"\n label=\"What is your favourite coffee?\"\n debounce=\"300\"\n disableFilter\n options={results}\n onIcChange={changeHandler}\n />\n );\n};\n\n<ComponentPreview snippets={customFiltering}>\n <CustomFilterExample />\n</ComponentPreview>\n",
+ "contents": "\r\nimport { IcSearchBar, IcTypography } from \"@ukic/react\";\r\n\r\n## Component demo\r\n\r\nexport const snippets = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-search-bar label=\"What is your favourite coffee?\"></ic-search-bar>`,\r\n long: `.parent-container {\r\n padding: var(--ic-space-md);\r\n }\r\n</style>\r\n<body>\r\n <div class=\"parent-container\">\r\n {shortCode}\r\n </div> \r\n <script>\r\n const searchBar = document.querySelector(\"ic-search-bar\");\r\n searchBar.options = [\r\n { label: \"Espresso\", value: \"espresso\" },\r\n { label: \"Double Espresso\", value: \"doubleespresso\" },\r\n { label: \"Flat White\", value: \"flatwhite\" },\r\n { label: \"Cappuccino\", value: \"cappuccino\" },\r\n { label: \"Americano\", value: \"americano\" },\r\n { label: \"Mocha\", value: \"mocha\" },\r\n ];\r\n searchBar.addEventListener('icChange', (ev) => console.log(ev.detail.value));\r\n searchBar.addEventListener('icSubmitSearch', (ev) => console.log(ev.detail.value))\r\n placeholder=\"Start typing to search…\"\r\n </script>`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcSearchBar \r\n label=\"What is your favourite coffee?\"\r\n options={options}\r\n onIcChange={(ev) => console.log(ev.detail.value)}\r\n onIcSubmitSearch={(ev) => console.log(ev.detail.value)}\r\n placeholder=\"Start typing to search…\"\r\n/>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `const options = [\r\n { label: \"Espresso\", value: \"espresso\" },\r\n { label: \"Double Espresso\", value: \"doubleespresso\" },\r\n { label: \"Flat White\", value: \"flatwhite\" },\r\n { label: \"Cappuccino\", value: \"cappuccino\" },\r\n { label: \"Americano\", value: \"americano\" },\r\n { label: \"Mocha\", value: \"mocha\" },\r\n];\r\nconst useStyles = createUseStyles({\r\n parentContainer: {\r\n padding: \"var(--ic-space-md)\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nreturn (\r\n <div className={classes.parentContainer}>\r\n {shortCode}\r\n </div>\r\n)`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `const options = [\r\n { label: \"Espresso\", value: \"espresso\" },\r\n { label: \"Double Espresso\", value: \"doubleespresso\" },\r\n { label: \"Flat White\", value: \"flatwhite\" },\r\n { label: \"Cappuccino\", value: \"cappuccino\" },\r\n { label: \"Americano\", value: \"americano\" },\r\n { label: \"Mocha\", value: \"mocha\" },\r\n];\r\nconst useStyles = createUseStyles({\r\n parentContainer: {\r\n padding: \"var(--ic-space-md)\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nreturn (\r\n <div className={classes.parentContainer}>\r\n {shortCode}\r\n </div>\r\n)`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview snippets={snippets}>\r\n <IcSearchBar\r\n label=\"What is your favourite coffee?\"\r\n options={[\r\n { label: \"Espresso\", value: \"espresso\" },\r\n { label: \"Double Espresso\", value: \"doubleespresso\" },\r\n { label: \"Flat White\", value: \"flatwhite\" },\r\n { label: \"Cappuccino\", value: \"cappuccino\" },\r\n { label: \"Americano\", value: \"americano\" },\r\n { label: \"Mocha\", value: \"mocha\" },\r\n ]}\r\n onIcChange={(ev) => console.log(\"onIcChange\", ev.detail.value)}\r\n onIcSubmitSearch={(ev) => console.log(\"onIcSubmitSearch\", ev.detail.value)}\r\n placeholder=\"Start typing to search…\"\r\n />\r\n</ComponentPreview>\r\n\r\n## Search bar details\r\n\r\n<ComponentDetails component=\"ic-search-bar\" />\r\n\r\n## Variants\r\n\r\n### With options (no filtering)\r\n\r\nexport const optionsNoFiltering = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-search-bar\r\n placeholder=\"Start typing to search…\"\r\n label=\"What is your favourite coffee?\"\r\n disable-filter=\"true\"\r\n></ic-search-bar>\r\n<br>\r\n<ic-typography>\r\n <p>All options will be displayed as you type</p>\r\n</ic-typography>`,\r\n long: `.parent-container {\r\n padding: var(--ic-space-md);\r\n }\r\n</style>\r\n<body>\r\n <div class=\"parent-container\">\r\n {shortCode}\r\n </div>\r\n <script>\r\n document.querySelector(\"ic-search-bar\").options = [\r\n { label: \"Espresso\", value: \"espresso\" },\r\n { label: \"Double Espresso\", value: \"doubleespresso\" },\r\n { label: \"Flat White\", value: \"flatwhite\" },\r\n { label: \"Cappuccino\", value: \"cappuccino\" },\r\n { label: \"Americano\", value: \"americano\" },\r\n { label: \"Mocha\", value: \"mocha\" },\r\n ];\r\n </script>`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcSearchBar\r\n placeholder=\"Start typing to search…\"\r\n label=\"What is your favourite coffee?\"\r\n disableFilter\r\n options={options}\r\n/>\r\n<br/>\r\n<IcTypography>\r\n <p>All options will be displayed as you type</p>\r\n</IcTypography>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `const options = [\r\n { label: \"Espresso\", value: \"espresso\" },\r\n { label: \"Double Espresso\", value: \"doubleespresso\" },\r\n { label: \"Flat White\", value: \"flatwhite\" },\r\n { label: \"Cappuccino\", value: \"cappuccino\" },\r\n { label: \"Americano\", value: \"americano\" },\r\n { label: \"Mocha\", value: \"mocha\" },\r\n];\r\nconst useStyles = createUseStyles({\r\n parentContainer: {\r\n padding: \"var(--ic-space-md)\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nreturn (\r\n <div className={classes.parentContainer}>\r\n {shortCode}\r\n </div>\r\n)`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `const options = [\r\n { label: \"Espresso\", value: \"espresso\" },\r\n { label: \"Double Espresso\", value: \"doubleespresso\" },\r\n { label: \"Flat White\", value: \"flatwhite\" },\r\n { label: \"Cappuccino\", value: \"cappuccino\" },\r\n { label: \"Americano\", value: \"americano\" },\r\n { label: \"Mocha\", value: \"mocha\" },\r\n];\r\nconst useStyles = createUseStyles({\r\n parentContainer: {\r\n padding: \"var(--ic-space-md)\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nreturn (\r\n <div className={classes.parentContainer}>\r\n {shortCode}\r\n </div>\r\n)`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview\r\n snippets={optionsNoFiltering}\r\n style={{ flexDirection: \"column\", alignItems: \"center\" }}\r\n>\r\n <IcSearchBar\r\n placeholder=\"Start typing to search…\"\r\n label=\"What is your favourite coffee?\"\r\n disableFilter\r\n options={[\r\n { label: \"Espresso\", value: \"espresso\" },\r\n { label: \"Double Espresso\", value: \"doubleespresso\" },\r\n { label: \"Flat White\", value: \"flatwhite\" },\r\n { label: \"Cappuccino\", value: \"cappuccino\" },\r\n { label: \"Americano\", value: \"americano\" },\r\n { label: \"Mocha\", value: \"mocha\" },\r\n ]}\r\n />\r\n <br />\r\n <IcTypography>All options will be displayed as you type</IcTypography>\r\n</ComponentPreview>\r\n\r\n### With helper text\r\n\r\nexport const withHelperText = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-search-bar\r\n placeholder=\"Start typing to search…\"\r\n label=\"What is your favourite coffee?\"\r\n helper-text=\"Coffee options will be displayed as you type.\"\r\n></ic-search-bar>`,\r\n long: `.parent-container {\r\n padding: var(--ic-space-md);\r\n }\r\n</style>\r\n<body>\r\n <div class=\"parent-container\">\r\n {shortCode}\r\n </div>\r\n <script>\r\n document.querySelector(\"ic-search-bar\").options = [\r\n { label: \"Espresso\", value: \"espresso\" },\r\n { label: \"Double Espresso\", value: \"doubleespresso\" },\r\n { label: \"Flat White\", value: \"flatwhite\" },\r\n { label: \"Cappuccino\", value: \"cappuccino\" },\r\n { label: \"Americano\", value: \"americano\" },\r\n { label: \"Mocha\", value: \"mocha\" },\r\n ];\r\n </script>`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcSearchBar\r\n placeholder=\"Start typing to search…\"\r\n label=\"What is your favourite coffee?\"\r\n helperText=\"Coffee options will be displayed as you type.\"\r\n options={options}\r\n/>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `const options = [\r\n { label: \"Espresso\", value: \"espresso\" },\r\n { label: \"Double Espresso\", value: \"doubleespresso\" },\r\n { label: \"Flat White\", value: \"flatwhite\" },\r\n { label: \"Cappuccino\", value: \"cappuccino\" },\r\n { label: \"Americano\", value: \"americano\" },\r\n { label: \"Mocha\", value: \"mocha\" },\r\n];\r\nconst useStyles = createUseStyles({\r\n parentContainer: {\r\n padding: \"var(--ic-space-md)\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nreturn (\r\n <div className={classes.parentContainer}>\r\n {shortCode}\r\n </div>\r\n)`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `const options = [\r\n { label: \"Espresso\", value: \"espresso\" },\r\n { label: \"Double Espresso\", value: \"doubleespresso\" },\r\n { label: \"Flat White\", value: \"flatwhite\" },\r\n { label: \"Cappuccino\", value: \"cappuccino\" },\r\n { label: \"Americano\", value: \"americano\" },\r\n { label: \"Mocha\", value: \"mocha\" },\r\n];\r\nconst useStyles = createUseStyles({\r\n parentContainer: {\r\n padding: \"var(--ic-space-md)\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nreturn (\r\n <div className={classes.parentContainer}>\r\n {shortCode}\r\n </div>\r\n)`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview snippets={withHelperText}>\r\n <IcSearchBar\r\n placeholder=\"Start typing to search…\"\r\n label=\"What is your favourite coffee?\"\r\n helperText=\"Coffee options will be displayed as you type.\"\r\n options={[\r\n { label: \"Espresso\", value: \"espresso\" },\r\n { label: \"Double Espresso\", value: \"doubleespresso\" },\r\n { label: \"Flat White\", value: \"flatwhite\" },\r\n { label: \"Cappuccino\", value: \"cappuccino\" },\r\n { label: \"Americano\", value: \"americano\" },\r\n { label: \"Mocha\", value: \"mocha\" },\r\n ]}\r\n />\r\n</ComponentPreview>\r\n\r\n### With hidden label\r\n\r\nexport const withHiddenLabel = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-search-bar\r\n placeholder=\"Start typing to search…\"\r\n label=\"What is your favourite coffee?\"\r\n hide-label=\"true\"\r\n></ic-search-bar>`,\r\n long: `.parent-container {\r\n padding: var(--ic-space-md);\r\n }\r\n</style>\r\n<body>\r\n <div class=\"parent-container\">\r\n {shortCode}\r\n </div>\r\n <script>\r\n const searchBar = document.querySelector(\"ic-search-bar\");\r\n searchBar.options = [\r\n { label: \"Espresso\", value: \"espresso\" },\r\n { label: \"Double Espresso\", value: \"doubleespresso\" },\r\n { label: \"Flat White\", value: \"flatwhite\" },\r\n { label: \"Cappuccino\", value: \"cappuccino\" },\r\n { label: \"Americano\", value: \"americano\" },\r\n { label: \"Mocha\", value: \"mocha\" },\r\n ];\r\n </script>`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcSearchBar\r\n placeholder=\"Start typing to search…\"\r\n label=\"What is your favourite coffee?\"\r\n hideLabel\r\n options={options}\r\n/>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `const options = [\r\n { label: \"Espresso\", value: \"espresso\" },\r\n { label: \"Double Espresso\", value: \"doubleespresso\" },\r\n { label: \"Flat White\", value: \"flatwhite\" },\r\n { label: \"Cappuccino\", value: \"cappuccino\" },\r\n { label: \"Americano\", value: \"americano\" },\r\n { label: \"Mocha\", value: \"mocha\" },\r\n];\r\nconst useStyles = createUseStyles({\r\n parentContainer: {\r\n padding: \"var(--ic-space-md)\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nreturn (\r\n <div className={classes.parentContainer}>\r\n {shortCode}\r\n </div>\r\n)`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `const options = [\r\n { label: \"Espresso\", value: \"espresso\" },\r\n { label: \"Double Espresso\", value: \"doubleespresso\" },\r\n { label: \"Flat White\", value: \"flatwhite\" },\r\n { label: \"Cappuccino\", value: \"cappuccino\" },\r\n { label: \"Americano\", value: \"americano\" },\r\n { label: \"Mocha\", value: \"mocha\" },\r\n];\r\nconst useStyles = createUseStyles({\r\n parentContainer: {\r\n padding: \"var(--ic-space-md)\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nreturn (\r\n <div className={classes.parentContainer}>\r\n {shortCode}\r\n </div>\r\n)`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview snippets={withHiddenLabel}>\r\n <IcSearchBar\r\n placeholder=\"Start typing to search…\"\r\n label=\"What is your favourite coffee?\"\r\n hideLabel\r\n options={[\r\n { label: \"Espresso\", value: \"espresso\" },\r\n { label: \"Double Espresso\", value: \"doubleespresso\" },\r\n { label: \"Flat White\", value: \"flatwhite\" },\r\n { label: \"Cappuccino\", value: \"cappuccino\" },\r\n { label: \"Americano\", value: \"americano\" },\r\n { label: \"Mocha\", value: \"mocha\" },\r\n ]}\r\n />\r\n</ComponentPreview>\r\n\r\n### Disabled\r\n\r\nexport const disabled = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-search-bar\r\n label=\"What is your favourite coffee?\"\r\n disabled=\"true\"\r\n></ic-search-bar>`,\r\n long: `.parent-container {\r\n padding: var(--ic-space-md);\r\n }\r\n</style>\r\n<body>\r\n <div class=\"parent-container\">\r\n {shortCode}\r\n </div>\r\n <script>\r\n const searchBar = document.querySelector(\"ic-search-bar\");\r\n searchBar.options = [\r\n { label: \"Espresso\", value: \"espresso\" },\r\n { label: \"Double Espresso\", value: \"doubleespresso\" },\r\n { label: \"Flat White\", value: \"flatwhite\" },\r\n { label: \"Cappuccino\", value: \"cappuccino\" },\r\n { label: \"Americano\", value: \"americano\" },\r\n { label: \"Mocha\", value: \"mocha\" },\r\n ];\r\n </script>`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcSearchBar\r\n label=\"What is your favourite coffee?\"\r\n disabled\r\n options={options}\r\n/>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `const options = [\r\n { label: \"Espresso\", value: \"espresso\" },\r\n { label: \"Double Espresso\", value: \"doubleespresso\" },\r\n { label: \"Flat White\", value: \"flatwhite\" },\r\n { label: \"Cappuccino\", value: \"cappuccino\" },\r\n { label: \"Americano\", value: \"americano\" },\r\n { label: \"Mocha\", value: \"mocha\" },\r\n];\r\nconst useStyles = createUseStyles({\r\n parentContainer: {\r\n padding: \"var(--ic-space-md)\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nreturn (\r\n <div className={classes.parentContainer}>\r\n {shortCode}\r\n </div>\r\n)`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `const options = [\r\n { label: \"Espresso\", value: \"espresso\" },\r\n { label: \"Double Espresso\", value: \"doubleespresso\" },\r\n { label: \"Flat White\", value: \"flatwhite\" },\r\n { label: \"Cappuccino\", value: \"cappuccino\" },\r\n { label: \"Americano\", value: \"americano\" },\r\n { label: \"Mocha\", value: \"mocha\" },\r\n];\r\nconst useStyles = createUseStyles({\r\n parentContainer: {\r\n padding: \"var(--ic-space-md)\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nreturn (\r\n <div className={classes.parentContainer}>\r\n {shortCode}\r\n </div>\r\n)`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview snippets={disabled}>\r\n <IcSearchBar\r\n label=\"What is your favourite coffee?\"\r\n disabled\r\n options={[\r\n { label: \"Espresso\", value: \"espresso\" },\r\n { label: \"Double Espresso\", value: \"doubleespresso\" },\r\n { label: \"Flat White\", value: \"flatwhite\" },\r\n { label: \"Cappuccino\", value: \"cappuccino\" },\r\n { label: \"Americano\", value: \"americano\" },\r\n { label: \"Mocha\", value: \"mocha\" },\r\n ]}\r\n />\r\n</ComponentPreview>\r\n\r\n### Size small\r\n\r\nexport const sizeSmall = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-search-bar\r\n label=\"What is your favourite coffee?\"\r\n size=\"small\"\r\n></ic-search-bar>`,\r\n long: `.parent-container {\r\n padding: var(--ic-space-md);\r\n }\r\n</style>\r\n<body>\r\n <div class=\"parent-container\">\r\n {shortCode}\r\n </div>\r\n <script>\r\n const searchBar = document.querySelector(\"ic-search-bar\");\r\n searchBar.options = [\r\n { label: \"Espresso\", value: \"espresso\" },\r\n { label: \"Double Espresso\", value: \"doubleespresso\" },\r\n { label: \"Flat White\", value: \"flatwhite\" },\r\n { label: \"Cappuccino\", value: \"cappuccino\" },\r\n { label: \"Americano\", value: \"americano\" },\r\n { label: \"Mocha\", value: \"mocha\" },\r\n ];\r\n </script>`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcSearchBar\r\n label=\"What is your favourite coffee?\"\r\n size=\"small\"\r\n options={options}\r\n/>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `const options = [\r\n { label: \"Espresso\", value: \"espresso\" },\r\n { label: \"Double Espresso\", value: \"doubleespresso\" },\r\n { label: \"Flat White\", value: \"flatwhite\" },\r\n { label: \"Cappuccino\", value: \"cappuccino\" },\r\n { label: \"Americano\", value: \"americano\" },\r\n { label: \"Mocha\", value: \"mocha\" },\r\n];\r\nconst useStyles = createUseStyles({\r\n parentContainer: {\r\n padding: \"var(--ic-space-md)\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nreturn (\r\n <div className={classes.parentContainer}>\r\n {shortCode}\r\n </div>\r\n)`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `const options = [\r\n { label: \"Espresso\", value: \"espresso\" },\r\n { label: \"Double Espresso\", value: \"doubleespresso\" },\r\n { label: \"Flat White\", value: \"flatwhite\" },\r\n { label: \"Cappuccino\", value: \"cappuccino\" },\r\n { label: \"Americano\", value: \"americano\" },\r\n { label: \"Mocha\", value: \"mocha\" },\r\n];\r\nconst useStyles = createUseStyles({\r\n parentContainer: {\r\n padding: \"var(--ic-space-md)\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nreturn (\r\n <div className={classes.parentContainer}>\r\n {shortCode}\r\n </div>\r\n)`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview snippets={sizeSmall}>\r\n <IcSearchBar\r\n label=\"What is your favourite coffee?\"\r\n size=\"small\"\r\n options={[\r\n { label: \"Espresso\", value: \"espresso\" },\r\n { label: \"Double Espresso\", value: \"doubleespresso\" },\r\n { label: \"Flat White\", value: \"flatwhite\" },\r\n { label: \"Cappuccino\", value: \"cappuccino\" },\r\n { label: \"Americano\", value: \"americano\" },\r\n { label: \"Mocha\", value: \"mocha\" },\r\n ]}\r\n />\r\n</ComponentPreview>\r\n\r\n## Custom filtering example\r\n\r\nThis example shows how to filter data asynchronously when the value in the input field changes. The data is mocked and displayed after a one second delay, but could be replaced with a call to an API or database.\r\n\r\nexport const customFiltering = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-search-bar\r\n placeholder=\"Start typing to search…\"\r\n label=\"What is your favourite coffee?\" \r\n debounce=\"300\" \r\n disable-filter=\"true\"\r\n></ic-search-bar>`,\r\n long: `.parent-container {\r\n padding: var(--ic-space-md);\r\n }\r\n</style>\r\n<body>\r\n <div class=\"parent-container\">\r\n {shortCode}\r\n </div>\r\n <script>\r\n var mockData = [\r\n { label: \"Espresso\", value: \"espresso\" },\r\n { label: \"Double Espresso\", value: \"doubleespresso\" },\r\n { label: \"Flat White\", value: \"flatwhite\" },\r\n { label: \"Cappuccino\", value: \"cappucino\" },\r\n { label: \"Americano\", value: \"americano\" },\r\n { label: \"Mocha\", value: \"mocha\" },\r\n ];\r\n var select = document.querySelector(\"ic-search-bar\");\r\n select.addEventListener(\"icChange\", function (event) {\r\n const searchFor = event.detail.value;\r\n if (searchFor.length > 1) {\r\n mockAPI = (query) => {\r\n filteredResults = mockData.filter((item) =>\r\n item.label.toLowerCase().includes(query.toLowerCase())\r\n );\r\n return new Promise((resolve) => {\r\n setTimeout(() => resolve(filteredResults), 1000)\r\n });\r\n };\r\n mockAPI(searchFor).then((newResults) => { select.options = newResults });\r\n } else {\r\n select.options = [];\r\n }\r\n });\r\n </script>`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcSearchBar\r\n placeholder=\"Start typing to search…\"\r\n label=\"What is your favourite coffee?\"\r\n debounce={300}\r\n disableFilter\r\n options={results}\r\n onIcChange={changeHandler}\r\n/>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `const mockData = [\r\n { label: \"Espresso\", value: \"espresso\" },\r\n { label: \"Double Espresso\", value: \"doubleespresso\" },\r\n { label: \"Flat White\", value: \"flatwhite\" },\r\n { label: \"Cappuccino\", value: \"cappucino\" },\r\n { label: \"Americano\", value: \"americano\" },\r\n { label: \"Mocha\", value: \"mocha\" },\r\n];\r\nconst [results, setResults] = useState<IcMenuOption[]>([]);\r\nconst changeHandler = (event: { detail: { value: string; }; }) => {\r\n const searchFor = event.detail.value;\r\n if (searchFor.length > 1) {\r\n const mockAPI = (query: string) => {\r\n const filteredResults = mockData.filter((item) =>\r\n item.label.toLowerCase().includes(query.toLowerCase()),\r\n );\r\n return new Promise<IcMenuOption[]>((resolve) => {\r\n setTimeout(() => resolve(filteredResults), 1000);\r\n });\r\n };\r\n mockAPI(searchFor).then((newResults: IcMenuOption[]) => setResults(newResults));\r\n } else {\r\n setResults([]);\r\n }\r\n};\r\nconst useStyles = createUseStyles({\r\n parentContainer: {\r\n padding: \"var(--ic-space-md)\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nreturn (\r\n <div className={classes.parentContainer}>\r\n {shortCode}\r\n </div>\r\n)`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `const mockData = [\r\n { label: \"Espresso\", value: \"espresso\" },\r\n { label: \"Double Espresso\", value: \"doubleespresso\" },\r\n { label: \"Flat White\", value: \"flatwhite\" },\r\n { label: \"Cappuccino\", value: \"cappucino\" },\r\n { label: \"Americano\", value: \"americano\" },\r\n { label: \"Mocha\", value: \"mocha\" },\r\n];\r\nconst [results, setResults] = useState([]);\r\nconst changeHandler = (event) =>{\r\n const searchFor = event.detail.value;\r\n if (searchFor.length > 1) {\r\n const mockAPI = (query) => {\r\n const filteredResults = mockData.filter((item) =>\r\n item.label.toLowerCase().includes(query.toLowerCase())\r\n );\r\n return new Promise((resolve) => {\r\n setTimeout(() => resolve(filteredResults), 1000);\r\n });\r\n };\r\n mockAPI(searchFor).then((newResults) => setResults(newResults));\r\n } else {\r\n setResults([]);\r\n }\r\n}\r\nconst useStyles = createUseStyles({\r\n parentContainer: {\r\n padding: \"var(--ic-space-md)\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nreturn (\r\n <div className={classes.parentContainer}>\r\n {shortCode}\r\n </div>\r\n)`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\nexport const CustomFilterExample = () => {\r\n const mockData = [\r\n { label: \"Espresso\", value: \"espresso\" },\r\n { label: \"Double Espresso\", value: \"doubleespresso\" },\r\n { label: \"Flat White\", value: \"flatwhite\" },\r\n { label: \"Cappuccino\", value: \"cappucino\" },\r\n { label: \"Americano\", value: \"americano\" },\r\n { label: \"Mocha\", value: \"mocha\" },\r\n ];\r\n const [results, setResults] = React.useState([]);\r\n const changeHandler = (event) => {\r\n const searchFor = event.detail.value;\r\n if (searchFor.length > 1) {\r\n const mockAPI = (query) => {\r\n const filteredResults = mockData.filter((item) =>\r\n item.label.toLowerCase().includes(query.toLowerCase())\r\n );\r\n return new Promise((resolve) => {\r\n setTimeout(() => resolve(filteredResults), 1000);\r\n });\r\n };\r\n mockAPI(searchFor).then((newResults) => setResults(newResults));\r\n } else {\r\n setResults([]);\r\n }\r\n };\r\n return (\r\n <IcSearchBar\r\n placeholder=\"Start typing to search…\"\r\n label=\"What is your favourite coffee?\"\r\n debounce=\"300\"\r\n disableFilter\r\n options={results}\r\n onIcChange={changeHandler}\r\n />\r\n );\r\n};\r\n\r\n<ComponentPreview snippets={customFiltering}>\r\n <CustomFilterExample />\r\n</ComponentPreview>\r\n",
"path": "/components/search-bar/code",
"date": "2024-05-31",
"title": "Search bar",
@@ -3122,16 +3122,16 @@
}
],
"meta": {
- "relativePath": "components/search-bar/code.mdx",
- "createdAt": "2024-11-06T10:27:49.408Z",
- "lastModified": "2024-11-06T10:19:00.112Z",
- "size": 23254,
- "formattedSize": "22.7 KB"
+ "relativePath": "components\\search-bar\\code.mdx",
+ "createdAt": "2024-12-04T13:23:54.112Z",
+ "lastModified": "2024-12-04T13:23:54.112Z",
+ "size": 24118,
+ "formattedSize": "23.6 KB"
}
},
{
"id": "components\\search-bar\\guidancex",
- "contents": "\nimport { IcSearchBar } from \"@ukic/react\";\nimport searchBarFig1 from \"./images/fig-1-dont-display-large-numbers-of-search-results-in-droplist.png\";\nimport searchBarFig3 from \"./images/fig-3-search-field-with-helpful-placeholder.png\";\nimport searchBarFig4 from \"./images/fig-4-search-field-with-unhelpful-placeholder.png\";\nimport searchBarFig5 from \"./images/fig-5-suggested-options-loading-state.png\";\nimport searchBarFig6 from \"./images/fig-6-suggested-options-empty-state.png\";\n\n## Introduction\n\nAn example of the search bar component.\n\n<ComponentPreview>\n <IcSearchBar\n label=\"What is your favourite coffee?\"\n options={[\n { label: \"Espresso\", value: \"espresso\" },\n { label: \"Double Espresso\", value: \"doubleespresso\" },\n { label: \"Flat White\", value: \"flatwhite\" },\n { label: \"Cappuccino\", value: \"cappuccino\" },\n { label: \"Americano\", value: \"americano\" },\n { label: \"Mocha\", value: \"mocha\" },\n ]}\n onIcChange={(ev) => console.log(\"onIcChange\", ev.detail.value)}\n onIcSubmitSearch={(ev) => console.log(\"onIcSubmitSearch\", ev.detail.value)}\n placeholder=\"Start typing to search…\"\n />\n</ComponentPreview>\n\n## When to use\n\n### Search bar with results\n\nUse the search bar with search results for automatically displaying search results relating to the input query in the input field. Use this for searching through a known data set, such as a site search displaying individual pages as the search results (like the search on this website).\n\nSearch for an ‘espresso’ below in the search bar example.\n\n<ComponentPreview>\n <IcSearchBar\n label=\"What is your favourite coffee?\"\n options={[\n { label: \"Espresso\", value: \"espresso\" },\n { label: \"Double Espresso\", value: \"doubleespresso\" },\n { label: \"Flat White\", value: \"flatwhite\" },\n { label: \"Cappuccino\", value: \"cappuccino\" },\n { label: \"Americano\", value: \"americano\" },\n { label: \"Mocha\", value: \"mocha\" },\n ]}\n />\n</ComponentPreview>\n\n### Search bar with suggested options\n\nUse the search bar with suggested options to provide search term suggestions in the drop-list. Use this type of search when you don't want to show actual search results, but instead possible or common search terms that will form the search query when submitted.\n\nUsers may select a suggested option or they may continue with searching on the term they have entered.\n\nWhen displaying suggested options, order them in the most helpful way and use the same formatting for each option presented.\n\n### Search bar only\n\nUse a search bar without a drop-list when you want to handle the search operation yourself. Use this to capture a search term and then direct a user to a custom search results page for the input query.\n\n<ComponentPreview>\n <IcSearchBar label=\"What is your favourite coffee?\" />\n</ComponentPreview>\n\n## When not to use\n\nDon't use a search bar with search results if you are likely to need additional filters and advanced search settings. It's better to use a search bar with a custom search results page in this case.\n\nTake care when using a search bar with search results when you have large, complex data sets that take time to load. This can cause excessive loading times and it's best to use a custom search results page to handle and display large numbers of results.\n\n<DoubleDoDontCaution>\n <DoDontCaution\n imageSrc={searchBarFig1}\n imageAlt=\"A search bar with a large number of results causing long scroll length.\"\n state=\"bad\"\n caption=\"Avoid showing long lists of results in a search bar's search results.\"\n />\n</DoubleDoDontCaution>\n\nDon't use a search bar on its own, or a search bar with suggested options, if you don't have a method of displaying the results. Always include a search results page if you aren't using the search bar with search results.\n\n## Sizing\n\nUse the default and small size options for search bars to match their size to other components in your app.\n\n## Content\n\nUse clear and specific placeholder text that informs the user on the context and scope of the search.\n\n<DoubleDoDontCaution>\n <DoDontCaution\n imageSrc={searchBarFig3}\n imageAlt=\"An example of helpful search placeholder text outlining 'search coffee drinks'.\"\n state=\"good\"\n caption=\"Use helpful placeholder text within a search bar to describe what the user is searching for.\"\n />\n <DoDontCaution\n imageSrc={searchBarFig4}\n imageAlt=\"An example of unhelpful search placeholder text outlining 'coffee'.\"\n state=\"bad\"\n caption=\"Don't use generic placeholder text.\"\n />\n</DoubleDoDontCaution>\n\nFor searches that take time to load results or suggestions, display the loading state whilst the search is loading. Use the empty state for searches that have no results or suggested options.\n\n<DoubleDoDontCaution>\n <DoDontCaution\n imageSrc={searchBarFig5}\n imageAlt=\"A search bar with an entered search term that displays a loading indicator whilst the search is occurring.\"\n state=\"good\"\n caption=\"Use the loading state whilst results load.\"\n />\n <DoDontCaution\n imageSrc={searchBarFig6}\n imageAlt=\"A search bar with an entered search term that has no search results.\"\n state=\"good\"\n caption=\"Tell the user when their search term yields no results.\"\n />\n</DoubleDoDontCaution>\n",
+ "contents": "\r\nimport { IcSearchBar } from \"@ukic/react\";\r\nimport searchBarFig1 from \"./images/fig-1-dont-display-large-numbers-of-search-results-in-droplist.png\";\r\nimport searchBarFig3 from \"./images/fig-3-search-field-with-helpful-placeholder.png\";\r\nimport searchBarFig4 from \"./images/fig-4-search-field-with-unhelpful-placeholder.png\";\r\nimport searchBarFig5 from \"./images/fig-5-suggested-options-loading-state.png\";\r\nimport searchBarFig6 from \"./images/fig-6-suggested-options-empty-state.png\";\r\n\r\n## Introduction\r\n\r\nAn example of the search bar component.\r\n\r\n<ComponentPreview>\r\n <IcSearchBar\r\n label=\"What is your favourite coffee?\"\r\n options={[\r\n { label: \"Espresso\", value: \"espresso\" },\r\n { label: \"Double Espresso\", value: \"doubleespresso\" },\r\n { label: \"Flat White\", value: \"flatwhite\" },\r\n { label: \"Cappuccino\", value: \"cappuccino\" },\r\n { label: \"Americano\", value: \"americano\" },\r\n { label: \"Mocha\", value: \"mocha\" },\r\n ]}\r\n onIcChange={(ev) => console.log(\"onIcChange\", ev.detail.value)}\r\n onIcSubmitSearch={(ev) => console.log(\"onIcSubmitSearch\", ev.detail.value)}\r\n placeholder=\"Start typing to search…\"\r\n />\r\n</ComponentPreview>\r\n\r\n## When to use\r\n\r\n### Search bar with results\r\n\r\nUse the search bar with search results for automatically displaying search results relating to the input query in the input field. Use this for searching through a known data set, such as a site search displaying individual pages as the search results (like the search on this website).\r\n\r\nSearch for an ‘espresso’ below in the search bar example.\r\n\r\n<ComponentPreview>\r\n <IcSearchBar\r\n label=\"What is your favourite coffee?\"\r\n options={[\r\n { label: \"Espresso\", value: \"espresso\" },\r\n { label: \"Double Espresso\", value: \"doubleespresso\" },\r\n { label: \"Flat White\", value: \"flatwhite\" },\r\n { label: \"Cappuccino\", value: \"cappuccino\" },\r\n { label: \"Americano\", value: \"americano\" },\r\n { label: \"Mocha\", value: \"mocha\" },\r\n ]}\r\n />\r\n</ComponentPreview>\r\n\r\n### Search bar with suggested options\r\n\r\nUse the search bar with suggested options to provide search term suggestions in the drop-list. Use this type of search when you don't want to show actual search results, but instead possible or common search terms that will form the search query when submitted.\r\n\r\nUsers may select a suggested option or they may continue with searching on the term they have entered.\r\n\r\nWhen displaying suggested options, order them in the most helpful way and use the same formatting for each option presented.\r\n\r\n### Search bar only\r\n\r\nUse a search bar without a drop-list when you want to handle the search operation yourself. Use this to capture a search term and then direct a user to a custom search results page for the input query.\r\n\r\n<ComponentPreview>\r\n <IcSearchBar label=\"What is your favourite coffee?\" />\r\n</ComponentPreview>\r\n\r\n## When not to use\r\n\r\nDon't use a search bar with search results if you are likely to need additional filters and advanced search settings. It's better to use a search bar with a custom search results page in this case.\r\n\r\nTake care when using a search bar with search results when you have large, complex data sets that take time to load. This can cause excessive loading times and it's best to use a custom search results page to handle and display large numbers of results.\r\n\r\n<DoubleDoDontCaution>\r\n <DoDontCaution\r\n imageSrc={searchBarFig1}\r\n imageAlt=\"A search bar with a large number of results causing long scroll length.\"\r\n state=\"bad\"\r\n caption=\"Avoid showing long lists of results in a search bar's search results.\"\r\n />\r\n</DoubleDoDontCaution>\r\n\r\nDon't use a search bar on its own, or a search bar with suggested options, if you don't have a method of displaying the results. Always include a search results page if you aren't using the search bar with search results.\r\n\r\n## Sizing\r\n\r\nUse the default and small size options for search bars to match their size to other components in your app.\r\n\r\n## Content\r\n\r\nUse clear and specific placeholder text that informs the user on the context and scope of the search.\r\n\r\n<DoubleDoDontCaution>\r\n <DoDontCaution\r\n imageSrc={searchBarFig3}\r\n imageAlt=\"An example of helpful search placeholder text outlining 'search coffee drinks'.\"\r\n state=\"good\"\r\n caption=\"Use helpful placeholder text within a search bar to describe what the user is searching for.\"\r\n />\r\n <DoDontCaution\r\n imageSrc={searchBarFig4}\r\n imageAlt=\"An example of unhelpful search placeholder text outlining 'coffee'.\"\r\n state=\"bad\"\r\n caption=\"Don't use generic placeholder text.\"\r\n />\r\n</DoubleDoDontCaution>\r\n\r\nFor searches that take time to load results or suggestions, display the loading state whilst the search is loading. Use the empty state for searches that have no results or suggested options.\r\n\r\n<DoubleDoDontCaution>\r\n <DoDontCaution\r\n imageSrc={searchBarFig5}\r\n imageAlt=\"A search bar with an entered search term that displays a loading indicator whilst the search is occurring.\"\r\n state=\"good\"\r\n caption=\"Use the loading state whilst results load.\"\r\n />\r\n <DoDontCaution\r\n imageSrc={searchBarFig6}\r\n imageAlt=\"A search bar with an entered search term that has no search results.\"\r\n state=\"good\"\r\n caption=\"Tell the user when their search term yields no results.\"\r\n />\r\n</DoubleDoDontCaution>\r\n",
"path": "/components/search-bar",
"navPriority": 27,
"date": "2023-02-03",
@@ -3155,11 +3155,11 @@
],
"tags": ["Search input"],
"meta": {
- "relativePath": "components/search-bar/guidance.mdx",
- "createdAt": "2024-11-06T10:27:49.408Z",
- "lastModified": "2024-11-06T10:19:00.112Z",
- "size": 5859,
- "formattedSize": "5.7 KB"
+ "relativePath": "components\\search-bar\\guidance.mdx",
+ "createdAt": "2024-12-04T13:23:54.112Z",
+ "lastModified": "2024-12-04T13:23:54.112Z",
+ "size": 6006,
+ "formattedSize": "5.9 KB"
}
},
{
@@ -3186,9 +3186,9 @@
}
],
"meta": {
- "relativePath": "components/section-container/accessibility.mdx",
- "createdAt": "2024-11-06T10:27:49.408Z",
- "lastModified": "2024-11-06T10:19:00.116Z",
+ "relativePath": "components\\section-container\\accessibility.mdx",
+ "createdAt": "2024-11-05T11:57:53.068Z",
+ "lastModified": "2024-11-05T11:57:53.068Z",
"size": 1920,
"formattedSize": "1.9 KB"
}
@@ -3217,9 +3217,9 @@
}
],
"meta": {
- "relativePath": "components/section-container/code.mdx",
- "createdAt": "2024-11-06T10:27:49.408Z",
- "lastModified": "2024-11-06T10:19:00.116Z",
+ "relativePath": "components\\section-container\\code.mdx",
+ "createdAt": "2024-11-05T11:57:53.097Z",
+ "lastModified": "2024-11-05T11:57:53.097Z",
"size": 9524,
"formattedSize": "9.3 KB"
}
@@ -3249,9 +3249,9 @@
}
],
"meta": {
- "relativePath": "components/section-container/guidance.mdx",
- "createdAt": "2024-11-06T10:27:49.408Z",
- "lastModified": "2024-11-06T10:19:00.116Z",
+ "relativePath": "components\\section-container\\guidance.mdx",
+ "createdAt": "2024-11-05T11:57:53.131Z",
+ "lastModified": "2024-11-05T11:57:53.131Z",
"size": 5577,
"formattedSize": "5.4 KB"
}
@@ -3280,16 +3280,16 @@
}
],
"meta": {
- "relativePath": "components/select/accessibility.mdx",
- "createdAt": "2024-11-06T10:27:49.408Z",
- "lastModified": "2024-11-06T10:19:00.116Z",
+ "relativePath": "components\\select\\accessibility.mdx",
+ "createdAt": "2024-11-05T11:57:53.151Z",
+ "lastModified": "2024-11-05T11:57:53.151Z",
"size": 2736,
"formattedSize": "2.7 KB"
}
},
{
"id": "components\\select\\codex",
- "contents": "\nimport { IcSelect } from \"@ukic/react\";\n\n## Component demo\n\nexport const snippets = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-select \n placeholder=\"Select an option...\" \n label=\"What is your favourite coffee?\"\n></ic-select>`,\n long: `{shortCode}\n<script>\n const select = document.querySelector(\"ic-select\");\n let option = \"Cappuccino\";\n select.options = [\n { label: \"Espresso\", value: \"espresso\" },\n { label: \"Double Espresso\", value: \"doubleespresso\" },\n { label: \"Flat White\", value: \"flatwhite\" },\n { label: \"Cappuccino\", value: \"cappuccino\" },\n { label: \"Americano\", value: \"americano\" },\n { label: \"Mocha\", value: \"mocha\" },\n ];\n select.addEventListener(\"icChange\", function (event) {\n console.log(event.detail.value);\n });\n</script>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcSelect\n placeholder=\"Select an option...\" \n label=\"What is your favourite coffee?\"\n options={options}\n onIcChange={(event) => console.log(event.detail.value)}\n/>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const options = [\n { label: \"Espresso\", value: \"espresso\" },\n { label: \"Double Espresso\", value: \"doubleespresso\" },\n { label: \"Flat White\", value: \"flatwhite\" },\n { label: \"Cappuccino\", value: \"cappuccino\" },\n { label: \"Americano\", value: \"americano\" },\n { label: \"Mocha\", value: \"mocha\" },\n];\nreturn (\n {shortCode}\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const options = [\n { label: \"Espresso\", value: \"espresso\" },\n { label: \"Double Espresso\", value: \"doubleespresso\" },\n { label: \"Flat White\", value: \"flatwhite\" },\n { label: \"Cappuccino\", value: \"cappuccino\" },\n { label: \"Americano\", value: \"americano\" },\n { label: \"Mocha\", value: \"mocha\" },\n];\nreturn (\n {shortCode}\n)`,\n },\n ],\n },\n },\n];\n\nexport const SelectExample = () => (\n <IcSelect\n placeholder=\"Select an option...\"\n label=\"What is your favourite coffee?\"\n options={[\n { label: \"Espresso\", value: \"espresso\" },\n { label: \"Double Espresso\", value: \"doubleespresso\" },\n { label: \"Flat White\", value: \"flatwhite\" },\n { label: \"Cappuccino\", value: \"cappuccino\" },\n { label: \"Americano\", value: \"americano\" },\n { label: \"Mocha\", value: \"mocha\" },\n ]}\n onIcChange={(event) => console.log(event.detail.value)}\n />\n);\n\n<ComponentPreview snippets={snippets}>\n <SelectExample />\n</ComponentPreview>\n\n## Select details\n\n<ComponentDetails component=\"ic-select\" />\n\n## Variants\n\n### With clear button, descriptions, helper text and custom placeholder\n\nexport const snippetsWithExtras = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-select \n label=\"What is your favourite coffee?\" \n placeholder=\"Select an option...\" \n helper-text=\"Select one option from the list\" \n show-clear-button=\"true\" \n searchable=\"true\"\n></ic-select>`,\n long: `{shortCode}\n<script>\n const select = document.querySelector(\"ic-select\");\n let option = \"Cappuccino\";\n select.options = [\n { label: \"Cappuccino\", value: \"cappuccino\", description: \"Coffee frothed up with pressurised steam\" },\n { label: \"Americano\", value: \"americano\", description: \"Espresso coffee diluted with hot water\" },\n { label: \"Mocha\", value: \"mocha\", description: \"Coffee with chocolate\" },\n ];\n select.addEventListener(\"icChange\", function (event) {\n console.log(event.detail.value);\n });\n</script>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcSelect \n label=\"What is your favourite coffee?\"\n options={options}\n placeholder=\"Select an option…\"\n helperText=\"Select one option from the list\"\n showClearButton\n searchable\n onIcChange={(event) => console.log(event.detail.value)}\n/>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const options = [\n { label: \"Cappuccino\", value: \"cappuccino\", description: \"Coffee frothed up with pressurised steam\" },\n { label: \"Americano\", value: \"americano\", description: \"Espresso coffee diluted with hot water\" },\n { label: \"Mocha\", value: \"mocha\", description: \"Coffee with chocolate\" },\n];\nreturn (\n {shortCode}\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const options = [\n { label: \"Cappuccino\", value: \"cappuccino\", description: \"Coffee frothed up with pressurised steam\" },\n { label: \"Americano\", value: \"americano\", description: \"Espresso coffee diluted with hot water\" },\n { label: \"Mocha\", value: \"mocha\", description: \"Coffee with chocolate\" },\n];\nreturn (\n {shortCode}\n)`,\n },\n ],\n },\n },\n];\n\nexport const SelectExampleWithExtras = () => (\n <IcSelect\n label=\"What is your favourite coffee?\"\n options={[\n {\n label: \"Cappuccino\",\n value: \"cappuccino\",\n description: \"Coffee frothed up with pressurised steam\",\n },\n {\n label: \"Americano\",\n value: \"americano\",\n description: \"Espresso coffee diluted with hot water\",\n },\n {\n label: \"Mocha\",\n value: \"mocha\",\n description: \"Coffee with chocolate\",\n },\n ]}\n placeholder=\"Select an option…\"\n helperText=\"Select one option from the list\"\n showClearButton\n searchable\n onIcChange={(event) => console.log(event.detail.value)}\n />\n);\n\n<ComponentPreview snippets={snippetsWithExtras}>\n <SelectExampleWithExtras />\n</ComponentPreview>\n\n### Disabled\n\nexport const snippetsDisabled = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-select \n placeholder=\"Select an option…\" \n label=\"What is your favourite coffee?\" \n disabled=\"true\"\n></ic-select>`,\n long: `{shortCode}\n<script>\n const select = document.querySelector(\"ic-select\");\n let option = \"Cappuccino\";\n select.options = [\n { label: \"Cappuccino\", value: \"cappuccino\" },\n { label: \"Americano\", value: \"americano\" },\n { label: \"Mocha\", value: \"mocha\" },\n ];\n select.addEventListener(\"icChange\", function (event) {\n console.log(event.detail.value);\n });\n</script>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcSelect \n placeholder=\"Select an option…\" \n label=\"What is your favourite coffee?\"\n options={options}\n disabled\n onIcChange={(event) => console.log(event.detail.value)}\n/>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const options = [\n { label: \"Cappuccino\", value: \"cappuccino\" },\n { label: \"Americano\", value: \"americano\" },\n { label: \"Mocha\", value: \"mocha\" },\n];\nreturn (\n {shortCode}\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const options = [\n { label: \"Cappuccino\", value: \"cappuccino\" },\n { label: \"Americano\", value: \"americano\" },\n { label: \"Mocha\", value: \"mocha\" },\n];\nreturn (\n {shortCode}\n)`,\n },\n ],\n },\n },\n];\n\nexport const SelectExampleDisabled = () => (\n <IcSelect\n placeholder=\"Select an option…\"\n label=\"What is your favourite coffee?\"\n options={[\n { label: \"Cappuccino\", value: \"cappuccino\" },\n { label: \"Americano\", value: \"americano\" },\n { label: \"Mocha\", value: \"mocha\" },\n ]}\n disabled\n onIcChange={(event) => console.log(event.detail.value)}\n />\n);\n\n<ComponentPreview snippets={snippetsDisabled}>\n <SelectExampleDisabled />\n</ComponentPreview>\n\n### Options disabled\n\nexport const snippetsOptionDisabled = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-select \n placeholder=\"Select an option…\" \n label=\"What is your favourite coffee?\"\n></ic-select>`,\n long: `{shortCode}\n<script>\n const select = document.querySelector(\"ic-select\");\n let option = \"Cappuccino\";\n select.options = [\n { label: \"Cappuccino\", value: \"cappuccino\" },\n { label: \"Americano\", value: \"americano\", disabled: true },\n { label: \"Mocha\", value: \"mocha\" },\n ];\n select.addEventListener(\"icChange\", function (event) {\n console.log(event.detail.value);\n });\n</script>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcSelect \n placeholder=\"Select an option…\" \n label=\"What is your favourite coffee?\"\n options={options}\n onIcChange={(event) => console.log(event.detail.value)}\n/>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const options = [\n { label: \"Cappuccino\", value: \"cappuccino\" },\n { label: \"Americano\", value: \"americano\", disabled: true },\n { label: \"Mocha\", value: \"mocha\" },\n];\nreturn (\n {shortCode}\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const options = [\n { label: \"Cappuccino\", value: \"cappuccino\" },\n { label: \"Americano\", value: \"americano\", disabled: true },\n { label: \"Mocha\", value: \"mocha\" },\n];\nreturn (\n {shortCode}\n)`,\n },\n ],\n },\n },\n];\n\nexport const SelectExampleOptionsDisabled = () => (\n <IcSelect\n placeholder=\"Select an option…\"\n label=\"What is your favourite coffee?\"\n options={[\n { label: \"Cappuccino\", value: \"cappuccino\" },\n { label: \"Americano\", value: \"americano\", disabled: true },\n { label: \"Mocha\", value: \"mocha\" },\n ]}\n onIcChange={(event) => console.log(event.detail.value)}\n />\n);\n\n<ComponentPreview snippets={snippetsOptionDisabled}>\n <SelectExampleOptionsDisabled />\n</ComponentPreview>\n\n### With icon\n\nexport const snippetsWithIcon = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-select \n label=\"What is your favourite coffee?\" \n>\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n fill=\"#000000\"\n >\n <path d=\"M2,21H20V19H2M20,8H18V5H20M20,3H4V13A4,4 0 0,0 8,17H14A4,4 0 0,0 18,13V10H20A2,2 0 0,0 22,8V5C22,3.89 21.1,3 20,3Z\" />\n </svg>\n</ic-select>`,\n long: `{shortCode}\n<script>\n const select = document.querySelector(\"ic-select\");\n let option = \"Cappuccino\";\n select.options = [\n { label: \"Cappuccino\", value: \"cappuccino\", description: \"Coffee frothed up with pressurised steam\" },\n { label: \"Americano\", value: \"americano\", description: \"Espresso coffee diluted with hot water\" },\n { label: \"Mocha\", value: \"mocha\", description: \"Coffee with chocolate\" },\n ];\n select.addEventListener(\"icChange\", function (event) {\n console.log(event.detail.value);\n });\n</script>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcSelect \n label=\"What is your favourite coffee?\"\n options={options}\n onIcChange={(event) => console.log(event.detail.value)}\n>\n <SlottedSVG\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n fill=\"#000000\"\n >\n <path d=\"M2,21H20V19H2M20,8H18V5H20M20,3H4V13A4,4 0 0,0 8,17H14A4,4 0 0,0 18,13V10H20A2,2 0 0,0 22,8V5C22,3.89 21.1,3 20,3Z\" />\n </SlottedSVG>\n</IcSelect>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const options = [\n { label: \"Cappuccino\", value: \"cappuccino\", description: \"Coffee frothed up with pressurised steam\" },\n { label: \"Americano\", value: \"americano\", description: \"Espresso coffee diluted with hot water\" },\n { label: \"Mocha\", value: \"mocha\", description: \"Coffee with chocolate\" },\n];\nreturn (\n {shortCode}\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const options = [\n { label: \"Cappuccino\", value: \"cappuccino\", description: \"Coffee frothed up with pressurised steam\" },\n { label: \"Americano\", value: \"americano\", description: \"Espresso coffee diluted with hot water\" },\n { label: \"Mocha\", value: \"mocha\", description: \"Coffee with chocolate\" },\n];\nreturn (\n {shortCode}\n)`,\n },\n ],\n },\n },\n];\n\nexport const SelectExampleWithIcon = () => (\n <IcSelect\n label=\"What is your favourite coffee?\"\n options={[\n {\n label: \"Cappuccino\",\n value: \"cappuccino\",\n description: \"Coffee frothed up with pressurised steam\",\n },\n {\n label: \"Americano\",\n value: \"americano\",\n description: \"Espresso coffee diluted with hot water\",\n },\n {\n label: \"Mocha\",\n value: \"mocha\",\n description: \"Coffee with chocolate\",\n },\n ]}\n onIcChange={(event) => console.log(event.detail.value)}\n >\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n fill=\"#000000\"\n >\n <path d=\"M2,21H20V19H2M20,8H18V5H20M20,3H4V13A4,4 0 0,0 8,17H14A4,4 0 0,0 18,13V10H20A2,2 0 0,0 22,8V5C22,3.89 21.1,3 20,3Z\" />\n </svg>\n </IcSelect>\n);\n\n<ComponentPreview snippets={snippetsWithIcon}>\n <SelectExampleWithIcon />\n</ComponentPreview>\n\n### Size small\n\nexport const snippetsSmall = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-select \n label=\"What is your favourite coffee?\" \n size=\"small\"\n></ic-select>`,\n long: `{shortCode}\n<script>\n const select = document.querySelector(\"ic-select\");\n let option = \"Cappuccino\";\n select.options = [\n { label: \"Espresso\", value: \"espresso\" },\n { label: \"Double Espresso\", value: \"doubleespresso\" },\n { label: \"Flat White\", value: \"flatwhite\" },\n { label: \"Cappuccino\", value: \"cappuccino\" },\n { label: \"Americano\", value: \"americano\" },\n { label: \"Mocha\", value: \"mocha\" },\n ];\n select.addEventListener(\"icChange\", function (event) {\n console.log(event.detail.value);\n });\n</script>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcSelect \n label=\"What is your favourite coffee?\"\n options={options}\n onIcChange={(event) => console.log(event.detail.value)}\n size=\"small\"\n/>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const options = [\n { label: \"Espresso\", value: \"espresso\" },\n { label: \"Double Espresso\", value: \"doubleespresso\" },\n { label: \"Flat White\", value: \"flatwhite\" },\n { label: \"Cappuccino\", value: \"cappuccino\" },\n { label: \"Americano\", value: \"americano\" },\n { label: \"Mocha\", value: \"mocha\" },\n];\nreturn (\n {shortCode}\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const options = [\n { label: \"Espresso\", value: \"espresso\" },\n { label: \"Double Espresso\", value: \"doubleespresso\" },\n { label: \"Flat White\", value: \"flatwhite\" },\n { label: \"Cappuccino\", value: \"cappuccino\" },\n { label: \"Americano\", value: \"americano\" },\n { label: \"Mocha\", value: \"mocha\" },\n];\nreturn (\n {shortCode}\n)`,\n },\n ],\n },\n },\n];\n\nexport const SelectExampleSmall = () => (\n <IcSelect\n label=\"What is your favourite coffee?\"\n options={[\n { label: \"Espresso\", value: \"espresso\" },\n { label: \"Double Espresso\", value: \"doubleespresso\" },\n { label: \"Flat White\", value: \"flatwhite\" },\n { label: \"Cappuccino\", value: \"cappuccino\" },\n { label: \"Americano\", value: \"americano\" },\n { label: \"Mocha\", value: \"mocha\" },\n ]}\n onIcChange={(event) => console.log(event.detail.value)}\n size=\"small\"\n />\n);\n\n<ComponentPreview snippets={snippetsSmall}>\n <SelectExampleSmall />\n</ComponentPreview>\n\n### Hidden label\n\nexport const snippetsHideLabel = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-select \n placeholder=\"Select an option…\" \n label=\"What is your favourite coffee?\" \n hide-label=\"true\"\n></ic-select>`,\n long: `{shortCode}\n<script>\n const select = document.querySelector(\"ic-select\");\n let option = \"Cappuccino\";\n select.options = [\n { label: \"Espresso\", value: \"espresso\" },\n { label: \"Double Espresso\", value: \"doubleespresso\" },\n { label: \"Flat White\", value: \"flatwhite\" },\n ];\n select.addEventListener(\"icChange\", function (event) {\n console.log(event.detail.value);\n });\n</script>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcSelect \n placeholder=\"Select an option…\" \n label=\"What is your favourite coffee?\"\n options={options}\n hideLabel\n onIcChange={(event) => console.log(event.detail.value)}\n/>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const options = [\n { label: \"Espresso\", value: \"espresso\" },\n { label: \"Double Espresso\", value: \"doubleespresso\" },\n { label: \"Flat White\", value: \"flatwhite\" },\n];\nreturn (\n {shortCode}\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const options = [\n { label: \"Espresso\", value: \"espresso\" },\n { label: \"Double Espresso\", value: \"doubleespresso\" },\n { label: \"Flat White\", value: \"flatwhite\" },\n];\nreturn (\n {shortCode}\n)`,\n },\n ],\n },\n },\n];\n\nexport const SelectExampleHideLabel = () => (\n <IcSelect\n placeholder=\"Select an option…\"\n label=\"What is your favourite coffee?\"\n options={[\n { label: \"Espresso\", value: \"espresso\" },\n { label: \"Double Espresso\", value: \"doubleespresso\" },\n { label: \"Flat White\", value: \"flatwhite\" },\n ]}\n hideLabel\n onIcChange={(event) => console.log(event.detail.value)}\n />\n);\n\n<ComponentPreview snippets={snippetsHideLabel}>\n <SelectExampleHideLabel />\n</ComponentPreview>\n\n### Groups\n\nexport const snippetsGroups = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-select \n placeholder=\"Select an option…\" \n label=\"What is your favourite coffee?\"\n></ic-select>`,\n long: `{shortCode}\n<script>\n const select = document.querySelector(\"ic-select\");\n let option = \"Cappuccino\";\n select.options = [\n {\n label: \"Fancy\",\n children: [\n { label: \"Cappuccino\", value: \"Cap\" },\n { label: \"Flat white\", value: \"Flat\" },\n ],\n },\n {\n label: \"Boring\",\n children: [\n { label: \"Filter\", value: \"Fil\" },\n { label: \"Latte\", value: \"Lat\" },\n ],\n },\n ];\n select.addEventListener(\"icChange\", function (event) {\n console.log(event.detail.value);\n });\n</script>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcSelect \n placeholder=\"Select an option…\" \n label=\"What is your favourite coffee?\"\n options={options}\n onIcChange={(event) => console.log(event.detail.value)}\n/>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const options = [\n {\n label: \"Fancy\",\n children: [\n { label: \"Cappuccino\", value: \"Cap\" },\n { label: \"Flat white\", value: \"Flat\" },\n ],\n },\n {\n label: \"Boring\",\n children: [\n { label: \"Filter\", value: \"Fil\" },\n { label: \"Latte\", value: \"Lat\" },\n ],\n },\n];\nreturn (\n {shortCode}\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const options = [\n {\n label: \"Fancy\",\n children: [\n { label: \"Cappuccino\", value: \"Cap\" },\n { label: \"Flat white\", value: \"Flat\" },\n ],\n },\n {\n label: \"Boring\",\n children: [\n { label: \"Filter\", value: \"Fil\" },\n { label: \"Latte\", value: \"Lat\" },\n ],\n },\n];\nreturn (\n {shortCode}\n)`,\n },\n ],\n },\n },\n];\n\nexport const SelectExampleGroups = () => (\n <IcSelect\n placeholder=\"Select an option…\"\n label=\"What is your favourite coffee?\"\n options={[\n {\n label: \"Fancy\",\n children: [\n { label: \"Cappuccino\", value: \"Cap\" },\n { label: \"Flat white\", value: \"Flat\" },\n ],\n },\n {\n label: \"Boring\",\n children: [\n { label: \"Filter\", value: \"Fil\" },\n { label: \"Latte\", value: \"Lat\" },\n ],\n },\n ]}\n onIcChange={(event) => console.log(event.detail.value)}\n />\n);\n\n<ComponentPreview snippets={snippetsGroups}>\n <SelectExampleGroups />\n</ComponentPreview>\n\n### Recommended\n\nexport const snippetsRecommended = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-select \n placeholder=\"Select an option…\" \n label=\"What is your favourite coffee?\"\n></ic-select>`,\n long: `{shortCode}\n<script>\n const select = document.querySelector(\"ic-select\");\n let option = \"Cappuccino\";\n select.options = [\n { label: \"Espresso\", value: \"espresso\" },\n { label: \"Double Espresso\", value: \"doubleespresso\", recommended: true },\n { label: \"Flat White\", value: \"flatwhite\" },\n { label: \"Cappuccino\", value: \"cappuccino\" },\n { label: \"Americano\", value: \"americano\", recommended: true },\n { label: \"Mocha\", value: \"mocha\" },\n ];\n select.addEventListener(\"icChange\", function (event) {\n console.log(event.detail.value);\n });\n</script>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcSelect \n placeholder=\"Select an option…\" \n label=\"What is your favourite coffee?\"\n options={options}\n onIcChange={(event) => console.log(event.detail.value)}\n/>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const options = [\n { label: \"Espresso\", value: \"espresso\" },\n { label: \"Double Espresso\", value: \"doubleespresso\", recommended: true },\n { label: \"Flat White\", value: \"flatwhite\" },\n { label: \"Cappuccino\", value: \"cappuccino\" },\n { label: \"Americano\", value: \"americano\", recommended: true },\n { label: \"Mocha\", value: \"mocha\" },\n];\nreturn (\n {shortCode}\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const options = [\n { label: \"Espresso\", value: \"espresso\" },\n { label: \"Double Espresso\", value: \"doubleespresso\", recommended: true },\n { label: \"Flat White\", value: \"flatwhite\" },\n { label: \"Cappuccino\", value: \"cappuccino\" },\n { label: \"Americano\", value: \"americano\", recommended: true },\n { label: \"Mocha\", value: \"mocha\" },\n];\nreturn (\n {shortCode}\n)`,\n },\n ],\n },\n },\n];\n\nexport const SelectExampleRecommended = () => (\n <IcSelect\n placeholder=\"Select an option…\"\n label=\"What is your favourite coffee?\"\n options={[\n { label: \"Espresso\", value: \"espresso\" },\n {\n label: \"Double Espresso\",\n value: \"doubleespresso\",\n recommended: true,\n },\n { label: \"Flat White\", value: \"flatwhite\" },\n { label: \"Cappuccino\", value: \"cappuccino\" },\n { label: \"Americano\", value: \"americano\", recommended: true },\n { label: \"Mocha\", value: \"mocha\" },\n ]}\n onIcChange={(event) => console.log(event.detail.value)}\n />\n);\n\n<ComponentPreview snippets={snippetsRecommended}>\n <SelectExampleRecommended />\n</ComponentPreview>\n\n### Validation\n\nexport const snippetsValidation = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-select \n placeholder=\"Select an option…\" \n label=\"What is your favourite coffee?\" \n validation-status=\"success\" \n validation-text=\"Coffee available\"\n value=\"americano\"\n id=\"1\"\n></ic-select>\n<ic-select\n placeholder=\"Select an option…\"\n label=\"What is your favourite coffee?\"\n validation-status=\"warning\" \n validation-text=\"Only a few left\"\n value=\"cappuccino\"\n id=\"2\"\n></ic-select>\n<ic-select \n placeholder=\"Select an option…\" \n label=\"What is your favourite coffee?\" \n validation-status=\"error\" \n validation-text=\"Coffee unavailable\"\n value=\"mocha\"\n id=\"3\"\n></ic-select>`,\n long: `{shortCode}\n<script>\n const select1 = document.querySelector(\"#1\");\n const select2 = document.querySelector(\"#2\");\n const select3 = document.querySelector(\"#3\");\n select1.options = [\n { label: \"Espresso\", value: \"espresso\" },\n { label: \"Double Espresso\", value: \"doubleespresso\" },\n { label: \"Flat White\", value: \"flatwhite\" },\n { label: \"Cappuccino\", value: \"cappuccino\" },\n { label: \"Americano\", value: \"americano\" },\n { label: \"Mocha\", value: \"mocha\" },\n ];\n select2.options = [\n { label: \"Espresso\", value: \"espresso\" },\n { label: \"Double Espresso\", value: \"doubleespresso\" },\n { label: \"Flat White\", value: \"flatwhite\" },\n { label: \"Cappuccino\", value: \"cappuccino\" },\n { label: \"Americano\", value: \"americano\" },\n { label: \"Mocha\", value: \"mocha\" },\n ];\n select3.options = [\n { label: \"Espresso\", value: \"espresso\" },\n { label: \"Double Espresso\", value: \"doubleespresso\" },\n { label: \"Flat White\", value: \"flatwhite\" },\n { label: \"Cappuccino\", value: \"cappuccino\" },\n { label: \"Americano\", value: \"americano\" },\n { label: \"Mocha\", value: \"mocha\" },\n ];\n</script>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcSelect \n placeholder=\"Select an option…\" \n label=\"What is your favourite coffee?\"\n value=\"americano\"\n options={options}\n validationStatus=\"success\"\n validationText=\"Coffee available\"\n onIcChange={(event) => console.log(event.detail.value)}\n/>\n<IcSelect \n placeholder=\"Select an option…\" l\n abel=\"What is your favourite coffee?\"\n value=\"cappuccino\"\n options={options}\n validationStatus=\"warning\" \n validationText=\"Only a few left\"\n onIcChange={(event) => console.log(event.detail.value)}\n/>\n<IcSelect \n placeholder=\"Select an option…\" \n label=\"What is your favourite coffee?\"\n value=\"mocha\"\n options={options}\n validationStatus=\"error\" \n validationText=\"Coffee unavailable\"\n onIcChange={(event) => console.log(event.detail.value)}\n/>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const options = [\n { label: \"Espresso\", value: \"espresso\" },\n { label: \"Double Espresso\", value: \"doubleespresso\" },\n { label: \"Flat White\", value: \"flatwhite\" },\n { label: \"Cappuccino\", value: \"cappuccino\" },\n { label: \"Americano\", value: \"americano\" },\n { label: \"Mocha\", value: \"mocha\" },\n];\nreturn (\n <>\n {shortCode}\n </>\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const options = [\n { label: \"Espresso\", value: \"espresso\" },\n { label: \"Double Espresso\", value: \"doubleespresso\" },\n { label: \"Flat White\", value: \"flatwhite\" },\n { label: \"Cappuccino\", value: \"cappuccino\" },\n { label: \"Americano\", value: \"americano\" },\n { label: \"Mocha\", value: \"mocha\" },\n];\nreturn (\n <>\n {shortCode}\n </>\n)`,\n },\n ],\n },\n },\n];\n\nexport const SelectExampleValidation = () => (\n <div>\n <IcSelect\n placeholder=\"Select an option…\"\n label=\"What is your favourite coffee?\"\n value=\"americano\"\n options={[\n { label: \"Espresso\", value: \"espresso\" },\n { label: \"Double Espresso\", value: \"doubleespresso\" },\n { label: \"Flat White\", value: \"flatwhite\" },\n { label: \"Cappuccino\", value: \"cappuccino\" },\n { label: \"Americano\", value: \"americano\" },\n { label: \"Mocha\", value: \"mocha\" },\n ]}\n validationStatus=\"success\"\n validationText=\"Coffee available\"\n onIcChange={(event) => console.log(event.detail.value)}\n />\n <IcSelect\n placeholder=\"Select an option…\"\n label=\"What is your favourite coffee?\"\n value=\"cappuccino\"\n options={[\n { label: \"Espresso\", value: \"espresso\" },\n { label: \"Double Espresso\", value: \"doubleespresso\" },\n { label: \"Flat White\", value: \"flatwhite\" },\n { label: \"Cappuccino\", value: \"cappuccino\" },\n { label: \"Americano\", value: \"americano\" },\n { label: \"Mocha\", value: \"mocha\" },\n ]}\n validationStatus=\"warning\"\n validationText=\"Only a few left\"\n onIcChange={(event) => console.log(event.detail.value)}\n />\n <IcSelect\n placeholder=\"Select an option…\"\n label=\"What is your favourite coffee?\"\n value=\"mocha\"\n options={[\n { label: \"Espresso\", value: \"espresso\" },\n { label: \"Double Espresso\", value: \"doubleespresso\" },\n { label: \"Flat White\", value: \"flatwhite\" },\n { label: \"Cappuccino\", value: \"cappuccino\" },\n { label: \"Americano\", value: \"americano\" },\n { label: \"Mocha\", value: \"mocha\" },\n ]}\n validationStatus=\"error\"\n validationText=\"Coffee unavailable\"\n onIcChange={(event) => console.log(event.detail.value)}\n />\n </div>\n);\n\n<ComponentPreview snippets={snippetsValidation}>\n <SelectExampleValidation />\n</ComponentPreview>\n\n### Custom elements in options\n\nexport const snippetsCustomElements = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-select \n placeholder=\"Select an option...\" \n label=\"What is your favourite coffee?\"\n></ic-select>`,\n long: `{shortCode}\n<script>\n const select = document.querySelector(\"ic-select\");\n select.options = [\n { \n label: \"Cappuccino\", \n value: \"Cap\", \n },\n { \n label: \"Latte\", \n value: \"Lat\",\n element: {\n component: '<ic-status-tag label=\"Neutral status\"></ic-status-tag>',\n ariaLabel: \"Neutral status tag\",\n }\n },\n { \n label: \"Americano\", \n value: \"Ame\",\n icon: '<svg aria-labelledby=\"warning-title\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"#000000\"><g id=\"warning\"><path id=\"Vector\" d=\"M4.47 20.5037H19.53C21.07 20.5037 22.03 18.8337 21.26 17.5037L13.73 4.49375C12.96 3.16375 11.04 3.16375 10.27 4.49375L2.74 17.5037C1.97 18.8337 2.93 20.5037 4.47 20.5037ZM12 13.5037C11.45 13.5037 11 13.0537 11 12.5037V10.5037C11 9.95375 11.45 9.50375 12 9.50375C12.55 9.50375 13 9.95375 13 10.5037V12.5037C13 13.0537 12.55 13.5037 12 13.5037ZM13 17.5037H11V15.5037H13V17.5037Z\" /></g></svg>'\n },\n ];\n select.addEventListener(\"icChange\", function (event) {\n console.log(event.detail.value);\n });\n</script>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcSelect \n placeholder=\"Select an option...\" \n label=\"What is your favourite coffee?\"\n options={options}\n onIcChange={(event) => console.log(event.detail.value)}\n/>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const options = [\n { \n label: \"Cappuccino\", \n value: \"Cap\", \n },\n { \n label: \"Latte\", \n value: \"Lat\",\n element: {\n component: '<ic-status-tag label=\"Neutral status\"></ic-status-tag>',\n ariaLabel: \"Neutral status tag\",\n }\n },\n { \n label: \"Americano\", \n value: \"Ame\",\n icon: '<svg aria-labelledby=\"warning-title\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"#000000\"><g id=\"warning\"><path id=\"Vector\" d=\"M4.47 20.5037H19.53C21.07 20.5037 22.03 18.8337 21.26 17.5037L13.73 4.49375C12.96 3.16375 11.04 3.16375 10.27 4.49375L2.74 17.5037C1.97 18.8337 2.93 20.5037 4.47 20.5037ZM12 13.5037C11.45 13.5037 11 13.0537 11 12.5037V10.5037C11 9.95375 11.45 9.50375 12 9.50375C12.55 9.50375 13 9.95375 13 10.5037V12.5037C13 13.0537 12.55 13.5037 12 13.5037ZM13 17.5037H11V15.5037H13V17.5037Z\" /></g></svg>'\n },\n];\nreturn (\n {shortCode}\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const options = [\n { \n label: \"Cappuccino\", \n value: \"Cap\", \n },\n { \n label: \"Latte\", \n value: \"Lat\",\n element: {\n component: '<ic-status-tag label=\"Neutral status\"></ic-status-tag>',\n ariaLabel: \"Neutral status tag\",\n }\n },\n { \n label: \"Americano\", \n value: \"Ame\",\n icon: '<svg aria-labelledby=\"warning-title\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"#000000\"><g id=\"warning\"><path id=\"Vector\" d=\"M4.47 20.5037H19.53C21.07 20.5037 22.03 18.8337 21.26 17.5037L13.73 4.49375C12.96 3.16375 11.04 3.16375 10.27 4.49375L2.74 17.5037C1.97 18.8337 2.93 20.5037 4.47 20.5037ZM12 13.5037C11.45 13.5037 11 13.0537 11 12.5037V10.5037C11 9.95375 11.45 9.50375 12 9.50375C12.55 9.50375 13 9.95375 13 10.5037V12.5037C13 13.0537 12.55 13.5037 12 13.5037ZM13 17.5037H11V15.5037H13V17.5037Z\" /></g></svg>'\n },\n];\nreturn (\n {shortCode}\n)`,\n },\n ],\n },\n },\n];\n\nexport const optionsWithCustomElements = [\n {\n label: \"Cappuccino\",\n value: \"Cap\",\n },\n {\n label: \"Latte\",\n value: \"Lat\",\n element: {\n component: `<ic-status-tag label=\"Neutral status\"></ic-status-tag>`,\n ariaLabel: \"Neutral status tag\",\n },\n },\n {\n label: \"Americano\",\n value: \"Ame\",\n icon: `<svg aria-labelledby=\"warning-title\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"#000000\"><g id=\"warning\"><path id=\"Vector\" d=\"M4.47 20.5037H19.53C21.07 20.5037 22.03 18.8337 21.26 17.5037L13.73 4.49375C12.96 3.16375 11.04 3.16375 10.27 4.49375L2.74 17.5037C1.97 18.8337 2.93 20.5037 4.47 20.5037ZM12 13.5037C11.45 13.5037 11 13.0537 11 12.5037V10.5037C11 9.95375 11.45 9.50375 12 9.50375C12.55 9.50375 13 9.95375 13 10.5037V12.5037C13 13.0537 12.55 13.5037 12 13.5037ZM13 17.5037H11V15.5037H13V17.5037Z\" /></g></svg>`,\n },\n];\n\n<ComponentPreview snippets={snippetsCustomElements}>\n <IcSelect\n placeholder=\"Select an option…\"\n label=\"What is your favourite coffee?\"\n options={optionsWithCustomElements}\n onIcChange={(event) => console.log(event.detail.value)}\n />\n</ComponentPreview>\n\n### Searchable\n\nexport const snippetsSearchable = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-select \n placeholder=\"Select an option…\"\n label=\"What is your favourite coffee?\" \n searchable=\"true\"\n></ic-select>`,\n long: `{shortCode}\n<script>\n const select = document.querySelector(\"ic-select\");\n let option = \"Cappuccino\";\n select.options = [\n { label: \"Cappuccino\", value: \"Cap\" },\n { label: \"Latte\", value: \"Lat\" },\n { label: \"Americano\", value: \"Ame\" },\n { label: \"Flat white\", value: \"Fla\" },\n { label: \"Mocha\", value: \"Moc\" },\n { label: \"Macchiato\", value: \"Mac\" },\n { label: \"Café au lait\", value: \"Caf\" },\n { label: \"Espresso\", value: \"Esp\" },\n { label: \"Cortado\", value: \"Cor\" },\n { label: \"Latte macchiato\", value: \"Lam\" },\n ];\n select.addEventListener(\"icChange\", function (event) {\n console.log(event.detail.value);\n });\n</script>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcSelect \n placeholder=\"Select an option…\"\n label=\"What is your favourite coffee?\"\n options={options}\n searchable\n onIcChange={(event) => console.log(event.detail.value)}\n/>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const options = [\n { label: \"Cappuccino\", value: \"Cap\" },\n { label: \"Latte\", value: \"Lat\" },\n { label: \"Americano\", value: \"Ame\" },\n { label: \"Flat white\", value: \"Fla\" },\n { label: \"Mocha\", value: \"Moc\" },\n { label: \"Macchiato\", value: \"Mac\" },\n { label: \"Café au lait\", value: \"Caf\" },\n { label: \"Espresso\", value: \"Esp\" },\n { label: \"Cortado\", value: \"Cor\" },\n { label: \"Latte macchiato\", value: \"Lam\" },\n];\nreturn (\n {shortCode}\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const options = [\n { label: \"Cappuccino\", value: \"Cap\" },\n { label: \"Latte\", value: \"Lat\" },\n { label: \"Americano\", value: \"Ame\" },\n { label: \"Flat white\", value: \"Fla\" },\n { label: \"Mocha\", value: \"Moc\" },\n { label: \"Macchiato\", value: \"Mac\" },\n { label: \"Café au lait\", value: \"Caf\" },\n { label: \"Espresso\", value: \"Esp\" },\n { label: \"Cortado\", value: \"Cor\" },\n { label: \"Latte macchiato\", value: \"Lam\" },\n];\nreturn (\n {shortCode}\n)`,\n },\n ],\n },\n },\n];\n\nexport const SearchableSelectExample = () => (\n <IcSelect\n placeholder=\"Select an option…\"\n label=\"What is your favourite coffee?\"\n options={[\n { label: \"Cappuccino\", value: \"Cap\" },\n { label: \"Latte\", value: \"Lat\" },\n { label: \"Americano\", value: \"Ame\" },\n { label: \"Flat white\", value: \"Fla\" },\n { label: \"Mocha\", value: \"Moc\" },\n { label: \"Macchiato\", value: \"Mac\" },\n { label: \"Café au lait\", value: \"Caf\" },\n { label: \"Espresso\", value: \"Esp\" },\n { label: \"Cortado\", value: \"Cor\" },\n { label: \"Latte macchiato\", value: \"Lam\" },\n ]}\n searchable\n onIcChange={(event) => console.log(event.detail.value)}\n />\n);\n\n<ComponentPreview snippets={snippetsSearchable}>\n <SearchableSelectExample />\n</ComponentPreview>\n\n### Searchable – with descriptions included in search\n\nexport const snippetsSearchableWithDescriptions = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-select\n placeholder=\"Select an option…\"\n label=\"What is your favourite coffee?\" \n searchable=\"true\" \n include-description-in-search=\"true\"\n></ic-select>`,\n long: `{shortCode}\n<script>\n const select = document.querySelector(\"ic-select\");\n let option = \"Cappuccino\";\n select.options = [\n { label: \"Cappuccino\", value: \"Cap\", description: \"Coffee frothed up with pressurised steam\" },\n { label: \"Americano\", value: \"Ame\", description: \"Espresso coffee diluted with hot water\" },\n { label: \"Mocha\", value: \"Moc\", description: \"Coffee with chocolate\" },\n { label: \"Latte\", value: \"Lat\", description: \"Milky coffee with one or two shots of espresso\" },\n { label: \"Flat white\", value: \"Fla\", description: \"Coffee with frothed milk poured over espresso\" },\n { label: \"Macchiato\", value: \"Mac\", description: \"Espresso coffee topped with steamed milk\" },\n { label: \"Café au lait\", value: \"Caf\", description: \"Brewed coffee with steamed milk\" },\n { label: \"Espresso\", value: \"Esp\", description: \"Concentrated form of coffee\" },\n { label: \"Cortado\", value: \"Cor\", description: \"Coffee cut with milk\" },\n { label: \"Latte macchiato\", value: \"Lam\", description: \"Espresso coffee with milk and a spoonful of foamed milk\" },\n ];\n select.addEventListener(\"icChange\", function (event) {\n console.log(event.detail.value);\n });\n</script>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcSelect \n placeholder=\"Select an option…\"\n label=\"What is your favourite coffee?\"\n options={options}\n searchable\n includeDescriptionsInSearch\n onIcChange={(event) => console.log(event.detail.value)}\n/>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const options = [\n { label: \"Cappuccino\", value: \"Cap\", description: \"Coffee frothed up with pressurised steam\" },\n { label: \"Americano\", value: \"Ame\", description: \"Espresso coffee diluted with hot water\" },\n { label: \"Mocha\", value: \"Moc\", description: \"Coffee with chocolate\" },\n { label: \"Latte\", value: \"Lat\", description: \"Milky coffee with one or two shots of espresso\" },\n { label: \"Flat white\", value: \"Fla\", description: \"Coffee with frothed milk poured over espresso\" },\n { label: \"Macchiato\", value: \"Mac\", description: \"Espresso coffee topped with steamed milk\" },\n { label: \"Café au lait\", value: \"Caf\", description: \"Brewed coffee with steamed milk\" },\n { label: \"Espresso\", value: \"Esp\", description: \"Concentrated form of coffee\" },\n { label: \"Cortado\", value: \"Cor\", description: \"Coffee cut with milk\" },\n { label: \"Latte macchiato\", value: \"Lam\", description: \"Espresso coffee with milk and a spoonful of foamed milk\" },\n];\nreturn (\n {shortCode}\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const options = [\n { label: \"Cappuccino\", value: \"Cap\", description: \"Coffee frothed up with pressurised steam\" },\n { label: \"Americano\", value: \"Ame\", description: \"Espresso coffee diluted with hot water\" },\n { label: \"Mocha\", value: \"Moc\", description: \"Coffee with chocolate\" },\n { label: \"Latte\", value: \"Lat\", description: \"Milky coffee with one or two shots of espresso\" },\n { label: \"Flat white\", value: \"Fla\", description: \"Coffee with frothed milk poured over espresso\" },\n { label: \"Macchiato\", value: \"Mac\", description: \"Espresso coffee topped with steamed milk\" },\n { label: \"Café au lait\", value: \"Caf\", description: \"Brewed coffee with steamed milk\" },\n { label: \"Espresso\", value: \"Esp\", description: \"Concentrated form of coffee\" },\n { label: \"Cortado\", value: \"Cor\", description: \"Coffee cut with milk\" },\n { label: \"Latte macchiato\", value: \"Lam\", description: \"Espresso coffee with milk and a spoonful of foamed milk\" },\n];\nreturn (\n {shortCode}\n)`,\n },\n ],\n },\n },\n];\n\nexport const SearchableSelectWithDescriptionsExample = () => (\n <IcSelect\n placeholder=\"Select an option…\"\n label=\"What is your favourite coffee?\"\n options={[\n {\n label: \"Cappuccino\",\n value: \"Cap\",\n description: \"Coffee frothed up with pressurised steam\",\n },\n {\n label: \"Americano\",\n value: \"Ame\",\n description: \"Espresso coffee diluted with hot water\",\n },\n { label: \"Mocha\", value: \"Moc\", description: \"Coffee with chocolate\" },\n {\n label: \"Latte\",\n value: \"Lat\",\n description: \"Milky coffee with one or two shots of espresso\",\n },\n {\n label: \"Flat white\",\n value: \"Fla\",\n description: \"Coffee with frothed milk poured over espresso\",\n },\n {\n label: \"Macchiato\",\n value: \"Mac\",\n description: \"Espresso coffee topped with steamed milk\",\n },\n {\n label: \"Café au lait\",\n value: \"Caf\",\n description: \"Brewed coffee with steamed milk\",\n },\n {\n label: \"Espresso\",\n value: \"Esp\",\n description: \"Concentrated form of coffee\",\n },\n { label: \"Cortado\", value: \"Cor\", description: \"Coffee cut with milk\" },\n {\n label: \"Latte macchiato\",\n value: \"Lam\",\n description: \"Espresso coffee with milk and a spoonful of foamed milk\",\n },\n ]}\n searchable\n includeDescriptionsInSearch\n onIcChange={(event) => console.log(event.detail.value)}\n />\n);\n\n<ComponentPreview snippets={snippetsSearchableWithDescriptions}>\n <SearchableSelectWithDescriptionsExample />\n</ComponentPreview>\n\n### Searchable – with group titles included in search\n\nexport const snippetsSearchableWithGroups = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-select\n placeholder=\"Select an option…\"\n label=\"What is your favourite coffee?\" \n searchable=\"true\" \n include-group-titles-in-search=\"true\"\n></ic-select>`,\n long: `{shortCode}\n<script>\n const select = document.querySelector(\"ic-select\");\n let option = \"Cappuccino\";\n select.options = [\n {\n label: \"Fancy\",\n children: [\n { label: \"Cappuccino\", value: \"Cap\" },\n { label: \"Flat white\", value: \"Flat\" },\n { label: \"Mocha\", value: \"Moc\" },\n { label: \"Macchiato\", value: \"Mac\" },\n { label: \"Cortado\", value: \"Cor\" },\n { label: \"Latte macchiato\", value: \"Lam\" },\n ],\n },\n {\n label: \"Boring\",\n children: [\n { label: \"Filter\", value: \"Fil\" },\n { label: \"Latte\", value: \"Lat\" },\n { label: \"Americano\", value: \"Ame\" },\n { label: \"Espresso\", value: \"Esp\" },\n ],\n },\n ];\n select.addEventListener(\"icChange\", function (event) {\n console.log(event.detail.value);\n });\n</script>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcSelect \n placeholder=\"Select an option…\"\n label=\"What is your favourite coffee?\"\n options={options}\n searchable\n includeGroupTitlesInSearch\n onIcChange={(event) => console.log(event.detail.value)}\n/>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const options = [\n {\n label: \"Fancy\",\n children: [\n { label: \"Cappuccino\", value: \"Cap\" },\n { label: \"Flat white\", value: \"Flat\" },\n { label: \"Mocha\", value: \"Moc\" },\n { label: \"Macchiato\", value: \"Mac\" },\n { label: \"Cortado\", value: \"Cor\" },\n { label: \"Latte macchiato\", value: \"Lam\" },\n ],\n },\n {\n label: \"Boring\",\n children: [\n { label: \"Filter\", value: \"Fil\" },\n { label: \"Latte\", value: \"Lat\" },\n { label: \"Americano\", value: \"Ame\" },\n { label: \"Espresso\", value: \"Esp\" },\n ],\n },\n];\nreturn (\n {shortCode}\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const options = [\n {\n label: \"Fancy\",\n children: [\n { label: \"Cappuccino\", value: \"Cap\" },\n { label: \"Flat white\", value: \"Flat\" },\n { label: \"Mocha\", value: \"Moc\" },\n { label: \"Macchiato\", value: \"Mac\" },\n { label: \"Cortado\", value: \"Cor\" },\n { label: \"Latte macchiato\", value: \"Lam\" },\n ],\n },\n {\n label: \"Boring\",\n children: [\n { label: \"Filter\", value: \"Fil\" },\n { label: \"Latte\", value: \"Lat\" },\n { label: \"Americano\", value: \"Ame\" },\n { label: \"Espresso\", value: \"Esp\" },\n ],\n },\n];\nreturn (\n {shortCode}\n)`,\n },\n ],\n },\n },\n];\n\nexport const SearchableSelectWithGroupsExample = () => (\n <IcSelect\n placeholder=\"Select an option…\"\n label=\"What is your favourite coffee?\"\n options={[\n {\n label: \"Fancy\",\n children: [\n { label: \"Cappuccino\", value: \"Cap\" },\n { label: \"Flat white\", value: \"Flat\" },\n { label: \"Mocha\", value: \"Moc\" },\n { label: \"Macchiato\", value: \"Mac\" },\n { label: \"Cortado\", value: \"Cor\" },\n { label: \"Latte macchiato\", value: \"Lam\" },\n ],\n },\n {\n label: \"Boring\",\n children: [\n { label: \"Filter\", value: \"Fil\" },\n { label: \"Latte\", value: \"Lat\" },\n { label: \"Americano\", value: \"Ame\" },\n { label: \"Espresso\", value: \"Esp\" },\n ],\n },\n ]}\n searchable\n includeGroupTitlesInSearch\n onIcChange={(event) => console.log(event.detail.value)}\n />\n);\n\n<ComponentPreview snippets={snippetsSearchableWithGroups}>\n <SearchableSelectWithGroupsExample />\n</ComponentPreview>\n\n## Custom filtering example\n\nThis example shows how to filter data asynchronously when the value in the select field changes. The data is mocked and displayed after a one second delay, but could be replaced with a call to an API or database.\n\nexport const customFiltering = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-select\n placeholder=\"Select an option…\"\n label=\"What is your favourite coffee?\"\n searchable=\"true\"\n debounce=\"300\"\n disable-filter=\"true\"\n id=\"external-filter-select\"\n characters-until-suggestions=\"2\"\n></ic-select>`,\n long: `{shortCode}\n<script>\n const mockData = [\n { label: \"Espresso\", value: \"Esp\" },\n { label: \"Double Espresso\", value: \"Dou\" },\n { label: \"Cappuccino\", value: \"Cap\" },\n { label: \"Latte\", value: \"Lat\" },\n { label: \"Americano\", value: \"Ame\" },\n { label: \"Filter\", value: \"Fil\" },\n { label: \"Flat white\", value: \"Fla\" },\n { label: \"Mocha\", value: \"Moc\" },\n { label: \"Macchiato\", value: \"Mac\" },\n ];\n const select = document.querySelector(\"#external-filter-select\");\n let selectedValue = \"\";\n select.addEventListener(\"icClear\", function (event) {\n select.options = [];\n });\n select.addEventListener(\"icOptionSelect\", function (event) {\n selectedValue = event.detail.value;\n });\n select.addEventListener(\"icChange\", function (event) {\n const value = event.detail.value;\n console.log(value);\n if (value !== selectedValue) {\n if (value && value.length > 1) {\n mockAPI = (query) => {\n filteredResults = mockData.filter((item) =>\n item.label.toLowerCase().includes(query.toLowerCase())\n );\n return new Promise((resolve) =>\n setTimeout(() => resolve(filteredResults), 1000)\n );\n };\n mockAPI(value).then((results) => {\n select.options = results;\n });\n } else {\n select.options = [];\n }\n }\n }); \n</script>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcSelect \n placeholder=\"Select an option…\"\n label=\"What is your favourite coffee?\"\n debounce={300}\n searchable\n disableFilter\n options={results} \n onIcOptionSelect={(event) => setSelectedValue(event.detail.value)}\n onIcClear={() => setResults([])}\n onIcChange={changeHandler}\n/>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const mockData = [\n { label: \"Espresso\", value: \"Esp\" },\n { label: \"Double Espresso\", value: \"Dou\" },\n { label: \"Cappuccino\", value: \"Cap\" },\n { label: \"Latte\", value: \"Lat\" },\n { label: \"Americano\", value: \"Ame\" },\n { label: \"Filter\", value: \"Fil\" },\n { label: \"Flat white\", value: \"Fla\" },\n { label: \"Mocha\", value: \"Moc\" },\n { label: \"Macchiato\", value: \"Mac\" },\n];\nconst [results, setResults] = useState([]);\nconst [selectedValue, setSelectedValue] = useState(\"\");\nconst changeHandler = (event) => {\n const newValue = event.detail.value;\n console.log(newValue);\n if (newValue !== selectedValue) {\n if (newValue && newValue.length > 1) {\n const mockAPI = (query) => {\n const filteredResults = mockData.filter((item) => \n item.label.toLowerCase().includes(query.toLowerCase()));\n return new Promise(resolve => { \n setTimeout(() => resolve(filteredResults), 1000)\n });\n };\n mockAPI(newValue).then((results) => setResults(results));\n } else {\n setResults([]);\n }\n } \n}\nreturn(\n <>\n {shortCode}\n </>\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const mockData = [\n { label: \"Espresso\", value: \"Esp\" },\n { label: \"Double Espresso\", value: \"Dou\" },\n { label: \"Cappuccino\", value: \"Cap\" },\n { label: \"Latte\", value: \"Lat\" },\n { label: \"Americano\", value: \"Ame\" },\n { label: \"Filter\", value: \"Fil\" },\n { label: \"Flat white\", value: \"Fla\" },\n { label: \"Mocha\", value: \"Moc\" },\n { label: \"Macchiato\", value: \"Mac\" },\n];\nconst [results, setResults] = useState([]);\nconst [selectedValue, setSelectedValue] = useState(\"\");\nconst changeHandler = (event) => {\n const newValue = event.detail.value;\n console.log(newValue);\n if (newValue !== selectedValue) {\n if (newValue && newValue.length > 1) {\n const mockAPI = (query) => {\n const filteredResults = mockData.filter((item) => \n item.label.toLowerCase().includes(query.toLowerCase()));\n return new Promise(resolve => { \n setTimeout(() => resolve(filteredResults), 1000)\n });\n };\n mockAPI(newValue).then((results) => setResults(results));\n } else {\n setResults([]);\n }\n } \n}\nreturn(\n <>\n {shortCode}\n </>\n)`,\n },\n ],\n },\n },\n];\n\nexport const CustomFilterExample = () => {\n const mockData = [\n { label: \"Espresso\", value: \"Esp\" },\n { label: \"Double Espresso\", value: \"Dou\" },\n { label: \"Cappuccino\", value: \"Cap\" },\n { label: \"Latte\", value: \"Lat\" },\n { label: \"Americano\", value: \"Ame\" },\n { label: \"Filter\", value: \"Fil\" },\n { label: \"Flat white\", value: \"Fla\" },\n { label: \"Mocha\", value: \"Moc\" },\n { label: \"Macchiato\", value: \"Mac\" },\n ];\n const [results, setResults] = React.useState([]);\n const [selectedValue, setSelectedValue] = React.useState(\"\");\n const changeHandler = (event) => {\n const newValue = event.detail.value;\n console.log(newValue);\n if (newValue !== selectedValue) {\n if (newValue && newValue.length > 1) {\n const mockAPI = (query) => {\n const filteredResults = mockData.filter((item) =>\n item.label.toLowerCase().includes(query.toLowerCase())\n );\n return new Promise((resolve) => {\n setTimeout(() => resolve(filteredResults), 1000);\n });\n };\n mockAPI(newValue).then((newResults) => setResults(newResults));\n } else {\n setResults([]);\n }\n }\n };\n return (\n <IcSelect\n placeholder=\"Select an option…\"\n label=\"What is your favourite coffee?\"\n debounce=\"300\"\n searchable\n disableFilter\n charactersUntilSuggestions=\"2\"\n options={results}\n onIcOptionSelect={(event) => setSelectedValue(event.detail.value)}\n onIcClear={() => setResults([])}\n onIcChange={changeHandler}\n />\n );\n};\n\n<ComponentPreview snippets={customFiltering}>\n <CustomFilterExample />\n</ComponentPreview>\n",
+ "contents": "\r\nimport { IcSelect } from \"@ukic/react\";\r\n\r\n## Component demo\r\n\r\nexport const snippets = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-select \r\n placeholder=\"Select an option...\" \r\n label=\"What is your favourite coffee?\"\r\n></ic-select>`,\r\n long: `{shortCode}\r\n<script>\r\n const select = document.querySelector(\"ic-select\");\r\n let option = \"Cappuccino\";\r\n select.options = [\r\n { label: \"Espresso\", value: \"espresso\" },\r\n { label: \"Double Espresso\", value: \"doubleespresso\" },\r\n { label: \"Flat White\", value: \"flatwhite\" },\r\n { label: \"Cappuccino\", value: \"cappuccino\" },\r\n { label: \"Americano\", value: \"americano\" },\r\n { label: \"Mocha\", value: \"mocha\" },\r\n ];\r\n select.addEventListener(\"icChange\", function (event) {\r\n console.log(event.detail.value);\r\n });\r\n</script>`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcSelect\r\n placeholder=\"Select an option...\" \r\n label=\"What is your favourite coffee?\"\r\n options={options}\r\n onIcChange={(event) => console.log(event.detail.value)}\r\n/>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `const options = [\r\n { label: \"Espresso\", value: \"espresso\" },\r\n { label: \"Double Espresso\", value: \"doubleespresso\" },\r\n { label: \"Flat White\", value: \"flatwhite\" },\r\n { label: \"Cappuccino\", value: \"cappuccino\" },\r\n { label: \"Americano\", value: \"americano\" },\r\n { label: \"Mocha\", value: \"mocha\" },\r\n];\r\nreturn (\r\n {shortCode}\r\n)`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `const options = [\r\n { label: \"Espresso\", value: \"espresso\" },\r\n { label: \"Double Espresso\", value: \"doubleespresso\" },\r\n { label: \"Flat White\", value: \"flatwhite\" },\r\n { label: \"Cappuccino\", value: \"cappuccino\" },\r\n { label: \"Americano\", value: \"americano\" },\r\n { label: \"Mocha\", value: \"mocha\" },\r\n];\r\nreturn (\r\n {shortCode}\r\n)`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\nexport const SelectExample = () => (\r\n <IcSelect\r\n placeholder=\"Select an option...\"\r\n label=\"What is your favourite coffee?\"\r\n options={[\r\n { label: \"Espresso\", value: \"espresso\" },\r\n { label: \"Double Espresso\", value: \"doubleespresso\" },\r\n { label: \"Flat White\", value: \"flatwhite\" },\r\n { label: \"Cappuccino\", value: \"cappuccino\" },\r\n { label: \"Americano\", value: \"americano\" },\r\n { label: \"Mocha\", value: \"mocha\" },\r\n ]}\r\n onIcChange={(event) => console.log(event.detail.value)}\r\n />\r\n);\r\n\r\n<ComponentPreview snippets={snippets}>\r\n <SelectExample />\r\n</ComponentPreview>\r\n\r\n## Select details\r\n\r\n<ComponentDetails component=\"ic-select\" />\r\n\r\n## Variants\r\n\r\n### With clear button, descriptions, helper text and custom placeholder\r\n\r\nexport const snippetsWithExtras = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-select \r\n label=\"What is your favourite coffee?\" \r\n placeholder=\"Select an option...\" \r\n helper-text=\"Select one option from the list\" \r\n show-clear-button=\"true\" \r\n searchable=\"true\"\r\n></ic-select>`,\r\n long: `{shortCode}\r\n<script>\r\n const select = document.querySelector(\"ic-select\");\r\n let option = \"Cappuccino\";\r\n select.options = [\r\n { label: \"Cappuccino\", value: \"cappuccino\", description: \"Coffee frothed up with pressurised steam\" },\r\n { label: \"Americano\", value: \"americano\", description: \"Espresso coffee diluted with hot water\" },\r\n { label: \"Mocha\", value: \"mocha\", description: \"Coffee with chocolate\" },\r\n ];\r\n select.addEventListener(\"icChange\", function (event) {\r\n console.log(event.detail.value);\r\n });\r\n</script>`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcSelect \r\n label=\"What is your favourite coffee?\"\r\n options={options}\r\n placeholder=\"Select an option…\"\r\n helperText=\"Select one option from the list\"\r\n showClearButton\r\n searchable\r\n onIcChange={(event) => console.log(event.detail.value)}\r\n/>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `const options = [\r\n { label: \"Cappuccino\", value: \"cappuccino\", description: \"Coffee frothed up with pressurised steam\" },\r\n { label: \"Americano\", value: \"americano\", description: \"Espresso coffee diluted with hot water\" },\r\n { label: \"Mocha\", value: \"mocha\", description: \"Coffee with chocolate\" },\r\n];\r\nreturn (\r\n {shortCode}\r\n)`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `const options = [\r\n { label: \"Cappuccino\", value: \"cappuccino\", description: \"Coffee frothed up with pressurised steam\" },\r\n { label: \"Americano\", value: \"americano\", description: \"Espresso coffee diluted with hot water\" },\r\n { label: \"Mocha\", value: \"mocha\", description: \"Coffee with chocolate\" },\r\n];\r\nreturn (\r\n {shortCode}\r\n)`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\nexport const SelectExampleWithExtras = () => (\r\n <IcSelect\r\n label=\"What is your favourite coffee?\"\r\n options={[\r\n {\r\n label: \"Cappuccino\",\r\n value: \"cappuccino\",\r\n description: \"Coffee frothed up with pressurised steam\",\r\n },\r\n {\r\n label: \"Americano\",\r\n value: \"americano\",\r\n description: \"Espresso coffee diluted with hot water\",\r\n },\r\n {\r\n label: \"Mocha\",\r\n value: \"mocha\",\r\n description: \"Coffee with chocolate\",\r\n },\r\n ]}\r\n placeholder=\"Select an option…\"\r\n helperText=\"Select one option from the list\"\r\n showClearButton\r\n searchable\r\n onIcChange={(event) => console.log(event.detail.value)}\r\n />\r\n);\r\n\r\n<ComponentPreview snippets={snippetsWithExtras}>\r\n <SelectExampleWithExtras />\r\n</ComponentPreview>\r\n\r\n### Disabled\r\n\r\nexport const snippetsDisabled = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-select \r\n placeholder=\"Select an option…\" \r\n label=\"What is your favourite coffee?\" \r\n disabled=\"true\"\r\n></ic-select>`,\r\n long: `{shortCode}\r\n<script>\r\n const select = document.querySelector(\"ic-select\");\r\n let option = \"Cappuccino\";\r\n select.options = [\r\n { label: \"Cappuccino\", value: \"cappuccino\" },\r\n { label: \"Americano\", value: \"americano\" },\r\n { label: \"Mocha\", value: \"mocha\" },\r\n ];\r\n select.addEventListener(\"icChange\", function (event) {\r\n console.log(event.detail.value);\r\n });\r\n</script>`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcSelect \r\n placeholder=\"Select an option…\" \r\n label=\"What is your favourite coffee?\"\r\n options={options}\r\n disabled\r\n onIcChange={(event) => console.log(event.detail.value)}\r\n/>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `const options = [\r\n { label: \"Cappuccino\", value: \"cappuccino\" },\r\n { label: \"Americano\", value: \"americano\" },\r\n { label: \"Mocha\", value: \"mocha\" },\r\n];\r\nreturn (\r\n {shortCode}\r\n)`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `const options = [\r\n { label: \"Cappuccino\", value: \"cappuccino\" },\r\n { label: \"Americano\", value: \"americano\" },\r\n { label: \"Mocha\", value: \"mocha\" },\r\n];\r\nreturn (\r\n {shortCode}\r\n)`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\nexport const SelectExampleDisabled = () => (\r\n <IcSelect\r\n placeholder=\"Select an option…\"\r\n label=\"What is your favourite coffee?\"\r\n options={[\r\n { label: \"Cappuccino\", value: \"cappuccino\" },\r\n { label: \"Americano\", value: \"americano\" },\r\n { label: \"Mocha\", value: \"mocha\" },\r\n ]}\r\n disabled\r\n onIcChange={(event) => console.log(event.detail.value)}\r\n />\r\n);\r\n\r\n<ComponentPreview snippets={snippetsDisabled}>\r\n <SelectExampleDisabled />\r\n</ComponentPreview>\r\n\r\n### Options disabled\r\n\r\nexport const snippetsOptionDisabled = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-select \r\n placeholder=\"Select an option…\" \r\n label=\"What is your favourite coffee?\"\r\n></ic-select>`,\r\n long: `{shortCode}\r\n<script>\r\n const select = document.querySelector(\"ic-select\");\r\n let option = \"Cappuccino\";\r\n select.options = [\r\n { label: \"Cappuccino\", value: \"cappuccino\" },\r\n { label: \"Americano\", value: \"americano\", disabled: true },\r\n { label: \"Mocha\", value: \"mocha\" },\r\n ];\r\n select.addEventListener(\"icChange\", function (event) {\r\n console.log(event.detail.value);\r\n });\r\n</script>`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcSelect \r\n placeholder=\"Select an option…\" \r\n label=\"What is your favourite coffee?\"\r\n options={options}\r\n onIcChange={(event) => console.log(event.detail.value)}\r\n/>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `const options = [\r\n { label: \"Cappuccino\", value: \"cappuccino\" },\r\n { label: \"Americano\", value: \"americano\", disabled: true },\r\n { label: \"Mocha\", value: \"mocha\" },\r\n];\r\nreturn (\r\n {shortCode}\r\n)`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `const options = [\r\n { label: \"Cappuccino\", value: \"cappuccino\" },\r\n { label: \"Americano\", value: \"americano\", disabled: true },\r\n { label: \"Mocha\", value: \"mocha\" },\r\n];\r\nreturn (\r\n {shortCode}\r\n)`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\nexport const SelectExampleOptionsDisabled = () => (\r\n <IcSelect\r\n placeholder=\"Select an option…\"\r\n label=\"What is your favourite coffee?\"\r\n options={[\r\n { label: \"Cappuccino\", value: \"cappuccino\" },\r\n { label: \"Americano\", value: \"americano\", disabled: true },\r\n { label: \"Mocha\", value: \"mocha\" },\r\n ]}\r\n onIcChange={(event) => console.log(event.detail.value)}\r\n />\r\n);\r\n\r\n<ComponentPreview snippets={snippetsOptionDisabled}>\r\n <SelectExampleOptionsDisabled />\r\n</ComponentPreview>\r\n\r\n### With icon\r\n\r\nexport const snippetsWithIcon = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-select \r\n label=\"What is your favourite coffee?\" \r\n>\r\n <svg\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n width=\"24\"\r\n fill=\"#000000\"\r\n >\r\n <path d=\"M2,21H20V19H2M20,8H18V5H20M20,3H4V13A4,4 0 0,0 8,17H14A4,4 0 0,0 18,13V10H20A2,2 0 0,0 22,8V5C22,3.89 21.1,3 20,3Z\" />\r\n </svg>\r\n</ic-select>`,\r\n long: `{shortCode}\r\n<script>\r\n const select = document.querySelector(\"ic-select\");\r\n let option = \"Cappuccino\";\r\n select.options = [\r\n { label: \"Cappuccino\", value: \"cappuccino\", description: \"Coffee frothed up with pressurised steam\" },\r\n { label: \"Americano\", value: \"americano\", description: \"Espresso coffee diluted with hot water\" },\r\n { label: \"Mocha\", value: \"mocha\", description: \"Coffee with chocolate\" },\r\n ];\r\n select.addEventListener(\"icChange\", function (event) {\r\n console.log(event.detail.value);\r\n });\r\n</script>`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcSelect \r\n label=\"What is your favourite coffee?\"\r\n options={options}\r\n onIcChange={(event) => console.log(event.detail.value)}\r\n>\r\n <SlottedSVG\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n width=\"24\"\r\n fill=\"#000000\"\r\n >\r\n <path d=\"M2,21H20V19H2M20,8H18V5H20M20,3H4V13A4,4 0 0,0 8,17H14A4,4 0 0,0 18,13V10H20A2,2 0 0,0 22,8V5C22,3.89 21.1,3 20,3Z\" />\r\n </SlottedSVG>\r\n</IcSelect>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `const options = [\r\n { label: \"Cappuccino\", value: \"cappuccino\", description: \"Coffee frothed up with pressurised steam\" },\r\n { label: \"Americano\", value: \"americano\", description: \"Espresso coffee diluted with hot water\" },\r\n { label: \"Mocha\", value: \"mocha\", description: \"Coffee with chocolate\" },\r\n];\r\nreturn (\r\n {shortCode}\r\n)`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `const options = [\r\n { label: \"Cappuccino\", value: \"cappuccino\", description: \"Coffee frothed up with pressurised steam\" },\r\n { label: \"Americano\", value: \"americano\", description: \"Espresso coffee diluted with hot water\" },\r\n { label: \"Mocha\", value: \"mocha\", description: \"Coffee with chocolate\" },\r\n];\r\nreturn (\r\n {shortCode}\r\n)`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\nexport const SelectExampleWithIcon = () => (\r\n <IcSelect\r\n label=\"What is your favourite coffee?\"\r\n options={[\r\n {\r\n label: \"Cappuccino\",\r\n value: \"cappuccino\",\r\n description: \"Coffee frothed up with pressurised steam\",\r\n },\r\n {\r\n label: \"Americano\",\r\n value: \"americano\",\r\n description: \"Espresso coffee diluted with hot water\",\r\n },\r\n {\r\n label: \"Mocha\",\r\n value: \"mocha\",\r\n description: \"Coffee with chocolate\",\r\n },\r\n ]}\r\n onIcChange={(event) => console.log(event.detail.value)}\r\n >\r\n <svg\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n width=\"24\"\r\n fill=\"#000000\"\r\n >\r\n <path d=\"M2,21H20V19H2M20,8H18V5H20M20,3H4V13A4,4 0 0,0 8,17H14A4,4 0 0,0 18,13V10H20A2,2 0 0,0 22,8V5C22,3.89 21.1,3 20,3Z\" />\r\n </svg>\r\n </IcSelect>\r\n);\r\n\r\n<ComponentPreview snippets={snippetsWithIcon}>\r\n <SelectExampleWithIcon />\r\n</ComponentPreview>\r\n\r\n### Size small\r\n\r\nexport const snippetsSmall = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-select \r\n label=\"What is your favourite coffee?\" \r\n size=\"small\"\r\n></ic-select>`,\r\n long: `{shortCode}\r\n<script>\r\n const select = document.querySelector(\"ic-select\");\r\n let option = \"Cappuccino\";\r\n select.options = [\r\n { label: \"Espresso\", value: \"espresso\" },\r\n { label: \"Double Espresso\", value: \"doubleespresso\" },\r\n { label: \"Flat White\", value: \"flatwhite\" },\r\n { label: \"Cappuccino\", value: \"cappuccino\" },\r\n { label: \"Americano\", value: \"americano\" },\r\n { label: \"Mocha\", value: \"mocha\" },\r\n ];\r\n select.addEventListener(\"icChange\", function (event) {\r\n console.log(event.detail.value);\r\n });\r\n</script>`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcSelect \r\n label=\"What is your favourite coffee?\"\r\n options={options}\r\n onIcChange={(event) => console.log(event.detail.value)}\r\n size=\"small\"\r\n/>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `const options = [\r\n { label: \"Espresso\", value: \"espresso\" },\r\n { label: \"Double Espresso\", value: \"doubleespresso\" },\r\n { label: \"Flat White\", value: \"flatwhite\" },\r\n { label: \"Cappuccino\", value: \"cappuccino\" },\r\n { label: \"Americano\", value: \"americano\" },\r\n { label: \"Mocha\", value: \"mocha\" },\r\n];\r\nreturn (\r\n {shortCode}\r\n)`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `const options = [\r\n { label: \"Espresso\", value: \"espresso\" },\r\n { label: \"Double Espresso\", value: \"doubleespresso\" },\r\n { label: \"Flat White\", value: \"flatwhite\" },\r\n { label: \"Cappuccino\", value: \"cappuccino\" },\r\n { label: \"Americano\", value: \"americano\" },\r\n { label: \"Mocha\", value: \"mocha\" },\r\n];\r\nreturn (\r\n {shortCode}\r\n)`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\nexport const SelectExampleSmall = () => (\r\n <IcSelect\r\n label=\"What is your favourite coffee?\"\r\n options={[\r\n { label: \"Espresso\", value: \"espresso\" },\r\n { label: \"Double Espresso\", value: \"doubleespresso\" },\r\n { label: \"Flat White\", value: \"flatwhite\" },\r\n { label: \"Cappuccino\", value: \"cappuccino\" },\r\n { label: \"Americano\", value: \"americano\" },\r\n { label: \"Mocha\", value: \"mocha\" },\r\n ]}\r\n onIcChange={(event) => console.log(event.detail.value)}\r\n size=\"small\"\r\n />\r\n);\r\n\r\n<ComponentPreview snippets={snippetsSmall}>\r\n <SelectExampleSmall />\r\n</ComponentPreview>\r\n\r\n### Hidden label\r\n\r\nexport const snippetsHideLabel = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-select \r\n placeholder=\"Select an option…\" \r\n label=\"What is your favourite coffee?\" \r\n hide-label=\"true\"\r\n></ic-select>`,\r\n long: `{shortCode}\r\n<script>\r\n const select = document.querySelector(\"ic-select\");\r\n let option = \"Cappuccino\";\r\n select.options = [\r\n { label: \"Espresso\", value: \"espresso\" },\r\n { label: \"Double Espresso\", value: \"doubleespresso\" },\r\n { label: \"Flat White\", value: \"flatwhite\" },\r\n ];\r\n select.addEventListener(\"icChange\", function (event) {\r\n console.log(event.detail.value);\r\n });\r\n</script>`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcSelect \r\n placeholder=\"Select an option…\" \r\n label=\"What is your favourite coffee?\"\r\n options={options}\r\n hideLabel\r\n onIcChange={(event) => console.log(event.detail.value)}\r\n/>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `const options = [\r\n { label: \"Espresso\", value: \"espresso\" },\r\n { label: \"Double Espresso\", value: \"doubleespresso\" },\r\n { label: \"Flat White\", value: \"flatwhite\" },\r\n];\r\nreturn (\r\n {shortCode}\r\n)`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `const options = [\r\n { label: \"Espresso\", value: \"espresso\" },\r\n { label: \"Double Espresso\", value: \"doubleespresso\" },\r\n { label: \"Flat White\", value: \"flatwhite\" },\r\n];\r\nreturn (\r\n {shortCode}\r\n)`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\nexport const SelectExampleHideLabel = () => (\r\n <IcSelect\r\n placeholder=\"Select an option…\"\r\n label=\"What is your favourite coffee?\"\r\n options={[\r\n { label: \"Espresso\", value: \"espresso\" },\r\n { label: \"Double Espresso\", value: \"doubleespresso\" },\r\n { label: \"Flat White\", value: \"flatwhite\" },\r\n ]}\r\n hideLabel\r\n onIcChange={(event) => console.log(event.detail.value)}\r\n />\r\n);\r\n\r\n<ComponentPreview snippets={snippetsHideLabel}>\r\n <SelectExampleHideLabel />\r\n</ComponentPreview>\r\n\r\n### Groups\r\n\r\nexport const snippetsGroups = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-select \r\n placeholder=\"Select an option…\" \r\n label=\"What is your favourite coffee?\"\r\n></ic-select>`,\r\n long: `{shortCode}\r\n<script>\r\n const select = document.querySelector(\"ic-select\");\r\n let option = \"Cappuccino\";\r\n select.options = [\r\n {\r\n label: \"Fancy\",\r\n children: [\r\n { label: \"Cappuccino\", value: \"Cap\" },\r\n { label: \"Flat white\", value: \"Flat\" },\r\n ],\r\n },\r\n {\r\n label: \"Boring\",\r\n children: [\r\n { label: \"Filter\", value: \"Fil\" },\r\n { label: \"Latte\", value: \"Lat\" },\r\n ],\r\n },\r\n ];\r\n select.addEventListener(\"icChange\", function (event) {\r\n console.log(event.detail.value);\r\n });\r\n</script>`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcSelect \r\n placeholder=\"Select an option…\" \r\n label=\"What is your favourite coffee?\"\r\n options={options}\r\n onIcChange={(event) => console.log(event.detail.value)}\r\n/>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `const options = [\r\n {\r\n label: \"Fancy\",\r\n children: [\r\n { label: \"Cappuccino\", value: \"Cap\" },\r\n { label: \"Flat white\", value: \"Flat\" },\r\n ],\r\n },\r\n {\r\n label: \"Boring\",\r\n children: [\r\n { label: \"Filter\", value: \"Fil\" },\r\n { label: \"Latte\", value: \"Lat\" },\r\n ],\r\n },\r\n];\r\nreturn (\r\n {shortCode}\r\n)`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `const options = [\r\n {\r\n label: \"Fancy\",\r\n children: [\r\n { label: \"Cappuccino\", value: \"Cap\" },\r\n { label: \"Flat white\", value: \"Flat\" },\r\n ],\r\n },\r\n {\r\n label: \"Boring\",\r\n children: [\r\n { label: \"Filter\", value: \"Fil\" },\r\n { label: \"Latte\", value: \"Lat\" },\r\n ],\r\n },\r\n];\r\nreturn (\r\n {shortCode}\r\n)`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\nexport const SelectExampleGroups = () => (\r\n <IcSelect\r\n placeholder=\"Select an option…\"\r\n label=\"What is your favourite coffee?\"\r\n options={[\r\n {\r\n label: \"Fancy\",\r\n children: [\r\n { label: \"Cappuccino\", value: \"Cap\" },\r\n { label: \"Flat white\", value: \"Flat\" },\r\n ],\r\n },\r\n {\r\n label: \"Boring\",\r\n children: [\r\n { label: \"Filter\", value: \"Fil\" },\r\n { label: \"Latte\", value: \"Lat\" },\r\n ],\r\n },\r\n ]}\r\n onIcChange={(event) => console.log(event.detail.value)}\r\n />\r\n);\r\n\r\n<ComponentPreview snippets={snippetsGroups}>\r\n <SelectExampleGroups />\r\n</ComponentPreview>\r\n\r\n### Recommended\r\n\r\nexport const snippetsRecommended = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-select \r\n placeholder=\"Select an option…\" \r\n label=\"What is your favourite coffee?\"\r\n></ic-select>`,\r\n long: `{shortCode}\r\n<script>\r\n const select = document.querySelector(\"ic-select\");\r\n let option = \"Cappuccino\";\r\n select.options = [\r\n { label: \"Espresso\", value: \"espresso\" },\r\n { label: \"Double Espresso\", value: \"doubleespresso\", recommended: true },\r\n { label: \"Flat White\", value: \"flatwhite\" },\r\n { label: \"Cappuccino\", value: \"cappuccino\" },\r\n { label: \"Americano\", value: \"americano\", recommended: true },\r\n { label: \"Mocha\", value: \"mocha\" },\r\n ];\r\n select.addEventListener(\"icChange\", function (event) {\r\n console.log(event.detail.value);\r\n });\r\n</script>`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcSelect \r\n placeholder=\"Select an option…\" \r\n label=\"What is your favourite coffee?\"\r\n options={options}\r\n onIcChange={(event) => console.log(event.detail.value)}\r\n/>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `const options = [\r\n { label: \"Espresso\", value: \"espresso\" },\r\n { label: \"Double Espresso\", value: \"doubleespresso\", recommended: true },\r\n { label: \"Flat White\", value: \"flatwhite\" },\r\n { label: \"Cappuccino\", value: \"cappuccino\" },\r\n { label: \"Americano\", value: \"americano\", recommended: true },\r\n { label: \"Mocha\", value: \"mocha\" },\r\n];\r\nreturn (\r\n {shortCode}\r\n)`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `const options = [\r\n { label: \"Espresso\", value: \"espresso\" },\r\n { label: \"Double Espresso\", value: \"doubleespresso\", recommended: true },\r\n { label: \"Flat White\", value: \"flatwhite\" },\r\n { label: \"Cappuccino\", value: \"cappuccino\" },\r\n { label: \"Americano\", value: \"americano\", recommended: true },\r\n { label: \"Mocha\", value: \"mocha\" },\r\n];\r\nreturn (\r\n {shortCode}\r\n)`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\nexport const SelectExampleRecommended = () => (\r\n <IcSelect\r\n placeholder=\"Select an option…\"\r\n label=\"What is your favourite coffee?\"\r\n options={[\r\n { label: \"Espresso\", value: \"espresso\" },\r\n {\r\n label: \"Double Espresso\",\r\n value: \"doubleespresso\",\r\n recommended: true,\r\n },\r\n { label: \"Flat White\", value: \"flatwhite\" },\r\n { label: \"Cappuccino\", value: \"cappuccino\" },\r\n { label: \"Americano\", value: \"americano\", recommended: true },\r\n { label: \"Mocha\", value: \"mocha\" },\r\n ]}\r\n onIcChange={(event) => console.log(event.detail.value)}\r\n />\r\n);\r\n\r\n<ComponentPreview snippets={snippetsRecommended}>\r\n <SelectExampleRecommended />\r\n</ComponentPreview>\r\n\r\n### Validation\r\n\r\nexport const snippetsValidation = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-select \r\n placeholder=\"Select an option…\" \r\n label=\"What is your favourite coffee?\" \r\n validation-status=\"success\" \r\n validation-text=\"Coffee available\"\r\n value=\"americano\"\r\n id=\"1\"\r\n></ic-select>\r\n<ic-select\r\n placeholder=\"Select an option…\"\r\n label=\"What is your favourite coffee?\"\r\n validation-status=\"warning\" \r\n validation-text=\"Only a few left\"\r\n value=\"cappuccino\"\r\n id=\"2\"\r\n></ic-select>\r\n<ic-select \r\n placeholder=\"Select an option…\" \r\n label=\"What is your favourite coffee?\" \r\n validation-status=\"error\" \r\n validation-text=\"Coffee unavailable\"\r\n value=\"mocha\"\r\n id=\"3\"\r\n></ic-select>`,\r\n long: `{shortCode}\r\n<script>\r\n const select1 = document.querySelector(\"#1\");\r\n const select2 = document.querySelector(\"#2\");\r\n const select3 = document.querySelector(\"#3\");\r\n select1.options = [\r\n { label: \"Espresso\", value: \"espresso\" },\r\n { label: \"Double Espresso\", value: \"doubleespresso\" },\r\n { label: \"Flat White\", value: \"flatwhite\" },\r\n { label: \"Cappuccino\", value: \"cappuccino\" },\r\n { label: \"Americano\", value: \"americano\" },\r\n { label: \"Mocha\", value: \"mocha\" },\r\n ];\r\n select2.options = [\r\n { label: \"Espresso\", value: \"espresso\" },\r\n { label: \"Double Espresso\", value: \"doubleespresso\" },\r\n { label: \"Flat White\", value: \"flatwhite\" },\r\n { label: \"Cappuccino\", value: \"cappuccino\" },\r\n { label: \"Americano\", value: \"americano\" },\r\n { label: \"Mocha\", value: \"mocha\" },\r\n ];\r\n select3.options = [\r\n { label: \"Espresso\", value: \"espresso\" },\r\n { label: \"Double Espresso\", value: \"doubleespresso\" },\r\n { label: \"Flat White\", value: \"flatwhite\" },\r\n { label: \"Cappuccino\", value: \"cappuccino\" },\r\n { label: \"Americano\", value: \"americano\" },\r\n { label: \"Mocha\", value: \"mocha\" },\r\n ];\r\n</script>`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcSelect \r\n placeholder=\"Select an option…\" \r\n label=\"What is your favourite coffee?\"\r\n value=\"americano\"\r\n options={options}\r\n validationStatus=\"success\"\r\n validationText=\"Coffee available\"\r\n onIcChange={(event) => console.log(event.detail.value)}\r\n/>\r\n<IcSelect \r\n placeholder=\"Select an option…\" l\r\n abel=\"What is your favourite coffee?\"\r\n value=\"cappuccino\"\r\n options={options}\r\n validationStatus=\"warning\" \r\n validationText=\"Only a few left\"\r\n onIcChange={(event) => console.log(event.detail.value)}\r\n/>\r\n<IcSelect \r\n placeholder=\"Select an option…\" \r\n label=\"What is your favourite coffee?\"\r\n value=\"mocha\"\r\n options={options}\r\n validationStatus=\"error\" \r\n validationText=\"Coffee unavailable\"\r\n onIcChange={(event) => console.log(event.detail.value)}\r\n/>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `const options = [\r\n { label: \"Espresso\", value: \"espresso\" },\r\n { label: \"Double Espresso\", value: \"doubleespresso\" },\r\n { label: \"Flat White\", value: \"flatwhite\" },\r\n { label: \"Cappuccino\", value: \"cappuccino\" },\r\n { label: \"Americano\", value: \"americano\" },\r\n { label: \"Mocha\", value: \"mocha\" },\r\n];\r\nreturn (\r\n <>\r\n {shortCode}\r\n </>\r\n)`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `const options = [\r\n { label: \"Espresso\", value: \"espresso\" },\r\n { label: \"Double Espresso\", value: \"doubleespresso\" },\r\n { label: \"Flat White\", value: \"flatwhite\" },\r\n { label: \"Cappuccino\", value: \"cappuccino\" },\r\n { label: \"Americano\", value: \"americano\" },\r\n { label: \"Mocha\", value: \"mocha\" },\r\n];\r\nreturn (\r\n <>\r\n {shortCode}\r\n </>\r\n)`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\nexport const SelectExampleValidation = () => (\r\n <div>\r\n <IcSelect\r\n placeholder=\"Select an option…\"\r\n label=\"What is your favourite coffee?\"\r\n value=\"americano\"\r\n options={[\r\n { label: \"Espresso\", value: \"espresso\" },\r\n { label: \"Double Espresso\", value: \"doubleespresso\" },\r\n { label: \"Flat White\", value: \"flatwhite\" },\r\n { label: \"Cappuccino\", value: \"cappuccino\" },\r\n { label: \"Americano\", value: \"americano\" },\r\n { label: \"Mocha\", value: \"mocha\" },\r\n ]}\r\n validationStatus=\"success\"\r\n validationText=\"Coffee available\"\r\n onIcChange={(event) => console.log(event.detail.value)}\r\n />\r\n <IcSelect\r\n placeholder=\"Select an option…\"\r\n label=\"What is your favourite coffee?\"\r\n value=\"cappuccino\"\r\n options={[\r\n { label: \"Espresso\", value: \"espresso\" },\r\n { label: \"Double Espresso\", value: \"doubleespresso\" },\r\n { label: \"Flat White\", value: \"flatwhite\" },\r\n { label: \"Cappuccino\", value: \"cappuccino\" },\r\n { label: \"Americano\", value: \"americano\" },\r\n { label: \"Mocha\", value: \"mocha\" },\r\n ]}\r\n validationStatus=\"warning\"\r\n validationText=\"Only a few left\"\r\n onIcChange={(event) => console.log(event.detail.value)}\r\n />\r\n <IcSelect\r\n placeholder=\"Select an option…\"\r\n label=\"What is your favourite coffee?\"\r\n value=\"mocha\"\r\n options={[\r\n { label: \"Espresso\", value: \"espresso\" },\r\n { label: \"Double Espresso\", value: \"doubleespresso\" },\r\n { label: \"Flat White\", value: \"flatwhite\" },\r\n { label: \"Cappuccino\", value: \"cappuccino\" },\r\n { label: \"Americano\", value: \"americano\" },\r\n { label: \"Mocha\", value: \"mocha\" },\r\n ]}\r\n validationStatus=\"error\"\r\n validationText=\"Coffee unavailable\"\r\n onIcChange={(event) => console.log(event.detail.value)}\r\n />\r\n </div>\r\n);\r\n\r\n<ComponentPreview snippets={snippetsValidation}>\r\n <SelectExampleValidation />\r\n</ComponentPreview>\r\n\r\n### Custom elements in options\r\n\r\nexport const snippetsCustomElements = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-select \r\n placeholder=\"Select an option...\" \r\n label=\"What is your favourite coffee?\"\r\n></ic-select>`,\r\n long: `{shortCode}\r\n<script>\r\n const select = document.querySelector(\"ic-select\");\r\n select.options = [\r\n { \r\n label: \"Cappuccino\", \r\n value: \"Cap\", \r\n },\r\n { \r\n label: \"Latte\", \r\n value: \"Lat\",\r\n element: {\r\n component: '<ic-status-tag label=\"Neutral status\"></ic-status-tag>',\r\n ariaLabel: \"Neutral status tag\",\r\n }\r\n },\r\n { \r\n label: \"Americano\", \r\n value: \"Ame\",\r\n icon: '<svg aria-labelledby=\"warning-title\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"#000000\"><g id=\"warning\"><path id=\"Vector\" d=\"M4.47 20.5037H19.53C21.07 20.5037 22.03 18.8337 21.26 17.5037L13.73 4.49375C12.96 3.16375 11.04 3.16375 10.27 4.49375L2.74 17.5037C1.97 18.8337 2.93 20.5037 4.47 20.5037ZM12 13.5037C11.45 13.5037 11 13.0537 11 12.5037V10.5037C11 9.95375 11.45 9.50375 12 9.50375C12.55 9.50375 13 9.95375 13 10.5037V12.5037C13 13.0537 12.55 13.5037 12 13.5037ZM13 17.5037H11V15.5037H13V17.5037Z\" /></g></svg>'\r\n },\r\n ];\r\n select.addEventListener(\"icChange\", function (event) {\r\n console.log(event.detail.value);\r\n });\r\n</script>`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcSelect \r\n placeholder=\"Select an option...\" \r\n label=\"What is your favourite coffee?\"\r\n options={options}\r\n onIcChange={(event) => console.log(event.detail.value)}\r\n/>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `const options = [\r\n { \r\n label: \"Cappuccino\", \r\n value: \"Cap\", \r\n },\r\n { \r\n label: \"Latte\", \r\n value: \"Lat\",\r\n element: {\r\n component: '<ic-status-tag label=\"Neutral status\"></ic-status-tag>',\r\n ariaLabel: \"Neutral status tag\",\r\n }\r\n },\r\n { \r\n label: \"Americano\", \r\n value: \"Ame\",\r\n icon: '<svg aria-labelledby=\"warning-title\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"#000000\"><g id=\"warning\"><path id=\"Vector\" d=\"M4.47 20.5037H19.53C21.07 20.5037 22.03 18.8337 21.26 17.5037L13.73 4.49375C12.96 3.16375 11.04 3.16375 10.27 4.49375L2.74 17.5037C1.97 18.8337 2.93 20.5037 4.47 20.5037ZM12 13.5037C11.45 13.5037 11 13.0537 11 12.5037V10.5037C11 9.95375 11.45 9.50375 12 9.50375C12.55 9.50375 13 9.95375 13 10.5037V12.5037C13 13.0537 12.55 13.5037 12 13.5037ZM13 17.5037H11V15.5037H13V17.5037Z\" /></g></svg>'\r\n },\r\n];\r\nreturn (\r\n {shortCode}\r\n)`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `const options = [\r\n { \r\n label: \"Cappuccino\", \r\n value: \"Cap\", \r\n },\r\n { \r\n label: \"Latte\", \r\n value: \"Lat\",\r\n element: {\r\n component: '<ic-status-tag label=\"Neutral status\"></ic-status-tag>',\r\n ariaLabel: \"Neutral status tag\",\r\n }\r\n },\r\n { \r\n label: \"Americano\", \r\n value: \"Ame\",\r\n icon: '<svg aria-labelledby=\"warning-title\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"#000000\"><g id=\"warning\"><path id=\"Vector\" d=\"M4.47 20.5037H19.53C21.07 20.5037 22.03 18.8337 21.26 17.5037L13.73 4.49375C12.96 3.16375 11.04 3.16375 10.27 4.49375L2.74 17.5037C1.97 18.8337 2.93 20.5037 4.47 20.5037ZM12 13.5037C11.45 13.5037 11 13.0537 11 12.5037V10.5037C11 9.95375 11.45 9.50375 12 9.50375C12.55 9.50375 13 9.95375 13 10.5037V12.5037C13 13.0537 12.55 13.5037 12 13.5037ZM13 17.5037H11V15.5037H13V17.5037Z\" /></g></svg>'\r\n },\r\n];\r\nreturn (\r\n {shortCode}\r\n)`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\nexport const optionsWithCustomElements = [\r\n {\r\n label: \"Cappuccino\",\r\n value: \"Cap\",\r\n },\r\n {\r\n label: \"Latte\",\r\n value: \"Lat\",\r\n element: {\r\n component: `<ic-status-tag label=\"Neutral status\"></ic-status-tag>`,\r\n ariaLabel: \"Neutral status tag\",\r\n },\r\n },\r\n {\r\n label: \"Americano\",\r\n value: \"Ame\",\r\n icon: `<svg aria-labelledby=\"warning-title\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"#000000\"><g id=\"warning\"><path id=\"Vector\" d=\"M4.47 20.5037H19.53C21.07 20.5037 22.03 18.8337 21.26 17.5037L13.73 4.49375C12.96 3.16375 11.04 3.16375 10.27 4.49375L2.74 17.5037C1.97 18.8337 2.93 20.5037 4.47 20.5037ZM12 13.5037C11.45 13.5037 11 13.0537 11 12.5037V10.5037C11 9.95375 11.45 9.50375 12 9.50375C12.55 9.50375 13 9.95375 13 10.5037V12.5037C13 13.0537 12.55 13.5037 12 13.5037ZM13 17.5037H11V15.5037H13V17.5037Z\" /></g></svg>`,\r\n },\r\n];\r\n\r\n<ComponentPreview snippets={snippetsCustomElements}>\r\n <IcSelect\r\n placeholder=\"Select an option…\"\r\n label=\"What is your favourite coffee?\"\r\n options={optionsWithCustomElements}\r\n onIcChange={(event) => console.log(event.detail.value)}\r\n />\r\n</ComponentPreview>\r\n\r\n### Searchable\r\n\r\nexport const snippetsSearchable = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-select \r\n placeholder=\"Select an option…\"\r\n label=\"What is your favourite coffee?\" \r\n searchable=\"true\"\r\n></ic-select>`,\r\n long: `{shortCode}\r\n<script>\r\n const select = document.querySelector(\"ic-select\");\r\n let option = \"Cappuccino\";\r\n select.options = [\r\n { label: \"Cappuccino\", value: \"Cap\" },\r\n { label: \"Latte\", value: \"Lat\" },\r\n { label: \"Americano\", value: \"Ame\" },\r\n { label: \"Flat white\", value: \"Fla\" },\r\n { label: \"Mocha\", value: \"Moc\" },\r\n { label: \"Macchiato\", value: \"Mac\" },\r\n { label: \"Café au lait\", value: \"Caf\" },\r\n { label: \"Espresso\", value: \"Esp\" },\r\n { label: \"Cortado\", value: \"Cor\" },\r\n { label: \"Latte macchiato\", value: \"Lam\" },\r\n ];\r\n select.addEventListener(\"icChange\", function (event) {\r\n console.log(event.detail.value);\r\n });\r\n</script>`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcSelect \r\n placeholder=\"Select an option…\"\r\n label=\"What is your favourite coffee?\"\r\n options={options}\r\n searchable\r\n onIcChange={(event) => console.log(event.detail.value)}\r\n/>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `const options = [\r\n { label: \"Cappuccino\", value: \"Cap\" },\r\n { label: \"Latte\", value: \"Lat\" },\r\n { label: \"Americano\", value: \"Ame\" },\r\n { label: \"Flat white\", value: \"Fla\" },\r\n { label: \"Mocha\", value: \"Moc\" },\r\n { label: \"Macchiato\", value: \"Mac\" },\r\n { label: \"Café au lait\", value: \"Caf\" },\r\n { label: \"Espresso\", value: \"Esp\" },\r\n { label: \"Cortado\", value: \"Cor\" },\r\n { label: \"Latte macchiato\", value: \"Lam\" },\r\n];\r\nreturn (\r\n {shortCode}\r\n)`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `const options = [\r\n { label: \"Cappuccino\", value: \"Cap\" },\r\n { label: \"Latte\", value: \"Lat\" },\r\n { label: \"Americano\", value: \"Ame\" },\r\n { label: \"Flat white\", value: \"Fla\" },\r\n { label: \"Mocha\", value: \"Moc\" },\r\n { label: \"Macchiato\", value: \"Mac\" },\r\n { label: \"Café au lait\", value: \"Caf\" },\r\n { label: \"Espresso\", value: \"Esp\" },\r\n { label: \"Cortado\", value: \"Cor\" },\r\n { label: \"Latte macchiato\", value: \"Lam\" },\r\n];\r\nreturn (\r\n {shortCode}\r\n)`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\nexport const SearchableSelectExample = () => (\r\n <IcSelect\r\n placeholder=\"Select an option…\"\r\n label=\"What is your favourite coffee?\"\r\n options={[\r\n { label: \"Cappuccino\", value: \"Cap\" },\r\n { label: \"Latte\", value: \"Lat\" },\r\n { label: \"Americano\", value: \"Ame\" },\r\n { label: \"Flat white\", value: \"Fla\" },\r\n { label: \"Mocha\", value: \"Moc\" },\r\n { label: \"Macchiato\", value: \"Mac\" },\r\n { label: \"Café au lait\", value: \"Caf\" },\r\n { label: \"Espresso\", value: \"Esp\" },\r\n { label: \"Cortado\", value: \"Cor\" },\r\n { label: \"Latte macchiato\", value: \"Lam\" },\r\n ]}\r\n searchable\r\n onIcChange={(event) => console.log(event.detail.value)}\r\n />\r\n);\r\n\r\n<ComponentPreview snippets={snippetsSearchable}>\r\n <SearchableSelectExample />\r\n</ComponentPreview>\r\n\r\n### Searchable – with descriptions included in search\r\n\r\nexport const snippetsSearchableWithDescriptions = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-select\r\n placeholder=\"Select an option…\"\r\n label=\"What is your favourite coffee?\" \r\n searchable=\"true\" \r\n include-description-in-search=\"true\"\r\n></ic-select>`,\r\n long: `{shortCode}\r\n<script>\r\n const select = document.querySelector(\"ic-select\");\r\n let option = \"Cappuccino\";\r\n select.options = [\r\n { label: \"Cappuccino\", value: \"Cap\", description: \"Coffee frothed up with pressurised steam\" },\r\n { label: \"Americano\", value: \"Ame\", description: \"Espresso coffee diluted with hot water\" },\r\n { label: \"Mocha\", value: \"Moc\", description: \"Coffee with chocolate\" },\r\n { label: \"Latte\", value: \"Lat\", description: \"Milky coffee with one or two shots of espresso\" },\r\n { label: \"Flat white\", value: \"Fla\", description: \"Coffee with frothed milk poured over espresso\" },\r\n { label: \"Macchiato\", value: \"Mac\", description: \"Espresso coffee topped with steamed milk\" },\r\n { label: \"Café au lait\", value: \"Caf\", description: \"Brewed coffee with steamed milk\" },\r\n { label: \"Espresso\", value: \"Esp\", description: \"Concentrated form of coffee\" },\r\n { label: \"Cortado\", value: \"Cor\", description: \"Coffee cut with milk\" },\r\n { label: \"Latte macchiato\", value: \"Lam\", description: \"Espresso coffee with milk and a spoonful of foamed milk\" },\r\n ];\r\n select.addEventListener(\"icChange\", function (event) {\r\n console.log(event.detail.value);\r\n });\r\n</script>`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcSelect \r\n placeholder=\"Select an option…\"\r\n label=\"What is your favourite coffee?\"\r\n options={options}\r\n searchable\r\n includeDescriptionsInSearch\r\n onIcChange={(event) => console.log(event.detail.value)}\r\n/>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `const options = [\r\n { label: \"Cappuccino\", value: \"Cap\", description: \"Coffee frothed up with pressurised steam\" },\r\n { label: \"Americano\", value: \"Ame\", description: \"Espresso coffee diluted with hot water\" },\r\n { label: \"Mocha\", value: \"Moc\", description: \"Coffee with chocolate\" },\r\n { label: \"Latte\", value: \"Lat\", description: \"Milky coffee with one or two shots of espresso\" },\r\n { label: \"Flat white\", value: \"Fla\", description: \"Coffee with frothed milk poured over espresso\" },\r\n { label: \"Macchiato\", value: \"Mac\", description: \"Espresso coffee topped with steamed milk\" },\r\n { label: \"Café au lait\", value: \"Caf\", description: \"Brewed coffee with steamed milk\" },\r\n { label: \"Espresso\", value: \"Esp\", description: \"Concentrated form of coffee\" },\r\n { label: \"Cortado\", value: \"Cor\", description: \"Coffee cut with milk\" },\r\n { label: \"Latte macchiato\", value: \"Lam\", description: \"Espresso coffee with milk and a spoonful of foamed milk\" },\r\n];\r\nreturn (\r\n {shortCode}\r\n)`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `const options = [\r\n { label: \"Cappuccino\", value: \"Cap\", description: \"Coffee frothed up with pressurised steam\" },\r\n { label: \"Americano\", value: \"Ame\", description: \"Espresso coffee diluted with hot water\" },\r\n { label: \"Mocha\", value: \"Moc\", description: \"Coffee with chocolate\" },\r\n { label: \"Latte\", value: \"Lat\", description: \"Milky coffee with one or two shots of espresso\" },\r\n { label: \"Flat white\", value: \"Fla\", description: \"Coffee with frothed milk poured over espresso\" },\r\n { label: \"Macchiato\", value: \"Mac\", description: \"Espresso coffee topped with steamed milk\" },\r\n { label: \"Café au lait\", value: \"Caf\", description: \"Brewed coffee with steamed milk\" },\r\n { label: \"Espresso\", value: \"Esp\", description: \"Concentrated form of coffee\" },\r\n { label: \"Cortado\", value: \"Cor\", description: \"Coffee cut with milk\" },\r\n { label: \"Latte macchiato\", value: \"Lam\", description: \"Espresso coffee with milk and a spoonful of foamed milk\" },\r\n];\r\nreturn (\r\n {shortCode}\r\n)`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\nexport const SearchableSelectWithDescriptionsExample = () => (\r\n <IcSelect\r\n placeholder=\"Select an option…\"\r\n label=\"What is your favourite coffee?\"\r\n options={[\r\n {\r\n label: \"Cappuccino\",\r\n value: \"Cap\",\r\n description: \"Coffee frothed up with pressurised steam\",\r\n },\r\n {\r\n label: \"Americano\",\r\n value: \"Ame\",\r\n description: \"Espresso coffee diluted with hot water\",\r\n },\r\n { label: \"Mocha\", value: \"Moc\", description: \"Coffee with chocolate\" },\r\n {\r\n label: \"Latte\",\r\n value: \"Lat\",\r\n description: \"Milky coffee with one or two shots of espresso\",\r\n },\r\n {\r\n label: \"Flat white\",\r\n value: \"Fla\",\r\n description: \"Coffee with frothed milk poured over espresso\",\r\n },\r\n {\r\n label: \"Macchiato\",\r\n value: \"Mac\",\r\n description: \"Espresso coffee topped with steamed milk\",\r\n },\r\n {\r\n label: \"Café au lait\",\r\n value: \"Caf\",\r\n description: \"Brewed coffee with steamed milk\",\r\n },\r\n {\r\n label: \"Espresso\",\r\n value: \"Esp\",\r\n description: \"Concentrated form of coffee\",\r\n },\r\n { label: \"Cortado\", value: \"Cor\", description: \"Coffee cut with milk\" },\r\n {\r\n label: \"Latte macchiato\",\r\n value: \"Lam\",\r\n description: \"Espresso coffee with milk and a spoonful of foamed milk\",\r\n },\r\n ]}\r\n searchable\r\n includeDescriptionsInSearch\r\n onIcChange={(event) => console.log(event.detail.value)}\r\n />\r\n);\r\n\r\n<ComponentPreview snippets={snippetsSearchableWithDescriptions}>\r\n <SearchableSelectWithDescriptionsExample />\r\n</ComponentPreview>\r\n\r\n### Searchable – with group titles included in search\r\n\r\nexport const snippetsSearchableWithGroups = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-select\r\n placeholder=\"Select an option…\"\r\n label=\"What is your favourite coffee?\" \r\n searchable=\"true\" \r\n include-group-titles-in-search=\"true\"\r\n></ic-select>`,\r\n long: `{shortCode}\r\n<script>\r\n const select = document.querySelector(\"ic-select\");\r\n let option = \"Cappuccino\";\r\n select.options = [\r\n {\r\n label: \"Fancy\",\r\n children: [\r\n { label: \"Cappuccino\", value: \"Cap\" },\r\n { label: \"Flat white\", value: \"Flat\" },\r\n { label: \"Mocha\", value: \"Moc\" },\r\n { label: \"Macchiato\", value: \"Mac\" },\r\n { label: \"Cortado\", value: \"Cor\" },\r\n { label: \"Latte macchiato\", value: \"Lam\" },\r\n ],\r\n },\r\n {\r\n label: \"Boring\",\r\n children: [\r\n { label: \"Filter\", value: \"Fil\" },\r\n { label: \"Latte\", value: \"Lat\" },\r\n { label: \"Americano\", value: \"Ame\" },\r\n { label: \"Espresso\", value: \"Esp\" },\r\n ],\r\n },\r\n ];\r\n select.addEventListener(\"icChange\", function (event) {\r\n console.log(event.detail.value);\r\n });\r\n</script>`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcSelect \r\n placeholder=\"Select an option…\"\r\n label=\"What is your favourite coffee?\"\r\n options={options}\r\n searchable\r\n includeGroupTitlesInSearch\r\n onIcChange={(event) => console.log(event.detail.value)}\r\n/>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `const options = [\r\n {\r\n label: \"Fancy\",\r\n children: [\r\n { label: \"Cappuccino\", value: \"Cap\" },\r\n { label: \"Flat white\", value: \"Flat\" },\r\n { label: \"Mocha\", value: \"Moc\" },\r\n { label: \"Macchiato\", value: \"Mac\" },\r\n { label: \"Cortado\", value: \"Cor\" },\r\n { label: \"Latte macchiato\", value: \"Lam\" },\r\n ],\r\n },\r\n {\r\n label: \"Boring\",\r\n children: [\r\n { label: \"Filter\", value: \"Fil\" },\r\n { label: \"Latte\", value: \"Lat\" },\r\n { label: \"Americano\", value: \"Ame\" },\r\n { label: \"Espresso\", value: \"Esp\" },\r\n ],\r\n },\r\n];\r\nreturn (\r\n {shortCode}\r\n)`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `const options = [\r\n {\r\n label: \"Fancy\",\r\n children: [\r\n { label: \"Cappuccino\", value: \"Cap\" },\r\n { label: \"Flat white\", value: \"Flat\" },\r\n { label: \"Mocha\", value: \"Moc\" },\r\n { label: \"Macchiato\", value: \"Mac\" },\r\n { label: \"Cortado\", value: \"Cor\" },\r\n { label: \"Latte macchiato\", value: \"Lam\" },\r\n ],\r\n },\r\n {\r\n label: \"Boring\",\r\n children: [\r\n { label: \"Filter\", value: \"Fil\" },\r\n { label: \"Latte\", value: \"Lat\" },\r\n { label: \"Americano\", value: \"Ame\" },\r\n { label: \"Espresso\", value: \"Esp\" },\r\n ],\r\n },\r\n];\r\nreturn (\r\n {shortCode}\r\n)`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\nexport const SearchableSelectWithGroupsExample = () => (\r\n <IcSelect\r\n placeholder=\"Select an option…\"\r\n label=\"What is your favourite coffee?\"\r\n options={[\r\n {\r\n label: \"Fancy\",\r\n children: [\r\n { label: \"Cappuccino\", value: \"Cap\" },\r\n { label: \"Flat white\", value: \"Flat\" },\r\n { label: \"Mocha\", value: \"Moc\" },\r\n { label: \"Macchiato\", value: \"Mac\" },\r\n { label: \"Cortado\", value: \"Cor\" },\r\n { label: \"Latte macchiato\", value: \"Lam\" },\r\n ],\r\n },\r\n {\r\n label: \"Boring\",\r\n children: [\r\n { label: \"Filter\", value: \"Fil\" },\r\n { label: \"Latte\", value: \"Lat\" },\r\n { label: \"Americano\", value: \"Ame\" },\r\n { label: \"Espresso\", value: \"Esp\" },\r\n ],\r\n },\r\n ]}\r\n searchable\r\n includeGroupTitlesInSearch\r\n onIcChange={(event) => console.log(event.detail.value)}\r\n />\r\n);\r\n\r\n<ComponentPreview snippets={snippetsSearchableWithGroups}>\r\n <SearchableSelectWithGroupsExample />\r\n</ComponentPreview>\r\n\r\n## Custom filtering example\r\n\r\nThis example shows how to filter data asynchronously when the value in the select field changes. The data is mocked and displayed after a one second delay, but could be replaced with a call to an API or database.\r\n\r\nexport const customFiltering = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-select\r\n placeholder=\"Select an option…\"\r\n label=\"What is your favourite coffee?\"\r\n searchable=\"true\"\r\n debounce=\"300\"\r\n disable-filter=\"true\"\r\n id=\"external-filter-select\"\r\n characters-until-suggestions=\"2\"\r\n></ic-select>`,\r\n long: `{shortCode}\r\n<script>\r\n const mockData = [\r\n { label: \"Espresso\", value: \"Esp\" },\r\n { label: \"Double Espresso\", value: \"Dou\" },\r\n { label: \"Cappuccino\", value: \"Cap\" },\r\n { label: \"Latte\", value: \"Lat\" },\r\n { label: \"Americano\", value: \"Ame\" },\r\n { label: \"Filter\", value: \"Fil\" },\r\n { label: \"Flat white\", value: \"Fla\" },\r\n { label: \"Mocha\", value: \"Moc\" },\r\n { label: \"Macchiato\", value: \"Mac\" },\r\n ];\r\n const select = document.querySelector(\"#external-filter-select\");\r\n let selectedValue = \"\";\r\n select.addEventListener(\"icClear\", function (event) {\r\n select.options = [];\r\n });\r\n select.addEventListener(\"icOptionSelect\", function (event) {\r\n selectedValue = event.detail.value;\r\n });\r\n select.addEventListener(\"icChange\", function (event) {\r\n const value = event.detail.value;\r\n console.log(value);\r\n if (value !== selectedValue) {\r\n if (value && value.length > 1) {\r\n mockAPI = (query) => {\r\n filteredResults = mockData.filter((item) =>\r\n item.label.toLowerCase().includes(query.toLowerCase())\r\n );\r\n return new Promise((resolve) =>\r\n setTimeout(() => resolve(filteredResults), 1000)\r\n );\r\n };\r\n mockAPI(value).then((results) => {\r\n select.options = results;\r\n });\r\n } else {\r\n select.options = [];\r\n }\r\n }\r\n }); \r\n</script>`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcSelect \r\n placeholder=\"Select an option…\"\r\n label=\"What is your favourite coffee?\"\r\n debounce={300}\r\n searchable\r\n disableFilter\r\n options={results} \r\n onIcOptionSelect={(event) => setSelectedValue(event.detail.value)}\r\n onIcClear={() => setResults([])}\r\n onIcChange={changeHandler}\r\n/>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `const mockData = [\r\n { label: \"Espresso\", value: \"Esp\" },\r\n { label: \"Double Espresso\", value: \"Dou\" },\r\n { label: \"Cappuccino\", value: \"Cap\" },\r\n { label: \"Latte\", value: \"Lat\" },\r\n { label: \"Americano\", value: \"Ame\" },\r\n { label: \"Filter\", value: \"Fil\" },\r\n { label: \"Flat white\", value: \"Fla\" },\r\n { label: \"Mocha\", value: \"Moc\" },\r\n { label: \"Macchiato\", value: \"Mac\" },\r\n];\r\nconst [results, setResults] = useState([]);\r\nconst [selectedValue, setSelectedValue] = useState(\"\");\r\nconst changeHandler = (event) => {\r\n const newValue = event.detail.value;\r\n console.log(newValue);\r\n if (newValue !== selectedValue) {\r\n if (newValue && newValue.length > 1) {\r\n const mockAPI = (query) => {\r\n const filteredResults = mockData.filter((item) => \r\n item.label.toLowerCase().includes(query.toLowerCase()));\r\n return new Promise(resolve => { \r\n setTimeout(() => resolve(filteredResults), 1000)\r\n });\r\n };\r\n mockAPI(newValue).then((results) => setResults(results));\r\n } else {\r\n setResults([]);\r\n }\r\n } \r\n}\r\nreturn(\r\n <>\r\n {shortCode}\r\n </>\r\n)`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `const mockData = [\r\n { label: \"Espresso\", value: \"Esp\" },\r\n { label: \"Double Espresso\", value: \"Dou\" },\r\n { label: \"Cappuccino\", value: \"Cap\" },\r\n { label: \"Latte\", value: \"Lat\" },\r\n { label: \"Americano\", value: \"Ame\" },\r\n { label: \"Filter\", value: \"Fil\" },\r\n { label: \"Flat white\", value: \"Fla\" },\r\n { label: \"Mocha\", value: \"Moc\" },\r\n { label: \"Macchiato\", value: \"Mac\" },\r\n];\r\nconst [results, setResults] = useState([]);\r\nconst [selectedValue, setSelectedValue] = useState(\"\");\r\nconst changeHandler = (event) => {\r\n const newValue = event.detail.value;\r\n console.log(newValue);\r\n if (newValue !== selectedValue) {\r\n if (newValue && newValue.length > 1) {\r\n const mockAPI = (query) => {\r\n const filteredResults = mockData.filter((item) => \r\n item.label.toLowerCase().includes(query.toLowerCase()));\r\n return new Promise(resolve => { \r\n setTimeout(() => resolve(filteredResults), 1000)\r\n });\r\n };\r\n mockAPI(newValue).then((results) => setResults(results));\r\n } else {\r\n setResults([]);\r\n }\r\n } \r\n}\r\nreturn(\r\n <>\r\n {shortCode}\r\n </>\r\n)`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\nexport const CustomFilterExample = () => {\r\n const mockData = [\r\n { label: \"Espresso\", value: \"Esp\" },\r\n { label: \"Double Espresso\", value: \"Dou\" },\r\n { label: \"Cappuccino\", value: \"Cap\" },\r\n { label: \"Latte\", value: \"Lat\" },\r\n { label: \"Americano\", value: \"Ame\" },\r\n { label: \"Filter\", value: \"Fil\" },\r\n { label: \"Flat white\", value: \"Fla\" },\r\n { label: \"Mocha\", value: \"Moc\" },\r\n { label: \"Macchiato\", value: \"Mac\" },\r\n ];\r\n const [results, setResults] = React.useState([]);\r\n const [selectedValue, setSelectedValue] = React.useState(\"\");\r\n const changeHandler = (event) => {\r\n const newValue = event.detail.value;\r\n console.log(newValue);\r\n if (newValue !== selectedValue) {\r\n if (newValue && newValue.length > 1) {\r\n const mockAPI = (query) => {\r\n const filteredResults = mockData.filter((item) =>\r\n item.label.toLowerCase().includes(query.toLowerCase())\r\n );\r\n return new Promise((resolve) => {\r\n setTimeout(() => resolve(filteredResults), 1000);\r\n });\r\n };\r\n mockAPI(newValue).then((newResults) => setResults(newResults));\r\n } else {\r\n setResults([]);\r\n }\r\n }\r\n };\r\n return (\r\n <IcSelect\r\n placeholder=\"Select an option…\"\r\n label=\"What is your favourite coffee?\"\r\n debounce=\"300\"\r\n searchable\r\n disableFilter\r\n charactersUntilSuggestions=\"2\"\r\n options={results}\r\n onIcOptionSelect={(event) => setSelectedValue(event.detail.value)}\r\n onIcClear={() => setResults([])}\r\n onIcChange={changeHandler}\r\n />\r\n );\r\n};\r\n\r\n<ComponentPreview snippets={customFiltering}>\r\n <CustomFilterExample />\r\n</ComponentPreview>\r\n",
"path": "/components/select/code",
"date": "2024-07-02",
"title": "Select",
@@ -3311,16 +3311,16 @@
}
],
"meta": {
- "relativePath": "components/select/code.mdx",
- "createdAt": "2024-11-06T10:27:49.408Z",
- "lastModified": "2024-11-06T10:19:00.116Z",
- "size": 51973,
- "formattedSize": "50.8 KB"
+ "relativePath": "components\\select\\code.mdx",
+ "createdAt": "2024-12-04T13:23:54.113Z",
+ "lastModified": "2024-12-04T13:23:54.113Z",
+ "size": 53805,
+ "formattedSize": "52.5 KB"
}
},
{
"id": "components\\select\\guidancex",
- "contents": "\nimport { IcSelect } from \"@ukic/react\";\nimport selectFig1 from \"./images/fig-1-use-radio-or-checkbox-groups-when-less-than-four-options-are-available2x.png\";\nimport selectFig2 from \"./images/fig-2-dont-use-dropdowns-when-displaying-a-limited-number-of-options2x.png\";\nimport selectFig3 from \"./images/fig-3-use-labels-to-indicate-the-title-of-the-field.png\";\nimport selectFig4 from \"./images/fig-4-dont-replace-labels-with-placeholder-text.png\";\nimport selectFig5 from \"./images/fig-5-use-a-standard-select-when-providing-less-than-ten-options.png\";\nimport selectFig6 from \"./images/fig-6-do-not-use-the-searchable-variant-when-providing-less-than-ten-options.png\";\n\n## Component variants\n\nThere are two types of select component:\n\n- Single-select\n- Multi-select\n\n### Single-select\n\nAn example of the single-select component.\n\nexport const SelectExample = () => (\n <IcSelect\n placeholder=\"Select an option...\"\n label=\"What is your favourite coffee?\"\n options={[\n { label: \"Espresso\", value: \"espresso\" },\n { label: \"Double Espresso\", value: \"doubleespresso\" },\n { label: \"Flat White\", value: \"flatwhite\" },\n { label: \"Cappuccino\", value: \"cappuccino\" },\n { label: \"Americano\", value: \"americano\" },\n { label: \"Mocha\", value: \"mocha\" },\n ]}\n />\n);\n\n<ComponentPreview>\n <SelectExample />\n</ComponentPreview>\n\n### Multi-select\n\nThe multi-select is currently released in our canary packages, which means it is likely to change in future releases. Guidance and documentation can be found on the [multi-select page](/components/multi-select).\n\n## When to use\n\nUse the select component to allow the user to choose one or more options from four or more items. For less than four, use a [radio group](/components/radio) or a [checkbox group](/components/checkbox).\nWhen more than ten options are available, consider using the [searchable variant](/components/select#searchable-single-select) of select to allow users to search the options, rather than scroll through the dropdown list.\n\n<DoubleDoDontCaution>\n <DoDontCaution\n imageSrc={selectFig1}\n imageAlt=\"A graphic of a radio group labelled 'Single or double shot?' with two radio buttons labelled 'Single' and 'Double'.\"\n state=\"good\"\n caption=\"Use radio or checkbox groups when less than four options are available.\"\n />\n <DoDontCaution\n imageSrc={selectFig2}\n imageAlt=\"A graphic of a select component labelled 'Single or double shot?' with two options 'Single' and 'Double' in the dropdown list.\"\n state=\"bad\"\n caption=\"Don’t use select when displaying a limited number of options.\"\n />\n</DoubleDoDontCaution>\n\n## Validation\n\nReal-time validation helps the user streamline their process and efficiently complete a form. All error validation should be accompanied by an error label.\n\n## Content\n\n### Option list\n\nThe options display a label by default for the option list, which can also include a description or custom elements. Any custom elements used should be non-interactive, such as status tags or icons.\n\nUse a default option list to display all options without any grouping or recommendations.\n\n#### Recommended\n\nUse an option list with recommendations to display specific options at the top of the list for quick access.\n\n#### Groups\n\nUse an option list with groups to combine the options into groups with descriptive headings.\n\n### Labels\n\nClear labels help users understand what information they should provide.\n\nLabels should always be visible regardless of the state of the field and should be announced by a screen reader on focus.\n\n<DoubleDoDontCaution>\n <DoDontCaution\n imageSrc={selectFig3}\n imageAlt=\"A graphic of a select component with the label 'Coffee type' and placeholder text 'Select one'.\"\n state=\"good\"\n caption=\"Use labels to indicate the title of the field.\"\n />\n <DoDontCaution\n imageSrc={selectFig4}\n imageAlt=\"A graphic of a select component with no label and the placeholder text 'Coffee type'.\"\n state=\"bad\"\n caption=\"Don't replace labels with placeholder text.\"\n />\n</DoubleDoDontCaution>\n\n### Helper text\n\nHelper text should be included when additional information can help the user to either provide the right information or understand why or how the information will be used.\n\nMake sure any helper text that appears under an input is read when an assistive technology user stops at an input using ARIA.\n\n### Dismissible inputs\n\nAlways allow the user to clear their selection by including a clear button inside the input field.\n\n## Searchable (single-select)\n\nexport const SearchableSelectExample = () => (\n <IcSelect\n label=\"What is your favourite coffee?\"\n options={[\n { label: \"Cappuccino\", value: \"Cap\" },\n { label: \"Latte\", value: \"Lat\" },\n { label: \"Americano\", value: \"Ame\" },\n { label: \"Flat white\", value: \"Fla\" },\n { label: \"Mocha\", value: \"Moc\" },\n { label: \"Macchiato\", value: \"Mac\" },\n { label: \"Café au lait\", value: \"Caf\" },\n { label: \"Espresso\", value: \"Esp\" },\n { label: \"Cortado\", value: \"Cor\" },\n { label: \"Latte macchiato\", value: \"Lam\" },\n ]}\n searchable\n onIcChange={(event) => console.log(event.detail.value)}\n />\n);\n\n<ComponentPreview>\n <SearchableSelectExample />\n</ComponentPreview>\n\nThe single-select component can be set to be searchable to filter options in the option list. A user can open the option list to view the available options, but can also type into the input field to filter the option list to more easily find the desired option.\n\nUse the searchable variant when including several options in the option list, so that the user can quickly filter their desired selection.\n\nDon’t use the searchable variant when providing less than ten options. The added functionality for short lists may confuse users while providing no benefit to their experience.\n\n<DoubleDoDontCaution>\n <DoDontCaution\n imageSrc={selectFig5}\n imageAlt=\"A graphic of a select component with the label 'What’s your favourite type of coffee' and five options in the dropdown list.\"\n state=\"good\"\n caption=\"Use a standard select when providing less than ten options.\"\n />\n <DoDontCaution\n imageSrc={selectFig6}\n imageAlt=\"A graphic of a select component with searchable functionality with the label 'What’s your favourite type of coffee' and five options in the dropdown list. Focus is on the input field rather than the dropdown list.\"\n state=\"bad\"\n caption=\"Don’t use the searchable variant when providing less than ten options.\"\n />\n</DoubleDoDontCaution>\n\n### Content\n\nThe component can be configured to show values that either match the search term, or show values that contain the search term. For example, United Kingdom matches the search term ‘Un’, and Tunisia contains the search term ‘Un’.\n\nFor searches that take time to load results or suggestions, display the loading state whilst the search is loading. Use the empty state for searches that have no results or suggested options.\n\n## Related components\n\n- [Search bar](/components/search-bar)\n",
+ "contents": "\r\nimport { IcSelect } from \"@ukic/react\";\r\nimport selectFig1 from \"./images/fig-1-use-radio-or-checkbox-groups-when-less-than-four-options-are-available2x.png\";\r\nimport selectFig2 from \"./images/fig-2-dont-use-dropdowns-when-displaying-a-limited-number-of-options2x.png\";\r\nimport selectFig3 from \"./images/fig-3-use-labels-to-indicate-the-title-of-the-field.png\";\r\nimport selectFig4 from \"./images/fig-4-dont-replace-labels-with-placeholder-text.png\";\r\nimport selectFig5 from \"./images/fig-5-use-a-standard-select-when-providing-less-than-ten-options.png\";\r\nimport selectFig6 from \"./images/fig-6-do-not-use-the-searchable-variant-when-providing-less-than-ten-options.png\";\r\n\r\n## Component variants\r\n\r\nThere are two types of select component:\r\n\r\n- Single-select\r\n- Multi-select\r\n\r\n### Single-select\r\n\r\nAn example of the single-select component.\r\n\r\nexport const SelectExample = () => (\r\n <IcSelect\r\n placeholder=\"Select an option...\"\r\n label=\"What is your favourite coffee?\"\r\n options={[\r\n { label: \"Espresso\", value: \"espresso\" },\r\n { label: \"Double Espresso\", value: \"doubleespresso\" },\r\n { label: \"Flat White\", value: \"flatwhite\" },\r\n { label: \"Cappuccino\", value: \"cappuccino\" },\r\n { label: \"Americano\", value: \"americano\" },\r\n { label: \"Mocha\", value: \"mocha\" },\r\n ]}\r\n />\r\n);\r\n\r\n<ComponentPreview>\r\n <SelectExample />\r\n</ComponentPreview>\r\n\r\n### Multi-select\r\n\r\nThe multi-select is currently released in our canary packages, which means it is likely to change in future releases. Guidance and documentation can be found on the [multi-select page](/components/multi-select).\r\n\r\n## When to use\r\n\r\nUse the select component to allow the user to choose one or more options from four or more items. For less than four, use a [radio group](/components/radio) or a [checkbox group](/components/checkbox).\r\nWhen more than ten options are available, consider using the [searchable variant](/components/select#searchable-single-select) of select to allow users to search the options, rather than scroll through the dropdown list.\r\n\r\n<DoubleDoDontCaution>\r\n <DoDontCaution\r\n imageSrc={selectFig1}\r\n imageAlt=\"A graphic of a radio group labelled 'Single or double shot?' with two radio buttons labelled 'Single' and 'Double'.\"\r\n state=\"good\"\r\n caption=\"Use radio or checkbox groups when less than four options are available.\"\r\n />\r\n <DoDontCaution\r\n imageSrc={selectFig2}\r\n imageAlt=\"A graphic of a select component labelled 'Single or double shot?' with two options 'Single' and 'Double' in the dropdown list.\"\r\n state=\"bad\"\r\n caption=\"Don’t use select when displaying a limited number of options.\"\r\n />\r\n</DoubleDoDontCaution>\r\n\r\n## Validation\r\n\r\nReal-time validation helps the user streamline their process and efficiently complete a form. All error validation should be accompanied by an error label.\r\n\r\n## Content\r\n\r\n### Option list\r\n\r\nThe options display a label by default for the option list, which can also include a description or custom elements. Any custom elements used should be non-interactive, such as status tags or icons.\r\n\r\nUse a default option list to display all options without any grouping or recommendations.\r\n\r\n#### Recommended\r\n\r\nUse an option list with recommendations to display specific options at the top of the list for quick access.\r\n\r\n#### Groups\r\n\r\nUse an option list with groups to combine the options into groups with descriptive headings.\r\n\r\n### Labels\r\n\r\nClear labels help users understand what information they should provide.\r\n\r\nLabels should always be visible regardless of the state of the field and should be announced by a screen reader on focus.\r\n\r\n<DoubleDoDontCaution>\r\n <DoDontCaution\r\n imageSrc={selectFig3}\r\n imageAlt=\"A graphic of a select component with the label 'Coffee type' and placeholder text 'Select one'.\"\r\n state=\"good\"\r\n caption=\"Use labels to indicate the title of the field.\"\r\n />\r\n <DoDontCaution\r\n imageSrc={selectFig4}\r\n imageAlt=\"A graphic of a select component with no label and the placeholder text 'Coffee type'.\"\r\n state=\"bad\"\r\n caption=\"Don't replace labels with placeholder text.\"\r\n />\r\n</DoubleDoDontCaution>\r\n\r\n### Helper text\r\n\r\nHelper text should be included when additional information can help the user to either provide the right information or understand why or how the information will be used.\r\n\r\nMake sure any helper text that appears under an input is read when an assistive technology user stops at an input using ARIA.\r\n\r\n### Dismissible inputs\r\n\r\nAlways allow the user to clear their selection by including a clear button inside the input field.\r\n\r\n## Searchable (single-select)\r\n\r\nexport const SearchableSelectExample = () => (\r\n <IcSelect\r\n label=\"What is your favourite coffee?\"\r\n options={[\r\n { label: \"Cappuccino\", value: \"Cap\" },\r\n { label: \"Latte\", value: \"Lat\" },\r\n { label: \"Americano\", value: \"Ame\" },\r\n { label: \"Flat white\", value: \"Fla\" },\r\n { label: \"Mocha\", value: \"Moc\" },\r\n { label: \"Macchiato\", value: \"Mac\" },\r\n { label: \"Café au lait\", value: \"Caf\" },\r\n { label: \"Espresso\", value: \"Esp\" },\r\n { label: \"Cortado\", value: \"Cor\" },\r\n { label: \"Latte macchiato\", value: \"Lam\" },\r\n ]}\r\n searchable\r\n onIcChange={(event) => console.log(event.detail.value)}\r\n />\r\n);\r\n\r\n<ComponentPreview>\r\n <SearchableSelectExample />\r\n</ComponentPreview>\r\n\r\nThe single-select component can be set to be searchable to filter options in the option list. A user can open the option list to view the available options, but can also type into the input field to filter the option list to more easily find the desired option.\r\n\r\nUse the searchable variant when including several options in the option list, so that the user can quickly filter their desired selection.\r\n\r\nDon’t use the searchable variant when providing less than ten options. The added functionality for short lists may confuse users while providing no benefit to their experience.\r\n\r\n<DoubleDoDontCaution>\r\n <DoDontCaution\r\n imageSrc={selectFig5}\r\n imageAlt=\"A graphic of a select component with the label 'What’s your favourite type of coffee' and five options in the dropdown list.\"\r\n state=\"good\"\r\n caption=\"Use a standard select when providing less than ten options.\"\r\n />\r\n <DoDontCaution\r\n imageSrc={selectFig6}\r\n imageAlt=\"A graphic of a select component with searchable functionality with the label 'What’s your favourite type of coffee' and five options in the dropdown list. Focus is on the input field rather than the dropdown list.\"\r\n state=\"bad\"\r\n caption=\"Don’t use the searchable variant when providing less than ten options.\"\r\n />\r\n</DoubleDoDontCaution>\r\n\r\n### Content\r\n\r\nThe component can be configured to show values that either match the search term, or show values that contain the search term. For example, United Kingdom matches the search term ‘Un’, and Tunisia contains the search term ‘Un’.\r\n\r\nFor searches that take time to load results or suggestions, display the loading state whilst the search is loading. Use the empty state for searches that have no results or suggested options.\r\n\r\n## Related components\r\n\r\n- [Search bar](/components/search-bar)\r\n",
"path": "/components/select",
"navPriority": 30,
"date": "2024-05-02",
@@ -3350,11 +3350,11 @@
"Autosuggest"
],
"meta": {
- "relativePath": "components/select/guidance.mdx",
- "createdAt": "2024-11-06T10:27:49.408Z",
- "lastModified": "2024-11-06T10:19:00.116Z",
- "size": 7642,
- "formattedSize": "7.5 KB"
+ "relativePath": "components\\select\\guidance.mdx",
+ "createdAt": "2024-12-04T13:23:54.114Z",
+ "lastModified": "2024-12-04T13:23:54.114Z",
+ "size": 7836,
+ "formattedSize": "7.7 KB"
}
},
{
@@ -3381,9 +3381,9 @@
}
],
"meta": {
- "relativePath": "components/side-nav/accessibility.mdx",
- "createdAt": "2024-11-06T10:27:49.404Z",
- "lastModified": "2024-11-06T10:19:00.120Z",
+ "relativePath": "components\\side-nav\\accessibility.mdx",
+ "createdAt": "2024-11-05T11:57:53.309Z",
+ "lastModified": "2024-11-05T11:57:53.309Z",
"size": 2967,
"formattedSize": "2.9 KB"
}
@@ -3412,16 +3412,16 @@
}
],
"meta": {
- "relativePath": "components/side-nav/code.mdx",
- "createdAt": "2024-11-06T10:27:49.404Z",
- "lastModified": "2024-11-06T10:19:00.120Z",
+ "relativePath": "components\\side-nav\\code.mdx",
+ "createdAt": "2024-11-05T11:57:53.372Z",
+ "lastModified": "2024-11-05T11:57:53.372Z",
"size": 68691,
"formattedSize": "67.1 KB"
}
},
{
"id": "components\\side-nav\\guidancex",
- "contents": "\nimport { IcSideNavigation, IcNavigationItem, IcAlert } from \"@ukic/react\";\n\nimport sideNavigationFig1 from \"./images/fig-1-dont-use-both-side-and-top-navigation.png\";\nimport sideNavigationFig2 from \"./images/fig-2-avoid-side-navigation-for-complex-app-structures.png\";\nimport sideNavigationFig3 from \"./images/fig-3-set-side-navigation-default-display.png\";\nimport sideNavigationFig4 from \"./images/fig-4-static-side-navigation.png\";\nimport sideNavigationFig5 from \"./images/fig-5-side-navigation-sub-menu.png\";\nimport sideNavigationFig6 from \"./images/fig-6-personality-colourisation.png\";\nimport sideNavigationFig7 from \"./images/fig-7-dont-position-side-nav-above-footer.png\";\nimport sideNavigationFig8 from \"./images/fig-8-keep-menu-option-labels-concise-to-avoid-truncation.png\";\nimport sideNavigationFig9 from \"./images/fig-9-tooltips-show-labels-on-hover-or-focus.png\";\nimport sideNavigationFig10 from \"./images/fig-10-set-menu-options-to-display-labels.png\";\nimport sideNavigationFig11 from \"./images/fig-11-use-menu-groups-and-drilldowns.png\";\n\n## Introduction\n\nAn example of the side navigation component.\n\n<ComponentPreview\n style={{\n display: \"flex\",\n height: \"100%\",\n overflow: \"hidden\",\n position: \"relative\",\n justifyContent: \"flex-start\",\n padding: \"0rem\",\n }}\n>\n <IcSideNavigation\n appTitle=\"ACME coffee shop\"\n version=\"v0.0.7\"\n status=\"Alpha\"\n disableAutoParentStyling\n inline\n >\n <svg slot=\"app-icon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <title>coffee-outline</title>\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n </svg>\n <IcNavigationItem slot=\"primary-navigation\" href=\"#\" label=\"Home\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" slot=\"icon\" viewBox=\"0 0 24 24\">\n <title>home</title>\n <path d=\"M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z\" />\n </svg>\n </IcNavigationItem>\n <IcNavigationItem slot=\"primary-navigation\" href=\"#\" label=\"Search\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" slot=\"icon\" viewBox=\"0 0 24 24\">\n <title>magnify</title>\n <path d=\"M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z\" />\n </svg>\n </IcNavigationItem>\n <IcNavigationItem slot=\"primary-navigation\" href=\"#\" label=\"Drinks\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" slot=\"icon\" viewBox=\"0 0 24 24\">\n <title>coffee-outline</title>\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n </svg>\n </IcNavigationItem>\n <IcNavigationItem slot=\"primary-navigation\" href=\"#\" label=\"Equipment\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" slot=\"icon\" viewBox=\"0 0 24 24\">\n <title>coffee-maker-outline</title>\n <path d=\"M18 6V4H20V2H6C4.9 2 4 2.9 4 4V20C4 21.1 4.9 22 6 22H20V20H15.97C17.2 19.09 18 17.64 18 16V11H8V16C8 17.64 8.81 19.09 10.03 20H6V4H8V6C8 6.55 8.45 7 9 7H17C17.55 7 18 6.55 18 6M10 16V13H16V16C16 17.65 14.65 19 13 19S10 17.65 10 16M13 8C13.55 8 14 8.45 14 9S13.55 10 13 10 12 9.55 12 9 12.45 8 13 8Z\" />\n </svg>\n </IcNavigationItem>\n <IcNavigationItem slot=\"secondary-navigation\" href=\"#\" label=\"Settings\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" slot=\"icon\" viewBox=\"0 0 24 24\">\n <title>cog-outline</title>\n <path d=\"M12,8A4,4 0 0,1 16,12A4,4 0 0,1 12,16A4,4 0 0,1 8,12A4,4 0 0,1 12,8M12,10A2,2 0 0,0 10,12A2,2 0 0,0 12,14A2,2 0 0,0 14,12A2,2 0 0,0 12,10M10,22C9.75,22 9.54,21.82 9.5,21.58L9.13,18.93C8.5,18.68 7.96,18.34 7.44,17.94L4.95,18.95C4.73,19.03 4.46,18.95 4.34,18.73L2.34,15.27C2.21,15.05 2.27,14.78 2.46,14.63L4.57,12.97L4.5,12L4.57,11L2.46,9.37C2.27,9.22 2.21,8.95 2.34,8.73L4.34,5.27C4.46,5.05 4.73,4.96 4.95,5.05L7.44,6.05C7.96,5.66 8.5,5.32 9.13,5.07L9.5,2.42C9.54,2.18 9.75,2 10,2H14C14.25,2 14.46,2.18 14.5,2.42L14.87,5.07C15.5,5.32 16.04,5.66 16.56,6.05L19.05,5.05C19.27,4.96 19.54,5.05 19.66,5.27L21.66,8.73C21.79,8.95 21.73,9.22 21.54,9.37L19.43,11L19.5,12L19.43,13L21.54,14.63C21.73,14.78 21.79,15.05 21.66,15.27L19.66,18.73C19.54,18.95 19.27,19.04 19.05,18.95L16.56,17.95C16.04,18.34 15.5,18.68 14.87,18.93L14.5,21.58C14.46,21.82 14.25,22 14,22H10M11.25,4L10.88,6.61C9.68,6.86 8.62,7.5 7.85,8.39L5.44,7.35L4.69,8.65L6.8,10.2C6.4,11.37 6.4,12.64 6.8,13.8L4.68,15.36L5.43,16.66L7.86,15.62C8.63,16.5 9.68,17.14 10.87,17.38L11.24,20H12.76L13.13,17.39C14.32,17.14 15.37,16.5 16.14,15.62L18.57,16.66L19.32,15.36L17.2,13.81C17.6,12.64 17.6,11.37 17.2,10.2L19.31,8.65L18.56,7.35L16.15,8.39C15.38,7.5 14.32,6.86 13.12,6.62L12.75,4H11.25Z\" />\n </svg>\n </IcNavigationItem>\n </IcSideNavigation>\n</ComponentPreview>\n\n## When to use\n\nUse side navigation to help provide more screen space for the main content. Side navigation is well suited to apps that have mutually exclusive features that need to be switched between easily on any page.\n\nUse side navigation alongside additional components like [page headers](/components/page-header) to create a variety of different [layouts](/styles/layout-spacing) and navigation styles.\n\n## When not to use\n\nFor intranet-style and content-heavy apps, use [top navigation](/components/top-navigation) as it's better suited for providing links to a large number of pages.\n\nUse either side navigation or top navigation. Don't use both at the same time.\n\n<DoDontCaution\n imageSrc={sideNavigationFig1}\n imageAlt=\"An example app that shows a top navigation and side navigation used on the same page.\"\n state=\"bad\"\n caption=\"Don't use both side navigation and top navigation at the same time.\"\n/>\n\nAvoid using side navigation if the app has many destinations grouped into a multi-level hierarchy. Instead use a [top navigation](/components/top-navigation) with grouped links.\n\n<DoDontCaution\n imageSrc={sideNavigationFig2}\n imageAlt=\"An example app using side navigation to display multiple groups of links.\"\n state=\"caution\"\n caption=\"Avoid using side navigation for apps with complex page hierarchies. Instead use top navigation with grouped links.\"\n/>\n\n## Interaction behaviour\n\nSide navigation is expandable and displays the navigation labels and app info when expanded. Choose whether to display the side navigation as expanded or collapsed by default when the page loads.\n\n<DoDontCaution\n imageSrc={sideNavigationFig3}\n imageAlt=\"An example of an application with the side navigation expanded or collapsed by default as the page loads.\"\n state=\"good\"\n caption=\"Choose to display the side navigation as collapsed or expanded when the page loads.\"\n/>\n\nSet the side navigation to static if you want it to be either permanently expanded or permanently collapsed. This removes the expansion toggle button from the bottom of the side navigation.\n\n<DoDontCaution\n imageSrc={sideNavigationFig4}\n imageAlt=\"Two examples of side navigation that are set to static collapsed and static expanded. No expansion toggle button is displayed in the bottom section of the side navigation.\"\n state=\"good\"\n caption=\"Static side navigation examples.\"\n/>\n\nUse a drill-down menu option to provide access to child links in a sub-menu. The sub-menu can be closed by using the back button in the sub-menu's top section.\n\nSub-menus can be nested, but avoid creating overly deep page hierarchies and consider using top navigation with grouped links instead.\n\n<DoDontCaution\n imageSrc={sideNavigationFig5}\n imageAlt=\"An example side navigation component showing a menu option with a sub-menu of child links.\"\n state=\"good\"\n caption=\"A side navigation component with a sub-menu.\"\n/>\n\n## Colour\n\nThe side navigation uses the app's [theme colour](/styles/colour/#theme) as the background and automatically sets the foreground colour to ensure accessible contrast ratios. Change the app's theme colour to change the background colour of the side navigation and help distinguish your app from others your users may use.\n\n<DoDontCaution\n imageSrc={sideNavigationFig6}\n imageAlt=\"Two examples of side navigation components using different theme colours.\"\n state=\"good\"\n caption=\"Examples of side navigation using different theme colours.\"\n/>\n\n## Layout and placement\n\nAlways position the side navigation on the left hand of the screen and make sure that it vertically fills the browser window.\n\n<DoDontCaution\n imageSrc={sideNavigationFig7}\n imageAlt=\"An example app with a side navigation component that sits above the footer.\"\n state=\"bad\"\n caption=\"Don't position the side navigation so that it does not vertically fill the browser window.\"\n/>\n\n## Content\n\n### App information\n\nUse your app's name, icon, status and version information in the side navigation's app info fields.\n\n### Labels and icons\n\nFollow the [content style guidelines](/styles/content-style) for all menu option labels as well as each option group labels.\n\nFollow the [icon style guidelines](/styles/icons) when selecting icons for menu options.\n\nKeep labels concise as they will truncate if they are too long to display in the side navigation.\n\n<DoDontCaution\n imageSrc={sideNavigationFig8}\n imageAlt=\"An example side navigation showing menu items with long labels that are truncated.\"\n state=\"caution\"\n caption=\"Keep labels concise to avoid truncation.\"\n/>\n\n### Menu items\n\nSet the side navigation menu items to reflect your app's main navigation links.\n\nBy default, menu items will only display their icon when the side navigation is collapsed. The item label will be displayed via a tooltip when hovering or focusing on the menu item.\n\n<DoDontCaution\n imageSrc={sideNavigationFig9}\n imageAlt=\"An example side navigation component showing the menu option labels in a tooltip when hovering or focusing on the menu option.\"\n state=\"good\"\n caption=\"Side navigation shows menu item labels using tooltips when collapsed.\"\n/>\n\nSet the menu items to display their labels in the collapsed state by default if this will aid the recognition of the feature. However, take care when doing this as long menu item labels will be truncated.\n\n<DoDontCaution\n imageSrc={sideNavigationFig10}\n imageAlt=\"An example side navigation in collapsed state showing labels below the icons for each menu option.\"\n state=\"good\"\n caption=\"Set menu items to display their labels even in the collapsed state if this aids recognition of the feature.\"\n/>\n\nGroup related menu items into expandable menu item groups.\n\nUse a drill-down menu item if the menu item has a large number of child links to display. This will display the child links in the side navigation's sub-menu.\n\n<IcAlert\n heading=\"Coming soon\"\n message=\"Drill-down menu functionality is in development.\"\n variant=\"info\"\n/>\n\n<DoDontCaution\n imageSrc={sideNavigationFig11}\n imageAlt=\"An example of side navigation showing grouped menu items and drill-down menu items.\"\n state=\"good\"\n caption=\"Side navigation showing grouped menu items and drill-down menu items.\"\n/>\n\n### Bottom menu items\n\nUse the sticky bottom menu section to provide quick links to global app features or external links.\n\n## Accessibility considerations\n\nMake sure to include alt-text when specifying icons for menu items.\n\n## Related Components\n\n- [Top navigation](/components/top-navigation)\n",
+ "contents": "\r\nimport { IcSideNavigation, IcNavigationItem, IcAlert } from \"@ukic/react\";\r\n\r\nimport sideNavigationFig1 from \"./images/fig-1-dont-use-both-side-and-top-navigation.png\";\r\nimport sideNavigationFig2 from \"./images/fig-2-avoid-side-navigation-for-complex-app-structures.png\";\r\nimport sideNavigationFig3 from \"./images/fig-3-set-side-navigation-default-display.png\";\r\nimport sideNavigationFig4 from \"./images/fig-4-static-side-navigation.png\";\r\nimport sideNavigationFig5 from \"./images/fig-5-side-navigation-sub-menu.png\";\r\nimport sideNavigationFig6 from \"./images/fig-6-personality-colourisation.png\";\r\nimport sideNavigationFig7 from \"./images/fig-7-dont-position-side-nav-above-footer.png\";\r\nimport sideNavigationFig8 from \"./images/fig-8-keep-menu-option-labels-concise-to-avoid-truncation.png\";\r\nimport sideNavigationFig9 from \"./images/fig-9-tooltips-show-labels-on-hover-or-focus.png\";\r\nimport sideNavigationFig10 from \"./images/fig-10-set-menu-options-to-display-labels.png\";\r\nimport sideNavigationFig11 from \"./images/fig-11-use-menu-groups-and-drilldowns.png\";\r\n\r\n## Introduction\r\n\r\nAn example of the side navigation component.\r\n\r\n<ComponentPreview\r\n style={{\r\n display: \"flex\",\r\n height: \"100%\",\r\n overflow: \"hidden\",\r\n position: \"relative\",\r\n justifyContent: \"flex-start\",\r\n padding: \"0rem\",\r\n }}\r\n>\r\n <IcSideNavigation\r\n appTitle=\"ACME coffee shop\"\r\n version=\"v0.0.7\"\r\n status=\"Alpha\"\r\n disableAutoParentStyling\r\n inline\r\n >\r\n <svg slot=\"app-icon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\r\n <title>coffee-outline</title>\r\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\r\n </svg>\r\n <IcNavigationItem slot=\"primary-navigation\" href=\"#\" label=\"Home\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" slot=\"icon\" viewBox=\"0 0 24 24\">\r\n <title>home</title>\r\n <path d=\"M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z\" />\r\n </svg>\r\n </IcNavigationItem>\r\n <IcNavigationItem slot=\"primary-navigation\" href=\"#\" label=\"Search\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" slot=\"icon\" viewBox=\"0 0 24 24\">\r\n <title>magnify</title>\r\n <path d=\"M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z\" />\r\n </svg>\r\n </IcNavigationItem>\r\n <IcNavigationItem slot=\"primary-navigation\" href=\"#\" label=\"Drinks\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" slot=\"icon\" viewBox=\"0 0 24 24\">\r\n <title>coffee-outline</title>\r\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\r\n </svg>\r\n </IcNavigationItem>\r\n <IcNavigationItem slot=\"primary-navigation\" href=\"#\" label=\"Equipment\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" slot=\"icon\" viewBox=\"0 0 24 24\">\r\n <title>coffee-maker-outline</title>\r\n <path d=\"M18 6V4H20V2H6C4.9 2 4 2.9 4 4V20C4 21.1 4.9 22 6 22H20V20H15.97C17.2 19.09 18 17.64 18 16V11H8V16C8 17.64 8.81 19.09 10.03 20H6V4H8V6C8 6.55 8.45 7 9 7H17C17.55 7 18 6.55 18 6M10 16V13H16V16C16 17.65 14.65 19 13 19S10 17.65 10 16M13 8C13.55 8 14 8.45 14 9S13.55 10 13 10 12 9.55 12 9 12.45 8 13 8Z\" />\r\n </svg>\r\n </IcNavigationItem>\r\n <IcNavigationItem slot=\"secondary-navigation\" href=\"#\" label=\"Settings\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" slot=\"icon\" viewBox=\"0 0 24 24\">\r\n <title>cog-outline</title>\r\n <path d=\"M12,8A4,4 0 0,1 16,12A4,4 0 0,1 12,16A4,4 0 0,1 8,12A4,4 0 0,1 12,8M12,10A2,2 0 0,0 10,12A2,2 0 0,0 12,14A2,2 0 0,0 14,12A2,2 0 0,0 12,10M10,22C9.75,22 9.54,21.82 9.5,21.58L9.13,18.93C8.5,18.68 7.96,18.34 7.44,17.94L4.95,18.95C4.73,19.03 4.46,18.95 4.34,18.73L2.34,15.27C2.21,15.05 2.27,14.78 2.46,14.63L4.57,12.97L4.5,12L4.57,11L2.46,9.37C2.27,9.22 2.21,8.95 2.34,8.73L4.34,5.27C4.46,5.05 4.73,4.96 4.95,5.05L7.44,6.05C7.96,5.66 8.5,5.32 9.13,5.07L9.5,2.42C9.54,2.18 9.75,2 10,2H14C14.25,2 14.46,2.18 14.5,2.42L14.87,5.07C15.5,5.32 16.04,5.66 16.56,6.05L19.05,5.05C19.27,4.96 19.54,5.05 19.66,5.27L21.66,8.73C21.79,8.95 21.73,9.22 21.54,9.37L19.43,11L19.5,12L19.43,13L21.54,14.63C21.73,14.78 21.79,15.05 21.66,15.27L19.66,18.73C19.54,18.95 19.27,19.04 19.05,18.95L16.56,17.95C16.04,18.34 15.5,18.68 14.87,18.93L14.5,21.58C14.46,21.82 14.25,22 14,22H10M11.25,4L10.88,6.61C9.68,6.86 8.62,7.5 7.85,8.39L5.44,7.35L4.69,8.65L6.8,10.2C6.4,11.37 6.4,12.64 6.8,13.8L4.68,15.36L5.43,16.66L7.86,15.62C8.63,16.5 9.68,17.14 10.87,17.38L11.24,20H12.76L13.13,17.39C14.32,17.14 15.37,16.5 16.14,15.62L18.57,16.66L19.32,15.36L17.2,13.81C17.6,12.64 17.6,11.37 17.2,10.2L19.31,8.65L18.56,7.35L16.15,8.39C15.38,7.5 14.32,6.86 13.12,6.62L12.75,4H11.25Z\" />\r\n </svg>\r\n </IcNavigationItem>\r\n </IcSideNavigation>\r\n</ComponentPreview>\r\n\r\n## When to use\r\n\r\nUse side navigation to help provide more screen space for the main content. Side navigation is well suited to apps that have mutually exclusive features that need to be switched between easily on any page.\r\n\r\nUse side navigation alongside additional components like [page headers](/components/page-header) to create a variety of different [layouts](/styles/layout-spacing) and navigation styles.\r\n\r\n## When not to use\r\n\r\nFor intranet-style and content-heavy apps, use [top navigation](/components/top-navigation) as it's better suited for providing links to a large number of pages.\r\n\r\nUse either side navigation or top navigation. Don't use both at the same time.\r\n\r\n<DoDontCaution\r\n imageSrc={sideNavigationFig1}\r\n imageAlt=\"An example app that shows a top navigation and side navigation used on the same page.\"\r\n state=\"bad\"\r\n caption=\"Don't use both side navigation and top navigation at the same time.\"\r\n/>\r\n\r\nAvoid using side navigation if the app has many destinations grouped into a multi-level hierarchy. Instead use a [top navigation](/components/top-navigation) with grouped links.\r\n\r\n<DoDontCaution\r\n imageSrc={sideNavigationFig2}\r\n imageAlt=\"An example app using side navigation to display multiple groups of links.\"\r\n state=\"caution\"\r\n caption=\"Avoid using side navigation for apps with complex page hierarchies. Instead use top navigation with grouped links.\"\r\n/>\r\n\r\n## Interaction behaviour\r\n\r\nSide navigation is expandable and displays the navigation labels and app info when expanded. Choose whether to display the side navigation as expanded or collapsed by default when the page loads.\r\n\r\n<DoDontCaution\r\n imageSrc={sideNavigationFig3}\r\n imageAlt=\"An example of an application with the side navigation expanded or collapsed by default as the page loads.\"\r\n state=\"good\"\r\n caption=\"Choose to display the side navigation as collapsed or expanded when the page loads.\"\r\n/>\r\n\r\nSet the side navigation to static if you want it to be either permanently expanded or permanently collapsed. This removes the expansion toggle button from the bottom of the side navigation.\r\n\r\n<DoDontCaution\r\n imageSrc={sideNavigationFig4}\r\n imageAlt=\"Two examples of side navigation that are set to static collapsed and static expanded. No expansion toggle button is displayed in the bottom section of the side navigation.\"\r\n state=\"good\"\r\n caption=\"Static side navigation examples.\"\r\n/>\r\n\r\nUse a drill-down menu option to provide access to child links in a sub-menu. The sub-menu can be closed by using the back button in the sub-menu's top section.\r\n\r\nSub-menus can be nested, but avoid creating overly deep page hierarchies and consider using top navigation with grouped links instead.\r\n\r\n<DoDontCaution\r\n imageSrc={sideNavigationFig5}\r\n imageAlt=\"An example side navigation component showing a menu option with a sub-menu of child links.\"\r\n state=\"good\"\r\n caption=\"A side navigation component with a sub-menu.\"\r\n/>\r\n\r\n## Colour\r\n\r\nThe side navigation uses the app's [theme colour](/styles/colour/#theme) as the background and automatically sets the foreground colour to ensure accessible contrast ratios. Change the app's theme colour to change the background colour of the side navigation and help distinguish your app from others your users may use.\r\n\r\n<DoDontCaution\r\n imageSrc={sideNavigationFig6}\r\n imageAlt=\"Two examples of side navigation components using different theme colours.\"\r\n state=\"good\"\r\n caption=\"Examples of side navigation using different theme colours.\"\r\n/>\r\n\r\n## Layout and placement\r\n\r\nAlways position the side navigation on the left hand of the screen and make sure that it vertically fills the browser window.\r\n\r\n<DoDontCaution\r\n imageSrc={sideNavigationFig7}\r\n imageAlt=\"An example app with a side navigation component that sits above the footer.\"\r\n state=\"bad\"\r\n caption=\"Don't position the side navigation so that it does not vertically fill the browser window.\"\r\n/>\r\n\r\n## Content\r\n\r\n### App information\r\n\r\nUse your app's name, icon, status and version information in the side navigation's app info fields.\r\n\r\n### Labels and icons\r\n\r\nFollow the [content style guidelines](/styles/content-style) for all menu option labels as well as each option group labels.\r\n\r\nFollow the [icon style guidelines](/styles/icons) when selecting icons for menu options.\r\n\r\nKeep labels concise as they will truncate if they are too long to display in the side navigation.\r\n\r\n<DoDontCaution\r\n imageSrc={sideNavigationFig8}\r\n imageAlt=\"An example side navigation showing menu items with long labels that are truncated.\"\r\n state=\"caution\"\r\n caption=\"Keep labels concise to avoid truncation.\"\r\n/>\r\n\r\n### Menu items\r\n\r\nSet the side navigation menu items to reflect your app's main navigation links.\r\n\r\nBy default, menu items will only display their icon when the side navigation is collapsed. The item label will be displayed via a tooltip when hovering or focusing on the menu item.\r\n\r\n<DoDontCaution\r\n imageSrc={sideNavigationFig9}\r\n imageAlt=\"An example side navigation component showing the menu option labels in a tooltip when hovering or focusing on the menu option.\"\r\n state=\"good\"\r\n caption=\"Side navigation shows menu item labels using tooltips when collapsed.\"\r\n/>\r\n\r\nSet the menu items to display their labels in the collapsed state by default if this will aid the recognition of the feature. However, take care when doing this as long menu item labels will be truncated.\r\n\r\n<DoDontCaution\r\n imageSrc={sideNavigationFig10}\r\n imageAlt=\"An example side navigation in collapsed state showing labels below the icons for each menu option.\"\r\n state=\"good\"\r\n caption=\"Set menu items to display their labels even in the collapsed state if this aids recognition of the feature.\"\r\n/>\r\n\r\nGroup related menu items into expandable menu item groups.\r\n\r\nUse a drill-down menu item if the menu item has a large number of child links to display. This will display the child links in the side navigation's sub-menu.\r\n\r\n<IcAlert\r\n heading=\"Coming soon\"\r\n message=\"Drill-down menu functionality is in development.\"\r\n variant=\"info\"\r\n/>\r\n\r\n<DoDontCaution\r\n imageSrc={sideNavigationFig11}\r\n imageAlt=\"An example of side navigation showing grouped menu items and drill-down menu items.\"\r\n state=\"good\"\r\n caption=\"Side navigation showing grouped menu items and drill-down menu items.\"\r\n/>\r\n\r\n### Bottom menu items\r\n\r\nUse the sticky bottom menu section to provide quick links to global app features or external links.\r\n\r\n## Accessibility considerations\r\n\r\nMake sure to include alt-text when specifying icons for menu items.\r\n\r\n## Related Components\r\n\r\n- [Top navigation](/components/top-navigation)\r\n",
"path": "/components/side-navigation",
"navPriority": 29,
"date": "2023-03-01",
@@ -3445,11 +3445,11 @@
],
"tags": ["Navigation bar"],
"meta": {
- "relativePath": "components/side-nav/guidance.mdx",
- "createdAt": "2024-11-06T10:27:49.404Z",
- "lastModified": "2024-11-06T10:19:00.120Z",
- "size": 12206,
- "formattedSize": "11.9 KB"
+ "relativePath": "components\\side-nav\\guidance.mdx",
+ "createdAt": "2024-12-04T13:23:54.115Z",
+ "lastModified": "2024-12-04T13:23:54.115Z",
+ "size": 12458,
+ "formattedSize": "12.2 KB"
}
},
{
@@ -3476,16 +3476,16 @@
}
],
"meta": {
- "relativePath": "components/skeleton/accessibility.mdx",
- "createdAt": "2024-11-06T10:27:49.408Z",
- "lastModified": "2024-11-06T10:19:00.128Z",
+ "relativePath": "components\\skeleton\\accessibility.mdx",
+ "createdAt": "2024-11-05T11:57:53.435Z",
+ "lastModified": "2024-11-05T11:57:53.435Z",
"size": 2797,
"formattedSize": "2.7 KB"
}
},
{
"id": "components\\skeleton\\codex",
- "contents": "\nimport {\n IcSkeleton,\n IcTypography,\n IcCard,\n IcButton,\n SlottedSVG,\n} from \"@ukic/react\";\n\n## Component demo\n\nexport const snippets = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-skeleton variant=\"circle\"></ic-skeleton>\n<ic-typography variant=\"caption\">\n <ic-skeleton variant=\"text\"></ic-skeleton>\n</ic-typography>\n<ic-skeleton></ic-skeleton>`,\n long: `.parent-container {\n display: flex;\n flex-direction: column;\n gap: var(--ic-space-xs);\n }\n</style>\n<body>\n <div class=\"parent-container\">\n {shortCode}\n </div>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcSkeleton variant=\"circle\" />\n<IcTypography variant=\"caption\">\n <IcSkeleton variant=\"text\" />\n</IcTypography>\n<IcSkeleton />`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"var(--ic-space-xs)\",\n },\n});\nconst classes = useStyles();\nreturn ( \n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"var(--ic-space-xs)\",\n },\n});\nconst classes = useStyles();\nreturn ( \n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={snippets}>\n <div style={{ display: \"flex\", flexDirection: \"column\", gap: \"0.5rem\" }}>\n <IcSkeleton variant=\"circle\" />\n <IcTypography variant=\"caption\">\n <IcSkeleton variant=\"text\" />\n </IcTypography>\n <IcSkeleton />\n </div>\n</ComponentPreview>\n\n## Skeleton details\n\n<ComponentDetails component=\"ic-skeleton\" />\n\n## Variants\n\n### Inherited size from child\n\nexport const snippetsInherited = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-skeleton><div class=\"child\">Test text</div></ic-skeleton>`,\n long: `.child {\n height: 12.5rem;\n width: 28.125rem;\n }\n</style>\n<body>\n {shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcSkeleton>\n <div className={classes.child}>Test text</div>\n</IcSkeleton>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n child: {\n height: \"12.5rem\",\n width: \"28.125rem\"\n },\n});\nconst classes = useStyles();\nreturn (\n {shortCode}\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n child: {\n height: \"12.5rem\",\n width: \"28.125rem\"\n },\n});\nconst classes = useStyles();\nreturn (\n {shortCode}\n)`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={snippetsInherited}>\n <IcSkeleton>\n <div\n style={{\n height: \"12.5rem\",\n width: \"28.125rem\",\n }}\n >\n Test text\n </div>\n </IcSkeleton>\n</ComponentPreview>\n\n### Set width and height\n\nCSS changes directly to `Skeleton` must be applied with inline styling.\n\nexport const snippetsSetWidthAndHeight = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-typography variant=\"h4\">\n <h4>Height and width set with styles</h4>\n</ic-typography>\n<ic-skeleton style=\"height: 12.5rem; width: 28.125rem\"></ic-skeleton>\n<ic-typography variant=\"h4\">\n <h4>Height set with styles</h4>\n</ic-typography>\n<ic-skeleton style=\"height: 5rem\"></ic-skeleton>\n<ic-typography variant=\"h4\">\n <h4>Width set with styles</h4>\n</ic-typography>\n<ic-skeleton style=\"width: 28.125rem\"></ic-skeleton>`,\n long: `.parent-container {\n display: flex;\n flex-direction: column;\n gap: var(--ic-space-xs);\n }\n</style>\n<body>\n <div class=\"parent-container\">\n {shortCode}\n </div>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcTypography variant=\"h4\">\n <h4>Height and width set with styles</h4>\n</IcTypography>\n<IcSkeleton\n style={{\n height: \"12.5rem\",\n width: \"12.5rem\",\n }}\n/>\n<IcTypography variant=\"h4\">\n <h4>Height set with styles</h4>\n</IcTypography>\n<IcSkeleton\n style={{\n height: \"5rem\",\n }}\n/>\n<IcTypography variant=\"h4\">\n <h4>Width set with styles</h4>\n</IcTypography>\n<IcSkeleton\n style={{\n width: \"28.125rem\",\n }}\n/>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `<>\n {shortCode}\n</>`,\n },\n {\n language: \"Javascript\",\n snippet: `<>\n {shortCode}\n</>`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={snippetsSetWidthAndHeight}>\n <div style={{ display: \"flex\", flexDirection: \"column\", gap: \"0.5rem\" }}>\n <IcTypography variant=\"h4\">\n <h4>Height and width set with styles</h4>\n </IcTypography>\n <IcSkeleton\n style={{\n height: \"12.5rem\",\n width: \"12.5rem\",\n }}\n />\n <IcTypography variant=\"h4\">\n <h4>Height set with styles</h4>\n </IcTypography>\n <IcSkeleton\n style={{\n height: \"5rem\",\n }}\n />\n <IcTypography variant=\"h4\">\n <h4>Width set with styles</h4>\n </IcTypography>\n <IcSkeleton\n style={{\n width: \"28.125rem\",\n }}\n />\n </div>\n</ComponentPreview>\n\n### Light\n\nexport const snippetsLight = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-skeleton variant=\"circle\" appearance=\"light\"></ic-skeleton>\n<ic-typography variant=\"caption\">\n <ic-skeleton variant=\"text\" appearance=\"light\"></ic-skeleton>\n</ic-typography>\n<ic-skeleton appearance=\"light\"></ic-skeleton>`,\n long: `.parent-container {\n display: flex;\n flex-direction: column;\n gap: var(--ic-space-xs);\n }\n</style>\n<body>\n <div class=\"parent-container\">\n {shortCode}\n </div>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcSkeleton variant=\"circle\" appearance=\"light\" />\n<IcTypography variant=\"caption\">\n <IcSkeleton variant=\"text\" appearance=\"light\" />\n</IcTypography>\n<IcSkeleton appearance=\"light\" />`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"var(--ic-space-xs)\",\n },\n});\nconst classes = useStyles();\nreturn ( \n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"var(--ic-space-xs)\",\n },\n});\nconst classes = useStyles();\nreturn ( \n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={snippetsLight}>\n <div style={{ display: \"flex\", flexDirection: \"column\", gap: \"0.5rem\" }}>\n <IcSkeleton variant=\"circle\" appearance=\"light\" />\n <IcTypography variant=\"caption\">\n <IcSkeleton variant=\"text\" appearance=\"light\" />\n </IcTypography>\n <IcSkeleton appearance=\"light\" />\n </div>\n</ComponentPreview>\n\n### Within IcCard component\n\nexport const snippetsInCard = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-card heading=\"Americano Order\" subheading=\"Name: Michael\">\n <ic-skeleton\n slot=\"icon\"\n variant=\"circle\"\n style=\"height: var(--ic-space-xl); width: var(--ic-space-xl);\"\n ></ic-skeleton>\n <ic-skeleton\n slot=\"heading\"\n variant=\"rectangle\"\n style=\"height: var(--ic-space-xl); width: 10.625rem;\"\n ></ic-skeleton>\n <ic-skeleton\n slot=\"subheading\"\n variant=\"text\"\n style=\"height: 1.125rem; width: 6.25rem;\"\n ></ic-skeleton>\n <ic-skeleton\n slot=\"message\"\n variant=\"rectangle\"\n style=\"height: var(--ic-space-lg); width: 18.75rem;\"\n ></ic-skeleton>\n <ic-skeleton\n slot=\"interaction-controls\"\n variant=\"rectangle\"\n style=\"height: 2.5rem; width: 6.25rem;\"\n ></ic-skeleton>\n <ic-skeleton\n slot=\"interaction-controls\"\n variant=\"rectangle\"\n style=\"height: 2.5rem; width: 6.25rem;\"\n ></ic-skeleton>\n</ic-card>`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcCard heading=\"Americano Order\" subheading=\"Name: Michael\">\n <IcSkeleton\n slot=\"icon\"\n variant=\"circle\"\n style={{\n height: \"var(--ic-space-xl)\",\n width: \"var(--ic-space-xl)\",\n }}\n />\n <IcSkeleton\n slot=\"heading\"\n variant=\"rectangle\"\n style={{\n height: \"var(--ic-space-xl)\",\n width: \"10.625rem\",\n }}\n />\n <IcSkeleton\n slot=\"subheading\"\n variant=\"text\"\n style={{\n height: \"1.125rem\",\n width: \"6.25rem\",\n }}\n />\n <IcSkeleton\n slot=\"message\"\n variant=\"rectangle\"\n style={{\n height: \"var(--ic-space-lg)\",\n width: \"18.75rem\",\n }}\n />\n <IcSkeleton\n slot=\"interaction-controls\"\n variant=\"rectangle\"\n style={{\n height: \"2.5rem\",\n width: \"6.25rem\",\n }}\n />\n <IcSkeleton\n slot=\"interaction-controls\"\n variant=\"rectangle\"\n style={{\n height: \"2.5rem\",\n width: \"6.25rem\",\n }}\n />\n</IcCard>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `{shortCode}`,\n },\n {\n language: \"Javascript\",\n snippet: `{shortCode}`,\n },\n ],\n },\n },\n];\n\nexport const loading = () => (\n <IcCard heading=\"Americano Order\" subheading=\"Name: Michael\">\n <IcSkeleton\n slot=\"icon\"\n variant=\"circle\"\n style={{\n height: \"2rem\",\n width: \"2rem\",\n }}\n />\n <IcSkeleton\n slot=\"heading\"\n variant=\"rectangle\"\n style={{\n height: \"2rem\",\n width: \"10.625rem\",\n }}\n />\n <IcSkeleton\n slot=\"subheading\"\n variant=\"text\"\n style={{\n height: \"1.125rem\",\n width: \"6.25rem\",\n }}\n />\n <IcSkeleton\n slot=\"message\"\n variant=\"rectangle\"\n style={{\n height: \"1.5rem\",\n width: \"18.75rem\",\n }}\n />\n <IcSkeleton\n slot=\"interaction-controls\"\n variant=\"rectangle\"\n style={{\n height: \"2.5rem\",\n width: \"6.25rem\",\n }}\n />\n <IcSkeleton\n slot=\"interaction-controls\"\n variant=\"rectangle\"\n style={{\n height: \"2.5rem\",\n width: \"6.25rem\",\n }}\n />\n </IcCard>\n);\n\nexport const loaded = () => (\n <IcCard\n heading=\"Americano Order\"\n subheading=\"Name: Michael\"\n message=\"Extras: double espresso shot & oat milk\"\n >\n <SlottedSVG\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n fill=\"#000000\"\n >\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n </SlottedSVG>\n <div slot=\"interaction-controls\" style={{ display: \"flex\", gap: \"1rem\" }}>\n <IcButton variant=\"primary\">Accept</IcButton>\n <IcButton variant=\"secondary\">Cancel</IcButton>\n </div>\n </IcCard>\n);\n\nexport const ContentFunction = () => {\n const [content, setContent] = React.useState(loaded);\n const loadFunc = () => {\n setContent(loading);\n setTimeout(() => {\n setContent(loaded);\n }, 3000);\n };\n return (\n <div>\n {content}\n <br />\n <IcButton\n variant=\"primary\"\n onClick={() => {\n loadFunc();\n }}\n >\n <SlottedSVG\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n fill=\"#000000\"\n >\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n <path d=\"M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z\" />\n </SlottedSVG>\n Refresh\n </IcButton>\n </div>\n );\n};\n\n<ComponentPreview snippets={snippetsInCard}>\n <ContentFunction />\n</ComponentPreview>\n",
+ "contents": "\r\nimport {\r\n IcSkeleton,\r\n IcTypography,\r\n IcCard,\r\n IcButton,\r\n SlottedSVG,\r\n} from \"@ukic/react\";\r\n\r\n## Component demo\r\n\r\nexport const snippets = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-skeleton variant=\"circle\"></ic-skeleton>\r\n<ic-typography variant=\"caption\">\r\n <ic-skeleton variant=\"text\"></ic-skeleton>\r\n</ic-typography>\r\n<ic-skeleton></ic-skeleton>`,\r\n long: `.parent-container {\r\n display: flex;\r\n flex-direction: column;\r\n gap: var(--ic-space-xs);\r\n }\r\n</style>\r\n<body>\r\n <div class=\"parent-container\">\r\n {shortCode}\r\n </div>`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcSkeleton variant=\"circle\" />\r\n<IcTypography variant=\"caption\">\r\n <IcSkeleton variant=\"text\" />\r\n</IcTypography>\r\n<IcSkeleton />`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `const useStyles = createUseStyles({\r\n parentContainer: {\r\n display: \"flex\",\r\n flexDirection: \"column\",\r\n gap: \"var(--ic-space-xs)\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nreturn ( \r\n <div className={classes.parentContainer}>\r\n {shortCode}\r\n </div>\r\n)`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `const useStyles = createUseStyles({\r\n parentContainer: {\r\n display: \"flex\",\r\n flexDirection: \"column\",\r\n gap: \"var(--ic-space-xs)\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nreturn ( \r\n <div className={classes.parentContainer}>\r\n {shortCode}\r\n </div>\r\n)`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview snippets={snippets}>\r\n <div style={{ display: \"flex\", flexDirection: \"column\", gap: \"0.5rem\" }}>\r\n <IcSkeleton variant=\"circle\" />\r\n <IcTypography variant=\"caption\">\r\n <IcSkeleton variant=\"text\" />\r\n </IcTypography>\r\n <IcSkeleton />\r\n </div>\r\n</ComponentPreview>\r\n\r\n## Skeleton details\r\n\r\n<ComponentDetails component=\"ic-skeleton\" />\r\n\r\n## Variants\r\n\r\n### Inherited size from child\r\n\r\nexport const snippetsInherited = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-skeleton><div class=\"child\">Test text</div></ic-skeleton>`,\r\n long: `.child {\r\n height: 12.5rem;\r\n width: 28.125rem;\r\n }\r\n</style>\r\n<body>\r\n {shortCode}`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcSkeleton>\r\n <div className={classes.child}>Test text</div>\r\n</IcSkeleton>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `const useStyles = createUseStyles({\r\n child: {\r\n height: \"12.5rem\",\r\n width: \"28.125rem\"\r\n },\r\n});\r\nconst classes = useStyles();\r\nreturn (\r\n {shortCode}\r\n)`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `const useStyles = createUseStyles({\r\n child: {\r\n height: \"12.5rem\",\r\n width: \"28.125rem\"\r\n },\r\n});\r\nconst classes = useStyles();\r\nreturn (\r\n {shortCode}\r\n)`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview snippets={snippetsInherited}>\r\n <IcSkeleton>\r\n <div\r\n style={{\r\n height: \"12.5rem\",\r\n width: \"28.125rem\",\r\n }}\r\n >\r\n Test text\r\n </div>\r\n </IcSkeleton>\r\n</ComponentPreview>\r\n\r\n### Set width and height\r\n\r\nCSS changes directly to `Skeleton` must be applied with inline styling.\r\n\r\nexport const snippetsSetWidthAndHeight = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-typography variant=\"h4\">\r\n <h4>Height and width set with styles</h4>\r\n</ic-typography>\r\n<ic-skeleton style=\"height: 12.5rem; width: 28.125rem\"></ic-skeleton>\r\n<ic-typography variant=\"h4\">\r\n <h4>Height set with styles</h4>\r\n</ic-typography>\r\n<ic-skeleton style=\"height: 5rem\"></ic-skeleton>\r\n<ic-typography variant=\"h4\">\r\n <h4>Width set with styles</h4>\r\n</ic-typography>\r\n<ic-skeleton style=\"width: 28.125rem\"></ic-skeleton>`,\r\n long: `.parent-container {\r\n display: flex;\r\n flex-direction: column;\r\n gap: var(--ic-space-xs);\r\n }\r\n</style>\r\n<body>\r\n <div class=\"parent-container\">\r\n {shortCode}\r\n </div>`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcTypography variant=\"h4\">\r\n <h4>Height and width set with styles</h4>\r\n</IcTypography>\r\n<IcSkeleton\r\n style={{\r\n height: \"12.5rem\",\r\n width: \"12.5rem\",\r\n }}\r\n/>\r\n<IcTypography variant=\"h4\">\r\n <h4>Height set with styles</h4>\r\n</IcTypography>\r\n<IcSkeleton\r\n style={{\r\n height: \"5rem\",\r\n }}\r\n/>\r\n<IcTypography variant=\"h4\">\r\n <h4>Width set with styles</h4>\r\n</IcTypography>\r\n<IcSkeleton\r\n style={{\r\n width: \"28.125rem\",\r\n }}\r\n/>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `<>\r\n {shortCode}\r\n</>`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `<>\r\n {shortCode}\r\n</>`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview snippets={snippetsSetWidthAndHeight}>\r\n <div style={{ display: \"flex\", flexDirection: \"column\", gap: \"0.5rem\" }}>\r\n <IcTypography variant=\"h4\">\r\n <h4>Height and width set with styles</h4>\r\n </IcTypography>\r\n <IcSkeleton\r\n style={{\r\n height: \"12.5rem\",\r\n width: \"12.5rem\",\r\n }}\r\n />\r\n <IcTypography variant=\"h4\">\r\n <h4>Height set with styles</h4>\r\n </IcTypography>\r\n <IcSkeleton\r\n style={{\r\n height: \"5rem\",\r\n }}\r\n />\r\n <IcTypography variant=\"h4\">\r\n <h4>Width set with styles</h4>\r\n </IcTypography>\r\n <IcSkeleton\r\n style={{\r\n width: \"28.125rem\",\r\n }}\r\n />\r\n </div>\r\n</ComponentPreview>\r\n\r\n### Light\r\n\r\nexport const snippetsLight = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-skeleton variant=\"circle\" appearance=\"light\"></ic-skeleton>\r\n<ic-typography variant=\"caption\">\r\n <ic-skeleton variant=\"text\" appearance=\"light\"></ic-skeleton>\r\n</ic-typography>\r\n<ic-skeleton appearance=\"light\"></ic-skeleton>`,\r\n long: `.parent-container {\r\n display: flex;\r\n flex-direction: column;\r\n gap: var(--ic-space-xs);\r\n }\r\n</style>\r\n<body>\r\n <div class=\"parent-container\">\r\n {shortCode}\r\n </div>`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcSkeleton variant=\"circle\" appearance=\"light\" />\r\n<IcTypography variant=\"caption\">\r\n <IcSkeleton variant=\"text\" appearance=\"light\" />\r\n</IcTypography>\r\n<IcSkeleton appearance=\"light\" />`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `const useStyles = createUseStyles({\r\n parentContainer: {\r\n display: \"flex\",\r\n flexDirection: \"column\",\r\n gap: \"var(--ic-space-xs)\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nreturn ( \r\n <div className={classes.parentContainer}>\r\n {shortCode}\r\n </div>\r\n)`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `const useStyles = createUseStyles({\r\n parentContainer: {\r\n display: \"flex\",\r\n flexDirection: \"column\",\r\n gap: \"var(--ic-space-xs)\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nreturn ( \r\n <div className={classes.parentContainer}>\r\n {shortCode}\r\n </div>\r\n)`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview snippets={snippetsLight}>\r\n <div style={{ display: \"flex\", flexDirection: \"column\", gap: \"0.5rem\" }}>\r\n <IcSkeleton variant=\"circle\" appearance=\"light\" />\r\n <IcTypography variant=\"caption\">\r\n <IcSkeleton variant=\"text\" appearance=\"light\" />\r\n </IcTypography>\r\n <IcSkeleton appearance=\"light\" />\r\n </div>\r\n</ComponentPreview>\r\n\r\n### Within IcCard component\r\n\r\nexport const snippetsInCard = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-card heading=\"Americano Order\" subheading=\"Name: Michael\">\r\n <ic-skeleton\r\n slot=\"icon\"\r\n variant=\"circle\"\r\n style=\"height: var(--ic-space-xl); width: var(--ic-space-xl);\"\r\n ></ic-skeleton>\r\n <ic-skeleton\r\n slot=\"heading\"\r\n variant=\"rectangle\"\r\n style=\"height: var(--ic-space-xl); width: 10.625rem;\"\r\n ></ic-skeleton>\r\n <ic-skeleton\r\n slot=\"subheading\"\r\n variant=\"text\"\r\n style=\"height: 1.125rem; width: 6.25rem;\"\r\n ></ic-skeleton>\r\n <ic-skeleton\r\n slot=\"message\"\r\n variant=\"rectangle\"\r\n style=\"height: var(--ic-space-lg); width: 18.75rem;\"\r\n ></ic-skeleton>\r\n <ic-skeleton\r\n slot=\"interaction-controls\"\r\n variant=\"rectangle\"\r\n style=\"height: 2.5rem; width: 6.25rem;\"\r\n ></ic-skeleton>\r\n <ic-skeleton\r\n slot=\"interaction-controls\"\r\n variant=\"rectangle\"\r\n style=\"height: 2.5rem; width: 6.25rem;\"\r\n ></ic-skeleton>\r\n</ic-card>`,\r\n long: `{shortCode}`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcCard heading=\"Americano Order\" subheading=\"Name: Michael\">\r\n <IcSkeleton\r\n slot=\"icon\"\r\n variant=\"circle\"\r\n style={{\r\n height: \"var(--ic-space-xl)\",\r\n width: \"var(--ic-space-xl)\",\r\n }}\r\n />\r\n <IcSkeleton\r\n slot=\"heading\"\r\n variant=\"rectangle\"\r\n style={{\r\n height: \"var(--ic-space-xl)\",\r\n width: \"10.625rem\",\r\n }}\r\n />\r\n <IcSkeleton\r\n slot=\"subheading\"\r\n variant=\"text\"\r\n style={{\r\n height: \"1.125rem\",\r\n width: \"6.25rem\",\r\n }}\r\n />\r\n <IcSkeleton\r\n slot=\"message\"\r\n variant=\"rectangle\"\r\n style={{\r\n height: \"var(--ic-space-lg)\",\r\n width: \"18.75rem\",\r\n }}\r\n />\r\n <IcSkeleton\r\n slot=\"interaction-controls\"\r\n variant=\"rectangle\"\r\n style={{\r\n height: \"2.5rem\",\r\n width: \"6.25rem\",\r\n }}\r\n />\r\n <IcSkeleton\r\n slot=\"interaction-controls\"\r\n variant=\"rectangle\"\r\n style={{\r\n height: \"2.5rem\",\r\n width: \"6.25rem\",\r\n }}\r\n />\r\n</IcCard>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `{shortCode}`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `{shortCode}`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\nexport const loading = () => (\r\n <IcCard heading=\"Americano Order\" subheading=\"Name: Michael\">\r\n <IcSkeleton\r\n slot=\"icon\"\r\n variant=\"circle\"\r\n style={{\r\n height: \"2rem\",\r\n width: \"2rem\",\r\n }}\r\n />\r\n <IcSkeleton\r\n slot=\"heading\"\r\n variant=\"rectangle\"\r\n style={{\r\n height: \"2rem\",\r\n width: \"10.625rem\",\r\n }}\r\n />\r\n <IcSkeleton\r\n slot=\"subheading\"\r\n variant=\"text\"\r\n style={{\r\n height: \"1.125rem\",\r\n width: \"6.25rem\",\r\n }}\r\n />\r\n <IcSkeleton\r\n slot=\"message\"\r\n variant=\"rectangle\"\r\n style={{\r\n height: \"1.5rem\",\r\n width: \"18.75rem\",\r\n }}\r\n />\r\n <IcSkeleton\r\n slot=\"interaction-controls\"\r\n variant=\"rectangle\"\r\n style={{\r\n height: \"2.5rem\",\r\n width: \"6.25rem\",\r\n }}\r\n />\r\n <IcSkeleton\r\n slot=\"interaction-controls\"\r\n variant=\"rectangle\"\r\n style={{\r\n height: \"2.5rem\",\r\n width: \"6.25rem\",\r\n }}\r\n />\r\n </IcCard>\r\n);\r\n\r\nexport const loaded = () => (\r\n <IcCard\r\n heading=\"Americano Order\"\r\n subheading=\"Name: Michael\"\r\n message=\"Extras: double espresso shot & oat milk\"\r\n >\r\n <SlottedSVG\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n width=\"24\"\r\n fill=\"#000000\"\r\n >\r\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\r\n </SlottedSVG>\r\n <div slot=\"interaction-controls\" style={{ display: \"flex\", gap: \"1rem\" }}>\r\n <IcButton variant=\"primary\">Accept</IcButton>\r\n <IcButton variant=\"secondary\">Cancel</IcButton>\r\n </div>\r\n </IcCard>\r\n);\r\n\r\nexport const ContentFunction = () => {\r\n const [content, setContent] = React.useState(loaded);\r\n const loadFunc = () => {\r\n setContent(loading);\r\n setTimeout(() => {\r\n setContent(loaded);\r\n }, 3000);\r\n };\r\n return (\r\n <div>\r\n {content}\r\n <br />\r\n <IcButton\r\n variant=\"primary\"\r\n onClick={() => {\r\n loadFunc();\r\n }}\r\n >\r\n <SlottedSVG\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n width=\"24\"\r\n fill=\"#000000\"\r\n >\r\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\r\n <path d=\"M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z\" />\r\n </SlottedSVG>\r\n Refresh\r\n </IcButton>\r\n </div>\r\n );\r\n};\r\n\r\n<ComponentPreview snippets={snippetsInCard}>\r\n <ContentFunction />\r\n</ComponentPreview>\r\n",
"path": "/components/skeleton/code",
"date": "2024-05-31",
"title": "Skeleton",
@@ -3507,11 +3507,11 @@
}
],
"meta": {
- "relativePath": "components/skeleton/code.mdx",
- "createdAt": "2024-11-06T10:27:49.408Z",
- "lastModified": "2024-11-06T10:19:00.128Z",
- "size": 12649,
- "formattedSize": "12.4 KB"
+ "relativePath": "components\\skeleton\\code.mdx",
+ "createdAt": "2024-12-04T13:23:54.116Z",
+ "lastModified": "2024-12-04T13:23:54.116Z",
+ "size": 13239,
+ "formattedSize": "12.9 KB"
}
},
{
@@ -3539,9 +3539,9 @@
}
],
"meta": {
- "relativePath": "components/skeleton/guidance.mdx",
- "createdAt": "2024-11-06T10:27:49.408Z",
- "lastModified": "2024-11-06T10:19:00.128Z",
+ "relativePath": "components\\skeleton\\guidance.mdx",
+ "createdAt": "2024-11-05T11:57:53.507Z",
+ "lastModified": "2024-11-05T11:57:53.507Z",
"size": 4677,
"formattedSize": "4.6 KB"
}
@@ -3570,16 +3570,16 @@
}
],
"meta": {
- "relativePath": "components/status-tags/accessibility.mdx",
- "createdAt": "2024-11-06T10:27:49.404Z",
- "lastModified": "2024-11-06T10:19:00.132Z",
+ "relativePath": "components\\status-tags\\accessibility.mdx",
+ "createdAt": "2024-11-05T11:57:53.525Z",
+ "lastModified": "2024-11-05T11:57:53.525Z",
"size": 1948,
"formattedSize": "1.9 KB"
}
},
{
"id": "components\\status-tags\\codex",
- "contents": "\nimport { IcStatusTag } from \"@ukic/react\";\n\nexport const snippetsDefault = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-status-tag label=\"Neutral\" status=\"neutral\"></ic-status-tag>\n<ic-status-tag label=\"Success\" status=\"success\"></ic-status-tag>\n<ic-status-tag label=\"Warning\" status=\"warning\"></ic-status-tag>\n<ic-status-tag label=\"Error\" status=\"danger\"></ic-status-tag>`,\n long: `.parent-container {\n display: flex;\n gap: var(--ic-space-xs);\n flex-wrap: wrap;\n padding: var(--ic-space-md);\n }\n </style>\n <body>\n <div class=\"parent-container\">\n {shortCode}\n </div>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcStatusTag label=\"Neutral\" status=\"neutral\"/>\n<IcStatusTag label=\"Success\" status=\"success\"/>\n<IcStatusTag label=\"Warning\" status=\"warning\"/>\n<IcStatusTag label=\"Error\" status=\"danger\"/>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n display: \"flex\",\n flexWrap: \"wrap\",\n gap: \"var(--ic-space-xs)\",\n padding: \"var(--ic-space-md)\",\n },\n});\nconst classes = useStyles();\nreturn (\n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n display: \"flex\",\n flexWrap: \"wrap\",\n gap: \"var(--ic-space-xs)\",\n padding: \"var(--ic-space-md)\",\n },\n});\nconst classes = useStyles();\nreturn (\n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview style={{ gap: \"0.5rem\" }} snippets={snippetsDefault}>\n <IcStatusTag label=\"Neutral\" status=\"neutral\" />\n <IcStatusTag label=\"Success\" status=\"success\" />\n <IcStatusTag label=\"Warning\" status=\"warning\" />\n <IcStatusTag label=\"Error\" status=\"danger\" />\n</ComponentPreview>\n\n## Status tag details\n\n<ComponentDetails component=\"ic-status-tag\" />\n\n## Variants\n\n### Emphasis\n\nexport const snippetsEmphasis = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-status-tag\n label=\"Neutral\"\n status=\"neutral\"\n variant=\"outlined\"\n></ic-status-tag>\n<ic-status-tag\n label=\"Success\"\n status=\"success\"\n variant=\"outlined\"\n></ic-status-tag>\n<ic-status-tag\n label=\"Warning\"\n status=\"warning\"\n variant=\"outlined\"\n></ic-status-tag>\n<ic-status-tag\n label=\"Error\"\n status=\"danger\"\n variant=\"outlined\"\n></ic-status-tag>`,\n long: `.parent-container {\n display: flex;\n gap: var(--ic-space-xs);\n flex-wrap: wrap;\n padding: var(--ic-space-md);\n }\n </style>\n <body>\n <div class=\"parent-container\">\n {shortCode}\n </div>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcStatusTag label=\"Neutral\" status=\"neutral\" variant=\"outlined\" />\n<IcStatusTag label=\"Success\" status=\"success\" variant=\"outlined\" />\n<IcStatusTag label=\"Warning\" status=\"warning\" variant=\"outlined\" />\n<IcStatusTag label=\"Error\" status=\"danger\" variant=\"outlined\" />`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n display: \"flex\",\n flexWrap: \"wrap\",\n gap: \"var(--ic-space-xs)\",\n padding: \"var(--ic-space-md)\",\n },\n});\nconst classes = useStyles();\nreturn (\n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n display: \"flex\",\n flexWrap: \"wrap\",\n gap: \"var(--ic-space-xs)\",\n padding: \"var(--ic-space-md)\",\n },\n});\nconst classes = useStyles();\nreturn (\n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview style={{ gap: \"0.5rem\" }} snippets={snippetsEmphasis}>\n <IcStatusTag label=\"Neutral\" status=\"neutral\" variant=\"outlined\" />\n <IcStatusTag label=\"Success\" status=\"success\" variant=\"outlined\" />\n <IcStatusTag label=\"Warning\" status=\"warning\" variant=\"outlined\" />\n <IcStatusTag label=\"Error\" status=\"danger\" variant=\"outlined\" />\n</ComponentPreview>\n\n### Sizes\n\nexport const snippetsSizes = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-status-tag\n label=\"Neutral\"\n status=\"neutral\"\n size=\"small\"\n></ic-status-tag>\n<ic-status-tag\n label=\"Success\"\n status=\"success\"\n size=\"default\"\n></ic-status-tag>\n<ic-status-tag\n label=\"Warning\"\n status=\"warning\"\n size=\"large\"\n></ic-status-tag>`,\n long: `.parent-container {\n display: flex;\n gap: var(--ic-space-xs);\n flex-wrap: wrap;\n padding: var(--ic-space-md);\n }\n </style>\n <body>\n <div class=\"parent-container\">\n {shortCode}\n </div>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcStatusTag label=\"Neutral\" status=\"neutral\" size=\"small\" />\n<IcStatusTag label=\"Success\" status=\"success\" size=\"default\" />\n<IcStatusTag label=\"Warning\" status=\"warning\" size=\"large\" />`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n display: \"flex\",\n flexWrap: \"wrap\",\n gap: \"var(--ic-space-xs)\",\n padding: \"var(--ic-space-md)\",\n },\n});\nconst classes = useStyles();\nreturn (\n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n display: \"flex\",\n flexWrap: \"wrap\",\n gap: \"var(--ic-space-xs)\",\n padding: \"var(--ic-space-md)\",\n },\n});\nconst classes = useStyles();\nreturn (\n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview style={{ gap: \"0.5rem\" }} snippets={snippetsSizes}>\n <IcStatusTag label=\"Neutral\" status=\"neutral\" size=\"small\" />\n <IcStatusTag label=\"Success\" status=\"success\" />\n <IcStatusTag label=\"Warning\" status=\"warning\" size=\"large\" />\n</ComponentPreview>\n",
+ "contents": "\r\nimport { IcStatusTag } from \"@ukic/react\";\r\n\r\nexport const snippetsDefault = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-status-tag label=\"Neutral\" status=\"neutral\"></ic-status-tag>\r\n<ic-status-tag label=\"Success\" status=\"success\"></ic-status-tag>\r\n<ic-status-tag label=\"Warning\" status=\"warning\"></ic-status-tag>\r\n<ic-status-tag label=\"Error\" status=\"danger\"></ic-status-tag>`,\r\n long: `.parent-container {\r\n display: flex;\r\n gap: var(--ic-space-xs);\r\n flex-wrap: wrap;\r\n padding: var(--ic-space-md);\r\n }\r\n </style>\r\n <body>\r\n <div class=\"parent-container\">\r\n {shortCode}\r\n </div>`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcStatusTag label=\"Neutral\" status=\"neutral\"/>\r\n<IcStatusTag label=\"Success\" status=\"success\"/>\r\n<IcStatusTag label=\"Warning\" status=\"warning\"/>\r\n<IcStatusTag label=\"Error\" status=\"danger\"/>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `const useStyles = createUseStyles({\r\n parentContainer: {\r\n display: \"flex\",\r\n flexWrap: \"wrap\",\r\n gap: \"var(--ic-space-xs)\",\r\n padding: \"var(--ic-space-md)\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nreturn (\r\n <div className={classes.parentContainer}>\r\n {shortCode}\r\n </div>\r\n)`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `const useStyles = createUseStyles({\r\n parentContainer: {\r\n display: \"flex\",\r\n flexWrap: \"wrap\",\r\n gap: \"var(--ic-space-xs)\",\r\n padding: \"var(--ic-space-md)\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nreturn (\r\n <div className={classes.parentContainer}>\r\n {shortCode}\r\n </div>\r\n)`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview style={{ gap: \"0.5rem\" }} snippets={snippetsDefault}>\r\n <IcStatusTag label=\"Neutral\" status=\"neutral\" />\r\n <IcStatusTag label=\"Success\" status=\"success\" />\r\n <IcStatusTag label=\"Warning\" status=\"warning\" />\r\n <IcStatusTag label=\"Error\" status=\"danger\" />\r\n</ComponentPreview>\r\n\r\n## Status tag details\r\n\r\n<ComponentDetails component=\"ic-status-tag\" />\r\n\r\n## Variants\r\n\r\n### Emphasis\r\n\r\nexport const snippetsEmphasis = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-status-tag\r\n label=\"Neutral\"\r\n status=\"neutral\"\r\n variant=\"outlined\"\r\n></ic-status-tag>\r\n<ic-status-tag\r\n label=\"Success\"\r\n status=\"success\"\r\n variant=\"outlined\"\r\n></ic-status-tag>\r\n<ic-status-tag\r\n label=\"Warning\"\r\n status=\"warning\"\r\n variant=\"outlined\"\r\n></ic-status-tag>\r\n<ic-status-tag\r\n label=\"Error\"\r\n status=\"danger\"\r\n variant=\"outlined\"\r\n></ic-status-tag>`,\r\n long: `.parent-container {\r\n display: flex;\r\n gap: var(--ic-space-xs);\r\n flex-wrap: wrap;\r\n padding: var(--ic-space-md);\r\n }\r\n </style>\r\n <body>\r\n <div class=\"parent-container\">\r\n {shortCode}\r\n </div>`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcStatusTag label=\"Neutral\" status=\"neutral\" variant=\"outlined\" />\r\n<IcStatusTag label=\"Success\" status=\"success\" variant=\"outlined\" />\r\n<IcStatusTag label=\"Warning\" status=\"warning\" variant=\"outlined\" />\r\n<IcStatusTag label=\"Error\" status=\"danger\" variant=\"outlined\" />`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `const useStyles = createUseStyles({\r\n parentContainer: {\r\n display: \"flex\",\r\n flexWrap: \"wrap\",\r\n gap: \"var(--ic-space-xs)\",\r\n padding: \"var(--ic-space-md)\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nreturn (\r\n <div className={classes.parentContainer}>\r\n {shortCode}\r\n </div>\r\n)`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `const useStyles = createUseStyles({\r\n parentContainer: {\r\n display: \"flex\",\r\n flexWrap: \"wrap\",\r\n gap: \"var(--ic-space-xs)\",\r\n padding: \"var(--ic-space-md)\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nreturn (\r\n <div className={classes.parentContainer}>\r\n {shortCode}\r\n </div>\r\n)`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview style={{ gap: \"0.5rem\" }} snippets={snippetsEmphasis}>\r\n <IcStatusTag label=\"Neutral\" status=\"neutral\" variant=\"outlined\" />\r\n <IcStatusTag label=\"Success\" status=\"success\" variant=\"outlined\" />\r\n <IcStatusTag label=\"Warning\" status=\"warning\" variant=\"outlined\" />\r\n <IcStatusTag label=\"Error\" status=\"danger\" variant=\"outlined\" />\r\n</ComponentPreview>\r\n\r\n### Sizes\r\n\r\nexport const snippetsSizes = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-status-tag\r\n label=\"Neutral\"\r\n status=\"neutral\"\r\n size=\"small\"\r\n></ic-status-tag>\r\n<ic-status-tag\r\n label=\"Success\"\r\n status=\"success\"\r\n size=\"default\"\r\n></ic-status-tag>\r\n<ic-status-tag\r\n label=\"Warning\"\r\n status=\"warning\"\r\n size=\"large\"\r\n></ic-status-tag>`,\r\n long: `.parent-container {\r\n display: flex;\r\n gap: var(--ic-space-xs);\r\n flex-wrap: wrap;\r\n padding: var(--ic-space-md);\r\n }\r\n </style>\r\n <body>\r\n <div class=\"parent-container\">\r\n {shortCode}\r\n </div>`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcStatusTag label=\"Neutral\" status=\"neutral\" size=\"small\" />\r\n<IcStatusTag label=\"Success\" status=\"success\" size=\"default\" />\r\n<IcStatusTag label=\"Warning\" status=\"warning\" size=\"large\" />`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `const useStyles = createUseStyles({\r\n parentContainer: {\r\n display: \"flex\",\r\n flexWrap: \"wrap\",\r\n gap: \"var(--ic-space-xs)\",\r\n padding: \"var(--ic-space-md)\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nreturn (\r\n <div className={classes.parentContainer}>\r\n {shortCode}\r\n </div>\r\n)`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `const useStyles = createUseStyles({\r\n parentContainer: {\r\n display: \"flex\",\r\n flexWrap: \"wrap\",\r\n gap: \"var(--ic-space-xs)\",\r\n padding: \"var(--ic-space-md)\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nreturn (\r\n <div className={classes.parentContainer}>\r\n {shortCode}\r\n </div>\r\n)`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview style={{ gap: \"0.5rem\" }} snippets={snippetsSizes}>\r\n <IcStatusTag label=\"Neutral\" status=\"neutral\" size=\"small\" />\r\n <IcStatusTag label=\"Success\" status=\"success\" />\r\n <IcStatusTag label=\"Warning\" status=\"warning\" size=\"large\" />\r\n</ComponentPreview>\r\n",
"path": "/components/status-tag/code",
"date": "2024-05-31",
"title": "Status tag",
@@ -3601,16 +3601,16 @@
}
],
"meta": {
- "relativePath": "components/status-tags/code.mdx",
- "createdAt": "2024-11-06T10:27:49.404Z",
- "lastModified": "2024-11-06T10:19:00.132Z",
- "size": 6654,
- "formattedSize": "6.5 KB"
+ "relativePath": "components\\status-tags\\code.mdx",
+ "createdAt": "2024-12-04T13:23:54.116Z",
+ "lastModified": "2024-12-04T13:23:54.116Z",
+ "size": 6936,
+ "formattedSize": "6.8 KB"
}
},
{
"id": "components\\status-tags\\guidancex",
- "contents": "\nimport { IcStatusTag } from \"@ukic/react\";\nimport statusTagFig1 from \"./images/fig-1-do-use-status-tags-exclusively-to-denote-status.png\";\nimport statusTagFig2 from \"./images/fig-2-do-not-use-status-tags-for-anything-other-than-denoting-status.png\";\nimport statusTagFig3 from \"./images/fig-3-do-not-use-a-mix-of-primary-and-secondary-status-tags-to-show-the same-statuses-message-within-a-group-of-items.png\";\nimport statusTagFig4 from \"./images/fig-4-do-use-the-correct-status-tag-size-to-match-other-ui-component-sizes.png\";\nimport statusTagFig5 from \"./images/fig-5-do-not-mix-sizes-when-using-multiple-ui-components.png\";\nimport statusTagFig6 from \"./images/fig-6-do-use-adjectives-to-describe-status.png\";\nimport statusTagFig7 from \"./images/fig-7-do-not-use-verbs-in-status-tags.png\";\nimport statusTagFig8 from \"./images/fig-8-do-use-relevant-wording-that-supports-the-status-tag-colour.png\";\nimport statusTagFig9 from \"./images/fig-9-do-not-use-wording-which-directly-contrasts-and-or does-not-support-the-status-of-the-tag.png\";\nimport statusTagFig10 from \"./images/fig-10-avoid-using-long-labels-as-it-will-force-the-text-to-wrap.png\";\n\n## Introduction\n\nThe status tag has four types:\n\n- Neutral\n- Success\n- Warning\n- Danger\n\nEach status tag has a filled and outlined appearance option and is available in three sizes.\n\n<ComponentPreview style={{ gap: \"0.5rem\" }}>\n <IcStatusTag label=\"Neutral\" status=\"neutral\" />\n <IcStatusTag label=\"Success\" status=\"success\" />\n <IcStatusTag label=\"Warning\" status=\"warning\" />\n <IcStatusTag label=\"Danger\" status=\"danger\" />\n</ComponentPreview>\n\n## When to use\n\nDisplay a status tag to show the status of an item in an application. For example, status tags could be used to show if a system is online or offline, if a document has been actioned or approved, or if a displayed train network is currently active or not.\n\n### Filled\n\nFilled status tags use the status colours to denote the type of status tag.\n\nUse filled status tags to convey emphasis and importance.\n\n### Outlined\n\nOutlined status tags use a lighter colour variation of the relevant status colour.\n\nUse outlined status tags to provide emphasis to less important items.\n\n<DoubleDoDontCaution>\n <DoDontCaution\n imageSrc={statusTagFig1}\n imageAlt=\"A good example of a success status tag labelled ‘approved’ used to show the status of a page titled ‘Guidance’.\"\n state=\"good\"\n caption=\"Use status tags to convey the current status of something.\"\n />\n</DoubleDoDontCaution>\n\n## When not to use\n\nDon't use status tags to display anything other than status, use [static chips](/components/chip/#static-chips).\n\n<DoubleDoDontCaution>\n <DoDontCaution\n imageSrc={statusTagFig2}\n imageAlt=\"An example of a status tag being used to display the author of a page.\"\n state=\"bad\"\n caption=\"Don't use status tags for anything other than denoting status.\"\n />\n</DoubleDoDontCaution>\n\nDon't use a mix of filled and outlined status tags when using them together.\n\n<DoubleDoDontCaution>\n <DoDontCaution\n imageSrc={statusTagFig3}\n imageAlt=\"An incorrect example of filled and outlined status tags being used in the same page section.\"\n state=\"bad\"\n caption=\"Don't use a mix of filled and outlined status tags to show the same status messages within a group of items.\"\n />\n</DoubleDoDontCaution>\n\n## Layout and placement\n\nWhen components are used together the size of the components should match. For example, a default sized status tag should be used with a default sized input component.\n\n<DoubleDoDontCaution>\n <DoDontCaution\n imageSrc={statusTagFig4}\n imageAlt=\"A good example of default sized status tags being used in the same section as other default sized components, and a small status tag being used in the same section as another small component.\"\n state=\"good\"\n caption=\"Use the correct status tag size to match other UI component sizes.\"\n />\n <DoDontCaution\n imageSrc={statusTagFig5}\n imageAlt=\"An incorrect example of small sized status tags used in the same section as other default sized components, and a default status tag being used in the same section as a small component.\"\n state=\"bad\"\n caption=\"Don't mix sizes when using multiple UI components.\"\n />\n</DoubleDoDontCaution>\n\n## Content\n\n### Labels\n\nUse adjectives in the status tag label over verbs. Verbs may indicate to a user that by clicking on them the tag will be interactive.\n\nText in tags should be all capitals to increase readability.\n\n<DoubleDoDontCaution>\n <DoDontCaution\n imageSrc={statusTagFig6}\n imageAlt=\"A correct example of a status tag which has the label 'submitted'.\"\n state=\"good\"\n caption=\"Use adjectives to describe status. \"\n />\n <DoDontCaution\n imageSrc={statusTagFig7}\n imageAlt=\"An incorrect example of a status tag which has the label 'submit'.\"\n state=\"bad\"\n caption=\"Don't use verbs in status tags.\"\n />\n</DoubleDoDontCaution>\n\nUse the right status tag type that is relevant to the label. Don't use labels that convey different information to what the status colour conveys.\n\n<DoubleDoDontCaution>\n <DoDontCaution\n imageSrc={statusTagFig8}\n imageAlt=\"A correct example of status tag labelling. The default variant has the label 'incomplete', the success variant has the label 'accepted’, the warning variant has the label 'in review', the danger variant has the label 'rejected'.\"\n state=\"good\"\n caption=\"Use relevant wording that supports the status tag colour.\"\n />\n <DoDontCaution\n imageSrc={statusTagFig9}\n imageAlt=\"An incorrect example of status tag labelling. The default variant has the label 'urgent', the success variant has the label 'error’, the warning variant has the label 'success', the danger variant has the label 'approved'.\"\n state=\"bad\"\n caption=\"Don't use wording that directly contradicts or doesn’t support the status of the tag.\"\n />\n</DoubleDoDontCaution>\n\nUse concise labels for better readability. Longer labels will force the text to wrap.\n\n<DoubleDoDontCaution>\n <DoDontCaution\n imageSrc={statusTagFig10}\n imageAlt=\"An example of a long label being wrapped on two lines.\"\n state=\"caution\"\n caption=\"Avoid using long labels as it will force the text to wrap.\"\n />\n</DoubleDoDontCaution>\n\n## Related components\n\n- [Chips](/components/chip)\n",
+ "contents": "\r\nimport { IcStatusTag } from \"@ukic/react\";\r\nimport statusTagFig1 from \"./images/fig-1-do-use-status-tags-exclusively-to-denote-status.png\";\r\nimport statusTagFig2 from \"./images/fig-2-do-not-use-status-tags-for-anything-other-than-denoting-status.png\";\r\nimport statusTagFig3 from \"./images/fig-3-do-not-use-a-mix-of-primary-and-secondary-status-tags-to-show-the same-statuses-message-within-a-group-of-items.png\";\r\nimport statusTagFig4 from \"./images/fig-4-do-use-the-correct-status-tag-size-to-match-other-ui-component-sizes.png\";\r\nimport statusTagFig5 from \"./images/fig-5-do-not-mix-sizes-when-using-multiple-ui-components.png\";\r\nimport statusTagFig6 from \"./images/fig-6-do-use-adjectives-to-describe-status.png\";\r\nimport statusTagFig7 from \"./images/fig-7-do-not-use-verbs-in-status-tags.png\";\r\nimport statusTagFig8 from \"./images/fig-8-do-use-relevant-wording-that-supports-the-status-tag-colour.png\";\r\nimport statusTagFig9 from \"./images/fig-9-do-not-use-wording-which-directly-contrasts-and-or does-not-support-the-status-of-the-tag.png\";\r\nimport statusTagFig10 from \"./images/fig-10-avoid-using-long-labels-as-it-will-force-the-text-to-wrap.png\";\r\n\r\n## Introduction\r\n\r\nThe status tag has four types:\r\n\r\n- Neutral\r\n- Success\r\n- Warning\r\n- Danger\r\n\r\nEach status tag has a filled and outlined appearance option and is available in three sizes.\r\n\r\n<ComponentPreview style={{ gap: \"0.5rem\" }}>\r\n <IcStatusTag label=\"Neutral\" status=\"neutral\" />\r\n <IcStatusTag label=\"Success\" status=\"success\" />\r\n <IcStatusTag label=\"Warning\" status=\"warning\" />\r\n <IcStatusTag label=\"Danger\" status=\"danger\" />\r\n</ComponentPreview>\r\n\r\n## When to use\r\n\r\nDisplay a status tag to show the status of an item in an application. For example, status tags could be used to show if a system is online or offline, if a document has been actioned or approved, or if a displayed train network is currently active or not.\r\n\r\n### Filled\r\n\r\nFilled status tags use the status colours to denote the type of status tag.\r\n\r\nUse filled status tags to convey emphasis and importance.\r\n\r\n### Outlined\r\n\r\nOutlined status tags use a lighter colour variation of the relevant status colour.\r\n\r\nUse outlined status tags to provide emphasis to less important items.\r\n\r\n<DoubleDoDontCaution>\r\n <DoDontCaution\r\n imageSrc={statusTagFig1}\r\n imageAlt=\"A good example of a success status tag labelled ‘approved’ used to show the status of a page titled ‘Guidance’.\"\r\n state=\"good\"\r\n caption=\"Use status tags to convey the current status of something.\"\r\n />\r\n</DoubleDoDontCaution>\r\n\r\n## When not to use\r\n\r\nDon't use status tags to display anything other than status, use [static chips](/components/chip/#static-chips).\r\n\r\n<DoubleDoDontCaution>\r\n <DoDontCaution\r\n imageSrc={statusTagFig2}\r\n imageAlt=\"An example of a status tag being used to display the author of a page.\"\r\n state=\"bad\"\r\n caption=\"Don't use status tags for anything other than denoting status.\"\r\n />\r\n</DoubleDoDontCaution>\r\n\r\nDon't use a mix of filled and outlined status tags when using them together.\r\n\r\n<DoubleDoDontCaution>\r\n <DoDontCaution\r\n imageSrc={statusTagFig3}\r\n imageAlt=\"An incorrect example of filled and outlined status tags being used in the same page section.\"\r\n state=\"bad\"\r\n caption=\"Don't use a mix of filled and outlined status tags to show the same status messages within a group of items.\"\r\n />\r\n</DoubleDoDontCaution>\r\n\r\n## Layout and placement\r\n\r\nWhen components are used together the size of the components should match. For example, a default sized status tag should be used with a default sized input component.\r\n\r\n<DoubleDoDontCaution>\r\n <DoDontCaution\r\n imageSrc={statusTagFig4}\r\n imageAlt=\"A good example of default sized status tags being used in the same section as other default sized components, and a small status tag being used in the same section as another small component.\"\r\n state=\"good\"\r\n caption=\"Use the correct status tag size to match other UI component sizes.\"\r\n />\r\n <DoDontCaution\r\n imageSrc={statusTagFig5}\r\n imageAlt=\"An incorrect example of small sized status tags used in the same section as other default sized components, and a default status tag being used in the same section as a small component.\"\r\n state=\"bad\"\r\n caption=\"Don't mix sizes when using multiple UI components.\"\r\n />\r\n</DoubleDoDontCaution>\r\n\r\n## Content\r\n\r\n### Labels\r\n\r\nUse adjectives in the status tag label over verbs. Verbs may indicate to a user that by clicking on them the tag will be interactive.\r\n\r\nText in tags should be all capitals to increase readability.\r\n\r\n<DoubleDoDontCaution>\r\n <DoDontCaution\r\n imageSrc={statusTagFig6}\r\n imageAlt=\"A correct example of a status tag which has the label 'submitted'.\"\r\n state=\"good\"\r\n caption=\"Use adjectives to describe status. \"\r\n />\r\n <DoDontCaution\r\n imageSrc={statusTagFig7}\r\n imageAlt=\"An incorrect example of a status tag which has the label 'submit'.\"\r\n state=\"bad\"\r\n caption=\"Don't use verbs in status tags.\"\r\n />\r\n</DoubleDoDontCaution>\r\n\r\nUse the right status tag type that is relevant to the label. Don't use labels that convey different information to what the status colour conveys.\r\n\r\n<DoubleDoDontCaution>\r\n <DoDontCaution\r\n imageSrc={statusTagFig8}\r\n imageAlt=\"A correct example of status tag labelling. The default variant has the label 'incomplete', the success variant has the label 'accepted’, the warning variant has the label 'in review', the danger variant has the label 'rejected'.\"\r\n state=\"good\"\r\n caption=\"Use relevant wording that supports the status tag colour.\"\r\n />\r\n <DoDontCaution\r\n imageSrc={statusTagFig9}\r\n imageAlt=\"An incorrect example of status tag labelling. The default variant has the label 'urgent', the success variant has the label 'error’, the warning variant has the label 'success', the danger variant has the label 'approved'.\"\r\n state=\"bad\"\r\n caption=\"Don't use wording that directly contradicts or doesn’t support the status of the tag.\"\r\n />\r\n</DoubleDoDontCaution>\r\n\r\nUse concise labels for better readability. Longer labels will force the text to wrap.\r\n\r\n<DoubleDoDontCaution>\r\n <DoDontCaution\r\n imageSrc={statusTagFig10}\r\n imageAlt=\"An example of a long label being wrapped on two lines.\"\r\n state=\"caution\"\r\n caption=\"Avoid using long labels as it will force the text to wrap.\"\r\n />\r\n</DoubleDoDontCaution>\r\n\r\n## Related components\r\n\r\n- [Chips](/components/chip)\r\n",
"path": "/components/status-tag",
"navPriority": 32,
"date": "2023-04-17",
@@ -3634,11 +3634,11 @@
],
"tags": ["Tags"],
"meta": {
- "relativePath": "components/status-tags/guidance.mdx",
- "createdAt": "2024-11-06T10:27:49.404Z",
- "lastModified": "2024-11-06T10:19:00.132Z",
- "size": 6882,
- "formattedSize": "6.7 KB"
+ "relativePath": "components\\status-tags\\guidance.mdx",
+ "createdAt": "2024-12-04T13:23:54.117Z",
+ "lastModified": "2024-12-04T13:23:54.117Z",
+ "size": 7059,
+ "formattedSize": "6.9 KB"
}
},
{
@@ -3665,16 +3665,16 @@
}
],
"meta": {
- "relativePath": "components/stepper/accessibility.mdx",
- "createdAt": "2024-11-06T10:27:49.404Z",
- "lastModified": "2024-11-06T10:19:00.132Z",
+ "relativePath": "components\\stepper\\accessibility.mdx",
+ "createdAt": "2024-11-05T11:57:53.595Z",
+ "lastModified": "2024-11-05T11:57:53.595Z",
"size": 1730,
"formattedSize": "1.7 KB"
}
},
{
"id": "components\\stepper\\codex",
- "contents": "\nimport { IcStepper, IcStep } from \"@ukic/react\";\n\n## Component demo\n\nexport const snippets = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-stepper>\n <ic-step step-title=\"Order coffee\" step-type=\"completed\"></ic-step>\n <ic-step step-title=\"Pay for order\" step-type=\"current\"></ic-step>\n <ic-step step-title=\"Collect\" step-type=\"disabled\"></ic-step>\n</ic-stepper>`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcStepper>\n <IcStep stepTitle=\"Order coffee\" stepType=\"completed\" />\n <IcStep stepTitle=\"Pay for order\" stepType=\"current\" />\n <IcStep stepTitle=\"Collect\" stepType=\"disabled\" />\n</IcStepper>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `{shortCode}`,\n },\n {\n language: \"Javascript\",\n snippet: `{shortCode}`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={snippets}>\n <IcStepper>\n <IcStep stepTitle=\"Order coffee\" stepType=\"completed\" />\n <IcStep stepTitle=\"Pay for order\" stepType=\"current\" />\n <IcStep stepTitle=\"Collect\" stepType=\"disabled\" />\n </IcStepper>\n</ComponentPreview>\n\n## Step details\n\n<ComponentDetails component=\"ic-step\" />\n\n## Stepper details\n\n<ComponentDetails component=\"ic-stepper\" />\n\n## Variants\n\n### Compact stepper\n\nexport const compactStepper = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-stepper variant=\"compact\">\n <ic-step step-title=\"Order coffee\" step-type=\"completed\"></ic-step>\n <ic-step step-title=\"Pay for order\" step-type=\"current\"></ic-step>\n <ic-step step-title=\"Collect\" step-type=\"disabled\"></ic-step>\n</ic-stepper>`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcStepper variant=\"compact\">\n <IcStep stepTitle=\"Order coffee\" stepType=\"completed\" />\n <IcStep stepTitle=\"Pay for order\" stepType=\"current\" />\n <IcStep stepTitle=\"Collect\" stepType=\"disabled\" />\n</IcStepper>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `{shortCode}`,\n },\n {\n language: \"Javascript\",\n snippet: `{shortCode}`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={compactStepper}>\n <IcStepper variant=\"compact\">\n <IcStep stepTitle=\"Order coffee\" stepType=\"completed\" />\n <IcStep stepTitle=\"Pay for order\" stepType=\"current\" />\n <IcStep stepTitle=\"Collect\" stepType=\"disabled\" />\n </IcStepper>\n</ComponentPreview>\n\n### Left-aligned\n\nexport const leftAligned = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-stepper aligned=\"left\">\n <ic-step step-title=\"Order coffee\" step-type=\"completed\"></ic-step>\n <ic-step step-title=\"Pay for order\" step-type=\"current\"></ic-step>\n <ic-step step-title=\"Collect\" step-type=\"disabled\"></ic-step>\n</ic-stepper>`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcStepper aligned=\"left\">\n <IcStep stepTitle=\"Order coffee\" stepType=\"completed\" />\n <IcStep stepTitle=\"Pay for order\" stepType=\"current\" />\n <IcStep stepTitle=\"Collect\" stepType=\"disabled\" />\n</IcStepper>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `{shortCode}`,\n },\n {\n language: \"Javascript\",\n snippet: `{shortCode}`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={leftAligned}>\n <IcStepper aligned=\"left\">\n <IcStep stepTitle=\"Order coffee\" stepType=\"completed\" />\n <IcStep stepTitle=\"Pay for order\" stepType=\"current\" />\n <IcStep stepTitle=\"Collect\" stepType=\"disabled\" />\n </IcStepper>\n</ComponentPreview>\n\n### With hidden step information\n\nexport const hiddenStepInfo = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-stepper hide-step-info=\"true\">\n <ic-step step-title=\"Order coffee\" step-type=\"completed\"></ic-step>\n <ic-step step-title=\"Pay for order\" step-type=\"current\"></ic-step>\n <ic-step step-title=\"Collect\" step-type=\"disabled\"></ic-step>\n</ic-stepper>`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcStepper hideStepInfo>\n <IcStep stepTitle=\"Order coffee\" stepType=\"completed\" />\n <IcStep stepTitle=\"Pay for order\" stepType=\"current\" />\n <IcStep stepTitle=\"Collect\" stepType=\"disabled\" />\n</IcStepper>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `{shortCode}`,\n },\n {\n language: \"Javascript\",\n snippet: `{shortCode}`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={hiddenStepInfo}>\n <IcStepper hideStepInfo>\n <IcStep stepTitle=\"Order coffee\" stepType=\"completed\" />\n <IcStep stepTitle=\"Pay for order\" stepType=\"current\" />\n <IcStep stepTitle=\"Collect\" stepType=\"disabled\" />\n </IcStepper>\n</ComponentPreview>\n\n### With subtitles\n\nexport const withSubtitles = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-stepper>\n <ic-step step-title=\"Order coffee\" step-type=\"completed\"></ic-step>\n <ic-step \n step-title=\"Customise your order\" \n step-subtitle=\"Optional\" \n step-type=\"completed\" \n >\n </ic-step>\n <ic-step \n step-title=\"Pay for order\" \n step-subtitle=\"We accept all major debit/credit cards\" \n step-type=\"current\" \n >\n </ic-step>\n <ic-step step-title=\"Collect\" step-type=\"disabled\"></ic-step>\n</ic-stepper>`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcStepper>\n <IcStep stepTitle=\"Order coffee\" stepType=\"completed\" />\n <IcStep \n stepTitle=\"Customise your order\" \n stepSubtitle=\"Optional\" \n stepType=\"completed\" \n />\n <IcStep \n stepTitle=\"Pay for order\" \n stepSubtitle=\"We accept all major debit/credit cards\" \n stepType=\"current\" \n />\n <IcStep stepTitle=\"Collect\" stepType=\"disabled\"/>\n</IcStepper>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `{shortCode}`,\n },\n {\n language: \"Javascript\",\n snippet: `{shortCode}`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={withSubtitles}>\n <IcStepper>\n <IcStep stepTitle=\"Order coffee\" stepType=\"completed\" />\n <IcStep\n stepTitle=\"Customise your order\"\n stepSubtitle=\"Optional\"\n stepType=\"completed\"\n />\n <IcStep\n stepTitle=\"Pay for order\"\n stepSubtitle=\"We accept all major debit/credit cards\"\n stepType=\"current\"\n />\n <IcStep stepTitle=\"Collect\" stepType=\"disabled\" />\n </IcStepper>\n</ComponentPreview>\n\n### Custom connector width\n\nexport const customConnectorWidth = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-stepper connector-width=\"150\">\n <ic-step step-title=\"Order coffee\" step-type=\"completed\"></ic-step>\n <ic-step step-title=\"Pay for order\" step-type=\"current\"></ic-step>\n <ic-step step-title=\"Collect\" step-type=\"disabled\"></ic-step>\n</ic-stepper>`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcStepper aligned=\"left\" connectorWidth={150}>\n <IcStep stepTitle=\"Order coffee\" stepType=\"completed\" />\n <IcStep stepTitle=\"Pay for order\" stepType=\"current\" />\n <IcStep stepTitle=\"Collect\" stepType=\"disabled\" />\n</IcStepper>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `{shortCode}`,\n },\n {\n language: \"Javascript\",\n snippet: `{shortCode}`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={customConnectorWidth}>\n <IcStepper aligned=\"left\" connectorWidth={150}>\n <IcStep stepTitle=\"Order coffee\" stepType=\"completed\" />\n <IcStep stepTitle=\"Pay for order\" stepType=\"current\" />\n <IcStep stepTitle=\"Collect\" stepType=\"disabled\" />\n </IcStepper>\n</ComponentPreview>\n",
+ "contents": "\r\nimport { IcStepper, IcStep } from \"@ukic/react\";\r\n\r\n## Component demo\r\n\r\nexport const snippets = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-stepper>\r\n <ic-step step-title=\"Order coffee\" step-type=\"completed\"></ic-step>\r\n <ic-step step-title=\"Pay for order\" step-type=\"current\"></ic-step>\r\n <ic-step step-title=\"Collect\" step-type=\"disabled\"></ic-step>\r\n</ic-stepper>`,\r\n long: `{shortCode}`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcStepper>\r\n <IcStep stepTitle=\"Order coffee\" stepType=\"completed\" />\r\n <IcStep stepTitle=\"Pay for order\" stepType=\"current\" />\r\n <IcStep stepTitle=\"Collect\" stepType=\"disabled\" />\r\n</IcStepper>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `{shortCode}`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `{shortCode}`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview snippets={snippets}>\r\n <IcStepper>\r\n <IcStep stepTitle=\"Order coffee\" stepType=\"completed\" />\r\n <IcStep stepTitle=\"Pay for order\" stepType=\"current\" />\r\n <IcStep stepTitle=\"Collect\" stepType=\"disabled\" />\r\n </IcStepper>\r\n</ComponentPreview>\r\n\r\n## Step details\r\n\r\n<ComponentDetails component=\"ic-step\" />\r\n\r\n## Stepper details\r\n\r\n<ComponentDetails component=\"ic-stepper\" />\r\n\r\n## Variants\r\n\r\n### Compact stepper\r\n\r\nexport const compactStepper = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-stepper variant=\"compact\">\r\n <ic-step step-title=\"Order coffee\" step-type=\"completed\"></ic-step>\r\n <ic-step step-title=\"Pay for order\" step-type=\"current\"></ic-step>\r\n <ic-step step-title=\"Collect\" step-type=\"disabled\"></ic-step>\r\n</ic-stepper>`,\r\n long: `{shortCode}`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcStepper variant=\"compact\">\r\n <IcStep stepTitle=\"Order coffee\" stepType=\"completed\" />\r\n <IcStep stepTitle=\"Pay for order\" stepType=\"current\" />\r\n <IcStep stepTitle=\"Collect\" stepType=\"disabled\" />\r\n</IcStepper>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `{shortCode}`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `{shortCode}`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview snippets={compactStepper}>\r\n <IcStepper variant=\"compact\">\r\n <IcStep stepTitle=\"Order coffee\" stepType=\"completed\" />\r\n <IcStep stepTitle=\"Pay for order\" stepType=\"current\" />\r\n <IcStep stepTitle=\"Collect\" stepType=\"disabled\" />\r\n </IcStepper>\r\n</ComponentPreview>\r\n\r\n### Left-aligned\r\n\r\nexport const leftAligned = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-stepper aligned=\"left\">\r\n <ic-step step-title=\"Order coffee\" step-type=\"completed\"></ic-step>\r\n <ic-step step-title=\"Pay for order\" step-type=\"current\"></ic-step>\r\n <ic-step step-title=\"Collect\" step-type=\"disabled\"></ic-step>\r\n</ic-stepper>`,\r\n long: `{shortCode}`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcStepper aligned=\"left\">\r\n <IcStep stepTitle=\"Order coffee\" stepType=\"completed\" />\r\n <IcStep stepTitle=\"Pay for order\" stepType=\"current\" />\r\n <IcStep stepTitle=\"Collect\" stepType=\"disabled\" />\r\n</IcStepper>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `{shortCode}`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `{shortCode}`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview snippets={leftAligned}>\r\n <IcStepper aligned=\"left\">\r\n <IcStep stepTitle=\"Order coffee\" stepType=\"completed\" />\r\n <IcStep stepTitle=\"Pay for order\" stepType=\"current\" />\r\n <IcStep stepTitle=\"Collect\" stepType=\"disabled\" />\r\n </IcStepper>\r\n</ComponentPreview>\r\n\r\n### With hidden step information\r\n\r\nexport const hiddenStepInfo = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-stepper hide-step-info=\"true\">\r\n <ic-step step-title=\"Order coffee\" step-type=\"completed\"></ic-step>\r\n <ic-step step-title=\"Pay for order\" step-type=\"current\"></ic-step>\r\n <ic-step step-title=\"Collect\" step-type=\"disabled\"></ic-step>\r\n</ic-stepper>`,\r\n long: `{shortCode}`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcStepper hideStepInfo>\r\n <IcStep stepTitle=\"Order coffee\" stepType=\"completed\" />\r\n <IcStep stepTitle=\"Pay for order\" stepType=\"current\" />\r\n <IcStep stepTitle=\"Collect\" stepType=\"disabled\" />\r\n</IcStepper>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `{shortCode}`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `{shortCode}`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview snippets={hiddenStepInfo}>\r\n <IcStepper hideStepInfo>\r\n <IcStep stepTitle=\"Order coffee\" stepType=\"completed\" />\r\n <IcStep stepTitle=\"Pay for order\" stepType=\"current\" />\r\n <IcStep stepTitle=\"Collect\" stepType=\"disabled\" />\r\n </IcStepper>\r\n</ComponentPreview>\r\n\r\n### With subtitles\r\n\r\nexport const withSubtitles = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-stepper>\r\n <ic-step step-title=\"Order coffee\" step-type=\"completed\"></ic-step>\r\n <ic-step \r\n step-title=\"Customise your order\" \r\n step-subtitle=\"Optional\" \r\n step-type=\"completed\" \r\n >\r\n </ic-step>\r\n <ic-step \r\n step-title=\"Pay for order\" \r\n step-subtitle=\"We accept all major debit/credit cards\" \r\n step-type=\"current\" \r\n >\r\n </ic-step>\r\n <ic-step step-title=\"Collect\" step-type=\"disabled\"></ic-step>\r\n</ic-stepper>`,\r\n long: `{shortCode}`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcStepper>\r\n <IcStep stepTitle=\"Order coffee\" stepType=\"completed\" />\r\n <IcStep \r\n stepTitle=\"Customise your order\" \r\n stepSubtitle=\"Optional\" \r\n stepType=\"completed\" \r\n />\r\n <IcStep \r\n stepTitle=\"Pay for order\" \r\n stepSubtitle=\"We accept all major debit/credit cards\" \r\n stepType=\"current\" \r\n />\r\n <IcStep stepTitle=\"Collect\" stepType=\"disabled\"/>\r\n</IcStepper>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `{shortCode}`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `{shortCode}`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview snippets={withSubtitles}>\r\n <IcStepper>\r\n <IcStep stepTitle=\"Order coffee\" stepType=\"completed\" />\r\n <IcStep\r\n stepTitle=\"Customise your order\"\r\n stepSubtitle=\"Optional\"\r\n stepType=\"completed\"\r\n />\r\n <IcStep\r\n stepTitle=\"Pay for order\"\r\n stepSubtitle=\"We accept all major debit/credit cards\"\r\n stepType=\"current\"\r\n />\r\n <IcStep stepTitle=\"Collect\" stepType=\"disabled\" />\r\n </IcStepper>\r\n</ComponentPreview>\r\n\r\n### Custom connector width\r\n\r\nexport const customConnectorWidth = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-stepper connector-width=\"150\">\r\n <ic-step step-title=\"Order coffee\" step-type=\"completed\"></ic-step>\r\n <ic-step step-title=\"Pay for order\" step-type=\"current\"></ic-step>\r\n <ic-step step-title=\"Collect\" step-type=\"disabled\"></ic-step>\r\n</ic-stepper>`,\r\n long: `{shortCode}`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcStepper aligned=\"left\" connectorWidth={150}>\r\n <IcStep stepTitle=\"Order coffee\" stepType=\"completed\" />\r\n <IcStep stepTitle=\"Pay for order\" stepType=\"current\" />\r\n <IcStep stepTitle=\"Collect\" stepType=\"disabled\" />\r\n</IcStepper>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `{shortCode}`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `{shortCode}`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview snippets={customConnectorWidth}>\r\n <IcStepper aligned=\"left\" connectorWidth={150}>\r\n <IcStep stepTitle=\"Order coffee\" stepType=\"completed\" />\r\n <IcStep stepTitle=\"Pay for order\" stepType=\"current\" />\r\n <IcStep stepTitle=\"Collect\" stepType=\"disabled\" />\r\n </IcStepper>\r\n</ComponentPreview>\r\n",
"path": "/components/stepper/code",
"date": "2024-05-31",
"title": "Stepper",
@@ -3696,16 +3696,16 @@
}
],
"meta": {
- "relativePath": "components/stepper/code.mdx",
- "createdAt": "2024-11-06T10:27:49.404Z",
- "lastModified": "2024-11-06T10:19:00.132Z",
- "size": 8348,
- "formattedSize": "8.2 KB"
+ "relativePath": "components\\stepper\\code.mdx",
+ "createdAt": "2024-12-04T13:23:54.118Z",
+ "lastModified": "2024-12-04T13:23:54.118Z",
+ "size": 8673,
+ "formattedSize": "8.5 KB"
}
},
{
"id": "components\\stepper\\guidancex",
- "contents": "\nimport { IcStepper, IcStep } from \"@ukic/react\";\nimport stepperFig1 from \"./images/fig-1-stepper-component-being-used-to-describe-the-steps-of-a-multistep-form.png\";\nimport stepperFig2 from \"./images/fig-2-use-concise-labels-within-a-stepper.png\";\nimport stepperFig3 from \"./images/fig-3-dont-use-long-labels-within-a-stepper.png\";\nimport stepperFig4 from \"./images/fig-4-a-stepper-accompanied-by-a-page-title-showing-how-the-stepper-should-be-implemented.png\";\nimport stepperFig5 from \"./images/fig-5-dont-use-a-compact-stepper-if-the-page-content-does-not-include-the-step-name-in-a-heading.png\";\nimport stepperFig6 from \"./images/fig-6-a-stepper-that-is-leftaligned-at-the-top-of-the-page-showing-how-the-stepper-should-be-implemented.png\";\nimport stepperFig7 from \"./images/fig-7-a-stepper-that-is-centrealigned-at-the-top-of-the-page-showing-how-the-stepper-should-not-be-implemented.png\";\nimport stepperFig8 from \"./images/fig-8-use-compact-stepper-when-there-is-not-much-room.png\";\n\n## Introduction\n\nAn example of the stepper component.\n\n<ComponentPreview>\n <IcStepper>\n <IcStep stepTitle=\"Order coffee\" stepType=\"completed\" />\n <IcStep stepTitle=\"Pay for order\" stepType=\"current\" />\n <IcStep stepTitle=\"Collect\" stepType=\"disabled\" />\n </IcStepper>\n</ComponentPreview>\n\n## Component variants\n\n### Default\n\nUse the default stepper when you have the available space.\n\n### Compact\n\nUse the compact variant for compact layouts or processes with many steps.\n\n## When to use\n\nUse steppers when a multi-step linear process is required. Steps are displayed from left to right and show the direction of movement through the process.\n\n<DoDontCaution\n imageSrc={stepperFig1}\n imageAlt=\"An image showing a form titled 'Make a coffee' featuring a stepper with four steps, titled 'Take order', 'Make drink', 'Take payment', and 'Finish'. The first step is selected, and the page below shows three input fields and a button labelled 'Confirm order'.\"\n state=\"good\"\n caption=\"Stepper component being used to describe the steps of a multi-step form.\"\n/>\n\nAlways indicate which step the user is currently on. This gives a sense of control and describes their position in the process in relation to where they have been, as well as how much they have left to do.\n\n## When not to use\n\nDon't use the stepper to indicate a non-linear process where steps can be completed in any order. Linear processes require each step to be completed in order.\n\n## Interaction behaviour\n\n### Steps\n\nSteps are single elements that together form the stepper. Steps have four different states:\n\n- Active: Indicates that the step is available but not yet completed by the user. This step type is rendered as current if displayed in the compact stepper.\n\n- Current: Shows the step the user is currently on.\n\n- Completed: Shows a previous step that has been completed by the user.\n\n- Disabled: Shows a step that is unavailable. This could be because it's conditional on another step. If a step is always unavailable, then it should not be included in the stepper when it's loaded.\n\n<ComponentPreview>\n <IcStepper>\n <IcStep stepTitle=\"Add details\" stepType=\"completed\" />\n <IcStep stepTitle=\"Customer\" stepType=\"current\" />\n <IcStep stepTitle=\"Upload\" />\n <IcStep stepTitle=\"Submit\" stepType=\"disabled\" />\n </IcStepper>\n</ComponentPreview>\n\n## Layout and placement\n\nAlways align steppers to the left and place them above the main body content of the page.\n\n<DoDontCaution\n imageSrc={stepperFig6}\n imageAlt=\"An image showing a stepper with four steps, titled 'Warm kettle', 'Add milk', 'Pour water', and 'Drink coffee'. The first step is selected, and the stepper is accurately placed at the top-left of a page.\"\n state=\"good\"\n caption=\"A stepper that is left-aligned at the top of the page, showing how the stepper should be implemented.\"\n/>\n\n<DoDontCaution\n imageSrc={stepperFig7}\n imageAlt=\"An image showing a stepper with four steps, titled 'Warm kettle', 'Add milk’, 'Pour water’, and 'Drink coffee'. The first step is selected, and the stepper is incorrectly placed in the centre of a page.\"\n state=\"bad\"\n caption=\"A stepper that is centre-aligned at the top of the page, showing how the stepper should not be implemented.\"\n/>\n\nWhen a stepper is too large to fit comfortably within its container, it will switch to use the compact stepper. This shows the current step along with its status, as well as the next step in the process.\n\n<DoubleDoDontCaution>\n <DoDontCaution\n imageSrc={stepperFig8}\n imageAlt=\"A compact stepper showing the current step labelled 'warm kettle' and the next step label 'add milk'.\"\n state=\"good\"\n caption=\"The compact stepper shows the current step as well as the next step in the process.\"\n />\n</DoubleDoDontCaution>\n\n## Content\n\n### Labels\n\nUse the step title to describe each step concisely in one or two words. Avoid using lengthy step titles.\n\n<DoDontCaution\n imageSrc={stepperFig2}\n imageAlt=\"An image showing a stepper with four steps, labelled 'Take order', 'make drink', 'Take payment', and 'Finish’. The first step is selected.\"\n state=\"good\"\n caption=\"Use concise labels within a stepper.\"\n/>\n\n<DoDontCaution\n imageSrc={stepperFig3}\n imageAlt=\"An image showing a stepper with four steps, each with very long labels. The first step is selected.\"\n state=\"caution\"\n caption=\"Avoid using long labels within a stepper.\"\n/>\n\nWhen a stepper is used, always use page titles and section headings on the page content itself.\n\n<DoDontCaution\n imageSrc={stepperFig4}\n imageAlt=\"An image showing a form titled 'Make a coffee' featuring a stepper with four steps, labelled 'Take order', 'Make drink', 'Take payment', and 'Finish’. The first step, 'Take order', is selected, and the page below shows three input fields and a button labelled 'Confirm order'.\"\n state=\"good\"\n caption=\"A stepper accompanied by a page title, showing how the stepper should be implemented.\"\n/>\n\nHide step information only if the step content is clearly labelled itself. Do not omit step labels if no headings are provided in the step content.\n\n<DoDontCaution\n imageSrc={stepperFig5}\n imageAlt=\"An image showing a form without a heading featuring a stepper with 4 steps, each without a label. The first unlabelled step is selected, and the page below shows three input fields and a button labelled ‘Confirm order’.\"\n state=\"bad\"\n caption=\"Don’t use a stepper without step labels if the page content does not include the step name in a heading.\"\n/>\n\nSet a step status to show whether the step is required or optional in the step's subtitle. Override the step subtitle text to provide a custom message.\n\n### Validation\n\nValidate each step as the user moves through the process. Use the standard error handling approach to display inline [alert](/components/alert) and error messages if the user attempts to proceed to the next step without first completing the current step correctly.\n",
+ "contents": "\r\nimport { IcStepper, IcStep } from \"@ukic/react\";\r\nimport stepperFig1 from \"./images/fig-1-stepper-component-being-used-to-describe-the-steps-of-a-multistep-form.png\";\r\nimport stepperFig2 from \"./images/fig-2-use-concise-labels-within-a-stepper.png\";\r\nimport stepperFig3 from \"./images/fig-3-dont-use-long-labels-within-a-stepper.png\";\r\nimport stepperFig4 from \"./images/fig-4-a-stepper-accompanied-by-a-page-title-showing-how-the-stepper-should-be-implemented.png\";\r\nimport stepperFig5 from \"./images/fig-5-dont-use-a-compact-stepper-if-the-page-content-does-not-include-the-step-name-in-a-heading.png\";\r\nimport stepperFig6 from \"./images/fig-6-a-stepper-that-is-leftaligned-at-the-top-of-the-page-showing-how-the-stepper-should-be-implemented.png\";\r\nimport stepperFig7 from \"./images/fig-7-a-stepper-that-is-centrealigned-at-the-top-of-the-page-showing-how-the-stepper-should-not-be-implemented.png\";\r\nimport stepperFig8 from \"./images/fig-8-use-compact-stepper-when-there-is-not-much-room.png\";\r\n\r\n## Introduction\r\n\r\nAn example of the stepper component.\r\n\r\n<ComponentPreview>\r\n <IcStepper>\r\n <IcStep stepTitle=\"Order coffee\" stepType=\"completed\" />\r\n <IcStep stepTitle=\"Pay for order\" stepType=\"current\" />\r\n <IcStep stepTitle=\"Collect\" stepType=\"disabled\" />\r\n </IcStepper>\r\n</ComponentPreview>\r\n\r\n## Component variants\r\n\r\n### Default\r\n\r\nUse the default stepper when you have the available space.\r\n\r\n### Compact\r\n\r\nUse the compact variant for compact layouts or processes with many steps.\r\n\r\n## When to use\r\n\r\nUse steppers when a multi-step linear process is required. Steps are displayed from left to right and show the direction of movement through the process.\r\n\r\n<DoDontCaution\r\n imageSrc={stepperFig1}\r\n imageAlt=\"An image showing a form titled 'Make a coffee' featuring a stepper with four steps, titled 'Take order', 'Make drink', 'Take payment', and 'Finish'. The first step is selected, and the page below shows three input fields and a button labelled 'Confirm order'.\"\r\n state=\"good\"\r\n caption=\"Stepper component being used to describe the steps of a multi-step form.\"\r\n/>\r\n\r\nAlways indicate which step the user is currently on. This gives a sense of control and describes their position in the process in relation to where they have been, as well as how much they have left to do.\r\n\r\n## When not to use\r\n\r\nDon't use the stepper to indicate a non-linear process where steps can be completed in any order. Linear processes require each step to be completed in order.\r\n\r\n## Interaction behaviour\r\n\r\n### Steps\r\n\r\nSteps are single elements that together form the stepper. Steps have four different states:\r\n\r\n- Active: Indicates that the step is available but not yet completed by the user. This step type is rendered as current if displayed in the compact stepper.\r\n\r\n- Current: Shows the step the user is currently on.\r\n\r\n- Completed: Shows a previous step that has been completed by the user.\r\n\r\n- Disabled: Shows a step that is unavailable. This could be because it's conditional on another step. If a step is always unavailable, then it should not be included in the stepper when it's loaded.\r\n\r\n<ComponentPreview>\r\n <IcStepper>\r\n <IcStep stepTitle=\"Add details\" stepType=\"completed\" />\r\n <IcStep stepTitle=\"Customer\" stepType=\"current\" />\r\n <IcStep stepTitle=\"Upload\" />\r\n <IcStep stepTitle=\"Submit\" stepType=\"disabled\" />\r\n </IcStepper>\r\n</ComponentPreview>\r\n\r\n## Layout and placement\r\n\r\nAlways align steppers to the left and place them above the main body content of the page.\r\n\r\n<DoDontCaution\r\n imageSrc={stepperFig6}\r\n imageAlt=\"An image showing a stepper with four steps, titled 'Warm kettle', 'Add milk', 'Pour water', and 'Drink coffee'. The first step is selected, and the stepper is accurately placed at the top-left of a page.\"\r\n state=\"good\"\r\n caption=\"A stepper that is left-aligned at the top of the page, showing how the stepper should be implemented.\"\r\n/>\r\n\r\n<DoDontCaution\r\n imageSrc={stepperFig7}\r\n imageAlt=\"An image showing a stepper with four steps, titled 'Warm kettle', 'Add milk’, 'Pour water’, and 'Drink coffee'. The first step is selected, and the stepper is incorrectly placed in the centre of a page.\"\r\n state=\"bad\"\r\n caption=\"A stepper that is centre-aligned at the top of the page, showing how the stepper should not be implemented.\"\r\n/>\r\n\r\nWhen a stepper is too large to fit comfortably within its container, it will switch to use the compact stepper. This shows the current step along with its status, as well as the next step in the process.\r\n\r\n<DoubleDoDontCaution>\r\n <DoDontCaution\r\n imageSrc={stepperFig8}\r\n imageAlt=\"A compact stepper showing the current step labelled 'warm kettle' and the next step label 'add milk'.\"\r\n state=\"good\"\r\n caption=\"The compact stepper shows the current step as well as the next step in the process.\"\r\n />\r\n</DoubleDoDontCaution>\r\n\r\n## Content\r\n\r\n### Labels\r\n\r\nUse the step title to describe each step concisely in one or two words. Avoid using lengthy step titles.\r\n\r\n<DoDontCaution\r\n imageSrc={stepperFig2}\r\n imageAlt=\"An image showing a stepper with four steps, labelled 'Take order', 'make drink', 'Take payment', and 'Finish’. The first step is selected.\"\r\n state=\"good\"\r\n caption=\"Use concise labels within a stepper.\"\r\n/>\r\n\r\n<DoDontCaution\r\n imageSrc={stepperFig3}\r\n imageAlt=\"An image showing a stepper with four steps, each with very long labels. The first step is selected.\"\r\n state=\"caution\"\r\n caption=\"Avoid using long labels within a stepper.\"\r\n/>\r\n\r\nWhen a stepper is used, always use page titles and section headings on the page content itself.\r\n\r\n<DoDontCaution\r\n imageSrc={stepperFig4}\r\n imageAlt=\"An image showing a form titled 'Make a coffee' featuring a stepper with four steps, labelled 'Take order', 'Make drink', 'Take payment', and 'Finish’. The first step, 'Take order', is selected, and the page below shows three input fields and a button labelled 'Confirm order'.\"\r\n state=\"good\"\r\n caption=\"A stepper accompanied by a page title, showing how the stepper should be implemented.\"\r\n/>\r\n\r\nHide step information only if the step content is clearly labelled itself. Do not omit step labels if no headings are provided in the step content.\r\n\r\n<DoDontCaution\r\n imageSrc={stepperFig5}\r\n imageAlt=\"An image showing a form without a heading featuring a stepper with 4 steps, each without a label. The first unlabelled step is selected, and the page below shows three input fields and a button labelled ‘Confirm order’.\"\r\n state=\"bad\"\r\n caption=\"Don’t use a stepper without step labels if the page content does not include the step name in a heading.\"\r\n/>\r\n\r\nSet a step status to show whether the step is required or optional in the step's subtitle. Override the step subtitle text to provide a custom message.\r\n\r\n### Validation\r\n\r\nValidate each step as the user moves through the process. Use the standard error handling approach to display inline [alert](/components/alert) and error messages if the user attempts to proceed to the next step without first completing the current step correctly.\r\n",
"path": "/components/stepper",
"navPriority": 33,
"date": "2023-02-03",
@@ -3729,11 +3729,11 @@
],
"tags": ["Progress indicator", "Steps", "Progress tracker"],
"meta": {
- "relativePath": "components/stepper/guidance.mdx",
- "createdAt": "2024-11-06T10:27:49.404Z",
- "lastModified": "2024-11-06T10:19:00.132Z",
- "size": 7538,
- "formattedSize": "7.4 KB"
+ "relativePath": "components\\stepper\\guidance.mdx",
+ "createdAt": "2024-12-04T13:23:54.118Z",
+ "lastModified": "2024-12-04T13:23:54.118Z",
+ "size": 7707,
+ "formattedSize": "7.5 KB"
}
},
{
@@ -3760,16 +3760,16 @@
}
],
"meta": {
- "relativePath": "components/switch/accessibility.mdx",
- "createdAt": "2024-11-06T10:27:49.408Z",
- "lastModified": "2024-11-06T10:19:00.136Z",
+ "relativePath": "components\\switch\\accessibility.mdx",
+ "createdAt": "2024-11-05T11:57:53.691Z",
+ "lastModified": "2024-11-05T11:57:53.691Z",
"size": 3160,
"formattedSize": "3.1 KB"
}
},
{
"id": "components\\switch\\codex",
- "contents": "\nimport { IcSwitch } from \"@ukic/react\";\n\n## Component demo\n\nexport const snippetsDefault = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-switch label=\"Coffee preferences\"></ic-switch>\n<script>\n const switchEl = document.querySelector('ic-switch');\n switchEl.addEventListener('icChange', (ev) => {\n console.log({\n checked: ev.detail.checked,\n value: ev.detail.value\n })\n })\n</script>`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcSwitch\n label=\"Coffee preferences\"\n onIcChange={(ev) => console.log({ \n checked: ev.detail.checked, \n value: ev.detail.value\n })}\n/>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `{shortCode}`,\n },\n {\n language: \"Javascript\",\n snippet: `{shortCode}`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={snippetsDefault}>\n <IcSwitch\n label=\"Coffee preferences\"\n onIcChange={(ev) =>\n console.log({\n checked: ev.detail.checked,\n value: ev.detail.value,\n })\n }\n />\n</ComponentPreview>\n\n## Switch details\n\n<ComponentDetails component=\"ic-switch\" />\n\n## Variants\n\n### State\n\nexport const snippetsState = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-switch label=\"Coffee preferences\" show-state=\"true\"></ic-switch>`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcSwitch label=\"Coffee preferences\" showState />`,\n long: [\n {\n language: \"Typescript\",\n snippet: `{shortCode}`,\n },\n {\n language: \"Javascript\",\n snippet: `{shortCode}`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={snippetsState}>\n <IcSwitch label=\"Coffee preferences\" showState />\n</ComponentPreview>\n\n### Small\n\nexport const snippetsSmall = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-switch\n label=\"Coffee preferences\"\n show-state=\"true\"\n size=\"small\"\n></ic-switch>`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcSwitch label=\"Coffee preferences\" showState size=\"small\"/>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `{shortCode}`,\n },\n {\n language: \"Javascript\",\n snippet: `{shortCode}`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={snippetsSmall}>\n <IcSwitch label=\"Coffee preferences\" showState size=\"small\" />\n</ComponentPreview>\n\n### Disabled\n\nexport const snippetsDisabled = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-switch\n label=\"Coffee preferences\"\n show-state=\"true\"\n disabled=\"true\"\n></ic-switch>\n<ic-switch\n label=\"Coffee preferences\"\n show-state=\"true\"\n disabled=\"true\"\n checked=\"true\"\n></ic-switch>`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcSwitch label=\"Coffee preferences\" showState disabled />\n <IcSwitch label=\"Coffee preferences\" showState disabled checked />`,\n long: [\n {\n language: \"Typescript\",\n snippet: `<>\n {shortCode}\n</>`,\n },\n {\n language: \"Javascript\",\n snippet: `<>\n {shortCode}\n</>`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={snippetsDisabled}>\n <div style={{ display: \"flex\", flexDirection: \"column\", gap: \"0.5rem\" }}>\n <IcSwitch label=\"Coffee preferences\" showState disabled />\n <IcSwitch label=\"Coffee preferences\" showState disabled checked />\n </div>\n</ComponentPreview>\n\n### Helper text and right adornment\n\nexport const snippetsHelperAndAdornment = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-switch label=\"Coffee preferences\" helper-text=\"Choose your coffee preferences\">\n <svg\n slot=\"right-adornment\"\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 d=\"M2,21H20V19H2M20,8H18V5H20M20,3H4V13A4,4 0 0,0 8,17H14A4,4 0 0,0 18,13V10H20A2,2 0 0,0 22,8V5C22,3.89 21.1,3 20,3Z\"/>\n </svg>\n</ic-switch>`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcSwitch label=\"Coffee preferences\" helperText=\"Choose your coffee preferences\">\n <SlottedSVG\n slot=\"right-adornment\"\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 d=\"M2,21H20V19H2M20,8H18V5H20M20,3H4V13A4,4 0 0,0 8,17H14A4,4 0 0,0 18,13V10H20A2,2 0 0,0 22,8V5C22,3.89 21.1,3 20,3Z\"/>\n </SlottedSVG>\n</IcSwitch>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `{shortCode}`,\n },\n {\n language: \"Javascript\",\n snippet: `{shortCode}`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={snippetsHelperAndAdornment}>\n <IcSwitch\n label=\"Coffee preferences\"\n helperText=\"Choose your coffee preferences\"\n >\n <svg\n slot=\"right-adornment\"\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 d=\"M2,21H20V19H2M20,8H18V5H20M20,3H4V13A4,4 0 0,0 8,17H14A4,4 0 0,0 18,13V10H20A2,2 0 0,0 22,8V5C22,3.89 21.1,3 20,3Z\" />\n </svg>\n </IcSwitch>\n</ComponentPreview>\n",
+ "contents": "\r\nimport { IcSwitch } from \"@ukic/react\";\r\n\r\n## Component demo\r\n\r\nexport const snippetsDefault = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-switch label=\"Coffee preferences\"></ic-switch>\r\n<script>\r\n const switchEl = document.querySelector('ic-switch');\r\n switchEl.addEventListener('icChange', (ev) => {\r\n console.log({\r\n checked: ev.detail.checked,\r\n value: ev.detail.value\r\n })\r\n })\r\n</script>`,\r\n long: `{shortCode}`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcSwitch\r\n label=\"Coffee preferences\"\r\n onIcChange={(ev) => console.log({ \r\n checked: ev.detail.checked, \r\n value: ev.detail.value\r\n })}\r\n/>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `{shortCode}`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `{shortCode}`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview snippets={snippetsDefault}>\r\n <IcSwitch\r\n label=\"Coffee preferences\"\r\n onIcChange={(ev) =>\r\n console.log({\r\n checked: ev.detail.checked,\r\n value: ev.detail.value,\r\n })\r\n }\r\n />\r\n</ComponentPreview>\r\n\r\n## Switch details\r\n\r\n<ComponentDetails component=\"ic-switch\" />\r\n\r\n## Variants\r\n\r\n### State\r\n\r\nexport const snippetsState = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-switch label=\"Coffee preferences\" show-state=\"true\"></ic-switch>`,\r\n long: `{shortCode}`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcSwitch label=\"Coffee preferences\" showState />`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `{shortCode}`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `{shortCode}`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview snippets={snippetsState}>\r\n <IcSwitch label=\"Coffee preferences\" showState />\r\n</ComponentPreview>\r\n\r\n### Small\r\n\r\nexport const snippetsSmall = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-switch\r\n label=\"Coffee preferences\"\r\n show-state=\"true\"\r\n size=\"small\"\r\n></ic-switch>`,\r\n long: `{shortCode}`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcSwitch label=\"Coffee preferences\" showState size=\"small\"/>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `{shortCode}`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `{shortCode}`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview snippets={snippetsSmall}>\r\n <IcSwitch label=\"Coffee preferences\" showState size=\"small\" />\r\n</ComponentPreview>\r\n\r\n### Disabled\r\n\r\nexport const snippetsDisabled = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-switch\r\n label=\"Coffee preferences\"\r\n show-state=\"true\"\r\n disabled=\"true\"\r\n></ic-switch>\r\n<ic-switch\r\n label=\"Coffee preferences\"\r\n show-state=\"true\"\r\n disabled=\"true\"\r\n checked=\"true\"\r\n></ic-switch>`,\r\n long: `{shortCode}`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcSwitch label=\"Coffee preferences\" showState disabled />\r\n <IcSwitch label=\"Coffee preferences\" showState disabled checked />`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `<>\r\n {shortCode}\r\n</>`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `<>\r\n {shortCode}\r\n</>`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview snippets={snippetsDisabled}>\r\n <div style={{ display: \"flex\", flexDirection: \"column\", gap: \"0.5rem\" }}>\r\n <IcSwitch label=\"Coffee preferences\" showState disabled />\r\n <IcSwitch label=\"Coffee preferences\" showState disabled checked />\r\n </div>\r\n</ComponentPreview>\r\n\r\n### Helper text and right adornment\r\n\r\nexport const snippetsHelperAndAdornment = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-switch label=\"Coffee preferences\" helper-text=\"Choose your coffee preferences\">\r\n <svg\r\n slot=\"right-adornment\"\r\n width=\"24\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n >\r\n <path d=\"M2,21H20V19H2M20,8H18V5H20M20,3H4V13A4,4 0 0,0 8,17H14A4,4 0 0,0 18,13V10H20A2,2 0 0,0 22,8V5C22,3.89 21.1,3 20,3Z\"/>\r\n </svg>\r\n</ic-switch>`,\r\n long: `{shortCode}`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcSwitch label=\"Coffee preferences\" helperText=\"Choose your coffee preferences\">\r\n <SlottedSVG\r\n slot=\"right-adornment\"\r\n width=\"24\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n >\r\n <path d=\"M2,21H20V19H2M20,8H18V5H20M20,3H4V13A4,4 0 0,0 8,17H14A4,4 0 0,0 18,13V10H20A2,2 0 0,0 22,8V5C22,3.89 21.1,3 20,3Z\"/>\r\n </SlottedSVG>\r\n</IcSwitch>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `{shortCode}`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `{shortCode}`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview snippets={snippetsHelperAndAdornment}>\r\n <IcSwitch\r\n label=\"Coffee preferences\"\r\n helperText=\"Choose your coffee preferences\"\r\n >\r\n <svg\r\n slot=\"right-adornment\"\r\n width=\"24\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n >\r\n <path d=\"M2,21H20V19H2M20,8H18V5H20M20,3H4V13A4,4 0 0,0 8,17H14A4,4 0 0,0 18,13V10H20A2,2 0 0,0 22,8V5C22,3.89 21.1,3 20,3Z\" />\r\n </svg>\r\n </IcSwitch>\r\n</ComponentPreview>\r\n",
"path": "/components/switch/code",
"date": "2024-05-31",
"title": "Switch",
@@ -3791,16 +3791,16 @@
}
],
"meta": {
- "relativePath": "components/switch/code.mdx",
- "createdAt": "2024-11-06T10:27:49.408Z",
- "lastModified": "2024-11-06T10:19:00.136Z",
- "size": 5870,
- "formattedSize": "5.7 KB"
+ "relativePath": "components\\switch\\code.mdx",
+ "createdAt": "2024-12-04T13:23:54.119Z",
+ "lastModified": "2024-12-04T13:23:54.119Z",
+ "size": 6139,
+ "formattedSize": "6.0 KB"
}
},
{
"id": "components\\switch\\guidancex",
- "contents": "\nimport { IcSwitch, IcTypography } from \"@ukic/react\";\nimport switchVid1 from \"./images/anim-1-avoid-change-a-switch-state-from-a-different-trigger.mp4\";\nimport switchVid2 from \"./images/anim-2-dont-change-switch-label-at-same-time-as-switch-state.mp4\";\nimport switchFig1 from \"./images/fig-1-make-sure-switch-changes-take-effect-immediately.png\";\nimport switchFig2 from \"./images/fig-2-dont-use-a-separate-trigger-to-make-switch-changes-take-effect.png\";\nimport switchFig3 from \"./images/fig-3-dont-use-a-switch-for-yes-no-answers.png\";\nimport switchFig4 from \"./images/fig-4-give-switches-clear-labels.png\";\nimport switchFig5 from \"./images/fig-5-dont-give-switches-ambiguous-labels.png\";\nimport switchFig6 from \"./images/fig-6-dont-mix-switches-with-icons-with-switches-without-icons.png\";\n\n## Introduction\n\nAn example of the switch component.\n\n<ComponentPreview>\n <IcSwitch label=\"Coffee preferences\" />\n</ComponentPreview>\n\n## When to use\n\nUse switches to turn a single option 'on' or 'off' and when you want the selection to take immediate effect.\n\nUse switches when there is an obvious default value: either 'on' or 'off'.\n\n## When not to use\n\nDon't use a switch when the selection of the option should take effect after a separate trigger such as a submit button. Instead, use a single [checkbox](/components/checkbox).\n\n<DoubleDoDontCaution>\n <DoDontCaution\n imageSrc={switchFig1}\n imageAlt=\"An example settings panel with text that says 'Your changes will take place immediately'. Three switches are displayed for 'notifications', 'don't disturb' and 'night mode'.\"\n state=\"good\"\n caption=\"Make sure the change in a switch's state causes immediate effect.\"\n />\n <DoDontCaution\n imageSrc={switchFig2}\n imageAlt=\"An example settings panel with text that says 'Remember to save your changes'. Three switches are displayed for 'notifications', 'don't disturb' and 'night mode'. A button that says 'Save changes' sits below the switches. \"\n state=\"bad\"\n caption=\"Don't use a separate trigger to make the change in state take effect.\"\n />\n</DoubleDoDontCaution>\n\nSwitches always have a default state: either 'on' or 'off'. Don't use a switch if there is no default setting. Instead, use checkboxes or two [radio buttons](/components/radio).\n\nDon't use a switch as an input in a form. Use them to instantaneously control a single option.\n\nDon't use a switch for 'yes' or 'no' answers. Use two [radio buttons](/components/radio) instead.\n\n<DoubleDoDontCaution>\n <DoDontCaution\n imageSrc={switchFig3}\n imageAlt=\"An example settings panel with a single switch with a heading that says 'Do you want to receive notifications?''. The switch is in the 'on' position and it has a label that says 'Yes'.\"\n state=\"bad\"\n caption=\"Don't use a switch for 'yes' or 'no' answers.\"\n />\n</DoubleDoDontCaution>\n\n## Interaction behaviour\n\nAvoid automatically altering a switch's state based on another trigger. A change in a switch's state should always be the user's decision.\n\n<video width=\"50%\" muted controls loop>\n <source src={switchVid1} type=\"video/mp4\" />\n</video>\n\n<IcTypography\n variant=\"label\"\n style={{ marginTop: \"-1rem\", marginBottom: \"1.5rem\" }}\n>\n Avoid changing a switch's state without the user’s specific instruction.\n</IcTypography>\n\n## Sizing\n\nUse a default sized switch in most scenarios where other default sized components are used.\n\nUse a small sized switch with other small sized components for compact layouts.\n\n## Content\n\nUse clear labels so that it's obvious what the switch will do when in the 'on' or 'off' position. Don't make them neutral or ambiguous. The switch should read 'Label: on' or 'Label: off'.\n\nFor example, a switch to turn notifications 'on' or 'off', with a label that says 'Notifications', is understandable when read as 'Notifications: on' and 'Notifications: off'. If the label said 'Turn notifications off', it's ambiguous and more difficult to understand what the 'on' and 'off' position will do.\n\n<DoubleDoDontCaution>\n <DoDontCaution\n imageSrc={switchFig4}\n imageAlt=\"An example settings panel with a single switch in the 'off' position. It's label says 'Notifications'.\"\n state=\"good\"\n caption=\"Give switches labels that make it clear what the switch will do in either the 'on' or 'off' position.\"\n />\n <DoDontCaution\n imageSrc={switchFig5}\n imageAlt=\"An example settings panel with a single switch in the 'off' position. It's label says 'Turn notifications off?'.\"\n state=\"bad\"\n caption=\"Don't give switches ambiguous labels that makes it hard to understand what the switch will do.\"\n />\n</DoubleDoDontCaution>\n\nAvoid using additional labels that say 'on' or 'off' in the switch label. The position of the switch describes this itself. Changing the label between state changes makes it difficult to understand the current state.\n\n<video width=\"50%\" muted controls loop>\n <source src={switchVid2} type=\"video/mp4\" />\n</video>\n\n<IcTypography\n variant=\"label\"\n style={{ marginTop: \"-1rem\", marginBottom: \"1.5rem\" }}\n>\n Don’t change the switch’s label at the same time as the state changes.\n</IcTypography>\n\nUse an icon with a switch label only if it aids the recognition of the option.\n\nDon't group switches with icons with other switches without icons.\n\n<DoubleDoDontCaution>\n <DoDontCaution\n imageSrc={switchFig6}\n imageAlt=\"An example settings panel with three switches. The first switch is on with a label that says 'Notifications'. The second switch is off with a label that says 'Don't disturb'. The third switch is off with a label that includes a moon icon and says 'Night mode'.\"\n state=\"bad\"\n caption=\"Don't mix switches with icons with switches without icons.\"\n />\n</DoubleDoDontCaution>\n",
+ "contents": "\r\nimport { IcSwitch, IcTypography } from \"@ukic/react\";\r\nimport switchVid1 from \"./images/anim-1-avoid-change-a-switch-state-from-a-different-trigger.mp4\";\r\nimport switchVid2 from \"./images/anim-2-dont-change-switch-label-at-same-time-as-switch-state.mp4\";\r\nimport switchFig1 from \"./images/fig-1-make-sure-switch-changes-take-effect-immediately.png\";\r\nimport switchFig2 from \"./images/fig-2-dont-use-a-separate-trigger-to-make-switch-changes-take-effect.png\";\r\nimport switchFig3 from \"./images/fig-3-dont-use-a-switch-for-yes-no-answers.png\";\r\nimport switchFig4 from \"./images/fig-4-give-switches-clear-labels.png\";\r\nimport switchFig5 from \"./images/fig-5-dont-give-switches-ambiguous-labels.png\";\r\nimport switchFig6 from \"./images/fig-6-dont-mix-switches-with-icons-with-switches-without-icons.png\";\r\n\r\n## Introduction\r\n\r\nAn example of the switch component.\r\n\r\n<ComponentPreview>\r\n <IcSwitch label=\"Coffee preferences\" />\r\n</ComponentPreview>\r\n\r\n## When to use\r\n\r\nUse switches to turn a single option 'on' or 'off' and when you want the selection to take immediate effect.\r\n\r\nUse switches when there is an obvious default value: either 'on' or 'off'.\r\n\r\n## When not to use\r\n\r\nDon't use a switch when the selection of the option should take effect after a separate trigger such as a submit button. Instead, use a single [checkbox](/components/checkbox).\r\n\r\n<DoubleDoDontCaution>\r\n <DoDontCaution\r\n imageSrc={switchFig1}\r\n imageAlt=\"An example settings panel with text that says 'Your changes will take place immediately'. Three switches are displayed for 'notifications', 'don't disturb' and 'night mode'.\"\r\n state=\"good\"\r\n caption=\"Make sure the change in a switch's state causes immediate effect.\"\r\n />\r\n <DoDontCaution\r\n imageSrc={switchFig2}\r\n imageAlt=\"An example settings panel with text that says 'Remember to save your changes'. Three switches are displayed for 'notifications', 'don't disturb' and 'night mode'. A button that says 'Save changes' sits below the switches. \"\r\n state=\"bad\"\r\n caption=\"Don't use a separate trigger to make the change in state take effect.\"\r\n />\r\n</DoubleDoDontCaution>\r\n\r\nSwitches always have a default state: either 'on' or 'off'. Don't use a switch if there is no default setting. Instead, use checkboxes or two [radio buttons](/components/radio).\r\n\r\nDon't use a switch as an input in a form. Use them to instantaneously control a single option.\r\n\r\nDon't use a switch for 'yes' or 'no' answers. Use two [radio buttons](/components/radio) instead.\r\n\r\n<DoubleDoDontCaution>\r\n <DoDontCaution\r\n imageSrc={switchFig3}\r\n imageAlt=\"An example settings panel with a single switch with a heading that says 'Do you want to receive notifications?''. The switch is in the 'on' position and it has a label that says 'Yes'.\"\r\n state=\"bad\"\r\n caption=\"Don't use a switch for 'yes' or 'no' answers.\"\r\n />\r\n</DoubleDoDontCaution>\r\n\r\n## Interaction behaviour\r\n\r\nAvoid automatically altering a switch's state based on another trigger. A change in a switch's state should always be the user's decision.\r\n\r\n<video width=\"50%\" muted controls loop>\r\n <source src={switchVid1} type=\"video/mp4\" />\r\n</video>\r\n\r\n<IcTypography\r\n variant=\"label\"\r\n style={{ marginTop: \"-1rem\", marginBottom: \"1.5rem\" }}\r\n>\r\n Avoid changing a switch's state without the user’s specific instruction.\r\n</IcTypography>\r\n\r\n## Sizing\r\n\r\nUse a default sized switch in most scenarios where other default sized components are used.\r\n\r\nUse a small sized switch with other small sized components for compact layouts.\r\n\r\n## Content\r\n\r\nUse clear labels so that it's obvious what the switch will do when in the 'on' or 'off' position. Don't make them neutral or ambiguous. The switch should read 'Label: on' or 'Label: off'.\r\n\r\nFor example, a switch to turn notifications 'on' or 'off', with a label that says 'Notifications', is understandable when read as 'Notifications: on' and 'Notifications: off'. If the label said 'Turn notifications off', it's ambiguous and more difficult to understand what the 'on' and 'off' position will do.\r\n\r\n<DoubleDoDontCaution>\r\n <DoDontCaution\r\n imageSrc={switchFig4}\r\n imageAlt=\"An example settings panel with a single switch in the 'off' position. It's label says 'Notifications'.\"\r\n state=\"good\"\r\n caption=\"Give switches labels that make it clear what the switch will do in either the 'on' or 'off' position.\"\r\n />\r\n <DoDontCaution\r\n imageSrc={switchFig5}\r\n imageAlt=\"An example settings panel with a single switch in the 'off' position. It's label says 'Turn notifications off?'.\"\r\n state=\"bad\"\r\n caption=\"Don't give switches ambiguous labels that makes it hard to understand what the switch will do.\"\r\n />\r\n</DoubleDoDontCaution>\r\n\r\nAvoid using additional labels that say 'on' or 'off' in the switch label. The position of the switch describes this itself. Changing the label between state changes makes it difficult to understand the current state.\r\n\r\n<video width=\"50%\" muted controls loop>\r\n <source src={switchVid2} type=\"video/mp4\" />\r\n</video>\r\n\r\n<IcTypography\r\n variant=\"label\"\r\n style={{ marginTop: \"-1rem\", marginBottom: \"1.5rem\" }}\r\n>\r\n Don’t change the switch’s label at the same time as the state changes.\r\n</IcTypography>\r\n\r\nUse an icon with a switch label only if it aids the recognition of the option.\r\n\r\nDon't group switches with icons with other switches without icons.\r\n\r\n<DoubleDoDontCaution>\r\n <DoDontCaution\r\n imageSrc={switchFig6}\r\n imageAlt=\"An example settings panel with three switches. The first switch is on with a label that says 'Notifications'. The second switch is off with a label that says 'Don't disturb'. The third switch is off with a label that includes a moon icon and says 'Night mode'.\"\r\n state=\"bad\"\r\n caption=\"Don't mix switches with icons with switches without icons.\"\r\n />\r\n</DoubleDoDontCaution>\r\n",
"path": "/components/switch",
"navPriority": 34,
"date": "2023-02-03",
@@ -3824,11 +3824,11 @@
],
"tags": ["Toggle", "Lightswitch"],
"meta": {
- "relativePath": "components/switch/guidance.mdx",
- "createdAt": "2024-11-06T10:27:49.404Z",
- "lastModified": "2024-11-06T10:19:00.136Z",
- "size": 6251,
- "formattedSize": "6.1 KB"
+ "relativePath": "components\\switch\\guidance.mdx",
+ "createdAt": "2024-12-04T13:23:54.120Z",
+ "lastModified": "2024-12-04T13:23:54.120Z",
+ "size": 6401,
+ "formattedSize": "6.3 KB"
}
},
{
@@ -3855,16 +3855,16 @@
}
],
"meta": {
- "relativePath": "components/tabs/accessibility.mdx",
- "createdAt": "2024-11-06T10:27:49.408Z",
- "lastModified": "2024-11-06T10:19:00.144Z",
+ "relativePath": "components\\tabs\\accessibility.mdx",
+ "createdAt": "2024-11-05T11:57:53.771Z",
+ "lastModified": "2024-11-05T11:57:53.771Z",
"size": 3352,
"formattedSize": "3.3 KB"
}
},
{
"id": "components\\tabs\\codex",
- "contents": "\nimport { IcTab, IcTabContext, IcTabGroup, IcTabPanel } from \"@ukic/react\";\n\n## Component demo\n\nexport const snippets = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-tab-context>\n <ic-tab-group label=\"Example tab group\">\n <ic-tab>Ingredients</ic-tab>\n <ic-tab>Method</ic-tab>\n <ic-tab>History</ic-tab>\n </ic-tab-group>\n <ic-tab-panel>Tab One - Ingredients</ic-tab-panel>\n <ic-tab-panel>Tab Two - Method</ic-tab-panel>\n <ic-tab-panel>Tab Three - History</ic-tab-panel>\n</ic-tab-context>\n<script>\n const tabContext = document.querySelector('ic-tab-context');\n tabContext.addEventListener('icTabSelect', (ev) => \n console.log({\n tabIndex: ev.detail.tabIndex,\n tabLabel: ev.detail.tabLabel,\n })\n )\n</script>`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcTabContext\n onIcTabSelect={(ev) =>\n console.log({\n tabIndex: ev.detail.tabIndex,\n tabLabel: ev.detail.tabLabel,\n })\n }\n>\n <IcTabGroup label=\"Example tab group\">\n <IcTab>Ingredients</IcTab>\n <IcTab>Method</IcTab>\n <IcTab>History</IcTab>\n </IcTabGroup>\n <IcTabPanel>Tab One - Ingredients</IcTabPanel>\n <IcTabPanel>Tab Two - Method</IcTabPanel>\n <IcTabPanel>Tab Three - History</IcTabPanel>\n</IcTabContext>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `{shortCode}`,\n },\n {\n language: \"Javascript\",\n snippet: `{shortCode}`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={snippets}>\n <IcTabContext\n onIcTabSelect={(ev) =>\n console.log({\n tabIndex: ev.detail.tabIndex,\n tabLabel: ev.detail.tabLabel,\n })\n }\n >\n <IcTabGroup label=\"Example tab group\">\n <IcTab>Ingredients</IcTab>\n <IcTab>Method</IcTab>\n <IcTab>History</IcTab>\n </IcTabGroup>\n <IcTabPanel>Tab One - Ingredients</IcTabPanel>\n <IcTabPanel>Tab Two - Method</IcTabPanel>\n <IcTabPanel>Tab Three - History</IcTabPanel>\n </IcTabContext>\n</ComponentPreview>\n\n## Tab details\n\n<ComponentDetails component=\"ic-tab\" />\n\n## Tab context details\n\n<ComponentDetails component=\"ic-tab-context\" />\n\n## Tab list details\n\n<ComponentDetails component=\"ic-tab-group\" />\n\n## Tab panel details\n\n<ComponentDetails component=\"ic-tab-panel\" />\n\n## Variants\n\n### With icons\n\nexport const withIcons = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-tab-context>\n <ic-tab-group label=\"Example tab group\">\n <ic-tab>\n Ingredients\n <svg \n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n fill=\"#000000\"\n >\n <path d=\"M9,21V22H7V21A2,2 0 0,1 5,19V4A2,2 0 0,1 7,2H17A2,2 0 0,1 19,4V19A2,2 0 0,1 17,21V22H15V21H9M7,4V9H17V4H7M7,19H17V11H7V19M8,12H10V15H8V12M8,6H10V8H8V6Z\" />\n </svg>\n </ic-tab>\n <ic-tab>\n Method\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n fill=\"#000000\"\n >\n <path d=\"M3,5H9V11H3V5M5,7V9H7V7H5M11,7H21V9H11V7M11,15H21V17H11V15M5,20L1.5,16.5L2.91,15.09L5,17.17L9.59,12.59L11,14L5,20Z\" />\n </svg>\n </ic-tab>\n <ic-tab>\n History\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n fill=\"#000000\"\n >\n <path d=\"M13.5,8H12V13L16.28,15.54L17,14.33L13.5,12.25V8M13,3A9,9 0 0,0 4,12H1L4.96,16.03L9,12H6A7,7 0 0,1 13,5A7,7 0 0,1 20,12A7,7 0 0,1 13,19C11.07,19 9.32,18.21 8.06,16.94L6.64,18.36C8.27,20 10.5,21 13,21A9,9 0 0,0 22,12A9,9 0 0,0 13,3\" />\n </svg>\n </ic-tab>\n </ic-tab-group>\n <ic-tab-panel>Tab One - Ingredients</ic-tab-panel>\n <ic-tab-panel>Tab Two - Method</ic-tab-panel>\n <ic-tab-panel>Tab Three - History</ic-tab-panel>\n</ic-tab-context>`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcTabContext>\n <IcTabGroup label=\"Example tab group\">\n <IcTab>\n Ingredients\n <SlottedSVG\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n fill=\"#000000\"\n >\n <path d=\"M9,21V22H7V21A2,2 0 0,1 5,19V4A2,2 0 0,1 7,2H17A2,2 0 0,1 19,4V19A2,2 0 0,1 17,21V22H15V21H9M7,4V9H17V4H7M7,19H17V11H7V19M8,12H10V15H8V12M8,6H10V8H8V6Z\" />\n </SlottedSVG>\n </IcTab>\n <IcTab>\n Method\n <SlottedSVG\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n fill=\"#000000\"\n >\n <path d=\"M3,5H9V11H3V5M5,7V9H7V7H5M11,7H21V9H11V7M11,15H21V17H11V15M5,20L1.5,16.5L2.91,15.09L5,17.17L9.59,12.59L11,14L5,20Z\" />\n </SlottedSVG>\n </IcTab>\n <IcTab>\n History\n <SlottedSVG\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n fill=\"#000000\"\n >\n <path d=\"M13.5,8H12V13L16.28,15.54L17,14.33L13.5,12.25V8M13,3A9,9 0 0,0 4,12H1L4.96,16.03L9,12H6A7,7 0 0,1 13,5A7,7 0 0,1 20,12A7,7 0 0,1 13,19C11.07,19 9.32,18.21 8.06,16.94L6.64,18.36C8.27,20 10.5,21 13,21A9,9 0 0,0 22,12A9,9 0 0,0 13,3\" />\n </SlottedSVG>\n </IcTab>\n </IcTabGroup>\n <IcTabPanel>Tab One - Ingredients</IcTabPanel>\n <IcTabPanel>Tab Two - Method</IcTabPanel>\n <IcTabPanel>Tab Three - History</IcTabPanel>\n</IcTabContext>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `{shortCode}`,\n },\n {\n language: \"Javascript\",\n snippet: `{shortCode}`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={withIcons}>\n <IcTabContext>\n <IcTabGroup label=\"Example tab group\">\n <IcTab>\n Ingredients\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n fill=\"#000000\"\n >\n <path d=\"M9,21V22H7V21A2,2 0 0,1 5,19V4A2,2 0 0,1 7,2H17A2,2 0 0,1 19,4V19A2,2 0 0,1 17,21V22H15V21H9M7,4V9H17V4H7M7,19H17V11H7V19M8,12H10V15H8V12M8,6H10V8H8V6Z\" />\n </svg>\n </IcTab>\n <IcTab>\n Method\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n fill=\"#000000\"\n >\n <path d=\"M3,5H9V11H3V5M5,7V9H7V7H5M11,7H21V9H11V7M11,15H21V17H11V15M5,20L1.5,16.5L2.91,15.09L5,17.17L9.59,12.59L11,14L5,20Z\" />\n </svg>\n </IcTab>\n <IcTab>\n History\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n fill=\"#000000\"\n >\n <path d=\"M13.5,8H12V13L16.28,15.54L17,14.33L13.5,12.25V8M13,3A9,9 0 0,0 4,12H1L4.96,16.03L9,12H6A7,7 0 0,1 13,5A7,7 0 0,1 20,12A7,7 0 0,1 13,19C11.07,19 9.32,18.21 8.06,16.94L6.64,18.36C8.27,20 10.5,21 13,21A9,9 0 0,0 22,12A9,9 0 0,0 13,3\" />\n </svg>\n </IcTab>\n </IcTabGroup>\n <IcTabPanel>Tab One - Ingredients</IcTabPanel>\n <IcTabPanel>Tab Two - Method</IcTabPanel>\n <IcTabPanel>Tab Three - History</IcTabPanel>\n </IcTabContext>\n</ComponentPreview>\n\n### Disabled\n\nexport const disabled = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-tab-context>\n <ic-tab-group label=\"Example tab group\">\n <ic-tab>Ingredients</ic-tab>\n <ic-tab disabled=\"true\">Method</ic-tab>\n <ic-tab>History</ic-tab>\n </ic-tab-group>\n <ic-tab-panel>Tab One - Ingredients</ic-tab-panel>\n <ic-tab-panel>Tab Two - Method</ic-tab-panel>\n <ic-tab-panel>Tab Three - History</ic-tab-panel>\n</ic-tab-context>`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcTabContext>\n <IcTabGroup label=\"Example tab group\">\n <IcTab>Ingredients</IcTab>\n <IcTab disabled>Method</IcTab>\n <IcTab>History</IcTab>\n </IcTabGroup>\n <IcTabPanel>Tab One - Ingredients</IcTabPanel>\n <IcTabPanel>Tab Two - Method</IcTabPanel>\n <IcTabPanel>Tab Three - History</IcTabPanel>\n</IcTabContext>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `{shortCode}`,\n },\n {\n language: \"Javascript\",\n snippet: `{shortCode}`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={disabled}>\n <IcTabContext>\n <IcTabGroup label=\"Example tab group\">\n <IcTab>Ingredients</IcTab>\n <IcTab disabled>Method</IcTab>\n <IcTab>History</IcTab>\n </IcTabGroup>\n <IcTabPanel>Tab One - Ingredients</IcTabPanel>\n <IcTabPanel>Tab Two - Method</IcTabPanel>\n <IcTabPanel>Tab Three - History</IcTabPanel>\n </IcTabContext>\n</ComponentPreview>\n\n### Light\n\nexport const light = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-tab-context appearance=\"light\">\n <ic-tab-group label=\"Example tab group\">\n <ic-tab>Ingredients</ic-tab>\n <ic-tab>Method</ic-tab>\n <ic-tab>History</ic-tab>\n </ic-tab-group>\n <ic-tab-panel>Tab One - Ingredients</ic-tab-panel>\n <ic-tab-panel>Tab Two - Method</ic-tab-panel>\n <ic-tab-panel>Tab Three - History</ic-tab-panel>\n</ic-tab-context>`,\n long: `.dark-background {\n background-color: #2c2f34;\n }\n </style>\n <body>\n <div class=\"dark-background\">\n {shortCode}\n </div>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcTabContext appearance=\"light\">\n <IcTabGroup label=\"Example tab group\">\n <IcTab>Ingredients</IcTab>\n <IcTab>Method</IcTab>\n <IcTab>History</IcTab>\n </IcTabGroup>\n <IcTabPanel>Tab One - Ingredients</IcTabPanel>\n <IcTabPanel>Tab Two - Method</IcTabPanel>\n <IcTabPanel>Tab Three - History</IcTabPanel>\n</IcTabContext>`,\n long: [\n {\n language: \"Typescript\",\n snippet: ` const useStyles = createUseStyles({\n darkBackground: {\n backgroundColor: \"#2c2f34\",\n },\n });\n const classes = useStyles();\n return (\n <div className={classes.darkBackground}>\n {shortCode}\n </div>\n )`,\n },\n {\n language: \"Javascript\",\n snippet: ` const useStyles = createUseStyles({\n darkBackground: {\n backgroundColor: \"#2c2f34\",\n },\n });\n const classes = useStyles();\n return (\n <div className={classes.darkBackground}>\n {shortCode}\n </div>\n )`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={light} style={{ backgroundColor: \"#2c2f34\" }}>\n <IcTabContext appearance=\"light\">\n <IcTabGroup label=\"Example tab group\">\n <IcTab>Ingredients</IcTab>\n <IcTab>Method</IcTab>\n <IcTab>History</IcTab>\n </IcTabGroup>\n <IcTabPanel>Tab One - Ingredients</IcTabPanel>\n <IcTabPanel>Tab Two - Method</IcTabPanel>\n <IcTabPanel>Tab Three - History</IcTabPanel>\n </IcTabContext>\n</ComponentPreview>\n\n### Compact\n\nexport const compact = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-tab-context class=\"tabs\">\n <ic-tab-group label=\"Example tab group\">\n <ic-tab>Ingredients</ic-tab>\n <ic-tab>Method</ic-tab>\n <ic-tab>History</ic-tab>\n <ic-tab>Drinks</ic-tab>\n <ic-tab>Recipes</ic-tab>\n </ic-tab-group>\n <ic-tab-panel>Tab One - Ingredients</ic-tab-panel>\n <ic-tab-panel>Tab Two - Method</ic-tab-panel>\n <ic-tab-panel>Tab Three - History</ic-tab-panel>\n <ic-tab-panel>Tab Four - Drinks</ic-tab-panel>\n <ic-tab-panel>Tab Five - Recipes</ic-tab-panel>\n</ic-tab-context>`,\n long: `.tabs ic-tab-group,\n .tabs ic-tab-panel {\n width: 60%;\n margin-left: auto;\n margin-right: auto;\n }\n </style>\n <body>\n {shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcTabContext>\n <IcTabGroup label=\"Example tab group\">\n <IcTab>Ingredients</IcTab>\n <IcTab>Method</IcTab>\n <IcTab>History</IcTab>\n <IcTab>Drinks</IcTab>\n <IcTab>Recipes</IcTab>\n </IcTabGroup>\n <IcTabPanel>Tab One - Ingredients</IcTabPanel>\n <IcTabPanel>Tab Two - Method</IcTabPanel>\n <IcTabPanel>Tab Three - History</IcTabPanel>\n <IcTabPanel>Tab Four - Drinks</IcTabPanel>\n <IcTabPanel>Tab Five - Recipes</IcTabPanel>\n</IcTabContext>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n width: \"60%\",\n marginLeft: \"auto\",\n marginRight: \"auto\",\n },\n});\nconst classes = useStyles();\nreturn (\n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n width: \"60%\",\n marginLeft: \"auto\",\n marginRight: \"auto\",\n },\n});\nconst classes = useStyles();\nreturn (\n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={compact}>\n <IcTabContext class=\"tabs\">\n <IcTabGroup label=\"Example tab group\">\n <IcTab>Ingredients</IcTab>\n <IcTab>Method</IcTab>\n <IcTab>History</IcTab>\n <IcTab>Drinks</IcTab>\n <IcTab>Recipes</IcTab>\n </IcTabGroup>\n <IcTabPanel>Tab One - Ingredients</IcTabPanel>\n <IcTabPanel>Tab Two - Method</IcTabPanel>\n <IcTabPanel>Tab Three - History</IcTabPanel>\n <IcTabPanel>Tab Four - Drinks</IcTabPanel>\n <IcTabPanel>Tab Five - Recipes</IcTabPanel>\n </IcTabContext>\n</ComponentPreview>\n\n### Nested Tabs\n\nexport const nested = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-tab-context>\n <ic-tab-group label=\"Example tab group\">\n <ic-tab>Ingredients</ic-tab>\n <ic-tab>Method</ic-tab>\n <ic-tab>History</ic-tab>\n </ic-tab-group>\n <ic-tab-panel>\n <ic-tab-context context-id=\"context-nested\">\n <ic-tab-group label=\"Example tab group\">\n <ic-tab>Espresso</ic-tab>\n <ic-tab>Water</ic-tab>\n <ic-tab>Milk</ic-tab>\n </ic-tab-group>\n <ic-tab-panel>Nested Tab Panel One - Espresso</ic-tab-panel>\n <ic-tab-panel>Nested Tab Panel Two - Water</ic-tab-panel>\n <ic-tab-panel>Nested Tab Panel Three - Milk</ic-tab-panel>\n </ic-tab-context>\n </ic-tab-panel>\n <ic-tab-panel>Outer Tab Panel Two - Method</ic-tab-panel>\n <ic-tab-panel>Outer Tab Panel Three - History</ic-tab-panel>\n</ic-tab-context>`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcTabContext>\n <IcTabGroup label=\"Example tab group\">\n <IcTab>Ingredients</IcTab>\n <IcTab>Method</IcTab>\n <IcTab>History</IcTab>\n </IcTabGroup>\n <IcTabPanel>\n <IcTabContext contextId=\"context-nested\">\n <IcTabGroup label=\"Example tab group\">\n <IcTab>Espresso</IcTab>\n <IcTab>Water</IcTab>\n <IcTab>Milk</IcTab>\n </IcTabGroup>\n <IcTabPanel>Nested Tab Panel One - Espresso</IcTabPanel>\n <IcTabPanel>Nested Tab Panel Two - Water</IcTabPanel>\n <IcTabPanel>Nested Tab Panel Three - Milk</IcTabPanel>\n </IcTabContext>\n </IcTabPanel>\n <IcTabPanel>Outer Tab Panel Two - Method</IcTabPanel>\n <IcTabPanel>Outer Tab Panel Three - History</IcTabPanel>\n</IcTabContext>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `{shortCode}`,\n },\n {\n language: \"Javascript\",\n snippet: `{shortCode}`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={nested}>\n <IcTabContext>\n <IcTabGroup label=\"Example tab group\">\n <IcTab>Ingredients</IcTab>\n <IcTab>Method</IcTab>\n <IcTab>History</IcTab>\n </IcTabGroup>\n <IcTabPanel>\n <IcTabContext contextId=\"context-nested\">\n <IcTabGroup label=\"Example tab group\">\n <IcTab>Espresso</IcTab>\n <IcTab>Water</IcTab>\n <IcTab>Milk</IcTab>\n </IcTabGroup>\n <IcTabPanel>Nested Tab Panel One - Espresso</IcTabPanel>\n <IcTabPanel>Nested Tab Panel Two - Water</IcTabPanel>\n <IcTabPanel>Nested Tab Panel Three - Milk</IcTabPanel>\n </IcTabContext>\n </IcTabPanel>\n <IcTabPanel>Outer Tab Panel Two - Method</IcTabPanel>\n <IcTabPanel>Outer Tab Panel Three - History</IcTabPanel>\n </IcTabContext>\n</ComponentPreview>\n",
+ "contents": "\r\nimport { IcTab, IcTabContext, IcTabGroup, IcTabPanel } from \"@ukic/react\";\r\n\r\n## Component demo\r\n\r\nexport const snippets = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-tab-context>\r\n <ic-tab-group label=\"Example tab group\">\r\n <ic-tab>Ingredients</ic-tab>\r\n <ic-tab>Method</ic-tab>\r\n <ic-tab>History</ic-tab>\r\n </ic-tab-group>\r\n <ic-tab-panel>Tab One - Ingredients</ic-tab-panel>\r\n <ic-tab-panel>Tab Two - Method</ic-tab-panel>\r\n <ic-tab-panel>Tab Three - History</ic-tab-panel>\r\n</ic-tab-context>\r\n<script>\r\n const tabContext = document.querySelector('ic-tab-context');\r\n tabContext.addEventListener('icTabSelect', (ev) => \r\n console.log({\r\n tabIndex: ev.detail.tabIndex,\r\n tabLabel: ev.detail.tabLabel,\r\n })\r\n )\r\n</script>`,\r\n long: `{shortCode}`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcTabContext\r\n onIcTabSelect={(ev) =>\r\n console.log({\r\n tabIndex: ev.detail.tabIndex,\r\n tabLabel: ev.detail.tabLabel,\r\n })\r\n }\r\n>\r\n <IcTabGroup label=\"Example tab group\">\r\n <IcTab>Ingredients</IcTab>\r\n <IcTab>Method</IcTab>\r\n <IcTab>History</IcTab>\r\n </IcTabGroup>\r\n <IcTabPanel>Tab One - Ingredients</IcTabPanel>\r\n <IcTabPanel>Tab Two - Method</IcTabPanel>\r\n <IcTabPanel>Tab Three - History</IcTabPanel>\r\n</IcTabContext>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `{shortCode}`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `{shortCode}`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview snippets={snippets}>\r\n <IcTabContext\r\n onIcTabSelect={(ev) =>\r\n console.log({\r\n tabIndex: ev.detail.tabIndex,\r\n tabLabel: ev.detail.tabLabel,\r\n })\r\n }\r\n >\r\n <IcTabGroup label=\"Example tab group\">\r\n <IcTab>Ingredients</IcTab>\r\n <IcTab>Method</IcTab>\r\n <IcTab>History</IcTab>\r\n </IcTabGroup>\r\n <IcTabPanel>Tab One - Ingredients</IcTabPanel>\r\n <IcTabPanel>Tab Two - Method</IcTabPanel>\r\n <IcTabPanel>Tab Three - History</IcTabPanel>\r\n </IcTabContext>\r\n</ComponentPreview>\r\n\r\n## Tab details\r\n\r\n<ComponentDetails component=\"ic-tab\" />\r\n\r\n## Tab context details\r\n\r\n<ComponentDetails component=\"ic-tab-context\" />\r\n\r\n## Tab list details\r\n\r\n<ComponentDetails component=\"ic-tab-group\" />\r\n\r\n## Tab panel details\r\n\r\n<ComponentDetails component=\"ic-tab-panel\" />\r\n\r\n## Variants\r\n\r\n### With icons\r\n\r\nexport const withIcons = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-tab-context>\r\n <ic-tab-group label=\"Example tab group\">\r\n <ic-tab>\r\n Ingredients\r\n <svg \r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n width=\"24\"\r\n fill=\"#000000\"\r\n >\r\n <path d=\"M9,21V22H7V21A2,2 0 0,1 5,19V4A2,2 0 0,1 7,2H17A2,2 0 0,1 19,4V19A2,2 0 0,1 17,21V22H15V21H9M7,4V9H17V4H7M7,19H17V11H7V19M8,12H10V15H8V12M8,6H10V8H8V6Z\" />\r\n </svg>\r\n </ic-tab>\r\n <ic-tab>\r\n Method\r\n <svg\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n width=\"24\"\r\n fill=\"#000000\"\r\n >\r\n <path d=\"M3,5H9V11H3V5M5,7V9H7V7H5M11,7H21V9H11V7M11,15H21V17H11V15M5,20L1.5,16.5L2.91,15.09L5,17.17L9.59,12.59L11,14L5,20Z\" />\r\n </svg>\r\n </ic-tab>\r\n <ic-tab>\r\n History\r\n <svg\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n width=\"24\"\r\n fill=\"#000000\"\r\n >\r\n <path d=\"M13.5,8H12V13L16.28,15.54L17,14.33L13.5,12.25V8M13,3A9,9 0 0,0 4,12H1L4.96,16.03L9,12H6A7,7 0 0,1 13,5A7,7 0 0,1 20,12A7,7 0 0,1 13,19C11.07,19 9.32,18.21 8.06,16.94L6.64,18.36C8.27,20 10.5,21 13,21A9,9 0 0,0 22,12A9,9 0 0,0 13,3\" />\r\n </svg>\r\n </ic-tab>\r\n </ic-tab-group>\r\n <ic-tab-panel>Tab One - Ingredients</ic-tab-panel>\r\n <ic-tab-panel>Tab Two - Method</ic-tab-panel>\r\n <ic-tab-panel>Tab Three - History</ic-tab-panel>\r\n</ic-tab-context>`,\r\n long: `{shortCode}`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcTabContext>\r\n <IcTabGroup label=\"Example tab group\">\r\n <IcTab>\r\n Ingredients\r\n <SlottedSVG\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n width=\"24\"\r\n fill=\"#000000\"\r\n >\r\n <path d=\"M9,21V22H7V21A2,2 0 0,1 5,19V4A2,2 0 0,1 7,2H17A2,2 0 0,1 19,4V19A2,2 0 0,1 17,21V22H15V21H9M7,4V9H17V4H7M7,19H17V11H7V19M8,12H10V15H8V12M8,6H10V8H8V6Z\" />\r\n </SlottedSVG>\r\n </IcTab>\r\n <IcTab>\r\n Method\r\n <SlottedSVG\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n width=\"24\"\r\n fill=\"#000000\"\r\n >\r\n <path d=\"M3,5H9V11H3V5M5,7V9H7V7H5M11,7H21V9H11V7M11,15H21V17H11V15M5,20L1.5,16.5L2.91,15.09L5,17.17L9.59,12.59L11,14L5,20Z\" />\r\n </SlottedSVG>\r\n </IcTab>\r\n <IcTab>\r\n History\r\n <SlottedSVG\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n width=\"24\"\r\n fill=\"#000000\"\r\n >\r\n <path d=\"M13.5,8H12V13L16.28,15.54L17,14.33L13.5,12.25V8M13,3A9,9 0 0,0 4,12H1L4.96,16.03L9,12H6A7,7 0 0,1 13,5A7,7 0 0,1 20,12A7,7 0 0,1 13,19C11.07,19 9.32,18.21 8.06,16.94L6.64,18.36C8.27,20 10.5,21 13,21A9,9 0 0,0 22,12A9,9 0 0,0 13,3\" />\r\n </SlottedSVG>\r\n </IcTab>\r\n </IcTabGroup>\r\n <IcTabPanel>Tab One - Ingredients</IcTabPanel>\r\n <IcTabPanel>Tab Two - Method</IcTabPanel>\r\n <IcTabPanel>Tab Three - History</IcTabPanel>\r\n</IcTabContext>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `{shortCode}`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `{shortCode}`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview snippets={withIcons}>\r\n <IcTabContext>\r\n <IcTabGroup label=\"Example tab group\">\r\n <IcTab>\r\n Ingredients\r\n <svg\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n width=\"24\"\r\n fill=\"#000000\"\r\n >\r\n <path d=\"M9,21V22H7V21A2,2 0 0,1 5,19V4A2,2 0 0,1 7,2H17A2,2 0 0,1 19,4V19A2,2 0 0,1 17,21V22H15V21H9M7,4V9H17V4H7M7,19H17V11H7V19M8,12H10V15H8V12M8,6H10V8H8V6Z\" />\r\n </svg>\r\n </IcTab>\r\n <IcTab>\r\n Method\r\n <svg\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n width=\"24\"\r\n fill=\"#000000\"\r\n >\r\n <path d=\"M3,5H9V11H3V5M5,7V9H7V7H5M11,7H21V9H11V7M11,15H21V17H11V15M5,20L1.5,16.5L2.91,15.09L5,17.17L9.59,12.59L11,14L5,20Z\" />\r\n </svg>\r\n </IcTab>\r\n <IcTab>\r\n History\r\n <svg\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n width=\"24\"\r\n fill=\"#000000\"\r\n >\r\n <path d=\"M13.5,8H12V13L16.28,15.54L17,14.33L13.5,12.25V8M13,3A9,9 0 0,0 4,12H1L4.96,16.03L9,12H6A7,7 0 0,1 13,5A7,7 0 0,1 20,12A7,7 0 0,1 13,19C11.07,19 9.32,18.21 8.06,16.94L6.64,18.36C8.27,20 10.5,21 13,21A9,9 0 0,0 22,12A9,9 0 0,0 13,3\" />\r\n </svg>\r\n </IcTab>\r\n </IcTabGroup>\r\n <IcTabPanel>Tab One - Ingredients</IcTabPanel>\r\n <IcTabPanel>Tab Two - Method</IcTabPanel>\r\n <IcTabPanel>Tab Three - History</IcTabPanel>\r\n </IcTabContext>\r\n</ComponentPreview>\r\n\r\n### Disabled\r\n\r\nexport const disabled = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-tab-context>\r\n <ic-tab-group label=\"Example tab group\">\r\n <ic-tab>Ingredients</ic-tab>\r\n <ic-tab disabled=\"true\">Method</ic-tab>\r\n <ic-tab>History</ic-tab>\r\n </ic-tab-group>\r\n <ic-tab-panel>Tab One - Ingredients</ic-tab-panel>\r\n <ic-tab-panel>Tab Two - Method</ic-tab-panel>\r\n <ic-tab-panel>Tab Three - History</ic-tab-panel>\r\n</ic-tab-context>`,\r\n long: `{shortCode}`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcTabContext>\r\n <IcTabGroup label=\"Example tab group\">\r\n <IcTab>Ingredients</IcTab>\r\n <IcTab disabled>Method</IcTab>\r\n <IcTab>History</IcTab>\r\n </IcTabGroup>\r\n <IcTabPanel>Tab One - Ingredients</IcTabPanel>\r\n <IcTabPanel>Tab Two - Method</IcTabPanel>\r\n <IcTabPanel>Tab Three - History</IcTabPanel>\r\n</IcTabContext>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `{shortCode}`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `{shortCode}`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview snippets={disabled}>\r\n <IcTabContext>\r\n <IcTabGroup label=\"Example tab group\">\r\n <IcTab>Ingredients</IcTab>\r\n <IcTab disabled>Method</IcTab>\r\n <IcTab>History</IcTab>\r\n </IcTabGroup>\r\n <IcTabPanel>Tab One - Ingredients</IcTabPanel>\r\n <IcTabPanel>Tab Two - Method</IcTabPanel>\r\n <IcTabPanel>Tab Three - History</IcTabPanel>\r\n </IcTabContext>\r\n</ComponentPreview>\r\n\r\n### Light\r\n\r\nexport const light = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-tab-context appearance=\"light\">\r\n <ic-tab-group label=\"Example tab group\">\r\n <ic-tab>Ingredients</ic-tab>\r\n <ic-tab>Method</ic-tab>\r\n <ic-tab>History</ic-tab>\r\n </ic-tab-group>\r\n <ic-tab-panel>Tab One - Ingredients</ic-tab-panel>\r\n <ic-tab-panel>Tab Two - Method</ic-tab-panel>\r\n <ic-tab-panel>Tab Three - History</ic-tab-panel>\r\n</ic-tab-context>`,\r\n long: `.dark-background {\r\n background-color: #2c2f34;\r\n }\r\n </style>\r\n <body>\r\n <div class=\"dark-background\">\r\n {shortCode}\r\n </div>`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcTabContext appearance=\"light\">\r\n <IcTabGroup label=\"Example tab group\">\r\n <IcTab>Ingredients</IcTab>\r\n <IcTab>Method</IcTab>\r\n <IcTab>History</IcTab>\r\n </IcTabGroup>\r\n <IcTabPanel>Tab One - Ingredients</IcTabPanel>\r\n <IcTabPanel>Tab Two - Method</IcTabPanel>\r\n <IcTabPanel>Tab Three - History</IcTabPanel>\r\n</IcTabContext>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: ` const useStyles = createUseStyles({\r\n darkBackground: {\r\n backgroundColor: \"#2c2f34\",\r\n },\r\n });\r\n const classes = useStyles();\r\n return (\r\n <div className={classes.darkBackground}>\r\n {shortCode}\r\n </div>\r\n )`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: ` const useStyles = createUseStyles({\r\n darkBackground: {\r\n backgroundColor: \"#2c2f34\",\r\n },\r\n });\r\n const classes = useStyles();\r\n return (\r\n <div className={classes.darkBackground}>\r\n {shortCode}\r\n </div>\r\n )`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview snippets={light} style={{ backgroundColor: \"#2c2f34\" }}>\r\n <IcTabContext appearance=\"light\">\r\n <IcTabGroup label=\"Example tab group\">\r\n <IcTab>Ingredients</IcTab>\r\n <IcTab>Method</IcTab>\r\n <IcTab>History</IcTab>\r\n </IcTabGroup>\r\n <IcTabPanel>Tab One - Ingredients</IcTabPanel>\r\n <IcTabPanel>Tab Two - Method</IcTabPanel>\r\n <IcTabPanel>Tab Three - History</IcTabPanel>\r\n </IcTabContext>\r\n</ComponentPreview>\r\n\r\n### Compact\r\n\r\nexport const compact = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-tab-context class=\"tabs\">\r\n <ic-tab-group label=\"Example tab group\">\r\n <ic-tab>Ingredients</ic-tab>\r\n <ic-tab>Method</ic-tab>\r\n <ic-tab>History</ic-tab>\r\n <ic-tab>Drinks</ic-tab>\r\n <ic-tab>Recipes</ic-tab>\r\n </ic-tab-group>\r\n <ic-tab-panel>Tab One - Ingredients</ic-tab-panel>\r\n <ic-tab-panel>Tab Two - Method</ic-tab-panel>\r\n <ic-tab-panel>Tab Three - History</ic-tab-panel>\r\n <ic-tab-panel>Tab Four - Drinks</ic-tab-panel>\r\n <ic-tab-panel>Tab Five - Recipes</ic-tab-panel>\r\n</ic-tab-context>`,\r\n long: `.tabs ic-tab-group,\r\n .tabs ic-tab-panel {\r\n width: 60%;\r\n margin-left: auto;\r\n margin-right: auto;\r\n }\r\n </style>\r\n <body>\r\n {shortCode}`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcTabContext>\r\n <IcTabGroup label=\"Example tab group\">\r\n <IcTab>Ingredients</IcTab>\r\n <IcTab>Method</IcTab>\r\n <IcTab>History</IcTab>\r\n <IcTab>Drinks</IcTab>\r\n <IcTab>Recipes</IcTab>\r\n </IcTabGroup>\r\n <IcTabPanel>Tab One - Ingredients</IcTabPanel>\r\n <IcTabPanel>Tab Two - Method</IcTabPanel>\r\n <IcTabPanel>Tab Three - History</IcTabPanel>\r\n <IcTabPanel>Tab Four - Drinks</IcTabPanel>\r\n <IcTabPanel>Tab Five - Recipes</IcTabPanel>\r\n</IcTabContext>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `const useStyles = createUseStyles({\r\n parentContainer: {\r\n width: \"60%\",\r\n marginLeft: \"auto\",\r\n marginRight: \"auto\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nreturn (\r\n <div className={classes.parentContainer}>\r\n {shortCode}\r\n </div>\r\n)`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `const useStyles = createUseStyles({\r\n parentContainer: {\r\n width: \"60%\",\r\n marginLeft: \"auto\",\r\n marginRight: \"auto\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nreturn (\r\n <div className={classes.parentContainer}>\r\n {shortCode}\r\n </div>\r\n)`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview snippets={compact}>\r\n <IcTabContext class=\"tabs\">\r\n <IcTabGroup label=\"Example tab group\">\r\n <IcTab>Ingredients</IcTab>\r\n <IcTab>Method</IcTab>\r\n <IcTab>History</IcTab>\r\n <IcTab>Drinks</IcTab>\r\n <IcTab>Recipes</IcTab>\r\n </IcTabGroup>\r\n <IcTabPanel>Tab One - Ingredients</IcTabPanel>\r\n <IcTabPanel>Tab Two - Method</IcTabPanel>\r\n <IcTabPanel>Tab Three - History</IcTabPanel>\r\n <IcTabPanel>Tab Four - Drinks</IcTabPanel>\r\n <IcTabPanel>Tab Five - Recipes</IcTabPanel>\r\n </IcTabContext>\r\n</ComponentPreview>\r\n\r\n### Nested Tabs\r\n\r\nexport const nested = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-tab-context>\r\n <ic-tab-group label=\"Example tab group\">\r\n <ic-tab>Ingredients</ic-tab>\r\n <ic-tab>Method</ic-tab>\r\n <ic-tab>History</ic-tab>\r\n </ic-tab-group>\r\n <ic-tab-panel>\r\n <ic-tab-context context-id=\"context-nested\">\r\n <ic-tab-group label=\"Example tab group\">\r\n <ic-tab>Espresso</ic-tab>\r\n <ic-tab>Water</ic-tab>\r\n <ic-tab>Milk</ic-tab>\r\n </ic-tab-group>\r\n <ic-tab-panel>Nested Tab Panel One - Espresso</ic-tab-panel>\r\n <ic-tab-panel>Nested Tab Panel Two - Water</ic-tab-panel>\r\n <ic-tab-panel>Nested Tab Panel Three - Milk</ic-tab-panel>\r\n </ic-tab-context>\r\n </ic-tab-panel>\r\n <ic-tab-panel>Outer Tab Panel Two - Method</ic-tab-panel>\r\n <ic-tab-panel>Outer Tab Panel Three - History</ic-tab-panel>\r\n</ic-tab-context>`,\r\n long: `{shortCode}`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcTabContext>\r\n <IcTabGroup label=\"Example tab group\">\r\n <IcTab>Ingredients</IcTab>\r\n <IcTab>Method</IcTab>\r\n <IcTab>History</IcTab>\r\n </IcTabGroup>\r\n <IcTabPanel>\r\n <IcTabContext contextId=\"context-nested\">\r\n <IcTabGroup label=\"Example tab group\">\r\n <IcTab>Espresso</IcTab>\r\n <IcTab>Water</IcTab>\r\n <IcTab>Milk</IcTab>\r\n </IcTabGroup>\r\n <IcTabPanel>Nested Tab Panel One - Espresso</IcTabPanel>\r\n <IcTabPanel>Nested Tab Panel Two - Water</IcTabPanel>\r\n <IcTabPanel>Nested Tab Panel Three - Milk</IcTabPanel>\r\n </IcTabContext>\r\n </IcTabPanel>\r\n <IcTabPanel>Outer Tab Panel Two - Method</IcTabPanel>\r\n <IcTabPanel>Outer Tab Panel Three - History</IcTabPanel>\r\n</IcTabContext>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `{shortCode}`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `{shortCode}`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview snippets={nested}>\r\n <IcTabContext>\r\n <IcTabGroup label=\"Example tab group\">\r\n <IcTab>Ingredients</IcTab>\r\n <IcTab>Method</IcTab>\r\n <IcTab>History</IcTab>\r\n </IcTabGroup>\r\n <IcTabPanel>\r\n <IcTabContext contextId=\"context-nested\">\r\n <IcTabGroup label=\"Example tab group\">\r\n <IcTab>Espresso</IcTab>\r\n <IcTab>Water</IcTab>\r\n <IcTab>Milk</IcTab>\r\n </IcTabGroup>\r\n <IcTabPanel>Nested Tab Panel One - Espresso</IcTabPanel>\r\n <IcTabPanel>Nested Tab Panel Two - Water</IcTabPanel>\r\n <IcTabPanel>Nested Tab Panel Three - Milk</IcTabPanel>\r\n </IcTabContext>\r\n </IcTabPanel>\r\n <IcTabPanel>Outer Tab Panel Two - Method</IcTabPanel>\r\n <IcTabPanel>Outer Tab Panel Three - History</IcTabPanel>\r\n </IcTabContext>\r\n</ComponentPreview>\r\n",
"path": "/components/tabs/code",
"date": "2024-05-31",
"title": "Tabs",
@@ -3886,11 +3886,11 @@
}
],
"meta": {
- "relativePath": "components/tabs/code.mdx",
- "createdAt": "2024-11-06T10:27:49.408Z",
- "lastModified": "2024-11-06T10:19:00.144Z",
- "size": 16816,
- "formattedSize": "16.4 KB"
+ "relativePath": "components\\tabs\\code.mdx",
+ "createdAt": "2024-12-04T13:23:54.121Z",
+ "lastModified": "2024-12-04T13:23:54.121Z",
+ "size": 17445,
+ "formattedSize": "17.0 KB"
}
},
{
@@ -3918,9 +3918,9 @@
}
],
"meta": {
- "relativePath": "components/tabs/guidance.mdx",
- "createdAt": "2024-11-06T10:27:49.408Z",
- "lastModified": "2024-11-06T10:19:00.144Z",
+ "relativePath": "components\\tabs\\guidance.mdx",
+ "createdAt": "2024-11-05T11:57:53.850Z",
+ "lastModified": "2024-11-05T11:57:53.850Z",
"size": 7075,
"formattedSize": "6.9 KB"
}
@@ -3949,16 +3949,16 @@
}
],
"meta": {
- "relativePath": "components/text-field/accessibility.mdx",
- "createdAt": "2024-11-06T10:27:49.404Z",
- "lastModified": "2024-11-06T10:19:00.144Z",
+ "relativePath": "components\\text-field\\accessibility.mdx",
+ "createdAt": "2024-11-05T11:57:53.869Z",
+ "lastModified": "2024-11-05T11:57:53.869Z",
"size": 2300,
"formattedSize": "2.2 KB"
}
},
{
"id": "components\\text-field\\codex",
- "contents": "\nimport { IcTextField } from \"@ukic/react\";\n\n## Component demo\n\nexport const snippetsDefault = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-text-field \n label=\"What is your favourite coffee?\" \n placeholder=\"Please enter…\" \n helper-text=\"Such as Arabica, Robusta or Liberica\"\n></ic-text-field>`,\n long: `.parent-container {\n padding: var(--ic-space-md);\n }\n</style>\n<body>\n <div class=\"parent-container\">\n {shortCode}\n </div>\n <script>\n const textField = document.querySelector('ic-text-field');\n textfield.addEventListenter('icChange', (ev) => console.log(ev.detail.value));\n </script>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcTextField \n label=\"What is your favourite coffee?\" \n placeholder=\"Please enter…\" \n helperText=\"Such as Arabica, Robusta or Liberica\"\n onIcChange={(ev) => console.log(ev.detail.value)}\n/>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n padding: \"var(--ic-space-md)\",\n },\n});\nconst classes = useStyles();\nreturn (\n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n padding: \"var(--ic-space-md)\",\n },\n});\nconst classes = useStyles();\nreturn (\n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={snippetsDefault}>\n <IcTextField\n label=\"What is your favourite coffee?\"\n placeholder=\"Please enter…\"\n helperText=\"Such as Arabica, Robusta or Liberica\"\n onIcChange={(ev) => console.log(ev.detail.value)}\n />\n</ComponentPreview>\n\n## Text field details\n\n<ComponentDetails component=\"ic-text-field\" />\n\n## Variants\n\n### With icon, value and max length\n\nexport const snippetsIconValueMaxLength = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-text-field \n max-length=\"25\" \n value=\"Arabica\" \n label=\"What is your favourite coffee?\" \n required=\"true\" \n placeholder=\"Please enter…\" \n helper-text=\"Such as Arabica, Robusta or Liberica\" \n>\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"#000000\"\n >\n <path d=\"M2,21H20V19H2M20,8H18V5H20M20,3H4V13A4,4 0 0,0 8,17H14A4,4 0 0,0 18,13V10H20A2,2 0 0,0 22,8V5C22,3.89 21.1,3 20,3Z\" />\n </svg>\n</ic-text-field>`,\n long: `.parent-container {\n padding: var(--ic-space-md);\n }\n</style>\n<body>\n <div class=\"parent-container\">\n {shortCode}\n </div>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcTextField \n maxLength={25} \n value=\"Arabica\" \n label=\"What is your favourite coffee?\" \n required \n placeholder=\"Please enter…\" \n helperText=\"Such as Arabica, Robusta or Liberica\"\n>\n <SlottedSVG\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"#000000\"\n >\n <path d=\"M2,21H20V19H2M20,8H18V5H20M20,3H4V13A4,4 0 0,0 8,17H14A4,4 0 0,0 18,13V10H20A2,2 0 0,0 22,8V5C22,3.89 21.1,3 20,3Z\" />\n </SlottedSVG>\n</IcTextField>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n padding: \"var(--ic-space-md)\",\n },\n});\nconst classes = useStyles();\nreturn (\n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n padding: \"var(--ic-space-md)\",\n },\n});\nconst classes = useStyles();\nreturn (\n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={snippetsIconValueMaxLength}>\n <IcTextField\n maxLength={25}\n value=\"Arabica\"\n label=\"What is your favourite coffee?\"\n required\n placeholder=\"Please enter…\"\n helperText=\"Such as Arabica, Robusta or Liberica\"\n >\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n fill=\"#000000\"\n >\n <path d=\"M2,21H20V19H2M20,8H18V5H20M20,3H4V13A4,4 0 0,0 8,17H14A4,4 0 0,0 18,13V10H20A2,2 0 0,0 22,8V5C22,3.89 21.1,3 20,3Z\" />\n </svg>\n </IcTextField>\n</ComponentPreview>\n\n### Disabled\n\nexport const snippetsDisabled = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-text-field\n label=\"What is your favourite coffee?\"\n required=\"true\"\n placeholder=\"Please enter…\"\n disabled=\"true\"\n>\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"#000000\"\n >\n <path d=\"M0 0h24v24H0z\" fill=\"none\" />\n <path d=\"M17 3H7c-1.1 0-1.99.9-1.99 2L5 21l7-3 7 3V5c0-1.1-.9-2-2-2z\" />\n </svg>\n</ic-text-field>`,\n long: `.parent-container {\n padding: var(--ic-space-md);\n }\n</style>\n<body>\n <div class=\"parent-container\">\n {shortCode}\n </div>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcTextField\n label=\"What is your favourite coffee?\"\n required\n placeholder=\"Please enter…\"\n disabled\n>\n <SlottedSVG\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"#000000\"\n >\n <path d=\"M0 0h24v24H0z\" fill=\"none\" />\n <path d=\"M17 3H7c-1.1 0-1.99.9-1.99 2L5 21l7-3 7 3V5c0-1.1-.9-2-2-2z\" />\n </SlottedSVG>\n</IcTextField>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n padding: \"var(--ic-space-md)\",\n },\n});\nconst classes = useStyles();\nreturn (\n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n padding: \"var(--ic-space-md)\",\n },\n});\nconst classes = useStyles();\nreturn (\n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={snippetsDisabled}>\n <IcTextField\n label=\"What is your favourite coffee?\"\n required\n placeholder=\"Please enter…\"\n disabled\n >\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n fill=\"#000000\"\n >\n <path d=\"M0 0h24v24H0z\" fill=\"none\" />\n <path d=\"M17 3H7c-1.1 0-1.99.9-1.99 2L5 21l7-3 7 3V5c0-1.1-.9-2-2-2z\" />\n </svg>\n </IcTextField>\n</ComponentPreview>\n\n### Size small\n\nexport const snippetsSmall = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-text-field \n label=\"What is your favourite coffee?\" \n placeholder=\"Please enter…\" \n size=\"small\"\n></ic-text-field>`,\n long: `.parent-container {\n padding: var(--ic-space-md);\n }\n</style>\n<body>\n <div class=\"parent-container\">\n {shortCode}\n </div>\n <script>\n const textField = document.querySelector('ic-text-field');\n textfield.addEventListenter('icChange', (ev) => console.log(ev.detail.value));\n </script>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcTextField \n label=\"What is your favourite coffee?\" \n placeholder=\"Please enter…\" \n size=\"small\"\n onIcChange={(ev) => console.log(ev.detail.value)}\n/>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n padding: \"var(--ic-space-md)\",\n },\n});\nconst classes = useStyles();\nreturn (\n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n padding: \"var(--ic-space-md)\",\n },\n});\nconst classes = useStyles();\nreturn (\n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={snippetsSmall}>\n <IcTextField\n label=\"What is your favourite coffee?\"\n placeholder=\"Please enter…\"\n size=\"small\"\n onIcChange={(ev) => console.log(ev.detail.value)}\n />\n</ComponentPreview>\n\n### Validation\n\nexport const snippetsValidation = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-text-field \n validation-status=\"success\" \n validation-text=\"Good choice!\" \n value=\"Arabica\" max-length=\"25\" \n label=\"What is your favourite coffee?\" \n required=\"true\" placeholder=\"Please enter…\" \n helper-text=\"Such as Arabica, Robusta or Liberica\"\n></ic-text-field>\n<ic-text-field \n validation-status=\"success\" \n validation-text=\"Good choice!\" \n validation-inline=\"true\" \n value=\"Arabica\" \n max-length=\"25\" \n label=\"What is your favourite coffee?\" \n required=\"true\" placeholder=\"Please enter…\" \n helper-text=\"Such as Arabica, Robusta or Liberica\"\n></ic-text-field>\n<ic-text-field \n validation-status=\"warning\" \n validation-text=\"There’s only a few left! Order now to avoid missing out.\" \n value=\"Arabica\"\n max-length=\"25\" \n label=\"What is your favourite coffee?\" \n required=\"true\" \n placeholder=\"Please enter…\" \n helper-text=\"Such as Arabica, Robusta or Liberica\"\n></ic-text-field>\n<ic-text-field \n validation-status=\"error\" \n validation-text=\"now it has really gone to (coffee) pot\" \n value=\"Tea\" \n max-length=\"25\" \n label=\"What is your favourite coffee?\" \n required=\"true\" \n placeholder=\"Please enter…\" \n helper-text=\"Such as Arabica, Robusta or Liberica\"\n></ic-text-field>`,\n long: `.parent-container {\n padding: var(--ic-space-md);\n }\n</style>\n<body>\n <div class=\"parent-container\">\n {shortCode}\n </div>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcTextField\n maxLength={25}\n value=\"Arabica\"\n label=\"What is your favourite coffee?\"\n required\n placeholder=\"Please enter…\"\n helperText=\"Such as Arabica, Robusta or Liberica\"\n validationStatus=\"success\"\n validationText=\"Good choice!\"\n/>\n<IcTextField\n maxLength={25}\n value=\"Arabica\"\n label=\"What is your favourite coffee?\"\n required\n placeholder=\"Please enter…\"\n helperText=\"Such as Arabica, Robusta or Liberica\"\n validationStatus=\"success\"\n validationText=\"Good choice!\"\n validationInline\n/>\n<IcTextField\n maxLength={25}\n value=\"Arabica\"\n label=\"What is your favourite coffee?\"\n required\n placeholder=\"Please enter…\"\n helperText=\"Such as Arabica, Robusta or Liberica\"\n validationStatus=\"warning\"\n validationText=\"There’s only a few left! Order now to avoid missing out.\"\n/>\n<IcTextField\n maxLength={25}\n value=\"Tea\"\n label=\"What is your favourite coffee?\"\n required\n placeholder=\"Please enter…\"\n helperText=\"Such as Arabica, Robusta or Liberica\"\n validationStatus=\"error\"\n validationText=\"Now it has really gone to (coffee) pot\"\n/>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `<>\n {shortCode}\n</>`,\n },\n {\n language: \"Javascript\",\n snippet: `<>\n {shortCode}\n</>`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={snippetsValidation}>\n <div style={{ display: \"flex\", flexDirection: \"column\", gap: \"0.5rem\" }}>\n <IcTextField\n maxLength={25}\n value=\"Arabica\"\n label=\"What is your favourite coffee?\"\n required\n placeholder=\"Please enter…\"\n helperText=\"Such as Arabica, Robusta or Liberica\"\n validationStatus=\"success\"\n validationText=\"Good choice!\"\n />\n <IcTextField\n maxLength={25}\n value=\"Arabica\"\n label=\"What is your favourite coffee?\"\n required\n placeholder=\"Please enter…\"\n helperText=\"Such as Arabica, Robusta or Liberica\"\n validationStatus=\"success\"\n validationText=\"Good choice!\"\n validationInline\n />\n <IcTextField\n maxLength={25}\n value=\"Arabica\"\n label=\"What is your favourite coffee?\"\n required\n placeholder=\"Please enter…\"\n helperText=\"Such as Arabica, Robusta or Liberica\"\n validationStatus=\"warning\"\n validationText=\"There’s only a few left! Order now to avoid missing out.\"\n />\n <IcTextField\n maxLength={25}\n value=\"Tea\"\n label=\"What is your favourite coffee?\"\n required\n placeholder=\"Please enter…\"\n helperText=\"Such as Arabica, Robusta or Liberica\"\n validationStatus=\"error\"\n validationText=\"Now it has really gone to (coffee) pot\"\n />\n </div>\n</ComponentPreview>\n\n### With min and max values\n\nIn this example, an error message will display when the input is either below the min value or above the max value. This only affects numeric input fields.\n\nexport const snippetsMinMax = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-text-field\n label=\"How many coffees do you want?\"\n helper-text=\"Our coffee machines have a maximum capacity of 4 coffees at a time.\"\n placeholder=\"Please enter…\" \n type=\"number\"\n inputmode=\"numeric\"\n min=\"1\"\n max=\"4\"\n value=\"6\"\n></ic-text-field>`,\n long: `.parent-container {\n padding: var(--ic-space-md);\n }\n</style>\n<body>\n <div class=\"parent-container\">\n {shortCode}\n </div>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcTextField\n label=\"How many coffees do you want?\"\n helperText=\"Our coffee machines have a maximum capacity of 4 coffees at a time.\"\n placeholder=\"Please enter…\" \n type=\"number\"\n inputmode=\"numeric\"\n min={1}\n max={4}\n value=\"6\"\n/>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n padding: \"var(--ic-space-md)\",\n },\n});\nconst classes = useStyles();\nreturn (\n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n padding: \"var(--ic-space-md)\",\n },\n});\nconst classes = useStyles();\nreturn (\n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={snippetsMinMax}>\n <IcTextField\n label=\"How many coffees do you want?\"\n helperText=\"Our coffee machines have a maximum capacity of 4 coffees at a time.\"\n placeholder=\"Please enter…\"\n type=\"number\"\n inputmode=\"numeric\"\n min=\"1\"\n max=\"4\"\n value=\"6\"\n />\n</ComponentPreview>\n\n### Text area with resize\n\nexport const snippetsTextArea = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-text-field \n rows=\"6\"\n resize=\"true\" \n label=\"What is your favourite coffee?\" \n placeholder=\"Please enter…\" \n helper-text=\"Such as Arabica, Robusta or Liberica\"\n></ic-text-field>`,\n long: `.parent-container {\n padding: var(--ic-space-md);\n }\n</style>\n<body>\n <div class=\"parent-container\">\n {shortCode}\n </div>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcTextField \n rows={6} \n resize \n label=\"What is your favourite coffee?\" \n placeholder=\"Please enter…\" \n helperText=\"Such as Arabica, Robusta or Liberica\"\n/>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n padding: \"var(--ic-space-md)\",\n },\n});\nconst classes = useStyles();\nreturn (\n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n padding: \"var(--ic-space-md)\",\n },\n});\nconst classes = useStyles();\nreturn (\n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={snippetsTextArea}>\n <IcTextField\n rows={6}\n resize\n label=\"What is your favourite coffee?\"\n placeholder=\"Please enter…\"\n helperText=\"Such as Arabica, Robusta or Liberica\"\n />\n</ComponentPreview>\n",
+ "contents": "\r\nimport { IcTextField } from \"@ukic/react\";\r\n\r\n## Component demo\r\n\r\nexport const snippetsDefault = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-text-field \r\n label=\"What is your favourite coffee?\" \r\n placeholder=\"Please enter…\" \r\n helper-text=\"Such as Arabica, Robusta or Liberica\"\r\n></ic-text-field>`,\r\n long: `.parent-container {\r\n padding: var(--ic-space-md);\r\n }\r\n</style>\r\n<body>\r\n <div class=\"parent-container\">\r\n {shortCode}\r\n </div>\r\n <script>\r\n const textField = document.querySelector('ic-text-field');\r\n textfield.addEventListenter('icChange', (ev) => console.log(ev.detail.value));\r\n </script>`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcTextField \r\n label=\"What is your favourite coffee?\" \r\n placeholder=\"Please enter…\" \r\n helperText=\"Such as Arabica, Robusta or Liberica\"\r\n onIcChange={(ev) => console.log(ev.detail.value)}\r\n/>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `const useStyles = createUseStyles({\r\n parentContainer: {\r\n padding: \"var(--ic-space-md)\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nreturn (\r\n <div className={classes.parentContainer}>\r\n {shortCode}\r\n </div>\r\n)`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `const useStyles = createUseStyles({\r\n parentContainer: {\r\n padding: \"var(--ic-space-md)\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nreturn (\r\n <div className={classes.parentContainer}>\r\n {shortCode}\r\n </div>\r\n)`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview snippets={snippetsDefault}>\r\n <IcTextField\r\n label=\"What is your favourite coffee?\"\r\n placeholder=\"Please enter…\"\r\n helperText=\"Such as Arabica, Robusta or Liberica\"\r\n onIcChange={(ev) => console.log(ev.detail.value)}\r\n />\r\n</ComponentPreview>\r\n\r\n## Text field details\r\n\r\n<ComponentDetails component=\"ic-text-field\" />\r\n\r\n## Variants\r\n\r\n### With icon, value and max length\r\n\r\nexport const snippetsIconValueMaxLength = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-text-field \r\n max-length=\"25\" \r\n value=\"Arabica\" \r\n label=\"What is your favourite coffee?\" \r\n required=\"true\" \r\n placeholder=\"Please enter…\" \r\n helper-text=\"Such as Arabica, Robusta or Liberica\" \r\n>\r\n <svg\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"24\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"#000000\"\r\n >\r\n <path d=\"M2,21H20V19H2M20,8H18V5H20M20,3H4V13A4,4 0 0,0 8,17H14A4,4 0 0,0 18,13V10H20A2,2 0 0,0 22,8V5C22,3.89 21.1,3 20,3Z\" />\r\n </svg>\r\n</ic-text-field>`,\r\n long: `.parent-container {\r\n padding: var(--ic-space-md);\r\n }\r\n</style>\r\n<body>\r\n <div class=\"parent-container\">\r\n {shortCode}\r\n </div>`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcTextField \r\n maxLength={25} \r\n value=\"Arabica\" \r\n label=\"What is your favourite coffee?\" \r\n required \r\n placeholder=\"Please enter…\" \r\n helperText=\"Such as Arabica, Robusta or Liberica\"\r\n>\r\n <SlottedSVG\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"24\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"#000000\"\r\n >\r\n <path d=\"M2,21H20V19H2M20,8H18V5H20M20,3H4V13A4,4 0 0,0 8,17H14A4,4 0 0,0 18,13V10H20A2,2 0 0,0 22,8V5C22,3.89 21.1,3 20,3Z\" />\r\n </SlottedSVG>\r\n</IcTextField>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `const useStyles = createUseStyles({\r\n parentContainer: {\r\n padding: \"var(--ic-space-md)\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nreturn (\r\n <div className={classes.parentContainer}>\r\n {shortCode}\r\n </div>\r\n)`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `const useStyles = createUseStyles({\r\n parentContainer: {\r\n padding: \"var(--ic-space-md)\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nreturn (\r\n <div className={classes.parentContainer}>\r\n {shortCode}\r\n </div>\r\n)`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview snippets={snippetsIconValueMaxLength}>\r\n <IcTextField\r\n maxLength={25}\r\n value=\"Arabica\"\r\n label=\"What is your favourite coffee?\"\r\n required\r\n placeholder=\"Please enter…\"\r\n helperText=\"Such as Arabica, Robusta or Liberica\"\r\n >\r\n <svg\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n width=\"24\"\r\n fill=\"#000000\"\r\n >\r\n <path d=\"M2,21H20V19H2M20,8H18V5H20M20,3H4V13A4,4 0 0,0 8,17H14A4,4 0 0,0 18,13V10H20A2,2 0 0,0 22,8V5C22,3.89 21.1,3 20,3Z\" />\r\n </svg>\r\n </IcTextField>\r\n</ComponentPreview>\r\n\r\n### Disabled\r\n\r\nexport const snippetsDisabled = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-text-field\r\n label=\"What is your favourite coffee?\"\r\n required=\"true\"\r\n placeholder=\"Please enter…\"\r\n disabled=\"true\"\r\n>\r\n <svg\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"24\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"#000000\"\r\n >\r\n <path d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n <path d=\"M17 3H7c-1.1 0-1.99.9-1.99 2L5 21l7-3 7 3V5c0-1.1-.9-2-2-2z\" />\r\n </svg>\r\n</ic-text-field>`,\r\n long: `.parent-container {\r\n padding: var(--ic-space-md);\r\n }\r\n</style>\r\n<body>\r\n <div class=\"parent-container\">\r\n {shortCode}\r\n </div>`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcTextField\r\n label=\"What is your favourite coffee?\"\r\n required\r\n placeholder=\"Please enter…\"\r\n disabled\r\n>\r\n <SlottedSVG\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"24\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"#000000\"\r\n >\r\n <path d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n <path d=\"M17 3H7c-1.1 0-1.99.9-1.99 2L5 21l7-3 7 3V5c0-1.1-.9-2-2-2z\" />\r\n </SlottedSVG>\r\n</IcTextField>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `const useStyles = createUseStyles({\r\n parentContainer: {\r\n padding: \"var(--ic-space-md)\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nreturn (\r\n <div className={classes.parentContainer}>\r\n {shortCode}\r\n </div>\r\n)`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `const useStyles = createUseStyles({\r\n parentContainer: {\r\n padding: \"var(--ic-space-md)\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nreturn (\r\n <div className={classes.parentContainer}>\r\n {shortCode}\r\n </div>\r\n)`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview snippets={snippetsDisabled}>\r\n <IcTextField\r\n label=\"What is your favourite coffee?\"\r\n required\r\n placeholder=\"Please enter…\"\r\n disabled\r\n >\r\n <svg\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n width=\"24\"\r\n fill=\"#000000\"\r\n >\r\n <path d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n <path d=\"M17 3H7c-1.1 0-1.99.9-1.99 2L5 21l7-3 7 3V5c0-1.1-.9-2-2-2z\" />\r\n </svg>\r\n </IcTextField>\r\n</ComponentPreview>\r\n\r\n### Size small\r\n\r\nexport const snippetsSmall = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-text-field \r\n label=\"What is your favourite coffee?\" \r\n placeholder=\"Please enter…\" \r\n size=\"small\"\r\n></ic-text-field>`,\r\n long: `.parent-container {\r\n padding: var(--ic-space-md);\r\n }\r\n</style>\r\n<body>\r\n <div class=\"parent-container\">\r\n {shortCode}\r\n </div>\r\n <script>\r\n const textField = document.querySelector('ic-text-field');\r\n textfield.addEventListenter('icChange', (ev) => console.log(ev.detail.value));\r\n </script>`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcTextField \r\n label=\"What is your favourite coffee?\" \r\n placeholder=\"Please enter…\" \r\n size=\"small\"\r\n onIcChange={(ev) => console.log(ev.detail.value)}\r\n/>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `const useStyles = createUseStyles({\r\n parentContainer: {\r\n padding: \"var(--ic-space-md)\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nreturn (\r\n <div className={classes.parentContainer}>\r\n {shortCode}\r\n </div>\r\n)`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `const useStyles = createUseStyles({\r\n parentContainer: {\r\n padding: \"var(--ic-space-md)\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nreturn (\r\n <div className={classes.parentContainer}>\r\n {shortCode}\r\n </div>\r\n)`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview snippets={snippetsSmall}>\r\n <IcTextField\r\n label=\"What is your favourite coffee?\"\r\n placeholder=\"Please enter…\"\r\n size=\"small\"\r\n onIcChange={(ev) => console.log(ev.detail.value)}\r\n />\r\n</ComponentPreview>\r\n\r\n### Validation\r\n\r\nexport const snippetsValidation = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-text-field \r\n validation-status=\"success\" \r\n validation-text=\"Good choice!\" \r\n value=\"Arabica\" max-length=\"25\" \r\n label=\"What is your favourite coffee?\" \r\n required=\"true\" placeholder=\"Please enter…\" \r\n helper-text=\"Such as Arabica, Robusta or Liberica\"\r\n></ic-text-field>\r\n<ic-text-field \r\n validation-status=\"success\" \r\n validation-text=\"Good choice!\" \r\n validation-inline=\"true\" \r\n value=\"Arabica\" \r\n max-length=\"25\" \r\n label=\"What is your favourite coffee?\" \r\n required=\"true\" placeholder=\"Please enter…\" \r\n helper-text=\"Such as Arabica, Robusta or Liberica\"\r\n></ic-text-field>\r\n<ic-text-field \r\n validation-status=\"warning\" \r\n validation-text=\"There’s only a few left! Order now to avoid missing out.\" \r\n value=\"Arabica\"\r\n max-length=\"25\" \r\n label=\"What is your favourite coffee?\" \r\n required=\"true\" \r\n placeholder=\"Please enter…\" \r\n helper-text=\"Such as Arabica, Robusta or Liberica\"\r\n></ic-text-field>\r\n<ic-text-field \r\n validation-status=\"error\" \r\n validation-text=\"now it has really gone to (coffee) pot\" \r\n value=\"Tea\" \r\n max-length=\"25\" \r\n label=\"What is your favourite coffee?\" \r\n required=\"true\" \r\n placeholder=\"Please enter…\" \r\n helper-text=\"Such as Arabica, Robusta or Liberica\"\r\n></ic-text-field>`,\r\n long: `.parent-container {\r\n padding: var(--ic-space-md);\r\n }\r\n</style>\r\n<body>\r\n <div class=\"parent-container\">\r\n {shortCode}\r\n </div>`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcTextField\r\n maxLength={25}\r\n value=\"Arabica\"\r\n label=\"What is your favourite coffee?\"\r\n required\r\n placeholder=\"Please enter…\"\r\n helperText=\"Such as Arabica, Robusta or Liberica\"\r\n validationStatus=\"success\"\r\n validationText=\"Good choice!\"\r\n/>\r\n<IcTextField\r\n maxLength={25}\r\n value=\"Arabica\"\r\n label=\"What is your favourite coffee?\"\r\n required\r\n placeholder=\"Please enter…\"\r\n helperText=\"Such as Arabica, Robusta or Liberica\"\r\n validationStatus=\"success\"\r\n validationText=\"Good choice!\"\r\n validationInline\r\n/>\r\n<IcTextField\r\n maxLength={25}\r\n value=\"Arabica\"\r\n label=\"What is your favourite coffee?\"\r\n required\r\n placeholder=\"Please enter…\"\r\n helperText=\"Such as Arabica, Robusta or Liberica\"\r\n validationStatus=\"warning\"\r\n validationText=\"There’s only a few left! Order now to avoid missing out.\"\r\n/>\r\n<IcTextField\r\n maxLength={25}\r\n value=\"Tea\"\r\n label=\"What is your favourite coffee?\"\r\n required\r\n placeholder=\"Please enter…\"\r\n helperText=\"Such as Arabica, Robusta or Liberica\"\r\n validationStatus=\"error\"\r\n validationText=\"Now it has really gone to (coffee) pot\"\r\n/>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `<>\r\n {shortCode}\r\n</>`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `<>\r\n {shortCode}\r\n</>`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview snippets={snippetsValidation}>\r\n <div style={{ display: \"flex\", flexDirection: \"column\", gap: \"0.5rem\" }}>\r\n <IcTextField\r\n maxLength={25}\r\n value=\"Arabica\"\r\n label=\"What is your favourite coffee?\"\r\n required\r\n placeholder=\"Please enter…\"\r\n helperText=\"Such as Arabica, Robusta or Liberica\"\r\n validationStatus=\"success\"\r\n validationText=\"Good choice!\"\r\n />\r\n <IcTextField\r\n maxLength={25}\r\n value=\"Arabica\"\r\n label=\"What is your favourite coffee?\"\r\n required\r\n placeholder=\"Please enter…\"\r\n helperText=\"Such as Arabica, Robusta or Liberica\"\r\n validationStatus=\"success\"\r\n validationText=\"Good choice!\"\r\n validationInline\r\n />\r\n <IcTextField\r\n maxLength={25}\r\n value=\"Arabica\"\r\n label=\"What is your favourite coffee?\"\r\n required\r\n placeholder=\"Please enter…\"\r\n helperText=\"Such as Arabica, Robusta or Liberica\"\r\n validationStatus=\"warning\"\r\n validationText=\"There’s only a few left! Order now to avoid missing out.\"\r\n />\r\n <IcTextField\r\n maxLength={25}\r\n value=\"Tea\"\r\n label=\"What is your favourite coffee?\"\r\n required\r\n placeholder=\"Please enter…\"\r\n helperText=\"Such as Arabica, Robusta or Liberica\"\r\n validationStatus=\"error\"\r\n validationText=\"Now it has really gone to (coffee) pot\"\r\n />\r\n </div>\r\n</ComponentPreview>\r\n\r\n### With min and max values\r\n\r\nIn this example, an error message will display when the input is either below the min value or above the max value. This only affects numeric input fields.\r\n\r\nexport const snippetsMinMax = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-text-field\r\n label=\"How many coffees do you want?\"\r\n helper-text=\"Our coffee machines have a maximum capacity of 4 coffees at a time.\"\r\n placeholder=\"Please enter…\" \r\n type=\"number\"\r\n inputmode=\"numeric\"\r\n min=\"1\"\r\n max=\"4\"\r\n value=\"6\"\r\n></ic-text-field>`,\r\n long: `.parent-container {\r\n padding: var(--ic-space-md);\r\n }\r\n</style>\r\n<body>\r\n <div class=\"parent-container\">\r\n {shortCode}\r\n </div>`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcTextField\r\n label=\"How many coffees do you want?\"\r\n helperText=\"Our coffee machines have a maximum capacity of 4 coffees at a time.\"\r\n placeholder=\"Please enter…\" \r\n type=\"number\"\r\n inputmode=\"numeric\"\r\n min={1}\r\n max={4}\r\n value=\"6\"\r\n/>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `const useStyles = createUseStyles({\r\n parentContainer: {\r\n padding: \"var(--ic-space-md)\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nreturn (\r\n <div className={classes.parentContainer}>\r\n {shortCode}\r\n </div>\r\n)`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `const useStyles = createUseStyles({\r\n parentContainer: {\r\n padding: \"var(--ic-space-md)\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nreturn (\r\n <div className={classes.parentContainer}>\r\n {shortCode}\r\n </div>\r\n)`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview snippets={snippetsMinMax}>\r\n <IcTextField\r\n label=\"How many coffees do you want?\"\r\n helperText=\"Our coffee machines have a maximum capacity of 4 coffees at a time.\"\r\n placeholder=\"Please enter…\"\r\n type=\"number\"\r\n inputmode=\"numeric\"\r\n min=\"1\"\r\n max=\"4\"\r\n value=\"6\"\r\n />\r\n</ComponentPreview>\r\n\r\n### Text area with resize\r\n\r\nexport const snippetsTextArea = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-text-field \r\n rows=\"6\"\r\n resize=\"true\" \r\n label=\"What is your favourite coffee?\" \r\n placeholder=\"Please enter…\" \r\n helper-text=\"Such as Arabica, Robusta or Liberica\"\r\n></ic-text-field>`,\r\n long: `.parent-container {\r\n padding: var(--ic-space-md);\r\n }\r\n</style>\r\n<body>\r\n <div class=\"parent-container\">\r\n {shortCode}\r\n </div>`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcTextField \r\n rows={6} \r\n resize \r\n label=\"What is your favourite coffee?\" \r\n placeholder=\"Please enter…\" \r\n helperText=\"Such as Arabica, Robusta or Liberica\"\r\n/>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `const useStyles = createUseStyles({\r\n parentContainer: {\r\n padding: \"var(--ic-space-md)\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nreturn (\r\n <div className={classes.parentContainer}>\r\n {shortCode}\r\n </div>\r\n)`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `const useStyles = createUseStyles({\r\n parentContainer: {\r\n padding: \"var(--ic-space-md)\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nreturn (\r\n <div className={classes.parentContainer}>\r\n {shortCode}\r\n </div>\r\n)`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview snippets={snippetsTextArea}>\r\n <IcTextField\r\n rows={6}\r\n resize\r\n label=\"What is your favourite coffee?\"\r\n placeholder=\"Please enter…\"\r\n helperText=\"Such as Arabica, Robusta or Liberica\"\r\n />\r\n</ComponentPreview>\r\n",
"path": "/components/text-field/code",
"date": "2024-05-31",
"title": "Text field",
@@ -3980,11 +3980,11 @@
}
],
"meta": {
- "relativePath": "components/text-field/code.mdx",
- "createdAt": "2024-11-06T10:27:49.404Z",
- "lastModified": "2024-11-06T10:19:00.148Z",
- "size": 16709,
- "formattedSize": "16.3 KB"
+ "relativePath": "components\\text-field\\code.mdx",
+ "createdAt": "2024-12-04T13:23:54.121Z",
+ "lastModified": "2024-12-04T13:23:54.121Z",
+ "size": 17441,
+ "formattedSize": "17.0 KB"
}
},
{
@@ -4013,9 +4013,9 @@
],
"tags": ["Text input", "Text area"],
"meta": {
- "relativePath": "components/text-field/guidance.mdx",
- "createdAt": "2024-11-06T10:27:49.404Z",
- "lastModified": "2024-11-06T10:19:00.148Z",
+ "relativePath": "components\\text-field\\guidance.mdx",
+ "createdAt": "2024-11-05T11:57:53.949Z",
+ "lastModified": "2024-11-05T11:57:53.949Z",
"size": 6792,
"formattedSize": "6.6 KB"
}
@@ -4044,16 +4044,16 @@
}
],
"meta": {
- "relativePath": "components/toasts/accessibility.mdx",
- "createdAt": "2024-11-06T10:27:49.408Z",
- "lastModified": "2024-11-06T10:19:00.148Z",
+ "relativePath": "components\\toasts\\accessibility.mdx",
+ "createdAt": "2024-11-05T11:57:53.972Z",
+ "lastModified": "2024-11-05T11:57:53.972Z",
"size": 3405,
"formattedSize": "3.3 KB"
}
},
{
"id": "components\\toasts\\codex",
- "contents": "\nimport {\n IcToast,\n IcToastRegion,\n IcButton,\n IcLink,\n SlottedSVG,\n} from \"@ukic/react\";\nimport { useRef } from \"react\";\n\nexport const defaultSnippet = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-button onclick=\"displayToast()\">Display toast</ic-button>\n<ic-toast-region>\n <ic-toast id=\"toast-01\" heading=\"Your coffee is ready\"></ic-toast>\n</ic-toast-region>`,\n long: `{shortCode}\n<script>\n const toastRegion = document.querySelector(\"ic-toast-region\");\n function displayToast() {\n var toast = document.querySelector(\"#toast-01\");\n toastRegion.openToast = toast;\n }\n</script>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcButton onClick={handleClick}>Display toast component</IcButton>\n<IcToastRegion ref={toastRegionEl}>\n <IcToast heading='Your coffee is ready' ref={toastEl} />\n</IcToastRegion>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const toastRegionEl = useRef<HTMLIcToastRegionElement | null>(null);\nconst toastEl = useRef<HTMLIcToastElement | null>(null);\nconst handleClick = () => {\n if (toastRegionEl.current && toastEl.current) {\n toastRegionEl.current.openToast = toastEl.current;\n }\n};\nreturn (\n <>\n {shortCode}\n </>\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const toastRegionEl = useRef(null);\nconst toastEl = useRef(null);\nconst handleClick = () => {\n if (toastRegionEl.current && toastEl.current) {\n toastRegionEl.current.openToast = toastEl.current;\n }\n};\nreturn (\n <>\n {shortCode}\n </>\n)`,\n },\n ],\n },\n },\n];\n\n## Component demo\n\nexport const DefaultToast = () => {\n const toastRegionEl = useRef(null);\n const toastEl = useRef(null);\n const handleClick = () => {\n toastRegionEl.current.openToast = toastEl.current;\n };\n return (\n <>\n <IcButton onClick={handleClick}>Display toast component</IcButton>\n <IcToastRegion ref={toastRegionEl}>\n <IcToast heading=\"Your coffee is ready\" ref={toastEl} />\n </IcToastRegion>\n </>\n );\n};\n\n<ComponentPreview snippets={defaultSnippet}>\n <DefaultToast />\n</ComponentPreview>\n\n## Toast region details\n\n<ComponentDetails component=\"ic-toast-region\" />\n\n## Toast details\n\n<ComponentDetails component=\"ic-toast\" />\n\n## Variants\n\n### Displaying toasts\n\nUse the `openToast` prop on the toast region component to display a toast message. Do not use the `setVisible` method on the toast component as this does not work with the toast queuing functionality.\n\n### Queuing toasts\n\nTo view the toasts queuing in the following example, click each button to open a toast and then the dismiss button on the visible toast. Each toast will appear one after the other.\n\nexport const queuingSnippet = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-button onclick=\"handleClick()\">Display default toast</ic-button>\n<ic-button onclick=\"handleErrorClick()\">Display error toast</ic-button>\n<ic-button onclick=\"handleAutoDismissClick()\">Display auto dismiss toast</ic-button>\n<ic-toast-region>\n <ic-toast id=\"toast-01\" heading=\"Your coffee is ready\"></ic-toast>\n <ic-toast id=\"toast-02\" heading=\"There is no coffee left\" variant=\"error\"></ic-toast>\n <ic-toast id=\"toast-03\" heading=\"Your coffee is ready\" dismiss-mode=\"automatic\" auto-dismiss-timeout=\"10000\"></ic-toast>\n</ic-toast-region>`,\n long: `.btn-container {\n display: flex;\n gap: var(--ic-space-xs);\n flex-wrap: wrap;\n padding: var(--ic-space-md);\n }\n</style>\n<body>\n <div class=\"btn-container\">\n <ic-button onclick=\"handleClick()\">Display default toast</ic-button>\n <ic-button onclick=\"handleErrorClick()\">Display error toast</ic-button>\n <ic-button onclick=\"handleAutoDismissClick()\">Display auto dismiss toast</ic-button>\n </div>\n <ic-toast-region>\n <ic-toast id=\"toast-01\" heading=\"Your coffee is ready\"></ic-toast>\n <ic-toast id=\"toast-02\" heading=\"There is no coffee left\" variant=\"error\"></ic-toast>\n <ic-toast id=\"toast-03\" heading=\"Your coffee is ready\" dismiss-mode=\"automatic\" auto-dismiss-timeout=\"10000\"></ic-toast>\n </ic-toast-region>\n <script>\n const toastRegion = document.querySelector(\"ic-toast-region\");\n function handleClick() {\n var toast = document.querySelector(\"#toast-01\");\n toastRegion.openToast = toast;\n }\n function handleErrorClick() {\n var toast = document.querySelector(\"#toast-02\");\n toastRegion.openToast = toast;\n }\n function handleAutoDismissClick() {\n var toast = document.querySelector(\"#toast-03\");\n toastRegion.openToast = toast;\n }\n </script>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcButton onClick={handleClick}>Display default toast</IcButton>\n<IcButton onClick={handleErrorClick}>Display error toast</IcButton>\n<IcButton onClick={handleAutoDismissClick}>\n Display auto dismiss toast\n</IcButton>\n<IcToastRegion ref={toastRegionEl}>\n <IcToast heading=\"Your coffee is ready\" ref={toastEl} />\n <IcToast\n heading=\"There is no coffee left\"\n variant=\"error\"\n ref={errorToastEl}\n />\n <IcToast\n heading=\"Your coffee is ready\"\n dismissMode=\"automatic\"\n autoDismissTimeout={10000}\n ref={autoDismissToastEl}\n />\n</IcToastRegion>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const toastRegionEl = useRef<HTMLIcToastRegionElement | null>(null);\nconst toastEl = useRef<HTMLIcToastElement | null>(null);\nconst errorToastEl = useRef<HTMLIcToastElement | null>(null);\nconst autoDismissToastEl = useRef<HTMLIcToastElement | null>(null);\nconst handleClick = () => {\n if (toastRegionEl.current && toastEl.current) {\n toastRegionEl.current.openToast = toastEl.current;\n }\n};\nconst handleErrorClick = () => {\n if (toastRegionEl.current && errorToastEl.current) {\n toastRegionEl.current.openToast = errorToastEl.current;\n }\n};\nconst handleAutoDismissClick = () => {\n if (toastRegionEl.current && autoDismissToastEl.current) {\n toastRegionEl.current.openToast = autoDismissToastEl.current;\n }\n};\nconst useStyles = createUseStyles({\n btnContainer: {\n display: \"flex\",\n flexWrap: \"wrap\",\n gap: \"var(--ic-space-xs)\",\n padding: \"var(--ic-space-md)\",\n },\n});\nconst classes = useStyles();\nreturn (\n <>\n <div className={classes.btnContainer}>\n <IcButton onClick={handleClick}>Display default toast</IcButton>\n <IcButton onClick={handleErrorClick}>Display error toast</IcButton>\n <IcButton onClick={handleAutoDismissClick}>\n Display auto dismiss toast\n </IcButton>\n </div>\n <IcToastRegion ref={toastRegionEl}>\n <IcToast heading=\"Your coffee is ready\" ref={toastEl} />\n <IcToast\n heading=\"There is no coffee left\"\n variant=\"error\"\n ref={errorToastEl}\n />\n <IcToast\n heading=\"Your coffee is ready\"\n dismissMode=\"automatic\"\n autoDismissTimeout={10000}\n ref={autoDismissToastEl}\n />\n </IcToastRegion>\n </>\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const toastRegionEl = useRef(null);\nconst toastEl = useRef(null);\nconst errorToastEl = useRef(null);\nconst autoDismissToastEl = useRef(null);\nconst handleClick = () => {\n if (toastRegionEl.current && toastEl.current) {\n toastRegionEl.current.openToast = toastEl.current;\n }\n};\nconst handleErrorClick = () => {\n if (toastRegionEl.current && errorToastEl.current) {\n toastRegionEl.current.openToast = errorToastEl.current;\n }\n};\nconst handleAutoDismissClick = () => {\n if (toastRegionEl.current && autoDismissToastEl.current) {\n toastRegionEl.current.openToast = autoDismissToastEl.current;\n }\n};\nconst useStyles = createUseStyles({\n btnContainer: {\n display: \"flex\",\n flexWrap: \"wrap\",\n gap: \"var(--ic-space-xs)\",\n padding: \"var(--ic-space-md)\",\n },\n});\nconst classes = useStyles();\nreturn (\n <>\n <div className={classes.btnContainer}>\n <IcButton onClick={handleClick}>Display default toast</IcButton>\n <IcButton onClick={handleErrorClick}>Display error toast</IcButton>\n <IcButton onClick={handleAutoDismissClick}>\n Display auto dismiss toast\n </IcButton>\n </div>\n <IcToastRegion ref={toastRegionEl}>\n <IcToast heading=\"Your coffee is ready\" ref={toastEl} />\n <IcToast\n heading=\"There is no coffee left\"\n variant=\"error\"\n ref={errorToastEl}\n />\n <IcToast\n heading=\"Your coffee is ready\"\n dismissMode=\"automatic\"\n autoDismissTimeout={10000}\n ref={autoDismissToastEl}\n />\n </IcToastRegion>\n </>\n)`,\n },\n ],\n },\n },\n];\n\nexport const QueuingToast = () => {\n const toastRegionEl = useRef(null);\n const toastEl = useRef(null);\n const errorToastEl = useRef(null);\n const autoDismissToastEl = useRef(null);\n const handleClick = () => {\n toastRegionEl.current.openToast = toastEl.current;\n };\n const handleErrorClick = () => {\n toastRegionEl.current.openToast = errorToastEl.current;\n };\n const handleAutoDismissClick = () => {\n toastRegionEl.current.openToast = autoDismissToastEl.current;\n };\n return (\n <>\n <div style={{ display: \"flex\", gap: \"0.5rem\" }}>\n <IcButton onClick={handleClick}>Display default toast</IcButton>\n <IcButton onClick={handleErrorClick}>Display error toast</IcButton>\n <IcButton onClick={handleAutoDismissClick}>\n Display auto dismiss toast\n </IcButton>\n </div>\n <IcToastRegion ref={toastRegionEl}>\n <IcToast heading=\"Your coffee is ready\" ref={toastEl} />\n <IcToast\n heading=\"There is no coffee left\"\n variant=\"error\"\n ref={errorToastEl}\n />\n <IcToast\n heading=\"Your coffee is ready\"\n dismissMode=\"automatic\"\n autoDismissTimeout={10000}\n ref={autoDismissToastEl}\n />\n </IcToastRegion>\n </>\n );\n};\n\n<ComponentPreview snippets={queuingSnippet}>\n <QueuingToast />\n</ComponentPreview>\n\n### Status variant\n\nexport const withVariantSnippet = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-button onclick=\"displayToast()\">Display success toast</ic-button>\n<ic-toast-region>\n <ic-toast variant=\"success\" id=\"toast-02\" heading=\"Your coffee is ready\" message=\"Please dismiss and collect\"></ic-toast>\n</ic-toast-region>`,\n long: `{shortCode}\n<script>\n const toastRegion = document.querySelector(\"ic-toast-region\");\n function displayToast() {\n const successToast = document.querySelector(\"#toast-02\");\n toastRegion.openToast = successToast;\n }\n</script>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcButton onClick={handleClick}>Display success toast</IcButton>\n<IcToastRegion ref={toastRegionEl}>\n <IcToast\n heading='Your coffee is ready'\n ref={toastEl}\n message='Please dismiss and collect'\n variant='success'\n />\n</IcToastRegion>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const toastRegionEl = useRef<HTMLIcToastRegionElement | null>(null);\nconst toastEl = useRef<HTMLIcToastElement | null>(null);\nconst handleClick = () => {\n if (toastRegionEl.current && toastEl.current) {\n toastRegionEl.current.openToast = toastEl.current;\n }\n};\nreturn (\n <>\n {shortCode}\n </>\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const toastRegionEl = useRef(null);\nconst toastEl = useRef(null);\nconst handleClick = () => {\n if (toastRegionEl.current && toastEl.current) {\n toastRegionEl.current.openToast = toastEl.current;\n }\n};\nreturn (\n <>\n {shortCode}\n </>\n)`,\n },\n ],\n },\n },\n];\n\nexport const WithVariantToast = () => {\n const toastRegionEl = useRef(null);\n const toastEl = useRef(null);\n const handleClick = () => {\n toastRegionEl.current.openToast = toastEl.current;\n };\n return (\n <>\n <IcButton onClick={handleClick}>Display success toast</IcButton>\n <IcToastRegion ref={toastRegionEl}>\n <IcToast\n heading=\"Your coffee is ready\"\n ref={toastEl}\n message=\"Please dismiss and collect\"\n variant=\"success\"\n />\n </IcToastRegion>\n </>\n );\n};\n\n<ComponentPreview snippets={withVariantSnippet}>\n <WithVariantToast />\n</ComponentPreview>\n\n### Multi-line\n\nexport const withMultilineSnippet = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-button onclick=\"displayToast()\">Display multi-line toast</ic-button>\n<ic-toast-region>\n <ic-toast id=\"toast-03\" heading=\"Your coffee is ready\" message=\"Please dismiss and come to collect your delicious coffee from the barista right away before it gets cold.\"></ic-toast>\n</ic-toast-region>`,\n long: `{shortCode}\n<script>\n const toastRegion = document.querySelector(\"ic-toast-region\");\n function displayToast() {\n const multilineToast = document.querySelector(\"#toast-03\");\n toastRegion.openToast = multilineToast;\n }\n</script>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcButton onClick={handleClick}>Display multi-line toast</IcButton>\n<IcToastRegion ref={toastRegionEl}>\n <IcToast\n heading='Your coffee is ready'\n ref={toastEl}\n message='Please dismiss and come to collect your delicious coffee from the barista right away before it gets cold.'\n />\n</IcToastRegion>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const toastRegionEl = useRef<HTMLIcToastRegionElement | null>(null);\nconst toastEl = useRef<HTMLIcToastElement | null>(null);\nconst handleClick = () => {\n if (toastRegionEl.current && toastEl.current) {\n toastRegionEl.current.openToast = toastEl.current;\n }\n};\nreturn (\n <>\n {shortCode}\n </>\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const toastRegionEl = useRef(null);\nconst toastEl = useRef(null);\nconst handleClick = () => {\n if (toastRegionEl.current && toastEl.current) {\n toastRegionEl.current.openToast = toastEl.current;\n }\n};\nreturn (\n <>\n {shortCode}\n </>\n)`,\n },\n ],\n },\n },\n];\n\nexport const MultilineToast = () => {\n const toastRegionEl = useRef(null);\n const toastEl = useRef(null);\n const handleClick = () => {\n toastRegionEl.current.openToast = toastEl.current;\n };\n return (\n <>\n <IcButton onClick={handleClick}>Display multi-line toast</IcButton>\n <IcToastRegion ref={toastRegionEl}>\n <IcToast\n heading=\"Your coffee is ready\"\n ref={toastEl}\n message=\"Please dismiss and come to collect your delicious coffee from the barista right away before it gets cold.\"\n />\n </IcToastRegion>\n </>\n );\n};\n\n<ComponentPreview snippets={withMultilineSnippet}>\n <MultilineToast />\n</ComponentPreview>\n\n### Slotted 'action' toast\n\nexport const slottedActionsSnippet = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-button onclick=\"displayButtonToast()\">Display slotted buttons toast</ic-button>\n<ic-button onclick=\"displayLinkToast()\">Display slotted buttons toast</ic-button>\n<ic-toast-region>\n <ic-toast id=\"toast-04\" heading=\"Your order could not be placed\" message=\"Please try again\" variant='warning'>\n <ic-button slot='action' appearance='light'>Retry</ic-button>\n </ic-toast>\n <ic-toast id=\"toast-05\" heading=\"Your order could not be placed\" message=\"Please try again\" variant='warning'>\n <ic-link slot='action' appearance='light'>Retry</ic-link>\n </ic-toast>\n</ic-toast-region>`,\n long: `.btn-container {\n display: flex;\n gap: var(--ic-space-xs);\n flex-wrap: wrap;\n padding: var(--ic-space-md);\n }\n</style>\n<body>\n <div class=\"btn-container\">\n <ic-button onclick=\"displayButtonToast()\"\n >Display slotted buttons toast</ic-button\n >\n <ic-button onclick=\"displayLinkToast()\"\n >Display slotted buttons toast</ic-button\n >\n </div>\n <ic-toast-region>\n <ic-toast\n id=\"toast-04\"\n heading=\"Your order could not be placed\"\n message=\"Please try again\"\n variant=\"warning\"\n >\n <ic-button slot=\"action\" appearance=\"light\">Retry</ic-button>\n </ic-toast>\n <ic-toast\n id=\"toast-05\"\n heading=\"Your order could not be placed\"\n message=\"Please try again\"\n variant=\"warning\"\n >\n <ic-link slot=\"action\" appearance=\"light\">Retry</ic-link>\n </ic-toast>\n </ic-toast-region>\n <script>\n const toastRegion = document.querySelector(\"ic-toast-region\");\n function displayButtonToast() {\n const slottedButtonToast = document.querySelector(\"#toast-04\");\n toastRegion.openToast = slottedButtonToast;\n }\n function displayLinkToast() {\n const slottedLinkToast = document.querySelector(\"#toast-05\");\n toastRegion.openToast = slottedLinkToast;\n }\n </script>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcButton onClick={handleButtonToastClick}>Display slotted button toast</IcButton>\n<IcButton onClick={handleLinkToastClick}>Display slotted link toast</IcButton>\n<IcToastRegion ref={toastRegionEl}>\n <IcToast\n heading='Your order could not be placed'\n ref={buttonToastEl}\n message='Please try again'\n variant='warning'\n >\n <IcButton slot='action' appearance='light'>Retry</IcButton>\n </IcToast>\n <IcToast\n heading='Your order could not be placed'\n ref={linkToastEl}\n message='Please try again'\n variant='warning'\n >\n <IcLink href=\"#\" slot=\"action\" appearance=\"light\">Retry</IcLink>\n </IcToast>\n</IcToastRegion>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const toastRegionEl = useRef<HTMLIcToastRegionElement | null>(null);\nconst buttonToastEl = useRef<HTMLIcToastElement | null>(null);\nconst linkToastEl = useRef<HTMLIcToastElement | null>(null);\nconst handleButtonToastClick = () => {\n if (toastRegionEl.current && buttonToastEl.current) {\n toastRegionEl.current.openToast = buttonToastEl.current;\n }\n};\nconst handleLinkToastClick = () => {\n if (toastRegionEl.current && linkToastEl.current) {\n toastRegionEl.current.openToast = linkToastEl.current;\n }\n};\nconst useStyles = createUseStyles({\n btnContainer: {\n display: \"flex\",\n flexWrap: \"wrap\",\n gap: \"var(--ic-space-xs)\",\n padding: \"var(--ic-space-md)\",\n },\n});\nconst classes = useStyles();\nreturn (\n <>\n <div className={classes.btnContainer}>\n <IcButton onClick={handleButtonToastClick}>\n Display slotted button toast\n </IcButton>\n <IcButton onClick={handleLinkToastClick}>\n Display slotted link toast\n </IcButton>\n </div>\n <IcToastRegion ref={toastRegionEl}>\n <IcToast\n heading=\"Your order could not be placed\"\n ref={buttonToastEl}\n message=\"Please try again\"\n variant=\"warning\"\n >\n <IcButton slot=\"action\" appearance=\"light\">\n Retry\n </IcButton>\n </IcToast>\n <IcToast\n heading=\"Your order could not be placed\"\n ref={linkToastEl}\n message=\"Please try again\"\n variant=\"warning\"\n >\n <IcLink href=\"#\" slot=\"action\" appearance=\"light\">\n Retry\n </IcLink>\n </IcToast>\n </IcToastRegion>\n </>\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const toastRegionEl = useRef(null);\nconst buttonToastEl = useRef(null);\nconst linkToastEl = useRef(null);\nconst handleButtonToastClick = () => {\n if (toastRegionEl.current && buttonToastEl.current) {\n toastRegionEl.current.openToast = buttonToastEl.current;\n }\n};\nconst handleLinkToastClick = () => {\n if (toastRegionEl.current && linkToastEl.current) {\n toastRegionEl.current.openToast = linkToastEl.current;\n }\n};\nconst useStyles = createUseStyles({\n btnContainer: {\n display: \"flex\",\n flexWrap: \"wrap\",\n gap: \"var(--ic-space-xs)\",\n padding: \"var(--ic-space-md)\",\n },\n});\nconst classes = useStyles();\nreturn (\n <>\n <div className={classes.btnContainer}>\n <IcButton onClick={handleButtonToastClick}>\n Display slotted button toast\n </IcButton>\n <IcButton onClick={handleLinkToastClick}>\n Display slotted link toast\n </IcButton>\n </div>\n <IcToastRegion ref={toastRegionEl}>\n <IcToast\n heading=\"Your order could not be placed\"\n ref={buttonToastEl}\n message=\"Please try again\"\n variant=\"warning\"\n >\n <IcButton slot=\"action\" appearance=\"light\">\n Retry\n </IcButton>\n </IcToast>\n <IcToast\n heading=\"Your order could not be placed\"\n ref={linkToastEl}\n message=\"Please try again\"\n variant=\"warning\"\n >\n <IcLink href=\"#\" slot=\"action\" appearance=\"light\">\n Retry\n </IcLink>\n </IcToast>\n </IcToastRegion>\n </>\n)`,\n },\n ],\n },\n },\n];\n\nexport const SlottedActionsToast = () => {\n const toastRegionEl = useRef(null);\n const buttonToastEl = useRef(null);\n const linkToastEl = useRef(null);\n const handleButtonToastClick = () => {\n toastRegionEl.current.openToast = buttonToastEl.current;\n };\n const handleLinkToastClick = () => {\n toastRegionEl.current.openToast = linkToastEl.current;\n };\n return (\n <>\n <div style={{ display: \"flex\", gap: \"0.5rem\" }}>\n <IcButton onClick={handleButtonToastClick}>\n Display slotted button toast\n </IcButton>\n <IcButton onClick={handleLinkToastClick}>\n Display slotted link toast\n </IcButton>\n </div>\n <IcToastRegion ref={toastRegionEl}>\n <IcToast\n heading=\"Your order could not be placed\"\n ref={buttonToastEl}\n message=\"Please try again\"\n variant=\"warning\"\n >\n <IcButton slot=\"action\" appearance=\"light\">\n Retry\n </IcButton>\n </IcToast>\n <IcToast\n heading=\"Your order could not be placed\"\n ref={linkToastEl}\n message=\"Please try again\"\n variant=\"warning\"\n >\n <IcLink href=\"#\" slot=\"action\" appearance=\"light\">\n Retry\n </IcLink>\n </IcToast>\n </IcToastRegion>\n </>\n );\n};\n\n<ComponentPreview snippets={slottedActionsSnippet}>\n <SlottedActionsToast />\n</ComponentPreview>\n\n### Auto-dismiss\n\nexport const autoDismissSnippet = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-button onclick=\"displayToast()\">Display auto-dismiss toast</ic-button>\n<ic-toast-region>\n <ic-toast\n id=\"toast-06\"\n heading=\"Your coffee is ready\"\n dismiss-mode=\"automatic\"\n auto-dismiss-timeout=\"10000\"\n variant=\"info\"\n ></ic-toast>\n</ic-toast-region>`,\n long: `{shortCode}\n<script>\n const toastRegion = document.querySelector(\"ic-toast-region\");\n function displayToast() {\n var toast = document.querySelector(\"#toast-06\");\n toastRegion.openToast = toast;\n }\n</script>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcButton onClick={handleClick}>Display auto-dismiss toast</IcButton>\n<IcToastRegion ref={toastRegionEl}>\n <IcToast\n heading=\"Your coffee is ready\"\n ref={toastEl}\n dismissMode=\"automatic\"\n autoDismissTimeout={10000}\n variant=\"info\"\n />\n</IcToastRegion>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const toastRegionEl = useRef<HTMLIcToastRegionElement | null>(null);\nconst toastEl = useRef<HTMLIcToastElement | null>(null);\nconst handleClick = () => {\n if (toastRegionEl.current && toastEl.current) {\n toastRegionEl.current.openToast = toastEl.current;\n }\n};\nreturn (\n <>\n {shortCode}\n </>\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const toastRegionEl = useRef(null);\nconst toastEl = useRef(null);\nconst handleClick = () => {\n if (toastRegionEl.current && toastEl.current) {\n toastRegionEl.current.openToast = toastEl.current;\n }\n};\nreturn (\n <>\n {shortCode}\n </>\n)`,\n },\n ],\n },\n },\n];\n\nexport const AutoDismissToast = () => {\n const toastRegionEl = useRef(null);\n const toastEl = useRef(null);\n const handleClick = () => {\n toastRegionEl.current.openToast = toastEl.current;\n };\n return (\n <>\n <IcButton onClick={handleClick}>Display auto-dismiss toast</IcButton>\n <IcToastRegion ref={toastRegionEl}>\n <IcToast\n heading=\"Your coffee is ready\"\n ref={toastEl}\n dismissMode=\"automatic\"\n autoDismissTimeout={10000}\n variant=\"info\"\n />\n </IcToastRegion>\n </>\n );\n};\n\n<ComponentPreview snippets={autoDismissSnippet}>\n <AutoDismissToast />\n</ComponentPreview>\n\n### Custom neutral icon and aria-labels\n\nexport const customIconAriaLabelsSnippet = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-button onclick=\"displayToast()\">Display auto-dismiss toast</ic-button>\n<ic-toast-region>\n <ic-toast\n id=\"toast-07\"\n heading=\"Your coffee is ready\"\n variant=\"neutral\"\n neutral-icon-aria-label=\"It is time to collect your coffee\"\n dismiss-button-aria-label=\"Dismiss me\"\n >\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n slot=\"neutral-icon\"\n viewBox=\"0 0 24 24\"\n >\n <title>coffee-outline</title>\n <path\n d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"\n />\n </svg>\n </ic-toast>\n</ic-toast-region>`,\n long: `{shortCode}\n<script>\n const toastRegion = document.querySelector(\"ic-toast-region\");\n function displayToast() {\n var toast = document.querySelector(\"#toast-07\");\n toastRegion.openToast = toast;\n }\n</script>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcButton onClick={handleClick}>\n Display custom icon and aria-label toast\n</IcButton>\n<IcToastRegion ref={toastRegionEl}>\n <IcToast\n heading=\"Your coffee is ready\"\n ref={toastEl}\n variant=\"neutral\"\n neutralIconAriaLabel=\"It is time to collect your coffee\"\n dismissButtonAriaLabel=\"Dismiss me\"\n >\n <SlottedSVG slot=\"neutral-icon\">\n <title>coffee-outline</title>\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n </SlottedSVG>\n </IcToast>\n</IcToastRegion>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const toastRegionEl = useRef<HTMLIcToastRegionElement | null>(null);\nconst toastEl = useRef<HTMLIcToastElement | null>(null);\nconst handleClick = () => {\n if (toastRegionEl.current && toastEl.current) {\n toastRegionEl.current.openToast = toastEl.current;\n }\n};\nreturn (\n <>\n {shortCode}\n </>\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const toastRegionEl = useRef(null);\nconst toastEl = useRef(null);\nconst handleClick = () => {\n if (toastRegionEl.current && toastEl.current) {\n toastRegionEl.current.openToast = toastEl.current;\n }\n};\nreturn (\n <>\n {shortCode}\n </>\n)`,\n },\n ],\n },\n },\n];\n\nexport const CustomIconAriaLabels = () => {\n const toastRegionEl = useRef(null);\n const toastEl = useRef(null);\n const handleClick = () => {\n toastRegionEl.current.openToast = toastEl.current;\n };\n return (\n <>\n <IcButton onClick={handleClick}>\n Display custom icon and aria-labels toast\n </IcButton>\n <IcToastRegion ref={toastRegionEl}>\n <IcToast\n heading=\"Your coffee is ready\"\n ref={toastEl}\n variant=\"neutral\"\n neutralIconAriaLabel=\"It is time to collect your coffee\"\n dismissButtonAriaLabel=\"Dismiss me\"\n >\n <SlottedSVG slot=\"neutral-icon\">\n <title>coffee-outline</title>\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n </SlottedSVG>\n </IcToast>\n </IcToastRegion>\n </>\n );\n};\n\n<ComponentPreview snippets={customIconAriaLabelsSnippet}>\n <CustomIconAriaLabels />\n</ComponentPreview>\n",
+ "contents": "\r\nimport {\r\n IcToast,\r\n IcToastRegion,\r\n IcButton,\r\n IcLink,\r\n SlottedSVG,\r\n} from \"@ukic/react\";\r\nimport { useRef } from \"react\";\r\n\r\nexport const defaultSnippet = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-button onclick=\"displayToast()\">Display toast</ic-button>\r\n<ic-toast-region>\r\n <ic-toast id=\"toast-01\" heading=\"Your coffee is ready\"></ic-toast>\r\n</ic-toast-region>`,\r\n long: `{shortCode}\r\n<script>\r\n const toastRegion = document.querySelector(\"ic-toast-region\");\r\n function displayToast() {\r\n var toast = document.querySelector(\"#toast-01\");\r\n toastRegion.openToast = toast;\r\n }\r\n</script>`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcButton onClick={handleClick}>Display toast component</IcButton>\r\n<IcToastRegion ref={toastRegionEl}>\r\n <IcToast heading='Your coffee is ready' ref={toastEl} />\r\n</IcToastRegion>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `const toastRegionEl = useRef<HTMLIcToastRegionElement | null>(null);\r\nconst toastEl = useRef<HTMLIcToastElement | null>(null);\r\nconst handleClick = () => {\r\n if (toastRegionEl.current && toastEl.current) {\r\n toastRegionEl.current.openToast = toastEl.current;\r\n }\r\n};\r\nreturn (\r\n <>\r\n {shortCode}\r\n </>\r\n)`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `const toastRegionEl = useRef(null);\r\nconst toastEl = useRef(null);\r\nconst handleClick = () => {\r\n if (toastRegionEl.current && toastEl.current) {\r\n toastRegionEl.current.openToast = toastEl.current;\r\n }\r\n};\r\nreturn (\r\n <>\r\n {shortCode}\r\n </>\r\n)`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n## Component demo\r\n\r\nexport const DefaultToast = () => {\r\n const toastRegionEl = useRef(null);\r\n const toastEl = useRef(null);\r\n const handleClick = () => {\r\n toastRegionEl.current.openToast = toastEl.current;\r\n };\r\n return (\r\n <>\r\n <IcButton onClick={handleClick}>Display toast component</IcButton>\r\n <IcToastRegion ref={toastRegionEl}>\r\n <IcToast heading=\"Your coffee is ready\" ref={toastEl} />\r\n </IcToastRegion>\r\n </>\r\n );\r\n};\r\n\r\n<ComponentPreview snippets={defaultSnippet}>\r\n <DefaultToast />\r\n</ComponentPreview>\r\n\r\n## Toast region details\r\n\r\n<ComponentDetails component=\"ic-toast-region\" />\r\n\r\n## Toast details\r\n\r\n<ComponentDetails component=\"ic-toast\" />\r\n\r\n## Variants\r\n\r\n### Displaying toasts\r\n\r\nUse the `openToast` prop on the toast region component to display a toast message. Do not use the `setVisible` method on the toast component as this does not work with the toast queuing functionality.\r\n\r\n### Queuing toasts\r\n\r\nTo view the toasts queuing in the following example, click each button to open a toast and then the dismiss button on the visible toast. Each toast will appear one after the other.\r\n\r\nexport const queuingSnippet = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-button onclick=\"handleClick()\">Display default toast</ic-button>\r\n<ic-button onclick=\"handleErrorClick()\">Display error toast</ic-button>\r\n<ic-button onclick=\"handleAutoDismissClick()\">Display auto dismiss toast</ic-button>\r\n<ic-toast-region>\r\n <ic-toast id=\"toast-01\" heading=\"Your coffee is ready\"></ic-toast>\r\n <ic-toast id=\"toast-02\" heading=\"There is no coffee left\" variant=\"error\"></ic-toast>\r\n <ic-toast id=\"toast-03\" heading=\"Your coffee is ready\" dismiss-mode=\"automatic\" auto-dismiss-timeout=\"10000\"></ic-toast>\r\n</ic-toast-region>`,\r\n long: `.btn-container {\r\n display: flex;\r\n gap: var(--ic-space-xs);\r\n flex-wrap: wrap;\r\n padding: var(--ic-space-md);\r\n }\r\n</style>\r\n<body>\r\n <div class=\"btn-container\">\r\n <ic-button onclick=\"handleClick()\">Display default toast</ic-button>\r\n <ic-button onclick=\"handleErrorClick()\">Display error toast</ic-button>\r\n <ic-button onclick=\"handleAutoDismissClick()\">Display auto dismiss toast</ic-button>\r\n </div>\r\n <ic-toast-region>\r\n <ic-toast id=\"toast-01\" heading=\"Your coffee is ready\"></ic-toast>\r\n <ic-toast id=\"toast-02\" heading=\"There is no coffee left\" variant=\"error\"></ic-toast>\r\n <ic-toast id=\"toast-03\" heading=\"Your coffee is ready\" dismiss-mode=\"automatic\" auto-dismiss-timeout=\"10000\"></ic-toast>\r\n </ic-toast-region>\r\n <script>\r\n const toastRegion = document.querySelector(\"ic-toast-region\");\r\n function handleClick() {\r\n var toast = document.querySelector(\"#toast-01\");\r\n toastRegion.openToast = toast;\r\n }\r\n function handleErrorClick() {\r\n var toast = document.querySelector(\"#toast-02\");\r\n toastRegion.openToast = toast;\r\n }\r\n function handleAutoDismissClick() {\r\n var toast = document.querySelector(\"#toast-03\");\r\n toastRegion.openToast = toast;\r\n }\r\n </script>`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcButton onClick={handleClick}>Display default toast</IcButton>\r\n<IcButton onClick={handleErrorClick}>Display error toast</IcButton>\r\n<IcButton onClick={handleAutoDismissClick}>\r\n Display auto dismiss toast\r\n</IcButton>\r\n<IcToastRegion ref={toastRegionEl}>\r\n <IcToast heading=\"Your coffee is ready\" ref={toastEl} />\r\n <IcToast\r\n heading=\"There is no coffee left\"\r\n variant=\"error\"\r\n ref={errorToastEl}\r\n />\r\n <IcToast\r\n heading=\"Your coffee is ready\"\r\n dismissMode=\"automatic\"\r\n autoDismissTimeout={10000}\r\n ref={autoDismissToastEl}\r\n />\r\n</IcToastRegion>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `const toastRegionEl = useRef<HTMLIcToastRegionElement | null>(null);\r\nconst toastEl = useRef<HTMLIcToastElement | null>(null);\r\nconst errorToastEl = useRef<HTMLIcToastElement | null>(null);\r\nconst autoDismissToastEl = useRef<HTMLIcToastElement | null>(null);\r\nconst handleClick = () => {\r\n if (toastRegionEl.current && toastEl.current) {\r\n toastRegionEl.current.openToast = toastEl.current;\r\n }\r\n};\r\nconst handleErrorClick = () => {\r\n if (toastRegionEl.current && errorToastEl.current) {\r\n toastRegionEl.current.openToast = errorToastEl.current;\r\n }\r\n};\r\nconst handleAutoDismissClick = () => {\r\n if (toastRegionEl.current && autoDismissToastEl.current) {\r\n toastRegionEl.current.openToast = autoDismissToastEl.current;\r\n }\r\n};\r\nconst useStyles = createUseStyles({\r\n btnContainer: {\r\n display: \"flex\",\r\n flexWrap: \"wrap\",\r\n gap: \"var(--ic-space-xs)\",\r\n padding: \"var(--ic-space-md)\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nreturn (\r\n <>\r\n <div className={classes.btnContainer}>\r\n <IcButton onClick={handleClick}>Display default toast</IcButton>\r\n <IcButton onClick={handleErrorClick}>Display error toast</IcButton>\r\n <IcButton onClick={handleAutoDismissClick}>\r\n Display auto dismiss toast\r\n </IcButton>\r\n </div>\r\n <IcToastRegion ref={toastRegionEl}>\r\n <IcToast heading=\"Your coffee is ready\" ref={toastEl} />\r\n <IcToast\r\n heading=\"There is no coffee left\"\r\n variant=\"error\"\r\n ref={errorToastEl}\r\n />\r\n <IcToast\r\n heading=\"Your coffee is ready\"\r\n dismissMode=\"automatic\"\r\n autoDismissTimeout={10000}\r\n ref={autoDismissToastEl}\r\n />\r\n </IcToastRegion>\r\n </>\r\n)`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `const toastRegionEl = useRef(null);\r\nconst toastEl = useRef(null);\r\nconst errorToastEl = useRef(null);\r\nconst autoDismissToastEl = useRef(null);\r\nconst handleClick = () => {\r\n if (toastRegionEl.current && toastEl.current) {\r\n toastRegionEl.current.openToast = toastEl.current;\r\n }\r\n};\r\nconst handleErrorClick = () => {\r\n if (toastRegionEl.current && errorToastEl.current) {\r\n toastRegionEl.current.openToast = errorToastEl.current;\r\n }\r\n};\r\nconst handleAutoDismissClick = () => {\r\n if (toastRegionEl.current && autoDismissToastEl.current) {\r\n toastRegionEl.current.openToast = autoDismissToastEl.current;\r\n }\r\n};\r\nconst useStyles = createUseStyles({\r\n btnContainer: {\r\n display: \"flex\",\r\n flexWrap: \"wrap\",\r\n gap: \"var(--ic-space-xs)\",\r\n padding: \"var(--ic-space-md)\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nreturn (\r\n <>\r\n <div className={classes.btnContainer}>\r\n <IcButton onClick={handleClick}>Display default toast</IcButton>\r\n <IcButton onClick={handleErrorClick}>Display error toast</IcButton>\r\n <IcButton onClick={handleAutoDismissClick}>\r\n Display auto dismiss toast\r\n </IcButton>\r\n </div>\r\n <IcToastRegion ref={toastRegionEl}>\r\n <IcToast heading=\"Your coffee is ready\" ref={toastEl} />\r\n <IcToast\r\n heading=\"There is no coffee left\"\r\n variant=\"error\"\r\n ref={errorToastEl}\r\n />\r\n <IcToast\r\n heading=\"Your coffee is ready\"\r\n dismissMode=\"automatic\"\r\n autoDismissTimeout={10000}\r\n ref={autoDismissToastEl}\r\n />\r\n </IcToastRegion>\r\n </>\r\n)`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\nexport const QueuingToast = () => {\r\n const toastRegionEl = useRef(null);\r\n const toastEl = useRef(null);\r\n const errorToastEl = useRef(null);\r\n const autoDismissToastEl = useRef(null);\r\n const handleClick = () => {\r\n toastRegionEl.current.openToast = toastEl.current;\r\n };\r\n const handleErrorClick = () => {\r\n toastRegionEl.current.openToast = errorToastEl.current;\r\n };\r\n const handleAutoDismissClick = () => {\r\n toastRegionEl.current.openToast = autoDismissToastEl.current;\r\n };\r\n return (\r\n <>\r\n <div style={{ display: \"flex\", gap: \"0.5rem\" }}>\r\n <IcButton onClick={handleClick}>Display default toast</IcButton>\r\n <IcButton onClick={handleErrorClick}>Display error toast</IcButton>\r\n <IcButton onClick={handleAutoDismissClick}>\r\n Display auto dismiss toast\r\n </IcButton>\r\n </div>\r\n <IcToastRegion ref={toastRegionEl}>\r\n <IcToast heading=\"Your coffee is ready\" ref={toastEl} />\r\n <IcToast\r\n heading=\"There is no coffee left\"\r\n variant=\"error\"\r\n ref={errorToastEl}\r\n />\r\n <IcToast\r\n heading=\"Your coffee is ready\"\r\n dismissMode=\"automatic\"\r\n autoDismissTimeout={10000}\r\n ref={autoDismissToastEl}\r\n />\r\n </IcToastRegion>\r\n </>\r\n );\r\n};\r\n\r\n<ComponentPreview snippets={queuingSnippet}>\r\n <QueuingToast />\r\n</ComponentPreview>\r\n\r\n### Status variant\r\n\r\nexport const withVariantSnippet = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-button onclick=\"displayToast()\">Display success toast</ic-button>\r\n<ic-toast-region>\r\n <ic-toast variant=\"success\" id=\"toast-02\" heading=\"Your coffee is ready\" message=\"Please dismiss and collect\"></ic-toast>\r\n</ic-toast-region>`,\r\n long: `{shortCode}\r\n<script>\r\n const toastRegion = document.querySelector(\"ic-toast-region\");\r\n function displayToast() {\r\n const successToast = document.querySelector(\"#toast-02\");\r\n toastRegion.openToast = successToast;\r\n }\r\n</script>`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcButton onClick={handleClick}>Display success toast</IcButton>\r\n<IcToastRegion ref={toastRegionEl}>\r\n <IcToast\r\n heading='Your coffee is ready'\r\n ref={toastEl}\r\n message='Please dismiss and collect'\r\n variant='success'\r\n />\r\n</IcToastRegion>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `const toastRegionEl = useRef<HTMLIcToastRegionElement | null>(null);\r\nconst toastEl = useRef<HTMLIcToastElement | null>(null);\r\nconst handleClick = () => {\r\n if (toastRegionEl.current && toastEl.current) {\r\n toastRegionEl.current.openToast = toastEl.current;\r\n }\r\n};\r\nreturn (\r\n <>\r\n {shortCode}\r\n </>\r\n)`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `const toastRegionEl = useRef(null);\r\nconst toastEl = useRef(null);\r\nconst handleClick = () => {\r\n if (toastRegionEl.current && toastEl.current) {\r\n toastRegionEl.current.openToast = toastEl.current;\r\n }\r\n};\r\nreturn (\r\n <>\r\n {shortCode}\r\n </>\r\n)`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\nexport const WithVariantToast = () => {\r\n const toastRegionEl = useRef(null);\r\n const toastEl = useRef(null);\r\n const handleClick = () => {\r\n toastRegionEl.current.openToast = toastEl.current;\r\n };\r\n return (\r\n <>\r\n <IcButton onClick={handleClick}>Display success toast</IcButton>\r\n <IcToastRegion ref={toastRegionEl}>\r\n <IcToast\r\n heading=\"Your coffee is ready\"\r\n ref={toastEl}\r\n message=\"Please dismiss and collect\"\r\n variant=\"success\"\r\n />\r\n </IcToastRegion>\r\n </>\r\n );\r\n};\r\n\r\n<ComponentPreview snippets={withVariantSnippet}>\r\n <WithVariantToast />\r\n</ComponentPreview>\r\n\r\n### Multi-line\r\n\r\nexport const withMultilineSnippet = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-button onclick=\"displayToast()\">Display multi-line toast</ic-button>\r\n<ic-toast-region>\r\n <ic-toast id=\"toast-03\" heading=\"Your coffee is ready\" message=\"Please dismiss and come to collect your delicious coffee from the barista right away before it gets cold.\"></ic-toast>\r\n</ic-toast-region>`,\r\n long: `{shortCode}\r\n<script>\r\n const toastRegion = document.querySelector(\"ic-toast-region\");\r\n function displayToast() {\r\n const multilineToast = document.querySelector(\"#toast-03\");\r\n toastRegion.openToast = multilineToast;\r\n }\r\n</script>`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcButton onClick={handleClick}>Display multi-line toast</IcButton>\r\n<IcToastRegion ref={toastRegionEl}>\r\n <IcToast\r\n heading='Your coffee is ready'\r\n ref={toastEl}\r\n message='Please dismiss and come to collect your delicious coffee from the barista right away before it gets cold.'\r\n />\r\n</IcToastRegion>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `const toastRegionEl = useRef<HTMLIcToastRegionElement | null>(null);\r\nconst toastEl = useRef<HTMLIcToastElement | null>(null);\r\nconst handleClick = () => {\r\n if (toastRegionEl.current && toastEl.current) {\r\n toastRegionEl.current.openToast = toastEl.current;\r\n }\r\n};\r\nreturn (\r\n <>\r\n {shortCode}\r\n </>\r\n)`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `const toastRegionEl = useRef(null);\r\nconst toastEl = useRef(null);\r\nconst handleClick = () => {\r\n if (toastRegionEl.current && toastEl.current) {\r\n toastRegionEl.current.openToast = toastEl.current;\r\n }\r\n};\r\nreturn (\r\n <>\r\n {shortCode}\r\n </>\r\n)`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\nexport const MultilineToast = () => {\r\n const toastRegionEl = useRef(null);\r\n const toastEl = useRef(null);\r\n const handleClick = () => {\r\n toastRegionEl.current.openToast = toastEl.current;\r\n };\r\n return (\r\n <>\r\n <IcButton onClick={handleClick}>Display multi-line toast</IcButton>\r\n <IcToastRegion ref={toastRegionEl}>\r\n <IcToast\r\n heading=\"Your coffee is ready\"\r\n ref={toastEl}\r\n message=\"Please dismiss and come to collect your delicious coffee from the barista right away before it gets cold.\"\r\n />\r\n </IcToastRegion>\r\n </>\r\n );\r\n};\r\n\r\n<ComponentPreview snippets={withMultilineSnippet}>\r\n <MultilineToast />\r\n</ComponentPreview>\r\n\r\n### Slotted 'action' toast\r\n\r\nexport const slottedActionsSnippet = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-button onclick=\"displayButtonToast()\">Display slotted buttons toast</ic-button>\r\n<ic-button onclick=\"displayLinkToast()\">Display slotted buttons toast</ic-button>\r\n<ic-toast-region>\r\n <ic-toast id=\"toast-04\" heading=\"Your order could not be placed\" message=\"Please try again\" variant='warning'>\r\n <ic-button slot='action' appearance='light'>Retry</ic-button>\r\n </ic-toast>\r\n <ic-toast id=\"toast-05\" heading=\"Your order could not be placed\" message=\"Please try again\" variant='warning'>\r\n <ic-link slot='action' appearance='light'>Retry</ic-link>\r\n </ic-toast>\r\n</ic-toast-region>`,\r\n long: `.btn-container {\r\n display: flex;\r\n gap: var(--ic-space-xs);\r\n flex-wrap: wrap;\r\n padding: var(--ic-space-md);\r\n }\r\n</style>\r\n<body>\r\n <div class=\"btn-container\">\r\n <ic-button onclick=\"displayButtonToast()\"\r\n >Display slotted buttons toast</ic-button\r\n >\r\n <ic-button onclick=\"displayLinkToast()\"\r\n >Display slotted buttons toast</ic-button\r\n >\r\n </div>\r\n <ic-toast-region>\r\n <ic-toast\r\n id=\"toast-04\"\r\n heading=\"Your order could not be placed\"\r\n message=\"Please try again\"\r\n variant=\"warning\"\r\n >\r\n <ic-button slot=\"action\" appearance=\"light\">Retry</ic-button>\r\n </ic-toast>\r\n <ic-toast\r\n id=\"toast-05\"\r\n heading=\"Your order could not be placed\"\r\n message=\"Please try again\"\r\n variant=\"warning\"\r\n >\r\n <ic-link slot=\"action\" appearance=\"light\">Retry</ic-link>\r\n </ic-toast>\r\n </ic-toast-region>\r\n <script>\r\n const toastRegion = document.querySelector(\"ic-toast-region\");\r\n function displayButtonToast() {\r\n const slottedButtonToast = document.querySelector(\"#toast-04\");\r\n toastRegion.openToast = slottedButtonToast;\r\n }\r\n function displayLinkToast() {\r\n const slottedLinkToast = document.querySelector(\"#toast-05\");\r\n toastRegion.openToast = slottedLinkToast;\r\n }\r\n </script>`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcButton onClick={handleButtonToastClick}>Display slotted button toast</IcButton>\r\n<IcButton onClick={handleLinkToastClick}>Display slotted link toast</IcButton>\r\n<IcToastRegion ref={toastRegionEl}>\r\n <IcToast\r\n heading='Your order could not be placed'\r\n ref={buttonToastEl}\r\n message='Please try again'\r\n variant='warning'\r\n >\r\n <IcButton slot='action' appearance='light'>Retry</IcButton>\r\n </IcToast>\r\n <IcToast\r\n heading='Your order could not be placed'\r\n ref={linkToastEl}\r\n message='Please try again'\r\n variant='warning'\r\n >\r\n <IcLink href=\"#\" slot=\"action\" appearance=\"light\">Retry</IcLink>\r\n </IcToast>\r\n</IcToastRegion>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `const toastRegionEl = useRef<HTMLIcToastRegionElement | null>(null);\r\nconst buttonToastEl = useRef<HTMLIcToastElement | null>(null);\r\nconst linkToastEl = useRef<HTMLIcToastElement | null>(null);\r\nconst handleButtonToastClick = () => {\r\n if (toastRegionEl.current && buttonToastEl.current) {\r\n toastRegionEl.current.openToast = buttonToastEl.current;\r\n }\r\n};\r\nconst handleLinkToastClick = () => {\r\n if (toastRegionEl.current && linkToastEl.current) {\r\n toastRegionEl.current.openToast = linkToastEl.current;\r\n }\r\n};\r\nconst useStyles = createUseStyles({\r\n btnContainer: {\r\n display: \"flex\",\r\n flexWrap: \"wrap\",\r\n gap: \"var(--ic-space-xs)\",\r\n padding: \"var(--ic-space-md)\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nreturn (\r\n <>\r\n <div className={classes.btnContainer}>\r\n <IcButton onClick={handleButtonToastClick}>\r\n Display slotted button toast\r\n </IcButton>\r\n <IcButton onClick={handleLinkToastClick}>\r\n Display slotted link toast\r\n </IcButton>\r\n </div>\r\n <IcToastRegion ref={toastRegionEl}>\r\n <IcToast\r\n heading=\"Your order could not be placed\"\r\n ref={buttonToastEl}\r\n message=\"Please try again\"\r\n variant=\"warning\"\r\n >\r\n <IcButton slot=\"action\" appearance=\"light\">\r\n Retry\r\n </IcButton>\r\n </IcToast>\r\n <IcToast\r\n heading=\"Your order could not be placed\"\r\n ref={linkToastEl}\r\n message=\"Please try again\"\r\n variant=\"warning\"\r\n >\r\n <IcLink href=\"#\" slot=\"action\" appearance=\"light\">\r\n Retry\r\n </IcLink>\r\n </IcToast>\r\n </IcToastRegion>\r\n </>\r\n)`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `const toastRegionEl = useRef(null);\r\nconst buttonToastEl = useRef(null);\r\nconst linkToastEl = useRef(null);\r\nconst handleButtonToastClick = () => {\r\n if (toastRegionEl.current && buttonToastEl.current) {\r\n toastRegionEl.current.openToast = buttonToastEl.current;\r\n }\r\n};\r\nconst handleLinkToastClick = () => {\r\n if (toastRegionEl.current && linkToastEl.current) {\r\n toastRegionEl.current.openToast = linkToastEl.current;\r\n }\r\n};\r\nconst useStyles = createUseStyles({\r\n btnContainer: {\r\n display: \"flex\",\r\n flexWrap: \"wrap\",\r\n gap: \"var(--ic-space-xs)\",\r\n padding: \"var(--ic-space-md)\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nreturn (\r\n <>\r\n <div className={classes.btnContainer}>\r\n <IcButton onClick={handleButtonToastClick}>\r\n Display slotted button toast\r\n </IcButton>\r\n <IcButton onClick={handleLinkToastClick}>\r\n Display slotted link toast\r\n </IcButton>\r\n </div>\r\n <IcToastRegion ref={toastRegionEl}>\r\n <IcToast\r\n heading=\"Your order could not be placed\"\r\n ref={buttonToastEl}\r\n message=\"Please try again\"\r\n variant=\"warning\"\r\n >\r\n <IcButton slot=\"action\" appearance=\"light\">\r\n Retry\r\n </IcButton>\r\n </IcToast>\r\n <IcToast\r\n heading=\"Your order could not be placed\"\r\n ref={linkToastEl}\r\n message=\"Please try again\"\r\n variant=\"warning\"\r\n >\r\n <IcLink href=\"#\" slot=\"action\" appearance=\"light\">\r\n Retry\r\n </IcLink>\r\n </IcToast>\r\n </IcToastRegion>\r\n </>\r\n)`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\nexport const SlottedActionsToast = () => {\r\n const toastRegionEl = useRef(null);\r\n const buttonToastEl = useRef(null);\r\n const linkToastEl = useRef(null);\r\n const handleButtonToastClick = () => {\r\n toastRegionEl.current.openToast = buttonToastEl.current;\r\n };\r\n const handleLinkToastClick = () => {\r\n toastRegionEl.current.openToast = linkToastEl.current;\r\n };\r\n return (\r\n <>\r\n <div style={{ display: \"flex\", gap: \"0.5rem\" }}>\r\n <IcButton onClick={handleButtonToastClick}>\r\n Display slotted button toast\r\n </IcButton>\r\n <IcButton onClick={handleLinkToastClick}>\r\n Display slotted link toast\r\n </IcButton>\r\n </div>\r\n <IcToastRegion ref={toastRegionEl}>\r\n <IcToast\r\n heading=\"Your order could not be placed\"\r\n ref={buttonToastEl}\r\n message=\"Please try again\"\r\n variant=\"warning\"\r\n >\r\n <IcButton slot=\"action\" appearance=\"light\">\r\n Retry\r\n </IcButton>\r\n </IcToast>\r\n <IcToast\r\n heading=\"Your order could not be placed\"\r\n ref={linkToastEl}\r\n message=\"Please try again\"\r\n variant=\"warning\"\r\n >\r\n <IcLink href=\"#\" slot=\"action\" appearance=\"light\">\r\n Retry\r\n </IcLink>\r\n </IcToast>\r\n </IcToastRegion>\r\n </>\r\n );\r\n};\r\n\r\n<ComponentPreview snippets={slottedActionsSnippet}>\r\n <SlottedActionsToast />\r\n</ComponentPreview>\r\n\r\n### Auto-dismiss\r\n\r\nexport const autoDismissSnippet = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-button onclick=\"displayToast()\">Display auto-dismiss toast</ic-button>\r\n<ic-toast-region>\r\n <ic-toast\r\n id=\"toast-06\"\r\n heading=\"Your coffee is ready\"\r\n dismiss-mode=\"automatic\"\r\n auto-dismiss-timeout=\"10000\"\r\n variant=\"info\"\r\n ></ic-toast>\r\n</ic-toast-region>`,\r\n long: `{shortCode}\r\n<script>\r\n const toastRegion = document.querySelector(\"ic-toast-region\");\r\n function displayToast() {\r\n var toast = document.querySelector(\"#toast-06\");\r\n toastRegion.openToast = toast;\r\n }\r\n</script>`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcButton onClick={handleClick}>Display auto-dismiss toast</IcButton>\r\n<IcToastRegion ref={toastRegionEl}>\r\n <IcToast\r\n heading=\"Your coffee is ready\"\r\n ref={toastEl}\r\n dismissMode=\"automatic\"\r\n autoDismissTimeout={10000}\r\n variant=\"info\"\r\n />\r\n</IcToastRegion>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `const toastRegionEl = useRef<HTMLIcToastRegionElement | null>(null);\r\nconst toastEl = useRef<HTMLIcToastElement | null>(null);\r\nconst handleClick = () => {\r\n if (toastRegionEl.current && toastEl.current) {\r\n toastRegionEl.current.openToast = toastEl.current;\r\n }\r\n};\r\nreturn (\r\n <>\r\n {shortCode}\r\n </>\r\n)`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `const toastRegionEl = useRef(null);\r\nconst toastEl = useRef(null);\r\nconst handleClick = () => {\r\n if (toastRegionEl.current && toastEl.current) {\r\n toastRegionEl.current.openToast = toastEl.current;\r\n }\r\n};\r\nreturn (\r\n <>\r\n {shortCode}\r\n </>\r\n)`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\nexport const AutoDismissToast = () => {\r\n const toastRegionEl = useRef(null);\r\n const toastEl = useRef(null);\r\n const handleClick = () => {\r\n toastRegionEl.current.openToast = toastEl.current;\r\n };\r\n return (\r\n <>\r\n <IcButton onClick={handleClick}>Display auto-dismiss toast</IcButton>\r\n <IcToastRegion ref={toastRegionEl}>\r\n <IcToast\r\n heading=\"Your coffee is ready\"\r\n ref={toastEl}\r\n dismissMode=\"automatic\"\r\n autoDismissTimeout={10000}\r\n variant=\"info\"\r\n />\r\n </IcToastRegion>\r\n </>\r\n );\r\n};\r\n\r\n<ComponentPreview snippets={autoDismissSnippet}>\r\n <AutoDismissToast />\r\n</ComponentPreview>\r\n\r\n### Custom neutral icon and aria-labels\r\n\r\nexport const customIconAriaLabelsSnippet = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-button onclick=\"displayToast()\">Display auto-dismiss toast</ic-button>\r\n<ic-toast-region>\r\n <ic-toast\r\n id=\"toast-07\"\r\n heading=\"Your coffee is ready\"\r\n variant=\"neutral\"\r\n neutral-icon-aria-label=\"It is time to collect your coffee\"\r\n dismiss-button-aria-label=\"Dismiss me\"\r\n >\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n slot=\"neutral-icon\"\r\n viewBox=\"0 0 24 24\"\r\n >\r\n <title>coffee-outline</title>\r\n <path\r\n d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"\r\n />\r\n </svg>\r\n </ic-toast>\r\n</ic-toast-region>`,\r\n long: `{shortCode}\r\n<script>\r\n const toastRegion = document.querySelector(\"ic-toast-region\");\r\n function displayToast() {\r\n var toast = document.querySelector(\"#toast-07\");\r\n toastRegion.openToast = toast;\r\n }\r\n</script>`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcButton onClick={handleClick}>\r\n Display custom icon and aria-label toast\r\n</IcButton>\r\n<IcToastRegion ref={toastRegionEl}>\r\n <IcToast\r\n heading=\"Your coffee is ready\"\r\n ref={toastEl}\r\n variant=\"neutral\"\r\n neutralIconAriaLabel=\"It is time to collect your coffee\"\r\n dismissButtonAriaLabel=\"Dismiss me\"\r\n >\r\n <SlottedSVG slot=\"neutral-icon\">\r\n <title>coffee-outline</title>\r\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\r\n </SlottedSVG>\r\n </IcToast>\r\n</IcToastRegion>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `const toastRegionEl = useRef<HTMLIcToastRegionElement | null>(null);\r\nconst toastEl = useRef<HTMLIcToastElement | null>(null);\r\nconst handleClick = () => {\r\n if (toastRegionEl.current && toastEl.current) {\r\n toastRegionEl.current.openToast = toastEl.current;\r\n }\r\n};\r\nreturn (\r\n <>\r\n {shortCode}\r\n </>\r\n)`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `const toastRegionEl = useRef(null);\r\nconst toastEl = useRef(null);\r\nconst handleClick = () => {\r\n if (toastRegionEl.current && toastEl.current) {\r\n toastRegionEl.current.openToast = toastEl.current;\r\n }\r\n};\r\nreturn (\r\n <>\r\n {shortCode}\r\n </>\r\n)`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\nexport const CustomIconAriaLabels = () => {\r\n const toastRegionEl = useRef(null);\r\n const toastEl = useRef(null);\r\n const handleClick = () => {\r\n toastRegionEl.current.openToast = toastEl.current;\r\n };\r\n return (\r\n <>\r\n <IcButton onClick={handleClick}>\r\n Display custom icon and aria-labels toast\r\n </IcButton>\r\n <IcToastRegion ref={toastRegionEl}>\r\n <IcToast\r\n heading=\"Your coffee is ready\"\r\n ref={toastEl}\r\n variant=\"neutral\"\r\n neutralIconAriaLabel=\"It is time to collect your coffee\"\r\n dismissButtonAriaLabel=\"Dismiss me\"\r\n >\r\n <SlottedSVG slot=\"neutral-icon\">\r\n <title>coffee-outline</title>\r\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\r\n </SlottedSVG>\r\n </IcToast>\r\n </IcToastRegion>\r\n </>\r\n );\r\n};\r\n\r\n<ComponentPreview snippets={customIconAriaLabelsSnippet}>\r\n <CustomIconAriaLabels />\r\n</ComponentPreview>\r\n",
"path": "/components/toast/code",
"date": "2024-05-31",
"title": "Toast",
@@ -4075,11 +4075,11 @@
}
],
"meta": {
- "relativePath": "components/toasts/code.mdx",
- "createdAt": "2024-11-06T10:27:49.408Z",
- "lastModified": "2024-11-06T10:19:00.148Z",
- "size": 28682,
- "formattedSize": "28.0 KB"
+ "relativePath": "components\\toasts\\code.mdx",
+ "createdAt": "2024-12-04T13:23:54.122Z",
+ "lastModified": "2024-12-04T13:23:54.122Z",
+ "size": 29715,
+ "formattedSize": "29.0 KB"
}
},
{
@@ -4108,9 +4108,9 @@
],
"tags": ["Snackbar"],
"meta": {
- "relativePath": "components/toasts/guidance.mdx",
- "createdAt": "2024-11-06T10:27:49.408Z",
- "lastModified": "2024-11-06T10:19:00.148Z",
+ "relativePath": "components\\toasts\\guidance.mdx",
+ "createdAt": "2024-11-05T11:57:54.073Z",
+ "lastModified": "2024-11-05T11:57:54.073Z",
"size": 7241,
"formattedSize": "7.1 KB"
}
@@ -4139,16 +4139,16 @@
}
],
"meta": {
- "relativePath": "components/toggle-buttons/accessibility.mdx",
- "createdAt": "2024-11-06T10:27:49.408Z",
- "lastModified": "2024-11-06T10:19:00.160Z",
+ "relativePath": "components\\toggle-buttons\\accessibility.mdx",
+ "createdAt": "2024-11-05T11:57:54.099Z",
+ "lastModified": "2024-11-05T11:57:54.099Z",
"size": 3707,
"formattedSize": "3.6 KB"
}
},
{
"id": "components\\toggle-buttons\\codex",
- "contents": "\nimport {\n IcToggleButton,\n IcToggleButtonGroup,\n SlottedSVG,\n IcBadge,\n} from \"@ukic/react\";\n\n## Component demo\n\nexport const snippetsDefault = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-toggle-button\n id=\"toggle-btn\"\n label=\"Switch to oat milk\"\n></ic-toggle-button>`,\n long: `.toggle-btn-container {\n padding: var(--ic-space-md);\n }\n</style>\n<body>\n <div class=\"toggle-btn-container\">\n {shortCode}\n </div>\n <script>\n const btn = document.querySelector('#toggle-btn');\n btn.addEventListener(\"icToggleChecked\", function (event) {\n console.log(event.detail.checked);\n });\n </script>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcToggleButton\n label=\"Switch to oat milk\"\n onIcToggleChecked={(event) => console.log(event.detail.checked)}\n/>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n padding: \"var(--ic-space-md)\",\n },\n});\nconst classes = useStyles();\nreturn ( \n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n padding: \"var(--ic-space-md)\",\n },\n});\nconst classes = useStyles();\nreturn ( \n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={snippetsDefault}>\n <IcToggleButton\n label=\"Switch to oat milk\"\n onIcToggleChecked={(event) => console.log(event.detail.checked)}\n />\n</ComponentPreview>\n\n## Toggle button details\n\n<ComponentDetails component=\"ic-toggle-button\" />\n\n## Toggle button group details\n\n<ComponentDetails component=\"ic-toggle-button-group\" />\n\n## Variants\n\n### Other states\n\nexport const snippetsOtherStates = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-toggle-button\n label=\"Switch to oat milk\"\n disabled=\"true\"\n></ic-toggle-button>\n<ic-toggle-button\n label=\"Switch to oat milk\"\n disabled=\"true\"\n toggle-checked=\"true\"\n></ic-toggle-button>\n<ic-toggle-button\n label=\"Switch to oat milk\"\n loading=\"true\"\n></ic-toggle-button>\n<ic-toggle-button\n label=\"Switch to oat milk\"\n loading=\"true\"\n toggle-checked=\"true\"\n></ic-toggle-button>`,\n long: `.toggle-btn-container {\n display: flex;\n flex-wrap: wrap;\n padding: var(--ic-space-md);\n gap: var(--ic-space-xs);\n }\n</style>\n<body>\n <div class=\"toggle-btn-container\">\n {shortCode}\n </div>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcToggleButton label=\"Switch to oat milk\" disabled />\n<IcToggleButton label=\"Switch to oat milk\" disabled toggleChecked />\n<IcToggleButton label=\"Switch to oat milk\" loading />\n<IcToggleButton label=\"Switch to oat milk\" loading toggleChecked />`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n display: \"flex\",\n flexWrap: \"wrap\",\n padding: \"var(--ic-space-md)\",\n gap: \"var(--ic-space-xs)\",\n },\n});\nconst classes = useStyles();\nreturn ( \n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n display: \"flex\",\n flexWrap: \"wrap\",\n padding: \"var(--ic-space-md)\",\n gap: \"var(--ic-space-xs)\",\n },\n});\nconst classes = useStyles();\nreturn ( \n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview style={{ gap: \"0.5rem\" }} snippets={snippetsOtherStates}>\n <IcToggleButton label=\"Switch to oat milk\" disabled />\n <IcToggleButton label=\"Switch to oat milk\" disabled toggleChecked />\n <IcToggleButton label=\"Switch to oat milk\" loading />\n <IcToggleButton label=\"Switch to oat milk\" loading toggleChecked />\n</ComponentPreview>\n\n### With icon\n\nexport const snippetsWithIcon = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-toggle-button label=\"Switch to oat milk\">\n <svg slot=\"icon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <path\n d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"\n />\n </svg>\n</ic-toggle-button>`,\n long: `.toggle-btn-container {\n padding: var(--ic-space-md);\n }\n</style>\n<body>\n <div class=\"toggle-btn-container\">\n {shortCode}\n </div>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcToggleButton label=\"Switch to oat milk\">\n <SlottedSVG\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n fill=\"#000000\"\n >\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n </SlottedSVG>\n</IcToggleButton>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n padding: \"var(--ic-space-md)\",\n },\n});\nconst classes = useStyles();\nreturn ( \n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n padding: \"var(--ic-space-md)\",\n },\n});\nconst classes = useStyles();\nreturn ( \n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={snippetsWithIcon}>\n <IcToggleButton label=\"Switch to oat milk\">\n <SlottedSVG\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n fill=\"#000000\"\n >\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n </SlottedSVG>\n </IcToggleButton>\n</ComponentPreview>\n\n### Sizing\n\nexport const snippetsSizing = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-toggle-button\n label=\"Switch to oat milk\"\n size=\"small\"\n></ic-toggle-button>\n<ic-toggle-button label=\"Switch to oat milk\"></ic-toggle-button>\n<ic-toggle-button\n label=\"Switch to oat milk\"\n size=\"large\"\n></ic-toggle-button>`,\n long: `.parent-container {\n display: flex;\n flex-wrap: wrap;\n padding: var(--ic-space-md);\n gap: var(--ic-space-xs);\n }\n</style>\n<body>\n <div class=\"parent-container\">\n {shortCode}\n </div>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcToggleButton label=\"Switch to oat milk\" size=\"small\" />\n<IcToggleButton label=\"Switch to oat milk\" size=\"default\" />\n<IcToggleButton label=\"Switch to oat milk\" size=\"large\" />`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n display: \"flex\",\n flexWrap: \"wrap\",\n padding: \"var(--ic-space-md)\",\n gap: \"var(--ic-space-xs)\",\n },\n});\nconst classes = useStyles();\nreturn ( \n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n display: \"flex\",\n flexWrap: \"wrap\",\n padding: \"var(--ic-space-md)\",\n gap: \"var(--ic-space-xs)\",\n },\n});\nconst classes = useStyles();\nreturn ( \n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview style={{ gap: \"0.5rem\" }} snippets={snippetsSizing}>\n <IcToggleButton label=\"Switch to oat milk\" size=\"small\" />\n <IcToggleButton label=\"Switch to oat milk\" size=\"default\" />\n <IcToggleButton label=\"Switch to oat milk\" size=\"large\" />\n</ComponentPreview>\n\n### With badge\n\nexport const snippetsWithBadge = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-toggle-button label=\"Switch to oat milk\">\n <ic-badge text-label=\"1\" slot=\"badge\" variant=\"success\"></ic-badge>\n</ic-toggle-button>`,\n long: `.parent-container {\n padding: var(--ic-space-md);\n }\n</style>\n<body>\n <div class=\"parent-container\">\n {shortCode}\n </div>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcToggleButton label=\"Switch to oat milk\">\n <IcBadge textLabel=\"1\" slot=\"badge\" variant=\"success\" />\n</IcToggleButton>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n padding: \"var(--ic-space-md)\",\n },\n});\nconst classes = useStyles();\nreturn ( \n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n padding: \"var(--ic-space-md)\",\n },\n});\nconst classes = useStyles();\nreturn ( \n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={snippetsWithBadge}>\n <IcToggleButton label=\"Switch to oat milk\">\n <IcBadge textLabel=\"1\" slot=\"badge\" variant=\"success\" />\n </IcToggleButton>\n</ComponentPreview>\n\n### Dark\n\nexport const snippetsDark = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-toggle-button\n label=\"Switch to oat milk\"\n appearance=\"dark\"\n></ic-toggle-button>\n<ic-toggle-button\n label=\"Switch to oat milk\"\n appearance=\"dark\"\n loading=\"true\"\n></ic-toggle-button>\n<ic-toggle-button\n label=\"Switch to oat milk\"\n appearance=\"dark\"\n loading=\"true\"\n toggle-checked=\"true\"\n></ic-toggle-button>`,\n long: `.parent-container {\n display: flex;\n flex-wrap: wrap;\n padding: var(--ic-space-md);\n gap: var(--ic-space-xs);\n }\n</style>\n<body>\n <div class=\"parent-container\">\n {shortCode}\n </div>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcToggleButton label=\"Switch to oat milk\" appearance=\"dark\" />\n<IcToggleButton label=\"Switch to oat milk\" appearance=\"dark\" loading />\n<IcToggleButton\n label=\"Switch to oat milk\"\n appearance=\"dark\"\n loading\n toggleChecked\n/>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n display: \"flex\",\n flexWrap: \"wrap\",\n padding: \"var(--ic-space-md)\",\n gap: \"var(--ic-space-xs)\",\n },\n});\nconst classes = useStyles();\nreturn ( \n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n display: \"flex\",\n flexWrap: \"wrap\",\n padding: \"var(--ic-space-md)\",\n gap: \"var(--ic-space-xs)\",\n },\n});\nconst classes = useStyles();\nreturn ( \n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview style={{ gap: \"0.5rem\" }} snippets={snippetsDark}>\n <IcToggleButton label=\"Switch to oat milk\" appearance=\"dark\" />\n <IcToggleButton label=\"Switch to oat milk\" appearance=\"dark\" loading />\n <IcToggleButton\n label=\"Switch to oat milk\"\n appearance=\"dark\"\n loading\n toggleChecked\n />\n</ComponentPreview>\n\n### Light\n\nexport const snippetsLight = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-toggle-button label=\"Switch to oat milk\" appearance=\"light\"></ic-toggle-button>\n<ic-toggle-button label=\"Switch to oat milk\" appearance=\"light\" loading=\"true\"></ic-toggle-button>\n<ic-toggle-button label=\"Switch to oat milk\" appearance=\"light\" loading=\"true\" toggle-checked=\"true\"></ic-toggle-button>`,\n long: `.dark-background {\n display: flex;\n flex-wrap: wrap;\n background-color: #2c2f34;\n padding: var(--ic-space-md);\n gap: var(--ic-space-xs);\n }\n</style>\n<body>\n <div class=\"dark-background\">\n {shortCode}\n </div>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcToggleButton label=\"Switch to oat milk\" appearance=\"light\" />\n<IcToggleButton label=\"Switch to oat milk\" appearance=\"light\" loading />\n<IcToggleButton\n label=\"Switch to oat milk\"\n appearance=\"light\"\n loading\n toggleChecked\n/>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n darkBackground: {\n display: \"flex\",\n flexWrap: \"wrap\",\n backgroundColor: \"#2c2f34\",\n padding: \"var(--ic-space-md)\",\n gap: \"var(--ic-space-xs)\",\n },\n});\nconst classes = useStyles();\nreturn ( \n <div className={classes.darkBackground}>\n {shortCode}\n </div>\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n darkBackground: {\n display: \"flex\",\n flexWrap: \"wrap\",\n backgroundColor: \"#2c2f34\",\n padding: \"var(--ic-space-md)\",\n gap; \"var(--ic-space-xs)\",\n },\n});\nconst classes = useStyles();\nreturn ( \n <div className={classes.darkBackground}>\n {shortCode}\n </div>\n)`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview\n style={{ backgroundColor: \"#2c2f34\", gap: \"0.5rem\" }}\n snippets={snippetsLight}\n>\n <IcToggleButton label=\"Switch to oat milk\" appearance=\"light\" />\n <IcToggleButton label=\"Switch to oat milk\" appearance=\"light\" loading />\n <IcToggleButton\n label=\"Switch to oat milk\"\n appearance=\"light\"\n loading\n toggleChecked\n />\n</ComponentPreview>\n\n### Full width\n\nexport const snippetsFullWidth = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-toggle-button-group\n accessible-label=\"Alternatives to milk selection\"\n full-width=\"true\"\n select-type=\"single\"\n>\n <ic-toggle-button label=\"Switch to oat milk\"></ic-toggle-button>\n <ic-toggle-button label=\"Switch to almond milk\"></ic-toggle-button>\n <ic-toggle-button label=\"Switch to coconut milk\"></ic-toggle-button>\n <ic-toggle-button label=\"Switch to rice milk\"></ic-toggle-button>\n</ic-toggle-button-group>`,\n long: `.parent-container {\n padding: var(--ic-space-md);\n }\n</style>\n<body>\n <div class=\"parent-container\">\n {shortCode}\n </div>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcToggleButtonGroup\n accessibleLabel=\"Alternatives to milk selection\"\n fullWidth\n selectType=\"single\"\n>\n <IcToggleButton label=\"Switch to oat milk\" />\n <IcToggleButton label=\"Switch to almond milk\" />\n <IcToggleButton label=\"Switch to coconut milk\" />\n <IcToggleButton label=\"Switch to rice milk\" />\n</IcToggleButtonGroup>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n padding: \"var(--ic-space-md)\",\n },\n});\nconst classes = useStyles();\nreturn ( \n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n padding: \"var(--ic-space-md)\",\n },\n});\nconst classes = useStyles();\nreturn ( \n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview style={{ display: \"block\" }} snippets={snippetsFullWidth}>\n <IcToggleButtonGroup\n accessibleLabel=\"Alternatives to milk selection\"\n fullWidth\n selectType=\"single\"\n >\n <IcToggleButton label=\"Switch to oat milk\" />\n <IcToggleButton label=\"Switch to almond milk\" />\n <IcToggleButton label=\"Switch to coconut milk\" />\n <IcToggleButton label=\"Switch to rice milk\" />\n </IcToggleButtonGroup>\n</ComponentPreview>\n\n### Icon only\n\nexport const snippetsIconOnly = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-toggle-button-group\n accessible-label=\"Coffee icon variants\"\n variant=\"icon\"\n>\n <ic-toggle-button accessible-label=\"Coffee icon\" variant=\"icon\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n fill=\"#000000\"\n >\n <path\n d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"\n />\n </svg>\n </ic-toggle-button>\n <ic-toggle-button\n accessible-label=\"Loading coffee\"\n variant=\"icon\"\n loading=\"true\"\n >\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n fill=\"#000000\"\n >\n <path\n d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"\n />\n </svg>\n </ic-toggle-button>\n <ic-toggle-button\n accessible-label=\"Disabled coffee\"\n variant=\"icon\"\n disabled=\"true\"\n >\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n fill=\"#000000\"\n >\n <path\n d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"\n />\n </svg>\n </ic-toggle-button>\n</ic-toggle-button-group>`,\n long: `.parent-container {\n padding: var(--ic-space-md);\n }\n</style>\n<body>\n <div class=\"parent-container\">\n {shortCode}\n </div>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcToggleButtonGroup accessibleLabel=\"Coffee icon variants\" variant=\"icon\">\n <IcToggleButton variant=\"icon\" accessibleLabel=\"Coffee icon\">\n <SlottedSVG\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n fill=\"#000000\"\n >\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n </SlottedSVG>\n </IcToggleButton>\n <IcToggleButton variant=\"icon\" accessibleLabel=\"Loading coffee\" loading>\n <SlottedSVG\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n fill=\"#000000\"\n >\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n </SlottedSVG>\n </IcToggleButton>\n <IcToggleButton variant=\"icon\" accessibleLabel=\"Disabled coffee\" disabled>\n <SlottedSVG\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n fill=\"#000000\"\n >\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n </SlottedSVG>\n </IcToggleButton>\n</IcToggleButtonGroup>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n padding: \"var(--ic-space-md)\",\n },\n});\nconst classes = useStyles();\nreturn ( \n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n padding: \"var(--ic-space-md)\",\n },\n});\nconst classes = useStyles();\nreturn ( \n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={snippetsIconOnly}>\n <IcToggleButtonGroup accessibleLabel=\"Coffee icon variants\" variant=\"icon\">\n <IcToggleButton variant=\"icon\" accessibleLabel=\"Coffee icon\">\n <SlottedSVG\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n fill=\"#000000\"\n >\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n </SlottedSVG>\n </IcToggleButton>\n <IcToggleButton variant=\"icon\" accessibleLabel=\"Loading coffee\" loading>\n <SlottedSVG\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n fill=\"#000000\"\n >\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n </SlottedSVG>\n </IcToggleButton>\n <IcToggleButton variant=\"icon\" accessibleLabel=\"Disabled coffee\" disabled>\n <SlottedSVG\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n fill=\"#000000\"\n >\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n </SlottedSVG>\n </IcToggleButton>\n </IcToggleButtonGroup>\n</ComponentPreview>\n\n### Icon right\n\nexport const snippetsIconRight = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-toggle-button-group\n accessible-label=\"Alternatives to milk selection\"\n icon-placement=\"right\"\n>\n <ic-toggle-button label=\"Switch to oat milk\">\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n fill=\"#000000\"\n >\n <path\n d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"\n />\n </svg>\n </ic-toggle-button>\n <ic-toggle-button label=\"Switch to almond milk\">\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n fill=\"#000000\"\n >\n <path\n d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"\n />\n </svg>\n </ic-toggle-button>\n</ic-toggle-button-group>`,\n long: `.parent-container {\n padding: var(--ic-space-md);\n }\n</style>\n<body>\n <div class=\"parent-container\">\n {shortCode}\n </div>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcToggleButtonGroup\n accessibleLabel=\"Alternatives to milk selection\"\n iconPlacement=\"right\"\n>\n <IcToggleButton label=\"Switch to oat milk\" iconPlacement=\"right\">\n <SlottedSVG\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n fill=\"#000000\"\n >\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n </SlottedSVG>\n </IcToggleButton>\n <IcToggleButton label=\"Switch to almond milk\" iconPlacement=\"right\">\n <SlottedSVG\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n fill=\"#000000\"\n >\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n </SlottedSVG>\n </IcToggleButton>\n</IcToggleButtonGroup>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n padding: \"var(--ic-space-md)\",\n },\n});\nconst classes = useStyles();\nreturn ( \n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n padding: \"var(--ic-space-md)\",\n },\n});\nconst classes = useStyles();\nreturn ( \n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={snippetsIconRight}>\n <IcToggleButtonGroup\n accessibleLabel=\"Alternatives to milk selection\"\n iconPlacement=\"right\"\n >\n <IcToggleButton label=\"Switch to oat milk\" iconPlacement=\"right\">\n <SlottedSVG\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n fill=\"#000000\"\n >\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n </SlottedSVG>\n </IcToggleButton>\n <IcToggleButton label=\"Switch to almond milk\" iconPlacement=\"right\">\n <SlottedSVG\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n fill=\"#000000\"\n >\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n </SlottedSVG>\n </IcToggleButton>\n </IcToggleButtonGroup>\n</ComponentPreview>\n\n### Icon top\n\nexport const snippetsIconTopGroup = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-toggle-button-group\n accessible-label=\"Alternatives to milk selection\"\n icon-placement=\"top\"\n>\n <ic-toggle-button label=\"Switch to oat milk\">\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n fill=\"#000000\"\n >\n <path\n d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"\n />\n </svg>\n </ic-toggle-button>\n <ic-toggle-button label=\"Switch to almond milk\">\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n fill=\"#000000\"\n >\n <path\n d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"\n />\n </svg>\n </ic-toggle-button>\n</ic-toggle-button-group>`,\n long: `.parent- {\n padding: var(--ic-space-md);\n }\n</style>\n<body>\n <div class=\"parent-\">\n {shortCode}\n </div>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcToggleButtonGroup\n accessibleLabel=\"Alternatives to milk selection\"\n iconPlacement=\"top\"\n>\n <IcToggleButton label=\"First toggle\" iconPlacement=\"top\">\n <SlottedSVG\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n fill=\"#000000\"\n >\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n <path d=\"M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z\" />\n </SlottedSVG>\n </IcToggleButton>\n <IcToggleButton label=\"Second toggle\" iconPlacement=\"top\">\n <SlottedSVG\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n fill=\"#000000\"\n >\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n <path d=\"M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z\" />\n </SlottedSVG>\n </IcToggleButton>\n</IcToggleButtonGroup>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n padding: \"var(--ic-space-md)\",\n },\n});\nconst classes = useStyles();\nreturn ( \n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n padding: \"var(--ic-space-md)\",\n },\n});\nconst classes = useStyles();\nreturn ( \n <div className={classes.parentContainer}>\n {shortCode}\n </div>\n)`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={snippetsIconTopGroup}>\n <IcToggleButtonGroup\n accessibleLabel=\"Alternatives to milk selection\"\n iconPlacement=\"top\"\n >\n <IcToggleButton label=\"Switch to oat milk\" iconPlacement=\"top\">\n <SlottedSVG\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n fill=\"#000000\"\n >\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n </SlottedSVG>\n </IcToggleButton>\n <IcToggleButton label=\"Switch to almond milk\" iconPlacement=\"top\">\n <SlottedSVG\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n fill=\"#000000\"\n >\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\n </SlottedSVG>\n </IcToggleButton>\n </IcToggleButtonGroup>\n</ComponentPreview>\n",
+ "contents": "\r\nimport {\r\n IcToggleButton,\r\n IcToggleButtonGroup,\r\n SlottedSVG,\r\n IcBadge,\r\n} from \"@ukic/react\";\r\n\r\n## Component demo\r\n\r\nexport const snippetsDefault = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-toggle-button\r\n id=\"toggle-btn\"\r\n label=\"Switch to oat milk\"\r\n></ic-toggle-button>`,\r\n long: `.toggle-btn-container {\r\n padding: var(--ic-space-md);\r\n }\r\n</style>\r\n<body>\r\n <div class=\"toggle-btn-container\">\r\n {shortCode}\r\n </div>\r\n <script>\r\n const btn = document.querySelector('#toggle-btn');\r\n btn.addEventListener(\"icToggleChecked\", function (event) {\r\n console.log(event.detail.checked);\r\n });\r\n </script>`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcToggleButton\r\n label=\"Switch to oat milk\"\r\n onIcToggleChecked={(event) => console.log(event.detail.checked)}\r\n/>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `const useStyles = createUseStyles({\r\n parentContainer: {\r\n padding: \"var(--ic-space-md)\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nreturn ( \r\n <div className={classes.parentContainer}>\r\n {shortCode}\r\n </div>\r\n)`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `const useStyles = createUseStyles({\r\n parentContainer: {\r\n padding: \"var(--ic-space-md)\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nreturn ( \r\n <div className={classes.parentContainer}>\r\n {shortCode}\r\n </div>\r\n)`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview snippets={snippetsDefault}>\r\n <IcToggleButton\r\n label=\"Switch to oat milk\"\r\n onIcToggleChecked={(event) => console.log(event.detail.checked)}\r\n />\r\n</ComponentPreview>\r\n\r\n## Toggle button details\r\n\r\n<ComponentDetails component=\"ic-toggle-button\" />\r\n\r\n## Toggle button group details\r\n\r\n<ComponentDetails component=\"ic-toggle-button-group\" />\r\n\r\n## Variants\r\n\r\n### Other states\r\n\r\nexport const snippetsOtherStates = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-toggle-button\r\n label=\"Switch to oat milk\"\r\n disabled=\"true\"\r\n></ic-toggle-button>\r\n<ic-toggle-button\r\n label=\"Switch to oat milk\"\r\n disabled=\"true\"\r\n toggle-checked=\"true\"\r\n></ic-toggle-button>\r\n<ic-toggle-button\r\n label=\"Switch to oat milk\"\r\n loading=\"true\"\r\n></ic-toggle-button>\r\n<ic-toggle-button\r\n label=\"Switch to oat milk\"\r\n loading=\"true\"\r\n toggle-checked=\"true\"\r\n></ic-toggle-button>`,\r\n long: `.toggle-btn-container {\r\n display: flex;\r\n flex-wrap: wrap;\r\n padding: var(--ic-space-md);\r\n gap: var(--ic-space-xs);\r\n }\r\n</style>\r\n<body>\r\n <div class=\"toggle-btn-container\">\r\n {shortCode}\r\n </div>`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcToggleButton label=\"Switch to oat milk\" disabled />\r\n<IcToggleButton label=\"Switch to oat milk\" disabled toggleChecked />\r\n<IcToggleButton label=\"Switch to oat milk\" loading />\r\n<IcToggleButton label=\"Switch to oat milk\" loading toggleChecked />`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `const useStyles = createUseStyles({\r\n parentContainer: {\r\n display: \"flex\",\r\n flexWrap: \"wrap\",\r\n padding: \"var(--ic-space-md)\",\r\n gap: \"var(--ic-space-xs)\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nreturn ( \r\n <div className={classes.parentContainer}>\r\n {shortCode}\r\n </div>\r\n)`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `const useStyles = createUseStyles({\r\n parentContainer: {\r\n display: \"flex\",\r\n flexWrap: \"wrap\",\r\n padding: \"var(--ic-space-md)\",\r\n gap: \"var(--ic-space-xs)\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nreturn ( \r\n <div className={classes.parentContainer}>\r\n {shortCode}\r\n </div>\r\n)`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview style={{ gap: \"0.5rem\" }} snippets={snippetsOtherStates}>\r\n <IcToggleButton label=\"Switch to oat milk\" disabled />\r\n <IcToggleButton label=\"Switch to oat milk\" disabled toggleChecked />\r\n <IcToggleButton label=\"Switch to oat milk\" loading />\r\n <IcToggleButton label=\"Switch to oat milk\" loading toggleChecked />\r\n</ComponentPreview>\r\n\r\n### With icon\r\n\r\nexport const snippetsWithIcon = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-toggle-button label=\"Switch to oat milk\">\r\n <svg slot=\"icon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\r\n <path\r\n d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"\r\n />\r\n </svg>\r\n</ic-toggle-button>`,\r\n long: `.toggle-btn-container {\r\n padding: var(--ic-space-md);\r\n }\r\n</style>\r\n<body>\r\n <div class=\"toggle-btn-container\">\r\n {shortCode}\r\n </div>`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcToggleButton label=\"Switch to oat milk\">\r\n <SlottedSVG\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n width=\"24\"\r\n fill=\"#000000\"\r\n >\r\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\r\n </SlottedSVG>\r\n</IcToggleButton>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `const useStyles = createUseStyles({\r\n parentContainer: {\r\n padding: \"var(--ic-space-md)\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nreturn ( \r\n <div className={classes.parentContainer}>\r\n {shortCode}\r\n </div>\r\n)`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `const useStyles = createUseStyles({\r\n parentContainer: {\r\n padding: \"var(--ic-space-md)\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nreturn ( \r\n <div className={classes.parentContainer}>\r\n {shortCode}\r\n </div>\r\n)`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview snippets={snippetsWithIcon}>\r\n <IcToggleButton label=\"Switch to oat milk\">\r\n <SlottedSVG\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n width=\"24\"\r\n fill=\"#000000\"\r\n >\r\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\r\n </SlottedSVG>\r\n </IcToggleButton>\r\n</ComponentPreview>\r\n\r\n### Sizing\r\n\r\nexport const snippetsSizing = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-toggle-button\r\n label=\"Switch to oat milk\"\r\n size=\"small\"\r\n></ic-toggle-button>\r\n<ic-toggle-button label=\"Switch to oat milk\"></ic-toggle-button>\r\n<ic-toggle-button\r\n label=\"Switch to oat milk\"\r\n size=\"large\"\r\n></ic-toggle-button>`,\r\n long: `.parent-container {\r\n display: flex;\r\n flex-wrap: wrap;\r\n padding: var(--ic-space-md);\r\n gap: var(--ic-space-xs);\r\n }\r\n</style>\r\n<body>\r\n <div class=\"parent-container\">\r\n {shortCode}\r\n </div>`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcToggleButton label=\"Switch to oat milk\" size=\"small\" />\r\n<IcToggleButton label=\"Switch to oat milk\" size=\"default\" />\r\n<IcToggleButton label=\"Switch to oat milk\" size=\"large\" />`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `const useStyles = createUseStyles({\r\n parentContainer: {\r\n display: \"flex\",\r\n flexWrap: \"wrap\",\r\n padding: \"var(--ic-space-md)\",\r\n gap: \"var(--ic-space-xs)\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nreturn ( \r\n <div className={classes.parentContainer}>\r\n {shortCode}\r\n </div>\r\n)`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `const useStyles = createUseStyles({\r\n parentContainer: {\r\n display: \"flex\",\r\n flexWrap: \"wrap\",\r\n padding: \"var(--ic-space-md)\",\r\n gap: \"var(--ic-space-xs)\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nreturn ( \r\n <div className={classes.parentContainer}>\r\n {shortCode}\r\n </div>\r\n)`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview style={{ gap: \"0.5rem\" }} snippets={snippetsSizing}>\r\n <IcToggleButton label=\"Switch to oat milk\" size=\"small\" />\r\n <IcToggleButton label=\"Switch to oat milk\" size=\"default\" />\r\n <IcToggleButton label=\"Switch to oat milk\" size=\"large\" />\r\n</ComponentPreview>\r\n\r\n### With badge\r\n\r\nexport const snippetsWithBadge = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-toggle-button label=\"Switch to oat milk\">\r\n <ic-badge text-label=\"1\" slot=\"badge\" variant=\"success\"></ic-badge>\r\n</ic-toggle-button>`,\r\n long: `.parent-container {\r\n padding: var(--ic-space-md);\r\n }\r\n</style>\r\n<body>\r\n <div class=\"parent-container\">\r\n {shortCode}\r\n </div>`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcToggleButton label=\"Switch to oat milk\">\r\n <IcBadge textLabel=\"1\" slot=\"badge\" variant=\"success\" />\r\n</IcToggleButton>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `const useStyles = createUseStyles({\r\n parentContainer: {\r\n padding: \"var(--ic-space-md)\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nreturn ( \r\n <div className={classes.parentContainer}>\r\n {shortCode}\r\n </div>\r\n)`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `const useStyles = createUseStyles({\r\n parentContainer: {\r\n padding: \"var(--ic-space-md)\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nreturn ( \r\n <div className={classes.parentContainer}>\r\n {shortCode}\r\n </div>\r\n)`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview snippets={snippetsWithBadge}>\r\n <IcToggleButton label=\"Switch to oat milk\">\r\n <IcBadge textLabel=\"1\" slot=\"badge\" variant=\"success\" />\r\n </IcToggleButton>\r\n</ComponentPreview>\r\n\r\n### Dark\r\n\r\nexport const snippetsDark = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-toggle-button\r\n label=\"Switch to oat milk\"\r\n appearance=\"dark\"\r\n></ic-toggle-button>\r\n<ic-toggle-button\r\n label=\"Switch to oat milk\"\r\n appearance=\"dark\"\r\n loading=\"true\"\r\n></ic-toggle-button>\r\n<ic-toggle-button\r\n label=\"Switch to oat milk\"\r\n appearance=\"dark\"\r\n loading=\"true\"\r\n toggle-checked=\"true\"\r\n></ic-toggle-button>`,\r\n long: `.parent-container {\r\n display: flex;\r\n flex-wrap: wrap;\r\n padding: var(--ic-space-md);\r\n gap: var(--ic-space-xs);\r\n }\r\n</style>\r\n<body>\r\n <div class=\"parent-container\">\r\n {shortCode}\r\n </div>`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcToggleButton label=\"Switch to oat milk\" appearance=\"dark\" />\r\n<IcToggleButton label=\"Switch to oat milk\" appearance=\"dark\" loading />\r\n<IcToggleButton\r\n label=\"Switch to oat milk\"\r\n appearance=\"dark\"\r\n loading\r\n toggleChecked\r\n/>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `const useStyles = createUseStyles({\r\n parentContainer: {\r\n display: \"flex\",\r\n flexWrap: \"wrap\",\r\n padding: \"var(--ic-space-md)\",\r\n gap: \"var(--ic-space-xs)\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nreturn ( \r\n <div className={classes.parentContainer}>\r\n {shortCode}\r\n </div>\r\n)`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `const useStyles = createUseStyles({\r\n parentContainer: {\r\n display: \"flex\",\r\n flexWrap: \"wrap\",\r\n padding: \"var(--ic-space-md)\",\r\n gap: \"var(--ic-space-xs)\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nreturn ( \r\n <div className={classes.parentContainer}>\r\n {shortCode}\r\n </div>\r\n)`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview style={{ gap: \"0.5rem\" }} snippets={snippetsDark}>\r\n <IcToggleButton label=\"Switch to oat milk\" appearance=\"dark\" />\r\n <IcToggleButton label=\"Switch to oat milk\" appearance=\"dark\" loading />\r\n <IcToggleButton\r\n label=\"Switch to oat milk\"\r\n appearance=\"dark\"\r\n loading\r\n toggleChecked\r\n />\r\n</ComponentPreview>\r\n\r\n### Light\r\n\r\nexport const snippetsLight = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-toggle-button label=\"Switch to oat milk\" appearance=\"light\"></ic-toggle-button>\r\n<ic-toggle-button label=\"Switch to oat milk\" appearance=\"light\" loading=\"true\"></ic-toggle-button>\r\n<ic-toggle-button label=\"Switch to oat milk\" appearance=\"light\" loading=\"true\" toggle-checked=\"true\"></ic-toggle-button>`,\r\n long: `.dark-background {\r\n display: flex;\r\n flex-wrap: wrap;\r\n background-color: #2c2f34;\r\n padding: var(--ic-space-md);\r\n gap: var(--ic-space-xs);\r\n }\r\n</style>\r\n<body>\r\n <div class=\"dark-background\">\r\n {shortCode}\r\n </div>`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcToggleButton label=\"Switch to oat milk\" appearance=\"light\" />\r\n<IcToggleButton label=\"Switch to oat milk\" appearance=\"light\" loading />\r\n<IcToggleButton\r\n label=\"Switch to oat milk\"\r\n appearance=\"light\"\r\n loading\r\n toggleChecked\r\n/>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `const useStyles = createUseStyles({\r\n darkBackground: {\r\n display: \"flex\",\r\n flexWrap: \"wrap\",\r\n backgroundColor: \"#2c2f34\",\r\n padding: \"var(--ic-space-md)\",\r\n gap: \"var(--ic-space-xs)\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nreturn ( \r\n <div className={classes.darkBackground}>\r\n {shortCode}\r\n </div>\r\n)`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `const useStyles = createUseStyles({\r\n darkBackground: {\r\n display: \"flex\",\r\n flexWrap: \"wrap\",\r\n backgroundColor: \"#2c2f34\",\r\n padding: \"var(--ic-space-md)\",\r\n gap; \"var(--ic-space-xs)\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nreturn ( \r\n <div className={classes.darkBackground}>\r\n {shortCode}\r\n </div>\r\n)`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview\r\n style={{ backgroundColor: \"#2c2f34\", gap: \"0.5rem\" }}\r\n snippets={snippetsLight}\r\n>\r\n <IcToggleButton label=\"Switch to oat milk\" appearance=\"light\" />\r\n <IcToggleButton label=\"Switch to oat milk\" appearance=\"light\" loading />\r\n <IcToggleButton\r\n label=\"Switch to oat milk\"\r\n appearance=\"light\"\r\n loading\r\n toggleChecked\r\n />\r\n</ComponentPreview>\r\n\r\n### Full width\r\n\r\nexport const snippetsFullWidth = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-toggle-button-group\r\n accessible-label=\"Alternatives to milk selection\"\r\n full-width=\"true\"\r\n select-type=\"single\"\r\n>\r\n <ic-toggle-button label=\"Switch to oat milk\"></ic-toggle-button>\r\n <ic-toggle-button label=\"Switch to almond milk\"></ic-toggle-button>\r\n <ic-toggle-button label=\"Switch to coconut milk\"></ic-toggle-button>\r\n <ic-toggle-button label=\"Switch to rice milk\"></ic-toggle-button>\r\n</ic-toggle-button-group>`,\r\n long: `.parent-container {\r\n padding: var(--ic-space-md);\r\n }\r\n</style>\r\n<body>\r\n <div class=\"parent-container\">\r\n {shortCode}\r\n </div>`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcToggleButtonGroup\r\n accessibleLabel=\"Alternatives to milk selection\"\r\n fullWidth\r\n selectType=\"single\"\r\n>\r\n <IcToggleButton label=\"Switch to oat milk\" />\r\n <IcToggleButton label=\"Switch to almond milk\" />\r\n <IcToggleButton label=\"Switch to coconut milk\" />\r\n <IcToggleButton label=\"Switch to rice milk\" />\r\n</IcToggleButtonGroup>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `const useStyles = createUseStyles({\r\n parentContainer: {\r\n padding: \"var(--ic-space-md)\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nreturn ( \r\n <div className={classes.parentContainer}>\r\n {shortCode}\r\n </div>\r\n)`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `const useStyles = createUseStyles({\r\n parentContainer: {\r\n padding: \"var(--ic-space-md)\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nreturn ( \r\n <div className={classes.parentContainer}>\r\n {shortCode}\r\n </div>\r\n)`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview style={{ display: \"block\" }} snippets={snippetsFullWidth}>\r\n <IcToggleButtonGroup\r\n accessibleLabel=\"Alternatives to milk selection\"\r\n fullWidth\r\n selectType=\"single\"\r\n >\r\n <IcToggleButton label=\"Switch to oat milk\" />\r\n <IcToggleButton label=\"Switch to almond milk\" />\r\n <IcToggleButton label=\"Switch to coconut milk\" />\r\n <IcToggleButton label=\"Switch to rice milk\" />\r\n </IcToggleButtonGroup>\r\n</ComponentPreview>\r\n\r\n### Icon only\r\n\r\nexport const snippetsIconOnly = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-toggle-button-group\r\n accessible-label=\"Coffee icon variants\"\r\n variant=\"icon\"\r\n>\r\n <ic-toggle-button accessible-label=\"Coffee icon\" variant=\"icon\">\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n width=\"24\"\r\n fill=\"#000000\"\r\n >\r\n <path\r\n d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"\r\n />\r\n </svg>\r\n </ic-toggle-button>\r\n <ic-toggle-button\r\n accessible-label=\"Loading coffee\"\r\n variant=\"icon\"\r\n loading=\"true\"\r\n >\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n width=\"24\"\r\n fill=\"#000000\"\r\n >\r\n <path\r\n d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"\r\n />\r\n </svg>\r\n </ic-toggle-button>\r\n <ic-toggle-button\r\n accessible-label=\"Disabled coffee\"\r\n variant=\"icon\"\r\n disabled=\"true\"\r\n >\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n width=\"24\"\r\n fill=\"#000000\"\r\n >\r\n <path\r\n d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"\r\n />\r\n </svg>\r\n </ic-toggle-button>\r\n</ic-toggle-button-group>`,\r\n long: `.parent-container {\r\n padding: var(--ic-space-md);\r\n }\r\n</style>\r\n<body>\r\n <div class=\"parent-container\">\r\n {shortCode}\r\n </div>`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcToggleButtonGroup accessibleLabel=\"Coffee icon variants\" variant=\"icon\">\r\n <IcToggleButton variant=\"icon\" accessibleLabel=\"Coffee icon\">\r\n <SlottedSVG\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n width=\"24\"\r\n fill=\"#000000\"\r\n >\r\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\r\n </SlottedSVG>\r\n </IcToggleButton>\r\n <IcToggleButton variant=\"icon\" accessibleLabel=\"Loading coffee\" loading>\r\n <SlottedSVG\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n width=\"24\"\r\n fill=\"#000000\"\r\n >\r\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\r\n </SlottedSVG>\r\n </IcToggleButton>\r\n <IcToggleButton variant=\"icon\" accessibleLabel=\"Disabled coffee\" disabled>\r\n <SlottedSVG\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n width=\"24\"\r\n fill=\"#000000\"\r\n >\r\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\r\n </SlottedSVG>\r\n </IcToggleButton>\r\n</IcToggleButtonGroup>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `const useStyles = createUseStyles({\r\n parentContainer: {\r\n padding: \"var(--ic-space-md)\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nreturn ( \r\n <div className={classes.parentContainer}>\r\n {shortCode}\r\n </div>\r\n)`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `const useStyles = createUseStyles({\r\n parentContainer: {\r\n padding: \"var(--ic-space-md)\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nreturn ( \r\n <div className={classes.parentContainer}>\r\n {shortCode}\r\n </div>\r\n)`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview snippets={snippetsIconOnly}>\r\n <IcToggleButtonGroup accessibleLabel=\"Coffee icon variants\" variant=\"icon\">\r\n <IcToggleButton variant=\"icon\" accessibleLabel=\"Coffee icon\">\r\n <SlottedSVG\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n width=\"24\"\r\n fill=\"#000000\"\r\n >\r\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\r\n </SlottedSVG>\r\n </IcToggleButton>\r\n <IcToggleButton variant=\"icon\" accessibleLabel=\"Loading coffee\" loading>\r\n <SlottedSVG\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n width=\"24\"\r\n fill=\"#000000\"\r\n >\r\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\r\n </SlottedSVG>\r\n </IcToggleButton>\r\n <IcToggleButton variant=\"icon\" accessibleLabel=\"Disabled coffee\" disabled>\r\n <SlottedSVG\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n width=\"24\"\r\n fill=\"#000000\"\r\n >\r\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\r\n </SlottedSVG>\r\n </IcToggleButton>\r\n </IcToggleButtonGroup>\r\n</ComponentPreview>\r\n\r\n### Icon right\r\n\r\nexport const snippetsIconRight = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-toggle-button-group\r\n accessible-label=\"Alternatives to milk selection\"\r\n icon-placement=\"right\"\r\n>\r\n <ic-toggle-button label=\"Switch to oat milk\">\r\n <svg\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n width=\"24\"\r\n fill=\"#000000\"\r\n >\r\n <path\r\n d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"\r\n />\r\n </svg>\r\n </ic-toggle-button>\r\n <ic-toggle-button label=\"Switch to almond milk\">\r\n <svg\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n width=\"24\"\r\n fill=\"#000000\"\r\n >\r\n <path\r\n d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"\r\n />\r\n </svg>\r\n </ic-toggle-button>\r\n</ic-toggle-button-group>`,\r\n long: `.parent-container {\r\n padding: var(--ic-space-md);\r\n }\r\n</style>\r\n<body>\r\n <div class=\"parent-container\">\r\n {shortCode}\r\n </div>`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcToggleButtonGroup\r\n accessibleLabel=\"Alternatives to milk selection\"\r\n iconPlacement=\"right\"\r\n>\r\n <IcToggleButton label=\"Switch to oat milk\" iconPlacement=\"right\">\r\n <SlottedSVG\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n width=\"24\"\r\n fill=\"#000000\"\r\n >\r\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\r\n </SlottedSVG>\r\n </IcToggleButton>\r\n <IcToggleButton label=\"Switch to almond milk\" iconPlacement=\"right\">\r\n <SlottedSVG\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n width=\"24\"\r\n fill=\"#000000\"\r\n >\r\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\r\n </SlottedSVG>\r\n </IcToggleButton>\r\n</IcToggleButtonGroup>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `const useStyles = createUseStyles({\r\n parentContainer: {\r\n padding: \"var(--ic-space-md)\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nreturn ( \r\n <div className={classes.parentContainer}>\r\n {shortCode}\r\n </div>\r\n)`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `const useStyles = createUseStyles({\r\n parentContainer: {\r\n padding: \"var(--ic-space-md)\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nreturn ( \r\n <div className={classes.parentContainer}>\r\n {shortCode}\r\n </div>\r\n)`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview snippets={snippetsIconRight}>\r\n <IcToggleButtonGroup\r\n accessibleLabel=\"Alternatives to milk selection\"\r\n iconPlacement=\"right\"\r\n >\r\n <IcToggleButton label=\"Switch to oat milk\" iconPlacement=\"right\">\r\n <SlottedSVG\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n width=\"24\"\r\n fill=\"#000000\"\r\n >\r\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\r\n </SlottedSVG>\r\n </IcToggleButton>\r\n <IcToggleButton label=\"Switch to almond milk\" iconPlacement=\"right\">\r\n <SlottedSVG\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n width=\"24\"\r\n fill=\"#000000\"\r\n >\r\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\r\n </SlottedSVG>\r\n </IcToggleButton>\r\n </IcToggleButtonGroup>\r\n</ComponentPreview>\r\n\r\n### Icon top\r\n\r\nexport const snippetsIconTopGroup = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-toggle-button-group\r\n accessible-label=\"Alternatives to milk selection\"\r\n icon-placement=\"top\"\r\n>\r\n <ic-toggle-button label=\"Switch to oat milk\">\r\n <svg\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n width=\"24\"\r\n fill=\"#000000\"\r\n >\r\n <path\r\n d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"\r\n />\r\n </svg>\r\n </ic-toggle-button>\r\n <ic-toggle-button label=\"Switch to almond milk\">\r\n <svg\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n width=\"24\"\r\n fill=\"#000000\"\r\n >\r\n <path\r\n d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\"\r\n />\r\n </svg>\r\n </ic-toggle-button>\r\n</ic-toggle-button-group>`,\r\n long: `.parent- {\r\n padding: var(--ic-space-md);\r\n }\r\n</style>\r\n<body>\r\n <div class=\"parent-\">\r\n {shortCode}\r\n </div>`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcToggleButtonGroup\r\n accessibleLabel=\"Alternatives to milk selection\"\r\n iconPlacement=\"top\"\r\n>\r\n <IcToggleButton label=\"First toggle\" iconPlacement=\"top\">\r\n <SlottedSVG\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n width=\"24\"\r\n fill=\"#000000\"\r\n >\r\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\r\n <path d=\"M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z\" />\r\n </SlottedSVG>\r\n </IcToggleButton>\r\n <IcToggleButton label=\"Second toggle\" iconPlacement=\"top\">\r\n <SlottedSVG\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n width=\"24\"\r\n fill=\"#000000\"\r\n >\r\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\r\n <path d=\"M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z\" />\r\n </SlottedSVG>\r\n </IcToggleButton>\r\n</IcToggleButtonGroup>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `const useStyles = createUseStyles({\r\n parentContainer: {\r\n padding: \"var(--ic-space-md)\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nreturn ( \r\n <div className={classes.parentContainer}>\r\n {shortCode}\r\n </div>\r\n)`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `const useStyles = createUseStyles({\r\n parentContainer: {\r\n padding: \"var(--ic-space-md)\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nreturn ( \r\n <div className={classes.parentContainer}>\r\n {shortCode}\r\n </div>\r\n)`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview snippets={snippetsIconTopGroup}>\r\n <IcToggleButtonGroup\r\n accessibleLabel=\"Alternatives to milk selection\"\r\n iconPlacement=\"top\"\r\n >\r\n <IcToggleButton label=\"Switch to oat milk\" iconPlacement=\"top\">\r\n <SlottedSVG\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n width=\"24\"\r\n fill=\"#000000\"\r\n >\r\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\r\n </SlottedSVG>\r\n </IcToggleButton>\r\n <IcToggleButton label=\"Switch to almond milk\" iconPlacement=\"top\">\r\n <SlottedSVG\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n width=\"24\"\r\n fill=\"#000000\"\r\n >\r\n <path d=\"M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z\" />\r\n </SlottedSVG>\r\n </IcToggleButton>\r\n </IcToggleButtonGroup>\r\n</ComponentPreview>\r\n",
"path": "/components/toggle-button/code",
"date": "2024-05-31",
"title": "Toggle button",
@@ -4170,11 +4170,11 @@
}
],
"meta": {
- "relativePath": "components/toggle-buttons/code.mdx",
- "createdAt": "2024-11-06T10:27:49.408Z",
- "lastModified": "2024-11-06T10:19:00.160Z",
- "size": 30156,
- "formattedSize": "29.4 KB"
+ "relativePath": "components\\toggle-buttons\\code.mdx",
+ "createdAt": "2024-12-04T13:23:54.123Z",
+ "lastModified": "2024-12-04T13:23:54.123Z",
+ "size": 31336,
+ "formattedSize": "30.6 KB"
}
},
{
@@ -4203,9 +4203,9 @@
],
"tags": ["Segmented control"],
"meta": {
- "relativePath": "components/toggle-buttons/guidance.mdx",
- "createdAt": "2024-11-06T10:27:49.408Z",
- "lastModified": "2024-11-06T10:19:00.160Z",
+ "relativePath": "components\\toggle-buttons\\guidance.mdx",
+ "createdAt": "2024-11-05T11:57:54.210Z",
+ "lastModified": "2024-11-05T11:57:54.210Z",
"size": 11039,
"formattedSize": "10.8 KB"
}
@@ -4234,9 +4234,9 @@
}
],
"meta": {
- "relativePath": "components/tooltips/accessibility.mdx",
- "createdAt": "2024-11-06T10:27:49.404Z",
- "lastModified": "2024-11-06T10:19:00.160Z",
+ "relativePath": "components\\tooltips\\accessibility.mdx",
+ "createdAt": "2024-11-05T11:57:54.228Z",
+ "lastModified": "2024-11-05T11:57:54.228Z",
"size": 2061,
"formattedSize": "2.0 KB"
}
@@ -4265,9 +4265,9 @@
}
],
"meta": {
- "relativePath": "components/tooltips/code.mdx",
- "createdAt": "2024-11-06T10:27:49.404Z",
- "lastModified": "2024-11-06T10:19:00.160Z",
+ "relativePath": "components\\tooltips\\code.mdx",
+ "createdAt": "2024-11-05T11:57:54.260Z",
+ "lastModified": "2024-11-05T11:57:54.260Z",
"size": 12153,
"formattedSize": "11.9 KB"
}
@@ -4297,9 +4297,9 @@
}
],
"meta": {
- "relativePath": "components/tooltips/guidance.mdx",
- "createdAt": "2024-11-06T10:27:49.404Z",
- "lastModified": "2024-11-06T10:19:00.160Z",
+ "relativePath": "components\\tooltips\\guidance.mdx",
+ "createdAt": "2024-11-05T11:57:54.290Z",
+ "lastModified": "2024-11-05T11:57:54.290Z",
"size": 5539,
"formattedSize": "5.4 KB"
}
@@ -4328,16 +4328,16 @@
}
],
"meta": {
- "relativePath": "components/top-nav/accessibility.mdx",
- "createdAt": "2024-11-06T10:27:49.404Z",
- "lastModified": "2024-11-06T10:19:00.164Z",
+ "relativePath": "components\\top-nav\\accessibility.mdx",
+ "createdAt": "2024-11-05T11:57:54.317Z",
+ "lastModified": "2024-11-05T11:57:54.317Z",
"size": 3004,
"formattedSize": "2.9 KB"
}
},
{
"id": "components\\top-nav\\codex",
- "contents": "\nimport {\n IcTopNavigation,\n IcSearchBar,\n IcNavigationButton,\n IcNavigationItem,\n IcNavigationGroup,\n SlottedSVG,\n IcBadge,\n IcButton,\n} from \"@ukic/react\";\n\nimport { MemoryRouter, NavLink } from \"react-router-dom\";\nimport { useState } from \"react\";\n\n## Component demo\n\nexport const snippetsDefault = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-top-navigation app-title=\"ICDS\" status=\"alpha\" version=\"v0.0.7\">\n <svg\n slot=\"app-icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n fill=\"#000000\"\n >\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n <path\n d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\"\n />\n </svg>\n <ic-search-bar\n slot=\"search\"\n placeholder=\"Search\"\n label=\"Search\"\n ></ic-search-bar>\n <ic-navigation-button label=\"Notifications\" slot=\"buttons\">\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n fill=\"#000000\"\n >\n <path\n d=\"M12 22c1.1 0 2-.9 2-2h-4c0 1.1.89 2 2 2zm6-6v-5c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z\"\n />\n </svg>\n </ic-navigation-button>\n <ic-navigation-item\n slot=\"navigation\"\n label=\"Get started\"\n href=\"#\"\n ></ic-navigation-item>\n <ic-navigation-item\n slot=\"navigation\"\n label=\"Accessibility\"\n href=\"#\"\n ></ic-navigation-item>\n <ic-navigation-item\n slot=\"navigation\"\n label=\"Styles\"\n href=\"#\"\n ></ic-navigation-item>\n <ic-navigation-item\n slot=\"navigation\"\n label=\"Components\"\n href=\"#\"\n selected=\"true\"\n ></ic-navigation-item>\n <ic-navigation-item\n slot=\"navigation\"\n label=\"Patterns\"\n href=\"#\"\n ></ic-navigation-item>\n</ic-top-navigation>`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcTopNavigation appTitle=\"ICDS\" status=\"alpha\" version=\"v0.0.7\">\n <SlottedSVG\n slot=\"app-icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n fill=\"#000000\"\n >\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\" />\n </SlottedSVG>\n <IcSearchBar slot=\"search\" placeholder=\"Search\" label=\"Search\" />\n <IcNavigationButton label=\"Notifications\" slot=\"buttons\">\n <SlottedSVG\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n fill=\"#000000\"\n >\n <path d=\"M12 22c1.1 0 2-.9 2-2h-4c0 1.1.89 2 2 2zm6-6v-5c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z\" />\n </SlottedSVG>\n </IcNavigationButton>\n <IcNavigationItem slot=\"navigation\" label=\"Get started\" href=\"#\" />\n <IcNavigationItem slot=\"navigation\" label=\"Accessibility\" href=\"#\" />\n <IcNavigationItem slot=\"navigation\" label=\"Styles\" href=\"#\" />\n <IcNavigationItem slot=\"navigation\" label=\"Components\" href=\"#\" selected />\n <IcNavigationItem slot=\"navigation\" label=\"Patterns\" href=\"#\" />\n</IcTopNavigation>`,\n long: [\n {\n language: \"Javascript\",\n snippet: `{shortCode}`,\n },\n {\n language: \"Typescript\",\n snippet: `{shortCode}`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={snippetsDefault}>\n <IcTopNavigation appTitle=\"ICDS\" status=\"alpha\" version=\"v0.0.7\">\n <SlottedSVG\n slot=\"app-icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n fill=\"#000000\"\n >\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\" />\n </SlottedSVG>\n <IcSearchBar slot=\"search\" placeholder=\"Search\" label=\"Search\" />\n <IcNavigationButton label=\"Notifications\" slot=\"buttons\">\n <SlottedSVG\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n fill=\"#000000\"\n >\n <path d=\"M12 22c1.1 0 2-.9 2-2h-4c0 1.1.89 2 2 2zm6-6v-5c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z\" />\n </SlottedSVG>\n </IcNavigationButton>\n <IcNavigationItem\n slot=\"navigation\"\n label=\"Get started\"\n href=\"#\"\n onClick={(e) => e.preventDefault()}\n />\n <IcNavigationItem\n slot=\"navigation\"\n label=\"Accessibility\"\n href=\"#\"\n onClick={(e) => e.preventDefault()}\n />\n <IcNavigationItem\n slot=\"navigation\"\n label=\"Styles\"\n href=\"#\"\n onClick={(e) => e.preventDefault()}\n />\n <IcNavigationItem\n slot=\"navigation\"\n label=\"Components\"\n href=\"#\"\n onClick={(e) => e.preventDefault()}\n selected\n />\n <IcNavigationItem\n slot=\"navigation\"\n label=\"Patterns\"\n href=\"#\"\n onClick={(e) => e.preventDefault()}\n />\n </IcTopNavigation>\n</ComponentPreview>\n\n## Top navigation details\n\n<ComponentDetails component=\"ic-top-navigation\" />\n\n## Navigation group details\n\n<ComponentDetails component=\"ic-navigation-group\" />\n\n## Navigation item details\n\n<ComponentDetails component=\"ic-navigation-item\" />\n\n## Navigation button details\n\n<ComponentDetails component=\"ic-navigation-button\" />\n\n## Variants\n\n### Grouped links\n\nexport const snippetsGroupedLinks = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-top-navigation app-title=\"ICDS\" status=\"alpha\" version=\"v0.0.7\">\n <svg\n slot=\"app-icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n fill=\"#000000\"\n >\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n <path\n d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\"\n />\n </svg>\n <ic-search-bar\n slot=\"search\"\n placeholder=\"Search\"\n label=\"Search\"\n ></ic-search-bar>\n <ic-navigation-group slot=\"navigation\" label=\"Get started\">\n <ic-navigation-item label=\"Tests\" href=\"#\"></ic-navigation-item>\n <ic-navigation-item label=\"Theme\" href=\"#\"></ic-navigation-item>\n <ic-navigation-item label=\"Design\" href=\"#\"></ic-navigation-item>\n </ic-navigation-group>\n <ic-navigation-group\n slot=\"navigation\"\n label=\"Accessibility\"\n expandable=\"true\"\n >\n <ic-navigation-item label=\"Introduction\" href=\"#\"></ic-navigation-item>\n <ic-navigation-item\n label=\"Accessibility Statement\"\n href=\"#\"\n ></ic-navigation-item>\n </ic-navigation-group>\n</ic-top-navigation>`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcTopNavigation appTitle=\"ICDS\" status=\"alpha\" version=\"v0.0.7\">\n <SlottedSVG\n slot=\"app-icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n fill=\"#000000\"\n >\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\" />\n </SlottedSVG>\n <IcSearchBar slot=\"search\" placeholder=\"Search\" label=\"Search\" />\n <IcNavigationGroup slot=\"navigation\" label=\"Get started\">\n <IcNavigationItem label=\"Tests\" href=\"#\" />\n <IcNavigationItem label=\"Theme\" href=\"#\" />\n <IcNavigationItem label=\"Design\" href=\"#\" />\n </IcNavigationGroup>\n <IcNavigationGroup slot=\"navigation\" label=\"Accessibility\" expandable>\n <IcNavigationItem label=\"Introduction\" href=\"#\" />\n <IcNavigationItem label=\"Accessibility statement\" href=\"#\" />\n </IcNavigationGroup>\n</IcTopNavigation>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `{shortCode}`,\n },\n {\n language: \"Javascript\",\n snippet: `{shortCode}`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={snippetsGroupedLinks} style={{ zIndex: \"1\" }}>\n <IcTopNavigation appTitle=\"ICDS\" status=\"alpha\" version=\"v0.0.7\">\n <svg\n slot=\"app-icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n fill=\"#000000\"\n >\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\" />\n </svg>\n <IcSearchBar slot=\"search\" placeholder=\"Search\" label=\"Search\" />\n <IcNavigationGroup slot=\"navigation\" label=\"Get started\">\n <IcNavigationItem\n label=\"Tests\"\n href=\"#\"\n onClick={(e) => e.preventDefault()}\n />\n <IcNavigationItem\n label=\"Theme\"\n href=\"#\"\n onClick={(e) => e.preventDefault()}\n />\n <IcNavigationItem\n label=\"Design\"\n href=\"#\"\n onClick={(e) => e.preventDefault()}\n />\n </IcNavigationGroup>\n <IcNavigationGroup slot=\"navigation\" label=\"Accessibility\">\n <IcNavigationItem\n label=\"Introduction\"\n href=\"#\"\n onClick={(e) => e.preventDefault()}\n />\n <IcNavigationItem\n label=\"Accessibility statement\"\n href=\"#\"\n onClick={(e) => e.preventDefault()}\n />\n </IcNavigationGroup>\n </IcTopNavigation>\n</ComponentPreview>\n\n### Centre aligned\n\nexport const snippetsCentreAligned = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-top-navigation\n app-title=\"ICDS\"\n status=\"alpha\"\n version=\"v0.0.7\"\n content-aligned=\"center\"\n>\n <svg\n slot=\"app-icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n fill=\"#000000\"\n >\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n <path\n d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\"\n />\n </svg>\n <ic-navigation-button\n label=\"Test button\"\n slot=\"buttons\"\n onclick=\"alert('test')\"\n >\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n fill=\"#000000\"\n >\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n <path\n d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\"\n />\n </svg>\n </ic-navigation-button>\n <ic-navigation-item\n slot=\"navigation\"\n label=\"Get started\"\n href=\"/\"\n ></ic-navigation-item>\n <ic-navigation-item\n slot=\"navigation\"\n label=\"Accessibility\"\n href=\"/\"\n ></ic-navigation-item>\n <ic-navigation-item\n slot=\"navigation\"\n label=\"Styles\"\n href=\"/\"\n ></ic-navigation-item>\n <ic-navigation-item\n slot=\"navigation\"\n label=\"Components\"\n href=\"/\"\n selected=\"true\"\n ></ic-navigation-item>\n <ic-navigation-item\n slot=\"navigation\"\n label=\"Patterns\"\n href=\"/\"\n ></ic-navigation-item>\n</ic-top-navigation>`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcTopNavigation\n appTitle=\"ICDS\"\n status=\"alpha\"\n version=\"v0.0.7\"\n contentAligned=\"center\"\n>\n <SlottedSVG\n slot=\"app-icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n fill=\"#000000\"\n >\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\" />\n </SlottedSVG>\n <IcNavigationButton\n label=\"Test button\"\n slot=\"buttons\"\n onClick={() => alert('test')}\n >\n <SlottedSVG\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n fill=\"#000000\"\n >\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\" />\n </SlottedSVG>\n </IcNavigationButton>\n <IcNavigationItem slot=\"navigation\" label=\"Get started\" href=\"/\" />\n <IcNavigationItem slot=\"navigation\" label=\"Accessibility\" href=\"/\" />\n <IcNavigationItem slot=\"navigation\" label=\"Styles\" href=\"/\" />\n <IcNavigationItem\n slot=\"navigation\"\n label=\"Components\"\n href=\"/\"\n selected\n />\n <IcNavigationItem slot=\"navigation\" label=\"Patterns\" href=\"/\" />\n</IcTopNavigation>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `{shortCode}`,\n },\n {\n language: \"Javascript\",\n snippet: `{shortCode}`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={snippetsCentreAligned}>\n <IcTopNavigation\n appTitle=\"ICDS\"\n status=\"alpha\"\n version=\"v0.0.7\"\n contentAligned=\"center\"\n >\n <svg\n slot=\"app-icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n fill=\"#000000\"\n >\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\" />\n </svg>\n <IcNavigationButton\n label=\"Test button\"\n slot=\"buttons\"\n onclick=\"alert('test')\"\n >\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n fill=\"#000000\"\n >\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\" />\n </svg>\n </IcNavigationButton>\n <IcNavigationItem\n slot=\"navigation\"\n label=\"Get started\"\n href=\"#\"\n onClick={(e) => e.preventDefault()}\n />\n <IcNavigationItem\n slot=\"navigation\"\n label=\"Accessibility\"\n href=\"#\"\n onClick={(e) => e.preventDefault()}\n />\n <IcNavigationItem\n slot=\"navigation\"\n label=\"Styles\"\n href=\"#\"\n onClick={(e) => e.preventDefault()}\n />\n <IcNavigationItem\n slot=\"navigation\"\n label=\"Components\"\n href=\"#\"\n onClick={(e) => e.preventDefault()}\n selected\n />\n <IcNavigationItem\n slot=\"navigation\"\n label=\"Patterns\"\n href=\"#\"\n onClick={(e) => e.preventDefault()}\n />\n </IcTopNavigation>\n</ComponentPreview>\n\n### Left aligned\n\nexport const snippetsLeftAligned = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-top-navigation\n app-title=\"ICDS\"\n status=\"alpha\"\n version=\"v0.0.7\"\n content-aligned=\"left\"\n>\n <svg\n slot=\"app-icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n fill=\"#000000\"\n >\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n <path\n d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\"\n />\n </svg>\n <ic-search-bar\n slot=\"search\"\n placeholder=\"Search\"\n label=\"Search\"\n ></ic-search-bar>\n <ic-navigation-button\n label=\"Test button\"\n slot=\"buttons\"\n onclick=\"alert('test')\"\n >\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n fill=\"#000000\"\n >\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n <path\n d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\"\n />\n </svg>\n </ic-navigation-button>\n <ic-navigation-item\n slot=\"navigation\"\n label=\"Get started\"\n href=\"/\"\n ></ic-navigation-item>\n <ic-navigation-item\n slot=\"navigation\"\n label=\"Accessibility\"\n href=\"/\"\n ></ic-navigation-item>\n <ic-navigation-item\n slot=\"navigation\"\n label=\"Styles\"\n href=\"/\"\n ></ic-navigation-item>\n <ic-navigation-item\n slot=\"navigation\"\n label=\"Components\"\n href=\"/\"\n selected=\"true\"\n ></ic-navigation-item>\n <ic-navigation-item\n slot=\"navigation\"\n label=\"Patterns\"\n href=\"/\"\n ></ic-navigation-item>\n</ic-top-navigation>`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcTopNavigation\n appTitle=\"ICDS\"\n status=\"alpha\"\n version=\"v0.0.7\"\n contentAligned=\"left\"\n>\n <SlottedSVG\n slot=\"app-icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n fill=\"#000000\"\n >\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\" />\n </SlottedSVG>\n <IcSearchBar slot=\"search\" placeholder=\"Search\" label=\"Search\" />\n <IcNavigationButton\n label=\"Test button\"\n slot=\"buttons\"\n onClick={() => alert('test')}\n >\n <SlottedSVG\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n fill=\"#000000\"\n >\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\" />\n </SlottedSVG>\n </IcNavigationButton>\n <IcNavigationItem slot=\"navigation\" label=\"Get started\" href=\"/\" />\n <IcNavigationItem slot=\"navigation\" label=\"Accessibility\" href=\"/\" />\n <IcNavigationItem slot=\"navigation\" label=\"Styles\" href=\"/\" />\n <IcNavigationItem\n slot=\"navigation\"\n label=\"Components\"\n href=\"/\"\n selected\n />\n <IcNavigationItem slot=\"navigation\" label=\"Patterns\" href=\"/\" />\n</IcTopNavigation>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `{shortCode}`,\n },\n {\n language: \"Javascript\",\n snippet: `{shortCode}`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={snippetsLeftAligned}>\n <IcTopNavigation\n appTitle=\"ICDS\"\n status=\"alpha\"\n version=\"v0.0.7\"\n contentAligned=\"left\"\n >\n <svg\n slot=\"app-icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n fill=\"#000000\"\n >\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\" />\n </svg>\n <IcSearchBar slot=\"search\" placeholder=\"Search\" label=\"Search\" />\n <IcNavigationButton\n label=\"Test button\"\n slot=\"buttons\"\n onclick=\"alert('test')\"\n >\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n fill=\"#000000\"\n >\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\" />\n </svg>\n </IcNavigationButton>\n <IcNavigationItem\n slot=\"navigation\"\n label=\"Get started\"\n href=\"#\"\n onClick={(e) => e.preventDefault()}\n />\n <IcNavigationItem\n slot=\"navigation\"\n label=\"Accessibility\"\n href=\"#\"\n onClick={(e) => e.preventDefault()}\n />\n <IcNavigationItem\n slot=\"navigation\"\n label=\"Styles\"\n href=\"#\"\n onClick={(e) => e.preventDefault()}\n />\n <IcNavigationItem\n slot=\"navigation\"\n label=\"Components\"\n href=\"#\"\n onClick={(e) => e.preventDefault()}\n selected\n />\n <IcNavigationItem\n slot=\"navigation\"\n label=\"Patterns\"\n href=\"#\"\n onClick={(e) => e.preventDefault()}\n />\n </IcTopNavigation>\n</ComponentPreview>\n\n### With badge on navigation button\n\nexport const snippetsBadge = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-top-navigation app-title=\"ICDS\" status=\"alpha\" version=\"v0.0.7\">\n <svg\n slot=\"app-icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n fill=\"#000000\"\n >\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n <path\n d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\"\n />\n </svg>\n <ic-search-bar\n slot=\"search\"\n placeholder=\"Search\"\n label=\"Search\"\n ></ic-search-bar>\n <ic-navigation-button label=\"Notifications\" slot=\"buttons\">\n <ic-badge\n text-label=\"4\"\n slot=\"badge\"\n variant=\"light\"\n position=\"near\"\n ></ic-badge>\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n fill=\"#000000\"\n >\n <path\n d=\"M12 22c1.1 0 2-.9 2-2h-4c0 1.1.89 2 2 2zm6-6v-5c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z\"\n />\n </svg>\n </ic-navigation-button>\n <ic-navigation-item\n slot=\"navigation\"\n label=\"Get started\"\n href=\"#\"\n ></ic-navigation-item>\n <ic-navigation-item\n slot=\"navigation\"\n label=\"Accessibility\"\n href=\"#\"\n ></ic-navigation-item>\n <ic-navigation-item\n slot=\"navigation\"\n label=\"Styles\"\n href=\"#\"\n ></ic-navigation-item>\n <ic-navigation-item\n slot=\"navigation\"\n label=\"Components\"\n href=\"#\"\n selected=\"true\"\n ></ic-navigation-item>\n <ic-navigation-item\n slot=\"navigation\"\n label=\"Patterns\"\n href=\"#\"\n ></ic-navigation-item>\n</ic-top-navigation>`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcTopNavigation appTitle=\"ICDS\" status=\"alpha\" version=\"v0.0.7\">\n <SlottedSVG\n slot=\"app-icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n fill=\"#000000\"\n >\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\" />\n </SlottedSVG>\n <IcSearchBar slot=\"search\" placeholder=\"Search\" label=\"Search\" />\n <IcNavigationButton label=\"Notifications\" slot=\"buttons\">\n <IcBadge textLabel=\"4\" slot=\"badge\" variant=\"light\" position=\"near\" />\n <SlottedSVG\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n fill=\"#000000\"\n >\n <path d=\"M12 22c1.1 0 2-.9 2-2h-4c0 1.1.89 2 2 2zm6-6v-5c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z\" />\n </SlottedSVG>\n </IcNavigationButton>\n <IcNavigationItem slot=\"navigation\" label=\"Get started\" href=\"#\" />\n <IcNavigationItem slot=\"navigation\" label=\"Accessibility\" href=\"#\" />\n <IcNavigationItem slot=\"navigation\" label=\"Styles\" href=\"#\" />\n <IcNavigationItem\n slot=\"navigation\"\n label=\"Components\"\n href=\"#\"\n selected\n />\n <IcNavigationItem slot=\"navigation\" label=\"Patterns\" href=\"#\" />\n</IcTopNavigation>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `{shortCode}`,\n },\n {\n language: \"Javascript\",\n snippet: `{shortCode}`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={snippetsBadge}>\n <IcTopNavigation appTitle=\"ICDS\" status=\"alpha\" version=\"v0.0.7\">\n <SlottedSVG\n slot=\"app-icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n fill=\"#000000\"\n >\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\" />\n </SlottedSVG>\n <IcSearchBar slot=\"search\" placeholder=\"Search\" label=\"Search\" />\n <IcNavigationButton label=\"Notifications\" slot=\"buttons\">\n <IcBadge textLabel=\"4\" slot=\"badge\" variant=\"light\" position=\"near\" />\n <SlottedSVG\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n fill=\"#000000\"\n >\n <path d=\"M12 22c1.1 0 2-.9 2-2h-4c0 1.1.89 2 2 2zm6-6v-5c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z\" />\n </SlottedSVG>\n </IcNavigationButton>\n <IcNavigationItem\n slot=\"navigation\"\n label=\"Get started\"\n href=\"#\"\n onClick={(e) => e.preventDefault()}\n />\n <IcNavigationItem\n slot=\"navigation\"\n label=\"Accessibility\"\n href=\"#\"\n onClick={(e) => e.preventDefault()}\n />\n <IcNavigationItem\n slot=\"navigation\"\n label=\"Styles\"\n href=\"#\"\n onClick={(e) => e.preventDefault()}\n />\n <IcNavigationItem\n slot=\"navigation\"\n label=\"Components\"\n href=\"#\"\n onClick={(e) => e.preventDefault()}\n selected\n />\n <IcNavigationItem\n slot=\"navigation\"\n label=\"Patterns\"\n href=\"#\"\n onClick={(e) => e.preventDefault()}\n />\n </IcTopNavigation>\n</ComponentPreview>\n\n### With short app title\n\nView on a small screen size to display the short title in place of the app title.\n\nexport const snippetsShortTitle = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-top-navigation\n app-title=\"Intelligence Community Design System\"\n short-app-title=\"ICDS\"\n status=\"alpha\"\n version=\"v0.0.7\"\n>\n <svg\n slot=\"app-icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n fill=\"#000000\"\n >\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n <path\n d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\"\n />\n </svg>\n <ic-navigation-item\n slot=\"navigation\"\n label=\"Get started\"\n href=\"/\"\n ></ic-navigation-item>\n <ic-navigation-item\n slot=\"navigation\"\n label=\"Accessibility\"\n href=\"/\"\n ></ic-navigation-item>\n <ic-navigation-item\n slot=\"navigation\"\n label=\"Styles\"\n href=\"/\"\n ></ic-navigation-item>\n <ic-navigation-item\n slot=\"navigation\"\n label=\"Components\"\n href=\"/\"\n selected=\"true\"\n ></ic-navigation-item>\n <ic-navigation-item\n slot=\"navigation\"\n label=\"Patterns\"\n href=\"/\"\n ></ic-navigation-item>\n</ic-top-navigation>`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcTopNavigation\n appTitle=\"Intelligence Community Design System\"\n shortAppTitle=\"ICDS\"\n status=\"alpha\"\n version=\"v0.0.7\"\n>\n <SlottedSVG\n slot=\"app-icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n fill=\"#000000\"\n >\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\" />\n </SlottedSVG>\n <IcNavigationItem slot=\"navigation\" label=\"Get started\" href=\"#\" />\n <IcNavigationItem slot=\"navigation\" label=\"Accessibility\" href=\"#\" />\n <IcNavigationItem slot=\"navigation\" label=\"Styles\" href=\"#\" />\n <IcNavigationItem\n slot=\"navigation\"\n label=\"Components\"\n href=\"#\"\n selected\n />\n <IcNavigationItem slot=\"navigation\" label=\"Patterns\" href=\"#\" />\n</IcTopNavigation>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `{shortCode}`,\n },\n {\n language: \"Javascript\",\n snippet: `{shortCode}`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={snippetsShortTitle}>\n <IcTopNavigation\n appTitle=\"Intelligence Community Design System\"\n status=\"alpha\"\n version=\"v0.0.7\"\n shortAppTitle=\"ICDS\"\n >\n <svg\n slot=\"app-icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n fill=\"#000000\"\n >\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\" />\n </svg>\n <IcNavigationItem\n slot=\"navigation\"\n label=\"Get started\"\n href=\"#\"\n onClick={(e) => e.preventDefault()}\n />\n <IcNavigationItem\n slot=\"navigation\"\n label=\"Accessibility\"\n href=\"#\"\n onClick={(e) => e.preventDefault()}\n />\n <IcNavigationItem\n slot=\"navigation\"\n label=\"Styles\"\n href=\"#\"\n onClick={(e) => e.preventDefault()}\n />\n <IcNavigationItem\n slot=\"navigation\"\n label=\"Components\"\n href=\"#\"\n onClick={(e) => e.preventDefault()}\n selected\n />\n <IcNavigationItem\n slot=\"navigation\"\n label=\"Patterns\"\n href=\"#\"\n onClick={(e) => e.preventDefault()}\n />\n </IcTopNavigation>\n</ComponentPreview>\n\n### Conditional tabs\n\nexport const ConditionalTabsExample = () => {\n const [showTabs, setShowTabs] = useState(false);\n return (\n <>\n <IcTopNavigation\n appTitle=\"ApplicationName\"\n status=\"alpha\"\n version=\"v0.0.7\"\n >\n <SlottedSVG\n slot=\"app-icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n fill=\"#000000\"\n >\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\" />\n </SlottedSVG>\n <IcNavigationItem\n label=\"One\"\n href=\"/\"\n selected=\"true\"\n slot=\"navigation\"\n />\n <IcNavigationItem label=\"Two\" href=\"/\" slot=\"navigation\" />\n <IcNavigationItem label=\"Three\" href=\"/\" slot=\"navigation\" />\n {showTabs && (\n <>\n <IcNavigationItem label=\"Four\" href=\"/\" slot=\"navigation\" />\n <IcNavigationItem label=\"Five\" href=\"/\" slot=\"navigation\" />\n </>\n )}\n </IcTopNavigation>\n <IcButton onClick={() => setShowTabs(!showTabs)}>Show/Hide tabs</IcButton>\n </>\n );\n};\n\nexport const conditionalTabs = [\n {\n technology: \"React\",\n snippets: {\n short: `<IcTopNavigation\n appTitle=\"ApplicationName\"\n status=\"alpha\"\n version=\"v0.0.7\"\n>\n <SlottedSVG\n slot=\"app-icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"#000000\"\n >\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\" />\n </SlottedSVG>\n <IcNavigationItem label=\"One\" href=\"/\" selected slot=\"navigation\" />\n <IcNavigationItem label=\"Two\" href=\"/\" slot=\"navigation\" />\n <IcNavigationItem label=\"Three\" href=\"/\" slot=\"navigation\" />\n {showNavItems && (\n <>\n <IcNavigationItem label=\"Four\" href=\"/\" slot=\"navigation\" />\n <IcNavigationItem label=\"Five\" href=\"/\" slot=\"navigation\" />\n </>\n )}\n</IcTopNavigation>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const [showNavItems, setShowNavItems] = useState<boolean>(false);\nreturn (\n <>\n {shortCode}\n <IcButton onClick={() => setShowNavItems(!showNavItems)}>Show/Hide nav items</IcButton>\n </>\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const [showNavItems, setShowNavItems] = useState(false);\nreturn (\n <>\n {shortCode}\n <IcButton onClick={() => setShowNavItems(!showNavItems)}>Show/Hide nav items</IcButton>\n </>\n)`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview\n snippets={conditionalTabs}\n style={{ display: \"flex\", flexDirection: \"column\" }}\n>\n <ConditionalTabsExample />\n</ComponentPreview>\n\n### With React Router (using slots)\n\nThe following examples also demonstrate using a slotted link for app title, short app title and app icon.\n\nTo guarantee the correct styling for non-svg content slotted into app-icon, set `width`, `height` and `fill` to `inherit`.\n\nexport const withReactRouter = [\n {\n technology: \"React\",\n snippets: {\n short: `<MemoryRouter initialEntries={[\"/\"]}>\n <IcTopNavigation version=\"v0.0.7\">\n <NavLink to=\"/\" slot=\"app-title\">\n ICDS Title\n </NavLink>\n <NavLink to=\"/\" slot=\"short-app-title\">\n ICDS\n </NavLink>\n <NavLink to=\"/\" slot=\"app-icon\">\n <SlottedSVG\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"inherit\"\n viewBox=\"0 0 24 24\"\n width=\"inherit\"\n fill=\"inherit\"\n >\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\" />\n </SlottedSVG>\n </NavLink>\n <IcSearchBar slot=\"search\" placeholder=\"Search\" label=\"Search\" />\n <IcNavigationButton\n label=\"Test button\"\n slot=\"buttons\"\n onClick={() => alert(\"test\")}\n >\n <SlottedSVG\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n fill=\"#000000\"\n >\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\" />\n </SlottedSVG>\n </IcNavigationButton>\n <IcNavigationItem slot=\"navigation\">\n <NavLink to=\"/\" slot=\"navigation-item\">\n Get started\n </NavLink>\n </IcNavigationItem>\n <IcNavigationItem slot=\"navigation\">\n <NavLink to=\"/accessibility\" slot=\"navigation-item\">\n Accessibility\n </NavLink>\n </IcNavigationItem>\n </IcTopNavigation>\n <main>\n <IcSectionContainer className={classes.sectionContainer}>\n <Routes>\n <Route\n path=\"/\"\n element={\n <IcTypography>This is the get started page</IcTypography>\n }\n />\n <Route\n path=\"/accessibility\"\n element={\n <IcTypography>This page is about accessibility</IcTypography>\n }\n />\n </Routes>\n </IcSectionContainer>\n </main>\n</MemoryRouter>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n sectionContainer: {\n padding: \"var(--ic-space-md)\",\n },\n});\nconst classes = useStyles();\nreturn (\n {shortCode}\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n sectionContainer: {\n padding: \"var(--ic-space-md)\",\n },\n});\nconst classes = useStyles();\nreturn (\n {shortCode}\n)}`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview\n snippets={withReactRouter}\n style={{ display: \"flex\", flexDirection: \"column\" }}\n>\n <MemoryRouter initialEntries={[\"/\"]}>\n <IcTopNavigation version=\"v0.0.7\">\n <NavLink to=\"/\" slot=\"app-title\">\n ICDS Title\n </NavLink>\n <NavLink to=\"/\" slot=\"short-app-title\">\n ICDS\n </NavLink>\n <NavLink to=\"/\" slot=\"app-icon\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"inherit\"\n viewBox=\"0 0 24 24\"\n width=\"inherit\"\n fill=\"inherit\"\n >\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\" />\n </svg>\n </NavLink>\n <IcSearchBar slot=\"search\" placeholder=\"Search\" label=\"Search\" />\n <IcNavigationButton\n label=\"Test button\"\n slot=\"buttons\"\n onClick={() => alert(\"test\")}\n >\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n fill=\"#000000\"\n >\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\" />\n </svg>\n </IcNavigationButton>\n <IcNavigationItem slot=\"navigation\">\n <NavLink to=\"/\" slot=\"navigation-item\">\n Get started\n </NavLink>\n </IcNavigationItem>\n <IcNavigationItem slot=\"navigation\">\n <NavLink to=\"/accessibility\" slot=\"navigation-item\">\n Accessibility\n </NavLink>\n </IcNavigationItem>\n </IcTopNavigation>\n </MemoryRouter>\n</ComponentPreview>\n\n## Layout example\n\nFor full screen examples, see [top navigation patterns](/patterns/navigation-patterns/top-navigation-layout).\n",
+ "contents": "\r\nimport {\r\n IcTopNavigation,\r\n IcSearchBar,\r\n IcNavigationButton,\r\n IcNavigationItem,\r\n IcNavigationGroup,\r\n SlottedSVG,\r\n IcBadge,\r\n IcButton,\r\n} from \"@ukic/react\";\r\n\r\nimport { MemoryRouter, NavLink } from \"react-router-dom\";\r\nimport { useState } from \"react\";\r\n\r\n## Component demo\r\n\r\nexport const snippetsDefault = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-top-navigation app-title=\"ICDS\" status=\"alpha\" version=\"v0.0.7\">\r\n <svg\r\n slot=\"app-icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n width=\"24\"\r\n fill=\"#000000\"\r\n >\r\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\r\n <path\r\n d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\"\r\n />\r\n </svg>\r\n <ic-search-bar\r\n slot=\"search\"\r\n placeholder=\"Search\"\r\n label=\"Search\"\r\n ></ic-search-bar>\r\n <ic-navigation-button label=\"Notifications\" slot=\"buttons\">\r\n <svg\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n width=\"24\"\r\n fill=\"#000000\"\r\n >\r\n <path\r\n d=\"M12 22c1.1 0 2-.9 2-2h-4c0 1.1.89 2 2 2zm6-6v-5c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z\"\r\n />\r\n </svg>\r\n </ic-navigation-button>\r\n <ic-navigation-item\r\n slot=\"navigation\"\r\n label=\"Get started\"\r\n href=\"#\"\r\n ></ic-navigation-item>\r\n <ic-navigation-item\r\n slot=\"navigation\"\r\n label=\"Accessibility\"\r\n href=\"#\"\r\n ></ic-navigation-item>\r\n <ic-navigation-item\r\n slot=\"navigation\"\r\n label=\"Styles\"\r\n href=\"#\"\r\n ></ic-navigation-item>\r\n <ic-navigation-item\r\n slot=\"navigation\"\r\n label=\"Components\"\r\n href=\"#\"\r\n selected=\"true\"\r\n ></ic-navigation-item>\r\n <ic-navigation-item\r\n slot=\"navigation\"\r\n label=\"Patterns\"\r\n href=\"#\"\r\n ></ic-navigation-item>\r\n</ic-top-navigation>`,\r\n long: `{shortCode}`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcTopNavigation appTitle=\"ICDS\" status=\"alpha\" version=\"v0.0.7\">\r\n <SlottedSVG\r\n slot=\"app-icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n width=\"24\"\r\n fill=\"#000000\"\r\n >\r\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\r\n <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\" />\r\n </SlottedSVG>\r\n <IcSearchBar slot=\"search\" placeholder=\"Search\" label=\"Search\" />\r\n <IcNavigationButton label=\"Notifications\" slot=\"buttons\">\r\n <SlottedSVG\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n width=\"24\"\r\n fill=\"#000000\"\r\n >\r\n <path d=\"M12 22c1.1 0 2-.9 2-2h-4c0 1.1.89 2 2 2zm6-6v-5c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z\" />\r\n </SlottedSVG>\r\n </IcNavigationButton>\r\n <IcNavigationItem slot=\"navigation\" label=\"Get started\" href=\"#\" />\r\n <IcNavigationItem slot=\"navigation\" label=\"Accessibility\" href=\"#\" />\r\n <IcNavigationItem slot=\"navigation\" label=\"Styles\" href=\"#\" />\r\n <IcNavigationItem slot=\"navigation\" label=\"Components\" href=\"#\" selected />\r\n <IcNavigationItem slot=\"navigation\" label=\"Patterns\" href=\"#\" />\r\n</IcTopNavigation>`,\r\n long: [\r\n {\r\n language: \"Javascript\",\r\n snippet: `{shortCode}`,\r\n },\r\n {\r\n language: \"Typescript\",\r\n snippet: `{shortCode}`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview snippets={snippetsDefault}>\r\n <IcTopNavigation appTitle=\"ICDS\" status=\"alpha\" version=\"v0.0.7\">\r\n <SlottedSVG\r\n slot=\"app-icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n width=\"24\"\r\n fill=\"#000000\"\r\n >\r\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\r\n <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\" />\r\n </SlottedSVG>\r\n <IcSearchBar slot=\"search\" placeholder=\"Search\" label=\"Search\" />\r\n <IcNavigationButton label=\"Notifications\" slot=\"buttons\">\r\n <SlottedSVG\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n width=\"24\"\r\n fill=\"#000000\"\r\n >\r\n <path d=\"M12 22c1.1 0 2-.9 2-2h-4c0 1.1.89 2 2 2zm6-6v-5c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z\" />\r\n </SlottedSVG>\r\n </IcNavigationButton>\r\n <IcNavigationItem\r\n slot=\"navigation\"\r\n label=\"Get started\"\r\n href=\"#\"\r\n onClick={(e) => e.preventDefault()}\r\n />\r\n <IcNavigationItem\r\n slot=\"navigation\"\r\n label=\"Accessibility\"\r\n href=\"#\"\r\n onClick={(e) => e.preventDefault()}\r\n />\r\n <IcNavigationItem\r\n slot=\"navigation\"\r\n label=\"Styles\"\r\n href=\"#\"\r\n onClick={(e) => e.preventDefault()}\r\n />\r\n <IcNavigationItem\r\n slot=\"navigation\"\r\n label=\"Components\"\r\n href=\"#\"\r\n onClick={(e) => e.preventDefault()}\r\n selected\r\n />\r\n <IcNavigationItem\r\n slot=\"navigation\"\r\n label=\"Patterns\"\r\n href=\"#\"\r\n onClick={(e) => e.preventDefault()}\r\n />\r\n </IcTopNavigation>\r\n</ComponentPreview>\r\n\r\n## Top navigation details\r\n\r\n<ComponentDetails component=\"ic-top-navigation\" />\r\n\r\n## Navigation group details\r\n\r\n<ComponentDetails component=\"ic-navigation-group\" />\r\n\r\n## Navigation item details\r\n\r\n<ComponentDetails component=\"ic-navigation-item\" />\r\n\r\n## Navigation button details\r\n\r\n<ComponentDetails component=\"ic-navigation-button\" />\r\n\r\n## Variants\r\n\r\n### Grouped links\r\n\r\nexport const snippetsGroupedLinks = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-top-navigation app-title=\"ICDS\" status=\"alpha\" version=\"v0.0.7\">\r\n <svg\r\n slot=\"app-icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n width=\"24\"\r\n fill=\"#000000\"\r\n >\r\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\r\n <path\r\n d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\"\r\n />\r\n </svg>\r\n <ic-search-bar\r\n slot=\"search\"\r\n placeholder=\"Search\"\r\n label=\"Search\"\r\n ></ic-search-bar>\r\n <ic-navigation-group slot=\"navigation\" label=\"Get started\">\r\n <ic-navigation-item label=\"Tests\" href=\"#\"></ic-navigation-item>\r\n <ic-navigation-item label=\"Theme\" href=\"#\"></ic-navigation-item>\r\n <ic-navigation-item label=\"Design\" href=\"#\"></ic-navigation-item>\r\n </ic-navigation-group>\r\n <ic-navigation-group\r\n slot=\"navigation\"\r\n label=\"Accessibility\"\r\n expandable=\"true\"\r\n >\r\n <ic-navigation-item label=\"Introduction\" href=\"#\"></ic-navigation-item>\r\n <ic-navigation-item\r\n label=\"Accessibility Statement\"\r\n href=\"#\"\r\n ></ic-navigation-item>\r\n </ic-navigation-group>\r\n</ic-top-navigation>`,\r\n long: `{shortCode}`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcTopNavigation appTitle=\"ICDS\" status=\"alpha\" version=\"v0.0.7\">\r\n <SlottedSVG\r\n slot=\"app-icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n width=\"24\"\r\n fill=\"#000000\"\r\n >\r\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\r\n <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\" />\r\n </SlottedSVG>\r\n <IcSearchBar slot=\"search\" placeholder=\"Search\" label=\"Search\" />\r\n <IcNavigationGroup slot=\"navigation\" label=\"Get started\">\r\n <IcNavigationItem label=\"Tests\" href=\"#\" />\r\n <IcNavigationItem label=\"Theme\" href=\"#\" />\r\n <IcNavigationItem label=\"Design\" href=\"#\" />\r\n </IcNavigationGroup>\r\n <IcNavigationGroup slot=\"navigation\" label=\"Accessibility\" expandable>\r\n <IcNavigationItem label=\"Introduction\" href=\"#\" />\r\n <IcNavigationItem label=\"Accessibility statement\" href=\"#\" />\r\n </IcNavigationGroup>\r\n</IcTopNavigation>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `{shortCode}`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `{shortCode}`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview snippets={snippetsGroupedLinks} style={{ zIndex: \"1\" }}>\r\n <IcTopNavigation appTitle=\"ICDS\" status=\"alpha\" version=\"v0.0.7\">\r\n <svg\r\n slot=\"app-icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n width=\"24\"\r\n fill=\"#000000\"\r\n >\r\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\r\n <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\" />\r\n </svg>\r\n <IcSearchBar slot=\"search\" placeholder=\"Search\" label=\"Search\" />\r\n <IcNavigationGroup slot=\"navigation\" label=\"Get started\">\r\n <IcNavigationItem\r\n label=\"Tests\"\r\n href=\"#\"\r\n onClick={(e) => e.preventDefault()}\r\n />\r\n <IcNavigationItem\r\n label=\"Theme\"\r\n href=\"#\"\r\n onClick={(e) => e.preventDefault()}\r\n />\r\n <IcNavigationItem\r\n label=\"Design\"\r\n href=\"#\"\r\n onClick={(e) => e.preventDefault()}\r\n />\r\n </IcNavigationGroup>\r\n <IcNavigationGroup slot=\"navigation\" label=\"Accessibility\">\r\n <IcNavigationItem\r\n label=\"Introduction\"\r\n href=\"#\"\r\n onClick={(e) => e.preventDefault()}\r\n />\r\n <IcNavigationItem\r\n label=\"Accessibility statement\"\r\n href=\"#\"\r\n onClick={(e) => e.preventDefault()}\r\n />\r\n </IcNavigationGroup>\r\n </IcTopNavigation>\r\n</ComponentPreview>\r\n\r\n### Centre aligned\r\n\r\nexport const snippetsCentreAligned = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-top-navigation\r\n app-title=\"ICDS\"\r\n status=\"alpha\"\r\n version=\"v0.0.7\"\r\n content-aligned=\"center\"\r\n>\r\n <svg\r\n slot=\"app-icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n width=\"24\"\r\n fill=\"#000000\"\r\n >\r\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\r\n <path\r\n d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\"\r\n />\r\n </svg>\r\n <ic-navigation-button\r\n label=\"Test button\"\r\n slot=\"buttons\"\r\n onclick=\"alert('test')\"\r\n >\r\n <svg\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n width=\"24\"\r\n fill=\"#000000\"\r\n >\r\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\r\n <path\r\n d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\"\r\n />\r\n </svg>\r\n </ic-navigation-button>\r\n <ic-navigation-item\r\n slot=\"navigation\"\r\n label=\"Get started\"\r\n href=\"/\"\r\n ></ic-navigation-item>\r\n <ic-navigation-item\r\n slot=\"navigation\"\r\n label=\"Accessibility\"\r\n href=\"/\"\r\n ></ic-navigation-item>\r\n <ic-navigation-item\r\n slot=\"navigation\"\r\n label=\"Styles\"\r\n href=\"/\"\r\n ></ic-navigation-item>\r\n <ic-navigation-item\r\n slot=\"navigation\"\r\n label=\"Components\"\r\n href=\"/\"\r\n selected=\"true\"\r\n ></ic-navigation-item>\r\n <ic-navigation-item\r\n slot=\"navigation\"\r\n label=\"Patterns\"\r\n href=\"/\"\r\n ></ic-navigation-item>\r\n</ic-top-navigation>`,\r\n long: `{shortCode}`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcTopNavigation\r\n appTitle=\"ICDS\"\r\n status=\"alpha\"\r\n version=\"v0.0.7\"\r\n contentAligned=\"center\"\r\n>\r\n <SlottedSVG\r\n slot=\"app-icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n width=\"24\"\r\n fill=\"#000000\"\r\n >\r\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\r\n <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\" />\r\n </SlottedSVG>\r\n <IcNavigationButton\r\n label=\"Test button\"\r\n slot=\"buttons\"\r\n onClick={() => alert('test')}\r\n >\r\n <SlottedSVG\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n width=\"24\"\r\n fill=\"#000000\"\r\n >\r\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\r\n <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\" />\r\n </SlottedSVG>\r\n </IcNavigationButton>\r\n <IcNavigationItem slot=\"navigation\" label=\"Get started\" href=\"/\" />\r\n <IcNavigationItem slot=\"navigation\" label=\"Accessibility\" href=\"/\" />\r\n <IcNavigationItem slot=\"navigation\" label=\"Styles\" href=\"/\" />\r\n <IcNavigationItem\r\n slot=\"navigation\"\r\n label=\"Components\"\r\n href=\"/\"\r\n selected\r\n />\r\n <IcNavigationItem slot=\"navigation\" label=\"Patterns\" href=\"/\" />\r\n</IcTopNavigation>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `{shortCode}`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `{shortCode}`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview snippets={snippetsCentreAligned}>\r\n <IcTopNavigation\r\n appTitle=\"ICDS\"\r\n status=\"alpha\"\r\n version=\"v0.0.7\"\r\n contentAligned=\"center\"\r\n >\r\n <svg\r\n slot=\"app-icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n width=\"24\"\r\n fill=\"#000000\"\r\n >\r\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\r\n <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\" />\r\n </svg>\r\n <IcNavigationButton\r\n label=\"Test button\"\r\n slot=\"buttons\"\r\n onclick=\"alert('test')\"\r\n >\r\n <svg\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n width=\"24\"\r\n fill=\"#000000\"\r\n >\r\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\r\n <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\" />\r\n </svg>\r\n </IcNavigationButton>\r\n <IcNavigationItem\r\n slot=\"navigation\"\r\n label=\"Get started\"\r\n href=\"#\"\r\n onClick={(e) => e.preventDefault()}\r\n />\r\n <IcNavigationItem\r\n slot=\"navigation\"\r\n label=\"Accessibility\"\r\n href=\"#\"\r\n onClick={(e) => e.preventDefault()}\r\n />\r\n <IcNavigationItem\r\n slot=\"navigation\"\r\n label=\"Styles\"\r\n href=\"#\"\r\n onClick={(e) => e.preventDefault()}\r\n />\r\n <IcNavigationItem\r\n slot=\"navigation\"\r\n label=\"Components\"\r\n href=\"#\"\r\n onClick={(e) => e.preventDefault()}\r\n selected\r\n />\r\n <IcNavigationItem\r\n slot=\"navigation\"\r\n label=\"Patterns\"\r\n href=\"#\"\r\n onClick={(e) => e.preventDefault()}\r\n />\r\n </IcTopNavigation>\r\n</ComponentPreview>\r\n\r\n### Left aligned\r\n\r\nexport const snippetsLeftAligned = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-top-navigation\r\n app-title=\"ICDS\"\r\n status=\"alpha\"\r\n version=\"v0.0.7\"\r\n content-aligned=\"left\"\r\n>\r\n <svg\r\n slot=\"app-icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n width=\"24\"\r\n fill=\"#000000\"\r\n >\r\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\r\n <path\r\n d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\"\r\n />\r\n </svg>\r\n <ic-search-bar\r\n slot=\"search\"\r\n placeholder=\"Search\"\r\n label=\"Search\"\r\n ></ic-search-bar>\r\n <ic-navigation-button\r\n label=\"Test button\"\r\n slot=\"buttons\"\r\n onclick=\"alert('test')\"\r\n >\r\n <svg\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n width=\"24\"\r\n fill=\"#000000\"\r\n >\r\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\r\n <path\r\n d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\"\r\n />\r\n </svg>\r\n </ic-navigation-button>\r\n <ic-navigation-item\r\n slot=\"navigation\"\r\n label=\"Get started\"\r\n href=\"/\"\r\n ></ic-navigation-item>\r\n <ic-navigation-item\r\n slot=\"navigation\"\r\n label=\"Accessibility\"\r\n href=\"/\"\r\n ></ic-navigation-item>\r\n <ic-navigation-item\r\n slot=\"navigation\"\r\n label=\"Styles\"\r\n href=\"/\"\r\n ></ic-navigation-item>\r\n <ic-navigation-item\r\n slot=\"navigation\"\r\n label=\"Components\"\r\n href=\"/\"\r\n selected=\"true\"\r\n ></ic-navigation-item>\r\n <ic-navigation-item\r\n slot=\"navigation\"\r\n label=\"Patterns\"\r\n href=\"/\"\r\n ></ic-navigation-item>\r\n</ic-top-navigation>`,\r\n long: `{shortCode}`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcTopNavigation\r\n appTitle=\"ICDS\"\r\n status=\"alpha\"\r\n version=\"v0.0.7\"\r\n contentAligned=\"left\"\r\n>\r\n <SlottedSVG\r\n slot=\"app-icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n width=\"24\"\r\n fill=\"#000000\"\r\n >\r\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\r\n <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\" />\r\n </SlottedSVG>\r\n <IcSearchBar slot=\"search\" placeholder=\"Search\" label=\"Search\" />\r\n <IcNavigationButton\r\n label=\"Test button\"\r\n slot=\"buttons\"\r\n onClick={() => alert('test')}\r\n >\r\n <SlottedSVG\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n width=\"24\"\r\n fill=\"#000000\"\r\n >\r\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\r\n <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\" />\r\n </SlottedSVG>\r\n </IcNavigationButton>\r\n <IcNavigationItem slot=\"navigation\" label=\"Get started\" href=\"/\" />\r\n <IcNavigationItem slot=\"navigation\" label=\"Accessibility\" href=\"/\" />\r\n <IcNavigationItem slot=\"navigation\" label=\"Styles\" href=\"/\" />\r\n <IcNavigationItem\r\n slot=\"navigation\"\r\n label=\"Components\"\r\n href=\"/\"\r\n selected\r\n />\r\n <IcNavigationItem slot=\"navigation\" label=\"Patterns\" href=\"/\" />\r\n</IcTopNavigation>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `{shortCode}`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `{shortCode}`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview snippets={snippetsLeftAligned}>\r\n <IcTopNavigation\r\n appTitle=\"ICDS\"\r\n status=\"alpha\"\r\n version=\"v0.0.7\"\r\n contentAligned=\"left\"\r\n >\r\n <svg\r\n slot=\"app-icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n width=\"24\"\r\n fill=\"#000000\"\r\n >\r\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\r\n <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\" />\r\n </svg>\r\n <IcSearchBar slot=\"search\" placeholder=\"Search\" label=\"Search\" />\r\n <IcNavigationButton\r\n label=\"Test button\"\r\n slot=\"buttons\"\r\n onclick=\"alert('test')\"\r\n >\r\n <svg\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n width=\"24\"\r\n fill=\"#000000\"\r\n >\r\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\r\n <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\" />\r\n </svg>\r\n </IcNavigationButton>\r\n <IcNavigationItem\r\n slot=\"navigation\"\r\n label=\"Get started\"\r\n href=\"#\"\r\n onClick={(e) => e.preventDefault()}\r\n />\r\n <IcNavigationItem\r\n slot=\"navigation\"\r\n label=\"Accessibility\"\r\n href=\"#\"\r\n onClick={(e) => e.preventDefault()}\r\n />\r\n <IcNavigationItem\r\n slot=\"navigation\"\r\n label=\"Styles\"\r\n href=\"#\"\r\n onClick={(e) => e.preventDefault()}\r\n />\r\n <IcNavigationItem\r\n slot=\"navigation\"\r\n label=\"Components\"\r\n href=\"#\"\r\n onClick={(e) => e.preventDefault()}\r\n selected\r\n />\r\n <IcNavigationItem\r\n slot=\"navigation\"\r\n label=\"Patterns\"\r\n href=\"#\"\r\n onClick={(e) => e.preventDefault()}\r\n />\r\n </IcTopNavigation>\r\n</ComponentPreview>\r\n\r\n### With badge on navigation button\r\n\r\nexport const snippetsBadge = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-top-navigation app-title=\"ICDS\" status=\"alpha\" version=\"v0.0.7\">\r\n <svg\r\n slot=\"app-icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n width=\"24\"\r\n fill=\"#000000\"\r\n >\r\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\r\n <path\r\n d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\"\r\n />\r\n </svg>\r\n <ic-search-bar\r\n slot=\"search\"\r\n placeholder=\"Search\"\r\n label=\"Search\"\r\n ></ic-search-bar>\r\n <ic-navigation-button label=\"Notifications\" slot=\"buttons\">\r\n <ic-badge\r\n text-label=\"4\"\r\n slot=\"badge\"\r\n variant=\"light\"\r\n position=\"near\"\r\n ></ic-badge>\r\n <svg\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n width=\"24\"\r\n fill=\"#000000\"\r\n >\r\n <path\r\n d=\"M12 22c1.1 0 2-.9 2-2h-4c0 1.1.89 2 2 2zm6-6v-5c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z\"\r\n />\r\n </svg>\r\n </ic-navigation-button>\r\n <ic-navigation-item\r\n slot=\"navigation\"\r\n label=\"Get started\"\r\n href=\"#\"\r\n ></ic-navigation-item>\r\n <ic-navigation-item\r\n slot=\"navigation\"\r\n label=\"Accessibility\"\r\n href=\"#\"\r\n ></ic-navigation-item>\r\n <ic-navigation-item\r\n slot=\"navigation\"\r\n label=\"Styles\"\r\n href=\"#\"\r\n ></ic-navigation-item>\r\n <ic-navigation-item\r\n slot=\"navigation\"\r\n label=\"Components\"\r\n href=\"#\"\r\n selected=\"true\"\r\n ></ic-navigation-item>\r\n <ic-navigation-item\r\n slot=\"navigation\"\r\n label=\"Patterns\"\r\n href=\"#\"\r\n ></ic-navigation-item>\r\n</ic-top-navigation>`,\r\n long: `{shortCode}`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcTopNavigation appTitle=\"ICDS\" status=\"alpha\" version=\"v0.0.7\">\r\n <SlottedSVG\r\n slot=\"app-icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n width=\"24\"\r\n fill=\"#000000\"\r\n >\r\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\r\n <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\" />\r\n </SlottedSVG>\r\n <IcSearchBar slot=\"search\" placeholder=\"Search\" label=\"Search\" />\r\n <IcNavigationButton label=\"Notifications\" slot=\"buttons\">\r\n <IcBadge textLabel=\"4\" slot=\"badge\" variant=\"light\" position=\"near\" />\r\n <SlottedSVG\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n width=\"24\"\r\n fill=\"#000000\"\r\n >\r\n <path d=\"M12 22c1.1 0 2-.9 2-2h-4c0 1.1.89 2 2 2zm6-6v-5c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z\" />\r\n </SlottedSVG>\r\n </IcNavigationButton>\r\n <IcNavigationItem slot=\"navigation\" label=\"Get started\" href=\"#\" />\r\n <IcNavigationItem slot=\"navigation\" label=\"Accessibility\" href=\"#\" />\r\n <IcNavigationItem slot=\"navigation\" label=\"Styles\" href=\"#\" />\r\n <IcNavigationItem\r\n slot=\"navigation\"\r\n label=\"Components\"\r\n href=\"#\"\r\n selected\r\n />\r\n <IcNavigationItem slot=\"navigation\" label=\"Patterns\" href=\"#\" />\r\n</IcTopNavigation>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `{shortCode}`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `{shortCode}`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview snippets={snippetsBadge}>\r\n <IcTopNavigation appTitle=\"ICDS\" status=\"alpha\" version=\"v0.0.7\">\r\n <SlottedSVG\r\n slot=\"app-icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n width=\"24\"\r\n fill=\"#000000\"\r\n >\r\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\r\n <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\" />\r\n </SlottedSVG>\r\n <IcSearchBar slot=\"search\" placeholder=\"Search\" label=\"Search\" />\r\n <IcNavigationButton label=\"Notifications\" slot=\"buttons\">\r\n <IcBadge textLabel=\"4\" slot=\"badge\" variant=\"light\" position=\"near\" />\r\n <SlottedSVG\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n width=\"24\"\r\n fill=\"#000000\"\r\n >\r\n <path d=\"M12 22c1.1 0 2-.9 2-2h-4c0 1.1.89 2 2 2zm6-6v-5c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z\" />\r\n </SlottedSVG>\r\n </IcNavigationButton>\r\n <IcNavigationItem\r\n slot=\"navigation\"\r\n label=\"Get started\"\r\n href=\"#\"\r\n onClick={(e) => e.preventDefault()}\r\n />\r\n <IcNavigationItem\r\n slot=\"navigation\"\r\n label=\"Accessibility\"\r\n href=\"#\"\r\n onClick={(e) => e.preventDefault()}\r\n />\r\n <IcNavigationItem\r\n slot=\"navigation\"\r\n label=\"Styles\"\r\n href=\"#\"\r\n onClick={(e) => e.preventDefault()}\r\n />\r\n <IcNavigationItem\r\n slot=\"navigation\"\r\n label=\"Components\"\r\n href=\"#\"\r\n onClick={(e) => e.preventDefault()}\r\n selected\r\n />\r\n <IcNavigationItem\r\n slot=\"navigation\"\r\n label=\"Patterns\"\r\n href=\"#\"\r\n onClick={(e) => e.preventDefault()}\r\n />\r\n </IcTopNavigation>\r\n</ComponentPreview>\r\n\r\n### With short app title\r\n\r\nView on a small screen size to display the short title in place of the app title.\r\n\r\nexport const snippetsShortTitle = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-top-navigation\r\n app-title=\"Intelligence Community Design System\"\r\n short-app-title=\"ICDS\"\r\n status=\"alpha\"\r\n version=\"v0.0.7\"\r\n>\r\n <svg\r\n slot=\"app-icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n width=\"24\"\r\n fill=\"#000000\"\r\n >\r\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\r\n <path\r\n d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\"\r\n />\r\n </svg>\r\n <ic-navigation-item\r\n slot=\"navigation\"\r\n label=\"Get started\"\r\n href=\"/\"\r\n ></ic-navigation-item>\r\n <ic-navigation-item\r\n slot=\"navigation\"\r\n label=\"Accessibility\"\r\n href=\"/\"\r\n ></ic-navigation-item>\r\n <ic-navigation-item\r\n slot=\"navigation\"\r\n label=\"Styles\"\r\n href=\"/\"\r\n ></ic-navigation-item>\r\n <ic-navigation-item\r\n slot=\"navigation\"\r\n label=\"Components\"\r\n href=\"/\"\r\n selected=\"true\"\r\n ></ic-navigation-item>\r\n <ic-navigation-item\r\n slot=\"navigation\"\r\n label=\"Patterns\"\r\n href=\"/\"\r\n ></ic-navigation-item>\r\n</ic-top-navigation>`,\r\n long: `{shortCode}`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcTopNavigation\r\n appTitle=\"Intelligence Community Design System\"\r\n shortAppTitle=\"ICDS\"\r\n status=\"alpha\"\r\n version=\"v0.0.7\"\r\n>\r\n <SlottedSVG\r\n slot=\"app-icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n width=\"24\"\r\n fill=\"#000000\"\r\n >\r\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\r\n <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\" />\r\n </SlottedSVG>\r\n <IcNavigationItem slot=\"navigation\" label=\"Get started\" href=\"#\" />\r\n <IcNavigationItem slot=\"navigation\" label=\"Accessibility\" href=\"#\" />\r\n <IcNavigationItem slot=\"navigation\" label=\"Styles\" href=\"#\" />\r\n <IcNavigationItem\r\n slot=\"navigation\"\r\n label=\"Components\"\r\n href=\"#\"\r\n selected\r\n />\r\n <IcNavigationItem slot=\"navigation\" label=\"Patterns\" href=\"#\" />\r\n</IcTopNavigation>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `{shortCode}`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `{shortCode}`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview snippets={snippetsShortTitle}>\r\n <IcTopNavigation\r\n appTitle=\"Intelligence Community Design System\"\r\n status=\"alpha\"\r\n version=\"v0.0.7\"\r\n shortAppTitle=\"ICDS\"\r\n >\r\n <svg\r\n slot=\"app-icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n width=\"24\"\r\n fill=\"#000000\"\r\n >\r\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\r\n <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\" />\r\n </svg>\r\n <IcNavigationItem\r\n slot=\"navigation\"\r\n label=\"Get started\"\r\n href=\"#\"\r\n onClick={(e) => e.preventDefault()}\r\n />\r\n <IcNavigationItem\r\n slot=\"navigation\"\r\n label=\"Accessibility\"\r\n href=\"#\"\r\n onClick={(e) => e.preventDefault()}\r\n />\r\n <IcNavigationItem\r\n slot=\"navigation\"\r\n label=\"Styles\"\r\n href=\"#\"\r\n onClick={(e) => e.preventDefault()}\r\n />\r\n <IcNavigationItem\r\n slot=\"navigation\"\r\n label=\"Components\"\r\n href=\"#\"\r\n onClick={(e) => e.preventDefault()}\r\n selected\r\n />\r\n <IcNavigationItem\r\n slot=\"navigation\"\r\n label=\"Patterns\"\r\n href=\"#\"\r\n onClick={(e) => e.preventDefault()}\r\n />\r\n </IcTopNavigation>\r\n</ComponentPreview>\r\n\r\n### Conditional tabs\r\n\r\nexport const ConditionalTabsExample = () => {\r\n const [showTabs, setShowTabs] = useState(false);\r\n return (\r\n <>\r\n <IcTopNavigation\r\n appTitle=\"ApplicationName\"\r\n status=\"alpha\"\r\n version=\"v0.0.7\"\r\n >\r\n <SlottedSVG\r\n slot=\"app-icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n width=\"24\"\r\n fill=\"#000000\"\r\n >\r\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\r\n <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\" />\r\n </SlottedSVG>\r\n <IcNavigationItem\r\n label=\"One\"\r\n href=\"/\"\r\n selected=\"true\"\r\n slot=\"navigation\"\r\n />\r\n <IcNavigationItem label=\"Two\" href=\"/\" slot=\"navigation\" />\r\n <IcNavigationItem label=\"Three\" href=\"/\" slot=\"navigation\" />\r\n {showTabs && (\r\n <>\r\n <IcNavigationItem label=\"Four\" href=\"/\" slot=\"navigation\" />\r\n <IcNavigationItem label=\"Five\" href=\"/\" slot=\"navigation\" />\r\n </>\r\n )}\r\n </IcTopNavigation>\r\n <IcButton onClick={() => setShowTabs(!showTabs)}>Show/Hide tabs</IcButton>\r\n </>\r\n );\r\n};\r\n\r\nexport const conditionalTabs = [\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcTopNavigation\r\n appTitle=\"ApplicationName\"\r\n status=\"alpha\"\r\n version=\"v0.0.7\"\r\n>\r\n <SlottedSVG\r\n slot=\"app-icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"24\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"#000000\"\r\n >\r\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\r\n <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\" />\r\n </SlottedSVG>\r\n <IcNavigationItem label=\"One\" href=\"/\" selected slot=\"navigation\" />\r\n <IcNavigationItem label=\"Two\" href=\"/\" slot=\"navigation\" />\r\n <IcNavigationItem label=\"Three\" href=\"/\" slot=\"navigation\" />\r\n {showNavItems && (\r\n <>\r\n <IcNavigationItem label=\"Four\" href=\"/\" slot=\"navigation\" />\r\n <IcNavigationItem label=\"Five\" href=\"/\" slot=\"navigation\" />\r\n </>\r\n )}\r\n</IcTopNavigation>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `const [showNavItems, setShowNavItems] = useState<boolean>(false);\r\nreturn (\r\n <>\r\n {shortCode}\r\n <IcButton onClick={() => setShowNavItems(!showNavItems)}>Show/Hide nav items</IcButton>\r\n </>\r\n)`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `const [showNavItems, setShowNavItems] = useState(false);\r\nreturn (\r\n <>\r\n {shortCode}\r\n <IcButton onClick={() => setShowNavItems(!showNavItems)}>Show/Hide nav items</IcButton>\r\n </>\r\n)`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview\r\n snippets={conditionalTabs}\r\n style={{ display: \"flex\", flexDirection: \"column\" }}\r\n>\r\n <ConditionalTabsExample />\r\n</ComponentPreview>\r\n\r\n### With React Router (using slots)\r\n\r\nThe following examples also demonstrate using a slotted link for app title, short app title and app icon.\r\n\r\nTo guarantee the correct styling for non-svg content slotted into app-icon, set `width`, `height` and `fill` to `inherit`.\r\n\r\nexport const withReactRouter = [\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<MemoryRouter initialEntries={[\"/\"]}>\r\n <IcTopNavigation version=\"v0.0.7\">\r\n <NavLink to=\"/\" slot=\"app-title\">\r\n ICDS Title\r\n </NavLink>\r\n <NavLink to=\"/\" slot=\"short-app-title\">\r\n ICDS\r\n </NavLink>\r\n <NavLink to=\"/\" slot=\"app-icon\">\r\n <SlottedSVG\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n height=\"inherit\"\r\n viewBox=\"0 0 24 24\"\r\n width=\"inherit\"\r\n fill=\"inherit\"\r\n >\r\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\r\n <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\" />\r\n </SlottedSVG>\r\n </NavLink>\r\n <IcSearchBar slot=\"search\" placeholder=\"Search\" label=\"Search\" />\r\n <IcNavigationButton\r\n label=\"Test button\"\r\n slot=\"buttons\"\r\n onClick={() => alert(\"test\")}\r\n >\r\n <SlottedSVG\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n width=\"24\"\r\n fill=\"#000000\"\r\n >\r\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\r\n <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\" />\r\n </SlottedSVG>\r\n </IcNavigationButton>\r\n <IcNavigationItem slot=\"navigation\">\r\n <NavLink to=\"/\" slot=\"navigation-item\">\r\n Get started\r\n </NavLink>\r\n </IcNavigationItem>\r\n <IcNavigationItem slot=\"navigation\">\r\n <NavLink to=\"/accessibility\" slot=\"navigation-item\">\r\n Accessibility\r\n </NavLink>\r\n </IcNavigationItem>\r\n </IcTopNavigation>\r\n <main>\r\n <IcSectionContainer className={classes.sectionContainer}>\r\n <Routes>\r\n <Route\r\n path=\"/\"\r\n element={\r\n <IcTypography>This is the get started page</IcTypography>\r\n }\r\n />\r\n <Route\r\n path=\"/accessibility\"\r\n element={\r\n <IcTypography>This page is about accessibility</IcTypography>\r\n }\r\n />\r\n </Routes>\r\n </IcSectionContainer>\r\n </main>\r\n</MemoryRouter>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `const useStyles = createUseStyles({\r\n sectionContainer: {\r\n padding: \"var(--ic-space-md)\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nreturn (\r\n {shortCode}\r\n)`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `const useStyles = createUseStyles({\r\n sectionContainer: {\r\n padding: \"var(--ic-space-md)\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nreturn (\r\n {shortCode}\r\n)}`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview\r\n snippets={withReactRouter}\r\n style={{ display: \"flex\", flexDirection: \"column\" }}\r\n>\r\n <MemoryRouter initialEntries={[\"/\"]}>\r\n <IcTopNavigation version=\"v0.0.7\">\r\n <NavLink to=\"/\" slot=\"app-title\">\r\n ICDS Title\r\n </NavLink>\r\n <NavLink to=\"/\" slot=\"short-app-title\">\r\n ICDS\r\n </NavLink>\r\n <NavLink to=\"/\" slot=\"app-icon\">\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n height=\"inherit\"\r\n viewBox=\"0 0 24 24\"\r\n width=\"inherit\"\r\n fill=\"inherit\"\r\n >\r\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\r\n <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\" />\r\n </svg>\r\n </NavLink>\r\n <IcSearchBar slot=\"search\" placeholder=\"Search\" label=\"Search\" />\r\n <IcNavigationButton\r\n label=\"Test button\"\r\n slot=\"buttons\"\r\n onClick={() => alert(\"test\")}\r\n >\r\n <svg\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n width=\"24\"\r\n fill=\"#000000\"\r\n >\r\n <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\r\n <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\" />\r\n </svg>\r\n </IcNavigationButton>\r\n <IcNavigationItem slot=\"navigation\">\r\n <NavLink to=\"/\" slot=\"navigation-item\">\r\n Get started\r\n </NavLink>\r\n </IcNavigationItem>\r\n <IcNavigationItem slot=\"navigation\">\r\n <NavLink to=\"/accessibility\" slot=\"navigation-item\">\r\n Accessibility\r\n </NavLink>\r\n </IcNavigationItem>\r\n </IcTopNavigation>\r\n </MemoryRouter>\r\n</ComponentPreview>\r\n\r\n## Layout example\r\n\r\nFor full screen examples, see [top navigation patterns](/patterns/navigation-patterns/top-navigation-layout).\r\n",
"path": "/components/top-navigation/code",
"date": "2024-06-07",
"title": "Top navigation",
@@ -4359,11 +4359,11 @@
}
],
"meta": {
- "relativePath": "components/top-nav/code.mdx",
- "createdAt": "2024-11-06T10:27:49.404Z",
- "lastModified": "2024-11-06T10:19:00.164Z",
- "size": 41136,
- "formattedSize": "40.2 KB"
+ "relativePath": "components\\top-nav\\code.mdx",
+ "createdAt": "2024-12-04T13:23:54.125Z",
+ "lastModified": "2024-12-04T13:23:54.125Z",
+ "size": 42533,
+ "formattedSize": "41.5 KB"
}
},
{
@@ -4392,16 +4392,16 @@
],
"tags": ["Navigation bar"],
"meta": {
- "relativePath": "components/top-nav/guidance.mdx",
- "createdAt": "2024-11-06T10:27:49.404Z",
- "lastModified": "2024-11-06T10:19:00.164Z",
+ "relativePath": "components\\top-nav\\guidance.mdx",
+ "createdAt": "2024-11-05T11:57:54.426Z",
+ "lastModified": "2024-11-05T11:57:54.426Z",
"size": 11266,
"formattedSize": "11.0 KB"
}
},
{
"id": "components\\tree-view\\codex",
- "contents": "\nimport { IcTreeView, IcTreeItem } from \"@ukic/canary-react\";\nimport { IcTypography, SlottedSVG } from \"@ukic/react\";\n\n## Component demo\n\nexport const snippetsDefault = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-tree-view heading=\"Menu\">\n <ic-tree-item label=\"Coffee\"></ic-tree-item>\n <ic-tree-item label=\"Tea\"></ic-tree-item>\n <ic-tree-item label=\"Hot chocolate\"></ic-tree-item>\n</ic-tree-view>`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcTreeView heading=\"Menu\">\n <IcTreeItem label=\"Coffee\" />\n <IcTreeItem label=\"Tea\" />\n <IcTreeItem label=\"Hot chocolate\" />\n </IcTreeView>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `{shortCode}`,\n },\n {\n language: \"Javascript\",\n snippet: `{shortCode}`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={snippetsDefault}>\n <div style={{ width: \"250px\" }}>\n <IcTreeView heading=\"Menu\">\n <IcTreeItem label=\"Coffee\" />\n <IcTreeItem label=\"Tea\" />\n <IcTreeItem label=\"Hot chocolate\" />\n </IcTreeView>\n </div>\n</ComponentPreview>\n\n## Tree view details\n\n<ComponentDetails component=\"ic-tree-view\" canary />\n\n## Tree item details\n\n<ComponentDetails component=\"ic-tree-item\" canary />\n\n## Variants\n\n### Nested levels\n\nexport const snippetsNested = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-tree-view heading=\"Menu\">\n <ic-tree-item label=\"Coffee\">\n <ic-tree-item label=\"Americano\"></ic-tree-item>\n <ic-tree-item label=\"Latte\"></ic-tree-item>\n <ic-tree-item label=\"Espresso\"></ic-tree-item>\n </ic-tree-item>\n <ic-tree-item label=\"Tea\">\n <ic-tree-item label=\"Earl Grey\"></ic-tree-item>\n <ic-tree-item label=\"Chai\"></ic-tree-item>\n </ic-tree-item>\n <ic-tree-item label=\"Hot chocolate\"></ic-tree-item>\n</ic-tree-view>`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcTreeView heading=\"Menu\">\n <IcTreeItem label=\"Coffee\">\n <IcTreeItem label=\"Americano\" />\n <IcTreeItem label=\"Latte\" />\n <IcTreeItem label=\"Espresso\" />\n </IcTreeItem>\n <IcTreeItem label=\"Tea\">\n <IcTreeItem label=\"Earl Grey\" />\n <IcTreeItem label=\"Chai\" />\n </IcTreeItem>\n <IcTreeItem label=\"Hot chocolate\" />\n</IcTreeView>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `{shortCode}`,\n },\n {\n language: \"Javascript\",\n snippet: `{shortCode}`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={snippetsNested}>\n <div style={{ width: \"250px\" }}>\n <IcTreeView heading=\"Menu\">\n <IcTreeItem label=\"Coffee\">\n <IcTreeItem label=\"Americano\" />\n <IcTreeItem label=\"Latte\" />\n <IcTreeItem label=\"Espresso\" />\n </IcTreeItem>\n <IcTreeItem label=\"Tea\">\n <IcTreeItem label=\"Earl Grey\" />\n <IcTreeItem label=\"Chai\" />\n </IcTreeItem>\n <IcTreeItem label=\"Hot chocolate\" />\n </IcTreeView>\n </div>\n</ComponentPreview>\n\n### Slotted icons\n\nexport const snippetsIcons = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-tree-view heading=\"Menu\">\n <svg slot=\"icon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <path\n d=\"M10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6H12L10,4Z\"\n />\n </svg>\n <ic-tree-item label=\"Coffee\">\n <svg slot=\"icon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <path\n d=\"M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z\"\n />\n </svg>\n <ic-tree-item label=\"Americano\"></ic-tree-item>\n <ic-tree-item label=\"Latte\">\n <svg slot=\"icon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <path\n d=\"M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z\"\n />\n </svg>\n </ic-tree-item>\n <ic-tree-item label=\"Espresso\"></ic-tree-item>\n </ic-tree-item>\n <ic-tree-item label=\"Tea\">\n <ic-tree-item label=\"Earl Grey\"></ic-tree-item>\n <ic-tree-item label=\"Chai\"></ic-tree-item>\n </ic-tree-item>\n <ic-tree-item label=\"Hot chocolate\"></ic-tree-item>\n</ic-tree-view>`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcTreeView heading=\"Menu\">\n <SlottedSVG slot=\"icon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <path\n d=\"M10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6H12L10,4Z\"\n />\n </SlottedSVG>\n <IcTreeItem label=\"Coffee\">\n <SlottedSVG\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n >\n <path\n d=\"M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z\"\n />\n </SlottedSVG>\n <IcTreeItem label=\"Americano\" />\n <IcTreeItem label=\"Latte\">\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n >\n <path\n d=\"M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z\"\n />\n </svg>\n </IcTreeItem>\n <IcTreeItem label=\"Espresso\" />\n </IcTreeItem>\n <IcTreeItem label=\"Tea\">\n <IcTreeItem label=\"Earl Grey\" />\n <IcTreeItem label=\"Chai\" />\n </IcTreeItem>\n <IcTreeItem label=\"Hot chocolate\" />\n</IcTreeView>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `{shortCode}`,\n },\n {\n language: \"Javascript\",\n snippet: `{shortCode}`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={snippetsIcons}>\n <div style={{ width: \"250px\" }}>\n <IcTreeView heading=\"Menu\">\n <SlottedSVG\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n >\n <path d=\"M10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6H12L10,4Z\" />\n </SlottedSVG>\n <IcTreeItem label=\"Coffee\">\n <SlottedSVG\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n >\n <path d=\"M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z\" />\n </SlottedSVG>\n <IcTreeItem label=\"Americano\" />\n <IcTreeItem label=\"Latte\">\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n >\n <path d=\"M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z\" />\n </svg>\n </IcTreeItem>\n <IcTreeItem label=\"Espresso\" />\n </IcTreeItem>\n <IcTreeItem label=\"Tea\">\n <IcTreeItem label=\"Earl Grey\" />\n <IcTreeItem label=\"Chai\" />\n </IcTreeItem>\n <IcTreeItem label=\"Hot chocolate\" />\n </IcTreeView>\n </div>\n</ComponentPreview>\n\n### Small\n\nexport const snippetsSmall = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-tree-view heading=\"Menu\" size=\"small\">\n <svg slot=\"icon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <path\n d=\"M10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6H12L10,4Z\"\n />\n </svg>\n <ic-tree-item label=\"Coffee\">\n <svg slot=\"icon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <path\n d=\"M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z\"\n />\n </svg>\n <ic-tree-item label=\"Americano\"></ic-tree-item>\n <ic-tree-item label=\"Latte\">\n <svg slot=\"icon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <path\n d=\"M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z\"\n />\n </svg>\n </ic-tree-item>\n <ic-tree-item label=\"Espresso\"></ic-tree-item>\n </ic-tree-item>\n <ic-tree-item label=\"Tea\">\n <ic-tree-item label=\"Earl Grey\"></ic-tree-item>\n <ic-tree-item label=\"Chai\"></ic-tree-item>\n </ic-tree-item>\n <ic-tree-item label=\"Hot chocolate\"></ic-tree-item>\n</ic-tree-view>`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcTreeView heading=\"Menu\" size=\"small\">\n <SlottedSVG slot=\"icon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <path\n d=\"M10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6H12L10,4Z\"\n />\n </SlottedSVG>\n <IcTreeItem label=\"Coffee\">\n <SlottedSVG\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n >\n <path\n d=\"M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z\"\n />\n </SlottedSVG>\n <IcTreeItem label=\"Americano\" />\n <IcTreeItem label=\"Latte\">\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n >\n <path\n d=\"M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z\"\n />\n </svg>\n </IcTreeItem>\n <IcTreeItem label=\"Espresso\" />\n </IcTreeItem>\n <IcTreeItem label=\"Tea\">\n <IcTreeItem label=\"Earl Grey\" />\n <IcTreeItem label=\"Chai\" />\n </IcTreeItem>\n <IcTreeItem label=\"Hot chocolate\" />\n</IcTreeView>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `{shortCode}`,\n },\n {\n language: \"Javascript\",\n snippet: `{shortCode}`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={snippetsSmall}>\n <div style={{ width: \"250px\" }}>\n <IcTreeView heading=\"Menu\" size=\"small\">\n <SlottedSVG\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n >\n <path d=\"M10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6H12L10,4Z\" />\n </SlottedSVG>\n <IcTreeItem label=\"Coffee\">\n <SlottedSVG\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n >\n <path d=\"M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z\" />\n </SlottedSVG>\n <IcTreeItem label=\"Americano\" />\n <IcTreeItem label=\"Latte\">\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n >\n <path d=\"M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z\" />\n </svg>\n </IcTreeItem>\n <IcTreeItem label=\"Espresso\" />\n </IcTreeItem>\n <IcTreeItem label=\"Tea\">\n <IcTreeItem label=\"Earl Grey\" />\n <IcTreeItem label=\"Chai\" />\n </IcTreeItem>\n <IcTreeItem label=\"Hot chocolate\" />\n </IcTreeView>\n </div>\n</ComponentPreview>\n\n### Large\n\nexport const snippetsLarge = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-tree-view heading=\"Menu\" size=\"large\">\n <svg slot=\"icon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <path\n d=\"M10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6H12L10,4Z\"\n />\n </svg>\n <ic-tree-item label=\"Coffee\">\n <svg slot=\"icon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <path\n d=\"M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z\"\n />\n </svg>\n <ic-tree-item label=\"Americano\"></ic-tree-item>\n <ic-tree-item label=\"Latte\">\n <svg slot=\"icon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <path\n d=\"M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z\"\n />\n </svg>\n </ic-tree-item>\n <ic-tree-item label=\"Espresso\"></ic-tree-item>\n </ic-tree-item>\n <ic-tree-item label=\"Tea\">\n <ic-tree-item label=\"Earl Grey\"></ic-tree-item>\n <ic-tree-item label=\"Chai\"></ic-tree-item>\n </ic-tree-item>\n <ic-tree-item label=\"Hot chocolate\"></ic-tree-item>\n</ic-tree-view>`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcTreeView heading=\"Menu\" size=\"large\">\n <SlottedSVG slot=\"icon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <path\n d=\"M10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6H12L10,4Z\"\n />\n </SlottedSVG>\n <IcTreeItem label=\"Coffee\">\n <SlottedSVG\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n >\n <path\n d=\"M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z\"\n />\n </SlottedSVG>\n <IcTreeItem label=\"Americano\" />\n <IcTreeItem label=\"Latte\">\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n >\n <path\n d=\"M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z\"\n />\n </svg>\n </IcTreeItem>\n <IcTreeItem label=\"Espresso\" />\n </IcTreeItem>\n <IcTreeItem label=\"Tea\">\n <IcTreeItem label=\"Earl Grey\" />\n <IcTreeItem label=\"Chai\" />\n </IcTreeItem>\n <IcTreeItem label=\"Hot chocolate\" />\n</IcTreeView>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `{shortCode}`,\n },\n {\n language: \"Javascript\",\n snippet: `{shortCode}`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={snippetsLarge}>\n <div style={{ width: \"250px\" }}>\n <IcTreeView heading=\"Menu\" size=\"large\">\n <SlottedSVG\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n >\n <path d=\"M10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6H12L10,4Z\" />\n </SlottedSVG>\n <IcTreeItem label=\"Coffee\">\n <SlottedSVG\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n >\n <path d=\"M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z\" />\n </SlottedSVG>\n <IcTreeItem label=\"Americano\" />\n <IcTreeItem label=\"Latte\">\n <svg\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n >\n <path d=\"M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z\" />\n </svg>\n </IcTreeItem>\n <IcTreeItem label=\"Espresso\" />\n </IcTreeItem>\n <IcTreeItem label=\"Tea\">\n <IcTreeItem label=\"Earl Grey\" />\n <IcTreeItem label=\"Chai\" />\n </IcTreeItem>\n <IcTreeItem label=\"Hot chocolate\" />\n </IcTreeView>\n </div>\n</ComponentPreview>\n\n### Light\n\nexport const snippetsLight = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-tree-view heading=\"Menu\" appearance=\"light\">\n <svg slot=\"icon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <path\n d=\"M10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6H12L10,4Z\"\n />\n </svg>\n <ic-tree-item label=\"Coffee\">\n <svg slot=\"icon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <path\n d=\"M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z\"\n />\n </svg>\n <ic-tree-item label=\"Americano\"></ic-tree-item>\n <ic-tree-item label=\"Latte\">\n <svg slot=\"icon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <path\n d=\"M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z\"\n />\n </svg>\n </ic-tree-item>\n <ic-tree-item label=\"Espresso\"></ic-tree-item>\n </ic-tree-item>\n <ic-tree-item label=\"Tea\">\n <ic-tree-item label=\"Earl Grey\"></ic-tree-item>\n <ic-tree-item label=\"Chai\"></ic-tree-item>\n </ic-tree-item>\n <ic-tree-item label=\"Hot chocolate\"></ic-tree-item>\n</ic-tree-view>`,\n long: `.dark-background {\n flex-direction: column; \n gap: var(--ic-space-xs); \n background: #333333;\n }\n </style>\n <body>\n <div class=\"dark-background\">\n {shortCode}\n </div>`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcTreeView heading=\"Menu\" appearance=\"light\">\n <SlottedSVG slot=\"icon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <path\n d=\"M10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6H12L10,4Z\"\n />\n </SlottedSVG>\n <IcTreeItem label=\"Coffee\">\n <SlottedSVG\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n >\n <path\n d=\"M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z\"\n />\n </SlottedSVG>\n <IcTreeItem label=\"Americano\" />\n <IcTreeItem label=\"Latte\">\n <SlottedSVG\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n >\n <path\n d=\"M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z\"\n />\n </SlottedSVG>\n </IcTreeItem>\n <IcTreeItem label=\"Espresso\" />\n </IcTreeItem>\n <IcTreeItem label=\"Tea\">\n <IcTreeItem label=\"Earl Grey\" />\n <IcTreeItem label=\"Chai\" />\n </IcTreeItem>\n <IcTreeItem label=\"Hot chocolate\" />\n</IcTreeView>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n darkBackground: {\n display: \"flex\",\n flexDirection: \"column\", \n gap: \"var(--ic-space-xs)\", \n background: \"#333333\",\n },\n});\nconst classes = useStyles();\nreturn (\n <div className={classes.darkBackground}>\n {shortCode}\n </div>\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n darkBackground: {\n display: \"flex\",\n flexDirection: \"column\", \n gap: \"var(--ic-space-xs)\", \n background: \"#333333\",\n },\n});\nconst classes = useStyles();\nreturn (\n <div className={classes.darkBackground}>\n {shortCode}\n </div>\n)`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={snippetsLight} style={{ background: \"#333333\" }}>\n <div style={{ width: \"250px\" }}>\n <IcTreeView heading=\"Menu\" appearance=\"light\">\n <SlottedSVG\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n >\n <path d=\"M10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6H12L10,4Z\" />\n </SlottedSVG>\n <IcTreeItem label=\"Coffee\">\n <SlottedSVG\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n >\n <path d=\"M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z\" />\n </SlottedSVG>\n <IcTreeItem label=\"Americano\" />\n <IcTreeItem label=\"Latte\">\n <SlottedSVG\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n >\n <path d=\"M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z\" />\n </SlottedSVG>\n </IcTreeItem>\n <IcTreeItem label=\"Espresso\" />\n </IcTreeItem>\n <IcTreeItem label=\"Tea\">\n <IcTreeItem label=\"Earl Grey\" />\n <IcTreeItem label=\"Chai\" />\n </IcTreeItem>\n <IcTreeItem label=\"Hot chocolate\" />\n </IcTreeView>\n </div>\n</ComponentPreview>\n\n### Disabled tree items\n\nexport const snippetsDisabled = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-tree-view heading=\"Menu\">\n <svg slot=\"icon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <path\n d=\"M10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6H12L10,4Z\"\n />\n </svg>\n <ic-tree-item label=\"Coffee\">\n <svg slot=\"icon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <path\n d=\"M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z\"\n />\n </svg>\n <ic-tree-item label=\"Americano\"></ic-tree-item>\n <ic-tree-item label=\"Latte\" disabled=\"true\">\n <svg slot=\"icon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <path\n d=\"M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z\"\n />\n </svg>\n </ic-tree-item>\n <ic-tree-item label=\"Espresso\"></ic-tree-item>\n </ic-tree-item>\n <ic-tree-item label=\"Tea\">\n <ic-tree-item label=\"Earl Grey\"></ic-tree-item>\n <ic-tree-item label=\"Chai\" disabled=\"true\"></ic-tree-item>\n </ic-tree-item>\n <ic-tree-item label=\"Hot chocolate\" disabled=\"true\"></ic-tree-item>\n</ic-tree-view>`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcTreeView heading=\"Menu\">\n <SlottedSVG slot=\"icon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <path\n d=\"M10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6H12L10,4Z\"\n />\n </SlottedSVG>\n <IcTreeItem label=\"Coffee\">\n <SlottedSVG\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n >\n <path\n d=\"M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z\"\n />\n </SlottedSVG>\n <IcTreeItem label=\"Americano\" />\n <IcTreeItem label=\"Latte\" disabled>\n <SlottedSVG\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n >\n <path\n d=\"M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z\"\n />\n </SlottedSVG>\n </IcTreeItem>\n <IcTreeItem label=\"Espresso\" />\n </IcTreeItem>\n <IcTreeItem label=\"Tea\">\n <IcTreeItem label=\"Earl Grey\" />\n <IcTreeItem label=\"Chai\" disabled />\n </IcTreeItem>\n <IcTreeItem label=\"Hot chocolate\" disabled />\n</IcTreeView>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `{shortCode}`,\n },\n {\n language: \"Javascript\",\n snippet: `{shortCode}`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={snippetsDisabled}>\n <div style={{ width: \"250px\" }}>\n <IcTreeView heading=\"Menu\">\n <SlottedSVG\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n >\n <path d=\"M10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6H12L10,4Z\" />\n </SlottedSVG>\n <IcTreeItem label=\"Coffee\">\n <SlottedSVG\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n >\n <path d=\"M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z\" />\n </SlottedSVG>\n <IcTreeItem label=\"Americano\" />\n <IcTreeItem label=\"Latte\" disabled>\n <SlottedSVG\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n >\n <path d=\"M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z\" />\n </SlottedSVG>\n </IcTreeItem>\n <IcTreeItem label=\"Espresso\" />\n </IcTreeItem>\n <IcTreeItem label=\"Tea\">\n <IcTreeItem label=\"Earl Grey\" />\n <IcTreeItem label=\"Chai\" disabled />\n </IcTreeItem>\n <IcTreeItem label=\"Hot chocolate\" disabled />\n </IcTreeView>\n </div>\n</ComponentPreview>\n\n### Slotted content\n\nexport const snippetsSlotted = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-tree-view>\n <ic-typography variant=\"subtitle-large\" slot=\"heading\">Menu</ic-typography>\n <ic-tree-item>\n <ic-typography slot=\"label\">Coffee</ic-typography>\n </ic-tree-item>\n <ic-tree-item label=\"Tea\"></ic-tree-item>\n <ic-tree-item label=\"Hot chocolate\"></ic-tree-item>\n</ic-tree-view>`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcTreeView>\n <IcTypography variant=\"subtitle-large\" slot=\"heading\">Menu</IcTypography>\n <IcTreeItem>\n <IcTypography slot=\"label\">Coffee</IcTypography>\n </IcTreeItem>\n <IcTreeItem label=\"Tea\" />\n <IcTreeItem label=\"Hot chocolate\" />\n</IcTreeView>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `{shortCode}`,\n },\n {\n language: \"Javascript\",\n snippet: `{shortCode}`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={snippetsSlotted}>\n <div style={{ width: \"250px\" }}>\n <IcTreeView>\n <IcTypography variant=\"subtitle-large\" slot=\"heading\">\n Menu\n </IcTypography>\n <IcTreeItem>\n <IcTypography slot=\"label\">Coffee</IcTypography>\n </IcTreeItem>\n <IcTreeItem label=\"Tea\" />\n <IcTreeItem label=\"Hot chocolate\" />\n </IcTreeView>\n </div>\n</ComponentPreview>\n\n### Truncated\n\nexport const snippetsTruncated = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-tree-view heading=\"Menu with nested options\">\n <svg slot=\"icon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <path\n d=\"M10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6H12L10,4Z\"\n />\n </svg>\n <ic-tree-item label=\"Coffee\">\n <svg slot=\"icon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <path\n d=\"M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z\"\n />\n </svg>\n <ic-tree-item label=\"Americano\"></ic-tree-item>\n <ic-tree-item label=\"Latte with extra milk and sugar\"></ic-tree-item>\n <ic-tree-item label=\"Espresso\"></ic-tree-item>\n </ic-tree-item>\n <ic-tree-item label=\"Tea\">\n <ic-tree-item label=\"Earl Grey\"></ic-tree-item>\n <ic-tree-item label=\"Chai\"></ic-tree-item>\n </ic-tree-item>\n <ic-tree-item label=\"Hot chocolate with marshmallows\"></ic-tree-item>\n</ic-tree-view>`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcTreeView heading=\"Menu with nested options\">\n <SlottedSVG slot=\"icon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <path\n d=\"M10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6H12L10,4Z\"\n />\n </SlottedSVG>\n <IcTreeItem label=\"Coffee\">\n <SlottedSVG\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n >\n <path\n d=\"M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z\"\n />\n </SlottedSVG>\n <IcTreeItem label=\"Americano\" />\n <IcTreeItem label=\"Latte with extra milk and sugar\" />\n <IcTreeItem label=\"Espresso\" />\n </IcTreeItem>\n <IcTreeItem label=\"Tea\">\n <IcTreeItem label=\"Earl Grey\" />\n <IcTreeItem label=\"Chai\" />\n </IcTreeItem>\n <IcTreeItem label=\"Hot chocolate with marshmallows\" />\n</IcTreeView>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `{shortCode}`,\n },\n {\n language: \"Javascript\",\n snippet: `{shortCode}`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={snippetsTruncated}>\n <div style={{ width: \"250px\" }}>\n <IcTreeView heading=\"Menu with nested options\">\n <SlottedSVG\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n >\n <path d=\"M10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6H12L10,4Z\" />\n </SlottedSVG>\n <IcTreeItem label=\"Coffee\">\n <SlottedSVG\n slot=\"icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n >\n <path d=\"M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z\" />\n </SlottedSVG>\n <IcTreeItem label=\"Americano\" />\n <IcTreeItem label=\"Latte with extra milk and sugar\" />\n <IcTreeItem label=\"Espresso\" />\n </IcTreeItem>\n <IcTreeItem label=\"Tea\">\n <IcTreeItem label=\"Earl Grey\" />\n <IcTreeItem label=\"Chai\" />\n </IcTreeItem>\n <IcTreeItem label=\"Hot chocolate with marshmallows\" />\n </IcTreeView>\n </div>\n</ComponentPreview>\n\n### Link\n\nexport const snippetsLink = [\n {\n technology: \"Web component\",\n snippets: {\n short: `<ic-tree-view heading=\"Menu\">\n <ic-tree-item label=\"Coffee\" href=\"#\"></ic-tree-item>\n <ic-tree-item label=\"Tea\" selected=\"true\" href=\"#\"></ic-tree-item>\n <ic-tree-item label=\"Hot chocolate\" disabled=\"true\" href=\"#\"></ic-tree-item>\n</ic-tree-view>`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `<IcTreeView heading=\"Menu\">\n <IcTreeItem label=\"Coffee\" href=\"#\" />\n <IcTreeItem label=\"Tea\" selected href=\"#\" />\n <IcTreeItem label=\"Hot chocolate\" disabled href=\"#\" />\n</IcTreeView>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `{shortCode}`,\n },\n {\n language: \"Javascript\",\n snippet: `{shortCode}`,\n },\n ],\n },\n },\n];\n\n<ComponentPreview snippets={snippetsLink}>\n <div style={{ width: \"250px\" }}>\n <IcTreeView heading=\"Menu\">\n <IcTreeItem label=\"Coffee\" href=\"#\" />\n <IcTreeItem label=\"Tea\" selected href=\"#\" />\n <IcTreeItem label=\"Hot chocolate\" disabled href=\"#\" />\n </IcTreeView>\n </div>\n</ComponentPreview>\n",
+ "contents": "\r\nimport { IcTreeView, IcTreeItem } from \"@ukic/canary-react\";\r\nimport { IcTypography, SlottedSVG } from \"@ukic/react\";\r\n\r\n## Component demo\r\n\r\nexport const snippetsDefault = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-tree-view heading=\"Menu\">\r\n <ic-tree-item label=\"Coffee\"></ic-tree-item>\r\n <ic-tree-item label=\"Tea\"></ic-tree-item>\r\n <ic-tree-item label=\"Hot chocolate\"></ic-tree-item>\r\n</ic-tree-view>`,\r\n long: `{shortCode}`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcTreeView heading=\"Menu\">\r\n <IcTreeItem label=\"Coffee\" />\r\n <IcTreeItem label=\"Tea\" />\r\n <IcTreeItem label=\"Hot chocolate\" />\r\n </IcTreeView>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `{shortCode}`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `{shortCode}`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview snippets={snippetsDefault}>\r\n <div style={{ width: \"250px\" }}>\r\n <IcTreeView heading=\"Menu\">\r\n <IcTreeItem label=\"Coffee\" />\r\n <IcTreeItem label=\"Tea\" />\r\n <IcTreeItem label=\"Hot chocolate\" />\r\n </IcTreeView>\r\n </div>\r\n</ComponentPreview>\r\n\r\n## Tree view details\r\n\r\n<ComponentDetails component=\"ic-tree-view\" canary />\r\n\r\n## Tree item details\r\n\r\n<ComponentDetails component=\"ic-tree-item\" canary />\r\n\r\n## Variants\r\n\r\n### Nested levels\r\n\r\nexport const snippetsNested = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-tree-view heading=\"Menu\">\r\n <ic-tree-item label=\"Coffee\">\r\n <ic-tree-item label=\"Americano\"></ic-tree-item>\r\n <ic-tree-item label=\"Latte\"></ic-tree-item>\r\n <ic-tree-item label=\"Espresso\"></ic-tree-item>\r\n </ic-tree-item>\r\n <ic-tree-item label=\"Tea\">\r\n <ic-tree-item label=\"Earl Grey\"></ic-tree-item>\r\n <ic-tree-item label=\"Chai\"></ic-tree-item>\r\n </ic-tree-item>\r\n <ic-tree-item label=\"Hot chocolate\"></ic-tree-item>\r\n</ic-tree-view>`,\r\n long: `{shortCode}`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcTreeView heading=\"Menu\">\r\n <IcTreeItem label=\"Coffee\">\r\n <IcTreeItem label=\"Americano\" />\r\n <IcTreeItem label=\"Latte\" />\r\n <IcTreeItem label=\"Espresso\" />\r\n </IcTreeItem>\r\n <IcTreeItem label=\"Tea\">\r\n <IcTreeItem label=\"Earl Grey\" />\r\n <IcTreeItem label=\"Chai\" />\r\n </IcTreeItem>\r\n <IcTreeItem label=\"Hot chocolate\" />\r\n</IcTreeView>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `{shortCode}`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `{shortCode}`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview snippets={snippetsNested}>\r\n <div style={{ width: \"250px\" }}>\r\n <IcTreeView heading=\"Menu\">\r\n <IcTreeItem label=\"Coffee\">\r\n <IcTreeItem label=\"Americano\" />\r\n <IcTreeItem label=\"Latte\" />\r\n <IcTreeItem label=\"Espresso\" />\r\n </IcTreeItem>\r\n <IcTreeItem label=\"Tea\">\r\n <IcTreeItem label=\"Earl Grey\" />\r\n <IcTreeItem label=\"Chai\" />\r\n </IcTreeItem>\r\n <IcTreeItem label=\"Hot chocolate\" />\r\n </IcTreeView>\r\n </div>\r\n</ComponentPreview>\r\n\r\n### Slotted icons\r\n\r\nexport const snippetsIcons = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-tree-view heading=\"Menu\">\r\n <svg slot=\"icon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\r\n <path\r\n d=\"M10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6H12L10,4Z\"\r\n />\r\n </svg>\r\n <ic-tree-item label=\"Coffee\">\r\n <svg slot=\"icon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\r\n <path\r\n d=\"M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z\"\r\n />\r\n </svg>\r\n <ic-tree-item label=\"Americano\"></ic-tree-item>\r\n <ic-tree-item label=\"Latte\">\r\n <svg slot=\"icon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\r\n <path\r\n d=\"M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z\"\r\n />\r\n </svg>\r\n </ic-tree-item>\r\n <ic-tree-item label=\"Espresso\"></ic-tree-item>\r\n </ic-tree-item>\r\n <ic-tree-item label=\"Tea\">\r\n <ic-tree-item label=\"Earl Grey\"></ic-tree-item>\r\n <ic-tree-item label=\"Chai\"></ic-tree-item>\r\n </ic-tree-item>\r\n <ic-tree-item label=\"Hot chocolate\"></ic-tree-item>\r\n</ic-tree-view>`,\r\n long: `{shortCode}`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcTreeView heading=\"Menu\">\r\n <SlottedSVG slot=\"icon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\r\n <path\r\n d=\"M10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6H12L10,4Z\"\r\n />\r\n </SlottedSVG>\r\n <IcTreeItem label=\"Coffee\">\r\n <SlottedSVG\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n >\r\n <path\r\n d=\"M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z\"\r\n />\r\n </SlottedSVG>\r\n <IcTreeItem label=\"Americano\" />\r\n <IcTreeItem label=\"Latte\">\r\n <svg\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n >\r\n <path\r\n d=\"M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z\"\r\n />\r\n </svg>\r\n </IcTreeItem>\r\n <IcTreeItem label=\"Espresso\" />\r\n </IcTreeItem>\r\n <IcTreeItem label=\"Tea\">\r\n <IcTreeItem label=\"Earl Grey\" />\r\n <IcTreeItem label=\"Chai\" />\r\n </IcTreeItem>\r\n <IcTreeItem label=\"Hot chocolate\" />\r\n</IcTreeView>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `{shortCode}`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `{shortCode}`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview snippets={snippetsIcons}>\r\n <div style={{ width: \"250px\" }}>\r\n <IcTreeView heading=\"Menu\">\r\n <SlottedSVG\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n >\r\n <path d=\"M10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6H12L10,4Z\" />\r\n </SlottedSVG>\r\n <IcTreeItem label=\"Coffee\">\r\n <SlottedSVG\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n >\r\n <path d=\"M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z\" />\r\n </SlottedSVG>\r\n <IcTreeItem label=\"Americano\" />\r\n <IcTreeItem label=\"Latte\">\r\n <svg\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n >\r\n <path d=\"M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z\" />\r\n </svg>\r\n </IcTreeItem>\r\n <IcTreeItem label=\"Espresso\" />\r\n </IcTreeItem>\r\n <IcTreeItem label=\"Tea\">\r\n <IcTreeItem label=\"Earl Grey\" />\r\n <IcTreeItem label=\"Chai\" />\r\n </IcTreeItem>\r\n <IcTreeItem label=\"Hot chocolate\" />\r\n </IcTreeView>\r\n </div>\r\n</ComponentPreview>\r\n\r\n### Small\r\n\r\nexport const snippetsSmall = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-tree-view heading=\"Menu\" size=\"small\">\r\n <svg slot=\"icon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\r\n <path\r\n d=\"M10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6H12L10,4Z\"\r\n />\r\n </svg>\r\n <ic-tree-item label=\"Coffee\">\r\n <svg slot=\"icon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\r\n <path\r\n d=\"M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z\"\r\n />\r\n </svg>\r\n <ic-tree-item label=\"Americano\"></ic-tree-item>\r\n <ic-tree-item label=\"Latte\">\r\n <svg slot=\"icon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\r\n <path\r\n d=\"M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z\"\r\n />\r\n </svg>\r\n </ic-tree-item>\r\n <ic-tree-item label=\"Espresso\"></ic-tree-item>\r\n </ic-tree-item>\r\n <ic-tree-item label=\"Tea\">\r\n <ic-tree-item label=\"Earl Grey\"></ic-tree-item>\r\n <ic-tree-item label=\"Chai\"></ic-tree-item>\r\n </ic-tree-item>\r\n <ic-tree-item label=\"Hot chocolate\"></ic-tree-item>\r\n</ic-tree-view>`,\r\n long: `{shortCode}`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcTreeView heading=\"Menu\" size=\"small\">\r\n <SlottedSVG slot=\"icon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\r\n <path\r\n d=\"M10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6H12L10,4Z\"\r\n />\r\n </SlottedSVG>\r\n <IcTreeItem label=\"Coffee\">\r\n <SlottedSVG\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n >\r\n <path\r\n d=\"M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z\"\r\n />\r\n </SlottedSVG>\r\n <IcTreeItem label=\"Americano\" />\r\n <IcTreeItem label=\"Latte\">\r\n <svg\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n >\r\n <path\r\n d=\"M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z\"\r\n />\r\n </svg>\r\n </IcTreeItem>\r\n <IcTreeItem label=\"Espresso\" />\r\n </IcTreeItem>\r\n <IcTreeItem label=\"Tea\">\r\n <IcTreeItem label=\"Earl Grey\" />\r\n <IcTreeItem label=\"Chai\" />\r\n </IcTreeItem>\r\n <IcTreeItem label=\"Hot chocolate\" />\r\n</IcTreeView>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `{shortCode}`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `{shortCode}`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview snippets={snippetsSmall}>\r\n <div style={{ width: \"250px\" }}>\r\n <IcTreeView heading=\"Menu\" size=\"small\">\r\n <SlottedSVG\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n >\r\n <path d=\"M10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6H12L10,4Z\" />\r\n </SlottedSVG>\r\n <IcTreeItem label=\"Coffee\">\r\n <SlottedSVG\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n >\r\n <path d=\"M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z\" />\r\n </SlottedSVG>\r\n <IcTreeItem label=\"Americano\" />\r\n <IcTreeItem label=\"Latte\">\r\n <svg\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n >\r\n <path d=\"M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z\" />\r\n </svg>\r\n </IcTreeItem>\r\n <IcTreeItem label=\"Espresso\" />\r\n </IcTreeItem>\r\n <IcTreeItem label=\"Tea\">\r\n <IcTreeItem label=\"Earl Grey\" />\r\n <IcTreeItem label=\"Chai\" />\r\n </IcTreeItem>\r\n <IcTreeItem label=\"Hot chocolate\" />\r\n </IcTreeView>\r\n </div>\r\n</ComponentPreview>\r\n\r\n### Large\r\n\r\nexport const snippetsLarge = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-tree-view heading=\"Menu\" size=\"large\">\r\n <svg slot=\"icon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\r\n <path\r\n d=\"M10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6H12L10,4Z\"\r\n />\r\n </svg>\r\n <ic-tree-item label=\"Coffee\">\r\n <svg slot=\"icon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\r\n <path\r\n d=\"M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z\"\r\n />\r\n </svg>\r\n <ic-tree-item label=\"Americano\"></ic-tree-item>\r\n <ic-tree-item label=\"Latte\">\r\n <svg slot=\"icon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\r\n <path\r\n d=\"M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z\"\r\n />\r\n </svg>\r\n </ic-tree-item>\r\n <ic-tree-item label=\"Espresso\"></ic-tree-item>\r\n </ic-tree-item>\r\n <ic-tree-item label=\"Tea\">\r\n <ic-tree-item label=\"Earl Grey\"></ic-tree-item>\r\n <ic-tree-item label=\"Chai\"></ic-tree-item>\r\n </ic-tree-item>\r\n <ic-tree-item label=\"Hot chocolate\"></ic-tree-item>\r\n</ic-tree-view>`,\r\n long: `{shortCode}`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcTreeView heading=\"Menu\" size=\"large\">\r\n <SlottedSVG slot=\"icon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\r\n <path\r\n d=\"M10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6H12L10,4Z\"\r\n />\r\n </SlottedSVG>\r\n <IcTreeItem label=\"Coffee\">\r\n <SlottedSVG\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n >\r\n <path\r\n d=\"M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z\"\r\n />\r\n </SlottedSVG>\r\n <IcTreeItem label=\"Americano\" />\r\n <IcTreeItem label=\"Latte\">\r\n <svg\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n >\r\n <path\r\n d=\"M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z\"\r\n />\r\n </svg>\r\n </IcTreeItem>\r\n <IcTreeItem label=\"Espresso\" />\r\n </IcTreeItem>\r\n <IcTreeItem label=\"Tea\">\r\n <IcTreeItem label=\"Earl Grey\" />\r\n <IcTreeItem label=\"Chai\" />\r\n </IcTreeItem>\r\n <IcTreeItem label=\"Hot chocolate\" />\r\n</IcTreeView>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `{shortCode}`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `{shortCode}`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview snippets={snippetsLarge}>\r\n <div style={{ width: \"250px\" }}>\r\n <IcTreeView heading=\"Menu\" size=\"large\">\r\n <SlottedSVG\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n >\r\n <path d=\"M10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6H12L10,4Z\" />\r\n </SlottedSVG>\r\n <IcTreeItem label=\"Coffee\">\r\n <SlottedSVG\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n >\r\n <path d=\"M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z\" />\r\n </SlottedSVG>\r\n <IcTreeItem label=\"Americano\" />\r\n <IcTreeItem label=\"Latte\">\r\n <svg\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n >\r\n <path d=\"M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z\" />\r\n </svg>\r\n </IcTreeItem>\r\n <IcTreeItem label=\"Espresso\" />\r\n </IcTreeItem>\r\n <IcTreeItem label=\"Tea\">\r\n <IcTreeItem label=\"Earl Grey\" />\r\n <IcTreeItem label=\"Chai\" />\r\n </IcTreeItem>\r\n <IcTreeItem label=\"Hot chocolate\" />\r\n </IcTreeView>\r\n </div>\r\n</ComponentPreview>\r\n\r\n### Light\r\n\r\nexport const snippetsLight = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-tree-view heading=\"Menu\" appearance=\"light\">\r\n <svg slot=\"icon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\r\n <path\r\n d=\"M10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6H12L10,4Z\"\r\n />\r\n </svg>\r\n <ic-tree-item label=\"Coffee\">\r\n <svg slot=\"icon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\r\n <path\r\n d=\"M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z\"\r\n />\r\n </svg>\r\n <ic-tree-item label=\"Americano\"></ic-tree-item>\r\n <ic-tree-item label=\"Latte\">\r\n <svg slot=\"icon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\r\n <path\r\n d=\"M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z\"\r\n />\r\n </svg>\r\n </ic-tree-item>\r\n <ic-tree-item label=\"Espresso\"></ic-tree-item>\r\n </ic-tree-item>\r\n <ic-tree-item label=\"Tea\">\r\n <ic-tree-item label=\"Earl Grey\"></ic-tree-item>\r\n <ic-tree-item label=\"Chai\"></ic-tree-item>\r\n </ic-tree-item>\r\n <ic-tree-item label=\"Hot chocolate\"></ic-tree-item>\r\n</ic-tree-view>`,\r\n long: `.dark-background {\r\n flex-direction: column; \r\n gap: var(--ic-space-xs); \r\n background: #333333;\r\n }\r\n </style>\r\n <body>\r\n <div class=\"dark-background\">\r\n {shortCode}\r\n </div>`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcTreeView heading=\"Menu\" appearance=\"light\">\r\n <SlottedSVG slot=\"icon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\r\n <path\r\n d=\"M10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6H12L10,4Z\"\r\n />\r\n </SlottedSVG>\r\n <IcTreeItem label=\"Coffee\">\r\n <SlottedSVG\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n >\r\n <path\r\n d=\"M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z\"\r\n />\r\n </SlottedSVG>\r\n <IcTreeItem label=\"Americano\" />\r\n <IcTreeItem label=\"Latte\">\r\n <SlottedSVG\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n >\r\n <path\r\n d=\"M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z\"\r\n />\r\n </SlottedSVG>\r\n </IcTreeItem>\r\n <IcTreeItem label=\"Espresso\" />\r\n </IcTreeItem>\r\n <IcTreeItem label=\"Tea\">\r\n <IcTreeItem label=\"Earl Grey\" />\r\n <IcTreeItem label=\"Chai\" />\r\n </IcTreeItem>\r\n <IcTreeItem label=\"Hot chocolate\" />\r\n</IcTreeView>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `const useStyles = createUseStyles({\r\n darkBackground: {\r\n display: \"flex\",\r\n flexDirection: \"column\", \r\n gap: \"var(--ic-space-xs)\", \r\n background: \"#333333\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nreturn (\r\n <div className={classes.darkBackground}>\r\n {shortCode}\r\n </div>\r\n)`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `const useStyles = createUseStyles({\r\n darkBackground: {\r\n display: \"flex\",\r\n flexDirection: \"column\", \r\n gap: \"var(--ic-space-xs)\", \r\n background: \"#333333\",\r\n },\r\n});\r\nconst classes = useStyles();\r\nreturn (\r\n <div className={classes.darkBackground}>\r\n {shortCode}\r\n </div>\r\n)`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview snippets={snippetsLight} style={{ background: \"#333333\" }}>\r\n <div style={{ width: \"250px\" }}>\r\n <IcTreeView heading=\"Menu\" appearance=\"light\">\r\n <SlottedSVG\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n >\r\n <path d=\"M10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6H12L10,4Z\" />\r\n </SlottedSVG>\r\n <IcTreeItem label=\"Coffee\">\r\n <SlottedSVG\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n >\r\n <path d=\"M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z\" />\r\n </SlottedSVG>\r\n <IcTreeItem label=\"Americano\" />\r\n <IcTreeItem label=\"Latte\">\r\n <SlottedSVG\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n >\r\n <path d=\"M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z\" />\r\n </SlottedSVG>\r\n </IcTreeItem>\r\n <IcTreeItem label=\"Espresso\" />\r\n </IcTreeItem>\r\n <IcTreeItem label=\"Tea\">\r\n <IcTreeItem label=\"Earl Grey\" />\r\n <IcTreeItem label=\"Chai\" />\r\n </IcTreeItem>\r\n <IcTreeItem label=\"Hot chocolate\" />\r\n </IcTreeView>\r\n </div>\r\n</ComponentPreview>\r\n\r\n### Disabled tree items\r\n\r\nexport const snippetsDisabled = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-tree-view heading=\"Menu\">\r\n <svg slot=\"icon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\r\n <path\r\n d=\"M10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6H12L10,4Z\"\r\n />\r\n </svg>\r\n <ic-tree-item label=\"Coffee\">\r\n <svg slot=\"icon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\r\n <path\r\n d=\"M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z\"\r\n />\r\n </svg>\r\n <ic-tree-item label=\"Americano\"></ic-tree-item>\r\n <ic-tree-item label=\"Latte\" disabled=\"true\">\r\n <svg slot=\"icon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\r\n <path\r\n d=\"M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z\"\r\n />\r\n </svg>\r\n </ic-tree-item>\r\n <ic-tree-item label=\"Espresso\"></ic-tree-item>\r\n </ic-tree-item>\r\n <ic-tree-item label=\"Tea\">\r\n <ic-tree-item label=\"Earl Grey\"></ic-tree-item>\r\n <ic-tree-item label=\"Chai\" disabled=\"true\"></ic-tree-item>\r\n </ic-tree-item>\r\n <ic-tree-item label=\"Hot chocolate\" disabled=\"true\"></ic-tree-item>\r\n</ic-tree-view>`,\r\n long: `{shortCode}`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcTreeView heading=\"Menu\">\r\n <SlottedSVG slot=\"icon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\r\n <path\r\n d=\"M10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6H12L10,4Z\"\r\n />\r\n </SlottedSVG>\r\n <IcTreeItem label=\"Coffee\">\r\n <SlottedSVG\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n >\r\n <path\r\n d=\"M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z\"\r\n />\r\n </SlottedSVG>\r\n <IcTreeItem label=\"Americano\" />\r\n <IcTreeItem label=\"Latte\" disabled>\r\n <SlottedSVG\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n >\r\n <path\r\n d=\"M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z\"\r\n />\r\n </SlottedSVG>\r\n </IcTreeItem>\r\n <IcTreeItem label=\"Espresso\" />\r\n </IcTreeItem>\r\n <IcTreeItem label=\"Tea\">\r\n <IcTreeItem label=\"Earl Grey\" />\r\n <IcTreeItem label=\"Chai\" disabled />\r\n </IcTreeItem>\r\n <IcTreeItem label=\"Hot chocolate\" disabled />\r\n</IcTreeView>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `{shortCode}`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `{shortCode}`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview snippets={snippetsDisabled}>\r\n <div style={{ width: \"250px\" }}>\r\n <IcTreeView heading=\"Menu\">\r\n <SlottedSVG\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n >\r\n <path d=\"M10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6H12L10,4Z\" />\r\n </SlottedSVG>\r\n <IcTreeItem label=\"Coffee\">\r\n <SlottedSVG\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n >\r\n <path d=\"M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z\" />\r\n </SlottedSVG>\r\n <IcTreeItem label=\"Americano\" />\r\n <IcTreeItem label=\"Latte\" disabled>\r\n <SlottedSVG\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n >\r\n <path d=\"M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z\" />\r\n </SlottedSVG>\r\n </IcTreeItem>\r\n <IcTreeItem label=\"Espresso\" />\r\n </IcTreeItem>\r\n <IcTreeItem label=\"Tea\">\r\n <IcTreeItem label=\"Earl Grey\" />\r\n <IcTreeItem label=\"Chai\" disabled />\r\n </IcTreeItem>\r\n <IcTreeItem label=\"Hot chocolate\" disabled />\r\n </IcTreeView>\r\n </div>\r\n</ComponentPreview>\r\n\r\n### Slotted content\r\n\r\nexport const snippetsSlotted = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-tree-view>\r\n <ic-typography variant=\"subtitle-large\" slot=\"heading\">Menu</ic-typography>\r\n <ic-tree-item>\r\n <ic-typography slot=\"label\">Coffee</ic-typography>\r\n </ic-tree-item>\r\n <ic-tree-item label=\"Tea\"></ic-tree-item>\r\n <ic-tree-item label=\"Hot chocolate\"></ic-tree-item>\r\n</ic-tree-view>`,\r\n long: `{shortCode}`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcTreeView>\r\n <IcTypography variant=\"subtitle-large\" slot=\"heading\">Menu</IcTypography>\r\n <IcTreeItem>\r\n <IcTypography slot=\"label\">Coffee</IcTypography>\r\n </IcTreeItem>\r\n <IcTreeItem label=\"Tea\" />\r\n <IcTreeItem label=\"Hot chocolate\" />\r\n</IcTreeView>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `{shortCode}`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `{shortCode}`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview snippets={snippetsSlotted}>\r\n <div style={{ width: \"250px\" }}>\r\n <IcTreeView>\r\n <IcTypography variant=\"subtitle-large\" slot=\"heading\">\r\n Menu\r\n </IcTypography>\r\n <IcTreeItem>\r\n <IcTypography slot=\"label\">Coffee</IcTypography>\r\n </IcTreeItem>\r\n <IcTreeItem label=\"Tea\" />\r\n <IcTreeItem label=\"Hot chocolate\" />\r\n </IcTreeView>\r\n </div>\r\n</ComponentPreview>\r\n\r\n### Truncated\r\n\r\nexport const snippetsTruncated = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-tree-view heading=\"Menu with nested options\">\r\n <svg slot=\"icon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\r\n <path\r\n d=\"M10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6H12L10,4Z\"\r\n />\r\n </svg>\r\n <ic-tree-item label=\"Coffee\">\r\n <svg slot=\"icon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\r\n <path\r\n d=\"M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z\"\r\n />\r\n </svg>\r\n <ic-tree-item label=\"Americano\"></ic-tree-item>\r\n <ic-tree-item label=\"Latte with extra milk and sugar\"></ic-tree-item>\r\n <ic-tree-item label=\"Espresso\"></ic-tree-item>\r\n </ic-tree-item>\r\n <ic-tree-item label=\"Tea\">\r\n <ic-tree-item label=\"Earl Grey\"></ic-tree-item>\r\n <ic-tree-item label=\"Chai\"></ic-tree-item>\r\n </ic-tree-item>\r\n <ic-tree-item label=\"Hot chocolate with marshmallows\"></ic-tree-item>\r\n</ic-tree-view>`,\r\n long: `{shortCode}`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcTreeView heading=\"Menu with nested options\">\r\n <SlottedSVG slot=\"icon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\r\n <path\r\n d=\"M10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6H12L10,4Z\"\r\n />\r\n </SlottedSVG>\r\n <IcTreeItem label=\"Coffee\">\r\n <SlottedSVG\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n >\r\n <path\r\n d=\"M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z\"\r\n />\r\n </SlottedSVG>\r\n <IcTreeItem label=\"Americano\" />\r\n <IcTreeItem label=\"Latte with extra milk and sugar\" />\r\n <IcTreeItem label=\"Espresso\" />\r\n </IcTreeItem>\r\n <IcTreeItem label=\"Tea\">\r\n <IcTreeItem label=\"Earl Grey\" />\r\n <IcTreeItem label=\"Chai\" />\r\n </IcTreeItem>\r\n <IcTreeItem label=\"Hot chocolate with marshmallows\" />\r\n</IcTreeView>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `{shortCode}`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `{shortCode}`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview snippets={snippetsTruncated}>\r\n <div style={{ width: \"250px\" }}>\r\n <IcTreeView heading=\"Menu with nested options\">\r\n <SlottedSVG\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n >\r\n <path d=\"M10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6H12L10,4Z\" />\r\n </SlottedSVG>\r\n <IcTreeItem label=\"Coffee\">\r\n <SlottedSVG\r\n slot=\"icon\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n viewBox=\"0 0 24 24\"\r\n >\r\n <path d=\"M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z\" />\r\n </SlottedSVG>\r\n <IcTreeItem label=\"Americano\" />\r\n <IcTreeItem label=\"Latte with extra milk and sugar\" />\r\n <IcTreeItem label=\"Espresso\" />\r\n </IcTreeItem>\r\n <IcTreeItem label=\"Tea\">\r\n <IcTreeItem label=\"Earl Grey\" />\r\n <IcTreeItem label=\"Chai\" />\r\n </IcTreeItem>\r\n <IcTreeItem label=\"Hot chocolate with marshmallows\" />\r\n </IcTreeView>\r\n </div>\r\n</ComponentPreview>\r\n\r\n### Link\r\n\r\nexport const snippetsLink = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `<ic-tree-view heading=\"Menu\">\r\n <ic-tree-item label=\"Coffee\" href=\"#\"></ic-tree-item>\r\n <ic-tree-item label=\"Tea\" selected=\"true\" href=\"#\"></ic-tree-item>\r\n <ic-tree-item label=\"Hot chocolate\" disabled=\"true\" href=\"#\"></ic-tree-item>\r\n</ic-tree-view>`,\r\n long: `{shortCode}`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `<IcTreeView heading=\"Menu\">\r\n <IcTreeItem label=\"Coffee\" href=\"#\" />\r\n <IcTreeItem label=\"Tea\" selected href=\"#\" />\r\n <IcTreeItem label=\"Hot chocolate\" disabled href=\"#\" />\r\n</IcTreeView>`,\r\n long: [\r\n {\r\n language: \"Typescript\",\r\n snippet: `{shortCode}`,\r\n },\r\n {\r\n language: \"Javascript\",\r\n snippet: `{shortCode}`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n<ComponentPreview snippets={snippetsLink}>\r\n <div style={{ width: \"250px\" }}>\r\n <IcTreeView heading=\"Menu\">\r\n <IcTreeItem label=\"Coffee\" href=\"#\" />\r\n <IcTreeItem label=\"Tea\" selected href=\"#\" />\r\n <IcTreeItem label=\"Hot chocolate\" disabled href=\"#\" />\r\n </IcTreeView>\r\n </div>\r\n</ComponentPreview>\r\n",
"path": "/components/tree-view/code",
"navPriority": 41,
"date": "2024-08-23",
@@ -4419,11 +4419,11 @@
}
],
"meta": {
- "relativePath": "components/tree-view/code.mdx",
- "createdAt": "2024-11-06T10:27:49.404Z",
- "lastModified": "2024-11-06T10:19:00.172Z",
- "size": 29749,
- "formattedSize": "29.1 KB"
+ "relativePath": "components\\tree-view\\code.mdx",
+ "createdAt": "2024-12-04T13:23:54.126Z",
+ "lastModified": "2024-12-04T13:23:54.126Z",
+ "size": 30782,
+ "formattedSize": "30.1 KB"
}
},
{
@@ -4446,9 +4446,9 @@
}
],
"meta": {
- "relativePath": "components/tree-view/guidance.mdx",
- "createdAt": "2024-11-06T10:27:49.404Z",
- "lastModified": "2024-11-06T10:19:00.172Z",
+ "relativePath": "components\\tree-view\\guidance.mdx",
+ "createdAt": "2024-11-05T11:57:54.502Z",
+ "lastModified": "2024-11-05T11:57:54.502Z",
"size": 1822,
"formattedSize": "1.8 KB"
}
@@ -4478,9 +4478,9 @@
}
],
"meta": {
- "relativePath": "components/typography/accessibility.mdx",
- "createdAt": "2024-11-06T10:27:49.408Z",
- "lastModified": "2024-11-06T10:19:00.172Z",
+ "relativePath": "components\\typography\\accessibility.mdx",
+ "createdAt": "2024-11-05T11:57:54.517Z",
+ "lastModified": "2024-11-05T11:57:54.517Z",
"size": 1497,
"formattedSize": "1.5 KB"
}
@@ -4510,9 +4510,9 @@
}
],
"meta": {
- "relativePath": "components/typography/code.mdx",
- "createdAt": "2024-11-06T10:27:49.408Z",
- "lastModified": "2024-11-06T10:19:00.172Z",
+ "relativePath": "components\\typography\\code.mdx",
+ "createdAt": "2024-11-05T11:57:54.552Z",
+ "lastModified": "2024-11-05T11:57:54.552Z",
"size": 10522,
"formattedSize": "10.3 KB"
}
@@ -4544,9 +4544,9 @@
],
"tags": ["Text", "Heading", "Label"],
"meta": {
- "relativePath": "components/typography/guidance.mdx",
- "createdAt": "2024-11-06T10:27:49.408Z",
- "lastModified": "2024-11-06T10:19:00.172Z",
+ "relativePath": "components\\typography\\guidance.mdx",
+ "createdAt": "2024-11-05T11:57:54.571Z",
+ "lastModified": "2024-11-05T11:57:54.571Z",
"size": 2216,
"formattedSize": "2.2 KB"
}
@@ -4560,16 +4560,16 @@
"title": "Why we built a Design System",
"contribute": "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/get-started/a-design-system.mdx",
"meta": {
- "relativePath": "get-started/a-design-system.mdx",
- "createdAt": "2024-11-06T10:27:49.396Z",
- "lastModified": "2024-11-06T10:19:00.172Z",
+ "relativePath": "get-started\\a-design-system.mdx",
+ "createdAt": "2024-11-05T11:57:54.592Z",
+ "lastModified": "2024-11-05T11:57:54.592Z",
"size": 2801,
"formattedSize": "2.7 KB"
}
},
{
"id": "get-started\\ag-grid-themex",
- "contents": "\nimport { AgGridReact } from \"ag-grid-react\";\nimport \"ag-grid-community/styles/ag-grid.css\";\n\nexport const rowData = [\n { make: \"Tesla\", model: \"Model Y\", price: 64950, electric: true },\n { make: \"Ford\", model: \"F-Series\", price: 33850, electric: false },\n { make: \"Toyota\", model: \"Corolla\", price: 29600, electric: false },\n];\n\nexport const colDefs = [\n {\n headerName: \"Car details\",\n children: [\n { columnGroupShow: \"closed\", field: \"price\" },\n {\n columnGroupShow: \"open\",\n field: \"make\",\n filter: true,\n filterParams: {\n filterOptions: [\"contains\", \"startsWith\"],\n },\n },\n {\n columnGroupShow: \"open\",\n field: \"model\",\n editable: true,\n cellEditor: \"agLargeTextCellEditor\",\n cellEditorPopup: true,\n },\n ],\n },\n {\n headerName: \"Car specs\",\n headerTooltip: \"Specs of the car\",\n children: [{ field: \"electric\", pinned: \"left\" }],\n },\n];\n\n## Why we've created the theme\n\nWhile the ICDS encourages using our components to ensure consistency in accessibility and user experience, we also recognise that other, older component libraries may offer features that are not yet available in our library.\n\nIn this case, our data table component may not provide the features needed by our consumers. This is due to the time and resources needed to implement these features, which are usually accomplished by large, dedicated teams in other libraries. For the ICDS, our team is small and our time spent delivering other useful features requested by the community.\n\nIn order to not leave consumers without the features they require while we implement them into our component library, we are offering a custom-made ICDS theme.\n\n<p>\n This theme is being implemented on the{\" \"}\n <ic-link\n target=\"_blank\"\n href=\"https://www.ag-grid.com/\"\n rel=\"noreferer noopener nofollow\"\n >\n ag-grid component\n </ic-link>\n , which is our recommended alternative data table solution whilst we take the time\n to implement the features our users require in a structured manner, to deliver\n the quality product our users expect.\n</p>\n\n## Example theme\n\n<ComponentPreview>\n <div className=\"ag-theme-icds\" style={{ height: 500 }}>\n <AgGridReact\n rowData={rowData}\n columnDefs={colDefs}\n rowSelection={{ mode: \"multiRow\" }}\n pagination\n />\n </div>\n</ComponentPreview>\n\n## How to apply the theme\n\nThe theme is held in a css file exported in our `@ukic/web-components` package. To apply it, add the following class to the parent `<div>` of the ag-grid component.\n\n```jsx\n// Can either import the css directly into the component file...\nimport \"@ukic/web-components/dist/core/ag-theme-icds.css\";\n// ...or via another css file\nimport \"./{FILE_NAME}.css\";\n\nreturn <div className=\"ag-theme-icds\" style={{ height: 500 }}></div>;\n```\n\nIf importing via another css file, add the following import to the top of the file.\n\n```css\n@import \"@ukic/web-components/dist/core/ag-theme-icds.css\";\n```\n",
+ "contents": "\nimport { AgGridReact } from \"ag-grid-react\";\nimport \"ag-grid-community/styles/ag-grid.css\";\nimport \"@ukic/web-components/dist/core/ag-theme-icds.css\";\n\nexport const rowData = [\n { make: \"Tesla\", model: \"Model Y\", price: 64950, electric: true },\n { make: \"Ford\", model: \"F-Series\", price: 33850, electric: false },\n { make: \"Toyota\", model: \"Corolla\", price: 29600, electric: false },\n];\n\nexport const colDefs = [\n {\n headerName: \"Car details\",\n children: [\n { columnGroupShow: \"closed\", field: \"price\" },\n {\n columnGroupShow: \"open\",\n field: \"make\",\n filter: true,\n filterParams: {\n filterOptions: [\"contains\", \"startsWith\"],\n },\n },\n {\n columnGroupShow: \"open\",\n field: \"model\",\n editable: true,\n cellEditor: \"agLargeTextCellEditor\",\n cellEditorPopup: true,\n },\n ],\n },\n {\n headerName: \"Car specs\",\n headerTooltip: \"Specs of the car\",\n children: [{ field: \"electric\", pinned: \"left\" }],\n },\n];\n\n## Why we've created the theme\n\nWhile the ICDS encourages using our components to ensure consistency in accessibility and user experience, we also recognise that other, older component libraries may offer features that are not yet available in our library.\n\nIn this case, our data table component may not provide the features needed by our consumers. This is due to the time and resources needed to implement these features, which are usually accomplished by large, dedicated teams in other libraries. For the ICDS, our team is small and our time spent delivering other useful features requested by the community.\n\nIn order to not leave consumers without the features they require while we implement them into our component library, we are offering a custom-made ICDS theme.\n\n<p>\n This theme is being implemented on the{\" \"}\n <ic-link\n target=\"_blank\"\n href=\"https://www.ag-grid.com/\"\n rel=\"noreferer noopener nofollow\"\n >\n ag-grid component\n </ic-link>\n , which is our recommended alternative data table solution whilst we take the time\n to implement the features our users require in a structured manner, to deliver\n the quality product our users expect.\n</p>\n\n## Example theme\n\n<ComponentPreview>\n <div className=\"ag-theme-icds\" style={{ height: 500 }}>\n <AgGridReact\n rowData={rowData}\n columnDefs={colDefs}\n rowSelection={{ mode: \"multiRow\" }}\n pagination\n />\n </div>\n</ComponentPreview>\n\n## How to apply the theme\n\nThe theme is held in a css file exported in our `@ukic/web-components` package. To apply it, add the following class to the parent `<div>` of the ag-grid component.\n\n```jsx\n// Can either import the css directly into the component file...\nimport \"@ukic/web-components/dist/core/ag-theme-icds.css\";\n// ...or via another css file\nimport \"./{FILE_NAME}.css\";\n\nreturn <div className=\"ag-theme-icds\" style={{ height: 500 }}></div>;\n```\n\nIf importing via another css file, add the following import to the top of the file.\n\n```css\n@import \"@ukic/web-components/dist/core/ag-theme-icds.css\";\n```\n",
"path": "/get-started/install-components/ag-grid-theme",
"navPriority": 10,
"date": "2024-11-04",
@@ -4577,10 +4577,10 @@
"subTitle": "How to theme an AG Grid component using ICDS styles.",
"meta": {
"relativePath": "get-started\\ag-grid-theme.mdx",
- "createdAt": "2024-11-08T10:44:39.091Z",
- "lastModified": "2024-11-08T10:44:39.091Z",
- "size": 3211,
- "formattedSize": "3.1 KB"
+ "createdAt": "2024-12-04T12:10:37.791Z",
+ "lastModified": "2024-12-04T12:10:37.791Z",
+ "size": 3270,
+ "formattedSize": "3.2 KB"
}
},
{
@@ -4593,9 +4593,9 @@
"subTitle": "How to use the components in an Angular-based application.",
"contribute": "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/get-started/angular.mdx",
"meta": {
- "relativePath": "get-started/angular.mdx",
- "createdAt": "2024-11-06T10:27:49.396Z",
- "lastModified": "2024-11-06T10:19:00.172Z",
+ "relativePath": "get-started\\angular.mdx",
+ "createdAt": "2024-11-05T11:57:54.684Z",
+ "lastModified": "2024-11-05T11:57:54.684Z",
"size": 2897,
"formattedSize": "2.8 KB"
}
@@ -4610,9 +4610,9 @@
"subTitle": "How to change the theme colour of some components.",
"contribute": "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/get-started/custom-theme.mdx",
"meta": {
- "relativePath": "get-started/custom-theme.mdx",
- "createdAt": "2024-11-06T10:27:49.396Z",
- "lastModified": "2024-11-06T10:19:00.172Z",
+ "relativePath": "get-started\\custom-theme.mdx",
+ "createdAt": "2024-12-04T13:23:16.241Z",
+ "lastModified": "2024-12-04T13:23:16.241Z",
"size": 1247,
"formattedSize": "1.2 KB"
}
@@ -4628,9 +4628,9 @@
"contribute": "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/get-started/design-principles.mdx?at=develop",
"hidden": false,
"meta": {
- "relativePath": "get-started/design-principles.mdx",
- "createdAt": "2024-11-06T10:27:49.396Z",
- "lastModified": "2024-11-06T10:19:00.172Z",
+ "relativePath": "get-started\\design-principles.mdx",
+ "createdAt": "2024-11-05T11:57:54.728Z",
+ "lastModified": "2024-11-05T11:57:54.728Z",
"size": 1681,
"formattedSize": "1.6 KB"
}
@@ -4645,9 +4645,9 @@
"subTitle": "Reusable and flexible Figma components used to design, prototype and hand-off designs for apps and digital products.",
"contribute": "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/get-started/figma.mdx",
"meta": {
- "relativePath": "get-started/figma.mdx",
- "createdAt": "2024-11-06T10:27:49.396Z",
- "lastModified": "2024-11-06T10:19:00.172Z",
+ "relativePath": "get-started\\figma.mdx",
+ "createdAt": "2024-11-05T11:57:54.750Z",
+ "lastModified": "2024-11-05T11:57:54.750Z",
"size": 3411,
"formattedSize": "3.3 KB"
}
@@ -4662,16 +4662,16 @@
"subTitle": "How to use the components in a Gatsby-based application.",
"contribute": "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/get-started/gatsby.mdx",
"meta": {
- "relativePath": "get-started/gatsby.mdx",
- "createdAt": "2024-11-06T10:27:49.396Z",
- "lastModified": "2024-11-06T10:19:00.172Z",
+ "relativePath": "get-started\\gatsby.mdx",
+ "createdAt": "2024-11-05T11:57:54.774Z",
+ "lastModified": "2024-11-05T11:57:54.774Z",
"size": 2610,
"formattedSize": "2.5 KB"
}
},
{
"id": "get-started\\indexx",
- "contents": "\nimport { IcCard } from \"@ukic/react\";\n\n## Design System and UI Kit\n\n- [Accessibility guidance](/accessibility) to design, build and test apps and services that work for everyone.\n- [Style tokens](/styles) to create consistent experiences.\n- [Component guidance](/components) to implement accessible, usable and consistent user interfaces (UI).\n- [Patterns](/patterns) to help users with intuitive experiences for common user tasks.\n\n### For developers\n\n<IcCard\n heading=\"Install the UI Kit components\"\n message=\"Install and use the UI Kit component library. Use React or web components to quickly build accessible interfaces.\"\n href=\"get-started/install-components\"\n clickable\n fullWidth\n/>\n\n### For designers\n\n<IcCard\n heading=\"Figma UI Kit\"\n message=\"Reusable and flexible Figma components used to design, prototype and hand-off designs for apps and digital products.\"\n href=\"get-started/figma\"\n clickable\n fullWidth\n/>\n\n## Contribute\n\nWe are expanding the UI Kit. You can check out the [roadmap](/community/roadmap) for what's coming. If you would like to help please [read more on how to contribute](/community).\n\n## Using v1.0 component library\n\nYou can still use v1.0 (link available for internal users only). Support will be limited and the library deprecated in the future.\n",
+ "contents": "\r\nimport { IcCard } from \"@ukic/react\";\r\n\r\n## Design System and UI Kit\r\n\r\n- [Accessibility guidance](/accessibility) to design, build and test apps and services that work for everyone.\r\n- [Style tokens](/styles) to create consistent experiences.\r\n- [Component guidance](/components) to implement accessible, usable and consistent user interfaces (UI).\r\n- [Patterns](/patterns) to help users with intuitive experiences for common user tasks.\r\n\r\n### For developers\r\n\r\n<IcCard\r\n heading=\"Install the UI Kit components\"\r\n message=\"Install and use the UI Kit component library. Use React or web components to quickly build accessible interfaces.\"\r\n href=\"get-started/install-components\"\r\n clickable\r\n fullWidth\r\n/>\r\n\r\n### For designers\r\n\r\n<IcCard\r\n heading=\"Figma UI Kit\"\r\n message=\"Reusable and flexible Figma components used to design, prototype and hand-off designs for apps and digital products.\"\r\n href=\"get-started/figma\"\r\n clickable\r\n fullWidth\r\n/>\r\n\r\n## Contribute\r\n\r\nWe are expanding the UI Kit. You can check out the [roadmap](/community/roadmap) for what's coming. If you would like to help please [read more on how to contribute](/community).\r\n\r\n## Using v1.0 component library\r\n\r\nYou can still use v1.0 (link available for internal users only). Support will be limited and the library deprecated in the future.\r\n",
"path": "/get-started",
"navPriority": 0,
"date": "2022-11-15",
@@ -4679,11 +4679,11 @@
"subTitle": "Use the Design System and UI Kit to create accessible, usable and consistent apps and services for the United Kingdom Intelligence Community.",
"contribute": "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/get-started/index.mdx",
"meta": {
- "relativePath": "get-started/index.mdx",
- "createdAt": "2024-11-06T10:27:49.396Z",
- "lastModified": "2024-11-06T10:19:00.176Z",
- "size": 1645,
- "formattedSize": "1.6 KB"
+ "relativePath": "get-started\\index.mdx",
+ "createdAt": "2024-12-04T13:23:54.127Z",
+ "lastModified": "2024-12-04T13:23:54.127Z",
+ "size": 1695,
+ "formattedSize": "1.7 KB"
}
},
{
@@ -4696,9 +4696,9 @@
"subTitle": "Install and use the UI Kit component library. Use React or web components to quickly build accessible interfaces.",
"contribute": "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/get-started/install-components.mdx",
"meta": {
- "relativePath": "get-started/install-components.mdx",
- "createdAt": "2024-11-06T10:27:49.396Z",
- "lastModified": "2024-11-06T10:19:00.176Z",
+ "relativePath": "get-started\\install-components.mdx",
+ "createdAt": "2024-11-05T11:57:54.811Z",
+ "lastModified": "2024-11-05T11:57:54.811Z",
"size": 2015,
"formattedSize": "2.0 KB"
}
@@ -4713,9 +4713,9 @@
"subTitle": "How to use the components in a Next.js-based application.",
"contribute": "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/get-started/nextJS.mdx",
"meta": {
- "relativePath": "get-started/nextjs.mdx",
- "createdAt": "2024-11-06T10:27:49.396Z",
- "lastModified": "2024-11-06T10:19:00.176Z",
+ "relativePath": "get-started\\nextjs.mdx",
+ "createdAt": "2024-11-05T11:57:54.828Z",
+ "lastModified": "2024-11-05T11:57:54.828Z",
"size": 1557,
"formattedSize": "1.5 KB"
}
@@ -4730,27 +4730,27 @@
"subTitle": "How to use the components in a React-based application.",
"contribute": "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/get-started/react.mdx",
"meta": {
- "relativePath": "get-started/react.mdx",
- "createdAt": "2024-11-06T10:27:49.396Z",
- "lastModified": "2024-11-06T10:19:00.176Z",
+ "relativePath": "get-started\\react.mdx",
+ "createdAt": "2024-11-05T11:57:54.858Z",
+ "lastModified": "2024-11-05T11:57:54.858Z",
"size": 3030,
"formattedSize": "3.0 KB"
}
},
{
"id": "get-started\\releases-versioningx",
- "contents": "\n## How we release and version\n\nThis page provides details on how the `@ukic/` packages and website are released and versioned.\n\n<p>\n Releases are triggered once the <code class=\"language-text\">develop</code>{\" \"}\n branch pull request is merged into the <code class=\"language-text\">main</code>{\" \"}\n branch. The package versions follow the{\" \"}\n <ic-link\n target=\"_blank\"\n href=\"https://semver.org/\"\n rel=\"noreferer noopener nofollow\"\n >\n semantic versioning\n </ic-link>{\" \"}\n scheme.\n</p>\n\n```js\nmajor.minor.patch;\n```\n\n<br />\n\n**Major releases** contain breaking changes to the component libraries. Breaking changes are communicated to the community as early as possible to allow teams to plan when to integrate the new packages into their projects. Major releases are very infrequent, with at least a year between them.\n\n**Minor releases** contain new component features. Minor releases are backwards-compatible with no requirement for the developer to make updates to their existing implementation. However, to use the new feature, the implementation will require a small update (such as adding a new prop) in order to use the new component application programming interface (API).\n\n**Patch releases** contain bug fixes.\n\n<p>\n Minor and/or patch releases are scheduled every two weeks. All changes to the\n component library are recorded in the{\" \"}\n <ic-link\n target=\"_blank\"\n href=\"https://github.com/mi6/ic-ui-kit/blob/main/packages/web-components/CHANGELOG.md\"\n rel=\"noreferer noopener nofollow\"\n >\n Web Components CHANGELOG.md\n </ic-link>\n .\n</p>\n\nAll packages are published with identical version numbers.\n\n## How we manage Beta components\n\nBeta components are an intermediate stage in our versioning system, between the initial \"Alpha\" testing phase (peer review) and the stable release.\n\nWhen a component reaches the Beta stage, it has passed the preliminary phase but is not yet deemed fully stable. This allows us to release components for wider testing and gather feedback from our user community while further fine-tuning their functionalities and addressing potential issues.\n\nBeta components are integrated into our normal `@ukic/` packages and can be installed just like any other stable component. They are easily accessible to developers and users who wish to explore the latest developments and contribute to the improvements.\n\nIt is important to be aware of a few points when working with Beta components:\n\n1. **Potential API changes:** As Beta components are still in development, there may be changes to their API between major version updates. This could require manual adjustments in the codebase to accommodate the changes.\n2. **Presence of bugs:** Beta components may contain bugs or missing features.\n3. **Potential future major changes:** Since Beta components are actively evolving, there may be major behind-the-scenes changes planned for the future.\n\nWe consider Beta components acceptable for use in production-ready applications, as long as customers are happy with the issues mentioned previously.\n\nWe regularly review the stability and reliability of Beta components. When the component meets the criteria it can be transitioned to a stable release.\n\n## Canary components\n\nCanary components are unstable components that are released for testing purposes.\n\nThese components should not be used in production apps without understanding the risk that changes may occur in order to fix bugs or improve functionality.\n\nWe consider a Canary component to be acceptable for moving to Beta once customers have tested its usage and provided enough feedback to suggest they're happy with it.\n\nCanary components can be installed in the same way as our core `@ukic/` packages, but prefixed with canary, for example `@ukic/canary-react` or `@ukic/canary-web-components`.\n\n```shell\n// Canary Web Components\nnpm i @ukic/canary-web-components @ukic/fonts\n\n// Canary React\nnpm i @ukic/canary-react @ukic/fonts\n```\n\nA difference between our Canary packages and our core `@ukic/` packages is that canary package versions follow a `<version>-canary.<build-number>` pattern.\n\n<p>\n Another difference is that docs for canary components won't appear in the\n Components guidance section of this site. Instead, docs can be viewed in our\n Storybook instance for either{\" \"}\n <ic-link\n target=\"_blank\"\n href=\"https://mi6.github.io/ic-ui-kit/branches/canary/main/react/?path=/docs/getting-started--docs\"\n rel=\"noreferer noopener nofollow\"\n >\n React\n </ic-link>{\" \"}\n or{\" \"}\n <ic-link\n target=\"_blank\"\n href=\"https://mi6.github.io/ic-ui-kit/branches/canary/main/web-components/?path=/docs/getting-started--docs\"\n rel=\"noreferer noopener nofollow\"\n >\n web components\n </ic-link>\n .\n</p>\n\n## Supporting previous versions\n\nAs the component library matures and new versions arrive, the team will actively maintain and support the previous major version for up to 6 months.\n\nThis is to allow the team to provide as much resource as possible on the current version. Any support for the legacy versions will only include security updates and bug fixes. No new features will be added.\n",
+ "contents": "\r\n## How we release and version\r\n\r\nThis page provides details on how the `@ukic/` packages and website are released and versioned.\r\n\r\n<p>\r\n Releases are triggered once the <code class=\"language-text\">develop</code>{\" \"}\r\n branch pull request is merged into the <code class=\"language-text\">main</code>{\" \"}\r\n branch. The package versions follow the{\" \"}\r\n <ic-link\r\n target=\"_blank\"\r\n href=\"https://semver.org/\"\r\n rel=\"noreferer noopener nofollow\"\r\n >\r\n semantic versioning\r\n </ic-link>{\" \"}\r\n scheme.\r\n</p>\r\n\r\n```js\r\nmajor.minor.patch;\r\n```\r\n\r\n<br />\r\n\r\n**Major releases** contain breaking changes to the component libraries. Breaking changes are communicated to the community as early as possible to allow teams to plan when to integrate the new packages into their projects. Major releases are very infrequent, with at least a year between them.\r\n\r\n**Minor releases** contain new component features. Minor releases are backwards-compatible with no requirement for the developer to make updates to their existing implementation. However, to use the new feature, the implementation will require a small update (such as adding a new prop) in order to use the new component application programming interface (API).\r\n\r\n**Patch releases** contain bug fixes.\r\n\r\n<p>\r\n Minor and/or patch releases are scheduled every two weeks. All changes to the\r\n component library are recorded in the{\" \"}\r\n <ic-link\r\n target=\"_blank\"\r\n href=\"https://github.com/mi6/ic-ui-kit/blob/main/packages/web-components/CHANGELOG.md\"\r\n rel=\"noreferer noopener nofollow\"\r\n >\r\n Web Components CHANGELOG.md\r\n </ic-link>\r\n .\r\n</p>\r\n\r\nAll packages are published with identical version numbers.\r\n\r\n## How we manage Beta components\r\n\r\nBeta components are an intermediate stage in our versioning system, between the initial \"Alpha\" testing phase (peer review) and the stable release.\r\n\r\nWhen a component reaches the Beta stage, it has passed the preliminary phase but is not yet deemed fully stable. This allows us to release components for wider testing and gather feedback from our user community while further fine-tuning their functionalities and addressing potential issues.\r\n\r\nBeta components are integrated into our normal `@ukic/` packages and can be installed just like any other stable component. They are easily accessible to developers and users who wish to explore the latest developments and contribute to the improvements.\r\n\r\nIt is important to be aware of a few points when working with Beta components:\r\n\r\n1. **Potential API changes:** As Beta components are still in development, there may be changes to their API between major version updates. This could require manual adjustments in the codebase to accommodate the changes.\r\n2. **Presence of bugs:** Beta components may contain bugs or missing features.\r\n3. **Potential future major changes:** Since Beta components are actively evolving, there may be major behind-the-scenes changes planned for the future.\r\n\r\nWe consider Beta components acceptable for use in production-ready applications, as long as customers are happy with the issues mentioned previously.\r\n\r\nWe regularly review the stability and reliability of Beta components. When the component meets the criteria it can be transitioned to a stable release.\r\n\r\n## Canary components\r\n\r\nCanary components are unstable components that are released for testing purposes.\r\n\r\nThese components should not be used in production apps without understanding the risk that changes may occur in order to fix bugs or improve functionality.\r\n\r\nWe consider a Canary component to be acceptable for moving to Beta once customers have tested its usage and provided enough feedback to suggest they're happy with it.\r\n\r\nCanary components can be installed in the same way as our core `@ukic/` packages, but prefixed with canary, for example `@ukic/canary-react` or `@ukic/canary-web-components`.\r\n\r\n```shell\r\n// Canary Web Components\r\nnpm i @ukic/canary-web-components @ukic/fonts\r\n\r\n// Canary React\r\nnpm i @ukic/canary-react @ukic/fonts\r\n```\r\n\r\nA difference between our Canary packages and our core `@ukic/` packages is that canary package versions follow a `<version>-canary.<build-number>` pattern.\r\n\r\n<p>\r\n Another difference is that docs for canary components won't appear in the\r\n Components guidance section of this site. Instead, docs can be viewed in our\r\n Storybook instance for either{\" \"}\r\n <ic-link\r\n target=\"_blank\"\r\n href=\"https://mi6.github.io/ic-ui-kit/branches/canary/main/react/?path=/docs/getting-started--docs\"\r\n rel=\"noreferer noopener nofollow\"\r\n >\r\n React\r\n </ic-link>{\" \"}\r\n or{\" \"}\r\n <ic-link\r\n target=\"_blank\"\r\n href=\"https://mi6.github.io/ic-ui-kit/branches/canary/main/web-components/?path=/docs/getting-started--docs\"\r\n rel=\"noreferer noopener nofollow\"\r\n >\r\n web components\r\n </ic-link>\r\n .\r\n</p>\r\n\r\n## Supporting previous versions\r\n\r\nAs the component library matures and new versions arrive, the team will actively maintain and support the previous major version for up to 6 months.\r\n\r\nThis is to allow the team to provide as much resource as possible on the current version. Any support for the legacy versions will only include security updates and bug fixes. No new features will be added.\r\n",
"path": "/get-started/releases-versions",
"date": "2024-08-29",
"title": "Releases and versions",
"subTitle": "Our approach to releases and versioning.",
"contribute": "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/get-started/releases-versioning.mdx",
"meta": {
- "relativePath": "get-started/releases-versioning.mdx",
- "createdAt": "2024-11-06T10:27:49.396Z",
- "lastModified": "2024-11-06T10:19:00.176Z",
- "size": 5433,
- "formattedSize": "5.3 KB"
+ "relativePath": "get-started\\releases-versioning.mdx",
+ "createdAt": "2024-12-04T13:23:54.128Z",
+ "lastModified": "2024-12-04T13:23:54.128Z",
+ "size": 5555,
+ "formattedSize": "5.4 KB"
}
},
{
@@ -4763,9 +4763,9 @@
"subTitle": "How to use the components in a Svelte-based application.",
"contribute": "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/get-started/svelte.mdx",
"meta": {
- "relativePath": "get-started/svelte.mdx",
- "createdAt": "2024-11-06T10:27:49.396Z",
- "lastModified": "2024-11-06T10:19:00.176Z",
+ "relativePath": "get-started\\svelte.mdx",
+ "createdAt": "2024-11-05T11:57:54.922Z",
+ "lastModified": "2024-11-05T11:57:54.922Z",
"size": 1907,
"formattedSize": "1.9 KB"
}
@@ -4780,9 +4780,9 @@
"subTitle": "Test the UI Kit components within the shadow DOM using a testing framework.",
"contribute": "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/get-started/test-components.mdx",
"meta": {
- "relativePath": "get-started/test-components.mdx",
- "createdAt": "2024-11-06T10:27:49.396Z",
- "lastModified": "2024-11-06T10:19:00.176Z",
+ "relativePath": "get-started\\test-components.mdx",
+ "createdAt": "2024-11-05T11:57:54.954Z",
+ "lastModified": "2024-11-05T11:57:54.954Z",
"size": 2209,
"formattedSize": "2.2 KB"
}
@@ -4797,9 +4797,9 @@
"navPriority": 4,
"contribute": "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/get-started/testing-with-cypress.mdx",
"meta": {
- "relativePath": "get-started/testing-with-cypress.mdx",
- "createdAt": "2024-11-06T10:27:49.396Z",
- "lastModified": "2024-11-06T10:19:00.176Z",
+ "relativePath": "get-started\\testing-with-cypress.mdx",
+ "createdAt": "2024-11-05T11:57:54.996Z",
+ "lastModified": "2024-11-05T11:57:54.996Z",
"size": 5707,
"formattedSize": "5.6 KB"
}
@@ -4814,9 +4814,9 @@
"navPriority": 2,
"contribute": "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/get-started/testing-with-jest.mdx",
"meta": {
- "relativePath": "get-started/testing-with-jest-and-rtl.mdx",
- "createdAt": "2024-11-06T10:27:49.396Z",
- "lastModified": "2024-11-06T10:19:00.176Z",
+ "relativePath": "get-started\\testing-with-jest-and-rtl.mdx",
+ "createdAt": "2024-11-05T11:57:55.026Z",
+ "lastModified": "2024-11-05T11:57:55.026Z",
"size": 5343,
"formattedSize": "5.2 KB"
}
@@ -4831,9 +4831,9 @@
"subTitle": "How to use the components in a Vue-based application.",
"contribute": "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/get-started/vue.mdx",
"meta": {
- "relativePath": "get-started/vue.mdx",
- "createdAt": "2024-11-06T10:27:49.396Z",
- "lastModified": "2024-11-06T10:19:00.176Z",
+ "relativePath": "get-started\\vue.mdx",
+ "createdAt": "2024-11-05T11:57:55.061Z",
+ "lastModified": "2024-11-05T11:57:55.061Z",
"size": 2731,
"formattedSize": "2.7 KB"
}
@@ -4848,9 +4848,9 @@
"subTitle": "How to use the web components.",
"contribute": "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/get-started/web-components.mdx",
"meta": {
- "relativePath": "get-started/web-components.mdx",
- "createdAt": "2024-11-06T10:27:49.396Z",
- "lastModified": "2024-11-06T10:19:00.176Z",
+ "relativePath": "get-started\\web-components.mdx",
+ "createdAt": "2024-11-05T11:57:55.101Z",
+ "lastModified": "2024-11-05T11:57:55.101Z",
"size": 3482,
"formattedSize": "3.4 KB"
}
@@ -4863,9 +4863,9 @@
"title": "Accessibility Statement",
"subTitle": "Accessibility Statement for the Intelligence Community Design System.",
"meta": {
- "relativePath": "icds/accessibility-statement.mdx",
- "createdAt": "2024-11-06T10:27:49.396Z",
- "lastModified": "2024-11-06T10:19:00.176Z",
+ "relativePath": "icds\\accessibility-statement.mdx",
+ "createdAt": "2024-11-05T11:57:55.141Z",
+ "lastModified": "2024-11-05T11:57:55.141Z",
"size": 5555,
"formattedSize": "5.4 KB"
}
@@ -4878,9 +4878,9 @@
"title": "Cookies Policy",
"subTitle": "Cookies Policy for the Intelligence Community Design System.",
"meta": {
- "relativePath": "icds/cookies-policy.mdx",
- "createdAt": "2024-11-06T10:27:49.396Z",
- "lastModified": "2024-11-06T10:19:00.176Z",
+ "relativePath": "icds\\cookies-policy.mdx",
+ "createdAt": "2024-11-05T11:57:55.174Z",
+ "lastModified": "2024-11-05T11:57:55.174Z",
"size": 5488,
"formattedSize": "5.4 KB"
}
@@ -4894,9 +4894,9 @@
"subTitle": "This section contains documents regarding the Design System website and your use of it.",
"contribute": "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/icds/index.mdx",
"meta": {
- "relativePath": "icds/index.mdx",
- "createdAt": "2024-11-06T10:27:49.396Z",
- "lastModified": "2024-11-06T10:19:00.176Z",
+ "relativePath": "icds\\index.mdx",
+ "createdAt": "2024-11-05T11:57:55.186Z",
+ "lastModified": "2024-11-05T11:57:55.186Z",
"size": 671,
"formattedSize": "671 Bytes"
}
@@ -4909,9 +4909,9 @@
"title": "Privacy Policy",
"subTitle": "Privacy Policy for the Intelligence Community Design System.",
"meta": {
- "relativePath": "icds/privacy-policy.mdx",
- "createdAt": "2024-11-06T10:27:49.396Z",
- "lastModified": "2024-11-06T10:19:00.176Z",
+ "relativePath": "icds\\privacy-policy.mdx",
+ "createdAt": "2024-11-05T11:57:55.213Z",
+ "lastModified": "2024-11-05T11:57:55.213Z",
"size": 3753,
"formattedSize": "3.7 KB"
}
@@ -4926,9 +4926,9 @@
"subTitle": "App errors are shown when a problem occurs that the user has no control over.",
"contribute": "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/patterns/deprecated-patterns/app-errors.mdx",
"meta": {
- "relativePath": "patterns/app-errors.mdx",
- "createdAt": "2024-11-06T10:27:49.396Z",
- "lastModified": "2024-11-06T10:19:00.176Z",
+ "relativePath": "patterns\\app-errors.mdx",
+ "createdAt": "2024-11-05T11:57:55.245Z",
+ "lastModified": "2024-11-05T11:57:55.245Z",
"size": 3932,
"formattedSize": "3.8 KB"
}
@@ -4943,9 +4943,9 @@
"subTitle": "A simple layout for a form helps to make it easier to complete and allows users to focus on the content of the questions.",
"contribute": "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/patterns/deprecated-pattern/form-layout.mdx",
"meta": {
- "relativePath": "patterns/form-layout.mdx",
- "createdAt": "2024-11-06T10:27:49.396Z",
- "lastModified": "2024-11-06T10:19:00.176Z",
+ "relativePath": "patterns\\form-layout.mdx",
+ "createdAt": "2024-11-05T11:57:55.366Z",
+ "lastModified": "2024-11-05T11:57:55.366Z",
"size": 3197,
"formattedSize": "3.1 KB"
}
@@ -4960,9 +4960,9 @@
"subTitle": "Form validation checks that the information provided is correct and helps the user to fix any problems.",
"contribute": "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/patterns/deprecated-patterns/form-validation.mdx",
"meta": {
- "relativePath": "patterns/form-validation.mdx",
- "createdAt": "2024-11-06T10:27:49.396Z",
- "lastModified": "2024-11-06T10:19:00.176Z",
+ "relativePath": "patterns\\form-validation.mdx",
+ "createdAt": "2024-11-05T11:57:55.388Z",
+ "lastModified": "2024-11-05T11:57:55.388Z",
"size": 2283,
"formattedSize": "2.2 KB"
}
@@ -4977,9 +4977,9 @@
"subTitle": "This section introduces our common design patterns.",
"contribute": "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/patterns/index.mdx",
"meta": {
- "relativePath": "patterns/index.mdx",
- "createdAt": "2024-11-06T10:27:49.396Z",
- "lastModified": "2024-11-06T10:19:00.180Z",
+ "relativePath": "patterns\\index.mdx",
+ "createdAt": "2024-11-05T11:57:55.402Z",
+ "lastModified": "2024-11-05T11:57:55.402Z",
"size": 955,
"formattedSize": "955 Bytes"
}
@@ -4994,9 +4994,9 @@
"subTitle": "Navigation patterns are ready-made pages with built-in components to help get you started.",
"contribute": "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/patterns/navigation-patterns.mdx",
"meta": {
- "relativePath": "patterns/navigation-patterns.mdx",
- "createdAt": "2024-11-06T10:27:49.396Z",
- "lastModified": "2024-11-06T10:19:00.180Z",
+ "relativePath": "patterns\\navigation-patterns.mdx",
+ "createdAt": "2024-11-05T11:57:55.413Z",
+ "lastModified": "2024-11-05T11:57:55.413Z",
"size": 931,
"formattedSize": "931 Bytes"
}
@@ -5011,9 +5011,9 @@
"subTitle": "Use the side navigation layout to quickly set up a page where the side navigation is the primary form of navigation.",
"contribute": "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/patterns/navigation-patterns/side-navigation-layout.mdx",
"meta": {
- "relativePath": "patterns/side-navigation-layout.mdx",
- "createdAt": "2024-11-06T10:27:49.396Z",
- "lastModified": "2024-11-06T10:19:00.180Z",
+ "relativePath": "patterns\\side-navigation-layout.mdx",
+ "createdAt": "2024-11-05T11:57:55.465Z",
+ "lastModified": "2024-11-05T11:57:55.465Z",
"size": 83778,
"formattedSize": "81.8 KB"
}
@@ -5028,9 +5028,9 @@
"subTitle": "Success messages inform the user of a successful outcome.",
"contribute": "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/patterns/deprecated-patterns/success.mdx",
"meta": {
- "relativePath": "patterns/success.mdx",
- "createdAt": "2024-11-06T10:27:49.396Z",
- "lastModified": "2024-11-06T10:19:00.180Z",
+ "relativePath": "patterns\\success.mdx",
+ "createdAt": "2024-11-05T11:57:55.488Z",
+ "lastModified": "2024-11-05T11:57:55.488Z",
"size": 2984,
"formattedSize": "2.9 KB"
}
@@ -5045,27 +5045,27 @@
"subTitle": "Use the top navigation layout to quickly set up a page where the top navigation menu is the primary form of navigation.",
"contribute": "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/patterns/navigation-patterns/top-navigation-layout.mdx",
"meta": {
- "relativePath": "patterns/top-navigation-layout.mdx",
- "createdAt": "2024-11-06T10:27:49.396Z",
- "lastModified": "2024-11-06T10:19:00.180Z",
+ "relativePath": "patterns\\top-navigation-layout.mdx",
+ "createdAt": "2024-11-05T11:57:55.546Z",
+ "lastModified": "2024-11-05T11:57:55.546Z",
"size": 71978,
"formattedSize": "70.3 KB"
}
},
{
"id": "styles\\colourx",
- "contents": "\nimport ColorTable from \"./components/ColourTable\";\nimport {\n ColoursText,\n ColoursAction,\n ColoursActionBackgrounds,\n ColoursLinks,\n ColoursStatus,\n ColoursDeprecatedStatus,\n ColoursClassification,\n ColoursArchitecturalAll,\n ColoursTheme,\n} from \"./components/ColourTable/colours.config\";\n\n## Using colours\n\nPeople can complete tasks faster with recognisable, accessible and consistent colours.\n\nAlways use the Design System colour styles. These colours meet or exceed all [accessibility requirements](/accessibility/requirement).\n\nThe colour styles are built into the [UI Kit](/get-started). You should use these to help maintain consistency when you are building custom experiences.\n\n## Text\n\nPrimary text is an off-black colour that satisfies minimum and maximum contrast needs. Use this colour for the majority of text and elements.\n\nUse the secondary text colour for supporting content such as helper text or less important information in lists and tables.\n\nUse the tertiary text colour for even less important information. Use the tertiary text colour sparingly and always try to use the primary or secondary colours first.\n\nDon't use different colours for text, unless specified as part of a component.\n\n<ColorTable config={ColoursText} />\n\n## Action\n\nUse the action colour for interactive elements like buttons, form controls and important actions. This makes it easy for people to recognise elements and switch between contexts.\n\nThe single action colour creates consistency across a range of apps. Use the dark or light action colour variant if a background colour is used.\n\nUse the destructive action colour styles for actions that can't be reversed.\n\n<ColorTable config={ColoursAction} />\n\n### Action backgrounds\n\nInteractive elements sometimes require transparent backgrounds for their hover and pressed states. The action background colour styles use the action colour styles with transparency.\n\n<ColorTable config={ColoursActionBackgrounds} />\n\n## Links\n\nUse these colours for all links. These specific colours help to identify links from non-interactive text.\n\n<ColorTable config={ColoursLinks} />\n\n## Status\n\nUse these colours only for status updates, errors and warnings. Always include text describing the status even if you use an icon.\n\nUse the contrast colour variants to achieve good contrast when displaying status on dark backgrounds.\n\nUse the 'warning dark' colour for any 'warning' text.\n\n<ColorTable config={ColoursStatus} />\n\n<br />\n\nThe following status colours have been deprecated. You can find equivalent colours in the table above.\n\n<ColorTable config={ColoursDeprecatedStatus} />\n\n## Classification\n\nUse these colour styles for components that indicate content's classification.\n\n<ColorTable config={ColoursClassification} />\n\n## Architectural\n\nUse these colours in lines, borders and backgrounds to logically separate distinct pieces of content.\n\n<ColorTable config={ColoursArchitecturalAll} />\n\n## Theme\n\nYou may choose a theme colour to give your app a distinct theme or 'brand'. Make sure it meets contrast requirements with either black or white foreground text.\n\nIf you use the [IC UI Kit](/components), the foreground colour will be automatically determined based on your theme colour.\n\nThe theme colour is used on the [top navigation](/components/top-navigation), [side navigation](/components/side-navigation), [hero](/components/hero) and [footer](/components/footer) components.\n\nDon't use theme colours on any other components.\n\n<ColorTable config={ColoursTheme} />\n\n## Accessibility considerations\n\nThese colours have been considered against a variety of accessibility and usability practices. This includes colour contrast, recognition, consistency and with various colour deficiencies.\n\nIf using a 'light' theme colour, any text in those components will need to be black instead of white. This is automatic if you're using the IC UI Kit. It's not possible to use 'inaccessible' colours in the IC UI Kit as they'll revert to the default theme colour. See the component documentation for more details.\n",
+ "contents": "\r\nimport ColorTable from \"./components/ColourTable\";\r\nimport {\r\n ColoursText,\r\n ColoursAction,\r\n ColoursActionBackgrounds,\r\n ColoursLinks,\r\n ColoursStatus,\r\n ColoursDeprecatedStatus,\r\n ColoursClassification,\r\n ColoursArchitecturalAll,\r\n ColoursTheme,\r\n} from \"./components/ColourTable/colours.config\";\r\n\r\n## Using colours\r\n\r\nPeople can complete tasks faster with recognisable, accessible and consistent colours.\r\n\r\nAlways use the Design System colour styles. These colours meet or exceed all [accessibility requirements](/accessibility/requirement).\r\n\r\nThe colour styles are built into the [UI Kit](/get-started). You should use these to help maintain consistency when you are building custom experiences.\r\n\r\n## Text\r\n\r\nPrimary text is an off-black colour that satisfies minimum and maximum contrast needs. Use this colour for the majority of text and elements.\r\n\r\nUse the secondary text colour for supporting content such as helper text or less important information in lists and tables.\r\n\r\nUse the tertiary text colour for even less important information. Use the tertiary text colour sparingly and always try to use the primary or secondary colours first.\r\n\r\nDon't use different colours for text, unless specified as part of a component.\r\n\r\n<ColorTable config={ColoursText} />\r\n\r\n## Action\r\n\r\nUse the action colour for interactive elements like buttons, form controls and important actions. This makes it easy for people to recognise elements and switch between contexts.\r\n\r\nThe single action colour creates consistency across a range of apps. Use the dark or light action colour variant if a background colour is used.\r\n\r\nUse the destructive action colour styles for actions that can't be reversed.\r\n\r\n<ColorTable config={ColoursAction} />\r\n\r\n### Action backgrounds\r\n\r\nInteractive elements sometimes require transparent backgrounds for their hover and pressed states. The action background colour styles use the action colour styles with transparency.\r\n\r\n<ColorTable config={ColoursActionBackgrounds} />\r\n\r\n## Links\r\n\r\nUse these colours for all links. These specific colours help to identify links from non-interactive text.\r\n\r\n<ColorTable config={ColoursLinks} />\r\n\r\n## Status\r\n\r\nUse these colours only for status updates, errors and warnings. Always include text describing the status even if you use an icon.\r\n\r\nUse the contrast colour variants to achieve good contrast when displaying status on dark backgrounds.\r\n\r\nUse the 'warning dark' colour for any 'warning' text.\r\n\r\n<ColorTable config={ColoursStatus} />\r\n\r\n<br />\r\n\r\nThe following status colours have been deprecated. You can find equivalent colours in the table above.\r\n\r\n<ColorTable config={ColoursDeprecatedStatus} />\r\n\r\n## Classification\r\n\r\nUse these colour styles for components that indicate content's classification.\r\n\r\n<ColorTable config={ColoursClassification} />\r\n\r\n## Architectural\r\n\r\nUse these colours in lines, borders and backgrounds to logically separate distinct pieces of content.\r\n\r\n<ColorTable config={ColoursArchitecturalAll} />\r\n\r\n## Theme\r\n\r\nYou may choose a theme colour to give your app a distinct theme or 'brand'. Make sure it meets contrast requirements with either black or white foreground text.\r\n\r\nIf you use the [IC UI Kit](/components), the foreground colour will be automatically determined based on your theme colour.\r\n\r\nThe theme colour is used on the [top navigation](/components/top-navigation), [side navigation](/components/side-navigation), [hero](/components/hero) and [footer](/components/footer) components.\r\n\r\nDon't use theme colours on any other components.\r\n\r\n<ColorTable config={ColoursTheme} />\r\n\r\n## Accessibility considerations\r\n\r\nThese colours have been considered against a variety of accessibility and usability practices. This includes colour contrast, recognition, consistency and with various colour deficiencies.\r\n\r\nIf using a 'light' theme colour, any text in those components will need to be black instead of white. This is automatic if you're using the IC UI Kit. It's not possible to use 'inaccessible' colours in the IC UI Kit as they'll revert to the default theme colour. See the component documentation for more details.\r\n",
"path": "/styles/colour",
"navPriority": 1,
"date": "2024-09-30",
"title": "Colour",
"contribute": "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/styles/colour.mdx",
"meta": {
- "relativePath": "styles/colour.mdx",
- "createdAt": "2024-11-06T10:27:49.408Z",
- "lastModified": "2024-11-06T10:19:00.180Z",
- "size": 4250,
- "formattedSize": "4.2 KB"
+ "relativePath": "styles\\colour.mdx",
+ "createdAt": "2024-12-04T13:23:54.131Z",
+ "lastModified": "2024-12-04T13:23:54.131Z",
+ "size": 4362,
+ "formattedSize": "4.3 KB"
}
},
{
@@ -5077,9 +5077,9 @@
"subTitle": "People read, understand and consume content in different ways. What we write should be understandable by all, regardless of how they work, think or interact.",
"contribute": "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/styles/content-style.mdx",
"meta": {
- "relativePath": "styles/content-style.mdx",
- "createdAt": "2024-11-06T10:27:49.412Z",
- "lastModified": "2024-11-06T10:19:00.180Z",
+ "relativePath": "styles\\content-style.mdx",
+ "createdAt": "2024-11-05T11:57:55.730Z",
+ "lastModified": "2024-11-05T11:57:55.730Z",
"size": 2018,
"formattedSize": "2.0 KB"
}
@@ -5093,9 +5093,9 @@
"title": "Elevation",
"contribute": "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/styles/elevation.mdx",
"meta": {
- "relativePath": "styles/elevation.mdx",
- "createdAt": "2024-11-06T10:27:49.412Z",
- "lastModified": "2024-11-06T10:19:00.180Z",
+ "relativePath": "styles\\elevation.mdx",
+ "createdAt": "2024-11-05T11:57:55.798Z",
+ "lastModified": "2024-11-05T11:57:55.798Z",
"size": 7068,
"formattedSize": "6.9 KB"
}
@@ -5109,9 +5109,9 @@
"title": "Focus indicator",
"contribute": "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/styles/focus-indicator.mdx",
"meta": {
- "relativePath": "styles/focus-indicator.mdx",
- "createdAt": "2024-11-06T10:27:49.408Z",
- "lastModified": "2024-11-06T10:19:00.180Z",
+ "relativePath": "styles\\focus-indicator.mdx",
+ "createdAt": "2024-11-05T11:57:55.820Z",
+ "lastModified": "2024-11-05T11:57:55.820Z",
"size": 3026,
"formattedSize": "3.0 KB"
}
@@ -5126,9 +5126,9 @@
"subTitle": "Grammar and punctuation are the building blocks of good writing.",
"contribute": "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/styles/grammar.mdx",
"meta": {
- "relativePath": "styles/grammar.mdx",
- "createdAt": "2024-11-06T10:27:49.408Z",
- "lastModified": "2024-11-06T10:19:00.180Z",
+ "relativePath": "styles\\grammar.mdx",
+ "createdAt": "2024-11-05T11:57:55.852Z",
+ "lastModified": "2024-11-05T11:57:55.852Z",
"size": 3324,
"formattedSize": "3.2 KB"
}
@@ -5142,9 +5142,9 @@
"title": "Icons",
"contribute": "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/styles/icons.mdx",
"meta": {
- "relativePath": "styles/icons.mdx",
- "createdAt": "2024-11-06T10:27:49.412Z",
- "lastModified": "2024-11-06T10:19:00.180Z",
+ "relativePath": "styles\\icons.mdx",
+ "createdAt": "2024-11-05T11:57:55.874Z",
+ "lastModified": "2024-11-05T11:57:55.874Z",
"size": 1720,
"formattedSize": "1.7 KB"
}
@@ -5159,9 +5159,9 @@
"subTitle": "Consider that what you write can have side effects even with the best of intentions.",
"contribute": "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/styles/inclusive-language.mdx",
"meta": {
- "relativePath": "styles/inclusive-language.mdx",
- "createdAt": "2024-11-06T10:27:49.408Z",
- "lastModified": "2024-11-06T10:19:00.208Z",
+ "relativePath": "styles\\inclusive-language.mdx",
+ "createdAt": "2024-11-05T11:57:55.895Z",
+ "lastModified": "2024-11-05T11:57:55.895Z",
"size": 4718,
"formattedSize": "4.6 KB"
}
@@ -5176,9 +5176,9 @@
"subTitle": "This section introduces our style tokens, which describe how things look and feel.",
"contribute": "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/styles/index.mdx",
"meta": {
- "relativePath": "styles/index.mdx",
- "createdAt": "2024-11-06T10:27:49.408Z",
- "lastModified": "2024-11-06T10:19:00.208Z",
+ "relativePath": "styles\\index.mdx",
+ "createdAt": "2024-11-05T11:57:55.910Z",
+ "lastModified": "2024-11-05T11:57:55.910Z",
"size": 927,
"formattedSize": "927 Bytes"
}
@@ -5193,9 +5193,9 @@
"subTitle": "Common layout and spacing create consistency across pages and enable the rapid creation of new pages.",
"contribute": "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/styles/layout-spacing.mdx",
"meta": {
- "relativePath": "styles/layout-spacing.mdx",
- "createdAt": "2024-11-06T10:27:49.412Z",
- "lastModified": "2024-11-06T10:19:00.208Z",
+ "relativePath": "styles\\layout-spacing.mdx",
+ "createdAt": "2024-11-05T11:57:55.963Z",
+ "lastModified": "2024-11-05T11:57:55.963Z",
"size": 10020,
"formattedSize": "9.8 KB"
}
@@ -5210,9 +5210,9 @@
"subTitle": "Links need to be understandable by all users.",
"contribute": "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/styles/links.mdx",
"meta": {
- "relativePath": "styles/links.mdx",
- "createdAt": "2024-11-06T10:27:49.408Z",
- "lastModified": "2024-11-06T10:19:00.208Z",
+ "relativePath": "styles\\links.mdx",
+ "createdAt": "2024-11-05T11:57:55.973Z",
+ "lastModified": "2024-11-05T11:57:55.973Z",
"size": 1260,
"formattedSize": "1.2 KB"
}
@@ -5226,9 +5226,9 @@
"title": "Motion",
"contribute": "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/styles/motion.mdx",
"meta": {
- "relativePath": "styles/motion.mdx",
- "createdAt": "2024-11-06T10:27:49.412Z",
- "lastModified": "2024-11-06T10:19:00.208Z",
+ "relativePath": "styles\\motion.mdx",
+ "createdAt": "2024-11-05T11:57:56.013Z",
+ "lastModified": "2024-11-05T11:57:56.013Z",
"size": 5939,
"formattedSize": "5.8 KB"
}
@@ -5243,9 +5243,9 @@
"subTitle": "How to write numbers, dates and times consistently.",
"contribute": "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/styles/numbers-dates-time.mdx",
"meta": {
- "relativePath": "styles/numbers-dates-time.mdx",
- "createdAt": "2024-11-06T10:27:49.408Z",
- "lastModified": "2024-11-06T10:19:00.208Z",
+ "relativePath": "styles\\numbers-dates-time.mdx",
+ "createdAt": "2024-11-05T11:57:56.030Z",
+ "lastModified": "2024-11-05T11:57:56.030Z",
"size": 2592,
"formattedSize": "2.5 KB"
}
@@ -5260,9 +5260,9 @@
"subTitle": "Use the four writing principles to help create engaging and consistent content.",
"contribute": "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/styles/principles.mdx",
"meta": {
- "relativePath": "styles/principles.mdx",
- "createdAt": "2024-11-06T10:27:49.408Z",
- "lastModified": "2024-11-06T10:19:00.208Z",
+ "relativePath": "styles\\principles.mdx",
+ "createdAt": "2024-11-05T11:57:56.044Z",
+ "lastModified": "2024-11-05T11:57:56.044Z",
"size": 1456,
"formattedSize": "1.4 KB"
}
@@ -5277,9 +5277,9 @@
"subTitle": "Follow these common layout templates to apply frequently used navigation patterns to your app designs.",
"contribute": "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/styles/templates.mdx",
"meta": {
- "relativePath": "styles/templates.mdx",
- "createdAt": "2024-11-06T10:27:49.408Z",
- "lastModified": "2024-11-06T10:19:00.208Z",
+ "relativePath": "styles\\templates.mdx",
+ "createdAt": "2024-11-05T11:57:56.070Z",
+ "lastModified": "2024-11-05T11:57:56.070Z",
"size": 4079,
"formattedSize": "4.0 KB"
}
@@ -5293,9 +5293,9 @@
"title": "Typography",
"contribute": "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/styles/typography.mdx",
"meta": {
- "relativePath": "styles/typography.mdx",
- "createdAt": "2024-11-06T10:27:49.408Z",
- "lastModified": "2024-11-06T10:19:00.208Z",
+ "relativePath": "styles\\typography.mdx",
+ "createdAt": "2024-11-05T11:57:56.087Z",
+ "lastModified": "2024-11-05T11:57:56.087Z",
"size": 1851,
"formattedSize": "1.8 KB"
}
@@ -5310,9 +5310,9 @@
"subTitle": "Learn how to apply our familiar tongue and how to choose the right tone.",
"contribute": "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/styles/voice-and-tone.mdx",
"meta": {
- "relativePath": "styles/voice-and-tone.mdx",
- "createdAt": "2024-11-06T10:27:49.408Z",
- "lastModified": "2024-11-06T10:19:00.208Z",
+ "relativePath": "styles\\voice-and-tone.mdx",
+ "createdAt": "2024-11-05T11:57:56.110Z",
+ "lastModified": "2024-11-05T11:57:56.110Z",
"size": 3749,
"formattedSize": "3.7 KB"
}