Add new icon assets for various components and sizes

src/assets/components/index.ts

@@ -0,0 +1,34 @@
+import type {default as outline} from './outline';
+
+export const components = {
+  get outline(): typeof outline {
+    return require('./outline').default;
+  },
+  get arrowDown() {
+    return require('./arrowDown.png');
+  },
+  get checkMarkSmall() {
+    return require('./checkMarkSmall.png');
+  },
+  get dropdown() {
+    return require('./dropdown.png');
+  },
+  get exclamationSmall() {
+    return require('./exclamationSmall.png');
+  },
+  get hintTipMiddle() {
+    return require('./hintTipMiddle.png');
+  },
+  get hintTipSide() {
+    return require('./hintTipSide.png');
+  },
+  get minusSmall() {
+    return require('./minusSmall.png');
+  },
+  get plusSmall() {
+    return require('./plusSmall.png');
+  },
+  get transparentSwatch() {
+    return require('./transparentSwatch.png');
+  }
+};

src/assets/components/outline/index.ts

@@ -0,0 +1,14 @@
+export default {
+  get minus() {
+    return require('./minusOutline.png');
+  },
+  get minusSmall() {
+    return require('./minusOutlineSmall.png');
+  },
+  get plus() {
+    return require('./plusOutline.png');
+  },
+  get plusSmall() {
+    return require('./plusOutlineSmall.png');
+  }
+};

src/assets/icons/index.js

@@ -17,6 +17,9 @@ export const icons = {
   get x() {
     return require('./x.png');
   },
+  get xSmall() {
+    return require('./xSmall.png');
+  },
   get xMedium() {
     return require('./xMedium.png');
   },

src/assets/index.ts

@@ -9,5 +9,8 @@ export default new Assets().loadAssetsGroup('', {
   },
   get images() {
     return require('./images').images;
+  },
+  get components() {
+    return require('./components').components;
   }
 });

src/components/chipsInput/index.tsx

@@ -5,8 +5,7 @@ import {Constants} from '../../commons/new';
 import {useCombinedRefs, useDidUpdate} from '../../hooks';
 import TextField, {TextFieldProps} from '../textField';
 import Chip, {ChipProps} from '../chip';
