playbook_ui 9.4.0.pre.alpha2 → 9.6.1.pre.deps1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f839b72cd21876e826496faaa29c3d306c24dd29eb714e46bc269fe88c39f445
-  data.tar.gz: b8ee3b0cc53c15e3898c95777c96d394b5a7f9d6b659322add05c61cbfcf1b4b
+  metadata.gz: f3b9ef21adf192741b943e8414384710c8dd469b4ff4e22ed575b644b768947d
+  data.tar.gz: 509d73ae151722f9197a7b306f3c654275cd5da415827f763272caf418aa36de
 SHA512:
-  metadata.gz: cfdc5aa4001dd522efc77c2919c45ce514eebe0a6f8b8754ebecdce36823f5647880432f3f4a66e540a48a6683864a35ce7aca7117709b8a35ce3e06511813c3
-  data.tar.gz: 3ca9ce55526340f77d313ff6e9e1bb5e3fd34cb4319df3a9432511b8852872653410658d456746fb949bbf96105c7d300c598c928a6099f776a8b70e2847552c
+  metadata.gz: bb93e79a227425f0aa6128daf4e796fd046e2f3cd4bd6bd285a87e203a86e4a292753beecd9ab2ae922c548358ce8b5e2ce91deec36d4288e5464d36b6bdf7e7
+  data.tar.gz: 18ac690831680a74b24379e326ca925a5dabc7acb0ac5b53cc657bca2766b1aff4c8e2a517faf12f1aa9876542e2a11ac09a60e0325911ff19fe72119b818e42

data/app/pb_kits/playbook/_playbook.scss

@@ -55,6 +55,7 @@
 @import 'pb_multiple_users_stacked/multiple_users_stacked';
 @import 'pb_nav/nav';
 @import 'pb_online_status/online_status';
+@import 'pb_passphrase/passphrase';
 @import 'pb_person/person';
 @import 'pb_person_contact/person_contact';
 @import 'pb_pill/pill';

data/app/pb_kits/playbook/data/menu.yml

@@ -26,6 +26,7 @@ kits:
     - form
     - form_group
     - form_pill
+    - passphrase
     - radio
     - rich_text_editor
     - select

data/app/pb_kits/playbook/index.js

@@ -61,6 +61,7 @@ export MultipleUsersStacked from './pb_multiple_users_stacked/_multiple_users_st
 export Nav from './pb_nav/_nav.jsx'
 export NavItem from './pb_nav/_item.jsx'
 export OnlineStatus from './pb_online_status/_online_status.jsx'
+export Passphrase from './pb_passphrase/_passphrase.jsx'
 export PbReactPopover from './pb_popover/_popover.jsx'
 export Person from './pb_person/_person.jsx'
 export PersonContact from './pb_person_contact/_person_contact.jsx'
@@ -84,13 +85,13 @@ export StatChange from './pb_stat_change/_stat_change.jsx'
 export StatValue from './pb_stat_value/_stat_value.jsx'
 export Table from './pb_table/_table.jsx'
 export TableRow from './pb_table/_table_row.jsx'
-export Textarea from './pb_textarea/_textarea.jsx'
 export TextInput from './pb_text_input/_text_input.jsx'
+export Textarea from './pb_textarea/_textarea.jsx'
 export Time from './pb_time/_time.jsx'
-export Timeline from './pb_timeline/_timeline.jsx'
+export TimeRangeInline from './pb_time_range_inline/_time_range_inline.jsx'
 export TimeStacked from './pb_time_stacked/_time_stacked.jsx'
+export Timeline from './pb_timeline/_timeline.jsx'
 export Timestamp from './pb_timestamp/_timestamp.jsx'
-export TimeRangeInline from './pb_time_range_inline/_time_range_inline.jsx'
 export Title from './pb_title/_title.jsx'
 export TitleCount from './pb_title_count/_title_count.jsx'
 export TitleDetail from './pb_title_detail/_title_detail.jsx'

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/app/pb_kits/playbook/pb_date_stacked/_date_stacked.jsx

