react-native-ui-lib 7.39.0 → 7.39.1-snapshot.6732

package/src/components/picker/helpers/usePickerSelection.d.ts

@@ -1,6 +1,6 @@
 import { RefObject } from 'react';
 import { PickerProps, PickerValue, PickerSingleValue, PickerMultiValue } from '../types';
-interface UsePickerSelectionProps extends Pick<PickerProps, 'migrate' | 'value' | 'onChange' | 'getItemValue' | 'topBarProps' | 'mode'> {
+interface UsePickerSelectionProps extends Pick<PickerProps, 'migrate' | 'value' | 'onChange' | 'getItemValue' | 'topBarProps' | 'mode' | 'items'> {
     pickerExpandableRef: RefObject<any>;
     setSearchValue: (searchValue: string) => void;
 }
@@ -9,5 +9,8 @@ declare const usePickerSelection: (props: UsePickerSelectionProps) => {
     onDoneSelecting: (item: PickerValue) => void;
     toggleItemSelection: (item: PickerSingleValue) => void;
     cancelSelect: () => void;
+    areAllItemsSelected: boolean;
+    selectedCount: number;
+    toggleAllItemsSelection: (selectAll: boolean) => void;
 };
 export default usePickerSelection;

package/src/components/picker/helpers/usePickerSelection.js

@@ -1,6 +1,6 @@
 import _xor from "lodash/xor";
 import _xorBy from "lodash/xorBy";
-import { useCallback, useState, useEffect } from 'react';
+import { useCallback, useState, useEffect, useMemo } from 'react';
 import { PickerModes } from "../types";
 const usePickerSelection = props => {
   const {
@@ -11,7 +11,8 @@ const usePickerSelection = props => {
     pickerExpandableRef,
     getItemValue,
     setSearchValue,
-    mode
+    mode,
+    items
   } = props;
   const [multiDraftValue, setMultiDraftValue] = useState(value);
   const [multiFinalValue, setMultiFinalValue] = useState(value);
@@ -43,11 +44,26 @@ const usePickerSelection = props => {
     pickerExpandableRef.current?.closeExpandable?.();
     topBarProps?.onCancel?.();
   }, [multiFinalValue, topBarProps]);
+  const availableItems = useMemo(() => {
+    return items?.filter(item => !item.disabled).map(item => item.value) || [];
+  }, [items]);
+  const areAllItemsSelected = useMemo(() => {
+    return multiDraftValue?.length === availableItems.length;
+  }, [multiDraftValue, availableItems]);
+  const selectedCount = useMemo(() => {
+    return multiDraftValue?.length;
+  }, [multiDraftValue]);
+  const toggleAllItemsSelection = useCallback(selectAll => {
+    setMultiDraftValue(selectAll ? availableItems : []);
+  }, [availableItems]);
   return {
     multiDraftValue,
     onDoneSelecting,
     toggleItemSelection,
-    cancelSelect
+    cancelSelect,
+    areAllItemsSelected,
+    selectedCount,
+    toggleAllItemsSelection
   };
 };
 export default usePickerSelection;

package/src/components/picker/index.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import PickerItem from './PickerItem';
 import { extractPickerItems } from './PickerPresenter';
-import { PickerProps, PickerItemProps, PickerValue, PickerModes, PickerFieldTypes, PickerSearchStyle, RenderCustomModalProps, PickerItemsListProps, PickerMethods } from './types';
+import { PickerProps, PickerItemProps, PickerValue, PickerModes, PickerFieldTypes, PickerSearchStyle, RenderCustomModalProps, PickerItemsListProps, PickerMethods, PickerSelectionStatusProps } from './types';
 type PickerStatics = {
     Item: typeof PickerItem;
     modes: typeof PickerModes;
@@ -9,7 +9,7 @@ type PickerStatics = {
     extractPickerItems: typeof extractPickerItems;
 };
 declare const Picker: React.ForwardRefExoticComponent<PickerProps & React.RefAttributes<unknown>>;
-export { PickerProps, PickerItemProps, PickerValue, PickerModes, PickerFieldTypes, PickerSearchStyle, RenderCustomModalProps, PickerItemsListProps, PickerMethods };
+export { PickerProps, PickerItemProps, PickerValue, PickerModes, PickerFieldTypes, PickerSearchStyle, RenderCustomModalProps, PickerItemsListProps, PickerMethods, PickerSelectionStatusProps };
 export { Picker };
 declare const _default: React.ForwardRefExoticComponent<PickerProps & React.RefAttributes<unknown>> & PickerStatics;
 export default _default;

package/src/components/picker/index.js

@@ -18,7 +18,7 @@ import useFieldType from "./helpers/useFieldType";
 import useNewPickerProps from "./helpers/useNewPickerProps";
 // import usePickerMigrationWarnings from './helpers/usePickerMigrationWarnings';
 import { extractPickerItems } from "./PickerPresenter";
-import { PickerProps, PickerItemProps, PickerValue, PickerModes, PickerFieldTypes, PickerSearchStyle, RenderCustomModalProps, PickerItemsListProps, PickerMethods } from "./types";
+import { PickerProps, PickerItemProps, PickerValue, PickerModes, PickerFieldTypes, PickerSearchStyle, RenderCustomModalProps, PickerItemsListProps, PickerMethods, PickerSelectionStatusProps } from "./types";
 const DEFAULT_DIALOG_PROPS = {
   bottom: true,
   width: '100%'
@@ -58,6 +58,7 @@ const Picker = React.forwardRef((props, ref) => {
     showLoader,
     customLoaderElement,
     renderCustomTopElement,
+    selectionStatus,
     ...others
   } = themeProps;
   const {
@@ -101,7 +102,10 @@ const Picker = React.forwardRef((props, ref) => {
     multiDraftValue,
     onDoneSelecting,
     toggleItemSelection,
-    cancelSelect
+    cancelSelect,
+    areAllItemsSelected,
+    selectedCount,
+    toggleAllItemsSelection
   } = usePickerSelection({
     migrate,
     value,
@@ -110,7 +114,8 @@ const Picker = React.forwardRef((props, ref) => {
     getItemValue,
     topBarProps,
     setSearchValue,
-    mode
+    mode,
+    items
   });
   const {
     label,
@@ -154,9 +159,12 @@ const Picker = React.forwardRef((props, ref) => {
       getItemLabel,
       onSelectedLayout: onSelectedItemLayout,
       renderItem,
-      selectionLimit
+      selectionLimit,
+      areAllItemsSelected,
+      selectedCount,
+      toggleAllItemsSelection
     };
-  }, [migrate, mode, value, multiDraftValue, renderItem, getItemValue, getItemLabel, selectionLimit, onSelectedItemLayout, toggleItemSelection, onDoneSelecting]);
+  }, [migrate, mode, value, multiDraftValue, renderItem, getItemValue, getItemLabel, selectionLimit, onSelectedItemLayout, toggleItemSelection, onDoneSelecting, areAllItemsSelected, selectedCount, toggleAllItemsSelection]);
   const renderPickerItem = useCallback((item, index) => {
     return <PickerItem key={`${index}-${item.value}`} {...item} />;
   }, []);
@@ -201,7 +209,7 @@ const Picker = React.forwardRef((props, ref) => {
       ...topBarProps,
       onCancel: cancelSelect,
       onDone: mode === PickerModes.MULTI ? () => onDoneSelecting(multiDraftValue) : undefined
-    }} showSearch={showSearch} searchStyle={searchStyle} searchPlaceholder={searchPlaceholder} onSearchChange={_onSearchChange} renderCustomSearch={renderCustomSearch} renderHeader={renderHeader} listProps={listProps} useSafeArea={useSafeArea} showLoader={showLoader} customLoaderElement={customLoaderElement} renderCustomTopElement={renderCustomTopElement}>
+    }} showSearch={showSearch} searchStyle={searchStyle} searchPlaceholder={searchPlaceholder} onSearchChange={_onSearchChange} renderCustomSearch={renderCustomSearch} renderHeader={renderHeader} listProps={listProps} useSafeArea={useSafeArea} showLoader={showLoader} customLoaderElement={customLoaderElement} renderCustomTopElement={renderCustomTopElement} selectionStatus={selectionStatus}>
         {filteredItems}
       </PickerItemsList>;
   }, [testID, mode, useDialog, selectedItemPosition, topBarProps, cancelSelect, onDoneSelecting, multiDraftValue, showSearch, searchStyle, searchPlaceholder, _onSearchChange, renderCustomSearch, renderHeader, listProps, filteredItems, useSafeArea, useWheelPicker, items, showLoader]);
@@ -221,6 +229,6 @@ Picker.modes = PickerModes;
 Picker.fieldTypes = PickerFieldTypes;
 // @ts-expect-error
 Picker.extractPickerItems = extractPickerItems;
-export { PickerProps, PickerItemProps, PickerValue, PickerModes, PickerFieldTypes, PickerSearchStyle, RenderCustomModalProps, PickerItemsListProps, PickerMethods };
+export { PickerProps, PickerItemProps, PickerValue, PickerModes, PickerFieldTypes, PickerSearchStyle, RenderCustomModalProps, PickerItemsListProps, PickerMethods, PickerSelectionStatusProps };
 export { Picker }; // For tests
 export default Picker;

package/src/components/picker/types.d.ts

@@ -4,6 +4,8 @@ import { ExpandableOverlayProps, ExpandableOverlayMethods } from '../../incubato
 import { ModalTopBarProps } from '../modal/TopBar';
 import { TextFieldMethods, TextFieldProps } from '../textField';
 import { TouchableOpacityProps } from '../touchableOpacity';
+import { ButtonProps } from '../button';
+import { CheckboxProps } from '../checkbox';
 export declare enum PickerModes {
     SINGLE = "SINGLE",
     MULTI = "MULTI"
@@ -147,6 +149,44 @@ type PickerExpandableOverlayProps = {
      */
     enableModalBlur?: boolean;
 };
+interface PickerSelectionStatusLabelData {
+    selectedCount: number;
+    areAllItemsSelected: boolean;
+}
+export type ButtonSelectionStatus = {
+    /**
+     * Select all element type
+     */
+    selectAllType?: 'button';
+    /**
+     * Button props
+     */
+    buttonProps?: ButtonProps;
+};
+export type CheckboxSelectionStatus = {
+    /**
+     * Select all element type
+     */
+    selectAllType?: 'checkbox';
+    /**
+     * Checkbox props
+     */
+    checkboxProps?: CheckboxProps;
+};
+export type PickerSelectionStatusProps = {
+    /**
+     * A function that generates a label based on the selected items' count and status
+     */
+    getLabel?: (data: PickerSelectionStatusLabelData) => string;
+    /**
+     * Custom container style
+     */
+    containerStyle?: StyleProp<ViewStyle>;
+    /**
+     * Control weather to show the label or not
+     */
+    showLabel?: boolean;
+} & (ButtonSelectionStatus | CheckboxSelectionStatus);
 export type PickerBaseProps = Omit<TextFieldProps, 'value' | 'onChange'> & PickerPropsDeprecation & PickerExpandableOverlayProps & PickerListProps & {
     /**
      * Use dialog instead of modal picker
@@ -193,6 +233,10 @@ export type PickerBaseProps = Omit<TextFieldProps, 'value' | 'onChange'> & Picke
      * Render custom top element
      */
     renderCustomTopElement?: (value?: PickerValue) => React.ReactElement;
+    /**
+     * Selection status bar props
+     */
+    selectionStatus?: PickerSelectionStatusProps;
     /**
      * Add onPress callback for when pressing the picker
      */
@@ -286,8 +330,11 @@ export interface PickerContextProps extends Pick<PickerProps, 'migrate' | 'value
     isMultiMode: boolean;
     onSelectedLayout: (event: any) => any;
     selectionLimit: PickerProps['selectionLimit'];
+    areAllItemsSelected: boolean;
+    selectedCount: number;
+    toggleAllItemsSelection?: (selectAll: boolean) => void;
 }
-export type PickerItemsListProps = Pick<PropsWithChildren<PickerProps>, 'topBarProps' | 'listProps' | 'renderHeader' | 'useSafeArea' | 'showLoader' | 'customLoaderElement' | 'renderCustomTopElement' | 'showSearch' | 'searchStyle' | 'searchPlaceholder' | 'onSearchChange' | 'renderCustomSearch' | 'children' | 'useWheelPicker' | 'useDialog' | 'mode' | 'testID'> & {
+export type PickerItemsListProps = Pick<PropsWithChildren<PickerProps>, 'topBarProps' | 'listProps' | 'renderHeader' | 'useSafeArea' | 'showLoader' | 'customLoaderElement' | 'renderCustomTopElement' | 'selectionStatus' | 'showSearch' | 'searchStyle' | 'searchPlaceholder' | 'onSearchChange' | 'renderCustomSearch' | 'children' | 'useWheelPicker' | 'useDialog' | 'mode' | 'testID'> & {
     items?: {
         value: any;
         label: any;

package/src/components/scrollBar/index.js

@@ -8,8 +8,8 @@ import { Colors } from "../../style";
 import { Constants, asBaseComponent, forwardRef } from "../../commons/new";
 import View from "../view";
 import Image from "../image";
+import Assets from "../../assets";
 const GRADIENT_WIDTH = 76;
-const defaultImage = () => require("./assets/gradientOverlay.png");
 
 /**
  * @description: Scrollable container with animated gradient overlay for horizontal scroll
@@ -17,7 +17,7 @@ const defaultImage = () => require("./assets/gradientOverlay.png");
  */
 
 class ScrollBar extends Component {
-  static displayName = 'ScrollBar';
+  static displayName = 'IGNORE';
   static defaultProps = {
     gradientWidth: GRADIENT_WIDTH,
     gradientMargins: 0,
@@ -175,7 +175,7 @@ class ScrollBar extends Component {
       right: !left ? gradientMargins : undefined,
       left: left ? gradientMargins : undefined
     }}>
-        <Image source={gradientImage || defaultImage()} style={{
+        <Image source={gradientImage || Assets.internal.images.gradientOverlay} style={{
         width: gradientWidth,
         height: heightToUse,
         tintColor: gradientColor,

package/src/components/sortableList/SortableList.api.json

@@ -45,14 +45,14 @@
   "snippet": [
     "function Example(props) {",
     "  const data = Array.from({length: 10}, (_, index) => {",
-    "    let text = \\`\\${index}\\`;",
+    "    let text = `${index}`;",
     "    if (index === 3) {",
     "      text = 'Locked item';",
     "    }",
     "  ",
     "    return {",
     "      text,",
-    "      id: \\`\\${index}\\`,",
+    "      id: `${index}`,",
     "      locked: index === 3",
     "    };",
     "  });",
@@ -78,11 +78,11 @@
     "  }, []);",
     "",
     "  const keyExtractor = useCallback((item: Item) => {",
-    "    return \\`\\${item.id}\\`;",
+    "    return `${item.id}`;",
     "  }, []);",
     "",
     "  return (",
-    "    <div>",
+    "    <View>",
     "      <SortableList",
     "        data={data$1}",
     "        flexMigration",
@@ -90,8 +90,8 @@
     "        renderItem={renderItem$3}",
     "        keyExtractor={keyExtractor$4}",
     "      />",
-    "    </div>",
-    "  );",
-    "}"
+    "    </View>",
+    "  )",
+    "};"
   ]
 }

package/src/components/stepper/index.js

@@ -6,17 +6,12 @@ import { asBaseComponent } from "../../commons/new";
 import View from "../view";
 import Text from "../text";
 import Button from "../button";
+import Assets from "../../assets";
 var ActionType = /*#__PURE__*/function (ActionType) {
   ActionType["MINUS"] = "minus";
   ActionType["PLUS"] = "plus";
   return ActionType;
 }(ActionType || {});
-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;
 /**
  * @description: A stepper component
@@ -150,8 +145,8 @@ class Stepper extends PureComponent {
     } = 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.internal.icons.minusSmall : small ? Assets.internal.icons.minusOutlineSmall : Assets.internal.icons.minusOutline;
+    const plusButton = isFloatingStepper ? Assets.internal.icons.plusSmall : small ? Assets.internal.icons.plusOutlineSmall : Assets.internal.icons.plusOutline;
     return <Button link color={isFloatingStepper ? Colors.$iconDefault : undefined} iconSource={actionType === ActionType.MINUS ? minusButton : plusButton} disabled={disabled || !allowStepChange} onPress={() => this.handleStepChange(actionType)} testID={actionType === ActionType.MINUS ? `${testID}.minusStep` : `${testID}.plusStep`} />;
   }
   render() {

package/src/components/tabController/apis/pageCarousel.api.json

@@ -7,11 +7,14 @@
   "extendsLink": ["https://reactnative.dev/docs/scrollview"],
   "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/TabControllerScreen/index.tsx",
   "images": [],
+  "props": [],
   "snippet": [
-    "<TabController.PageCarousel>",
-    "  {_.map(items, (item, key) => {",
-    "   return ($1);",
-    "  })}",
-    "</TabController.PageCarousel>"
+    "<TabController>",
+    "  <TabController.PageCarousel>",
+    "    {_.map(items, (item, key) => {",
+    "     return <TabController.TabPage index={key}/>;",
+    "    })}",
+    "  </TabController.PageCarousel>",
+    "</TabController>"
   ]
 }

package/src/components/textField/ClearButton.js

@@ -54,7 +54,7 @@ const ClearButton = ({
     onClear?.();
   };
   return <View reanimated style={style} testID={`${testID}.container`}>
-      <Button link iconSource={Assets.icons.xFlat} iconStyle={styles.clearIcon} onPress={clear} hitSlop={hitSlop} accessible={hasValue} accessibilityLabel={'clear'} testID={testID} />
+      <Button link iconSource={Assets.internal.icons.xFlat} iconStyle={styles.clearIcon} onPress={clear} hitSlop={hitSlop} accessible={hasValue} accessibilityLabel={'clear'} testID={testID} />
     </View>;
 };
 const styles = StyleSheet.create({

package/src/components/timeline/timeline.api.json

@@ -29,30 +29,18 @@
     }
   ],
   "snippet": [
-    "<Timeline ",
-    "  topLine={{",
-    "    state: Timeline.states.ERROR",
-    "  }$1}",
-    "  bottomLine={{",
-    "    type: Timeline.lineTypes.DASHED,",
-    "    color: Colors.orange40",
-    "  }$2}",
-    "  point={{",
-    "    type: Timeline.pointTypes.OUTLINE,",
-    "    color: Colors.orange40,",
-    "    icon: Assets.icons.demo.camera,",
-    "    anchorRef: alignToTitle ? titleRef : undefined",
-    "  }$3}",
+    "<Timeline",
+    "  topLine={{type: Timeline.lineTypes.DASHED}}",
+    "  bottomLine={{state: Timeline.states.SUCCESS}}",
+    "  point={{state: Timeline.states.SUCCESS}}",
     ">",
-    "    <View flex centerH paddingH-20>",
-    "      <Text text70 dark10 ref={titleRef}>",
-    "        {title}",
-    "      </Text>",
-    "      <Text dark40>",
-    "        {description}",
-    "      </Text>",
-    "    </View>",
-    "</Timeline>"
+    "   <View padding-20 bg-grey60 br30>",
+    "     <Text text70BO>Title</Text>",
+    "     <View marginT-5 padding-8 bg-white br30>",
+    "       <Text>Description</Text>",
+    "     </View>",
+    "   </View>",
+    " </Timeline>"
   ],
   "docs": {
     "hero": {
@@ -138,29 +126,7 @@
                 "title": "Current",
                 "content": [
                   {
-                    "props": {
-                      "state": "current",
-                      "point": {
-                        "type": {
-                          "type": "bullet"
-                        }
-                      },
-                      "bottomLine": {
-                        "type": {
-                          "type": "solid"
-                        }
-                      }
-                    }
-                  },
-                  {
-                    "props": {
-                      "point": {
-                        "type": {
-                          "type": "bullet",
-                          "color": "#116DFF"
-                        }
-                      }
-                    }
+                    "snippet": "<Timeline topLine={{state: Timeline.states.CURRENT}} bottomLine={{state: Timeline.states.CURRENT}} point={{state: Timeline.states.CURRENT}}><View style={{height: 88}}/></Timeline>"
                   }
                 ],
                 "description": "state: current"
@@ -169,19 +135,7 @@
                 "title": "Next",
                 "content": [
                   {
-                    "props": {
-                      "state": "next",
-                      "point": {
-                        "type": {
-                          "type": "bullet"
-                        }
-                      },
-                      "bottomLine": {
-                        "type": {
-                          "type": "solid"
-                        }
-                      }
-                    }
+                    "snippet": "<Timeline topLine={{state: Timeline.states.NEXT}} bottomLine={{state: Timeline.states.NEXT}} point={{state: Timeline.states.NEXT, type: Timeline.pointTypes.CIRCLE}}><View style={{height: 88}}/></Timeline>"
                   }
                 ],
                 "description": "state: next"
@@ -190,19 +144,7 @@
                 "title": "Error",
                 "content": [
                   {
-                    "props": {
-                      "state": "error",
-                      "point": {
-                        "type": {
-                          "type": "bullet"
-                        }
-                      },
-                      "bottomLine": {
-                        "type": {
-                          "type": "solid"
-                        }
-                      }
-                    }
+                    "snippet": "<Timeline topLine={{state: Timeline.states.ERROR}} bottomLine={{state: Timeline.states.ERROR}} point={{state: Timeline.states.ERROR}}><View style={{height: 88}}/></Timeline>"
                   }
                 ],
                 "description": "state: error"
@@ -211,19 +153,7 @@
                 "title": "Success",
                 "content": [
                   {
-                    "props": {
-                      "state": "success",
-                      "point": {
-                        "type": {
-                          "type": "bullet"
-                        }
-                      },
-                      "bottomLine": {
-                        "type": {
-                          "type": "solid"
-                        }
-                      }
-                    }
+                    "snippet": "<Timeline topLine={{state: Timeline.states.SUCCESS}} bottomLine={{state: Timeline.states.SUCCESS}} point={{state: Timeline.states.SUCCESS}}><View style={{height: 88}}/></Timeline>"
                   }
                 ],
                 "description": "state: success"
@@ -238,15 +168,30 @@
             "items": [
               {
                 "title": "Bullet",
-                "description": "type: bullet"
+                "description": "type: bullet",
+                "content": [
+                  {
+                    "snippet": "<Timeline point={{type: Timeline.pointTypes.BULLET}}><View style={{height: 88}}/></Timeline>"
+                  }
+                ]
               },
               {
                 "title": "Circle",
-                "description": "type: circle"
+                "description": "type: circle",
+                "content": [
+                  {
+                    "snippet": "<Timeline point={{state: Timeline.states.NEXT, type: Timeline.pointTypes.CIRCLE}}><View style={{height: 88}}/></Timeline>"
+                  }
+                ]
               },
               {
                 "title": "Outline",
-                "description": "type: outline"
+                "description": "type: outline",
+                "content": [
+                  {
+                    "snippet": "<Timeline point={{type: Timeline.pointTypes.OUTLINE}}><View style={{height: 88}}/></Timeline>"
+                  }
+                ]
               }
             ],
             "title": "Point",
@@ -260,14 +205,7 @@
                 "title": "Text",
                 "content": [
                   {
-                    "props": {
-                      "state": "current",
-                      "bottomLine": {
-                        "type": {
-                          "type": "solid"
-                        }
-                      }
-                    }
+                    "snippet": "<Timeline point={{label: '1'}}><View style={{height: 88}}/></Timeline>"
                   }
                 ],
                 "description": "text: “1”"
@@ -276,21 +214,19 @@
                 "title": "Icon",
                 "content": [
                   {
-                    "props": {
-                      "state": "current",
-                      "bottomLine": {
-                        "type": {
-                          "type": "dashed"
-                        }
-                      }
-                    }
+                    "snippet": "<Timeline point={{state: Timeline.states.SUCCESS, icon: Assets.internal.icons.checkSmall}}><View style={{height: 88}}/></Timeline>"
                   }
                 ],
-                "description": "icon: Assets.icons.general.checkmarkSmall"
+                "description": "icon: Assets.internal.icons.general.checkmarkSmall"
               },
               {
                 "title": "Icon without background",
-                "description": "icon: Assets.icons.general.favorite, removeIconBackground: true"
+                "content": [
+                  {
+                    "snippet": "<Timeline point={{state: Timeline.states.SUCCESS, icon: Assets.internal.icons.search, removeIconBackground: true}}><View style={{height: 88}}/></Timeline>"
+                  }
+                ],
+                "description": "icon: Assets.internal.icons.general.favorite, removeIconBackground: true"
               }
             ],
             "name": "Point Accessories"
@@ -301,10 +237,20 @@
             "items": [
               {
                 "title": "Solid",
+                "content": [
+                  {
+                    "snippet": "<Timeline topLine={{state: Timeline.states.CURRENT}} point={{removeIconBackground: true}}><View style={{height: 88}}/></Timeline>"
+                  }
+                ],
                 "description": "type: solid"
               },
               {
                 "title": "Dashed",
+                "content": [
+                  {
+                    "snippet": "<Timeline topLine={{state: Timeline.states.CURRENT, type: Timeline.lineTypes.DASHED}} point={{removeIconBackground: true}}><View style={{height: 88}}/></Timeline>"
+                  }
+                ],
                 "description": "type: dashed"
               }
             ],
@@ -317,6 +263,11 @@
             "items": [
               {
                 "title": "Entry",
+                "content": [
+                  {
+                    "snippet": "<Timeline topLine={{state: Timeline.states.NEXT, entry: true}} bottomLine={{state: Timeline.states.NEXT, entry: true}} point={{removeIconBackground: true}}><View style={{height: 88}}/></Timeline>"
+                  }
+                ],
                 "description": "entry: true"
               }
             ],

package/src/components/toast/index.js

@@ -239,7 +239,7 @@ export default class Toast extends PureBaseComponent {
         <Button
           link
           iconStyle={{tintColor: textColor}}
-          iconSource={Assets.icons.x}
+          iconSource={Assets.internal.icons.x}
           onPress={this.onDismiss}
           paddingR-20
           accessibilityLabel={'dismiss'}

package/src/components/wizard/WizardStates.js

@@ -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";
 export const StatesConfig = {
   enabled: {
     color: Colors.$textNeutralHeavy,
@@ -14,7 +13,7 @@ export const StatesConfig = {
   error: {
     color: Colors.$iconDangerLight,
     circleColor: Colors.$outlineDanger,
-    icon: exclamationSmall,
+    icon: Assets.internal.icons.exclamationSmall,
     enabled: true,
     accessibilityInfo: 'Validation Error'
   },
@@ -27,7 +26,7 @@ export const StatesConfig = {
   completed: {
     color: Colors.$iconNeutral,
     circleColor: Colors.$outlineDisabled,
-    icon: checkMarkSmall,
+    icon: Assets.internal.icons.checkMarkSmall,
     enabled: true,
     accessibilityInfo: 'Completed'
   },