playbook_ui 12.5.0.pre.alpha.phonerails1 → 12.6.0.pre.alpha.cssphone1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (47) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/_playbook.scss +2 -0
  3. data/app/pb_kits/playbook/data/menu.yml +2 -1
  4. data/app/pb_kits/playbook/index.js +1 -0
  5. data/app/pb_kits/playbook/pb_button/_button_mixins.scss +2 -2
  6. data/app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.scss +1 -1
  7. data/app/pb_kits/playbook/pb_filter/Filter/CurrentFilters.tsx +72 -0
  8. data/app/pb_kits/playbook/pb_filter/Filter/{FilterBackground.jsx → FilterBackground.tsx} +12 -14
  9. data/app/pb_kits/playbook/pb_filter/Filter/{FilterDouble.jsx → FilterDouble.tsx} +7 -8
  10. data/app/pb_kits/playbook/pb_filter/Filter/{FilterSingle.jsx → FilterSingle.tsx} +25 -25
  11. data/app/pb_kits/playbook/pb_filter/Filter/{FiltersPopover.jsx → FiltersPopover.tsx} +13 -11
  12. data/app/pb_kits/playbook/pb_filter/Filter/{ResultsCount.jsx → ResultsCount.tsx} +39 -14
  13. data/app/pb_kits/playbook/pb_filter/Filter/{SortMenu.jsx → SortMenu.tsx} +6 -6
  14. data/app/pb_kits/playbook/pb_filter/Filter/{index.jsx → index.tsx} +17 -10
  15. data/app/pb_kits/playbook/pb_filter/{_filter.jsx → _filter.tsx} +0 -2
  16. data/app/pb_kits/playbook/pb_list/_list.tsx +2 -2
  17. data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.scss +86 -0
  18. data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx +81 -0
  19. data/app/pb_kits/playbook/pb_multi_level_select/_multi_select_helper.tsx +30 -0
  20. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.jsx +86 -0
  21. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.md +3 -0
  22. data/app/pb_kits/playbook/pb_multi_level_select/docs/example.yml +6 -0
  23. data/app/pb_kits/playbook/pb_multi_level_select/docs/index.js +1 -0
  24. data/app/pb_kits/playbook/pb_multi_level_select/helper_functions.ts +60 -0
  25. data/app/pb_kits/playbook/pb_multi_level_select/multi_level_select.test.jsx +40 -0
  26. data/app/pb_kits/playbook/pb_person_contact/{_person_contact.jsx → _person_contact.tsx} +19 -22
  27. data/app/pb_kits/playbook/pb_person_contact/person_contact.test.js +112 -0
  28. data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.scss +52 -16
  29. data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx +21 -20
  30. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_default.jsx +1 -0
  31. data/app/pb_kits/playbook/pb_popover/_popover.tsx +33 -32
  32. data/app/pb_kits/playbook/playbook-doc.js +2 -0
  33. data/app/pb_kits/playbook/tokens/_animation-curves.scss +30 -30
  34. data/app/pb_kits/playbook/tokens/_border_radius.scss +15 -16
  35. data/app/pb_kits/playbook/tokens/_colors.scss +3 -1
  36. data/app/pb_kits/playbook/tokens/_display.scss +6 -6
  37. data/app/pb_kits/playbook/tokens/_line_height.scss +7 -7
  38. data/app/pb_kits/playbook/tokens/_opacity.scss +10 -10
  39. data/app/pb_kits/playbook/tokens/_positioning.scss +11 -11
  40. data/app/pb_kits/playbook/tokens/_screen_sizes.scss +10 -10
  41. data/app/pb_kits/playbook/tokens/_shadows.scss +4 -4
  42. data/app/pb_kits/playbook/tokens/_spacing.scss +6 -6
  43. data/app/pb_kits/playbook/tokens/_transition.scss +3 -3
  44. data/app/pb_kits/playbook/tokens/_typography.scss +35 -46
  45. data/lib/playbook/version.rb +2 -2
  46. metadata +22 -12
  47. data/app/pb_kits/playbook/pb_filter/Filter/CurrentFilters.jsx +0 -76
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: e827c4077969ef2258c6c650173ef5c8227d81aca0a0201c19ae0e136de1decb
4
- data.tar.gz: aec0d42668e214f8a32b4220704c76af66a2b55a43fbeb0efb28eb6832c45d9a
3
+ metadata.gz: 605be9613bb09fd58884e033677ec9bb2d87872b384d0ea087c715c5f53d451c
4
+ data.tar.gz: e37094c320262d4ebd8c5da72a6a36773718c62944ed6ed203953e3cbe017f89
5
5
  SHA512:
