@telus-uds/theme-allium 0.0.2-prerelease.4 → 0.0.2-prerelease.5

package/lib/components/spacingScale.js

@@ -0,0 +1,163 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _paletteAllium = _interopRequireDefault(require("@telus-uds/palette-allium"));
+
+var _schema = require("@telus-uds/system-themes/schema");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = {
+  appearances: {
+    space: _schema.appearances.spacingScale.space,
+    viewport: _schema.appearances.system.viewport
+  },
+  // Largest spacings first, so they apply any time space >= highest index'
+  tokens: {
+    size: _paletteAllium.default.size.size96
+  },
+  rules: [{
+    if: {
+      viewport: ['lg', 'xl']
+    },
+    tokens: {
+      size: _paletteAllium.default.size.size120
+    }
+  }, {
+    if: {
+      space: 11
+    },
+    tokens: {
+      size: _paletteAllium.default.size.size96
+    }
+  }, {
+    if: {
+      space: 10
+    },
+    tokens: {
+      size: _paletteAllium.default.size.size80
+    }
+  }, {
+    if: {
+      space: 9
+    },
+    tokens: {
+      size: _paletteAllium.default.size.size64
+    }
+  }, {
+    if: {
+      space: 8
+    },
+    tokens: {
+      size: _paletteAllium.default.size.size48
+    }
+  }, {
+    if: {
+      space: 7
+    },
+    tokens: {
+      size: _paletteAllium.default.size.size40
+    }
+  }, {
+    if: {
+      space: 6
+    },
+    tokens: {
+      size: _paletteAllium.default.size.size36
+    }
+  }, {
+    if: {
+      space: 5
+    },
+    tokens: {
+      size: _paletteAllium.default.size.size32
+    }
+  }, {
+    if: {
+      space: 4
+    },
+    tokens: {
+      size: _paletteAllium.default.size.size24
+    }
+  }, {
+    if: {
+      space: 3
+    },
+    tokens: {
+      size: _paletteAllium.default.size.size16
+    }
+  }, {
+    if: {
+      space: 2
+    },
+    tokens: {
+      size: _paletteAllium.default.size.size8
+    }
+  }, {
+    if: {
+      space: 1
+    },
+    tokens: {
+      size: _paletteAllium.default.size.size4
+    }
+  }, {
+    if: {
+      space: 11,
+      viewport: ['lg', 'xl']
+    },
+    tokens: {
+      size: _paletteAllium.default.size.size120
+    }
+  }, {
+    if: {
+      space: 10,
+      viewport: ['lg', 'xl']
+    },
+    tokens: {
+      size: _paletteAllium.default.size.size96
+    }
+  }, {
+    if: {
+      space: 9,
+      viewport: ['lg', 'xl']
+    },
+    tokens: {
+      size: _paletteAllium.default.size.size72
+    }
+  }, {
+    if: {
+      space: 8,
+      viewport: ['lg', 'xl']
+    },
+    tokens: {
+      size: _paletteAllium.default.size.size64
+    }
+  }, {
+    if: {
+      space: 7
+    },
+    tokens: {
+      size: _paletteAllium.default.size.size48
+    }
+  }, {
+    if: {
+      space: 6
+    },
+    tokens: {
+      size: _paletteAllium.default.size.size40
+    }
+  }, // Zero spacing last; overrides all other rules when space === 0
+  {
+    if: {
+      space: 0
+    },
+    tokens: {
+      size: _paletteAllium.default.size.size0
+    }
+  }]
+};
+exports.default = _default;

