playbook_ui 11.1.1 → 11.2.0

Sign up to get free protection for your applications and to get access to all the features.
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)