From 8208c0c25550aa3cea9eec00752630883febcbd2 Mon Sep 17 00:00:00 2001 From: Kari Salminen Date: Mon, 25 Mar 2024 16:37:26 +0200 Subject: [PATCH] refactor: use HDS icons, remove unused icons/svgs/styles refs HH-349 --- apps/events-helsinki/src/styles/mixins.scss | 29 -------------- apps/hobbies-helsinki/src/styles/mixins.scss | 29 -------------- apps/sports-helsinki/src/styles/mixins.scss | 29 -------------- packages/components/package.json | 1 + .../multiSelectDropdown.module.scss | 2 - .../rangeDropdown/rangeDropdown.module.scss | 1 - .../icons/svg/copied-from-hds/angle-left.svg | 5 --- .../icons/svg/copied-from-hds/angle-right.svg | 5 --- .../src/icons/svg/copied-from-hds/readme.md | 5 --- .../components/src/icons/svg/facebook.svg | 11 ----- .../components/src/icons/svg/helsinki-fi.svg | 1 - .../components/src/icons/svg/helsinki-sv.svg | 1 - packages/components/src/icons/svg/link.svg | 12 ------ .../components/src/icons/svg/linkedin.svg | 9 ----- .../components/src/icons/svg/suprise-me.svg | 24 ----------- packages/components/src/icons/svg/twitter.svg | 9 ----- packages/components/src/styles/askem.scss | 40 +++++-------------- .../components/src/styles/icons.module.scss | 9 +++++ packages/components/src/styles/mixins.scss | 29 -------------- static/assets/images/feedback/arrow-right.svg | 10 ----- static/assets/images/feedback/envelope.svg | 10 ----- .../assets/images/feedback/face-neutral.svg | 12 ------ static/assets/images/feedback/face-sad.svg | 12 ------ static/assets/images/feedback/face-smile.svg | 12 ------ static/assets/images/share/facebook.svg | 3 -- static/assets/images/share/link.svg | 3 -- static/assets/images/share/linkedin.svg | 3 -- static/assets/images/share/share.svg | 3 -- static/assets/images/share/twitter.svg | 3 -- static/assets/images/share/whatsapp.svg | 3 -- static/assets/images/share/x.svg | 4 -- yarn.lock | 8 ++++ 32 files changed, 29 insertions(+), 308 deletions(-) delete mode 100644 apps/events-helsinki/src/styles/mixins.scss delete mode 100644 apps/hobbies-helsinki/src/styles/mixins.scss delete mode 100644 apps/sports-helsinki/src/styles/mixins.scss delete mode 100644 packages/components/src/icons/svg/copied-from-hds/angle-left.svg delete mode 100644 packages/components/src/icons/svg/copied-from-hds/angle-right.svg delete mode 100644 packages/components/src/icons/svg/copied-from-hds/readme.md delete mode 100644 packages/components/src/icons/svg/facebook.svg delete mode 100644 packages/components/src/icons/svg/helsinki-fi.svg delete mode 100644 packages/components/src/icons/svg/helsinki-sv.svg delete mode 100644 packages/components/src/icons/svg/link.svg delete mode 100644 packages/components/src/icons/svg/linkedin.svg delete mode 100644 packages/components/src/icons/svg/suprise-me.svg delete mode 100644 packages/components/src/icons/svg/twitter.svg create mode 100644 packages/components/src/styles/icons.module.scss delete mode 100644 packages/components/src/styles/mixins.scss delete mode 100644 static/assets/images/feedback/arrow-right.svg delete mode 100644 static/assets/images/feedback/envelope.svg delete mode 100644 static/assets/images/feedback/face-neutral.svg delete mode 100644 static/assets/images/feedback/face-sad.svg delete mode 100644 static/assets/images/feedback/face-smile.svg delete mode 100644 static/assets/images/share/facebook.svg delete mode 100644 static/assets/images/share/link.svg delete mode 100644 static/assets/images/share/linkedin.svg delete mode 100644 static/assets/images/share/share.svg delete mode 100644 static/assets/images/share/twitter.svg delete mode 100644 static/assets/images/share/whatsapp.svg delete mode 100644 static/assets/images/share/x.svg diff --git a/apps/events-helsinki/src/styles/mixins.scss b/apps/events-helsinki/src/styles/mixins.scss deleted file mode 100644 index 5a71a9b23..000000000 --- a/apps/events-helsinki/src/styles/mixins.scss +++ /dev/null @@ -1,29 +0,0 @@ -// **** Mixins -@mixin placeholder($_color) { - /* Chrome/Opera/Safari */ - &::-webkit-input-placeholder { - color: $_color; - } - /* Firefox 19+ */ - &::-moz-placeholder { - color: $_color; - } - /* IE 10+ */ - &:-ms-input-placeholder { - color: $_color; - } - /* Firefox 18- */ - &:-moz-placeholder { - color: $_color; - } -} - -// Helsinki logo -@mixin helsinki-logo($lang: 'fi') { - background-image: url('../icons/svg/helsinki-fi.svg'); - background-size: contain; - background-repeat: no-repeat; - @if $lang == 'sv' { - background-image: url('../icons/svg/helsinki-sv.svg'); - } -} diff --git a/apps/hobbies-helsinki/src/styles/mixins.scss b/apps/hobbies-helsinki/src/styles/mixins.scss deleted file mode 100644 index 5a71a9b23..000000000 --- a/apps/hobbies-helsinki/src/styles/mixins.scss +++ /dev/null @@ -1,29 +0,0 @@ -// **** Mixins -@mixin placeholder($_color) { - /* Chrome/Opera/Safari */ - &::-webkit-input-placeholder { - color: $_color; - } - /* Firefox 19+ */ - &::-moz-placeholder { - color: $_color; - } - /* IE 10+ */ - &:-ms-input-placeholder { - color: $_color; - } - /* Firefox 18- */ - &:-moz-placeholder { - color: $_color; - } -} - -// Helsinki logo -@mixin helsinki-logo($lang: 'fi') { - background-image: url('../icons/svg/helsinki-fi.svg'); - background-size: contain; - background-repeat: no-repeat; - @if $lang == 'sv' { - background-image: url('../icons/svg/helsinki-sv.svg'); - } -} diff --git a/apps/sports-helsinki/src/styles/mixins.scss b/apps/sports-helsinki/src/styles/mixins.scss deleted file mode 100644 index 5a71a9b23..000000000 --- a/apps/sports-helsinki/src/styles/mixins.scss +++ /dev/null @@ -1,29 +0,0 @@ -// **** Mixins -@mixin placeholder($_color) { - /* Chrome/Opera/Safari */ - &::-webkit-input-placeholder { - color: $_color; - } - /* Firefox 19+ */ - &::-moz-placeholder { - color: $_color; - } - /* IE 10+ */ - &:-ms-input-placeholder { - color: $_color; - } - /* Firefox 18- */ - &:-moz-placeholder { - color: $_color; - } -} - -// Helsinki logo -@mixin helsinki-logo($lang: 'fi') { - background-image: url('../icons/svg/helsinki-fi.svg'); - background-size: contain; - background-repeat: no-repeat; - @if $lang == 'sv' { - background-image: url('../icons/svg/helsinki-sv.svg'); - } -} diff --git a/packages/components/package.json b/packages/components/package.json index 40b6ce233..507582c84 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -56,6 +56,7 @@ "fast-deep-equal": "3.1.3", "file-saver": "^2.0.5", "graphql": "16.7.1", + "hds-core": "^3.5.0", "hds-design-tokens": "^3.5.0", "hds-react": "^3.5.0", "https": "1.0.0", diff --git a/packages/components/src/components/multiSelectDropdown/multiSelectDropdown.module.scss b/packages/components/src/components/multiSelectDropdown/multiSelectDropdown.module.scss index 40a195a21..e49699462 100644 --- a/packages/components/src/components/multiSelectDropdown/multiSelectDropdown.module.scss +++ b/packages/components/src/components/multiSelectDropdown/multiSelectDropdown.module.scss @@ -1,5 +1,3 @@ -@import 'src/styles/mixins'; - .dropdown { --dropdown-height: var(--spacing-3-xl) !important; diff --git a/packages/components/src/components/rangeDropdown/rangeDropdown.module.scss b/packages/components/src/components/rangeDropdown/rangeDropdown.module.scss index 15b58a5e7..5c04968ea 100644 --- a/packages/components/src/components/rangeDropdown/rangeDropdown.module.scss +++ b/packages/components/src/components/rangeDropdown/rangeDropdown.module.scss @@ -1,4 +1,3 @@ -@import 'src/styles/mixins'; @import 'src/styles/breakpoints'; .dropdown { diff --git a/packages/components/src/icons/svg/copied-from-hds/angle-left.svg b/packages/components/src/icons/svg/copied-from-hds/angle-left.svg deleted file mode 100644 index c6a71fd8a..000000000 --- a/packages/components/src/icons/svg/copied-from-hds/angle-left.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - - - \ No newline at end of file diff --git a/packages/components/src/icons/svg/copied-from-hds/angle-right.svg b/packages/components/src/icons/svg/copied-from-hds/angle-right.svg deleted file mode 100644 index 031714d09..000000000 --- a/packages/components/src/icons/svg/copied-from-hds/angle-right.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - - - \ No newline at end of file diff --git a/packages/components/src/icons/svg/copied-from-hds/readme.md b/packages/components/src/icons/svg/copied-from-hds/readme.md deleted file mode 100644 index 45898bfe3..000000000 --- a/packages/components/src/icons/svg/copied-from-hds/readme.md +++ /dev/null @@ -1,5 +0,0 @@ -# Explanation - -The files in this folder have been copied over from HDS into this repository. At the time of creating this special case, HDS did not provide direct access to `svg` files. However, these files were used in a way that made it difficult to replace them in place without access to the source `svg` file. - -Storing the files here communicates that the suitable replacement files already exist within HDS and that we have knowingly postponed refactoring into using them. diff --git a/packages/components/src/icons/svg/facebook.svg b/packages/components/src/icons/svg/facebook.svg deleted file mode 100644 index f1276b405..000000000 --- a/packages/components/src/icons/svg/facebook.svg +++ /dev/null @@ -1,11 +0,0 @@ - - - - Icons/Share_facebook/24 - Created with Sketch. - - - - - - \ No newline at end of file diff --git a/packages/components/src/icons/svg/helsinki-fi.svg b/packages/components/src/icons/svg/helsinki-fi.svg deleted file mode 100644 index 2d952d45d..000000000 --- a/packages/components/src/icons/svg/helsinki-fi.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/packages/components/src/icons/svg/helsinki-sv.svg b/packages/components/src/icons/svg/helsinki-sv.svg deleted file mode 100644 index 541e7b6d4..000000000 --- a/packages/components/src/icons/svg/helsinki-sv.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/packages/components/src/icons/svg/link.svg b/packages/components/src/icons/svg/link.svg deleted file mode 100644 index 22ab8dcd0..000000000 --- a/packages/components/src/icons/svg/link.svg +++ /dev/null @@ -1,12 +0,0 @@ - - - - Icons/Link/24 - Created with Sketch. - - - - - - - \ No newline at end of file diff --git a/packages/components/src/icons/svg/linkedin.svg b/packages/components/src/icons/svg/linkedin.svg deleted file mode 100644 index 01ae92227..000000000 --- a/packages/components/src/icons/svg/linkedin.svg +++ /dev/null @@ -1,9 +0,0 @@ - - - - Icons/Share_Linkedin/24 - Created with Sketch. - - - - \ No newline at end of file diff --git a/packages/components/src/icons/svg/suprise-me.svg b/packages/components/src/icons/svg/suprise-me.svg deleted file mode 100644 index 720136b69..000000000 --- a/packages/components/src/icons/svg/suprise-me.svg +++ /dev/null @@ -1,24 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/components/src/icons/svg/twitter.svg b/packages/components/src/icons/svg/twitter.svg deleted file mode 100644 index 3601f148d..000000000 --- a/packages/components/src/icons/svg/twitter.svg +++ /dev/null @@ -1,9 +0,0 @@ - - - - Icons/Share_twitter/24 - Created with Sketch. - - - - \ No newline at end of file diff --git a/packages/components/src/styles/askem.scss b/packages/components/src/styles/askem.scss index fc9aa9295..4c3af8a1e 100644 --- a/packages/components/src/styles/askem.scss +++ b/packages/components/src/styles/askem.scss @@ -1,17 +1,8 @@ +@import 'icons.module'; + // RNS i.e. React and Share i.e. Askem Classic custom stylings // @see https://docs.reactandshare.com/#custom-styling .rns { - --hel-icon--face-smile: url(/shared-assets/images/feedback/face-smile.svg); - --hel-icon--face-sad: url(/shared-assets/images/feedback/face-sad.svg); - --hel-icon--face-neutral: url(/shared-assets/images/feedback/face-neutral.svg); - --hel-icon--arrow-right: url(/shared-assets/images/feedback/arrow-right.svg); - --hel-icon--email: url(/shared-assets/images/feedback/envelope.svg); - - --hel-icon--facebook: url(/shared-assets/images/share/facebook.svg); - --hel-icon--twitter: url(/shared-assets/images/share/x.svg); - --hel-icon--whatsapp: url(/shared-assets/images/share/whatsapp.svg); - --hel-icon--share: url(/shared-assets/images/share/share.svg); - max-width: 1296px; margin-left: auto; margin-right: auto; @@ -127,8 +118,7 @@ content: ''; display: flex; height: 24px; - -webkit-mask-image: var(--hel-icon--face-neutral); - mask-image: var(--hel-icon--face-neutral); + @extend .hds-icon--face-neutral; -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; @@ -256,8 +246,7 @@ .reactions .rns-reaction:first-child .rns-label::after { - -webkit-mask-image: var(--hel-icon--face-smile); - mask-image: var(--hel-icon--face-smile); + @extend .hds-icon--face-smile; } .rns @@ -266,8 +255,7 @@ .reactions .rns-reaction:last-child .rns-label::after { - -webkit-mask-image: var(--hel-icon--face-sad); - mask-image: var(--hel-icon--face-sad); + @extend .hds-icon--face-sad; } .rns .rns-plugin .rns-shares { @@ -381,8 +369,7 @@ content: ''; display: flex; height: 32px; - -webkit-mask-image: var(--hel-icon--share); - mask-image: var(--hel-icon--share); + @extend .hds-icon--share; -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; @@ -475,8 +462,7 @@ .rns-shares-list .rns-share.rns-share-facebook .rns-share-button::before { - -webkit-mask-image: var(--hel-icon--facebook); - mask-image: var(--hel-icon--facebook); + @extend .hds-icon--facebook; } .rns @@ -485,8 +471,7 @@ .rns-shares-list .rns-share.rns-share-whatsapp .rns-share-button::before { - -webkit-mask-image: var(--hel-icon--whatsapp); - mask-image: var(--hel-icon--whatsapp); + @extend .hds-icon--whatsapp; } .rns @@ -495,8 +480,7 @@ .rns-shares-list .rns-share.rns-share-twitter .rns-share-button::before { - -webkit-mask-image: var(--hel-icon--twitter); - mask-image: var(--hel-icon--twitter); + @extend .hds-icon--x; } .rns @@ -505,8 +489,7 @@ .rns-shares-list .rns-share.rns-share-email .rns-share-button::before { - -webkit-mask-image: var(--hel-icon--email); - mask-image: var(--hel-icon--email); + @extend .hds-icon--envelope; } .rns .rns-plugin .rns-inputs { @@ -574,8 +557,7 @@ content: ''; display: flex; height: 24px; - -webkit-mask-image: var(--hel-icon--arrow-right); - mask-image: var(--hel-icon--arrow-right); + @extend .hds-icon--arrow-right; -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; diff --git a/packages/components/src/styles/icons.module.scss b/packages/components/src/styles/icons.module.scss new file mode 100644 index 000000000..12c9702b1 --- /dev/null +++ b/packages/components/src/styles/icons.module.scss @@ -0,0 +1,9 @@ +@import 'hds-core/lib/icons/arrow-right'; +@import 'hds-core/lib/icons/envelope'; +@import 'hds-core/lib/icons/face-neutral'; +@import 'hds-core/lib/icons/face-sad'; +@import 'hds-core/lib/icons/face-smile'; +@import 'hds-core/lib/icons/facebook'; +@import 'hds-core/lib/icons/share'; +@import 'hds-core/lib/icons/whatsapp'; +@import 'hds-core/lib/icons/x'; diff --git a/packages/components/src/styles/mixins.scss b/packages/components/src/styles/mixins.scss deleted file mode 100644 index 5a71a9b23..000000000 --- a/packages/components/src/styles/mixins.scss +++ /dev/null @@ -1,29 +0,0 @@ -// **** Mixins -@mixin placeholder($_color) { - /* Chrome/Opera/Safari */ - &::-webkit-input-placeholder { - color: $_color; - } - /* Firefox 19+ */ - &::-moz-placeholder { - color: $_color; - } - /* IE 10+ */ - &:-ms-input-placeholder { - color: $_color; - } - /* Firefox 18- */ - &:-moz-placeholder { - color: $_color; - } -} - -// Helsinki logo -@mixin helsinki-logo($lang: 'fi') { - background-image: url('../icons/svg/helsinki-fi.svg'); - background-size: contain; - background-repeat: no-repeat; - @if $lang == 'sv' { - background-image: url('../icons/svg/helsinki-sv.svg'); - } -} diff --git a/static/assets/images/feedback/arrow-right.svg b/static/assets/images/feedback/arrow-right.svg deleted file mode 100644 index 49a58c01e..000000000 --- a/static/assets/images/feedback/arrow-right.svg +++ /dev/null @@ -1,10 +0,0 @@ - - - SoMe/facebook Copy 5 - - - - - - - \ No newline at end of file diff --git a/static/assets/images/feedback/envelope.svg b/static/assets/images/feedback/envelope.svg deleted file mode 100644 index bc3517706..000000000 --- a/static/assets/images/feedback/envelope.svg +++ /dev/null @@ -1,10 +0,0 @@ - - - SoMe/facebook Copy 4 - - - - - - - \ No newline at end of file diff --git a/static/assets/images/feedback/face-neutral.svg b/static/assets/images/feedback/face-neutral.svg deleted file mode 100644 index 876447cd4..000000000 --- a/static/assets/images/feedback/face-neutral.svg +++ /dev/null @@ -1,12 +0,0 @@ - - - UI/Notifications and expressions/face-neutral - - - - - - - - - \ No newline at end of file diff --git a/static/assets/images/feedback/face-sad.svg b/static/assets/images/feedback/face-sad.svg deleted file mode 100644 index 2353b21d9..000000000 --- a/static/assets/images/feedback/face-sad.svg +++ /dev/null @@ -1,12 +0,0 @@ - - - UI/Notifications and expressions/face-neutral Copy - - - - - - - - - \ No newline at end of file diff --git a/static/assets/images/feedback/face-smile.svg b/static/assets/images/feedback/face-smile.svg deleted file mode 100644 index 69a0a3a8a..000000000 --- a/static/assets/images/feedback/face-smile.svg +++ /dev/null @@ -1,12 +0,0 @@ - - - UI/Notifications and expressions/face-neutral Copy 2 - - - - - - - - - \ No newline at end of file diff --git a/static/assets/images/share/facebook.svg b/static/assets/images/share/facebook.svg deleted file mode 100644 index 5f1005ad4..000000000 --- a/static/assets/images/share/facebook.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/static/assets/images/share/link.svg b/static/assets/images/share/link.svg deleted file mode 100644 index 372aa4ab1..000000000 --- a/static/assets/images/share/link.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/static/assets/images/share/linkedin.svg b/static/assets/images/share/linkedin.svg deleted file mode 100644 index 758668fa1..000000000 --- a/static/assets/images/share/linkedin.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/static/assets/images/share/share.svg b/static/assets/images/share/share.svg deleted file mode 100644 index 8f1d7156d..000000000 --- a/static/assets/images/share/share.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/static/assets/images/share/twitter.svg b/static/assets/images/share/twitter.svg deleted file mode 100644 index 69ba5bab7..000000000 --- a/static/assets/images/share/twitter.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/static/assets/images/share/whatsapp.svg b/static/assets/images/share/whatsapp.svg deleted file mode 100644 index 28e4a9000..000000000 --- a/static/assets/images/share/whatsapp.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/static/assets/images/share/x.svg b/static/assets/images/share/x.svg deleted file mode 100644 index c3f51f0c1..000000000 --- a/static/assets/images/share/x.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/yarn.lock b/yarn.lock index 614ba8ab3..8015e373a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3456,6 +3456,7 @@ __metadata: file-saver: "npm:^2.0.5" graphql: "npm:16.7.1" happy-dom: "npm:9.20.3" + hds-core: "npm:^3.5.0" hds-design-tokens: "npm:^3.5.0" hds-react: "npm:^3.5.0" html-react-parser: "npm:4.0.0" @@ -15921,6 +15922,13 @@ __metadata: languageName: node linkType: hard +"hds-core@npm:^3.5.0": + version: 3.6.0 + resolution: "hds-core@npm:3.6.0" + checksum: 38a3bce49cb919d79f1e61638c3943dd40ce04bf6246fc77241b096753ed32aee11f7db909f3e4557cd40cd117f6e05e02d852d3faf2277bb2946805325eb99a + languageName: node + linkType: hard + "hds-design-tokens@npm:^3.5.0": version: 3.5.0 resolution: "hds-design-tokens@npm:3.5.0"