@vygruppen/spor-react 11.3.10 → 12.0.0

package/src/alert/AlertIcon.tsx

@@ -1,47 +1,59 @@
+"use client";
+
 import {
-  AltTransportOutline24Icon,
+  AltTransportFill24Icon,
+  ErrorFill24Icon,
   ErrorOutline24Icon,
-  InformationOutline24Icon,
-  SuccessOutline24Icon,
-  WarningOutline24Icon,
-  WarningFill24Icon,
+  IconComponent,
+  InformationFill24Icon,
+  QuestionFill24Icon,
   ServiceFill24Icon,
+  SuccessFill24Icon,
+  WarningFill24Icon,
 } from "@vygruppen/spor-icon-react";
-import React from "react";
+import React, { PropsWithChildren } from "react";
 import { createTexts, useTranslation } from "../i18n";
-import { BaseAlertProps } from "./BaseAlert";
+import { AlertProps } from "./Alert";
+import { Box, useSlotRecipe, Alert as ChakraAlert } from "@chakra-ui/react";
+
+type AlertIconProps = {
+  variant: ChakraAlert.RootProps["variant"];
+  customIcon?: IconComponent;
+};
 
-type AlertIconProps = { variant: BaseAlertProps["variant"] };
 /**
  * Internal component that shows the correct icon for the alert
  */
