@telus-uds/components-base 2.4.0 → 3.0.0

package/lib/cjs/Progress/ProgressBarBackground.js

@@ -0,0 +1,49 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _ImageBackground = _interopRequireDefault(require("react-native-web/dist/cjs/exports/ImageBackground"));
+var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
+var _constants = require("./constants");
+var _utils = require("../utils");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const inactiveBackground = `%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='24'%3E%3Cdefs%3E%3Cpattern id='inactive' patternUnits='userSpaceOnUse' width='8' height='8'%3E%3Crect width='8' height='8' fill='rgba(255, 255, 255, 0)'%3E%3C/rect%3E%3Ccircle cx='4' cy='4' r='2' fill='rgba(0, 0, 0, 0.4)' stroke='rgba(0, 0, 0, 0.4)' stroke-width='0'%3E%3C/circle%3E%3Ccircle cx='0' cy='0' r='2' fill='rgba(0, 0, 0, 0.4)' stroke='rgba(0, 0, 0, 0.4)' stroke-width='0'%3E%3C/circle%3E%3Ccircle cx='0' cy='8' r='2' fill='rgba(0, 0, 0, 0.4)' stroke='rgba(0, 0, 0, 0.4)' stroke-width='0'%3E%3C/circle%3E%3Ccircle cx='8' cy='0' r='2' fill='rgba(0, 0, 0, 0.4)' stroke='rgba(0, 0, 0, 0.4)' stroke-width='0'%3E%3C/circle%3E%3Ccircle cx='8' cy='8' r='2' fill='rgba(0, 0, 0, 0.4)' stroke='rgba(0, 0, 0, 0.4)' stroke-width='0'%3E%3C/circle%3E%3C/pattern%3E%3C/defs%3E%3Cpath d='M 0 0 L 0 140 L 2000 2000 L 2000 0 Z' style='fill: url("%23inactive");'%3E%3C/path%3E%3C/svg%3E`;
+const negativeBackground = `%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='24'%3E%3Cdefs%3E%3Cpattern id='negative' patternUnits='userSpaceOnUse' width='8' height='8'%3E%3Crect width='8' height='8' fill='rgba(255, 255, 255, 0)'%3E%3C/rect%3E%3Cpath d='M 0,8 l 8,-8 M -2,2 l 4,-4 M 6,10 l 4,-4' stroke-width='1' shape-rendering='auto' stroke='rgba(255, 255, 255, 0.4)' stroke-linecap='square'%3E%3C/path%3E%3C/pattern%3E%3C/defs%3E%3Cpath d='M 0 0 L 0 140 L 2000 2000 L 2000 0 Z' style='fill: url("%23negative");'%3E%3C/path%3E%3C/svg%3E`;
+const ProgressBarBackground = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+  let {
+    variant
+  } = _ref;
+  let source = null;
+  // TODO: Remove the `variant?.inactive` & `variant?.negative` to complete the deprecation
+  if (variant?.inactive || variant?.style === _constants.INACTIVE_VARIANT) {
+    source = inactiveBackground;
+  } else if (variant?.negative || variant?.style === _constants.NEGATIVE_VARIANT) {
+    source = negativeBackground;
+  } else {
+    return null;
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ImageBackground.default, {
+    ref: ref,
+    source: {
+      uri: `data:image/svg+xml,${source}`
+    },
+    style: staticStyles.imageBackground
+  });
+});
+ProgressBarBackground.displayName = 'ProgressBarBackground';
+ProgressBarBackground.propTypes = {
+  /**
+   * Progress bar variant.
+   */
+  variant: _utils.variantProp.propType
+};
+var _default = exports.default = ProgressBarBackground;
+const staticStyles = _StyleSheet.default.create({
+  imageBackground: {
+    height: '100%'
+  }
+});

package/lib/cjs/Progress/constants.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.NEGATIVE_VARIANT = exports.MIN_PERCENT_VALUE = exports.MAX_PERCENT_VALUE = exports.INACTIVE_VARIANT = void 0;
+const MAX_PERCENT_VALUE = exports.MAX_PERCENT_VALUE = 100;
+const MIN_PERCENT_VALUE = exports.MIN_PERCENT_VALUE = 0;
+const INACTIVE_VARIANT = exports.INACTIVE_VARIANT = 'inactive';
+const NEGATIVE_VARIANT = exports.NEGATIVE_VARIANT = 'negative';

