@telus-uds/components-web 1.0.0

package/CHANGELOG.md

@@ -0,0 +1,15 @@
+# Change Log - @telus-uds/components-web
+
+This log was last generated on Thu, 23 Mar 2023 20:46:10 GMT and should not be manually modified.
+
+<!-- Start content -->
+
+## 1.0.0
+
+Thu, 23 Mar 2023 20:46:10 GMT
+
+### Major changes
+
+- Multi-brand badge component (srikanthkhari@gmail.com)
+- Bump @telus-uds/components-base to v1.30.1
+- Bump @telus-uds/system-theme-tokens to v2.14.0

package/README.md

@@ -0,0 +1 @@
+# Web Components

package/lib/Badge/Badge.js

@@ -0,0 +1,124 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _componentsBase = require("@telus-uds/components-base");
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _utils = require("../utils");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const [selectProps, selectedSystemPropTypes] = (0, _componentsBase.selectSystemProps)([_utils.htmlAttrs]);
+
+const BadgeContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
+  displayName: "Badge__BadgeContainer",
+  componentId: "components-web__sc-tsiuo2-0"
+})(["background:", ";border:", ";display:inline-flex;justify-content:center;padding:", ";border-radius:", ";width:fit-content;", ""], _ref => {
+  let {
+    background
+  } = _ref;
+  return background;
+}, _ref2 => {
+  let {
+    border
+  } = _ref2;
+  return border;
+}, _ref3 => {
+  let {
+    padding
+  } = _ref3;
+  return padding;
+}, _ref4 => {
+  let {
+    radius
+  } = _ref4;
+  return radius;
+}, _ref5 => {
+  let {
+    isOutlineOffer,
+    isAlternative,
+    gradient
+  } = _ref5;
+  return (isOutlineOffer || isAlternative) && "\n    > div {\n      background: ".concat(gradient, ";\n\t    -webkit-background-clip: text;\n\t    ").concat(gradient && '-webkit-text-fill-color: transparent;', "\n    }");
+});
+
+const Badge = _ref6 => {
+  let {
+    children,
+    tokens,
+    variant = {},
+    ...rest
+  } = _ref6;
+  const {
+    backgroundColor,
+    gradient,
+    borderColor,
+    borderRadius,
+    borderWidth,
+    color,
+    paddingLeft,
+    paddingRight,
+    paddingTop,
+    paddingBottom,
+    fontName,
+    fontWeight
+  } = (0, _componentsBase.useThemeTokens)('Badge', tokens, variant);
+  const semanticGradient = gradient && (0, _utils.transformGradient)(gradient);
+  const {
+    outline,
+    purpose,
+    alternative
+  } = variant;
+  let background = backgroundColor;
+  const isOutlineOffer = purpose === 'offer' && outline;
+
+  if ((isOutlineOffer || alternative) && gradient) {
+    background = "linear-gradient(#fff 0 0) padding-box, ".concat(semanticGradient, " border-box");
+  } else if (purpose === 'offer' && gradient) {
+    background = semanticGradient;
+  }
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(BadgeContainer, {
+    isOutlineOffer: isOutlineOffer,
+    isAlternative: alternative,
+    padding: "".concat(paddingTop, "px ").concat(paddingRight, "px ").concat(paddingBottom, "px ").concat(paddingLeft, "px"),
+    radius: "".concat(borderRadius, "px"),
+    background: background,
+    fontName: fontName,
+    fontWeight: fontWeight,
+    gradient: semanticGradient,
+    border: "".concat(borderWidth, "px solid ").concat(borderColor),
+    ...selectProps(rest),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
+      tokens: {
+        fontName,
+        fontWeight,
+        color
+      },
+      children: children
+    })
+  });
+};
+
+Badge.propTypes = { ...selectedSystemPropTypes,
+  children: _propTypes.default.node,
+  tokens: (0, _componentsBase.getTokensPropType)('Badge'),
+  variant: _propTypes.default.exact({
+    outline: _propTypes.default.bool,
+    purpose: _propTypes.default.oneOf(['offer', 'editorial']),
+    alternative: _propTypes.default.bool
+  })
+};
+var _default = Badge;
+exports.default = _default;

