@telus-uds/components-base 0.0.2-prerelease.5 → 0.0.2-prerelease.9

package/lib/index.js

@@ -1,24 +1,518 @@
-export { default as ActivityIndicator } from './ActivityIndicator';
-export { default as Box } from './Box';
-export * from './Button';
-export { default as Card } from './Card';
-export { default as Divider } from './Divider';
-export { default as ExpandCollapse, Accordion } from './ExpandCollapse';
-export { default as Feedback } from './Feedback';
-export { default as FlexGrid } from './FlexGrid';
-export { default as Icon } from './Icon';
-export * from './Icon';
-export * from './Link';
-export { default as Pagination } from './Pagination';
-export { default as SideNav } from './SideNav';
-export { default as Spacer } from './Spacer';
-export { default as StackView } from './StackView';
-export * from './StackView';
-export { default as TextInput } from './TextInput';
-export { default as ToggleSwitch } from './ToggleSwitch';
-export { default as Typography } from './Typography';
-export { default as A11yInfoProvider, useA11yInfo } from './A11yInfoProvider';
-export { default as BaseProvider } from './BaseProvider';
-export { default as ViewportProvider, useViewport } from './ViewportProvider';
-export { default as ThemeProvider, useTheme, useSetTheme, useThemeTokens } from './ThemeProvider';
-export * from './utils';
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  A11yText: true,
+  ActivityIndicator: true,
+  Box: true,
+  Card: true,
+  PressableCardBase: true,
+  Checkbox: true,
+  Divider: true,
+  ExpandCollapse: true,
+  Accordion: true,
+  Feedback: true,
+  Fieldset: true,
+  FlexGrid: true,
+  Icon: true,
+  IconButton: true,
+  InputLabel: true,
+  List: true,
+  Modal: true,
+  Notification: true,
+  Pagination: true,
+  Progress: true,
+  Radio: true,
+  RadioCard: true,
+  Search: true,
+  Select: true,
+  SideNav: true,
+  Skeleton: true,
+  Spacer: true,
+  StackView: true,
+  StepTracker: true,
+  Tabs: true,
+  Tags: true,
+  ToggleSwitch: true,
+  Tooltip: true,
+  TooltipButton: true,
+  Typography: true,
+  A11yInfoProvider: true,
+  useA11yInfo: true,
+  BaseProvider: true,
+  ViewportProvider: true,
+  useViewport: true,
+  ThemeProvider: true,
+  useTheme: true,
+  useSetTheme: true,
+  useThemeTokens: true,
+  getThemeTokens: true
+};
+Object.defineProperty(exports, "A11yText", {
+  enumerable: true,
+  get: function () {
+    return _A11yText.default;
+  }
+});
+Object.defineProperty(exports, "ActivityIndicator", {
+  enumerable: true,
+  get: function () {
+    return _ActivityIndicator.default;
+  }
+});
+Object.defineProperty(exports, "Box", {
+  enumerable: true,
+  get: function () {
+    return _Box.default;
+  }
+});
+Object.defineProperty(exports, "Card", {
+  enumerable: true,
+  get: function () {
+    return _Card.default;
+  }
+});
+Object.defineProperty(exports, "PressableCardBase", {
+  enumerable: true,
+  get: function () {
+    return _Card.PressableCardBase;
+  }
+});
+Object.defineProperty(exports, "Checkbox", {
+  enumerable: true,
+  get: function () {
+    return _Checkbox.default;
+  }
+});
+Object.defineProperty(exports, "Divider", {
+  enumerable: true,
+  get: function () {
+    return _Divider.default;
+  }
+});
+Object.defineProperty(exports, "ExpandCollapse", {
+  enumerable: true,
+  get: function () {
+    return _ExpandCollapse.default;
+  }
+});
+Object.defineProperty(exports, "Accordion", {
+  enumerable: true,
+  get: function () {
+    return _ExpandCollapse.Accordion;
+  }
+});
+Object.defineProperty(exports, "Feedback", {
+  enumerable: true,
+  get: function () {
+    return _Feedback.default;
+  }
+});
+Object.defineProperty(exports, "Fieldset", {
+  enumerable: true,
+  get: function () {
+    return _Fieldset.default;
+  }
+});
+Object.defineProperty(exports, "FlexGrid", {
+  enumerable: true,
+  get: function () {
+    return _FlexGrid.default;
+  }
+});
+Object.defineProperty(exports, "Icon", {
+  enumerable: true,
+  get: function () {
+    return _Icon.default;
+  }
+});
+Object.defineProperty(exports, "IconButton", {
+  enumerable: true,
+  get: function () {
+    return _IconButton.default;
+  }
+});
+Object.defineProperty(exports, "InputLabel", {
+  enumerable: true,
+  get: function () {
+    return _InputLabel.default;
+  }
+});
+Object.defineProperty(exports, "List", {
+  enumerable: true,
+  get: function () {
+    return _List.default;
+  }
+});
+Object.defineProperty(exports, "Modal", {
+  enumerable: true,
+  get: function () {
+    return _Modal.default;
+  }
+});
+Object.defineProperty(exports, "Notification", {
+  enumerable: true,
+  get: function () {
+    return _Notification.default;
+  }
+});
+Object.defineProperty(exports, "Pagination", {
+  enumerable: true,
+  get: function () {
+    return _Pagination.default;
+  }
+});
+Object.defineProperty(exports, "Progress", {
+  enumerable: true,
+  get: function () {
+    return _Progress.default;
+  }
+});
+Object.defineProperty(exports, "Radio", {
+  enumerable: true,
+  get: function () {
+    return _Radio.default;
+  }
+});
+Object.defineProperty(exports, "RadioCard", {
+  enumerable: true,
+  get: function () {
+    return _RadioCard.default;
+  }
+});
+Object.defineProperty(exports, "Search", {
+  enumerable: true,
+  get: function () {
+    return _Search.default;
+  }
+});
+Object.defineProperty(exports, "Select", {
+  enumerable: true,
+  get: function () {
+    return _Select.default;
+  }
+});
+Object.defineProperty(exports, "SideNav", {
+  enumerable: true,
+  get: function () {
+    return _SideNav.default;
+  }
+});
+Object.defineProperty(exports, "Skeleton", {
+  enumerable: true,
+  get: function () {
+    return _Skeleton.default;
+  }
+});
+Object.defineProperty(exports, "Spacer", {
+  enumerable: true,
+  get: function () {
+    return _Spacer.default;
+  }
+});
+Object.defineProperty(exports, "StackView", {
+  enumerable: true,
+  get: function () {
+    return _StackView.default;
+  }
+});
+Object.defineProperty(exports, "StepTracker", {
+  enumerable: true,
+  get: function () {
+    return _StepTracker.default;
+  }
+});
+Object.defineProperty(exports, "Tabs", {
+  enumerable: true,
+  get: function () {
+    return _Tabs.default;
+  }
+});
+Object.defineProperty(exports, "Tags", {
+  enumerable: true,
+  get: function () {
+    return _Tags.default;
+  }
+});
+Object.defineProperty(exports, "ToggleSwitch", {
+  enumerable: true,
+  get: function () {
+    return _ToggleSwitch.default;
+  }
+});
+Object.defineProperty(exports, "Tooltip", {
+  enumerable: true,
+  get: function () {
+    return _Tooltip.default;
+  }
+});
+Object.defineProperty(exports, "TooltipButton", {
+  enumerable: true,
+  get: function () {
+    return _TooltipButton.default;
+  }
+});
+Object.defineProperty(exports, "Typography", {
+  enumerable: true,
+  get: function () {
+    return _Typography.default;
+  }
+});
+Object.defineProperty(exports, "A11yInfoProvider", {
+  enumerable: true,
+  get: function () {
+    return _A11yInfoProvider.default;
+  }
+});
+Object.defineProperty(exports, "useA11yInfo", {
+  enumerable: true,
+  get: function () {
+    return _A11yInfoProvider.useA11yInfo;
+  }
+});
+Object.defineProperty(exports, "BaseProvider", {
+  enumerable: true,
+  get: function () {
+    return _BaseProvider.default;
+  }
+});
+Object.defineProperty(exports, "ViewportProvider", {
+  enumerable: true,
+  get: function () {
+    return _ViewportProvider.default;
+  }
+});
+Object.defineProperty(exports, "useViewport", {
+  enumerable: true,
+  get: function () {
+    return _ViewportProvider.useViewport;
+  }
+});
+Object.defineProperty(exports, "ThemeProvider", {
+  enumerable: true,
+  get: function () {
+    return _ThemeProvider.default;
+  }
+});
+Object.defineProperty(exports, "useTheme", {
+  enumerable: true,
+  get: function () {
+    return _ThemeProvider.useTheme;
+  }
+});
+Object.defineProperty(exports, "useSetTheme", {
+  enumerable: true,
+  get: function () {
+    return _ThemeProvider.useSetTheme;
+  }
+});
+Object.defineProperty(exports, "useThemeTokens", {
+  enumerable: true,
+  get: function () {
+    return _ThemeProvider.useThemeTokens;
+  }
+});
+Object.defineProperty(exports, "getThemeTokens", {
+  enumerable: true,
+  get: function () {
+    return _ThemeProvider.getThemeTokens;
+  }
+});
+
+var _A11yText = _interopRequireDefault(require("./A11yText"));
+
+var _ActivityIndicator = _interopRequireDefault(require("./ActivityIndicator"));
+
+var _Box = _interopRequireDefault(require("./Box"));
+
+var _Button = require("./Button");
+
+Object.keys(_Button).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _Button[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Button[key];
+    }
+  });
+});
+
+var _Card = _interopRequireWildcard(require("./Card"));
+
+var _Checkbox = _interopRequireWildcard(require("./Checkbox"));
+
+Object.keys(_Checkbox).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _Checkbox[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Checkbox[key];
+    }
+  });
+});
+
+var _Divider = _interopRequireDefault(require("./Divider"));
+
+var _ExpandCollapse = _interopRequireWildcard(require("./ExpandCollapse"));
+
+var _Feedback = _interopRequireDefault(require("./Feedback"));
+
+var _Fieldset = _interopRequireDefault(require("./Fieldset"));
+
+var _FlexGrid = _interopRequireDefault(require("./FlexGrid"));
+
+var _Icon = _interopRequireWildcard(require("./Icon"));
+
+Object.keys(_Icon).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _Icon[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Icon[key];
+    }
+  });
+});
+
+var _IconButton = _interopRequireDefault(require("./IconButton"));
+
+var _InputLabel = _interopRequireDefault(require("./InputLabel"));
+
+var _Link = require("./Link");
+
+Object.keys(_Link).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _Link[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Link[key];
+    }
+  });
+});
+
+var _List = _interopRequireDefault(require("./List"));
+
+var _Modal = _interopRequireDefault(require("./Modal"));
+
+var _Notification = _interopRequireDefault(require("./Notification"));
+
+var _Pagination = _interopRequireDefault(require("./Pagination"));
+
+var _Progress = _interopRequireDefault(require("./Progress"));
+
+var _Radio = _interopRequireWildcard(require("./Radio"));
+
+Object.keys(_Radio).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _Radio[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Radio[key];
+    }
+  });
+});
+
+var _RadioCard = _interopRequireWildcard(require("./RadioCard"));
+
+Object.keys(_RadioCard).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _RadioCard[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _RadioCard[key];
+    }
+  });
+});
+
+var _Search = _interopRequireDefault(require("./Search"));
+
+var _Select = _interopRequireDefault(require("./Select"));
+
+var _SideNav = _interopRequireDefault(require("./SideNav"));
+
+var _Skeleton = _interopRequireDefault(require("./Skeleton"));
+
+var _Spacer = _interopRequireDefault(require("./Spacer"));
+
+var _StackView = _interopRequireWildcard(require("./StackView"));
+
+Object.keys(_StackView).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _StackView[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _StackView[key];
+    }
+  });
+});
+
+var _StepTracker = _interopRequireDefault(require("./StepTracker"));
+
+var _Tabs = _interopRequireDefault(require("./Tabs"));
+
+var _Tags = _interopRequireDefault(require("./Tags"));
+
+var _TextInput = require("./TextInput");
+
+Object.keys(_TextInput).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _TextInput[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _TextInput[key];
+    }
+  });
+});
+
+var _ToggleSwitch = _interopRequireDefault(require("./ToggleSwitch"));
+
+var _Tooltip = _interopRequireDefault(require("./Tooltip"));
+
+var _TooltipButton = _interopRequireDefault(require("./TooltipButton"));
+
+var _Typography = _interopRequireDefault(require("./Typography"));
+
+var _A11yInfoProvider = _interopRequireWildcard(require("./A11yInfoProvider"));
+
+var _BaseProvider = _interopRequireDefault(require("./BaseProvider"));
+
+var _ViewportProvider = _interopRequireWildcard(require("./ViewportProvider"));
+
+var _ThemeProvider = _interopRequireWildcard(require("./ThemeProvider"));
+
+var _utils = require("./utils");
+
+Object.keys(_utils).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _utils[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _utils[key];
+    }
+  });
+});
+
+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; }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/utils/a11y/index.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _textSize = require("./textSize");
+
+Object.keys(_textSize).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _textSize[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _textSize[key];
+    }
+  });
+});

