playbook_ui 11.11.0 → 11.12.1.pre.alpha.passphrase1

data/app/pb_kits/playbook/pb_line_graph/docs/index.js

@@ -1,5 +1,6 @@
 export { default as LineGraphDefault } from './_line_graph_default.jsx'
 export { default as LineGraphLegend } from './_line_graph_legend.jsx'
+export { default as LineGraphLegendPosition } from './_line_graph_legend_position.jsx'
 export { default as LineGraphLegendNonclickable } from './_line_graph_legend_nonclickable.jsx'
 export { default as LineGraphHeight } from './_line_graph_height.jsx'
 export { default as LineGraphColors } from './_line_graph_colors.jsx'

data/app/pb_kits/playbook/pb_line_graph/line_graph.rb

@@ -3,6 +3,9 @@
 module Playbook
   module PbLineGraph
     class LineGraph < Playbook::KitBase
+      prop :align, type: Playbook::Props::Enum,
+                   values: %w[left right center],
+                   default: "center"
       prop :axis_title
       prop :chart_data, type: Playbook::Props::Array,
                         default: []
@@ -22,6 +25,14 @@ module Playbook
       prop :height
       prop :colors, type: Playbook::Props::Array,
                     default: []
+      prop :layout, type: Playbook::Props::Enum,
+                    values: %w[horizontal vertical proximate],
+                    default: "horizontal"
+      prop :vertical_align, type: Playbook::Props::Enum,
+                            values: %w[top middle bottom],
+                            default: "bottom"
+      prop :x, type: Playbook::Props::Numeric
+      prop :y, type: Playbook::Props::Numeric
 
       def chart_type
         gradient ? "area" : "line"
@@ -29,13 +40,14 @@ module Playbook
 
       def chart_options
         {
+          align: align,
           id: id,
           className: classname,
           chartData: chart_data,
           dark: dark ? "dark" : "",
           type: chart_type,
           title: title,
-          subtitle: subtitle,
+          subTitle: subtitle,
           axisTitle: axis_title,
           pointStart: point_start,
           xAxisCategories: x_axis_categories,
@@ -45,6 +57,10 @@ module Playbook
           toggleLegendClick: toggle_legend_click,
           height: height,
           colors: colors,
+          layout: layout,
+          verticalAlign: vertical_align,
+          x: x,
+          y: y,
         }
       end
 

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;

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

@@ -1 +1,145 @@
-<%= pb_rails("passphrase", props: { check_pwned: true }) %>
+<%= pb_rails("passphrase", props: { label: "Passphrase", classname: "passphrase_breached" }) %>
+
+<%= pb_rails("progress_simple", props: { percent: 0, id: "bar_breached" }) %>
+
+<%= pb_rails("caption", props: { size: 'xs', text: "hello", id: "caption_breached" }) %>
+
+<%= javascript_tag do %>
+    window.addEventListener("DOMContentLoaded", () => {
+
+    // variables for the kits you are targeting 
+    const passphrase = document.querySelector(".passphrase_breached").querySelector("input")
+    const barVariant = document.getElementById("bar_breached")
+    const barPercent = document.getElementById("bar_breached").querySelector("div")
+    const caption = document.getElementById("caption_breached")
+
+    // hide the bar and captions
+    barVariant.style.display = 'none';
+    barPercent.style.display = 'none';
+    caption.style.display = 'none';
+
+
+  const handleStrengthCalculation = (settings) => {
+    const {
+        passphrase = "",
+        common = false,
+        isPwned = false,
+        averageThreshold = 2,
+        minLength = 12,
+        strongThreshold = 3,
+      } = settings
+
+    const resultByScore = {
+      0: {
+        variant: 'negative',
+        label: '',
+        percent: 0,
+      },
+      1: {
+        variant: 'negative',
+        label: 'This passphrase is too common',
+        percent: 25,
+      },
+      2: {
+        variant: 'negative',
+        label: 'Too weak',
+        percent: 25,
+      },
+      3: {
+        variant: 'warning',
+        label: 'Almost there, keep going!',
+        percent: 50,
+      },
+      4: {
+        variant: 'positive',
+        label: 'Success! Strong passphrase',
+        percent: 100,
+      }
+    }
+
+    const { score } = zxcvbn(passphrase);
+
+    const noPassphrase = passphrase.length <= 0
+    const commonPassphrase = common || isPwned
+    const weakPassphrase = passphrase.length < minLength || score < averageThreshold
+    const averagePassphrase = score < strongThreshold
+    const strongPassphrase = score >= strongThreshold
+
+    if (noPassphrase) {
+      return {...resultByScore[0], score}
+    } else if (commonPassphrase) {
+      return {...resultByScore[1], score}
+    } else if (weakPassphrase) {
+      return {...resultByScore[2], score}
+    } else if (averagePassphrase){
+      return {...resultByScore[3], score}
+    } else if (strongPassphrase) {
+      return {...resultByScore[4], score}
+    }
+  }
+
+    // event listeners attached to the input field
+    passphrase.addEventListener('input', (e) => {
+      const passphrase = e.target.value;
+
+      let pwndMatch = false
+
+      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()
+    
+        if (passphrase.length < 5) {
+          pwndMatch = false
+        }
+        else {
+          pwndMatch = text.split('\n').some((line) => {
+          return line.split(':')[0] === endOfHash.toUpperCase()
+          })
+        }
+
+        // pass in passphrase and isPwnd match to the handleStrengthCalculation and set that equal to result variable
+        const result = handleStrengthCalculation({ passphrase: passphrase, isPwned: pwndMatch });
+
+
+        // conditional statment to show or hide progress_simple bar and caption if user has entered a password
+        if (passphrase) {
+          barVariant.style.display = 'block';
+
+          barPercent.style.display = 'block';
+
+          caption.style.display = 'block';
+        } else {
+          barVariant.style.display = 'none';
+
+          barPercent.style.display = 'none';
+
+          caption.style.display = 'none';
+        }
+
+        // set the width of the progress_simple kit
+        barPercent.style.width = result.percent.toString()+ "%"
+
+
+        // set the variant of the progress_simple kit
+        barVariant.setAttribute("class", "pb_progress_simple_kit_"+ result.variant +"_left");
+
+
+        // set the text of the caption kit
+        caption.textContent = result.label
+      }
+
+      checkHaveIBeenPwned(passphrase)
+
+
+    });
+
+  })
+<% end %>

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

