Warning content type (#1247)

* added variant for service message * added correct colors for service variant * added icon for service variant * added notification prop * Changed onActive-color for service variant * Fixed potential error with string/number comparison * Added new color and padding for service-variant * Changed size of icon to 24x24 * Added serviceAlert * Added AlertService * Added white color when variant is "service" * Removed previous edits for service-variant * Added seperate component for serviceAlert * Removed edit to service-variant * Created style for ServiceAlert * Updated design * Updated design * Changed padding * Fixed prettier style * Fixed camelcase styling * Fixed Prettier style * Updated padding * FIx flex direction and missing style for children paragraphs * Add changeset * Replace pixels values with rem unit * Change description in change set * New changeset * Change changeset * Add changeset --------- Co-authored-by: Marte Solli Vågen <[email protected]> Co-authored-by: cibietici <[email protected]>
nsbno · Aug 22, 2024 · 8184ed1 · 8184ed1
1 parent 4afce70
commit 8184ed1
Show file tree

Hide file tree

Showing 10 changed files with 264 additions and 4 deletions.
diff --git a/.changeset/purple-emus-switch.md b/.changeset/purple-emus-switch.md
@@ -0,0 +1,8 @@
+---
+"@vygruppen/spor-react": minor
+---
+
+### New component
+
+- ServiceAlert added to the bunch
+- Alert: New variant "service"
diff --git a/packages/spor-react/src/alert/AlertIcon.tsx b/packages/spor-react/src/alert/AlertIcon.tsx
@@ -4,6 +4,7 @@ import {
   InformationOutline24Icon,
   SuccessOutline24Icon,
   WarningOutline24Icon,
+  WarningFill24Icon,
 } from "@vygruppen/spor-icon-react";
 import React from "react";
 import { createTexts, useTranslation } from "../i18n";
@@ -38,6 +39,8 @@ const getIcon = (variant: BaseAlertProps["variant"]) => {
       return AltTransportOutline24Icon;
     case "error":
       return ErrorOutline24Icon;
+    case "service":
+      return WarningFill24Icon;
   }
 };
 
@@ -72,4 +75,10 @@ const texts = createTexts({
     sv: "Alternativ transport",
     en: "Alternative transport",
   },
+  service: {
+    nb: "Driftsmelding",
+    nn: "Driftsmelding",
+    sv: "Servicemeddelande",
+    en: "Service message",
+  },
 });
