Whitespace / marginBottom hoc (#185)

new spacing HOC - changed name to `withWhiteSpace` - uses a range of 0-9 margin values (for each small and large screen) based on GDS spacing values - updated components to be allow recomposing via glamorous also fixed - position: duabs (don't know how this got back in there again?) - widths on unordered/ordered lists - changed icon colours to black in storybook - removed floats on radio/checkbox
govuk-react · Apr 5, 2018 · 139b600 · 139b600
1 parent a078751
commit 139b600
Show file tree

Hide file tree

Showing 45 changed files with 365 additions and 95 deletions.
diff --git a/components/back-link/src/index.js b/components/back-link/src/index.js
@@ -45,8 +45,8 @@ const Anchor = glamorous.button({
   },
 });
 
-const BackLink = ({ children, goBack }) => (
-  <Anchor onClick={goBack}>{children}</Anchor>
+const BackLink = ({ children, className, goBack }) => (
+  <Anchor className={className} onClick={goBack}>{children}</Anchor>
 );
 
 BackLink.propTypes = {
@@ -58,10 +58,12 @@ BackLink.propTypes = {
    * A function that is called on click
    */
   goBack: PropTypes.func, // TODO: rename onClick
+  className: PropTypes.string,
 };
 
 BackLink.defaultProps = {
   goBack: undefined,
+  className: undefined,
 };
 
 export default BackLink;
diff --git a/components/breadcrumb/src/index.js b/components/breadcrumb/src/index.js
@@ -66,8 +66,8 @@ const BreadcrumbListItem = glamorous.li({
 });
 
 // TODO use Context API https://github.com/reactjs/rfcs/blob/master/text/0002-new-version-of-context.md
-const Breadcrumb = ({ children, ...props }) => (
-  <BreadcrumbContainer {...props}>
+const Breadcrumb = ({ children, className, ...props }) => (
+  <BreadcrumbContainer className={className} {...props}>
     <BreadcrumbList>
       {children.length && children.map ? (
         children.map((child, i) => (
@@ -82,11 +82,16 @@ const Breadcrumb = ({ children, ...props }) => (
   </BreadcrumbContainer>
 );
 
+Breadcrumb.defaultProps = {
+  className: undefined,
+};
+
 Breadcrumb.propTypes = {
   /**
    * Generally a series of anchors or Link components
    */
   children: PropTypes.node.isRequired,
+  className: PropTypes.string,
 };
 
 export default Breadcrumb;
diff --git a/components/button/src/__snapshots__/test.js.snap b/components/button/src/__snapshots__/test.js.snap
@@ -16,7 +16,6 @@ exports[`button matches wrapper snapshot: wrapper mount 1`] = `
   outline-offset: -1px;
   outline: 1px solid transparent;
   padding: .526315em .789473em .263157em;
-  position: duabs;
   text-decoration: none;
   -webkit-appearance: none;
   -webkit-font-smoothing: antialiased;

diff --git a/components/button/src/index.js b/components/button/src/index.js
@@ -6,6 +6,7 @@
 // https://github.com/alphagov/govuk_elements/blob/master/packages/govuk-elements-sass/public/sass/elements/_buttons.scss
 
 import glamorous from 'glamorous';
+import PropTypes from 'prop-types';
 import React from 'react';
 
 import {
@@ -30,7 +31,6 @@ const GButton = glamorous.button(
     outlineOffset: '-1px',
     outline: '1px solid transparent',
     padding: '.526315em .789473em .263157em',
-    position: 'duabs',
     textDecoration: 'none',
     WebkitAppearance: 'none',
     WebkitFontSmoothing: 'antialiased',
@@ -57,9 +57,15 @@ const GButton = glamorous.button(
 );
 
 // TODO: start and iconUrl props
-const Button = props => <GButton {...props} />;
+const Button = ({ className, ...props }) => <GButton className={className} {...props} />;
+
+Button.propTypes = {
+  className: PropTypes.string,
+  children: PropTypes.node,
+};
 
 Button.defaultProps = {
+  className: undefined,
   children: 'Button',
 };
 

diff --git a/components/checkbox/src/__snapshots__/test.js.snap b/components/checkbox/src/__snapshots__/test.js.snap
@@ -4,11 +4,8 @@ exports[`Checkbox matches wrapper snapshot: wrapper mount 1`] = `
 .glamor-2,
 [data-glamor-2] {
   display: block;
-  float: left;
-  clear: left;
   position: relative;
   padding: 0 0 0 38px;
-  margin-bottom: 10px;
 }
 
 .glamor-0,

diff --git a/components/checkbox/src/index.js b/components/checkbox/src/index.js
@@ -8,11 +8,8 @@ import { YELLOW, BLACK } from 'govuk-colours';
 
 const CheckboxWrapper = glamorous.label({
   display: 'block',
-  float: 'left',
-  clear: 'left',
   position: 'relative',
   padding: '0 0 0 38px',
-  marginBottom: '10px',
 });
 
 const Input = glamorous.input({
@@ -80,19 +77,26 @@ const Label = glamorous.span({
   },
 });
 
-const Checkbox = ({ children, inline, ...input }) => (
-  <CheckboxWrapper inline={inline}>
+const Checkbox = ({
+  children,
+  className,
+  inline,
+  ...input
+}) => (
+  <CheckboxWrapper className={className} inline={inline}>
     <Input type="checkbox" {...input} />
     <Label>{children}</Label>
   </CheckboxWrapper>
 );
 
 Checkbox.defaultProps = {
+  className: undefined,
   inline: undefined,
 };
 
 Checkbox.propTypes = {
   children: PropTypes.node.isRequired,
+  className: PropTypes.string,
   inline: PropTypes.bool,
 };
 

diff --git a/components/date-input/src/__snapshots__/test.js.snap b/components/date-input/src/__snapshots__/test.js.snap
@@ -144,7 +144,6 @@ exports[`DateInput matches wrappersnapshot: wrapper mount 1`] = `
 
 <DateInput
   errorText="example"
-  hintText={null}
 >
   <glamorous(div)
     errorText="example"

diff --git a/components/date-input/src/index.js b/components/date-input/src/index.js
@@ -71,8 +71,8 @@ const ListParent = glamorous.div({
   },
 });
 
-const DateInput = ({ children, ...props }) => (
-  <LabelWrapper errorText={props.errorText}>
+const DateInput = ({ children, className, ...props }) => (
+  <LabelWrapper className={className} errorText={props.errorText}>
     <LabelText errorText={props.errorText}>{children}</LabelText>
     {props.hintText ? <HintText>{props.hintText}</HintText> : <span />}
     {props.errorText ? (
@@ -98,12 +98,14 @@ const DateInput = ({ children, ...props }) => (
 );
 
 DateInput.defaultProps = {
-  hintText: null,
-  errorText: null,
+  className: undefined,
+  hintText: undefined,
+  errorText: undefined,
 };
 
 DateInput.propTypes = {
   children: PropTypes.node.isRequired,
+  className: PropTypes.string,
   hintText: PropTypes.string,
   errorText: PropTypes.string,
 };

diff --git a/components/document-footer-metadata/src/__snapshots__/test.js.snap b/components/document-footer-metadata/src/__snapshots__/test.js.snap
@@ -16,7 +16,6 @@ exports[`DocumentFooterMetadata matches snapshot: enzyme.mount 1`] = `
   text-transform: none;
   font-size: 14px;
   line-height: 1.1428571429;
-  width: 100%;
   list-style-type: none;
   margin-left: 0;
 }

diff --git a/components/file-upload/src/__snapshots__/test.js.snap b/components/file-upload/src/__snapshots__/test.js.snap
@@ -73,8 +73,6 @@ exports[`FileUpload matches snapshot: enzyme.mount 1`] = `
 }
 
 <FileUpload
-  acceptedFormats={null}
-  hint={null}
   meta={Object {}}
 >
   <Label>
@@ -92,11 +90,9 @@ exports[`FileUpload matches snapshot: enzyme.mount 1`] = `
           </glamorous(span)>
         </LabelText>
         <glamorous(input)
-          accept={null}
           type="file"
         >
           <input
-            accept={null}
             className="glamor-1"
             type="file"
           />

diff --git a/components/file-upload/src/index.js b/components/file-upload/src/index.js
@@ -30,9 +30,9 @@ const Input = glamorous.input({
 });
 
 const FileUpload = ({
-  meta, children, hint, acceptedFormats,
+  meta, children, hint, acceptedFormats, className,
 }) => (
-  <Label error={meta.error}>
+  <Label className={className} error={meta.error}>
     <LabelText error={meta.error}>{children}</LabelText>
     {hint && <HintText>{hint}</HintText>}
     {meta.touched && meta.error && <ErrorText>{meta.error}</ErrorText>}
@@ -41,9 +41,10 @@ const FileUpload = ({
 );
 
 FileUpload.defaultProps = {
-  hint: null,
+  hint: undefined,
   meta: {},
-  acceptedFormats: null,
+  acceptedFormats: undefined,
+  className: undefined,
 };
 
 FileUpload.propTypes = {
@@ -65,6 +66,7 @@ FileUpload.propTypes = {
   }),
   children: PropTypes.node.isRequired,
   acceptedFormats: PropTypes.string,
+  className: PropTypes.string,
 };
 
 export default FileUpload;
diff --git a/components/input-field/src/index.js b/components/input-field/src/index.js
@@ -11,9 +11,9 @@ import HintText from '@govuk-react/hint-text';
 import Input from '@govuk-react/input';
 
 const InputField = ({
-  meta, children, hint, input,
+  meta, children, hint, input, className,
 }) => (
-  <Label error={meta.touched && meta.error}>
+  <Label className={className} error={meta.touched && meta.error}>
     <LabelText>{children}</LabelText>
     {hint && <HintText>{hint}</HintText>}
     {meta.touched && meta.error && <ErrorText>{meta.error}</ErrorText>}
@@ -25,6 +25,7 @@ InputField.defaultProps = {
   hint: null,
   input: {},
   meta: {},
+  className: undefined,
 };
 
 InputField.propTypes = {
@@ -52,6 +53,7 @@ InputField.propTypes = {
     visited: PropTypes.bool,
   }),
   children: PropTypes.node.isRequired,
+  className: PropTypes.string,
 };
 
 export default InputField;
diff --git a/components/label/src/index.js b/components/label/src/index.js
@@ -2,6 +2,7 @@
 
 import glamorous from 'glamorous';
 import React from 'react';
+import PropTypes from 'prop-types';
 
 import { ERROR_COLOUR } from 'govuk-colours';
 import { MEDIA_QUERIES, SITE_WIDTH, SPACING } from '@govuk-react/constants';
@@ -28,6 +29,14 @@ const GLabel = glamorous.label(
   }),
 );
 
-const Label = props => <GLabel {...props} />;
+const Label = ({ className, ...props }) => (<GLabel className={className} {...props} />);
+
+Label.defaultProps = {
+  className: undefined,
+};
+
+Label.propTypes = {
+  className: PropTypes.string,
+};
 
 export default Label;
diff --git a/components/list-item/src/index.js b/components/list-item/src/index.js
@@ -23,10 +23,17 @@ const GListItem = glamorous.li({
   },
 });
 
-const ListItem = ({ children }) => <GListItem>{children}</GListItem>;
+const ListItem = ({ children, className }) => (
+  <GListItem className={className}>{children}</GListItem>
+);
+
+ListItem.defaultProps = {
+  className: undefined,
+};
 
 ListItem.propTypes = {
   children: PropTypes.node.isRequired,
+  className: PropTypes.string,
 };
 
 export default ListItem;
diff --git a/components/list-navigation/src/__snapshots__/test.js.snap b/components/list-navigation/src/__snapshots__/test.js.snap
@@ -21,7 +21,6 @@ exports[`ListNavigation matches wrapper snapshot: wrapper mount 1`] = `
   text-transform: none;
   font-size: 14px;
   line-height: 1.1428571429;
-  width: 100%;
   list-style-type: square;
 }
 

diff --git a/components/list-navigation/src/index.js b/components/list-navigation/src/index.js
@@ -7,8 +7,8 @@ import UnorderedList from '@govuk-react/unordered-list';
 import ListItem from '@govuk-react/list-item';
 
 // TODO use Context API https://github.com/reactjs/rfcs/blob/master/text/0002-new-version-of-context.md
-const ListNavigation = ({ children, listStyleType }) => (
-  <UnorderedList listStyleType={listStyleType}>
+const ListNavigation = ({ children, className, listStyleType }) => (
+  <UnorderedList className={className} listStyleType={listStyleType}>
     {children.length && children.map ? (
       children.map((child, i) => (
         <ListItem key={child.key || i}>{child}</ListItem>
@@ -21,11 +21,13 @@ const ListNavigation = ({ children, listStyleType }) => (
 
 ListNavigation.defaultProps = {
   listStyleType: undefined,
+  className: undefined,
 };
 
 ListNavigation.propTypes = {
   children: PropTypes.node.isRequired,
   listStyleType: PropTypes.string,
+  className: PropTypes.string,
 };
 
 export default ListNavigation;
diff --git a/components/multi-choice/src/index.js b/components/multi-choice/src/index.js
@@ -52,9 +52,9 @@ const FieldSet = glamorous.div(
 );
 
 const MultiChoice = ({
-  meta, label, children, hint,
+  meta, label, children, hint, className,
 }) => (
-  <FieldSet error={meta.touched && meta.error}>
+  <FieldSet className={className} error={meta.touched && meta.error}>
     <LabelText>{label}</LabelText>
     {hint && <HintText>{hint}</HintText>}
     {meta.touched && meta.error && <ErrorText>{meta.error}</ErrorText>}
@@ -64,6 +64,7 @@ const MultiChoice = ({
 
 MultiChoice.defaultProps = {
   hint: undefined,
+  className: undefined,
   meta: {},
 };
 
@@ -86,6 +87,7 @@ MultiChoice.propTypes = {
   label: PropTypes.node.isRequired,
   children: PropTypes.node.isRequired,
   hint: PropTypes.string,
+  className: PropTypes.string,
 };
 
 export default MultiChoice;
diff --git a/components/ordered-list/src/__snapshots__/test.js.snap b/components/ordered-list/src/__snapshots__/test.js.snap
@@ -11,7 +11,6 @@ exports[`OrderedList matches wrapper snapshot: wrapper mount 1`] = `
   text-transform: none;
   font-size: 14px;
   line-height: 1.1428571429;
-  width: 100%;
 }
 
 .glamor-2,