@telus-uds/components-base 2.0.0 → 2.0.2

package/lib/TooltipButton/TooltipButton.js

@@ -1,95 +1,90 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _ThemeProvider = require("../ThemeProvider");
-
-var _utils = require("../utils");
-
-var _Icon = _interopRequireDefault(require("../Icon"));
-
-var _jsxRuntime = require("react/jsx-runtime");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
-
+import React from 'react';
+import View from "react-native-web/dist/exports/View";
+import StyleSheet from "react-native-web/dist/exports/StyleSheet";
+import Platform from "react-native-web/dist/exports/Platform";
+import PropTypes from 'prop-types';
+import { useThemeTokens, applyOuterBorder } from '../ThemeProvider';
+import { a11yProps, getTokensPropType, selectSystemProps, variantProp, viewProps } from '../utils';
+import Icon from '../Icon';
+import { jsx as _jsx } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
 const selectInnerContainerStyles = _ref => {
   let {
     borderRadius,
-    width
+    width,
+    backgroundColor
   } = _ref;
   return {
     borderRadius,
-    width
+    width,
+    backgroundColor
   };
 };
-
 const selectIconTokens = _ref2 => {
   let {
     iconSize,
-    iconColor
-    /* iconScale = 1 */
-
+    iconColor,
+    iconScale = 1
   } = _ref2;
   return {
     size: iconSize,
-    color: iconColor // scale: iconScale TODO re-enable with icon component
-
+    color: iconColor,
+    scale: iconScale
   };
 };
+
 /**
  * `TooltipButton` is a helper component used as a default control for the `Tooltip` component.
  * In fact though, it isn't actually a pressable - it's meant to be used as pressable's content.
  * Due to this any interaction states (e.g. pressed, hover, etc.) has to be passed down to it as a prop.
  */
