@thecb/components 10.7.3 → 10.7.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "10.7.3",
+  "version": "10.7.4",
   "description": "Common lib for CityBase react components",
   "main": "dist/index.cjs.js",
   "typings": "dist/index.d.ts",

package/src/components/atoms/icons/OverageIcon.js

@@ -0,0 +1,27 @@
+import React from "react";
+
+const OverageIcon = () => (
+  <svg
+    width="32"
+    height="32"
+    viewBox="0 0 32 32"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <circle
+      cx="16"
+      cy="16"
+      r="16"
+      transform="rotate(-180 16 16)"
+      fill="#D11053"
+    />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M15.6465 7.15426L9.7539 13.0468C9.55864 13.2421 9.55864 13.5587 9.7539 13.7539L10.461 14.461C10.6563 14.6563 10.9728 14.6563 11.1681 14.461L15 10.6291L15 20.6667H11.8333C11.5572 20.6667 11.3333 20.8905 11.3333 21.1667L11.3333 22.1667C11.3333 22.4428 11.5572 22.6667 11.8333 22.6667L20.1667 22.6667C20.4428 22.6667 20.6667 22.4428 20.6667 22.1667V21.1667C20.6667 20.8905 20.4428 20.6667 20.1667 20.6667H17L17 10.6291L20.8319 14.461C21.0272 14.6563 21.3437 14.6563 21.539 14.461L22.2461 13.7539C22.4414 13.5587 22.4414 13.2421 22.2461 13.0468L16.3536 7.15426C16.1583 6.959 15.8417 6.959 15.6465 7.15426Z"
+      fill="white"
+    />
+  </svg>
+);
+
+export default OverageIcon;

package/src/components/atoms/icons/ReversalNeededIcon.js

@@ -0,0 +1,27 @@
+import React from "react";
+
+const ReversalNeededIcon = () => (
+  <svg
+    width="32"
+    height="32"
+    viewBox="0 0 32 32"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <circle cx="16" cy="16" r="16" fill="#D11053" />
+    <path
+      d="M14.4167 14.2222H13.5833C13.4453 14.2222 13.3333 14.1103 13.3333 13.9722V11.6667C13.3333 11.1144 13.781 10.6667 14.3333 10.6667H23C23.5523 10.6667 24 11.1144 24 11.6667V20.3333C24 20.8856 23.5523 21.3333 23 21.3333H14.3333C13.781 21.3333 13.3333 20.8856 13.3333 20.3333V18.0278C13.3333 17.8897 13.4453 17.7778 13.5833 17.7778H14.4167C14.5547 17.7778 14.6667 17.8897 14.6667 18.0278V20H22.6667V11.8518H14.6667V13.9722C14.6667 14.1103 14.5547 14.2222 14.4167 14.2222Z"
+      fill="white"
+    />
+    <path
+      d="M9.8706 11.4627L5.51011 15.8232C5.41248 15.9209 5.41248 16.0791 5.51011 16.1768L9.8706 20.5373C9.96823 20.6349 10.1265 20.6349 10.2242 20.5373L10.8134 19.948C10.911 19.8504 10.911 19.6921 10.8134 19.5945L7.39573 16.1768C7.2981 16.0791 7.2981 15.9209 7.39573 15.8232L10.8134 12.4055C10.911 12.3079 10.911 12.1496 10.8134 12.052L10.2242 11.4627C10.1265 11.3651 9.96823 11.3651 9.8706 11.4627Z"
+      fill="white"
+    />
+    <path
+      d="M6.66667 15.5833C6.66667 15.4453 6.7786 15.3333 6.91667 15.3333L18.4167 15.3333C18.5547 15.3333 18.6667 15.4453 18.6667 15.5833L18.6667 16.4167C18.6667 16.5547 18.5547 16.6667 18.4167 16.6667L6.91667 16.6667C6.7786 16.6667 6.66667 16.5547 6.66667 16.4167L6.66667 15.5833Z"
+      fill="white"
+    />
+  </svg>
+);
+
+export default ReversalNeededIcon;

