playbook_ui 9.3.0 → 9.4.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 0b07e8975d8152526c7855f8cda94f5b931ded83fb30f6c3a3efb003a481bee9
-  data.tar.gz: 92c756bfaec355150e8c045397874d280b3b6c83b6d9b630b60a5b7b64d39328
+  metadata.gz: 1c56b74cd258f0a3479d6f6acdaebe1792f3e5a30bbca45c3f2b21493ed2b5f4
+  data.tar.gz: 151e4c6b8f15c191ca1358de007a3ba373fb7da32d8d1f3afd5d0743a86ae364
 SHA512:
-  metadata.gz: 66465b67445b016a9664093a3f2fdb970e99e1424bd170bdbce653adb183c55ee774103979497bafeacbfb208c6268e9b1c647c7c18fb2d8c17cb8132b3a245b
-  data.tar.gz: e913e72bd8243b4f1e7471a6260f22b7c79c180aac2dc426d4e491e8a9d0cb07c8fc03d967bf641188db0335d6e9487f6ed66cd6e27b1c934afacf916ee18136
+  metadata.gz: a079d327c1a318bb826104f242c104286dd0d996e8adfe325ca719488d790fd73ef71d6ab302c835a368852e5b993f3831480faf0b609aeccdd99e37a9aaee4b
+  data.tar.gz: 3cf8ead3bf3712caaf275ef4559207108d655315d2c5c43505aba4a0203e91c788ce50cfe51c36d85a0cacf2c364ad65e593b6607a8003fcdd8da48aabd0396f

data/app/pb_kits/playbook/pb_checkbox/_checkbox.jsx

@@ -53,9 +53,10 @@ const Checkbox = (props: CheckboxProps) => {
 
   useEffect(() => {
     if (checkRef.current) {
+      checkRef.current.checked = checked
       checkRef.current.indeterminate = indeterminate
     }
-  }, [indeterminate])
+  }, [indeterminate, checked])
 
   return (
     <label

data/app/pb_kits/playbook/pb_checkbox/_checkbox.scss

@@ -4,12 +4,13 @@
 $transition: $transition_cubic;
 
 [class^=pb_checkbox_kit] {
-  display: inline-flex;
   cursor: pointer;
+  display: inline-flex;
+  vertical-align: middle;
   .pb_checkbox_label {
-    padding-left: $space_xs;
     cursor: pointer;
     font-size: $text_lt_default;
+    padding-left: $space_xs;
     user-select: none;
   }
 

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

@@ -1,15 +1,73 @@
-import React from 'react'
-import { Checkbox } from '../..'
+import React, { useState } from 'react'
+import { Checkbox, Table } from '../..'
 
 const CheckboxIndeterminate = (props) => {
+  const [checkboxes, setCheckboxes] = useState([
+    { name: 'Coffee', checked: false },
+    { name: 'Ice Cream', checked: false },
+    { name: 'Chocolate', checked: true },
+  ])
+
+  const isAllChecked = !checkboxes.find((checkbox) => !checkbox.checked)
+  const isNoneChecked = !checkboxes.find((checkbox) => checkbox.checked)
+
+  const processCheckboxes = (checked) =>
+    checkboxes.slice(0).map((checkbox) => {
+      checkbox.checked = checked
+      return checkbox
+    })
+
+  const onToggleAll = () => {
+    setCheckboxes(
+      isNoneChecked ? processCheckboxes(true) : processCheckboxes(false)
+    )
+  }
+
+  const updateCheckboxes = (checkbox, index) => {
+    const newCheckboxes = checkboxes.slice(0)
+    newCheckboxes[index].checked = !checkbox.checked
+    setCheckboxes(newCheckboxes)
+  }
+
   return (
-    <Checkbox
-        indeterminate
-        name="checkbox-name"
-        text="Indeterminate State"
-        value="check-box value"
-        {...props}
-    />
+    <Table
+        container={false}
+        size="md"
+    >
+      <thead>
+        <tr>
+          <th>
+            <Checkbox
+                checked={isAllChecked}
+                indeterminate={!isAllChecked && !isNoneChecked}
+                name="checkbox-name"
+                onChange={onToggleAll}
+                text={isNoneChecked ? 'Check All' : 'Uncheck All'}
+                value="check-box value"
+                {...props}
+            />
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        {checkboxes.map((checkbox, index) => (
+          <tr key={index}>
+            <td>
+              <Checkbox
+                  checked={checkbox.checked}
+                  name={checkbox.name}
+                  onChange={() => {
+                    updateCheckboxes(checkbox, index)
+                  }}
+                  text={checkbox.name}
+                  value="check-box value"
+                  {...props}
+              />
+            </td>
+          </tr>
+        ))}
+      </tbody>
+    </Table>
   )
 }
 

data/lib/playbook/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module Playbook
-  VERSION = "9.3.0"
+  VERSION = "9.4.0"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 9.3.0
+  version: 9.4.0
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2021-04-08 00:00:00.000000000 Z
+date: 2021-04-14 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack