@saleor/macaw-ui 0.5.2 → 0.6.0

package/src/Indicator/Indicator.tsx

@@ -0,0 +1,65 @@
+import clsx from "clsx";
+import React from "react";
+
+import {
+  ErrorIndicatorIcon,
+  ErrorSmallIndicatorIcon,
+  FailIndicatorIcon,
+  SuccessIndicatorIcon,
+  SuccessSmallIndicatorIcon,
+  WarningIndicatorIcon,
+  WarningSmallIndicatorIcon,
+} from "../icons/indicator";
+import { CircleFilled } from "./CircleFilled";
+import { getSizeDimension, useStyles } from "./styles";
+
+export type IndicatorIcon = "warning" | "error" | "success" | "fail";
+
+export type IndicatorSize = "regular" | "small";
+
+export type IndicatorCombinations = `${IndicatorIcon}-${IndicatorSize}`;
+
+export interface IndicatorProps {
+  icon: IndicatorIcon;
+  variant?: "outline" | "filled" | "text" | "icon";
+  size?: IndicatorSize;
+  className?: string;
+}
+
+export const mapVariantToIcon: Record<
+  IndicatorCombinations,
+  React.FunctionComponent<{ className?: string }>
+> = {
+  "warning-regular": WarningIndicatorIcon,
+  "warning-small": WarningSmallIndicatorIcon,
+  "fail-regular": FailIndicatorIcon,
+  "fail-small": FailIndicatorIcon,
+  "error-regular": ErrorIndicatorIcon,
+  "error-small": ErrorSmallIndicatorIcon,
+  "success-regular": SuccessIndicatorIcon,
+  "success-small": SuccessSmallIndicatorIcon,
+};
+
+export const Indicator = React.forwardRef<HTMLSpanElement, IndicatorProps>(
+  ({ icon, size = "regular", className }, ref) => {
+    const classes = useStyles({ icon, size });
+
+    const Icon = mapVariantToIcon[`${icon}-${size}` as IndicatorCombinations];
+
+    const viewBoxSize = getSizeDimension(size);
+
+    return (
+      <span className={clsx(classes.wrapper, className)} ref={ref}>
+        <svg
+          viewBox={`0 0 ${viewBoxSize} ${viewBoxSize}`}
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+          className={classes.absolute}
+        >
+          <CircleFilled size={size} className={classes.circlePath} />
+        </svg>
+        <Icon className={classes.absolute} />
+      </span>
+    );
+  }
+);

package/src/Indicator/IndicatorCircle.stories.tsx

@@ -0,0 +1,28 @@
+import { ComponentMeta, ComponentStory } from "@storybook/react";
+import React from "react";
+
+import { IndicatorCircle } from "./IndicatorCircle";
+
+export default {
+  title: "Indicator / Circle",
+  component: IndicatorCircle,
+} as ComponentMeta<typeof IndicatorCircle>;
+
+const Template: ComponentStory<typeof IndicatorCircle> = (args) => (
+  <IndicatorCircle {...args} />
+);
+
+export const Warning = Template.bind({});
+Warning.args = {
+  icon: "warning",
+};
+
+export const Error = Template.bind({});
+Error.args = {
+  icon: "error",
+};
+
+export const Success = Template.bind({});
+Success.args = {
+  icon: "success",
+};

package/src/Indicator/IndicatorCircle.tsx

@@ -0,0 +1,45 @@
+import clsx from "clsx";
+import React from "react";
+
+import { Circle } from "./Circle";
+import { IndicatorIcon } from "./Indicator";
+import { getSizeDimension, useStyles } from "./styles";
+
+export interface IndicatorCircleProps {
+  icon: IndicatorIcon;
+  className?: string;
+}
+
+export const IndicatorCircle = ({ icon, className }: IndicatorCircleProps) => {
+  const classes = useStyles({ size: "regular", icon });
+
+  const viewBoxSize = getSizeDimension("regular");
+
+  return (
+    <span className={clsx(classes.wrapper, classes.wrapperCircle, className)}>
+      <svg
+        viewBox={`0 0 ${viewBoxSize} ${viewBoxSize}`}
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        className={classes.absolute}
+      >
+        <Circle className={classes.circlePath} />
+      </svg>
+      {icon === "success" && (
+        <svg
+          viewBox={`0 0 ${viewBoxSize} ${viewBoxSize}`}
+          fill="none"
+          className={classes.absolute}
+        >
+          <path
+            d="M8 12.8571L10.1053 15L16 9"
+            stroke="currentColor"
+            stroke-width="1.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+        </svg>
+      )}
+    </span>
+  );
+};

