playbook_ui 7.6.2.pre.alpha1 → 7.8.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 1d8276e5efd84c6c73212b72adf10a80814e22d0093b730c53abd32253536dce
-  data.tar.gz: '08c66668a20b92f1b125564e583a7378796eb3dbd7b6a4b26c0a8912f58f4424'
+  metadata.gz: 7f1b20f99582094b211e94e5de1f615e7e7948e8e618062e2b77a224d7ffb69b
+  data.tar.gz: 2d3195399d5eb4a17b30f9b9e26c1420ff7cb7263d95fc3e32c2a7800a3f9e58
 SHA512:
-  metadata.gz: 9142a13e427313917314ad4429f09e26e8c64149fc7d044e364bfa29a2ded5832b4e779a6089f97249edf844458bc3d5f7c6cadd0b1bd22671c42138b0fbf175
-  data.tar.gz: f75d162c03bdad07f27791ec047bb48dba310adb11ca2eb1b4d98e02d4e3697d9a339ad7344b655ad0c5de9abe0edefd53dd4524bfcc34797246d072af848d85
+  metadata.gz: 264ab30755326f86f13566ff437797dc37775801c31bee01584c9fc2cc607656cc00f8fb045dea32bf89582b437f2e1efaca4f68c339be12c39b081351b94f8f
+  data.tar.gz: a8fa83550b31847d8739f1248e800305969ff698ea198a05becb7cd5299bc2e3057309ad30be2b3bd7120fec1a6e16c592d0169d281947a5b2bf79090b8ebb9f

data/app/controllers/playbook/application_controller.rb

@@ -8,4 +8,6 @@ module Playbook
     helper Playbook::PbSampleHelper
     append_view_path Playbook::Engine.root + "app/pb_kits"
   end
+
+  
 end

data/app/pb_kits/playbook/_playbook.scss

@@ -38,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';
@@ -60,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';

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

@@ -37,6 +37,7 @@ kits:
   - highlight
   - icon
   - icon_circle
+  - icon_stat_value
   - icon_value
   - image
   - layout
@@ -55,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'
@@ -41,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'
@@ -66,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_background/_background.html.erb

@@ -4,7 +4,7 @@
       data: object.data,
       id: object.id,
       class: object.classname,
-      style: `background-image: url(#{object.image_url});`
+      style: "background-image: url('#{object.image_url}');"
   ) do %>
     <%= capture(&object.children) %>
   <% end %>

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