playbook_ui 11.1.1 → 11.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (50) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/_playbook.scss +1 -0
  3. data/app/pb_kits/playbook/data/menu.yml +14 -0
  4. data/app/pb_kits/playbook/index.js +1 -0
  5. data/app/pb_kits/playbook/pb_bread_crumbs/docs/_description.md +1 -1
  6. data/app/pb_kits/playbook/pb_button_toolbar/{_button_toolbar.jsx → _button_toolbar.tsx} +3 -3
  7. data/app/pb_kits/playbook/pb_caption/_caption.tsx +1 -1
  8. data/app/pb_kits/playbook/pb_contact/_contact.jsx +7 -6
  9. data/app/pb_kits/playbook/pb_contact/contact.rb +4 -0
  10. data/app/pb_kits/playbook/pb_contact/contact.test.js +87 -0
  11. data/app/pb_kits/playbook/pb_contact/docs/_contact_with_detail.html.erb +6 -0
  12. data/app/pb_kits/playbook/pb_contact/docs/_contact_with_detail.jsx +6 -0
  13. data/app/pb_kits/playbook/pb_dialog/_dialog.jsx +61 -12
  14. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_default.jsx +1 -1
  15. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_stacked_alert.jsx +153 -0
  16. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_stacked_alert.md +1 -0
  17. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_status.jsx +130 -0
  18. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_status.md +1 -0
  19. data/app/pb_kits/playbook/pb_dialog/docs/example.yml +2 -0
  20. data/app/pb_kits/playbook/pb_dialog/docs/index.js +2 -0
  21. data/app/pb_kits/playbook/pb_flex/_flex_item.tsx +50 -0
  22. data/app/pb_kits/playbook/pb_icon/_icon.tsx +15 -13
  23. data/app/pb_kits/playbook/pb_lightbox/Carousel/Slide.tsx +53 -0
  24. data/app/pb_kits/playbook/pb_lightbox/Carousel/Slides.tsx +35 -0
  25. data/app/pb_kits/playbook/pb_lightbox/Carousel/Thumbnail.tsx +39 -0
  26. data/app/pb_kits/playbook/pb_lightbox/Carousel/Thumbnails.tsx +75 -0
  27. data/app/pb_kits/playbook/pb_lightbox/Carousel/index.tsx +57 -0
  28. data/app/pb_kits/playbook/pb_lightbox/_lightbox.tsx +115 -0
  29. data/app/pb_kits/playbook/pb_lightbox/_lightbox_context.tsx +3 -0
  30. data/app/pb_kits/playbook/pb_lightbox/_lightbox_header.tsx +109 -0
  31. data/app/pb_kits/playbook/pb_lightbox/_lightbox_header_icon.tsx +27 -0
  32. data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_compound_component.jsx +66 -0
  33. data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_compound_component.md +1 -0
  34. data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_default.jsx +65 -0
  35. data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_default.md +1 -0
  36. data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_multiple.jsx +91 -0
  37. data/app/pb_kits/playbook/pb_lightbox/docs/example.yml +6 -0
  38. data/app/pb_kits/playbook/pb_lightbox/docs/index.js +3 -0
  39. data/app/pb_kits/playbook/pb_lightbox/hooks/useKbdControls.ts +34 -0
  40. data/app/pb_kits/playbook/pb_lightbox/hooks/useVisibility.js +21 -0
  41. data/app/pb_kits/playbook/pb_lightbox/hooks/useWindowSize.ts +30 -0
  42. data/app/pb_kits/playbook/pb_lightbox/lightbox.scss +222 -0
  43. data/app/pb_kits/playbook/pb_lightbox/lightbox.test.jsx +124 -0
  44. data/app/pb_kits/playbook/pb_radio/_radio.tsx +86 -0
  45. data/app/pb_kits/playbook/playbook-doc.js +2 -0
  46. data/app/pb_kits/playbook/utilities/globalProps.ts +1 -1
  47. data/dist/reset.css +60 -1
  48. data/lib/playbook/version.rb +2 -2
  49. metadata +31 -4
  50. data/app/pb_kits/playbook/pb_radio/_radio.jsx +0 -78
