playbook_ui 12.12.0.pre.alpha.PLAY697sandpacklayoutstyles413 → 12.13.0.pre.alpha.PLAY705phonenumberkit438

Sign up to get free protection for your applications and to get access to all the features.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: eac850ebbc05e1ce91f38e6377564b32fa3ba241de3ff599b5e0084a39666223
4
- data.tar.gz: 2ce42692684f6598b0c22d7e763ff9bd815044bd28ea806b659746d1f73ea098
3
+ metadata.gz: 8ffc2f1f3d1df264f744d65f5b89a07812fe6e560e9c9137e3f91e2b1eb17816
4
+ data.tar.gz: a85d780b532e6930b7588a22d566023d965398cb73ea2267e8f12ab5e46f3114
5
5
  SHA512:
6
- metadata.gz: 268d73b140d2e8aeb3086a4588b2a42c3f3c0dd26d7c4112b37583bcd85e9657fe59e6854042e2a8c9ca02bb139e4aef5aec926430d9da6f2b98c2c1b92d2d2e
7
- data.tar.gz: f58ed28b37d12a8e3555f44612a907aabb5e60b81cba57c78c017bb86328c6d437d14999849106847bc5967f59f51daac1c3e5bca921f7e7f7958dffc1ee843a
6
+ metadata.gz: b346f34311944e98fb46a98c01fce27798f102ab81cc93db231ddfa570648b613a43a0bb40c8c628b3bc434366d8216f44977c657a5f9dd6fff67c655ce7edec
7
+ data.tar.gz: 0a807e7b97cd9f9524572abc04563d13e25fd0dff7b032e9479a0a41847502b515ee64508432ac7b0e63d48202c9a282022d678923aef7cf408ac6d1cec34b6f
@@ -2,6 +2,7 @@
2
2
  @import "../tokens/spacing";
3
3
 
