playbook_ui 12.5.0.pre.alpha.filter1 → 12.5.0.pre.alpha.phonerails1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (21) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_filter/Filter/CurrentFilters.jsx +76 -0
  3. data/app/pb_kits/playbook/pb_filter/Filter/{FilterBackground.tsx → FilterBackground.jsx} +14 -12
  4. data/app/pb_kits/playbook/pb_filter/Filter/{FilterDouble.tsx → FilterDouble.jsx} +8 -7
  5. data/app/pb_kits/playbook/pb_filter/Filter/{FilterSingle.tsx → FilterSingle.jsx} +25 -25
  6. data/app/pb_kits/playbook/pb_filter/Filter/{FiltersPopover.tsx → FiltersPopover.jsx} +11 -13
  7. data/app/pb_kits/playbook/pb_filter/Filter/{ResultsCount.tsx → ResultsCount.jsx} +14 -39
  8. data/app/pb_kits/playbook/pb_filter/Filter/{SortMenu.tsx → SortMenu.jsx} +6 -6
  9. data/app/pb_kits/playbook/pb_filter/Filter/{index.tsx → index.jsx} +10 -17
  10. data/app/pb_kits/playbook/pb_filter/{_filter.tsx → _filter.jsx} +2 -0
  11. data/app/pb_kits/playbook/pb_list/_list.tsx +2 -2
  12. data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx +61 -47
  13. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_initial_country.html.erb +3 -0
  14. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_only_countries.html.erb +4 -0
  15. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_preferred_countries.html.erb +4 -0
  16. data/app/pb_kits/playbook/pb_phone_number_input/docs/example.yml +4 -1
  17. data/app/pb_kits/playbook/pb_phone_number_input/phone_number_input.html.erb +1 -15
  18. data/app/pb_kits/playbook/pb_popover/_popover.tsx +32 -33
  19. data/lib/playbook/version.rb +2 -2
  20. metadata +14 -11
  21. data/app/pb_kits/playbook/pb_filter/Filter/CurrentFilters.tsx +0 -72
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: f38164cc9c607578c2f74686bf2715e8006cffd060879d9c23cc52021e42109e
4
- data.tar.gz: 00bdea5c26205ae76a885adc0872c05b36c4965d7736ad60aa685d8cb7ac268c
3
+ metadata.gz: e827c4077969ef2258c6c650173ef5c8227d81aca0a0201c19ae0e136de1decb
4
+ data.tar.gz: aec0d42668e214f8a32b4220704c76af66a2b55a43fbeb0efb28eb6832c45d9a
5
5
  SHA512:
6
- metadata.gz: 42f54dad230676a4f4a9546ac425c3cd0e3772540df2b367a811a83c488176461f5253305865d93e50283d482eb0dbe2cb14ca4feb9e4c52f83d4eac7b576875
7
- data.tar.gz: b7f08be337b4876fc30ac264aa70332793e463526c1b90ddfc32a4335009e61506d313bd4b246d80c301e0019d3867fffcda77ea526f46c16a2dcd2b321ce487
6
+ metadata.gz: ed4ab9a7d46404031c54b2c4e22731d4260d00d2db11af3b280b03f92df607f1afd8a6f3b68d6b52aa6e8866605c5c7fa85c4598a4323b2dfbc6a9d5490ff196
7
+ data.tar.gz: 23d61876cc9d04ea7b378b9ecc896b5d4f0a8d04b336a2b3f0fbf81c24189cc8ac86cc2f0eb65b3760d2da51c9699798a8dbe38c20a98744c3076b6f450706ab
data/app/pb_kits/playbook/pb_filter/Filter/CurrentFilters.jsx ADDED
@@ -0,0 +1,76 @@
1
+ /* @flow */
2
+
3
+ import React from 'react'
4
+ import { isEmpty, map, omitBy } from 'lodash'
5
+
6
+ import Body from '../../pb_body/_body'
7
+ import Caption from '../../pb_caption/_caption'
8
+ import Title from '../../pb_title/_title'
9
+
10
+ export type FilterDescription = {
11
+ [key: string]: ?string | boolean,
12
+ }
13
+
14
+ export type CurrentFiltersProps = {
15
+ dark: boolean,
16
+ filters: FilterDescription,
17
+ }
18
+
19
+ const hiddenFilters = (value) => isEmpty(value) && value !== true
20
+
21
+ const CurrentFilters = ({ dark, filters }: CurrentFiltersProps) => {
22
+ const displayableFilters = omitBy(filters, hiddenFilters)
23
+
24
+ return (
25
+ <div className="maskContainer">
26
+ <If condition={isEmpty(filters)}>
27
+ <div className="filters">
28
+ <Body
29
+ color="light"
30
+ paddingLeft="xs"
31
+ size={4}
32
+ tag="h4"
33
+ text="No Filter Selected"
34
+ />
35
+ </div>
36
+ </If>
37
+ <If condition={!isEmpty(filters)}>
38
+ <div className="filters">
39
+ <div className="left_gradient" />
40
+ {map(displayableFilters, (value, name) => (
41
+ <div
42
+ className="filter"
43
+ key={`filter-${name}`}
44
+ >
45
+ <Choose>
46
+ <When condition={value === true}>
47
+ <Title
48
+ dark={dark}
49
+ size={4}
50
+ tag="h4"
51
+ text={name}
52
+ />
53
+ </When>
54
+ <Otherwise>
55
+ <Caption
56
+ dark={dark}
57
+ text={name}
58
+ />
59
+ <Title
60
+ dark={dark}
61
+ size={4}
62
+ tag="h4"
63
+ text={value}
64
+ />
65
+ </Otherwise>
66
+ </Choose>
67
+ </div>
68
+ ))}
69
+ <div className="right_gradient" />
70
+ </div>
71
+ </If>
72
+ </div>
73
+ )
74
+ }
75
+
76
+ export default CurrentFilters
data/app/pb_kits/playbook/pb_filter/Filter/{FilterBackground.tsx → FilterBackground.jsx} RENAMED
@@ -1,33 +1,35 @@
1
- import React from 'react'
1
+ /* @flow */
2
+
3
+ import React, { Node } from 'react'
2
4
  import classnames from 'classnames'
