playbook_ui 11.18.0.pre.alpha.pagutility1 → 11.19.0.pre.alpha.pagpassthrough1

Sign up to get free protection for your applications and to get access to all the features.
@@ -0,0 +1,222 @@
1
+ import React from "react";
2
+ import { render, screen, fireEvent } from "../utilities/test-utils";
3
+ import { Button, PbReactPopover } from "..";
4
+
5
+ const testId = "popover-kit";
6
+
7
+ //Test default popover
8
+ const PopoverTest = () => {
9
+ const [mockState, setMockState] = React.useState(false)
10
+ const togglePopover = () => {
11
+ setMockState(!mockState)
12
+ }
13
+
14
+ const popoverReference = (
15
+ <Button onClick={togglePopover}
16
+ text="Click Me"
17
+ />
18
+ );
19
+ return (
20
+ <PbReactPopover
21
+ offset
22
+ reference={popoverReference}
23
+ show={mockState}
24
+ >
25
+ {"Click Anywhere"}
26
+ </PbReactPopover>
27
+ )
28
+ };
29
+ //Test popover with z-index
30
+ const PopoverTestZIndex = () => {
31
+ const [mockState, setMockState] = React.useState(false)
32
+ const togglePopover = () => {
33
+ setMockState(!mockState)
34
+ }
35
+
36
+ const popoverReference = (
37
+ <Button onClick={togglePopover}
38
+ text="Click Me"
39
+ />
40
+ );
41
+ return (
42
+ <PbReactPopover
43
+ offset
44
+ reference={popoverReference}
45
+ show={mockState}
46
+ zIndex={3}
47
+ >
48
+ {"Click Anywhere"}
49
+ </PbReactPopover>
50
+ )
51
+ };
52
+
53
+ //Test popover with max-height and max-width
54
+ const PopoverTestHeight = () => {
55
+ const [mockState, setMockState] = React.useState(false)
56
+ const togglePopover = () => {
57
+ setMockState(!mockState)
58
+ }
59
+
60
+ const popoverReference = (
61
+ <Button onClick={togglePopover}
62
+ text="Click Me"
63
+ />
64
+ );
65
+ return (
66
+ <PbReactPopover
67
+ maxHeight="150px"
68
+ maxWidth="240px"
69
+ offset
70
+ reference={popoverReference}
71
+ show={mockState}
72
+ >
73
+ {"Click Anywhere"}
74
+ </PbReactPopover>
75
+ )
76
+ };
77
+
78
+ //Test Popover with click to close 'anywhere'
79
+ const PopoverTestClicktoClose = () => {
80
+ const [mockState, setMockState] = React.useState(false)
81
+ const togglePopover = () => {
82
+ setMockState(!mockState)
83
+ }
84
+ const handleShouldClosePopover = (shouldClosePopover) => {
85
+ setMockState(!shouldClosePopover)
86
+ }
87
+
88
+ const popoverReference = (
89
+ <Button onClick={togglePopover}
90
+ text="Click Me"
91
+ />
92
+ );
93
+ return (
94
+ <PbReactPopover
95
+ closeOnClick="any"
96
+ offset
97
+ reference={popoverReference}
98
+ shouldClosePopover={handleShouldClosePopover}
99
+ show={mockState}
100
+ >
101
+ {"Click Anywhere"}
102
+ </PbReactPopover>
103
+ )
104
+ };
105
+
106
+ //Test Popover with click to close 'inside'
107
+ const PopoverTestClicktoClose2 = () => {
108
+ const [mockState, setMockState] = React.useState(false)
109
+ const togglePopover = () => {
110
+ setMockState(!mockState)
111
+ }
112
+ const handleShouldClosePopover = (shouldClosePopover) => {
113
+ setMockState(!shouldClosePopover)
114
+ }
115
+
116
+ const popoverReference = (
117
+ <Button onClick={togglePopover}
118
+ text="Click Me"
119
+ />
120
+ );
121
+ return (
122
+ <PbReactPopover
123
+ closeOnClick="inside"
124
+ offset
125
+ reference={popoverReference}
126
+ shouldClosePopover={handleShouldClosePopover}
127
+ show={mockState}
128
+ >
129
+ {"Click Inside"}
130
+ </PbReactPopover>
131
+ )
132
+ };
133
+
134
+ //Test Popover with click to close 'outside'
135
+ const PopoverTestClicktoClose3 = () => {
136
+ const [mockState, setMockState] = React.useState(false)
137
+ const togglePopover = () => {
138
+ setMockState(!mockState)
139
+ }
140
+ const handleShouldClosePopover = (shouldClosePopover) => {
141
+ setMockState(!shouldClosePopover)
142
+ }
143
+
144
+ const popoverReference = (
145
+ <Button onClick={togglePopover}
146
+ text="Click Me"
147
+ />
148
+ );
149
+ return (
150
+ <PbReactPopover
151
+ closeOnClick="outside"
152
+ offset
153
+ reference={popoverReference}
154
+ shouldClosePopover={handleShouldClosePopover}
155
+ show={mockState}
156
+ >
157
+ {"Click Outside"}
158
+ </PbReactPopover>
159
+ )
160
+ };
161
+
162
+
163
+ test("renders Popover", () => {
164
+ render(<PopoverTest data={{ testid: testId}}/>)
165
+ const btn = screen.getByText(/click me/i)
166
+ fireEvent.click(btn);
167
+ const kit = screen.getByText("Click Anywhere");
168
+ expect(kit).toBeInTheDocument();
169
+ });
170
+
171
+ test("renders Popover with z index", () => {
172
+ render(<PopoverTestZIndex data={{ testid: testId}}/>)
173
+ const btn = screen.getByText(/click me/i)
174
+ fireEvent.click(btn);
175
+ const kit = screen.getByText("Click Anywhere");
176
+ expect(kit).toHaveClass("pb_popover_body z_index_3");
177
+ });
178
+
179
+ test("renders Popover with max height and max width", () => {
180
+ render(<PopoverTestHeight data={{ testid: testId}}/>)
181
+ const btn = screen.getByText(/click me/i)
182
+ fireEvent.click(btn);
183
+ const kit = screen.getByText("Click Anywhere");
184
+ expect(kit).toHaveClass("pb_popover_body max_width_240px overflow_handling");
185
+ });
186
+
187
+ test("closes Popover on click anywhere", () => {
188
+ render(<PopoverTestClicktoClose data={{ testid: testId}}/>)
189
+ const btn = screen.getByText(/click me/i)
190
+ fireEvent.click(btn);
191
+ const kit = screen.getByText("Click Anywhere");
192
+ expect(kit).toBeInTheDocument();
193
+ fireEvent.click(kit);
194
+
195
+ expect(kit).not.toBeInTheDocument();
196
+
197
+ });
198
+
199
+ test("closes Popover on click inside", () => {
200
+ render(<PopoverTestClicktoClose2 data={{ testid: testId}}/>)
201
+ const btn = screen.getByText(/click me/i)
202
+ fireEvent.click(btn);
203
+ const kit = screen.getByText("Click Inside");
204
+ expect(kit).toBeInTheDocument();
205
+ fireEvent.click(kit);
206
+
207
+ expect(kit).not.toBeInTheDocument();
208
+
209
+ });
210
+
211
+ test("closes Popover on click outside", () => {
212
+ render(<PopoverTestClicktoClose3 data={{ testid: testId}}/>)
213
+ const btn = screen.getByText(/click me/i)
214
+ fireEvent.click(btn);
215
+ const kit = screen.getByText("Click Outside");
216
+ expect(kit).toBeInTheDocument();
217
+ fireEvent.click(kit);
218
+ expect(kit).toBeInTheDocument();
219
+ fireEvent.click(btn);
220
+ expect(kit).not.toBeInTheDocument();
221
+
222
+ });
@@ -28,10 +28,11 @@ import { noop } from '../utilities/props'
28
28
  */
