@telus-uds/components-web 3.3.0 → 4.0.0

package/lib/cjs/Card/Card.js

@@ -0,0 +1,257 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _componentsBase = require("@telus-uds/components-base");
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _CardContent = _interopRequireDefault(require("./CardContent"));
+var _CardFooter = _interopRequireDefault(require("./CardFooter"));
+var _FullBleedContent = _interopRequireWildcard(require("../shared/FullBleedContent"));
+var _ConditionalWrapper = _interopRequireDefault(require("../shared/ConditionalWrapper"));
+var _jsxRuntime = require("react/jsx-runtime");
+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 }; }
+// Passes React Native-oriented system props through UDS Card
+const [selectProps, selectedSystemPropTypes] = (0, _componentsBase.selectSystemProps)([_componentsBase.a11yProps, _componentsBase.viewProps]);
+
+/**
+ * A basic card component, unstyled by default.
+ *
+ * ## Component API
+ *
+ * ### With Footer
+ *
+ * Pass any component or simply a string in the `footer` prop in order to render
+ * a card with a footer (which uses the `alternative` background).
+ *
+ * ### With Full Bleed Content
+ *
+ * Use `fullBleedContent` prop to add a full bleed style image, video or other content to the
+ * card. This prop accepts an object with the following properties:
+ * - `alt`: alt tag for an image,
+ * - `src`: default image source,
+ * - `position`: `none`, `bottom`, `left`, `right` or `top`, depending on where you would like your full bleed image to be placed,
+ * - `imgCol`: set the span of the image per viewport (based on 12 column value for width of card) when `position` of image is on `left` or `right`
+ * - all the props from the `ResponsiveImage` component in case you want that full bleed image to be responsive,
+ * - `content`: pass a custom JSX to be used for rendering of the full bleed content (defaults to `ResponsiveImage`
+ *   receiving the other props).
+ *
+ * Note that `position` can be responsive, i.e. different for different viewports. A full bleed content with position
+ * {xs: 'none', md: 'left'} for example, will have a full bleed content to the left of card content when viewed on desktops
+ * viewports, and no content when viewed on mobile viewports.
+ *
+ * ## Accessibility
+ * `Card` component accepts all the standard accessibility props.
+ */
+const DynamicWidthContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
+  displayName: "Card__DynamicWidthContainer",
+  componentId: "components-web__sc-1elbtwd-0"
+})(_ref => {
+  let {
+    width,
+    display,
+    borderRadius,
+    overflow
+  } = _ref;
+  return {
+    width,
+    display,
+    borderRadius,
+    overflow
+  };
+});
+const Card = /*#__PURE__*/_react.default.forwardRef(function () {
+  let {
+    children,
+    footer,
+    footerPadding,
+    fullBleedImage,
+    fullBleedContent = fullBleedImage,
+    tokens = {},
+    variant,
+    interactiveCard,
+    onPress,
+    dataSet,
+    backgroundImage,
+    ...rest
+  } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
+    fullBleedContent: {
+      position: null
+    }
+  };
+  let ref = arguments.length > 1 ? arguments[1] : undefined;
+  const {
+    contentStackAlign,
+    contentStackDirection,
+    fullBleedContentPosition,
+    fullBleedContentProps
+  } = (0, _FullBleedContent.useFullBleedContentProps)(fullBleedContent);
+  const {
+    imgCol
+  } = fullBleedContentProps;
+
+  // If the card has rounded corners and a full bleed image, we need to apply
+  // those corners on the image as well, but partially
+  const {
+    borderRadius
+  } = (0, _componentsBase.useThemeTokens)('Card', tokens, variant);
+  const getThemeTokens = (0, _componentsBase.useThemeTokensCallback)('Card', interactiveCard?.tokens, {
+    interactive: true,
+    ...(interactiveCard?.variant || {})
+  });
+  const hasFooter = Boolean(footer);
+  const fullBleedBorderRadius = (0, _FullBleedContent.getFullBleedBorderRadius)(borderRadius, fullBleedContentPosition, hasFooter);
+
+  // takes imgCol from fullBleedContent if present, to dynamically set width of image
+  // card content will adapt to the size of image to add up to 100% width of card width
+  // pass as props to ConditionalWrapper
+  const imgColCurrentViewport = (0, _componentsBase.useResponsiveProp)(imgCol);
+  const maxCol = 12;
+  const fullBleedImageWidth = `${imgColCurrentViewport / maxCol * 100}%`;
+  const adaptiveContentWidth = `${(maxCol - imgColCurrentViewport) / maxCol * 100}%`;
+  const isImageWidthAdjustable = imgCol && (fullBleedContentPosition === 'left' || fullBleedContentPosition === 'right');
+  const contentWrapperStyleProps = {
+    width: adaptiveContentWidth,
+    display: imgColCurrentViewport >= maxCol ? 'none' : undefined
+  };
+  const imageWrapperStyleProps = {
+    width: fullBleedImageWidth,
+    borderRadius: imgColCurrentViewport >= maxCol ? borderRadius : undefined,
+    overflow: imgColCurrentViewport >= maxCol ? 'hidden' : undefined,
+    display: imgColCurrentViewport === 0 ? 'none' : undefined
+  };
+  const columnFlex = {
+    flexGrow: interactiveCard?.body ? 0 : 1,
+    flexShrink: 1,
+    justifyContent: 'space-between'
+  };
+  // 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
+  } = tokens;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_componentsBase.Card, {
+    ref: ref,
+    variant: {
+      ...variant,
+      padding: 'custom'
+    },
+    tokens: restOfTokens,
+    backgroundImage: backgroundImage,
+    ...selectProps(rest),
+    children: [interactiveCard?.body ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.PressableCardBase, {
+      ref: ref,
+      tokens: getThemeTokens,
+      dataSet: dataSet,
+      onPress: onPress,
+      ...selectProps(rest),
+      children: typeof interactiveCard?.body === 'function' ? interactiveCard.body() : interactiveCard.body
+    }) : null, children || fullBleedContentPosition !== 'none' ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_componentsBase.StackView, {
+      direction: contentStackDirection,
+      tokens: {
+        ...columnFlex,
+        alignItems: contentStackAlign
+      },
+      space: 0,
+      children: [children ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ConditionalWrapper.default, {
+        WrapperComponent: DynamicWidthContainer,
+        wrapperProps: contentWrapperStyleProps,
+        condition: isImageWidthAdjustable,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardContent.default, {
+          tokens: tokens,
+          variant: variant,
+          withFooter: hasFooter,
+          children: children
+        })
+      }) : null, fullBleedContentPosition !== 'none' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ConditionalWrapper.default, {
+        WrapperComponent: DynamicWidthContainer,
+        wrapperProps: imageWrapperStyleProps,
+        condition: isImageWidthAdjustable,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_FullBleedContent.default, {
+          borderRadius: fullBleedBorderRadius,
+          ...fullBleedContentProps,
+          position: fullBleedContentPosition
+        })
+      })]
+    }) : null, footer && /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardFooter.default, {
+      padding: footerPadding,
+      tokens: tokens,
+      variant: variant,
+      children: footer
+    })]
+  });
+});
+const positionValues = ['none', 'bottom', 'left', 'right', 'top'];
+const alignValues = ['start', 'end', 'center', 'stretch'];
+const PositionedFullBleedContentPropType = _propTypes.default.shape({
+  position: _componentsBase.responsiveProps.getTypeOptionallyByViewport(_propTypes.default.oneOf(positionValues)).isRequired,
+  align: _componentsBase.responsiveProps.getTypeOptionallyByViewport(_propTypes.default.oneOf(alignValues)),
+  // eslint-disable-next-line react/forbid-foreign-prop-types
+  ..._FullBleedContent.default.propTypes
+});
+Card.displayName = 'Card';
+Card.propTypes = {
+  ...selectedSystemPropTypes,
+  /**
+   * Card content.
+   */
+  children: _propTypes.default.node,
+  /**
+   * Card footer.
+   */
+  footer: _propTypes.default.node,
+  /**
+   * Custom card footer padding.
+   */
+  footerPadding: _componentsBase.paddingProp.propType,
+  /**
+   * Full bleed image to be placed on the card, deprecated in favor of `fullBleedContent`.
+   *
+   * @deprecated
+   */
+  fullBleedImage: PositionedFullBleedContentPropType,
+  /**
+   * Full bleed content to be placed on the card.
+   */
+  fullBleedContent: PositionedFullBleedContentPropType,
+  /**
+   * Card tokens.
+   */
+  tokens: (0, _componentsBase.getTokensPropType)('Card'),
+  /**
+   * Card variant.
+   */
+  variant: _componentsBase.variantProp.propType,
+  /**
+   * Function to call on pressing the card.
+   * Note: This is only available when `interactive` variant is used.
+   */
+  onPress: _propTypes.default.func,
+  /**
+   * Object to set interactive card's properties
+   */
+  interactiveCard: _propTypes.default.shape({
+    body: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]),
+    tokens: (0, _componentsBase.getTokensPropType)('Card'),
+    variant: _componentsBase.variantProp.propType
+  }),
+  /**
+   * Apply background image to the card.
+   */
+  backgroundImage: _propTypes.default.shape({
+    // src is either a URI string or an object when used responsively to provide different image sources for different screen sizes
+    src: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object]).isRequired,
+    alt: _propTypes.default.string,
+    resizeMode: _componentsBase.responsiveProps.getTypeOptionallyByViewport(_propTypes.default.oneOf(['cover', 'contain', 'stretch', 'repeat', 'center']))
+  })
+};
+var _default = exports.default = Card;

