playbook_ui 7.3.0 → 7.4.0.pre.alpha6

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: c9b11071227a394af722c14bca8f59f2abc059a816353af4ffa8b5a7694a5eaf
-  data.tar.gz: b5eab2ae50132399b89d2a55f6b958148c4e6fbacbe9dbabc9f2ae3311052fc4
+  metadata.gz: 84234e5245ed8198a33015e8a1f990c70d38b788b41a951cbbb2d15150abae31
+  data.tar.gz: a7dfea6cb2cfcff7daf6393c744d0e3a8b3959f314ee5d02ba0f376c996d253d
 SHA512:
-  metadata.gz: 9824c9204448f3108c5fdd315aad2572768122ec6f3d3643bb7428d98a5fda418bb6dcd9b1b1853e674e3975323894de257c381293122382022aca10a7a4e150
-  data.tar.gz: '09955236a98e1b3da1beb51c977f49c94dd99cf6fa74784d8d3d2f7dc670941c5a8a09a5e10ce9a9a889f3702fe1d30bdd1b78985d037e29edce9b466155b93b'
+  metadata.gz: 6c28070ae0ee1907e7f9b9543c3bba8fd3b781886dd05a522b73d633d3cc30db2e14f24e63eabdc74670a582adb33bf41d21f5aea14028287dfa7906d5a03c24
+  data.tar.gz: 766165343399fac0c7a821488262d632a033dc48fc93867d9414a24eaa2ec2059b861015ef0013edee061164a47d2b55c3af123cdb107a84be83c70be47e4a01

data/app/pb_kits/playbook/_playbook.scss

@@ -1,5 +1,4 @@
 @import "tokens/fonts";
-@import "pb_background/background";
 @import "pb_body/body";
 @import "pb_button/button";
 @import 'pb_button_toolbar/button_toolbar';
@@ -18,7 +17,6 @@
 @import 'pb_dashboard_value/dashboard_value';
 @import 'pb_date/date';
 @import 'pb_date_picker/date_picker';
-@import 'pb_date_time/date_time';
 @import 'pb_date_range_inline/date_range_inline';
 @import 'pb_date_range_stacked/date_range_stacked';
 @import 'pb_date_stacked/date_stacked';
@@ -64,6 +62,7 @@
 @import 'pb_selectable_card/selectable_card';
 @import 'pb_selectable_card_icon/selectable_card_icon';
 @import 'pb_selectable_icon/selectable_icon';
+@import 'pb_selectable_list/selectable_list';
 @import 'pb_source/source';
 @import 'pb_star_rating/star_rating';
 @import 'pb_stat_change/stat_change';
@@ -85,4 +84,3 @@
 @import 'pb_time_stacked/time_stacked';
 @import 'pb_weekday_stacked/weekday_stacked';
 @import './utilities/spacing';
-

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

@@ -7,7 +7,6 @@ samples:
 kits:
   - avatar
   - avatar_action_button
-  - background
   - buttons:
     - button
     - button_toolbar
@@ -21,6 +20,7 @@ kits:
     - gauge
     - legend
     - line_graph
+
   - filter
   - fixed_confirmation_toast
   - flex
@@ -34,6 +34,7 @@ kits:
     - selectable_card
     - selectable_card_icon
     - selectable_icon
+    - selectable_list
     - text_input
     - textarea
     - typeahead
@@ -78,7 +79,6 @@ kits:
     - date_range_inline
     - date_range_stacked
     - date_stacked
-    - date_time
     - date_time_stacked
     - date_year_stacked
     - home_address_street

data/app/pb_kits/playbook/index.js

@@ -5,7 +5,6 @@ import 'lazysizes'
 // React Component JSX Imports from the React Kits
 export Avatar from './pb_avatar/_avatar.jsx'
 export AvatarActionButton from './pb_avatar_action_button/_avatar_action_button.jsx'
