diff --git a/site/docs/foundations/accent.mdx b/site/docs/foundations/accent.mdx index 19dee9553ca..c3951922a64 100644 --- a/site/docs/foundations/accent.mdx +++ b/site/docs/foundations/accent.mdx @@ -1,6 +1,8 @@ --- title: Accent layout: DetailTechnical +sidebar: + priority: 14 data: status: In progress --- diff --git a/site/docs/foundations/color.mdx b/site/docs/foundations/color.mdx index 5c1390f4eea..bb7cbeb7acf 100644 --- a/site/docs/foundations/color.mdx +++ b/site/docs/foundations/color.mdx @@ -1,7 +1,8 @@ --- title: Color layout: DetailTechnical -data: +sidebar: + priority: 13 --- Colors can be used to communicate meaning, establish visual hierarchy, and differentiate products, all while ensuring a cohesive and accessible experience. Colors are divided into several categories to communicate several concepts across the Salt design system. diff --git a/site/docs/foundations/density.mdx b/site/docs/foundations/density.mdx index 418e1199b97..55f025cafa0 100644 --- a/site/docs/foundations/density.mdx +++ b/site/docs/foundations/density.mdx @@ -1,6 +1,8 @@ --- title: Density layout: DetailTechnical +sidebar: + priority: 12 --- Density relates to the amount of content that can fit on a screen based on the [size](./size) and [spacing](./spacing) of components. diff --git a/site/docs/foundations/division.mdx b/site/docs/foundations/division.mdx index 7bd4ec3afce..205a294654f 100644 --- a/site/docs/foundations/division.mdx +++ b/site/docs/foundations/division.mdx @@ -1,6 +1,8 @@ --- title: Division layout: DetailTechnical +sidebar: + priority: 11 data: status: In progress --- diff --git a/site/docs/foundations/duration.mdx b/site/docs/foundations/duration.mdx index 60e971ccf42..78e63b82813 100644 --- a/site/docs/foundations/duration.mdx +++ b/site/docs/foundations/duration.mdx @@ -1,6 +1,8 @@ --- title: Duration layout: DetailTechnical +sidebar: + priority: 10 --- Duration represents the time between a user performing an action and the system giving feedback. Consistency in timing provides comfort and can increase trust in a system. diff --git a/site/docs/foundations/iconography.mdx b/site/docs/foundations/iconography.mdx deleted file mode 100644 index b305d4afcd3..00000000000 --- a/site/docs/foundations/iconography.mdx +++ /dev/null @@ -1,12 +0,0 @@ ---- -title: Iconography -layout: DetailTechnical ---- - -Icons are visually simplified and recognizable symbols that represent a specific action, object or concept. There are two variant types: Outline and Solid. All icons within the icon set have an outline variant, but not all have a solid variant, for instance, `minimize` (a horizontal dash). - -## All icons - - - -:fragment{src="./fragments/feedback.mdx"} diff --git a/site/docs/foundations/iconography/country-symbols.mdx b/site/docs/foundations/iconography/country-symbols.mdx new file mode 100644 index 00000000000..105f18e80f3 --- /dev/null +++ b/site/docs/foundations/iconography/country-symbols.mdx @@ -0,0 +1,36 @@ +--- +title: Country symbols +layout: DetailTechnical +--- + +Country symbols represent a specific country and are used in contexts where geographical identification is necessary. They can be considered icons that are visually representative of a country or inter-governmental organisation. All country symbols are available in both circle and rectangle shapes. + +Example of circular country symbols next to rectangular country symbols + +## All country symbols + + + +## Scaling country symbols + +Country symbols have a standard size that changes in multiples across all four density levels. + + + +| Size token | Multiplier | High Density (HD) | Medium Density (MD) | Low Density (LD) | Touch Density (TD) | +| ------------------ | ---------- | ----------------- | ------------------- | ---------------- | ------------------ | +| `--salt-size-base` | x1 | 20 | 28 | 36 | 44 | +| | x2 | 40 | 56 | 72 | 88 | +| | x3 | 60 | 84 | 108 | 132 | +| | x4 | 80 | 112 | 144 | 176 | + +:fragment{src="./../fragments/feedback.mdx"} diff --git a/site/docs/foundations/iconography/index.mdx b/site/docs/foundations/iconography/index.mdx new file mode 100644 index 00000000000..c8cb9538e28 --- /dev/null +++ b/site/docs/foundations/iconography/index.mdx @@ -0,0 +1,48 @@ +--- +title: Icons +layout: DetailTechnical +sidebar: + groupLabel: Iconography + label: Icons + priority: 9 +--- + +Icons are simplified visual representations of a specific action, object or concept. + +## Icon variants + +Icons come in two variant types: **Outline** and **Solid**. Please note that all icons within the icon set have an outline variant, but not all icons have a solid variant. + +**Solid icons** may be faster to recognise than outline icons due to less visual noise, especially depending on the complexity of the icon. Solid icons better represent how we view objects, whereas outline icons are silhouettes and therefore can take longer to perceive. + +**Outline icons** place less emphasis on non-imperative items and are more recognizable when they have wider inner spacing. They’re also better to use when you need to make subtle design cues more noticeable. + +Example of solid and outline icons + +## All icons + + + +## Scaling icons + +Icon size will vary based on use case and system requirements. Standard sizing ensures components maintain a consistent spatial relationship with surrounding elements. + + + +| Size token | Multiplier | High Density (HD) | Medium Density (MD) | Low Density (LD) | Touch Density (TD) | +| ------------------ | ---------- | ----------------- | ------------------- | ---------------- | ------------------ | +| `--salt-size-icon` | x1 | 12 \* | 12 | 14 | 16 | +| | x2 | 20 | 24 | 28 | 32 | +| | x3 | 30 | 36 | 42 | 48 | +| | x4 | 40 | 48 | 56 | 64 | + +\* Icons have a minimum size set at 12px and should not be displayed any smaller. For high density this means the default size of an icon is 12px, but the rest of the scale grows based on small base dimension. diff --git a/site/docs/foundations/modes.mdx b/site/docs/foundations/modes.mdx index 42cac8ef02b..5d6588bd556 100644 --- a/site/docs/foundations/modes.mdx +++ b/site/docs/foundations/modes.mdx @@ -1,6 +1,8 @@ --- title: Modes layout: DetailTechnical +sidebar: + priority: 8 data: status: In progress --- diff --git a/site/docs/foundations/opacity.mdx b/site/docs/foundations/opacity.mdx index 452aae94997..fafe26b289f 100644 --- a/site/docs/foundations/opacity.mdx +++ b/site/docs/foundations/opacity.mdx @@ -1,6 +1,8 @@ --- title: Opacity layout: DetailTechnical +sidebar: + priority: 7 data: status: In progress --- diff --git a/site/docs/foundations/responsiveness.mdx b/site/docs/foundations/responsiveness.mdx index 25399350775..7a46a4e6092 100644 --- a/site/docs/foundations/responsiveness.mdx +++ b/site/docs/foundations/responsiveness.mdx @@ -1,6 +1,8 @@ --- title: Responsiveness layout: DetailTechnical +sidebar: + priority: 6 --- A responsive layout makes dynamic changes to the appearance of a product in response to the size of the screen. diff --git a/site/docs/foundations/scale.mdx b/site/docs/foundations/scale.mdx index 8581db8fbf9..a0eb17232cd 100644 --- a/site/docs/foundations/scale.mdx +++ b/site/docs/foundations/scale.mdx @@ -1,6 +1,8 @@ --- title: Scale layout: DetailTechnical +sidebar: + priority: 5 --- Scale allows you to give components greater or lesser prominence within an interface through a multiplier of their default size. diff --git a/site/docs/foundations/shadow.mdx b/site/docs/foundations/shadow.mdx index f5e09c57786..cc7980d539e 100644 --- a/site/docs/foundations/shadow.mdx +++ b/site/docs/foundations/shadow.mdx @@ -1,6 +1,8 @@ --- title: Shadow layout: DetailTechnical +sidebar: + priority: 4 data: status: In progress --- diff --git a/site/docs/foundations/size.mdx b/site/docs/foundations/size.mdx index 84cbe9e80ce..12cfec68cba 100644 --- a/site/docs/foundations/size.mdx +++ b/site/docs/foundations/size.mdx @@ -1,6 +1,8 @@ --- title: Size layout: DetailTechnical +sidebar: + priority: 3 --- Size refers to the restricted dimensions provided within the design system, such as an element's height and/or width. diff --git a/site/docs/foundations/spacing.mdx b/site/docs/foundations/spacing.mdx index 06a20c3a3b2..b9fc35ed4ff 100644 --- a/site/docs/foundations/spacing.mdx +++ b/site/docs/foundations/spacing.mdx @@ -1,6 +1,8 @@ --- title: Spacing layout: DetailTechnical +sidebar: + priority: 2 --- The organization of space is a key aspect of design. Spatial tokens help align layouts and create consistent visual rhythm. diff --git a/site/docs/foundations/typography.mdx b/site/docs/foundations/typography.mdx index 7274ef9b8f1..66e67a0fd84 100644 --- a/site/docs/foundations/typography.mdx +++ b/site/docs/foundations/typography.mdx @@ -1,6 +1,8 @@ --- title: Typography layout: DetailTechnical +sidebar: + priority: 1 --- Typography involves the style and appearance of written language. It plays a crucial role in enhancing readability, establishing hierarchy, and setting a visual tone, resulting in more effective and expressive communication. diff --git a/site/public/img/foundations/iconography-countrysymbols-variant.png b/site/public/img/foundations/iconography-countrysymbols-variant.png new file mode 100644 index 00000000000..215ef4d35c4 Binary files /dev/null and b/site/public/img/foundations/iconography-countrysymbols-variant.png differ diff --git a/site/public/img/foundations/iconography-icon-variants.png b/site/public/img/foundations/iconography-icon-variants.png new file mode 100644 index 00000000000..e995ffe3166 Binary files /dev/null and b/site/public/img/foundations/iconography-icon-variants.png differ diff --git a/site/src/components/country-symbol-preview/CountrySymbolPreview.module.css b/site/src/components/country-symbol-preview/CountrySymbolPreview.module.css new file mode 100644 index 00000000000..3a19b594815 --- /dev/null +++ b/site/src/components/country-symbol-preview/CountrySymbolPreview.module.css @@ -0,0 +1,28 @@ +.root { + min-height: 400px; +} + +.formfield { + display: flex; +} + +.search { + max-width: 40ch; + flex: 1; +} + +.symbolsContainer { + overflow: auto; + max-height: 800px; + margin-top: var(--salt-spacing-300); +} + +.notFound { + flex: 1; + justify-content: center; +} + +.symbolCount { + display: flex; + align-items: center; +} diff --git a/site/src/components/country-symbol-preview/CountrySymbolPreview.tsx b/site/src/components/country-symbol-preview/CountrySymbolPreview.tsx new file mode 100644 index 00000000000..8de8dcf6e5e --- /dev/null +++ b/site/src/components/country-symbol-preview/CountrySymbolPreview.tsx @@ -0,0 +1,115 @@ +import { + Button, + FlexItem, + FlexLayout, + FlowLayout, + Input, + StackLayout, + StatusIndicator, + Text, +} from "@salt-ds/core"; +import { LazyCountrySymbol, countryMetaMap } from "@salt-ds/countries"; +import { CloseIcon, SearchIcon } from "@salt-ds/icons"; +import { + type ChangeEvent, + Suspense, + useDeferredValue, + useMemo, + useState, +} from "react"; +import styles from "./CountrySymbolPreview.module.css"; + +export const CountrySymbolPreview = () => { + const [search, setSearch] = useState(""); + const deferredSearch = useDeferredValue(search.toLowerCase()); + + const handleSearch = (event: ChangeEvent) => { + setSearch(event.target.value); + }; + + const handleClear = () => { + setSearch(""); + }; + + const filteredSymbols = useMemo(() => { + return Object.values(countryMetaMap).filter( + ({ countryCode, countryName }) => + countryCode.toLowerCase().includes(deferredSearch) || + countryName.toLowerCase().includes(deferredSearch), + ); + }, [deferredSearch]); + + const renderSymbols = useMemo(() => { + if (filteredSymbols.length > 0) { + return ( + + {filteredSymbols.map(({ countryCode, countryName }) => ( + + + + {countryCode} + {countryName} + + + ))} + + ); + } + return ( + + + + + No country symbols found + + + No country symbols found for the search term: " + {deferredSearch}" + + + + ); + }, [filteredSymbols, deferredSearch]); + + return ( + + + + + } + endAdornment={ + search ? ( + + ) : null + } + /> + + + + Symbol Count: {filteredSymbols.length} + + + +
{renderSymbols}
+ + + ); +}; diff --git a/site/src/components/country-symbol-preview/index.ts b/site/src/components/country-symbol-preview/index.ts new file mode 100644 index 00000000000..82d0e606e03 --- /dev/null +++ b/site/src/components/country-symbol-preview/index.ts @@ -0,0 +1 @@ +export * from "./CountrySymbolPreview"; diff --git a/site/src/components/icon-preview/IconPreview.module.css b/site/src/components/icon-preview/IconPreview.module.css index 5a023341fa9..e6cd67ee800 100644 --- a/site/src/components/icon-preview/IconPreview.module.css +++ b/site/src/components/icon-preview/IconPreview.module.css @@ -2,17 +2,12 @@ min-height: 400px; } -.toolbar { - min-height: calc(var(--salt-size-base) + var(--salt-spacing-200)); -} - -/* Overrides flex-grow: 1. */ -.toolbar.toolbar { - flex-grow: 0; +.formfield { + display: flex; } .iconName { - text-wrap: balance; + text-wrap: none; text-align: center; } @@ -21,6 +16,11 @@ flex: 1; } +.gridContainer { + max-height: 800px; + overflow: auto; +} + .iconCard { padding-top: var(--salt-spacing-300); padding-inline: var(--salt-spacing-25); @@ -39,3 +39,8 @@ flex: 1; justify-content: center; } + +.iconCount { + display: flex; + align-items: center; +} diff --git a/site/src/components/icon-preview/IconPreview.tsx b/site/src/components/icon-preview/IconPreview.tsx index 5e1b6cfd157..4c1b28dbd6e 100644 --- a/site/src/components/icon-preview/IconPreview.tsx +++ b/site/src/components/icon-preview/IconPreview.tsx @@ -1,9 +1,14 @@ import { Button, + Checkbox, + CheckboxGroup, + FlexItem, + FlexLayout, FlowLayout, + FormField, + FormFieldLabel, Input, SaltProvider, - SplitLayout, StackLayout, StatusIndicator, Text, @@ -15,8 +20,11 @@ import { allIcons } from "./allIconsList"; export function IconPreview() { const [search, setSearch] = useState(""); - const deferredSearch = useDeferredValue(search); - const [actualSize, setActualSize] = useState(false); + const deferredSearch = useDeferredValue(search.toLowerCase()); + const [variants, setVariants] = useState<("solid" | "outline")[]>([ + "solid", + "outline", + ]); const handleSearch = (event: ChangeEvent) => { setSearch(event.target.value); @@ -26,23 +34,77 @@ export function IconPreview() { setSearch(""); }; - const handleActualSizeToggle = (event: ChangeEvent) => { - setActualSize(event.target.checked); + const handleVariantChange = (event: ChangeEvent) => { + setVariants((prevVariants) => { + const { value, checked } = event.target; + if (checked) { + return [...prevVariants, value as "solid" | "outline"]; + } + return prevVariants.filter((variant) => variant !== value); + }); }; - const filteredIcons = useMemo( - () => - Object.entries(allIcons).filter(([name]) => - new RegExp(deferredSearch, "i").test(name), - ), - [deferredSearch], - ); + const filteredIcons = useMemo(() => { + return Object.entries(allIcons).filter(([name]) => { + const matchesSearch = name.toLowerCase().includes(deferredSearch); + const isOutlineIcon = !name.endsWith("SolidIcon"); + const isSolidIcon = name.endsWith("SolidIcon"); + return ( + matchesSearch && + ((variants.includes("outline") && isOutlineIcon) || + (variants.includes("solid") && isSolidIcon)) + ); + }); + }, [deferredSearch, variants]); + + const renderIcons = useMemo(() => { + if (filteredIcons.length > 0) { + return ( +
+ + {filteredIcons.map(([name, Icon]) => ( + +
+ +
+ + {name.replace(/([A-Z])/g, " $1")} + + + ))} + +
+ ); + } + return ( + + + + + No icons found + + + No icons found for the search term: " + {deferredSearch}" + + + + ); + }, [filteredIcons, deferredSearch]); return ( - + } endAdornment={ - search.length > 0 && ( + search ? ( - ) + ) : null } /> - } - align="center" - /> - - {filteredIcons.length > 0 && ( - - {filteredIcons.map(([name, Icon]) => { - return ( - -
- -
- - {name.replaceAll(/([A-Z])/g, " $1")} - - - ); - })} - - )} - {filteredIcons.length === 0 && ( - - - - - No icons found - - - No icons found for the search term: " - {deferredSearch}" - - - - )} - + + + + Show variant + + + + + + + + + Icon Count: {filteredIcons.length} + + + + {renderIcons} ); } diff --git a/site/src/components/index.ts b/site/src/components/index.ts index 305a4a72dad..66a933c019a 100644 --- a/site/src/components/index.ts +++ b/site/src/components/index.ts @@ -7,6 +7,7 @@ export * from "./callout"; export * from "./card"; export * from "./components"; +export * from "./country-symbol-preview"; export * from "./diagrams"; export * from "./example-container"; export * from "./footer";