package/lib/Badge/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _Badge = _interopRequireDefault(require("./Badge"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = _Badge.default;
+exports.default = _default;

package/lib/baseExports.js

@@ -0,0 +1,367 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "A11yInfoProvider", {
+  enumerable: true,
+  get: function () {
+    return _componentsBase.A11yInfoProvider;
+  }
+});
+Object.defineProperty(exports, "A11yText", {
+  enumerable: true,
+  get: function () {
+    return _componentsBase.A11yText;
+  }
+});
+Object.defineProperty(exports, "ActivityIndicator", {
+  enumerable: true,
+  get: function () {
+    return _componentsBase.ActivityIndicator;
+  }
+});
+Object.defineProperty(exports, "BaseProvider", {
+  enumerable: true,
+  get: function () {
+    return _componentsBase.BaseProvider;
+  }
+});
+Object.defineProperty(exports, "Box", {
+  enumerable: true,
+  get: function () {
+    return _componentsBase.Box;
+  }
+});
+Object.defineProperty(exports, "Button", {
+  enumerable: true,
+  get: function () {
+    return _componentsBase.Button;
+  }
+});
+Object.defineProperty(exports, "ButtonDropdown", {
+  enumerable: true,
+  get: function () {
+    return _componentsBase.ButtonDropdown;
+  }
+});
+Object.defineProperty(exports, "ButtonGroup", {
+  enumerable: true,
+  get: function () {
+    return _componentsBase.ButtonGroup;
+  }
+});
+Object.defineProperty(exports, "ButtonLink", {
+  enumerable: true,
+  get: function () {
+    return _componentsBase.ButtonLink;
+  }
+});
+Object.defineProperty(exports, "Card", {
+  enumerable: true,
+  get: function () {
+    return _componentsBase.Card;
+  }
+});
+Object.defineProperty(exports, "Carousel", {
+  enumerable: true,
+  get: function () {
+    return _componentsBase.Carousel;
+  }
+});
+Object.defineProperty(exports, "CarouselTabs", {
+  enumerable: true,
+  get: function () {
+    return _componentsBase.CarouselTabs;
+  }
+});
+Object.defineProperty(exports, "Checkbox", {
+  enumerable: true,
+  get: function () {
+    return _componentsBase.Checkbox;
+  }
+});
+Object.defineProperty(exports, "CheckboxGroup", {
+  enumerable: true,
+  get: function () {
+    return _componentsBase.CheckboxGroup;
+  }
+});
+Object.defineProperty(exports, "ChevronLink", {
+  enumerable: true,
+  get: function () {
+    return _componentsBase.ChevronLink;
+  }
+});
+Object.defineProperty(exports, "Divider", {
+  enumerable: true,
+  get: function () {
+    return _componentsBase.Divider;
+  }
+});
+Object.defineProperty(exports, "ExpandCollapse", {
+  enumerable: true,
+  get: function () {
+    return _componentsBase.ExpandCollapse;
+  }
+});
+Object.defineProperty(exports, "Feedback", {
+  enumerable: true,
+  get: function () {
+    return _componentsBase.Feedback;
+  }
+});
+Object.defineProperty(exports, "FlexGrid", {
+  enumerable: true,
+  get: function () {
+    return _componentsBase.FlexGrid;
+  }
+});
+Object.defineProperty(exports, "Icon", {
+  enumerable: true,
+  get: function () {
+    return _componentsBase.Icon;
+  }
+});
+Object.defineProperty(exports, "IconButton", {
+  enumerable: true,
+  get: function () {
+    return _componentsBase.IconButton;
+  }
+});
+Object.defineProperty(exports, "InputLabel", {
+  enumerable: true,
+  get: function () {
+    return _componentsBase.InputLabel;
+  }
+});
+Object.defineProperty(exports, "InputSupports", {
+  enumerable: true,
+  get: function () {
+    return _componentsBase.InputSupports;
+  }
+});
+Object.defineProperty(exports, "Link", {
+  enumerable: true,
+  get: function () {
+    return _componentsBase.Link;
+  }
+});
+Object.defineProperty(exports, "Modal", {
+  enumerable: true,
+  get: function () {
+    return _componentsBase.Modal;
+  }
+});
+Object.defineProperty(exports, "MultiSelectFilter", {
+  enumerable: true,
+  get: function () {
+    return _componentsBase.MultiSelectFilter;
+  }
+});
+Object.defineProperty(exports, "Notification", {
+  enumerable: true,
+  get: function () {
+    return _componentsBase.Notification;
+  }
+});
+Object.defineProperty(exports, "Pagination", {
+  enumerable: true,
+  get: function () {
+    return _componentsBase.Pagination;
+  }
+});
+Object.defineProperty(exports, "QuickLinks", {
+  enumerable: true,
+  get: function () {
+    return _componentsBase.QuickLinks;
+  }
+});
+Object.defineProperty(exports, "QuickLinksFeature", {
+  enumerable: true,
+  get: function () {
+    return _componentsBase.QuickLinksFeature;
+  }
+});
+Object.defineProperty(exports, "Radio", {
+  enumerable: true,
+  get: function () {
+    return _componentsBase.Radio;
+  }
+});
+Object.defineProperty(exports, "RadioCard", {
+  enumerable: true,
+  get: function () {
+    return _componentsBase.RadioCard;
+  }
+});
+Object.defineProperty(exports, "RadioCardGroup", {
+  enumerable: true,
+  get: function () {
+    return _componentsBase.RadioCardGroup;
+  }
+});
+Object.defineProperty(exports, "RadioGroup", {
+  enumerable: true,
+  get: function () {
+    return _componentsBase.RadioGroup;
+  }
+});
+Object.defineProperty(exports, "Responsive", {
+  enumerable: true,
+  get: function () {
+    return _componentsBase.Responsive;
+  }
+});
+Object.defineProperty(exports, "Search", {
+  enumerable: true,
+  get: function () {
+    return _componentsBase.Search;
+  }
+});
+Object.defineProperty(exports, "Select", {
+  enumerable: true,
+  get: function () {
+    return _componentsBase.Select;
+  }
+});
+Object.defineProperty(exports, "SideNav", {
+  enumerable: true,
+  get: function () {
+    return _componentsBase.SideNav;
+  }
+});
+Object.defineProperty(exports, "Skeleton", {
+  enumerable: true,
+  get: function () {
+    return _componentsBase.Skeleton;
+  }
+});
+Object.defineProperty(exports, "SkipLink", {
+  enumerable: true,
+  get: function () {
+    return _componentsBase.SkipLink;
+  }
+});
+Object.defineProperty(exports, "Spacer", {
+  enumerable: true,
+  get: function () {
+    return _componentsBase.Spacer;
+  }
+});
+Object.defineProperty(exports, "StackView", {
+  enumerable: true,
+  get: function () {
+    return _componentsBase.StackView;
+  }
+});
+Object.defineProperty(exports, "StackWrap", {
+  enumerable: true,
+  get: function () {
+    return _componentsBase.StackWrap;
+  }
+});
+Object.defineProperty(exports, "StepTracker", {
+  enumerable: true,
+  get: function () {
+    return _componentsBase.StepTracker;
+  }
+});
+Object.defineProperty(exports, "Tabs", {
+  enumerable: true,
+  get: function () {
+    return _componentsBase.Tabs;
+  }
+});
+Object.defineProperty(exports, "Tags", {
+  enumerable: true,
+  get: function () {
+    return _componentsBase.Tags;
+  }
+});
+Object.defineProperty(exports, "TextArea", {
+  enumerable: true,
+  get: function () {
+    return _componentsBase.TextArea;
+  }
+});
+Object.defineProperty(exports, "TextButton", {
+  enumerable: true,
+  get: function () {
+    return _componentsBase.TextButton;
+  }
+});
+Object.defineProperty(exports, "TextInput", {
+  enumerable: true,
+  get: function () {
+    return _componentsBase.TextInput;
+  }
+});
+Object.defineProperty(exports, "ThemeProvider", {
+  enumerable: true,
+  get: function () {
+    return _componentsBase.ThemeProvider;
+  }
+});
+Object.defineProperty(exports, "Timeline", {
+  enumerable: true,
+  get: function () {
+    return _componentsBase.Timeline;
+  }
+});
+Object.defineProperty(exports, "ToggleSwitch", {
+  enumerable: true,
+  get: function () {
+    return _componentsBase.ToggleSwitch;
+  }
+});
+Object.defineProperty(exports, "ToggleSwitchGroup", {
+  enumerable: true,
+  get: function () {
+    return _componentsBase.ToggleSwitchGroup;
+  }
+});
+Object.defineProperty(exports, "Tooltip", {
+  enumerable: true,
+  get: function () {
+    return _componentsBase.Tooltip;
+  }
+});
+Object.defineProperty(exports, "TooltipButton", {
+  enumerable: true,
+  get: function () {
+    return _componentsBase.TooltipButton;
+  }
+});
+Object.defineProperty(exports, "Typography", {
+  enumerable: true,
+  get: function () {
+    return _componentsBase.Typography;
+  }
+});
+Object.defineProperty(exports, "ViewportProvider", {
+  enumerable: true,
+  get: function () {
+    return _componentsBase.ViewportProvider;
+  }
+});
+Object.defineProperty(exports, "useCarousel", {
+  enumerable: true,
+  get: function () {
+    return _componentsBase.useCarousel;
+  }
+});
+Object.defineProperty(exports, "useResponsiveProp", {
+  enumerable: true,
+  get: function () {
+    return _componentsBase.useResponsiveProp;
+  }
+});
+Object.defineProperty(exports, "useViewport", {
+  enumerable: true,
+  get: function () {
+    return _componentsBase.useViewport;
+  }
+});
+
+var _componentsBase = require("@telus-uds/components-base");

package/lib/index.js

@@ -0,0 +1,41 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  Badge: true,
+  transformGradient: true
+};
+Object.defineProperty(exports, "Badge", {
+  enumerable: true,
+  get: function () {
+    return _Badge.default;
+  }
+});
+Object.defineProperty(exports, "transformGradient", {
+  enumerable: true,
+  get: function () {
+    return _utils.transformGradient;
+  }
+});
+
+var _Badge = _interopRequireDefault(require("./Badge"));
+
+var _utils = require("./utils");
+
+var _baseExports = require("./baseExports");
+
+Object.keys(_baseExports).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _baseExports[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _baseExports[key];
+    }
+  });
+});
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/utils/htmlAttrs.js

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const htmlAttrTypes = {
+  dataSet: _propTypes.default.object,
+  id: _propTypes.default.string,
+  loading: _propTypes.default.oneOf(['eager', 'lazy']),
+  // @todo figure out if we need to enum all the possible roles or maybe use
+  // an npm package
+  role: _propTypes.default.string,
+  src: _propTypes.default.string,
+  tabIndex: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
+  testID: _propTypes.default.string,
+  title: _propTypes.default.string
+};
+var _default = {
+  types: htmlAttrTypes,
+  select: props => Object.entries(props).reduce((items, _ref) => {
+    let [key, value] = _ref;
+    return Object.keys(htmlAttrTypes).includes(key) || /^(data|aria)-/.test(key) ? { ...items,
+      [key]: value
+    } : items;
+  }, {})
+};
+exports.default = _default;

