playbook_ui 7.4.0.pre.alpha5 → 7.4.0.pre.alpha6

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 814e2289ea9e2244a69f55fc97609cd8afe89581a8454c8f071d024e256526f5
-  data.tar.gz: 4e0962c7833a656f2d576cbaa3d141df2c0fe08b39c30ee8b3f52d9ca339b4a3
+  metadata.gz: 84234e5245ed8198a33015e8a1f990c70d38b788b41a951cbbb2d15150abae31
+  data.tar.gz: a7dfea6cb2cfcff7daf6393c744d0e3a8b3959f314ee5d02ba0f376c996d253d
 SHA512:
-  metadata.gz: 5c22865a236cf2d4af8c60ec357c8ec6c2566bc16177158b8096000648883c93234d5c39f6d62e5e444719349775a5dbfcd5a20ab4f60b4bdb4fb64444322064
-  data.tar.gz: 59d32fbdde78b9643885d07a06283d79fa11c54c94b9cb0d7f75da19eb2c31b521f90e7ea9ea294d93fcb87657979ab55eb240a08fbbd094deea7c6c3d8b1b97
+  metadata.gz: 6c28070ae0ee1907e7f9b9543c3bba8fd3b781886dd05a522b73d633d3cc30db2e14f24e63eabdc74670a582adb33bf41d21f5aea14028287dfa7906d5a03c24
+  data.tar.gz: 766165343399fac0c7a821488262d632a033dc48fc93867d9414a24eaa2ec2059b861015ef0013edee061164a47d2b55c3af123cdb107a84be83c70be47e4a01

data/app/assets/images/{pb-logo.svg → pb.logo.svg}

@@ -1,13 +1,13 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg width="143px" height="39px" viewBox="0 0 143 39" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <!-- Generator: Sketch 59.1 (86144) - https://sketch.com -->
-    <title>pb-logo</title>
+    <title>pb.logo</title>
     <desc>Created with Sketch.</desc>
     <defs>
         <polygon id="path-1" points="31.27995 38.3709677 6.29032258e-05 38.3709677 6.29032258e-05 0.0894483871 31.27995 0.0894483871"></polygon>
     </defs>
     <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="pb-logo">
