@telus-uds/components-web 1.8.0 → 1.9.0

package/src/TermsAndConditions/ExpandCollapse.jsx

@@ -0,0 +1,106 @@
+import React, { forwardRef } from 'react'
+import PropTypes from 'prop-types'
+import {
+  ExpandCollapse as ExpandCollapseBase,
+  Icon,
+  useThemeTokensCallback
+} from '@telus-uds/components-base'
+import styled from 'styled-components'
+
+const ExpandCollapseControl = styled.div({
+  alignItems: 'center',
+  cursor: 'pointer',
+  display: 'flex',
+  flex: 1,
+  justifyContent: 'flex-start'
+})
+
+const ExpandCollapseIconContainer = styled.div(({ tokens }) => ({
+  alignItems: tokens.expandIconContainerAlignItems,
+  border: `${tokens.expandIconContainerBorder}px solid ${tokens.expandIconContainerBorderColor}`,
+  borderRadius: '50%',
+  display: 'flex',
+  height: tokens.expandIconContainerHeight,
+  justifyContent: tokens.expandIconContainerJustifyContent,
+  margin: `${tokens.expandIconContainerMarginX}px ${tokens.expandIconContainerMarginY}px`,
+  width: tokens.expandIconContainerWidth
+}))
+
+const ExpandCollapseTitle = styled.h4(({ tokens }) => ({
+  color: tokens.expandTitleColor,
+  fontFamily: `${tokens.listFontName}${tokens.listFontWeight}normal`,
+  fontSize: tokens.expandTitleFontSize,
+  lineHeight: tokens.expandTitleLineHeight,
+  margin: `${tokens.expandTitleMarginX}px ${tokens.expandTitleMarginY}px`
+}))
+
+const ExpandCollapse = forwardRef(
+  ({ children, collapseTitle, expandTitle = collapseTitle }, ref) => {
+    const getTokens = useThemeTokensCallback('TermsAndConditions', {}, {})
+    const {
+      expandBaseBorderWidth,
+      expandContentPaddingBottom,
+      expandContentPaddingLeft,
+      expandContentPaddingRight,
+      expandContentPaddingTop
+    } = getTokens()
+
+    return (
+      <ExpandCollapseBase
+        tokens={{
+          borderWidth: expandBaseBorderWidth
+        }}
+      >
+        {(expandProps) => (
+          <ExpandCollapseBase.Panel
+            {...expandProps}
+            panelId="ExpandCollapsePanel"
+            controlTokens={{ icon: null }}
+            // TODO refactor
+            // eslint-disable-next-line react/no-unstable-nested-components
+            control={(pressableState) => {
+              const { expanded } = pressableState || {}
+              const { icon } = getTokens({ expanded })
+
+              return (
+                <ExpandCollapseControl
+                  onClick={(event) => expandProps.onToggle('ExpandCollapsePanel', event)}
+                  ref={ref}
+                >
+                  <ExpandCollapseIconContainer tokens={getTokens()}>
+                    <Icon icon={icon} variant={{ size: 'small' }} />
+                  </ExpandCollapseIconContainer>
+                  <ExpandCollapseTitle tokens={getTokens()}>
+                    {expanded ? expandTitle : collapseTitle}
+                  </ExpandCollapseTitle>
+                </ExpandCollapseControl>
+              )
+            }}
+            tokens={{
+              contentPaddingBottom: expandContentPaddingBottom,
+              contentPaddingLeft: expandContentPaddingLeft,
+              contentPaddingRight: expandContentPaddingRight,
+              contentPaddingTop: expandContentPaddingTop
+            }}
+          >
+            {children}
+          </ExpandCollapseBase.Panel>
+        )}
+      </ExpandCollapseBase>
+    )
+  }
+)
+
+ExpandCollapse.displayName = 'ExpandCollapse'
+
+ExpandCollapse.propTypes = {
+  children: PropTypes.node.isRequired,
+  collapseTitle: PropTypes.string.isRequired,
+  expandTitle: PropTypes.string
+}
+
+ExpandCollapse.defaultProps = {
+  expandTitle: undefined
+}
+
+export default ExpandCollapse

package/src/TermsAndConditions/TermsAndConditions.jsx

@@ -0,0 +1,161 @@
+import React, { forwardRef } from 'react'
+import PropTypes from 'prop-types'
+import styled from 'styled-components'
+import {
+  Box,
+  Divider,
+  selectSystemProps,
+  Typography,
+  useCopy,
+  useThemeTokens
+} from '@telus-uds/components-base'
+import ExpandCollapse from './ExpandCollapse'
+import OrderedListBase from '../OrderedList/OrderedListBase'
+import { htmlAttrs, media, renderStructuredContent } from '../utils'
+import dictionary from './dictionary'
+
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
+
+const ContentContainer = styled.div(({ tokens }) => ({
+  paddingBottom: tokens.contentPaddingBottom,
+  paddingLeft: tokens.contentPaddingLeft,
+  ...media().from('md').css({
+    paddingBottom: tokens.mdContentPaddingBottom,
+    paddingLeft: tokens.mdContentPaddingLeft
+  })
+}))
+
+const Ordered = styled(OrderedListBase)(({ tokens }) => ({
+  listStylePosition: 'outside',
+  padding: tokens.orderedPadding
+}))
+
+const Unordered = styled.ul(({ tokens }) => ({
+  listStyleType: 'none',
+  margin: 0,
+  padding: tokens.unorderedPadding
+}))
+
+const ListItem = styled(OrderedListBase.Item)(({ tokens }) => ({
+  display: 'list-item',
+  '&::marker': {
+    fontFamily: `${tokens.listFontName}${tokens.listFontWeight}normal`,
+    fontSize: tokens.listFontSize,
+    lineHeight: tokens.listLineHeight,
+    textAlign: 'end !important'
+  },
+  color: tokens.listColor,
+  fontFamily: `${tokens.listFontName}${tokens.listFontWeight}normal`,
+  fontSize: tokens.listFontSize,
+  lineHeight: tokens.listLineHeight,
+  marginBottom: tokens.listMarginBottom,
+  marginLeft: tokens.listMarginLeft,
+  wordBreak: 'break-word'
+}))
+
+const NonIndexedContentTitle = styled.div(({ tokens }) => ({
+  color: tokens.titleColor,
+  fontSize: tokens.titleFontSize,
+  lineHeight: tokens.titleLineHeight,
+  paddingLeft: tokens.titlePaddingLeft
+}))
+
+/**
+ * Use `TermsAndConditions` to display important legal content.
+ *
+ * ## Usage Criteria
+ *
+ * - Display before the page footer, except for call-to-action callback cards
+ * - Responsive display based on breakpoints
+ * - Use `copy` to set language, ‘en’ for English or ‘fr’ for French
+ */
+const TermsAndConditions = forwardRef(
+  ({ copy = 'en', indexedContent, nonIndexedContent, tokens, variant = {}, ...rest }, ref) => {
+    const getCopy = useCopy({ dictionary, copy })
+    const hasIndexedContent = indexedContent.length > 0
+    const hasNonIndexedContent = nonIndexedContent.length > 0
+
+    const themeTokens = useThemeTokens('TermsAndConditions', tokens, variant)
+
+    return (
+      <div {...selectProps(rest)}>
+        <Divider />
+        <ExpandCollapse
+          collapseTitle={getCopy('headingView')}
+          expandTitle={getCopy('headingHide')}
+          ref={ref}
+        >
+          <ContentContainer tokens={themeTokens}>
+            {hasIndexedContent && (
+              <Ordered tokens={themeTokens}>
+                {indexedContent.map((contentItem, idx) => (
+                  // eslint-disable-next-line react/no-array-index-key
+                  <ListItem tokens={themeTokens} key={idx}>
+                    {renderStructuredContent(contentItem)}
+                  </ListItem>
+                ))}
+              </Ordered>
+            )}
+            {hasNonIndexedContent && (
+              <Box between={3}>
+                <NonIndexedContentTitle tokens={themeTokens}>
+                  <Typography block heading variant={{ size: 'h4' }}>
+                    {getCopy('nonIndexedTitle')}
+                  </Typography>
+                </NonIndexedContentTitle>
+                <Unordered tokens={themeTokens}>
+                  {nonIndexedContent.map((contentItem, idx) => (
+                    // eslint-disable-next-line react/no-array-index-key
+                    <ListItem tokens={themeTokens} key={idx}>
+                      {renderStructuredContent(contentItem)}
+                    </ListItem>
+                  ))}
+                </Unordered>
+              </Box>
+            )}
+          </ContentContainer>
+        </ExpandCollapse>
+        <Divider />
+      </div>
+    )
+  }
+)
+
+TermsAndConditions.displayName = 'TermsAndConditions'
+
+TermsAndConditions.propTypes = {
+  ...selectedSystemPropTypes,
+  /**
+   * Use the `copy` prop to either select provided English or French copy by passing 'en' or 'fr' respectively.
+   *
+   * To provide your own, pass a JSON object with the keys `headingView`, `headingHide`, and `nonIndexedTitle`.
+   */
+  copy: PropTypes.oneOfType([
+    PropTypes.oneOf(['en', 'fr']),
+    PropTypes.shape({
+      headingView: PropTypes.string,
+      headingHide: PropTypes.string,
+      nonIndexedTitle: PropTypes.string
+    })
+  ]),
+  /**
+   * An array of nodes, strings, or a combination to be displayed in an ordered list.
+   *
+   * Each item in the array must have a corresponding superscript in the page.
+   */
+  indexedContent: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.node, PropTypes.string])),
+  /**
+   * An array of nodes, strings, or a combination to be displayed in an unordered list.
+   *
+   * nonIndexedContent do not have a corresponding superscript and instead apply to the page as a whole.
+   */
+  nonIndexedContent: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.node, PropTypes.string]))
+}
+
+TermsAndConditions.defaultProps = {
+  copy: 'en',
+  indexedContent: [],
+  nonIndexedContent: []
+}
+
+export default TermsAndConditions

package/src/TermsAndConditions/dictionary.js

@@ -0,0 +1,12 @@
+export default {
+  en: {
+    headingHide: 'Hide terms and conditions',
+    headingView: 'View terms and conditions',
+    nonIndexedTitle: 'The following applies to all terms and conditions above'
+  },
+  fr: {
+    headingHide: 'Masquer les modalités et conditions',
+    headingView: 'Voir les modalités et conditions',
+    nonIndexedTitle: 'Ce qui suit s’applique aux modalités et conditions ci-dessus'
+  }
+}

package/src/TermsAndConditions/index.js

@@ -0,0 +1 @@
+export { default } from './TermsAndConditions'

package/src/Testimonial/Testimonial.jsx

@@ -0,0 +1,169 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import styled from 'styled-components'
+import { Icon, selectSystemProps, Typography, useThemeTokens } from '@telus-uds/components-base'
+import Image from '../Image'
+import { htmlAttrs } from '../utils'
+
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
+
+const TestimonialContainer = styled.figure(({ testimonialContainerGap }) => ({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: testimonialContainerGap,
+  margin: 0
+}))
+
+const QuoteContainer = styled.div(({ quoteContainerGap }) => ({
+  display: 'flex',
+  alignItems: 'center',
+  gap: quoteContainerGap
+}))
+
+const Divider = styled.div(({ dividerBorder, dividerBackgroundColor }) => ({
+  height: dividerBorder,
+  background: dividerBackgroundColor,
+  width: '100%'
+}))
+
+const BlockQuote = styled.blockquote({
+  margin: 0
+})
+
+const AuthorInfoContainer = styled.div({
+  display: 'flex',
+  flexDirection: 'column'
+})
+
+const Figcaption = styled.figcaption(({ figcaptionGap }) => ({
+  display: 'flex',
+  alignItems: 'center',
+  gap: figcaptionGap
+}))
+
+const Testimonial = ({
+  showDivider,
+  testimonial,
+  title,
+  imageSrc,
+  image = imageSrc,
+  additionalInfo,
+  testimonialStyle = 'heading',
+  tokens,
+  variant = {},
+  ...rest
+}) => {
+  const {
+    testimonialContainerGap,
+    quoteContainerGap,
+    dividerBorder,
+    dividerBackgroundColor,
+    figcaptionGap,
+    textColor,
+    icon,
+    iconColor,
+    imageSize
+  } = useThemeTokens('Testimonial', tokens, variant)
+  return (
+    <TestimonialContainer testimonialContainerGap={testimonialContainerGap} {...selectProps(rest)}>
+      <QuoteContainer quoteContainerGap={quoteContainerGap}>
+        <Icon tokens={{ color: iconColor }} variant={{ size: 'micro' }} icon={icon} />
+        {showDivider && (
+          <Divider
+            dividerBackgroundColor={dividerBackgroundColor}
+            dividerBorder={dividerBorder}
+            role="separator"
+          />
+        )}
+      </QuoteContainer>
+      <BlockQuote>
+        <Typography
+          variant={{ size: testimonialStyle === 'large' ? 'large' : 'h3' }}
+          tokens={{
+            color: textColor,
+            fontWeight: '400'
+          }}
+        >
+          {`\u201C${testimonial}\u201D`}
+        </Typography>
+      </BlockQuote>
+      {(image || title || additionalInfo) && (
+        <Figcaption figcaptionGap={figcaptionGap}>
+          {image &&
+            (typeof image === 'string' ? (
+              <Image
+                rounded="circle"
+                src={image}
+                alt={title}
+                width={imageSize}
+                height={imageSize}
+              />
+            ) : (
+              image
+            ))}
+          {(title || additionalInfo) && (
+            <AuthorInfoContainer>
+              {title && (
+                <Typography
+                  variant={{ size: 'small', colour: 'secondary' }}
+                  tokens={{ fontWeight: '500' }}
+                >
+                  {title}
+                </Typography>
+              )}
+              {additionalInfo && (
+                <Typography
+                  variant={{ size: 'micro', colour: 'secondary' }}
+                  tokens={{ fontWeight: '400' }}
+                >
+                  {additionalInfo}
+                </Typography>
+              )}
+            </AuthorInfoContainer>
+          )}
+        </Figcaption>
+      )}
+      {showDivider && (
+        <Divider
+          dividerBackgroundColor={dividerBackgroundColor}
+          dividerBorder={dividerBorder}
+          role="separator"
+        />
+      )}
+    </TestimonialContainer>
+  )
+}
+
+Testimonial.propTypes = {
+  ...selectedSystemPropTypes,
+  /**
+   * Testimonial content
+   */
+  testimonial: PropTypes.string.isRequired,
+  /**
+   * Testimonial author or source
+   */
+  title: PropTypes.string,
+  /**
+   * Additional information on the author or source
+   */
+  additionalInfo: PropTypes.string,
+  /**
+   * Testimonial style
+   */
+  testimonialStyle: PropTypes.oneOf(['large', 'heading']),
+  /**
+   * Whether to show or not dividers at the top and the bottom of the testimonial
+  showDivider: PropTypes.bool,
+  /**
+   * The src attribute for the Image component or custom JSX content to render instead
+   */
+  image: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  /**
+   * The src attribute for the `Image` component to be displayed on the testimonial
+   * @deprecated please use the `image` prop instead
+   */
+  imageSrc: PropTypes.string
+}
+
+export default Testimonial

package/src/Testimonial/index.js

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