RubyGems - playbook_ui - Versions diffs - 9.6.1 → 9.9.0 - Mend

playbook_ui 9.6.1 → 9.9.0

Files changed (43) hide show

checksums.yaml CHANGED Viewed

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 6ef80e99bb70a0a7346f50ffc0761b136be7db6bbca0dee07ff4a5cb57f3b777
-  data.tar.gz: bb29fb62353081daa6404847ef516d8069f5ea058722002fb1c4b4b392c27e39
+  metadata.gz: cc6cf85248c6d0e0b9c74d63c9d1dffa2a99d8e5b8d1010a8b4622829fa77d66
+  data.tar.gz: dae909122997e3eea81a47c6b5b9260bb84d87316c82cc70b351bec7a75d4ad7
 SHA512:
-  metadata.gz: 3358c2044123dbade10b6cf2514091030618459e77cc20e35141b33a10216e660d8a3e30fd033a28c391fae76e125f045d170dc694657cd7c32e8c2d96ee9b9e
-  data.tar.gz: e29867a0cce06fd7c726fb5ae2033287392f94689e1adc7480ad1416e04136e67fd290102f0c712dfc26184fe326c3709dcf266119b1d96ea10d9fcca0d6fb29
+  metadata.gz: 596e69c28e26d8ddcafc2d1006e8f72f56458a9a8eacc4811a918e0124ddffed05c75e61a8834630d041d742e1dd66d8cd97870b5b1d4ef74e7ce2b9b8f30d09
+  data.tar.gz: 9a71dd4b52c1da10cd03a288accf3c76e18dd8bc71aebe3e2818c7f27763cd65e0b069d9103c95c5d8cad56ec96411340419a3f729b139758c172d8628e6c8a9

data/app/pb_kits/playbook/pb_date/_date.jsx CHANGED Viewed

