@telus-uds/components-base 0.0.2-prerelease.6 → 1.0.0

package/lib/Typography/Typography.js

@@ -1,35 +1,37 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Platform, Text, View } from 'react-native';
-import { useThemeTokens } from '../ThemeProvider';
-import { useViewport } from '../ViewportProvider';
-import { applyTextStyles } from '../ThemeProvider/utils';
-import { a11yProps, variantProp, getTokensPropType } from '../utils/propTypes';
-/**
- * If passed a string like 'h1', 'h2' etc, returns the heading number as a string,
- * else returns false
- */
+"use strict";
 
-function getHeadingLevel(heading) {
-  const match = typeof heading === 'string' && heading.match(/^h(\d)$/);
-  return match && match[1];
-}
-/**
- * Enforces `fontScaleCap` theme tokens as the maximum font size text can become
- * after iOS or Android font scaling, to give consistent accessible maximum sizes
- * that don't make the content unusable
- */
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
 
+var _react = _interopRequireWildcard(require("react"));
 
-function getMaxFontMultiplier({
-  fontSize,
-  fontScaleCap
-}) {
-  if (!fontScaleCap || !fontSize) return undefined;
-  if (fontScaleCap <= fontSize) return 1;
-  return fontScaleCap / fontSize;
-}
+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; }
+
+/**
+ * @typedef {import('../utils/a11y/semantics').TextTag} TextTag
+ */
 const selectTextStyles = ({
   fontWeight,
   fontSize,
@@ -37,71 +39,100 @@ const selectTextStyles = ({
   lineHeight,
   fontName,
   textAlign,
-  textTransform
-}) => applyTextStyles({
+  textTransform,
+  letterSpacing
+}) => (0, _utils.applyTextStyles)({
   fontWeight,
   fontSize,
   color,
   lineHeight,
   fontName,
   textAlign,
-  textTransform
+  textTransform,
+  letterSpacing
 }); // General-purpose flexible theme-neutral base component for text
 
 
-const Typography = ({
+const Typography = /*#__PURE__*/(0, _react.forwardRef)(({
   children,
   variant,
   heading,
+  tag = typeof heading === 'string' ? heading : undefined,
+  accessibilityRole = heading === true ? 'header' : undefined,
   block = false,
   align = undefined,
-  accessibilityRole = heading ? 'header' : 'text',
   tokens,
+  dataSet,
   ...rest
-}) => {
-  const viewport = useViewport();
-  const themeTokens = useThemeTokens('Typography', tokens, variant, {
+}, ref) => {
+  const viewport = (0, _ViewportProvider.useViewport)();
+  const themeTokens = (0, _ThemeProvider.useThemeTokens)('Typography', tokens, variant, {
     viewport
   });
   const textProps = {
     style: selectTextStyles(align ? { ...themeTokens,
       textAlign: align
-    } : themeTokens)
+    } : themeTokens),
+    dataSet,
+    maxFontSizeMultiplier: (0, _utils2.getMaxFontMultiplier)(themeTokens)
   };
-  if (Platform.OS !== 'web') textProps.maxFontSizeMultiplier = getMaxFontMultiplier(themeTokens);
-  const headingLevel = getHeadingLevel(heading);
-  const a11y = { ...a11yProps.select(rest),
-    accessibilityRole,
-    // On React Native Web, `aria-level` controls which heading tag (h1, h2 etc) is used.
-    // Must be hyphenated, not camel case; `accessibilityLevel` only works on RNW >=0.15.1
-    [headingLevel && 'aria-level']: headingLevel
+  const a11y = { ...(0, _utils2.getA11yPropsFromHtmlTag)(tag, accessibilityRole),
+    ..._utils2.a11yProps.select(rest)
   };
-  return block ? /*#__PURE__*/React.createElement(View, a11y, /*#__PURE__*/React.createElement(Text, textProps, children)) : /*#__PURE__*/React.createElement(Text, Object.assign({}, textProps, a11y), children);
-};
+  return block ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+    ref: ref,
+    ...a11y,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, { ...textProps,
+      children: children
+    })
+  }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
+    ref: ref,
+    ...textProps,
+    ...a11y,
+    children: children
+  });
+});
+Typography.displayName = 'Typography';
+Typography.propTypes = { ..._utils2.a11yProps.types,
+  tokens: (0, _utils2.getTokensPropType)('Typography'),
+  variant: _utils2.variantProp.propType,
 
-Typography.propTypes = { ...a11yProps.types,
-  tokens: getTokensPropType('Typography'),
-  variant: variantProp.propType,
+  /**
+   * Renders the text as a semantic heading. If a html heading tag is provided, uses that tag on Web.
+   *
+   * Does not affect styling: <Typography heading="h2"> will render a <h2> that looks like plain text.
+   * Use both `heading` and `variant` props to render semantic headings that look like headings.
+   *
+   * 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]),
 
   /**
-   * If truthy, will render a heading; if a html heading tag is provided, uses that tag on Web
+   * Optional semantic HTML tag, to apply to the text on web. Does not change styling.
+   *
+   * `tag` and `heading` props set the same thing, so shouldn't be used together (`tag` overrides `heading`).
+   *
+   * In native apps, if a header tag is provided ("h1", "h2" etc) and accessibilityRole prop
+   * is not defined, the accessibilityRole will default to "heading".
    */
-  heading: PropTypes.oneOf([true, 'h1', 'h2', 'h3', 'h4', 'h5', 'h6']),
+  tag: _propTypes.default.oneOf(_utils2.textTags),
 
   /**
    * If true, forces the element to behave as a View block even if nested in other text
    */
-  block: PropTypes.bool,
+  block: _propTypes.default.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.oneOf(['auto', 'left', 'right', 'center', 'justify']),
+  align: _propTypes.default.oneOf(['auto', 'left', 'right', 'center', 'justify']),
 
   /**
    * Same children allowed as a React Native <Text> node
    */
-  children: PropTypes.node
+  children: _propTypes.default.node
 };
-export default Typography;
+var _default = Typography;
+exports.default = _default;

package/lib/Typography/index.js

@@ -1,2 +1,13 @@
-import Typography from './Typography';
-export default Typography;
+"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;

package/lib/ViewportProvider/ViewportProvider.js

@@ -1,25 +1,46 @@
-import React, { useState } from 'react';
-import PropTypes from 'prop-types';
-import { viewports } from '@telus-uds/system-constants';
-import { ViewportContext } from './useViewport';
-import useViewportListener from './useViewportListener';
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _systemConstants = require("@telus-uds/system-constants");
+
+var _useViewport = require("./useViewport");
+
+var _useViewportListener = _interopRequireDefault(require("./useViewportListener"));
+
+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; }
+
 /**
  * Provides an up-to-date viewport value from system-constants, available via the `useViewport` hook
  */
