@vygruppen/spor-react 13.2.1 → 13.3.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vygruppen/spor-react",
   "type": "module",
-  "version": "13.2.1",
+  "version": "13.3.1",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -39,7 +39,6 @@
     "awesome-phonenumber": "^5.11.0",
     "deepmerge": "^4.3.1",
     "framer-motion": "^11.11.17",
-    "jscodeshift": "^17.3.0",
     "lottie-react": "^2.4.1",
     "next-themes": "^0.4.4",
     "react-aria": "^3.33.1",

package/src/error-summary/index.tsx

@@ -0,0 +1,79 @@
+import { Box, Flex, useSlotRecipe } from "@chakra-ui/react";
+import { ErrorFill24Icon } from "@vygruppen/spor-icon-react";
+import { useRef } from "react";
+
+import { TextLink } from "@/link";
+import { List, ListItem } from "@/list";
+import { Heading } from "@/typography";
+import { slugify } from "@/util";
+
+export const ErrorSummary = ({
+  ref: externalRef,
+  children,
+  headingLevel = "h2",
+  heading,
+  ...rest
+}: {
+  ref?: React.Ref<HTMLDivElement>;
+  children: React.ReactNode;
+  headingLevel?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+  heading: string;
+}) => {
+  const recipe = useSlotRecipe({ key: "errorSummary" });
+  const styles = recipe();
+
+  const wrapperRef = useRef<HTMLDivElement>(null);
+  const headingRef = useRef<HTMLHeadingElement>(null);
+
+  const ref = externalRef ?? wrapperRef;
+
+  return (
+    <Box
+      css={styles.container}
+      ref={ref}
+      {...rest}
+      aria-labelledby={slugify(heading)}
+      tabIndex={-1}
+    >
+      {heading && (
+        <Flex css={styles.heading}>
+          <ErrorFill24Icon
+            css={{
+              flexShrink: 0,
+              "& path:first-of-type": {
+                fill: `icon.critical`,
+              },
+              "& path:not(:first-of-type)": {
+                fill: `surface.critical`,
+              },
+            }}
+          />
+          <Heading as={headingLevel} variant="md" autoId ref={headingRef}>
+            {heading}
+          </Heading>
+        </Flex>
+      )}
+      <List css={styles.list} gap={2}>
+        {children}
+      </List>
+    </Box>
+  );
+};
+
+export const ErrorSummaryItem = ({
+  children,
+  href,
+  ...rest
+}: {
+  children: React.ReactNode;
+  href: string;
+}) => {
+  const recipe = useSlotRecipe({ key: "errorSummary" });
+  const styles = recipe();
+
+  return (
+    <ListItem css={styles.item} {...rest}>
+      <TextLink href={href}>{children}</TextLink>
+    </ListItem>
+  );
+};

package/src/index.tsx

@@ -6,6 +6,7 @@ export * from "./calendar";
 export * from "./color-mode";
 export * from "./datepicker";
 export * from "./dialog";
+export * from "./error-summary";
 export * from "./i18n";
 export * from "./image";
 export * from "./input";

package/src/theme/slot-recipes/anatomy.ts

@@ -302,3 +302,10 @@ export const menuAnatomy = createAnatomy("menu").parts(
   "triggerItem",
   "checkboxItem",
 );
+
+export const errorSummaryAnatomy = createAnatomy("error-summary").parts(
+  "container",
+  "heading",
+  "list",
+  "item",
+);

package/src/theme/slot-recipes/datepicker.ts

@@ -43,7 +43,7 @@ export const datePickerSlotRecipe = defineSlotRecipe({
     },
     dateTimeSegment: {
       _focus: {
-        backgroundColor: "surface.ghost.active",
+        backgroundColor: "surface.floating.active",
         color: "text",
       },
     },

package/src/theme/slot-recipes/error-summary.ts

@@ -0,0 +1,32 @@
+import { defineSlotRecipe } from "@chakra-ui/react";
+
+import { errorSummaryAnatomy } from "./anatomy";
+
+export const errorSummarySlotRecipe = defineSlotRecipe({
+  slots: errorSummaryAnatomy.keys(),
+  className: "spor-error-summary",
+  base: {
+    container: {
+      display: "flex",
+      flexDirection: "column",
+      padding: [3, 5],
+      backgroundColor: "surface.critical",
+      borderRadius: "md",
+    },
+    heading: {
+      fontSize: "md",
+      fontWeight: "bold",
+      color: "text.critical",
+      gap: [1, 1.5],
+      alignItems: "center",
+    },
+    list: {
+      alignItems: "flex-start",
+      paddingLeft: [4, 5],
+    },
+    item: {
+      color: "text.critical.subtle",
+      marginTop: [2, 1.5],
+    },
+  },
+});

package/src/theme/slot-recipes/index.ts

@@ -10,6 +10,7 @@ import { collapsibleSlotRecipe } from "./collapsible";
 import { datePickerSlotRecipe } from "./datepicker";
 import { dialogSlotRecipe } from "./dialog";
 import { drawerSlotRecipe } from "./drawer";
+import { errorSummarySlotRecipe } from "./error-summary";
 import { fieldSlotRecipe } from "./field";
 import { filterChipSlotRecipe } from "./filter-chip";
 import { floatingActionButtonSlotRecipe } from "./floating-action-button";
@@ -75,4 +76,5 @@ export const slotRecipes = {
   tag: inputChipSlotRecipe,
   menu: menuSlotRecipe,
   choiceChip: choiceChipSlotRecipe,
+  errorSummary: errorSummarySlotRecipe,
 };

package/src/theme/slot-recipes/popover.ts

@@ -24,6 +24,8 @@ export const popoverSlotRecipe = defineSlotRecipe({
 
       transformOrigin: "var(--transform-origin)",
       maxHeight: "var(--available-height)",
+      maxWidth: "var(--available-width)",
+
       _open: {
         animationStyle: "scale-fade-in",
         animationDuration: "fast",