@@ -9,7 +9,6 @@ import { globalProps } from '../utilities/globalProps.js'
 
 type DateStackedProps = {
   align?: "left" | "center" | "right",
-  bold?: boolean,
   className?: string | array<string>,
   dark?: boolean,
   data?: string,
@@ -27,7 +26,6 @@ const sizes = {
 const DateStacked = (props: DateStackedProps) => {
   const {
     align = 'left',
-    bold = false,
     reverse = false,
     className,
     dark = false,
@@ -48,51 +46,19 @@ const DateStacked = (props: DateStackedProps) => {
   const inputYear = dateTimestamp.toYear().toString()
 
   return (
-
-    <div>
-      <If condition={bold == false}>
-
-        <div className={classes}>
-          <div className="pb_date_stacked_day_month">
-            <Caption text={dateTimestamp.toMonth().toUpperCase()} />
-            <Title
-                dark={dark}
-                size={sizes[size]}
-                text={dateTimestamp.toDay()}
-            />
-          </div>
-          <If condition={currentYear != inputYear}>
-            <Caption size="xs">{inputYear}</Caption>
-          </If>
-        </div>
-        <Else />
-        <>
-          <div className={classes}>
-            <div className="pb_date_stacked_day_month">
-
-              <Title
-                  bold
-                  dark={dark}
-                  size="4"
-                  text={dateTimestamp.toMonth()}
-              />
-              <Title
-                  bold
-                  dark={dark}
-                  size="4"
-                  text={dateTimestamp.toDay()}
-              />
-              <If condition={currentYear != inputYear}>
-                <Title size="4">{inputYear}</Title>
-              </If>
-            </div>
-
-          </div>
-
-        </>
+    <div className={classes}>
+      <div className="pb_date_stacked_day_month">
+        <Caption text={dateTimestamp.toMonth().toUpperCase()} />
+        <Title
+            dark={dark}
+            size={sizes[size]}
+            text={dateTimestamp.toDay()}
+        />
+      </div>
+      <If condition={currentYear != inputYear}>
+        <Caption size="xs">{inputYear}</Caption>
       </If>
     </div>
-
   )
 }
 

data/app/pb_kits/playbook/pb_date_stacked/date_stacked.html.erb

@@ -3,22 +3,11 @@
     data: object.data,
     class: object.classname) do %>
 
-    <% if object.bold == false %>
-
-      <div class="pb_date_stacked_day_month">
-        <%= pb_rails("caption", props: { text: object.month }) %>
-        <%= pb_rails("title", props: { text: object.day , size: object.title_size }) do %><% end %>
-        <%= pb_rails("caption", props: { text: object.year, size:"xs" }) %>
-      </div>
-
-    <% else %>
-      <div class="pb_date_stacked_day_month">
-        <%= pb_rails("title", props: { text: object.month, size: 4 }) %>
-        <%= pb_rails("title", props: { text: object.day, size: 4 }) do %><% end %>
-        <%= pb_rails("title", props: { text: object.year, size:4 }) %>
-
-      </div>
-
-    <% end %>
+    <div class="pb_date_stacked_day_month">
+      <%= pb_rails("caption", props: { text: object.month }) %>
+      <%= pb_rails("title", props: { text: object.day , size: object.title_size }) do %>
+      <% end %>
+    </div>
+    <%= pb_rails("caption", props: { text: object.year, size:"xs" }) %>
 
 <% end %>

data/app/pb_kits/playbook/pb_date_stacked/date_stacked.rb

@@ -14,11 +14,9 @@ module Playbook
                   default: false
       prop :dark, type: Playbook::Props::Boolean,
                   default: false
-      prop :bold, type: Playbook::Props::Boolean,
-                  default: false
 
       def classname
-        generate_classname("pb_date_stacked_kit", align, size, bold, reverse_class, dark_class)
+        generate_classname("pb_date_stacked_kit", align, size, reverse_class, dark_class)
       end
 
       def title_size
@@ -33,7 +31,10 @@ module Playbook
       end
 
       def month
-        pb_date_time.to_month.capitalize
+        month = Playbook::PbKit::PbDateTime.new(date)
+        content_tag(:time, datetime: month.to_iso) do
+          "#{month.to_month}"
+        end
       end
 
       def year
@@ -47,16 +48,8 @@ module Playbook
         end
       end
 
-      def bold_class
-        bold ? "bold" : nil
-      end
-
     private
 
-      def pb_date_time
-        Playbook::PbKit::PbDateTime.new(date)
-      end
-
       def reverse_class
         reverse ? "reverse" : nil
       end

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

@@ -6,12 +6,10 @@ examples:
   - date_stacked_reverse: Day & Month Reverse
   - date_stacked_sizes: Sizes
   - date_stacked_align: Alignment
-  - date_stacked_bold: Bold
-
 
   react:
   - date_stacked_default: Default
   - date_stacked_not_current_year: Not Current Year
   - date_stacked_reverse: Day & Month Reverse
   - date_stacked_sizes: Sizes
-  - date_stacked_bold: Bold
+  - date_stacked_align: Alignment

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

@@ -1,4 +1,3 @@
-export { default as DateStackedBold } from './_date_stacked_bold.jsx'
 export { default as DateStackedDefault } from './_date_stacked_default.jsx'
 export { default as DateStackedNotCurrentYear } from './_date_stacked_not_current_year.jsx'
 export { default as DateStackedReverse } from './_date_stacked_reverse.jsx'

data/app/pb_kits/playbook/pb_date_time_stacked/_date_time_stacked.jsx

@@ -1,59 +1,43 @@
-
 /* @flow */
 
 import React from 'react'
-import { buildCss } from '../utilities/props'
-import { deprecatedProps, globalProps } from '../utilities/globalProps.js'
-
-import { DateStacked, Flex, FlexItem, SectionSeparator, TimeStacked } from '../'
+import { DateStacked, Flex, FlexItem, TimeStacked } from '../'
+import { buildDataProps } from '../utilities/props'
+import { globalProps } from '../utilities/globalProps.js'
 
 type DateTimeStackedProps = {
+  data?: string,
   id?: string,
-  date: string,
-  datetime: string,
+  date: date,
   dark: boolean,
-  timeZone?: string,
 }
 
 const DateTimeStacked = (props: DateTimeStackedProps) => {
-  if (props.date) deprecatedProps('Date Time Stacked', ['date'])
-
-  const {
-    date,
-    datetime,
-    dark,
-    timeZone = 'America/New_York',
-  } = props
-
-  const classes = buildCss('pb_date_time_stacked_kit', globalProps(props))
+  const { date, data = {}, dark } = props,
+    dataProps = buildDataProps(data)
 
   return (
     <Flex
-        inline="flex-container"
-        vertical="stretch"
-        {...props}
+        className={globalProps(props)}
+        orientation="row"
+        vertical="center"
+        {...dataProps}
     >
       <FlexItem>
         <DateStacked
             align="right"
-            bold
             dark={dark}
-            date={date || datetime}
-            timeZone={timeZone}
+            date={date}
+            reverse
+            size="sm"
         />
       </FlexItem>
-
-      <SectionSeparator
-          className="date-time-padding"
-          orientation="vertical"
-      />
       <FlexItem>
         <TimeStacked
-            className={classes}
+            className="pb_date_time_stacked_kit"
             dark={dark}
-            date={date || datetime}
             tag="caption"
-            timeZone={timeZone}
+            time={date}
         />
       </FlexItem>
     </Flex>

data/app/pb_kits/playbook/pb_date_time_stacked/_date_time_stacked.scss

@@ -1,25 +1,6 @@
-[class^=pb_date_time_stacked] {
-
-  [class^=padding_month] {
-    padding-bottom: ($space_xs + 2) !important;
-    }
-
-  [class^=padding_day] {
-    padding-bottom: ($space_xs + 2) !important;
-  }
-
-  &[class*=_dark] {
-    & > * [class^=pb_title_kit] {
-      color: $text_dk_default;
-    }
-    & > * [class^=pb_caption_kit] {
-      color: $text_dk_light;
-    }
-  }
+@import "../pb_title/title";
+@import "../pb_body/body";
 
+.pb_date_time_stacked_kit {
+  padding-left: $space-xs;
 }
-.date-time-padding {
-  padding-right: ($space_xs / 2);
-  padding-left: ($space_xs / 2);
-}
-