-export Background from 'pb_background/_background.jsx'
 export Badge from './pb_badge/_badge.jsx'
 export BarGraph from './pb_bar_graph/_bar_graph.jsx'
 export Body from './pb_body/_body.jsx'
@@ -24,7 +23,6 @@ export DatePicker from './pb_date_picker/_date_picker.jsx'
 export DateRangeInline from './pb_date_range_inline/_date_range_inline.jsx'
 export DateRangeStacked from './pb_date_range_stacked/_date_range_stacked.jsx'
 export DateStacked from './pb_date_stacked/_date_stacked.jsx'
-export DateTime from './pb_date_time/_date_time.jsx'
 export DateTimeStacked from './pb_date_time_stacked/_date_time_stacked.jsx'
 export DateYearStacked from './pb_date_year_stacked/_date_year_stacked.jsx'
 export DistributionBar from './pb_distribution_bar/_distribution_bar.jsx'
@@ -70,6 +68,8 @@ export Select from './pb_select/_select.jsx'
 export SelectableCard from './pb_selectable_card/_selectable_card.jsx'
 export SelectableCardIcon from './pb_selectable_card_icon/_selectable_card_icon.jsx'
 export SelectableIcon from './pb_selectable_icon/_selectable_icon.jsx'
+export SelectableList from './pb_selectable_list/_selectable_list.jsx'
+export SelectableListItem from './pb_selectable_list/_item.jsx'
 export Source from './pb_source/_source.jsx'
 export StarRating from './pb_star_rating/_star_rating.jsx'
 export StatChange from './pb_stat_change/_stat_change.jsx'

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

@@ -1,10 +1,11 @@
 <%= content_tag(:label, aria: object.aria,
                         id: object.id,
                         data: object.data,
-                        class: object.classname) do %>  
+                        class: object.classname,
+                        for: object.for_attribute ) do %>  
   <% if object.children %>
     <%= capture(&object.children) %>
-   <% else %>             
+   <% else %>            
     <%= object.input %>
   <% end %>
     <span class="pb_checkbox_checkmark">

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

@@ -51,13 +51,14 @@ const Checkbox = (props: CheckboxProps) => {
         {...ariaProps}
         {...dataProps}
         className={classes}
-        id={id}
+        htmlFor={id}
     >
       <If condition={children}>
         {children}
         <Else />
         <input
             defaultChecked={checked}
+            id={id}
             name={name}
             onChange={onChange}
             type="checkbox"

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

@@ -14,7 +14,6 @@ module Playbook
       prop :text
       prop :value
       prop :name
-
       prop :input_options, type: Playbook::Props::Hash,
                            default: {}
       prop :required, type: Playbook::Props::Boolean,
@@ -34,6 +33,10 @@ module Playbook
         check_box_tag(name, value, checked, input_options)
       end
 
+      def for_attribute
+        input_options[:id]
+      end
+
       def checkbox_label_status
         error ? "negative" : nil
       end

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

@@ -1,5 +1,8 @@
 <%= pb_rails("checkbox" , props: {
   text: "Checkbox Label",
-  value: "checkbox-value",
-  name: "checkbox-name"
+  input_options: {
+    value: "checkbox-value",
+    name: "checkbox-name",
+    id: "label-id",
+  }
 }) %>

data/app/pb_kits/playbook/pb_date/_date.html.erb

@@ -1,70 +1,14 @@
 <%= content_tag(:div,
     id: object.id,
     data: object.data,
-    class: object.classname,
-    aria: object.aria) do %>
-
-  <% if object.size == "md" %>
-    <!-- icon -->
-    <% if object.show_icon %>
-      <%= pb_rails("body", props: {
-        color: "light",
-        tag: "div",
-      }) do %>
-        <%= pb_rails("icon", props: { icon: "calendar-alt", fixed_width: true }) %>
-      <% end %>
-    <% end %>
-
-    <!-- day_of_week -->
-    <% if object.show_day_of_week %>
-      <%= pb_rails("title", props: { tag: "div", text: object.day_of_week, size: 4 }) %>
-      <%= pb_rails("body", props: {
-        text: "•",
-        color: "light",
-        tag: "div",
-      }) %>
-    <% end %>
-
-    <!-- month day, year -->
-
-    <%# if not current year %>
-    <% if object.year.to_s == DateTime.now.year.to_s %>
-      <%= pb_rails("title", props: { tag: "div", text: "#{object.month} #{object.day}", size: 4 }) %>
-    <%# if is current year %>
+    class: object.classname) do %>
+    <% if object.size == "lg" %>
+      <%= pb_rails("title", props: { text: object.lg_date, size: 3 }) %>
+    <% elsif object.size == "sm" %>
+      <%= pb_rails("icon", props: { icon: "calendar", fixed_width: true }) %>
+      <%= pb_rails("title", props: { tag: "span", text: object.sm_date, size: 4 }) %>
     <% else %>
