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

playbook_ui 12.5.0 → 12.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

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;
+  }
+}