29
29
 
30
30
  type TypeaheadProps = {
31
- id?: string,
32
31
  async?: boolean,
32
+ components?: object,
33
33
  createable?: boolean,
34
34
  dark?: boolean,
35
+ id?: string,
35
36
  label?: string,
36
37
  loadOptions?: string,
37
38
  getOptionLabel?: string | (() => any),
@@ -44,7 +45,16 @@ type TypeaheadProps = {
44
45
  * @param {TypeaheadProps} props - props as described at https://react-select.com/props
45
46
  */
46
47
 
47
- const Typeahead = ({ loadOptions = noop, getOptionLabel, id, getOptionValue, createable, async, ...props }: TypeaheadProps) => {
48
+ const Typeahead = ({
49
+ async,
50
+ components = {},
51
+ createable,
52
+ getOptionLabel,
53
+ getOptionValue,
54
+ id,
55
+ loadOptions = noop,
56
+ ...props
57
+ }: TypeaheadProps) => {
48
58
  const selectProps = {
49
59
  cacheOptions: true,
50
60
  components: {
@@ -57,6 +67,7 @@ const Typeahead = ({ loadOptions = noop, getOptionLabel, id, getOptionValue, cre
57
67
  Option,
58
68
  Placeholder,
59
69
  ValueContainer,
70
+ ...components
60
71
  },
61
72
  loadOptions: isString(loadOptions) ? get(window, loadOptions) : loadOptions,
62
73
  getOptionLabel: isString(getOptionLabel) ? get(window, getOptionLabel) : getOptionLabel,
@@ -0,0 +1,98 @@
1
+ /* eslint-disable react/no-danger */
2
+ /* eslint-disable react/no-multi-comp */
3
+ /* @flow */
4
+
5
+ import React, { useState } from 'react'
6
+ import { components, OptionProps } from 'react-select'
7
+
8
+ import {
9
+ Avatar,
10
+ Body,
11
+ Flex,
12
+ FlexItem,
13
+ Title,
14
+ Typeahead,
15
+ } from '../..'
16
+
17
+ const USERS = [
18
+ {
19
+ name: "Wade Winningham",
20
+ title: "Nitro Principal Developer",
21
+ territory: "PHL",
22
+ },
23
+ {
24
+ name: "Jason Cypret",
25
+ title: "Vice President of User Experience",
26
+ territory: "PHL",
27
+ },
28
+ {
29
+ name: "Stephen Marshall",
30
+ title: "Senior User Experience Engineer",
31
+ territory: "PHL",
32
+ },
33
+ {
34
+ name: "Jasper Furniss",
35
+ title: "Senior User Experience Engineer",
36
+ territory: "PHL",
37
+ },
38
+ ];
39
+
40
+ const TypeaheadWithHighlight = (props) => {
41
+ const [selectedUser, setSelectedUser] = useState()
42
+
43
+ const formatOptionLabel = ({name, territory, title}, {inputValue}) => {
44
+
45
+ const highlighted = (text: string) => {
46
+ if (!inputValue.length) return text
47
+ return text.replace(
48
+ new RegExp(inputValue, 'gi'),
49
+ highlighted => `<mark>${highlighted}</mark>`
50
+ )
51
+ }
52
+ return (
53
+ <Flex>
54
+ <FlexItem>
55
+ <Avatar
56
+ marginRight="sm"
57
+ name={name}
58
+ size="sm"
59
+ />
60
+ </FlexItem>
61
+ <FlexItem>
62
+ <Title size={4}><span dangerouslySetInnerHTML={{ __html: highlighted(name) }} /></Title>
63
+ <Body color="light">
64
+ <span dangerouslySetInnerHTML={{ __html: highlighted(title) }} />{" • "}
65
+ {territory}
66
+ </Body>
67
+ </FlexItem>
68
+ </Flex>
69
+ )
70
+ }
71
+
72
+ const customComponents = {
73
+ Option: (props: OptionProps) => (
74
+ <components.Option {...props}/>
75
+ ),
76
+ SingleValue: ({ data }: any) => (
77
+ <span>{data.name}</span>
78
+ )
79
+ }
80
+
81
+ return (
82
+ <React.Fragment>
83
+ <Typeahead
84
+ components={customComponents}
85
+ formatOptionLabel={formatOptionLabel}
86
+ getOptionLabel={(option) => option.name}
87
+ getOptionValue={({name, title}) => `${name} ${title}`}
88
+ label="Users"
89
+ onChange={(user) => setSelectedUser(user)}
90
+ options={USERS.filter((option) => option.name != selectedUser?.name)}
91
+ placeholder="type the name of a user"
92
+ {...props}
93
+ />
94
+ </React.Fragment>
95
+ )
96
+ }
97
+
98
+ export default TypeaheadWithHighlight
@@ -11,6 +11,7 @@ examples:
11
11
 
12
12
  react:
13
13
  - typeahead_default: Default
14
+ - typeahead_with_highlight: With Highlight
14
15
  - typeahead_with_pills: With Pills
15
16
  - typeahead_with_pills_async: With Pills (Async Data)
16
17
  - typeahead_with_pills_async_users: With Pills (Async Data w/ Users)
@@ -1,4 +1,5 @@
1
1
  export { default as TypeaheadDefault } from './_typeahead_default.jsx'
2
+ export { default as TypeaheadWithHighlight } from './_typeahead_with_highlight.jsx'
2
3
  export { default as TypeaheadWithPills } from './_typeahead_with_pills.jsx'
3
4
  export { default as TypeaheadWithPillsAsync } from './_typeahead_with_pills_async.jsx'
4
5
  export { default as TypeaheadWithPillsAsyncUsers } from './_typeahead_with_pills_async_users.jsx'
@@ -9,6 +9,7 @@
9
9
  border: 1px solid $border_light;
10
10
  background-color: $white;
11
11
  padding: 3px 0px 3.6px 0px;
12
+ margin: 10px 0;
12
13
  li {
13
14
  display: inline;
14
15
  > a, li > span {
@@ -51,7 +52,7 @@
51
52
  background-color: $primary !important;
52
53
  border-radius: $border_rad_light;
53
54
  color: #fff;
54
- padding: 7px 10px;
55
+ padding: 7px 13px;
55
56
  border: 0 !important;
56
57
  text-decoration: none;
57
58
  font-weight: $bold;
@@ -1,6 +1,6 @@
1
1
  # frozen_string_literal: true
2
2
 
3
3
  module Playbook
4
- PREVIOUS_VERSION = "11.18.0"
5
- VERSION = "11.18.0.pre.alpha.pagutility1"
4
+ PREVIOUS_VERSION = "11.19.0"
5
+ VERSION = "11.19.0.pre.alpha.pagpassthrough1"
6
6
  end
data/lib/playbook.rb CHANGED
@@ -12,7 +12,8 @@ require "playbook/pb_doc_helper"
12
12
  require "playbook/kit_base"
13
13
  require "playbook/kit_resolver"
14
14
  require "playbook/markdown"
15
- require "playbook/pagination_renderer"
15
+ # require "playbook/pagination_renderer"
16
+ # REMOVED TO MAKE THIS AN OPTIONAL INCLUDE FOR CLIENTS
16
17
 
17
18
  module Playbook
18
19
  ROOT_PATH = Pathname.new(File.join(__dir__, ".."))
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.18.0.pre.alpha.pagutility1
4
+ version: 11.19.0.pre.alpha.pagpassthrough1
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-01-13 00:00:00.000000000 Z
12
+ date: 2023-01-16 00:00:00.000000000 Z
13
13
  dependencies:
14
14
  - !ruby/object:Gem::Dependency
15
15
  name: actionpack
@@ -123,20 +123,6 @@ dependencies:
123
123
  - - "~>"
124
124
  - !ruby/object:Gem::Version
125
125
  version: 0.3.2
126
- - !ruby/object:Gem::Dependency
127
- name: will_paginate
128
- requirement: !ruby/object:Gem::Requirement
129
- requirements:
130
- - - "~>"
131
- - !ruby/object:Gem::Version
132
- version: '3.3'
133
- type: :runtime
134
- prerelease: false
135
- version_requirements: !ruby/object:Gem::Requirement
136
- requirements:
137
- - - "~>"
138
- - !ruby/object:Gem::Version
139
- version: '3.3'
140
126
  - !ruby/object:Gem::Dependency
141
127
  name: byebug
142
128
  requirement: !ruby/object:Gem::Requirement
@@ -283,6 +269,20 @@ dependencies:
283
269
  - - '='
284
270
  - !ruby/object:Gem::Version
285
271
  version: 1.2018.9
272
+ - !ruby/object:Gem::Dependency
273
+ name: will_paginate
274
+ requirement: !ruby/object:Gem::Requirement
275
+ requirements:
276
+ - - '='
277
+ - !ruby/object:Gem::Version
278
+ version: 3.3.1
279
+ type: :development
280
+ prerelease: false
281
+ version_requirements: !ruby/object:Gem::Requirement
282
+ requirements:
283
+ - - '='
284
+ - !ruby/object:Gem::Version
285
+ version: 3.3.1
286
286
  description: Playbook Design System. Built for Nitro, but powering all.
287
287
  email:
288
288
  - nitroux@powerhrg.com
@@ -1350,9 +1350,9 @@ files:
1350
1350
  - app/pb_kits/playbook/pb_line_graph/lineGraphSettings.js
1351
1351
  - app/pb_kits/playbook/pb_line_graph/line_graph.html.erb
1352
1352
  - app/pb_kits/playbook/pb_line_graph/line_graph.rb
1353
- - app/pb_kits/playbook/pb_list/_list.jsx
1354
1353
  - app/pb_kits/playbook/pb_list/_list.scss
1355
- - app/pb_kits/playbook/pb_list/_list_item.jsx
1354
+ - app/pb_kits/playbook/pb_list/_list.tsx
1355
+ - app/pb_kits/playbook/pb_list/_list_item.tsx
1356
1356
  - app/pb_kits/playbook/pb_list/_list_mixin.scss
1357
1357
  - app/pb_kits/playbook/pb_list/docs/_description.md
1358
1358
  - app/pb_kits/playbook/pb_list/docs/_list_borderless.html.erb
@@ -1477,6 +1477,11 @@ files:
1477
1477
  - app/pb_kits/playbook/pb_online_status/docs/index.js
1478
1478
  - app/pb_kits/playbook/pb_online_status/online_status.html.erb
1479
1479
  - app/pb_kits/playbook/pb_online_status/online_status.rb
1480
+ - app/pb_kits/playbook/pb_paginate/_paginate.scss
1481
+ - app/pb_kits/playbook/pb_paginate/docs/_paginate_default.html.erb
1482
+ - app/pb_kits/playbook/pb_paginate/docs/example.yml
1483
+ - app/pb_kits/playbook/pb_paginate/paginate.html.erb
1484
+ - app/pb_kits/playbook/pb_paginate/paginate.rb
1480
1485
  - app/pb_kits/playbook/pb_passphrase/_passphrase.jsx
1481
1486
  - app/pb_kits/playbook/pb_passphrase/_passphrase.scss
1482
1487
  - app/pb_kits/playbook/pb_passphrase/docs/_passphrase_breached.html.erb
@@ -1547,8 +1552,8 @@ files:
1547
1552
  - app/pb_kits/playbook/pb_pill/docs/index.js
1548
1553
  - app/pb_kits/playbook/pb_pill/pill.html.erb
1549
1554
  - app/pb_kits/playbook/pb_pill/pill.rb
1550
- - app/pb_kits/playbook/pb_popover/_popover.jsx
1551
1555
  - app/pb_kits/playbook/pb_popover/_popover.scss
1556
+ - app/pb_kits/playbook/pb_popover/_popover.tsx
1552
1557
  - app/pb_kits/playbook/pb_popover/docs/_description.md
1553
1558
  - app/pb_kits/playbook/pb_popover/docs/_popover_close.html.erb
1554
1559
  - app/pb_kits/playbook/pb_popover/docs/_popover_close.jsx
@@ -1563,9 +1568,10 @@ files:
1563
1568
  - app/pb_kits/playbook/pb_popover/docs/_popover_z_index.jsx
1564
1569
  - app/pb_kits/playbook/pb_popover/docs/example.yml
1565
1570
  - app/pb_kits/playbook/pb_popover/docs/index.js
1566
- - app/pb_kits/playbook/pb_popover/index.js
1571
+ - app/pb_kits/playbook/pb_popover/index.ts
1567
1572
  - app/pb_kits/playbook/pb_popover/popover.html.erb
1568
1573
  - app/pb_kits/playbook/pb_popover/popover.rb
1574
+ - app/pb_kits/playbook/pb_popover/popover.test.js
1569
1575
  - app/pb_kits/playbook/pb_progress_pills/_progress_pills.jsx
1570
1576
  - app/pb_kits/playbook/pb_progress_pills/_progress_pills.scss
1571
1577
  - app/pb_kits/playbook/pb_progress_pills/docs/_description.md
@@ -2155,6 +2161,7 @@ files:
2155
2161
  - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_multi_kit.html.erb
2156
2162
  - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_multi_kit.jsx
2157
2163
  - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_context.html.erb
2164
+ - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_highlight.jsx
2158
2165
  - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.html.erb
2159
2166
  - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.jsx
2160
2167
  - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.md
@@ -1,98 +0,0 @@
1
- /* @flow */
2
-
3
- import React, { type Node } from 'react'
4
- import classnames from 'classnames'
5
- import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
6
- import { globalProps } from '../utilities/globalProps'
7
-
8
- type ListProps = {
9
- aria?: object,
10
- borderless: boolean,
11
- className?: string,
12
- children: array<Node> | Node,
13
- dark: boolean,
14
- data?: object,
15
- id?: string,
16
- layout: "" | "left" | "right",
17
- ordered: boolean,
18
- role?: string,
19
- tabIndex?: string,
20
- text?: string,
21
- size?: string,
22
- variant?: string,
23
- xpadding: boolean,
24
- }
25
-
26
- const List = (props: ListProps) => {
27
- const {
28
- aria = {},
29
- borderless = false,
30
- children,
31
- className,
32
- dark = false,
33
- data = {},
34
- id,
35
- layout = '',
36
- ordered = false,
37
- role,
38
- size = '',
39
- tabIndex,
40
- xpadding = false,
41
- variant,
42
- text,
43
- } = props
44
-
45
- const layoutClass = {
46
- left: 'layout_left',
47
- right: 'layout_right',
48
- default: '',
49
- }
50
-
51
- const childrenWithProps = React.Children.map(children, (child) => {
52
- return React.cloneElement(child, { text, variant })
53
- })
54
- const ariaProps = buildAriaProps(aria)
55
- const dataProps = buildDataProps(data)
56
- const classes = classnames(
57
- buildCss('pb_list_kit', layoutClass[layout], size, {
58
- dark: dark,
59
- borderless: borderless,
60
- ordered: ordered,
61
- xpadding: xpadding,
62
- }),
63
- globalProps(props),
64
- className
65
- )
66
-
67
- return (
68
- <div
69
- className={classes}
70
- >
71
- <If condition={ordered}>
72
- <ol
73
- {...ariaProps}
74
- {...dataProps}
75
- className={className}
76
- id={id}
77
- role={role}
78
- tabIndex={tabIndex}
79
- >
80
- {childrenWithProps}
81
- </ol>
82
- <Else />
83
- <ul
84
- {...ariaProps}
85
- {...dataProps}
86
- className={className}
87
- id={id}
88
- role={role}
89
- tabIndex={tabIndex}
90
- >
91
- {childrenWithProps}
92
- </ul>
93
- </If>
94
- </div>
95
- )
96
- }
97
-
98
- export default List