@@ -1,22 +1,146 @@
-import React, { useState } from 'react'
+import React, { useState, useEffect } from 'react'
 
-import Passphrase from '../_passphrase'
+import { Caption, Passphrase, ProgressSimple } from '../..'
+import zxcvbn from 'zxcvbn'
 
 const PassphraseBreached = (props) => {
   const [input, setInput] = useState('')
+  const [isPwned, setIsPwned] = useState(false)
+  const [checkStrength, setCheckStrength] = useState({
+    label: '',
+    percent: 0,
+    score: 0,
+    variant: ''
+  })
+
 
   const handleChange = (e) => setInput(e.target.value)
 
+  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
+  }
+
+  const handleStrengthCalculation = (settings) => {
+    const {
+        passphrase = "",
+        common = false,
+        isPwned = false,
+        averageThreshold = 2,
+        minLength = 12,
+        strongThreshold = 3,
+      } = settings
+
+    const resultByScore = {
+      0: {
+        variant: 'negative',
+        label: '',
+        percent: 0,
+      },
+      1: {
+        variant: 'negative',
+        label: 'This passphrase is too common',
+        percent: 25,
+      },
+      2: {
+        variant: 'negative',
+        label: 'Too weak',
+        percent: 25,
+      },
+      3: {
+        variant: 'warning',
+        label: 'Almost there, keep going!',
+        percent: 50,
+      },
+      4: {
+        variant: 'positive',
+        label: 'Success! Strong passphrase',
+        percent: 100,
+      }
+    }
+
+    const { score } = zxcvbn(passphrase);
+
+    const noPassphrase = passphrase.length <= 0
+    const commonPassphrase = common || isPwned
+    const weakPassphrase = passphrase.length < minLength || score < averageThreshold
+    const averagePassphrase = score < strongThreshold
+    const strongPassphrase = score >= strongThreshold
+
+    if (noPassphrase) {
+      return {...resultByScore[0], score}
+    } else if (commonPassphrase) {
+      return {...resultByScore[1], score}
+    } else if (weakPassphrase) {
+      return {...resultByScore[2], score}
+    } else if (averagePassphrase){
+      return {...resultByScore[3], score}
+    } else if (strongPassphrase) {
+      return {...resultByScore[4], score}
+    }
+  }
+
+  useEffect(
+    () => {
+      const delay = 400
+      const result = handleStrengthCalculation({ passphrase: input, isPwned: isPwned });
+    
+      setCheckStrength({ ...result })
+
+      // only check the API for passphrases above the minimum size
+      if (input.length < 5) {
+        setIsPwned(false)
+        return
+      }
+
+      const handler = setTimeout(() => {
+        checkHaveIBeenPwned(input)
+          .then((pwned) => setIsPwned(pwned))
+          .catch(() => setIsPwned(false))
+      }, delay)
+
+      return () => {
+        clearTimeout(handler)
+      }
+    },
+    [input, isPwned]
+  )
+
   return (
     <>
       <div>
         <br />
         <Passphrase
-            checkPwned
             onChange={handleChange}
             value={input}
             {...props}
         />
+        {checkStrength.percent > 0 ? 
+          <>
+            <ProgressSimple
+                className={input.length === 0 ? "progress-empty-input" : null}
+                percent={checkStrength.percent}
+                variant={checkStrength.variant}
+            />
+            <Caption size='xs'
+                text={checkStrength.label} 
+            />
+          </>
+        : null}
       </div>
     </>
   )

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

@@ -1,3 +1,12 @@
-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.
+Use <a href='https://haveibeenpwned.com/Passwords'>HaveIBeenPwned's</a> API to check for breached passwords.
+
+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.
+
+This uses their k-Anonymity model, so only the first 5 characters of a hashed copy of the passphrase are sent.
+
+<div class="pb_pill_kit_warning"><div class="pb_title_kit_size_4 pb_pill_text">Disclaimer</div></div>
+
+This example depends on the `zxcvbn` library and `haveibeenpwned` API. 
+
+You can use any library to achieve the same result, this example only intends to show how to add more features to the `Passphrase` kit.