playbook_ui 11.13.0 → 11.15.0.pre.alpha.dependencies1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (41) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_dialog/_dialog.scss +39 -0
  3. data/app/pb_kits/playbook/pb_dialog/child_kits/_dialog_header.tsx +3 -2
  4. data/app/pb_kits/playbook/pb_dialog/dialog_header.html.erb +1 -0
  5. data/app/pb_kits/playbook/pb_dialog/dialog_header.rb +4 -0
  6. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height.jsx +2 -2
  7. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_scrollable.html.erb +13 -1
  8. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_scrollable.jsx +32 -8
  9. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_scrollable.md +5 -2
  10. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_sizes.jsx +2 -2
  11. data/app/pb_kits/playbook/pb_nav/_subtle_mixin.scss +3 -0
  12. data/app/pb_kits/playbook/pb_passphrase/_passphrase.jsx +56 -97
  13. data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_breached.html.erb +145 -1
  14. data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_breached.jsx +127 -3
  15. data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_breached.md +11 -2
  16. data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_common.html.erb +136 -0
  17. data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_common.jsx +90 -8
  18. data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_common.md +5 -0
  19. data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_confirmation.html.erb +51 -0
  20. data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_confirmation.jsx +39 -0
  21. data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_default.html.erb +0 -2
  22. data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_default.jsx +6 -20
  23. data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_input_props.html.erb +2 -2
  24. data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_input_props.jsx +1 -1
  25. data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_meter_settings.html.erb +318 -5
  26. data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_meter_settings.jsx +134 -48
  27. data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_meter_settings.md +11 -5
  28. data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_strength_change.html.erb +123 -0
  29. data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_strength_change.jsx +96 -20
  30. data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_strength_change.md +6 -2
  31. data/app/pb_kits/playbook/pb_passphrase/docs/example.yml +4 -0
  32. data/app/pb_kits/playbook/pb_passphrase/docs/index.js +1 -0
  33. data/app/pb_kits/playbook/pb_passphrase/passphrase.html.erb +1 -1
  34. data/app/pb_kits/playbook/pb_passphrase/passphrase.rb +5 -9
  35. data/app/pb_kits/playbook/pb_passphrase/passphrase.test.jsx +0 -47
  36. data/lib/playbook/version.rb +2 -2
  37. metadata +9 -8
  38. data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_default.md +0 -1
  39. data/app/pb_kits/playbook/pb_passphrase/passwordStrength.js +0 -55
  40. data/app/pb_kits/playbook/pb_passphrase/useHaveIBeenPwned.js +0 -52
  41. data/app/pb_kits/playbook/pb_passphrase/useZxcvbn.js +0 -58
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 30ee4e245ff8817c69eab2e6f6ca4202e5aef0fd2b19e6393071f2a17517b22d
4
- data.tar.gz: 5024ff1fd7bc91c4541f6ba6f77e04101738d6af310f3576af05c784f605f3b8
3
+ metadata.gz: 584e7531cf26019f6d3e797e08af310d98f3b803ffbecfc5cbb15ae68ad49223
4
+ data.tar.gz: 9c2f23fcefa678b65f3754d381e2208ab1483862cf87633d7e848408fa9fb00e
5
5
  SHA512:
6
- metadata.gz: 1971f5cbb1acded9079850bb5773a7d000a6854b4cede7e133b0bb0d05f52cc407bfbc62bfe3fbf04e0382ffb3de2549bebf89bfd919ceba2e3afbe100451c9e
7
- data.tar.gz: 8fc5da606291b5ae20206980aee38fefed8d0cadeeba88468679961e384b30e8864d45bd452327776687d989ec48b8d8df1b094177d9790ca3ae4f92a4ca3360
6
+ metadata.gz: c35bc21ff0de922a2caa61f9b2fc95f83271157abadf76db23338df1ba377782e5f428aac4ce758c2e65d4a775fd9d7fa0ded5dcc1ad92587fa66ff4c2839d05
7
+ data.tar.gz: 6d4c4a506aa6c5b03b97f4bc614aaac2f1c9fcd9fd641a177546adc610e3eac0252413d776cfcda24ec0fc1daaf872a5f9956dfc998b730631c3efa4eac781b7
@@ -68,6 +68,12 @@
68
68
  $opacity_visible: 1;
