playbook_ui 4.14.0 → 4.15.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 0e529c840f659aace42862d67f6579c6fa9f1fc952960381374b8b005ff41b95
-  data.tar.gz: 53c5c3676212e699d5c232fc6d4bc59ea3ab10a97335d08e7dc0e4e139a8859f
+  metadata.gz: 8d06b43573e33c771eb3617100802fa3e8ad15bf58f7037c233725df32d4e447
+  data.tar.gz: 005256edb667970f313898e57ede8d2f50cbe9222fd99007a318808e075f3e23
 SHA512:
-  metadata.gz: 92e483f7ec5633610f6180f3d1cf8740f9fae2d128c9db1a17ae8ac55a352a19f358ad32104236f8dcbe9ccd370f40a57c3a63b2b7587a200c95f8d00500dc76
-  data.tar.gz: 4707de050cf746dd9d82db1cc36cdc1bdf03a8a2653510e2785b324491ddbb1c462faea3053d4ba0d4e65c99f20bf609db0e76a16a3e851518ad58797af6c283
+  metadata.gz: 33b0a8f35f696aed191bae44c33aa4686864ba89ac73473b88cd749e30d6cc792a7d4fedff7b413857b7ddd3c22959b68df5b34884c0ffe92e6ec319b0af8c2d
+  data.tar.gz: 1070e81eb6faefd83fe85fa725534a8d5ad2ee16f17fb1b9b920433d045a75e09040a85ac64f33c3789d89de1b4dbb332355950f0289914a9acd65a6b8dc19e7

data/app/pb_kits/playbook/_playbook.scss

@@ -50,6 +50,7 @@
 @import 'pb_popover/popover';
 @import 'pb_progress_pills/progress_pills';
 @import 'pb_progress_simple/progress_simple';
+@import 'pb_progress_step/progress_step';
 @import 'pb_radio/radio';
 @import 'pb_section_separator/section_separator';
 @import 'pb_select/select';
@@ -67,6 +68,7 @@
 @import 'pb_title_count/title_count';
 @import 'pb_title_detail/title_detail';
 @import 'pb_toggle/toggle';
+@import 'pb_tooltip/tooltip';
 @import 'pb_typeahead/typeahead';
 @import 'pb_user/user';
 @import 'pb_user_badge/user_badge';

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

@@ -48,11 +48,13 @@ kits:
   - popover
   - progress_pills
   - progress_simple
+  - progress_step
   - section_separator
   - source
   - star_rating
   - stat_change
   - table
+  - tooltip
   - typography:
     - body
     - caption

data/app/pb_kits/playbook/index.js

@@ -52,6 +52,7 @@ 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 Radio from './pb_radio/_radio.jsx'
 export SectionSeparator from './pb_section_separator/_section_separator.jsx'
 export Select from './pb_select/_select.jsx'
@@ -66,10 +67,11 @@ export Textarea from './pb_textarea/_textarea.jsx'
 export TextInput from './pb_text_input/_text_input.jsx'
 export Time from './pb_time/_time.jsx'
 export TimeStacked from './pb_time_stacked/_time_stacked.jsx'
-export TimeStamp from './pb_timestamp/_timestamp.jsx'
+export Timestamp from './pb_timestamp/_timestamp.jsx'
 export TimeRangeInline from './pb_time_range_inline/_time_range_inline.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 User from './pb_user/_user.jsx'
 export UserBadge from './pb_user_badge/_user_badge.jsx'
@@ -86,3 +88,4 @@ export pbChart from './plugins/pb_chart.js'
 export PbTypeahead from './pb_typeahead'
 export PbPopover from './pb_popover'
 export PbTable from './pb_table'
+export PbTooltip from './pb_tooltip'

data/app/pb_kits/playbook/packs/examples.js

@@ -63,6 +63,7 @@ import * as PersonContact from 'pb_person_contact/docs'
 import * as Pill from 'pb_pill/docs'
 import * as ProgressPills from 'pb_progress_pills/docs'
 import * as ProgressSimple from 'pb_progress_simple/docs'
+import * as ProgressStep from 'pb_progress_step/docs'
 import * as Radio from 'pb_radio/docs'
 import * as SectionSeparator from 'pb_section_separator/docs'
 import * as Select from 'pb_select/docs'
