@telus-uds/components-community.content-card 1.0.0

package/CHANGELOG.md

@@ -0,0 +1,16 @@
+# Change Log - @telus-uds/components-community.content-card
+
+This log was last generated on Thu, 26 Oct 2023 19:24:58 GMT and should not be manually modified.
+
+<!-- Start content -->
+
+## 1.0.0
+
+Thu, 26 Oct 2023 19:24:58 GMT
+
+### Major changes
+
+- content card component (srikanthkhari@gmail.com)
+- Bump @telus-uds/components-base to v1.65.0
+- Bump @telus-uds/browserslist-config to v1.0.5
+- Bump @telus-uds/system-theme-tokens to v2.42.0

package/lib/ContentCard.js

@@ -0,0 +1,209 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.styles = exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _componentsBase = require("@telus-uds/components-base");
+
+var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
+
+var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
+
+var _ImageBackground = _interopRequireDefault(require("react-native-web/dist/cjs/exports/ImageBackground"));
+
+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; }
+
+/* eslint-disable react/require-default-props */
+const styles = _StyleSheet.default.create({
+  rowReverse: {
+    flexDirection: 'row-reverse'
+  },
+  innerContainer: {
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    width: 'auto'
+  },
+  informationContainer: {
+    width: '65%'
+  }
+}); // Passes React Native-oriented system props through UDS PressableCardBase
+
+
+exports.styles = styles;
+const [selectProps, selectedSystemPropTypes] = (0, _componentsBase.selectSystemProps)([_componentsBase.a11yProps, _componentsBase.focusHandlerProps, _componentsBase.viewProps]);
+const ContentCard = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    title,
+    content,
+    linkText,
+    onPress,
+    href,
+    customImage,
+    imageSrc,
+    imageHeight,
+    imageWidth,
+    isContentOnRight,
+    tokens,
+    ...rest
+  } = _ref;
+  const viewport = (0, _componentsBase.useViewport)();
+  const innerContainerStyle = isContentOnRight ? [styles.innerContainer, styles.rowReverse] : styles.innerContainer;
+  const generalTokens = (0, _componentsBase.useThemeTokens)('ContentCard', tokens);
+  const getTokens = (0, _componentsBase.useThemeTokensCallback)('ContentCard', tokens);
+  const cardTokens = (0, _componentsBase.useThemeTokens)('Card', tokens, {}, {
+    viewport
+  });
+
+  const {
+    hrefAttrs,
+    rest: unusedRest
+  } = _componentsBase.hrefAttrsProp.bundle(rest);
+
+  const getPressableCardTokens = cardState => {
+    return { ...cardTokens,
+      ...getTokens(cardState)
+    };
+  };
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.PressableCardBase, {
+    ref: ref,
+    onPress: onPress,
+    href: href,
+    hrefAttrs: hrefAttrs,
+    tokens: getPressableCardTokens,
+    ...selectProps(unusedRest),
+    children: cardState => {
+      const {
+        borderWidth
+      } = getPressableCardTokens(cardState); // Stop content jumping around as border size changes
+
+      const borderOffset = borderWidth - generalTokens.borderWidth;
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Box, {
+        horizontal: {
+          xs: 4,
+          lg: 5,
+          options: {
+            subtract: borderOffset
+          }
+        },
+        vertical: {
+          xs: 5,
+          lg: 7,
+          options: {
+            subtract: borderOffset
+          }
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
+          style: innerContainerStyle,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
+            style: styles.informationContainer,
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
+              heading: "h3",
+              variant: {
+                bold: true,
+                colour: 'brand'
+              },
+              children: title
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Spacer, {
+              space: 1
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
+              variant: {
+                size: 'small'
+              },
+              children: content
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Spacer, {
+              space: 3
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.ChevronLink, {
+              disabled: true,
+              children: linkText
+            })]
+          }), customImage || /*#__PURE__*/(0, _jsxRuntime.jsx)(_ImageBackground.default, {
+            source: imageSrc // eslint-disable-next-line react-native/no-inline-styles
+            ,
+            style: {
+              flex: 1,
+              aspectRatio: imageWidth / imageHeight,
+              maxHeight: imageHeight,
+              maxWidth: imageWidth
+            },
+            resizeMode: "cover"
+          })]
+        })
+      });
+    }
+  });
+});
+ContentCard.displayName = 'ContentCard';
+ContentCard.propTypes = { ...selectedSystemPropTypes,
+
+  /**
+   * The URL  to be navigated to.
+   */
+  href: _propTypes.default.string,
+
+  /**
+   * Text stating the title or headline.
+   */
+  title: _propTypes.default.string.isRequired,
+
+  /**
+   * Text giving a short content of the card. One paragraph of plain text.
+   */
+  content: _propTypes.default.string.isRequired,
+
+  /**
+   * Text for the ChevronLink.
+   */
+  linkText: _propTypes.default.string.isRequired,
+
+  /**
+   * Optional function to be called on press e.g. for within-page navigation.
+   */
+  onPress: _propTypes.default.func,
+
+  /**
+   * Src of the Image.
+   */
+  imageSrc: _propTypes.default.string,
+
+  /**
+   * Height of the Image.
+   */
+  imageHeight: _propTypes.default.number,
+
+  /**
+   * Width of the Image.
+   */
+  imageWidth: _propTypes.default.number,
+
+  /**
+   * Custom Image to be used instead of the default image.
+   */
+  customImage: _propTypes.default.node,
+
+  /**
+   * Controls if the content is on the right side of the image.
+   */
+  isContentOnRight: _propTypes.default.bool
+};
+ContentCard.defaultProps = {
+  isContentOnRight: false
+};
+
+var _default = (0, _componentsBase.withLinkRouter)(ContentCard);
+
+exports.default = _default;

