New Admin UI - Accordion Component

packages/admin-ui/scripts/importFromFigma/createTailwindConfigTheme.js

@@ -11,7 +11,7 @@ const createTailwindConfigTheme = normalizedFigmaExport => {
         animation: {
             "accordion-down": "accordion-down 0.2s ease-out",
             "accordion-up": "accordion-up 0.2s ease-out",
-            skeletonPulse: "skeletonPulse 1400ms ease-in-out infinite"
+            "skeleton-pulse": "skeleton-pulse 1400ms ease-in-out infinite"
         },
         backgroundColor: normalizedFigmaExport.reduce(
             (acc, { type, variantName }) => {
@@ -140,7 +140,7 @@ const createTailwindConfigTheme = normalizedFigmaExport => {
                 from: { height: "var(--radix-accordion-content-height)" },
                 to: { height: "0" }
             },
-            skeletonPulse: {
+            "skeleton-pulse": {
                 "0%, 100%": { backgroundColor: "hsl(var(--bg-neutral-dimmed))" },
                 "50%": { backgroundColor: "hsl(var(--bg-neutral-muted))" }
             }

packages/admin-ui/src/Accordion/Accordion.tsx

@@ -1,19 +1,37 @@
 import React, { useMemo } from "react";
-import { cn, makeDecoratable, withStaticProps } from "~/utils";
+import { makeDecoratable, withStaticProps } from "~/utils";
 import { AccordionRoot } from "./components/AccordionRoot";
-import { AccordionContext, useAccordion } from "./components/AccordionContext";
 import { AccordionItem, type AccordionItemProps } from "./components/AccordionItem";
+import { cva, type VariantProps } from "class-variance-authority";
 
-type AccordionProps = React.ComponentPropsWithoutRef<typeof AccordionRoot> & {
-    children: React.ReactNode;
-    variant?: "underline" | "container";
-    background?: "transparent" | "base" | "light";
-};
+const accordionVariants = cva("wby-group w-full", {
+    variants: {
+        variant: {
+            container: "wby-accordion-variant-container wby-gap-xs wby-flex wby-flex-col",
+            underline: "wby-accordion-variant-underline "
+        },
+        background: {
+            base: "wby-accordion-background-base",
+            light: "wby-accordion-background-light",
+            transparent: "wby-accordion-background-transparent"
+        }
+    },
+    defaultVariants: {
+        variant: "underline",
+        background: "base"
+    }
+});
+
+type AccordionProps = React.ComponentPropsWithoutRef<typeof AccordionRoot> &
+    VariantProps<typeof accordionVariants> & {
+        children: React.ReactNode;
+    };
 
 const AccordionBase = ({
     children,
     variant,
-    background = "base",
+    background,
+    className,
     ...baseRootProps
 }: AccordionProps) => {
     const rootProps = useMemo(() => {
@@ -28,25 +46,17 @@ const AccordionBase = ({
     return (
         <AccordionRoot
             {...rootProps}
-            className={cn(
-                "w-full",
-                { "wby-gap-xs wby-flex wby-flex-col": variant === "container" },
-                rootProps.className
-            )}
+            className={accordionVariants({ variant, background, className })}
         >
-            <AccordionContext.Provider value={{ variant, background }}>
-                {children}
-            </AccordionContext.Provider>
+            {children}
         </AccordionRoot>
     );
 };
 
-AccordionBase.displayName = "Accordion";
-
 const DecoratableAccordion = makeDecoratable("Accordion", AccordionBase);
 
 const Accordion = withStaticProps(DecoratableAccordion, {
     Item: AccordionItem
 });
 
-export { Accordion, type AccordionProps, type AccordionItemProps, useAccordion };
+export { Accordion, type AccordionProps, type AccordionItemProps };

packages/admin-ui/src/Accordion/components/AccordionContent.tsx

@@ -11,17 +11,17 @@ const accordionContentVariants = cva(
         // Using pixel values here because of non-existing design tokens.
         variants: {
             withIcon: {
-                true: "wby-pl-[36px]"
+                true: "wby-pl-9"
             },
             withHandle: {
-                true: "wby-pl-[20px]"
+                true: "wby-pl-5"
             }
         },
         compoundVariants: [
             {
                 withIcon: true,
                 withHandle: true,
-                className: "wby-pl-[56px]"
+                className: "wby-pl-14"
             }
         ],
         defaultVariants: {
@@ -41,7 +41,7 @@ const AccordionContent = ({ children, withIcon, withHandle, ...props }: Accordio
             {...props}
             className={cn(accordionContentVariants({ withHandle, withIcon }), props.className)}
         >
-            <div className={"wby-pt-sm wby-pb-lg wby-pl-md wby-pr-[52px]"}>{children}</div>
+            <div className={"wby-pt-sm wby-pb-lg wby-pl-md wby-pr-13"}>{children}</div>
         </AccordionPrimitive.Content>
     );
 };

packages/admin-ui/src/Accordion/components/AccordionItem.tsx

@@ -6,7 +6,6 @@ import { AccordionContent } from "./AccordionContent";
 import { AccordionItemIcon } from "./AccordionItemIcon";
 import { AccordionItemAction } from "./AccordionItemAction";
 import { AccordionItemHandle } from "./AccordionItemHandle";
-import { useAccordion } from "~/Accordion";
 
 interface AccordionItemProps
     extends Omit<React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>, "title"> {
@@ -19,12 +18,11 @@ interface AccordionItemProps
 }
 
 const AccordionItemBase = (props: AccordionItemProps) => {
-    const { variant, background } = useAccordion();
-
     const { itemProps, triggerProps, contentProps } = React.useMemo(() => {
         const {
             // Item props.
             value,
+            className,
 
             // Content props.
             children,
@@ -35,7 +33,8 @@ const AccordionItemBase = (props: AccordionItemProps) => {
 
         return {
             itemProps: {
-                value
+                value,
+                className
             },
             triggerProps,
             contentProps: { children, withIcon: !!props.icon, withHandle: !!props.handle }
@@ -46,12 +45,13 @@ const AccordionItemBase = (props: AccordionItemProps) => {
         <AccordionPrimitive.Item
             {...itemProps}
             className={cn(
-                "wby-border-b-sm wby-border-b-neutral-dimmed data-[state=open]:wby-rounded-bl-lg data-[state=open]:wby-rounded-br-lg",
-                {
-                    "wby-rounded-lg": variant === "container",
-                    "wby-bg-neutral-base": background === "base",
-                    "wby-bg-neutral-light": background === "light"
-                }
+                [
+                    "wby-border-b-sm wby-border-b-neutral-dimmed data-[state=open]:wby-rounded-bl-lg data-[state=open]:wby-rounded-br-lg",
+                    "group-[.wby-accordion-variant-container]:wby-rounded-lg",
+                    "group-[.wby-accordion-background-base]:wby-bg-neutral-base",
+                    "group-[.wby-accordion-background-light]:wby-bg-neutral-light"
+                ],
+                itemProps.className
             )}
         >
             <AccordionTrigger {...triggerProps} />
@@ -60,8 +60,6 @@ const AccordionItemBase = (props: AccordionItemProps) => {
     );
 };
 
-AccordionItemBase.displayName = "AccordionItem";
-
 const DecoratableAccordionItem = makeDecoratable("AccordionItem", AccordionItemBase);
 
 const AccordionItem = withStaticProps(DecoratableAccordionItem, {

packages/admin-ui/src/Accordion/components/AccordionItemHandle.tsx

@@ -4,8 +4,9 @@ import { makeDecoratable } from "~/utils";
 import { Icon, IconProps as IconProps } from "~/Icon";
 import { ReactComponent as DragHandleIcon } from "@material-design-icons/svg/filled/drag_indicator.svg";
 
-interface AccordionItemHandleProps extends Omit<IconProps, "icon"> {
+interface AccordionItemHandleProps extends Omit<IconProps, "icon" | "label"> {
     icon?: React.ReactElement;
+    label?: string;
 }
 
 const AccordionItemHandleBase = ({ onClick, ...props }: AccordionItemHandleProps) => {
@@ -27,6 +28,7 @@ const AccordionItemHandleBase = ({ onClick, ...props }: AccordionItemHandleProps
             color={"neutral-light"}
             className={"wby-mx-xxs"}
             icon={<DragHandleIcon />}
+            label={"Drag handle"}
             {...props}
             onClick={onClickCallback}
         />

packages/admin-ui/src/Accordion/components/AccordionTrigger.tsx

@@ -55,6 +55,7 @@ const AccordionTrigger = ({ title, description, actions, icon, handle }: Accordi
                         className={"wby-transition"}
                         color={"neutral-strong"}
                         data-role={"open-close-indicator"}
+                        label={"Open/close indicator"}
                         icon={<KeyboardArrowDownIcon />}
                     />
                 </div>

packages/admin-ui/src/Icon/Icon.tsx

@@ -29,12 +29,12 @@ const iconVariants = cva("", {
 interface IconProps
     extends Omit<React.HTMLAttributes<HTMLOrSVGElement>, "color">,
         VariantProps<typeof iconVariants> {
-    label?: string; // We don't want to force the label to be required.
+    label: string; // We don't want to force the label to be required.
     icon: React.ReactElement;
 }
 
 const IconBase = React.forwardRef<HTMLOrSVGElement, IconProps>((props, ref) => {
-    const { label = "", icon, color, size, className, ...rest } = props;
+    const { label, icon, color, size, className, ...rest } = props;
     return (
         <AccessibleIcon.Root label={label}>
             {React.cloneElement(icon, {

packages/admin-ui/src/Skeleton/Skeleton.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { cn, cva, VariantProps, makeDecoratable } from "~/utils";
 
-const skeletonVariants = cva("wby-animate-skeletonPulse wby-rounded-sm", {
+const skeletonVariants = cva("wby-animate-skeleton-pulse wby-rounded-sm", {
     variants: {
         type: {
             text: "wby-w-full",

packages/admin-ui/tailwind.config.theme.js

@@ -2,7 +2,7 @@ module.exports = {
     animation: {
         "accordion-down": "accordion-down 0.2s ease-out",
         "accordion-up": "accordion-up 0.2s ease-out",
-        skeletonPulse: "skeletonPulse 1400ms ease-in-out infinite"
+        "skeleton-pulse": "skeleton-pulse 1400ms ease-in-out infinite"
     },
     backgroundColor: {
         transparent: "transparent",
@@ -249,7 +249,7 @@ module.exports = {
             from: { height: "var(--radix-accordion-content-height)" },
             to: { height: "0" }
         },
-        skeletonPulse: {
+        "skeleton-pulse": {
             "0%, 100%": { backgroundColor: "hsl(var(--bg-neutral-dimmed))" },
             "50%": { backgroundColor: "hsl(var(--bg-neutral-muted))" }
         }

packages/ui/src/Accordion/AccordionItem.tsx

@@ -1,18 +1,15 @@
 import React, { useMemo } from "react";
-import { ListItem } from "../List";
 import { Accordion as AdminUiAccordion } from "@webiny/admin-ui";
 import { withStaticProps } from "@webiny/admin-ui/utils";
 
 export interface AccordionItemProps {
     /**
      * Element displayed when accordion is expanded.
      */
-    children:
-        | React.ReactElement<typeof ListItem>[]
-        | React.ReactElement<typeof AccordionItem>
-        | React.ReactElement<typeof AccordionItem>[];
+    children: React.ReactElement;
 
     /**
+     * @deprecated This prop no longer has any effect.
      * Elevation number, default set to 2
      */
     elevation?: number;
@@ -21,18 +18,26 @@ export interface AccordionItemProps {
      * Append a class name
      */
     className?: string;
+
+    value?: string;
+
+    title?: string;
+
+    icon?: React.ReactElement;
 }
 
-const AccordionItemBase = (props: any) => {
+const AccordionItemBase = (props: AccordionItemProps) => {
     const value = useMemo(() => {
-        return props.value || props.title;
+        return props.value || props.title || "";
     }, [props.value, props.title]);
 
     const icon = useMemo(() => {
-        return props.icon ? <AdminUiAccordion.Item.Icon icon={props.icon} /> : null;
+        return props.icon ? (
+            <AdminUiAccordion.Item.Icon icon={props.icon} label={props.title || ""} />
+        ) : null;
     }, [props.icon]);
 
-    return <AdminUiAccordion.Item {...props} value={value} icon={icon} />;
+    return <AdminUiAccordion.Item {...props} value={value} icon={icon} title={props.title || ""} />;
 };
 
 /**