fix(input): pass className to Checkbox and Radio (#233)

package.json

@@ -69,10 +69,10 @@
  "babel-loader": "8.0.5",
  "babel-plugin-add-react-displayname": "0.0.5",
  "babel-plugin-styled-components": "1.10.0",
- "babel-plugin-transform-react-remove-prop-types": "0.4.22",
+ "babel-plugin-transform-react-remove-prop-types": "0.4.23",
  "camelcase": "5.0.0",
  "coveralls": "3.0.2",
- "decompress-zip": "0.3.1",
+ "decompress-zip": "0.3.2",
  "enzyme": "3.8.0",
  "enzyme-adapter-react-16": "1.7.1",
  "enzyme-to-json": "3.3.5",
@@ -102,7 +102,7 @@
  "rimraf": "2.6.3",
  "standard": "12.0.1",
  "styled-components": "4.1.3",
- "stylelint": "9.9.0",
+ "stylelint": "9.10.0",
  "stylelint-config-recommended": "2.1.0",
  "stylelint-config-standard": "18.2.0",
  "stylelint-config-styled-components": "0.1.1",

src/Atoms/Inputs/Input.js

@@ -110,7 +110,7 @@ export const InputLabel = styled.label`
 `
 
 const Input = ({
- className,
+ className = '',
  input,
  type,
  renderSuffix,
@@ -120,11 +120,13 @@ const Input = ({
  const hasError = rest.error != null
 
  if (type === 'checkbox') {
- return <Checkbox {...input} {...rest} type={type} />
+ return (
+ <Checkbox className={className} input={input} type="checkbox" {...rest} />
+ )
  }
 
  if (type === 'radio') {
- return <Radio {...input} {...rest} type={type} />
+ return <Radio className={className} input={input} type="radio" {...rest} />
  }
 
  if (hasLabel || hasError) {

src/Atoms/Inputs/Radio.js

@@ -70,7 +70,7 @@ export const RadioLabel = styled.label`
 `
 
 const Radio = ({ className, input, ...rest }: PropsType) => (
- <Wrapper>
+ <Wrapper className={className}>
  <Input {...input} {...rest} id={toId(rest.value)} type="radio" />
  <RadioLabel htmlFor={toId(rest.value)}>
  <RadioButton />

src/Atoms/Inputs/__snapshots__/Input.spec.js.snap

@@ -76,9 +76,11 @@ exports[`Input should render correctly 1`] = `
  width="100%"
 >
  <styled.div
+ className=""
  width="100%"
  >
  <StyledComponent
+ className=""
  forwardedComponent={
  Object {
  "$$typeof": Symbol(react.forward_ref),
@@ -305,9 +307,11 @@ exports[`Input should render correctly with disabled 1`] = `
  width="100%"
 >
  <styled.div
+ className=""
  width="100%"
  >
  <StyledComponent
+ className=""
  forwardedComponent={
  Object {
  "$$typeof": Symbol(react.forward_ref),
@@ -542,9 +546,11 @@ exports[`Input should render correctly with error="error" 1`] = `
  width="100%"
 >
  <styled.div
+ className=""
  width="100%"
  >
  <StyledComponent
+ className=""
  forwardedComponent={
  Object {
  "$$typeof": Symbol(react.forward_ref),
@@ -834,9 +840,11 @@ exports[`Input should render correctly with label="label" 1`] = `
  width="100%"
 >
  <styled.div
+ className=""
  width="100%"
  >
  <StyledComponent
+ className=""
  forwardedComponent={
  Object {
  "$$typeof": Symbol(react.forward_ref),
@@ -1128,9 +1136,11 @@ exports[`Input should render correctly with label="label" and disabled 1`] = `
  width="100%"
 >
  <styled.div
+ className=""
  width="100%"
  >
  <StyledComponent
+ className=""
  forwardedComponent={
  Object {
  "$$typeof": Symbol(react.forward_ref),
@@ -1422,9 +1432,11 @@ exports[`Input should render correctly with label="label" and error="error" 1`]
  width="100%"
 >
  <styled.div
+ className=""
  width="100%"
  >
  <StyledComponent
+ className=""
  forwardedComponent={
  Object {
  "$$typeof": Symbol(react.forward_ref),
@@ -1709,9 +1721,11 @@ exports[`Input should render correctly with type 1`] = `
  width="100%"
 >
  <styled.div
+ className=""
  width="100%"
  >
  <StyledComponent
+ className=""
  forwardedComponent={
  Object {
  "$$typeof": Symbol(react.forward_ref),
@@ -1960,13 +1974,17 @@ exports[`Input should render correctly with type="checkbox" 1`] = `
  width="100%"
 >
  <Checkbox
+ className=""
  disabled={false}
  e2e="defaultInput"
  type="checkbox"
  width="100%"
  >
- <styled.div>
+ <styled.div
+ className=""
+ >
  <StyledComponent
+ className=""
  forwardedComponent={
  Object {
  "$$typeof": Symbol(react.forward_ref),
@@ -2271,13 +2289,17 @@ exports[`Input should render correctly with type="radio" 1`] = `
  width="100%"
 >
  <Radio
+ className=""
  disabled={false}
  e2e="defaultInput"
  type="radio"
  width="100%"
  >
- <styled.div>
+ <styled.div
+ className=""
+ >
  <StyledComponent
+ className=""
  forwardedComponent={
  Object {
  "$$typeof": Symbol(react.forward_ref),
@@ -2574,9 +2596,11 @@ exports[`Input should render correctly with width 1`] = `
  width="200px"
 >
  <styled.div
+ className=""
  width="200px"
  >
  <StyledComponent
+ className=""
  forwardedComponent={
  Object {
  "$$typeof": Symbol(react.forward_ref),