diff --git a/package-lock.json b/package-lock.json index 51cdb7164..9fc1af41c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -36,6 +36,7 @@ "@stencil/angular-output-target": "^0.10.0", "@types/node": "^20.11.10", "cssnano": "^6.0.0", + "ncp": "^2.0.0", "ng-packagr": "^19.0.1", "nx": "^16.0.0", "sass": "^1.43.5", @@ -4054,6 +4055,12 @@ "resolved": "packages/vue", "link": true }, + "node_modules/@cdssnc/gcds-fonts": { + "version": "0.2.2", + "resolved": "https://registry.npmjs.org/@cdssnc/gcds-fonts/-/gcds-fonts-0.2.2.tgz", + "integrity": "sha512-w17pfEpG2xo4fUddpvk6+tJ6gF94eYnXi9QKClsHl5LcJLd8WN9L7a1mTmMX7Jzxd3hxFxtCP+NKjOKJwA6k1Q==", + "dev": true + }, "node_modules/@cdssnc/gcds-tokens": { "version": "2.6.0", "resolved": "https://registry.npmjs.org/@cdssnc/gcds-tokens/-/gcds-tokens-2.6.0.tgz", @@ -30176,6 +30183,15 @@ "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==", "devOptional": true }, + "node_modules/ncp": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/ncp/-/ncp-2.0.0.tgz", + "integrity": "sha512-zIdGUrPRFTUELUvr3Gmc7KZ2Sw/h1PiVM0Af/oHB6zgnV1ikqSfRk+TOufi79aHYCW3NiOXmr1BP5nWbzojLaA==", + "dev": true, + "bin": { + "ncp": "bin/ncp" + } + }, "node_modules/needle": { "version": "3.3.1", "resolved": "https://registry.npmjs.org/needle/-/needle-3.3.1.tgz", @@ -42170,6 +42186,7 @@ "@babel/core": "^7.20.12", "@babel/preset-env": "^7.20.2", "@babel/preset-typescript": "^7.21.0", + "@cdssnc/gcds-fonts": "^0.2.2", "@cdssnc/gcds-tokens": "^2.6.0", "@fortawesome/fontawesome-free": "^6.3.0", "@stencil/angular-output-target": "file:../../utils/angular-output-target", diff --git a/package.json b/package.json index 7693e2a7d..5693bfda3 100644 --- a/package.json +++ b/package.json @@ -6,7 +6,8 @@ "scripts": { "ng": "ng", "compile": "gulp compile", - "build": "npm run build --ws", + "copy-icon-font": "npx ncp ./node_modules/@cdssnc/gcds-fonts/fonts/icons ./packages/web/src/assets/fonts/icons", + "build": "npm run copy-icon-font && npm run build --ws", "pretest": "npm run patch:stenciljs", "test": "npm run test --workspace=utils/angular-output-target --workspace=packages/web --workspace=packages/vue", "build-storybook": "npm run build-storybook -w @cdssnc/gcds-components", @@ -35,6 +36,7 @@ "@stencil/angular-output-target": "^0.10.0", "@types/node": "^20.11.10", "cssnano": "^6.0.0", + "ncp": "^2.0.0", "ng-packagr": "^19.0.1", "nx": "^16.0.0", "sass": "^1.43.5", diff --git a/packages/web/package.json b/packages/web/package.json index cc066b5ee..ff0ae28e5 100644 --- a/packages/web/package.json +++ b/packages/web/package.json @@ -45,6 +45,7 @@ "@babel/core": "^7.20.12", "@babel/preset-env": "^7.20.2", "@babel/preset-typescript": "^7.21.0", + "@cdssnc/gcds-fonts": "^0.2.2", "@cdssnc/gcds-tokens": "^2.6.0", "@fortawesome/fontawesome-free": "^6.3.0", "@stencil/angular-output-target": "file:../../utils/angular-output-target", diff --git a/packages/web/src/assets/css/global.css b/packages/web/src/assets/css/global.css new file mode 100644 index 000000000..9d36ca007 --- /dev/null +++ b/packages/web/src/assets/css/global.css @@ -0,0 +1,12 @@ +/* Import GC Design System Tokens */ +@import '../../../../../node_modules/@cdssnc/gcds-tokens/build/web/css/tokens.css'; + +/* Import GC Design System Icon Font */ +@font-face { + font-family: 'gcds-icons'; + src: url('/dist/gcds/assets/fonts/gcds-icons.ttf') format('truetype'), + url('/dist/gcds/assets/fonts/gcds-icons.woff') format('woff'); + font-weight: normal; + font-style: normal; + font-display: block; +} \ No newline at end of file diff --git a/packages/web/src/assets/fonts/icons/LICENSE.txt b/packages/web/src/assets/fonts/icons/LICENSE.txt new file mode 100644 index 000000000..af7106f69 --- /dev/null +++ b/packages/web/src/assets/fonts/icons/LICENSE.txt @@ -0,0 +1,92 @@ +Copyright (c) 2024, His Majesty in Right of Canada, as represented by the Minister of Employment and Social Development, with Reserved Font Name GCDS icons. + +This Font Software is licensed under the SIL Open Font License, Version 1.1. +This license is copied below, and is also available with a FAQ at: +https://openfontlicense.org + +----------------------------------------------------------- +SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007 +----------------------------------------------------------- + +PREAMBLE +The goals of the Open Font License (OFL) are to stimulate worldwide +development of collaborative font projects, to support the font creation +efforts of academic and linguistic communities, and to provide a free and +open framework in which fonts may be shared and improved in partnership +with others. + +The OFL allows the licensed fonts to be used, studied, modified and +redistributed freely as long as they are not sold by themselves. The +fonts, including any derivative works, can be bundled, embedded, +redistributed and/or sold with any software provided that any reserved +names are not used by derivative works. The fonts and derivatives, +however, cannot be released under any other type of license. The +requirement for fonts to remain under this license does not apply +to any document created using the fonts or their derivatives. + +DEFINITIONS +"Font Software" refers to the set of files released by the Copyright +Holder(s) under this license and clearly marked as such. This may +include source files, build scripts and documentation. + +"Reserved Font Name" refers to any names specified as such after the +copyright statement(s). + +"Original Version" refers to the collection of Font Software components as +distributed by the Copyright Holder(s). + +"Modified Version" refers to any derivative made by adding to, deleting, +or substituting -- in part or in whole -- any of the components of the +Original Version, by changing formats or by porting the Font Software to a +new environment. + +"Author" refers to any designer, engineer, programmer, technical +writer or other person who contributed to the Font Software. + +PERMISSION & CONDITIONS +Permission is hereby granted, free of charge, to any person obtaining +a copy of the Font Software, to use, study, copy, merge, embed, modify, +redistribute, and sell modified and unmodified copies of the Font +Software, subject to the following conditions: + +1) Neither the Font Software nor any of its individual components, +in Original or Modified Versions, may be sold by itself. + +2) Original or Modified Versions of the Font Software may be bundled, +redistributed and/or sold with any software, provided that each copy +contains the above copyright notice and this license. These can be +included either as stand-alone text files, human-readable headers or +in the appropriate machine-readable metadata fields within text or +binary files as long as those fields can be easily viewed by the user. + +3) No Modified Version of the Font Software may use the Reserved Font +Name(s) unless explicit written permission is granted by the corresponding +Copyright Holder. This restriction only applies to the primary font name as +presented to the users. + +4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font +Software shall not be used to promote, endorse or advertise any +Modified Version, except to acknowledge the contribution(s) of the +Copyright Holder(s) and the Author(s) or with their explicit written +permission. + +5) The Font Software, modified or unmodified, in part or in whole, +must be distributed entirely under this license, and must not be +distributed under any other license. The requirement for fonts to +remain under this license does not apply to any document created +using the Font Software. + +TERMINATION +This license becomes null and void if any of the above conditions are +not met. + +DISCLAIMER +THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, +EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF +MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT +OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE +COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, +INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL +DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING +FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM +OTHER DEALINGS IN THE FONT SOFTWARE. diff --git a/packages/web/src/assets/fonts/icons/README.md b/packages/web/src/assets/fonts/icons/README.md new file mode 100644 index 000000000..c574e02a7 --- /dev/null +++ b/packages/web/src/assets/fonts/icons/README.md @@ -0,0 +1,447 @@ +([Français](#polices-de-système-de-design-gc--icônes)) + +# GC Design System Fonts - GCDS Icons + +GC Design System Fonts - GCDS Icons is a custom icon font created for the GC Design System. Icon fonts provide scalable vector icons that enhance performance, maintain consistency, and offer easy customization through CSS. Icons are used for visual communication that helps a person understand context. + +To remove the reliance on a third-party icon library (Font Awesome) we built a custom icon font. This also provides the GC Design System with more control over icons available to users. FontAwesome provides an extensive collection of icons, most of which will not be used for our components. By limiting the scope of available icons, we aim to prevent misuse and provide clear guidelines on the appropriate usage of each icon. + +## Installation + +### Install icon font with CDN + +#### Add the code + +Use the latest version of GC Design System icons. Pinned versions provide stability and predictability because the code will remain consistent and won't change unexpectedly, which can be crucial for maintaining the stability of an application. However, it requires manual updating of the CDN links whenever a newer version of GC Design System icons is released. + +To use GC Design System icons in your project, place the following code in your CSS or include the [gcds-icons.css](https://github.com/cds-snc/gcds-fonts/blob/main/fonts/icons/gcds-icons.css) file in your project. Replace `` with the latest version number to receive corresponding updates. + +```css + +@font-face { + font-family: "gcds-icons"; + src: url("https://cdn.design-system.alpha.canada.ca/@cdssnc/gcds-fonts@/icons/gcds-icons.eot"); + src: url("https://cdn.design-system.alpha.canada.ca/@cdssnc/gcds-fonts@/icons/gcds-icons.eot#iefix") + format("embedded-opentype"), url("https://cdn.design-system.alpha.canada.ca/@cdssnc/gcds-fonts@/icons/gcds-icons.ttf") + format("truetype"), + url("https://cdn.design-system.alpha.canada.ca/@cdssnc/gcds-fonts@/icons/gcds-icons.woff") + format("woff"), url("https://cdn.design-system.alpha.canada.ca/@cdssnc/gcds-fonts@/icons/gcds-icons.svg") + format("svg"); + font-weight: normal; + font-style: normal; + font-display: block; +} + +[class^="gcds-icon-"], +[class*=" gcds-icon-"] { + /* use !important to prevent issues with browser extensions that change fonts */ + font-family: "gcds-icons" !important; + speak: never; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-transform: none; + line-height: 1; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.gcds-icon-checkmark-circle:before { + content: "\e908"; +} + +.gcds-icon-chevron-down:before { + content: "\e900"; +} + +.gcds-icon-chevron-left:before { + content: "\e901"; +} + +.gcds-icon-chevron-right:before { + content: "\e902"; +} + +.gcds-icon-chevron-up:before { + content: "\e903"; +} + +.gcds-icon-close:before { + content: "\e90b"; +} + +.gcds-icon-download:before { + content: "\e906"; +} + +.gcds-icon-email:before { + content: "\e905"; +} + +.gcds-icon-exclamation-circle:before { + content: "\e909"; +} + +.gcds-icon-external:before { + content: "\e904"; +} + +.gcds-icon-information-circle:before { + content: "\e90a"; +} + +.gcds-icon-phone:before { + content: "\e90c"; +} + +.gcds-icon-search:before { + content: "\e907"; +} + +.gcds-icon-warning-triangle:before { + content: "\e90d"; +} +``` + +#### Automatic updates using `@latest` + +Use the `@latest` version of GC Design System icons to receive automatic updates whenever a new version is released. **While it removes the need to manually update the CDN links, it adds the risk of introducing breaking changes to the codebase as new versions are automatically applied**. + +### Install icon font with npm + +Navigate to the root folder of your project and run: + +```js +npm install @cdssnc/gcds-fonts +``` + +Place the following code in your CSS and replace `path/to/node_modules` with the location where you've added the node modules: + +```css + +@font-face { + font-family: "gcds-icons"; + src: url("path/to/node_modules/@cdssnc/gcds-fonts/fonts/icons/gcds-icons.eot"); + src: url("path/to/node_modules/@cdssnc/gcds-fonts/fonts/icons/gcds-icons.eot#iefix") + format("embedded-opentype"), url("path/to/node_modules/@cdssnc/gcds-fonts/fonts/icons/gcds-icons.ttf") + format("truetype"), + url("path/to/node_modules/@cdssnc/gcds-fonts/fonts/icons/gcds-icons.woff") + format("woff"), url("path/to/node_modules/@cdssnc/gcds-fonts/fonts/icons/gcds-icons.svg") + format("svg"); + font-weight: normal; + font-style: normal; + font-display: block; +} + +[class^="gcds-icon-"], +[class*=" gcds-icon-"] { + /* use !important to prevent issues with browser extensions that change fonts */ + font-family: "gcds-icons" !important; + speak: never; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-transform: none; + line-height: 1; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.gcds-icon-checkmark-circle:before { + content: "\e908"; +} + +.gcds-icon-chevron-down:before { + content: "\e900"; +} + +.gcds-icon-chevron-left:before { + content: "\e901"; +} + +.gcds-icon-chevron-right:before { + content: "\e902"; +} + +.gcds-icon-chevron-up:before { + content: "\e903"; +} + +.gcds-icon-close:before { + content: "\e90b"; +} + +.gcds-icon-download:before { + content: "\e906"; +} + +.gcds-icon-email:before { + content: "\e905"; +} + +.gcds-icon-exclamation-circle:before { + content: "\e909"; +} + +.gcds-icon-external:before { + content: "\e904"; +} + +.gcds-icon-information-circle:before { + content: "\e90a"; +} + +.gcds-icon-phone:before { + content: "\e90c"; +} + +.gcds-icon-search:before { + content: "\e907"; +} + +.gcds-icon-warning-triangle:before { + content: "\e90d"; +} +``` + +## How to use icons + +Open the [icons overview]() to see a list of all available GC Design System icons and find the icon class name of the icon you want to use. Apply the class to any HTML element where you want the icon to appear. Replace `gcds-icon-name` with the specific class name for the icon you want to use. + +```html + +``` + +If you want to use the close icon, for example, you need to add the class `gcds-icon-close`: + +```html + +``` + +## Example + +Open the [icons overview]() to see a list of all available GC Design System icons. You can find the code for the icons overview page in the [examples folder](https://github.com/cds-snc/gcds-fonts/tree/main/examples/icons). + +--- + +# Polices de Système de design GC — GCDS Icônes + +Polices de Système de design GC — GCDS Icônes est une police d'icônes sur mesure créée pour Système de design GC. Les polices d'icônes fournissent des icônes vectorielles redimensionnables qui améliorent la performance, assurent l'uniformité et offrent une personnalisation facile par le biais de CSS. Les icônes sont utilisées pour communiquer visuellement et aider les gens à comprendre le contexte. + +Pour éviter de recourir à une bibliothèque d'icônes tierce (Font Awesome), nous avons créé une police d'icônes sur mesure. Nous pouvons ainsi mieux contrôler les icônes mises à la disposition des utilisatrices et utilisateurs de Système de design GC. Font Awesome fournit une vaste collection d'icônes, dont la plupart ne seront pas utilisées pour nos composants. En limitant la quantité d'icônes disponibles, nous visons à prévenir les mauvais usages et à fournir des directives claires sur l'usage approprié de chaque icône. + +## Installation + +### Installer la police d'icônes avec le CDN + +#### Ajoutez le code + +Utilisez la version la plus récente de icônes de Système de design GC. Les versions épinglées offrent stabilité et prévisibilité parce que le code ne changera pas de manière inattendue, ce qui peut être crucial pour maintenir la stabilité d'une application. Toutefois, il faut mettre à jour manuellement les liens CDN chaque fois qu'une version plus récente de icônes de Système de design GC est publiée. + +Pour utiliser les icônes de Système de design GC dans votre projet, placez le code suivant dans votre CSS ou incluez le fichier [gcds-icons.css](https://github.com/cds-snc/gcds-fonts/blob/main/fonts/icons/gcds-icons.css) dans votre projet. Remplacez `` par le numéro de version le plus récent pour recevoir les mises à jour correspondantes. + +```css + +@font-face { + font-family: "gcds-icons"; + src: url("https://cdn.design-system.alpha.canada.ca/@cdssnc/gcds-fonts@/icons/gcds-icons.eot"); + src: url("https://cdn.design-system.alpha.canada.ca/@cdssnc/gcds-fonts@/icons/gcds-icons.eot#iefix") + format("embedded-opentype"), url("https://cdn.design-system.alpha.canada.ca/@cdssnc/gcds-fonts@/icons/gcds-icons.ttf") + format("truetype"), + url("https://cdn.design-system.alpha.canada.ca/@cdssnc/gcds-fonts@/icons/gcds-icons.woff") + format("woff"), url("https://cdn.design-system.alpha.canada.ca/@cdssnc/gcds-fonts@/icons/gcds-icons.svg") + format("svg"); + font-weight: normal; + font-style: normal; + font-display: block; +} + +[class^="gcds-icon-"], +[class*=" gcds-icon-"] { + /* use !important to prevent issues with browser extensions that change fonts */ + font-family: "gcds-icons" !important; + speak: never; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-transform: none; + line-height: 1; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.gcds-icon-checkmark-circle:before { + content: "\e908"; +} + +.gcds-icon-chevron-down:before { + content: "\e900"; +} + +.gcds-icon-chevron-left:before { + content: "\e901"; +} + +.gcds-icon-chevron-right:before { + content: "\e902"; +} + +.gcds-icon-chevron-up:before { + content: "\e903"; +} + +.gcds-icon-close:before { + content: "\e90b"; +} + +.gcds-icon-download:before { + content: "\e906"; +} + +.gcds-icon-email:before { + content: "\e905"; +} + +.gcds-icon-exclamation-circle:before { + content: "\e909"; +} + +.gcds-icon-external:before { + content: "\e904"; +} + +.gcds-icon-information-circle:before { + content: "\e90a"; +} + +.gcds-icon-phone:before { + content: "\e90c"; +} + +.gcds-icon-search:before { + content: "\e907"; +} + +.gcds-icon-warning-triangle:before { + content: "\e90d"; +} +``` + +#### Mises à jour automatiques grâce à `@latest` + +Utilisez la version `@latest` de icônes de Système de design GC pour recevoir des mises à jour automatiques chaque fois qu'une nouvelle version est publiée. **Bien que cette approche vous évite la mise à jour manuelle des liens CDN, elle court le risque d'introduire des modifications qui entraînent une rupture de compatibilité avec le code base à mesure que les nouvelles versions sont automatiquement appliquées**. + +### Installer la police d'icônes avec npm + +Naviguez jusqu'au dossier racine de votre projet et exécutez : + +```js +npm install @cdssnc/gcds-fonts +``` + +Placez le code suivant dans votre CSS et remplacez `path/to/node_modules` par l'emplacement où vous avez ajouté les modules de Node : + +```css + +@font-face { + font-family: "gcds-icons"; + src: url("path/to/node_modules/@cdssnc/gcds-fonts/fonts/icons/gcds-icons.eot"); + src: url("path/to/node_modules/@cdssnc/gcds-fonts/fonts/icons/gcds-icons.eot#iefix") + format("embedded-opentype"), url("path/to/node_modules/@cdssnc/gcds-fonts/fonts/icons/gcds-icons.ttf") + format("truetype"), + url("path/to/node_modules/@cdssnc/gcds-fonts/fonts/icons/gcds-icons.woff") + format("woff"), url("path/to/node_modules/@cdssnc/gcds-fonts/fonts/icons/gcds-icons.svg") + format("svg"); + font-weight: normal; + font-style: normal; + font-display: block; +} + +[class^="gcds-icon-"], +[class*=" gcds-icon-"] { + /* use !important to prevent issues with browser extensions that change fonts */ + font-family: "gcds-icons" !important; + speak: never; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-transform: none; + line-height: 1; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.gcds-icon-checkmark-circle:before { + content: "\e908"; +} + +.gcds-icon-chevron-down:before { + content: "\e900"; +} + +.gcds-icon-chevron-left:before { + content: "\e901"; +} + +.gcds-icon-chevron-right:before { + content: "\e902"; +} + +.gcds-icon-chevron-up:before { + content: "\e903"; +} + +.gcds-icon-close:before { + content: "\e90b"; +} + +.gcds-icon-download:before { + content: "\e906"; +} + +.gcds-icon-email:before { + content: "\e905"; +} + +.gcds-icon-exclamation-circle:before { + content: "\e909"; +} + +.gcds-icon-external:before { + content: "\e904"; +} + +.gcds-icon-information-circle:before { + content: "\e90a"; +} + +.gcds-icon-phone:before { + content: "\e90c"; +} + +.gcds-icon-search:before { + content: "\e907"; +} + +.gcds-icon-warning-triangle:before { + content: "\e90d"; +} +``` + +## Comment utiliser les icônes + +Ouvrez l'[aperçu des icônes]() pour afficher la liste de toutes les icônes de Système de design GC disponibles et trouver le nom de classe de l'icône que vous souhaitez utiliser. Appliquez la classe à n'importe quel élément HTML auquel vous voulez ajouter l'icône. Remplacez `gcds-icon-name` par le nom de classe de l'icône que vous souhaitez utiliser. + +```html + +``` + +Si vous voulez utiliser l'icône « fermer », par exemple, vous devez ajouter la classe `gcds-icon-close` : + +```html + +``` + +## Exemple + +Ouvrez l'[aperçu des icônes]() pour afficher la liste de toutes les icônes de Système de design GC disponibles. Vous trouverez le code accompagnant l'aperçu des icônes dans le dossier [exemples](https://github.com/cds-snc/gcds-fonts/tree/main/examples/icons). diff --git a/packages/web/src/assets/fonts/icons/gcds-icons.css b/packages/web/src/assets/fonts/icons/gcds-icons.css new file mode 100644 index 000000000..6e9843732 --- /dev/null +++ b/packages/web/src/assets/fonts/icons/gcds-icons.css @@ -0,0 +1,85 @@ +/* + Replace with the correct path to + the gcds-icon font files in your project +*/ +@font-face { + font-family: "gcds-icons"; + src: url("/gcds-icons.eot"); + src: url("/gcds-icons.eot#iefix") format("embedded-opentype"), + url("/gcds-icons.ttf") format("truetype"), + url("/gcds-icons.woff") format("woff"), + url("/gcds-icons.svg") format("svg"); + font-weight: normal; + font-style: normal; + font-display: block; +} + +[class^="gcds-icon-"], +[class*=" gcds-icon-"] { + /* use !important to prevent issues with browser extensions that change fonts */ + font-family: "gcds-icons" !important; + speak: never; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-transform: none; + line-height: 1; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.gcds-icon-checkmark-circle:before { + content: "\e908"; +} + +.gcds-icon-chevron-down:before { + content: "\e900"; +} + +.gcds-icon-chevron-left:before { + content: "\e901"; +} + +.gcds-icon-chevron-right:before { + content: "\e902"; +} + +.gcds-icon-chevron-up:before { + content: "\e903"; +} + +.gcds-icon-close:before { + content: "\e90b"; +} + +.gcds-icon-download:before { + content: "\e906"; +} + +.gcds-icon-email:before { + content: "\e905"; +} + +.gcds-icon-exclamation-circle:before { + content: "\e909"; +} + +.gcds-icon-external:before { + content: "\e904"; +} + +.gcds-icon-information-circle:before { + content: "\e90a"; +} + +.gcds-icon-phone:before { + content: "\e90c"; +} + +.gcds-icon-search:before { + content: "\e907"; +} + +.gcds-icon-warning-triangle:before { + content: "\e90d"; +} diff --git a/packages/web/src/assets/fonts/icons/gcds-icons.eot b/packages/web/src/assets/fonts/icons/gcds-icons.eot new file mode 100644 index 000000000..0b1d1e921 Binary files /dev/null and b/packages/web/src/assets/fonts/icons/gcds-icons.eot differ diff --git a/packages/web/src/assets/fonts/icons/gcds-icons.svg b/packages/web/src/assets/fonts/icons/gcds-icons.svg new file mode 100644 index 000000000..ebbd8908d --- /dev/null +++ b/packages/web/src/assets/fonts/icons/gcds-icons.svg @@ -0,0 +1,24 @@ + + + +Generated by IcoMoon + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/packages/web/src/assets/fonts/icons/gcds-icons.ttf b/packages/web/src/assets/fonts/icons/gcds-icons.ttf new file mode 100644 index 000000000..a1809ec5a Binary files /dev/null and b/packages/web/src/assets/fonts/icons/gcds-icons.ttf differ diff --git a/packages/web/src/assets/fonts/icons/gcds-icons.woff b/packages/web/src/assets/fonts/icons/gcds-icons.woff new file mode 100644 index 000000000..b880c6b68 Binary files /dev/null and b/packages/web/src/assets/fonts/icons/gcds-icons.woff differ diff --git a/packages/web/src/components.d.ts b/packages/web/src/components.d.ts index 5e9c4e3ee..ed8aa13d8 100644 --- a/packages/web/src/components.d.ts +++ b/packages/web/src/components.d.ts @@ -590,7 +590,20 @@ export namespace Components { /** * Name of the icon. */ - "name": string; + "name": | 'checkmark-circle' + | 'chevron-down' + | 'chevron-left' + | 'chevron-right' + | 'chevron-up' + | 'close' + | 'download' + | 'email' + | 'exclamation-circle' + | 'external' + | 'info-circle' + | 'phone' + | 'search' + | 'warning-triangle'; /** * Defines the size of the icon. */ @@ -2413,7 +2426,20 @@ declare namespace LocalJSX { /** * Name of the icon. */ - "name": string; + "name": | 'checkmark-circle' + | 'chevron-down' + | 'chevron-left' + | 'chevron-right' + | 'chevron-up' + | 'close' + | 'download' + | 'email' + | 'exclamation-circle' + | 'external' + | 'info-circle' + | 'phone' + | 'search' + | 'warning-triangle'; /** * Defines the size of the icon. */ diff --git a/packages/web/src/components/gcds-alert/gcds-alert.tsx b/packages/web/src/components/gcds-alert/gcds-alert.tsx index 1372bc1b2..32f7d1344 100644 --- a/packages/web/src/components/gcds-alert/gcds-alert.tsx +++ b/packages/web/src/components/gcds-alert/gcds-alert.tsx @@ -138,9 +138,9 @@ export class GcdsAlert { : alertRole === 'info' ? 'info-circle' : alertRole === 'success' - ? 'check-circle' + ? 'checkmark-circle' : alertRole === 'warning' - ? 'exclamation-triangle' + ? 'warning-triangle' : null } /> @@ -164,7 +164,7 @@ export class GcdsAlert { }} aria-label={i18n[lang].closeBtn} > -