From 6b1a3c9169ccb05037decda7634dbe24d788cdf8 Mon Sep 17 00:00:00 2001
From: Ankit Kumar <ankit.kr.balyan@gmail.com>
Date: Sun, 26 Apr 2020 04:37:52 +0530
Subject: [PATCH] Added fullWidth prop to multiple components

---
 packages/docs/src/pages/components/card.js    | 70 ++++++++++++++++++-
 packages/docs/src/pages/components/input.js   | 17 +++++
 packages/docs/src/pages/components/select.js  | 27 +++++++
 .../docs/src/pages/components/textarea.js     | 17 +++++
 .../react-ui/src/components/card/index.js     | 12 +++-
 .../react-ui/src/components/input/index.js    |  7 +-
 .../react-ui/src/components/select/index.js   | 10 ++-
 .../react-ui/src/components/textarea/index.js |  7 +-
 8 files changed, 157 insertions(+), 10 deletions(-)

diff --git a/packages/docs/src/pages/components/card.js b/packages/docs/src/pages/components/card.js
index d47cdcb..78334d5 100644
--- a/packages/docs/src/pages/components/card.js
+++ b/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">
diff --git a/packages/docs/src/pages/components/input.js b/packages/docs/src/pages/components/input.js
index 9b17df5..fef3325 100644
--- a/packages/docs/src/pages/components/input.js
+++ b/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">
diff --git a/packages/docs/src/pages/components/select.js b/packages/docs/src/pages/components/select.js
index e23d6bc..c816104 100644
--- a/packages/docs/src/pages/components/select.js
+++ b/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">
diff --git a/packages/docs/src/pages/components/textarea.js b/packages/docs/src/pages/components/textarea.js
index 631af97..b1344a5 100644
--- a/packages/docs/src/pages/components/textarea.js
+++ b/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">
diff --git a/packages/react-ui/src/components/card/index.js b/packages/react-ui/src/components/card/index.js
index e3cdc30..98d7de3 100644
--- a/packages/react-ui/src/components/card/index.js
+++ b/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 }
diff --git a/packages/react-ui/src/components/input/index.js b/packages/react-ui/src/components/input/index.js
index b5a4cac..846b14a 100644
--- a/packages/react-ui/src/components/input/index.js
+++ b/packages/react-ui/src/components/input/index.js
@@ -5,14 +5,16 @@ 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}
     />
   )
@@ -20,6 +22,7 @@ const Input = React.forwardRef(function Input({ invalid, css, ...props }, ref) {
 
 Input.propTypes = {
   /** Description of an input prop */
+  fullWidth: PropTypes.bool,
   type: PropTypes.string
 }
 
diff --git a/packages/react-ui/src/components/select/index.js b/packages/react-ui/src/components/select/index.js
index 0b128d3..989ef92 100644
--- a/packages/react-ui/src/components/select/index.js
+++ b/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 = {}
 
diff --git a/packages/react-ui/src/components/textarea/index.js b/packages/react-ui/src/components/textarea/index.js
index 29b3ce6..9845ed6 100644
--- a/packages/react-ui/src/components/textarea/index.js
+++ b/packages/react-ui/src/components/textarea/index.js
@@ -4,12 +4,14 @@ 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}
     />
@@ -17,6 +19,7 @@ const Textarea = React.forwardRef(function Textarea({ css, ...props }, ref) {
 })
 
 Textarea.propTypes = {
+  fullWidth: PropTypes.bool,
   rows: PropTypes.number
 }