@saleor/macaw-ui 0.3.3 → 0.4.0

package/src/Chip/styles.ts

@@ -0,0 +1,45 @@
+import { makeStyles } from "../theme";
+
+const useStyles = makeStyles(
+  (theme) => ({
+    chip: {
+      background: theme.palette.saleor.active[1],
+      color: theme.palette.primary.contrastText,
+      borderRadius: "8px",
+      display: "flex",
+      alignItems: "center",
+      padding: `3px ${theme.spacing(2)}`,
+      gap: "4px",
+      lineHeight: 1,
+      minHeight: theme.spacing(4),
+      cursor: "default",
+      userSelect: "none",
+      textAlign: "center",
+      "& > span": {
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+      },
+    },
+    startAdornment: {
+      marginLeft: "-8px",
+      flexShrink: 0,
+    },
+    endAdornment: {
+      marginRight: "-8px",
+      flexShrink: 0,
+    },
+    swatch: {
+      width: theme.spacing(3),
+      height: theme.spacing(3),
+      border: `2px solid #fff`,
+      flexShrink: 0,
+      marginRight: "7px",
+      borderRadius: "4px",
+      // default background when no style specified
+      background: "transparent",
+    },
+  }),
+  { name: "Chip" }
+);
+
+export default useStyles;

package/src/CircleIndicator/CircleIndicator.stories.tsx

@@ -2,9 +2,9 @@ import { Typography } from "@material-ui/core";
 import { Meta, Story } from "@storybook/react";
 import clsx from "clsx";
 import React from "react";
+
 import { Decorator, GuideDecorator } from "../utils/Decorator";
 import useGuideStyles from "../utils/guideStyles";