package/lib/index.js

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

package/lib/index.native.js

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

package/lib-module/ContentCard.js

@@ -0,0 +1,184 @@
+/* eslint-disable react/require-default-props */
+import React, { forwardRef } from 'react';
+import PropTypes from 'prop-types';
+import { Typography, Spacer, ChevronLink, PressableCardBase, selectSystemProps, hrefAttrsProp, withLinkRouter, a11yProps, focusHandlerProps, useThemeTokensCallback, useViewport, useThemeTokens, Box, viewProps } from '@telus-uds/components-base';
+import StyleSheet from "react-native-web/dist/exports/StyleSheet";
+import View from "react-native-web/dist/exports/View";
+import ImageBackground from "react-native-web/dist/exports/ImageBackground";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export const styles = StyleSheet.create({
+  rowReverse: {
+    flexDirection: 'row-reverse'
+  },
+  innerContainer: {
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    width: 'auto'
+  },
+  informationContainer: {
+    width: '65%'
+  }
+}); // Passes React Native-oriented system props through UDS PressableCardBase
+
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, focusHandlerProps, viewProps]);
+const ContentCard = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    title,
+    content,
+    linkText,
+    onPress,
+    href,
+    customImage,
+    imageSrc,
+    imageHeight,
+    imageWidth,
+    isContentOnRight,
+    tokens,
+    ...rest
+  } = _ref;
+  const viewport = useViewport();
+  const innerContainerStyle = isContentOnRight ? [styles.innerContainer, styles.rowReverse] : styles.innerContainer;
+  const generalTokens = useThemeTokens('ContentCard', tokens);
+  const getTokens = useThemeTokensCallback('ContentCard', tokens);
+  const cardTokens = useThemeTokens('Card', tokens, {}, {
+    viewport
+  });
+  const {
+    hrefAttrs,
+    rest: unusedRest
+  } = hrefAttrsProp.bundle(rest);
+
+  const getPressableCardTokens = cardState => {
+    return { ...cardTokens,
+      ...getTokens(cardState)
+    };
+  };
+
+  return /*#__PURE__*/_jsx(PressableCardBase, {
+    ref: ref,
+    onPress: onPress,
+    href: href,
+    hrefAttrs: hrefAttrs,
+    tokens: getPressableCardTokens,
+    ...selectProps(unusedRest),
+    children: cardState => {
+      const {
+        borderWidth
+      } = getPressableCardTokens(cardState); // Stop content jumping around as border size changes
+
+      const borderOffset = borderWidth - generalTokens.borderWidth;
+      return /*#__PURE__*/_jsx(Box, {
+        horizontal: {
+          xs: 4,
+          lg: 5,
+          options: {
+            subtract: borderOffset
+          }
+        },
+        vertical: {
+          xs: 5,
+          lg: 7,
+          options: {
+            subtract: borderOffset
+          }
+        },
+        children: /*#__PURE__*/_jsxs(View, {
+          style: innerContainerStyle,
+          children: [/*#__PURE__*/_jsxs(View, {
+            style: styles.informationContainer,
+            children: [/*#__PURE__*/_jsx(Typography, {
+              heading: "h3",
+              variant: {
+                bold: true,
+                colour: 'brand'
+              },
+              children: title
+            }), /*#__PURE__*/_jsx(Spacer, {
+              space: 1
+            }), /*#__PURE__*/_jsx(Typography, {
+              variant: {
+                size: 'small'
+              },
+              children: content
+            }), /*#__PURE__*/_jsx(Spacer, {
+              space: 3
+            }), /*#__PURE__*/_jsx(ChevronLink, {
+              disabled: true,
+              children: linkText
+            })]
+          }), customImage || /*#__PURE__*/_jsx(ImageBackground, {
+            source: imageSrc // eslint-disable-next-line react-native/no-inline-styles
+            ,
+            style: {
+              flex: 1,
+              aspectRatio: imageWidth / imageHeight,
+              maxHeight: imageHeight,
+              maxWidth: imageWidth
+            },
+            resizeMode: "cover"
+          })]
+        })
+      });
+    }
+  });
+});
+ContentCard.displayName = 'ContentCard';
+ContentCard.propTypes = { ...selectedSystemPropTypes,
+
+  /**
+   * The URL  to be navigated to.
+   */
+  href: PropTypes.string,
+
+  /**
+   * Text stating the title or headline.
+   */
+  title: PropTypes.string.isRequired,
+
+  /**
+   * Text giving a short content of the card. One paragraph of plain text.
+   */
+  content: PropTypes.string.isRequired,
+
+  /**
+   * Text for the ChevronLink.
+   */
+  linkText: PropTypes.string.isRequired,
+
+  /**
+   * Optional function to be called on press e.g. for within-page navigation.
+   */
+  onPress: PropTypes.func,
+
+  /**
+   * Src of the Image.
+   */
+  imageSrc: PropTypes.string,
+
+  /**
+   * Height of the Image.
+   */
+  imageHeight: PropTypes.number,
+
+  /**
+   * Width of the Image.
+   */
+  imageWidth: PropTypes.number,
+
+  /**
+   * Custom Image to be used instead of the default image.
+   */
+  customImage: PropTypes.node,
+
+  /**
+   * Controls if the content is on the right side of the image.
+   */
+  isContentOnRight: PropTypes.bool
+};
+ContentCard.defaultProps = {
+  isContentOnRight: false
+};
+export default withLinkRouter(ContentCard);

