New Admin UI - PB Editor

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

@@ -2,46 +2,80 @@ import * as React from "react";
 import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
 import { cva, type VariantProps, cn } from "~/utils";
 
-const accordionContentVariants = cva(
+const collapsiblePrimitiveVariants = cva(
     [
         "wby-overflow-hidden wby-text-md",
         "wby-transition-all data-[state=closed]:wby-animate-collapsible-up data-[state=open]:wby-animate-collapsible-down"
     ],
     {
         // Using pixel values here because of non-existing design tokens.
         variants: {
+            padding: {
+                expanded: "",
+                collapsed: ""
+            },
             withIcon: {
-                true: "wby-pl-9"
+                true: ""
             },
             withHandle: {
-                true: "wby-pl-5"
+                true: ""
             }
         },
         compoundVariants: [
+            {
+                withIcon: true,
+                padding: "expanded",
+                className: "wby-pl-9"
+            },
+            {
+                withHandle: true,
+                padding: "expanded",
+                className: "wby-pl-5"
+            },
             {
                 withIcon: true,
                 withHandle: true,
+                padding: "expanded",
                 className: "wby-pl-14"
-            }
+            },
         ],
         defaultVariants: {
             withIcon: false,
-            withHandle: false
+            withHandle: false,
+            padding: "expanded"
         }
     }
 );
 
+const contentDivVariants = cva("wby-pt-sm wby-pb-lg wby-pl-md", {
+    variants: {
+        padding: {
+            collapsed: "wby-pr-md",
+            expanded: "wby-pr-[52px]"
+        }
+    }
+});
+
 export interface AccordionContentProps
     extends React.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.Content>,
-        VariantProps<typeof accordionContentVariants> {}
+        VariantProps<typeof collapsiblePrimitiveVariants> {}
 
-const AccordionContent = ({ children, withIcon, withHandle, ...props }: AccordionContentProps) => {
+const AccordionContent = ({
+    children,
+    withIcon,
+    withHandle,
+    padding,
+    ...props
+}: AccordionContentProps) => {
     return (
         <CollapsiblePrimitive.Content
             {...props}
-            className={cn(accordionContentVariants({ withHandle, withIcon }), props.className)}
+            className={cn(
+                collapsiblePrimitiveVariants({ withHandle, withIcon, padding }),
+                props.className
+            )}
         >
-            <div className={"wby-pt-sm wby-pb-lg wby-pl-md wby-pr-[52px]"}>{children}</div>
+            <div className={contentDivVariants({ padding })}>{children}</div>
         </CollapsiblePrimitive.Content>
     );
 };

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

@@ -12,6 +12,7 @@ interface AccordionItemProps extends Omit<AccordionRootProps, "title"> {
     description?: React.ReactNode;
     icon?: React.ReactNode;
     handle?: React.ReactNode;
+    padding?: "collapsed";
     interactive?: boolean;
     actions?: React.ReactNode;
     children: React.ReactNode;
@@ -30,6 +31,7 @@ const AccordionItemBase = (props: AccordionItemProps) => {
 
             // Content props.
             children,
+            padding,
 
             // Trigger props.
             ...triggerProps
@@ -47,7 +49,12 @@ const AccordionItemBase = (props: AccordionItemProps) => {
                 ...triggerProps,
                 interactive
             },
-            contentProps: { children, withIcon: !!props.icon, withHandle: !!props.handle }
+            contentProps: {
+                children,
+                withIcon: !!props.icon,
+                withHandle: !!props.handle,
+                padding
+            }
         };
     }, [props]);
 

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

@@ -62,7 +62,8 @@ const gridVariants = cva("wby-grid", {
     variants: {
         gap: {
             comfortable: "wby-gap-lg",
-            spacious: "wby-gap-xl"
+            spacious: "wby-gap-xl",
+            "none": "wby-gap-0",
         }
     },
     defaultVariants: {

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

@@ -38,7 +38,7 @@ const IconBase = (props: IconProps) => {
     return (
         <AccessibleIcon.Root label={label}>
             {/* @ts-expect-error */}
-            {React.cloneElement(icon, {
+            {icon && React.cloneElement(icon, {
                 ...rest,
                 className: cn(iconVariants({ color, size }), className)
             })}

packages/admin-ui/src/theme.scss

@@ -238,6 +238,7 @@
     --spacing-sidebar-collapsed: 44px;
     --spacing-sidebar-expanded: 256px;
     --spacing-main-content: calc(100vh - 45px);
+    --spacing-headerbar: 45px;
 
     // Text color.
     --text-accent-muted: var(--color-primary-300);

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

@@ -345,6 +345,7 @@ module.exports = {
     spacing: {
         "sidebar-collapsed": "var(--spacing-sidebar-collapsed)",
         "sidebar-expanded": "var(--spacing-sidebar-expanded)",
+        "headerbar": "var(--spacing-headerbar)",
         "main-content": "var(--spacing-main-content)",
         "3xl": "var(--spacing-3xl)",
         lg: "var(--spacing-lg)",

packages/app-page-builder/src/blockEditor/config/TopBar/BackButton/BackButton.tsx

@@ -1,15 +1,10 @@
 import React, { useCallback } from "react";
-import { css } from "emotion";
 import { useLocation, useNavigate } from "@webiny/react-router";
-import { IconButton } from "@webiny/ui/Button";
+import { IconButton } from "@webiny/admin-ui";
 import { ReactComponent as BackIcon } from "./round-arrow_back-24px.svg";
 import { useBlock } from "~/blockEditor/hooks/useBlock";
 import { BlockEditorConfig } from "~/blockEditor/editorConfig/BlockEditorConfig";
 
-const backStyles = css({
-    marginLeft: -10
-});
-
 export function BackButton() {
     const { key } = useLocation();
     const navigate = useNavigate();
@@ -27,8 +22,8 @@ export function BackButton() {
     return (
         <>
             <IconButton
+                className={"mr-sm-plus"}
                 data-testid="pb-editor-back-button"
-                className={backStyles}
                 onClick={onClick}
                 icon={<BackIcon />}
             />