@telus-uds/components-base 2.4.0 → 3.0.0

package/lib/cjs/Card/Card.js

@@ -0,0 +1,334 @@
+"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 _ThemeProvider = require("../ThemeProvider");
+var _utils = require("../utils");
+var _ViewportProvider = require("../ViewportProvider");
+var _props = require("../utils/props");
+var _CardBase = _interopRequireDefault(require("./CardBase"));
+var _PressableCardBase = _interopRequireDefault(require("./PressableCardBase"));
+var _CheckboxButton = _interopRequireDefault(require("../Checkbox/CheckboxButton"));
+var _RadioButton = _interopRequireDefault(require("../Radio/RadioButton"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const [selectProps, selectedSystemPropTypes] = (0, _props.selectSystemProps)([_props.a11yProps, _props.viewProps, _props.linkProps]);
+const SelectionType = {
+  Checkbox: 'checkbox',
+  Radio: 'radiogroup',
+  None: undefined
+};
+const selectInputStyle = _ref => {
+  let {
+    paddingTop,
+    paddingRight
+  } = _ref;
+  return {
+    position: 'absolute',
+    top: paddingTop,
+    right: paddingRight
+  };
+};
+const getInputProps = _ref2 => {
+  let {
+    id,
+    checkColor,
+    boxBackgroundColor,
+    checkBackgroundColor,
+    isControlled,
+    isChecked,
+    isInactive,
+    handleChange
+  } = _ref2;
+  return {
+    inputId: id,
+    tokens: {
+      iconColor: checkColor,
+      inputBackgroundColor: boxBackgroundColor,
+      iconBackgroundColor: checkBackgroundColor
+    },
+    isControlled,
+    isChecked,
+    inactive: isInactive,
+    handleChange
+  };
+};
+
+/**
+ * A basic card component, unstyled by default.
+ *
+ * ## Component API
+ *
+ * ### Background
+ *
+ * In order to control the background of a card, the following tokens are currently
+ * supported:
+ *
+ * - `backgroundColor`
+ *
+ * ### Border
+ *
+ * The following border tokens can be used:
+ *
+ * - `borderColor`
+ * - `borderRadius`
+ * - `borderWidth`
+ *
+ * ### Padding
+ *
+ * Please use the following tokens to control the padding:
+ *
+ * - `paddingBottom`
+ * - `paddingLeft`
+ * - `paddingRight`
+ * - `paddingTop`
+ *
+ * Note that various viewport sizes are supported as well.
+ *
+ * ### Shadow
+ *
+ * Feel free to use the following properties within the `shadow` token:
+ *
+ * - `inset`: boolean
+ * - `color`: string
+ * - `offsetX`: number
+ * - `offsetY`: number
+ * - `blur`: number
+ * - `spread`: number
+ *
+ * ## Accessibility
+ *
+ * Card supports all the common a11y props. Please remember that by marking a card as `accessible`
+ * you automatically make inaccessible its children, which may or may not be appropriate
+ * depending on what you are trying to achieve.
+ */
+const Card = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
+  let {
+    children,
+    tokens,
+    variant,
+    dataSet,
+    onPress,
+    id,
+    interactiveCard,
+    backgroundImage,
+    ...rest
+  } = _ref3;
+  const viewport = (0, _ViewportProvider.useViewport)();
+  const {
+    themeOptions
+  } = (0, _ThemeProvider.useTheme)();
+  const {
+    enableMediaQueryStyleSheet
+  } = themeOptions;
+  const useTokens = enableMediaQueryStyleSheet ? _ThemeProvider.useResponsiveThemeTokens : _ThemeProvider.useThemeTokens;
+  const themeTokens = useTokens('Card', tokens, variant, !enableMediaQueryStyleSheet && {
+    viewport
+  });
+  const selected = interactiveCard?.variant?.selected;
+  const inactive = interactiveCard?.variant?.inactive;
+  const selectionType = interactiveCard?.selectionType;
+  const getThemeTokens = (0, _ThemeProvider.useThemeTokensCallback)('Card', interactiveCard?.tokens, {
+    interactive: true,
+    ...(interactiveCard?.variant || {})
+  });
+  // When interactive area is present, spacing tokens should only be applied
+  // to individual Card sections, not Card as a whole
+  const {
+    paddingTop,
+    paddingBottom,
+    paddingLeft,
+    paddingRight,
+    ...restOfTokens
+  } = selectionType ? getThemeTokens() : themeTokens;
+  const {
+    inputBackgroundColor,
+    iconBackgroundColor,
+    iconColor,
+    icon,
+    inputBorderRadius,
+    inputHeight,
+    inputWidth,
+    iconSize,
+    inputShadow,
+    inputBorderWidth,
+    inputBorderColor
+  } = getThemeTokens();
+  const checkboxTokens = {
+    inputBackgroundColor,
+    iconBackgroundColor,
+    icon,
+    iconColor,
+    inputBorderRadius,
+    inputHeight,
+    inputWidth,
+    iconSize,
+    inputShadow,
+    inputBorderWidth,
+    inputBorderColor
+  };
+  const radioTokens = {
+    iconBackgroundColor,
+    iconColor,
+    containerShadow: inputShadow,
+    icon,
+    inputBackgroundColor,
+    inputBorderRadius,
+    inputSize: inputHeight,
+    checkedSize: iconSize,
+    inputBorderWidth,
+    inputBorderColor
+  };
+  let cardStyles;
+  let mediaIds;
+  if (enableMediaQueryStyleSheet) {
+    const mediaQueryStyleSheet = (0, _utils.createMediaQueryStyles)(themeTokens);
+    const {
+      ids,
+      styles
+    } = _utils.StyleSheet.create({
+      card: mediaQueryStyleSheet
+    });
+    cardStyles = styles.card;
+    mediaIds = ids.card;
+  } else {
+    cardStyles = themeTokens;
+  }
+  const renderInputPerSelectionType = props => {
+    switch (selectionType) {
+      case SelectionType.Checkbox:
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+          style: selectInputStyle(getThemeTokens()),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CheckboxButton.default, {
+            ...props,
+            tokens: {
+              ...checkboxTokens,
+              ...props?.tokens
+            }
+          })
+        });
+      case SelectionType.Radio:
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+          style: selectInputStyle(getThemeTokens()),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_RadioButton.default, {
+            ...props,
+            tokens: {
+              ...radioTokens,
+              ...props?.tokens
+            }
+          })
+        });
+      default:
+        return null;
+    }
+  };
+  const renderNoSelectionView = () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+    style: {
+      paddingTop,
+      paddingBottom,
+      paddingLeft,
+      paddingRight
+    },
+    children: children
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardBase.default, {
+      ref: ref,
+      tokens: interactiveCard?.body ? restOfTokens : cardStyles,
+      backgroundImage: backgroundImage,
+      dataSet: mediaIds && {
+        media: mediaIds
+      },
+      ...selectProps(rest),
+      children: interactiveCard?.body ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_PressableCardBase.default, {
+          ref: ref,
+          tokens: getThemeTokens,
+          dataSet: dataSet,
+          onPress: onPress,
+          ...selectProps(rest),
+          children: cardState => {
+            const {
+              iconColor: checkColor,
+              inputBackgroundColor: boxBackgroundColor,
+              iconBackgroundColor: checkBackgroundColor
+            } = getThemeTokens({
+              ...cardState,
+              selected,
+              interactive: true,
+              isControl: true
+            }, interactiveCard?.tokens);
+            return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+              children: [renderInputPerSelectionType(getInputProps({
+                id,
+                checkColor,
+                boxBackgroundColor,
+                checkBackgroundColor,
+                isControlled: true,
+                isChecked: selected || cardState?.hover,
+                isInactive: inactive,
+                onPress
+              })), typeof interactiveCard?.body === 'function' ? interactiveCard.body(cardState) : interactiveCard.body]
+            });
+          }
+        }), children && selectionType !== SelectionType.None ? renderNoSelectionView() : null]
+      }) : children
+    })
+  });
+});
+Card.displayName = 'Card';
+Card.propTypes = {
+  ...selectedSystemPropTypes,
+  /**
+   * Card content.
+   */
+  children: _propTypes.default.node,
+  /**
+   * Card tokens.
+   */
+  tokens: (0, _utils.getTokensPropType)('Card'),
+  /**
+   * Card variant.
+   */
+  variant: _utils.variantProp.propType,
+  /**
+   * Function to call on pressing the card.
+   * Note: This is only available when `interactiveCard` prop is used.
+   */
+  onPress: _propTypes.default.func,
+  /**
+   * Card ID.
+   */
+  id: _propTypes.default.string,
+  /**
+   * Object to set interactive card's properties
+   * - body: The body of the interactive card, can be any renderable node
+   * - tokens: The tokens to be used for the interactive card
+   * - selectionType: If the card has `isControl` variant set to `true`, the selectionType can have one of the following options: 
+        - `radiogroup`
+        - `checkbox`
+   * - variant: The variant to be used for the interactive card
+   */
+  interactiveCard: _propTypes.default.shape({
+    body: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]),
+    tokens: (0, _utils.getTokensPropType)('Card'),
+    selectionType: _propTypes.default.oneOf(Object.values(SelectionType)),
+    variant: _utils.variantProp.propType
+  }),
+  /**
+   * Apply background image to the card.
+   */
+  backgroundImage: _propTypes.default.shape({
+    // The image src is either a URI string or a number (when a local image src is bundled in IOS or Android app)
+    // src is an object when used responsively to provide different image sources for different screen sizes
+    src: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number, _propTypes.default.object]).isRequired,
+    alt: _propTypes.default.string,
+    resizeMode: _props.responsiveProps.getTypeOptionallyByViewport(_propTypes.default.oneOf(['cover', 'contain', 'stretch', 'repeat', 'center']))
+  })
+};
+var _default = exports.default = Card;

