@hero-design/rn 7.23.0 → 7.24.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "7.23.0",
+  "version": "7.24.0",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -20,7 +20,7 @@
   "dependencies": {
     "@emotion/native": "^11.9.3",
     "@emotion/react": "^11.9.3",
-    "@hero-design/colors": "7.23.0",
+    "@hero-design/colors": "7.24.0",
     "date-fns": "^2.16.1",
     "events": "^3.2.0",
     "hero-editor": "^1.9.12"
@@ -30,6 +30,7 @@
     "@react-native-community/slider": "4.1.12",
     "react": "17.0.2",
     "react-native": "0.65.1",
+    "react-native-gesture-handler": "~2.1.0",
     "react-native-pager-view": "^5.4.25",
     "react-native-safe-area-context": "^4.2.5",
     "react-native-vector-icons": "^9.1.0",
@@ -57,10 +58,11 @@
     "@types/react-native": "^0.67.7",
     "@types/react-native-vector-icons": "^6.4.10",
     "babel-plugin-inline-import": "^3.0.0",
-    "eslint-config-hd": "7.23.0",
+    "eslint-config-hd": "7.24.0",
     "jest": "^27.3.1",
     "react": "17.0.2",
     "react-native": "0.65.1",
+    "react-native-gesture-handler": "~2.1.0",
     "react-native-pager-view": "^5.4.25",
     "react-native-safe-area-context": "^4.2.5",
     "react-native-vector-icons": "^9.1.0",
@@ -70,7 +72,7 @@
     "rollup-plugin-copy": "^3.4.0",
     "rollup-plugin-flow": "^1.1.1",
     "ts-jest": "^27.0.7",
-    "prettier-config-hd": "7.23.0"
+    "prettier-config-hd": "7.24.0"
   },
   "prettier": "prettier-config-hd"
 }

package/rollup.config.js

@@ -29,6 +29,7 @@ export default {
     'react-native-safe-area-context',
     '@react-native-community/datetimepicker',
     '@react-native-community/slider',
+    'react-native-gesture-handler',
     'react-native-webview',
     'react-native-pager-view',
     'react-native-vector-icons',

package/src/components/DatePicker/__tests__/__snapshots__/DatePickerAndroid.spec.tsx.snap

@@ -61,6 +61,7 @@ exports[`DatePickerAndroid renders correctly 1`] = `
               undefined,
             ]
           }
+          themeFocused={false}
           themeVariant="filled"
         />
         <View

package/src/components/DatePicker/__tests__/__snapshots__/DatePickerIOS.spec.tsx.snap

@@ -61,6 +61,7 @@ exports[`DatePickerIOS renders correctly 1`] = `
               undefined,
             ]
           }
+          themeFocused={false}
           themeVariant="filled"
         />
         <View

package/src/components/Empty/index.tsx

