@telus-uds/components-base 2.0.0 → 2.0.2

package/lib/QuickLinksFeature/QuickLinksFeatureItem.js

@@ -1,54 +1,28 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = _interopRequireWildcard(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(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-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; }
+import React from 'react';
+import PropTypes from 'prop-types';
+import Image from "react-native-web/dist/exports/Image";
+import Platform from "react-native-web/dist/exports/Platform";
+import Text from "react-native-web/dist/exports/Text";
+import View from "react-native-web/dist/exports/View";
+import { getTokensPropType, variantProp, withLinkRouter, a11yProps, linkProps, selectSystemProps } from '../utils';
+import { useViewport } from '../ViewportProvider';
+import { applyTextStyles, useThemeTokensCallback } from '../ThemeProvider';
+import { Link } from '../Link';
+import { StackWrap } from '../StackView';
 
 // pass through and type relevant system props - add more sets for interactive components
-const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.linkProps]);
-
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, linkProps]);
 const selectImageStyle = imageDimension => ({
   width: imageDimension,
   height: imageDimension,
-  ..._Platform.default.select({
+  ...Platform.select({
     // TODO: https://github.com/telus/universal-design-system/issues/487
     web: {
       transition: 'width 200ms, height 200ms'
     }
   })
 });
-
 const selectContainerStyle = _ref => {
   let {
     contentMaxDimension,
@@ -56,25 +30,32 @@ const selectContainerStyle = _ref => {
   } = _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__*/(0, _react.forwardRef)((_ref2, ref) => {
+const QuickLinksFeatureItem = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   let {
     tokens,
     variant,
@@ -82,76 +63,84 @@ const QuickLinksFeatureItem = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) =
     imageAccessibilityLabel,
     imageSource,
     ...rest
-  } = _ref2;
-  const viewport = (0, _ViewportProvider.useViewport)();
-  const getTokens = (0, _ThemeProvider.useThemeTokensCallback)('QuickLinksFeatureItem', tokens, variant);
-  const [hover, setHover] = (0, _react.useState)(false);
-  const {
-    contentDirection,
-    contentSpace,
-    contentAlignItems,
-    contentMaxDimension,
-    imageDimension,
-    textAlign
-  } = getTokens({
-    viewport,
-    hover
-  });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Link.Link, {
+  } = _ref3;
+  const viewport = useViewport();
+  const getTokens = useThemeTokensCallback('QuickLinksFeatureItem', tokens, variant);
+  return /*#__PURE__*/_jsx(Link, {
     ref: ref,
-    tokens: state => {
-      setHover(state.hover);
-      return getTokens(state);
-    },
     ...selectProps(rest),
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
-      style: selectContainerStyle({
+    tokens: state => selectLinkToken(getTokens(state)),
+    children: _ref4 => {
+      let {
+        hovered: hover,
+        pressed,
+        focused: focus
+      } = _ref4;
+      const {
+        contentDirection,
+        contentSpace,
+        contentAlignItems,
         contentMaxDimension,
-        textAlign
-      }),
-      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_StackView.StackWrap, {
-        direction: contentDirection,
-        space: contentSpace,
-        tokens: {
-          alignItems: contentAlignItems
-        },
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
-          style: selectImageContainerStyle(contentMaxDimension),
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Image.default, {
-            accessibilityIgnoresInvertColors: true,
-            imageAccessibilityLabel: imageAccessibilityLabel,
-            source: imageSource,
-            style: selectImageStyle(imageDimension)
+        imageDimension,
+        textLine,
+        gap,
+        ...themeTokens
+      } = getTokens({
+        viewport,
+        hover,
+        pressed,
+        focus
+      });
+      const textStyle = {
+        ...applyTextStyles(themeTokens),
+        textDecorationLine: textLine
+      };
+      return /*#__PURE__*/_jsx(View, {
+        style: selectContainerStyle({
+          ...themeTokens,
+          contentMaxDimension
+        }),
+        children: /*#__PURE__*/_jsx(StackWrap, {
+          direction: contentDirection,
+          space: contentSpace,
+          gap: gap,
+          tokens: {
+            alignItems: contentAlignItems
+          },
+          children: /*#__PURE__*/_jsxs(View, {
+            style: selectImageContainerStyle(contentMaxDimension),
+            children: [/*#__PURE__*/_jsx(Image, {
+              accessibilityIgnoresInvertColors: true,
+              imageAccessibilityLabel: imageAccessibilityLabel,
+              source: imageSource,
+              style: selectImageStyle(imageDimension)
+            }), /*#__PURE__*/_jsx(Text, {
+              style: textStyle,
+              children: children
+            })]
           })
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
-          children: children
-        })]
-      })
-    })
+        })
+      });
+    }
   });
 });
 QuickLinksFeatureItem.displayName = 'QuickLinksFeatureItem';
