playbook_ui 12.4.0.pre.alpha.map1 → 12.5.0.pre.alpha.filter1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (32) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_date_picker/_date_picker.tsx +37 -33
  3. data/app/pb_kits/playbook/pb_filter/Filter/CurrentFilters.tsx +72 -0
  4. data/app/pb_kits/playbook/pb_filter/Filter/{FilterBackground.jsx → FilterBackground.tsx} +12 -14
  5. data/app/pb_kits/playbook/pb_filter/Filter/{FilterDouble.jsx → FilterDouble.tsx} +7 -8
  6. data/app/pb_kits/playbook/pb_filter/Filter/{FilterSingle.jsx → FilterSingle.tsx} +25 -25
  7. data/app/pb_kits/playbook/pb_filter/Filter/{FiltersPopover.jsx → FiltersPopover.tsx} +13 -11
  8. data/app/pb_kits/playbook/pb_filter/Filter/{ResultsCount.jsx → ResultsCount.tsx} +39 -14
  9. data/app/pb_kits/playbook/pb_filter/Filter/{SortMenu.jsx → SortMenu.tsx} +6 -6
  10. data/app/pb_kits/playbook/pb_filter/Filter/{index.jsx → index.tsx} +17 -10
  11. data/app/pb_kits/playbook/pb_filter/{_filter.jsx → _filter.tsx} +0 -2
  12. data/app/pb_kits/playbook/pb_list/_list.tsx +2 -2
  13. data/app/pb_kits/playbook/pb_loading_inline/_loading_inline.tsx +55 -0
  14. data/app/pb_kits/playbook/pb_loading_inline/loading_inline.test.js +41 -0
  15. data/app/pb_kits/playbook/pb_map/docs/_map_default.jsx +0 -1
  16. data/app/pb_kits/playbook/pb_map/docs/_map_default.md +3 -3
  17. data/app/pb_kits/playbook/pb_map/docs/_map_with_plugin.jsx +7 -6
  18. data/app/pb_kits/playbook/pb_message/{_message.jsx → _message.tsx} +35 -35
  19. data/app/pb_kits/playbook/pb_message/message.test.js +63 -0
  20. data/app/pb_kits/playbook/pb_passphrase/{_passphrase.jsx → _passphrase.tsx} +56 -56
  21. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_default.html.erb +3 -0
  22. data/app/pb_kits/playbook/pb_phone_number_input/docs/example.yml +3 -0
  23. data/app/pb_kits/playbook/pb_phone_number_input/phone_number_input.html.erb +15 -0
  24. data/app/pb_kits/playbook/pb_phone_number_input/phone_number_input.rb +43 -0
  25. data/app/pb_kits/playbook/pb_popover/_popover.tsx +36 -35
  26. data/app/pb_kits/playbook/pb_selectable_list/_selectable_list.scss +1 -1
  27. data/app/pb_kits/playbook/pb_typeahead/_typeahead.scss +4 -0
  28. data/app/pb_kits/playbook/playbook-rails-react-bindings.js +2 -0
  29. data/lib/playbook/version.rb +2 -2
  30. metadata +19 -14
  31. data/app/pb_kits/playbook/pb_filter/Filter/CurrentFilters.jsx +0 -76
  32. data/app/pb_kits/playbook/pb_loading_inline/_loading_inline.jsx +0 -37
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: cfb56ccfe4d074f937f3852aca075561d3c1bfcc5d17dba3387cd7c83d65e2d3
4
- data.tar.gz: 782e95a4369e896264d23ed06aa3abd7b51ac4998cf88a0b196964ccdf95c7b5
3
+ metadata.gz: f38164cc9c607578c2f74686bf2715e8006cffd060879d9c23cc52021e42109e
4
+ data.tar.gz: 00bdea5c26205ae76a885adc0872c05b36c4965d7736ad60aa685d8cb7ac268c
5
5
  SHA512:
6
- metadata.gz: e568396ef02503818d31e36846f0bb92c69e0857dd7a7c10b4c8d7de0187cf5adf29c87092f4fc29804efaaa5816e0d08198699843bb6755bedcff83220dd205
7
- data.tar.gz: 746452d8c6cffee0eec29e9864283b81d6fc63df8218eee2f5ed5c320916026ca63076f7add17ef57b51a1a0e16dbf600d1ae2dfa5e393e2e4c256c675304bc0
6
+ metadata.gz: 42f54dad230676a4f4a9546ac425c3cd0e3772540df2b367a811a83c488176461f5253305865d93e50283d482eb0dbe2cb14ca4feb9e4c52f83d4eac7b576875
7
+ data.tar.gz: b7f08be337b4876fc30ac264aa70332793e463526c1b90ddfc32a4335009e61506d313bd4b246d80c301e0019d3867fffcda77ea526f46c16a2dcd2b321ce487
@@ -14,7 +14,7 @@ type DatePickerProps = {
14
14
  aria?: {[key: string]: string},
15
15
  className?: string,
16
16
  dark?: boolean,
17
- data?: object,
17
+ data?: { [key: string]: string },
18
18
  defaultDate?: string,
19
19
  disableDate?: number[],
20
20
  disableInput?: boolean,
@@ -27,8 +27,8 @@ type DatePickerProps = {
27
27
  hideLabel?: boolean,
28
28
  id?: string,
29
29
  inLine?: boolean,
30
- inputAria?: object,
31
- inputData?: object,
30
+ inputAria?: {[key: string]: string},
31
+ inputData?: {[key: string]: string},
32
32
  inputOnChange?: (arg: string) => void,
33
33
  inputValue?: any,
34
34
  label?: string,
@@ -47,7 +47,7 @@ type DatePickerProps = {
47
47
  yearRange?: number[],
48
48
  } & GlobalProps
49
49
 
50
- const DatePicker = (props: DatePickerProps) => {
50
+ const DatePicker = (props: DatePickerProps): React.ReactElement => {
51
51
  if (props.plugins) deprecatedProps('Date Picker', ['plugins'])
52
52
 
53
53
  const {
@@ -67,7 +67,7 @@ const DatePicker = (props: DatePickerProps) => {
67
67
  hideIcon = false,
68
68
  hideLabel = false,
69
69
  id,
70
- inLine = true,
70
+ inLine = false,
71
71
  inputAria,
72
72
  inputData,
73
73
  inputOnChange,
@@ -77,7 +77,7 @@ const DatePicker = (props: DatePickerProps) => {
77
77
  minDate,
78
78
  mode = 'single',
79
79
  name,
80
- onChange = () => {},
80
+ onChange = () => { void 0 },
81
81
  pickerId,
82
82
  placeholder = 'Select Date',
83
83
  plugins = false,
@@ -163,36 +163,40 @@ const DatePicker = (props: DatePickerProps) => {
163
163
  value={inputValue}
164
164
  />
165
165
 
166
- {!hideIcon &&
166
+ { !hideIcon &&
167
167
  <div
168
- className={iconWrapperClass()}
169
- id={`cal-icon-${pickerId}`}
170
- >
171
- <Icon
172
- className="cal_icon"
173
- icon="calendar-alt"
174
- />
175
- </div>
176
- }
177
-
178
-
179
- { hideIcon && inLine ? <><div
180
- className={iconWrapperClass()}
181
- id={`${pickerId}-icon-plus`}
182
- >
168
+ className={iconWrapperClass()}
169
+ id={`cal-icon-${pickerId}`}
170
+ >
183
171
  <Icon
184
- className="date-picker-plus-icon"
185
- icon="plus" />
186
- </div><div
187
- className={iconWrapperClass()}
188
- id={`${pickerId}-angle-down`}
189
- >
190
- <Icon
191
- className="angle_down_icon"
192
- icon="angle-down" />
193
- </div></> : null}
194
-
172
+ className="cal_icon"
173
+ icon="calendar-alt"
174
+ />
175
+ </div>
176
+ }
195
177
 
178
+ { hideIcon && inLine ?
179
+ <div>
180
+ <div
181
+ className={iconWrapperClass()}
182
+ id={`${pickerId}-icon-plus`}
183
+ >
184
+ <Icon
185
+ className="date-picker-plus-icon"
186
+ icon="plus"
187
+ />
188
+ </div>
189
+ <div
190
+ className={iconWrapperClass()}
191
+ id={`${pickerId}-angle-down`}
192
+ >
193
+ <Icon
194
+ className="angle_down_icon"
195
+ icon="angle-down"
196
+ />
197
+ </div>
198
+ </div>
199
+ : null }
196
200
  </div>
197
201
  </div>
198
202
  )
@@ -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,55 @@
1
+ import React from 'react'
2
+ import classnames from 'classnames'
3
+
4
+ import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
5
+ import { globalProps } from '../utilities/globalProps'
6
+
7
+ import Body from '../pb_body/_body'
8
+ import Icon from '../pb_icon/_icon'
9
+
10
+ type LoadingInlineProps = {
11
+ align?: "left" | "center" | "right",
12
+ aria?: { [key: string]: string },
13
+ className?: string,
14
+ data?: { [key: string]: string },
15
+ id?: string,
16
+ }
17
+
18
+ const LoadingInline = (props: LoadingInlineProps) => {
19
+ const {
20
+ align = 'left',
21
+ aria = {},
22
+ className,
23
+ data = {},
24
+ id,
25
+ } = props
26
+
27
+ const ariaProps = buildAriaProps(aria)
28
+ const dataProps = buildDataProps(data)
29
+ const classes = classnames(
30
+ buildCss(`pb_loading_inline_kit_${align}`),
31
+ globalProps(props),
32
+ className
33
+ )
34
+
35
+ return (
36
+ <div
37
+ {...ariaProps}
38
+ {...dataProps}
39
+ className={classes}
40
+ id={id}
41
+ >
42
+ <Body color="light">
43
+ <Icon
44
+ aria={{ label: 'loading icon' }}
45
+ fixedWidth
46
+ icon="spinner"
47
+ pulse
48
+ />
49
+ {' Loading'}
50
+ </Body>
51
+ </div>
52
+ )
53
+ }
54
+
55
+ export default LoadingInline