playbook_ui 12.4.0.pre.alpha.map1 → 12.5.0.pre.alpha.filter1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: cfb56ccfe4d074f937f3852aca075561d3c1bfcc5d17dba3387cd7c83d65e2d3
-  data.tar.gz: 782e95a4369e896264d23ed06aa3abd7b51ac4998cf88a0b196964ccdf95c7b5
+  metadata.gz: f38164cc9c607578c2f74686bf2715e8006cffd060879d9c23cc52021e42109e
+  data.tar.gz: 00bdea5c26205ae76a885adc0872c05b36c4965d7736ad60aa685d8cb7ac268c
 SHA512:
-  metadata.gz: e568396ef02503818d31e36846f0bb92c69e0857dd7a7c10b4c8d7de0187cf5adf29c87092f4fc29804efaaa5816e0d08198699843bb6755bedcff83220dd205
-  data.tar.gz: 746452d8c6cffee0eec29e9864283b81d6fc63df8218eee2f5ed5c320916026ca63076f7add17ef57b51a1a0e16dbf600d1ae2dfa5e393e2e4c256c675304bc0
+  metadata.gz: 42f54dad230676a4f4a9546ac425c3cd0e3772540df2b367a811a83c488176461f5253305865d93e50283d482eb0dbe2cb14ca4feb9e4c52f83d4eac7b576875
+  data.tar.gz: b7f08be337b4876fc30ac264aa70332793e463526c1b90ddfc32a4335009e61506d313bd4b246d80c301e0019d3867fffcda77ea526f46c16a2dcd2b321ce487

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