69
69
  $opacity_hidden: 0;
70
70
 
71
+ .dialog_sticky_header {
72
+ position: sticky;
73
+ top: 0;
74
+ background-color: $white;
75
+ }
76
+
71
77
  // @include pb_card;
72
78
  background-color: $white;
73
79
  box-shadow: $shadow_deepest;
@@ -155,14 +161,29 @@
155
161
  height: 100%;
156
162
  max-height: 100%;
157
163
  max-width: none;
164
+ .dialog_footer {
165
+ position:fixed;
166
+ bottom: 0;
167
+ background-color: $white;
168
+ }
169
+
158
170
  &[class*="_sm"] {
159
171
  width: $medium;
172
+ .dialog_footer {
173
+ width: $medium;
174
+ }
160
175
  }
161
176
  &[class*="_md"] {
162
177
  width: $large;
178
+ .dialog_footer {
179
+ width: $large;
180
+ }
163
181
  }
164
182
  &[class*="_lg"] {
165
183
  width: $xlarge;
184
+ .dialog_footer {
185
+ width: $xlarge;
186
+ }
166
187
  }
167
188
  }
168
189
  }
@@ -170,6 +191,7 @@
170
191
  }
171
192
 
172
193
  //styles specific to rails version of kit
194
+ // rails version has own wrapper because of the way the overlay functions for the HTML dialog used to create this
173
195
  .pb_dialog_wrapper_rails {
174
196
  $medium: 500px;
175
197
  $large: 800px;
@@ -199,24 +221,41 @@
199
221
  height: 100% !important;
200
222
  max-height: 100% !important;
201
223
  max-width: 100%;
224
+ .dialog_footer {
225
+ position:fixed;
226
+ bottom: 0;
227
+ background-color: $white;
228
+ }
202
229
  &[class*="_sm"] {
203
230
  width: $medium;
231
+ .dialog_footer {
232
+ width: $medium;
233
+ }
204
234
  }
205
235
  &[class*="_md"] {
206
236
  width: $large;
237
+ .dialog_footer {
238
+ width: $large;
239
+ }
207
240
  }
208
241
  &[class*="_lg"] {
209
242
  width: $xlarge;
243
+ .dialog_footer {
244
+ width: $xlarge;
245
+ }
210
246
  }
211
247
  }
212
248
  }
213
249
 
250
+ // fixes for stylesheets in nitro that were conflicting with our kit. DO NOT REMOVE.
251
+ //conflicts were only apparent in nitro, not in playbook local env
214
252
  .pb_dialog_rails {
215
253
  top: 0 !important;
216
254
  padding: unset !important;
217
255
  margin: auto;
218
256
 
219
257
  }
