playbook_ui 9.12.0 → 9.15.0.pre.decouple.website1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b1460f77a2ef88bf84e6e7388b473d73517373e9ef0d690418f318bf13eb49f6
-  data.tar.gz: 814d426340141a35d9286a0df82747538023dde241b7ec662c68bdfe6ef59585
+  metadata.gz: 722fb9ff31e345a3c2376891e64c2677d6e202fb8c0b96df78c141125879e4f0
+  data.tar.gz: 19cb2da061d984d7e027eaec3636a66a1ec01247e1d34e169395add9e6202e8a
 SHA512:
-  metadata.gz: e2c7ca89a529a1b173ac9cdd097813f342024c0428bac7830a6c0fa2fedc8e2951e6f7eea46bcaadbf85d8a65d5cd53d329c9d3c13abf5b0db0b001f11610bed
-  data.tar.gz: 73a48d081d1f1db44d7b788816ccc4e6c02657cf7e0b3107da11d18e1889bb716810717ab0259cb6385a31dd02b90c6ff8162896998732b97c2936f7f821a85f
+  metadata.gz: ebcdd900052343af6646edce68f7edd62da73a859434047c24cc5f634d5ce2a2b72005f3ce48a186ad0c972cf0a7924882c8443936e683d8b4ba50332cfe3da6
+  data.tar.gz: 87aa9d6997d2b0449938ce5c34b15bcd9ad4d2569882412571c7cd048b1c68f9d02013acf80341ba59a4d63d50c130821ada32398e52f94d7dfdbdeeb688b72f

data/Rakefile

@@ -1,15 +1,11 @@
+# frozen_string_literal: true
+
 begin
-  require 'bundler/setup'
+  require "bundler/setup"
 rescue LoadError
-  puts 'You must `gem install bundler` and `bundle install` to run rake tasks'
+  puts "You must `gem install bundler` and `bundle install` to run rake tasks"
 end
 
-APP_RAKEFILE = File.expand_path("spec/dummy/Rakefile", __dir__)
-load 'rails/tasks/engine.rake'
-load 'rails/tasks/statistics.rake'
-
-require 'bundler/gem_tasks'
+require "bundler/gem_tasks"
 
 Dir["private/tasks/*.rake"].each(&method(:load))
-
-task default: :test

data/app/pb_kits/playbook/_reset.scss

@@ -0,0 +1,42 @@
+@import "./tokens/typography";
+@import "./tokens/colors";
+
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  &:before,
+  &:after {
+    box-sizing: border-box;
+  }
+}
+
+html {
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  height: 100vh;
+  overflow-x: hidden;
+}
+
+body {
+  font-family: $font_family_base;
+  font-size: $font_base;
+  line-height: 1.5;
+  background-color: $bg-light;
+  height: 100%;
+  letter-spacing: $lspace_normal;
+  font-weight: $regular;
+  font-style: normal;
+  text-rendering: optimizeLegibility;
+  -moz-font-feature-settings: "liga" on;
+  color: $charcoal;
+  margin: 0 !important;
+  padding: 0 !important;
+  box-sizing: border-box;
+  min-height: 100vh;
+  padding: 50px; // REMOVE AFTER STYLED
+}
+
+a {
+  text-decoration: none;
+  color: $primary;
+}

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

@@ -1,6 +1,10 @@
 kits:
-  - avatar
-  - avatar_action_button
+  - avatars:
+    - avatar
+    - avatar_action_button
+    - multiple_users
+    - multiple_users_stacked
+    - user
   - background
   - bread_crumbs
   - buttons:
@@ -19,7 +23,6 @@ kits:
   - dialog
   - filter
   - fixed_confirmation_toast
-  - flex
   - forms:
     - checkbox
     - date_picker
@@ -37,19 +40,19 @@ kits:
     - selectable_list
     - text_input
     - textarea
-    - typeahead
     - toggle
+    - typeahead
   - highlight
   - icon
   - icon_circle
   - icon_stat_value
   - icon_value
   - image
-  - layout
+  - layouts:
+    - flex
+    - layout
   - list
   - loading_inline
-  - multiple_users
-  - multiple_users_stacked
   - nav
   - tags:
     - badge
@@ -61,11 +64,22 @@ kits:
     - progress_simple
     - progress_step
   - section_separator
-  - source
   - star_rating
-  - stat_change
   - table
   - timeline