package/lib/utils/a11y/textSize.js

@@ -0,0 +1,49 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getMaxFontMultiplier = exports.scaleWithText = void 0;
+
+var _PixelRatio = _interopRequireDefault(require("react-native-web/dist/cjs/exports/PixelRatio"));
+
+var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/**
+ * When a user increases text size using device accessibility settings, some elements
+ * should also scale, such as icons alongside text and space between paragraphs.
+ *
+ * @param {number} [value] - the value to multiply; defaults to system default font size
+ * @param {number} [maxScale] - the maximum multiplier to apply; defaults to no maximum
+ */
+const scaleWithText = (value, maxScale = Infinity) => {
+  if (!value) return value;
+  const scale = Math.min(_PixelRatio.default.getFontScale(), maxScale) || 1;
+  return value * scale;
+};
+/**
+ * Native only, returns `undefined` on Web.
+ *
+ * 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.
+ *
+ * The return value of this function can be used as a React Native `Text` element's
+ * `maxFontSizeMultiplier` prop value.
+ */
+
+
+exports.scaleWithText = scaleWithText;
+
+const getMaxFontMultiplier = ({
+  fontSize,
+  fontScaleCap
+}) => {
+  if (_Platform.default.OS === 'web' || !fontScaleCap || !fontSize) return undefined;
+  if (fontScaleCap <= fontSize) return 1;
+  return fontScaleCap / fontSize;
+};
+
+exports.getMaxFontMultiplier = getMaxFontMultiplier;