@@ -14,7 +14,7 @@ type DatePickerProps = {
   aria?: {[key: string]: string},
   className?: string,
   dark?: boolean,
-  data?: object,
+  data?: { [key: string]: string },
   defaultDate?: string,
   disableDate?: number[],
   disableInput?: boolean,
@@ -27,8 +27,8 @@ type DatePickerProps = {
   hideLabel?: boolean,
   id?: string,
   inLine?: boolean,
-  inputAria?: object,
-  inputData?: object,
+  inputAria?: {[key: string]: string},
+  inputData?: {[key: string]: string},
   inputOnChange?: (arg: string) => void,
   inputValue?: any,
   label?: string,
@@ -47,7 +47,7 @@ type DatePickerProps = {
   yearRange?: number[],
 } & GlobalProps
 
-const DatePicker = (props: DatePickerProps) => {
+const DatePicker = (props: DatePickerProps): React.ReactElement => {
   if (props.plugins) deprecatedProps('Date Picker', ['plugins'])
 
   const {
@@ -67,7 +67,7 @@ const DatePicker = (props: DatePickerProps) => {
     hideIcon = false,
     hideLabel = false,
     id,
-    inLine = true,
+    inLine = false,
     inputAria,
     inputData,
     inputOnChange,
@@ -77,7 +77,7 @@ const DatePicker = (props: DatePickerProps) => {
     minDate,
     mode = 'single',
     name,
-    onChange = () => {},
+    onChange = () => { void 0 },
     pickerId,
     placeholder = 'Select Date',
     plugins = false,
@@ -163,36 +163,40 @@ const DatePicker = (props: DatePickerProps) => {
             value={inputValue}
         />
 
-        {!hideIcon &&
+        { !hideIcon &&
           <div
-          className={iconWrapperClass()}
-          id={`cal-icon-${pickerId}`}
-      >
-        <Icon
-            className="cal_icon"
-            icon="calendar-alt"
-        />
-      </div>
-        }
-          
-
-        { hideIcon && inLine ? <><div
-          className={iconWrapperClass()}
-          id={`${pickerId}-icon-plus`}
-        >
+              className={iconWrapperClass()}
+              id={`cal-icon-${pickerId}`}
+          >
           <Icon
-            className="date-picker-plus-icon"
-            icon="plus" />
-        </div><div
-          className={iconWrapperClass()}
-          id={`${pickerId}-angle-down`}
-        >
-            <Icon
-              className="angle_down_icon"
-              icon="angle-down" />
-          </div></> : null}
-          
+              className="cal_icon"
+              icon="calendar-alt"
+          />
+        </div>
+        }
 
+        { hideIcon && inLine ? 
+          <div>
+            <div
+                className={iconWrapperClass()}
+                id={`${pickerId}-icon-plus`}
+            >
+              <Icon
+                  className="date-picker-plus-icon"
+                  icon="plus"
+              />
+            </div>
+            <div
+                className={iconWrapperClass()}
+                id={`${pickerId}-angle-down`}
+            >
+                <Icon
+                    className="angle_down_icon"
+                    icon="angle-down" 
+                />
+            </div>
+          </div>  
+        : null }
       </div>
     </div>
   )

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

@@ -0,0 +1,72 @@
+import React from 'react'
+import { isEmpty, map, omitBy } from 'lodash'
+
+import Body from '../../pb_body/_body'
+import Caption from '../../pb_caption/_caption'
+import Title from '../../pb_title/_title'
+
+export type FilterDescription = {
+  [key: string]: string | null | boolean,
+}
+
+export type CurrentFiltersProps = {
+  dark: boolean,
+  filters: FilterDescription,
+}
+
+const hiddenFilters = (value: any) => isEmpty(value) && value !== true
+
+const CurrentFilters = ({ dark, filters }: CurrentFiltersProps): React.ReactElement => {
+  const displayableFilters = omitBy(filters, hiddenFilters)
+
+  return (
+    <div className="maskContainer">
+      { isEmpty(filters) &&
+      <div className="filters">
+        <Body
+            color="light"
+            paddingLeft="xs"
+            size={4}
+            tag="h4"
+            text="No Filter Selected"
+        />
+      </div>
+      }
+      { !isEmpty(filters) &&
+        <div className="filters">
+          <div className="left_gradient" />
+            {map(displayableFilters, (value, name) => (
+              <div
+                  className="filter"
+                  key={`filter-${name}`}
+              >
+                { value === true ? 
+                <Title
+                    dark={dark}
+                    size={4}
+                    tag="h4"
+                    text={name}
+                /> : 
+                <div>
+                  <Caption
+                      dark={dark}
+                      text={name}
+                  />
+                  <Title
+                      dark={dark}
+                      size={4}
+                      tag="h4"
+                      text={value}
+                  />
+                </div>    
+                }
+              </div>
+            ))}
+          <div className="right_gradient" />
+        </div>
+      }
+    </div>
+  )
+}
+
+export default CurrentFilters

data/app/pb_kits/playbook/pb_filter/Filter/{FilterBackground.jsx → FilterBackground.tsx}

@@ -1,35 +1,33 @@
-/* @flow */
-
-import React, { Node } from 'react'
+import React from 'react'
 import classnames from 'classnames'
 
-import { globalProps } from '../../utilities/globalProps'
+import { GlobalProps, globalProps } from '../../utilities/globalProps'
 
 import Card from '../../pb_card/_card'
 
-type FilterBackgroundProps = {
+export type FilterBackgroundProps = {
   background: boolean,
   className: string,
-  children: Node,
+  children?: React.ReactChild[] | React.ReactChild,
   dark: boolean,
-}
+} & GlobalProps
 
-const FilterBackground = (props: FilterBackgroundProps) => {
+const FilterBackground = (props: FilterBackgroundProps): React.ReactElement => {
   const { background = true, className, children, dark } = props
 
   return (
     <div className={classnames(`pb_filter_kit ${className}`, globalProps(props))}>
-      <Choose>
-        <When condition={background}>
+      { background ? 
           <Card
               dark={dark}
               padding="none"
           >
             {children}
-          </Card>
-        </When>
-        <Otherwise>{children}</Otherwise>
-      </Choose>
+          </Card> : 
+          <>
+            {children}
+          </>
+      }
     </div>
   )
 }

data/app/pb_kits/playbook/pb_filter/Filter/{FilterDouble.jsx → FilterDouble.tsx}

@@ -1,5 +1,3 @@
-/* @flow */
-
 import React from 'react'
 
 import CurrentFilters, { FilterDescription } from './CurrentFilters'
@@ -15,13 +13,14 @@ import SortMenu, {
 import Caption from '../../pb_caption/_caption'
 import Flex from '../../pb_flex/_flex'
 import SectionSeparator from '../../pb_section_separator/_section_separator'
+
 export type FilterDoubleProps = {
-  children: Node,
+  children?: React.ReactChild[] | React.ReactChild, 
   filters?: FilterDescription,
-  onSortChange: SortingChangeCallback,
+  onSortChange?: SortingChangeCallback,
   results?: number,
-  sortOptions: SortOptions,
-  sortValue?: SortValue,
+  sortOptions?: SortOptions,
+  sortValue?: SortValue[],
 } & FilterBackgroundProps
 
 const FilterDouble = ({
@@ -35,7 +34,7 @@ const FilterDouble = ({
   minWidth,
   placement,
   ...bgProps
-}: FilterDoubleProps) => (
+}: FilterDoubleProps): React.ReactElement => (
   <FilterBackground
       dark={dark}
       {...bgProps}
@@ -49,7 +48,7 @@ const FilterDouble = ({
           minWidth={minWidth}
           placement={placement}
       >
-        {children}
+          {children}
       </FiltersPopover>
       <CurrentFilters
           dark={dark}

data/app/pb_kits/playbook/pb_filter/Filter/{FilterSingle.jsx → FilterSingle.tsx}

@@ -1,5 +1,3 @@
-/* @flow */
-
 import React from 'react'
 import { isEmpty } from 'lodash'
 
@@ -16,12 +14,12 @@ import SortMenu, {
 } from './SortMenu'
 
 export type FilterSingleProps = {
-  children?: Node,
+  children?: React.ReactChild[] | React.ReactChild, 
   filters?: FilterDescription,
   onSortChange?: SortingChangeCallback,
   results?: number,
   sortOptions?: SortOptions,
-  sortValue?: SortValue,
+  sortValue?: SortValue[],
 } & FilterBackgroundProps
 
 const FilterSingle = ({
@@ -35,7 +33,7 @@ const FilterSingle = ({
   minWidth,
   placement,
   ...bgProps
-}: FilterSingleProps) => {
+}: FilterSingleProps): React.ReactElement => {
   return (
     <FilterBackground
         dark={dark}
@@ -46,31 +44,33 @@ const FilterSingle = ({
           paddingRight="lg"
           vertical="center"
       >
-        <If condition={children}>
-          <FiltersPopover
-              dark={dark}
-              minWidth={minWidth}
-              placement={placement}
-          >
+        { children && 
+          <>
+            <FiltersPopover
+                dark={dark}
+                minWidth={minWidth}
+                placement={placement}
+            >
             {children}
-          </FiltersPopover>
-          <CurrentFilters
-              dark={dark}
-              filters={filters}
-          />
-        </If>
+            </FiltersPopover>
+            <CurrentFilters
+                dark={dark}
+                filters={filters}
+            />
+          </>
+        }
         <ResultsCount
             dark={dark}
             results={results}
         />
-        <If condition={!isEmpty(sortOptions)}>
-          <SortMenu
-              dark={dark}
-              onChange={onSortChange}
-              options={sortOptions}
-              value={sortValue}
-          />
-        </If>
+        { !isEmpty(sortOptions) &&
+            <SortMenu
+                dark={dark}
+                onChange={onSortChange}
+                options={sortOptions}
+                value={sortValue}
+            />
+        }
       </Flex>
     </FilterBackground>
   )

data/app/pb_kits/playbook/pb_filter/Filter/{FiltersPopover.jsx → FiltersPopover.tsx}

@@ -1,12 +1,15 @@
-/* @flow */
-
-import React, { Node, useState } from 'react'
+import React, { ReactNode, useState } from 'react'
 
 import CircleIconButton from '../../pb_circle_icon_button/_circle_icon_button'
 import PbReactPopover from '../../pb_popover/_popover'
 
-const FiltersPopoverProps = { children: Node }
-const FiltersPopover = ({ children, dark, minWidth, placement = "bottom-start" }: FiltersPopoverProps) => {
+type FiltersPopoverProps = { 
+  children?: React.ReactChild[] | React.ReactChild | (({closePopover}: {closePopover: () => void}) =>  ReactNode), 
+  dark?: boolean,
+  minWidth?: string,
+  placement?: "top" | "right" | "bottom" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end",
+}
+const FiltersPopover = ({ children, dark, minWidth, placement = "bottom-start" }: FiltersPopoverProps): React.ReactElement => {
   const [hide, updateHide] = useState(true)
   const toggle = () => updateHide(!hide)
 
@@ -16,7 +19,6 @@ const FiltersPopover = ({ children, dark, minWidth, placement = "bottom-start" }
         icon="filter"
         id="filter"
         onClick={toggle}
-        text="filter"
         variant="secondary"
     />
   )
@@ -30,11 +32,11 @@ const FiltersPopover = ({ children, dark, minWidth, placement = "bottom-start" }
         shouldClosePopover={updateHide}
         show={!hide}
     >
-      <div className="pb-form">
-        {typeof children === 'function'
-          ? children({ closePopover: () => (updateHide(true)) })
-          : children}
-      </div>
+        <div className="pb-form">
+          {typeof children === 'function'
+            ? children({ closePopover: () => (updateHide(true)) })
+            : children}
+        </div>
     </PbReactPopover>
   )
 }

data/app/pb_kits/playbook/pb_filter/Filter/{ResultsCount.jsx → ResultsCount.tsx}

@@ -1,5 +1,3 @@
-/* @flow */
-
 import React from 'react'
 
 import Caption from '../../pb_caption/_caption'
@@ -9,31 +7,58 @@ const resultsText = (results: number): string => results == 1 ? 'Result' : 'Resu
 
 type ResultsCountProps = {
   dark?: boolean,
-  results?: ?number,
+  results?: number | null,
   title?: boolean,
 }
-const ResultsCount = ({ dark, results, title }: ResultsCountProps) => (
-  <Choose>
-    <When condition={results && title}>
+const ResultsCount = ({ dark, results, title }: ResultsCountProps): React.ReactElement => {
+  
+  const resultTitle = () => {
+    return (
       <TitleCount
           align="center"
           count={results}
           dark={dark}
           title={`${resultsText(results)}:`}
       />
-    </When>
-    <When condition={results}>
+    )
+  }
+
+  const justResults = () => {
+    return (
       <Caption
           className="filter-results"
           dark={dark}
           size="xs"
           text={`${results} ${resultsText(results)}`}
       />
-    </When>
-    <Otherwise>
-      <div />
-    </Otherwise>
-  </Choose>
-)
+    )
+  }
+
+  const displayResultsCount = () => {
+    if (results && title) {
+      return (
+        <>
+          {resultTitle()}
+        </>
+      )
+    } else if (results) {
+      return (
+        <>
+          {justResults()}
+        </>
+      )
+    } else {
+      return (
+        <div />
+      )
+    }
+  }
+  
+  return (
+    <>
+      {displayResultsCount()}
+    </>
+  )
+}
 
 export default ResultsCount

data/app/pb_kits/playbook/pb_filter/Filter/{SortMenu.jsx → SortMenu.tsx}

@@ -1,5 +1,3 @@
-/* @flow */
-
 import React, { useState } from 'react'
 import { find, map, partial } from 'lodash'
 
@@ -12,9 +10,9 @@ import PbReactPopover from '../../pb_popover/_popover'
 export type Direction = 'asc' | 'desc'
 export type SortOptions = { [name: string]: string }
 export type SortValue = { name: string, dir: Direction }
-export type SortingChangeCallback = (SortValue[]) => void
+export type SortingChangeCallback = (value: SortValue[]) => void
 
-const nextValue = (value: SortValue[], name: string): Direction => {
+const nextValue = (value: SortValue[], name: string): SortValue => {
   const current = find(value, { name })
   return {
     name,
@@ -26,12 +24,13 @@ const directionIcon = (dir: Direction) => (
   dir == 'asc' ? 'sort-amount-up' : 'sort-amount-down'
 )
 
-const renderOptions = (options: SortOptions, value: SortValue[], handleChange: (SortValue) => void) => (
+const renderOptions = (options: SortOptions, value: SortValue[], handleChange: (arg0: SortValue) => void) => (
   map(options, (label, name) => {
     const next = nextValue(value, name)
     return (
       <ListItem key={`option-${next.name}-${next.dir}`}>
         <Button
+            htmlType={undefined}
             onClick={partial(handleChange, next)}
             text={` ${label}`}
             variant="link"
@@ -47,7 +46,7 @@ export type SortMenuProps = {
   options: SortOptions,
   value?: SortValue[],
 }
-const SortMenu = ({ dark, options, value, onChange }: SortMenuProps) => {
+const SortMenu = ({ dark, options, value, onChange }: SortMenuProps): React.ReactElement => {
   const [hide, updateHide] = useState(true)
   const toggle = () => updateHide(!hide)
   const handleChange = (value: SortValue) => {
@@ -58,6 +57,7 @@ const SortMenu = ({ dark, options, value, onChange }: SortMenuProps) => {
   const sortButton = (
     <Button
         dark={dark}
+        htmlType={undefined}
         id="sort-button"
         onClick={toggle}
         paddingRight="none"

data/app/pb_kits/playbook/pb_filter/Filter/{index.jsx → index.tsx}

@@ -1,5 +1,3 @@
-/* @flow */
-
 import React from 'react'
 import FilterSingle, { FilterSingleProps } from './FilterSingle'
 import FilterDouble, { FilterDoubleProps } from './FilterDouble'
@@ -10,16 +8,25 @@ type FilterProps =
       double?: boolean,
     })
 
-const Filter = ({ double = false, ...templateProps }: FilterProps) => {
-  return (
-    <Choose>
-      <When condition={double}>
+const Filter = ({ 
+  double = false,
+  ...templateProps
+  }: FilterProps): React.ReactElement => {
+  const displayFilter = () => {
+    if (double === true) {
+      return (
         <FilterDouble {...templateProps} />
-      </When>
-      <Otherwise>
+      )
+    } else {
+      return (
         <FilterSingle {...templateProps} />
-      </Otherwise>
-    </Choose>
+      )
+    }
+  }
+  return (
+    <>
+      {displayFilter()}
+    </>
   )
 }
 

data/app/pb_kits/playbook/pb_filter/{_filter.jsx → _filter.tsx}

@@ -1,3 +1 @@
-/* @flow */
-
 export { default } from './Filter'

data/app/pb_kits/playbook/pb_list/_list.tsx

@@ -11,14 +11,14 @@ type ListProps = {
   dark?: boolean;
   data?: object;
   id?: string;
-  layout: "" | "left" | "right";
+  layout?: "" | "left" | "right";
   ordered?: boolean;
   role?: string;
   tabIndex?: number;
   text?: string;
   size?: string;
   variant?: string;
-  xpadding: boolean;
+  xpadding?: boolean;
 };
 
 const List = (props: ListProps) => {

data/app/pb_kits/playbook/pb_loading_inline/_loading_inline.tsx

@@ -0,0 +1,55 @@
+import React from 'react'
+import classnames from 'classnames'
+
+import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
+import { globalProps } from '../utilities/globalProps'
+
+import Body from '../pb_body/_body'
+import Icon from '../pb_icon/_icon'
+
+type LoadingInlineProps = {
+  align?: "left" | "center" | "right",
+  aria?: { [key: string]: string },
+  className?: string,
+  data?: { [key: string]: string },
+  id?: string,
+}
+
+const LoadingInline = (props: LoadingInlineProps) => {
+  const {
+    align = 'left',
+    aria = {},
+    className,
+    data = {},
+    id,
+  } = props
+
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
+  const classes = classnames(
+    buildCss(`pb_loading_inline_kit_${align}`),
+    globalProps(props),
+    className
+  )
+
+  return (
+    <div
+      {...ariaProps}
+      {...dataProps}
+      className={classes}
+      id={id}
+    >
+      <Body color="light">
+        <Icon
+          aria={{ label: 'loading icon' }}
+          fixedWidth
+          icon="spinner"
+          pulse
+        />
+        {' Loading'}
+      </Body>
+    </div>
+  )
+}
+
+export default LoadingInline