playbook_ui_docs 13.24.0.pre.alpha.PBNTR261NewKitDropdown2681 β†’ 13.24.0.pre.alpha.PLAY998backgroundkitremoveemptyinlinline2666

Sign up to get free protection for your applications and to get access to all the features.
Files changed (10) hide show
  1. checksums.yaml +4 -4
  2. data/dist/menu.yml +1 -5
  3. data/dist/playbook-doc.js +10 -10
  4. metadata +2 -8
  5. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.jsx +0 -53
  6. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.jsx +0 -104
  7. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options.jsx +0 -69
  8. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger.jsx +0 -78
  9. data/app/pb_kits/playbook/pb_dropdown/docs/example.yml +0 -9
  10. data/app/pb_kits/playbook/pb_dropdown/docs/index.js +0 -4
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: playbook_ui_docs
3
3
  version: !ruby/object:Gem::Version
4
- version: 13.24.0.pre.alpha.PBNTR261NewKitDropdown2681
4
+ version: 13.24.0.pre.alpha.PLAY998backgroundkitremoveemptyinlinline2666
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: 2024-04-11 00:00:00.000000000 Z
12
+ date: 2024-04-09 00:00:00.000000000 Z
13
13
  dependencies:
14
14
  - !ruby/object:Gem::Dependency
15
15
  name: playbook_ui
@@ -590,12 +590,6 @@ files:
590
590
  - app/pb_kits/playbook/pb_distribution_bar/docs/_distribution_bar_default.jsx
591
591
  - app/pb_kits/playbook/pb_distribution_bar/docs/example.yml
592
592
  - app/pb_kits/playbook/pb_distribution_bar/docs/index.js
593
- - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.jsx
594
- - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.jsx
595
- - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options.jsx
596
- - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger.jsx
597
- - app/pb_kits/playbook/pb_dropdown/docs/example.yml
598
- - app/pb_kits/playbook/pb_dropdown/docs/index.js
599
593
  - app/pb_kits/playbook/pb_file_upload/docs/_description.md
600
594
  - app/pb_kits/playbook/pb_file_upload/docs/_file_upload_accept.jsx
601
595
  - app/pb_kits/playbook/pb_file_upload/docs/_file_upload_custom.html.erb
