);
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 = () => {
-
+
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 = ({
{footerLink.text}
))}
-
+
Go to S.I.S. website
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 = [
StylesComponentsPatterns
-
+
\r\n\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: `\r\n\r\n`,\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\r\n\r\n
\r\n\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: ``,\r\n long: `.parent-container {\r\n padding: var(--ic-space-md);\r\n }\r\n\r\n\r\n
\r\n)`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n\r\n \r\n\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: ``,\r\n long: `.parent-container {\r\n padding: var(--ic-space-md);\r\n }\r\n\r\n\r\n
\r\n)`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n\r\n \r\n\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: ``,\r\n long: `.parent-container {\r\n padding: var(--ic-space-md);\r\n }\r\n\r\n\r\n
\r\n)`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n\r\n \r\n\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: ``,\r\n long: `.parent-container {\r\n padding: var(--ic-space-md);\r\n }\r\n\r\n\r\n
\r\n)`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n\r\n \r\n\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: ``,\r\n long: `.parent-container {\r\n padding: var(--ic-space-md);\r\n }\r\n\r\n\r\n
\r\n)`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n\r\n \r\n\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: ``,\r\n long: `.parent-container {\r\n padding: var(--ic-space-md);\r\n }\r\n\r\n\r\n
\r\n)`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n\r\n \r\n\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: ``,\r\n long: `.parent-container {\r\n padding: var(--ic-space-md);\r\n }\r\n\r\n\r\n
\r\n)`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n\r\n \r\n\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: ``,\r\n long: `.parent-container {\r\n padding: var(--ic-space-md);\r\n }\r\n\r\n\r\n
\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 Launch dialog\n \n \n Before continuing, please agree to our terms and conditions.\n \n \n \n \n \n \n );\n};\n\n\n \n\n\n### Background close prevented\n\nexport const noCloseSnippet = [\n {\n technology: \"Web component\",\n snippets: {\n short: `Launch dialog\n\n \n You are about to add 'Americano' to your basket. Are you sure you want to continue?\n \n`,\n long: `{shortCode}\n`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `Launch dialog\n\n \n You are about to add 'Americano' to your basket. Are you sure you want to continue?\n \n`,\n long: [\n {\n language: \"Typescript\",\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 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 Launch dialog\n \n \n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do\n eiusmod tempor incididunt ut labore et dolore magna aliqua.\n \n \n \n );\n};\n\n\n \n\n\n### Events\n\nexport const eventsSnippet = [\n {\n technology: \"Web component\",\n snippets: {\n short: `Launch dialog\n\n \n You are about to add 'Americano' to your basket. Are you sure you want to continue?\n \n \n Cancel\n \n \n Confirm\n \n`,\n long: `{shortCode}\n`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `Launch dialog\n\n \n You are about to add 'Americano' to your basket. Are you sure you want to continue?\n \n \n Cancel\n \n \n Confirm\n \n`,\n long: [\n {\n language: \"Typescript\",\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 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 Launch dialog\n \n \n You are about to add 'Americano' to your basket. Are you sure you want\n to continue?\n \n \n Cancel\n \n \n Confirm\n \n \n \n );\n};\n\n\n \n\n\n### Disabled height constraint\n\nexport const popoutElements = [\n {\n technology: \"Web component\",\n snippets: {\n short: `Launch disabled height constraint dialog\n\n 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? \n 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! \n \n`,\n long: `{shortCode}\n`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `Launch disabled height constraint dialog\n\n \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 \n \n \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 \n \n \n`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const [openDialog, setOpenDialog] = useState(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 \n Launch disabled height constraint dialog\n \n \n \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 \n \n \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 \n \n \n \n \n );\n};\n\n\n \n\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: `Launch dialog\r\n\r\n \r\n You are about to add 'Americano' to your basket. Are you sure you want to continue?\r\n \r\n`,\r\n long: `{shortCode}\r\n`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `Launch dialog\r\n\r\n \r\n You are about to add 'Americano' to your basket. Are you sure you want\r\n to continue?\r\n \r\n`,\r\n long: [\r\n {\r\n language: \"Typescript\",\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 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 Launch dialog\r\n \r\n \r\n You are about to add 'Americano' to your basket. Are you sure you want\r\n to continue?\r\n \r\n \r\n \r\n );\r\n};\r\n\r\n\r\n \r\n\r\n\r\n## Dialog details\r\n\r\n\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: `Launch dialog\r\n\r\n \r\n You are about to add 'Americano' to your basket. Are you sure you want to continue?\r\n \r\n`,\r\n long: `{shortCode}\r\n`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `Launch sizes dialog\r\n\r\n \r\n You are about to add 'Americano' to your basket. Are you sure you want to\r\n continue?\r\n \r\n`,\r\n long: [\r\n {\r\n language: \"Typescript\",\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 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 Launch sizes dialog\r\n \r\n \r\n You are about to add 'Americano' to your basket. Are you sure you want\r\n to continue?\r\n \r\n \r\n \r\n );\r\n};\r\n\r\n\r\n \r\n\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: `Launch status dialog\r\n\r\n \r\n \r\n \r\n You are about to add 'Americano' to your basket. Are you sure you want to continue?\r\n \r\n`,\r\n long: `{shortCode}\r\n`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `\r\n Launch status dialog\r\n\r\n\r\n \r\n \r\n You are about to add 'Americano' to your basket. Are you sure you want\r\n to continue?\r\n \r\n`,\r\n long: [\r\n {\r\n language: \"Typescript\",\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 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 \r\n Launch dialog\r\n \r\n \r\n \r\n \r\n You are about to add 'Americano' to your basket. Are you sure you want\r\n to continue?\r\n \r\n \r\n \r\n );\r\n};\r\n\r\n\r\n \r\n\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: `Launch no button dialog\r\nLaunch single button dialog\r\nLaunch three button dialog\r\nLaunch destructive button dialog\r\n\r\n Sorry, you cannot place orders at the moment. Please try again later.\r\n\r\n\r\n \r\n Your order for an Americano coffee has been placed.\r\n \r\n\r\n\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\r\n\r\n \r\n You are about to cancel your order for an Americano. Are you sure you want to continue?\r\n \r\n`,\r\n long: `{shortCode}\r\n\r\n `,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `
\r\n \r\n Launch no button dialog\r\n \r\n \r\n Launch single button dialog\r\n \r\n \r\n Launch three button dialog\r\n \r\n \r\n Launch destructive button dialog\r\n \r\n
\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 Launch dialog\r\n \r\n \r\n Before continuing, please agree to our terms and conditions.\r\n \r\n \r\n \r\n \r\n \r\n \r\n );\r\n};\r\n\r\n\r\n \r\n\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: `Launch dialog\r\n\r\n \r\n You are about to add 'Americano' to your basket. Are you sure you want to continue?\r\n \r\n`,\r\n long: `{shortCode}\r\n`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `Launch dialog\r\n\r\n \r\n You are about to add 'Americano' to your basket. Are you sure you want to continue?\r\n \r\n`,\r\n long: [\r\n {\r\n language: \"Typescript\",\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 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 Launch dialog\r\n \r\n \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 \r\n \r\n \r\n );\r\n};\r\n\r\n\r\n \r\n\r\n\r\n### Events\r\n\r\nexport const eventsSnippet = [\r\n {\r\n technology: \"Web component\",\r\n snippets: {\r\n short: `Launch dialog\r\n\r\n \r\n You are about to add 'Americano' to your basket. Are you sure you want to continue?\r\n \r\n \r\n Cancel\r\n \r\n \r\n Confirm\r\n \r\n`,\r\n long: `{shortCode}\r\n`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `Launch dialog\r\n\r\n \r\n You are about to add 'Americano' to your basket. Are you sure you want to continue?\r\n \r\n \r\n Cancel\r\n \r\n \r\n Confirm\r\n \r\n`,\r\n long: [\r\n {\r\n language: \"Typescript\",\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 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 Launch dialog\r\n \r\n \r\n You are about to add 'Americano' to your basket. Are you sure you want\r\n to continue?\r\n \r\n \r\n Cancel\r\n \r\n \r\n Confirm\r\n \r\n \r\n \r\n );\r\n};\r\n\r\n\r\n \r\n\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: `Launch disabled height constraint dialog\r\n\r\n 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? \r\n 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! \r\n \r\n`,\r\n long: `{shortCode}\r\n`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `Launch disabled height constraint dialog\r\n\r\n \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 \r\n \r\n \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 \r\n \r\n \r\n`,\r\n long: [\r\n {\r\n language: \"Typescript\",\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 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 \r\n Launch disabled height constraint dialog\r\n \r\n \r\n \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 \r\n \r\n \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 \r\n \r\n \r\n \r\n \r\n );\r\n};\r\n\r\n\r\n \r\n\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 \n Launch dialog\n \n \n \n You are about to add 'Americano' to your basket. Are you sure you want\n to continue?\n \n \n \n );\n};\n\n\n \n\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\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\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\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\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\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\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\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 \r\n Launch dialog\r\n \r\n \r\n \r\n You are about to add 'Americano' to your basket. Are you sure you want\r\n to continue?\r\n \r\n \r\n \r\n );\r\n};\r\n\r\n\r\n \r\n\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\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\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\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\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\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\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\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: `\n \n Go to favourite coffees\n \n Customer support\n \n`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n Go to favourite coffees\n \n Customer support\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\n \n \n Go to favourite coffees\n e.preventDefault()}>\n Customer support\n \n \n\n\n## Empty state details\n\n\n\n## Variants\n\n### Actions slot\n\nexport const actionsSnippets = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n Go to favourite coffees\n Customer support\n`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\n Go to favourite coffees\n Customer support\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\n \n Go to favourite coffees\n e.preventDefault()}>\n Customer support\n \n \n\n\n### Image slot\n\nexport const imageSnippets = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\n \n \n \n \n \n \n \n \n \n \n \n \n \n \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\n \n \n \n\n\n### Image size\n\nexport const imageLargeSnippets = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\n \n \n \n \n \n \n \n \n \n \n \n \n \n \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\n \n \n \n\n\n### Icon in the image slot\n\nexport const iconSnippets = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n \n Warning\n \n \n \n`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\n \n Warning\n \n \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\n \n \n Warning\n \n \n \n \n\n\n### Right aligned\n\nexport const rightSnippets = [\n {\n technology: \"Web component\",\n snippets: {\n short: ``,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: ``,\n long: [\n {\n language: \"Typescript\",\n snippet: `{shortCode}`,\n },\n {\n language: \"Javascript\",\n snippet: `{shortCode}`,\n },\n ],\n },\n },\n];\n\n\n \n\n\n### Center aligned\n\nexport const centreSnippets = [\n {\n technology: \"Web component\",\n snippets: {\n short: ``,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: ``,\n long: [\n {\n language: \"Typescript\",\n snippet: `{shortCode}`,\n },\n {\n language: \"Javascript\",\n snippet: `{shortCode}`,\n },\n ],\n },\n },\n];\n\n\n \n\n\n### Max lines\n\nexport const maxLinesSnippets = [\n {\n technology: \"Web component\",\n snippets: {\n short: ``,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: ``,\n long: [\n {\n language: \"Typescript\",\n snippet: `{shortCode}`,\n },\n {\n language: \"Javascript\",\n snippet: `{shortCode}`,\n },\n ],\n },\n },\n];\n\n\n \n\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: `\r\n \r\n Go to favourite coffees\r\n \r\n Customer support\r\n \r\n`,\r\n long: `{shortCode}`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Go to favourite coffees\r\n \r\n Customer support\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\r\n \r\n \r\n Go to favourite coffees\r\n e.preventDefault()}>\r\n Customer support\r\n \r\n \r\n\r\n\r\n## Empty state details\r\n\r\n\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: `\r\n Go to favourite coffees\r\n Customer support\r\n`,\r\n long: `{shortCode}`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `\r\n Go to favourite coffees\r\n Customer support\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\r\n \r\n Go to favourite coffees\r\n e.preventDefault()}>\r\n Customer support\r\n \r\n \r\n\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: `\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n`,\r\n long: `{shortCode}`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \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\r\n \r\n \r\n \r\n\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: `\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n`,\r\n long: `{shortCode}`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \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\r\n \r\n \r\n \r\n\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: `\r\n \r\n Warning\r\n \r\n \r\n \r\n`,\r\n long: `{shortCode}`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `\r\n \r\n Warning\r\n \r\n \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\r\n \r\n \r\n Warning\r\n \r\n \r\n \r\n \r\n\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: ``,\r\n long: `{shortCode}`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: ``,\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\r\n \r\n\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: ``,\r\n long: `{shortCode}`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: ``,\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\r\n \r\n\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: ``,\r\n long: `{shortCode}`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: ``,\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\r\n \r\n\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\n \n \n Go to favourite coffees\n e.preventDefault()}>\n Customer support\n \n \n\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\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\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\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\n \n\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\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\n \n\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\n\n\n\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\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\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\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\r\n \r\n \r\n Go to favourite coffees\r\n e.preventDefault()}>\r\n Customer support\r\n \r\n \r\n\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\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\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\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\r\n \r\n\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\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\r\n \r\n\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\r\n\r\n\r\n\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\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\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\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: `\n \n Accessibility\n \n \n Styles\n \n \n Components\n \n \n Patterns\n \n`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\n \n Accessibility\n \n \n Styles\n \n \n Components\n \n \n Patterns\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\n \n \n Accessibility\n \n \n Styles\n \n \n Components\n \n \n Patterns\n \n \n\n\n## Footer details\n\n\n\n## Footer link details\n\n\n\n## Footer link group details\n\n\n\n## Variants\n\n### Grouped links\n\nexport const snippetsGroupedLinks = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n \n Accessibility\n Styles\n Components\n Patterns\n \n \n Accessibility\n Styles\n Components\n Patterns\n \n \n Accessibility\n Styles\n Components\n Patterns\n \n`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\n \n Accessibility\n Styles\n Components\n Patterns\n \n \n Accessibility\n Styles\n Components\n Patterns\n \n \n Accessibility\n Styles\n Components\n Patterns\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\n \n \n Accessibility\n Styles\n Components\n Patterns\n \n \n Accessibility\n Styles\n Components\n Patterns\n \n \n Accessibility\n Styles\n Components\n Patterns\n \n \n\n\n### Logo links\n\nexport const snippetsLogoLinks = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n Accessibility\n Styles\n Components\n Patterns\n
\n \n \n \n \n \n \n \n \n \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 \n \n \n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \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 \r\n \r\n \r\n
`,\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\r\n \r\n View example in new window\r\n \r\n\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\n \n \n Accessibility\n \n \n Styles\n \n \n Components\n \n \n Patterns\n \n \n\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\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\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\n\n\n\nPosition the footer adjacent to the [side navigation](/components/side-navigation) if your app uses one.\n\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\n\nUse centred alignment to centre footer content to the main body of the page.\n\n\n\nUse full-width to position footer content so that it spans the full width of the viewport.\n\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\n\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\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\n \n \n\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\r\n \r\n \r\n Accessibility\r\n \r\n \r\n Styles\r\n \r\n \r\n Components\r\n \r\n \r\n Patterns\r\n \r\n \r\n\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\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\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\r\n\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\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\r\n\r\nUse centred alignment to centre footer content to the main body of the page.\r\n\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\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\r\n\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\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\r\n \r\n \r\n\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: `\n Explore\n \n Check out our new drinks\n \n`,\n long: `ic-hero {\n height: fit-content;\n }\n \n \n {shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\n \n Explore\n \n \n Check out our new drinks\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\n \n \n Explore\n \n \n Check out our new drinks\n \n \n\n\n## Hero details\n\n\n\n## Variants\n\n### Centre aligned\n\nexport const snippetsCentre = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n Explore\n \n Check out our new drinks\n \n`,\n long: `ic-hero {\n height: fit-content;\n }\n \n \n {shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\n \n Explore\n \n \n Check out our new drinks\n \n`,\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\n \n \n Explore\n \n \n Check out our new drinks\n \n \n\n\n### Content centre aligned\n\nexport const snippetsContentCentre = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n Explore\n \n Check out our new drinks\n \n`,\n long: `ic-hero {\n height: fit-content;\n }\n \n \n {shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\n \n Explore\n \n \n Check out our new drinks\n \n`,\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\n \n \n Explore\n \n \n Check out our new drinks\n \n \n\n\n### Size small\n\nexport const snippetsSmall = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n Order now\n Submit new flavour\n`,\n long: `ic-hero {\n height: fit-content;\n }\n \n \n {shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\n \n Order now\n \n \n Submit new flavour\n \n`,\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\n \n \n Order now\n \n \n Submit new flavour\n \n \n\n\n### Secondary heading and search\n\nexport const snippetsSecondHeadingSearch = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n \n`,\n long: `ic-hero {\n height: fit-content;\n }\n \n \n {shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\n \n`,\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\n \n \n \n\n\n### Card right content\n\nexport const snippetsCard = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n Explore\n Check out our new drinks\n \n\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 \n \n {shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\n Explore\n Check out our new drinks\n \n`,\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\n \n \n Explore\n \n \n Check out our new drinks\n \n \n \n\n\n### Image right content\n\nexport const snippetsImage = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n Explore\n Check out our new drinks\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n`,\n long: `.card-image {\n width: 18.75rem;\n }\n ic-hero {\n height: fit-content;\n }\n\n\n {shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\n Explore\n Check out our new drinks\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n `,\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\n \n \n Explore\n \n \n Check out our new drinks\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\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: `\r\n Explore\r\n \r\n Check out our new drinks\r\n \r\n`,\r\n long: `ic-hero {\r\n height: fit-content;\r\n }\r\n \r\n \r\n {shortCode}`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `\r\n \r\n Explore\r\n \r\n \r\n Check out our new drinks\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\r\n \r\n \r\n Explore\r\n \r\n \r\n Check out our new drinks\r\n \r\n \r\n\r\n\r\n## Hero details\r\n\r\n\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: `\r\n Explore\r\n \r\n Check out our new drinks\r\n \r\n`,\r\n long: `ic-hero {\r\n height: fit-content;\r\n }\r\n \r\n \r\n {shortCode}`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `\r\n \r\n Explore\r\n \r\n \r\n Check out our new drinks\r\n \r\n`,\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\r\n \r\n \r\n Explore\r\n \r\n \r\n Check out our new drinks\r\n \r\n \r\n\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: `\r\n Explore\r\n \r\n Check out our new drinks\r\n \r\n`,\r\n long: `ic-hero {\r\n height: fit-content;\r\n }\r\n \r\n \r\n {shortCode}`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `\r\n \r\n Explore\r\n \r\n \r\n Check out our new drinks\r\n \r\n`,\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\r\n \r\n \r\n Explore\r\n \r\n \r\n Check out our new drinks\r\n \r\n \r\n\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: `\r\n Order now\r\n Submit new flavour\r\n`,\r\n long: `ic-hero {\r\n height: fit-content;\r\n }\r\n \r\n \r\n {shortCode}`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `\r\n \r\n Order now\r\n \r\n \r\n Submit new flavour\r\n \r\n`,\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\r\n \r\n \r\n Order now\r\n \r\n \r\n Submit new flavour\r\n \r\n \r\n\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: `\r\n \r\n`,\r\n long: `ic-hero {\r\n height: fit-content;\r\n }\r\n \r\n \r\n {shortCode}`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `\r\n \r\n`,\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\r\n \r\n \r\n \r\n\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: `\r\n Explore\r\n Check out our new drinks\r\n \r\n\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 \r\n \r\n {shortCode}`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `\r\n Explore\r\n Check out our new drinks\r\n \r\n`,\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\r\n \r\n \r\n Explore\r\n \r\n \r\n Check out our new drinks\r\n \r\n \r\n \r\n\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: `\r\n Explore\r\n Check out our new drinks\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n`,\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\r\n\r\n {shortCode}`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `\r\n Explore\r\n Check out our new drinks\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n `,\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\r\n \r\n \r\n Explore\r\n \r\n \r\n Check out our new drinks\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\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\n \n \n Explore\n \n \n Check out our new drinks\n \n \n\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\n\n## Colour\n\nHero banners use an automatic secondary variant of an app's chosen theme colour.\n\n\n\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\n\nUse the alignment options to align the hero content to either full-width, left or centre of its container.\n\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\n \n \n\n\n\n \n \n\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\n\n\n\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\n\n\n\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\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\r\n \r\n \r\n Explore\r\n \r\n \r\n Check out our new drinks\r\n \r\n \r\n\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\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\r\n\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\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\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\r\n \r\n \r\n\r\n\r\n\r\n \r\n \r\n\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\r\n\r\n\r\n\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\r\n\r\n\r\n\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\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: `About our coffees`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `About our coffees`,\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\n e.preventDefault()}>\n About our coffees\n \n\n\n## Link details\n\n\n\n## Variants\n\n### With icon\n\nexport const snippetsIcon = [\n {\n technology: \"Web component\",\n snippets: {\n short: `About our coffees`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `About our coffees`,\n long: [\n {\n language: \"Typescript\",\n snippet: `{shortCode}`,\n },\n {\n language: \"Javascript\",\n snippet: `{shortCode}`,\n },\n ],\n },\n },\n];\n\n\n \n About our coffees\n \n\n\n### Appearance\n\nexport const snippetsLightDark = [\n {\n technology: \"Web component\",\n snippets: {\n short: `About our coffees\nAbout our coffees`,\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\n\n
\r\n \r\n \r\n This is the home page} />\r\n This page is about beverages} />\r\n \r\n \r\n`,\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\r\n \r\n \r\n \r\n \r\n Home\r\n \r\n \r\n \r\n \r\n Beverages\r\n \r\n \r\n \r\n \r\n\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\n \n Return to the{\" \"}\n \n café homepage\n \n \n\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\n\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\n \n \n\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\n \n \n\n\nUse the light or dark appearance links when listing a series of links on different coloured backgrounds.\n\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\n About our coffees\n\n\n\n Use concise but relevant links.\n\n\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\n info@icds.co.uk\n\n\n\n Show the full email address.\n\n\n\n ICDS team\n\n\n\n Don’t embed labels when linking email addresses.\n\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\r\n \r\n Return to the{\" \"}\r\n \r\n café homepage\r\n \r\n \r\n\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\r\n\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\r\n \r\n \r\n\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\r\n \r\n \r\n\r\n\r\nUse the light or dark appearance links when listing a series of links on different coloured backgrounds.\r\n\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\r\n About our coffees\r\n\r\n\r\n\r\n Use concise but relevant links.\r\n\r\n\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\r\n info@icds.co.uk\r\n\r\n\r\n\r\n Show the full email address.\r\n\r\n\r\n\r\n ICDS team\r\n\r\n\r\n\r\n Don’t embed labels when linking email addresses.\r\n\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: `\n`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\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\n \n \n\n\n## Loading indicator details\n\n\n\n## Variants\n\n### Sizes\n\nexport const snippetsSizes = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n\n\n`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\n\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\n \n \n \n \n\n\n### Icon\n\nexport const snippetsIcon = [\n {\n technology: \"Web component\",\n snippets: {\n short: ``,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: ``,\n long: [\n {\n language: \"Typescript\",\n snippet: `{shortCode}`,\n },\n {\n language: \"Javascript\",\n snippet: `{shortCode}`,\n },\n ],\n },\n },\n];\n\n\n \n\n\n### Determinate\n\nexport const snippetsDeterminate = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\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\n \n \n\n\n### Light\n\nexport const snippetsLight = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n `,\n long: `.dark-background {\n flex-direction: column; \n gap: var(--ic-space-xs); \n background: #333333;\n }\n \n \n
\r\n)`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n\r\n \r\n \r\n\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: ``,\r\n long: `{shortCode}`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: ``,\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\r\n \r\n\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\n \n\n\n\n Radial determinate.\n\n\n\n \n\n\n\n Radial indeterminate.\n\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\n \n\n\n\n Linear determinate.\n\n\n\n \n\n\n\n Linear indeterminate.\n\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\n \n \n\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\n \n \n\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\n \n \n\n\nIf loading indicators are overlaid on other content, place them in a dialog.\n\n\n\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\r\n \r\n\r\n\r\n\r\n Radial determinate.\r\n\r\n\r\n\r\n \r\n\r\n\r\n\r\n Radial indeterminate.\r\n\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\r\n \r\n\r\n\r\n\r\n Linear determinate.\r\n\r\n\r\n\r\n \r\n\r\n\r\n\r\n Linear indeterminate.\r\n\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\r\n \r\n \r\n\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\r\n \r\n \r\n\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\r\n \r\n \r\n\r\n\r\nIf loading indicators are overlaid on other content, place them in a dialog.\r\n\r\n\r\n\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: ``,\n long: `.parent-container {\n padding: var(--ic-space-md);\n }\n\n\n
`,\r\n long: `{shortCode}\r\n`,\r\n },\r\n },\r\n {\r\n technology: \"React\",\r\n snippets: {\r\n short: `\r\n \r\n \r\n \r\n\r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n`,\r\n long: [\r\n {\r\n language: \"Typescript\",\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 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 \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n );\r\n};\r\n\r\n\r\n \r\n\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 \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n );\n};\n\n\n \n\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\n \n\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\n \n\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\n \n\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\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\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\n \n\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\n \n\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\n \n\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\n \n\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\n \n\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 \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n );\n};\n\n\n \n\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\n \n\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\n \n\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\n \n\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\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\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\n \n\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\n \n\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\n \n\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\n \n\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\n \n\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: `\n \n \n \n \n \n`,\n long: `{shortCode} \n`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: ` console.log(ev.detail.value)}>\n \n \n \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\n console.log(ev.detail.value)}\n >\n \n \n \n \n \n\n\n## Radio group details\n\n\n\n## Radio option details\n\n\n\n## Variants\n\n### Conditional\n\nexport const conditional = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n \n \n \n \n \n`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\n \n \n \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\n \n \n \n \n \n \n\n\n### Conditional dynamic\n\nexport const conditionalDynamic = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n \n \n \n \n \n`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\n \n \n \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\n
\n)`,\n },\n ],\n },\n },\n];\n\n\n \n\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: ``,\n long: `.parent-container {\n padding: var(--ic-space-md);\n }\n\n\n
\r\n)`,\r\n },\r\n ],\r\n },\r\n },\r\n];\r\n\r\n\r\n \r\n\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: ``,\r\n long: `.parent-container {\r\n padding: var(--ic-space-md);\r\n }\r\n\r\n\r\n