package/lib/cjs/Progress/index.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _Progress = _interopRequireDefault(require("./Progress"));
+var _ProgressBar = _interopRequireDefault(require("./ProgressBar"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+_Progress.default.Bar = _ProgressBar.default;
+var _default = exports.default = _Progress.default;

package/lib/cjs/QuickLinks/QuickLinks.js

@@ -0,0 +1,83 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _ThemeProvider = require("../ThemeProvider");
+var _ViewportProvider = require("../ViewportProvider");
+var _utils = require("../utils");
+var _List = _interopRequireDefault(require("../List"));
+var _StackWrap = _interopRequireDefault(require("../StackView/StackWrap"));
+var _QuickLinksCard = _interopRequireDefault(require("./QuickLinksCard"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/**
+ * QuickLinks renders a list of interactive items. How it renders these items depends on theme options:
+ *  - If the theme returns `list` token as true, it renders an ordered list based on List
+ *  - If the theme returns `button` token as true and `list` as false, it renders a wrapping horizontal bar of buttons
+ *  - If the theme returns `card` token as true, it wraps the above with a `Card`.
+ */const QuickLinks = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+  let {
+    tokens,
+    variant,
+    listTokens,
+    cardTokens,
+    children,
+    tag = 'ul',
+    ...rest
+  } = _ref;
+  const viewport = (0, _ViewportProvider.useViewport)();
+  const {
+    dividers,
+    list,
+    card,
+    stackSpace,
+    stackGap,
+    stackJustify
+  } = (0, _ThemeProvider.useThemeTokens)('QuickLinks', tokens, variant, {
+    viewport
+  });
+  const content = list && /*#__PURE__*/(0, _jsxRuntime.jsx)(_List.default, {
+    ref: ref,
+    tokens: listTokens,
+    showDivider: dividers,
+    tag: tag,
+    ...rest,
+    children: children
+  }) || /*#__PURE__*/(0, _jsxRuntime.jsx)(_StackWrap.default, {
+    space: stackSpace,
+    gap: stackGap,
+    tokens: {
+      justifyContent: stackJustify
+    },
+    tag: tag,
+    ...rest,
+    children: children
+  });
+  return card ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_QuickLinksCard.default, {
+    tokens: cardTokens,
+    children: content
+  }) : content;
+});
+QuickLinks.displayName = 'QuickLinks';
+QuickLinks.propTypes = {
+  tokens: (0, _utils.getTokensPropType)('QuickLinks'),
+  /**
+   * Custom tokens override for `Card`
+   */
+  cardTokens: (0, _utils.getTokensPropType)('Card'),
+  /**
+   * Custom tokens override for `QuickLinksList`
+   */
+  listTokens: (0, _utils.getTokensPropType)('QuickLinksList'),
+  /**
+   * The HTML tag to render the list as
+   */
+  tag: _propTypes.default.string,
+  variant: _utils.variantProp.propType,
+  children: _propTypes.default.node
+};
+var _default = exports.default = QuickLinks;

package/lib/cjs/QuickLinks/QuickLinksCard.js

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _ThemeProvider = require("../ThemeProvider");
+var _utils = require("../utils");
+var _CardBase = _interopRequireDefault(require("../Card/CardBase"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/**
+ * Private subcomponent for use within QuickLinks.
+ *
+ * Restyled Card with identical behaviour to Card, but themed according to the
+ * QuickLinksCard theme rather than the Card theme.
+ */const QuickLinksList = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+  let {
+    tokens,
+    variant,
+    children
+  } = _ref;
+  const themeTokens = (0, _ThemeProvider.useThemeTokens)('QuickLinksCard', tokens, variant);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardBase.default, {
+    tokens: themeTokens,
+    ref: ref,
+    children: children
+  });
+});
+QuickLinksList.displayName = 'QuickLinksList';
+QuickLinksList.propTypes = {
+  tokens: (0, _utils.getTokensPropType)('QuickLinksCard'),
+  variant: _utils.variantProp.propType,
+  children: _propTypes.default.node
+};
+var _default = exports.default = QuickLinksList;

package/lib/cjs/QuickLinks/QuickLinksItem.js

