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

package/__fixtures__/testTheme.js

@@ -1,12 +1,4 @@
-const {
-  buttonAppearances,
-  linkAppearances,
-  sideNavItemAppearances,
-  toggleSwitchAppearances,
-  textInputAppearances,
-  feedbackAppearances
-} = require('@telus-uds/tools-theme')
-const { appearances: systemAppearances } = require('@telus-uds/system-constants')
+import { appearances } from '@telus-uds/system-themes/schema'
 
 // 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
@@ -16,11 +8,13 @@ const chevronLeft = require('@telus-uds/palette-allium/build/rn/icons/chevron-le
 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
 
 const transparent = 'rgba(0, 0, 0, 0)'
 
-module.exports = {
+export default {
   metadata: {
     name: 'test'
   },
@@ -116,7 +110,9 @@ module.exports = {
           values: [true],
           type: 'variant'
         },
-        ...buttonAppearances
+        focus: appearances.Button.focus,
+        hover: appearances.Button.hover,
+        pressed: appearances.Button.pressed
       },
       tokens: {
         borderColor: '#0e6ac8',
@@ -133,6 +129,7 @@ module.exports = {
         color: '#0e6ac8',
         lineHeight: 1.5,
         fontWeight: '600',
+        alignSelf: 'flex-start',
 
         backgroundColor: '#ffffff',
         opacity: 1,
@@ -292,10 +289,73 @@ module.exports = {
     },
     ButtonGroup: {
       tokens: {
-        gap: 8,
-        direction: 'row'
+        space: 2,
+        direction: 'row',
+        alignItems: 'flex-start',
+        justifyContent: 'flex-start',
+        flexGrow: 1
       }
     },
+    ButtonGroupItem: {
+      appearances: {
+        focus: appearances.ButtonGroupItem.focus,
+        hover: appearances.ButtonGroupItem.hover,
+        pressed: appearances.ButtonGroupItem.pressed,
+        selected: appearances.ButtonGroupItem.selected
+      },
+      tokens: {
+        borderColor: '#0e6ac8',
+        borderWidth: 2,
+        borderRadius: 0,
+        shadow: null,
+
+        outerBorderColor: transparent,
+        outerBorderWidth: 4,
+        outerBorderGap: 2,
+        outerBorderRadius: 2,
+
+        fontSize: 16,
+        color: '#0e6ac8',
+        lineHeight: 1.5,
+        fontWeight: '600',
+        alignSelf: 'flex-start',
+
+        backgroundColor: '#ffffff',
+        opacity: 1,
+        paddingLeft: 24,
+        paddingRight: 24,
+        paddingTop: 8,
+        paddingBottom: 8,
+
+        width: null
+      },
+      rules: [
+        {
+          if: { focus: true },
+          tokens: {
+            borderWidth: 4,
+            outerBorderColor: '#0e6ac8',
+            opacity: 0.5
+          }
+        },
+        {
+          if: { hover: true },
+          tokens: {
+            borderWidth: 6
+          }
+        },
+        {
+          if: { pressed: true },
+          tokens: {
+            borderWidth: 8
+          }
+        },
+        {
+          if: { selected: true },
+          tokens: { backgroundColor: '#0e6ac8', color: '#ffffff', opacity: 1 }
+        }
+      ]
+    },
     Card: {
       appearances: {
         background: {
@@ -306,7 +366,7 @@ module.exports = {
           values: ['narrow', 'intermediate', 'compact', 'custom'],
           type: 'variant'
         },
-        viewport: systemAppearances.viewport
+        viewport: appearances.system.viewport
       },
       tokens: {
         backgroundColor: '#ffffff',
@@ -390,6 +450,70 @@ module.exports = {
         }
       ]
     },
+    Checkbox: {
+      appearances: {
+        error: appearances.Checkbox.error,
+        focus: appearances.Checkbox.focus,
+        inactive: appearances.Checkbox.inactive
+      },
+      tokens: {
+        containerBackgroundColor: transparent,
+        containerMarginBottom: 8,
+        feedbackMarginBottom: 0,
+        feedbackMarginTop: 2,
+        feedbackPosition: 'bottom',
+        icon: checkmarkIcon,
+        iconBackgroundColor: '#7c53a5',
+        iconColor: '#ffffff',
+        iconSize: 18,
+        inputBackgroundColor: '#ffffff',
+        inputBorderColor: '#676e73',
+        inputBorderRadius: 4,
+        inputBorderWidth: 1,
+        inputHeight: 20,
+        inputOutlineColor: null,
+        inputOutlineWidth: 0,
+        inputShadow: {
+          color: '#00000044',
+          offsetY: 1,
+          offsetX: 1,
+          spread: 0,
+          blur: 1,
+          inset: false
+        },
+        inputWidth: 20,
+        labelColor: '#414547',
+        labelFontSize: 18,
+        labelFontWeight: '500',
+        labelLineHeight: 1.5,
+        labelMarginLeft: 8
+      },
+      rules: [
+        {
+          if: { error: true },
+          tokens: {
+            inputBorderColor: '#e12339'
+          }
+        },
+        {
+          if: { focus: true },
+          tokens: {
+            inputBorderColor: '#7c53a5',
+            inputBorderWidth: 3
+          }
+        },
+        {
+          if: { inactive: true },
+          tokens: {
+            inputBorderColor: 'transparent',
+            inputBackgroundColor: '#e3e6e8',
+            iconBackgroundColor: '#e3e6e8',
+            iconColor: 'rgba(103, 110, 115, 1)',
+            labelColor: '#676e73'
+          }
+        }
+      ]
+    },
     ChevronLink: {
       appearances: {},
       tokens: {
@@ -504,7 +628,7 @@ module.exports = {
           values: [true],
           type: 'variant'
         },
-        viewport: systemAppearances.viewport
+        viewport: appearances.system.viewport
       },
       tokens: {
         fontWeight: '400',
@@ -735,7 +859,7 @@ module.exports = {
           values: [true],
           type: 'state'
         },
-        iconPosition: linkAppearances.iconPosition
+        iconPosition: appearances.Link.iconPosition
       },
       tokens: {
         color: '#0000ff',
@@ -753,9 +877,7 @@ module.exports = {
         textLineStyle: 'solid',
 
         iconSize: 18,
-        iconGapBefore: 4,
-        iconGapAfter: 4,
-        iconScale: 1
+        iconSpace: 1
       },
       rules: [
         {
@@ -777,14 +899,6 @@ module.exports = {
             color: '#ff0000',
             textLine: 'none'
           }
-        },
-        {
-          if: { component: 'ChevronLink', iconPosition: 'left' },
-          tokens: { icon: chevronLeft }
-        },
-        {
-          if: { component: 'ChevronLink', iconPosition: 'right' },
-          tokens: { icon: chevronRight }
         }
       ]
     },
@@ -834,10 +948,71 @@ module.exports = {
         }
       ]
     },
+    Radio: {
+      appearances: {
+        checked: appearances.Radio.checked,
+        error: appearances.Radio.error,
+        focus: appearances.Radio.focus,
+        hover: appearances.Radio.hover,
+        inactive: appearances.Radio.inactive
+      },
+      tokens: {
+        checkedBackgroundColor: '#7c53a5',
+        checkedSize: 12,
+        containerBackgroundColor: '#ffffff',
+        containerBorderRadius: 12,
+        containerMarginBottom: 0,
+        containerOpacity: 1,
+        containerPaddingBottom: 12,
+        containerPaddingLeft: 18,
+        containerPaddingRight: 18,
+        containerPaddingTop: 12,
+        containerShadow: null,
+        descriptionFontSize: 14,
+        descriptionLineHeight: 1.4,
+        descriptionMarginLeft: null,
+        inputBackgroundColor: '#ffffff',
+        inputBorderColor: '#676e73',
+        inputBorderWidth: 1,
+        inputOutlineColor: null,
+        inputOutlineWidth: 0,
+        inputSize: 20,
+        inputShadow: null,
+        labelColor: '#414547',
+        labelFontName: '',
+        labelFontSize: 18,
+        labelFontWeight: '500',
+        labelLineHeight: 1.5,
+        labelMarginLeft: 8
+      },
+      rules: [
+        {
+          if: { error: true },
+          tokens: {
+            inputBorderColor: '#e12339'
+          }
+        },
+        {
+          if: { focus: true },
+          tokens: {
+            inputBorderColor: '#7c53a5',
+            inputBorderWidth: 3
+          }
+        },
+        {
+          if: { inactive: true },
+          tokens: {
+            inputBorderColor: 'transparent',
+            inputBackgroundColor: '#e3e6e8',
+            labelColor: '#676e73'
+          }
+        }
+      ]
+    },
     SideNav: {},
     SideNavItem: {
       appearances: {
-        ...sideNavItemAppearances
+        type: appearances.SideNavItem.type
       },
       rules: [
         {
@@ -856,11 +1031,11 @@ module.exports = {
     },
     ToggleSwitch: {
       appearances: {
-        focus: toggleSwitchAppearances.focus,
-        hover: toggleSwitchAppearances.hover,
-        pressed: toggleSwitchAppearances.pressed,
-        inactive: toggleSwitchAppearances.inactive,
-        selected: toggleSwitchAppearances.selected
+        focus: appearances.ToggleSwitch.focus,
+        hover: appearances.ToggleSwitch.hover,
+        pressed: appearances.ToggleSwitch.pressed,
+        inactive: appearances.ToggleSwitch.inactive,
+        selected: appearances.ToggleSwitch.selected
       },
       tokens: {
         outerBorderColor: '#000000',
@@ -877,6 +1052,7 @@ module.exports = {
         paddingRight: 2,
         paddingTop: 2,
         paddingBottom: 2,
+        alignSelf: 'flex-start',
 
         trackBorderWidth: 2,
         trackBorderColor: '#bbbbbb',
@@ -931,7 +1107,10 @@ module.exports = {
     },
     TextInput: {
       appearances: {
-        ...textInputAppearances
+        validation: appearances.TextInput.validation,
+        focus: appearances.TextInput.focus,
+        hover: appearances.TextInput.hover,
+        inactive: appearances.TextInput.inactive
       },
       tokens: {
         borderRadius: 4,
@@ -987,7 +1166,7 @@ module.exports = {
     },
     Feedback: {
       appearances: {
-        ...feedbackAppearances
+        validation: appearances.Feedback.validation
       },
       tokens: {
         borderColor: '#eee',
@@ -1001,8 +1180,156 @@ module.exports = {
         paddingRight: 12
       },
       rules: [
-        { if: { state: 'success' }, tokens: { color: 'green' } },
-        { if: { state: 'error' }, tokens: { color: 'red' } }
+        { if: { validation: 'success' }, tokens: { color: 'green' } },
+        { if: { validation: 'error' }, tokens: { color: 'red' } }
+      ]
+    },
+    List: {
+      appearances: {
+        size: {
+          values: ['large', 'small'],
+          type: 'variant'
+        },
+        compact: {
+          values: [true],
+          type: 'variant'
+        }
+      },
+      tokens: {
+        interItemMargin: 8,
+        interItemMarginWithDivider: 16,
+        dividerColor: '#666666',
+        dividerSize: 1,
+        itemBulletContainerWidth: 16,
+        itemBulletContainerAlign: 'center',
+        itemBulletWidth: 4,
+        itemBulletHeight: 4,
+        itemBulletColor: '#6666cc',
+        itemIconSize: 16,
+        itemIconColor: '#6666cc',
+        listGutter: 10,
+        itemLineHeight: 1.5
+      },
+      rules: [
+        {
+          if: { size: 'large' },
+          tokens: {
+            itemFontSize: 20,
+            itemLineHeight: 1.6,
+            listGutter: 16
+          }
+        },
+        {
+          if: { size: 'small' },
+          tokens: {
+            itemFontSize: 14,
+            itemLineHeight: 1.42857142857,
+            listGutter: 10
+          }
+        },
+        {
+          if: { compact: true },
+          tokens: {
+            itemLineHeight: 1.25
+          }
+        },
+        {
+          if: { compact: true, size: 'small' },
+          tokens: {
+            itemLineHeight: 1.14285714286
+          }
+        },
+        {
+          if: { compact: true, size: 'large' },
+          tokens: {
+            itemLineHeight: 1.2
+          }
+        }
+      ]
+    },
+    Tags: {
+      space: 2,
+      direction: 'row',
+      alignItems: 'flex-start',
+      justifyContent: 'flex-start',
+      flexGrow: 1
+    },
+    TagsItem: {
+      appearances: {
+        focus: appearances.ButtonGroupItem.focus,
+        hover: appearances.ButtonGroupItem.hover,
+        pressed: appearances.ButtonGroupItem.pressed,
+        selected: appearances.ButtonGroupItem.selected
+      },
+      tokens: {
+        icon: checkmarkIcon,
+        iconSize: 16,
+        iconColor: '#ffffff',
+        iconTranslateX: 0,
+        iconTranslateY: 0,
+
+        iconPosition: 'right',
+        iconSpace: 2,
+        iconBackground: '#ffffff',
+        iconBorderRadius: 0,
+        iconAlignSelf: 'center',
+        iconPadding: 0,
+
+        borderColor: '#0e6ac8',
+        borderWidth: 2,
+        borderRadius: 0,
+        shadow: null,
+
+        outerBorderColor: transparent,
+        outerBorderWidth: 4,
+        outerBorderGap: 2,
+        outerBorderRadius: 2,
+
+        fontSize: 16,
+        color: '#0e6ac8',
+        lineHeight: 1.5,
+        fontWeight: '600',
+        alignSelf: 'flex-start',
+
+        backgroundColor: '#ffffff',
+        opacity: 1,
+        paddingLeft: 24,
+        paddingRight: 24,
+        paddingTop: 8,
+        paddingBottom: 8,
+
+        width: null
+      },
+      rules: [
+        {
+          if: { focus: true },
+          tokens: {
+            borderWidth: 4,
+            outerBorderColor: '#0e6ac8',
+            opacity: 0.5
+          }
+        },
+        {
+          if: { hover: true },
+          tokens: {
+            borderWidth: 6
+          }
+        },
+        {
+          if: { pressed: true },
+          tokens: {
+            borderWidth: 8
+          }
+        },
+        {
+          if: { selected: true },
+          tokens: {
+            backgroundColor: '#0e6ac8',
+            color: '#ffffff',
+            opacity: 1,
+            iconBackground: '#0e6ac8'
+          }
+        }
       ]
     },
     Tooltip: {
@@ -1022,6 +1349,66 @@ module.exports = {
         iconColor: 'black',
         iconSize: 16
       }
+    },
+    TextArea: {},
+    InputSupports: {},
+    Skeleton: {
+      tokens: {
+        color: '#b2b9bf',
+        radius: 100,
+        size: 3,
+        baseWidth: 40,
+        characters: 10,
+        spaceBetweenLines: 2,
+        squareRadius: 4
+      }
+    },
+    Select: {
+      tokens: {
+        borderRadius: 4,
+        borderWidth: 1,
+        borderColor: '#00000044',
+        paddingTop: 6,
+        paddingBottom: 6,
+        paddingLeft: 6,
+        paddingRight: 6,
+        outerBorderWidth: 1,
+        outerBorderColor: transparent,
+        outerBorderRadius: 4
+      },
+      rules: [
+        {
+          if: { validation: 'success' },
+          tokens: {
+            outerBorderColor: '#99ff99'
+          }
+        },
+        {
+          if: { validation: 'error' },
+          tokens: {
+            outerBorderColor: '#990000'
+          }
+        },
+        {
+          if: { focus: true },
+          tokens: {
+            outerBorderColor: '#debc06'
+          }
+        },
+        {
+          if: { hover: true },
+          tokens: {
+            outerBorderColor: '#6666cc'
+          }
+        },
+        {
+          if: { inactive: true },
+          tokens: {
+            outerBorderColor: transparent,
+            backgroundColor: '#00000044'
+          }
+        }
+      ]
     }
   }
 }

package/__tests__/Button/ButtonBase.test.jsx

@@ -1,4 +1,3 @@
-/* eslint-disable no-console */
 import React from 'react'
 import { render } from '@testing-library/react-native'
 import { Platform, Text } from 'react-native'
@@ -9,41 +8,13 @@ import ButtonBase from '../../src/Button/ButtonBase'
 
 beforeEach(() => jest.clearAllMocks())
 
-describe('ButtonBase', () => {
-  it('throws if both href and onPress are provided', async () => {
-    jest.spyOn(console, 'error').mockImplementation()
-    expect(() =>
-      render(
-        <Theme>
-          <ButtonBase href="example.com" onPress={jest.fn()}>
-            click me
-          </ButtonBase>
-        </Theme>
-      )
-    ).toThrow()
-    expect(console.error).toHaveBeenCalledTimes(1)
-  })
-
-  it('throws if neither href nor onPress are provided', async () => {
-    jest.spyOn(console, 'error').mockImplementation()
-    expect(() =>
-      render(
-        <Theme>
-          <ButtonBase>click me</ButtonBase>
-        </Theme>
-      )
-    ).toThrow()
-    expect(console.error).toHaveBeenCalledTimes(1)
-  })
-})
-
 describe('ButtonBase with render function child', () => {
-  it('receives text styles in render function from button theme', () => {
+  it('receives tokens in render function child', () => {
     const { tokens } = testTheme.components.Button
     const arbitraryWeight = '300'
     const { getByText } = render(
       <Theme>
-        <ButtonBase onPress={() => {}} tokens={{ fontWeight: arbitraryWeight }}>
+        <ButtonBase onPress={() => {}} tokens={{ ...tokens, fontWeight: arbitraryWeight }}>
           {({ textStyles }) => <Text style={textStyles}>Function child</Text>}
         </ButtonBase>
       </Theme>