data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.jsx DELETED
@@ -1,53 +0,0 @@
1
- import React, { useState } from 'react'
2
- import { Dropdown } from '../../'
3
-
4
- const DropdownDefault = (props) => {
5
- // eslint-disable-next-line no-unused-vars
6
- const [selectedOption, setSelectedOption] = useState();
7
-
8
- const options = [
9
- {
10
- label: "United States",
11
- value: "United States",
12
- areaCode: "+1",
13
- icon: "πŸ‡ΊπŸ‡Έ",
14
- id: "United-states"
15
- },
16
- {
17
- label: "Ukraine",
18
- value: "Ukraine",
19
- areaCode: "+380",
20
- icon: "πŸ‡ΊπŸ‡¦",
21
- id: "ukraine"
22
- },
23
- {
24
- label: "Pakistan",
25
- value: "Pakistan",
26
- areaCode: "+92",
27
- icon: "πŸ‡΅πŸ‡°",
28
- id: "pakistan"
29
- }
30
- ];
31
-
32
-
33
- return (
34
- <div>
35
- <Dropdown
36
- onSelect={(selectedItem) => setSelectedOption(selectedItem)}
37
- options={options}
38
- {...props}
39
- >
40
- <Dropdown.Trigger/>
41
- <Dropdown.Container>
42
- {options.map((option) => (
43
- <Dropdown.Option key={option.id}
44
- option={option}
45
- />
46
- ))}
47
- </Dropdown.Container>
48
- </Dropdown>
49
- </div>
50
- )
51
- }
52
-
53
- export default DropdownDefault
data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.jsx DELETED
@@ -1,104 +0,0 @@
1
- import React, { useState } from 'react'
2
- import { Dropdown, User, FlexItem, Badge, Avatar } from '../../'
3
-
4
- const DropdownWithCustomDisplay = (props) => {
5
- const [selectedOption, setSelectedOption] = useState();
6
-
7
- const options = [
8
- {
9
- label: "Jasper Furniss",
10
- value: "Jasper Furniss",
11
- territory: "PHL",
12
- title: "Senior UX Engineer",
13
- id: "jasper-furniss",
14
- status: "Offline"
15
- },
16
- {
17
- label: "Ramon Ruiz",
18
- value: "Ramon Ruiz",
19
- territory: "PHL",
20
- title: "Senior UX Desinger",
21
- id: "ramon-ruiz",
22
- status: "Away"
23
- },
24
- {
25
- label: "Jason Cypret",
26
- value: "Jason Cypret",
27
- territory: "PHL",
28
- title: "VP of User Experience",
29
- id: "jason-cypret",
30
- status: "Online"
31
- },
32
- {
33
- label: "Courtney Long",
34
- value: "Courtney Long",
35
- territory: "PHL",
36
- title: "UX Design Mentor",
37
- id: "courtney-long",
38
- status: "Online"
39
- }
40
- ];
41
-
42
- const customDisplay = () => {
43
- return (
44
- <>
45
- {
46
- selectedOption && (
47
- <Avatar
48
- name={selectedOption.label}
49
- size="sm"
50
- />
51
- )
52
- }
53
- </>
54
- )
55
- };
56
-
57
-
58
- return (
59
- <div>
60
- <Dropdown
61
- onSelect={(selectedItem) => setSelectedOption(selectedItem)}
62
- options={options}
63
- {...props}
64
- >
65
- <Dropdown.Trigger customDisplay={customDisplay()}/>
66
- <Dropdown.Container>
67
- {options.map((option) => (
68
- <Dropdown.Option key={option.id}
69
- option={option}
70
- >
71
- <>
72
- <FlexItem>
73
- <User
74
- align="left"
75
- avatar
76
- name={option.label}
77
- orientation="horizontal"
78
- territory={option.territory}
79
- title={option.title}
80
- />
81
- </FlexItem>
82
- <FlexItem>
83
- <Badge
84
- rounded
85
- text={option.status}
86
- variant={`${
87
- option.status === "Offline"
88
- ? "neutral"
89
- : option.status === "Online"
90
- ? "success"
91
- : "warning"
92
- }`}
93
- />
94
- </FlexItem>
95
- </>
96
- </Dropdown.Option>
97
- ))}
98
- </Dropdown.Container>
99
- </Dropdown>
100
- </div>
101
- )
102
- }
103
-
104
- export default DropdownWithCustomDisplay
data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options.jsx DELETED
@@ -1,69 +0,0 @@
1
- import React, { useState } from 'react'
2
- import { Dropdown, Icon, Body, FlexItem, Flex } from '../..'
3
-
4
- const DropdownWithCustomOptions = (props) => {
5
- // eslint-disable-next-line no-unused-vars
6
- const [selectedOption, setSelectedOption] = useState();
7
-
8
- const options = [
9
- {
10
- label: "United States",
11
- value: "United States",
12
- areaCode: "+1",
13
- icon: "πŸ‡ΊπŸ‡Έ",
14
- id: "United-states"
15
- },
16
- {
17
- label: "Ukraine",
18
- value: "Ukraine",
19
- areaCode: "+380",
20
- icon: "πŸ‡ΊπŸ‡¦",
21
- id: "ukraine"
22
- },
23
- {
24
- label: "Pakistan",
25
- value: "Pakistan",
26
- areaCode: "+92",
27
- icon: "πŸ‡΅πŸ‡°",
28
- id: "pakistan"
29
- }
30
- ];
31
-
32
-
33
- return (
34
- <div>
35
- <Dropdown
36
- onSelect={(selectedItem) => setSelectedOption(selectedItem)}
37
- options={options}
38
- {...props}
39
- >
40
- <Dropdown.Trigger/>
41
- <Dropdown.Container>
42
- {options.map((option) => (
43
- <Dropdown.Option key={option.id}
44
- option={option}
45
- >
46
- <>
47
- <FlexItem>
48
- <Flex>
49
- <Icon icon={option.icon}
50
- paddingRight="xs"
51
- />
52
- <Body text={option.label} />
53
- </Flex>
54
- </FlexItem>
55
- <FlexItem>
56
- <Body color="light"
57
- text={option.areaCode}
58
- />
59
- </FlexItem>
60
- </>
61
- </Dropdown.Option>
62
- ))}
63
- </Dropdown.Container>
64
- </Dropdown>
65
- </div>
66
- )
67
- }
68
-
69
- export default DropdownWithCustomOptions
data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger.jsx DELETED
@@ -1,78 +0,0 @@
1
- import React, { useState } from 'react'
2
- import { Dropdown, Icon, Body, FlexItem, Flex, IconCircle } from '../..'
3
-
4
- const DropdownWithCustomTrigger = (props) => {
5
-
6
- const [selectedOption, setSelectedOption] = useState();
7
-
8
- const options = [
9
- {
10
- label: "United States",
11
- value: "United States",
12
- areaCode: "+1",
13
- icon: "πŸ‡ΊπŸ‡Έ",
14
- id: "United-states"
15
- },
16
- {
17
- label: "Ukraine",
18
- value: "Ukraine",
19
- areaCode: "+380",
20
- icon: "πŸ‡ΊπŸ‡¦",
21
- id: "ukraine"
22
- },
23
- {
24
- label: "Pakistan",
25
- value: "Pakistan",
26
- areaCode: "+92",
27
- icon: "πŸ‡΅πŸ‡°",
28
- id: "pakistan"
29
- }
30
- ];
31
-
32
-
33
- return (
34
- <div>
35
- <Dropdown
36
- onSelect={(selectedItem) => setSelectedOption(selectedItem)}
37
- options={options}
38
- {...props}
39
- >
40
- <Dropdown.Trigger>
41
- <div key={selectedOption ? selectedOption.icon : "flag"}>
42
- <IconCircle
43
- cursor="pointer"
44
- icon={selectedOption ? selectedOption.icon : "flag"}
45
- variant="royal"
46
- />
47
- </div>
48
- </Dropdown.Trigger>
49
-
50
- <Dropdown.Container>
51
- {options.map((option) => (
52
- <Dropdown.Option key={option.id}
53
- option={option}
54
- >
55
- <>
56
- <FlexItem>
57
- <Flex>
58
- <Icon icon={option.icon}
59
- paddingRight="xs"
60
- />
61
- <Body text={option.label} />
62
- </Flex>
63
- </FlexItem>
64
- <FlexItem>
65
- <Body color="light"
66
- text={option.areaCode}
67
- />
68
- </FlexItem>
69
- </>
70
- </Dropdown.Option>
71
- ))}
72
- </Dropdown.Container>
73
- </Dropdown>
74
- </div>
75
- )
76
- }
77
-
78
- export default DropdownWithCustomTrigger
data/app/pb_kits/playbook/pb_dropdown/docs/example.yml DELETED
@@ -1,9 +0,0 @@
1
- examples:
2
-
3
-
4
- react:
5
- - dropdown_default: Default
6
- - dropdown_with_custom_options: Custom Options
7
- - dropdown_with_custom_display: Custom Display
8
- - dropdown_with_custom_trigger: Custom Trigger
9
-
data/app/pb_kits/playbook/pb_dropdown/docs/index.js DELETED
@@ -1,4 +0,0 @@
1
- export { default as DropdownDefault } from './_dropdown_default.jsx'
2
- export { default as DropdownWithCustomDisplay } from './_dropdown_with_custom_display.jsx'
3
- export { default as DropdownWithCustomOptions } from './_dropdown_with_custom_options.jsx'
4
- export { default as DropdownWithCustomTrigger } from './_dropdown_with_custom_trigger.jsx'