From 45458ea3951df2e9e32525cb1dc31724d4fa6633 Mon Sep 17 00:00:00 2001 From: Amrita Desmet <176904642+amritadesmet@users.noreply.github.com> Date: Tue, 29 Oct 2024 16:06:54 +0000 Subject: [PATCH 1/6] Update iconography foundation pg.mdx --- site/docs/foundations/iconography.mdx | 23 ++++++++++++++++++++++- 1 file changed, 22 insertions(+), 1 deletion(-) diff --git a/site/docs/foundations/iconography.mdx b/site/docs/foundations/iconography.mdx index b305d4afcd3..3386e49c031 100644 --- a/site/docs/foundations/iconography.mdx +++ b/site/docs/foundations/iconography.mdx @@ -3,10 +3,31 @@ 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. ## All icons +## 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. + :fragment{src="./fragments/feedback.mdx"} From c75c44d14d2cdbf4903b8646e03e78b41ec30fac Mon Sep 17 00:00:00 2001 From: Amrita Desmet <176904642+amritadesmet@users.noreply.github.com> Date: Mon, 4 Nov 2024 14:39:22 +0000 Subject: [PATCH 2/6] Update iconography.mdx Put in existing scale components for size icon and size base --- site/docs/foundations/iconography.mdx | 46 +++++++++++++++++++++++++++ 1 file changed, 46 insertions(+) diff --git a/site/docs/foundations/iconography.mdx b/site/docs/foundations/iconography.mdx index 3386e49c031..78abd6231af 100644 --- a/site/docs/foundations/iconography.mdx +++ b/site/docs/foundations/iconography.mdx @@ -26,8 +26,54 @@ Outline icons have a lower emphasis on non-imperative items and are more recogni +## 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. +## All country symbols + +```jsx +import { BE } from '@salt-ds/countries'; +``` + +## 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"} From 45bcd87fd0727c0319fd97ebf5f553e0ca0ed749 Mon Sep 17 00:00:00 2001 From: Amrita Desmet <176904642+amritadesmet@users.noreply.github.com> Date: Mon, 4 Nov 2024 17:12:31 +0000 Subject: [PATCH 3/6] Update iconography.mdx --- site/docs/foundations/iconography.mdx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/site/docs/foundations/iconography.mdx b/site/docs/foundations/iconography.mdx index 78abd6231af..535a72446d0 100644 --- a/site/docs/foundations/iconography.mdx +++ b/site/docs/foundations/iconography.mdx @@ -53,9 +53,7 @@ Country symbols can be considered icons that are visually representative of a co ## All country symbols -```jsx -import { BE } from '@salt-ds/countries'; -``` + ## Scaling country symbols with size base From ff23cb16e008980cbac9aecae9ffc5c281f27aab Mon Sep 17 00:00:00 2001 From: amritadesmet <176904642+amritadesmet@users.noreply.github.com> Date: Wed, 6 Nov 2024 14:00:53 +0000 Subject: [PATCH 4/6] add-images-foundations --- .../img/foundations/countrysymbols-variants.png | Bin 0 -> 27679 bytes site/public/img/foundations/icon-variants.png | Bin 0 -> 17452 bytes 2 files changed, 0 insertions(+), 0 deletions(-) create mode 100644 site/public/img/foundations/countrysymbols-variants.png create mode 100644 site/public/img/foundations/icon-variants.png diff --git a/site/public/img/foundations/countrysymbols-variants.png b/site/public/img/foundations/countrysymbols-variants.png new file mode 100644 index 0000000000000000000000000000000000000000..215ef4d35c40478c72c200f00f1213f57afc25b7 GIT binary patch literal 27679 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 Date: Thu, 7 Nov 2024 10:41:08 +0000 Subject: [PATCH 5/6] docs:update iconograpy images --- site/docs/foundations/iconography.mdx | 10 ++++++++++ ...s.png => iconography-countrysymbols-variant.png} | Bin ...n-variants.png => iconography-icon-variants.png} | Bin 3 files changed, 10 insertions(+) rename site/public/img/foundations/{countrysymbols-variants.png => iconography-countrysymbols-variant.png} (100%) rename site/public/img/foundations/{icon-variants.png => iconography-icon-variants.png} (100%) diff --git a/site/docs/foundations/iconography.mdx b/site/docs/foundations/iconography.mdx index 535a72446d0..229f3ba0f3a 100644 --- a/site/docs/foundations/iconography.mdx +++ b/site/docs/foundations/iconography.mdx @@ -22,6 +22,11 @@ Solid icons are faster to recognise than outline icons due to less visual noise, 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 @@ -51,6 +56,11 @@ Icon size will vary based on use case and system requirements. Standard sizing e 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 diff --git a/site/public/img/foundations/countrysymbols-variants.png b/site/public/img/foundations/iconography-countrysymbols-variant.png similarity index 100% rename from site/public/img/foundations/countrysymbols-variants.png rename to site/public/img/foundations/iconography-countrysymbols-variant.png diff --git a/site/public/img/foundations/icon-variants.png b/site/public/img/foundations/iconography-icon-variants.png similarity index 100% rename from site/public/img/foundations/icon-variants.png rename to site/public/img/foundations/iconography-icon-variants.png From a811b8de7d823d54ec22adb8bcff50986473f145 Mon Sep 17 00:00:00 2001 From: origami-z <5257855+origami-z@users.noreply.github.com> Date: Thu, 7 Nov 2024 13:12:32 +0000 Subject: [PATCH 6/6] Fix lint. Update country symbol preview. --- site/docs/foundations/iconography.mdx | 19 +++--- .../CountrySymbolPreview.tsx | 63 +++++++++++++++++++ .../country-symbol-preview/index.ts | 1 + site/src/components/index.ts | 1 + 4 files changed, 75 insertions(+), 9 deletions(-) create mode 100644 site/src/components/country-symbol-preview/CountrySymbolPreview.tsx create mode 100644 site/src/components/country-symbol-preview/index.ts diff --git a/site/docs/foundations/iconography.mdx b/site/docs/foundations/iconography.mdx index 229f3ba0f3a..8285077bc28 100644 --- a/site/docs/foundations/iconography.mdx +++ b/site/docs/foundations/iconography.mdx @@ -3,24 +3,25 @@ title: Iconography layout: DetailTechnical --- -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. +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 + +- 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. +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. +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. +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 circular flag next to rectangular flag -## All country symbols +## 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. +Country symbols have a default size across all four densities, changed in multiples of the base size. { + 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";