package/lib-module/index.js

@@ -0,0 +1,3 @@
+import ContentCard from './ContentCard';
+export { default as ContentCard } from './ContentCard';
+export default ContentCard;

package/lib-module/index.native.js

@@ -0,0 +1,3 @@
+import ContentCard from './ContentCard';
+export { default as ContentCard } from './ContentCard';
+export default ContentCard;

package/package.json

@@ -0,0 +1,48 @@
+{
+  "author": "TELUS Digital",
+  "browserslist": [
+    "extends @telus-uds/browserslist-config"
+  ],
+  "dependencies": {
+    "prop-types": "^15.7.2",
+    "@telus-uds/components-base": "^1.65.0"
+  },
+  "devDependencies": {
+    "@telus-uds/browserslist-config": "^1.0.4",
+    "babel-plugin-styled-components": "^2.0.6",
+    "jest-styled-components": "^7.0.8",
+    "babel-plugin-react-native-web": "^0.17.0",
+    "@testing-library/react-native": "11.0.0",
+    "@telus-uds/system-theme-tokens": "^2.42.0"
+  },
+  "homepage": "https://github.com/telus/universal-design-system#readme",
+  "license": "MIT",
+  "name": "@telus-uds/components-community.content-card",
+  "peerDependencies": {
+    "react-native-web": "~0.17.7 || ~0.18.7",
+    "react-native": "*",
+    "react": "^17.0.2 || ^18.0.0",
+    "react-dom": "^17.0.2 || ^18.0.0"
+  },
+  "main": "lib/index.js",
+  "module": "lib-module/index.js",
+  "react-native": "src/index.js",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/telus/universal-design-system.git"
+  },
+  "scripts": {
+    "format": "prettier --write .",
+    "lint": "telus-standard",
+    "lint:fix": "telus-standard --fix",
+    "test": "jest",
+    "build:main": "babel src -d lib",
+    "build:module": "babel src -d lib-module --env-name module",
+    "build": "npm run build:main && npm run build:module"
+  },
+  "sideEffects": false,
+  "standard-engine": {
+    "skip": true
+  },
+  "version": "1.0.0"
+}

package/src/ContentCard.jsx