@@ -95,16 +95,16 @@ const PbDate = (props: PbDateProps) => {
         <Else />
         <>
           <If condition={showIcon}>
-            <Body
+            <Caption
                 className="pb_icon_kit_container"
-                color="light"
                 tag="span"
             >
               <Icon
                   fixedWidth
                   icon="calendar-alt"
+                  size="xs"
               />
-            </Body>
+            </Caption>
           </If>
           <If condition={showDayOfWeek}>
             <Caption tag="div">

data/app/pb_kits/playbook/pb_date/date.html.erb CHANGED Viewed

@@ -39,11 +39,10 @@
     <!-- icon -->
     <% if object.show_icon %>
-      <%= pb_rails("body", props: {
-        color: "light",
+      <%= pb_rails("caption", props: {
         tag: "div",
       }) do %>
-        <%= pb_rails("icon", props: { icon: "calendar-alt", fixed_width: true }) %>
+        <%= pb_rails("icon", props: { icon: "calendar-alt", fixed_width: true, size: 'xs' }) %>
       <% end %>
     <% end %>

data/app/pb_kits/playbook/pb_date/docs/_date_variants.html.erb CHANGED Viewed

@@ -1,4 +1,12 @@
 <div>
+  <%= pb_rails("date", props: {
+    date: DateTime.now,
+    show_icon: true,
+    size: "sm"
+  }) %>
+  <br>
   <%= pb_rails("date", props: {
     date: DateTime.now,
   }) %>

data/app/pb_kits/playbook/pb_date/docs/_date_variants.jsx CHANGED Viewed

@@ -4,6 +4,16 @@ import { Date as FormattedDate } from '../..'
 const DateVariants = (props) => {
   return (
     <div>
+      <FormattedDate
+          showIcon
+          size="sm"
+          value="1995-12-25"
+          {...props}
+      />
+      <br />
+      <br />
       <FormattedDate
           value="1995-12-25"
           {...props}

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

@@ -1,31 +1,30 @@
 # frozen_string_literal: true
 module Playbook
-    module PbDialog
-      class DialogHeader
-        include Playbook::Props
-        partial "pb_dialog/child_kits/dialog_header"
+  module PbDialog
+    class DialogHeader
+      include Playbook::Props
-        prop :closeable, type: Playbook::Props::Boolean, default: true
-        prop :padding
-        prop :separator, type: Playbook::Props::Boolean, default: true
-        prop :spacing
-        prop :text
-        prop :title
-        def dialog_header_options
-          {
-            id: id,
-            closeable: closeable,
-            padding: padding,
-            separator: separator,
-            spacing: spacing,
-            text: text,
-            title: title,
-          }
-        end
+      partial "pb_dialog/child_kits/dialog_header"
+      prop :closeable, type: Playbook::Props::Boolean, default: true
+      prop :padding
+      prop :separator, type: Playbook::Props::Boolean, default: true
+      prop :spacing
+      prop :text
+      prop :title
+      def dialog_header_options
+        {
+          id: id,
+          closeable: closeable,
+          padding: padding,
+          separator: separator,
+          spacing: spacing,
+          text: text,
+          title: title,
+        }
       end
     end
   end
+end

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.jsx CHANGED Viewed

@@ -17,15 +17,17 @@ type FixedConfirmationToastProps = {
   closeable?: boolean,
   data?: string,
   id?: string,
-  status?: "success" | "error" | "neutral" | "tip",
+  multiLine?: boolean,
+  status?: 'success' | 'error' | 'neutral' | 'tip',
   text: string,
 }
 const FixedConfirmationToast = (props: FixedConfirmationToastProps) => {
   const [showToast, toggleToast] = useState(true)
-  const { className, closeable = false, status = 'neutral', text } = props
+  const { className, closeable = false, multiLine = false, status = 'neutral', text } = props
   const css = classnames(
     `pb_fixed_confirmation_toast_kit_${status}`,
+    { '_multi_line': multiLine },
     globalProps(props),
     className
   )

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.scss CHANGED Viewed

@@ -47,6 +47,13 @@ $confirmation_toast_colors: (
       .pb_icon {
         color: $white;
       }
+      &[class*=_multi_line] .pb_fixed_confirmation_toast_text {
+        color: $white;
+        margin: 0 $space_md 0 $space_md;
+        max-width: 100%;
+        white-space: break-spaces;
+      }
     }
   }
 }

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line.html.erb CHANGED Viewed

@@ -1,4 +1,5 @@
 <%= pb_rails("fixed_confirmation_toast", props: {
-  text: "Scan to Assign Selected Items.\nClick here to generate report",
+  multi_line: true,
+  text: "Scan to Assign Selected Items. Click here to generate report",
   status: "tip",
 }) %>

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line.jsx CHANGED Viewed

@@ -5,8 +5,9 @@ const FixedConfirmationToastMultiLine = (props) => {
   return (
     <div>
       <FixedConfirmationToast
+          multiLine
           status="tip"
-          text={'Scan to Assign Selected Items.\n Click here to generate report'}
+          text="Scan to Assign Selected Items. Click here to generate report"
           {...props}
       />
     </div>

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line.md CHANGED Viewed

@@ -1,2 +1,2 @@
-Multi-line is used when the given text will not fit on one line. Using Multi Line allows the height of the confirmation toast to grow.
+Multi-line is used when the given text will not fit on one line. Using Multi Line allows the height of the confirmation toast to grow. Simply resize the screen to see the fixed confirmation toast wrap the text.

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/fixed_confirmation_toast.rb CHANGED Viewed

@@ -7,6 +7,8 @@ module Playbook
                     values: %w[success error neutral tip],
                     default: "neutral"
       prop :text, type: Playbook::Props::String
+      prop :multi_line, type: Playbook::Props::Boolean,
+                       default: false
       prop :closeable, type: Playbook::Props::Boolean,
                        default: false
@@ -18,6 +20,10 @@ module Playbook
         closeable.present? ? " remove_toast" : ""
       end
+      def multi_line_class
+        multi_line.present? ? "multi_line" : nil
+      end
       def icon_value
         case status
         when "success"
@@ -32,7 +38,7 @@ module Playbook
       end
       def classname
-        generate_classname("pb_fixed_confirmation_toast_kit", status) + close_class
+        generate_classname("pb_fixed_confirmation_toast_kit", status, multi_line_class) + close_class
       end
     end
   end

data/app/pb_kits/playbook/pb_flex/_flex_item.jsx CHANGED Viewed

@@ -14,7 +14,7 @@ type FlexItemPropTypes = {
 }
 const FlexItem = (props: FlexItemPropTypes) => {
-  const { children, className, fixedSize, grow, overflow = null, shrink, flex } = props
+  const { children, className, fixedSize, grow, overflow = null, shrink, flex = 'none' } = props
   const growClass = grow === true ? 'grow' : ''
   const flexClass = flex !== 'none' ? `flex_${flex}` : ''
   const overflowClass = overflow ? `overflow_${overflow}` : ''

data/app/pb_kits/playbook/pb_form_group/_form_group.jsx CHANGED Viewed

@@ -10,6 +10,7 @@ type FormGroupProps = {
   children?: Node,
   className?: string,
   data?: object,
+  fullWidth?: boolean,
   id?: string,
 }
@@ -18,13 +19,14 @@ const FormGroup = (props: FormGroupProps) => {
     aria = {},
     className,
     data = {},
+    fullWidth = false,
     id,
     children,
   } = props
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
-  const classes = classnames(buildCss('pb_form_group_kit'), globalProps(props), className)
+  const classes = classnames(buildCss('pb_form_group_kit', { full: fullWidth }), globalProps(props), className)
   return (
     <div

data/app/pb_kits/playbook/pb_form_group/_form_group.scss CHANGED Viewed

@@ -4,6 +4,14 @@
   align-items: flex-end;
   justify-content: flex-start;
+  &[class*=_full] {
+    display: flex;
+    justify-content: space-between;
+    & > div {
+      width: 100%;
+    }
+  }
   & [class^=pb_text_input_kit] .text_input_wrapper,
   & [class^=pb_date_picker_kit] .input_wrapper,
   & [class^=pb_select] {

data/app/pb_kits/playbook/pb_form_group/docs/_form_group_full_width.html.erb ADDED Viewed

@@ -0,0 +1,13 @@
+<div>
+  <%= pb_rails("form_group", props: { full_width: true }) do %>
+    <%= pb_rails("text_input", props: { label: "First Name", placeholder: "Enter First Name" }) %>
+    <%= pb_rails("text_input", props: { label: "Middle Intial", placeholder: "Enter Middle Initial" }) %>
+    <%= pb_rails("text_input", props: { label: "Last Name", placeholder: "Enter Last Name" }) %>
+  <% end %>
+  <br/>
+  <br/>
+  <%= pb_rails("form_group", props: { full_width: true }) do %>
+    <%= pb_rails("text_input", props: { placeholder: "Search" }) %>
+    <%= pb_rails("button", props: { text: "Submit", variant: "secondary" }) %>
+  <% end %>
+</div>

data/app/pb_kits/playbook/pb_form_group/docs/_form_group_full_width.jsx ADDED Viewed

@@ -0,0 +1,43 @@
+import React from 'react'
+import { Button, FormGroup, TextInput } from '../../'
+const FormGroupFullWidth = (props) => (
+  <div>
+    <div>
+      <FormGroup fullWidth>
+        <TextInput
+            label="First Name"
+            placeholder="Enter First Name"
+            {...props}
+        />
+        <TextInput
+            label="Middle Intial"
+            placeholder="Enter Middle Initial"
+            {...props}
+        />
+        <TextInput
+            label="Last Name"
+            placeholder="Enter Last Name"
+            {...props}
+        />
+      </FormGroup>
+    </div>
+    <br />
+    <div>
+      <FormGroup fullWidth>
+        <TextInput
+            placeholder="Search"
+            {...props}
+        />
+        <Button
+            onClick={() => alert('Button Clicked!')}
+            text="Submit"
+            variant="secondary"
+            {...props}
+        />
+      </FormGroup>
+    </div>
+  </div>
+)
+export default FormGroupFullWidth

data/app/pb_kits/playbook/pb_form_group/docs/_form_group_full_width.md ADDED Viewed

	@@ -0,0 +1 @@
1	+ Full Width is a prop that can be added to any of the Form Group options. This prop allows the Form Group to stretch the full width of the div.

data/app/pb_kits/playbook/pb_form_group/docs/example.yml CHANGED Viewed

@@ -3,6 +3,7 @@ examples:
   rails:
   - form_group_default: Default
   - form_group_button: Button
+  - form_group_full_width: Full Width
   - form_group_date_picker: Date Picker
   # - form_group_typeahead: Typeahead
   - form_group_select: Select
@@ -13,6 +14,7 @@ examples:
   react:
   - form_group_default: Default
   - form_group_button: Button
+  - form_group_full_width: Full Width
   - form_group_date_picker: Date Picker
   # - form_group_typeahead: Typeahead
   - form_group_select: Select

data/app/pb_kits/playbook/pb_form_group/docs/index.js CHANGED Viewed

@@ -1,7 +1,7 @@
 export { default as FormGroupDefault } from './_form_group_default.jsx'
 export { default as FormGroupButton } from './_form_group_button.jsx'
+export { default as FormGroupFullWidth } from './_form_group_full_width.jsx'
 export { default as FormGroupDatePicker } from './_form_group_date_picker.jsx'
-// export { default as FormGroupTypeahead } from './_form_group_typeahead.jsx'
 export { default as FormGroupSelect } from './_form_group_select.jsx'
 export { default as FormGroupSelectableCard } from './_form_group_selectable_card.jsx'
 export { default as FormGroupSelectableCardIcon } from './_form_group_selectable_card_icon.jsx'

data/app/pb_kits/playbook/pb_form_group/form_group.rb CHANGED Viewed

@@ -3,8 +3,17 @@
 module Playbook
   module PbFormGroup
     class FormGroup < Playbook::KitBase
+      prop :full_width, type: Playbook::Props::Boolean,
+                        default: false
       def classname
-        generate_classname("pb_form_group_kit")
+        generate_classname("pb_form_group_kit", full_width_class)
+      end
+    private
+      def full_width_class
+        full_width ? "full" : nil
       end
     end
   end

data/app/pb_kits/playbook/pb_nav/_vertical_nav.scss CHANGED Viewed

@@ -16,7 +16,7 @@ $selector: ".pb_nav_list";
     list-style: none;
   }
-  [class*=_title] {
+  [class*=pb_nav_list_title] {
     padding: 0 $space_md $space_sm;
   }

data/app/pb_kits/playbook/pb_nav/docs/_block_nav.html.erb CHANGED Viewed

@@ -1,6 +1,42 @@
-<%= pb_rails("nav", props: {title: "Menu", link: "#"}) do %>
-  <%= pb_rails("nav/item", props: { link: "#", active: true }) do%>Photos<% end %>
-  <%= pb_rails("nav/item", props: { link: "#" }) do%>Music<% end %>
-  <%= pb_rails("nav/item", props: { link: "#" }) do%>Video<% end %>
-  <%= pb_rails("nav/item", props: { link: "#" }) do%>Files<% end %>
+<%= pb_rails("nav", props: {title: "Users", link: "#"}) do %>
+  <%= pb_rails("nav/item", props: { link: "#", active: true }) do%>
+    <%= pb_rails("user", props: {
+      name: "Anna Black",
+      territory: "PHL",
+      title: "Remodeling Consultant",
+      orientation: "horizontal",
+      align: "left",
+      avatar_url: "https://randomuser.me/api/portraits/women/44.jpg"
+    }) %>
+  <% end %>
+  <%= pb_rails("nav/item", props: { link: "#" }) do%>
+    <%= pb_rails("user", props: {
+      name: "Julie Hamilton",
+      territory: "PHL",
+      title: "Inside Sales Agent",
+      orientation: "horizontal",
+      align: "left",
+      avatar_url: "https://randomuser.me/api/portraits/women/45.jpg"
+      }) %>
+    <% end %>
+  <%= pb_rails("nav/item", props: { link: "#" }) do%>
+    <%= pb_rails("user", props: {
+      name: "Dennis Wilks",
+      territory: "PHL",
+      title: "Senior Remodeling Consultant",
+      orientation: "horizontal",
+      align: "left",
+      avatar_url: "https://randomuser.me/api/portraits/men/44.jpg"
+      }) %>
+    <% end %>
+  <%= pb_rails("nav/item", props: { link: "#" }) do%>
+    <%= pb_rails("user", props: {
+      name: "Ronnie Martin",
+      territory: "PHL",
+      title: "Customer Development Representative",
+      orientation: "horizontal",
+      align: "left",
+      avatar_url: "https://randomuser.me/api/portraits/men/46.jpg"
+      }) %>
+    <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_nav/docs/_block_nav.jsx CHANGED Viewed

@@ -1,12 +1,12 @@
 import React from 'react'
-import { Nav } from '../../'
+import { Nav, User } from '../../'
 import NavItem from '../_item.jsx'
 const BlockNav = (props) => {
   return (
     <Nav
         link="#"
-        title="Menu"
+        title="Users"
         {...props}
     >
       <NavItem
@@ -14,11 +14,49 @@ const BlockNav = (props) => {
           link="#"
           {...props}
       >
-        {'Photos'}
+        <User
+            align="left"
+            avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
+            name="Anna Black"
+            orientation="horizontal"
+            territory="PHL"
+            title="Remodeling Consultant"
+            {...props}
+        />
+      </NavItem>
+      <NavItem link="#">
+        <User
+            align="left"
+            avatarUrl="https://randomuser.me/api/portraits/women/45.jpg"
+            name="Julie Hamilton"
+            orientation="horizontal"
+            territory="PHL"
+            title="Inside Sales Agent"
+            {...props}
+        />
+      </NavItem>
+      <NavItem link="#">
+        <User
+            align="left"
+            avatarUrl="https://randomuser.me/api/portraits/men/44.jpg"
+            name="Dennis Wilks"
+            orientation="horizontal"
+            territory="PHL"
+            title="Senior Remodeling Consultant"
+            {...props}
+        />
+      </NavItem>
+      <NavItem link="#">
+        <User
+            align="left"
+            avatarUrl="https://randomuser.me/api/portraits/men/46.jpg"
+            name="Ronnie Martin"
+            orientation="horizontal"
+            territory="PHL"
+            title="Customer Development Representative"
+            {...props}
+        />
       </NavItem>
-      <NavItem link="#">{'Music'}</NavItem>
-      <NavItem link="#">{'Video'}</NavItem>
-      <NavItem link="#">{'Files'}</NavItem>
     </Nav>
   )
 }

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

@@ -5,12 +5,14 @@ import React, { useCallback, useEffect, useMemo, useState } from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps.js'
-import { zxcvbnPasswordScore }  from './passwordStrength.js'
+import useZxcvbn from './useZxcvbn'
+import useHaveIBeenPwned from './useHaveIBeenPwned'
 import { Body, Caption, Flex, Icon, PbReactPopover, ProgressSimple, TextInput } from '../'
 type PassphraseProps = {
   aria?: object,
   averageThreshold?: number,
+  checkPwned?: boolean,
   common?: boolean,
   confirmation?: boolean,
   className?: string,
@@ -33,6 +35,7 @@ const Passphrase = (props: PassphraseProps) => {
   const {
     aria = {},
     averageThreshold = 2,
+    checkPwned = false,
     className,
     common = false,
     confirmation = false,
@@ -41,7 +44,7 @@ const Passphrase = (props: PassphraseProps) => {
     id,
     inputProps = {},
     label = confirmation ? 'Confirm Passphrase' : 'Passphrase',
-    minLength,
+    minLength = 12,
     onChange = () => {},
     showTipsBelow = 'always',
     onStrengthChange,
@@ -50,6 +53,7 @@ const Passphrase = (props: PassphraseProps) => {
     uncontrolled = false,
     value = '',
   } = props
+  const ariaProps = buildAriaProps(aria)
   const [uncontrolledValue, setUncontrolledValue] = useState('')
@@ -68,16 +72,11 @@ const Passphrase = (props: PassphraseProps) => {
   const [showPassphrase, setShowPassphrase] = useState(false)
   const toggleShowPassphrase = () => setShowPassphrase(!showPassphrase)
-  const ariaProps = buildAriaProps(aria)
-  const dataProps = buildDataProps(data)
   const classes = classnames(buildCss('pb_passphrase'), globalProps(props), className)
-  const calculator = useMemo(
-    () => confirmation ? { test: () => ({}) } : zxcvbnPasswordScore({ averageThreshold, strongThreshold, minLength }),
-    [averageThreshold, confirmation, strongThreshold, minLength]
-  )
+  const isPwned = checkPwned ? useHaveIBeenPwned(displayValue, minLength) : false
-  const { percent: progressPercent, variant: progressVariant, text: strengthLabel, strength } = calculator.test(displayValue, common)
+  const { percent: progressPercent, variant: progressVariant, text: strengthLabel, strength } = useZxcvbn({ passphrase: displayValue, common, isPwned, confirmation, averageThreshold, minLength, strongThreshold })
   useEffect(() => {
     if (typeof onStrengthChange === 'function') {
@@ -89,6 +88,10 @@ const Passphrase = (props: PassphraseProps) => {
     (dark ? 'dark' : null),
     (showTipsBelow === 'always' ? null : `show-below-${showTipsBelow}`),
   )
+  const dataProps = useMemo(
+    () => (buildDataProps(Object.assign({}, data, { strength }))),
+    [data, strength]
+  )
   const popoverReference = (
     <a

data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_breached.html.erb ADDED Viewed

	@@ -0,0 +1 @@
1	+ <%= pb_rails("passphrase", props: { check_pwned: true }) %>

data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_breached.jsx ADDED Viewed

@@ -0,0 +1,24 @@
+import React, { useState } from 'react'
+import { Passphrase } from '../../'
+const PassphraseBreached = (props) => {
+  const [input, setInput] = useState('')
+  const handleChange = (e) => setInput(e.target.value)
+  return (
+    <>
+      <div>
+        <br />
+        <Passphrase
+            checkPwned
+            onChange={handleChange}
+            value={input}
+            {...props}
+        />
+      </div>
+    </>
+  )
+}
+export default PassphraseBreached

data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_breached.md ADDED Viewed

@@ -0,0 +1,3 @@
+Use `checkPwned | checked_pwned` prop to enable checking against <a href='https://haveibeenpwned.com/Passwords'>HaveIBeenPwned's</a> API. As the passphrase is typed, it is checked against more than half a billion breached passwords, to help ensure its not compromised.
+Should it fail, the feedback will express the passphrase is too common, prompting the user to change.
+This uses their k-Anonymity model, so only the first 5 characters of a hashed copy of the passphrase are sent.

data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_default.jsx CHANGED Viewed

@@ -12,6 +12,7 @@ const PassphraseDefault = (props) => {
     <>
       <div>
         <Passphrase
+            id="my-passphrase"
             onChange={handleChange}
             value={input}
             {...props}

data/app/pb_kits/playbook/pb_passphrase/docs/example.yml CHANGED Viewed

@@ -5,6 +5,7 @@ examples:
   - passphrase_meter_settings: Meter Settings
   - passphrase_input_props: Input Props
   - passphrase_tips: Tips
+  - passphrase_breached: Breached Passphrases
   react:
   - passphrase_default: Default
@@ -13,3 +14,4 @@ examples:
   - passphrase_tips: Tips
   - passphrase_strength_change: Strength Change
   - passphrase_common: Common Passphrases
+  - passphrase_breached: Breached Passphrases

data/app/pb_kits/playbook/pb_passphrase/docs/index.js CHANGED Viewed

@@ -4,3 +4,4 @@ export { default as PassphraseInputProps } from './_passphrase_input_props'
 export { default as PassphraseTips } from './_passphrase_tips'
 export { default as PassphraseStrengthChange } from './_passphrase_strength_change'
 export { default as PassphraseCommon } from './_passphrase_common'
+export { default as PassphraseBreached } from './_passphrase_breached'

data/app/pb_kits/playbook/pb_passphrase/passphrase.rb CHANGED Viewed

@@ -4,6 +4,7 @@ module Playbook
   module PbPassphrase
     class Passphrase < Playbook::KitBase
       prop :average_threshold
+      prop :check_pwned
       prop :confirmation, type: Playbook::Props::Boolean, default: false
       prop :input_props, type: Playbook::Props::Hash, default: {}
       prop :label
@@ -18,6 +19,7 @@ module Playbook
       def passphrase_options
         {
+          checkPwned: check_pwned,
           dark: dark,
           id: id,
           averageThreshold: average_threshold,

data/app/pb_kits/playbook/pb_passphrase/passphrase.test.jsx CHANGED Viewed

@@ -121,3 +121,15 @@ test('popover target does not show when tips are not given', () => {
   const kit = screen.getByTestId(testId)
   expect(kit.querySelector('[class^=pb_popover_reference_wrapper]')).toBeNull()
 })
+test('data-strength attribute exposes strength of password', () => {
+  render(
+    <Passphrase
+        data={{ testid: testId }}
+        value="correct horse battery staple"
+    />
+  )
+  const kit = screen.getByTestId(testId)
+  expect(parseInt(kit.getAttribute('data-strength'))).toBeGreaterThan(0)
+})

data/app/pb_kits/playbook/pb_passphrase/useHaveIBeenPwned.js ADDED Viewed

@@ -0,0 +1,52 @@
+import  { useEffect, useState } from 'react'
+const checkHaveIBeenPwned = async function (passphrase) {
+  const buffer = new TextEncoder('utf-8').encode(passphrase)
+  const digest = await crypto.subtle.digest('SHA-1', buffer)
+  const hashArray = Array.from(new Uint8Array(digest))
+  const hashHex = hashArray.map((b) => b.toString(16).padStart(2, '0')).join('')
+  const firstFive = hashHex.slice(0, 5)
+  const endOfHash = hashHex.slice(5)
+  const resp = await fetch(`https://api.pwnedpasswords.com/range/${firstFive}`)
+  const text = await resp.text()
+  const match = text.split('\n').some((line) => {
+    //Each line is <sha-1-hash-suffix>:<count of incidents>
+    return line.split(':')[0] === endOfHash.toUpperCase()
+  })
+  return match
+}
+/**
+ * If the input hasn't changed in <delay> ms,
+ * hit the haveibeenpwned api and check if the given passphrase is compromised
+ */
+export default function useHaveIBeenPwned(passphrase, minLength, delay = 400) {
+  const [isPwned, setIsPwned] = useState(false)
+  useEffect(
+    () => {
+      // only check the API for passphrases above the minimum size
+      if (passphrase.length < minLength) {
+        setIsPwned(false)
+        return
+      }
+      const handler = setTimeout(() => {
+        checkHaveIBeenPwned(passphrase)
+          .then((pwned) => setIsPwned(pwned))
+          .catch(() => setIsPwned(false))
+      }, delay)
+      return () => {
+        clearTimeout(handler)
+      }
+    },
+    [passphrase, minLength, delay]
+  )
+  return isPwned
+}

data/app/pb_kits/playbook/pb_passphrase/useZxcvbn.js ADDED Viewed

@@ -0,0 +1,58 @@
+import { useEffect, useMemo, useState } from 'react'
+import zxcvbn from 'zxcvbn'
+export default function useZxcvbn(options) {
+  const { passphrase = '', common, isPwned, confirmation, averageThreshold, minLength, strongThreshold } = options
+  const calculator = useMemo(
+    () => confirmation ?  () => ({ score: 0 }) : zxcvbn,
+    [confirmation]
+  )
+  const [percent, setPercent] = useState('0')
+  const [variant, setVariant] = useState('negative')
+  const [text, setText] = useState('\u00A0') //nbsp to keep height constant
+  const [result, setResult] = useState({})
+  useEffect(() => {
+    if (confirmation) return
+    setResult(calculator(passphrase))
+    const str = result.score
+    const noPassphrase = passphrase.length <= 0
+    const commonPassphrase = common || isPwned
+    const weakPassphrase = passphrase.length < minLength || str < averageThreshold
+    const averagePassphrase = str < strongThreshold
+    const strongPassphrase = str >= strongThreshold
+    if (noPassphrase) {
+      setPercent('0')
+      setVariant('negative')
+      setText('\u00A0') //nbsp to keep height constant
+    } else if (commonPassphrase) {
+      setPercent('25')
+      setVariant('negative')
+      setText('This passphrase is too common')
+    } else if (weakPassphrase) {
+      setPercent('25')
+      setVariant('negative')
+      setText('Too weak')
+    } else if (averagePassphrase){
+      setPercent('50')
+      setVariant('warning')
+      setText('Almost there, keep going!')
+    } else if (strongPassphrase) {
+      setPercent('100')
+      setVariant('positive')
+      setText('Success! Strong passphrase')
+    }
+  }, [passphrase, common, isPwned, averageThreshold, minLength, strongThreshold]
+  )
+  return {
+    strength: common || isPwned ? 0 : result.score,
+    percent,
+    variant,
+    text,
+  }
+}

data/app/pb_kits/playbook/pb_select/_select.jsx CHANGED Viewed

@@ -37,6 +37,8 @@ type SelectProps = {
   id?: string,
   includeBlank?: string,
   label?: string,
+  margin: string,
+  marginBottom: string,
   multiple?: boolean,
   name?: string,
   required?: boolean,
@@ -74,7 +76,14 @@ const Select = ({
   const dataProps = buildDataProps(data)
   const optionsList = createOptions(options)
-  const classes = classnames(buildCss('pb_select'), globalProps(props), className)
+  const classes = classnames(
+    buildCss('pb_select'),
+    globalProps({
+      ...props,
+      marginBottom: props.marginBottom || props.margin || 'sm',
+    }),
+    className)
   const selectWrapperClass = classnames(buildCss('pb_select_kit_wrapper'), { error }, className)
   return (

data/app/pb_kits/playbook/pb_select/_select.scss CHANGED Viewed

@@ -4,7 +4,6 @@
 @import "../tokens/colors";
 [class^=pb_select] {
-  margin-bottom: $space_sm;
   select {
     @include pb_textarea_light;
     @include pb_body_light;
@@ -65,38 +64,36 @@
     transform: translateY(-50%);
     pointer-events: none;
   }
-  &.dark {
-    select {
-      @include pb_textarea_dark;
-      @include pb_body_light_dark;
-      background: none;
-      background-color: rgba($white,.10);
-      box-shadow: inset 0 -11px 20px rgba($white, 0.05);
-      text-shadow: 0 0 0 $text_dk_default;
-      padding-right: $space_xl;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      @media (hover:hover) {
-        &:hover, &:active, &:focus {
-          background-color: rgba($white,.05);
-        }
-      }
-      &:focus{
-        border-color: $active_dark;
+}
+[class^=pb_select].dark {
+  select {
+    @include pb_textarea_dark;
+    @include pb_body_light_dark;
+    background: none;
+    background-color: rgba($white,.10);
+    box-shadow: inset 0 -11px 20px rgba($white, 0.05);
+    text-shadow: 0 0 0 $text_dk_default;
+    padding-right: $space_xl;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    @media (hover:hover) {
+      &:hover, &:active, &:focus {
+        background-color: rgba($white,.05);
       }
     }
-    .pb_select_kit_caret {
-      color: $white;
-    }
-    .pb_select_kit_wrapper {
-      &.error {
-        .pb_select_kit_wrapper {
-          > select:first-child {
-            border-color: $error_dark;
-          }
+  }
+  .pb_select_kit_caret {
+    color: $white;
+  }
+  .pb_select_kit_wrapper {
+    &.error {
+      .pb_select_kit_wrapper {
+        > select:first-child {
+          border-color: $error_dark;
         }
       }
     }
   }
-}
+}

data/app/pb_kits/playbook/pb_select/select.rb CHANGED Viewed

@@ -17,13 +17,17 @@ module Playbook
       prop :required, type: Playbook::Props::Boolean, default: false
       def classname
-        generate_classname("pb_select")
+        generate_classname("pb_select", select_margin_bottom, separator: " ")
       end
       def select_wrapper_class
         "pb_select_kit_wrapper" + error_class
       end
+      def select_margin_bottom
+        margin.present? || margin_bottom.present? ? nil : "mb_sm"
+      end
       def options_to_array
         options.map { |option| [option[:value_text] || option[:value], option[:value]] }
       end

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_default.html.erb CHANGED Viewed

@@ -8,7 +8,7 @@
   <% end %>
   <%= pb_rails("body") do %>
-    When you make a selection, you will see it apear in the list below
+    When you make a selection, you will see it appear in the list below
   <% end %>
   <div data-selected-option></div>

data/app/pb_kits/playbook/pb_typeahead/typeahead.html.erb CHANGED Viewed

@@ -7,7 +7,11 @@
                 class: object.classname) do %>
     <div class="pb_typeahead_wrapper">
       <div class="pb_typeahead_loading_indicator" data-pb-typeahead-kit-loading-indicator>
-        <i class="far fa-spinner fa-spin"></i>
+        <%= pb_rails("icon", props: {
+          icon: "spinner",
+          pulse: true,
+          fixed_width: true,
+        }) %>
       </div>
       <%= pb_rails("text_input", props: {
         type: "search",

data/app/pb_kits/playbook/pb_typeahead/typeahead.rb CHANGED Viewed

@@ -3,8 +3,7 @@
 module Playbook
   module PbTypeahead
     class Typeahead < Playbook::KitBase
-      prop :async, type: Playbook::Props::Boolean,
-                    default: false
+      prop :async, type: Playbook::Props::Boolean, default: false
       prop :default_options, type: Playbook::Props::HashArray, default: []
       prop :get_option_label
       prop :get_option_value
@@ -13,9 +12,7 @@ module Playbook
       prop :load_options
       prop :name
       prop :options, type: Playbook::Props::HashArray, default: []
-      prop :pills, type: Playbook::Props::Boolean,
-                    default: false
+      prop :pills, type: Playbook::Props::Boolean, default: false
       prop :placeholder
       prop :search_term_minimum_length, default: 3
       prop :search_debounce_timeout, default: 250
@@ -45,14 +42,9 @@ module Playbook
           placeholder: placeholder,
         }
-        base_options.merge!({getOptionLabel: get_option_label}) if get_option_label.present?
-        base_options.merge!({getOptionValue: get_option_value}) if get_option_value.present?
-        base_options.merge!({
-          async: true,
-          loadOptions: load_options,
-        }) if async
+        base_options.merge!({ getOptionLabel: get_option_label }) if get_option_label.present?
+        base_options.merge!({ getOptionValue: get_option_value }) if get_option_value.present?
+        base_options.merge!({ async: true, loadOptions: load_options }) if async
         base_options
       end
     end

data/lib/playbook/version.rb CHANGED Viewed

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 module Playbook
-  VERSION = "9.6.1"
+  VERSION = "9.9.0"
 end

metadata CHANGED Viewed

@@ -1,15 +1,15 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 9.6.1
+  version: 9.9.0
 platform: ruby
 authors:
 - Power UX
 - Power Devs
-autorequire:
+autorequire:
 bindir: bin
 cert_chain: []
-date: 2021-04-16 00:00:00.000000000 Z
+date: 2021-04-22 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -285,22 +285,22 @@ dependencies:
   name: rspec-rails
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - ">="
-      - !ruby/object:Gem::Version
-        version: 3.8.0
     - - "~>"
       - !ruby/object:Gem::Version
         version: '3.8'
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 3.8.0
   type: :development
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - ">="
-      - !ruby/object:Gem::Version
-        version: 3.8.0
     - - "~>"
       - !ruby/object:Gem::Version
         version: '3.8'
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 3.8.0
 - !ruby/object:Gem::Dependency
   name: rspec-html-matchers
   requirement: !ruby/object:Gem::Requirement
@@ -1004,6 +1004,9 @@ files:
 - app/pb_kits/playbook/pb_form_group/docs/_form_group_date_picker.jsx
 - app/pb_kits/playbook/pb_form_group/docs/_form_group_default.html.erb
 - app/pb_kits/playbook/pb_form_group/docs/_form_group_default.jsx
+- app/pb_kits/playbook/pb_form_group/docs/_form_group_full_width.html.erb
+- app/pb_kits/playbook/pb_form_group/docs/_form_group_full_width.jsx
+- app/pb_kits/playbook/pb_form_group/docs/_form_group_full_width.md
 - app/pb_kits/playbook/pb_form_group/docs/_form_group_select.html.erb
 - app/pb_kits/playbook/pb_form_group/docs/_form_group_select.jsx
 - app/pb_kits/playbook/pb_form_group/docs/_form_group_selectable_card.html.erb
@@ -1380,6 +1383,9 @@ files:
 - app/pb_kits/playbook/pb_online_status/online_status.rb
 - app/pb_kits/playbook/pb_passphrase/_passphrase.jsx
 - app/pb_kits/playbook/pb_passphrase/_passphrase.scss
+- app/pb_kits/playbook/pb_passphrase/docs/_passphrase_breached.html.erb
+- app/pb_kits/playbook/pb_passphrase/docs/_passphrase_breached.jsx
+- app/pb_kits/playbook/pb_passphrase/docs/_passphrase_breached.md
 - app/pb_kits/playbook/pb_passphrase/docs/_passphrase_common.jsx
 - app/pb_kits/playbook/pb_passphrase/docs/_passphrase_default.html.erb
 - app/pb_kits/playbook/pb_passphrase/docs/_passphrase_default.jsx
@@ -1401,6 +1407,8 @@ files:
 - app/pb_kits/playbook/pb_passphrase/passphrase.rb
 - app/pb_kits/playbook/pb_passphrase/passphrase.test.jsx
 - app/pb_kits/playbook/pb_passphrase/passwordStrength.js
+- app/pb_kits/playbook/pb_passphrase/useHaveIBeenPwned.js
+- app/pb_kits/playbook/pb_passphrase/useZxcvbn.js
 - app/pb_kits/playbook/pb_person/_person.jsx
 - app/pb_kits/playbook/pb_person/_person.scss
 - app/pb_kits/playbook/pb_person/docs/_description.md
@@ -2115,7 +2123,7 @@ homepage: http://playbook.powerapp.cloud
 licenses:
 - MIT
 metadata: {}
-post_install_message:
+post_install_message:
 rdoc_options: []
 require_paths:
 - lib
@@ -2130,8 +2138,8 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.0.3
-signing_key:
+rubygems_version: 3.1.4
+signing_key:
 specification_version: 4
 summary: Playbook Design System
 test_files: []