playbook_ui 4.14.0 → 4.17.0

data/app/pb_kits/playbook/pb_date_stacked/_date_stacked.jsx

@@ -2,18 +2,18 @@
 
 import React from 'react'
 import classnames from 'classnames'
-
 import DateTime from '../pb_kit/dateTime.js'
 import { buildCss } from '../utilities/props'
 import { Caption, Title } from '../'
+import { spacing } from '../utilities/spacing.js'
 
 type DateStackedProps = {
-  align?: 'left' | 'center' | 'right',
+  align?: "left" | "center" | "right",
   className?: String | Array<String>,
   dark?: Boolean,
   data?: String,
   date: String,
-  size?: 'sm' | 'md',
+  size?: "sm" | "md",
   id?: String,
   reverse?: Boolean,
 }
@@ -23,18 +23,23 @@ const sizes = {
   md: 3,
 }
 
-const DateStacked = ({
-  align = 'left',
-  reverse = false,
-  className,
-  dark = false,
-  date,
-  size = 'sm',
-}: DateStackedProps) => {
-  const classes = classnames(className, buildCss('pb_date_stacked_kit', align, size, {
-    'dark': dark,
-    'reverse': reverse,
-  }))
+const DateStacked = (props: DateStackedProps) => {
+  const {
+    align = 'left',
+    reverse = false,
+    className,
+    dark = false,
+    date,
+    size = 'sm',
+  } = props
+  const classes = classnames(
+    className,
+    buildCss('pb_date_stacked_kit', align, size, {
+      dark: dark,
+      reverse: reverse,
+    }),
+    spacing(props)
+  )
 
   const currentYear = new Date().getFullYear().toString()
   const dateTimestamp = new DateTime({ value: date })
@@ -43,9 +48,7 @@ const DateStacked = ({
   return (
     <div className={classes}>
       <div className="pb_date_stacked_day_month">
-        <Caption
-            text={dateTimestamp.toMonth().toUpperCase()}
-        />
+        <Caption text={dateTimestamp.toMonth().toUpperCase()} />
         <Title
             dark={dark}
             size={sizes[size]}

data/app/pb_kits/playbook/pb_date_time_stacked/_date_time_stacked.jsx

@@ -1,12 +1,8 @@
 /* @flow */
 
 import React from 'react'
-import {
-  DateStacked,
-  Flex,
-  FlexItem,
-  TimeStacked,
-} from '../'
+import { DateStacked, Flex, FlexItem, TimeStacked } from '../'
+import { spacing } from '../utilities/spacing.js'
 
 type DateTimeStackedProps = {
   data?: String,
@@ -15,32 +11,33 @@ type DateTimeStackedProps = {
   dark: Boolean,
 }
 
-const DateTimeStacked = ({
-  date,
-  dark,
-}: DateTimeStackedProps) => (
-  <Flex
-      orientation="row"
-      vertical="center"
-  >
-    <FlexItem>
-      <DateStacked
-          align="right"
-          dark={dark}
-          date={date}
-          reverse
-          size="sm"
-      />
-    </FlexItem>
-    <FlexItem>
-      <TimeStacked
-          className="pb_date_time_stacked_kit"
-          dark={dark}
-          date={date}
-          tag="caption"
-      />
-    </FlexItem>
-  </Flex>
-)
+const DateTimeStacked = (props: DateTimeStackedProps) => {
+  const { date, dark } = props
+  return (
+    <Flex
+        className={spacing(props)}
+        orientation="row"
+        vertical="center"
+    >
+      <FlexItem>
+        <DateStacked
+            align="right"
+            dark={dark}
+            date={date}
+            reverse
+            size="sm"
+        />
+      </FlexItem>
+      <FlexItem>
+        <TimeStacked
+            className="pb_date_time_stacked_kit"
+            dark={dark}
+            date={date}
+            tag="caption"
+        />
+      </FlexItem>
+    </Flex>
+  )
+}
 
 export default DateTimeStacked

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

@@ -2,17 +2,14 @@
 
 import React from 'react'
 import classnames from 'classnames'
-
 import { buildCss } from '../utilities/props'
 import DateTime from '../pb_kit/dateTime.js'
+import { spacing } from '../utilities/spacing.js'
 
-import {
-  Body,
-  Title,
-} from '../'
+import { Body, Title } from '../'
 
 type DateYearStackedProps = {
-  align?: 'center' | 'right',
+  align?: "left" | "center" | "right",
   className?: String | Array<String>,
   dark?: Boolean,
   data?: String,
@@ -20,23 +17,21 @@ type DateYearStackedProps = {
   id?: String,
 }
 
-const DateYearStacked = ({
-  align,
-  className,
-  dark = false,
-  date,
-}: DateYearStackedProps) => {
+const DateYearStacked = (props: DateYearStackedProps) => {
+  const { align = 'left', className, dark = false, date } = props
   const dateTimestamp = new DateTime({ value: date })
-  const css = classnames(className, buildCss('pb_date_year_stacked', align))
+  const css = classnames(className, buildCss('pb_date_year_stacked', align), spacing(props))
 
   return (
     <div className={css}>
       <Title
           dark={dark}
           size={4}
-          text={`${dateTimestamp.toDay()} ${dateTimestamp.toMonth().toUpperCase()}`}
+          text={`${dateTimestamp.toDay()} ${dateTimestamp
+          .toMonth()
+          .toUpperCase()}`}
       />
-      <Body color="light">{ dateTimestamp.toYear() }</Body>
+      <Body color="light">{dateTimestamp.toYear()}</Body>
     </div>
   )
 }

data/app/pb_kits/playbook/pb_distribution_bar/_distribution_bar.jsx

@@ -1,12 +1,14 @@
 /* @flow */
 
 import React from 'react'
+import classnames from 'classnames'
+import { spacing } from '../utilities/spacing.js'
 
 type DistributionBarProps = {
   className?: String,
   data?: String,
   id?: String,
-  size?: 'lg' | 'sm',
+  size?: "lg" | "sm",
   widths?: Array<Number>,
 }
 
@@ -17,27 +19,25 @@ const normalizeCharacters = (widths) => {
 }
 
 const barValues = (normalizedValues) => {
-  const arrSum = (value) => value.reduce((a, b) => (a + b), 0)
+  const arrSum = (value) => value.reduce((a, b) => a + b, 0)
   const widthSum = arrSum(normalizedValues)
   return normalizedValues.map((value, i) => {
     return (
       <div
           className="pb_distribution_width"
           key={i}
-          style={{ width: `${value * 100 / widthSum}%` }}
+          style={{ width: `${(value * 100) / widthSum}%` }}
       />
     )
   })
 }
 
-const DistributionBar = ({
-  size = 'lg',
-  widths = [1],
-}: DistributionBarProps) => {
+const DistributionBar = (props: DistributionBarProps) => {
+  const { size = 'lg', widths = [1] } = props
   const normalizedValues = normalizeCharacters(widths)
 
   return (
-    <div className={`pb_distribution_bar_${size}`}>
+    <div className={classnames(`pb_distribution_bar_${size}`, spacing(props))}>
       {barValues(normalizedValues)}
     </div>
   )

data/app/pb_kits/playbook/pb_file_upload/_file_upload.jsx

@@ -2,18 +2,13 @@
 
 import React, { useCallback } from 'react'
 import { useDropzone } from 'react-dropzone'
-
-import {
-  buildCss,
-  noop,
-} from '../utilities/props'
+import { buildCss, noop } from '../utilities/props'
+import classnames from 'classnames'
+import { spacing } from '../utilities/spacing.js'
 
 import type { Callback } from '../types.js'
 
-import {
-  Body,
-  Card,
-} from '..'
+import { Body, Card } from '..'
 
 type FileUploadProps = {
   accept?: Array<String>,
@@ -21,34 +16,29 @@ type FileUploadProps = {
   onFilesAccepted: Callback,
 }
 
-const FileUpload = ({
-  accept = ['image/png', 'image/jpg', 'image/jpeg', 'image/svg+xml'],
-  className,
-  onFilesAccepted = noop,
-}: FileUploadProps) => {
+const FileUpload = (props: FileUploadProps) => {
+  const {
+    accept = ['image/png', 'image/jpg', 'image/jpeg', 'image/svg+xml'],
+    className,
+    onFilesAccepted = noop,
+  } = props
   const onDrop = useCallback((files) => {
     onFilesAccepted(files)
   })
 
-  const {
-    getRootProps,
-    getInputProps,
-    isDragActive,
-  } = useDropzone({
+  const { getRootProps, getInputProps, isDragActive } = useDropzone({
     accept,
     onDrop,
   })
 
   return (
     <div
-        className={buildCss('pb_file_upload_kit', className)}
+        className={classnames(buildCss('pb_file_upload_kit', className), spacing(props))}
         {...getRootProps()}
     >
       <Card>
         <input {...getInputProps()} />
-        <Body
-            color="light"
-        >
+        <Body color="light">
           <If condition={isDragActive}>
             <p>{'Drop the files here ...'}</p>
             <Else />

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,28 @@
+/* @flow */
+
+import React, { Node } from 'react'
+import { Card } from '../../'
+import classnames from 'classnames'
+import { spacing } from '../../utilities/spacing.js'
+
+type FilterBackgroundProps = {
+  background: boolean,
+  className: string,
+  children: Node,
+}
+const FilterBackground = (props: FilterBackgroundProps) => {
+  const { background = true, className, children } = props
+
+  return (
+    <div className={classnames(`pb_filter_kit ${className}`, spacing(props))}>
+      <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