@saleor/macaw-ui 0.7.2 → 0.8.0-dev.104

package/src/NavigationCard/NavigationCard.stories.tsx

@@ -1,33 +0,0 @@
-import Grid from "@material-ui/core/Grid";
-import { Meta, Story } from "@storybook/react";
-import React from "react";
-
-import { DeleteIcon } from "..";
-import { NavigationCard } from "./NavigationCard";
-import { NavigationCardBase } from "./NavigationCardBase";
-
-export const Default: Story = () => (
-  <Grid container>
-    <Grid item xs={12} md={4}>
-      <a href="#">
-        <NavigationCard
-          title="Lorem Ipsum"
-          description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras condimentum odio ac tempor malesuada."
-          icon={<DeleteIcon />}
-        />
-      </a>
-    </Grid>
-  </Grid>
-);
-
-export const Custom: Story = () => (
-  <Grid container>
-    <Grid item xs={12} md={4}>
-      <NavigationCardBase>Lorem ipsum dolor sit amet</NavigationCardBase>
-    </Grid>
-  </Grid>
-);
-
-export default {
-  title: "Navigation Card",
-} as Meta;

package/src/NavigationCard/NavigationCard.tsx

@@ -1,43 +0,0 @@
-import Typography from "@material-ui/core/Typography";
-import React from "react";
-
-import {
-  NavigationCardBase,
-  NavigationCardBaseProps,
-} from "./NavigationCardBase";
-import useStyles from "./styles";
-
-export interface NavigationCardProps extends NavigationCardBaseProps {
-  title: string;
-  description: string;
-  icon: React.ReactNode;
-}
-
-export const NavigationCard: React.FC<NavigationCardProps> = ({
-  icon,
-  title,
-  description,
-  ...rest
-}) => {
-  const classes = useStyles();
-
-  return (
-    <NavigationCardBase {...rest}>
-      <div className={classes.content}>
-        <div className={classes.icon}>{icon}</div>
-        <div>
-          <Typography variant="subtitle1" className={classes.boxLinkTitle}>
-            {title}
-          </Typography>
-          <Typography
-            variant="body2"
-            color="textSecondary"
-            className={classes.boxLinkText}
-          >
-            {description}
-          </Typography>
-        </div>
-      </div>
-    </NavigationCardBase>
-  );
-};

package/src/NavigationCard/NavigationCardBase.tsx

@@ -1,27 +0,0 @@
-import Card, { CardProps } from "@material-ui/core/Card";
-import CardContent from "@material-ui/core/CardContent";
-import clsx from "clsx";
-import React from "react";
-
-import useStyles from "./styles";
-
-export interface NavigationCardBaseProps extends Omit<CardProps, "classes"> {
-  classes?: Record<"root" | "content", string>;
-}
-
-export const NavigationCardBase: React.FC<NavigationCardBaseProps> = ({
-  className,
-  classes: propClasses = {},
-  children,
-  ...rest
-}) => {
-  const classes = useStyles();
-
-  return (
-    <Card className={clsx(classes.card, className, propClasses.root)} {...rest}>
-      <CardContent className={clsx(classes.cardContent, propClasses.content)}>
-        {children}
-      </CardContent>
-    </Card>
-  );
-};

package/src/NavigationCard/index.ts

@@ -1,2 +0,0 @@
-export * from "./NavigationCard";
-export * from "./NavigationCardBase";

package/src/NavigationCard/styles.ts

