docs: document all components

Author: gregberge

.eslintrc.js

@@ -11,7 +11,8 @@ module.exports = {
     'react/prop-types': 'off',
     'react/require-default-props': 'off',
 
-    'no-return-assign': 'off',
     'import/prefer-default-export': 'off',
+
+    'no-return-assign': 'off',
   },
 }

docs/Grid.md

@@ -1,12 +1,10 @@
-Simple:
+## Responsive breakpoints
+
+Using `xs`, `sm`, `md`, `lg` and `xl` you can set size using responsive breakpoints.
 
 ```js
 <Row>
-  <Col xs style={{ background: 'red' }}>
-    1
-  </Col>
-  <Col xs style={{ background: 'blue' }}>
-    2
-  </Col>
+  <Col xs>1</Col>
+  <Col xs>2</Col>
 </Row>
 ```

docs/Introduction.md

@@ -1,2 +1,5 @@
-Hello all
+Smooth UI is an open source components library built with [React](https://reactjs.org/) and [Styled Components](https://www.styled-components.com).
 
+It is focused on developer experience and accessibility. With Smooth UI, it is easy to design beautiful websites and applications.
+
+It is currently in development and a lot of breaking changes could happen. Be careful before using it.

src/Box.md

@@ -0,0 +1,21 @@
+Box is a simple component to create flexboxes based layout that are not part of [a grid](#grid).
+
+### Example
+
+```js
+<Box
+  padding="10px"
+  justifyContent="space-between"
+  style={{ background: '#bd4932' }}
+>
+  <Box padding="20px" style={{ background: 'white' }}>
+    Left
+  </Box>
+  <Box padding="20px" style={{ background: 'white' }}>
+    Middle
+  </Box>
+  <Box padding="20px" style={{ background: 'white' }}>
+    Right
+  </Box>
+</Box>
+```

src/Button.js

@@ -20,44 +20,47 @@ const ButtonComponent = ({ className, size, ...props }) => (
 )
 
 const Button = styled(handleRef(ButtonComponent))`
-  &.sui-button {
-    display: inline-block;
-    padding: ${props => props.theme.textControlPadding.sm};
-    z-index: ${props => props.theme.zIndexes.control};
-    border-radius: ${props => props.theme.borderRadius.md};
-    font-size: 1rem;
-    line-height: 1.5;
-    background-color: ${props => props.theme.colors.primary};
-    color: ${props => props.theme.colors.white};
-    border: 0;
-    cursor: pointer;
-    transition: background-color 300ms;
+  display: inline-block;
+  padding: ${props => props.theme.textControlPadding.sm};
+  z-index: ${props => props.theme.zIndexes.control};
+  border-radius: ${props => props.theme.borderRadius.md};
+  font-size: 1rem;
+  line-height: 1.5;
+  background-color: ${props => props.theme.colors.primary};
+  color: ${props => props.theme.colors.white};
+  border: 0;
+  cursor: pointer;
+  transition: background-color 300ms;
 
-    &:focus {
-      ${props => props.theme.mixins.controlFocus};
-    }
+  &:focus {
+    ${props => props.theme.mixins.controlFocus};
+  }
 
-    &:hover,
-    &:active {
-      background-color: ${props => darken(0.05, props.theme.colors.primary)};
-    }
+  &:not(:disabled):hover,
+  &:not(:disabled):active {
+    background-color: ${props => darken(0.05, props.theme.colors.primary)};
+  }
 
-    &.sui-button-lg {
-      padding: ${props => props.theme.textControlPadding.lg};
-      font-size: ${props => props.theme.controlFontSize.lg};
-      border-radius: ${props => props.theme.borderRadius.lg};
-    }
+  &.sui-button-lg {
+    padding: ${props => props.theme.textControlPadding.lg};
+    font-size: ${props => props.theme.controlFontSize.lg};
+    border-radius: ${props => props.theme.borderRadius.lg};
+  }
+
+  &.sui-button-sm {
+    padding: ${props => props.theme.textControlPadding.sm};
+    font-size: ${props => props.theme.controlFontSize.sm};
+    border-radius: ${props => props.theme.borderRadius.sm};
+  }
 
-    &.sui-button-sm {
-      padding: ${props => props.theme.textControlPadding.sm};
-      font-size: ${props => props.theme.controlFontSize.sm};
-      border-radius: ${props => props.theme.borderRadius.sm};
-    }
+  &:disabled {
+    opacity: 0.8;
   }
 `
 
 Button.propTypes = {
   size: PropTypes.oneOf(['sm', 'lg']),
+  disabled: PropTypes.bool,
   theme: PropTypes.object,
 }
 

src/Button.md

@@ -1,9 +1,25 @@
-Simple:
+### Sizes
+
+Set sizes using `size` prop like `"sm"` or `"lg"`.
 
 ```js
 <div>
-  <Button>Hello</Button>
-  <Button size="sm">Small</Button>
-  <Button size="lg">Large</Button>
+  <div style={{ margin: '5px' }}>
+    <Button size="sm">Small</Button>
+  </div>
+  <div style={{ margin: '5px' }}>
+    <Button>Medium</Button>
+  </div>
+  <div style={{ margin: '5px' }}>
+    <Button size="lg">Large</Button>
+  </div>
 </div>
 ```
+
+### Disabled
+
+Disable using `disabled` prop.
+
+```js
+<Button disabled>Disabled</Button>
+```

src/CheckLabel.js

@@ -10,6 +10,7 @@ const CheckboxComponent = ({ className, size, ...props }) => (
     className={classNames(
       'sui-checkbox',
       {
+        'sui-checkbox-disabled': props.disabled,
         [`sui-checkbox-${size}`]: size,
       },
       className,

src/CheckLabel.md

@@ -1,15 +1,46 @@
-Different sizes:
+### Sizes
+
+Set sizes using `size` prop like `"sm"` or `"lg"`.
 
 ```js
 <div>
-  <Checkbox size="sm" />
-  <Checkbox />
-  <Checkbox size="lg" />
+  <FormCheck>
+    <Checkbox
+      size="sm"
+      id="sizeCheckbox1"
+      name="sizeCheckboxs"
+      value="option1"
+    />
+    <FormCheckLabel htmlFor="sizeCheckbox1">Small</FormCheckLabel>
+  </FormCheck>
+  <FormCheck>
+    <Checkbox id="sizeCheckbox2" name="sizeCheckboxs" value="option2" />
+    <FormCheckLabel htmlFor="sizeCheckbox2">Medium</FormCheckLabel>
+  </FormCheck>
+  <FormCheck>
+    <Checkbox
+      size="lg"
+      id="sizeCheckbox3"
+      name="sizeCheckboxs"
+      value="option3"
+    />
+    <FormCheckLabel htmlFor="sizeCheckbox3">Large</FormCheckLabel>
+  </FormCheck>
 </div>
 ```
 
-Disabled:
+### Disabled
+
+Disable using `disabled` prop.
 
 ```js
-<Checkbox disabled />
+<FormCheck>
+  <Checkbox
+    disabled
+    id="disabledCheckbox1"
+    name="disabledCheckboxs"
+    value="option1"
+  />
+  <FormCheckLabel htmlFor="disabledCheckbox1">Disabled</FormCheckLabel>
+</FormCheck>
 ```