package/lib/utils/index.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "htmlAttrs", {
+  enumerable: true,
+  get: function () {
+    return _htmlAttrs.default;
+  }
+});
+Object.defineProperty(exports, "transformGradient", {
+  enumerable: true,
+  get: function () {
+    return _transforms.transformGradient;
+  }
+});
+
+var _transforms = require("./transforms");
+
+var _htmlAttrs = _interopRequireDefault(require("./htmlAttrs"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/utils/transforms.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.transformGradient = exports.default = void 0;
+
+const transformGradient = gradient => "".concat(gradient.type, "-gradient(").concat(gradient.angle, "deg, ").concat(gradient.stops[0].color, " ").concat(gradient.stops[0].stop * 100, "%, ").concat(gradient.stops[1].color, " ").concat(gradient.stops[1].stop * 100, "%)");
+
+exports.transformGradient = transformGradient;
+var _default = {
+  transformGradient
+};
+exports.default = _default;

package/lib-module/Badge/Badge.js

@@ -0,0 +1,107 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { selectSystemProps, Typography, getTokensPropType, useThemeTokens } from '@telus-uds/components-base';
+import styled from 'styled-components';
+import { htmlAttrs, transformGradient } from '../utils';
+import { jsx as _jsx } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
+const BadgeContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "Badge__BadgeContainer",
+  componentId: "components-web__sc-tsiuo2-0"
+})(["background:", ";border:", ";display:inline-flex;justify-content:center;padding:", ";border-radius:", ";width:fit-content;", ""], _ref => {
+  let {
+    background
+  } = _ref;
+  return background;
+}, _ref2 => {
+  let {
+    border
+  } = _ref2;
+  return border;
+}, _ref3 => {
+  let {
+    padding
+  } = _ref3;
+  return padding;
+}, _ref4 => {
+  let {
+    radius
+  } = _ref4;
+  return radius;
+}, _ref5 => {
+  let {
+    isOutlineOffer,
+    isAlternative,
+    gradient
+  } = _ref5;
+  return (isOutlineOffer || isAlternative) && "\n    > div {\n      background: ".concat(gradient, ";\n\t    -webkit-background-clip: text;\n\t    ").concat(gradient && '-webkit-text-fill-color: transparent;', "\n    }");
+});
+
+const Badge = _ref6 => {
+  let {
+    children,
+    tokens,
+    variant = {},
+    ...rest
+  } = _ref6;
+  const {
+    backgroundColor,
+    gradient,
+    borderColor,
+    borderRadius,
+    borderWidth,
+    color,
+    paddingLeft,
+    paddingRight,
+    paddingTop,
+    paddingBottom,
+    fontName,
+    fontWeight
+  } = useThemeTokens('Badge', tokens, variant);
+  const semanticGradient = gradient && transformGradient(gradient);
+  const {
+    outline,
+    purpose,
+    alternative
+  } = variant;
+  let background = backgroundColor;
+  const isOutlineOffer = purpose === 'offer' && outline;
+
+  if ((isOutlineOffer || alternative) && gradient) {
+    background = "linear-gradient(#fff 0 0) padding-box, ".concat(semanticGradient, " border-box");
+  } else if (purpose === 'offer' && gradient) {
+    background = semanticGradient;
+  }
+
+  return /*#__PURE__*/_jsx(BadgeContainer, {
+    isOutlineOffer: isOutlineOffer,
+    isAlternative: alternative,
+    padding: "".concat(paddingTop, "px ").concat(paddingRight, "px ").concat(paddingBottom, "px ").concat(paddingLeft, "px"),
+    radius: "".concat(borderRadius, "px"),
+    background: background,
+    fontName: fontName,
+    fontWeight: fontWeight,
+    gradient: semanticGradient,
+    border: "".concat(borderWidth, "px solid ").concat(borderColor),
+    ...selectProps(rest),
+    children: /*#__PURE__*/_jsx(Typography, {
+      tokens: {
+        fontName,
+        fontWeight,
+        color
+      },
+      children: children
+    })
+  });
+};
+
+Badge.propTypes = { ...selectedSystemPropTypes,
+  children: PropTypes.node,
+  tokens: getTokensPropType('Badge'),
+  variant: PropTypes.exact({
+    outline: PropTypes.bool,
+    purpose: PropTypes.oneOf(['offer', 'editorial']),
+    alternative: PropTypes.bool
+  })
+};
+export default Badge;