+        <g id="pb.logo">
             <path d="M40.900986,25.7250725 L40.900986,20.0998494 L44.9692278,20.0998494 C48.7361183,20.0998494 50.7953517,17.5634764 50.7953517,14.5499641 C50.7953517,11.5113391 48.7361183,8.97496614 44.9692278,8.97496614 L36.5816183,8.97496614 L36.5816183,25.7250725 L40.900986,25.7250725 Z M44.3163001,16.3329589 L40.900986,16.3329589 L40.900986,12.7418566 L44.3163001,12.7418566 C45.4714798,12.7418566 46.4006462,13.3947843 46.4006462,14.5499641 C46.4006462,15.6800312 45.4714798,16.3329589 44.3163001,16.3329589 Z M56.4896223,25.7250725 L56.4896223,8.97496614 L52.6222814,8.97496614 L52.6222814,25.7250725 L56.4896223,25.7250725 Z M70.3203764,25.7250725 L70.3203764,18.1410663 C70.3203764,14.3741758 67.5831026,13.2943339 64.6700407,13.2943339 C62.811708,13.2943339 60.7273619,13.8468112 59.1703805,15.1777791 L60.6017989,17.8648277 C61.5811905,17.0361118 62.7865954,16.5589723 63.9920004,16.5589723 C65.5489818,16.5589723 66.4530355,17.2872378 66.4530355,18.3419671 L66.4530355,19.5473721 C65.72477,18.6433184 64.2933516,18.1159537 62.686145,18.1159537 L62.5385458,18.1180063 C60.7078145,18.1688571 58.5174529,19.1726656 58.5174529,22.0335198 C58.5174529,24.745681 60.8278124,26.0264237 62.686145,26.0264237 C64.2431264,26.0264237 65.6996574,25.4237213 66.4530355,24.5196675 L66.4530355,25.7250725 L70.3203764,25.7250725 Z M64.2933516,23.4900508 C63.2888475,23.4900508 62.3596812,23.0380239 62.3596812,22.083745 C62.3596812,21.1294661 63.2888475,20.6774392 64.2933516,20.6774392 C65.1471801,20.6774392 66.0512338,20.9536779 66.4530355,21.5312678 L66.4530355,22.6111097 C66.0512338,23.1886996 65.1471801,23.4900508 64.2933516,23.4900508 Z M72.8755716,30.4462419 C73.2773732,30.5718049 74.181427,30.6471427 74.5330034,30.6471427 L74.7503997,30.6408447 C76.9447008,30.5602028 78.6513638,29.9591284 79.6094597,27.5764643 L85.130522,13.5956851 L81.0371676,13.5956851 L78.2998939,21.2801417 L75.5375075,13.5956851 L71.4692658,13.5956851 L76.3159982,25.9008607 L76.0397596,26.5537884 C75.8137462,27.0560405 75.2612689,27.2318287 74.3823278,27.2318287 C74.0809765,27.2318287 73.7042875,27.1564909 73.4280489,27.0058153 L72.8755716,30.4462419 Z M90.1467523,21.5312678 L90.1467523,17.8146025 C90.6238917,17.1616748 91.6283959,16.7096479 92.4571118,16.7096479 C93.9889806,16.7096479 95.1441603,17.8397151 95.1441603,19.6478225 C95.1441603,21.4810425 93.9889806,22.6111097 92.4571118,22.6111097 C91.6283959,22.6111097 90.6238917,22.1841954 90.1467523,21.5312678 Z M90.1467523,25.7250725 L90.1467523,24.3187667 C91.1512564,25.4739465 92.381774,26.0264237 93.7378545,26.0264237 C96.7262543,26.0264237 99.086839,23.7662894 99.086839,19.6478225 C99.086839,15.6800312 96.7764795,13.2943339 93.7378545,13.2943339 C92.4068866,13.2943339 91.1010312,13.8216986 90.1467523,15.0271035 L90.1467523,8.97496614 L86.2794114,8.97496614 L86.2794114,25.7250725 L90.1467523,25.7250725 Z M106.915681,26.0264237 C111.084373,26.0264237 113.545408,23.0631366 113.545408,19.6478225 C113.545408,16.2325085 111.084373,13.2943339 106.915681,13.2943339 C102.797214,13.2943339 100.336179,16.2325085 100.336179,19.6478225 C100.336179,23.0631366 102.797214,26.0264237 106.915681,26.0264237 Z M106.915681,22.6111097 C105.258249,22.6111097 104.30397,21.2801417 104.30397,19.6478225 C104.30397,18.0406159 105.258249,16.7096479 106.915681,16.7096479 C108.623338,16.7096479 109.577617,18.0406159 109.577617,19.6478225 C109.577617,21.2801417 108.623338,22.6111097 106.915681,22.6111097 Z M121.37425,26.0264237 C125.542942,26.0264237 128.003977,23.0631366 128.003977,19.6478225 C128.003977,16.2325085 125.542942,13.2943339 121.37425,13.2943339 C117.255783,13.2943339 114.794748,16.2325085 114.794748,19.6478225 C114.794748,23.0631366 117.255783,26.0264237 121.37425,26.0264237 Z M121.37425,22.6111097 C119.716818,22.6111097 118.762539,21.2801417 118.762539,19.6478225 C118.762539,18.0406159 119.716818,16.7096479 121.37425,16.7096479 C123.081907,16.7096479 124.036186,18.0406159 124.036186,19.6478225 C124.036186,21.2801417 123.081907,22.6111097 121.37425,22.6111097 Z M142.487659,25.7250725 L137.716264,25.7250725 L135.054328,21.4308173 L133.899149,22.8120105 L133.899149,25.7250725 L130.031808,25.7250725 L130.031808,8.97496614 L133.899149,8.97496614 L133.899149,18.4424176 L137.590701,13.5956851 L142.261646,13.5956851 L137.791602,19.1204578 L142.487659,25.7250725 Z" id="Playbook" fill="#0056CF" fill-rule="nonzero"></path>
             <g id="Group-10" transform="translate(0.000000, 0.225194)">
                 <g id="Group-3">

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';
@@ -13,13 +12,11 @@
 @import 'pb_checkbox/checkbox';
 @import 'pb_circle_chart/circle_chart';
 @import 'pb_circle_icon_button/circle_icon_button';
-@import 'pb_collapsible/collapsible';
 @import 'pb_contact/contact';
 @import 'pb_currency/currency';
 @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';
@@ -65,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';
@@ -86,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,14 +7,12 @@ samples:
 kits:
   - avatar
   - avatar_action_button
-  - background
   - buttons:
     - button
     - button_toolbar
     - circle_icon_button
   - card
   - checkbox
-  - collapsible
   - charts_and_graphs:
     - bar_graph
     - circle_chart
@@ -22,6 +20,7 @@ kits:
     - gauge
     - legend
     - line_graph
+
   - filter
   - fixed_confirmation_toast
   - flex
@@ -35,6 +34,7 @@ kits:
     - selectable_card
     - selectable_card_icon
     - selectable_icon
+    - selectable_list
     - text_input
     - textarea
     - typeahead
@@ -79,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'
@@ -16,7 +15,6 @@ export Card from './pb_card/_card.jsx'
 export Checkbox from './pb_checkbox/_checkbox.jsx'
 export CircleChart from './pb_circle_chart/_circle_chart.jsx'
 export CircleIconButton from './pb_circle_icon_button/_circle_icon_button.jsx'
-export Collapsible from './pb_collapsible/_collapsible.jsx'
 export Contact from './pb_contact/_contact.jsx'
 export Currency from './pb_currency/_currency.jsx'
 export DashboardValue from './pb_dashboard_value/_dashboard_value.jsx'
@@ -25,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'
@@ -71,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}
+    />
   )
 }