@@ -24,8 +24,7 @@ interface EmptyProps {
    */
   description?: string;
   /**
-   * Empty's variant
-   * 'dark' if rendered on a dark background and 'light' otherwise
+   * Empty's variant.
    */
   variant?: 'light' | 'dark';
   /**

package/src/components/Icon/HeroIcon/glyphMap.json

@@ -0,0 +1 @@
+{"activate":50000,"add-emoji":50001,"add-person":50002,"adjustment":50003,"alignment":50004,"archive":50005,"bank":50006,"bell":50007,"billing":50008,"bookmark":50009,"box-check":50010,"box":50011,"buildings":50012,"cake":50013,"calendar-clock":50014,"calendar":50015,"candy-box-menu":50016,"carat-down-small":50017,"carat-down":50018,"carat-left":50019,"carat-right":50020,"carat-up":50021,"circle-add":50022,"circle-cancel":50023,"circle-check":50024,"circle-down":50025,"circle-info":50026,"circle-left":50027,"circle-ok":50028,"circle-pencil":50029,"circle-question":50030,"circle-remove":50031,"circle-right":50032,"circle-up":50033,"circle-warning":50034,"clock-3":50035,"clock":50036,"cloud-download":50037,"cloud-upload":50038,"cog":50039,"coin":50040,"contacts":50041,"credit-card":50042,"diamond":50043,"direction-arrows":50044,"directory":50045,"document":50046,"dollar-coin-shine":50047,"double-buildings":50048,"edit-template":50049,"envelope":50050,"expense":50051,"eye-circle":50052,"eye-invisible":50053,"eye":50054,"face-meh":50055,"face-sad":50056,"face-smiley":50057,"feed":50058,"feedbacks":50059,"file-certified":50060,"file-clone":50061,"file-copy":50062,"file-csv":50063,"file-dispose":50064,"file-doc":50065,"file-excel":50066,"file-export":50067,"file-lock":50068,"file-pdf":50069,"file-powerpoint":50070,"file-search":50071,"file-secured":50072,"file-sheets":50073,"file-slide":50074,"file-verified":50075,"file-word":50076,"file":50077,"folder-user":50078,"folder":50079,"format-bold":50080,"format-heading1":50081,"format-heading2":50082,"format-italic":50083,"format-list-bulleted":50084,"format-list-numbered":50085,"format-underlined":50086,"funnel-filter":50087,"global-dollar":50088,"globe":50089,"graduation-cap":50090,"graph":50091,"happy-sun":50092,"health-bag":50093,"heart":50094,"home":50095,"image":50096,"import":50097,"incident-siren":50098,"instapay":50099,"list":50100,"loading-2":50101,"loading":50102,"location":50103,"lock":50104,"looks-one":50105,"looks-two":50106,"mandatory":50107,"media-content":50108,"menu":50109,"moneybag":50110,"moon":50111,"multiple-stars":50112,"multiple-users":50113,"node":50114,"open-folder":50115,"paperclip":50116,"payment-summary":50117,"pencil":50118,"phone":50119,"piggy-bank":50120,"plane":50121,"play-circle":50122,"print":50123,"raising-hands":50124,"rectangle-mandatory":50125,"reply-arrow":50126,"reply":50127,"reschedule":50128,"rostering":50129,"save":50130,"schedule-send":50131,"schedule":50132,"search-person":50133,"send":50134,"speaker":50135,"star-award":50136,"star-badge":50137,"star-medal":50138,"star":50139,"steps-circle":50140,"stopwatch":50141,"suitcase":50142,"survey":50143,"swag":50144,"switch":50145,"tag":50146,"target":50147,"teams":50148,"timesheet":50149,"touch-id":50150,"trash-bin":50151,"unlock":50152,"user":50153,"video-1":50154,"video-2":50155,"warning":50156,"activate-outlined":50157,"add-person-outlined":50158,"add-section-outlined":50159,"add-time-outlined":50160,"add":50161,"adjustment-outlined":50162,"alignment-2-outlined":50163,"alignment-outlined":50164,"all-caps":50165,"arrow-down":50166,"arrow-left":50167,"arrow-right":50168,"arrow-up":50169,"at-sign":50170,"bell-outlined":50171,"billing-outlined":50172,"body-outlined":50173,"bold":50174,"bookmark-outlined":50175,"box-check-outlined":50176,"box-outlined":50177,"bullet-points":50178,"cake-outlined":50179,"calendar-dates-outlined":50180,"calendar-star-outlined":50181,"camera-outlined":50182,"cancel":50183,"checkmark":50184,"circle-add-outlined":50185,"circle-cancel-outlined":50186,"circle-down-outlined":50187,"circle-info-outlined":50188,"circle-left-outlined":50189,"circle-ok-outlined":50190,"circle-question-outlined":50191,"circle-remove-outlined":50192,"circle-right-outlined":50193,"circle-up-outlined":50194,"circle-warning-outlined":50195,"clock-2-outlined":50196,"clock-outlined":50197,"cog-outlined":50198,"coin-outlined":50199,"comment-outlined":50200,"contacts-outlined":50201,"credit-card-outlined":50202,"direction-arrows-outlined":50203,"directory-outlined":50204,"document-outlined":50205,"dollar-coin-shine-outlined":50206,"dollar-sign":50207,"double-buildings-outlined":50208,"double-left-arrows":50209,"double-right-arrows":50210,"download-outlined":50211,"edit-template-outlined":50212,"email-outlined":50213,"enter-arrow":50214,"envelope-outlined":50215,"expense-outlined":50216,"external-link":50217,"eye-invisible-outlined":50218,"eye-outlined":50219,"face-id":50220,"face-meh-outlined":50221,"face-open-smiley-outlined":50222,"face-sad-outlined":50223,"face-smiley-outlined":50224,"feed-outlined":50225,"file-certified-outlined":50226,"file-clone-outlined":50227,"file-copy-outlined":50228,"file-dispose-outlined":50229,"file-download-outlined":50230,"file-export-outlined":50231,"file-lock-outlined":50232,"file-outlined":50233,"file-search-outlined":50234,"file-secured-outlined":50235,"file-verified-outlined":50236,"filter-outlined":50237,"folder-outlined":50238,"folder-user-outlined":50239,"funnel-filter-outline":50240,"graph-outlined":50241,"happy-sun-outlined":50242,"health-bag-outlined":50243,"heart-outlined":50244,"home-outlined":50245,"image-outlined":50246,"import-outlined":50247,"instapay-outlined":50248,"italic":50249,"link-1":50250,"link-2":50251,"list-outlined":50252,"location-outlined":50253,"lock-outlined":50254,"locked-file-outlined":50255,"log-out":50256,"media-content-outlined":50257,"menu-close":50258,"menu-expand":50259,"menu-fold-outlined":50260,"menu-unfold-outlined":50261,"moneybag-outlined":50262,"moon-outlined":50263,"more-horizontal":50264,"more-vertical":50265,"multiple-folders-outlined":50266,"multiple-users-outlined":50267,"node-outlined":50268,"number-points":50269,"number":50270,"payment-summary-outlined":50271,"payslip-outlined":50272,"pencil-outlined":50273,"percentage":50274,"phone-outlined":50275,"piggy-bank-outlined":50276,"plane-outlined":50277,"play-circle-outlined":50278,"print-outlined":50279,"qr-code-outlined":50280,"re-assign":50281,"redeem":50282,"refresh":50283,"remove":50284,"reply-outlined":50285,"restart":50286,"return-arrow":50287,"rostering-outlined":50288,"save-outlined":50289,"schedule-outlined":50290,"search-outlined":50291,"send-outlined":50292,"share-1":50293,"share-2":50294,"single-down-arrow":50295,"single-left-arrow":50296,"single-right-arrow":50297,"single-up-arrow":50298,"speaker-outlined":50299,"star-outlined":50300,"stopwatch-outlined":50301,"strikethrough":50302,"suitcase-outlined":50303,"survey-outlined":50304,"switch-outlined":50305,"sync":50306,"target-outlined":50307,"timesheet-outlined":50308,"transfer":50309,"trash-bin-outlined":50310,"trash-outlined":50311,"unavailable":50312,"underline":50313,"unlock-outlined":50314,"upload-outlined":50315,"user-circle-outlined":50316,"user-outlined":50317,"user-rectangle-outlined":50318,"video-1-outlined":50319,"video-2-outlined":50320,"wallet-outlined":50321}

package/src/components/Icon/HeroIcon/index.tsx

@@ -1,6 +1,6 @@
-import { createIconSetFromIcoMoon } from 'react-native-vector-icons';
+import { createIconSet } from 'react-native-vector-icons';
 import styled from '@emotion/native';
-import heroIconConfig from './selection.json';
+import glyphMap from './glyphMap.json';
 
 type ThemeSize = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
 type ThemeIntent =
@@ -14,11 +14,7 @@ type ThemeIntent =
   | 'disabled-text'
   | 'text-inverted';
 
-const HeroIcon = createIconSetFromIcoMoon(
-  heroIconConfig,
-  'hero-icons',
-  'hero-icons.ttf'
-);
+const HeroIcon = createIconSet(glyphMap, 'hero-icons', 'hero-icons.ttf');
 
 const COLOR_INTENTS = {
   text: 'text',

package/src/components/Icon/IconList.ts

@@ -1,3 +1,4 @@
+// 🔴 DO NOT EDIT — This file is generated automatically.
 const IconList = [
   'activate',
   'add-emoji',
@@ -34,8 +35,8 @@ const IconList = [
   'circle-right',
   'circle-up',
   'circle-warning',
-  'clock',
   'clock-3',
+  'clock',
   'cloud-download',
   'cloud-upload',
   'cog',
@@ -77,7 +78,6 @@ const IconList = [
   'file-verified',
   'file-word',
   'file',
-  'filter-outlined',
   'folder-user',
   'folder',
   'format-bold',
@@ -101,8 +101,8 @@ const IconList = [
   'incident-siren',
   'instapay',
   'list',
-  'loading',
   'loading-2',
+  'loading',
   'location',
   'lock',
   'looks-one',
@@ -125,8 +125,9 @@ const IconList = [
   'play-circle',
   'print',
   'raising-hands',
-  'reply',
+  'rectangle-mandatory',
   'reply-arrow',
+  'reply',
   'reschedule',
   'rostering',
   'save',
@@ -155,6 +156,7 @@ const IconList = [
   'user',
   'video-1',
   'video-2',
+  'warning',
   'activate-outlined',
   'add-person-outlined',
   'add-section-outlined',
@@ -235,6 +237,7 @@ const IconList = [
   'file-search-outlined',
   'file-secured-outlined',
   'file-verified-outlined',
+  'filter-outlined',
   'folder-outlined',
   'folder-user-outlined',
   'funnel-filter-outline',
@@ -308,6 +311,7 @@ const IconList = [
   'timesheet-outlined',
   'transfer',
   'trash-bin-outlined',
+  'trash-outlined',
   'unavailable',
   'underline',
   'unlock-outlined',
@@ -318,7 +322,6 @@ const IconList = [
   'video-1-outlined',
   'video-2-outlined',
   'wallet-outlined',
-  'warning',
 ] as const;
 
 export default IconList;

package/src/components/Icon/index.tsx

@@ -68,4 +68,5 @@ const Icon = ({
     />
   );
 
+Icon.List = IconList;
 export default Icon;

package/src/components/RichTextEditor/RichTextEditor.tsx

@@ -139,9 +139,6 @@ const RichTextEditor: ComponentType<RichTextEditorProps> = ({
     if (error) {
       return 'error';
     }
-    if (isFocused) {
-      return 'focused';
-    }
     if (isEmptyValue) {
       return 'filled';
     }
@@ -312,7 +309,7 @@ const RichTextEditor: ComponentType<RichTextEditorProps> = ({
   return (
     <StyledContainer testID={testID}>
       <StyledTextInputContainer>
-        <StyledBorderBackDrop themeVariant={variant} />
+        <StyledBorderBackDrop themeVariant={variant} themeFocused={isFocused} />
         {(isFocused || (label && !isEmptyValue)) && (
           <StyledLabelContainer pointerEvents="none">
             {required && (

package/src/components/RichTextEditor/__tests__/__snapshots__/RichTextEditor.spec.tsx.snap

@@ -40,6 +40,7 @@ exports[`RichTextEditor onMessage recevied event editor-layout should update hei
           undefined,
         ]
       }
+      themeFocused={false}
       themeVariant="error"
     />
     <View
@@ -300,6 +301,7 @@ exports[`RichTextEditor should render correctly 1`] = `
           undefined,
         ]
       }
+      themeFocused={false}
       themeVariant="error"
     />
     <View

package/src/components/Select/MultiSelect/__tests__/__snapshots__/OptionList.spec.tsx.snap

@@ -727,12 +727,13 @@ exports[`OptionList render isLoading correctly 1`] = `
                         "backgroundColor": "#001f23",
                         "borderRadius": 999,
                         "height": 16,
-                        "opacity": 1,
+                        "opacity": 0.9,
                         "width": 16,
                       },
                       Object {},
                     ]
                   }
+                  themeIntent="primary"
                   themePosition="topLeft"
                   themeSize="medium"
                 />
@@ -746,12 +747,13 @@ exports[`OptionList render isLoading correctly 1`] = `
                         "borderRadius": 999,
                         "height": 16,
                         "marginLeft": 8,
-                        "opacity": 0.75,
+                        "opacity": 0.675,
                         "width": 16,
                       },
                       Object {},
                     ]
                   }
+                  themeIntent="primary"
                   themePosition="topRight"
                   themeSize="medium"
                 />
@@ -780,12 +782,13 @@ exports[`OptionList render isLoading correctly 1`] = `
                         "backgroundColor": "#001f23",
                         "borderRadius": 999,
                         "height": 16,
-                        "opacity": 0.5,
+                        "opacity": 0.45,
                         "width": 16,
                       },
                       Object {},
                     ]
                   }
+                  themeIntent="primary"
                   themePosition="bottomLeft"
                   themeSize="medium"
                 />
@@ -799,12 +802,13 @@ exports[`OptionList render isLoading correctly 1`] = `
                         "borderRadius": 999,
                         "height": 16,
                         "marginLeft": 8,
-                        "opacity": 0.25,
+                        "opacity": 0.225,
                         "width": 16,
                       },
                       Object {},
                     ]
                   }
+                  themeIntent="primary"
                   themePosition="bottomRight"
                   themeSize="medium"
                 />

package/src/components/Select/MultiSelect/__tests__/__snapshots__/index.spec.tsx.snap

@@ -64,6 +64,7 @@ Array [
                   undefined,
                 ]
               }
+              themeFocused={false}
               themeVariant="default"
             />
             <View
@@ -1413,6 +1414,7 @@ Array [
                   undefined,
                 ]
               }
+              themeFocused={false}
               themeVariant="filled"
             />
             <View
@@ -2958,6 +2960,7 @@ Array [
                   undefined,
                 ]
               }
+              themeFocused={false}
               themeVariant="filled"
             />
             <View
@@ -4498,6 +4501,7 @@ Array [
                   undefined,
                 ]
               }
+              themeFocused={false}
               themeVariant="readonly"
             />
             <View
@@ -6057,6 +6061,7 @@ Array [
                   undefined,
                 ]
               }
+              themeFocused={false}
               themeVariant="filled"
             />
             <View

package/src/components/Select/SingleSelect/__tests__/__snapshots__/OptionList.spec.tsx.snap

@@ -702,12 +702,13 @@ exports[`OptionList render isLoading correctly 1`] = `
                         "backgroundColor": "#001f23",
                         "borderRadius": 999,
                         "height": 16,
-                        "opacity": 1,
+                        "opacity": 0.9,
                         "width": 16,
                       },
                       Object {},
                     ]
                   }
+                  themeIntent="primary"
                   themePosition="topLeft"
                   themeSize="medium"
                 />
@@ -721,12 +722,13 @@ exports[`OptionList render isLoading correctly 1`] = `
                         "borderRadius": 999,
                         "height": 16,
                         "marginLeft": 8,
-                        "opacity": 0.75,
+                        "opacity": 0.675,
                         "width": 16,
                       },
                       Object {},
                     ]
                   }
+                  themeIntent="primary"
                   themePosition="topRight"
                   themeSize="medium"
                 />
@@ -755,12 +757,13 @@ exports[`OptionList render isLoading correctly 1`] = `
                         "backgroundColor": "#001f23",
                         "borderRadius": 999,
                         "height": 16,
-                        "opacity": 0.5,
+                        "opacity": 0.45,
                         "width": 16,
                       },
                       Object {},
                     ]
                   }
+                  themeIntent="primary"
                   themePosition="bottomLeft"
                   themeSize="medium"
                 />
@@ -774,12 +777,13 @@ exports[`OptionList render isLoading correctly 1`] = `
                         "borderRadius": 999,
                         "height": 16,
                         "marginLeft": 8,
-                        "opacity": 0.25,
+                        "opacity": 0.225,
                         "width": 16,
                       },
                       Object {},
                     ]
                   }
+                  themeIntent="primary"
                   themePosition="bottomRight"
                   themeSize="medium"
                 />

package/src/components/Select/SingleSelect/__tests__/__snapshots__/index.spec.tsx.snap

@@ -64,6 +64,7 @@ Array [
                   undefined,
                 ]
               }
+              themeFocused={false}
               themeVariant="default"
             />
             <View
@@ -1341,6 +1342,7 @@ Array [
                   undefined,
                 ]
               }
+              themeFocused={false}
               themeVariant="filled"
             />
             <View
@@ -2763,6 +2765,7 @@ Array [
                   undefined,
                 ]
               }
+              themeFocused={false}
               themeVariant="filled"
             />
             <View
@@ -4182,6 +4185,7 @@ Array [
                   undefined,
                 ]
               }
+              themeFocused={false}
               themeVariant="readonly"
             />
             <View
@@ -5618,6 +5622,7 @@ Array [
                   undefined,
                 ]
               }
+              themeFocused={false}
               themeVariant="filled"
             />
             <View

package/src/components/Spinner/AnimatedSpinner.tsx

@@ -7,7 +7,13 @@ const AnimatedRow = Animated.createAnimatedComponent(StyledSpinnerRow);
 
 const AnimatedDot = Animated.createAnimatedComponent(StyledSpinnerDot);
 
-const AnimatedSpinner = ({ size = 'medium' }: { size: 'small' | 'medium' }) => {
+const AnimatedSpinner = ({
+  size,
+  intent,
+}: {
+  size: 'small' | 'medium';
+  intent: 'primary' | 'inverted';
+}) => {
   const rotateAnimation = useRef<Animated.Value>(new Animated.Value(0));
 
   useEffect(() => {
@@ -32,6 +38,15 @@ const AnimatedSpinner = ({ size = 'medium' }: { size: 'small' | 'medium' }) => {
     outputRange: ['0deg', '360deg'],
   });
 
+  const rowProps = {
+    themeSize: size,
+  };
+
+  const dotProps = {
+    themeSize: size,
+    themeIntent: intent,
+  };
+
   return (
     <Animated.View
       style={StyleSheet.flatten([
@@ -40,13 +55,13 @@ const AnimatedSpinner = ({ size = 'medium' }: { size: 'small' | 'medium' }) => {
         },
       ])}
     >
-      <AnimatedRow themePosition="top" themeSize={size}>
-        <AnimatedDot themePosition="topLeft" themeSize={size} />
-        <AnimatedDot themePosition="topRight" themeSize={size} />
+      <AnimatedRow themePosition="top" {...rowProps}>
+        <AnimatedDot themePosition="topLeft" {...dotProps} />
+        <AnimatedDot themePosition="topRight" {...dotProps} />
       </AnimatedRow>
-      <AnimatedRow themePosition="bottom" themeSize={size}>
-        <AnimatedDot themePosition="bottomLeft" themeSize={size} />
-        <AnimatedDot themePosition="bottomRight" themeSize={size} />
+      <AnimatedRow themePosition="bottom" {...rowProps}>
+        <AnimatedDot themePosition="bottomLeft" {...dotProps} />
+        <AnimatedDot themePosition="bottomRight" {...dotProps} />
       </AnimatedRow>
     </Animated.View>
   );

package/src/components/Spinner/StyledSpinner.tsx

@@ -25,30 +25,35 @@ const StyledSpinnerRow = styled(View)<{
 const StyledSpinnerDot = styled(View)<{
   themePosition: 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight';
   themeSize: 'small' | 'medium';
-}>(({ themePosition, themeSize = 'medium', theme }) => {
+  themeIntent: 'primary' | 'inverted';
+}>(({ themePosition, themeSize, themeIntent, theme }) => {
   const themeStyling = () => {
+    const backgroundColor =
+      theme.__hd__.spinner.colors.dot[themeIntent];
+    const dotPadding = theme.__hd__.spinner.space.spinnerDotPadding[themeSize];
+
     switch (themePosition) {
       case 'topLeft':
         return {
-          backgroundColor: theme.__hd__.spinner.colors.dot,
-          opacity: 1,
+          backgroundColor,
+          opacity: 0.9,
         };
       case 'topRight':
         return {
-          marginLeft: theme.__hd__.spinner.space.spinnerDotPadding[themeSize],
-          backgroundColor: theme.__hd__.spinner.colors.dot,
-          opacity: 0.75,
+          marginLeft: dotPadding,
+          backgroundColor,
+          opacity: 0.675,
         };
       case 'bottomLeft':
         return {
-          backgroundColor: theme.__hd__.spinner.colors.dot,
-          opacity: 0.5,
+          backgroundColor,
+          opacity: 0.45,
         };
       case 'bottomRight':
         return {
-          marginLeft: theme.__hd__.spinner.space.spinnerDotPadding[themeSize],
-          backgroundColor: theme.__hd__.spinner.colors.dot,
-          opacity: 0.25,
+          marginLeft: dotPadding,
+          backgroundColor,
+          opacity: 0.225,
         };
     }
   };

package/src/components/Spinner/__tests__/AnimatedSpinner.spec.tsx

@@ -4,7 +4,9 @@ import { AnimatedSpinner } from '../AnimatedSpinner';
 
 describe('AnimatedSpinner', () => {
   it('renders correctly', () => {
-    const { toJSON } = renderWithTheme(<AnimatedSpinner size="medium" />);
+    const { toJSON } = renderWithTheme(
+      <AnimatedSpinner size="medium" intent="primary" />
+    );
 
     expect(toJSON()).toMatchSnapshot();
   });

package/src/components/Spinner/__tests__/StyledSpinner.spec.tsx

@@ -8,25 +8,24 @@ import {
 } from '../StyledSpinner';
 
 describe('StyledSpinnerContainer', () => {
-  it('renders correctly in small size', () => {
-    const { toJSON } = renderWithTheme(
-      <StyledSpinnerContainer>
-        <AnimatedSpinner size="small" />
-      </StyledSpinnerContainer>
-    );
-
-    expect(toJSON()).toMatchSnapshot();
-  });
-
-  it('renders correctly in medium size', () => {
-    const { toJSON } = renderWithTheme(
-      <StyledSpinnerContainer>
-        <AnimatedSpinner size="medium" />
-      </StyledSpinnerContainer>
-    );
+  it.each`
+    intent        | size
+    ${'primary'}  | ${'small'}
+    ${'inverted'} | ${'small'}
+    ${'primary'}  | ${'medium'}
+    ${'inverted'} | ${'medium'}
+  `(
+    'renders correctly when intent is $themeIntent, and size is $themeSize',
+    ({ intent, size }) => {
+      const { toJSON } = renderWithTheme(
+        <StyledSpinnerContainer>
+          <AnimatedSpinner size={size} intent={intent} />
+        </StyledSpinnerContainer>
+      );
 
-    expect(toJSON()).toMatchSnapshot();
-  });
+      expect(toJSON()).toMatchSnapshot();
+    }
+  );
 });
 
 describe('StyledSpinnerRow', () => {
@@ -48,22 +47,34 @@ describe('StyledSpinnerRow', () => {
   );
 });
 
-describe('StyledSpinnerText', () => {
+describe('StyledSpinnerDot', () => {
   it.each`
-    themePosition    | themeSize
-    ${'topLeft'}     | ${'small'}
-    ${'topRight'}    | ${'small'}
-    ${'bottomLeft'}  | ${'small'}
-    ${'bottomRight'} | ${'small'}
-    ${'topLeft'}     | ${'medium'}
-    ${'topRight'}    | ${'medium'}
-    ${'bottomLeft'}  | ${'medium'}
-    ${'bottomRight'} | ${'medium'}
+    themePosition    | themeSize   | themeIntent
+    ${'topLeft'}     | ${'small'}  | ${'primary'}
+    ${'topRight'}    | ${'small'}  | ${'primary'}
+    ${'bottomLeft'}  | ${'small'}  | ${'primary'}
+    ${'bottomRight'} | ${'small'}  | ${'primary'}
+    ${'topLeft'}     | ${'medium'} | ${'primary'}
+    ${'topRight'}    | ${'medium'} | ${'primary'}
+    ${'bottomLeft'}  | ${'medium'} | ${'primary'}
+    ${'bottomRight'} | ${'medium'} | ${'primary'}
+    ${'topLeft'}     | ${'small'}  | ${'inverted'}
+    ${'topRight'}    | ${'small'}  | ${'inverted'}
+    ${'bottomLeft'}  | ${'small'}  | ${'inverted'}
+    ${'bottomRight'} | ${'small'}  | ${'inverted'}
+    ${'topLeft'}     | ${'medium'} | ${'inverted'}
+    ${'topRight'}    | ${'medium'} | ${'inverted'}
+    ${'bottomLeft'}  | ${'medium'} | ${'inverted'}
+    ${'bottomRight'} | ${'medium'} | ${'inverted'}
   `(
-    'renders correctly when position is $themePosition, size is $themeSize',
-    ({ themePosition, themeSize }) => {
+    'renders correctly when position is $themePosition, size is $themeSize, intent is $themeIntent',
+    ({ themePosition, themeSize, themeIntent }) => {
       const { toJSON } = renderWithTheme(
-        <StyledSpinnerDot themePosition={themePosition} themeSize={themeSize} />
+        <StyledSpinnerDot
+          themePosition={themePosition}
+          themeSize={themeSize}
+          themeIntent={themeIntent}
+        />
       );
 
       expect(toJSON()).toMatchSnapshot();