package/lib-module/Badge/index.js

@@ -0,0 +1,2 @@
+import Badge from './Badge';
+export default Badge;

package/lib-module/baseExports.js

@@ -0,0 +1,15 @@
+/**
+ * The following are re-exported unchanged from components-base.
+ */
+export {
+/**
+ * Most base components should be re-exported as-is.
+ */
+A11yText, ActivityIndicator, Box, Button, BaseProvider, A11yInfoProvider, ViewportProvider, ThemeProvider, ButtonDropdown, ButtonGroup, ButtonLink, Carousel, Card, CarouselTabs, Checkbox, CheckboxGroup, ChevronLink, Divider, ExpandCollapse, Feedback, FlexGrid, Icon, IconButton, InputLabel, InputSupports, Link, Modal, MultiSelectFilter, Notification, Pagination, QuickLinks, QuickLinksFeature, Radio, RadioGroup, RadioCard, RadioCardGroup, Responsive, Search, Select, SideNav, Skeleton, SkipLink, Spacer, StackView, StackWrap, StepTracker, Tabs, Tags, TextButton, TextArea, TextInput, Timeline, ToggleSwitch, ToggleSwitchGroup, TooltipButton, Tooltip, Typography,
+/*
+ * Most utilities exported from @telus-uds/components-base are for building systems, not apps.
+ * Re-export only those utilities with a stable API and known use cases within apps / pages.
+ */
+// Enable access to the viewports system for app-specific responsive layouts and features
+useResponsiveProp, useViewport, // TODO reenable ViewportContext once published from base  // enable localised viewport overrides e.g. in tests, narrow columns, etc
+useCarousel } from '@telus-uds/components-base';