package/src/Indicator/IndicatorOutlined.stories.tsx

@@ -0,0 +1,86 @@
+import { ComponentMeta, ComponentStory } from "@storybook/react";
+import React from "react";
+
+import { IndicatorOutlined } from "./IndicatorOutlined";
+
+export default {
+  title: "Indicator / Outlined",
+  component: IndicatorOutlined,
+} as ComponentMeta<typeof IndicatorOutlined>;
+
+const Template: ComponentStory<typeof IndicatorOutlined> = (args) => (
+  <IndicatorOutlined {...args} />
+);
+
+export const Warning = Template.bind({});
+Warning.args = {
+  icon: "warning",
+};
+export const WarningSmall = Template.bind({});
+WarningSmall.args = {
+  icon: "warning",
+  size: "small",
+};
+export const WarningText = Template.bind({});
+WarningText.args = {
+  icon: "warning",
+  color: "text",
+};
+export const WarningSmallText = Template.bind({});
+WarningSmallText.args = {
+  icon: "warning",
+  color: "text",
+  size: "small",
+};
+
+export const Error = Template.bind({});
+Error.args = {
+  icon: "error",
+};
+export const ErrorSmall = Template.bind({});
+ErrorSmall.args = {
+  icon: "error",
+  size: "small",
+};
+export const ErrorText = Template.bind({});
+ErrorText.args = {
+  icon: "error",
+  color: "text",
+};
+export const ErrorSmallText = Template.bind({});
+ErrorSmallText.args = {
+  icon: "error",
+  color: "text",
+  size: "small",
+};
+
+export const Fail = Template.bind({});
+Fail.args = {
+  icon: "fail",
+};
+export const FailText = Template.bind({});
+FailText.args = {
+  icon: "fail",
+  color: "text",
+};
+
+export const Success = Template.bind({});
+Success.args = {
+  icon: "success",
+};
+export const SuccessSmall = Template.bind({});
+SuccessSmall.args = {
+  icon: "success",
+  size: "small",
+};
+export const SuccessText = Template.bind({});
+SuccessText.args = {
+  icon: "success",
+  color: "text",
+};
+export const SuccessSmallText = Template.bind({});
+SuccessSmallText.args = {
+  icon: "success",
+  color: "text",
+  size: "small",
+};

package/src/Indicator/IndicatorOutlined.tsx

@@ -0,0 +1,63 @@
+import clsx from "clsx";
+import React from "react";
+
+import { FailOutlineIndicatorIcon } from "../icons/indicator";
+import { CircleOutline } from "./CircleOutline";
+import {
+  IndicatorCombinations,
+  IndicatorIcon,
+  IndicatorSize,
+  mapVariantToIcon,
+} from "./Indicator";
+import { getSizeDimension, useStyles } from "./styles";
+
+export interface IndicatorOutlinedProps {
+  icon: IndicatorIcon;
+  size?: IndicatorSize;
+  color?: "default" | "text";
+  className?: string;
+}
+
+const getIconComponent = (icon: IndicatorIcon, size: IndicatorSize) => {
+  if (icon === "fail") {
+    return FailOutlineIndicatorIcon;
+  }
+  return mapVariantToIcon[`${icon}-${size}` as IndicatorCombinations];
+};
+
+export const IndicatorOutlined = ({
+  icon,
+  size = "regular",
+  color = "default",
+  className,
+}: IndicatorOutlinedProps) => {
+  const classes = useStyles({ icon, size });
+
+  const Icon = getIconComponent(icon, size);
+  const viewBoxSize = getSizeDimension(size);
+
+  const hasColor = color === "default";
+
+  return (
+    <span
+      className={clsx(
+        classes.wrapper,
+        hasColor && classes.wrapperOutline,
+        className
+      )}
+    >
+      <svg
+        viewBox={`0 0 ${viewBoxSize} ${viewBoxSize}`}
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        className={classes.absolute}
+      >
+        <CircleOutline
+          size={size}
+          className={clsx(classes.absolute, hasColor && classes.circleOutline)}
+        />
+      </svg>
+      <Icon />
+    </span>
+  );
+};

package/src/Indicator/index.ts

@@ -0,0 +1 @@
+export * from "./Indicator";

package/src/Indicator/styles.ts