6
- metadata.gz: ed4ab9a7d46404031c54b2c4e22731d4260d00d2db11af3b280b03f92df607f1afd8a6f3b68d6b52aa6e8866605c5c7fa85c4598a4323b2dfbc6a9d5490ff196
7
- data.tar.gz: 23d61876cc9d04ea7b378b9ecc896b5d4f0a8d04b336a2b3f0fbf81c24189cc8ac86cc2f0eb65b3760d2da51c9699798a8dbe38c20a98744c3076b6f450706ab
6
+ metadata.gz: be6f1cecdfe0783360be888c294a56c6936279fc04c8394cacb208a1d2915ae7e1eb66251a5bfa0d77e341cbb1c334154bd201ba5cfb432f6cfb8dae6d781e65
7
+ data.tar.gz: a4021982214cf9b87f14415e3de00e4d0fa781a62fc1049c72d0c25a91d5f13cf593c7a9084b8334b10111b53b69aaa24d2110acdae6b7de135ca0a3f688e52b
@@ -107,3 +107,5 @@
107
107
  @import './utilities/display';
108
108
  @import './utilities/flexbox';
109
109
  @import './utilities/focus';
110
+
111
+ @import 'pb_multi_level_select/multi_level_select';
@@ -57,6 +57,7 @@ kits:
57
57
  - list
58
58
  - loading_inline
59
59
  - map
60
+ - multi_level_select
60
61
  - nav
61
62
  - tags:
62
63
  - badge
@@ -106,4 +107,4 @@ kits:
106
107
  - title_count
107
108
  - title_detail
108
109
  - user_badge
109
- - walkthrough
110
+ - walkthrough
@@ -60,6 +60,7 @@ export { default as ListItem } from './pb_list/_list_item'
60
60
  export { default as LoadingInline } from './pb_loading_inline/_loading_inline'
61
61
  export { default as Map} from './pb_map/_map'
62
62
  export { default as Message } from './pb_message/_message'
63
+ export { default as MultiLevelSelect} from './pb_multi_level_select/_multi_level_select'
63
64
  export { default as MultipleUsers } from './pb_multiple_users/_multiple_users'
64
65
  export { default as MultipleUsersStacked } from './pb_multiple_users_stacked/_multiple_users_stacked'
65
66
  export { default as Nav } from './pb_nav/_nav'
@@ -101,7 +101,7 @@ $pb_button_border_width: 0px;
101
101
 
102
102
  // Secondary ====================
103
103
  @mixin pb_button_secondary {
104
- @include pb_button_variant(rgba($primary_action, 0.05), $primary_action);
104
+ @include pb_button_variant($secondary-action, $primary_action);
105
105
 
106
106
  @media (hover:hover) {
107
107
  &:hover {
@@ -109,7 +109,7 @@ $pb_button_border_width: 0px;
109
109
  }
110
110
  &:active {
111
111
  transition: none;
112
- @include pb_button_variant(rgba($primary_action, 0.05), $primary_action);
112
+ @include pb_button_variant($secondary-action, $primary_action);
113
113
  }
114
114
  }
115
115
  }