-      <%= pb_rails("title", props: { tag: "div", text: "#{object.month} #{object.day}, #{object.year}", size: 4 }) %>
-    <% end %>
-
-  <% else %>
-
-    <!-- icon -->
-    <% if object.show_icon %>
-      <%= pb_rails("body", props: {
-        color: "light",
-        tag: "div",
-      }) do %>
-        <%= pb_rails("icon", props: { icon: "calendar-alt", fixed_width: true }) %>
-      <% end %>
-    <% end %>
-
-    <!-- day_of_week -->
-    <% if object.show_day_of_week %>
-      <%= pb_rails("caption", props: { tag: "div", text: object.day_of_week }) %>
-      <%= pb_rails("caption", props: {
-        text: "•",
-        color: "light",
-        tag: "div",
-      }) %>
-    <% end %>
-
-    <!-- month day, year -->
-
-    <%# if not current year %>
-    <% if object.year.to_s == DateTime.now.year.to_s %>
-      <%= pb_rails("caption", props: { tag: "span", text: "#{object.month} #{object.day}" }) %>
-    <%# if is current year %>
-    <% else %>
-      <%= pb_rails("caption", props: { tag: "span", text: "#{object.month} #{object.day}, #{object.year}" }) %>
-    <% end %>
+      <%= pb_rails("title", props: { text: object.xs_date, size: 4 }) %>
   <% end %>
 <% end %>
+

data/app/pb_kits/playbook/pb_date/_date.jsx

@@ -2,131 +2,82 @@
 
 import React from 'react'
 import DateTime from '../pb_kit/dateTime.js'
-import { Body, Caption, Icon, Title } from '../'
+import { Icon } from '../'
 import classnames from 'classnames'
 import { globalProps } from '../utilities/globalProps.js'