-
 import { CircleIndicator } from "./CircleIndicator";
 
 const StoryWrapper: React.FC = () => {
@@ -16,7 +16,7 @@ const StoryWrapper: React.FC = () => {
         Circle Indicators
       </Typography>
       <Typography className={guideClasses.paragraph} component="p">
-        Circle Indicators represent status of a certain element. 
+        Circle Indicators represent status of a certain element.
       </Typography>
       <div style={{ display: "flex", gap: "24px" }}>
         <div
@@ -30,10 +30,10 @@ const StoryWrapper: React.FC = () => {
             padding: 24,
           }}
         >
-        Error <CircleIndicator color="error" />
-        Warning <CircleIndicator color="warning" />
-        Success <CircleIndicator color="success" />
-        Info <CircleIndicator color="info" />
+          Error <CircleIndicator color="error" />
+          Warning <CircleIndicator color="warning" />
+          Success <CircleIndicator color="success" />
+          Info <CircleIndicator color="info" />
         </div>
       </div>
     </div>

package/src/CircleIndicator/index.ts

@@ -1 +1 @@
-export * from './CircleIndicator';
+export * from "./CircleIndicator";

package/src/Filter/FilterField/MultipleSelectFilterField.tsx

@@ -1,10 +1,10 @@
 import Checkbox from "@material-ui/core/Checkbox";
-import Chip from "@material-ui/core/Chip";
 import MenuItem from "@material-ui/core/MenuItem";
 import Select from "@material-ui/core/Select";
 import clsx from "clsx";
 import React from "react";
 
+import { Chip } from "../../Chip";
 import { useFilters } from "../context";
 import useStyles from "../styles";
 import { EventTarget, FilterData } from "../types";
@@ -41,7 +41,9 @@ export const MultipleSelectFilterField: React.FC<FilterContentProps> = ({
         return (
           <div className={classes.filterChipContainer}>
             {typedValues.map((value) => (
-              <Chip className={classes.filterChip} key={value} label={value} />
+              <Chip className={classes.filterChip} key={value}>
+                {value}
+              </Chip>
             ))}
           </div>
         );

package/src/IconButton/IconButton.tsx

@@ -38,8 +38,10 @@ export const IconButton: React.FC<IconButtonProps> = React.forwardRef(
           ref={ref}
           className={clsx(classes.secondary, className, {
             [classes.hoverOutline]: hoverOutline && !props.disabled,
-            [classes.hover]: state === "hover",
-            [classes.active]: state === "active",
+            [classes.hover]: state === "hover" && !props.disabled,
+            [classes.active]: state === "active" && !props.disabled,
+            [classes.error]: error,
+            [classes.disabledError]: error && props.disabled,
           })}
           disableRipple
           {...props}
@@ -50,11 +52,11 @@ export const IconButton: React.FC<IconButtonProps> = React.forwardRef(
     return (
       <MuiIconButton
         ref={ref}
-        className={clsx(className, {
+        className={clsx(classes.primary, className, {
+          [classes.hover]: state === "hover" && !props.disabled,
+          [classes.active]: state === "active" && !props.disabled,
           [classes.error]: error,
           [classes.disabledError]: error && props.disabled,
-          [classes.hover]: state === "hover",
-          [classes.active]: state === "active",
         })}
         disableRipple
         {...props}

package/src/IconButton/styles.ts

@@ -3,17 +3,49 @@ import { getSecondaryButtonStyles } from "./partials";
 
 const useStyles = makeStyles(
   (theme) => ({
+    primary: {
+      "&:hover, &.Mui-focusVisible, &$hover, &$active": {
+        color: theme.palette.saleor.active[1],
+        borderColor: theme.palette.saleor.active[1],
+      },
+      "&:active, &$active": {
+        background: theme.palette.saleor.active[5],
+      },
+    },
+    secondary: getSecondaryButtonStyles(theme.palette.saleor),
+    hoverOutline: {
+      "&$secondary": {
+        "&:hover, &:focus-visible, &$hover": {
+          background: theme.palette.saleor.active[5],
+          borderColor: theme.palette.saleor.active[4],
+        },
+        "&:active, &$active": {
+          background: theme.palette.saleor.active[4],
+        },
+      },
+    },
     error: {
-      "&&": {
+      "&&&": {
         "&:hover, &.Mui-focusVisible, &$hover": {
           borderColor: theme.palette.saleor.errorAction[1],
           color: theme.palette.saleor.errorAction[1],
         },
         "&:active, &$active": {
           background: theme.palette.saleor.errorAction[5],
+          color: theme.palette.saleor.errorAction[1],
+          borderColor: theme.palette.saleor.errorAction[2],
+        },
+        "&$secondary": {
+          "&:hover, &.Mui-focusVisible, &$hover": {
+            background: theme.palette.saleor.errorAction[5],
+          },
+          "&:active, &$active": {
+            background: theme.palette.saleor.errorAction[4],
+            color: theme.palette.saleor.errorAction[1],
+          },
         },
       },
-      borderColor: theme.palette.saleor.errorAction[4],
+
       color: theme.palette.saleor.errorAction[2],
     },
     disabledError: {
@@ -22,18 +54,6 @@ const useStyles = makeStyles(
         color: theme.palette.saleor.errorAction[5],
       },
     },
-    secondary: getSecondaryButtonStyles(theme.palette.saleor),
-    hoverOutline: {
-      "&$secondary": {
-        "&:hover, &:focus-visible, &$hover": {
-          background: theme.palette.saleor.active[5],
-          borderColor: theme.palette.saleor.active[4],
-        },
-        "&:active, &$active": {
-          background: theme.palette.saleor.active[4],
-        },
-      },
-    },
     active: {},
     hover: {},
   }),

package/src/Sidebar/MenuItem.tsx

@@ -9,15 +9,27 @@ import React from "react";
 import SVG from "react-inlinesvg";
 
 import { makeStyles } from "../theme";
-import { SidebarMenuItem } from "./types";
+import { CustomLinkComponent, SidebarMenuItem } from "./types";
+import { getLinkComponent, getLinkProps } from "./utils";
 
-export interface MenuItemProps {
+export interface MenuItemCommonProps {
   activeId: string;
   isMenuShrunk: boolean;
   menuItem: SidebarMenuItem;
-  onClick: (menuItem: SidebarMenuItem) => void;
 }
 
+export type MenuItemProps = MenuItemCommonProps &
+  (
+    | {
+        onClick: (menuItem: SidebarMenuItem) => void;
+        linkComponent?: never;
+      }
+    | {
+        onClick?: never;
+        linkComponent: CustomLinkComponent;
+      }
+  );
+
 export const menuWidth = 210;
 export const shrunkMenuWidth = 72;
 
@@ -139,23 +151,33 @@ export const MenuItem: React.FC<MenuItemProps> = ({
   menuItem,
   isMenuShrunk,
   onClick,
+  linkComponent,
 }) => {
   const classes = useStyles({});
   const [open, setOpen] = React.useState(false);
-  const anchor = React.useRef<HTMLDivElement>(null);
+  const anchor = React.useRef<any>(null);
 
   const handleClick = (event: React.MouseEvent, menuItem: SidebarMenuItem) => {
     event.stopPropagation();
     if (menuItem.children) {
       setOpen(true);
     } else {
-      onClick(menuItem);
+      if (onClick) {
+        onClick(menuItem);
+      }
+
+      if (menuItem.onClick) {
+        menuItem.onClick();
+      }
+
       setOpen(false);
     }
   };
 
+  const RootNavComponent = menuItem.children ? "div" : linkComponent ?? "div";
+
   return (
-    <div
+    <RootNavComponent
       className={clsx(classes.root, {
         [classes.rootOpen]: open,
         [classes.rootActive]: [
@@ -165,9 +187,10 @@ export const MenuItem: React.FC<MenuItemProps> = ({
         [classes.rootExpanded]: !isMenuShrunk,
       })}
       ref={anchor}
-      onClick={(event) => handleClick(event, menuItem)}
+      onClick={(event: React.MouseEvent) => handleClick(event, menuItem)}
+      {...getLinkProps(menuItem)}
     >
-      <button
+      <span
         className={classes.menuItemBtn}
         data-test="menu-item-label"
         data-test-id={menuItem.id}
@@ -184,7 +207,7 @@ export const MenuItem: React.FC<MenuItemProps> = ({
         >
           {menuItem.label}
         </Typography>
-      </button>
+      </span>
       {menuItem.children && (
         <Popper
           className={clsx(classes.popper, {
@@ -199,14 +222,12 @@ export const MenuItem: React.FC<MenuItemProps> = ({
             <Paper className={classes.paper}>
               {menuItem.children.map((subMenuItem) => {
                 if (subMenuItem.url || subMenuItem.children) {
-                  const linkProps = subMenuItem.external
-                    ? { href: subMenuItem.url, target: "_blank" }
-                    : {};
+                  const linkProps = getLinkProps(subMenuItem);
 
                   return (
                     <MuiMenuItem
                       aria-label={subMenuItem.ariaLabel}
-                      component={subMenuItem.external ? "a" : "button"}
+                      component={getLinkComponent(subMenuItem, linkComponent)}
                       className={clsx(classes.label, classes.subMenuLabel)}
                       key={subMenuItem.url}
                       onClick={(event: React.MouseEvent) =>
@@ -236,7 +257,7 @@ export const MenuItem: React.FC<MenuItemProps> = ({
           </ClickAwayListener>
         </Popper>
       )}
-    </div>
+    </RootNavComponent>
   );
 };
 

package/src/Sidebar/Sidebar.tsx

@@ -23,7 +23,9 @@ const useStyles = makeStyles(
       paddingBottom: theme.spacing(3),
     },
     logo: {
+      display: "block",
       margin: `36px 0 ${theme.spacing(3)} ${theme.spacing(2.5)}`,
+      color: "inherit",
     },
     root: {
       transition: "width 0.5s ease",
@@ -50,6 +52,8 @@ export const Sidebar: React.FC<SidebarProps> = ({
   menuItems,
   toolbar,
   onMenuItemClick,
+  logoHref,
+  linkComponent,
 }) => {
   const classes = useStyles({});
   const { value: isShrunkStr, setValue: setShrink } = useLocalStorage(
@@ -59,6 +63,8 @@ export const Sidebar: React.FC<SidebarProps> = ({
   const isShrunk = isShrunkStr === "true";
   const { themeType } = useTheme();
 
+  const Link = linkComponent ?? "a";
+
   return (
     <div
       className={clsx(classes.root, {
@@ -66,18 +72,28 @@ export const Sidebar: React.FC<SidebarProps> = ({
       })}
     >
       <div className={classes.float}>
-        <div className={classes.logo}>
+        <Link href={logoHref} className={classes.logo}>
           {themeType === "dark" ? <LogoDark /> : <Logo />}
-        </div>
-        {menuItems.map((menuItem) => (
-          <MenuItem
-            activeId={activeId}
-            isMenuShrunk={isShrunk}
-            menuItem={menuItem}
-            onClick={onMenuItemClick}
-            key={menuItem.ariaLabel}
-          />
-        ))}
+        </Link>
+        {menuItems.map((menuItem) =>
+          linkComponent ? (
+            <MenuItem
+              activeId={activeId}
+              isMenuShrunk={isShrunk}
+              menuItem={menuItem}
+              key={menuItem.ariaLabel}
+              linkComponent={linkComponent}
+            />
+          ) : (
+            <MenuItem
+              activeId={activeId}
+              isMenuShrunk={isShrunk}
+              menuItem={menuItem}
+              onClick={onMenuItemClick}
+              key={menuItem.ariaLabel}
+            />
+          )
+        )}
         {toolbar && <div className={classes.toolbarContainer}>{toolbar}</div>}
         <ExpandButton
           className={classes.expandButton}

package/src/Sidebar/types.ts

@@ -8,11 +8,20 @@ export interface SidebarMenuItem {
   iconSrc?: string;
   url?: string;
   external?: boolean;
+  onClick?: () => void;
 }
 
+export type CustomLinkComponent = React.ForwardRefExoticComponent<{
+  href?: string;
+  onClick?: (...params: any) => void;
+  className?: string;
+}>;
+
 export interface BaseSidebarProps {
   className?: string;
   menuItems: SidebarMenuItem[];
   toolbar?: React.ReactNode;
   onMenuItemClick: (menuItem: SidebarMenuItem) => void;
+  linkComponent?: CustomLinkComponent;
+  logoHref?: string;
 }

package/src/Sidebar/utils.ts

@@ -0,0 +1,23 @@
+import { CustomLinkComponent, SidebarMenuItem } from "./types";
+
+export const getLinkProps = (menuItem: SidebarMenuItem) => {
+  if (menuItem.external) {
+    return { href: menuItem.url, target: "_blank" };
+  }
+  if (menuItem.url) {
+    return {
+      href: menuItem.url,
+    };
+  }
+  return {};
+};
+
+export const getLinkComponent = (
+  menuItem: SidebarMenuItem,
+  customComponent?: CustomLinkComponent
+) => {
+  if (menuItem.external) {
+    return "a";
+  }
+  return customComponent ?? "button";
+};

package/src/SidebarDrawer/MenuItemBtn.tsx

@@ -2,22 +2,24 @@ import Typography from "@material-ui/core/Typography";
 import React from "react";
 import SVG from "react-inlinesvg";
 
-import { SidebarMenuItem } from "../Sidebar/types";
+import { CustomLinkComponent, SidebarMenuItem } from "../Sidebar/types";
+import { getLinkComponent, getLinkProps } from "../Sidebar/utils";
 import useStyles from "./styles";
 
 export interface MenuItemBtnProps {
   menuItem: SidebarMenuItem;
   onClick: (menuItem: SidebarMenuItem) => void;
+  linkComponent?: CustomLinkComponent;
 }
+
 export const MenuItemBtn: React.FC<MenuItemBtnProps> = ({
   menuItem,
   onClick,
+  linkComponent,
 }) => {
   const classes = useStyles();
-  const linkProps = menuItem.external
-    ? { href: menuItem.url, target: "_blank" }
-    : {};
-  const Component = menuItem.external ? "a" : "button";
+  const linkProps = getLinkProps(menuItem);
+  const Component = getLinkComponent(menuItem, linkComponent);
 
   return (
     <Component
@@ -30,7 +32,11 @@ export const MenuItemBtn: React.FC<MenuItemBtnProps> = ({
       {menuItem.iconSrc && (
         <SVG className={classes.icon} src={menuItem.iconSrc} />
       )}
-      <Typography aria-label={menuItem.ariaLabel} className={classes.label}>
+      <Typography
+        component="span"
+        aria-label={menuItem.ariaLabel}
+        className={classes.label}
+      >
         {menuItem.label}
       </Typography>
     </Component>

package/src/SidebarDrawer/SidebarDrawer.tsx

@@ -19,6 +19,8 @@ export type SideBarDrawerProps = BaseSidebarProps;
 export const SidebarDrawer: React.FC<SideBarDrawerProps> = ({
   menuItems,
   onMenuItemClick,
+  linkComponent,
+  logoHref,
 }) => {
   const [isOpened, setOpened] = React.useState(false);
   const classes = useStyles({});
@@ -43,6 +45,8 @@ export const SidebarDrawer: React.FC<SideBarDrawerProps> = ({
     });
   };
 
+  const Link = linkComponent ?? "a";
+
   return (
     <>
       <SquareButton onClick={() => setOpened(true)}>
@@ -67,9 +71,9 @@ export const SidebarDrawer: React.FC<SideBarDrawerProps> = ({
             })}
           >
             <div className={classes.content}>
-              <div className={classes.logo}>
+              <Link href={logoHref} className={classes.logo}>
                 {themeType === "dark" ? <LogoDark /> : <Logo />}
-              </div>
+              </Link>
               {menuItems.map((menuItem) => (
                 <MenuItemBtn
                   menuItem={menuItem}
@@ -78,6 +82,7 @@ export const SidebarDrawer: React.FC<SideBarDrawerProps> = ({
                       ? () => handleMenuItemWithChildrenClick(menuItem)
                       : handleMenuItemClick
                   }
+                  linkComponent={linkComponent}
                   key={menuItem.ariaLabel}
                 />
               ))}
@@ -104,6 +109,7 @@ export const SidebarDrawer: React.FC<SideBarDrawerProps> = ({
                         menuItem={subMenuItem}
                         onClick={handleMenuItemClick}
                         key={subMenuItem.ariaLabel}
+                        linkComponent={linkComponent}
                       />
                     );
                   }

package/src/index.tsx

@@ -32,4 +32,4 @@ export * from "./OffsettedList";
 export * from "./List";
 export * from "./NavigationCard";
 export * from "./Pill";
-export * from "./CircleIndicator"
+export * from "./CircleIndicator";

package/src/theme/createSaleorTheme/overrides/inputs.ts

@@ -171,7 +171,7 @@ export const inputOverrides = (
       backgroundColor: colors.background.paper,
       transition: "box-shadow 200ms",
       top: 0,
-      fontWeight: 500,
+      fontWeight: 400,
     },
     notchedOutline: {
       // It's so much easier to put it here with important tag rather than

package/src/theme/themes.ts

@@ -160,7 +160,7 @@ export const light: SaleorThemeColors = {
     5: "#FBDDD8",
   },
 
-  disabled: "#CCDDDD",
+  disabled: "#C2D1E4",
   paperBorder: "#EAEAEA",
   theme: "light",
 };

package/src/utils/guideStyles.ts

@@ -38,6 +38,11 @@ const useStyles = makeStyles(
       padding: theme.spacing(3),
       rowGap: theme.spacing(3),
     },
+    gridCell: {
+      display: "grid",
+      gridTemplateColumns: "repeat(3, 1fr)",
+      gap: theme.spacing(3),
+    },
   }),
   { name: "Guide" }
 );

package/dist/ActionBar/ActionBar.d.ts

@@ -1,8 +0,0 @@
-import React from "react";
-import { ConfirmButtonTransitionState } from "../ConfirmButton";
-export interface ActionBarProps {
-    disabled: boolean;
-    state: ConfirmButtonTransitionState;
-    children: React.ReactNode[] | React.ReactNode;
-}
-export declare const ActionBar: React.FC<ActionBarProps>;

package/dist/ActionBar/ActionBar.stories.d.ts

@@ -1,4 +0,0 @@
-import { Meta, Story } from "@storybook/react";
-export declare const WithContent: Story;
-declare const _default: Meta<import("@storybook/react").Args>;
-export default _default;

package/dist/ActionBar/context.d.ts

@@ -1,9 +0,0 @@
-import React from "react";
-export interface ActionBarContextType {
-    anchor: React.RefObject<HTMLDivElement>;
-    docked: boolean;
-    setDocked: (docked: boolean) => void;
-}
-export declare const ActionBarContext: React.Context<ActionBarContextType | undefined>;
-export declare const useActionBar: () => ActionBarContextType;
-export declare const ActionBarProvider: React.FC;

package/dist/ActionBar/index.d.ts

@@ -1,2 +0,0 @@
-export * from "./ActionBar";
-export * from "./context";

package/dist/Alert/Alert.d.ts

@@ -1,8 +0,0 @@
-import React from "react";
-import { AlertBaseProps, AlertVariant } from "./AlertBase";
-export interface AlertProps extends AlertBaseProps {
-    close?: boolean;
-    variant: AlertVariant;
-    title?: string;
-}
-export declare const Alert: React.FC<AlertProps>;

package/dist/Alert/Alert.stories.d.ts

@@ -1,12 +0,0 @@
-import { Meta, Story } from "@storybook/react";
-export declare const Info: Story;
-export declare const Warn: Story;
-export declare const Success: Story;
-export declare const Error: Story;
-export declare const WithClose: Story;
-export declare const WithContent: Story;
-export declare const WithContentAndClose: Story;
-export declare const Custom: Story;
-export declare const WithoutTitle: Story;
-declare const _default: Meta<import("@storybook/react").Args>;
-export default _default;

package/dist/Alert/AlertBase.d.ts

@@ -1,8 +0,0 @@
-import { CardProps } from "@material-ui/core/Card";
-import React from "react";
-export declare type AlertVariant = "error" | "warning" | "success" | "info";
-export interface AlertBaseProps extends Omit<CardProps, "variant"> {
-    className?: string;
-    variant: AlertVariant;
-}
-export declare const AlertBase: React.FC<AlertBaseProps>;

package/dist/Alert/index.d.ts

@@ -1,2 +0,0 @@
-export * from "./Alert";
-export * from "./AlertBase";

package/dist/Alert/styles.d.ts

@@ -1,2 +0,0 @@
-declare const useStyles: (props?: any) => import("@material-ui/styles").ClassNameMap<"error" | "close" | "success" | "warning" | "root" | "content" | "container" | "closeNoContent" | "titleBar">;
-export default useStyles;

package/dist/Backlink/Backlink.d.ts

@@ -1,8 +0,0 @@
-import React from "react";
-import { LayoutButtonProps } from "../LayoutButton";
-export interface AppHeaderProps extends LayoutButtonProps {
-    children: React.ReactNode;
-    disabled?: boolean;
-    onClick: () => void;
-}
-export declare const Backlink: React.FC<AppHeaderProps>;

package/dist/Backlink/Backlink.stories.d.ts

@@ -1,5 +0,0 @@
-import { Meta, Story } from "@storybook/react";
-export declare const Default: Story;
-export declare const Loading: Story;
-declare const _default: Meta<import("@storybook/react").Args>;
-export default _default;

package/dist/Backlink/context.d.ts

@@ -1,5 +0,0 @@
-import React from "react";
-export declare type BacklinkContextType = React.RefObject<HTMLDivElement>;
-export declare const BacklinkContext: React.Context<BacklinkContextType | undefined>;
-export declare const useBacklink: () => BacklinkContextType;
-export declare const BacklinkProvider: React.FC;

package/dist/Backlink/index.d.ts

@@ -1,2 +0,0 @@
-export * from "./Backlink";
-export * from "./context";