@@ -0,0 +1,56 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _utils = require("../utils");
+var _ViewportProvider = require("../ViewportProvider");
+var _ThemeProvider = require("../ThemeProvider");
+var _PressableListItemBase = _interopRequireDefault(require("../List/PressableListItemBase"));
+var _ButtonBase = _interopRequireDefault(require("../Button/ButtonBase"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/**
+ * Public component exported as QuickLinks.Item, for use as children of QuickLinks.
+ *
+ * Receives props injected by QuickLinks and renders the appropriate child component.
+ */const QuickLinksItem = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+  let {
+    tokens,
+    variant,
+    children,
+    ...rest
+  } = _ref;
+  const viewport = (0, _ViewportProvider.useViewport)();
+  const {
+    list
+  } = (0, _ThemeProvider.useThemeTokens)('QuickLinks', tokens, variant, {
+    viewport
+  });
+  const themeName = list ? 'QuickLinksList' : 'QuickLinksButton';
+  const getTokens = (0, _ThemeProvider.useThemeTokensCallback)(themeName, tokens, variant);
+  return list ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_PressableListItemBase.default, {
+    ref: ref,
+    tokens: getTokens,
+    ...rest,
+    children: children
+  }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonBase.default, {
+    ref: ref,
+    tokens: getTokens,
+    ...rest,
+    children: children
+  });
+});
+QuickLinksItem.displayName = 'QuickLinksItem';
+QuickLinksItem.propTypes = {
+  ..._utils.withLinkRouter.propTypes,
+  ..._PressableListItemBase.default.propTypes,
+  ..._ButtonBase.default.propTypes,
+  tokens: (0, _utils.getTokensPropType)('QuickLinksList', 'QuickLinksButton'),
+  variant: _utils.variantProp.propType,
+  children: _propTypes.default.node
+};
+var _default = exports.default = (0, _utils.withLinkRouter)(QuickLinksItem);