@@ -0,0 +1,63 @@
+import { makeStyles, SaleorTheme } from "../theme";
+import { IndicatorProps, IndicatorSize } from "./Indicator";
+
+export const getIconColor =
+  (theme: SaleorTheme, type: "mid" | "dark") =>
+  (props: Pick<IndicatorProps, "icon">) => {
+    switch (props.icon) {
+      case "warning":
+        return theme.palette.saleor.warning[type];
+      case "success":
+        return theme.palette.saleor.success[type];
+      case "fail":
+      case "error":
+        return theme.palette.saleor.fail[type];
+      default:
+        return "inherit";
+    }
+  };
+
+export const getSizeDimension = (size: IndicatorSize) =>
+  size === "regular" ? 24 : 16;
+
+export const useStyles = makeStyles<
+  Required<Pick<IndicatorProps, "icon" | "size">>,
+  | "wrapper"
+  | "wrapperCircle"
+  | "wrapperOutline"
+  | "absolute"
+  | "circlePath"
+  | "circleOutline"
+>((theme) => ({
+  wrapper: {
+    position: "relative",
+    display: "inline-block",
+    width: (props) => `${getSizeDimension(props.size)}px`,
+    height: (props) => `${getSizeDimension(props.size)}px`,
+    color: theme.palette.saleor.main[1],
+    //color: (props) => {
+    //if (props.variant === "outline") {
+    //return getBackgroundColor(theme)(props);
+    //}
+    //if (props.variant === "text") {
+    //return "inherit";
+    //}
+    //return theme.palette.saleor.main[1];
+    //},
+  },
+  wrapperCircle: {
+    color: getIconColor(theme, "mid"),
+  },
+  wrapperOutline: {
+    color: getIconColor(theme, "dark"),
+  },
+  absolute: {
+    position: "absolute",
+  },
+  circlePath: {
+    fill: getIconColor(theme, "mid"),
+  },
+  circleOutline: {
+    stroke: getIconColor(theme, "dark"),
+  },
+}));

package/src/MultipleValueAutocomplete/MultipleValueAutocomplete.tsx

@@ -41,145 +41,146 @@ export interface MultipleValueAutocompleteProps
   onScrollToBottom?: () => void;
 }
 
