Added fullWidth prop to multiple components

packages/docs/src/pages/components/card.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import { ThemeProvider, Card, Stack, Link, Text } from 'react-ui'
-import { Page, Example, Section, Table, Para } from '../../components'
+import { Page, Props, Example, Section, Table, Para } from '../../components'
 
 const Documentation = () => {
   return (
@@ -16,6 +16,19 @@ const Documentation = () => {
         </Example.Code>
       </Example>
 
+      <Section title="Props">
+        <Props
+          props={[
+            {
+              name: 'fullWidth',
+              type: 'boolean',
+              description: 'Make card take 100% width of the container',
+              default: 'false'
+            }
+          ]}
+        />
+      </Section>
+
       <Section title="Examples">
         <Example>
           <Example.Preview>
@@ -71,6 +84,61 @@ const Documentation = () => {
             </Card>
           `}</Example.Code>
         </Example>
+
+        <Example title="Full width">
+          <Example.Preview>
+            <Card fullWidth>
+              <Stack justify="center">
+                <Stack justify="space-between" align="center">
+                  <Stack direction="vertical" align="flex-end">
+                    <Text size={6}>09:15</Text>
+                    <Text size={4} variant="subtle">
+                      AMS
+                    </Text>
+                  </Stack>
+                  <Stack
+                    direction="vertical"
+                    align="center"
+                    css={{ paddingX: 8 }}
+                  >
+                    <Text size={2}>8h 35</Text>
+                    <Text size={1}>Direct</Text>
+                  </Stack>
+                  <Stack direction="vertical" align="flex-start">
+                    <Text size={6}>11:50</Text>
+                    <Text size={4} variant="subtle">
+                      JFK
+                    </Text>
+                  </Stack>
+                </Stack>
+              </Stack>
+            </Card>
+          </Example.Preview>
+          <Example.Code>{`
+            <Card fullWidth>
+              <Stack justify="center">
+                <Stack justify="space-between" align="center">
+
+                  <Stack direction="vertical" align="flex-end">
+                    <Text size={6}>09:15</Text>
+                    <Text size={4} variant="subtle">AMS</Text>
+                  </Stack>
+
+                  <Stack direction="vertical" align="center" css={{ paddingX: 8 }}>
+                    <Text size={2}>8h 35</Text>
+                    <Text size={1}>Direct</Text>
+                  </Stack>
+
+                  <Stack direction="vertical" align="flex-start">
+                    <Text size={6}>11:50</Text>
+                    <Text size={4} variant="subtle">JFK</Text>
+                  </Stack>
+
+                </Stack>
+              </Stack>
+            </Card>
+          `}</Example.Code>
+        </Example>
       </Section>
 
       <Section title="Customisation">

packages/docs/src/pages/components/input.js

@@ -28,6 +28,12 @@ const Documentation = () => {
               description:
                 'type of avatar, example: text, password, number, etc.',
               default: 'text'
+            },
+            {
+              name: 'fullWidth',
+              type: 'boolean',
+              description: 'Make input take 100% width of the container',
+              default: 'false'
             }
           ]}
         />
@@ -54,6 +60,17 @@ const Documentation = () => {
             <Input type="text" invalid placeholder="Please enter your name" />
           `}</Example.Code>
         </Example>
+
+        <Example title="Full width">
+        <Example.Preview>
+            <Input type="text" placeholder="Please enter your name" fullWidth />
+          </Example.Preview>
+          <Example.Code>
+            {`
+            <Input type="text" placeholder="Please enter your name" fullWidth />
+          `}
+          </Example.Code>
+        </Example>
       </Section>
 
       <Section title="Customisation">

packages/docs/src/pages/components/select.js

@@ -36,6 +36,12 @@ const Documentation = () => {
               name: '+',
               type: 'props of Input',
               description: ''
+            },
+            {
+              name: 'fullWidth',
+              type: 'boolean',
+              description: 'Make select take 100% width of the container',
+              default: 'false'
             }
           ]}
         />
@@ -88,6 +94,27 @@ const Documentation = () => {
             </Select>
           `}</Example.Code>
         </Example>
+
+        <Example title="Full width">
+        <Example.Preview>
+          <Select fullWidth>
+            <option>Please select an option</option>
+            <option>Option 1</option>
+            <option>Option 2</option>
+            <option>Option 3</option>
+          </Select>
+        </Example.Preview>
+        <Example.Code>
+          {`
+            <Select fullWidth>
+              <option>Please select an option</option>
+              <option>Option 1</option>
+              <option>Option 2</option>
+              <option>Option 3</option>
+            </Select>
+          `}
+        </Example.Code>
+      </Example>
       </Section>
 
       <Section title="Customisation">

packages/docs/src/pages/components/textarea.js

@@ -34,6 +34,12 @@ const Documentation = () => {
               name: '+',
               type: 'props of Input',
               description: ''
+            },
+            {
+              name: 'fullWidth',
+              type: 'boolean',
+              description: 'Make textarea take 100% width of the container',
+              default: 'false'
             }
           ]}
         />
@@ -58,6 +64,17 @@ const Documentation = () => {
             <Textarea invalid placeholder="Please enter your address" />
           `}</Example.Code>
         </Example>
+
+        <Example title="Full width">
+          <Example.Preview>
+            <Textarea placeholder="Please enter your address" fullWidth />
+          </Example.Preview>
+          <Example.Code>
+            {`
+            <Textarea placeholder="Please enter your address" fullWidth />
+          `}
+          </Example.Code>
+        </Example>
       </Section>
 
       <Section title="Customisation">

packages/react-ui/src/components/card/index.js

@@ -1,18 +1,26 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 import { Element } from '../../primitives'
 import { styles } from './card.styles'
 import { merge } from '../../utils'
 
-const Card = React.forwardRef(function Card({ css, ...props }, ref) {
+const Card = React.forwardRef(function Card({ fullWidth, css, ...props }, ref) {
+  let width = fullWidth ? '100%' : 'auto'
+
   return (
     <Element
       ref={ref}
       as="div"
       component="Card"
-      css={merge(styles.Card, css)}
+      css={merge(styles.Card, { width }, css)}
       {...props}
     />
   )
 })
 
+Card.propTypes = {
+  /** Description of an card prop */
+  fullWidth: PropTypes.bool
+}
+
 export { Card }

packages/react-ui/src/components/input/index.js

@@ -5,21 +5,24 @@ import { styles } from './input.styles'
 import { merge } from '../../utils'
 
 /** Description of an input */
-const Input = React.forwardRef(function Input({ invalid, css, ...props }, ref) {
+const Input = React.forwardRef(function Input({ fullWidth, invalid, css, ...props }, ref) {
+  let width = fullWidth ? '100%' : 'auto'
+
   return (
     <Element
       ref={ref}
       as="input"
       component="Input"
       aria-invalid={invalid}
-      css={merge(styles.Input, css)}
+      css={merge(styles.Input, { width }, css)}
       {...props}
     />
   )
 })
 
 Input.propTypes = {
   /** Description of an input prop */
+  fullWidth: PropTypes.bool,
   type: PropTypes.string
 }
 

packages/react-ui/src/components/select/index.js

@@ -22,22 +22,26 @@ const usePlaceholder = props => {
   return { placeholderStyles, onChange }
 }
 
-const Select = React.forwardRef(function Select({ css, ...props }, ref) {
+const Select = React.forwardRef(function Select({ fullWidth, css, ...props }, ref) {
   const { placeholderStyles, onChange } = usePlaceholder(props)
+  let width = fullWidth ? '100%' : 'auto'
 
   return (
     <Input
       ref={ref}
       as="select"
       component="Select"
-      css={merge(merge(styles.Select, placeholderStyles), css)}
+      css={merge(merge(styles.Select, placeholderStyles), { width }, css)}
       {...props}
       onChange={mergeFns(onChange, props.onChange)}
     />
   )
 })
 
-Select.propTypes = {}
+Select.propTypes = {
+  /** Description of an select prop */
+  fullWidth: PropTypes.bool
+}
 
 Select.defaultProps = {}
 

packages/react-ui/src/components/textarea/index.js

@@ -4,19 +4,22 @@ import { styles } from './textarea.styles'
 import { Input } from '../input'
 import { merge } from '../../utils'
 
-const Textarea = React.forwardRef(function Textarea({ css, ...props }, ref) {
+const Textarea = React.forwardRef(function Textarea({ fullWidth, css, ...props }, ref) {
+  let width = fullWidth ? '100%' : 'auto'
+
   return (
     <Input
       ref={ref}
       as="textarea"
-      css={merge(styles.Textarea, css)}
+      css={merge(styles.Textarea, { width }, css)}
       component="Textarea"
       {...props}
     />
   )
 })
 
 Textarea.propTypes = {
+  fullWidth: PropTypes.bool,
   rows: PropTypes.number
 }