@@ -137,6 +138,7 @@ WebpackerReact.setup({
   ...Pill,
   ...ProgressPills,
   ...ProgressSimple,
+  ...ProgressStep,
   ...Radio,
   ...SectionSeparator,
   ...Select,

data/app/pb_kits/playbook/packs/kits/pb_progress_step.js

@@ -0,0 +1,2 @@
+import '../../pb_progress_step/_progress_step.jsx'
+

data/app/pb_kits/playbook/pb_button/_button.jsx

@@ -3,6 +3,8 @@
 import React from 'react'
 import classnames from 'classnames'
 
+import Icon from '../pb_icon/_icon.jsx'
+
 type EventHandler = (SyntheticInputEvent<HTMLInputElement>) => void
 type ButtonPropTypes = {
   aria?: {
@@ -83,7 +85,13 @@ const Button = (props: ButtonPropTypes) => {
   const buttonAria = buttonAriaProps(props)
   const css = classnames(buttonClassName(props), className)
   const loadingIcon = (
-    <i className="pb_icon_kit far fa-spinner fa-fw fa-pulse loading-icon" />
+    <div className="loading-icon">
+      <Icon
+          fixedWidth
+          icon="spinner"
+          pulse
+      />
+    </div>
   )
 
   const content = (

data/app/pb_kits/playbook/pb_contact/_contact.jsx

@@ -9,6 +9,7 @@ const contactTypeMap = {
   'cell': 'mobile',
   'home': 'phone',
   'work': 'phone-office',
+  'work-cell': 'phone-laptop',
   'email': 'envelope',
   'wrong number': 'slash-phone',
 }

data/app/pb_kits/playbook/pb_contact/contact.rb

@@ -28,6 +28,8 @@ module Playbook
           "phone-office"
         when "email"
           "envelope"
+        when "work-cell"
+          "phone-laptop"
         when "wrong-phone"
           "phone-slash"
         else # "unknown" || "other"

data/app/pb_kits/playbook/pb_contact/docs/_contact_default.html.erb

@@ -16,3 +16,8 @@
   contact_type: "wrong number",
   contact_value: "3245627482",
 }) %>
+
+<%= pb_rails("contact", props: {
+  contact_type: "work-cell",
+  contact_value: "349-185-9988",
+}) %>

data/app/pb_kits/playbook/pb_contact/docs/_contact_default.jsx

@@ -19,6 +19,10 @@ const ContactDefault = () => {
           contactType="work"
           contactValue="3245627482"
       />
+      <Contact
+          contactType="work-cell"
+          contactValue="3245627482"
+      />
     </div>
   )
 }

data/app/pb_kits/playbook/pb_contact/docs/_contact_with_detail.html.erb

@@ -14,3 +14,9 @@
   contact_value: "3245627482",
   contact_detail: "Work",
 }) %>
+
+<%= pb_rails("contact", props: {
+  contact_type: "work-cell",
+  contact_value: "3245627482",
+  contact_detail: "Work-Cell",
+}) %>

data/app/pb_kits/playbook/pb_contact/docs/_contact_with_detail.jsx

@@ -18,6 +18,11 @@ const ContactDefault = () => {
           contactType="work"
           contactValue="3245627482"
       />
+      <Contact
+          contactDetail="Work-Cell"
+          contactType="work-cell"
+          contactValue="3245627482"
+      />
     </div>
   )
 }

data/app/pb_kits/playbook/pb_date_year_stacked/_date_year_stacked.jsx

