playbook_ui 4.15.1.alpha1 → 4.16.0

data/app/pb_kits/playbook/pb_currency/currency.rb

@@ -35,41 +35,36 @@ module Playbook
         generate_classname("pb_currency_kit", align, size, dark_class)
       end
 
-      def currency_symbol_element
-        pb_dollar_sign = Playbook::PbBody::Body.new(
+      def currency_wrapper_props
+        {
           classname: "dollar_sign",
           color: "light",
-          dark: dark
-        ) { symbol }
-
-        ApplicationController.renderer.render(
-          partial: pb_dollar_sign,
-          as: :object
-        )
+          dark: dark,
+        }
       end
 
-      def label_element
-        pb_label = Playbook::PbCaption::Caption.new(text: label)
+      def title_props
+        {
+          size: size_value,
+          text: whole_value,
+          classname: "pb_currency_value",
+          dark: dark,
+        }
+      end
 
-        ApplicationController.renderer.render(
-          partial: pb_label,
-          as: :object
-        )
+      def body_props
+        {
+          text: units_element,
+          color: "light",
+          classname: "unit",
+          dark: dark,
+        }
       end
 
-      def amount_element
-        whole_part = amount.split(".")
-        pb_title = Playbook::PbTitle::Title.new(
-          size: size_value,
-          text: whole_part.first.to_s,
-          classname: "pb_currency_value",
-          dark: dark
-        )
+    private
 
-        ApplicationController.renderer.render(
-          partial: pb_title,
-          as: :object
-        )
+      def whole_value
+        amount.split(".").first.to_s
       end
 
       def units_element
@@ -81,8 +76,6 @@ module Playbook
         end
       end
 
-    private
-
       def size_value
         case size
         when "lg"

data/app/pb_kits/playbook/pb_dashboard/pbChartsLightTheme.js

@@ -4,6 +4,9 @@ import typography from '../tokens/_typography.scss'
 import Highcharts from 'highcharts'
 
 const highchartsTheme = {
+  lang: {
+    thousandsSep: ',',
+  },
   colors: [
     colors.data_1,
     colors.data_2,
@@ -19,7 +22,6 @@ const highchartsTheme = {
     plotBackgroundColor: null,
     plotShadow: false,
     plotBorderWidth: 0,
-
   },
   title: {
     style: {
@@ -141,6 +143,29 @@ const highchartsTheme = {
       },
       threshold: null,
     },
+
+    // PIE STYLES
+    pie: {
+      colors: [
+        colors.data_1,
+        colors.data_2,
+        colors.data_3,
+        colors.data_4,
+        colors.data_5,
+        colors.data_6,
+        colors.data_7,
+      ],
+      dataLabels: {
+        style: {
+          fontFamily: typography.font_family_base,
+          fontSize: typography.text_smaller,
+          color: colors.text_lt_light,
+          fontWeight: typography.regular,
+        },
+      },
+    },
+
+    // LINE CHART STYLES
     line: {
       dataLabels: {
         color: '#CCC',

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