playbook_ui 7.3.0 → 7.4.0.pre.alpha1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: c9b11071227a394af722c14bca8f59f2abc059a816353af4ffa8b5a7694a5eaf
-  data.tar.gz: b5eab2ae50132399b89d2a55f6b958148c4e6fbacbe9dbabc9f2ae3311052fc4
+  metadata.gz: 65207cc2e0d9d0d986ef6d6e235936601936bf97e7ec9e47ab06b175f9c4cd06
+  data.tar.gz: ae4bbe7a345e9efc5a831c8a9e2072f736ad6d203574d6a2a94ea7297dedade0
 SHA512:
-  metadata.gz: 9824c9204448f3108c5fdd315aad2572768122ec6f3d3643bb7428d98a5fda418bb6dcd9b1b1853e674e3975323894de257c381293122382022aca10a7a4e150
-  data.tar.gz: '09955236a98e1b3da1beb51c977f49c94dd99cf6fa74784d8d3d2f7dc670941c5a8a09a5e10ce9a9a889f3702fe1d30bdd1b78985d037e29edce9b466155b93b'
+  metadata.gz: 818330dff05e489079c3e83becb835689b1423765a2c7c80229b4b851c70dd7fee65506150ad54a76f85e73bffd29c95f30ed7fdf264fc3c8d9388eeaca176a0
+  data.tar.gz: 179e34db4ea530451ad5d1b9595ef3f61cd1c5d3cd6d1bc8c5632031d533b266674928ae6568affe0dcd4aa350c26f55fe52dfda04963fc3c4943fb7e06dc916

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_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;
-        }
-    }
-}

data/app/pb_kits/playbook/pb_date/date.rb

@@ -10,36 +10,25 @@ module Playbook
       partial "pb_date/date"
 
       prop :date, required: true
-      prop :alignment, type: Playbook::Props::Enum,
-                       values: %w[left center right],
-                       default: "left"
-      prop :show_icon, type: Playbook::Props::Boolean,
-                       default: false
-      prop :show_day_of_week, type: Playbook::Props::Boolean,
-                              default: false
       prop :size, type: Playbook::Props::Enum,
-                  values: %w[lg md sm xs],
-                  default: "md"
+                  values: %w[lg sm xs],
+                  default: "sm"
       prop :timezone, default: "America/New_York"
 
       def classname
-        generate_classname("pb_date_kit", alignment)
+        generate_classname("pb_date_kit")
       end
 
-      def day_of_week
-        pb_date_time.to_day_of_week
+      def xs_date
+        "#{pb_date_time.to_day_of_week.upcase} · #{pb_date_time.to_month.upcase} #{pb_date_time.to_day}".html_safe
       end
 
-      def day
-        pb_date_time.to_day
+      def lg_date
+        "#{pb_date_time.to_month.upcase} #{pb_date_time.to_day}"
       end
 
-      def month
-        pb_date_time.to_month.capitalize
-      end
-
-      def year
-        pb_date_time.to_year
+      def sm_date
+        "#{pb_date_time.to_day_of_week.upcase} · #{pb_date_time.to_month.upcase} #{pb_date_time.to_day}".html_safe
       end
 
     private