feat(Button): adding disabled prop to Button

CHANGELOG.md

@@ -35,6 +35,8 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Add Input component @alinais ([#64](https://github.com/stardust-ui/react/pull/64))
 - Add Text `important` prop @mnajdova ([#120](https://github.com/stardust-ui/react/pull/120))
 - Add Avatar `alt` prop @mnajdova ([#124](https://github.com/stardust-ui/react/pull/124))
+- Add `icon` prop to the Button component @Bugaa92 ([#111](https://github.com/stardust-ui/react/pull/111))
+- Add Button `disabled` prop @Bugaa92 ([#114](https://github.com/stardust-ui/react/pull/114))
 
 ### Documentation
 - Add accessibility section to each component @mnajdova ([#46](https://github.com/stardust-ui/react/pulls/46))

docs/src/examples/components/Button/States/ButtonExampleDisabled.shorthand.tsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import { Button } from 'stardust'
+
+const ButtonExampleDisabled = () => (
+  <div>
+    <Button disabled content="Default" />
+    <Button disabled type="primary" content="Primary" />
+    <Button disabled type="secondary" content="Secondary" />
+    <Button disabled type="primary" icon="book" content="Click me" iconPosition="left" />
+    <Button disabled circular icon="coffee" />
+  </div>
+)
+
+export default ButtonExampleDisabled

docs/src/examples/components/Button/States/ButtonExampleDisabled.tsx

@@ -0,0 +1,23 @@
+import React from 'react'
+import { Button, Icon } from 'stardust'
+
+const ButtonExampleDisabled = () => (
+  <div>
+    <Button disabled>Default</Button>
+    <Button disabled type="primary">
+      Primary
+    </Button>
+    <Button disabled type="secondary">
+      Secondary
+    </Button>
+    <Button disabled type="primary">
+      <Icon disabled name="book" color="white" style={{ margin: 'auto' }} />
+      <span style={{ paddingLeft: '10px' }}>Click me</span>
+    </Button>
+    <Button disabled circular>
+      <Icon disabled name="coffee" style={{ margin: 'auto' }} />
+    </Button>
+  </div>
+)
+
+export default ButtonExampleDisabled

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

@@ -0,0 +1,15 @@
+import React from 'react'
+import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
+import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
+
+const States = () => (
+  <ExampleSection title="States">
+    <ComponentExample
+      title="Disabled"
+      description="A button can show it is currently unable to be interacted with."
+      examplePath="components/Button/States/ButtonExampleDisabled"
+    />
+  </ExampleSection>
+)
+
+export default States

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 left" iconPosition="left" />
+    <Button type="secondary" icon="coffee" content="Click me right" iconPosition="right" />
+  </div>
+)
+
+export default ButtonExampleContentAndIcon

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

@@ -0,0 +1,17 @@
+import React from 'react'
+import { Button, Icon } from '@stardust-ui/react'
+
+const ButtonExampleContentAndIcon = () => (
+  <div>
+    <Button type="primary">
+      <Icon name="book" color="white" style={{ margin: 'auto' }} />
+      <span style={{ paddingLeft: '10px' }}>Click me left</span>
+    </Button>
+    <Button type="secondary">
+      <span style={{ paddingRight: '10px' }}>Click me right</span>
+      <Icon name="coffee" style={{ margin: 'auto' }} />
+    </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" style={{ minWidth: '32px', padding: 0 }}>
+    <Icon name="book" color="white" style={{ margin: 'auto' }} />
+  </Button>
+)
+
+export default ButtonExampleIcon

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

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

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

@@ -0,0 +1,17 @@
+import React from 'react'
+import { Button, Icon } from 'stardust'
+
+const ButtonExampleLabeledIcon = () => (
+  <div>
+    <Button type="primary">
+      <Icon name="book" color="white" style={{ margin: 'auto' }} />
+      <span style={{ paddingLeft: '10px' }}>Click me left</span>
+    </Button>
+    <Button type="secondary">
+      <span style={{ paddingRight: '10px' }}>Click me right</span>
+      <Icon name="coffee" style={{ margin: 'auto' }} />
+    </Button>
+  </div>
+)
+
+export default ButtonExampleLabeledIcon

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 name="book" style={{ margin: 'auto' }} />
+    </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'
+
+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
+      <Icon name="coffee" color="white" style={{ margin: 'auto' }} />
     </Button>
     <Button type="secondary" circular>
-      S
+      <Icon name="book" style={{ margin: 'auto' }} />
     </Button>
   </div>
 )

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

@@ -1,10 +1,12 @@
 import React from 'react'
 import Types from './Types'
 import Variations from './Variations'
+import States from './States'
 
 const ButtonExamples = () => (
   <div>
     <Types />
+    <States />
     <Variations />
   </div>
 )