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

package/lib/FlexGrid/Row/Row.js

@@ -1,9 +1,27 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { View, StyleSheet } from 'react-native';
-import { viewports } from '@telus-uds/system-constants';
-import { useViewport } from '../../ViewportProvider';
-import applyInheritance from '../helpers';
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
+
+var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
+
+var _systemConstants = require("@telus-uds/system-constants");
+
+var _ViewportProvider = require("../../ViewportProvider");
+
+var _helpers = _interopRequireDefault(require("../helpers"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const horizontalAlignStyles = horizontalAlign => {
   switch (horizontalAlign) {
@@ -81,41 +99,42 @@ const Row = ({
   children,
   ...rest
 }) => {
-  const viewPort = useViewport();
-  const reverseLevel = applyInheritance([xsReverse, smReverse, mdReverse, lgReverse, xlReverse]);
+  const viewPort = (0, _ViewportProvider.useViewport)();
+  const reverseLevel = (0, _helpers.default)([xsReverse, smReverse, mdReverse, lgReverse, xlReverse]);
   let flexDirection = '';
 
-  if (viewPort === viewports.xs) {
+  if (viewPort === _systemConstants.viewports.xs) {
     flexDirection = reverseLevel[0] ? 'row-reverse' : 'row';
   }
 
-  if (viewPort === viewports.sm) {
+  if (viewPort === _systemConstants.viewports.sm) {
     flexDirection = reverseLevel[1] ? 'row-reverse' : 'row';
   }
 
-  if (viewPort === viewports.md) {
+  if (viewPort === _systemConstants.viewports.md) {
     flexDirection = reverseLevel[2] ? 'row-reverse' : 'row';
   }
 
-  if (viewPort === viewports.lg) {
+  if (viewPort === _systemConstants.viewports.lg) {
     flexDirection = reverseLevel[3] ? 'row-reverse' : 'row';
   }
 
-  if (viewPort === viewports.xl) {
+  if (viewPort === _systemConstants.viewports.xl) {
     flexDirection = reverseLevel[4] ? 'row-reverse' : 'row';
   }
 
-  return /*#__PURE__*/React.createElement(View, Object.assign({}, rest, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, { ...rest,
     style: [styles.row, {
       flexDirection,
       ...horizontalAlignStyles(horizontalAlign),
       ...verticalAlignStyles(verticalAlign),
       ...distributeStyles(distribute)
-    }]
-  }), children);
+    }],
+    children: children
+  });
 };
 
-const styles = StyleSheet.create({
+const styles = _StyleSheet.default.create({
   row: {
     width: '100%',
     marginVertical: 0,
@@ -127,46 +146,48 @@ const styles = StyleSheet.create({
     flexWrap: 'wrap'
   }
 });
+
 Row.propTypes = {
   /**
    * Align columns horizontally within their row.
    */
-  horizontalAlign: PropTypes.oneOf(['start', 'center', 'end']),
+  horizontalAlign: _propTypes.default.oneOf(['start', 'center', 'end']),
 
   /**
    * Align columns vertically within their row.
    */
-  verticalAlign: PropTypes.oneOf(['top', 'middle', 'bottom']),
+  verticalAlign: _propTypes.default.oneOf(['top', 'middle', 'bottom']),
 
   /**
    * Distribute empty space around columns.
    */
-  distribute: PropTypes.oneOf(['around', 'between']),
+  distribute: _propTypes.default.oneOf(['around', 'between']),
 
   /**
    * Choose if the item order should be reversed from the 'xs' breakpoint. When you pass in false, the order will be normal from the xs breakpoint. By default, it inherits the behaviour set by the preceding prop.
    */
-  xsReverse: PropTypes.bool,
+  xsReverse: _propTypes.default.bool,
 
   /**
    * Choose if the item order should be reversed from the 'sm' breakpoint. When you pass in false, the order will be normal from the sm breakpoint. By default, it inherits the behaviour set by the preceding prop.
    */
-  smReverse: PropTypes.bool,
+  smReverse: _propTypes.default.bool,
 
   /**
    * Choose if the item order should be reversed from the 'md' breakpoint. When you pass in false, the order will be normal from the md breakpoint. By default, it inherits the behaviour set by the preceding prop.
    */
-  mdReverse: PropTypes.bool,
+  mdReverse: _propTypes.default.bool,
 
   /**
    * Choose if the item order should be reversed from the 'lg' breakpoint. When you pass in false, the order will be normal from the lg breakpoint. By default, it inherits the behaviour set by the preceding prop.
    */
-  lgReverse: PropTypes.bool,
+  lgReverse: _propTypes.default.bool,
 
   /**
    * Choose if the item order should be reversed from the 'xl' breakpoint. When you pass in false, the order will be normal from the xl breakpoint. By default, it inherits the behaviour set by the preceding prop.
    */
-  xlReverse: PropTypes.bool,
-  children: PropTypes.node.isRequired
+  xlReverse: _propTypes.default.bool,
+  children: _propTypes.default.node.isRequired
 };
-export default Row;
+var _default = Row;
+exports.default = _default;

package/lib/FlexGrid/Row/index.js

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

package/lib/FlexGrid/helpers/index.js

@@ -1,3 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
 const applyInheritance = sizes => {
   let prevSize;
   return sizes.map((size, index) => {
@@ -18,4 +25,5 @@ const applyInheritance = sizes => {
   });
 };
 
-export default applyInheritance;
+var _default = applyInheritance;
+exports.default = _default;

package/lib/FlexGrid/index.js

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

package/lib/FlexGrid/providers/GutterContext.js

@@ -1,3 +1,15 @@
-import React from 'react';
-const GutterContext = /*#__PURE__*/React.createContext(false);
-export default GutterContext;
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const GutterContext = /*#__PURE__*/_react.default.createContext(false);
+
+var _default = GutterContext;
+exports.default = _default;

package/lib/Icon/Icon.js

@@ -1,69 +1,74 @@
-import React from 'react';
-import { Platform, View } from 'react-native';
-import PropTypes from 'prop-types';
-import { useThemeTokens } from '../ThemeProvider';
-import { getTokensPropType, variantProp } from '../utils/propTypes';
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.iconComponentPropTypes = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
+
+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 _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const Icon = ({
-  IconSvg,
+  icon: IconComponent,
+  accessibilityLabel,
   variant,
-  label,
-  titleId,
-  tokens = {}
+  tokens,
+  scalesWithText = false
 }) => {
-  const themeTokens = useThemeTokens('Icon', tokens, variant);
-  const iconContent = /*#__PURE__*/React.createElement(IconSvg, {
-    title: label,
-    titleId: titleId,
-    size: themeTokens.size,
+  const themeTokens = (0, _ThemeProvider.useThemeTokens)('Icon', tokens, variant);
+  const size = scalesWithText ? (0, _utils.scaleWithText)(themeTokens.size) : themeTokens.size;
+  const iconContent = /*#__PURE__*/(0, _jsxRuntime.jsx)(IconComponent, {
+    title: accessibilityLabel,
+    size: size,
     color: themeTokens.color
   });
-  return Platform.OS === 'web' ? /*#__PURE__*/React.createElement(View // eslint-disable-next-line react-native/no-inline-styles
+  return _Platform.default.OS === 'web' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default // eslint-disable-next-line react-native/no-inline-styles
   , {
     style: {
-      // TODO: https://github.com/telus/universal-design-system/issues/487
-      transition: 'transform 200ms',
-      transform: [themeTokens.scale ? `scale(${themeTokens.scale})` : '', themeTokens.translateX ? `translateX(${themeTokens.translateX}px)` : '', themeTokens.translateY ? `translateY(${themeTokens.translateY}px)` : ''].filter(exists => exists).join(' ')
-    }
-  }, iconContent) : iconContent;
-}; // Auto-generated SVG icon components wrap Icon and pass through these props:
-
+      // TODO: systematise animations.
+      // https://github.com/telus/universal-design-system/issues/487
+      transition: 'transform 200ms, color 200ms',
+      transform: [themeTokens.scale ? "scale(".concat(themeTokens.scale, ")") : '', themeTokens.translateX ? "translateX(".concat(themeTokens.translateX, "px)") : '', themeTokens.translateY ? "translateY(".concat(themeTokens.translateY, "px)") : ''].filter(exists => exists).join(' ')
+    },
+    children: iconContent
+  }) : iconContent;
+};
 
-export const iconComponentPropTypes = {
-  variant: variantProp.propType,
-  tokens: getTokensPropType('Icon'),
+const iconComponentPropTypes = {
+  variant: _utils.variantProp.propType,
+  tokens: (0, _utils.getTokensPropType)('Icon'),
 
   /**
    * Descriptive label used in web SVG title tag for accessibility
    */
-  label: PropTypes.string,
-
-  /**
-   * On web, this unique id is applied to <SVG> title and aria-labelledby attr
-   */
-  titleId: PropTypes.string
-}; // Auto-generated SVG icon components contain an inner SVG component taking these props:
-
-export const iconSvgPropTypes = {
-  title: iconComponentPropTypes.label,
-  titleId: iconComponentPropTypes.titleId,
-
-  /**
-   * The size of the SVG icon after resolving tokens
-   */
-  size: PropTypes.number,
+  accessibilityLabel: _propTypes.default.string,
 
   /**
-   * The color of the SVG icon after resolving tokens
+   * controls whether the icon size should be proportionate to any accessibility-related font scaling.
    */
-  color: PropTypes.string
+  scalesWithText: _propTypes.default.bool
 };
+exports.iconComponentPropTypes = iconComponentPropTypes;
 Icon.propTypes = { ...iconComponentPropTypes,
 
   /**
-   * Function component containing this icon's SVG or native equivalent.
-   * UDS's SVGR config turns static SVG files into components that pass this to <Icon>.
+   * A valid UDS icon component imported from a UDS palette
+   * (e.g.) `import { MyIcon } from @telus-uds/palette-<brand>/build/web/icons`
    */
-  IconSvg: PropTypes.func.isRequired
+  icon: _propTypes.default.elementType.isRequired
 };
-export default Icon;
+var _default = Icon;
+exports.default = _default;

package/lib/Icon/IconText.js

@@ -0,0 +1,100 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
+
+var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
+
+var _Icon = _interopRequireWildcard(require("./Icon"));
+
+var _StackView = require("../StackView");
+
+var _utils = require("../utils");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+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 }; }
+
+/**
+ * Returns an icon and some text with a sized gap between them. This is a utility component
+ * intended for use when creating components, not intended for use in applications on its own.
+ *
+ * IconText does not wrap its children, so should be used either:
+ *  - inline within a <Text> element
+ *  - within a container with `flexDirection: 'row'`
+ */
+const IconText = ({
+  space,
+  iconPosition = 'left',
+  icon: IconComponent,
+  iconProps,
+  children
+}) => {
+  var _iconProps$tokens;
+
+  const iconContent = IconComponent && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+    icon: IconComponent,
+    scalesWithText: true,
+    ...iconProps
+  }); // Inline images on Android are always baseline-aligned which makes them look misaligned - offset it.
+  // See abandoned issue https://github.com/facebook/react-native/issues/6529
+
+  const size = iconProps === null || iconProps === void 0 ? void 0 : (_iconProps$tokens = iconProps.tokens) === null || _iconProps$tokens === void 0 ? void 0 : _iconProps$tokens.size;
+  const iconAdjusted = _Platform.default.OS === 'android' && iconContent && size ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+    style: {
+      transform: [{
+        translateY: size * 0.2
+      }]
+    },
+    children: iconContent
+  }) : iconContent;
+  return (0, _StackView.getStackedContent)(iconPosition === 'left' ? [iconAdjusted, children] : [children, iconAdjusted], {
+    space,
+    direction: 'row'
+  });
+};
+
+IconText.propTypes = {
+  /**
+   * Amount of space to separate the text content and icon. Uses the themes's spacing scale
+   * (see useSpacingScale for more info).
+   */
+  space: _utils.spacingProps.types.spacingValue,
+
+  /**
+   * Whether the icon should be to the left of the content or the right of the content.
+   */
+  iconPosition: _propTypes.default.oneOf(['left', 'right']),
+
+  /**
+   * A valid UDS icon component imported from a UDS palette.
+   */
+  icon: _propTypes.default.func,
+
+  /**
+   * Props that will be passed to the icon component. By default the icon's `scalesWithText`
+   * prop will be set as "true" so that the icon continues to match the size of the text
+   * if users use accessibility settings to increase text size.
+   */
+  iconProps: _propTypes.default.exact(_Icon.iconComponentPropTypes),
+
+  /**
+   * Content to be rendered alongside the Icon component. Usually this should be a
+   * `<Typography>` component, or a component that renders `<Text>`.
+   */
+  children: _propTypes.default.node
+};
+var _default = IconText;
+exports.default = _default;

package/lib/Icon/index.js

@@ -1,3 +1,31 @@
-import Icon, { iconComponentPropTypes, iconSvgPropTypes } from './Icon';
-export default Icon;
-export { iconComponentPropTypes, iconSvgPropTypes };
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "iconComponentPropTypes", {
+  enumerable: true,
+  get: function () {
+    return _Icon.iconComponentPropTypes;
+  }
+});
+Object.defineProperty(exports, "IconText", {
+  enumerable: true,
+  get: function () {
+    return _IconText.default;
+  }
+});
+exports.default = void 0;
+
+var _Icon = _interopRequireWildcard(require("./Icon"));
+
+var _IconText = _interopRequireDefault(require("./IconText"));
+
+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; }
+
+var _default = _Icon.default;
+exports.default = _default;

package/lib/IconButton/IconButton.js

@@ -0,0 +1,135 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _Pressable = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Pressable"));
+
+var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
+
+var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
+
+var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
+
+var _ThemeProvider = require("../ThemeProvider");
+
+var _utils = require("../utils");
+
+var _propTypes2 = require("../utils/propTypes");
+
+var _Icon = _interopRequireDefault(require("../Icon"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const selectOuterStyle = ({
+  backgroundColor,
+  borderRadius,
+  outerBorderWidth,
+  outerBorderColor,
+  outerBorderGap,
+  shadow
+}) => [{
+  backgroundColor,
+  ...(0, _ThemeProvider.applyShadowToken)(shadow),
+  ...(0, _ThemeProvider.applyOuterBorder)({
+    borderRadius,
+    outerBorderWidth,
+    outerBorderColor,
+    outerBorderGap
+  }),
+  ..._Platform.default.select({
+    web: {
+      outline: 'none',
+      display: 'inline-flex'
+    }
+  })
+}, staticStyles.outer];
+
+const selectInnerStyle = ({
+  borderColor,
+  borderWidth = 0,
+  borderRadius,
+  padding = 0
+}) => ({
+  // Inner borders animate with the icon and should be treated like a themable feature of the icon
+  borderColor,
+  borderRadius,
+  borderWidth,
+  padding: Math.max(0, padding - borderWidth) // Stable size as border changes
+
+});
+/**
+ * A pressable themeless base component that handles pressable states and passes tokens
+ * based on these to an outer border and a base Card component. Not intended to be used in
+ * apps or sites directly: build themed components on top of this.
+ */
+
+
+const IconButton = ({
+  tokens,
+  variant,
+  icon: IconComponent,
+  href,
+  hrefAttrs,
+  onPress,
+  accessibilityRole = href ? 'link' : 'button',
+  ...rest
+}) => {
+  const a11y = _propTypes2.a11yProps.select({ ...rest,
+    accessibilityRole
+  });
+
+  const handlePress = _utils.linkProps.handleHref({
+    href,
+    onPress
+  });
+
+  const getTokens = (0, _ThemeProvider.useThemeTokensCallback)('IconButton', tokens, variant);
+
+  const getOuterStyle = pressableState => selectOuterStyle(getTokens((0, _utils.resolvePressableState)(pressableState)));
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Pressable.default, {
+    href: href,
+    onPress: handlePress,
+    hrefAttrs: hrefAttrs,
+    style: getOuterStyle,
+    ...a11y,
+    children: pressableState => {
+      const themeTokens = getTokens((0, _utils.resolvePressableState)(pressableState));
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+        style: selectInnerStyle(themeTokens),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+          icon: IconComponent,
+          title: a11y.accessibilityLabel,
+          tokens: (0, _utils.selectTokens)('Icon', themeTokens, 'icon')
+        })
+      });
+    }
+  });
+};
+
+IconButton.propTypes = { ..._propTypes2.a11yProps.types,
+  variant: _utils.variantProp.propType,
+  tokens: (0, _utils.getTokensPropType)('IconButton'),
+  icon: _propTypes.default.elementType.isRequired,
+  href: _propTypes.default.string,
+  hrefAttrs: _propTypes.default.shape(_utils.hrefAttrsProp.types),
+  onPress: _propTypes.default.func
+};
+
+const staticStyles = _StyleSheet.default.create({
+  outer: {
+    alignSelf: 'flex-start'
+  }
+});
+
+var _default = IconButton;
+exports.default = _default;

package/lib/IconButton/index.js

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