@@ -1,45 +0,0 @@
-import { makeStyles } from "..";
-
-const useStyles = makeStyles(
-  (theme) => ({
-    boxLinkTitle: {
-      fontWeight: 500,
-      transition: "color .2s ease",
-    },
-    boxLinkText: {
-      marginTop: theme.spacing(1),
-    },
-    icon: {
-      "& svg": {
-        height: 32,
-        width: 32,
-      },
-      transition: theme.transitions.create("color", {
-        duration: theme.transitions.duration.shorter,
-      }),
-    },
-    card: {
-      "&:hover": {
-        boxShadow: theme.shadows[16],
-        color: theme.palette.primary.main,
-      },
-      boxShadow: theme.shadows[0],
-      textDecoration: "none",
-      transition: theme.transitions.create(["color", "box-shadow"], {
-        duration: theme.transitions.duration.shorter,
-      }),
-    },
-    cardContent: {
-      "&&": {
-        padding: theme.spacing(4),
-      },
-    },
-    content: {
-      display: "flex",
-      columnGap: theme.spacing(2),
-    },
-  }),
-  { name: "NavigationCard" }
-);
-
-export default useStyles;

package/src/Notification/Notification.stories.tsx

@@ -1,104 +0,0 @@
-import { Meta, Story } from "@storybook/react";
-import React from "react";
-
-import { Notification } from "./Notification";
-import type { NotificationProps } from "./types";
-
-const props: NotificationProps = {
-  title: "Title",
-  onClose: () => undefined,
-  type: "info",
-};
-
-export const Info: Story = () => <Notification {...props} />;
-export const Warn: Story = () => <Notification {...props} type="warning" />;
-export const Success: Story = () => <Notification {...props} type="success" />;
-export const Error: Story = () => <Notification {...props} type="error" />;
-export const WithAction: Story = () => (
-  <Notification
-    {...props}
-    action={{
-      label: "Action",
-      onClick: () => undefined,
-    }}
-  />
-);
-export const WithContent: Story = () => (
-  <Notification {...props} content="Some notification content" />
-);
-export const WithActionAndContent: Story = () => (
-  <Notification
-    {...props}
-    content="Some notification content"
-    action={{
-      label: "Action",
-      onClick: () => undefined,
-    }}
-  />
-);
-
-export const WithActionAndLongContent: Story = () => (
-  <Notification
-    {...props}
-    content="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
-    action={{
-      label: "Action",
-      onClick: () => undefined,
-    }}
-  />
-);
-
-export const WithApiMessage: Story = () => (
-  <Notification
-    {...props}
-    type="error"
-    apiMessage={{
-      apiMessageContent:
-        "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
-      hideApiLabel: "Hide log",
-      showApiLabel: "See error log",
-    }}
-    title="Something went wrong"
-  />
-);
-
-export const WithApiMessageAndAction: Story = () => (
-  <Notification
-    {...props}
-    type="error"
-    apiMessage={{
-      apiMessageContent:
-        "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
-      hideApiLabel: "Hide log",
-      showApiLabel: "See error log",
-    }}
-    title="Something went wrong"
-    action={{
-      label: "Action",
-      onClick: () => undefined,
-    }}
-  />
-);
-
-export const WithApiMessageAndActionAndContent: Story = () => (
-  <Notification
-    {...props}
-    type="error"
-    apiMessage={{
-      apiMessageContent:
-        "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
-      hideApiLabel: "Hide log",
-      showApiLabel: "See error log",
-    }}
-    title="Something went wrong"
-    content="Some notification content"
-    action={{
-      label: "Action",
-      onClick: () => undefined,
-    }}
-  />
-);
-
-export default {
-  title: "Notification",
-} as Meta;

package/src/Notification/Notification.tsx

