playbook_ui 7.7.0 → 7.8.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: bdb6b278638df86a70f02f1a672ecca497f3d7e521cd7934faf3af5bd199eb7b
-  data.tar.gz: fce202c0f5e57679bd9c674df0d311a7d253e7e859b954c6ee80820d9f61002d
+  metadata.gz: a1b2724a9674c38dc8b7333163b4a364812c9d02948df68edc906678e3cc02d2
+  data.tar.gz: 42620bbd6d02cbc48a84ee7359166d05737082f1db4dfc63f932b63ee6088e3a
 SHA512:
-  metadata.gz: 26dc1013ada3259e4b8afffb76102e450139a5605ef285969e3a1abbb30ee82474ed5673223da64ed737fbb07b58acd1fcd32f4d4e39e0f9bcc4acfa14d95aa8
-  data.tar.gz: 262c8060f3c940c4d618e06ccae75ff7636d7bb22fee425ab0061f70c8841af0923a8cf4c7441385de1a6e81e880fa6f6c33fc48506ad14521faaf8b9315f9bf
+  metadata.gz: dfa9f90ab38030f7adc33e161c81f6641bd18803ece239413c78a1f07fcf22cc9b3ea860052d5141e2206d2d1b8dcb956cbed1f3220f3815cc1cb767b23b8e48
+  data.tar.gz: 61e543cbc9d6f841ae8d929de14f753509e4c5d99850c3bba4e52ee7f44e059d73a9239b86f5cbd50da11fceb5776cd3e5a9a5a1a2becf1563d7c5a85eff3192

data/app/pb_kits/playbook/_playbook.scss

@@ -29,6 +29,7 @@
 @import 'pb_filter/filter';
 @import 'pb_fixed_confirmation_toast/fixed_confirmation_toast';
 @import 'pb_form/form';
+@import 'pb_form_group/form_group';
 @import 'pb_form_pill/form_pill';
 @import 'pb_flex/flex';
 @import 'pb_gauge/gauge';
@@ -37,6 +38,7 @@
 @import 'pb_home_address_street/home_address_street';
 @import 'pb_icon/icon';
 @import 'pb_icon_circle/icon_circle';
+@import 'pb_icon_stat_value/icon_stat_value';
 @import 'pb_icon_value/icon_value';
 @import 'pb_image/image';
 @import 'pb_label_pill/label_pill';
@@ -59,6 +61,7 @@
 @import 'pb_progress_simple/progress_simple';
 @import 'pb_progress_step/progress_step';
 @import 'pb_radio/radio';
+@import 'pb_rich_text_editor/rich_text_editor';
 @import 'pb_section_separator/section_separator';
 @import 'pb_select/select';
 @import 'pb_selectable_card/selectable_card';
@@ -86,4 +89,3 @@
 @import 'pb_time_stacked/time_stacked';
 @import 'pb_weekday_stacked/weekday_stacked';
 @import './utilities/spacing';
-

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

@@ -22,6 +22,7 @@ kits:
     - date_picker
     - file_upload
     - form
+    - form_group
     - form_pill
     - radio
     - select
@@ -36,6 +37,7 @@ kits:
   - highlight
   - icon
   - icon_circle
+  - icon_stat_value
   - icon_value
   - image
   - layout
@@ -54,6 +56,7 @@ kits:
     - progress_pills
     - progress_simple
     - progress_step
+  - rich_text_editor
   - section_separator
   - source
   - star_rating

data/app/pb_kits/playbook/index.js

@@ -5,7 +5,7 @@ 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 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'
@@ -33,6 +33,7 @@ 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'
@@ -40,6 +41,7 @@ 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'
@@ -65,6 +67,7 @@ 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'

data/app/pb_kits/playbook/pb_avatar/_avatar.jsx