package/lib/utils/animation/index.js

@@ -1,2 +1,15 @@
-/* eslint-disable import/prefer-default-export */
-export { default as useVerticalExpandAnimation } from './useVerticalExpandAnimation';
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "useVerticalExpandAnimation", {
+  enumerable: true,
+  get: function () {
+    return _useVerticalExpandAnimation.default;
+  }
+});
+
+var _useVerticalExpandAnimation = _interopRequireDefault(require("./useVerticalExpandAnimation"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/utils/animation/useVerticalExpandAnimation.js

@@ -1,37 +1,53 @@
-import { useEffect, useRef } from 'react';
-import { Animated, Easing, Platform } from 'react-native'; // TODO: systematise animations
-// https://github.com/telus/universal-design-system/issues/487
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = require("react");
+
+var _Animated = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Animated"));
+
+var _Easing = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Easing"));
 
+var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+// TODO: systematise animations
+// https://github.com/telus/universal-design-system/issues/487
 function useVerticalExpandAnimation({
   containerHeight,
   isExpanded,
   tokens
 }) {
-  const expandAnimatedValue = useRef(new Animated.Value(0)).current;
+  const expandAnimatedValue = (0, _react.useRef)(new _Animated.default.Value(0)).current;
   const {
     expandDuration,
     collapseDuration
   } = tokens;
-  useEffect(() => {
-    if (Platform.OS === 'web') {
+  (0, _react.useEffect)(() => {
+    if (_Platform.default.OS === 'web') {
       return;
     }
 
     const animationConfig = {
       duration: isExpanded ? expandDuration : collapseDuration,
-      easing: Easing.inOut(Easing.ease),
+      easing: _Easing.default.inOut(_Easing.default.ease),
       toValue: isExpanded ? containerHeight : 0,
       useNativeDriver: false
     };
-    Animated.timing(expandAnimatedValue, animationConfig).start();
+
+    _Animated.default.timing(expandAnimatedValue, animationConfig).start();
   }, [isExpanded, expandAnimatedValue, containerHeight, expandDuration, collapseDuration]);
   let containerStyles; // don't visually collapse the container until we have it measured
 
   if (containerHeight !== null) {
-    if (Platform.OS === 'web') {
+    if (_Platform.default.OS === 'web') {
       const transitionDuration = isExpanded ? expandDuration : collapseDuration;
       containerStyles = {
-        transition: `height ${transitionDuration}ms ease-in-out`,
+        transition: "height ".concat(transitionDuration, "ms ease-in-out"),
         height: isExpanded ? containerHeight : 0
       };
     } else {
@@ -44,4 +60,5 @@ function useVerticalExpandAnimation({
   return containerStyles;
 }
 
-export default useVerticalExpandAnimation;
+var _default = useVerticalExpandAnimation;
+exports.default = _default;