feat: rewrite checkbox component add partial select state

Adslot · Feb 6, 2019 · 92697f7 · 92697f7
1 parent c2e083e
commit 92697f7
Show file tree

Hide file tree

Showing 22 changed files with 365 additions and 191 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -91,6 +91,7 @@
         "functions": "never"
       }
     ],
-    "object-curly-newline": ["error", { "multiline": true, "consistent": true }]
+    "object-curly-newline": ["error", { "multiline": true, "consistent": true }],
+    "no-console": ["error", { "allow": ["warn", "error"] }]
   }
 }
diff --git a/.sass-lint.yml b/.sass-lint.yml
@@ -40,8 +40,8 @@ rules:
 
   # Nesting
   force-attribute-nesting: 2
-  force-element-nesting: 2
-  force-pseudo-nesting: 2
+  force-element-nesting: 0
+  force-pseudo-nesting: 0
 
   # Name Formats
   # TODO: When inline linting is supported set as error (https://github.com/sasstools/sass-lint/pull/402) and ignore

diff --git a/config/common.js b/config/common.js
@@ -30,7 +30,7 @@ module.exports = {
       // "url" loader works like "file" loader except that it embeds assets smaller than specified limit in bytes
       // as data URLs to avoid requests.
       {
-        test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
+        test: /\.(png|jpe?g|gif|svg|eot|ttf|woff|woff2)$/,
         loader: 'url-loader',
         options: {
           limit: 8192,

diff --git a/config/dev-cold.js b/config/dev-cold.js
@@ -18,17 +18,6 @@ module.exports = merge(commonConfig, {
     filename: 'app.js',
     publicPath,
   },
-  module: {
-    rules: [
-      {
-        test: /\.(jpe?g|png|gif|svg)$/i,
-        loaders: [
-          'file-loader?hash=sha512&digest=hex&name=[hash].[ext]',
-          'image-webpack-loader?bypassOnDebug&optipng.optimizationLevel=7&gifsicle.interlaced=false',
-        ],
-      },
-    ],
-  },
   devServer: {
     hot: false, // disable HMR on the server
     contentBase: resolve(__dirname, '../src'), // match the output path

diff --git a/config/dev.js b/config/dev.js
@@ -26,17 +26,6 @@ module.exports = merge(commonConfig, {
     path: resolve(__dirname, '../dist/assets'),
     publicPath, // necessary for HMR to know where to load the hot update chunks
   },
-  module: {
-    rules: [
-      {
-        test: /\.(jpe?g|png|gif|svg)$/i,
-        loaders: [
-          'file-loader?hash=sha512&digest=hex&name=[hash].[ext]',
-          'image-webpack-loader?bypassOnDebug&optipng.optimizationLevel=7&gifsicle.interlaced=false',
-        ],
-      },
-    ],
-  },
   devServer: {
     hot: true, // enable HMR on the server
     contentBase: resolve(__dirname, '../docs'),

diff --git a/docs/examples/CheckboxExample.jsx b/docs/examples/CheckboxExample.jsx
@@ -3,47 +3,110 @@ import React from 'react';
 import Example from '../components/Example';
 import { Checkbox } from '../../src';
 
-class CheckboxExample extends React.PureComponent {
-  constructor(props) {
-    super(props);
+const handleChange = (...arg) => console.log('Checkbox changed with arguments', ...arg);
 
-    this.state = {
-      isChecked: false,
-    };
-    this.handleChange = this.handleChange.bind(this);
-  }
-
-  handleChange() {
-    this.setState(prevState => ({
-      isChecked: !prevState.isChecked,
-    }));
-  }
-
-  render() {
-    return (
-      <Checkbox
-        name="Name goes here"
-        label="Label goes here"
-        value="Value goes here"
-        dts="data-test-selector-goes-here"
-        onChange={this.handleChange}
-        checked={this.state.isChecked}
-      />
-    );
-  }
-}
+const CheckboxExample = () => (
+  <>
+    <h4>Not selected</h4>
+    <Checkbox label="Checked: false" checked={false} inline className="fix-size" onChange={handleChange} />
+    <Checkbox
+      label={
+        <p>
+          Checked: false <br /> <b>Disabled</b>
+        </p>
+      }
+      checked={false}
+      disabled
+      inline
+      className="fix-size"
+      onChange={handleChange}
+    />
+    <h4>Selected</h4>
+    <Checkbox label="Checked: true" checked inline className="fix-size" onChange={handleChange} />
+    <Checkbox
+      label={
+        <p>
+          Checked: true <br /> <b>Disabled</b>
+        </p>
+      }
+      checked
+      disabled
+      inline
+      className="fix-size"
+      onChange={handleChange}
+    />
+    <h4>Partial Selected</h4>
+    <Checkbox label={`Checked: 'partial'`} checked="partial" inline className="fix-size" onChange={handleChange} />
+    <Checkbox
+      label={
+        <p>
+          Checked: 'partial' <br /> <b>Disabled</b>
+        </p>
+      }
+      checked="partial"
+      disabled
+      inline
+      className="fix-size"
+      onChange={handleChange}
+    />
+    <h4>Checkboxes without labels</h4>
+    <Checkbox checked={false} inline onChange={handleChange} />
+    <Checkbox checked={false} disabled inline onChange={handleChange} />
+    <Checkbox checked inline onChange={handleChange} />
+    <Checkbox checked disabled inline onChange={handleChange} />
+    <Checkbox checked="partial" inline onChange={handleChange} />
+    <Checkbox checked="partial" disabled inline onChange={handleChange} />
+  </>
+);
 
 const exampleProps = {
   componentName: 'Checkbox',
   notes: '',
-  exampleCodeSnippet: `<Checkbox
-  name="Name goes here"
-  label="Label goes here"
-  value="Value goes here"
-  dts="data-test-selector-goes-here"
-  onChange={this.handleChange}
-  checked={this.state.isChecked}
-/>`,
+  exampleCodeSnippet: `
+  <h4>Not selected</h4>
+  <Checkbox label="Checked: false" checked={false} inline />
+  <Checkbox
+    label={
+      <p>
+        Checked: false <br /> <b>Disabled</b>
+      </p>
+    }
+    checked={false}
+    disabled
+    inline
+  />
+  <h4>Selected</h4>
+  <Checkbox label="Checked: true" checked inline />
+  <Checkbox
+    label={
+      <p>
+        Checked: true <br /> <b>Disabled</b>
+      </p>
+    }
+    checked
+    disabled
+    inline
+  />
+  <h4>Partial Selected</h4>
+  <Checkbox label={\`Checked: 'partial'\`} checked="partial" inline />
+  <Checkbox
+    label={
+      <p>
+        Checked: 'partial' <br /> <b>Disabled</b>
+      </p>
+    }
+    checked="partial"
+    disabled
+    inline
+  />
+  <h4>Checkboxes without labels</h4>
+  <Checkbox checked={false} inline />
+  <Checkbox checked={false} disabled inline />
+  <Checkbox checked inline />
+  <Checkbox checked disabled inline />
+  <Checkbox checked="partial" inline />
+  <Checkbox checked="partial" disabled inline />
+  `,
   propTypeSectionArray: [
     {
       label: '',

diff --git a/docs/examples/CheckboxGroupExample.jsx b/docs/examples/CheckboxGroupExample.jsx
@@ -4,47 +4,58 @@ import Example from '../components/Example';
 import { CheckboxGroup, Checkbox } from '../../src';
 
 class CheckboxGroupExample extends React.PureComponent {
-  constructor(props) {
-    super(props);
+  state = {
+    movies: ['terminator', 'predator'],
+  };
 
-    this.state = {
-      movies: ['terminator', 'predator'],
-    };
-    this.handleGroupChange = this.handleGroupChange.bind(this);
-  }
-
-  handleGroupChange(movies) {
+  handleGroupChange = movies => {
     this.setState({ movies });
-  }
+  };
+
+  displayValue = () => {
+    return _.isEmpty(this.state.movies) ? <i>Empty</i> : <i>[{this.state.movies.join(' ')}]</i>;
+  };
 
   render() {
     return (
-      <React.Fragment>
+      <>
+        <h4>
+          <b>Selected Values: {this.displayValue()}</b>
+        </h4>
+        <br />
         <CheckboxGroup name="movies" value={this.state.movies} onChange={this.handleGroupChange}>
           <Checkbox label="The Terminator" value="terminator" />
           <Checkbox label="Predator" value="predator" />
           <Checkbox label="The Sound of Music" value="soundofmusic" />
         </CheckboxGroup>
         <br />
         <h3>Inline CheckboxGroup</h3>
-        <CheckboxGroup name="movies" value={['terminator', 'predator']} onChange={this.handleGroupChange} inline>
+        <CheckboxGroup name="movies" value={this.state.movies} onChange={this.handleGroupChange} inline>
           <Checkbox label="The Terminator" value="terminator" />
           <Checkbox label="Predator" value="predator" />
           <Checkbox label="The Sound of Music" value="soundofmusic" />
         </CheckboxGroup>
-      </React.Fragment>
+      </>
     );
   }
 }
 
 const exampleProps = {
   componentName: 'CheckboxGroup',
   notes: 'Contains individual checkboxes. The state of child checkboxes is held in an array.',
-  exampleCodeSnippet: `<CheckboxGroup name="movies" value={['terminator', 'predator']} onChange={onChangeGroup} inline={true|false}>
-  <Checkbox label="The Terminator" value="terminator" />
-  <Checkbox label="Predator" value="predator" />
-  <Checkbox label="The Sound of Music" value="soundofmusic" />
-</CheckboxGroup>`,
+  exampleCodeSnippet: `
+  <CheckboxGroup name="movies" value={this.state.movies} onChange={this.handleGroupChange}>
+    <Checkbox label="The Terminator" value="terminator" />
+    <Checkbox label="Predator" value="predator" />
+    <Checkbox label="The Sound of Music" value="soundofmusic" />
+  </CheckboxGroup>
+
+  <CheckboxGroup name="movies" value={this.state.movies} onChange={this.handleGroupChange} inline>
+    <Checkbox label="The Terminator" value="terminator" />
+    <Checkbox label="Predator" value="predator" />
+    <Checkbox label="The Sound of Music" value="soundofmusic" />
+  </CheckboxGroup>
+  `,
   propTypeSectionArray: [
     {
       label: '',

diff --git a/docs/examples/styles.scss b/docs/examples/styles.scss
@@ -71,6 +71,17 @@
       }
     }
   }
+
+  &.checkbox-example {
+    h4 {
+      margin-top: 20px;
+      font-weight: bold;
+    }
+
+    .fix-size {
+      width: 200px;
+    }
+  }
 }
 
 .full-width {