feat(button): added 'icon' prop for Button component (#13)

CHANGELOG.md

@@ -23,6 +23,10 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 ### Fixes
 - Replaced Header `subheader` with `description` and fixed it to render well-formed HTML @mnajdova ([#17](https://github.com/stardust-ui/react/pull/17))
 
+### Features
+- Add Icon `xSpacing` prop @Bugaa92 ([#22](https://github.com/stardust-ui/react/pull/22))
+- Add Button `icon` prop and Text `truncated` prop @Bugaa92 ([#13](https://github.com/stardust-ui/react/pull/13))
+
 <!--------------------------------[ v0.2.3 ]------------------------------- -->
 ## [v0.2.3](https://github.com/stardust-ui/react/tree/v0.2.3) (2018-07-24)
 [Compare changes](https://github.com/stardust-ui/react/compare/v0.2.2...v0.2.3)
@@ -33,7 +37,6 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 ### Features
 - Add Button `fluid` prop @Bugaa92 ([#6](https://github.com/stardust-ui/react/pull/6))
 - Add Icon `disabled` prop @Bugaa92 ([#12](https://github.com/stardust-ui/react/pull/12))
-- Add Icon `xSpacing` prop @Bugaa92 ([#22](https://github.com/stardust-ui/react/pull/22))
 
 <!--------------------------------[ v0.2.2 ]------------------------------- -->
 ## [v0.2.2](https://github.com/stardust-ui/react/tree/v0.2.2) (2018-07-24)

docs/src/examples/components/Button/Types/ButtonExample.shorthand.tsx

@@ -1,6 +1,11 @@
 import React from 'react'
 import { Button } from '@stardust-ui/react'
 
-const ButtonExample = () => <Button content="Click here" />
+const ButtonExample = () => (
+  <div>
+    <Button content="Click here" />
+    <Button content="See how this very long text shows up on the button" />
+  </div>
+)
 
 export default ButtonExample

docs/src/examples/components/Button/Types/ButtonExample.tsx

@@ -1,6 +1,11 @@
 import React from 'react'
 import { Button } from '@stardust-ui/react'
 
-const ButtonExample = () => <Button>Click here</Button>
+const ButtonExample = () => (
+  <div>
+    <Button>Click here</Button>
+    <Button>See how this very long text shows up on the button</Button>
+  </div>
+)
 
 export default ButtonExample

docs/src/examples/components/Button/Types/ButtonExampleContentAndIcon.shorthand.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+import { Button } from '@stardust-ui/react'
+
+const ButtonExampleContentAndIcon = () => (
+  <div>
+    <Button type="primary" icon="book" content="Click me before" iconPosition="before" />
+    <Button type="secondary" icon="coffee" content="Click me after" iconPosition="after" />
+  </div>
+)
+
+export default ButtonExampleContentAndIcon

docs/src/examples/components/Button/Types/ButtonExampleContentAndIcon.tsx

@@ -0,0 +1,17 @@
+import React from 'react'
+import { Button, Icon, Text } from '@stardust-ui/react'
+
+const ButtonExampleContentAndIcon = () => (
+  <div>
+    <Button type="primary" icon iconPosition="before">
+      <Icon name="book" color="white" xSpacing="after" />
+      <Text content="Click me before" />
+    </Button>
+    <Button type="secondary" icon iconPosition="after">
+      <Text content="Click me after" />
+      <Icon name="coffee" xSpacing="before" />
+    </Button>
+  </div>
+)
+
+export default ButtonExampleContentAndIcon

docs/src/examples/components/Button/Types/ButtonExampleEmphasis.shorthand.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+import { Button } from '@stardust-ui/react'
+
+const ButtonExampleEmphasis = () => (
+  <div>
+    <Button type="primary" content="Primary" />
+    <Button type="secondary" content="Secondary" />
+  </div>
+)
+
+export default ButtonExampleEmphasis

docs/src/examples/components/Button/Types/ButtonExampleIcon.shorthand.tsx

@@ -0,0 +1,6 @@
+import React from 'react'
+import { Button } from '@stardust-ui/react'
+
+const ButtonExampleIcon = () => <Button type="primary" icon="book" />
+
+export default ButtonExampleIcon

docs/src/examples/components/Button/Types/ButtonExampleIcon.tsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import { Button, Icon } from '@stardust-ui/react'
+
+const ButtonExampleIcon = () => (
+  <Button type="primary" icon>
+    <Icon name="book" color="white" xSpacing="none" />
+  </Button>
+)
+
+export default ButtonExampleIcon

docs/src/examples/components/Button/Types/index.tsx

@@ -6,14 +6,24 @@ const Types = () => (
   <ExampleSection title="Types">
     <ComponentExample
       title="Default"
-      description="A default Button."
+      description="A default button."
       examplePath="components/Button/Types/ButtonExample"
     />
     <ComponentExample
       title="Emphasis"
       description="A button can be formatted to show different levels of emphasis."
       examplePath="components/Button/Types/ButtonExampleEmphasis"
     />
+    <ComponentExample
+      title="Icon"
+      description="A button can be made of only an icon."
+      examplePath="components/Button/Types/ButtonExampleIcon"
+    />
+    <ComponentExample
+      title="Content and Icon"
+      description="A button can have an icon in addition to content."
+      examplePath="components/Button/Types/ButtonExampleContentAndIcon"
+    />
   </ExampleSection>
 )
 

docs/src/examples/components/Button/Variations/ButtonExampleCircular.shorthand.tsx

@@ -1,6 +1,10 @@
 import React from 'react'
 import { Button } from '@stardust-ui/react'
 
-const ButtonExampleCircular = () => <Button circular content="C" />
-
+const ButtonExampleCircular = () => (
+  <div>
+    <Button circular content="C" />
+    <Button circular icon="book" />
+  </div>
+)
 export default ButtonExampleCircular

docs/src/examples/components/Button/Variations/ButtonExampleCircular.tsx

@@ -1,6 +1,13 @@
 import React from 'react'
-import { Button } from '@stardust-ui/react'
+import { Button, Icon } from '@stardust-ui/react'
 
-const ButtonExampleCircular = () => <Button circular>C</Button>
+const ButtonExampleCircular = () => (
+  <div>
+    <Button circular>C</Button>
+    <Button circular icon>
+      <Icon name="book" xSpacing="none" />
+    </Button>
+  </div>
+)
 
 export default ButtonExampleCircular

docs/src/examples/components/Button/Variations/ButtonExampleEmphasisCircular.shorthand.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+import { Button } from '@stardust-ui/react'
+
+const ButtonExampleEmphasisCircular = () => (
+  <div>
+    <Button type="primary" circular icon="coffee" />
+    <Button type="secondary" circular icon="book" />
+  </div>
+)
+
+export default ButtonExampleEmphasisCircular

docs/src/examples/components/Button/Variations/ButtonExampleEmphasisCircular.tsx

@@ -1,13 +1,13 @@
 import React from 'react'
-import { Button } from '@stardust-ui/react'
+import { Button, Icon } from '@stardust-ui/react'
 
 const ButtonExampleEmphasisCircular = () => (
   <div>
-    <Button type="primary" circular>
-      P
+    <Button type="primary" circular icon>
+      <Icon name="coffee" color="white" xSpacing="none" />
     </Button>
-    <Button type="secondary" circular>
-      S
+    <Button type="secondary" circular icon>
+      <Icon name="book" xSpacing="none" />
     </Button>
   </div>
 )

docs/src/examples/components/Icon/Variations/IconExampleSpace.shorthand.tsx

@@ -10,7 +10,7 @@ const IconExampleSpace = () => (
     <Label content="Before" />
     <Icon xSpacing="before" name="help" />
     <Label content="After" />
-    <Icon xSpacing="before" name="help" />
+    <Icon xSpacing="after" name="help" />
     <Label content="Both" />
     <Icon xSpacing="both" name="help" />
     <Label content="End" />

docs/src/examples/components/Text/States/TextExampleTruncated.shorthand.tsx

@@ -0,0 +1,22 @@
+import React from 'react'
+import { Text } from '@stardust-ui/react'
+
+const [notTruncatedText, truncatedText] = [
+  'Some long text here to see how it looks when not truncated',
+  'Some long text here to see how it looks truncated',
+].map(text =>
+  Array(5)
+    .fill(text)
+    .join('. '),
+)
+
+const TextExampleTruncated = () => (
+  <div style={{ overflow: 'hidden', textOverflow: 'ellipsis' }}>
+    <Text content={notTruncatedText} />
+    <br />
+    <br />
+    <Text truncated content={truncatedText} />
+  </div>
+)
+
+export default TextExampleTruncated

docs/src/examples/components/Text/States/TextExampleTruncated.tsx

@@ -0,0 +1,22 @@
+import React from 'react'
+import { Text } from '@stardust-ui/react'
+
+const [notTruncatedText, truncatedText] = [
+  'Some long text here to see how it looks when not truncated',
+  'Some long text here to see how it looks truncated',
+].map(text =>
+  Array(5)
+    .fill(text)
+    .join('. '),
+)
+
+const TextExampleTruncated = () => (
+  <div style={{ overflow: 'hidden', textOverflow: 'ellipsis' }}>
+    <Text>{notTruncatedText}</Text>
+    <br />
+    <br />
+    <Text truncated>{truncatedText}</Text>
+  </div>
+)
+
+export default TextExampleTruncated

docs/src/examples/components/Text/States/index.tsx

@@ -19,6 +19,11 @@ const States = () => (
       description="The success state for a Text component"
       examplePath="components/Text/States/TextExampleSuccess"
     />
+    <ComponentExample
+      title="Truncated"
+      description="Truncated text in a Text component"
+      examplePath="components/Text/States/TextExampleTruncated"
+    />
   </ExampleSection>
 )
 

docs/src/examples/components/Text/Types/TextSizesExample.tsx

@@ -1,15 +1,32 @@
 import React from 'react'
 import { Text } from '@stardust-ui/react'
 
-const sizes = ['xs', 'sm', 'md', 'lg', 'xl', '2x', '3x', '4x']
-
 const TextSizesExample = () => (
   <div>
-    {sizes.map(value => (
-      <div>
-        <Text size={value}>Dicta voluptatum dolorem.</Text>
-      </div>
-    ))}
+    <div>
+      <Text size="xs">Dicta voluptatum dolorem.</Text>
+    </div>
+    <div>
+      <Text size="sm">Dicta voluptatum dolorem.</Text>
+    </div>
+    <div>
+      <Text size="md">Dicta voluptatum dolorem.</Text>
+    </div>
+    <div>
+      <Text size="lg">Dicta voluptatum dolorem.</Text>
+    </div>
+    <div>
+      <Text size="xl">Dicta voluptatum dolorem.</Text>
+    </div>
+    <div>
+      <Text size="2x">Dicta voluptatum dolorem.</Text>
+    </div>
+    <div>
+      <Text size="3x">Dicta voluptatum dolorem.</Text>
+    </div>
+    <div>
+      <Text size="4x">Dicta voluptatum dolorem.</Text>
+    </div>
   </div>
 )
 export default TextSizesExample

src/components/Button/Button.tsx

@@ -4,7 +4,10 @@ import React, { ReactNode, CSSProperties } from 'react'
 import { UIComponent, childrenExist, customPropTypes, IRenderResultConfig } from '../../lib'
 import buttonRules from './buttonRules'
 import buttonVariables from './buttonVariables'
+import Icon from '../Icon'
+import Text from '../Text'
 
+export type IconPosition = 'before' | 'after'
 export type ButtonType = 'primary' | 'secondary'
 
 export interface IButtonProps {
@@ -14,6 +17,8 @@ export interface IButtonProps {
   className?: string
   content?: ReactNode
   fluid?: boolean
+  icon?: boolean | string
+  iconPosition?: IconPosition
   style?: CSSProperties
   type?: ButtonType
 }
@@ -51,6 +56,12 @@ class Button extends UIComponent<IButtonProps, any> {
     /** A button can take the width of its container. */
     fluid: PropTypes.bool,
 
+    /** Button can have an icon. */
+    icon: customPropTypes.some([PropTypes.bool, PropTypes.string]),
+
+    /** An icon button can format an Icon to appear before or after the button */
+    iconPosition: PropTypes.oneOf(['before', 'after']),
+
     /** A button can be formatted to show different levels of emphasis. */
     type: PropTypes.oneOf(['primary', 'secondary']),
   }
@@ -62,6 +73,8 @@ class Button extends UIComponent<IButtonProps, any> {
     'className',
     'content',
     'fluid',
+    'icon',
+    'iconPosition',
     'type',
   ]
 
@@ -74,11 +87,34 @@ class Button extends UIComponent<IButtonProps, any> {
     classes,
     rest,
   }: IRenderResultConfig<IButtonProps>): ReactNode {
-    const { children, content } = this.props
+    const { children, content, icon, iconPosition, type } = this.props
+    const primary = type === 'primary'
+
+    const getContent = (): ReactNode => {
+      if (childrenExist(children)) {
+        return children
+      }
+
+      const iconIsAfterButton = iconPosition === 'after'
+      const renderedContent = [
+        content && <Text key="btn-content" truncated content={content} />,
+        icon &&
+          typeof icon === 'string' && (
+            <Icon
+              key="btn-icon"
+              name={icon}
+              xSpacing={!content ? 'none' : iconIsAfterButton ? 'before' : 'after'}
+              color={primary ? 'white' : 'black'}
+            />
+          ),
+      ].filter(Boolean)
+
+      return iconIsAfterButton ? renderedContent : renderedContent.reverse()
+    }
 
     return (
       <ElementType {...rest} className={classes.root}>
-        {childrenExist(children) ? children : content}
+        {getContent()}
       </ElementType>
     )
   }