-
-
-const TooltipButton = _ref3 => {
+const TooltipButton = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   let {
     pressableState,
     tokens,
     variant,
     ...rest
   } = _ref3;
-  const themeTokens = (0, _ThemeProvider.useThemeTokens)('TooltipButton', tokens, variant, pressableState);
+  const themeTokens = useThemeTokens('TooltipButton', tokens, variant, pressableState);
   const {
     icon: IconComponent
   } = themeTokens;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
-    style: (0, _ThemeProvider.applyOuterBorder)(themeTokens),
+  return /*#__PURE__*/_jsx(View, {
+    style: [applyOuterBorder(themeTokens), themeTokens.outerBorderWidth && {
+      margin: -themeTokens.outerBorderWidth
+    }, staticStyles.bubblePointerEvents],
     ...selectProps(rest),
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+    ref: ref,
+    children: /*#__PURE__*/_jsx(View, {
       style: selectInnerContainerStyles(themeTokens),
-      children: IconComponent && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+      children: IconComponent && /*#__PURE__*/_jsx(Icon, {
         icon: IconComponent,
         tokens: selectIconTokens(themeTokens)
       })
     })
   });
-};
-
-TooltipButton.propTypes = { ...selectedSystemPropTypes,
-
+});
+TooltipButton.displayName = 'TooltipButton';
+const staticStyles = StyleSheet.create({
+  bubblePointerEvents: {
+    ...Platform.select({
+      web: {
+        pointerEvents: 'none'
+      }
+    })
+  }
+});
+TooltipButton.propTypes = {
+  ...selectedSystemPropTypes,
   /**
    * Used as appearances when resolving theme tokens.
    */
-  pressableState: _propTypes.default.shape({
-    pressed: _propTypes.default.bool,
-    hover: _propTypes.default.bool,
-    focus: _propTypes.default.bool
+  pressableState: PropTypes.shape({
+    pressed: PropTypes.bool,
+    hover: PropTypes.bool,
+    focus: PropTypes.bool
   }),
-  tokens: (0, _utils.getTokensPropType)('TooltipButton'),
-  variant: _utils.variantProp.propType
+  tokens: getTokensPropType('TooltipButton'),
+  variant: variantProp.propType
 };
-var _default = TooltipButton;
-exports.default = _default;
+export default TooltipButton;

package/lib/TooltipButton/index.js

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

package/lib/Typography/Typography.js

@@ -1,40 +1,18 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _Text = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Text"));
-
-var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
-
-var _ThemeProvider = require("../ThemeProvider");
-
-var _ViewportProvider = require("../ViewportProvider");
-
-var _utils = require("../ThemeProvider/utils");
-
-var _utils2 = require("../utils");
-
-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 Text from "react-native-web/dist/exports/Text";
+import View from "react-native-web/dist/exports/View";
+import Platform from "react-native-web/dist/exports/Platform";
+import { useResponsiveThemeTokens, useTheme, useThemeTokens } from '../ThemeProvider';
+import { applyTextStyles } from '../ThemeProvider/utils';
+import { a11yProps, variantProp, getTokensPropType, getMaxFontMultiplier, headingTags, selectSystemProps, textTags, textProps, viewProps, getA11yPropsFromHtmlTag, StyleSheet, createMediaQueryStyles } from '../utils';
+import { useViewport } from '../ViewportProvider';
 /**
  * @typedef {import('../utils/a11y/semantics').TextTag} TextTag
  */
-const [selectContainerProps, selectedContainerPropTypes] = (0, _utils2.selectSystemProps)([_utils2.a11yProps, _utils2.viewProps]);
-const [selectTextProps, selectedTextPropTypes] = (0, _utils2.selectSystemProps)([_utils2.textProps]);
-
+import { jsx as _jsx } from "react/jsx-runtime";
+const [selectContainerProps, selectedContainerPropTypes] = selectSystemProps([a11yProps, viewProps]);
+const [selectTextProps, selectedTextPropTypes] = selectSystemProps([textProps]);
 const selectTextStyles = (_ref, themeOptions) => {
   let {
     fontWeight,
@@ -44,9 +22,11 @@ const selectTextStyles = (_ref, themeOptions) => {
     fontName,
     textAlign,
     textTransform,
-    letterSpacing
+    letterSpacing,
+    textDecorationLine,
+    gradient
   } = _ref;
-  return (0, _utils.applyTextStyles)({
+  return applyTextStyles({
     fontWeight,
     fontSize,
     color,
@@ -55,12 +35,27 @@ const selectTextStyles = (_ref, themeOptions) => {
     themeOptions,
     textAlign,
     textTransform,
-    letterSpacing
+    letterSpacing,
+    textDecorationLine,
+    gradient
   });
-}; // General-purpose flexible theme-neutral base component for text
-
+};
+const HALF_FONT_SIZE = 2;
+const QUARTER_FONT_SIZE = 4;
+const selectMobileSubSupStyles = (_ref2, type) => {
+  let {
+    fontSize
+  } = _ref2;
+  return {
+    fontSize: fontSize / HALF_FONT_SIZE,
+    lineHeight: fontSize,
+    position: 'relative',
+    top: type === 'sub' ? fontSize / QUARTER_FONT_SIZE : -fontSize / QUARTER_FONT_SIZE
+  };
+};
 
-const Typography = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
+// General-purpose flexible theme-neutral base component for text
+const Typography = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   let {
     children,
     variant,
@@ -71,71 +66,154 @@ const Typography = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
     align = undefined,
     tokens,
     dataSet,
+    strikeThrough = false,
     ...rest
-  } = _ref2;
-  const viewport = (0, _ViewportProvider.useViewport)();
-  const themeTokens = (0, _ThemeProvider.useThemeTokens)('Typography', tokens, variant, {
-    viewport
-  });
+  } = _ref3;
+  const viewport = useViewport();
   const {
     themeOptions
-  } = (0, _ThemeProvider.useTheme)();
-  const resolvedTextProps = { ...selectTextProps(rest),
-    style: selectTextStyles(align ? { ...themeTokens,
-      textAlign: align
-    } : themeTokens, themeOptions),
-    dataSet,
-    maxFontSizeMultiplier: (0, _utils2.getMaxFontMultiplier)(themeTokens)
+  } = useTheme();
+  const {
+    enableMediaQueryStyleSheet
+  } = themeOptions;
+  const useTokens = enableMediaQueryStyleSheet ? useResponsiveThemeTokens : useThemeTokens;
+  const themeTokens = useTokens('Typography', tokens, variant, !enableMediaQueryStyleSheet && {
+    viewport
+  });
+  const maxFontSizeMultiplier = enableMediaQueryStyleSheet ? getMaxFontMultiplier(themeTokens[viewport]) : getMaxFontMultiplier(themeTokens);
+  const textDecorationLine = strikeThrough ? 'line-through' : 'none';
+  const generateGradientString = gradientObj => {
+    let gradientStr = '';
+    const {
+      type,
+      angle,
+      stops: [stopOne, stopTwo],
+      specification
+    } = gradientObj;
+    if (type === 'radial') {
+      gradientStr = `radial-gradient(${specification}`;
+      gradientStr += `, ${stopOne.color} ${stopOne.stop * 100}%, ${stopTwo.color} ${stopTwo.stop * 100}%`;
+    } else if (type === 'linear') {
+      gradientStr = `linear-gradient(${angle}deg`;
+      if (angle === 135) {
+        gradientStr += `, ${stopOne.color}, 75%, ${stopTwo.color}`;
+      } else {
+        gradientStr += `, ${stopOne.color}, ${stopTwo.color}`;
+      }
+    }
+    gradientStr += ')';
+    return gradientStr;
+  };
+  const getStyleWithGradient = styles => {
+    return styles.gradient ? {
+      ...styles,
+      color: 'transparent',
+      backgroundImage: generateGradientString(styles.gradient),
+      backgroundClip: 'text'
+    } : styles;
+  };
+  let textStyles;
+  let mediaIds;
+  if (enableMediaQueryStyleSheet) {
+    const transformedThemeTokens = Object.entries(themeTokens).reduce((acc, _ref4) => {
+      let [vp, viewportTokens] = _ref4;
+      acc[vp] = selectTextStyles({
+        textAlign: align,
+        textDecorationLine,
+        ...viewportTokens
+      }, themeOptions);
+      return acc;
+    }, {});
+    const mediaQueryStyles = createMediaQueryStyles(transformedThemeTokens);
+    const {
+      ids,
+      styles
+    } = StyleSheet.create({
+      text: mediaQueryStyles
+    });
+    textStyles = styles.text;
+    mediaIds = ids.text;
+  } else {
+    textStyles = selectTextStyles({
+      textAlign: align,
+      textDecorationLine,
+      ...themeTokens
+    }, themeOptions);
+  }
+  const resolvedTextProps = {
+    ...selectTextProps(rest),
+    maxFontSizeMultiplier
   };
   const containerProps = {
     accessibilityRole,
-    ...(0, _utils2.getA11yPropsFromHtmlTag)(tag, accessibilityRole),
+    ...getA11yPropsFromHtmlTag(tag, accessibilityRole),
     ...selectContainerProps(rest)
   };
-
   const resetTagStyling = child => {
-    if (typeof child === 'object' && ((child === null || child === void 0 ? void 0 : child.type) === 'sub' || (child === null || child === void 0 ? void 0 : child.type) === 'sup')) {
-      var _child$props;
-
-      const sanitizedChild = /*#__PURE__*/_react.default.cloneElement(child, {
-        style: { ...(child === null || child === void 0 ? void 0 : (_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.style),
-          lineHeight: 0
-        }
-      });
-
-      return sanitizedChild;
+    var _child$props;
+    if (typeof child !== 'object' || !((child === null || child === void 0 ? void 0 : child.type) === 'sub' || (child === null || child === void 0 ? void 0 : child.type) === 'sup')) {
+      return child;
     }
-
-    return child;
+    const childStyles = (child === null || child === void 0 || (_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.style) || {};
+    const supFontSize = childStyles.fontSize ?? themeTokens.superScriptFontSize;
+    const isMobile = Platform.OS === 'ios' || Platform.OS === 'android';
+    const isSubSup = (child === null || child === void 0 ? void 0 : child.type) === 'sub' || (child === null || child === void 0 ? void 0 : child.type) === 'sup';
+    const mobileStyles = isMobile && isSubSup ? selectMobileSubSupStyles(themeTokens, child === null || child === void 0 ? void 0 : child.type) : {};
+    const defaultStyles = !isMobile && isSubSup ? {
+      fontSize: supFontSize,
+      lineHeight: 0
+    } : {};
+    const sanitizedChild = /*#__PURE__*/React.cloneElement(isMobile && isSubSup ? /*#__PURE__*/_jsx(View, {
+      children: /*#__PURE__*/_jsx(Text, {
+        style: [childStyles, mobileStyles],
+        children: child.props.children
+      })
+    }) : child, {
+      style: {
+        ...childStyles,
+        ...defaultStyles
+      }
+    });
+    return sanitizedChild;
   };
-
   const sanitizeChildren = () => {
     if (Array.isArray(children)) {
       return children.map(resetTagStyling);
     }
-
     return resetTagStyling(children);
   };
-
-  return block ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+  const dataSetValue = mediaIds ? {
+    media: mediaIds,
+    ...dataSet
+  } : dataSet;
+  return block ? /*#__PURE__*/_jsx(View, {
     ref: ref,
     ...containerProps,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, { ...resolvedTextProps,
+    children: /*#__PURE__*/_jsx(Text, {
+      ...resolvedTextProps,
+      style: getStyleWithGradient(textStyles),
+      dataSet: dataSetValue,
       children: sanitizeChildren(children)
     })
-  }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
+  }) : /*#__PURE__*/_jsx(Text, {
     ref: ref,
     ...containerProps,
     ...resolvedTextProps,
+    style: getStyleWithGradient(textStyles),
+    dataSet: dataSetValue,
     children: sanitizeChildren(children)
   });
 });
 Typography.displayName = 'Typography';
-Typography.propTypes = { ...selectedContainerPropTypes,
+Typography.propTypes = {
+  ...selectedContainerPropTypes,
   ...selectedTextPropTypes,
-  tokens: (0, _utils2.getTokensPropType)('Typography'),
-  variant: _utils2.variantProp.propType,
-
+  tokens: getTokensPropType('Typography'),
+  variant: variantProp.propType,
+  /**
+   * Renders the text with "text-decoration: 'line-through'" applied.
+   */
+  strikeThrough: PropTypes.bool,
   /**
    * Renders the text as a semantic heading. If a html heading tag is provided, uses that tag on Web.
    *
@@ -145,8 +223,7 @@ Typography.propTypes = { ...selectedContainerPropTypes,
    * In native apps, if this is `true` or any html heading tag string and accessibilityRole prop
    * is not defined, the accessibilityRole will default to "heading".
    */
-  heading: _propTypes.default.oneOf([..._utils2.headingTags, true]),
-
+  heading: PropTypes.oneOf([...headingTags, true]),
   /**
    * Optional semantic HTML tag, to apply to the text on web. Does not change styling.
    *
@@ -155,23 +232,23 @@ Typography.propTypes = { ...selectedContainerPropTypes,
    * In native apps, if a header tag is provided ("h1", "h2" etc) and accessibilityRole prop
    * is not defined, the accessibilityRole will default to "heading".
    */
-  tag: _propTypes.default.oneOf(_utils2.textTags),
-
+  tag: PropTypes.oneOf(textTags),
   /**
    * If true, forces the element to behave as a View block even if nested in other text
    */
-  block: _propTypes.default.bool,
-
+  block: PropTypes.bool,
   /**
    * Works the same as css text-align, note that RN doesn't support "start" or "end" (see https://reactnative.dev/docs/text-style-props#textalign)
    * Justify is known to make text harder to read, especially for people with dyslexia (see https://developer.mozilla.org/en-US/docs/Web/CSS/text-align#accessibility_concerns)
    */
-  align: _propTypes.default.oneOf(['auto', 'left', 'right', 'center', 'justify']),
-
+  align: PropTypes.oneOf(['auto', 'left', 'right', 'center', 'justify']),
   /**
    * Same children allowed as a React Native <Text> node
    */
-  children: _propTypes.default.node
+  children: PropTypes.node,
+  /**
+   * Data attributes to be added to the element
+   */
+  dataSet: PropTypes.object
 };
-var _default = Typography;
-exports.default = _default;
+export default Typography;

package/lib/Typography/index.js

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