playbook_ui 7.11.0.pre.alpha1 → 7.13.0

data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_dark.jsx

@@ -1,13 +1,14 @@
 import React from 'react'
 import DateStacked from '../_date_stacked.jsx'
 
-const DateStackedDark = () => {
+const DateStackedDark = (props) => {
   return (
     <div>
       <DateStacked
           dark
           date={new Date().toLocaleString('en-US', { timeZone: 'Pacific/Tongatapu' })}
           size="sm"
+          {...props}
       />
 
       <br />
@@ -16,6 +17,7 @@ const DateStackedDark = () => {
           dark
           date={new Date().toLocaleString('en-US', { timeZone: 'America/New_York' })}
           size="md"
+          {...props}
       />
     </div>
   )

data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_default.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import DateStacked from '../_date_stacked.jsx'
 
-const DateStackedDefault = () => {
+const DateStackedDefault = (props) => {
   return (
     <div>
 
@@ -9,6 +9,7 @@ const DateStackedDefault = () => {
           align="left"
           date={new Date()}
           size="sm"
+          {...props}
       />
 
       <br />
@@ -16,6 +17,7 @@ const DateStackedDefault = () => {
       <DateStacked
           date={new Date()}
           size="md"
+          {...props}
       />
 
     </div>

data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_not_current_year.jsx

@@ -1,13 +1,14 @@
 import React from 'react'
 import DateStacked from '../_date_stacked.jsx'
 
-const DateStackedNotCurrentYear = () => {
+const DateStackedNotCurrentYear = (props) => {
   return (
     <div>
 
       <DateStacked
           date={new Date('20 Mar 2018')}
           size="sm"
+          {...props}
       />
 
       <br />
@@ -15,6 +16,7 @@ const DateStackedNotCurrentYear = () => {
       <DateStacked
           date={new Date('20 Mar 2018')}
           size="md"
+          {...props}
       />
 
     </div>

data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_reverse.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import DateStacked from '../_date_stacked.jsx'
 
-const DateStackedDefault = () => {
+const DateStackedDefault = (props) => {
   return (
     <div>
 
@@ -10,6 +10,7 @@ const DateStackedDefault = () => {
           date={new Date()}
           reverse
           size="sm"
+          {...props}
       />
 
       <br />
@@ -18,6 +19,7 @@ const DateStackedDefault = () => {
           date={new Date()}
           reverse
           size="md"
+          {...props}
       />
 
     </div>

data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_sizes.jsx

@@ -1,17 +1,19 @@
 import React from 'react'
 import DateStacked from '../_date_stacked.jsx'
 
-const DateStackedSizes = () => {
+const DateStackedSizes = (props) => {
   return (
     <div>
       <DateStacked
           date={new Date()}
           size="sm"
+          {...props}
       />
       <br />
       <DateStacked
           date={new Date()}
           size="md"
+          {...props}
       />
     </div>
   )

data/app/pb_kits/playbook/pb_date_time_stacked/docs/_date_time_stacked_dark.jsx

@@ -1,11 +1,12 @@
 import React from 'react'
 import { DateTimeStacked } from '../../'
 
-const DateTimeStackedDark = () => (
+const DateTimeStackedDark = (props) => (
   <div>
     <DateTimeStacked
         dark
         date={new Date()}
+        {...props}
     />
   </div>
 )

data/app/pb_kits/playbook/pb_date_time_stacked/docs/_date_time_stacked_default.jsx

@@ -1,9 +1,12 @@
 import React from 'react'
 import { DateTimeStacked } from '../../'
 
-const DateTimeStackedDefault = () => (
+const DateTimeStackedDefault = (props) => (
   <div>
-    <DateTimeStacked date={new Date()} />
+    <DateTimeStacked
+        date={new Date()}
+        {...props}
+    />
   </div>
 )
 

data/app/pb_kits/playbook/pb_date_year_stacked/docs/_date_year_stacked_dark.jsx

@@ -1,22 +1,25 @@
 import React from 'react'
 import { DateYearStacked } from '../../'
 
-const DateYearStackedDark = () => {
+const DateYearStackedDark = (props) => {
   return (
     <div>
       <DateYearStacked
           dark
           date={new Date()}
+          {...props}
       />
       <DateYearStacked
           align="center"
           dark
           date={new Date()}
+          {...props}
       />
       <DateYearStacked
           align="right"
           dark
           date={new Date()}
+          {...props}
       />
     </div>
   )

data/app/pb_kits/playbook/pb_date_year_stacked/docs/_date_year_stacked_default.jsx

@@ -1,17 +1,19 @@
 import React from 'react'
 import { DateYearStacked } from '../../'
 
-const DateYearStackedDefault = () => {
+const DateYearStackedDefault = (props) => {
   return (
     <div>
       <DateYearStacked date={new Date()} />
       <DateYearStacked
           align="center"
           date={new Date()}
+          {...props}
       />
       <DateYearStacked
           align="right"
           date={new Date()}
+          {...props}
       />
     </div>
   )

data/app/pb_kits/playbook/pb_distribution_bar/docs/_distribution_bar_default.jsx

@@ -1,12 +1,13 @@
 import React from 'react'
 import DistributionBar from '../_distribution_bar.jsx'
 
-const DistributionBarDefault = () => {
+const DistributionBarDefault = (props) => {
   return (
     <React.Fragment>
       <div>
         <DistributionBar
             widths={[1, 2, 3, 4, 5, 3, 3, 7]}
+            {...props}
         />
       </div>
       <br />
@@ -15,6 +16,7 @@ const DistributionBarDefault = () => {
         <DistributionBar
             size="sm"
             widths={[1, 2, 3, 4, 5, 3, 3, 7]}
+            {...props}
         />
       </div>
     </React.Fragment>

data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_accept.jsx

@@ -15,7 +15,7 @@ const AcceptedFilesList = ({ files }: FileList) => (
   </List>
 )
 
-const FileUploadAccept = () => {
+const FileUploadAccept = (props) => {
   const [filesToUpload, setFilesToUpload] = useState([])
 
   const handleOnFilesAccepted = (files) => {
@@ -24,10 +24,14 @@ const FileUploadAccept = () => {
 
   return (
     <div>
-      <AcceptedFilesList files={filesToUpload} />
+      <AcceptedFilesList
+          files={filesToUpload}
+          {...props}
+      />
       <FileUpload
           accept={['image/svg+xml']}
           onFilesAccepted={handleOnFilesAccepted}
+          {...props}
       />
     </div>
   )

data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_default.jsx

@@ -15,7 +15,7 @@ const AcceptedFilesList = ({ files }: FileList) => (
   </List>
 )
 
-const FileUploadDefault = () => {
+const FileUploadDefault = (props) => {
   const [filesToUpload, setFilesToUpload] = useState([])
 
   const handleOnFilesAccepted = (files) => {
@@ -24,9 +24,13 @@ const FileUploadDefault = () => {
 
   return (
     <div>
-      <AcceptedFilesList files={filesToUpload} />
+      <AcceptedFilesList
+          files={filesToUpload}
+          {...props}
+      />
       <FileUpload
           onFilesAccepted={handleOnFilesAccepted}
+          {...props}
       />
     </div>
   )

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

@@ -7,7 +7,11 @@ 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'
+import SortMenu, {
+  SortingChangeCallback,
+  SortOptions,
+  SortValue,
+} from './SortMenu'
 
 export type FilterDoubleProps = {
   children: Node,
@@ -18,7 +22,17 @@ export type FilterDoubleProps = {
   sortValue?: SortValue,
 } & FilterBackgroundProps
 
-const FilterDouble = ({ onSortChange, sortOptions, sortValue, filters, results, children, dark, ...bgProps }: FilterDoubleProps) => (
+const FilterDouble = ({
+  onSortChange,
+  sortOptions,
+  sortValue,
+  filters,
+  results,
+  children,
+  dark,
+  minWidth,
+  ...bgProps
+}: FilterDoubleProps) => (
   <FilterBackground
       dark={dark}
       {...bgProps}
@@ -27,7 +41,10 @@ const FilterDouble = ({ onSortChange, sortOptions, sortValue, filters, results,
         orientation="row"
         vertical="center"
     >
-      <FiltersPopover dark={dark}>
+      <FiltersPopover
+          dark={dark}
+          minWidth={minWidth}
+      >
         {children}
       </FiltersPopover>
       <CurrentFilters

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

@@ -8,7 +8,11 @@ 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'
+import SortMenu, {
+  SortingChangeCallback,
+  SortOptions,
+  SortValue,
+} from './SortMenu'
 
 export type FilterSingleProps = {
   children?: Node,
@@ -19,39 +23,54 @@ export type FilterSingleProps = {
   sortValue?: SortValue,
 } & FilterBackgroundProps
 
-const FilterSingle = ({ onSortChange, sortOptions, sortValue, filters, results, children, dark, ...bgProps }: FilterSingleProps) => (
-  <FilterBackground
-      dark={dark}
-      {...bgProps}
-  >
-    <Flex
-        orientation="row"
-        paddingRight="lg"
-        vertical="center"
+const FilterSingle = ({
+  onSortChange,
+  sortOptions,
+  sortValue,
+  filters,
+  results,
+  children,
+  dark,
+  minWidth,
+  ...bgProps
+}: FilterSingleProps) => {
+  return (
+    <FilterBackground
+        dark={dark}
+        {...bgProps}
     >
-      <If condition={children}>
-        <FiltersPopover dark={dark}>
-          {children}
-        </FiltersPopover>
-        <CurrentFilters
+      <Flex
+          orientation="row"
+          paddingRight="lg"
+          vertical="center"
+      >
+        <If condition={children}>
+          <FiltersPopover
+              dark={dark}
+              minWidth={minWidth}
+          >
+            {children}
+          </FiltersPopover>
+          <CurrentFilters
+              dark={dark}
+              filters={filters}
+          />
+        </If>
+        <ResultsCount
             dark={dark}
-            filters={filters}
+            results={results}
         />
-      </If>
-      <ResultsCount
-          dark={dark}
-          results={results}
-      />
-      <If condition={!isEmpty(sortOptions)}>
-        <SortMenu
-            dark={dark}
-            onChange={onSortChange}
-            options={sortOptions}
-            value={sortValue}
-        />
-      </If>
-    </Flex>
-  </FilterBackground>
-)
+        <If condition={!isEmpty(sortOptions)}>
+          <SortMenu
+              dark={dark}
+              onChange={onSortChange}
+              options={sortOptions}
+              value={sortValue}
+          />
+        </If>
+      </Flex>
+    </FilterBackground>
+  )
+}
 
 export default FilterSingle

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

@@ -4,7 +4,7 @@ import React, { Node, useState } from 'react'
 import { CircleIconButton, PbReactPopover } from '../../'
 
 const FiltersPopoverProps = { children: Node }
-const FiltersPopover = ({ children, dark }: FiltersPopoverProps) => {
+const FiltersPopover = ({ children, dark, minWidth }: FiltersPopoverProps) => {
   const [hide, updateHide] = useState(true)
   const toggle = () => updateHide(!hide)
 
@@ -22,14 +22,13 @@ const FiltersPopover = ({ children, dark }: FiltersPopoverProps) => {
   return (
     <PbReactPopover
         closeOnClick="outside"
+        minWidth={minWidth}
         placement="bottom"
         reference={filterButton}
         shouldClosePopover={updateHide}
         show={!hide}
     >
-      <div className="pb-form">
-        {children}
-      </div>
+      <div className="pb-form">{children}</div>
     </PbReactPopover>
   )
 }

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

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