playbook_ui 4.15.0 → 4.15.1.alpha1

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

@@ -1,46 +0,0 @@
-/* @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

@@ -1,37 +0,0 @@
-/* @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

@@ -1,34 +0,0 @@
-/* @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

@@ -1,85 +0,0 @@
-/* @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

@@ -1,26 +0,0 @@
-/* @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

data/app/pb_kits/playbook/pb_layout/docs/_layout_colors.jsx

@@ -1,63 +0,0 @@
-import React from 'react'
-import { Body, Layout } from '../../'
-
-const LayoutColor = () => {
-  return (
-    <div>
-      <Layout
-          collapse="md"
-          position="left"
-          size="sm"
-      >
-        <Layout.Side>
-          {'Light'}
-        </Layout.Side>
-        <Layout.Body>
-          {'Body'}
-        </Layout.Body>
-      </Layout>
-
-      <br />
-      <br />
-
-      <Layout
-          collapse="md"
-          position="left"
-          size="sm"
-          variant="dark"
-      >
-        <Layout.Side>
-          <Body
-              dark
-              text="Dark"
-          />
-        </Layout.Side>
-        <Layout.Body>
-          {'Body'}
-        </Layout.Body>
-      </Layout>
-
-      <br />
-      <br />
-
-      <Layout
-          collapse="md"
-          position="left"
-          size="sm"
-          variant="gradient"
-      >
-        <Layout.Side>
-          <Body
-              dark
-              text="Gradient"
-          />
-        </Layout.Side>
-        <Layout.Body>
-          {'Body'}
-        </Layout.Body>
-      </Layout>
-    </div>
-  )
-}
-
-export default LayoutColor

data/app/pb_kits/playbook/pb_layout/docs/_layout_sizes.jsx

@@ -1,87 +0,0 @@
-import React from 'react'
-import { Layout } from '../../'
-
-const LayoutSizes = () => {
-  return (
-    <div>
-      <Layout
-          collapse="xs"
-          position="left"
-          size="xs"
-      >
-        <Layout.Side>
-          {'Side'}
-        </Layout.Side>
-        <Layout.Body>
-          {'Body'}
-        </Layout.Body>
-      </Layout>
-
-      <br />
-      <br />
-
-      <Layout
-          collapse="xs"
-          position="left"
-          size="sm"
-      >
-        <Layout.Side>
-          {'Side'}
-        </Layout.Side>
-        <Layout.Body>
-          {'Body'}
-        </Layout.Body>
-      </Layout>
-
-      <br />
-      <br />
-
-      <Layout
-          collapse="xs"
-          position="left"
-          size="md"
-      >
-        <Layout.Side>
-          {'Side'}
-        </Layout.Side>
-        <Layout.Body>
-          {'Body'}
-        </Layout.Body>
-      </Layout>
-
-      <br />
-      <br />
-
-      <Layout
-          collapse="xs"
-          position="left"
-          size="lg"
-      >
-        <Layout.Side>
-          {'Side'}
-        </Layout.Side>
-        <Layout.Body>
-          {'Body'}
-        </Layout.Body>
-      </Layout>
-
-      <br />
-      <br />
-
-      <Layout
-          collapse="xs"
-          position="left"
-          size="xl"
-      >
-        <Layout.Side>
-          {'Side'}
-        </Layout.Side>
-        <Layout.Body>
-          {'Body'}
-        </Layout.Body>
-      </Layout>
-    </div>
-  )
-}
-
-export default LayoutSizes

data/app/pb_kits/playbook/pb_layout/docs/_layout_sizes_dark.jsx

@@ -1,92 +0,0 @@
-import React from 'react'
-import { Layout } from '../../'
-
-const LayoutSizesDark = () => {
-  return (
-    <div>
-      <Layout
-          collapse="xs"
-          position="left"
-          size="xs"
-          variant="dark"
-      >
-        <Layout.Side>
-          {'Side'}
-        </Layout.Side>
-        <Layout.Body>
-          {'Body'}
-        </Layout.Body>
-      </Layout>
-
-      <br />
-      <br />
-
-      <Layout
-          collapse="xs"
-          position="left"
-          size="sm"
-          variant="dark"
-      >
-        <Layout.Side>
-          {'Side'}
-        </Layout.Side>
-        <Layout.Body>
-          {'Body'}
-        </Layout.Body>
-      </Layout>
-
-      <br />
-      <br />
-
-      <Layout
-          collapse="xs"
-          position="left"
-          size="md"
-          variant="dark"
-      >
-        <Layout.Side>
-          {'Side'}
-        </Layout.Side>
-        <Layout.Body>
-          {'Body'}
-        </Layout.Body>
-      </Layout>
-
-      <br />
-      <br />
-
-      <Layout
-          collapse="xs"
-          position="left"
-          size="lg"
-          variant="dark"
-      >
-        <Layout.Side>
-          {'Side'}
-        </Layout.Side>
-        <Layout.Body>
-          {'Body'}
-        </Layout.Body>
-      </Layout>
-
-      <br />
-      <br />
-
-      <Layout
-          collapse="xs"
-          position="left"
-          size="xl"
-          variant="dark"
-      >
-        <Layout.Side>
-          {'Side'}
-        </Layout.Side>
-        <Layout.Body>
-          {'Body'}
-        </Layout.Body>
-      </Layout>
-    </div>
-  )
-}
-
-export default LayoutSizesDark

data/app/pb_kits/playbook/pb_layout/docs/_layout_transparent.jsx

@@ -1,24 +0,0 @@
-import React from 'react'
-import { Layout } from '../../'
-
-const LayoutTransparent = () => {
-  return (
-    <div>
-      <Layout
-          collapse="sm"
-          position="left"
-          size="xs"
-          transparent
-      >
-        <Layout.Side>
-          {'Side'}
-        </Layout.Side>
-        <Layout.Body>
-          {'Body'}
-        </Layout.Body>
-      </Layout>
-    </div>
-  )
-}
-
-export default LayoutTransparent

data/app/pb_kits/playbook/pb_online_status/docs/_online_status_default.jsx

@@ -1,19 +0,0 @@
-import React from 'react'
-import { OnlineStatus } from '../../'
-
-const OnlineStatusDefault = () => (
-  <>
-    <OnlineStatus status="offline" />
-
-    <br />
-
-    <OnlineStatus status="online" />
-
-    <br />
-
-    <OnlineStatus status="away" />
-
-  </>
-)
-
-export default OnlineStatusDefault

data/app/pb_kits/playbook/pb_progress_step/_progress_step.html.erb

@@ -1,6 +0,0 @@
-<%= content_tag(:div,
-    id: object.id,
-    data: object.data,
-    class: object.classname) do %>
-    <%= capture(&object.children) %>
-<% end %>

data/app/pb_kits/playbook/pb_progress_step/_progress_step.jsx

@@ -1,35 +0,0 @@
-/* @flow */
-
-import React from 'react'
-import classnames from 'classnames'
-import { buildCss } from '../utilities/props'
-
-type ProgressStepProps = {
-  className?: String,
-  data?: String,
-  id?: String,
-  children?: Array<React.ReactChild>,
-  orientation?: 'horizontal' | 'vertical',
-  icon?: Boolean,
-  dark?: Boolean,
-}
-
-const ProgressStep = ({
-  className,
-  children,
-  orientation = 'horizontal',
-  icon = false,
-  dark = false,
-}: ProgressStepProps) => {
-  const iconStyle = icon === true ? 'icon' : ''
-  const darkStyle = dark === true ? 'dark' : ''
-  const progressStepCss = buildCss('pb_progress_step_kit', orientation, iconStyle, darkStyle)
-
-  return (
-    <div className={classnames(progressStepCss, className)}>
-      {children}
-    </div>
-  )
-}
-
-export default ProgressStep