package/lib/index.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _package = _interopRequireDefault(require("../package.json"));
+
+var components = _interopRequireWildcard(require("./components"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+// TODO: replace this with theme build tooling and schema checks as part of
+// https://github.com/telus/universal-design-system/issues/92
+const metadata = {
+  name: 'allium',
+  package: _package.default.name,
+  version: _package.default.version
+};
+const alliumTheme = {
+  metadata,
+  components
+};
+var _default = alliumTheme;
+exports.default = _default;

package/package.json

@@ -1,22 +1,21 @@
 {
   "name": "@telus-uds/theme-allium",
-  "version": "0.0.2-prerelease.4",
+  "version": "0.0.2-prerelease.5",
   "description": "Allium theme",
   "author": "TELUS Digital",
   "homepage": "https://github.com/telus/universal-design-system#readme",
   "license": "ISC",
-  "main": "src/index.js",
+  "main": "lib/index.js",
   "react-native": "src/index.js",
   "directories": {
     "lib": "lib",
     "test": "__tests__"
   },
   "dependencies": {
-    "@telus-uds/system-constants": "^0.0.2-prerelease.1",
-    "@telus-uds/tools-theme": "^0.0.2-prerelease.4"
+    "@telus-uds/system-themes": "^0.0.2-prerelease.0"
   },
   "peerDependencies": {
-    "@telus-uds/palette-allium": "^0.1.0-prerelease.5"
+    "@telus-uds/palette-allium": "^0.1.0-prerelease.6"
   },
   "files": [
     "lib",
@@ -27,9 +26,10 @@
     "url": "git+https://github.com/telus/universal-design-system.git"
   },
   "scripts": {
-    "test": "echo \"Error: run tests from root\" && exit 1",
+    "test": "jest",
     "release": "standard-version",
-    "build": "echo 'Empty build script, refer to root README for why this exists...'"
+    "build": "babel src -d lib",
+    "dev": "nodemon -w src -x 'yarn build'"
   },
   "bugs": {
     "url": "https://github.com/telus/universal-design-system/issues"

package/src/components/Box.js

@@ -1,7 +1,7 @@
 import palette from '@telus-uds/palette-allium'
-import { getBoxSchema, validateComponentTheme } from '@telus-uds/tools-theme'
+import system from '@telus-uds/system-themes/src/tokens/rn'
 
-const Box = {
+export default {
   appearances: {
     background: {
       description: 'Background colour of box. Transparent if not specified.',
@@ -19,7 +19,7 @@ const Box = {
     }
   },
   tokens: {
-    backgroundColor: null
+    backgroundColor: system.color.none
   },
   rules: [
     { if: { background: 'lightest' }, tokens: { backgroundColor: palette.color.white } },
@@ -33,9 +33,3 @@ const Box = {
     { if: { background: 'brand' }, tokens: { backgroundColor: palette.color.purpleTelus } }
   ]
 }
-
-// TODO: replace this with a build step similar to Palettes
-// https://github.com/telus/universal-design-system/issues/167
-validateComponentTheme(Box, getBoxSchema(palette), 'box')
-
-export default Box

package/src/components/Button.js

@@ -1,7 +1,8 @@
-import { getButtonSchema, validateComponentTheme, buttonAppearances } from '@telus-uds/tools-theme'
 import palette from '@telus-uds/palette-allium'
+import system from '@telus-uds/system-themes/src/tokens/rn'
+import { appearances } from '@telus-uds/system-themes/schema'
 
-const Button = {
+export default {
   appearances: {
     priority: {
       description:
@@ -31,38 +32,35 @@ const Button = {
       values: ['full'],
       type: 'variant'
     },
-    component: buttonAppearances.component,
-    hover: buttonAppearances.hover,
-    focus: buttonAppearances.focus,
-    pressed: buttonAppearances.pressed,
-    inactive: {
-      ...buttonAppearances.inactive,
-      description:
-        // Based on https://tds.telus.com/components/index.html#/Forms
-        'Buttons should not be disabled or set as inactive. Use inline (on blur) error messaging to provide feedback when the form is invalid. In exceptional instances where disabled buttons are needed, it must be clear to the user why the button is disabled and what they need to do to enable it.'
-    }
+    hover: appearances.Button.hover,
+    focus: appearances.Button.focus,
+    pressed: appearances.Button.pressed,
+    inactive: appearances.Button.inactive
   },
   tokens: {
     borderColor: palette.color.greenAccessible,
     borderWidth: palette.border.border1,
     borderRadius: palette.radius.pill32,
-    shadow: null,
+    shadow: system.shadow.none,
 
     fontSize: palette.fontSize.size16,
     color: palette.color.greenAccessible,
     lineHeight: palette.lineHeight.ratio3to2,
+    textAlign: system.flexJustifyContent.center,
+    alignSelf: system.flexAlign.flexStart,
+    // TODO: replace these with font for theme building
     fontName: Object.keys(palette.font)[0],
-    textAlign: 'center',
-    alignSelf: 'flex-start',
     fontWeight: '700',
+    // font: palette.font.HelveticaNow['700'],
 
     backgroundColor: palette.color.white,
-    opacity: 1,
+    opacity: system.opacity.opaque,
     paddingLeft: palette.size.size32,
     paddingRight: palette.size.size32,
     paddingTop: palette.size.size12,
     paddingBottom: palette.size.size12,
-    width: null,
+    width: system.size.none,
+    minWidth: palette.size.size144,
 
     outerBorderColor: palette.color.transparent,
     outerBorderWidth: palette.border.border2,
@@ -90,7 +88,7 @@ const Button = {
     {
       if: { pressed: true },
       tokens: {
-        borderWidth: 0,
+        borderWidth: system.size.zero,
         backgroundColor: palette.color.greenDarkFern,
         color: palette.color.white
       }
@@ -104,7 +102,7 @@ const Button = {
     {
       if: { inverse: true },
       tokens: {
-        backgroundColor: null,
+        backgroundColor: system.color.none,
         borderColor: palette.color.white,
         color: palette.color.white
       }
@@ -147,62 +145,25 @@ const Button = {
       tokens: { outerBorderColor: palette.color.redDark }
     },
 
-    { if: { width: 'full' }, tokens: { width: '100%' } },
+    { if: { width: 'full' }, tokens: { width: system.size.full } },
     {
       if: { size: 'small' },
-      tokens: { paddingTop: palette.size.size4, paddingBottom: palette.size.size4 }
-    },
-    {
-      if: { component: 'ButtonGroup' },
-      tokens: {
-        paddingLeft: palette.size.size16,
-        paddingRight: palette.size.size16,
-        paddingTop: palette.size.size8,
-        paddingBottom: palette.size.size8,
-        color: palette.color.greyShuttle,
-        fontSize: palette.fontSize.size14,
-        borderColor: palette.color.greyCloud
-      }
-    },
-    {
-      if: { component: 'ButtonGroup', pressed: true },
       tokens: {
-        borderWidth: palette.border.none,
-        backgroundColor: palette.color.greyShuttle,
-        color: palette.color.white
-      }
-    },
-    {
-      if: { component: 'ButtonGroup', focus: true },
-      tokens: {
-        borderColor: palette.color.purpleTelus,
-        borderWidth: palette.border.border3,
-        color: palette.color.greyCharcoal,
-        outerBorderColor: palette.color.transparent
+        paddingTop: palette.size.size4,
+        paddingBottom: palette.size.size4,
+        minWidth: system.size.zero
       }
     },
     {
-      if: { component: 'ButtonGroup', selected: true },
-      tokens: {
-        borderWidth: palette.border.none,
-        backgroundColor: palette.color.purpleTelus,
-        color: palette.color.white
-      }
-    },
-    {
-      if: { component: 'ButtonGroup', focus: true, pressed: true },
-      tokens: {
-        borderWidth: palette.border.none,
-        backgroundColor: palette.color.purpleTelus,
-        color: palette.color.white
-      }
-    },
-    {
-      if: { inactive: true },
+      description:
+        'Buttons should not be disabled or set as inactive. Use inline (on blur) error messaging to provide feedback when the form is invalid. In exceptional instances where disabled buttons are needed, it must be clear to the user why the button is disabled and what they need to do to enable it.',
+      if: {
+        inactive: true
+      },
       tokens: {
         backgroundColor: palette.color.greyCloud,
         color: palette.color.white,
-        borderWidth: 0
+        borderWidth: system.size.zero
       }
     },
     {
@@ -211,9 +172,3 @@ const Button = {
     }
   ]
 }
-
-// TODO: replace this with a build step similar to Palettes
-// https://github.com/telus/universal-design-system/issues/167
-validateComponentTheme(Button, getButtonSchema(palette), 'button')
-
-export default Button

package/src/components/ButtonGroup.js

@@ -1,23 +1,16 @@
-import { getButtonGroupSchema, validateComponentTheme } from '@telus-uds/tools-theme'
-import palette from '@telus-uds/palette-allium'
-import { appearances } from '@telus-uds/system-constants'
+import system from '@telus-uds/system-themes/src/tokens/rn'
+import { appearances } from '@telus-uds/system-themes/schema'
 
-const ButtonGroup = {
+export default {
   appearances: {
-    viewport: appearances.viewport
+    viewport: appearances.system.viewport
   },
   tokens: {
-    space: 1,
-    direction: 'row',
-    alignItems: 'center',
-    justifyContent: 'flex-start',
-    flexGrow: 0
+    space: system.integer[1],
+    direction: system.direction.row,
+    alignItems: system.flexAlign.center,
+    justifyContent: system.flexJustifyContent.flexStart,
+    flexGrow: system.integer[0]
   },
-  rules: [{ if: { viewport: ['lg', 'xl'] }, tokens: { space: 3 } }]
+  rules: [{ if: { viewport: ['lg', 'xl'] }, tokens: { space: system.integer[3] } }]
 }
-
-// TODO: replace this with a build step similar to Palettes
-// https://github.com/telus/universal-design-system/issues/167
-validateComponentTheme(ButtonGroup, getButtonGroupSchema(palette), 'button-group')
-
-export default ButtonGroup

package/src/components/ButtonGroupItem.js

@@ -0,0 +1,88 @@
+import palette from '@telus-uds/palette-allium'
+import system from '@telus-uds/system-themes/src/tokens/rn'
+import { appearances } from '@telus-uds/system-themes/schema'
+
+export default {
+  appearances: {
+    hover: appearances.ButtonGroupItem.hover,
+    focus: appearances.ButtonGroupItem.focus,
+    pressed: appearances.ButtonGroupItem.pressed,
+    selected: appearances.ButtonGroupItem.selected,
+    inactive: appearances.ButtonGroupItem.inactive
+  },
+  tokens: {
+    borderColor: palette.color.greyCloud,
+    borderWidth: palette.border.border1,
+    borderRadius: palette.radius.pill32,
+    shadow: system.shadow.none,
+
+    fontSize: palette.fontSize.size14,
+    color: palette.color.greyShuttle,
+    lineHeight: palette.lineHeight.ratio3to2,
+    textAlign: system.flexJustifyContent.center,
+    alignSelf: system.flexAlign.flexStart,
+    // TODO: replace with font token
+    fontName: Object.keys(palette.font)[0],
+    fontWeight: '700',
+    // font: palette.font.HelveticaNow['700'],
+
+    backgroundColor: palette.color.white,
+    opacity: system.opacity.opaque,
+    paddingLeft: palette.size.size16,
+    paddingRight: palette.size.size16,
+    paddingTop: palette.size.size8,
+    paddingBottom: palette.size.size8,
+    width: system.size.none,
+    minWidth: system.size.zero,
+
+    outerBorderColor: palette.color.transparent,
+    outerBorderWidth: palette.border.border2,
+    outerBorderGap: palette.border.border2,
+    outerBorderRadius: palette.radius.pill32,
+    outerBackgroundColor: palette.color.transparent
+  },
+  rules: [
+    {
+      if: { pressed: true },
+      tokens: {
+        borderWidth: palette.border.none,
+        backgroundColor: palette.color.greyShuttle,
+        color: palette.color.white
+      }
+    },
+    {
+      if: { focus: true },
+      tokens: {
+        borderColor: palette.color.purpleTelus,
+        borderWidth: palette.border.border3,
+        color: palette.color.greyCharcoal,
+        outerBorderColor: palette.color.transparent
+      }
+    },
+    { if: { hover: true }, tokens: { borderWidth: palette.border.border3 } },
+    {
+      if: { selected: true },
+      tokens: {
+        borderWidth: palette.border.none,
+        backgroundColor: palette.color.purpleTelus,
+        color: palette.color.white
+      }
+    },
+    {
+      if: { focus: true, pressed: true },
+      tokens: {
+        borderWidth: palette.border.none,
+        backgroundColor: palette.color.purpleTelus,
+        color: palette.color.white
+      }
+    },
+    {
+      if: { inactive: true },
+      tokens: {
+        backgroundColor: palette.color.greyCloud,
+        color: palette.color.white,
+        borderWidth: system.border.zero
+      }
+    }
+  ]
+}

package/src/components/Card.js

@@ -1,5 +1,6 @@
 import palette from '@telus-uds/palette-allium'
-import { appearances } from '@telus-uds/system-constants'
+import system from '@telus-uds/system-themes/src/tokens/rn'
+import { appearances } from '@telus-uds/system-themes/schema'
 
 export default {
   appearances: {
@@ -11,7 +12,7 @@ export default {
       values: ['narrow', 'intermediate', 'compact', 'custom'],
       type: 'variant'
     },
-    viewport: appearances.viewport
+    viewport: appearances.system.viewport
   },
   tokens: {
     backgroundColor: palette.color.white,
@@ -22,7 +23,7 @@ export default {
     paddingLeft: palette.size.size24,
     paddingRight: palette.size.size24,
     paddingTop: palette.size.size32,
-    shadow: null
+    shadow: system.shadow.none
   },
   rules: [
     {

package/src/components/Checkbox.js

@@ -0,0 +1,65 @@
+import palette from '@telus-uds/palette-allium'
+import system from '@telus-uds/system-themes/src/tokens/rn'
+import { appearances } from '@telus-uds/system-themes/schema'
+import checkmarkIcon from '@telus-uds/palette-allium/build/rn/icons/checkmark.icon.svg'
+
+export default {
+  appearances: {
+    checked: appearances.Checkbox.checked,
+    error: appearances.Checkbox.error,
+    focus: appearances.Checkbox.focus,
+    hover: appearances.Checkbox.hover,
+    inactive: appearances.Checkbox.inactive
+  },
+  tokens: {
+    containerBackgroundColor: palette.color.transparent,
+    containerMarginBottom: palette.size.size8,
+    feedbackMarginBottom: system.size.zero,
+    feedbackMarginTop: palette.size.size2,
+    feedbackPosition: system.position.bottom,
+    icon: checkmarkIcon,
+    iconBackgroundColor: palette.color.purpleDeluge,
+    iconColor: palette.color.white,
+    iconSize: palette.size.size16,
+    inputBackgroundColor: palette.color.white,
+    inputBorderColor: palette.color.greyShuttle,
+    inputBorderRadius: palette.radius.radius4,
+    inputBorderWidth: palette.border.border1,
+    inputHeight: palette.size.size20,
+    inputOutlineColor: system.color.none,
+    inputOutlineWidth: palette.border.none,
+    inputShadow: system.shadow.none,
+    inputWidth: palette.size.size20,
+    labelColor: palette.color.greyCharcoal,
+    labelFontName: Object.keys(palette.font)[0],
+    labelFontSize: palette.fontSize.size16,
+    labelFontWeight: '400',
+    labelLineHeight: palette.lineHeight.ratio3to2,
+    labelMarginLeft: palette.size.size10
+  },
+  rules: [
+    {
+      if: { error: true },
+      tokens: {
+        inputBorderColor: palette.color.red
+      }
+    },
+    {
+      if: { focus: true },
+      tokens: {
+        inputBorderColor: palette.color.purpleDeluge,
+        inputBorderWidth: palette.border.border3
+      }
+    },
+    {
+      if: { inactive: true },
+      tokens: {
+        inputBorderColor: palette.color.transparent,
+        inputBackgroundColor: palette.color.greyMystic,
+        iconBackgroundColor: palette.color.greyMystic,
+        iconColor: palette.color.greyShuttle,
+        labelColor: palette.color.greyShuttle
+      }
+    }
+  ]
+}

package/src/components/ChevronLink.js

@@ -1,20 +1,19 @@
 import palette from '@telus-uds/palette-allium'
-import { getChevronLinkSchema, validateComponentTheme } from '@telus-uds/tools-theme'
+import system from '@telus-uds/system-themes/src/tokens/rn'
+import { appearances } from '@telus-uds/system-themes/schema'
 
 import leftArrowIcon from '@telus-uds/palette-allium/build/rn/icons/arrow-left.icon.svg'
 import rightArrowIcon from '@telus-uds/palette-allium/build/rn/icons/arrow-right.icon.svg'
 
-const ChevronLink = {
-  appearances: {},
+export default {
+  appearances: {
+    hover: appearances.ChevronLink.hover
+  },
   tokens: {
     leftIcon: leftArrowIcon,
     rightIcon: rightArrowIcon,
-    iconDisplace: palette.size.size4
-  }
+    iconDisplace: palette.size.size0,
+    iconSpace: system.integer[0]
+  },
+  rules: [{ if: { hover: true }, tokens: { iconDisplace: palette.size.size4 } }]
 }
-
-// TODO: replace this with a build step similar to Palettes
-// https://github.com/telus/universal-design-system/issues/167
-validateComponentTheme(ChevronLink, getChevronLinkSchema(palette), 'ChevronLink')
-
-export default ChevronLink