@@ -1,147 +0,0 @@
-import SnackbarContent from "@material-ui/core/SnackbarContent";
-import Typography from "@material-ui/core/Typography";
-import clsx from "clsx";
-import React, { useState } from "react";
-
-import { Button } from "../Button";
-import { IconButton } from "../IconButton";
-import {
-  CloseIcon,
-  CompleteIcon,
-  ExpandIcon,
-  InfoIcon,
-  NotAllowedIcon,
-  WarningIcon,
-} from "../icons";
-import useStyles from "./styles";
-import type { NotificationProps, NotificationType } from "./types";
-
-interface IconProps extends React.SVGProps<SVGSVGElement> {
-  type: NotificationType;
-}
-const Icon: React.FC<IconProps> = ({ type, ...props }) => {
-  switch (type) {
-    case "error":
-      return <NotAllowedIcon {...props} />;
-    case "warning":
-      return <WarningIcon {...props} />;
-    case "success":
-      return <CompleteIcon {...props} />;
-    default:
-      return <InfoIcon {...props} />;
-  }
-};
-
-export const Notification: React.FC<NotificationProps> = ({
-  onClose,
-  title,
-  type,
-  action,
-  content,
-  className,
-  apiMessage,
-  ...rest
-}) => {
-  const classes = useStyles();
-  const [showApiMessage, setShowApiMessage] = useState(false);
-
-  return (
-    <div
-      className={clsx(classes.snackbarContainer, className)}
-      data-test-id="notification"
-      data-test-type={type}
-      {...rest}
-    >
-      <SnackbarContent
-        aria-describedby="client-snackbar"
-        classes={{
-          action: clsx(classes.snackbarAction, {
-            [classes.snackbarContentWithAction]: !!action && !apiMessage,
-          }),
-          message: classes.messageContainer,
-        }}
-        className={clsx(classes.snackbar, {
-          [classes.info]: type === "info",
-          [classes.error]: type === "error",
-          [classes.success]: type === "success",
-          [classes.warning]: type === "warning",
-        })}
-        message={
-          <div
-            className={classes.container}
-            data-test-id="notification-message"
-          >
-            <div>
-              <Icon className={classes.icon} type={type} />
-            </div>
-            <div>
-              <div className={classes.title}>
-                <Typography variant="h5">{title}</Typography>
-              </div>
-              <Typography variant="body1">{content}</Typography>
-              {showApiMessage && (
-                <Typography variant="body2" className={classes.apiMessage}>
-                  {apiMessage?.apiMessageContent}
-                </Typography>
-              )}
-            </div>
-          </div>
-        }
-        action={[
-          <div key="actions" data-test-id="notification-actions">
-            {!!action && (
-              <Button
-                className={classes.actionBtn}
-                key="action"
-                variant="tertiary"
-                onClick={action.onClick}
-                data-test-id="button-action"
-              >
-                {action.label}
-              </Button>
-            )}
-          </div>,
-          <div
-            key="api-action"
-            className={classes.apiMessageAction}
-            data-test-id="notification-api-action"
-          >
-            {!!apiMessage && (
-              <>
-                <Typography variant="body1">
-                  {showApiMessage
-                    ? apiMessage.hideApiLabel
-                    : apiMessage.showApiLabel}
-                </Typography>
-                <IconButton
-                  aria-label={showApiMessage ? "shrink" : "expand"}
-                  onClick={() => setShowApiMessage((show) => !show)}
-                  hoverOutline={false}
-                  variant="secondary"
-                  className={classes.apiErrorButton}
-                >
-                  <ExpandIcon
-                    className={clsx({
-                      [classes.rotate]: showApiMessage,
-                    })}
-                  />
-                </IconButton>
-              </>
-            )}
-          </div>,
-          <IconButton
-            aria-label="Close"
-            onClick={onClose}
-            hoverOutline={false}
-            variant="secondary"
-            className={classes.closeBtn}
-            data-test-id="close"
-          >
-            <CloseIcon />
-          </IconButton>,
-        ]}
-      />
-    </div>
-  );
-};
-Notification.displayName = "Notification";

package/src/Notification/index.ts

@@ -1,2 +0,0 @@
-export * from "./Notification";
-export * from "./types";

package/src/Notification/styles.ts

