feat(community-callout-paragraph): add icon support

Author: elissa-matsushita

docs/setup/tds-core-globals.js

@@ -18,6 +18,7 @@ import Spinner from '@tds/core-spinner'
 import { Edit, Print } from '@tds/core-interactive-icon'
 import A11yContent from '@tds/core-a11y-content'
 import WebVideo from '@tds/core-web-video'
+import { Deals } from '@tds/core-decorative-icon'
 
 Object.assign(global, {
   A11yContent,
@@ -41,4 +42,5 @@ Object.assign(global, {
   Edit,
   Print,
   WebVideo,
+  Deals,
 })

packages/CalloutParagraph/CalloutParagraph.jsx

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types'
 import styled from 'styled-components'
 
 import { safeRest } from '@tds/util-helpers'
+import { componentWithName } from '@tds/util-prop-types'
 
 import Paragraph from '@tds/core-paragraph'
 import { colorTelusPurple } from '@tds/core-colours'
@@ -45,6 +46,7 @@ const TextWrapper = styled.div`
   }
   width: ${props => (props.roundedCorners ? '100%' : undefined)};
   p {
+    position: relative;
     text-align: ${props => (props.roundedCorners ? 'center' : undefined)};
     font-size: ${props => (props.compact ? '14px' : '1rem')};
     line-height: ${props => (props.compact ? '20px' : undefined)};
@@ -59,17 +61,44 @@ const TextWrapper = styled.div`
       padding-left: ${props => paddingValue.mobile[props.spacing]};
       padding-right: ${props => paddingValue.mobile[props.spacing]};
     }
+    > i {
+      margin-right: 1rem;
+      position: absolute;
+      left: 10px;
+    }
+    > span {
+      display: inline-block;
+      margin-left: ${props => props.margin};
+    }
   }
 `
 
+const iconMargin = (spacingLevel, hasIcon) => {
+  if (hasIcon) {
+    if (spacingLevel === 'compact') {
+      return '1.5rem'
+    }
+    return '1rem'
+  }
+  return undefined
+}
+
 /**
  * @version ./package.json
  * @visibleName CalloutParagraph (beta)
  */
-const CalloutParagraph = ({ children, spacing, roundedCorners, compact, ...rest }) => {
+const CalloutParagraph = ({ children, spacing, roundedCorners, compact, icon: Icon, ...rest }) => {
   return (
-    <TextWrapper spacing={spacing} roundedCorners={roundedCorners} compact={compact}>
-      <Paragraph {...safeRest(rest)}>{children}</Paragraph>
+    <TextWrapper
+      spacing={spacing}
+      roundedCorners={roundedCorners}
+      compact={compact}
+      margin={iconMargin(spacing, Icon)}
+    >
+      <Paragraph {...safeRest(rest)}>
+        {Icon && <Icon />}
+        <span>{children}</span>
+      </Paragraph>
     </TextWrapper>
   )
 }
@@ -92,12 +121,17 @@ CalloutParagraph.propTypes = {
    * Font size and padding around text will be smaller.
    */
   compact: PropTypes.bool,
+  /**
+   * Provide an icon from the Dependent icon group in `@tds/core-interactive-icon`.
+   */
+  icon: componentWithName('Decorative', true),
 }
 
 CalloutParagraph.defaultProps = {
   spacing: 'default',
   roundedCorners: false,
   compact: false,
+  icon: undefined,
 }
 
 export default CalloutParagraph

packages/CalloutParagraph/CalloutParagraph.md

@@ -45,6 +45,27 @@
 </FlexGrid>
 ```
 
+### Icons
+
+- Icon will be displayed before text
+- Must be valid TDS SVGIcon name. Refer to TDS documentation for full list
+
+```jsx
+<FlexGrid>
+  <FlexGrid.Row>
+    <FlexGrid.Col xs={12} md={7} lg={6} xl={5}>
+      <FlexGrid.Row>
+        <FlexGrid.Col xl={11}>
+          <CalloutParagraph bold spacing="compact" icon={Deals}>
+            Order online for a $300 bill credit.
+          </CalloutParagraph>
+        </FlexGrid.Col>
+      </FlexGrid.Row>
+    </FlexGrid.Col>
+  </FlexGrid.Row>
+</FlexGrid>
+```
+
 ### Compact
 
 ```jsx

packages/CalloutParagraph/__tests__/CalloutParagraph.spec.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import { shallow } from 'enzyme'
+import { Deals } from '@tds/core-decorative-icon'
 
 import CalloutParagraph from '../CalloutParagraph'
 
@@ -32,4 +33,10 @@ describe('CalloutParagraph', () => {
     expect(calloutParagraph).toMatchSnapshot()
     expect(calloutParagraph).toHaveProp('spacing', 'intermediate')
   })
+
+  it('renders an icon', () => {
+    const calloutParagraph = doShallow({ icon: Deals })
+    expect(calloutParagraph).toMatchSnapshot()
+    expect(calloutParagraph.find('DecorativeIcon')).toExist()
+  })
 })

packages/CalloutParagraph/__tests__/__snapshots__/CalloutParagraph.spec.jsx.snap

@@ -12,7 +12,30 @@ exports[`CalloutParagraph renders 1`] = `
     invert={false}
     size="medium"
   >
-    Text
+    <span>
+      Text
+    </span>
+  </Paragraph>
+</CalloutParagraph__TextWrapper>
+`;
+
+exports[`CalloutParagraph renders an icon 1`] = `
+<CalloutParagraph__TextWrapper
+  compact={false}
+  margin="1rem"
+  roundedCorners={false}
+  spacing="default"
+>
+  <Paragraph
+    align="left"
+    bold={false}
+    invert={false}
+    size="medium"
+  >
+    <DecorativeIcon />
+    <span>
+      Text
+    </span>
   </Paragraph>
 </CalloutParagraph__TextWrapper>
 `;
@@ -29,7 +52,9 @@ exports[`CalloutParagraph renders with compact 1`] = `
     invert={false}
     size="medium"
   >
-    Text
+    <span>
+      Text
+    </span>
   </Paragraph>
 </CalloutParagraph__TextWrapper>
 `;
@@ -46,7 +71,9 @@ exports[`CalloutParagraph renders with intermediate 1`] = `
     invert={false}
     size="medium"
   >
-    Text
+    <span>
+      Text
+    </span>
   </Paragraph>
 </CalloutParagraph__TextWrapper>
 `;
@@ -63,7 +90,9 @@ exports[`CalloutParagraph renders with narrow 1`] = `
     invert={false}
     size="medium"
   >
-    Text
+    <span>
+      Text
+    </span>
   </Paragraph>
 </CalloutParagraph__TextWrapper>
 `;