diff --git a/packages/spor-react/src/alert/BaseAlert.tsx b/packages/spor-react/src/alert/BaseAlert.tsx
@@ -3,7 +3,13 @@ import React from "react";
 
 export type BaseAlertProps = BoxProps & {
   /** The color scheme and icon of the alert */
-  variant: "info" | "success" | "warning" | "alt-transport" | "error";
+  variant:
+    | "info"
+    | "success"
+    | "warning"
+    | "alt-transport"
+    | "error"
+    | "service";
   /** The body content of the alert */
   children: React.ReactNode;
   /** The title of the alert */

diff --git a/packages/spor-react/src/alert/ExpandableAlert.tsx b/packages/spor-react/src/alert/ExpandableAlert.tsx
@@ -73,15 +73,19 @@ export const ExpandableAlert = ({
                     WebkitLineClamp: "1",
                     WebkitBoxOrient: "vertical",
                   }}
-                  color="darkGrey"
+                  color={variant === "service" ? "white" : "darkGrey"}
                 >
                   {title}
                 </Box>
               </Flex>
-              <AccordionIcon color="darkGrey" />
+              <AccordionIcon
+                color={variant === "service" ? "white" : "darkGrey"}
+              />
             </Flex>
           </AccordionButton>
-          <AccordionPanel>{children}</AccordionPanel>
+          <AccordionPanel color={variant === "service" ? "white" : "darkGrey"}>
+            {children}
+          </AccordionPanel>
         </AccordionItem>
       </Accordion>
     </BaseAlert>

diff --git a/packages/spor-react/src/alert/ServiceAlert.tsx b/packages/spor-react/src/alert/ServiceAlert.tsx
@@ -0,0 +1,162 @@
+import {
+  Accordion,
+  AccordionButton,
+  AccordionIcon,
+  AccordionItem,
+  AccordionPanel,
+  Box,
+  Flex,
+  Stack,
+  Text,
+  useMultiStyleConfig,
+} from "@chakra-ui/react";
+import React from "react";
+import { AlertIcon } from "./AlertIcon";
+import { BaseAlert, BaseAlertProps } from "./BaseAlert";
+import { createTexts, useTranslation } from "../i18n";
+
+type ServiceAlertProps = BaseAlertProps & {
+  /** The title string  */
+  title: string;
+  /** The number of notifications when there is a list of multiple alerts */
+  notification: number;
+  /** The maximum width to display the service message
+   *
+   * Defaults to container.md */
+  contentWidth: string;
+  /** Callback for when the expandable panel is opened or closed */
+  onToggle?: (isOpen: boolean) => void;
+  /** Whether or not the default state of the alert is open */
+  defaultOpen?: boolean;
+  /**
+   * The HTML element used for the `title` prop.
+   *
+   * Defaults to h3 */
+  headingLevel?: "h2" | "h3" | "h4" | "h5" | "h6";
+};
+/**
+ * A service alert component.
+ *
+ * A regular alert with an expandable body, used to show service messages. The expandable body can be used to provide more information about the alert(s).
+ *
+ * ```tsx
+ * <ServiceAlert title="Error with Vipps" notification={1} contentWidth="container.md">
+ *   <Text>Some customers are experiencing issues logging in with Vipps. Vipps is working to resolve the issue. Try logging in with email instead.</Text>
+ * </ServiceAlert>
+ * ```
+ */
+export const ServiceAlert = ({
+  variant,
+  children,
+  title,
+  notification,
+  contentWidth = "container.md",
+  headingLevel = "h3",
+  defaultOpen = false,
+  onToggle = () => {},
+  ...boxProps
+}: ServiceAlertProps) => {
+  variant = "service";
+  const { t } = useTranslation();
+  const styles = useMultiStyleConfig("AlertService");
+  return (
+    <Box flexDirection="column" sx={styles.box}>
+      <BaseAlert
+        variant={variant}
+        {...boxProps}
+        paddingX={0}
+        paddingY={0}
+        sx={styles.box}
+      >
+        <Accordion
+          onChange={(expandedIndex) => onToggle(expandedIndex === 0)}
+          defaultIndex={defaultOpen ? 0 : -1}
+          allowToggle
+          flexGrow="1"
+        >
+          <AccordionItem>
+            <AccordionButton sx={styles.container}>
+              <Stack
+                flexDirection="row"
+                justifyContent="center"
+                width="100%"
+                paddingX="12px"
+              >
+                <Flex
+                  justifyContent="space-between"
+                  alignItems="center"
+                  flexGrow="1"
+                  maxWidth={contentWidth}
+                >
+                  <Flex as={headingLevel} alignItems="center">
+                    <AlertIcon variant={variant} />
+
+                    <Box
+                      as="span"
+                      sx={{
+                        // Truncate the title to one line
+                        display: "-webkit-box",
+                        overflow: "hidden",
+                        WebkitLineClamp: "1",
+                        WebkitBoxOrient: "vertical",
+                      }}
+                      color="white"
+                    >
+                      {title}
+                    </Box>
+                  </Flex>
+
+                  <Flex alignItems="center">
+                    {notification && (
+                      <Text sx={styles.notificationText}>
+                        {t(texts.notification(notification))}
+                      </Text>
+                    )}
+
+                    <AccordionIcon color="white" />
+                  </Flex>
+                </Flex>
+              </Stack>
+            </AccordionButton>
+
+            <AccordionPanel sx={styles.serviceMessageContent}>
+              <Stack flexDirection="row" justifyContent="center" width="100%">
+                <Flex
+                  justifyContent="space-between"
+                  alignItems="center"
+                  flexGrow="1"
+                  maxWidth={contentWidth}
+                  flexFlow="column"
+                  gap={2}
+                  sx={{
+                    p: {
+                      padding: "0.8rem 0",
+                      borderBottom: "0.08rem solid rgba(255, 255, 255, 0.4)",
+                    },
+                    "p:last-child": {
+                      borderBottom: "none",
+                    },
+                  }}
+                >
+                  {children}
+                </Flex>
+              </Stack>
+            </AccordionPanel>
+          </AccordionItem>
+        </Accordion>
+      </BaseAlert>
+    </Box>
+  );
+};
+
+const texts = createTexts({
+  notification: (notification) => {
+    const numNotification = Number(notification);
+    return {
+      nb: `${numNotification} varsel`,
+      nn: `${numNotification} varsel`,
+      sv: `${numNotification} ${numNotification > 1 ? "underrättelser" : "underrättelse"}`,
+      en: `${numNotification} ${numNotification > 1 ? "notifications" : "notification"}`,
+    };
+  },
+});
diff --git a/packages/spor-react/src/alert/index.tsx b/packages/spor-react/src/alert/index.tsx
@@ -1,3 +1,4 @@
 export * from "./ClosableAlert";
 export * from "./ExpandableAlert";
 export * from "./StaticAlert";
+export * from "./ServiceAlert";
diff --git a/packages/spor-react/src/theme/components/alert-expandable.ts b/packages/spor-react/src/theme/components/alert-expandable.ts
@@ -71,6 +71,16 @@ const config = helpers.defineMultiStyleConfig({
         },
       },
     },