-QuickLinksFeatureItem.propTypes = { ..._utils.withLinkRouter.propTypes,
+QuickLinksFeatureItem.propTypes = {
+  ...withLinkRouter.propTypes,
   ...selectedSystemPropTypes,
-  tokens: (0, _utils.getTokensPropType)('QuickLinksFeatureItem'),
-  variant: _utils.variantProp.propType,
-
+  tokens: getTokensPropType('QuickLinksFeatureItem'),
+  variant: variantProp.propType,
   /**
    * Text which will be rendered within the Link
    */
-  children: _propTypes.default.node.isRequired,
-
+  children: PropTypes.node.isRequired,
   /**
    * Image accessibility label
    */
-  imageAccessibilityLabel: _propTypes.default.string.isRequired,
-
+  imageAccessibilityLabel: PropTypes.string.isRequired,
   /**
    * Image node or Image url
    */
-  imageSource: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]).isRequired
+  imageSource: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired
 };
-
-var _default = (0, _utils.withLinkRouter)(QuickLinksFeatureItem);
-
-exports.default = _default;
+export default withLinkRouter(QuickLinksFeatureItem);

package/lib/QuickLinksFeature/index.js

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

package/lib/Radio/Radio.js

@@ -1,42 +1,16 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _Pressable = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Pressable"));
-
-var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
-
-var _Text = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Text"));
-
-var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
-
-var _LabelContent = _interopRequireDefault(require("../InputLabel/LabelContent"));
-
-var _RadioButton = _interopRequireWildcard(require("./RadioButton"));
-
-var _ThemeProvider = require("../ThemeProvider");
-
-var _utils = require("../utils");
-
-var _StackView = _interopRequireDefault(require("../StackView"));
-
-var _jsxRuntime = require("react/jsx-runtime");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-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; }
-
-const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.focusHandlerProps, _utils.viewProps]);
-
+import React from 'react';
+import PropTypes from 'prop-types';
+import Pressable from "react-native-web/dist/exports/Pressable";
+import StyleSheet from "react-native-web/dist/exports/StyleSheet";
+import Text from "react-native-web/dist/exports/Text";
+import View from "react-native-web/dist/exports/View";
+import RadioLabel from '../InputLabel/LabelContent';
+import RadioButton, { selectRadioButtonTokens } from './RadioButton';
+import { applyShadowToken, applyTextStyles, useThemeTokensCallback } from '../ThemeProvider';
+import { a11yProps, focusHandlerProps, getTokensPropType, selectSystemProps, useInputValue, useUniqueId, variantProp, viewProps } from '../utils';
+import StackView from '../StackView';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, focusHandlerProps, viewProps]);
 const selectContainerStyles = _ref => {
   let {
     containerBackgroundColor,
@@ -56,28 +30,32 @@ const selectContainerStyles = _ref => {
     paddingLeft: containerPaddingLeft,
     paddingRight: containerPaddingRight,
     paddingTop: containerPaddingTop,
-    ...(0, _ThemeProvider.applyShadowToken)(containerShadow)
+    ...applyShadowToken(containerShadow)
   };
 };
-
 const selectDescriptionStyles = _ref2 => {
   let {
     containerPaddingLeft = 0,
     descriptionFontSize,
     descriptionLineHeight,
     descriptionMarginLeft,
+    descriptionFontName,
+    descriptionFontWeight,
     inputSize,
+    fontColor,
     labelMarginLeft = 0
   } = _ref2;
   return {
-    marginLeft: descriptionMarginLeft !== null && descriptionMarginLeft !== void 0 ? descriptionMarginLeft : containerPaddingLeft + inputSize + labelMarginLeft,
-    ...(0, _ThemeProvider.applyTextStyles)({
+    marginLeft: descriptionMarginLeft ?? containerPaddingLeft + inputSize + labelMarginLeft,
+    color: fontColor,
+    ...applyTextStyles({
       fontSize: descriptionFontSize,
-      lineHeight: descriptionLineHeight
+      lineHeight: descriptionLineHeight,
+      fontName: descriptionFontName,
+      fontWeight: descriptionFontWeight
     })
   };
 };
-
 const selectLabelStyles = _ref3 => {
   let {
     labelColor,
@@ -87,7 +65,7 @@ const selectLabelStyles = _ref3 => {
     labelMarginLeft,
     labelLineHeight
   } = _ref3;
-  return (0, _ThemeProvider.applyTextStyles)({
+  return applyTextStyles({
     color: labelColor,
     fontName: labelFontName,
     fontWeight: labelFontWeight,
@@ -96,6 +74,7 @@ const selectLabelStyles = _ref3 => {
     marginLeft: labelMarginLeft
   });
 };
+
 /**
  * Basic Radio component.
  *
@@ -128,9 +107,7 @@ const selectLabelStyles = _ref3 => {
  * or the internal state in case of uncontrolled radio button.
  *
  */
-
-
-const Radio = /*#__PURE__*/(0, _react.forwardRef)((_ref4, ref) => {
+const Radio = /*#__PURE__*/React.forwardRef((_ref4, ref) => {
   let {
     checked,
     defaultChecked,
@@ -150,31 +127,28 @@ const Radio = /*#__PURE__*/(0, _react.forwardRef)((_ref4, ref) => {
     currentValue: isChecked,
     setValue: setIsChecked,
     isControlled
-  } = (0, _utils.useInputValue)({
+  } = useInputValue({
     value: checked,
     initialValue: defaultChecked,
     onChange
   }, 'useRadioValue');
-  const getTokens = (0, _ThemeProvider.useThemeTokensCallback)('Radio', tokens, {
+  const getTokens = useThemeTokensCallback('Radio', tokens, {
     checked: isChecked,
     inactive,
     error,
     ...variant
   });
-
   const handleChange = event => {
     if (!inactive && !isChecked) {
       setIsChecked(true, event);
     }
   };
-
   const handleKeyDown = event => {
     // The expected keyboard shortcut for activating a radio is the Space key
     if ((event === null || event === void 0 ? void 0 : event.key) === ' ') handleChange(event);
   };
-
-  const uniqueId = (0, _utils.useUniqueId)('radio');
-  const inputId = id !== null && id !== void 0 ? id : uniqueId;
+  const uniqueId = useUniqueId('radio');
+  const inputId = id ?? uniqueId;
   const selectedProps = selectProps({
     accessibilityRole: 'radio',
     accessibilityState: {
@@ -183,12 +157,13 @@ const Radio = /*#__PURE__*/(0, _react.forwardRef)((_ref4, ref) => {
     },
     ...rest
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Pressable.default, {
+  return /*#__PURE__*/_jsx(Pressable, {
     ref: ref,
     disabled: inactive,
     onKeyDown: handleKeyDown,
     onPress: handleChange,
     ...selectedProps,
+    style: staticStyles.removeOutline,
     children: _ref5 => {
       let {
         focused: focus,
@@ -204,14 +179,14 @@ const Radio = /*#__PURE__*/(0, _react.forwardRef)((_ref4, ref) => {
       const alignWithLabel = label ? [staticStyles.alignWithLabel, {
         height: labelStyles.lineHeight
       }] : null;
-      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_StackView.default, {
+      return /*#__PURE__*/_jsxs(StackView, {
         space: 0,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
+        children: [/*#__PURE__*/_jsxs(View, {
           style: [staticStyles.container, selectContainerStyles(stateTokens)],
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+          children: [/*#__PURE__*/_jsx(View, {
             style: alignWithLabel,
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_RadioButton.default, {
-              tokens: (0, _RadioButton.selectRadioButtonTokens)(stateTokens),
+            children: /*#__PURE__*/_jsx(RadioButton, {
+              tokens: selectRadioButtonTokens(stateTokens),
               isControlled: isControlled,
               isChecked: isChecked,
               inactive: inactive,
@@ -221,15 +196,18 @@ const Radio = /*#__PURE__*/(0, _react.forwardRef)((_ref4, ref) => {
               name: inputName,
               value: value
             })
-          }), Boolean(label) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
+          }), Boolean(label) && /*#__PURE__*/_jsx(Text, {
             style: labelStyles,
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_LabelContent.default, {
+            children: /*#__PURE__*/_jsx(RadioLabel, {
               forId: inputId,
               children: label
             })
           })]
-        }), Boolean(description) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
-          style: selectDescriptionStyles(getTokens()),
+        }), Boolean(description) && /*#__PURE__*/_jsx(Text, {
+          style: selectDescriptionStyles({
+            ...getTokens(),
+            fontColor: labelStyles.color
+          }),
           children: description
         })]
       });
@@ -237,72 +215,59 @@ const Radio = /*#__PURE__*/(0, _react.forwardRef)((_ref4, ref) => {
   });
 });
 Radio.displayName = 'Radio';
-Radio.propTypes = { ...selectedSystemPropTypes,
-
+Radio.propTypes = {
+  ...selectedSystemPropTypes,
   /**
    * Use `checked` for controlled Radio. For uncontrolled Radio, use the `defaultChecked` prop.
    */
-  checked: _propTypes.default.bool,
-
+  checked: PropTypes.bool,
   /**
    * Use `defaultChecked` to provide the initial value for an uncontrolled Radio.
    */
-  defaultChecked: _propTypes.default.bool,
-
+  defaultChecked: PropTypes.bool,
   /**
    * An optional radio button description.
    */
-  description: _propTypes.default.string,
-
+  description: PropTypes.string,
   /**
    * Radio button ID.
    */
-  id: _propTypes.default.string,
-
+  id: PropTypes.string,
   /**
    * Whether the corresponding input is disabled or active.
    */
-  inactive: _propTypes.default.bool,
-
+  inactive: PropTypes.bool,
   /**
    * The label.
    */
-  label: _propTypes.default.string,
-
+  label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
   /**
    * Associate this radio button with a group (set as the name attribute).
    */
-  name: _propTypes.default.string,
-
+  name: PropTypes.string,
   /**
    * Whether the underlying input triggered a validation error or not.
    */
-  error: _propTypes.default.bool,
-
+  error: PropTypes.bool,
   /**
    * The value. Must be unique within the group.
    */
-  value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number, _propTypes.default.bool]),
-
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.bool]),
   /**
    * Callback called when a controlled radio button gets interacted with.
    */
-  onChange: _propTypes.default.func,
-
+  onChange: PropTypes.func,
   /**
    * Radio tokens.
    */
-  tokens: (0, _utils.getTokensPropType)('Radio'),
-
+  tokens: getTokensPropType('Radio'),
   /**
    * Radio variant.
    */
-  variant: _utils.variantProp.propType
+  variant: variantProp.propType
 };
-var _default = Radio;
-exports.default = _default;
-
-const staticStyles = _StyleSheet.default.create({
+export default Radio;
+const staticStyles = StyleSheet.create({
   container: {
     flexDirection: 'row',
     alignItems: 'center'
@@ -310,5 +275,8 @@ const staticStyles = _StyleSheet.default.create({
   alignWithLabel: {
     alignSelf: 'flex-start',
     justifyContent: 'center'
+  },
+  removeOutline: {
+    outlineStyle: 'none'
   }
 });