playbook_ui 7.11.1 → 7.14.0.pre.alpha1

data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_custom.jsx

@@ -15,8 +15,8 @@ const CheckboxCustom = (props) => {
       <br />
       <div>
         <Checkbox
-            {...props}
             text="Toggle Me"
+            {...props}
         >
           <input
               checked={checked}

data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_default.jsx

@@ -5,10 +5,10 @@ const CheckboxDefault = (props) => {
   return (
     <div>
       <Checkbox
-          {...props}
           name="default name"
           text="Checkbox label"
           value="default value"
+          {...props}
       />
     </div>
   )

data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_error.jsx

@@ -5,11 +5,11 @@ const CheckboxError = (props) => {
   return (
     <div>
       <Checkbox
-          {...props}
           error
           name="default name"
           text="Checkbox label"
           value="default value"
+          {...props}
       />
     </div>
   )

data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_indeterminate.html.erb

@@ -0,0 +1,77 @@
+<%= pb_rails("table", props: { disable_hover: true, size: "md" }) do %>
+  <thead>
+    <tr>
+      <th>
+        <%= pb_rails("checkbox" , props: {
+            text: "Select ",
+            value: "checkbox-value",
+            name: "main",
+            indeterminate: true,
+            id: "test-indeterminate-js"
+        }) %>
+        </th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>
+        <%= pb_rails("checkbox" , props: {
+          text: "Item 1",
+          value: "checkbox-value",
+          checked: true,
+          name: "checkbox-name",
+          classname: "check-js"
+        }) %>
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <%= pb_rails("checkbox" , props: {
+          text: "Item 2",
+          value: "checkbox-value",
+          checked: false,
+          name: "checkbox-name",
+          classname: "check-js"
+        }) %>
+      </td>
+    </tr>
+  </tbody>
+<% end %>
+
+
+<script>
+  const indeterminateCheckbox = document.querySelector("#test-indeterminate-js");
+  const checkboxes = document.querySelectorAll(".check-js");
+  const allEqual = arr => arr.every( v => v === arr[0] );
+
+  // Add click handlers
+  checkboxes.forEach((checkBox) => { checkBox.onclick = () => { updateState() } });
+
+  indeterminateCheckbox.onclick = (e) => {
+    checkboxes.forEach((checkBox) => {
+      checkBox.firstElementChild.checked = e.target.checked;
+    });
+  }
+
+  function updateState() {
+    const checkboxStates = [];
+    const indeterminateIcon = indeterminateCheckbox.querySelector("#indeterminate_icon");
+    const checkIcon = indeterminateCheckbox.querySelector("#check_icon");
+    const main = indeterminateCheckbox.querySelector("#main");
+
+    // Check select state
+    checkboxes.forEach((checkBox) => {
+      checkboxStates.push(checkBox.firstElementChild.checked);
+    });
+
+    if (allEqual(checkboxStates)) {
+      main.checked = checkboxStates[0];
+      indeterminateIcon.classList.remove("hidden");
+      checkIcon.classList.add("hidden");
+      } else {
+      main.checked = true;
+      indeterminateIcon.classList.add("hidden");
+      checkIcon.classList.remove("hidden");
+    }
+  }
+</script>

data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_indeterminate.jsx

@@ -0,0 +1,78 @@
+import React, { useState } from 'react'
+import { Checkbox, Table } from '../..'
+
+const CheckboxIndeterminate = (props) => {
+  const [checkboxes, setCheckboxes] = useState([false, false])
+  const [isIndeterminate, toggleIndeterminate] = useState(false)
+
+  const toggleAll = (event) => {
+    if (event) {
+      const checked = event.currentTarget.checked
+      const updatedCheckboxes = checkboxes[0] === checkboxes[1] ? [!checkboxes[0], !checkboxes[1]] : [checked, checked]
+      setCheckboxes(updatedCheckboxes)
+      toggleIndeterminate(false)
+    }
+  }
+
+  const updateCheckbox = (event) => {
+    if (event){
+      const updatedCheckboxes = event.currentTarget.name === 'checkbox-one' ? [!checkboxes[0], checkboxes[1]] : [checkboxes[0], !checkboxes[1]]
+      setCheckboxes(updatedCheckboxes)
+      toggleIndeterminate(updatedCheckboxes[0] !== updatedCheckboxes[1])
+    }
+  }
+
+  return (
+    <div>
+      <Table
+          disableHover
+          size="sm"
+          {...props}
+      >
+        <thead>
+          <tr>
+            <th>
+              <Checkbox
+                  {...props}
+                  checked={isIndeterminate ? true : checkboxes[0]}
+                  indeterminate={isIndeterminate}
+                  name="checkbox-name"
+                  onChange={(e) => toggleAll(e)}
+                  text={checkboxes[0] === true ? 'Deselect All' : 'Select All'}
+                  value="check-box value"
+              />
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>
+              <Checkbox
+                  {...props}
+                  checked={checkboxes[0]}
+                  name="checkbox-one"
+                  onChange={(e) => updateCheckbox(e)}
+                  text="Cookies"
+                  value="check-box value"
+              />
+            </td>
+          </tr>
+          <tr>
+            <td>
+              <Checkbox
+                  {...props}
+                  checked={checkboxes[1]}
+                  name="checkbox-two"
+                  onChange={(e) => updateCheckbox(e)}
+                  text="Donuts"
+                  value="check-box value"
+              />
+            </td>
+          </tr>
+        </tbody>
+      </Table>
+    </div>
+  )
+}
+
+export default CheckboxIndeterminate

data/app/pb_kits/playbook/pb_checkbox/docs/example.yml

@@ -5,9 +5,11 @@ examples:
     - checkbox_custom: Custom Checkbox
     - checkbox_error: Default w/ Error
     - checkbox_options: Checkbox w/ Options
+    - checkbox_indeterminate: Checkbox Indeterminate
 
   react:
   - checkbox_default: Default
   - checkbox_checked: Load as checked
   - checkbox_custom: Custom Checkbox
   - checkbox_error: Default w/ Error
+  - checkbox_indeterminate: Checkbox Indeterminate

data/app/pb_kits/playbook/pb_checkbox/docs/index.js

@@ -2,3 +2,4 @@ export { default as CheckboxDefault } from './_checkbox_default.jsx'
 export { default as CheckboxCustom } from './_checkbox_custom.jsx'
 export { default as CheckboxError } from './_checkbox_error.jsx'
 export { default as CheckboxChecked } from './_checkbox_checked.jsx'
+export { default as CheckboxIndeterminate } from './_checkbox_indeterminate.jsx'

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_block.jsx

@@ -16,7 +16,7 @@ const dataWithABlock = [
   },
 ]
 
-const CircleChartBlock = () => (
+const CircleChartBlock = (props) => (
 
   <div>
     <CircleChart
@@ -25,10 +25,12 @@ const CircleChartBlock = () => (
         innerSize="lg"
         marginTop="xl"
         rounded
+        {...props}
     >
       <Title
           size={1}
           tag="div"
+          {...props}
       >
         {'83'}
       </Title>

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors.jsx

@@ -16,12 +16,13 @@ const dataWithColors = [
   },
 ]
 
-const CircleChartColors = () => (
+const CircleChartColors = (props) => (
   <div>
     <CircleChart
         chartData={dataWithColors}
         colors={['data-6', 'data-4', 'data-2']}
         id="colors-example"
+        {...props}
     />
   </div>
 )

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_default.jsx

@@ -16,11 +16,12 @@ const data = [
   },
 ]
 
-const CircleChartDefault = () => (
+const CircleChartDefault = (props) => (
   <div>
     <CircleChart
         chartData={data}
         id="circle-chart-default"
+        {...props}
     />
   </div>
 )

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_inner_sizes.jsx

@@ -88,28 +88,32 @@ const dataFourth = [
   },
 ]
 
-const CircleChartInnerSizes = () => (
+const CircleChartInnerSizes = (props) => (
   <div>
     <CircleChart
         chartData={dataFirst}
         id="with-innersize-sm"
         innerSize="sm"
+        {...props}
     />
     <CircleChart
         chartData={dataSecond}
         id="with-innersize-md"
         innerSize="md"
+        {...props}
     />
     <CircleChart
         chartData={dataThird}
         id="with-innersize-lg"
         innerSize="lg"
+        {...props}
     />
     <CircleChart
         chartData={dataFourth}
         className="poop"
         id="with-innersize-none "
         innerSize="none"
+        {...props}
     />
   </div>
 )

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_live_data.jsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react'
 import { Button, CircleChart } from '../../'
 
-const CircleChartLiveData = () => {
+const CircleChartLiveData = (props) => {
   const [data, setData] = useState([
     {
       name: 'Waiting for Calls',
@@ -41,10 +41,12 @@ const CircleChartLiveData = () => {
       <Button
           onClick={updateValue}
           text="Update Value"
+          {...props}
       />
       <CircleChart
           chartData={data}
           id="circle-chart-live-data"
+          {...props}
       />
     </div>
   )

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_rounded.jsx

@@ -16,13 +16,14 @@ const dataRounded = [
   },
 ]
 
-const CircleChartRounded = () => (
+const CircleChartRounded = (props) => (
   <div>
     <CircleChart
         chartData={dataRounded}
         id="default-test-rounded"
         innerSize="lg"
         rounded
+        {...props}
     />
   </div>
 )

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_labels.jsx

@@ -32,12 +32,13 @@ const dataWithLabels = [
   },
 ]
 
-const CircleChartWithLabels = () => (
+const CircleChartWithLabels = (props) => (
   <div>
     <CircleChart
         chartData={dataWithLabels}
         dataLabels
         id="with-labels-example"
+        {...props}
     />
   </div>
 )

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_legend_kit.jsx

@@ -17,12 +17,13 @@ const dataWithLegend = [{
 },
 ]
 
-const CircleChartWithLegendKit = () => (
+const CircleChartWithLegendKit = (props) => (
   <div>
     <CircleChart
         chartData={dataWithLegend}
         id="with-legend-example"
         legend
+        {...props}
     />
   </div>
 )

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_title.jsx

@@ -32,12 +32,13 @@ const dataWithTitle = [
   },
 ]
 
-const CircleChartWithLegendKit = () => (
+const CircleChartWithLegendKit = (props) => (
   <div>
     <CircleChart
         chartData={dataWithTitle}
         id="with-title-example"
         title="Active Users on Social Media"
+        {...props}
     />
   </div>
 )

data/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_click.jsx

@@ -4,10 +4,10 @@ import { CircleIconButton } from '../..'
 const CircleIconButtonClick = (props) => (
   <div>
     <CircleIconButton
-        {...props}
         icon="plus"
         onClick={() => alert('Click!')}
         variant="primary"
+        {...props}
     />
   </div>
 )

data/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_default.jsx

@@ -4,33 +4,33 @@ import { CircleIconButton } from '../../'
 const CircleIconButtonDefault = (props) => (
   <div>
     <CircleIconButton
-        {...props}
         icon="plus"
         variant="primary"
+        {...props}
     />
 
     <br />
 
     <CircleIconButton
-        {...props}
         icon="pen"
         variant="secondary"
+        {...props}
     />
 
     <br />
 
     <CircleIconButton
-        {...props}
         disabled
         icon="times"
+        {...props}
     />
 
     <br />
 
     <CircleIconButton
-        {...props}
         icon="user"
         variant="link"
+        {...props}
     />
   </div>
 )

data/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_link.jsx

@@ -4,21 +4,20 @@ import { CircleIconButton } from '../../'
 const CircleIconButtonLink = (props) => (
   <div>
     <CircleIconButton
-        {...props}
         icon="search"
         link="https://google.com"
         variant="primary"
-
+        {...props}
     />
 
     <br />
 
     <CircleIconButton
-        {...props}
         icon="window"
         link="https://google.com"
         newWindow
         variant="secondary"
+        {...props}
     />
 
   </div>