-import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 
-type PbDateProps = {
-  alignment?: "left" | "center" | "right",
-  aria: Object,
-  className?: string,
-  data?: Object,
-  id?: string,
-  showDayOfWeek?: boolean,
-  showIcon?: boolean,
-  size?: string,
-  value: string | date,
+const defaultDateString = (value: DateTime) => {
+  const weekday = value.toWeekday().toUpperCase()
+  const month = value.toMonth().toUpperCase()
+  const day = value.toDay()
+
+  return `${weekday} · ${month} ${day}`
 }
 
-const PbDate = (props: PbDateProps) => {
-  const {
-    aria = {},
-    alignment = 'left',
-    className,
-    data = {},
-    id,
-    showDayOfWeek = false,
-    showIcon = false,
-    size = 'md',
-    value,
-  } = props
+const largeDateString = (value: DateTime) => {
+  const month = value.toMonth().toUpperCase()
+  const day = value.toDay()
 
-  const dateTimestamp = new DateTime({ value: value })
-  const weekday = dateTimestamp.toWeekday()
-  const month = dateTimestamp.toMonth()
-  const day = dateTimestamp.toDay()
-  const year = dateTimestamp.toYear()
-  const currentYear = new Date().getFullYear().toString()
+  return `${month} ${day}`
+}
 
-  const ariaProps = buildAriaProps(aria)
-  const dataProps = buildDataProps(data)
+type DateSubcomponent = {
+  value: DateTime,
+}
 
-  const classes = classnames(
-    buildCss('pb_date_kit', alignment),
-    globalProps(props),
-    className
-  )
+const ExtraSmallDate = ({ value, ...props }: DateSubcomponent) => (
+  <h3 className={classnames('pb_title_kit_4', globalProps(props))}>
+    {defaultDateString(value)}
+  </h3>
+)
 
-  return (
-    <div
-        {...ariaProps}
-        {...dataProps}
-        className={classes}
-        id={id}
-    >
-      <If condition={size == 'md' || size == 'lg'}>
+const SmallDate = ({ value, ...props }: DateSubcomponent) => (
+  <h3 className={classnames('pb_title_kit_4', globalProps(props))}>
+    <Icon
+        fixedWidth
+        icon="calendar"
+    />
+    {defaultDateString(value)}
+  </h3>
+)
 
-        <Title
-            size={4}
-            tag="h4"
-        >
-          <If condition={showIcon}>
-            <Body
-                className="pb_icon_kit_container"
-                color="light"
-                tag="span"
-            >
-              <Icon
-                  fixedWidth
-                  icon="calendar-alt"
-              />
-            </Body>
-          </If>
-          <If condition={showDayOfWeek}>
-            {weekday}
-            <Body
-                color="light"
-                tag="span"
-                text=" • "
-            />
-          </If>
-          <span>
-            {month}
-            {' '}
-            {day}
-          </span>
-          <If condition={currentYear != year}>
-            <span>
-              {`, ${year}`}
-            </span>
-          </If>
-        </Title>
-        <Else />
-        <>
-          <If condition={showIcon}>
-            <Body
-                className="pb_icon_kit_container"
-                color="light"
-                tag="span"
-            >
-              <Icon
-                  fixedWidth
-                  icon="calendar-alt"
-              />
-            </Body>
-          </If>
-          <If condition={showDayOfWeek}>
-            <Caption tag="div">
-              {weekday}
-            </Caption>
-            <Caption
-                color="light"
-                tag="div"
-                text=" • "
-            />
-          </If>
-          <Caption tag="span">
-            {month}
-            {' '}
-            {day}
-            <If condition={currentYear != year}>
-              {`, ${year}`}
-            </If>
-          </Caption>
-        </>
-      </If>
-    </div>
+const LargeDate = ({ value, ...props }: DateSubcomponent) => (
+  <h3 className={classnames('pb_title_kit_3', globalProps(props))}>
+    {largeDateString(value)}
+  </h3>
+)
+
+type PbDateProps = {
+  size?: "xs" | "sm" | "lg",
+  value?: string,
+  className?: string
+}
+
+const PbDate = ({ size, value, className, ...props }: PbDateProps) => {
+  const date = new DateTime({ value: value })
+
+  if (size == 'xs')
+    return (
+      <ExtraSmallDate
+          {...props}
+          className={className}
+          value={date}
+      />
+    )
+  if (size == 'lg')
+    return (
+      <LargeDate
+          {...props}
+          className={className}
+          value={date}
+      />
+    )
+  return (
+    <SmallDate
+        {...props}
+        className={className}
+        value={date}
+    />
   )
 }
 

data/app/pb_kits/playbook/pb_date/_date.scss

@@ -1,32 +1,2 @@
 @import "../pb_icon/icon";
 @import "../pb_title/title";
-
-[class^=pb_date_kit] {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    > div, .pb_icon_kit_container {
-        margin-right: 4px !important;
-    }
-
-    &[class*=_center] {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        justify-content: center;
-        margin-right: 4px !important;
-    }
-
-    &[class*=_right] {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        justify-content: flex-end;
-        margin-left: 4px !important;
-    }
-    &.dark {
-        [class^=pb_title_kit] {
-            color: $text_dk_default !important;
-        }
-    }
-}