RubyGems - playbook_ui - Versions diffs - 12.5.0 → 12.6.0 - Mend

playbook_ui 12.5.0 → 12.6.0

Files changed (50) hide show

checksums.yaml CHANGED Viewed

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 92319a3771d2aa0a3198e988dc95b91e977ee532db2884cd6197912cb045caae
-  data.tar.gz: caaa026385dd1d94a65175ba00ef818caab6a901c5bb0da90cd24920158e885f
+  metadata.gz: 5ffe02f5811c58c2f395f4dc42933e6277b77d392e3cbc9657611b91c9d82617
+  data.tar.gz: b45d5e741b3d219bee86e6f37d8c3c8f7d1f4cbfb482b77fe352acfd703c64ad
 SHA512:
-  metadata.gz: 7469df006da7d11b70de500123a4d260db2a2c8c0b79ee80766dde6a760eaa81c71b59880aad14ee48a7d9ee91b2c6237e766b8c046a19b088b61830b0e5f2b6
-  data.tar.gz: 7e0f3a0e05f403da3b31e8b21ab01ee92fb4139a5223af663a62f9672ff381009a75cd1a9f30ea57289e28ffda043f23cab7364eae1e54973e9f4922d8884f28
+  metadata.gz: b86a515a02c0c3cbd155a4840243d2e50bcefca3ed2a34cca2d67078087b0e2db728fae764e01d526f4da9579aa9249fc9ae245ca435b786a8c75b6a7225bf82
+  data.tar.gz: bc734f1f1b3cd1ae6d20754334dc6a5590d77bd393a5bcad9fb73f33d330c8d46b6f5ee6eaae0d1ada5754e4e349cdf2d1b9dd2ff307decace3ed1a5a46a0b0d

data/app/pb_kits/playbook/_playbook.scss CHANGED Viewed

@@ -107,3 +107,5 @@
 @import './utilities/display';
 @import './utilities/flexbox';
 @import './utilities/focus';
+@import 'pb_multi_level_select/multi_level_select';

data/app/pb_kits/playbook/data/menu.yml CHANGED Viewed

@@ -57,6 +57,7 @@ kits:
   - list
   - loading_inline
   - map
+  - multi_level_select
   - nav
   - tags:
     - badge
@@ -106,4 +107,4 @@ kits:
     - title_count
     - title_detail
   - user_badge
-  - walkthrough
+  - walkthrough

data/app/pb_kits/playbook/index.js CHANGED Viewed

@@ -60,6 +60,7 @@ export { default as ListItem } from './pb_list/_list_item'
 export { default as LoadingInline } from './pb_loading_inline/_loading_inline'
 export { default as Map} from './pb_map/_map'
 export { default as Message } from './pb_message/_message'
+export { default as MultiLevelSelect} from './pb_multi_level_select/_multi_level_select'
 export { default as MultipleUsers } from './pb_multiple_users/_multiple_users'
 export { default as MultipleUsersStacked } from './pb_multiple_users_stacked/_multiple_users_stacked'
 export { default as Nav } from './pb_nav/_nav'

data/app/pb_kits/playbook/pb_button/_button_mixins.scss CHANGED Viewed

@@ -101,7 +101,7 @@ $pb_button_border_width: 0px;
 // Secondary ====================
 @mixin pb_button_secondary {
-  @include pb_button_variant(rgba($primary_action, 0.05), $primary_action);
+  @include pb_button_variant($secondary-action, $primary_action);
   @media (hover:hover) {
     &:hover {
@@ -109,7 +109,7 @@ $pb_button_border_width: 0px;
     }
     &:active {
       transition: none;
-      @include pb_button_variant(rgba($primary_action, 0.05), $primary_action);
+      @include pb_button_variant($secondary-action, $primary_action);
     }
   }
 }

data/app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.scss CHANGED Viewed

@@ -26,7 +26,7 @@ $pb_button_styles: [
 @mixin pb_circle_icon_button_active {
   &:active {
     transition: none;
-    @include pb_button_variant(rgba($primary_action, 0.05), $primary_action);
+    @include pb_button_variant($secondary-action, $primary_action);
   }
 }

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

@@ -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} RENAMED Viewed

@@ -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} RENAMED Viewed

@@ -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} RENAMED Viewed

@@ -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} RENAMED Viewed

@@ -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} RENAMED Viewed

@@ -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} RENAMED Viewed

@@ -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} RENAMED Viewed

@@ -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} RENAMED Viewed

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

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

@@ -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_multi_level_select/_multi_level_select.scss ADDED Viewed

@@ -0,0 +1,86 @@
+@import "../pb_textarea/textarea_mixin";
+@import "../tokens/colors";
+@import "../tokens/border_radius";
+@import "../tokens/shadows";
+@import "../tokens/spacing";
+.pb_multi_level_select {
+  .dropdown {
+    width: 100%;
+    .search {
+      border-bottom: none;
+    }
+    .toggle.expanded:after {
+      border-style: solid;
+      border-width: 0.1em 0.1em 0 0;
+      content: "";
+      display: inline-block;
+      height: 0.6em;
+      left: 0.1em;
+      position: relative;
+      vertical-align: top;
+      width: 0.6em;
+      top: 10px;
+      transform: rotate(135deg);
+      font-size: 0.5em;
+    }
+    .toggle.collapsed:after {
+      border-style: solid;
+      border-width: 0.1em 0.1em 0 0;
+      content: "";
+      display: inline-block;
+      height: 0.6em;
+      left: 0.1em;
+      position: relative;
+      vertical-align: top;
+      width: 0.6em;
+      top: 10px;
+      transform: rotate(135deg);
+      font-size: 0.5em;
+      transform: rotate(-45deg);
+      top: 12px;
+    }
+    .tag {
+      height: 37px;
+      display: inline-flex;
+      justify-content: center;
+      align-items: center;
+      padding: 0 $space_xxs 0 $space_xs;
+      border-radius: 18px;
+      background-color: rgba($primary, 0.1);
+      color: $primary;
+      border: none;
+      font-size: 16px;
+      font-weight: 700;
+      .tag-remove {
+        color: $primary;
+        padding-left: $space_xs;
+        padding-right: $space_xxs;
+      }
+    }
+  }
+  .react-dropdown-tree-select .dropdown .dropdown-trigger {
+    width: 100%;
+    @include pb_textarea_light;
+  }
+  .react-dropdown-tree-select .dropdown .dropdown-trigger.arrow.bottom:after {
+    content: none;
+  }
+  .react-dropdown-tree-select .dropdown .dropdown-trigger.arrow.top:after {
+    content: none;
+  }
+  .react-dropdown-tree-select .dropdown .dropdown-content {
+    width: 100%;
+    border: 1px solid $border_light;
+    border-radius: $border_rad_heavier;
+    box-shadow: $shadow_deeper;
+  }
+  .node.leaf.collapsed {
+    display: block !important;
+  }
+}