Merge pull request #1299 from nsbno/new-servicealert-variant

New ServiceAlert variant

.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

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 "global-deviation":
       return WarningFill24Icon;
+    case "service":
+      return ServiceFill24Icon;
   }
 };
 
@@ -81,4 +84,10 @@ const texts = createTexts({
     sv: "Servicemeddelande",
     en: "Service message",
   },
+  "global-deviation": {
+    nb: "Trafikkmelding",
+    nn: "Trafikkmelding",
+    sv: "Trafikmeddelande",
+    en: "Traffic announcement",
+  },
 });

packages/spor-react/src/alert/BaseAlert.tsx

@@ -9,7 +9,8 @@ export type BaseAlertProps = BoxProps & {
     | "warning"
     | "alt-transport"
     | "error"
-    | "service";
+    | "service"
+    | "global-deviation";
   /** The body content of the alert */
   children: React.ReactNode;
   /** The title of the alert */

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?: "service" | "global-deviation";
 };
 /**
  * A service alert component.
@@ -46,7 +48,7 @@ type ServiceAlertProps = BaseAlertProps & {
  * ```
  */
 export const ServiceAlert = ({
-  variant,
+  variant = "service",
   children,
   title,
   notification,
@@ -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 (
     <BaseAlert
       variant={variant}
@@ -101,7 +102,6 @@ export const ServiceAlert = ({
                       WebkitLineClamp: "1",
                       WebkitBoxOrient: "vertical",
                     }}
-                    color="white"
                   >
                     {title}
                   </Box>
@@ -114,7 +114,7 @@ export const ServiceAlert = ({
                     </Text>
                   )}
 
-                  <AccordionIcon color="white" />
+                  <AccordionIcon />
                 </Flex>
               </Flex>
             </Stack>
@@ -132,7 +132,11 @@ export const ServiceAlert = ({
                 sx={{
                   p: {
                     padding: "0.8rem 0",
-                    borderBottom: "0.08rem solid rgba(255, 255, 255, 0.4)",
+                    borderBottom: "0.08rem solid",
+                    borderColor:
+                      variant === "global-deviation"
+                        ? "blackAlpha.400"
+                        : "whiteAlpha.400",
                   },
                   "p:last-child": {
                     borderBottom: "none",

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,7 +37,52 @@ const config = helpers.defineMultiStyleConfig({
       paddingX: "0.75rem",
       paddingTop: "0.375rem",
       paddingBottom: "0.9375rem",
-      color: "white",
+    },
+  },
+  variants: {
+    "global-deviation": {
+      container: {
+        _hover: {
+          outlineColor: "primrose",
+        },
+        _active: {
+          backgroundColor: "blonde",
+          outlineColor: "primrose",
+        },
+        color: "darkGrey",
+      },
+      outerBox: {
+        outlineColor: "primrose",
+        backgroundColor: "blonde",
+      },
+      notificationText: {
+        color: "darkGrey",
+      },
+      serviceMessageContent: {
+        color: "darkGrey",
+      },
+    },
+    service: {
+      container: {
+        _hover: {
+          outlineColor: "blueGreen",
+        },
+        _active: {
+          backgroundColor: "pine",
+          outlineColor: "pine",
+        },
+        color: "white",
+      },
+      outerBox: {
+        outlineColor: "blueGreen",
+        backgroundColor: "darkTeal",
+      },
+      notificationText: {
+        color: "white",
+      },
+      serviceMessageContent: {
+        color: "white",
+      },
     },
   },
 });

packages/spor-react/src/theme/components/alert.ts

@@ -51,6 +51,11 @@ const config = helpers.defineMultiStyleConfig({
         backgroundColor: "banana",
       },
     },
+    "global-deviation": {
+      container: {
+        backgroundColor: "blonde",
+      },
+    },
     service: {
       container: {
         backgroundColor: "darkTeal",