@@ -12,7 +12,7 @@ import {
 } from '../'
 
 type DateYearStackedProps = {
-  align?: 'center' | 'right',
+  align?: 'left' | 'center' | 'right',
   className?: String | Array<String>,
   dark?: Boolean,
   data?: String,
@@ -21,7 +21,7 @@ type DateYearStackedProps = {
 }
 
 const DateYearStacked = ({
-  align,
+  align = 'left',
   className,
   dark = false,
   date,

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

@@ -0,0 +1,56 @@
+/* @flow */
+
+import React from 'react'
+import { isEmpty, map, omitBy } from 'lodash'
+import { Caption, Title } from '../../'
+
+export type FilterDescription = {
+  [key: string]: ?string | boolean,
+}
+
+export type CurrentFiltersProps = {
+  filters: FilterDescription,
+}
+
+const hiddenFilters = (value) => isEmpty(value) && value !== true
+
+const CurrentFilters = ({ filters }: CurrentFiltersProps) => {
+  const displayableFilters = omitBy(filters, hiddenFilters)
+
+  return (
+    <div className="maskContainer">
+      <If condition={!isEmpty(filters)}>
+        <div className="filters">
+          <div className="left_gradient" />
+          {map(displayableFilters, (value, name) => (
+            <div
+                className="filter"
+                key={`filter-${name}`}
+            >
+              <Choose>
+                <When condition={value === true}>
+                  <Title
+                      size={4}
+                      tag="h4"
+                      text={name}
+                  />
+                </When>
+                <Otherwise>
+                  <Caption text={name} />
+                  <Title
+                      size={4}
+                      tag="h4"
+                      text={value}
+                  />
+                </Otherwise>
+              </Choose>
+            </div>
+          ))}
+          <div className="right_gradient" />
+        </div>
+      </If>
+    </div>
+  )
+}
+
+export default CurrentFilters

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

@@ -0,0 +1,26 @@
+/* @flow */
+
+import React, { Node } from 'react'
+import { Card } from '../../'
+
+type FilterBackgroundProps = {
+  background: boolean,
+  className: string,
+  children: Node,
+}
+const FilterBackground = ({ background = true, className, children }: FilterBackgroundProps) => (
+  <div className={`pb_filter_kit ${className}`}>
+    <Choose>
+      <When condition={background}>
+        <Card padding="none">
+          {children}
+        </Card>
+      </When>
+      <Otherwise>
+        {children}
+      </Otherwise>
+    </Choose>
+  </div>
+)
+
+export default FilterBackground

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

@@ -0,0 +1,58 @@
+/* @flow */
+
+import React from 'react'
+import { Caption, Flex, SectionSeparator } from '../../'
+
+import CurrentFilters, { FilterDescription } from './CurrentFilters'
+import FilterBackground, { FilterBackgroundProps } from './FilterBackground'
+import FiltersPopover from './FiltersPopover'
+import ResultsCount from './ResultsCount'
+import SortMenu, { SortingChangeCallback, SortOptions, SortValue } from './SortMenu'
+
+export type FilterDoubleProps = {
+  children: Node,
+  filters?: FilterDescription,
+  onSortChange: SortingChangeCallback,
+  results?: number,
+  sortOptions: SortOptions,
+  sortValue?: SortValue,
+} & FilterBackgroundProps
+
+const FilterDouble = ({ onSortChange, sortOptions, sortValue, filters, results, children, ...bgProps }: FilterDoubleProps) => (
+  <FilterBackground {...bgProps}>
+    <Flex
+        orientation="row"
+        vertical="center"
+    >
+      <FiltersPopover>
+        {children}
+      </FiltersPopover>
+      <CurrentFilters filters={filters} />
+    </Flex>
+    <SectionSeparator />
+    <Flex
+        className="filter-bottom"
+        orientation="row"
+        spacing="between"
+        vertical="center"
+    >
+      <ResultsCount
+          results={results}
+          title
+      />
+      <Flex
+          orientation="row"
+          vertical="center"
+      >
+        <Caption text="sort by:" />
+        <SortMenu
+            onChange={onSortChange}
+            options={sortOptions}
+            value={sortValue}
+        />
+      </Flex>
+    </Flex>
+  </FilterBackground>
+)
+
+export default FilterDouble

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

@@ -0,0 +1,46 @@
+/* @flow */
+
+import React from 'react'
+import { isEmpty } from 'lodash'
+import { Flex } from '../../'
+
+import CurrentFilters, { FilterDescription } from './CurrentFilters'
+import FilterBackground, { FilterBackgroundProps } from './FilterBackground'
+import FiltersPopover from './FiltersPopover'
+import ResultsCount from './ResultsCount'
+import SortMenu, { SortingChangeCallback, SortOptions, SortValue } from './SortMenu'
+
+export type FilterSingleProps = {
+  children?: Node,
+  filters?: FilterDescription,
+  onSortChange?: SortingChangeCallback,
+  results?: number,
+  sortOptions?: SortOptions,
+  sortValue?: SortValue,
+} & FilterBackgroundProps
+
+const FilterSingle = ({ onSortChange, sortOptions, sortValue, filters, results, children, ...bgProps }: FilterSingleProps) => (
+  <FilterBackground {...bgProps}>
+    <Flex
+        orientation="row"
+        vertical="center"
+    >
+      <If condition={children}>
+        <FiltersPopover>
+          {children}
+        </FiltersPopover>
+        <CurrentFilters filters={filters} />
+      </If>
+      <ResultsCount results={results} />
+      <If condition={!isEmpty(sortOptions)}>
+        <SortMenu
+            onChange={onSortChange}
+            options={sortOptions}
+            value={sortValue}
+        />
+      </If>
+    </Flex>
+  </FilterBackground>
+)
+
+export default FilterSingle

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

@@ -0,0 +1,37 @@
+/* @flow */
+
+import React, { Node, useState } from 'react'
+import { CircleIconButton, PbReactPopover } from '../../'
+
+const FiltersPopoverProps = { children: Node }
+const FiltersPopover = ({ children }: FiltersPopoverProps) => {
+  const [hide, updateHide] = useState(true)
+  const toggle = () => updateHide(!hide)
+
+  const filterButton = (
+    <CircleIconButton
+        icon="filter"
+        id="filter"
+        onClick={toggle}
+        text="filter"
+        variant="secondary"
+    />
+  )
+
+  return (
+    <PbReactPopover
+        closeOnClick="outside"
+        offset
+        placement="bottom"
+        reference={filterButton}
+        shouldClosePopover={updateHide}
+        show={!hide}
+    >
+      <div className="pb-form">
+        {children}
+      </div>
+    </PbReactPopover>
+  )
+}
+
+export default FiltersPopover

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

@@ -0,0 +1,34 @@
+/* @flow */
+
+import React from 'react'
+import { Caption, TitleCount } from '../../'
+
+const resultsText = (results: number): string => results == 1 ? 'Result' : 'Results'
+
+type ResultsCountProps = {
+  results?: ?number,
+  title?: boolean,
+}
+const ResultsCount = ({ results, title }: ResultsCountProps) => (
+  <Choose>
+    <When condition={results && title}>
+      <TitleCount
+          align="center"
+          count={results}
+          title={`${resultsText(results)}:`}
+      />
+    </When>
+    <When condition={results}>
+      <Caption
+          className="filter-results"
+          size="xs"
+          text={`${results} ${resultsText(results)}`}
+      />
+    </When>
+    <Otherwise>
+      <div />
+    </Otherwise>
+  </Choose>
+)
+
+export default ResultsCount

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

@@ -0,0 +1,85 @@
+/* @flow */
+
+import React, { useState } from 'react'
+import { find, map, partial } from 'lodash'
+import { Button, Icon, List, ListItem, PbReactPopover } from '../../'
+
+export type Direction = 'asc' | 'desc'
+export type SortOptions = { [name: string]: string }
+export type SortValue = { name: string, dir: Direction }
+export type SortingChangeCallback = (SortValue[]) => void
+
+const nextValue = (value: SortValue[], name: string): Direction => {
+  const current = find(value, { name })
+  return {
+    name,
+    dir: current && current.dir == 'asc' ? 'desc' : 'asc',
+  }
+}
+
+const directionIcon = (dir: Direction) => (
+  dir == 'asc' ? 'sort-amount-up' : 'sort-amount-down'
+)
+
+const renderOptions = (options: SortOptions, value: SortValue[], handleChange: (SortValue) => void) => (
+  map(options, (label, name) => {
+    const next = nextValue(value, name)
+    return (
+      <ListItem key={`option-${next.name}-${next.dir}`}>
+        <Button
+            icon={directionIcon(next.dir)}
+            onClick={partial(handleChange, next)}
+            text={` ${label}`}
+            variant="link"
+        />
+      </ListItem>
+    )
+  })
+)
+
+export type SortMenuProps = {
+  value?: SortValue[],
+  options: SortOptions,
+  onChange: SortingChangeCallback,
+}
+const SortMenu = ({ options, value, onChange }: SortMenuProps) => {
+  const [hide, updateHide] = useState(true)
+  const toggle = () => updateHide(!hide)
+  const handleChange = (value: SortValue) => {
+    updateHide(true)
+    onChange([value])
+  }
+
+  const sortButton = (
+    <Button
+        id="sort-button"
+        onClick={toggle}
+        variant="link"
+    >
+      {map(value, ({ dir, name }) => (
+        <span key={`current-sort-${name}-${dir}`}>
+          <Icon icon={directionIcon(dir)} />
+          {` ${options[name]}`}
+        </span>
+      ))}
+    </Button>
+  )
+
+  return (
+    <PbReactPopover
+        className="pb_filter_sort_menu"
+        closeOnClick="outside"
+        offset
+        placement="bottom"
+        reference={sortButton}
+        shouldClosePopover={updateHide}
+        show={!hide}
+    >
+      <List>
+        {renderOptions(options, value, handleChange)}
+      </List>
+    </PbReactPopover>
+  )
+}
+
+export default SortMenu

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

@@ -0,0 +1,26 @@
+/* @flow */
+
+import React from 'react'
+
+import FilterSingle, { FilterSingleProps } from './FilterSingle'
+import FilterDouble, { FilterDoubleProps } from './FilterDouble'
+
+type FilterProps = FilterSingleProps | FilterDoubleProps & {
+  double?: boolean,
+}
+
+const Filter = ({
+  double = false,
+  ...templateProps
+}: FilterProps) => (
+  <Choose>
+    <When condition={double}>
+      <FilterDouble {...templateProps} />
+    </When>
+    <Otherwise>
+      <FilterSingle {...templateProps} />
+    </Otherwise>
+  </Choose>
+)
+
+export default Filter