package/lib-module/index.js

@@ -0,0 +1,3 @@
+export { default as Badge } from './Badge';
+export { transformGradient } from './utils';
+export * from './baseExports';

package/lib-module/utils/htmlAttrs.js

@@ -0,0 +1,22 @@
+import PropTypes from 'prop-types';
+const htmlAttrTypes = {
+  dataSet: PropTypes.object,
+  id: PropTypes.string,
+  loading: PropTypes.oneOf(['eager', 'lazy']),
+  // @todo figure out if we need to enum all the possible roles or maybe use
+  // an npm package
+  role: PropTypes.string,
+  src: PropTypes.string,
+  tabIndex: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  testID: PropTypes.string,
+  title: PropTypes.string
+};
+export default {
+  types: htmlAttrTypes,
+  select: props => Object.entries(props).reduce((items, _ref) => {
+    let [key, value] = _ref;
+    return Object.keys(htmlAttrTypes).includes(key) || /^(data|aria)-/.test(key) ? { ...items,
+      [key]: value
+    } : items;
+  }, {})
+};

package/lib-module/utils/index.js

@@ -0,0 +1,3 @@
+import { transformGradient } from './transforms';
+import htmlAttrs from './htmlAttrs';
+export { htmlAttrs, transformGradient };

package/lib-module/utils/transforms.js

