Major change: Accordion update

.changeset/wet-queens-joke.md

@@ -0,0 +1,11 @@
+---
+"@vygruppen/spor-react": major
+---
+
+Breaking change: Accordion
+
+The `size` prop is no longer supported, and replaced by responsive sizes (sm on mobile, md on desktop).
+
+The sizing will happen automatically according to breakpoints.
+
+`allowMultiple` is also removed as default (Accordion will ignore allowToggle when allowMultiple is allowed).

apps/docs/package.json

@@ -1,6 +1,6 @@
 {
   "private": true,
-  "version": "0.0.43",
+  "version": "0.0.44",
   "name": "@vygruppen/docs",
   "description": "The Spor documentation",
   "license": "MIT",

packages/spor-react/src/accordion/Accordion.tsx

@@ -5,7 +5,6 @@ import {
 } from "@chakra-ui/react";
 import React from "react";
 import { Stack, StackProps } from "../layout";
-import { AccordionProvider } from "./AccordionContext";
 export {
   AccordionButton,
   AccordionIcon,
@@ -27,15 +26,14 @@ export type AccordionProps = Omit<ChakraAccordionProps, "variant" | "size"> & {
    * - `floating` renders a version with a drop shadow
    */
   variant?: "ghost" | "base" | "floating";
-  size?: "sm" | "md" | "lg";
   /** The margin between accordion items */
   spacing?: StackProps["spacing"];
 };
 /*
  * Wraps a set of ExpandableItem or AccordionItem components.
  *
  * ```tsx
- * <Accordion variant="ghost" size="md">
+ * <Accordion variant="ghost">
  *   <ExpandableItem title="Is Spor easy?" headingLevel="h3">
  *     Yes
  *   </ExpandableItem>
@@ -54,15 +52,13 @@ export const Accordion = forwardRef<AccordionProps, "div">(
         ? [props.defaultIndex]
         : props.defaultIndex;
     return (
-      <AccordionProvider size={props.size}>
-        <ChakraAccordion
-          {...props}
-          ref={ref}
-          defaultIndex={defaultIndex as number[] | undefined}
-        >
-          <Stack spacing={spacing}>{children}</Stack>
-        </ChakraAccordion>
-      </AccordionProvider>
+      <ChakraAccordion
+        {...props}
+        ref={ref}
+        defaultIndex={defaultIndex as number[] | undefined}
+      >
+        <Stack spacing={spacing}>{children}</Stack>
+      </ChakraAccordion>
     );
   },
 );

packages/spor-react/src/accordion/Expandable.tsx

@@ -9,7 +9,6 @@ import {
 } from "@chakra-ui/react";
 import React from "react";
 import { Accordion, AccordionProps } from "./Accordion";
-import { useAccordionContext } from "./AccordionContext";
 
 type HeadingLevel = "h2" | "h3" | "h4" | "h5" | "h6";
 type ExpandableProps = Omit<
@@ -25,10 +24,7 @@ type ExpandableProps = Omit<
   /**
    * Icon shown to the left of the title
    *
-   * Make sure it's the outlined version of the icon.
-   *
-   * If the size is set to `sm` or `md` the icon should be 24px.
-   * If the size is set to `lg`, the icon should be 30px.
+   * Make sure it's the 24px outlined version of the icon
    */
   leftIcon?: React.ReactNode;
 
@@ -46,7 +42,7 @@ type ExpandableProps = Omit<
  * If you want several expandables in a row, use the `Accordion` and `ExpandableItem` components instead.
  *
  * ```tsx
- * <Expandable title="Click for more" variant="base" size="lg">
+ * <Expandable title="Click for more" variant="base">
  *   <Text>MORE! 🎉</Text>
  * </Expandable>
  * ```
@@ -56,7 +52,6 @@ export const Expandable = ({
   headingLevel,
   title,
   leftIcon,
-  size = "md",
   defaultOpen,
   isOpen,
   onChange = () => {},
@@ -67,8 +62,6 @@ export const Expandable = ({
       {...rest}
       index={isOpen ? 0 : undefined}
       defaultIndex={defaultOpen ? 0 : undefined}
-      allowMultiple={true}
-      size={size}
       onChange={(expandedIndex) => onChange(expandedIndex === 0)}
     >
       <ExpandableItem
@@ -92,15 +85,15 @@ export type ExpandableItemProps = Omit<AccordionItemProps, "title"> & {
   /**
    * Icon shown to the left of the title
    *
-   * Make sure it's the 30px outlined version of the icon
+   * Make sure it's the 24px outlined version of the icon
    */
   leftIcon?: React.ReactNode;
 };
 /**
  * An item in a set of Expandables. Must be wrapped in an `<Accordion>` component.
  *
  * ```tsx
- * <Accordion variant="ghost" size="md">
+ * <Accordion variant="ghost">
  *  <ExpandableItem title="Is Spor easy?" headingLevel="h3">
  *    Yes
  *  </ExpandableItem>
@@ -119,8 +112,7 @@ export const ExpandableItem = ({
   leftIcon,
   ...rest
 }: ExpandableItemProps) => {
-  const { size } = useAccordionContext();
-  warnAboutMismatchingIcon({ icon: leftIcon, size });
+  warnAboutMismatchingIcon({ icon: leftIcon });
   return (
     <AccordionItem {...rest}>
       <Box as={headingLevel}>
@@ -139,9 +131,8 @@ export const ExpandableItem = ({
 
 type WarnAboutMismatchingIcon = {
   icon: any;
-  size: AccordionProps["size"];
 };
-const warnAboutMismatchingIcon = ({ icon, size }: WarnAboutMismatchingIcon) => {
+const warnAboutMismatchingIcon = ({ icon }: WarnAboutMismatchingIcon) => {
   if (process.env.NODE_ENV !== "production") {
     const displayName = icon?.type?.render?.displayName;
     if (!displayName) {
@@ -156,18 +147,9 @@ const warnAboutMismatchingIcon = ({ icon, size }: WarnAboutMismatchingIcon) => {
       );
       return;
     }
-    if (size === "lg" && !displayName.includes("30Icon")) {
-      console.warn(
-        `The icon you passed was of the wrong size for the lg size. You passed ${displayName}, replace it with ${displayName.replace(
-          /(\d{2})Icon/,
-          "30Icon",
-        )}.`,
-      );
-      return;
-    }
-    if (["md" || "sm"].includes(size!) && !displayName.includes("24Icon")) {
+    if (!displayName.includes("24Icon")) {
       console.warn(
-        `The icon you passed was of the wrong size for the ${size} size. You passed ${displayName}, replace it with ${displayName.replace(
+        `The icon you passed was of the wrong size. You passed ${displayName}, replace it with ${displayName.replace(
           /(\d{2})Icon/,
           "24Icon",
         )}.`,

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

@@ -20,9 +20,13 @@ const config = helpers.defineMultiStyleConfig({
       justifyContent: "space-between",
       ...baseText("default", props),
       textAlign: "left",
+      fontSize: ["mobile.sm", null, "desktop.sm"],
       fontFamily: "body",
       fontWeight: "bold",
       outlineOffset: "-2px",
+      paddingX: [2, null, 3],
+      paddingY: [1, null, 1.5],
+      minHeight: [6, null, 7],
       ...focusVisibleStyles(props),
       _disabled: {
         pointerEvents: "none",
@@ -31,7 +35,9 @@ const config = helpers.defineMultiStyleConfig({
     },
     panel: {
       paddingY: 2,
+      paddingX: [2, null, 3],
       borderBottomRadius: "sm",
+      fontSize: ["mobile.sm", null, "desktop.sm"],
     },
     icon: {
       fontSize: "1.25em",
@@ -88,47 +94,8 @@ const config = helpers.defineMultiStyleConfig({
       },
     }),
   },
-  sizes: {
-    sm: {
-      button: {
-        fontSize: ["mobile.xs", null, "desktop.xs"],
-        paddingX: 2,
-        paddingY: 1,
-        minHeight: 6,
-      },
-      panel: {
-        fontSize: ["mobile.xs", null, "desktop.xs"],
-        paddingX: 2,
-      },
-    },
-    md: {
-      button: {
-        fontSize: ["mobile.sm", null, "desktop.sm"],
-        paddingX: 3,
-        paddingY: 1,
-        minHeight: 7,
-      },
-      panel: {
-        fontSize: ["mobile.sm", null, "desktop.sm"],
-        paddingX: 3,
-      },
-    },
-    lg: {
-      button: {
-        fontSize: ["mobile.sm", null, "desktop.sm"],
-        paddingX: 3,
-        paddingY: 2,
-        minHeight: 8,
-      },
-      panel: {
-        fontSize: ["mobile.sm", null, "desktop.sm"],
-        paddingX: 3,
-      },
-    },
-  },
   defaultProps: {
-    variant: "ghost",
-    size: "sm",
+    variant: "base",
   },
 });