(0.3) Create status icons components

package.json

@@ -71,11 +71,11 @@
  "size-limit": [
  {
  "path": "dist/macaw-ui.cjs.production.min.js",
- "limit": "45 KB"
+ "limit": "50 KB"
  },
  {
  "path": "dist/macaw-ui.esm.js",
- "limit": "25 KB"
+ "limit": "35 KB"
  }
  ],
  "devDependencies": {

src/Alert/Alert.tsx

@@ -4,7 +4,7 @@ import CloseIcon from "@material-ui/icons/Close";
 import clsx from "clsx";
 import React from "react";
 
-import { Error, Info, Success, Warning } from "../icons";
+import { CompleteIcon, InfoIcon, NotAllowedIcon, WarningIcon } from "../icons";
 import { AlertBase, AlertBaseProps, AlertVariant } from "./AlertBase";
 import useStyles from "./styles";
 
@@ -15,13 +15,13 @@ export interface AlertProps extends AlertBaseProps {
 const Icon: React.FC<{ variant: AlertVariant }> = ({ variant }) => {
  switch (variant) {
  case "error":
- return <Error />;
+ return <NotAllowedIcon />;
  case "warning":
- return <Warning />;
+ return <WarningIcon />;
  case "success":
- return <Success />;
+ return <CompleteIcon />;
  default:
- return <Info />;
+ return <InfoIcon />;
  }
 };
 

src/Alert/styles.ts

@@ -22,7 +22,6 @@ const useStyles = makeStyles(
  content: {
  padding: theme.spacing(0, 1),
  },
- icon: {},
  root: {},
  titleBar: {
  marginTop: 6,

src/Notification/Notification.tsx

@@ -6,20 +6,20 @@ import CloseIcon from "@material-ui/icons/Close";
 import clsx from "clsx";
 import React from "react";
 
-import { Error, Info, Success, Warning } from "../icons";
+import { CompleteIcon, InfoIcon, NotAllowedIcon, WarningIcon } from "../icons";
 import useStyles from "./styles";
 import type { NotificationProps, NotificationType } from "./types";
 
 const Icon: React.FC<{ type: NotificationType }> = ({ type }) => {
  switch (type) {
  case "error":
- return <Error />;
+ return <NotAllowedIcon />;
  case "warning":
- return <Warning />;
+ return <WarningIcon />;
  case "success":
- return <Success />;
+ return <CompleteIcon />;
  default:
- return <Info />;
+ return <InfoIcon />;
  }
 };
 

src/Notification/styles.ts

@@ -67,7 +67,6 @@ const useStyles = makeStyles(
  marginTop: 6,
  marginBottom: theme.spacing(0.5),
  },
- icon: {},
  }),
  { name: "Notification" }
 );

src/icons/CheckboxChecked.tsx → src/icons/CheckboxCheckedIcon.tsx

@@ -1,7 +1,7 @@
 import { createSvgIcon } from "@material-ui/core/utils";
 import React from "react";
 
-export const CheckboxChecked = createSvgIcon(
+export const CheckboxCheckedIcon = createSvgIcon(
  <>
  <rect x="5" y="5" width="14" height="14" fill="currentColor" />
  <path
@@ -11,5 +11,5 @@ export const CheckboxChecked = createSvgIcon(
  fill="white"
  />
  </>,
- "CheckboxChecked"
+ "CheckboxCheckedIcon"
 );

src/icons/Checkbox.tsx → src/icons/CheckboxIcon.tsx

@@ -1,7 +1,7 @@
 import { createSvgIcon } from "@material-ui/core/utils";
 import React from "react";
 
-export const Checkbox = createSvgIcon(
+export const CheckboxIcon = createSvgIcon(
  <rect x="5" y="5" width="14" height="14" stroke="currentColor" fill="none" />,
- "Checkbox"
+ "CheckboxIcon"
 );

src/icons/CheckboxIndeterminate.tsx → src/icons/CheckboxIndeterminateIcon.tsx

@@ -1,7 +1,7 @@
 import { createSvgIcon } from "@material-ui/core/utils";
 import React from "react";
 
-export const CheckboxIndeterminate = createSvgIcon(
+export const CheckboxIndeterminateIcon = createSvgIcon(
  <>
  <rect
  x="5"
@@ -13,5 +13,5 @@ export const CheckboxIndeterminate = createSvgIcon(
  />
  <rect x="8" y="11" width="8" height="2" fill="currentColor" />
  </>,
- "CheckboxIndeterminate"
+ "CheckboxIndeterminateIcon"
 );

src/icons/Success.tsx → src/icons/CompleteIcon.tsx

@@ -1,6 +1,8 @@
 import React from "react";
 
-export const Success: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
+export const CompleteIcon: React.FC<React.SVGProps<SVGSVGElement>> = (
+ props
+) => (
  <svg
  width="40"
  height="40"
@@ -20,4 +22,4 @@ export const Success: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
  </svg>
 );
 
-Success.displayName = "Success";
+CompleteIcon.displayName = "CompleteIcon";

src/icons/Delete.tsx → src/icons/DeleteIcon.tsx

@@ -1,13 +1,13 @@
 import { createSvgIcon } from "@material-ui/core/utils";
 import React from "react";
 
-export const Delete = createSvgIcon(
+export const DeleteIcon = createSvgIcon(
  <path
  fillRule="evenodd"
  clipRule="evenodd"
  d="M10 1C8.89543 1 8 1.89543 8 3V4H4C3.44772 4 3 4.44772 3 5C3 5.55228 3.44772 6 4 6H20C20.5523 6 21 5.55228 21 5C21 4.44772 20.5523 4 20 4H16V3C16 1.89543 15.1046 1 14 1H10ZM14 4H10V3H14V4ZM7 9C7 8.44772 6.55228 8 6 8C5.44772 8 5 8.44772 5 9V20C5 21.6569 6.34315 23 8 23H16C17.6569 23 19 21.6569 19 20V9C19 8.44772 18.5523 8 18 8C17.4477 8 17 8.44772 17 9V20C17 20.5523 16.5523 21 16 21H8C7.44772 21 7 20.5523 7 20V9ZM10 11C10.5523 11 11 11.4477 11 12V17C11 17.5523 10.5523 18 10 18C9.44772 18 9 17.5523 9 17V12C9 11.4477 9.44772 11 10 11ZM15 12C15 11.4477 14.5523 11 14 11C13.4477 11 13 11.4477 13 12V17C13 17.5523 13.4477 18 14 18C14.5523 18 15 17.5523 15 17V12Z"
  fill="currentColor"
  fillOpacity="0.6"
  />,
- "Delete"
+ "DeleteIcon"
 );

src/icons/Edit.tsx → src/icons/EditIcon.tsx

@@ -1,12 +1,12 @@
 import { createSvgIcon } from "@material-ui/core/utils";
 import React from "react";
 
-export const Edit = createSvgIcon(
+export const EditIcon = createSvgIcon(
  <path
  fillRule="evenodd"
  clipRule="evenodd"
  d="m20.08125,2.98089c-1.2209,-1.21116 -3.1901,-1.21116 -4.4109,0l-0.9259,0.91856l-7.70221,7.641c-0.36706,0.36415 -0.58593,0.85157 -0.61423,1.36787l-0.1488,2.7151c-0.06931,1.2648 0.99458,2.2993 2.25694,2.1947l2.65699,-0.2202c0.48957,-0.0405 0.94911,-0.2524 1.29791,-0.5984l8.6196,-8.55117c1.2347,-1.22491 1.2347,-3.22129 0,-4.44619l-1.0294,-1.02127zm-11.56872,10.04163l6.96702,-6.91171l2.5116,2.4916l-6.97042,6.91501l-2.657,0.2202l0.1488,-2.7151zm8.44912,-8.38204l2.5116,2.4916l0.1671,-0.1658c0.4116,-0.4083 0.4116,-1.07376 0,-1.48206l-1.0294,-1.02126c-0.407,-0.40372 -1.0634,-0.40372 -1.4703,0l-0.179,0.17752zm-11.79343,-1.33339c-1.72946,0 -3.13147,1.40201 -3.13147,3.13147l0,12.52586c0,1.7295 1.40201,3.1315 3.13147,3.1315l12.52583,0c1.7295,0 3.1315,-1.402 3.1315,-3.1315l0,-4.5928c0,-0.5765 -0.4673,-1.0438 -1.0438,-1.0438c-0.5765,0 -1.0438,0.4673 -1.0438,1.0438l0,4.5928c0,0.5765 -0.4674,1.0438 -1.0439,1.0438l-12.52583,0c-0.57649,0 -1.04382,-0.4673 -1.04382,-1.0438l0,-12.52586c0,-0.57649 0.46733,-1.04382 1.04382,-1.04382l4.59282,0c0.57649,0 1.04382,-0.46734 1.04382,-1.04383c0,-0.57648 -0.46733,-1.04382 -1.04382,-1.04382l-4.59282,0z"
  fill="currentColor"
  />,
- "Edit"
+ "EditIcon"
 );

src/icons/Filtering.tsx → src/icons/FilteringIcon.tsx

@@ -1,12 +1,12 @@
 import { createSvgIcon } from "@material-ui/core/utils";
 import React from "react";
 
-export const Filtering = createSvgIcon(
+export const FilteringIcon = createSvgIcon(
  <path
  fillRule="evenodd"
  clipRule="evenodd"
  d="M2 4C2 2.89543 2.89543 2 4 2H20C21.1046 2 22 2.89543 22 4V6.67157C22 7.46722 21.6839 8.23029 21.1213 8.79289L15.7929 14.1213C15.6054 14.3089 15.5 14.5632 15.5 14.8284V19C15.5 19.4089 15.251 19.7766 14.8714 19.9285L9.87139 21.9285C9.5633 22.0517 9.21414 22.0141 8.93937 21.8281C8.6646 21.642 8.5 21.3318 8.5 21V14.8284C8.5 14.5632 8.39464 14.3089 8.20711 14.1213L2.87868 8.79289C2.31607 8.23028 2 7.46722 2 6.67157V4ZM20 4H4V6.67157C4 6.93679 4.10536 7.19114 4.29289 7.37868L9.62132 12.7071C10.1839 13.2697 10.5 14.0328 10.5 14.8284V19.523L13.5 18.323V14.8284C13.5 14.0328 13.8161 13.2697 14.3787 12.7071L19.7071 7.37868C19.8946 7.19114 20 6.93679 20 6.67157V4Z"
  fill="currentColor"
  />,
- "Filtering"
+ "FilteringIcon"
 );

src/icons/Info.tsx → src/icons/InfoIcon.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-export const Info: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
+export const InfoIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
  <svg
  width="40"
  height="40"
@@ -20,4 +20,4 @@ export const Info: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
  </svg>
 );
 
-Info.displayName = "Info";
+InfoIcon.displayName = "InfoIcon";

src/icons/Error.tsx → src/icons/NotAllowedIcon.tsx

@@ -1,6 +1,8 @@
 import React from "react";
 
-export const Error: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
+export const NotAllowedIcon: React.FC<React.SVGProps<SVGSVGElement>> = (
+ props
+) => (
  <svg
  width="40"
  height="40"
@@ -20,4 +22,4 @@ export const Error: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
  </svg>
 );
 
-Error.displayName = "Error";
+NotAllowedIcon.displayName = "NotAllowedIcon";

src/icons/NotAllowedInvertedIcon.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+
+export const NotAllowedInvertedIcon: React.FC<React.SVGProps<SVGSVGElement>> = (
+ props
+) => (
+ <svg
+ width="40"
+ height="40"
+ viewBox="0 0 40 40"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg"
+ {...props}
+ >
+ <circle cx="20" cy="20" r="16" fill="#F5FAFB" />
+ <circle cx="20" cy="20" r="20" fill="#FE6E76" />
+ <path
+ fillRule="evenodd"
+ clipRule="evenodd"
+ d="M26.9531 29.7815C24.9914 31.1784 22.5917 32 20 32C13.3726 32 8 26.6274 8 20C8 17.4083 8.82158 15.0086 10.2185 13.0469L26.9531 29.7815ZM29.7815 26.9531L13.0469 10.2185C15.0086 8.82158 17.4083 8 20 8C26.6274 8 32 13.3726 32 20C32 22.5917 31.1784 24.9914 29.7815 26.9531ZM36 20C36 28.8366 28.8366 36 20 36C11.1634 36 4 28.8366 4 20C4 11.1634 11.1634 4 20 4C28.8366 4 36 11.1634 36 20Z"
+ fill="white"
+ />
+ </svg>
+);
+
+NotAllowedInvertedIcon.displayName = "NotAllowedInvertedIcon";

src/icons/Warning.tsx → src/icons/WarningIcon.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-export const Warning: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
+export const WarningIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
  <svg
  width="40"
  height="40"
@@ -20,4 +20,4 @@ export const Warning: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
  </svg>
 );
 
-Warning.displayName = "Warning";
+WarningIcon.displayName = "WarningIcon";

src/icons/index.ts

@@ -1,11 +1,12 @@
-export * from "./Checkbox";
-export * from "./CheckboxChecked";
-export * from "./CheckboxIndeterminate";
-export * from "./Error";
-export * from "./Info";
+export * from "./CheckboxIcon";
+export * from "./CheckboxCheckedIcon";
+export * from "./CheckboxIndeterminateIcon";
+export * from "./InfoIcon";
 export * from "./Logo";
-export * from "./Success";
-export * from "./Warning";
-export * from "./Edit";
-export * from "./Filtering";
-export * from "./Delete";
+export * from "./WarningIcon";
+export * from "./EditIcon";
+export * from "./FilteringIcon";
+export * from "./DeleteIcon";
+export * from "./CompleteIcon";
+export * from "./NotAllowedIcon";
+export * from "./NotAllowedInvertedIcon";

src/index.tsx

@@ -1,5 +1,6 @@
 export * from "./theme";
 export * from "./extensions";
+export * from "./icons";
 export * from "./Savebar";
 export * from "./Backlink";
 export * from "./ConfirmButton";