@@ -0,0 +1,4 @@
+export const transformGradient = gradient => "".concat(gradient.type, "-gradient(").concat(gradient.angle, "deg, ").concat(gradient.stops[0].color, " ").concat(gradient.stops[0].stop * 100, "%, ").concat(gradient.stops[1].color, " ").concat(gradient.stops[1].stop * 100, "%)");
+export default {
+  transformGradient
+};

package/package.json

@@ -0,0 +1,57 @@
+{
+  "author": "TELUS Digital",
+  "browserslist": [
+    "extends @telus-uds/browserslist-config"
+  ],
+  "dependencies": {
+    "@telus-uds/components-base": "1.30.1",
+    "@telus-uds/system-constants": "^1.2.0",
+    "@telus-uds/system-theme-tokens": "^2.14.0",
+    "prop-types": "^15.7.2"
+  },
+  "description": "UDS mult-brand web components",
+  "devDependencies": {
+    "@telus-uds/browserslist-config": "^1.0.4",
+    "@testing-library/jest-dom": "^5.16.1",
+    "@testing-library/react": "^13.3.0",
+    "@types/react": "^18.0.0",
+    "assert": "^2.0.0",
+    "babel-plugin-react-native-web": "^0.18.7",
+    "babel-plugin-styled-components": "^2.0.6",
+    "jest-axe": "^6.0.0",
+    "jest-styled-components": "^7.0.8",
+    "react-test-renderer": "~18.0.0",
+    "webpack": "5.x"
+  },
+  "homepage": "https://github.com/telus/universal-design-system#readme",
+  "license": "UNLICENSED",
+  "main": "lib/index.js",
+  "module": "lib-module/index.js",
+  "name": "@telus-uds/components-web",
+  "peerDependencies": {
+    "react": "^17.0.2 || ^18.0.0",
+    "react-dom": "^17.0.2 || ^18.0.0",
+    "react-native-web": "~0.17.7 || ~0.18.7",
+    "styled-components": "^5.3.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/telus/universal-design-system.git"
+  },
+  "scripts": {
+    "build": "npm run build:code",
+    "build:main": "babel src -d lib",
+    "build:module": "babel src -d lib-module --env-name module",
+    "build:code": "npm run build:main && npm run build:module",
+    "format": "prettier --write .",
+    "lint": "telus-standard",
+    "lint:fix": "telus-standard --fix",
+    "test": "jest"
+  },
+  "sideEffects": false,
+  "standard-engine": {
+    "skip": true
+  },
+  "types": "types/index.d.ts",
+  "version": "1.0.0"
+}

