feat(Card): add textAlign prop to Card subcomponents (#2038)

* feat(Card): add textAlign prop to CardContent

* feat(Card): add textAlign to all Card subcomponents

* styles(Card): fix code style inconsistencies

* refactor(Card): change array literals functions calls

* fix(Card): fix lint errors

* style(Card): fix classes order

src/views/Card/CardContent.d.ts

@@ -28,6 +28,9 @@ export interface CardContentProps {
 
   /** Shorthand for CardMeta. */
   meta?: SemanticShorthandItem<CardMetaProps>;
+
+  /** A card content can adjust its text alignment. */
+  textAlign?: 'center' | 'left' | 'right';
 }
 
 declare const CardContent: React.StatelessComponent<CardContentProps>;

src/views/Card/CardContent.js

@@ -1,4 +1,5 @@
 import cx from 'classnames'
+import _ from 'lodash'
 import PropTypes from 'prop-types'
 import React from 'react'
 
@@ -9,7 +10,9 @@ import {
   getElementType,
   getUnhandledProps,
   META,
+  SUI,
   useKeyOnly,
+  useTextAlignProp,
 } from '../../lib'
 import CardDescription from './CardDescription'
 import CardHeader from './CardHeader'
@@ -26,12 +29,14 @@ function CardContent(props) {
     extra,
     header,
     meta,
+    textAlign,
   } = props
 
   const classes = cx(
-    className,
     useKeyOnly(extra, 'extra'),
+    useTextAlignProp(textAlign),
     'content',
+    className,
   )
   const rest = getUnhandledProps(CardContent, props)
   const ElementType = getElementType(CardContent, props)
@@ -76,6 +81,9 @@ CardContent.propTypes = {
 
   /** Shorthand for CardMeta. */
   meta: customPropTypes.itemShorthand,
+
+  /** A card content can adjust its text alignment. */
+  textAlign: PropTypes.oneOf(_.without(SUI.TEXT_ALIGNMENTS, 'justified')),
 }
 
 export default CardContent

src/views/Card/CardDescription.d.ts

@@ -15,6 +15,9 @@ export interface CardDescriptionProps {
 
   /** Shorthand for primary content. */
   content?: SemanticShorthandContent;
+
+  /** A card description can adjust its text alignment. */
+  textAlign?: 'center' | 'left' | 'right';
 }
 
 declare const CardDescription: React.StatelessComponent<CardDescriptionProps>;

src/views/Card/CardDescription.js

@@ -1,4 +1,5 @@
 import cx from 'classnames'
+import _ from 'lodash'
 import PropTypes from 'prop-types'
 import React from 'react'
 
@@ -8,14 +9,20 @@ import {
   getElementType,
   getUnhandledProps,
   META,
+  SUI,
+  useTextAlignProp,
 } from '../../lib'
 
 /**
  * A card can contain a description with one or more paragraphs.
  */
 function CardDescription(props) {
-  const { children, className, content } = props
-  const classes = cx(className, 'description')
+  const { children, className, content, textAlign } = props
+  const classes = cx(
+    useTextAlignProp(textAlign),
+    'description',
+    className,
+  )
   const rest = getUnhandledProps(CardDescription, props)
   const ElementType = getElementType(CardDescription, props)
 
@@ -44,6 +51,9 @@ CardDescription.propTypes = {
 
   /** Shorthand for primary content. */
   content: customPropTypes.contentShorthand,
+
+  /** A card content can adjust its text alignment. */
+  textAlign: PropTypes.oneOf(_.without(SUI.TEXT_ALIGNMENTS, 'justified')),
 }
 
 export default CardDescription

src/views/Card/CardGroup.d.ts

@@ -26,6 +26,9 @@ export interface CardGroupProps {
 
   /** A group of cards can automatically stack rows to a single columns on mobile devices. */
   stackable?: boolean;
+
+  /** A card group can adjust its text alignment. */
+  textAlign?: 'center' | 'left' | 'right';
 }
 
 declare const CardGroup: React.StatelessComponent<CardGroupProps>;

src/views/Card/CardGroup.js

@@ -11,6 +11,7 @@ import {
   META,
   SUI,
   useKeyOnly,
+  useTextAlignProp,
   useWidthProp,
 } from '../../lib'
 import Card from './Card'
@@ -26,14 +27,17 @@ function CardGroup(props) {
     items,
     itemsPerRow,
     stackable,
+    textAlign,
   } = props
 
-  const classes = cx('ui',
+  const classes = cx(
+    'ui',
     useKeyOnly(doubling, 'doubling'),
     useKeyOnly(stackable, 'stackable'),
+    useTextAlignProp(textAlign),
     useWidthProp(itemsPerRow),
-    className,
     'cards',
+    className,
   )
   const rest = getUnhandledProps(CardGroup, props)
   const ElementType = getElementType(CardGroup, props)
@@ -77,6 +81,9 @@ CardGroup.propTypes = {
 
   /** A group of cards can automatically stack rows to a single columns on mobile devices. */
   stackable: PropTypes.bool,
+
+  /** A card group can adjust its text alignment. */
+  textAlign: PropTypes.oneOf(_.without(SUI.TEXT_ALIGNMENTS, 'justified')),
 }
 
 export default CardGroup

src/views/Card/CardHeader.d.ts

@@ -15,6 +15,9 @@ export interface CardHeaderProps {
 
   /** Shorthand for primary content. */
   content?: SemanticShorthandContent;
+
+  /** A card header can adjust its text alignment. */
+  textAlign?: 'center' | 'left' | 'right';
 }
 
 declare const CardHeader: React.StatelessComponent<CardHeaderProps>;

src/views/Card/CardHeader.js

@@ -1,4 +1,5 @@
 import cx from 'classnames'
+import _ from 'lodash'
 import PropTypes from 'prop-types'
 import React from 'react'
 
@@ -8,14 +9,20 @@ import {
   getElementType,
   getUnhandledProps,
   META,
+  SUI,
+  useTextAlignProp,
 } from '../../lib'
 
 /**
  * A card can contain a header.
  */
 function CardHeader(props) {
-  const { children, className, content } = props
-  const classes = cx(className, 'header')
+  const { children, className, content, textAlign } = props
+  const classes = cx(
+    useTextAlignProp(textAlign),
+    'header',
+    className,
+  )
   const rest = getUnhandledProps(CardHeader, props)
   const ElementType = getElementType(CardHeader, props)
 
@@ -44,6 +51,9 @@ CardHeader.propTypes = {
 
   /** Shorthand for primary content. */
   content: customPropTypes.contentShorthand,
+
+  /** A card header can adjust its text alignment. */
+  textAlign: PropTypes.oneOf(_.without(SUI.TEXT_ALIGNMENTS, 'justified')),
 }
 
 export default CardHeader

src/views/Card/CardMeta.d.ts

@@ -15,6 +15,9 @@ export interface CardMetaProps {
 
   /** Shorthand for primary content. */
   content?: SemanticShorthandContent;
+
+  /** A card meta can adjust its text alignment. */
+  textAlign?: 'center' | 'left' | 'right';
 }
 
 declare const CardMeta: React.StatelessComponent<CardMetaProps>;

src/views/Card/CardMeta.js

@@ -1,4 +1,5 @@
 import cx from 'classnames'
+import _ from 'lodash'
 import PropTypes from 'prop-types'
 import React from 'react'
 
@@ -8,14 +9,20 @@ import {
   getElementType,
   getUnhandledProps,
   META,
+  SUI,
+  useTextAlignProp,
 } from '../../lib'
 
 /**
  * A card can contain content metadata.
  */
 function CardMeta(props) {
-  const { children, className, content } = props
-  const classes = cx(className, 'meta')
+  const { children, className, content, textAlign } = props
+  const classes = cx(
+    useTextAlignProp(textAlign),
+    'meta',
+    className,
+  )
   const rest = getUnhandledProps(CardMeta, props)
   const ElementType = getElementType(CardMeta, props)
 
@@ -44,6 +51,9 @@ CardMeta.propTypes = {
 
   /** Shorthand for primary content. */
   content: customPropTypes.contentShorthand,
+
+  /** A card meta can adjust its text alignment. */
+  textAlign: PropTypes.oneOf(_.without(SUI.TEXT_ALIGNMENTS, 'justified')),
 }
 
 export default CardMeta

test/specs/views/Card/CardContent-test.js

@@ -1,3 +1,6 @@
+import _ from 'lodash'
+
+import { SUI } from 'src/lib'
 import CardContent from 'src/views/Card/CardContent'
 import CardDescription from 'src/views/Card/CardDescription'
 import CardHeader from 'src/views/Card/CardHeader'
@@ -24,5 +27,6 @@ describe('CardContent', () => {
     mapValueToProps: val => ({ content: val }),
   })
 
+  common.implementsTextAlignProp(CardContent, _.without(SUI.TEXT_ALIGNMENTS, 'justified'))
   common.propKeyOnlyToClassName(CardContent, 'extra')
 })

test/specs/views/Card/CardDescription-test.js

@@ -1,12 +1,15 @@
 import faker from 'faker'
+import _ from 'lodash'
 import React from 'react'
 
+import { SUI } from 'src/lib'
 import CardDescription from 'src/views/Card/CardDescription'
 import * as common from 'test/specs/commonTests'
 
 describe('CardDescription', () => {
   common.isConformant(CardDescription)
   common.rendersChildren(CardDescription)
+  common.implementsTextAlignProp(CardDescription, _.without(SUI.TEXT_ALIGNMENTS, 'justified'))
 
   describe('description prop', () => {
     it('renders child text', () => {

test/specs/views/Card/CardGroup-test.js

@@ -1,4 +1,5 @@
 import faker from 'faker'
+import _ from 'lodash'
 import React from 'react'
 
 import { SUI } from 'src/lib'
@@ -10,6 +11,7 @@ describe('CardGroup', () => {
   common.hasUIClassName(CardGroup)
   common.rendersChildren(CardGroup)
 
+  common.implementsTextAlignProp(CardGroup, _.without(SUI.TEXT_ALIGNMENTS, 'justified'))
   common.implementsWidthProp(CardGroup, SUI.WIDTHS, { propKey: 'itemsPerRow', canEqual: false })
 
   common.propKeyOnlyToClassName(CardGroup, 'doubling')

test/specs/views/Card/CardHeader-test.js

@@ -1,13 +1,17 @@
 import faker from 'faker'
+import _ from 'lodash'
 import React from 'react'
 
+import { SUI } from 'src/lib'
 import CardHeader from 'src/views/Card/CardHeader'
 import * as common from 'test/specs/commonTests'
 
 describe('CardHeader', () => {
   common.isConformant(CardHeader)
   common.rendersChildren(CardHeader)
 
+  common.implementsTextAlignProp(CardHeader, _.without(SUI.TEXT_ALIGNMENTS, 'justified'))
+
   describe('description prop', () => {
     it('renders child text', () => {
       const text = faker.hacker.phrase()

test/specs/views/Card/CardMeta-test.js

@@ -1,13 +1,17 @@
 import faker from 'faker'
+import _ from 'lodash'
 import React from 'react'
 
+import { SUI } from 'src/lib'
 import CardMeta from 'src/views/Card/CardMeta'
 import * as common from 'test/specs/commonTests'
 
 describe('CardMeta', () => {
   common.isConformant(CardMeta)
   common.rendersChildren(CardMeta)
 
+  common.implementsTextAlignProp(CardMeta, _.without(SUI.TEXT_ALIGNMENTS, 'justified'))
+
   describe('description prop', () => {
     it('renders child text', () => {
       const text = faker.hacker.phrase()