From 86da5111d9724b1fe74469c9b3a7f346d1da7725 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 --- gatsby-node.js | 110 +- src/components/CodePreview/index.css | 8 +- src/components/CodePreview/index.tsx | 291 +- .../structured/components/accordion/code.mdx | 198 +- .../structured/components/alerts/code.mdx | 259 +- .../components/back-to-top/code.mdx | 29 +- .../structured/components/badge/code.mdx | 914 +++-- .../components/breadcrumbs/code.mdx | 137 +- .../structured/components/buttons/code.mdx | 517 ++- .../structured/components/cards/code.mdx | 1563 +++++--- .../structured/components/cards/guidance.mdx | 4 +- .../structured/components/checkboxes/code.mdx | 222 +- .../structured/components/chips/code.mdx | 102 +- .../components/classification-banner/code.mdx | 62 +- .../components/data-entity/code.mdx | 560 +-- .../structured/components/data-table/code.mdx | 3188 ++++++++++++++--- .../components/data-table/story-data.ts | 89 + .../structured/components/date-input/code.mdx | 392 +- .../components/date-picker/code.mdx | 996 ++++- .../structured/components/dialog/code.mdx | 1161 +++--- .../components/empty-state/code.mdx | 515 ++- .../structured/components/footer/code.mdx | 439 ++- .../structured/components/hero/code.mdx | 402 ++- .../structured/components/links/code.mdx | 198 +- .../components/loading-indicators/code.mdx | 219 +- .../components/multi-select/code.mdx | 1657 +++++++-- .../components/page-header/code.mdx | 304 +- .../structured/components/pagination/code.mdx | 224 +- .../components/popover-menu/code.mdx | 333 +- .../structured/components/radio/code.mdx | 300 +- .../structured/components/search-bar/code.mdx | 772 +++- .../components/section-container/code.mdx | 229 +- .../structured/components/select/code.mdx | 934 +++-- .../structured/components/side-nav/code.mdx | 288 +- .../structured/components/skeleton/code.mdx | 511 +-- .../components/status-tags/code.mdx | 225 +- .../structured/components/stepper/code.mdx | 154 +- .../structured/components/switch/code.mdx | 138 +- .../structured/components/tabs/code.mdx | 368 +- .../structured/components/text-field/code.mdx | 546 ++- .../structured/components/toasts/code.mdx | 713 +++- .../components/toggle-buttons/code.mdx | 1117 ++++-- .../structured/components/tooltips/code.mdx | 407 ++- .../structured/components/top-nav/code.mdx | 783 ++-- .../components/top-nav/guidance.mdx | 8 +- .../structured/components/typography/code.mdx | 184 +- .../components/StackblitzButton/index.tsx | 14 +- .../StackblitzButton/stackblitz-helpers.ts | 279 +- .../patterns/side-navigation-layout.mdx | 923 ++++- .../patterns/top-navigation-layout.mdx | 1301 +++++-- src/data/canary-component-names.json | 93 + src/icds-pages-data.json | 708 ++-- src/pages/footer-layout.tsx | 4 +- .../side-navigation-back-to-top-pattern.tsx | 52 +- .../side-navigation-page-header-pattern.tsx | 56 +- src/pages/side-navigation-pattern.tsx | 52 +- 56 files changed, 19986 insertions(+), 6266 deletions(-) create mode 100644 src/data/canary-component-names.json diff --git a/gatsby-node.js b/gatsby-node.js index a024c806f..a62ab24f5 100644 --- a/gatsby-node.js +++ b/gatsby-node.js @@ -1,4 +1,7 @@ -const path = require(`path`); +const path = require("path"); +const fs = require("fs"); +// eslint-disable-next-line import/no-extraneous-dependencies +const prettier = require("prettier"); // eslint-disable-next-line import/no-extraneous-dependencies const webpack = require("webpack"); const pagesConfig = require("./src/config"); @@ -236,6 +239,11 @@ exports.createResolvers = ({ createResolvers }) => { exports.onCreateWebpackConfig = ({ actions }) => { actions.setWebpackConfig({ + resolve: { + fallback: { + fs: false, + }, + }, plugins: [ /** * See line 203 of: @@ -277,3 +285,103 @@ exports.onCreateWebpackConfig = ({ actions }) => { ], }); }; + +exports.sourceNodes = () => { + // Find the name of the components in the @ukic* folders + const canaryReact = path.resolve( + __dirname, + "node_modules/@ukic/canary-react/dist/components.d.ts" + ); + const canaryWebComponents = path.resolve( + __dirname, + "node_modules/@ukic/canary-web-components/dist/types/components" + ); + const react = path.resolve( + __dirname, + "node_modules/@ukic/react/dist/components.d.ts" + ); + + // Get the names of components in the canary-web-components package + const canaryWebComponentsNames = fs + .readdirSync(canaryWebComponents, { withFileTypes: true }) + .filter((dirent) => dirent.isDirectory()) + .map((dirent) => dirent.name); + + const getComponentNames = (filePath, regex) => { + const fileContent = fs.readFileSync(filePath, "utf8"); + const componentNames = []; + let match = regex.exec(fileContent); + while (match !== null) { + componentNames.push(match[1]); + match = regex.exec(fileContent); + } + return componentNames; + }; + + const regex = /export declare const (\w+):/g; + // Read the contents of the canaryReact and react file + const canaryReactComponentNames = getComponentNames(canaryReact, regex); + const reactComponentNames = getComponentNames(react, regex); + + // Get the types of the components in the canary-web-components package + const getCanaryWebComponentTypes = (directory, componentNames) => { + const typesRegex = /export\s+type\s+(\w+)\s+=/g; + let canaryTypes = []; + + if (!directory || typeof directory !== "string") { + throw new Error("Invalid directory"); + } + + if (!Array.isArray(componentNames)) { + throw new Error("Invalid componentNames"); + } + + componentNames.forEach((componentName) => { + const componentDirectory = path.join(directory, componentName); + + const filesInDirectory = fs.readdirSync(componentDirectory); + + filesInDirectory.forEach((fileName) => { + if (fileName.endsWith(".types.d.ts")) { + const fileContent = fs.readFileSync( + path.join(componentDirectory, fileName), + "utf8" + ); + + let typesMatch = typesRegex.exec(fileContent); + while (typesMatch !== null) { + const exports = typesMatch[1] + .trim() + .split(",") + .map((item) => item.trim()); + canaryTypes = [...canaryTypes, ...exports]; + typesMatch = typesRegex.exec(fileContent); + } + } + }); + }); + return [...new Set(canaryTypes)]; + }; + + const data = { + canaryReactComponentNames, + canaryWebComponentsNames, + canaryTypes: getCanaryWebComponentTypes( + canaryWebComponents, + canaryWebComponentsNames + ), + reactComponentNames, + }; + const outputFilePath = path.resolve( + __dirname, + "./src/data/canary-component-names.json" + ); + if (!outputFilePath.startsWith(__dirname)) { + throw new Error("Invalid file path"); + } + + fs.writeFileSync( + outputFilePath, + prettier.format(JSON.stringify(data), { parser: "json" }) + ); +}; diff --git a/src/components/CodePreview/index.css b/src/components/CodePreview/index.css index d8f3a6e25..ad1436a6e 100644 --- a/src/components/CodePreview/index.css +++ b/src/components/CodePreview/index.css @@ -6,6 +6,10 @@ justify-content: space-between; } +.toggle-button-container { + margin: auto var(--ic-space-xs) auto 0; +} + .comp-preview { position: relative; border: 1px solid var(--ic-architectural-300); @@ -71,12 +75,8 @@ .snippet-container { display: flex; - justify-content: flex-end; background-color: var(--ic-architectural-40) !important; padding: var(--ic-space-xxs); -} - -.snippet-container.pattern { justify-content: space-between; } diff --git a/src/components/CodePreview/index.tsx b/src/components/CodePreview/index.tsx index 77f5a6448..b36072ae6 100644 --- a/src/components/CodePreview/index.tsx +++ b/src/components/CodePreview/index.tsx @@ -5,6 +5,8 @@ import React, { useState, Dispatch, SetStateAction, + useRef, + useEffect, } from "react"; import startCase from "lodash.startcase"; import { @@ -16,19 +18,40 @@ import { } from "@mdi/js"; import Icon from "@mdi/react"; import clsx from "clsx"; -import { SlottedSVG } from "@ukic/react"; +import { + IcButton, + IcTab, + IcTabContext, + IcTabGroup, + IcTabPanel, + IcToggleButton, + IcToggleButtonGroup, + SlottedSVG, +} from "@ukic/react"; import StackblitzButton, { StackblitzProps, } from "../../content/structured/patterns/components/StackblitzButton"; +import { useViewportWidth } from "../../utils/helpers"; import PageMetadataContext from "../../context/PageMetadata"; import "./index.css"; -import { useViewportWidth } from "../../utils/helpers"; +import { + createReactAppTsx, + createWebComponentsIndexHTML, +} from "../../content/structured/patterns/components/StackblitzButton/stackblitz-helpers"; -interface Snippet { - language: string; +interface LongCodeSnippet { + language: "jsx" | "tsx"; snippet: string; } +interface Snippet { + technology: string; + snippets: { + short?: string | undefined; + long: string | LongCodeSnippet[]; + }; +} + interface ComponentPreviewProps extends Partial { snippets?: Snippet[]; left?: boolean; @@ -37,26 +60,35 @@ interface ComponentPreviewProps extends Partial { children: ReactNode; style: CSSProperties; state: "none" | "good" | "bad"; + showStackblitzBtn: boolean; type?: string; } interface CodeSnippetProps extends Partial { code: string; + longCode: string; type?: string; show: boolean; setShow: Dispatch>; + showMore: boolean; + setShowMore: Dispatch>; showStackblitzBtn?: boolean; + selectedLanguage: "Typescript" | "Javascript"; } const CodeSnippet: React.FC = ({ code, + longCode, isWebComponents, type, show, setShow, + showMore, + setShowMore, showStackblitzBtn, projectTitle, projectDescription, + selectedLanguage, }) => { const viewportWidth = useViewportWidth(); const isLargeViewport: boolean = viewportWidth > 992; @@ -85,9 +117,9 @@ const CodeSnippet: React.FC = ({ )} )} -
+
{type === "pattern" && ( - = ({ height="24" path={!show ? mdiMenuDown : mdiMenuUp} /> - + + )} + {type !== "pattern" && ( + setShowMore(!showMore)} + > + Show {showMore ? "less" : "full"} code + + )}
{showStackblitzBtn && projectTitle !== undefined && ( )} - = ({ height="24" /> {isLargeViewport && "Copy code"} - +
@@ -147,11 +197,39 @@ const ComponentPreview: React.FC = ({ centered = true, style, state = "none", + showStackblitzBtn = true, projectTitle, projectDescription, type, }) => { + const viewportWidth = useViewportWidth(); + const isLargeViewport: boolean = viewportWidth > 992; + + const [tabCount, setTabCount] = useState(2); + const tabContextRef = useRef(null); + + useEffect(() => { + if (tabContextRef.current) { + const tabs = tabContextRef.current.querySelectorAll("ic-tab"); + setTabCount(tabs.length); + } + }, []); + + // Show/hide functionality for pattern code previews const [show, setShow] = useState(type !== "pattern"); + // Show more/less functionality for component code previews + const [showMore, setShowMore] = useState(false); + const [selectedTab, setSelectedTab] = useState<"Web component" | "React">( + tabCount === 1 ? "React" : "Web component" + ); + + const [selectedLanguage, setSelectedLanguage] = useState< + "Typescript" | "Javascript" + >("Typescript"); + + const tabSelectCallback = (ev: CustomEvent) => { + setSelectedTab(ev.detail.tabLabel); + }; const pageMetadata = React.useContext(PageMetadataContext); @@ -159,12 +237,115 @@ const ComponentPreview: React.FC = ({ if (type === "pattern") { return " pattern"; } - if (snippet.language === "React") { + if (snippet.technology === "React") { return " component"; } return ""; }; + // need to account for if the code starts with styling as opposed to a tag + + const formatLines = ( + lines: string[] | undefined, + snippet: Snippet, + longCodeIndex: number + ) => { + const formatWhiteSpace = (codeSnippet: Snippet, index: number) => { + if ( + selectedTab === "React" && + Array.isArray(codeSnippet.snippets.long) && + codeSnippet.snippets.long[index].snippet === "{shortCode}" + ) { + return `\t`; + } + return ``; + }; + + const newLines = lines ? [...lines] : []; + if (newLines.length > 0) { + for (let i = 1; i < newLines.length; i += 1) { + const whiteSpace = formatWhiteSpace(snippet, longCodeIndex); + newLines[i] = ` ${ + selectedTab === "Web component" ? ` ` : whiteSpace + }${newLines[i]}`; + } + } + return newLines.join("\n"); + }; + + const getCodeSnippetForWebComponent = ( + snippet: Snippet, + shortCodeSnippet: string + ) => { + let longCode = ""; + if ( + !Array.isArray(snippet.snippets.long) && + typeof snippet.snippets.long === "string" + ) { + longCode = snippet.snippets.long.replace( + "{shortCode}", + `${shortCodeSnippet}` + ); + } + + let codeSnippet; + if (showMore) { + codeSnippet = createWebComponentsIndexHTML(longCode); + } else if (type === "pattern") { + if (typeof snippet.snippets.long === "string") + codeSnippet = createWebComponentsIndexHTML(snippet.snippets.long); + } else { + codeSnippet = snippet.snippets.short; + } + + return { + longCode: createWebComponentsIndexHTML(longCode), + codeSnippet: codeSnippet || "", + }; + }; + + const getCodeSnippet = (snippet: Snippet) => { + const isLongCode = showMore || type === "pattern"; + const longCodeIndex = selectedLanguage === "Typescript" ? 0 : 1; + let shortCodeSnippet: string | undefined = ""; + if (type !== "pattern") shortCodeSnippet = snippet.snippets.short; + + shortCodeSnippet = formatLines( + shortCodeSnippet?.split("\n"), + snippet, + longCodeIndex + ); + + if (selectedTab === "Web component" && snippet.technology !== "React") { + return getCodeSnippetForWebComponent(snippet, shortCodeSnippet); + } + + if (Array.isArray(snippet.snippets.long)) { + let longCode = ""; + if ( + !Array.isArray(snippet.snippets.long[longCodeIndex].snippet) && + typeof snippet.snippets.long[longCodeIndex].snippet === "string" + ) { + longCode = createReactAppTsx( + snippet.snippets.long[longCodeIndex].snippet.replace( + "{shortCode}", + `${shortCodeSnippet}` + ), + pageMetadata.pageTitle, + longCodeIndex === 0 ? "tsx" : "jsx" + ); + } + return { + longCode, + codeSnippet: isLongCode ? longCode : snippet.snippets.short, + }; + } + return { + longCode: "error", + codeSnippet: "error", + }; + }; + return (

Interactive example

@@ -197,37 +378,99 @@ const ComponentPreview: React.FC = ({ {children}
{snippets && ( - +
- + {snippets.map((snippet, index) => ( - {snippet.language} + + {snippet.technology} + ))} - + +
+ {(selectedTab === "React" || tabCount === 1) && ( + + + setSelectedLanguage( + selectedLanguage === "Typescript" + ? "Javascript" + : "Typescript" + ) + } + > + + + + + + setSelectedLanguage( + selectedLanguage === "Typescript" + ? "Javascript" + : "Typescript" + ) + } + > + + + + + + )} +
{snippets.map((snippet, index) => ( - + - + ))} - + )}
); diff --git a/src/content/structured/components/accordion/code.mdx b/src/content/structured/components/accordion/code.mdx index b4420e5a6..6276504e6 100644 --- a/src/content/structured/components/accordion/code.mdx +++ b/src/content/structured/components/accordion/code.mdx @@ -1,7 +1,7 @@ --- path: "/components/accordion/code" -date: "2023-10-11" +date: "2024-05-02" title: "Accordion" @@ -30,8 +30,9 @@ import { export const snippets = [ { - language: "Web component", - snippet: ` + technology: "Web component", + snippets: { + short: ` A blend of different black teas. @@ -40,12 +41,14 @@ export const snippets = [ A tea blend that has been flavoured with oil of bergamot. - -`, +`, + long: `{shortCode}`, + }, }, { - language: "React", - snippet: ` + technology: "React", + snippets: { + short: ` A blend of different black teas. @@ -54,8 +57,22 @@ export const snippets = [ A tea blend that has been flavoured with oil of bergamot. - -`, +`, + long: [ + { + language: "Typescript", + snippet: `<> + {shortCode} +`, + }, + { + language: "Javascript", + snippet: `<> + {shortCode} +`, + }, + ], + }, }, ]; @@ -84,70 +101,89 @@ export const snippets = [ export const withIcon = [ { - language: "Web component", - snippet: ` - - - + technology: "Web component", + snippets: { + short: ` + + + A blend of different black teas. - - - - A tea blend that has been flavoured with oil of bergamot. - - `, + slot="icon" + width="24" + height="24" + viewBox="0 0 24 24" + fill="currentColor" + xmlns="http://www.w3.org/2000/svg" + > + + + + A tea blend that has been flavoured with oil of bergamot. + +`, + long: `{shortCode}`, + }, }, { - language: "React", - snippet: ` + technology: "React", + snippets: { + short: ` - - + slot="icon" + width="24" + height="24" + viewBox="0 0 24 24" + fill="currentColor" + xmlns="http://www.w3.org/2000/svg" + > + + A blend of different black teas. - - - - A tea blend that has been flavoured with oil of bergamot. - - `, + slot="icon" + width="24" + height="24" + viewBox="0 0 24 24" + fill="currentColor" + xmlns="http://www.w3.org/2000/svg" + > + + + + A tea blend that has been flavoured with oil of bergamot. + +`, + long: [ + { + language: "Typescript", + snippet: `<> + {shortCode} +`, + }, + { + language: "Javascript", + snippet: `<> + {shortCode} +`, + }, + ], + }, }, ]; @@ -202,8 +238,9 @@ export const withIcon = [ export const groupTitle = [ { - language: "Web component", - snippet: ` + technology: "Web component", + snippets: { + short: ` An espresso-based drink that is traditionally prepared with steamed milk foam. @@ -215,10 +252,13 @@ export const groupTitle = [ `, + long: `{shortCode}`, + }, }, { - language: "React", - snippet: ` + technology: "React", + snippets: { + short: ` An espresso-based drink that is traditionally prepared with steamed milk foam. @@ -230,6 +270,17 @@ export const groupTitle = [ `, + long: [ + { + language: "Typescript", + snippet: `{shortCode}`, + }, + { + language: "Javascript", + snippet: `{shortCode}`, + }, + ], + }, }, ]; @@ -237,8 +288,9 @@ export const groupTitle = [ export const snippetsNested = [ { - language: "Web component", - snippet: ` + technology: "Web component", + snippets: { + short: ` An espresso-based drink that is traditionally prepared with steamed milk foam. @@ -257,10 +309,13 @@ export const snippetsNested = [ `, + long: `{shortCode}`, + }, }, { - language: "React", - snippet: ` + technology: "React", + snippets: { + short: ` An espresso-based drink that is traditionally prepared with steamed milk foam. @@ -279,6 +334,17 @@ export const snippetsNested = [ `, + long: [ + { + language: "Typescript", + snippet: `{shortCode}`, + }, + { + language: "Javascript", + snippet: `{shortCode}`, + }, + ], + }, }, ]; diff --git a/src/content/structured/components/alerts/code.mdx b/src/content/structured/components/alerts/code.mdx index 8b1e640a4..ce327e0ea 100644 --- a/src/content/structured/components/alerts/code.mdx +++ b/src/content/structured/components/alerts/code.mdx @@ -1,7 +1,7 @@ --- path: "/components/alert/code" -date: "2024-02-02" +date: "2024-05-02" title: "Alert" @@ -25,20 +25,77 @@ import { IcAlert, IcButton, IcLink } from "@ukic/react"; export const snippetsDefault = [ { - language: "Web component", - snippet: ` - - - -`, + technology: "Web component", + snippets: { + short: ` + + + +`, + long: `{shortCode}`, + }, }, { - language: "React", - snippet: ` - - - -`, + technology: "React", + snippets: { + short: ` + + + +`, + long: [ + { + language: "Typescript", + snippet: `<> + {shortCode} +`, + }, + { + language: "Javascript", + snippet: `<> + {shortCode} +`, + }, + ], + }, }, ]; @@ -84,12 +141,35 @@ export const snippetsDefault = [ export const snippetsDismissible = [ { - language: "Web component", - snippet: ``, + technology: "Web component", + snippets: { + short: ``, + long: `{shortCode}`, + }, }, { - language: "React", - snippet: ``, + technology: "React", + snippets: { + short: ``, + long: [ + { + language: "Typescript", + snippet: `{shortCode}`, + }, + { + language: "Javascript", + snippet: `{shortCode}`, + }, + ], + }, }, ]; @@ -105,22 +185,47 @@ export const snippetsDismissible = [ export const snippetsWithAction = [ { - language: "Web component", - snippet: ` - View Drinks - + technology: "Web component", + snippets: { + short: ` + View Drinks`, + long: `{shortCode} `, + }, }, { - language: "React", - snippet: ` - console.log(ev)}>View Drinks + technology: "React", + snippets: { + short: ` + console.log(ev)} + > + View Drinks + `, + long: [ + { + language: "Typescript", + snippet: `{shortCode}`, + }, + { + language: "Javascript", + snippet: `{shortCode}`, + }, + ], + }, }, ]; @@ -145,21 +250,37 @@ export const snippetsWithAction = [ export const snippetsTitleAbove = [ { - language: "Web component", - snippet: ` - `, + technology: "Web component", + snippets: { + short: ``, + long: `{shortCode}`, + }, }, { - language: "React", - snippet: ``, + technology: "React", + snippets: { + short: ``, + long: [ + { + language: "Typescript", + snippet: `{shortCode}`, + }, + { + language: "Javascript", + snippet: `{shortCode}`, + }, + ], + }, }, ]; @@ -176,19 +297,35 @@ export const snippetsTitleAbove = [ export const snippetsResponsiveTitle = [ { - language: "Web component", - snippet: ` - `, + technology: "Web component", + snippets: { + short: ``, + long: `{shortCode}`, + }, }, { - language: "React", - snippet: ``, + technology: "React", + snippets: { + short: ``, + long: [ + { + language: "Typescript", + snippet: `{shortCode}`, + }, + { + language: "Javascript", + snippet: `{shortCode}`, + }, + ], + }, }, ]; @@ -204,16 +341,30 @@ export const snippetsResponsiveTitle = [ export const snippetsCustomMessage = [ { - language: "Web component", - snippet: ` - Go to our coffee page to learn more. -`, + technology: "Web component", + snippets: { + short: ` + Go to our coffee page to learn more.`, + long: `{shortCode}`, + }, }, { - language: "React", - snippet: ` + technology: "React", + snippets: { + short: ` Go to our coffee page to learn more. `, + long: [ + { + language: "Typescript", + snippet: `{shortCode}`, + }, + { + language: "Javascript", + snippet: `{shortCode}`, + }, + ], + }, }, ]; diff --git a/src/content/structured/components/back-to-top/code.mdx b/src/content/structured/components/back-to-top/code.mdx index e15eb5c69..d280c628a 100644 --- a/src/content/structured/components/back-to-top/code.mdx +++ b/src/content/structured/components/back-to-top/code.mdx @@ -1,7 +1,7 @@ --- path: "/components/back-to-top/code" -date: "2023-02-03" +date: "2024-05-02" title: "Back to top" @@ -23,18 +23,35 @@ import { IcButton } from "@ukic/react"; export const snippets = [ { - language: "Web component", - snippet: ``, + technology: "Web component", + snippets: { + short: ``, + long: `{shortCode}`, + }, }, { - language: "React", - snippet: ``, + technology: "React", + snippets: { + short: ``, + long: [ + { + language: "Typescript", + snippet: `{shortCode}`, + }, + { + language: "Javascript", + snippet: `{shortCode}`, + }, + ], + }, }, ]; ## Component demo - +A 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). + + { diff --git a/src/content/structured/components/badge/code.mdx b/src/content/structured/components/badge/code.mdx index d5bccc12b..ef6ed2431 100644 --- a/src/content/structured/components/badge/code.mdx +++ b/src/content/structured/components/badge/code.mdx @@ -1,7 +1,7 @@ --- path: "/components/badge/code" -date: "2024-02-02" +date: "2024-05-02" title: "Badge" @@ -35,35 +35,71 @@ import { useState } from "react"; export const snippetsDefault = [ { - language: "Web component", - snippet: ` - + - + > Coffee orders `, + long: `.parent-container { + padding: 16px; + } + + +
+ {shortCode} +
`, + }, }, { - language: "React", - snippet: ` - + technology: "React", + snippets: { + short: ` + Coffee orders `, + long: [ + { + language: "Typescript", + snippet: `const useStyles = createUseStyles({ + parentContainer: { + padding: "16px", + }, +}); +const classes = useStyles(); +return ( +
+ {shortCode} +
+)`, + }, + { + language: "Javascript", + snippet: `const useStyles = createUseStyles({ + parentContainer: { + padding: "16px", + }, +}); +const classes = useStyles(); +return ( +
+ {shortCode} +
+)`, + }, + ], + }, }, ]; - - + + Coffee orders @@ -78,23 +114,37 @@ export const snippetsDefault = [ export const snippetsSizes = [ { - language: "Web component", - snippet: ` - + technology: "Web component", + snippets: { + short: ` + Coffee orders - + Coffee orders - + Coffee orders `, + long: `.parent-container { + display: flex; + flex-wrap: wrap; + padding: 16px; + gap: 16px; + } + + +
+ {shortCode} +
`, + }, }, { - language: "React", - snippet: ` + technology: "React", + snippets: { + short: ` Coffee orders @@ -106,15 +156,52 @@ export const snippetsSizes = [ Coffee orders `, + long: [ + { + language: "Typescript", + snippet: `const useStyles = createUseStyles({ + parentContainer: { + display: "flex", + flexWrap: "wrap", + padding: "16px", + gap: "16px", + }, +}); +const classes = useStyles(); +return ( +
+ {shortCode} +
+)`, + }, + { + language: "Javascript", + snippet: `const useStyles = createUseStyles({ + parentContainer: { + display: "flex", + flexWrap: "wrap", + padding: "16px", + gap: "16px", + }, +}); +const classes = useStyles(); +return ( +
+ {shortCode} +
+)`, + }, + ], + }, }, ]; - - + + Coffee orders - + Coffee orders @@ -128,59 +215,110 @@ export const snippetsSizes = [ export const snippetsStatus = [ { - language: "Web component", - snippet: ` + technology: "Web component", + snippets: { + short: ` Coffee orders - + Coffee orders - + Coffee orders - + Coffee orders `, + long: `.parent-container { + display: flex; + flex-wrap: wrap; + padding: 16px; + gap: 16px; + } + + +
+ {shortCode} +
`, + }, }, { - language: "React", - snippet: ` + technology: "React", + snippets: { + short: ` Coffee orders - + Coffee orders - + Coffee orders - + Coffee orders `, + long: [ + { + language: "Typescript", + snippet: `const useStyles = createUseStyles({ + parentContainer: { + display: "flex", + flexWrap: "wrap", + padding: "16px", + gap: "16px", + }, +}); +const classes = useStyles(); +return ( +
+ {shortCode} +
+)`, + }, + { + language: "Javascript", + snippet: `const useStyles = createUseStyles({ + parentContainer: { + display: "flex", + flexWrap: "wrap", + padding: "16px", + gap: "16px", + }, +}); +const classes = useStyles(); +return ( +
+ {shortCode} +
+)`, + }, + ], + }, }, ]; - - + + Coffee orders - + Coffee orders - + Coffee orders - + Coffee orders @@ -190,23 +328,24 @@ export const snippetsStatus = [ export const snippetsInformation = [ { - language: "Web component", - snippet: ` + technology: "Web component", + snippets: { + short: ` Coffee orders - + Coffee orders - + @@ -217,231 +356,354 @@ export const snippetsInformation = [ Coffee orders `, + long: `.parent-container { + display: flex; + flex-wrap: wrap; + padding: 16px; + gap: 16px; + } + + +
+ {shortCode} +
`, + }, }, { - language: "React", - snippet: ` + technology: "React", + snippets: { + short: ` Coffee orders - + Coffee orders - + - - + Coffee orders `, + long: [ + { + language: "Typescript", + snippet: `const useStyles = createUseStyles({ + parentContainer: { + display: "flex", + flexWrap: "wrap", + padding: "16px", + gap: "16px", }, -]; - - -
- - - Coffee orders - +}); +const classes = useStyles(); +return ( +
+ {shortCode}
-
- - - Coffee orders - -
-
- - - - - - - - Coffee orders - +)`, + }, + { + language: "Javascript", + snippet: `const useStyles = createUseStyles({ + parentContainer: { + display: "flex", + flexWrap: "wrap", + padding: "16px", + gap: "16px", + }, +}); +const classes = useStyles(); +return ( +
+ {shortCode}
+)`, + }, + ], + }, + }, +]; + + + + + Coffee orders + + + + Coffee orders + + + + + + + + + Coffee orders + ### Max number export const snippetsMaxNumber = [ { - language: "Web component", - snippet: `
- - - - Coffee orders - -
`, + technology: "Web component", + snippets: { + short: ` + + Coffee orders +`, + long: `.parent-container { + padding: 16px; + } + + +
+ {shortCode} +
`, + }, }, { - language: "React", - snippet: `
- - - Coffee orders - -
`, + technology: "React", + snippets: { + short: ` + + Coffee orders +`, + long: [ + { + language: "Typescript", + snippet: `const useStyles = createUseStyles({ + parentContainer: { + padding: "16px", + }, +}); +const classes = useStyles(); +return ( +
+ {shortCode} +
+)`, + }, + { + language: "Javascript", + snippet: `const useStyles = createUseStyles({ + parentContainer: { + padding: "16px", + }, +}); +const classes = useStyles(); +return ( +
+ {shortCode} +
+)`, + }, + ], + }, }, ]; -
- - - Coffee orders - -
+ + + Coffee orders + ### Positioning export const snippetsNear = [ { - language: "Web component", - snippet: `
- - - - - - - - - - - - - - -
`, + technology: "Web component", + snippets: { + short: ` + + + + + + + + + + + + +`, + long: `.chip-container { + display: flex; + flex-wrap: wrap; + padding: 16px; + gap: 16px; + } + + +
+ {shortCode} +
`, + }, }, { - language: "React", - snippet: `
- + technology: "React", + snippets: { + short: ` + + + + + + + + + + + + +`, + long: [ + { + language: "Typescript", + snippet: `const useStyles = createUseStyles({ + chipContainer: { + display: "flex", + flexWrap: "wrap", + padding: "16px", + gap: "16px", + }, +}); +const classes = useStyles(); +return ( +
+ {shortCode} +
+)`, + }, + { + language: "Javascript", + snippet: `const useStyles = createUseStyles({ + chipContainer: { + display: "flex", + flexWrap: "wrap", + padding: "16px", + gap: "16px", + }, +}); +const classes = useStyles(); +return ( +
+ {shortCode} +
+)`, + }, + ], + }, + }, +]; + + + - - - + + - + - - - - + + + -
`, - }, -]; - - -
-
- - - - - - - - - - - - - - -
-
### Position inline export const snippetsInline = [ { - language: "Web component", - snippet: ` + technology: "Web component", + snippets: { + short: ` - About + + About - Ingredients + Ingredients - Orders - + > + Orders About page Ingredients page Orders page `, + long: `{shortCode}`, + }, }, { - language: "React", - snippet: ` + technology: "React", + snippets: { + short: ` - About + About - Ingredients + Ingredients - Orders + Orders About page Ingredients page Orders page `, + long: [ + { + language: "Typescript", + snippet: `{shortCode}`, + }, + { + language: "Javascript", + snippet: `{shortCode}`, + }, + ], + }, }, ]; @@ -516,45 +792,83 @@ Click the button to hide and show the badge. export const snippetsHideBadge = [ { - language: "Web component", - snippet: ` -
- - - Coffee orders - -
`, + + +
+ {shortCode} +
+ `, + }, }, { - language: "React", - snippet: `export const ToggleBadge = () => { - const [showBadge, setShowBadge] = useState(false); - const handleShowHideBadge = () => { - setShowBadge(!showBadge); - }; - return ( -
- - - Coffee orders - -
- ); -};`, + technology: "React", + snippets: { + short: ` + + Coffee orders +`, + long: [ + { + language: "Typescript", + snippet: `const [showBadge, setShowBadge] = useState(false); +const handleShowHideBadge = () => { + setShowBadge(!showBadge); +}; +const useStyles = createUseStyles({ + parentContainer: { + padding: "16px", + }, +}); +const classes = useStyles(); +return ( +
+ {shortCode} +
+)`, + }, + { + language: "Javascript", + snippet: `const [showBadge, setShowBadge] = useState(false); +const handleShowHideBadge = () => { + setShowBadge(!showBadge); +}; +const useStyles = createUseStyles({ + parentContainer: { + padding: "16px", + }, +}); +const classes = useStyles(); +return ( +
+ {shortCode} +
+)`, + }, + ], + }, }, ]; @@ -592,49 +906,85 @@ export const ToggleBadge = () => { export const snippetsAccessibleLabel = [ { - language: "Web component", - snippet: `
- - - - Coffee orders - -
`, + technology: "Web component", + snippets: { + short: ` + + + Coffee orders +`, + long: `.parent-container { + padding: 16px; +} + + +
+ {shortCode} +
`, + }, }, { - language: "React", - snippet: `
- + technology: "React", + snippets: { + short: ` + + Coffee orders +`, + long: [ + { + language: "Typescript", + snippet: `const useStyles = createUseStyles({ + parentContainer: { + padding: "16px", + }, +}); +const classes = useStyles(); +return ( +
+ {shortCode} +
+)`, + }, + { + language: "Javascript", + snippet: `const useStyles = createUseStyles({ + parentContainer: { + padding: "16px", + }, +}); +const classes = useStyles(); +return ( +
+ {shortCode} +
+)`, + }, + ], + }, + }, +]; + + + Coffee orders -
`, - }, -]; - - -
- - - Coffee orders - -
diff --git a/src/content/structured/components/breadcrumbs/code.mdx b/src/content/structured/components/breadcrumbs/code.mdx index e95699712..e2f899c68 100644 --- a/src/content/structured/components/breadcrumbs/code.mdx +++ b/src/content/structured/components/breadcrumbs/code.mdx @@ -1,7 +1,7 @@ --- path: "/components/breadcrumb/code" -date: "2024-02-02" +date: "2024-05-02" title: "Breadcrumb" @@ -27,8 +27,9 @@ import { NavLink, MemoryRouter } from "react-router-dom"; export const snippets = [ { - language: "Web component", - snippet: ` + technology: "Web component", + snippets: { + short: ` `, + long: `{shortCode}`, + }, }, { - language: "React", - snippet: ` + technology: "React", + snippets: { + short: ` `, + long: [ + { + language: "Typescript", + snippet: `{shortCode}`, + }, + { + language: "Javascript", + snippet: `{shortCode}`, + }, + ], + }, }, ]; @@ -88,8 +103,9 @@ export const snippets = [ export const back = [ { - language: "Web component", - snippet: ` + technology: "Web component", + snippets: { + short: ` `, + long: `{shortCode}`, + }, }, { - language: "React", - snippet: ` + technology: "React", + snippets: { + short: ` `, + long: [ + { + language: "Typescript", + snippet: `{shortCode}`, + }, + { + language: "Javascript", + snippet: `{shortCode}`, + }, + ], + }, }, ]; @@ -139,8 +169,9 @@ export const back = [ export const withIcons = [ { - language: "Web component", - snippet: ` + technology: "Web component", + snippets: { + short: ` `, + long: `{shortCode}`, + }, }, { - language: "React", - snippet: ` + technology: "React", + snippets: { + short: ` `, + long: [ + { + language: "Typescript", + snippet: `{shortCode}`, + }, + { + language: "Javascript", + snippet: `{shortCode}`, + }, + ], + }, }, ]; @@ -311,29 +356,44 @@ export const withIcons = [ export const collapsed = [ { - language: "Web component", - snippet: ` + technology: "Web component", + snippets: { + short: ` - + current="true" + page-title="Coffee" + href="#" + > + `, + long: `{shortCode}`, + }, }, { - language: "React", - snippet: ` - - - + technology: "React", + snippets: { + short: ` + + + `, + long: [ + { + language: "Typescript", + snippet: `{shortCode}`, + }, + { + language: "Javascript", + snippet: `{shortCode}`, + }, + ], + }, }, ]; @@ -362,8 +422,9 @@ export const collapsed = [ export const withReactRouter = [ { - language: "React", - snippet: ` + technology: "React", + snippets: { + short: ` @@ -381,8 +442,18 @@ export const withReactRouter = [ - -`, +`, + long: [ + { + language: "Typescript", + snippet: `{shortCode}`, + }, + { + language: "Javascript", + snippet: `{shortCode}`, + }, + ], + }, }, ]; diff --git a/src/content/structured/components/buttons/code.mdx b/src/content/structured/components/buttons/code.mdx index c516f4ec6..adbad6a10 100644 --- a/src/content/structured/components/buttons/code.mdx +++ b/src/content/structured/components/buttons/code.mdx @@ -1,7 +1,7 @@ --- path: "/components/button/code" -date: "2024-03-13" +date: "2024-05-02" title: "Button" @@ -25,24 +25,77 @@ import { IcButton } from "@ukic/react"; export const snippetsDefault = [ { - language: "Web component", - snippet: `Add to order + technology: "Web component", + snippets: { + short: `Add to order View coffees Find out more -Cancel order -`, +Cancel order`, + long: `.btn-container { + display: flex; + flex-wrap: wrap; + gap: 8px; + padding: 16px; + } + + +
+ {shortCode} +
+ `, + }, }, { - language: "React", - snippet: ` console.log(ev)}>Add to order - View coffees - Find out more - Cancel order`, + technology: "React", + snippets: { + short: ` console.log(ev)}> + Add to order + +View coffees +Find out more +Cancel order`, + long: [ + { + language: "Typescript", + snippet: `const useStyles = createUseStyles({ + btnContainer: { + display: "flex", + flexWrap: "wrap", + gap: "8px", + padding: "16px", + }, +}); +const classes = useStyles(); +return ( +
+ {shortCode} +
+)`, + }, + { + language: "Javascript", + snippet: `const useStyles = createUseStyles({ + btnContainer: { + display: "flex", + flexWrap: "wrap", + gap: "8px", + padding: "16px", + }, +}); +const classes = useStyles(); +return ( +
+ {shortCode} +
+)`, + }, + ], + }, }, ]; @@ -65,16 +118,67 @@ export const snippetsDefault = [ export const snippetsOtherStates = [ { - language: "Web component", - snippet: `Add to order + technology: "Web component", + snippets: { + short: `Add to order Loading button Add to order`, + long: `.btn-container { + display: flex; + flex-wrap: wrap; + gap: 8px; + padding: 16px; + } + + +
+ {shortCode} +
`, + }, }, { - language: "React", - snippet: `Add to order + technology: "React", + snippets: { + short: `Add to order Loading button Add to order`, + long: [ + { + language: "Typescript", + snippet: `const useStyles = createUseStyles({ + btnContainer: { + display: "flex", + flexWrap: "wrap", + gap: "8px", + padding: "16px", + }, +}); +const classes = useStyles(); +return ( +
+ {shortCode} +
+)`, + }, + { + language: "Javascript", + snippet: `const useStyles = createUseStyles({ + btnContainer: { + display: "flex", + flexWrap: "wrap", + gap: "8px", + padding: "16px", + }, +}); +const classes = useStyles(); +return ( +
+ {shortCode} +
+)`, + }, + ], + }, }, ]; @@ -94,30 +198,34 @@ export const snippetsOtherStates = [ export const snippetsWithIcon = [ { - language: "Web component", - snippet: ` + technology: "Web component", + snippets: { + short: ` Refresh order status `, + long: `{shortCode}`, + }, }, { - language: "React", - snippet: ` + technology: "React", + snippets: { + short: ` @@ -125,6 +233,17 @@ export const snippetsWithIcon = [ Refresh order status `, + long: [ + { + language: "Typescript", + snippet: `{shortCode}`, + }, + { + language: "Javascript", + snippet: `{shortCode}`, + }, + ], + }, }, ]; @@ -134,9 +253,9 @@ export const snippetsWithIcon = [ @@ -149,34 +268,49 @@ export const snippetsWithIcon = [ export const snippetsIcon = [ { - language: "Web component", - snippet: ` + technology: "Web component", + snippets: { + short: ` `, + long: `{shortCode}`, + }, }, { - language: "React", - snippet: ` + technology: "React", + snippets: { + short: ` `, + long: [ + { + language: "Typescript", + snippet: `{shortCode}`, + }, + { + language: "Javascript", + snippet: `{shortCode}`, + }, + ], + }, }, ]; @@ -184,9 +318,9 @@ export const snippetsIcon = [ @@ -199,16 +333,67 @@ export const snippetsIcon = [ export const snippetsSizing = [ { - language: "Web component", - snippet: `Add to order + technology: "Web component", + snippets: { + short: `Add to order Add to order Add to order`, + long: `.btn-container { + display: flex; + flex-wrap: wrap; + gap: 8px; + padding: 16px; + } + + +
+ {shortCode} +
`, + }, }, { - language: "React", - snippet: `Add to order + technology: "React", + snippets: { + short: `Add to order Add to order Add to order`, + long: [ + { + language: "Typescript", + snippet: `const useStyles = createUseStyles({ + btnContainer: { + display: "flex", + flexWrap: "wrap", + gap: "8px", + padding: "16px", + }, +}); +const classes = useStyles(); +return ( +
+ {shortCode} +
+)`, + }, + { + language: "Javascript", + snippet: `const useStyles = createUseStyles({ + btnContainer: { + display: "flex", + flexWrap: "wrap", + gap: "8px", + padding: "16px", + }, +}); +const classes = useStyles(); +return ( +
+ {shortCode} +
+)`, + }, + ], + }, }, ]; @@ -226,20 +411,67 @@ export const snippetsSizing = [ export const snippetsColour = [ { - language: "Web component", - snippet: ` - Add to order - + technology: "Web component", + snippets: { + short: `Add to order Add to order Add to order`, + long: `.btn-container { + display: flex; + flex-wrap: wrap; + gap: 8px; + padding: 16px; + } + + +
+ {shortCode} +
`, + }, }, { - language: "React", - snippet: ` - Add to order - + technology: "React", + snippets: { + short: `Add to order Add to order Add to order`, + long: [ + { + language: "Typescript", + snippet: `const useStyles = createUseStyles({ + btnContainer: { + display: "flex", + flexWrap: "wrap", + gap: "8px", + padding: "16px", + }, +}); +const classes = useStyles(); +return ( +
+ {shortCode} +
+)`, + }, + { + language: "Javascript", + snippet: `const useStyles = createUseStyles({ + btnContainer: { + display: "flex", + flexWrap: "wrap", + gap: "8px", + padding: "16px", + }, +}); +const classes = useStyles(); +return ( +
+ {shortCode} +
+)`, + }, + ], + }, }, ]; @@ -255,83 +487,136 @@ export const snippetsColour = [ ### File upload -export const FileUpload = () => { - function updateFileList(fileArray) { - const fileList = []; - Array.from(fileArray).forEach((file) => { - fileList.push(file.name); - }); - return fileList.join(", "); - } - return ( - - document.addEventListener("icFileSelection", (event) => - console.log(updateFileList(event.detail)) - ) - } - > - Upload File - - ); -}; - export const snippetsFileUpload = [ { - language: "Web component", - snippet: ` - Upload File + Upload a file -`, + document + .querySelector("#file-button-multiple") + .addEventListener("icFileSelection", (ev) => { + console.log("Multiple files upload", ev.detail); + }); + `, + }, }, { - language: "React", - snippet: `export const FileUpload = () => { - function updateFileList(fileArray) { - const fileList = []; - Array.from(fileArray).forEach((file) => { - fileList.push(file.name); - }); - return fileList.join(", "); + technology: "React", + snippets: { + short: ` + console.log("Single file upload", event.detail) } - return ( - - document.addEventListener("icFileSelection", (event) => - console.log(updateFileList(event.detail)) - ) - } - > - Upload File - - ); -};`, +> + Upload a file + + + console.log("Multiple files upload", event.detail) + } +> + Upload multiple files +`, + long: [ + { + language: "Typescript", + snippet: `const useStyles = createUseStyles({ + btnContainer: { + display: "flex", + flexWrap: "wrap", + gap: "8px", + padding: "16px", + }, +}); +const classes = useStyles(); +return ( +
+ {shortCode} +
+)`, + }, + { + language: "Javascript", + snippet: `const useStyles = createUseStyles({ + btnContainer: { + display: "flex", + flexWrap: "wrap", + gap: "8px", + padding: "16px", + }, +}); +const classes = useStyles(); +return ( +
+ {shortCode} +
+)`, + }, + ], + }, }, ]; - - + + + console.log("Single file upload", event.detail) + } + > + Upload a file + + + console.log("Multiple files upload", event.detail) + } + > + Upload multiple files + diff --git a/src/content/structured/components/cards/code.mdx b/src/content/structured/components/cards/code.mdx index 967c78174..d243b12f2 100644 --- a/src/content/structured/components/cards/code.mdx +++ b/src/content/structured/components/cards/code.mdx @@ -1,7 +1,7 @@ --- path: "/components/card/code" -date: "2024-02-02" +date: "2024-05-02" title: "Card" @@ -32,9 +32,9 @@ export const CardIcon = () => ( @@ -49,7 +49,6 @@ export const InteractionIcon = () => ( width="16" height="16" fill="currentColor" - class="bi bi-three-dots-vertical" viewBox="0 0 16 16" > @@ -60,138 +59,192 @@ export const InteractionIcon = () => ( export const snippets = [ { - language: "Web component", - snippet: ` + technology: "Web component", + snippets: { + short: ` - - - - - - - - - - - - - - - - - - + -
- Accept - Cancel -
- - To cancel your order click cancel. - + + + + + + + + + + + + + + + + + +
+ Accept + Cancel +
+ + To cancel your order click cancel. + `, + long: `ic-card { + width: 360px; + } + .interaction-area { + display: flex; + gap: 16px; + } + .card-image { + height: 100%; + width: 100%; + max-height: 20.375rem; + max-width: 20.375rem; + } + + + {shortCode}`, + }, }, { - language: "React", - snippet: ` - - - + technology: "React", + snippets: { + short: ` + + + - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + +
- Accept - Cancel -
- - To cancel your order click cancel. - + slot="interaction-controls" + className={classes.interactionArea}> + Accept + Cancel +
+ + To cancel your order click cancel. + `, + long: [ + { + language: "Typescript", + snippet: `const useStyles = createUseStyles({ + card: { + width: "360px", + }, + cardImage: { + height: "100%", + width: "100%", + maxHeight: "20.375rem", + maxWidth: "20.375rem", + }, + interactionArea: { + display: "flex", + gap: "16px", + }, +}); +const classes = useStyles(); +return ( + {shortCode} +)`, + }, + { + language: "Javascript", + snippet: `const useStyles = createUseStyles({ + card: { + width: "360px", + }, + cardImage: { + height: "100%", + width: "100%", + maxHeight: "20.375rem", + maxWidth: "20.375rem", + }, + interactionArea: { + display: "flex", + gap: "16px", + }, +}); +const classes = useStyles(); +return ( + {shortCode} +)`, + }, + ], + }, }, ]; @@ -244,9 +297,9 @@ export const snippets = [ @@ -271,12 +324,27 @@ export const snippets = [ export const headingOnly = [ { - language: "Web component", - snippet: ``, + technology: "Web component", + snippets: { + short: ``, + long: `{shortCode}`, + }, }, { - language: "React", - snippet: ``, + technology: "React", + snippets: { + short: ``, + long: [ + { + language: "Typescript", + snippet: `{shortCode}`, + }, + { + language: "Javascript", + snippet: `{shortCode}`, + }, + ], + }, }, ]; @@ -288,35 +356,49 @@ export const headingOnly = [ export const withIcon = [ { - language: "Web component", - snippet: ` - + technology: "Web component", + snippets: { + short: ` `, + long: `{shortCode}`, + }, }, { - language: "React", - snippet: ` + technology: "React", + snippets: { + short: ` `, + long: [ + { + language: "Typescript", + snippet: `{shortCode}`, + }, + { + language: "Javascript", + snippet: `{shortCode}`, + }, + ], + }, }, ]; @@ -325,9 +407,9 @@ export const withIcon = [ @@ -339,34 +421,49 @@ export const withIcon = [ export const withMessage = [ { - language: "Web component", - snippet: ` + technology: "Web component", + snippets: { + short: ` `, + long: `{shortCode}`, + }, }, { - language: "React", - snippet: ` + technology: "React", + snippets: { + short: ` `, + long: [ + { + language: "Typescript", + snippet: `{shortCode}`, + }, + { + language: "Javascript", + snippet: `{shortCode}`, + }, + ], + }, }, ]; @@ -378,9 +475,9 @@ export const withMessage = [ @@ -392,40 +489,57 @@ export const withMessage = [ export const withSubHeading = [ { - language: "Web component", - snippet: ` + message="Extras: Double espresso shot and oat milk." +> `, + long: `{shortCode}`, + }, }, { - language: "React", - snippet: ` + message="Extras: Double espresso shot and oat milk." +> `, + long: [ + { + language: "Typescript", + snippet: `{shortCode}`, + }, + { + language: "Javascript", + snippet: `{shortCode}`, + }, + ], + }, }, ]; @@ -438,9 +552,9 @@ export const withSubHeading = [ @@ -452,21 +566,23 @@ export const withSubHeading = [ export const interactionButton = [ { - language: "Web component", - snippet: ` - - - + message="Extras: Double espresso shot and oat milk." +> + + + `, + long: `{shortCode}`, + }, }, { - language: "React", - snippet: ` - - - + message="Extras: Double espresso shot and oat milk." +> + + + `, + long: [ + { + language: "Typescript", + snippet: `{shortCode}`, + }, + { + language: "Javascript", + snippet: `{shortCode}`, + }, + ], + }, }, ]; @@ -523,9 +652,9 @@ export const interactionButton = [ @@ -540,42 +669,59 @@ export const interactionButton = [ export const adornment = [ { - language: "Web component", - snippet: ` - - - + message="Extras: Double espresso shot and oat milk." +> + + + `, + long: `{shortCode}`, + }, }, { - language: "React", - snippet: ` - - - + message="Extras: Double espresso shot and oat milk." +> + + + `, + long: [ + { + language: "Typescript", + snippet: `{shortCode}`, + }, + { + language: "Javascript", + snippet: `{shortCode}`, + }, + ], + }, }, ]; @@ -588,9 +734,9 @@ export const adornment = [ @@ -608,120 +754,149 @@ export const adornment = [ export const topImage = [ { - language: "Web component", - snippet: ` - - - - - - - - - - - - - - - +> + + + + + + + + + + + + + + + + + + + - + - - - - - + `, + long: `ic-card { + width: 360px; + } + .card-image { + height: 100%; + width: 100%; + maxHeight: 20.375rem; + maxWidth: 20.375rem; + } + + + {shortCode}`, + }, }, { - language: "React", - snippet: ` - - - - - - - - - - - - - - - + className={classes.card} +> + + + + + + + + + + + + + + + + + + + - + - - - - `, + long: [ + { + language: "Typescript", + snippet: `const useStyles = createUseStyles({ + card: { + width: "360px", + }, + cardImage: { + height: "100%", + width: "100%", + maxHeight: "20.375rem", + maxWidth: "20.375rem", + }, +}); +const classes = useStyles(); +return ( + {shortCode} +)`, + }, + { + language: "Javascript", + snippet: `{shortCode}`, + }, + ], + }, }, ]; @@ -730,14 +905,13 @@ export const topImage = [ heading="Americano order" subheading="Name: Michael" message="Extras: Double espresso shot and oat milk." - style={{ width: "360px" }} > @@ -783,79 +957,89 @@ export const topImage = [ export const midImage = [ { - language: "Web component", - snippet: ` - + - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + `, + long: `ic-card { + width:360px; + } + .card-image { + height: 100%; + width: 100%; + maxHeight: 20.375rem; + maxWidth: 20.375rem; + } + + + {shortCode}`, + }, }, { - language: "React", - snippet: ` - - - + className={classes.card} +> + + + - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + `, + long: [ + { + language: "Typescript", + snippet: `const useStyles = createUseStyles({ + card: { + width: "360px", + }, + cardImage: { + height: "100%", + width: "100%", + maxHeight: "20.375rem", + maxWidth: "20.375rem", + }, +}); +const classes = useStyles(); +return ( + {shortCode} +)`, + }, + { + language: "Javascript", + snippet: `const useStyles = createUseStyles({ + card: { + width: "360px", + }, + cardImage: { + height: "100%", + width: "100%", + maxHeight: "20.375rem", + maxWidth: "20.375rem", + }, +}); +const classes = useStyles(); +return ( + {shortCode} +)`, + }, + ], + }, }, ]; @@ -903,14 +1120,13 @@ export const midImage = [ heading="Americano order" subheading="Name: Michael" message="Extras: Double espresso shot and oat milk." - style={{ width: "360px" }} > @@ -955,50 +1171,91 @@ export const midImage = [ export const interactionControls = [ { - language: "Web component", - snippet: ` + message="Extras: Double espresso shot and oat milk." +> - + -
+
Accept Cancel
`, + long: `.interaction-area { + display: flex; + gap: 16px; + } + + + {shortCode}`, + }, }, { - language: "React", - snippet: ` + message="Extras: Double espresso shot and oat milk." +> - + -
+
Accept Cancel
`, + long: [ + { + language: "Typescript", + snippet: `const useStyles = createUseStyles({ + interactionArea: { + display: "flex", + gap: "16px", + }, +}); +const classes = useStyles(); +return ( + {shortCode} +)`, + }, + { + language: "Javascript", + snippet: `const useStyles = createUseStyles({ + interactionArea: { + display: "flex", + gap: "16px", + }, +}); +const classes = useStyles(); +return ( + {shortCode} +)`, + }, + ], + }, }, ]; @@ -1011,9 +1268,9 @@ export const interactionControls = [ @@ -1029,23 +1286,25 @@ export const interactionControls = [ export const expandable = [ { - language: "Web component", - snippet: ` + expandable="true" +> -
+
Accept Cancel
@@ -1053,25 +1312,35 @@ export const expandable = [ To cancel your order click cancel. `, + long: `.interaction-area { + display: flex; + gap: 16px; + } + + + {shortCode}`, + }, }, { - language: "React", - snippet: ` + expandable +> -
+
Accept Cancel
@@ -1079,6 +1348,35 @@ export const expandable = [ To cancel your order click cancel. `, + long: [ + { + language: "Typescript", + snippet: `const useStyles = createUseStyles({ + interactionArea: { + display: "flex", + gap: "16px", + }, + }); + const classes = useStyles(); + return ( + {shortCode} + )`, + }, + { + language: "Javascript", + snippet: `const useStyles = createUseStyles({ + interactionArea: { + display: "flex", + gap: "16px", + }, + }); + const classes = useStyles(); + return ( + {shortCode} + )`, + }, + ], + }, }, ]; @@ -1092,9 +1390,9 @@ export const expandable = [ @@ -1113,44 +1411,88 @@ export const expandable = [ export const clickableLink = [ { - language: "Web component", - snippet: ` + href="#" +> `, + long: `.parent-container { + padding: 16px; + } + + +
+ {shortCode} +
`, + }, }, { - language: "React", - snippet: ` + href="#" +> `, + long: [ + { + language: "Typescript", + snippet: `const useStyles = createUseStyles({ + parentContainer: { + padding: "16px", + }, +}); +const classes = useStyles(); +return ( +
+ {shortCode} +
+)`, + }, + { + language: "Javascript", + snippet: `const useStyles = createUseStyles({ + parentContainer: { + padding: "16px", + }, +}); +const classes = useStyles(); +return ( +
+ {shortCode} +
+)`, + }, + ], + }, }, ]; @@ -1166,9 +1508,9 @@ export const clickableLink = [ @@ -1180,50 +1522,94 @@ export const clickableLink = [ export const clickableBtn = [ { - language: "Web component", - snippet: ` + clickable="true" +> - -`, +`, + long: `.parent-container { + padding: 16px; + } + + +
+ {shortCode} +
+ `, + }, }, { - language: "React", - snippet: ` console.log(ev)}> + onClick={(ev) => console.log(ev)} +> `, + long: [ + { + language: "Typescript", + snippet: `const useStyles = createUseStyles({ + parentContainer: { + padding: "16px", + }, +}); +const classes = useStyles(); +return ( +
+ {shortCode} +
+)`, + }, + { + language: "Javascript", + snippet: `const useStyles = createUseStyles({ + parentContainer: { + padding: "16px", + }, +}); +const classes = useStyles(); +return ( +
+ {shortCode} +
+)`, + }, + ], + }, }, ]; @@ -1238,9 +1624,9 @@ export const clickableBtn = [ @@ -1252,46 +1638,95 @@ export const clickableBtn = [ export const withBadge = [ { - language: "Web component", - snippet: ` - - + + `, + long: `.parent-container { + padding: 16px; + } + + +
+ {shortCode} +
`, + }, }, { - language: "React", - snippet: ` + href="#" +> `, + long: [ + { + language: "Typescript", + snippet: `const useStyles = createUseStyles({ + parentContainer: { + padding: "16px", + }, +}); +const classes = useStyles(); +return ( +
+ {shortCode} +
+)`, + }, + { + language: "Javascript", + snippet: `const useStyles = createUseStyles({ + parentContainer: { + padding: "16px", + }, +}); +const classes = useStyles(); +return ( +
+ {shortCode} +
+)`, + }, + ], + }, }, ]; @@ -1308,9 +1743,9 @@ export const withBadge = [ @@ -1322,44 +1757,88 @@ export const withBadge = [ export const disabled = [ { - language: "Web component", - snippet: ` + disabled="true" +> `, + long: `.parent-container { + padding: 16px; + } + + +
+ {shortCode} +
`, + }, }, { - language: "React", - snippet: ` + disabled +> `, + long: [ + { + language: "Typescript", + snippet: `const useStyles = createUseStyles({ + parentContainer: { + padding: "16px", + }, +}); +const classes = useStyles(); +return ( +
+ {shortCode} +
+)`, + }, + { + language: "Javascript", + snippet: `const useStyles = createUseStyles({ + parentContainer: { + padding: "16px", + }, +}); +const classes = useStyles(); +return ( +
+ {shortCode} +
+)`, + }, + ], + }, }, ]; @@ -1374,9 +1853,9 @@ export const disabled = [ @@ -1388,44 +1867,88 @@ export const disabled = [ export const fullWidth = [ { - language: "Web component", - snippet: ` + full-width="true" + clickable="true" +> `, + long: `.parent-container { + padding: 16px; + } + + +
+ {shortCode} +
`, + }, }, { - language: "React", - snippet: ` + clickable +> `, + long: [ + { + language: "Typescript", + snippet: `const useStyles = createUseStyles({ + parentContainer: { + padding: "16px", + }, +}); +const classes = useStyles(); +return ( +
+ {shortCode} +
+)`, + }, + { + language: "Javascript", + snippet: `const useStyles = createUseStyles({ + parentContainer: { + padding: "16px", + }, +}); +const classes = useStyles(); +return ( +
+ {shortCode} +
+)`, + }, + ], + }, }, ]; @@ -1434,15 +1957,15 @@ export const fullWidth = [ heading="Americano order" subheading="Name: Michael" message="Extras: Double espresso shot and oat milk." - clickable="true" - fullWidth="true" + fullWidth + clickable > @@ -1454,8 +1977,9 @@ export const fullWidth = [ export const wrapped = [ { - language: "Web component", - snippet: ` + technology: "Web component", + snippets: { + short: ` `, + long: `.parent-container { + padding: 16px; + } + + +
+ {shortCode} +
`, + }, }, { - language: "React", - snippet: ` + technology: "React", + snippets: { + short: ` `, + long: [ + { + language: "Typescript", + snippet: `const useStyles = createUseStyles({ + parentContainer: { + padding: "16px", + }, +}); +const classes = useStyles(); +return ( +
+ {shortCode} +
+)`, + }, + { + language: "Javascript", + snippet: `const useStyles = createUseStyles({ + parentContainer: { + padding: "16px", + }, +}); +const classes = useStyles(); +return ( +
+ {shortCode} +
+)`, + }, + ], + }, }, ]; @@ -1510,9 +2075,9 @@ export const wrapped = [ diff --git a/src/content/structured/components/cards/guidance.mdx b/src/content/structured/components/cards/guidance.mdx index f9774f71e..0f352810e 100644 --- a/src/content/structured/components/cards/guidance.mdx +++ b/src/content/structured/components/cards/guidance.mdx @@ -89,9 +89,9 @@ There are three variants of cards: diff --git a/src/content/structured/components/checkboxes/code.mdx b/src/content/structured/components/checkboxes/code.mdx index c6959d5ea..790c9c4c0 100644 --- a/src/content/structured/components/checkboxes/code.mdx +++ b/src/content/structured/components/checkboxes/code.mdx @@ -1,7 +1,7 @@ --- path: "/components/checkbox/code" -date: "2024-01-18" +date: "2024-05-02" title: "Checkbox" @@ -25,12 +25,14 @@ import { IcCheckboxGroup, IcCheckbox, IcTextField } from "@ukic/react"; export const snippetsDefault = [ { - language: "Web component", - snippet: ` + technology: "Web component", + snippets: { + short: ` - +`, + long: `{shortCode} -`, +`, + }, }, { - language: "React", - snippet: ` console.log("onIcChange", ev.detail.value)}> + technology: "React", + snippets: { + short: ` console.log("onIcChange", ev.detail.value)}> console.log("onIcCheck", ev)} /> `, + long: [ + { + language: "Typescript", + snippet: `{shortCode}`, + }, + { + language: "Javascript", + snippet: `{shortCode}`, + }, + ], + }, }, ]; @@ -83,18 +97,33 @@ export const snippetsDefault = [ export const snippetsHiddenLabel = [ { - language: "Web component", - snippet: ` + technology: "Web component", + snippets: { + short: ` `, + long: `{shortCode}`, + }, }, { - language: "React", - snippet: ` + technology: "React", + snippets: { + short: ` `, + long: [ + { + language: "Typescript", + snippet: `{shortCode}`, + }, + { + language: "Javascript", + snippet: `{shortCode}`, + }, + ], + }, }, ]; @@ -109,18 +138,33 @@ export const snippetsHiddenLabel = [ export const snippetsHelperText = [ { - language: "Web component", - snippet: ` + technology: "Web component", + snippets: { + short: ` `, + long: `{shortCode}`, + }, }, { - language: "React", - snippet: ` + technology: "React", + snippets: { + short: ` `, + long: [ + { + language: "Typescript", + snippet: `{shortCode}`, + }, + { + language: "Javascript", + snippet: `{shortCode}`, + }, + ], + }, }, ]; @@ -139,8 +183,9 @@ export const snippetsHelperText = [ export const snippetsSizes = [ { - language: "Web component", - snippet: ` + technology: "Web component", + snippets: { + short: ` @@ -152,10 +197,13 @@ export const snippetsSizes = [ `, + long: `{shortCode}`, + }, }, { - language: "React", - snippet: ` + technology: "React", + snippets: { + short: ` @@ -167,6 +215,21 @@ export const snippetsSizes = [ `, + long: [ + { + language: "Typescript", + snippet: `<> + {shortCode} +`, + }, + { + language: "Javascript", + snippet: `<> + {shortCode} +`, + }, + ], + }, }, ]; @@ -189,16 +252,35 @@ export const snippetsSizes = [ export const snippetsSettingEachCheckboxSize = [ { - language: "Web component", - snippet: ` + technology: "Web component", + snippets: { + short: ` `, + long: `{shortCode}`, + }, }, { - language: "React", - snippet: ` + technology: "React", + snippets: { + short: ` `, + long: [ + { + language: "Typescript", + snippet: `<> + {shortCode} +`, + }, + { + language: "Javascript", + snippet: `<> + {shortCode} +`, + }, + ], + }, }, ]; @@ -220,8 +302,9 @@ export const snippetsSettingEachCheckboxSize = [ export const snippetsConditional = [ { - language: "Web component", - snippet: ` + technology: "Web component", + snippets: { + short: ` @@ -234,10 +317,13 @@ export const snippetsConditional = [ > `, + long: `{shortCode}`, + }, }, { - language: "React", - snippet: ` + technology: "React", + snippets: { + short: ` @@ -250,6 +336,17 @@ export const snippetsConditional = [ /> `, + long: [ + { + language: "Typescript", + snippet: `{shortCode}`, + }, + { + language: "Javascript", + snippet: `{shortCode}`, + }, + ], + }, }, ]; @@ -270,8 +367,9 @@ export const snippetsConditional = [ export const snippetsConditionalDynamic = [ { - language: "Web component", - snippet: ` + technology: "Web component", + snippets: { + short: ` @@ -284,10 +382,13 @@ export const snippetsConditionalDynamic = [ > `, + long: `{shortCode}`, + }, }, { - language: "React", - snippet: ` + technology: "React", + snippets: { + short: ` @@ -300,6 +401,17 @@ export const snippetsConditionalDynamic = [ /> `, + long: [ + { + language: "Typescript", + snippet: `{shortCode}`, + }, + { + language: "Javascript", + snippet: `{shortCode}`, + }, + ], + }, }, ]; @@ -325,18 +437,33 @@ export const snippetsConditionalDynamic = [ export const snippetsValidation = [ { - language: "Web component", - snippet: ` + technology: "Web component", + snippets: { + short: ` `, + long: `{shortCode}`, + }, }, { - language: "React", - snippet: ` + technology: "React", + snippets: { + short: ` `, + long: [ + { + language: "Typescript", + snippet: `{shortCode}`, + }, + { + language: "Javascript", + snippet: `{shortCode}`, + }, + ], + }, }, ]; @@ -356,8 +483,9 @@ export const snippetsValidation = [ export const snippetsIndeterminate = [ { - language: "Web component", - snippet: ` + technology: "Web component", + snippets: { + short: ` @@ -372,10 +500,13 @@ export const snippetsIndeterminate = [ `, + long: `{shortCode}`, + }, }, { - language: "React", - snippet: ` + technology: "React", + snippets: { + short: ` @@ -390,6 +521,17 @@ export const snippetsIndeterminate = [ `, + long: [ + { + language: "Typescript", + snippet: `{shortCode}`, + }, + { + language: "Javascript", + snippet: `{shortCode}`, + }, + ], + }, }, ]; diff --git a/src/content/structured/components/chips/code.mdx b/src/content/structured/components/chips/code.mdx index 49beaaf31..63a955eca 100644 --- a/src/content/structured/components/chips/code.mdx +++ b/src/content/structured/components/chips/code.mdx @@ -1,7 +1,7 @@ --- path: "/components/chip/code" -date: "2024-02-28" +date: "2024-05-02" title: "Chip" @@ -25,8 +25,9 @@ import { IcChip } from "@ukic/react"; export const snippetsDefault = [ { - language: "Web component", - snippet: ` + technology: "Web component", + snippets: { + short: ` `, + long: `{shortCode}`, + }, }, { - language: "React", - snippet: ` console.log(ev)}> + technology: "React", + snippets: { + short: ` console.log(ev)}> `, + long: [ + { + language: "Typescript", + snippet: `<> + {shortCode} +`, + }, + { + language: "Javascript", + snippet: `<> + {shortCode} +`, + }, + ], + }, }, ]; @@ -119,8 +138,9 @@ export const snippetsDefault = [ export const snippetsOutline = [ { - language: "Web component", - snippet: ` + technology: "Web component", + snippets: { + short: ` `, + long: `{shortCode}`, + }, }, { - language: "React", - snippet: ` + technology: "React", + snippets: { + short: ` `, + long: [ + { + language: "Typescript", + snippet: `{shortCode}`, + }, + { + language: "Javascript", + snippet: `{shortCode}`, + }, + ], + }, }, ]; @@ -174,8 +208,9 @@ export const snippetsOutline = [ export const snippetsDismissible = [ { - language: "Web component", - snippet: ` + technology: "Web component", + snippets: { + short: ` console.log(ev)); `, + long: `{shortCode}`, + }, }, { - language: "React", - snippet: ` console.log(ev)}> + technology: "React", + snippets: { + short: ` console.log(ev)}> `, + long: [ + { + language: "Typescript", + snippet: `{shortCode}`, + }, + { + language: "Javascript", + snippet: `{shortCode}`, + }, + ], + }, }, ]; @@ -233,8 +282,9 @@ export const snippetsDismissible = [ export const snippetsDisabled = [ { - language: "Web component", - snippet: ` + technology: "Web component", + snippets: { + short: ` `, + long: `{shortCode}`, + }, }, { - language: "React", - snippet: ` + technology: "React", + snippets: { + short: ` `, + long: [ + { + language: "Typescript", + snippet: `<> + {shortCode} +`, + }, + { + language: "Javascript", + snippet: `<> + {shortCode} +`, + }, + ], + }, }, ]; diff --git a/src/content/structured/components/classification-banner/code.mdx b/src/content/structured/components/classification-banner/code.mdx index afaec6fbd..f1e0522ba 100644 --- a/src/content/structured/components/classification-banner/code.mdx +++ b/src/content/structured/components/classification-banner/code.mdx @@ -1,7 +1,7 @@ --- path: "/components/classification-banner/code" -date: "2023-02-03" +date: "2024-05-02" title: "Classification banner" @@ -26,20 +26,39 @@ import { IcClassificationBanner } from "@ukic/react"; export const snippets = [ { - language: "Web component", - snippet: ` + technology: "Web component", + snippets: { + short: ` `, + long: `{shortCode}`, + }, }, { - language: "React", - snippet: ` + technology: "React", + snippets: { + short: ` `, + long: [ + { + language: "Typescript", + snippet: `<> + {shortCode} +`, + }, + { + language: "Javascript", + snippet: `<> + {shortCode} +`, + }, + ], + }, }, ]; @@ -61,12 +80,37 @@ export const snippets = [ export const snippetsVariants = [ { - language: "Web component", - snippet: ``, + technology: "Web component", + snippets: { + short: ` +`, + long: `{shortCode}`, + }, }, { - language: "React", - snippet: ``, + technology: "React", + snippets: { + short: ``, + long: [ + { + language: "Typescript", + snippet: `{shortCode}`, + }, + { + language: "Javascript", + snippet: `{shortCode}`, + }, + ], + }, }, ]; diff --git a/src/content/structured/components/data-entity/code.mdx b/src/content/structured/components/data-entity/code.mdx index 5eb21e012..e0fee703e 100644 --- a/src/content/structured/components/data-entity/code.mdx +++ b/src/content/structured/components/data-entity/code.mdx @@ -1,7 +1,7 @@ --- path: "/components/data-entity/code" -date: "2024-02-02" +date: "2024-05-02" title: "Data entity" @@ -33,90 +33,105 @@ import { export const snippets = [ { - language: "Web component", - snippet: ` - - - Edit - - - - - Edit - - - - - Edit - - - - - Edit - - - - - VISA ending 5896 - - - Edit - - - - - - - - - - `, + technology: "Web component", + snippets: { + short: ` + + + Edit + + + + + Edit + + + + + Edit + + + + + Edit + + + + + VISA ending 5896 + + + Edit + + + + + + + + + +`, + long: `{shortCode}`, + }, }, { - language: "React", - snippet: ` - - - Edit - - - - - Edit - - - - - Edit - - - - - Edit - - - - - VISA ending 5896 - - - Edit - - - - - - - - - - `, + technology: "React", + snippets: { + short: ` + + + Edit + + + + + Edit + + + + + Edit + + + + + Edit + + + + + VISA ending 5896 + + + Edit + + + + + + + + + +`, + long: [ + { + language: "Typescript", + snippet: `{shortCode}`, + }, + { + language: "Javascript", + snippet: `{shortCode}`, + }, + ], + }, }, ]; @@ -152,7 +167,7 @@ export const snippets = [ - + - - - - - - - - - - - - VISA ending 5896 - - - - `, + technology: "Web component", + snippets: { + short: ` + + + + + + + + + + + + VISA ending 5896 + + + +`, + long: `{shortCode}`, + }, }, { - language: "React", - snippet: ` - - - - - - - - - - - - VISA ending 5896 - - - - `, + technology: "React", + snippets: { + short: ` + + + + + + + + + VISA ending 5896 + + + +`, + long: [ + { + language: "Typescript", + snippet: `{shortCode}`, + }, + { + language: "Javascript", + snippet: `{shortCode}`, + }, + ], + }, }, ]; @@ -266,8 +293,9 @@ export const withStatusTags = [ export const smallSnippet = [ { - language: "Web component", - snippet: ` + technology: "Web component", + snippets: { + short: ` `, + long: `{shortCode}`, + }, }, { - language: "React", - snippet: ` + technology: "React", + snippets: { + short: ` `, + long: [ + { + language: "Typescript", + snippet: `{shortCode}`, + }, + { + language: "Javascript", + snippet: `{shortCode}`, + }, + ], + }, }, ]; @@ -411,92 +453,110 @@ export const smallSnippet = [ export const editableExample = [ { - language: "Web component", - snippet: ` + technology: "Web component", + snippets: { + short: ` - - Confirm - - - Edit - -
+ + Confirm + + + Edit + +
`, + long: `.btn-container { + display: flex; + gap: 16px; + padding-top: 16px; + } + .parent-container { + padding: 16px; + } + + +
+ {shortCode} +
+ `, + `, + }, }, { - language: "React", - snippet: ` + technology: "React", + snippets: { + short: ` @@ -505,8 +565,8 @@ export const editableExample = [ label="Drink" value="Americano" readonly - hide-label - full-width + hideLabel + fullWidth /> @@ -515,8 +575,8 @@ export const editableExample = [ label="Milk option" value="Soya milk" readonly - hide-label - full-width + hideLabel + fullWidth /> @@ -525,8 +585,8 @@ export const editableExample = [ label="Price" value="£3.25" readonly - hide-label - full-width + hideLabel + fullWidth /> @@ -535,37 +595,75 @@ export const editableExample = [ label="Payment method" value="VISA ending 5896" readonly - hide-label - full-width + hideLabel + fullWidth /> - { - const textFields = document.querySelectorAll('ic-text-field'); - textFields.forEach((textField) => { - textField.setAttribute('readonly', ''); - }) - }} - style={{ - marginRight: "var(--ic-space-md)", - marginTop: "var(--ic-space-lg)", - }} -> - Confirm - - { - const textFields = document.querySelectorAll('ic-text-field'); - textFields.forEach((textField) => { - textField.removeAttribute('readonly'); - }) - }} - variant="secondary" - style={{ marginTop: "var(--ic-space-lg)" }} -> - Edit -`, +
+ { + const textFields = document.querySelectorAll('ic-text-field'); + textFields.forEach((textField) => { + textField.setAttribute('readonly', ''); + }); + }} + > + Confirm + + { + const textFields = document.querySelectorAll('ic-text-field'); + textFields.forEach((textField) => { + textField.removeAttribute('readonly'); + }); + }} + variant="secondary" + > + Edit + +
`, + long: [ + { + language: "Typescript", + snippet: `const useStyles = createUseStyles({ + btnContainer: { + display: "flex", + gap: "16px", + paddingTop: "16px", + }, + parentContainer: { + padding: "16px", + }, +}); +const classes = useStyles(); +return ( +
+ {shortCode} +
+)`, + }, + { + language: "Javascript", + snippet: `const useStyles = createUseStyles({ + btnContainer: { + display: "flex", + gap: "16px", + paddingTop: "16px", + }, + parentContainer: { + padding: "16px", + }, +}); +const classes = useStyles(); +return ( +
+ {shortCode} +
+)`, + }, + ], + }, }, ]; @@ -577,8 +675,8 @@ export const editableExample = [ label="Order name" value="Michael" readonly - hide-label - full-width + hideLabel + fullWidth /> @@ -587,8 +685,8 @@ export const editableExample = [ label="Drink" value="Americano" readonly - hide-label - full-width + hideLabel + fullWidth /> @@ -597,8 +695,8 @@ export const editableExample = [ label="Milk option" value="Soya milk" readonly - hide-label - full-width + hideLabel + fullWidth /> @@ -607,8 +705,8 @@ export const editableExample = [ label="Price" value="£3.25" readonly - hide-label - full-width + hideLabel + fullWidth /> @@ -617,8 +715,8 @@ export const editableExample = [ label="Payment method" value="VISA ending 5896" readonly - hide-label - full-width + hideLabel + fullWidth /> diff --git a/src/content/structured/components/data-table/code.mdx b/src/content/structured/components/data-table/code.mdx index 810e8297a..5d28adc19 100644 --- a/src/content/structured/components/data-table/code.mdx +++ b/src/content/structured/components/data-table/code.mdx @@ -17,7 +17,7 @@ tabs: --- import { IcDataTable } from "@ukic/canary-react"; -import { IcButton } from "@ukic/react"; +import { IcEmptyState, IcButton } from "@ukic/react"; import { useRef } from "react"; import { COLUMNS, @@ -29,14 +29,18 @@ import { COLUMN_OVERRIDES, ROW_OVERRIDES_DATA, CELL_OVERRIDES_DATA, + COLUMNS_ELEMENTS, + DATA_ELEMENTS, } from "./story-data"; ## Component demo export const snippetsDefault = [ { - language: "Web components", - snippet: ` + technology: "Web component", + snippets: { + short: ``, + long: `{shortCode} `, + }, }, { - language: "React", - snippet: `const columns = [ + technology: "React", + snippets: { + short: ``, + long: [ + { + language: "Typescript", + snippet: `const columns: IcDataTableColumnObject[] = [ { key: "firstName", title: "First name", @@ -114,9 +124,52 @@ const data = [ age: 45, }, ]; -const DataTable = () => ( - -);`, +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} +)`, + }, + ], + }, }, ]; @@ -134,384 +187,544 @@ const DataTable = () => ( export const snippetsEmbedded = [ { - language: "Web components", - snippet: ` + technology: "Web component", + snippets: { + short: ``, + long: `{shortCode} `, + }, }, { - language: "React", - snippet: ``, + long: [ + { + language: "Typescript", + snippet: `const columns: IcDataTableColumnObject[] = [ + { + key: "firstName", + title: "First name", + dataType: "string", }, -]; - - - - - -### Dense - -export const snippetsDense = [ { - language: "Web components", - snippet: ` -`, + key: "lastName", + title: "Last name", + dataType: "string", }, { - language: "React", - snippet: ``, + key: "age", + title: "Age", + dataType: "number", }, ]; - - - - - -### Spacious - -export const snippetsSpacious = [ +const data = [ { - language: "Web components", - snippet: ` -`, + firstName: "Joe", + lastName: "Bloggs", + age: 30, }, { - language: "React", - snippet: ``, + firstName: "Sarah", + lastName: "Smith", + age: 28, }, -]; - - - - - -### Sticky column headers - -export const snippetsStickyColumnHeaders = [ { - language: "Web components", - snippet: ` -`, + firstName: "Mark", + lastName: "Owens", + age: 45, }, +]; +return ( + {shortCode} +)`, + }, + { + language: "Javascript", + snippet: `const columns = [ { - language: "React", - snippet: `const long_columns = [ - { - key: "employeeNumber", - title: "Employee number", - dataType: "number", - columnAlignment: { horizontal: "left" }, + key: "firstName", + title: "First name", + dataType: "string", }, { - key: "name", - title: "Name", + key: "lastName", + title: "Last name", dataType: "string", }, - ... + { + key: "age", + title: "Age", + dataType: "number", + }, ]; -const long_data = [ +const data = [ { - employeeNumber: 1, - name: "Joe Bloggs", + firstName: "Joe", + lastName: "Bloggs", age: 30, }, - ... + { + firstName: "Sarah", + lastName: "Smith", + age: 28, + }, + { + firstName: "Mark", + lastName: "Owens", + age: 45, + }, ]; return ( - -);`, + {shortCode} +)`, + }, + ], + }, }, ]; -export const StickyColumnHeaders = () => { - const dataTableEl = useRef(null); - const stickHeader = (sticky) => { - dataTableEl.current.stickyColumnHeaders = sticky; - }; - return ( - <> - - stickHeader(true)}>Stick Header - stickHeader(false)}>Unstick Header - - ); -}; - - - + + -### Row headers +### Dense -export const snippetsRowHeaders = [ +export const snippetsDense = [ { - language: "Web components", - snippet: ` + technology: "Web component", + snippets: { + short: ``, + long: `{shortCode} `, + }, }, { - language: "React", - snippet: `const columns = [ - { - key: 'header', - title: 'Job Title', - dataType: 'string' - }, + 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 = [ { - header: { title: 'Employee' }, firstName: "Joe", lastName: "Bloggs", age: 30, }, - ... + { + firstName: "Sarah", + lastName: "Smith", + age: 28, + }, + { + firstName: "Mark", + lastName: "Owens", + age: 45, + }, ]; -const DataTable = () => ( - -);`, +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", }, ]; - - - - - -### Sortable - -export const snippetsSortable = [ +const data = [ { - language: "Web components", - snippet: ` -`, + firstName: "Joe", + lastName: "Bloggs", + age: 30, }, { - language: "React", - snippet: ``, + firstName: "Sarah", + lastName: "Smith", + age: 28, + }, + { + firstName: "Mark", + lastName: "Owens", + age: 45, + }, +]; +return ( + {shortCode} +)`, + }, + ], + }, }, ]; - - + + -### Sort options +### Spacious -export const snippetsSortOptions = [ +export const snippetsSpacious = [ { - language: "Web components", - snippet: ` + technology: "Web component", + snippets: { + short: ``, + long: `{shortCode} `, + }, }, { - language: "React", - snippet: ``, + long: [ + { + language: "Typescript", + snippet: `{shortCode}`, + }, + { + language: "Javascript", + snippet: `{shortCode}`, + }, + ], + }, }, ]; - + -### Pagination +### Sticky column headers -export const snippetsPagination = [ +export const snippetsStickyColumnHeaders = [ { - language: "Web components", - snippet: ` -`, }, - ... - ]; - dataTable.columns = long_columns; - dataTable.data = long_data; -`, }, { - language: "React", - snippet: `const long_columns = [ + technology: "React", + snippets: { + short: ``, + long: [ + { + language: "Typescript", + snippet: ` const dataTableEl = useRef(null); +const stickHeader = (sticky: boolean) => { + dataTableEl.current.stickyColumnHeaders = sticky; +}; +const long_columns: IcDataTableColumnObject[] = [ { key: "employeeNumber", title: "Employee number", @@ -523,7 +736,11 @@ export const snippetsPagination = [ title: "Name", dataType: "string", }, - ... + { + key: "age", + title: "Age", + dataType: "number", + }, ]; const long_data = [ { @@ -531,102 +748,293 @@ const long_data = [ name: "Joe Bloggs", age: 30, }, - ... -]; -return ( - -);`, + { + employeeNumber: 2, + name: "Sarah Jones", + age: 28, }, -]; - - - - - -### Column overrides - -export const snippetsColumnOverrides = [ { - language: "Web components", - snippet: ` -`, + employeeNumber: 3, + name: "Mark Owens", + age: 45, }, { - language: "React", - snippet: `const columns = [ + employeeNumber: 4, + name: "Naomi Thomas", + age: 32, + }, { - key: "firstName", - title: "First name", + employeeNumber: 5, + name: "Luke Ashford", + age: 18, + }, + { + employeeNumber: 6, + name: "Dave Smith", + age: 33, + }, + { + employeeNumber: 7, + name: "Amy Fox", + age: 27, + }, + { + employeeNumber: 8, + name: "Mary Cooper", + age: 31, + }, + { + employeeNumber: 9, + name: "Alice Cole", + age: 38, + }, + { + employeeNumber: 10, + name: "Ben Fields", + age: 40, + }, + { + employeeNumber: 11, + name: "Pete Norton", + age: 32, + }, + { + employeeNumber: 12, + name: "Ashley Langford", + age: 29, + }, + { + employeeNumber: 13, + name: "Michael Hall", + age: 35, + }, + { + employeeNumber: 14, + name: "David Frank", + age: 28, + }, + { + employeeNumber: 15, + name: "Mary Lincoln", + age: 23, + }, + { + employeeNumber: 16, + name: "Will Barns", + age: 36, + }, + { + employeeNumber: 17, + name: "Elizabeth Long", + age: 43, + }, + { + employeeNumber: 18, + name: "Keith Jones", + age: 37, + }, + { + employeeNumber: 19, + name: "Olivia Brown", + age: 19, + }, + { + employeeNumber: 20, + name: "Tim Green", + age: 50, + }, +]; +const useStyles = createUseStyles({ + dataTable: { + height: "300px", + }, +}); +const classes = useStyles(); +return ( + <> + {shortCode} + stickHeader(true)}>Stick Header + stickHeader(false)}>Unstick Header + +);`, + }, + { + language: "Javascript", + snippet: `const dataTableEl = useRef(null); +const stickHeader = (sticky) => { + dataTableEl.current.stickyColumnHeaders = sticky; +}; +const long_columns = [ + { + key: "employeeNumber", + title: "Employee number", + dataType: "number", + columnAlignment: { horizontal: "left" }, + }, + { + key: "name", + title: "Name", dataType: "string", - columnAlignment: { horizontal: 'center', vertical: 'middle'}, - emphasis: 'high', }, - ... + { + key: "age", + title: "Age", + dataType: "number", + }, +]; +const long_data = [ + { + employeeNumber: 1, + name: "Joe Bloggs", + age: 30, + }, + { + employeeNumber: 2, + name: "Sarah Jones", + age: 28, + }, + { + employeeNumber: 3, + name: "Mark Owens", + age: 45, + }, + { + employeeNumber: 4, + name: "Naomi Thomas", + age: 32, + }, + { + employeeNumber: 5, + name: "Luke Ashford", + age: 18, + }, + { + employeeNumber: 6, + name: "Dave Smith", + age: 33, + }, + { + employeeNumber: 7, + name: "Amy Fox", + age: 27, + }, + { + employeeNumber: 8, + name: "Mary Cooper", + age: 31, + }, + { + employeeNumber: 9, + name: "Alice Cole", + age: 38, + }, + { + employeeNumber: 10, + name: "Ben Fields", + age: 40, + }, + { + employeeNumber: 11, + name: "Pete Norton", + age: 32, + }, + { + employeeNumber: 12, + name: "Ashley Langford", + age: 29, + }, + { + employeeNumber: 13, + name: "Michael Hall", + age: 35, + }, + { + employeeNumber: 14, + name: "David Frank", + age: 28, + }, + { + employeeNumber: 15, + name: "Mary Lincoln", + age: 23, + }, + { + employeeNumber: 16, + name: "Will Barns", + age: 36, + }, + { + employeeNumber: 17, + name: "Elizabeth Long", + age: 43, + }, + { + employeeNumber: 18, + name: "Keith Jones", + age: 37, + }, + { + employeeNumber: 19, + name: "Olivia Brown", + age: 19, + }, + { + employeeNumber: 20, + name: "Tim Green", + age: 50, + }, ]; +const useStyles = createUseStyles({ + dataTable: { + height: "300px", + }, +}); +const classes = useStyles(); return ( - + <> + {shortCode} + stickHeader(true)}>Stick Header + stickHeader(false)}>Unstick Header + );`, + }, + ], + }, }, ]; - - +export const StickyColumnHeaders = () => { + const dataTableEl = useRef(null); + const stickHeader = (sticky) => { + dataTableEl.current.stickyColumnHeaders = sticky; + }; + return ( + <> + + stickHeader(true)}>Stick Header + stickHeader(false)}>Unstick Header + + ); +}; + + + -### Row overrides +### Row headers -export const snippetsRowOverrides = [ +export const snippetsRowHeaders = [ { - language: "Web components", - snippet: ` + technology: "Web component", + snippets: { + short: ``, + long: `{shortCode} `, + }, }, { - language: "React", - snippet: `const columns = [ + technology: "React", + snippets: { + short: ``, + long: [ + { + language: "Typescript", + snippet: `const columns: IcDataTableColumnObject[] = [ { - key: "header", - title: "Job type", + 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: "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 types: "string" | "number" | "address" | "element" | "date"; + dataType: "string", + }, + { + key: "lastName", + title: "Last name", dataType: "string", }, - ... + { + key: "age", + title: "Age", + dataType: "number", + }, ]; const data = [ { - header: { - title: 'Employee', - rowAlignment: 'middle', - emphasis: 'high' - } firstName: "Joe", lastName: "Bloggs", age: 30, }, - ... + { + firstName: "Sarah", + lastName: "Smith", + age: 28, + }, + { + firstName: "Mark", + lastName: "Owens", + age: 45, + }, ]; return ( - -);`, + {shortCode} +)`, + }, + ], + }, }, ]; - + -### Cell overrides +### Sortable -export const snippetsCellOverrides = [ +export const snippetsSortable = [ { - language: "Web components", - snippet: ` + technology: "Web component", + snippets: { + short: ``, + long: `{shortCode} `, + }, }, { - language: "React", - snippet: `const data = [ + technology: "React", + snippets: { + short: ``, + long: [ + { + language: "Typescript", + snippet: `const columns: IcDataTableColumnObject[] = [ { - firstName: { - data: "Joe", - cellAlignment: { horizontal: "center", vertical: "middle" }, - emphasis: "high", + 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: "Joe", + lastName: "Bloggs", + age: 30, + }, + { + firstName: "Sarah", + lastName: "Smith", + age: 28, + }, + { + firstName: "Mark", + lastName: "Owens", + age: 45, + }, +]; +return ( + {shortCode} +)`, + }, + { + language: "Javascript", + snippet: `const columns: IcDataTableColumnObject[] = [ + { + 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: "Joe", + lastName: "Bloggs", + age: 30, + }, + { + firstName: "Sarah", + lastName: "Smith", + age: 28, + }, + { + firstName: "Mark", + lastName: "Owens", + age: 45, + }, +]; +return ( + {shortCode} +)`, + }, + ], + }, + }, +]; + + + + + +### Sort options + +export const snippetsSortOptions = [ + { + technology: "Web component", + snippets: { + short: ``, + long: `{shortCode} +`, }, + }, + { + technology: "React", + snippets: { + short: ``, + long: [ + { + language: "Typescript", + snippet: `const columns: IcDataTableColumnObject[] = [ + { + 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: "Joe", + lastName: "Bloggs", + age: 30, + }, + { + firstName: "Sarah", + lastName: "Smith", + age: 28, + }, + { + firstName: "Mark", + lastName: "Owens", + age: 45, + }, +]; +return ( + {shortCode} +)`, + }, + { + language: "Javascript", + snippet: `const columns: IcDataTableColumnObject[] = [ + { + 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: "Joe", lastName: "Bloggs", age: 30, }, - ... + { + firstName: "Sarah", + lastName: "Smith", + age: 28, + }, + { + firstName: "Mark", + lastName: "Owens", + age: 45, + }, ]; return ( - -);`, + {shortCode} +)`, + }, + ], + }, }, ]; - + + +### Pagination + +export const snippetsPagination = [ + { + technology: "Web component", + snippets: { + short: ``, + long: `{shortCode} +`, + }, + }, + { + technology: "React", + snippets: { + short: ``, + long: [ + { + language: "Typescript", + snippet: `const long_columns: IcDataTableColumnObject[] = [ + { + key: "employeeNumber", + title: "Employee number", + dataType: "number", + columnAlignment: { horizontal: "left" }, + }, + { + key: "name", + title: "Name", + dataType: "string", + }, + { + key: "age", + title: "Age", + dataType: "number", + }, +]; +const long_data = [ + { + employeeNumber: 1, + name: "Joe Bloggs", + age: 30, + }, + { + employeeNumber: 2, + name: "Sarah Jones", + age: 28, + }, + { + employeeNumber: 3, + name: "Mark Owens", + age: 45, + }, + { + employeeNumber: 4, + name: "Naomi Thomas", + age: 32, + }, + { + employeeNumber: 5, + name: "Luke Ashford", + age: 18, + }, + { + employeeNumber: 6, + name: "Dave Smith", + age: 33, + }, + { + employeeNumber: 7, + name: "Amy Fox", + age: 27, + }, + { + employeeNumber: 8, + name: "Mary Cooper", + age: 31, + }, + { + employeeNumber: 9, + name: "Alice Cole", + age: 38, + }, + { + employeeNumber: 10, + name: "Ben Fields", + age: 40, + }, + { + employeeNumber: 11, + name: "Pete Norton", + age: 32, + }, + { + employeeNumber: 12, + name: "Ashley Langford", + age: 29, + }, + { + employeeNumber: 13, + name: "Michael Hall", + age: 35, + }, + { + employeeNumber: 14, + name: "David Frank", + age: 28, + }, + { + employeeNumber: 15, + name: "Mary Lincoln", + age: 23, + }, + { + employeeNumber: 16, + name: "Will Barns", + age: 36, + }, + { + employeeNumber: 17, + name: "Elizabeth Long", + age: 43, + }, + { + employeeNumber: 18, + name: "Keith Jones", + age: 37, + }, + { + employeeNumber: 19, + name: "Olivia Brown", + age: 19, + }, + { + employeeNumber: 20, + name: "Tim Green", + age: 50, + }, +]; +return ( + {shortCode} +);`, + }, + { + language: "Javascript", + snippet: `const long_columns = [ + { + key: "employeeNumber", + title: "Employee number", + dataType: "number", + columnAlignment: { horizontal: "left" }, + }, + { + key: "name", + title: "Name", + dataType: "string", + }, + { + key: "age", + title: "Age", + dataType: "number", + }, +]; +const long_data = [ + { + employeeNumber: 1, + name: "Joe Bloggs", + age: 30, + }, + { + employeeNumber: 2, + name: "Sarah Jones", + age: 28, + }, + { + employeeNumber: 3, + name: "Mark Owens", + age: 45, + }, + { + employeeNumber: 4, + name: "Naomi Thomas", + age: 32, + }, + { + employeeNumber: 5, + name: "Luke Ashford", + age: 18, + }, + { + employeeNumber: 6, + name: "Dave Smith", + age: 33, + }, + { + employeeNumber: 7, + name: "Amy Fox", + age: 27, + }, + { + employeeNumber: 8, + name: "Mary Cooper", + age: 31, + }, + { + employeeNumber: 9, + name: "Alice Cole", + age: 38, + }, + { + employeeNumber: 10, + name: "Ben Fields", + age: 40, + }, + { + employeeNumber: 11, + name: "Pete Norton", + age: 32, + }, + { + employeeNumber: 12, + name: "Ashley Langford", + age: 29, + }, + { + employeeNumber: 13, + name: "Michael Hall", + age: 35, + }, + { + employeeNumber: 14, + name: "David Frank", + age: 28, + }, + { + employeeNumber: 15, + name: "Mary Lincoln", + age: 23, + }, + { + employeeNumber: 16, + name: "Will Barns", + age: 36, + }, + { + employeeNumber: 17, + name: "Elizabeth Long", + age: 43, + }, + { + employeeNumber: 18, + name: "Keith Jones", + age: 37, + }, + { + employeeNumber: 19, + name: "Olivia Brown", + age: 19, + }, + { + employeeNumber: 20, + name: "Tim Green", + age: 50, + }, +]; +return ( + {shortCode} +);`, + }, + ], + }, + }, +]; + + + + + +### Column overrides + +export const snippetsColumnOverrides = [ + { + 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", + columnAlignment: { horizontal: 'center', vertical: 'middle'}, + emphasis: 'high', + }, + { + 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", + columnAlignment: { horizontal: 'center', vertical: 'middle'}, + emphasis: 'high', + }, + { + 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} +)`, + }, + ], + }, + }, +]; + + + + + +### Row overrides + +export const snippetsRowOverrides = [ + { + technology: "Web component", + snippets: { + short: ``, + long: `{shortCode} +`, + }, + }, + { + technology: "React", + snippets: { + short: ``, + long: [ + { + language: "Typescript", + snippet: `const columns: IcDataTableColumnObject[] = [ + { + key: "header", + title: "Job Title", + dataType: "string", + }, + { + key: "firstName", + title: "First name", + dataType: "string", + }, + { + key: "lastName", + title: "Last name", + dataType: "string", + }, + { + key: "age", + title: "Age", + dataType: "number", + }, +]; +const data = [ + { + header: { title: "Employee" }, + firstName: "Joe", + lastName: "Bloggs", + age: 30, + }, + { + header: { title: "Employee" }, + firstName: "Sarah", + lastName: "Smith", + age: 28, + }, + { + header: { title: "Manager" }, + firstName: "Mark", + lastName: "Owens", + age: 45, + }, +]; +return ( + {shortCode} +);`, + }, + { + language: "Javascript", + snippet: `const columns = [ + { + key: "header", + title: "Job Title", + dataType: "string", + }, + { + key: "firstName", + title: "First name", + dataType: "string", + }, + { + key: "lastName", + title: "Last name", + dataType: "string", + }, + { + key: "age", + title: "Age", + dataType: "number", + }, +]; +const data = [ + { + header: { title: "Employee" }, + firstName: "Joe", + lastName: "Bloggs", + age: 30, + }, + { + header: { title: "Employee" }, + firstName: "Sarah", + lastName: "Smith", + age: 28, + }, + { + header: { title: "Manager" }, + firstName: "Mark", + lastName: "Owens", + age: 45, + }, +]; +return ( + {shortCode} +);`, + }, + ], + }, + }, +]; + + + + + +### Cell overrides + +export const snippetsCellOverrides = [ + { + technology: "Web component", + snippets: { + short: ``, + long: `{shortCode} + `, + }, + }, + { + technology: "React", + snippets: { + short: ``, + long: [ + { + language: "Typescript", + snippet: `const columns: IcDataTableColumnObject[] = [ + { + 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, + }, +]; +return ( + {shortCode} +)`, + }, + { + language: "Javascript", + snippet: `const data = [ +{ +firstName: { +data: "Joe", +cellAlignment: { horizontal: "center", vertical: "middle" }, +emphasis: "high", +}, +lastName: "Bloggs", +age: 30, +}, +]; +return ( +{shortCode} +)`, + }, + ], + }, + }, +]; + + + + + +### Default Empty State + +export const snippetsDefaultEmptyState = [ + { + technology: "Web component", + snippets: { + short: ``, + long: `{shortCode} + `, + }, + }, + { + technology: "React", + snippets: { + short: ``, + long: [ + { + language: "Typescript", + snippet: `const columns: IcDataTableColumnObject[] = [ + { + 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", + }, +]; +return ( + {shortCode} +)`, + }, + { + 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", + }, +]; +return ( + {shortCode} +)`, + }, + ], + }, + }, +]; + + + + + +### Slotted Empty State + +export const snippetsSlottedEmptyState = [ + { + technology: "Web component", + snippets: { + short: ` + + Retry + +`, + long: `{shortCode} + `, + }, + }, + { + technology: "React", + snippets: { + short: ` + + Retry + +`, + long: [ + { + language: "Typescript", + snippet: `const columns: IcDataTableColumnObject[] = [ + { + 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", + }, +]; +return ( + {shortCode} +)`, + }, + { + 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", + }, +]; +return ( + {shortCode} +)`, + }, + ], + }, + }, +]; + + + + + Retry + + + + +### Loading state + +export const snippetsLoadingState = [ + { + technology: "Web component", + snippets: { + short: ``, + long: `{shortCode} + `, + }, + }, + { + technology: "React", + snippets: { + short: ``, + long: [ + { + language: "Typescript", + snippet: `const columns: IcDataTableColumnObject[] = [ + { + 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: "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 types: "string" | "number" | "address" | "element" | "date"; + 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} +)`, + }, + ], + }, + }, +]; + + + + + +### Updating state + +export const snippetsUpdatingState = [ + { + technology: "Web component", + snippets: { + short: ``, + long: `{shortCode} + `, + }, + }, + { + technology: "React", + snippets: { + short: ``, + long: [ + { + language: "Typescript", + snippet: `const columns: IcDataTableColumnObject[] = [ + { + 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: "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 types: "string" | "number" | "address" | "element" | "date"; + 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} +)`, + }, + ], + }, + }, +]; + + + + + +### Links and Elements in data + +export const snippetsElements = [ + { + technology: "Web component", + snippets: { + short: ``, + long: `{shortCode} + `, + }, + }, + { + technology: "React", + snippets: { + short: ` + {data.map((_, index) => ( + _.closest('Delete')} + > + Delete + + ))} + `, + 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", + }, + { + 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\`, + }, +]; +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", + }, + { + 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\`, + }, +]; +return ( + {shortCode} +)`, + }, + ], + }, + }, +]; + + + + {DATA_ELEMENTS.map((_, index) => ( + console.log("Delete")} + > + Delete + + ))} + + diff --git a/src/content/structured/components/data-table/story-data.ts b/src/content/structured/components/data-table/story-data.ts index de97ad5be..e025f1f4e 100644 --- a/src/content/structured/components/data-table/story-data.ts +++ b/src/content/structured/components/data-table/story-data.ts @@ -258,3 +258,92 @@ export const CELL_OVERRIDES_DATA = [ age: 45, }, ]; + +export const COLUMNS_ELEMENTS = [ + { + key: "firstName", + title: "First name", + dataType: "string", + }, + { + key: "lastName", + title: "Last name", + dataType: "string", + }, + { + key: "age", + title: "Age", + dataType: "number", + }, + { + key: "actions", + title: "Actions", + dataType: "element", + columnAlignment: { horizontal: "center" }, + }, +]; + +export const DATA_ELEMENTS = [ + { + 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`, + }, +]; + +export const DATA_REACT_ELEMENTS = [ + { + firstName: { + data: "Joe", + href: "https://www.example.com", + }, + lastName: "Bloggs", + age: 30, + jobTitle: "Developer", + address: "1 Main Street, Town, County, Postcode", + }, + { + firstName: "Sarah", + lastName: "Smith", + age: 28, + jobTitle: "Analyst", + address: "2 Main Street, Town, Country, Postcode", + }, + { + firstName: "Mark", + lastName: "Owens", + age: 45, + jobTitle: "Team Lead", + address: "12 Key Street, Town, Country, Postcode", + }, + { + firstName: "Naomi", + lastName: "Thomas", + age: 32, + jobTitle: "Developer", + address: "8 Side Street, Town, Country, Postcode", + }, + { + firstName: "Luke", + lastName: "Ashford", + age: 18, + jobTitle: "Junior Developer", + address: "5 New Street, Town, Country, Postcode", + }, +]; diff --git a/src/content/structured/components/date-input/code.mdx b/src/content/structured/components/date-input/code.mdx index 2b11733d9..ea461b2ae 100644 --- a/src/content/structured/components/date-input/code.mdx +++ b/src/content/structured/components/date-input/code.mdx @@ -24,21 +24,36 @@ import { IcDateInput } from "@ukic/canary-react"; export const snippetsDefault = [ { - language: "Web components", - snippet: ` + technology: "Web component", + snippets: { + short: ``, + long: `{shortCode} `, + }, }, { - language: "React", - snippet: ` console.log(detail.value)} />`, + long: [ + { + language: "Typescript", + snippet: `{shortCode}`, + }, + { + language: "Javascript", + snippet: `{shortCode}`, + }, + ], + }, }, ]; @@ -69,12 +84,27 @@ export const snippetsDefault = [ export const snippetsStringValue = [ { - language: "Web components", - snippet: ``, + technology: "Web component", + snippets: { + short: ``, + long: `{shortCode}`, + }, }, { - language: "React", - snippet: ``, + technology: "React", + snippets: { + short: ``, + long: [ + { + language: "Typescript", + snippet: `{shortCode}`, + }, + { + language: "Javascript", + snippet: `{shortCode}`, + }, + ], + }, }, ]; @@ -89,19 +119,34 @@ export const snippetsStringValue = [ export const snippetsDateObject = [ { - language: "Web components", - snippet: ` + technology: "Web component", + snippets: { + short: ``, + long: `{shortCode} `, + }, }, { - language: "React", - snippet: ``, + long: [ + { + language: "Typescript", + snippet: `{shortCode}`, + }, + { + language: "Javascript", + snippet: `{shortCode}`, + }, + ], + }, }, ]; @@ -116,19 +161,34 @@ export const snippetsDateObject = [ export const snippetsZulu = [ { - language: "Web components", - snippet: ` + technology: "Web component", + snippets: { + short: ``, + long: `{shortCode} `, + }, }, { - language: "React", - snippet: ``, + long: [ + { + language: "Typescript", + snippet: `{shortCode}`, + }, + { + language: "Javascript", + snippet: `{shortCode}`, + }, + ], + }, }, ]; @@ -143,16 +203,31 @@ export const snippetsZulu = [ export const snippetsHyphens = [ { - language: "Web components", - snippet: ` + technology: "Web component", + snippets: { + short: ``, + long: `{shortCode} `, + }, }, { - language: "React", - snippet: ``, + technology: "React", + snippets: { + short: ``, + long: [ + { + language: "Typescript", + snippet: `{shortCode}`, + }, + { + language: "Javascript", + snippet: `{shortCode}`, + }, + ], + }, }, ]; @@ -167,19 +242,34 @@ export const snippetsHyphens = [ export const snippetsEpoch = [ { - language: "Web components", - snippet: ` + technology: "Web component", + snippets: { + short: ``, + long: `{shortCode} `, + }, }, { - language: "React", - snippet: ``, + long: [ + { + language: "Typescript", + snippet: `{shortCode}`, + }, + { + language: "Javascript", + snippet: `{shortCode}`, + }, + ], + }, }, ]; @@ -194,12 +284,27 @@ export const snippetsEpoch = [ export const snippetsRequired = [ { - language: "Web components", - snippet: ``, + technology: "Web component", + snippets: { + short: ``, + long: `{shortCode}`, + }, }, { - language: "React", - snippet: ``, + technology: "React", + snippets: { + short: ``, + long: [ + { + language: "Typescript", + snippet: `{shortCode}`, + }, + { + language: "Javascript", + snippet: `{shortCode}`, + }, + ], + }, }, ]; @@ -211,12 +316,27 @@ export const snippetsRequired = [ export const snippetsDisabled = [ { - language: "Web components", - snippet: ``, + technology: "Web component", + snippets: { + short: ``, + long: `{shortCode}`, + }, }, { - language: "React", - snippet: ``, + technology: "React", + snippets: { + short: ``, + long: [ + { + language: "Typescript", + snippet: `{shortCode}`, + }, + { + language: "Javascript", + snippet: `{shortCode}`, + }, + ], + }, }, ]; @@ -228,16 +348,66 @@ export const snippetsDisabled = [ export const snippetsSizes = [ { - language: "Web components", - snippet: ` + technology: "Web component", + snippets: { + short: ` `, + long: `.parent-container { + display: flex; + flex-direction: column; + gap: 16px; + padding: 16px; + } + + +
+ {shortCode} +
`, + }, }, { - language: "React", - snippet: ` + technology: "React", + snippets: { + short: ` `, + long: [ + { + language: "Typescript", + snippet: `const useStyles = createUseStyles({ + parentContainer: { + display: "flex", + flexDirection: "column", + gap: "16px", + padding: "16px", + }, +}); +const classes = useStyles(); +return ( +
+ {shortCode} +
+)`, + }, + { + language: "Javascript", + snippet: `const useStyles = createUseStyles({ + parentContainer: { + display: "flex", + flexDirection: "column", + padding: "16px", + }, +}); +const classes = useStyles(); +return ( +
+ {shortCode} +
+)`, + }, + ], + }, }, ]; @@ -265,18 +435,33 @@ export const snippetsSizes = [ export const snippetsCustomHelperText = [ { - language: "Web components", - snippet: ``, + long: `{shortCode}`, + }, }, { - language: "React", - snippet: ``, + long: [ + { + language: "Typescript", + snippet: `{shortCode}`, + }, + { + language: "Javascript", + snippet: `{shortCode}`, + }, + ], + }, }, ]; @@ -291,8 +476,9 @@ export const snippetsCustomHelperText = [ export const snippetsValidation = [ { - language: "Web components", - snippet: ``, + long: `{shortCode}`, + }, }, { - language: "React", - snippet: ``, + long: [ + { + language: "Typescript", + snippet: `{shortCode}`, + }, + { + language: "Javascript", + snippet: `{shortCode}`, + }, + ], + }, }, ]; @@ -358,12 +558,27 @@ export const snippetsValidation = [ export const snippetsDisabledPastDates = [ { - language: "Web components", - snippet: ``, + technology: "Web component", + snippets: { + short: ``, + long: `{shortCode}`, + }, }, { - language: "React", - snippet: ``, + technology: "React", + snippets: { + short: ``, + long: [ + { + language: "Typescript", + snippet: `{shortCode}`, + }, + { + language: "Javascript", + snippet: `{shortCode}`, + }, + ], + }, }, ]; @@ -378,12 +593,27 @@ export const snippetsDisabledPastDates = [ export const snippetsDisabledFutureDates = [ { - language: "Web components", - snippet: ``, + technology: "Web component", + snippets: { + short: ``, + long: `{shortCode}`, + }, }, { - language: "React", - snippet: ``, + technology: "React", + snippets: { + short: ``, + long: [ + { + language: "Typescript", + snippet: `{shortCode}`, + }, + { + language: "Javascript", + snippet: `{shortCode}`, + }, + ], + }, }, ]; @@ -398,20 +628,35 @@ export const snippetsDisabledFutureDates = [ export const snippetsMinMax = [ { - language: "Web components", - snippet: ``, + long: `{shortCode}`, + }, }, { - language: "React", - snippet: ``, + long: [ + { + language: "Typescript", + snippet: `{shortCode}`, + }, + { + language: "Javascript", + snippet: `{shortCode}`, + }, + ], + }, }, ]; @@ -427,22 +672,26 @@ export const snippetsMinMax = [ export const snippetsForm = [ { - language: "Web components", - snippet: `
+ technology: "Web component", + snippets: { + short: ` -
`, + long: `{shortCode} +`, + }, }, { - language: "React", - snippet: `const formSubmit = (ev) => { + technology: "React", + snippets: { + short: `const formSubmit = (ev) => { ev.preventDefault(); console.log(ev); }; @@ -453,6 +702,17 @@ return ( Reset );`, + long: [ + { + language: "Typescript", + snippet: `{shortCode}`, + }, + { + language: "Javascript", + snippet: `{shortCode}`, + }, + ], + }, }, ]; diff --git a/src/content/structured/components/date-picker/code.mdx b/src/content/structured/components/date-picker/code.mdx index 6f1243852..6ee5f4a8e 100644 --- a/src/content/structured/components/date-picker/code.mdx +++ b/src/content/structured/components/date-picker/code.mdx @@ -24,12 +24,56 @@ import { useState } from "react"; export const snippets = [ { - language: "Web Component", - snippet: ``, + technology: "Web component", + snippets: { + short: ``, + long: `.parent-container { + padding: 16px; + } + + +
+ {shortCode} +
`, + }, }, { - language: "React", - snippet: ``, + technology: "React", + snippets: { + short: ``, + long: [ + { + language: "Typescript", + snippet: `const useStyles = createUseStyles({ + parentContainer: { + padding: "16px", + }, +}); +const classes = useStyles(); +return ( +
+ {shortCode} +
+)`, + }, + { + language: "Javascript", + snippet: `const useStyles = createUseStyles({ + parentContainer: { + padding: "16px", + }, +}); +const classes = useStyles(); +return ( +
+ {shortCode} +
+)`, + }, + ], + }, }, ]; @@ -49,16 +93,79 @@ Set the size of the date picker by using the `size` prop. This prop takes the va export const sizes = [ { - language: "Web component", - snippet: ` - -`, + technology: "Web component", + snippets: { + short: ` + +`, + long: `.parent-container { + padding: 16px; + } + + +
+ {shortCode} +
`, + }, }, { - language: "React", - snippet: ` + technology: "React", + snippets: { + short: `IcDatePicker + label="When would you like to collect your coffee?" + size="small" +/> -`, +`, + long: [ + { + language: "Typescript", + snippet: `const useStyles = createUseStyles({ + parentContainer: { + display: "flex", + flexDirection: "column", + gap: "16px", + padding: "16px", + }, +}); +const classes = useStyles(); +return ( +
+ {shortCode} +
+)`, + }, + { + language: "Javascript", + snippet: `const useStyles = createUseStyles({ + parentContainer: { + display: "flex", + flexDirection: "column", + gap: "16px", + padding: "16px", + }, +}); +const classes = useStyles(); +return ( +
+ {shortCode} +
+)`, + }, + ], + }, }, ]; @@ -88,16 +195,96 @@ Set the size of the input field by using the `--input-width` CSS custom property export const maxWidth = [ { - language: "Web component", - snippet: ` - -`, + technology: "Web component", + snippets: { + short: ` + +`, + long: `.parent-container { + display: flex; + flex-direction: column; + gap: 16px; + padding: 16px; + } + ic-date-picker { + --input-width: 500px; + } + + +
+ {shortCode} +
`, + }, }, { - language: "React", - snippet: ` - -`, + technology: "React", + snippets: { + short: ` + +`, + long: [ + { + language: "Typescript", + snippet: `const useStyles = createUseStyles({ + parentContainer: { + display: "flex", + flexDirection: "column", + gap: "16px", + padding: "16px", + }, + datePicker: { + "--input-width": "500px", + }, +}); +const classes = useStyles(); +return ( +
+ {shortCode} +
+)`, + }, + { + language: "Javascript", + snippet: `const useStyles = createUseStyles({ + parentContainer: { + display: "flex", + flexDirection: "column", + gap: "16px", + padding: "16px", + }, + datePicker: { + "--input-width": "500px", + }, +}); +const classes = useStyles(); +return ( +
+ {shortCode} +
+)`, + }, + ], + }, }, ]; @@ -130,12 +317,60 @@ export const maxWidth = [ export const disabled = [ { - language: "Web component", - snippet: ``, + technology: "Web component", + snippets: { + short: ``, + long: `.parent-container { + padding: 16px; + } + + +
+ {shortCode} +
`, + }, }, { - language: "React", - snippet: ``, + technology: "React", + snippets: { + short: ``, + long: [ + { + language: "Typescript", + snippet: `const useStyles = createUseStyles({ + parentContainer: { + padding: "16px", + }, +}); +const classes = useStyles(); +return ( +
+ {shortCode} +
+)`, + }, + { + language: "Javascript", + snippet: `const useStyles = createUseStyles({ + parentContainer: { + padding: "16px", + }, +}); +const classes = useStyles(); +return ( +
+ {shortCode} +
+)`, + }, + ], + }, }, ]; @@ -150,16 +385,70 @@ The default format is `DD/MM/YYYY`. export const dateFormats = [ { - language: "Web component", - snippet: ` - -`, + technology: "Web component", + snippets: { + short: ` + +`, + long: `.parent-container { + display: flex; + flex-direction: column; + gap: 16px; + padding: 16px; + } + ic-date-picker { + --input-width: 500px; + } + + +
+ {shortCode} +
`, + }, }, { - language: "React", - snippet: ` + technology: "React", + snippets: { + short: ` `, + long: [ + { + language: "Typescript", + snippet: `const useStyles = createUseStyles({ + parentContainer: { + display: "flex", + flexDirection: "column", + gap: "16px", + padding: "16px", + }, +}); +const classes = useStyles(); +return ( +
+ {shortCode} +
+)`, + }, + { + language: "Javascript", + snippet: `const useStyles = createUseStyles({ + parentContainer: { + display: "flex", + flexDirection: "column", + gap: "16px", + padding: "16px", + }, +}); +const classes = useStyles(); +return ( +
+ {shortCode} +
+)`, + }, + ], + }, }, ]; @@ -183,12 +472,54 @@ The `value` prop sets the date in the input field. The value can be in any forma export const valueSnippet = [ { - language: "Web component", - snippet: ``, + technology: "Web component", + snippets: { + short: ``, + long: `.parent-container { + padding: 16px; + } + + +
+ {shortCode} +
`, + }, }, { - language: "React", - snippet: ``, + technology: "React", + snippets: { + short: ``, + long: [ + { + language: "Typescript", + snippet: `const useStyles = createUseStyles({ + parentContainer: { + padding: "16px", + }, +}); +const classes = useStyles(); +return ( +
+ {shortCode} +
+)`, + }, + { + language: "Javascript", + snippet: `const useStyles = createUseStyles({ + parentContainer: { + padding: "16px", + }, +}); +const classes = useStyles(); +return ( +
+ {shortCode} +
+)`, + }, + ], + }, }, ]; @@ -207,12 +538,54 @@ The supported formats are the same as for the `value` prop. export const openDate = [ { - language: "Web component", - snippet: ``, + technology: "Web component", + snippets: { + short: ``, + long: `.parent-container { + padding: 16px; + } + + +
+ {shortCode} +
`, + }, }, { - language: "React", - snippet: ``, + technology: "React", + snippets: { + short: ``, + long: [ + { + language: "Typescript", + snippet: `const useStyles = createUseStyles({ + parentContainer: { + padding: "16px", + }, +}); +const classes = useStyles(); +return ( +
+ {shortCode} +
+)`, + }, + { + language: "Javascript", + snippet: `const useStyles = createUseStyles({ + parentContainer: { + padding: "16px", + }, +}); +const classes = useStyles(); +return ( +
+ {shortCode} +
+)`, + }, + ], + }, }, ]; @@ -230,12 +603,54 @@ The first day of the week can be changed by setting the `startOfWeek` prop. This export const startWeek = [ { - language: "Web component", - snippet: ``, + technology: "Web component", + snippets: { + short: ``, + long: `.parent-container { + padding: 16px; + } + + +
+ {shortCode} +
`, + }, }, { - language: "React", - snippet: ``, + technology: "React", + snippets: { + short: ``, + long: [ + { + language: "Typescript", + snippet: `const useStyles = createUseStyles({ + parentContainer: { + padding: "16px", + }, +}); +const classes = useStyles(); +return ( +
+ {shortCode} +
+)`, + }, + { + language: "Javascript", + snippet: `const useStyles = createUseStyles({ + parentContainer: { + padding: "16px", + }, +}); +const classes = useStyles(); +return ( +
+ {shortCode} +
+)`, + }, + ], + }, }, ]; @@ -254,15 +669,59 @@ export const disabledDaysOfWeek = [0, 6]; export const disableDays = [ { - language: "Web component", - snippet: ` -`, + technology: "Web component", + snippets: { + short: ``, + long: `.parent-container { + padding: 16px; + } + + +
+ {shortCode} +
+ `, + }, }, { - language: "React", - snippet: `const disabledDaysOfWeek = [0, 6 ;`, + technology: "React", + snippets: { + short: ``, + long: [ + { + language: "Typescript", + snippet: `const disabledDaysOfWeek = [0, 6] +const useStyles = createUseStyles({ + parentContainer: { + padding: "16px", + }, +}); +const classes = useStyles(); +return ( +
+ {shortCode} +
+)`, + }, + { + language: "Javascript", + snippet: `const disabledDaysOfWeek = [0, 6]; +const useStyles = createUseStyles({ + parentContainer: { + padding: "16px", + }, +}); +const classes = useStyles(); +return ( +
+ {shortCode} +
+)`, + }, + ], + }, }, ]; @@ -279,12 +738,54 @@ The `max` and `min` props can be used to limit the range of dates available for export const maxMin = [ { - language: "Web component", - snippet: ``, + technology: "Web component", + snippets: { + short: ``, + long: `.parent-container { + padding: 16px; + } + + +
+ {shortCode} +
`, + }, }, { - language: "React", - snippet: ``, + technology: "React", + snippets: { + short: ``, + long: [ + { + language: "Typescript", + snippet: `const useStyles = createUseStyles({ + parentContainer: { + padding: "16px", + }, +}); +const classes = useStyles(); +return ( +
+ {shortCode} +
+)`, + }, + { + language: "Javascript", + snippet: `const useStyles = createUseStyles({ + parentContainer: { + padding: "16px", + }, +}); +const classes = useStyles(); +return ( +
+ {shortCode} +
+)`, + }, + ], + }, }, ]; @@ -304,12 +805,54 @@ Dates before today can be disabled with the `disablePast` prop. export const disablePast = [ { - language: "Web component", - snippet: ``, + technology: "Web component", + snippets: { + short: ``, + long: `.parent-container { + padding: 16px; + } + + +
+ {shortCode} +
`, + }, }, { - language: "React", - snippet: ``, + technology: "React", + snippets: { + short: ``, + long: [ + { + language: "Typescript", + snippet: `const useStyles = createUseStyles({ + parentContainer: { + padding: "16px", + }, +}); +const classes = useStyles(); +return ( +
+ {shortCode} +
+)`, + }, + { + language: "Javascript", + snippet: `const useStyles = createUseStyles({ + parentContainer: { + padding: "16px", + }, +}); +const classes = useStyles(); +return ( +
+ {shortCode} +
+)`, + }, + ], + }, }, ]; @@ -326,12 +869,54 @@ Dates after today can be disabled with the `disableFuture` prop. export const disableFuture = [ { - language: "Web component", - snippet: ``, + technology: "Web component", + snippets: { + short: ``, + long: `.parent-container { + padding: 16px; + } + + +
+ {shortCode} +
}`, + }, }, { - language: "React", - snippet: ``, + technology: "React", + snippets: { + short: ``, + long: [ + { + language: "Typescript", + snippet: `const useStyles = createUseStyles({ + parentContainer: { + padding: "16px", + }, +}); +const classes = useStyles(); +return ( +
+ {shortCode} +
+)`, + }, + { + language: "Javascript", + snippet: `const useStyles = createUseStyles({ + parentContainer: { + padding: "16px", + }, +}); +const classes = useStyles(); +return ( +
+ {shortCode} +
+)`, + }, + ], + }, }, ]; @@ -348,12 +933,54 @@ Days outside of the current month in view can be hidden by setting the `showDays export const dayHidden = [ { - language: "Web component", - snippet: ``, + technology: "Web component", + snippets: { + short: ``, + long: `.parent-container { + padding: 16px; + } + + +
+ {shortCode} +
`, + }, }, { - language: "React", - snippet: ``, + technology: "React", + snippets: { + short: ``, + long: [ + { + language: "Typescript", + snippet: `const useStyles = createUseStyles({ + parentContainer: { + padding: "16px", + }, +}); +const classes = useStyles(); +return ( +
+ {shortCode} +
+)`, + }, + { + language: "Javascript", + snippet: `const useStyles = createUseStyles({ + parentContainer: { + padding: "16px", + }, +}); +const classes = useStyles(); +return ( +
+ {shortCode} +
+)`, + }, + ], + }, }, ]; @@ -370,12 +997,54 @@ The "Go to today" and "Clear" buttons can be hidden from the calendar view by se export const btnHidden = [ { - language: "Web component", - snippet: ``, + technology: "Web component", + snippets: { + short: ``, + long: `.parent-container { + padding: 16px; + } + + +
+ {shortCode} +
`, + }, }, { - language: "React", - snippet: ``, + technology: "React", + snippets: { + short: ``, + long: [ + { + language: "Typescript", + snippet: `const useStyles = createUseStyles({ + parentContainer: { + padding: "16px", + }, +}); +const classes = useStyles(); +return ( +
+ {shortCode} +
+)`, + }, + { + language: "Javascript", + snippet: `const useStyles = createUseStyles({ + parentContainer: { + padding: "16px", + }, +}); +const classes = useStyles(); +return ( +
+ {shortCode} +
+)`, + }, + ], + }, }, ]; @@ -393,18 +1062,72 @@ Any prop that accepts a date value can be set to a Javascript Date object. The f export const jsDates = [ { - language: "Web component", - snippet: ` -`, + technology: "Web component", + snippets: { + short: ``, + long: `.parent-container { + padding: 16px; + } + + +
+ {shortCode} +
+ `, + }, }, { - language: "React", - snippet: ``, + technology: "React", + snippets: { + short: ``, + long: [ + { + language: "Typescript", + snippet: `const useStyles = createUseStyles({ + parentContainer: { + padding: "16px", + }, +}); +const classes = useStyles(); +return ( +
+ {shortCode} +
+)`, + }, + { + language: "Javascript", + snippet: `const useStyles = createUseStyles({ + parentContainer: { + padding: "16px", + }, +}); +const classes = useStyles(); +return ( +
+ {shortCode} +
+)`, + }, + ], + }, }, ]; @@ -425,37 +1148,96 @@ The `IcChange` event is emitted by the date picker when the selected date change export const change = [ { - language: "Web component", - snippet: ` -`, + technology: "Web component", + snippets: { + short: ` + + Selected date: +`, + long: `.parent-container { + display: flex; + flex-direction: column; + gap: 50px; + padding: 16px; + } + + +
+ {shortCode} +
+ `, + }, }, { - language: "React", - snippet: `export const DatePickerWithIcChange = () => { - const [selectedDate, setSelectedDate] = useState('Selected date:'); - const [value, setValue] = useState(); - const dateChangedHandler = (event) => { - setValue(event.detail.value); - setSelectedDate("Selected date:" + event.detail.value); - } - return ( -
- - - {selectedDate} - -
- ); -};`, + technology: "React", + snippets: { + short: ` + + {selectedDate} +`, + long: [ + { + language: "Typescript", + snippet: `const [selectedDate, setSelectedDate] = useState("Selected date:"); +const [value, setValue] = useState(); +const dateChangedHandler = (event: { detail: { value: Date; }; }) => { + setValue(event.detail.value); + setSelectedDate("Selected date: " + event.detail.value); +}; +const useStyles = createUseStyles({ + parentContainer: { + display: "flex", + flexDirection: "column", + gap: "50px", + padding: "16px", + }, +}); +const classes = useStyles(); +return ( +
+ {shortCode} +
+)`, + }, + { + language: "Javascript", + snippet: `const [selectedDate, setSelectedDate] = useState("Selected date:"); +const [value, setValue] = useState(); +const dateChangedHandler = (event) => { + setValue(event.detail.value); + setSelectedDate("Selected date: " + event.detail.value); +}; +const useStyles = createUseStyles({ + parentContainer: { + display: "flex", + flexDirection: "column", + gap: "50px", + padding: "16px", + }, +}); +const classes = useStyles(); +return ( +
+ {shortCode} +
+)`, + }, + ], + }, }, ]; diff --git a/src/content/structured/components/dialog/code.mdx b/src/content/structured/components/dialog/code.mdx index cf473e3f6..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: "2023-10-26" +date: "2024-05-02" title: "Dialog" @@ -45,8 +45,16 @@ export const buttonProps = [ export const snippetsDefault = [ { - language: "Web component", - snippet: ` -Launch dialog - - - You are about to add 'Americano' to your basket. Are you sure you want to continue? - -`, +`, + }, }, { - language: "React", - snippet: `const [openDialog, setOpenDialog] = useState(false); + technology: "React", + snippets: { + short: `Launch dialog + + + You are about to add 'Americano' to your basket. Are you sure you want + to continue? + +`, + long: [ + { + language: "Typescript", + snippet: `const [openDialog, setOpenDialog] = useState(false); const handleDialogOpen = () => setOpenDialog(true); const handleDialogClose = () => setOpenDialog(false); return ( <> - Launch dialog - - - You are about to add 'Americano' to your basket. Are you sure you want - to continue? - - + {shortCode} -) - `, +)`, + }, + { + language: "Javascript", + snippet: `const [openDialog, setOpenDialog] = useState(false); +const handleDialogOpen = () => setOpenDialog(true); +const handleDialogClose = () => setOpenDialog(false); +return ( + <> + {shortCode} + +)`, + }, + ], + }, }, ]; @@ -137,8 +158,16 @@ export const DefaultDialog = () => { export const snippetsSizes = [ { - language: "Web component", - snippet: ` -Launch sizes dialog -`, + }, + }, + { + technology: "React", + snippets: { + short: `Launch sizes dialog + - - You are about to add 'Americano' to your basket. Are you sure you want to continue? - -`, - }, - { - language: "React", - snippet: `const [openDialog, setOpenDialog] = useState(false); + + You are about to add 'Americano' to your basket. Are you sure you want to + continue? + +`, + long: [ + { + language: "Typescript", + snippet: `const [openDialog, setOpenDialog] = useState(false); +const handleDialogOpen = () => setOpenDialog(true); +const handleDialogClose = () => setOpenDialog(false); +return ( + <> + {shortCode} + +);`, + }, + { + language: "Javascript", + snippet: `const [openDialog, setOpenDialog] = useState(false); const handleDialogOpen = () => setOpenDialog(true); const handleDialogClose = () => setOpenDialog(false); return ( <> - Launch sizes dialog - - - You are about to add 'Americano' to your basket. Are you sure you want to - continue? - - + {shortCode} );`, + }, + ], + }, }, ]; @@ -228,8 +265,29 @@ export const SizesDialogs = () => { export const snippetsAlert = [ { - language: "Web component", - snippet: ` -Launch status dialog -`, + }, + }, + { + technology: "React", + snippets: { + short: ` + Launch status dialog + + - - - - You are about to add 'Americano' to your basket. Are you sure you want to continue? - -`, - }, - { - language: "React", - snippet: `const [openDialog, setOpenDialog] = useState(false); + variant="neutral" // "neutral" | "info" | "warn" | "error" | "success" + titleAbove + /> + + You are about to add 'Americano' to your basket. Are you sure you want + to continue? + +`, + long: [ + { + language: "Typescript", + snippet: `const [openDialog, setOpenDialog] = useState(false); const handleDialogOpen = () => setOpenDialog(true); const handleDialogClose = () => setOpenlDialog(false); return ( <> - - Launch status dialog - - - - - You are about to add 'Americano' to your basket. Are you sure you want - to continue? - - + {shortCode} );`, + }, + { + language: "Javascript", + snippet: `const [openDialog, setOpenDialog] = useState(false); +const handleDialogOpen = () => setOpenDialog(true); +const handleDialogClose = () => setOpenlDialog(false); +return ( + <> + {shortCode} + +);`, + }, + ], + }, }, ]; @@ -358,8 +416,41 @@ export const AlertDialog = () => { export const snippetsCustomButtons = [ { - language: "Web component", - snippet: ` - Launch no button dialog - Launch single button dialog - Launch three button dialog - Launch destructive button dialog - - Sorry, you cannot place orders at the moment. Please try again later. - - - - Your order for an Americano coffee has been placed. - - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod - tempor incididunt ut labore et dolore magna aliqua. - - - - You are about to cancel your order for an Americano. Are you sure you want to continue? - - `, + `, + }, }, { - language: "React", - snippet: `const [openNoButtonDialog, setOpenNoButtonDialog] = useState(false); + technology: "React", + snippets: { + short: `
+ + Launch no button dialog + + + Launch single button dialog + + + Launch three button dialog + + + Launch destructive button dialog + +
+ + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. + + + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. + + + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. + + + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. + +`, + long: [ + { + language: "Typescript", + snippet: `const [openNoButtonDialog, setOpenNoButtonDialog] = useState(false); +const [openSingleButtonDialog, setOpenSingleButtonDialog] = useState(false); +const [openThreeButtonsDialog, setOpenThreeButtonsDialog] = useState(false); +const [openDestructiveButtonDialog, setOpenDestructiveButtonDialog] = useState(false); +const handleNoButtonDialogOpen = () => setOpenNoButtonDialog(true); +const handleSingleButtonDialogOpen = () => setOpenSingleButtonDialog(true); +const handleThreeButtonsDialogOpen = () => setOpenThreeButtonsDialog(true); +const handleDestructiveButtonDialogOpen = () => setOpenDestructiveButtonDialog(true); +const handleDialogClose = () => { + setOpenNoButtonDialog(false); + setOpenSingleButtonDialog(false); + setOpenThreeButtonsDialog(false); + setOpenDestructiveButtonDialog(false); +} +const useStyles = createUseStyles({ + btnContainer: { + display: "flex", + gap: "8px", + flexWrap: "wrap", + }, +}); +const classes = useStyles(); +return ( + <> + {shortCode} + +)`, + }, + { + language: "Javascript", + snippet: `const [openNoButtonDialog, setOpenNoButtonDialog] = useState(false); const [openSingleButtonDialog, setOpenSingleButtonDialog] = useState(false); const [openThreeButtonsDialog, setOpenThreeButtonsDialog] = useState(false); const [openDestructiveButtonDialog, setOpenDestructiveButtonDialog] = useState(false); @@ -438,89 +613,22 @@ const handleDialogClose = () => { setOpenThreeButtonsDialog(false); setOpenDestructiveButtonDialog(false); } +const useStyles = createUseStyles({ + btnContainer: { + display: "flex", + gap: "8px", + flexWrap: "wrap", + }, +}); +const classes = useStyles(); return ( <> -
- - Launch no button dialog - - - Launch single button dialog - - - Launch three button dialog - - - Launch destructive button dialog - -
- - - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do - eiusmod tempor incididunt ut labore et dolore magna aliqua. - - - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do - eiusmod tempor incididunt ut labore et dolore magna aliqua. - - - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do - eiusmod tempor incididunt ut labore et dolore magna aliqua. - - - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do - eiusmod tempor incididunt ut labore et dolore magna aliqua. - - + {shortCode} -);`, +)`, + }, + ], + }, }, ]; @@ -643,8 +751,22 @@ export const CustomButtonsDialog = () => { export const snippetsSlottedButtons = [ { - language: "Web component", - snippet: ` -Launch dialog - - - You are about to add 'Americano' to your basket. Are you sure you want to continue? - - - Go back - - - Add to basket - -`, +`, + }, }, { - language: "React", - snippet: `const [openDialog, setOpenDialog] = useState(false); + technology: "React", + snippets: { + short: `Launch slotted buttons dialog + + + You are about to add 'Americano' to your basket. Are you sure you want + to continue? + + + Go back + + + Add to basket + +`, + long: [ + { + language: "Typescript", + snippet: `const [openDialog, setOpenDialog] = useState(false); const handleDialogOpen = () => setOpenDialog(true); const handleDialogClose = () => setOpenDialog(false); const handleAddToBasket = () => { @@ -685,26 +818,27 @@ const handleAddToBasket = () => { } return ( <> - Launch slotted buttons dialog - - - You are about to add 'Americano' to your basket. Are you sure you want - to continue? - - - Go back - - - Add to basket - - + {shortCode} + +);`, + }, + { + language: "Javascript", + snippet: `const [openDialog, setOpenDialog] = useState(false); +const handleDialogOpen = () => setOpenDialog(true); +const handleDialogClose = () => setOpenDialog(false); +const handleAddToBasket = () => { + alert("Added to basket"); + setOpenDialog(false); +} +return ( + <> + {shortCode} );`, + }, + ], + }, }, ]; @@ -752,32 +886,9 @@ export const SlottedButtonsDialog = () => { export const interactiveContentSnippet = [ { - language: "Web component", - snippet: ` -Launch dialog + technology: "Web component", + snippets: { + short: `Launch dialog `, + long: `.parent-container { + padding: 16px; + } + ic-checkbox-group { + margin-top: 8px + } + + +
+ {shortCode} +
+ `, + }, }, { - language: "React", - snippet: `const [termsAgreed, setTermsAgreed] = useState(false); -const [openDialog, setOpenDialog] = useState(false); + technology: "React", + snippets: { + short: `Launch dialog + + + Before continuing, please agree to our terms and conditions. + + + + +`, + long: [ + { + language: "Typescript", + snippet: `const [termsAgreed, setTermsAgreed] = useState(false); +const [openDialog, setOpenDialog] = useState(false); const handleDialogOpen = () => setOpenDialog(true); const handleDialogClose = () => setOpenDialog(false); const toggleTermsAgreed = () => { setTermsAgreed(!termsAgreed); -} +}; const termsDialogConfirmed = (ev) => { const message = (termsAgreed) ? "Terms agreed" : "Terms not agreed"; alert(message); setOpenDialog(false); -} +}; +const useStyles = createUseStyles({ + parentContainer: { + padding: "16px", + }, + checkboxGroup: { + marginTop: "8px", + }, +}); +const classes = useStyles(); return ( - <> - Launch dialog - - - Before continuing, please agree to our terms and conditions. - - - - - - -);`, +
+ {shortCode} +
+)`, + }, + { + language: "Javascript", + snippet: `const [termsAgreed, setTermsAgreed] = useState(false); +const [openDialog, setOpenDialog] = useState(false); +const handleDialogOpen = () => setOpenDialog(true); +const handleDialogClose = () => setOpenDialog(false); +const toggleTermsAgreed = () => { + setTermsAgreed(!termsAgreed); +}; +const termsDialogConfirmed = (ev) => { + const message = (termsAgreed) ? "Terms agreed" : "Terms not agreed"; + alert(message); + setOpenDialog(false); +}; +const useStyles = createUseStyles({ + parentContainer: { + padding: "16px", + }, + checkboxGroup: { + marginTop: "8px", + }, +}); +return ( +
+ {shortCode} +
+)`, + }, + ], + }, }, ]; @@ -894,8 +1085,21 @@ export const InteractiveContent = () => { export const noCloseSnippet = [ { - language: "Web component", - snippet: ` -Launch dialog -`, + }, + }, + { + technology: "React", + snippets: { + short: `Launch dialog + - + You are about to add 'Americano' to your basket. Are you sure you want to continue? - -`, - }, - { - language: "React", - snippet: `const [openDialog, setOpenDialog] = useState(false); -const handleDialogOpen = () => setOpenDialog(true); -const handleDialogClose = () => setOpenDialog(false); -const handleConfirmDialog = (ev) => { - alert("Confirmed!"); - setOpenDialog(false); -}; -return ( - <> - Launch dialog - - - You are about to add 'Americano' to your basket. Are you sure you want to continue? - - - -);`, + +`, + long: [ + { + language: "Typescript", + snippet: `const [openDialog, setOpenDialog] = useState(false); + const handleDialogOpen = () => setOpenDialog(true); + const handleDialogClose = () => setOpenDialog(false); + const handleConfirmDialog = (ev) => { + alert("Confirmed!"); + setOpenDialog(false); + }; + return ( + <> + {shortCode} + + + );`, + }, + { + language: "Javascript", + snippet: `const [openDialog, setOpenDialog] = useState(false); + const handleDialogOpen = () => setOpenDialog(true); + const handleDialogClose = () => setOpenDialog(false); + const handleConfirmDialog = (ev) => { + alert("Confirmed!"); + setOpenDialog(false); + }; + return ( + <> + {shortCode} + + + );`, + }, + ], + }, }, ]; @@ -992,11 +1211,25 @@ export const NoCloseContent = () => { export const eventsSnippet = [ { - language: "Web component", - snippet: ` -Launch dialog - - +`, + }, + }, + { + technology: "React", + snippets: { + short: `Launch dialog + + You are about to add 'Americano' to your basket. Are you sure you want to continue? - - + + Cancel - - + + Confirm - -`, - }, - { - language: "React", - snippet: `const [openDialog, setOpenDialog] = useState(false); + +`, + long: [ + { + language: "Typescript", + snippet: `const [openDialog, setOpenDialog] = useState(false); const handleDialogOpen = () => setOpenDialog(true); const handleDialogClose = () => setOpenDialog(false); const handleDialogOpened = () => alert("Dialog opened"); @@ -1073,28 +1319,46 @@ const handleSlottedConfirm = () => { }; return ( <> - Launch dialog - - - You are about to add 'Americano' to your basket. Are you sure you want to continue? - - - Cancel - - - Confirm - - + {shortCode} -);`, +)`, + }, + { + language: "Javascript", + snippet: `const [openDialog, setOpenDialog] = useState(false); +const handleDialogOpen = () => setOpenDialog(true); +const handleDialogClose = () => setOpenDialog(false); +const handleDialogOpened = () => alert("Dialog opened"); +const handleDialogClosed = () => { + alert("Dialog closed"); + if (openDialog) { + handleDialogClose(); + } +} +const handleDialogCancelled = () => { + alert("Dialog cancelled"); + setOpenDialog(false); +} +const handleDialogConfirmed = () => { + alert("Dialog confirmed"); + setOpenDialog(false); +}; +const handleSlottedCancel = () => { + alert('Slotted cancel button'); + setOpenDialog(false); +}; +const handleSlottedConfirm = () => { + alert('Slotted confirm button'); + setOpenDialog(false); +}; +return ( + <> + {shortCode} + +)`, + }, + ], + }, }, ]; @@ -1164,8 +1428,20 @@ export const EventsContent = () => { export const popoutElements = [ { - language: "Web component", - snippet: ` -Launch disabled height constraint dialog - - 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?
- 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!
- -`, +`, + }, }, { - language: "React", - snippet: `const [openDialog, setOpenDialog] = useState(false); + technology: "React", + snippets: { + short: `Launch disabled height constraint dialog + + + 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? + +
+ + 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! + +
+ +`, + long: [ + { + language: "Typescript", + snippet: `const [openDialog, setOpenDialog] = useState(false); const handleDialogOpen = () => setOpenDialog(true); const handleDialogClose = () => setOpenDialog(false); return ( <> - Launch disabled height constraint dialog - - 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?
- 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!
- - + {shortCode} + +)`, + }, + { + language: "Javascript", + snippet: `const [openDialog, setOpenDialog] = useState(false); +const handleDialogOpen = () => setOpenDialog(true); +const handleDialogClose = () => setOpenDialog(false); +return ( + <> + {shortCode} )`, + }, + ], + }, }, ]; diff --git a/src/content/structured/components/empty-state/code.mdx b/src/content/structured/components/empty-state/code.mdx index 49b2ff75b..2343e6236 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: "2023-08-09" +date: "2024-05-02" title: "Empty state" @@ -25,59 +25,75 @@ import { IcEmptyState, IcButton, IcLink } from "@ukic/react"; export const snippets = [ { - language: "Web component", - snippet: ` - - - - - - - - - - - - - - - - Go to favourite coffees - - Customer support - + technology: "Web component", + snippets: { + short: ` + + + + + + + + + + + + + + + + Go to favourite coffees + + Customer support + `, + long: `{shortCode}`, + }, }, { - language: "React", - snippet: ` - - - - - - - - - - - - - - - - Go to favourite coffees - - Customer support - - `, + technology: "React", + snippets: { + short: ` + + + + + + + + + + + + + + + + Go to favourite coffees + + Customer support + +`, + long: [ + { + language: "Typescript", + snippet: `{shortCode}`, + }, + { + language: "Javascript", + snippet: `{shortCode}`, + }, + ], + }, }, ]; @@ -119,26 +135,41 @@ export const snippets = [ export const actionsSnippets = [ { - language: "Web component", - snippet: ` - Go to favourite coffees - Customer support + Go to favourite coffees + Customer support `, + long: `{shortCode}`, + }, }, { - language: "React", - snippet: ` - Go to favourite coffees - Customer support + Go to favourite coffees + Customer support `, + long: [ + { + language: "Typescript", + snippet: `{shortCode}`, + }, + { + language: "Javascript", + snippet: `{shortCode}`, + }, + ], + }, }, ]; @@ -159,58 +190,73 @@ export const actionsSnippets = [ export const imageSnippets = [ { - language: "Web component", - snippet: ` - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + `, + long: `{shortCode}`, + }, }, { - language: "React", - snippet: ` - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + `, + long: [ + { + language: "Typescript", + snippet: `{shortCode}`, + }, + { + language: "Javascript", + snippet: `{shortCode}`, + }, + ], + }, }, ]; @@ -242,60 +288,75 @@ export const imageSnippets = [ export const imageLargeSnippets = [ { - language: "Web component", - snippet: ` - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + `, + long: `{shortCode}`, + }, }, { - language: "React", - snippet: ` - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + `, + long: [ + { + language: "Typescript", + snippet: `{shortCode}`, + }, + { + language: "Javascript", + snippet: `{shortCode}`, + }, + ], + }, }, ]; @@ -328,11 +389,12 @@ export const imageLargeSnippets = [ export const iconSnippets = [ { - language: "Web component", - snippet: ` `, + long: `{shortCode}`, + }, }, { - language: "React", - snippet: ` `, + long: [ + { + language: "Typescript", + snippet: `{shortCode}`, + }, + { + language: "Javascript", + snippet: `{shortCode}`, + }, + ], + }, }, ]; @@ -390,22 +466,37 @@ export const iconSnippets = [ export const rightSnippets = [ { - language: "Web component", - snippet: ` + technology: "Web component", + snippets: { + short: ` `, + long: `{shortCode}`, + }, }, { - language: "React", - snippet: ``, + long: [ + { + language: "Typescript", + snippet: `{shortCode}`, + }, + { + language: "Javascript", + snippet: `{shortCode}`, + }, + ], + }, }, ]; @@ -422,22 +513,37 @@ export const rightSnippets = [ export const centreSnippets = [ { - language: "Web component", - snippet: ` `, + long: `{shortCode}`, + }, }, { - language: "React", - snippet: ``, + long: [ + { + language: "Typescript", + snippet: `{shortCode}`, + }, + { + language: "Javascript", + snippet: `{shortCode}`, + }, + ], + }, }, ]; @@ -454,22 +560,37 @@ export const centreSnippets = [ export const maxLinesSnippets = [ { - language: "Web component", - snippet: ` + technology: "Web component", + snippets: { + short: ` `, + long: `{shortCode}`, + }, }, { - language: "React", - snippet: ``, + long: [ + { + language: "Typescript", + snippet: `{shortCode}`, + }, + { + language: "Javascript", + snippet: `{shortCode}`, + }, + ], + }, }, ]; diff --git a/src/content/structured/components/footer/code.mdx b/src/content/structured/components/footer/code.mdx index 3d46260a4..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-02-02" +date: "2024-05-02" title: "Footer" @@ -27,42 +27,59 @@ import { NavLink, MemoryRouter } from "react-router-dom"; export const snippets = [ { - language: "Web component", - snippet: ` - - Accessibility - - - Styles - - - Components - - - Patterns - + technology: "Web component", + snippets: { + short: ` + + Accessibility + + + Styles + + + Components + + + Patterns + `, + long: `{shortCode}`, + }, }, { - language: "React", - snippet: ` - - Accessibility - - - Styles - - - Components - - - Patterns - + technology: "React", + snippets: { + short: ` + + Accessibility + + + Styles + + + Components + + + Patterns + `, + long: [ + { + language: "Typescript", + snippet: `{shortCode}`, + }, + { + language: "Javascript", + snippet: `{shortCode}`, + }, + ], + }, }, ]; @@ -71,16 +88,16 @@ export const snippets = [ description="The UK Intelligence Community Design System (ICDS) is a joint project by MI6, GCHQ, MI5, and partners." caption="All content is available under the Open Government Licence v3.0, except source code and code examples which are available under the MIT Licence." > - + Accessibility - + Styles - + Components - + Patterns @@ -104,56 +121,71 @@ export const snippets = [ export const snippetsGroupedLinks = [ { - language: "Web component", - snippet: ` - - Accessibility - Styles - Components - Patterns - - - Accessibility - Styles - Components - Patterns - - - Accessibility - Styles - Components - Patterns - - `, + technology: "Web component", + snippets: { + short: ` + + Accessibility + Styles + Components + Patterns + + + Accessibility + Styles + Components + Patterns + + + Accessibility + Styles + Components + Patterns + +`, + long: `{shortCode}`, + }, }, { - language: "React", - snippet: ` - - Accessibility - Styles - Components - Patterns - - - Accessibility - Styles - Components - Patterns - - - Accessibility - Styles - Components - Patterns - - `, + technology: "React", + snippets: { + short: ` + + Accessibility + Styles + Components + Patterns + + + Accessibility + Styles + Components + Patterns + + + Accessibility + Styles + Components + Patterns + +`, + long: [ + { + language: "Typescript", + snippet: `{shortCode}`, + }, + { + language: "Javascript", + snippet: `{shortCode}`, + }, + ], + }, }, ]; @@ -164,22 +196,22 @@ export const snippetsGroupedLinks = [ please get in touch." > - Accessibility - Styles - Components - Patterns + Accessibility + Styles + Components + Patterns - Accessibility - Styles - Components - Patterns + Accessibility + Styles + Components + Patterns - Accessibility - Styles - Components - Patterns + Accessibility + Styles + Components + Patterns @@ -188,18 +220,19 @@ export const snippetsGroupedLinks = [ export const snippetsLogoLinks = [ { - language: "Web component", - snippet: ` - Accessibility - Styles - Components - Patterns + technology: "Web component", + snippets: { + short: ` + Accessibility + Styles + Components + Patterns
- + - +
`, + long: `{shortCode}`, + }, }, { - language: "React", - snippet: ` - Accessibility - Styles - Components - Patterns + technology: "React", + snippets: { + short: ` + Accessibility + Styles + Components + Patterns
- + - +
`, + long: [ + { + language: "Typescript", + snippet: `{shortCode}`, + }, + { + language: "Javascript", + snippet: `{shortCode}`, + }, + ], + }, }, ]; - + Accessibility - + Styles - + Components - + Patterns
- + - + + technology: "React", + snippets: { + short: ` - This is the accessibility page} /> - This page is about styles} /> + This is the accessibility page} /> + This page is about styles} /> - Accessibility + Accessibility Styles -
+ Logo +
+ +`, + long: [ + { + language: "Typescript", + snippet: `const useStyles = createUseStyles({ + logoContainer: { + width: "100px", + height: "100px", + display: "flex", + alignItems: "center", + justifyContent: "center", + backgroundColor: "var(--ic-theme-primary)", + color: "var(--ic-theme-text)" + }, +}); +const classes = useStyles(); +return ( + {shortCode} +)`, + }, + { + language: "Javascript", + snippet: `const useStyles = createUseStyles({ + logoContainer: { width: "100px", height: "100px", display: "flex", @@ -345,12 +420,14 @@ export const withReactRouter = [ justifyContent: "center", backgroundColor: "var(--ic-theme-primary)", color: "var(--ic-theme-text)" - }}> - Logo -
- - - `, + }, +}); +return ( + {shortCode} +)`, + }, + ], + }, }, ]; @@ -364,7 +441,7 @@ export const withReactRouter = [ caption="This information is exempt under the Freedom of Information Act 2000 (FOIA) and may be exempt under other UK information legislation." > - Accessibility + Accessibility Styles @@ -393,16 +470,17 @@ Adding a `minHeight` of `100vh` ensures the footer appears below the page fold. export const footerLayoutExample = [ { - language: "Web component", - snippet: `
-
+ technology: "Web component", + snippets: { + short: `
+
@@ -427,25 +505,35 @@ export const footerLayoutExample = [ - Accessibility - Styles - Components - Patterns + Accessibility + Styles + Components + Patterns
`, + long: `.div-container { + min-height: 100vh; + } + + +
+ {shortCode} +
`, + }, }, { - language: "React", - snippet: `
-
+ technology: "React", + snippets: { + short: `
+
@@ -470,12 +558,39 @@ export const footerLayoutExample = [ - Accessibility - Styles - Components - Patterns + Accessibility + Styles + Components + Patterns
`, + long: [ + { + language: "Typescript", + snippet: `const useStyles = createUseStyles({ + divContainer: { + minHeight: "100vh", + }, +}); +const classes = useStyles(); +return ( + {shortCode} +)`, + }, + { + language: "Javascript", + snippet: `const useStyles = createUseStyles({ + divContainer: { + minHeight: "100vh", + }, +}); +const classes = useStyles(); +return ( + {shortCode} +)`, + }, + ], + }, }, ]; diff --git a/src/content/structured/components/hero/code.mdx b/src/content/structured/components/hero/code.mdx index da66868f5..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: "2023-10-25" +date: "2024-05-02" title: "Hero" @@ -25,24 +25,50 @@ import { IcHero, IcButton, IcSearchBar, IcCard } from "@ukic/react"; export const snippets = [ { - language: "Web component", - snippet: ` Explore - Check out our new drinks + + Check out our new drinks + `, + long: `ic-hero { + height: fit-content; + } + + + {shortCode}`, + }, }, { - language: "React", - snippet: ` - Explore - Check out our new drinks + + Explore + + + Check out our new drinks + `, + long: [ + { + language: "Typescript", + snippet: `{shortCode}`, + }, + { + language: "Javascript", + snippet: `{shortCode}`, + }, + ], + }, }, ]; @@ -70,24 +96,69 @@ export const snippets = [ export const snippetsCentre = [ { - language: "Web component", - snippet: ` Explore - Check out our new drinks + + Check out our new drinks + `, + long: `ic-hero { + height: fit-content; + } + + + {shortCode}`, + }, }, { - language: "React", - snippet: ` - Explore - Check out our new drinks + + Explore + + + Check out our new drinks + `, + long: [ + { + language: "Typescript", + snippet: `const useStyles = createUseStyles({ + hero: { + height: "fit-content", + }, + }); + const classes = useStyles(); + return ( + {shortCode} + )`, + }, + { + language: "Javascript", + snippet: `const useStyles = createUseStyles({ + hero: { + height: "fit-content", + }, + }); + const classes = useStyles(); + return ( + {shortCode} + )`, + }, + ], + }, }, ]; @@ -110,24 +181,71 @@ export const snippetsCentre = [ export const snippetsContentCentre = [ { - language: "Web component", - snippet: ` Explore - Check out our new drinks + + Check out our new drinks + `, + long: `ic-hero { + height: fit-content; + } + + + {shortCode}`, + }, }, { - language: "React", - snippet: ` - Explore - Check out our new drinks + + Explore + + + Check out our new drinks + `, + long: [ + { + language: "Typescript", + snippet: `const useStyles = createUseStyles({ + hero: { + height: "fit-content", + }, + }); + const classes = useStyles(); + return ( + {shortCode} + )`, + }, + { + language: "Javascript", + snippet: `const useStyles = createUseStyles({ + hero: { + height: "fit-content", + }, + }); + const classes = useStyles(); + return ( + {shortCode} + )`, + }, + ], + }, }, ]; @@ -151,8 +269,9 @@ export const snippetsContentCentre = [ export const snippetsSmall = [ { - language: "Web component", - snippet: `Order now Submit new flavour `, + long: `ic-hero { + height: fit-content; + } + + + {shortCode}`, + }, }, { - language: "React", - snippet: ` - Order now - Submit new flavour + + Order now + + + Submit new flavour + `, + long: [ + { + language: "Typescript", + snippet: `const useStyles = createUseStyles({ + hero: { + height: "fit-content", + }, + }); + const classes = useStyles(); + return ( + {shortCode} + )`, + }, + { + language: "Javascript", + snippet: `const useStyles = createUseStyles({ + hero: { + height: "fit-content", + }, + }); + const classes = useStyles(); + return ( + {shortCode} + )`, + }, + ], + }, }, ]; @@ -193,26 +352,67 @@ export const snippetsSmall = [ export const snippetsSecondHeadingSearch = [ { - language: "Web component", - snippet: ` - + `, + long: `ic-hero { + height: fit-content; + } + + + {shortCode}`, + }, }, { - language: "React", - snippet: ` `, + long: [ + { + language: "Typescript", + snippet: `const useStyles = createUseStyles({ + hero: { + height: "fit-content", + }, + }); + const classes = useStyles(); + return ( + {shortCode} + )`, + }, + { + language: "Javascript", + snippet: `const useStyles = createUseStyles({ + hero: { + height: "fit-content", + }, + }); + const classes = useStyles(); + return ( + {shortCode} + )`, + }, + ], + }, }, ]; @@ -231,8 +431,9 @@ export const snippetsSecondHeadingSearch = [ export const snippetsCard = [ { - language: "Web component", - snippet: ` - -`, + + {shortCode}`, + }, }, { - language: "React", - snippet: ` Explore Check out our new drinks @@ -270,13 +479,44 @@ export const snippetsCard = [ heading="Out now" message="Try our new strawberry infused tea." slot="secondary" - class="hero-card" - style={{ - color: "var(--ic-theme-text)", - width: "300px" - }} + className={classes.heroCard} /> `, + long: [ + { + language: "Typescript", + snippet: `const useStyles = createUseStyles({ + heroCard: { + color: "var(--ic-theme-text)", + width: "300px", + }, + hero: { + height: "fit-content", + }, +}); +const classes = useStyles(); +return ( + {shortCode} +)`, + }, + { + language: "Javascript", + snippet: `const useStyles = createUseStyles({ + heroCard: { + color: "var(--ic-theme-text)", + width: "300px", + }, + hero: { + height: "fit-content", + }, +}); +const classes = useStyles(); +return ( + {shortCode} +)`, + }, + ], + }, }, ]; @@ -311,8 +551,9 @@ export const snippetsCard = [ export const snippetsImage = [ { - language: "Web component", - snippet: `Check out our new drinks @@ -342,21 +581,31 @@ export const snippetsImage = [ `, + long: `.card-image { + width: 300px; + } + ic-hero { + height: fit-content; + } + + + {shortCode}`, + }, }, { - language: "React", - snippet: ` Explore Check out our new drinks @@ -375,6 +624,39 @@ export const snippetsImage = [ `, + long: [ + { + language: "Typescript", + snippet: `const useStyles = createUseStyles({ + cardImage: { + width: "300px", + }, + hero: { + height: "fit-content", + }, +}); +const classes = useStyles(); +return ( + {shortCode} +)`, + }, + { + language: "Javascript", + snippet: `const useStyles = createUseStyles({ + cardImage: { + width: "300px", + }, + hero: { + height: "fit-content", + }, +}); +const classes = useStyles(); +return ( + {shortCode} +)`, + }, + ], + }, }, ]; diff --git a/src/content/structured/components/links/code.mdx b/src/content/structured/components/links/code.mdx index 6752557ba..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: "2023-07-27" +date: "2024-05-02" title: "Link" @@ -25,12 +25,27 @@ import { MemoryRouter, NavLink } from "react-router-dom"; export const snippets = [ { - language: "Web component", - snippet: `About our coffees`, + technology: "Web component", + snippets: { + short: `About our coffees`, + long: `{shortCode}`, + }, }, { - language: "React", - snippet: `About our coffees`, + technology: "React", + snippets: { + short: `About our coffees`, + long: [ + { + language: "Typescript", + snippet: `{shortCode}`, + }, + { + language: "Javascript", + snippet: `{shortCode}`, + }, + ], + }, }, ]; @@ -52,12 +67,27 @@ export const snippets = [ export const snippetsIcon = [ { - language: "Web component", - snippet: `About our coffees`, + technology: "Web component", + snippets: { + short: `About our coffees`, + long: `{shortCode}`, + }, }, { - language: "React", - snippet: `About our coffees`, + technology: "React", + snippets: { + short: `About our coffees`, + long: [ + { + language: "Typescript", + snippet: `{shortCode}`, + }, + { + language: "Javascript", + snippet: `{shortCode}`, + }, + ], + }, }, ]; @@ -67,18 +97,111 @@ export const snippetsIcon = [ -### Light and dark +### Appearance export const snippetsLightDark = [ { - language: "Web component", - snippet: `About our coffees -About our coffees`, + technology: "Web component", + snippets: { + short: `About our coffees +About our coffees`, + long: `.parent-container { + display: flex; + flex-wrap: wrap; + } + .light-background { + padding: 8px; + } + .dark-background { + background: #333333; + padding: 8px; + } + + +
+
+ + About our coffees + +
+
+ + About our coffees + +
+
`, + }, }, { - language: "React", - snippet: `About our coffees -About our coffees`, + technology: "React", + snippets: { + short: `About our coffees +About our coffees`, + long: [ + { + language: "Typescript", + snippet: `const useStyles = createUseStyles({ + parentContainer: { + display: 'flex', + flexWrap: 'wrap', + }, + lightBackground: { + padding: '8px', + }, + darkBackground: { + background: '#333333', + padding: '8px', + }, +}); +const classes = useStyles(); +return ( +
+
+ + About our coffees + +
+
+ + About our coffees + +
+
+)`, + }, + { + language: "Javascript", + snippet: `const useStyles = createUseStyles({ + parentContainer: { + display: 'flex', + flexWrap: 'wrap', + }, + lightBackground: { + padding: '8px', + }, + darkBackground: { + background: '#333333', + padding: '8px', + }, +}); +const classes = useStyles(); +return ( +
+
+ + About our coffees + +
+
+ + About our coffees + +
+
+)`, + }, + ], + }, }, ]; @@ -108,9 +231,10 @@ export const snippetsLightDark = [ export const withReactRouter = [ { - language: "React", - snippet: ` -
+ technology: "React", + snippets: { + short: ` +
Home @@ -120,12 +244,40 @@ export const withReactRouter = [
- This is the home page} /> - This page is about beverages} /> + This is the home page} /> + This page is about beverages} /> - - `, +`, + long: [ + { + language: "Typescript", + snippet: `const useStyles = createUseStyles({ + divContainer: { + display: "flex", + gap: "8px", + }, +}); +const classes = useStyles(); +return ( + {shortCode} +)`, + }, + { + language: "Javascript", + snippet: `const useStyles = createUseStyles({ + divContainer: { + display: "flex", + gap: "8px", + }, +}); +const classes = useStyles(); +return ( + {shortCode} +)`, + }, + ], + }, }, ]; diff --git a/src/content/structured/components/loading-indicators/code.mdx b/src/content/structured/components/loading-indicators/code.mdx index d8d8f170a..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: "2023-02-03" +date: "2024-05-02" title: "Loading indicator" @@ -28,14 +28,33 @@ import { IcLoadingIndicator } from "@ukic/react"; export const snippets = [ { - language: "Web component", - snippet: ` -`, + technology: "Web component", + snippets: { + short: ` +`, + long: `{shortCode}`, + }, }, { - language: "React", - snippet: ` + technology: "React", + snippets: { + short: ` `, + long: [ + { + language: "Typescript", + snippet: `<> + {shortCode} +`, + }, + { + language: "Javascript", + snippet: `<> + {shortCode} +`, + }, + ], + }, }, ]; @@ -57,18 +76,37 @@ export const snippets = [ export const snippetsSizes = [ { - language: "Web component", - snippet: ` - - -`, + technology: "Web component", + snippets: { + short: ` + + +`, + long: `{shortCode}`, + }, }, { - language: "React", - snippet: ` + technology: "React", + snippets: { + short: ` `, + long: [ + { + language: "Typescript", + snippet: `<> + {shortCode} +`, + }, + { + language: "Javascript", + snippet: `<> + {shortCode} +`, + }, + ], + }, }, ]; @@ -86,12 +124,27 @@ export const snippetsSizes = [ export const snippetsIcon = [ { - language: "Web component", - snippet: ``, + technology: "Web component", + snippets: { + short: ``, + long: `{shortCode}`, + }, }, { - language: "React", - snippet: ``, + technology: "React", + snippets: { + short: ``, + long: [ + { + language: "Typescript", + snippet: `{shortCode}`, + }, + { + language: "Javascript", + snippet: `{shortCode}`, + }, + ], + }, }, ]; @@ -103,14 +156,33 @@ export const snippetsIcon = [ export const snippetsDeterminate = [ { - language: "Web component", - snippet: ` -`, + technology: "Web component", + snippets: { + short: ` +`, + long: `{shortCode}`, + }, }, { - language: "React", - snippet: ` + technology: "React", + snippets: { + short: ` `, + long: [ + { + language: "Typescript", + snippet: `<> + {shortCode} +`, + }, + { + language: "Javascript", + snippet: `<> + {shortCode} +`, + }, + ], + }, }, ]; @@ -138,14 +210,72 @@ export const snippetsDeterminate = [ export const snippetsLight = [ { - language: "Web component", - snippet: ` -`, + technology: "Web component", + snippets: { + short: ` + `, + long: `.dark-background { + flex-direction: column; + gap: 8px; + background: #333333; + } + + +
+ {shortCode} +
`, + }, }, { - language: "React", - snippet: ` -`, + technology: "React", + snippets: { + short: ` +`, + long: [ + { + language: "Typescript", + snippet: `const useStyles = createUseStyles({ + darkBackground: { + display: "flex", + flexDirection: "column", + gap: "8px", + background: "#333333", + }, +}); +const classes = useStyles(); +return ( +
+ {shortCode} +
+)`, + }, + { + language: "Javascript", + snippet: `const useStyles = createUseStyles({ + darkBackground: { + display: "flex", + flexDirection: "column", + gap: "8px", + background: "#333333", + }, +}); +const classes = useStyles(); +return ( +
+ {shortCode} +
+)`, + }, + ], + }, }, ]; @@ -153,20 +283,39 @@ export const snippetsLight = [ snippets={snippetsLight} style={{ flexDirection: "column", gap: "8px", background: "#333333" }} > - - + + ### Changing label export const snippetsChangingLabel = [ { - language: "Web component", - snippet: ``, + technology: "Web component", + snippets: { + short: ``, + long: `{shortCode}`, + }, }, { - language: "React", - snippet: ``, + technology: "React", + snippets: { + short: ``, + long: [ + { + language: "Typescript", + snippet: `{shortCode}`, + }, + { + language: "Javascript", + snippet: `{shortCode}`, + }, + ], + }, }, ]; @@ -174,6 +323,6 @@ export const snippetsChangingLabel = [ diff --git a/src/content/structured/components/multi-select/code.mdx b/src/content/structured/components/multi-select/code.mdx index b1d7a6aa4..8e05128d1 100644 --- a/src/content/structured/components/multi-select/code.mdx +++ b/src/content/structured/components/multi-select/code.mdx @@ -30,28 +30,59 @@ import { export const snippets = [ { - language: "Web component", - snippet: ` -`, - }, - { - language: "React", - snippet: ``, + long: `.parent-container { + padding: 16px; + } + + +
+ {shortCode} +
+ `, + }, + }, + { + technology: "React", + snippets: { + short: ` console.log(event.detail.value)} + onIcOptionSelect={(event) => console.log(event.detail.value)} + onIcOptionDeselect={(event) => console.log(event.detail.value)} + multiple +/>`, + long: [ + { + language: "Typescript", + snippet: `const useStyles = createUseStyles({ + parentContainer: { + padding: "16px", + }, +}); +const classes = useStyles(); +const options = [ { label: "Cappuccino", value: "Cap" }, { label: "Latte", value: "Lat" }, { label: "Americano", value: "Ame" }, @@ -59,11 +90,29 @@ options={[ { label: "Flat white", value: "Fla" }, { label: "Mocha", value: "Moc" }, { label: "Macchiato", value: "Mac" }, -]} -onIcChange={(event) => console.log(event.detail.value)} -onIcOptionSelect={(event) => console.log(event.detail.value)} -onIcOptionDeselect={(event) => console.log(event.detail.value)} -/>`, +]; +return ( +
+ {shortCode} +
+)`, + }, + { + language: "Javascript", + snippet: `const useStyles = createUseStyles({ + parentContainer: { + padding: "16px", + }, +}); +const classes = useStyles(); +return ( +
+ {shortCode} +
+)`, + }, + ], + }, }, ]; @@ -87,31 +136,62 @@ Show options as pre-selected by setting the `value` prop to an array containing export const defaultValue = [ { - language: "Web component", - snippet: ` ->`, - }, - { - language: "React", - snippet: ``, + long: `.parent-container { + padding: 16px; + } + + +
+ {shortCode} +
+ `, + }, + }, + { + technology: "React", + snippets: { + short: ` console.log(event.detail.value)} + onIcOptionSelect={(event) => console.log(event.detail.value)} + onIcOptionDeselect={(event) => console.log(event.detail.value)} + multiple +/>`, + long: [ + { + language: "Typescript", + snippet: `const useStyles = createUseStyles({ + parentContainer: { + padding: "16px", + }, +}); +const classes = useStyles(); +const options = [ { label: "Cappuccino", value: "Cap" }, { label: "Latte", value: "Lat" }, { label: "Americano", value: "Ame" }, @@ -119,11 +199,38 @@ options={[ { label: "Flat white", value: "Fla" }, { label: "Mocha", value: "Moc" }, { label: "Macchiato", value: "Mac" }, -]} -onIcChange={(event) => console.log(event.detail.value)} -onIcOptionSelect={(event) => console.log(event.detail.value)} -onIcOptionDeselect={(event) => console.log(event.detail.value)} -/>`, +]; +return ( +
+ {shortCode} +
+)`, + }, + { + language: "Javascript", + snippet: `const useStyles = createUseStyles({ + parentContainer: { + padding: "16px", + }, +}); +const classes = useStyles(); +const options = [ + { label: "Cappuccino", value: "Cap" }, + { label: "Latte", value: "Lat" }, + { label: "Americano", value: "Ame" }, + { label: "Filter", value: "Fil" }, + { label: "Flat white", value: "Fla" }, + { label: "Mocha", value: "Moc" }, + { label: "Macchiato", value: "Mac" }, +]; +return ( +
+ {shortCode} +
+)`, + }, + ], + }, }, ]; @@ -144,29 +251,61 @@ This will appear when the user has selected some options and allow them to easil export const clear = [ { - language: "Web component", - snippet: ` -`, - }, - { - language: "React", - snippet: ``, + long: `.parent-container { + padding: 16px; + } + + +
+ {shortCode} +
+ `, + }, + }, + { + technology: "React", + snippets: { + short: ` console.log(event.detail.value)} + onIcOptionSelect={(event) => console.log(event.detail.value)} + onIcOptionDeselect={(event) => console.log(event.detail.value)} + multiple + showClearButton +/>`, + long: [ + { + language: "Typescript", + snippet: `const useStyles = createUseStyles({ + parentContainer: { + padding: "16px", + }, +}); +const classes = useStyles(); +const options = [ { label: "Cappuccino", value: "Cap" }, { label: "Latte", value: "Lat" }, { label: "Americano", value: "Ame" }, @@ -174,11 +313,38 @@ options={[ { label: "Flat white", value: "Fla" }, { label: "Mocha", value: "Moc" }, { label: "Macchiato", value: "Mac" }, -]} -onIcChange={(event) => console.log(event.detail.value)} -onIcOptionSelect={(event) => console.log(event.detail.value)} -onIcOptionDeselect={(event) => console.log(event.detail.value)} -/>`, +]; +return ( +
+ {shortCode} +
+)`, + }, + { + language: "Javascript", + snippet: `const useStyles = createUseStyles({ + parentContainer: { + padding: "16px", + }, +}); +const classes = useStyles(); +const options = [ + { label: "Cappuccino", value: "Cap" }, + { label: "Latte", value: "Lat" }, + { label: "Americano", value: "Ame" }, + { label: "Filter", value: "Fil" }, + { label: "Flat white", value: "Fla" }, + { label: "Mocha", value: "Moc" }, + { label: "Macchiato", value: "Mac" }, +]; +return ( +
+ {shortCode} +
+)`, + }, + ], + }, }, ]; @@ -197,11 +363,85 @@ Display extra information about the options by providing a description using the export const desc = [ { - language: "Web component", - snippet: ` -`, + }, + }, + { + technology: "React", + snippets: { + short: ` console.log(event.detail.value)} + onIcOptionSelect={(event) => console.log(event.detail.value)} + onIcOptionDeselect={(event) => console.log(event.detail.value)} + multiple +/>`, + long: [ + { + language: "Typescript", + snippet: `const useStyles = createUseStyles({ + parentContainer: { + padding: "16px", + }, +}); +const classes = useStyles(); +const options = [ { label: "Cappuccino", value: "Cap", @@ -218,14 +458,15 @@ export const desc = [ description: "Espresso coffee diluted with hot water", }, { - label: "Filter", + label: "Filter", value: "Fil", description: "Coffee filtered using paper or a mesh", }, { label: "Flat white", value: "Fla", - description: "Coffee without froth made with espresso and hot steamed milk", + description: + "Coffee without froth made with espresso and hot steamed milk", }, { label: "Mocha", @@ -237,14 +478,23 @@ export const desc = [ value: "Mac", description: "Espresso coffee with a dash of frothy steamed milk", }, - ]; -`, +]; +return ( +
+ {shortCode} +
+)`, + }, + { + language: "Javascript", + snippet: `const useStyles = createUseStyles({ + parentContainer: { + padding: "16px", }, +}); +const classes = useStyles(); +const options = [ { - language: "React", - snippet: ` console.log(event.detail.value)} -onIcOptionSelect={(event) => console.log(event.detail.value)} -onIcOptionDeselect={(event) => console.log(event.detail.value)} -/>`, +]; +return ( +
+ {shortCode} +
+)`, + }, + ], + }, }, ]; @@ -301,29 +556,61 @@ Display helper text to provide additional information by using the `helperText` export const helper = [ { - language: "Web component", - snippet: ` -`, - }, - { - language: "React", - snippet: ``, + long: `.parent-container { + padding: 16px; + } + + +
+ {shortCode} +
+ `, + }, + }, + { + technology: "React", + snippets: { + short: ` console.log(event.detail.value)} + onIcOptionSelect={(event) => console.log(event.detail.value)} + onIcOptionDeselect={(event) => console.log(event.detail.value)} + multiple +/>`, + long: [ + { + language: "Typescript", + snippet: `const useStyles = createUseStyles({ + parentContainer: { + padding: "16px", + }, +}); +const classes = useStyles(); +const options = [ { label: "Cappuccino", value: "Cap" }, { label: "Latte", value: "Lat" }, { label: "Americano", value: "Ame" }, @@ -331,11 +618,38 @@ options={[ { label: "Flat white", value: "Fla" }, { label: "Mocha", value: "Moc" }, { label: "Macchiato", value: "Mac" }, -]} -onIcChange={(event) => console.log(event.detail.value)} -onIcOptionSelect={(event) => console.log(event.detail.value)} -onIcOptionDeselect={(event) => console.log(event.detail.value)} -/>`, +]; +return ( +
+ {shortCode} +
+)`, + }, + { + language: "Javascript", + snippet: `const useStyles = createUseStyles({ + parentContainer: { + padding: "16px", + }, +}); +const classes = useStyles(); +const options = [ + { label: "Cappuccino", value: "Cap" }, + { label: "Latte", value: "Lat" }, + { label: "Americano", value: "Ame" }, + { label: "Filter", value: "Fil" }, + { label: "Flat white", value: "Fla" }, + { label: "Mocha", value: "Moc" }, + { label: "Macchiato", value: "Mac" }, +]; +return ( +
+ {shortCode} +
+)`, + }, + ], + }, }, ]; @@ -356,29 +670,86 @@ The `default` variant is seen in the first [default](#default) example. export const sizes = [ { - language: "Web component", - snippet: ` - - -`, - }, - { - language: "React", - snippet: `const OPTIONS = [ + technology: "Web component", + snippets: { + short: ` + +`, + long: `.parent-container { + display: flex; + flex-direction: column; + gap: 16px; + padding: 16px; + } + + +
+ {shortCode} +
+ `, + }, + }, + { + technology: "React", + snippets: { + short: ` + +`, + long: [ + { + language: "Typescript", + snippet: `const useStyles = createUseStyles({ + parentContainer: { + display: "flex", + flexDirection: "column", + gap: "16px", + padding: "16px", + }, +}); +const classes = useStyles(); +const options = [ { label: "Cappuccino", value: "Cap" }, { label: "Latte", value: "Lat" }, { label: "Americano", value: "Ame" }, @@ -386,10 +757,40 @@ export const sizes = [ { label: "Flat white", value: "Fla" }, { label: "Mocha", value: "Moc" }, { label: "Macchiato", value: "Mac" }, -] - - -`, +]; +return ( +
+ {shortCode} +
+)`, + }, + { + language: "Javascript", + snippet: `const useStyles = createUseStyles({ + parentContainer: { + display: "flex", + flexDirection: "column", + padding: "16px", + }, +}); +const classes = useStyles(); +const options = [ + { label: "Cappuccino", value: "Cap" }, + { label: "Latte", value: "Lat" }, + { label: "Americano", value: "Ame" }, + { label: "Filter", value: "Fil" }, + { label: "Flat white", value: "Fla" }, + { label: "Mocha", value: "Moc" }, + { label: "Macchiato", value: "Mac" }, +]; +return ( +
+ {shortCode} +
+)`, + }, + ], + }, }, ]; @@ -421,12 +822,80 @@ Disable the multi-select and prevent user interaction by using the `disabled` pr export const disabled = [ { - language: "Web component", - snippet: ``, + technology: "Web component", + snippets: { + short: ``, + long: `.parent-container { + padding: 16px; + } + + +
+ {shortCode} +
`, + }, }, { - language: "React", - snippet: ``, + technology: "React", + snippets: { + short: ``, + long: [ + { + language: "Typescript", + snippet: `const useStyles = createUseStyles({ + parentContainer: { + padding: "16px", + }, +}); +const classes = useStyles(); +const options = [ + { label: "Cappuccino", value: "Cap" }, + { label: "Latte", value: "Lat" }, + { label: "Americano", value: "Ame" }, + { label: "Filter", value: "Fil" }, + { label: "Flat white", value: "Fla" }, + { label: "Mocha", value: "Moc" }, + { label: "Macchiato", value: "Mac" }, +]; +return ( +
+ {shortCode} +
+)`, + }, + { + language: "Javascript", + snippet: `const useStyles = createUseStyles({ + parentContainer: { + padding: "16px", + }, +}); +const classes = useStyles(); +const options = [ + { label: "Cappuccino", value: "Cap" }, + { label: "Latte", value: "Lat" }, + { label: "Americano", value: "Ame" }, + { label: "Filter", value: "Fil" }, + { label: "Flat white", value: "Fla" }, + { label: "Mocha", value: "Moc" }, + { label: "Macchiato", value: "Mac" }, +]; +return ( +
+ {shortCode} +
+)`, + }, + ], + }, }, ]; @@ -446,27 +915,59 @@ Disable certain options by setting the `disabled` property to `true` for each op export const disabledOptions = [ { - language: "Web component", - snippet: ` -`, - }, - { - language: "React", - snippet: ``, + long: `.parent-container { + padding: 16px; + } + + +
+ {shortCode} +
+ `, + }, + }, + { + technology: "React", + snippets: { + short: ` console.log(event.detail.value)} + onIcOptionSelect={(event) => console.log(event.detail.value)} + onIcOptionDeselect={(event) => console.log(event.detail.value)} + multiple +/>`, + long: [ + { + language: "Typescript", + snippet: `const useStyles = createUseStyles({ + parentContainer: { + padding: "16px", + }, +}); +const classes = useStyles(); +const options = [ { label: "Cappuccino", value: "Cap" }, { label: "Latte", value: "Lat", disabled: true }, { label: "Americano", value: "Ame" }, @@ -474,11 +975,38 @@ export const disabledOptions = [ { label: "Flat white", value: "Fla", disabled: true }, { label: "Mocha", value: "Moc" }, { label: "Macchiato", value: "Mac" }, -]} -onIcChange={(event) => console.log(event.detail.value)} -onIcOptionSelect={(event) => console.log(event.detail.value)} -onIcOptionDeselect={(event) => console.log(event.detail.value)} -/>`, +]; +return ( +
+ {shortCode} +
+)`, + }, + { + language: "Javascript", + snippet: `const useStyles = createUseStyles({ + parentContainer: { + padding: "16px", + }, +}); +const classes = useStyles(); +const options = [ + { label: "Cappuccino", value: "Cap" }, + { label: "Latte", value: "Lat", disabled: true }, + { label: "Americano", value: "Ame" }, + { label: "Filter", value: "Fil", disabled: true }, + { label: "Flat white", value: "Fla", disabled: true }, + { label: "Mocha", value: "Moc" }, + { label: "Macchiato", value: "Mac" }, +]; +return ( +
+ {shortCode} +
+)`, + }, + ], + }, }, ]; @@ -498,27 +1026,58 @@ Hide the visible label for the multi-select by using the `hideLabel` prop. export const hideLabel = [ { - language: "Web component", - snippet: ` -`, - }, - { - language: "React", - snippet: ``, + long: `.parent-container { + padding: 16px; + } + + +
+ {shortCode} +
+ `, + }, + }, + { + technology: "React", + snippets: { + short: ``, + long: [ + { + language: "Typescript", + snippet: `const useStyles = createUseStyles({ + parentContainer: { + padding: "16px", + }, +}); +const classes = useStyles(); +const options = [ { label: "Cappuccino", value: "Cap" }, { label: "Latte", value: "Lat" }, { label: "Americano", value: "Ame" }, @@ -526,8 +1085,38 @@ export const hideLabel = [ { label: "Flat white", value: "Fla" }, { label: "Mocha", value: "Moc" }, { label: "Macchiato", value: "Mac" }, -]} -/>`, +]; +return ( +
+ {shortCode} +
+)`, + }, + { + language: "Javascript", + snippet: `const useStyles = createUseStyles({ + parentContainer: { + padding: "16px", + }, +}); +const classes = useStyles(); +const options = [ + { label: "Cappuccino", value: "Cap" }, + { label: "Latte", value: "Lat" }, + { label: "Americano", value: "Ame" }, + { label: "Filter", value: "Fil" }, + { label: "Flat white", value: "Fla" }, + { label: "Mocha", value: "Moc" }, + { label: "Macchiato", value: "Mac" }, +]; +return ( +
+ {shortCode} +
+)`, + }, + ], + }, }, ]; @@ -548,27 +1137,58 @@ This will display an asterisk next to the label and apply the `aria-required` at export const required = [ { - language: "Web component", - snippet: ` -`, - }, - { - language: "React", - snippet: ``, + long: `.parent-container { + padding: 16px; + } + + +
+ {shortCode} +
+ `, + }, + }, + { + technology: "React", + snippets: { + short: ``, + long: [ + { + language: "Typescript", + snippet: `const useStyles = createUseStyles({ + parentContainer: { + padding: "16px", + }, +}); +const classes = useStyles(); +const options = [ { label: "Cappuccino", value: "Cap" }, { label: "Latte", value: "Lat" }, { label: "Americano", value: "Ame" }, @@ -576,8 +1196,38 @@ export const required = [ { label: "Flat white", value: "Fla" }, { label: "Mocha", value: "Moc" }, { label: "Macchiato", value: "Mac" }, -]} -/>`, +]; +return ( +
+ {shortCode} +
+)`, + }, + { + language: "Javascript", + snippet: `const useStyles = createUseStyles({ + parentContainer: { + padding: "16px", + }, +}); +const classes = useStyles(); +const options = [ + { label: "Cappuccino", value: "Cap" }, + { label: "Latte", value: "Lat" }, + { label: "Americano", value: "Ame" }, + { label: "Filter", value: "Fil" }, + { label: "Flat white", value: "Fla" }, + { label: "Mocha", value: "Moc" }, + { label: "Macchiato", value: "Mac" }, +]; +return ( +
+ {shortCode} +
+)`, + }, + ], + }, }, ]; @@ -599,28 +1249,60 @@ Use the `value` prop to set which options are selected and will be displayed whe export const read = [ { - language: "Web component", - snippet: ` -`, - }, - { - language: "React", - snippet: ``, + long: `.parent-container { + padding: 16px; + } + + +
+ {shortCode} +
+ `, + }, + }, + { + technology: "React", + snippets: { + short: ``, + long: [ + { + language: "Typescript", + snippet: `const useStyles = createUseStyles({ + parentContainer: { + padding: "16px", + }, +}); +const classes = useStyles(); +const options = [ { label: "Cappuccino", value: "Cap" }, { label: "Latte", value: "Lat" }, { label: "Americano", value: "Ame" }, @@ -628,8 +1310,38 @@ export const read = [ { label: "Flat white", value: "Fla" }, { label: "Mocha", value: "Moc" }, { label: "Macchiato", value: "Mac" }, -]} -/>`, +]; +return ( +
+ {shortCode} +
+)`, + }, + { + language: "Javascript", + snippet: `const useStyles = createUseStyles({ + parentContainer: { + padding: "16px", + }, +}); +const classes = useStyles(); +const options = [ + { label: "Cappuccino", value: "Cap" }, + { label: "Latte", value: "Lat" }, + { label: "Americano", value: "Ame" }, + { label: "Filter", value: "Fil" }, + { label: "Flat white", value: "Fla" }, + { label: "Mocha", value: "Moc" }, + { label: "Macchiato", value: "Mac" }, +]; +return ( +
+ {shortCode} +
+)`, + }, + ], + }, }, ]; @@ -652,11 +1364,63 @@ The parent option will be rendered as the title of the group. export const group = [ { - language: "Web component", - snippet: ` -`, + }, + }, + { + technology: "React", + snippets: { + short: ``, + long: [ + { + language: "Typescript", + snippet: `const useStyles = createUseStyles({ + parentContainer: { + padding: "16px", + }, +}); +const classes = useStyles(); +const options = [ { label: "Fancy", children: [ @@ -671,15 +1435,22 @@ export const group = [ { label: "Latte", value: "Lat" }, ], }, - ]; - select.addEventListener("icChange", function (event) { - console.log(event.detail.value); - }); -`, +]; +return ( +
+ {shortCode} +
+)`, + }, + { + language: "Javascript", + snippet: `const useStyles = createUseStyles({ + parentContainer: { + padding: "16px", }, - { - language: "React", - snippet: ``, +]; +return ( +
+ {shortCode} +
+)`, + }, + ], + }, }, ]; @@ -716,27 +1494,56 @@ This will allow for quick access to these options. export const recc = [ { - language: "Web component", - snippet: ` -`, - }, - { - language: "React", - snippet: ``, + long: `.parent-container { + padding: 16px; + } + + +
+ {shortCode} +
+ `, + }, + }, + { + technology: "React", + snippets: { + short: ``, + long: [ + { + language: "Typescript", + snippet: `const useStyles = createUseStyles({ + parentContainer: { + padding: "16px", + }, +}); +const classes = useStyles(); +const options = [ { label: "Cappuccino", value: "Cap" }, { label: "Latte", value: "Lat" }, { label: "Americano", value: "Ame", recommended: true }, @@ -744,8 +1551,38 @@ export const recc = [ { label: "Flat white", value: "Fla", recommended: true }, { label: "Mocha", value: "Moc" }, { label: "Macchiato", value: "Mac" }, -]} -/>`, +]; +return ( +
+ {shortCode} +
+)`, + }, + { + language: "Javascript", + snippet: `const useStyles = createUseStyles({ + parentContainer: { + padding: "16px", + }, +}); +const classes = useStyles(); +const options = [ + { label: "Cappuccino", value: "Cap" }, + { label: "Latte", value: "Lat" }, + { label: "Americano", value: "Ame", recommended: true }, + { label: "Filter", value: "Fil" }, + { label: "Flat white", value: "Fla", recommended: true }, + { label: "Mocha", value: "Moc" }, + { label: "Macchiato", value: "Mac" }, +]; +return ( +
+ {shortCode} +
+)`, + }, + ], + }, }, ]; @@ -766,27 +1603,60 @@ The `validation-status` prop takes the values `success`, `warning` or `error`. export const validation = [ { - language: "Web component", - snippet: ` -`, - }, - { - language: "React", - snippet: ``, + long: `.parent-container { + padding: 16px; + } + + +
+ {shortCode} +
+ `, + }, + }, + { + technology: "React", + snippets: { + short: ``, + long: [ + { + language: "Typescript", + snippet: `const useStyles = createUseStyles({ + parentContainer: { + padding: "16px", + }, +}); +const classes = useStyles(); +const options = [ { label: "Cappuccino", value: "Cap" }, { label: "Latte", value: "Lat" }, { label: "Americano", value: "Ame" }, @@ -794,8 +1664,38 @@ export const validation = [ { label: "Flat white", value: "Fla" }, { label: "Mocha", value: "Moc" }, { label: "Macchiato", value: "Mac" }, -]} -/>`, +]; +return ( +
+ {shortCode} +
+)`, + }, + { + language: "Javascript", + snippet: `const useStyles = createUseStyles({ + parentContainer: { + padding: "16px", + }, +}); +const classes = useStyles(); +const options = [ + { label: "Cappuccino", value: "Cap" }, + { label: "Latte", value: "Lat" }, + { label: "Americano", value: "Ame" }, + { label: "Filter", value: "Fil" }, + { label: "Flat white", value: "Fla" }, + { label: "Mocha", value: "Moc" }, + { label: "Macchiato", value: "Mac" }, +]; +return ( +
+ {shortCode} +
+)`, + }, + ], + }, }, ]; @@ -818,27 +1718,60 @@ The multi-select will show a loading error after the amount of time specified us export const loading = [ { - language: "Web component", - snippet: ` -`, - }, - { - language: "React", - snippet: ``, + long: `.parent-container { + padding: 16px; + } + + +
+ {shortCode} +
+ `, + }, + }, + { + technology: "React", + snippets: { + short: ``, + long: [ + { + language: "Typescript", + snippet: `const useStyles = createUseStyles({ + parentContainer: { + padding: "16px", + }, +}); +const classes = useStyles(); +const options = [ { label: "Cappuccino", value: "Cap" }, { label: "Latte", value: "Lat" }, { label: "Americano", value: "Ame" }, @@ -846,8 +1779,38 @@ export const loading = [ { label: "Flat white", value: "Fla" }, { label: "Mocha", value: "Moc" }, { label: "Macchiato", value: "Mac" }, -]} -/>`, +]; +return ( +
+ {shortCode} +
+)`, + }, + { + language: "Javascript", + snippet: `const useStyles = createUseStyles({ + parentContainer: { + padding: "16px", + }, +}); +const classes = useStyles(); +const options = [ + { label: "Cappuccino", value: "Cap" }, + { label: "Latte", value: "Lat" }, + { label: "Americano", value: "Ame" }, + { label: "Filter", value: "Fil" }, + { label: "Flat white", value: "Fla" }, + { label: "Mocha", value: "Moc" }, + { label: "Macchiato", value: "Mac" }, +]; +return ( +
+ {shortCode} +
+)`, + }, + ], + }, }, ]; @@ -857,7 +1820,7 @@ export const loading = [ label="What are your favourite types of coffee?" multiple loading - timeout="1000" + timeout={1000} options={OPTIONS} />
diff --git a/src/content/structured/components/page-header/code.mdx b/src/content/structured/components/page-header/code.mdx index 25d89d223..5ac3b5975 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: "2023-10-25" +date: "2024-05-02" title: "Page header" @@ -40,63 +40,80 @@ import { NavLink, MemoryRouter } from "react-router-dom"; export const snippets = [ { - language: "Web component", - snippet: ` - - - Create coffee - - - Filter coffee - - - - - - - - `, + technology: "Web component", + snippets: { + short: ` + + + Create coffee + + + Filter coffee + + + + + + + +`, + long: `{shortCode}`, + }, }, { - language: "React", - snippet: ` - - - Create coffee - - - Filter coffee - - - - - - - + + + Create coffee + + + Filter coffee + + + + - `, + + + +`, + long: [ + { + language: "Typescript", + snippet: `{shortCode}`, + }, + { + language: "Javascript", + snippet: `{shortCode}`, + }, + ], + }, }, ]; @@ -141,12 +158,36 @@ export const snippets = [ export const snippetsSmall = [ { - language: "Web component", - snippet: ``, + technology: "Web component", + snippets: { + short: ` +`, + long: `{shortCode}`, + }, }, { - language: "React", - snippet: ``, + technology: "React", + snippets: { + short: ``, + long: [ + { + language: "Typescript", + snippet: `{shortCode}`, + }, + { + language: "Javascript", + snippet: `{shortCode}`, + }, + ], + }, }, ]; @@ -162,8 +203,9 @@ export const snippetsSmall = [ export const withBreadcrumbNavigation = [ { - language: "Web component", - snippet: ` + technology: "Web component", + snippets: { + short: ` @@ -176,10 +218,13 @@ export const withBreadcrumbNavigation = [ `, + long: `{shortCode}`, + }, }, { - language: "React", - snippet: ` + technology: "React", + snippets: { + short: ` @@ -191,6 +236,17 @@ export const withBreadcrumbNavigation = [ `, + long: [ + { + language: "Typescript", + snippet: `{shortCode}`, + }, + { + language: "Javascript", + snippet: `{shortCode}`, + }, + ], + }, }, ]; @@ -215,8 +271,9 @@ export const withBreadcrumbNavigation = [ export const withActionsInputStepper = [ { - language: "Web component", - snippet: ` + technology: "Web component", + snippets: { + short: ` Create coffee Filter coffee @@ -228,10 +285,17 @@ export const withActionsInputStepper = [ `, + long: `{shortCode}`, + }, }, { - language: "React", - snippet: ` + technology: "React", + snippets: { + short: ` Create coffee @@ -247,6 +311,17 @@ export const withActionsInputStepper = [ `, + long: [ + { + language: "Typescript", + snippet: `{shortCode}`, + }, + { + language: "Javascript", + snippet: `{shortCode}`, + }, + ], + }, }, ]; @@ -288,8 +363,9 @@ export const withActionsInputStepper = [ export const withActionsInputTabs = [ { - language: "Web component", - snippet: ` `, + long: `{shortCode}`, + }, }, { - language: "React", - snippet: ` + reverseOrder +> Create coffee @@ -346,6 +426,17 @@ export const withActionsInputTabs = [ /> `, + long: [ + { + language: "Typescript", + snippet: `{shortCode}`, + }, + { + language: "Javascript", + snippet: `{shortCode}`, + }, + ], + }, }, ]; @@ -380,8 +471,9 @@ export const withActionsInputTabs = [ export const withReactRouter = [ { - language: "React", - snippet: ` + technology: "React", + snippets: { + short: ` - - This page is about our Latte making methods}/> - This page is about the ingredients used in our Latte}/> - + + This page is about our Latte making methods}/> + This page is about the ingredients used in our Latte}/> + `, + long: [ + { + language: "Typescript", + snippet: `const useStyles = createUseStyles({ + textField: { + '@media (max-width: 576px)': { + width: '280px;' + } + } + }) + const classes = useStyles(); + return( + {shortCode} + )`, + }, + { + language: "Javascript", + snippet: `const useStyles = createUseStyles({ + text: { + '@media (max-width: 576px)': { + width: '280px;' + } + } + }) + const classes = useStyles(); + return( + {shortCode} + )`, + }, + ], + }, }, ]; @@ -486,8 +609,9 @@ export const withReactRouter = [ export const withSlots = [ { - language: "Web component", - snippet: ` + technology: "Web component", + snippets: { + short: ` Latte recipe A Latte is a popular Italian coffee, made with espresso, steamed milk and a thin layer of foam. @@ -498,10 +622,13 @@ export const withSlots = [ `, + long: `{shortCode}`, + }, }, { - language: "React", - snippet: ` + technology: "React", + snippets: { + short: ` Latte recipe @@ -522,6 +649,17 @@ export const withSlots = [ hideLabel /> `, + long: [ + { + language: "Typescript", + snippet: `{shortCode}`, + }, + { + language: "Javascript", + snippet: `{shortCode}`, + }, + ], + }, }, ]; diff --git a/src/content/structured/components/pagination/code.mdx b/src/content/structured/components/pagination/code.mdx index d012bdd98..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: "2023-05-05" +date: "2024-05-02" title: "Pagination" @@ -25,14 +25,33 @@ import { IcPagination } from "@ukic/react"; export const snippets = [ { - language: "Web component", - snippet: ` + technology: "Web component", + snippets: { + short: ` `, + long: `{shortCode}`, + }, }, { - language: "React", - snippet: ` + technology: "React", + snippets: { + short: ` `, + long: [ + { + language: "Typescript", + snippet: `<> + {shortCode} +`, + }, + { + language: "Javascript", + snippet: `<> + {shortCode} +`, + }, + ], + }, }, ]; @@ -56,12 +75,30 @@ export const snippets = [ export const hideFirstLast = [ { - language: "Web component", - snippet: ``, + technology: "Web component", + snippets: { + short: ``, + long: `{shortCode}`, + }, }, { - language: "React", - snippet: ``, + technology: "React", + snippets: { + short: ``, + long: [ + { + language: "Typescript", + snippet: `{shortCode}`, + }, + { + language: "Javascript", + snippet: `{shortCode}`, + }, + ], + }, }, ]; @@ -76,12 +113,27 @@ export const hideFirstLast = [ export const hideCurrent = [ { - language: "Web component", - snippet: ``, + technology: "Web component", + snippets: { + short: ``, + long: `{shortCode}`, + }, }, { - language: "React", - snippet: ``, + technology: "React", + snippets: { + short: ``, + long: [ + { + language: "Typescript", + snippet: `{shortCode}`, + }, + { + language: "Javascript", + snippet: `{shortCode}`, + }, + ], + }, }, ]; @@ -96,14 +148,46 @@ export const hideCurrent = [ export const appearance = [ { - language: "Web component", - snippet: ` -`, + technology: "Web component", + snippets: { + short: ` +`, + long: `.dark-background { + background-color: #2c2f34; + } + + + {shortCode}`, + }, }, { - language: "React", - snippet: ` -`, + technology: "React", + snippets: { + short: ` +`, + long: [ + { + language: "Typescript", + snippet: `const useStyles = createUseStyles({ + darkBackground: { + backgroundColor: "#2c2f34", + } +}); +const classes = useStyles(); +return ( + <> + {shortCode} + +)`, + }, + { + language: "Javascript", + snippet: `<> + {shortCode} +`, + }, + ], + }, }, ]; @@ -121,12 +205,37 @@ export const appearance = [ export const boundaryAdjacent = [ { - language: "Web component", - snippet: ``, + technology: "Web component", + snippets: { + short: ``, + long: `{shortCode}`, + }, }, { - language: "React", - snippet: ``, + technology: "React", + snippets: { + short: ``, + long: [ + { + language: "Typescript", + snippet: `{shortCode}`, + }, + { + language: "Javascript", + snippet: `{shortCode}`, + }, + ], + }, }, ]; @@ -141,12 +250,27 @@ export const boundaryAdjacent = [ export const disabled = [ { - language: "Web component", - snippet: ``, + technology: "Web component", + snippets: { + short: ``, + long: `{shortCode}`, + }, }, { - language: "React", - snippet: ``, + technology: "React", + snippets: { + short: ``, + long: [ + { + language: "Typescript", + snippet: `{shortCode}`, + }, + { + language: "Javascript", + snippet: `{shortCode}`, + }, + ], + }, }, ]; @@ -161,12 +285,27 @@ export const disabled = [ export const label = [ { - language: "Web component", - snippet: ``, + technology: "Web component", + snippets: { + short: ``, + long: `{shortCode}`, + }, }, { - language: "React", - snippet: ``, + technology: "React", + snippets: { + short: ``, + long: [ + { + language: "Typescript", + snippet: `{shortCode}`, + }, + { + language: "Javascript", + snippet: `{shortCode}`, + }, + ], + }, }, ]; @@ -178,12 +317,27 @@ export const label = [ export const defaultPage = [ { - language: "Web component", - snippet: ``, + technology: "Web component", + snippets: { + short: ``, + long: `{shortCode}`, + }, }, { - language: "React", - snippet: ``, + technology: "React", + snippets: { + short: ``, + long: [ + { + language: "Typescript", + snippet: `{shortCode}`, + }, + { + language: "Javascript", + snippet: `{shortCode}`, + }, + ], + }, }, ]; diff --git a/src/content/structured/components/popover-menu/code.mdx b/src/content/structured/components/popover-menu/code.mdx index fbbdd3912..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: "2023-07-31" +date: "2024-05-02" title: "Popover menu" @@ -26,8 +26,9 @@ import { useRef } from "react"; export const snippets = [ { - language: "Web component", - snippet: ` -
@@ -66,45 +61,73 @@ export const snippets = [
`, + long: `{shortCode} +`, + }, }, { - language: "React", - snippet: `const popoverEl = useRef(null); + technology: "React", + snippets: { + short: ` + + + + + + + + + + + + + +`, + long: [ + { + language: "Typescript", + snippet: `const popoverEl = useRef(null); const handleClick = () => { popoverEl.current.open = !popoverEl.current.open; }; return ( <> - - - - - - - - - - - - - - - + {shortCode} );`, + }, + { + language: "Javascript", + snippet: `const popoverEl = useRef(null); +const handleClick = () => { + popoverEl.current.open = !popoverEl.current.open; +}; +return ( + <> + {shortCode} + +);`, + }, + ], + }, }, ]; @@ -175,8 +198,9 @@ export const DemoPopover = () => { export const snippetsButtons = [ { - language: "Web component", - snippet: ` -
@@ -210,9 +228,9 @@ export const snippetsButtons = [
`, + long: `{shortCode} +`, + }, }, { - language: "React", - snippet: `const popoverEl = useRef(null); + technology: "React", + snippets: { + short: ` + + + + + + + + + + + + + + + + + +`, + long: [ + { + language: "Typescript", + snippet: `const popoverEl = useRef(null); const handleClick = () => { popoverEl.current.open = !popoverEl.current.open; }; return ( <> - - - - - - - - - - - - - - - - - - - + {shortCode} -);`, +)`, + }, + { + language: "Javascript", + snippet: `const popoverEl = useRef(null); +const handleClick = () => { + popoverEl.current.open = !popoverEl.current.open; +}; +return ( + <> + {shortCode} + +)`, + }, + ], + }, }, ]; @@ -315,9 +361,9 @@ export const ButtonsPopover = () => { @@ -344,8 +390,9 @@ export const ButtonsPopover = () => { export const snippetsGroups = [ { - language: "Web component", - snippet: ` -
@@ -381,45 +422,73 @@ export const snippetsGroups = [
`, + long: `{shortCode} +`, + }, }, { - language: "React", - snippet: `const popoverEl = useRef(null); + technology: "React", + snippets: { + short: ` + + + + + + + + + + + + + +`, + long: [ + { + language: "Typescript", + snippet: `const popoverEl = useRef(null); const handleClick = () => { popoverEl.current.open = !popoverEl.current.open; }; return ( <> - - - - - - - - - - - - - - - + {shortCode} + +);`, + }, + { + language: "Javascript", + snippet: `const popoverEl = useRef(null); +const handleClick = () => { + popoverEl.current.open = !popoverEl.current.open; +}; +return ( + <> + {shortCode} );`, + }, + ], + }, }, ]; diff --git a/src/content/structured/components/radio/code.mdx b/src/content/structured/components/radio/code.mdx index e981330f5..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-01-18" +date: "2024-05-02" title: "Radio button" @@ -25,37 +25,56 @@ import { IcRadioGroup, IcRadioOption, IcTextField } from "@ukic/react"; export const snippets = [ { - language: "Web component", - snippet: ` + technology: "Web component", + snippets: { + short: ` - - + +`, + long: `{shortCode} `, + }, }, { - language: "React", - snippet: ` console.log(ev.detail.value)}> + technology: "React", + snippets: { + short: ` console.log(ev.detail.value)}> `, + long: [ + { + language: "Typescript", + snippet: `{shortCode}`, + }, + { + language: "Javascript", + snippet: `{shortCode}`, + }, + ], + }, }, ]; @@ -70,7 +89,6 @@ export const snippets = [ value="cookie" label="Deluxe chocolate chip cookie (sold out)" disabled - inactive /> @@ -91,31 +109,56 @@ export const snippets = [ export const conditional = [ { - language: "Web component", - snippet: ` - - - - - + technology: "Web component", + snippets: { + short: ` + + + + + `, + long: `{shortCode}`, + }, }, { - language: "React", - snippet: ` - - - - + technology: "React", + snippets: { + short: ` console.log(ev.detail.value)} +> + + + + `, + long: [ + { + language: "Typescript", + snippet: `{shortCode}`, + }, + { + language: "Javascript", + snippet: `{shortCode}`, + }, + ], + }, }, ]; @@ -136,31 +179,55 @@ export const conditional = [ export const conditionalDynamic = [ { - language: "Web component", - snippet: ` - - + technology: "Web component", + snippets: { + short: ` + + - - + + `, + long: `{shortCode}`, + }, }, { - language: "React", - snippet: ` - - - - + technology: "React", + snippets: { + short: ` + + + + `, + long: [ + { + language: "Typescript", + snippet: `{shortCode}`, + }, + { + language: "Javascript", + snippet: `{shortCode}`, + }, + ], + }, }, ]; @@ -190,26 +257,47 @@ export const conditionalDynamic = [ export const withHelperText = [ { - language: "Web component", - snippet: ` - - + + `, + long: `{shortCode}`, + }, }, { - language: "React", - snippet: ` `, + long: [ + { + language: "Typescript", + snippet: `{shortCode}`, + }, + { + language: "Javascript", + snippet: `{shortCode}`, + }, + ], + }, }, ]; @@ -228,26 +316,47 @@ export const withHelperText = [ export const smallSnippet = [ { - language: "Web component", - snippet: ` - - + + `, + long: `{shortCode}`, + }, }, { - language: "React", - snippet: ` `, + long: [ + { + language: "Typescript", + snippet: `{shortCode}`, + }, + { + language: "Javascript", + snippet: `{shortCode}`, + }, + ], + }, }, ]; @@ -266,18 +375,51 @@ export const smallSnippet = [ export const withValidation = [ { - language: "Web component", - snippet: ` - - + technology: "Web component", + snippets: { + short: ` + + `, + long: `{shortCode}`, + }, }, { - language: "React", - snippet: ` + technology: "React", + snippets: { + short: ` `, + long: [ + { + language: "Typescript", + snippet: `{shortCode}`, + }, + { + language: "Javascript", + snippet: `{shortCode}`, + }, + ], + }, }, ]; diff --git a/src/content/structured/components/search-bar/code.mdx b/src/content/structured/components/search-bar/code.mdx index 42b05ab6c..6c97fbeea 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-02-02" +date: "2024-05-02" title: "Search bar" @@ -25,39 +25,90 @@ import { IcSearchBar, IcTypography } from "@ukic/react"; export const snippets = [ { - language: "Web component", - snippet: ` -`, + technology: "Web component", + snippets: { + short: ``, + long: `.parent-container { + padding: 16px; + } + + +
+ {shortCode} +
+ `, + }, }, { - language: "React", - snippet: ` console.log(ev.detail.value)} onIcSubmitSearch={(ev) => console.log(ev.detail.value)} placeholder="Start typing to search…" />`, + long: [ + { + language: "Typescript", + snippet: `const options = [ + { label: "Espresso", value: "espresso" }, + { label: "Double Espresso", value: "doubleespresso" }, + { label: "Flat White", value: "flatwhite" }, + { label: "Cappuccino", value: "cappuccino" }, + { label: "Americano", value: "americano" }, + { label: "Mocha", value: "mocha" }, +]; +const useStyles = createUseStyles({ + parentContainer: { + padding: "16px", + }, +}); +const classes = useStyles(); +return ( +
+ {shortCode} +
+)`, + }, + { + language: "Javascript", + snippet: `const options = [ + { label: "Espresso", value: "espresso" }, + { label: "Double Espresso", value: "doubleespresso" }, + { label: "Flat White", value: "flatwhite" }, + { label: "Cappuccino", value: "cappuccino" }, + { label: "Americano", value: "americano" }, + { label: "Mocha", value: "mocha" }, +]; +const useStyles = createUseStyles({ + parentContainer: { + padding: "16px", + }, +}); +const classes = useStyles(); +return ( +
+ {shortCode} +
+)`, + }, + ], + }, }, ]; @@ -88,43 +139,97 @@ export const snippets = [ export const optionsNoFiltering = [ { - language: "Web component", - snippet: ` - +>
- All options will be displayed as you type - -`, +

All options will be displayed as you type

+`, + long: `.parent-container { + padding: 16px; + } + + +
+ {shortCode} +
+ `, + }, }, { - language: "React", - snippet: `
-All options will be displayed as you type`, + +

All options will be displayed as you type

+`, + long: [ + { + language: "Typescript", + snippet: `const options = [ + { label: "Espresso", value: "espresso" }, + { label: "Double Espresso", value: "doubleespresso" }, + { label: "Flat White", value: "flatwhite" }, + { label: "Cappuccino", value: "cappuccino" }, + { label: "Americano", value: "americano" }, + { label: "Mocha", value: "mocha" }, +]; +const useStyles = createUseStyles({ + parentContainer: { + padding: "16px", + }, +}); +const classes = useStyles(); +return ( +
+ {shortCode} +
+)`, + }, + { + language: "Javascript", + snippet: `const options = [ + { label: "Espresso", value: "espresso" }, + { label: "Double Espresso", value: "doubleespresso" }, + { label: "Flat White", value: "flatwhite" }, + { label: "Cappuccino", value: "cappuccino" }, + { label: "Americano", value: "americano" }, + { label: "Mocha", value: "mocha" }, +]; +const useStyles = createUseStyles({ + parentContainer: { + padding: "16px", + }, +}); +const classes = useStyles(); +return ( +
+ {shortCode} +
+)`, + }, + ], + }, }, ]; @@ -146,46 +251,96 @@ export const optionsNoFiltering = [ ]} />
- - All options will be displayed as you type - + All options will be displayed as you type ### With helper text export const withHelperText = [ { - language: "Web component", - snippet: ` - -`, +>`, + long: `.parent-container { + padding: 16px; + } + + +
+ {shortCode} +
+ `, + }, }, { - language: "React", - snippet: ``, + long: [ + { + language: "Typescript", + snippet: `const options = [ + { label: "Espresso", value: "espresso" }, + { label: "Double Espresso", value: "doubleespresso" }, + { label: "Flat White", value: "flatwhite" }, + { label: "Cappuccino", value: "cappuccino" }, + { label: "Americano", value: "americano" }, + { label: "Mocha", value: "mocha" }, +]; +const useStyles = createUseStyles({ + parentContainer: { + padding: "16px", + }, +}); +const classes = useStyles(); +return ( +
+ {shortCode} +
+)`, + }, + { + language: "Javascript", + snippet: `const options = [ + { label: "Espresso", value: "espresso" }, + { label: "Double Espresso", value: "doubleespresso" }, + { label: "Flat White", value: "flatwhite" }, + { label: "Cappuccino", value: "cappuccino" }, + { label: "Americano", value: "americano" }, + { label: "Mocha", value: "mocha" }, +]; +const useStyles = createUseStyles({ + parentContainer: { + padding: "16px", + }, +}); +const classes = useStyles(); +return ( +
+ {shortCode} +
+)`, + }, + ], + }, }, ]; @@ -209,36 +364,91 @@ export const withHelperText = [ export const withHiddenLabel = [ { - language: "Web component", - snippet: ` - -`, +`, + long: `.parent-container { + padding: 16px; + } + + +
+ {shortCode} +
+ `, + }, }, { - language: "React", - snippet: ``, + long: [ + { + language: "Typescript", + snippet: `const options = [ + { label: "Espresso", value: "espresso" }, + { label: "Double Espresso", value: "doubleespresso" }, + { label: "Flat White", value: "flatwhite" }, + { label: "Cappuccino", value: "cappuccino" }, + { label: "Americano", value: "americano" }, + { label: "Mocha", value: "mocha" }, +]; +const useStyles = createUseStyles({ + parentContainer: { + padding: "16px", + }, +}); +const classes = useStyles(); +return ( +
+ {shortCode} +
+)`, + }, + { + language: "Javascript", + snippet: `const options = [ + { label: "Espresso", value: "espresso" }, + { label: "Double Espresso", value: "doubleespresso" }, + { label: "Flat White", value: "flatwhite" }, + { label: "Cappuccino", value: "cappuccino" }, + { label: "Americano", value: "americano" }, + { label: "Mocha", value: "mocha" }, +]; +const useStyles = createUseStyles({ + parentContainer: { + padding: "16px", + }, +}); +const classes = useStyles(); +return ( +
+ {shortCode} +
+)`, + }, + ], + }, }, ]; @@ -262,36 +472,88 @@ export const withHiddenLabel = [ export const disabled = [ { - language: "Web component", - snippet: ` - -`, + technology: "Web component", + snippets: { + short: ` +`, + long: `.parent-container { + padding: 16px; + } + + +
+ {shortCode} +
+ `, + }, }, { - language: "React", - snippet: ``, + long: [ + { + language: "Typescript", + snippet: `const options = [ + { label: "Espresso", value: "espresso" }, + { label: "Double Espresso", value: "doubleespresso" }, + { label: "Flat White", value: "flatwhite" }, + { label: "Cappuccino", value: "cappuccino" }, + { label: "Americano", value: "americano" }, + { label: "Mocha", value: "mocha" }, +]; +const useStyles = createUseStyles({ + parentContainer: { + padding: "16px", + }, +}); +const classes = useStyles(); +return ( +
+ {shortCode} +
+)`, + }, + { + language: "Javascript", + snippet: `const options = [ + { label: "Espresso", value: "espresso" }, + { label: "Double Espresso", value: "doubleespresso" }, + { label: "Flat White", value: "flatwhite" }, + { label: "Cappuccino", value: "cappuccino" }, + { label: "Americano", value: "americano" }, + { label: "Mocha", value: "mocha" }, +]; +const useStyles = createUseStyles({ + parentContainer: { + padding: "16px", + }, +}); +const classes = useStyles(); +return ( +
+ {shortCode} +
+)`, + }, + ], + }, }, ]; @@ -314,36 +576,88 @@ export const disabled = [ export const sizeSmall = [ { - language: "Web component", - snippet: ` - -`, + technology: "Web component", + snippets: { + short: ` +`, + long: `.parent-container { + padding: 16px; + } + + +
+ {shortCode} +
+ `, + }, }, { - language: "React", - snippet: ``, + long: [ + { + language: "Typescript", + snippet: `const options = [ + { label: "Espresso", value: "espresso" }, + { label: "Double Espresso", value: "doubleespresso" }, + { label: "Flat White", value: "flatwhite" }, + { label: "Cappuccino", value: "cappuccino" }, + { label: "Americano", value: "americano" }, + { label: "Mocha", value: "mocha" }, +]; +const useStyles = createUseStyles({ + parentContainer: { + padding: "16px", + }, +}); +const classes = useStyles(); +return ( +
+ {shortCode} +
+)`, + }, + { + language: "Javascript", + snippet: `const options = [ + { label: "Espresso", value: "espresso" }, + { label: "Double Espresso", value: "doubleespresso" }, + { label: "Flat White", value: "flatwhite" }, + { label: "Cappuccino", value: "cappuccino" }, + { label: "Americano", value: "americano" }, + { label: "Mocha", value: "mocha" }, +]; +const useStyles = createUseStyles({ + parentContainer: { + padding: "16px", + }, +}); +const classes = useStyles(); +return ( +
+ {shortCode} +
+)`, + }, + ], + }, }, ]; @@ -368,43 +682,105 @@ This example shows how to filter data asynchronously when the value in the input export const customFiltering = [ { - language: "Web component", - snippet: ` - -`, + }, + }, + { + technology: "React", + snippets: { + short: ``, + long: [ + { + language: "Typescript", + snippet: `const mockData = [ + { label: "Espresso", value: "espresso" }, + { label: "Double Espresso", value: "doubleespresso" }, + { label: "Flat White", value: "flatwhite" }, + { label: "Cappuccino", value: "cappucino" }, + { label: "Americano", value: "americano" }, + { label: "Mocha", value: "mocha" }, +]; +const [results, setResults] = useState([]); +const changeHandler = (event: { detail: { value: string; }; }) => { + const searchFor = event.detail.value; + if (searchFor.length > 1) { + const mockAPI = (query: string) => { + const filteredResults = mockData.filter((item) => + item.label.toLowerCase().includes(query.toLowerCase()), ); - return new Promise((resolve) => { - setTimeout(() => resolve(filteredResults), 1000) + return new Promise((resolve) => { + setTimeout(() => resolve(filteredResults), 1000); }); - }; - mockAPI(searchFor).then((newResults) => { select.options = newResults }); - } else { - select.options = []; - } - }); -`, + }; + mockAPI(searchFor).then((newResults: IcMenuOption[]) => setResults(newResults)); + } else { + setResults([]); + } +}; +const useStyles = createUseStyles({ + parentContainer: { + padding: "16px", }, - { - language: "React", - snippet: `const mockData = [ +}); +const classes = useStyles(); +return ( +
+ {shortCode} +
+)`, + }, + { + language: "Javascript", + snippet: `const mockData = [ { label: "Espresso", value: "espresso" }, { label: "Double Espresso", value: "doubleespresso" }, { label: "Flat White", value: "flatwhite" }, @@ -429,16 +805,20 @@ const changeHandler = (event) =>{ setResults([]); } } -return( -<> - - -);`, +const useStyles = createUseStyles({ + parentContainer: { + padding: "16px", + }, +}); +const classes = useStyles(); +return ( +
+ {shortCode} +
+)`, + }, + ], + }, }, ]; diff --git a/src/content/structured/components/section-container/code.mdx b/src/content/structured/components/section-container/code.mdx index 6efc6c4d2..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-02-02" +date: "2024-05-02" title: "Section container" @@ -28,24 +28,63 @@ import { IcChip, IcSectionContainer } from "@ukic/react"; export const snippetsDefault = [ { - language: "Web component", - snippet: ` -
- - - -
+ technology: "Web component", + snippets: { + short: ` +
+ + + +
`, + long: `ic-section-container { + border: 1px solid black; + } + .container { + display: flex; + justify-content: space-between; + padding: 8px; + } + + + {shortCode}`, + }, }, { - language: "React", - snippet: ` -
- - - -
+ technology: "React", + snippets: { + short: ` +
+ + + +
`, + long: [ + { + language: "Typescript", + snippet: `const useStyles = createUseStyles({ + sectionContainer: { + border: "1px solid black", + margin: "2px", + }, + divContainer: { + display: "flex", + justifyContent: "space-between", + padding: "8px", + }, +}); +const classes = useStyles(); +return ( + {shortCode} +)`, + }, + { + language: "Javascript", + snippet: `{shortCode}`, + }, + ], + }, }, ]; @@ -56,7 +95,6 @@ export const snippetsDefault = [ display: "flex", justifyContent: "space-between", padding: "8px", - gap: "8px", }} > @@ -76,30 +114,57 @@ export const snippetsDefault = [ export const snippetsCenter = [ { - language: "Web component", - snippet: ` -
- - - -
+ technology: "Web component", + snippets: { + short: ` +
+ + + +
`, + long: `ic-section-container { + border: 1px solid black; + width: 60%; + } + .container { + display: flex; + justify-content: space-between; + padding: 8px; + } + + + {shortCode}`, + }, }, { - language: "React", - snippet: ` -
+
`, + long: [ + { + language: "Typescript", + snippet: `{shortCode}`, + }, + { + language: "Javascript", + snippet: `{shortCode}`, + }, + ], + }, }, ]; @@ -110,7 +175,6 @@ export const snippetsCenter = [ display: "flex", justifyContent: "space-between", padding: "8px", - gap: "8px", }} > @@ -124,30 +188,57 @@ export const snippetsCenter = [ export const snippetsFullWidth = [ { - language: "Web component", - snippet: ` -
- - - + technology: "Web component", + snippets: { + short: ` +
+ + +
`, + long: `ic-section-container { + border: 1px solid black; + width: 60%; + } + .container { + display: flex; + justify-content: space-between; + padding: 8px; + } + + + {shortCode}`, + }, }, { - language: "React", - snippet: ` -
+
`, + long: [ + { + language: "Typescript", + snippet: `{shortCode}`, + }, + { + language: "Javascript", + snippet: `{shortCode}`, + }, + ], + }, }, ]; @@ -161,7 +252,6 @@ export const snippetsFullWidth = [ display: "flex", justifyContent: "space-between", padding: "8px", - gap: "8px", }} > @@ -175,32 +265,58 @@ export const snippetsFullWidth = [ export const snippetsFullHeight = [ { - language: "Web component", - snippet: ` -
- - - + technology: "Web component", + snippets: { + short: ` +
+ + +
`, + long: `ic-section-container { + border: 1px solid black; + width: 60%; + } + .container { + display: flex; + justify-content: space-between; + padding: 8px; + } + + + {shortCode}`, + }, }, { - language: "React", - snippet: ` -
+
`, + long: [ + { + language: "Typescript", + snippet: `{shortCode}`, + }, + { + language: "Javascript", + snippet: `{shortCode}`, + }, + ], + }, }, ]; @@ -215,7 +331,6 @@ export const snippetsFullHeight = [ display: "flex", justifyContent: "space-between", padding: "8px", - gap: "8px", }} > diff --git a/src/content/structured/components/select/code.mdx b/src/content/structured/components/select/code.mdx index 041b8c8f7..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-02-02" +date: "2024-05-02" title: "Select" @@ -25,8 +25,13 @@ import { IcSelect } from "@ukic/react"; export const snippets = [ { - language: "Web component", - snippet: ` + technology: "Web component", + snippets: { + short: ``, + long: `{shortCode} `, + }, }, { - language: "React", - snippet: ` console.log(event.detail.value)} />`, + long: [ + { + language: "Typescript", + snippet: `const options = [ + { label: "Espresso", value: "espresso" }, + { label: "Double Espresso", value: "doubleespresso" }, + { label: "Flat White", value: "flatwhite" }, + { label: "Cappuccino", value: "cappuccino" }, + { label: "Americano", value: "americano" }, + { label: "Mocha", value: "mocha" }, + ]; + return ( + {shortCode} + )`, + }, + { + language: "Javascript", + snippet: `const options = [ + { label: "Espresso", value: "espresso" }, + { label: "Double Espresso", value: "doubleespresso" }, + { label: "Flat White", value: "flatwhite" }, + { label: "Cappuccino", value: "cappuccino" }, + { label: "Americano", value: "americano" }, + { label: "Mocha", value: "mocha" }, + ]; + return ( + {shortCode} + )`, + }, + ], + }, }, ]; @@ -89,8 +122,16 @@ export const SelectExample = () => ( export const snippetsWithExtras = [ { - language: "Web component", - snippet: ` + technology: "Web component", + snippets: { + short: ``, + long: `{shortCode} `, + }, }, { - language: "React", - snippet: ` console.log(event.detail.value)} />`, + long: [ + { + language: "Typescript", + snippet: `const options = [ + { label: "Espresso", value: "espresso" }, + { label: "Double Espresso", value: "doubleespresso" }, + { label: "Flat White", value: "flatwhite" }, + { label: "Cappuccino", value: "cappuccino" }, + { label: "Americano", value: "americano" }, + { label: "Mocha", value: "mocha" }, + ]; + return ( + {shortCode} + )`, + }, + { + language: "Javascript", + snippet: `const options = [ + { label: "Espresso", value: "espresso" }, + { label: "Double Espresso", value: "doubleespresso" }, + { label: "Flat White", value: "flatwhite" }, + { label: "Cappuccino", value: "cappuccino" }, + { label: "Americano", value: "americano" }, + { label: "Mocha", value: "mocha" }, + ]; + return ( + {shortCode} + )`, + }, + ], + }, }, ]; @@ -157,8 +228,14 @@ export const SelectExampleWithExtras = () => ( export const snippetsDisabled = [ { - language: "Web component", - snippet: ` + technology: "Web component", + snippets: { + short: ``, + long: `{shortCode} `, + }, }, { - language: "React", - snippet: ` console.log(event.detail.value)} />`, + long: [ + { + language: "Typescript", + snippet: `const options = [ + { label: "Espresso", value: "espresso" }, + { label: "Double Espresso", value: "doubleespresso" }, + { label: "Flat White", value: "flatwhite" }, + { label: "Cappuccino", value: "cappuccino" }, + { label: "Americano", value: "americano" }, + { label: "Mocha", value: "mocha" }, + ]; + return ( + {shortCode} + )`, + }, + { + language: "Javascript", + snippet: `const options = [ + { label: "Espresso", value: "espresso" }, + { label: "Double Espresso", value: "doubleespresso" }, + { label: "Flat White", value: "flatwhite" }, + { label: "Cappuccino", value: "cappuccino" }, + { label: "Americano", value: "americano" }, + { label: "Mocha", value: "mocha" }, + ]; + return ( + {shortCode} + )`, + }, + ], + }, }, ]; @@ -208,8 +316,13 @@ export const SelectExampleDisabled = () => ( export const snippetsOptionDisabled = [ { - language: "Web component", - snippet: ` + technology: "Web component", + snippets: { + short: ``, + long: `{shortCode} `, + }, }, { - language: "React", - snippet: ` console.log(event.detail.value)} />`, + long: [ + { + language: "Typescript", + snippet: `const options = [ + { label: "Espresso", value: "espresso" }, + { label: "Double Espresso", value: "doubleespresso", disabled: true }, + { label: "Flat White", value: "flatwhite", disabled: true }, + { label: "Cappuccino", value: "cappuccino" }, + { label: "Americano", value: "americano" }, + { label: "Mocha", value: "mocha" }, + ]; + return ( + {shortCode} + )`, + }, + { + language: "Javascript", + snippet: `const options = [ + { label: "Espresso", value: "espresso" }, + { label: "Double Espresso", value: "doubleespresso", disabled: true }, + { label: "Flat White", value: "flatwhite", disabled: true }, + { label: "Cappuccino", value: "cappuccino" }, + { label: "Americano", value: "americano" }, + { label: "Mocha", value: "mocha" }, + ]; + return ( + {shortCode} + )`, + }, + ], + }, }, ]; @@ -257,8 +401,13 @@ export const SelectExampleOptionsDisabled = () => ( export const snippetsSmall = [ { - language: "Web component", - snippet: ` + technology: "Web component", + snippets: { + short: ``, + long: `{shortCode} `, + }, }, { - language: "React", - snippet: ` console.log(event.detail.value)} size="small" />`, + long: [ + { + language: "Typescript", + snippet: `const options = [ + { label: "Espresso", value: "espresso" }, + { label: "Double Espresso", value: "doubleespresso" }, + { label: "Flat White", value: "flatwhite" }, + { label: "Cappuccino", value: "cappuccino" }, + { label: "Americano", value: "americano" }, + { label: "Mocha", value: "mocha" }, + ]; + return ( + {shortCode} + )`, + }, + { + language: "Javascript", + snippet: `const options = [ + { label: "Espresso", value: "espresso" }, + { label: "Double Espresso", value: "doubleespresso" }, + { label: "Flat White", value: "flatwhite" }, + { label: "Cappuccino", value: "cappuccino" }, + { label: "Americano", value: "americano" }, + { label: "Mocha", value: "mocha" }, + ]; + return ( + {shortCode} + )`, + }, + ], + }, }, ]; @@ -316,8 +492,14 @@ export const SelectExampleSmall = () => ( export const snippetsHideLabel = [ { - language: "Web component", - snippet: ` + technology: "Web component", + snippets: { + short: ``, + long: `{shortCode} `, + }, }, { - language: "React", - snippet: ` console.log(event.detail.value)} />`, + long: [ + { + language: "Typescript", + snippet: `const options = [ + { label: "Espresso", value: "espresso" }, + { label: "Double Espresso", value: "doubleespresso" }, + { label: "Flat White", value: "flatwhite" }, + { label: "Cappuccino", value: "cappuccino" }, + { label: "Americano", value: "americano" }, + { label: "Mocha", value: "mocha" }, + ]; + return ( + {shortCode} + )`, + }, + { + language: "Javascript", + snippet: `const options = [ + { label: "Espresso", value: "espresso" }, + { label: "Double Espresso", value: "doubleespresso" }, + { label: "Flat White", value: "flatwhite" }, + { label: "Cappuccino", value: "cappuccino" }, + { label: "Americano", value: "americano" }, + { label: "Mocha", value: "mocha" }, + ]; + return ( + {shortCode} + )`, + }, + ], + }, }, ]; @@ -367,36 +580,17 @@ export const SelectExampleHideLabel = () => ( export const snippetsGroups = [ { - language: "Web component", - snippet: ` + technology: "Web component", + snippets: { + short: ``, + long: `{shortCode} `, - }, - { - language: "React", - snippet: ``, + }, + }, + { + technology: "React", + snippets: { + short: ` console.log(event.detail.value)} />`, + long: [ + { + language: "Typescript", + snippet: `const options = [ + { + label: "Fancy", + children: [ + { label: "Cappuccino", value: "Cap" }, + { label: "Flat white", value: "Flat" }, + ], + }, + { + label: "Boring", + children: [ + { label: "Filter", value: "Fil" }, + { label: "Latte", value: "Lat" }, + ], + }, +]; +return ( + {shortCode} +)`, + }, + { + language: "Javascript", + snippet: `const options = [ + { + label: "Fancy", + children: [ + { label: "Cappuccino", value: "Cap" }, + { label: "Flat white", value: "Flat" }, + ], + }, + { + label: "Boring", + children: [ + { label: "Filter", value: "Fil" }, + { label: "Latte", value: "Lat" }, + ], + }, +]; +return ( + {shortCode} +)`, + }, + ], + }, }, ]; @@ -449,8 +703,13 @@ export const SelectExampleGroups = () => ( export const snippetsRecommended = [ { - language: "Web component", - snippet: ` + technology: "Web component", + snippets: { + short: ``, + long: `{shortCode} `, + }, }, { - language: "React", - snippet: ` console.log(event.detail.value)} />`, + long: [ + { + language: "Typescript", + snippet: `const options = [ + { label: "Espresso", value: "espresso" }, + { label: "Double Espresso", value: "doubleespresso", recommended: true }, + { label: "Flat White", value: "flatwhite" }, + { label: "Cappuccino", value: "cappuccino" }, + { label: "Americano", value: "americano", recommended: true }, + { label: "Mocha", value: "mocha" }, +]; +return ( + {shortCode} +)`, + }, + { + language: "Javascript", + snippet: `const options = [ + { label: "Espresso", value: "espresso" }, + { label: "Double Espresso", value: "doubleespresso", recommended: true }, + { label: "Flat White", value: "flatwhite" }, + { label: "Cappuccino", value: "cappuccino" }, + { label: "Americano", value: "americano", recommended: true }, + { label: "Mocha", value: "mocha" }, +]; +return ( + {shortCode} +)`, + }, + ], + }, }, ]; @@ -511,15 +798,38 @@ export const SelectExampleRecommended = () => ( export const snippetsValidation = [ { - language: "Web component", - snippet: ` + technology: "Web component", + snippets: { + short: ` + +`, + long: `{shortCode} - - - -`, + }, }, { - language: "React", - snippet: ` console.log(event.detail.value)} /> - console.log(event.detail.value)} /> - console.log(event.detail.value)} />`, + long: [ + { + language: "Typescript", + snippet: `const options = [ + { label: "Espresso", value: "espresso" }, + { label: "Double Espresso", value: "doubleespresso" }, + { label: "Flat White", value: "flatwhite" }, + { label: "Cappuccino", value: "cappuccino" }, + { label: "Americano", value: "americano" }, + { label: "Mocha", value: "mocha" }, +]; +return ( + <> + {shortCode} + +)`, + }, + { + language: "Javascript", + snippet: `const options = [ + { label: "Espresso", value: "espresso" }, + { label: "Double Espresso", value: "doubleespresso" }, + { label: "Flat White", value: "flatwhite" }, + { label: "Cappuccino", value: "cappuccino" }, + { label: "Americano", value: "americano" }, + { label: "Mocha", value: "mocha" }, +]; +return ( + <> + {shortCode} + +)`, + }, + ], + }, }, ]; @@ -678,8 +985,14 @@ export const SelectExampleValidation = () => ( export const snippetsSearchable = [ { - language: "Web component", - snippet: ` + technology: "Web component", + snippets: { + short: ``, + long: `{shortCode} `, + }, }, { - language: "React", - snippet: ` console.log(event.detail.value)} />`, + long: [ + { + language: "Typescript", + snippet: `const options = [ + { label: "Espresso", value: "espresso" }, + { label: "Double Espresso", value: "doubleespresso" }, + { label: "Flat White", value: "flatwhite" }, + { label: "Cappuccino", value: "cappuccino" }, + { label: "Americano", value: "americano" }, + { label: "Mocha", value: "mocha" }, +]; +return ( + {shortCode} +)`, + }, + { + language: "Javascript", + snippet: `const options = [ + { label: "Espresso", value: "espresso" }, + { label: "Double Espresso", value: "doubleespresso" }, + { label: "Flat White", value: "flatwhite" }, + { label: "Cappuccino", value: "cappuccino" }, + { label: "Americano", value: "americano" }, + { label: "Mocha", value: "mocha" }, +]; +return ( + {shortCode} +)`, + }, + ], + }, }, ]; @@ -751,12 +1087,15 @@ export const SearchableSelectExample = () => ( export const snippetsSearchableWithDescriptions = [ { - language: "Web component", - snippet: ` +>`, + long: `{shortCode} `, + }, }, { - language: "React", - snippet: ` console.log(event.detail.value)} +/>`, + long: [ + { + language: "Typescript", + snippet: `const options = [ { label: "Cappuccino", value: "Cap", description: "Coffee frothed up with pressurised steam" }, { label: "Americano", value: "Ame", description: "Espresso coffee diluted with hot water" }, { label: "Mocha", value: "Moc", description: "Coffee with chocolate" }, @@ -792,11 +1142,31 @@ export const snippetsSearchableWithDescriptions = [ { label: "Espresso", value: "Esp", description: "Concentrated form of coffee" }, { label: "Cortado", value: "Cor", description: "Coffee cut with milk" }, { label: "Latte macchiato", value: "Lam", description: "Espresso coffee with milk and a spoonful of foamed milk" }, - ]} - searchable - includeDescriptionsInSearch - onIcChange={(event) => console.log(event.detail.value)} -/>`, + ]; + return ( + {shortCode} + )`, + }, + { + language: "Javascript", + snippet: `const options = [ + { label: "Cappuccino", value: "Cap", description: "Coffee frothed up with pressurised steam" }, + { label: "Americano", value: "Ame", description: "Espresso coffee diluted with hot water" }, + { label: "Mocha", value: "Moc", description: "Coffee with chocolate" }, + { label: "Latte", value: "Lat", description: "Milky coffee with one or two shots of espresso" }, + { label: "Flat white", value: "Fla", description: "Coffee with frothed milk poured over espresso" }, + { label: "Macchiato", value: "Mac", description: "Espresso coffee topped with steamed milk" }, + { label: "Café au lait", value: "Caf", description: "Brewed coffee with steamed milk" }, + { label: "Espresso", value: "Esp", description: "Concentrated form of coffee" }, + { label: "Cortado", value: "Cor", description: "Coffee cut with milk" }, + { label: "Latte macchiato", value: "Lam", description: "Espresso coffee with milk and a spoonful of foamed milk" }, +]; +return ( + {shortCode} +)`, + }, + ], + }, }, ]; @@ -862,12 +1232,15 @@ export const SearchableSelectWithDescriptionsExample = () => ( export const snippetsSearchableWithGroups = [ { - language: "Web component", - snippet: ` +>`, + long: `{shortCode} `, + }, }, { - language: "React", - snippet: ` console.log(event.detail.value)} />`, + long: [ + { + language: "Typescript", + snippet: `const options = [ + { + label: "Fancy", + children: [ + { label: "Cappuccino", value: "Cap" }, + { label: "Flat white", value: "Flat" }, + { label: "Mocha", value: "Moc" }, + { label: "Macchiato", value: "Mac" }, + { label: "Cortado", value: "Cor" }, + { label: "Latte macchiato", value: "Lam" }, + ], + }, + { + label: "Boring", + children: [ + { label: "Filter", value: "Fil" }, + { label: "Latte", value: "Lat" }, + { label: "Americano", value: "Ame" }, + { label: "Espresso", value: "Esp" }, + ], + }, +]; +return ( + {shortCode} +)`, + }, + { + language: "Javascript", + snippet: `const options = [ + { + label: "Fancy", + children: [ + { label: "Cappuccino", value: "Cap" }, + { label: "Flat white", value: "Flat" }, + { label: "Mocha", value: "Moc" }, + { label: "Macchiato", value: "Mac" }, + { label: "Cortado", value: "Cor" }, + { label: "Latte macchiato", value: "Lam" }, + ], + }, + { + label: "Boring", + children: [ + { label: "Filter", value: "Fil" }, + { label: "Latte", value: "Lat" }, + { label: "Americano", value: "Ame" }, + { label: "Espresso", value: "Esp" }, + ], + }, +]; +return ( + {shortCode} +)`, + }, + ], + }, }, ]; @@ -973,15 +1387,18 @@ This example shows how to filter data asynchronously when the value in the selec export const customFiltering = [ { - language: "Web component", - snippet: ` +>`, + long: `{shortCode} `, + }, }, { - language: "React", - snippet: `const mockData = [ + technology: "React", + snippets: { + short: ` setSelectedValue(event.detail.value)} + onIcClear={() => setResults([])} + onIcChange={changeHandler} +/>`, + long: [ + { + language: "Typescript", + snippet: `const mockData = [ { label: "Espresso", value: "Esp" }, { label: "Double Espresso", value: "Dou" }, { label: "Cappuccino", value: "Cap" }, @@ -1060,18 +1493,51 @@ const changeHandler = (event) => { } return( <> - setSelectedValue(event.detail.value)} - onIcClear={() => setResults([])} - onIcChange={changeHandler} - /> + {shortCode} + +)`, + }, + { + language: "Javascript", + snippet: `const mockData = [ + { label: "Espresso", value: "Esp" }, + { label: "Double Espresso", value: "Dou" }, + { label: "Cappuccino", value: "Cap" }, + { label: "Latte", value: "Lat" }, + { label: "Americano", value: "Ame" }, + { label: "Filter", value: "Fil" }, + { label: "Flat white", value: "Fla" }, + { label: "Mocha", value: "Moc" }, + { label: "Macchiato", value: "Mac" }, +]; +const [results, setResults] = useState([]); +const [selectedValue, setSelectedValue] = useState(""); +const changeHandler = (event) => { + const newValue = event.detail.value; + console.log(newValue); + if (newValue !== selectedValue) { + if (newValue && newValue.length > 1) { + const mockAPI = (query) => { + const filteredResults = mockData.filter((item) => + item.label.toLowerCase().includes(query.toLowerCase())); + return new Promise(resolve => { + setTimeout(() => resolve(filteredResults), 1000) + }); + }; + mockAPI(newValue).then((results) => setResults(results)); + } else { + setResults([]); + } + } +} +return( + <> + {shortCode} -);`, +)`, + }, + ], + }, }, ]; diff --git a/src/content/structured/components/side-nav/code.mdx b/src/content/structured/components/side-nav/code.mdx index 296edc33d..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: "2023-10-11" +date: "2024-05-02" title: "Side navigation" @@ -47,8 +47,9 @@ import { MemoryRouter, NavLink } from "react-router-dom"; export const snippetsDefault = [ { - language: "Web component", - snippet: ` + technology: "Web component", + snippets: { + short: ` coffee-outline @@ -85,10 +86,13 @@ export const snippetsDefault = [ `, + long: `{shortCode}`, + }, }, { - language: "React", - snippet: ` + technology: "React", + snippets: { + short: ` coffee-outline @@ -125,6 +129,17 @@ export const snippetsDefault = [ `, + long: [ + { + language: "Typescript", + snippet: `{shortCode}`, + }, + { + language: "Javascript", + snippet: `{shortCode}`, + }, + ], + }, }, ]; @@ -202,8 +217,9 @@ export const snippetsDefault = [ export const snippetsStatic = [ { - language: "Web component", - snippet: ` + technology: "Web component", + snippets: { + short: ` coffee-outline @@ -240,10 +256,13 @@ export const snippetsStatic = [ `, + long: `{shortCode}`, + }, }, { - language: "React", - snippet: ` + technology: "React", + snippets: { + short: ` coffee-outline @@ -280,6 +299,17 @@ export const snippetsStatic = [ `, + long: [ + { + language: "Typescript", + snippet: `{shortCode}`, + }, + { + language: "Javascript", + snippet: `{shortCode}`, + }, + ], + }, }, ]; @@ -340,12 +370,13 @@ export const snippetsStatic = [ -### Expanded on default +### Expanded by default export const snippetsExpanded = [ { - language: "Web component", - snippet: ` `, + long: `{shortCode}`, + }, }, { - language: "React", - snippet: ` `, + long: [ + { + language: "Typescript", + snippet: `{shortCode}`, + }, + { + language: "Javascript", + snippet: `{shortCode}`, + }, + ], + }, }, ]; @@ -492,8 +537,9 @@ export const snippetsExpanded = [ export const snippetsCollapsed = [ { - language: "Web component", - snippet: ` + technology: "Web component", + snippets: { + short: ` coffee-outline @@ -529,10 +575,13 @@ export const snippetsCollapsed = [ `, + long: `{shortCode}`, + }, }, { - language: "React", - snippet: ` + technology: "React", + snippets: { + short: ` coffee-outline @@ -568,6 +617,17 @@ export const snippetsCollapsed = [ `, + long: [ + { + language: "Typescript", + snippet: `{shortCode}`, + }, + { + language: "Javascript", + snippet: `{shortCode}`, + }, + ], + }, }, ]; @@ -630,8 +690,9 @@ export const snippetsCollapsed = [ export const snippetsBadge = [ { - language: "Web component", - snippet: ` + technology: "Web component", + snippets: { + short: ` coffee-outline @@ -670,10 +731,13 @@ export const snippetsBadge = [ `, + long: `{shortCode}`, + }, }, { - language: "React", - snippet: ` + technology: "React", + snippets: { + short: ` coffee-outline @@ -712,6 +776,17 @@ export const snippetsBadge = [ `, + long: [ + { + language: "Typescript", + snippet: `{shortCode}`, + }, + { + language: "Javascript", + snippet: `{shortCode}`, + }, + ], + }, }, ]; @@ -796,18 +871,9 @@ npm i @mdi/js export const withMDIicons = [ { - language: "React", - snippet: `// importing Material Design icons -import { - mdiCoffeeOutline, - mdiHome, - mdiMagnify, - mdiCoffeeMakerOutline, - mdiCogOutline, - mdiTeaOutline -} from "@mdi/js"; -... - @@ -839,10 +905,28 @@ import { > + + + `, + long: [ + { + language: "Typescript", + snippet: `{shortCode}`, + }, + { + language: "Javascript", + snippet: `{shortCode}`, + }, + ], + }, }, ]; @@ -905,9 +989,10 @@ The following example also demonstrates using a slotted app title link. export const withReactRouter = [ { - language: "React", - snippet: ` -
+ technology: "React", + snippets: { + short: ` +
- This is the home page} /> - Search} /> - Drinks} /> - Coffee Maker} /> - Settings} /> + This is the Home page

} /> + Search

} /> + Drinks

} /> + Coffee Maker

} /> + Settings

} />
`, + long: [ + { + language: "Typescript", + snippet: `const useStyles = createUseStyles({ + divContainer: { + display: "flex", + }, +}); +const classes = useStyles(); +return ( + {shortCode} +)`, + }, + { + language: "Javascript", + snippet: `const useStyles = createUseStyles({ + divContainer: { + display: "flex", + }, +}); +const classes = useStyles(); +return ( + {shortCode} +)`, + }, + ], + }, }, ]; @@ -1066,9 +1178,9 @@ Fixed side navigation places the side navigation to the viewport. export const basicLayoutFixedViewport = [ { - language: "Web component", - snippet: `// Inline styling added for verboseness -
+ technology: "Web component", + snippets: { + short: `
@@ -1142,8 +1254,8 @@ export const basicLayoutFixedViewport = [ -
-
+
+

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.

@@ -1165,11 +1277,28 @@ export const basicLayoutFixedViewport = [
`, + long: `parent-container { + display: flex; + height: 100%; + } + .content-container { + display: flex; + flex-direction: column; + flex-grow: 1; + } + main { + height: 100vh; + } + + + {shortCode}`, + }, }, { - language: "React", - snippet: `// Inline styling added for verboseness -
+ technology: "React", + snippets: { + short: `// Inline styling added for verboseness +
@@ -1243,8 +1372,8 @@ export const basicLayoutFixedViewport = [ -
-
+
+

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.

@@ -1266,6 +1395,51 @@ export const basicLayoutFixedViewport = [
`, + long: [ + { + language: "Typescript", + snippet: `const useStyles = createUseStyles({ + parentContainer: { + display: 'flex', + height: '100%' + }, + contentContainer: { + display: 'flex', + flexDirection: 'column', + flexGrow: '1' + }, + main: { + height: '100vh', + } +}); +const classes = useStyles(); +return ( + {shortCode} +)`, + }, + { + language: "Javascript", + snippet: `const useStyles = createUseStyles({ + parentContainer: { + display: 'flex', + height: '100%' + }, + contentContainer: { + display: 'flex', + flexDirection: 'column', + flexGrow: '1' + }, + main: { + height: '100vh', + } +}); +const classes = useStyles(); +return ( + {shortCode} +)`, + }, + ], + }, }, ]; diff --git a/src/content/structured/components/skeleton/code.mdx b/src/content/structured/components/skeleton/code.mdx index 25046981f..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: "2023-10-24" +date: "2024-05-02" title: "Skeleton" @@ -31,20 +31,48 @@ import { export const snippets = [ { - language: "Web component", - snippet: ` + technology: "Web component", + snippets: { + short: ` `, + long: `.container { + display: flex; + flex-direction: column; + gap: 8px; + } + + +
+ {shortCode} +
`, + }, }, { - language: "React", - snippet: ` + technology: "React", + snippets: { + short: ` `, + long: [ + { + language: "Typescript", + snippet: `
+ {shortCode} +
`, + }, + { + language: "Javascript", + snippet: `
+ {shortCode} +
`, + }, + ], + }, }, ]; @@ -68,17 +96,53 @@ export const snippets = [ export const snippetsInherited = [ { - language: "Web component", - snippet: `
Test text
`, + technology: "Web component", + snippets: { + short: `
Test text
`, + long: `.child { + height:200px; + width:450px; + } + + + {shortCode}`, + }, }, { - language: "React", - snippet: ` -
Test text
+ technology: "React", + snippets: { + short: ` +
Test text
`, + long: [ + { + language: "Typescript", + snippet: `const useStyles = createUseStyles({ + child: { + height: "200px", + width: "450px" + }, + }); + const classes = useStyles(); + return ( + {shortCode} + )`, + }, + { + language: "Javascript", + snippet: `const useStyles = createUseStyles({ + child: { + height: "200px", + width: "450px" + }, + }); + const classes = useStyles(); + return ( + {shortCode} + )`, + }, + ], + }, }, ]; @@ -97,50 +161,86 @@ export const snippetsInherited = [ ### Set width and height +CSS changes directly to `Skeleton` must be applied with inline styling. + export const snippetsSetWidthAndHeight = [ { - language: "Web component", - snippet: `Height and width set with styles - -Height set with styles + technology: "Web component", + snippets: { + short: `

Height and width set with styles

 + +

Height set with styles

 -Width set with styles +

Width set with styles

 `, + long: `.container { + display: flex; + flex-direction: column; + gap: 8px; + } + + +
+ {shortCode} +
`, + }, }, { - language: "React", - snippet: `Height and width set with styles + technology: "React", + snippets: { + short: `

Height and width set with styles

 -Height set with styles +

Height set with styles<

/IcTypography> -Width set with styles +

Width set with styles

 `, + long: [ + { + language: "Typescript", + snippet: `<> + {shortCode} +`, + }, + { + language: "Javascript", + snippet: `<> + {shortCode} +`, + }, + ], + }, }, ];
- Height and width set with styles + +

Height and width set with styles

+ - Height set with styles + +

Height set with styles

+ - Width set with styles + +

Width set with styles

+ + technology: "Web component", + snippets: { + short: ` `, + long: `
+ {shortCode} +
`, + }, }, { - language: "React", - snippet: ` + technology: "React", + snippets: { + short: ` `, + long: [ + { + language: "Typescript", + snippet: `
+ {shortCode} +
`, + }, + { + language: "Javascript", + snippet: `
+ {shortCode} +
`, + }, + ], + }, }, ]; @@ -184,223 +305,107 @@ export const snippetsLight = [ export const snippetsInCard = [ { - language: "Web component", - snippet: `
-
-
- - - - - - Reload - -
- `, + technology: "Web component", + snippets: { + short: ` + + + + + + + `, + long: `{shortCode}`, + }, }, { - language: "React", - snippet: `const loading = () => { - return ( - - - - - - - - - ); -}; -const loaded = () => { - return ( - - - - - -
- Learn more - Hide -
- - ); -}; - const ContentFunction = () => { - const [content, setContent] = React.useState(loading); - const loadFunc = () => { - setContent(loading); - setTimeout(() => { - setContent(loaded); - }, 3000); - }; - return ( -
- {content} -
- { - loadFunc(); - }} - > - - - - - Refresh - -
- ); -};`, + technology: "React", + snippets: { + short: ` + + + + + + + `, + long: [ + { + language: "Typescript", + snippet: `{shortCode}`, + }, + { + language: "Javascript", + snippet: `{shortCode}`, + }, + ], + }, }, ]; @@ -419,7 +424,7 @@ export const loading = () => ( variant="rectangle" style={{ height: "32px", - width: "130px", + width: "170px", }} /> ( variant="text" style={{ height: "18px", - width: "150px", + width: "100px", }} /> ( variant="rectangle" style={{ height: "24px", - width: "500px", + width: "300px", }} /> ( variant="rectangle" style={{ height: "40px", - width: "110px", + width: "100px", }} /> ( variant="rectangle" style={{ height: "40px", - width: "110px", + width: "100px", }} /> @@ -466,9 +471,9 @@ export const loaded = () => ( @@ -501,9 +506,9 @@ export const ContentFunction = () => { diff --git a/src/content/structured/components/status-tags/code.mdx b/src/content/structured/components/status-tags/code.mdx index 9a6215a5c..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: "2023-10-24" +date: "2024-05-02" title: "Status tag" @@ -21,22 +21,71 @@ tabs: import { IcStatusTag } from "@ukic/react"; -## Component demo - export const snippetsDefault = [ { - language: "Web component", - snippet: ` + technology: "Web component", + snippets: { + short: ` `, + long: `.parent-container { + display: flex; + gap: 8px; + flex-wrap: wrap; + padding: 16px; + } + + +
+ {shortCode} +
`, + }, }, { - language: "React", - snippet: ` + technology: "React", + snippets: { + short: ` `, + long: [ + { + language: "Typescript", + snippet: `const useStyles = createUseStyles({ + parentContainer: { + display: "flex", + flexWrap: "wrap", + gap: "8px", + padding: "16px", + }, +}); +const classes = useStyles(); +return ( +
+ {shortCode} +
+)`, + }, + { + language: "Javascript", + snippet: `const useStyles = createUseStyles({ + parentContainer: { + display: "flex", + flexWrap: "wrap", + gap: "8px", + padding: "16px", + }, +}); +const classes = useStyles(); +return ( +
+ {shortCode} +
+)`, + }, + ], + }, }, ]; @@ -57,18 +106,85 @@ export const snippetsDefault = [ export const snippetsEmphasis = [ { - language: "Web component", - snippet: ` - - -`, + technology: "Web component", + snippets: { + short: ` + + +`, + long: `.parent-container { + display: flex; + gap: 8px; + flex-wrap: wrap; + padding: 16px; + } + + +
+ {shortCode} +
`, + }, }, { - language: "React", - snippet: ` + technology: "React", + snippets: { + short: ` `, + long: [ + { + language: "Typescript", + snippet: `const useStyles = createUseStyles({ + parentContainer: { + display: "flex", + flexWrap: "wrap", + gap: "8px", + padding: "16px", + }, +}); +const classes = useStyles(); +return ( +
+ {shortCode} +
+)`, + }, + { + language: "Javascript", + snippet: `const useStyles = createUseStyles({ + parentContainer: { + display: "flex", + flexWrap: "wrap", + gap: "8px", + padding: "16px", + }, +}); +const classes = useStyles(); +return ( +
+ {shortCode} +
+)`, + }, + ], + }, }, ]; @@ -83,18 +199,85 @@ export const snippetsEmphasis = [ export const snippetsSmall = [ { - language: "Web component", - snippet: ` - - -`, + technology: "Web component", + snippets: { + short: ` + + +`, + long: `.parent-container { + display: flex; + gap: 8px; + flex-wrap: wrap; + padding: 16px; + } + + +
+ {shortCode} +
`, + }, }, { - language: "React", - snippet: ` + technology: "React", + snippets: { + short: ` `, + long: [ + { + language: "Typescript", + snippet: `const useStyles = createUseStyles({ + parentContainer: { + display: "flex", + flexWrap: "wrap", + gap: "8px", + padding: "16px", + }, +}); +const classes = useStyles(); +return ( +
+ {shortCode} +
+)`, + }, + { + language: "Javascript", + snippet: `const useStyles = createUseStyles({ + parentContainer: { + display: "flex", + flexWrap: "wrap", + gap: "8px", + padding: "16px", + }, +}); +const classes = useStyles(); +return ( +
+ {shortCode} +
+)`, + }, + ], + }, }, ]; diff --git a/src/content/structured/components/stepper/code.mdx b/src/content/structured/components/stepper/code.mdx index bb1a53ce4..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: "2023-02-03" +date: "2024-05-02" title: "Stepper" @@ -25,20 +25,35 @@ import { IcStepper, IcStep } from "@ukic/react"; export const snippets = [ { - language: "Web component", - snippet: ` - - - + technology: "Web component", + snippets: { + short: ` + + + `, + long: `{shortCode}`, + }, }, { - language: "React", - snippet: ` - - - + technology: "React", + snippets: { + short: ` + + + `, + long: [ + { + language: "Typescript", + snippet: `{shortCode}`, + }, + { + language: "Javascript", + snippet: `{shortCode}`, + }, + ], + }, }, ]; @@ -64,20 +79,35 @@ export const snippets = [ export const compactStepper = [ { - language: "Web component", - snippet: ` + technology: "Web component", + snippets: { + short: ` `, + long: `{shortCode}`, + }, }, { - language: "React", - snippet: ` + technology: "React", + snippets: { + short: ` `, + long: [ + { + language: "Typescript", + snippet: `{shortCode}`, + }, + { + language: "Javascript", + snippet: `{shortCode}`, + }, + ], + }, }, ]; @@ -93,20 +123,35 @@ export const compactStepper = [ export const leftAligned = [ { - language: "Web component", - snippet: ` + technology: "Web component", + snippets: { + short: ` `, + long: `{shortCode}`, + }, }, { - language: "React", - snippet: ` + technology: "React", + snippets: { + short: ` `, + long: [ + { + language: "Typescript", + snippet: `{shortCode}`, + }, + { + language: "Javascript", + snippet: `{shortCode}`, + }, + ], + }, }, ]; @@ -122,20 +167,35 @@ export const leftAligned = [ export const hiddenStepInfo = [ { - language: "Web component", - snippet: ` + technology: "Web component", + snippets: { + short: ` `, + long: `{shortCode}`, + }, }, { - language: "React", - snippet: ` + technology: "React", + snippets: { + short: ` `, + long: [ + { + language: "Typescript", + snippet: `{shortCode}`, + }, + { + language: "Javascript", + snippet: `{shortCode}`, + }, + ], + }, }, ]; @@ -151,8 +211,9 @@ export const hiddenStepInfo = [ export const withSubtitles = [ { - language: "Web component", - snippet: ` + technology: "Web component", + snippets: { + short: ` `, + long: `{shortCode}`, + }, }, { - language: "React", - snippet: ` + technology: "React", + snippets: { + short: ` + /> `, + long: [ + { + language: "Typescript", + snippet: `{shortCode}`, + }, + { + language: "Javascript", + snippet: `{shortCode}`, + }, + ], + }, }, ]; @@ -209,20 +284,35 @@ export const withSubtitles = [ export const customConnectorWidth = [ { - language: "Web component", - snippet: ` + technology: "Web component", + snippets: { + short: ` `, + long: `{shortCode}`, + }, }, { - language: "React", - snippet: ` + technology: "React", + snippets: { + short: ` `, + long: [ + { + language: "Typescript", + snippet: `{shortCode}`, + }, + { + language: "Javascript", + snippet: `{shortCode}`, + }, + ], + }, }, ]; diff --git a/src/content/structured/components/switch/code.mdx b/src/content/structured/components/switch/code.mdx index 22e75fe30..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: "2023-10-24" +date: "2024-05-02" title: "Switch" @@ -25,8 +25,9 @@ import { IcSwitch } from "@ukic/react"; export const snippetsDefault = [ { - language: "Web component", - snippet: ` + technology: "Web component", + snippets: { + short: ` `, + long: `{shortCode}`, + }, }, { - language: "React", - snippet: ` console.log({ checked: ev.detail.checked, value: ev.detail.value })} />`, + long: [ + { + language: "Typescript", + snippet: `{shortCode}`, + }, + { + language: "Javascript", + snippet: `{shortCode}`, + }, + ], + }, }, ]; @@ -71,12 +86,27 @@ export const snippetsDefault = [ export const snippetsState = [ { - language: "Web component", - snippet: ``, + technology: "Web component", + snippets: { + short: ``, + long: `{shortCode}`, + }, }, { - language: "React", - snippet: ``, + technology: "React", + snippets: { + short: ``, + long: [ + { + language: "Typescript", + snippet: `{shortCode}`, + }, + { + language: "Javascript", + snippet: `{shortCode}`, + }, + ], + }, }, ]; @@ -88,12 +118,31 @@ export const snippetsState = [ export const snippetsSmall = [ { - language: "Web component", - snippet: ``, + technology: "Web component", + snippets: { + short: ``, + long: `{shortCode}`, + }, }, { - language: "React", - snippet: ``, + technology: "React", + snippets: { + short: ``, + long: [ + { + language: "Typescript", + snippet: `{shortCode}`, + }, + { + language: "Javascript", + snippet: `{shortCode}`, + }, + ], + }, }, ]; @@ -105,14 +154,42 @@ export const snippetsSmall = [ export const snippetsDisabled = [ { - language: "Web component", - snippet: ` -`, + technology: "Web component", + snippets: { + short: ` +`, + long: `{shortCode}`, + }, }, { - language: "React", - snippet: ` -`, + technology: "React", + snippets: { + short: ` + `, + long: [ + { + language: "Typescript", + snippet: `<> + {shortCode} +`, + }, + { + language: "Javascript", + snippet: `<> + {shortCode} +`, + }, + ], + }, }, ]; @@ -127,8 +204,9 @@ export const snippetsDisabled = [ export const snippetsHelperAndAdornment = [ { - language: "Web component", - snippet: ` + technology: "Web component", + snippets: { + short: ` `, + long: `{shortCode}`, + }, }, { - language: "React", - snippet: ` + technology: "React", + snippets: { + short: ` `, + long: [ + { + language: "Typescript", + snippet: `{shortCode}`, + }, + { + language: "Javascript", + snippet: `{shortCode}`, + }, + ], + }, }, ]; diff --git a/src/content/structured/components/tabs/code.mdx b/src/content/structured/components/tabs/code.mdx index c5d72e5b8..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-04-17" +date: "2024-05-02" title: "Tabs" @@ -25,8 +25,9 @@ import { IcTab, IcTabContext, IcTabGroup, IcTabPanel } from "@ukic/react"; export const snippets = [ { - language: "Web component", - snippet: ` + technology: "Web component", + snippets: { + short: ` Ingredients Method @@ -45,10 +46,13 @@ export const snippets = [ }) ) `, + long: `{shortCode}`, + }, }, { - language: "React", - snippet: ` console.log({ tabIndex: ev.detail.tabIndex, @@ -65,6 +69,17 @@ export const snippets = [ Tab Two - Method Tab Three - History `, + long: [ + { + language: "Typescript", + snippet: `{shortCode}`, + }, + { + language: "Javascript", + snippet: `{shortCode}`, + }, + ], + }, }, ]; @@ -110,17 +125,18 @@ export const snippets = [ export const withIcons = [ { - language: "Web component", - snippet: ` + technology: "Web component", + snippets: { + short: ` Ingredients @@ -131,9 +147,9 @@ export const withIcons = [ @@ -144,9 +160,9 @@ export const withIcons = [ @@ -157,55 +173,69 @@ export const withIcons = [ Tab Two - Method Tab Three - History `, + long: `{shortCode}`, + }, }, { - language: "React", - snippet: ` - - - Ingredients - - - - - - Method - - - - - - History - - - - - - Tab One - Ingredients - Tab Two - Method - Tab Three - History - `, + technology: "React", + snippets: { + short: ` + + + Ingredients + + + + + + Method + + + + + + History + + + + + + Tab One - Ingredients + Tab Two - Method + Tab Three - History +`, + long: [ + { + language: "Typescript", + snippet: `{shortCode}`, + }, + { + language: "Javascript", + snippet: `{shortCode}`, + }, + ], + }, }, ]; @@ -217,9 +247,9 @@ export const withIcons = [ @@ -230,9 +260,9 @@ export const withIcons = [ @@ -243,9 +273,9 @@ export const withIcons = [ @@ -262,8 +292,9 @@ export const withIcons = [ export const disabled = [ { - language: "Web component", - snippet: ` + technology: "Web component", + snippets: { + short: ` Ingredients Method @@ -273,10 +304,13 @@ export const disabled = [ Tab Two - Method Tab Three - History `, + long: `{shortCode}`, + }, }, { - language: "React", - snippet: ` + technology: "React", + snippets: { + short: ` Ingredients Method @@ -286,6 +320,17 @@ export const disabled = [ Tab Two - Method Tab Three - History `, + long: [ + { + language: "Typescript", + snippet: `{shortCode}`, + }, + { + language: "Javascript", + snippet: `{shortCode}`, + }, + ], + }, }, ]; @@ -306,8 +351,9 @@ export const disabled = [ export const light = [ { - language: "Web component", - snippet: ` + technology: "Web component", + snippets: { + short: ` Ingredients Method @@ -317,10 +363,20 @@ export const light = [ Tab Two - Method Tab Three - History `, + long: `.dark-background { + background-color: #2c2f34; + } + + +
+ {shortCode} +
`, + }, }, { - language: "React", - snippet: ` + technology: "React", + snippets: { + short: ` Ingredients Method @@ -330,6 +386,37 @@ export const light = [ Tab Two - Method Tab Three - History `, + long: [ + { + language: "Typescript", + snippet: ` const useStyles = createUseStyles({ + darkBackground: { + backgroundColor: "#2c2f34", + }, + }); + const classes = useStyles(); + return ( +
+ {shortCode} +
+ )`, + }, + { + language: "Javascript", + snippet: ` const useStyles = createUseStyles({ + darkBackground: { + backgroundColor: "#2c2f34", + }, + }); + const classes = useStyles(); + return ( +
+ {shortCode} +
+ )`, + }, + ], + }, }, ]; @@ -350,55 +437,85 @@ export const light = [ export const compact = [ { - language: "Web component", - snippet: ` - - Ingredients - Method - History - Drinks - Recipes - - Tab One - Ingredients - Tab Two - Method - Tab Three - History - Tab Four - Drinks - Tab Five - Recipes - -`, + + {shortCode}`, + }, }, { - language: "React", - snippet: `const compactStyle = { - width: "60%", - marginLeft: "auto", - marginRight: "auto", - } + technology: "React", + snippets: { + short: ` + + Ingredients + Method + History + Drinks + Recipes + + Tab One - Ingredients + Tab Two - Method + Tab Three - History + Tab Four - Drinks + Tab Five - Recipes +`, + long: [ + { + language: "Typescript", + snippet: `const useStyles = createUseStyles({ + compactTabsContainer: { + width: "60%", + marginLeft: "auto", + marginRight: "auto", + }, +}); +const classes = useStyles(); return ( - <> - - - Ingredients - Method - History - Drinks - Recipes - - Tab One - Ingredients - Tab Two - Method - Tab Three - History - Tab Four - Drinks - Tab Five - Recipes - - -);`, +
+ {shortCode} +
+)`, + }, + { + language: "Javascript", + snippet: `const useStyles = createUseStyles({ + compactTabsContainer: { + width: "60%", + marginLeft: "auto", + marginRight: "auto", + }, +}); +const classes = useStyles(); +return ( +
+ {shortCode} +
+)`, + }, + ], + }, }, ]; @@ -423,8 +540,9 @@ return ( export const nested = [ { - language: "Web component", - snippet: ` + technology: "Web component", + snippets: { + short: ` Ingredients Method @@ -445,10 +563,13 @@ export const nested = [ Outer Tab Panel Two - Method Outer Tab Panel Three - History `, + long: `{shortCode}`, + }, }, { - language: "React", - snippet: ` + technology: "React", + snippets: { + short: ` Ingredients Method @@ -469,6 +590,17 @@ export const nested = [ Outer Tab Panel Two - Method Outer Tab Panel Three - History `, + long: [ + { + language: "Typescript", + snippet: `{shortCode}`, + }, + { + language: "Javascript", + snippet: `{shortCode}`, + }, + ], + }, }, ]; diff --git a/src/content/structured/components/text-field/code.mdx b/src/content/structured/components/text-field/code.mdx index 72780e2b5..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: "2023-10-25" +date: "2024-05-02" title: "Text field" @@ -25,25 +25,67 @@ import { IcTextField } from "@ukic/react"; export const snippetsDefault = [ { - language: "Web component", - snippet: ` - -`, + technology: "Web component", + snippets: { + short: ``, + long: `.parent-container { + padding: 16px; + } + + +
+ {shortCode} +
+ `, + }, }, { - language: "React", - snippet: ` console.log(ev.detail.value)} />`, + long: [ + { + language: "Typescript", + snippet: `const useStyles = createUseStyles({ + parentContainer: { + padding: "16px", + }, +}); +const classes = useStyles(); +return ( +
+ {shortCode} +
+)`, + }, + { + language: "Javascript", + snippet: `const useStyles = createUseStyles({ + parentContainer: { + padding: "16px", + }, +}); +const classes = useStyles(); +return ( +
+ {shortCode} +
+)`, + }, + ], + }, }, ]; @@ -66,8 +108,9 @@ export const snippetsDefault = [ export const snippetsIconValueMaxLength = [ { - language: "Web component", - snippet: ` `, + long: `.parent-container { + padding: 16px; + } + + +
+ {shortCode} +
`, + }, }, { - language: "React", - snippet: ` `, + long: [ + { + language: "Typescript", + snippet: `const useStyles = createUseStyles({ + parentContainer: { + padding: "16px", + }, +}); +const classes = useStyles(); +return ( +
+ {shortCode} +
+)`, + }, + { + language: "Javascript", + snippet: `const useStyles = createUseStyles({ + parentContainer: { + padding: "16px", + }, +}); +const classes = useStyles(); +return ( +
+ {shortCode} +
+)`, + }, + ], + }, }, ]; @@ -123,9 +207,9 @@ export const snippetsIconValueMaxLength = [ @@ -137,44 +221,88 @@ export const snippetsIconValueMaxLength = [ export const snippetsDisabled = [ { - language: "Web component", - snippet: ` - + `, + long: `.parent-container { + padding: 16px; + } + + +
+ {shortCode} +
`, + }, }, { - language: "React", - snippet: ` - + `, + long: [ + { + language: "Typescript", + snippet: `const useStyles = createUseStyles({ + parentContainer: { + padding: "16px", + }, +}); +const classes = useStyles(); +return ( +
+ {shortCode} +
+)`, + }, + { + language: "Javascript", + snippet: `const useStyles = createUseStyles({ + parentContainer: { + padding: "16px", + }, +}); +const classes = useStyles(); +return ( +
+ {shortCode} +
+)`, + }, + ], + }, }, ]; @@ -188,9 +316,9 @@ export const snippetsDisabled = [ @@ -203,25 +331,67 @@ export const snippetsDisabled = [ export const snippetsSmall = [ { - language: "Web component", - snippet: ` - -`, + technology: "Web component", + snippets: { + short: ``, + long: `.parent-container { + padding: 16px; + } + + +
+ {shortCode} +
+ `, + }, }, { - language: "React", - snippet: ` console.log(ev.detail.value)} />`, + long: [ + { + language: "Typescript", + snippet: `const useStyles = createUseStyles({ + parentContainer: { + padding: "16px", + }, +}); +const classes = useStyles(); +return ( +
+ {shortCode} +
+)`, + }, + { + language: "Javascript", + snippet: `const useStyles = createUseStyles({ + parentContainer: { + padding: "16px", + }, +}); +const classes = useStyles(); +return ( +
+ {shortCode} +
+)`, + }, + ], + }, }, ]; @@ -238,15 +408,16 @@ export const snippetsSmall = [ export const snippetsValidation = [ { - language: "Web component", - snippet: ` - + technology: "Web component", + snippets: { + short: ` - + helper-text="Such as Arabica, Robusta or Liberica" +> - + helper-text="Such as Arabica, Robusta or Liberica" +> -`, + helper-text="Such as Arabica, Robusta or Liberica" +>`, + long: `.parent-container { + padding: 16px; + } + + +
+ {shortCode} +
`, + }, }, { - language: "React", - snippet: ` - - -`, + technology: "React", + snippets: { + short: ` + + +`, + long: [ + { + language: "Typescript", + snippet: `<> + {shortCode} +`, + }, + { + language: "Javascript", + snippet: `<> + {shortCode} +`, + }, + ], + }, }, ]; @@ -372,8 +572,9 @@ In this example, an error message will display when the input is either below th export const snippetsMinMax = [ { - language: "Web component", - snippet: ` -`, +>`, + long: `.parent-container { + padding: 16px; + } + + +
+ {shortCode} +
`, + }, }, { - language: "React", - snippet: ``, + long: [ + { + language: "Typescript", + snippet: `const useStyles = createUseStyles({ + parentContainer: { + padding: "16px", + }, +}); +const classes = useStyles(); +return ( +
+ {shortCode} +
+)`, + }, + { + language: "Javascript", + snippet: `const useStyles = createUseStyles({ + parentContainer: { + padding: "16px", + }, +}); +const classes = useStyles(); +return ( +
+ {shortCode} +
+)`, + }, + ], + }, }, ]; @@ -417,23 +658,66 @@ export const snippetsMinMax = [ export const snippetsTextArea = [ { - language: "Web component", - snippet: ` -`, + technology: "Web component", + snippets: { + short: ``, + long: `.parent-container { + padding: 16px; + } + + +
+ {shortCode} +
`, + }, }, { - language: "React", - snippet: ``, + technology: "React", + snippets: { + short: ``, + long: [ + { + language: "Typescript", + snippet: `const useStyles = createUseStyles({ + parentContainer: { + padding: "16px", + }, +}); +const classes = useStyles(); +return ( +
+ {shortCode} +
+)`, + }, + { + language: "Javascript", + snippet: `const useStyles = createUseStyles({ + parentContainer: { + padding: "16px", + }, +}); +const classes = useStyles(); +return ( +
+ {shortCode} +
+)`, + }, + ], + }, }, ]; diff --git a/src/content/structured/components/toasts/code.mdx b/src/content/structured/components/toasts/code.mdx index 11cc9d57d..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: "2023-11-09" +date: "2024-05-02" title: "Toast" @@ -30,11 +30,13 @@ import { useRef } from "react"; export const defaultSnippet = [ { - language: "Web component", - snippet: `Display toast + technology: "Web component", + snippets: { + short: `Display toast - +`, + long: `{shortCode} `, + }, }, { - language: "React", - snippet: `const toastRegionEl = useRef(null); + technology: "React", + snippets: { + short: `Display toast component + + +`, + long: [ + { + language: "Typescript", + snippet: `const toastRegionEl = useRef(null); +const toastEl = useRef(null); +const handleClick = () => { + if (toastRegionEl.current && toastEl.current) { + toastRegionEl.current.openToast = toastEl.current; + } +}; +return ( + <> + {shortCode} + +)`, + }, + { + language: "Javascript", + snippet: `const toastRegionEl = useRef(null); const toastEl = useRef(null); const handleClick = () => { - toastRegionEl.current.openToast = toastEl.current; -} + if (toastRegionEl.current && toastEl.current) { + toastRegionEl.current.openToast = toastEl.current; + } +}; return ( <> - Display toast component - - - + {shortCode} )`, + }, + ], + }, }, ]; @@ -103,60 +131,188 @@ To view the toasts queuing in the following example, click each button to open a export const queuingSnippet = [ { - language: "Web component", - snippet: `Display default toast + technology: "Web component", + snippets: { + short: `Display default toast Display error toast Display auto dismiss toast - -`, + }, + }, + { + technology: "React", + snippets: { + short: `Display default toast +Display error toast + + Display auto dismiss toast + + + + + +`, + long: [ + { + language: "Typescript", + snippet: `const toastRegionEl = useRef(null); +const toastEl = useRef(null); +const errorToastEl = useRef(null); +const autoDismissToastEl = useRef(null); +const handleClick = () => { + if (toastRegionEl.current && toastEl.current) { + toastRegionEl.current.openToast = toastEl.current; } - function handleAutoDismissClick() { - var toast = document.querySelector("#toast-03"); - toastRegion.openToast = toast; +}; +const handleErrorClick = () => { + if (toastRegionEl.current && errorToastEl.current) { + toastRegionEl.current.openToast = errorToastEl.current; } -`, +}; +const handleAutoDismissClick = () => { + if (toastRegionEl.current && autoDismissToastEl.current) { + toastRegionEl.current.openToast = autoDismissToastEl.current; + } +}; +const useStyles = createUseStyles({ + btnContainer: { + display: "flex", + flexWrap: "wrap", + gap: "8px", + padding: "16px", }, - { - language: "React", - snippet: `const toastRegionEl = useRef(null); +}); +const classes = useStyles(); +return ( + <> +
+ Display default toast + Display error toast + + Display auto dismiss toast + +
+ + + + + + +)`, + }, + { + language: "Javascript", + snippet: `const toastRegionEl = useRef(null); const toastEl = useRef(null); const errorToastEl = useRef(null); const autoDismissToastEl = useRef(null); const handleClick = () => { - toastRegionEl.current.openToast = toastEl.current; + if (toastRegionEl.current && toastEl.current) { + toastRegionEl.current.openToast = toastEl.current; + } }; const handleErrorClick = () => { - toastRegionEl.current.openToast = errorToastEl.current; + if (toastRegionEl.current && errorToastEl.current) { + toastRegionEl.current.openToast = errorToastEl.current; + } }; const handleAutoDismissClick = () => { - toastRegionEl.current.openToast = autoDismissToastEl.current; + if (toastRegionEl.current && autoDismissToastEl.current) { + toastRegionEl.current.openToast = autoDismissToastEl.current; + } }; +const useStyles = createUseStyles({ + btnContainer: { + display: "flex", + flexWrap: "wrap", + gap: "8px", + padding: "16px", + }, +}); +const classes = useStyles(); return ( <> -
- Display default toast - Display error toast - Display auto dismiss toast +
+ Display default toast + Display error toast + + Display auto dismiss toast +
- - + + -);`, +)`, + }, + ], + }, }, ]; @@ -209,11 +365,13 @@ export const QueuingToast = () => { export const withVariantSnippet = [ { - language: "Web component", - snippet: `Display success toast + technology: "Web component", + snippets: { + short: `Display success toast - +`, + long: `{shortCode} `, + }, }, { - language: "React", - snippet: `const toastRegionEl = useRef(null); + technology: "React", + snippets: { + short: `Display success toast + + +`, + long: [ + { + language: "Typescript", + snippet: `const toastRegionEl = useRef(null); +const toastEl = useRef(null); +const handleClick = () => { + if (toastRegionEl.current && toastEl.current) { + toastRegionEl.current.openToast = toastEl.current; + } +}; +return ( + <> + {shortCode} + +)`, + }, + { + language: "Javascript", + snippet: `const toastRegionEl = useRef(null); const toastEl = useRef(null); const handleClick = () => { - toastRegionEl.current.openToast = toastEl.current; -} + if (toastRegionEl.current && toastEl.current) { + toastRegionEl.current.openToast = toastEl.current; + } +}; return ( <> - Display success toast - - - + {shortCode} )`, + }, + ], + }, }, ]; @@ -274,11 +458,13 @@ export const WithVariantToast = () => { export const withMultilineSnippet = [ { - language: "Web component", - snippet: `Display multi-line toast + technology: "Web component", + snippets: { + short: `Display multi-line toast - +`, + long: `{shortCode} `, + }, }, { - language: "React", - snippet: `const toastRegionEl = useRef(null); + technology: "React", + snippets: { + short: `Display multi-line toast + + +`, + long: [ + { + language: "Typescript", + snippet: `const toastRegionEl = useRef(null); +const toastEl = useRef(null); +const handleClick = () => { + if (toastRegionEl.current && toastEl.current) { + toastRegionEl.current.openToast = toastEl.current; + } +}; +return ( + <> + {shortCode} + +)`, + }, + { + language: "Javascript", + snippet: `const toastRegionEl = useRef(null); const toastEl = useRef(null); const handleClick = () => { - toastRegionEl.current.openToast = toastEl.current; -} + if (toastRegionEl.current && toastEl.current) { + toastRegionEl.current.openToast = toastEl.current; + } +}; return ( <> - Display multi-line toast - - - + {shortCode} )`, + }, + ], + }, }, ]; @@ -337,8 +549,9 @@ export const MultilineToast = () => { export const slottedActionsSnippet = [ { - language: "Web component", - snippet: `Display slotted buttons toast + technology: "Web component", + snippets: { + short: `Display slotted buttons toast Display slotted buttons toast @@ -347,56 +560,198 @@ export const slottedActionsSnippet = [ Retry - -`, + + +
+ Display slotted buttons toast + Display slotted buttons toast +
+ + + Retry + + + Retry + + + `, + }, }, { - language: "React", - snippet: `const toastRegionEl = useRef(null); + technology: "React", + snippets: { + short: `Display slotted button toast +Display slotted link toast + + + Retry + + + Retry + +`, + long: [ + { + language: "Typescript", + snippet: `const toastRegionEl = useRef(null); +const buttonToastEl = useRef(null); +const linkToastEl = useRef(null); +const handleButtonToastClick = () => { + if (toastRegionEl.current && buttonToastEl.current) { + toastRegionEl.current.openToast = buttonToastEl.current; + } +}; +const handleLinkToastClick = () => { + if (toastRegionEl.current && linkToastEl.current) { + toastRegionEl.current.openToast = linkToastEl.current; + } +}; +const useStyles = createUseStyles({ + btnContainer: { + display: "flex", + flexWrap: "wrap", + gap: "8px", + padding: "16px", + }, +}); +const classes = useStyles(); +return ( + <> +
+ + Display slotted button toast + + + Display slotted link toast + +
+ + + + Retry + + + + + Retry + + + + +)`, + }, + { + language: "Javascript", + snippet: `const toastRegionEl = useRef(null); const buttonToastEl = useRef(null); const linkToastEl = useRef(null); const handleButtonToastClick = () => { - toastRegionEl.current.openToast = buttonToastEl.current; -} + if (toastRegionEl.current && buttonToastEl.current) { + toastRegionEl.current.openToast = buttonToastEl.current; + } +}; const handleLinkToastClick = () => { - toastRegionEl.current.openToast = linkToastEl.current; -} + if (toastRegionEl.current && linkToastEl.current) { + toastRegionEl.current.openToast = linkToastEl.current; + } +}; +const useStyles = createUseStyles({ + btnContainer: { + display: "flex", + flexWrap: "wrap", + gap: "8px", + padding: "16px", + }, +}); +const classes = useStyles(); return ( <> -
- Display slotted button toast - Display slotted link toast +
+ + Display slotted button toast + + + Display slotted link toast +
- Retry + + Retry + - Retry + + Retry + )`, + }, + ], + }, }, ]; @@ -454,11 +809,19 @@ export const SlottedActionsToast = () => { export const autoDismissSnippet = [ { - language: "Web component", - snippet: `Display auto-dismiss toast + technology: "Web component", + snippets: { + short: `Display auto-dismiss toast - - + +`, + long: `{shortCode} `, + }, }, { - language: "React", - snippet: `const toastRegionEl = useRef(null); + technology: "React", + snippets: { + short: `Display auto-dismiss toast + + +`, + long: [ + { + language: "Typescript", + snippet: `const toastRegionEl = useRef(null); +const toastEl = useRef(null); +const handleClick = () => { + if (toastRegionEl.current && toastEl.current) { + toastRegionEl.current.openToast = toastEl.current; + } +}; +return ( + <> + {shortCode} + +)`, + }, + { + language: "Javascript", + snippet: `const toastRegionEl = useRef(null); const toastEl = useRef(null); const handleClick = () => { - toastRegionEl.current.openToast = toastEl.current; -} + if (toastRegionEl.current && toastEl.current) { + toastRegionEl.current.openToast = toastEl.current; + } +}; return ( <> - Display auto-dismiss toast - - - + {shortCode} )`, + }, + ], + }, }, ]; @@ -515,16 +910,30 @@ export const AutoDismissToast = () => { export const customIconAriaLabelsSnippet = [ { - language: "Web component", - snippet: `Display auto-dismiss toast + technology: "Web component", + snippets: { + short: `Display auto-dismiss toast - - + + coffee-outline - + - +`, + long: `{shortCode} `, + }, }, { - language: "React", - snippet: `const toastRegionEl = useRef(null); + technology: "React", + snippets: { + short: ` + Display custom icon and aria-label toast + + + + + coffee-outline + + + +`, + long: [ + { + language: "Typescript", + snippet: `const toastRegionEl = useRef(null); +const toastEl = useRef(null); +const handleClick = () => { + if (toastRegionEl.current && toastEl.current) { + toastRegionEl.current.openToast = toastEl.current; + } +}; +return ( + <> + {shortCode} + +)`, + }, + { + language: "Javascript", + snippet: `const toastRegionEl = useRef(null); const toastEl = useRef(null); const handleClick = () => { - toastRegionEl.current.openToast = toastEl.current; -} + if (toastRegionEl.current && toastEl.current) { + toastRegionEl.current.openToast = toastEl.current; + } +}; return ( <> - Display custom icon and aria-label toast - - - - coffee-outline - - - - + {shortCode} )`, + }, + ], + }, }, ]; diff --git a/src/content/structured/components/toggle-buttons/code.mdx b/src/content/structured/components/toggle-buttons/code.mdx index 9fea328d0..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-03-08" +date: "2024-05-02" title: "Toggle button" @@ -30,21 +30,66 @@ import { export const snippetsDefault = [ { - language: "Web component", - snippet: ` -`, + technology: "Web component", + snippets: { + short: ``, + long: `.toggle-btn-container { + padding: 16px; + } + + +
+ {shortCode} +
+ `, + }, }, { - language: "React", - snippet: ` console.log(event.detail.checked)} + technology: "React", + snippets: { + short: ` console.log(event.detail.checked)} />`, + long: [ + { + language: "Typescript", + snippet: `const useStyles = createUseStyles({ + toggleBtnContainer: { + padding: "16px", + }, +}); +const classes = useStyles(); +return ( +
+ {shortCode} +
+)`, + }, + { + language: "Javascript", + snippet: `const useStyles = createUseStyles({ + toggleBtnContainer: { + padding: "16px", + }, +}); +const classes = useStyles(); +return ( +
+ {shortCode} +
+)`, + }, + ], + }, }, ]; @@ -69,18 +114,83 @@ export const snippetsDefault = [ export const snippetsOtherStates = [ { - language: "Web component", - snippet: ` - - -`, + technology: "Web component", + snippets: { + short: ` + + +`, + long: `.toggle-btn-container { + display: flex; + flex-wrap: wrap; + padding: 16px; + gap: 8px; + } + + +
+ {shortCode} +
`, + }, }, { - language: "React", - snippet: ` + technology: "React", + snippets: { + short: ` `, + long: [ + { + language: "Typescript", + snippet: `const useStyles = createUseStyles({ + toggleBtnContainer: { + display: "flex", + flexWrap: "wrap", + padding: "16px", + gap: "8px", + }, +}); +const classes = useStyles(); +return ( +
+ {shortCode} +
+)`, + }, + { + language: "Javascript", + snippet: `const useStyles = createUseStyles({ + toggleBtnContainer: { + display: "flex", + flexWrap: "wrap", + padding: "16px", + gap: "8px", + }, +}); +const classes = useStyles(); +return ( +
+ {shortCode} +
+)`, + }, + ], + }, }, ]; @@ -95,25 +205,71 @@ export const snippetsOtherStates = [ export const snippetsWithIcon = [ { - language: "Web component", - snippet: ` - + technology: "Web component", + snippets: { + short: ` + + + `, + long: `.toggle-btn-container { + padding: 16px; + } + + +
+ {shortCode} +
`, + }, }, { - language: "React", - snippet: ` - - - + technology: "React", + snippets: { + short: ` + + + `, + long: [ + { + language: "Typescript", + snippet: `const useStyles = createUseStyles({ + toggleBtnContainer: { + padding: "16px", + }, +}); +const classes = useStyles(); +return ( +
+ {shortCode} +
+)`, + }, + { + language: "Javascript", + snippet: `const useStyles = createUseStyles({ + toggleBtnContainer: { + padding: "16px", + }, +}); +const classes = useStyles(); +return ( +
+ {shortCode} +
+)`, + }, + ], + }, }, ]; @@ -122,9 +278,9 @@ export const snippetsWithIcon = [ @@ -136,16 +292,73 @@ export const snippetsWithIcon = [ export const snippetsSizing = [ { - language: "Web component", - snippet: ` + technology: "Web component", + snippets: { + short: ` -`, +`, + long: `.toggle-btn-container { + display: flex; + flex-wrap: wrap; + padding: 16px; + gap: 8px; + } + + +
+ {shortCode} +
`, + }, }, { - language: "React", - snippet: ` + technology: "React", + snippets: { + short: ` `, + long: [ + { + language: "Typescript", + snippet: `const useStyles = createUseStyles({ + toggleBtnContainer: { + display: "flex", + flexWrap: "wrap", + padding: "16px", + gap: "8px", + }, +}); +const classes = useStyles(); +return ( +
+ {shortCode} +
+)`, + }, + { + language: "Javascript", + snippet: `const useStyles = createUseStyles({ + toggleBtnContainer: { + display: "flex", + flexWrap: "wrap", + padding: "16px", + gap: "8px", + }, +}); +const classes = useStyles(); +return ( +
+ {shortCode} +
+)`, + }, + ], + }, }, ]; @@ -159,16 +372,58 @@ export const snippetsSizing = [ export const snippetsWithBadge = [ { - language: "Web component", - snippet: ` - + technology: "Web component", + snippets: { + short: ` + `, + long: `.toggle-btn-container { + padding: 16px; + } + + +
+ {shortCode} +
`, + }, }, { - language: "React", - snippet: ` - + technology: "React", + snippets: { + short: ` + `, + long: [ + { + language: "Typescript", + snippet: `const useStyles = createUseStyles({ + toggleBtnContainer: { + padding: "16px", + }, +}); +const classes = useStyles(); +return ( +
+ {shortCode} +
+)`, + }, + { + language: "Javascript", + snippet: `const useStyles = createUseStyles({ + toggleBtnContainer: { + padding: "16px", + }, +}); +const classes = useStyles(); +return ( +
+ {shortCode} +
+)`, + }, + ], + }, }, ]; @@ -182,16 +437,84 @@ export const snippetsWithBadge = [ export const snippetsDark = [ { - language: "Web component", - snippet: ` - -`, + technology: "Web component", + snippets: { + short: ` + +`, + long: `.toggle-btn-container { + display: flex; + flex-wrap: wrap; + padding: 16px; + gap: 8px; + } + + +
+ {shortCode} +
`, + }, }, { - language: "React", - snippet: ` + technology: "React", + snippets: { + short: ` -`, +`, + long: [ + { + language: "Typescript", + snippet: `const useStyles = createUseStyles({ + toggleBtnContainer: { + display: "flex", + flexWrap: "wrap", + padding: "16px", + gap: "8px", + }, +}); +const classes = useStyles(); +return ( +
+ {shortCode} +
+)`, + }, + { + language: "Javascript", + snippet: `const useStyles = createUseStyles({ + toggleBtnContainer: { + display: "flex", + flexWrap: "wrap", + padding: "16px", + gap: "8px", + }, +}); +const classes = useStyles(); +return ( +
+ {shortCode} +
+)`, + }, + ], + }, }, ]; @@ -210,16 +533,75 @@ export const snippetsDark = [ export const snippetsLight = [ { - language: "Web component", - snippet: ` + technology: "Web component", + snippets: { + short: ` `, + long: `.dark-background { + display: flex; + flex-wrap: wrap; + background-color: #2c2f34; + padding: 16px; + gap: 8px; + } + + +
+ {shortCode} +
`, + }, }, { - language: "React", - snippet: ` + technology: "React", + snippets: { + short: ` -`, +`, + long: [ + { + language: "Typescript", + snippet: `const useStyles = createUseStyles({ + darkBackground: { + display: "flex", + flexWrap: "wrap", + backgroundColor: "#2c2f34", + padding: "16px", + gap: "8px", + }, +}); +const classes = useStyles(); +return ( +
+ {shortCode} +
+)`, + }, + { + language: "Javascript", + snippet: `const useStyles = createUseStyles({ + darkBackground: { + display: "flex", + flexWrap: "wrap", + backgroundColor: "#2c2f34", + padding: "16px", + gap; "8px", + }, +}); +const classes = useStyles(); +return ( +
+ {shortCode} +
+)`, + }, + ], + }, }, ]; @@ -241,27 +623,81 @@ export const snippetsLight = [ export const snippetsFullWidth = [ { - language: "Web component", - snippet: ` - - - - + technology: "Web component", + snippets: { + short: ` + + + + `, + long: `.toggle-btn-container { + padding: 16px; + } + + +
+ {shortCode} +
`, + }, }, { - language: "React", - snippet: ` - - - - + technology: "React", + snippets: { + short: ` + + + + `, + long: [ + { + language: "Typescript", + snippet: `const useStyles = createUseStyles({ + toggleBtnContainer: { + padding: "16px", + }, +}); +const classes = useStyles(); +return ( +
+ {shortCode} +
+)`, + }, + { + language: "Javascript", + snippet: `const useStyles = createUseStyles({ + toggleBtnContainer: { + padding: "16px", + }, +}); +const classes = useStyles(); +return ( +
+ {shortCode} +
+)`, + }, + ], + }, }, ]; - + @@ -273,91 +709,150 @@ export const snippetsFullWidth = [ export const snippetsIconOnly = [ { - language: "Web component", - snippet: ` - - - - - - - - - - - - - - - - `, + technology: "Web component", + snippets: { + short: ` + + + + + + + + + + + + + + + +`, + long: `.toggle-btn-container { + padding: 16px; + } + + +
+ {shortCode} +
`, + }, }, { - language: "React", - snippet: ` - - - - - - - - - - - - - - - - `, + technology: "React", + snippets: { + short: ` + + + + + + + + + + + + + + + +`, + long: [ + { + language: "Typescript", + snippet: `const useStyles = createUseStyles({ + toggleBtnContainer: { + padding: "16px", + }, +}); +const classes = useStyles(); +return ( +
+ {shortCode} +
+)`, + }, + { + language: "Javascript", + snippet: `const useStyles = createUseStyles({ + toggleBtnContainer: { + padding: "16px", + }, +}); +const classes = useStyles(); +return ( +
+ {shortCode} +
+)`, + }, + ], + }, }, ]; - + @@ -366,9 +861,9 @@ export const snippetsIconOnly = [ @@ -377,9 +872,9 @@ export const snippetsIconOnly = [ @@ -392,75 +887,129 @@ export const snippetsIconOnly = [ export const snippetsIconRight = [ { - language: "Web component", - snippet: ` + technology: "Web component", + snippets: { + short: ` - - + - - + `, + long: `.toggle-btn-container { + padding: 16px; + } + + +
+ {shortCode} +
`, + }, }, { - language: "React", - snippet: ` + technology: "React", + snippets: { + short: ` - + - - + + - + - -`, +`, + long: [ + { + language: "Typescript", + snippet: `const useStyles = createUseStyles({ + toggleBtnContainer: { + padding: "16px", + }, +}); +const classes = useStyles(); +return ( +
+ {shortCode} +
+)`, + }, + { + language: "Javascript", + snippet: `const useStyles = createUseStyles({ + toggleBtnContainer: { + padding: "16px", + }, +}); +const classes = useStyles(); +return ( +
+ {shortCode} +
+)`, + }, + ], + }, }, ]; - + @@ -470,9 +1019,9 @@ export const snippetsIconRight = [ @@ -485,77 +1034,131 @@ export const snippetsIconRight = [ export const snippetsIconTopGroup = [ { - language: "Web component", - snippet: ` - - - - - - - - - - - -`, + technology: "Web component", + snippets: { + short: ` + + + + + + + + + + +`, + long: `.toggle-btn-container { + padding: 16px; + } + + +
+ {shortCode} +
`, + }, }, { - language: "React", - snippet: ` - - - - - - - - - - - - - `, + technology: "React", + snippets: { + short: ` + + + + + + + + + + + + +`, + long: [ + { + language: "Typescript", + snippet: `const useStyles = createUseStyles({ + toggleBtnContainer: { + padding: "16px", + }, +}); +const classes = useStyles(); +return ( +
+ {shortCode} +
+)`, + }, + { + language: "Javascript", + snippet: `const useStyles = createUseStyles({ + toggleBtnContainer: { + padding: "16px", + }, +}); +const classes = useStyles(); +return ( +
+ {shortCode} +
+)`, + }, + ], + }, }, ]; - + @@ -565,9 +1168,9 @@ export const snippetsIconTopGroup = [ diff --git a/src/content/structured/components/tooltips/code.mdx b/src/content/structured/components/tooltips/code.mdx index 47f4c5b79..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-02-02" +date: "2024-05-02" title: "Tooltip" @@ -20,28 +20,109 @@ tabs: --- import { IcTooltip, IcButton, IcChip } from "@ukic/react"; -import { useRef } from "react"; +import { useRef, useState } from "react"; ## Component demo export const snippets = [ { - language: "Web component", - snippet: ` - Add + technology: "Web component", + snippets: { + short: ` + + Add + - - Remove + + + Remove + `, + long: `.tooltip-container { + display: flex; + flex-direction: column; + gap: 8px; + padding: 16px; + } + + +
+ {shortCode} +
`, + }, }, { - language: "React", - snippet: ` - Add + technology: "React", + snippets: { + short: ` + + Add + - - Remove + + + Remove + `, + long: [ + { + language: "Typescript", + snippet: `const useStyles = createUseStyles({ + tooltipContainer: { + display: "flex", + flexDirection: "column", + gap: "8px", + padding: "16px", + }, +}); +const classes = useStyles(); +return ( +
+ {shortCode} +
+)`, + }, + { + language: "Javascript", + snippet: `const useStyles = createUseStyles({ + tooltipContainer: { + display: "flex", + flexDirection: "column", + gap: "8px", + padding: "16px", + }, +}); +const classes = useStyles(); +return ( +
+ {shortCode} +
+)`, + }, + ], + }, }, ]; @@ -78,16 +159,73 @@ export const snippets = [ export const snippetsLeft = [ { - language: "Web component", - snippet: ` - Add + technology: "Web component", + snippets: { + short: ` + + Add + `, + long: `.tooltip-container { + display: flex; + justify-content: flex-end; + } + + +
+ {shortCode} +
`, + }, }, { - language: "React", - snippet: ` - Add + technology: "React", + snippets: { + short: ` + + Add + `, + long: [ + { + language: "Typescript", + snippet: `const useStyles = createUseStyles({ + tooltipContainer: { + display: "flex", + justifyContent: "flex-end" + }, +}); +const classes = useStyles(); +return ( +
+ {shortCode} +
+)}`, + }, + { + language: "Javascript", + snippet: `const useStyles = createUseStyles({ + tooltipContainer: { + display: "flex", + justifyContent: "flex-end" + }, +}); +const classes = useStyles(); +return ( +
+ {shortCode} +
+)`, + }, + ], + }, }, ]; @@ -113,16 +251,67 @@ export const snippetsLeft = [ export const snippetsRight = [ { - language: "Web component", - snippet: ` + technology: "Web component", + snippets: { + short: ` Add `, + long: `.tooltip-container { + display: flex; + justify-content: flex-start; + } + + +
+ {shortCode} +
`, + }, }, { - language: "React", - snippet: ` - Add + technology: "React", + snippets: { + short: ` + + Add + `, + long: [ + { + language: "Typescript", + snippet: `const useStyles = createUseStyles({ + tooltipContainer: { + display: "flex", + justifyContent: "flex-start" + }, +}); +const classes = useStyles(); +return ( +
+ {shortCode} +
+)`, + }, + { + language: "Javascript", + snippet: `const useStyles = createUseStyles({ + tooltipContainer: { + display: "flex", + justifyContent: "flex-start" + }, +}); +const classes = useStyles(); +return ( +
+ {shortCode} +
+)`, + }, + ], + }, }, ]; @@ -146,26 +335,57 @@ export const snippetsRight = [ ### Chip -export const snippetsDefault = [ +export const snippetsChip = [ { - language: "Web component", - snippet: ` + technology: "Web component", + snippets: { + short: ` - - + + `, + long: `{shortCode}`, + }, }, { - language: "React", - snippet: ` + technology: "React", + snippets: { + short: ` - + - + `, + long: [ + { + language: "Typescript", + snippet: `{shortCode}`, + }, + { + language: "Javascript", + snippet: `{shortCode}`, + }, + ], + }, }, ]; @@ -176,15 +396,15 @@ export const snippetsDefault = [ justifyContent: "center", alignItems: "center", }} - snippets={snippetsDefault} + snippets={snippetsChip} > @@ -198,52 +418,101 @@ export const snippetsDefault = [ export const snippetsProgrammatic = [ { - language: "Web component", - snippet: ` -Show tooltip - + technology: "Web component", + snippets: { + short: `Show tooltip + Add `, + long: `{shortCode} + `, + }, }, { - language: "React", - snippet: `let display = true; + technology: "React", + snippets: { + short: `Show tooltip + + + Add + +`, + long: [ + { + language: "Typescript", + snippet: `const [display, setDisplay] = useState(true); +const tooltipEl = useRef(null); +const handleDisplay = () => { + tooltipEl.current?.displayTooltip(display, display); + setDisplay(!display); +}; +const useStyles = createUseStyles({ + btnContainer: { + display: 'flex', + gap: '8px', + padding: '16px', + }, +}); +const classes = useStyles(); +return ( +
+ {shortCode} +
+)`, + }, + { + language: "Javascript", + snippet: `const [display, setDisplay] = useState(true); const tooltipEl = useRef(null); -const handleDisplay = () => { - tooltipEl.current.displayTooltip(display, display); - display = !display; -} +const handleDisplay = () => { + tooltipEl.current?.displayTooltip(display, display); + setDisplay(!display); +}; +const useStyles = createUseStyles({ + btnContainer: { + display: 'flex', + gap: '8px', + padding: '16px', + }, +}); +const classes = useStyles(); return ( - <> - Show tooltip - - - Add - - - -);`, +
+ {shortCode} +
+)`, + }, + ], + }, }, ]; export const TriggerExample = () => { - let display = true; + const [display, setDisplay] = useState(true); const tooltipEl = useRef(null); - const handleDisplay = () => { - tooltipEl.current.displayTooltip(display, display); - display = !display; + const handleDisplay = async () => { + await tooltipEl.current?.displayTooltip(display, display); + setDisplay(!display); }; return ( <> diff --git a/src/content/structured/components/top-nav/code.mdx b/src/content/structured/components/top-nav/code.mdx index 45fa667e8..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-02-02" +date: "2024-05-02" title: "Top navigation" @@ -40,48 +40,81 @@ import { useState } from "react"; export const snippetsDefault = [ { - language: "Web component", - snippet: ` + technology: "Web component", + snippets: { + short: ` - + - + - + - - - - - + + + + + `, + long: `{shortCode}`, + }, }, { - language: "React", - snippet: ` + technology: "React", + snippets: { + short: ` @@ -92,9 +125,9 @@ export const snippetsDefault = [ @@ -106,6 +139,17 @@ export const snippetsDefault = [ `, + long: [ + { + language: "Javascript", + snippet: `{shortCode}`, + }, + { + language: "Typescript", + snippet: `{shortCode}`, + }, + ], + }, }, ]; @@ -114,9 +158,9 @@ export const snippetsDefault = [ @@ -127,9 +171,9 @@ export const snippetsDefault = [ @@ -191,47 +235,64 @@ export const snippetsDefault = [ export const snippetsGroupedLinks = [ { - language: "Web component", - snippet: ` + technology: "Web component", + snippets: { + short: ` - + - + - + - + `, + long: `{shortCode}`, + }, }, { - language: "React", - snippet: ` + technology: "React", + snippets: { + short: ` - + @@ -241,6 +302,17 @@ export const snippetsGroupedLinks = [ `, + long: [ + { + language: "Typescript", + snippet: `{shortCode}`, + }, + { + language: "Javascript", + snippet: `{shortCode}`, + }, + ], + }, }, ]; @@ -249,9 +321,9 @@ export const snippetsGroupedLinks = [ @@ -294,60 +366,107 @@ export const snippetsGroupedLinks = [ export const snippetsCentreAligned = [ { - language: "Web component", - snippet: ` + technology: "Web component", + snippets: { + short: ` - + - + - + - - - - - + + + + + `, + long: `{shortCode}`, + }, }, { - language: "React", - snippet: ` + technology: "React", + snippets: { + short: ` - + alert('test')} + > @@ -357,9 +476,25 @@ export const snippetsCentreAligned = [ - + `, + long: [ + { + language: "Typescript", + snippet: `{shortCode}`, + }, + { + language: "Javascript", + snippet: `{shortCode}`, + }, + ], + }, }, ]; @@ -373,21 +508,25 @@ export const snippetsCentreAligned = [ - + @@ -432,62 +571,113 @@ export const snippetsCentreAligned = [ export const snippetsLeftAligned = [ { - language: "Web component", - snippet: ` + technology: "Web component", + snippets: { + short: ` - + - - + + - + - - - - - + + + + + `, + long: `{shortCode}`, + }, }, { - language: "React", - snippet: ` + technology: "React", + snippets: { + short: ` - + alert('test')} + > @@ -497,9 +687,25 @@ export const snippetsLeftAligned = [ - + `, + long: [ + { + language: "Typescript", + snippet: `{shortCode}`, + }, + { + language: "Javascript", + snippet: `{shortCode}`, + }, + ], + }, }, ]; @@ -513,22 +719,26 @@ export const snippetsLeftAligned = [ - + @@ -573,49 +783,87 @@ export const snippetsLeftAligned = [ export const snippetsBadge = [ { - language: "Web component", - snippet: ` + technology: "Web component", + snippets: { + short: ` - + - + - + - + - - - - - + + + + + `, + long: `{shortCode}`, + }, }, { - language: "React", - snippet: ` + technology: "React", + snippets: { + short: ` @@ -623,13 +871,13 @@ export const snippetsBadge = [ - + @@ -638,9 +886,25 @@ export const snippetsBadge = [ - + `, + long: [ + { + language: "Typescript", + snippet: `{shortCode}`, + }, + { + language: "Javascript", + snippet: `{shortCode}`, + }, + ], + }, }, ]; @@ -649,9 +913,9 @@ export const snippetsBadge = [ @@ -663,9 +927,9 @@ export const snippetsBadge = [ @@ -711,46 +975,99 @@ View on a small screen size to display the short title in place of the app title export const snippetsShortTitle = [ { - language: "Web component", - snippet: ` + technology: "Web component", + snippets: { + short: ` - + - - - - - + + + + + `, + long: `{shortCode}`, + }, }, { - language: "React", - snippet: ` + technology: "React", + snippets: { + short: ` - - - - - + + + + + `, + long: [ + { + language: "Typescript", + snippet: `{shortCode}`, + }, + { + language: "Javascript", + snippet: `{shortCode}`, + }, + ], + }, }, ]; @@ -764,9 +1081,9 @@ export const snippetsShortTitle = [ @@ -850,40 +1167,57 @@ export const ConditionalTabsExample = () => { export const conditionalTabs = [ { - language: "React", - snippet: `const [showTabs, setShowTabs] = useState(false); + technology: "React", + snippets: { + short: ` + + + + + + + + {showNavItems && ( + <> + + + + )} +`, + long: [ + { + language: "Typescript", + snippet: `const [showNavItems, setShowNavItems] = useState(false); return ( <> - - - - - - - - - {showTabs && ( - <> - - - - )} - - setShowTabs(!showTabs)}>Show/Hide tabs + {shortCode} + setShowNavItems(!showNavItems)}>Show/Hide nav items + +)`, + }, + { + language: "Javascript", + snippet: `const [showNavItems, setShowNavItems] = useState(false); +return ( + <> + {shortCode} + setShowNavItems(!showNavItems)}>Show/Hide nav items -);`, +)`, + }, + ], + }, }, ]; @@ -902,11 +1236,16 @@ To guarantee the correct styling for non-svg content slotted into app-icon, set export const withReactRouter = [ { - language: "React", - snippet: ` + technology: "React", + snippets: { + short: ` - ICDS Title - ICDS + + ICDS Title + + + ICDS + - - alert('test')}> - + alert("test")} > - - - + + + + - Get started + + Get started + - Accessibility + + Accessibility +
- + - This is the get started page} /> - This page is about accessibility} /> + This is the get started page + } + /> + This page is about accessibility + } + />
- - `, +`, + long: [ + { + language: "Typescript", + snippet: `const useStyles = createUseStyles({ + sectionContainer: { + padding: "16px", + }, +}); +const classes = useStyles(); +return ( + {shortCode} +)`, + }, + { + language: "Javascript", + snippet: `const useStyles = createUseStyles({ + sectionContainer: { + padding: "16px", + }, +}); +const classes = useStyles(); +return ( + {shortCode} +)}`, + }, + ], + }, }, ]; @@ -979,16 +1362,16 @@ export const withReactRouter = [ alert("test")} > diff --git a/src/content/structured/components/top-nav/guidance.mdx b/src/content/structured/components/top-nav/guidance.mdx index bff12db3b..5aed3ef0d 100644 --- a/src/content/structured/components/top-nav/guidance.mdx +++ b/src/content/structured/components/top-nav/guidance.mdx @@ -54,9 +54,9 @@ Use a standard top navigation for apps with eight or fewer navigation options. @@ -106,9 +106,9 @@ Use a top navigation with mega-menu for apps with more than eight navigation opt diff --git a/src/content/structured/components/typography/code.mdx b/src/content/structured/components/typography/code.mdx index 1de1a1e01..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: "2023-11-27" +date: "2024-05-02" title: "Typography" @@ -27,11 +27,12 @@ import { IcTypography } from "@ukic/react"; export const snippets = [ { - language: "Web component", - snippet: `H1 -H2 -H3 -H4 + technology: "Web component", + snippets: { + short: `

H1

+

H2

 +

H3

 +

H4

 Body Subtitle large Subtitle small @@ -42,13 +43,16 @@ export const snippets = [ Code large Code small Code extra small`, + long: `{shortCode}`, + }, }, { - language: "React", - snippet: `H1 -H2 -H3 -H4 + technology: "React", + snippets: { + short: `H1 +

H2

 +

H3

 +

H4

 Body Subtitle large Subtitle small @@ -59,15 +63,38 @@ export const snippets = [ Code large Code small Code extra small`, + long: [ + { + language: "Typescript", + snippet: `<> + {shortCode} +`, + }, + { + language: "Javascript", + snippet: `<> + {shortCode} +`, + }, + ], + }, }, ];
- H1 - H2 - H3 - H4 + +

H1

+ + +

H2

+ + +

H3

+ + +

H4

+ Body Subtitle large Subtitle small @@ -93,16 +120,31 @@ Add a variant to the typography element to change its style. This does not chang export const snippetsRestyled = [ { - language: "Web component", - snippet: ` + technology: "Web component", + snippets: { + short: `
H5 with H2 styling
`, + long: `{shortCode}`, + }, }, { - language: "React", - snippet: ` + technology: "React", + snippets: { + short: `
H5 with H2 styling
`, + long: [ + { + language: "Typescript", + snippet: `{shortCode}`, + }, + { + language: "Javascript", + snippet: `{shortCode}`, + }, + ], + }, }, ]; @@ -116,16 +158,31 @@ export const snippetsRestyled = [ export const spacingSnippets = [ { - language: "Web component", - snippet: ` + technology: "Web component", + snippets: { + short: `
H5 with margins applied
`, + long: `{shortCode}`, + }, }, { - language: "React", - snippet: ` + technology: "React", + snippets: { + short: `
H5 with margins applied
`, + long: [ + { + language: "Typescript", + snippet: `{shortCode}`, + }, + { + language: "Javascript", + snippet: `{shortCode}`, + }, + ], + }, }, ]; @@ -139,16 +196,31 @@ export const spacingSnippets = [ export const spacingRestyledSnippets = [ { - language: "Web component", - snippet: ` + technology: "Web component", + snippets: { + short: `
H5 with H2 styling and margins applied
`, + long: `{shortCode}`, + }, }, { - language: "React", - snippet: ` + technology: "React", + snippets: { + short: `
H5 with H2 styling and margins applied
`, + long: [ + { + language: "Typescript", + snippet: `{shortCode}`, + }, + { + language: "Javascript", + snippet: `{shortCode}`, + }, + ], + }, }, ]; @@ -164,8 +236,9 @@ Text can be truncated to a maximum number of lines when using `variant="body"`. export const truncationSnippets = [ { - language: "Web component", - snippet: ` + technology: "Web component", + snippets: { + short: ` Body of text that is truncated to three lines. Click the 'See more' link to expand the text, then click 'See less' to truncate the text once more! @@ -178,10 +251,13 @@ export const truncationSnippets = [ dripper organic and foam id saucer, crema, black rich dark, grounds breve coffee steamed caramelization percolator. `, + long: `{shortCode}`, + }, }, { - language: "React", - snippet: ` + technology: "React", + snippets: { + short: ` Body of text that is truncated to three lines. Click the 'See more' link to expand the text, then click 'See less' to truncate the text once more! @@ -194,6 +270,17 @@ export const truncationSnippets = [ dripper organic and foam id saucer, crema, black rich dark, grounds breve coffee steamed caramelization percolator. `, + long: [ + { + language: "Typescript", + snippet: `{shortCode}`, + }, + { + language: "Javascript", + snippet: `{shortCode}`, + }, + ], + }, }, ]; @@ -216,34 +303,53 @@ export const truncationSnippets = [ export const additionalStylingSnippets = [ { - language: "Web component", - snippet: `Bold + technology: "Web component", + snippets: { + short: `Bold Italic Underline Strikethrough`, + long: `{shortCode}`, + }, }, { - language: "React", - snippet: `Bold + technology: "React", + snippets: { + short: `Bold Italic Underline Strikethrough`, + long: [ + { + language: "Typescript", + snippet: `<> + {shortCode} +`, + }, + { + language: "Javascript", + snippet: `<> + {shortCode} +`, + }, + ], + }, }, ];
- Bold +

Bold

 - Italic +

Italic

 - Underline +

Underline

 - Strikethrough +

Strikethrough
diff --git a/src/content/structured/patterns/components/StackblitzButton/index.tsx b/src/content/structured/patterns/components/StackblitzButton/index.tsx index 1b4d99338..5b2b226f3 100644 --- a/src/content/structured/patterns/components/StackblitzButton/index.tsx +++ b/src/content/structured/patterns/components/StackblitzButton/index.tsx @@ -1,4 +1,4 @@ -import React from "react"; +import React, { FC } from "react"; import sdk from "@stackblitz/sdk"; import { createIndexTsx, @@ -16,13 +16,15 @@ export type StackblitzProps = { isWebComponents?: boolean; projectTitle: string; projectDescription?: string; + isJSX?: boolean; }; -const StackblitzButton: React.FC = ({ +const StackblitzButton: FC = ({ codeSnippet, isWebComponents, projectTitle, projectDescription, + isJSX = true, }) => { const viewportWidth = useViewportWidth(); const isLargeViewport: boolean = viewportWidth > 992; @@ -31,7 +33,6 @@ const StackblitzButton: React.FC = ({ const files: { [key: string]: string } = {}; const isWebComponentsInternal: boolean = isWebComponents !== undefined ? isWebComponents : true; - const isJSX: boolean = true; // Add functionality to manage whether Stackblitz project should use TypeScript or JavaScript const ext = isJSX ? "jsx" : "tsx"; @@ -46,7 +47,7 @@ const StackblitzButton: React.FC = ({ } // Define the index.tsx content for a React app - const indexTsx = createIndexTsx(projectTitle, true); + const indexTsx = createIndexTsx(projectTitle, true, codeSnippet); // Change file structure for React code examples if ( @@ -63,7 +64,7 @@ const StackblitzButton: React.FC = ({ } files["package.json"] = JSON.stringify( - packageJson(projectTitle, isWebComponentsInternal, ext), + packageJson(projectTitle, isWebComponentsInternal, ext, codeSnippet), null, 2 ); @@ -82,13 +83,14 @@ const StackblitzButton: React.FC = ({ }, { openFile: isWebComponentsInternal ? [`index.html`] : [`src/app.${ext}`], + hideExplorer: true, } ); }; return ( { + if (codeSnippet) { + const imports = canaryReactComponentNames.filter((name) => + codeSnippet.includes(name) + ); + return imports; + } + return []; +}; + export const createIndexTsx = ( componentName: string, - isCodeSnippet?: boolean + isCodeSnippet?: boolean, + codeSnippet?: string | undefined ) => { const component = isCodeSnippet ? startCase(componentName.replace(/\(.*?\)/g, "")).replace(/\s/g, "") : componentName; return `import { StrictMode } from 'react'; - import { createRoot } from 'react-dom/client'; - import { BrowserRouter } from 'react-router-dom'; - - import ${component} from './app'; - - const root = createRoot(document.getElementById('root')); - - root.render( - - - <${component} /> - - - );`; +import { createRoot } from 'react-dom/client';${ + codeSnippet && codeSnippet.includes("react-router-dom") + ? "" + : `\nimport { BrowserRouter } from 'react-router-dom';` + } + +import ${component} from './app'; + +const root = createRoot(document.getElementById('root')); + +root.render( + + ${ + codeSnippet && codeSnippet.includes("react-router-dom") + ? `<${component} />` + : ` + <${component} /> + ` + } + +);`; }; export const createReactIndexHTML = (ext: string) => ` @@ -42,7 +63,8 @@ export const createReactIndexHTML = (ext: string) => ` export const packageJson = ( projectTitle: string, isWebComponents: boolean, - fileExtension: "jsx" | "tsx" + fileExtension: "jsx" | "tsx", + codeSnippet: string | undefined ) => { const dependenciesArray = isWebComponents ? [] @@ -61,6 +83,12 @@ export const packageJson = ( ["react-jss", "^10.10.0"], ["react-router-dom", "^6.22.0"], ]; + if (getCanaryReactImports(codeSnippet).length > 0) { + dependenciesArray.splice(1, 0, [ + "@ukic/canary-react", + `${designSystemPackageJson.dependencies["@ukic/canary-react"]}`, + ]); + } if (fileExtension === "tsx") { dependenciesArray.splice(3, 0, [ @@ -117,8 +145,21 @@ export default defineConfig({ }) `; -export const createWebComponentsIndexHTML = (codeSnippet: string) => { - // write a function that checks the code snippet for instances of class="..." and add the relevant styling to the style tag +export const createWebComponentsIndexHTML = ( + codeSnippet: string, + isPattern: boolean = false +) => { + if (codeSnippet.includes('')) { + return codeSnippet; + } + + const { canaryWebComponentsNames } = data; + const getCanaryWebComponentsImports = () => { + const imports = canaryWebComponentsNames.filter((name) => + codeSnippet.includes(name) + ); + return imports.length > 0; + }; const addStyling = (snippet: string) => { const styling: string[] = []; @@ -178,11 +219,33 @@ export const createWebComponentsIndexHTML = (codeSnippet: string) => { "}" ); } - - styling[0] = `\t${styling[0]}`; + if (styling.length > 1) styling[0] = `\t${styling[0]}`; if (styling.length === 0) return ""; return `\n${styling.join("\n\t")}`; }; + + let styling = ""; + const addedStyling = addStyling(codeSnippet); + + if (addedStyling !== "" && isPattern) { + styling = `\n`; + } else if (codeSnippet.includes("")) { + styling = "\n ` - } - ${codeSnippet} + ${styling} + ${formattedCodeSnippet} - - `; +`; }; export const createReactAppTsx = ( codeSnippet: string, componentName: string, - fileExtension: "jsx" | "tsx", - isPattern: boolean = false + fileExtension: "jsx" | "tsx" ): string => { + if (codeSnippet.includes("@ukic/react")) { + return codeSnippet; + } + + const formatLines = (snippet: string = codeSnippet) => { + const lines = String(snippet).split("\n"); + const newLines = lines ? [...lines] : []; + if (newLines.length > 0) { + for (let i = 1; i < newLines.length; i += 1) { + newLines[i] = `${codeSnippet.includes("return") ? `` : `\t\t`}${ + newLines[i] + }`; + } + } + return newLines.join("\n"); + }; + + const formattedCodeSnippet = formatLines(); // Helper function to find uses of ICDS components and MDI in code snippet const getImports = ( tag: string | undefined, @@ -240,18 +323,29 @@ export const createReactAppTsx = ( if (isMDI) { regex = new RegExp(`{${tag}[^}]*}`, "g"); } else if (isPatternInternal) { - regex = /(?!(<|<\/|\.))\bIc[A-Za-z]+/g; + regex = /(?!(<|<\/|\.))\bIc[A-Za-z]+\b/g; } else { regex = new RegExp(`<${tag}[^>]*>`, "g"); } - return isPatternInternal + let matches = isPatternInternal ? codeSnippet.match(regex) || [] : (codeSnippet.match(regex) || []).map((match) => - match - .slice(isPatternInternal ? 0 : 1, match.indexOf(isMDI ? "}" : " ")) - .trim() + match.slice(1, match.indexOf(isMDI ? "}" : " ")).trim() ); + + if (tag === "Ic") { + matches = matches.filter((match) => reactComponentNames.includes(match)); + } + + const canaryReactComponents = getCanaryReactImports(codeSnippet); + if (canaryReactComponents.length > 0 && tag === "Ic") { + matches = matches.filter( + (match) => !canaryReactComponents.includes(match) + ); + } + + return matches; }; // Helper function to sort and remove duplicates @@ -271,16 +365,16 @@ export const createReactAppTsx = ( "" ); let getIcTypes: string[] = []; - if (isPattern) { - const allIcMatches = getImports(undefined, false, true); - const allIcComponents = getImports("Ic"); - getIcTypes = allIcMatches + const allIcMatches = getImports(undefined, false, true); + const allIcComponents = getImports("Ic"); + getIcTypes = sortAndRemoveDuplicates( + allIcMatches .filter((item: string) => !allIcComponents.includes(item)) .concat( allIcComponents.filter((item: string) => !allIcMatches.includes(item)) ) - .sort(); - } + .map((type) => type.replace(/\W+$/, "")) + ); // Check if codeSnippet contains "return(" or "return (" const containsReturn = /return\s*\(/g.test(codeSnippet); @@ -288,6 +382,26 @@ export const createReactAppTsx = ( // Check if codeSnippet contains "createUseStyles" from 'react-jss' const containsCreateUseStyles = /createUseStyles\(\{/.test(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"]; @@ -312,43 +426,68 @@ export const createReactAppTsx = ( reactImportStatement += " from 'react';"; // Conditionally render "return(" in the returned output string - const returnStatement = containsReturn ? "" : "return("; - - let importedICDSComponents; - if (sortedICDSComponents.length > 3) { - importedICDSComponents = ` - ${sortedICDSComponents.join(",\n ")}\n`; - } else { - importedICDSComponents = `${sortedICDSComponents.join(", ")} `; - } + const returnStatement = containsReturn ? "" : "return ("; - return `${reactImportStatement} -import { ${importedICDSComponents}} from '@ukic/react'; -${ - fileExtension === "tsx" && isPattern && getIcTypes.length > 0 - ? `import type { ${getIcTypes.join(", ")} } from '@ukic/web-components';` - : "" -} + 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';` + : "" + }${ + importedICDSComponents.length > 0 + ? `\nimport { ${importedICDSComponents}} from '@ukic/react';` + : "" + }${ + importedCanaryComponents.length > 0 + ? `\nimport { ${importedCanaryComponents}} from '@ukic/canary-react';` + : "" + }${ + getCanaryTypes().length > 0 + ? `\nimport { ${getCanaryTypes()}} from '@ukic/canary-web-components';` + : "" + } ${ - sortedMDIcons.length > 0 - ? `import { ${ - sortedMDIcons.length > 3 - ? `\n${sortedMDIcons.join(",\n ")}\n` - : `${sortedMDIcons.join(", ")} ` - }} from '@mdi/js';` + fileExtension === "tsx" && importedIcTypes.length > 0 + ? `import type { ${importedIcTypes}} from '@ukic/web-components';` : "" -} -${ - containsCreateUseStyles - ? `import { createUseStyles } from 'react-jss'; +} ${ + sortedMDIcons.length > 0 + ? `\nimport { ${ + sortedMDIcons.length > 3 + ? `\n${sortedMDIcons.join(",\n ")}\n` + : `${sortedMDIcons.join(", ")} ` + }} from '@mdi/js';` + : "" + }${ + containsCreateUseStyles + ? `\nimport { createUseStyles } from 'react-jss'; ` - : "" -} + : "" + } import "@ukic/fonts/dist/fonts.css"; import "@ukic/react/dist/core/core.css"; import "@ukic/react/dist/core/normalize.css"; const ${component}${fileExtension === "tsx" ? `: FC` : ""} = () => { - ${returnStatement}${codeSnippet}${containsReturn ? "" : `\n)`}}; +\t${returnStatement} +${containsReturn ? "" : `\t\t`}${formattedCodeSnippet}${ + containsReturn ? "" : `\n );` + }\n}; export default ${component};`; }; diff --git a/src/content/structured/patterns/side-navigation-layout.mdx b/src/content/structured/patterns/side-navigation-layout.mdx index 94818e43a..67d3d7acb 100644 --- a/src/content/structured/patterns/side-navigation-layout.mdx +++ b/src/content/structured/patterns/side-navigation-layout.mdx @@ -23,8 +23,10 @@ import sideNavigationPatternFig1 from "./images/fig-1-example-of-theming-applied export const snippetsSideNav = [ { - language: "Web component", - snippet: createWebComponentsIndexHTML(`
+ technology: "Web component", + snippets: { + long: createWebComponentsIndexHTML( + `
-
`), +
`, + true + ), + }, }, { - language: "React", - snippet: createReactAppTsx( - `const useStyles = createUseStyles({ + technology: "React", + snippets: { + long: [ + { + language: "Typescript", + snippet: createReactAppTsx( + `const useStyles = createUseStyles({ + contentDivContainer: { + display: "flex", + flexDirection: "column", + flexGrow: "1", + }, + mainContentDiv: { + border: "var(--ic-border-width) dashed var(--ic-architectural-400)", + padding: "var(--ic-space-md)", + height: "800px", + }, + parentDiv: { display: "flex", height: "100%" }, + main: { minHeight: "100vh" }, + }); + const classes = useStyles(); + const alignment: IcAlignment = "center"; + return ( +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ +
+ +

Example heading

+ + +

Example sub-heading

+ + +

+ Remove this div and add your custom content in + IcSectionContainer. +

+ +
+ +
+ + + [footerLink] + + + [footerLink] + + + [footerLink] + + + [footerLink] + + + [footerLink] + + + + + + + +
+
+ )`, + "SideNavigationPattern", + "tsx", + true + ), + }, + { + language: "Javascript", + snippet: createReactAppTsx( + `const useStyles = createUseStyles({ contentDivContainer: { display: "flex", flexDirection: "column", @@ -516,11 +767,15 @@ export const snippetsSideNav = [
-
)`, - "SideNavigationPattern", - "jsx", - true - ), +
+ )`, + "SideNavigationPattern", + "jsx", + true + ), + }, + ], + }, }, ]; @@ -583,8 +838,10 @@ For more information, see the [page header component](/components/page-header). export const snippetsSideNavWithPageHeader = [ { - language: "Web component", - snippet: createWebComponentsIndexHTML(`
+ technology: "Web component", + snippets: { + long: createWebComponentsIndexHTML( + `
-
`), +
`, + true + ), + }, }, { - language: "React", - snippet: createReactAppTsx( - `const useStyles = createUseStyles({ + technology: "React", + snippets: { + long: [ + { + language: "Typescript", + snippet: createReactAppTsx( + `const useStyles = createUseStyles({ contentDivContainer: { display: "flex", flexDirection: "column", @@ -914,8 +1178,8 @@ export const snippetsSideNavWithPageHeader = [ }, }); const classes = useStyles(); - const alignment = "center"; - const pageHeaderAlignment = "center"; + const alignment: IcAlignment = "center"; + const pageHeaderAlignment: IcAlignment = "center"; return (
@@ -1173,27 +1437,327 @@ export const snippetsSideNavWithPageHeader = [
)`, - "SideNavigationWithPageHeaderPattern", - "jsx", - true - ), - }, -]; - - - - View example in new window + "SideNavigationWithPageHeaderPattern", + "tsx", + true + ), + }, + { + language: "Javascript", + snippet: createReactAppTsx( + `const useStyles = createUseStyles({ + contentDivContainer: { + display: "flex", + flexDirection: "column", + flexGrow: "1", + }, + mainContentDiv: { + border: "var(--ic-border-width) dashed var(--ic-architectural-400)", + padding: "var(--ic-space-md)", + height: "800px", + }, + parentDiv: { display: "flex", height: "100%" }, + main: { minHeight: "100vh" }, + inputArea: { + display: "flex", + flexWrap: "wrap", + gap: "var(--ic-space-md)", + "@media screen and (max-width: 320px)": { + gap: "var(--ic-space-xs)", + }, + }, + textField: { + "--input-width": "21.5rem", + "@media screen and (max-width: 768px)": { + "--input-width": "100%", + flex: "1 1 0", + }, + }, + }); + const classes = useStyles(); + const alignment = "center"; + const pageHeaderAlignment = "center"; + return ( +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + Primary button + + + Tertiary button + +
+ + Submit +
+ +
+ +
+ +

Example heading

+ + +

Example sub-heading

+ + +

+ Remove this div and add your custom content in + IcSectionContainer. +

+ +
+ +
+ + + [footerLink] + + + [footerLink] + + + [footerLink] + + + [footerLink] + + + [footerLink] + + + + + + + +
+
+ )`, + "SideNavigationWithPageHeaderPattern", + "jsx", + true + ), + }, + ], + }, + }, +]; + + + + View example in new window @@ -1209,8 +1773,10 @@ For more information, see the [back to top component](/components/back-to-top). export const snippetsSideNavBackToTop = [ { - language: "Web component", - snippet: createWebComponentsIndexHTML(`
+ technology: "Web component", + snippets: { + long: createWebComponentsIndexHTML( + `
-
`), +
`, + true + ), + }, }, { - language: "React", - snippet: createReactAppTsx( - `const useStyles = createUseStyles({ + technology: "React", + snippets: { + long: [ + { + language: "Typescript", + snippet: createReactAppTsx( + `const useStyles = createUseStyles({ + contentDivContainer: { + display: "flex", + flexDirection: "column", + flexGrow: "1", + }, + mainContentDiv: { + border: "var(--ic-border-width) dashed var(--ic-architectural-400)", + padding: "var(--ic-space-md)", + flex: 1, + }, + parentDiv: { display: "flex", height: "100%" }, + main: { minHeight: "100vh", display: "flex" }, + mainSectionContainer: { display: "flex", flex: 1 }, + }); + const classes = useStyles(); + const alignment: IcAlignment = "center"; + return ( +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ +
+ +

Example heading

+ + +

Example sub-heading

+ + +

+ Remove this div and add your custom content in + IcSectionContainer. +

+ +
+ +
+ + + + [footerLink] + + + [footerLink] + + + [footerLink] + + + [footerLink] + + + [footerLink] + + + + + + + +
+
+ )`, + "SideNavigationWithBackToTopPattern", + "tsx", + true + ), + }, + { + language: "Javascript", + snippet: createReactAppTsx( + `const useStyles = createUseStyles({ contentDivContainer: { display: "flex", flexDirection: "column", @@ -1709,10 +2529,13 @@ export const snippetsSideNavBackToTop = [
)`, - "SideNavigationWithBackToTopPattern", - "jsx", - true - ), + "SideNavigationWithBackToTopPattern", + "jsx", + true + ), + }, + ], + }, }, ]; diff --git a/src/content/structured/patterns/top-navigation-layout.mdx b/src/content/structured/patterns/top-navigation-layout.mdx index 5f36ad8d7..5d994fa9b 100644 --- a/src/content/structured/patterns/top-navigation-layout.mdx +++ b/src/content/structured/patterns/top-navigation-layout.mdx @@ -25,9 +25,10 @@ import topNavigationPatternFig1 from "./images/fig-1-example-of-theming-applied- export const snippetsTopNav = [ { - language: "Web component", - snippet: - createWebComponentsIndexHTML(` + technology: "Web component", + snippets: { + long: createWebComponentsIndexHTML( + ` - `), + `, + true + ), + }, }, { - language: "React", - snippet: createReactAppTsx( - `const alignment = "center"; + technology: "React", + snippets: { + long: [ + { + language: "Typescript", + snippet: createReactAppTsx( + `const alignment: IcAlignment = "center"; + const useStyles = createUseStyles({ + main: { minHeight: "100vh", display: "flex" }, + mainContentDiv: { + border: "var(--ic-border-width) dashed var(--ic-architectural-400)", + padding: "var(--ic-space-md)", + flex: 1, + }, + mainSectionContainer: { display: "flex", flex: 1 }, + }); + const classes = useStyles(); + return ( + <> + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+ +

Example heading

+ + +

Example sub-heading

+ + +

+ Remove this div and add your custom content in IcSectionContainer. +

+ +
+ +
+ + + [footerLink] + + + [footerLink] + + + [footerLink] + + + [footerLink] + + + [footerLink] + + + + + + + + + )`, + "TopNavigation", + "tsx", + true + ), + }, + { + language: "Javascript", + snippet: createReactAppTsx( + `const alignment = "center"; const useStyles = createUseStyles({ main: { minHeight: "100vh", display: "flex" }, mainContentDiv: { @@ -297,10 +441,13 @@ export const snippetsTopNav = [ )`, - "TopNavigation", - "jsx", - true - ), + "TopNavigation", + "jsx", + true + ), + }, + ], + }, }, ]; @@ -369,9 +516,10 @@ For more information, see the [page header component](/components/page-header). export const snippetsTopNavPageHeader = [ { - language: "Web component", - snippet: - createWebComponentsIndexHTML(` + technology: "Web component", + snippets: { + long: createWebComponentsIndexHTML( + ` - `), + `, + true + ), + }, }, { - language: "React", - snippet: createReactAppTsx( - `const alignment = "center"; + technology: "React", + snippets: { + long: [ + { + language: "Typescript", + snippet: createReactAppTsx( + `const alignment: IcAlignment = "center"; let pageHeaderAlignment; - // pageHeaderAlignment = "center"; + // pageHeaderAlignment: IcAlignment = "center"; const useStyles = createUseStyles({ main: { minHeight: "100vh", display: "flex" }, mainContentDiv: { @@ -738,93 +893,785 @@ export const snippetsTopNavPageHeader = [ )`, - "TopNavigationWithPageHeader", - "jsx", - true - ), - }, -]; - - - - View example in new window - - - -### Mega-menu - -Use 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. - -For more information, see the [mega-menu component](/components/top-navigation#mega-menu). - -export const snippetsTopNavMegaMenu = [ - { - language: "Web component", - snippet: - createWebComponentsIndexHTML(` - - + + - - - - - - - - - - - - + + + + + - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + Primary button + + + Tertiary button + +
+ + Submit +
+ +
+ +
+ +

Example heading

+ + +

Example sub-heading

+ + +

+ Remove this div and add your custom content in IcSectionContainer. +

+ +
+ +
+ + + [footerLink] + + + [footerLink] + + + [footerLink] + + + [footerLink] + + + [footerLink] + + + + + + + + + )`, + "TopNavigationWithPageHeader", + "jsx", + true + ), + }, + ], + }, + }, +]; + + + + View example in new window + + + +### Mega-menu + +Use 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. + +For more information, see the [mega-menu component](/components/top-navigation#mega-menu). + +export const snippetsTopNavMegaMenu = [ + { + technology: "Web component", + snippets: { + long: createWebComponentsIndexHTML( + ` + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+ +

Example heading

+ + +

Example sub-heading

+ + +

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

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

Example heading

+ + +

Example sub-heading

+ + +

+ Remove this div and add your custom content in IcSectionContainer. +

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

Example heading

+ + +

Example sub-heading

+ + +

+ Remove this div and add your custom content in IcSectionContainer. +

+ +
+ +
+ + + [footerLink] + + + [footerLink] + + + [footerLink] + + + [footerLink] + + + [footerLink] + + + + + + + + +)`, + "TopNavigationWithMegaMenu", + "jsx", + true + ), + }, + ], + }, + }, +]; + + + + View example in new window + + + +### Back to top + +Use the back to top component to help people quickly return to the top of a long page. + +Consider using it on all apps to improve usability for everyone, including keyboard-only and some assistive technology users. + +Don't use back to top when the page is designed to fill the viewport without scrolling. + +For more information, see the [back to top component](/components/back-to-top). + +export const snippetsTopNavBackToTop = [ + { + technology: "Web component", + snippets: { + long: createWebComponentsIndexHTML( + ` + + + + + + + + + + + + + + + + + + - - - - - - - - - -
+
@@ -901,6 +1732,7 @@ export const snippetsTopNavMegaMenu = [
+ - `), + `, + true + ), + }, }, { - language: "React", - snippet: createReactAppTsx( - `const alignment = "center"; + technology: "React", + snippets: { + long: [ + { + language: "Typescript", + snippet: createReactAppTsx( + `const alignment: IcAlignment = "center"; const useStyles = createUseStyles({ main: { minHeight: "100vh", display: "flex" }, mainContentDiv: { @@ -945,10 +1784,10 @@ export const snippetsTopNavMegaMenu = [ <> - - - - - - - - - -
+
@@ -1034,6 +1860,7 @@ export const snippetsTopNavMegaMenu = [
+ )`, - "TopNavigationWithMegaMenu", - "jsx", - true - ), - }, -]; - - - - View example in new window - - - -### Back to top - -Use the back to top component to help people quickly return to the top of a long page. - -Consider using it on all apps to improve usability for everyone, including keyboard-only and some assistive technology users. - -Don't use back to top when the page is designed to fill the viewport without scrolling. - -For more information, see the [back to top component](/components/back-to-top). - -export const snippetsTopNavBackToTop = [ - { - language: "Web component", - snippet: - createWebComponentsIndexHTML(` - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- -
- -

Example heading

- - -

Example sub-heading

- - -

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

- -
- -
- - - [footerLink] - [footerLink] - [footerLink] - [footerLink] - [footerLink] - - - - - - `), - }, - { - language: "React", - snippet: createReactAppTsx( - `const alignment = "center"; + "TopNavigationWithBackToTop", + "tsx", + true + ), + }, + { + language: "Javascript", + snippet: createReactAppTsx( + `const alignment = "center"; const useStyles = createUseStyles({ main: { minHeight: "100vh", display: "flex" }, mainContentDiv: { @@ -1381,10 +2035,13 @@ export const snippetsTopNavBackToTop = [ )`, - "TopNavigationWithBackToTop", - "jsx", - true - ), + "TopNavigationWithBackToTop", + "jsx", + true + ), + }, + ], + }, }, ]; diff --git a/src/data/canary-component-names.json b/src/data/canary-component-names.json new file mode 100644 index 000000000..fca8e7932 --- /dev/null +++ b/src/data/canary-component-names.json @@ -0,0 +1,93 @@ +{ + "canaryReactComponentNames": [ + "IcDataTable", + "IcDataTableTitleBar", + "IcDateInput", + "IcDatePicker", + "IcMenuWithMulti", + "IcPaginationBar", + "IcSelectWithMulti" + ], + "canaryWebComponentsNames": [ + "ic-data-table", + "ic-data-table-title-bar", + "ic-date-input", + "ic-date-picker", + "ic-menu-with-multi", + "ic-pagination-bar", + "ic-select-with-multi" + ], + "canaryTypes": [ + "IcDataTableSortOrderOptions", + "IcDataTableDensityOptions", + "IcDataTableColumnDataTypes", + "IcDataTableColumnObject", + "IcDataTableRowHeights" + ], + "reactComponentNames": [ + "IcAccordion", + "IcAccordionGroup", + "IcAlert", + "IcBackToTop", + "IcBadge", + "IcBreadcrumb", + "IcBreadcrumbGroup", + "IcButton", + "IcCard", + "IcCheckbox", + "IcCheckboxGroup", + "IcChip", + "IcClassificationBanner", + "IcDataEntity", + "IcDataRow", + "IcDialog", + "IcDivider", + "IcEmptyState", + "IcFooter", + "IcFooterLink", + "IcFooterLinkGroup", + "IcHero", + "IcHorizontalScroll", + "IcInputComponentContainer", + "IcInputContainer", + "IcInputLabel", + "IcInputValidation", + "IcLink", + "IcLoadingIndicator", + "IcMenu", + "IcMenuGroup", + "IcMenuItem", + "IcNavigationButton", + "IcNavigationGroup", + "IcNavigationItem", + "IcNavigationMenu", + "IcPageHeader", + "IcPagination", + "IcPaginationItem", + "IcPopoverMenu", + "IcRadioGroup", + "IcRadioOption", + "IcSearchBar", + "IcSectionContainer", + "IcSelect", + "IcSideNavigation", + "IcSkeleton", + "IcStatusTag", + "IcStep", + "IcStepper", + "IcSwitch", + "IcTab", + "IcTabContext", + "IcTabGroup", + "IcTabPanel", + "IcTextField", + "IcTheme", + "IcToast", + "IcToastRegion", + "IcToggleButton", + "IcToggleButtonGroup", + "IcTooltip", + "IcTopNavigation", + "IcTypography" + ] +} diff --git a/src/icds-pages-data.json b/src/icds-pages-data.json index 98448d6fc..d8a4eb73a 100644 --- a/src/icds-pages-data.json +++ b/src/icds-pages-data.json @@ -665,35 +665,35 @@ }, { "id": "community__indexx", - "contents": "\n## Our community\n\nThe Design System and UI Kit has been open sourced onto GitHub. This will make it easier for suppliers, external experts and others to contribute back to the Design System. They will realise the value from our work, and our approach to software and inclusive design.\n\nFind out:\n\n- What's coming next? Check out our [ roadmap](/community/roadmap).\n- How you can [contribute](/community/contribute).\n- The Design System [contribution criteria](/community/contribute-criteria).\n- How our community approaches design through our [design principles](/get-started/design-principles).\n\n## Design System Working Group\n\nThe Design System working group is a cross-functional group of developers, designers and other consumers from across the UK Intelligence Community working on or for the IC Design System.\n\nThe working group:\n\n- Checks proposals and contributions against the [contribution criteria](/community/contribute-criteria).\n- Makes recommendations to help contributors align their work to design and coding standards.\n- Makes sure that decisions made are fair and unbiased, and that the IC Design System reflects the needs of the UK Intelligence Community.\n- Has at least one representative from each organisation.\n- Has at least one accessibility expert.\n", + "contents": "\n## Introduction\n\nThe Design System and UI Kit has been [open sourced onto GitHub](https://github.com/orgs/mi6/projects/2/views/1) with the aim to make it easier for others to contribute back.\n\nWe hope to demonstrate our approach to software and inclusive design.\n\n- See our [roadmap](/community/roadmap) for an overview of recent work, current focus and work we have planned.\n- Learn how you can [contribute](/community/contribute) using the [contribution criteria](/community/contribute-criteria).\n- How our community approaches design through our [design principles](/get-started/design-principles).\n", "path": "/community", - "date": "2022-11-15", + "date": "2024-05-07", "title": "Community", - "subTitle": "The UK Intelligence Community Design System (IC Design System) is a community effort endorsed across the UK Intelligence Community.", + "subTitle": "The UK Intelligence Community Design System is a community effort endorsed across the UK Intelligence Community.", "contribute": "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/community/index.mdx", "meta": { "relativePath": "community/index.mdx", - "createdAt": "2024-02-14T15:16:05.978Z", - "lastModified": "2024-02-14T15:16:05.978Z", - "size": 1596, - "formattedSize": "1.6 KB" + "createdAt": "2024-05-13T07:27:37.278Z", + "lastModified": "2024-05-13T07:27:37.278Z", + "size": 904, + "formattedSize": "904 Bytes" } }, { "id": "community__roadmapx", - "contents": "\n## Introduction\n\nThe purpose of sharing the roadmap is to give our community an insight into our strategic plan, goals and milestones.\n\nWe use our roadmap to communicate plans. Priorities may change because of organisation strategies, or community requirements. We will aim to keep this page up to date.\n\nCheck out our [GitHub](https://github.com/orgs/mi6/projects/2/views/1) for a more detailed view of our day-to-day activities and the work completed in our increments.\n\nWe welcome contributions of code, issues raised and more. Read about [how to contribute](/community/contribute).\n\n## Recent features and functionality added\n\n- Development of data tables component\n- Research and design the date time component\n- Designed reuseable copy and paste-able patterns\n- Designed table of contents component\n\n## Current focus\n\n- Development of the date picker component\n- Development of the multi-selct component\n- Development of the toggle button component\n- Development of the toggle button group component\n- Customisation and theming of colours and components within the library\n\n## Upcoming\n\n- Release the multi-select component\n- Release the toggle button component\n- Release the toggle button group component\n- Development of table of contents component\n- The next iteration of data tables component to include filtering functionality\n", + "contents": "\n## Introduction\n\nThe purpose of sharing the roadmap is to give our community an insight into our strategic plan, goals and milestones.\n\nPriorities may change because of organisation strategies, or community requirements. We will aim to keep this page up to date.\n\nWe welcome contributions of code, issues raised and more. You can read more about [how to contribute](/community/contribute).\n\nCheck out our [GitHub](https://github.com/orgs/mi6/projects/2/views/1) for a more detailed view of our day-to-day activities.\n\n## Recently shipped\n\n- Canary release of [data table component](/components/data-table).\n- Canary release of [date input component](/components/date-input).\n- Canary release of [date picker component](/components/date-picker).\n- Canary release of [multi-select component](/components/multi-select).\n- Development of [top navigation layout pattern](/patterns/navigation-patterns/top-navigation-layout).\n- Development of [side navigation layout pattern](/patterns/navigation-patterns/side-navigation-layout).\n- Development of [file upload component](/components/button/code/#file-upload).\n- Development of [toggle button component](/components/toggle-button).\n- Added [component images to component galley](/components).\n\n## Current focus\n\n- Customisation and theming of colours and components within the library.\n- Understand the scope for dark mode.\n- Development of drawer component.\n- Development of tree navigation component.\n- Continue Cypress test migration.\n- Development of form pattern.\n- Add StackBlitz and show more show less functionality to component demos.\n\n## Future\n\n- Understand the scope for v3 of the Design System.\n", "path": "/community/roadmap", "navPriority": 1, - "date": "2024-02-02", + "date": "2024-05-07", "title": "Roadmap", - "subTitle": "Our roadmap shows the latest work and the work we have planned.", + "subTitle": "Our roadmap shows an overview of recent work, current focus and work we have planned.", "contribute": "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/community/roadmap.mdx", "meta": { "relativePath": "community/roadmap.mdx", - "createdAt": "2024-02-14T15:16:05.978Z", - "lastModified": "2024-02-14T15:16:05.978Z", - "size": 1615, - "formattedSize": "1.6 KB" + "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 language: \"Web component\",\n snippet: `\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`,\n },\n {\n language: \"React\",\n snippet: `\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`,\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 language: \"Web component\",\n snippet: `\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 },\n {\n language: \"React\",\n snippet: `\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 },\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 language: \"Web component\",\n snippet: `\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 },\n {\n language: \"React\",\n snippet: `\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 },\n];\n\n### With nested accordions\n\nexport const snippetsNested = [\n {\n language: \"Web component\",\n snippet: `\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 },\n {\n language: \"React\",\n snippet: `\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 },\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": "2023-10-11", + "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-09T10:42:41.743Z", - "lastModified": "2024-05-09T10:42:41.743Z", - "size": 9273, - "formattedSize": "9.1 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-09T13:21:27.721Z", - "lastModified": "2024-05-09T13:21:27.721Z", + "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 language: \"Web component\",\n snippet: `\n\n\n\n`,\n },\n {\n language: \"React\",\n snippet: `\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 language: \"Web component\",\n snippet: ``,\n },\n {\n language: \"React\",\n snippet: ``,\n },\n];\n\n\n \n\n\n### With action\n\nexport const snippetsWithAction = [\n {\n language: \"Web component\",\n snippet: `\n View Drinks\n\n`,\n },\n {\n language: \"React\",\n snippet: `\n console.log(ev)}>View Drinks\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 language: \"Web component\",\n snippet: `\n `,\n },\n {\n language: \"React\",\n snippet: ``,\n },\n];\n\n\n \n\n\n### Responsive title\n\nexport const snippetsResponsiveTitle = [\n {\n language: \"Web component\",\n snippet: `\n `,\n },\n {\n language: \"React\",\n snippet: ``,\n },\n];\n\n\n \n\n\n### Custom message\n\nexport const snippetsCustomMessage = [\n {\n language: \"Web component\",\n snippet: `\n Go to our coffee page to learn more.\n`,\n },\n {\n language: \"React\",\n snippet: `\n Go to our coffee page to learn more.\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-02-02", + "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,10 +846,10 @@ ], "meta": { "relativePath": "components/alerts/code.mdx", - "createdAt": "2024-05-09T10:42:41.771Z", - "lastModified": "2024-05-09T10:42:41.771Z", - "size": 7969, - "formattedSize": "7.8 KB" + "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 language: \"Web component\",\n snippet: ``,\n },\n {\n language: \"React\",\n snippet: ``,\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", + "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": "2023-02-03", + "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-09T10:42:41.775Z", - "lastModified": "2024-05-09T10:42:41.775Z", - "size": 1070, - "formattedSize": "1.0 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 language: \"Web component\",\n snippet: `\n \n \n Coffee orders\n`,\n },\n {\n language: \"React\",\n snippet: `\n \n Coffee orders\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 language: \"Web component\",\n snippet: `\n \n Coffee orders\n\n\n \n Coffee orders\n\n\n \n Coffee orders\n`,\n },\n {\n language: \"React\",\n snippet: `\n \n Coffee orders\n\n\n \n Coffee orders\n\n\n \n Coffee orders\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 language: \"Web component\",\n snippet: `\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 language: \"React\",\n snippet: `\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\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 language: \"Web component\",\n snippet: `\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 language: \"React\",\n snippet: `\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\n\n
\n \n \n Coffee orders\n \n
\n
\n \n \n Coffee orders\n \n
\n
\n \n \n \n \n \n \n \n Coffee orders\n \n
\n\n\n### Max number\n\nexport const snippetsMaxNumber = [\n {\n language: \"Web component\",\n snippet: `
\n \n \n \n Coffee orders\n \n
`,\n },\n {\n language: \"React\",\n snippet: `
\n \n \n Coffee orders\n \n
`,\n },\n];\n\n\n
\n \n \n Coffee orders\n \n
\n\n\n### Positioning\n\nexport const snippetsNear = [\n {\n language: \"Web component\",\n snippet: `
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
`,\n },\n {\n language: \"React\",\n snippet: `
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
`,\n },\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 language: \"Web component\",\n snippet: `\n \n About\n \n \n Ingredients\n \n \n Orders\n \n \n \n \n About page\n Ingredients page\n Orders page\n`,\n },\n {\n language: \"React\",\n snippet: `\n \n \n About\n \n \n Ingredients\n \n \n Orders\n \n \n \n About page\n Ingredients page\n Orders page\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 language: \"Web component\",\n snippet: `\n
\n \n \n Coffee orders\n \n
`,\n },\n {\n language: \"React\",\n snippet: `export 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\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 language: \"Web component\",\n snippet: `
\n \n \n \n Coffee orders\n \n
`,\n },\n {\n language: \"React\",\n snippet: `
\n \n \n Coffee orders\n \n
`,\n },\n];\n\n\n
\n \n \n Coffee orders\n \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-02-02", + "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,18 +1034,18 @@ ], "meta": { "relativePath": "components/badge/code.mdx", - "createdAt": "2024-05-09T10:42:41.775Z", - "lastModified": "2024-05-09T10:42:41.775Z", - "size": 17078, - "formattedSize": "16.7 KB" + "createdAt": "2024-05-21T09:12:11.355Z", + "lastModified": "2024-05-21T09:12:11.355Z", + "size": 22641, + "formattedSize": "22.1 KB" } }, { "id": "components__badge__guidancex", - "contents": "\nimport { IcBadge, IcButton } from \"@ukic/react\";\nimport badgeFig1 from \"./images/fig-1-badge-types.png\";\nimport badgeFig2 from \"./images/fig-2-badge-notification-on-inbox.png\";\nimport badgeFig3 from \"./images/fig-3-text-badge-notification-on-new-list-item.png\";\nimport badgeFig4 from \"./images/fig-4-dont-use-text-badge-with-long-label.png\";\nimport badgeFig5 from \"./images/fig-5-use-dot-badges.png\";\nimport badgeFig6 from \"./images/fig-6-use-icon-badges.png\";\nimport badgeFig7 from \"./images/fig-7-dont-add-badges-to-non-components.png\";\nimport badgeFig9 from \"./images/fig-9-use-plus-symbol-for-large-numbers.png\";\nimport badgeFig10 from \"./images/fig-10-use-high-contrast-combinations.png\";\nimport badgeFig11 from \"./images/fig-11-dont-use-low-conotrast-combinations.png\";\nimport badgeFig12 from \"./images/fig-12-badge-positioning.png\";\nimport badgeFig13 from \"./images/fig-13-understandable-badge-content.png\";\nimport badgeFig14 from \"./images/fig-14-confusing-badge-content.png\";\n\n## Introduction\n\nAn example of the badge component.\n\n\n \n \n Coffee orders\n \n\n\n## Component Variants\n\nThere are three types of badges available:\n\n- Text badge: Contains a short text label.\n- Icon badge: Contains an icon.\n- Dot badge: Badge background without any content.\n\n\n\n## When to use\n\nUse badges to draw attention to new or updated information. For example, use them to display an item count such as the number of new notifications, or to display an icon such as a padlock icon for locked content.\n\n\n\nUse text badges to attach short labels to other information. For example, a badge could be used to highlight a new item in a list. Remember to keep labels concise.\n\n\n \n \n\n\nUse a dot badge to indicate that something has changed or updated without displaying a text label or icon.\n\nUse a text badge with numerical label to show the number of updates.\n\nFor example, use a dot badge to highlight that new comments are available to review, without giving the number of new comments.\n\n\n \n\n\nOnly use badges when the component that it is attached to allows navigation to where the information related to the badge is stored. For example, a button that navigates someone to their inbox may show a badge displaying the number of new notifications that can be found there.\n\nOne exception is when using icon badges to add additional meaning only. For example, use an icon badge with a padlock icon to indicate that something may be currently locked due to access rights.\n\n\n \n\n\nUse badges to convey status, but make sure to use a status icon on the badge to provide a clear way of understanding the status. Don’t rely only on the colour of the badge to indicate status.\n\nFor example, use a success status dot badge to indicate that something has gone online, but always try to back up the status message with textual messaging elsewhere on the page.\n\n## When not to use\n\nDon’t use text badges as the only method of showing information, back the message up elsewhere. For example, show a toast notification for a new message whilst also adding a text badge to an inbox icon button.\n\nAvoid attaching badges to non-interactive components. Aim to attach a badge to components that allow navigation to the information that the badge relates to.\n\nDon’t use an icon badge as the only means of showing information on a non-navigational component. Always back up the message by including written messaging elsewhere on the page or showing feedback when the component is clicked.\n\nFor example, if using an icon badge with a lock symbol to indicate limited access to a navigation button, then allow the navigation button to still be clicked, but show a message stating that it is locked using a dialog or alert.\n\n\n\nAvoid using badges as the only way of indicating status. Always show information about the status in full on the page that the badged component navigates to.\n\nDon’t use multiple badges to indicate many different statuses at the same time as it is hard to understand what the different statuses could mean. When using badges to convey status, use one type of status badge at a time.\n\nFor example, for an application showing different system statuses, don’t place multiple status badges on a component to show separate information such as online status as well as system health status.\n\nFor example, on an app for displaying coffee orders to baristas, don’t show multiple status badges on a single order. Don't display a badge to indicate time since the order was placed as well as a badge to indicate remaining number of products.\n\nAvoid using badges with more than four characters, including the ‘+’ symbol. Use the ‘maxNumber’ property to limit what is displayed before a ‘+’ symbol is added. For example, this can be used to show ‘99+’ notifications.\n\n\n\n## Colour\n\nUse the different colour variations of badges to make sure it achieves at least 3:1 colour contrast ratio with its background.\n\nSpecify a custom colour for the badge, but take care to make sure the colour contrast requirements are met.\n\n\n \n \n\n\n## Sizing\n\nUse the same sized badge for the size of the component that the badge is attached to. For example, use a large sized badge with a large sized button.\n\n## Layout and placement\n\nBadges are always positioned in the top right corner of the component it is attached to. Make sure the badge overlaps the border of the component by adjusting the badge’s positioning using the ‘far’ and ‘near’ positioning options. For square components use the ‘far’ positioning option, and for rounded components use the ‘near’ positioning.\n\nFor components that are adjacent to one another, such as tabs, use ‘inline’ badge positioning so that the badge sits in line with the component’s label.\n\n\n \n\n\n## Content\n\nMake sure that it is obvious what the badge relates to. Only use badges when the component it is attached to is labelled clearly to indicate what the badge references. For example, a numeric badge on an inbox is easily understandable, whereas a numeric badge on a menu button may not be as clear as to what the badge represents.\n\n\n \n \n\n\nWhen using text badges, keep the text label short and only use a single word. Avoid using more than four characters on a text badge. For example, use a text badge to label something as ‘New’. Don’t use badges to add long labels; consider adding that information elsewhere instead.\n\nIf displaying numbers in a text badge, then set the ‘maxNumber’ property to limit the number of characters shown. This will show a ‘+’ symbol if the value is larger than the maxNumber.\n\nAlways provide an accessible label to add context to a badge’s label for the benefit of people who use a screen reader. Make sure to include any visible label within the accessible label.\n\nTake care when using icon badges so that the icon is immediately understandable to its context. Don’t use abstract or ambiguous icons as this will make it hard to understand what the badge represents.\n\n## Accessibility considerations\n\nAlways provide a badge with an accessible label to add context for people who use screen readers. For example, a text badge displaying the number 10 might have an accessible label that reads ‘10 new notifications’.\n\nWhen using an icon badge, make sure that the icon alt-text makes sense to its function and use the accessible label to add context.\n\nWhen setting a badge’s colour, make sure it meets the minimum contrast requirement of 3:1 for non-text elements.\n\nIf a badge is added to a page because of a status update, make sure that screen readers announce its presence by using a live region.\n", + "contents": "\nimport { IcBadge, IcButton } from \"@ukic/react\";\nimport badgeFig1 from \"./images/fig-1-badge-types.png\";\nimport badgeFig2 from \"./images/fig-2-badge-notification-on-inbox.png\";\nimport badgeFig3 from \"./images/fig-3-text-badge-notification-on-new-list-item.png\";\nimport badgeFig4 from \"./images/fig-4-dont-use-text-badge-with-long-label.png\";\nimport badgeFig5 from \"./images/fig-5-use-dot-badges.png\";\nimport badgeFig6 from \"./images/fig-6-use-icon-badges.png\";\nimport badgeFig7 from \"./images/fig-7-dont-add-badges-to-non-components.png\";\nimport badgeFig9 from \"./images/fig-9-use-plus-symbol-for-large-numbers.png\";\nimport badgeFig10 from \"./images/fig-10-use-high-contrast-combinations.png\";\nimport badgeFig11 from \"./images/fig-11-dont-use-low-conotrast-combinations.png\";\nimport badgeFig12 from \"./images/fig-12-badge-positioning.png\";\nimport badgeFig13 from \"./images/fig-13-understandable-badge-content.png\";\nimport badgeFig14 from \"./images/fig-14-confusing-badge-content.png\";\n\n## Introduction\n\nAn example of the badge component.\n\n\n \n \n Coffee orders\n \n\n\n## Component variants\n\nThere are three types of badges available:\n\n- Text badge: Contains a short text label.\n- Icon badge: Contains an icon.\n- Dot badge: Badge background without any content.\n\n\n\n## When to use\n\nUse badges to draw attention to new or updated information. For example, use them to display an item count such as the number of new notifications, or to display an icon such as a padlock icon for locked content.\n\n\n\nUse text badges to attach short labels to other information. For example, a badge could be used to highlight a new item in a list. Remember to keep labels concise.\n\n\n \n \n\n\nUse a dot badge to indicate that something has changed or updated without displaying a text label or icon.\n\nUse a text badge with numerical label to show the number of updates.\n\nFor example, use a dot badge to highlight that new comments are available to review, without giving the number of new comments.\n\n\n \n\n\nOnly use badges when the component that it is attached to allows navigation to where the information related to the badge is stored. For example, a button that navigates someone to their inbox may show a badge displaying the number of new notifications that can be found there.\n\nOne exception is when using icon badges to add additional meaning only. For example, use an icon badge with a padlock icon to indicate that something may be currently locked due to access rights.\n\n\n \n\n\nUse badges to convey status, but make sure to use a status icon on the badge to provide a clear way of understanding the status. Don’t rely only on the colour of the badge to indicate status.\n\nFor example, use a success status dot badge to indicate that something has gone online, but always try to back up the status message with textual messaging elsewhere on the page.\n\n## When not to use\n\nDon’t use text badges as the only method of showing information, back the message up elsewhere. For example, show a toast notification for a new message whilst also adding a text badge to an inbox icon button.\n\nAvoid attaching badges to non-interactive components. Aim to attach a badge to components that allow navigation to the information that the badge relates to.\n\nDon’t use an icon badge as the only means of showing information on a non-navigational component. Always back up the message by including written messaging elsewhere on the page or showing feedback when the component is clicked.\n\nFor example, if using an icon badge with a lock symbol to indicate limited access to a navigation button, then allow the navigation button to still be clicked, but show a message stating that it is locked using a dialog or alert.\n\n\n\nAvoid using badges as the only way of indicating status. Always show information about the status in full on the page that the badged component navigates to.\n\nDon’t use multiple badges to indicate many different statuses at the same time as it is hard to understand what the different statuses could mean. When using badges to convey status, use one type of status badge at a time.\n\nFor example, for an application showing different system statuses, don’t place multiple status badges on a component to show separate information such as online status as well as system health status.\n\nFor example, on an app for displaying coffee orders to baristas, don’t show multiple status badges on a single order. Don't display a badge to indicate time since the order was placed as well as a badge to indicate remaining number of products.\n\nAvoid using badges with more than four characters, including the ‘+’ symbol. Use the ‘maxNumber’ property to limit what is displayed before a ‘+’ symbol is added. For example, this can be used to show ‘99+’ notifications.\n\n\n\n## Colour\n\nUse the different colour variations of badges to make sure it achieves at least 3:1 colour contrast ratio with its background.\n\nSpecify a custom colour for the badge, but take care to make sure the colour contrast requirements are met.\n\n\n \n \n\n\n## Sizing\n\nUse the same sized badge for the size of the component that the badge is attached to. For example, use a large sized badge with a large sized button.\n\n## Layout and placement\n\nBadges are always positioned in the top right corner of the component it is attached to. Make sure the badge overlaps the border of the component by adjusting the badge’s positioning using the ‘far’ and ‘near’ positioning options. For square components use the ‘far’ positioning option, and for rounded components use the ‘near’ positioning.\n\nFor components that are adjacent to one another, such as tabs, use ‘inline’ badge positioning so that the badge sits in line with the component’s label.\n\n\n \n\n\n## Content\n\nMake sure that it is obvious what the badge relates to. Only use badges when the component it is attached to is labelled clearly to indicate what the badge references. For example, a numeric badge on an inbox is easily understandable, whereas a numeric badge on a menu button may not be as clear as to what the badge represents.\n\n\n \n \n\n\nWhen using text badges, keep the text label short and only use a single word. Avoid using more than four characters on a text badge. For example, use a text badge to label something as ‘New’. Don’t use badges to add long labels; consider adding that information elsewhere instead.\n\nIf displaying numbers in a text badge, then set the ‘maxNumber’ property to limit the number of characters shown. This will show a ‘+’ symbol if the value is larger than the maxNumber.\n\nAlways provide an accessible label to add context to a badge’s label for the benefit of people who use a screen reader. Make sure to include any visible label within the accessible label.\n\nTake care when using icon badges so that the icon is immediately understandable to its context. Don’t use abstract or ambiguous icons as this will make it hard to understand what the badge represents.\n\n## Accessibility considerations\n\nAlways provide a badge with an accessible label to add context for people who use screen readers. For example, a text badge displaying the number 10 might have an accessible label that reads ‘10 new notifications’.\n\nWhen using an icon badge, make sure that the icon alt-text makes sense to its function and use the accessible label to add context.\n\nWhen setting a badge’s colour, make sure it meets the minimum contrast requirement of 3:1 for non-text elements.\n\nIf a badge is added to a page because of a status update, make sure that screen readers announce its presence by using a live region.\n", "path": "/components/badge", "navPriority": 4, - "date": "2023-10-05", + "date": "2024-05-10", "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.", @@ -1066,8 +1066,8 @@ ], "meta": { "relativePath": "components/badge/guidance.mdx", - "createdAt": "2024-05-01T14:41:23.653Z", - "lastModified": "2024-05-01T14:41:23.653Z", + "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 language: \"Web component\",\n snippet: `\n \n \n \n \n`,\n },\n {\n language: \"React\",\n snippet: `\n \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 language: \"Web component\",\n snippet: `\n \n \n \n \n`,\n },\n {\n language: \"React\",\n snippet: `\n \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 language: \"Web component\",\n snippet: `\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n`,\n },\n {\n language: \"React\",\n snippet: `\n \n \n \n \n \n \n \n \n \n \n \n \n \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 language: \"Web component\",\n snippet: ` \n \n \n \n \n`,\n },\n {\n language: \"React\",\n snippet: `\n \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 language: \"React\",\n snippet: `\n \n \n \n Home\n \n \n \n \n Beverages\n \n \n \n \n Coffee\n \n \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-02-02", + "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,10 +1128,10 @@ ], "meta": { "relativePath": "components/breadcrumbs/code.mdx", - "createdAt": "2024-05-09T10:42:41.779Z", - "lastModified": "2024-05-09T10:42:41.779Z", - "size": 10210, - "formattedSize": "10.0 KB" + "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 language: \"Web component\",\n snippet: `Add to order\nView coffees\nFind out more\nCancel order\n`,\n },\n {\n language: \"React\",\n snippet: ` console.log(ev)}>Add to order\n View coffees\n Find out more\n Cancel order`,\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 language: \"Web component\",\n snippet: `Add to order\nLoading button\nAdd to order`,\n },\n {\n language: \"React\",\n snippet: `Add to order\nLoading button\nAdd to order`,\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 language: \"Web component\",\n snippet: `\n \n \n \n Refresh order status\n`,\n },\n {\n language: \"React\",\n snippet: `\n \n \n \n \n Refresh order status\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 language: \"Web component\",\n snippet: `\n \n \n \n \n`,\n },\n {\n language: \"React\",\n snippet: `\n \n \n \n \n`,\n },\n];\n\n\n \n \n \n \n \n \n\n\n### Sizing\n\nexport const snippetsSizing = [\n {\n language: \"Web component\",\n snippet: `Add to order\nAdd to order\nAdd to order`,\n },\n {\n language: \"React\",\n snippet: `Add to order\nAdd to order\nAdd to order`,\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 language: \"Web component\",\n snippet: `\n Add to order\n \nAdd to order\nAdd to order`,\n },\n {\n language: \"React\",\n snippet: `\n Add to order\n \nAdd to order\nAdd to order`,\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 FileUpload = () => {\n function updateFileList(fileArray) {\n const fileList = [];\n Array.from(fileArray).forEach((file) => {\n fileList.push(file.name);\n });\n return fileList.join(\", \");\n }\n return (\n \n document.addEventListener(\"icFileSelection\", (event) =>\n console.log(updateFileList(event.detail))\n )\n }\n >\n Upload File\n \n );\n};\n\nexport const snippetsFileUpload = [\n {\n language: \"Web component\",\n snippet: `\n Upload File\n\n`,\n },\n {\n language: \"React\",\n snippet: `export const FileUpload = () => {\n function updateFileList(fileArray) {\n const fileList = [];\n Array.from(fileArray).forEach((file) => {\n fileList.push(file.name);\n });\n return fileList.join(\", \");\n }\n return (\n \n document.addEventListener(\"icFileSelection\", (event) =>\n console.log(updateFileList(event.detail))\n )\n }\n >\n Upload File\n \n ); \n};`,\n },\n];\n\n\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-03-13", + "date": "2024-05-02", "title": "Button", "status": "BETA", "subTitle": "Buttons are used to allow or encourage people to take an action.", @@ -1222,18 +1222,18 @@ ], "meta": { "relativePath": "components/buttons/code.mdx", - "createdAt": "2024-05-09T10:42:41.779Z", - "lastModified": "2024-05-09T10:42:41.779Z", - "size": 9561, - "formattedSize": "9.3 KB" + "createdAt": "2024-05-21T09:12:11.355Z", + "lastModified": "2024-05-21T09:12:11.355Z", + "size": 12022, + "formattedSize": "11.7 KB" } }, { "id": "components__buttons__guidancex", - "contents": "\nimport { IcButton } from \"@ukic/react\";\nimport buttonFig1 from \"./images/fig-1-use-buttons-to-complete-actions-on-the-page-such-as-adding-or-deleting-an-item-confirming-or-closing-a-dialog-or-as-a-tool-in-a-toolbar.png\";\nimport buttonFig2 from \"./images/fig-2-do-not-use-buttons-to-navigate-users-to-a-new-page.png\";\nimport buttonFig3 from \"./images/fig-3-use-contrast-variants-on-different-coloured-backgrounds-to-ensure-good-contrast-and-avoid-colours-clashing.png\";\nimport buttonFig4 from \"./images/fig-4-make-sure-to-use-the-correct-button-variant-to-meet-minimum-contrast-requirements.png\";\nimport buttonFig5 from \"./images/fig-5-use-the-correct-buttons-sizes-to-match-other-UI-component-sizes.png\";\nimport buttonFig6 from \"./images/fig-6-do-not-mix-different-sized-components.png\";\nimport buttonFig7 from \"./images/fig-7-use-large-buttons-for-standalone-higher-priority-actions.png\";\nimport buttonFig8 from \"./images/fig-8-use-a-primary-button-for-the-most-important-action-or-when-you-want-to-influence-an-action.png\";\nimport buttonFig9 from \"./images/fig-9-two-primary-buttons-make-it-less-clear-what-the-expected-action-is.png\";\nimport buttonFig10 from \"./images/fig-10-use-multiple-secondary-buttons-to-provide-lower-priority-actions-and-a-primary-button-for-the-higher-priority-action.png\";\nimport buttonFig11 from \"./images/fig-11-use-tertiary-buttons-to-provide-a-dismissive-or-cancellation-action-when-paired-with-a-primary-button-that-provides-the-main-call-to-action.png\";\nimport buttonFig12 from \"./images/fig-12-use-a-primary-button-to-highlight-the-key-action-in-a-button-group.png\";\nimport buttonFig13 from \"./images/fig-13-do-not-use-different-button-types-for-different-actions-in-a-group.png\";\nimport buttonFig14 from \"./images/fig-14-position-primary-buttons-to-the-left-when-on-a-page.png\";\nimport buttonFig15 from \"./images/fig-15-do-position-primary-buttons-to-the-right-when-on-a-dialog.png\";\nimport buttonFig16 from \"./images/fig-16-use-concise-but-specific-labels.png\";\nimport buttonFig17 from \"./images/fig-17-do-not-use-long-labels-or-generic-labels.png\";\nimport buttonFig18 from \"./images/fig-18-use-icons-with-clear-meaning-to-add-clarity-to-the-action.png\";\nimport buttonFig19 from \"./images/fig-19-do-not-use-complicated-unrelated-or-ambiguous-icons-on-buttons.png\";\n\n## Component variants\n\nThere are five variants of button:\n\n- Primary buttons\n- Secondary buttons\n- Tertiary buttons\n- Icon buttons\n- Destructive buttons\n\n\n Add to order\n View coffees\n Find out more\n Cancel order\n\n\n## When to use\n\n### Primary buttons\n\nUse primary buttons to provide high emphasis to a key action. Use them for the most important action on a page or within a container.\n\n### Secondary buttons\n\nUse secondary buttons to provide medium emphasis for less important actions on a page or within a container.\n\nGroup these buttons to provide a set of actions of equal priority.\n\n### Tertiary buttons\n\nUse tertiary buttons to provide low emphasis for low priority actions on a page or within a container that aren't important or used frequently.\n\nUse tertiary buttons for dismissive actions such as to close a dialog, navigate back a step or to cancel an action.\n\n### Icon buttons\n\nIcon buttons work like a normal button but don't include a visible text label. Use them to provide a compact method of triggering an action.\n\nUse icon buttons for well understood actions that are represented clearly by the icon's visual content. For example, a 'bin' icon indicates a delete function. Read more about [iconography](/styles/icons) for guidance on selecting and creating icons.\n\nAlways provide a textual description available programmatically and a visible label that is displayed using a tooltip when hovering on an icon button.\n\n### Destructive buttons\n\nUse destructive buttons for actions that can't be reversed. For example, use them for a delete action that can't be undone.\n\n## When not to use\n\n### Buttons and links\n\nButtons should trigger actions and affect content on the current page or container. To navigate to a new page or open a new tab use links instead.\n\n\n\n\n\n## Interaction behaviour\n\nWhen an action triggers a background task use the button loading state to provide feedback to the user that something is happening.\n\n\n \n Loading\n \n\n\n## Colour\n\nDon't change a button colour as this makes them less recognisable as actions.\n\n### Appearance\n\nPrimary, secondary, tertiary and icon buttons have default, light and dark appearance options.\n\nUse different button appearances when placing buttons on coloured backgrounds to ensure good contrast and avoid colours clashing. Use light appearance buttons on dark backgrounds and use dark appearance buttons on light backgrounds.\n\nWhen you use the UI Kit components together they will select the appropriate variant.\n\n\n \n \n\n\n## Sizing\n\nButtons have three different sizing options: default, small and large.\n\nUse components of the same size together. For example, use a default sized button with a default sized input component, or use a small sized button with a small sized input component.\n\n\n \n \n\n\nUse large buttons only for high emphasis actions that sit independently from other UI elements.\n\n\n\n## Layout and placement\n\n### Button hierarchy\n\nUse only one primary button on a page or within a container. Show the most important action with a primary button.\n\n\n \n \n\n\nUse secondary buttons to perform secondary or lower priority actions.\n\nGroup multiple secondary actions to provide a set of possible actions with an equal priority.\n\n\n \n \n\n\n### Button grouping\n\nGroup buttons to provide a set of actions.\n\nHighlight the primary action in the group using a primary button. Use all secondary or all tertiary buttons for the rest of the actions.\n\nDon't mix secondary and text buttons to provide multiple actions in a group.\n\n\n\n\n\nPlace primary buttons on the left of a button group unless presented in a modal window where they should be located on the right. This follows common reading patterns when viewing a page and a dialog.\n\n\n\n\n\n## Content\n\n### Labels\n\nFollow the [content style](/styles/content-style) guidelines when writing button labels.\n\nAdd useful labels to buttons so that they don't rely on context. Avoid using long labels and keep them specific and concise.\n\n\n \n \n\n\nAlways specify an accessible label for the button. The accessible label can include more detail than is described in the visible label, but make sure that the visible label text is included within the accessible label.\n\nFor example, a button may have a visible label which reads ‘Submit’. The accessible label may read ‘Submit form’. This includes more information to aid assistive technology users, but still includes the full visible label.\n\n### Icons\n\nUse an icon on a button to provide additional meaning or to aid in recognition. All button types can display an icon.\n\nMake sure that the icon is understandable and relevant to the action.\n\nAlways provide alternative descriptions for icons if they aren't decorative. Only use icons if they are necessary.\n\n\n \n \n\n\n## Accessibility considerations\n\nAdd labels to all icon buttons using a [tooltip](/components/tooltip) which is useful to sighted users too.\n\nUse useful and context-free labels. If necessary, add additional context in the accessible label.\n\n## Related components\n\n- [Links](/components/link)\n- [Tooltips](/components/tooltip)\n", + "contents": "\nimport { IcButton } from \"@ukic/react\";\nimport buttonFig1 from \"./images/fig-1-use-buttons-to-complete-actions-on-the-page-such-as-adding-or-deleting-an-item-confirming-or-closing-a-dialog-or-as-a-tool-in-a-toolbar.png\";\nimport buttonFig2 from \"./images/fig-2-do-not-use-buttons-to-navigate-users-to-a-new-page.png\";\nimport buttonFig3 from \"./images/fig-3-use-contrast-variants-on-different-coloured-backgrounds-to-ensure-good-contrast-and-avoid-colours-clashing.png\";\nimport buttonFig4 from \"./images/fig-4-make-sure-to-use-the-correct-button-variant-to-meet-minimum-contrast-requirements.png\";\nimport buttonFig5 from \"./images/fig-5-use-the-correct-buttons-sizes-to-match-other-UI-component-sizes.png\";\nimport buttonFig6 from \"./images/fig-6-do-not-mix-different-sized-components.png\";\nimport buttonFig7 from \"./images/fig-7-use-large-buttons-for-standalone-higher-priority-actions.png\";\nimport buttonFig8 from \"./images/fig-8-use-a-primary-button-for-the-most-important-action-or-when-you-want-to-influence-an-action.png\";\nimport buttonFig9 from \"./images/fig-9-two-primary-buttons-make-it-less-clear-what-the-expected-action-is.png\";\nimport buttonFig10 from \"./images/fig-10-use-multiple-secondary-buttons-to-provide-lower-priority-actions-and-a-primary-button-for-the-higher-priority-action.png\";\nimport buttonFig11 from \"./images/fig-11-use-tertiary-buttons-to-provide-a-dismissive-or-cancellation-action-when-paired-with-a-primary-button-that-provides-the-main-call-to-action.png\";\nimport buttonFig12 from \"./images/fig-12-use-a-primary-button-to-highlight-the-key-action-in-a-button-group.png\";\nimport buttonFig13 from \"./images/fig-13-do-not-use-different-button-types-for-different-actions-in-a-group.png\";\nimport buttonFig14 from \"./images/fig-14-position-primary-buttons-to-the-left-when-on-a-page.png\";\nimport buttonFig15 from \"./images/fig-15-do-position-primary-buttons-to-the-right-when-on-a-dialog.png\";\nimport buttonFig16 from \"./images/fig-16-use-concise-but-specific-labels.png\";\nimport buttonFig17 from \"./images/fig-17-do-not-use-long-labels-or-generic-labels.png\";\nimport buttonFig18 from \"./images/fig-18-use-icons-with-clear-meaning-to-add-clarity-to-the-action.png\";\nimport buttonFig19 from \"./images/fig-19-do-not-use-complicated-unrelated-or-ambiguous-icons-on-buttons.png\";\n\n## Component variants\n\nThere are five variants of button:\n\n- Primary buttons\n- Secondary buttons\n- Tertiary buttons\n- Destructive buttons\n- Icon buttons\n\n\n Add to order\n View coffees\n Find out more\n Cancel order\n \n \n \n \n \n \n\n\n## When to use\n\n### Primary buttons\n\nUse primary buttons to provide high emphasis to a key action. Use them for the most important action on a page or within a container.\n\n### Secondary buttons\n\nUse secondary buttons to provide medium emphasis for less important actions on a page or within a container.\n\nGroup these buttons to provide a set of actions of equal priority.\n\n### Tertiary buttons\n\nUse tertiary buttons to provide low emphasis for low priority actions on a page or within a container that aren't important or used frequently.\n\nUse tertiary buttons for dismissive actions such as to close a dialog, navigate back a step or to cancel an action.\n\n### Destructive buttons\n\nUse destructive buttons for actions that can't be reversed. For example, use them for a delete action that can't be undone.\n\n### Icon buttons\n\nIcon buttons work like a normal button but don't include a visible text label. Use them to provide a compact method of triggering an action.\n\nUse icon buttons for well understood actions that are represented clearly by the icon's visual content. For example, a 'bin' icon indicates a delete function. Read more about [iconography](/styles/icons) for guidance on selecting and creating icons.\n\nAlways provide a textual description available programmatically and a visible label that is displayed using a tooltip when hovering on an icon button.\n\n## When not to use\n\n### Buttons and links\n\nButtons should trigger actions and affect content on the current page or container. To navigate to a new page or open a new tab use links instead.\n\n\n\n\n\n## Interaction behaviour\n\nWhen an action triggers a background task use the button loading state to provide feedback to the user that something is happening.\n\n\n \n Loading\n \n\n\n## Colour\n\nDon't change a button colour as this makes them less recognisable as actions.\n\n### Appearance\n\nPrimary, secondary, tertiary and icon buttons have default, light and dark appearance options.\n\nUse different button appearances when placing buttons on coloured backgrounds to ensure good contrast and avoid colours clashing. Use light appearance buttons on dark backgrounds and use dark appearance buttons on light backgrounds.\n\nWhen you use the UI Kit components together they will select the appropriate variant.\n\n\n \n \n\n\n## Sizing\n\nButtons have three different sizing options: default, small and large.\n\nUse components of the same size together. For example, use a default sized button with a default sized input component, or use a small sized button with a small sized input component.\n\n\n \n \n\n\nUse large buttons only for high emphasis actions that sit independently from other UI elements.\n\n\n\n## Layout and placement\n\n### Button hierarchy\n\nUse only one primary button on a page or within a container. Show the most important action with a primary button.\n\n\n \n \n\n\nUse secondary buttons to perform secondary or lower priority actions.\n\nGroup multiple secondary actions to provide a set of possible actions with an equal priority.\n\n\n \n \n\n\n### Button grouping\n\nGroup buttons to provide a set of actions.\n\nHighlight the primary action in the group using a primary button. Use all secondary or all tertiary buttons for the rest of the actions.\n\nDon't mix secondary and text buttons to provide multiple actions in a group.\n\n\n\n\n\nPlace primary buttons on the left of a button group unless presented in a modal window where they should be located on the right. This follows common reading patterns when viewing a page and a dialog.\n\n\n\n\n\n## Content\n\n### Labels\n\nFollow the [content style](/styles/content-style) guidelines when writing button labels.\n\nAdd useful labels to buttons so that they don't rely on context. Avoid using long labels and keep them specific and concise.\n\n\n \n \n\n\nAlways specify an accessible label for the button. The accessible label can include more detail than is described in the visible label, but make sure that the visible label text is included within the accessible label.\n\nFor example, a button may have a visible label which reads ‘Submit’. The accessible label may read ‘Submit form’. This includes more information to aid assistive technology users, but still includes the full visible label.\n\n### Icons\n\nUse an icon on a button to provide additional meaning or to aid in recognition. All button types can display an icon.\n\nMake sure that the icon is understandable and relevant to the action.\n\nAlways provide alternative descriptions for icons if they aren't decorative. Only use icons if they are necessary.\n\n\n \n \n\n\n## Accessibility considerations\n\nAdd labels to all icon buttons using a [tooltip](/components/tooltip) which is useful to sighted users too.\n\nUse useful and context-free labels. If necessary, add additional context in the accessible label.\n\n## Related components\n\n- [Links](/components/link)\n- [Tooltips](/components/tooltip)\n", "path": "/components/button", "navPriority": 6, - "date": "2023-02-03", + "date": "2024-05-10", "title": "Button", "status": "BETA", "subTitle": "Buttons are used to allow or encourage people to take an action.", @@ -1254,10 +1254,10 @@ ], "meta": { "relativePath": "components/buttons/guidance.mdx", - "createdAt": "2024-02-14T15:16:06.010Z", - "lastModified": "2024-02-14T15:16:06.010Z", - "size": 14817, - "formattedSize": "14.5 KB" + "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 language: \"Web component\",\n snippet: `\n \n \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 language: \"React\",\n snippet: `\n \n \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\n\n \n \n \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 language: \"Web component\",\n snippet: ``,\n },\n {\n language: \"React\",\n snippet: ``,\n },\n];\n\n\n \n\n\n### With icon\n\nexport const withIcon = [\n {\n language: \"Web component\",\n snippet: `\n \n \n \n \n`,\n },\n {\n language: \"React\",\n snippet: `\n \n \n \n`,\n },\n];\n\n\n \n \n \n \n \n\n\n### Message\n\nexport const withMessage = [\n {\n language: \"Web component\",\n snippet: `\n \n \n \n`,\n },\n {\n language: \"React\",\n snippet: `\n \n \n \n`,\n },\n];\n\n\n \n \n \n \n \n\n\n### With subheading\n\nexport const withSubHeading = [\n {\n language: \"Web component\",\n snippet: `\n \n \n \n`,\n },\n {\n language: \"React\",\n snippet: `\n \n \n \n`,\n },\n];\n\n\n \n \n \n \n \n\n\n### Interaction button\n\nexport const interactionButton = [\n {\n language: \"Web component\",\n snippet: `\n \n \n \n \n \n \n \n \n`,\n },\n {\n language: \"React\",\n snippet: `\n \n \n \n \n \n \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 language: \"Web component\",\n snippet: `\n \n \n \n \n`,\n },\n {\n language: \"React\",\n snippet: `\n \n \n \n \n`,\n },\n];\n\n\n \n \n \n \n \n \n\n\n### Top image\n\nexport const topImage = [\n {\n language: \"Web component\",\n snippet: `\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n`,\n },\n {\n language: \"React\",\n snippet: `\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n`,\n },\n];\n\n\n \n \n \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 language: \"Web component\",\n snippet: `\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n`,\n },\n {\n language: \"React\",\n snippet: `\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n`,\n },\n];\n\n\n \n \n \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 language: \"Web component\",\n snippet: `\n \n \n \n \n
\n Accept\n Cancel\n
\n`,\n },\n {\n language: \"React\",\n snippet: `\n \n \n \n \n
\n Accept\n Cancel\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 language: \"Web component\",\n snippet: `\n \n \n \n
\n Accept\n Cancel\n
\n \n To cancel your order click cancel.\n \n`,\n },\n {\n language: \"React\",\n snippet: `\n \n \n \n
\n Accept\n Cancel\n
\n \n To cancel your order click cancel.\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 language: \"Web component\",\n snippet: `\n \n \n \n`,\n },\n {\n language: \"React\",\n snippet: `\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 language: \"Web component\",\n snippet: `\n \n \n \n\n`,\n },\n {\n language: \"React\",\n snippet: ` console.log(ev)}>\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 language: \"Web component\",\n snippet: `\n \n \n \n \n`,\n },\n {\n language: \"React\",\n snippet: `\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 language: \"Web component\",\n snippet: `\n \n \n \n`,\n },\n {\n language: \"React\",\n snippet: `\n \n \n \n`,\n },\n];\n\n\n \n \n \n \n \n\n\n### Full width\n\nexport const fullWidth = [\n {\n language: \"Web component\",\n snippet: ` \n \n \n \n`,\n },\n {\n language: \"React\",\n snippet: `\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 language: \"Web component\",\n snippet: `\n \n \n \n \n \n`,\n },\n {\n language: \"React\",\n snippet: `\n \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-02-02", + "date": "2024-05-02", "title": "Card", "status": "BETA", "subTitle": "Cards are containers used to display structured information or interactive content.", @@ -1316,15 +1316,15 @@ ], "meta": { "relativePath": "components/cards/code.mdx", - "createdAt": "2024-05-09T10:42:41.783Z", - "lastModified": "2024-05-09T10:42:41.783Z", - "size": 48132, - "formattedSize": "47.0 KB" + "createdAt": "2024-05-21T09:12:11.359Z", + "lastModified": "2024-05-21T09:12:11.359Z", + "size": 53247, + "formattedSize": "52.0 KB" } }, { "id": "components__cards__guidancex", - "contents": "\nimport { IcCard, IcButton, IcTypography, IcStatusTag } from \"@ukic/react\";\nimport cardsFig1 from \"./images/fig-1-card-anatomy.png\";\nimport cardsFig2 from \"./images/fig-2-heading-area-anatomy.png\";\nimport cardsFig3 from \"./images/fig-3-place-images-either-at-the-top-or-in-the-middle-of-cards-if-content-is-present.png\";\nimport cardsFig4 from \"./images/fig-4-dont-place-images-below-content.png\";\nimport cardsFig5 from \"./images/fig-5-interaction-area-anatomy.png\";\nimport cardsFig6 from \"./images/fig-6-dont-mix-card-variants-when-arranged-in-a-group.png\";\nimport cardsFig7 from \"./images/fig-7-dont-vertically-align-cards-with-different-widths.png\";\nimport cardsFig10 from \"./images/fig-10-use-the-show-less-show-more-pattern-when-adding-long-portions-of-text-to-the-content-area.png\";\nimport cardsFig11 from \"./images/fig-11-avoid-displaying-lengthy-descriptions-in-the-content-area.png\";\n\n## Component variants\n\nThere are three variants of cards:\n\n- Interactive cards\n- Static cards\n- Clickable cards\n\n\n \n \n \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### Interactive cards\n\nInteractive cards contain different types of content and actions. The container itself is not interactive but can have interactive components.\n\n### Clickable cards\n\nClickable cards provide a single action that is triggered by clicking anywhere on the card.\n\n### Static cards\n\nStatic cards are non-interactive and contain static content only.\n\n## Anatomy\n\nThe following section describes the different areas of content on a card.\n\n\n\n### 1. Heading area\n\n\n\nThe heading area can contain:\n\n- A: Icon/Avatar\n- B: Heading\n- C: Subtitle\n- D: Adornment, for example [status tags](/components/status-tag)\n- E: More options icon button (only for interactive cards)\n\n### 2. Image\n\nInclude an image either at the top or in the middle of the card. Don't place images below content if this is included in the card.\n\n\n \n \n\n\n### 3. Content area\n\nAdd a descriptive message within the card content section. Interactive and static cards can include a “See more” link to expand hidden content.\n\nSince clickable cards can only contain one interaction, text can't be hidden.\n\n### 4. Interaction area (interactive cards only)\n\n\n\nAdd interactive components to the interaction area at the bottom of the card (A). Avoid using too many interactions. The interaction area is only found in interactive cards.\n\nUse any type of button in the interaction area to provide actions.\n\nInclude an expand button (E) if you include content in the [expandable area](/components/card#5-expandable-area-interactive-cards-only).\n\n### 5. Expandable area (interactive cards only)\n\nUse an expandable area to hold content which either doesn't fit in the collapsed card or doesn't align to the above areas.\n\nThis area can be expanded by clicking the “expand” button found on the interaction bar.\n\n## Layout and placement\n\n### Grouping\n\nWhen arranging multiple cards together, try to use the same card variant for each.\n\n\n\n### Sizing\n\nWhen cards are shown in columns make sure cards are vertically aligned and maintain the same width for all cards.\n\nWhen arranging cards in rows, try to match the vertical height of the cards by including similar amounts of content so that they automatically align horizontally.\n\n\n\n## Content\n\nKeep headings, subheadings and adornments clear and concise.\n\n### Image\n\nUse the pre-defined aspect ratios for images in cards. These are:\n\n- 16:9\n- 1:1\n- 9:16\n- 4:1\n- 4:3\n- 3:4\n\nSet an image to fit within the image container to show the whole image, but this may introduce empty areas in the image container if the image does not match the container aspect ratio. Alternatively, set the image to fill the image container, but be aware this may crop some of the image’s content.\n\nUse a custom image aspect ratio if your image doesn't fit into one of the pre-defined options.\n\nImages should always feature an `alt` attribute. Set the `alt` equal to a descriptive alternative when an image is informational.\n\n### Content area\n\nIf placing several lines of text in the content area, use a “see more” link to make the content expandable.\n\n\n \n \n\n\n## Custom cards\n\nCards can also be used as custom containers if the pre-defined options don't meet your needs. When designing a custom card, make sure to respect the general anatomy and structure of cards as defined in this document.\n\nAny interactive components must be placed either within the interaction bar, or the expandable area. Make sure the interactive area is always placed at the bottom of a collapsed card.\n\nCards support one single image. If you need to place two or more images, place the additional images in the expandable area.\n\nDon't include any interactive components within a clickable card as these will interfere with the clickable card’s own action.\n", + "contents": "\nimport { IcCard, IcButton, IcTypography, IcStatusTag } from \"@ukic/react\";\nimport cardsFig1 from \"./images/fig-1-card-anatomy.png\";\nimport cardsFig2 from \"./images/fig-2-heading-area-anatomy.png\";\nimport cardsFig3 from \"./images/fig-3-place-images-either-at-the-top-or-in-the-middle-of-cards-if-content-is-present.png\";\nimport cardsFig4 from \"./images/fig-4-dont-place-images-below-content.png\";\nimport cardsFig5 from \"./images/fig-5-interaction-area-anatomy.png\";\nimport cardsFig6 from \"./images/fig-6-dont-mix-card-variants-when-arranged-in-a-group.png\";\nimport cardsFig7 from \"./images/fig-7-dont-vertically-align-cards-with-different-widths.png\";\nimport cardsFig10 from \"./images/fig-10-use-the-show-less-show-more-pattern-when-adding-long-portions-of-text-to-the-content-area.png\";\nimport cardsFig11 from \"./images/fig-11-avoid-displaying-lengthy-descriptions-in-the-content-area.png\";\n\n## Component variants\n\nThere are three variants of cards:\n\n- Interactive cards\n- Static cards\n- Clickable cards\n\n\n \n \n \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### Interactive cards\n\nInteractive cards contain different types of content and actions. The container itself is not interactive but can have interactive components.\n\n### Clickable cards\n\nClickable cards provide a single action that is triggered by clicking anywhere on the card.\n\n### Static cards\n\nStatic cards are non-interactive and contain static content only.\n\n## Anatomy\n\nThe following section describes the different areas of content on a card.\n\n\n\n### 1. Heading area\n\n\n\nThe heading area can contain:\n\n- A: Icon/Avatar\n- B: Heading\n- C: Subtitle\n- D: Adornment, for example [status tags](/components/status-tag)\n- E: More options icon button (only for interactive cards)\n\n### 2. Image\n\nInclude an image either at the top or in the middle of the card. Don't place images below content if this is included in the card.\n\n\n \n \n\n\n### 3. Content area\n\nAdd a descriptive message within the card content section. Interactive and static cards can include a “See more” link to expand hidden content.\n\nSince clickable cards can only contain one interaction, text can't be hidden.\n\n### 4. Interaction area (interactive cards only)\n\n\n\nAdd interactive components to the interaction area at the bottom of the card (A). Avoid using too many interactions. The interaction area is only found in interactive cards.\n\nUse any type of button in the interaction area to provide actions.\n\nInclude an expand button (E) if you include content in the [expandable area](/components/card#5-expandable-area-interactive-cards-only).\n\n### 5. Expandable area (interactive cards only)\n\nUse an expandable area to hold content which either doesn't fit in the collapsed card or doesn't align to the above areas.\n\nThis area can be expanded by clicking the “expand” button found on the interaction bar.\n\n## Layout and placement\n\n### Grouping\n\nWhen arranging multiple cards together, try to use the same card variant for each.\n\n\n\n### Sizing\n\nWhen cards are shown in columns make sure cards are vertically aligned and maintain the same width for all cards.\n\nWhen arranging cards in rows, try to match the vertical height of the cards by including similar amounts of content so that they automatically align horizontally.\n\n\n\n## Content\n\nKeep headings, subheadings and adornments clear and concise.\n\n### Image\n\nUse the pre-defined aspect ratios for images in cards. These are:\n\n- 16:9\n- 1:1\n- 9:16\n- 4:1\n- 4:3\n- 3:4\n\nSet an image to fit within the image container to show the whole image, but this may introduce empty areas in the image container if the image does not match the container aspect ratio. Alternatively, set the image to fill the image container, but be aware this may crop some of the image’s content.\n\nUse a custom image aspect ratio if your image doesn't fit into one of the pre-defined options.\n\nImages should always feature an `alt` attribute. Set the `alt` equal to a descriptive alternative when an image is informational.\n\n### Content area\n\nIf placing several lines of text in the content area, use a “see more” link to make the content expandable.\n\n\n \n \n\n\n## Custom cards\n\nCards can also be used as custom containers if the pre-defined options don't meet your needs. When designing a custom card, make sure to respect the general anatomy and structure of cards as defined in this document.\n\nAny interactive components must be placed either within the interaction bar, or the expandable area. Make sure the interactive area is always placed at the bottom of a collapsed card.\n\nCards support one single image. If you need to place two or more images, place the additional images in the expandable area.\n\nDon't include any interactive components within a clickable card as these will interfere with the clickable card’s own action.\n", "path": "/components/card", "navPriority": 7, "date": "2023-02-03", @@ -1348,9 +1348,9 @@ ], "meta": { "relativePath": "components/cards/guidance.mdx", - "createdAt": "2024-05-09T10:42:41.783Z", - "lastModified": "2024-05-09T10:42:41.783Z", - "size": 10611, + "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 language: \"Web component\",\n snippet: `\n \n \n \n\n\n`,\n },\n {\n language: \"React\",\n snippet: ` console.log(\"onIcChange\", ev.detail.value)}>\n console.log(\"onIcCheck\", ev)} />\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 language: \"Web component\",\n snippet: `\n \n \n`,\n },\n {\n language: \"React\",\n snippet: `\n \n \n`,\n },\n];\n\n\n \n \n \n \n\n\n### Helper text\n\nexport const snippetsHelperText = [\n {\n language: \"Web component\",\n snippet: `\n \n \n`,\n },\n {\n language: \"React\",\n snippet: `\n \n \n`,\n },\n];\n\n\n \n \n \n \n\n\n### Sizes\n\nexport const snippetsSizes = [\n {\n language: \"Web component\",\n snippet: `\n \n \n\n\n \n \n\n\n \n \n`,\n },\n {\n language: \"React\",\n snippet: `\n \n \n\n\n \n \n\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 language: \"Web component\",\n snippet: `\n\n`,\n },\n {\n language: \"React\",\n snippet: `\n\n`,\n },\n];\n\n\n \n \n \n\n\n### Conditional\n\nexport const snippetsConditional = [\n {\n language: \"Web component\",\n snippet: `\n \n \n \n \n \n \n \n \n`,\n },\n {\n language: \"React\",\n snippet: `\n \n \n \n \n \n \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 language: \"Web component\",\n snippet: `\n \n \n \n \n \n \n \n \n`,\n },\n {\n language: \"React\",\n snippet: `\n \n \n \n \n \n \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 language: \"Web component\",\n snippet: `\n \n \n`,\n },\n {\n language: \"React\",\n snippet: `\n \n \n`,\n },\n];\n\n\n \n \n \n \n\n\n### Indeterminate\n\nexport const snippetsIndeterminate = [\n {\n language: \"Web component\",\n snippet: `\n \n \n \n \n \n \n \n \n \n \n \n \n \n`,\n },\n {\n language: \"React\",\n snippet: `\n \n \n \n \n \n \n \n \n \n \n \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-01-18", + "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-09T10:42:41.787Z", - "lastModified": "2024-05-09T10:42:41.787Z", - "size": 15524, - "formattedSize": "15.2 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 language: \"Web component\",\n snippet: `\n \n \n \n\n\n \n \n \n`,\n },\n {\n language: \"React\",\n snippet: ` console.log(ev)}>\n \n \n \n\n\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 language: \"Web component\",\n snippet: `\n \n \n \n`,\n },\n {\n language: \"React\",\n snippet: `\n \n \n \n`,\n },\n];\n\n\n \n \n \n \n \n\n\n### Dismissible\n\nexport const snippetsDismissible = [\n {\n language: \"Web component\",\n snippet: `\n \n \n \n\n`,\n },\n {\n language: \"React\",\n snippet: ` console.log(ev)}>\n \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 language: \"Web component\",\n snippet: `\n \n \n \n\n\n \n \n \n`,\n },\n {\n language: \"React\",\n snippet: `\n \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 { 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-02-28", + "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-09T10:42:41.791Z", - "lastModified": "2024-05-09T10:42:41.791Z", - "size": 8993, - "formattedSize": "8.8 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 language: \"Web component\",\n snippet: `\n\n\n\n`,\n },\n {\n language: \"React\",\n snippet: `\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 language: \"Web component\",\n snippet: ``,\n },\n {\n language: \"React\",\n snippet: ``,\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": "2023-02-03", + "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-09T10:42:41.791Z", - "lastModified": "2024-05-09T10:42:41.791Z", - "size": 2608, - "formattedSize": "2.5 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 language: \"Web component\",\n snippet: `\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 },\n {\n language: \"React\",\n snippet: ` \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 },\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 language: \"Web component\",\n snippet: `\n \n \n \n \n \n \n \n \n \n \n \n VISA ending 5896\n \n \n \n `,\n },\n {\n language: \"React\",\n snippet: `\n \n \n \n \n \n \n \n \n \n \n \n VISA ending 5896\n \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 language: \"Web component\",\n snippet: `\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 {\n language: \"React\",\n snippet: `\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];\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 language: \"Web component\",\n snippet: `\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 },\n {\n language: \"React\",\n snippet: `\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];\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-02-02", + "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-09T10:42:41.795Z", - "lastModified": "2024-05-09T10:42:41.795Z", - "size": 16312, - "formattedSize": "15.9 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 } from \"@ukic/canary-react\";\nimport { 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} from \"./story-data\";\n\n## Component demo\n\nexport const snippetsDefault = [\n {\n language: \"Web components\",\n snippet: `\n`,\n },\n {\n language: \"React\",\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 DataTable = () => (\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 language: \"Web components\",\n snippet: `\n`,\n },\n {\n language: \"React\",\n snippet: ``,\n },\n];\n\n\n \n\n\n### Dense\n\nexport const snippetsDense = [\n {\n language: \"Web components\",\n snippet: `\n`,\n },\n {\n language: \"React\",\n snippet: ``,\n },\n];\n\n\n \n\n\n### Spacious\n\nexport const snippetsSpacious = [\n {\n language: \"Web components\",\n snippet: `\n`,\n },\n {\n language: \"React\",\n snippet: ``,\n },\n];\n\n\n \n\n\n### Sticky column headers\n\nexport const snippetsStickyColumnHeaders = [\n {\n language: \"Web components\",\n snippet: `\n`,\n },\n {\n language: \"React\",\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];\nconst long_data = [\n {\n employeeNumber: 1,\n name: \"Joe Bloggs\",\n age: 30,\n },\n ...\n];\nreturn (\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 language: \"Web components\",\n snippet: `\n`,\n },\n {\n language: \"React\",\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];\nconst data = [\n {\n header: { title: 'Employee' },\n firstName: \"Joe\",\n lastName: \"Bloggs\",\n age: 30,\n },\n ...\n];\nconst DataTable = () => (\n \n);`,\n },\n];\n\n\n \n\n\n### Sortable\n\nexport const snippetsSortable = [\n {\n language: \"Web components\",\n snippet: `\n`,\n },\n {\n language: \"React\",\n snippet: ``,\n },\n];\n\n\n \n\n\n### Sort options\n\nexport const snippetsSortOptions = [\n {\n language: \"Web components\",\n snippet: `\n`,\n },\n {\n language: \"React\",\n snippet: ``,\n },\n];\n\n\n \n\n\n### Pagination\n\nexport const snippetsPagination = [\n {\n language: \"Web components\",\n snippet: `\n`,\n },\n {\n language: \"React\",\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];\nconst long_data = [\n {\n employeeNumber: 1,\n name: \"Joe Bloggs\",\n age: 30,\n },\n ...\n];\nreturn (\n \n);`,\n },\n];\n\n\n \n\n\n### Column overrides\n\nexport const snippetsColumnOverrides = [\n {\n language: \"Web components\",\n snippet: `\n`,\n },\n {\n language: \"React\",\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];\nreturn (\n \n);`,\n },\n];\n\n\n \n\n\n### Row overrides\n\nexport const snippetsRowOverrides = [\n {\n language: \"Web components\",\n snippet: `\n`,\n },\n {\n language: \"React\",\n snippet: `const columns = [\n {\n key: \"header\",\n title: \"Job type\",\n dataType: \"string\",\n },\n {\n key: \"firstName\",\n title: \"First name\",\n dataType: \"string\",\n },\n ...\n];\nconst data = [\n {\n header: {\n title: 'Employee',\n rowAlignment: 'middle',\n emphasis: 'high'\n }\n firstName: \"Joe\",\n lastName: \"Bloggs\",\n age: 30,\n },\n ...\n];\nreturn (\n \n);`,\n },\n];\n\n\n \n\n\n### Cell overrides\n\nexport const snippetsCellOverrides = [\n {\n language: \"Web components\",\n snippet: `\n`,\n },\n {\n language: \"React\",\n snippet: `const data = [\n {\n firstName: {\n data: \"Joe\",\n cellAlignment: { horizontal: \"center\", vertical: \"middle\" },\n emphasis: \"high\",\n },\n lastName: \"Bloggs\",\n age: 30,\n },\n ...\n];\nreturn (\n \n);`,\n },\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-04-30", "title": "Data table", @@ -1750,10 +1750,10 @@ ], "meta": { "relativePath": "components/data-table/code.mdx", - "createdAt": "2024-05-02T13:30:36.276Z", - "lastModified": "2024-05-02T13:30:36.276Z", - "size": 15478, - "formattedSize": "15.1 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-02T13:31:59.722Z", - "lastModified": "2024-05-02T13:31:59.722Z", + "createdAt": "2024-05-13T07:27:37.309Z", + "lastModified": "2024-05-13T07:27:37.309Z", "size": 1724, "formattedSize": "1.7 KB" } @@ -1807,15 +1807,15 @@ ], "meta": { "relativePath": "components/date-input/accessibility.mdx", - "createdAt": "2024-05-02T13:33:01.732Z", - "lastModified": "2024-05-02T13:33:01.732Z", + "createdAt": "2024-05-13T07:27:37.313Z", + "lastModified": "2024-05-13T07:27:37.313Z", "size": 3595, "formattedSize": "3.5 KB" } }, { "id": "components__date-input__codex", - "contents": "\nimport { IcButton } from \"@ukic/react\";\nimport { IcDateInput } from \"@ukic/canary-react\";\n\n## Component demo\n\nexport const snippetsDefault = [\n {\n language: \"Web components\",\n snippet: `\n`,\n },\n {\n language: \"React\",\n snippet: ` console.log(detail.value)}\n/>`,\n },\n];\n\n\n console.log(detail.value)}\n />\n\n\n## Date input details\n\n\n\n## Variants\n\n### With values\n\n#### String\n\nexport const snippetsStringValue = [\n {\n language: \"Web components\",\n snippet: ``,\n },\n {\n language: \"React\",\n snippet: ``,\n },\n];\n\n\n \n\n\n#### Date object\n\nexport const snippetsDateObject = [\n {\n language: \"Web components\",\n snippet: `\n`,\n },\n {\n language: \"React\",\n snippet: ``,\n },\n];\n\n\n \n\n\n#### Zulu datetime\n\nexport const snippetsZulu = [\n {\n language: \"Web components\",\n snippet: `\n`,\n },\n {\n language: \"React\",\n snippet: ``,\n },\n];\n\n\n \n\n\n#### String with hyphens\n\nexport const snippetsHyphens = [\n {\n language: \"Web components\",\n snippet: `\n`,\n },\n {\n language: \"React\",\n snippet: ``,\n },\n];\n\n\n \n\n\n#### Epoch date\n\nexport const snippetsEpoch = [\n {\n language: \"Web components\",\n snippet: `\n`,\n },\n {\n language: \"React\",\n snippet: ``,\n },\n];\n\n\n \n\n\n### Required\n\nexport const snippetsRequired = [\n {\n language: \"Web components\",\n snippet: ``,\n },\n {\n language: \"React\",\n snippet: ``,\n },\n];\n\n\n \n\n\n### Disabled\n\nexport const snippetsDisabled = [\n {\n language: \"Web components\",\n snippet: ``,\n },\n {\n language: \"React\",\n snippet: ``,\n },\n];\n\n\n \n\n\n### Sizes\n\nexport const snippetsSizes = [\n {\n language: \"Web components\",\n snippet: `\n\n`,\n },\n {\n language: \"React\",\n snippet: `\n\n`,\n },\n];\n\n\n \n \n \n\n\n### Custom helper text\n\nexport const snippetsCustomHelperText = [\n {\n language: \"Web components\",\n snippet: ``,\n },\n {\n language: \"React\",\n snippet: ``,\n },\n];\n\n\n \n\n\n### Custom validation\n\nexport const snippetsValidation = [\n {\n language: \"Web components\",\n snippet: `\n\n`,\n },\n {\n language: \"React\",\n snippet: `\n\n`,\n },\n];\n\n\n \n \n \n\n\n### Disabled past dates\n\nexport const snippetsDisabledPastDates = [\n {\n language: \"Web components\",\n snippet: ``,\n },\n {\n language: \"React\",\n snippet: ``,\n },\n];\n\n\n \n\n\n### Disabled future dates\n\nexport const snippetsDisabledFutureDates = [\n {\n language: \"Web components\",\n snippet: ``,\n },\n {\n language: \"React\",\n snippet: ``,\n },\n];\n\n\n \n\n\n### Min and max\n\nexport const snippetsMinMax = [\n {\n language: \"Web components\",\n snippet: ``,\n },\n {\n language: \"React\",\n snippet: ``,\n },\n];\n\n\n \n\n\n### Form\n\nexport const snippetsForm = [\n {\n language: \"Web components\",\n snippet: `
\n \n \n \n \n
`,\n },\n {\n language: \"React\",\n snippet: `const formSubmit = (ev) => {\n ev.preventDefault();\n console.log(ev);\n};\nreturn (\n
\n \n Submit\n Reset\n \n);`,\n },\n];\n\nexport const FormDateInput = () => {\n const formSubmit = (ev) => {\n ev.preventDefault();\n console.log(ev);\n };\n return (\n
\n \n Submit\n Reset\n \n );\n};\n\n\n \n\n", + "contents": "\nimport { IcButton } from \"@ukic/react\";\nimport { IcDateInput } from \"@ukic/canary-react\";\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: ` console.log(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(detail.value)}\n />\n\n\n## Date input details\n\n\n\n## Variants\n\n### With values\n\n#### String\n\nexport const snippetsStringValue = [\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 object\n\nexport const snippetsDateObject = [\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#### Zulu datetime\n\nexport const snippetsZulu = [\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#### String with hyphens\n\nexport const snippetsHyphens = [\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#### Epoch date\n\nexport const snippetsEpoch = [\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### Required\n\nexport const snippetsRequired = [\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 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### Sizes\n\nexport const snippetsSizes = [\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\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 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### Custom helper text\n\nexport const snippetsCustomHelperText = [\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 validation\n\nexport const snippetsValidation = [\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### Disabled past dates\n\nexport const snippetsDisabledPastDates = [\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 future dates\n\nexport const snippetsDisabledFutureDates = [\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### Min and max\n\nexport const snippetsMinMax = [\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### Form\n\nexport const snippetsForm = [\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: `const formSubmit = (ev) => {\n ev.preventDefault();\n console.log(ev);\n};\nreturn (\n
\n \n Submit\n Reset\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 FormDateInput = () => {\n const formSubmit = (ev) => {\n ev.preventDefault();\n console.log(ev);\n };\n return (\n
\n \n Submit\n Reset\n \n );\n};\n\n\n \n\n", "path": "/components/date-input/code", "date": "2024-04-30", "title": "Date input", @@ -1837,18 +1837,18 @@ ], "meta": { "relativePath": "components/date-input/code.mdx", - "createdAt": "2024-05-02T13:33:01.732Z", - "lastModified": "2024-05-02T13:33:01.732Z", - "size": 12425, - "formattedSize": "12.1 KB" + "createdAt": "2024-05-21T09:12:11.367Z", + "lastModified": "2024-05-21T09:12:11.367Z", + "size": 17222, + "formattedSize": "16.8 KB" } }, { "id": "components__date-input__guidancex", - "contents": "\nimport { IcAlert, IcLink } from \"@ukic/react\";\nimport { IcDateInput } from \"@ukic/canary-react\";\nimport fig1 from \"./images/fig-1-do-use-date-input-to-collect-distant-dates.png\";\nimport fig2 from \"./images/fig-2-do-use-seperate-date-input-when-capturing-partial-dates.png\";\nimport fig3 from \"./images/fig-3-with-helper-text.png\";\nimport fig4 from \"./images/fig-4-with-no-helper-text.png\";\nimport fig5 from \"./images/fig-5-adjust-input-size-to-match-other-form-components.png\";\nimport fig6 from \"./images/fig-6-dont-use-mixed-size-components.png\";\nimport fig7 from \"./images/fig-7-short-date-input-width.png\";\nimport fig8 from \"./images/fig-8-matched-date-input-width.png\";\nimport fig9 from \"./images/fig-9-excessive-matched-date-input-width.png\";\nimport fig10 from \"./images/fig-10-success-validation.png\";\nimport fig11 from \"./images/fig-11-error-validation-correct.png\";\nimport fig12 from \"./images/fig-12-error-validation-incorrect.png\";\n\n\n\n## Canary components\n\nCanary components are unstable components that are released for testing purposes.\n\nWe value any feedback from users willing to try them in their applications.\n\nThese components should not be used in production apps without understanding the risk that changes may occur in order to fix bugs or improve functionality.\n\nFor more information on canary components, read our approach to [releases and versions](/get-started/releases-versions).\n\n

\n Additional details on the props and events for this component can be found in\n the ICDS{\" \"}\n \n Canary Web Components\n {\" \"}\n and{\" \"}\n \n Canary React\n {\" \"}\n storybooks.\n

\n\n## Component demo\n\n\n \n\n\n## When to use\n\nUse a date input when asking people for a date they already know or can input without the use of a calendar.\n\nUse a date input to select a past, present or future date. For example, use a date input when asking for a person’s birthday as it may be quicker than navigating through a [date picker](/components/date-picker).\n\n\n \n\n\n## When not to use\n\nDo not use a date input when asking for parts of a date where some elements may not be known. For example, knowing the month and year, but not the day. Instead, consider using three separate fields for date, month, and year, and set all to optional.\n\n\n \n\n\n## Content\n\n### Labels\n\nUse [content styling](/styles/content-style/principles) for help with building effective labels for people using date input.\n\n### Helper text\n\nUse helper text to indicate restrictions in your date input such as not allowing weekends.\n\n\n \n \n\n\n## Date formatting\n\nUse the date input `dateFormat` property to change the default input format between DD/MM/YYYY, MM/DD/YYYY and YYYY/MM/DD. Use differing labels on the helper text and within a date input, when catering for regional input preferences.\n\n## Interaction behaviour\n\nUse the `disablePast` property when using date input to gather information about future dates, such as hotel bookings.\n\nUse the `disableFuture` property when using a date input to gather information about days in the past, such as birthdays.\n\nSet the default date on a date input to help people quickly complete the input by sticking with the default value. For example, set the default date to the next available delivery date when asking for a delivery date preference.\n\nDo not use default date when using date input to collect a date far in the past. For example, do not use “now” as default when asking for date of birth. Instead, use placeholder text of date format until the user selects their input.\n\nUse `html autofocus` to automatically focus a date input when it is the only input on a page.\n\nDo not use `html autofocus` on a date input when it is part of a form with other inputs.\n\nYou can copy and paste a complete date into the date input.\n\n## Sizing\n\nUse the date input size properties to change its vertical size and achieve compact or spacious layouts.\n\n\n \n \n\n\n### Width\n\nEnsure the width of the date input allows enough space for the full length of a person’s potential input.\n\n\n \n \n\n\n\n\n## Validation\n\nUse validation on input fields to tell people when any warning or errors occur within their input. The date input component offers some standard validation scenarios as well as a method for creating custom validation scenarios.\n\nUse the custom validation options to configure your own validation scenarios. For example, if it is required that the input date must be after another specific date then use an error validation message if the input date doesn’t meet the condition.\n\nUse error, warning or success validation messages according to the validation scenario.\n\nUse error messaging when the person can’t proceed without fixing their input, and use a warning message when the input can be used, but may not be expected. For example, when capturing a date of birth, show a warning message if it would indicate the person being unreasonably old, such as with 01/01/1880.\n\n\n \n\n\n\n \n \n\n", + "contents": "\nimport { IcAlert, IcLink } from \"@ukic/react\";\nimport { IcDateInput } from \"@ukic/canary-react\";\nimport fig1 from \"./images/fig-1-do-use-date-input-to-collect-distant-dates.png\";\nimport fig2 from \"./images/fig-2-do-use-seperate-date-input-when-capturing-partial-dates.png\";\nimport fig3 from \"./images/fig-3-with-helper-text.png\";\nimport fig4 from \"./images/fig-4-with-no-helper-text.png\";\nimport fig5 from \"./images/fig-5-adjust-input-size-to-match-other-form-components.png\";\nimport fig6 from \"./images/fig-6-dont-use-mixed-size-components.png\";\nimport fig7 from \"./images/fig-7-short-date-input-width.png\";\nimport fig8 from \"./images/fig-8-matched-date-input-width.png\";\nimport fig9 from \"./images/fig-9-excessive-matched-date-input-width.png\";\nimport fig10 from \"./images/fig-10-success-validation.png\";\nimport fig11 from \"./images/fig-11-error-validation-correct.png\";\n\n\n\n## Canary components\n\nCanary components are unstable components that are released for testing purposes.\n\nWe value any feedback from users willing to try them in their applications.\n\nThese components should not be used in production apps without understanding the risk that changes may occur in order to fix bugs or improve functionality.\n\nFor more information on canary components, read our approach to [releases and versions](/get-started/releases-versions).\n\n

\n Additional details on the props and events for this component can be found in\n the ICDS{\" \"}\n \n Canary Web Components\n {\" \"}\n and{\" \"}\n \n Canary React\n {\" \"}\n storybooks.\n

\n\n## Component demo\n\n\n \n\n\n## When to use\n\nUse a date input when asking people for a date they already know or can input without the use of a calendar.\n\nUse a date input to select a past, present or future date. For example, use a date input when asking for a person’s birthday as it may be quicker than navigating through a [date picker](/components/date-picker).\n\n\n \n\n\n## When not to use\n\nDo not use a date input when asking for parts of a date where some elements may not be known. For example, knowing the month and year, but not the day. Instead, consider using three separate fields for date, month, and year, and set all to optional.\n\n\n \n\n\n## Content\n\n### Labels\n\nUse [content styling](/styles/content-style/principles) for help with building effective labels for people using date input.\n\n### Helper text\n\nUse helper text to provide additional information.\n\n\n \n \n\n\n## Date formatting\n\nUse the date input `dateFormat` property to change the default input format between DD/MM/YYYY, MM/DD/YYYY and YYYY/MM/DD. Use differing labels on the helper text and within a date input, when catering for regional input preferences.\n\n## Interaction behaviour\n\nUse the `disablePast` property when using date input to gather information about future dates, such as hotel bookings.\n\nUse the `disableFuture` property when using a date input to gather information about days in the past, such as birthdays.\n\nSet the default date on a date input to help people quickly complete the input by sticking with the default value. For example, set the default date to the next available delivery date when asking for a delivery date preference.\n\nDo not use default date when using date input to collect a date far in the past. For example, do not use “now” as default when asking for date of birth. Instead, use placeholder text of date format until the user selects their input.\n\nUse `html autofocus` to automatically focus a date input when it is the only input on a page.\n\nDo not use `html autofocus` on a date input when it is part of a form with other inputs.\n\nYou can copy and paste a complete date into the date input.\n\n## Sizing\n\nUse the date input size properties to change its vertical size and achieve compact or spacious layouts.\n\n\n \n \n\n\n### Width\n\nEnsure the width of the date input allows enough space for the full length of a person’s potential input.\n\n\n \n \n\n\n\n\n## Validation\n\nUse validation on input fields to tell people when any warning or errors occur within their input. The date input component offers some standard validation scenarios as well as a method for creating custom validation scenarios.\n\nUse the custom validation options to configure your own validation scenarios. For example, if it is required that the input date must be after another specific date then use an error validation message if the input date doesn’t meet the condition.\n\nUse error, warning or success validation messages according to the validation scenario.\n\nUse error messaging when the person can’t proceed without fixing their input, and use a warning message when the input can be used, but may not be expected. For example, when capturing a date of birth, show a warning message if it would indicate the person being unreasonably old, such as with 01/01/1880.\n\n\n \n \n\n", "path": "/components/date-input", "navPriority": 13, - "date": "2024-04-30", + "date": "2024-05-20", "title": "Date input", "status": "CANARY", "subTitle": "A date input is used when gathering a specific date in a text-based format.", @@ -1868,10 +1868,10 @@ ], "meta": { "relativePath": "components/date-input/guidance.mdx", - "createdAt": "2024-05-02T13:33:29.056Z", - "lastModified": "2024-05-02T13:33:29.056Z", - "size": 8470, - "formattedSize": "8.3 KB" + "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-02T13:32:16.896Z", - "lastModified": "2024-05-02T13:32:16.896Z", + "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 language: \"Web Component\",\n snippet: ``,\n },\n {\n language: \"React\",\n snippet: ``,\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 language: \"Web component\",\n snippet: `\n\n`,\n },\n {\n language: \"React\",\n snippet: `\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 language: \"Web component\",\n snippet: `\n\n`,\n },\n {\n language: \"React\",\n snippet: `\n\n`,\n },\n];\n\n\n \n \n \n \n
\n\n\n### Disabled\n\nexport const disabled = [\n {\n language: \"Web component\",\n snippet: ``,\n },\n {\n language: \"React\",\n snippet: ``,\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 language: \"Web component\",\n snippet: `\n\n`,\n },\n {\n language: \"React\",\n snippet: `\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 language: \"Web component\",\n snippet: ``,\n },\n {\n language: \"React\",\n snippet: ``,\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 language: \"Web component\",\n snippet: ``,\n },\n {\n language: \"React\",\n snippet: ``,\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 language: \"Web component\",\n snippet: ``,\n },\n {\n language: \"React\",\n snippet: ``,\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 language: \"Web component\",\n snippet: `\n`,\n },\n {\n language: \"React\",\n snippet: `const disabledDaysOfWeek = [0, 6 ;`,\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 language: \"Web component\",\n snippet: ``,\n },\n {\n language: \"React\",\n snippet: ``,\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 language: \"Web component\",\n snippet: ``,\n },\n {\n language: \"React\",\n snippet: ``,\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 language: \"Web component\",\n snippet: ``,\n },\n {\n language: \"React\",\n snippet: ``,\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 language: \"Web component\",\n snippet: ``,\n },\n {\n language: \"React\",\n snippet: ``,\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 language: \"Web component\",\n snippet: ``,\n },\n {\n language: \"React\",\n snippet: ``,\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 language: \"Web component\",\n snippet: `\n`,\n },\n {\n language: \"React\",\n snippet: ``,\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 language: \"Web component\",\n snippet: `\n`,\n },\n {\n language: \"React\",\n snippet: `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 },\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-01", "title": "Date picker", @@ -1928,18 +1928,18 @@ ], "meta": { "relativePath": "components/date-picker/code.mdx", - "createdAt": "2024-05-02T13:32:16.896Z", - "lastModified": "2024-05-02T13:32:16.896Z", - "size": 16561, - "formattedSize": "16.2 KB" + "createdAt": "2024-05-21T09:12:11.367Z", + "lastModified": "2024-05-21T09:12:11.367Z", + "size": 21010, + "formattedSize": "20.5 KB" } }, { "id": "components__date-picker__guidancex", - "contents": "\nimport { IcAlert, IcLink } from \"@ukic/react\";\nimport { IcDatePicker } from \"@ukic/canary-react\";\nimport figure1 from \"./images/fig1-use-date-picker-to-visualise-dates.png\";\nimport figure2 from \"./images/fig2-avoid-using-for-distant-dates.png\";\nimport figure3 from \"./images/fig3-custom-width.png\";\nimport figure4 from \"./images/fig4-clear-error-message.png\";\nimport figure5 from \"./images/fig5-unclear-error-message.png\";\n\n\n\n## Canary components\n\nCanary components are unstable components that are released for testing purposes.\n\nWe value any feedback from users willing to try them in their applications.\n\nThese components should not be used in production apps without understanding the risk that changes may occur in order to fix bugs or improve functionality.\n\nFor more information on canary components, read our approach to [releases and versions](/get-started/releases-versions).\n\n

\n Additional details on the props and events for this component can be found in\n the ICDS{\" \"}\n \n Canary Web Components\n {\" \"}\n and{\" \"}\n \n Canary React\n {\" \"}\n storybooks.\n

\n\n## Component demo\n\n\n \n\n\n## When to use\n\nUse a date picker to select an event that is near to the present time.\n\n\n \n\n\nUse a date picker to select a date that is known or desired, such as an appointment.\n\nUse a date picker to select a single date where visualising that date could be useful.\n\nUse a date picker when there is a need to view a date in context. For example, if there is a need to see which day of the week a future event occurs.\n\n## When not to use\n\nAvoid using a date picker for well-known dates, such as dates of birth, because it is often easier to type this into a field. For example, if selecting 30/07/1966, consider using [date input](/components/date-input) as a date picker would require many clicks to arrive at the same date.\n\n\n \n\n\n## Sizing\n\nUse the date picker size properties to change its vertical size and achieve compact or spacious layouts.\n\n### Width\n\nUse the resizing options to increase or decrease width to match other elements in a form.\n\nUse the [date input](/components/date-input) resizing options to change size of the input and calendar between minimum and maximum widths. For example, to create a larger date picker, resize width of [date input](/components/date-input).\n\n\n\n## Content\n\n### Labels\n\nUse [content styling](/styles/content-style/principles) for help with building effective labels for people using date input.\n\n### Helper text\n\nUse helper text to indicate restrictions in your date input such as not allowing weekends.\n\n### Placeholder\n\nUse a placeholder to demonstrate an example of the desired input. Do not add essential information into the placeholder as it will be hidden when a date is entered into the field.\n\n## Interaction\n\nSet `open-at-date` to specify the date in view when the date picker is opened. If no date is set, the date picker will default to showing the current date.\n\nThe [date input](/components/date-input) and the date picker update according to any input made. For example, if 10/10/2100 is entered in the [date input](/components/date-input), the date picker will open to display the selection.\n\n## Validation\n\n### Standard\n\nSee [date input](/components/date-input#validation) for detailed guidance on how to display errors within the date picker.\n\n\n \n \n\n", + "contents": "\nimport { IcAlert, IcLink } from \"@ukic/react\";\nimport { IcDatePicker } from \"@ukic/canary-react\";\nimport figure1 from \"./images/fig1-use-date-picker-to-visualise-dates.png\";\nimport figure2 from \"./images/fig2-avoid-using-for-distant-dates.png\";\nimport figure3 from \"./images/fig3-custom-width.png\";\nimport figure4 from \"./images/fig4-clear-error-message.png\";\n\n\n\n## Canary components\n\nCanary components are unstable components that are released for testing purposes.\n\nWe value any feedback from users willing to try them in their applications.\n\nThese components should not be used in production apps without understanding the risk that changes may occur in order to fix bugs or improve functionality.\n\nFor more information on canary components, read our approach to [releases and versions](/get-started/releases-versions).\n\n

\n Additional details on the props and events for this component can be found in\n the ICDS{\" \"}\n \n Canary Web Components\n {\" \"}\n and{\" \"}\n \n Canary React\n {\" \"}\n storybooks.\n

\n\n## Component demo\n\n\n \n\n\n## When to use\n\nUse a date picker to select an event that is near to the present time.\n\n\n \n\n\nUse a date picker to select a date that is known or desired, such as an appointment.\n\nUse a date picker to select a single date where visualising that date could be useful.\n\nUse a date picker when there is a need to view a date in context. For example, if there is a need to see which day of the week a future event occurs.\n\n## When not to use\n\nAvoid using a date picker for well-known dates, such as dates of birth, because it is often easier to type this into a field. For example, if selecting 30/07/1966, consider using [date input](/components/date-input) as a date picker would require many clicks to arrive at the same date.\n\n\n \n\n\n## Sizing\n\nUse the date picker size properties to change its vertical size and achieve compact or spacious layouts.\n\n### Width\n\nUse the resizing options to increase or decrease width to match other elements in a form.\n\nUse the [date input](/components/date-input) resizing options to change size of the input and calendar between minimum and maximum widths. For example, to create a larger date picker, resize width of [date input](/components/date-input).\n\n\n\n## Content\n\n### Labels\n\nUse [content styling](/styles/content-style/principles) for help with building effective labels for people using date input.\n\n### Helper text\n\nUse helper text to indicate restrictions in your date input such as not allowing weekends.\n\n### Placeholder\n\nUse a placeholder to demonstrate an example of the desired input. Do not add essential information into the placeholder as it will be hidden when a date is entered into the field.\n\n## Interaction\n\nSet `open-at-date` to specify the date in view when the date picker is opened. If no date is set, the date picker will default to showing the current date.\n\nThe [date input](/components/date-input) and the date picker update according to any input made. For example, if 10/10/2100 is entered in the [date input](/components/date-input), the date picker will open to display the selection.\n\n## Validation\n\n### Standard\n\nSee [date input](/components/date-input#validation) for detailed guidance on how to display errors within the date picker.\n\n{\" \"}\n\n\n", "path": "/components/date-picker", "navPriority": 14, - "date": "2024-05-01", + "date": "2024-05-20", "title": "Date picker", "status": "CANARY", "subTitle": "A date picker is a type of drop-down control that allows people to easily view and select dates.", @@ -1959,10 +1959,10 @@ ], "meta": { "relativePath": "components/date-picker/guidance.mdx", - "createdAt": "2024-05-02T13:32:50.080Z", - "lastModified": "2024-05-02T13:32:50.080Z", - "size": 5440, - "formattedSize": "5.3 KB" + "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 language: \"Web component\",\n snippet: `\nLaunch dialog\n\n \n You are about to add 'Americano' to your basket. Are you sure you want to continue?\n \n`,\n },\n {\n language: \"React\",\n snippet: `const [openDialog, setOpenDialog] = useState(false);\nconst handleDialogOpen = () => setOpenDialog(true);\nconst handleDialogClose = () => setOpenDialog(false);\nreturn (\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\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 language: \"Web component\",\n snippet: `\nLaunch sizes dialog\n\n \n You are about to add 'Americano' to your basket. Are you sure you want to continue?\n \n`,\n },\n {\n language: \"React\",\n snippet: `const [openDialog, setOpenDialog] = useState(false);\nconst handleDialogOpen = () => setOpenDialog(true);\nconst handleDialogClose = () => setOpenDialog(false);\nreturn (\n <>\n 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 \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 language: \"Web component\",\n snippet: `\nLaunch 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 },\n {\n language: \"React\",\n snippet: `const [openDialog, setOpenDialog] = useState(false);\nconst handleDialogOpen = () => setOpenDialog(true);\nconst handleDialogClose = () => setOpenlDialog(false);\nreturn (\n <>\n \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 \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 language: \"Web component\",\n snippet: `\n Launch no button dialog\n Launch single button dialog\n Launch three button dialog\n Launch 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 },\n {\n language: \"React\",\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}\nreturn (\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\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 language: \"Web component\",\n snippet: `\nLaunch 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 },\n {\n language: \"React\",\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 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 \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 language: \"Web component\",\n snippet: `\nLaunch dialog\n\n \n Before continuing, please agree to our terms and conditions.\n \n \n \n \n`,\n },\n {\n language: \"React\",\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} \nreturn (\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\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 language: \"Web component\",\n snippet: `\nLaunch dialog\n\n \n You are about to add 'Americano' to your basket. Are you sure you want to continue?\n \n`,\n },\n {\n language: \"React\",\n snippet: `const [openDialog, setOpenDialog] = useState(false);\nconst handleDialogOpen = () => setOpenDialog(true); \nconst handleDialogClose = () => setOpenDialog(false); \nconst handleConfirmDialog = (ev) => { \n alert(\"Confirmed!\");\n setOpenDialog(false);\n};\nreturn (\n <>\n Launch dialog\n \n \n You are about to add 'Americano' to your basket. Are you sure you want to continue?\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 language: \"Web component\",\n snippet: `\nLaunch 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 },\n {\n language: \"React\",\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 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 \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 language: \"Web component\",\n snippet: `\nLaunch 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 },\n {\n language: \"React\",\n snippet: `const [openDialog, setOpenDialog] = useState(false);\nconst handleDialogOpen = () => setOpenDialog(true);\nconst handleDialogClose = () => setOpenDialog(false);\nreturn (\n <>\n 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 \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": "2023-10-26", + "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-09T10:42:41.815Z", - "lastModified": "2024-05-09T10:42:41.815Z", - "size": 41011, - "formattedSize": "40.0 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-02-14T15:16:06.030Z", - "lastModified": "2024-02-14T15:16:06.030Z", + "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 language: \"Web component\",\n snippet: `\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 },\n {\n language: \"React\",\n snippet: `\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 },\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 language: \"Web component\",\n snippet: `\n Go to favourite coffees\n Customer support\n`,\n },\n {\n language: \"React\",\n snippet: `\n Go to favourite coffees\n Customer support\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 language: \"Web component\",\n snippet: `\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n`,\n },\n {\n language: \"React\",\n snippet: `\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n`,\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 language: \"Web component\",\n snippet: `\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n`,\n },\n {\n language: \"React\",\n snippet: `\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n`,\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 language: \"Web component\",\n snippet: `\n \n Warning\n \n \n \n`,\n },\n {\n language: \"React\",\n snippet: `\n \n Warning\n \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 language: \"Web component\",\n snippet: `\n`,\n },\n {\n language: \"React\",\n snippet: ``,\n },\n];\n\n\n \n\n\n### Center aligned\n\nexport const centreSnippets = [\n {\n language: \"Web component\",\n snippet: `\n`,\n },\n {\n language: \"React\",\n snippet: ``,\n },\n];\n\n\n \n\n\n### Max lines\n\nexport const maxLinesSnippets = [\n {\n language: \"Web component\",\n snippet: `\n`,\n },\n {\n language: \"React\",\n snippet: ``,\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": "2023-08-09", + "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,10 +2115,10 @@ ], "meta": { "relativePath": "components/empty-state/code.mdx", - "createdAt": "2024-05-09T10:42:41.819Z", - "lastModified": "2024-05-09T10:42:41.819Z", - "size": 19759, - "formattedSize": "19.3 KB" + "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-02-14T15:16:06.034Z", - "lastModified": "2024-02-14T15:16:06.034Z", + "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 language: \"Web component\",\n snippet: `\n \n Accessibility\n \n \n Styles\n \n \n Components\n \n \n Patterns\n \n`,\n },\n {\n language: \"React\",\n snippet: `\n \n Accessibility\n \n \n Styles\n \n \n Components\n \n \n Patterns\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 language: \"Web component\",\n snippet: `\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 language: \"React\",\n snippet: `\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\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 language: \"Web component\",\n snippet: `\n Accessibility\n Styles\n Components\n Patterns\n
\n \n \n \n \n \n \n \n \n \n \n
\n`,\n },\n {\n language: \"React\",\n snippet: `\n Accessibility\n Styles\n Components\n Patterns\n
\n \n \n \n \n \n \n \n \n \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 language: \"React\",\n snippet: `\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 `,\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 language: \"Web component\",\n snippet: `
\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 },\n {\n language: \"React\",\n snippet: `
\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];\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-02-02", + "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-09T10:42:41.835Z", - "lastModified": "2024-05-09T10:42:41.835Z", - "size": 17352, - "formattedSize": "16.9 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-02-14T15:16:06.042Z", - "lastModified": "2024-02-14T15:16:06.042Z", + "createdAt": "2024-05-13T07:27:37.348Z", + "lastModified": "2024-05-13T07:27:37.348Z", "size": 7784, "formattedSize": "7.6 KB" } @@ -2280,9 +2280,9 @@ }, { "id": "components__hero__codex", - "contents": "\nimport { IcHero, IcButton, IcSearchBar, IcCard } from \"@ukic/react\";\n\n## Component demo\n\nexport const snippets = [\n {\n language: \"Web component\",\n snippet: `\n Explore\n Check out our new drinks\n`,\n },\n {\n language: \"React\",\n snippet: `\n Explore\n Check out our new drinks\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 language: \"Web component\",\n snippet: `\n Explore\n Check out our new drinks\n`,\n },\n {\n language: \"React\",\n snippet: `\n Explore\n Check out our new drinks\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 language: \"Web component\",\n snippet: `\n Explore\n Check out our new drinks\n`,\n },\n {\n language: \"React\",\n snippet: `\n Explore\n Check out our new drinks\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 language: \"Web component\",\n snippet: `\n Order now\n Submit new flavour\n`,\n },\n {\n language: \"React\",\n snippet: `\n Order now\n Submit new flavour\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 language: \"Web component\",\n snippet: `\n \n`,\n },\n {\n language: \"React\",\n snippet: `\n \n`,\n },\n];\n\n\n \n \n \n\n\n### Card right content\n\nexport const snippetsCard = [\n {\n language: \"Web component\",\n snippet: `\n Explore\n Check out our new drinks\n \n \n`,\n },\n {\n language: \"React\",\n snippet: `\n Explore\n Check out our new drinks\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 language: \"Web component\",\n snippet: `\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 },\n {\n language: \"React\",\n snippet: `\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 },\n];\n\n\n \n \n Explore\n \n \n Check out our new drinks\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n", + "contents": "\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": "2023-10-25", + "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,10 +2303,10 @@ ], "meta": { "relativePath": "components/hero/code.mdx", - "createdAt": "2024-05-09T10:42:41.843Z", - "lastModified": "2024-05-09T10:42:41.843Z", - "size": 12993, - "formattedSize": "12.7 KB" + "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-02-14T15:16:06.050Z", - "lastModified": "2024-02-14T15:16:06.050Z", + "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 language: \"Web component\",\n snippet: `About our coffees`,\n },\n {\n language: \"React\",\n snippet: `About our coffees`,\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 language: \"Web component\",\n snippet: `About our coffees`,\n },\n {\n language: \"React\",\n snippet: `About our coffees`,\n },\n];\n\n\n \n About our coffees\n \n\n\n### Light and dark\n\nexport const snippetsLightDark = [\n {\n language: \"Web component\",\n snippet: `About our coffees\nAbout our coffees`,\n },\n {\n language: \"React\",\n snippet: `About our coffees\nAbout our coffees`,\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 language: \"React\",\n snippet: `\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 `,\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": "2023-07-27", + "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-09T10:42:41.843Z", - "lastModified": "2024-05-09T10:42:41.843Z", - "size": 3608, - "formattedSize": "3.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-02-14T15:16:06.058Z", - "lastModified": "2024-02-14T15:16:06.058Z", + "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 language: \"Web component\",\n snippet: `\n`,\n },\n {\n language: \"React\",\n snippet: `\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 language: \"Web component\",\n snippet: `\n\n\n`,\n },\n {\n language: \"React\",\n snippet: `\n\n\n`,\n },\n];\n\n\n \n \n \n \n\n\n### Icon\n\nexport const snippetsIcon = [\n {\n language: \"Web component\",\n snippet: ``,\n },\n {\n language: \"React\",\n snippet: ``,\n },\n];\n\n\n \n\n\n### Determinate\n\nexport const snippetsDeterminate = [\n {\n language: \"Web component\",\n snippet: `\n`,\n },\n {\n language: \"React\",\n snippet: `\n`,\n },\n];\n\n\n \n \n\n\n### Light\n\nexport const snippetsLight = [\n {\n language: \"Web component\",\n snippet: `\n`,\n },\n {\n language: \"React\",\n snippet: `\n`,\n },\n];\n\n\n \n \n\n\n### Changing label\n\nexport const snippetsChangingLabel = [\n {\n language: \"Web component\",\n snippet: ``,\n },\n {\n language: \"React\",\n snippet: ``,\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": "2023-02-03", + "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-09T10:42:41.843Z", - "lastModified": "2024-05-09T10:42:41.843Z", - "size": 5056, - "formattedSize": "4.9 KB" + "createdAt": "2024-05-21T09:12:11.375Z", + "lastModified": "2024-05-21T09:12:11.375Z", + "size": 7834, + "formattedSize": "7.7 KB" } }, { @@ -2539,15 +2539,15 @@ ], "meta": { "relativePath": "components/loading-indicators/guidance.mdx", - "createdAt": "2024-02-14T15:16:06.062Z", - "lastModified": "2024-02-14T15:16:06.062Z", + "createdAt": "2024-05-13T07:27:37.360Z", + "lastModified": "2024-05-13T07:27:37.360Z", "size": 6945, "formattedSize": "6.8 KB" } }, { "id": "components__multi-select__codex", - "contents": "\nimport { IcSelectWithMulti } from \"@ukic/canary-react\";\n\nimport {\n OPTIONS,\n OPTIONS_WITH_DESCRIPTIONS,\n OPTIONS_WITH_DISABLED,\n GROUPED_OPTIONS,\n OPTIONS_WITH_RECOMMENDED,\n} from \"./story-data\";\n\n## Component demo\n\nexport const snippets = [\n {\n language: \"Web component\",\n snippet: `\n`,\n },\n {\n language: \"React\",\n snippet: ` console.log(event.detail.value)}\nonIcOptionSelect={(event) => console.log(event.detail.value)}\nonIcOptionDeselect={(event) => console.log(event.detail.value)}\n/>`,\n },\n];\n\n\n \n\n\n## Select with multi details\n\n\n\n## Variants\n\n### Default value\n\nShow options as pre-selected by setting the `value` prop to an array containing the values of these options.\n\nexport const defaultValue = [\n {\n language: \"Web component\",\n snippet: `\n>`,\n },\n {\n language: \"React\",\n snippet: ` console.log(event.detail.value)}\nonIcOptionSelect={(event) => console.log(event.detail.value)}\nonIcOptionDeselect={(event) => console.log(event.detail.value)}\n/>`,\n },\n];\n\n\n \n\n\n### With clear button\n\nDisplay a clear button by using the `showClearButton` prop.\n\nThis will appear when the user has selected some options and allow them to easily clear their selection.\n\nexport const clear = [\n {\n language: \"Web component\",\n snippet: `\n`,\n },\n {\n language: \"React\",\n snippet: ` console.log(event.detail.value)}\nonIcOptionSelect={(event) => console.log(event.detail.value)}\nonIcOptionDeselect={(event) => console.log(event.detail.value)}\n/>`,\n },\n];\n\n\n \n\n\n### With descriptions\n\nDisplay extra information about the options by providing a description using the `description` property for each option.\n\nexport const desc = [\n {\n language: \"Web component\",\n snippet: `\n`,\n },\n {\n language: \"React\",\n snippet: ` console.log(event.detail.value)}\nonIcOptionSelect={(event) => console.log(event.detail.value)}\nonIcOptionDeselect={(event) => console.log(event.detail.value)}\n/>`,\n },\n];\n\n\n \n\n\n### Helper text\n\nDisplay helper text to provide additional information by using the `helperText` prop.\n\nexport const helper = [\n {\n language: \"Web component\",\n snippet: `\n`,\n },\n {\n language: \"React\",\n snippet: ` console.log(event.detail.value)}\nonIcOptionSelect={(event) => console.log(event.detail.value)}\nonIcOptionDeselect={(event) => console.log(event.detail.value)}\n/>`,\n },\n];\n\n\n \n\n\n### Sizes\n\nSet the size of the multi-select by using the `size` prop. This prop takes the values `small`, `default` or `large`.\nDepending on the chosen size, the prop will apply styling to increase or decrease the amount of spacing within the component.\nThe `default` variant is seen in the first [default](#default) example.\n\nexport const sizes = [\n {\n language: \"Web component\",\n snippet: `\n\n\n`,\n },\n {\n language: \"React\",\n snippet: `const OPTIONS = [\n { label: \"Cappuccino\", value: \"Cap\" },\n { label: \"Latte\", value: \"Lat\" },\n { label: \"Americano\", value: \"Ame\" },\n { label: \"Filter\", value: \"Fil\" },\n { label: \"Flat white\", value: \"Fla\" },\n { label: \"Mocha\", value: \"Moc\" },\n { label: \"Macchiato\", value: \"Mac\" },\n]\n\n\n`,\n },\n];\n\n\n
\n \n \n \n
\n\n\n### Disabled\n\nDisable the multi-select and prevent user interaction by using the `disabled` prop.\n\nexport const disabled = [\n {\n language: \"Web component\",\n snippet: ``,\n },\n {\n language: \"React\",\n snippet: ``,\n },\n];\n\n\n
\n \n
\n\n\n### Disabled options\n\nDisable certain options by setting the `disabled` property to `true` for each option.\n\nexport const disabledOptions = [\n {\n language: \"Web component\",\n snippet: `\n`,\n },\n {\n language: \"React\",\n snippet: ` console.log(event.detail.value)}\nonIcOptionSelect={(event) => console.log(event.detail.value)}\nonIcOptionDeselect={(event) => console.log(event.detail.value)}\n/>`,\n },\n];\n\n\n
\n \n
\n\n\n### Hide label\n\nHide the visible label for the multi-select by using the `hideLabel` prop.\n\nexport const hideLabel = [\n {\n language: \"Web component\",\n snippet: `\n`,\n },\n {\n language: \"React\",\n snippet: ``,\n },\n];\n\n\n
\n \n
\n\n\n### Required\n\nInform the user that the multi-select is a required field by using the `required` prop.\nThis will display an asterisk next to the label and apply the `aria-required` attribute.\n\nexport const required = [\n {\n language: \"Web component\",\n snippet: `\n`,\n },\n {\n language: \"React\",\n snippet: ``,\n },\n];\n\n\n
\n \n
\n\n\n### Read-only\n\nMake the multi-select read-only by using the `readonly` prop.\nUse the `value` prop to set which options are selected and will be displayed when it is read-only.\n\nexport const read = [\n {\n language: \"Web component\",\n snippet: `\n`,\n },\n {\n language: \"React\",\n snippet: ``,\n },\n];\n\n\n
\n \n
\n\n\n### Groups\n\nDisplay options in groups by passing an array of child options to the `children` property of a parent option.\nThe parent option will be rendered as the title of the group.\n\nexport const group = [\n {\n language: \"Web component\",\n snippet: `\n`,\n },\n {\n language: \"React\",\n snippet: ``,\n },\n];\n\n\n
\n \n
\n\n\n### Recommended\n\nDisplay certain options at the top of the option list by setting the `recommended` property to `true` on each option.\nThis will allow for quick access to these options.\n\nexport const recc = [\n {\n language: \"Web component\",\n snippet: `\n`,\n },\n {\n language: \"React\",\n snippet: ``,\n },\n];\n\n\n
\n \n
\n\n\n### Validation\n\nDisplay a validation status and message by using the `validation-status` and `validation-message` props.\nThe `validation-status` prop takes the values `success`, `warning` or `error`.\n\nexport const validation = [\n {\n language: \"Web component\",\n snippet: `\n`,\n },\n {\n language: \"React\",\n snippet: ``,\n },\n];\n\n\n
\n \n
\n\n\n### Loading with error\n\nDisplay the loading state by using the `loading` prop.\nThe multi-select will show a loading error after the amount of time specified using the `timeout` prop has elapsed.\n\nexport const loading = [\n {\n language: \"Web component\",\n snippet: `\n`,\n },\n {\n language: \"React\",\n snippet: ``,\n },\n];\n\n\n
\n \n
\n\n", + "contents": "\nimport { IcSelectWithMulti } from \"@ukic/canary-react\";\n\nimport {\n OPTIONS,\n OPTIONS_WITH_DESCRIPTIONS,\n OPTIONS_WITH_DISABLED,\n GROUPED_OPTIONS,\n OPTIONS_WITH_RECOMMENDED,\n} from \"./story-data\";\n\n## Component demo\n\nexport const snippets = [\n {\n technology: \"Web component\",\n snippets: {\n short: ``,\n long: `.parent-container {\n padding: 16px;\n }\n\n\n
\n {shortCode}\n
\n `,\n },\n },\n {\n technology: \"React\",\n snippets: {\n short: ` console.log(event.detail.value)}\n onIcOptionSelect={(event) => console.log(event.detail.value)}\n onIcOptionDeselect={(event) => console.log(event.detail.value)}\n multiple\n/>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n padding: \"16px\",\n },\n});\nconst classes = useStyles();\nconst options = [\n { label: \"Cappuccino\", value: \"Cap\" },\n { label: \"Latte\", value: \"Lat\" },\n { label: \"Americano\", value: \"Ame\" },\n { label: \"Filter\", value: \"Fil\" },\n { label: \"Flat white\", value: \"Fla\" },\n { label: \"Mocha\", value: \"Moc\" },\n { label: \"Macchiato\", value: \"Mac\" },\n];\nreturn ( \n
\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## Select with multi details\n\n\n\n## Variants\n\n### Default value\n\nShow options as pre-selected by setting the `value` prop to an array containing the values of these options.\n\nexport const defaultValue = [\n {\n technology: \"Web component\",\n snippets: {\n short: ``,\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(event.detail.value)}\n onIcOptionSelect={(event) => console.log(event.detail.value)}\n onIcOptionDeselect={(event) => console.log(event.detail.value)}\n multiple\n/>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n padding: \"16px\",\n },\n});\nconst classes = useStyles();\nconst options = [\n { label: \"Cappuccino\", value: \"Cap\" },\n { label: \"Latte\", value: \"Lat\" },\n { label: \"Americano\", value: \"Ame\" },\n { label: \"Filter\", value: \"Fil\" },\n { label: \"Flat white\", value: \"Fla\" },\n { label: \"Mocha\", value: \"Moc\" },\n { label: \"Macchiato\", value: \"Mac\" },\n];\nreturn ( \n
\n {shortCode}\n
\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n padding: \"16px\",\n },\n});\nconst classes = useStyles();\nconst options = [\n { label: \"Cappuccino\", value: \"Cap\" },\n { label: \"Latte\", value: \"Lat\" },\n { label: \"Americano\", value: \"Ame\" },\n { label: \"Filter\", value: \"Fil\" },\n { label: \"Flat white\", value: \"Fla\" },\n { label: \"Mocha\", value: \"Moc\" },\n { label: \"Macchiato\", value: \"Mac\" },\n];\nreturn ( \n
\n {shortCode}\n
\n)`,\n },\n ],\n },\n },\n];\n\n\n \n\n\n### With clear button\n\nDisplay a clear button by using the `showClearButton` prop.\n\nThis will appear when the user has selected some options and allow them to easily clear their selection.\n\nexport const clear = [\n {\n technology: \"Web component\",\n snippets: {\n short: ``,\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(event.detail.value)}\n onIcOptionSelect={(event) => console.log(event.detail.value)}\n onIcOptionDeselect={(event) => console.log(event.detail.value)}\n multiple\n showClearButton\n/>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n padding: \"16px\",\n },\n});\nconst classes = useStyles();\nconst options = [\n { label: \"Cappuccino\", value: \"Cap\" },\n { label: \"Latte\", value: \"Lat\" },\n { label: \"Americano\", value: \"Ame\" },\n { label: \"Filter\", value: \"Fil\" },\n { label: \"Flat white\", value: \"Fla\" },\n { label: \"Mocha\", value: \"Moc\" },\n { label: \"Macchiato\", value: \"Mac\" },\n];\nreturn ( \n
\n {shortCode}\n
\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n padding: \"16px\",\n },\n});\nconst classes = useStyles();\nconst options = [\n { label: \"Cappuccino\", value: \"Cap\" },\n { label: \"Latte\", value: \"Lat\" },\n { label: \"Americano\", value: \"Ame\" },\n { label: \"Filter\", value: \"Fil\" },\n { label: \"Flat white\", value: \"Fla\" },\n { label: \"Mocha\", value: \"Moc\" },\n { label: \"Macchiato\", value: \"Mac\" },\n];\nreturn ( \n
\n {shortCode}\n
\n)`,\n },\n ],\n },\n },\n];\n\n\n \n\n\n### With descriptions\n\nDisplay extra information about the options by providing a description using the `description` property for each option.\n\nexport const desc = [\n {\n technology: \"Web component\",\n snippets: {\n short: ``,\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(event.detail.value)}\n onIcOptionSelect={(event) => console.log(event.detail.value)}\n onIcOptionDeselect={(event) => console.log(event.detail.value)}\n multiple\n/>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n padding: \"16px\",\n },\n});\nconst classes = useStyles();\nconst options = [\n {\n label: \"Cappuccino\",\n value: \"Cap\",\n description: \"Coffee frothed up with pressurised steam\",\n },\n {\n label: \"Latte\",\n value: \"Lat\",\n description: \"A milkier coffee than a cappuccino\",\n },\n {\n label: \"Americano\",\n value: \"Ame\",\n description: \"Espresso coffee diluted with hot water\",\n },\n {\n label: \"Filter\",\n value: \"Fil\",\n description: \"Coffee filtered using paper or a mesh\",\n },\n {\n label: \"Flat white\",\n value: \"Fla\",\n description:\n \"Coffee without froth made with espresso and hot steamed milk\",\n },\n {\n label: \"Mocha\",\n value: \"Moc\",\n description: \"A mixture of coffee and chocolate\",\n },\n {\n label: \"Macchiato\",\n value: \"Mac\",\n description: \"Espresso coffee with a dash of frothy steamed milk\",\n },\n];\nreturn ( \n
\n {shortCode}\n
\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n padding: \"16px\",\n },\n});\nconst classes = useStyles();\nconst options = [\n {\n label: \"Cappuccino\",\n value: \"Cap\",\n description: \"Coffee frothed up with pressurised steam\",\n },\n {\n label: \"Latte\",\n value: \"Lat\",\n description: \"A milkier coffee than a cappuccino\",\n },\n {\n label: \"Americano\",\n value: \"Ame\",\n description: \"Espresso coffee diluted with hot water\",\n },\n {\n label: \"Filter\",\n value: \"Fil\",\n description: \"Coffee filtered using paper or a mesh\",\n },\n {\n label: \"Flat white\",\n value: \"Fla\",\n description:\n \"Coffee without froth made with espresso and hot steamed milk\",\n },\n {\n label: \"Mocha\",\n value: \"Moc\",\n description: \"A mixture of coffee and chocolate\",\n },\n {\n label: \"Macchiato\",\n value: \"Mac\",\n description: \"Espresso coffee with a dash of frothy steamed milk\",\n },\n];\nreturn ( \n
\n {shortCode}\n
\n)`,\n },\n ],\n },\n },\n];\n\n\n \n\n\n### Helper text\n\nDisplay helper text to provide additional information by using the `helperText` prop.\n\nexport const helper = [\n {\n technology: \"Web component\",\n snippets: {\n short: ``,\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(event.detail.value)}\n onIcOptionSelect={(event) => console.log(event.detail.value)}\n onIcOptionDeselect={(event) => console.log(event.detail.value)}\n multiple\n/>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n padding: \"16px\",\n },\n});\nconst classes = useStyles();\nconst options = [\n { label: \"Cappuccino\", value: \"Cap\" },\n { label: \"Latte\", value: \"Lat\" },\n { label: \"Americano\", value: \"Ame\" },\n { label: \"Filter\", value: \"Fil\" },\n { label: \"Flat white\", value: \"Fla\" },\n { label: \"Mocha\", value: \"Moc\" },\n { label: \"Macchiato\", value: \"Mac\" },\n];\nreturn ( \n
\n {shortCode}\n
\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n padding: \"16px\",\n },\n});\nconst classes = useStyles();\nconst options = [\n { label: \"Cappuccino\", value: \"Cap\" },\n { label: \"Latte\", value: \"Lat\" },\n { label: \"Americano\", value: \"Ame\" },\n { label: \"Filter\", value: \"Fil\" },\n { label: \"Flat white\", value: \"Fla\" },\n { label: \"Mocha\", value: \"Moc\" },\n { label: \"Macchiato\", value: \"Mac\" },\n];\nreturn ( \n
\n {shortCode}\n
\n)`,\n },\n ],\n },\n },\n];\n\n\n \n\n\n### Sizes\n\nSet the size of the multi-select by using the `size` prop. This prop takes the values `small`, `default` or `large`.\nDepending on the chosen size, the prop will apply styling to increase or decrease the amount of spacing within the component.\nThe `default` variant is seen in the first [default](#default) example.\n\nexport const sizes = [\n {\n technology: \"Web component\",\n snippets: {\n short: `\n\n`,\n long: `.parent-container {\n display: flex;\n flex-direction: column;\n gap: 16px;\n padding: 16px;\n }\n\n\n
\n {shortCode}\n
\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();\nconst options = [\n { label: \"Cappuccino\", value: \"Cap\" },\n { label: \"Latte\", value: \"Lat\" },\n { label: \"Americano\", value: \"Ame\" },\n { label: \"Filter\", value: \"Fil\" },\n { label: \"Flat white\", value: \"Fla\" },\n { label: \"Mocha\", value: \"Moc\" },\n { label: \"Macchiato\", value: \"Mac\" },\n];\nreturn ( \n
\n {shortCode}\n
\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n display: \"flex\",\n flexDirection: \"column\",\n padding: \"16px\",\n },\n});\nconst classes = useStyles();\nconst options = [\n { label: \"Cappuccino\", value: \"Cap\" },\n { label: \"Latte\", value: \"Lat\" },\n { label: \"Americano\", value: \"Ame\" },\n { label: \"Filter\", value: \"Fil\" },\n { label: \"Flat white\", value: \"Fla\" },\n { label: \"Mocha\", value: \"Moc\" },\n { label: \"Macchiato\", value: \"Mac\" },\n];\nreturn ( \n
\n {shortCode}\n
\n)`,\n },\n ],\n },\n },\n];\n\n\n
\n \n \n \n
\n\n\n### Disabled\n\nDisable the multi-select and prevent user interaction by using the `disabled` prop.\n\nexport const disabled = [\n {\n technology: \"Web component\",\n snippets: {\n short: ``,\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();\nconst options = [\n { label: \"Cappuccino\", value: \"Cap\" },\n { label: \"Latte\", value: \"Lat\" },\n { label: \"Americano\", value: \"Ame\" },\n { label: \"Filter\", value: \"Fil\" },\n { label: \"Flat white\", value: \"Fla\" },\n { label: \"Mocha\", value: \"Moc\" },\n { label: \"Macchiato\", value: \"Mac\" },\n];\nreturn ( \n
\n {shortCode}\n
\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n padding: \"16px\",\n },\n});\nconst classes = useStyles();\nconst options = [\n { label: \"Cappuccino\", value: \"Cap\" },\n { label: \"Latte\", value: \"Lat\" },\n { label: \"Americano\", value: \"Ame\" },\n { label: \"Filter\", value: \"Fil\" },\n { label: \"Flat white\", value: \"Fla\" },\n { label: \"Mocha\", value: \"Moc\" },\n { label: \"Macchiato\", value: \"Mac\" },\n];\nreturn ( \n
\n {shortCode}\n
\n)`,\n },\n ],\n },\n },\n];\n\n\n
\n \n
\n\n\n### Disabled options\n\nDisable certain options by setting the `disabled` property to `true` for each option.\n\nexport const disabledOptions = [\n {\n technology: \"Web component\",\n snippets: {\n short: ``,\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(event.detail.value)}\n onIcOptionSelect={(event) => console.log(event.detail.value)}\n onIcOptionDeselect={(event) => console.log(event.detail.value)}\n multiple\n/>`,\n long: [\n {\n language: \"Typescript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n padding: \"16px\",\n },\n});\nconst classes = useStyles();\nconst options = [\n { label: \"Cappuccino\", value: \"Cap\" },\n { label: \"Latte\", value: \"Lat\", disabled: true },\n { label: \"Americano\", value: \"Ame\" },\n { label: \"Filter\", value: \"Fil\", disabled: true },\n { label: \"Flat white\", value: \"Fla\", disabled: true },\n { label: \"Mocha\", value: \"Moc\" },\n { label: \"Macchiato\", value: \"Mac\" },\n];\nreturn ( \n
\n {shortCode}\n
\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n padding: \"16px\",\n },\n});\nconst classes = useStyles();\nconst options = [\n { label: \"Cappuccino\", value: \"Cap\" },\n { label: \"Latte\", value: \"Lat\", disabled: true },\n { label: \"Americano\", value: \"Ame\" },\n { label: \"Filter\", value: \"Fil\", disabled: true },\n { label: \"Flat white\", value: \"Fla\", disabled: true },\n { label: \"Mocha\", value: \"Moc\" },\n { label: \"Macchiato\", value: \"Mac\" },\n];\nreturn ( \n
\n {shortCode}\n
\n)`,\n },\n ],\n },\n },\n];\n\n\n
\n \n
\n\n\n### Hide label\n\nHide the visible label for the multi-select by using the `hideLabel` prop.\n\nexport const hideLabel = [\n {\n technology: \"Web component\",\n snippets: {\n short: ``,\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();\nconst options = [\n { label: \"Cappuccino\", value: \"Cap\" },\n { label: \"Latte\", value: \"Lat\" },\n { label: \"Americano\", value: \"Ame\" },\n { label: \"Filter\", value: \"Fil\" },\n { label: \"Flat white\", value: \"Fla\" },\n { label: \"Mocha\", value: \"Moc\" },\n { label: \"Macchiato\", value: \"Mac\" },\n];\nreturn ( \n
\n {shortCode}\n
\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n padding: \"16px\",\n },\n});\nconst classes = useStyles();\nconst options = [\n { label: \"Cappuccino\", value: \"Cap\" },\n { label: \"Latte\", value: \"Lat\" },\n { label: \"Americano\", value: \"Ame\" },\n { label: \"Filter\", value: \"Fil\" },\n { label: \"Flat white\", value: \"Fla\" },\n { label: \"Mocha\", value: \"Moc\" },\n { label: \"Macchiato\", value: \"Mac\" },\n];\nreturn (\n
\n {shortCode}\n
\n)`,\n },\n ],\n },\n },\n];\n\n\n
\n \n
\n\n\n### Required\n\nInform the user that the multi-select is a required field by using the `required` prop.\nThis will display an asterisk next to the label and apply the `aria-required` attribute.\n\nexport const required = [\n {\n technology: \"Web component\",\n snippets: {\n short: ``,\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();\nconst options = [\n { label: \"Cappuccino\", value: \"Cap\" },\n { label: \"Latte\", value: \"Lat\" },\n { label: \"Americano\", value: \"Ame\" },\n { label: \"Filter\", value: \"Fil\" },\n { label: \"Flat white\", value: \"Fla\" },\n { label: \"Mocha\", value: \"Moc\" },\n { label: \"Macchiato\", value: \"Mac\" },\n];\nreturn ( \n
\n {shortCode}\n
\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n padding: \"16px\",\n },\n});\nconst classes = useStyles();\nconst options = [\n { label: \"Cappuccino\", value: \"Cap\" },\n { label: \"Latte\", value: \"Lat\" },\n { label: \"Americano\", value: \"Ame\" },\n { label: \"Filter\", value: \"Fil\" },\n { label: \"Flat white\", value: \"Fla\" },\n { label: \"Mocha\", value: \"Moc\" },\n { label: \"Macchiato\", value: \"Mac\" },\n];\nreturn ( \n
\n {shortCode}\n
\n)`,\n },\n ],\n },\n },\n];\n\n\n
\n \n
\n\n\n### Read-only\n\nMake the multi-select read-only by using the `readonly` prop.\nUse the `value` prop to set which options are selected and will be displayed when it is read-only.\n\nexport const read = [\n {\n technology: \"Web component\",\n snippets: {\n short: ``,\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();\nconst options = [\n { label: \"Cappuccino\", value: \"Cap\" },\n { label: \"Latte\", value: \"Lat\" },\n { label: \"Americano\", value: \"Ame\" },\n { label: \"Filter\", value: \"Fil\" },\n { label: \"Flat white\", value: \"Fla\" },\n { label: \"Mocha\", value: \"Moc\" },\n { label: \"Macchiato\", value: \"Mac\" },\n];\nreturn ( \n
\n {shortCode}\n
\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n padding: \"16px\",\n },\n});\nconst classes = useStyles();\nconst options = [\n { label: \"Cappuccino\", value: \"Cap\" },\n { label: \"Latte\", value: \"Lat\" },\n { label: \"Americano\", value: \"Ame\" },\n { label: \"Filter\", value: \"Fil\" },\n { label: \"Flat white\", value: \"Fla\" },\n { label: \"Mocha\", value: \"Moc\" },\n { label: \"Macchiato\", value: \"Mac\" },\n];\nreturn ( \n
\n {shortCode}\n
\n)`,\n },\n ],\n },\n },\n];\n\n\n
\n \n
\n\n\n### Groups\n\nDisplay options in groups by passing an array of child options to the `children` property of a parent option.\nThe parent option will be rendered as the title of the group.\n\nexport const group = [\n {\n technology: \"Web component\",\n snippets: {\n short: ``,\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();\nconst options = [\n {\n label: \"Fancy\",\n children: [\n { label: \"Cappuccino\", value: \"Cap\" },\n { label: \"Flat white\", value: \"Flat\" },\n ],\n },\n {\n label: \"Boring\",\n children: [\n { label: \"Filter\", value: \"Fil\" },\n { label: \"Latte\", value: \"Lat\" },\n ],\n },\n];\nreturn ( \n
\n {shortCode}\n
\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n padding: \"16px\",\n },\n});\nconst classes = useStyles();\nconst options = [\n {\n label: \"Fancy\",\n children: [\n { label: \"Cappuccino\", value: \"Cap\" },\n { label: \"Flat white\", value: \"Flat\" },\n ],\n },\n {\n label: \"Boring\",\n children: [\n { label: \"Filter\", value: \"Fil\" },\n { label: \"Latte\", value: \"Lat\" },\n ],\n },\n];\nreturn ( \n
\n {shortCode}\n
\n)`,\n },\n ],\n },\n },\n];\n\n\n
\n \n
\n\n\n### Recommended\n\nDisplay certain options at the top of the option list by setting the `recommended` property to `true` on each option.\nThis will allow for quick access to these options.\n\nexport const recc = [\n {\n technology: \"Web component\",\n snippets: {\n short: ``,\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();\nconst options = [\n { label: \"Cappuccino\", value: \"Cap\" },\n { label: \"Latte\", value: \"Lat\" },\n { label: \"Americano\", value: \"Ame\", recommended: true },\n { label: \"Filter\", value: \"Fil\" },\n { label: \"Flat white\", value: \"Fla\", recommended: true },\n { label: \"Mocha\", value: \"Moc\" },\n { label: \"Macchiato\", value: \"Mac\" },\n];\nreturn ( \n
\n {shortCode}\n
\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n padding: \"16px\",\n },\n});\nconst classes = useStyles();\nconst options = [\n { label: \"Cappuccino\", value: \"Cap\" },\n { label: \"Latte\", value: \"Lat\" },\n { label: \"Americano\", value: \"Ame\", recommended: true },\n { label: \"Filter\", value: \"Fil\" },\n { label: \"Flat white\", value: \"Fla\", recommended: true },\n { label: \"Mocha\", value: \"Moc\" },\n { label: \"Macchiato\", value: \"Mac\" },\n];\nreturn ( \n
\n {shortCode}\n
\n)`,\n },\n ],\n },\n },\n];\n\n\n
\n \n
\n\n\n### Validation\n\nDisplay a validation status and message by using the `validation-status` and `validation-message` props.\nThe `validation-status` prop takes the values `success`, `warning` or `error`.\n\nexport const validation = [\n {\n technology: \"Web component\",\n snippets: {\n short: ` `,\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();\nconst options = [\n { label: \"Cappuccino\", value: \"Cap\" },\n { label: \"Latte\", value: \"Lat\" },\n { label: \"Americano\", value: \"Ame\" },\n { label: \"Filter\", value: \"Fil\" },\n { label: \"Flat white\", value: \"Fla\" },\n { label: \"Mocha\", value: \"Moc\" },\n { label: \"Macchiato\", value: \"Mac\" },\n];\nreturn ( \n
\n {shortCode}\n
\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n padding: \"16px\",\n },\n});\nconst classes = useStyles();\nconst options = [\n { label: \"Cappuccino\", value: \"Cap\" },\n { label: \"Latte\", value: \"Lat\" },\n { label: \"Americano\", value: \"Ame\" },\n { label: \"Filter\", value: \"Fil\" },\n { label: \"Flat white\", value: \"Fla\" },\n { label: \"Mocha\", value: \"Moc\" },\n { label: \"Macchiato\", value: \"Mac\" },\n];\nreturn ( \n
\n {shortCode}\n
\n)`,\n },\n ],\n },\n },\n];\n\n\n
\n \n
\n\n\n### Loading with error\n\nDisplay the loading state by using the `loading` prop.\nThe multi-select will show a loading error after the amount of time specified using the `timeout` prop has elapsed.\n\nexport const loading = [\n {\n technology: \"Web component\",\n snippets: {\n short: ``,\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();\nconst options = [\n { label: \"Cappuccino\", value: \"Cap\" },\n { label: \"Latte\", value: \"Lat\" },\n { label: \"Americano\", value: \"Ame\" },\n { label: \"Filter\", value: \"Fil\" },\n { label: \"Flat white\", value: \"Fla\" },\n { label: \"Mocha\", value: \"Moc\" },\n { label: \"Macchiato\", value: \"Mac\" },\n];\nreturn ( \n
\n {shortCode}\n
\n)`,\n },\n {\n language: \"Javascript\",\n snippet: `const useStyles = createUseStyles({\n parentContainer: {\n padding: \"16px\",\n },\n});\nconst classes = useStyles();\nconst options = [\n { label: \"Cappuccino\", value: \"Cap\" },\n { label: \"Latte\", value: \"Lat\" },\n { label: \"Americano\", value: \"Ame\" },\n { label: \"Filter\", value: \"Fil\" },\n { label: \"Flat white\", value: \"Fla\" },\n { label: \"Mocha\", value: \"Moc\" },\n { label: \"Macchiato\", value: \"Mac\" },\n];\nreturn ( \n
\n {shortCode}\n
\n)`,\n },\n ],\n },\n },\n];\n\n\n
\n \n
\n\n", "path": "/components/multi-select/code", "date": "2024-05-02", "title": "Multi select", @@ -2565,10 +2565,10 @@ ], "meta": { "relativePath": "components/multi-select/code.mdx", - "createdAt": "2024-05-02T13:33:41.532Z", - "lastModified": "2024-05-02T13:33:41.532Z", - "size": 26343, - "formattedSize": "25.7 KB" + "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-02T13:34:20.141Z", - "lastModified": "2024-05-02T13:34:20.141Z", + "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 language: \"Web component\",\n snippet: `\n \n \n Create coffee\n \n \n Filter coffee\n \n \n \n \n \n \n \n `,\n },\n {\n language: \"React\",\n snippet: `\n \n \n Create coffee\n \n \n Filter coffee\n \n \n \n \n \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 language: \"Web component\",\n snippet: ``,\n },\n {\n language: \"React\",\n snippet: ``,\n },\n];\n\n\n \n\n\n### With breadcrumb navigation\n\nexport const withBreadcrumbNavigation = [\n {\n language: \"Web component\",\n snippet: `\n \n \n \n \n \n \n \n\n `,\n },\n {\n language: \"React\",\n snippet: `\n \n \n \n \n \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 language: \"Web component\",\n snippet: `\n \n Create coffee\n Filter coffee\n \n \n \n \n \n \n\n `,\n },\n {\n language: \"React\",\n snippet: `\n \n \n Create coffee\n \n \n Filter coffee\n \n \n \n \n \n \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 language: \"Web component\",\n snippet: `\n \n Create coffee\n Filter coffee\n \n \n \n \n \n\n `,\n },\n {\n language: \"React\",\n snippet: `\n \n \n Create coffee\n \n \n Filter coffee\n \n \n \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 language: \"React\",\n snippet: `\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 },\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 language: \"Web component\",\n snippet: `\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 },\n {\n language: \"React\",\n snippet: `\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];\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": "2023-10-25", + "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,10 +2654,10 @@ ], "meta": { "relativePath": "components/page-header/code.mdx", - "createdAt": "2024-05-09T10:42:41.847Z", - "lastModified": "2024-05-09T10:42:41.847Z", - "size": 16912, - "formattedSize": "16.5 KB" + "createdAt": "2024-05-21T09:12:11.375Z", + "lastModified": "2024-05-21T09:12:11.375Z", + "size": 19280, + "formattedSize": "18.8 KB" } }, { @@ -2665,7 +2665,7 @@ "contents": "\nimport {\n IcPageHeader,\n IcButton,\n IcTextField,\n IcStepper,\n IcStep,\n IcChip,\n} from \"@ukic/react\";\nimport pageHeaderFig1 from \"./images/fig-1-page-header-anatomy.png\";\nimport pageHeaderFig2 from \"./images/fig-2-dont-use-global-actions-in-a-page-header.png\";\nimport pageHeaderFig3 from \"./images/fig-3-use-default-and-dense-sizing.png\";\nimport pageHeaderFig4 from \"./images/fig-4-set-width-of-page-header-to-match-width-of-main-content.png\";\nimport pageHeaderFig5 from \"./images/fig-5-dont-set-width-of-page-header-to-align-to-content.png\";\nimport pageHeaderFig6 from \"./images/fig-6-page-header-displayed-whilst-scroll-position-is-at-top-of-page.png\";\nimport pageHeaderFig7 from \"./images/fig-7-sticky-page-header-displayed-whilst-scrolled.png\";\nimport pageHeaderFig8 from \"./images/fig-8-centre-alignment.png\";\nimport pageHeaderFig9 from \"./images/fig-9-left-alignment.png\";\nimport pageHeaderFig10 from \"./images/fig-10-full-width.png\";\nimport pageHeaderFig11 from \"./images/fig-11-dont-mix-alignment.png\";\n\n## Introduction\n\nAn example of the page header component.\n\n\n \n \n \n Create coffee\n \n \n Filter coffee\n \n \n \n \n \n \n \n \n\n\n## When to use\n\nUse a page header to display an introduction to the content of the page. Add additional elements to provide actions, navigation or inputs at the page level.\n\n\n\n### With action\n\nUse [buttons](/components/button) when you need to provide actions that affect all content on the page. For example, to filter or to add a new record. Only use one primary button per page header. Use any type of button within the page header’s interaction area.\n\n### With input\n\nInclude an [input field](/components/search-bar) to search or filter data displayed on the page. Don’t overload the input area with components, consider placing them in the page content instead.\n\n### With breadcrumb navigation\n\nUse a [breadcrumb](/components/breadcrumb) to show the current page’s position in the app’s hierarchy or show a link to the parent page.\n\n### With tab navigation\n\nUse [tabs](/components/tabs) if the content grouped by the header can be split into distinct categories.\n\n### With stepper\n\nUse a [stepper](/components/stepper) to show progress through a multi-step process.\n\n## When not to use\n\nDon’t use the page header to include global actions or global navigation, instead use the [top navigation](/components/top-navigation) or [side navigation](/components/side-navigation).\n\n\n\n## Sizing\n\n\n\nSet the width of the page header to match the width of the page’s main content.\n\n\n\n\n\n## Layout and placement\n\n### Sticky scroll\n\nSet the page header to stick to the top of the screen if you need it to be visible when scrolling. Otherwise, set it to scroll with content to maximise available space for content.\n\n\n\n\n\n### Alignment\n\nAlign the page header either to the left, centre or full-width to match the rest of the content on the page.\n\n\n\n\n\n\n\nDon’t align a page header’s content differently to how the rest of the page content is aligned.\n\n\n\n## Content\n\nUse short titles that clearly describe the page's content.\n\nKeep page subtitles concise within the page header. If more content is required, consider placing it within the page itself.\n\nInclude a title adornment to convey information such as a status or versioning.\n\n## Related components\n\n- [Hero](/components/hero)\n- [Top navigation](/components/top-navigation)\n- [Side navigation](/components/side-navigation)\n", "path": "/components/page-header", "navPriority": 22, - "date": "2023-02-03", + "date": "2024-05-10", "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.", @@ -2686,8 +2686,8 @@ ], "meta": { "relativePath": "components/page-header/guidance.mdx", - "createdAt": "2024-02-14T15:16:06.062Z", - "lastModified": "2024-02-14T15:16:06.062Z", + "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 language: \"Web component\",\n snippet: `\n`,\n },\n {\n language: \"React\",\n snippet: `\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 language: \"Web component\",\n snippet: ``,\n },\n {\n language: \"React\",\n snippet: ``,\n },\n];\n\n\n \n\n\n### Hide current page (only in 'simple' type)\n\nexport const hideCurrent = [\n {\n language: \"Web component\",\n snippet: ``,\n },\n {\n language: \"React\",\n snippet: ``,\n },\n];\n\n\n \n\n\n### Appearance\n\nexport const appearance = [\n {\n language: \"Web component\",\n snippet: `\n`,\n },\n {\n language: \"React\",\n snippet: `\n`,\n },\n];\n\n\n \n
\n \n
\n\n\n### Boundary and Adjacent items set\n\nexport const boundaryAdjacent = [\n {\n language: \"Web component\",\n snippet: ``,\n },\n {\n language: \"React\",\n snippet: ``,\n },\n];\n\n\n \n\n\n### Disabled\n\nexport const disabled = [\n {\n language: \"Web component\",\n snippet: ``,\n },\n {\n language: \"React\",\n snippet: ``,\n },\n];\n\n\n \n\n\n### Label\n\nexport const label = [\n {\n language: \"Web component\",\n snippet: ``,\n },\n {\n language: \"React\",\n snippet: ``,\n },\n];\n\n\n \n\n\n### Default page\n\nexport const defaultPage = [\n {\n language: \"Web component\",\n snippet: ``,\n },\n {\n language: \"React\",\n snippet: ``,\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": "2023-05-05", + "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-09T10:42:41.855Z", - "lastModified": "2024-05-09T10:42:41.855Z", - "size": 4638, - "formattedSize": "4.5 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-02-14T15:16:06.066Z", - "lastModified": "2024-02-14T15:16:06.066Z", + "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 language: \"Web component\",\n snippet: `\n \n \n \n\n\n
\n \n \n \n \n \n \n \n \n \n \n
`,\n },\n {\n language: \"React\",\n snippet: `const popoverEl = useRef(null);\nconst handleClick = () => {\n popoverEl.current.open = !popoverEl.current.open;\n};\nreturn (\n <>\n \n \n \n \n \n \n \n \n \n \n \n \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 language: \"Web component\",\n snippet: `\n \n \n \n\n\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
`,\n },\n {\n language: \"React\",\n snippet: `const popoverEl = useRef(null);\nconst handleClick = () => {\n popoverEl.current.open = !popoverEl.current.open;\n};\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\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 language: \"Web component\",\n snippet: `\n \n \n \n\n\n
\n \n \n \n \n \n \n \n \n \n \n
`,\n },\n {\n language: \"React\",\n snippet: `const popoverEl = useRef(null);\nconst handleClick = () => {\n popoverEl.current.open = !popoverEl.current.open;\n};\nreturn (\n <>\n \n \n \n \n \n \n \n \n \n \n \n \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": "2023-07-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-09T10:42:41.859Z", - "lastModified": "2024-05-09T10:42:41.859Z", - "size": 13771, - "formattedSize": "13.4 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-02-14T15:20:53.000Z", - "lastModified": "2024-02-14T15:20:53.000Z", + "createdAt": "2024-05-13T07:27:37.372Z", + "lastModified": "2024-05-13T07:27:37.372Z", "size": 11284, "formattedSize": "11.0 KB" } @@ -2913,9 +2913,9 @@ }, { "id": "components__radio__codex", - "contents": "\nimport { IcRadioGroup, IcRadioOption, IcTextField } from \"@ukic/react\";\n\n## Component demo\n\nexport const snippets = [\n {\n language: \"Web component\",\n snippet: `\n \n \n \n \n \n\n`,\n },\n {\n language: \"React\",\n snippet: ` console.log(ev.detail.value)}>\n \n \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 language: \"Web component\",\n snippet: `\n \n \n \n \n \n`,\n },\n {\n language: \"React\",\n snippet: `\n \n \n \n \n`,\n },\n];\n\n\n \n \n \n \n \n \n\n\n### Conditional dynamic\n\nexport const conditionalDynamic = [\n {\n language: \"Web component\",\n snippet: `\n \n \n \n \n \n`,\n },\n {\n language: \"React\",\n snippet: `\n \n \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 language: \"Web component\",\n snippet: `\n \n \n`,\n },\n {\n language: \"React\",\n snippet: `\n \n \n`,\n },\n];\n\n\n \n \n \n \n\n\n### Size small\n\nexport const smallSnippet = [\n {\n language: \"Web component\",\n snippet: `\n \n \n`,\n },\n {\n language: \"React\",\n snippet: `\n \n \n`,\n },\n];\n\n\n \n \n \n \n\n\n### With validation\n\nexport const withValidation = [\n {\n language: \"Web component\",\n snippet: `\n \n \n`,\n },\n {\n language: \"React\",\n snippet: `\n \n \n`,\n },\n];\n\n\n \n \n \n \n\n", + "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-01-18", + "date": "2024-05-02", "title": "Radio button", "status": "BETA", "subTitle": "Radio buttons let people select a single option from a list.", @@ -2936,10 +2936,10 @@ ], "meta": { "relativePath": "components/radio/code.mdx", - "createdAt": "2024-05-09T10:42:41.867Z", - "lastModified": "2024-05-09T10:42:41.867Z", - "size": 9346, - "formattedSize": "9.1 KB" + "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-02-14T15:16:06.086Z", - "lastModified": "2024-02-14T15:16:06.086Z", + "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 language: \"Web component\",\n snippet: `\n`,\n },\n {\n language: \"React\",\n snippet: ` console.log(ev.detail.value)}\n onIcSubmitSearch={(ev) => console.log(ev.detail.value)}\n placeholder=\"Start typing to search…\"\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 language: \"Web component\",\n snippet: `\n\n
\n\n All options will be displayed as you type\n\n`,\n },\n {\n language: \"React\",\n snippet: `\n
\nAll options will be displayed as you type`,\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 language: \"Web component\",\n snippet: `\n\n`,\n },\n {\n language: \"React\",\n snippet: ``,\n },\n];\n\n\n \n\n\n### With hidden label\n\nexport const withHiddenLabel = [\n {\n language: \"Web component\",\n snippet: `\n\n`,\n },\n {\n language: \"React\",\n snippet: ``,\n },\n];\n\n\n \n\n\n### Disabled\n\nexport const disabled = [\n {\n language: \"Web component\",\n snippet: `\n\n`,\n },\n {\n language: \"React\",\n snippet: ``,\n },\n];\n\n\n \n\n\n### Size small\n\nexport const sizeSmall = [\n {\n language: \"Web component\",\n snippet: `\n\n`,\n },\n {\n language: \"React\",\n snippet: ``,\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 language: \"Web component\",\n snippet: `\n\n`,\n },\n {\n language: \"React\",\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<>\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-02-02", + "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-09T10:42:41.867Z", - "lastModified": "2024-05-09T10:42:41.867Z", - "size": 14707, - "formattedSize": "14.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-02-14T15:16:06.086Z", - "lastModified": "2024-02-14T15:16:06.086Z", + "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 language: \"Web component\",\n snippet: `\n
\n \n \n \n
\n`,\n },\n {\n language: \"React\",\n snippet: `\n
\n \n \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 language: \"Web component\",\n snippet: `\n
\n \n \n \n
\n`,\n },\n {\n language: \"React\",\n snippet: `\n
\n \n \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 language: \"Web component\",\n snippet: `\n
\n \n \n \n
\n`,\n },\n {\n language: \"React\",\n snippet: `\n
\n \n \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 language: \"Web component\",\n snippet: `\n
\n \n \n \n
\n`,\n },\n {\n language: \"React\",\n snippet: `\n
\n \n \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-02-02", + "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-09T10:42:41.871Z", - "lastModified": "2024-05-09T10:42:41.871Z", - "size": 5598, - "formattedSize": "5.5 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-02-14T15:16:06.090Z", - "lastModified": "2024-02-14T15:16:06.090Z", + "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 language: \"Web component\",\n snippet: `\n`,\n },\n {\n language: \"React\",\n snippet: ` console.log(event.detail.value)}\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 language: \"Web component\",\n snippet: `\n`,\n },\n {\n language: \"React\",\n snippet: ` console.log(event.detail.value)}\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 language: \"Web component\",\n snippet: `\n`,\n },\n {\n language: \"React\",\n snippet: ` console.log(event.detail.value)}\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 language: \"Web component\",\n snippet: `\n`,\n },\n {\n language: \"React\",\n snippet: ` console.log(event.detail.value)}\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 language: \"Web component\",\n snippet: `\n`,\n },\n {\n language: \"React\",\n snippet: ` console.log(event.detail.value)}\n size=\"small\"\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 language: \"Web component\",\n snippet: `\n`,\n },\n {\n language: \"React\",\n snippet: ` console.log(event.detail.value)}\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 language: \"Web component\",\n snippet: `\n`,\n },\n {\n language: \"React\",\n snippet: ` console.log(event.detail.value)}\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 language: \"Web component\",\n snippet: `\n`,\n },\n {\n language: \"React\",\n snippet: ` console.log(event.detail.value)}\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 language: \"Web component\",\n snippet: `\n\n\n\n\n`,\n },\n {\n language: \"React\",\n snippet: ` console.log(event.detail.value)}\n/>\n console.log(event.detail.value)}\n/>\n console.log(event.detail.value)}\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 language: \"Web component\",\n snippet: `\n`,\n },\n {\n language: \"React\",\n snippet: ` console.log(event.detail.value)}\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 language: \"Web component\",\n snippet: `\n`,\n },\n {\n language: \"React\",\n snippet: ` console.log(event.detail.value)}\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 language: \"Web component\",\n snippet: `\n`,\n },\n {\n language: \"React\",\n snippet: ` console.log(event.detail.value)}\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 language: \"Web component\",\n snippet: `\n`,\n },\n {\n language: \"React\",\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 setSelectedValue(event.detail.value)}\n onIcClear={() => setResults([])}\n onIcChange={changeHandler}\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-02-02", + "date": "2024-05-02", "title": "Select", "status": "BETA", "subTitle": "Select allows users to select one or more values from a list of options.", @@ -3218,15 +3218,15 @@ ], "meta": { "relativePath": "components/select/code.mdx", - "createdAt": "2024-05-09T10:42:41.879Z", - "lastModified": "2024-05-09T10:42:41.879Z", - "size": 35528, - "formattedSize": "34.7 KB" + "createdAt": "2024-05-21T09:12:11.379Z", + "lastModified": "2024-05-21T09:12:11.379Z", + "size": 46068, + "formattedSize": "45.0 KB" } }, { "id": "components__select__guidancex", - "contents": "\nimport { IcSelect, IcAlert } from \"@ukic/react\";\nimport selectFig1 from \"./images/fig-1-use-radio-or-checkbox-groups-when-less-than-four-options-are-available2x.png\";\nimport selectFig2 from \"./images/fig-2-dont-use-dropdowns-when-displaying-a-limited-number-of-options2x.png\";\nimport selectFig3 from \"./images/fig-3-use-labels-to-indicate-the-title-of-the-field.png\";\nimport selectFig4 from \"./images/fig-4-dont-replace-labels-with-placeholder-text.png\";\nimport selectFig5 from \"./images/fig-5-use-a-standard-select-when-providing-less-than-ten-options.png\";\nimport selectFig6 from \"./images/fig-6-do-not-use-the-searchable-variant-when-providing-less-than-ten-options.png\";\n\n## Component variants\n\nThere are two types of select components:\n\n- Single-select\n- Multi-select\n\n### Single-select\n\nAn example of the single-select component.\n\nexport const SelectExample = () => (\n \n);\n\n\n \n\n\n### Multi-select\n\n\n\n## When to use\n\nUse the select component to allow the user to choose one or more options from four or more items. For less than four, use a [radio group](/components/radio) or a [checkbox group](/components/checkbox).\nWhen more than ten options are available, consider using the [searchable variant](/components/select#searchable-single-select) of select to allow users to search the options, rather than scroll through the dropdown list.\n\n\n \n \n\n\n## Validation\n\nReal-time validation helps the user streamline their process and efficiently complete a form. All error validation should be accompanied by an error label.\n\n## Content\n\n### Option list\n\nThe options in the option list display a label by default and can also include a description.\n\nUse a default option list to display all options without any grouping or recommendations.\n\n#### Recommended\n\nUse an option list with recommendations to display specific options at the top of the list for quick access.\n\n#### Groups\n\nUse an option list with groups to combine the options into groups with descriptive headings.\n\n### Labels\n\nClear labels help users understand what information they should provide.\n\nLabels should always be visible regardless of the state of the field and should be announced by a screen reader on focus.\n\n\n \n \n\n\n### Helper text\n\nHelper text should be included when additional information can help the user to either provide the right information or understand why or how the information will be used.\n\nMake sure any helper text that appears under an input is read when an assistive technology user stops at an input using ARIA.\n\n### Dismissible inputs\n\nAlways allow the user to clear their selection by including a clear button inside the input field.\n\n## Searchable (single-select)\n\nexport const SearchableSelectExample = () => (\n console.log(event.detail.value)}\n />\n);\n\n\n \n\n\nThe single-select component can be set to be searchable to filter options in the option list. A user can open the option list to view the available options, but can also type into the input field to filter the option list to more easily find the desired option.\n\nUse the searchable variant when including several options in the option list, so that the user can quickly filter their desired selection.\n\nDon’t use the searchable variant when providing less than ten options. The added functionality for short lists may confuse users while providing no benefit to their experience.\n\n\n \n \n\n\n### Content\n\nThe component can be configured to show values that either match the search term, or show values that contain the search term. For example, United Kingdom matches the search term ‘Un’, and Tunisia contains the search term ‘Un’.\n\nFor searches that take time to load results or suggestions, display the loading state whilst the search is loading. Use the empty state for searches that have no results or suggested options.\n\n## Related components\n\n- [Search bar](/components/search-bar)\n", + "contents": "\nimport { IcSelect } from \"@ukic/react\";\nimport selectFig1 from \"./images/fig-1-use-radio-or-checkbox-groups-when-less-than-four-options-are-available2x.png\";\nimport selectFig2 from \"./images/fig-2-dont-use-dropdowns-when-displaying-a-limited-number-of-options2x.png\";\nimport selectFig3 from \"./images/fig-3-use-labels-to-indicate-the-title-of-the-field.png\";\nimport selectFig4 from \"./images/fig-4-dont-replace-labels-with-placeholder-text.png\";\nimport selectFig5 from \"./images/fig-5-use-a-standard-select-when-providing-less-than-ten-options.png\";\nimport selectFig6 from \"./images/fig-6-do-not-use-the-searchable-variant-when-providing-less-than-ten-options.png\";\n\n## Component variants\n\nThere are two types of select components:\n\n- Single-select\n- Multi-select\n\n### Single-select\n\nAn example of the single-select component.\n\nexport const SelectExample = () => (\n \n);\n\n\n \n\n\n### Multi-select\n\nThe multi-select is currently released in our canary packages, which means it is likely to change in future releases. Guidance and documentation can be found on the [multi-select page](/components/multi-select).\n\n## When to use\n\nUse the select component to allow the user to choose one or more options from four or more items. For less than four, use a [radio group](/components/radio) or a [checkbox group](/components/checkbox).\nWhen more than ten options are available, consider using the [searchable variant](/components/select#searchable-single-select) of select to allow users to search the options, rather than scroll through the dropdown list.\n\n\n \n \n\n\n## Validation\n\nReal-time validation helps the user streamline their process and efficiently complete a form. All error validation should be accompanied by an error label.\n\n## Content\n\n### Option list\n\nThe options in the option list display a label by default and can also include a description.\n\nUse a default option list to display all options without any grouping or recommendations.\n\n#### Recommended\n\nUse an option list with recommendations to display specific options at the top of the list for quick access.\n\n#### Groups\n\nUse an option list with groups to combine the options into groups with descriptive headings.\n\n### Labels\n\nClear labels help users understand what information they should provide.\n\nLabels should always be visible regardless of the state of the field and should be announced by a screen reader on focus.\n\n\n \n \n\n\n### Helper text\n\nHelper text should be included when additional information can help the user to either provide the right information or understand why or how the information will be used.\n\nMake sure any helper text that appears under an input is read when an assistive technology user stops at an input using ARIA.\n\n### Dismissible inputs\n\nAlways allow the user to clear their selection by including a clear button inside the input field.\n\n## Searchable (single-select)\n\nexport const SearchableSelectExample = () => (\n console.log(event.detail.value)}\n />\n);\n\n\n \n\n\nThe single-select component can be set to be searchable to filter options in the option list. A user can open the option list to view the available options, but can also type into the input field to filter the option list to more easily find the desired option.\n\nUse the searchable variant when including several options in the option list, so that the user can quickly filter their desired selection.\n\nDon’t use the searchable variant when providing less than ten options. The added functionality for short lists may confuse users while providing no benefit to their experience.\n\n\n \n \n\n\n### Content\n\nThe component can be configured to show values that either match the search term, or show values that contain the search term. For example, United Kingdom matches the search term ‘Un’, and Tunisia contains the search term ‘Un’.\n\nFor searches that take time to load results or suggestions, display the loading state whilst the search is loading. Use the empty state for searches that have no results or suggested options.\n\n## Related components\n\n- [Search bar](/components/search-bar)\n", "path": "/components/select", "navPriority": 28, "date": "2024-05-02", @@ -3250,10 +3250,10 @@ ], "meta": { "relativePath": "components/select/guidance.mdx", - "createdAt": "2024-05-08T15:13:48.202Z", - "lastModified": "2024-05-08T15:13:48.202Z", - "size": 7371, - "formattedSize": "7.2 KB" + "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 language: \"Web component\",\n snippet: `\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 language: \"React\",\n snippet: `\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\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 language: \"Web component\",\n snippet: `\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 language: \"React\",\n snippet: `\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\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 on default\n\nexport const snippetsExpanded = [\n {\n language: \"Web component\",\n snippet: `\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 language: \"React\",\n snippet: `\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 },\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 language: \"Web component\",\n snippet: `\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 language: \"React\",\n snippet: `\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\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 language: \"Web component\",\n snippet: `\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 language: \"React\",\n snippet: `\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\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 language: \"React\",\n snippet: `// importing Material Design icons\nimport { \n mdiCoffeeOutline, \n mdiHome,\n mdiMagnify,\n mdiCoffeeMakerOutline,\n mdiCogOutline,\n mdiTeaOutline\n} from \"@mdi/js\";\n...\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n`,\n },\n];\n\n\n \n \n \n \n \n \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 language: \"React\",\n snippet: `\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 },\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 language: \"Web component\",\n snippet: `// 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 },\n {\n language: \"React\",\n snippet: `// 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 },\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": "2023-10-11", + "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-09T10:42:41.907Z", - "lastModified": "2024-05-09T10:42:41.907Z", - "size": 75440, - "formattedSize": "73.7 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-02-14T15:16:06.090Z", - "lastModified": "2024-02-14T15:16:06.090Z", + "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 language: \"Web component\",\n snippet: `\n\n \n\n`,\n },\n {\n language: \"React\",\n snippet: `\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 language: \"Web component\",\n snippet: `
Test text
`,\n },\n {\n language: \"React\",\n snippet: `\n
Test text
\n`,\n },\n];\n\n\n \n \n Test text\n \n \n\n\n### Set width and height\n\nexport const snippetsSetWidthAndHeight = [\n {\n language: \"Web component\",\n snippet: `Height and width set with styles\n\nHeight set with styles\n\nWidth set with styles\n`,\n },\n {\n language: \"React\",\n snippet: `Height and width set with styles\n\nHeight set with styles\n\nWidth set with styles\n`,\n },\n];\n\n\n
\n Height and width set with styles\n \n Height set with styles\n \n Width set with styles\n \n
\n\n\n### Light\n\nexport const snippetsLight = [\n {\n language: \"Web component\",\n snippet: `\n\n \n\n`,\n },\n {\n language: \"React\",\n snippet: `\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 language: \"Web component\",\n snippet: `
\n
\n
\n \n \n \n \n \n Reload\n \n
\n `,\n },\n {\n language: \"React\",\n snippet: `const loading = () => {\n return (\n \n \n \n \n \n \n \n \n );\n};\nconst loaded = () => {\n return (\n \n \n \n \n \n
\n Learn more\n Hide\n
\n \n );\n};\n const ContentFunction = () => {\n const [content, setContent] = React.useState(loading);\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\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": "2023-10-24", + "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,10 +3406,10 @@ ], "meta": { "relativePath": "components/skeleton/code.mdx", - "createdAt": "2024-05-09T10:42:41.911Z", - "lastModified": "2024-05-09T10:42:41.911Z", - "size": 13492, - "formattedSize": "13.2 KB" + "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-02-14T15:16:06.094Z", - "lastModified": "2024-02-14T15:16:06.094Z", + "createdAt": "2024-05-13T07:27:37.384Z", + "lastModified": "2024-05-13T07:27:37.384Z", "size": 4677, "formattedSize": "4.6 KB" } @@ -3477,9 +3477,9 @@ }, { "id": "components__status-tags__codex", - "contents": "\nimport { IcStatusTag } from \"@ukic/react\";\n\n## Component demo\n\nexport const snippetsDefault = [\n {\n language: \"Web component\",\n snippet: `\n\n\n`,\n },\n {\n language: \"React\",\n snippet: `\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 language: \"Web component\",\n snippet: `\n\n\n`,\n },\n {\n language: \"React\",\n snippet: `\n\n\n`,\n },\n];\n\n\n \n \n \n \n\n\n### Small\n\nexport const snippetsSmall = [\n {\n language: \"Web component\",\n snippet: `\n\n\n`,\n },\n {\n language: \"React\",\n snippet: `\n\n\n`,\n },\n];\n\n\n \n \n \n \n\n", + "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": "2023-10-24", + "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,10 +3500,10 @@ ], "meta": { "relativePath": "components/status-tags/code.mdx", - "createdAt": "2024-05-09T10:42:41.915Z", - "lastModified": "2024-05-09T10:42:41.915Z", - "size": 3729, - "formattedSize": "3.6 KB" + "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-02-14T15:16:06.098Z", - "lastModified": "2024-02-14T15:16:06.098Z", + "createdAt": "2024-05-13T07:27:37.384Z", + "lastModified": "2024-05-13T07:27:37.384Z", "size": 6863, "formattedSize": "6.7 KB" } @@ -3571,9 +3571,9 @@ }, { "id": "components__stepper__codex", - "contents": "\nimport { IcStepper, IcStep } from \"@ukic/react\";\n\n## Component demo\n\nexport const snippets = [\n {\n language: \"Web component\",\n snippet: `\n \n \n \n`,\n },\n {\n language: \"React\",\n snippet: `\n \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 language: \"Web component\",\n snippet: `\n \n \n \n`,\n },\n {\n language: \"React\",\n snippet: `\n \n \n \n`,\n },\n];\n\n\n \n \n \n \n \n\n\n### Left-aligned\n\nexport const leftAligned = [\n {\n language: \"Web component\",\n snippet: `\n \n \n \n`,\n },\n {\n language: \"React\",\n snippet: `\n \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 language: \"Web component\",\n snippet: `\n \n \n \n`,\n },\n {\n language: \"React\",\n snippet: `\n \n \n \n`,\n },\n];\n\n\n \n \n \n \n \n\n\n### With subtitles\n\nexport const withSubtitles = [\n {\n language: \"Web component\",\n snippet: `\n \n \n \n \n \n \n`,\n },\n {\n language: \"React\",\n snippet: `\n \n \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 language: \"Web component\",\n snippet: `\n \n \n \n`,\n },\n {\n language: \"React\",\n snippet: `\n \n \n \n`,\n },\n];\n\n\n \n \n \n \n \n\n", + "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": "2023-02-03", + "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,10 +3594,10 @@ ], "meta": { "relativePath": "components/stepper/code.mdx", - "createdAt": "2024-05-09T10:42:41.935Z", - "lastModified": "2024-05-09T10:42:41.935Z", - "size": 6694, - "formattedSize": "6.5 KB" + "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-02-14T15:16:06.098Z", - "lastModified": "2024-02-14T15:16:06.098Z", + "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 language: \"Web component\",\n snippet: `\n`,\n },\n {\n language: \"React\",\n snippet: ` console.log({ \n checked: ev.detail.checked, \n value: ev.detail.value\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 language: \"Web component\",\n snippet: ``,\n },\n {\n language: \"React\",\n snippet: ``,\n },\n];\n\n\n \n\n\n### Small\n\nexport const snippetsSmall = [\n {\n language: \"Web component\",\n snippet: ``,\n },\n {\n language: \"React\",\n snippet: ``,\n },\n];\n\n\n \n\n\n### Disabled\n\nexport const snippetsDisabled = [\n {\n language: \"Web component\",\n snippet: `\n`,\n },\n {\n language: \"React\",\n snippet: `\n`,\n },\n];\n\n\n
\n \n \n
\n\n\n### Helper text and right adornment\n\nexport const snippetsHelperAndAdornment = [\n {\n language: \"Web component\",\n snippet: `\n \n \n \n`,\n },\n {\n language: \"React\",\n snippet: `\n \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": "2023-10-24", + "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-09T10:42:41.939Z", - "lastModified": "2024-05-09T10:42:41.939Z", - "size": 4428, - "formattedSize": "4.3 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-02-14T15:16:06.098Z", - "lastModified": "2024-02-14T15:16:06.098Z", + "createdAt": "2024-05-13T07:27:37.388Z", + "lastModified": "2024-05-13T07:27:37.388Z", "size": 6214, "formattedSize": "6.1 KB" } @@ -3759,9 +3759,9 @@ }, { "id": "components__tabs__codex", - "contents": "\nimport { IcTab, IcTabContext, IcTabGroup, IcTabPanel } from \"@ukic/react\";\n\n## Component demo\n\nexport const snippets = [\n {\n language: \"Web component\",\n snippet: `\n \n Ingredients\n Method\n History\n \n Tab One - Ingredients\n Tab Two - Method\n Tab Three - History\n\n`,\n },\n {\n language: \"React\",\n snippet: `\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\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 language: \"Web component\",\n snippet: `\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 language: \"React\",\n snippet: `\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\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 language: \"Web component\",\n snippet: `\n \n Ingredients\n Method\n History\n \n Tab One - Ingredients\n Tab Two - Method\n Tab Three - History\n`,\n },\n {\n language: \"React\",\n snippet: `\n \n Ingredients\n Method\n History\n \n Tab One - Ingredients\n Tab Two - Method\n Tab Three - History\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 language: \"Web component\",\n snippet: `\n \n Ingredients\n Method\n History\n \n Tab One - Ingredients\n Tab Two - Method\n Tab Three - History\n`,\n },\n {\n language: \"React\",\n snippet: `\n \n Ingredients\n Method\n History\n \n Tab One - Ingredients\n Tab Two - Method\n Tab Three - History\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 language: \"Web component\",\n snippet: `\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 {\n language: \"React\",\n snippet: `const compactStyle = {\n width: \"60%\",\n marginLeft: \"auto\",\n marginRight: \"auto\",\n }\nreturn (\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 },\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 language: \"Web component\",\n snippet: `\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 {\n language: \"React\",\n snippet: `\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];\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", + "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-04-17", + "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,10 +3782,10 @@ ], "meta": { "relativePath": "components/tabs/code.mdx", - "createdAt": "2024-05-09T10:42:41.947Z", - "lastModified": "2024-05-09T10:42:41.947Z", - "size": 14510, - "formattedSize": "14.2 KB" + "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-02-14T15:16:06.102Z", - "lastModified": "2024-02-14T15:16:06.102Z", + "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 language: \"Web component\",\n snippet: `\n\n`,\n },\n {\n language: \"React\",\n snippet: ` console.log(ev.detail.value)}\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 language: \"Web component\",\n snippet: `\n \n \n \n`,\n },\n {\n language: \"React\",\n snippet: `\n \n \n \n`,\n },\n];\n\n\n \n \n \n \n \n\n\n### Disabled\n\nexport const snippetsDisabled = [\n {\n language: \"Web component\",\n snippet: `\n \n \n \n \n`,\n },\n {\n language: \"React\",\n snippet: `\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 language: \"Web component\",\n snippet: `\n\n`,\n },\n {\n language: \"React\",\n snippet: ` console.log(ev.detail.value)}\n/>`,\n },\n];\n\n\n console.log(ev.detail.value)}\n />\n\n\n### Validation\n\nexport const snippetsValidation = [\n {\n language: \"Web component\",\n snippet: `\n\n\n\n\n\n\n`,\n },\n {\n language: \"React\",\n snippet: `\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 language: \"Web component\",\n snippet: `\n`,\n },\n {\n language: \"React\",\n snippet: ``,\n },\n];\n\n\n \n\n\n### Text area with resize\n\nexport const snippetsTextArea = [\n {\n language: \"Web component\",\n snippet: `\n`,\n },\n {\n language: \"React\",\n snippet: ``,\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": "2023-10-25", + "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-09T10:42:41.951Z", - "lastModified": "2024-05-09T10:42:41.951Z", - "size": 11660, - "formattedSize": "11.4 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-02-14T15:16:06.106Z", - "lastModified": "2024-02-14T15:16:06.106Z", + "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 language: \"Web component\",\n snippet: `Display toast\n\n \n\n`,\n },\n {\n language: \"React\",\n snippet: `const toastRegionEl = useRef(null);\nconst toastEl = useRef(null);\nconst handleClick = () => {\n toastRegionEl.current.openToast = toastEl.current;\n}\nreturn (\n <>\n Display toast component\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 language: \"Web component\",\n snippet: `Display default toast\nDisplay error toast\nDisplay auto dismiss toast\n\n \n \n \n\n`,\n },\n {\n language: \"React\",\n snippet: `const toastRegionEl = useRef(null);\nconst toastEl = useRef(null);\nconst errorToastEl = useRef(null);\nconst autoDismissToastEl = useRef(null);\nconst handleClick = () => {\n toastRegionEl.current.openToast = toastEl.current;\n};\nconst handleErrorClick = () => {\n toastRegionEl.current.openToast = errorToastEl.current;\n};\nconst handleAutoDismissClick = () => {\n toastRegionEl.current.openToast = autoDismissToastEl.current;\n};\nreturn (\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\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 language: \"Web component\",\n snippet: `Display success toast\n\n \n\n`,\n },\n {\n language: \"React\",\n snippet: `const toastRegionEl = useRef(null);\nconst toastEl = useRef(null);\nconst handleClick = () => {\n toastRegionEl.current.openToast = toastEl.current;\n}\nreturn (\n <>\n Display success toast\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 language: \"Web component\",\n snippet: `Display multi-line toast\n\n \n\n`,\n },\n {\n language: \"React\",\n snippet: `const toastRegionEl = useRef(null);\nconst toastEl = useRef(null);\nconst handleClick = () => {\n toastRegionEl.current.openToast = toastEl.current;\n}\nreturn (\n <>\n Display multi-line toast\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 language: \"Web component\",\n snippet: `Display slotted buttons toast\nDisplay slotted buttons toast\n\n \n Retry\n \n \n Retry\n \n\n`,\n },\n {\n language: \"React\",\n snippet: `const toastRegionEl = useRef(null);\nconst buttonToastEl = useRef(null);\nconst linkToastEl = useRef(null);\nconst handleButtonToastClick = () => {\n toastRegionEl.current.openToast = buttonToastEl.current;\n}\nconst handleLinkToastClick = () => {\n toastRegionEl.current.openToast = linkToastEl.current;\n}\nreturn (\n <>\n
\n Display slotted button toast\n Display slotted link toast\n
\n \n \n Retry\n \n \n Retry\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 language: \"Web component\",\n snippet: `Display auto-dismiss toast\n\n \n\n`,\n },\n {\n language: \"React\",\n snippet: `const toastRegionEl = useRef(null);\nconst toastEl = useRef(null);\nconst handleClick = () => {\n toastRegionEl.current.openToast = toastEl.current;\n}\nreturn (\n <>\n Display auto-dismiss toast\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 language: \"Web component\",\n snippet: `Display auto-dismiss toast\n\n \n \n coffee-outline\n \n \n \n\n`,\n },\n {\n language: \"React\",\n snippet: `const toastRegionEl = useRef(null);\nconst toastEl = useRef(null);\nconst handleClick = () => {\n toastRegionEl.current.openToast = toastEl.current;\n}\nreturn (\n <>\n Display custom icon and aria-label toast\n \n \n \n coffee-outline\n \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": "2023-11-09", + "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-09T10:42:41.955Z", - "lastModified": "2024-05-09T10:42:41.955Z", - "size": 18111, - "formattedSize": "17.7 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-01T14:41:23.665Z", - "lastModified": "2024-05-01T14:41:23.665Z", + "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 language: \"Web component\",\n snippet: `\n`,\n },\n {\n language: \"React\",\n snippet: ` console.log(event.detail.checked)}\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 language: \"Web component\",\n snippet: `\n\n\n`,\n },\n {\n language: \"React\",\n snippet: `\n\n\n`,\n },\n];\n\n\n \n \n \n \n\n\n### With icon\n\nexport const snippetsWithIcon = [\n {\n language: \"Web component\",\n snippet: `\n \n`,\n },\n {\n language: \"React\",\n snippet: `\n \n \n \n`,\n },\n];\n\n\n \n \n \n \n \n\n\n### Sizing\n\nexport const snippetsSizing = [\n {\n language: \"Web component\",\n snippet: `\n\n`,\n },\n {\n language: \"React\",\n snippet: `\n\n`,\n },\n];\n\n\n \n \n \n\n\n### With badge\n\nexport const snippetsWithBadge = [\n {\n language: \"Web component\",\n snippet: `\n \n`,\n },\n {\n language: \"React\",\n snippet: `\n \n`,\n },\n];\n\n\n \n \n \n\n\n### Dark\n\nexport const snippetsDark = [\n {\n language: \"Web component\",\n snippet: `\n\n`,\n },\n {\n language: \"React\",\n snippet: `\n\n`,\n },\n];\n\n\n \n \n \n\n\n### Light\n\nexport const snippetsLight = [\n {\n language: \"Web component\",\n snippet: `\n\n`,\n },\n {\n language: \"React\",\n snippet: `\n\n`,\n },\n];\n\n\n \n \n \n\n\n### Full width\n\nexport const snippetsFullWidth = [\n {\n language: \"Web component\",\n snippet: `\n \n \n \n \n`,\n },\n {\n language: \"React\",\n snippet: `\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 language: \"Web component\",\n snippet: `\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n `,\n },\n {\n language: \"React\",\n snippet: `\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n `,\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 language: \"Web component\",\n snippet: ` \n \n \n \n \n \n \n \n \n \n \n`,\n },\n {\n language: \"React\",\n snippet: ` \n \n \n \n \n\n \n \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 language: \"Web component\",\n snippet: ` \n \n \n \n \n \n \n \n \n \n \n \n`,\n },\n {\n language: \"React\",\n snippet: ` \n \n \n \n \n \n \n \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 {\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-03-08", + "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-09T10:42:41.971Z", - "lastModified": "2024-05-09T10:42:41.971Z", - "size": 20281, - "formattedSize": "19.8 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-03-22T15:57:13.306Z", - "lastModified": "2024-03-22T15:57:13.306Z", + "createdAt": "2024-05-13T07:27:37.392Z", + "lastModified": "2024-05-13T07:27:37.392Z", "size": 11033, "formattedSize": "10.8 KB" } @@ -4135,9 +4135,9 @@ }, { "id": "components__tooltips__codex", - "contents": "\nimport { IcTooltip, IcButton, IcChip } from \"@ukic/react\";\nimport { useRef } from \"react\";\n\n## Component demo\n\nexport const snippets = [\n {\n language: \"Web component\",\n snippet: `\n Add\n\n\n Remove\n`,\n },\n {\n language: \"React\",\n snippet: `\n Add\n\n\n Remove\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 language: \"Web component\",\n snippet: `\n Add\n`,\n },\n {\n language: \"React\",\n snippet: `\n Add\n`,\n },\n];\n\n\n \n \n Add\n \n \n\n\n### Right placement\n\nexport const snippetsRight = [\n {\n language: \"Web component\",\n snippet: ` \n Add\n`,\n },\n {\n language: \"React\",\n snippet: `\n Add\n`,\n },\n];\n\n\n \n \n Add\n \n \n\n\n### Chip\n\nexport const snippetsDefault = [\n {\n language: \"Web component\",\n snippet: ` \n \n \n \n \n \n`,\n },\n {\n language: \"React\",\n snippet: `\n \n \n \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 language: \"Web component\",\n snippet: `\nShow tooltip\n\n \n Add\n \n`,\n },\n {\n language: \"React\",\n snippet: `let display = true;\nconst tooltipEl = useRef(null);\nconst handleDisplay = () => {\n tooltipEl.current.displayTooltip(display, display);\n display = !display;\n}\nreturn (\n <>\n Show tooltip\n \n \n Add\n \n \n \n);`,\n },\n];\n\nexport const TriggerExample = () => {\n let display = true;\n const tooltipEl = useRef(null);\n const handleDisplay = () => {\n tooltipEl.current.displayTooltip(display, display);\n display = !display;\n };\n return (\n <>\n Show tooltip\n \n \n Add\n \n \n \n );\n};\n\n\n \n\n", + "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-02-02", + "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,10 +4158,10 @@ ], "meta": { "relativePath": "components/tooltips/code.mdx", - "createdAt": "2024-05-09T10:42:41.979Z", - "lastModified": "2024-05-09T10:42:41.979Z", - "size": 7782, - "formattedSize": "7.6 KB" + "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-03-20T09:51:14.418Z", - "lastModified": "2024-03-20T09:51:14.418Z", + "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} from \"@ukic/react\";\n\nimport { MemoryRouter, NavLink } from \"react-router-dom\";\n\n## Component demo\n\nexport const snippetsDefault = [\n {\n language: \"Web component\",\n snippet: `\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n`,\n },\n {\n language: \"React\",\n snippet: `\n \n \n \n \n \n \n \n \n \n \n \n \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## 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 language: \"Web component\",\n snippet: `\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n`,\n },\n {\n language: \"React\",\n snippet: `\n \n \n \n \n \n \n \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 \n \n e.preventDefault()}\n />\n e.preventDefault()}\n />\n \n \n\n\n### Centre aligned\n\nexport const snippetsCentreAligned = [\n {\n language: \"Web component\",\n snippet: `\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n`,\n },\n {\n language: \"React\",\n snippet: `\n \n \n \n \n \n \n \n \n \n \n \n \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### Left aligned\n\nexport const snippetsLeftAligned = [\n {\n language: \"Web component\",\n snippet: `\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n`,\n },\n {\n language: \"React\",\n snippet: `\n \n \n \n \n \n \n \n \n \n \n \n \n \n \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 language: \"Web component\",\n snippet: `\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n`,\n },\n {\n language: \"React\",\n snippet: `\n \n \n \n \n \n \n \n \n \n \n \n \n \n \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 language: \"Web component\",\n snippet: `\n \n \n \n \n \n \n \n \n \n`,\n },\n {\n language: \"React\",\n snippet: `\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 React Router (using slots)\n\nThe following example also demonstrates 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 language: \"React\",\n snippet: `\n \n ICDS Title\n ICDS\n \n \n \n \n \n \n \n alert('test')}>\n \n \n \n \n \n \n Get started\n \n \n Accessibility\n \n \n
\n \n \n This is the get started page} />\n This page is about accessibility} />\n \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-02-02", + "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,15 +4252,15 @@ ], "meta": { "relativePath": "components/top-nav/code.mdx", - "createdAt": "2024-05-09T10:42:42.003Z", - "lastModified": "2024-05-09T10:42:42.003Z", - "size": 34621, - "formattedSize": "33.8 KB" + "createdAt": "2024-05-21T09:47:02.295Z", + "lastModified": "2024-05-21T09:47:02.295Z", + "size": 40953, + "formattedSize": "40.0 KB" } }, { "id": "components__top-nav__guidancex", - "contents": "\nimport {\n IcTopNavigation,\n IcSearchBar,\n IcNavigationItem,\n IcNavigationGroup,\n} from \"@ukic/react\";\nimport topNavFig1 from \"./images/fig-1-dont-use-both-side-and-top-navigation.png\";\nimport topNavFig2 from \"./images/fig-2-show-status-version-and-secondary-links.png\";\nimport topNavFig3 from \"./images/fig-3-top-nav-with-megamenu.png\";\nimport topNavFig4 from \"./images/fig-4-use-drawer-navigation-on-small-screens.png\";\nimport topNavFig5 from \"./images/fig-5-personality-colours.png\";\nimport topNavFig6 from \"./images/fig-6-dont-position-top-nav-not-full-width.png\";\nimport topNavFig7 from \"./images/fig-7-use-full-width-alignment.png\";\nimport topNavFig8 from \"./images/fig-8-use-centre-alignment.png\";\nimport topNavFig9 from \"./images/fig-9-dont-use-long-labels.png\";\nimport topNavFig10 from \"./images/fig-10-megamenu-with-too-many-links.png\";\n\n## Component variants\n\nTop navigation has two variants: standard and one with a mega-menu.\n\n### Standard\n\nUse a standard top navigation for apps with eight or fewer navigation options.\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=\"true\"\n />\n e.preventDefault()}\n />\n \n\n\n### With mega-menu\n\nUse a top navigation with 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\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n\n## When to use\n\nUse the top navigation component for intranet-style and content heavy apps. Use it for apps with complex page structures where every page should be accessible from any other page using the mega-menu.\n\nUse top navigation alongside additional components like [page headers](/components/page-header) to create a variety of different [layout](/styles/layout-spacing) and navigation styles.\n\n## When not to use\n\nFor apps with a small number of pages, use [side navigation](/components/side-navigation) as it's better suited for providing quick access and maximising the screen space for page content.\n\nUse either top navigation or side navigation. Don't use both at the same time.\n\n\n\n## Optional elements\n\n### Search bar\n\nInclude an optional [search bar](/components/search-bar) to provide search functionality on every page in the app.\n\n### Secondary links\n\nInclude secondary links or actions that appear on the right-hand side of the top navigation. Use these for global utilities like application settings, or as links to other related sites.\n\n### App status and version\n\nUse the title adornment and app version to display the app's info in the top navigation.\n\n\n\n## Interaction behaviour\n\nWhen using a top navigation with mega-menu, the menu is displayed when hovering over, or focusing on, the main navigation groups.\n\n\n\nOn smaller screens, both top navigation variants will display a menu button that opens a drawer menu from the right-hand side of the screen. The drawer menu can display lists of single links or grouped links that can be expanded and collapsed.\n\n\n\n## Colour\n\nThe top navigation uses the app's [theme colour](/styles/colour/#theme) as the background and automatically sets the foreground colour to ensure accessible contrast ratios.\n\nChange the app's theme colour to change the background colour of the top navigation and help distinguish your app from others your users may use.\n\n\n\n## Sizing\n\nAlways position the top navigation at the top of the screen and make sure that it horizontally fills the browser window.\n\n\n\n## Layout and placement\n\n### Alignment\n\nAlign the top navigation's content either full width or centred.\n\nUse full width alignment to position the top navigation content to the left and right of the browser window.\n\n\n\nUse centre alignment to position the top navigation content in line with other page content.\n\n\n\n## Content\n\n### Labels and icons\n\nFollow the [content style guidelines](/styles/content-style) for all navigation option labels as well as each option group label.\n\nFollow the [icon style guidelines](/styles/icons) when selecting icons for menu options or secondary links.\n\n### Navigation options\n\nMake sure to keep navigation option labels concise, as they may not all fit within the top navigation on all screen sizes.\n\nFor the standard variant, don't use more than eight links as this may not display correctly.\n\n\n\n### Mega-menu\n\nInclude up to five columns of navigation links in the mega-menu and aim to keep the number of links in each column to six or fewer.\n\n\n", + "contents": "\nimport {\n IcTopNavigation,\n IcSearchBar,\n IcNavigationItem,\n IcNavigationGroup,\n} from \"@ukic/react\";\nimport topNavFig1 from \"./images/fig-1-dont-use-both-side-and-top-navigation.png\";\nimport topNavFig2 from \"./images/fig-2-show-status-version-and-secondary-links.png\";\nimport topNavFig3 from \"./images/fig-3-top-nav-with-megamenu.png\";\nimport topNavFig4 from \"./images/fig-4-use-drawer-navigation-on-small-screens.png\";\nimport topNavFig5 from \"./images/fig-5-personality-colours.png\";\nimport topNavFig6 from \"./images/fig-6-dont-position-top-nav-not-full-width.png\";\nimport topNavFig7 from \"./images/fig-7-use-full-width-alignment.png\";\nimport topNavFig8 from \"./images/fig-8-use-centre-alignment.png\";\nimport topNavFig9 from \"./images/fig-9-dont-use-long-labels.png\";\nimport topNavFig10 from \"./images/fig-10-megamenu-with-too-many-links.png\";\n\n## Component variants\n\nTop navigation has two variants: standard and one with a mega-menu.\n\n### Standard\n\nUse a standard top navigation for apps with eight or fewer navigation options.\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=\"true\"\n />\n e.preventDefault()}\n />\n \n\n\n### With mega-menu\n\nUse a top navigation with 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\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n\n## When to use\n\nUse the top navigation component for intranet-style and content heavy apps. Use it for apps with complex page structures where every page should be accessible from any other page using the mega-menu.\n\nUse top navigation alongside additional components like [page headers](/components/page-header) to create a variety of different [layout](/styles/layout-spacing) and navigation styles.\n\n## When not to use\n\nFor apps with a small number of pages, use [side navigation](/components/side-navigation) as it's better suited for providing quick access and maximising the screen space for page content.\n\nUse either top navigation or side navigation. Don't use both at the same time.\n\n\n\n## Optional elements\n\n### Search bar\n\nInclude an optional [search bar](/components/search-bar) to provide search functionality on every page in the app.\n\n### Secondary links\n\nInclude secondary links or actions that appear on the right-hand side of the top navigation. Use these for global utilities like application settings, or as links to other related sites.\n\n### App status and version\n\nUse the title adornment and app version to display the app's info in the top navigation.\n\n\n\n## Interaction behaviour\n\nWhen using a top navigation with mega-menu, the menu is displayed when hovering over, or focusing on, the main navigation groups.\n\n\n\nOn smaller screens, both top navigation variants will display a menu button that opens a drawer menu from the right-hand side of the screen. The drawer menu can display lists of single links or grouped links that can be expanded and collapsed.\n\n\n\n## Colour\n\nThe top navigation uses the app's [theme colour](/styles/colour/#theme) as the background and automatically sets the foreground colour to ensure accessible contrast ratios.\n\nChange the app's theme colour to change the background colour of the top navigation and help distinguish your app from others your users may use.\n\n\n\n## Sizing\n\nAlways position the top navigation at the top of the screen and make sure that it horizontally fills the browser window.\n\n\n\n## Layout and placement\n\n### Alignment\n\nAlign the top navigation's content either full width or centred.\n\nUse full width alignment to position the top navigation content to the left and right of the browser window.\n\n\n\nUse centre alignment to position the top navigation content in line with other page content.\n\n\n\n## Content\n\n### Labels and icons\n\nFollow the [content style guidelines](/styles/content-style) for all navigation option labels as well as each option group label.\n\nFollow the [icon style guidelines](/styles/icons) when selecting icons for menu options or secondary links.\n\n### Navigation options\n\nMake sure to keep navigation option labels concise, as they may not all fit within the top navigation on all screen sizes.\n\nFor the standard variant, don't use more than eight links as this may not display correctly.\n\n\n\n### Mega-menu\n\nInclude up to five columns of navigation links in the mega-menu and aim to keep the number of links in each column to six or fewer.\n\n\n", "path": "/components/top-navigation", "navPriority": 39, "date": "2023-02-03", @@ -4284,9 +4284,9 @@ ], "meta": { "relativePath": "components/top-nav/guidance.mdx", - "createdAt": "2024-05-09T10:42:42.003Z", - "lastModified": "2024-05-09T10:42:42.003Z", - "size": 11248, + "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 language: \"Web component\",\n snippet: `H1\nH2\nH3\nH4\nBody\nSubtitle large\nSubtitle small\nLabel\nLabel uppercase\nCaption\nCaption uppercase\nCode large\nCode small\nCode extra small`,\n },\n {\n language: \"React\",\n snippet: `H1\nH2\nH3\nH4\nBody\nSubtitle large\nSubtitle small\nLabel\nLabel uppercase\nCaption\nCaption uppercase\nCode large\nCode small\nCode extra small`,\n },\n];\n\n\n
\n H1\n H2\n H3\n H4\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 language: \"Web component\",\n snippet: `\n
H5 with H2 styling
\n`,\n },\n {\n language: \"React\",\n snippet: `\n
H5 with H2 styling
\n`,\n },\n];\n\n\n \n
H5 with H2 styling
\n \n\n\n### Vertical margins applied\n\nexport const spacingSnippets = [\n {\n language: \"Web component\",\n snippet: `\n
H5 with margins applied
\n`,\n },\n {\n language: \"React\",\n snippet: `\n
H5 with margins applied
\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 language: \"Web component\",\n snippet: `\n
H5 with H2 styling and margins applied
\n`,\n },\n {\n language: \"React\",\n snippet: `\n
H5 with H2 styling and margins applied
\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 language: \"Web component\",\n snippet: `\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 },\n {\n language: \"React\",\n snippet: `\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 },\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 language: \"Web component\",\n snippet: `Bold\nItalic\nUnderline\nStrikethrough`,\n },\n {\n language: \"React\",\n snippet: `Bold\nItalic\nUnderline\nStrikethrough`,\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": "2023-11-27", + "date": "2024-05-02", "title": "Typography", "status": "BETA", "subTitle": "Use the typography component for consistent styling across typographical elements.", @@ -4348,10 +4348,10 @@ ], "meta": { "relativePath": "components/typography/code.mdx", - "createdAt": "2024-05-09T10:42:42.007Z", - "lastModified": "2024-05-09T10:42:42.007Z", - "size": 8635, - "formattedSize": "8.4 KB" + "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-03-20T09:51:14.418Z", - "lastModified": "2024-03-20T09:51:14.418Z", + "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 language: \"Web component\",\n snippet: 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 language: \"React\",\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 \"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 language: \"Web component\",\n snippet: 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 language: \"React\",\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 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 language: \"Web component\",\n snippet: 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 language: \"React\",\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 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,9 +4849,9 @@ "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-09T10:42:42.398Z", - "lastModified": "2024-05-09T10:42:42.398Z", - "size": 62900, + "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 language: \"Web component\",\n snippet:\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 [footerLink]\n [footerLink]\n [footerLink]\n [footerLink]\n [footerLink]\n \n \n \n \n \n `),\n },\n {\n language: \"React\",\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 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 language: \"Web component\",\n snippet:\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 language: \"React\",\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 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 language: \"Web component\",\n snippet:\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 language: \"React\",\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 \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 language: \"Web component\",\n snippet:\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 language: \"React\",\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 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-09T10:42:42.402Z", - "lastModified": "2024-05-09T10:42:42.402Z", - "size": 52244, - "formattedSize": "51.0 KB" + "createdAt": "2024-05-21T09:12:11.395Z", + "lastModified": "2024-05-21T09:12:11.395Z", + "size": 57202, + "formattedSize": "55.9 KB" } }, { @@ -4894,13 +4894,13 @@ "contents": "\nimport ColorTable from \"./components/ColourTable\";\nimport {\n ColoursText,\n ColoursAction,\n ColoursActionBackgrounds,\n ColoursLinks,\n ColoursStatus,\n ColoursDeprecatedStatus,\n ColoursClassification,\n ColoursArchitecturalAll,\n ColoursTheme,\n} from \"./components/ColourTable/colours.config\";\n\n## Using colours\n\nPeople can complete tasks faster with recognisable, accessible and consistent colours.\n\nAlways use the Design System colour styles. These colours meet or exceed all [accessibility requirements](/accessibility/requirement).\n\nThe colour styles are built into the [UI Kit](/get-started). You should use these to help maintain consistency for when you are building custom experiences.\n\n## Text\n\nPrimary text is an off-black colour that satisfies minimum and maximum contrast needs. Use this colour for the majority of text and elements.\n\nUse the secondary text colour for supporting content such as helper text or less important information in lists and tables.\n\nUse the tertiary text colour for even less important information. Use the tertiary text colour sparingly and always try to use the primary or secondary colours first.\n\nDon't use different colours for text, unless specified as part of a component.\n\n\n\n## Action\n\nUse the action colour for interactive elements like buttons, form controls and important actions. This makes it easy for people to recognise elements and switch between contexts.\n\nThe single action colour creates consistency across a range of apps. Use the dark or light action colour variant if a background colour is used.\n\nUse the destructive action colour styles for actions that can't be reversed.\n\n\n\n### Action backgrounds\n\nInteractive elements sometimes require transparent backgrounds for their hover and pressed states. The action background colour styles use the action colour styles with transparency.\n\n\n\n## Links\n\nUse these colours for all links. These specific colours help to identify links from non-interactive text.\n\nUse the contrast colour variants to achieve good contrast for links that appear on dark backgrounds.\n\n\n\n## Status\n\nUse these colours only for status updates, errors and warnings. Always include text describing the status even if you use an icon.\n\nUse the contrast colour variants to achieve good contrast when displaying status on dark backgrounds.\n\nUse the 'warning dark' colour for any 'warning' text.\n\n\n\n
\n\nThe following status colours have been deprecated. You can find equivalent colours in the table above.\n\n\n\n## Classification\n\nUse these colour styles for components that indicate content's classification.\n\n\n\n## Architectural\n\nUse these colours in lines, borders and backgrounds to logically separate distinct pieces of content.\n\n\n\n## Theme\n\nYou may choose a theme colour to give your app a distinct theme or 'brand'. Make sure it meets contrast requirements with either black or white foreground text.\n\nIf you use the [IC UI Kit](/components), the foreground colour will be automatically determined based on your theme colour.\n\nThe theme colour is used on the [top navigation](/components/top-navigation), [side navigation](/components/side-navigation), [hero](/components/hero) and [footer](/components/footer) components.\n\nDon't use theme colours on any other components.\n\n\n\n## Accessibility considerations\n\nThese colours have been considered against a variety of accessibility and usability practices. This includes colour contrast, recognition, consistency and with various colour deficiencies.\n\nIf using a 'light' theme colour, any text in those components will need to be black instead of white. This is automatic if you're using the IC UI Kit. It's not possible to use 'inaccessible' colours in the IC UI Kit as they'll revert to the default theme colour. See the component documentation for more details.\n", "path": "/styles/colour", "navPriority": 1, - "date": "2022-11-15", + "date": "2024-05-10", "title": "Colour", "contribute": "https://github.com/mi6/ic-design-system/tree/main/src/content/structured/styles/colour.mdx", "meta": { "relativePath": "styles/colour.mdx", - "createdAt": "2024-05-09T12:39:18.004Z", - "lastModified": "2024-05-09T12:39:18.004Z", + "createdAt": "2024-05-13T07:27:37.419Z", + "lastModified": "2024-05-13T07:27:37.419Z", "size": 4356, "formattedSize": "4.3 KB" } diff --git a/src/pages/footer-layout.tsx b/src/pages/footer-layout.tsx index 7abcc0991..c0708962b 100644 --- a/src/pages/footer-layout.tsx +++ b/src/pages/footer-layout.tsx @@ -16,9 +16,9 @@ const FooterLayout: React.FC = () => ( diff --git a/src/pages/side-navigation-back-to-top-pattern.tsx b/src/pages/side-navigation-back-to-top-pattern.tsx index 2d091ace6..18538a3bf 100644 --- a/src/pages/side-navigation-back-to-top-pattern.tsx +++ b/src/pages/side-navigation-back-to-top-pattern.tsx @@ -61,9 +61,9 @@ const SideNavigationBackToTopPattern: React.FC = () => { > = () => { > @@ -87,9 +87,9 @@ const SideNavigationBackToTopPattern: React.FC = () => { > @@ -100,9 +100,9 @@ const SideNavigationBackToTopPattern: React.FC = () => { > @@ -113,9 +113,9 @@ const SideNavigationBackToTopPattern: React.FC = () => { > @@ -127,9 +127,9 @@ const SideNavigationBackToTopPattern: React.FC = () => { > @@ -140,9 +140,9 @@ const SideNavigationBackToTopPattern: React.FC = () => { > @@ -153,9 +153,9 @@ const SideNavigationBackToTopPattern: React.FC = () => { > @@ -166,9 +166,9 @@ const SideNavigationBackToTopPattern: React.FC = () => { > @@ -179,9 +179,9 @@ const SideNavigationBackToTopPattern: React.FC = () => { > @@ -192,9 +192,9 @@ const SideNavigationBackToTopPattern: React.FC = () => { > @@ -205,9 +205,9 @@ const SideNavigationBackToTopPattern: React.FC = () => { > @@ -259,9 +259,9 @@ const SideNavigationBackToTopPattern: React.FC = () => { = () => { > = () => { > @@ -109,9 +109,9 @@ const SideNavigationPattern: React.FC = () => { > @@ -122,9 +122,9 @@ const SideNavigationPattern: React.FC = () => { > @@ -135,9 +135,9 @@ const SideNavigationPattern: React.FC = () => { > @@ -149,9 +149,9 @@ const SideNavigationPattern: React.FC = () => { > @@ -162,9 +162,9 @@ const SideNavigationPattern: React.FC = () => { > @@ -175,9 +175,9 @@ const SideNavigationPattern: React.FC = () => { > @@ -188,9 +188,9 @@ const SideNavigationPattern: React.FC = () => { > @@ -201,9 +201,9 @@ const SideNavigationPattern: React.FC = () => { > @@ -214,9 +214,9 @@ const SideNavigationPattern: React.FC = () => { > @@ -227,9 +227,9 @@ const SideNavigationPattern: React.FC = () => { > @@ -254,9 +254,9 @@ const SideNavigationPattern: React.FC = () => { Primary button @@ -319,9 +319,9 @@ const SideNavigationPattern: React.FC = () => { = () => { > = () => { > @@ -86,9 +86,9 @@ const SideNavigationPattern: React.FC = () => { > @@ -99,9 +99,9 @@ const SideNavigationPattern: React.FC = () => { > @@ -112,9 +112,9 @@ const SideNavigationPattern: React.FC = () => { > @@ -126,9 +126,9 @@ const SideNavigationPattern: React.FC = () => { > @@ -139,9 +139,9 @@ const SideNavigationPattern: React.FC = () => { > @@ -152,9 +152,9 @@ const SideNavigationPattern: React.FC = () => { > @@ -165,9 +165,9 @@ const SideNavigationPattern: React.FC = () => { > @@ -178,9 +178,9 @@ const SideNavigationPattern: React.FC = () => { > @@ -191,9 +191,9 @@ const SideNavigationPattern: React.FC = () => { > @@ -204,9 +204,9 @@ const SideNavigationPattern: React.FC = () => { > @@ -257,9 +257,9 @@ const SideNavigationPattern: React.FC = () => {