@@ -26,7 +26,7 @@ $pb_button_styles: [
26
26
  @mixin pb_circle_icon_button_active {
27
27
  &:active {
28
28
  transition: none;
29
- @include pb_button_variant(rgba($primary_action, 0.05), $primary_action);
29
+ @include pb_button_variant($secondary-action, $primary_action);
30
30
  }
31
31
  }
32
32
 
@@ -0,0 +1,72 @@
1
+ import React from 'react'
2
+ import { isEmpty, map, omitBy } from 'lodash'
3
+
4
+ import Body from '../../pb_body/_body'
5
+ import Caption from '../../pb_caption/_caption'
6
+ import Title from '../../pb_title/_title'
7
+
8
+ export type FilterDescription = {
9
+ [key: string]: string | null | boolean,
10
+ }
11
+
12
+ export type CurrentFiltersProps = {
13
+ dark: boolean,
14
+ filters: FilterDescription,
15
+ }
16
+
17
+ const hiddenFilters = (value: any) => isEmpty(value) && value !== true
18
+
19
+ const CurrentFilters = ({ dark, filters }: CurrentFiltersProps): React.ReactElement => {
20
+ const displayableFilters = omitBy(filters, hiddenFilters)
21
+
22
+ return (
23
+ <div className="maskContainer">
24
+ { isEmpty(filters) &&
25
+ <div className="filters">
26
+ <Body
27
+ color="light"
28
+ paddingLeft="xs"
29
+ size={4}
30
+ tag="h4"
31
+ text="No Filter Selected"
32
+ />
33
+ </div>
34
+ }
35
+ { !isEmpty(filters) &&
36
+ <div className="filters">
37
+ <div className="left_gradient" />
38
+ {map(displayableFilters, (value, name) => (
39
+ <div
40
+ className="filter"
41
+ key={`filter-${name}`}
42
+ >
43
+ { value === true ?
44
+ <Title
45
+ dark={dark}
46
+ size={4}
47
+ tag="h4"
48
+ text={name}
49
+ /> :
50
+ <div>
51
+ <Caption
52
+ dark={dark}
53
+ text={name}
54
+ />
55
+ <Title
56
+ dark={dark}
57
+ size={4}
58
+ tag="h4"
59
+ text={value}
60
+ />
61
+ </div>
62
+ }
63
+ </div>
64
+ ))}
65
+ <div className="right_gradient" />
66
+ </div>
67
+ }
68
+ </div>
69
+ )
70
+ }
71
+
72
+ export default CurrentFilters
@@ -1,35 +1,33 @@
1
- /* @flow */
2
-
3
- import React, { Node } from 'react'
1
+ import React from 'react'
4
2
  import classnames from 'classnames'
5
3
 
6
- import { globalProps } from '../../utilities/globalProps'
4
+ import { GlobalProps, globalProps } from '../../utilities/globalProps'
7
5
 
8
6
  import Card from '../../pb_card/_card'
9
7
 
10
- type FilterBackgroundProps = {
8
+ export type FilterBackgroundProps = {
11
9
  background: boolean,
12
10
  className: string,
13
- children: Node,
11
+ children?: React.ReactChild[] | React.ReactChild,
14
12
  dark: boolean,
15
- }
13
+ } & GlobalProps
16
14
 
17
- const FilterBackground = (props: FilterBackgroundProps) => {
15
+ const FilterBackground = (props: FilterBackgroundProps): React.ReactElement => {
18
16
  const { background = true, className, children, dark } = props
19
17
 
20
18
  return (
21
19
  <div className={classnames(`pb_filter_kit ${className}`, globalProps(props))}>
22
- <Choose>
23
- <When condition={background}>
20
+ { background ?
24
21
  <Card
25
22
  dark={dark}
26
23
  padding="none"
27
24
  >
28
25
  {children}
29
- </Card>
30
- </When>
31
- <Otherwise>{children}</Otherwise>
32
- </Choose>
26
+ </Card> :
27
+ <>
28
+ {children}
29
+ </>
30
+ }
33
31
  </div>
34
32
  )
35
33
  }
@@ -1,5 +1,3 @@
1
- /* @flow */
2
-
3
1
  import React from 'react'
4
2
 
5
3
  import CurrentFilters, { FilterDescription } from './CurrentFilters'
@@ -15,13 +13,14 @@ import SortMenu, {
15
13
  import Caption from '../../pb_caption/_caption'
16
14
  import Flex from '../../pb_flex/_flex'
17
15
  import SectionSeparator from '../../pb_section_separator/_section_separator'
16
+
18
17
  export type FilterDoubleProps = {
19
- children: Node,
18
+ children?: React.ReactChild[] | React.ReactChild,
20
19
  filters?: FilterDescription,
21
- onSortChange: SortingChangeCallback,
20
+ onSortChange?: SortingChangeCallback,
22
21
  results?: number,
23
- sortOptions: SortOptions,
24
- sortValue?: SortValue,
22
+ sortOptions?: SortOptions,
23
+ sortValue?: SortValue[],
25
24
  } & FilterBackgroundProps
26
25
 
27
26
  const FilterDouble = ({
@@ -35,7 +34,7 @@ const FilterDouble = ({
35
34
  minWidth,
36
35
  placement,
37
36
  ...bgProps
38
- }: FilterDoubleProps) => (
37
+ }: FilterDoubleProps): React.ReactElement => (
39
38
  <FilterBackground
40
39
  dark={dark}
41
40
  {...bgProps}
@@ -49,7 +48,7 @@ const FilterDouble = ({
49
48
  minWidth={minWidth}
50
49
  placement={placement}
51
50
  >
52
- {children}
51
+ {children}
53
52
  </FiltersPopover>
54
53
  <CurrentFilters
55
54
  dark={dark}
@@ -1,5 +1,3 @@
1
- /* @flow */
2
-
3
1
  import React from 'react'
4
2
  import { isEmpty } from 'lodash'
5
3
 
@@ -16,12 +14,12 @@ import SortMenu, {
16
14
  } from './SortMenu'
17
15
 
18
16
  export type FilterSingleProps = {
19
- children?: Node,
17
+ children?: React.ReactChild[] | React.ReactChild,
20
18
  filters?: FilterDescription,
21
19
  onSortChange?: SortingChangeCallback,
22
20
  results?: number,
23
21
  sortOptions?: SortOptions,
24
- sortValue?: SortValue,
22
+ sortValue?: SortValue[],
25
23
  } & FilterBackgroundProps
26
24
 
27
25
  const FilterSingle = ({
@@ -35,7 +33,7 @@ const FilterSingle = ({
35
33
  minWidth,
36
34
  placement,
37
35
  ...bgProps
38
- }: FilterSingleProps) => {
36
+ }: FilterSingleProps): React.ReactElement => {
39
37
  return (
40
38
  <FilterBackground
41
39
  dark={dark}
@@ -46,31 +44,33 @@ const FilterSingle = ({
46
44
  paddingRight="lg"
47
45
  vertical="center"
48
46
  >
49
- <If condition={children}>
50
- <FiltersPopover
51
- dark={dark}
52
- minWidth={minWidth}
53
- placement={placement}
54
- >
47
+ { children &&
48
+ <>
49
+ <FiltersPopover
50
+ dark={dark}
51
+ minWidth={minWidth}
52
+ placement={placement}
53
+ >
55
54
  {children}
56
- </FiltersPopover>
57
- <CurrentFilters
58
- dark={dark}
59
- filters={filters}
60
- />
61
- </If>
55
+ </FiltersPopover>
56
+ <CurrentFilters
57
+ dark={dark}
58
+ filters={filters}
59
+ />
60
+ </>
61
+ }
62
62
  <ResultsCount
63
63
  dark={dark}
64
64
  results={results}
65
65
  />
66
- <If condition={!isEmpty(sortOptions)}>
67
- <SortMenu
68
- dark={dark}
69
- onChange={onSortChange}
70
- options={sortOptions}
71
- value={sortValue}
72
- />
73
- </If>
66
+ { !isEmpty(sortOptions) &&
67
+ <SortMenu
68
+ dark={dark}
69
+ onChange={onSortChange}
70
+ options={sortOptions}
71
+ value={sortValue}
72
+ />
73
+ }
74
74
  </Flex>
75
75
  </FilterBackground>
76
76
  )
@@ -1,12 +1,15 @@
1
- /* @flow */
2
-
3
- import React, { Node, useState } from 'react'
1
+ import React, { ReactNode, useState } from 'react'
4
2
 
5
3
  import CircleIconButton from '../../pb_circle_icon_button/_circle_icon_button'
6
4
  import PbReactPopover from '../../pb_popover/_popover'
7
5
 
8
- const FiltersPopoverProps = { children: Node }
9
- const FiltersPopover = ({ children, dark, minWidth, placement = "bottom-start" }: FiltersPopoverProps) => {
6
+ type FiltersPopoverProps = {
7
+ children?: React.ReactChild[] | React.ReactChild | (({closePopover}: {closePopover: () => void}) => ReactNode),
8
+ dark?: boolean,
9
+ minWidth?: string,
10
+ placement?: "top" | "right" | "bottom" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end",
11
+ }
12
+ const FiltersPopover = ({ children, dark, minWidth, placement = "bottom-start" }: FiltersPopoverProps): React.ReactElement => {
10
13
  const [hide, updateHide] = useState(true)
11
14
  const toggle = () => updateHide(!hide)
12
15
 
@@ -16,7 +19,6 @@ const FiltersPopover = ({ children, dark, minWidth, placement = "bottom-start" }
16
19
  icon="filter"
17
20
  id="filter"
18
21
  onClick={toggle}
19
- text="filter"
20
22
  variant="secondary"
21
23
  />
22
24
  )
@@ -30,11 +32,11 @@ const FiltersPopover = ({ children, dark, minWidth, placement = "bottom-start" }
30
32
  shouldClosePopover={updateHide}
31
33
  show={!hide}
32
34
  >
33
- <div className="pb-form">
34
- {typeof children === 'function'
35
- ? children({ closePopover: () => (updateHide(true)) })
36
- : children}
37
- </div>
35
+ <div className="pb-form">
36
+ {typeof children === 'function'
37
+ ? children({ closePopover: () => (updateHide(true)) })
38
+ : children}
39
+ </div>
38
40
  </PbReactPopover>
39
41
  )
40
42
  }
@@ -1,5 +1,3 @@
1
- /* @flow */
2
-
3
1
  import React from 'react'
4
2
 
5
3
  import Caption from '../../pb_caption/_caption'
@@ -9,31 +7,58 @@ const resultsText = (results: number): string => results == 1 ? 'Result' : 'Resu
9
7
 
10
8
  type ResultsCountProps = {
11
9
  dark?: boolean,
12
- results?: ?number,
10
+ results?: number | null,
13
11
  title?: boolean,
14
12
  }
15
- const ResultsCount = ({ dark, results, title }: ResultsCountProps) => (
16
- <Choose>
17
- <When condition={results && title}>
13
+ const ResultsCount = ({ dark, results, title }: ResultsCountProps): React.ReactElement => {
14
+
15
+ const resultTitle = () => {
16
+ return (
18
17
  <TitleCount
19
18
  align="center"
20
19
  count={results}
21
20
  dark={dark}
22
21
  title={`${resultsText(results)}:`}
23
22
  />
24
- </When>
25
- <When condition={results}>
23
+ )
24
+ }
25
+
26
+ const justResults = () => {
27
+ return (
26
28
  <Caption
27
29
  className="filter-results"
28
30
  dark={dark}
29
31
  size="xs"
30
32
  text={`${results} ${resultsText(results)}`}
31
33
  />
32
- </When>
33
- <Otherwise>
34
- <div />
35
- </Otherwise>
36
- </Choose>
37
- )
34
+ )
35
+ }
36
+
37
+ const displayResultsCount = () => {
38
+ if (results && title) {
39
+ return (
40
+ <>
41
+ {resultTitle()}
42
+ </>
43
+ )
44
+ } else if (results) {
45
+ return (
46
+ <>
47
+ {justResults()}
48
+ </>
49
+ )
50
+ } else {
51
+ return (
52
+ <div />
53
+ )
54
+ }
55
+ }
56
+
57
+ return (
58
+ <>
59
+ {displayResultsCount()}
60
+ </>
61
+ )
62
+ }
38
63
 
39
64
  export default ResultsCount
@@ -1,5 +1,3 @@
1
- /* @flow */
2
-
3
1
  import React, { useState } from 'react'
4
2
  import { find, map, partial } from 'lodash'
5
3
 
@@ -12,9 +10,9 @@ import PbReactPopover from '../../pb_popover/_popover'
12
10
  export type Direction = 'asc' | 'desc'
13
11
  export type SortOptions = { [name: string]: string }
14
12
  export type SortValue = { name: string, dir: Direction }
15
- export type SortingChangeCallback = (SortValue[]) => void
13
+ export type SortingChangeCallback = (value: SortValue[]) => void
16
14
 
17
- const nextValue = (value: SortValue[], name: string): Direction => {
15
+ const nextValue = (value: SortValue[], name: string): SortValue => {
18
16
  const current = find(value, { name })
19
17
  return {
20
18
  name,
@@ -26,12 +24,13 @@ const directionIcon = (dir: Direction) => (
26
24
  dir == 'asc' ? 'sort-amount-up' : 'sort-amount-down'
27
25
  )
28
26
 
29
- const renderOptions = (options: SortOptions, value: SortValue[], handleChange: (SortValue) => void) => (
27
+ const renderOptions = (options: SortOptions, value: SortValue[], handleChange: (arg0: SortValue) => void) => (
30
28
  map(options, (label, name) => {
31
29
  const next = nextValue(value, name)
32
30
  return (
33
31
  <ListItem key={`option-${next.name}-${next.dir}`}>
34
32
  <Button
33
+ htmlType={undefined}
35
34
  onClick={partial(handleChange, next)}
36
35
  text={` ${label}`}
37
36
  variant="link"
@@ -47,7 +46,7 @@ export type SortMenuProps = {
47
46
  options: SortOptions,
48
47
  value?: SortValue[],
49
48
  }
50
- const SortMenu = ({ dark, options, value, onChange }: SortMenuProps) => {
49
+ const SortMenu = ({ dark, options, value, onChange }: SortMenuProps): React.ReactElement => {
51
50
  const [hide, updateHide] = useState(true)
52
51
  const toggle = () => updateHide(!hide)
53
52
  const handleChange = (value: SortValue) => {
@@ -58,6 +57,7 @@ const SortMenu = ({ dark, options, value, onChange }: SortMenuProps) => {
58
57
  const sortButton = (
59
58
  <Button
60
59
  dark={dark}
60
+ htmlType={undefined}
61
61
  id="sort-button"
62
62
  onClick={toggle}
63
63
  paddingRight="none"
@@ -1,5 +1,3 @@
1
- /* @flow */
2
-
3
1
  import React from 'react'
4
2
  import FilterSingle, { FilterSingleProps } from './FilterSingle'
5
3
  import FilterDouble, { FilterDoubleProps } from './FilterDouble'
@@ -10,16 +8,25 @@ type FilterProps =
10
8
  double?: boolean,
11
9
  })
12
10
 
13
- const Filter = ({ double = false, ...templateProps }: FilterProps) => {
14
- return (
15
- <Choose>
16
- <When condition={double}>
11
+ const Filter = ({
12
+ double = false,
13
+ ...templateProps
14
+ }: FilterProps): React.ReactElement => {
15
+ const displayFilter = () => {
16
+ if (double === true) {
17
+ return (
17
18
  <FilterDouble {...templateProps} />
18
- </When>
19
- <Otherwise>
19
+ )
20
+ } else {
21
+ return (
20
22
  <FilterSingle {...templateProps} />
21
- </Otherwise>
22
- </Choose>
23
+ )
24
+ }
25
+ }
26
+ return (
27
+ <>
28
+ {displayFilter()}
29
+ </>
23
30
  )
24
31
  }
25
32
 
@@ -1,3 +1 @@
1
- /* @flow */
2
-
3
1
  export { default } from './Filter'
@@ -11,14 +11,14 @@ type ListProps = {
11
11
  dark?: boolean;
12
12
  data?: object;
13
13
  id?: string;
14
- layout: "" | "left" | "right";
14
+ layout?: "" | "left" | "right";
15
15
  ordered?: boolean;
16
16
  role?: string;
17
17
  tabIndex?: number;
18
18
  text?: string;
19
19
  size?: string;
20
20
  variant?: string;
21
- xpadding: boolean;
21
+ xpadding?: boolean;
22
22
  };
23
23
 
24
24
  const List = (props: ListProps) => {
@@ -0,0 +1,86 @@
1
+ @import "../pb_textarea/textarea_mixin";
2
+ @import "../tokens/colors";
3
+ @import "../tokens/border_radius";
4
+ @import "../tokens/shadows";
5
+ @import "../tokens/spacing";
6
+
7
+ .pb_multi_level_select {
8
+ .dropdown {
9
+ width: 100%;
10
+ .search {
11
+ border-bottom: none;
12
+ }
13
+
14
+ .toggle.expanded:after {
15
+ border-style: solid;
16
+ border-width: 0.1em 0.1em 0 0;
17
+ content: "";
18
+ display: inline-block;
19
+ height: 0.6em;
20
+ left: 0.1em;
21
+ position: relative;
22
+ vertical-align: top;
23
+ width: 0.6em;
24
+ top: 10px;
25
+ transform: rotate(135deg);
26
+ font-size: 0.5em;
27
+ }
28
+ .toggle.collapsed:after {
29
+ border-style: solid;
30
+ border-width: 0.1em 0.1em 0 0;
31
+ content: "";
32
+ display: inline-block;
33
+ height: 0.6em;
34
+ left: 0.1em;
35
+ position: relative;
36
+ vertical-align: top;
37
+ width: 0.6em;
38
+ top: 10px;
39
+ transform: rotate(135deg);
40
+ font-size: 0.5em;
41
+
42
+ transform: rotate(-45deg);
43
+ top: 12px;
44
+ }
45
+
46
+ .tag {
47
+ height: 37px;
48
+ display: inline-flex;
49
+ justify-content: center;
50
+ align-items: center;
51
+ padding: 0 $space_xxs 0 $space_xs;
52
+ border-radius: 18px;
53
+ background-color: rgba($primary, 0.1);
54
+ color: $primary;
55
+ border: none;
56
+ font-size: 16px;
57
+ font-weight: 700;
58
+
59
+ .tag-remove {
60
+ color: $primary;
61
+ padding-left: $space_xs;
62
+ padding-right: $space_xxs;
63
+ }
64
+ }
65
+ }
66
+ .react-dropdown-tree-select .dropdown .dropdown-trigger {
67
+ width: 100%;
68
+ @include pb_textarea_light;
69
+ }
70
+ .react-dropdown-tree-select .dropdown .dropdown-trigger.arrow.bottom:after {
71
+ content: none;
72
+ }
73
+ .react-dropdown-tree-select .dropdown .dropdown-trigger.arrow.top:after {
74
+ content: none;
75
+ }
76
+
77
+ .react-dropdown-tree-select .dropdown .dropdown-content {
78
+ width: 100%;
79
+ border: 1px solid $border_light;
80
+ border-radius: $border_rad_heavier;
81
+ box-shadow: $shadow_deeper;
82
+ }
83
+ .node.leaf.collapsed {
84
+ display: block !important;
85
+ }
86
+ }