@telus-uds/components-base 0.0.2-prerelease.7 → 1.0.1

package/__fixtures__/testTheme.js

@@ -1,22 +1,24 @@
-import { appearances } from '@telus-uds/system-themes/schema'
+import { appearances } from '@telus-uds/system-theme-tokens'
+import systemThemeTokensPackage from '@telus-uds/system-theme-tokens/package.json'
 
 // This is a dev-only file so we don't need to make @telus-uds/palette-allium a dependency.
-// eslint-disable-next-line import/no-extraneous-dependencies
-const chevronLeft = require('@telus-uds/palette-allium/build/rn/icons/chevron-left.icon.svg')
-  .default
-// eslint-disable-next-line import/no-extraneous-dependencies
-const chevronRight = require('@telus-uds/palette-allium/build/rn/icons/chevron-right.icon.svg')
-  .default
-// eslint-disable-next-line import/no-extraneous-dependencies
-const checkmarkIcon = require('@telus-uds/palette-allium/build/rn/icons/checkmark.icon.svg').default
-// eslint-disable-next-line import/no-extraneous-dependencies
-const questionIcon = require('@telus-uds/palette-allium/build/rn/icons/question.icon.svg').default
+/* eslint-disable-next-line import/no-extraneous-dependencies */
+import {
+  ChevronLeft,
+  ChevronRight,
+  Checkmark,
+  Close,
+  Question,
+  SearchBold,
+  Times
+} from '@telus-uds/palette-allium/build/rn/icons'
 
 const transparent = 'rgba(0, 0, 0, 0)'
 
 export default {
   metadata: {
-    name: 'test'
+    name: 'test',
+    themeTokensVersion: systemThemeTokensPackage.version
   },
   components: {
     spacingScale: {
@@ -123,7 +125,6 @@ export default {
         outerBorderColor: transparent,
         outerBorderWidth: 4,
         outerBorderGap: 2,
-        outerBorderRadius: 2,
 
         fontSize: 16,
         color: '#0e6ac8',
@@ -224,8 +225,7 @@ export default {
         {
           if: { rounded: true },
           tokens: {
-            borderRadius: 48,
-            outerBorderRadius: 16
+            borderRadius: 48
           }
         },
         {
@@ -243,8 +243,7 @@ export default {
         {
           if: { rounded: true, pressed: true },
           tokens: {
-            borderRadius: 0,
-            outerBorderRadius: 0
+            borderRadius: 0
           }
         },
         {
@@ -312,7 +311,6 @@ export default {
         outerBorderColor: transparent,
         outerBorderWidth: 4,
         outerBorderGap: 2,
-        outerBorderRadius: 2,
 
         fontSize: 16,
         color: '#0e6ac8',
@@ -369,6 +367,7 @@ export default {
         viewport: appearances.system.viewport
       },
       tokens: {
+        flex: 1,
         backgroundColor: '#ffffff',
         borderColor: '#666666',
         borderRadius: 6,
@@ -458,11 +457,10 @@ export default {
       },
       tokens: {
         containerBackgroundColor: transparent,
-        containerMarginBottom: 8,
         feedbackMarginBottom: 0,
         feedbackMarginTop: 2,
         feedbackPosition: 'bottom',
-        icon: checkmarkIcon,
+        icon: Checkmark,
         iconBackgroundColor: '#7c53a5',
         iconColor: '#ffffff',
         iconSize: 18,
@@ -517,11 +515,19 @@ export default {
     ChevronLink: {
       appearances: {},
       tokens: {
-        leftIcon: chevronLeft,
-        rightIcon: chevronRight,
+        leftIcon: ChevronLeft,
+        rightIcon: ChevronRight,
         iconDisplace: 4
       }
     },
+    CheckboxGroup: {
+      appearances: {},
+      tokens: {
+        fieldSpace: 2,
+        space: 2
+      },
+      rules: []
+    },
     Divider: {
       appearances: {
         weight: {
@@ -597,6 +603,353 @@ export default {
         }
       ]
     },
+    IconButton: {
+      appearances: {},
+      tokens: {},
+      rules: []
+    },
+    Progress: {
+      appearances: {
+        size: { values: ['mini'], type: 'variant' }
+      },
+      tokens: {
+        backgroundColor: '#ffffff',
+        borderWidth: 1,
+        borderColor: '#f4f4f7',
+        borderRadius: 12,
+        height: 16
+      },
+      rules: [{ if: { size: 'mini' }, tokens: { height: 8 } }]
+    },
+    ProgressBar: {
+      appearances: {
+        inactive: appearances.ProgressBar.inactive,
+        negative: { values: [true], type: 'variant' }
+      },
+      tokens: {
+        backgroundColor: '#08804b',
+        borderRadius: 12,
+        outlineWidth: 1,
+        outlineColor: '#2b8000'
+      },
+      rules: [
+        {
+          if: { inactive: true },
+          tokens: {
+            backgroundColor: '#b2b9bf',
+            outlineColor: '#f4f4f7'
+          }
+        },
+        {
+          if: { negative: true },
+          tokens: {
+            backgroundColor: '#c12335',
+            outlineColor: '#c12335'
+          }
+        }
+      ]
+    },
+    RadioCardGroup: {
+      appearances: {
+        viewport: appearances.system.viewport
+      },
+      tokens: {
+        direction: 'column',
+        fieldSpace: 2,
+        space: 2
+      },
+      rules: [
+        {
+          if: {
+            viewport: ['lg', 'xl']
+          },
+          tokens: {
+            direction: 'row'
+          }
+        }
+      ]
+    },
+    RadioGroup: {
+      appearances: {},
+      tokens: {
+        fieldSpace: 2,
+        space: 2
+      },
+      rules: []
+    },
+    Modal: {
+      appearances: {},
+      tokens: {
+        backdropColor: 'rgba(0,0,0,0.5)',
+        backdropOpacity: 1,
+        maxWidth: 600,
+        containerPaddingLeft: 16,
+        containerPaddingRight: 16,
+        containerPaddingTop: 16,
+        containerPaddingBottom: 16,
+        backgroundColor: '#fff',
+        borderRadius: 4,
+        paddingLeft: 24,
+        paddingRight: 24,
+        paddingTop: 24,
+        paddingBottom: 24,
+
+        closeIcon: Close,
+        closeIconSize: 24,
+        closeIconColor: '#000'
+      },
+      rules: []
+    },
+    Search: {
+      appearances: {
+        focus: appearances.Search.focus,
+        hover: appearances.Search.hover,
+        inactive: appearances.Search.inactive
+      },
+      tokens: {
+        borderRadius: 32,
+        borderWidth: 1,
+        borderColor: '#00000044',
+        paddingTop: 6,
+        paddingBottom: 6,
+        paddingLeft: 16,
+        paddingRight: 6,
+        outerBorderWidth: 1,
+        outerBorderColor: transparent,
+        outerBorderRadius: 32,
+        buttonsGap: 2,
+        clearButtonIcon: Times,
+        submitButtonIcon: SearchBold
+      },
+      rules: [
+        {
+          if: { focus: true },
+          tokens: {
+            outerBorderColor: '#debc06'
+          }
+        },
+        {
+          if: { hover: true },
+          tokens: {
+            outerBorderColor: '#6666cc'
+          }
+        }
+      ]
+    },
+    SearchButton: {
+      appearances: {},
+      tokens: {},
+      rules: []
+    },
+    Notification: {
+      appearances: {},
+      tokens: {
+        dismissIcon: Close
+      },
+      rules: []
+    },
+    RadioCard: {
+      appearances: {
+        checked: appearances.Radio.checked,
+        error: appearances.Radio.error,
+        focus: appearances.Radio.focus,
+        hover: appearances.Radio.hover,
+        inactive: appearances.Radio.inactive
+      },
+      tokens: {
+        // Taken from Allium theme snapshot
+        flex: 1,
+        backgroundColor: '#ffffff',
+        borderColor: '#b2b9bf',
+        borderRadius: 6,
+        borderWidth: 1,
+        color: '#2c2e30',
+        contentSpace: 2,
+        fontSize: 20,
+        fontWeight: '500',
+        letterSpacing: 0,
+        lineHeight: 1.4,
+        outerBorderColor: transparent,
+        outerBorderGap: 0,
+        outerBorderWidth: 0,
+        paddingBottom: 16,
+        paddingLeft: 10,
+        paddingRight: 16,
+        paddingTop: 16,
+        radioCheckedBackgroundColor: '#7c53a5',
+        radioCheckedSize: 12,
+        radioInputBackgroundColor: '#ffffff',
+        radioInputBorderColor: '#676e73',
+        radioInputBorderWidth: 1,
+        radioInputOutlineColor: transparent,
+        radioInputOutlineWidth: 0,
+        radioInputSize: 20,
+        radioOuterBorderColor: transparent,
+        radioOuterBorderGap: 0,
+        radioOuterBorderWidth: 0,
+        radioSpace: 2,
+        minWidth: 288,
+        shadow: null,
+        textTransform: 'none'
+      },
+      rules: [
+        {
+          if: {
+            viewport: ['lg', 'xl']
+          },
+          tokens: {
+            fontSize: 24,
+            lineHeight: 1.33333333333,
+            paddingBottom: 24,
+            paddingLeft: 16,
+            paddingRight: 24,
+            paddingTop: 16
+          }
+        },
+        {
+          if: {
+            hover: true
+          },
+          tokens: {
+            borderColor: '#676e73',
+            outerBorderColor: '#e3e6e8',
+            outerBorderWidth: 2,
+            radioOuterBorderColor: '#e3e6e8',
+            radioOuterBorderWidth: 2
+          }
+        },
+        {
+          description: 'Pressed state matches hover state plus light grey background',
+          if: {
+            pressed: true
+          },
+          tokens: {
+            backgroundColor: '#f4f4f7',
+            borderColor: '#676e73',
+            outerBorderColor: '#e3e6e8',
+            outerBorderWidth: 2
+          }
+        },
+        {
+          if: {
+            focus: true
+          },
+          tokens: {
+            radioIputBorderColor: '#7c53a5',
+            radioInputBorderWidth: 3,
+            outerBorderColor: '#676e73',
+            outerBorderGap: 2,
+            outerBorderWidth: 2
+          }
+        },
+        {
+          if: {
+            inactive: true
+          },
+          tokens: {
+            backgroundColor: '#f4f4f7',
+            borderColor: 'transparent',
+            radioInputBackgroundColor: '#e3e6e8',
+            radioInputBorderColor: 'rgba(0, 0, 0, 0)',
+            labelColor: '#676e73'
+          }
+        },
+        {
+          if: {
+            error: true
+          },
+          tokens: {
+            borderColor: '#e12339',
+            color: '#e12339',
+            radioInputBorderColor: '#e12339'
+          }
+        }
+      ]
+    },
+    Tabs: {
+      appearances: {},
+      tokens: {
+        buttonClearance: 20,
+        gutter: 12,
+        nextIcon: ChevronRight,
+        previousIcon: ChevronLeft,
+        borderBottomWidth: 1,
+        borderBottomColor: '#ebefed',
+        space: 1
+      },
+      rules: []
+    },
+    TabsItem: {
+      appearances: {},
+      tokens: {
+        backgroundColor: transparent,
+        borderColor: transparent,
+        borderRadius: 0,
+        borderWidth: 0,
+        color: '#034045',
+        fontName: '',
+        fontScaleCap: 66,
+        fontSize: 14,
+        fontWeight: '700',
+        highlightBarBorderRadius: 0,
+        highlightBarBorderWidth: 0,
+        highlightBarHeight: 0,
+        highlightColor: transparent,
+        highlightTriangleSize: 0,
+        letterSpacing: 0,
+        lineHeight: 1,
+        maxWidth: 150,
+        paddingHorizontal: 16,
+        paddingVertical: 16,
+        space: 0,
+        textAlign: 'left',
+        textTransform: 'uppercase'
+      },
+      rules: [
+        {
+          if: { hover: true },
+          tokens: {
+            highlightBarHeight: 2,
+            highlightColor: '#81a0a2'
+          }
+        },
+        {
+          if: { focus: true },
+          tokens: {
+            borderColor: '#81a0a2',
+            borderWidth: 1
+          }
+        },
+        {
+          if: { pressed: true },
+          tokens: {
+            backgroundColor: '#ebefed'
+          }
+        },
+        {
+          if: { selected: true },
+          tokens: {
+            highlightBarHeight: 2,
+            highlightColor: '#034045',
+            highlightTriangleSize: 8
+          }
+        }
+      ]
+    },
+    TabsScrollButton: {
+      appearances: {},
+      tokens: {
+        backgroundColor: '#ffffff',
+        borderColor: '#81a0a2',
+        borderRadius: 12,
+        borderWidth: 1,
+        iconColor: '#81a0a2',
+        iconSize: 24,
+        padding: 0,
+        shadow: null
+      },
+      rules: []
+    },
     Typography: {
       appearances: {
         weight: {
@@ -961,7 +1314,6 @@ export default {
         checkedSize: 12,
         containerBackgroundColor: '#ffffff',
         containerBorderRadius: 12,
-        containerMarginBottom: 0,
         containerOpacity: 1,
         containerPaddingBottom: 12,
         containerPaddingLeft: 18,
@@ -978,6 +1330,9 @@ export default {
         inputOutlineWidth: 0,
         inputSize: 20,
         inputShadow: null,
+        outerBorderWidth: 0,
+        outerBorderColor: transparent,
+        outerBorderGap: 0,
         labelColor: '#414547',
         labelFontName: '',
         labelFontSize: 18,
@@ -1029,6 +1384,62 @@ export default {
     StackView: {
       tokens: {}
     },
+    StepTracker: {
+      appearances: {},
+      tokens: {
+        completedIcon: null,
+        completedIconColor: '#ffffff',
+        completedIconSize: 12,
+        connectorColor: '#676e73',
+        connectorHeight: 1,
+        connectorMinWidth: 16,
+        connectorCompletedHeight: 3,
+        connectorCompletedColor: '#7c53a5',
+        containerPaddingBottom: 0,
+        containerPaddingLeft: 0,
+        containerPaddingRight: 0,
+        containerPaddingTop: 0,
+        knobBackgroundColor: transparent,
+        knobBorderWidth: 1,
+        knobBorderColor: '#676e73',
+        knobCompletedBackgroundColor: '#7c53a5',
+        knobCompletedBorderColor: '#7c53a5',
+        knobCompletedPaddingLeft: 1,
+        knobCompletedPaddingTop: 1,
+        knobCurrentBackgroundColor: transparent,
+        knobCurrentBorderColor: '#7c53a5',
+        knobCurrentBorderWidth: 2,
+        knobCurrentInnerColor: '#7c53a5',
+        knobCurrentInnerSize: 8,
+        knobCurrentPaddingLeft: 2,
+        knobCurrentPaddingTop: 2,
+        knobSize: 16,
+        labelColor: '#676e73',
+        labelCurrentColor: '#7c53a5',
+        labelCurrentFontWeight: '600',
+        labelDirection: 'column',
+        labelFontSize: 16,
+        labelFontWeight: '400',
+        labelFontName: '',
+        labelGap: 0,
+        labelLineHeight: 1.5,
+        labelMarginTop: 8,
+        labelPaddingLeft: 16,
+        labelPaddingRight: 16,
+        showStepLabel: false,
+        showStepName: true,
+        showStepTrackerLabel: true
+      },
+      rules: [
+        {
+          if: { viewport: ['lg', 'xl'] },
+          tokens: {
+            showStepLabel: true,
+            showStepTrackerLabel: false
+          }
+        }
+      ]
+    },
     ToggleSwitch: {
       appearances: {
         focus: appearances.ToggleSwitch.focus,
@@ -1041,7 +1452,6 @@ export default {
         outerBorderColor: '#000000',
         outerBorderWidth: 2,
         outerBorderGap: 2,
-        outerBorderRadius: 8,
         outerBackgroundColor: '#333333',
         borderColor: '#666666',
         borderWidth: 2,
@@ -1121,8 +1531,7 @@ export default {
         paddingLeft: 6,
         paddingRight: 6,
         outerBorderWidth: 1,
-        outerBorderColor: transparent,
-        outerBorderRadius: 4
+        outerBorderColor: transparent
       },
       rules: [
         {
@@ -1262,7 +1671,7 @@ export default {
         selected: appearances.ButtonGroupItem.selected
       },
       tokens: {
-        icon: checkmarkIcon,
+        icon: Checkmark,
         iconSize: 16,
         iconColor: '#ffffff',
         iconTranslateX: 0,
@@ -1283,7 +1692,6 @@ export default {
         outerBorderColor: transparent,
         outerBorderWidth: 4,
         outerBorderGap: 2,
-        outerBorderRadius: 2,
 
         fontSize: 16,
         color: '#0e6ac8',
@@ -1345,7 +1753,7 @@ export default {
     },
     TooltipButton: {
       tokens: {
-        icon: questionIcon,
+        icon: Question,
         iconColor: 'black',
         iconSize: 16
       }
@@ -1373,8 +1781,7 @@ export default {
         paddingLeft: 6,
         paddingRight: 6,
         outerBorderWidth: 1,
-        outerBorderColor: transparent,
-        outerBorderRadius: 4
+        outerBorderColor: transparent
       },
       rules: [
         {

package/__tests__/ActivityIndicator/ActivityIndicator.test.jsx

@@ -4,7 +4,7 @@ import Theme from '../../__fixtures__/Theme'
 import ActivityIndicator from '../../src/ActivityIndicator'
 
 // Used to remove the "Animated: `useNativeDriver` is not supported because the native animated module is missing." warnings
-jest.mock('react-native/Libraries/Animated/src/NativeAnimatedHelper')
+jest.mock('react-native/Libraries/Animated/NativeAnimatedHelper')
 
 const render = (jsx) => baseRender(jsx, { wrapper: Theme })
 

package/__tests__/Button/ButtonGroup.test.jsx

@@ -106,7 +106,7 @@ describe('ButtonGroup (uncontrolled)', () => {
       </Theme>
     )
     expect(queryAllByA11yRole('checkbox')).toHaveLength(0)
-    expect(queryAllByA11yRole('radioGroup')).toHaveLength(1)
+    expect(queryAllByA11yRole('radiogroup')).toHaveLength(1)
     const radios = queryAllByA11yRole('radio')
     expect(radios).toHaveLength(4)
 
@@ -158,7 +158,7 @@ describe('ButtonGroup (uncontrolled)', () => {
       </Theme>
     )
 
-    expect(queryAllByA11yRole('radioGroup')).toHaveLength(0)
+    expect(queryAllByA11yRole('radiogroup')).toHaveLength(0)
     expect(queryAllByA11yRole('radio')).toHaveLength(0)
 
     const checks = queryAllByA11yRole('checkbox')
@@ -253,15 +253,14 @@ describe('ButtonGroup (controlled)', () => {
     expect(handleChange).toHaveBeenCalledTimes(0)
 
     const one = getByText('One')
-    await fireEvent.press(one)
+    await fireEvent(one, 'press', { nativeEvent: 'example' })
     expect(handleChange).toHaveBeenCalledTimes(1)
-
-    expect(handleChange.mock.calls[0][0]).toEqual(['one'])
+    expect(handleChange).toHaveBeenLastCalledWith(['one'], { nativeEvent: 'example' })
 
     const two = getByText('Two')
-    await fireEvent.press(two)
+    await fireEvent(two, 'press', { nativeEvent: 'example2' })
     expect(handleChange).toHaveBeenCalledTimes(2)
-    expect(handleChange.mock.calls[1][0]).toEqual(['two'])
+    expect(handleChange).toHaveBeenLastCalledWith(['two'], { nativeEvent: 'example2' })
   })
 
   it("Doesn't change its own selection if `values` is passed", async () => {

package/__tests__/Checkbox/Checkbox.test.jsx

@@ -86,9 +86,9 @@ describe('Checkbox', () => {
 
       const checkbox = getByRole('checkbox')
       expect(queryByTestId(checkedId)).toBeFalsy()
-      fireEvent(checkbox, 'press')
+      fireEvent(checkbox, 'press', { nativeEvent: 'example' })
       expect(onChange).toHaveBeenCalledTimes(1)
-      expect(onChange).toHaveBeenCalledWith(true)
+      expect(onChange).toHaveBeenCalledWith(true, { nativeEvent: 'example' })
     })
   })
 })