💄 Update custom styling

gilbarbara · Dec 19, 2018 · 2030d8e · 2030d8e
1 parent d6bc0a1
commit 2030d8e
Show file tree

Hide file tree

Showing 38 changed files with 694 additions and 349 deletions.
diff --git a/src/Alert.jsx b/src/Alert.jsx
@@ -1,35 +1,31 @@
 import PropTypes from 'prop-types';
 import styled, { css } from 'styled-components';
 
-import { px, themeGet } from './utils/helpers';
+import { isDefined, px, themeGet } from './utils/helpers';
 import { baseStyles, sizesAllPropTypes, variantPropTypes } from './utils/system';
 
 import Box from './Box';
 
-const styles = (props: Object): string => {
-  const { size } = props;
+const Alert = styled(Box).attrs({
+  role: 'alert',
+})(props => {
+  const { borderRadius: br, fontSize, lineHeight, size, width } = props;
   const { borderRadius, maxWidth, padding } = themeGet(props, 'alert');
 
   return css`
     ${baseStyles.variant};
-    border-radius: ${px(borderRadius)};
-    font-size: ${baseStyles.fontSize};
-    line-height: ${baseStyles.lineHeight};
+    border-radius: ${px(isDefined(br) ? br : borderRadius)};
+    font-size: ${fontSize || baseStyles.fontSize};
+    line-height: ${lineHeight || baseStyles.lineHeight};
     max-width: ${px(maxWidth)};
     padding: ${px(padding[size][0])} ${px(padding[size][1])};
-    width: 100%;
+    width: ${width || '100%'};
 
     a {
       ${baseStyles.color};
     }
   `;
-};
-
-const Alert = styled(Box).attrs({
-  role: 'alert',
-})`
-  ${styles};
-`;
+});
 
 Alert.displayName = 'Alert';
 

diff --git a/src/Badge.jsx b/src/Badge.jsx
@@ -1,23 +1,24 @@
 import PropTypes from 'prop-types';
 import styled, { css } from 'styled-components';
 
