@transferwise/components 0.0.0-experimental-680afef → 0.0.0-experimental-c8fc1dc

package/build/types/instructionsList/InstructionsList.d.ts

@@ -4,13 +4,15 @@ type InstructionNode = {
     content: ReactNode;
     ['aria-label']: string;
 };
-type Props = CommonProps & ({
+type Props = CommonProps & {
+    overrideCircleFillIcons?: boolean;
+} & ({
     dos?: ReactNode[];
     donts?: ReactNode[];
 } | {
     dos?: InstructionNode[];
     donts?: InstructionNode[];
 });
-declare const InstructionsList: ({ dos, donts }: Props) => import("react").JSX.Element;
+declare const InstructionsList: ({ dos, donts, overrideCircleFillIcons }: Props) => import("react").JSX.Element;
 export default InstructionsList;
 //# sourceMappingURL=InstructionsList.d.ts.map

package/build/types/instructionsList/InstructionsList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InstructionsList.d.ts","sourceRoot":"","sources":["../../../src/instructionsList/InstructionsList.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAkB,MAAM,OAAO,CAAC;AAGlD,OAAO,EAAc,WAAW,EAAE,MAAM,WAAW,CAAC;AAEpD,KAAK,eAAe,GAAG;IACrB,OAAO,EAAE,SAAS,CAAC;IACnB,CAAC,YAAY,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,KAAK,KAAK,GAAG,WAAW,GACtB,CACI;IACE,GAAG,CAAC,EAAE,SAAS,EAAE,CAAC;IAClB,KAAK,CAAC,EAAE,SAAS,EAAE,CAAC;CACrB,GACD;IACE,GAAG,CAAC,EAAE,eAAe,EAAE,CAAC;IACxB,KAAK,CAAC,EAAE,eAAe,EAAE,CAAC;CAC3B,CACJ,CAAC;AAEJ,QAAA,MAAM,gBAAgB,mBAAoB,KAAK,gCAe9C,CAAC;AAsBF,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"InstructionsList.d.ts","sourceRoot":"","sources":["../../../src/instructionsList/InstructionsList.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,SAAS,EAAkB,MAAM,OAAO,CAAC;AAGlD,OAAO,EAAc,WAAW,EAAE,MAAM,WAAW,CAAC;AAEpD,KAAK,eAAe,GAAG;IACrB,OAAO,EAAE,SAAS,CAAC;IACnB,CAAC,YAAY,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,KAAK,KAAK,GAAG,WAAW,GAAG;IAAE,uBAAuB,CAAC,EAAE,OAAO,CAAA;CAAE,GAAG,CAC7D;IACE,GAAG,CAAC,EAAE,SAAS,EAAE,CAAC;IAClB,KAAK,CAAC,EAAE,SAAS,EAAE,CAAC;CACrB,GACD;IACE,GAAG,CAAC,EAAE,eAAe,EAAE,CAAC;IACxB,KAAK,CAAC,EAAE,eAAe,EAAE,CAAC;CAC3B,CACJ,CAAC;AAEJ,QAAA,MAAM,gBAAgB,4CAAqD,KAAK,gCAyB/E,CAAC;AAoCF,eAAe,gBAAgB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-680afef",
+  "version": "0.0.0-experimental-c8fc1dc",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -77,13 +77,13 @@
     "storybook": "^7.4.5",
     "@transferwise/less-config": "3.1.0",
     "@transferwise/neptune-css": "14.9.5",
-    "@wise/components-theming": "0.0.0-experimental-680afef"
+    "@wise/components-theming": "0.0.0-experimental-c8fc1dc"
   },
   "peerDependencies": {
     "@transferwise/icons": "^3.7.0",
     "@transferwise/neptune-css": "^14.9.5",
     "@wise/art": "^2.7.0",
-    "@wise/components-theming": "0.0.0-experimental-680afef",
+    "@wise/components-theming": "0.0.0-experimental-c8fc1dc",
     "react": ">=16.14",
     "react-dom": ">=16.14",
     "react-intl": "^5.10.0 || ^6"

package/src/instructionsList/InstructionList.story.tsx

@@ -33,6 +33,7 @@ export const Basic = () => {
           { content: 'Create recipients', 'aria-label': "Doesn't support creating recipients" },
           { content: 'Edit recipients', 'aria-label': "Doesn't support editing recipients" },
         ]}
+        overrideCircleFillIcons
       />
     </>
   );

package/src/instructionsList/InstructionsList.tsx

@@ -1,4 +1,10 @@
-import { CrossCircleFill as DontIcon, CheckCircleFill as DoIcon } from '@transferwise/icons';
+import { boolean } from '@storybook/addon-knobs';
+import {
+  CrossCircleFill as DontCheckCircleIcon,
+  CheckCircleFill as DoCheckCircleIcon,
+  Cross as DontCrossIcon,
+  Check as DoCheckIcon,
+} from '@transferwise/icons';
 import { ReactNode, isValidElement } from 'react';
 
 import Body from '../body/Body';
@@ -9,8 +15,7 @@ type InstructionNode = {
   ['aria-label']: string;
 };
 
-type Props = CommonProps &
-  (
+type Props = CommonProps & { overrideCircleFillIcons?: boolean } & (
     | {
         dos?: ReactNode[];
         donts?: ReactNode[];
@@ -21,24 +26,42 @@ type Props = CommonProps &
       }
   );
 
-const InstructionsList = ({ dos, donts }: Props) => {
+const InstructionsList = ({ dos, donts, overrideCircleFillIcons = false }: Props) => {
   return (
     <div className="tw-instructions">
       {dos &&
         dos.map((doThis, index) => (
-          // eslint-disable-next-line react/no-array-index-key
-          <Instruction key={index} item={doThis} type="do" />
+          <Instruction
+            // eslint-disable-next-line react/no-array-index-key
+            key={index}
+            item={doThis}
+            type="do"
+            overrideCircleFillIcons={overrideCircleFillIcons}
+          />
         ))}
       {donts &&
         donts.map((dont, index) => (
-          // eslint-disable-next-line react/no-array-index-key
-          <Instruction key={index} item={dont} type="dont" />
+          <Instruction
+            // eslint-disable-next-line react/no-array-index-key
+            key={index}
+            item={dont}
+            type="dont"
+            overrideCircleFillIcons={overrideCircleFillIcons}
+          />
         ))}
     </div>
   );
 };
 
-function Instruction({ item, type }: { item: ReactNode | InstructionNode; type: 'do' | 'dont' }) {
+function Instruction({
+  item,
+  type,
+  overrideCircleFillIcons,
+}: {
+  item: ReactNode | InstructionNode;
+  type: 'do' | 'dont';
+  overrideCircleFillIcons: boolean;
+}) {
   const isInstructionNode =
     typeof item === 'object' && item !== null && 'content' in item && 'aria-label' in item;
   return (
@@ -46,10 +69,16 @@ function Instruction({ item, type }: { item: ReactNode | InstructionNode; type:
       className="instruction"
       aria-label={isInstructionNode ? (item['aria-label'] as string) : undefined}
     >
-      {type === 'do' ? (
-        <DoIcon size={24} className={type} />
+      {overrideCircleFillIcons ? (
+        type === 'do' ? (
+          <DoCheckIcon size={24} className={type} />
+        ) : (
+          <DontCrossIcon size={24} className={type} />
+        )
+      ) : type === 'do' ? (
+        <DoCheckCircleIcon size={24} className={type} />
       ) : (
-        <DontIcon size={24} className={type} />
+        <DontCheckCircleIcon size={24} className={type} />
       )}
       <Body className="text-primary" type={Typography.BODY_LARGE}>
         {isInstructionNode ? item.content : item}