4
4
  $gapSpaces:(
5
+ xxs: $space_xxs,
5
6
  xs: $space_xs,
6
7
  sm: $space_sm,
7
8
  md: $space_md,
@@ -2,6 +2,7 @@ import React from 'react'
2
2
  import classnames from 'classnames'
3
3
  import { buildCss, buildDataProps } from '../utilities/props'
4
4
  import { GlobalProps, globalProps } from '../utilities/globalProps'
5
+ import { Sizes } from '../types'
5
6
 
6
7
  type FlexProps = {
7
8
  children: React.ReactChild[] | React.ReactNode,
@@ -16,9 +17,9 @@ type FlexProps = {
16
17
  reverse?: boolean,
17
18
  vertical?: "top" | "center" | "bottom" | "stretch" | "baseline" | "none",
18
19
  align?: "start" | "center" | "end" | "stretch" | "baseline" | "none",
19
- gap?: "xs" | "sm" | "md" | "lg" | "xl" | "none",
20
- rowGap?: "xs" | "sm" | "md" | "lg" | "xl" | "none",
21
- columnGap?: "xs" | "sm" | "md" | "lg" | "xl" | "none",
20
+ gap?: Sizes | "none",
21
+ rowGap?: Sizes| "none",
22
+ columnGap?: Sizes| "none",
22
23
  wrap?: boolean,
23
24
  alignSelf?: "start" | "end" | "center" | "stretch" | "none"
24
25
  } & GlobalProps
@@ -1,7 +1,7 @@
1
1
  <%= pb_rails("title", props: {size: 4, text: "Row"}) %>
2
2
  <br/>
3
3
  <div class="flex-doc-example">
4
- <%= pb_rails("flex", props:{ gap: "xs", wrap:true}) do %>
4
+ <%= pb_rails("flex", props:{ gap: "xxs", wrap:true}) do %>
5
5
  <%40.times do |i|%>
6
6
  <%= pb_rails("flex/flex_item") do %> <%=i%> <% end %>
7
7
  <% end %>
@@ -14,7 +14,7 @@ const FlexGap = (props) => {
14
14
  <>
15
15
  <div className="flex-doc-example">
16
16
  <Flex
17
- gap="xs"
17
+ gap="xxs"
18
18
  wrap
19
19
  {...props}
20
20
  >
@@ -1,6 +1,6 @@
1
1
  ##### Prop
2
2
 
3
- * `gap` | `row_gap` | `rowGap` | `column_gap` | `columnGap` | **Type**: String | **Values**: xs | sm | md | lg | xl | none
3
+ * `gap` | `row_gap` | `rowGap` | `column_gap` | `columnGap` | **Type**: String | **Values**: xxs | xs | sm | md | lg | xl | none
4
4
 
5
5
  - Setting the gap prop sets the row_gap || rowGap and the column_gap || columnGap props to the same size and creates equal space within a flex container.
6
6
 
@@ -25,15 +25,15 @@ module Playbook
25
25
  deprecated: true
26
26
 
27
27
  prop :gap, type: Playbook::Props::Enum,
28
- values: %w[xs sm md lg xl none],
28
+ values: %w[xxs xs sm md lg xl none],
29
29
  default: "none"
30
30
 
31
31
  prop :row_gap, type: Playbook::Props::Enum,
32
- values: %w[xs sm md lg xl none],
32
+ values: %w[xxs xs sm md lg xl none],
33
33
  default: "none"
34
34
 
35
35
  prop :column_gap, type: Playbook::Props::Enum,
36
- values: %w[xs sm md lg xl none],
36
+ values: %w[xxs xs sm md lg xl none],
37
37
  default: "none"
38
38
 
39
39
  prop :reverse, type: Playbook::Props::Boolean,
@@ -89,6 +89,7 @@ const PhoneNumberInput = (props: PhoneNumberInputProps) => {
89
89
  const [itiInit, setItiInit] = useState<any>()
90
90
  const [error, setError] = useState('')
91
91
  const [dropDownIsOpen, setDropDownIsOpen] = useState(false)
92
+ const [selectedData, setSelectedData] = useState()
92
93
 
93
94
  const validateTooLongNumber = (itiInit: any) => {
94
95
  const error = itiInit.getValidationError()
@@ -121,10 +122,16 @@ const PhoneNumberInput = (props: PhoneNumberInputProps) => {
121
122
  validateOnlyNumbers()
122
123
  }
123
124
 
125
+ const getCurrentSelectedData = (itiInit: any, inputValue: string) => {
126
+ return { ...itiInit.getSelectedCountryData(), number: inputValue }
127
+ }
128
+
124
129
  const handleOnChange = (evt: React.ChangeEvent<HTMLInputElement>) => {
125
130
  setInputValue(evt.target.value)
126
131
  validateTooLongNumber(itiInit)
127
- onChange(evt)
132
+ const phoneNumberData = getCurrentSelectedData(itiInit, evt.target.value)
133
+ setSelectedData(phoneNumberData)
134
+ onChange(phoneNumberData)
128
135
  isValid(itiInit.isValidNumber())
129
136
  }
130
137
 
@@ -136,15 +143,21 @@ const PhoneNumberInput = (props: PhoneNumberInputProps) => {
136
143
 
137
144
  useEffect(() => {
138
145
  const telInputInit = new intlTelInput(inputRef.current, {
139
- separateDialCode: true,
140
- preferredCountries,
141
- allowDropdown: !disabled,
142
- initialCountry,
143
- onlyCountries,
144
- }
146
+ separateDialCode: true,
147
+ preferredCountries,
148
+ allowDropdown: !disabled,
149
+ initialCountry,
150
+ onlyCountries,
151
+ }
145
152
  )
146
-
147
- inputRef.current.addEventListener("countrychange", () => validateTooLongNumber(telInputInit))
153
+
154
+ inputRef.current.addEventListener("countrychange", (evt: Event) => {
155
+ validateTooLongNumber(telInputInit)
156
+ const phoneNumberData = getCurrentSelectedData(telInputInit, (evt.target as HTMLInputElement).value)
157
+ setSelectedData(phoneNumberData)
158
+ onChange(phoneNumberData)
159
+ })
160
+
148
161
  inputRef.current.addEventListener("open:countrydropdown", () => setDropDownIsOpen(true))
149
162
  inputRef.current.addEventListener("close:countrydropdown", () => setDropDownIsOpen(false))
150
163
 
@@ -156,6 +169,7 @@ const PhoneNumberInput = (props: PhoneNumberInputProps) => {
156
169
  <TextInput
157
170
  className={dropDownIsOpen ? 'dropdown_open' : ''}
158
171
  dark={dark}
172
+ data-phone-number={JSON.stringify(selectedData)}
159
173
  disabled={disabled}
160
174
  error={error}
161
175
  id={id}
@@ -0,0 +1,107 @@
1
+ import React, { useState } 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 Checkbox from "../pb_checkbox/_checkbox";
8
+ import ListItem from "../pb_list/_list_item";
9
+ import Radio from "../pb_radio/_radio";
10
+
11
+ export type SelectableListItemProps = {
12
+ aria?: { [key: string]: string };
13
+ children: React.ReactNode[] | React.ReactNode;
14
+ checked?: boolean;
15
+ className?: string;
16
+ data?: object;
17
+ defaultChecked?: boolean;
18
+ id?: string;
19
+ label?: string;
20
+ text?: string;
21
+ name?: string;
22
+ value?: string;
23
+ variant?: string;
24
+ onChange: (arg: React.ChangeEvent<HTMLInputElement> | null) => void;
25
+ };
26
+
27
+ const SelectableListItem = ({
28
+ aria = {},
29
+ checked = false,
30
+ children,
31
+ className,
32
+ data = {},
33
+ defaultChecked,
34
+ id,
35
+ label,
36
+ text = "",
37
+ name = "",
38
+ value = "",
39
+ variant = "checkbox",
40
+ onChange = () => {},
41
+ ...props
42
+ }: SelectableListItemProps) => {
43
+ const ariaProps = buildAriaProps(aria);
44
+ const dataProps = buildDataProps(data);
45
+ const classes = classnames(
46
+ buildCss("pb_selectable_list_item_kit"),
47
+ globalProps(props),
48
+ className
49
+ );
50
+
51
+ const initialCheckedState = checked;
52
+ const [checkedState, setCheckedState] = useState(initialCheckedState);
53
+
54
+ const handleChecked = (event: React.ChangeEvent<HTMLInputElement>) => {
55
+ onChange(event);
56
+ setCheckedState(event.target.checked);
57
+ };
58
+
59
+ return (
60
+ <ListItem
61
+ {...props}
62
+ className={classnames(checkedState ? "checked_item" : "", className)}
63
+ >
64
+ <div {...ariaProps} {...dataProps} className={classes}>
65
+ {variant == "checkbox" && (
66
+ <>
67
+ <Checkbox
68
+ checked={checkedState}
69
+ id={id}
70
+ name={name}
71
+ onChange={handleChecked}
72
+ // eslint suppressor, text is needed to display on screen
73
+ //@ts-ignore
74
+ text={label || (text && false)}
75
+ type="checkbox"
76
+ value={value}
77
+ {...props}
78
+ />
79
+ {children}
80
+ </>
81
+ )}
82
+ {variant == "radio" && (
83
+ <>
84
+ <Radio
85
+ defaultChecked={defaultChecked}
86
+ id={id}
87
+ label={label}
88
+ name={name}
89
+ onChange={onChange}
90
+ //@ts-ignore
91
+ text={label}
92
+ type="radio"
93
+ value={value}
94
+ {...props}
95
+ />
96
+ {children}
97
+ </>
98
+ )}
99
+ {variant !== "checkbox" && variant !== "radio" && (
100
+ { children }
101
+ )}
102
+ </div>
103
+ </ListItem>
104
+ );
105
+ };
106
+
107
+ export default SelectableListItem;
@@ -1,16 +1,16 @@
1
- /* @flow */
2
1
  import React, { useState } from 'react'
3
2
  import classnames from 'classnames'
4
3
 
5
4
  import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
6
5
  import { globalProps } from '../utilities/globalProps'
6
+ import { SelectableListItemProps } from './_item.js'
7
7
 
8
8
  import List from '../pb_list/_list'
9
- import SelectableListItem from './_item.jsx'
9
+ import SelectableListItem from './_item'
10
10
 
11
11
  type SelectableListProps = {
12
- aria?: object,
13
- children?: Node,
12
+ aria?: {[key: string]: string },
13
+ children?: React.ReactElement[],
14
14
  className?: string,
15
15
  data?: object,
16
16
  id?: string,
@@ -30,17 +30,18 @@ const SelectableList = (props: SelectableListProps) => {
30
30
  const classes = classnames(buildCss('pb_selectable_list_kit'), globalProps(props), className)
31
31
  const dataProps = buildDataProps(data)
32
32
  const isRadio = props.variant === "radio"
33
- const defaultCheckedRadioValue = children.filter(item => item.props.defaultChecked)[0]?.props?.value
33
+ const defaultCheckedRadioValue = children.filter((item: {props:SelectableListItemProps} ) => item.props.defaultChecked)[0]?.props?.value
34
+
34
35
  const [selectedRadioValue, setSelectedRadioValue] = useState(defaultCheckedRadioValue)
35
36
 
36
- const onChangeRadioValue = ({ target }) => {
37
+ const onChangeRadioValue = ({ target }: React.ChangeEvent<HTMLInputElement>) => {
37
38
  setSelectedRadioValue(target.value)
38
39
  }
39
40
 
40
41
  let selectableListItems = children
41
42
 
42
43
  if (isRadio) {
43
- selectableListItems = children.map(({ props }) => {
44
+ selectableListItems = children.map(( {props}: {props:SelectableListItemProps} ) => {
44
45
  return (
45
46
  <SelectableListItem
46
47
  {...props}
@@ -51,6 +52,7 @@ const SelectableList = (props: SelectableListProps) => {
51
52
  )
52
53
  })
53
54
  }
55
+
54
56
 
55
57
  return (
56
58
  <div
@@ -59,13 +61,13 @@ const SelectableList = (props: SelectableListProps) => {
59
61
  className={classes}
60
62
  id={id}
61
63
  >
62
- <List {...props}>
64
+ <List variant={props.variant}>
63
65
  {selectableListItems}
64
66
  </List>
65
67
  </div>
66
68
  )
67
69
  }
68
-
70
+
69
71
  SelectableList.Item = SelectableListItem
70
72
 
71
73
  export default SelectableList
@@ -0,0 +1,68 @@
1
+ import React from 'react'
2
+ import { render, screen } from '../utilities/test-utils'
3
+ import SelectableList from './_selectable_list'
4
+
5
+ const testId = "selectable-list-test"
6
+
7
+ const SelectableListCheckbox = () => {
8
+ return (
9
+ <SelectableList
10
+ data={{ testid: testId }}
11
+ variant="checkbox">
12
+ <SelectableList.Item
13
+ label="Mild"
14
+ name="checkbox-name-1"
15
+ value="1"
16
+ />
17
+ <SelectableList.Item
18
+ checked
19
+ label="Medium"
20
+ name="checkbox-name-2"
21
+ value="2"
22
+ />
23
+ </SelectableList>
24
+ )
25
+ }
26
+
27
+ const SelectableListRadio = () => {
28
+ return (
29
+ <SelectableList
30
+ data={{ testid: testId }}
31
+ variant="radio">
32
+ <SelectableList.Item
33
+ label="Small"
34
+ name="radio"
35
+ value="1"
36
+ />
37
+ <SelectableList.Item
38
+ defaultChecked
39
+ label="Medium"
40
+ name="radio"
41
+ value="2"
42
+ />
43
+ </SelectableList>
44
+ )
45
+ }
46
+
47
+
48
+ test("classname renders as expected", () => {
49
+ render(<SelectableListCheckbox />)
50
+
51
+ const kit = screen.getByTestId("selectable-list-test")
52
+ expect(kit).toHaveClass("pb_selectable_list_kit")
53
+ })
54
+
55
+ test("renders variant checkbox", () => {
56
+ render(<SelectableListCheckbox />)
57
+ const kit = screen.getByTestId("selectable-list-test")
58
+ const checkbox = kit.querySelector(".pb_checkbox_kit")
59
+ expect(checkbox).toBeInTheDocument()
60
+ })
61
+
62
+ test("renders variant radio", () => {
63
+ render(<SelectableListRadio />)
64
+ const kit = screen.getByTestId("selectable-list-test")
65
+ const checkbox = kit.querySelector(".pb_radio_kit")
66
+ expect(checkbox).toBeInTheDocument()
67
+
68
+ })
@@ -1,6 +1,6 @@
1
1
  # frozen_string_literal: true
2
2
 
3
3
  module Playbook
4
- PREVIOUS_VERSION = "12.12.0"
5
- VERSION = "12.12.0.pre.alpha.PLAY697sandpacklayoutstyles413"
4
+ PREVIOUS_VERSION = "12.13.0"
5
+ VERSION = "12.13.0.pre.alpha.PLAY705phonenumberkit438"
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.12.0.pre.alpha.PLAY697sandpacklayoutstyles413
4
+ version: 12.13.0.pre.alpha.PLAY705phonenumberkit438
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-04-04 00:00:00.000000000 Z
12
+ date: 2023-04-06 00:00:00.000000000 Z
13
13
  dependencies:
14
14
  - !ruby/object:Gem::Dependency
15
15
  name: actionpack
@@ -1843,9 +1843,9 @@ files:
1843
1843
  - app/pb_kits/playbook/pb_selectable_icon/selectable_icon.html.erb
1844
1844
  - app/pb_kits/playbook/pb_selectable_icon/selectable_icon.rb
1845
1845
  - app/pb_kits/playbook/pb_selectable_icon/selectable_icon.test.js
1846
- - app/pb_kits/playbook/pb_selectable_list/_item.jsx
1847
- - app/pb_kits/playbook/pb_selectable_list/_selectable_list.jsx
1846
+ - app/pb_kits/playbook/pb_selectable_list/_item.tsx
1848
1847
  - app/pb_kits/playbook/pb_selectable_list/_selectable_list.scss
1848
+ - app/pb_kits/playbook/pb_selectable_list/_selectable_list.tsx
1849
1849
  - app/pb_kits/playbook/pb_selectable_list/docs/_selectable_list_checkbox.html.erb
1850
1850
  - app/pb_kits/playbook/pb_selectable_list/docs/_selectable_list_checkbox.jsx
1851
1851
  - app/pb_kits/playbook/pb_selectable_list/docs/_selectable_list_radio.html.erb
@@ -1854,6 +1854,7 @@ files:
1854
1854
  - app/pb_kits/playbook/pb_selectable_list/docs/index.js
1855
1855
  - app/pb_kits/playbook/pb_selectable_list/selectable_list.html.erb
1856
1856
  - app/pb_kits/playbook/pb_selectable_list/selectable_list.rb
1857
+ - app/pb_kits/playbook/pb_selectable_list/selectable_list.test.js
1857
1858
  - app/pb_kits/playbook/pb_selectable_list/selectable_list_item.html.erb
1858
1859
  - app/pb_kits/playbook/pb_selectable_list/selectable_list_item.rb
1859
1860
  - app/pb_kits/playbook/pb_source/_source.scss
@@ -1,106 +0,0 @@
1
- /* @flow */
2
-
3
- import React, { Node, useState } from 'react'
4
- import classnames from 'classnames'
5
-
6
- import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
7
- import { globalProps } from '../utilities/globalProps'
8
-
9
- import Checkbox from '../pb_checkbox/_checkbox'
10
- import ListItem from '../pb_list/_list_item'
11
- import Radio from '../pb_radio/_radio'
12
-
13
- type SelectableListItemProps = {
14
- aria?: object,
15
- children: array<Node> | Node,
16
- checked?: boolean,
17
- className?: string,
18
- data?: object,
19
- defaultChecked?: boolean,
20
- id?: string,
21
- label?: string,
22
- text?: string,
23
- name?: string,
24
- value?: string,
25
- variant?: string,
26
- onChange: (boolean)=>void,
27
- }
28
-
29
- const SelectableListItem = ({
30
- aria = {},
31
- checked = false,
32
- children,
33
- className,
34
- data = {},
35
- defaultChecked,
36
- id,
37
- label,
38
- text = '',
39
- name = '',
40
- value = '',
41
- variant = 'checkbox',
42
- onChange = () => {},
43
- ...props
44
- }: SelectableListItemProps) => {
45
- const ariaProps = buildAriaProps(aria)
46
- const dataProps = buildDataProps(data)
47
- const classes = classnames(
48
- buildCss('pb_selectable_list_item_kit'),
49
- globalProps(props),
50
- className
51
- )
52
-
53
- const initialCheckedState = checked
54
- const [checkedState, setCheckedState] = useState(initialCheckedState)
55
-
56
- const handleChecked = (event) => {
57
- onChange(event)
58
- setCheckedState(event.target.checked)
59
- }
60
-
61
- return (
62
- <ListItem
63
- {...props}
64
- className={classnames(checkedState ? "checked_item" : "", className)}
65
- >
66
- <div
67
- {...ariaProps}
68
- {...dataProps}
69
- className={classes}
70
- >
71
- <Choose>
72
- <When condition={variant == 'checkbox'}>
73
- <Checkbox
74
- checked={checkedState}
75
- id={id}
76
- name={name}
77
- onChange={handleChecked}
78
- // eslint suppressor, text is needed to display on screen
79
- text={label || (text && false)}
80
- type="checkbox"
81
- value={value}
82
- {...props}
83
- />
84
- {children}
85
- </When>
86
- <When condition={variant == 'radio'}>
87
- <Radio
88
- defaultChecked={defaultChecked}
89
- id={id}
90
- label={label}
91
- name={name}
92
- onChange={onChange}
93
- type="radio"
94
- value={value}
95
- {...props}
96
- />
97
- {children}
98
- </When>
99
- <Otherwise>{children}</Otherwise>
100
- </Choose>
101
- </div>
102
- </ListItem>
103
- )
104
- }
105
-
106
- export default SelectableListItem