package/lib/cjs/Card/CardBase.js

@@ -0,0 +1,127 @@
+"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 _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
+var _ImageBackground = _interopRequireDefault(require("react-native-web/dist/cjs/exports/ImageBackground"));
+var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
+var _ThemeProvider = require("../ThemeProvider");
+var _utils = require("../utils");
+var _props = require("../utils/props");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const [selectProps, selectedSystemPropTypes] = (0, _props.selectSystemProps)([_props.a11yProps, _props.viewProps]);
+
+// Ensure explicit selection of tokens
+const selectStyles = _ref => {
+  let {
+    flex,
+    backgroundColor,
+    borderColor,
+    borderRadius,
+    borderWidth,
+    paddingBottom,
+    paddingLeft,
+    paddingRight,
+    paddingTop,
+    minWidth,
+    shadow,
+    backgroundGradient,
+    gradient,
+    maxHeight,
+    overflowY
+  } = _ref;
+  return {
+    flex,
+    backgroundColor,
+    borderColor,
+    borderRadius,
+    borderWidth,
+    paddingBottom,
+    paddingLeft,
+    paddingRight,
+    paddingTop,
+    minWidth,
+    ...(0, _ThemeProvider.applyShadowToken)(shadow),
+    ...(gradient && _Platform.default.OS === 'web' ? {
+      backgroundImage: `linear-gradient(${gradient.angle}deg, ${gradient.stops[0].color}, ${gradient.stops[1].color})`,
+      backgroundOrigin: `border-box`,
+      boxShadow: `inset 0 1000px white`,
+      border: `${borderWidth}px solid transparent`
+    } : {}),
+    ...(backgroundGradient && _Platform.default.OS === 'web' ? {
+      backgroundImage: `linear-gradient(${backgroundGradient.angle}deg, ${backgroundGradient.stops[0].color}, ${backgroundGradient.stops[1].color})`
+    } : {}),
+    ...(_Platform.default.OS === 'web' ? {
+      maxHeight,
+      overflowY
+    } : {})
+  };
+};
+
+/**
+ * A themeless base component for Card which components can apply theme tokens to. Not
+ * intended to be used in apps or sites directly: build themed components on top of this.
+ */
+const CardBase = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
+  let {
+    children,
+    tokens,
+    dataSet,
+    backgroundImage,
+    ...rest
+  } = _ref2;
+  const cardStyle = selectStyles(typeof tokens === 'function' ? tokens() : tokens);
+  const props = selectProps(rest);
+  const {
+    src = '',
+    alt = '',
+    resizeMode = ''
+  } = backgroundImage || {};
+  const backgroundImageResizeMode = (0, _utils.useResponsiveProp)(resizeMode, 'cover');
+  const imageSourceViewport = (0, _utils.formatImageSource)((0, _utils.useResponsiveProp)(src));
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+    style: cardStyle,
+    dataSet: dataSet,
+    ref: ref,
+    ...props,
+    children: src ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ImageBackground.default, {
+      alt: alt,
+      source: imageSourceViewport,
+      imageStyle: {
+        borderRadius: cardStyle?.borderRadius - cardStyle?.borderWidth
+      },
+      resizeMode: backgroundImageResizeMode,
+      style: styles.imageBackground,
+      children: children
+    }) : children
+  });
+});
+CardBase.displayName = 'CardBase';
+const styles = _StyleSheet.default.create({
+  imageBackground: {
+    width: '100%',
+    height: '100%'
+  }
+});
+CardBase.propTypes = {
+  ...selectedSystemPropTypes,
+  children: _propTypes.default.node,
+  tokens: (0, _utils.getTokensPropType)('Card'),
+  /**
+   * Apply background image to the card.
+   */
+  backgroundImage: _propTypes.default.shape({
+    // The image src is either a URI string or a number (when a local image src is bundled in IOS or Android app)
+    // src is an object when used responsively to provide different image sources for different screen sizes
+    src: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number, _propTypes.default.object]).isRequired,
+    alt: _propTypes.default.string,
+    resizeMode: _utils.responsiveProps.getTypeOptionallyByViewport(_propTypes.default.oneOf(['cover', 'contain', 'stretch', 'repeat', 'center']))
+  })
+};
+var _default = exports.default = CardBase;