-export const AlertIcon = ({ variant }: AlertIconProps) => {
-  const Icon = getIcon(variant);
+export const AlertIcon = ({ variant, customIcon }: AlertIconProps) => {
   const { t } = useTranslation();
+
+  const icon = customIcon ?? getIcon(variant);
+
   return (
-    <Icon
-      flexShrink={0}
-      aria-label={t(texts[variant])}
-      marginRight={1}
-      color="darkGrey"
+    <Box
+      as={icon}
+      aria-label={t(texts[variant as keyof typeof texts])}
+      color={customIcon ? `alert.${variant}.icon` : undefined}
     />
   );
 };
 
-const getIcon = (variant: BaseAlertProps["variant"]) => {
+const getIcon = (variant: AlertProps["variant"]) => {
   switch (variant) {
     case "info":
-      return InformationOutline24Icon;
+      return InformationFill24Icon;
     case "success":
-      return SuccessOutline24Icon;
-    case "warning":
-      return WarningOutline24Icon;
-    case "alt-transport":
-      return AltTransportOutline24Icon;
+      return SuccessFill24Icon;
+    case "important":
+      return WarningFill24Icon;
+    case "alt":
+      return AltTransportFill24Icon;
     case "error":
+      return ErrorFill24Icon;
+    case "error-secondary":
       return ErrorOutline24Icon;
-    case "global-deviation":
-      return WarningFill24Icon;
+    case "neutral":
+      return QuestionFill24Icon;
     case "service":
       return ServiceFill24Icon;
   }
@@ -60,34 +72,40 @@ const texts = createTexts({
     sv: "Succé",
     en: "Success",
   },
-  warning: {
-    nb: "Advarsel",
-    nn: "Advarsel",
-    sv: "Varning",
-    en: "Warning",
+  important: {
+    nb: "Viktig",
+    nn: "Viktig",
+    sv: "Viktig",
+    en: "Important",
+  },
+  alt: {
+    nb: "Alternativ",
+    nn: "Alternativ",
+    sv: "Alternativ",
+    en: "Alternative",
   },
   error: {
     nb: "Feil",
     nn: "Feil",
-    sv: "Error",
+    sv: "Fel",
     en: "Error",
   },
-  "alt-transport": {
-    nb: "Alternativ transport",
-    nn: "Alternativ transport",
-    sv: "Alternativ transport",
-    en: "Alternative transport",
+  "error-secondary": {
+    nb: "Feil",
+    nn: "Feil",
+    sv: "Fel",
+    en: "Error",
   },
-  service: {
-    nb: "Driftsmelding",
-    nn: "Driftsmelding",
-    sv: "Servicemeddelande",
-    en: "Service message",
+  neutral: {
+    nb: "Nøytral",
+    nn: "Nøytral",
+    sv: "Neutral",
+    en: "Neutral",
   },
-  "global-deviation": {
-    nb: "Trafikkmelding",
-    nn: "Trafikkmelding",
-    sv: "Trafikmeddelande",
-    en: "Traffic announcement",
+  service: {
+    nb: "Service",
+    nn: "Service",
+    sv: "Service",
+    en: "Service",
   },
 });

package/src/alert/ExpandableAlert.tsx

@@ -1,30 +1,52 @@
+"use client";
+
 import {
   Accordion,
-  AccordionButton,
-  AccordionIcon,
-  AccordionItem,
-  AccordionPanel,
   Box,
-  Flex,
-  useMultiStyleConfig,
+  ConditionalValue,
+  HStack,
+  RecipeVariantProps,
+  Span,
+  useSlotRecipe,
 } from "@chakra-ui/react";
-import React from "react";
+import React, { forwardRef, PropsWithChildren } from "react";
 import { AlertIcon } from "./AlertIcon";
-import { BaseAlert, BaseAlertProps } from "./BaseAlert";
+import { AlertProps } from "./Alert";
+import { alertExpandableSlotRecipe } from "@/theme/slot-recipes/alert-expandable";
+import { DropdownDownFill18Icon } from "@vygruppen/spor-icon-react";
+import { AccordionItemContent } from "@/accordion";
+
+type ExpandableAlertVariantProps = RecipeVariantProps<
+  typeof alertExpandableSlotRecipe
+>;
 
-type ExpandableAlertProps = BaseAlertProps & {
-  /** The title string  */
-  title: string;
-  /** Callback for when the expandable panel is opened or closed */
-  onToggle?: (isOpen: boolean) => void;
-  /** Whether or not the default state of the expandable alert is open */
-  defaultOpen?: boolean;
-  /**
-   * The HTML element used for the `title` prop.
-   *
-   * Defaults to h3 */
-  headingLevel?: "h2" | "h3" | "h4" | "h5" | "h6";
-};
+type ExpandableAlertProps = PropsWithChildren<ExpandableAlertVariantProps> &
+  Omit<Accordion.RootProps, "variant" | "orientation" | "size" | "value"> & {
+    /** The title string  */
+    title: string;
+    /** Whether or not the default state of the expandable alert is open */
+    defaultOpen?: boolean;
+    /**
+     * The HTML element used for the `title` prop.
+     *
+     * Defaults to h3 */
+    headingLevel?: "h2" | "h3" | "h4" | "h5" | "h6";
+    /** If the user should be able to close the Accordion. Defaults to true */
+    collapsible?: boolean;
+    /**
+   * The variant of the alert. Default: info
+   * "info"
+      | "success"
+      | "important"
+      | "alt-transport"
+      | "error"
+      | "service"
+      | "global-deviation";
+   */
+    variant?: ConditionalValue<
+      "important" | "success" | "alt" | "info" | "error" | undefined
+    >;
+  };
 /**
  * An expandable alert component.
  *
@@ -36,58 +58,68 @@ type ExpandableAlertProps = BaseAlertProps & {
  * </ExpandableAlert>
  * ```
  */
-export const ExpandableAlert = ({
-  variant,
-  children,
-  title,
-  headingLevel = "h3",
-  defaultOpen = false,
-  onToggle = () => {},
-  ...boxProps
-}: ExpandableAlertProps) => {
-  const styles = useMultiStyleConfig("AlertExpandable", { variant });
-  return (
-    <BaseAlert variant={variant} {...boxProps} paddingX={0} paddingY={0}>
-      <Accordion
-        onChange={(expandedIndex) => onToggle(expandedIndex === 0)}
-        defaultIndex={defaultOpen ? 0 : -1}
-        allowToggle
-        flexGrow="1"
+export const ExpandableAlert = forwardRef<HTMLDivElement, ExpandableAlertProps>(
+  (props, ref) => {
+    const {
+      variant = "info",
+      children,
+      title,
+      collapsible = true,
+      headingLevel = "h3",
+      defaultOpen = false,
+      css,
+      ...rest
+    } = props;
+    const recipe = useSlotRecipe({ key: "alertExpandable" });
+    const styles = recipe({ variant });
+
+    const defaultValue = "alert-expandable";
+
+    return (
+      <Accordion.Root
+        defaultValue={defaultOpen ? [defaultValue] : undefined}
+        ref={ref}
+        css={{ ...styles.root, ...css }}
+        collapsible={collapsible}
+        {...rest}
       >
-        <AccordionItem sx={styles.accordion}>
-          <AccordionButton sx={styles.container}>
-            <Flex
-              justifyContent="space-between"
+        <Accordion.Item value={defaultValue}>
+          <Accordion.ItemTrigger css={styles.itemTrigger}>
+            <HStack
+              gap="1"
               alignItems="center"
-              flexGrow="1"
+              justifyContent="space-between"
+              flex="1"
+              width="full"
             >
-              <Flex as={headingLevel} alignItems="center">
-                <AlertIcon variant={variant} />
-
-                <Box
-                  as="span"
-                  sx={{
+              <HStack gap="1" alignItems="center">
+                <Box css={styles.indicator}>
+                  <AlertIcon variant={variant} />
+                </Box>
+                <Span
+                  as={headingLevel}
+                  css={{
                     // Truncate the title to one line
                     display: "-webkit-box",
                     overflow: "hidden",
                     WebkitLineClamp: "1",
                     WebkitBoxOrient: "vertical",
                   }}
-                  color={variant === "service" ? "white" : "darkGrey"}
                 >
                   {title}
-                </Box>
-              </Flex>
-              <AccordionIcon
-                color={variant === "service" ? "white" : "darkGrey"}
-              />
-            </Flex>
-          </AccordionButton>
-          <AccordionPanel color={variant === "service" ? "white" : "darkGrey"}>
+                </Span>
+              </HStack>
+
+              <Accordion.ItemIndicator>
+                <DropdownDownFill18Icon />
+              </Accordion.ItemIndicator>
+            </HStack>
+          </Accordion.ItemTrigger>
+          <AccordionItemContent css={styles.itemContent}>
             {children}
-          </AccordionPanel>
-        </AccordionItem>
-      </Accordion>
-    </BaseAlert>
-  );
-};
+          </AccordionItemContent>
+        </Accordion.Item>
+      </Accordion.Root>
+    );
+  },
+);

package/src/alert/ServiceAlert.tsx

@@ -1,41 +1,50 @@
+"use client";
+
 import {
   Accordion,
-  AccordionButton,
-  AccordionIcon,
-  AccordionItem,
-  AccordionPanel,
-  Box,
   Flex,
+  HStack,
+  RecipeVariantProps,
+  Span,
   Stack,
   Text,
-  useMultiStyleConfig,
+  useSlotRecipe,
 } from "@chakra-ui/react";
-import React from "react";
+import React, { forwardRef, PropsWithChildren } from "react";
+import { AlertProps } from "./Alert";
 import { createTexts, useTranslation } from "../i18n";
-import { AlertIcon } from "./AlertIcon";
-import { BaseAlert, BaseAlertProps } from "./BaseAlert";
+import { alertServiceSlotRecipe } from "../theme/slot-recipes/alert-service";
+import {
+  DropdownDownFill24Icon,
+  ServiceFill24Icon,
+  WarningFill24Icon,
+} from "@vygruppen/spor-icon-react";
 
-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";
-  /** The variant of Service Alert. Default: service */
-  variant?: "service" | "global-deviation";
-};
+type ServiceAlertVariantProps = RecipeVariantProps<
+  typeof alertServiceSlotRecipe
+>;
+
+type ServiceAlertProps = Omit<AlertProps, "variant"> &
+  PropsWithChildren<ServiceAlertVariantProps> &
+  Omit<Accordion.RootProps, "variant" | "orientation" | "size" | "value"> & {
+    /** 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;
+    /** 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";
+    /** The variant of Service Alert. Default: service */
+    variant?: "service" | "global-deviation";
+  };
 /**
  * A service alert component.
  *
@@ -47,111 +56,92 @@ type ServiceAlertProps = BaseAlertProps & {
  * </ServiceAlert>
  * ```
  */
-export const ServiceAlert = ({
-  variant = "service",
-  children,
-  title,
-  notification,
-  contentWidth = "container.md",
-  headingLevel = "h3",
-  defaultOpen = false,
-  onToggle = () => {},
-  ...boxProps
-}: ServiceAlertProps) => {
-  const { t } = useTranslation();
-  const styles = useMultiStyleConfig("AlertService", { variant });
-  return (
-    <BaseAlert
-      variant={variant}
-      {...boxProps}
-      paddingX={0}
-      paddingY={0}
-      sx={styles.outerBox}
-    >
-      <Accordion
-        onChange={(expandedIndex) => onToggle(expandedIndex === 0)}
-        defaultIndex={defaultOpen ? 0 : -1}
-        allowToggle
-        flexGrow={1}
-        sx={{ outline: "none" }}
-        variant={variant}
+
+export const ServiceAlert = forwardRef<HTMLDivElement, ServiceAlertProps>(
+  (props, ref) => {
+    const {
+      variant = "service",
+      children,
+      title,
+      notification,
+      contentWidth = "container.md",
+      headingLevel = "h3",
+      defaultOpen = false,
+      collapsible = true,
+      css,
+      ...rest
+    } = props;
+    const { t } = useTranslation();
+    const recipe = useSlotRecipe({ key: "alertService" });
+    const styles = recipe({ variant });
+
+    const defaultValue = "spor-service-alert";
+    return (
+      <Accordion.Root
+        defaultValue={defaultOpen ? [defaultValue] : undefined}
+        collapsible={collapsible}
+        css={{ ...styles.root, ...css }}
+        ref={ref}
+        {...rest}
       >
-        <AccordionItem>
-          <AccordionButton sx={styles.container}>
-            <Stack
-              flexDirection="row"
-              justifyContent="center"
+        <Accordion.Item value={defaultValue}>
+          <Accordion.ItemTrigger css={styles.itemTrigger}>
+            <HStack
+              justifyContent="space-between"
+              alignContent="center"
               width="100%"
-              paddingX={2}
+              maxWidth={contentWidth}
             >
-              <Flex
-                justifyContent="space-between"
-                alignItems="center"
-                flexGrow={1}
-                maxWidth={contentWidth}
-              >
-                <Flex as={headingLevel} alignItems="center">
-                  {notification === 1 && <AlertIcon variant={variant} />}
-
-                  <Box
-                    as="span"
-                    sx={{
-                      // Truncate the title to one line
-                      display: "-webkit-box",
-                      overflow: "hidden",
-                      WebkitLineClamp: "1",
-                      WebkitBoxOrient: "vertical",
-                    }}
-                  >
-                    {title}
-                  </Box>
-                </Flex>
-
-                <Flex alignItems="center">
-                  {notification && (
-                    <Text sx={styles.notificationText}>
-                      {t(texts.notification(notification))}
-                    </Text>
-                  )}
-
-                  <AccordionIcon />
-                </Flex>
+              <HStack as={headingLevel} alignItems="center" gap="1">
+                {variant === "service" ? (
+                  <ServiceFill24Icon aria-label={t(texts.service)} />
+                ) : (
+                  <WarningFill24Icon
+                    aria-label={t(texts["global-deviation"])}
+                  />
+                )}
+                <Span
+                  css={{
+                    // Truncate the title to one line
+                    display: "-webkit-box",
+                    overflow: "hidden",
+                    WebkitLineClamp: "1",
+                    WebkitBoxOrient: "vertical",
+                    ...styles.itemTriggerTitle,
+                  }}
+                >
+                  {title}
+                </Span>
+              </HStack>
+              <Flex alignItems="center" gap={[0.5, null, null, 1]}>
+                {notification && (
+                  <Text css={styles.notificationText}>
+                    {t(texts.notification(notification))}
+                  </Text>
+                )}
+                <Accordion.ItemIndicator>
+                  <DropdownDownFill24Icon color="icon.inverted" />
+                </Accordion.ItemIndicator>
               </Flex>
-            </Stack>
-          </AccordionButton>
+            </HStack>
+          </Accordion.ItemTrigger>
 
-          <AccordionPanel sx={styles.serviceMessageContent}>
+          <Accordion.ItemContent asChild>
             <Stack flexDirection="row" justifyContent="center" width="100%">
-              <Stack
-                justifyContent="center"
-                alignItems="center"
-                flexGrow={1}
+              <Accordion.ItemBody
+                as={Stack}
                 maxWidth={contentWidth}
-                flexFlow="column"
-                gap={2}
-                sx={{
-                  p: {
-                    padding: "0.8rem 0",
-                    borderBottom: "0.08rem solid",
-                    borderColor:
-                      variant === "global-deviation"
-                        ? "blackAlpha.400"
-                        : "whiteAlpha.400",
-                  },
-                  "p:last-child": {
-                    borderBottom: "none",
-                  },
-                }}
+                css={styles.itemBody}
               >
                 {children}
-              </Stack>
+              </Accordion.ItemBody>
             </Stack>
-          </AccordionPanel>
-        </AccordionItem>
-      </Accordion>
-    </BaseAlert>
-  );
-};
+          </Accordion.ItemContent>
+        </Accordion.Item>
+      </Accordion.Root>
+    );
+  },
+);
 
 const texts = createTexts({
   notification: (notification) => {
@@ -163,4 +153,16 @@ const texts = createTexts({
       en: `${numNotification} ${numNotification > 1 ? "notifications" : "notification"}`,
     };
   },
+  service: {
+    nb: "Driftsmelding",
+    nn: "Driftsmelding",
+    sv: "Service meddelande",
+    en: "Service message",
+  },
+  "global-deviation": {
+    nb: "Trafikkmelding",
+    nn: "Trafikkmelding",
+    sv: "Trafikmeddelande",
+    en: "Traffic announcement",
+  },
 });

package/src/alert/{index.tsx → index.ts}

@@ -1,4 +1,3 @@
-export * from "./ClosableAlert";
 export * from "./ExpandableAlert";
-export * from "./StaticAlert";
 export * from "./ServiceAlert";
+export * from "./Alert";