-export const MultipleValueAutocomplete: React.FC<MultipleValueAutocompleteProps> =
-  ({
+export const MultipleValueAutocomplete: React.FC<
+  MultipleValueAutocompleteProps
+> = ({
+  choices,
+  children,
+  enableReinitialize,
+  name,
+  InputProps,
+  initialValue = [],
+  loading,
+  popperPlacement = "bottom-start",
+  onChange,
+  onInputChange,
+  onScrollToBottom,
+  ...rest
+}) => {
+  const classes = useStyles();
+  const {
+    anchor,
+    comboboxProps,
+    filteredChoices,
+    getItemProps,
+    getSelectedItemProps,
+    getToggleButtonProps,
+    highlightedIndex,
+    inputProps,
+    inputRef,
+    inputValue,
+    inputWidth,
+    isOpen,
+    labelProps,
+    menuProps,
+    ref,
+    removeSelectedItem,
+    selectedItems,
+  } = useMultipleValueAutocomplete({
     choices,
-    children,
     enableReinitialize,
+    initialValue,
     name,
-    InputProps,
-    initialValue = [],
-    loading,
-    popperPlacement = "bottom-start",
     onChange,
     onInputChange,
-    onScrollToBottom,
-    ...rest
-  }) => {
-    const classes = useStyles();
-    const {
-      anchor,
-      comboboxProps,
-      filteredChoices,
-      getItemProps,
-      getSelectedItemProps,
-      getToggleButtonProps,
-      highlightedIndex,
-      inputProps,
-      inputRef,
-      inputValue,
-      inputWidth,
-      isOpen,
-      labelProps,
-      menuProps,
-      ref,
-      removeSelectedItem,
-      selectedItems,
-    } = useMultipleValueAutocomplete({
-      choices,
-      enableReinitialize,
-      initialValue,
-      name,
-      onChange,
-      onInputChange,
-    });
-    const { anchor: dropdownRef, position, setAnchor } = useElementScroll();
+  });
+  const { anchor: dropdownRef, position, setAnchor } = useElementScroll();
 
-    React.useEffect(() => {
-      if (
-        isOpen &&
-        onScrollToBottom &&
-        dropdownRef &&
-        isScrolledToBottom(dropdownRef, position!, 5)
-      ) {
-        onScrollToBottom();
-      }
-    }, [position?.y, dropdownRef]);
+  React.useEffect(() => {
+    if (
+      isOpen &&
+      onScrollToBottom &&
+      dropdownRef &&
+      isScrolledToBottom(dropdownRef, position!, 5)
+    ) {
+      onScrollToBottom();
+    }
+  }, [position?.y, dropdownRef]);
 
-    return (
-      <>
-        <TextField
-          {...rest}
-          {...comboboxProps}
-          name={name}
-          InputLabelProps={{
-            shrink: isOpen || selectedItems.length || inputValue.length,
-            ...labelProps,
-          }}
-          ref={ref}
-          InputProps={{
-            ...InputProps,
-            ...inputProps,
-            classes: {
-              ...(InputProps?.classes ?? {}),
-              root: clsx(classes.inputContainer, InputProps?.classes?.root, {
-                [classes.inputContainerWithChips]: selectedItems.length > 0,
-              }),
-              input: clsx(classes.input, InputProps?.classes?.input),
-            },
-            startAdornment: selectedItems.map((item, index) => (
-              <ChipRemovable
-                key={`selected-item-${index}`}
-                {...getSelectedItemProps({ selectedItem: item, index })}
-                onRemove={() => removeSelectedItem(item)}
-              >
-                {item.label}
-              </ChipRemovable>
-            )),
-            endAdornment: (
-              <>
-                {loading && (
-                  <div className={classes.loader}>
-                    <CircularProgress size={24} />
-                  </div>
-                )}
-                <IconButton
-                  {...getToggleButtonProps()}
-                  aria-label="toggle menu"
-                  className={classes.icon}
-                  hoverOutline={false}
-                  type="button"
-                  variant="secondary"
-                >
-                  <PlusIcon />
-                </IconButton>
-              </>
-            ),
-          }}
-          inputProps={{ ref: inputRef, style: { width: inputWidth } }}
-        />
-        <Popper
-          className={clsx(classes.popper, menuProps.className)}
-          open={isOpen}
-          anchorEl={anchor.current}
-          transition
-          placement={popperPlacement}
-        >
-          {({ TransitionProps, placement }) => (
-            <Grow
-              {...TransitionProps}
-              style={{
-                transformOrigin:
-                  placement === "bottom" ? "left top" : "left bottom",
-              }}
+  return (
+    <>
+      <TextField
+        {...rest}
+        {...comboboxProps}
+        name={name}
+        InputLabelProps={{
+          shrink: isOpen || selectedItems.length || inputValue.length,
+          ...labelProps,
+        }}
+        ref={ref}
+        InputProps={{
+          ...InputProps,
+          ...inputProps,
+          classes: {
+            ...(InputProps?.classes ?? {}),
+            root: clsx(classes.inputContainer, InputProps?.classes?.root, {
+              [classes.inputContainerWithChips]: selectedItems.length > 0,
+            }),
+            input: clsx(classes.input, InputProps?.classes?.input),
+          },
+          startAdornment: selectedItems.map((item, index) => (
+            <ChipRemovable
+              key={`selected-item-${index}`}
+              {...getSelectedItemProps({ selectedItem: item, index })}
+              onRemove={() => removeSelectedItem(item)}
             >
-              <Paper
-                className={classes.dropdown}
-                elevation={8}
-                style={{ width: anchor.current?.clientWidth }}
-                {...menuProps}
-                ref={mergeRefs(setAnchor, menuProps.ref)}
+              {item.label}
+            </ChipRemovable>
+          )),
+          endAdornment: (
+            <>
+              {loading && (
+                <div className={classes.loader}>
+                  <CircularProgress size={24} />
+                </div>
+              )}
+              <IconButton
+                {...getToggleButtonProps()}
+                aria-label="toggle menu"
+                className={classes.icon}
+                hoverOutline={false}
+                type="button"
+                variant="secondary"
               >
-                {children({
-                  choices: filteredChoices,
-                  highlightedIndex,
-                  getItemProps,
-                  inputValue,
-                })}
-              </Paper>
-            </Grow>
-          )}
-        </Popper>
-      </>
-    );
-  };
+                <PlusIcon />
+              </IconButton>
+            </>
+          ),
+        }}
+        inputProps={{ ref: inputRef, style: { width: inputWidth } }}
+      />
+      <Popper
+        className={clsx(classes.popper, menuProps.className)}
+        open={isOpen}
+        anchorEl={anchor.current}
+        transition
+        placement={popperPlacement}
+      >
+        {({ TransitionProps, placement }) => (
+          <Grow
+            {...TransitionProps}
+            style={{
+              transformOrigin:
+                placement === "bottom" ? "left top" : "left bottom",
+            }}
+          >
+            <Paper
+              className={classes.dropdown}
+              elevation={8}
+              style={{ width: anchor.current?.clientWidth }}
+              {...menuProps}
+              ref={mergeRefs(setAnchor, menuProps.ref)}
+            >
+              {children({
+                choices: filteredChoices,
+                highlightedIndex,
+                getItemProps,
+                inputValue,
+              })}
+            </Paper>
+          </Grow>
+        )}
+      </Popper>
+    </>
+  );
+};