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/HeaderBar/HeaderBar.tsx

@@ -1,20 +1,23 @@
 import React from "react";
-import { makeDecoratable } from "~/utils";
+import { cn, makeDecoratable } from "~/utils";
 import { Separator } from "~/Separator";
 
-interface HeaderBarProps {
+interface HeaderBarProps extends React.HTMLAttributes<HTMLDivElement> {
     start?: React.ReactNode;
     middle?: React.ReactNode;
     end?: React.ReactNode;
 }
 
-const HeaderBarBase = ({ start, middle, end }: HeaderBarProps) => {
+const HeaderBarBase = ({ start, middle, end, className, ...props }: HeaderBarProps) => {
     return (
-        <header>
-            <div
-                className={
-                    "wby-grid wby-grid-cols-[1fr_auto_1fr] wby-w-full wby-py-xs-plus wby-px-sm wby-bg-neutral-base"
-                }
+        <>
+            <header
+                className={cn(
+                    "wby-relative wby-w-full wby-py-xs-plus wby-px-sm wby-bg-neutral-base",
+                    "wby-grid wby-grid-cols-[1fr_auto_1fr]",
+                    className
+                )}
+                {...props}
             >
                 <div className="wby-h-full wby-flex wby-items-center wby-justify-self-start">
                     {start}
@@ -23,9 +26,9 @@ const HeaderBarBase = ({ start, middle, end }: HeaderBarProps) => {
                 <div className="wby-h-full wby-flex wby-items-center wby-justify-self-end">
                     {end}
                 </div>
-            </div>
+            </header>
             <Separator margin={"none"} variant={"subtle"} />
-        </header>
+        </>
     );
 };
 

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

@@ -61,7 +61,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, disabled, size }), className)
             })}

packages/admin-ui/src/theme.scss

@@ -237,6 +237,7 @@
     --spacing-xxs: 2px;
     --spacing-sidebar-collapsed: 44px;
     --spacing-sidebar-expanded: 256px;
+    --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)",
         "3xl": "var(--spacing-3xl)",
         lg: "var(--spacing-lg)",
         md: "var(--spacing-md)",

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 />}
             />