package/lib/cjs/QuickLinks/index.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _QuickLinks = _interopRequireDefault(require("./QuickLinks"));
+var _QuickLinksItem = _interopRequireDefault(require("./QuickLinksItem"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+_QuickLinks.default.Item = _QuickLinksItem.default;
+var _default = exports.default = _QuickLinks.default;

package/lib/cjs/QuickLinksFeature/QuickLinksFeature.js

@@ -0,0 +1,74 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _StackView = require("../StackView");
+var _ViewportProvider = require("../ViewportProvider");
+var _ThemeProvider = require("../ThemeProvider");
+var _utils = require("../utils");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+// pass through and type relevant system props - add more sets for interactive components
+const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
+const isQuickListItem = element => {
+  const elementName = element?.type?.displayName || element?.type?.name;
+  return Boolean(elementName.match(/QuickLinksFeatureItem/));
+};
+
+/**
+ * QuickLinksFeature renders a list of interactive items.
+ *  - This is the base component that is used as a wrapper and accepts a List of `QuickLinksFeature.Item`
+ */
+const QuickLinksFeature = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+  let {
+    tokens,
+    variant,
+    tag = 'ul',
+    children,
+    ...rest
+  } = _ref;
+  const viewport = (0, _ViewportProvider.useViewport)();
+  const {
+    stackGap,
+    stackJustify,
+    stackSpace
+  } = (0, _ThemeProvider.useThemeTokens)('QuickLinksFeature', tokens, variant, {
+    viewport
+  });
+  const items = _react.default.Children.map(children, child => {
+    if (isQuickListItem(child)) {
+      return /*#__PURE__*/_react.default.cloneElement(child, child.props);
+    }
+    return null;
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_StackView.StackWrap, {
+    space: stackSpace,
+    gap: stackGap,
+    tokens: {
+      justifyContent: stackJustify
+    },
+    tag: tag,
+    ref: ref,
+    ...selectProps(rest),
+    children: items
+  });
+});
+QuickLinksFeature.displayName = 'QuickLinksFeature';
+QuickLinksFeature.propTypes = {
+  ...selectedSystemPropTypes,
+  tokens: (0, _utils.getTokensPropType)('QuickLinksFeature'),
+  variant: _utils.variantProp.propType,
+  /**
+   * Default wrapper tag, by default it's "ul"
+   */
+  tag: _propTypes.default.string,
+  /**
+   * QuickLinksFeature.Item component
+   */
+  children: _propTypes.default.node
+};
+var _default = exports.default = QuickLinksFeature;

package/lib/cjs/QuickLinksFeature/QuickLinksFeatureItem.js

@@ -0,0 +1,152 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _Image = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Image"));
+var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
+var _Text = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Text"));
+var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
+var _utils = require("../utils");
+var _ViewportProvider = require("../ViewportProvider");
+var _ThemeProvider = require("../ThemeProvider");
+var _Link = require("../Link");
+var _StackView = require("../StackView");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+// pass through and type relevant system props - add more sets for interactive components
+const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.linkProps]);
+const selectImageStyle = imageDimension => ({
+  width: imageDimension,
+  height: imageDimension,
+  ..._Platform.default.select({
+    // TODO: https://github.com/telus/universal-design-system/issues/487
+    web: {
+      transition: 'width 200ms, height 200ms'
+    }
+  })
+});
+const selectContainerStyle = _ref => {
+  let {
+    contentMaxDimension,
+    textAlign
+  } = _ref;
+  return {
+    textAlign,
+    outline: 'red',
+    width: contentMaxDimension,
+    overflow: 'hidden'
+  };
+};
+const selectImageContainerStyle = contentMaxDimension => ({
+  width: contentMaxDimension,
+  height: contentMaxDimension,
+  justifyContent: 'center',
+  alignItems: 'center'
+});
+const selectLinkToken = _ref2 => {
+  let {
+    outerBorderColor
+  } = _ref2;
+  return {
+    outerBorderColor
+  };
+};
+
+/**
+ * Component export along with QuickLinksFeature to be used as children
+ *
+ * It will receive a image source and a accessibility label and will render a link accordingly with the theme tokens
+ */
+const QuickLinksFeatureItem = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
+  let {
+    tokens,
+    variant,
+    children,
+    imageAccessibilityLabel,
+    imageSource,
+    ...rest
+  } = _ref3;
+  const viewport = (0, _ViewportProvider.useViewport)();
+  const getTokens = (0, _ThemeProvider.useThemeTokensCallback)('QuickLinksFeatureItem', tokens, variant);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Link.Link, {
+    ref: ref,
+    ...selectProps(rest),
+    tokens: state => selectLinkToken(getTokens(state)),
+    children: _ref4 => {
+      let {
+        hovered: hover,
+        pressed,
+        focused: focus
+      } = _ref4;
+      const {
+        contentDirection,
+        contentSpace,
+        contentAlignItems,
+        contentMaxDimension,
+        imageDimension,
+        textLine,
+        gap,
+        ...themeTokens
+      } = getTokens({
+        viewport,
+        hover,
+        pressed,
+        focus
+      });
+      const textStyle = {
+        ...(0, _ThemeProvider.applyTextStyles)(themeTokens),
+        textDecorationLine: textLine
+      };
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+        style: selectContainerStyle({
+          ...themeTokens,
+          contentMaxDimension
+        }),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_StackView.StackWrap, {
+          direction: contentDirection,
+          space: contentSpace,
+          gap: gap,
+          tokens: {
+            alignItems: contentAlignItems
+          },
+          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
+            style: selectImageContainerStyle(contentMaxDimension),
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Image.default, {
+              accessibilityIgnoresInvertColors: true,
+              imageAccessibilityLabel: imageAccessibilityLabel,
+              source: imageSource,
+              style: selectImageStyle(imageDimension)
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
+              style: textStyle,
+              children: children
+            })]
+          })
+        })
+      });
+    }
+  });
+});
+QuickLinksFeatureItem.displayName = 'QuickLinksFeatureItem';
+QuickLinksFeatureItem.propTypes = {
+  ..._utils.withLinkRouter.propTypes,
+  ...selectedSystemPropTypes,
+  tokens: (0, _utils.getTokensPropType)('QuickLinksFeatureItem'),
+  variant: _utils.variantProp.propType,
+  /**
+   * Text which will be rendered within the Link
+   */
+  children: _propTypes.default.node.isRequired,
+  /**
+   * Image accessibility label
+   */
+  imageAccessibilityLabel: _propTypes.default.string.isRequired,
+  /**
+   * Image node or Image url
+   */
+  imageSource: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]).isRequired
+};
+var _default = exports.default = (0, _utils.withLinkRouter)(QuickLinksFeatureItem);

package/lib/cjs/QuickLinksFeature/index.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _QuickLinksFeature = _interopRequireDefault(require("./QuickLinksFeature"));
+var _QuickLinksFeatureItem = _interopRequireDefault(require("./QuickLinksFeatureItem"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+_QuickLinksFeature.default.Item = _QuickLinksFeatureItem.default;
+var _default = exports.default = _QuickLinksFeature.default;