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

package/__fixtures__/testTheme.js

@@ -1,10 +1,4 @@
-const {
-  buttonAppearances,
-  linkAppearances,
-  sideNavItemAppearances,
-  toggleSwitchAppearances
-} = 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
@@ -13,10 +7,14 @@ const chevronLeft = require('@telus-uds/palette-allium/build/rn/icons/chevron-le
 // 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
 
 const transparent = 'rgba(0, 0, 0, 0)'
 
-module.exports = {
+export default {
   metadata: {
     name: 'test'
   },
@@ -112,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',
@@ -129,6 +129,7 @@ module.exports = {
         color: '#0e6ac8',
         lineHeight: 1.5,
         fontWeight: '600',
+        alignSelf: 'flex-start',
 
         backgroundColor: '#ffffff',
         opacity: 1,
@@ -137,12 +138,7 @@ module.exports = {
         paddingTop: 8,
         paddingBottom: 8,
 
-        width: null,
-
-        marginLeft: 0,
-        marginRight: 0,
-        marginTop: 0,
-        marginBottom: 0
+        width: null
       },
       rules: [
         {
@@ -293,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: {
@@ -307,7 +366,7 @@ module.exports = {
           values: ['narrow', 'intermediate', 'compact', 'custom'],
           type: 'variant'
         },
-        viewport: systemAppearances.viewport
+        viewport: appearances.system.viewport
       },
       tokens: {
         backgroundColor: '#ffffff',
@@ -391,6 +450,78 @@ 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: {
+        leftIcon: chevronLeft,
+        rightIcon: chevronRight,
+        iconDisplace: 4
+      }
+    },
     Divider: {
       appearances: {
         weight: {
@@ -497,15 +628,13 @@ module.exports = {
           values: [true],
           type: 'variant'
         },
-        viewport: systemAppearances.viewport
+        viewport: appearances.system.viewport
       },
       tokens: {
         fontWeight: '400',
         fontSize: 16,
         color: '#2c2e30',
         lineHeight: 1.5,
-        marginTop: 8,
-        marginBottom: 8,
         fontScaleCap: 64
       },
       rules: [
@@ -730,8 +859,7 @@ module.exports = {
           values: [true],
           type: 'state'
         },
-        iconPosition: linkAppearances.iconPosition,
-        component: linkAppearances.component
+        iconPosition: appearances.Link.iconPosition
       },
       tokens: {
         color: '#0000ff',
@@ -739,8 +867,6 @@ module.exports = {
         blockFontWeight: '400',
         blockFontSize: 16,
         blockLineHeight: 1.5,
-        blockMarginTop: 8,
-        blockMarginBottom: 8,
 
         outerBorderColor: transparent,
         outerBorderOutline: 'none',
@@ -751,9 +877,7 @@ module.exports = {
         textLineStyle: 'solid',
 
         iconSize: 18,
-        iconGapBefore: 4,
-        iconGapAfter: 4,
-        iconScale: 1
+        iconSpace: 1
       },
       rules: [
         {
@@ -775,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 }
         }
       ]
     },
@@ -832,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: [
         {
@@ -849,13 +1026,16 @@ module.exports = {
       ]
     },
     SideNavItemsGroup: {},
+    StackView: {
+      tokens: {}
+    },
     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',
@@ -872,6 +1052,7 @@ module.exports = {
         paddingRight: 2,
         paddingTop: 2,
         paddingBottom: 2,
+        alignSelf: 'flex-start',
 
         trackBorderWidth: 2,
         trackBorderColor: '#bbbbbb',
@@ -923,6 +1104,311 @@ module.exports = {
           tokens: { opacity: 0.4 }
         }
       ]
+    },
+    TextInput: {
+      appearances: {
+        validation: appearances.TextInput.validation,
+        focus: appearances.TextInput.focus,
+        hover: appearances.TextInput.hover,
+        inactive: appearances.TextInput.inactive
+      },
+      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'
+          }
+        }
+      ]
+    },
+    InputLabel: {
+      tokens: {
+        gap: 20,
+        hintFontSize: 12
+      }
+    },
+    Feedback: {
+      appearances: {
+        validation: appearances.Feedback.validation
+      },
+      tokens: {
+        borderColor: '#eee',
+        borderWidth: 1,
+        borderRadius: 3,
+        titleFontSize: 16,
+        contentFontSize: 14,
+        paddingTop: 12,
+        paddingBottom: 12,
+        paddingLeft: 12,
+        paddingRight: 12
+      },
+      rules: [
+        { 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: {
+      tokens: {
+        backgroundColor: 'black',
+        color: 'white',
+        paddingLeft: 4,
+        paddingRight: 4,
+        paddingTop: 4,
+        paddingBottom: 4,
+        arrowOffset: 4
+      }
+    },
+    TooltipButton: {
+      tokens: {
+        icon: questionIcon,
+        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'
+          }
+        }
+      ]
     }
   }
 }