playbook_ui 9.7.0 → 9.10.0.pre.alpha2

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

@@ -0,0 +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

@@ -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

@@ -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

@@ -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_icon_stat_value/icon_stat_value.rb

@@ -24,7 +24,6 @@ module Playbook
 
       prop :value, type: Playbook::Props::Numeric
 
-
       def classname
         generate_classname("pb_icon_stat_value_kit", orientation, size, variant)
       end

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

@@ -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

@@ -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

@@ -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

@@ -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

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

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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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,
+  }
+}