playbook_ui 7.14.0.pre.alpha1 → 7.14.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: a51b6024a6b3ca509d82f298e232022e404c173b21cd22f22d54cd448f2626ac
-  data.tar.gz: fc0ff76f76764102390ddf0c71b5b54f4e0419fc79e183f919ac09b790221a5e
+  metadata.gz: afa113290f2904fa0ce5794378b5c8e9ee247d1a213aa5911a339277738e331d
+  data.tar.gz: 5be3a1822a72e60809e8bc54e777e78bc8130f4be7f776d579d2a47a2987dfd1
 SHA512:
-  metadata.gz: 7df24634215015e6133ec2da8704cb0920a2f39cb3d6cf6d2dd131cf243f56f05a61a20249f0d11a4044e9d2fb69da2504c39dce9d992cb33e06429b5b4c9445
-  data.tar.gz: fbbd607ba23335bf90d5cfdbf0221dcbfce2fbc6ee9a1d2ee07c0796a84a84c4280fdb0d1b5bf7e9999d0de5737db02be32da25c97f11b806f192b2e5265ba9c
+  metadata.gz: dcdb7c84e58b1835cdefd80e7d5e8bfdd29e08a2a16a107ebba9ac66a6b3f704c0eeef5df64db523605bb5cd80167dd17c1691ee5371271ed38e692f92b0fbdc
+  data.tar.gz: b0570e9d26ca5cba15edeece70de4db71384a916164f773f48631c6fe4c4389016142b4dd4a8c33e41092f91f778a2a690a069ab95e200892b42b52c58cfdf75

data/app/helpers/playbook/pb_sample_helper.rb

@@ -4,7 +4,7 @@ module Playbook
   module PbSampleHelper
     def kits_used(sample)
       code = get_raw_code(sample, "rails")
-      kits_array = code.scan(%r{pb_rails\("(\w+)(?:"|/)})
+      kits_array = code.scan(/pb_rails\("(\w+)(?:"|\/)/)
       kits_array.uniq
     end
 

data/app/pb_kits/playbook/pb_background/docs/_background_dark.html.erb

@@ -0,0 +1,3 @@
+<%= pb_rails("background", props: { background_color: "dark", padding: "xl" }) do %> 
+
+<% end %>

data/app/pb_kits/playbook/pb_background/docs/_background_dark.jsx

@@ -0,0 +1,12 @@
+import React from 'react'
+import { Background } from '../..'
+
+const BackgroundDark = (props) => (
+  <Background
+      backgroundColor="dark"
+      padding="xl"
+      {...props}
+  />
+)
+
+export default BackgroundDark

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

@@ -3,11 +3,13 @@ examples:
   rails:
   - background_light: Light
   - background_white: White
+  - background_dark: Dark
   - background_gradient: Gradient
   - background_image: Image
 
   react:
   - background_light: Light
   - background_white: White
+  - background_dark: Dark
   - background_gradient: Gradient
   - background_image: Image

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

@@ -1,5 +1,6 @@
 export { default as BackgroundLight } from './_background_light.jsx'
 export { default as BackgroundWhite } from './_background_white.jsx'
+export { default as BackgroundDark } from './_background_dark.jsx'
 export { default as BackgroundGradient } from './_background_gradient.jsx'
 export { default as BackgroundImage } from './_background_image.jsx'
 

data/app/pb_kits/playbook/pb_checkbox/_checkbox.html.erb

@@ -9,7 +9,6 @@
   <% end %>
     <span class="pb_checkbox_checkmark">
       <%= pb_rails("icon", props: { icon: "check", id: "check_icon", classname: "check_icon", fixed_width: true}) %>
-      <%= pb_rails("icon", props: { icon: "minus" , id: "indeterminate_icon", classname: "indeterminate_icon hidden", fixed_width: true}) %>
     </span>
     <span class="pb_checkbox_label">
       <%= pb_rails("body", props: { status: object.checkbox_label_status, text: object.text, dark: object.dark, margin_right: object.form_spacing ? "xs" : "" }) %>

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

@@ -1,6 +1,6 @@
 /* @flow */
 