-
-const removeIcon = require('./assets/xSmall.png');
+import Assets from '../../assets';
 
 export enum ChipsInputChangeReason {
   Added = 'added',
@@ -122,7 +121,7 @@ const ChipsInput = forwardRef((props: ChipsInputProps, refToForward: React.Ref<a
         // paddingH-s2
         marginR-s2
         marginB-s2
-        dismissIcon={removeIcon}
+        dismissIcon={Assets.icons.xSmall}
         recorderTag={'mask'}
         {...defaultChipProps}
         {...(chip.invalid ? invalidChipProps : undefined)}

src/components/colorSwatch/index.tsx

@@ -52,7 +52,6 @@ interface Props {
 }
 export type ColorSwatchProps = Props & ColorsModifiers;
 
-const transparentImage = require('./assets/transparentSwatch/TransparentSwatch.png');
 const DEFAULT_SIZE = Constants.isTablet ? 44 : 36;
 export const SWATCH_MARGIN = 12;
 export const SWATCH_SIZE = DEFAULT_SIZE;
@@ -178,7 +177,7 @@ class ColorSwatch extends PureComponent<Props & BaseComponentInjectedProps> {
         {...this.getAccessibilityInfo()}
       >
         {Colors.isTransparent(this.color) && (
-          <Image source={transparentImage} style={this.styles.transparentImage} resizeMode={'cover'}/>
+          <Image source={Assets.components.transparentSwatch} style={this.styles.transparentImage} resizeMode={'cover'}/>
         )}
         {unavailable ? (
           <View style={[this.styles.unavailable, {backgroundColor: tintColor}]}/>

src/components/hint/__tests__/__snapshots__/index.spec.tsx.snap

@@ -235,7 +235,7 @@ exports[`Hint Screen component test Different positions and scenarios center pos
         onError={[Function]}
         source={
           {
-            "testUri": "../../../src/components/hint/assets/hintTipSide.png",
+            "testUri": "../../../src/assets/components/hintTipSide.png",
           }
         }
         style={
@@ -513,7 +513,7 @@ exports[`Hint Screen component test Different positions and scenarios center pos
         onError={[Function]}
         source={
           {
-            "testUri": "../../../src/components/hint/assets/hintTipMiddle.png",
+            "testUri": "../../../src/assets/components/hintTipMiddle.png",
           }
         }
         style={
@@ -792,7 +792,7 @@ exports[`Hint Screen component test Different positions and scenarios left posit
         onError={[Function]}
         source={
           {
-            "testUri": "../../../src/components/hint/assets/hintTipSide.png",
+            "testUri": "../../../src/assets/components/hintTipSide.png",
           }
         }
         style={
@@ -1070,7 +1070,7 @@ exports[`Hint Screen component test Different positions and scenarios left posit
         onError={[Function]}
         source={
           {
-            "testUri": "../../../src/components/hint/assets/hintTipMiddle.png",
+            "testUri": "../../../src/assets/components/hintTipMiddle.png",
           }
         }
         style={
@@ -1349,7 +1349,7 @@ exports[`Hint Screen component test Different positions and scenarios right posi
         onError={[Function]}
         source={
           {
-            "testUri": "../../../src/components/hint/assets/hintTipSide.png",
+            "testUri": "../../../src/assets/components/hintTipSide.png",
           }
         }
         style={
@@ -1627,7 +1627,7 @@ exports[`Hint Screen component test Different positions and scenarios right posi
         onError={[Function]}
         source={
           {
-            "testUri": "../../../src/components/hint/assets/hintTipMiddle.png",
+            "testUri": "../../../src/assets/components/hintTipMiddle.png",
           }
         }
         style={

src/components/hint/index.tsx

@@ -6,6 +6,7 @@ import View from '../view';
 import Image from '../image';
 import Modal from '../modal';
 import TouchableOpacity from '../touchableOpacity';
+import Assets from '../../assets';
 import {HintPositions, HintProps, TargetAlignments} from './types';
 
 import useHintVisibility from './hooks/useHintVisibility';
@@ -16,9 +17,6 @@ import HintMockChildren from './HintMockChildren';
 import HintAnchor from './HintAnchor';
 import HintBubble from './HintBubble';
 
-const sideTip = require('./assets/hintTipSide.png');
-const middleTip = require('./assets/hintTipMiddle.png');
-
 const DEFAULT_COLOR = Colors.$backgroundPrimaryHeavy;
 const DEFAULT_HINT_OFFSET = Spacings.s4;
 const DEFAULT_EDGE_MARGINS = Spacings.s5;
@@ -50,8 +48,6 @@ const Hint = (props: HintProps) => {
     testID
   } = props;
 
-
-
   const hintRef = useRef<RNView>(null);
   const isUsingModal = Boolean(onBackgroundPress && useModal);
 
@@ -141,7 +137,7 @@ const Hint = (props: HintProps) => {
   };
 
   const renderHintTip = () => {
-    const source = useSideTip ? sideTip : middleTip;
+    const source = useSideTip ? Assets.components.hintTipSide : Assets.components.hintTipMiddle;
     const flipVertically = position === HintPositions.TOP;
     const flipHorizontally = targetAlignmentOnScreen === TargetAlignments.RIGHT;
     const flipStyle = {

src/components/picker/helpers/useFieldType.tsx

@@ -4,15 +4,14 @@ import {Typography, Colors} from '../../../style';
 import View from '../../view';
 import Text from '../../text';
 import Icon from '../../icon';
+import Assets from '../../../assets';
 import {PickerProps, PickerFieldTypes} from '../types';
 
 type UseFieldTypeProps = Pick<
   PickerProps,
   'fieldType' | 'preset' | 'trailingAccessory' | 'value' | 'label' | 'placeholder' | 'style' | 'labelStyle' | 'testID'
 >;
 
-const dropdown = require('../assets/dropdown.png');
-
 const useFieldType = (props: UseFieldTypeProps) => {
   const {fieldType, preset, trailingAccessory, value, placeholder, style, label, labelStyle, testID} = props;
 
@@ -23,7 +22,7 @@ const useFieldType = (props: UseFieldTypeProps) => {
         containerStyle: {flexDirection: 'row'},
         label,
         labelStyle: {...Typography.text70, color: Colors.$textNeutral},
-        trailingAccessory: trailingAccessory ?? <Icon marginL-s1 source={dropdown}/>
+        trailingAccessory: trailingAccessory ?? <Icon marginL-s1 source={Assets.components.dropDown}/>
       };
     } else if (fieldType === PickerFieldTypes.settings) {
       return {

src/components/stackAggregator/index.tsx

@@ -7,13 +7,12 @@ import Button, {ButtonSize, ButtonProps} from '../button';
 import Card from '../card';
 import {Constants, asBaseComponent} from '../../commons/new';
 import {useDidUpdate} from '../../hooks';
+import Assets from '../../assets';
 
 const PEEP = 8;
 const DURATION = 300;
 const MARGIN_BOTTOM = 24;
 const buttonStartValue = 0.8;
-const icon = require('./assets/arrow-down.png');
-
 export type StackAggregatorProps = ViewProps & {
   /**
    * The initial state of the stack
@@ -278,7 +277,7 @@ const StackAggregator = (props: StackAggregatorProps) => {
         >
           <Button
             label={'Show less'}
-            iconSource={icon}
+            iconSource={Assets.components.arrowDown}
             link
             size={ButtonSize.small}
             {...buttonProps}

src/components/stepper/index.tsx

@@ -6,6 +6,7 @@ import {asBaseComponent} from '../../commons/new';
 import View from '../view';
 import Text from '../text';
 import Button from '../button';
+import Assets from '../../assets';
 
 enum ActionType {
   MINUS = 'minus',
@@ -14,12 +15,6 @@ enum ActionType {
 
 export type StepperType = 'default' | 'floating';
 
-const minusOutline = require('./assets/minusOutline.png');
-const minusOutlineSmall = require('./assets/minusOutlineSmall.png');
-const plusOutline = require('./assets/plusOutline.png');
-const plusOutlineSmall = require('./assets/plusOutlineSmall.png');
-const plusSmall = require('./assets/plusSmall.png');
-const minusSmall = require('./assets/minusSmall.png');
 const DEFAULT_STEP = 1;
 
 interface Props {
@@ -181,8 +176,16 @@ class Stepper extends PureComponent<Props, State> {
     const {type, disabled, small, testID} = this.props;
     const allowStepChange = this.allowStepChange(actionType);
     const isFloatingStepper = type === 'floating';
-    const minusButton = isFloatingStepper ? minusSmall : small ? minusOutlineSmall : minusOutline;
-    const plusButton = isFloatingStepper ? plusSmall : small ? plusOutlineSmall : plusOutline;
+    const minusButton = isFloatingStepper
+      ? Assets.components.minusSmall
+      : small
+        ? Assets.components.outline.minusSmall
+        : Assets.components.outline.minus;
+    const plusButton = isFloatingStepper
+      ? Assets.components.plusSmall
+      : small
+        ? Assets.components.outline.plusSmall
+        : Assets.components.outline.plus;
 
     return (
       <Button

src/components/wizard/WizardStates.ts

@@ -1,6 +1,5 @@
 import Colors from '../../style/colors';
-const checkMarkSmall = require('./assets/checkMarkSmall.png');
-const exclamationSmall = require('./assets/exclamationSmall.png');
+import Assets from '../../assets';
 import {WizardStepsConfig} from './types';
 
 export const StatesConfig: WizardStepsConfig = {
@@ -9,7 +8,7 @@ export const StatesConfig: WizardStepsConfig = {
   error: {
     color: Colors.$iconDangerLight,
     circleColor: Colors.$outlineDanger,
-    icon: exclamationSmall,
+    icon: Assets.components.exclamationSmall,
     enabled: true,
     accessibilityInfo: 'Validation Error'
   },
@@ -22,7 +21,7 @@ export const StatesConfig: WizardStepsConfig = {
   completed: {
     color: Colors.$iconNeutral,
     circleColor: Colors.$outlineDisabled,
-    icon: checkMarkSmall,
+    icon: Assets.components.checkMarkSmall,
     enabled: true,
     accessibilityInfo: 'Completed'
   },