package/lib/cjs/Card/CardContent.js

@@ -0,0 +1,97 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _componentsBase = require("@telus-uds/components-base");
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _utils = require("../utils");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const [selectProps, selectedSystemPropTypes] = (0, _componentsBase.selectSystemProps)([_utils.htmlAttrs]);
+const CardContentContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
+  displayName: "CardContent__CardContentContainer",
+  componentId: "components-web__sc-1k2501q-0"
+})(_ref => {
+  let {
+    borderRadius,
+    paddingBottom,
+    paddingLeft,
+    paddingRight,
+    paddingTop,
+    withFooter,
+    contentAlignItems: alignItems,
+    contentFlexGrow: flexGrow,
+    contentFlexShrink: flexShrink,
+    contentJustifyContent: justifyContent,
+    borderWidth
+  } = _ref;
+  return {
+    // We need to make sure to have sharp corners on the bottom
+    // if the card has a footer
+    borderBottomLeftRadius: withFooter ? 0 : borderRadius,
+    borderBottomRightRadius: withFooter ? 0 : borderRadius,
+    borderTopLeftRadius: borderRadius,
+    borderTopRightRadius: borderRadius,
+    paddingBottom: paddingBottom - borderWidth,
+    paddingLeft: paddingLeft - borderWidth,
+    paddingRight: paddingRight - borderWidth,
+    paddingTop: paddingTop - borderWidth,
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems,
+    flexGrow,
+    flexShrink,
+    justifyContent
+  };
+});
+
+/**
+ * Card content, applying the card tokens as per the theme used.
+ */
+const CardContent = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
+  let {
+    children,
+    flexContent,
+    tokens,
+    variant,
+    withFooter = false,
+    ...rest
+  } = _ref2;
+  const viewport = (0, _componentsBase.useViewport)();
+  const themeTokens = (0, _componentsBase.useThemeTokens)('Card', tokens, variant, {
+    viewport
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(CardContentContainer, {
+    ...themeTokens,
+    flexContent: flexContent,
+    withFooter: withFooter,
+    ref: ref,
+    ...selectProps(rest),
+    children: children
+  });
+});
+CardContent.displayName = 'CardContent';
+CardContent.propTypes = {
+  ...selectedSystemPropTypes,
+  /**
+   * Card section content.
+   */
+  children: _propTypes.default.node,
+  /**
+   * Card tokens.
+   */
+  tokens: (0, _componentsBase.getTokensPropType)('Card'),
+  /**
+   * Card variant.
+   */
+  variant: _componentsBase.variantProp.propType,
+  /**
+   * Whether the card has a footer.
+   */
+  withFooter: _propTypes.default.bool
+};
+var _default = exports.default = CardContent;

package/lib/cjs/Card/CardFooter.js

@@ -0,0 +1,85 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _componentsBase = require("@telus-uds/components-base");
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _utils = require("../utils");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const [selectProps, selectedSystemPropTypes] = (0, _componentsBase.selectSystemProps)([_utils.htmlAttrs]);
+const CardFooterContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
+  displayName: "CardFooter__CardFooterContainer",
+  componentId: "components-web__sc-pm6vns-0"
+})(_ref => {
+  let {
+    backgroundColor,
+    borderRadius,
+    paddingBottom,
+    paddingLeft,
+    paddingRight,
+    paddingTop
+  } = _ref;
+  return {
+    backgroundColor,
+    borderBottomLeftRadius: borderRadius,
+    borderBottomRightRadius: borderRadius,
+    // @todo circle back to the following non-standard value to
+    // see if it can be integrated into the palette
+    boxShadow: 'inset 0px 1px 3px rgba(0, 0, 0, 0.05)',
+    paddingBottom,
+    paddingLeft,
+    paddingRight,
+    paddingTop
+  };
+});
+
+/**
+ * Card footer, applying the tokens as per the theme used.
+ */
+const CardFooter = _ref2 => {
+  let {
+    children,
+    padding,
+    tokens,
+    variant,
+    ...rest
+  } = _ref2;
+  const viewport = (0, _componentsBase.useViewport)();
+  const themeTokens = (0, _componentsBase.useThemeTokens)('Card', tokens, {
+    ...variant,
+    background: 'alternative'
+  }, {
+    viewport
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(CardFooterContainer, {
+    ...themeTokens,
+    ...padding,
+    ...selectProps(rest),
+    children: children
+  });
+};
+CardFooter.propTypes = {
+  ...selectedSystemPropTypes,
+  /**
+   * Card footer content.
+   */
+  children: _propTypes.default.node,
+  /**
+   * Card footer padding.
+   */
+  padding: _componentsBase.paddingProp.propType,
+  /**
+   * Card tokens.
+   */
+  tokens: (0, _componentsBase.getTokensPropType)('Card'),
+  /**
+   * Card variant.
+   */
+  variant: _componentsBase.variantProp.propType
+};
+var _default = exports.default = CardFooter;

package/lib/cjs/Card/index.js

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