-import React, { useEffect, useState } from 'react'
+import React from 'react'
 import Body from '../pb_body/_body.jsx'
 import Icon from '../pb_icon/_icon.jsx'
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
@@ -15,7 +15,6 @@ type CheckboxProps = {
   data?: object,
   error?: boolean,
   id?: string,
-  indeterminate?: boolean,
   name: string,
   text: string,
   value: string,
@@ -32,7 +31,6 @@ const Checkbox = (props: CheckboxProps) => {
     data = {},
     error = false,
     id,
-    indeterminate = false,
     name = '',
     text = '',
     value = '',
@@ -43,22 +41,11 @@ const Checkbox = (props: CheckboxProps) => {
   const dataProps = buildDataProps(data)
   const ariaProps = buildAriaProps(aria)
   const classes = classnames(
-    buildCss('pb_checkbox_kit', { checked, error, indeterminate }),
+    buildCss('pb_checkbox_kit', { checked, error }),
     globalProps(props),
     className
   )
 
-  const [ isChecked, toggleCheck ] = useState(checked)
-
-  useEffect(() => {
-    toggleCheck(checked)
-  }, [checked])
-
-  const handleClick = () => {
-    toggleCheck(!isChecked)
-    onChange(!isChecked)
-  }
-
   return (
     <label
         {...ariaProps}
@@ -70,34 +57,21 @@ const Checkbox = (props: CheckboxProps) => {
         {children}
         <Else />
         <input
-            checked={isChecked}
+            defaultChecked={checked}
             name={name}
             onChange={onChange}
-            onClick={handleClick}
             type="checkbox"
             value={value}
         />
       </If>
-      <If condition={!indeterminate}>
-        <span className="pb_checkbox_checkmark">
-          <Icon
-              className="check_icon"
-              fixedWidth
-              icon="check"
-          />
-        </span>
-      </If>
-
-      <If condition={indeterminate && checked}>
-        <span className="pb_checkbox_indeterminate">
-          <Icon
-              className="indeterminate_icon"
-              fixedWidth
-              icon="minus"
-          />
-        </span>
-      </If>
 
+      <span className="pb_checkbox_checkmark">
+        <Icon
+            className="check_icon"
+            fixedWidth
+            icon="check"
+        />
+      </span>
       <Body
           className="pb_checkbox_label"
           dark={dark}

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

@@ -3,7 +3,7 @@
 $transition: $transition_cubic;
 
 [class^=pb_checkbox_kit] {
-  display: flex;
+  display: inline-flex;
   cursor: pointer;
   .pb_checkbox_label {
     padding-left: $space_xs;
@@ -11,30 +11,24 @@ $transition: $transition_cubic;
     font-size: $text_lt_default;
     user-select: none;
   }
-
-  .pb_checkbox_checkmark, .pb_checkbox_indeterminate {
-    align-items: center;
+  .pb_checkbox_checkmark {
+    position: relative;
+    height: 22px;
+    width: 22px;
     border: solid $border_light 2px;
     border-radius: $border_rad_light;
-    height: 22px;
-    position: relative;
     transition: background $transition_default ease, border-color $transition_default ease;
-    width: 22px;
-    .check_icon,
-    .indeterminate_icon {
-      color: $white;
-      height: 16px;
-      left: 1px;
-      position: relative;
-      display: flex;
+    .check_icon {
       opacity: 0;
-      width: 16px;
-      &.hidden {
-        display: none;
-      }
+      position: relative;
+      top: -2px;
+      left: 1px;
+      height: 16px;
+      width:16px;
+      color: $white;
+
     }
   }
-
   @media (hover:hover) {
     &:hover input ~ .pb_checkbox_checkmark {
       border-color: $primary_action;
@@ -42,26 +36,26 @@ $transition: $transition_cubic;
   }
 
   input {
+    position: relative;
+    opacity: 0;
     cursor: pointer;
-    display: flex;
     height: 0;
-    opacity: 0;
-    position: relative;
     width: 0;
-    &:checked ~ .pb_checkbox_checkmark,
-    &:checked ~ .pb_checkbox_indeterminate {
+    display: none;
+    &:checked ~ .pb_checkbox_checkmark {
       background-color: $primary_action;
       border-color: $primary_action;
     }
     &:checked ~ .pb_checkbox_checkmark {
       display: inline-block;
-      .check_icon,
-      .indeterminate_icon {
+      .check_icon{
         opacity: $opacity_10;
       }
     }
   }
 
+
+
   &[class*=_dark] {
     input:checked ~ .pb_checkbox_checkmark {
       background-color: $primary_action;

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

@@ -11,7 +11,6 @@ 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
@@ -48,10 +47,6 @@ 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/docs/_checkbox_custom.jsx

@@ -24,6 +24,7 @@ const CheckboxCustom = (props) => {
               onChange={handleOnChange}
               type="checkbox"
               value="custom-value"
+              {...props}
           />
         </Checkbox>
       </div>

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

@@ -5,11 +5,9 @@ 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,4 +2,3 @@ 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/_date_range_stacked_dark.html.erb

@@ -0,0 +1 @@
+<%= pb_rails("date_range_stacked", props: { start_date: Date.new(2019, 06, 18), end_date: Date.new(2020, 03, 20), dark: true }) %>

data/app/pb_kits/playbook/pb_date_range_stacked/docs/_date_range_stacked_dark.jsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import { DateRangeStacked } from '../../'
+
+const DateRangeStackedDark = (props) => (
+  <div>
+    <DateRangeStacked
+        dark
+        endDate={new Date('20 Mar 2020')}
+        startDate={new Date('18 Jun 2019')}
+        {...props}
+    />
+  </div>
+)
+
+export default DateRangeStackedDark

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

@@ -2,6 +2,10 @@ 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 +1,2 @@
 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/_date_stacked_dark.html.erb

@@ -0,0 +1,5 @@
+<%= pb_rails("date_stacked", props: { date: DateTime.now, dark: true }) %>
+
+<br>
+
+<%= pb_rails("date_stacked", props: { date: DateTime.now, size: "md", dark: true }) %>

data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_dark.jsx

@@ -0,0 +1,26 @@
+import React from 'react'
+import DateStacked from '../_date_stacked.jsx'
+
+const DateStackedDark = (props) => {
+  return (
+    <div>
+      <DateStacked
+          dark
+          date={new Date().toLocaleString('en-US', { timeZone: 'Pacific/Tongatapu' })}
+          size="sm"
+          {...props}
+      />
+
+      <br />
+
+      <DateStacked
+          dark
+          date={new Date().toLocaleString('en-US', { timeZone: 'America/New_York' })}
+          size="md"
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default DateStackedDark

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

@@ -6,6 +6,9 @@ examples:
   - date_stacked_reverse: Day & Month Reverse
   - date_stacked_sizes: Sizes
   - date_stacked_align: Alignment
+  - date_stacked_dark: Dark
+
+
 
   react:
   - date_stacked_default: Default
@@ -13,3 +16,7 @@ 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,3 +3,5 @@ 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/_date_time_stacked_dark.html.erb

@@ -0,0 +1 @@
+<%= pb_rails("date_time_stacked", props: { dark: true }) %>

data/app/pb_kits/playbook/pb_date_time_stacked/docs/_date_time_stacked_dark.jsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import { DateTimeStacked } from '../../'
+
+const DateTimeStackedDark = (props) => (
+  <div>
+    <DateTimeStacked
+        dark
+        date={new Date()}
+        {...props}
+    />
+  </div>
+)
+
+export default DateTimeStackedDark

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

@@ -2,6 +2,10 @@ 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 +1,2 @@
 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/_date_year_stacked_dark.html.erb

@@ -0,0 +1,5 @@
+<%= pb_rails "date_year_stacked", props: { date: Date.today, dark: true } %>
+<br><br>
+<%= pb_rails "date_year_stacked", props: { date: Date.today, align: 'center', dark: true } %>
+<br><br>
+<%= pb_rails "date_year_stacked", props: { date: Date.today, align: 'right', dark: true } %>

data/app/pb_kits/playbook/pb_date_year_stacked/docs/_date_year_stacked_dark.jsx

@@ -0,0 +1,28 @@
+import React from 'react'
+import { DateYearStacked } from '../../'
+
+const DateYearStackedDark = (props) => {
+  return (
+    <div>
+      <DateYearStacked
+          dark
+          date={new Date()}
+          {...props}
+      />
+      <DateYearStacked
+          align="center"
+          dark
+          date={new Date()}
+          {...props}
+      />
+      <DateYearStacked
+          align="right"
+          dark
+          date={new Date()}
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default DateYearStackedDark