playbook_ui 11.13.0 → 11.15.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 30ee4e245ff8817c69eab2e6f6ca4202e5aef0fd2b19e6393071f2a17517b22d
-  data.tar.gz: 5024ff1fd7bc91c4541f6ba6f77e04101738d6af310f3576af05c784f605f3b8
+  metadata.gz: cffd8ae39a8b80f013b9bc0fca179e7cdd94be62b1bfcba8a786984fbe6bb15a
+  data.tar.gz: 320820bff742b9b95b6d0867f81782eb6d20edee840ca1e65bd9ecc9fc96d805
 SHA512:
-  metadata.gz: 1971f5cbb1acded9079850bb5773a7d000a6854b4cede7e133b0bb0d05f52cc407bfbc62bfe3fbf04e0382ffb3de2549bebf89bfd919ceba2e3afbe100451c9e
-  data.tar.gz: 8fc5da606291b5ae20206980aee38fefed8d0cadeeba88468679961e384b30e8864d45bd452327776687d989ec48b8d8df1b094177d9790ca3ae4f92a4ca3360
+  metadata.gz: 612b82bdc76521177c494de8203d6a64147a8dc2e6863ad0f28edef9eece3c410236ffa234220ed8c1d0ad69c5b857b8023fa2bf6d0680fec24054f8acd4bbde
+  data.tar.gz: 24e96215afa640ea123786fb2a3656a91e5bff64e3a49b17598034230949be6b1e6671270cb1dee78edaf3563dee09dd09d5f1a7f6f5c9e1b7ba0c80173f5472

data/app/pb_kits/playbook/pb_dialog/_dialog.scss

@@ -68,6 +68,12 @@
 	$opacity_visible: 1;
 	$opacity_hidden: 0;
 
+	.dialog_sticky_header {
+	position: sticky;
+	top: 0;
+	background-color: $white;
+	}
+
 	// @include pb_card;
 	background-color: $white;
 	box-shadow: $shadow_deepest;
@@ -155,14 +161,29 @@
 				height: 100%;
 				max-height: 100%;
 				max-width: none;
+				.dialog_footer {
+					position:fixed;
+					bottom: 0;
+					background-color: $white;
+				}
+				
 				&[class*="_sm"] {
 					width: $medium;
+					.dialog_footer {
+						width: $medium;
+					}
 				}
 				&[class*="_md"] {
 					width: $large;
+					.dialog_footer {
+						width: $large;
+					}
 				}
 				&[class*="_lg"] {
 					width: $xlarge;
+					.dialog_footer {
+						width: $xlarge;
+					}
 				}
 			} 
 		}
@@ -170,6 +191,7 @@
 }
 
 //styles specific to rails version of kit
+// rails version has own wrapper because of the way the overlay functions for the HTML dialog used to create this
 .pb_dialog_wrapper_rails {
 	$medium: 500px;
     $large: 800px;
@@ -199,24 +221,41 @@
 			height: 100% !important;
 			max-height: 100% !important;
 			max-width: 100%;
+			.dialog_footer {
+				position:fixed;
+				bottom: 0;
+				background-color: $white;
+			}
 			&[class*="_sm"] {
 				width: $medium;
+				.dialog_footer {
+					width: $medium;
+				}
 			}
 			&[class*="_md"] {
 				width: $large;
+				.dialog_footer {
+					width: $large;
+				}
 			}
 			&[class*="_lg"] {
 				width: $xlarge;
+				.dialog_footer {
+					width: $xlarge;
+				}
 			}
 		} 
 	}
 
+	// fixes for stylesheets in nitro that were conflicting with our kit. DO NOT REMOVE. 
+	//conflicts were only apparent in nitro, not in playbook local env
 	.pb_dialog_rails {
 		top: 0 !important;
 		padding: unset !important;
 		margin: auto;
 	
 	}