@@ -1,104 +0,0 @@
-import { makeStyles } from "../theme";
-
-const iconWidth = 40;
-
-const useStyles = makeStyles(
-  (theme) => ({
-    actionBtn: {
-      position: "absolute",
-      minWidth: "unset",
-      right: "24px",
-      bottom: "20px",
-    },
-    rotate: {
-      transform: "rotate(180deg)",
-    },
-    apiMessage: {
-      margin: "6px 0 4px 0",
-    },
-    apiMessageAction: {
-      display: "flex",
-      alignItems: "center",
-      marginTop: "-10px",
-    },
-    closeBtn: {
-      "&:hover": {
-        color: theme.palette.text.primary,
-      },
-      "& svg": {
-        maxHeight: 20,
-        maxWidth: 20,
-      },
-      color: theme.palette.text.primary,
-      padding: 10,
-      position: "absolute",
-      right: 5,
-      top: 7,
-      border: "none",
-    },
-    apiErrorButton: {
-      border: "none",
-    },
-    error: {
-      "& $icon": {
-        color: theme.palette.alert.icon.error,
-      },
-      backgroundColor: theme.palette.alert.paper.error,
-    },
-    hiddenText: {
-      maxHeight: 0,
-    },
-    icon: {},
-    info: {},
-    snackbar: {
-      borderRadius: 4,
-      padding: theme.spacing(0, 6, 1, 2),
-      position: "relative",
-    },
-    snackbarContainer: {
-      marginBottom: theme.spacing(2),
-      maxWidth: 450,
-      position: "relative",
-    },
-    snackbarAction: {
-      paddingLeft: `calc(${iconWidth}px + ${theme.spacing(2)})`,
-    },
-    snackbarContentWithAction: {
-      paddingBottom: "5rem",
-    },
-    success: {
-      "& $icon": {
-        color: theme.palette.alert.icon.success,
-      },
-      backgroundColor: theme.palette.alert.paper.success,
-    },
-    text: {
-      fontWeight: 400,
-      paddingTop: 5,
-    },
-    warning: {
-      "& $icon": {
-        color: theme.palette.alert.icon.warning,
-      },
-      backgroundColor: theme.palette.alert.paper.warning,
-    },
-
-    messageContainer: {
-      paddingTop: theme.spacing(2),
-      position: "relative",
-    },
-
-    container: {
-      columnGap: theme.spacing(2),
-      display: "grid",
-      gridTemplateColumns: `${iconWidth}px 1fr`,
-    },
-    title: {
-      marginTop: 6,
-      marginBottom: theme.spacing(0.5),
-    },
-  }),
-  { name: "Notification" }
-);
-
-export default useStyles;

package/src/Notification/types.ts

@@ -1,26 +0,0 @@
-import type { ReactNode } from "react";
-
-export type NotificationType = "info" | "success" | "error" | "warning";
-export interface NotificationAction {
-  label: string;
-  onClick: () => void;
-}
-
-export type ApiMessageData = {
-  apiMessageContent: ReactNode;
-  showApiLabel: ReactNode;
-  hideApiLabel: ReactNode;
-};
-
-export interface NotificationData {
-  content?: ReactNode;
-  title: string;
-  action?: NotificationAction;
-  type: NotificationType;
-  apiMessage?: ApiMessageData;
-}
-
-export interface NotificationProps extends NotificationData {
-  className?: string;
-  onClose: () => void;
-}

package/src/OffsettedList/OffsettedList.stories.tsx