package/src/Badge/Badge.jsx

@@ -0,0 +1,88 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import {
+  selectSystemProps,
+  Typography,
+  getTokensPropType,
+  useThemeTokens
+} from '@telus-uds/components-base'
+import styled from 'styled-components'
+import { htmlAttrs, transformGradient } from '../utils'
+
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
+
+const BadgeContainer = styled.div`
+  background: ${({ background }) => background};
+  border: ${({ border }) => border};
+  display: inline-flex;
+  justify-content: center;
+  padding: ${({ padding }) => padding};
+  border-radius: ${({ radius }) => radius};
+  width: fit-content;
+  ${({ isOutlineOffer, isAlternative, gradient }) =>
+    (isOutlineOffer || isAlternative) &&
+    `
+    > div {
+      background: ${gradient};
+	    -webkit-background-clip: text;
+	    ${gradient && '-webkit-text-fill-color: transparent;'}
+    }`}
+`
+
+const Badge = ({ children, tokens, variant = {}, ...rest }) => {
+  const {
+    backgroundColor,
+    gradient,
+    borderColor,
+    borderRadius,
+    borderWidth,
+    color,
+    paddingLeft,
+    paddingRight,
+    paddingTop,
+    paddingBottom,
+    fontName,
+    fontWeight
+  } = useThemeTokens('Badge', tokens, variant)
+
+  const semanticGradient = gradient && transformGradient(gradient)
+
+  const { outline, purpose, alternative } = variant
+  let background = backgroundColor
+  const isOutlineOffer = purpose === 'offer' && outline
+  if ((isOutlineOffer || alternative) && gradient) {
+    background = `linear-gradient(#fff 0 0) padding-box, ${semanticGradient} border-box`
+  } else if (purpose === 'offer' && gradient) {
+    background = semanticGradient
+  }
+
+  return (
+    <BadgeContainer
+      isOutlineOffer={isOutlineOffer}
+      isAlternative={alternative}
+      padding={`${paddingTop}px ${paddingRight}px ${paddingBottom}px ${paddingLeft}px`}
+      radius={`${borderRadius}px`}
+      background={background}
+      fontName={fontName}
+      fontWeight={fontWeight}
+      gradient={semanticGradient}
+      border={`${borderWidth}px solid ${borderColor}`}
+      {...selectProps(rest)}
+    >
+      <Typography tokens={{ fontName, fontWeight, color }}>{children}</Typography>
+    </BadgeContainer>
+  )
+}
+
+Badge.propTypes = {
+  ...selectedSystemPropTypes,
+  children: PropTypes.node,
+  tokens: getTokensPropType('Badge'),
+  variant: PropTypes.exact({
+    outline: PropTypes.bool,
+    purpose: PropTypes.oneOf(['offer', 'editorial']),
+    alternative: PropTypes.bool
+  })
+}
+
+export default Badge

package/src/Badge/index.js

@@ -0,0 +1,3 @@
+import Badge from './Badge'
+
+export default Badge