+	//overlay for rails kit
 	dialog::backdrop {
 		position: fixed;
 		top: 0;

data/app/pb_kits/playbook/pb_dialog/child_kits/_dialog_header.tsx

@@ -43,7 +43,7 @@ const DialogHeader = (props: DialogHeaderProps) => {
   /* eslint-disable react/jsx-handler-names */
 
   return (
-    <>
+    <div className="dialog_sticky_header">
       <Flex
           {...ariaProps}
           {...dataProps}
@@ -56,11 +56,12 @@ const DialogHeader = (props: DialogHeaderProps) => {
             onClose={api.onClose}
           />
         }
+        
       </Flex>
       {separator &&
         <SectionSeparator />
       }
-    </>
+    </div>
   )
 }
 

data/app/pb_kits/playbook/pb_dialog/dialog_header.html.erb

@@ -1,6 +1,7 @@
 <%= content_tag(:div,
     id: object.id,
     data: object.data,
+    class: object.sticky_header,
     aria: object.aria) do %>
         <%= pb_rails("flex", props: {classname:object.classname, spacing:"between", padding:"sm", align:"center"}) do %>
             <%= content.presence || object.title %>

data/app/pb_kits/playbook/pb_dialog/dialog_header.rb

@@ -8,6 +8,10 @@ module Playbook
       def classname
         generate_classname("dialog_header")
       end
+
+      def sticky_header
+        "dialog_sticky_header"
+      end
     end
   end
 end

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height.jsx

@@ -52,11 +52,11 @@ const DialogFullHeight = () => {
             onClick={toggleHeaderSeparatorDialog}>
           {"Small Dialog"}
         </Button>
-        <Button marginRight="xl"
+        <Button marginRight="md"
             onClick={toggleFooterSeparatorDialog}>
           {"Medium Dialog"}
         </Button>
-        <Button marginRight="xl"
+        <Button marginRight="md"
             onClick={toggleBothSeparatorsDialog}>
           {"Large Dialog"}
         </Button>

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_scrollable.html.erb

@@ -1,4 +1,5 @@
-<%= pb_rails("button", props: { text: "Open Dialog", data: {"open-dialog": "dialog-scroll"} }) %>
+<%= pb_rails("button", props: { text: "Open Dialog", data: {"open-dialog": "dialog-scroll"}, margin_right: "md" }) %>
+<%= pb_rails("button", props: { text: "Open Full Height Dialog", data: {"open-dialog": "dialog-scroll-full-height"}, margin_right: "md" }) %>
 
 <%= pb_rails("dialog", props: { 
     id:"dialog-scroll", 
@@ -8,4 +9,15 @@
     cancel_button: "Cancel", 
     confirm_button: "Confirm", 
     confirm_button_id: "confirm-button-1"
+}) %>
+
+<%= pb_rails("dialog", props: { 
+    full_height: true,
+    id:"dialog-scroll-full-height", 
+    size: "sm", 
+    title: "Header Title is the Title Prop", 
+    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.", 
+    cancel_button: "Cancel", 
+    confirm_button: "Confirm", 
+    confirm_button_id: "confirm-button-1"
 }) %>

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_scrollable.jsx

@@ -2,24 +2,48 @@ import React, { useState } from 'react'
 import { Button, Dialog } from '../../'
 
 const DialogScrollable = () => {
-  const [isOpen, setIsOpen] = useState(false)
-  const close = () => setIsOpen(false)
-  const open = () => setIsOpen(true)
+
+  const useDialog = (visible = false) => {
+    const [opened, setOpened] = useState(visible)
+    const toggle = () => setOpened(!opened)
+  
+    return [opened, toggle]
+  }
+  
+    const [dialog1Opened, toggleDialog1] = useDialog()
+    const [dialog2Opened, toggleDialog2] = useDialog()
 
   return (
     <>
-      <Button onClick={open}>{'Open Dialog'}</Button>
+      <Button marginRight="md" 
+          onClick={toggleDialog1}>{'Open Dialog'}
+      </Button>
+      <Button marginRight="md" 
+          onClick={toggleDialog2}>{'Open Full Height Dialog'}
+      </Button>
       <Dialog
           cancelButton="Cancel"
           confirmButton="Okay"
-          onCancel={close}
-          onClose={close}
-          onConfirm={close}
-          opened={isOpen}
+          onCancel={toggleDialog1}
+          onClose={toggleDialog1}
+          onConfirm={toggleDialog1}
+          opened={dialog1Opened}
           size="md"
           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."
           title="Header Title is the Title Prop"
       />
+      <Dialog
+          cancelButton="Cancel"
+          confirmButton="Okay"
+          fullHeight
+          onCancel={toggleDialog2}
+          onClose={toggleDialog2}
+          onConfirm={toggleDialog2}
+          opened={dialog2Opened}
+          size="sm"
+          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."
+          title="Header Title is the Title Prop"
+      />
     </>
   )
 }

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_scrollable.md

@@ -1,2 +1,5 @@
-The dialog will create a scroll container automatically when the text exceeds the height of the page. 
-No prop or configuration is needed. 
+The dialog will create a scroll container automatically when the text exceeds the height of the page. No prop or configuration is needed. 
+
+When such a scroll container is created, the dialog header will remain fixed at top of dialog and not scroll with the body content.
+
+If the dialog is a  `fullHeight` variant, the header and footer will both be sticky and not scroll with the body content. 

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_sizes.jsx

@@ -55,13 +55,13 @@ const DialogSizes = () => {
           {'Small Dialog'}
         </Button>
         <Button
-            marginRight="xl"
+            marginRight="md"
             onClick={toggleMdDialog}
         >
           {'Medium Dialog'}
         </Button>
         <Button
-            marginRight="xl"
+            marginRight="md"
             onClick={toggleLgDialog}
         >
           {'Large Dialog'}

data/app/pb_kits/playbook/pb_nav/_subtle_mixin.scss

@@ -1,3 +1,5 @@
+@import "tokens/typography";
+
 @mixin subtle {
   [class*=pb_nav_list_kit_item] {
     list-style: none;
@@ -42,6 +44,7 @@
     &[class*=_active] [class*=_link] {
       @include pb_title_4;
       color: $primary;
+       letter-spacing: normal;
     }
   }
 }

data/app/pb_kits/playbook/pb_passphrase/_passphrase.jsx

@@ -1,14 +1,10 @@
 /* @flow */
-/* eslint-disable react-hooks/rules-of-hooks */
 
-import React, { useCallback, useEffect, useMemo, useState } from 'react'
-import classnames from 'classnames'
+import React, { useCallback, useMemo, useState } from "react"
+import classnames from "classnames"
 
-import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps'
-
-import useZxcvbn from './useZxcvbn'
-import useHaveIBeenPwned from './useHaveIBeenPwned'
+import { buildAriaProps, buildCss, buildDataProps } from "../utilities/props"
+import { globalProps } from "../utilities/globalProps"
 
 import Body from '../pb_body/_body'
 import Caption from '../pb_caption/_caption'
@@ -16,14 +12,10 @@ import CircleIconButton from '../pb_circle_icon_button/_circle_icon_button'
 import Flex from '../pb_flex/_flex'
 import Icon from '../pb_icon/_icon'
 import PbReactPopover from '../pb_popover/_popover'
-import ProgressSimple from '../pb_progress_simple/_progress_simple'
 import TextInput from '../pb_text_input/_text_input'
 
 type PassphraseProps = {
   aria?: object,
-  averageThreshold?: number,
-  checkPwned?: boolean,
-  common?: boolean,
   confirmation?: boolean,
   className?: string,
   data?: object,
@@ -31,11 +23,8 @@ type PassphraseProps = {
   id?: string,
   inputProps?: {},
   label?: string,
-  minLength?: number,
   onChange: (String) => void,
-  showTipsBelow?: 'always' | 'xs' | 'sm' | 'md' | 'lg' | 'xl',
-  onStrengthChange?: (number) => void,
-  strongThreshold?: number,
+  showTipsBelow?: "always" | "xs" | "sm" | "md" | "lg" | "xl",
   tips?: Array<string>,
   uncontrolled?: boolean,
   value: string,
@@ -44,71 +33,56 @@ type PassphraseProps = {
 const Passphrase = (props: PassphraseProps) => {
   const {
     aria = {},
-    averageThreshold = 2,
-    checkPwned = false,
     className,
-    common = false,
     confirmation = false,
-    dark = false,
     data = {},
+    dark = false,
     id,
     inputProps = {},
-    label = confirmation ? 'Confirm Passphrase' : 'Passphrase',
-    minLength = 12,
+    label = confirmation ? "Confirm Passphrase" : "Passphrase",
     onChange = () => {},
-    showTipsBelow = 'always',
-    onStrengthChange,
-    strongThreshold = 3,
+    showTipsBelow = "always",
     tips = [],
     uncontrolled = false,
-    value = '',
+    value = "",
   } = props
-  const ariaProps = buildAriaProps(aria)
 
-  const [uncontrolledValue, setUncontrolledValue] = useState('')
+  const [uncontrolledValue, setUncontrolledValue] = useState("")
+  const [showPopover, setShowPopover] = useState(false)
+  const [showPassphrase, setShowPassphrase] = useState(false)
 
   const handleChange = useCallback(
-    (e) => uncontrolled ? setUncontrolledValue(e.target.value) :  onChange(e),
+    (e) => (uncontrolled ? setUncontrolledValue(e.target.value) : onChange(e)),
     [uncontrolled, onChange]
   )
 
   const displayValue = useMemo(
     () => (uncontrolled ? uncontrolledValue : value),
-    [value, uncontrolledValue, uncontrolled],
+    [value, uncontrolledValue, uncontrolled]
   )
 
-  const [showPopover, setShowPopover] = useState(false)
   const toggleShowPopover = () => setShowPopover(!showPopover)
   const handleShouldClosePopover = (shouldClosePopover) => {
     setShowPopover(!shouldClosePopover)
   }
 
-  const [showPassphrase, setShowPassphrase] = useState(false)
   const toggleShowPassphrase = (e) => {
     e.preventDefault()
     setShowPassphrase(!showPassphrase)
   }
 
-  const classes = classnames(buildCss('pb_passphrase'), globalProps(props), className)
-
-  const isPwned = checkPwned ? useHaveIBeenPwned(displayValue, minLength) : false
-
-  const { percent: progressPercent, variant: progressVariant, text: strengthLabel, strength } = useZxcvbn({ passphrase: displayValue, common, isPwned, confirmation, averageThreshold, minLength, strongThreshold })
-
-  useEffect(() => {
-    if (typeof onStrengthChange === 'function') {
-      onStrengthChange(strength)
-    }
-  }, [strength])
-
   const tipClass = classnames(
-    'passphrase-popover',
-    (showTipsBelow === 'always' ? null : `show-below-${showTipsBelow}`),
+    "passphrase-popover",
+    showTipsBelow === "always" ? null : `show-below-${showTipsBelow}`
   )
-  const dataProps = useMemo(
-    () => (buildDataProps(Object.assign({}, data, { strength }))),
-    [data, strength]
+
+  const ariaProps = buildAriaProps(aria)
+  const classes = classnames(
+    buildCss("pb_passphrase"),
+    globalProps(props),
+    className
   )
+  const dataProps = buildDataProps(data)
 
   const popoverReference = (
     <CircleIconButton
@@ -121,17 +95,17 @@ const Passphrase = (props: PassphraseProps) => {
   )
 
   return (
-    <div
-        {...ariaProps}
-        {...dataProps}
-        className={classes}
+    <div 
+        {...ariaProps} 
+        {...dataProps} 
+        className={classes} 
         id={id}
     >
       <label>
         <Flex align="baseline">
-          <Caption
-              className="passphrase-label"
-              text={label}
+          <Caption 
+              className="passphrase-label" 
+              text={label} 
           />
           <If condition={tips.length > 0 && !confirmation}>
             <PbReactPopover
@@ -142,30 +116,28 @@ const Passphrase = (props: PassphraseProps) => {
                 shouldClosePopover={handleShouldClosePopover}
                 show={showPopover}
             >
-              <Flex
-                  align="center"
+              <Flex 
+                  align="center" 
                   orientation="column"
               >
-                <Caption
-                    marginBottom="xs"
-                    text="Tips for a good passphrase"
+                <Caption 
+                    marginBottom="xs" 
+                    text="Tips for a good passphrase" 
                 />
                 <div>
-                  {
-                    tips.map((tip, i) => (
-                      <Caption
-                          key={i}
-                          marginBottom="xs"
-                          size="xs"
-                      >
-                        <Icon
-                            icon="shield-check"
-                            marginRight="xs"
-                        />
-                        {tip}
-                      </Caption>
-                    ))
-                  }
+                  {tips.map((tip, i) => (
+                    <Caption 
+                        key={i} 
+                        marginBottom="xs" 
+                        size="xs"
+                    >
+                      <Icon 
+                          icon="shield-check" 
+                          marginRight="xs" 
+                      />
+                      {tip}
+                    </Caption>
+                  ))}
                 </div>
               </Flex>
             </PbReactPopover>
@@ -178,23 +150,23 @@ const Passphrase = (props: PassphraseProps) => {
               marginBottom="xs"
               onChange={handleChange}
               placeholder="Enter a passphrase..."
-              type={showPassphrase ? 'text' : 'password'}
+              type={showPassphrase ? "text" : "password"}
               value={displayValue}
               {...inputProps}
           />
-          <span
-              className="show-passphrase-icon"
+          <span 
+              className="show-passphrase-icon" 
               onClick={toggleShowPassphrase}
           >
             <Body
-                className={showPassphrase ? 'hide-icon' : ''}
+                className={showPassphrase ? "hide-icon" : ""}
                 color="light"
                 dark={dark}
             >
               <Icon icon="eye-slash" />
             </Body>
             <Body
-                className={showPassphrase ? '' : 'hide-icon'}
+                className={showPassphrase ? "" : "hide-icon"}
                 color="light"
                 dark={dark}
             >
@@ -203,21 +175,8 @@ const Passphrase = (props: PassphraseProps) => {
           </span>
         </div>
       </label>
-      <If condition={!confirmation}>
-        <ProgressSimple
-            className={displayValue.length === 0 ? 'progress-empty-input' : null}
-            dark={dark}
-            percent={progressPercent}
-            variant={progressVariant}
-        />
-        <Caption
-            dark={dark}
-            size="xs"
-            text={strengthLabel}
-        />
-      </If>
     </div>
-  )
-}
+  );
+};
 
-export default Passphrase
+export default Passphrase;