From 2779cd7c5fa557df6e6dab884e2d26abdbd65da6 Mon Sep 17 00:00:00 2001 From: Hanna Rognerud Date: Thu, 31 Oct 2024 14:43:18 +0100 Subject: [PATCH 01/11] Add new ServiceAlert variant --- .changeset/five-frogs-heal.md | 6 +++ package-lock.json | 14 ++--- .../svg/feedback/service-fill-18x18.svg | 4 ++ .../svg/feedback/service-fill-24x24.svg | 4 ++ .../svg/feedback/service-fill-30x30.svg | 4 ++ .../svg/feedback/service-outline-18x18.svg | 3 ++ .../svg/feedback/service-outline-24x24.svg | 3 ++ .../svg/feedback/service-outline-30x30.svg | 3 ++ packages/spor-react/src/alert/AlertIcon.tsx | 11 +++- packages/spor-react/src/alert/BaseAlert.tsx | 3 +- .../spor-react/src/alert/ServiceAlert.tsx | 9 ++-- .../src/theme/components/alert-service.ts | 54 +++++++++++++++---- .../spor-react/src/theme/components/alert.ts | 5 ++ 13 files changed, 100 insertions(+), 23 deletions(-) create mode 100644 .changeset/five-frogs-heal.md create mode 100644 packages/spor-icon/svg/feedback/service-fill-18x18.svg create mode 100644 packages/spor-icon/svg/feedback/service-fill-24x24.svg create mode 100644 packages/spor-icon/svg/feedback/service-fill-30x30.svg create mode 100644 packages/spor-icon/svg/feedback/service-outline-18x18.svg create mode 100644 packages/spor-icon/svg/feedback/service-outline-24x24.svg create mode 100644 packages/spor-icon/svg/feedback/service-outline-30x30.svg diff --git a/.changeset/five-frogs-heal.md b/.changeset/five-frogs-heal.md new file mode 100644 index 000000000..9e680f3ac --- /dev/null +++ b/.changeset/five-frogs-heal.md @@ -0,0 +1,6 @@ +--- +"@vygruppen/spor-react": minor +"@vygruppen/spor-icon": minor +--- + +add new variant of ServiceAlert diff --git a/package-lock.json b/package-lock.json index 5ebc02274..754646391 100644 --- a/package-lock.json +++ b/package-lock.json @@ -41,8 +41,8 @@ "@sanity/groq-store": "^1.1.5", "@sanity/image-url": "^1.0.2", "@vygruppen/spor-design-tokens": "^3.8.1", - "@vygruppen/spor-icon": "^3.0.1", - "@vygruppen/spor-icon-react": "^3.10.0", + "@vygruppen/spor-icon": "^3.1.0", + "@vygruppen/spor-icon-react": "^3.11.0", "@vygruppen/spor-react": "^10.7.0", "archiver": "^5.3.2", "deepmerge": "^4.3.1", @@ -32218,7 +32218,7 @@ }, "packages/spor-icon": { "name": "@vygruppen/spor-icon", - "version": "3.0.1", + "version": "3.1.0", "license": "MIT", "devDependencies": { "bestzip": "^2.2.1" @@ -32345,14 +32345,14 @@ }, "packages/spor-icon-react": { "name": "@vygruppen/spor-icon-react", - "version": "3.10.0", + "version": "3.11.0", "license": "MIT", "devDependencies": { "@svgr/core": "^8.1.0", "@svgr/plugin-jsx": "^8.1.0", "@svgr/plugin-svgo": "^8.1.0", "@types/fs-extra": "^11.0.4", - "@vygruppen/spor-icon": "^3.0.1", + "@vygruppen/spor-icon": "^3.1.0", "case": "^1.6.3", "fs-extra": "^11.2.0", "react": "^18.3.1", @@ -32368,7 +32368,7 @@ }, "packages/spor-icon-react-native": { "name": "@vygruppen/spor-icon-react-native", - "version": "2.10.0", + "version": "2.11.0", "license": "MIT", "devDependencies": { "@shopify/restyle": "^2.1.0", @@ -32376,7 +32376,7 @@ "@svgr/plugin-jsx": "^6.2.0", "@svgr/plugin-svgo": "^6.2.0", "@types/fs-extra": "^11.0.4", - "@vygruppen/spor-icon": "^3.0.0", + "@vygruppen/spor-icon": "^3.1.0", "case": "^1.6.3", "fs-extra": "^11.2.0", "react": ">17.0.0", diff --git a/packages/spor-icon/svg/feedback/service-fill-18x18.svg b/packages/spor-icon/svg/feedback/service-fill-18x18.svg new file mode 100644 index 000000000..335dae1fa --- /dev/null +++ b/packages/spor-icon/svg/feedback/service-fill-18x18.svg @@ -0,0 +1,4 @@ + + + + diff --git a/packages/spor-icon/svg/feedback/service-fill-24x24.svg b/packages/spor-icon/svg/feedback/service-fill-24x24.svg new file mode 100644 index 000000000..979c0c812 --- /dev/null +++ b/packages/spor-icon/svg/feedback/service-fill-24x24.svg @@ -0,0 +1,4 @@ + + + + diff --git a/packages/spor-icon/svg/feedback/service-fill-30x30.svg b/packages/spor-icon/svg/feedback/service-fill-30x30.svg new file mode 100644 index 000000000..c0ee993d1 --- /dev/null +++ b/packages/spor-icon/svg/feedback/service-fill-30x30.svg @@ -0,0 +1,4 @@ + + + + diff --git a/packages/spor-icon/svg/feedback/service-outline-18x18.svg b/packages/spor-icon/svg/feedback/service-outline-18x18.svg new file mode 100644 index 000000000..486929547 --- /dev/null +++ b/packages/spor-icon/svg/feedback/service-outline-18x18.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/spor-icon/svg/feedback/service-outline-24x24.svg b/packages/spor-icon/svg/feedback/service-outline-24x24.svg new file mode 100644 index 000000000..556ce3ef1 --- /dev/null +++ b/packages/spor-icon/svg/feedback/service-outline-24x24.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/spor-icon/svg/feedback/service-outline-30x30.svg b/packages/spor-icon/svg/feedback/service-outline-30x30.svg new file mode 100644 index 000000000..05db2b40f --- /dev/null +++ b/packages/spor-icon/svg/feedback/service-outline-30x30.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/spor-react/src/alert/AlertIcon.tsx b/packages/spor-react/src/alert/AlertIcon.tsx index 232c62357..0ce678b11 100644 --- a/packages/spor-react/src/alert/AlertIcon.tsx +++ b/packages/spor-react/src/alert/AlertIcon.tsx @@ -9,6 +9,7 @@ import { import React from "react"; import { createTexts, useTranslation } from "../i18n"; import { BaseAlertProps } from "./BaseAlert"; +import { ServiceFill24Icon } from "@vygruppen/spor-icon-react/tmp"; type AlertIconProps = { variant: BaseAlertProps["variant"] }; /** @@ -39,8 +40,10 @@ const getIcon = (variant: BaseAlertProps["variant"]) => { return AltTransportOutline24Icon; case "error": return ErrorOutline24Icon; - case "service": + case "operational": return WarningFill24Icon; + case "service": + return ServiceFill24Icon } }; @@ -81,4 +84,10 @@ const texts = createTexts({ sv: "Servicemeddelande", en: "Service message", }, + operational: { + nb: "Dropsmelding", + nn: "Dropsmelding", + sv: "Dropsmelding", + en: "Dropsmelding", + }, }); diff --git a/packages/spor-react/src/alert/BaseAlert.tsx b/packages/spor-react/src/alert/BaseAlert.tsx index 5ce57aac7..127a21bf0 100644 --- a/packages/spor-react/src/alert/BaseAlert.tsx +++ b/packages/spor-react/src/alert/BaseAlert.tsx @@ -9,7 +9,8 @@ export type BaseAlertProps = BoxProps & { | "warning" | "alt-transport" | "error" - | "service"; + | "service" + | "operational"; /** The body content of the alert */ children: React.ReactNode; /** The title of the alert */ diff --git a/packages/spor-react/src/alert/ServiceAlert.tsx b/packages/spor-react/src/alert/ServiceAlert.tsx index 2fb037a25..6910b96c1 100644 --- a/packages/spor-react/src/alert/ServiceAlert.tsx +++ b/packages/spor-react/src/alert/ServiceAlert.tsx @@ -33,6 +33,8 @@ type ServiceAlertProps = BaseAlertProps & { * * Defaults to h3 */ headingLevel?: "h2" | "h3" | "h4" | "h5" | "h6"; + /** The variant of Service Alert. Default: service */ + variant: string; }; /** * A service alert component. @@ -56,9 +58,8 @@ export const ServiceAlert = ({ onToggle = () => {}, ...boxProps }: ServiceAlertProps) => { - variant = "service"; const { t } = useTranslation(); - const styles = useMultiStyleConfig("AlertService"); + const styles = useMultiStyleConfig("AlertService", { variant }); return ( {title} @@ -114,7 +115,7 @@ export const ServiceAlert = ({ )} - + diff --git a/packages/spor-react/src/theme/components/alert-service.ts b/packages/spor-react/src/theme/components/alert-service.ts index 87a0cdd45..2dad83119 100644 --- a/packages/spor-react/src/theme/components/alert-service.ts +++ b/packages/spor-react/src/theme/components/alert-service.ts @@ -8,7 +8,6 @@ const parts = anatomy("alertService").parts( "serviceMessageContent", ); const helpers = createMultiStyleConfigHelpers(parts.keys); - const config = helpers.defineMultiStyleConfig({ baseStyle: { container: { @@ -21,23 +20,15 @@ const config = helpers.defineMultiStyleConfig({ borderBottomRadius: "md", _hover: { outline: "2px solid", - outlineColor: "blueGreen", - }, - _active: { - backgroundColor: "pine", - outlineColor: "pine", }, }, outerBox: { outline: "1px solid", - outlineColor: "blueGreen", - backgroundColor: "darkTeal", borderBottomRadius: "md", borderTopRadius: "none", width: "100%", }, notificationText: { - color: "white", fontWeight: "400", fontSize: "1rem", pr: "0.375rem", @@ -46,9 +37,52 @@ const config = helpers.defineMultiStyleConfig({ paddingX: "0.75rem", paddingTop: "0.375rem", paddingBottom: "0.9375rem", - color: "white", }, }, + variants: { + operational: { + container: { + _hover: { + outlineColor: "primrose", + }, + _active: { + backgroundColor: "blonde", + outlineColor: "primrose", + }, + }, + outerBox: { + outlineColor: "primrose", + backgroundColor: "blonde", + }, + notificationText: { + color: "black", + }, + serviceMessageContent: { + color: "black", + }, + }, + service: { + container: { + _hover: { + outlineColor: "blueGreen", + }, + _active: { + backgroundColor: "pine", + outlineColor: "pine", + }, + }, + outerBox: { + outlineColor: "blueGreen", + backgroundColor: "darkTeal", + }, + notificationText: { + color: "white", + }, + serviceMessageContent: { + color: "white", + }, + } + } }); export default config; diff --git a/packages/spor-react/src/theme/components/alert.ts b/packages/spor-react/src/theme/components/alert.ts index b661cf98e..bbe47d764 100644 --- a/packages/spor-react/src/theme/components/alert.ts +++ b/packages/spor-react/src/theme/components/alert.ts @@ -51,6 +51,11 @@ const config = helpers.defineMultiStyleConfig({ backgroundColor: "banana", }, }, + operational: { + container: { + backgroundColor: "blonde", + }, + }, service: { container: { backgroundColor: "darkTeal", From b51928c9074e3d3eea02953377b558aad86916e1 Mon Sep 17 00:00:00 2001 From: Hanna Rognerud Date: Thu, 31 Oct 2024 14:48:31 +0100 Subject: [PATCH 02/11] Add new ServiceAlert variant --- packages/spor-react/src/alert/AlertIcon.tsx | 2 +- packages/spor-react/src/alert/ServiceAlert.tsx | 6 ++++-- packages/spor-react/src/theme/components/alert-service.ts | 4 ++-- 3 files changed, 7 insertions(+), 5 deletions(-) diff --git a/packages/spor-react/src/alert/AlertIcon.tsx b/packages/spor-react/src/alert/AlertIcon.tsx index 0ce678b11..6e338f008 100644 --- a/packages/spor-react/src/alert/AlertIcon.tsx +++ b/packages/spor-react/src/alert/AlertIcon.tsx @@ -43,7 +43,7 @@ const getIcon = (variant: BaseAlertProps["variant"]) => { case "operational": return WarningFill24Icon; case "service": - return ServiceFill24Icon + return ServiceFill24Icon; } }; diff --git a/packages/spor-react/src/alert/ServiceAlert.tsx b/packages/spor-react/src/alert/ServiceAlert.tsx index 6910b96c1..b50c9015f 100644 --- a/packages/spor-react/src/alert/ServiceAlert.tsx +++ b/packages/spor-react/src/alert/ServiceAlert.tsx @@ -102,7 +102,7 @@ export const ServiceAlert = ({ WebkitLineClamp: "1", WebkitBoxOrient: "vertical", }} - color={variant=="operational"? "black" : "white"} // har ikke noe å si? + color={variant == "operational" ? "black" : "white"} > {title} @@ -115,7 +115,9 @@ export const ServiceAlert = ({ )} - + diff --git a/packages/spor-react/src/theme/components/alert-service.ts b/packages/spor-react/src/theme/components/alert-service.ts index 2dad83119..a5c297cd8 100644 --- a/packages/spor-react/src/theme/components/alert-service.ts +++ b/packages/spor-react/src/theme/components/alert-service.ts @@ -81,8 +81,8 @@ const config = helpers.defineMultiStyleConfig({ serviceMessageContent: { color: "white", }, - } - } + }, + }, }); export default config; From 36db1db81aafe0f28c68f4b58f688295193cb58c Mon Sep 17 00:00:00 2001 From: Hanna Rognerud Date: Fri, 1 Nov 2024 08:46:51 +0100 Subject: [PATCH 03/11] make variant optional and set service as default variant --- packages/spor-react/src/alert/ServiceAlert.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/spor-react/src/alert/ServiceAlert.tsx b/packages/spor-react/src/alert/ServiceAlert.tsx index b50c9015f..4a99dad8e 100644 --- a/packages/spor-react/src/alert/ServiceAlert.tsx +++ b/packages/spor-react/src/alert/ServiceAlert.tsx @@ -34,7 +34,7 @@ type ServiceAlertProps = BaseAlertProps & { * Defaults to h3 */ headingLevel?: "h2" | "h3" | "h4" | "h5" | "h6"; /** The variant of Service Alert. Default: service */ - variant: string; + variant?: "service" | "operational"; }; /** * A service alert component. @@ -48,7 +48,7 @@ type ServiceAlertProps = BaseAlertProps & { * ``` */ export const ServiceAlert = ({ - variant, + variant = "service", children, title, notification, From d055c102d693ff37d5d33b722c19f19a664bb38d Mon Sep 17 00:00:00 2001 From: Hanna Rognerud Date: Fri, 1 Nov 2024 08:48:24 +0100 Subject: [PATCH 04/11] add one more = --- packages/spor-react/src/alert/ServiceAlert.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/spor-react/src/alert/ServiceAlert.tsx b/packages/spor-react/src/alert/ServiceAlert.tsx index 4a99dad8e..e4e1f88db 100644 --- a/packages/spor-react/src/alert/ServiceAlert.tsx +++ b/packages/spor-react/src/alert/ServiceAlert.tsx @@ -102,7 +102,7 @@ export const ServiceAlert = ({ WebkitLineClamp: "1", WebkitBoxOrient: "vertical", }} - color={variant == "operational" ? "black" : "white"} + color={variant === "operational" ? "black" : "white"} > {title} @@ -116,7 +116,7 @@ export const ServiceAlert = ({ )} From 6b9acc3bc91706ff8813bb968e94e09a12388bdc Mon Sep 17 00:00:00 2001 From: Hanna Rognerud Date: Fri, 1 Nov 2024 14:21:15 +0100 Subject: [PATCH 05/11] rename operational to global-deviation --- packages/spor-react/src/alert/AlertIcon.tsx | 4 ++-- packages/spor-react/src/alert/BaseAlert.tsx | 2 +- packages/spor-react/src/alert/ServiceAlert.tsx | 6 +++--- packages/spor-react/src/theme/components/alert-service.ts | 2 +- packages/spor-react/src/theme/components/alert.ts | 2 +- 5 files changed, 8 insertions(+), 8 deletions(-) diff --git a/packages/spor-react/src/alert/AlertIcon.tsx b/packages/spor-react/src/alert/AlertIcon.tsx index 6e338f008..ed49dfcf6 100644 --- a/packages/spor-react/src/alert/AlertIcon.tsx +++ b/packages/spor-react/src/alert/AlertIcon.tsx @@ -40,7 +40,7 @@ const getIcon = (variant: BaseAlertProps["variant"]) => { return AltTransportOutline24Icon; case "error": return ErrorOutline24Icon; - case "operational": + case "global-deviation": return WarningFill24Icon; case "service": return ServiceFill24Icon; @@ -84,7 +84,7 @@ const texts = createTexts({ sv: "Servicemeddelande", en: "Service message", }, - operational: { + "global-deviation": { nb: "Dropsmelding", nn: "Dropsmelding", sv: "Dropsmelding", diff --git a/packages/spor-react/src/alert/BaseAlert.tsx b/packages/spor-react/src/alert/BaseAlert.tsx index 127a21bf0..fa79c7d40 100644 --- a/packages/spor-react/src/alert/BaseAlert.tsx +++ b/packages/spor-react/src/alert/BaseAlert.tsx @@ -10,7 +10,7 @@ export type BaseAlertProps = BoxProps & { | "alt-transport" | "error" | "service" - | "operational"; + | "global-deviation"; /** The body content of the alert */ children: React.ReactNode; /** The title of the alert */ diff --git a/packages/spor-react/src/alert/ServiceAlert.tsx b/packages/spor-react/src/alert/ServiceAlert.tsx index e4e1f88db..04c91eec9 100644 --- a/packages/spor-react/src/alert/ServiceAlert.tsx +++ b/packages/spor-react/src/alert/ServiceAlert.tsx @@ -34,7 +34,7 @@ type ServiceAlertProps = BaseAlertProps & { * Defaults to h3 */ headingLevel?: "h2" | "h3" | "h4" | "h5" | "h6"; /** The variant of Service Alert. Default: service */ - variant?: "service" | "operational"; + variant?: "service" | "global-deviation"; }; /** * A service alert component. @@ -102,7 +102,7 @@ export const ServiceAlert = ({ WebkitLineClamp: "1", WebkitBoxOrient: "vertical", }} - color={variant === "operational" ? "black" : "white"} + color={variant === "global-deviation" ? "black" : "white"} > {title} @@ -116,7 +116,7 @@ export const ServiceAlert = ({ )} diff --git a/packages/spor-react/src/theme/components/alert-service.ts b/packages/spor-react/src/theme/components/alert-service.ts index a5c297cd8..3d2a7513f 100644 --- a/packages/spor-react/src/theme/components/alert-service.ts +++ b/packages/spor-react/src/theme/components/alert-service.ts @@ -40,7 +40,7 @@ const config = helpers.defineMultiStyleConfig({ }, }, variants: { - operational: { + "global-deviation": { container: { _hover: { outlineColor: "primrose", diff --git a/packages/spor-react/src/theme/components/alert.ts b/packages/spor-react/src/theme/components/alert.ts index bbe47d764..89e44eb74 100644 --- a/packages/spor-react/src/theme/components/alert.ts +++ b/packages/spor-react/src/theme/components/alert.ts @@ -51,7 +51,7 @@ const config = helpers.defineMultiStyleConfig({ backgroundColor: "banana", }, }, - operational: { + "global-deviation": { container: { backgroundColor: "blonde", }, From e08d995a3b38e5faa76c4832b7399d326fef6098 Mon Sep 17 00:00:00 2001 From: Hanna Rognerud Date: Tue, 5 Nov 2024 07:45:05 +0100 Subject: [PATCH 06/11] change aria-label --- packages/spor-react/src/alert/AlertIcon.tsx | 8 ++++---- packages/spor-react/src/alert/ServiceAlert.tsx | 5 +++-- 2 files changed, 7 insertions(+), 6 deletions(-) diff --git a/packages/spor-react/src/alert/AlertIcon.tsx b/packages/spor-react/src/alert/AlertIcon.tsx index ed49dfcf6..55ad37822 100644 --- a/packages/spor-react/src/alert/AlertIcon.tsx +++ b/packages/spor-react/src/alert/AlertIcon.tsx @@ -85,9 +85,9 @@ const texts = createTexts({ en: "Service message", }, "global-deviation": { - nb: "Dropsmelding", - nn: "Dropsmelding", - sv: "Dropsmelding", - en: "Dropsmelding", + nb: "Trafikkmelding", + nn: "Trafikkmelding", + sv: "Trafikmeddelande", + en: "Traffic announcement", }, }); diff --git a/packages/spor-react/src/alert/ServiceAlert.tsx b/packages/spor-react/src/alert/ServiceAlert.tsx index 04c91eec9..e951ee3ea 100644 --- a/packages/spor-react/src/alert/ServiceAlert.tsx +++ b/packages/spor-react/src/alert/ServiceAlert.tsx @@ -60,6 +60,7 @@ export const ServiceAlert = ({ }: ServiceAlertProps) => { const { t } = useTranslation(); const styles = useMultiStyleConfig("AlertService", { variant }); + let isGlobalDeviation = variant === "global-deviation" ? "black" : "white"; return ( {title} @@ -116,7 +117,7 @@ export const ServiceAlert = ({ )} From 4ca350381c83e46d9353003fbc2613ee47e4f707 Mon Sep 17 00:00:00 2001 From: Hanna Rognerud Date: Tue, 5 Nov 2024 07:57:36 +0100 Subject: [PATCH 07/11] prettier --- packages/spor-react/src/alert/ServiceAlert.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/spor-react/src/alert/ServiceAlert.tsx b/packages/spor-react/src/alert/ServiceAlert.tsx index e951ee3ea..74e26ad08 100644 --- a/packages/spor-react/src/alert/ServiceAlert.tsx +++ b/packages/spor-react/src/alert/ServiceAlert.tsx @@ -116,9 +116,7 @@ export const ServiceAlert = ({ )} - + From 288d5e4fbd17cccc009667ea3ac54785929fa3ae Mon Sep 17 00:00:00 2001 From: Hanna Rognerud Date: Thu, 7 Nov 2024 12:54:59 +0100 Subject: [PATCH 08/11] qa --- .changeset/tiny-swans-wonder.md | 8 ++++++++ packages/spor-react/src/alert/ServiceAlert.tsx | 6 ++---- packages/spor-react/src/theme/components/alert-service.ts | 6 ++++-- 3 files changed, 14 insertions(+), 6 deletions(-) create mode 100644 .changeset/tiny-swans-wonder.md diff --git a/.changeset/tiny-swans-wonder.md b/.changeset/tiny-swans-wonder.md new file mode 100644 index 000000000..7a7e62190 --- /dev/null +++ b/.changeset/tiny-swans-wonder.md @@ -0,0 +1,8 @@ +--- +"@vygruppen/spor-react": minor +"@vygruppen/spor-icon": minor +"@vygruppen/spor-icon-react": minor +"@vygruppen/spor-icon-react-native": minor +--- + +new variant for ServiceAlert diff --git a/packages/spor-react/src/alert/ServiceAlert.tsx b/packages/spor-react/src/alert/ServiceAlert.tsx index 74e26ad08..fbfcc2e2e 100644 --- a/packages/spor-react/src/alert/ServiceAlert.tsx +++ b/packages/spor-react/src/alert/ServiceAlert.tsx @@ -60,7 +60,6 @@ export const ServiceAlert = ({ }: ServiceAlertProps) => { const { t } = useTranslation(); const styles = useMultiStyleConfig("AlertService", { variant }); - let isGlobalDeviation = variant === "global-deviation" ? "black" : "white"; return ( {title} @@ -116,7 +114,7 @@ export const ServiceAlert = ({ )} - + @@ -134,7 +132,7 @@ export const ServiceAlert = ({ sx={{ p: { padding: "0.8rem 0", - borderBottom: "0.08rem solid rgba(255, 255, 255, 0.4)", + borderBottom: "0.08rem solid", }, "p:last-child": { borderBottom: "none", diff --git a/packages/spor-react/src/theme/components/alert-service.ts b/packages/spor-react/src/theme/components/alert-service.ts index 3d2a7513f..c992f50b0 100644 --- a/packages/spor-react/src/theme/components/alert-service.ts +++ b/packages/spor-react/src/theme/components/alert-service.ts @@ -49,16 +49,17 @@ const config = helpers.defineMultiStyleConfig({ backgroundColor: "blonde", outlineColor: "primrose", }, + color: "darkGrey", }, outerBox: { outlineColor: "primrose", backgroundColor: "blonde", }, notificationText: { - color: "black", + color: "darkGrey", }, serviceMessageContent: { - color: "black", + color: "darkGrey", }, }, service: { @@ -70,6 +71,7 @@ const config = helpers.defineMultiStyleConfig({ backgroundColor: "pine", outlineColor: "pine", }, + color: "white", }, outerBox: { outlineColor: "blueGreen", From ec8cde57d35610742662880def74ce5d8ef823c2 Mon Sep 17 00:00:00 2001 From: Hanna Rognerud Date: Thu, 7 Nov 2024 12:57:58 +0100 Subject: [PATCH 09/11] prettier --- packages/spor-react/src/theme/components/alert-service.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/spor-react/src/theme/components/alert-service.ts b/packages/spor-react/src/theme/components/alert-service.ts index c992f50b0..7e346c3c9 100644 --- a/packages/spor-react/src/theme/components/alert-service.ts +++ b/packages/spor-react/src/theme/components/alert-service.ts @@ -71,7 +71,7 @@ const config = helpers.defineMultiStyleConfig({ backgroundColor: "pine", outlineColor: "pine", }, - color: "white", + color: "white", }, outerBox: { outlineColor: "blueGreen", From 67df76b0770abbdcd0ec3d4ea0f0c0cb1e0e80e5 Mon Sep 17 00:00:00 2001 From: hanrog <165905869+hanrog@users.noreply.github.com> Date: Thu, 7 Nov 2024 13:57:47 +0100 Subject: [PATCH 10/11] Delete .changeset/five-frogs-heal.md --- .changeset/five-frogs-heal.md | 6 ------ 1 file changed, 6 deletions(-) delete mode 100644 .changeset/five-frogs-heal.md diff --git a/.changeset/five-frogs-heal.md b/.changeset/five-frogs-heal.md deleted file mode 100644 index 9e680f3ac..000000000 --- a/.changeset/five-frogs-heal.md +++ /dev/null @@ -1,6 +0,0 @@ ---- -"@vygruppen/spor-react": minor -"@vygruppen/spor-icon": minor ---- - -add new variant of ServiceAlert From 67d767a6bec5ad5bd117afd4b007f97744e5ab7a Mon Sep 17 00:00:00 2001 From: Hanna Rognerud Date: Thu, 14 Nov 2024 07:35:13 +0100 Subject: [PATCH 11/11] qa --- packages/spor-react/src/alert/ServiceAlert.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/spor-react/src/alert/ServiceAlert.tsx b/packages/spor-react/src/alert/ServiceAlert.tsx index fbfcc2e2e..d5103ffdc 100644 --- a/packages/spor-react/src/alert/ServiceAlert.tsx +++ b/packages/spor-react/src/alert/ServiceAlert.tsx @@ -114,7 +114,7 @@ export const ServiceAlert = ({ )} - + @@ -133,6 +133,10 @@ export const ServiceAlert = ({ p: { padding: "0.8rem 0", borderBottom: "0.08rem solid", + borderColor: + variant === "global-deviation" + ? "blackAlpha.400" + : "whiteAlpha.400", }, "p:last-child": { borderBottom: "none",