258
+ //overlay for rails kit
220
259
  dialog::backdrop {
221
260
  position: fixed;
222
261
  top: 0;
@@ -43,7 +43,7 @@ const DialogHeader = (props: DialogHeaderProps) => {
43
43
  /* eslint-disable react/jsx-handler-names */
44
44
 
45
45
  return (
46
- <>
46
+ <div className="dialog_sticky_header">
47
47
  <Flex
48
48
  {...ariaProps}
49
49
  {...dataProps}
@@ -56,11 +56,12 @@ const DialogHeader = (props: DialogHeaderProps) => {
56
56
  onClose={api.onClose}
57
57
  />
58
58
  }
59
+
59
60
  </Flex>
60
61
  {separator &&
61
62
  <SectionSeparator />
62
63
  }
63
- </>
64
+ </div>
64
65
  )
65
66
  }
66
67
 
@@ -1,6 +1,7 @@
1
1
  <%= content_tag(:div,
2
2
  id: object.id,
3
3
  data: object.data,
4
+ class: object.sticky_header,
4
5
  aria: object.aria) do %>
5
6
  <%= pb_rails("flex", props: {classname:object.classname, spacing:"between", padding:"sm", align:"center"}) do %>
6
7
  <%= content.presence || object.title %>
@@ -8,6 +8,10 @@ module Playbook
8
8
  def classname
9
9
  generate_classname("dialog_header")
10
10
  end
11
+
12
+ def sticky_header
13
+ "dialog_sticky_header"
14
+ end
11
15
  end
12
16
  end
13
17
  end
@@ -52,11 +52,11 @@ const DialogFullHeight = () => {
52
52
  onClick={toggleHeaderSeparatorDialog}>
53
53
  {"Small Dialog"}
54
54
  </Button>
55
- <Button marginRight="xl"
55
+ <Button marginRight="md"
56
56
  onClick={toggleFooterSeparatorDialog}>
57
57
  {"Medium Dialog"}
58
58
  </Button>
59
- <Button marginRight="xl"
59
+ <Button marginRight="md"
60
60
  onClick={toggleBothSeparatorsDialog}>
61
61
  {"Large Dialog"}
62
62
  </Button>
@@ -1,4 +1,5 @@
1
- <%= pb_rails("button", props: { text: "Open Dialog", data: {"open-dialog": "dialog-scroll"} }) %>
1
+ <%= pb_rails("button", props: { text: "Open Dialog", data: {"open-dialog": "dialog-scroll"}, margin_right: "md" }) %>
2
+ <%= pb_rails("button", props: { text: "Open Full Height Dialog", data: {"open-dialog": "dialog-scroll-full-height"}, margin_right: "md" }) %>
2
3
 
3
4
  <%= pb_rails("dialog", props: {
4
5
  id:"dialog-scroll",
@@ -8,4 +9,15 @@
8
9
  cancel_button: "Cancel",
9
10
  confirm_button: "Confirm",
10
11
  confirm_button_id: "confirm-button-1"
12
+ }) %>
13
+
14
+ <%= pb_rails("dialog", props: {
15
+ full_height: true,
16
+ id:"dialog-scroll-full-height",
17
+ size: "sm",
18
+ title: "Header Title is the Title Prop",
19
+ text: "At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident.",
20
+ cancel_button: "Cancel",
21
+ confirm_button: "Confirm",
22
+ confirm_button_id: "confirm-button-1"
11
23
  }) %>
@@ -2,24 +2,48 @@ import React, { useState } from 'react'
2
2
  import { Button, Dialog } from '../../'
3
3
 
4
4
  const DialogScrollable = () => {
5
- const [isOpen, setIsOpen] = useState(false)
6
- const close = () => setIsOpen(false)
7
- const open = () => setIsOpen(true)
5
+
6
+ const useDialog = (visible = false) => {
7
+ const [opened, setOpened] = useState(visible)
8
+ const toggle = () => setOpened(!opened)
9
+
10
+ return [opened, toggle]
11
+ }
12
+
13
+ const [dialog1Opened, toggleDialog1] = useDialog()
14
+ const [dialog2Opened, toggleDialog2] = useDialog()
8
15
 
9
16
  return (
10
17
  <>
11
- <Button onClick={open}>{'Open Dialog'}</Button>
18
+ <Button marginRight="md"
19
+ onClick={toggleDialog1}>{'Open Dialog'}
20
+ </Button>
21
+ <Button marginRight="md"
22
+ onClick={toggleDialog2}>{'Open Full Height Dialog'}
23
+ </Button>
12
24
  <Dialog
13
25
  cancelButton="Cancel"
14
26
  confirmButton="Okay"
15
- onCancel={close}
16
- onClose={close}
17
- onConfirm={close}
18
- opened={isOpen}
27
+ onCancel={toggleDialog1}
28
+ onClose={toggleDialog1}
29
+ onConfirm={toggleDialog1}
30
+ opened={dialog1Opened}
19
31
  size="md"
20
32
  text="At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat."
21
33
  title="Header Title is the Title Prop"
22
34
  />
35
+ <Dialog
36
+ cancelButton="Cancel"
37
+ confirmButton="Okay"
38
+ fullHeight
39
+ onCancel={toggleDialog2}
40
+ onClose={toggleDialog2}
41
+ onConfirm={toggleDialog2}
42
+ opened={dialog2Opened}
43
+ size="sm"
44
+ text="At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in. At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in."
45
+ title="Header Title is the Title Prop"
46
+ />
23
47
  </>
24
48
  )
25
49
  }
@@ -1,2 +1,5 @@
1
- The dialog will create a scroll container automatically when the text exceeds the height of the page.
2
- No prop or configuration is needed.
1
+ The dialog will create a scroll container automatically when the text exceeds the height of the page. No prop or configuration is needed.
2
+
3
+ When such a scroll container is created, the dialog header will remain fixed at top of dialog and not scroll with the body content.
4
+
5
+ If the dialog is a `fullHeight` variant, the header and footer will both be sticky and not scroll with the body content.
@@ -55,13 +55,13 @@ const DialogSizes = () => {
55
55
  {'Small Dialog'}
56
56
  </Button>
57
57
  <Button
58
- marginRight="xl"
58
+ marginRight="md"
59
59
  onClick={toggleMdDialog}
60
60
  >
61
61
  {'Medium Dialog'}
62
62
  </Button>
63
63
  <Button
64
- marginRight="xl"
64
+ marginRight="md"
65
65
  onClick={toggleLgDialog}
66
66
  >
67
67
  {'Large Dialog'}
@@ -1,3 +1,5 @@
1
+ @import "tokens/typography";
2
+
1
3
  @mixin subtle {
2
4
  [class*=pb_nav_list_kit_item] {
3
5
  list-style: none;
@@ -42,6 +44,7 @@
42
44
  &[class*=_active] [class*=_link] {
43
45
  @include pb_title_4;
44
46
  color: $primary;
47
+ letter-spacing: normal;
45
48
  }
46
49
  }
47
50
  }
@@ -1,14 +1,10 @@
1
1
  /* @flow */
2
- /* eslint-disable react-hooks/rules-of-hooks */
3
2
 
4
- import React, { useCallback, useEffect, useMemo, useState } from 'react'
5
- import classnames from 'classnames'
3
+ import React, { useCallback, useMemo, useState } from "react"
4
+ import classnames from "classnames"
6
5
 
7
- import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
8
- import { globalProps } from '../utilities/globalProps'
9
-
10
- import useZxcvbn from './useZxcvbn'
11
- import useHaveIBeenPwned from './useHaveIBeenPwned'
6
+ import { buildAriaProps, buildCss, buildDataProps } from "../utilities/props"
7
+ import { globalProps } from "../utilities/globalProps"
12
8
 
13
9
  import Body from '../pb_body/_body'
14
10
  import Caption from '../pb_caption/_caption'
@@ -16,14 +12,10 @@ import CircleIconButton from '../pb_circle_icon_button/_circle_icon_button'
16
12
  import Flex from '../pb_flex/_flex'
17
13
  import Icon from '../pb_icon/_icon'
18
14
  import PbReactPopover from '../pb_popover/_popover'
19
- import ProgressSimple from '../pb_progress_simple/_progress_simple'
20
15
  import TextInput from '../pb_text_input/_text_input'
21
16
 
22
17
  type PassphraseProps = {
23
18
  aria?: object,
24
- averageThreshold?: number,
25
- checkPwned?: boolean,
26
- common?: boolean,
27
19
  confirmation?: boolean,
28
20
  className?: string,
29
21
  data?: object,
@@ -31,11 +23,8 @@ type PassphraseProps = {
31
23
  id?: string,
32
24
  inputProps?: {},
33
25
  label?: string,
34
- minLength?: number,
35
26
  onChange: (String) => void,
36
- showTipsBelow?: 'always' | 'xs' | 'sm' | 'md' | 'lg' | 'xl',
37
- onStrengthChange?: (number) => void,
38
- strongThreshold?: number,
27
+ showTipsBelow?: "always" | "xs" | "sm" | "md" | "lg" | "xl",
39
28
  tips?: Array<string>,
40
29
  uncontrolled?: boolean,
41
30
  value: string,
@@ -44,71 +33,56 @@ type PassphraseProps = {
44
33
  const Passphrase = (props: PassphraseProps) => {
45
34
  const {
46
35
  aria = {},
47
- averageThreshold = 2,
48
- checkPwned = false,
49
36
  className,
50
- common = false,
51
37
  confirmation = false,
52
- dark = false,
53
38
  data = {},
39
+ dark = false,
54
40
  id,
55
41
  inputProps = {},
56
- label = confirmation ? 'Confirm Passphrase' : 'Passphrase',
57
- minLength = 12,
42
+ label = confirmation ? "Confirm Passphrase" : "Passphrase",
58
43
  onChange = () => {},
59
- showTipsBelow = 'always',
60
- onStrengthChange,
61
- strongThreshold = 3,
44
+ showTipsBelow = "always",
62
45
  tips = [],
63
46
  uncontrolled = false,
64
- value = '',
47
+ value = "",
65
48
  } = props
66
- const ariaProps = buildAriaProps(aria)
67
49
 
68
- const [uncontrolledValue, setUncontrolledValue] = useState('')
50
+ const [uncontrolledValue, setUncontrolledValue] = useState("")
51
+ const [showPopover, setShowPopover] = useState(false)
52
+ const [showPassphrase, setShowPassphrase] = useState(false)
69
53
 
70
54
  const handleChange = useCallback(
71
- (e) => uncontrolled ? setUncontrolledValue(e.target.value) : onChange(e),
55
+ (e) => (uncontrolled ? setUncontrolledValue(e.target.value) : onChange(e)),
72
56
  [uncontrolled, onChange]
73
57
  )
74
58
 
75
59
  const displayValue = useMemo(
76
60
  () => (uncontrolled ? uncontrolledValue : value),
77
- [value, uncontrolledValue, uncontrolled],
61
+ [value, uncontrolledValue, uncontrolled]
78
62
  )
79
63
 
80
- const [showPopover, setShowPopover] = useState(false)
81
64
  const toggleShowPopover = () => setShowPopover(!showPopover)
82
65
  const handleShouldClosePopover = (shouldClosePopover) => {
83
66
  setShowPopover(!shouldClosePopover)
84
67
  }
85
68
 
86
- const [showPassphrase, setShowPassphrase] = useState(false)
87
69
  const toggleShowPassphrase = (e) => {
88
70
  e.preventDefault()
89
71
  setShowPassphrase(!showPassphrase)
90
72
  }
91
73
 
92
- const classes = classnames(buildCss('pb_passphrase'), globalProps(props), className)
93
-
94
- const isPwned = checkPwned ? useHaveIBeenPwned(displayValue, minLength) : false
95
-
96
- const { percent: progressPercent, variant: progressVariant, text: strengthLabel, strength } = useZxcvbn({ passphrase: displayValue, common, isPwned, confirmation, averageThreshold, minLength, strongThreshold })
97
-
98
- useEffect(() => {
99
- if (typeof onStrengthChange === 'function') {
100
- onStrengthChange(strength)
101
- }
102
- }, [strength])
103
-
104
74
  const tipClass = classnames(
105
- 'passphrase-popover',
106
- (showTipsBelow === 'always' ? null : `show-below-${showTipsBelow}`),
75
+ "passphrase-popover",
76
+ showTipsBelow === "always" ? null : `show-below-${showTipsBelow}`
107
77
  )
108
- const dataProps = useMemo(
109
- () => (buildDataProps(Object.assign({}, data, { strength }))),
110
- [data, strength]
78
+
79
+ const ariaProps = buildAriaProps(aria)
80
+ const classes = classnames(
81
+ buildCss("pb_passphrase"),
82
+ globalProps(props),
83
+ className
111
84
  )
85
+ const dataProps = buildDataProps(data)
112
86
 
113
87
  const popoverReference = (
114
88
  <CircleIconButton
@@ -121,17 +95,17 @@ const Passphrase = (props: PassphraseProps) => {
121
95
  )
122
96
 
123
97
  return (
124
- <div
125
- {...ariaProps}
126
- {...dataProps}
127
- className={classes}
98
+ <div
99
+ {...ariaProps}
100
+ {...dataProps}
101
+ className={classes}
128
102
  id={id}
129
103
  >
130
104
  <label>
131
105
  <Flex align="baseline">
132
- <Caption
133
- className="passphrase-label"
134
- text={label}
106
+ <Caption
107
+ className="passphrase-label"
108
+ text={label}
135
109
  />
136
110
  <If condition={tips.length > 0 && !confirmation}>
137
111
  <PbReactPopover
@@ -142,30 +116,28 @@ const Passphrase = (props: PassphraseProps) => {
142
116
  shouldClosePopover={handleShouldClosePopover}
143
117
  show={showPopover}
144
118
  >
145
- <Flex
146
- align="center"
119
+ <Flex
120
+ align="center"
147
121
  orientation="column"
148
122
  >
149
- <Caption
150
- marginBottom="xs"
151
- text="Tips for a good passphrase"
123
+ <Caption
124
+ marginBottom="xs"
125
+ text="Tips for a good passphrase"
152
126
  />
153
127
  <div>
154
- {
155
- tips.map((tip, i) => (
156
- <Caption
157
- key={i}
158
- marginBottom="xs"
159
- size="xs"
160
- >
161
- <Icon
162
- icon="shield-check"
163
- marginRight="xs"
164
- />
165
- {tip}
166
- </Caption>
167
- ))
168
- }
128
+ {tips.map((tip, i) => (
129
+ <Caption
130
+ key={i}
131
+ marginBottom="xs"
132
+ size="xs"
133
+ >
134
+ <Icon
135
+ icon="shield-check"
136
+ marginRight="xs"
137
+ />
138
+ {tip}
139
+ </Caption>
140
+ ))}
169
141
  </div>
170
142
  </Flex>
171
143
  </PbReactPopover>
@@ -178,23 +150,23 @@ const Passphrase = (props: PassphraseProps) => {
178
150
  marginBottom="xs"
179
151
  onChange={handleChange}
180
152
  placeholder="Enter a passphrase..."
181
- type={showPassphrase ? 'text' : 'password'}
153
+ type={showPassphrase ? "text" : "password"}
182
154
  value={displayValue}
183
155
  {...inputProps}
184
156
  />
185
- <span
186
- className="show-passphrase-icon"
157
+ <span
158
+ className="show-passphrase-icon"
187
159
  onClick={toggleShowPassphrase}
188
160
  >
189
161
  <Body
190
- className={showPassphrase ? 'hide-icon' : ''}
162
+ className={showPassphrase ? "hide-icon" : ""}
191
163
  color="light"
192
164
  dark={dark}
193
165
  >
194
166
  <Icon icon="eye-slash" />
195
167
  </Body>
196
168
  <Body
197
- className={showPassphrase ? '' : 'hide-icon'}
169
+ className={showPassphrase ? "" : "hide-icon"}
198
170
  color="light"
199
171
  dark={dark}
200
172
  >
@@ -203,21 +175,8 @@ const Passphrase = (props: PassphraseProps) => {
203
175
  </span>
204
176
  </div>
205
177
  </label>
206
- <If condition={!confirmation}>
207
- <ProgressSimple
208
- className={displayValue.length === 0 ? 'progress-empty-input' : null}
209
- dark={dark}
210
- percent={progressPercent}
211
- variant={progressVariant}
212
- />
213
- <Caption
214
- dark={dark}
215
- size="xs"
216
- text={strengthLabel}
217
- />
218
- </If>
219
178
  </div>
220
- )
221
- }
179
+ );
180
+ };
222
181
 
223
- export default Passphrase
182
+ export default Passphrase;