@telus-uds/components-web 1.4.0 → 1.5.0

package/CHANGELOG.md

@@ -1,12 +1,21 @@
 # Change Log - @telus-uds/components-web
 
-This log was last generated on Thu, 13 Apr 2023 05:51:59 GMT and should not be manually modified.
+This log was last generated on Tue, 18 Apr 2023 11:46:09 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 1.5.0
+
+Tue, 18 Apr 2023 11:46:09 GMT
+
+### Minor changes
+
+- Paragraph multibranded (akshay.pandey1@telus.com)
+- Bump @telus-uds/components-base to v1.34.1
+
 ## 1.4.0
 
-Thu, 13 Apr 2023 05:51:59 GMT
+Thu, 13 Apr 2023 05:59:09 GMT
 
 ### Minor changes
 

package/lib/Paragraph/Paragraph.js

@@ -0,0 +1,107 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _componentsBase = require("@telus-uds/components-base");
+
+var _utils = require("../utils");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const [selectProps, selectedSystemPropTypes] = (0, _componentsBase.selectSystemProps)([_utils.htmlAttrs]);
+
+const StyledParagraph = /*#__PURE__*/_styledComponents.default.p.withConfig({
+  displayName: "Paragraph__StyledParagraph",
+  componentId: "components-web__sc-1bg9r8p-0"
+})(["", " ", " &:first-child{margin-block-start:0em;}&:last-child{margin-block-end:0em;}"], _ref => {
+  let {
+    align
+  } = _ref;
+  return align ? `text-align: ${align};` : '';
+}, _ref2 => {
+  let {
+    linesBetween
+  } = _ref2;
+  return `
+    margin-block-start: ${linesBetween}em;
+    margin-block-end: ${linesBetween}em;
+  `;
+});
+/**
+* Block text as an HTML ```<p>``` element.
+	*
+	* ##Usage criteria
+	*
+	* - All body text should be contained in a **Paragraph**, regardless of length.
+	* - If the Paragraph is on a dark background, variant **{ invert: true }** must be used to maintain sufficient colour
+	contrast.
+	* - All Allium Typography variants other than header size variants are supported.
+	*/
+
+
+const Paragraph = _ref3 => {
+  let {
+    children,
+    variant,
+    tokens,
+    testID,
+    align,
+    linesBetween = 1,
+    ...rest
+  } = _ref3;
+  const style = (0, _utils.useTypographyTheme)(variant, tokens);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledParagraph, {
+    linesBetween: linesBetween,
+    "data-testid": testID,
+    align: align,
+    style: style,
+    ...selectProps(rest),
+    children: children
+  });
+};
+
+Paragraph.propTypes = { ...selectedSystemPropTypes,
+  children: _propTypes.default.node.isRequired,
+  testID: _propTypes.default.string,
+
+  /**
+   * Sets the alignment style for the paragraph. Same options as Typography's `align` prop.
+   * 'justify' should be avoided as it usually reduces ease of reading.
+   */
+  align: _propTypes.default.oneOf(['auto', 'left', 'right', 'center', 'justify']),
+
+  /**
+   * How much space between consecutive paragraphs, or between a paragraph and its siblings, in CSS
+   * `em` units: 1 gives space equal to one line of paragraph text, 0.5 would be half a line, etc.
+   * @default 1
+   */
+  linesBetween: _propTypes.default.number,
+
+  /**
+   * Paragraph takes the same tokens overrides as Typography
+   */
+  tokens: _propTypes.default.oneOf([_propTypes.default.object, _propTypes.default.func]),
+
+  /**
+   * Paragraph takes any of Typography's theme variants except for header sizes
+   */
+  variant: _propTypes.default.exact({
+    bold: _propTypes.default.bool,
+    colour: _propTypes.default.oneOf(['secondary', 'tertiary']),
+    inverse: _propTypes.default.bool,
+    size: _propTypes.default.oneOf(['micro', 'small', 'large'])
+  })
+};
+var _default = Paragraph;
+exports.default = _default;

package/lib/Paragraph/index.js

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

package/lib/index.js

@@ -10,6 +10,7 @@ var _exportNames = {
   ResponsiveImage: true,
   Ribbon: true,
   DatePicker: true,
+  Paragraph: true,
   Span: true,
   ExpandCollapseMini: true,
   Callout: true,
@@ -60,6 +61,12 @@ Object.defineProperty(exports, "OrderedList", {
     return _OrderedList.default;
   }
 });
+Object.defineProperty(exports, "Paragraph", {
+  enumerable: true,
+  get: function () {
+    return _Paragraph.default;
+  }
+});
 Object.defineProperty(exports, "PreviewCard", {
   enumerable: true,
   get: function () {
@@ -109,6 +116,8 @@ var _Ribbon = _interopRequireDefault(require("./Ribbon"));
 
 var _DatePicker = _interopRequireDefault(require("./DatePicker"));
 
+var _Paragraph = _interopRequireDefault(require("./Paragraph"));
+
 var _Span = _interopRequireDefault(require("./Span"));
 
 var _ExpandCollapseMini = _interopRequireDefault(require("./ExpandCollapseMini"));

package/lib-module/Paragraph/Paragraph.js

@@ -0,0 +1,89 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import { selectSystemProps } from '@telus-uds/components-base';
+import { htmlAttrs, useTypographyTheme } from '../utils';
+import { jsx as _jsx } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
+const StyledParagraph = /*#__PURE__*/styled.p.withConfig({
+  displayName: "Paragraph__StyledParagraph",
+  componentId: "components-web__sc-1bg9r8p-0"
+})(["", " ", " &:first-child{margin-block-start:0em;}&:last-child{margin-block-end:0em;}"], _ref => {
+  let {
+    align
+  } = _ref;
+  return align ? `text-align: ${align};` : '';
+}, _ref2 => {
+  let {
+    linesBetween
+  } = _ref2;
+  return `
+    margin-block-start: ${linesBetween}em;
+    margin-block-end: ${linesBetween}em;
+  `;
+});
+/**
+* Block text as an HTML ```<p>``` element.
+	*
+	* ##Usage criteria
+	*
+	* - All body text should be contained in a **Paragraph**, regardless of length.
+	* - If the Paragraph is on a dark background, variant **{ invert: true }** must be used to maintain sufficient colour
+	contrast.
+	* - All Allium Typography variants other than header size variants are supported.
+	*/
+
+const Paragraph = _ref3 => {
+  let {
+    children,
+    variant,
+    tokens,
+    testID,
+    align,
+    linesBetween = 1,
+    ...rest
+  } = _ref3;
+  const style = useTypographyTheme(variant, tokens);
+  return /*#__PURE__*/_jsx(StyledParagraph, {
+    linesBetween: linesBetween,
+    "data-testid": testID,
+    align: align,
+    style: style,
+    ...selectProps(rest),
+    children: children
+  });
+};
+
+Paragraph.propTypes = { ...selectedSystemPropTypes,
+  children: PropTypes.node.isRequired,
+  testID: PropTypes.string,
+
+  /**
+   * Sets the alignment style for the paragraph. Same options as Typography's `align` prop.
+   * 'justify' should be avoided as it usually reduces ease of reading.
+   */
+  align: PropTypes.oneOf(['auto', 'left', 'right', 'center', 'justify']),
+
+  /**
+   * How much space between consecutive paragraphs, or between a paragraph and its siblings, in CSS
+   * `em` units: 1 gives space equal to one line of paragraph text, 0.5 would be half a line, etc.
+   * @default 1
+   */
+  linesBetween: PropTypes.number,
+
+  /**
+   * Paragraph takes the same tokens overrides as Typography
+   */
+  tokens: PropTypes.oneOf([PropTypes.object, PropTypes.func]),
+
+  /**
+   * Paragraph takes any of Typography's theme variants except for header sizes
+   */
+  variant: PropTypes.exact({
+    bold: PropTypes.bool,
+    colour: PropTypes.oneOf(['secondary', 'tertiary']),
+    inverse: PropTypes.bool,
+    size: PropTypes.oneOf(['micro', 'small', 'large'])
+  })
+};
+export default Paragraph;

package/lib-module/Paragraph/index.js

@@ -0,0 +1,2 @@
+import Paragraph from './Paragraph';
+export default Paragraph;

package/lib-module/index.js

@@ -4,6 +4,7 @@ export { default as PreviewCard } from './PreviewCard';
 export { default as ResponsiveImage } from './ResponsiveImage';
 export { default as Ribbon } from './Ribbon';
 export { default as DatePicker } from './DatePicker';
+export { default as Paragraph } from './Paragraph';
 export { default as Span } from './Span';
 export { default as ExpandCollapseMini } from './ExpandCollapseMini';
 export { default as Callout } from './Callout';

package/package.json

@@ -5,7 +5,7 @@
   ],
   "dependencies": {
     "@gorhom/portal": "^1.0.14",
-    "@telus-uds/components-base": "1.34.0",
+    "@telus-uds/components-base": "1.34.1",
     "@telus-uds/system-constants": "^1.2.0",
     "react-dates": "^21.8.0",
     "react-moment-proptypes": "^1.8.1",
@@ -58,5 +58,5 @@
     "skip": true
   },
   "types": "types/index.d.ts",
-  "version": "1.4.0"
+  "version": "1.5.0"
 }

package/src/Paragraph/Paragraph.jsx

@@ -0,0 +1,79 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import styled from 'styled-components'
+import { selectSystemProps } from '@telus-uds/components-base'
+
+import { htmlAttrs, useTypographyTheme } from '../utils'
+
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
+
+const StyledParagraph = styled.p`
+  ${({ align }) => (align ? `text-align: ${align};` : '')}
+  ${({ linesBetween }) => `
+    margin-block-start: ${linesBetween}em;
+    margin-block-end: ${linesBetween}em;
+  `}
+  &:first-child {
+    margin-block-start: 0em;
+  }
+  &:last-child {
+    margin-block-end: 0em;
+  }
+`
+
+/**
+* Block text as an HTML ```<p>``` element.
+	*
+	* ##Usage criteria
+	*
+	* - All body text should be contained in a **Paragraph**, regardless of length.
+	* - If the Paragraph is on a dark background, variant **{ invert: true }** must be used to maintain sufficient colour
+	contrast.
+	* - All Allium Typography variants other than header size variants are supported.
+	*/
+const Paragraph = ({ children, variant, tokens, testID, align, linesBetween = 1, ...rest }) => {
+  const style = useTypographyTheme(variant, tokens)
+  return (
+    <StyledParagraph
+      linesBetween={linesBetween}
+      data-testid={testID}
+      align={align}
+      style={style}
+      {...selectProps(rest)}
+    >
+      {children}
+    </StyledParagraph>
+  )
+}
+
+Paragraph.propTypes = {
+  ...selectedSystemPropTypes,
+  children: PropTypes.node.isRequired,
+  testID: PropTypes.string,
+  /**
+   * Sets the alignment style for the paragraph. Same options as Typography's `align` prop.
+   * 'justify' should be avoided as it usually reduces ease of reading.
+   */
+  align: PropTypes.oneOf(['auto', 'left', 'right', 'center', 'justify']),
+  /**
+   * How much space between consecutive paragraphs, or between a paragraph and its siblings, in CSS
+   * `em` units: 1 gives space equal to one line of paragraph text, 0.5 would be half a line, etc.
+   * @default 1
+   */
+  linesBetween: PropTypes.number,
+  /**
+   * Paragraph takes the same tokens overrides as Typography
+   */
+  tokens: PropTypes.oneOf([PropTypes.object, PropTypes.func]),
+  /**
+   * Paragraph takes any of Typography's theme variants except for header sizes
+   */
+  variant: PropTypes.exact({
+    bold: PropTypes.bool,
+    colour: PropTypes.oneOf(['secondary', 'tertiary']),
+    inverse: PropTypes.bool,
+    size: PropTypes.oneOf(['micro', 'small', 'large'])
+  })
+}
+
+export default Paragraph

package/src/Paragraph/index.js

@@ -0,0 +1,3 @@
+import Paragraph from './Paragraph'
+
+export default Paragraph

package/src/index.js

@@ -4,6 +4,7 @@ export { default as PreviewCard } from './PreviewCard'
 export { default as ResponsiveImage } from './ResponsiveImage'
 export { default as Ribbon } from './Ribbon'
 export { default as DatePicker } from './DatePicker'
+export { default as Paragraph } from './Paragraph'
 export { default as Span } from './Span'
 export { default as ExpandCollapseMini } from './ExpandCollapseMini'
 export { default as Callout } from './Callout'