-import { px, themeGet } from './utils/helpers';
+import { isDefined, px, themeGet } from './utils/helpers';
 import { baseStyles, sizesAllPropTypes, variantPropTypes } from './utils/system';
 
 import Box from './Box';
 
 const Badge = styled(Box)(props => {
+  const { borderRadius: radii, fontSize: fz, fontWeight: fw, lineHeight } = props;
   const { borderRadius, fontSize, fontWeight, padding } = themeGet(props, 'badge');
   const fontSizeProp = themeGet(props, 'componentSizes', { key: 'size' });
 
   return css`
     ${baseStyles.variant};
-    border-radius: ${px(borderRadius)};
+    border-radius: ${px(isDefined(radii) ? radii : borderRadius)};
     display: inline-flex;
-    font-size: ${fontSize};
-    ${fontSizeProp ? `font-size: ${fontSizeProp}` : ''};
-    font-weight: ${fontWeight};
-    line-height: 1;
+    font-size: ${fz || fontSize};
+    ${fontSizeProp ? `font-size: ${fz || fontSizeProp}` : ''};
+    font-weight: ${fw || fontWeight};
+    line-height: ${lineHeight || 1};
     padding: ${px(padding[0])} ${px(padding[1])};
     vertical-align: baseline;
   `;

diff --git a/src/Button.jsx b/src/Button.jsx
@@ -1,33 +1,33 @@
 import PropTypes from 'prop-types';
 import styled, { css } from 'styled-components';
 
-import { getColor, px, themeGet } from './utils/helpers';
+import { getColor, isDefined, px, themeGet } from './utils/helpers';
 import { baseStyles, buttonPropTypes, sizesAllPropTypes, variantPropTypes } from './utils/system';
 
 import Badge from './Badge';
 import Box from './Box';
 
 const styles = (props: Object): string => {
-  const { animate, disabled, outline, size } = props;
+  const { animate, borderRadius: br, disabled, fontSize, lineHeight: lh, outline, size } = props;
   const { borderRadius, disabledOpacity, lineHeight, loader, padding } = themeGet(props, 'button');
   const fontSizeProp = themeGet(props, 'componentSizes', { key: 'size' });
 
   return css`
     ${baseStyles.variant};
     align-items: center;
-    border-radius: ${px(borderRadius[size])};
+    border-radius: ${px(isDefined(br) ? br : borderRadius[size])};
     box-shadow: none;
     cursor: pointer;
     display: inline-flex;
     font-family: inherit;
-    ${fontSizeProp ? `font-size: ${fontSizeProp}` : ''};
+    ${fontSizeProp ? `font-size: ${fontSize || fontSizeProp}` : ''};
     justify-content: center;
-    line-height: ${lineHeight};
+    line-height: ${lh || lineHeight};
     ${disabled && `opacity: ${disabledOpacity};`};
     padding: ${px(padding[size][0])} ${px(padding[size][1])};
     text-decoration: none;
-    width: ${({ block }) => (block ? '100%' : 'auto')}
-      ${animate ? loader(outline ? '#ccc' : '#fff') : ''};
+    width: ${({ block }) => (block ? '100%' : 'auto')};
+    ${animate ? loader(outline ? '#ccc' : '#fff') : ''};
   `;
 };
 

diff --git a/src/Code.jsx b/src/Code.jsx
@@ -1,17 +1,22 @@
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 
-import { spacer } from './utils/helpers';
+import { isDefined, px, themeGet } from './utils/helpers';
 
 import Box from './Box';
 
-const Code = styled(Box)`
-  background-color: #e8eded;
-  border: 1px solid #d0dada;
-  border-radius: 2px;
-  font-family: 'SF Mono', 'Roboto Mono', Menlo, monospace;
-  padding: ${spacer(2)};
-`;
+const Code = styled(Box)(props => {
+  const { bg, border: bd, borderRadius: br, fontFamily: ff, padding: pd } = props;
+  const { backgroundColor, border, borderRadius, fontFamily, padding } = themeGet(props, 'code');
+
+  return css`
+    background-color: ${bg || backgroundColor};
+    border: ${bd || border};
+    border-radius: ${px(isDefined(br) ? br : borderRadius)};
+    font-family: ${ff || fontFamily || ff};
+    padding: ${px(isDefined(pd) ? pd : padding)};
+  `;
+});
 
 Code.displayName = 'Code';
 

diff --git a/src/Container.jsx b/src/Container.jsx
@@ -1,12 +1,13 @@
 import PropTypes from 'prop-types';
 import styled, { css } from 'styled-components';
 
-import { px, responsive, spacer, themeGet } from './utils/helpers';
+import { isDefined, px, responsive, spacer, themeGet } from './utils/helpers';
 import { textAlignPropTypes } from './utils/system';
 
 import Box from './Box';
 
 const styles = (props: Object): string => {
+  const { ml, mr, pb, pl, pr, pt } = props;
   const container = themeGet(props, 'container');
 
   const vertical = ({ verticalPadding }: Object): string => {
@@ -15,35 +16,35 @@ const styles = (props: Object): string => {
 
     const grid = responsive({
       md: `
-          padding-bottom: ${spacer(4)(props)};
-          padding-top: ${spacer(4)(props)};
+          padding-bottom: ${isDefined(pb) ? px(pb) : spacer(4)(props)};
+          padding-top: ${isDefined(pt) ? px(pt) : spacer(4)(props)};
         `,
       lg: `
-          padding-bottom: ${spacer(5)(props)};
-          padding-top: ${spacer(5)(props)};
+          padding-bottom: ${isDefined(pb) ? px(pb) : spacer(5)(props)};
+          padding-top: ${isDefined(pt) ? px(pt) : spacer(5)(props)};
         `,
     });
 
     return css`
-      padding-bottom: ${spacer(3)};
-      padding-top: ${spacer(3)};
+      padding-bottom: ${isDefined(pb) ? px(pb) : spacer(3)};
+      padding-top: ${isDefined(pt) ? px(pt) : spacer(3)};
 
       ${grid};
     `;
   };
 
   const grid = responsive({
     md: `
-        padding-left: ${spacer(4)(props)};
-        padding-right: ${spacer(4)(props)};
+        padding-left: ${isDefined(pl) ? px(pl) : spacer(4)(props)};
+        padding-right: ${isDefined(pr) ? px(pr) : spacer(4)(props)};
       `,
   });
 
   return css`
-    margin-left: auto;
-    margin-right: auto;
-    padding-left: ${spacer(3)};
-    padding-right: ${spacer(3)};
+    margin-left: ${isDefined(ml) ? px(ml) : 'auto'};
+    margin-right: ${isDefined(mr) ? px(mr) : 'auto'};
+    padding-left: ${isDefined(pl) ? px(pl) : spacer(3)};
+    padding-right: ${isDefined(pr) ? px(pr) : spacer(3)};
     max-width: ${container.maxWidth ? px(container.maxWidth) : 'none'};
     position: relative;
     width: 100%;

diff --git a/src/Fieldset.jsx b/src/Fieldset.jsx
@@ -1,27 +1,27 @@
 import PropTypes from 'prop-types';
 import styled, { css } from 'styled-components';
 
-import { px, spacer, themeGet } from './utils/helpers';
+import { isDefined, px, spacer, themeGet } from './utils/helpers';
 
 import Box from './Box';
 import Legend from './Legend';
 
 const styles = (props: Object): string => {
-  const { inline } = props;
+  const { borderRadius: br, inline, mb, ml, padding: pd } = props;
   const { borderColor, borderRadius, padding, marginBottom } = themeGet(props, 'fieldset');
 
   return css`
     border: 1px solid ${borderColor};
-    border-radius: ${px(borderRadius)};
-    margin-bottom: ${px(marginBottom)};
-    padding: ${px(padding)};
+    border-radius: ${px(isDefined(br) ? px(br) : borderRadius)};
+    margin-bottom: ${px(isDefined(mb) ? mb : marginBottom)};
+    padding: ${px(isDefined(pd) ? pd : padding)};
     text-align: left;
 
     > *:not(legend) {
       ${inline ? 'display: inline-block;' : ''};
 
       + * {
-        ${inline ? `margin-left: ${spacer(2)} ;` : ''};
+        ${inline ? `margin-left: ${isDefined(ml) ? px(ml) : spacer(2)} ;` : ''};
       }
     }
   `;

diff --git a/src/Form.jsx b/src/Form.jsx
@@ -6,14 +6,14 @@ import { px, themeGet } from './utils/helpers';
 import Box from './Box';
 
 const styles = (props: Object): string => {
-  const { bordered } = props;
+  const { bordered, textAlign } = props;
   const { borderColor, borderRadius, padding } = themeGet(props, 'form');
 
   return css`
     ${bordered ? `border: 1px solid ${borderColor};` : ''}
     ${bordered ? `border-radius: ${px(borderRadius)};` : ''}
     ${bordered ? `padding: ${px(padding)};` : ''}
-    text-align:left;
+    text-align: ${textAlign || 'left'};
   `;
 };
 

diff --git a/src/FormGroup.jsx b/src/FormGroup.jsx
@@ -2,21 +2,21 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import styled, { css } from 'styled-components';
 
-import { px, themeGet } from './utils/helpers';
+import { isDefined, px, themeGet } from './utils/helpers';
 
 import Box from './Box';
 import Flex from './Flex';
 
 const styles = (props: Object): string => {
-  const { bordered } = props;
+  const { bordered, mb, textAlign } = props;
   const { borderColor, borderRadius, marginBottom, padding } = themeGet(props, 'formGroup');
 
   return css`
     ${bordered ? `border: 1px solid ${borderColor};` : ''}
     ${bordered ? `border-radius: ${px(borderRadius)};` : ''}
-    margin-bottom: ${px(marginBottom)};
+    margin-bottom: ${px(isDefined(mb) ? mb : marginBottom)};
     ${bordered ? `padding: ${px(padding)};` : ''};
-    text-align: left;
+    text-align: ${textAlign || 'left'};
   `;
 };
 

diff --git a/src/Heading.jsx b/src/Heading.jsx
@@ -7,16 +7,16 @@ import { baseStyles, headingPropTypes } from './utils/system';
 import Box from './Box';
 
 const Heading = styled(Box)(props => {
-  const { gutterBottom, mb, mt } = props;
+  const { fontFamily, fontSize, fontWeight, lineHeight, gutterBottom, mb, mt } = props;
   const headingWeight = themeGet(props, 'headingWeight');
   const headingSize = themeGet(props, 'headingSizes', { key: ['size', 'as'], base: 'h1' });
   const marginTop = gutterBottom ? spacer(3) : 0;
 
   return css`
-    font-size: ${px(headingSize)};
-    font-family: inherit;
-    font-weight: ${headingWeight};
-    line-height: ${baseStyles.lineHeight};
+    font-size: ${px(fontSize || headingSize)};
+    font-family: ${fontFamily || 'inherit'};
+    font-weight: ${fontWeight || headingWeight};
+    line-height: ${lineHeight || baseStyles.lineHeight};
     margin-bottom: ${isDefined(mb) ? px(mb) : marginTop};
     margin-top: ${isDefined(mt) ? px(mt) : spacer(3)};
 

diff --git a/src/Image.jsx b/src/Image.jsx
@@ -1,11 +1,15 @@
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 
 import Box from './Box';
 
-const Image = styled(Box)`
-  max-width: 100%;
-`;
+const Image = styled(Box)(props => {
+  const { maxWidth } = props;
+
+  return css`
+    max-width: ${maxWidth || '100%'};
+  `;
+});
 
 Image.displayName = 'Image';