@@ -1,140 +0,0 @@
-import Checkbox from "@material-ui/core/Checkbox";
-import { Meta, Story } from "@storybook/react";
-import React from "react";
-
-import {
-  DeleteIcon,
-  EditIcon,
-  IconButton,
-  Pagination,
-  useOffsettedListWidths,
-} from "..";
-import { useListStory } from "../utils/useListStory";
-import {
-  OffsettedList,
-  OffsettedListBody,
-  OffsettedListFooter,
-  OffsettedListHeader,
-  OffsettedListItem,
-  OffsettedListItemCell,
-} from "./";
-
-export const Default: Story = () => {
-  const {
-    hasNextPage,
-    hasPreviousPage,
-    pageData,
-    setRowsPerPage,
-    nextPage,
-    previousPage,
-    rowsPerPage,
-  } = useListStory();
-
-  return (
-    <OffsettedList gridTemplate={["1fr", "200px"]} style={{ width: 650 }}>
-      <OffsettedListHeader>
-        <OffsettedListItem>
-          <OffsettedListItemCell>Name</OffsettedListItemCell>
-          <OffsettedListItemCell>Calories (per 100g)</OffsettedListItemCell>
-        </OffsettedListItem>
-      </OffsettedListHeader>
-      <OffsettedListBody>
-        {pageData.map((dataRow) => (
-          <OffsettedListItem>
-            <OffsettedListItemCell>{dataRow.name}</OffsettedListItemCell>
-            <OffsettedListItemCell>{`${dataRow.calories} kcal`}</OffsettedListItemCell>
-          </OffsettedListItem>
-        ))}
-      </OffsettedListBody>
-      <OffsettedListFooter>
-        <OffsettedListItem>
-          <OffsettedListItemCell colSpan={2}>
-            <Pagination
-              choices={[1, 2, 3]}
-              onRowNumberUpdate={setRowsPerPage}
-              hasNextPage={hasNextPage}
-              hasPreviousPage={hasPreviousPage}
-              labels={{ noOfRows: "No. of rows:" }}
-              onNextPage={nextPage}
-              onPreviousPage={previousPage}
-              rowNumber={rowsPerPage}
-            />
-          </OffsettedListItemCell>
-        </OffsettedListItem>
-      </OffsettedListFooter>
-    </OffsettedList>
-  );
-};
-
-const S: React.FC = () => {
-  const { data, pageData, selected, isRowSelected, toggleAll, toggleRow } =
-    useListStory(10);
-  const { checkbox, actions } = useOffsettedListWidths();
-
-  return (
-    <OffsettedList
-      gridTemplate={[checkbox, "1fr", "200px", actions(2)]}
-      style={{ width: 650 }}
-    >
-      <OffsettedListHeader>
-        {selected.length > 0 ? (
-          <OffsettedListItem>
-            <OffsettedListItemCell padding="checkbox">
-              <Checkbox
-                checked={selected.length === data.length}
-                indeterminate={selected.length !== data.length}
-                onChange={toggleAll}
-              />
-            </OffsettedListItemCell>
-            <OffsettedListItemCell colSpan={2} />
-            <OffsettedListItemCell padding="action">
-              <IconButton variant="secondary" hoverOutline>
-                <EditIcon />
-              </IconButton>
-              <IconButton variant="secondary" hoverOutline>
-                <DeleteIcon />
-              </IconButton>
-            </OffsettedListItemCell>
-          </OffsettedListItem>
-        ) : (
-          <OffsettedListItem>
-            <OffsettedListItemCell padding="checkbox">
-              <Checkbox checked={false} onChange={toggleAll} />
-            </OffsettedListItemCell>
-            <OffsettedListItemCell>Name</OffsettedListItemCell>
-            <OffsettedListItemCell>Calories (per 100g)</OffsettedListItemCell>
-            <OffsettedListItemCell />
-          </OffsettedListItem>
-        )}
-      </OffsettedListHeader>
-      <OffsettedListBody>
-        {pageData.map((dataRow) => (
-          <OffsettedListItem selected={isRowSelected(dataRow.name)}>
-            <OffsettedListItemCell padding="checkbox">
-              <Checkbox
-                checked={isRowSelected(dataRow.name)}
-                onChange={() => toggleRow(dataRow.name)}
-              />
-            </OffsettedListItemCell>
-            <OffsettedListItemCell>{dataRow.name}</OffsettedListItemCell>
-            <OffsettedListItemCell>{`${dataRow.calories} kcal`}</OffsettedListItemCell>
-            <OffsettedListItemCell padding="action">
-              <IconButton variant="secondary" hoverOutline>
-                <EditIcon />
-              </IconButton>
-              <IconButton variant="secondary" hoverOutline>
-                <DeleteIcon />
-              </IconButton>
-            </OffsettedListItemCell>
-          </OffsettedListItem>
-        ))}
-      </OffsettedListBody>
-    </OffsettedList>
-  );
-};
-
-export const WithActions: Story = () => <S />;
-
-export default {
-  title: "Lists / Offsetted List",
-} as Meta;