+  - time_and_date:
+    - date
+    - date_range_inline
+    - date_range_stacked
+    - date_stacked
+    - date_time
+    - date_time_stacked
+    - date_year_stacked
+    - time
+    - time_range_inline
+    - time_stacked
+    - timestamp
+    - weekday_stacked
   - tooltip
   - typography:
     - body
@@ -75,26 +89,15 @@ kits:
     - contact
     - currency
     - dashboard_value
-    - date
-    - date_range_inline
-    - date_range_stacked
-    - date_stacked
-    - date_time
-    - date_time_stacked
-    - date_year_stacked
     - home_address_street
     - label_pill
     - label_value
     - message
     - person
     - person_contact
+    - source
+    - stat_change
     - stat_value
-    - time
-    - time_stacked
-    - timestamp
-    - time_range_inline
     - title_count
     - title_detail
-    - weekday_stacked
-  - user
   - user_badge

data/app/pb_kits/playbook/index.js

@@ -4,103 +4,103 @@ import 'lazysizes/plugins/attrchange/ls.attrchange'
 import 'lazysizes'
 
 // vvv React Component JSX Imports from the React Kits vvv
-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'
-export BreadCrumbs from './pb_bread_crumbs/_bread_crumbs.jsx'
-export Button from './pb_button/_button.jsx'
-export ButtonToolbar from './pb_button_toolbar/_button_toolbar.jsx'
-export Caption from './pb_caption/_caption.jsx'
-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'
-export Date from './pb_date/_date.jsx'
-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 Dialog from './pb_dialog/_dialog.jsx'
-export DistributionBar from './pb_distribution_bar/_distribution_bar.jsx'
-export FileUpload from './pb_file_upload/_file_upload.jsx'
-export Filter from './pb_filter/_filter.jsx'
-export FixedConfirmationToast from './pb_fixed_confirmation_toast/_fixed_confirmation_toast.jsx'
-export Flex from './pb_flex/_flex.jsx'
-export FlexItem from './pb_flex/_flex_item.jsx'
-export FormGroup from './pb_form_group/_form_group.jsx'
-export FormPill from './pb_form_pill/_form_pill.jsx'
-export Gauge from './pb_gauge/_gauge.jsx'
-export Hashtag from './pb_hashtag/_hashtag.jsx'
-export Highlight from './pb_highlight/_highlight.jsx'
-export HomeAddressStreet from './pb_home_address_street/_home_address_street.jsx'
-export Icon from './pb_icon/_icon.jsx'
-export IconCircle from './pb_icon_circle/_icon_circle.jsx'
-export IconStatValue from './pb_icon_stat_value/_icon_stat_value.jsx'
-export IconValue from './pb_icon_value/_icon_value.jsx'
-export Image from './pb_image/_image.jsx'
-export LabelPill from './pb_label_pill/_label_pill.jsx'
-export LabelValue from './pb_label_value/_label_value.jsx'
-export Layout from './pb_layout/_layout.jsx'
-export Legend from './pb_legend/_legend.jsx'
-export LineGraph from './pb_line_graph/_line_graph.jsx'
-export List from './pb_list/_list.jsx'
-export ListItem from './pb_list/_list_item.jsx'
-export LoadingInline from './pb_loading_inline/_loading_inline.jsx'
-export Message from './pb_message/_message.jsx'
-export MultipleUsers from './pb_multiple_users/_multiple_users.jsx'
-export MultipleUsersStacked from './pb_multiple_users_stacked/_multiple_users_stacked.jsx'
-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'
-export Pill from './pb_pill/_pill.jsx'
-export ProgressPills from './pb_progress_pills/_progress_pills.jsx'
-export ProgressSimple from './pb_progress_simple/_progress_simple.jsx'
-export ProgressStep from './pb_progress_step/_progress_step.jsx'
-export ProgressStepItem from './pb_progress_step/_progress_step_item.jsx'
-export Radio from './pb_radio/_radio.jsx'
-export RichTextEditor from './pb_rich_text_editor/_rich_text_editor.jsx'
-export SectionSeparator from './pb_section_separator/_section_separator.jsx'
-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'
-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 TextInput from './pb_text_input/_text_input.jsx'
-export Textarea from './pb_textarea/_textarea.jsx'
-export Time from './pb_time/_time.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 Title from './pb_title/_title.jsx'
-export TitleCount from './pb_title_count/_title_count.jsx'
-export TitleDetail from './pb_title_detail/_title_detail.jsx'
-export Toggle from './pb_toggle/_toggle.jsx'
-export Typeahead from './pb_typeahead/_typeahead.jsx'
-export User from './pb_user/_user.jsx'
-export UserBadge from './pb_user_badge/_user_badge.jsx'
-export WeekdayStacked from './pb_weekday_stacked/_weekday_stacked.jsx'
+export Avatar from './pb_avatar/_avatar'
+export AvatarActionButton from './pb_avatar_action_button/_avatar_action_button'
+export Background from './pb_background/_background'
+export Badge from './pb_badge/_badge'
+export BarGraph from './pb_bar_graph/_bar_graph'
+export Body from './pb_body/_body'
+export BreadCrumbs from './pb_bread_crumbs/_bread_crumbs'
+export Button from './pb_button/_button'
+export ButtonToolbar from './pb_button_toolbar/_button_toolbar'
+export Caption from './pb_caption/_caption'
+export Card from './pb_card/_card'
+export Checkbox from './pb_checkbox/_checkbox'
+export CircleChart from './pb_circle_chart/_circle_chart'
+export CircleIconButton from './pb_circle_icon_button/_circle_icon_button'
+export Collapsible from './pb_collapsible/_collapsible'
+export Contact from './pb_contact/_contact'
+export Currency from './pb_currency/_currency'
+export DashboardValue from './pb_dashboard_value/_dashboard_value'
+export Date from './pb_date/_date'
+export DatePicker from './pb_date_picker/_date_picker'
+export DateRangeInline from './pb_date_range_inline/_date_range_inline'
+export DateRangeStacked from './pb_date_range_stacked/_date_range_stacked'
+export DateStacked from './pb_date_stacked/_date_stacked'
+export DateTime from './pb_date_time/_date_time'
+export DateTimeStacked from './pb_date_time_stacked/_date_time_stacked'
+export DateYearStacked from './pb_date_year_stacked/_date_year_stacked'
+export Dialog from './pb_dialog/_dialog'
+export DistributionBar from './pb_distribution_bar/_distribution_bar'
+export FileUpload from './pb_file_upload/_file_upload'
+export Filter from './pb_filter/_filter'
+export FixedConfirmationToast from './pb_fixed_confirmation_toast/_fixed_confirmation_toast'
+export Flex from './pb_flex/_flex'
+export FlexItem from './pb_flex/_flex_item'
+export FormGroup from './pb_form_group/_form_group'
+export FormPill from './pb_form_pill/_form_pill'
+export Gauge from './pb_gauge/_gauge'
+export Hashtag from './pb_hashtag/_hashtag'
+export Highlight from './pb_highlight/_highlight'
+export HomeAddressStreet from './pb_home_address_street/_home_address_street'
+export Icon from './pb_icon/_icon'
+export IconCircle from './pb_icon_circle/_icon_circle'
+export IconStatValue from './pb_icon_stat_value/_icon_stat_value'
+export IconValue from './pb_icon_value/_icon_value'
+export Image from './pb_image/_image'
+export LabelPill from './pb_label_pill/_label_pill'
+export LabelValue from './pb_label_value/_label_value'
+export Layout from './pb_layout/_layout'
+export Legend from './pb_legend/_legend'
+export LineGraph from './pb_line_graph/_line_graph'
+export List from './pb_list/_list'
+export ListItem from './pb_list/_list_item'
+export LoadingInline from './pb_loading_inline/_loading_inline'
+export Message from './pb_message/_message'
+export MultipleUsers from './pb_multiple_users/_multiple_users'
+export MultipleUsersStacked from './pb_multiple_users_stacked/_multiple_users_stacked'
+export Nav from './pb_nav/_nav'
+export NavItem from './pb_nav/_item'
+export OnlineStatus from './pb_online_status/_online_status'
+export Passphrase from './pb_passphrase/_passphrase'
+export PbReactPopover from './pb_popover/_popover'
+export Person from './pb_person/_person'
+export PersonContact from './pb_person_contact/_person_contact'
+export Pill from './pb_pill/_pill'
+export ProgressPills from './pb_progress_pills/_progress_pills'
+export ProgressSimple from './pb_progress_simple/_progress_simple'
+export ProgressStep from './pb_progress_step/_progress_step'
+export ProgressStepItem from './pb_progress_step/_progress_step_item'
+export Radio from './pb_radio/_radio'
+export RichTextEditor from './pb_rich_text_editor/_rich_text_editor'
+export SectionSeparator from './pb_section_separator/_section_separator'
+export Select from './pb_select/_select'
+export SelectableCard from './pb_selectable_card/_selectable_card'
+export SelectableCardIcon from './pb_selectable_card_icon/_selectable_card_icon'
+export SelectableIcon from './pb_selectable_icon/_selectable_icon'
+export SelectableList from './pb_selectable_list/_selectable_list'
+export SelectableListItem from './pb_selectable_list/_item'
+export Source from './pb_source/_source'
+export StarRating from './pb_star_rating/_star_rating'
+export StatChange from './pb_stat_change/_stat_change'
+export StatValue from './pb_stat_value/_stat_value'
+export Table from './pb_table/_table'
+export TableRow from './pb_table/_table_row'
+export TextInput from './pb_text_input/_text_input'
+export Textarea from './pb_textarea/_textarea'
+export Time from './pb_time/_time'
+export TimeRangeInline from './pb_time_range_inline/_time_range_inline'
+export TimeStacked from './pb_time_stacked/_time_stacked'
+export Timeline from './pb_timeline/_timeline'
+export Timestamp from './pb_timestamp/_timestamp'
+export Title from './pb_title/_title'
+export TitleCount from './pb_title_count/_title_count'
+export TitleDetail from './pb_title_detail/_title_detail'
+export Toggle from './pb_toggle/_toggle'
+export Typeahead from './pb_typeahead/_typeahead'
+export User from './pb_user/_user'
+export UserBadge from './pb_user_badge/_user_badge'
+export WeekdayStacked from './pb_weekday_stacked/_weekday_stacked'
 // ^^^ React Component JSX Imports from the React Kits ^^^
 
 // Dashboard Settings

data/app/pb_kits/playbook/pb_badge/_badge.jsx

@@ -3,6 +3,7 @@
 import React from 'react'
 import classnames from 'classnames'
 import { globalProps } from '../utilities/globalProps.js'
+import { Icon } from '../'
 
 import {
   buildAriaProps,
@@ -13,8 +14,15 @@ import {
 type BadgeProps = {
   aria?: object,
   className?: string,
+  closeProps?: {
+    onClick?: EventHandler,
+    onMouseDown?: EventHandler,
+    onTouchEnd?: EventHandler,
+  },
   data?: object,
   id?: string,
+  removeIcon?: Boolean,
+  removeOnClick?: EventHandler,
   rounded?: boolean,
   text?: string,
   variant?: "error" | "info" | "neutral" | "primary" | "success" | "warning",
@@ -23,8 +31,11 @@ const Badge = (props: BadgeProps) => {
   const {
     aria = {},
     className,
+    closeProps = {},
     data = {},
     id,
+    removeIcon = false,
+    removeOnClick = () => {},
     rounded = false,
     text,
     variant = 'neutral',
@@ -44,7 +55,21 @@ const Badge = (props: BadgeProps) => {
         className={css}
         id={id}
     >
-      <span>{text}</span>
+      <span>
+        {text}
+        <If condition={removeIcon}>
+          <span
+              onClick={removeOnClick}
+              style={{ cursor: 'pointer' }}
+              {...closeProps}
+          >
+            <Icon
+                fixedWidth
+                icon="times"
+            />
+          </span>
+        </If>
+      </span>
     </div>
   )
 }

data/app/pb_kits/playbook/pb_badge/_badge.scss

@@ -15,9 +15,9 @@
   border-width: 1px;
   border-style: solid;
   border-color: $card_light;
+  white-space: nowrap;
 
   span {
-    transform: translateY(1px);
     display: inline-block;
     font-size: $font_smaller - 1;
     font-weight: $bolder;

data/app/pb_kits/playbook/pb_date_picker/_date_picker.jsx

@@ -25,6 +25,8 @@ type DatePickerProps = {
   id?: String,
   inputAria?: object,
   inputData?: object,
+  inputOnChange?: (String) => void,
+  inputValue?: any,
   label?: String,
   maxDate: String,
   minDate: String,
@@ -55,6 +57,8 @@ const DatePicker = (props: DatePickerProps) => {
     id,
     inputAria,
     inputData,
+    inputOnChange,
+    inputValue,
     label = 'Date Picker',
     maxDate,
     minDate,
@@ -114,7 +118,6 @@ const DatePicker = (props: DatePickerProps) => {
         className={classes}
         id={id}
     >
-      {className}
       <div className="input_wrapper">
         <TextInput
             aria={inputAria}
@@ -126,7 +129,9 @@ const DatePicker = (props: DatePickerProps) => {
             id={pickerId}
             label={hideLabel ? null : label}
             name={name}
+            onChange={inputOnChange}
             placeholder={placeholder}
+            value={inputValue}
         />
         <If condition={!hideIcon}>
           <div