-
 const ViewportProvider = ({
   children
 }) => {
   // Default to the smallest viewport for mobile-first SSR. On client side, this is updated
   // by useViewportListener in a layout effect before anything is shown to the user.
-  const [viewport, setViewport] = useState(viewports.keys[0]);
-  useViewportListener(setViewport);
-  return /*#__PURE__*/React.createElement(ViewportContext.Provider, {
-    value: viewport
-  }, children);
+  const [viewport, setViewport] = (0, _react.useState)(_systemConstants.viewports.keys[0]);
+  (0, _useViewportListener.default)(setViewport);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_useViewport.ViewportContext.Provider, {
+    value: viewport,
+    children: children
+  });
 };
 
 ViewportProvider.propTypes = {
-  children: PropTypes.node.isRequired
+  children: _propTypes.default.node.isRequired
 };
-export default ViewportProvider;
+var _default = ViewportProvider;
+exports.default = _default;

package/lib/ViewportProvider/index.js

@@ -1,3 +1,28 @@
-import ViewportProvider from './ViewportProvider';
-export default ViewportProvider;
-export * from './useViewport';
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {};
+exports.default = void 0;
+
+var _ViewportProvider = _interopRequireDefault(require("./ViewportProvider"));
+
+var _useViewport = require("./useViewport");
+
+Object.keys(_useViewport).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _useViewport[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useViewport[key];
+    }
+  });
+});
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = _ViewportProvider.default;
+exports.default = _default;

package/lib/ViewportProvider/useViewport.js

@@ -1,3 +1,15 @@
-import { createContext, useContext } from 'react';
-export const ViewportContext = /*#__PURE__*/createContext({});
-export const useViewport = () => useContext(ViewportContext);
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useViewport = exports.ViewportContext = void 0;
+
+var _react = require("react");
+
+const ViewportContext = /*#__PURE__*/(0, _react.createContext)({});
+exports.ViewportContext = ViewportContext;
+
+const useViewport = () => (0, _react.useContext)(ViewportContext);
+
+exports.useViewport = useViewport;

package/lib/ViewportProvider/useViewportListener.js

@@ -1,10 +1,22 @@
-import { useLayoutEffect } from 'react';
-import { Dimensions } from 'react-native';
-import { viewports } from '@telus-uds/system-constants'; // Use Dimensions instead of useWindowDimensions because useWindowDimensions forces context
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = require("react");
+
+var _Dimensions = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Dimensions"));
+
+var _systemConstants = require("@telus-uds/system-constants");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+// Use Dimensions instead of useWindowDimensions because useWindowDimensions forces context
 // to update on every pixel change during window resize; but we only want rerenders to occur
 // when a viewport threshold has been crossed.
-
-const lookupViewport = () => viewports.select(Dimensions.get('window').width);
+const lookupViewport = () => _systemConstants.viewports.select(_Dimensions.default.get('window').width);
 /**
  * In SSR, React gets spooked if it sees `useLayoutEffect` and fires warnings assuming the
  * developer doesn't realise the effect won't run: https://reactjs.org/link/uselayouteffect-ssr
@@ -23,21 +35,23 @@ const useViewportListenerSSR = () => {};
 
 
 const useViewportListenerCSR = setViewport => {
-  useLayoutEffect(() => {
+  (0, _react.useLayoutEffect)(() => {
     setViewport(lookupViewport());
 
     const onChange = ({
       window
-    }) => setViewport(viewports.select(window.width));
+    }) => setViewport(_systemConstants.viewports.select(window.width));
 
-    const listener = Dimensions.addEventListener('change', onChange); // From RN 0.65.0, Dimensions.removeEventListener is deprecated for `remove` on addEventListener return value;
+    const listener = _Dimensions.default.addEventListener('change', onChange); // From RN 0.65.0, Dimensions.removeEventListener is deprecated for `remove` on addEventListener return value;
     // however, that is not available in RN <=0.64.X, therefore not in any Expo release as of 2021 (Expo SDK 43).
 
-    return listener?.remove || (() => Dimensions.removeEventListener('change', onChange)); // setViewport is a function from `useState` so it is stable and won't make the effect re-run
+
+    return (listener === null || listener === void 0 ? void 0 : listener.remove) || (() => _Dimensions.default.removeEventListener('change', onChange)); // setViewport is a function from `useState` so it is stable and won't make the effect re-run
   }, [setViewport]);
 }; // Window is a defined global object in both Web and Native client-side, and undefined in SSR
 
 
 const isSSR = typeof window === 'undefined';
 const useViewportListener = isSSR ? useViewportListenerSSR : useViewportListenerCSR;
-export default useViewportListener;
+var _default = useViewportListener;
+exports.default = _default;