From 36e62bfbeab4d45f3c465150026a37c72ba03e81 Mon Sep 17 00:00:00 2001 From: Peter Hellstrand Date: Fri, 1 Nov 2024 09:32:05 +0100 Subject: [PATCH 1/2] refactor(ffe-feedback-react): no duplication of thumbs --- packages/ffe-feedback-react/README.md | 2 +- .../ffe-feedback-react/src/FeedbackThumbs.tsx | 9 +++------ .../ffe-feedback-react/src/icons/ThumbDown.tsx | 15 --------------- .../src/icons/ThumbDownFill.tsx | 15 --------------- packages/ffe-feedback-react/src/icons/ThumbUp.tsx | 15 --------------- packages/ffe-feedback-react/src/icons/index.ts | 4 ---- .../ffe-feedback-react/src/icons/thumbUpFill.tsx | 15 --------------- packages/ffe-feedback/less/theme.less | 0 8 files changed, 4 insertions(+), 71 deletions(-) delete mode 100644 packages/ffe-feedback-react/src/icons/ThumbDown.tsx delete mode 100644 packages/ffe-feedback-react/src/icons/ThumbDownFill.tsx delete mode 100644 packages/ffe-feedback-react/src/icons/ThumbUp.tsx delete mode 100644 packages/ffe-feedback-react/src/icons/index.ts delete mode 100644 packages/ffe-feedback-react/src/icons/thumbUpFill.tsx create mode 100644 packages/ffe-feedback/less/theme.less diff --git a/packages/ffe-feedback-react/README.md b/packages/ffe-feedback-react/README.md index e496b3dadb..05451794e0 100644 --- a/packages/ffe-feedback-react/README.md +++ b/packages/ffe-feedback-react/README.md @@ -12,7 +12,7 @@ npm install --save @sb1/ffe-feedback-react Full documentation is not yet available, but will be added to https://design.sparebank1.no/komponenter. -This package depends on `@sb1/ffe-buttons-react` and `@sb1/ffe-form-react`. +This package depends on `@sb1/ffe-buttons-react`, `@sb1/ffe-icons-react` and `@sb1/ffe-form-react`. Make sure you import the less-files. ## Development diff --git a/packages/ffe-feedback-react/src/FeedbackThumbs.tsx b/packages/ffe-feedback-react/src/FeedbackThumbs.tsx index b8d8e8f671..6ceb811ab7 100644 --- a/packages/ffe-feedback-react/src/FeedbackThumbs.tsx +++ b/packages/ffe-feedback-react/src/FeedbackThumbs.tsx @@ -1,6 +1,5 @@ import React from 'react'; import { txt } from './i18n/texts'; -import { ThumbUp, ThumbUpFill, ThumbDown, ThumbDownFill } from './icons'; export type Thumb = 'THUMB_UP' | 'THUMB_DOWN'; @@ -24,18 +23,16 @@ export const FeedbackThumbs: React.FC = ({ onClick={() => onClick('THUMB_UP')} type="button" > - - + ); diff --git a/packages/ffe-feedback-react/src/icons/ThumbDown.tsx b/packages/ffe-feedback-react/src/icons/ThumbDown.tsx deleted file mode 100644 index efed4e160a..0000000000 --- a/packages/ffe-feedback-react/src/icons/ThumbDown.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import React from 'react'; -export const ThumbDown: React.FC< - React.ComponentPropsWithoutRef<'svg'> -> = props => ( - - - -); diff --git a/packages/ffe-feedback-react/src/icons/ThumbDownFill.tsx b/packages/ffe-feedback-react/src/icons/ThumbDownFill.tsx deleted file mode 100644 index 2619b6c935..0000000000 --- a/packages/ffe-feedback-react/src/icons/ThumbDownFill.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import React from 'react'; -export const ThumbDownFill: React.FC< - React.ComponentPropsWithoutRef<'svg'> -> = props => ( - - - -); diff --git a/packages/ffe-feedback-react/src/icons/ThumbUp.tsx b/packages/ffe-feedback-react/src/icons/ThumbUp.tsx deleted file mode 100644 index 422c04dfc8..0000000000 --- a/packages/ffe-feedback-react/src/icons/ThumbUp.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import React from 'react'; -export const ThumbUp: React.FC< - React.ComponentPropsWithoutRef<'svg'> -> = props => ( - - - -); diff --git a/packages/ffe-feedback-react/src/icons/index.ts b/packages/ffe-feedback-react/src/icons/index.ts deleted file mode 100644 index db9dffac54..0000000000 --- a/packages/ffe-feedback-react/src/icons/index.ts +++ /dev/null @@ -1,4 +0,0 @@ -export { ThumbUp } from './ThumbUp'; -export { ThumbUpFill } from './thumbUpFill'; -export { ThumbDown } from './ThumbDown'; -export { ThumbDownFill } from './ThumbDownFill'; diff --git a/packages/ffe-feedback-react/src/icons/thumbUpFill.tsx b/packages/ffe-feedback-react/src/icons/thumbUpFill.tsx deleted file mode 100644 index 6831c8022e..0000000000 --- a/packages/ffe-feedback-react/src/icons/thumbUpFill.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import React from 'react'; -export const ThumbUpFill: React.FC< - React.ComponentPropsWithoutRef<'svg'> -> = props => ( - - - -); diff --git a/packages/ffe-feedback/less/theme.less b/packages/ffe-feedback/less/theme.less new file mode 100644 index 0000000000..e69de29bb2 From 6bbe054f5398852cd5e0f5301fefaee449b1b9f6 Mon Sep 17 00:00:00 2001 From: Peter Hellstrand Date: Fri, 1 Nov 2024 09:32:44 +0100 Subject: [PATCH 2/2] refactor(ffe-feedback): moved colors into themes --- .../ffe-feedback/less/feedback-container.less | 26 ++++----- .../ffe-feedback/less/feedback-input.less | 2 +- .../ffe-feedback/less/feedback-thumb.less | 53 +++++++------------ packages/ffe-feedback/less/feedback.less | 1 + packages/ffe-feedback/less/theme.less | 11 ++++ 5 files changed, 44 insertions(+), 49 deletions(-) diff --git a/packages/ffe-feedback/less/feedback-container.less b/packages/ffe-feedback/less/feedback-container.less index 21813d8ad0..40e0e47745 100644 --- a/packages/ffe-feedback/less/feedback-container.less +++ b/packages/ffe-feedback/less/feedback-container.less @@ -2,40 +2,36 @@ width: 100%; flex-grow: 1; padding: var(--ffe-spacing-md); + background-color: var(--ffe-v-feedback-background-color); - // Tilgjengelige farger &--bg-hvit { - background-color: var(--ffe-farge-hvit); + --ffe-v-feedback-background-color: var(--ffe-farge-hvit); } &--bg-frost-30 { - background-color: var(--ffe-farge-frost-30); + --ffe-v-feedback-background-color: var(--ffe-farge-frost-30); } &--bg-sand-30 { - background-color: var(--ffe-farge-sand-30); + --ffe-v-feedback-background-color: var(--ffe-farge-sand-30); } &--bg-syrin-30 { - background-color: var(--ffe-farge-syrin-30); + --ffe-v-feedback-background-color: var(--ffe-farge-syrin-30); } &--bg-vann-30 { - background-color: var(--ffe-farge-vann-30); + --ffe-v-feedback-background-color: var(--ffe-farge-vann-30); } - &--dm-bg-svart { + @media (prefers-color-scheme: dark) { .regard-color-scheme-preference & { - @media (prefers-color-scheme: dark) { - background-color: var(--ffe-farge-svart); + &--dm-bg-svart { + --ffe-v-feedback-background-color: var(--ffe-farge-svart); } - } - } - &--dm-bg-natt { - .regard-color-scheme-preference & { - @media (prefers-color-scheme: dark) { - background-color: var(--ffe-farge-natt); + &--dm-bg-natt { + --ffe-v-feedback-background-color: var(--ffe-farge-natt); } } } diff --git a/packages/ffe-feedback/less/feedback-input.less b/packages/ffe-feedback/less/feedback-input.less index 126ae7bd3b..f2d8bbad22 100644 --- a/packages/ffe-feedback/less/feedback-input.less +++ b/packages/ffe-feedback/less/feedback-input.less @@ -1,6 +1,6 @@ .ffe-feedback { &__content { - padding: 10px 0 40px; + padding: var(--ffe-spacing-xs) 0 var(--ffe-spacing-xl); margin-right: auto; margin-left: auto; max-width: 420px; diff --git a/packages/ffe-feedback/less/feedback-thumb.less b/packages/ffe-feedback/less/feedback-thumb.less index 665bfe085b..e83f94d712 100644 --- a/packages/ffe-feedback/less/feedback-thumb.less +++ b/packages/ffe-feedback/less/feedback-thumb.less @@ -1,40 +1,27 @@ -.ffe-feedback { - &__thumb { - border: none; - background: none; - cursor: pointer; - fill: var(--ffe-farge-fjell); - margin: 0 var(--ffe-spacing-xs); - outline: none; // Remove focus outline +.ffe-feedback__thumb { + --thumb-up-filled-xl: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iNDgiIHZpZXdCb3g9IjAgLTk2MCA5NjAgOTYwIiB3aWR0aD0iNDgiPjxwYXRoIGQ9Ik04NDIuMzA2LTYxNC4zMDZxMjIuMjMxIDAgMzkuOTYyIDE3LjczIDE3LjczMSAxNy43MzEgMTcuNzMxIDM5Ljk2MnY2Ni4yMjlxMCA5LjQ2Mi0yLjExNiAyMS40NjItMi4xMTUgMTEuOTk5LTUuOTYxIDIwLjY5Mkw3ODAuMTUzLTE4Ny45MjRxLTguNjE2IDE5Ljg0Ni0yOC41MzkgMzMuODg0LTE5LjkyMyAxNC4wMzktNDEuNzY5IDE0LjAzOUgzMjIuNDYycS0yMy44NDYgMC00MC43NjktMTYuOTIzLTE2LjkyMy0xNi45MjQtMTYuOTIzLTQwLjc3di0zOTIuOTk3cTAtMTEgNC41LTIxLjYxNSA0LjUtMTAuNjE2IDEyLjExNS0xOC42MTZsMjA0LjMwOC0yMTEuNDYxcTEwLjkyMy0xMS4zMDcgMjUuOTk5LTEzLjkyMyAxNS4wNzctMi42MTUgMjguMjMgNC42OTIgMTIuNzY5IDcuMzA4IDE5LjE1NCAyMS40NjIgNi4zODQgMTQuMTUzIDMuMTU0IDMwLjA3NmwtMzggMTg1Ljc3aDMxOC4wNzZaTTE1NS40NjMtMTQwLjAwMXEtMjIuNjE1IDAtMzkuMDM5LTE2LjQyMy0xNi40MjMtMTYuNDI0LTE2LjQyMy0zOS4wMzl2LTM2My4zODJxMC0yMi4yMzEgMTYuNDIzLTM4Ljg0NiAxNi40MjQtMTYuNjE1IDM5LjAzOS0xNi42MTVoOC40NjJxMjIuNjE1IDAgMzkuMDM4IDE2LjYxNXQxNi40MjMgMzguODQ2djM2My43NjdxMCAyMi42MTUtMTYuNDIzIDM4Ljg0Ni0xNi40MjMgMTYuMjMxLTM5LjAzOCAxNi4yMzFoLTguNDYyWiIvPjwvc3ZnPg=='); + --thumb-up-open-400-xl: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iNDgiIHZpZXdCb3g9IjAgLTk2MCA5NjAgOTYwIiB3aWR0aD0iNDgiPjxwYXRoIGQ9Ik04NTUtNjMycTI0IDAgNDIgMTh0MTggNDJ2ODEuODM5cTAgNy4xNjEgMS41IDE0LjY2MVQ5MTUtNDYxTDc4OS0xNzFxLTguODc4IDIxLjI1LTI5LjU5NSAzNi4xMjVRNzM4LjY4OS0xMjAgNzE2LTEyMEgyNzJ2LTUxMmwyMjUtMjM4cTEzLjYtMTQgMzIuMTg3LTE2LjVRNTQ3Ljc3My04ODkgNTY1LTg3OXExNyAxMCAyNS41IDI3LjV0NC4yIDM2LjVMNTU2LTYzMmgyOTlabS01MjMgMjV2NDI3aDM5N2wxMjYtMjk5di05M0g0ODJsNTMtMjQ5LTIwMyAyMTRaTTEzOS0xMjBxLTI0Ljc1IDAtNDIuMzc1LTE3LjYyNVQ3OS0xODB2LTM5MnEwLTI0Ljc1IDE3LjYyNS00Mi4zNzVUMTM5LTYzMmgxMzN2NjBIMTM5djM5MmgxMzN2NjBIMTM5Wm0xOTMtNjB2LTQyNyA0MjdaIi8+PC9zdmc+'); - @media (prefers-color-scheme: dark) { - .regard-color-scheme-preference & { - fill: var(--ffe-farge-vann-70); - } - } + all: unset; + margin: 0 var(--ffe-spacing-xs); + cursor: pointer; - .ffe-feedback__thumb-icon--fill { - display: none; - } + .ffe-icons { + mask-image: var(--thumb-up-open-400-xl); + color: var(--ffe-v-feedback-thumb-color); + } - @media (hover: hover) and (pointer: fine) { - &:hover { - .ffe-feedback__thumb-icon--fill { - display: block; - } - .ffe-feedback__thumb-icon { - display: none; - } - } - } + &:focus-visible .ffe-icons { + mask-image: var(--thumb-up-filled-xl); + } - &:focus { - .ffe-feedback__thumb-icon--fill { - display: block; - } - .ffe-feedback__thumb-icon { - display: none; - } + @media (hover: hover) and (pointer: fine) { + &:hover .ffe-icons { + mask-image: var(--thumb-up-filled-xl); } } + + &--down { + transform: rotate(180deg); + } } diff --git a/packages/ffe-feedback/less/feedback.less b/packages/ffe-feedback/less/feedback.less index 8dd6552543..20b7575df1 100644 --- a/packages/ffe-feedback/less/feedback.less +++ b/packages/ffe-feedback/less/feedback.less @@ -1,3 +1,4 @@ +@import 'theme'; @import 'feedback-container'; @import 'feedback-input'; @import 'feedback-thumb'; diff --git a/packages/ffe-feedback/less/theme.less b/packages/ffe-feedback/less/theme.less index e69de29bb2..f321f972ec 100644 --- a/packages/ffe-feedback/less/theme.less +++ b/packages/ffe-feedback/less/theme.less @@ -0,0 +1,11 @@ +:root, +:host { + --ffe-v-feedback-background-color: transparent; + --ffe-v-feedback-thumb-color: var(--ffe-farge-fjell); + + @media (prefers-color-scheme: dark) { + .regard-color-scheme-preference { + --ffe-v-feedback-thumb-color: var(--ffe-farge-vann-70); + } + } +}