playbook_ui 7.13.0 → 7.14.0.pre.alpha1

data/app/pb_kits/playbook/pb_checkbox/checkbox.rb

@@ -11,6 +11,7 @@ module Playbook
 
       prop :error, type: Playbook::Props::Boolean, default: false
       prop :checked, type: Playbook::Props::Boolean, default: false
+      prop :indeterminate, type: Playbook::Props::Boolean, default: false
       prop :text
       prop :value
       prop :name
@@ -47,6 +48,10 @@ module Playbook
       def checked_class
         checked ? "on" : "off"
       end
+
+      def indeterminate_class
+        indeterminate ? "indeterminate" : ""
+      end
     end
   end
 end

data/app/pb_kits/playbook/pb_checkbox/checkbox.test.js

@@ -0,0 +1,51 @@
+import React from 'react'
+import { render, screen } from '../utilities/test-utils'
+
+import Checkbox from './_checkbox'
+
+const testId = 'checkbox1',
+  kitClass = 'pb_checkbox_kit'
+
+test('returns namespaced class name', () => {
+  render(
+    <Checkbox
+        data={{ testid: testId }}
+        name="checkbox-name"
+        text="Checkbox"
+        value="check-box value"
+    />
+  )
+
+  const kit = screen.getByTestId(testId)
+  expect(kit).toHaveClass(kitClass)
+})
+
+test('returns dark class name', () => {
+  render(
+    <Checkbox
+        dark
+        data={{ testid: testId }}
+        name="checkbox-name"
+        text="Checkbox"
+        value="check-box value"
+    />
+  )
+
+  const kit = screen.getByTestId(testId)
+  expect(kit).toHaveClass(`${kitClass} dark`)
+})
+
+test('returns checked class name', () => {
+  render(
+    <Checkbox
+        checked
+        data={{ testid: testId }}
+        name="checkbox-name"
+        text="Checkbox"
+        value="check-box value"
+    />
+  )
+
+  const kit = screen.getByTestId(testId)
+  expect(kit).toHaveClass(`${kitClass}_checked`)
+})

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

@@ -24,7 +24,6 @@ const CheckboxCustom = (props) => {
               onChange={handleOnChange}
               type="checkbox"
               value="custom-value"
-              {...props}
           />
         </Checkbox>
       </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_date_range_stacked/docs/example.yml

@@ -2,10 +2,6 @@ examples:
   
   rails:
   - date_range_stacked_default: Default
-  - date_range_stacked_dark: Dark
-  
   
   react:
   - date_range_stacked_default: Default
-  - date_range_stacked_dark: Dark
-  

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

@@ -1,2 +1 @@
 export { default as DateRangeStackedDefault } from './_date_range_stacked_default.jsx'
-export { default as DateRangeStackedDark } from './_date_range_stacked_dark.jsx'

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

@@ -6,9 +6,6 @@ examples:
   - date_stacked_reverse: Day & Month Reverse
   - date_stacked_sizes: Sizes
   - date_stacked_align: Alignment
-  - date_stacked_dark: Dark
-
-
 
   react:
   - date_stacked_default: Default
@@ -16,7 +13,3 @@ examples:
   - date_stacked_reverse: Day & Month Reverse
   - date_stacked_sizes: Sizes
   - date_stacked_align: Alignment
-  - date_stacked_dark: Dark
-
-
-

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

@@ -3,5 +3,3 @@ export { default as DateStackedNotCurrentYear } from './_date_stacked_not_curren
 export { default as DateStackedReverse } from './_date_stacked_reverse.jsx'
 export { default as DateStackedSizes } from './_date_stacked_sizes.jsx'
 export { default as DateStackedAlign } from './_date_stacked_align.jsx'
-export { default as DateStackedDark } from './_date_stacked_dark.jsx'
-

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

@@ -2,10 +2,6 @@ examples:
 
   rails:
   - date_time_stacked_default: Default
-  - date_time_stacked_dark: Dark
-
 
   react:
   - date_time_stacked_default: Default
-  - date_time_stacked_dark: Dark
-

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

@@ -1,2 +1 @@
 export { default as DateTimeStackedDefault } from './_date_time_stacked_default.jsx'
-export { default as DateTimeStackedDark } from './_date_time_stacked_dark.jsx'

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

@@ -2,8 +2,6 @@ examples:
 
   rails:
   - date_year_stacked_default: Default
-  - date_year_stacked_dark: Dark
 
   react:
   - date_year_stacked_default: Default
-  - date_year_stacked_dark: Dark

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

@@ -1,2 +1 @@
 export { default as DateYearStackedDefault } from './_date_year_stacked_default.jsx'
-export { default as DateYearStackedDark } from './_date_year_stacked_dark.jsx'

data/app/pb_kits/playbook/pb_distribution_bar/_distribution_bar.jsx

@@ -6,6 +6,7 @@ import { globalProps } from '../utilities/globalProps.js'
 
 type DistributionBarProps = {
   className?: string,
+  colors: array,
   data?: string,
   id?: string,
   size?: "lg" | "sm",
@@ -18,13 +19,13 @@ const normalizeCharacters = (widths) => {
   })
 }
 