package/src/baseExports.js

@@ -0,0 +1,73 @@
+/**
+ * The following are re-exported unchanged from components-base.
+ */
+export {
+  /**
+   * Most base components should be re-exported as-is.
+   */
+  A11yText,
+  ActivityIndicator,
+  Box,
+  Button,
+  BaseProvider,
+  A11yInfoProvider,
+  ViewportProvider,
+  ThemeProvider,
+  ButtonDropdown,
+  ButtonGroup,
+  ButtonLink,
+  Carousel,
+  Card,
+  CarouselTabs,
+  Checkbox,
+  CheckboxGroup,
+  ChevronLink,
+  Divider,
+  ExpandCollapse,
+  Feedback,
+  FlexGrid,
+  Icon,
+  IconButton,
+  InputLabel,
+  InputSupports,
+  Link,
+  Modal,
+  MultiSelectFilter,
+  Notification,
+  Pagination,
+  QuickLinks,
+  QuickLinksFeature,
+  Radio,
+  RadioGroup,
+  RadioCard,
+  RadioCardGroup,
+  Responsive,
+  Search,
+  Select,
+  SideNav,
+  Skeleton,
+  SkipLink,
+  Spacer,
+  StackView,
+  StackWrap,
+  StepTracker,
+  Tabs,
+  Tags,
+  TextButton,
+  TextArea,
+  TextInput,
+  Timeline,
+  ToggleSwitch,
+  ToggleSwitchGroup,
+  TooltipButton,
+  Tooltip,
+  Typography,
+  /*
+   * Most utilities exported from @telus-uds/components-base are for building systems, not apps.
+   * Re-export only those utilities with a stable API and known use cases within apps / pages.
+   */
+  // Enable access to the viewports system for app-specific responsive layouts and features
+  useResponsiveProp,
+  useViewport, // TODO reenable ViewportContext once published from base  // enable localised viewport overrides e.g. in tests, narrow columns, etc
+  useCarousel
+} from '@telus-uds/components-base'

package/src/index.js

@@ -0,0 +1,4 @@
+export { default as Badge } from './Badge'
+export { transformGradient } from './utils'
+
+export * from './baseExports'

package/src/utils/htmlAttrs.js

@@ -0,0 +1,29 @@
+import PropTypes from 'prop-types'
+
+const htmlAttrTypes = {
+  dataSet: PropTypes.object,
+  id: PropTypes.string,
+  loading: PropTypes.oneOf(['eager', 'lazy']),
+  // @todo figure out if we need to enum all the possible roles or maybe use
+  // an npm package
+  role: PropTypes.string,
+  src: PropTypes.string,
+  tabIndex: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  testID: PropTypes.string,
+  title: PropTypes.string
+}
+
+export default {
+  types: htmlAttrTypes,
+  select: (props) =>
+    Object.entries(props).reduce(
+      (items, [key, value]) =>
+        Object.keys(htmlAttrTypes).includes(key) || /^(data|aria)-/.test(key)
+          ? {
+              ...items,
+              [key]: value
+            }
+          : items,
+      {}
+    )
+}

package/src/utils/index.js

@@ -0,0 +1,4 @@
+import { transformGradient } from './transforms'
+import htmlAttrs from './htmlAttrs'
+
+export { htmlAttrs, transformGradient }

package/src/utils/transforms.js

@@ -0,0 +1,6 @@
+export const transformGradient = (gradient) =>
+  `${gradient.type}-gradient(${gradient.angle}deg, ${gradient.stops[0].color} ${
+    gradient.stops[0].stop * 100
+  }%, ${gradient.stops[1].color} ${gradient.stops[1].stop * 100}%)`
+
+export default { transformGradient }

package/types/Badge.d.ts

@@ -0,0 +1,11 @@
+import type { ComponentType, ReactNode } from 'react'
+import type { HTMLAttrs, Variant } from './common'
+
+export interface BadgeProps extends HTMLAttrs {
+  children?: ReactNode
+  variant?: Variant
+}
+
+declare const Badge: ComponentType<BadgeProps>
+
+export default Badge