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

package/lib/components/Typography.js

@@ -0,0 +1,370 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _paletteAllium = _interopRequireDefault(require("@telus-uds/palette-allium"));
+
+var _rn = _interopRequireDefault(require("@telus-uds/system-themes/src/tokens/rn"));
+
+var _schema = require("@telus-uds/system-themes/schema");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = {
+  appearances: {
+    size: {
+      description: `Styles text as body or heading text with a given size. Smaller numbers indicate larger sizes,
+"display" headings are larger than "h" headings. Default is medium size body text. Does not change
+accessibility or SEO-related properties; use the heading prop if text should be treated semantically as a heading.`,
+      values: ['micro', 'small', 'large', 'eyebrow', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'display1', 'display2'],
+      type: 'variant'
+    },
+    colour: {
+      description: `Each typography variant has a default color, and at least a secondary color variant. In exceptional cases where a different colour is needed,
+  use the tokens prop.`,
+      values: ['secondary', 'tertiary'],
+      type: 'variant'
+    },
+    bold: {
+      description: 'Sets the font weight, to bold on some body text styles. Does not change accessibility properties.',
+      values: [true],
+      type: 'variant'
+    },
+    inverse: {
+      description: 'Styles the link white for use on dark backgrounds.',
+      values: [true],
+      type: 'variant'
+    },
+    compact: {
+      description: 'Reduces line height on some body text styles. For data-rich content, not for flow content',
+      values: [true],
+      type: 'variant'
+    },
+    viewport: _schema.appearances.system.viewport
+  },
+  tokens: {
+    // TODO: replace with font token
+    fontName: Object.keys(_paletteAllium.default.font)[0],
+    fontWeight: '400',
+    // font: palette.font.HelveticaNow[400]
+    fontSize: _paletteAllium.default.fontSize.size16,
+    color: _paletteAllium.default.color.greyThunder,
+    lineHeight: _paletteAllium.default.lineHeight.ratio3to2,
+    letterSpacing: _rn.default.letterSpacing.none,
+    textTransform: _rn.default.textTransform.none,
+    fontScaleCap: _paletteAllium.default.fontSize.size64
+  },
+  rules: [
+  /**
+   * Colour rules: most variants are thunder / charcoal, but some heading sizes are purple / thunder, inverse is white for all
+   */
+  {
+    if: {
+      colour: 'secondary'
+    },
+    tokens: {
+      color: _paletteAllium.default.color.greyCharcoal
+    }
+  }, {
+    if: {
+      size: ['display1', 'display2', 'h1', 'h2', 'h3']
+    },
+    tokens: {
+      color: _paletteAllium.default.color.purpleTelus
+    }
+  }, {
+    if: {
+      size: ['display1', 'display2', 'h1', 'h2', 'h3'],
+      colour: 'secondary'
+    },
+    tokens: {
+      color: _paletteAllium.default.color.greyThunder
+    }
+  }, {
+    if: {
+      size: 'h6',
+      colour: 'tertiary'
+    },
+    // TODO pending confirmation that this is necessary
+    tokens: {
+      color: _paletteAllium.default.color.greyShuttle
+    }
+  }, {
+    if: {
+      size: 'eyebrow'
+    },
+    tokens: {
+      color: _paletteAllium.default.color.greyCharcoal
+    }
+  }, {
+    if: {
+      size: 'eyebrow',
+      colour: 'secondary'
+    },
+    tokens: {
+      color: _paletteAllium.default.color.purpleTelus
+    }
+  }, {
+    if: {
+      inverse: true
+    },
+    tokens: {
+      color: _paletteAllium.default.color.white
+    }
+  },
+  /**
+   * Size/weight/line height/letter spacing rules
+   */
+
+  /* Display 1 */
+  {
+    if: {
+      size: 'display1'
+    },
+    tokens: {
+      fontSize: _paletteAllium.default.fontSize.size40,
+      // TODO: replace with font token
+      fontWeight: '300',
+      // font: palette.font.HelveticaNow[300]
+      lineHeight: _paletteAllium.default.lineHeight.ratio6to5,
+      letterSpacing: _paletteAllium.default.letterSpacing.medium
+    }
+  }, {
+    if: {
+      size: 'display1',
+      viewport: ['lg', 'xl']
+    },
+    tokens: {
+      fontSize: _paletteAllium.default.fontSize.size64,
+      lineHeight: _paletteAllium.default.lineHeight.ratio9to8
+    }
+  },
+  /* Display 2 */
+  {
+    if: {
+      size: 'display2'
+    },
+    tokens: {
+      fontSize: _paletteAllium.default.fontSize.size36,
+      // TODO: replace with font token
+      fontWeight: '400',
+      // font: palette.font.HelveticaNow[400]
+      letterSpacing: _paletteAllium.default.letterSpacing.medium,
+      lineHeight: _paletteAllium.default.lineHeight.ratio11to9
+    }
+  }, {
+    if: {
+      size: 'display2',
+      viewport: ['lg', 'xl']
+    },
+    tokens: {
+      fontSize: _paletteAllium.default.fontSize.size56,
+      // TODO: replace with font token
+      fontWeight: '300',
+      // font: palette.font.HelveticaNow[300]
+      lineHeight: _paletteAllium.default.lineHeight.ratio8to7,
+      letterSpacing: _paletteAllium.default.letterSpacing.condensed
+    }
+  },
+  /* h1 */
+  {
+    if: {
+      size: 'h1'
+    },
+    tokens: {
+      fontSize: _paletteAllium.default.fontSize.size28,
+      lineHeight: _paletteAllium.default.lineHeight.ratio9to7,
+      letterSpacing: _paletteAllium.default.letterSpacing.loose
+    }
+  }, {
+    if: {
+      size: 'h1',
+      viewport: ['lg', 'xl']
+    },
+    tokens: {
+      fontSize: _paletteAllium.default.fontSize.size40,
+      // TODO: replace with font token
+      fontWeight: '300',
+      // font: palette.font.HelveticaNow[300]
+      lineHeight: _paletteAllium.default.lineHeight.ratio6to5,
+      letterSpacing: _paletteAllium.default.letterSpacing.medium
+    }
+  },
+  /* h2 */
+  {
+    if: {
+      size: 'h2'
+    },
+    tokens: {
+      fontSize: _paletteAllium.default.fontSize.size24,
+      // TODO: replace with font token
+      fontWeight: '500',
+      // font: palette.font.HelveticaNow[500]
+      lineHeight: _paletteAllium.default.lineHeight.ratio4to3
+    }
+  }, {
+    if: {
+      size: 'h2',
+      viewport: ['lg', 'xl']
+    },
+    tokens: {
+      fontSize: _paletteAllium.default.fontSize.size28,
+      lineHeight: _paletteAllium.default.lineHeight.ratio9to7,
+      letterSpacing: _paletteAllium.default.letterSpacing.loose
+    }
+  },
+  /* h3 */
+  {
+    if: {
+      size: 'h3'
+    },
+    tokens: {
+      fontSize: _paletteAllium.default.fontSize.size20,
+      // TODO: replace with font token
+      fontWeight: '500',
+      // font: palette.font.HelveticaNow[500]
+      lineHeight: _paletteAllium.default.lineHeight.ratio7to5
+    }
+  }, {
+    if: {
+      size: 'h3',
+      viewport: ['lg', 'xl']
+    },
+    tokens: {
+      fontSize: _paletteAllium.default.fontSize.size24,
+      lineHeight: _paletteAllium.default.lineHeight.ratio4to3
+    }
+  },
+  /* h4 */
+  {
+    if: {
+      size: 'h4'
+    },
+    tokens: {
+      fontSize: _paletteAllium.default.fontSize.size16,
+      // TODO: replace with font token
+      fontWeight: '500',
+      // font: palette.font.HelveticaNow[500]
+      lineHeight: _paletteAllium.default.lineHeight.ratio3to2
+    }
+  },
+  /* h5 */
+  {
+    if: {
+      size: 'h5'
+    },
+    tokens: {
+      fontSize: _paletteAllium.default.fontSize.size14,
+      // TODO: replace with font token
+      fontWeight: '500',
+      // font: palette.font.HelveticaNow[500]
+      lineHeight: _paletteAllium.default.lineHeight.ratio9to7
+    }
+  },
+  /* h6 */
+  {
+    if: {
+      size: 'h6'
+    },
+    tokens: {
+      fontSize: _paletteAllium.default.fontSize.size12,
+      // TODO: replace with font token
+      fontWeight: '700',
+      // font: palette.font.HelveticaNow[700]
+      lineHeight: _paletteAllium.default.lineHeight.ratio4to3
+    }
+  },
+  /* large */
+  {
+    if: {
+      size: 'large'
+    },
+    tokens: {
+      fontSize: _paletteAllium.default.fontSize.size20,
+      lineHeight: _paletteAllium.default.lineHeight.ratio8to5
+    }
+  }, {
+    if: {
+      size: 'large',
+      compact: true
+    },
+    tokens: {
+      lineHeight: _paletteAllium.default.lineHeight.ratio6to5
+    }
+  },
+  /* default (medium) */
+  {
+    if: {
+      size: null,
+      compact: true
+    },
+    description: "The compact line height for the 'default' font size, but doesn't apply for any other styles",
+    tokens: {
+      lineHeight: _paletteAllium.default.lineHeight.ratio5to4
+    }
+  },
+  /* small */
+  {
+    if: {
+      size: 'small'
+    },
+    tokens: {
+      fontSize: _paletteAllium.default.fontSize.size14,
+      lineHeight: _paletteAllium.default.lineHeight.ratio10to7
+    }
+  }, {
+    if: {
+      size: 'small',
+      compact: true
+    },
+    tokens: {
+      lineHeight: _paletteAllium.default.lineHeight.ratio8to7
+    }
+  },
+  /* micro */
+  {
+    if: {
+      size: 'micro'
+    },
+    tokens: {
+      fontSize: _paletteAllium.default.fontSize.size12,
+      // TODO: replace with font token
+      fontWeight: '500',
+      // font: palette.font.HelveticaNow[500]
+      lineHeight: _paletteAllium.default.lineHeight.ratio4to3
+    }
+  },
+  /* eyebrow */
+  {
+    if: {
+      size: 'eyebrow'
+    },
+    tokens: {
+      fontSize: _paletteAllium.default.fontSize.size14,
+      // TODO: replace with font token
+      fontWeight: '700',
+      // font: palette.font.HelveticaNow[700]
+      textTransform: _rn.default.textTransform.uppercase,
+      lineHeight: _paletteAllium.default.lineHeight.ratio9to7
+    }
+  },
+  /**
+   * bold styles
+   */
+  {
+    if: {
+      size: ['large', null, 'small', 'micro'],
+      bold: true
+    },
+    description: 'Bold is only available on body text styles, not headings',
+    tokens: {
+      // TODO: replace with font token
+      fontWeight: '700' // font: palette.font.HelveticaNow[700]
+
+    }
+  }]
+};
+exports.default = _default;