-const barValues = (normalizedValues) => {
+const barValues = (normalizedValues, colors) => {
   const arrSum = (value) => value.reduce((a, b) => a + b, 0)
   const widthSum = arrSum(normalizedValues)
   return normalizedValues.map((value, i) => {
     return (
       <div
-          className="pb_distribution_width"
+          className={classnames('pb_distribution_width', colors[i] ? `color_${colors[i]}` : '')}
           key={i}
           style={{ width: `${(value * 100) / widthSum}%` }}
       />
@@ -33,12 +34,16 @@ const barValues = (normalizedValues) => {
 }
 
 const DistributionBar = (props: DistributionBarProps) => {
-  const { size = 'lg', widths = [1] } = props
+  const {
+    size = 'lg',
+    widths = [1],
+    colors = [],
+  } = props
   const normalizedValues = normalizeCharacters(widths)
 
   return (
     <div className={classnames(`pb_distribution_bar_${size}`, globalProps(props))}>
-      {barValues(normalizedValues)}
+      {barValues(normalizedValues, colors)}
     </div>
   )
 }

data/app/pb_kits/playbook/pb_distribution_bar/_distribution_bar.scss

@@ -5,21 +5,26 @@
   $small_bar: 8px;
   $large_bar: 36px;
   display: flex;
+  border-radius: $large_bar;
+  overflow: auto;
   .pb_distribution_width {
     height: 100%;
     display: inline-block;
-    @for $i from 1 through length($bar_colors) {
-      &:nth-child(#{length($bar_colors)}n+#{$i}) {
-        background-color: nth($bar_colors, $i);
+    @each $name, $color in $data_colors {
+      &:nth-child(#{length($data_colors)}n+#{index(($data_colors), ($name $color))}) {
+        background-color: $color;
+      }
+      &.color_#{$name} {
+        background-color: $color !important;
       }
     }
     &:first-child {
-      border-top-left-radius: 18px;
-      border-bottom-left-radius: 18px;
+      border-top-left-radius: $large_bar;
+      border-bottom-left-radius: $large_bar;
     }
     &:last-child {
-      border-top-right-radius: 18px;
-      border-bottom-right-radius: 18px;
+      border-top-right-radius: $large_bar;
+      border-bottom-right-radius: $large_bar;
     }
   }
   &[class*=_sm] {

data/app/pb_kits/playbook/pb_distribution_bar/distribution_bar.rb

@@ -11,7 +11,9 @@ module Playbook
                   values: %w[lg sm],
                   default: "lg"
       prop :widths, type: Playbook::Props::NumberArray,
-                    default: [1]
+                  default: [1]
+      prop :colors, type: Playbook::Props::Array,
+                  default: []
 
       def classname
         generate_classname("pb_distribution_bar", size)
@@ -27,6 +29,7 @@ module Playbook
         {
           size: size,
           widths: widths,
+          colors: colors,
         }
       end
     end

data/app/pb_kits/playbook/pb_distribution_bar/docs/_distribution_bar_custom_colors.html.erb

@@ -0,0 +1,4 @@
+<%= pb_rails("distribution_bar", props: {
+  widths: [4,5,3],
+  colors: ["data_7", "data_1", "data_6"]
+}) %>

data/app/pb_kits/playbook/pb_distribution_bar/docs/_distribution_bar_custom_colors.jsx

@@ -0,0 +1,18 @@
+import React from 'react'
+import DistributionBar from '../_distribution_bar.jsx'
+
+const DistributionBarCustomColors = (props) => {
+  return (
+    <React.Fragment>
+      <div>
+        <DistributionBar
+            colors={['data_7', 'data_1', 'data_6']}
+            widths={[4, 5, 3]}
+            {...props}
+        />
+      </div>
+    </React.Fragment>
+  )
+}
+
+export default DistributionBarCustomColors