From 8f2cc27e5e9d2890ee1c4b5c1d4119b082ec0946 Mon Sep 17 00:00:00 2001 From: GCHQ-Developer-112 <113986285+GCHQ-Developer-112@users.noreply.github.com> Date: Tue, 30 Apr 2024 15:32:23 +0100 Subject: [PATCH] feat(root): add Stackblitz functionality to component code examples update code examples to work with the new Stackblitz functionality, add toggle button to switch between TypeScript and JavaScript, add show more/less button to component code examples . #773 #774 #751 --- src/components/CodePreview/index.tsx | 93 +- .../structured/components/accordion/code.mdx | 2 +- .../structured/components/alerts/code.mdx | 2 +- .../components/back-to-top/code.mdx | 2 +- .../structured/components/badge/code.mdx | 2 +- .../components/breadcrumbs/code.mdx | 2 +- .../structured/components/buttons/code.mdx | 2 +- .../structured/components/cards/code.mdx | 2 +- .../structured/components/checkboxes/code.mdx | 2 +- .../structured/components/chips/code.mdx | 2 +- .../components/classification-banner/code.mdx | 2 +- .../components/data-entity/code.mdx | 2 +- .../structured/components/data-table/code.mdx | 1297 ++++------------- .../components/data-table/story-data.ts | 49 - .../structured/components/dialog/code.mdx | 2 +- .../components/empty-state/code.mdx | 2 +- .../structured/components/footer/code.mdx | 2 +- .../structured/components/hero/code.mdx | 2 +- .../structured/components/links/code.mdx | 2 +- .../components/loading-indicators/code.mdx | 2 +- .../components/page-header/code.mdx | 2 +- .../structured/components/pagination/code.mdx | 2 +- .../components/popover-menu/code.mdx | 2 +- .../structured/components/radio/code.mdx | 2 +- .../structured/components/search-bar/code.mdx | 2 +- .../components/section-container/code.mdx | 2 +- .../structured/components/select/code.mdx | 2 +- .../structured/components/side-nav/code.mdx | 2 +- .../structured/components/skeleton/code.mdx | 2 +- .../components/status-tags/code.mdx | 2 +- .../structured/components/stepper/code.mdx | 2 +- .../structured/components/switch/code.mdx | 2 +- .../structured/components/tabs/code.mdx | 2 +- .../structured/components/text-field/code.mdx | 2 +- .../structured/components/toasts/code.mdx | 2 +- .../components/toggle-buttons/code.mdx | 2 +- .../structured/components/tooltips/code.mdx | 2 +- .../structured/components/top-nav/code.mdx | 2 +- .../structured/components/typography/code.mdx | 2 +- .../StackblitzButton/stackblitz-helpers.ts | 65 +- src/icds-pages-data.json | 580 ++++---- 41 files changed, 697 insertions(+), 1459 deletions(-) diff --git a/src/components/CodePreview/index.tsx b/src/components/CodePreview/index.tsx index 61e404212..b36072ae6 100644 --- a/src/components/CodePreview/index.tsx +++ b/src/components/CodePreview/index.tsx @@ -245,47 +245,31 @@ const ComponentPreview: React.FC = ({ // need to account for if the code starts with styling as opposed to a tag - const addNewLines = ( - lineSeparatedCode: string[] | undefined, - reactWhitespace: string | undefined = "", - longCode: boolean = false + const formatLines = ( + lines: string[] | undefined, + snippet: Snippet, + longCodeIndex: number ) => { - const newLines = lineSeparatedCode ? [...lineSeparatedCode] : []; - const findScriptIndex = (lines: string[]) => - lines.findIndex((line) => line.trim().startsWith("`, + { + key: "lastName", + title: "Last name", + dataType: "string", + }, + { + key: "age", + title: "Age", + dataType: "number", + }, + ]; + const data = [ + { + firstName: { + data: "Joe", + cellAlignment: { horizontal: "center", vertical: "middle" }, + emphasis: "high", + }, + lastName: "Bloggs", + age: 30, + }, + { + firstName: "Sarah", + lastName: "Smith", + age: 28, + }, + { + firstName: "Mark", + lastName: "Owens", + age: 45, + }, + ]; + dataTable.columns = columns; + dataTable.data = data; + `, }, }, { technology: "React", snippets: { short: ``, + caption="Cell overrides" + columns={columns} + data={data} + />`, long: [ { language: "Typescript", @@ -2444,47 +2364,19 @@ return ( }, { language: "Javascript", - snippet: `const columns = [ - { - key: "firstName", - title: "First name", - // dataType types: "string" | "number" | "address" | "element" | "date"; - dataType: "string", - }, - { - key: "lastName", - title: "Last name", - dataType: "string", - }, - { - key: "age", - title: "Age", - dataType: "number", - }, -]; -const data = [ - { - firstName: { - data: "Joe", - cellAlignment: { horizontal: "center", vertical: "middle" }, - emphasis: "high", - }, - lastName: "Bloggs", - age: 30, - }, - { - firstName: "Sarah", - lastName: "Smith", - age: 28, - }, - { - firstName: "Mark", - lastName: "Owens", - age: 45, - }, + snippet: `const data = [ +{ +firstName: { +data: "Joe", +cellAlignment: { horizontal: "center", vertical: "middle" }, +emphasis: "high", +}, +lastName: "Bloggs", +age: 30, +}, ]; return ( - {shortCode} +{shortCode} )`, }, ], @@ -2508,28 +2400,28 @@ export const snippetsDefaultEmptyState = [ snippets: { short: ``, long: `{shortCode} -`, + `, }, }, { @@ -2610,28 +2502,28 @@ export const snippetsSlottedEmptyState = [ `, long: `{shortCode} -`, + `, }, }, { @@ -2720,58 +2612,58 @@ export const snippetsLoadingState = [ snippets: { short: ``, long: `{shortCode} -`, + `, }, }, { technology: "React", snippets: { short: ``, + caption="Loading state" + columns={columns} + data={data} + loading={true} + />`, long: [ { language: "Typescript", @@ -2872,46 +2764,46 @@ export const snippetsUpdatingState = [ snippets: { short: ``, long: `{shortCode} -`, + `, }, }, { @@ -2921,7 +2813,7 @@ export const snippetsUpdatingState = [ caption="Updating state" columns={columns} data={data} - updating + updating={true} updatingOptions={{ progress: 30 }} />`, long: [ @@ -3030,78 +2922,78 @@ export const snippetsElements = [ snippets: { short: ``, long: `{shortCode} -`, + { + key: "lastName", + title: "Last name", + dataType: "string", + }, + { + key: "age", + title: "Age", + dataType: "number", + }, + { + key: "actions", + title: "Actions", + dataType: "element", + columnAlignment: { horizontal: "center" }, + }, + ]; + const data = [ + { + firstName: { + data: "Joe", + href: "#", + }, + lastName: "Bloggs", + age: 30, + actions: \`Delete\`, + }, + { + firstName: 'Sarah', + lastName: 'Smith', + age: 28, + actions: \`Delete\`, + }, + { + firstName: 'Mark', + lastName: 'Owens', + age: 45, + actions: \`Delete\`, + }, + ]; + dataTable.columns = columns; + dataTable.data = data; + `, }, }, { technology: "React", snippets: { short: ` - {data.map((_, index) => ( - _.closest('Delete')} + caption="Links and Elements in data" + columns={columns} + data={data} > - Delete - - ))} -`, + {data.map((_, index) => ( + _.closest('Delete')} + > + Delete + + ))} + `, long: [ { language: "Typescript", @@ -3231,608 +3123,3 @@ return ( ))} - -### Custom icons - -export const snippetsCustomIcons = [ - { - technology: "Web component", - snippets: { - short: ` - - - -`, - long: `{shortCode} -`, - }, - }, - { - technology: "React", - snippets: { - short: ` - -`, - long: [ - { - language: "Typescript", - snippet: `const accountSVG = \`\`; -const columns: IcDataTableColumnObject[] = [ - { - key: "firstName", - title: "First name", - dataType: "string", - cellAlignment: "right", - columnAlignment: { horizontal: "right", vertical: "middle" }, - icon: { - icon: \`\`, - onAllCells: true, - hideOnHeader: true, - }, - }, - { - key: "lastName", - title: "Last name", - dataType: "string", - cellAlignment: "center", - columnAlignment: { horizontal: "center", vertical: "bottom" }, - }, - { - key: "age", - title: "Age", - dataType: "number", - }, -]; -const data = [ - { - firstName: { - data: "Joe", - icon: accountSVG, - }, - lastName: "Bloggs", - age: 30, - }, - { - firstName: "Sarah", - lastName: "Smith", - age: 28, - }, - { - firstName: { - data: "Mark", - icon: accountSVG, - }, - lastName: "Owens", - age: 45, - }, -]; -return ( - {shortCode} -)`, - }, - { - language: "Javascript", - snippet: `const accountSVG = \`\`; -const columns = [ - { - key: "firstName", - title: "First name", - dataType: "string", - cellAlignment: "right", - columnAlignment: { horizontal: "right", vertical: "middle" }, - icon: { - icon: \`\`, - onAllCells: true, - hideOnHeader: true, - }, - }, - { - key: "lastName", - title: "Last name", - dataType: "string", - cellAlignment: "center", - columnAlignment: { horizontal: "center", vertical: "bottom" }, - }, - { - key: "age", - title: "Age", - dataType: "number", - }, -]; -const data = [ - { - firstName: { - data: "Joe", - icon: accountSVG, - }, - lastName: "Bloggs", - age: 30, - }, - { - firstName: "Sarah", - lastName: "Smith", - age: 28, - }, - { - firstName: { - data: "Mark", - icon: accountSVG, - }, - lastName: "Owens", - age: 45, - }, -]; -return ( - {shortCode} -)`, - }, - ], - }, - }, -]; - - - - - - - -### Custom row heights - -export const snippetsRowHeights = [ - { - technology: "Web component", - snippets: { - short: ``, - long: `{shortCode} -`, - }, - }, - { - technology: "React", - snippets: { - short: ``, - long: [ - { - language: "Typescript", - snippet: `const columns: IcDataTableColumnObject[] = [ - { - key: "firstName", - title: "First name", - dataType: "string", - }, - { - key: "lastName", - title: "Last name", - dataType: "string", - }, - { - key: "age", - title: "Age", - dataType: "number", - }, -]; -const data = [ - { - firstName: "Joe", - lastName: "Bloggs", - age: 30, - }, - { - firstName: "Sarah", - lastName: "Smith", - age: 28, - }, - { - firstName: "Mark", - lastName: "Owens", - age: 45, - }, -]; -const rowHeightFunc = ({ firstName, lastName }) => firstName === "Joe" || lastName === "Owens" ? 200 : null; -return ( - {shortCode} -)`, - }, - { - language: "Javascript", - snippet: `const columns = [ - { - key: "firstName", - title: "First name", - dataType: "string", - }, - { - key: "lastName", - title: "Last name", - dataType: "string", - }, - { - key: "age", - title: "Age", - dataType: "number", - }, -]; -const data = [ - { - firstName: "Joe", - lastName: "Bloggs", - age: 30, - }, - { - firstName: "Sarah", - lastName: "Smith", - age: 28, - }, - { - firstName: "Mark", - lastName: "Owens", - age: 45, - }, -]; -const rowHeightFunc = ({ firstName, lastName }) => firstName === "Joe" || lastName === "Owens" ? 200 : null; -return ( - {shortCode} -)`, - }, - ], - }, - }, -]; - -export const rowHeightFunc = ({ firstName, lastName }) => - firstName === "Joe" || lastName === "Owens" ? 200 : null; - - - - - -### Custom title bar - -export const snippetsTitleBar = [ - { - technology: "Web component", - snippets: { - short: ` - - Primary - - - - - - - - - - - - - - - - -

- This is some text and{' '} - this is an inline link within the text. -

- - -`, - long: `{shortCode} -`, - }, - }, - { - technology: "React", - snippets: { - short: ` - - Primary - - - - - - - - - - -

- This is some text and{' '} - this is an inline link within the text. -

- - -`, - long: [ - { - language: "Typescript", - snippet: `const columns: IcDataTableColumnObject[] = [ - { - key: "firstName", - title: "First name", - dataType: "string", - }, - { - key: "lastName", - title: "Last name", - dataType: "string", - }, - { - key: "age", - title: "Age", - dataType: "number", - }, -]; -const data = [ - { - firstName: "Joe", - lastName: "Bloggs", - age: 30, - }, - { - firstName: "Sarah", - lastName: "Smith", - age: 28, - }, - { - firstName: "Mark", - lastName: "Owens", - age: 45, - }, -]; -return ( - {shortCode} -)`, - }, - { - language: "Javascript", - snippet: `const columns = [ - { - key: "firstName", - title: "First name", - dataType: "string", - }, - { - key: "lastName", - title: "Last name", - dataType: "string", - }, - { - key: "age", - title: "Age", - dataType: "number", - }, -]; -const data = [ - { - firstName: "Joe", - lastName: "Bloggs", - age: 30, - }, - { - firstName: "Sarah", - lastName: "Smith", - age: 28, - }, - { - firstName: "Mark", - lastName: "Owens", - age: 45, - }, -]; -return ( - {shortCode} -)`, - }, - ], - }, - }, -]; - - - - - Primary - - - - - - - - - - -

- This is some text and this is an inline link{" "} - within the text. -

- - - - diff --git a/src/content/structured/components/data-table/story-data.ts b/src/content/structured/components/data-table/story-data.ts index ed5dd638b..856c354f2 100644 --- a/src/content/structured/components/data-table/story-data.ts +++ b/src/content/structured/components/data-table/story-data.ts @@ -349,52 +349,3 @@ export const DATA_REACT_ELEMENTS = [ address: "5 New Street, Town, Country, Postcode", }, ]; -export const ICON_DATA = [ - { - firstName: { - data: "Joe", - icon: accountSVG, - }, - lastName: "Bloggs", - age: 30, - }, - { - firstName: "Sarah", - lastName: "Smith", - age: 28, - }, - { - firstName: { - data: "Mark", - icon: accountSVG, - }, - lastName: "Owens", - age: 45, - }, -]; -export const ICON_COLUMNS = [ - { - key: "firstName", - title: "First name", - dataType: "string", - cellAlignment: "right", - columnAlignment: { horizontal: "right", vertical: "middle" }, - icon: { - icon: `account-outline`, - onAllCells: true, - hideOnHeader: true, - }, - }, - { - key: "lastName", - title: "Last name", - dataType: "string", - cellAlignment: "center", - columnAlignment: { horizontal: "center", vertical: "bottom" }, - }, - { - key: "age", - title: "Age", - dataType: "number", - }, -]; diff --git a/src/content/structured/components/dialog/code.mdx b/src/content/structured/components/dialog/code.mdx index 8b818dd4e..5b381f4b2 100644 --- a/src/content/structured/components/dialog/code.mdx +++ b/src/content/structured/components/dialog/code.mdx @@ -1,7 +1,7 @@ --- path: "/components/dialog/code" -date: "2024-05-31" +date: "2024-05-02" title: "Dialog" diff --git a/src/content/structured/components/empty-state/code.mdx b/src/content/structured/components/empty-state/code.mdx index 7e7dcbfa0..aa49dc1c6 100644 --- a/src/content/structured/components/empty-state/code.mdx +++ b/src/content/structured/components/empty-state/code.mdx @@ -1,7 +1,7 @@ --- path: "/components/empty-state/code" -date: "2024-05-31" +date: "2024-05-02" title: "Empty state" diff --git a/src/content/structured/components/footer/code.mdx b/src/content/structured/components/footer/code.mdx index 3f49176af..349811a5b 100644 --- a/src/content/structured/components/footer/code.mdx +++ b/src/content/structured/components/footer/code.mdx @@ -1,7 +1,7 @@ --- path: "/components/footer/code" -date: "2024-05-31" +date: "2024-05-02" title: "Footer" diff --git a/src/content/structured/components/hero/code.mdx b/src/content/structured/components/hero/code.mdx index e47a37605..469556118 100644 --- a/src/content/structured/components/hero/code.mdx +++ b/src/content/structured/components/hero/code.mdx @@ -1,7 +1,7 @@ --- path: "/components/hero/code" -date: "2024-05-31" +date: "2024-05-02" title: "Hero" diff --git a/src/content/structured/components/links/code.mdx b/src/content/structured/components/links/code.mdx index 472e50601..dfba12c56 100644 --- a/src/content/structured/components/links/code.mdx +++ b/src/content/structured/components/links/code.mdx @@ -1,7 +1,7 @@ --- path: "/components/link/code" -date: "2024-05-31" +date: "2024-05-02" title: "Link" diff --git a/src/content/structured/components/loading-indicators/code.mdx b/src/content/structured/components/loading-indicators/code.mdx index 31b0fd839..09de0367e 100644 --- a/src/content/structured/components/loading-indicators/code.mdx +++ b/src/content/structured/components/loading-indicators/code.mdx @@ -1,7 +1,7 @@ --- path: "/components/loading-indicator/code" -date: "2024-05-31" +date: "2024-05-02" title: "Loading indicator" diff --git a/src/content/structured/components/page-header/code.mdx b/src/content/structured/components/page-header/code.mdx index 3cecb282d..76111afac 100644 --- a/src/content/structured/components/page-header/code.mdx +++ b/src/content/structured/components/page-header/code.mdx @@ -1,7 +1,7 @@ --- path: "/components/page-header/code" -date: "2024-05-31" +date: "2024-05-02" title: "Page header" diff --git a/src/content/structured/components/pagination/code.mdx b/src/content/structured/components/pagination/code.mdx index 730804702..46ff2a308 100644 --- a/src/content/structured/components/pagination/code.mdx +++ b/src/content/structured/components/pagination/code.mdx @@ -1,7 +1,7 @@ --- path: "/components/pagination/code" -date: "2024-05-31" +date: "2024-05-02" title: "Pagination" diff --git a/src/content/structured/components/popover-menu/code.mdx b/src/content/structured/components/popover-menu/code.mdx index 8d89efbe2..e4743cb26 100644 --- a/src/content/structured/components/popover-menu/code.mdx +++ b/src/content/structured/components/popover-menu/code.mdx @@ -1,7 +1,7 @@ --- path: "/components/popover-menu/code" -date: "2024-05-31" +date: "2024-05-02" title: "Popover menu" diff --git a/src/content/structured/components/radio/code.mdx b/src/content/structured/components/radio/code.mdx index 5de60ca5b..01b10f9c3 100644 --- a/src/content/structured/components/radio/code.mdx +++ b/src/content/structured/components/radio/code.mdx @@ -1,7 +1,7 @@ --- path: "/components/radio/code" -date: "2024-05-31" +date: "2024-05-02" title: "Radio button" diff --git a/src/content/structured/components/search-bar/code.mdx b/src/content/structured/components/search-bar/code.mdx index c1dfc9ee7..c3963cfda 100644 --- a/src/content/structured/components/search-bar/code.mdx +++ b/src/content/structured/components/search-bar/code.mdx @@ -1,7 +1,7 @@ --- path: "/components/search-bar/code" -date: "2024-05-31" +date: "2024-05-02" title: "Search bar" diff --git a/src/content/structured/components/section-container/code.mdx b/src/content/structured/components/section-container/code.mdx index 92f33bea1..1308c6f70 100644 --- a/src/content/structured/components/section-container/code.mdx +++ b/src/content/structured/components/section-container/code.mdx @@ -1,7 +1,7 @@ --- path: "/components/section-container/code" -date: "2024-05-31" +date: "2024-05-02" title: "Section container" diff --git a/src/content/structured/components/select/code.mdx b/src/content/structured/components/select/code.mdx index c08df7cf8..c24d36b20 100644 --- a/src/content/structured/components/select/code.mdx +++ b/src/content/structured/components/select/code.mdx @@ -1,7 +1,7 @@ --- path: "/components/select/code" -date: "2024-05-31" +date: "2024-05-02" title: "Select" diff --git a/src/content/structured/components/side-nav/code.mdx b/src/content/structured/components/side-nav/code.mdx index 4f2f8ab07..f89a000d6 100644 --- a/src/content/structured/components/side-nav/code.mdx +++ b/src/content/structured/components/side-nav/code.mdx @@ -1,7 +1,7 @@ --- path: "/components/side-navigation/code" -date: "2024-05-31" +date: "2024-05-02" title: "Side navigation" diff --git a/src/content/structured/components/skeleton/code.mdx b/src/content/structured/components/skeleton/code.mdx index 4b131458d..504d87a1e 100644 --- a/src/content/structured/components/skeleton/code.mdx +++ b/src/content/structured/components/skeleton/code.mdx @@ -1,7 +1,7 @@ --- path: "/components/skeleton/code" -date: "2024-05-31" +date: "2024-05-02" title: "Skeleton" diff --git a/src/content/structured/components/status-tags/code.mdx b/src/content/structured/components/status-tags/code.mdx index ec594baf3..adc310c1b 100644 --- a/src/content/structured/components/status-tags/code.mdx +++ b/src/content/structured/components/status-tags/code.mdx @@ -1,7 +1,7 @@ --- path: "/components/status-tag/code" -date: "2024-05-31" +date: "2024-05-02" title: "Status tag" diff --git a/src/content/structured/components/stepper/code.mdx b/src/content/structured/components/stepper/code.mdx index 843e228e2..1cd80e147 100644 --- a/src/content/structured/components/stepper/code.mdx +++ b/src/content/structured/components/stepper/code.mdx @@ -1,7 +1,7 @@ --- path: "/components/stepper/code" -date: "2024-05-31" +date: "2024-05-02" title: "Stepper" diff --git a/src/content/structured/components/switch/code.mdx b/src/content/structured/components/switch/code.mdx index fb9e32ba1..259f1a1c2 100644 --- a/src/content/structured/components/switch/code.mdx +++ b/src/content/structured/components/switch/code.mdx @@ -1,7 +1,7 @@ --- path: "/components/switch/code" -date: "2024-05-31" +date: "2024-05-02" title: "Switch" diff --git a/src/content/structured/components/tabs/code.mdx b/src/content/structured/components/tabs/code.mdx index 8544d3515..5ecab1d3b 100644 --- a/src/content/structured/components/tabs/code.mdx +++ b/src/content/structured/components/tabs/code.mdx @@ -1,7 +1,7 @@ --- path: "/components/tabs/code" -date: "2024-05-31" +date: "2024-05-02" title: "Tabs" diff --git a/src/content/structured/components/text-field/code.mdx b/src/content/structured/components/text-field/code.mdx index b6ba741d1..c1fc39cf0 100644 --- a/src/content/structured/components/text-field/code.mdx +++ b/src/content/structured/components/text-field/code.mdx @@ -1,7 +1,7 @@ --- path: "/components/text-field/code" -date: "2024-05-31" +date: "2024-05-02" title: "Text field" diff --git a/src/content/structured/components/toasts/code.mdx b/src/content/structured/components/toasts/code.mdx index 26d18d8bb..e1dac5b16 100644 --- a/src/content/structured/components/toasts/code.mdx +++ b/src/content/structured/components/toasts/code.mdx @@ -1,7 +1,7 @@ --- path: "/components/toast/code" -date: "2024-05-31" +date: "2024-05-02" title: "Toast" diff --git a/src/content/structured/components/toggle-buttons/code.mdx b/src/content/structured/components/toggle-buttons/code.mdx index 30bf169f5..ac6c9d172 100644 --- a/src/content/structured/components/toggle-buttons/code.mdx +++ b/src/content/structured/components/toggle-buttons/code.mdx @@ -1,7 +1,7 @@ --- path: "/components/toggle-button/code" -date: "2024-05-31" +date: "2024-05-02" title: "Toggle button" diff --git a/src/content/structured/components/tooltips/code.mdx b/src/content/structured/components/tooltips/code.mdx index 03f5b2e5c..7ae0a0575 100644 --- a/src/content/structured/components/tooltips/code.mdx +++ b/src/content/structured/components/tooltips/code.mdx @@ -1,7 +1,7 @@ --- path: "/components/tooltip/code" -date: "2024-05-31" +date: "2024-05-02" title: "Tooltip" diff --git a/src/content/structured/components/top-nav/code.mdx b/src/content/structured/components/top-nav/code.mdx index cbc51ed6c..1e433b6f4 100644 --- a/src/content/structured/components/top-nav/code.mdx +++ b/src/content/structured/components/top-nav/code.mdx @@ -1,7 +1,7 @@ --- path: "/components/top-navigation/code" -date: "2024-05-31" +date: "2024-05-02" title: "Top navigation" diff --git a/src/content/structured/components/typography/code.mdx b/src/content/structured/components/typography/code.mdx index aff52dcc3..1347e40b9 100644 --- a/src/content/structured/components/typography/code.mdx +++ b/src/content/structured/components/typography/code.mdx @@ -1,7 +1,7 @@ --- path: "/components/typography/code" -date: "2024-05-31" +date: "2024-05-02" title: "Typography" diff --git a/src/content/structured/patterns/components/StackblitzButton/stackblitz-helpers.ts b/src/content/structured/patterns/components/StackblitzButton/stackblitz-helpers.ts index 619ce95fe..092cd4c41 100644 --- a/src/content/structured/patterns/components/StackblitzButton/stackblitz-helpers.ts +++ b/src/content/structured/patterns/components/StackblitzButton/stackblitz-helpers.ts @@ -367,16 +367,6 @@ export const createReactAppTsx = ( let getIcTypes: string[] = []; const allIcMatches = getImports(undefined, false, true); const allIcComponents = getImports("Ic"); - - // Check if codeSnippet contains any Canary-specific types - const getCanaryTypes = (code: string | undefined = codeSnippet) => { - if (code) { - const types = canaryTypes.filter((type) => code.includes(type)); - return types.sort(); - } - return []; - }; - getIcTypes = sortAndRemoveDuplicates( allIcMatches .filter((item: string) => !allIcComponents.includes(item)) @@ -420,6 +410,26 @@ export const createReactAppTsx = ( const reactRouterImports = getReactRouterImports(codeSnippet); + // Check if codeSnippet contains any Canary-specific types + const getCanaryTypes = (code: string | undefined = codeSnippet) => { + if (code) { + const types = canaryTypes.filter((type) => code.includes(type)); + return types.sort(); + } + return []; + }; + + // Check if codeSnippet contains any React Router imports + const getReactRouterImports = (code: string) => { + const imports = ["MemoryRouter", "Route", "Routes", "NavLink"]; + const foundImports = imports.filter((importName) => + code.includes(importName) + ); + return foundImports; + }; + + const reactRouterImports = getReactRouterImports(codeSnippet); + // Check if codeSnippet contains any React hooks const getReactHooks = (code: string) => { const hooks = ["useState", "useRef", "useEffect"]; @@ -451,6 +461,23 @@ export const createReactAppTsx = ( // Conditionally render "return(" in the returned output string const returnStatement = containsReturn ? "" : "return ("; + const formatImports = (array: string[]) => { + if (array.length > 3) { + return `\n ${array.join(",\n ")}\n`; + } + if (array.length === 0) { + return ""; + } + return `${array.join(", ")} `; + }; + const importedICDSComponents = formatImports(sortedICDSComponents); + const importedCanaryComponents = formatImports( + getCanaryReactImports(codeSnippet).length > 0 + ? getCanaryReactImports(codeSnippet).sort() + : [] + ); + const importedIcTypes = formatImports(getIcTypes); + return `${reactImportStatement}${ reactRouterImports.length > 0 ? `\nimport { ${reactRouterImports.join(", ")} } from 'react-router-dom';` @@ -464,14 +491,15 @@ export const createReactAppTsx = ( ? `\nimport { ${importedCanaryComponents}} from '@ukic/canary-react';` : "" }${ - importedCanaryTypes.length > 0 - ? `\nimport type { ${importedCanaryTypes}} from '@ukic/canary-web-components';` + getCanaryTypes().length > 0 + ? `\nimport { ${getCanaryTypes()}} from '@ukic/canary-web-components';` : "" - }${ - fileExtension === "tsx" && importedIcTypes.length > 0 - ? `import type { ${importedIcTypes}} from '@ukic/web-components';` - : "" - }${ + } +${ + fileExtension === "tsx" && importedIcTypes.length > 0 + ? `import type { ${importedIcTypes}} from '@ukic/web-components';` + : "" +} ${ sortedMDIcons.length > 0 ? `\nimport { ${ sortedMDIcons.length > 3 @@ -479,8 +507,7 @@ export const createReactAppTsx = ( : `${sortedMDIcons.join(", ")} ` }} from '@mdi/js';` : "" - } - ${ + }${ containsCreateUseStyles ? `\nimport { createUseStyles } from 'react-jss'; ` diff --git a/src/icds-pages-data.json b/src/icds-pages-data.json index aa3ced4a2..57ade0e4f 100644 --- a/src/icds-pages-data.json +++ b/src/icds-pages-data.json @@ -673,8 +673,8 @@ "contribute": "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/community/index.mdx", "meta": { "relativePath": "community/index.mdx", - "createdAt": "2024-05-30T12:04:49.420Z", - "lastModified": "2024-05-30T12:04:49.420Z", + "createdAt": "2024-05-13T07:27:37.278Z", + "lastModified": "2024-05-13T07:27:37.278Z", "size": 904, "formattedSize": "904 Bytes" } @@ -690,8 +690,8 @@ "contribute": "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/community/roadmap.mdx", "meta": { "relativePath": "community/roadmap.mdx", - "createdAt": "2024-05-30T12:04:49.420Z", - "lastModified": "2024-05-30T12:04:49.420Z", + "createdAt": "2024-05-13T07:27:37.278Z", + "lastModified": "2024-05-13T07:27:37.278Z", "size": 1951, "formattedSize": "1.9 KB" } @@ -729,9 +729,9 @@ }, { "id": "components__accordion__codex", - "contents": "\nimport {\n IcAccordion,\n IcAccordionGroup,\n IcTypography,\n SlottedSVG,\n} from \"@ukic/react\";\n\n## Component demo\n\nexport const snippets = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n \n A blend of different black teas.\n \n\n\n \n A tea blend that has been flavoured with oil of bergamot.\n \n`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\n \n A blend of different black teas.\n \n\n\n \n A tea blend that has been flavoured with oil of bergamot.\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 A blend of different black teas.\n \n \n \n A tea blend that has been flavoured with oil of bergamot.\n \n \n\n\n## Accordion details\n\n\n\n## Accordion group details\n\n\n\n## Variants\n\n### With icon\n\nexport const withIcon = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n \n \n \n \n A blend of different black teas.\n \n \n \n \n \n \n \n A tea blend that has been flavoured with oil of bergamot.\n \n`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\n \n \n \n \n A blend of different black teas.\n \n \n \n \n \n \n \n A tea blend that has been flavoured with oil of bergamot.\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 A blend of different black teas.\n \n \n \n \n \n \n A tea blend that has been flavoured with oil of bergamot.\n \n \n\n\n### With group title and see all / hide all button\n\n\n \n \n \n An espresso-based drink that is traditionally prepared with steamed milk\n foam.\n \n \n \n \n An espresso-based drink that is diluted with hot water.\n \n \n \n\n\nexport const groupTitle = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n \n \n An espresso-based drink that is traditionally prepared with steamed milk foam.\n \n \n \n \n An espresso-based drink that is diluted with hot water.\n \n \n`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\n \n \n An espresso-based drink that is traditionally prepared with steamed milk foam.\n \n \n \n \n An espresso-based drink that is diluted with hot water.\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### With nested accordions\n\nexport const snippetsNested = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n \n \n An espresso-based drink that is traditionally prepared with steamed milk foam.\n \n \n \n \n \n An espresso-based drink that is diluted with hot water.\n \n \n \n \n A milkier coffee than a cappuccino.\n \n \n \n`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\n \n \n An espresso-based drink that is traditionally prepared with steamed milk foam.\n \n \n \n \n \n An espresso-based drink that is diluted with hot water.\n \n \n \n \n A milkier coffee than a cappuccino.\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 An espresso-based drink that is traditionally prepared with steamed milk\n foam.\n \n \n \n \n \n An espresso-based drink that is diluted with hot water.\n \n \n \n \n A milkier coffee than a cappuccino.\n \n \n \n \n\n", + "contents": "\nimport {\n IcAccordion,\n IcAccordionGroup,\n IcTypography,\n SlottedSVG,\n} from \"@ukic/react\";\n\n## Component demo\n\nexport const snippets = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n \n A blend of different black teas.\n \n\n\n \n A tea blend that has been flavoured with oil of bergamot.\n \n`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\n \n A blend of different black teas.\n \n\n\n \n A tea blend that has been flavoured with oil of bergamot.\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 A blend of different black teas.\n \n \n \n A tea blend that has been flavoured with oil of bergamot.\n \n \n\n\n## Accordion details\n\n\n\n## Accordion group details\n\n\n\n## Variants\n\n### With icon\n\nexport const withIcon = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n \n \n \n \n A blend of different black teas.\n \n \n \n \n \n \n \n A tea blend that has been flavoured with oil of bergamot.\n \n`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\n \n \n \n \n A blend of different black teas.\n \n \n \n \n \n \n \n A tea blend that has been flavoured with oil of bergamot.\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 A blend of different black teas.\n \n \n \n \n \n \n A tea blend that has been flavoured with oil of bergamot.\n \n \n\n\n### With group title and see all / hide all button\n\n\n \n \n \n An espresso-based drink that is traditionally prepared with steamed milk\n foam.\n \n \n \n \n An espresso-based drink that is diluted with hot water.\n \n \n \n\n\nexport const groupTitle = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n \n \n An espresso-based drink that is traditionally prepared with steamed milk foam.\n \n \n \n \n An espresso-based drink that is diluted with hot water.\n \n \n`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\n \n \n An espresso-based drink that is traditionally prepared with steamed milk foam.\n \n \n \n \n An espresso-based drink that is diluted with hot water.\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### With nested accordions\n\nexport const snippetsNested = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n \n \n An espresso-based drink that is traditionally prepared with steamed milk foam.\n \n \n \n \n \n An espresso-based drink that is diluted with hot water.\n \n \n \n \n A milkier coffee than a cappuccino.\n \n \n \n`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\n \n \n An espresso-based drink that is traditionally prepared with steamed milk foam.\n \n \n \n \n \n An espresso-based drink that is diluted with hot water.\n \n \n \n \n A milkier coffee than a cappuccino.\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 An espresso-based drink that is traditionally prepared with steamed milk\n foam.\n \n \n \n \n \n An espresso-based drink that is diluted with hot water.\n \n \n \n \n A milkier coffee than a cappuccino.\n \n \n \n \n\n", "path": "/components/accordion/code", - "date": "2024-05-31", + "date": "2024-05-02", "title": "Accordion", "status": "BETA", "subTitle": "Accordions are expandable and collapsible sections which are used to show and hide additional content.", @@ -752,10 +752,10 @@ ], "meta": { "relativePath": "components/accordion/code.mdx", - "createdAt": "2024-05-31T10:44:10.885Z", - "lastModified": "2024-05-31T10:44:10.885Z", - "size": 10291, - "formattedSize": "10.0 KB" + "createdAt": "2024-05-21T09:12:11.351Z", + "lastModified": "2024-05-21T09:12:11.351Z", + "size": 10355, + "formattedSize": "10.1 KB" } }, { @@ -784,8 +784,8 @@ ], "meta": { "relativePath": "components/accordion/guidance.mdx", - "createdAt": "2024-05-30T12:04:49.420Z", - "lastModified": "2024-05-30T12:04:49.420Z", + "createdAt": "2024-05-13T07:27:37.281Z", + "lastModified": "2024-05-13T07:27:37.281Z", "size": 9879, "formattedSize": "9.6 KB" } @@ -823,9 +823,9 @@ }, { "id": "components__alerts__codex", - "contents": "\n## Component demo\n\nimport { IcAlert, IcButton, IcLink } from \"@ukic/react\";\n\nexport const snippetsDefault = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n\n\n\n`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\n\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\n## Alert details\n\n\n\n## Variants\n\n### Dismissible\n\nexport const snippetsDismissible = [\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### With action\n\nexport const snippetsWithAction = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n View Drinks`,\n long: `{shortCode}\n`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\n console.log(ev)}\n >\n View 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 console.log(ev)}\n >\n View Drinks\n \n \n\n\n### Title above\n\nexport const snippetsTitleAbove = [\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### Responsive title\n\nexport const snippetsResponsiveTitle = [\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### Custom message\n\nexport const snippetsCustomMessage = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n Go to our coffee page to learn more.`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\n Go to our coffee page to learn more.\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 Got to our{\" \"}\n e.preventDefault()}>\n coffee page\n {\" \"}\n to learn more.\n \n \n\n", + "contents": "\n## Component demo\n\nimport { IcAlert, IcButton, IcLink } from \"@ukic/react\";\n\nexport const snippetsDefault = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n\n\n\n`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\n\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\n## Alert details\n\n\n\n## Variants\n\n### Dismissible\n\nexport const snippetsDismissible = [\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### With action\n\nexport const snippetsWithAction = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n View Drinks\n`,\n long: `{shortCode}\n`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\n console.log(ev)}\n >\n View 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 console.log(ev)}\n >\n View Drinks\n \n \n\n\n### Title above\n\nexport const snippetsTitleAbove = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n`,\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### Responsive title\n\nexport const snippetsResponsiveTitle = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n`,\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### Custom message\n\nexport const snippetsCustomMessage = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n Go to our coffee page to learn more.\n`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\n Go to our coffee page to learn more.\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 Got to our{\" \"}\n e.preventDefault()}>\n coffee page\n {\" \"}\n to learn more.\n \n \n\n", "path": "/components/alert/code", - "date": "2024-05-31", + "date": "2024-05-02", "title": "Alert", "status": "BETA", "subTitle": "Alerts display a short important message in a way that attracts attention without interrupting the current task.", @@ -846,9 +846,9 @@ ], "meta": { "relativePath": "components/alerts/code.mdx", - "createdAt": "2024-05-31T10:44:10.965Z", - "lastModified": "2024-05-31T10:44:10.965Z", - "size": 9736, + "createdAt": "2024-05-21T09:12:11.351Z", + "lastModified": "2024-05-21T09:12:11.351Z", + "size": 9776, "formattedSize": "9.5 KB" } }, @@ -917,9 +917,9 @@ }, { "id": "components__back-to-top__codex", - "contents": "\nimport { IcButton } from \"@ukic/react\";\n\nexport const snippets = [\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## Component demo\n\nA StackBlitz example of how the back to top component works in the context of other components can be seen in the [Top Navigation with Back to Top layout example](/patterns/navigation-patterns/top-navigation-layout#back-to-top).\n\n\n {\n window.scrollTo(0, document.body.scrollHeight);\n }}\n >\n Show Back to top\n \n\n\n## Back to top details\n\n\n", + "contents": "\nimport { IcButton } from \"@ukic/react\";\n\nexport const snippets = [\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## Component demo\n\n\n {\n window.scrollTo(0, document.body.scrollHeight);\n }}\n >\n Show Back to top\n \n\n\n## Back to top details\n\n\n", "path": "/components/back-to-top/code", - "date": "2024-05-31", + "date": "2024-05-02", "title": "Back to top", "status": "BETA", "subTitle": "The back to top component helps people quickly return to the top of a long page.", @@ -940,10 +940,10 @@ ], "meta": { "relativePath": "components/back-to-top/code.mdx", - "createdAt": "2024-05-31T10:44:10.877Z", - "lastModified": "2024-05-31T10:44:10.877Z", - "size": 1619, - "formattedSize": "1.6 KB" + "createdAt": "2024-05-21T09:12:11.351Z", + "lastModified": "2024-05-21T09:12:11.351Z", + "size": 1348, + "formattedSize": "1.3 KB" } }, { @@ -1011,9 +1011,9 @@ }, { "id": "components__badge__codex", - "contents": "\nimport {\n IcButton,\n IcBadge,\n SlottedSVG,\n IcChip,\n IcTab,\n IcTabPanel,\n IcTabContext,\n IcTabGroup,\n} from \"@ukic/react\";\nimport { useState } from \"react\";\n\n## Component demo\n\nexport const snippetsDefault = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n \n Coffee orders\n`,\n long: `.parent-container {\n padding: 16px;\n }\n\n\n
\n {shortCode}\n
`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\n \n Coffee orders\n`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n padding: \"16px\",\n },\n});\nconst classes = useStyles();\nreturn (\n
\n {shortCode}\n
\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n padding: \"16px\",\n },\n});\nconst classes = useStyles();\nreturn (\n
\n {shortCode}\n
\n)`,\n },\n ],\n },\n },\n];\n\n\n \n \n Coffee orders\n \n\n\n## Badge details\n\n\n\n## Variants\n\n### Sizes\n\nexport const snippetsSizes = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n \n Coffee orders\n\n\n \n Coffee orders\n\n\n \n Coffee orders\n`,\n long: `.parent-container {\n display: flex;\n flex-wrap: wrap;\n padding: 16px;\n gap: 16px;\n }\n\n\n
\n {shortCode}\n
`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\n \n Coffee orders\n\n\n \n Coffee orders\n\n\n \n Coffee orders\n`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({ \n parentContainer: {\n display: \"flex\",\n flexWrap: \"wrap\",\n padding: \"16px\",\n gap: \"16px\",\n },\n});\nconst classes = useStyles();\nreturn (\n
\n {shortCode}\n
\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({ \n parentContainer: {\n display: \"flex\",\n flexWrap: \"wrap\",\n padding: \"16px\",\n gap: \"16px\",\n },\n});\nconst classes = useStyles();\nreturn (\n
\n {shortCode}\n
\n)`,\n },\n ],\n },\n },\n];\n\n\n \n \n Coffee orders\n \n \n \n Coffee orders\n \n \n \n Coffee orders\n \n\n\n### Status\n\nexport const snippetsStatus = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n \n Coffee orders\n\n\n \n Coffee orders\n\n\n \n Coffee orders\n\n\n \n Coffee orders\n`,\n long: `.parent-container {\n display: flex;\n flex-wrap: wrap;\n padding: 16px;\n gap: 16px;\n }\n\n\n
\n {shortCode}\n
`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\n \n Coffee orders\n\n\n \n Coffee orders\n\n\n \n Coffee orders\n\n\n \n Coffee orders\n`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n display: \"flex\",\n flexWrap: \"wrap\",\n padding: \"16px\",\n gap: \"16px\",\n },\n});\nconst classes = useStyles();\nreturn (\n
\n {shortCode}\n
\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n display: \"flex\",\n flexWrap: \"wrap\",\n padding: \"16px\",\n gap: \"16px\",\n },\n});\nconst classes = useStyles();\nreturn (\n
\n {shortCode}\n
\n)`,\n },\n ],\n },\n },\n];\n\n\n \n \n Coffee orders\n \n \n \n Coffee orders\n \n \n \n Coffee orders\n \n \n \n Coffee orders\n \n\n\n### Types\n\nexport const snippetsInformation = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n \n Coffee orders\n\n\n \n Coffee orders\n\n\n\n \n \n \n \n \n Coffee orders\n`,\n long: `.parent-container {\n display: flex;\n flex-wrap: wrap;\n padding: 16px;\n gap: 16px;\n }\n\n\n
\n {shortCode}\n
`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\n \n Coffee orders\n\n\n \n Coffee orders\n\n\n \n \n \n \n \n \n Coffee orders\n`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n display: \"flex\",\n flexWrap: \"wrap\",\n padding: \"16px\",\n gap: \"16px\",\n },\n});\nconst classes = useStyles();\nreturn (\n
\n {shortCode}\n
\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n display: \"flex\",\n flexWrap: \"wrap\",\n padding: \"16px\",\n gap: \"16px\",\n },\n});\nconst classes = useStyles();\nreturn (\n
\n {shortCode}\n
\n)`,\n },\n ],\n },\n },\n];\n\n\n \n \n Coffee orders\n \n \n \n Coffee orders\n \n \n \n \n \n \n \n \n Coffee orders\n \n\n\n### Max number\n\nexport const snippetsMaxNumber = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n \n Coffee orders\n`,\n long: `.parent-container {\n padding: 16px;\n }\n\n\n
\n {shortCode}\n
`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\n \n Coffee orders\n`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n padding: \"16px\",\n },\n});\nconst classes = useStyles();\nreturn (\n
\n {shortCode}\n
\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n padding: \"16px\",\n },\n});\nconst classes = useStyles();\nreturn (\n
\n {shortCode}\n
\n)`,\n },\n ],\n },\n },\n];\n\n\n \n \n Coffee orders\n \n\n\n### Positioning\n\nexport const snippetsNear = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n \n \n \n \n \n\n\n \n \n \n \n \n`,\n long: `.chip-container {\n display: flex;\n flex-wrap: wrap;\n padding: 16px;\n gap: 16px;\n }\n\n\n
\n {shortCode}\n
`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\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 chipContainer: {\n display: \"flex\",\n flexWrap: \"wrap\",\n padding: \"16px\",\n gap: \"16px\",\n },\n});\nconst classes = useStyles();\nreturn (\n
\n {shortCode}\n
\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n chipContainer: {\n display: \"flex\",\n flexWrap: \"wrap\",\n padding: \"16px\",\n gap: \"16px\",\n },\n});\nconst classes = useStyles();\nreturn (\n
\n {shortCode}\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\n### Position inline\n\nexport const snippetsInline = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n \n \n About\n \n \n Ingredients\n \n \n \n Orders\n \n \n About page\n Ingredients page\n Orders page\n`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\n \n \n About\n \n \n Ingredients\n \n \n \n Orders\n \n \n About page\n Ingredients page\n Orders page\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 About\n Ingredients\n \n Orders\n \n \n \n About page\n Ingredients page\n Orders page\n \n\n\n### Hide and show badge\n\nClick the button to hide and show the badge.\n\nexport const snippetsHideBadge = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n \n Coffee orders\n`,\n long: `.parent-container {\n padding: 16px;\n }\n\n\n
\n {shortCode}\n
\n `,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\n \n Coffee orders\n`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const [showBadge, setShowBadge] = useState(false);\nconst handleShowHideBadge = () => {\n setShowBadge(!showBadge);\n};\nconst useStyles = createUseStyles({\n parentContainer: {\n padding: \"16px\",\n },\n});\nconst classes = useStyles();\nreturn (\n
\n {shortCode}\n
\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const [showBadge, setShowBadge] = useState(false);\nconst handleShowHideBadge = () => {\n setShowBadge(!showBadge);\n};\nconst useStyles = createUseStyles({\n parentContainer: {\n padding: \"16px\",\n },\n});\nconst classes = useStyles();\nreturn (\n
\n {shortCode}\n
\n)`,\n },\n ],\n },\n },\n];\n\nexport const ToggleBadge = () => {\n const [showBadge, setShowBadge] = useState(false);\n const handleShowHideBadge = () => {\n setShowBadge(!showBadge);\n };\n return (\n
\n \n \n Coffee orders\n \n
\n );\n};\n\n\n \n\n\n### Accessible label\n\nexport const snippetsAccessibleLabel = [\n {\n technology: \"Web component\",\n snippets: {\n short: ` \n \n \n Coffee orders\n`,\n long: `.parent-container {\n padding: 16px;\n}\n\n\n
\n {shortCode}\n
`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\n \n Coffee orders\n`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n padding: \"16px\",\n },\n});\nconst classes = useStyles();\nreturn (\n
\n {shortCode}\n
\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n padding: \"16px\",\n },\n});\nconst classes = useStyles();\nreturn (\n
\n {shortCode}\n
\n)`,\n },\n ],\n },\n },\n];\n\n\n \n \n Coffee orders\n \n\n", + "contents": "\nimport {\n IcButton,\n IcBadge,\n SlottedSVG,\n IcChip,\n IcTab,\n IcTabPanel,\n IcTabContext,\n IcTabGroup,\n} from \"@ukic/react\";\nimport { useState } from \"react\";\n\n## Component demo\n\nexport const snippetsDefault = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n \n Coffee orders\n`,\n long: `.button-container {\n padding: 16px;\n }\n\n\n
\n {shortCode}\n
`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\n \n Coffee orders\n`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n buttonContainer: {\n padding: \"16px\",\n },\n });\n const classes = useStyles();\n return (\n
\n {shortCode}\n
\n )`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n buttonContainer: {\n padding: \"16px\",\n },\n });\n const classes = useStyles();\n return (\n
\n {shortCode}\n
\n )`,\n },\n ],\n },\n },\n];\n\n\n \n \n Coffee orders\n \n\n\n## Badge details\n\n\n\n## Variants\n\n### Sizes\n\nexport const snippetsSizes = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n \n Coffee orders\n\n\n \n Coffee orders\n\n\n \n Coffee orders\n`,\n long: `.button-container {\n display: flex;\n flex-wrap: wrap;\n padding: 16px;\n gap: 16px;\n }\n\n\n
\n {shortCode}\n
`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\n \n Coffee orders\n\n\n \n Coffee orders\n\n\n \n Coffee orders\n`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({ \n buttonContainer: {\n display: \"flex\",\n flexWrap: \"wrap\",\n padding: \"16px\",\n gap: \"16px\",\n },\n });\n const classes = useStyles();\n return (\n
\n {shortCode}\n
\n )`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({ \n buttonContainer: {\n display: \"flex\",\n flexWrap: \"wrap\",\n padding: \"16px\",\n gap: \"16px\",\n },\n });\n const classes = useStyles();\n return (\n
\n {shortCode}\n
\n )`,\n },\n ],\n },\n },\n];\n\n\n \n \n Coffee orders\n \n \n \n Coffee orders\n \n \n \n Coffee orders\n \n\n\n### Status\n\nexport const snippetsStatus = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n \n Coffee orders\n\n\n \n Coffee orders\n\n\n \n Coffee orders\n\n\n \n Coffee orders\n`,\n long: `.button-container {\n display: flex;\n flex-wrap: wrap;\n padding: 16px;\n gap: 16px;\n }\n\n\n
\n {shortCode}\n
`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\n \n Coffee orders\n\n\n \n Coffee orders\n\n\n \n Coffee orders\n\n\n \n Coffee orders\n`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n buttonContainer: {\n display: \"flex\",\n flexWrap: \"wrap\",\n padding: \"16px\",\n gap: \"16px\",\n },\n });\n const classes = useStyles();\n return (\n
\n {shortCode}\n
\n )`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n buttonContainer: {\n display: \"flex\",\n flexWrap: \"wrap\",\n padding: \"16px\",\n gap: \"16px\",\n },\n });\n const classes = useStyles();\n return (\n
\n {shortCode}\n
\n )`,\n },\n ],\n },\n },\n];\n\n\n \n \n Coffee orders\n \n \n \n Coffee orders\n \n \n \n Coffee orders\n \n \n \n Coffee orders\n \n\n\n### Types\n\nexport const snippetsInformation = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n \n Coffee orders\n\n\n \n Coffee orders\n\n\n\n \n \n \n \n \n Coffee orders\n`,\n long: `.button-container {\n display: flex;\n flex-wrap: wrap;\n padding: 16px;\n gap: 16px;\n }\n\n\n
\n {shortCode}\n
`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\n \n Coffee orders\n\n\n \n Coffee orders\n\n\n \n \n \n \n \n \n Coffee orders\n`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n buttonContainer: {\n display: \"flex\",\n flexWrap: \"wrap\",\n padding: \"16px\",\n gap: \"16px\",\n },\n });\n const classes = useStyles();\n return (\n
\n {shortCode}\n
\n )`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n buttonContainer: {\n display: \"flex\",\n flexWrap: \"wrap\",\n padding: \"16px\",\n gap: \"16px\",\n },\n});\nconst classes = useStyles();\nreturn (\n
\n {shortCode}\n
\n)`,\n },\n ],\n },\n },\n];\n\n\n \n \n Coffee orders\n \n \n \n Coffee orders\n \n \n \n \n \n \n \n \n Coffee orders\n \n\n\n### Max number\n\nexport const snippetsMaxNumber = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n \n Coffee orders\n`,\n long: `.button-container {\n padding: 16px;\n }\n\n\n
\n {shortCode}\n
`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\n \n Coffee orders\n`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n buttonContainer: {\n padding: \"16px\",\n },\n });\n const classes = useStyles();\n return (\n
\n {shortCode}\n
\n )`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n buttonContainer: {\n padding: \"16px\",\n },\n });\n const classes = useStyles();\n return (\n
\n {shortCode}\n
\n )`,\n },\n ],\n },\n },\n];\n\n\n \n \n Coffee orders\n \n\n\n### Positioning\n\nexport const snippetsNear = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n \n \n \n \n \n\n\n \n \n \n \n \n`,\n long: `.chip-container {\n display: flex;\n flex-wrap: wrap;\n padding: 16px;\n gap: 16px;\n }\n\n\n
\n {shortCode}\n
`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\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 chipContainer: {\n display: \"flex\",\n flexWrap: \"wrap\",\n padding: \"16px\",\n gap: \"16px\",\n },\n });\n const classes = useStyles();\n return (\n
\n {shortCode}\n
\n )`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n chipContainer: {\n display: \"flex\",\n flexWrap: \"wrap\",\n padding: \"16px\",\n gap: \"16px\",\n },\n });\n const classes = useStyles();\n return (\n
\n {shortCode}\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\n### Position inline\n\nexport const snippetsInline = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n \n \n About\n \n \n Ingredients\n \n \n \n Orders\n \n \n About page\n Ingredients page\n Orders page\n`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\n \n \n About\n \n \n Ingredients\n \n \n \n Orders\n \n \n About page\n Ingredients page\n Orders page\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 About\n Ingredients\n \n Orders\n \n \n \n About page\n Ingredients page\n Orders page\n \n\n\n### Hide and show badge\n\nClick the button to hide and show the badge.\n\nexport const snippetsHideBadge = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n \n Coffee orders\n`,\n long: `.button-container {\n padding: 16px;\n }\n\n\n
\n {shortCode}\n
\n `,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\n \n Coffee orders\n`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const [showBadge, setShowBadge] = useState(false);\n const handleShowHideBadge = () => {\n setShowBadge(!showBadge);\n };\n const useStyles = createUseStyles({\n parentContainer: {\n padding: \"16px\",\n },\n });\n const classes = useStyles();\n return (\n
\n {shortCode}\n
\n )`,\n },\n {\n language: \"Javascript\",\n snippet: `const [showBadge, setShowBadge] = useState(false);\n const handleShowHideBadge = () => {\n setShowBadge(!showBadge);\n };\n const useStyles = createUseStyles({\n parentContainer: {\n padding: \"16px\",\n },\n });\n const classes = useStyles();\n return (\n
\n {shortCode}\n
\n )`,\n },\n ],\n },\n },\n];\n\nexport const ToggleBadge = () => {\n const [showBadge, setShowBadge] = useState(false);\n const handleShowHideBadge = () => {\n setShowBadge(!showBadge);\n };\n return (\n
\n \n \n Coffee orders\n \n
\n );\n};\n\n\n \n\n\n### Accessible label\n\nexport const snippetsAccessibleLabel = [\n {\n technology: \"Web component\",\n snippets: {\n short: ` \n \n \n Coffee orders\n`,\n long: `.button-container {\n padding: 16px;\n}\n\n\n
\n {shortCode}\n
`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\n \n Coffee orders\n`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n buttonContainer: {\n padding: \"16px\",\n },\n });\n const classes = useStyles();\n return (\n
\n {shortCode}\n
\n )`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n buttonContainer: {\n padding: \"16px\",\n },\n });\n const classes = useStyles();\n return (\n
\n {shortCode}\n
\n )`,\n },\n ],\n },\n },\n];\n\n\n \n \n Coffee orders\n \n\n", "path": "/components/badge/code", - "date": "2024-05-31", + "date": "2024-05-02", "title": "Badge", "status": "BETA", "subTitle": "Badges are attached to other components to provide an indication that something new is available, or that something has changed.", @@ -1034,10 +1034,10 @@ ], "meta": { "relativePath": "components/badge/code.mdx", - "createdAt": "2024-05-31T10:44:10.889Z", - "lastModified": "2024-05-31T10:44:10.889Z", - "size": 21969, - "formattedSize": "21.5 KB" + "createdAt": "2024-05-21T09:12:11.355Z", + "lastModified": "2024-05-21T09:12:11.355Z", + "size": 22641, + "formattedSize": "22.1 KB" } }, { @@ -1066,8 +1066,8 @@ ], "meta": { "relativePath": "components/badge/guidance.mdx", - "createdAt": "2024-05-30T12:04:49.420Z", - "lastModified": "2024-05-30T12:04:49.420Z", + "createdAt": "2024-05-13T07:27:37.285Z", + "lastModified": "2024-05-13T07:27:37.285Z", "size": 12706, "formattedSize": "12.4 KB" } @@ -1105,9 +1105,9 @@ }, { "id": "components__breadcrumbs__codex", - "contents": "\nimport { IcBreadcrumbGroup, IcBreadcrumb, IcLink } from \"@ukic/react\";\n\nimport { NavLink, MemoryRouter } from \"react-router-dom\";\n\n## Component demo\n\nexport const snippets = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n \n \n \n \n`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\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 e.preventDefault()}\n />\n e.preventDefault()}\n />\n e.preventDefault()}\n />\n \n\n\n## Breadcrumb details\n\n\n\n## Breadcrumb group details\n\n\n\n## Variants\n\n### Back\n\nexport const back = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n \n \n \n \n`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\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 e.preventDefault()}\n />\n e.preventDefault()}\n />\n e.preventDefault()}\n />\n \n\n\n### With icons\n\nexport const withIcons = [\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 e.preventDefault()}>\n \n \n \n \n e.preventDefault()}\n >\n \n \n \n \n e.preventDefault()}\n >\n \n \n \n \n \n\n\n### Collapsed\n\nexport const collapsed = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n \n \n \n \n`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\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 e.preventDefault()}\n />\n e.preventDefault()}\n />\n e.preventDefault()}\n />\n \n\n\n### With React Router\n\nexport const withReactRouter = [\n {\n technology: \"React\",\n snippets: {\n short: `\n \n \n \n Home\n \n \n \n \n Beverages\n \n \n \n \n Coffee\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 Home\n \n \n \n \n \n \n Beverages\n \n \n \n \n \n \n Coffee\n \n \n \n \n \n\n", + "contents": "\nimport { IcBreadcrumbGroup, IcBreadcrumb, IcLink } from \"@ukic/react\";\n\nimport { NavLink, MemoryRouter } from \"react-router-dom\";\n\n## Component demo\n\nexport const snippets = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n \n \n \n \n`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\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 e.preventDefault()}\n />\n e.preventDefault()}\n />\n e.preventDefault()}\n />\n \n\n\n## Breadcrumb details\n\n\n\n## Breadcrumb group details\n\n\n\n## Variants\n\n### Back\n\nexport const back = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n \n \n \n \n`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\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 e.preventDefault()}\n />\n e.preventDefault()}\n />\n e.preventDefault()}\n />\n \n\n\n### With icons\n\nexport const withIcons = [\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 e.preventDefault()}>\n \n \n \n \n e.preventDefault()}\n >\n \n \n \n \n e.preventDefault()}\n >\n \n \n \n \n \n\n\n### Collapsed\n\nexport const collapsed = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n \n \n \n \n`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\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 e.preventDefault()}\n />\n e.preventDefault()}\n />\n e.preventDefault()}\n />\n \n\n\n### With React Router\n\nexport const withReactRouter = [\n {\n technology: \"React\",\n snippets: {\n short: `\n \n \n \n Home\n \n \n \n \n Beverages\n \n \n \n \n Coffee\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 Home\n \n \n \n \n \n \n Beverages\n \n \n \n \n \n \n Coffee\n \n \n \n \n \n\n", "path": "/components/breadcrumb/code", - "date": "2024-05-31", + "date": "2024-05-02", "title": "Breadcrumb", "status": "BETA", "subTitle": "Breadcrumbs show someone where they are in an app’s hierarchy and provide a secondary method of navigating back to parent pages.", @@ -1128,9 +1128,9 @@ ], "meta": { "relativePath": "components/breadcrumbs/code.mdx", - "createdAt": "2024-05-31T10:44:10.949Z", - "lastModified": "2024-05-31T10:44:10.949Z", - "size": 11522, + "createdAt": "2024-05-21T09:12:11.355Z", + "lastModified": "2024-05-21T09:12:11.355Z", + "size": 11523, "formattedSize": "11.3 KB" } }, @@ -1199,9 +1199,9 @@ }, { "id": "components__buttons__codex", - "contents": "\nimport { IcButton } from \"@ukic/react\";\n\n## Component demo\n\nexport const snippetsDefault = [\n {\n technology: \"Web component\",\n snippets: {\n short: `Add to order\nView coffees\nFind out more\nCancel order`,\n long: `.btn-container {\n display: flex;\n flex-wrap: wrap;\n gap: 8px;\n padding: 16px;\n }\n\n \n
\n {shortCode}\n
\n `,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: ` console.log(ev)}>\n Add to order\n\nView coffees\nFind out more\nCancel order`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n btnContainer: {\n display: \"flex\",\n flexWrap: \"wrap\",\n gap: \"8px\",\n padding: \"16px\",\n },\n});\nconst classes = useStyles();\nreturn (\n
\n {shortCode}\n
\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n btnContainer: {\n display: \"flex\",\n flexWrap: \"wrap\",\n gap: \"8px\",\n padding: \"16px\",\n },\n});\nconst classes = useStyles();\nreturn (\n
\n {shortCode}\n
\n)`,\n },\n ],\n },\n },\n];\n\n\n console.log(ev)}>\n Add to order\n \n View coffees\n Find out more\n Cancel order\n\n\n## Button details\n\n\n\n## Variants\n\n### Other states\n\nexport const snippetsOtherStates = [\n {\n technology: \"Web component\",\n snippets: {\n short: `Add to order\nLoading button\nAdd to order`,\n long: `.btn-container {\n display: flex;\n flex-wrap: wrap;\n gap: 8px;\n padding: 16px;\n }\n\n \n
\n {shortCode}\n
`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `Add to order\nLoading button\nAdd to order`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n btnContainer: {\n display: \"flex\",\n flexWrap: \"wrap\",\n gap: \"8px\",\n padding: \"16px\",\n },\n});\nconst classes = useStyles();\nreturn (\n
\n {shortCode}\n
\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n btnContainer: {\n display: \"flex\",\n flexWrap: \"wrap\",\n gap: \"8px\",\n padding: \"16px\",\n },\n});\nconst classes = useStyles();\nreturn (\n
\n {shortCode}\n
\n)`,\n },\n ],\n },\n },\n];\n\n\n \n Add to order\n \n \n Loading button\n \n \n Add to order\n \n\n\n### With icon\n\nexport const snippetsWithIcon = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n \n \n \n Refresh order status\n`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\n \n \n \n \n Refresh order status\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 Refresh order status\n \n \n \n \n \n\n\n### Icon Button\n\nexport const snippetsIcon = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\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### Sizing\n\nexport const snippetsSizing = [\n {\n technology: \"Web component\",\n snippets: {\n short: `Add to order\nAdd to order\nAdd to order`,\n long: `.btn-container {\n display: flex;\n flex-wrap: wrap;\n gap: 8px;\n padding: 16px;\n }\n\n \n
\n {shortCode}\n
`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `Add to order\nAdd to order\nAdd to order`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n btnContainer: {\n display: \"flex\",\n flexWrap: \"wrap\",\n gap: \"8px\",\n padding: \"16px\",\n },\n});\nconst classes = useStyles();\nreturn (\n
\n {shortCode}\n
\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n btnContainer: {\n display: \"flex\",\n flexWrap: \"wrap\",\n gap: \"8px\",\n padding: \"16px\",\n },\n});\nconst classes = useStyles();\nreturn (\n
\n {shortCode}\n
\n)`,\n },\n ],\n },\n },\n];\n\n\n \n Add to order\n \n Add to order\n \n Add to order\n \n\n\n### Colour variants\n\nexport const snippetsColour = [\n {\n technology: \"Web component\",\n snippets: {\n short: `Add to order\nAdd to order\nAdd to order`,\n long: `.btn-container {\n display: flex;\n flex-wrap: wrap;\n gap: 8px;\n padding: 16px;\n }\n\n \n
\n {shortCode}\n
`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `Add to order\nAdd to order\nAdd to order`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n btnContainer: {\n display: \"flex\",\n flexWrap: \"wrap\",\n gap: \"8px\",\n padding: \"16px\",\n },\n});\nconst classes = useStyles();\nreturn (\n
\n {shortCode}\n
\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n btnContainer: {\n display: \"flex\",\n flexWrap: \"wrap\",\n gap: \"8px\",\n padding: \"16px\",\n },\n});\nconst classes = useStyles();\nreturn (\n
\n {shortCode}\n
\n)`,\n },\n ],\n },\n },\n];\n\n\n Add to order\n \n Add to order\n \n \n Add to order\n \n\n\n### File upload\n\nexport const snippetsFileUpload = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n Upload a file\n\n\n Upload multiple files\n`,\n long: `.btn-container {\n display: flex;\n flex-wrap: wrap;\n gap: 8px;\n padding: 16px;\n }\n\n \n
\n {shortCode}\n
\n `,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\n console.log(\"Single file upload\", event.detail)\n }\n>\n Upload a file\n\n\n console.log(\"Multiple files upload\", event.detail)\n }\n>\n Upload multiple files\n`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n btnContainer: {\n display: \"flex\",\n flexWrap: \"wrap\",\n gap: \"8px\",\n padding: \"16px\",\n },\n});\nconst classes = useStyles();\nreturn (\n
\n {shortCode}\n
\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n btnContainer: {\n display: \"flex\",\n flexWrap: \"wrap\",\n gap: \"8px\",\n padding: \"16px\",\n },\n});\nconst classes = useStyles();\nreturn (\n
\n {shortCode}\n
\n)`,\n },\n ],\n },\n },\n];\n\n\n \n console.log(\"Single file upload\", event.detail)\n }\n >\n Upload a file\n \n \n console.log(\"Multiple files upload\", event.detail)\n }\n >\n Upload multiple files\n \n\n", + "contents": "\nimport { IcButton } from \"@ukic/react\";\n\n## Component demo\n\nexport const snippetsDefault = [\n {\n technology: \"Web component\",\n snippets: {\n short: `Add to order\nView coffees\nFind out more\nCancel order`,\n long: `{shortCode}\n`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: ` console.log(ev)}>\n Add to order\n\nView coffees\nFind out more\nCancel order`,\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 console.log(ev)}>\n Add to order\n \n View coffees\n Find out more\n Cancel order\n\n\n## Button details\n\n\n\n## Variants\n\n### Other states\n\nexport const snippetsOtherStates = [\n {\n technology: \"Web component\",\n snippets: {\n short: `Add to order\nLoading button\nAdd to order`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `Add to order\nLoading button\nAdd to order`,\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 Add to order\n \n \n Loading button\n \n \n Add to order\n \n\n\n### With icon\n\nexport const snippetsWithIcon = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n \n \n \n Refresh order status\n`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\n \n \n \n \n Refresh order status\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 Refresh order status\n \n \n \n \n \n\n\n### Icon Button\n\nexport const snippetsIcon = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\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### Sizing\n\nexport const snippetsSizing = [\n {\n technology: \"Web component\",\n snippets: {\n short: `Add to order\nAdd to order\nAdd to order`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `Add to order\nAdd to order\nAdd to order`,\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 Add to order\n \n Add to order\n \n Add to order\n \n\n\n### Colour variants\n\nexport const snippetsColour = [\n {\n technology: \"Web component\",\n snippets: {\n short: `Add to order\nAdd to order\nAdd to order`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `Add to order\nAdd to order\nAdd to order`,\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 Add to order\n \n Add to order\n \n \n Add to order\n \n\n\n### File upload\n\nexport const snippetsFileUpload = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n Upload a file\n\n\n Upload multiple files\n`,\n long: `{shortCode}\n`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\n console.log(\"Single file upload\", event.detail)\n }\n>\n Upload a file\n\n\n console.log(\"Multiple files upload\", event.detail)\n }\n>\n Upload multiple files\n`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n buttonContainer: {\n display: \"flex\",\n gap: \"8px\",\n padding: \"16px\",\n },\n});\nconst classes = useStyles();\nreturn (\n
\n {shortCode}\n
\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n buttonContainer: {\n display: \"flex\",\n flexWrap: \"wrap\",\n gap: \"8px\",\n padding: \"16px\",\n },\n});\nconst classes = useStyles();\nreturn (\n
\n {shortCode}\n
\n)`,\n },\n ],\n },\n },\n];\n\n\n \n console.log(\"Single file upload\", event.detail)\n }\n >\n Upload a file\n \n \n console.log(\"Multiple files upload\", event.detail)\n }\n >\n Upload multiple files\n \n\n", "path": "/components/button/code", - "date": "2024-05-31", + "date": "2024-05-02", "title": "Button", "status": "BETA", "subTitle": "Buttons are used to allow or encourage people to take an action.", @@ -1222,10 +1222,10 @@ ], "meta": { "relativePath": "components/buttons/code.mdx", - "createdAt": "2024-05-31T10:44:10.841Z", - "lastModified": "2024-05-31T10:44:10.841Z", - "size": 14666, - "formattedSize": "14.3 KB" + "createdAt": "2024-05-21T09:12:11.355Z", + "lastModified": "2024-05-21T09:12:11.355Z", + "size": 12022, + "formattedSize": "11.7 KB" } }, { @@ -1254,8 +1254,8 @@ ], "meta": { "relativePath": "components/buttons/guidance.mdx", - "createdAt": "2024-05-30T12:04:49.424Z", - "lastModified": "2024-05-30T12:04:49.424Z", + "createdAt": "2024-05-13T07:27:37.285Z", + "lastModified": "2024-05-13T07:27:37.285Z", "size": 15263, "formattedSize": "14.9 KB" } @@ -1293,9 +1293,9 @@ }, { "id": "components__cards__codex", - "contents": "\nimport {\n IcCard,\n IcStatusTag,\n IcButton,\n IcTypography,\n SlottedSVG,\n IcBadge,\n} from \"@ukic/react\";\n\nexport const CardIcon = () => (\n \n \n \n \n);\n\nexport const InteractionIcon = () => (\n \n \n \n);\n\n## Component demo\n\nexport const snippets = [\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 \n \n \n \n \n \n \n \n
\n Accept\n Cancel\n
\n \n To cancel your order click cancel.\n \n`,\n long: `ic-card {\n width: 360px;\n }\n .interaction-area {\n display: flex;\n gap: 16px;\n }\n .card-image {\n height: 100%;\n width: 100%;\n max-height: 20.375rem;\n max-width: 20.375rem;\n }\n\n\n {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 \n \n \n \n \n \n \n \n
\n Accept\n Cancel\n
\n \n To cancel your order click cancel.\n \n`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n card: {\n width: \"360px\",\n },\n cardImage: {\n height: \"100%\",\n width: \"100%\",\n maxHeight: \"20.375rem\",\n maxWidth: \"20.375rem\",\n },\n interactionArea: {\n display: \"flex\",\n gap: \"16px\",\n },\n});\nconst classes = useStyles();\nreturn (\n {shortCode}\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n card: {\n width: \"360px\",\n },\n cardImage: {\n height: \"100%\",\n width: \"100%\",\n maxHeight: \"20.375rem\",\n maxWidth: \"20.375rem\",\n },\n interactionArea: {\n display: \"flex\",\n gap: \"16px\",\n },\n});\nconst classes = useStyles();\nreturn (\n {shortCode}\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 \n \n \n \n \n \n \n \n \n
\n Accept\n Cancel\n
\n \n To cancel your order click cancel.\n \n \n\n\n## Card details\n\n\n\n## Variants\n\n### Heading only\n\nexport const headingOnly = [\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### With icon\n\nexport const withIcon = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n \n \n \n`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\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### Message\n\nexport const withMessage = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n \n \n \n`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\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### With subheading\n\nexport const withSubHeading = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n \n \n \n`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\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### Interaction button\n\nexport const interactionButton = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\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 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### Adornment\n\nexport const adornment = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\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### Top image\n\nexport const topImage = [\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 \n \n \n \n \n \n \n \n`,\n long: `ic-card {\n width: 360px;\n }\n .card-image {\n height: 100%;\n width: 100%;\n maxHeight: 20.375rem;\n maxWidth: 20.375rem;\n }\n \n \n {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 \n \n \n \n \n \n \n \n`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n card: {\n width: \"360px\",\n },\n cardImage: {\n height: \"100%\",\n width: \"100%\",\n maxHeight: \"20.375rem\",\n maxWidth: \"20.375rem\",\n },\n});\nconst classes = useStyles();\nreturn (\n {shortCode}\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `{shortCode}`,\n },\n ],\n },\n },\n];\n\n\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\n\n### Middle image\n\nexport const midImage = [\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 \n \n \n \n \n \n \n \n`,\n long: `ic-card {\n width:360px;\n }\n .card-image {\n height: 100%;\n width: 100%;\n maxHeight: 20.375rem;\n maxWidth: 20.375rem;\n }\n \n \n {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 \n \n \n \n \n \n \n \n`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n card: {\n width: \"360px\",\n },\n cardImage: {\n height: \"100%\",\n width: \"100%\",\n maxHeight: \"20.375rem\",\n maxWidth: \"20.375rem\",\n },\n});\nconst classes = useStyles();\nreturn (\n {shortCode}\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n card: {\n width: \"360px\",\n },\n cardImage: {\n height: \"100%\",\n width: \"100%\",\n maxHeight: \"20.375rem\",\n maxWidth: \"20.375rem\",\n },\n});\nconst classes = useStyles();\nreturn (\n {shortCode}\n)`,\n },\n ],\n },\n },\n];\n\n\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\n\n### Interaction controls\n\nexport const interactionControls = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n \n \n \n \n
\n Accept\n Cancel\n
\n`,\n long: `.interaction-area {\n display: flex;\n gap: 16px;\n }\n \n \n {shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\n \n \n \n \n
\n Accept\n Cancel\n
\n`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n interactionArea: {\n display: \"flex\",\n gap: \"16px\",\n },\n});\nconst classes = useStyles();\nreturn (\n {shortCode}\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n interactionArea: {\n display: \"flex\",\n gap: \"16px\",\n },\n});\nconst classes = useStyles();\nreturn (\n {shortCode}\n)`,\n },\n ],\n },\n },\n];\n\n\n \n \n \n \n
\n Accept\n Cancel\n
\n \n\n\n### Expandable\n\nexport const expandable = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n \n \n \n
\n Accept\n Cancel\n
\n \n To cancel your order click cancel.\n \n`,\n long: `.interaction-area {\n display: flex;\n gap: 16px;\n }\n\n\n {shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\n \n \n \n
\n Accept\n Cancel\n
\n \n To cancel your order click cancel.\n \n`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n interactionArea: {\n display: \"flex\",\n gap: \"16px\",\n },\n });\n const classes = useStyles();\n return (\n {shortCode}\n )`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n interactionArea: {\n display: \"flex\",\n gap: \"16px\",\n },\n });\n const classes = useStyles();\n return (\n {shortCode}\n )`,\n },\n ],\n },\n },\n];\n\n\n \n \n \n \n
\n Accept\n Cancel\n
\n \n To cancel your order click cancel.\n \n \n\n\n### Clickable link\n\nexport const clickableLink = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n \n \n \n`,\n long: `.parent-container {\n padding: 16px;\n }\n\n\n
\n {shortCode}\n
`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\n \n \n \n`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n padding: \"16px\",\n },\n});\nconst classes = useStyles();\nreturn ( \n
\n {shortCode}\n
\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n padding: \"16px\",\n },\n});\nconst classes = useStyles();\nreturn ( \n
\n {shortCode}\n
\n)`,\n },\n ],\n },\n },\n];\n\n\n e.preventDefault()}\n >\n \n \n \n \n\n\n### Clickable button\n\nexport const clickableBtn = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n \n \n \n`,\n long: `.parent-container {\n padding: 16px;\n }\n\n\n
\n {shortCode}\n
\n `,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: ` console.log(ev)}\n>\n \n \n \n`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n padding: \"16px\",\n },\n});\nconst classes = useStyles();\nreturn ( \n
\n {shortCode}\n
\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n padding: \"16px\",\n },\n});\nconst classes = useStyles();\nreturn ( \n
\n {shortCode}\n
\n)`,\n },\n ],\n },\n },\n];\n\n\n console.log(ev)}\n >\n \n \n \n \n\n\n### With badge\n\nexport const withBadge = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n \n \n \n \n`,\n long: `.parent-container {\n padding: 16px;\n }\n\n\n
\n {shortCode}\n
`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\n \n \n \n \n`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n padding: \"16px\",\n },\n});\nconst classes = useStyles();\nreturn ( \n
\n {shortCode}\n
\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n padding: \"16px\",\n },\n});\nconst classes = useStyles();\nreturn ( \n
\n {shortCode}\n
\n)`,\n },\n ],\n },\n },\n];\n\n\n e.preventDefault()}\n >\n \n \n \n \n \n\n\n### Disabled\n\nexport const disabled = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n \n \n \n`,\n long: `.parent-container {\n padding: 16px;\n }\n\n\n
\n {shortCode}\n
`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\n \n \n \n`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n padding: \"16px\",\n },\n});\nconst classes = useStyles();\nreturn ( \n
\n {shortCode}\n
\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n padding: \"16px\",\n },\n});\nconst classes = useStyles();\nreturn ( \n
\n {shortCode}\n
\n)`,\n },\n ],\n },\n },\n];\n\n\n \n \n \n \n \n\n\n### Full width\n\nexport const fullWidth = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n \n \n \n`,\n long: `.parent-container {\n padding: 16px;\n }\n\n\n
\n {shortCode}\n
`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\n \n \n \n`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n padding: \"16px\",\n },\n});\nconst classes = useStyles();\nreturn ( \n
\n {shortCode}\n
\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n padding: \"16px\",\n },\n});\nconst classes = useStyles();\nreturn ( \n
\n {shortCode}\n
\n)`,\n },\n ],\n },\n },\n];\n\n\n \n \n \n \n \n\n\n### Wrapped by link\n\nexport const wrapped = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n \n \n \n \n \n`,\n long: `.parent-container {\n padding: 16px;\n }\n\n\n
\n {shortCode}\n
`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\n \n \n \n \n \n`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n padding: \"16px\",\n },\n});\nconst classes = useStyles();\nreturn ( \n
\n {shortCode}\n
\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n padding: \"16px\",\n },\n});\nconst classes = useStyles();\nreturn ( \n
\n {shortCode}\n
\n)`,\n },\n ],\n },\n },\n];\n\n\n e.preventDefault()}\n style={{ textDecoration: \"none\", color: \"var(--ic-architechtural-black)\" }}\n aria-label=\"Americano order card\"\n >\n \n \n \n \n \n \n\n", + "contents": "\nimport {\n IcCard,\n IcStatusTag,\n IcButton,\n IcTypography,\n SlottedSVG,\n IcBadge,\n} from \"@ukic/react\";\n\nexport const CardIcon = () => (\n \n \n \n \n);\n\nexport const InteractionIcon = () => (\n \n \n \n);\n\n## Component demo\n\nexport const snippets = [\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 \n \n \n \n \n \n \n \n
\n Accept\n Cancel\n
\n \n To cancel your order click cancel.\n \n`,\n long: `ic-card {\n width: 360px;\n }\n .interaction-area {\n display: flex;\n gap: 16px;\n }\n .card-image {\n height: 100%;\n width: 100%;\n max-height: 20.375rem;\n max-width: 20.375rem;\n }\n \n \n {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 \n \n \n \n \n \n \n \n
\n Accept\n Cancel\n
\n \n To cancel your order click cancel.\n \n`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n interactionArea: {\n display: \"flex\",\n gap: \"16px\",\n },\n });\n const classes = useStyles();\n return (\n {shortCode}\n )`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n interactionArea: {\n display: \"flex\",\n gap: \"16px\",\n },\n });\n const classes = useStyles();\n return (\n {shortCode}\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 \n \n \n \n \n \n \n \n \n
\n Accept\n Cancel\n
\n \n To cancel your order click cancel.\n \n \n\n\n## Card details\n\n\n\n## Variants\n\n### Heading only\n\nexport const headingOnly = [\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### With icon\n\nexport const withIcon = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n \n \n \n`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\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### Message\n\nexport const withMessage = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n \n \n \n`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\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### With subheading\n\nexport const withSubHeading = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n \n \n \n`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\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### Interaction button\n\nexport const interactionButton = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\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 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### Adornment\n\nexport const adornment = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\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### Top image\n\nexport const topImage = [\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 \n \n \n \n \n \n \n \n`,\n long: `ic-card {\n width: 360px;\n }\n .image {\n height: 100%;\n width: 100%;\n maxHeight: 20.375rem;\n maxWidth: 20.375rem;\n }\n \n \n {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 \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 \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n\n### Middle image\n\nexport const midImage = [\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 \n \n \n \n \n \n \n \n`,\n long: `ic-card {\n width:360px;\n }\n .image {\n height: 100%;\n width: 100%;\n maxHeight: 20.375rem;\n maxWidth: 20.375rem;\n }\n \n \n {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 \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 \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n\n### Interaction controls\n\nexport const interactionControls = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n \n \n \n \n
\n Accept\n Cancel\n
\n`,\n long: `.interaction-area {\n display: flex;\n gap: 16px;\n }\n \n \n {shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\n \n \n \n \n
\n Accept\n Cancel\n
\n`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n interactionArea: {\n display: \"flex\",\n gap: \"16px\",\n },\n });\n const classes = useStyles();\n return (\n {shortCode}\n )`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n interactionArea: {\n display: \"flex\",\n gap: \"16px\",\n },\n });\n const classes = useStyles();\n return (\n {shortCode}\n )`,\n },\n ],\n },\n },\n];\n\n\n \n \n \n \n
\n Accept\n Cancel\n
\n \n\n\n### Expandable\n\nexport const expandable = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n \n \n \n
\n Accept\n Cancel\n
\n \n To cancel your order click cancel.\n \n`,\n long: `.interaction-area {\n display: flex;\n gap: 16px;\n }\n \n \n {shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\n \n \n \n
\n Accept\n Cancel\n
\n \n To cancel your order click cancel.\n \n`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n interactionArea: {\n display: \"flex\",\n gap: \"16px\",\n },\n });\n const classes = useStyles();\n return (\n {shortCode}\n )`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n interactionArea: {\n display: \"flex\",\n gap: \"16px\",\n },\n });\n const classes = useStyles();\n return (\n {shortCode}\n )`,\n },\n ],\n },\n },\n];\n\n\n \n \n \n \n
\n Accept\n Cancel\n
\n \n To cancel your order click cancel.\n \n \n\n\n### Clickable link\n\nexport const clickableLink = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n \n \n \n`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\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 e.preventDefault()}\n >\n \n \n \n \n\n\n### Clickable button\n\nexport const clickableBtn = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n \n \n \n`,\n long: `{shortCode}\n`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: ` console.log(ev)}\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)}\n >\n \n \n \n \n\n\n### With badge\n\nexport const withBadge = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\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 e.preventDefault()}\n >\n \n \n \n \n \n\n\n### Disabled\n\nexport const disabled = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n \n \n \n`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\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### Full width\n\nexport const fullWidth = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n \n \n \n`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\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### Wrapped by link\n\nexport const wrapped = [\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`,\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 e.preventDefault()}\n style={{ textDecoration: \"none\", color: \"var(--ic-architechtural-black)\" }}\n aria-label=\"Americano order card\"\n >\n \n \n \n \n \n \n\n", "path": "/components/card/code", - "date": "2024-05-31", + "date": "2024-05-02", "title": "Card", "status": "BETA", "subTitle": "Cards are containers used to display structured information or interactive content.", @@ -1316,10 +1316,10 @@ ], "meta": { "relativePath": "components/cards/code.mdx", - "createdAt": "2024-05-31T10:44:10.945Z", - "lastModified": "2024-05-31T10:44:10.945Z", - "size": 56388, - "formattedSize": "55.1 KB" + "createdAt": "2024-05-21T09:12:11.359Z", + "lastModified": "2024-05-21T09:12:11.359Z", + "size": 53247, + "formattedSize": "52.0 KB" } }, { @@ -1348,8 +1348,8 @@ ], "meta": { "relativePath": "components/cards/guidance.mdx", - "createdAt": "2024-05-30T12:07:55.539Z", - "lastModified": "2024-05-30T12:07:55.539Z", + "createdAt": "2024-05-21T09:12:11.363Z", + "lastModified": "2024-05-21T09:12:11.363Z", "size": 10607, "formattedSize": "10.4 KB" } @@ -1387,9 +1387,9 @@ }, { "id": "components__checkboxes__codex", - "contents": "\nimport { IcCheckboxGroup, IcCheckbox, IcTextField } from \"@ukic/react\";\n\n## Component demo\n\nexport const snippetsDefault = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n \n \n \n`,\n long: `{shortCode}\n`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: ` console.log(\"onIcChange\", ev.detail.value)}>\n console.log(\"onIcCheck\", ev)} />\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(\"onIcChange\", ev.detail.value)}\n >\n console.log(\"onIcCheck\", ev)}\n />\n \n \n \n\n\n## Checkbox group details\n\n\n\n## Checkbox details\n\n\n\n## Variants\n\n### Hidden label\n\nexport const snippetsHiddenLabel = [\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: `{shortCode}`,\n },\n {\n language: \"Javascript\",\n snippet: `{shortCode}`,\n },\n ],\n },\n },\n];\n\n\n \n \n \n \n\n\n### Helper text\n\nexport const snippetsHelperText = [\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: `{shortCode}`,\n },\n {\n language: \"Javascript\",\n snippet: `{shortCode}`,\n },\n ],\n },\n },\n];\n\n\n \n \n \n \n\n\n### Sizes\n\nexport const snippetsSizes = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\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 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 \n \n \n \n \n \n\n\n### Setting each checkbox size\n\nexport const snippetsSettingEachCheckboxSize = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n\n`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\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### Conditional\n\nexport const snippetsConditional = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\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 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### Conditional dynamic\n\nexport const snippetsConditionalDynamic = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\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 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\n\n### Validation\n\nexport const snippetsValidation = [\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: `{shortCode}`,\n },\n {\n language: \"Javascript\",\n snippet: `{shortCode}`,\n },\n ],\n },\n },\n];\n\n\n \n \n \n \n\n\n### Indeterminate\n\nexport const snippetsIndeterminate = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\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 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 \n \n \n\n", + "contents": "\nimport { IcCheckboxGroup, IcCheckbox, IcTextField } from \"@ukic/react\";\n\n## Component demo\n\nexport const snippetsDefault = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n \n \n \n`,\n long: `{shortCode}\n `,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: ` console.log(\"onIcChange\", ev.detail.value)}>\n console.log(\"onIcCheck\", ev)} />\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(\"onIcChange\", ev.detail.value)}\n >\n console.log(\"onIcCheck\", ev)}\n />\n \n \n \n\n\n## Checkbox group details\n\n\n\n## Checkbox details\n\n\n\n## Variants\n\n### Hidden label\n\nexport const snippetsHiddenLabel = [\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: `{shortCode}`,\n },\n {\n language: \"Javascript\",\n snippet: `{shortCode}`,\n },\n ],\n },\n },\n];\n\n\n \n \n \n \n\n\n### Helper text\n\nexport const snippetsHelperText = [\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: `{shortCode}`,\n },\n {\n language: \"Javascript\",\n snippet: `{shortCode}`,\n },\n ],\n },\n },\n];\n\n\n \n \n \n \n\n\n### Sizes\n\nexport const snippetsSizes = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\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 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 \n \n \n \n \n \n\n\n### Setting each checkbox size\n\nexport const snippetsSettingEachCheckboxSize = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n\n`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\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### Conditional\n\nexport const snippetsConditional = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\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 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### Conditional dynamic\n\nexport const snippetsConditionalDynamic = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\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 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\n\n### Validation\n\nexport const snippetsValidation = [\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: `{shortCode}`,\n },\n {\n language: \"Javascript\",\n snippet: `{shortCode}`,\n },\n ],\n },\n },\n];\n\n\n \n \n \n \n\n\n### Indeterminate\n\nexport const snippetsIndeterminate = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\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 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 \n \n \n\n", "path": "/components/checkbox/code", - "date": "2024-05-31", + "date": "2024-05-02", "title": "Checkbox", "status": "BETA", "subTitle": "Use checkboxes as part of a form, in dialogs and in control areas such as filters or settings.", @@ -1410,10 +1410,10 @@ ], "meta": { "relativePath": "components/checkboxes/code.mdx", - "createdAt": "2024-05-31T10:44:10.877Z", - "lastModified": "2024-05-31T10:44:10.877Z", - "size": 18061, - "formattedSize": "17.6 KB" + "createdAt": "2024-05-21T09:12:11.363Z", + "lastModified": "2024-05-21T09:12:11.363Z", + "size": 18161, + "formattedSize": "17.7 KB" } }, { @@ -1481,9 +1481,9 @@ }, { "id": "components__chips__codex", - "contents": "\nimport { IcChip } from \"@ukic/react\";\n\n## Component demo\n\nexport const snippetsDefault = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n \n \n \n\n\n \n \n \n`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: ` console.log(ev)}>\n \n \n \n\n\n \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 \n \n \n \n\n\n## Chip details\n\n\n\n## Variants\n\n### Outline\n\nexport const snippetsOutline = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n \n \n \n`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\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### Dismissible\n\nexport const snippetsDismissible = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n \n \n \n\n`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: ` console.log(ev)}>\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)}>\n \n \n \n \n\n\n### Disabled\n\nexport const snippetsDisabled = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\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 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 \n \n \n \n\n", + "contents": "\nimport { IcChip } from \"@ukic/react\";\n\n## Component demo\n\nexport const snippetsDefault = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n \n \n \n\n\n \n \n \n`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: ` console.log(ev)}>\n \n \n \n\n\n \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 \n \n \n \n\n\n## Chip details\n\n\n\n## Variants\n\n### Outline\n\nexport const snippetsOutline = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n \n \n \n`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\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### Dismissible\n\nexport const snippetsDismissible = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n \n \n \n\n`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: ` console.log(ev)}>\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)}>\n \n \n \n \n\n\n### Disabled\n\nexport const snippetsDisabled = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\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 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 \n \n \n \n\n", "path": "/components/chip/code", - "date": "2024-05-31", + "date": "2024-05-02", "title": "Chip", "status": "BETA", "subTitle": "Chips are used to filter and present data.", @@ -1504,10 +1504,10 @@ ], "meta": { "relativePath": "components/chips/code.mdx", - "createdAt": "2024-05-31T10:44:10.933Z", - "lastModified": "2024-05-31T10:44:10.933Z", - "size": 10141, - "formattedSize": "9.9 KB" + "createdAt": "2024-05-21T09:12:11.363Z", + "lastModified": "2024-05-21T09:12:11.363Z", + "size": 10205, + "formattedSize": "10.0 KB" } }, { @@ -1575,9 +1575,9 @@ }, { "id": "components__classification-banner__codex", - "contents": "\nimport { IcClassificationBanner } from \"@ukic/react\";\n\nexport const snippets = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n\n\n\n`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\n\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## Component demo\n\n\n \n \n \n \n \n\n\n## Classification banner details\n\n\n\n## Variants\n\nexport const snippetsVariants = [\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### Up to, country and additional selectors\n\n\n \n\n", + "contents": "\nimport { IcClassificationBanner } from \"@ukic/react\";\n\nexport const snippets = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n\n\n\n`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\n\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## Component demo\n\n\n \n \n \n \n \n\n\n## Classification banner details\n\n\n\n## Variants\n\nexport const snippetsVariants = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n`,\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### Up to, country and additional selectors\n\n\n \n\n", "path": "/components/classification-banner/code", - "date": "2024-05-31", + "date": "2024-05-02", "title": "Classification banner", "status": "BETA", "subTitle": "Classification banners are used to show the data classification (also known as protective marking) of an app.", @@ -1598,10 +1598,10 @@ ], "meta": { "relativePath": "components/classification-banner/code.mdx", - "createdAt": "2024-05-31T10:44:10.869Z", - "lastModified": "2024-05-31T10:44:10.869Z", - "size": 3202, - "formattedSize": "3.1 KB" + "createdAt": "2024-05-21T09:12:11.367Z", + "lastModified": "2024-05-21T09:12:11.367Z", + "size": 3235, + "formattedSize": "3.2 KB" } }, { @@ -1669,9 +1669,9 @@ }, { "id": "components__data-entity__codex", - "contents": "\nimport {\n IcDataEntity,\n IcDataRow,\n IcLink,\n IcTypography,\n IcTextField,\n IcButton,\n IcStatusTag,\n} from \"@ukic/react\";\n\n## Component demo\n\nexport const snippets = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n \n \n Edit\n \n \n \n \n Edit\n \n \n \n \n Edit\n \n \n \n \n Edit\n \n \n \n \n VISA ending 5896\n \n \n Edit\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 Edit\n \n \n \n \n Edit\n \n \n \n \n Edit\n \n \n \n \n Edit\n \n \n \n \n VISA ending 5896\n \n \n Edit\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 e.preventDefault()} slot=\"end-component\">\n Edit\n \n \n \n e.preventDefault()} slot=\"end-component\">\n Edit\n \n \n \n e.preventDefault()} slot=\"end-component\">\n Edit\n \n \n \n e.preventDefault()} slot=\"end-component\">\n Edit\n \n \n \n \n VISA ending 5896\n \n e.preventDefault()} slot=\"end-component\">\n Edit\n \n \n \n \n \n \n \n \n \n \n\n\n## Data row details\n\n\n\n## Data entity details\n\n\n\n## Variants\n\n### With status tags\n\nexport const withStatusTags = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n \n \n \n \n \n \n \n \n \n \n \n VISA ending 5896\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 VISA ending 5896\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 VISA ending 5896\n \n \n \n \n\n\n### Size small\n\nexport const smallSnippet = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n 383 Coffee Drive\n
\n London\n
\n SW7 988\n
\n United Kingdom\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 383 Coffee Drive\n
\n London\n
\n SW7 988\n
\n United Kingdom\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 383 Coffee Drive\n
\n London\n
\n SW7 988\n
\n United Kingdom\n \n \n \n\n\n### Editable example\n\nexport const editableExample = [\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
\n \n Confirm\n \n \n Edit\n \n
`,\n long: `.btn-container {\n display: flex;\n gap: 16px;\n padding-top: 16px;\n }\n .parent-container {\n padding: 16px;\n }\n\n\n
\n {shortCode}\n
\n `,\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
\n {\n const textFields = document.querySelectorAll('ic-text-field');\n textFields.forEach((textField) => {\n textField.setAttribute('readonly', '');\n });\n }}\n >\n Confirm\n \n {\n const textFields = document.querySelectorAll('ic-text-field');\n textFields.forEach((textField) => {\n textField.removeAttribute('readonly');\n });\n }}\n variant=\"secondary\"\n >\n Edit\n \n
`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n btnContainer: {\n display: \"flex\",\n gap: \"16px\",\n paddingTop: \"16px\",\n },\n parentContainer: {\n padding: \"16px\",\n },\n});\nconst classes = useStyles();\nreturn ( \n
\n {shortCode}\n
\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n btnContainer: {\n display: \"flex\",\n gap: \"16px\",\n paddingTop: \"16px\",\n },\n parentContainer: {\n padding: \"16px\",\n },\n});\nconst classes = useStyles();\nreturn ( \n
\n {shortCode}\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 \n \n {\n const textFields = document.querySelectorAll(\"ic-text-field\");\n textFields.forEach((textField) => {\n textField.setAttribute(\"readonly\", \"\");\n });\n }}\n style={{\n marginRight: \"var(--ic-space-md)\",\n marginTop: \"var(--ic-space-lg)\",\n }}\n >\n Confirm\n \n {\n const textFields = document.querySelectorAll(\"ic-text-field\");\n textFields.forEach((textField) => {\n textField.removeAttribute(\"readonly\");\n });\n }}\n variant=\"secondary\"\n style={{ marginTop: \"var(--ic-space-lg)\" }}\n >\n Edit\n \n\n", + "contents": "\nimport {\n IcDataEntity,\n IcDataRow,\n IcLink,\n IcTypography,\n IcTextField,\n IcButton,\n IcStatusTag,\n} from \"@ukic/react\";\n\n## Component demo\n\nexport const snippets = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n \n \n Edit\n \n \n \n \n Edit\n \n \n \n \n Edit\n \n \n \n \n Edit\n \n \n \n \n VISA ending 5896\n \n \n Edit\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 Edit\n \n \n \n \n Edit\n \n \n \n \n Edit\n \n \n \n \n Edit\n \n \n \n \n VISA ending 5896\n \n \n Edit\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 e.preventDefault()} slot=\"end-component\">\n Edit\n \n \n \n e.preventDefault()} slot=\"end-component\">\n Edit\n \n \n \n e.preventDefault()} slot=\"end-component\">\n Edit\n \n \n \n e.preventDefault()} slot=\"end-component\">\n Edit\n \n \n \n \n VISA ending 5896\n \n e.preventDefault()} slot=\"end-component\">\n Edit\n \n \n \n \n \n \n \n \n \n \n\n\n## Data row details\n\n\n\n## Data entity details\n\n\n\n## Variants\n\n### With status tags\n\nexport const withStatusTags = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n \n \n \n \n \n \n \n \n \n \n \n VISA ending 5896\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 VISA ending 5896\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 VISA ending 5896\n \n \n \n \n\n\n### Size small\n\nexport const smallSnippet = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n 383 Coffee Drive\n
\n London\n
\n SW7 988\n
\n United Kingdom\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 383 Coffee Drive\n
\n London\n
\n SW7 988\n
\n United Kingdom\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 383 Coffee Drive\n
\n London\n
\n SW7 988\n
\n United Kingdom\n \n \n \n\n\n### Editable example\n\nexport const editableExample = [\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\n Confirm\n\n\n Edit\n`,\n long: `{shortCode}\n `,\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 {\n const textFields = document.querySelectorAll('ic-text-field');\n textFields.forEach((textField) => {\n textField.setAttribute('readonly', '');\n })\n }}\n style={{\n marginRight: \"var(--ic-space-md)\",\n marginTop: \"var(--ic-space-lg)\",\n }}\n>\n Confirm\n\n {\n const textFields = document.querySelectorAll('ic-text-field');\n textFields.forEach((textField) => {\n textField.removeAttribute('readonly');\n })\n }}\n variant=\"secondary\"\n style={{ marginTop: \"var(--ic-space-lg)\" }}\n>\n Edit\n`,\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 \n \n \n \n \n \n \n \n \n \n \n {\n const textFields = document.querySelectorAll(\"ic-text-field\");\n textFields.forEach((textField) => {\n textField.setAttribute(\"readonly\", \"\");\n });\n }}\n style={{\n marginRight: \"var(--ic-space-md)\",\n marginTop: \"var(--ic-space-lg)\",\n }}\n >\n Confirm\n \n {\n const textFields = document.querySelectorAll(\"ic-text-field\");\n textFields.forEach((textField) => {\n textField.removeAttribute(\"readonly\");\n });\n }}\n variant=\"secondary\"\n style={{ marginTop: \"var(--ic-space-lg)\" }}\n >\n Edit\n \n\n", "path": "/components/data-entity/code", - "date": "2024-05-31", + "date": "2024-05-02", "title": "Data entity", "status": "BETA", "subTitle": "The data entity component displays a group of related data in a consistent and easy to consume way.", @@ -1692,10 +1692,10 @@ ], "meta": { "relativePath": "components/data-entity/code.mdx", - "createdAt": "2024-05-31T10:44:10.825Z", - "lastModified": "2024-05-31T10:44:10.825Z", - "size": 17825, - "formattedSize": "17.4 KB" + "createdAt": "2024-05-21T09:12:11.367Z", + "lastModified": "2024-05-21T09:12:11.367Z", + "size": 17225, + "formattedSize": "16.8 KB" } }, { @@ -1732,7 +1732,7 @@ }, { "id": "components__data-table__codex", - "contents": "\nimport { IcDataTable, IcDataTableTitleBar } from \"@ukic/canary-react\";\nimport {\n IcEmptyState,\n IcButton,\n IcLink,\n SlottedSVG,\n IcTypography,\n} from \"@ukic/react\";\nimport { useRef } from \"react\";\nimport { mdiImage, mdiCakeVariantOutline } from \"@mdi/js\";\nimport {\n COLUMNS,\n DATA,\n LONG_COLUMNS,\n LONG_DATA,\n ROW_HEADER_COLUMNS,\n ROW_HEADER_DATA,\n COLUMN_OVERRIDES,\n ROW_OVERRIDES_DATA,\n CELL_OVERRIDES_DATA,\n COLUMNS_ELEMENTS,\n DATA_ELEMENTS,\n ICON_COLUMNS,\n ICON_DATA,\n} from \"./story-data\";\n\n## Component demo\n\nexport const snippetsDefault = [\n {\n technology: \"Web component\",\n snippets: {\n short: ``,\n long: `{shortCode}\n`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: ``,\n long: [\n {\n language: \"Typescript\",\n snippet: `const columns: IcDataTableColumnObject[] = [\n {\n key: \"firstName\",\n title: \"First name\",\n dataType: \"string\",\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n];\nconst data = [\n {\n firstName: \"Joe\",\n lastName: \"Bloggs\",\n age: 30,\n },\n {\n firstName: \"Sarah\",\n lastName: \"Smith\",\n age: 28,\n },\n {\n firstName: \"Mark\",\n lastName: \"Owens\",\n age: 45,\n },\n];\nreturn (\n {shortCode}\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const columns = [\n {\n key: \"firstName\",\n title: \"First name\",\n dataType: \"string\",\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n];\nconst data = [\n {\n firstName: \"Joe\",\n lastName: \"Bloggs\",\n age: 30,\n },\n {\n firstName: \"Sarah\",\n lastName: \"Smith\",\n age: 28,\n },\n {\n firstName: \"Mark\",\n lastName: \"Owens\",\n age: 45,\n },\n];\nreturn (\n {shortCode}\n)`,\n },\n ],\n },\n },\n];\n\n\n \n\n\n## Data table details\n\n\n\n## Variants\n\n### Embedded\n\nexport const snippetsEmbedded = [\n {\n technology: \"Web component\",\n snippets: {\n short: ``,\n long: `{shortCode}\n`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: ``,\n long: [\n {\n language: \"Typescript\",\n snippet: `const columns: IcDataTableColumnObject[] = [\n {\n key: \"firstName\",\n title: \"First name\",\n dataType: \"string\",\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n];\nconst data = [\n {\n firstName: \"Joe\",\n lastName: \"Bloggs\",\n age: 30,\n },\n {\n firstName: \"Sarah\",\n lastName: \"Smith\",\n age: 28,\n },\n {\n firstName: \"Mark\",\n lastName: \"Owens\",\n age: 45,\n },\n];\nreturn (\n {shortCode}\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const columns = [\n {\n key: \"firstName\",\n title: \"First name\",\n dataType: \"string\",\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n];\nconst data = [\n {\n firstName: \"Joe\",\n lastName: \"Bloggs\",\n age: 30,\n },\n {\n firstName: \"Sarah\",\n lastName: \"Smith\",\n age: 28,\n },\n {\n firstName: \"Mark\",\n lastName: \"Owens\",\n age: 45,\n },\n];\nreturn (\n {shortCode}\n)`,\n },\n ],\n },\n },\n];\n\n\n \n\n\n### Dense\n\nexport const snippetsDense = [\n {\n technology: \"Web component\",\n snippets: {\n short: ``,\n long: `{shortCode}\n`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: ``,\n long: [\n {\n language: \"Typescript\",\n snippet: `const columns: IcDataTableColumnObject[] = [\n {\n key: \"firstName\",\n title: \"First name\",\n dataType: \"string\",\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n];\nconst data = [\n {\n firstName: \"Joe\",\n lastName: \"Bloggs\",\n age: 30,\n },\n {\n firstName: \"Sarah\",\n lastName: \"Smith\",\n age: 28,\n },\n {\n firstName: \"Mark\",\n lastName: \"Owens\",\n age: 45,\n },\n];\nreturn (\n {shortCode}\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const columns = [\n {\n key: \"firstName\",\n title: \"First name\",\n dataType: \"string\",\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n];\nconst data = [\n {\n firstName: \"Joe\",\n lastName: \"Bloggs\",\n age: 30,\n },\n {\n firstName: \"Sarah\",\n lastName: \"Smith\",\n age: 28,\n },\n {\n firstName: \"Mark\",\n lastName: \"Owens\",\n age: 45,\n },\n];\nreturn (\n {shortCode}\n)`,\n },\n ],\n },\n },\n];\n\n\n \n\n\n### Spacious\n\nexport const snippetsSpacious = [\n {\n technology: \"Web component\",\n snippets: {\n short: ``,\n long: `{shortCode}\n`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: ``,\n long: [\n {\n language: \"Typescript\",\n snippet: `const columns: IcDataTableColumnObject[] = [\n {\n key: \"firstName\",\n title: \"First name\",\n dataType: \"string\",\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n];\nconst data = [\n {\n firstName: \"Joe\",\n lastName: \"Bloggs\",\n age: 30,\n },\n {\n firstName: \"Sarah\",\n lastName: \"Smith\",\n age: 28,\n },\n {\n firstName: \"Mark\",\n lastName: \"Owens\",\n age: 45,\n },\n];\nreturn (\n {shortCode}\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const columns = [\n {\n key: \"firstName\",\n title: \"First name\",\n dataType: \"string\",\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n];\nconst data = [\n {\n firstName: \"Joe\",\n lastName: \"Bloggs\",\n age: 30,\n },\n {\n firstName: \"Sarah\",\n lastName: \"Smith\",\n age: 28,\n },\n {\n firstName: \"Mark\",\n lastName: \"Owens\",\n age: 45,\n },\n];\nreturn (\n {shortCode}\n)`,\n },\n ],\n },\n },\n];\n\n\n \n\n\n### Sticky column headers\n\nexport const snippetsStickyColumnHeaders = [\n {\n technology: \"Web component\",\n snippets: {\n short: ``,\n long: `ic-data-table {\n height: 150px;\n }\n\n\n {shortCode}\n `,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: ``,\n long: [\n {\n language: \"Typescript\",\n snippet: ` const dataTableEl = useRef(null);\nconst stickHeader = (sticky: boolean) => {\n dataTableEl.current.stickyColumnHeaders = sticky;\n};\nconst long_columns: IcDataTableColumnObject[] = [\n {\n key: \"employeeNumber\",\n title: \"Employee number\",\n dataType: \"number\",\n columnAlignment: { horizontal: \"left\" },\n },\n {\n key: \"name\",\n title: \"Name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n];\nconst long_data = [\n {\n employeeNumber: 1,\n name: \"Joe Bloggs\",\n age: 30,\n },\n {\n employeeNumber: 2,\n name: \"Sarah Jones\",\n age: 28,\n },\n {\n employeeNumber: 3,\n name: \"Mark Owens\",\n age: 45,\n },\n {\n employeeNumber: 4,\n name: \"Naomi Thomas\",\n age: 32,\n },\n {\n employeeNumber: 5,\n name: \"Luke Ashford\",\n age: 18,\n },\n {\n employeeNumber: 6,\n name: \"Dave Smith\",\n age: 33,\n },\n {\n employeeNumber: 7,\n name: \"Amy Fox\",\n age: 27,\n },\n {\n employeeNumber: 8,\n name: \"Mary Cooper\",\n age: 31,\n },\n {\n employeeNumber: 9,\n name: \"Alice Cole\",\n age: 38,\n },\n {\n employeeNumber: 10,\n name: \"Ben Fields\",\n age: 40,\n },\n {\n employeeNumber: 11,\n name: \"Pete Norton\",\n age: 32,\n },\n {\n employeeNumber: 12,\n name: \"Ashley Langford\",\n age: 29,\n },\n {\n employeeNumber: 13,\n name: \"Michael Hall\",\n age: 35,\n },\n {\n employeeNumber: 14,\n name: \"David Frank\",\n age: 28,\n },\n {\n employeeNumber: 15,\n name: \"Mary Lincoln\",\n age: 23,\n },\n {\n employeeNumber: 16,\n name: \"Will Barns\",\n age: 36,\n },\n {\n employeeNumber: 17,\n name: \"Elizabeth Long\",\n age: 43,\n },\n {\n employeeNumber: 18,\n name: \"Keith Jones\",\n age: 37,\n },\n {\n employeeNumber: 19,\n name: \"Olivia Brown\",\n age: 19,\n },\n {\n employeeNumber: 20,\n name: \"Tim Green\",\n age: 50,\n },\n];\nconst useStyles = createUseStyles({\n dataTable: {\n height: \"300px\",\n },\n});\nconst classes = useStyles();\nreturn (\n <>\n {shortCode}\n stickHeader(true)}>Stick Header\n stickHeader(false)}>Unstick Header\n \n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const dataTableEl = useRef(null);\nconst stickHeader = (sticky) => {\n dataTableEl.current.stickyColumnHeaders = sticky;\n};\nconst long_columns = [\n {\n key: \"employeeNumber\",\n title: \"Employee number\",\n dataType: \"number\",\n columnAlignment: { horizontal: \"left\" },\n },\n {\n key: \"name\",\n title: \"Name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n];\nconst long_data = [\n {\n employeeNumber: 1,\n name: \"Joe Bloggs\",\n age: 30,\n },\n {\n employeeNumber: 2,\n name: \"Sarah Jones\",\n age: 28,\n },\n {\n employeeNumber: 3,\n name: \"Mark Owens\",\n age: 45,\n },\n {\n employeeNumber: 4,\n name: \"Naomi Thomas\",\n age: 32,\n },\n {\n employeeNumber: 5,\n name: \"Luke Ashford\",\n age: 18,\n },\n {\n employeeNumber: 6,\n name: \"Dave Smith\",\n age: 33,\n },\n {\n employeeNumber: 7,\n name: \"Amy Fox\",\n age: 27,\n },\n {\n employeeNumber: 8,\n name: \"Mary Cooper\",\n age: 31,\n },\n {\n employeeNumber: 9,\n name: \"Alice Cole\",\n age: 38,\n },\n {\n employeeNumber: 10,\n name: \"Ben Fields\",\n age: 40,\n },\n {\n employeeNumber: 11,\n name: \"Pete Norton\",\n age: 32,\n },\n {\n employeeNumber: 12,\n name: \"Ashley Langford\",\n age: 29,\n },\n {\n employeeNumber: 13,\n name: \"Michael Hall\",\n age: 35,\n },\n {\n employeeNumber: 14,\n name: \"David Frank\",\n age: 28,\n },\n {\n employeeNumber: 15,\n name: \"Mary Lincoln\",\n age: 23,\n },\n {\n employeeNumber: 16,\n name: \"Will Barns\",\n age: 36,\n },\n {\n employeeNumber: 17,\n name: \"Elizabeth Long\",\n age: 43,\n },\n {\n employeeNumber: 18,\n name: \"Keith Jones\",\n age: 37,\n },\n {\n employeeNumber: 19,\n name: \"Olivia Brown\",\n age: 19,\n },\n {\n employeeNumber: 20,\n name: \"Tim Green\",\n age: 50,\n },\n];\nconst useStyles = createUseStyles({\n dataTable: {\n height: \"300px\",\n },\n});\nconst classes = useStyles();\nreturn (\n <>\n {shortCode}\n stickHeader(true)}>Stick Header\n stickHeader(false)}>Unstick Header\n \n)`,\n },\n ],\n },\n },\n];\n\nexport const StickyColumnHeaders = () => {\n const dataTableEl = useRef(null);\n const stickHeader = (sticky) => {\n dataTableEl.current.stickyColumnHeaders = sticky;\n };\n return (\n <>\n \n stickHeader(true)}>Stick Header\n stickHeader(false)}>Unstick Header\n \n );\n};\n\n\n \n\n\n### Row headers\n\nexport const snippetsRowHeaders = [\n {\n technology: \"Web component\",\n snippets: {\n short: ``,\n long: `{shortCode}\n`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: ``,\n long: [\n {\n language: \"Typescript\",\n snippet: `const columns: IcDataTableColumnObject[] = [\n {\n key: \"firstName\",\n title: \"First name\",\n // dataType types: \"string\" | \"number\" | \"address\" | \"element\" | \"date\";\n dataType: \"string\",\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n];\nconst data = [\n {\n firstName: \"Joe\",\n lastName: \"Bloggs\",\n age: 30,\n },\n {\n firstName: \"Sarah\",\n lastName: \"Smith\",\n age: 28,\n },\n {\n firstName: \"Mark\",\n lastName: \"Owens\",\n age: 45,\n },\n];\nreturn (\n {shortCode}\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const columns = [\n {\n key: \"firstName\",\n title: \"First name\",\n // dataType types: \"string\" | \"number\" | \"address\" | \"element\" | \"date\";\n dataType: \"string\",\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n];\nconst data = [\n {\n firstName: \"Joe\",\n lastName: \"Bloggs\",\n age: 30,\n },\n {\n firstName: \"Sarah\",\n lastName: \"Smith\",\n age: 28,\n },\n {\n firstName: \"Mark\",\n lastName: \"Owens\",\n age: 45,\n },\n];\nreturn (\n {shortCode}\n)`,\n },\n ],\n },\n },\n];\n\n\n \n\n\n### Sortable\n\nexport const snippetsSortable = [\n {\n technology: \"Web component\",\n snippets: {\n short: ``,\n long: `{shortCode}\n`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: ``,\n long: [\n {\n language: \"Typescript\",\n snippet: `const columns: IcDataTableColumnObject[] = [\n {\n key: \"firstName\",\n title: \"First name\",\n // dataType types: \"string\" | \"number\" | \"address\" | \"element\" | \"date\";\n dataType: \"string\",\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n];\nconst data = [\n {\n firstName: \"Joe\",\n lastName: \"Bloggs\",\n age: 30,\n },\n {\n firstName: \"Sarah\",\n lastName: \"Smith\",\n age: 28,\n },\n {\n firstName: \"Mark\",\n lastName: \"Owens\",\n age: 45,\n },\n];\nreturn (\n {shortCode}\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const columns = [\n {\n key: \"firstName\",\n title: \"First name\",\n // dataType types: \"string\" | \"number\" | \"address\" | \"element\" | \"date\";\n dataType: \"string\",\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n];\nconst data = [\n {\n firstName: \"Joe\",\n lastName: \"Bloggs\",\n age: 30,\n },\n {\n firstName: \"Sarah\",\n lastName: \"Smith\",\n age: 28,\n },\n {\n firstName: \"Mark\",\n lastName: \"Owens\",\n age: 45,\n },\n];\nreturn (\n {shortCode}\n)`,\n },\n ],\n },\n },\n];\n\n\n \n\n\n### Sort options\n\nexport const snippetsSortOptions = [\n {\n technology: \"Web component\",\n snippets: {\n short: ``,\n long: `{shortCode}\n`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: ``,\n long: [\n {\n language: \"Typescript\",\n snippet: `const columns: IcDataTableColumnObject[] = [\n {\n key: \"firstName\",\n title: \"First name\",\n // dataType types: \"string\" | \"number\" | \"address\" | \"element\" | \"date\";\n dataType: \"string\",\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n];\nconst data = [\n {\n firstName: \"Joe\",\n lastName: \"Bloggs\",\n age: 30,\n },\n {\n firstName: \"Sarah\",\n lastName: \"Smith\",\n age: 28,\n },\n {\n firstName: \"Mark\",\n lastName: \"Owens\",\n age: 45,\n },\n];\nreturn (\n {shortCode}\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const columns: IcDataTableColumnObject[] = [\n {\n key: \"firstName\",\n title: \"First name\",\n // dataType types: \"string\" | \"number\" | \"address\" | \"element\" | \"date\";\n dataType: \"string\",\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n];\nconst data = [\n {\n firstName: \"Joe\",\n lastName: \"Bloggs\",\n age: 30,\n },\n {\n firstName: \"Sarah\",\n lastName: \"Smith\",\n age: 28,\n },\n {\n firstName: \"Mark\",\n lastName: \"Owens\",\n age: 45,\n },\n];\nreturn (\n {shortCode}\n)`,\n },\n ],\n },\n },\n];\n\n\n \n\n\n### Pagination\n\nexport const snippetsPagination = [\n {\n technology: \"Web component\",\n snippets: {\n short: ``,\n long: `{shortCode}\n`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: ``,\n long: [\n {\n language: \"Typescript\",\n snippet: `const long_columns: IcDataTableColumnObject[] = [\n {\n key: \"employeeNumber\",\n title: \"Employee number\",\n dataType: \"number\",\n columnAlignment: { horizontal: \"left\" },\n },\n {\n key: \"name\",\n title: \"Name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n];\nconst long_data = [\n {\n employeeNumber: 1,\n name: \"Joe Bloggs\",\n age: 30,\n },\n {\n employeeNumber: 2,\n name: \"Sarah Jones\",\n age: 28,\n },\n {\n employeeNumber: 3,\n name: \"Mark Owens\",\n age: 45,\n },\n {\n employeeNumber: 4,\n name: \"Naomi Thomas\",\n age: 32,\n },\n {\n employeeNumber: 5,\n name: \"Luke Ashford\",\n age: 18,\n },\n {\n employeeNumber: 6,\n name: \"Dave Smith\",\n age: 33,\n },\n {\n employeeNumber: 7,\n name: \"Amy Fox\",\n age: 27,\n },\n {\n employeeNumber: 8,\n name: \"Mary Cooper\",\n age: 31,\n },\n {\n employeeNumber: 9,\n name: \"Alice Cole\",\n age: 38,\n },\n {\n employeeNumber: 10,\n name: \"Ben Fields\",\n age: 40,\n },\n {\n employeeNumber: 11,\n name: \"Pete Norton\",\n age: 32,\n },\n {\n employeeNumber: 12,\n name: \"Ashley Langford\",\n age: 29,\n },\n {\n employeeNumber: 13,\n name: \"Michael Hall\",\n age: 35,\n },\n {\n employeeNumber: 14,\n name: \"David Frank\",\n age: 28,\n },\n {\n employeeNumber: 15,\n name: \"Mary Lincoln\",\n age: 23,\n },\n {\n employeeNumber: 16,\n name: \"Will Barns\",\n age: 36,\n },\n {\n employeeNumber: 17,\n name: \"Elizabeth Long\",\n age: 43,\n },\n {\n employeeNumber: 18,\n name: \"Keith Jones\",\n age: 37,\n },\n {\n employeeNumber: 19,\n name: \"Olivia Brown\",\n age: 19,\n },\n {\n employeeNumber: 20,\n name: \"Tim Green\",\n age: 50,\n },\n];\nreturn (\n {shortCode}\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const long_columns = [\n {\n key: \"employeeNumber\",\n title: \"Employee number\",\n dataType: \"number\",\n columnAlignment: { horizontal: \"left\" },\n },\n {\n key: \"name\",\n title: \"Name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n];\nconst long_data = [\n {\n employeeNumber: 1,\n name: \"Joe Bloggs\",\n age: 30,\n },\n {\n employeeNumber: 2,\n name: \"Sarah Jones\",\n age: 28,\n },\n {\n employeeNumber: 3,\n name: \"Mark Owens\",\n age: 45,\n },\n {\n employeeNumber: 4,\n name: \"Naomi Thomas\",\n age: 32,\n },\n {\n employeeNumber: 5,\n name: \"Luke Ashford\",\n age: 18,\n },\n {\n employeeNumber: 6,\n name: \"Dave Smith\",\n age: 33,\n },\n {\n employeeNumber: 7,\n name: \"Amy Fox\",\n age: 27,\n },\n {\n employeeNumber: 8,\n name: \"Mary Cooper\",\n age: 31,\n },\n {\n employeeNumber: 9,\n name: \"Alice Cole\",\n age: 38,\n },\n {\n employeeNumber: 10,\n name: \"Ben Fields\",\n age: 40,\n },\n {\n employeeNumber: 11,\n name: \"Pete Norton\",\n age: 32,\n },\n {\n employeeNumber: 12,\n name: \"Ashley Langford\",\n age: 29,\n },\n {\n employeeNumber: 13,\n name: \"Michael Hall\",\n age: 35,\n },\n {\n employeeNumber: 14,\n name: \"David Frank\",\n age: 28,\n },\n {\n employeeNumber: 15,\n name: \"Mary Lincoln\",\n age: 23,\n },\n {\n employeeNumber: 16,\n name: \"Will Barns\",\n age: 36,\n },\n {\n employeeNumber: 17,\n name: \"Elizabeth Long\",\n age: 43,\n },\n {\n employeeNumber: 18,\n name: \"Keith Jones\",\n age: 37,\n },\n {\n employeeNumber: 19,\n name: \"Olivia Brown\",\n age: 19,\n },\n {\n employeeNumber: 20,\n name: \"Tim Green\",\n age: 50,\n },\n];\nreturn (\n {shortCode}\n)`,\n },\n ],\n },\n },\n];\n\n\n \n\n\n### Column overrides\n\nexport const snippetsColumnOverrides = [\n {\n technology: \"Web component\",\n snippets: {\n short: ``,\n long: `{shortCode}\n`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: ``,\n long: [\n {\n language: \"Typescript\",\n snippet: `const columns: IcDataTableColumnObject[] = [\n {\n key: \"firstName\",\n title: \"First name\",\n dataType: \"string\",\n columnAlignment: { horizontal: 'center', vertical: 'middle'},\n emphasis: 'high',\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n];\nconst data = [\n {\n firstName: \"Joe\",\n lastName: \"Bloggs\",\n age: 30,\n },\n {\n firstName: \"Sarah\",\n lastName: \"Smith\",\n age: 28,\n },\n {\n firstName: \"Mark\",\n lastName: \"Owens\",\n age: 45,\n },\n];\nreturn (\n {shortCode}\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const columns = [\n {\n key: \"firstName\",\n title: \"First name\",\n dataType: \"string\",\n columnAlignment: { horizontal: 'center', vertical: 'middle'},\n emphasis: 'high',\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n];\nconst data = [\n {\n firstName: \"Joe\",\n lastName: \"Bloggs\",\n age: 30,\n },\n {\n firstName: \"Sarah\",\n lastName: \"Smith\",\n age: 28,\n },\n {\n firstName: \"Mark\",\n lastName: \"Owens\",\n age: 45,\n },\n];\nreturn (\n {shortCode}\n)`,\n },\n ],\n },\n },\n];\n\n\n \n\n\n### Row overrides\n\nexport const snippetsRowOverrides = [\n {\n technology: \"Web component\",\n snippets: {\n short: ``,\n long: `{shortCode}\n`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: ``,\n long: [\n {\n language: \"Typescript\",\n snippet: `const columns: IcDataTableColumnObject[] = [\n {\n key: \"header\",\n title: \"Job Title\",\n dataType: \"string\",\n },\n {\n key: \"firstName\",\n title: \"First name\",\n dataType: \"string\",\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n];\nconst data = [\n {\n header: { title: \"Employee\" },\n firstName: \"Joe\",\n lastName: \"Bloggs\",\n age: 30,\n },\n {\n header: { title: \"Employee\" },\n firstName: \"Sarah\",\n lastName: \"Smith\",\n age: 28,\n },\n {\n header: { title: \"Manager\" },\n firstName: \"Mark\",\n lastName: \"Owens\",\n age: 45,\n },\n];\nreturn (\n {shortCode}\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const columns = [\n {\n key: \"header\",\n title: \"Job Title\",\n dataType: \"string\",\n },\n {\n key: \"firstName\",\n title: \"First name\",\n dataType: \"string\",\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n];\nconst data = [\n {\n header: { title: \"Employee\" },\n firstName: \"Joe\",\n lastName: \"Bloggs\",\n age: 30,\n },\n {\n header: { title: \"Employee\" },\n firstName: \"Sarah\",\n lastName: \"Smith\",\n age: 28,\n },\n {\n header: { title: \"Manager\" },\n firstName: \"Mark\",\n lastName: \"Owens\",\n age: 45,\n },\n];\nreturn (\n {shortCode}\n)`,\n },\n ],\n },\n },\n];\n\n\n \n\n\n### Cell overrides\n\nexport const snippetsCellOverrides = [\n {\n technology: \"Web component\",\n snippets: {\n short: ``,\n long: `{shortCode}\n`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: ``,\n long: [\n {\n language: \"Typescript\",\n snippet: `const columns: IcDataTableColumnObject[] = [\n {\n key: \"firstName\",\n title: \"First name\",\n // dataType types: \"string\" | \"number\" | \"address\" | \"element\" | \"date\";\n dataType: \"string\",\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n];\nconst data = [\n {\n firstName: {\n data: \"Joe\",\n cellAlignment: { horizontal: \"center\", vertical: \"middle\" },\n emphasis: \"high\",\n },\n lastName: \"Bloggs\",\n age: 30,\n },\n {\n firstName: \"Sarah\",\n lastName: \"Smith\",\n age: 28,\n },\n {\n firstName: \"Mark\",\n lastName: \"Owens\",\n age: 45,\n },\n];\nreturn (\n {shortCode}\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const columns = [\n {\n key: \"firstName\",\n title: \"First name\",\n // dataType types: \"string\" | \"number\" | \"address\" | \"element\" | \"date\";\n dataType: \"string\",\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n];\nconst data = [\n {\n firstName: {\n data: \"Joe\",\n cellAlignment: { horizontal: \"center\", vertical: \"middle\" },\n emphasis: \"high\",\n },\n lastName: \"Bloggs\",\n age: 30,\n },\n {\n firstName: \"Sarah\",\n lastName: \"Smith\",\n age: 28,\n },\n {\n firstName: \"Mark\",\n lastName: \"Owens\",\n age: 45,\n },\n];\nreturn (\n {shortCode}\n)`,\n },\n ],\n },\n },\n];\n\n\n \n\n\n### Default Empty State\n\nexport const snippetsDefaultEmptyState = [\n {\n technology: \"Web component\",\n snippets: {\n short: ``,\n long: `{shortCode}\n`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: ``,\n long: [\n {\n language: \"Typescript\",\n snippet: `const columns: IcDataTableColumnObject[] = [\n {\n key: \"firstName\",\n title: \"First name\",\n // dataType types: \"string\" | \"number\" | \"address\" | \"element\" | \"date\";\n dataType: \"string\",\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n];\nreturn (\n {shortCode}\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const columns = [\n {\n key: \"firstName\",\n title: \"First name\",\n // dataType types: \"string\" | \"number\" | \"address\" | \"element\" | \"date\";\n dataType: \"string\",\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n];\nreturn (\n {shortCode}\n)`,\n },\n ],\n },\n },\n];\n\n\n \n\n\n### Slotted Empty State\n\nexport const snippetsSlottedEmptyState = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n \n Retry\n \n`,\n long: `{shortCode}\n`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\n \n Retry\n \n`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const columns: IcDataTableColumnObject[] = [\n {\n key: \"firstName\",\n title: \"First name\",\n // dataType types: \"string\" | \"number\" | \"address\" | \"element\" | \"date\";\n dataType: \"string\",\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n];\nreturn (\n {shortCode}\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const columns = [\n {\n key: \"firstName\",\n title: \"First name\",\n // dataType types: \"string\" | \"number\" | \"address\" | \"element\" | \"date\";\n dataType: \"string\",\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n];\nreturn (\n {shortCode}\n)`,\n },\n ],\n },\n },\n];\n\n\n \n \n Retry\n \n \n\n\n### Loading state\n\nexport const snippetsLoadingState = [\n {\n technology: \"Web component\",\n snippets: {\n short: ``,\n long: `{shortCode}\n`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: ``,\n long: [\n {\n language: \"Typescript\",\n snippet: `const columns: IcDataTableColumnObject[] = [\n {\n key: \"firstName\",\n title: \"First name\",\n // dataType types: \"string\" | \"number\" | \"address\" | \"element\" | \"date\";\n dataType: \"string\",\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n];\nconst data = [\n {\n firstName: \"Joe\",\n lastName: \"Bloggs\",\n age: 30,\n },\n {\n firstName: \"Sarah\",\n lastName: \"Smith\",\n age: 28,\n },\n {\n firstName: \"Mark\",\n lastName: \"Owens\",\n age: 45,\n },\n];\nreturn (\n {shortCode}\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const columns = [\n {\n key: \"firstName\",\n title: \"First name\",\n // dataType types: \"string\" | \"number\" | \"address\" | \"element\" | \"date\";\n dataType: \"string\",\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n];\nconst data = [\n {\n firstName: \"Joe\",\n lastName: \"Bloggs\",\n age: 30,\n },\n {\n firstName: \"Sarah\",\n lastName: \"Smith\",\n age: 28,\n },\n {\n firstName: \"Mark\",\n lastName: \"Owens\",\n age: 45,\n },\n];\nreturn (\n {shortCode}\n)`,\n },\n ],\n },\n },\n];\n\n\n \n\n\n### Updating state\n\nexport const snippetsUpdatingState = [\n {\n technology: \"Web component\",\n snippets: {\n short: ``,\n long: `{shortCode}\n`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: ``,\n long: [\n {\n language: \"Typescript\",\n snippet: `const columns: IcDataTableColumnObject[] = [\n {\n key: \"firstName\",\n title: \"First name\",\n // dataType types: \"string\" | \"number\" | \"address\" | \"element\" | \"date\";\n dataType: \"string\",\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n];\nconst data = [\n {\n firstName: \"Joe\",\n lastName: \"Bloggs\",\n age: 30,\n },\n {\n firstName: \"Sarah\",\n lastName: \"Smith\",\n age: 28,\n },\n {\n firstName: \"Mark\",\n lastName: \"Owens\",\n age: 45,\n },\n];\nreturn (\n {shortCode}\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const columns = [\n {\n key: \"firstName\",\n title: \"First name\",\n // dataType types: \"string\" | \"number\" | \"address\" | \"element\" | \"date\";\n dataType: \"string\",\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n];\nconst data = [\n {\n firstName: \"Joe\",\n lastName: \"Bloggs\",\n age: 30,\n },\n {\n firstName: \"Sarah\",\n lastName: \"Smith\",\n age: 28,\n },\n {\n firstName: \"Mark\",\n lastName: \"Owens\",\n age: 45,\n },\n];\nreturn (\n {shortCode}\n)`,\n },\n ],\n },\n },\n];\n\n\n \n\n\n### Links and Elements in data\n\nexport const snippetsElements = [\n {\n technology: \"Web component\",\n snippets: {\n short: ``,\n long: `{shortCode}\n`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\n {data.map((_, index) => (\n _.closest('Delete')}\n >\n Delete\n \n ))}\n`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const columns: IcDataTableColumnObject[] = [\n {\n key: \"firstName\",\n title: \"First name\",\n dataType: \"string\",\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n {\n key: \"actions\",\n title: \"Actions\",\n dataType: \"element\",\n columnAlignment: { horizontal: \"center\" },\n },\n];\nconst data = [\n {\n firstName: {\n data: \"Joe\",\n href: \"#\",\n },\n lastName: \"Bloggs\",\n age: 30,\n actions: \\`Delete\\`,\n },\n {\n firstName: 'Sarah',\n lastName: 'Smith',\n age: 28,\n actions: \\`Delete\\`,\n },\n {\n firstName: 'Mark',\n lastName: 'Owens',\n age: 45,\n actions: \\`Delete\\`,\n },\n];\nreturn (\n {shortCode}\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const columns = [\n {\n key: \"firstName\",\n title: \"First name\",\n dataType: \"string\",\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n {\n key: \"actions\",\n title: \"Actions\",\n dataType: \"element\",\n columnAlignment: { horizontal: \"center\" },\n },\n];\nconst data = [\n {\n firstName: {\n data: \"Joe\",\n href: \"#\",\n },\n lastName: \"Bloggs\",\n age: 30,\n actions: \\`Delete\\`,\n },\n {\n firstName: 'Sarah',\n lastName: 'Smith',\n age: 28,\n actions: \\`Delete\\`,\n },\n {\n firstName: 'Mark',\n lastName: 'Owens',\n age: 45,\n actions: \\`Delete\\`,\n },\n];\nreturn (\n {shortCode}\n)`,\n },\n ],\n },\n },\n];\n\n\n \n {DATA_ELEMENTS.map((_, index) => (\n console.log(\"Delete\")}\n >\n Delete\n \n ))}\n \n\n\n### Custom icons\n\nexport const snippetsCustomIcons = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n \n \n \n`,\n long: `{shortCode}\n`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\n \n`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const accountSVG = \\`\\`;\nconst columns: IcDataTableColumnObject[] = [\n {\n key: \"firstName\",\n title: \"First name\",\n dataType: \"string\",\n cellAlignment: \"right\",\n columnAlignment: { horizontal: \"right\", vertical: \"middle\" },\n icon: {\n icon: \\`\\`,\n onAllCells: true,\n hideOnHeader: true,\n },\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n cellAlignment: \"center\",\n columnAlignment: { horizontal: \"center\", vertical: \"bottom\" },\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n];\nconst data = [\n {\n firstName: {\n data: \"Joe\",\n icon: accountSVG,\n },\n lastName: \"Bloggs\",\n age: 30,\n },\n {\n firstName: \"Sarah\",\n lastName: \"Smith\",\n age: 28,\n },\n {\n firstName: {\n data: \"Mark\",\n icon: accountSVG,\n },\n lastName: \"Owens\",\n age: 45,\n },\n];\nreturn (\n {shortCode}\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const accountSVG = \\`\\`;\nconst columns = [\n {\n key: \"firstName\",\n title: \"First name\",\n dataType: \"string\",\n cellAlignment: \"right\",\n columnAlignment: { horizontal: \"right\", vertical: \"middle\" },\n icon: {\n icon: \\`\\`,\n onAllCells: true,\n hideOnHeader: true,\n },\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n cellAlignment: \"center\",\n columnAlignment: { horizontal: \"center\", vertical: \"bottom\" },\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n];\nconst data = [\n {\n firstName: {\n data: \"Joe\",\n icon: accountSVG,\n },\n lastName: \"Bloggs\",\n age: 30,\n },\n {\n firstName: \"Sarah\",\n lastName: \"Smith\",\n age: 28,\n },\n {\n firstName: {\n data: \"Mark\",\n icon: accountSVG,\n },\n lastName: \"Owens\",\n age: 45,\n },\n];\nreturn (\n {shortCode}\n)`,\n },\n ],\n },\n },\n];\n\n\n \n \n \n\n\n### Custom row heights\n\nexport const snippetsRowHeights = [\n {\n technology: \"Web component\",\n snippets: {\n short: ``,\n long: `{shortCode}\n`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: ``,\n long: [\n {\n language: \"Typescript\",\n snippet: `const columns: IcDataTableColumnObject[] = [\n {\n key: \"firstName\",\n title: \"First name\",\n dataType: \"string\",\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n];\nconst data = [\n {\n firstName: \"Joe\",\n lastName: \"Bloggs\",\n age: 30,\n },\n {\n firstName: \"Sarah\",\n lastName: \"Smith\",\n age: 28,\n },\n {\n firstName: \"Mark\",\n lastName: \"Owens\",\n age: 45,\n },\n];\nconst rowHeightFunc = ({ firstName, lastName }) => firstName === \"Joe\" || lastName === \"Owens\" ? 200 : null;\nreturn (\n {shortCode}\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const columns = [\n {\n key: \"firstName\",\n title: \"First name\",\n dataType: \"string\",\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n];\nconst data = [\n {\n firstName: \"Joe\",\n lastName: \"Bloggs\",\n age: 30,\n },\n {\n firstName: \"Sarah\",\n lastName: \"Smith\",\n age: 28,\n },\n {\n firstName: \"Mark\",\n lastName: \"Owens\",\n age: 45,\n },\n];\nconst rowHeightFunc = ({ firstName, lastName }) => firstName === \"Joe\" || lastName === \"Owens\" ? 200 : null;\nreturn (\n {shortCode}\n)`,\n },\n ],\n },\n },\n];\n\nexport const rowHeightFunc = ({ firstName, lastName }) =>\n firstName === \"Joe\" || lastName === \"Owens\" ? 200 : null;\n\n\n \n\n\n### Custom title bar\n\nexport const snippetsTitleBar = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n \n Primary\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n

\n This is some text and{' '}\n this is an inline link within the text.\n

\n \n \n`,\n long: `{shortCode}\n`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\n \n Primary\n \n \n \n \n \n \n \n \n \n \n

\n This is some text and{' '}\n this is an inline link within the text.\n

\n \n \n`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const columns: IcDataTableColumnObject[] = [\n {\n key: \"firstName\",\n title: \"First name\",\n dataType: \"string\",\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n];\nconst data = [\n {\n firstName: \"Joe\",\n lastName: \"Bloggs\",\n age: 30,\n },\n {\n firstName: \"Sarah\",\n lastName: \"Smith\",\n age: 28,\n },\n {\n firstName: \"Mark\",\n lastName: \"Owens\",\n age: 45,\n },\n];\nreturn (\n {shortCode}\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const columns = [\n {\n key: \"firstName\",\n title: \"First name\",\n dataType: \"string\",\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n];\nconst data = [\n {\n firstName: \"Joe\",\n lastName: \"Bloggs\",\n age: 30,\n },\n {\n firstName: \"Sarah\",\n lastName: \"Smith\",\n age: 28,\n },\n {\n firstName: \"Mark\",\n lastName: \"Owens\",\n age: 45,\n },\n];\nreturn (\n {shortCode}\n)`,\n },\n ],\n },\n },\n];\n\n\n \n \n Primary\n \n \n \n \n \n \n \n \n \n \n

\n This is some text and this is an inline link{\" \"}\n within the text.\n

\n \n \n \n\n", + "contents": "\nimport { IcDataTable } from \"@ukic/canary-react\";\nimport { IcEmptyState, IcButton } from \"@ukic/react\";\nimport { useRef } from \"react\";\nimport {\n COLUMNS,\n DATA,\n LONG_COLUMNS,\n LONG_DATA,\n ROW_HEADER_COLUMNS,\n ROW_HEADER_DATA,\n COLUMN_OVERRIDES,\n ROW_OVERRIDES_DATA,\n CELL_OVERRIDES_DATA,\n COLUMNS_ELEMENTS,\n DATA_ELEMENTS,\n} from \"./story-data\";\n\n## Component demo\n\nexport const snippetsDefault = [\n {\n technology: \"Web component\",\n snippets: {\n short: ``,\n long: `{shortCode}\n`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: ``,\n long: [\n {\n language: \"Typescript\",\n snippet: `const columns: IcDataTableColumnObject[] = [\n {\n key: \"firstName\",\n title: \"First name\",\n dataType: \"string\",\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n];\nconst data = [\n {\n firstName: \"Joe\",\n lastName: \"Bloggs\",\n age: 30,\n },\n {\n firstName: \"Sarah\",\n lastName: \"Smith\",\n age: 28,\n },\n {\n firstName: \"Mark\",\n lastName: \"Owens\",\n age: 45,\n },\n];\nreturn (\n {shortCode}\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const columns = [\n {\n key: \"firstName\",\n title: \"First name\",\n dataType: \"string\",\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n];\nconst data = [\n {\n firstName: \"Joe\",\n lastName: \"Bloggs\",\n age: 30,\n },\n {\n firstName: \"Sarah\",\n lastName: \"Smith\",\n age: 28,\n },\n {\n firstName: \"Mark\",\n lastName: \"Owens\",\n age: 45,\n },\n];\nreturn (\n {shortCode}\n)`,\n },\n ],\n },\n },\n];\n\n\n \n\n\n## Data table details\n\n\n\n## Variants\n\n### Embedded\n\nexport const snippetsEmbedded = [\n {\n technology: \"Web component\",\n snippets: {\n short: ``,\n long: `{shortCode}\n`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: ``,\n long: [\n {\n language: \"Typescript\",\n snippet: `const columns: IcDataTableColumnObject[] = [\n {\n key: \"firstName\",\n title: \"First name\",\n dataType: \"string\",\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n];\nconst data = [\n {\n firstName: \"Joe\",\n lastName: \"Bloggs\",\n age: 30,\n },\n {\n firstName: \"Sarah\",\n lastName: \"Smith\",\n age: 28,\n },\n {\n firstName: \"Mark\",\n lastName: \"Owens\",\n age: 45,\n },\n];\nreturn (\n {shortCode}\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const columns = [\n {\n key: \"firstName\",\n title: \"First name\",\n dataType: \"string\",\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n];\nconst data = [\n {\n firstName: \"Joe\",\n lastName: \"Bloggs\",\n age: 30,\n },\n {\n firstName: \"Sarah\",\n lastName: \"Smith\",\n age: 28,\n },\n {\n firstName: \"Mark\",\n lastName: \"Owens\",\n age: 45,\n },\n];\nreturn (\n {shortCode}\n)`,\n },\n ],\n },\n },\n];\n\n\n \n\n\n### Dense\n\nexport const snippetsDense = [\n {\n technology: \"Web component\",\n snippets: {\n short: ``,\n long: `{shortCode}\n`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: ``,\n long: [\n {\n language: \"Typescript\",\n snippet: `const columns: IcDataTableColumnObject[] = [\n {\n key: \"firstName\",\n title: \"First name\",\n dataType: \"string\",\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n];\nconst data = [\n {\n firstName: \"Joe\",\n lastName: \"Bloggs\",\n age: 30,\n },\n {\n firstName: \"Sarah\",\n lastName: \"Smith\",\n age: 28,\n },\n {\n firstName: \"Mark\",\n lastName: \"Owens\",\n age: 45,\n },\n];\nreturn (\n {shortCode}\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const columns = [\n {\n key: \"firstName\",\n title: \"First name\",\n dataType: \"string\",\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n];\nconst data = [\n {\n firstName: \"Joe\",\n lastName: \"Bloggs\",\n age: 30,\n },\n {\n firstName: \"Sarah\",\n lastName: \"Smith\",\n age: 28,\n },\n {\n firstName: \"Mark\",\n lastName: \"Owens\",\n age: 45,\n },\n];\nreturn (\n {shortCode}\n)`,\n },\n ],\n },\n },\n];\n\n\n \n\n\n### Spacious\n\nexport const snippetsSpacious = [\n {\n technology: \"Web component\",\n snippets: {\n short: ``,\n long: `{shortCode}\n`,\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### Sticky column headers\n\nexport const snippetsStickyColumnHeaders = [\n {\n technology: \"Web component\",\n snippets: {\n short: ``,\n long: `ic-data-table {\n height: 150px;\n }\n\n\n {shortCode}\n `,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: ``,\n long: [\n {\n language: \"Typescript\",\n snippet: ` const dataTableEl = useRef(null);\nconst stickHeader = (sticky: boolean) => {\n dataTableEl.current.stickyColumnHeaders = sticky;\n};\nconst long_columns: IcDataTableColumnObject[] = [\n {\n key: \"employeeNumber\",\n title: \"Employee number\",\n dataType: \"number\",\n columnAlignment: { horizontal: \"left\" },\n },\n {\n key: \"name\",\n title: \"Name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n];\nconst long_data = [\n {\n employeeNumber: 1,\n name: \"Joe Bloggs\",\n age: 30,\n },\n {\n employeeNumber: 2,\n name: \"Sarah Jones\",\n age: 28,\n },\n {\n employeeNumber: 3,\n name: \"Mark Owens\",\n age: 45,\n },\n {\n employeeNumber: 4,\n name: \"Naomi Thomas\",\n age: 32,\n },\n {\n employeeNumber: 5,\n name: \"Luke Ashford\",\n age: 18,\n },\n {\n employeeNumber: 6,\n name: \"Dave Smith\",\n age: 33,\n },\n {\n employeeNumber: 7,\n name: \"Amy Fox\",\n age: 27,\n },\n {\n employeeNumber: 8,\n name: \"Mary Cooper\",\n age: 31,\n },\n {\n employeeNumber: 9,\n name: \"Alice Cole\",\n age: 38,\n },\n {\n employeeNumber: 10,\n name: \"Ben Fields\",\n age: 40,\n },\n {\n employeeNumber: 11,\n name: \"Pete Norton\",\n age: 32,\n },\n {\n employeeNumber: 12,\n name: \"Ashley Langford\",\n age: 29,\n },\n {\n employeeNumber: 13,\n name: \"Michael Hall\",\n age: 35,\n },\n {\n employeeNumber: 14,\n name: \"David Frank\",\n age: 28,\n },\n {\n employeeNumber: 15,\n name: \"Mary Lincoln\",\n age: 23,\n },\n {\n employeeNumber: 16,\n name: \"Will Barns\",\n age: 36,\n },\n {\n employeeNumber: 17,\n name: \"Elizabeth Long\",\n age: 43,\n },\n {\n employeeNumber: 18,\n name: \"Keith Jones\",\n age: 37,\n },\n {\n employeeNumber: 19,\n name: \"Olivia Brown\",\n age: 19,\n },\n {\n employeeNumber: 20,\n name: \"Tim Green\",\n age: 50,\n },\n];\nconst useStyles = createUseStyles({\n dataTable: {\n height: \"300px\",\n },\n});\nconst classes = useStyles();\nreturn (\n <>\n {shortCode}\n stickHeader(true)}>Stick Header\n stickHeader(false)}>Unstick Header\n \n);`,\n },\n {\n language: \"Javascript\",\n snippet: `const dataTableEl = useRef(null);\nconst stickHeader = (sticky) => {\n dataTableEl.current.stickyColumnHeaders = sticky;\n};\nconst long_columns = [\n {\n key: \"employeeNumber\",\n title: \"Employee number\",\n dataType: \"number\",\n columnAlignment: { horizontal: \"left\" },\n },\n {\n key: \"name\",\n title: \"Name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n];\nconst long_data = [\n {\n employeeNumber: 1,\n name: \"Joe Bloggs\",\n age: 30,\n },\n {\n employeeNumber: 2,\n name: \"Sarah Jones\",\n age: 28,\n },\n {\n employeeNumber: 3,\n name: \"Mark Owens\",\n age: 45,\n },\n {\n employeeNumber: 4,\n name: \"Naomi Thomas\",\n age: 32,\n },\n {\n employeeNumber: 5,\n name: \"Luke Ashford\",\n age: 18,\n },\n {\n employeeNumber: 6,\n name: \"Dave Smith\",\n age: 33,\n },\n {\n employeeNumber: 7,\n name: \"Amy Fox\",\n age: 27,\n },\n {\n employeeNumber: 8,\n name: \"Mary Cooper\",\n age: 31,\n },\n {\n employeeNumber: 9,\n name: \"Alice Cole\",\n age: 38,\n },\n {\n employeeNumber: 10,\n name: \"Ben Fields\",\n age: 40,\n },\n {\n employeeNumber: 11,\n name: \"Pete Norton\",\n age: 32,\n },\n {\n employeeNumber: 12,\n name: \"Ashley Langford\",\n age: 29,\n },\n {\n employeeNumber: 13,\n name: \"Michael Hall\",\n age: 35,\n },\n {\n employeeNumber: 14,\n name: \"David Frank\",\n age: 28,\n },\n {\n employeeNumber: 15,\n name: \"Mary Lincoln\",\n age: 23,\n },\n {\n employeeNumber: 16,\n name: \"Will Barns\",\n age: 36,\n },\n {\n employeeNumber: 17,\n name: \"Elizabeth Long\",\n age: 43,\n },\n {\n employeeNumber: 18,\n name: \"Keith Jones\",\n age: 37,\n },\n {\n employeeNumber: 19,\n name: \"Olivia Brown\",\n age: 19,\n },\n {\n employeeNumber: 20,\n name: \"Tim Green\",\n age: 50,\n },\n];\nconst useStyles = createUseStyles({\n dataTable: {\n height: \"300px\",\n },\n});\nconst classes = useStyles();\nreturn (\n <>\n {shortCode}\n stickHeader(true)}>Stick Header\n stickHeader(false)}>Unstick Header\n \n);`,\n },\n ],\n },\n },\n];\n\nexport const StickyColumnHeaders = () => {\n const dataTableEl = useRef(null);\n const stickHeader = (sticky) => {\n dataTableEl.current.stickyColumnHeaders = sticky;\n };\n return (\n <>\n \n stickHeader(true)}>Stick Header\n stickHeader(false)}>Unstick Header\n \n );\n};\n\n\n \n\n\n### Row headers\n\nexport const snippetsRowHeaders = [\n {\n technology: \"Web component\",\n snippets: {\n short: ``,\n long: `{shortCode}\n `,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: ``,\n long: [\n {\n language: \"Typescript\",\n snippet: `const columns: IcDataTableColumnObject[] = [\n {\n key: \"firstName\",\n title: \"First name\",\n // dataType types: \"string\" | \"number\" | \"address\" | \"element\" | \"date\";\n dataType: \"string\",\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n];\nconst data = [\n {\n firstName: \"Joe\",\n lastName: \"Bloggs\",\n age: 30,\n },\n {\n firstName: \"Sarah\",\n lastName: \"Smith\",\n age: 28,\n },\n {\n firstName: \"Mark\",\n lastName: \"Owens\",\n age: 45,\n },\n];\nreturn (\n {shortCode}\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const columns = [\n {\n key: \"firstName\",\n title: \"First name\",\n // dataType types: \"string\" | \"number\" | \"address\" | \"element\" | \"date\";\n dataType: \"string\",\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n];\nconst data = [\n {\n firstName: \"Joe\",\n lastName: \"Bloggs\",\n age: 30,\n },\n {\n firstName: \"Sarah\",\n lastName: \"Smith\",\n age: 28,\n },\n {\n firstName: \"Mark\",\n lastName: \"Owens\",\n age: 45,\n },\n];\nreturn (\n {shortCode}\n)`,\n },\n ],\n },\n },\n];\n\n\n \n\n\n### Sortable\n\nexport const snippetsSortable = [\n {\n technology: \"Web component\",\n snippets: {\n short: ``,\n long: `{shortCode}\n`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: ``,\n long: [\n {\n language: \"Typescript\",\n snippet: `const columns: IcDataTableColumnObject[] = [\n {\n key: \"firstName\",\n title: \"First name\",\n // dataType types: \"string\" | \"number\" | \"address\" | \"element\" | \"date\";\n dataType: \"string\",\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n];\nconst data = [\n {\n firstName: \"Joe\",\n lastName: \"Bloggs\",\n age: 30,\n },\n {\n firstName: \"Sarah\",\n lastName: \"Smith\",\n age: 28,\n },\n {\n firstName: \"Mark\",\n lastName: \"Owens\",\n age: 45,\n },\n];\nreturn (\n {shortCode}\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const columns: IcDataTableColumnObject[] = [\n {\n key: \"firstName\",\n title: \"First name\",\n // dataType types: \"string\" | \"number\" | \"address\" | \"element\" | \"date\";\n dataType: \"string\",\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n];\nconst data = [\n {\n firstName: \"Joe\",\n lastName: \"Bloggs\",\n age: 30,\n },\n {\n firstName: \"Sarah\",\n lastName: \"Smith\",\n age: 28,\n },\n {\n firstName: \"Mark\",\n lastName: \"Owens\",\n age: 45,\n },\n];\nreturn (\n {shortCode}\n)`,\n },\n ],\n },\n },\n];\n\n\n \n\n\n### Sort options\n\nexport const snippetsSortOptions = [\n {\n technology: \"Web component\",\n snippets: {\n short: ``,\n long: `{shortCode}\n`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: ``,\n long: [\n {\n language: \"Typescript\",\n snippet: `const columns: IcDataTableColumnObject[] = [\n {\n key: \"firstName\",\n title: \"First name\",\n // dataType types: \"string\" | \"number\" | \"address\" | \"element\" | \"date\";\n dataType: \"string\",\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n];\nconst data = [\n {\n firstName: \"Joe\",\n lastName: \"Bloggs\",\n age: 30,\n },\n {\n firstName: \"Sarah\",\n lastName: \"Smith\",\n age: 28,\n },\n {\n firstName: \"Mark\",\n lastName: \"Owens\",\n age: 45,\n },\n];\nreturn (\n {shortCode}\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const columns: IcDataTableColumnObject[] = [\n {\n key: \"firstName\",\n title: \"First name\",\n // dataType types: \"string\" | \"number\" | \"address\" | \"element\" | \"date\";\n dataType: \"string\",\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n];\nconst data = [\n {\n firstName: \"Joe\",\n lastName: \"Bloggs\",\n age: 30,\n },\n {\n firstName: \"Sarah\",\n lastName: \"Smith\",\n age: 28,\n },\n {\n firstName: \"Mark\",\n lastName: \"Owens\",\n age: 45,\n },\n];\nreturn (\n {shortCode}\n)`,\n },\n ],\n },\n },\n];\n\n\n \n\n\n### Pagination\n\nexport const snippetsPagination = [\n {\n technology: \"Web component\",\n snippets: {\n short: ``,\n long: `{shortCode}\n`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: ``,\n long: [\n {\n language: \"Typescript\",\n snippet: `const long_columns: IcDataTableColumnObject[] = [\n {\n key: \"employeeNumber\",\n title: \"Employee number\",\n dataType: \"number\",\n columnAlignment: { horizontal: \"left\" },\n },\n {\n key: \"name\",\n title: \"Name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n];\nconst long_data = [\n {\n employeeNumber: 1,\n name: \"Joe Bloggs\",\n age: 30,\n },\n {\n employeeNumber: 2,\n name: \"Sarah Jones\",\n age: 28,\n },\n {\n employeeNumber: 3,\n name: \"Mark Owens\",\n age: 45,\n },\n {\n employeeNumber: 4,\n name: \"Naomi Thomas\",\n age: 32,\n },\n {\n employeeNumber: 5,\n name: \"Luke Ashford\",\n age: 18,\n },\n {\n employeeNumber: 6,\n name: \"Dave Smith\",\n age: 33,\n },\n {\n employeeNumber: 7,\n name: \"Amy Fox\",\n age: 27,\n },\n {\n employeeNumber: 8,\n name: \"Mary Cooper\",\n age: 31,\n },\n {\n employeeNumber: 9,\n name: \"Alice Cole\",\n age: 38,\n },\n {\n employeeNumber: 10,\n name: \"Ben Fields\",\n age: 40,\n },\n {\n employeeNumber: 11,\n name: \"Pete Norton\",\n age: 32,\n },\n {\n employeeNumber: 12,\n name: \"Ashley Langford\",\n age: 29,\n },\n {\n employeeNumber: 13,\n name: \"Michael Hall\",\n age: 35,\n },\n {\n employeeNumber: 14,\n name: \"David Frank\",\n age: 28,\n },\n {\n employeeNumber: 15,\n name: \"Mary Lincoln\",\n age: 23,\n },\n {\n employeeNumber: 16,\n name: \"Will Barns\",\n age: 36,\n },\n {\n employeeNumber: 17,\n name: \"Elizabeth Long\",\n age: 43,\n },\n {\n employeeNumber: 18,\n name: \"Keith Jones\",\n age: 37,\n },\n {\n employeeNumber: 19,\n name: \"Olivia Brown\",\n age: 19,\n },\n {\n employeeNumber: 20,\n name: \"Tim Green\",\n age: 50,\n },\n];\nreturn (\n {shortCode}\n);`,\n },\n {\n language: \"Javascript\",\n snippet: `const long_columns = [\n {\n key: \"employeeNumber\",\n title: \"Employee number\",\n dataType: \"number\",\n columnAlignment: { horizontal: \"left\" },\n },\n {\n key: \"name\",\n title: \"Name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n];\nconst long_data = [\n {\n employeeNumber: 1,\n name: \"Joe Bloggs\",\n age: 30,\n },\n {\n employeeNumber: 2,\n name: \"Sarah Jones\",\n age: 28,\n },\n {\n employeeNumber: 3,\n name: \"Mark Owens\",\n age: 45,\n },\n {\n employeeNumber: 4,\n name: \"Naomi Thomas\",\n age: 32,\n },\n {\n employeeNumber: 5,\n name: \"Luke Ashford\",\n age: 18,\n },\n {\n employeeNumber: 6,\n name: \"Dave Smith\",\n age: 33,\n },\n {\n employeeNumber: 7,\n name: \"Amy Fox\",\n age: 27,\n },\n {\n employeeNumber: 8,\n name: \"Mary Cooper\",\n age: 31,\n },\n {\n employeeNumber: 9,\n name: \"Alice Cole\",\n age: 38,\n },\n {\n employeeNumber: 10,\n name: \"Ben Fields\",\n age: 40,\n },\n {\n employeeNumber: 11,\n name: \"Pete Norton\",\n age: 32,\n },\n {\n employeeNumber: 12,\n name: \"Ashley Langford\",\n age: 29,\n },\n {\n employeeNumber: 13,\n name: \"Michael Hall\",\n age: 35,\n },\n {\n employeeNumber: 14,\n name: \"David Frank\",\n age: 28,\n },\n {\n employeeNumber: 15,\n name: \"Mary Lincoln\",\n age: 23,\n },\n {\n employeeNumber: 16,\n name: \"Will Barns\",\n age: 36,\n },\n {\n employeeNumber: 17,\n name: \"Elizabeth Long\",\n age: 43,\n },\n {\n employeeNumber: 18,\n name: \"Keith Jones\",\n age: 37,\n },\n {\n employeeNumber: 19,\n name: \"Olivia Brown\",\n age: 19,\n },\n {\n employeeNumber: 20,\n name: \"Tim Green\",\n age: 50,\n },\n];\nreturn (\n {shortCode}\n);`,\n },\n ],\n },\n },\n];\n\n\n \n\n\n### Column overrides\n\nexport const snippetsColumnOverrides = [\n {\n technology: \"Web component\",\n snippets: {\n short: ``,\n long: `{shortCode}\n`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: ``,\n long: [\n {\n language: \"Typescript\",\n snippet: `const columns: IcDataTableColumnObject[] = [\n {\n key: \"firstName\",\n title: \"First name\",\n dataType: \"string\",\n columnAlignment: { horizontal: 'center', vertical: 'middle'},\n emphasis: 'high',\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n];\nconst data = [\n {\n firstName: \"Joe\",\n lastName: \"Bloggs\",\n age: 30,\n },\n {\n firstName: \"Sarah\",\n lastName: \"Smith\",\n age: 28,\n },\n {\n firstName: \"Mark\",\n lastName: \"Owens\",\n age: 45,\n },\n];\nreturn (\n {shortCode}\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const columns = [\n {\n key: \"firstName\",\n title: \"First name\",\n dataType: \"string\",\n columnAlignment: { horizontal: 'center', vertical: 'middle'},\n emphasis: 'high',\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n];\nconst data = [\n {\n firstName: \"Joe\",\n lastName: \"Bloggs\",\n age: 30,\n },\n {\n firstName: \"Sarah\",\n lastName: \"Smith\",\n age: 28,\n },\n {\n firstName: \"Mark\",\n lastName: \"Owens\",\n age: 45,\n },\n];\nreturn (\n {shortCode}\n)`,\n },\n ],\n },\n },\n];\n\n\n \n\n\n### Row overrides\n\nexport const snippetsRowOverrides = [\n {\n technology: \"Web component\",\n snippets: {\n short: ``,\n long: `{shortCode}\n`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: ``,\n long: [\n {\n language: \"Typescript\",\n snippet: `const columns: IcDataTableColumnObject[] = [\n {\n key: \"header\",\n title: \"Job Title\",\n dataType: \"string\",\n },\n {\n key: \"firstName\",\n title: \"First name\",\n dataType: \"string\",\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n];\nconst data = [\n {\n header: { title: \"Employee\" },\n firstName: \"Joe\",\n lastName: \"Bloggs\",\n age: 30,\n },\n {\n header: { title: \"Employee\" },\n firstName: \"Sarah\",\n lastName: \"Smith\",\n age: 28,\n },\n {\n header: { title: \"Manager\" },\n firstName: \"Mark\",\n lastName: \"Owens\",\n age: 45,\n },\n];\nreturn (\n {shortCode}\n);`,\n },\n {\n language: \"Javascript\",\n snippet: `const columns = [\n {\n key: \"header\",\n title: \"Job Title\",\n dataType: \"string\",\n },\n {\n key: \"firstName\",\n title: \"First name\",\n dataType: \"string\",\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n];\nconst data = [\n {\n header: { title: \"Employee\" },\n firstName: \"Joe\",\n lastName: \"Bloggs\",\n age: 30,\n },\n {\n header: { title: \"Employee\" },\n firstName: \"Sarah\",\n lastName: \"Smith\",\n age: 28,\n },\n {\n header: { title: \"Manager\" },\n firstName: \"Mark\",\n lastName: \"Owens\",\n age: 45,\n },\n];\nreturn (\n {shortCode}\n);`,\n },\n ],\n },\n },\n];\n\n\n \n\n\n### Cell overrides\n\nexport const snippetsCellOverrides = [\n {\n technology: \"Web component\",\n snippets: {\n short: ``,\n long: `{shortCode}\n `,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: ``,\n long: [\n {\n language: \"Typescript\",\n snippet: `const columns: IcDataTableColumnObject[] = [\n {\n key: \"firstName\",\n title: \"First name\",\n // dataType types: \"string\" | \"number\" | \"address\" | \"element\" | \"date\";\n dataType: \"string\",\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n];\nconst data = [\n {\n firstName: {\n data: \"Joe\",\n cellAlignment: { horizontal: \"center\", vertical: \"middle\" },\n emphasis: \"high\",\n },\n lastName: \"Bloggs\",\n age: 30,\n },\n {\n firstName: \"Sarah\",\n lastName: \"Smith\",\n age: 28,\n },\n {\n firstName: \"Mark\",\n lastName: \"Owens\",\n age: 45,\n },\n];\nreturn (\n {shortCode}\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const data = [\n{\nfirstName: {\ndata: \"Joe\",\ncellAlignment: { horizontal: \"center\", vertical: \"middle\" },\nemphasis: \"high\",\n},\nlastName: \"Bloggs\",\nage: 30,\n},\n];\nreturn (\n{shortCode}\n)`,\n },\n ],\n },\n },\n];\n\n\n \n\n\n### Default Empty State\n\nexport const snippetsDefaultEmptyState = [\n {\n technology: \"Web component\",\n snippets: {\n short: ``,\n long: `{shortCode}\n `,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: ``,\n long: [\n {\n language: \"Typescript\",\n snippet: `const columns: IcDataTableColumnObject[] = [\n {\n key: \"firstName\",\n title: \"First name\",\n // dataType types: \"string\" | \"number\" | \"address\" | \"element\" | \"date\";\n dataType: \"string\",\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n];\nreturn (\n {shortCode}\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const columns = [\n {\n key: \"firstName\",\n title: \"First name\",\n // dataType types: \"string\" | \"number\" | \"address\" | \"element\" | \"date\";\n dataType: \"string\",\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n];\nreturn (\n {shortCode}\n)`,\n },\n ],\n },\n },\n];\n\n\n \n\n\n### Slotted Empty State\n\nexport const snippetsSlottedEmptyState = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n \n Retry\n \n`,\n long: `{shortCode}\n `,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\n \n Retry\n \n`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const columns: IcDataTableColumnObject[] = [\n {\n key: \"firstName\",\n title: \"First name\",\n // dataType types: \"string\" | \"number\" | \"address\" | \"element\" | \"date\";\n dataType: \"string\",\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n];\nreturn (\n {shortCode}\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const columns = [\n {\n key: \"firstName\",\n title: \"First name\",\n // dataType types: \"string\" | \"number\" | \"address\" | \"element\" | \"date\";\n dataType: \"string\",\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n];\nreturn (\n {shortCode}\n)`,\n },\n ],\n },\n },\n];\n\n\n \n \n Retry\n \n \n\n\n### Loading state\n\nexport const snippetsLoadingState = [\n {\n technology: \"Web component\",\n snippets: {\n short: ``,\n long: `{shortCode}\n `,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: ``,\n long: [\n {\n language: \"Typescript\",\n snippet: `const columns: IcDataTableColumnObject[] = [\n {\n key: \"firstName\",\n title: \"First name\",\n // dataType types: \"string\" | \"number\" | \"address\" | \"element\" | \"date\";\n dataType: \"string\",\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n];\nconst data = [\n {\n firstName: \"Joe\",\n lastName: \"Bloggs\",\n age: 30,\n },\n {\n firstName: \"Sarah\",\n lastName: \"Smith\",\n age: 28,\n },\n {\n firstName: \"Mark\",\n lastName: \"Owens\",\n age: 45,\n },\n];\nreturn (\n {shortCode}\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const columns = [\n {\n key: \"firstName\",\n title: \"First name\",\n // dataType types: \"string\" | \"number\" | \"address\" | \"element\" | \"date\";\n dataType: \"string\",\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n];\nconst data = [\n {\n firstName: \"Joe\",\n lastName: \"Bloggs\",\n age: 30,\n },\n {\n firstName: \"Sarah\",\n lastName: \"Smith\",\n age: 28,\n },\n {\n firstName: \"Mark\",\n lastName: \"Owens\",\n age: 45,\n },\n];\nreturn (\n {shortCode}\n)`,\n },\n ],\n },\n },\n];\n\n\n \n\n\n### Updating state\n\nexport const snippetsUpdatingState = [\n {\n technology: \"Web component\",\n snippets: {\n short: ``,\n long: `{shortCode}\n `,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: ``,\n long: [\n {\n language: \"Typescript\",\n snippet: `const columns: IcDataTableColumnObject[] = [\n {\n key: \"firstName\",\n title: \"First name\",\n // dataType types: \"string\" | \"number\" | \"address\" | \"element\" | \"date\";\n dataType: \"string\",\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n];\nconst data = [\n {\n firstName: \"Joe\",\n lastName: \"Bloggs\",\n age: 30,\n },\n {\n firstName: \"Sarah\",\n lastName: \"Smith\",\n age: 28,\n },\n {\n firstName: \"Mark\",\n lastName: \"Owens\",\n age: 45,\n },\n];\nreturn (\n {shortCode}\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const columns = [\n {\n key: \"firstName\",\n title: \"First name\",\n // dataType types: \"string\" | \"number\" | \"address\" | \"element\" | \"date\";\n dataType: \"string\",\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n];\nconst data = [\n {\n firstName: \"Joe\",\n lastName: \"Bloggs\",\n age: 30,\n },\n {\n firstName: \"Sarah\",\n lastName: \"Smith\",\n age: 28,\n },\n {\n firstName: \"Mark\",\n lastName: \"Owens\",\n age: 45,\n },\n];\nreturn (\n {shortCode}\n)`,\n },\n ],\n },\n },\n];\n\n\n \n\n\n### Links and Elements in data\n\nexport const snippetsElements = [\n {\n technology: \"Web component\",\n snippets: {\n short: ``,\n long: `{shortCode}\n `,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\n {data.map((_, index) => (\n _.closest('Delete')}\n >\n Delete\n \n ))}\n `,\n long: [\n {\n language: \"Typescript\",\n snippet: `const columns: IcDataTableColumnObject[] = [\n {\n key: \"firstName\",\n title: \"First name\",\n dataType: \"string\",\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n {\n key: \"actions\",\n title: \"Actions\",\n dataType: \"element\",\n columnAlignment: { horizontal: \"center\" },\n },\n];\nconst data = [\n {\n firstName: {\n data: \"Joe\",\n href: \"#\",\n },\n lastName: \"Bloggs\",\n age: 30,\n actions: \\`Delete\\`,\n },\n {\n firstName: 'Sarah',\n lastName: 'Smith',\n age: 28,\n actions: \\`Delete\\`,\n },\n {\n firstName: 'Mark',\n lastName: 'Owens',\n age: 45,\n actions: \\`Delete\\`,\n },\n];\nreturn (\n {shortCode}\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const columns = [\n {\n key: \"firstName\",\n title: \"First name\",\n dataType: \"string\",\n },\n {\n key: \"lastName\",\n title: \"Last name\",\n dataType: \"string\",\n },\n {\n key: \"age\",\n title: \"Age\",\n dataType: \"number\",\n },\n {\n key: \"actions\",\n title: \"Actions\",\n dataType: \"element\",\n columnAlignment: { horizontal: \"center\" },\n },\n];\nconst data = [\n {\n firstName: {\n data: \"Joe\",\n href: \"#\",\n },\n lastName: \"Bloggs\",\n age: 30,\n actions: \\`Delete\\`,\n },\n {\n firstName: 'Sarah',\n lastName: 'Smith',\n age: 28,\n actions: \\`Delete\\`,\n },\n {\n firstName: 'Mark',\n lastName: 'Owens',\n age: 45,\n actions: \\`Delete\\`,\n },\n];\nreturn (\n {shortCode}\n)`,\n },\n ],\n },\n },\n];\n\n\n \n {DATA_ELEMENTS.map((_, index) => (\n console.log(\"Delete\")}\n >\n Delete\n \n ))}\n \n\n", "path": "/components/data-table/code", "date": "2024-05-31", "title": "Data table", @@ -1750,10 +1750,10 @@ ], "meta": { "relativePath": "components/data-table/code.mdx", - "createdAt": "2024-05-31T10:44:10.813Z", - "lastModified": "2024-05-31T10:44:10.813Z", - "size": 72257, - "formattedSize": "70.6 KB" + "createdAt": "2024-05-21T09:44:30.854Z", + "lastModified": "2024-05-21T09:44:30.854Z", + "size": 56066, + "formattedSize": "54.8 KB" } }, { @@ -1777,8 +1777,8 @@ ], "meta": { "relativePath": "components/data-table/guidance.mdx", - "createdAt": "2024-05-30T12:04:49.432Z", - "lastModified": "2024-05-30T12:04:49.432Z", + "createdAt": "2024-05-13T07:27:37.309Z", + "lastModified": "2024-05-13T07:27:37.309Z", "size": 1724, "formattedSize": "1.7 KB" } @@ -1807,8 +1807,8 @@ ], "meta": { "relativePath": "components/date-input/accessibility.mdx", - "createdAt": "2024-05-30T12:04:49.432Z", - "lastModified": "2024-05-30T12:04:49.432Z", + "createdAt": "2024-05-13T07:27:37.313Z", + "lastModified": "2024-05-13T07:27:37.313Z", "size": 3595, "formattedSize": "3.5 KB" } @@ -1837,8 +1837,8 @@ ], "meta": { "relativePath": "components/date-input/code.mdx", - "createdAt": "2024-05-31T10:44:10.861Z", - "lastModified": "2024-05-31T10:44:10.861Z", + "createdAt": "2024-05-21T09:12:11.367Z", + "lastModified": "2024-05-21T09:12:11.367Z", "size": 17222, "formattedSize": "16.8 KB" } @@ -1868,8 +1868,8 @@ ], "meta": { "relativePath": "components/date-input/guidance.mdx", - "createdAt": "2024-05-30T12:04:49.432Z", - "lastModified": "2024-05-30T12:04:49.432Z", + "createdAt": "2024-05-21T09:12:11.263Z", + "lastModified": "2024-05-21T09:12:11.263Z", "size": 8288, "formattedSize": "8.1 KB" } @@ -1898,15 +1898,15 @@ ], "meta": { "relativePath": "components/date-picker/accessibility.mdx", - "createdAt": "2024-05-30T12:04:49.436Z", - "lastModified": "2024-05-30T12:04:49.436Z", + "createdAt": "2024-05-13T07:27:37.333Z", + "lastModified": "2024-05-13T07:27:37.333Z", "size": 3244, "formattedSize": "3.2 KB" } }, { "id": "components__date-picker__codex", - "contents": "\nimport { IcDatePicker } from \"@ukic/canary-react\";\nimport { useState } from \"react\";\n\n## Component demo\n\nexport const snippets = [\n {\n technology: \"Web component\",\n snippets: {\n short: ``,\n long: `.parent-container {\n padding: 16px;\n }\n\n\n
\n {shortCode}\n
`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: ``,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n padding: \"16px\",\n },\n});\nconst classes = useStyles();\nreturn (\n
\n {shortCode}\n
\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n padding: \"16px\",\n },\n});\nconst classes = useStyles();\nreturn (\n
\n {shortCode}\n
\n)`,\n },\n ],\n },\n },\n];\n\n\n \n\n\n## Date picker details\n\n\n\n## Variants\n\n### Sizes\n\nSet the size of the date picker by using the `size` prop. This prop takes the values `small`, `default` or `large`. Depending on the chosen size, the prop will apply styling to increase or decrease the amount of spacing within the component.\n\nexport const sizes = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n\n`,\n long: `.parent-container {\n padding: 16px;\n }\n\n\n
\n {shortCode}\n
`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `IcDatePicker\n label=\"When would you like to collect your coffee?\"\n size=\"small\"\n/>\n\n`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"16px\",\n padding: \"16px\",\n },\n});\nconst classes = useStyles();\nreturn ( \n
\n {shortCode}\n
\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"16px\",\n padding: \"16px\",\n },\n});\nconst classes = useStyles();\nreturn ( \n
\n {shortCode}\n
\n)`,\n },\n ],\n },\n },\n];\n\n\n \n \n \n \n \n\n\n### Max width\n\nSet the size of the input field by using the `--input-width` CSS custom property. The picker will grow, but not exceed its maximum supported width.\n\nexport const maxWidth = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n\n`,\n long: `.parent-container {\n display: flex;\n flex-direction: column;\n gap: 16px;\n padding: 16px;\n }\n ic-date-picker {\n --input-width: 500px;\n }\n\n\n
\n {shortCode}\n
`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\n\n`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"16px\",\n padding: \"16px\",\n },\n datePicker: {\n \"--input-width\": \"500px\",\n },\n});\nconst classes = useStyles();\nreturn ( \n
\n {shortCode}\n
\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"16px\",\n padding: \"16px\",\n },\n datePicker: {\n \"--input-width\": \"500px\",\n },\n});\nconst classes = useStyles();\nreturn ( \n
\n {shortCode}\n
\n)`,\n },\n ],\n },\n },\n];\n\n\n \n \n \n \n \n\n\n### Disabled\n\nexport const disabled = [\n {\n technology: \"Web component\",\n snippets: {\n short: ``,\n long: `.parent-container {\n padding: 16px;\n }\n\n\n
\n {shortCode}\n
`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: ``,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n padding: \"16px\",\n },\n});\nconst classes = useStyles();\nreturn (\n
\n {shortCode}\n
\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n padding: \"16px\",\n },\n});\nconst classes = useStyles();\nreturn (\n
\n {shortCode}\n
\n)`,\n },\n ],\n },\n },\n];\n\n\n \n\n\n### Date formats\n\nThe `dateFormat` prop determines how dates are displayed. The supported formats are `DD/MM/YYYY`, `MM/DD/YYYY` or `YYYY/MM/DD`.\nThe default format is `DD/MM/YYYY`.\n\nexport const dateFormats = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n\n`,\n long: `.parent-container {\n display: flex;\n flex-direction: column;\n gap: 16px;\n padding: 16px;\n }\n ic-date-picker {\n --input-width: 500px;\n }\n\n\n
\n {shortCode}\n
`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\n\n`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"16px\",\n padding: \"16px\",\n },\n});\nconst classes = useStyles();\nreturn ( \n
\n {shortCode}\n
\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"16px\",\n padding: \"16px\",\n },\n});\nconst classes = useStyles();\nreturn ( \n
\n {shortCode}\n
\n)`,\n },\n ],\n },\n },\n];\n\n\n
\n \n \n \n
\n\n\n### Value\n\nThe `value` prop sets the date in the input field. The value can be in any format supported by the `dateFormat` prop, in ISO 8601 date string format (yyyy-mm-dd) or as a JavaScript Date object.\n\nexport const valueSnippet = [\n {\n technology: \"Web component\",\n snippets: {\n short: ``,\n long: `.parent-container {\n padding: 16px;\n }\n\n\n
\n {shortCode}\n
`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: ``,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n padding: \"16px\",\n },\n});\nconst classes = useStyles();\nreturn (\n
\n {shortCode}\n
\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n padding: \"16px\",\n },\n});\nconst classes = useStyles();\nreturn (\n
\n {shortCode}\n
\n)`,\n },\n ],\n },\n },\n];\n\n\n \n\n\n### Open at date\n\nIf no `value` is set, the `openAtDate` prop can be used to specify the date in view when the calendar view is opened. If not set to a value, the calendar will default to showing the current date.\n\nThe supported formats are the same as for the `value` prop.\n\nexport const openDate = [\n {\n technology: \"Web component\",\n snippets: {\n short: ``,\n long: `.parent-container {\n padding: 16px;\n }\n\n\n
\n {shortCode}\n
`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: ``,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n padding: \"16px\",\n },\n});\nconst classes = useStyles();\nreturn (\n
\n {shortCode}\n
\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n padding: \"16px\",\n },\n});\nconst classes = useStyles();\nreturn (\n
\n {shortCode}\n
\n)`,\n },\n ],\n },\n },\n];\n\n\n \n\n\n### Start of week\n\nThe first day of the week can be changed by setting the `startOfWeek` prop. This is a numeric value where 0 = Sunday, 1 = Monday, etc up to 6 = Saturday.\n\nexport const startWeek = [\n {\n technology: \"Web component\",\n snippets: {\n short: ``,\n long: `.parent-container {\n padding: 16px;\n }\n\n\n
\n {shortCode}\n
`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: ``,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n padding: \"16px\",\n },\n});\nconst classes = useStyles();\nreturn (\n
\n {shortCode}\n
\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n padding: \"16px\",\n },\n});\nconst classes = useStyles();\nreturn (\n
\n {shortCode}\n
\n)`,\n },\n ],\n },\n },\n];\n\n\n \n\n\n### Disable days of week\n\nSpecific days of the week can be disabled from selection by setting the `disableDays` prop. The value can be set as an array of numeric values where where 0 = Sunday, 1 = Monday, etc up to 6 = Saturday.\n\nexport const disabledDaysOfWeek = [0, 6];\n\nexport const disableDays = [\n {\n technology: \"Web component\",\n snippets: {\n short: ``,\n long: `.parent-container {\n padding: 16px;\n }\n\n\n
\n {shortCode}\n
\n `,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: ``,\n long: [\n {\n language: \"Typescript\",\n snippet: `const disabledDaysOfWeek = [0, 6]\nconst useStyles = createUseStyles({\n parentContainer: {\n padding: \"16px\",\n },\n});\nconst classes = useStyles();\nreturn (\n
\n {shortCode}\n
\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const disabledDaysOfWeek = [0, 6];\nconst useStyles = createUseStyles({\n parentContainer: {\n padding: \"16px\",\n },\n});\nconst classes = useStyles();\nreturn (\n
\n {shortCode}\n
\n)`,\n },\n ],\n },\n },\n];\n\n\n \n\n\n### Max and min\n\nThe `max` and `min` props can be used to limit the range of dates available for selection. Values can be in any format supported by the `dateFormat` prop, in ISO 8601 date string format (yyyy-mm-dd) or as a JavaScript Date object.\n\nexport const maxMin = [\n {\n technology: \"Web component\",\n snippets: {\n short: ``,\n long: `.parent-container {\n padding: 16px;\n }\n\n\n
\n {shortCode}\n
`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: ``,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n padding: \"16px\",\n },\n});\nconst classes = useStyles();\nreturn (\n
\n {shortCode}\n
\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n padding: \"16px\",\n },\n});\nconst classes = useStyles();\nreturn (\n
\n {shortCode}\n
\n)`,\n },\n ],\n },\n },\n];\n\n\n \n\n\n### Disable dates in past\n\nDates before today can be disabled with the `disablePast` prop.\n\nexport const disablePast = [\n {\n technology: \"Web component\",\n snippets: {\n short: ``,\n long: `.parent-container {\n padding: 16px;\n }\n\n\n
\n {shortCode}\n
`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: ``,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n padding: \"16px\",\n },\n});\nconst classes = useStyles();\nreturn (\n
\n {shortCode}\n
\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n padding: \"16px\",\n },\n});\nconst classes = useStyles();\nreturn (\n
\n {shortCode}\n
\n)`,\n },\n ],\n },\n },\n];\n\n\n \n\n\n### Disable dates in future\n\nDates after today can be disabled with the `disableFuture` prop.\n\nexport const disableFuture = [\n {\n technology: \"Web component\",\n snippets: {\n short: ``,\n long: `.parent-container {\n padding: 16px;\n }\n\n\n
\n {shortCode}\n
}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: ``,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n padding: \"16px\",\n },\n});\nconst classes = useStyles();\nreturn (\n
\n {shortCode}\n
\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n padding: \"16px\",\n },\n});\nconst classes = useStyles();\nreturn (\n
\n {shortCode}\n
\n)`,\n },\n ],\n },\n },\n];\n\n\n \n\n\n### Days outside month hidden\n\nDays outside of the current month in view can be hidden by setting the `showDaysOutsideMonth` prop to `false`.\n\nexport const dayHidden = [\n {\n technology: \"Web component\",\n snippets: {\n short: ``,\n long: `.parent-container {\n padding: 16px;\n }\n\n\n
\n {shortCode}\n
`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: ``,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n padding: \"16px\",\n },\n});\nconst classes = useStyles();\nreturn (\n
\n {shortCode}\n
\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n padding: \"16px\",\n },\n});\nconst classes = useStyles();\nreturn (\n
\n {shortCode}\n
\n)`,\n },\n ],\n },\n },\n];\n\n\n \n\n\n### Today and clear buttons hidden\n\nThe \"Go to today\" and \"Clear\" buttons can be hidden from the calendar view by setting the `showPickerTodayButton` and `showPickerClearButton` props to `false`.\n\nexport const btnHidden = [\n {\n technology: \"Web component\",\n snippets: {\n short: ``,\n long: `.parent-container {\n padding: 16px;\n }\n\n\n
\n {shortCode}\n
`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: ``,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n padding: \"16px\",\n },\n});\nconst classes = useStyles();\nreturn (\n
\n {shortCode}\n
\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n padding: \"16px\",\n },\n});\nconst classes = useStyles();\nreturn (\n
\n {shortCode}\n
\n)`,\n },\n ],\n },\n },\n];\n\n\n \n\n\n### Javascript dates\n\nAny prop that accepts a date value can be set to a Javascript Date object. The following example sets the `value`, `max` and `min` props.\n\nexport const jsDates = [\n {\n technology: \"Web component\",\n snippets: {\n short: ``,\n long: `.parent-container {\n padding: 16px;\n }\n\n\n
\n {shortCode}\n
\n `,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: ``,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n padding: \"16px\",\n },\n});\nconst classes = useStyles();\nreturn (\n
\n {shortCode}\n
\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n padding: \"16px\",\n },\n});\nconst classes = useStyles();\nreturn (\n
\n {shortCode}\n
\n)`,\n },\n ],\n },\n },\n];\n\n\n \n\n\n### IcChange Event\n\nThe `IcChange` event is emitted by the date picker when the selected date changes.\n\nexport const change = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n\n Selected date:\n`,\n long: `.parent-container {\n display: flex;\n flex-direction: column;\n gap: 50px;\n padding: 16px;\n }\n\n\n
\n {shortCode}\n
\n `,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\n\n {selectedDate}\n`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const [selectedDate, setSelectedDate] = useState(\"Selected date:\");\nconst [value, setValue] = useState();\nconst dateChangedHandler = (event: { detail: { value: Date; }; }) => {\n setValue(event.detail.value);\n setSelectedDate(\"Selected date: \" + event.detail.value);\n};\nconst useStyles = createUseStyles({\n parentContainer: {\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"50px\",\n padding: \"16px\",\n },\n});\nconst classes = useStyles();\nreturn (\n
\n {shortCode}\n
\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const [selectedDate, setSelectedDate] = useState(\"Selected date:\");\nconst [value, setValue] = useState();\nconst dateChangedHandler = (event) => {\n setValue(event.detail.value);\n setSelectedDate(\"Selected date: \" + event.detail.value);\n};\nconst useStyles = createUseStyles({\n parentContainer: {\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"50px\",\n padding: \"16px\",\n },\n});\nconst classes = useStyles();\nreturn (\n
\n {shortCode}\n
\n)`,\n },\n ],\n },\n },\n];\n\nexport const DatePickerWithIcChange = () => {\n const [selectedDate, setSelectedDate] = useState(\"Selected date:\");\n const [value, setValue] = useState();\n const dateChangedHandler = (event) => {\n setValue(event.detail.value);\n setSelectedDate(`Selected date: ${event.detail.value}`);\n };\n return (\n
\n \n {selectedDate}\n
\n );\n};\n\n\n \n\n", + "contents": "\nimport { IcDatePicker } from \"@ukic/canary-react\";\nimport { useState } from \"react\";\n\n## Component demo\n\nexport const snippets = [\n {\n technology: \"Web component\",\n snippets: {\n short: ``,\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## Date picker details\n\n\n\n## Variants\n\n### Sizes\n\nSet the size of the date picker by using the `size` prop. This prop takes the values `small`, `default` or `large`. Depending on the chosen size, the prop will apply styling to increase or decrease the amount of spacing within the component.\n\nexport const sizes = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n\n`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\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### Max width\n\nSet the size of the input field by using the `--input-width` CSS custom property. The picker will grow, but not exceed its maximum supported width.\n\nexport const maxWidth = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n\n`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\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### Disabled\n\nexport const disabled = [\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### Date formats\n\nThe `dateFormat` prop determines how dates are displayed. The supported formats are `DD/MM/YYYY`, `MM/DD/YYYY` or `YYYY/MM/DD`.\nThe default format is `DD/MM/YYYY`.\n\nexport const dateFormats = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n\n`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\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### Value\n\nThe `value` prop sets the date in the input field. The value can be in any format supported by the `dateFormat` prop, in ISO 8601 date string format (yyyy-mm-dd) or as a JavaScript Date object.\n\nexport const valueSnippet = [\n {\n technology: \"Web component\",\n snippets: {\n short: ``,\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### Open at date\n\nIf no `value` is set, the `openAtDate` prop can be used to specify the date in view when the calendar view is opened. If not set to a value, the calendar will default to showing the current date.\n\nThe supported formats are the same as for the `value` prop.\n\nexport const openDate = [\n {\n technology: \"Web component\",\n snippets: {\n short: ``,\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### Start of week\n\nThe first day of the week can be changed by setting the `startOfWeek` prop. This is a numeric value where 0 = Sunday, 1 = Monday, etc up to 6 = Saturday.\n\nexport const startWeek = [\n {\n technology: \"Web component\",\n snippets: {\n short: ``,\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### Disable days of week\n\nSpecific days of the week can be disabled from selection by setting the `disableDays` prop. The value can be set as an array of numeric values where where 0 = Sunday, 1 = Monday, etc up to 6 = Saturday.\n\nexport const disabledDaysOfWeek = [0, 6];\n\nexport const disableDays = [\n {\n technology: \"Web component\",\n snippets: {\n short: ``,\n long: `{shortCode}\n`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `const disabledDaysOfWeek = [0, 6 ;`,\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 and min\n\nThe `max` and `min` props can be used to limit the range of dates available for selection. Values can be in any format supported by the `dateFormat` prop, in ISO 8601 date string format (yyyy-mm-dd) or as a JavaScript Date object.\n\nexport const maxMin = [\n {\n technology: \"Web component\",\n snippets: {\n short: ``,\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### Disable dates in past\n\nDates before today can be disabled with the `disablePast` prop.\n\nexport const disablePast = [\n {\n technology: \"Web component\",\n snippets: {\n short: ``,\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### Disable dates in future\n\nDates after today can be disabled with the `disableFuture` prop.\n\nexport const disableFuture = [\n {\n technology: \"Web component\",\n snippets: {\n short: ``,\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### Days outside month hidden\n\nDays outside of the current month in view can be hidden by setting the `showDaysOutsideMonth` prop to `false`.\n\nexport const dayHidden = [\n {\n technology: \"Web component\",\n snippets: {\n short: ``,\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### Today and clear buttons hidden\n\nThe \"Go to today\" and \"Clear\" buttons can be hidden from the calendar view by setting the `showPickerTodayButton` and `showPickerClearButton` props to `false`.\n\nexport const btnHidden = [\n {\n technology: \"Web component\",\n snippets: {\n short: ``,\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### Javascript dates\n\nAny prop that accepts a date value can be set to a Javascript Date object. The following example sets the `value`, `max` and `min` props.\n\nexport const jsDates = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n`,\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### IcChange Event\n\nThe `IcChange` event is emitted by the date picker when the selected date changes.\n\nexport const change = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `export const DatePickerWithIcChange = () => {\n const [selectedDate, setSelectedDate] = useState('Selected date:');\n const [value, setValue] = useState();\n const dateChangedHandler = (event) => {\n setValue(event.detail.value);\n setSelectedDate(\"Selected date:\" + event.detail.value);\n }\n return (\n
\n \n \n {selectedDate}\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\nexport const DatePickerWithIcChange = () => {\n const [selectedDate, setSelectedDate] = useState(\"Selected date:\");\n const [value, setValue] = useState();\n const dateChangedHandler = (event) => {\n setValue(event.detail.value);\n setSelectedDate(`Selected date: ${event.detail.value}`);\n };\n return (\n
\n \n {selectedDate}\n
\n );\n};\n\n\n \n\n", "path": "/components/date-picker/code", "date": "2024-05-31", "title": "Date picker", @@ -1928,10 +1928,10 @@ ], "meta": { "relativePath": "components/date-picker/code.mdx", - "createdAt": "2024-05-31T10:44:10.945Z", - "lastModified": "2024-05-31T10:44:10.945Z", - "size": 29731, - "formattedSize": "29.0 KB" + "createdAt": "2024-05-21T09:12:11.367Z", + "lastModified": "2024-05-21T09:12:11.367Z", + "size": 21010, + "formattedSize": "20.5 KB" } }, { @@ -1959,8 +1959,8 @@ ], "meta": { "relativePath": "components/date-picker/guidance.mdx", - "createdAt": "2024-05-30T12:04:49.436Z", - "lastModified": "2024-05-30T12:04:49.436Z", + "createdAt": "2024-05-21T09:12:11.267Z", + "lastModified": "2024-05-21T09:12:11.267Z", "size": 5244, "formattedSize": "5.1 KB" } @@ -1998,9 +1998,9 @@ }, { "id": "components__dialog__codex", - "contents": "\nimport {\n IcAlert,\n IcDialog,\n IcButton,\n IcCheckboxGroup,\n IcCheckbox,\n IcTypography,\n IcSelect,\n} from \"@ukic/react\";\nimport { useRef, useState } from \"react\";\n\nexport const buttonProps = [\n {\n label: \"Go back\",\n onclick: \"this.cancelDialog()\",\n },\n {\n label: \"Continue\",\n onclick: \"alert('Added to basket'); this.open = false;\",\n },\n];\n\n## Component demo\n\nexport const snippetsDefault = [\n {\n technology: \"Web component\",\n snippets: {\n short: `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\n 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);\nreturn (\n <>\n {shortCode}\n \n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const [openDialog, setOpenDialog] = useState(false);\nconst handleDialogOpen = () => setOpenDialog(true);\nconst handleDialogClose = () => setOpenDialog(false);\nreturn (\n <>\n {shortCode}\n \n)`,\n },\n ],\n },\n },\n];\n\nexport const DefaultDialog = () => {\n const [openDialog, setOpenDialog] = useState(false);\n const handleDialogOpen = () => setOpenDialog(true);\n const handleDialogClose = () => setOpenDialog(false);\n return (\n <>\n 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 \n );\n};\n\n\n \n\n\n## Dialog details\n\n\n\n## Variants\n\n### Sizes\n\nexport const snippetsSizes = [\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 sizes dialog\n\n \n You are about to add 'Americano' to your basket. Are you sure you want to\n continue?\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 SizesDialogs = () => {\n const [openDialog, setOpenDialog] = useState(false);\n const handleDialogOpen = () => setOpenDialog(true);\n const handleDialogClose = () => setOpenDialog(false);\n return (\n <>\n Launch sizes dialog\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### With status alerts\n\nexport const snippetsAlert = [\n {\n technology: \"Web component\",\n snippets: {\n short: `Launch status dialog\n\n \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: `\n Launch status dialog\n\n\n \n \n You are about to add 'Americano' to your basket. Are you sure you want\n to continue?\n \n`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const [openDialog, setOpenDialog] = useState(false);\nconst handleDialogOpen = () => setOpenDialog(true);\nconst handleDialogClose = () => setOpenlDialog(false);\nreturn (\n <>\n {shortCode}\n \n);`,\n },\n {\n language: \"Javascript\",\n snippet: `const [openDialog, setOpenDialog] = useState(false);\nconst handleDialogOpen = () => setOpenDialog(true);\nconst handleDialogClose = () => setOpenlDialog(false);\nreturn (\n <>\n {shortCode}\n \n);`,\n },\n ],\n },\n },\n];\n\nexport const AlertDialog = () => {\n const dialogEl = useRef(null);\n const addTitleAboveAttribute = () => {\n dialogEl.current\n .querySelector(\"ic-alert\")\n .setAttribute(\"title-above\", \"true\");\n };\n const [openDialog, setOpenDialog] = useState(false);\n const handleDialogOpen = () => {\n addTitleAboveAttribute();\n setOpenDialog(true);\n };\n const handleDialogClose = () => setOpenDialog(false);\n return (\n <>\n \n Launch dialog\n \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### Button variations\n\nexport const snippetsCustomButtons = [\n {\n technology: \"Web component\",\n snippets: {\n short: `Launch no button dialog\nLaunch single button dialog\nLaunch three button dialog\nLaunch destructive button dialog\n\n Sorry, you cannot place orders at the moment. Please try again later.\n\n\n \n Your order for an Americano coffee has been placed.\n \n\n\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod\n tempor incididunt ut labore et dolore magna aliqua.\n\n\n \n You are about to cancel your order for an Americano. Are you sure you want to continue?\n \n`,\n long: `{shortCode}\n\n `,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `
\n \n Launch no button dialog\n \n \n Launch single button dialog\n \n \n Launch three button dialog\n \n \n Launch destructive button dialog\n \n
\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 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 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 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do\n eiusmod tempor incididunt ut labore et dolore magna aliqua.\n \n`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const [openNoButtonDialog, setOpenNoButtonDialog] = useState(false);\nconst [openSingleButtonDialog, setOpenSingleButtonDialog] = useState(false);\nconst [openThreeButtonsDialog, setOpenThreeButtonsDialog] = useState(false);\nconst [openDestructiveButtonDialog, setOpenDestructiveButtonDialog] = useState(false);\nconst handleNoButtonDialogOpen = () => setOpenNoButtonDialog(true);\nconst handleSingleButtonDialogOpen = () => setOpenSingleButtonDialog(true);\nconst handleThreeButtonsDialogOpen = () => setOpenThreeButtonsDialog(true);\nconst handleDestructiveButtonDialogOpen = () => setOpenDestructiveButtonDialog(true);\nconst handleDialogClose = () => {\n setOpenNoButtonDialog(false);\n setOpenSingleButtonDialog(false);\n setOpenThreeButtonsDialog(false);\n setOpenDestructiveButtonDialog(false);\n}\nconst useStyles = createUseStyles({\n btnContainer: { \n display: \"flex\",\n gap: \"8px\",\n flexWrap: \"wrap\",\n },\n});\nconst classes = useStyles();\nreturn (\n <>\n {shortCode}\n \n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const [openNoButtonDialog, setOpenNoButtonDialog] = useState(false);\nconst [openSingleButtonDialog, setOpenSingleButtonDialog] = useState(false);\nconst [openThreeButtonsDialog, setOpenThreeButtonsDialog] = useState(false);\nconst [openDestructiveButtonDialog, setOpenDestructiveButtonDialog] = useState(false);\nconst handleNoButtonDialogOpen = () => setOpenNoButtonDialog(true);\nconst handleSingleButtonDialogOpen = () => setOpenSingleButtonDialog(true);\nconst handleThreeButtonsDialogOpen = () => setOpenThreeButtonsDialog(true);\nconst handleDestructiveButtonDialogOpen = () => setOpenDestructiveButtonDialog(true);\nconst handleDialogClose = () => {\n setOpenNoButtonDialog(false);\n setOpenSingleButtonDialog(false);\n setOpenThreeButtonsDialog(false);\n setOpenDestructiveButtonDialog(false);\n}\nconst useStyles = createUseStyles({\n btnContainer: { \n display: \"flex\",\n gap: \"8px\",\n flexWrap: \"wrap\",\n },\n});\nconst classes = useStyles();\nreturn (\n <>\n {shortCode}\n \n)`,\n },\n ],\n },\n },\n];\n\nexport const CustomButtonsDialog = () => {\n const [openNoButtonDialog, setOpenNoButtonDialog] = useState(false);\n const [openSingleButtonDialog, setOpenSingleButtonDialog] = useState(false);\n const [openThreeButtonsDialog, setOpenThreeButtonsDialog] = useState(false);\n const [openDestructiveButtonDialog, setOpenDestructiveButtonDialog] =\n useState(false);\n const handleNoButtonDialogOpen = () => setOpenNoButtonDialog(true);\n const handleSingleButtonDialogOpen = () => setOpenSingleButtonDialog(true);\n const handleThreeButtonsDialogOpen = () => setOpenThreeButtonsDialog(true);\n const handleDestructiveButtonDialogOpen = () =>\n setOpenDestructiveButtonDialog(true);\n const handleDialogClose = () => {\n setOpenNoButtonDialog(false);\n setOpenSingleButtonDialog(false);\n setOpenThreeButtonsDialog(false);\n setOpenDestructiveButtonDialog(false);\n };\n return (\n <>\n
\n \n Launch no button dialog\n \n \n Launch single button dialog\n \n \n Launch three button dialog\n \n \n Launch destructive button dialog\n \n
\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 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 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 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### Slotted buttons\n\nexport const snippetsSlottedButtons = [\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 Go back\n \n \n Add to basket\n \n`,\n long: `{shortCode}\n`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `Launch slotted buttons dialog\n\n \n You are about to add 'Americano' to your basket. Are you sure you want\n to continue?\n \n \n Go back\n \n \n Add to basket\n \n`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const [openDialog, setOpenDialog] = useState(false);\nconst handleDialogOpen = () => setOpenDialog(true);\nconst handleDialogClose = () => setOpenDialog(false);\nconst handleAddToBasket = () => {\n alert(\"Added to basket\");\n setOpenDialog(false);\n}\nreturn (\n <>\n {shortCode}\n \n);`,\n },\n {\n language: \"Javascript\",\n snippet: `const [openDialog, setOpenDialog] = useState(false);\nconst handleDialogOpen = () => setOpenDialog(true);\nconst handleDialogClose = () => setOpenDialog(false);\nconst handleAddToBasket = () => {\n alert(\"Added to basket\");\n setOpenDialog(false);\n}\nreturn (\n <>\n {shortCode}\n \n);`,\n },\n ],\n },\n },\n];\n\nexport const SlottedButtonsDialog = () => {\n const [openDialog, setOpenDialog] = useState(false);\n const handleDialogOpen = () => setOpenDialog(true);\n const handleDialogClose = () => setOpenDialog(false);\n const handleAddToBasket = () => {\n alert(\"Added to basket\");\n setOpenDialog(false);\n };\n return (\n <>\n 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 Go back\n \n \n Add to basket\n \n \n \n );\n};\n\n\n \n\n\n### Interactive content\n\nexport const interactiveContentSnippet = [\n {\n technology: \"Web component\",\n snippets: {\n short: `Launch dialog\n\n \n Before continuing, please agree to our terms and conditions.\n \n \n \n \n`,\n long: `.parent-container {\n padding: 16px;\n }\n ic-checkbox-group {\n margin-top: 8px\n }\n\n\n
\n {shortCode}\n
\n `,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `Launch dialog\n\n \n Before continuing, please agree to our terms and conditions.\n \n \n \n \n`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const [termsAgreed, setTermsAgreed] = useState(false);\nconst [openDialog, setOpenDialog] = useState(false);\nconst handleDialogOpen = () => setOpenDialog(true);\nconst handleDialogClose = () => setOpenDialog(false);\nconst toggleTermsAgreed = () => {\n setTermsAgreed(!termsAgreed);\n};\nconst termsDialogConfirmed = (ev) => {\n const message = (termsAgreed) ? \"Terms agreed\" : \"Terms not agreed\";\n alert(message);\n setOpenDialog(false);\n};\nconst useStyles = createUseStyles({\n parentContainer: {\n padding: \"16px\",\n },\n checkboxGroup: {\n marginTop: \"8px\",\n },\n});\nconst classes = useStyles();\nreturn (\n
\n {shortCode}\n
\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const [termsAgreed, setTermsAgreed] = useState(false);\nconst [openDialog, setOpenDialog] = useState(false);\nconst handleDialogOpen = () => setOpenDialog(true);\nconst handleDialogClose = () => setOpenDialog(false);\nconst toggleTermsAgreed = () => {\n setTermsAgreed(!termsAgreed);\n};\nconst termsDialogConfirmed = (ev) => {\n const message = (termsAgreed) ? \"Terms agreed\" : \"Terms not agreed\";\n alert(message);\n setOpenDialog(false);\n};\nconst useStyles = createUseStyles({\n parentContainer: {\n padding: \"16px\",\n },\n checkboxGroup: {\n marginTop: \"8px\",\n },\n});\nreturn (\n
\n {shortCode}\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);\n const handleDialogOpen = () => setOpenDialog(true); \n const handleDialogClose = () => setOpenDialog(false); \n const handleConfirmDialog = (ev) => { \n alert(\"Confirmed!\");\n setOpenDialog(false);\n };\n return (\n <>\n {shortCode}\n \n \n );`,\n },\n {\n language: \"Javascript\",\n snippet: `const [openDialog, setOpenDialog] = useState(false);\n const handleDialogOpen = () => setOpenDialog(true); \n const handleDialogClose = () => setOpenDialog(false); \n const handleConfirmDialog = (ev) => { \n alert(\"Confirmed!\");\n setOpenDialog(false);\n };\n return (\n <>\n {shortCode}\n \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": "\nimport {\n IcAlert,\n IcDialog,\n IcButton,\n IcCheckboxGroup,\n IcCheckbox,\n IcTypography,\n IcSelect,\n} from \"@ukic/react\";\nimport { useRef, useState } from \"react\";\n\nexport const buttonProps = [\n {\n label: \"Go back\",\n onclick: \"this.cancelDialog()\",\n },\n {\n label: \"Continue\",\n onclick: \"alert('Added to basket'); this.open = false;\",\n },\n];\n\n## Component demo\n\nexport const snippetsDefault = [\n {\n technology: \"Web component\",\n snippets: {\n short: `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\n 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);\nreturn (\n <>\n {shortCode}\n \n)`,\n },\n {\n language: \"Javascript\",\n snippet: `{shortCode}`,\n },\n ],\n },\n },\n];\n\nexport const DefaultDialog = () => {\n const [openDialog, setOpenDialog] = useState(false);\n const handleDialogOpen = () => setOpenDialog(true);\n const handleDialogClose = () => setOpenDialog(false);\n return (\n <>\n 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 \n );\n};\n\n\n \n\n\n## Dialog details\n\n\n\n## Variants\n\n### Sizes\n\nexport const snippetsSizes = [\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 sizes dialog\n\n \n You are about to add 'Americano' to your basket. Are you sure you want to\n continue?\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 SizesDialogs = () => {\n const [openDialog, setOpenDialog] = useState(false);\n const handleDialogOpen = () => setOpenDialog(true);\n const handleDialogClose = () => setOpenDialog(false);\n return (\n <>\n Launch sizes dialog\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### With status alerts\n\nexport const snippetsAlert = [\n {\n technology: \"Web component\",\n snippets: {\n short: `Launch status dialog\n\n \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: `\n Launch status dialog\n\n\n \n \n You are about to add 'Americano' to your basket. Are you sure you want\n to continue?\n \n`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const [openDialog, setOpenDialog] = useState(false);\nconst handleDialogOpen = () => setOpenDialog(true);\nconst handleDialogClose = () => setOpenlDialog(false);\nreturn (\n <>\n {shortCode}\n \n);`,\n },\n {\n language: \"Javascript\",\n snippet: `const [openDialog, setOpenDialog] = useState(false);\nconst handleDialogOpen = () => setOpenDialog(true);\nconst handleDialogClose = () => setOpenlDialog(false);\nreturn (\n <>\n {shortCode}\n \n);`,\n },\n ],\n },\n },\n];\n\nexport const AlertDialog = () => {\n const dialogEl = useRef(null);\n const addTitleAboveAttribute = () => {\n dialogEl.current\n .querySelector(\"ic-alert\")\n .setAttribute(\"title-above\", \"true\");\n };\n const [openDialog, setOpenDialog] = useState(false);\n const handleDialogOpen = () => {\n addTitleAboveAttribute();\n setOpenDialog(true);\n };\n const handleDialogClose = () => setOpenDialog(false);\n return (\n <>\n \n Launch dialog\n \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### Button variations\n\nexport const snippetsCustomButtons = [\n {\n technology: \"Web component\",\n snippets: {\n short: `Launch no button dialog\nLaunch single button dialog\nLaunch three button dialog\nLaunch destructive button dialog\n\n Sorry, you cannot place orders at the moment. Please try again later.\n\n\n \n Your order for an Americano coffee has been placed.\n \n\n\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod\n tempor incididunt ut labore et dolore magna aliqua.\n\n\n \n You are about to cancel your order for an Americano. Are you sure you want to continue?\n \n`,\n long: `{shortCode}\n\n `,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `
\n \n Launch no button dialog\n \n \n Launch single button dialog\n \n \n Launch three button dialog\n \n \n Launch destructive button dialog\n \n
\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 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 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 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do\n eiusmod tempor incididunt ut labore et dolore magna aliqua.\n \n`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const [openNoButtonDialog, setOpenNoButtonDialog] = useState(false);\n const [openSingleButtonDialog, setOpenSingleButtonDialog] = useState(false);\n const [openThreeButtonsDialog, setOpenThreeButtonsDialog] = useState(false);\n const [openDestructiveButtonDialog, setOpenDestructiveButtonDialog] = useState(false);\n const handleNoButtonDialogOpen = () => setOpenNoButtonDialog(true);\n const handleSingleButtonDialogOpen = () => setOpenSingleButtonDialog(true);\n const handleThreeButtonsDialogOpen = () => setOpenThreeButtonsDialog(true);\n const handleDestructiveButtonDialogOpen = () => setOpenDestructiveButtonDialog(true);\n const handleDialogClose = () => {\n setOpenNoButtonDialog(false);\n setOpenSingleButtonDialog(false);\n setOpenThreeButtonsDialog(false);\n setOpenDestructiveButtonDialog(false);\n }\n return (\n <>\n {shortCode}\n \n );`,\n },\n {\n language: \"Javascript\",\n snippet: `const [openNoButtonDialog, setOpenNoButtonDialog] = useState(false);\n const [openSingleButtonDialog, setOpenSingleButtonDialog] = useState(false);\n const [openThreeButtonsDialog, setOpenThreeButtonsDialog] = useState(false);\n const [openDestructiveButtonDialog, setOpenDestructiveButtonDialog] = useState(false);\n const handleNoButtonDialogOpen = () => setOpenNoButtonDialog(true);\n const handleSingleButtonDialogOpen = () => setOpenSingleButtonDialog(true);\n const handleThreeButtonsDialogOpen = () => setOpenThreeButtonsDialog(true);\n const handleDestructiveButtonDialogOpen = () => setOpenDestructiveButtonDialog(true);\n const handleDialogClose = () => {\n setOpenNoButtonDialog(false);\n setOpenSingleButtonDialog(false);\n setOpenThreeButtonsDialog(false);\n setOpenDestructiveButtonDialog(false);\n }\n return (\n <>\n {shortCode}\n \n );`,\n },\n ],\n },\n },\n];\n\nexport const CustomButtonsDialog = () => {\n const [openNoButtonDialog, setOpenNoButtonDialog] = useState(false);\n const [openSingleButtonDialog, setOpenSingleButtonDialog] = useState(false);\n const [openThreeButtonsDialog, setOpenThreeButtonsDialog] = useState(false);\n const [openDestructiveButtonDialog, setOpenDestructiveButtonDialog] =\n useState(false);\n const handleNoButtonDialogOpen = () => setOpenNoButtonDialog(true);\n const handleSingleButtonDialogOpen = () => setOpenSingleButtonDialog(true);\n const handleThreeButtonsDialogOpen = () => setOpenThreeButtonsDialog(true);\n const handleDestructiveButtonDialogOpen = () =>\n setOpenDestructiveButtonDialog(true);\n const handleDialogClose = () => {\n setOpenNoButtonDialog(false);\n setOpenSingleButtonDialog(false);\n setOpenThreeButtonsDialog(false);\n setOpenDestructiveButtonDialog(false);\n };\n return (\n <>\n
\n \n Launch no button dialog\n \n \n Launch single button dialog\n \n \n Launch three button dialog\n \n \n Launch destructive button dialog\n \n
\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 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 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 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### Slotted buttons\n\nexport const snippetsSlottedButtons = [\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 Go back\n \n \n Add to basket\n \n`,\n long: `{shortCode}\n `,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `Launch slotted buttons dialog\n\n \n You are about to add 'Americano' to your basket. Are you sure you want\n to continue?\n \n \n Go back\n \n \n Add to basket\n \n`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const [openDialog, setOpenDialog] = useState(false);\nconst handleDialogOpen = () => setOpenDialog(true);\nconst handleDialogClose = () => setOpenDialog(false);\nconst handleAddToBasket = () => {\n alert(\"Added to basket\");\n setOpenDialog(false);\n}\nreturn (\n <>\n {shortCode}\n \n);`,\n },\n {\n language: \"Javascript\",\n snippet: `const [openDialog, setOpenDialog] = useState(false);\nconst handleDialogOpen = () => setOpenDialog(true);\nconst handleDialogClose = () => setOpenDialog(false);\nconst handleAddToBasket = () => {\n alert(\"Added to basket\");\n setOpenDialog(false);\n}\nreturn (\n <>\n {shortCode}\n \n);`,\n },\n ],\n },\n },\n];\n\nexport const SlottedButtonsDialog = () => {\n const [openDialog, setOpenDialog] = useState(false);\n const handleDialogOpen = () => setOpenDialog(true);\n const handleDialogClose = () => setOpenDialog(false);\n const handleAddToBasket = () => {\n alert(\"Added to basket\");\n setOpenDialog(false);\n };\n return (\n <>\n 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 Go back\n \n \n Add to basket\n \n \n \n );\n};\n\n\n \n\n\n### Interactive content\n\nexport const interactiveContentSnippet = [\n {\n technology: \"Web component\",\n snippets: {\n short: `Launch dialog\n\n \n Before continuing, please agree to our terms and conditions.\n \n \n \n \n`,\n long: `{shortCode}\n `,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `Launch dialog\n\n \n Before continuing, please agree to our terms and conditions.\n \n \n \n \n`,\n long: [\n {\n language: \"Typescript\",\n snippet: `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 = (ev) => {\n const message = (termsAgreed) ? \"Terms agreed\" : \"Terms not agreed\";\n alert(message);\n setOpenDialog(false);\n } \n return (\n <>\n {shortCode}\n \n );`,\n },\n {\n language: \"Javascript\",\n snippet: `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 = (ev) => {\n const message = (termsAgreed) ? \"Terms agreed\" : \"Terms not agreed\";\n alert(message);\n setOpenDialog(false);\n } \n return (\n <>\n {shortCode}\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);\n const handleDialogOpen = () => setOpenDialog(true); \n const handleDialogClose = () => setOpenDialog(false); \n const handleConfirmDialog = (ev) => { \n alert(\"Confirmed!\");\n setOpenDialog(false);\n };\n return (\n <>\n {shortCode}\n \n \n );`,\n },\n {\n language: \"Javascript\",\n snippet: `const [openDialog, setOpenDialog] = useState(false);\n const handleDialogOpen = () => setOpenDialog(true); \n const handleDialogClose = () => setOpenDialog(false); \n const handleConfirmDialog = (ev) => { \n alert(\"Confirmed!\");\n setOpenDialog(false);\n };\n return (\n <>\n {shortCode}\n \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);\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 {shortCode}\n \n );`,\n },\n {\n language: \"Javascript\",\n snippet: `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 {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 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: [\n {\n language: \"Typescript\",\n snippet: `const [openDialog, setOpenDialog] = useState(false);\n const handleDialogOpen = () => setOpenDialog(true);\n const handleDialogClose = () => setOpenDialog(false);\n return (\n <>\n {shortCode}\n \n )`,\n },\n {\n language: \"Javascript\",\n snippet: `const [openDialog, setOpenDialog] = useState(false);\n const handleDialogOpen = () => setOpenDialog(true);\n const handleDialogClose = () => setOpenDialog(false);\n return (\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", "path": "/components/dialog/code", - "date": "2024-05-31", + "date": "2024-05-02", "title": "Dialog", "status": "BETA", "subTitle": "Dialogs are modal windows that interrupt the user's current task to bring something important to attention.", @@ -2021,10 +2021,10 @@ ], "meta": { "relativePath": "components/dialog/code.mdx", - "createdAt": "2024-05-31T10:44:10.861Z", - "lastModified": "2024-05-31T10:44:10.861Z", - "size": 46682, - "formattedSize": "45.6 KB" + "createdAt": "2024-05-21T09:12:11.371Z", + "lastModified": "2024-05-21T09:12:11.371Z", + "size": 46790, + "formattedSize": "45.7 KB" } }, { @@ -2053,8 +2053,8 @@ ], "meta": { "relativePath": "components/dialog/guidance.mdx", - "createdAt": "2024-05-30T12:04:49.448Z", - "lastModified": "2024-05-30T12:04:49.448Z", + "createdAt": "2024-05-13T07:27:37.345Z", + "lastModified": "2024-05-13T07:27:37.345Z", "size": 8607, "formattedSize": "8.4 KB" } @@ -2092,9 +2092,9 @@ }, { "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 \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: `{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 \n \n \n \n \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 \n \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 \n \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": "\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 \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: `{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 \n \n \n \n \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 \n \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 \n \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`,\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`,\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`,\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", "path": "/components/empty-state/code", - "date": "2024-05-31", + "date": "2024-05-02", "title": "Empty state", "status": "BETA", "subTitle": "Use the empty state component when there is no content to display. It provides a consistent way of communicating to people what to do next.", @@ -2115,8 +2115,8 @@ ], "meta": { "relativePath": "components/empty-state/code.mdx", - "createdAt": "2024-05-31T10:44:10.841Z", - "lastModified": "2024-05-31T10:44:10.841Z", + "createdAt": "2024-05-21T09:12:11.371Z", + "lastModified": "2024-05-21T09:12:11.371Z", "size": 21654, "formattedSize": "21.1 KB" } @@ -2147,8 +2147,8 @@ ], "meta": { "relativePath": "components/empty-state/guidance.mdx", - "createdAt": "2024-05-30T12:04:49.448Z", - "lastModified": "2024-05-30T12:04:49.448Z", + "createdAt": "2024-05-13T07:27:37.348Z", + "lastModified": "2024-05-13T07:27:37.348Z", "size": 10939, "formattedSize": "10.7 KB" } @@ -2186,9 +2186,9 @@ }, { "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 \n
\n`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\n Accessibility\n Styles\n Components\n Patterns\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 Accessibility\n \n \n Styles\n \n \n Components\n \n \n Patterns\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n\n### With React Router\n\nexport const withReactRouter = [\n {\n technology: \"React\",\n snippets: {\n short: `\n \n This is the accessibility page} />\n This page is about styles} />\n \n \n \n Accessibility\n \n \n Styles\n \n
\n Logo\n
\n \n`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n logoContainer: {\n width: \"100px\",\n height: \"100px\",\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n backgroundColor: \"var(--ic-theme-primary)\",\n color: \"var(--ic-theme-text)\"\n },\n});\nconst classes = useStyles();\nreturn (\n {shortCode}\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n logoContainer: {\n width: \"100px\",\n height: \"100px\",\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n backgroundColor: \"var(--ic-theme-primary)\",\n color: \"var(--ic-theme-text)\"\n },\n});\nreturn (\n {shortCode}\n)`,\n },\n ],\n },\n },\n];\n\n\n \n \n \n Accessibility\n \n \n Styles\n \n \n Logo\n \n \n \n\n\n## Layout example\n\nAdding a `minHeight` of `100vh` ensures the footer appears below the page fold.\n\nexport const footerLayoutExample = [\n {\n technology: \"Web component\",\n snippets: {\n short: `
\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
\n \n Accessibility\n Styles\n Components\n Patterns\n \n
\n `,\n long: `.div-container {\n min-height: 100vh;\n }\n\n\n
\n {shortCode}\n
`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `
\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
\n \n Accessibility\n Styles\n Components\n Patterns\n \n
`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n divContainer: {\n minHeight: \"100vh\",\n },\n});\nconst classes = useStyles();\nreturn (\n {shortCode}\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n divContainer: {\n minHeight: \"100vh\",\n },\n});\nconst classes = useStyles();\nreturn (\n {shortCode}\n)`,\n },\n ],\n },\n },\n];\n\n\n \n View example in new window\n \n\n", + "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 \n
\n`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\n Accessibility\n Styles\n Components\n Patterns\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 Accessibility\n \n \n Styles\n \n \n Components\n \n \n Patterns\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n\n### With React Router\n\nexport const withReactRouter = [\n {\n technology: \"React\",\n snippets: {\n short: `\n \n This is the accessibility page} />\n This page is about styles} />\n \n \n \n Accessibility\n \n \n Styles\n \n
\n Logo\n
\n \n`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n logoContainer: {\n width: \"100px\",\n height: \"100px\",\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n backgroundColor: \"var(--ic-theme-primary)\",\n color: \"var(--ic-theme-text)\"\n },\n});\nconst classes = useStyles();\nreturn (\n {shortCode}\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n logoContainer: {\n width: \"100px\",\n height: \"100px\",\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n backgroundColor: \"var(--ic-theme-primary)\",\n color: \"var(--ic-theme-text)\"\n },\n});\nreturn (\n {shortCode}\n)`,\n },\n ],\n },\n },\n];\n\n\n \n \n \n Accessibility\n \n \n Styles\n \n \n Logo\n \n \n \n\n\n## Layout example\n\nAdding a `minHeight` of `100vh` ensures the footer appears below the page fold.\n\nexport const footerLayoutExample = [\n {\n technology: \"Web component\",\n snippets: {\n short: `
\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
\n \n Accessibility\n Styles\n Components\n Patterns\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 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
\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 View example in new window\n \n\n", "path": "/components/footer/code", - "date": "2024-05-31", + "date": "2024-05-02", "title": "Footer", "status": "BETA", "subTitle": "Footers are placed at the bottom of the page and can be used for additional links not found in the main navigation.", @@ -2209,10 +2209,10 @@ ], "meta": { "relativePath": "components/footer/code.mdx", - "createdAt": "2024-05-31T10:44:10.869Z", - "lastModified": "2024-05-31T10:44:10.869Z", - "size": 19250, - "formattedSize": "18.8 KB" + "createdAt": "2024-05-21T09:12:11.371Z", + "lastModified": "2024-05-21T09:12:11.371Z", + "size": 18882, + "formattedSize": "18.4 KB" } }, { @@ -2241,8 +2241,8 @@ ], "meta": { "relativePath": "components/footer/guidance.mdx", - "createdAt": "2024-05-30T12:04:49.448Z", - "lastModified": "2024-05-30T12:04:49.448Z", + "createdAt": "2024-05-13T07:27:37.348Z", + "lastModified": "2024-05-13T07:27:37.348Z", "size": 7784, "formattedSize": "7.6 KB" } @@ -2282,7 +2282,7 @@ "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: 300px;\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: \"300px\",\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: \"300px\",\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: 300px;\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: \"300px\",\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: \"300px\",\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", "path": "/components/hero/code", - "date": "2024-05-31", + "date": "2024-05-02", "title": "Hero", "status": "BETA", "subTitle": "A large banner found at the top of page used to introduce page content, provide key actions and add personality.", @@ -2303,8 +2303,8 @@ ], "meta": { "relativePath": "components/hero/code.mdx", - "createdAt": "2024-05-31T10:44:10.837Z", - "lastModified": "2024-05-31T10:44:10.837Z", + "createdAt": "2024-05-21T09:12:11.371Z", + "lastModified": "2024-05-21T09:12:11.371Z", "size": 17418, "formattedSize": "17.0 KB" } @@ -2335,8 +2335,8 @@ ], "meta": { "relativePath": "components/hero/guidance.mdx", - "createdAt": "2024-05-30T12:04:49.452Z", - "lastModified": "2024-05-30T12:04:49.452Z", + "createdAt": "2024-05-13T07:27:37.352Z", + "lastModified": "2024-05-13T07:27:37.352Z", "size": 8372, "formattedSize": "8.2 KB" } @@ -2390,9 +2390,9 @@ }, { "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: 8px;\n }\n .dark-background {\n background: #333333;\n padding: 8px;\n }\n\n\n
\n
\n \n About our coffees\n \n
\n
\n \n About our coffees\n \n
\n
`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `About our coffees\nAbout our coffees`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n display: 'flex',\n flexWrap: 'wrap',\n },\n lightBackground: {\n padding: '8px',\n },\n darkBackground: {\n background: '#333333',\n padding: '8px',\n },\n});\nconst classes = useStyles();\nreturn (\n
\n
\n \n About our coffees\n \n
\n
\n \n About our coffees\n \n
\n
\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n display: 'flex',\n flexWrap: 'wrap',\n },\n lightBackground: {\n padding: '8px',\n },\n darkBackground: {\n background: '#333333',\n padding: '8px',\n },\n});\nconst classes = useStyles();\nreturn (\n
\n
\n \n About our coffees\n \n
\n
\n \n About our coffees\n \n
\n
\n)`,\n },\n ],\n },\n },\n];\n\n\n \n \n About our coffees\n \n \n \n \n About our coffees\n \n \n\n\n### With React Router\n\nexport const withReactRouter = [\n {\n technology: \"React\",\n snippets: {\n short: `\n
\n \n Home\n \n \n Beverages\n \n
\n \n \n This is the home page} />\n This page is about beverages} />\n \n \n`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n divContainer: {\n display: \"flex\",\n gap: \"8px\",\n },\n});\nconst classes = useStyles();\nreturn (\n {shortCode}\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n divContainer: {\n display: \"flex\",\n gap: \"8px\",\n },\n});\nconst classes = useStyles();\nreturn (\n {shortCode}\n)`,\n },\n ],\n },\n },\n];\n\n\n \n \n \n \n Home\n \n \n \n \n Beverages\n \n \n \n \n\n", + "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### Light and dark\n\nexport const snippetsLightDark = [\n {\n technology: \"Web component\",\n snippets: {\n short: `About our coffees\nAbout our coffees`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `About our coffees\nAbout our coffees`,\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 About our coffees\n \n \n \n \n About our coffees\n \n \n\n\n### With React Router\n\nexport const withReactRouter = [\n {\n technology: \"React\",\n snippets: {\n short: `\n
\n \n Home\n \n \n Beverages\n \n
\n \n \n This is the home page} />\n This page is about beverages} />\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 Home\n \n \n \n \n Beverages\n \n \n \n \n\n", "path": "/components/link/code", - "date": "2024-05-31", + "date": "2024-05-02", "title": "Link", "status": "BETA", "subTitle": "Links can be used either as standalone components or inline with text.", @@ -2413,10 +2413,10 @@ ], "meta": { "relativePath": "components/links/code.mdx", - "createdAt": "2024-05-31T10:44:10.893Z", - "lastModified": "2024-05-31T10:44:10.893Z", - "size": 6666, - "formattedSize": "6.5 KB" + "createdAt": "2024-05-21T09:12:11.371Z", + "lastModified": "2024-05-21T09:12:11.371Z", + "size": 4767, + "formattedSize": "4.7 KB" } }, { @@ -2445,8 +2445,8 @@ ], "meta": { "relativePath": "components/links/guidance.mdx", - "createdAt": "2024-05-30T12:04:49.452Z", - "lastModified": "2024-05-30T12:04:49.452Z", + "createdAt": "2024-05-13T07:27:37.352Z", + "lastModified": "2024-05-13T07:27:37.352Z", "size": 7199, "formattedSize": "7.0 KB" } @@ -2484,9 +2484,9 @@ }, { "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: 8px; \n background: #333333;\n }\n \n \n
\n {shortCode}\n
`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\n`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n darkBackground: {\n display: \"flex\",\n flexDirection: \"column\", \n gap: \"8px\", \n background: \"#333333\",\n },\n});\nconst classes = useStyles();\nreturn (\n
\n {shortCode}\n
\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n darkBackground: {\n display: \"flex\",\n flexDirection: \"column\", \n gap: \"8px\", \n background: \"#333333\",\n },\n});\nconst classes = useStyles();\nreturn (\n
\n {shortCode}\n
\n)`,\n },\n ],\n },\n },\n];\n\n\n \n \n\n\n### Changing label\n\nexport const snippetsChangingLabel = [\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": "\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: 8px; \n background: #333333;\n }\n \n \n
\n {shortCode}\n
`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\n`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n darkBackground: {\n display: \"flex\",\n flexDirection: \"column\", \n gap: \"8px\", \n background: \"#333333\",\n },\n});\nconst classes = useStyles();\nreturn (\n
\n {shortCode}\n
\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n darkBackground: {\n display: \"flex\",\n flexDirection: \"column\", \n gap: \"8px\", \n background: \"#333333\",\n },\n});\nconst classes = useStyles();\nreturn (\n
\n {shortCode}\n
\n)`,\n },\n ],\n },\n },\n];\n\n\n \n \n\n\n### Changing label\n\nexport const snippetsChangingLabel = [\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", "path": "/components/loading-indicator/code", - "date": "2024-05-31", + "date": "2024-05-02", "title": "Loading indicator", "status": "BETA", "subTitle": "Loading indicators help inform users that a request is being processed. Circular and linear indicators provide flexibility in design.", @@ -2507,10 +2507,10 @@ ], "meta": { "relativePath": "components/loading-indicators/code.mdx", - "createdAt": "2024-05-31T10:44:10.829Z", - "lastModified": "2024-05-31T10:44:10.829Z", - "size": 7726, - "formattedSize": "7.5 KB" + "createdAt": "2024-05-21T09:12:11.375Z", + "lastModified": "2024-05-21T09:12:11.375Z", + "size": 7834, + "formattedSize": "7.7 KB" } }, { @@ -2539,8 +2539,8 @@ ], "meta": { "relativePath": "components/loading-indicators/guidance.mdx", - "createdAt": "2024-05-30T12:04:49.456Z", - "lastModified": "2024-05-30T12:04:49.456Z", + "createdAt": "2024-05-13T07:27:37.360Z", + "lastModified": "2024-05-13T07:27:37.360Z", "size": 6945, "formattedSize": "6.8 KB" } @@ -2565,8 +2565,8 @@ ], "meta": { "relativePath": "components/multi-select/code.mdx", - "createdAt": "2024-05-31T10:44:10.833Z", - "lastModified": "2024-05-31T10:44:10.833Z", + "createdAt": "2024-05-21T09:12:11.375Z", + "lastModified": "2024-05-21T09:12:11.375Z", "size": 44191, "formattedSize": "43.2 KB" } @@ -2592,8 +2592,8 @@ ], "meta": { "relativePath": "components/multi-select/guidance.mdx", - "createdAt": "2024-05-30T12:04:49.456Z", - "lastModified": "2024-05-30T12:04:49.456Z", + "createdAt": "2024-05-13T07:27:37.360Z", + "lastModified": "2024-05-13T07:27:37.360Z", "size": 1951, "formattedSize": "1.9 KB" } @@ -2631,9 +2631,9 @@ }, { "id": "components__page-header__codex", - "contents": "\nimport {\n IcPageHeader,\n IcButton,\n IcStepper,\n IcStep,\n SlottedSVG,\n IcTextField,\n IcNavigationItem,\n IcBreadcrumb,\n IcBreadcrumbGroup,\n IcSectionContainer,\n IcChip,\n IcTypography,\n} from \"@ukic/react\";\n\nimport { NavLink, MemoryRouter } from \"react-router-dom\";\n\n## Component demo\n\nexport const snippets = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n \n \n Create coffee\n \n \n Filter coffee\n \n \n \n \n \n \n \n`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\n \n \n Create coffee\n \n \n Filter coffee\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 Create coffee\n \n \n Filter coffee\n \n \n \n \n \n \n \n \n\n\n## Page header details\n\n\n\n## Variants\n\n### Size small\n\nexport const snippetsSmall = [\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### With breadcrumb navigation\n\nexport const withBreadcrumbNavigation = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\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 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### With actions, input and stepper\n\nexport const withActionsInputStepper = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n \n Create coffee\n Filter coffee\n \n \n \n \n \n \n\n `,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\n \n \n Create coffee\n \n \n Filter coffee\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 Create coffee\n \n \n Filter coffee\n \n \n \n \n \n \n \n \n\n\n### With actions, input and tabs\n\nexport const withActionsInputTabs = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n \n Create coffee\n Filter coffee\n \n \n \n \n \n\n `,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\n \n \n Create coffee\n \n \n Filter coffee\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 Create coffee\n \n \n Filter coffee\n \n \n \n \n \n\n\n### With React Router\n\nexport const withReactRouter = [\n {\n technology: \"React\",\n snippets: {\n short: `\n \n \n Create coffee\n \n \n \n \n Filter coffee\n \n Method\n \n \n Ingredients\n \n \n \n \n \n This page is about our Latte making methods}/>\n This page is about the ingredients used in our Latte}/>\n \n \n\n `,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n textField: {\n '@media (max-width: 576px)': {\n width: '280px;'\n }\n }\n })\n const classes = useStyles();\n return(\n {shortCode}\n )`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n text: {\n '@media (max-width: 576px)': {\n width: '280px;'\n }\n }\n })\n const classes = useStyles();\n return(\n {shortCode}\n )`,\n },\n ],\n },\n },\n];\n\n\n \n \n \n \n Create coffee\n \n \n \n \n \n Filter coffee\n \n \n \n Method\n \n \n \n \n Ingredients\n \n \n \n \n \n \n\n\n### With Slots\n\nexport const withSlots = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n Latte recipe\n A Latte is a popular Italian coffee, made with espresso, steamed milk and a thin layer of foam.\n \n \n \n \n \n \n \n`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\n \n Latte recipe\n \n \n A Latte is a popular Italian coffee, made with espresso, steamed milk and\n a thin layer of foam.\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 Latte recipe\n \n \n A Latte is a popular Italian coffee, made with espresso, steamed milk and\n a thin layer of foam.\n \n \n \n \n \n \n \n \n \n\n", + "contents": "\nimport {\n IcPageHeader,\n IcButton,\n IcStepper,\n IcStep,\n SlottedSVG,\n IcTextField,\n IcNavigationItem,\n IcBreadcrumb,\n IcBreadcrumbGroup,\n IcSectionContainer,\n IcChip,\n IcTypography,\n} from \"@ukic/react\";\n\nimport { NavLink, MemoryRouter } from \"react-router-dom\";\n\n## Component demo\n\nexport const snippets = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n \n \n Create coffee\n \n \n Filter coffee\n \n \n \n \n \n \n \n`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\n \n \n Create coffee\n \n \n Filter coffee\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 Create coffee\n \n \n Filter coffee\n \n \n \n \n \n \n \n \n\n\n## Page header details\n\n\n\n## Variants\n\n### Size small\n\nexport const snippetsSmall = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n`,\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### With breadcrumb navigation\n\nexport const withBreadcrumbNavigation = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\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 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### With actions, input and stepper\n\nexport const withActionsInputStepper = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n \n Create coffee\n Filter coffee\n \n \n \n \n \n \n\n `,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\n \n \n Create coffee\n \n \n Filter coffee\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 Create coffee\n \n \n Filter coffee\n \n \n \n \n \n \n \n \n\n\n### With actions, input and tabs\n\nexport const withActionsInputTabs = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n \n Create coffee\n Filter coffee\n \n \n \n \n \n\n `,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\n \n \n Create coffee\n \n \n Filter coffee\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 Create coffee\n \n \n Filter coffee\n \n \n \n \n \n\n\n### With React Router\n\nexport const withReactRouter = [\n {\n technology: \"React\",\n snippets: {\n short: `\n \n \n Create coffee\n \n \n \n \n Filter coffee\n \n Method\n \n \n Ingredients\n \n \n \n \n \n This page is about our Latte making methods}/>\n This page is about the ingredients used in our Latte}/>\n \n \n\n `,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n textField: {\n '@media (max-width: 576px)': {\n width: '280px;'\n }\n }\n })\n const classes = useStyles();\n return(\n {shortCode}\n )`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n text: {\n '@media (max-width: 576px)': {\n width: '280px;'\n }\n }\n })\n const classes = useStyles();\n return(\n {shortCode}\n )`,\n },\n ],\n },\n },\n];\n\n\n \n \n \n \n Create coffee\n \n \n \n \n \n Filter coffee\n \n \n \n Method\n \n \n \n \n Ingredients\n \n \n \n \n \n \n\n\n### With Slots\n\nexport const withSlots = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n Latte recipe\n A Latte is a popular Italian coffee, made with espresso, steamed milk and a thin layer of foam.\n \n \n \n \n \n \n \n`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\n \n Latte recipe\n \n \n A Latte is a popular Italian coffee, made with espresso, steamed milk and\n a thin layer of foam.\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 Latte recipe\n \n \n A Latte is a popular Italian coffee, made with espresso, steamed milk and\n a thin layer of foam.\n \n \n \n \n \n \n \n \n \n\n", "path": "/components/page-header/code", - "date": "2024-05-31", + "date": "2024-05-02", "title": "Page header", "status": "BETA", "subTitle": "A page header defines the top of the page content and is a consistent way to show page context, key actions and secondary navigation.", @@ -2654,9 +2654,9 @@ ], "meta": { "relativePath": "components/page-header/code.mdx", - "createdAt": "2024-05-31T10:44:10.825Z", - "lastModified": "2024-05-31T10:44:10.825Z", - "size": 19279, + "createdAt": "2024-05-21T09:12:11.375Z", + "lastModified": "2024-05-21T09:12:11.375Z", + "size": 19280, "formattedSize": "18.8 KB" } }, @@ -2686,8 +2686,8 @@ ], "meta": { "relativePath": "components/page-header/guidance.mdx", - "createdAt": "2024-05-30T12:04:49.460Z", - "lastModified": "2024-05-30T12:04:49.460Z", + "createdAt": "2024-05-13T07:27:37.364Z", + "lastModified": "2024-05-13T07:27:37.364Z", "size": 9062, "formattedSize": "8.8 KB" } @@ -2725,9 +2725,9 @@ }, { "id": "components__pagination__codex", - "contents": "\nimport { IcPagination } from \"@ukic/react\";\n\n## Component demo\n\nexport const snippets = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\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\n\n## Pagination details\n\n\n\n## Variants\n\n### Hide first and last page buttons\n\nexport const hideFirstLast = [\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### Hide current page (only in 'simple' type)\n\nexport const hideCurrent = [\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### Appearance\n\nexport const appearance = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n`,\n long: `.dark-background {\n background-color: #2c2f34;\n }\n \n \n {shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\n`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n darkBackground: {\n backgroundColor: \"#2c2f34\",\n }\n});\nconst classes = useStyles();\nreturn (\n <>\n {shortCode}\n \n)`,\n },\n {\n language: \"Javascript\",\n snippet: `<>\n {shortCode}\n`,\n },\n ],\n },\n },\n];\n\n\n \n
\n \n
\n\n\n### Boundary and Adjacent items set\n\nexport const boundaryAdjacent = [\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### Disabled\n\nexport const disabled = [\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### Label\n\nexport const label = [\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### Default page\n\nexport const defaultPage = [\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": "\nimport { IcPagination } 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\n\n## Pagination details\n\n\n\n## Variants\n\n### Hide first and last page buttons\n\nexport const hideFirstLast = [\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### Hide current page (only in 'simple' type)\n\nexport const hideCurrent = [\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### Appearance\n\nexport const appearance = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n`,\n long: `.dark-background {\n background-color: #2c2f34;\n }\n \n \n {shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\n`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n darkBackground: {\n backgroundColor: \"#2c2f34\",\n }\n});\nconst classes = useStyles();\nreturn (\n <>\n {shortCode}\n \n)`,\n },\n {\n language: \"Javascript\",\n snippet: `<>\n {shortCode}\n `,\n },\n ],\n },\n },\n];\n\n\n \n
\n \n
\n\n\n### Boundary and Adjacent items set\n\nexport const boundaryAdjacent = [\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### Disabled\n\nexport const disabled = [\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### Label\n\nexport const label = [\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### Default page\n\nexport const defaultPage = [\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", "path": "/components/pagination/code", - "date": "2024-05-31", + "date": "2024-05-02", "title": "Pagination", "status": "BETA", "subTitle": "Use the Pagination components to split large amounts of content into pages and navigate between them.", @@ -2748,10 +2748,10 @@ ], "meta": { "relativePath": "components/pagination/code.mdx", - "createdAt": "2024-05-31T10:44:10.933Z", - "lastModified": "2024-05-31T10:44:10.933Z", - "size": 7202, - "formattedSize": "7.0 KB" + "createdAt": "2024-05-21T09:12:11.375Z", + "lastModified": "2024-05-21T09:12:11.375Z", + "size": 7256, + "formattedSize": "7.1 KB" } }, { @@ -2780,8 +2780,8 @@ ], "meta": { "relativePath": "components/pagination/guidance.mdx", - "createdAt": "2024-05-30T12:04:49.464Z", - "lastModified": "2024-05-30T12:04:49.464Z", + "createdAt": "2024-05-13T07:27:37.368Z", + "lastModified": "2024-05-13T07:27:37.368Z", "size": 11142, "formattedSize": "10.9 KB" } @@ -2819,9 +2819,9 @@ }, { "id": "components__popover-menu__codex", - "contents": "\nimport { IcPopoverMenu, IcMenuItem, IcMenuGroup, IcButton } from \"@ukic/react\";\nimport { useRef } from \"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 \n \n \n \n \n \n \n \n \n
`,\n long: `{shortCode}\n`,\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 long: [\n {\n language: \"Typescript\",\n snippet: `const popoverEl = useRef(null);\nconst handleClick = () => {\n popoverEl.current.open = !popoverEl.current.open;\n};\nreturn (\n <>\n {shortCode}\n \n);`,\n },\n {\n language: \"Javascript\",\n snippet: `const popoverEl = useRef(null);\nconst handleClick = () => {\n popoverEl.current.open = !popoverEl.current.open;\n};\nreturn (\n <>\n {shortCode}\n \n);`,\n },\n ],\n },\n },\n];\n\nexport const DemoPopover = () => {\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## Popover menu details\n\n\n\n## Menu item details\n\n\n\n## Menu group details\n\n\n\n## Variants\n\n### With button variations\n\nexport const snippetsButtons = [\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 \n \n \n
`,\n long: `{shortCode}\n`,\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 \n`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const popoverEl = useRef(null);\nconst handleClick = () => {\n popoverEl.current.open = !popoverEl.current.open;\n};\nreturn (\n <>\n {shortCode}\n \n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const popoverEl = useRef(null);\nconst handleClick = () => {\n popoverEl.current.open = !popoverEl.current.open;\n};\nreturn (\n <>\n {shortCode}\n \n)`,\n },\n ],\n },\n },\n];\n\nexport const ButtonsPopover = () => {\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\n \n\n\n### With menu groups\n\nexport const snippetsGroups = [\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 {\n technology: \"React\",\n snippets: {\n short: `\n \n \n \n\n\n \n \n \n \n \n \n \n \n`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const popoverEl = useRef(null);\nconst handleClick = () => {\n popoverEl.current.open = !popoverEl.current.open;\n};\nreturn (\n <>\n {shortCode}\n \n);`,\n },\n {\n language: \"Javascript\",\n snippet: `const popoverEl = useRef(null);\nconst handleClick = () => {\n popoverEl.current.open = !popoverEl.current.open;\n};\nreturn (\n <>\n {shortCode}\n \n);`,\n },\n ],\n },\n },\n];\n\nexport const GroupsPopover = () => {\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", + "contents": "\nimport { IcPopoverMenu, IcMenuItem, IcMenuGroup, IcButton } from \"@ukic/react\";\nimport { useRef } from \"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 \n \n \n \n \n \n \n \n \n
`,\n long: `{shortCode}\n `,\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 long: [\n {\n language: \"Typescript\",\n snippet: `const popoverEl = useRef(null);\nconst handleClick = () => {\n popoverEl.current.open = !popoverEl.current.open;\n};\nreturn (\n <>\n {shortCode}\n \n);`,\n },\n {\n language: \"Javascript\",\n snippet: `const popoverEl = useRef(null);\nconst handleClick = () => {\n popoverEl.current.open = !popoverEl.current.open;\n};\nreturn (\n <>\n {shortCode}\n \n);`,\n },\n ],\n },\n },\n];\n\nexport const DemoPopover = () => {\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## Popover menu details\n\n\n\n## Menu item details\n\n\n\n## Menu group details\n\n\n\n## Variants\n\n### With button variations\n\nexport const snippetsButtons = [\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 \n \n \n
`,\n long: `{shortCode}\n `,\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 \n`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const popoverEl = useRef(null);\nconst handleClick = () => {\n popoverEl.current.open = !popoverEl.current.open;\n};\nreturn (\n <>\n {shortCode}\n \n);`,\n },\n {\n language: \"Javascript\",\n snippet: `const popoverEl = useRef(null);\nconst handleClick = () => {\n popoverEl.current.open = !popoverEl.current.open;\n};\nreturn (\n <>\n {shortCode}\n \n);`,\n },\n ],\n },\n },\n];\n\nexport const ButtonsPopover = () => {\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\n \n\n\n### With menu groups\n\nexport const snippetsGroups = [\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 {\n technology: \"React\",\n snippets: {\n short: `\n \n \n \n \n \n \n \n \n \n \n \n \n \n `,\n long: [\n {\n language: \"Typescript\",\n snippet: `const popoverEl = useRef(null);\nconst handleClick = () => {\n popoverEl.current.open = !popoverEl.current.open;\n};\nreturn (\n <>\n {shortCode}\n \n);`,\n },\n {\n language: \"Javascript\",\n snippet: `const popoverEl = useRef(null);\nconst handleClick = () => {\n popoverEl.current.open = !popoverEl.current.open;\n};\nreturn (\n <>\n {shortCode}\n \n);`,\n },\n ],\n },\n },\n];\n\nexport const GroupsPopover = () => {\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", "path": "/components/popover-menu/code", - "date": "2024-05-31", + "date": "2024-05-02", "title": "Popover menu", "status": "BETA", "subTitle": "Use popover menus to place actions inside a menu that overlays other page content when opened.", @@ -2842,10 +2842,10 @@ ], "meta": { "relativePath": "components/popover-menu/code.mdx", - "createdAt": "2024-05-31T10:44:10.849Z", - "lastModified": "2024-05-31T10:44:10.849Z", - "size": 14638, - "formattedSize": "14.3 KB" + "createdAt": "2024-05-21T09:12:11.375Z", + "lastModified": "2024-05-21T09:12:11.375Z", + "size": 14820, + "formattedSize": "14.5 KB" } }, { @@ -2874,8 +2874,8 @@ ], "meta": { "relativePath": "components/popover-menu/guidance.mdx", - "createdAt": "2024-05-30T12:04:49.464Z", - "lastModified": "2024-05-30T12:04:49.464Z", + "createdAt": "2024-05-13T07:27:37.372Z", + "lastModified": "2024-05-13T07:27:37.372Z", "size": 11284, "formattedSize": "11.0 KB" } @@ -2915,7 +2915,7 @@ "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: ` console.log(ev.detail.value)}\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 \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### With helper text\n\nexport const withHelperText = [\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: `{shortCode}`,\n },\n {\n language: \"Javascript\",\n snippet: `{shortCode}`,\n },\n ],\n },\n },\n];\n\n\n \n \n \n \n\n\n### Size small\n\nexport const smallSnippet = [\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: `{shortCode}`,\n },\n {\n language: \"Javascript\",\n snippet: `{shortCode}`,\n },\n ],\n },\n },\n];\n\n\n \n \n \n \n\n\n### With validation\n\nexport const withValidation = [\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: `{shortCode}`,\n },\n {\n language: \"Javascript\",\n snippet: `{shortCode}`,\n },\n ],\n },\n },\n];\n\n\n \n \n \n \n\n", "path": "/components/radio/code", - "date": "2024-05-31", + "date": "2024-05-02", "title": "Radio button", "status": "BETA", "subTitle": "Radio buttons let people select a single option from a list.", @@ -2936,8 +2936,8 @@ ], "meta": { "relativePath": "components/radio/code.mdx", - "createdAt": "2024-05-31T10:44:10.897Z", - "lastModified": "2024-05-31T10:44:10.897Z", + "createdAt": "2024-05-21T09:12:11.375Z", + "lastModified": "2024-05-21T09:12:11.375Z", "size": 11057, "formattedSize": "10.8 KB" } @@ -2968,8 +2968,8 @@ ], "meta": { "relativePath": "components/radio/guidance.mdx", - "createdAt": "2024-05-30T12:04:49.468Z", - "lastModified": "2024-05-30T12:04:49.468Z", + "createdAt": "2024-05-13T07:27:37.372Z", + "lastModified": "2024-05-13T07:27:37.372Z", "size": 8265, "formattedSize": "8.1 KB" } @@ -3007,9 +3007,9 @@ }, { "id": "components__search-bar__codex", - "contents": "\nimport { IcSearchBar, IcTypography } from \"@ukic/react\";\n\n## Component demo\n\nexport const snippets = [\n {\n technology: \"Web component\",\n snippets: {\n short: ``,\n long: `.parent-container {\n padding: 16px;\n }\n\n\n
\n {shortCode}\n
\n `,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: ` console.log(ev.detail.value)}\n onIcSubmitSearch={(ev) => console.log(ev.detail.value)}\n placeholder=\"Start typing to search…\"\n/>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const options = [\n { label: \"Espresso\", value: \"espresso\" },\n { label: \"Double Espresso\", value: \"doubleespresso\" },\n { label: \"Flat White\", value: \"flatwhite\" },\n { label: \"Cappuccino\", value: \"cappuccino\" },\n { label: \"Americano\", value: \"americano\" },\n { label: \"Mocha\", value: \"mocha\" },\n];\nconst useStyles = createUseStyles({\n parentContainer: {\n padding: \"16px\",\n },\n});\nconst classes = useStyles();\nreturn (\n
\n {shortCode}\n
\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const options = [\n { label: \"Espresso\", value: \"espresso\" },\n { label: \"Double Espresso\", value: \"doubleespresso\" },\n { label: \"Flat White\", value: \"flatwhite\" },\n { label: \"Cappuccino\", value: \"cappuccino\" },\n { label: \"Americano\", value: \"americano\" },\n { label: \"Mocha\", value: \"mocha\" },\n];\nconst useStyles = createUseStyles({\n parentContainer: {\n padding: \"16px\",\n },\n});\nconst classes = useStyles();\nreturn (\n
\n {shortCode}\n
\n)`,\n },\n ],\n },\n },\n];\n\n\n console.log(\"onIcChange\", ev.detail.value)}\n onIcSubmitSearch={(ev) => console.log(\"onIcSubmitSearch\", ev.detail.value)}\n placeholder=\"Start typing to search…\"\n />\n\n\n## Search bar details\n\n\n\n## Variants\n\n### With options (no filtering)\n\nexport const optionsNoFiltering = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n
\n\n

All options will be displayed as you type

\n`,\n long: `.parent-container {\n padding: 16px;\n }\n\n\n
\n {shortCode}\n
\n `,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\n
\n\n

All options will be displayed as you type

\n`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const options = [\n { label: \"Espresso\", value: \"espresso\" },\n { label: \"Double Espresso\", value: \"doubleespresso\" },\n { label: \"Flat White\", value: \"flatwhite\" },\n { label: \"Cappuccino\", value: \"cappuccino\" },\n { label: \"Americano\", value: \"americano\" },\n { label: \"Mocha\", value: \"mocha\" },\n];\nconst useStyles = createUseStyles({\n parentContainer: {\n padding: \"16px\",\n },\n});\nconst classes = useStyles();\nreturn (\n
\n {shortCode}\n
\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const options = [\n { label: \"Espresso\", value: \"espresso\" },\n { label: \"Double Espresso\", value: \"doubleespresso\" },\n { label: \"Flat White\", value: \"flatwhite\" },\n { label: \"Cappuccino\", value: \"cappuccino\" },\n { label: \"Americano\", value: \"americano\" },\n { label: \"Mocha\", value: \"mocha\" },\n];\nconst useStyles = createUseStyles({\n parentContainer: {\n padding: \"16px\",\n },\n});\nconst classes = useStyles();\nreturn (\n
\n {shortCode}\n
\n)`,\n },\n ],\n },\n },\n];\n\n\n \n
\n All options will be displayed as you type\n\n\n### With helper text\n\nexport const withHelperText = [\n {\n technology: \"Web component\",\n snippets: {\n short: ``,\n long: `.parent-container {\n padding: 16px;\n }\n\n\n
\n {shortCode}\n
\n `,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: ``,\n long: [\n {\n language: \"Typescript\",\n snippet: `const options = [\n { label: \"Espresso\", value: \"espresso\" },\n { label: \"Double Espresso\", value: \"doubleespresso\" },\n { label: \"Flat White\", value: \"flatwhite\" },\n { label: \"Cappuccino\", value: \"cappuccino\" },\n { label: \"Americano\", value: \"americano\" },\n { label: \"Mocha\", value: \"mocha\" },\n];\nconst useStyles = createUseStyles({\n parentContainer: {\n padding: \"16px\",\n },\n});\nconst classes = useStyles();\nreturn (\n
\n {shortCode}\n
\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const options = [\n { label: \"Espresso\", value: \"espresso\" },\n { label: \"Double Espresso\", value: \"doubleespresso\" },\n { label: \"Flat White\", value: \"flatwhite\" },\n { label: \"Cappuccino\", value: \"cappuccino\" },\n { label: \"Americano\", value: \"americano\" },\n { label: \"Mocha\", value: \"mocha\" },\n];\nconst useStyles = createUseStyles({\n parentContainer: {\n padding: \"16px\",\n },\n});\nconst classes = useStyles();\nreturn (\n
\n {shortCode}\n
\n)`,\n },\n ],\n },\n },\n];\n\n\n \n\n\n### With hidden label\n\nexport const withHiddenLabel = [\n {\n technology: \"Web component\",\n snippets: {\n short: ``,\n long: `.parent-container {\n padding: 16px;\n }\n\n\n
\n {shortCode}\n
\n `,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: ``,\n long: [\n {\n language: \"Typescript\",\n snippet: `const options = [\n { label: \"Espresso\", value: \"espresso\" },\n { label: \"Double Espresso\", value: \"doubleespresso\" },\n { label: \"Flat White\", value: \"flatwhite\" },\n { label: \"Cappuccino\", value: \"cappuccino\" },\n { label: \"Americano\", value: \"americano\" },\n { label: \"Mocha\", value: \"mocha\" },\n];\nconst useStyles = createUseStyles({\n parentContainer: {\n padding: \"16px\",\n },\n});\nconst classes = useStyles();\nreturn (\n
\n {shortCode}\n
\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const options = [\n { label: \"Espresso\", value: \"espresso\" },\n { label: \"Double Espresso\", value: \"doubleespresso\" },\n { label: \"Flat White\", value: \"flatwhite\" },\n { label: \"Cappuccino\", value: \"cappuccino\" },\n { label: \"Americano\", value: \"americano\" },\n { label: \"Mocha\", value: \"mocha\" },\n];\nconst useStyles = createUseStyles({\n parentContainer: {\n padding: \"16px\",\n },\n});\nconst classes = useStyles();\nreturn (\n
\n {shortCode}\n
\n)`,\n },\n ],\n },\n },\n];\n\n\n \n\n\n### Disabled\n\nexport const disabled = [\n {\n technology: \"Web component\",\n snippets: {\n short: ``,\n long: `.parent-container {\n padding: 16px;\n }\n\n\n
\n {shortCode}\n
\n `,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: ``,\n long: [\n {\n language: \"Typescript\",\n snippet: `const options = [\n { label: \"Espresso\", value: \"espresso\" },\n { label: \"Double Espresso\", value: \"doubleespresso\" },\n { label: \"Flat White\", value: \"flatwhite\" },\n { label: \"Cappuccino\", value: \"cappuccino\" },\n { label: \"Americano\", value: \"americano\" },\n { label: \"Mocha\", value: \"mocha\" },\n];\nconst useStyles = createUseStyles({\n parentContainer: {\n padding: \"16px\",\n },\n});\nconst classes = useStyles();\nreturn (\n
\n {shortCode}\n
\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const options = [\n { label: \"Espresso\", value: \"espresso\" },\n { label: \"Double Espresso\", value: \"doubleespresso\" },\n { label: \"Flat White\", value: \"flatwhite\" },\n { label: \"Cappuccino\", value: \"cappuccino\" },\n { label: \"Americano\", value: \"americano\" },\n { label: \"Mocha\", value: \"mocha\" },\n];\nconst useStyles = createUseStyles({\n parentContainer: {\n padding: \"16px\",\n },\n});\nconst classes = useStyles();\nreturn (\n
\n {shortCode}\n
\n)`,\n },\n ],\n },\n },\n];\n\n\n \n\n\n### Size small\n\nexport const sizeSmall = [\n {\n technology: \"Web component\",\n snippets: {\n short: ``,\n long: `.parent-container {\n padding: 16px;\n }\n\n\n
\n {shortCode}\n
\n `,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: ``,\n long: [\n {\n language: \"Typescript\",\n snippet: `const options = [\n { label: \"Espresso\", value: \"espresso\" },\n { label: \"Double Espresso\", value: \"doubleespresso\" },\n { label: \"Flat White\", value: \"flatwhite\" },\n { label: \"Cappuccino\", value: \"cappuccino\" },\n { label: \"Americano\", value: \"americano\" },\n { label: \"Mocha\", value: \"mocha\" },\n];\nconst useStyles = createUseStyles({\n parentContainer: {\n padding: \"16px\",\n },\n});\nconst classes = useStyles();\nreturn (\n
\n {shortCode}\n
\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const options = [\n { label: \"Espresso\", value: \"espresso\" },\n { label: \"Double Espresso\", value: \"doubleespresso\" },\n { label: \"Flat White\", value: \"flatwhite\" },\n { label: \"Cappuccino\", value: \"cappuccino\" },\n { label: \"Americano\", value: \"americano\" },\n { label: \"Mocha\", value: \"mocha\" },\n];\nconst useStyles = createUseStyles({\n parentContainer: {\n padding: \"16px\",\n },\n});\nconst classes = useStyles();\nreturn (\n
\n {shortCode}\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: 16px;\n }\n\n\n
\n {shortCode}\n
\n `,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: ``,\n long: [\n {\n language: \"Typescript\",\n snippet: `const mockData = [\n { label: \"Espresso\", value: \"espresso\" },\n { label: \"Double Espresso\", value: \"doubleespresso\" },\n { label: \"Flat White\", value: \"flatwhite\" },\n { label: \"Cappuccino\", value: \"cappucino\" },\n { label: \"Americano\", value: \"americano\" },\n { label: \"Mocha\", value: \"mocha\" },\n];\nconst [results, setResults] = useState([]);\nconst changeHandler = (event: { detail: { value: string; }; }) => {\n const searchFor = event.detail.value;\n if (searchFor.length > 1) {\n const mockAPI = (query: string) => {\n const filteredResults = mockData.filter((item) =>\n item.label.toLowerCase().includes(query.toLowerCase()),\n );\n return new Promise((resolve) => {\n setTimeout(() => resolve(filteredResults), 1000);\n });\n };\n mockAPI(searchFor).then((newResults: IcMenuOption[]) => setResults(newResults));\n } else {\n setResults([]);\n }\n};\nconst useStyles = createUseStyles({\n parentContainer: {\n padding: \"16px\",\n },\n});\nconst classes = useStyles();\nreturn (\n
\n {shortCode}\n
\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const mockData = [\n { label: \"Espresso\", value: \"espresso\" },\n { label: \"Double Espresso\", value: \"doubleespresso\" },\n { label: \"Flat White\", value: \"flatwhite\" },\n { label: \"Cappuccino\", value: \"cappucino\" },\n { label: \"Americano\", value: \"americano\" },\n { label: \"Mocha\", value: \"mocha\" },\n];\nconst [results, setResults] = useState([]);\nconst changeHandler = (event) =>{\n const searchFor = event.detail.value;\n if (searchFor.length > 1) {\n const mockAPI = (query) => {\n const filteredResults = mockData.filter((item) =>\n item.label.toLowerCase().includes(query.toLowerCase())\n );\n return new Promise((resolve) => {\n setTimeout(() => resolve(filteredResults), 1000);\n });\n };\n mockAPI(searchFor).then((newResults) => setResults(newResults));\n } else {\n setResults([]);\n }\n}\nconst useStyles = createUseStyles({\n parentContainer: {\n padding: \"16px\",\n },\n});\nconst classes = useStyles();\nreturn (\n
\n {shortCode}\n
\n)`,\n },\n ],\n },\n },\n];\n\nexport const CustomFilterExample = () => {\n const mockData = [\n { label: \"Espresso\", value: \"espresso\" },\n { label: \"Double Espresso\", value: \"doubleespresso\" },\n { label: \"Flat White\", value: \"flatwhite\" },\n { label: \"Cappuccino\", value: \"cappucino\" },\n { label: \"Americano\", value: \"americano\" },\n { label: \"Mocha\", value: \"mocha\" },\n ];\n const [results, setResults] = React.useState([]);\n const changeHandler = (event) => {\n const searchFor = event.detail.value;\n if (searchFor.length > 1) {\n const mockAPI = (query) => {\n const filteredResults = mockData.filter((item) =>\n item.label.toLowerCase().includes(query.toLowerCase())\n );\n return new Promise((resolve) => {\n setTimeout(() => resolve(filteredResults), 1000);\n });\n };\n mockAPI(searchFor).then((newResults) => setResults(newResults));\n } else {\n setResults([]);\n }\n };\n return (\n \n );\n};\n\n\n \n\n", + "contents": "\nimport { IcSearchBar, IcTypography } from \"@ukic/react\";\n\n## Component demo\n\nexport const snippets = [\n {\n technology: \"Web component\",\n snippets: {\n short: ``,\n long: `{shortCode}\n `,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: ` console.log(ev.detail.value)}\n onIcSubmitSearch={(ev) => console.log(ev.detail.value)}\n placeholder=\"Start typing to search…\"\n/>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const options = [\n { label: \"Espresso\", value: \"espresso\" },\n { label: \"Double Espresso\", value: \"doubleespresso\" },\n { label: \"Flat White\", value: \"flatwhite\" },\n { label: \"Cappuccino\", value: \"cappuccino\" },\n { label: \"Americano\", value: \"americano\" },\n { label: \"Mocha\", value: \"mocha\" },\n ]\n \n return (\n {shortCode}\n )`,\n },\n {\n language: \"Javascript\",\n snippet: `const options = [\n { label: \"Espresso\", value: \"espresso\" },\n { label: \"Double Espresso\", value: \"doubleespresso\" },\n { label: \"Flat White\", value: \"flatwhite\" },\n { label: \"Cappuccino\", value: \"cappuccino\" },\n { label: \"Americano\", value: \"americano\" },\n { label: \"Mocha\", value: \"mocha\" },\n ]\n \n return (\n {shortCode}\n )`,\n },\n ],\n },\n },\n];\n\n\n console.log(\"onIcChange\", ev.detail.value)}\n onIcSubmitSearch={(ev) => console.log(\"onIcSubmitSearch\", ev.detail.value)}\n placeholder=\"Start typing to search…\"\n />\n\n\n## Search bar details\n\n\n\n## Variants\n\n### With options (no filtering)\n\nexport const optionsNoFiltering = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n\n
\n\n All options will be displayed as you type\n`,\n long: `{shortCode}\n `,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\n
\nAll options will be displayed as you type`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const options = [\n { label: \"Espresso\", value: \"espresso\" },\n { label: \"Double Espresso\", value: \"doubleespresso\" },\n { label: \"Flat White\", value: \"flatwhite\" },\n { label: \"Cappuccino\", value: \"cappuccino\" },\n { label: \"Americano\", value: \"americano\" },\n { label: \"Mocha\", value: \"mocha\" },\n ]\n \n return (\n <>\n {shortCode}\n \n )`,\n },\n {\n language: \"Javascript\",\n snippet: `const options = [\n { label: \"Espresso\", value: \"espresso\" },\n { label: \"Double Espresso\", value: \"doubleespresso\" },\n { label: \"Flat White\", value: \"flatwhite\" },\n { label: \"Cappuccino\", value: \"cappuccino\" },\n { label: \"Americano\", value: \"americano\" },\n { label: \"Mocha\", value: \"mocha\" },\n ]\n \n return (\n <>\n {shortCode}\n \n )`,\n },\n ],\n },\n },\n];\n\n\n \n
\n \n All options will be displayed as you type\n \n\n\n### With helper text\n\nexport const withHelperText = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n`,\n long: `{shortCode}\n `,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: ``,\n long: [\n {\n language: \"Typescript\",\n snippet: `const options = [\n { label: \"Espresso\", value: \"espresso\" },\n { label: \"Double Espresso\", value: \"doubleespresso\" },\n { label: \"Flat White\", value: \"flatwhite\" },\n { label: \"Cappuccino\", value: \"cappuccino\" },\n { label: \"Americano\", value: \"americano\" },\n { label: \"Mocha\", value: \"mocha\" },\n ]\n \n return (\n {shortCode}\n )`,\n },\n {\n language: \"Javascript\",\n snippet: `const options = [\n { label: \"Espresso\", value: \"espresso\" },\n { label: \"Double Espresso\", value: \"doubleespresso\" },\n { label: \"Flat White\", value: \"flatwhite\" },\n { label: \"Cappuccino\", value: \"cappuccino\" },\n { label: \"Americano\", value: \"americano\" },\n { label: \"Mocha\", value: \"mocha\" },\n ]\n \n return (\n {shortCode}\n )`,\n },\n ],\n },\n },\n];\n\n\n \n\n\n### With hidden label\n\nexport const withHiddenLabel = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n`,\n long: `{shortCode}\n `,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: ``,\n long: [\n {\n language: \"Typescript\",\n snippet: `const options = [\n { label: \"Espresso\", value: \"espresso\" },\n { label: \"Double Espresso\", value: \"doubleespresso\" },\n { label: \"Flat White\", value: \"flatwhite\" },\n { label: \"Cappuccino\", value: \"cappuccino\" },\n { label: \"Americano\", value: \"americano\" },\n { label: \"Mocha\", value: \"mocha\" },\n ]\n \n return (\n {shortCode}\n )`,\n },\n {\n language: \"Javascript\",\n snippet: `const options = [\n { label: \"Espresso\", value: \"espresso\" },\n { label: \"Double Espresso\", value: \"doubleespresso\" },\n { label: \"Flat White\", value: \"flatwhite\" },\n { label: \"Cappuccino\", value: \"cappuccino\" },\n { label: \"Americano\", value: \"americano\" },\n { label: \"Mocha\", value: \"mocha\" },\n ]\n \n return (\n {shortCode}\n )`,\n },\n ],\n },\n },\n];\n\n\n \n\n\n### Disabled\n\nexport const disabled = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n`,\n long: `{shortCode}\n `,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: ``,\n long: [\n {\n language: \"Typescript\",\n snippet: `const options = [\n { label: \"Espresso\", value: \"espresso\" },\n { label: \"Double Espresso\", value: \"doubleespresso\" },\n { label: \"Flat White\", value: \"flatwhite\" },\n { label: \"Cappuccino\", value: \"cappuccino\" },\n { label: \"Americano\", value: \"americano\" },\n { label: \"Mocha\", value: \"mocha\" },\n ]\n \n return (\n {shortCode}\n )`,\n },\n {\n language: \"Javascript\",\n snippet: `const options = [\n { label: \"Espresso\", value: \"espresso\" },\n { label: \"Double Espresso\", value: \"doubleespresso\" },\n { label: \"Flat White\", value: \"flatwhite\" },\n { label: \"Cappuccino\", value: \"cappuccino\" },\n { label: \"Americano\", value: \"americano\" },\n { label: \"Mocha\", value: \"mocha\" },\n ]\n \n return (\n {shortCode}\n )`,\n },\n ],\n },\n },\n];\n\n\n \n\n\n### Size small\n\nexport const sizeSmall = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n`,\n long: `{shortCode}\n `,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: ``,\n long: [\n {\n language: \"Typescript\",\n snippet: `const options = [\n { label: \"Espresso\", value: \"espresso\" },\n { label: \"Double Espresso\", value: \"doubleespresso\" },\n { label: \"Flat White\", value: \"flatwhite\" },\n { label: \"Cappuccino\", value: \"cappuccino\" },\n { label: \"Americano\", value: \"americano\" },\n { label: \"Mocha\", value: \"mocha\" },\n ]\n \n return (\n {shortCode}\n )`,\n },\n {\n language: \"Javascript\",\n snippet: `const options = [\n { label: \"Espresso\", value: \"espresso\" },\n { label: \"Double Espresso\", value: \"doubleespresso\" },\n { label: \"Flat White\", value: \"flatwhite\" },\n { label: \"Cappuccino\", value: \"cappuccino\" },\n { label: \"Americano\", value: \"americano\" },\n { label: \"Mocha\", value: \"mocha\" },\n ]\n \n return (\n {shortCode}\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`,\n long: `{shortCode}\n `,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: ``,\n long: [\n {\n language: \"Typescript\",\n snippet: `const mockData = [\n { label: \"Espresso\", value: \"espresso\" },\n { label: \"Double Espresso\", value: \"doubleespresso\" },\n { label: \"Flat White\", value: \"flatwhite\" },\n { label: \"Cappuccino\", value: \"cappucino\" },\n { label: \"Americano\", value: \"americano\" },\n { label: \"Mocha\", value: \"mocha\" },\n];\nconst [results, setResults] = useState([]);\nconst changeHandler = (event) =>{\n const searchFor = event.detail.value;\n if (searchFor.length > 1) {\n const mockAPI = (query) => {\n const filteredResults = mockData.filter((item) =>\n item.label.toLowerCase().includes(query.toLowerCase())\n );\n return new Promise((resolve) => {\n setTimeout(() => resolve(filteredResults), 1000);\n });\n };\n mockAPI(searchFor).then((newResults) => setResults(newResults));\n } else {\n setResults([]);\n }\n}\nreturn(\n {shortCode}\n);`,\n },\n {\n language: \"Javascript\",\n snippet: `const mockData = [\n { label: \"Espresso\", value: \"espresso\" },\n { label: \"Double Espresso\", value: \"doubleespresso\" },\n { label: \"Flat White\", value: \"flatwhite\" },\n { label: \"Cappuccino\", value: \"cappucino\" },\n { label: \"Americano\", value: \"americano\" },\n { label: \"Mocha\", value: \"mocha\" },\n];\nconst [results, setResults] = useState([]);\nconst changeHandler = (event) =>{\n const searchFor = event.detail.value;\n if (searchFor.length > 1) {\n const mockAPI = (query) => {\n const filteredResults = mockData.filter((item) =>\n item.label.toLowerCase().includes(query.toLowerCase())\n );\n return new Promise((resolve) => {\n setTimeout(() => resolve(filteredResults), 1000);\n });\n };\n mockAPI(searchFor).then((newResults) => setResults(newResults));\n } else {\n setResults([]);\n }\n}\nreturn(\n {shortCode}\n);`,\n },\n ],\n },\n },\n];\n\nexport const CustomFilterExample = () => {\n const mockData = [\n { label: \"Espresso\", value: \"espresso\" },\n { label: \"Double Espresso\", value: \"doubleespresso\" },\n { label: \"Flat White\", value: \"flatwhite\" },\n { label: \"Cappuccino\", value: \"cappucino\" },\n { label: \"Americano\", value: \"americano\" },\n { label: \"Mocha\", value: \"mocha\" },\n ];\n const [results, setResults] = React.useState([]);\n const changeHandler = (event) => {\n const searchFor = event.detail.value;\n if (searchFor.length > 1) {\n const mockAPI = (query) => {\n const filteredResults = mockData.filter((item) =>\n item.label.toLowerCase().includes(query.toLowerCase())\n );\n return new Promise((resolve) => {\n setTimeout(() => resolve(filteredResults), 1000);\n });\n };\n mockAPI(searchFor).then((newResults) => setResults(newResults));\n } else {\n setResults([]);\n }\n };\n return (\n \n );\n};\n\n\n \n\n", "path": "/components/search-bar/code", - "date": "2024-05-31", + "date": "2024-05-02", "title": "Search bar", "status": "BETA", "subTitle": "The search bar allows users to search for information using keywords or phrases.", @@ -3030,10 +3030,10 @@ ], "meta": { "relativePath": "components/search-bar/code.mdx", - "createdAt": "2024-05-31T10:44:10.953Z", - "lastModified": "2024-05-31T10:44:10.953Z", - "size": 22960, - "formattedSize": "22.4 KB" + "createdAt": "2024-05-21T09:12:11.375Z", + "lastModified": "2024-05-21T09:12:11.375Z", + "size": 20198, + "formattedSize": "19.7 KB" } }, { @@ -3062,8 +3062,8 @@ ], "meta": { "relativePath": "components/search-bar/guidance.mdx", - "createdAt": "2024-05-30T12:04:49.468Z", - "lastModified": "2024-05-30T12:04:49.468Z", + "createdAt": "2024-05-13T07:27:37.376Z", + "lastModified": "2024-05-13T07:27:37.376Z", "size": 5837, "formattedSize": "5.7 KB" } @@ -3101,9 +3101,9 @@ }, { "id": "components__section-container__codex", - "contents": "\nimport { IcChip, IcSectionContainer } from \"@ukic/react\";\n\n## Component demo\n\nexport const snippetsDefault = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n
\n \n \n \n
\n`,\n long: `ic-section-container {\n border: 1px solid black;\n }\n .container {\n display: flex;\n justify-content: space-between;\n padding: 8px;\n }\n\n\n {shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\n
\n \n \n \n
\n`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n sectionContainer: {\n border: \"1px solid black\",\n margin: \"2px\",\n },\n divContainer: {\n display: \"flex\",\n justifyContent: \"space-between\",\n padding: \"8px\",\n },\n});\nconst classes = useStyles();\nreturn (\n {shortCode}\n)`,\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## Section container details\n\n\n\n## Variants\n\n### Center align\n\nexport const snippetsCenter = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n
\n \n \n \n
\n`,\n long: `ic-section-container {\n border: 1px solid black;\n width: 60%;\n }\n .container {\n display: flex;\n justify-content: space-between;\n padding: 8px;\n }\n \n \n {shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\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 \n \n\n\n### Full-width align\n\nexport const snippetsFullWidth = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n
\n \n \n \n
\n`,\n long: `ic-section-container {\n border: 1px solid black;\n width: 60%;\n }\n .container {\n display: flex;\n justify-content: space-between;\n padding: 8px;\n }\n \n \n {shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\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 \n \n\n\n### Full height\n\nexport const snippetsFullHeight = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n
\n \n \n \n
\n`,\n long: `ic-section-container {\n border: 1px solid black;\n width: 60%;\n }\n .container {\n display: flex;\n justify-content: space-between;\n padding: 8px;\n }\n \n \n {shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\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 \n \n\n", + "contents": "\nimport { IcChip, IcSectionContainer } from \"@ukic/react\";\n\n## Component demo\n\nexport const snippetsDefault = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n
\n \n \n \n
\n`,\n long: `ic-section-container {\n border: 1px solid black;\n }\n .container {\n display: flex;\n justify-content: space-between;\n padding: 8px;\n }\n \n \n {shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\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 \n \n\n\n## Section container details\n\n\n\n## Variants\n\n### Center align\n\nexport const snippetsCenter = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n
\n \n \n \n
\n`,\n long: `ic-section-container {\n border: 1px solid black;\n width: 60%;\n }\n .container {\n display: flex;\n justify-content: space-between;\n padding: 8px;\n }\n \n \n {shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\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 \n \n\n\n### Full-width align\n\nexport const snippetsFullWidth = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n
\n \n \n \n
\n`,\n long: `ic-section-container {\n border: 1px solid black;\n width: 60%;\n }\n .container {\n display: flex;\n justify-content: space-between;\n padding: 8px;\n }\n \n \n {shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\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 \n \n\n\n### Full height\n\nexport const snippetsFullHeight = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n
\n \n \n \n
\n`,\n long: `ic-section-container {\n border: 1px solid black;\n width: 60%;\n }\n .container {\n display: flex;\n justify-content: space-between;\n padding: 8px;\n }\n \n \n {shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\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 \n \n\n", "path": "/components/section-container/code", - "date": "2024-05-31", + "date": "2024-05-02", "title": "Section container", "status": "BETA", "subTitle": "Use the section container component to consistently align content within an app.", @@ -3124,10 +3124,10 @@ ], "meta": { "relativePath": "components/section-container/code.mdx", - "createdAt": "2024-05-31T10:44:10.849Z", - "lastModified": "2024-05-31T10:44:10.849Z", - "size": 7339, - "formattedSize": "7.2 KB" + "createdAt": "2024-05-21T09:12:11.375Z", + "lastModified": "2024-05-21T09:12:11.375Z", + "size": 7144, + "formattedSize": "7.0 KB" } }, { @@ -3156,8 +3156,8 @@ ], "meta": { "relativePath": "components/section-container/guidance.mdx", - "createdAt": "2024-05-30T12:04:49.468Z", - "lastModified": "2024-05-30T12:04:49.468Z", + "createdAt": "2024-05-13T07:27:37.380Z", + "lastModified": "2024-05-13T07:27:37.380Z", "size": 5569, "formattedSize": "5.4 KB" } @@ -3195,9 +3195,9 @@ }, { "id": "components__select__codex", - "contents": "\nimport { IcSelect } from \"@ukic/react\";\n\n## Component demo\n\nexport const snippets = [\n {\n technology: \"Web component\",\n snippets: {\n short: ``,\n long: `{shortCode}\n`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: ` console.log(event.detail.value)}\n/>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const options = [\n { label: \"Espresso\", value: \"espresso\" },\n { label: \"Double Espresso\", value: \"doubleespresso\" },\n { label: \"Flat White\", value: \"flatwhite\" },\n { label: \"Cappuccino\", value: \"cappuccino\" },\n { label: \"Americano\", value: \"americano\" },\n { label: \"Mocha\", value: \"mocha\" },\n ];\n return (\n {shortCode}\n )`,\n },\n {\n language: \"Javascript\",\n snippet: `const options = [\n { label: \"Espresso\", value: \"espresso\" },\n { label: \"Double Espresso\", value: \"doubleespresso\" },\n { label: \"Flat White\", value: \"flatwhite\" },\n { label: \"Cappuccino\", value: \"cappuccino\" },\n { label: \"Americano\", value: \"americano\" },\n { label: \"Mocha\", value: \"mocha\" },\n ];\n return (\n {shortCode}\n )`,\n },\n ],\n },\n },\n];\n\nexport const SelectExample = () => (\n console.log(event.detail.value)}\n />\n);\n\n\n \n\n\n## Select details\n\n\n\n## Variants\n\n### With clear button, descriptions, helper text and custom placeholder\n\nexport const snippetsWithExtras = [\n {\n technology: \"Web component\",\n snippets: {\n short: ``,\n long: `{shortCode}\n`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: ` console.log(event.detail.value)}\n/>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const options = [\n { label: \"Espresso\", value: \"espresso\" },\n { label: \"Double Espresso\", value: \"doubleespresso\" },\n { label: \"Flat White\", value: \"flatwhite\" },\n { label: \"Cappuccino\", value: \"cappuccino\" },\n { label: \"Americano\", value: \"americano\" },\n { label: \"Mocha\", value: \"mocha\" },\n ];\n return (\n {shortCode}\n )`,\n },\n {\n language: \"Javascript\",\n snippet: `const options = [\n { label: \"Espresso\", value: \"espresso\" },\n { label: \"Double Espresso\", value: \"doubleespresso\" },\n { label: \"Flat White\", value: \"flatwhite\" },\n { label: \"Cappuccino\", value: \"cappuccino\" },\n { label: \"Americano\", value: \"americano\" },\n { label: \"Mocha\", value: \"mocha\" },\n ];\n return (\n {shortCode}\n )`,\n },\n ],\n },\n },\n];\n\nexport const SelectExampleWithExtras = () => (\n console.log(event.detail.value)}\n />\n);\n\n\n \n\n\n### Disabled\n\nexport const snippetsDisabled = [\n {\n technology: \"Web component\",\n snippets: {\n short: ``,\n long: `{shortCode}\n`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: ` console.log(event.detail.value)}\n/>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const options = [\n { label: \"Espresso\", value: \"espresso\" },\n { label: \"Double Espresso\", value: \"doubleespresso\" },\n { label: \"Flat White\", value: \"flatwhite\" },\n { label: \"Cappuccino\", value: \"cappuccino\" },\n { label: \"Americano\", value: \"americano\" },\n { label: \"Mocha\", value: \"mocha\" },\n ];\n return (\n {shortCode}\n )`,\n },\n {\n language: \"Javascript\",\n snippet: `const options = [\n { label: \"Espresso\", value: \"espresso\" },\n { label: \"Double Espresso\", value: \"doubleespresso\" },\n { label: \"Flat White\", value: \"flatwhite\" },\n { label: \"Cappuccino\", value: \"cappuccino\" },\n { label: \"Americano\", value: \"americano\" },\n { label: \"Mocha\", value: \"mocha\" },\n ];\n return (\n {shortCode}\n )`,\n },\n ],\n },\n },\n];\n\nexport const SelectExampleDisabled = () => (\n console.log(event.detail.value)}\n />\n);\n\n\n \n\n\n### Options disabled\n\nexport const snippetsOptionDisabled = [\n {\n technology: \"Web component\",\n snippets: {\n short: ``,\n long: `{shortCode}\n`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: ` console.log(event.detail.value)}\n/>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const options = [\n { label: \"Espresso\", value: \"espresso\" },\n { label: \"Double Espresso\", value: \"doubleespresso\", disabled: true },\n { label: \"Flat White\", value: \"flatwhite\", disabled: true },\n { label: \"Cappuccino\", value: \"cappuccino\" },\n { label: \"Americano\", value: \"americano\" },\n { label: \"Mocha\", value: \"mocha\" },\n ];\n return (\n {shortCode}\n )`,\n },\n {\n language: \"Javascript\",\n snippet: `const options = [\n { label: \"Espresso\", value: \"espresso\" },\n { label: \"Double Espresso\", value: \"doubleespresso\", disabled: true },\n { label: \"Flat White\", value: \"flatwhite\", disabled: true },\n { label: \"Cappuccino\", value: \"cappuccino\" },\n { label: \"Americano\", value: \"americano\" },\n { label: \"Mocha\", value: \"mocha\" },\n ];\n return (\n {shortCode}\n )`,\n },\n ],\n },\n },\n];\n\nexport const SelectExampleOptionsDisabled = () => (\n console.log(event.detail.value)}\n />\n);\n\n\n \n\n\n### Size small\n\nexport const snippetsSmall = [\n {\n technology: \"Web component\",\n snippets: {\n short: ``,\n long: `{shortCode}\n`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: ` console.log(event.detail.value)}\n size=\"small\"\n/>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const options = [\n { label: \"Espresso\", value: \"espresso\" },\n { label: \"Double Espresso\", value: \"doubleespresso\" },\n { label: \"Flat White\", value: \"flatwhite\" },\n { label: \"Cappuccino\", value: \"cappuccino\" },\n { label: \"Americano\", value: \"americano\" },\n { label: \"Mocha\", value: \"mocha\" },\n ];\n return (\n {shortCode}\n )`,\n },\n {\n language: \"Javascript\",\n snippet: `const options = [\n { label: \"Espresso\", value: \"espresso\" },\n { label: \"Double Espresso\", value: \"doubleespresso\" },\n { label: \"Flat White\", value: \"flatwhite\" },\n { label: \"Cappuccino\", value: \"cappuccino\" },\n { label: \"Americano\", value: \"americano\" },\n { label: \"Mocha\", value: \"mocha\" },\n ];\n return (\n {shortCode}\n )`,\n },\n ],\n },\n },\n];\n\nexport const SelectExampleSmall = () => (\n console.log(event.detail.value)}\n size=\"small\"\n />\n);\n\n\n \n\n\n### Hidden label\n\nexport const snippetsHideLabel = [\n {\n technology: \"Web component\",\n snippets: {\n short: ``,\n long: `{shortCode}\n`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: ` console.log(event.detail.value)}\n/>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const options = [\n { label: \"Espresso\", value: \"espresso\" },\n { label: \"Double Espresso\", value: \"doubleespresso\" },\n { label: \"Flat White\", value: \"flatwhite\" },\n { label: \"Cappuccino\", value: \"cappuccino\" },\n { label: \"Americano\", value: \"americano\" },\n { label: \"Mocha\", value: \"mocha\" },\n ];\n return (\n {shortCode}\n )`,\n },\n {\n language: \"Javascript\",\n snippet: `const options = [\n { label: \"Espresso\", value: \"espresso\" },\n { label: \"Double Espresso\", value: \"doubleespresso\" },\n { label: \"Flat White\", value: \"flatwhite\" },\n { label: \"Cappuccino\", value: \"cappuccino\" },\n { label: \"Americano\", value: \"americano\" },\n { label: \"Mocha\", value: \"mocha\" },\n ];\n return (\n {shortCode}\n )`,\n },\n ],\n },\n },\n];\n\nexport const SelectExampleHideLabel = () => (\n console.log(event.detail.value)}\n />\n);\n\n\n \n\n\n### Groups\n\nexport const snippetsGroups = [\n {\n technology: \"Web component\",\n snippets: {\n short: ``,\n long: `{shortCode}\n`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: ` console.log(event.detail.value)}\n/>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const options = [\n {\n label: \"Fancy\",\n children: [\n { label: \"Cappuccino\", value: \"Cap\" },\n { label: \"Flat white\", value: \"Flat\" },\n ],\n },\n {\n label: \"Boring\",\n children: [\n { label: \"Filter\", value: \"Fil\" },\n { label: \"Latte\", value: \"Lat\" },\n ],\n },\n];\nreturn (\n {shortCode}\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const options = [\n {\n label: \"Fancy\",\n children: [\n { label: \"Cappuccino\", value: \"Cap\" },\n { label: \"Flat white\", value: \"Flat\" },\n ],\n },\n {\n label: \"Boring\",\n children: [\n { label: \"Filter\", value: \"Fil\" },\n { label: \"Latte\", value: \"Lat\" },\n ],\n },\n];\nreturn (\n {shortCode}\n)`,\n },\n ],\n },\n },\n];\n\nexport const SelectExampleGroups = () => (\n console.log(event.detail.value)}\n />\n);\n\n\n \n\n\n### Recommended\n\nexport const snippetsRecommended = [\n {\n technology: \"Web component\",\n snippets: {\n short: ``,\n long: `{shortCode}\n`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: ` console.log(event.detail.value)}\n/>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const options = [\n { label: \"Espresso\", value: \"espresso\" },\n { label: \"Double Espresso\", value: \"doubleespresso\", recommended: true },\n { label: \"Flat White\", value: \"flatwhite\" },\n { label: \"Cappuccino\", value: \"cappuccino\" },\n { label: \"Americano\", value: \"americano\", recommended: true },\n { label: \"Mocha\", value: \"mocha\" },\n];\nreturn (\n {shortCode}\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const options = [\n { label: \"Espresso\", value: \"espresso\" },\n { label: \"Double Espresso\", value: \"doubleespresso\", recommended: true },\n { label: \"Flat White\", value: \"flatwhite\" },\n { label: \"Cappuccino\", value: \"cappuccino\" },\n { label: \"Americano\", value: \"americano\", recommended: true },\n { label: \"Mocha\", value: \"mocha\" },\n];\nreturn (\n {shortCode}\n)`,\n },\n ],\n },\n },\n];\n\nexport const SelectExampleRecommended = () => (\n console.log(event.detail.value)}\n />\n);\n\n\n \n\n\n### Validation\n\nexport const snippetsValidation = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n\n`,\n long: `{shortCode}\n`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: ` console.log(event.detail.value)}\n/>\n console.log(event.detail.value)}\n/>\n console.log(event.detail.value)}\n/>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const options = [\n { label: \"Espresso\", value: \"espresso\" },\n { label: \"Double Espresso\", value: \"doubleespresso\" },\n { label: \"Flat White\", value: \"flatwhite\" },\n { label: \"Cappuccino\", value: \"cappuccino\" },\n { label: \"Americano\", value: \"americano\" },\n { label: \"Mocha\", value: \"mocha\" },\n];\nreturn (\n <>\n {shortCode}\n \n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const options = [\n { label: \"Espresso\", value: \"espresso\" },\n { label: \"Double Espresso\", value: \"doubleespresso\" },\n { label: \"Flat White\", value: \"flatwhite\" },\n { label: \"Cappuccino\", value: \"cappuccino\" },\n { label: \"Americano\", value: \"americano\" },\n { label: \"Mocha\", value: \"mocha\" },\n];\nreturn (\n <>\n {shortCode}\n \n)`,\n },\n ],\n },\n },\n];\n\nexport const SelectExampleValidation = () => (\n
\n console.log(event.detail.value)}\n />\n console.log(event.detail.value)}\n />\n console.log(event.detail.value)}\n />\n
\n);\n\n\n \n\n\n### Searchable\n\nexport const snippetsSearchable = [\n {\n technology: \"Web component\",\n snippets: {\n short: ``,\n long: `{shortCode}\n`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: ` console.log(event.detail.value)}\n/>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const options = [\n { label: \"Espresso\", value: \"espresso\" },\n { label: \"Double Espresso\", value: \"doubleespresso\" },\n { label: \"Flat White\", value: \"flatwhite\" },\n { label: \"Cappuccino\", value: \"cappuccino\" },\n { label: \"Americano\", value: \"americano\" },\n { label: \"Mocha\", value: \"mocha\" },\n];\nreturn (\n {shortCode}\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const options = [\n { label: \"Espresso\", value: \"espresso\" },\n { label: \"Double Espresso\", value: \"doubleespresso\" },\n { label: \"Flat White\", value: \"flatwhite\" },\n { label: \"Cappuccino\", value: \"cappuccino\" },\n { label: \"Americano\", value: \"americano\" },\n { label: \"Mocha\", value: \"mocha\" },\n];\nreturn (\n {shortCode}\n)`,\n },\n ],\n },\n },\n];\n\nexport const SearchableSelectExample = () => (\n console.log(event.detail.value)}\n />\n);\n\n\n \n\n\n### Searchable - with descriptions included in search\n\nexport const snippetsSearchableWithDescriptions = [\n {\n technology: \"Web component\",\n snippets: {\n short: ``,\n long: `{shortCode}\n`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: ` console.log(event.detail.value)}\n/>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const options = [\n { label: \"Cappuccino\", value: \"Cap\", description: \"Coffee frothed up with pressurised steam\" },\n { label: \"Americano\", value: \"Ame\", description: \"Espresso coffee diluted with hot water\" },\n { label: \"Mocha\", value: \"Moc\", description: \"Coffee with chocolate\" },\n { label: \"Latte\", value: \"Lat\", description: \"Milky coffee with one or two shots of espresso\" },\n { label: \"Flat white\", value: \"Fla\", description: \"Coffee with frothed milk poured over espresso\" },\n { label: \"Macchiato\", value: \"Mac\", description: \"Espresso coffee topped with steamed milk\" },\n { label: \"Café au lait\", value: \"Caf\", description: \"Brewed coffee with steamed milk\" },\n { label: \"Espresso\", value: \"Esp\", description: \"Concentrated form of coffee\" },\n { label: \"Cortado\", value: \"Cor\", description: \"Coffee cut with milk\" },\n { label: \"Latte macchiato\", value: \"Lam\", description: \"Espresso coffee with milk and a spoonful of foamed milk\" },\n ];\n return (\n {shortCode}\n )`,\n },\n {\n language: \"Javascript\",\n snippet: `const options = [\n { label: \"Cappuccino\", value: \"Cap\", description: \"Coffee frothed up with pressurised steam\" },\n { label: \"Americano\", value: \"Ame\", description: \"Espresso coffee diluted with hot water\" },\n { label: \"Mocha\", value: \"Moc\", description: \"Coffee with chocolate\" },\n { label: \"Latte\", value: \"Lat\", description: \"Milky coffee with one or two shots of espresso\" },\n { label: \"Flat white\", value: \"Fla\", description: \"Coffee with frothed milk poured over espresso\" },\n { label: \"Macchiato\", value: \"Mac\", description: \"Espresso coffee topped with steamed milk\" },\n { label: \"Café au lait\", value: \"Caf\", description: \"Brewed coffee with steamed milk\" },\n { label: \"Espresso\", value: \"Esp\", description: \"Concentrated form of coffee\" },\n { label: \"Cortado\", value: \"Cor\", description: \"Coffee cut with milk\" },\n { label: \"Latte macchiato\", value: \"Lam\", description: \"Espresso coffee with milk and a spoonful of foamed milk\" },\n];\nreturn (\n {shortCode}\n)`,\n },\n ],\n },\n },\n];\n\nexport const SearchableSelectWithDescriptionsExample = () => (\n console.log(event.detail.value)}\n />\n);\n\n\n \n\n\n### Searchable - with group titles included in search\n\nexport const snippetsSearchableWithGroups = [\n {\n technology: \"Web component\",\n snippets: {\n short: ``,\n long: `{shortCode}\n`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: ` console.log(event.detail.value)}\n/>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const options = [\n {\n label: \"Fancy\",\n children: [\n { label: \"Cappuccino\", value: \"Cap\" },\n { label: \"Flat white\", value: \"Flat\" },\n { label: \"Mocha\", value: \"Moc\" },\n { label: \"Macchiato\", value: \"Mac\" },\n { label: \"Cortado\", value: \"Cor\" },\n { label: \"Latte macchiato\", value: \"Lam\" },\n ],\n },\n {\n label: \"Boring\",\n children: [\n { label: \"Filter\", value: \"Fil\" },\n { label: \"Latte\", value: \"Lat\" },\n { label: \"Americano\", value: \"Ame\" },\n { label: \"Espresso\", value: \"Esp\" },\n ],\n },\n];\nreturn (\n {shortCode}\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const options = [\n {\n label: \"Fancy\",\n children: [\n { label: \"Cappuccino\", value: \"Cap\" },\n { label: \"Flat white\", value: \"Flat\" },\n { label: \"Mocha\", value: \"Moc\" },\n { label: \"Macchiato\", value: \"Mac\" },\n { label: \"Cortado\", value: \"Cor\" },\n { label: \"Latte macchiato\", value: \"Lam\" },\n ],\n },\n {\n label: \"Boring\",\n children: [\n { label: \"Filter\", value: \"Fil\" },\n { label: \"Latte\", value: \"Lat\" },\n { label: \"Americano\", value: \"Ame\" },\n { label: \"Espresso\", value: \"Esp\" },\n ],\n },\n];\nreturn (\n {shortCode}\n)`,\n },\n ],\n },\n },\n];\n\nexport const SearchableSelectWithGroupsExample = () => (\n console.log(event.detail.value)}\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 select field changes. The data is mocked and displayed after a one second delay, but could be replaced with a call to an API or database.\n\nexport const customFiltering = [\n {\n technology: \"Web component\",\n snippets: {\n short: ``,\n long: `{shortCode}\n`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: ` setSelectedValue(event.detail.value)}\n onIcClear={() => setResults([])}\n onIcChange={changeHandler}\n/>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const mockData = [\n { label: \"Espresso\", value: \"Esp\" },\n { label: \"Double Espresso\", value: \"Dou\" },\n { label: \"Cappuccino\", value: \"Cap\" },\n { label: \"Latte\", value: \"Lat\" },\n { label: \"Americano\", value: \"Ame\" },\n { label: \"Filter\", value: \"Fil\" },\n { label: \"Flat white\", value: \"Fla\" },\n { label: \"Mocha\", value: \"Moc\" },\n { label: \"Macchiato\", value: \"Mac\" },\n];\nconst [results, setResults] = useState([]);\nconst [selectedValue, setSelectedValue] = useState(\"\");\nconst changeHandler = (event) => {\n const newValue = event.detail.value;\n console.log(newValue);\n if (newValue !== selectedValue) {\n if (newValue && newValue.length > 1) {\n const mockAPI = (query) => {\n const filteredResults = mockData.filter((item) => \n item.label.toLowerCase().includes(query.toLowerCase()));\n return new Promise(resolve => { \n setTimeout(() => resolve(filteredResults), 1000)\n });\n };\n mockAPI(newValue).then((results) => setResults(results));\n } else {\n setResults([]);\n }\n } \n}\nreturn(\n <>\n {shortCode}\n \n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const mockData = [\n { label: \"Espresso\", value: \"Esp\" },\n { label: \"Double Espresso\", value: \"Dou\" },\n { label: \"Cappuccino\", value: \"Cap\" },\n { label: \"Latte\", value: \"Lat\" },\n { label: \"Americano\", value: \"Ame\" },\n { label: \"Filter\", value: \"Fil\" },\n { label: \"Flat white\", value: \"Fla\" },\n { label: \"Mocha\", value: \"Moc\" },\n { label: \"Macchiato\", value: \"Mac\" },\n];\nconst [results, setResults] = useState([]);\nconst [selectedValue, setSelectedValue] = useState(\"\");\nconst changeHandler = (event) => {\n const newValue = event.detail.value;\n console.log(newValue);\n if (newValue !== selectedValue) {\n if (newValue && newValue.length > 1) {\n const mockAPI = (query) => {\n const filteredResults = mockData.filter((item) => \n item.label.toLowerCase().includes(query.toLowerCase()));\n return new Promise(resolve => { \n setTimeout(() => resolve(filteredResults), 1000)\n });\n };\n mockAPI(newValue).then((results) => setResults(results));\n } else {\n setResults([]);\n }\n } \n}\nreturn(\n <>\n {shortCode}\n \n)`,\n },\n ],\n },\n },\n];\n\nexport const CustomFilterExample = () => {\n const mockData = [\n { label: \"Espresso\", value: \"Esp\" },\n { label: \"Double Espresso\", value: \"Dou\" },\n { label: \"Cappuccino\", value: \"Cap\" },\n { label: \"Latte\", value: \"Lat\" },\n { label: \"Americano\", value: \"Ame\" },\n { label: \"Filter\", value: \"Fil\" },\n { label: \"Flat white\", value: \"Fla\" },\n { label: \"Mocha\", value: \"Moc\" },\n { label: \"Macchiato\", value: \"Mac\" },\n ];\n const [results, setResults] = React.useState([]);\n const [selectedValue, setSelectedValue] = React.useState(\"\");\n const changeHandler = (event) => {\n const newValue = event.detail.value;\n console.log(newValue);\n if (newValue !== selectedValue) {\n if (newValue && newValue.length > 1) {\n const mockAPI = (query) => {\n const filteredResults = mockData.filter((item) =>\n item.label.toLowerCase().includes(query.toLowerCase())\n );\n return new Promise((resolve) => {\n setTimeout(() => resolve(filteredResults), 1000);\n });\n };\n mockAPI(newValue).then((newResults) => setResults(newResults));\n } else {\n setResults([]);\n }\n }\n };\n return (\n setSelectedValue(event.detail.value)}\n onIcClear={() => setResults([])}\n onIcChange={changeHandler}\n />\n );\n};\n\n\n \n\n", + "contents": "\nimport { IcSelect } from \"@ukic/react\";\n\n## Component demo\n\nexport const snippets = [\n {\n technology: \"Web component\",\n snippets: {\n short: ``,\n long: `{shortCode}\n `,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: ` console.log(event.detail.value)}\n/>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const options = [\n { label: \"Espresso\", value: \"espresso\" },\n { label: \"Double Espresso\", value: \"doubleespresso\" },\n { label: \"Flat White\", value: \"flatwhite\" },\n { label: \"Cappuccino\", value: \"cappuccino\" },\n { label: \"Americano\", value: \"americano\" },\n { label: \"Mocha\", value: \"mocha\" },\n ];\n return (\n {shortCode}\n )`,\n },\n {\n language: \"Javascript\",\n snippet: `const options = [\n { label: \"Espresso\", value: \"espresso\" },\n { label: \"Double Espresso\", value: \"doubleespresso\" },\n { label: \"Flat White\", value: \"flatwhite\" },\n { label: \"Cappuccino\", value: \"cappuccino\" },\n { label: \"Americano\", value: \"americano\" },\n { label: \"Mocha\", value: \"mocha\" },\n ];\n return (\n {shortCode}\n )`,\n },\n ],\n },\n },\n];\n\nexport const SelectExample = () => (\n console.log(event.detail.value)}\n />\n);\n\n\n \n\n\n## Select details\n\n\n\n## Variants\n\n### With clear button, descriptions, helper text and custom placeholder\n\nexport const snippetsWithExtras = [\n {\n technology: \"Web component\",\n snippets: {\n short: ``,\n long: `{shortCode}\n `,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: ` console.log(event.detail.value)}\n/>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const options = [\n { label: \"Espresso\", value: \"espresso\" },\n { label: \"Double Espresso\", value: \"doubleespresso\" },\n { label: \"Flat White\", value: \"flatwhite\" },\n { label: \"Cappuccino\", value: \"cappuccino\" },\n { label: \"Americano\", value: \"americano\" },\n { label: \"Mocha\", value: \"mocha\" },\n ];\n return (\n {shortCode}\n )`,\n },\n {\n language: \"Javascript\",\n snippet: `const options = [\n { label: \"Espresso\", value: \"espresso\" },\n { label: \"Double Espresso\", value: \"doubleespresso\" },\n { label: \"Flat White\", value: \"flatwhite\" },\n { label: \"Cappuccino\", value: \"cappuccino\" },\n { label: \"Americano\", value: \"americano\" },\n { label: \"Mocha\", value: \"mocha\" },\n ];\n return (\n {shortCode}\n )`,\n },\n ],\n },\n },\n];\n\nexport const SelectExampleWithExtras = () => (\n console.log(event.detail.value)}\n />\n);\n\n\n \n\n\n### Disabled\n\nexport const snippetsDisabled = [\n {\n technology: \"Web component\",\n snippets: {\n short: ``,\n long: `{shortCode}\n `,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: ` console.log(event.detail.value)}\n/>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const options = [\n { label: \"Espresso\", value: \"espresso\" },\n { label: \"Double Espresso\", value: \"doubleespresso\" },\n { label: \"Flat White\", value: \"flatwhite\" },\n { label: \"Cappuccino\", value: \"cappuccino\" },\n { label: \"Americano\", value: \"americano\" },\n { label: \"Mocha\", value: \"mocha\" },\n ];\n return (\n {shortCode}\n )`,\n },\n {\n language: \"Javascript\",\n snippet: `const options = [\n { label: \"Espresso\", value: \"espresso\" },\n { label: \"Double Espresso\", value: \"doubleespresso\" },\n { label: \"Flat White\", value: \"flatwhite\" },\n { label: \"Cappuccino\", value: \"cappuccino\" },\n { label: \"Americano\", value: \"americano\" },\n { label: \"Mocha\", value: \"mocha\" },\n ];\n return (\n {shortCode}\n )`,\n },\n ],\n },\n },\n];\n\nexport const SelectExampleDisabled = () => (\n console.log(event.detail.value)}\n />\n);\n\n\n \n\n\n### Options disabled\n\nexport const snippetsOptionDisabled = [\n {\n technology: \"Web component\",\n snippets: {\n short: ``,\n long: `{shortCode}\n `,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: ` console.log(event.detail.value)}\n/>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const options = [\n { label: \"Espresso\", value: \"espresso\" },\n { label: \"Double Espresso\", value: \"doubleespresso\", disabled: true },\n { label: \"Flat White\", value: \"flatwhite\", disabled: true },\n { label: \"Cappuccino\", value: \"cappuccino\" },\n { label: \"Americano\", value: \"americano\" },\n { label: \"Mocha\", value: \"mocha\" },\n ];\n return (\n {shortCode}\n )`,\n },\n {\n language: \"Javascript\",\n snippet: `const options = [\n { label: \"Espresso\", value: \"espresso\" },\n { label: \"Double Espresso\", value: \"doubleespresso\", disabled: true },\n { label: \"Flat White\", value: \"flatwhite\", disabled: true },\n { label: \"Cappuccino\", value: \"cappuccino\" },\n { label: \"Americano\", value: \"americano\" },\n { label: \"Mocha\", value: \"mocha\" },\n ];\n return (\n {shortCode}\n )`,\n },\n ],\n },\n },\n];\n\nexport const SelectExampleOptionsDisabled = () => (\n console.log(event.detail.value)}\n />\n);\n\n\n \n\n\n### Size small\n\nexport const snippetsSmall = [\n {\n technology: \"Web component\",\n snippets: {\n short: ``,\n long: `{shortCode}\n `,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: ` console.log(event.detail.value)}\n size=\"small\"\n/>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const options = [\n { label: \"Espresso\", value: \"espresso\" },\n { label: \"Double Espresso\", value: \"doubleespresso\" },\n { label: \"Flat White\", value: \"flatwhite\" },\n { label: \"Cappuccino\", value: \"cappuccino\" },\n { label: \"Americano\", value: \"americano\" },\n { label: \"Mocha\", value: \"mocha\" },\n ];\n return (\n {shortCode}\n )`,\n },\n {\n language: \"Javascript\",\n snippet: `const options = [\n { label: \"Espresso\", value: \"espresso\" },\n { label: \"Double Espresso\", value: \"doubleespresso\" },\n { label: \"Flat White\", value: \"flatwhite\" },\n { label: \"Cappuccino\", value: \"cappuccino\" },\n { label: \"Americano\", value: \"americano\" },\n { label: \"Mocha\", value: \"mocha\" },\n ];\n return (\n {shortCode}\n )`,\n },\n ],\n },\n },\n];\n\nexport const SelectExampleSmall = () => (\n console.log(event.detail.value)}\n size=\"small\"\n />\n);\n\n\n \n\n\n### Hidden label\n\nexport const snippetsHideLabel = [\n {\n technology: \"Web component\",\n snippets: {\n short: ``,\n long: `{shortCode}\n `,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: ` console.log(event.detail.value)}\n/>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const options = [\n { label: \"Espresso\", value: \"espresso\" },\n { label: \"Double Espresso\", value: \"doubleespresso\" },\n { label: \"Flat White\", value: \"flatwhite\" },\n { label: \"Cappuccino\", value: \"cappuccino\" },\n { label: \"Americano\", value: \"americano\" },\n { label: \"Mocha\", value: \"mocha\" },\n ];\n return (\n {shortCode}\n )`,\n },\n {\n language: \"Javascript\",\n snippet: `const options = [\n { label: \"Espresso\", value: \"espresso\" },\n { label: \"Double Espresso\", value: \"doubleespresso\" },\n { label: \"Flat White\", value: \"flatwhite\" },\n { label: \"Cappuccino\", value: \"cappuccino\" },\n { label: \"Americano\", value: \"americano\" },\n { label: \"Mocha\", value: \"mocha\" },\n ];\n return (\n {shortCode}\n )`,\n },\n ],\n },\n },\n];\n\nexport const SelectExampleHideLabel = () => (\n console.log(event.detail.value)}\n />\n);\n\n\n \n\n\n### Groups\n\nexport const snippetsGroups = [\n {\n technology: \"Web component\",\n snippets: {\n short: ``,\n long: `{shortCode}\n `,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: ` console.log(event.detail.value)}\n/>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const options = [\n {\n label: \"Fancy\",\n children: [\n { label: \"Cappuccino\", value: \"Cap\" },\n { label: \"Flat white\", value: \"Flat\" },\n ],\n },\n {\n label: \"Boring\",\n children: [\n { label: \"Filter\", value: \"Fil\" },\n { label: \"Latte\", value: \"Lat\" },\n ],\n },\n ];\n return (\n {shortCode}\n )`,\n },\n {\n language: \"Javascript\",\n snippet: `const options = [\n {\n label: \"Fancy\",\n children: [\n { label: \"Cappuccino\", value: \"Cap\" },\n { label: \"Flat white\", value: \"Flat\" },\n ],\n },\n {\n label: \"Boring\",\n children: [\n { label: \"Filter\", value: \"Fil\" },\n { label: \"Latte\", value: \"Lat\" },\n ],\n },\n ];\n return (\n {shortCode}\n )`,\n },\n ],\n },\n },\n];\n\nexport const SelectExampleGroups = () => (\n console.log(event.detail.value)}\n />\n);\n\n\n \n\n\n### Recommended\n\nexport const snippetsRecommended = [\n {\n technology: \"Web component\",\n snippets: {\n short: ``,\n long: `{shortCode}\n `,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: ` console.log(event.detail.value)}\n/>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const options = [\n { label: \"Espresso\", value: \"espresso\" },\n { label: \"Double Espresso\", value: \"doubleespresso\", recommended: true },\n { label: \"Flat White\", value: \"flatwhite\" },\n { label: \"Cappuccino\", value: \"cappuccino\" },\n { label: \"Americano\", value: \"americano\", recommended: true },\n { label: \"Mocha\", value: \"mocha\" },\n ];\n return (\n {shortCode}\n )`,\n },\n {\n language: \"Javascript\",\n snippet: `const options = [\n { label: \"Espresso\", value: \"espresso\" },\n { label: \"Double Espresso\", value: \"doubleespresso\", recommended: true },\n { label: \"Flat White\", value: \"flatwhite\" },\n { label: \"Cappuccino\", value: \"cappuccino\" },\n { label: \"Americano\", value: \"americano\", recommended: true },\n { label: \"Mocha\", value: \"mocha\" },\n ];\n return (\n {shortCode}\n )`,\n },\n ],\n },\n },\n];\n\nexport const SelectExampleRecommended = () => (\n console.log(event.detail.value)}\n />\n);\n\n\n \n\n\n### Validation\n\nexport const snippetsValidation = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n\n`,\n long: `{shortCode}\n `,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: ` console.log(event.detail.value)}\n/>\n console.log(event.detail.value)}\n/>\n console.log(event.detail.value)}\n/>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const options = [\n { label: \"Espresso\", value: \"espresso\" },\n { label: \"Double Espresso\", value: \"doubleespresso\" },\n { label: \"Flat White\", value: \"flatwhite\" },\n { label: \"Cappuccino\", value: \"cappuccino\" },\n { label: \"Americano\", value: \"americano\" },\n { label: \"Mocha\", value: \"mocha\" },\n ];\n return (\n <>\n {shortCode}\n \n )`,\n },\n {\n language: \"Javascript\",\n snippet: `const options = [\n { label: \"Espresso\", value: \"espresso\" },\n { label: \"Double Espresso\", value: \"doubleespresso\" },\n { label: \"Flat White\", value: \"flatwhite\" },\n { label: \"Cappuccino\", value: \"cappuccino\" },\n { label: \"Americano\", value: \"americano\" },\n { label: \"Mocha\", value: \"mocha\" },\n ];\n return (\n <>\n {shortCode}\n \n )`,\n },\n ],\n },\n },\n];\n\nexport const SelectExampleValidation = () => (\n
\n console.log(event.detail.value)}\n />\n console.log(event.detail.value)}\n />\n console.log(event.detail.value)}\n />\n
\n);\n\n\n \n\n\n### Searchable\n\nexport const snippetsSearchable = [\n {\n technology: \"Web component\",\n snippets: {\n short: ``,\n long: `{shortCode}\n `,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: ` console.log(event.detail.value)}\n/>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const options = [\n { label: \"Espresso\", value: \"espresso\" },\n { label: \"Double Espresso\", value: \"doubleespresso\" },\n { label: \"Flat White\", value: \"flatwhite\" },\n { label: \"Cappuccino\", value: \"cappuccino\" },\n { label: \"Americano\", value: \"americano\" },\n { label: \"Mocha\", value: \"mocha\" },\n ];\n return (\n {shortCode}\n )`,\n },\n {\n language: \"Javascript\",\n snippet: `const options = [\n { label: \"Espresso\", value: \"espresso\" },\n { label: \"Double Espresso\", value: \"doubleespresso\" },\n { label: \"Flat White\", value: \"flatwhite\" },\n { label: \"Cappuccino\", value: \"cappuccino\" },\n { label: \"Americano\", value: \"americano\" },\n { label: \"Mocha\", value: \"mocha\" },\n ];\n return (\n {shortCode}\n )`,\n },\n ],\n },\n },\n];\n\nexport const SearchableSelectExample = () => (\n console.log(event.detail.value)}\n />\n);\n\n\n \n\n\n### Searchable - with descriptions included in search\n\nexport const snippetsSearchableWithDescriptions = [\n {\n technology: \"Web component\",\n snippets: {\n short: ``,\n long: `{shortCode}\n `,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: ` console.log(event.detail.value)}\n/>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const options = [\n { label: \"Cappuccino\", value: \"Cap\", description: \"Coffee frothed up with pressurised steam\" },\n { label: \"Americano\", value: \"Ame\", description: \"Espresso coffee diluted with hot water\" },\n { label: \"Mocha\", value: \"Moc\", description: \"Coffee with chocolate\" },\n { label: \"Latte\", value: \"Lat\", description: \"Milky coffee with one or two shots of espresso\" },\n { label: \"Flat white\", value: \"Fla\", description: \"Coffee with frothed milk poured over espresso\" },\n { label: \"Macchiato\", value: \"Mac\", description: \"Espresso coffee topped with steamed milk\" },\n { label: \"Café au lait\", value: \"Caf\", description: \"Brewed coffee with steamed milk\" },\n { label: \"Espresso\", value: \"Esp\", description: \"Concentrated form of coffee\" },\n { label: \"Cortado\", value: \"Cor\", description: \"Coffee cut with milk\" },\n { label: \"Latte macchiato\", value: \"Lam\", description: \"Espresso coffee with milk and a spoonful of foamed milk\" },\n ];\n return (\n {shortCode}\n )`,\n },\n {\n language: \"Javascript\",\n snippet: `const options = [\n { label: \"Cappuccino\", value: \"Cap\", description: \"Coffee frothed up with pressurised steam\" },\n { label: \"Americano\", value: \"Ame\", description: \"Espresso coffee diluted with hot water\" },\n { label: \"Mocha\", value: \"Moc\", description: \"Coffee with chocolate\" },\n { label: \"Latte\", value: \"Lat\", description: \"Milky coffee with one or two shots of espresso\" },\n { label: \"Flat white\", value: \"Fla\", description: \"Coffee with frothed milk poured over espresso\" },\n { label: \"Macchiato\", value: \"Mac\", description: \"Espresso coffee topped with steamed milk\" },\n { label: \"Café au lait\", value: \"Caf\", description: \"Brewed coffee with steamed milk\" },\n { label: \"Espresso\", value: \"Esp\", description: \"Concentrated form of coffee\" },\n { label: \"Cortado\", value: \"Cor\", description: \"Coffee cut with milk\" },\n { label: \"Latte macchiato\", value: \"Lam\", description: \"Espresso coffee with milk and a spoonful of foamed milk\" },\n ];\n return (\n {shortCode}\n )`,\n },\n ],\n },\n },\n];\n\nexport const SearchableSelectWithDescriptionsExample = () => (\n console.log(event.detail.value)}\n />\n);\n\n\n \n\n\n### Searchable - with group titles included in search\n\nexport const snippetsSearchableWithGroups = [\n {\n technology: \"Web component\",\n snippets: {\n short: ``,\n long: `{shortCode}\n `,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: ` console.log(event.detail.value)}\n/>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const options = [\n {\n label: \"Fancy\",\n children: [\n { label: \"Cappuccino\", value: \"Cap\" },\n { label: \"Flat white\", value: \"Flat\" },\n { label: \"Mocha\", value: \"Moc\" },\n { label: \"Macchiato\", value: \"Mac\" },\n { label: \"Cortado\", value: \"Cor\" },\n { label: \"Latte macchiato\", value: \"Lam\" },\n ],\n },\n {\n label: \"Boring\",\n children: [\n { label: \"Filter\", value: \"Fil\" },\n { label: \"Latte\", value: \"Lat\" },\n { label: \"Americano\", value: \"Ame\" },\n { label: \"Espresso\", value: \"Esp\" },\n ],\n },\n ];\n return (\n {shortCode}\n )`,\n },\n {\n language: \"Javascript\",\n snippet: `const options = [\n {\n label: \"Fancy\",\n children: [\n { label: \"Cappuccino\", value: \"Cap\" },\n { label: \"Flat white\", value: \"Flat\" },\n { label: \"Mocha\", value: \"Moc\" },\n { label: \"Macchiato\", value: \"Mac\" },\n { label: \"Cortado\", value: \"Cor\" },\n { label: \"Latte macchiato\", value: \"Lam\" },\n ],\n },\n {\n label: \"Boring\",\n children: [\n { label: \"Filter\", value: \"Fil\" },\n { label: \"Latte\", value: \"Lat\" },\n { label: \"Americano\", value: \"Ame\" },\n { label: \"Espresso\", value: \"Esp\" },\n ],\n },\n ];\n return (\n {shortCode}\n )`,\n },\n ],\n },\n },\n];\n\nexport const SearchableSelectWithGroupsExample = () => (\n console.log(event.detail.value)}\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 select field changes. The data is mocked and displayed after a one second delay, but could be replaced with a call to an API or database.\n\nexport const customFiltering = [\n {\n technology: \"Web component\",\n snippets: {\n short: ``,\n long: `{shortCode}\n `,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: ` setSelectedValue(event.detail.value)}\n onIcClear={() => setResults([])}\n onIcChange={changeHandler}\n/>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const mockData = [\n { label: \"Espresso\", value: \"Esp\" },\n { label: \"Double Espresso\", value: \"Dou\" },\n { label: \"Cappuccino\", value: \"Cap\" },\n { label: \"Latte\", value: \"Lat\" },\n { label: \"Americano\", value: \"Ame\" },\n { label: \"Filter\", value: \"Fil\" },\n { label: \"Flat white\", value: \"Fla\" },\n { label: \"Mocha\", value: \"Moc\" },\n { label: \"Macchiato\", value: \"Mac\" },\n];\nconst [results, setResults] = useState([]);\nconst [selectedValue, setSelectedValue] = useState(\"\");\nconst changeHandler = (event) => {\n const newValue = event.detail.value;\n console.log(newValue);\n if (newValue !== selectedValue) {\n if (newValue && newValue.length > 1) {\n const mockAPI = (query) => {\n const filteredResults = mockData.filter((item) => \n item.label.toLowerCase().includes(query.toLowerCase()));\n return new Promise(resolve => { \n setTimeout(() => resolve(filteredResults), 1000)\n });\n };\n mockAPI(newValue).then((results) => setResults(results));\n } else {\n setResults([]);\n }\n } \n}\nreturn(\n <>\n {shortCode}\n \n);`,\n },\n {\n language: \"Javascript\",\n snippet: `const mockData = [\n { label: \"Espresso\", value: \"Esp\" },\n { label: \"Double Espresso\", value: \"Dou\" },\n { label: \"Cappuccino\", value: \"Cap\" },\n { label: \"Latte\", value: \"Lat\" },\n { label: \"Americano\", value: \"Ame\" },\n { label: \"Filter\", value: \"Fil\" },\n { label: \"Flat white\", value: \"Fla\" },\n { label: \"Mocha\", value: \"Moc\" },\n { label: \"Macchiato\", value: \"Mac\" },\n];\nconst [results, setResults] = useState([]);\nconst [selectedValue, setSelectedValue] = useState(\"\");\nconst changeHandler = (event) => {\n const newValue = event.detail.value;\n console.log(newValue);\n if (newValue !== selectedValue) {\n if (newValue && newValue.length > 1) {\n const mockAPI = (query) => {\n const filteredResults = mockData.filter((item) => \n item.label.toLowerCase().includes(query.toLowerCase()));\n return new Promise(resolve => { \n setTimeout(() => resolve(filteredResults), 1000)\n });\n };\n mockAPI(newValue).then((results) => setResults(results));\n } else {\n setResults([]);\n }\n } \n}\nreturn(\n <>\n {shortCode}\n \n);`,\n },\n ],\n },\n },\n];\n\nexport const CustomFilterExample = () => {\n const mockData = [\n { label: \"Espresso\", value: \"Esp\" },\n { label: \"Double Espresso\", value: \"Dou\" },\n { label: \"Cappuccino\", value: \"Cap\" },\n { label: \"Latte\", value: \"Lat\" },\n { label: \"Americano\", value: \"Ame\" },\n { label: \"Filter\", value: \"Fil\" },\n { label: \"Flat white\", value: \"Fla\" },\n { label: \"Mocha\", value: \"Moc\" },\n { label: \"Macchiato\", value: \"Mac\" },\n ];\n const [results, setResults] = React.useState([]);\n const [selectedValue, setSelectedValue] = React.useState(\"\");\n const changeHandler = (event) => {\n const newValue = event.detail.value;\n console.log(newValue);\n if (newValue !== selectedValue) {\n if (newValue && newValue.length > 1) {\n const mockAPI = (query) => {\n const filteredResults = mockData.filter((item) =>\n item.label.toLowerCase().includes(query.toLowerCase())\n );\n return new Promise((resolve) => {\n setTimeout(() => resolve(filteredResults), 1000);\n });\n };\n mockAPI(newValue).then((newResults) => setResults(newResults));\n } else {\n setResults([]);\n }\n }\n };\n return (\n setSelectedValue(event.detail.value)}\n onIcClear={() => setResults([])}\n onIcChange={changeHandler}\n />\n );\n};\n\n\n \n\n", "path": "/components/select/code", - "date": "2024-05-31", + "date": "2024-05-02", "title": "Select", "status": "BETA", "subTitle": "Select allows users to select one or more values from a list of options.", @@ -3218,10 +3218,10 @@ ], "meta": { "relativePath": "components/select/code.mdx", - "createdAt": "2024-05-31T10:44:10.893Z", - "lastModified": "2024-05-31T10:44:10.893Z", - "size": 44689, - "formattedSize": "43.6 KB" + "createdAt": "2024-05-21T09:12:11.379Z", + "lastModified": "2024-05-21T09:12:11.379Z", + "size": 46068, + "formattedSize": "45.0 KB" } }, { @@ -3250,8 +3250,8 @@ ], "meta": { "relativePath": "components/select/guidance.mdx", - "createdAt": "2024-05-30T12:04:49.468Z", - "lastModified": "2024-05-30T12:04:49.468Z", + "createdAt": "2024-05-13T07:27:37.380Z", + "lastModified": "2024-05-13T07:27:37.380Z", "size": 7459, "formattedSize": "7.3 KB" } @@ -3289,9 +3289,9 @@ }, { "id": "components__side-nav__codex", - "contents": "\nimport {\n IcSideNavigation,\n IcNavigationItem,\n IcNavigationGroup,\n IcDivider,\n IcLink,\n SlottedSVG,\n IcBadge,\n} from \"@ukic/react\";\n\nimport {\n mdiHome,\n mdiCoffeeOutline,\n mdiMagnify,\n mdiCoffeeMakerOutline,\n mdiCogOutline,\n mdiTeaOutline,\n} from \"@mdi/js\";\n\nimport { MemoryRouter, NavLink } from \"react-router-dom\";\n\n## Component demo\n\nexport const snippetsDefault = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n \n coffee-outline\n \n \n \n \n home\n \n \n \n \n \n \n magnify\n \n \n \n \n \n coffee-outline\n \n \n \n \n \n coffee-maker-outline\n \n \n \n \n \n cog-outline\n \n \n \n`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\n \n coffee-outline\n \n \n \n \n home\n \n \n \n \n \n \n magnify\n \n \n \n \n \n coffee-outline\n \n \n \n \n \n coffee-maker-outline\n \n \n \n \n \n cog-outline\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 coffee-outline\n \n \n \n \n home\n \n \n \n \n \n \n magnify\n \n \n \n \n \n coffee-outline\n \n \n \n \n \n coffee-maker-outline\n \n \n \n \n \n cog-outline\n \n \n \n \n\n\n## Side navigation details\n\n\n\n## Navigation group details\n\n\n\n## Navigation item details\n\n\n\n## Variants\n\n### Static\n\nexport const snippetsStatic = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n \n coffee-outline\n \n \n \n \n home\n \n \n \n \n \n \n magnify\n \n \n \n \n \n coffee-outline\n \n \n \n \n \n coffee-maker-outline\n \n \n \n \n \n cog-outline\n \n \n \n`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\n \n coffee-outline\n \n \n \n \n home\n \n \n \n \n \n \n magnify\n \n \n \n \n \n coffee-outline\n \n \n \n \n \n coffee-maker-outline\n \n \n \n \n \n cog-outline\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 coffee-outline\n \n \n \n \n home\n \n \n \n \n \n \n magnify\n \n \n \n \n \n coffee-outline\n \n \n \n \n \n coffee-maker-outline\n \n \n \n \n \n cog-outline\n \n \n \n \n\n\n### Expanded by default\n\nexport const snippetsExpanded = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n \n coffee-outline\n \n \n \n \n home\n \n \n \n \n \n magnify\n \n \n \n \n \n coffee-outline\n \n \n \n \n \n coffee-maker-outline\n \n \n \n \n \n cog-outline\n \n \n \n`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\n \n coffee-outline\n \n \n \n \n home\n \n \n \n \n magnify\n \n \n \n \n \n coffee-outline\n \n \n \n \n \n coffee-maker-outline\n \n \n \n \n \n cog-outline\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 coffee-outline\n \n \n \n \n home\n \n \n \n \n \n magnify\n \n \n \n \n \n coffee-outline\n \n \n \n \n \n coffee-maker-outline\n \n \n \n \n \n cog-outline\n \n \n \n \n\n\n### Collapsed labels\n\nexport const snippetsCollapsed = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n \n coffee-outline\n \n \n \n \n home\n \n \n \n \n \n magnify\n \n \n \n \n \n coffee-outline\n \n \n \n \n \n coffee-maker-outline\n \n \n \n \n \n cog-outline\n \n \n \n`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\n \n coffee-outline\n \n \n \n \n home\n \n \n \n \n \n magnify\n \n \n \n \n \n coffee-outline\n \n \n \n \n \n coffee-maker-outline\n \n \n \n \n \n cog-outline\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 coffee-outline\n \n \n \n \n home\n \n \n \n \n \n magnify\n \n \n \n \n \n coffee-outline\n \n \n \n \n \n coffee-maker-outline\n \n \n \n \n \n cog-outline\n \n \n \n \n\n\n### With badges on navigation items\n\nexport const snippetsBadge = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n \n coffee-outline\n \n \n \n \n home\n \n \n \n \n \n \n magnify\n \n \n \n \n \n \n coffee-outline\n \n \n \n \n \n \n coffee-maker-outline\n \n \n \n \n \n cog-outline\n \n \n \n`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\n \n coffee-outline\n \n \n \n \n home\n \n \n \n \n \n \n magnify\n \n \n \n \n \n \n coffee-outline\n \n \n \n \n \n \n coffee-maker-outline\n \n \n \n \n \n cog-outline\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 coffee-outline\n \n \n \n \n home\n \n \n \n \n \n \n magnify\n \n \n \n \n \n \n coffee-outline\n \n \n \n \n \n \n coffee-maker-outline\n \n \n \n \n \n cog-outline\n \n \n \n \n\n\n### With Material Design icons in SlottedSVG\n\n[MDI](https://pictogrammers.com/library/mdi/) can be imported from the `@mdi/js` package and used in ``.\nTo scale the icons, use the ['viewBox' attribute](https://css-tricks.com/scale-svg/#aa-the-viewbox-attribute)\n\n```bash\nnpm i @mdi/js\n```\n\nexport const withMDIicons = [\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 \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 \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n\n### With React Router and Material Design Icons (using slots)\n\nThe following example also demonstrates using a slotted app title link.\n\nexport const withReactRouter = [\n {\n technology: \"React\",\n snippets: {\n short: `\n
\n \n ACME coffee shop\n \n \n \n \n Home\n \n \n \n \n \n Search\n \n \n \n \n \n Drinks\n \n \n \n \n \n Equipment\n \n \n \n \n \n Settings\n \n \n \n
\n \n \n This is the Home page

} />\n Search

} />\n Drinks

} />\n Coffee Maker

} />\n Settings

} />\n \n \n
\n
\n`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n divContainer: {\n display: \"flex\",\n },\n});\nconst classes = useStyles();\nreturn (\n {shortCode}\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n divContainer: {\n display: \"flex\",\n },\n});\nconst classes = useStyles();\nreturn (\n {shortCode}\n)`,\n },\n ],\n },\n },\n];\n\n\n \n
\n \n \n ACME coffee shop\n \n \n \n \n \n Home\n \n \n \n \n \n Search\n \n \n \n \n \n Drinks\n \n \n \n \n \n Equipment\n \n \n \n \n \n Settings\n \n \n \n
\n \n\n\n## Layout example\n\nFixed side navigation places the side navigation to the viewport.\n\nexport const basicLayoutFixedViewport = [\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 \n \n \n \n \n
\n
\n \n \n

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vestibulum venenatis facilisis. Nam tortor felis, auctor vel ante quis, tempor interdum libero. In dictum sodales velit, eu egestas arcu dignissim ac. Aliquam facilisis eros dolor, id laoreet orci sagittis ut. Sed tempus, lacus in pretium molestie, lectus magna interdum risus, vel fringilla libero ex eu dui. Suspendisse ullamcorper vehicula lacinia. Phasellus congue velit nisl, vitae congue ligula rutrum id.

\n \n \n

Etiam in suscipit metus. Duis semper, sapien a molestie semper, ex nibh porttitor tellus, vel molestie justo odio vel purus. Curabitur porttitor, tortor sed semper sollicitudin, odio odio congue tortor, eget pulvinar tellus nisl ac lacus. In ultricies commodo lorem, a laoreet diam. Ut a mauris at tellus tincidunt ullamcorper sit amet in metus. Aenean facilisis placerat dictum. Phasellus mattis ante sollicitudin luctus iaculis. Nam porttitor lobortis rhoncus. Nam nec malesuada purus, at pulvinar mauris. Nam non lorem ante.

\n \n \n
\n \n Get Started\n Accessibility\n Styles\n \n \n
\n
`,\n long: `parent-container {\n display: flex;\n height: 100%;\n }\n .content-container {\n display: flex;\n flex-direction: column;\n flex-grow: 1;\n }\n main {\n height: 100vh;\n }\n\n\n {shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `// Inline styling added for verboseness\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 \n \n

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vestibulum venenatis facilisis. Nam tortor felis, auctor vel ante quis, tempor interdum libero. In dictum sodales velit, eu egestas arcu dignissim ac. Aliquam facilisis eros dolor, id laoreet orci sagittis ut. Sed tempus, lacus in pretium molestie, lectus magna interdum risus, vel fringilla libero ex eu dui. Suspendisse ullamcorper vehicula lacinia. Phasellus congue velit nisl, vitae congue ligula rutrum id.

\n \n \n

Etiam in suscipit metus. Duis semper, sapien a molestie semper, ex nibh porttitor tellus, vel molestie justo odio vel purus. Curabitur porttitor, tortor sed semper sollicitudin, odio odio congue tortor, eget pulvinar tellus nisl ac lacus. In ultricies commodo lorem, a laoreet diam. Ut a mauris at tellus tincidunt ullamcorper sit amet in metus. Aenean facilisis placerat dictum. Phasellus mattis ante sollicitudin luctus iaculis. Nam porttitor lobortis rhoncus. Nam nec malesuada purus, at pulvinar mauris. Nam non lorem ante.

\n \n \n
\n \n Get Started\n Accessibility\n Styles\n \n \n
\n
`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n display: 'flex', \n height: '100%'\n },\n contentContainer: {\n display: 'flex',\n flexDirection: 'column',\n flexGrow: '1'\n },\n main: {\n height: '100vh',\n }\n});\nconst classes = useStyles();\nreturn (\n {shortCode}\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n display: 'flex', \n height: '100%'\n },\n contentContainer: {\n display: 'flex',\n flexDirection: 'column',\n flexGrow: '1'\n },\n main: {\n height: '100vh',\n }\n});\nconst classes = useStyles();\nreturn (\n {shortCode}\n)`,\n },\n ],\n },\n },\n];\n\n\n \n View example in new window\n \n\n", + "contents": "\nimport {\n IcSideNavigation,\n IcNavigationItem,\n IcNavigationGroup,\n IcDivider,\n IcLink,\n SlottedSVG,\n IcBadge,\n} from \"@ukic/react\";\n\nimport {\n mdiHome,\n mdiCoffeeOutline,\n mdiMagnify,\n mdiCoffeeMakerOutline,\n mdiCogOutline,\n mdiTeaOutline,\n} from \"@mdi/js\";\n\nimport { MemoryRouter, NavLink } from \"react-router-dom\";\n\n## Component demo\n\nexport const snippetsDefault = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n \n coffee-outline\n \n \n \n \n home\n \n \n \n \n \n \n magnify\n \n \n \n \n \n coffee-outline\n \n \n \n \n \n coffee-maker-outline\n \n \n \n \n \n cog-outline\n \n \n \n`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\n \n coffee-outline\n \n \n \n \n home\n \n \n \n \n \n \n magnify\n \n \n \n \n \n coffee-outline\n \n \n \n \n \n coffee-maker-outline\n \n \n \n \n \n cog-outline\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 coffee-outline\n \n \n \n \n home\n \n \n \n \n \n \n magnify\n \n \n \n \n \n coffee-outline\n \n \n \n \n \n coffee-maker-outline\n \n \n \n \n \n cog-outline\n \n \n \n \n\n\n## Side navigation details\n\n\n\n## Navigation group details\n\n\n\n## Navigation item details\n\n\n\n## Variants\n\n### Static\n\nexport const snippetsStatic = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n \n coffee-outline\n \n \n \n \n home\n \n \n \n \n \n \n magnify\n \n \n \n \n \n coffee-outline\n \n \n \n \n \n coffee-maker-outline\n \n \n \n \n \n cog-outline\n \n \n \n`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\n \n coffee-outline\n \n \n \n \n home\n \n \n \n \n \n \n magnify\n \n \n \n \n \n coffee-outline\n \n \n \n \n \n coffee-maker-outline\n \n \n \n \n \n cog-outline\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 coffee-outline\n \n \n \n \n home\n \n \n \n \n \n \n magnify\n \n \n \n \n \n coffee-outline\n \n \n \n \n \n coffee-maker-outline\n \n \n \n \n \n cog-outline\n \n \n \n \n\n\n### Expanded by default\n\nexport const snippetsExpanded = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n \n coffee-outline\n \n \n \n \n home\n \n \n \n \n \n magnify\n \n \n \n \n \n coffee-outline\n \n \n \n \n \n coffee-maker-outline\n \n \n \n \n \n cog-outline\n \n \n \n`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\n \n coffee-outline\n \n \n \n \n home\n \n \n \n \n magnify\n \n \n \n \n \n coffee-outline\n \n \n \n \n \n coffee-maker-outline\n \n \n \n \n \n cog-outline\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 coffee-outline\n \n \n \n \n home\n \n \n \n \n \n magnify\n \n \n \n \n \n coffee-outline\n \n \n \n \n \n coffee-maker-outline\n \n \n \n \n \n cog-outline\n \n \n \n \n\n\n### Collapsed labels\n\nexport const snippetsCollapsed = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n \n coffee-outline\n \n \n \n \n home\n \n \n \n \n \n magnify\n \n \n \n \n \n coffee-outline\n \n \n \n \n \n coffee-maker-outline\n \n \n \n \n \n cog-outline\n \n \n \n`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\n \n coffee-outline\n \n \n \n \n home\n \n \n \n \n \n magnify\n \n \n \n \n \n coffee-outline\n \n \n \n \n \n coffee-maker-outline\n \n \n \n \n \n cog-outline\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 coffee-outline\n \n \n \n \n home\n \n \n \n \n \n magnify\n \n \n \n \n \n coffee-outline\n \n \n \n \n \n coffee-maker-outline\n \n \n \n \n \n cog-outline\n \n \n \n \n\n\n### With badges on navigation items\n\nexport const snippetsBadge = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n \n coffee-outline\n \n \n \n \n home\n \n \n \n \n \n \n magnify\n \n \n \n \n \n \n coffee-outline\n \n \n \n \n \n \n coffee-maker-outline\n \n \n \n \n \n cog-outline\n \n \n \n`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\n \n coffee-outline\n \n \n \n \n home\n \n \n \n \n \n \n magnify\n \n \n \n \n \n \n coffee-outline\n \n \n \n \n \n \n coffee-maker-outline\n \n \n \n \n \n cog-outline\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 coffee-outline\n \n \n \n \n home\n \n \n \n \n \n \n magnify\n \n \n \n \n \n \n coffee-outline\n \n \n \n \n \n \n coffee-maker-outline\n \n \n \n \n \n cog-outline\n \n \n \n \n\n\n### With Material Design icons in SlottedSVG\n\n[MDI](https://pictogrammers.com/library/mdi/) can be imported from the `@mdi/js` package and used in ``.\nTo scale the icons, use the ['viewBox' attribute](https://css-tricks.com/scale-svg/#aa-the-viewbox-attribute)\n\n```bash\nnpm i @mdi/js\n```\n\nexport const withMDIicons = [\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 \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 \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n\n### With React Router and Material Design Icons (using slots)\n\nThe following example also demonstrates using a slotted app title link.\n\nexport const withReactRouter = [\n {\n technology: \"React\",\n snippets: {\n short: `\n
\n \n ACME coffee shop\n \n \n \n \n Home\n \n \n \n \n \n Search\n \n \n \n \n \n Drinks\n \n \n \n \n \n Equipment\n \n \n \n \n \n Settings\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 ACME coffee shop\n \n \n \n \n \n Home\n \n \n \n \n \n Search\n \n \n \n \n \n Drinks\n \n \n \n \n \n Equipment\n \n \n \n \n \n Settings\n \n \n \n
\n \n\n\n## Layout example\n\nFixed side navigation places the side navigation to the viewport.\n\nexport const basicLayoutFixedViewport = [\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 \n \n \n \n \n
\n
\n \n \n

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vestibulum venenatis facilisis. Nam tortor felis, auctor vel ante quis, tempor interdum libero. In dictum sodales velit, eu egestas arcu dignissim ac. Aliquam facilisis eros dolor, id laoreet orci sagittis ut. Sed tempus, lacus in pretium molestie, lectus magna interdum risus, vel fringilla libero ex eu dui. Suspendisse ullamcorper vehicula lacinia. Phasellus congue velit nisl, vitae congue ligula rutrum id.

\n \n \n

Etiam in suscipit metus. Duis semper, sapien a molestie semper, ex nibh porttitor tellus, vel molestie justo odio vel purus. Curabitur porttitor, tortor sed semper sollicitudin, odio odio congue tortor, eget pulvinar tellus nisl ac lacus. In ultricies commodo lorem, a laoreet diam. Ut a mauris at tellus tincidunt ullamcorper sit amet in metus. Aenean facilisis placerat dictum. Phasellus mattis ante sollicitudin luctus iaculis. Nam porttitor lobortis rhoncus. Nam nec malesuada purus, at pulvinar mauris. Nam non lorem ante.

\n \n \n
\n \n Get Started\n Accessibility\n Styles\n \n \n
\n
`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `// Inline styling added for verboseness\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 \n \n

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vestibulum venenatis facilisis. Nam tortor felis, auctor vel ante quis, tempor interdum libero. In dictum sodales velit, eu egestas arcu dignissim ac. Aliquam facilisis eros dolor, id laoreet orci sagittis ut. Sed tempus, lacus in pretium molestie, lectus magna interdum risus, vel fringilla libero ex eu dui. Suspendisse ullamcorper vehicula lacinia. Phasellus congue velit nisl, vitae congue ligula rutrum id.

\n \n \n

Etiam in suscipit metus. Duis semper, sapien a molestie semper, ex nibh porttitor tellus, vel molestie justo odio vel purus. Curabitur porttitor, tortor sed semper sollicitudin, odio odio congue tortor, eget pulvinar tellus nisl ac lacus. In ultricies commodo lorem, a laoreet diam. Ut a mauris at tellus tincidunt ullamcorper sit amet in metus. Aenean facilisis placerat dictum. Phasellus mattis ante sollicitudin luctus iaculis. Nam porttitor lobortis rhoncus. Nam nec malesuada purus, at pulvinar mauris. Nam non lorem ante.

\n \n \n
\n \n Get Started\n Accessibility\n Styles\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 View example in new window\n \n\n", "path": "/components/side-navigation/code", - "date": "2024-05-31", + "date": "2024-05-02", "title": "Side navigation", "status": "BETA", "subTitle": "Side navigation provides an app's main navigation and is fixed on the left-hand side of the app. It includes the app's name, main navigation and optional secondary links.", @@ -3312,10 +3312,10 @@ ], "meta": { "relativePath": "components/side-nav/code.mdx", - "createdAt": "2024-05-31T10:44:10.925Z", - "lastModified": "2024-05-31T10:44:10.925Z", - "size": 78275, - "formattedSize": "76.4 KB" + "createdAt": "2024-05-21T09:12:11.379Z", + "lastModified": "2024-05-21T09:12:11.379Z", + "size": 77390, + "formattedSize": "75.6 KB" } }, { @@ -3344,8 +3344,8 @@ ], "meta": { "relativePath": "components/side-nav/guidance.mdx", - "createdAt": "2024-05-30T12:04:49.468Z", - "lastModified": "2024-05-30T12:04:49.468Z", + "createdAt": "2024-05-13T07:27:37.384Z", + "lastModified": "2024-05-13T07:27:37.384Z", "size": 12176, "formattedSize": "11.9 KB" } @@ -3383,9 +3383,9 @@ }, { "id": "components__skeleton__codex", - "contents": "\nimport {\n IcSkeleton,\n IcTypography,\n IcCard,\n IcButton,\n SlottedSVG,\n} from \"@ukic/react\";\n\n## Component demo\n\nexport const snippets = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n\n \n\n`,\n long: `.container {\n display: flex;\n flex-direction: column;\n gap: 8px;\n }\n \n \n
\n {shortCode}\n
`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\n\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
\n\n\n## Skeleton details\n\n\n\n## Variants\n\n### Inherited size from child\n\nexport const snippetsInherited = [\n {\n technology: \"Web component\",\n snippets: {\n short: `
Test text
`,\n long: `.child {\n height:200px;\n width:450px;\n }\n \n \n {shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\n
Test text
\n`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n child: {\n height: \"200px\",\n width: \"450px\"\n },\n });\n const classes = useStyles();\n return (\n {shortCode}\n )`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n child: {\n height: \"200px\",\n width: \"450px\"\n },\n });\n const classes = useStyles();\n return (\n {shortCode}\n )`,\n },\n ],\n },\n },\n];\n\n\n \n \n Test text\n \n \n\n\n### Set width and height\n\nCSS changes directly to `Skeleton` must be applied with inline styling.\n\nexport const snippetsSetWidthAndHeight = [\n {\n technology: \"Web component\",\n snippets: {\n short: `

Height and width set with styles

\n\n

Height set with styles

\n\n

Width set with styles

\n`,\n long: `.container {\n display: flex;\n flex-direction: column;\n gap: 8px;\n }\n \n \n
\n {shortCode}\n
`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `

Height and width set with styles

\n\n

Height set with styles<

/IcTypography>\n\n

Width set with styles

\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

Height and width set with styles

\n \n \n \n

Height set with styles

\n \n \n \n

Width set with styles

\n \n \n
\n\n\n### Light\n\nexport const snippetsLight = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n\n \n\n`,\n long: `
\n {shortCode}\n
`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\n\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
\n\n\n### Within IcCard component\n\nexport const snippetsInCard = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\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 long: [\n {\n language: \"Typescript\",\n snippet: `{shortCode}`,\n },\n {\n language: \"Javascript\",\n snippet: `{shortCode}`,\n },\n ],\n },\n },\n];\n\nexport const loading = () => (\n \n \n \n \n \n \n \n \n);\n\nexport const loaded = () => (\n \n \n \n \n
\n Accept\n Cancel\n
\n \n);\n\nexport const ContentFunction = () => {\n const [content, setContent] = React.useState(loaded);\n const loadFunc = () => {\n setContent(loading);\n setTimeout(() => {\n setContent(loaded);\n }, 3000);\n };\n return (\n
\n {content}\n
\n {\n loadFunc();\n }}\n >\n \n \n \n \n Refresh\n \n
\n );\n};\n\n\n \n\n", + "contents": "\nimport {\n IcSkeleton,\n IcTypography,\n IcCard,\n IcButton,\n SlottedSVG,\n} from \"@ukic/react\";\n\n## Component demo\n\nexport const snippets = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n\n \n\n`,\n long: `.container {\n display: flex;\n flex-direction: column;\n gap: 8px;\n }\n \n \n
\n {shortCode}\n
`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\n\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
\n\n\n## Skeleton details\n\n\n\n## Variants\n\n### Inherited size from child\n\nexport const snippetsInherited = [\n {\n technology: \"Web component\",\n snippets: {\n short: `
Test text
`,\n long: `.child {\n height:200px;\n width:450px;\n }\n \n \n {shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\n
Test text
\n`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n child: {\n height: \"200px\",\n width: \"450px\"\n },\n });\n const classes = useStyles();\n return (\n {shortCode}\n )`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n child: {\n height: \"200px\",\n width: \"450px\"\n },\n });\n const classes = useStyles();\n return (\n {shortCode}\n )`,\n },\n ],\n },\n },\n];\n\n\n \n \n Test text\n \n \n\n\n### Set width and height\n\nCSS changes directly to `Skeleton` must be applied with inline styling.\n\nexport const snippetsSetWidthAndHeight = [\n {\n technology: \"Web component\",\n snippets: {\n short: `

Height and width set with styles

\n\n

Height set with styles

\n\n

Width set with styles

\n`,\n long: `.container {\n display: flex;\n flex-direction: column;\n gap: 8px;\n }\n \n \n
\n {shortCode}\n
`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `

Height and width set with styles

\n\n

Height set with styles<

/IcTypography>\n\n

Width set with styles

\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

Height and width set with styles

\n \n \n \n

Height set with styles

\n \n \n \n

Width set with styles

\n \n \n
\n\n\n### Light\n\nexport const snippetsLight = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n\n \n\n`,\n long: `
\n {shortCode}\n
`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\n\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
\n\n\n### Within IcCard component\n\nexport const snippetsInCard = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\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 long: [\n {\n language: \"Typescript\",\n snippet: `{shortCode}`,\n },\n {\n language: \"Javascript\",\n snippet: `{shortCode}`,\n },\n ],\n },\n },\n];\n\nexport const loading = () => (\n \n \n \n \n \n \n \n \n);\n\nexport const loaded = () => (\n \n \n \n \n
\n Accept\n Cancel\n
\n \n);\n\nexport const ContentFunction = () => {\n const [content, setContent] = React.useState(loaded);\n const loadFunc = () => {\n setContent(loading);\n setTimeout(() => {\n setContent(loaded);\n }, 3000);\n };\n return (\n
\n {content}\n
\n {\n loadFunc();\n }}\n >\n \n \n \n \n Refresh\n \n
\n );\n};\n\n\n \n\n", "path": "/components/skeleton/code", - "date": "2024-05-31", + "date": "2024-05-02", "title": "Skeleton", "status": "BETA", "subTitle": "Skeleton loading states are representations of the shape of content that help inform users that a specific type of component is loading.", @@ -3406,9 +3406,9 @@ ], "meta": { "relativePath": "components/skeleton/code.mdx", - "createdAt": "2024-05-31T10:44:10.833Z", - "lastModified": "2024-05-31T10:44:10.833Z", - "size": 11892, + "createdAt": "2024-05-21T09:12:11.379Z", + "lastModified": "2024-05-21T09:12:11.379Z", + "size": 11928, "formattedSize": "11.6 KB" } }, @@ -3438,8 +3438,8 @@ ], "meta": { "relativePath": "components/skeleton/guidance.mdx", - "createdAt": "2024-05-30T12:04:49.472Z", - "lastModified": "2024-05-30T12:04:49.472Z", + "createdAt": "2024-05-13T07:27:37.384Z", + "lastModified": "2024-05-13T07:27:37.384Z", "size": 4677, "formattedSize": "4.6 KB" } @@ -3479,7 +3479,7 @@ "id": "components__status-tags__codex", "contents": "\nimport { IcStatusTag } from \"@ukic/react\";\n\nexport const snippetsDefault = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n\n\n`,\n long: `.parent-container {\n display: flex;\n gap: 8px;\n flex-wrap: wrap;\n padding: 16px;\n }\n \n \n
\n {shortCode}\n
`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\n\n\n`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n display: \"flex\",\n flexWrap: \"wrap\",\n gap: \"8px\",\n padding: \"16px\",\n },\n});\nconst classes = useStyles();\nreturn (\n
\n {shortCode}\n
\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n display: \"flex\",\n flexWrap: \"wrap\",\n gap: \"8px\",\n padding: \"16px\",\n },\n});\nconst classes = useStyles();\nreturn (\n
\n {shortCode}\n
\n)`,\n },\n ],\n },\n },\n];\n\n\n \n \n \n \n\n\n## Status tag details\n\n\n\n## Variants\n\n### Emphasis\n\nexport const snippetsEmphasis = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n\n\n`,\n long: `.parent-container {\n display: flex;\n gap: 8px;\n flex-wrap: wrap;\n padding: 16px;\n }\n \n \n
\n {shortCode}\n
`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\n\n\n`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n display: \"flex\",\n flexWrap: \"wrap\",\n gap: \"8px\",\n padding: \"16px\",\n },\n});\nconst classes = useStyles();\nreturn (\n
\n {shortCode}\n
\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n display: \"flex\",\n flexWrap: \"wrap\",\n gap: \"8px\",\n padding: \"16px\",\n },\n});\nconst classes = useStyles();\nreturn (\n
\n {shortCode}\n
\n)`,\n },\n ],\n },\n },\n];\n\n\n \n \n \n \n\n\n### Small\n\nexport const snippetsSmall = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n\n\n`,\n long: `.parent-container {\n display: flex;\n gap: 8px;\n flex-wrap: wrap;\n padding: 16px;\n }\n \n \n
\n {shortCode}\n
`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\n\n\n`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n display: \"flex\",\n flexWrap: \"wrap\",\n gap: \"8px\",\n padding: \"16px\",\n },\n});\nconst classes = useStyles();\nreturn (\n
\n {shortCode}\n
\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n display: \"flex\",\n flexWrap: \"wrap\",\n gap: \"8px\",\n padding: \"16px\",\n },\n});\nconst classes = useStyles();\nreturn (\n
\n {shortCode}\n
\n)`,\n },\n ],\n },\n },\n];\n\n\n \n \n \n \n\n", "path": "/components/status-tag/code", - "date": "2024-05-31", + "date": "2024-05-02", "title": "Status tag", "status": "BETA", "subTitle": "Status tags are short, clear and digestible ways to display the status of something on the page.", @@ -3500,8 +3500,8 @@ ], "meta": { "relativePath": "components/status-tags/code.mdx", - "createdAt": "2024-05-31T10:44:10.849Z", - "lastModified": "2024-05-31T10:44:10.849Z", + "createdAt": "2024-05-21T09:12:11.379Z", + "lastModified": "2024-05-21T09:12:11.379Z", "size": 6597, "formattedSize": "6.4 KB" } @@ -3532,8 +3532,8 @@ ], "meta": { "relativePath": "components/status-tags/guidance.mdx", - "createdAt": "2024-05-30T12:04:49.472Z", - "lastModified": "2024-05-30T12:04:49.472Z", + "createdAt": "2024-05-13T07:27:37.384Z", + "lastModified": "2024-05-13T07:27:37.384Z", "size": 6863, "formattedSize": "6.7 KB" } @@ -3573,7 +3573,7 @@ "id": "components__stepper__codex", "contents": "\nimport { IcStepper, IcStep } from \"@ukic/react\";\n\n## Component demo\n\nexport const snippets = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n \n \n \n`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\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## Step details\n\n\n\n## Stepper details\n\n\n\n## Variants\n\n### Compact stepper\n\nexport const compactStepper = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n \n \n \n`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\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### Left-aligned\n\nexport const leftAligned = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n \n \n \n`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\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### With hidden step information\n\nexport const hiddenStepInfo = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n \n \n \n`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\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### With subtitles\n\nexport const withSubtitles = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\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 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### Custom connector width\n\nexport const customConnectorWidth = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n \n \n \n`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\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", "path": "/components/stepper/code", - "date": "2024-05-31", + "date": "2024-05-02", "title": "Stepper", "status": "BETA", "subTitle": "A stepper is a visual representation of a user's progress through a predefined set of steps in a linear process.", @@ -3594,8 +3594,8 @@ ], "meta": { "relativePath": "components/stepper/code.mdx", - "createdAt": "2024-05-31T10:44:10.949Z", - "lastModified": "2024-05-31T10:44:10.949Z", + "createdAt": "2024-05-21T09:12:11.379Z", + "lastModified": "2024-05-21T09:12:11.379Z", "size": 8348, "formattedSize": "8.2 KB" } @@ -3626,8 +3626,8 @@ ], "meta": { "relativePath": "components/stepper/guidance.mdx", - "createdAt": "2024-05-30T12:04:49.472Z", - "lastModified": "2024-05-30T12:04:49.472Z", + "createdAt": "2024-05-13T07:27:37.388Z", + "lastModified": "2024-05-13T07:27:37.388Z", "size": 7478, "formattedSize": "7.3 KB" } @@ -3665,9 +3665,9 @@ }, { "id": "components__switch__codex", - "contents": "\nimport { IcSwitch } from \"@ukic/react\";\n\n## Component demo\n\nexport const snippetsDefault = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: ` console.log({ \n checked: ev.detail.checked, \n value: ev.detail.value\n })}\n/>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `{shortCode}`,\n },\n {\n language: \"Javascript\",\n snippet: `{shortCode}`,\n },\n ],\n },\n },\n];\n\n\n \n console.log({\n checked: ev.detail.checked,\n value: ev.detail.value,\n })\n }\n />\n\n\n## Switch details\n\n\n\n## Variants\n\n### State\n\nexport const snippetsState = [\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### Small\n\nexport const snippetsSmall = [\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### Disabled\n\nexport const snippetsDisabled = [\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\n\n### Helper text and right adornment\n\nexport const snippetsHelperAndAdornment = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n \n \n \n`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\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", + "contents": "\nimport { IcSwitch } from \"@ukic/react\";\n\n## Component demo\n\nexport const snippetsDefault = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: ` console.log({ \n checked: ev.detail.checked, \n value: ev.detail.value\n })}\n/>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `{shortCode}`,\n },\n {\n language: \"Javascript\",\n snippet: `{shortCode}`,\n },\n ],\n },\n },\n];\n\n\n \n console.log({\n checked: ev.detail.checked,\n value: ev.detail.value,\n })\n }\n />\n\n\n## Switch details\n\n\n\n## Variants\n\n### State\n\nexport const snippetsState = [\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### Small\n\nexport const snippetsSmall = [\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### Disabled\n\nexport const snippetsDisabled = [\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\n\n### Helper text and right adornment\n\nexport const snippetsHelperAndAdornment = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n \n \n \n`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\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", "path": "/components/switch/code", - "date": "2024-05-31", + "date": "2024-05-02", "title": "Switch", "status": "BETA", "subTitle": "Switches are used to quickly toggle an option on or off.", @@ -3688,10 +3688,10 @@ ], "meta": { "relativePath": "components/switch/code.mdx", - "createdAt": "2024-05-31T10:44:10.821Z", - "lastModified": "2024-05-31T10:44:10.821Z", - "size": 5867, - "formattedSize": "5.7 KB" + "createdAt": "2024-05-21T09:12:11.379Z", + "lastModified": "2024-05-21T09:12:11.379Z", + "size": 5903, + "formattedSize": "5.8 KB" } }, { @@ -3720,8 +3720,8 @@ ], "meta": { "relativePath": "components/switch/guidance.mdx", - "createdAt": "2024-05-30T12:04:49.472Z", - "lastModified": "2024-05-30T12:04:49.472Z", + "createdAt": "2024-05-13T07:27:37.388Z", + "lastModified": "2024-05-13T07:27:37.388Z", "size": 6214, "formattedSize": "6.1 KB" } @@ -3761,7 +3761,7 @@ "id": "components__tabs__codex", "contents": "\nimport { IcTab, IcTabContext, IcTabGroup, IcTabPanel } from \"@ukic/react\";\n\n## Component demo\n\nexport const snippets = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n \n Ingredients\n Method\n History\n \n Tab One - Ingredients\n Tab Two - Method\n Tab Three - History\n\n`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\n console.log({\n tabIndex: ev.detail.tabIndex,\n tabLabel: ev.detail.tabLabel,\n })\n }\n>\n \n Ingredients\n Method\n History\n \n Tab One - Ingredients\n Tab Two - Method\n Tab Three - History\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 console.log({\n tabIndex: ev.detail.tabIndex,\n tabLabel: ev.detail.tabLabel,\n })\n }\n >\n \n Ingredients\n Method\n History\n \n Tab One - Ingredients\n Tab Two - Method\n Tab Three - History\n \n\n\n## Tab details\n\n\n\n## Tab context details\n\n\n\n## Tab list details\n\n\n\n## Tab panel details\n\n\n\n## Variants\n\n### With icons\n\nexport const withIcons = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n \n \n Ingredients\n \n \n \n \n \n Method\n \n \n \n \n \n History\n \n \n \n \n \n Tab One - Ingredients\n Tab Two - Method\n Tab Three - History\n`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\n \n \n Ingredients\n \n \n \n \n \n Method\n \n \n \n \n \n History\n \n \n \n \n \n Tab One - Ingredients\n Tab Two - Method\n Tab Three - History\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 Ingredients\n \n \n \n \n \n Method\n \n \n \n \n \n History\n \n \n \n \n \n Tab One - Ingredients\n Tab Two - Method\n Tab Three - History\n \n\n\n### Disabled\n\nexport const disabled = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n \n Ingredients\n Method\n History\n \n Tab One - Ingredients\n Tab Two - Method\n Tab Three - History\n`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\n \n Ingredients\n Method\n History\n \n Tab One - Ingredients\n Tab Two - Method\n Tab Three - History\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 Ingredients\n Method\n History\n \n Tab One - Ingredients\n Tab Two - Method\n Tab Three - History\n \n\n\n### Light\n\nexport const light = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n \n Ingredients\n Method\n History\n \n Tab One - Ingredients\n Tab Two - Method\n Tab Three - History\n`,\n long: `.dark-background {\n background-color: #2c2f34;\n }\n \n \n
\n {shortCode}\n
`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\n \n Ingredients\n Method\n History\n \n Tab One - Ingredients\n Tab Two - Method\n Tab Three - History\n`,\n long: [\n {\n language: \"Typescript\",\n snippet: ` const useStyles = createUseStyles({\n darkBackground: {\n backgroundColor: \"#2c2f34\",\n },\n });\n const classes = useStyles();\n return (\n
\n {shortCode}\n
\n )`,\n },\n {\n language: \"Javascript\",\n snippet: ` const useStyles = createUseStyles({\n darkBackground: {\n backgroundColor: \"#2c2f34\",\n },\n });\n const classes = useStyles();\n return (\n
\n {shortCode}\n
\n )`,\n },\n ],\n },\n },\n];\n\n\n \n \n Ingredients\n Method\n History\n \n Tab One - Ingredients\n Tab Two - Method\n Tab Three - History\n \n\n\n### Compact\n\nexport const compact = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n \n Ingredients\n Method\n History\n Drinks\n Recipes\n \n Tab One - Ingredients\n Tab Two - Method\n Tab Three - History\n Tab Four - Drinks\n Tab Five - Recipes\n`,\n long: `.tabs ic-tab-group,\n .tabs ic-tab-panel {\n width: 60%;\n margin-left: auto;\n margin-right: auto;\n }\n \n \n {shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\n \n Ingredients\n Method\n History\n Drinks\n Recipes\n \n Tab One - Ingredients\n Tab Two - Method\n Tab Three - History\n Tab Four - Drinks\n Tab Five - Recipes\n`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n compactTabsContainer: {\n width: \"60%\",\n marginLeft: \"auto\",\n marginRight: \"auto\",\n },\n});\nconst classes = useStyles();\nreturn (\n
\n {shortCode}\n
\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n compactTabsContainer: {\n width: \"60%\",\n marginLeft: \"auto\",\n marginRight: \"auto\",\n },\n});\nconst classes = useStyles();\nreturn (\n
\n {shortCode}\n
\n)`,\n },\n ],\n },\n },\n];\n\n\n \n \n Ingredients\n Method\n History\n Drinks\n Recipes\n \n Tab One - Ingredients\n Tab Two - Method\n Tab Three - History\n Tab Four - Drinks\n Tab Five - Recipes\n \n\n\n### Nested Tabs\n\nexport const nested = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n \n Ingredients\n Method\n History\n \n \n \n \n Espresso\n Water\n Milk\n \n Nested Tab Panel One - Espresso\n Nested Tab Panel Two - Water\n Nested Tab Panel Three - Milk\n \n \n Outer Tab Panel Two - Method\n Outer Tab Panel Three - History\n`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\n \n Ingredients\n Method\n History\n \n \n \n \n Espresso\n Water\n Milk\n \n Nested Tab Panel One - Espresso\n Nested Tab Panel Two - Water\n Nested Tab Panel Three - Milk\n \n \n Outer Tab Panel Two - Method\n Outer Tab Panel Three - History\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 Ingredients\n Method\n History\n \n \n \n \n Espresso\n Water\n Milk\n \n Nested Tab Panel One - Espresso\n Nested Tab Panel Two - Water\n Nested Tab Panel Three - Milk\n \n \n Outer Tab Panel Two - Method\n Outer Tab Panel Three - History\n \n\n", "path": "/components/tabs/code", - "date": "2024-05-31", + "date": "2024-05-02", "title": "Tabs", "status": "BETA", "subTitle": "Tabs let users navigate between content within the same context. Tabs organise complex layouts by moving content into multiple sections.", @@ -3782,8 +3782,8 @@ ], "meta": { "relativePath": "components/tabs/code.mdx", - "createdAt": "2024-05-31T10:44:10.885Z", - "lastModified": "2024-05-31T10:44:10.885Z", + "createdAt": "2024-05-21T09:12:11.379Z", + "lastModified": "2024-05-21T09:12:11.379Z", "size": 16836, "formattedSize": "16.4 KB" } @@ -3814,8 +3814,8 @@ ], "meta": { "relativePath": "components/tabs/guidance.mdx", - "createdAt": "2024-05-30T12:04:49.472Z", - "lastModified": "2024-05-30T12:04:49.472Z", + "createdAt": "2024-05-13T07:27:37.388Z", + "lastModified": "2024-05-13T07:27:37.388Z", "size": 7072, "formattedSize": "6.9 KB" } @@ -3853,9 +3853,9 @@ }, { "id": "components__text-field__codex", - "contents": "\nimport { IcTextField } from \"@ukic/react\";\n\n## Component demo\n\nexport const snippetsDefault = [\n {\n technology: \"Web component\",\n snippets: {\n short: ``,\n long: `.parent-container {\n padding: 16px;\n }\n\n\n
\n {shortCode}\n
\n `,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: ` console.log(ev.detail.value)}\n/>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n padding: \"16px\",\n },\n});\nconst classes = useStyles();\nreturn (\n
\n {shortCode}\n
\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n padding: \"16px\",\n },\n});\nconst classes = useStyles();\nreturn (\n
\n {shortCode}\n
\n)`,\n },\n ],\n },\n },\n];\n\n\n console.log(ev.detail.value)}\n />\n\n\n## Text field details\n\n\n\n## Variants\n\n### With icon, value and max length\n\nexport const snippetsIconValueMaxLength = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n \n \n \n`,\n long: `.parent-container {\n padding: 16px;\n }\n\n\n
\n {shortCode}\n
`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\n \n \n \n`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n padding: \"16px\",\n },\n});\nconst classes = useStyles();\nreturn (\n
\n {shortCode}\n
\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n padding: \"16px\",\n },\n});\nconst classes = useStyles();\nreturn (\n
\n {shortCode}\n
\n)`,\n },\n ],\n },\n },\n];\n\n\n \n \n \n \n \n\n\n### Disabled\n\nexport const snippetsDisabled = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n \n \n \n \n`,\n long: `.parent-container {\n padding: 16px;\n }\n\n\n
\n {shortCode}\n
`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\n \n \n \n \n`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n padding: \"16px\",\n },\n});\nconst classes = useStyles();\nreturn (\n
\n {shortCode}\n
\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n padding: \"16px\",\n },\n});\nconst classes = useStyles();\nreturn (\n
\n {shortCode}\n
\n)`,\n },\n ],\n },\n },\n];\n\n\n \n \n \n \n \n \n\n\n### Size small\n\nexport const snippetsSmall = [\n {\n technology: \"Web component\",\n snippets: {\n short: ``,\n long: `.parent-container {\n padding: 16px;\n }\n\n\n
\n {shortCode}\n
\n `,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: ` console.log(ev.detail.value)}\n/>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n padding: \"16px\",\n },\n});\nconst classes = useStyles();\nreturn (\n
\n {shortCode}\n
\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n padding: \"16px\",\n },\n});\nconst classes = useStyles();\nreturn (\n
\n {shortCode}\n
\n)`,\n },\n ],\n },\n },\n];\n\n\n console.log(ev.detail.value)}\n />\n\n\n### Validation\n\nexport const snippetsValidation = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n\n\n`,\n long: `.parent-container {\n padding: 16px;\n }\n\n\n
\n {shortCode}\n
`,\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\n\n### With min and max values\n\nIn this example, an error message will display when the input is either below the min value or above the max value. This only affects numeric input fields.\n\nexport const snippetsMinMax = [\n {\n technology: \"Web component\",\n snippets: {\n short: ``,\n long: `.parent-container {\n padding: 16px;\n }\n\n\n
\n {shortCode}\n
`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: ``,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n padding: \"16px\",\n },\n});\nconst classes = useStyles();\nreturn (\n
\n {shortCode}\n
\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n padding: \"16px\",\n },\n});\nconst classes = useStyles();\nreturn (\n
\n {shortCode}\n
\n)`,\n },\n ],\n },\n },\n];\n\n\n \n\n\n### Text area with resize\n\nexport const snippetsTextArea = [\n {\n technology: \"Web component\",\n snippets: {\n short: ``,\n long: `.parent-container {\n padding: 16px;\n }\n\n\n
\n {shortCode}\n
`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: ``,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n padding: \"16px\",\n },\n});\nconst classes = useStyles();\nreturn (\n
\n {shortCode}\n
\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n padding: \"16px\",\n },\n});\nconst classes = useStyles();\nreturn (\n
\n {shortCode}\n
\n)`,\n },\n ],\n },\n },\n];\n\n\n \n\n", + "contents": "\nimport { IcTextField } from \"@ukic/react\";\n\n## Component demo\n\nexport const snippetsDefault = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n`,\n long: `{shortCode}\n`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: ` console.log(ev.detail.value)}\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## Text field details\n\n\n\n## Variants\n\n### With icon, value and max length\n\nexport const snippetsIconValueMaxLength = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n \n \n \n`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\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### Disabled\n\nexport const snippetsDisabled = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\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### Size small\n\nexport const snippetsSmall = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n`,\n long: `{shortCode}\n`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: ` console.log(ev.detail.value)}\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### Validation\n\nexport const snippetsValidation = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n\n\n\n\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\n\n### With min and max values\n\nIn this example, an error message will display when the input is either below the min value or above the max value. This only affects numeric input fields.\n\nexport const snippetsMinMax = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n`,\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### Text area with resize\n\nexport const snippetsTextArea = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n`,\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", "path": "/components/text-field/code", - "date": "2024-05-31", + "date": "2024-05-02", "title": "Text field", "status": "BETA", "subTitle": "Text fields let users input and edit text. Text fields capture a single line of text and text areas capture multiple lines of text.", @@ -3876,10 +3876,10 @@ ], "meta": { "relativePath": "components/text-field/code.mdx", - "createdAt": "2024-05-31T10:44:10.857Z", - "lastModified": "2024-05-31T10:44:10.857Z", - "size": 16440, - "formattedSize": "16.1 KB" + "createdAt": "2024-05-21T09:12:11.383Z", + "lastModified": "2024-05-21T09:12:11.383Z", + "size": 13530, + "formattedSize": "13.2 KB" } }, { @@ -3908,8 +3908,8 @@ ], "meta": { "relativePath": "components/text-field/guidance.mdx", - "createdAt": "2024-05-30T12:04:49.476Z", - "lastModified": "2024-05-30T12:04:49.476Z", + "createdAt": "2024-05-13T07:27:37.392Z", + "lastModified": "2024-05-13T07:27:37.392Z", "size": 6758, "formattedSize": "6.6 KB" } @@ -3947,9 +3947,9 @@ }, { "id": "components__toasts__codex", - "contents": "\nimport {\n IcToast,\n IcToastRegion,\n IcButton,\n IcLink,\n SlottedSVG,\n} from \"@ukic/react\";\nimport { useRef } from \"react\";\n\nexport const defaultSnippet = [\n {\n technology: \"Web component\",\n snippets: {\n short: `Display toast\n\n \n`,\n long: `{shortCode}\n`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `Display toast component\n\n \n`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const toastRegionEl = useRef(null);\nconst toastEl = useRef(null);\nconst handleClick = () => {\n if (toastRegionEl.current && toastEl.current) {\n toastRegionEl.current.openToast = toastEl.current;\n }\n};\nreturn (\n <>\n {shortCode}\n \n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const toastRegionEl = useRef(null);\nconst toastEl = useRef(null);\nconst handleClick = () => {\n if (toastRegionEl.current && toastEl.current) {\n toastRegionEl.current.openToast = toastEl.current;\n }\n};\nreturn (\n <>\n {shortCode}\n \n)`,\n },\n ],\n },\n },\n];\n\n## Component demo\n\nexport const DefaultToast = () => {\n const toastRegionEl = useRef(null);\n const toastEl = useRef(null);\n const handleClick = () => {\n toastRegionEl.current.openToast = toastEl.current;\n };\n return (\n <>\n Display toast component\n \n \n \n \n );\n};\n\n\n \n\n\n## Toast region details\n\n\n\n## Toast details\n\n\n\n## Variants\n\n### Displaying toasts\n\nUse the `openToast` prop on the toast region component to display a toast message. Do not use the `setVisible` method on the toast component as this does not work with the toast queuing functionality.\n\n### Queuing toasts\n\nTo view the toasts queuing in the following example, click each button to open a toast and then the dismiss button on the visible toast. Each toast will appear one after the other.\n\nexport const queuingSnippet = [\n {\n technology: \"Web component\",\n snippets: {\n short: `Display default toast\nDisplay error toast\nDisplay auto dismiss toast\n\n \n \n \n`,\n long: `.btn-container {\n display: flex;\n gap: 8px;\n flex-wrap: wrap;\n padding: 16px;\n }\n\n\n
\n Display default toast\n Display error toast\n Display auto dismiss toast\n
\n \n \n \n \n \n `,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `Display default toast\nDisplay error toast\n\n Display auto dismiss toast\n\n\n \n \n \n`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const toastRegionEl = useRef(null);\nconst toastEl = useRef(null);\nconst errorToastEl = useRef(null);\nconst autoDismissToastEl = useRef(null);\nconst handleClick = () => {\n if (toastRegionEl.current && toastEl.current) {\n toastRegionEl.current.openToast = toastEl.current;\n }\n};\nconst handleErrorClick = () => {\n if (toastRegionEl.current && errorToastEl.current) {\n toastRegionEl.current.openToast = errorToastEl.current;\n }\n};\nconst handleAutoDismissClick = () => {\n if (toastRegionEl.current && autoDismissToastEl.current) {\n toastRegionEl.current.openToast = autoDismissToastEl.current;\n }\n};\nconst useStyles = createUseStyles({\n btnContainer: {\n display: \"flex\",\n flexWrap: \"wrap\",\n gap: \"8px\",\n padding: \"16px\",\n },\n});\nconst classes = useStyles();\nreturn (\n <>\n
\n Display default toast\n Display error toast\n \n Display auto dismiss toast\n \n
\n \n \n \n \n \n \n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const toastRegionEl = useRef(null);\nconst toastEl = useRef(null);\nconst errorToastEl = useRef(null);\nconst autoDismissToastEl = useRef(null);\nconst handleClick = () => {\n if (toastRegionEl.current && toastEl.current) {\n toastRegionEl.current.openToast = toastEl.current;\n }\n};\nconst handleErrorClick = () => {\n if (toastRegionEl.current && errorToastEl.current) {\n toastRegionEl.current.openToast = errorToastEl.current;\n }\n};\nconst handleAutoDismissClick = () => {\n if (toastRegionEl.current && autoDismissToastEl.current) {\n toastRegionEl.current.openToast = autoDismissToastEl.current;\n }\n};\nconst useStyles = createUseStyles({\n btnContainer: {\n display: \"flex\",\n flexWrap: \"wrap\",\n gap: \"8px\",\n padding: \"16px\",\n },\n});\nconst classes = useStyles();\nreturn (\n <>\n
\n Display default toast\n Display error toast\n \n Display auto dismiss toast\n \n
\n \n \n \n \n \n \n)`,\n },\n ],\n },\n },\n];\n\nexport const QueuingToast = () => {\n const toastRegionEl = useRef(null);\n const toastEl = useRef(null);\n const errorToastEl = useRef(null);\n const autoDismissToastEl = useRef(null);\n const handleClick = () => {\n toastRegionEl.current.openToast = toastEl.current;\n };\n const handleErrorClick = () => {\n toastRegionEl.current.openToast = errorToastEl.current;\n };\n const handleAutoDismissClick = () => {\n toastRegionEl.current.openToast = autoDismissToastEl.current;\n };\n return (\n <>\n
\n Display default toast\n Display error toast\n \n Display auto dismiss toast\n \n
\n \n \n \n \n \n \n );\n};\n\n\n \n\n\n### Status variant\n\nexport const withVariantSnippet = [\n {\n technology: \"Web component\",\n snippets: {\n short: `Display success toast\n\n \n`,\n long: `{shortCode}\n`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `Display success toast\n\n \n`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const toastRegionEl = useRef(null);\nconst toastEl = useRef(null);\nconst handleClick = () => {\n if (toastRegionEl.current && toastEl.current) {\n toastRegionEl.current.openToast = toastEl.current;\n }\n};\nreturn (\n <>\n {shortCode}\n \n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const toastRegionEl = useRef(null);\nconst toastEl = useRef(null);\nconst handleClick = () => {\n if (toastRegionEl.current && toastEl.current) {\n toastRegionEl.current.openToast = toastEl.current;\n }\n};\nreturn (\n <>\n {shortCode}\n \n)`,\n },\n ],\n },\n },\n];\n\nexport const WithVariantToast = () => {\n const toastRegionEl = useRef(null);\n const toastEl = useRef(null);\n const handleClick = () => {\n toastRegionEl.current.openToast = toastEl.current;\n };\n return (\n <>\n Display success toast\n \n \n \n \n );\n};\n\n\n \n\n\n### Multi-line\n\nexport const withMultilineSnippet = [\n {\n technology: \"Web component\",\n snippets: {\n short: `Display multi-line toast\n\n \n`,\n long: `{shortCode}\n`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `Display multi-line toast\n\n \n`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const toastRegionEl = useRef(null);\nconst toastEl = useRef(null);\nconst handleClick = () => {\n if (toastRegionEl.current && toastEl.current) {\n toastRegionEl.current.openToast = toastEl.current;\n }\n};\nreturn (\n <>\n {shortCode}\n \n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const toastRegionEl = useRef(null);\nconst toastEl = useRef(null);\nconst handleClick = () => {\n if (toastRegionEl.current && toastEl.current) {\n toastRegionEl.current.openToast = toastEl.current;\n }\n};\nreturn (\n <>\n {shortCode}\n \n)`,\n },\n ],\n },\n },\n];\n\nexport const MultilineToast = () => {\n const toastRegionEl = useRef(null);\n const toastEl = useRef(null);\n const handleClick = () => {\n toastRegionEl.current.openToast = toastEl.current;\n };\n return (\n <>\n Display multi-line toast\n \n \n \n \n );\n};\n\n\n \n\n\n### Slotted 'action' toast\n\nexport const slottedActionsSnippet = [\n {\n technology: \"Web component\",\n snippets: {\n short: `Display slotted buttons toast\nDisplay slotted buttons toast\n\n \n Retry\n \n \n Retry\n \n`,\n long: `.btn-container {\n display: flex;\n gap: 8px;\n flex-wrap: wrap;\n padding: 16px;\n }\n\n\n
\n Display slotted buttons toast\n Display slotted buttons toast\n
\n \n \n Retry\n \n \n Retry\n \n \n `,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `Display slotted button toast\nDisplay slotted link toast\n\n \n Retry\n \n \n Retry\n \n`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const toastRegionEl = useRef(null);\nconst buttonToastEl = useRef(null);\nconst linkToastEl = useRef(null);\nconst handleButtonToastClick = () => {\n if (toastRegionEl.current && buttonToastEl.current) {\n toastRegionEl.current.openToast = buttonToastEl.current;\n }\n};\nconst handleLinkToastClick = () => {\n if (toastRegionEl.current && linkToastEl.current) {\n toastRegionEl.current.openToast = linkToastEl.current;\n }\n};\nconst useStyles = createUseStyles({\n btnContainer: {\n display: \"flex\",\n flexWrap: \"wrap\",\n gap: \"8px\",\n padding: \"16px\",\n },\n});\nconst classes = useStyles();\nreturn (\n <>\n
\n \n Display slotted button toast\n \n \n Display slotted link toast\n \n
\n \n \n \n Retry\n \n \n \n \n Retry\n \n \n \n \n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const toastRegionEl = useRef(null);\nconst buttonToastEl = useRef(null);\nconst linkToastEl = useRef(null);\nconst handleButtonToastClick = () => {\n if (toastRegionEl.current && buttonToastEl.current) {\n toastRegionEl.current.openToast = buttonToastEl.current;\n }\n};\nconst handleLinkToastClick = () => {\n if (toastRegionEl.current && linkToastEl.current) {\n toastRegionEl.current.openToast = linkToastEl.current;\n }\n};\nconst useStyles = createUseStyles({\n btnContainer: {\n display: \"flex\",\n flexWrap: \"wrap\",\n gap: \"8px\",\n padding: \"16px\",\n },\n});\nconst classes = useStyles();\nreturn (\n <>\n
\n \n Display slotted button toast\n \n \n Display slotted link toast\n \n
\n \n \n \n Retry\n \n \n \n \n Retry\n \n \n \n \n)`,\n },\n ],\n },\n },\n];\n\nexport const SlottedActionsToast = () => {\n const toastRegionEl = useRef(null);\n const buttonToastEl = useRef(null);\n const linkToastEl = useRef(null);\n const handleButtonToastClick = () => {\n toastRegionEl.current.openToast = buttonToastEl.current;\n };\n const handleLinkToastClick = () => {\n toastRegionEl.current.openToast = linkToastEl.current;\n };\n return (\n <>\n
\n \n Display slotted button toast\n \n \n Display slotted link toast\n \n
\n \n \n \n Retry\n \n \n \n \n Retry\n \n \n \n \n );\n};\n\n\n \n\n\n### Auto-dismiss\n\nexport const autoDismissSnippet = [\n {\n technology: \"Web component\",\n snippets: {\n short: `Display auto-dismiss toast\n\n \n`,\n long: `{shortCode}\n`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `Display auto-dismiss toast\n\n \n`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const toastRegionEl = useRef(null);\nconst toastEl = useRef(null);\nconst handleClick = () => {\n if (toastRegionEl.current && toastEl.current) {\n toastRegionEl.current.openToast = toastEl.current;\n }\n};\nreturn (\n <>\n {shortCode}\n \n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const toastRegionEl = useRef(null);\nconst toastEl = useRef(null);\nconst handleClick = () => {\n if (toastRegionEl.current && toastEl.current) {\n toastRegionEl.current.openToast = toastEl.current;\n }\n};\nreturn (\n <>\n {shortCode}\n \n)`,\n },\n ],\n },\n },\n];\n\nexport const AutoDismissToast = () => {\n const toastRegionEl = useRef(null);\n const toastEl = useRef(null);\n const handleClick = () => {\n toastRegionEl.current.openToast = toastEl.current;\n };\n return (\n <>\n Display auto-dismiss toast\n \n \n \n \n );\n};\n\n\n \n\n\n### Custom neutral icon and aria-labels\n\nexport const customIconAriaLabelsSnippet = [\n {\n technology: \"Web component\",\n snippets: {\n short: `Display auto-dismiss toast\n\n \n \n coffee-outline\n \n \n \n`,\n long: `{shortCode}\n`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\n Display custom icon and aria-label toast\n\n\n \n \n coffee-outline\n \n \n \n`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const toastRegionEl = useRef(null);\nconst toastEl = useRef(null);\nconst handleClick = () => {\n if (toastRegionEl.current && toastEl.current) {\n toastRegionEl.current.openToast = toastEl.current;\n }\n};\nreturn (\n <>\n {shortCode}\n \n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const toastRegionEl = useRef(null);\nconst toastEl = useRef(null);\nconst handleClick = () => {\n if (toastRegionEl.current && toastEl.current) {\n toastRegionEl.current.openToast = toastEl.current;\n }\n};\nreturn (\n <>\n {shortCode}\n \n)`,\n },\n ],\n },\n },\n];\n\nexport const CustomIconAriaLabels = () => {\n const toastRegionEl = useRef(null);\n const toastEl = useRef(null);\n const handleClick = () => {\n toastRegionEl.current.openToast = toastEl.current;\n };\n return (\n <>\n \n Display custom icon and aria-labels toast\n \n \n \n \n coffee-outline\n \n \n \n \n \n );\n};\n\n\n \n\n", + "contents": "\nimport {\n IcToast,\n IcToastRegion,\n IcButton,\n IcLink,\n SlottedSVG,\n} from \"@ukic/react\";\nimport { useRef } from \"react\";\n\nexport const defaultSnippet = [\n {\n technology: \"Web component\",\n snippets: {\n short: `Display toast\n\n \n`,\n long: `{shortCode}\n`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `Display toast component\n\n \n`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const toastRegionEl = useRef(null);\n const toastEl = useRef(null);\n const handleClick = () => {\n if (toastRegionEl.current && toastEl.current) {\n toastRegionEl.current.openToast = toastEl.current;\n }\n };\n return (\n <>\n {shortCode}\n \n )`,\n },\n {\n language: \"Javascript\",\n snippet: `const toastRegionEl = useRef(null);\n const toastEl = useRef(null);\n const handleClick = () => {\n if (toastRegionEl.current && toastEl.current) {\n toastRegionEl.current.openToast = toastEl.current;\n }\n };\n return (\n <>\n {shortCode}\n \n )`,\n },\n ],\n },\n },\n];\n\n## Component demo\n\nexport const DefaultToast = () => {\n const toastRegionEl = useRef(null);\n const toastEl = useRef(null);\n const handleClick = () => {\n toastRegionEl.current.openToast = toastEl.current;\n };\n return (\n <>\n Display toast component\n \n \n \n \n );\n};\n\n\n \n\n\n## Toast region details\n\n\n\n## Toast details\n\n\n\n## Variants\n\n### Displaying toasts\n\nUse the `openToast` prop on the toast region component to display a toast message. Do not use the `setVisible` method on the toast component as this does not work with the toast queuing functionality.\n\n### Queuing toasts\n\nTo view the toasts queuing in the following example, click each button to open a toast and then the dismiss button on the visible toast. Each toast will appear one after the other.\n\nexport const queuingSnippet = [\n {\n technology: \"Web component\",\n snippets: {\n short: `Display default toast\nDisplay error toast\nDisplay auto dismiss toast\n\n \n \n \n`,\n long: `.btn-container {\n display: flex;\n gap: 8px;\n flex-wrap: wrap;\n padding: 16px;\n }\n\n\n
\n Display default toast\n Display error toast\n Display auto dismiss toast\n
\n \n \n \n \n \n `,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `Display default toast\nDisplay error toast\n\n Display auto dismiss toast\n\n\n \n \n \n`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const toastRegionEl = useRef(null);\nconst toastEl = useRef(null);\nconst errorToastEl = useRef(null);\nconst autoDismissToastEl = useRef(null);\nconst handleClick = () => {\n if (toastRegionEl.current && toastEl.current) {\n toastRegionEl.current.openToast = toastEl.current;\n }\n};\nconst handleErrorClick = () => {\n if (toastRegionEl.current && errorToastEl.current) {\n toastRegionEl.current.openToast = errorToastEl.current;\n }\n};\nconst handleAutoDismissClick = () => {\n if (toastRegionEl.current && autoDismissToastEl.current) {\n toastRegionEl.current.openToast = autoDismissToastEl.current;\n }\n};\nconst useStyles = createUseStyles({\n btnContainer: {\n display: \"flex\",\n flexWrap: \"wrap\",\n gap: \"8px\",\n padding: \"16px\",\n },\n});\nconst classes = useStyles();\nreturn (\n <>\n
\n Display default toast\n Display error toast\n \n Display auto dismiss toast\n \n
\n \n \n \n \n \n \n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const toastRegionEl = useRef(null);\nconst toastEl = useRef(null);\nconst errorToastEl = useRef(null);\nconst autoDismissToastEl = useRef(null);\nconst handleClick = () => {\n if (toastRegionEl.current && toastEl.current) {\n toastRegionEl.current.openToast = toastEl.current;\n }\n};\nconst handleErrorClick = () => {\n if (toastRegionEl.current && errorToastEl.current) {\n toastRegionEl.current.openToast = errorToastEl.current;\n }\n};\nconst handleAutoDismissClick = () => {\n if (toastRegionEl.current && autoDismissToastEl.current) {\n toastRegionEl.current.openToast = autoDismissToastEl.current;\n }\n};\nconst useStyles = createUseStyles({\n btnContainer: {\n display: \"flex\",\n flexWrap: \"wrap\",\n gap: \"8px\",\n padding: \"16px\",\n },\n});\nconst classes = useStyles();\nreturn (\n <>\n
\n Display default toast\n Display error toast\n \n Display auto dismiss toast\n \n
\n \n \n \n \n \n \n)`,\n },\n ],\n },\n },\n];\n\nexport const QueuingToast = () => {\n const toastRegionEl = useRef(null);\n const toastEl = useRef(null);\n const errorToastEl = useRef(null);\n const autoDismissToastEl = useRef(null);\n const handleClick = () => {\n toastRegionEl.current.openToast = toastEl.current;\n };\n const handleErrorClick = () => {\n toastRegionEl.current.openToast = errorToastEl.current;\n };\n const handleAutoDismissClick = () => {\n toastRegionEl.current.openToast = autoDismissToastEl.current;\n };\n return (\n <>\n
\n Display default toast\n Display error toast\n \n Display auto dismiss toast\n \n
\n \n \n \n \n \n \n );\n};\n\n\n \n\n\n### Status variant\n\nexport const withVariantSnippet = [\n {\n technology: \"Web component\",\n snippets: {\n short: `Display success toast\n\n \n`,\n long: `{shortCode}\n `,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `Display success toast\n\n \n`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const toastRegionEl = useRef(null);\nconst toastEl = useRef(null);\nconst handleClick = () => {\n if (toastRegionEl.current && toastEl.current) {\n toastRegionEl.current.openToast = toastEl.current;\n }\n};\nreturn (\n <>\n {shortCode}\n \n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const toastRegionEl = useRef(null);\nconst toastEl = useRef(null);\nconst handleClick = () => {\n if (toastRegionEl.current && toastEl.current) {\n toastRegionEl.current.openToast = toastEl.current;\n }\n};\nreturn (\n <>\n {shortCode}\n \n)`,\n },\n ],\n },\n },\n];\n\nexport const WithVariantToast = () => {\n const toastRegionEl = useRef(null);\n const toastEl = useRef(null);\n const handleClick = () => {\n toastRegionEl.current.openToast = toastEl.current;\n };\n return (\n <>\n Display success toast\n \n \n \n \n );\n};\n\n\n \n\n\n### Multi-line\n\nexport const withMultilineSnippet = [\n {\n technology: \"Web component\",\n snippets: {\n short: `Display multi-line toast\n\n \n`,\n long: `{shortCode}\n `,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `Display multi-line toast\n\n \n`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const toastRegionEl = useRef(null);\nconst toastEl = useRef(null);\nconst handleClick = () => {\n if (toastRegionEl.current && toastEl.current) {\n toastRegionEl.current.openToast = toastEl.current;\n }\n};\nreturn (\n <>\n {shortCode}\n \n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const toastRegionEl = useRef(null);\nconst toastEl = useRef(null);\nconst handleClick = () => {\n if (toastRegionEl.current && toastEl.current) {\n toastRegionEl.current.openToast = toastEl.current;\n }\n};\nreturn (\n <>\n {shortCode}\n \n)`,\n },\n ],\n },\n },\n];\n\nexport const MultilineToast = () => {\n const toastRegionEl = useRef(null);\n const toastEl = useRef(null);\n const handleClick = () => {\n toastRegionEl.current.openToast = toastEl.current;\n };\n return (\n <>\n Display multi-line toast\n \n \n \n \n );\n};\n\n\n \n\n\n### Slotted 'action' toast\n\nexport const slottedActionsSnippet = [\n {\n technology: \"Web component\",\n snippets: {\n short: `Display slotted buttons toast\nDisplay slotted buttons toast\n\n \n Retry\n \n \n Retry\n \n`,\n long: `.btn-container {\n display: flex;\n gap: 8px;\n flex-wrap: wrap;\n padding: 16px;\n }\n \n \n
\n Display slotted buttons toast\n Display slotted buttons toast\n
\n \n \n Retry\n \n \n Retry\n \n \n `,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `Display slotted button toast\nDisplay slotted link toast\n\n \n Retry\n \n \n Retry\n \n`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const toastRegionEl = useRef(null);\nconst buttonToastEl = useRef(null);\nconst linkToastEl = useRef(null);\nconst handleButtonToastClick = () => {\n if (toastRegionEl.current && buttonToastEl.current) {\n toastRegionEl.current.openToast = buttonToastEl.current;\n }\n};\nconst handleLinkToastClick = () => {\n if (toastRegionEl.current && linkToastEl.current) {\n toastRegionEl.current.openToast = linkToastEl.current;\n }\n};\nconst useStyles = createUseStyles({\n btnContainer: {\n display: \"flex\",\n flexWrap: \"wrap\",\n gap: \"8px\",\n padding: \"16px\",\n },\n});\nconst classes = useStyles();\nreturn (\n <>\n
\n \n Display slotted button toast\n \n \n Display slotted link toast\n \n
\n \n \n \n Retry\n \n \n \n \n Retry\n \n \n \n \n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const toastRegionEl = useRef(null);\nconst buttonToastEl = useRef(null);\nconst linkToastEl = useRef(null);\nconst handleButtonToastClick = () => {\n if (toastRegionEl.current && buttonToastEl.current) {\n toastRegionEl.current.openToast = buttonToastEl.current;\n }\n};\nconst handleLinkToastClick = () => {\n if (toastRegionEl.current && linkToastEl.current) {\n toastRegionEl.current.openToast = linkToastEl.current;\n }\n};\nconst useStyles = createUseStyles({\n btnContainer: {\n display: \"flex\",\n flexWrap: \"wrap\",\n gap: \"8px\",\n padding: \"16px\",\n },\n});\nconst classes = useStyles();\nreturn (\n <>\n
\n \n Display slotted button toast\n \n \n Display slotted link toast\n \n
\n \n \n \n Retry\n \n \n \n \n Retry\n \n \n \n \n)`,\n },\n ],\n },\n },\n];\n\nexport const SlottedActionsToast = () => {\n const toastRegionEl = useRef(null);\n const buttonToastEl = useRef(null);\n const linkToastEl = useRef(null);\n const handleButtonToastClick = () => {\n toastRegionEl.current.openToast = buttonToastEl.current;\n };\n const handleLinkToastClick = () => {\n toastRegionEl.current.openToast = linkToastEl.current;\n };\n return (\n <>\n
\n \n Display slotted button toast\n \n \n Display slotted link toast\n \n
\n \n \n \n Retry\n \n \n \n \n Retry\n \n \n \n \n );\n};\n\n\n \n\n\n### Auto-dismiss\n\nexport const autoDismissSnippet = [\n {\n technology: \"Web component\",\n snippets: {\n short: `Display auto-dismiss toast\n\n \n`,\n long: `{shortCode}\n `,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `Display auto-dismiss toast\n\n \n`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const toastRegionEl = useRef(null);\nconst toastEl = useRef(null);\nconst handleClick = () => {\n if (toastRegionEl.current && toastEl.current) {\n toastRegionEl.current.openToast = toastEl.current;\n }\n};\nreturn (\n <>\n {shortCode}\n \n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const toastRegionEl = useRef(null);\nconst toastEl = useRef(null);\nconst handleClick = () => {\n if (toastRegionEl.current && toastEl.current) {\n toastRegionEl.current.openToast = toastEl.current;\n }\n};\nreturn (\n <>\n {shortCode}\n \n)`,\n },\n ],\n },\n },\n];\n\nexport const AutoDismissToast = () => {\n const toastRegionEl = useRef(null);\n const toastEl = useRef(null);\n const handleClick = () => {\n toastRegionEl.current.openToast = toastEl.current;\n };\n return (\n <>\n Display auto-dismiss toast\n \n \n \n \n );\n};\n\n\n \n\n\n### Custom neutral icon and aria-labels\n\nexport const customIconAriaLabelsSnippet = [\n {\n technology: \"Web component\",\n snippets: {\n short: `Display auto-dismiss toast\n\n \n \n coffee-outline\n \n \n \n`,\n long: `{shortCode}\n `,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\n Display custom icon and aria-label toast\n\n\n \n \n coffee-outline\n \n \n \n`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const toastRegionEl = useRef(null);\nconst toastEl = useRef(null);\nconst handleClick = () => {\n if (toastRegionEl.current && toastEl.current) {\n toastRegionEl.current.openToast = toastEl.current;\n }\n};\nreturn (\n <>\n {shortCode}\n \n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const toastRegionEl = useRef(null);\nconst toastEl = useRef(null);\nconst handleClick = () => {\n if (toastRegionEl.current && toastEl.current) {\n toastRegionEl.current.openToast = toastEl.current;\n }\n};\nreturn (\n <>\n {shortCode}\n \n)`,\n },\n ],\n },\n },\n];\n\nexport const CustomIconAriaLabels = () => {\n const toastRegionEl = useRef(null);\n const toastEl = useRef(null);\n const handleClick = () => {\n toastRegionEl.current.openToast = toastEl.current;\n };\n return (\n <>\n \n Display custom icon and aria-labels toast\n \n \n \n \n coffee-outline\n \n \n \n \n \n );\n};\n\n\n \n\n", "path": "/components/toast/code", - "date": "2024-05-31", + "date": "2024-05-02", "title": "Toast", "status": "BETA", "subTitle": "Toasts give brief, non-critical updates about events that happen in an app. Toasts are sometimes called 'snackbars'.", @@ -3970,10 +3970,10 @@ ], "meta": { "relativePath": "components/toasts/code.mdx", - "createdAt": "2024-05-31T10:44:10.901Z", - "lastModified": "2024-05-31T10:44:10.901Z", - "size": 28502, - "formattedSize": "27.8 KB" + "createdAt": "2024-05-21T09:12:11.383Z", + "lastModified": "2024-05-21T09:12:11.383Z", + "size": 28834, + "formattedSize": "28.2 KB" } }, { @@ -4002,8 +4002,8 @@ ], "meta": { "relativePath": "components/toasts/guidance.mdx", - "createdAt": "2024-05-30T12:04:49.476Z", - "lastModified": "2024-05-30T12:04:49.476Z", + "createdAt": "2024-05-13T07:27:37.392Z", + "lastModified": "2024-05-13T07:27:37.392Z", "size": 7215, "formattedSize": "7.0 KB" } @@ -4041,9 +4041,9 @@ }, { "id": "components__toggle-buttons__codex", - "contents": "\nimport {\n IcToggleButton,\n IcToggleButtonGroup,\n SlottedSVG,\n IcBadge,\n} from \"@ukic/react\";\n\n## Component demo\n\nexport const snippetsDefault = [\n {\n technology: \"Web component\",\n snippets: {\n short: ``,\n long: `.toggle-btn-container {\n padding: 16px;\n }\n\n\n
\n {shortCode}\n
\n `,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: ` console.log(event.detail.checked)}\n/>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n toggleBtnContainer: {\n padding: \"16px\",\n },\n});\nconst classes = useStyles();\nreturn ( \n
\n {shortCode}\n
\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n toggleBtnContainer: {\n padding: \"16px\",\n },\n});\nconst classes = useStyles();\nreturn ( \n
\n {shortCode}\n
\n)`,\n },\n ],\n },\n },\n];\n\n\n console.log(event.detail.checked)}\n />\n\n\n## Toggle button details\n\n\n\n## Toggle button group details\n\n\n\n## Variants\n\n### Other states\n\nexport const snippetsOtherStates = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n\n\n`,\n long: `.toggle-btn-container {\n display: flex;\n flex-wrap: wrap;\n padding: 16px;\n gap: 8px;\n }\n\n\n
\n {shortCode}\n
`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\n\n\n`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n toggleBtnContainer: {\n display: \"flex\",\n flexWrap: \"wrap\",\n padding: \"16px\",\n gap: \"8px\",\n },\n});\nconst classes = useStyles();\nreturn ( \n
\n {shortCode}\n
\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n toggleBtnContainer: {\n display: \"flex\",\n flexWrap: \"wrap\",\n padding: \"16px\",\n gap: \"8px\",\n },\n});\nconst classes = useStyles();\nreturn ( \n
\n {shortCode}\n
\n)`,\n },\n ],\n },\n },\n];\n\n\n \n \n \n \n\n\n### With icon\n\nexport const snippetsWithIcon = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n \n \n \n`,\n long: `.toggle-btn-container {\n padding: 16px;\n }\n\n\n
\n {shortCode}\n
`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\n \n \n \n`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n toggleBtnContainer: {\n padding: \"16px\",\n },\n});\nconst classes = useStyles();\nreturn ( \n
\n {shortCode}\n
\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n toggleBtnContainer: {\n padding: \"16px\",\n },\n});\nconst classes = useStyles();\nreturn ( \n
\n {shortCode}\n
\n)`,\n },\n ],\n },\n },\n];\n\n\n \n \n \n \n \n\n\n### Sizing\n\nexport const snippetsSizing = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n\n`,\n long: `.toggle-btn-container {\n display: flex;\n flex-wrap: wrap;\n padding: 16px;\n gap: 8px;\n }\n\n\n
\n {shortCode}\n
`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\n\n`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n toggleBtnContainer: {\n display: \"flex\",\n flexWrap: \"wrap\",\n padding: \"16px\",\n gap: \"8px\",\n },\n});\nconst classes = useStyles();\nreturn ( \n
\n {shortCode}\n
\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n toggleBtnContainer: {\n display: \"flex\",\n flexWrap: \"wrap\",\n padding: \"16px\",\n gap: \"8px\",\n },\n});\nconst classes = useStyles();\nreturn ( \n
\n {shortCode}\n
\n)`,\n },\n ],\n },\n },\n];\n\n\n \n \n \n\n\n### With badge\n\nexport const snippetsWithBadge = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n \n`,\n long: `.toggle-btn-container {\n padding: 16px;\n }\n\n\n
\n {shortCode}\n
`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\n \n`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n toggleBtnContainer: {\n padding: \"16px\",\n },\n});\nconst classes = useStyles();\nreturn ( \n
\n {shortCode}\n
\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n toggleBtnContainer: {\n padding: \"16px\",\n },\n});\nconst classes = useStyles();\nreturn ( \n
\n {shortCode}\n
\n)`,\n },\n ],\n },\n },\n];\n\n\n \n \n \n\n\n### Dark\n\nexport const snippetsDark = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n\n`,\n long: `.toggle-btn-container {\n display: flex;\n flex-wrap: wrap;\n padding: 16px;\n gap: 8px;\n }\n\n\n
\n {shortCode}\n
`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\n\n`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n toggleBtnContainer: {\n display: \"flex\",\n flexWrap: \"wrap\",\n padding: \"16px\",\n gap: \"8px\",\n },\n});\nconst classes = useStyles();\nreturn ( \n
\n {shortCode}\n
\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n toggleBtnContainer: {\n display: \"flex\",\n flexWrap: \"wrap\",\n padding: \"16px\",\n gap: \"8px\",\n },\n});\nconst classes = useStyles();\nreturn ( \n
\n {shortCode}\n
\n)`,\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`,\n long: `.dark-background {\n display: flex;\n flex-wrap: wrap;\n background-color: #2c2f34;\n padding: 16px;\n gap: 8px;\n }\n\n\n
\n {shortCode}\n
`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\n\n`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n darkBackground: {\n display: \"flex\",\n flexWrap: \"wrap\",\n backgroundColor: \"#2c2f34\",\n padding: \"16px\",\n gap: \"8px\",\n },\n});\nconst classes = useStyles();\nreturn ( \n
\n {shortCode}\n
\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n darkBackground: {\n display: \"flex\",\n flexWrap: \"wrap\",\n backgroundColor: \"#2c2f34\",\n padding: \"16px\",\n gap; \"8px\",\n },\n});\nconst classes = useStyles();\nreturn ( \n
\n {shortCode}\n
\n)`,\n },\n ],\n },\n },\n];\n\n\n \n \n \n\n\n### Full width\n\nexport const snippetsFullWidth = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n \n \n \n \n`,\n long: `.toggle-btn-container {\n padding: 16px;\n }\n\n\n
\n {shortCode}\n
`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\n \n \n \n \n`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n toggleBtnContainer: {\n padding: \"16px\",\n },\n});\nconst classes = useStyles();\nreturn ( \n
\n {shortCode}\n
\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n toggleBtnContainer: {\n padding: \"16px\",\n },\n});\nconst classes = useStyles();\nreturn ( \n
\n {shortCode}\n
\n)`,\n },\n ],\n },\n },\n];\n\n\n \n \n \n \n \n \n\n\n### Icon only\n\nexport const snippetsIconOnly = [\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: `.toggle-btn-container {\n padding: 16px;\n }\n\n\n
\n {shortCode}\n
`,\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: `const useStyles = createUseStyles({\n toggleBtnContainer: {\n padding: \"16px\",\n },\n});\nconst classes = useStyles();\nreturn ( \n
\n {shortCode}\n
\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n toggleBtnContainer: {\n padding: \"16px\",\n },\n});\nconst classes = useStyles();\nreturn ( \n
\n {shortCode}\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 \n \n\n\n### Icon right\n\nexport const snippetsIconRight = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n \n \n \n \n \n \n \n \n \n \n`,\n long: `.toggle-btn-container {\n padding: 16px;\n }\n\n\n
\n {shortCode}\n
`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\n \n \n \n \n \n \n \n \n \n \n`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n toggleBtnContainer: {\n padding: \"16px\",\n },\n});\nconst classes = useStyles();\nreturn ( \n
\n {shortCode}\n
\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n toggleBtnContainer: {\n padding: \"16px\",\n },\n});\nconst classes = useStyles();\nreturn ( \n
\n {shortCode}\n
\n)`,\n },\n ],\n },\n },\n];\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n\n\n### Icon top\n\nexport const snippetsIconTopGroup = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n \n \n \n \n \n \n \n \n \n \n`,\n long: `.toggle-btn-container {\n padding: 16px;\n }\n\n\n
\n {shortCode}\n
`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\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 toggleBtnContainer: {\n padding: \"16px\",\n },\n});\nconst classes = useStyles();\nreturn ( \n
\n {shortCode}\n
\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n toggleBtnContainer: {\n padding: \"16px\",\n },\n});\nconst classes = useStyles();\nreturn ( \n
\n {shortCode}\n
\n)`,\n },\n ],\n },\n },\n];\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n\n", + "contents": "\nimport {\n IcToggleButton,\n IcToggleButtonGroup,\n SlottedSVG,\n IcBadge,\n} from \"@ukic/react\";\n\n## Component demo\n\nexport const snippetsDefault = [\n {\n technology: \"Web component\",\n snippets: {\n short: ``,\n long: `.toggle-btn-container {\n padding: 16px;\n }\n \n \n
\n {shortCode}\n
\n `,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: ` console.log(event.detail.checked)}\n/>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n toggleBtnContainer: {\n padding: \"16px\",\n },\n});\nconst classes = useStyles();\nreturn ( \n
\n {shortCode}\n
\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n toggleBtnContainer: {\n padding: \"16px\",\n },\n});\nconst classes = useStyles();\nreturn ( \n
\n {shortCode}\n
\n)`,\n },\n ],\n },\n },\n];\n\n\n console.log(event.detail.checked)}\n />\n\n\n## Toggle button details\n\n\n\n## Toggle button group details\n\n\n\n## Variants\n\n### Other states\n\nexport const snippetsOtherStates = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n\n\n`,\n long: `.toggle-btn-container {\n display: flex;\n flex-wrap: wrap;\n padding: 16px;\n gap: 8px;\n }\n \n \n
\n {shortCode}\n
`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\n\n\n`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n toggleBtnContainer: {\n display: \"flex\",\n flexWrap: \"wrap\",\n padding: \"16px\",\n gap: \"8px\",\n },\n});\nconst classes = useStyles();\nreturn ( \n
\n {shortCode}\n
\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n toggleBtnContainer: {\n display: \"flex\",\n flexWrap: \"wrap\",\n padding: \"16px\",\n gap: \"8px\",\n },\n});\nconst classes = useStyles();\nreturn ( \n
\n {shortCode}\n
\n)`,\n },\n ],\n },\n },\n];\n\n\n \n \n \n \n\n\n### With icon\n\nexport const snippetsWithIcon = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n \n \n \n`,\n long: `.toggle-btn-container {\n padding: 16px;\n }\n \n \n
\n {shortCode}\n
`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\n \n \n \n`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n toggleBtnContainer: {\n padding: \"16px\",\n },\n});\nconst classes = useStyles();\nreturn ( \n
\n {shortCode}\n
\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n toggleBtnContainer: {\n padding: \"16px\",\n },\n});\nconst classes = useStyles();\nreturn ( \n
\n {shortCode}\n
\n)`,\n },\n ],\n },\n },\n];\n\n\n \n \n \n \n \n\n\n### Sizing\n\nexport const snippetsSizing = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n\n`,\n long: `.toggle-btn-container {\n display: flex;\n flex-wrap: wrap;\n padding: 16px;\n gap: 8px;\n }\n \n \n
\n {shortCode}\n
`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\n\n`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n toggleBtnContainer: {\n display: \"flex\",\n flexWrap: \"wrap\",\n padding: \"16px\",\n gap: \"8px\",\n },\n});\nconst classes = useStyles();\nreturn ( \n
\n {shortCode}\n
\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n toggleBtnContainer: {\n display: \"flex\",\n flexWrap: \"wrap\",\n padding: \"16px\",\n gap: \"8px\",\n },\n});\nconst classes = useStyles();\nreturn ( \n
\n {shortCode}\n
\n)`,\n },\n ],\n },\n },\n];\n\n\n \n \n \n\n\n### With badge\n\nexport const snippetsWithBadge = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n \n`,\n long: `.toggle-btn-container {\n padding: 16px;\n }\n \n \n
\n {shortCode}\n
`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\n \n`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n toggleBtnContainer: {\n padding: \"16px\",\n },\n});\nconst classes = useStyles();\nreturn ( \n
\n {shortCode}\n
\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n toggleBtnContainer: {\n padding: \"16px\",\n },\n});\nconst classes = useStyles();\nreturn ( \n
\n {shortCode}\n
\n)`,\n },\n ],\n },\n },\n];\n\n\n \n \n \n\n\n### Dark\n\nexport const snippetsDark = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n\n`,\n long: `.toggle-btn-container {\n display: flex;\n flex-wrap: wrap;\n padding: 16px;\n gap: 8px;\n }\n \n \n
\n {shortCode}\n
`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\n\n`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n toggleBtnContainer: {\n display: \"flex\",\n flexWrap: \"wrap\",\n padding: \"16px\",\n gap: \"8px\",\n },\n});\nconst classes = useStyles();\nreturn ( \n
\n {shortCode}\n
\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n toggleBtnContainer: {\n display: \"flex\",\n flexWrap: \"wrap\",\n padding: \"16px\",\n gap: \"8px\",\n },\n});\nconst classes = useStyles();\nreturn ( \n
\n {shortCode}\n
\n)`,\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`,\n long: `.dark-background {\n display: flex;\n flex-wrap: wrap;\n background-color: #2c2f34;\n padding: 16px;\n gap: 8px;\n }\n \n \n
\n {shortCode}\n
`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\n\n`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n darkBackground: {\n display: \"flex\",\n flexWrap: \"wrap\",\n backgroundColor: \"#2c2f34\",\n padding: \"16px\",\n gap: \"8px\",\n },\n});\nconst classes = useStyles();\nreturn ( \n
\n {shortCode}\n
\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n darkBackground: {\n display: \"flex\",\n flexWrap: \"wrap\",\n backgroundColor: \"#2c2f34\",\n padding: \"16px\",\n gap; \"8px\",\n },\n});\nconst classes = useStyles();\nreturn ( \n
\n {shortCode}\n
\n)`,\n },\n ],\n },\n },\n];\n\n\n \n \n \n\n\n### Full width\n\nexport const snippetsFullWidth = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n \n \n \n \n`,\n long: `.toggle-btn-container {\n padding: 16px;\n }\n \n \n
\n {shortCode}\n
`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\n \n \n \n \n`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n toggleBtnContainer: {\n padding: \"16px\",\n },\n});\nconst classes = useStyles();\nreturn ( \n
\n {shortCode}\n
\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n toggleBtnContainer: {\n padding: \"16px\",\n },\n});\nconst classes = useStyles();\nreturn ( \n
\n {shortCode}\n
\n)`,\n },\n ],\n },\n },\n];\n\n\n \n \n \n \n \n \n\n\n### Icon only\n\nexport const snippetsIconOnly = [\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: `.toggle-btn-container {\n padding: 16px;\n }\n \n \n
\n {shortCode}\n
`,\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: `const useStyles = createUseStyles({\n toggleBtnContainer: {\n padding: \"16px\",\n },\n});\nconst classes = useStyles();\nreturn ( \n
\n {shortCode}\n
\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n toggleBtnContainer: {\n padding: \"16px\",\n },\n});\nconst classes = useStyles();\nreturn ( \n
\n {shortCode}\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 \n \n\n\n### Icon right\n\nexport const snippetsIconRight = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n \n \n \n \n \n \n \n \n \n \n`,\n long: `.toggle-btn-container {\n padding: 16px;\n }\n \n \n
\n {shortCode}\n
`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\n \n \n \n \n \n \n \n \n \n \n`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n toggleBtnContainer: {\n padding: \"16px\",\n },\n});\nconst classes = useStyles();\nreturn ( \n
\n {shortCode}\n
\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n toggleBtnContainer: {\n padding: \"16px\",\n },\n});\nconst classes = useStyles();\nreturn ( \n
\n {shortCode}\n
\n)`,\n },\n ],\n },\n },\n];\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n\n\n### Icon top\n\nexport const snippetsIconTopGroup = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n \n \n \n \n \n \n \n \n \n \n`,\n long: `.toggle-btn-container {\n padding: 16px;\n }\n \n \n
\n {shortCode}\n
`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\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 toggleBtnContainer: {\n padding: \"16px\",\n },\n});\nconst classes = useStyles();\nreturn ( \n
\n {shortCode}\n
\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n toggleBtnContainer: {\n padding: \"16px\",\n },\n});\nconst classes = useStyles();\nreturn ( \n
\n {shortCode}\n
\n)`,\n },\n ],\n },\n },\n];\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n\n", "path": "/components/toggle-button/code", - "date": "2024-05-31", + "date": "2024-05-02", "title": "Toggle button", "status": "BETA", "subTitle": "Toggle buttons provide an action capable of indicating a state. They are commonly used for turning settings either ‘on’ or ‘off’.", @@ -4064,10 +4064,10 @@ ], "meta": { "relativePath": "components/toggle-buttons/code.mdx", - "createdAt": "2024-05-31T10:44:10.965Z", - "lastModified": "2024-05-31T10:44:10.965Z", - "size": 29696, - "formattedSize": "29.0 KB" + "createdAt": "2024-05-21T09:12:11.383Z", + "lastModified": "2024-05-21T09:12:11.383Z", + "size": 29888, + "formattedSize": "29.2 KB" } }, { @@ -4096,8 +4096,8 @@ ], "meta": { "relativePath": "components/toggle-buttons/guidance.mdx", - "createdAt": "2024-05-30T12:04:49.476Z", - "lastModified": "2024-05-30T12:04:49.476Z", + "createdAt": "2024-05-13T07:27:37.392Z", + "lastModified": "2024-05-13T07:27:37.392Z", "size": 11033, "formattedSize": "10.8 KB" } @@ -4137,7 +4137,7 @@ "id": "components__tooltips__codex", "contents": "\nimport { IcTooltip, IcButton, IcChip } from \"@ukic/react\";\nimport { useRef, useState } from \"react\";\n\n## Component demo\n\nexport const snippets = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n \n Add\n \n\n\n \n Remove\n \n`,\n long: `.tooltip-container {\n display: flex; \n flex-direction: column;\n gap: 8px; \n padding: 16px;\n }\n \n \n
\n {shortCode}\n
`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\n \n Add\n \n\n\n \n Remove\n \n`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n tooltipContainer: {\n display: \"flex\", \n flexDirection: \"column\",\n gap: \"8px\", \n padding: \"16px\",\n },\n});\nconst classes = useStyles();\nreturn (\n
\n {shortCode}\n
\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n tooltipContainer: {\n display: \"flex\", \n flexDirection: \"column\",\n gap: \"8px\", \n padding: \"16px\",\n },\n});\nconst classes = useStyles();\nreturn (\n
\n {shortCode}\n
\n)`,\n },\n ],\n },\n },\n];\n\n\n
\n \n \n Add\n \n \n \n \n Remove\n \n \n
\n\n\n## Tooltip details\n\n\n\n## Variants\n\n### Left placement\n\nexport const snippetsLeft = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n \n Add\n \n`,\n long: `.tooltip-container {\n display: flex; \n justify-content: flex-end;\n }\n \n \n
\n {shortCode}\n
`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\n \n Add\n \n`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n tooltipContainer: {\n display: \"flex\",\n justifyContent: \"flex-end\"\n },\n});\nconst classes = useStyles();\nreturn (\n
\n {shortCode}\n
\n)}`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n tooltipContainer: {\n display: \"flex\",\n justifyContent: \"flex-end\"\n },\n});\nconst classes = useStyles();\nreturn (\n
\n {shortCode}\n
\n)`,\n },\n ],\n },\n },\n];\n\n\n \n \n Add\n \n \n\n\n### Right placement\n\nexport const snippetsRight = [\n {\n technology: \"Web component\",\n snippets: {\n short: ` \n Add\n`,\n long: `.tooltip-container {\n display: flex; \n justify-content: flex-start;\n }\n \n \n
\n {shortCode}\n
`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\n \n Add\n \n`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n tooltipContainer: {\n display: \"flex\",\n justifyContent: \"flex-start\"\n },\n});\nconst classes = useStyles();\nreturn (\n
\n {shortCode}\n
\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n tooltipContainer: {\n display: \"flex\",\n justifyContent: \"flex-start\"\n },\n});\nconst classes = useStyles();\nreturn (\n
\n {shortCode}\n
\n)`,\n },\n ],\n },\n },\n];\n\n\n \n \n Add\n \n \n\n\n### Chip\n\nexport const snippetsChip = [\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`,\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### Programmatic trigger\n\nexport const snippetsProgrammatic = [\n {\n technology: \"Web component\",\n snippets: {\n short: `Show tooltip\n\n \n Add\n \n`,\n long: `{shortCode}\n `,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `Show tooltip\n\n \n Add\n \n`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const [display, setDisplay] = useState(true);\nconst tooltipEl = useRef(null);\nconst handleDisplay = () => {\n tooltipEl.current?.displayTooltip(display, display);\n setDisplay(!display);\n};\nconst useStyles = createUseStyles({\n btnContainer: {\n display: 'flex',\n gap: '8px',\n padding: '16px',\n },\n});\nconst classes = useStyles();\nreturn (\n
\n {shortCode}\n
\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const [display, setDisplay] = useState(true);\nconst tooltipEl = useRef(null);\nconst handleDisplay = () => {\n tooltipEl.current?.displayTooltip(display, display);\n setDisplay(!display);\n};\nconst useStyles = createUseStyles({\n btnContainer: {\n display: 'flex',\n gap: '8px',\n padding: '16px',\n },\n});\nconst classes = useStyles();\nreturn (\n
\n {shortCode}\n
\n)`,\n },\n ],\n },\n },\n];\n\nexport const TriggerExample = () => {\n const [display, setDisplay] = useState(true);\n const tooltipEl = useRef(null);\n const handleDisplay = async () => {\n await tooltipEl.current?.displayTooltip(display, display);\n setDisplay(!display);\n };\n return (\n <>\n Show tooltip\n \n \n Add\n \n \n \n );\n};\n\n\n \n\n", "path": "/components/tooltip/code", - "date": "2024-05-31", + "date": "2024-05-02", "title": "Tooltip", "status": "BETA", "subTitle": "Tooltips provide helpful information when the cursor hovers over an element or when focus is applied.", @@ -4158,8 +4158,8 @@ ], "meta": { "relativePath": "components/tooltips/code.mdx", - "createdAt": "2024-05-31T10:44:10.845Z", - "lastModified": "2024-05-31T10:44:10.845Z", + "createdAt": "2024-05-21T09:12:11.383Z", + "lastModified": "2024-05-21T09:12:11.383Z", "size": 11999, "formattedSize": "11.7 KB" } @@ -4190,8 +4190,8 @@ ], "meta": { "relativePath": "components/tooltips/guidance.mdx", - "createdAt": "2024-05-30T12:04:49.480Z", - "lastModified": "2024-05-30T12:04:49.480Z", + "createdAt": "2024-05-13T07:27:37.396Z", + "lastModified": "2024-05-13T07:27:37.396Z", "size": 5536, "formattedSize": "5.4 KB" } @@ -4229,9 +4229,9 @@ }, { "id": "components__top-nav__codex", - "contents": "\nimport {\n IcTopNavigation,\n IcSearchBar,\n IcNavigationButton,\n IcNavigationItem,\n IcNavigationGroup,\n SlottedSVG,\n IcBadge,\n IcButton,\n} from \"@ukic/react\";\n\nimport { MemoryRouter, NavLink } from \"react-router-dom\";\nimport { useState } from \"react\";\n\n## Component demo\n\nexport const snippetsDefault = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\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: \"Javascript\",\n snippet: `{shortCode}`,\n },\n {\n language: \"Typescript\",\n snippet: `{shortCode}`,\n },\n ],\n },\n },\n];\n\n\n \n \n \n \n \n \n \n \n \n \n \n e.preventDefault()}\n />\n e.preventDefault()}\n />\n e.preventDefault()}\n />\n e.preventDefault()}\n selected\n />\n e.preventDefault()}\n />\n \n\n\n## Top navigation details\n\n\n\n## Navigation group details\n\n\n\n## Navigation item details\n\n\n\n## Navigation button 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 \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 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 e.preventDefault()}\n />\n e.preventDefault()}\n />\n e.preventDefault()}\n />\n \n \n e.preventDefault()}\n />\n e.preventDefault()}\n />\n \n \n\n\n### Centre aligned\n\nexport const snippetsCentreAligned = [\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 alert('test')}\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 \n \n \n \n \n \n e.preventDefault()}\n />\n e.preventDefault()}\n />\n e.preventDefault()}\n />\n e.preventDefault()}\n selected\n />\n e.preventDefault()}\n />\n \n\n\n### Left aligned\n\nexport const snippetsLeftAligned = [\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`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\n \n \n \n \n \n alert('test')}\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 \n \n \n \n \n \n \n e.preventDefault()}\n />\n e.preventDefault()}\n />\n e.preventDefault()}\n />\n e.preventDefault()}\n selected\n />\n e.preventDefault()}\n />\n \n\n\n### With badge on navigation button\n\nexport const snippetsBadge = [\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`,\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`,\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 e.preventDefault()}\n />\n e.preventDefault()}\n />\n e.preventDefault()}\n />\n e.preventDefault()}\n selected\n />\n e.preventDefault()}\n />\n \n\n\n### With short app title\n\nView on a small screen size to display the short title in place of the app title.\n\nexport const snippetsShortTitle = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\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 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 e.preventDefault()}\n />\n e.preventDefault()}\n />\n e.preventDefault()}\n />\n e.preventDefault()}\n selected\n />\n e.preventDefault()}\n />\n \n\n\n### Conditional tabs\n\nexport const ConditionalTabsExample = () => {\n const [showTabs, setShowTabs] = useState(false);\n return (\n <>\n \n \n \n \n \n \n \n \n {showTabs && (\n <>\n \n \n \n )}\n \n setShowTabs(!showTabs)}>Show/Hide tabs\n \n );\n};\n\nexport const conditionalTabs = [\n {\n technology: \"React\",\n snippets: {\n short: `\n \n \n \n \n \n \n \n {showNavItems && (\n <>\n \n \n \n )}\n`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const [showNavItems, setShowNavItems] = useState(false);\nreturn (\n <>\n {shortCode}\n setShowNavItems(!showNavItems)}>Show/Hide nav items\n \n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const [showNavItems, setShowNavItems] = useState(false);\nreturn (\n <>\n {shortCode}\n setShowNavItems(!showNavItems)}>Show/Hide nav items\n \n)`,\n },\n ],\n },\n },\n];\n\n\n \n\n\n### With React Router (using slots)\n\nThe following examples also demonstrate using a slotted link for app title, short app title, and app icon.\n\nTo guarantee the correct styling for non-svg content slotted into app-icon, set `width`, `height` and `fill` to `inherit`.\n\nexport const withReactRouter = [\n {\n technology: \"React\",\n snippets: {\n short: `\n \n \n ICDS Title\n \n \n ICDS\n \n \n \n \n \n \n \n \n alert(\"test\")}\n >\n \n \n \n \n \n \n \n Get started\n \n \n \n \n Accessibility\n \n \n \n
\n \n \n This is the get started page\n }\n />\n This page is about accessibility\n }\n />\n \n \n
\n`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n sectionContainer: {\n padding: \"16px\",\n },\n});\nconst classes = useStyles();\nreturn (\n {shortCode}\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n sectionContainer: {\n padding: \"16px\",\n },\n});\nconst classes = useStyles();\nreturn (\n {shortCode}\n)}`,\n },\n ],\n },\n },\n];\n\n\n \n \n \n ICDS Title\n \n \n ICDS\n \n \n \n \n \n \n \n \n alert(\"test\")}\n >\n \n \n \n \n \n \n \n Get started\n \n \n \n \n Accessibility\n \n \n \n \n\n", + "contents": "\nimport {\n IcTopNavigation,\n IcSearchBar,\n IcNavigationButton,\n IcNavigationItem,\n IcNavigationGroup,\n SlottedSVG,\n IcBadge,\n IcButton,\n} from \"@ukic/react\";\n\nimport { MemoryRouter, NavLink } from \"react-router-dom\";\nimport { useState } from \"react\";\n\n## Component demo\n\nexport const snippetsDefault = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\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: \"Javascript\",\n snippet: `{shortCode}`,\n },\n {\n language: \"Typescript\",\n snippet: `{shortCode}`,\n },\n ],\n },\n },\n];\n\n\n \n \n \n \n \n \n \n \n \n \n \n e.preventDefault()}\n />\n e.preventDefault()}\n />\n e.preventDefault()}\n />\n e.preventDefault()}\n selected\n />\n e.preventDefault()}\n />\n \n\n\n## Top navigation details\n\n\n\n## Navigation group details\n\n\n\n## Navigation item details\n\n\n\n## Navigation button 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 \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 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 e.preventDefault()}\n />\n e.preventDefault()}\n />\n e.preventDefault()}\n />\n \n \n e.preventDefault()}\n />\n e.preventDefault()}\n />\n \n \n\n\n### Centre aligned\n\nexport const snippetsCentreAligned = [\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 alert('test')}\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 \n \n \n \n \n \n e.preventDefault()}\n />\n e.preventDefault()}\n />\n e.preventDefault()}\n />\n e.preventDefault()}\n selected\n />\n e.preventDefault()}\n />\n \n\n\n### Left aligned\n\nexport const snippetsLeftAligned = [\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`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\n \n \n \n \n \n alert('test')}\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 \n \n \n \n \n \n \n e.preventDefault()}\n />\n e.preventDefault()}\n />\n e.preventDefault()}\n />\n e.preventDefault()}\n selected\n />\n e.preventDefault()}\n />\n \n\n\n### With badge on navigation button\n\nexport const snippetsBadge = [\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`,\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`,\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 e.preventDefault()}\n />\n e.preventDefault()}\n />\n e.preventDefault()}\n />\n e.preventDefault()}\n selected\n />\n e.preventDefault()}\n />\n \n\n\n### With short app title\n\nView on a small screen size to display the short title in place of the app title.\n\nexport const snippetsShortTitle = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\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 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 e.preventDefault()}\n />\n e.preventDefault()}\n />\n e.preventDefault()}\n />\n e.preventDefault()}\n selected\n />\n e.preventDefault()}\n />\n \n\n\n### Conditional tabs\n\nexport const ConditionalTabsExample = () => {\n const [showTabs, setShowTabs] = useState(false);\n return (\n <>\n \n \n \n \n \n \n \n \n {showTabs && (\n <>\n \n \n \n )}\n \n setShowTabs(!showTabs)}>Show/Hide tabs\n \n );\n};\n\nexport const conditionalTabs = [\n {\n technology: \"React\",\n snippets: {\n short: `\n \n \n \n \n \n \n \n {showTabs && (\n <>\n \n \n \n )}\n`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const [showTabs, setShowTabs] = useState(false);\nreturn (\n <>\n {shortCode}\n setShowTabs(!showTabs)}>Show/Hide tabs\n \n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const [showTabs, setShowTabs] = useState(false);\nreturn (\n <>\n {shortCode}\n setShowTabs(!showTabs)}>Show/Hide tabs\n \n)`,\n },\n ],\n },\n },\n];\n\n\n \n\n\n### With React Router (using slots)\n\nThe following examples also demonstrate using a slotted link for app title, short app title, and app icon.\n\nTo guarantee the correct styling for non-svg content slotted into app-icon, set `width`, `height` and `fill` to `inherit`.\n\nexport const withReactRouter = [\n {\n technology: \"React\",\n snippets: {\n short: `\n \n \n ICDS Title\n \n \n ICDS\n \n \n \n \n \n \n \n \n alert(\"test\")}\n >\n \n \n \n \n \n \n \n Get started\n \n \n \n \n Accessibility\n \n \n \n
\n \n \n This is the get started page\n }\n />\n This page is about accessibility\n }\n />\n \n \n
\n`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n sectionContainer: {\n padding: \"16px\",\n },\n});\nconst classes = useStyles();\nreturn (\n {shortCode}\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n sectionContainer: {\n padding: \"16px\",\n },\n});\nconst classes = useStyles();\nreturn (\n {shortCode}\n)}`,\n },\n ],\n },\n },\n];\n\n\n \n \n \n ICDS Title\n \n \n ICDS\n \n \n \n \n \n \n \n \n alert(\"test\")}\n >\n \n \n \n \n \n \n \n Get started\n \n \n \n \n Accessibility\n \n \n \n \n\n", "path": "/components/top-navigation/code", - "date": "2024-05-31", + "date": "2024-05-02", "title": "Top navigation", "status": "BETA", "subTitle": "Top navigation sits across the top of the page. It includes the app name, search bar, main navigation and secondary links.", @@ -4252,9 +4252,9 @@ ], "meta": { "relativePath": "components/top-nav/code.mdx", - "createdAt": "2024-05-31T10:44:10.821Z", - "lastModified": "2024-05-31T10:44:10.821Z", - "size": 40987, + "createdAt": "2024-05-21T09:47:02.295Z", + "lastModified": "2024-05-21T09:47:02.295Z", + "size": 40953, "formattedSize": "40.0 KB" } }, @@ -4284,8 +4284,8 @@ ], "meta": { "relativePath": "components/top-nav/guidance.mdx", - "createdAt": "2024-05-30T12:07:55.543Z", - "lastModified": "2024-05-30T12:07:55.543Z", + "createdAt": "2024-05-21T09:12:11.383Z", + "lastModified": "2024-05-21T09:12:11.383Z", "size": 11240, "formattedSize": "11.0 KB" } @@ -4324,9 +4324,9 @@ }, { "id": "components__typography__codex", - "contents": "\nimport { IcTypography } from \"@ukic/react\";\n\n## Component demo\n\nexport const snippets = [\n {\n technology: \"Web component\",\n snippets: {\n short: `

H1

\n

H2

\n

H3

\n

H4

\nBody\nSubtitle large\nSubtitle small\nLabel\nLabel uppercase\nCaption\nCaption uppercase\nCode large\nCode small\nCode extra small`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `H1\n

H2

\n

H3

\n

H4

\nBody\nSubtitle large\nSubtitle small\nLabel\nLabel uppercase\nCaption\nCaption uppercase\nCode large\nCode small\nCode extra small`,\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

H1

\n \n \n

H2

\n \n \n

H3

\n \n \n

H4

\n \n Body\n Subtitle large\n Subtitle small\n Label\n Label uppercase\n Caption\n Caption uppercase\n Code large\n Code small\n Code extra small\n
\n\n\n## Typography details\n\n\n\n## Variants\n\n### Re-styled typography\n\nAdd a variant to the typography element to change its style. This does not change the semantic level of the typography element.\n\nexport const snippetsRestyled = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n
H5 with H2 styling
\n`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\n
H5 with H2 styling
\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
H5 with H2 styling
\n \n\n\n### Vertical margins applied\n\nexport const spacingSnippets = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n
H5 with margins applied
\n`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\n
H5 with margins applied
\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
H5 with margins applied
\n \n\n\n### Vertical margins applied on re-styled typography\n\nexport const spacingRestyledSnippets = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n
H5 with H2 styling and margins applied
\n`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\n
H5 with H2 styling and margins applied
\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
H5 with H2 styling and margins applied
\n \n\n\n### Truncation\n\nText can be truncated to a maximum number of lines when using `variant=\"body\"`.\n\nexport const truncationSnippets = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n Body of text that is truncated to three lines. Click the 'See more' link\n to expand the text, then click 'See less' to truncate the text once\n more!\n
\n Dripper caramelization java saucer grounds galão, mocha, and robusta\n kopi-luwak, percolator, instant, qui saucer latte in brewed café au\n lait. Con panna, cup, cream, body americano affogato cup espresso, rich\n milk seasonal saucer grinder spoon that cultivar strong redeye\n frappuccino barista extraction redeye mazagran. Grounds, french press\n dripper organic and foam id saucer, crema, black rich dark, grounds\n breve coffee steamed caramelization percolator.\n`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\n Body of text that is truncated to three lines. Click the 'See more' link\n to expand the text, then click 'See less' to truncate the text once\n more!\n
\n Dripper caramelization java saucer grounds galão, mocha, and robusta\n kopi-luwak, percolator, instant, qui saucer latte in brewed café au\n lait. Con panna, cup, cream, body americano affogato cup espresso, rich\n milk seasonal saucer grinder spoon that cultivar strong redeye\n frappuccino barista extraction redeye mazagran. Grounds, french press\n dripper organic and foam id saucer, crema, black rich dark, grounds\n breve coffee steamed caramelization percolator.\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 Body of text that is truncated to three lines. Click the 'See more' link to\n expand the text, then click 'See less' to truncate the text once more!\n
\n Dripper caramelization java saucer grounds galão, mocha, and robusta\n kopi-luwak, percolator, instant, qui saucer latte in brewed café au lait.\n Con panna, cup, cream, body americano affogato cup espresso, rich milk\n seasonal saucer grinder spoon that cultivar strong redeye frappuccino\n barista extraction redeye mazagran. Grounds, french press dripper organic\n and foam id saucer, crema, black rich dark, grounds breve coffee steamed\n caramelization percolator.\n \n\n\n### Additional styling\n\nexport const additionalStylingSnippets = [\n {\n technology: \"Web component\",\n snippets: {\n short: `Bold\nItalic\nUnderline\nStrikethrough`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `Bold\nItalic\nUnderline\nStrikethrough`,\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

Bold

\n \n \n

Italic

\n \n \n

Underline

\n \n \n

Strikethrough

\n \n
\n\n", + "contents": "\nimport { IcTypography } from \"@ukic/react\";\n\n## Component demo\n\nexport const snippets = [\n {\n technology: \"Web component\",\n snippets: {\n short: `

H1

\n

H2

\n

H3

\n

H4

\nBody\nSubtitle large\nSubtitle small\nLabel\nLabel uppercase\nCaption\nCaption uppercase\nCode large\nCode small\nCode extra small`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `H1\n

H2

\n

H3

\n

H4

\nBody\nSubtitle large\nSubtitle small\nLabel\nLabel uppercase\nCaption\nCaption uppercase\nCode large\nCode small\nCode extra small`,\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

H1

\n \n \n

H2

\n \n \n

H3

\n \n \n

H4

\n \n Body\n Subtitle large\n Subtitle small\n Label\n Label uppercase\n Caption\n Caption uppercase\n Code large\n Code small\n Code extra small\n
\n\n\n## Typography details\n\n\n\n## Variants\n\n### Re-styled typography\n\nAdd a variant to the typography element to change its style. This does not change the semantic level of the typography element.\n\nexport const snippetsRestyled = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n
H5 with H2 styling
\n`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\n
H5 with H2 styling
\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
H5 with H2 styling
\n \n\n\n### Vertical margins applied\n\nexport const spacingSnippets = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n
H5 with margins applied
\n`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\n
H5 with margins applied
\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
H5 with margins applied
\n \n\n\n### Vertical margins applied on re-styled typography\n\nexport const spacingRestyledSnippets = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n
H5 with H2 styling and margins applied
\n`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\n
H5 with H2 styling and margins applied
\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
H5 with H2 styling and margins applied
\n \n\n\n### Truncation\n\nText can be truncated to a maximum number of lines when using `variant=\"body\"`.\n\nexport const truncationSnippets = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n Body of text that is truncated to three lines. Click the 'See more' link\n to expand the text, then click 'See less' to truncate the text once\n more!\n
\n Dripper caramelization java saucer grounds galão, mocha, and robusta\n kopi-luwak, percolator, instant, qui saucer latte in brewed café au\n lait. Con panna, cup, cream, body americano affogato cup espresso, rich\n milk seasonal saucer grinder spoon that cultivar strong redeye\n frappuccino barista extraction redeye mazagran. Grounds, french press\n dripper organic and foam id saucer, crema, black rich dark, grounds\n breve coffee steamed caramelization percolator.\n`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `\n Body of text that is truncated to three lines. Click the 'See more' link\n to expand the text, then click 'See less' to truncate the text once\n more!\n
\n Dripper caramelization java saucer grounds galão, mocha, and robusta\n kopi-luwak, percolator, instant, qui saucer latte in brewed café au\n lait. Con panna, cup, cream, body americano affogato cup espresso, rich\n milk seasonal saucer grinder spoon that cultivar strong redeye\n frappuccino barista extraction redeye mazagran. Grounds, french press\n dripper organic and foam id saucer, crema, black rich dark, grounds\n breve coffee steamed caramelization percolator.\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 Body of text that is truncated to three lines. Click the 'See more' link to\n expand the text, then click 'See less' to truncate the text once more!\n
\n Dripper caramelization java saucer grounds galão, mocha, and robusta\n kopi-luwak, percolator, instant, qui saucer latte in brewed café au lait.\n Con panna, cup, cream, body americano affogato cup espresso, rich milk\n seasonal saucer grinder spoon that cultivar strong redeye frappuccino\n barista extraction redeye mazagran. Grounds, french press dripper organic\n and foam id saucer, crema, black rich dark, grounds breve coffee steamed\n caramelization percolator.\n \n\n\n### Additional styling\n\nexport const additionalStylingSnippets = [\n {\n technology: \"Web component\",\n snippets: {\n short: `Bold\nItalic\nUnderline\nStrikethrough`,\n long: `{shortCode}`,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: `Bold\nItalic\nUnderline\nStrikethrough`,\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

Bold

\n \n \n

Italic

\n \n \n

Underline

\n \n \n

Strikethrough

\n \n
\n\n", "path": "/components/typography/code", - "date": "2024-05-31", + "date": "2024-05-02", "title": "Typography", "status": "BETA", "subTitle": "Use the typography component for consistent styling across typographical elements.", @@ -4348,9 +4348,9 @@ ], "meta": { "relativePath": "components/typography/code.mdx", - "createdAt": "2024-05-31T10:44:10.841Z", - "lastModified": "2024-05-31T10:44:10.841Z", - "size": 10522, + "createdAt": "2024-05-21T09:12:11.383Z", + "lastModified": "2024-05-21T09:12:11.383Z", + "size": 10594, "formattedSize": "10.3 KB" } }, @@ -4381,8 +4381,8 @@ ], "meta": { "relativePath": "components/typography/guidance.mdx", - "createdAt": "2024-05-30T12:04:49.480Z", - "lastModified": "2024-05-30T12:04:49.480Z", + "createdAt": "2024-05-13T07:27:37.396Z", + "lastModified": "2024-05-13T07:27:37.396Z", "size": 2180, "formattedSize": "2.1 KB" } @@ -4840,7 +4840,7 @@ }, { "id": "patterns__side-navigation-layoutx", - "contents": "\nimport { IcLink } from \"@ukic/react\";\nimport {\n createReactAppTsx,\n createWebComponentsIndexHTML,\n} from \"./components/StackblitzButton/stackblitz-helpers\";\nimport sideNavigationPatternFig1 from \"./images/fig-1-example-of-theming-applied-to-side-navigation-layout.png\";\n\n## Introduction\n\nexport const snippetsSideNav = [\n {\n technology: \"Web component\",\n snippets: {\n long: createWebComponentsIndexHTML(\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 \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 \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n
\n \n
\n \n

Example heading

\n \n \n

Example sub-heading

\n \n \n

\n Remove this div and add your custom content in\n ic-section-container.\n

\n \n
\n \n
\n \n [footerLink]\n [footerLink]\n [footerLink]\n [footerLink]\n [footerLink]\n \n \n \n \n \n \n
\n
`,\n true\n ),\n },\n },\n {\n technology: \"React\",\n snippets: {\n long: [\n {\n language: \"Typescript\",\n snippet: createReactAppTsx(\n `const useStyles = createUseStyles({\n contentDivContainer: {\n display: \"flex\",\n flexDirection: \"column\",\n flexGrow: \"1\",\n },\n mainContentDiv: {\n border: \"var(--ic-border-width) dashed var(--ic-architectural-400)\",\n padding: \"var(--ic-space-md)\",\n height: \"800px\",\n },\n parentDiv: { display: \"flex\", height: \"100%\" },\n main: { minHeight: \"100vh\" },\n });\n const classes = useStyles();\n const alignment: IcAlignment = \"center\";\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 \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n
\n \n
\n \n

Example heading

\n \n \n

Example sub-heading

\n \n \n

\n Remove this div and add your custom content in\n IcSectionContainer.\n

\n \n
\n \n
\n \n \n [footerLink]\n \n \n [footerLink]\n \n \n [footerLink]\n \n \n [footerLink]\n \n \n [footerLink]\n \n \n \n \n \n \n \n
\n
\n )`,\n \"SideNavigationPattern\",\n \"tsx\",\n true\n ),\n },\n {\n language: \"Javascript\",\n snippet: createReactAppTsx(\n `const useStyles = createUseStyles({\n contentDivContainer: {\n display: \"flex\",\n flexDirection: \"column\",\n flexGrow: \"1\",\n },\n mainContentDiv: {\n border: \"var(--ic-border-width) dashed var(--ic-architectural-400)\",\n padding: \"var(--ic-space-md)\",\n height: \"800px\",\n },\n parentDiv: { display: \"flex\", height: \"100%\" },\n main: { minHeight: \"100vh\" },\n });\n const classes = useStyles();\n const alignment = \"center\";\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 \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n
\n \n
\n \n

Example heading

\n \n \n

Example sub-heading

\n \n \n

\n Remove this div and add your custom content in\n IcSectionContainer.\n

\n \n
\n \n
\n \n \n [footerLink]\n \n \n [footerLink]\n \n \n [footerLink]\n \n \n [footerLink]\n \n \n [footerLink]\n \n \n \n \n \n \n \n
\n
\n )`,\n \"SideNavigationPattern\",\n \"jsx\",\n true\n ),\n },\n ],\n },\n },\n];\n\n\n \n View example in new window\n \n\n\nThis pattern includes the components:\n\n- [Side navigation](/components/side-navigation)\n- [Section container](/components/section-container)\n- [Footer](/components/footer)\n- [Classification banner](/components/classification-banner)\n\nWith options for:\n\n- [Page header](/components/page-header)\n- [Back to top](/components/back-to-top)\n\n## When to use\n\nWhen choosing a layout pattern, make sure it works for all pages within your app and avoid switching layout patterns on different pages.\n\nUse the side navigation layout to help provide more screen space for main content. Side navigation is well suited to apps that have mutually exclusive features which need to be switched between easily from any page. For example, email providers often use side navigation to provide maximum screen space to email content whilst allowing constant access to other pages.\n\n## When not to use\n\nFor intranet-style and content heavy apps, use the top navigation layout as it's better suited for providing links to a large number of pages.\n\nUse either the top navigation layout or the side navigation layout. Don't use both at the same time.\n\n## Implementation\n\nMake sure the pattern always fits the entire viewport and is never within another page container. The pattern content will adapt responsively when the viewport changes.\n\nAlways place the footer at the bottom of the page and below the fold meaning users should scroll to see it.\n\n## Variants\n\nUse the side navigation layout with additional components including page header to create other common layouts.\n\n### Page header\n\nUse a page header to display an introduction to the content of the page. Add additional elements to provide actions, navigation or inputs at the page level.\n\nFor more information, see the [page header component](/components/page-header).\n\nexport const snippetsSideNavWithPageHeader = [\n {\n technology: \"Web component\",\n snippets: {\n long: createWebComponentsIndexHTML(\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 \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 \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 \n \n \n \n \n Primary button\n \n Tertiary button\n
\n \n Submit\n
\n \n
\n \n
\n \n

Example heading

\n \n \n

Example sub-heading

\n \n \n

\n Remove this div and add your custom content in ic-section-container.\n

\n \n
\n \n
\n \n [footerLink]\n [footerLink]\n [footerLink]\n [footerLink]\n [footerLink]\n \n \n \n \n \n \n
\n
`,\n true\n ),\n },\n },\n {\n technology: \"React\",\n snippets: {\n long: [\n {\n language: \"Typescript\",\n snippet: createReactAppTsx(\n `const useStyles = createUseStyles({\n contentDivContainer: {\n display: \"flex\",\n flexDirection: \"column\",\n flexGrow: \"1\",\n },\n mainContentDiv: {\n border: \"var(--ic-border-width) dashed var(--ic-architectural-400)\",\n padding: \"var(--ic-space-md)\",\n height: \"800px\",\n },\n parentDiv: { display: \"flex\", height: \"100%\" },\n main: { minHeight: \"100vh\" },\n inputArea: {\n display: \"flex\",\n flexWrap: \"wrap\",\n gap: \"var(--ic-space-md)\",\n \"@media screen and (max-width: 320px)\": {\n gap: \"var(--ic-space-xs)\",\n },\n },\n textField: {\n \"--input-width\": \"21.5rem\",\n \"@media screen and (max-width: 768px)\": {\n \"--input-width\": \"100%\",\n flex: \"1 1 0\",\n },\n },\n });\n const classes = useStyles();\n const alignment: IcAlignment = \"center\";\n const pageHeaderAlignment: IcAlignment = \"center\";\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 \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 \n \n \n Primary button\n \n \n Tertiary button\n \n
\n \n Submit\n
\n \n
\n \n
\n \n

Example heading

\n \n \n

Example sub-heading

\n \n \n

\n Remove this div and add your custom content in\n IcSectionContainer.\n

\n \n
\n \n
\n \n \n [footerLink]\n \n \n [footerLink]\n \n \n [footerLink]\n \n \n [footerLink]\n \n \n [footerLink]\n \n \n \n \n \n \n \n
\n
\n )`,\n \"SideNavigationWithPageHeaderPattern\",\n \"tsx\",\n true\n ),\n },\n {\n language: \"Javascript\",\n snippet: createReactAppTsx(\n `const useStyles = createUseStyles({\n contentDivContainer: {\n display: \"flex\",\n flexDirection: \"column\",\n flexGrow: \"1\",\n },\n mainContentDiv: {\n border: \"var(--ic-border-width) dashed var(--ic-architectural-400)\",\n padding: \"var(--ic-space-md)\",\n height: \"800px\",\n },\n parentDiv: { display: \"flex\", height: \"100%\" },\n main: { minHeight: \"100vh\" },\n inputArea: {\n display: \"flex\",\n flexWrap: \"wrap\",\n gap: \"var(--ic-space-md)\",\n \"@media screen and (max-width: 320px)\": {\n gap: \"var(--ic-space-xs)\",\n },\n },\n textField: {\n \"--input-width\": \"21.5rem\",\n \"@media screen and (max-width: 768px)\": {\n \"--input-width\": \"100%\",\n flex: \"1 1 0\",\n },\n },\n });\n const classes = useStyles();\n const alignment = \"center\";\n const pageHeaderAlignment = \"center\";\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 \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 \n \n \n Primary button\n \n \n Tertiary button\n \n
\n \n Submit\n
\n \n
\n \n
\n \n

Example heading

\n \n \n

Example sub-heading

\n \n \n

\n Remove this div and add your custom content in\n IcSectionContainer.\n

\n \n
\n \n
\n \n \n [footerLink]\n \n \n [footerLink]\n \n \n [footerLink]\n \n \n [footerLink]\n \n \n [footerLink]\n \n \n \n \n \n \n \n
\n
\n )`,\n \"SideNavigationWithPageHeaderPattern\",\n \"jsx\",\n true\n ),\n },\n ],\n },\n },\n];\n\n\n \n View example in new window\n \n\n\n### Back to top\n\nUse the back to top component to help people quickly return to the top of a long page.\n\nConsider using it on all apps to improve usability for everyone, including keyboard-only and some assistive technology users.\n\nDon't use back to top when the page is designed to fill the viewport without scrolling.\n\nFor more information, see the [back to top component](/components/back-to-top).\n\nexport const snippetsSideNavBackToTop = [\n {\n technology: \"Web component\",\n snippets: {\n long: createWebComponentsIndexHTML(\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 \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 \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n
\n \n
\n \n

Example heading

\n \n \n

Example sub-heading

\n \n \n

\n Remove this div and add your custom content in ic-section-container.\n

\n \n
\n \n
\n \n \n [footerLink]\n [footerLink]\n [footerLink]\n [footerLink]\n [footerLink]\n \n \n \n \n \n \n
\n
`,\n true\n ),\n },\n },\n {\n technology: \"React\",\n snippets: {\n long: [\n {\n language: \"Typescript\",\n snippet: createReactAppTsx(\n `const useStyles = createUseStyles({\n contentDivContainer: {\n display: \"flex\",\n flexDirection: \"column\",\n flexGrow: \"1\",\n },\n mainContentDiv: {\n border: \"var(--ic-border-width) dashed var(--ic-architectural-400)\",\n padding: \"var(--ic-space-md)\",\n flex: 1,\n },\n parentDiv: { display: \"flex\", height: \"100%\" },\n main: { minHeight: \"100vh\", display: \"flex\" },\n mainSectionContainer: { display: \"flex\", flex: 1 },\n });\n const classes = useStyles();\n const alignment: IcAlignment = \"center\";\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 \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n
\n \n
\n \n

Example heading

\n \n \n

Example sub-heading

\n \n \n

\n Remove this div and add your custom content in\n IcSectionContainer.\n

\n \n
\n \n
\n \n \n \n [footerLink]\n \n \n [footerLink]\n \n \n [footerLink]\n \n \n [footerLink]\n \n \n [footerLink]\n \n \n \n \n \n \n \n
\n
\n )`,\n \"SideNavigationWithBackToTopPattern\",\n \"tsx\",\n true\n ),\n },\n {\n language: \"Javascript\",\n snippet: createReactAppTsx(\n `const useStyles = createUseStyles({\n contentDivContainer: {\n display: \"flex\",\n flexDirection: \"column\",\n flexGrow: \"1\",\n },\n mainContentDiv: {\n border: \"var(--ic-border-width) dashed var(--ic-architectural-400)\",\n padding: \"var(--ic-space-md)\",\n flex: 1,\n },\n parentDiv: { display: \"flex\", height: \"100%\" },\n main: { minHeight: \"100vh\", display: \"flex\" },\n mainSectionContainer: { display: \"flex\", flex: 1 },\n });\n const classes = useStyles();\n const alignment = \"center\";\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 \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n
\n \n
\n \n

Example heading

\n \n \n

Example sub-heading

\n \n \n

\n Remove this div and add your custom content in\n IcSectionContainer.\n

\n \n
\n \n
\n \n \n \n [footerLink]\n \n \n [footerLink]\n \n \n [footerLink]\n \n \n [footerLink]\n \n \n [footerLink]\n \n \n \n \n \n \n \n
\n
\n )`,\n \"SideNavigationWithBackToTopPattern\",\n \"jsx\",\n true\n ),\n },\n ],\n },\n },\n];\n\n\n \n View example in new window\n \n\n\n## Customisation\n\nThis pattern can be themed to change the look and feel of the app. Use the [custom theme](/get-started/install-components/custom-theme) guidance to change your app's theme. Make sure to select your theme in line with the accessibility requirements around colour contrast.\n\n\n\n## Accessibility considerations\n\nWhen configuring a page make sure to follow all [accessibility guidance](/accessibility). Most accessibility requirements are covered by the individual components. For further accessibility information see the individual component pages.\n\nWe’ve tested this pattern against WCAG 2.1 Level AA. It’s been tested with NVDA and VoiceOver, and several different users with different interaction methods.\n\n## Related patterns\n\n- [Top navigation layout](/patterns/navigation-patterns/top-navigation-layout)\n", + "contents": "\nimport { IcLink } from \"@ukic/react\";\nimport {\n createReactAppTsx,\n createWebComponentsIndexHTML,\n} from \"./components/StackblitzButton/stackblitz-helpers\";\nimport sideNavigationPatternFig1 from \"./images/fig-1-example-of-theming-applied-to-side-navigation-layout.png\";\n\n## Introduction\n\nexport const snippetsSideNav = [\n {\n technology: \"Web component\",\n snippets: createWebComponentsIndexHTML(`
\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 \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 \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n
\n \n
\n \n

Example heading

\n \n \n

Example sub-heading

\n \n \n

\n Remove this div and add your custom content in\n ic-section-container.\n

\n \n
\n \n
\n \n [footerLink]\n [footerLink]\n [footerLink]\n [footerLink]\n [footerLink]\n \n \n \n \n \n \n
\n
`),\n },\n {\n technology: \"React\",\n snippets: createReactAppTsx(\n `const useStyles = createUseStyles({\n contentDivContainer: {\n display: \"flex\",\n flexDirection: \"column\",\n flexGrow: \"1\",\n },\n mainContentDiv: {\n border: \"var(--ic-border-width) dashed var(--ic-architectural-400)\",\n padding: \"var(--ic-space-md)\",\n height: \"800px\",\n },\n parentDiv: { display: \"flex\", height: \"100%\" },\n main: { minHeight: \"100vh\" },\n });\n const classes = useStyles();\n const alignment = \"center\";\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 \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n
\n \n
\n \n

Example heading

\n \n \n

Example sub-heading

\n \n \n

\n Remove this div and add your custom content in\n IcSectionContainer.\n

\n \n
\n \n
\n \n \n [footerLink]\n \n \n [footerLink]\n \n \n [footerLink]\n \n \n [footerLink]\n \n \n [footerLink]\n \n \n \n \n \n \n \n
\n
)`,\n \"SideNavigationPattern\",\n \"jsx\",\n true\n ),\n },\n];\n\n\n \n View example in new window\n \n\n\nThis pattern includes the components:\n\n- [Side navigation](/components/side-navigation)\n- [Section container](/components/section-container)\n- [Footer](/components/footer)\n- [Classification banner](/components/classification-banner)\n\nWith options for:\n\n- [Page header](/components/page-header)\n- [Back to top](/components/back-to-top)\n\n## When to use\n\nWhen choosing a layout pattern, make sure it works for all pages within your app and avoid switching layout patterns on different pages.\n\nUse the side navigation layout to help provide more screen space for main content. Side navigation is well suited to apps that have mutually exclusive features which need to be switched between easily from any page. For example, email providers often use side navigation to provide maximum screen space to email content whilst allowing constant access to other pages.\n\n## When not to use\n\nFor intranet-style and content heavy apps, use the top navigation layout as it's better suited for providing links to a large number of pages.\n\nUse either the top navigation layout or the side navigation layout. Don't use both at the same time.\n\n## Implementation\n\nMake sure the pattern always fits the entire viewport and is never within another page container. The pattern content will adapt responsively when the viewport changes.\n\nAlways place the footer at the bottom of the page and below the fold meaning users should scroll to see it.\n\n## Variants\n\nUse the side navigation layout with additional components including page header to create other common layouts.\n\n### Page header\n\nUse a page header to display an introduction to the content of the page. Add additional elements to provide actions, navigation or inputs at the page level.\n\nFor more information, see the [page header component](/components/page-header).\n\nexport const snippetsSideNavWithPageHeader = [\n {\n technology: \"Web component\",\n snippets: createWebComponentsIndexHTML(`
\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 \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 \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 \n \n \n \n Primary button\n \n Tertiary button\n
\n \n Submit\n
\n \n
\n \n
\n \n

Example heading

\n \n \n

Example sub-heading

\n \n \n

\n Remove this div and add your custom content in ic-section-container.\n

\n \n
\n \n
\n \n [footerLink]\n [footerLink]\n [footerLink]\n [footerLink]\n [footerLink]\n \n \n \n \n \n \n
\n
`),\n },\n {\n technology: \"React\",\n snippets: createReactAppTsx(\n `const useStyles = createUseStyles({\n contentDivContainer: {\n display: \"flex\",\n flexDirection: \"column\",\n flexGrow: \"1\",\n },\n mainContentDiv: {\n border: \"var(--ic-border-width) dashed var(--ic-architectural-400)\",\n padding: \"var(--ic-space-md)\",\n height: \"800px\",\n },\n parentDiv: { display: \"flex\", height: \"100%\" },\n main: { minHeight: \"100vh\" },\n inputArea: {\n display: \"flex\",\n flexWrap: \"wrap\",\n gap: \"var(--ic-space-md)\",\n \"@media screen and (max-width: 320px)\": {\n gap: \"var(--ic-space-xs)\",\n },\n },\n textField: {\n \"--input-width\": \"21.5rem\",\n \"@media screen and (max-width: 768px)\": {\n \"--input-width\": \"100%\",\n flex: \"1 1 0\",\n },\n },\n });\n const classes = useStyles();\n const alignment = \"center\";\n const pageHeaderAlignment = \"center\";\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 \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 \n \n \n Primary button\n \n \n Tertiary button\n \n
\n \n Submit\n
\n \n
\n \n
\n \n

Example heading

\n \n \n

Example sub-heading

\n \n \n

\n Remove this div and add your custom content in\n IcSectionContainer.\n

\n \n
\n \n
\n \n \n [footerLink]\n \n \n [footerLink]\n \n \n [footerLink]\n \n \n [footerLink]\n \n \n [footerLink]\n \n \n \n \n \n \n \n
\n
\n )`,\n \"SideNavigationWithPageHeaderPattern\",\n \"jsx\",\n true\n ),\n },\n];\n\n\n \n View example in new window\n \n\n\n### Back to top\n\nUse the back to top component to help people quickly return to the top of a long page.\n\nConsider using it on all apps to improve usability for everyone, including keyboard-only and some assistive technology users.\n\nDon't use back to top when the page is designed to fill the viewport without scrolling.\n\nFor more information, see the [back to top component](/components/back-to-top).\n\nexport const snippetsSideNavBackToTop = [\n {\n technology: \"Web component\",\n snippets: createWebComponentsIndexHTML(`
\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 \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 \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n
\n \n
\n \n

Example heading

\n \n \n

Example sub-heading

\n \n \n

\n Remove this div and add your custom content in ic-section-container.\n

\n \n
\n \n
\n \n \n [footerLink]\n [footerLink]\n [footerLink]\n [footerLink]\n [footerLink]\n \n \n \n \n \n \n
\n
`),\n },\n {\n technology: \"React\",\n snippets: createReactAppTsx(\n `const useStyles = createUseStyles({\n contentDivContainer: {\n display: \"flex\",\n flexDirection: \"column\",\n flexGrow: \"1\",\n },\n mainContentDiv: {\n border: \"var(--ic-border-width) dashed var(--ic-architectural-400)\",\n padding: \"var(--ic-space-md)\",\n flex: 1,\n },\n parentDiv: { display: \"flex\", height: \"100%\" },\n main: { minHeight: \"100vh\", display: \"flex\" },\n mainSectionContainer: { display: \"flex\", flex: 1 },\n });\n const classes = useStyles();\n const alignment = \"center\";\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 \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n
\n \n
\n \n

Example heading

\n \n \n

Example sub-heading

\n \n \n

\n Remove this div and add your custom content in\n IcSectionContainer.\n

\n \n
\n \n
\n \n \n \n [footerLink]\n \n \n [footerLink]\n \n \n [footerLink]\n \n \n [footerLink]\n \n \n [footerLink]\n \n \n \n \n \n \n \n
\n
\n )`,\n \"SideNavigationWithBackToTopPattern\",\n \"jsx\",\n true\n ),\n },\n];\n\n\n \n View example in new window\n \n\n\n## Customisation\n\nThis pattern can be themed to change the look and feel of the app. Use the [custom theme](/get-started/install-components/custom-theme) guidance to change your app's theme. Make sure to select your theme in line with the accessibility requirements around colour contrast.\n\n\n\n## Accessibility considerations\n\nWhen configuring a page make sure to follow all [accessibility guidance](/accessibility). Most accessibility requirements are covered by the individual components. For further accessibility information see the individual component pages.\n\nWe’ve tested this pattern against WCAG 2.1 Level AA. It’s been tested with NVDA and VoiceOver, and several different users with different interaction methods.\n\n## Related patterns\n\n- [Top navigation layout](/patterns/navigation-patterns/top-navigation-layout)\n", "path": "/patterns/navigation-patterns/side-navigation-layout", "navPriority": 2, "date": "2024-03-25", @@ -4849,10 +4849,10 @@ "contribute": "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/patterns/navigation-patterns/side-navigation-layout.mdx", "meta": { "relativePath": "patterns/side-navigation-layout.mdx", - "createdAt": "2024-05-30T12:07:55.547Z", - "lastModified": "2024-05-30T12:07:55.547Z", - "size": 86108, - "formattedSize": "84.1 KB" + "createdAt": "2024-05-21T09:12:11.395Z", + "lastModified": "2024-05-21T09:12:11.395Z", + "size": 62918, + "formattedSize": "61.4 KB" } }, { @@ -4874,7 +4874,7 @@ }, { "id": "patterns__top-navigation-layoutx", - "contents": "\nimport { IcLink } from \"@ukic/react\";\n\nimport {\n createReactAppTsx,\n createWebComponentsIndexHTML,\n} from \"./components/StackblitzButton/stackblitz-helpers\";\n\nimport topNavigationPatternFig1 from \"./images/fig-1-example-of-theming-applied-to-top-navigation-layout@2x.png\";\n\n## Introduction\n\nexport const snippetsTopNav = [\n {\n technology: \"Web component\",\n snippets: {\n long: createWebComponentsIndexHTML(\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 \n \n \n \n \n
\n \n
\n \n

Example heading

\n \n \n

Example sub-heading

\n \n \n

\n Remove this div and add your custom content in ic-section-container.\n

\n \n
\n \n
\n \n [footerLink]\n [footerLink]\n [footerLink]\n [footerLink]\n [footerLink]\n \n \n \n \n \n `,\n true\n ),\n },\n },\n {\n technology: \"React\",\n snippets: {\n long: [\n {\n language: \"Typescript\",\n snippet: createReactAppTsx(\n `const alignment: IcAlignment = \"center\";\n const useStyles = createUseStyles({\n main: { minHeight: \"100vh\", display: \"flex\" },\n mainContentDiv: {\n border: \"var(--ic-border-width) dashed var(--ic-architectural-400)\",\n padding: \"var(--ic-space-md)\",\n flex: 1,\n },\n mainSectionContainer: { display: \"flex\", flex: 1 },\n });\n const classes = useStyles(); \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
\n \n
\n \n

Example heading

\n \n \n

Example sub-heading

\n \n \n

\n Remove this div and add your custom content in IcSectionContainer.\n

\n \n
\n \n
\n \n \n [footerLink]\n \n \n [footerLink]\n \n \n [footerLink]\n \n \n [footerLink]\n \n \n [footerLink]\n \n \n \n \n \n \n \n \n )`,\n \"TopNavigation\",\n \"tsx\",\n true\n ),\n },\n {\n language: \"Javascript\",\n snippet: createReactAppTsx(\n `const alignment = \"center\";\n const useStyles = createUseStyles({\n main: { minHeight: \"100vh\", display: \"flex\" },\n mainContentDiv: {\n border: \"var(--ic-border-width) dashed var(--ic-architectural-400)\",\n padding: \"var(--ic-space-md)\",\n flex: 1,\n },\n mainSectionContainer: { display: \"flex\", flex: 1 },\n });\n const classes = useStyles(); \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
\n \n
\n \n

Example heading

\n \n \n

Example sub-heading

\n \n \n

\n Remove this div and add your custom content in IcSectionContainer.\n

\n \n
\n \n
\n \n \n [footerLink]\n \n \n [footerLink]\n \n \n [footerLink]\n \n \n [footerLink]\n \n \n [footerLink]\n \n \n \n \n \n \n \n \n )`,\n \"TopNavigation\",\n \"jsx\",\n true\n ),\n },\n ],\n },\n },\n];\n\n\n \n View example in new window\n \n\n\nThis pattern includes the components:\n\n- [Top navigation](/components/top-navigation)\n- [Section container](/components/section-container)\n- [Footer](/components/footer)\n- [Classification banner](/components/classification-banner)\n\nWith options for:\n\n- [Page header](/components/page-header)\n- [Mega-menu](/components/top-navigation)\n- [Back to top](/components/back-to-top)\n\n## When to use\n\nWhen choosing a layout pattern, make sure it works for all pages within your app and avoid switching layouts on different pages.\n\nUse the top navigation layout for article pages or content heavy apps with lots of text.\n\nUse the top navigation layout with a mega-menu for access to a large range of navigation items.\n\nUse a mega-menu for apps with complex page structures where every page should be accessible from any other page through the mega-menu. For example, department stores or supermarkets use a top navigation with mega-menu to provide access to their large number of product categories.\n\n## When not to use\n\nFor apps that require constant access to switch between pages, use side navigation as it's better suited for providing quick access and maximising the screen space for page content.\n\nUse either the top navigation layout or the side navigation layout. Don't use both at the same time.\n\n## Implementation\n\nMake sure the pattern always fits the entire viewport and is never within another page container. The pattern content will adapt responsively when the viewport changes.\n\nAlways place the footer at the bottom of the page and below the fold meaning users should\nscroll to see it.\n\n## Variants\n\nUse the top navigation layout with additional components including page header to create other common layouts.\n\n### Page header\n\nUse a page header to display an introduction to the content of the page. Add additional elements to provide actions, navigation or inputs at the page level.\n\nFor more information, see the [page header component](/components/page-header).\n\nexport const snippetsTopNavPageHeader = [\n {\n technology: \"Web component\",\n snippets: {\n long: createWebComponentsIndexHTML(\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 \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n Primary button\n \n Tertiary button\n
\n \n Submit\n
\n \n
\n \n
\n \n

Example heading

\n \n \n

Example sub-heading

\n \n \n

\n Remove this div and add your custom content in ic-section-container.\n

\n \n
\n \n
\n \n [footerLink]\n [footerLink]\n [footerLink]\n [footerLink]\n [footerLink]\n \n \n \n \n \n `,\n true\n ),\n },\n },\n {\n technology: \"React\",\n snippets: {\n long: [\n {\n language: \"Typescript\",\n snippet: createReactAppTsx(\n `const alignment: IcAlignment = \"center\";\n let pageHeaderAlignment;\n // pageHeaderAlignment: IcAlignment = \"center\";\n const useStyles = createUseStyles({\n main: { minHeight: \"100vh\", display: \"flex\" },\n mainContentDiv: {\n border: \"var(--ic-border-width) dashed var(--ic-architectural-400)\",\n padding: \"var(--ic-space-md)\",\n flex: 1,\n },\n mainSectionContainer: { display: \"flex\", flex: 1 },\n inputArea: {\n display: \"flex\",\n flexWrap: \"wrap\",\n gap: \"var(--ic-space-md)\",\n \"@media screen and (max-width: 320px)\": {\n gap: \"var(--ic-space-xs)\",\n },\n },\n textField: {\n \"--input-width\": \"21.5rem\",\n \"@media screen and (max-width: 768px)\": {\n \"--input-width\": \"100%\",\n flex: \"1 1 0\",\n },\n },\n });\n const classes = useStyles();\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 \n \n \n \n \n \n \n \n \n \n \n \n Primary button\n \n \n Tertiary button\n \n
\n \n Submit\n
\n \n
\n \n
\n \n

Example heading

\n \n \n

Example sub-heading

\n \n \n

\n Remove this div and add your custom content in IcSectionContainer.\n

\n \n
\n \n
\n \n \n [footerLink]\n \n \n [footerLink]\n \n \n [footerLink]\n \n \n [footerLink]\n \n \n [footerLink]\n \n \n \n \n \n \n \n \n )`,\n \"TopNavigationWithPageHeader\",\n \"tsx\",\n true\n ),\n },\n {\n language: \"Javascript\",\n snippet: createReactAppTsx(\n `const alignment = \"center\";\n let pageHeaderAlignment;\n // pageHeaderAlignment = \"center\";\n const useStyles = createUseStyles({\n main: { minHeight: \"100vh\", display: \"flex\" },\n mainContentDiv: {\n border: \"var(--ic-border-width) dashed var(--ic-architectural-400)\",\n padding: \"var(--ic-space-md)\",\n flex: 1,\n },\n mainSectionContainer: { display: \"flex\", flex: 1 },\n inputArea: {\n display: \"flex\",\n flexWrap: \"wrap\",\n gap: \"var(--ic-space-md)\",\n \"@media screen and (max-width: 320px)\": {\n gap: \"var(--ic-space-xs)\",\n },\n },\n textField: {\n \"--input-width\": \"21.5rem\",\n \"@media screen and (max-width: 768px)\": {\n \"--input-width\": \"100%\",\n flex: \"1 1 0\",\n },\n },\n });\n const classes = useStyles();\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 \n \n \n \n \n \n \n \n \n \n \n \n Primary button\n \n \n Tertiary button\n \n
\n \n Submit\n
\n \n
\n \n
\n \n

Example heading

\n \n \n

Example sub-heading

\n \n \n

\n Remove this div and add your custom content in IcSectionContainer.\n

\n \n
\n \n
\n \n \n [footerLink]\n \n \n [footerLink]\n \n \n [footerLink]\n \n \n [footerLink]\n \n \n [footerLink]\n \n \n \n \n \n \n \n \n )`,\n \"TopNavigationWithPageHeader\",\n \"jsx\",\n true\n ),\n },\n ],\n },\n },\n];\n\n\n \n View example in new window\n \n\n\n### Mega-menu\n\nUse a top navigation with a mega-menu for apps with more than eight navigation options or options that can be grouped into categories. The main link groups are displayed in the top navigation and open a mega-menu when hovered over or focused.\n\nFor more information, see the [mega-menu component](/components/top-navigation#mega-menu).\n\nexport const snippetsTopNavMegaMenu = [\n {\n technology: \"Web component\",\n snippets: {\n long: createWebComponentsIndexHTML(\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 \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n \n
\n \n

Example heading

\n \n \n

Example sub-heading

\n \n \n

\n Remove this div and add your custom content in ic-section-container.\n

\n \n
\n \n
\n \n [footerLink]\n [footerLink]\n [footerLink]\n [footerLink]\n [footerLink]\n \n \n \n \n \n `,\n true\n ),\n },\n },\n {\n technology: \"React\",\n snippets: {\n long: [\n {\n language: \"Typescript\",\n snippet: createReactAppTsx(\n `const alignment: IcAlignment = \"center\";\nconst useStyles = createUseStyles({\n main: { minHeight: \"100vh\", display: \"flex\" },\n mainContentDiv: {\n border: \"var(--ic-border-width) dashed var(--ic-architectural-400)\",\n padding: \"var(--ic-space-md)\",\n flex: 1,\n },\n mainSectionContainer: { display: \"flex\", flex: 1 },\n});\nconst classes = useStyles(); \nreturn (\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 \n \n \n \n \n \n \n \n \n
\n \n
\n \n

Example heading

\n \n \n

Example sub-heading

\n \n \n

\n Remove this div and add your custom content in IcSectionContainer.\n

\n \n
\n \n
\n \n \n [footerLink]\n \n \n [footerLink]\n \n \n [footerLink]\n \n \n [footerLink]\n \n \n [footerLink]\n \n \n \n \n \n \n \n \n)`,\n \"TopNavigationWithMegaMenu\",\n \"tsx\",\n true\n ),\n },\n {\n language: \"Javascript\",\n snippet: createReactAppTsx(\n `const useStyles = createUseStyles({\n main: { minHeight: \"100vh\", display: \"flex\" },\n mainContentDiv: {\n border: \"var(--ic-border-width) dashed var(--ic-architectural-400)\",\n padding: \"var(--ic-space-md)\",\n flex: 1,\n },\n mainSectionContainer: { display: \"flex\", flex: 1 },\n});\nconst classes = useStyles(); \nreturn (\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 \n \n \n \n \n \n \n \n \n
\n \n
\n \n

Example heading

\n \n \n

Example sub-heading

\n \n \n

\n Remove this div and add your custom content in IcSectionContainer.\n

\n \n
\n \n
\n \n \n [footerLink]\n \n \n [footerLink]\n \n \n [footerLink]\n \n \n [footerLink]\n \n \n [footerLink]\n \n \n \n \n \n \n \n \n)`,\n \"TopNavigationWithMegaMenu\",\n \"jsx\",\n true\n ),\n },\n ],\n },\n },\n];\n\n\n \n View example in new window\n \n\n\n### Back to top\n\nUse the back to top component to help people quickly return to the top of a long page.\n\nConsider using it on all apps to improve usability for everyone, including keyboard-only and some assistive technology users.\n\nDon't use back to top when the page is designed to fill the viewport without scrolling.\n\nFor more information, see the [back to top component](/components/back-to-top).\n\nexport const snippetsTopNavBackToTop = [\n {\n technology: \"Web component\",\n snippets: {\n long: createWebComponentsIndexHTML(\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 \n \n \n \n \n
\n \n
\n \n

Example heading

\n \n \n

Example sub-heading

\n \n \n

\n Remove this div and add your custom content in ic-section-container.\n

\n \n
\n \n
\n \n \n [footerLink]\n [footerLink]\n [footerLink]\n [footerLink]\n [footerLink]\n \n \n \n \n \n `,\n true\n ),\n },\n },\n {\n technology: \"React\",\n snippets: {\n long: [\n {\n language: \"Typescript\",\n snippet: createReactAppTsx(\n `const alignment: IcAlignment = \"center\";\n const useStyles = createUseStyles({\n main: { minHeight: \"100vh\", display: \"flex\" },\n mainContentDiv: {\n border: \"var(--ic-border-width) dashed var(--ic-architectural-400)\",\n padding: \"var(--ic-space-md)\",\n flex: 1,\n },\n mainSectionContainer: { display: \"flex\", flex: 1 },\n });\n const classes = useStyles(); \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
\n \n
\n \n

Example heading

\n \n \n

Example sub-heading

\n \n \n

\n Remove this div and add your custom content in IcSectionContainer.\n

\n \n
\n \n
\n \n \n \n [footerLink]\n \n \n [footerLink]\n \n \n [footerLink]\n \n \n [footerLink]\n \n \n [footerLink]\n \n \n \n \n \n \n \n \n )`,\n \"TopNavigationWithBackToTop\",\n \"tsx\",\n true\n ),\n },\n {\n language: \"Javascript\",\n snippet: createReactAppTsx(\n `const alignment = \"center\";\n const useStyles = createUseStyles({\n main: { minHeight: \"100vh\", display: \"flex\" },\n mainContentDiv: {\n border: \"var(--ic-border-width) dashed var(--ic-architectural-400)\",\n padding: \"var(--ic-space-md)\",\n flex: 1,\n },\n mainSectionContainer: { display: \"flex\", flex: 1 },\n });\n const classes = useStyles(); \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
\n \n
\n \n

Example heading

\n \n \n

Example sub-heading

\n \n \n

\n Remove this div and add your custom content in IcSectionContainer.\n

\n \n
\n \n
\n \n \n \n [footerLink]\n \n \n [footerLink]\n \n \n [footerLink]\n \n \n [footerLink]\n \n \n [footerLink]\n \n \n \n \n \n \n \n \n )`,\n \"TopNavigationWithBackToTop\",\n \"jsx\",\n true\n ),\n },\n ],\n },\n },\n];\n\n\n \n View example in new window\n \n\n\n## Customisation\n\nThis pattern can be themed to change the look and feel of the app. Use the [custom theme](/get-started/install-components/custom-theme) guidance to change your app's theme. Make sure to select your theme in line with the accessibility requirements around colour contrast.\n\n\n\n## Accessibility considerations\n\nWhen configuring a page make sure to follow all [accessibility guidance](/accessibility). Most accessibility requirements are covered by the individual components. For further accessibility information see the individual component pages.\n\nWe’ve tested this pattern against WCAG 2.1 Level AA. It’s been tested with NVDA and VoiceOver, and several different users with different interaction methods.\n\n## Related patterns\n\n- [Side navigation layout](/patterns/navigation-patterns/side-navigation-layout)\n", + "contents": "\nimport { IcLink } from \"@ukic/react\";\n\nimport {\n createReactAppTsx,\n createWebComponentsIndexHTML,\n} from \"./components/StackblitzButton/stackblitz-helpers\";\n\nimport topNavigationPatternFig1 from \"./images/fig-1-example-of-theming-applied-to-top-navigation-layout@2x.png\";\n\n## Introduction\n\nexport const snippetsTopNav = [\n {\n technology: \"Web component\",\n snippets: {\n long: createWebComponentsIndexHTML(`\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 \n \n \n \n
\n \n
\n \n

Example heading

\n \n \n

Example sub-heading

\n \n \n

\n Remove this div and add your custom content in ic-section-container.\n

\n \n
\n \n
\n \n [footerLink]\n [footerLink]\n [footerLink]\n [footerLink]\n [footerLink]\n \n \n \n \n \n `),\n },\n },\n {\n technology: \"React\",\n snippets: {\n long: [\n {\n language: \"Typescript\",\n snippet: createReactAppTsx(\n `const alignment = \"center\";\n const useStyles = createUseStyles({\n main: { minHeight: \"100vh\", display: \"flex\" },\n mainContentDiv: {\n border: \"var(--ic-border-width) dashed var(--ic-architectural-400)\",\n padding: \"var(--ic-space-md)\",\n flex: 1,\n },\n mainSectionContainer: { display: \"flex\", flex: 1 },\n });\n const classes = useStyles(); \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
\n \n
\n \n

Example heading

\n \n \n

Example sub-heading

\n \n \n

\n Remove this div and add your custom content in IcSectionContainer.\n

\n \n
\n \n
\n \n \n [footerLink]\n \n \n [footerLink]\n \n \n [footerLink]\n \n \n [footerLink]\n \n \n [footerLink]\n \n \n \n \n \n \n \n \n )`,\n \"TopNavigation\",\n \"tsx\",\n true\n ),\n },\n {\n language: \"Javascript\",\n snippet: createReactAppTsx(\n `const alignment = \"center\";\n const useStyles = createUseStyles({\n main: { minHeight: \"100vh\", display: \"flex\" },\n mainContentDiv: {\n border: \"var(--ic-border-width) dashed var(--ic-architectural-400)\",\n padding: \"var(--ic-space-md)\",\n flex: 1,\n },\n mainSectionContainer: { display: \"flex\", flex: 1 },\n });\n const classes = useStyles(); \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
\n \n
\n \n

Example heading

\n \n \n

Example sub-heading

\n \n \n

\n Remove this div and add your custom content in IcSectionContainer.\n

\n \n
\n \n
\n \n \n [footerLink]\n \n \n [footerLink]\n \n \n [footerLink]\n \n \n [footerLink]\n \n \n [footerLink]\n \n \n \n \n \n \n \n \n )`,\n \"TopNavigation\",\n \"jsx\",\n true\n ),\n },\n ],\n },\n },\n];\n\n\n \n View example in new window\n \n\n\nThis pattern includes the components:\n\n- [Top navigation](/components/top-navigation)\n- [Section container](/components/section-container)\n- [Footer](/components/footer)\n- [Classification banner](/components/classification-banner)\n\nWith options for:\n\n- [Page header](/components/page-header)\n- [Mega-menu](/components/top-navigation)\n- [Back to top](/components/back-to-top)\n\n## When to use\n\nWhen choosing a layout pattern, make sure it works for all pages within your app and avoid switching layouts on different pages.\n\nUse the top navigation layout for article pages or content heavy apps with lots of text.\n\nUse the top navigation layout with a mega-menu for access to a large range of navigation items.\n\nUse a mega-menu for apps with complex page structures where every page should be accessible from any other page through the mega-menu. For example, department stores or supermarkets use a top navigation with mega-menu to provide access to their large number of product categories.\n\n## When not to use\n\nFor apps that require constant access to switch between pages, use side navigation as it's better suited for providing quick access and maximising the screen space for page content.\n\nUse either the top navigation layout or the side navigation layout. Don't use both at the same time.\n\n## Implementation\n\nMake sure the pattern always fits the entire viewport and is never within another page container. The pattern content will adapt responsively when the viewport changes.\n\nAlways place the footer at the bottom of the page and below the fold meaning users should\nscroll to see it.\n\n## Variants\n\nUse the top navigation layout with additional components including page header to create other common layouts.\n\n### Page header\n\nUse a page header to display an introduction to the content of the page. Add additional elements to provide actions, navigation or inputs at the page level.\n\nFor more information, see the [page header component](/components/page-header).\n\nexport const snippetsTopNavPageHeader = [\n {\n technology: \"Web component\",\n snippets:\n createWebComponentsIndexHTML(`\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 \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n Primary button\n \n Tertiary button\n
\n \n Submit\n
\n \n
\n \n
\n \n

Example heading

\n \n \n

Example sub-heading

\n \n \n

\n Remove this div and add your custom content in ic-section-container.\n

\n \n
\n \n
\n \n [footerLink]\n [footerLink]\n [footerLink]\n [footerLink]\n [footerLink]\n \n \n \n \n \n `),\n },\n {\n technology: \"React\",\n snippets: createReactAppTsx(\n `const alignment = \"center\";\n let pageHeaderAlignment;\n // pageHeaderAlignment = \"center\";\n const useStyles = createUseStyles({\n main: { minHeight: \"100vh\", display: \"flex\" },\n mainContentDiv: {\n border: \"var(--ic-border-width) dashed var(--ic-architectural-400)\",\n padding: \"var(--ic-space-md)\",\n flex: 1,\n },\n mainSectionContainer: { display: \"flex\", flex: 1 },\n inputArea: {\n display: \"flex\",\n flexWrap: \"wrap\",\n gap: \"var(--ic-space-md)\",\n \"@media screen and (max-width: 320px)\": {\n gap: \"var(--ic-space-xs)\",\n },\n },\n textField: {\n \"--input-width\": \"21.5rem\",\n \"@media screen and (max-width: 768px)\": {\n \"--input-width\": \"100%\",\n flex: \"1 1 0\",\n },\n },\n });\n const classes = useStyles();\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 \n \n \n \n \n \n \n \n \n \n \n \n Primary button\n \n \n Tertiary button\n \n
\n \n Submit\n
\n \n
\n \n
\n \n

Example heading

\n \n \n

Example sub-heading

\n \n \n

\n Remove this div and add your custom content in IcSectionContainer.\n

\n \n
\n \n
\n \n \n [footerLink]\n \n \n [footerLink]\n \n \n [footerLink]\n \n \n [footerLink]\n \n \n [footerLink]\n \n \n \n \n \n \n \n \n )`,\n \"TopNavigationWithPageHeader\",\n \"jsx\",\n true\n ),\n },\n];\n\n\n \n View example in new window\n \n\n\n### Mega-menu\n\nUse a top navigation with a mega-menu for apps with more than eight navigation options or options that can be grouped into categories. The main link groups are displayed in the top navigation and open a mega-menu when hovered over or focused.\n\nFor more information, see the [mega-menu component](/components/top-navigation#mega-menu).\n\nexport const snippetsTopNavMegaMenu = [\n {\n technology: \"Web component\",\n snippets:\n createWebComponentsIndexHTML(`\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 \n \n \n \n \n \n \n \n \n \n \n \n \n
\n \n
\n \n

Example heading

\n \n \n

Example sub-heading

\n \n \n

\n Remove this div and add your custom content in ic-section-container.\n

\n \n
\n \n
\n \n [footerLink]\n [footerLink]\n [footerLink]\n [footerLink]\n [footerLink]\n \n \n \n \n \n `),\n },\n {\n technology: \"React\",\n snippets: createReactAppTsx(\n `const alignment = \"center\";\n const useStyles = createUseStyles({\n main: { minHeight: \"100vh\", display: \"flex\" },\n mainContentDiv: {\n border: \"var(--ic-border-width) dashed var(--ic-architectural-400)\",\n padding: \"var(--ic-space-md)\",\n flex: 1,\n },\n mainSectionContainer: { display: \"flex\", flex: 1 },\n });\n const classes = useStyles(); \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 \n \n \n \n \n \n \n \n \n
\n \n
\n \n

Example heading

\n \n \n

Example sub-heading

\n \n \n

\n Remove this div and add your custom content in IcSectionContainer.\n

\n \n
\n \n
\n \n \n [footerLink]\n \n \n [footerLink]\n \n \n [footerLink]\n \n \n [footerLink]\n \n \n [footerLink]\n \n \n \n \n \n \n \n \n )`,\n \"TopNavigationWithMegaMenu\",\n \"jsx\",\n true\n ),\n },\n];\n\n\n \n View example in new window\n \n\n\n### Back to top\n\nUse the back to top component to help people quickly return to the top of a long page.\n\nConsider using it on all apps to improve usability for everyone, including keyboard-only and some assistive technology users.\n\nDon't use back to top when the page is designed to fill the viewport without scrolling.\n\nFor more information, see the [back to top component](/components/back-to-top).\n\nexport const snippetsTopNavBackToTop = [\n {\n technology: \"Web component\",\n snippets:\n createWebComponentsIndexHTML(`\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 \n \n \n \n
\n \n
\n \n

Example heading

\n \n \n

Example sub-heading

\n \n \n

\n Remove this div and add your custom content in ic-section-container.\n

\n \n
\n \n
\n \n \n [footerLink]\n [footerLink]\n [footerLink]\n [footerLink]\n [footerLink]\n \n \n \n \n \n `),\n },\n {\n technology: \"React\",\n snippets: createReactAppTsx(\n `const alignment = \"center\";\n const useStyles = createUseStyles({\n main: { minHeight: \"100vh\", display: \"flex\" },\n mainContentDiv: {\n border: \"var(--ic-border-width) dashed var(--ic-architectural-400)\",\n padding: \"var(--ic-space-md)\",\n flex: 1,\n },\n mainSectionContainer: { display: \"flex\", flex: 1 },\n });\n const classes = useStyles(); \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
\n \n
\n \n

Example heading

\n \n \n

Example sub-heading

\n \n \n

\n Remove this div and add your custom content in IcSectionContainer.\n

\n \n
\n \n
\n \n \n \n [footerLink]\n \n \n [footerLink]\n \n \n [footerLink]\n \n \n [footerLink]\n \n \n [footerLink]\n \n \n \n \n \n \n \n \n )`,\n \"TopNavigationWithBackToTop\",\n \"jsx\",\n true\n ),\n },\n];\n\n\n \n View example in new window\n \n\n\n## Customisation\n\nThis pattern can be themed to change the look and feel of the app. Use the [custom theme](/get-started/install-components/custom-theme) guidance to change your app's theme. Make sure to select your theme in line with the accessibility requirements around colour contrast.\n\n\n\n## Accessibility considerations\n\nWhen configuring a page make sure to follow all [accessibility guidance](/accessibility). Most accessibility requirements are covered by the individual components. For further accessibility information see the individual component pages.\n\nWe’ve tested this pattern against WCAG 2.1 Level AA. It’s been tested with NVDA and VoiceOver, and several different users with different interaction methods.\n\n## Related patterns\n\n- [Side navigation layout](/patterns/navigation-patterns/side-navigation-layout)\n", "path": "/patterns/navigation-patterns/top-navigation-layout", "navPriority": 1, "date": "2024-03-25", @@ -4883,10 +4883,10 @@ "contribute": "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/patterns/navigation-patterns/top-navigation-layout.mdx", "meta": { "relativePath": "patterns/top-navigation-layout.mdx", - "createdAt": "2024-05-30T12:07:55.547Z", - "lastModified": "2024-05-30T12:07:55.547Z", - "size": 74130, - "formattedSize": "72.4 KB" + "createdAt": "2024-05-21T09:12:11.395Z", + "lastModified": "2024-05-21T09:12:11.395Z", + "size": 57202, + "formattedSize": "55.9 KB" } }, { @@ -4899,8 +4899,8 @@ "contribute": "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/styles/colour.mdx", "meta": { "relativePath": "styles/colour.mdx", - "createdAt": "2024-05-30T12:04:49.480Z", - "lastModified": "2024-05-30T12:04:49.480Z", + "createdAt": "2024-05-13T07:27:37.419Z", + "lastModified": "2024-05-13T07:27:37.419Z", "size": 4356, "formattedSize": "4.3 KB" }