package/src/components/atoms/icons/ShortageIcon.js

@@ -0,0 +1,21 @@
+import React from "react";
+
+const ShortageIcon = () => (
+  <svg
+    width="32"
+    height="32"
+    viewBox="0 0 32 32"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <circle cx="16" cy="16" r="16" fill="#D11053" />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M11.3333 9.83331C11.3333 9.55717 11.5572 9.33331 11.8333 9.33331H20.1667C20.4428 9.33331 20.6667 9.55717 20.6667 9.83331V10.8333C20.6667 11.1095 20.4428 11.3333 20.1667 11.3333H17V21.3709L20.8319 17.539C21.0272 17.3437 21.3437 17.3437 21.539 17.539L22.2461 18.2461C22.4414 18.4414 22.4414 18.7579 22.2461 18.9532L16.3535 24.8458C16.1583 25.041 15.8417 25.041 15.6464 24.8458L9.75388 18.9532C9.55862 18.7579 9.55862 18.4414 9.75388 18.2461L10.461 17.539C10.6563 17.3437 10.9728 17.3437 11.1681 17.539L15 21.3709V11.3333H11.8333C11.5572 11.3333 11.3333 11.1095 11.3333 10.8333V9.83331Z"
+      fill="white"
+    />
+  </svg>
+);
+
+export default ShortageIcon;

package/src/components/atoms/icons/icons.stories.js

