diff --git a/site/docs/foundations/iconography.mdx b/site/docs/foundations/iconography.mdx index b305d4afcd3..8285077bc28 100644 --- a/site/docs/foundations/iconography.mdx +++ b/site/docs/foundations/iconography.mdx @@ -3,10 +3,86 @@ 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). +Icons are simplified visual representations of a specific action, object or concept. Country symbols represent a specific country and are used in contexts where geographical identification is necessary. + +The Salt design system has: + +- 415 icons +- 265 outline icons +- 150 solid icons + +## 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 115 don’t have a solid variant. + +### Solid icons + +Solid icons are 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 + +Outline icons have a lower emphasis on non-imperative items and are more recognisable 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 with size icon + +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 (px) | Medium | Low | Touch | +| ------------------ | ---------- | ----------------- | ------ | --- | ----- | +| `--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. + +## Country symbols + +Country symbols can be considered icons that are visually representative of a country or inter-governmental organisation. All flags are available in both circle and rectangle shapes. + +Example of circular flag next to rectangular flag + +## All country symbols + + + +## Scaling country symbols with size base + +Country symbols have a default size across all four densities, changed in multiples of the base size. + + + +| Size token | Multiplier | High density (px) | Medium | Low | Touch | +| ------------------ | ---------- | ----------------- | ------ | --- | ----- | +| `--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/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.tsx b/site/src/components/country-symbol-preview/CountrySymbolPreview.tsx new file mode 100644 index 00000000000..11c6a1bdaa9 --- /dev/null +++ b/site/src/components/country-symbol-preview/CountrySymbolPreview.tsx @@ -0,0 +1,63 @@ +import { + FlowLayout, + FormField, + FormFieldLabel, + Input, + StackLayout, + Text, +} from "@salt-ds/core"; +import { LazyCountrySymbol, countryMetaMap } from "@salt-ds/countries"; +import { Suspense, useState } from "react"; + +// Mostly the same as AllCountrySymbols site example, could iterate later +export const CountrySymbolPreview = () => { + const [inputText, setInputText] = useState(""); + + return ( + + + + Search country symbols + { + setInputText(event.target.value); + }, + }} + /> + +
+ + {Object.values(countryMetaMap) + .filter(({ countryCode, countryName }) => { + const searchText = inputText.toLowerCase(); + + return ( + countryCode.toLowerCase().includes(searchText) || + countryName.toLowerCase().includes(searchText) + ); + }) + .map(({ countryCode, countryName }) => { + return ( + + + {countryCode} + {countryName} + + ); + })} + +
+ + + ); +}; 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/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";