data/app/pb_kits/playbook/pb_lightbox/lightbox.test.jsx ADDED
@@ -0,0 +1,124 @@
1
+ import React from 'react'
2
+ import { fireEvent, render, screen, waitForElementToBeRemoved } from '../utilities/test-utils'
3
+
4
+ import { Lightbox } from '../'
5
+
6
+ const testId = 'customId',
7
+ kitClass = 'pb_lightbox_kit',
8
+ TEST_PHOTOS = [
9
+ 'https://images.unsplash.com/photo-1638727228877-d2a79ab75e68?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2668&q=80',
10
+ 'https://images.unsplash.com/photo-1526657782461-9fe13402a841?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1984&q=80',
11
+ 'https://images.unsplash.com/photo-1523057530100-383d7fbc77a1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2669&q=80',
12
+ ]
13
+
14
+ test('Kit renders', () => {
15
+ render(
16
+ <Lightbox
17
+ className="customClass"
18
+ data={{ testid: testId }}
19
+ icon="close"
20
+ iconSize="3x"
21
+ id="test1"
22
+ initialPhoto={1}
23
+ onClose={() => {}}
24
+ photos={TEST_PHOTOS}
25
+ />
26
+ )
27
+ const kit = screen.getByTestId(testId)
28
+ expect(kit).toHaveClass(`${kitClass} customClass`)
29
+ expect(kit).toBeInTheDocument()
30
+ })
31
+
32
+ test('Shows selected images', () => {
33
+ render(
34
+ <Lightbox
35
+ data={{ testid: testId }}
36
+ icon="close"
37
+ iconSize="3x"
38
+ id="test1"
39
+ initialPhoto={1}
40
+ onClose={() => {}}
41
+ photos={TEST_PHOTOS}
42
+ />
43
+ )
44
+ const kit = screen.getByTestId(testId)
45
+ const slide = kit.getElementsByClassName('Slide')[0]
46
+ const image = slide.getElementsByTagName('img')[0]
47
+ expect(image).toHaveAttribute('src', TEST_PHOTOS[1])
48
+
49
+ const thumbnails = kit.getElementsByClassName('Thumbnail')
50
+
51
+ fireEvent(
52
+ thumbnails[2],
53
+ new MouseEvent('click', {
54
+ bubbles: true,
55
+ cancelable: true,
56
+ }),
57
+ )
58
+
59
+ expect(image).toHaveAttribute('src', TEST_PHOTOS[2])
60
+
61
+ fireEvent(
62
+ thumbnails[0],
63
+ new MouseEvent('click', {
64
+ bubbles: true,
65
+ cancelable: true,
66
+ }),
67
+ )
68
+
69
+ expect(image).toHaveAttribute('src', TEST_PHOTOS[0])
70
+ })
71
+
72
+ test('Closes on escape key', async () => {
73
+ render(
74
+ <Lightbox
75
+ data={{ testid: testId }}
76
+ icon="close"
77
+ iconSize="3x"
78
+ id="test1"
79
+ initialPhoto={0}
80
+ onClose={() => {}}
81
+ photos={TEST_PHOTOS}
82
+ />
83
+ )
84
+
85
+ const kit = screen.getByTestId(testId)
86
+
87
+ fireEvent(
88
+ document.body,
89
+ new KeyboardEvent('keydown', {
90
+ keyCode: 27, //escape
91
+ })
92
+ )
93
+
94
+ waitForElementToBeRemoved(kit)
95
+ .then(() => expect(kit).not.toBeInTheDocument())
96
+ })
97
+
98
+ test('Closes on close button', () => {
99
+ render(
100
+ <Lightbox
101
+ data={{ testid: testId }}
102
+ icon="close"
103
+ iconSize="3x"
104
+ id="test1"
105
+ initialPhoto={0}
106
+ onClose={() => {}}
107
+ photos={TEST_PHOTOS}
108
+ />
109
+ )
110
+
111
+ const kit = screen.getByTestId(testId)
112
+ const closeIcon = kit.getElementsByClassName('close-icon')[0]
113
+
114
+ fireEvent(
115
+ closeIcon,
116
+ new MouseEvent('click', {
117
+ bubbles: true,
118
+ cancelable: true,
119
+ }),
120
+ )
121
+
122
+ waitForElementToBeRemoved(kit)
123
+ .then(() => expect(kit).not.toBeInTheDocument())
124
+ })
data/app/pb_kits/playbook/pb_radio/_radio.tsx ADDED
@@ -0,0 +1,86 @@
1
+ /*eslint-disable react/no-multi-comp, flowtype/space-before-type-colon */
2
+
3
+ import React, { forwardRef } from 'react'
4
+ import Body from '../pb_body/_body'
5
+ import classnames from 'classnames'
6
+ import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
7
+ import { globalProps, GlobalProps } from '../utilities/globalProps'
8
+
9
+ type RadioProps = {
10
+ aria?: {[key: string]: string},
11
+ alignment?: string,
12
+ checked?: boolean,
13
+ children?: Node,
14
+ className?: string,
15
+ dark?: boolean,
16
+ data?: {[key: string]: string},
17
+ error?: boolean,
18
+ id?: string,
19
+ label: string,
20
+ name: string,
21
+ value: string,
22
+ text: string,
23
+ onChange: (event: React.FormEvent<HTMLInputElement> | null)=>void,
24
+ } & GlobalProps
25
+
26
+ const Radio = ({
27
+ aria = {},
28
+ alignment,
29
+ children,
30
+ className,
31
+ dark = false,
32
+ data = {},
33
+ error = false,
34
+ id,
35
+ label,
36
+ name = 'radio_name',
37
+ text = 'Radio Text',
38
+ value = 'radio_text',
39
+ onChange = () => { void 0 },
40
+ ...props
41
+ }: RadioProps, ref: any) => {
42
+ const ariaProps = buildAriaProps(aria)
43
+ const dataProps = buildDataProps(data)
44
+ const classes = classnames(
45
+ buildCss('pb_radio_kit', alignment ),
46
+ dark ? 'dark': null, error ? 'error': null,
47
+ globalProps(props),
48
+ className)
49
+
50
+ const displayRadio = (props: RadioProps & any) => {
51
+ if (children)
52
+ return (children)
53
+ else
54
+ return (
55
+ <input
56
+ id={id}
57
+ name={name}
58
+ onChange={onChange}
59
+ ref={ref}
60
+ text={text}
61
+ type="radio"
62
+ value={value}
63
+ {...props}
64
+ />
65
+ )}
66
+
67
+ return (
68
+ <label
69
+ {...ariaProps}
70
+ {...dataProps}
71
+ className={classes}
72
+ htmlFor={id}
73
+ >
74
+ <>{displayRadio(props)}</>
75
+ <span className="pb_radio_button" />
76
+ <Body
77
+ dark={dark}
78
+ status={error ? 'negative' : null}
79
+ text={label}
80
+ variant={null}
81
+ />
82
+ </label>
83
+ )
84
+ }
85
+
86
+ export default forwardRef(Radio)
data/app/pb_kits/playbook/playbook-doc.js CHANGED
@@ -51,6 +51,7 @@ import * as LabelPill from 'pb_label_pill/docs'
51
51
  import * as LabelValue from 'pb_label_value/docs'