@@ -46,7 +46,10 @@ import {
   TrashIconV2,
   DisabledPropertiesAddIcon,
   DisabledAccountsAddIcon,
-  DisabledPaymentMethodsAddIcon
+  DisabledPaymentMethodsAddIcon,
+  ReversalNeededIcon,
+  OverageIcon,
+  ShortageIcon
 } from "./index";
 
 const story = page({
@@ -55,50 +58,53 @@ const story = page({
 });
 export default story;
 
-export const accountsIcon = () => <AccountsIcon />;
+export const accountNumberImage = () => <AccountNumberImage />;
 export const accountsAddIcon = () => <AccountsAddIcon />;
-export const forgotPasswordIcon = () => <ForgotPasswordIcon />;
-export const goToEmailIcon = () => <GoToEmailIcon />;
-export const plusCircleIcon = () => <PlusCircleIcon />;
-export const verifiedEmailIcon = () => <VerifiedEmailIcon />;
-export const paymentMethodIcon = () => <PaymentMethodIcon />;
+export const accountsIcon = () => <AccountsIcon />;
 export const accountsIconSmall = () => <AccountsIconSmall />;
-export const paymentsIconSmall = () => <PaymentsIconSmall />;
-export const profileIconSmall = () => <ProfileIconSmall />;
-export const settingsIconSmall = () => <SettingsIconSmall />;
-export const chevronIcon = () => <ChevronIcon />;
-export const propertiesAddIcon = () => <PropertiesAddIcon />;
-export const propertiesIconSmall = () => <PropertiesIconSmall />;
-export const accountNumberImage = () => <AccountNumberImage />;
-export const routingNumberImage = () => <RoutingNumberImage />;
-export const checkmarkIcon = () => <CheckmarkIcon />;
-export const bankIcon = () => <BankIcon />;
-export const genericCard = () => <GenericCard />;
-export const autopayOnIcon = () => <AutopayOnIcon />;
-export const searchIcon = () => <SearchIcon />;
 export const achReturnIcon = () => <AchReturnIcon />;
 export const allocatedIcon = () => <AllocatedIcon />;
+export const autopayIcon = () => <AutopayIcon />;
+export const autopayOnIcon = () => <AutopayOnIcon />;
+export const bankIcon = () => <BankIcon />;
 export const calendarIcon = () => <CalendarIcon />;
 export const chargebackIcon = () => <ChargebackIcon />;
 export const chargebackReversalIcon = () => <ChargebackReversalIcon />;
+export const checkmarkIcon = () => <CheckmarkIcon />;
+export const chevronIcon = () => <ChevronIcon />;
+export const closeIcon = () => <CloseIcon />;
+export const disabledAccountsAddIcon = () => <DisabledAccountsAddIcon />;
+export const disabledPaymentMethodsAddIcon = () => (
+  <DisabledPaymentMethodsAddIcon />
+);
+export const disabledPropertiesAddIcon = () => <DisabledPropertiesAddIcon />;
 export const duplicateIcon = () => <DuplicateIcon />;
 export const erroredIcon = () => <ErroredIcon />;
 export const failedIcon = () => <FailedIcon />;
+export const forgotPasswordIcon = () => <ForgotPasswordIcon />;
+export const genericCard = () => <GenericCard />;
+export const goToEmailIcon = () => <GoToEmailIcon />;
+export const kebabMenuIcon = () => <KebabMenuIcon />;
+export const multiCartIcon = () => <MultiCartIcon />;
+export const overageIcon = () => <OverageIcon />;
+export const paymentMethodIcon = () => <PaymentMethodIcon />;
+export const paymentsIconSmall = () => <PaymentsIconSmall />;
 export const pencilIcon = () => <PencilIcon />;
 export const pendingIcon = () => <PendingIcon />;
+export const plusCircleIcon = () => <PlusCircleIcon />;
+export const profileIconSmall = () => <ProfileIconSmall />;
+export const propertiesAddIcon = () => <PropertiesAddIcon />;
+export const propertiesIconSmall = () => <PropertiesIconSmall />;
 export const refundIcon = () => <RefundIcon />;
 export const rejectedIcon = () => <RejectedIcon />;
 export const rejectedVelocityIcon = () => <RejectedVelocityIcon />;
-export const successfulIcon = () => <SuccessfulIcon />;
-export const voidedIcon = () => <VoidedIcon />;
+export const reversalNeededIcon = () => <ReversalNeededIcon />;
+export const routingNumberImage = () => <RoutingNumberImage />;
+export const searchIcon = () => <SearchIcon />;
+export const settingsIconSmall = () => <SettingsIconSmall />;
+export const shortageIcon = () => <ShortageIcon />;
 export const statusUnknownIcon = () => <StatusUnknownIcon />;
-export const autopayIcon = () => <AutopayIcon />;
-export const kebabMenuIcon = () => <KebabMenuIcon />;
-export const multiCartIcon = () => <MultiCartIcon />;
-export const closeIcon = () => <CloseIcon />;
+export const successfulIcon = () => <SuccessfulIcon />;
 export const trashIconV2 = () => <TrashIconV2 />;
-export const disabledPropertiesAddIcon = () => <DisabledPropertiesAddIcon />;
-export const disabledAccountsAddIcon = () => <DisabledAccountsAddIcon />;
-export const disabledPaymentMethodsAddIcon = () => (
-  <DisabledPaymentMethodsAddIcon />
-);
+export const verifiedEmailIcon = () => <VerifiedEmailIcon />;
+export const voidedIcon = () => <VoidedIcon />;

package/src/components/atoms/icons/index.js

@@ -94,6 +94,9 @@ import TrashIconV2 from "./TrashIconV2";
 import DisabledAccountsAddIcon from "./DisabledAccountsAddIcon";
 import DisabledPropertiesAddIcon from "./DisabledPropertiesAddIcon";
 import DisabledPaymentMethodsAddIcon from "./DisabledPaymentMethodsAddIcon";
+import ReversalNeededIcon from "./ReversalNeededIcon";
+import OverageIcon from "./OverageIcon";
+import ShortageIcon from "./ShortageIcon";
 
 export {
   AccountsIcon,
@@ -191,5 +194,8 @@ export {
   TrashIconV2,
   DisabledAccountsAddIcon,
   DisabledPropertiesAddIcon,
-  DisabledPaymentMethodsAddIcon
+  DisabledPaymentMethodsAddIcon,
+  ReversalNeededIcon,
+  OverageIcon,
+  ShortageIcon
 };