+    service: {
+      container: {
+        _hover: {
+          outlineColor: "blueGreen",
+        },
+        _active: {
+          backgroundColor: "pine",
+        },
+      },
+    },
   },
   defaultProps: {
     variant: "info",

diff --git a/packages/spor-react/src/theme/components/alert-service.ts b/packages/spor-react/src/theme/components/alert-service.ts
@@ -0,0 +1,53 @@
+import { anatomy } from "@chakra-ui/anatomy";
+import { createMultiStyleConfigHelpers } from "@chakra-ui/styled-system";
+
+const parts = anatomy("alertService").parts(
+  "container",
+  "box",
+  "notificationText",
+  "serviceMessageContent",
+);
+const helpers = createMultiStyleConfigHelpers(parts.keys);
+
+const config = helpers.defineMultiStyleConfig({
+  baseStyle: {
+    container: {
+      paddingX: 0,
+      paddingY: 2,
+      fontSize: "inherit",
+      transitionProperty: "outline, border-radius",
+      transitionDuration: "fast",
+      borderTopRadius: "none",
+      borderBottomRadius: "18px",
+      _hover: {
+        outline: "2px solid",
+        outlineColor: "blueGreen",
+      },
+      _active: {
+        backgroundColor: "pine",
+        outlineColor: "pine",
+      },
+    },
+    box: {
+      outline: "1px solid",
+      outlineColor: "blueGreen",
+      backgroundColor: "darkTeal",
+      borderBottomRadius: "1.125rem",
+      borderTopRadius: "none",
+    },
+    notificationText: {
+      color: "white",
+      fontWeight: "400",
+      fontSize: "1rem",
+      pr: "0.375rem",
+    },
+    serviceMessageContent: {
+      paddingX: "0.75rem",
+      paddingTop: "0.375rem",
+      paddingBottom: "0.9375rem",
+      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
@@ -51,6 +51,12 @@ const config = helpers.defineMultiStyleConfig({
         backgroundColor: "banana",
       },
     },
+    service: {
+      container: {
+        backgroundColor: "darkTeal",
+        color: "white",
+      },
+    },
   },
   defaultProps: {
     variant: "info",

diff --git a/packages/spor-react/src/theme/components/index.ts b/packages/spor-react/src/theme/components/index.ts
@@ -1,6 +1,7 @@
 export { default as Accordion } from "./accordion";
 export { default as Alert } from "./alert";
 export { default as AlertExpandable } from "./alert-expandable";
+export { default as AlertService } from "./alert-service";
 export { default as Badge } from "./badge";
 export { default as Breadcrumb } from "./breadcrumb";
 export { default as Button } from "./button";