52
52
  import * as Layout from 'pb_layout/docs'
53
53
  import * as LegendDocs from 'pb_legend/docs'
54
+ import * as Lightbox from 'pb_lightbox/docs'
54
55
  import * as LineGraphDocs from 'pb_line_graph/docs'
55
56
  import * as List from 'pb_list/docs'
56
57
  import * as LoadingInline from 'pb_loading_inline/docs'
@@ -146,6 +147,7 @@ WebpackerReact.setup({
146
147
  ...LabelValue,
147
148
  ...Layout,
148
149
  ...LegendDocs,
150
+ ...Lightbox,
149
151
  ...LineGraphDocs,
150
152
  ...List,
151
153
  ...LoadingInline,
data/app/pb_kits/playbook/utilities/globalProps.ts CHANGED
@@ -22,7 +22,7 @@ type AlignItems = {
22
22
  type AlignSelf = {
23
23
  alignSelf?: Alignment & ("auto" | "stretch" | "baseline")
24
24
  }
25
- type AllSizes = None & Sizes
25
+ type AllSizes = None | Sizes
26
26
 
27
27
  type BorderRadius = {
28
28
  borderRadius?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "rounded",
data/dist/reset.css CHANGED
@@ -1,2 +1,61 @@
1
- *{box-sizing:border-box;margin:0;padding:0}*:before,*:after{box-sizing:border-box}html{-webkit-tap-highlight-color:rgba(0,0,0,0);height:100vh;overflow-x:hidden}body{font-family:"Proxima Nova","Helvetica Neue",Helvetica,Arial,sans_serif;font-size:16px;line-height:1.5;background-color:#F3F7FB;height:100%;letter-spacing:0;font-weight:400;font-style:normal;text-rendering:optimizeLegibility;-moz-font-feature-settings:"liga" on;color:#242B42;margin:0 !important;padding:0 !important;box-sizing:border-box;min-height:100vh;padding:50px}a{text-decoration:none;color:#0056CF}
1
+ /* CLEAN UP AND REMOVE */
2
+ /* Headings */
3
+ /* Standard Font Weights */
4
+ /* Non_Standard Font Weights */
5
+ /*=====================================
6
+ Base colors should not be documented.
7
+ Only document color use.
8
+
9
+ Colors -----------------------------*/
10
+ /* Specialty Gradient -----------------*/
11
+ /* Interface colors -------------------*/
12
+ /* Main colors ------------------------*/
13
+ /*=====================================
14
+
15
+ Background colors ------------------*/
16
+ /* Card colors ------------------*/
17
+ /* Active colors ----------------------*/
18
+ /* Hover colors -----------------------*/
19
+ /* Focus colors -----------------------*/
20
+ /* Border colors ----------------------*/
21
+ /* Shadow colors ----------------------*/
22
+ /* Text colors ------------------------*/
23
+ /* Data colors ------------------------*/
24
+ /* Status colors ----------------------*/
25
+ /* Link colors ------------------------*/
26
+ /* Product colors ---------------------*/
27
+ /* Category colors ---------------------*/
28
+ * {
29
+ box-sizing: border-box;
30
+ margin: 0;
31
+ padding: 0; }
32
+ *:before, *:after {
33
+ box-sizing: border-box; }
34
+
35
+ html {
36
+ -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
37
+ height: 100vh;
38
+ overflow-x: hidden; }
39
+
40
+ body {
41
+ font-family: "Proxima Nova", "Helvetica Neue", Helvetica, Arial, sans_serif;
42
+ font-size: 16px;
43
+ line-height: 1.5;
44
+ background-color: #F3F7FB;
45
+ height: 100%;
46
+ letter-spacing: 0;
47
+ font-weight: 400;
48
+ font-style: normal;
49
+ text-rendering: optimizeLegibility;
50
+ -moz-font-feature-settings: "liga" on;
51
+ color: #242B42;
52
+ margin: 0 !important;
53
+ padding: 0 !important;
54
+ box-sizing: border-box;
55
+ min-height: 100vh;
56
+ padding: 50px; }
57
+
58
+ a {
59
+ text-decoration: none;
60
+ color: #0056CF; }
2
61
 
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 = "11.1.0"
5
- VERSION = "11.1.1"
4
+ PREVIOUS_VERSION = "11.1.2"
5
+ VERSION = "11.2.0"
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: 11.1.1
4
+ version: 11.2.0
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: 2022-07-15 00:00:00.000000000 Z
12
+ date: 2022-07-28 00:00:00.000000000 Z
13
13
  dependencies:
14
14
  - !ruby/object:Gem::Dependency
15
15
  name: actionpack
@@ -438,8 +438,8 @@ files:
438
438
  - app/pb_kits/playbook/pb_button/docs/_footer.md
439
439
  - app/pb_kits/playbook/pb_button/docs/example.yml
440
440
  - app/pb_kits/playbook/pb_button/docs/index.js
441
- - app/pb_kits/playbook/pb_button_toolbar/_button_toolbar.jsx
442
441
  - app/pb_kits/playbook/pb_button_toolbar/_button_toolbar.scss
442
+ - app/pb_kits/playbook/pb_button_toolbar/_button_toolbar.tsx
443
443
  - app/pb_kits/playbook/pb_button_toolbar/_button_toolbar_dark.scss
444
444
  - app/pb_kits/playbook/pb_button_toolbar/_button_toolbar_mixins.scss
445
445
  - app/pb_kits/playbook/pb_button_toolbar/button_toolbar.html.erb
@@ -588,6 +588,7 @@ files:
588
588
  - app/pb_kits/playbook/pb_contact/_contact.scss
589
589
  - app/pb_kits/playbook/pb_contact/contact.html.erb
590
590
  - app/pb_kits/playbook/pb_contact/contact.rb
591
+ - app/pb_kits/playbook/pb_contact/contact.test.js
591
592
  - app/pb_kits/playbook/pb_contact/docs/_contact_default.html.erb
592
593
  - app/pb_kits/playbook/pb_contact/docs/_contact_default.jsx
593
594
  - app/pb_kits/playbook/pb_contact/docs/_contact_with_detail.html.erb
@@ -802,6 +803,10 @@ files:
802
803
  - app/pb_kits/playbook/pb_dialog/docs/_dialog_should_close_on_overlay.jsx
803
804
  - app/pb_kits/playbook/pb_dialog/docs/_dialog_should_close_on_overlay.md
804
805
  - app/pb_kits/playbook/pb_dialog/docs/_dialog_sizes.jsx
806
+ - app/pb_kits/playbook/pb_dialog/docs/_dialog_stacked_alert.jsx
807
+ - app/pb_kits/playbook/pb_dialog/docs/_dialog_stacked_alert.md
808
+ - app/pb_kits/playbook/pb_dialog/docs/_dialog_status.jsx
809
+ - app/pb_kits/playbook/pb_dialog/docs/_dialog_status.md
805
810
  - app/pb_kits/playbook/pb_dialog/docs/example.yml
806
811
  - app/pb_kits/playbook/pb_dialog/docs/index.js
807
812
  - app/pb_kits/playbook/pb_distribution_bar/_distribution_bar.jsx
@@ -886,6 +891,7 @@ files:
886
891
  - app/pb_kits/playbook/pb_flex/_flex.tsx
887
892
  - app/pb_kits/playbook/pb_flex/_flex_item.jsx
888
893
  - app/pb_kits/playbook/pb_flex/_flex_item.scss
894
+ - app/pb_kits/playbook/pb_flex/_flex_item.tsx
889
895
  - app/pb_kits/playbook/pb_flex/docs/_description.md
890
896
  - app/pb_kits/playbook/pb_flex/docs/_flex_align.html.erb
891
897
  - app/pb_kits/playbook/pb_flex/docs/_flex_align.jsx
@@ -1206,6 +1212,27 @@ files:
1206
1212
  - app/pb_kits/playbook/pb_legend/legend.html.erb
1207
1213
  - app/pb_kits/playbook/pb_legend/legend.rb
1208
1214
  - app/pb_kits/playbook/pb_legend/legend.test.js
1215
+ - app/pb_kits/playbook/pb_lightbox/Carousel/Slide.tsx
1216
+ - app/pb_kits/playbook/pb_lightbox/Carousel/Slides.tsx
1217
+ - app/pb_kits/playbook/pb_lightbox/Carousel/Thumbnail.tsx
1218
+ - app/pb_kits/playbook/pb_lightbox/Carousel/Thumbnails.tsx
1219
+ - app/pb_kits/playbook/pb_lightbox/Carousel/index.tsx
1220
+ - app/pb_kits/playbook/pb_lightbox/_lightbox.tsx
1221
+ - app/pb_kits/playbook/pb_lightbox/_lightbox_context.tsx
1222
+ - app/pb_kits/playbook/pb_lightbox/_lightbox_header.tsx
1223
+ - app/pb_kits/playbook/pb_lightbox/_lightbox_header_icon.tsx
1224
+ - app/pb_kits/playbook/pb_lightbox/docs/_lightbox_compound_component.jsx
1225
+ - app/pb_kits/playbook/pb_lightbox/docs/_lightbox_compound_component.md
1226
+ - app/pb_kits/playbook/pb_lightbox/docs/_lightbox_default.jsx
1227
+ - app/pb_kits/playbook/pb_lightbox/docs/_lightbox_default.md
1228
+ - app/pb_kits/playbook/pb_lightbox/docs/_lightbox_multiple.jsx
1229
+ - app/pb_kits/playbook/pb_lightbox/docs/example.yml
1230
+ - app/pb_kits/playbook/pb_lightbox/docs/index.js
1231
+ - app/pb_kits/playbook/pb_lightbox/hooks/useKbdControls.ts
1232
+ - app/pb_kits/playbook/pb_lightbox/hooks/useVisibility.js
1233
+ - app/pb_kits/playbook/pb_lightbox/hooks/useWindowSize.ts
1234
+ - app/pb_kits/playbook/pb_lightbox/lightbox.scss
1235
+ - app/pb_kits/playbook/pb_lightbox/lightbox.test.jsx
1209
1236
  - app/pb_kits/playbook/pb_line_graph/_line_graph.jsx
1210
1237
  - app/pb_kits/playbook/pb_line_graph/_line_graph.scss
1211
1238
  - app/pb_kits/playbook/pb_line_graph/docs/_description.md
@@ -1491,8 +1518,8 @@ files:
1491
1518
  - app/pb_kits/playbook/pb_progress_step/progress_step.rb
1492
1519
  - app/pb_kits/playbook/pb_progress_step/progress_step_item.html.erb
1493
1520
  - app/pb_kits/playbook/pb_progress_step/progress_step_item.rb
1494
- - app/pb_kits/playbook/pb_radio/_radio.jsx
1495
1521
  - app/pb_kits/playbook/pb_radio/_radio.scss
1522
+ - app/pb_kits/playbook/pb_radio/_radio.tsx
1496
1523
  - app/pb_kits/playbook/pb_radio/docs/_description.md
1497
1524
  - app/pb_kits/playbook/pb_radio/docs/_footer.md
1498
1525
  - app/pb_kits/playbook/pb_radio/docs/_radio_alignment.html.erb
data/app/pb_kits/playbook/pb_radio/_radio.jsx DELETED
@@ -1,78 +0,0 @@
1
- /* @flow */
2
- /*eslint-disable react/no-multi-comp, flowtype/space-before-type-colon */
3
-
4
- import React, { forwardRef } from 'react'
5
- import Body from '../pb_body/_body'
6
- import classnames from 'classnames'
7
- import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
8
- import { globalProps } from '../utilities/globalProps'
9
-
10
- type RadioProps = {
11
- aria?: object,
12
- alignment?: String,
13
- checked?: Boolean,
14
- children?: Node,
15
- className?: String,
16
- dark?: boolean,
17
- data?: object,
18
- error?: Boolean,
19
- id?: String,
20
- label: String,
21
- name: String,
22
- value: String,
23
- text: String,
24
- onChange: (Boolean)=>void,
25
- }
26
-
27
- const Radio = ({
28
- aria = {},
29
- alignment = '',
30
- children,
31
- className,
32
- dark = false,
33
- data = {},
34
- error = false,
35
- id,
36
- label,
37
- name = 'radio_name',
38
- text = 'Radio Text',
39
- value = 'radio_text',
40
- onChange = () => {},
41
- ...props
42
- }: RadioProps, ref) => {
43
- const ariaProps = buildAriaProps(aria)
44
- const dataProps = buildDataProps(data)
45
- const classes = classnames(buildCss('pb_radio_kit'), { error }, { dark }, globalProps(props), alignment, className)
46
-
47
- return (
48
- <label
49
- {...ariaProps}
50
- {...dataProps}
51
- className={classes}
52
- htmlFor={id}
53
- >
54
- <If condition={children}>
55
- {children}
56
- <Else />
57
- <input
58
- {...props}
59
- id={id}
60
- name={name}
61
- onChange={onChange}
62
- ref={ref}
63
- text={text}
64
- type="radio"
65
- value={value}
66
- />
67
- </If>
68
- <span className="pb_radio_button" />
69
- <Body
70
- dark={dark}
71
- status={error ? 'negative' : null}
72
- text={label}
73
- />
74
- </label>
75
- )
76
- }
77
-
78
- export default forwardRef(Radio)