package/lib/cjs/Card/PressableCardBase.js

@@ -0,0 +1,121 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.selectPressableCardTokens = 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 _ViewportProvider = require("../ViewportProvider");
+var _ThemeProvider = require("../ThemeProvider");
+var _utils = require("../utils");
+var _CardBase = _interopRequireDefault(require("./CardBase"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.focusHandlerProps, _utils.viewProps]);
+const tokenKeys = ['flex', 'backgroundColor', 'borderColor', 'gradient', 'borderRadius', 'borderWidth', 'paddingBottom', 'paddingLeft', 'paddingRight', 'paddingTop', 'minWidth', 'shadow', 'contentAlignItems', 'contentJustifyContent', 'contentFlexGrow', 'contentFlexShrink',
+// Outer border tokens. TODO: centralise common token sets like these as part of
+// https://github.com/telus/universal-design-system/issues/782
+'outerBorderColor', 'outerBorderWidth', 'outerBorderGap', 'icon', 'iconBackgroundColor', 'iconColor', 'iconSize', 'inputBackgroundColor', 'inputBorderColor', 'inputBorderRadius', 'inputBorderWidth', 'inputHeight', 'inputShadow', 'inputWidth'];
+const selectPressableCardTokens = tokens => Object.fromEntries(tokenKeys.map(key => [key, tokens[key]]));
+
+/**
+ * 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.
+ */
+exports.selectPressableCardTokens = selectPressableCardTokens;
+const PressableCardBase = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+  let {
+    children,
+    tokens,
+    checked,
+    validation,
+    inactive,
+    href,
+    hrefAttrs,
+    dataSet,
+    accessibilityRole = href ? 'link' : undefined,
+    ...rawRest
+  } = _ref;
+  const {
+    onPress,
+    ...rest
+  } = _utils.clickProps.toPressProps(rawRest);
+  const viewport = (0, _ViewportProvider.useViewport)();
+  const additionalState = {
+    checked,
+    validation,
+    inactive,
+    viewport
+  };
+  const getCardState = pressableState => (0, _utils.resolvePressableState)(pressableState, additionalState);
+  const getTokens = pressableState => (0, _ThemeProvider.validateThemeTokens)((0, _utils.resolvePressableTokens)(tokens, pressableState, additionalState), (0, _utils.getTokensSetPropType)(tokenKeys, {
+    partial: true,
+    allowFunction: true
+  }), 'PressableCard');
+  const getCardTokens = pressableState => (0, _utils.selectTokens)('Card', getTokens(pressableState));
+  const getOuterBorderStyle = pressableState => {
+    const {
+      flex,
+      minWidth,
+      outerBorderColor,
+      outerBorderGap = 0,
+      outerBorderWidth = 0,
+      borderRadius
+    } = getTokens(pressableState);
+    return {
+      flex,
+      minWidth: minWidth + outerBorderGap + outerBorderWidth,
+      ...(0, _ThemeProvider.applyOuterBorder)({
+        outerBorderColor,
+        outerBorderGap,
+        outerBorderWidth,
+        borderRadius
+      }),
+      ..._Platform.default.select({
+        web: {
+          outline: 'none'
+        }
+      })
+    };
+  };
+  const handleChange = _utils.linkProps.handleHref({
+    href,
+    onPress
+  });
+  const handleKeyDown = event => {
+    // The expected keyboard shortcut for selecting a focused item is the Space key
+    if (event?.key === ' ') handleChange(event);
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Pressable.default, {
+    ref: ref,
+    href: href,
+    onPress: handleChange,
+    onKeyDown: handleKeyDown,
+    hrefAttrs: hrefAttrs,
+    style: getOuterBorderStyle,
+    dataSet: dataSet,
+    ...selectProps({
+      ...rest,
+      accessibilityRole
+    }),
+    children: pressableState => /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardBase.default, {
+      tokens: getCardTokens(pressableState),
+      children: typeof children === 'function' ? children(getCardState(pressableState)) : children
+    })
+  });
+});
+PressableCardBase.displayName = 'PressableCardBase';
+PressableCardBase.propTypes = {
+  ...selectedSystemPropTypes,
+  children: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.node]),
+  tokens: (0, _utils.getTokensSetPropType)(tokenKeys, {
+    partial: true,
+    allowFunction: true
+  }),
+  variant: _utils.variantProp.propType
+};
+var _default = exports.default = (0, _utils.withLinkRouter)(PressableCardBase);

package/lib/cjs/Card/index.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  PressableCardBase: true
+};
+Object.defineProperty(exports, "PressableCardBase", {
+  enumerable: true,
+  get: function () {
+    return _PressableCardBase.default;
+  }
+});
+exports.default = void 0;
+var _Card = _interopRequireDefault(require("./Card"));
+var _PressableCardBase = _interopRequireWildcard(require("./PressableCardBase"));
+Object.keys(_PressableCardBase).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _PressableCardBase[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _PressableCardBase[key];
+    }
+  });
+});
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _default = exports.default = _Card.default;