package/lib/components/index.js

@@ -0,0 +1,303 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "ActivityIndicator", {
+  enumerable: true,
+  get: function () {
+    return _ActivityIndicator.default;
+  }
+});
+Object.defineProperty(exports, "Box", {
+  enumerable: true,
+  get: function () {
+    return _Box.default;
+  }
+});
+Object.defineProperty(exports, "Button", {
+  enumerable: true,
+  get: function () {
+    return _Button.default;
+  }
+});
+Object.defineProperty(exports, "ButtonGroup", {
+  enumerable: true,
+  get: function () {
+    return _ButtonGroup.default;
+  }
+});
+Object.defineProperty(exports, "ButtonGroupItem", {
+  enumerable: true,
+  get: function () {
+    return _ButtonGroupItem.default;
+  }
+});
+Object.defineProperty(exports, "Card", {
+  enumerable: true,
+  get: function () {
+    return _Card.default;
+  }
+});
+Object.defineProperty(exports, "Checkbox", {
+  enumerable: true,
+  get: function () {
+    return _Checkbox.default;
+  }
+});
+Object.defineProperty(exports, "ChevronLink", {
+  enumerable: true,
+  get: function () {
+    return _ChevronLink.default;
+  }
+});
+Object.defineProperty(exports, "Divider", {
+  enumerable: true,
+  get: function () {
+    return _Divider.default;
+  }
+});
+Object.defineProperty(exports, "ExpandCollapse", {
+  enumerable: true,
+  get: function () {
+    return _ExpandCollapse.default;
+  }
+});
+Object.defineProperty(exports, "ExpandCollapseControl", {
+  enumerable: true,
+  get: function () {
+    return _ExpandCollapseControl.default;
+  }
+});
+Object.defineProperty(exports, "ExpandCollapsePanel", {
+  enumerable: true,
+  get: function () {
+    return _ExpandCollapsePanel.default;
+  }
+});
+Object.defineProperty(exports, "Feedback", {
+  enumerable: true,
+  get: function () {
+    return _Feedback.default;
+  }
+});
+Object.defineProperty(exports, "Icon", {
+  enumerable: true,
+  get: function () {
+    return _Icon.default;
+  }
+});
+Object.defineProperty(exports, "InputLabel", {
+  enumerable: true,
+  get: function () {
+    return _InputLabel.default;
+  }
+});
+Object.defineProperty(exports, "InputSupports", {
+  enumerable: true,
+  get: function () {
+    return _InputSupports.default;
+  }
+});
+Object.defineProperty(exports, "Link", {
+  enumerable: true,
+  get: function () {
+    return _Link.default;
+  }
+});
+Object.defineProperty(exports, "List", {
+  enumerable: true,
+  get: function () {
+    return _List.default;
+  }
+});
+Object.defineProperty(exports, "Pagination", {
+  enumerable: true,
+  get: function () {
+    return _Pagination.default;
+  }
+});
+Object.defineProperty(exports, "PaginationPageButton", {
+  enumerable: true,
+  get: function () {
+    return _PaginationPageButton.default;
+  }
+});
+Object.defineProperty(exports, "PaginationSideButton", {
+  enumerable: true,
+  get: function () {
+    return _PaginationSideButton.default;
+  }
+});
+Object.defineProperty(exports, "Radio", {
+  enumerable: true,
+  get: function () {
+    return _Radio.default;
+  }
+});
+Object.defineProperty(exports, "Select", {
+  enumerable: true,
+  get: function () {
+    return _Select.default;
+  }
+});
+Object.defineProperty(exports, "SideNav", {
+  enumerable: true,
+  get: function () {
+    return _SideNav.default;
+  }
+});
+Object.defineProperty(exports, "SideNavItem", {
+  enumerable: true,
+  get: function () {
+    return _SideNavItem.default;
+  }
+});
+Object.defineProperty(exports, "SideNavItemsGroup", {
+  enumerable: true,
+  get: function () {
+    return _SideNavItemsGroup.default;
+  }
+});
+Object.defineProperty(exports, "Skeleton", {
+  enumerable: true,
+  get: function () {
+    return _Skeleton.default;
+  }
+});
+Object.defineProperty(exports, "StackView", {
+  enumerable: true,
+  get: function () {
+    return _StackView.default;
+  }
+});
+Object.defineProperty(exports, "Tags", {
+  enumerable: true,
+  get: function () {
+    return _Tags.default;
+  }
+});
+Object.defineProperty(exports, "TagsItem", {
+  enumerable: true,
+  get: function () {
+    return _TagsItem.default;
+  }
+});
+Object.defineProperty(exports, "TextArea", {
+  enumerable: true,
+  get: function () {
+    return _TextArea.default;
+  }
+});
+Object.defineProperty(exports, "TextInput", {
+  enumerable: true,
+  get: function () {
+    return _TextInput.default;
+  }
+});
+Object.defineProperty(exports, "ToggleSwitch", {
+  enumerable: true,
+  get: function () {
+    return _ToggleSwitch.default;
+  }
+});
+Object.defineProperty(exports, "Tooltip", {
+  enumerable: true,
+  get: function () {
+    return _Tooltip.default;
+  }
+});
+Object.defineProperty(exports, "TooltipButton", {
+  enumerable: true,
+  get: function () {
+    return _TooltipButton.default;
+  }
+});
+Object.defineProperty(exports, "Typography", {
+  enumerable: true,
+  get: function () {
+    return _Typography.default;
+  }
+});
+Object.defineProperty(exports, "spacingScale", {
+  enumerable: true,
+  get: function () {
+    return _spacingScale.default;
+  }
+});
+
+var _ActivityIndicator = _interopRequireDefault(require("./ActivityIndicator"));
+
+var _Box = _interopRequireDefault(require("./Box"));
+
+var _Button = _interopRequireDefault(require("./Button"));
+
+var _ButtonGroup = _interopRequireDefault(require("./ButtonGroup"));
+
+var _ButtonGroupItem = _interopRequireDefault(require("./ButtonGroupItem"));
+
+var _Card = _interopRequireDefault(require("./Card"));
+
+var _Checkbox = _interopRequireDefault(require("./Checkbox"));
+
+var _ChevronLink = _interopRequireDefault(require("./ChevronLink"));
+
+var _Divider = _interopRequireDefault(require("./Divider"));
+
+var _ExpandCollapse = _interopRequireDefault(require("./ExpandCollapse"));
+
+var _ExpandCollapseControl = _interopRequireDefault(require("./ExpandCollapseControl"));
+
+var _ExpandCollapsePanel = _interopRequireDefault(require("./ExpandCollapsePanel"));
+
+var _Feedback = _interopRequireDefault(require("./Feedback"));
+
+var _Icon = _interopRequireDefault(require("./Icon"));
+
+var _InputLabel = _interopRequireDefault(require("./InputLabel"));
+
+var _InputSupports = _interopRequireDefault(require("./InputSupports"));
+
+var _Link = _interopRequireDefault(require("./Link"));
+
+var _List = _interopRequireDefault(require("./List"));
+
+var _Pagination = _interopRequireDefault(require("./Pagination"));
+
+var _PaginationPageButton = _interopRequireDefault(require("./PaginationPageButton"));
+
+var _PaginationSideButton = _interopRequireDefault(require("./PaginationSideButton"));
+
+var _Radio = _interopRequireDefault(require("./Radio"));
+
+var _Select = _interopRequireDefault(require("./Select"));
+
+var _SideNav = _interopRequireDefault(require("./SideNav"));
+
+var _SideNavItem = _interopRequireDefault(require("./SideNavItem"));
+
+var _SideNavItemsGroup = _interopRequireDefault(require("./SideNavItemsGroup"));
+
+var _Skeleton = _interopRequireDefault(require("./Skeleton"));
+
+var _StackView = _interopRequireDefault(require("./StackView"));
+
+var _Tags = _interopRequireDefault(require("./Tags"));
+
+var _TagsItem = _interopRequireDefault(require("./TagsItem"));
+
+var _TextArea = _interopRequireDefault(require("./TextArea"));
+
+var _TextInput = _interopRequireDefault(require("./TextInput"));
+
+var _ToggleSwitch = _interopRequireDefault(require("./ToggleSwitch"));
+
+var _Tooltip = _interopRequireDefault(require("./Tooltip"));
+
+var _TooltipButton = _interopRequireDefault(require("./TooltipButton"));
+
+var _Typography = _interopRequireDefault(require("./Typography"));
+
+var _spacingScale = _interopRequireDefault(require("./spacingScale"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }