feat(community-callout-paragraph): add textAlign prop

add ability to specify text align
telus · Mar 2, 2021 · 43cfb72 · 43cfb72
1 parent 9fd511c
commit 43cfb72
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 6 deletions.
diff --git a/packages/CalloutParagraph/CalloutParagraph.jsx b/packages/CalloutParagraph/CalloutParagraph.jsx
@@ -47,7 +47,7 @@ const TextWrapper = styled.div`
   width: ${props => (props.roundedCorners ? '100%' : undefined)};
   p {
     position: relative;
-    text-align: ${props => (props.roundedCorners ? 'center' : undefined)};
+    text-align: ${props => props.textAlign};
     font-size: ${props => (props.compact ? '14px' : '1rem')};
     line-height: ${props => (props.compact ? '20px' : undefined)};
     border-radius: ${props => (props.roundedCorners ? '5px' : undefined)};
@@ -78,22 +78,41 @@ const iconMargin = (spacingLevel, hasIcon) => {
     if (spacingLevel === 'compact') {
       return '1.5rem'
     }
-    return '1rem'
+    return '0.75rem'
   }
   return undefined
 }
 
+// Format text align to be backwards compatible.
+const formatTextAlign = (textAlignProp, hasRoundedCorners) => {
+  if (textAlignProp) {
+    return textAlignProp
+  } else if (hasRoundedCorners) {
+    return 'center'
+  }
+  return 'left'
+}
+
 /**
  * @version ./package.json
  * @visibleName CalloutParagraph (beta)
  */
-const CalloutParagraph = ({ children, spacing, roundedCorners, compact, icon: Icon, ...rest }) => {
+const CalloutParagraph = ({
+  children,
+  spacing,
+  roundedCorners,
+  compact,
+  icon: Icon,
+  textAlign,
+  ...rest
+}) => {
   return (
     <TextWrapper
       spacing={spacing}
       roundedCorners={roundedCorners}
       compact={compact}
       margin={iconMargin(spacing, Icon)}
+      textAlign={formatTextAlign(textAlign, roundedCorners)}
     >
       <Paragraph {...safeRest(rest)}>
         {Icon && <Icon />}
@@ -125,13 +144,19 @@ CalloutParagraph.propTypes = {
    * Provide an icon from the Dependent icon group in `@tds/core-interactive-icon`.
    */
   icon: componentWithName('Decorative', true),
+  /**
+   * Set explicit text-align property. If not set, default text-align is 'center' for
+   * `roundedCorners` and 'left' otherwise.
+   */
+  textAlign: PropTypes.oneOf(['center', 'left', 'right']),
 }
 
 CalloutParagraph.defaultProps = {
   spacing: 'default',
   roundedCorners: false,
   compact: false,
   icon: undefined,
+  textAlign: undefined,
 }
 
 export default CalloutParagraph
diff --git a/packages/CalloutParagraph/CalloutParagraph.md b/packages/CalloutParagraph/CalloutParagraph.md
@@ -53,10 +53,10 @@
 ```jsx
 <FlexGrid>
   <FlexGrid.Row>
-    <FlexGrid.Col xs={12} md={7} lg={6} xl={5}>
+    <FlexGrid.Col xs={12} md={7} lg={6}>
       <FlexGrid.Row>
         <FlexGrid.Col xl={11}>
-          <CalloutParagraph bold spacing="compact" icon={Deals}>
+          <CalloutParagraph bold roundedCorners textAlign="left" icon={Deals}>
             Order online for a $300 bill credit.
           </CalloutParagraph>
         </FlexGrid.Col>

diff --git a/packages/CalloutParagraph/__tests__/CalloutParagraph.spec.jsx b/packages/CalloutParagraph/__tests__/CalloutParagraph.spec.jsx
@@ -39,4 +39,10 @@ describe('CalloutParagraph', () => {
     expect(calloutParagraph).toMatchSnapshot()
     expect(calloutParagraph.find('DecorativeIcon')).toExist()
   })
+
+  it('specifies text align', () => {
+    const calloutParagraph = doShallow({ textAlign: 'center' })
+    expect(calloutParagraph).toMatchSnapshot()
+    expect(calloutParagraph).toHaveProp('textAlign', 'center')
+  })
 })
diff --git a/packages/CalloutParagraph/__tests__/__snapshots__/CalloutParagraph.spec.jsx.snap b/packages/CalloutParagraph/__tests__/__snapshots__/CalloutParagraph.spec.jsx.snap
@@ -5,6 +5,7 @@ exports[`CalloutParagraph renders 1`] = `
   compact={false}
   roundedCorners={false}
   spacing="default"
+  textAlign="left"
 >
   <Paragraph
     align="left"
@@ -22,9 +23,10 @@ exports[`CalloutParagraph renders 1`] = `
 exports[`CalloutParagraph renders an icon 1`] = `
 <CalloutParagraph__TextWrapper
   compact={false}
-  margin="1rem"
+  margin="0.75rem"
   roundedCorners={false}
   spacing="default"
+  textAlign="left"
 >
   <Paragraph
     align="left"
@@ -45,6 +47,7 @@ exports[`CalloutParagraph renders with compact 1`] = `
   compact={false}
   roundedCorners={false}
   spacing="compact"
+  textAlign="left"
 >
   <Paragraph
     align="left"
@@ -64,6 +67,7 @@ exports[`CalloutParagraph renders with intermediate 1`] = `
   compact={false}
   roundedCorners={false}
   spacing="intermediate"
+  textAlign="left"
 >
   <Paragraph
     align="left"
@@ -83,6 +87,27 @@ exports[`CalloutParagraph renders with narrow 1`] = `
   compact={false}
   roundedCorners={false}
   spacing="narrow"
+  textAlign="left"
+>
+  <Paragraph
+    align="left"
+    bold={false}
+    invert={false}
+    size="medium"
+  >
+    <span>
+      Text
+    </span>
+  </Paragraph>
+</CalloutParagraph__TextWrapper>
+`;
+
+exports[`CalloutParagraph specifies text align 1`] = `
+<CalloutParagraph__TextWrapper
+  compact={false}
+  roundedCorners={false}
+  spacing="default"
+  textAlign="center"
 >
   <Paragraph
     align="left"