3
5
 
4
- import { GlobalProps, globalProps } from '../../utilities/globalProps'
6
+ import { globalProps } from '../../utilities/globalProps'
5
7
 
6
8
  import Card from '../../pb_card/_card'
7
9
 
8
- export type FilterBackgroundProps = {
10
+ type FilterBackgroundProps = {
9
11
  background: boolean,
10
12
  className: string,
11
- children?: React.ReactChild[] | React.ReactChild,
13
+ children: Node,
12
14
  dark: boolean,
13
- } & GlobalProps
15
+ }
14
16
 
15
- const FilterBackground = (props: FilterBackgroundProps): React.ReactElement => {
17
+ const FilterBackground = (props: FilterBackgroundProps) => {
16
18
  const { background = true, className, children, dark } = props
17
19
 
18
20
  return (
19
21
  <div className={classnames(`pb_filter_kit ${className}`, globalProps(props))}>
20
- { background ?
22
+ <Choose>
23
+ <When condition={background}>
21
24
  <Card
22
25
  dark={dark}
23
26
  padding="none"
24
27
  >
25
28
  {children}
26
- </Card> :
27
- <>
28
- {children}
29
- </>
30
- }
29
+ </Card>
30
+ </When>
31
+ <Otherwise>{children}</Otherwise>
32
+ </Choose>
31
33
  </div>
32
34
  )
33
35
  }
data/app/pb_kits/playbook/pb_filter/Filter/{FilterDouble.tsx → FilterDouble.jsx} RENAMED
@@ -1,3 +1,5 @@
1
+ /* @flow */
2
+
1
3
  import React from 'react'
2
4
 
3
5
  import CurrentFilters, { FilterDescription } from './CurrentFilters'
@@ -13,14 +15,13 @@ import SortMenu, {
13
15
  import Caption from '../../pb_caption/_caption'
14
16
  import Flex from '../../pb_flex/_flex'
15
17
  import SectionSeparator from '../../pb_section_separator/_section_separator'
16
-
17
18
  export type FilterDoubleProps = {
18
- children?: React.ReactChild[] | React.ReactChild,
19
+ children: Node,
19
20
  filters?: FilterDescription,
20
- onSortChange?: SortingChangeCallback,
21
+ onSortChange: SortingChangeCallback,
21
22
  results?: number,
22
- sortOptions?: SortOptions,
23
- sortValue?: SortValue[],
23
+ sortOptions: SortOptions,
24
+ sortValue?: SortValue,
24
25
  } & FilterBackgroundProps
25
26
 
26
27
  const FilterDouble = ({
@@ -34,7 +35,7 @@ const FilterDouble = ({
34
35
  minWidth,
35
36
  placement,
36
37
  ...bgProps
37
- }: FilterDoubleProps): React.ReactElement => (
38
+ }: FilterDoubleProps) => (
38
39
  <FilterBackground
39
40
  dark={dark}
40
41
  {...bgProps}
@@ -48,7 +49,7 @@ const FilterDouble = ({
48
49
  minWidth={minWidth}
49
50
  placement={placement}
50
51
  >
51
- {children}
52
+ {children}
52
53
  </FiltersPopover>
53
54
  <CurrentFilters
54
55
  dark={dark}
data/app/pb_kits/playbook/pb_filter/Filter/{FilterSingle.tsx → FilterSingle.jsx} RENAMED
@@ -1,3 +1,5 @@
1
+ /* @flow */
2
+
1
3
  import React from 'react'
2
4
  import { isEmpty } from 'lodash'
3
5
 
@@ -14,12 +16,12 @@ import SortMenu, {
14
16
  } from './SortMenu'
15
17
 
16
18
  export type FilterSingleProps = {
17
- children?: React.ReactChild[] | React.ReactChild,
19
+ children?: Node,
18
20
  filters?: FilterDescription,
19
21
  onSortChange?: SortingChangeCallback,
20
22
  results?: number,
21
23
  sortOptions?: SortOptions,
22
- sortValue?: SortValue[],
24
+ sortValue?: SortValue,
23
25
  } & FilterBackgroundProps
24
26
 
25
27
  const FilterSingle = ({
@@ -33,7 +35,7 @@ const FilterSingle = ({
33
35
  minWidth,
34
36
  placement,
35
37
  ...bgProps
36
- }: FilterSingleProps): React.ReactElement => {
38
+ }: FilterSingleProps) => {
37
39
  return (
38
40
  <FilterBackground
39
41
  dark={dark}
@@ -44,33 +46,31 @@ const FilterSingle = ({
44
46
  paddingRight="lg"
45
47
  vertical="center"
46
48
  >
47
- { children &&
48
- <>
49
- <FiltersPopover
50
- dark={dark}
51
- minWidth={minWidth}
52
- placement={placement}
53
- >
49
+ <If condition={children}>
50
+ <FiltersPopover
51
+ dark={dark}
52
+ minWidth={minWidth}
53
+ placement={placement}
54
+ >
54
55
  {children}
55
- </FiltersPopover>
56
- <CurrentFilters
57
- dark={dark}
58
- filters={filters}
59
- />
60
- </>
61
- }
56
+ </FiltersPopover>
57
+ <CurrentFilters
58
+ dark={dark}
59
+ filters={filters}
60
+ />
61
+ </If>
62
62
  <ResultsCount
63
63
  dark={dark}
64
64
  results={results}
65
65
  />
66
- { !isEmpty(sortOptions) &&
67
- <SortMenu
68
- dark={dark}
69
- onChange={onSortChange}
70
- options={sortOptions}
71
- value={sortValue}
72
- />
73
- }
66
+ <If condition={!isEmpty(sortOptions)}>
67
+ <SortMenu
68
+ dark={dark}
69
+ onChange={onSortChange}
70
+ options={sortOptions}
71
+ value={sortValue}
72
+ />
73
+ </If>
74
74
  </Flex>
75
75
  </FilterBackground>
76
76
  )
data/app/pb_kits/playbook/pb_filter/Filter/{FiltersPopover.tsx → FiltersPopover.jsx} RENAMED
@@ -1,15 +1,12 @@
1
- import React, { ReactNode, useState } from 'react'
1
+ /* @flow */
2
+
3
+ import React, { Node, useState } from 'react'
2
4
 
3
5
  import CircleIconButton from '../../pb_circle_icon_button/_circle_icon_button'
4
6
  import PbReactPopover from '../../pb_popover/_popover'
5
7
 
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 => {
8
+ const FiltersPopoverProps = { children: Node }
9
+ const FiltersPopover = ({ children, dark, minWidth, placement = "bottom-start" }: FiltersPopoverProps) => {
13
10
  const [hide, updateHide] = useState(true)
14
11
  const toggle = () => updateHide(!hide)
15
12
 
@@ -19,6 +16,7 @@ const FiltersPopover = ({ children, dark, minWidth, placement = "bottom-start" }
19
16
  icon="filter"
20
17
  id="filter"
21
18
  onClick={toggle}
19
+ text="filter"
22
20
  variant="secondary"
23
21
  />
24
22
  )
@@ -32,11 +30,11 @@ const FiltersPopover = ({ children, dark, minWidth, placement = "bottom-start" }
32
30
  shouldClosePopover={updateHide}
33
31
  show={!hide}
34
32
  >
35
- <div className="pb-form">
36
- {typeof children === 'function'
37
- ? children({ closePopover: () => (updateHide(true)) })
38
- : children}
39
- </div>
33
+ <div className="pb-form">
34
+ {typeof children === 'function'
35
+ ? children({ closePopover: () => (updateHide(true)) })
36
+ : children}
37
+ </div>
40
38
  </PbReactPopover>
41
39
  )
42
40
  }
data/app/pb_kits/playbook/pb_filter/Filter/{ResultsCount.tsx → ResultsCount.jsx} RENAMED
@@ -1,3 +1,5 @@
1
+ /* @flow */
2
+
1
3
  import React from 'react'
2
4
 
3
5
  import Caption from '../../pb_caption/_caption'
@@ -7,58 +9,31 @@ const resultsText = (results: number): string => results == 1 ? 'Result' : 'Resu
7
9
 
8
10
  type ResultsCountProps = {
9
11
  dark?: boolean,
10
- results?: number | null,
12
+ results?: ?number,
11
13
  title?: boolean,
12
14
  }
13
- const ResultsCount = ({ dark, results, title }: ResultsCountProps): React.ReactElement => {
14
-
15
- const resultTitle = () => {
16
- return (
15
+ const ResultsCount = ({ dark, results, title }: ResultsCountProps) => (
16
+ <Choose>
17
+ <When condition={results && title}>
17
18
  <TitleCount
18
19
  align="center"
19
20
  count={results}
20
21
  dark={dark}
21
22
  title={`${resultsText(results)}:`}
22
23
  />
23
- )
24
- }
25
-
26
- const justResults = () => {
27
- return (
24
+ </When>
25
+ <When condition={results}>
28
26
  <Caption
29
27
  className="filter-results"
30
28
  dark={dark}
31
29
  size="xs"
32
30
  text={`${results} ${resultsText(results)}`}
33
31
  />
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
- }
32
+ </When>
33
+ <Otherwise>
34
+ <div />
35
+ </Otherwise>
36
+ </Choose>
37
+ )
63
38
 
64
39
  export default ResultsCount
data/app/pb_kits/playbook/pb_filter/Filter/{SortMenu.tsx → SortMenu.jsx} RENAMED
@@ -1,3 +1,5 @@
1
+ /* @flow */
2
+
1
3
  import React, { useState } from 'react'
2
4
  import { find, map, partial } from 'lodash'
3
5
 
@@ -10,9 +12,9 @@ import PbReactPopover from '../../pb_popover/_popover'
10
12
  export type Direction = 'asc' | 'desc'
11
13
  export type SortOptions = { [name: string]: string }
12
14
  export type SortValue = { name: string, dir: Direction }
13
- export type SortingChangeCallback = (value: SortValue[]) => void
15
+ export type SortingChangeCallback = (SortValue[]) => void
14
16
 
15
- const nextValue = (value: SortValue[], name: string): SortValue => {
17
+ const nextValue = (value: SortValue[], name: string): Direction => {
16
18
  const current = find(value, { name })
17
19
  return {
18
20
  name,
@@ -24,13 +26,12 @@ const directionIcon = (dir: Direction) => (
24
26
  dir == 'asc' ? 'sort-amount-up' : 'sort-amount-down'
25
27
  )
26
28
 
27
- const renderOptions = (options: SortOptions, value: SortValue[], handleChange: (arg0: SortValue) => void) => (
29
+ const renderOptions = (options: SortOptions, value: SortValue[], handleChange: (SortValue) => void) => (
28
30
  map(options, (label, name) => {
29
31
  const next = nextValue(value, name)
30
32
  return (
31
33
  <ListItem key={`option-${next.name}-${next.dir}`}>
32
34
  <Button
33
- htmlType={undefined}
34
35
  onClick={partial(handleChange, next)}
35
36
  text={` ${label}`}
36
37
  variant="link"
@@ -46,7 +47,7 @@ export type SortMenuProps = {
46
47
  options: SortOptions,
47
48
  value?: SortValue[],
48
49
  }
49
- const SortMenu = ({ dark, options, value, onChange }: SortMenuProps): React.ReactElement => {
50
+ const SortMenu = ({ dark, options, value, onChange }: SortMenuProps) => {
50
51
  const [hide, updateHide] = useState(true)
51
52
  const toggle = () => updateHide(!hide)
52
53
  const handleChange = (value: SortValue) => {
@@ -57,7 +58,6 @@ const SortMenu = ({ dark, options, value, onChange }: SortMenuProps): React.Reac
57
58
  const sortButton = (
58
59
  <Button
59
60
  dark={dark}
60
- htmlType={undefined}
61
61
  id="sort-button"
62
62
  onClick={toggle}
63
63
  paddingRight="none"
data/app/pb_kits/playbook/pb_filter/Filter/{index.tsx → index.jsx} RENAMED
@@ -1,3 +1,5 @@
1
+ /* @flow */
2
+
1
3
  import React from 'react'
2
4
  import FilterSingle, { FilterSingleProps } from './FilterSingle'
3
5
  import FilterDouble, { FilterDoubleProps } from './FilterDouble'
@@ -8,25 +10,16 @@ type FilterProps =
8
10
  double?: boolean,
9
11
  })
10
12
 
11
- const Filter = ({
12
- double = false,
13
- ...templateProps
14
- }: FilterProps): React.ReactElement => {
15
- const displayFilter = () => {
16
- if (double === true) {
17
- return (
13
+ const Filter = ({ double = false, ...templateProps }: FilterProps) => {
14
+ return (
15
+ <Choose>
16
+ <When condition={double}>
18
17
  <FilterDouble {...templateProps} />
19
- )
20
- } else {
21
- return (
18
+ </When>
19
+ <Otherwise>
22
20
  <FilterSingle {...templateProps} />
23
- )
24
- }
25
- }
26
- return (
27
- <>
28
- {displayFilter()}
29
- </>
21
+ </Otherwise>
22
+ </Choose>
30
23
  )
31
24
  }
32
25
 
data/app/pb_kits/playbook/pb_filter/{_filter.tsx → _filter.jsx} RENAMED
@@ -1 +1,3 @@
1
+ /* @flow */
2
+
1
3
  export { default } from './Filter'
data/app/pb_kits/playbook/pb_list/_list.tsx CHANGED
@@ -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) => {
data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx CHANGED
@@ -1,32 +1,32 @@
1
1
  /* @flow */
2
- import React, { useEffect, useRef, useState } from 'react'
3
- import classnames from 'classnames'
4
- import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
5
- import { globalProps } from '../utilities/globalProps'
6
- import intlTelInput from 'intl-tel-input'
7
- import 'intl-tel-input/build/css/intlTelInput.css'
8
- import TextInput from '../pb_text_input/_text_input'
2
+ import React, { useEffect, useRef, useState } from "react"
3
+ import classnames from "classnames"
4
+ import { buildAriaProps, buildCss, buildDataProps } from "../utilities/props"
5
+ import { globalProps } from "../utilities/globalProps"
6
+ import intlTelInput from "intl-tel-input"
7
+ import "intl-tel-input/build/css/intlTelInput.css"
8
+ import TextInput from "../pb_text_input/_text_input"
9
9
 
10
10
  declare global {
11
11
  interface Window {
12
- intlTelInputGlobals: any,
12
+ intlTelInputGlobals: any
13
13
  }
14
14
  }
15
15
 
16
16
  type PhoneNumberInputProps = {
17
- aria?: { [key: string]: string },
18
- className?: string,
19
- data?: { [key: string]: string },
20
- disabled?: boolean,
21
- id?: string,
22
- initialCountry?: string,
23
- isValid?: (valid: boolean) => void,
24
- label?: string,
25
- name?: string,
26
- onChange?: (e: React.FormEvent<HTMLInputElement>) => void,
27
- onlyCountries: string[],
28
- preferredCountries?: string[],
29
- value?: string,
17
+ aria?: { [key: string]: string }
18
+ className?: string
19
+ data?: { [key: string]: string }
20
+ disabled?: boolean
21
+ id?: string
22
+ initialCountry?: string
23
+ isValid?: (valid: boolean) => void
24
+ label?: string
25
+ name?: string
26
+ onChange?: (e: React.FormEvent<HTMLInputElement>) => void
27
+ onlyCountries: string[]
28
+ preferredCountries?: string[]
29
+ value?: string
30
30
  }
31
31
 
32
32
  enum ValidationError {
@@ -35,17 +35,20 @@ enum ValidationError {
35
35
  }
36
36
 
37
37
  const formatToGlobalCountryName = (countryName: string) => {
38
- return countryName.split('(')[0].trim()
38
+ return countryName.split("(")[0].trim()
39
39
  }
40
40
 
41
41
  const formatAllCountries = () => {
42
42
  let countryData = window.intlTelInputGlobals.getCountryData()
43
+
43
44
  for (let i = 0; i < countryData.length; i++) {
44
45
  let country = countryData[i]
45
46
  country.name = formatToGlobalCountryName(country.name)
46
47
  }
47
48
  }
48
49
 
50
+ formatAllCountries()
51
+
49
52
  const containOnlyNumbers = (value: string) => {
50
53
  return /^(\++)*(\d+)$/.test(value)
51
54
  }
@@ -56,25 +59,33 @@ const PhoneNumberInput = (props: PhoneNumberInputProps) => {
56
59
  className,
57
60
  data = {},
58
61
  disabled = false,
59
- id = '',
60
- initialCountry = '',
61
- isValid = () => {void 0 },
62
- label = '',
63
- name = '',
64
- onChange = () => { void 0 },
62
+ id = "",
63
+ initialCountry = "",
64
+ isValid = () => {
65
+ void 0
66
+ },
67
+ label = "",
68
+ name = "",
69
+ onChange = () => {
70
+ void 0
71
+ },
65
72
  onlyCountries = [],
66
73
  preferredCountries = [],
67
- value = '',
74
+ value = "",
68
75
  } = props
69
76
 
70
77
  const ariaProps = buildAriaProps(aria)
71
78
  const dataProps = buildDataProps(data)
72
- const classes = classnames(buildCss('pb_phone_number_input'), globalProps(props), className)
79
+ const classes = classnames(
80
+ buildCss("pb_phone_number_input"),
81
+ globalProps(props),
82
+ className
83
+ )
73
84
 
74
85
  const inputRef = useRef<HTMLInputElement>()
75
86
  const [inputValue, setInputValue] = useState(value)
76
87
  const [itiInit, setItiInit] = useState<any>()
77
- const [error, setError] = useState('')
88
+ const [error, setError] = useState("")
78
89
 
79
90
  const validateTooLongNumber = (itiInit: any) => {
80
91
  const error = itiInit.getValidationError()
@@ -83,7 +94,7 @@ const PhoneNumberInput = (props: PhoneNumberInputProps) => {
83
94
  const countryName = itiInit.getSelectedCountryData().name
84
95
  setError(`Invalid ${countryName} phone number (too long)`)
85
96
  } else {
86
- setError('')
97
+ setError("")
87
98
  }
88
99
  }
89
100
 
@@ -98,7 +109,7 @@ const PhoneNumberInput = (props: PhoneNumberInputProps) => {
98
109
 
99
110
  const validateOnlyNumbers = () => {
100
111
  if (inputValue && !containOnlyNumbers(inputValue)) {
101
- setError('Invalid phone number. Enter numbers only.')
112
+ setError("Invalid phone number. Enter numbers only.")
102
113
  }
103
114
  }
104
115
 
@@ -114,29 +125,32 @@ const PhoneNumberInput = (props: PhoneNumberInputProps) => {
114
125
  isValid(itiInit.isValidNumber())
115
126
  }
116
127
 
128
+ // Separating Concerns as React Docs Recommend
129
+ // This also Fixes things for our react_component rendering on the Rails Side
117
130
  useEffect(() => {
118
131
  formatAllCountries()
132
+ }, [])
119
133
 
134
+ useEffect(() => {
120
135
  const telInputInit = new intlTelInput(inputRef.current, {
121
- utilsScript: 'https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.19/js/utils.js',
122
- separateDialCode: true,
123
- preferredCountries,
124
- allowDropdown: !disabled,
125
- initialCountry,
126
- onlyCountries,
127
- }
136
+ utilsScript:
137
+ "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.19/js/utils.js",
138
+ separateDialCode: true,
139
+ preferredCountries,
140
+ allowDropdown: !disabled,
141
+ initialCountry,
142
+ onlyCountries,
143
+ })
144
+
145
+ inputRef.current.addEventListener("countrychange", () =>
146
+ validateTooLongNumber(telInputInit)
128
147
  )
129
-
130
- inputRef.current.addEventListener("countrychange", () => validateTooLongNumber(telInputInit))
148
+
131
149
  setItiInit(telInputInit)
132
150
  }, [])
133
151
 
134
152
  return (
135
- <div
136
- {...ariaProps}
137
- {...dataProps}
138
- className={classes}
139
- >
153
+ <div {...ariaProps} {...dataProps} className={classes}>
140
154
  <TextInput
141
155
  disabled={disabled}
142
156
  error={error}
data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_initial_country.html.erb ADDED
@@ -0,0 +1,3 @@
1
+ <%= pb_rails("phone_number_input", props: {
2
+ initial_country: "br"
3
+ }) %>
data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_only_countries.html.erb ADDED
@@ -0,0 +1,4 @@
1
+ <%= pb_rails("phone_number_input", props: {
2
+ initial_country: "br",
3
+ only_countries: ['us', 'br']
4
+ }) %>
data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_preferred_countries.html.erb ADDED
@@ -0,0 +1,4 @@
1
+ <%= pb_rails("phone_number_input", props: {
2
+ initial_country: "br",
3
+ preferred_countries: ['us', 'br', 'ph', 'gb']
4
+ }) %>
data/app/pb_kits/playbook/pb_phone_number_input/docs/example.yml CHANGED
@@ -7,4 +7,7 @@ examples:
7
7
  - phone_number_input_only_countries: Limited Countries
8
8
 
9
9
  rails:
10
- - phone_number_input_default: Default
10
+ - phone_number_input_default: Default
11
+ - phone_number_input_preferred_countries: Preferred Countries
12
+ - phone_number_input_initial_country: Initial Country
13
+ - phone_number_input_only_countries: Limited Countries
data/app/pb_kits/playbook/pb_phone_number_input/phone_number_input.html.erb CHANGED
@@ -1,15 +1 @@
1
- <%= react_component("PhoneNumberInput", object.phone_number_input_options) %>
2
-
3
- <script>
4
- const formatToGlobalCountryName = () => {
5
- return countryName.split('(')[0].trim()
6
- }
7
-
8
- const formatAllCountries = () => {
9
- let countryData = window.intlTelInputGlobals.getCountryData()
10
- for (let i = 0; i < countryData.length; i++) {
11
- let country = countryData[i]
12
- country.name = formatToGlobalCountryName(country.name)
13
- }
14
- }
15
- </script>
1
+ <%= react_component("PhoneNumberInput", object.phone_number_input_options) %>
data/app/pb_kits/playbook/pb_popover/_popover.tsx CHANGED
@@ -1,5 +1,6 @@
1
1
  import React, { useEffect } from "react";
2
2
  import ReactDOM from "react-dom";
3
+
3
4
  import {
4
5
  Popper,
5
6
  Manager as PopperManager,
@@ -22,7 +23,7 @@ type PbPopoverProps = {
22
23
  aria?: { [key: string]: string };
23
24
  className?: string;
24
25
  closeOnClick?: "outside" | "inside" | "any";
25
- data?: { [key: string]: string },
26
+ data?: object;
26
27
  id?: string;
27
28
  offset?: boolean;
28
29
  reference: PopperReference & any;
@@ -99,31 +100,31 @@ const Popover = (props: PbPopoverProps) => {
99
100
 
100
101
  return (
101
102
  <Popper
102
- modifiers={popoverModifiers({ modifiers, offset })}
103
- placement={placement}
104
- referenceElement={referenceElement}
103
+ modifiers={popoverModifiers({ modifiers, offset })}
104
+ placement={placement}
105
+ referenceElement={referenceElement}
105
106
  >
106
107
  {({ placement, ref, style }) => {
107
108
  return (
108
109
  <div
109
- {...ariaProps}
110
- {...dataProps}
111
- className={classes}
112
- data-placement={placement}
113
- id={id}
114
- ref={ref}
115
- style={Object.assign({}, style, zIndexStyle)}
110
+ {...ariaProps}
111
+ {...dataProps}
112
+ className={classes}
113
+ data-placement={placement}
114
+ id={id}
115
+ ref={ref}
116
+ style={Object.assign({}, style, zIndexStyle)}
116
117
  >
117
118
  <div
118
- className={classnames(`${buildCss("pb_popover_tooltip")} show`)}
119
+ className={classnames(`${buildCss("pb_popover_tooltip")} show`)}
119
120
  >
120
121
  <div
121
- className={classnames(
122
- "pb_popover_body",
123
- popoverSpacing,
124
- overflowHandling
125
- )}
126
- style={widthHeightStyles()}
122
+ className={classnames(
123
+ "pb_popover_body",
124
+ popoverSpacing,
125
+ overflowHandling
126
+ )}
127
+ style={widthHeightStyles()}
127
128
  >
128
129
  {children}
129
130
  </div>
@@ -191,17 +192,17 @@ const PbReactPopover = (props: PbPopoverProps) => {
191
192
 
192
193
  const popoverComponent = (
193
194
  <Popover
194
- className={className}
195
- maxHeight={maxHeight}
196
- maxWidth={maxWidth}
197
- minHeight={minHeight}
198
- minWidth={minWidth}
199
- modifiers={modifiers}
200
- offset={offset}
201
- placement={placement}
202
- referenceElement={referenceElement}
203
- zIndex={zIndex}
204
- {...props}
195
+ className={className}
196
+ maxHeight={maxHeight}
197
+ maxWidth={maxWidth}
198
+ minHeight={minHeight}
199
+ minWidth={minWidth}
200
+ modifiers={modifiers}
201
+ offset={offset}
202
+ placement={placement}
203
+ referenceElement={referenceElement}
204
+ zIndex={zIndex}
205
+ {...props}
205
206
  >
206
207
  {children}
207
208
  </Popover>
@@ -213,9 +214,7 @@ const PbReactPopover = (props: PbPopoverProps) => {
213
214
  {reference && !referenceElement && (
214
215
  <PopperReference>
215
216
  {({ ref }) => (
216
- <span
217
- className="pb_popover_reference_wrapper"
218
- ref={ref}>
217
+ <span className="pb_popover_reference_wrapper" ref={ref}>
219
218
  <reference.type {...reference.props} />
220
219
  </span>
221
220
  )}
@@ -237,4 +236,4 @@ const PbReactPopover = (props: PbPopoverProps) => {
237
236
  );
238
237
  };
239
238
 
240
- export default PbReactPopover;
239
+ export default PbReactPopover;
data/lib/playbook/version.rb CHANGED
@@ -1,6 +1,6 @@
1
1
  # frozen_string_literal: true
2
2
 
3
3
  module Playbook
4
- PREVIOUS_VERSION = "12.5.0.pre.alpha.filter1"
5
- VERSION = "12.5.0.pre.alpha.filter1"
4
+ PREVIOUS_VERSION = "12.5.0"
5
+ VERSION = "12.5.0.pre.alpha.phonerails1"
6
6
  end
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: playbook_ui
3
3
  version: !ruby/object:Gem::Version
4
- version: 12.5.0.pre.alpha.filter1
4
+ version: 12.5.0.pre.alpha.phonerails1
5
5
  platform: ruby
6
6
  authors:
7
7
  - Power UX
@@ -9,7 +9,7 @@ authors:
9
9
  autorequire:
10
10
  bindir: bin
11
11
  cert_chain: []
12
- date: 2023-02-27 00:00:00.000000000 Z
12
+ date: 2023-03-01 00:00:00.000000000 Z
13
13
  dependencies:
14
14
  - !ruby/object:Gem::Dependency
15
15
  name: actionpack
@@ -910,16 +910,16 @@ files:
910
910
  - app/pb_kits/playbook/pb_file_upload/docs/example.yml
911
911
  - app/pb_kits/playbook/pb_file_upload/docs/index.js
912
912
  - app/pb_kits/playbook/pb_file_upload/fileupload.test.js
913
- - app/pb_kits/playbook/pb_filter/Filter/CurrentFilters.tsx
914
- - app/pb_kits/playbook/pb_filter/Filter/FilterBackground.tsx
915
- - app/pb_kits/playbook/pb_filter/Filter/FilterDouble.tsx
916
- - app/pb_kits/playbook/pb_filter/Filter/FilterSingle.tsx
917
- - app/pb_kits/playbook/pb_filter/Filter/FiltersPopover.tsx
918
- - app/pb_kits/playbook/pb_filter/Filter/ResultsCount.tsx
919
- - app/pb_kits/playbook/pb_filter/Filter/SortMenu.tsx
920
- - app/pb_kits/playbook/pb_filter/Filter/index.tsx
913
+ - app/pb_kits/playbook/pb_filter/Filter/CurrentFilters.jsx
914
+ - app/pb_kits/playbook/pb_filter/Filter/FilterBackground.jsx
915
+ - app/pb_kits/playbook/pb_filter/Filter/FilterDouble.jsx
916
+ - app/pb_kits/playbook/pb_filter/Filter/FilterSingle.jsx
917
+ - app/pb_kits/playbook/pb_filter/Filter/FiltersPopover.jsx
918
+ - app/pb_kits/playbook/pb_filter/Filter/ResultsCount.jsx
919
+ - app/pb_kits/playbook/pb_filter/Filter/SortMenu.jsx
920
+ - app/pb_kits/playbook/pb_filter/Filter/index.jsx
921
+ - app/pb_kits/playbook/pb_filter/_filter.jsx
921
922
  - app/pb_kits/playbook/pb_filter/_filter.scss
922
- - app/pb_kits/playbook/pb_filter/_filter.tsx
923
923
  - app/pb_kits/playbook/pb_filter/docs/_description.md
924
924
  - app/pb_kits/playbook/pb_filter/docs/_filter_default.html.erb
925
925
  - app/pb_kits/playbook/pb_filter/docs/_filter_default.jsx
@@ -1561,10 +1561,13 @@ files:
1561
1561
  - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_default.html.erb
1562
1562
  - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_default.jsx
1563
1563
  - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_default.md
1564
+ - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_initial_country.html.erb
1564
1565
  - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_initial_country.jsx
1565
1566
  - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_initial_country.md
1567
+ - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_only_countries.html.erb
1566
1568
  - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_only_countries.jsx
1567
1569
  - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_only_countries.md
1570
+ - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_preferred_countries.html.erb
1568
1571
  - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_preferred_countries.jsx
1569
1572
  - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_preferred_countries.md
1570
1573
  - app/pb_kits/playbook/pb_phone_number_input/docs/example.yml
data/app/pb_kits/playbook/pb_filter/Filter/CurrentFilters.tsx DELETED
@@ -1,72 +0,0 @@
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