@@ -27,7 +27,7 @@ const firstTwoInitials = (name) =>
     .substring(0, 2)
 
 const Avatar = (props: AvatarProps) => {
-  const { aria = {}, className, data = {}, name = null, id = id, imageUrl, size = 'md', status = null, dark = false } = props
+  const { aria = {}, className, data = {}, name = null, id = '', imageUrl, size = 'md', status = null, dark = false } = props
   const dataProps = buildDataProps(data)
   const ariaProps = buildAriaProps(aria)
   const classes = classnames(

data/app/pb_kits/playbook/pb_avatar/avatar.test.js

@@ -0,0 +1,27 @@
+import React from 'react'
+import { render, screen } from '../utilities/test-utils'
+
+import Avatar from './_avatar'
+
+const imageUrl = 'https://randomuser.me/api/portraits/men/44.jpg',
+  testId = 'tjohnson',
+  name = 'Terry Johnson'
+
+test('loads the given image url and name', () => {
+  render(
+    <Avatar
+        data={{ testid: testId }}
+        imageUrl={imageUrl}
+        name={name}
+    />
+  )
+
+  const kit      = screen.getByTestId(testId)
+  const image    = screen.getByAltText(name)
+  const initials = name.split(/\s/)[0].substr(0, 1) + name.split(/\s/)[1].substr(0, 1)
+
+  expect(kit).toHaveClass('pb_avatar_kit_md')
+  expect(kit).toHaveAttribute('data-initials', initials)
+  expect(image).toHaveAttribute('data-src', imageUrl)
+  expect(image).toHaveAttribute('src', imageUrl)
+})

data/app/pb_kits/playbook/pb_filter/Filter/CurrentFilters.jsx

@@ -9,12 +9,13 @@ export type FilterDescription = {
 }
 
 export type CurrentFiltersProps = {
+  dark: boolean,
   filters: FilterDescription,
 }
 
 const hiddenFilters = (value) => isEmpty(value) && value !== true
 
-const CurrentFilters = ({ filters }: CurrentFiltersProps) => {
+const CurrentFilters = ({ dark, filters }: CurrentFiltersProps) => {
   const displayableFilters = omitBy(filters, hiddenFilters)
 
   return (
@@ -30,14 +31,19 @@ const CurrentFilters = ({ filters }: CurrentFiltersProps) => {
               <Choose>
                 <When condition={value === true}>
                   <Title
+                      dark={dark}
                       size={4}
                       tag="h4"
                       text={name}
                   />
                 </When>
                 <Otherwise>
-                  <Caption text={name} />
+                  <Caption
+                      dark={dark}
+                      text={name}
+                  />
                   <Title
+                      dark={dark}
                       size={4}
                       tag="h4"
                       text={value}

data/app/pb_kits/playbook/pb_filter/Filter/FilterBackground.jsx

@@ -9,15 +9,22 @@ type FilterBackgroundProps = {
   background: boolean,
   className: string,
   children: Node,
+  dark: boolean,
 }
+
 const FilterBackground = (props: FilterBackgroundProps) => {
-  const { background = true, className, children } = props
+  const { background = true, className, children, dark } = props
 
   return (
     <div className={classnames(`pb_filter_kit ${className}`, globalProps(props))}>
       <Choose>
         <When condition={background}>
-          <Card padding="none">{children}</Card>
+          <Card
+              dark={dark}
+              padding="none"
+          >
+            {children}
+          </Card>
         </When>
         <Otherwise>{children}</Otherwise>
       </Choose>

data/app/pb_kits/playbook/pb_filter/Filter/FilterDouble.jsx

@@ -18,18 +18,24 @@ export type FilterDoubleProps = {
   sortValue?: SortValue,
 } & FilterBackgroundProps
 
-const FilterDouble = ({ onSortChange, sortOptions, sortValue, filters, results, children, ...bgProps }: FilterDoubleProps) => (
-  <FilterBackground {...bgProps}>
+const FilterDouble = ({ onSortChange, sortOptions, sortValue, filters, results, children, dark, ...bgProps }: FilterDoubleProps) => (
+  <FilterBackground
+      dark={dark}
+      {...bgProps}
+  >
     <Flex
         orientation="row"
         vertical="center"
     >
-      <FiltersPopover>
+      <FiltersPopover dark={dark}>
         {children}
       </FiltersPopover>
-      <CurrentFilters filters={filters} />
+      <CurrentFilters
+          dark={dark}
+          filters={filters}
+      />
     </Flex>
-    <SectionSeparator />
+    <SectionSeparator dark={dark} />
     <Flex
         className="filter-bottom"
         orientation="row"
@@ -37,6 +43,7 @@ const FilterDouble = ({ onSortChange, sortOptions, sortValue, filters, results,
         vertical="center"
     >
       <ResultsCount
+          dark={dark}
           results={results}
           title
       />
@@ -44,8 +51,12 @@ const FilterDouble = ({ onSortChange, sortOptions, sortValue, filters, results,
           orientation="row"
           vertical="center"
       >
-        <Caption text="sort by:" />
+        <Caption
+            dark={dark}
+            text="sort by:"
+        />
         <SortMenu
+            dark={dark}
             onChange={onSortChange}
             options={sortOptions}
             value={sortValue}

data/app/pb_kits/playbook/pb_filter/Filter/FilterSingle.jsx

@@ -19,21 +19,31 @@ export type FilterSingleProps = {
   sortValue?: SortValue,
 } & FilterBackgroundProps
 
-const FilterSingle = ({ onSortChange, sortOptions, sortValue, filters, results, children, ...bgProps }: FilterSingleProps) => (
-  <FilterBackground {...bgProps}>
+const FilterSingle = ({ onSortChange, sortOptions, sortValue, filters, results, children, dark, ...bgProps }: FilterSingleProps) => (
+  <FilterBackground
+      dark={dark}
+      {...bgProps}
+  >
     <Flex
         orientation="row"
         vertical="center"
     >
       <If condition={children}>
-        <FiltersPopover>
+        <FiltersPopover dark={dark}>
           {children}
         </FiltersPopover>
-        <CurrentFilters filters={filters} />
+        <CurrentFilters
+            dark={dark}
+            filters={filters}
+        />
       </If>
-      <ResultsCount results={results} />
+      <ResultsCount
+          dark={dark}
+          results={results}
+      />
       <If condition={!isEmpty(sortOptions)}>
         <SortMenu
+            dark={dark}
             onChange={onSortChange}
             options={sortOptions}
             value={sortValue}

data/app/pb_kits/playbook/pb_filter/Filter/FiltersPopover.jsx

@@ -4,12 +4,13 @@ import React, { Node, useState } from 'react'
 import { CircleIconButton, PbReactPopover } from '../../'
 
 const FiltersPopoverProps = { children: Node }
-const FiltersPopover = ({ children }: FiltersPopoverProps) => {
+const FiltersPopover = ({ children, dark }: FiltersPopoverProps) => {
   const [hide, updateHide] = useState(true)
   const toggle = () => updateHide(!hide)
 
   const filterButton = (
     <CircleIconButton
+        dark={dark}
         icon="filter"
         id="filter"
         onClick={toggle}

data/app/pb_kits/playbook/pb_filter/Filter/ResultsCount.jsx

@@ -6,21 +6,24 @@ import { Caption, TitleCount } from '../../'
 const resultsText = (results: number): string => results == 1 ? 'Result' : 'Results'
 
 type ResultsCountProps = {
+  dark?: boolean,
   results?: ?number,
   title?: boolean,
 }
-const ResultsCount = ({ results, title }: ResultsCountProps) => (
+const ResultsCount = ({ dark, results, title }: ResultsCountProps) => (
   <Choose>
     <When condition={results && title}>
       <TitleCount
           align="center"
           count={results}
+          dark={dark}
           title={`${resultsText(results)}:`}
       />
     </When>
     <When condition={results}>
       <Caption
           className="filter-results"
+          dark={dark}
           size="xs"
           text={`${results} ${resultsText(results)}`}
       />

data/app/pb_kits/playbook/pb_filter/Filter/SortMenu.jsx

@@ -38,11 +38,12 @@ const renderOptions = (options: SortOptions, value: SortValue[], handleChange: (
 )
 
 export type SortMenuProps = {
-  value?: SortValue[],
-  options: SortOptions,
+  dark?: boolean,
   onChange: SortingChangeCallback,
+  options: SortOptions,
+  value?: SortValue[],
 }
-const SortMenu = ({ options, value, onChange }: SortMenuProps) => {
+const SortMenu = ({ dark, options, value, onChange }: SortMenuProps) => {
   const [hide, updateHide] = useState(true)
   const toggle = () => updateHide(!hide)
   const handleChange = (value: SortValue) => {
@@ -52,13 +53,17 @@ const SortMenu = ({ options, value, onChange }: SortMenuProps) => {
 
   const sortButton = (
     <Button
+        dark={dark}
         id="sort-button"
         onClick={toggle}
         variant="link"
     >
       {map(value, ({ dir, name }) => (
         <span key={`current-sort-${name}-${dir}`}>
-          <Icon icon={directionIcon(dir)} />
+          <Icon
+              dark={dark}
+              icon={directionIcon(dir)}
+          />
           {` ${options[name]}`}
         </span>
       ))}

data/app/pb_kits/playbook/pb_filter/Filter/index.jsx

@@ -1,7 +1,6 @@
 /* @flow */
 
 import React from 'react'
-
 import FilterSingle, { FilterSingleProps } from './FilterSingle'
 import FilterDouble, { FilterDoubleProps } from './FilterDouble'
 

data/app/pb_kits/playbook/pb_filter/_filter.scss

@@ -5,46 +5,54 @@
   li {
     padding: 0 $space_sm !important;
   }
-  [class^=pb_button_kit][class*=_link]{
+
+  [class^=pb_button_kit][class*=_link] {
     flex-shrink:0;
     padding: 0 $space_xs !important;
-    [id^="sort"]{
+    [id^="sort"] {
       margin-left: $space_xs !important;
     }
   }
-  [class^=pb_card_body_kit][class*=_md]{
+
+  [class^=pb_card_body_kit][class*=_md] {
     padding: 0 !important;
   }
 }
 
 [class^=pb_filter_kit] {
-  [class^=pb_circle_icon_button_kit]{
+  [class^=pb_circle_icon_button_kit] {
     padding-left: $space_sm !important;
     padding-top: $space_sm !important;
     padding-bottom: $space_sm !important;
   }
-  [class^=pb-form]{
+
+  [class^=pb-form] {
     padding: $space_sm ;
   }
-   .sort-by{
+
+  .sort-by {
     flex-shrink:0;
     margin-left: $space_xs !important;
   }
-  .filter-results{
+
+  .filter-results {
     margin-left: $space_xs !important;
     margin-right: $space_xs !important;
     flex-shrink:0 !important;
   }
-  .filter-bottom{
+
+  .filter-bottom {
     padding-left: $space_sm !important;
     padding-right: $space_sm !important;
   }
-  .maskContainer{
-      display: flex;
-      overflow-x: hidden;
-      align-items: center;
-      flex-grow: 1;
+
+  .maskContainer {
+    display: flex;
+    overflow-x: hidden;
+    align-items: center;
+    flex-grow: 1;
   }
+
   .filters {
     display: flex;
     flex-shrink: 1;
@@ -54,32 +62,45 @@
     padding-top: $space_md;
     padding-bottom: $space_md;
 
-   &::-webkit-scrollbar{
-       display: none;
-   }
+    &::-webkit-scrollbar {
+      display: none;
+    }
+
     .filter {
       flex: 0 0 auto;
       padding-left: $space_xs;
       padding-right: $space_xs;
       border-right: 1px solid $border_light !important;
     }
+  }
 
-}
-.maskContainer::after {
-    content: " ";
+  .maskContainer::after {
     background-image: linear-gradient(to right, rgba($card_light,.3) , rgba($card_light,1));
+    content: " ";
     height: 48px;
     padding-left: $space_xl;
     margin-left: -$space_lg;
     z-index: 1;
-}
-.maskContainer::before {
+  }
+
+  .maskContainer::before {
+    background-image: linear-gradient(to right, rgba($card_light,.3) , rgba($card_light,1));
     content: " ";
-    background-image: linear-gradient(to left, rgba($card_light,.3) , rgba($card_light,1));
     height: 48px;
     padding-right: $space_sm;
     margin-right: -$space_xs;
     z-index: 1;
-}
+  }
 
+  &[class*=dark] {
+    .filters .filter {
+    border-right: 1px solid $border_dark !important;
+    }
+    .maskContainer::before {
+      opacity:0;
+    }
+    .maskContainer::after {
+      opacity:0;
+    }
+  }
 }