new(Title): Add primary color option. (#61)

airbnb · May 16, 2019 · dbb8b87 · dbb8b87
1 parent 53ca7da
commit dbb8b87
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 3 deletions.
diff --git a/packages/core/src/components/Title.story.tsx b/packages/core/src/components/Title.story.tsx
@@ -12,32 +12,41 @@ storiesOf('Core/Title', module)
       <Title level={1}>
         <LoremIpsum short />
       </Title>
+
       <Title level={2}>
         <LoremIpsum short />
       </Title>
+
       <Title level={3}>
         <LoremIpsum short />
       </Title>
     </>
   ))
-  .add('With different states: muted and inverted.', () => (
+  .add('With different states: muted, inverted, and primary.', () => (
     <>
       <Title level={3} muted>
         <LoremIpsum short />
       </Title>
+
       <Title level={3} inverted>
         <LoremIpsum short />
       </Title>
+
+      <Title level={3} primary>
+        <LoremIpsum short />
+      </Title>
     </>
   ))
   .add('With aligned text.', () => (
     <>
       <Title level={3}>
         <LoremIpsum short />
       </Title>
+
       <Title level={3} centerAlign>
         <LoremIpsum short />
       </Title>
+
       <Title level={3} endAlign>
         <LoremIpsum short />
       </Title>

diff --git a/packages/core/src/components/Title/index.tsx b/packages/core/src/components/Title/index.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { mutuallyExclusiveTrueProps } from 'airbnb-prop-types';
 import withStyles, { css, WithStylesProps } from '../../composers/withStyles';
 
-const stateProp = mutuallyExclusiveTrueProps('muted', 'inverted');
+const stateProp = mutuallyExclusiveTrueProps('muted', 'inverted', 'primary');
 const alignProp = mutuallyExclusiveTrueProps('centerAlign', 'endAlign');
 
 export type Props = {
@@ -20,6 +20,8 @@ export type Props = {
   level: 1 | 2 | 3;
   /** Mark the text as muted. */
   muted?: boolean;
+  /** Render with primary color text. */
+  primary?: boolean;
 };
 
 /** Display a string of text as a heading and or section title. */
@@ -29,6 +31,7 @@ export class Title extends React.Component<Props & WithStylesProps> {
     endAlign: alignProp,
     inverted: stateProp,
     muted: stateProp,
+    primary: stateProp,
   };
 
   static defaultProps = {
@@ -38,10 +41,21 @@ export class Title extends React.Component<Props & WithStylesProps> {
     inline: false,
     inverted: false,
     muted: false,
+    primary: false,
   };
 
   render() {
-    const { centerAlign, children, inline, inverted, level, muted, endAlign, styles } = this.props;
+    const {
+      centerAlign,
+      children,
+      endAlign,
+      inline,
+      inverted,
+      level,
+      muted,
+      primary,
+      styles,
+    } = this.props;
     const Tag: 'h1' | 'h2' | 'h3' = `h${level}` as any;
 
     return (
@@ -54,6 +68,7 @@ export class Title extends React.Component<Props & WithStylesProps> {
           inline && styles.title_inline,
           inverted && styles.title_inverted,
           muted && styles.title_muted,
+          primary && styles.title_primary,
           centerAlign && styles.title_center,
           endAlign && styles.title_right,
         )}
@@ -94,6 +109,10 @@ export default withStyles(({ color, font }) => ({
     color: color.muted,
   },
 
+  title_primary: {
+    color: color.core.primary[3],
+  },
+
   title_center: {
     textAlign: 'center',
   },