@@ -0,0 +1,177 @@
+/* eslint-disable react/require-default-props */
+import React, { forwardRef } from 'react'
+import PropTypes from 'prop-types'
+import {
+  Typography,
+  Spacer,
+  ChevronLink,
+  PressableCardBase,
+  selectSystemProps,
+  hrefAttrsProp,
+  withLinkRouter,
+  a11yProps,
+  focusHandlerProps,
+  useThemeTokensCallback,
+  useViewport,
+  useThemeTokens,
+  Box,
+  viewProps
+} from '@telus-uds/components-base'
+import { StyleSheet, View, ImageBackground } from 'react-native'
+
+export const styles = StyleSheet.create({
+  rowReverse: {
+    flexDirection: 'row-reverse'
+  },
+  innerContainer: {
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    width: 'auto'
+  },
+  informationContainer: {
+    width: '65%'
+  }
+})
+
+// Passes React Native-oriented system props through UDS PressableCardBase
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([
+  a11yProps,
+  focusHandlerProps,
+  viewProps
+])
+
+const ContentCard = forwardRef(
+  (
+    {
+      title,
+      content,
+      linkText,
+      onPress,
+      href,
+      customImage,
+      imageSrc,
+      imageHeight,
+      imageWidth,
+      isContentOnRight,
+      tokens,
+      ...rest
+    },
+    ref
+  ) => {
+    const viewport = useViewport()
+    const innerContainerStyle = isContentOnRight
+      ? [styles.innerContainer, styles.rowReverse]
+      : styles.innerContainer
+    const generalTokens = useThemeTokens('ContentCard', tokens)
+    const getTokens = useThemeTokensCallback('ContentCard', tokens)
+    const cardTokens = useThemeTokens('Card', tokens, {}, { viewport })
+    const { hrefAttrs, rest: unusedRest } = hrefAttrsProp.bundle(rest)
+    const getPressableCardTokens = (cardState) => {
+      return { ...cardTokens, ...getTokens(cardState) }
+    }
+
+    return (
+      <PressableCardBase
+        ref={ref}
+        onPress={onPress}
+        href={href}
+        hrefAttrs={hrefAttrs}
+        tokens={getPressableCardTokens}
+        {...selectProps(unusedRest)}
+      >
+        {(cardState) => {
+          const { borderWidth } = getPressableCardTokens(cardState)
+
+          // Stop content jumping around as border size changes
+          const borderOffset = borderWidth - generalTokens.borderWidth
+
+          return (
+            <Box
+              horizontal={{ xs: 4, lg: 5, options: { subtract: borderOffset } }}
+              vertical={{ xs: 5, lg: 7, options: { subtract: borderOffset } }}
+            >
+              <View style={innerContainerStyle}>
+                <View style={styles.informationContainer}>
+                  <Typography heading="h3" variant={{ bold: true, colour: 'brand' }}>
+                    {title}
+                  </Typography>
+                  <Spacer space={1} />
+                  <Typography variant={{ size: 'small' }}>{content}</Typography>
+                  <Spacer space={3} />
+                  <ChevronLink disabled>{linkText}</ChevronLink>
+                </View>
+                {customImage || (
+                  <ImageBackground
+                    source={imageSrc}
+                    // eslint-disable-next-line react-native/no-inline-styles
+                    style={{
+                      flex: 1,
+                      aspectRatio: imageWidth / imageHeight,
+                      maxHeight: imageHeight,
+                      maxWidth: imageWidth
+                    }}
+                    resizeMode="cover"
+                  />
+                )}
+              </View>
+            </Box>
+          )
+        }}
+      </PressableCardBase>
+    )
+  }
+)
+
+ContentCard.displayName = 'ContentCard'
+
+ContentCard.propTypes = {
+  ...selectedSystemPropTypes,
+  /**
+   * The URL  to be navigated to.
+   */
+  href: PropTypes.string,
+  /**
+   * Text stating the title or headline.
+   */
+  title: PropTypes.string.isRequired,
+  /**
+   * Text giving a short content of the card. One paragraph of plain text.
+   */
+  content: PropTypes.string.isRequired,
+  /**
+   * Text for the ChevronLink.
+   */
+  linkText: PropTypes.string.isRequired,
+  /**
+   * Optional function to be called on press e.g. for within-page navigation.
+   */
+  onPress: PropTypes.func,
+  /**
+   * Src of the Image.
+   */
+  imageSrc: PropTypes.string,
+  /**
+   * Height of the Image.
+   */
+  imageHeight: PropTypes.number,
+  /**
+   * Width of the Image.
+   */
+  imageWidth: PropTypes.number,
+  /**
+   * Custom Image to be used instead of the default image.
+   */
+  customImage: PropTypes.node,
+  /**
+   * Controls if the content is on the right side of the image.
+   */
+  isContentOnRight: PropTypes.bool
+}
+
+ContentCard.defaultProps = {
+  isContentOnRight: false
+}
+
+export default withLinkRouter(ContentCard)

package/src/index.js

@@ -0,0 +1,5 @@
+import ContentCard from './ContentCard'
+
+export { default as ContentCard } from './ContentCard'
+
+export default ContentCard

package/src/index.native.js

@@ -0,0 +1,5 @@
+import ContentCard from './ContentCard'
+
+export { default as ContentCard } from './ContentCard'
+
+export default ContentCard