playbook_ui 9.5.0 → 9.6.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 2381b18440b9c161bb5fedd7adaa62cb6231ef81aff16a6078c37bd2a08368fa
-  data.tar.gz: 7d969a36b50458b303453f005471dd10def62fafbcfa358ca12f15125536b32e
+  metadata.gz: d5c9c206b5e2196df28e9fdb9088f32c40c5e3c1813d6f540080c2d57274639c
+  data.tar.gz: af75f14e148548a6ac02dff2ccf0d3cd5a91606e77b9e2b0a99a2a99494b8bbe
 SHA512:
-  metadata.gz: 171386b3c28a4b2a9f20fa038b9d61030baf429093a489162045633500356b0a05d8b63a6f735932adc95fac7acec4b61b309d01468d495e67ecde820f88689d
-  data.tar.gz: ad65ae5c98a64bf1a09742ba5d5cd7ea94bebefedfba1ed00961c995d311eff8f116866d28f997761c813dbbfbf99809bf3e70c3d0a75d882c2dcc4263d38dd0
+  metadata.gz: 35e89c59f507a8b8b9066fd62ea2dbd957da3c13ff6ff28680eeed2cb6df74f131e08223be7e463373ee00d9383048e1158bf9a68dbd11d16f898cbc7597a20c
+  data.tar.gz: a930c3874d040650eed126e1ac89d75767bc2aa8a76a9b9235039b15eb2173e8b89c9f87966ad79859341010b699dfca023f9a62f1f6fd6a6b17430a349ee55e

data/app/pb_kits/playbook/_playbook.scss

@@ -55,6 +55,7 @@
 @import 'pb_multiple_users_stacked/multiple_users_stacked';
 @import 'pb_nav/nav';
 @import 'pb_online_status/online_status';
+@import 'pb_passphrase/passphrase';
 @import 'pb_person/person';
 @import 'pb_person_contact/person_contact';
 @import 'pb_pill/pill';

data/app/pb_kits/playbook/data/menu.yml

@@ -26,6 +26,7 @@ kits:
     - form
     - form_group
     - form_pill
+    - passphrase
     - radio
     - rich_text_editor
     - select

data/app/pb_kits/playbook/index.js

@@ -61,6 +61,7 @@ export MultipleUsersStacked from './pb_multiple_users_stacked/_multiple_users_st
 export Nav from './pb_nav/_nav.jsx'
 export NavItem from './pb_nav/_item.jsx'
 export OnlineStatus from './pb_online_status/_online_status.jsx'
+export Passphrase from './pb_passphrase/_passphrase.jsx'
 export PbReactPopover from './pb_popover/_popover.jsx'
 export Person from './pb_person/_person.jsx'
 export PersonContact from './pb_person_contact/_person_contact.jsx'
@@ -84,13 +85,13 @@ export StatChange from './pb_stat_change/_stat_change.jsx'
 export StatValue from './pb_stat_value/_stat_value.jsx'
 export Table from './pb_table/_table.jsx'
 export TableRow from './pb_table/_table_row.jsx'
-export Textarea from './pb_textarea/_textarea.jsx'
 export TextInput from './pb_text_input/_text_input.jsx'
+export Textarea from './pb_textarea/_textarea.jsx'
 export Time from './pb_time/_time.jsx'
-export Timeline from './pb_timeline/_timeline.jsx'
+export TimeRangeInline from './pb_time_range_inline/_time_range_inline.jsx'
 export TimeStacked from './pb_time_stacked/_time_stacked.jsx'
+export Timeline from './pb_timeline/_timeline.jsx'
 export Timestamp from './pb_timestamp/_timestamp.jsx'
-export TimeRangeInline from './pb_time_range_inline/_time_range_inline.jsx'
 export Title from './pb_title/_title.jsx'
 export TitleCount from './pb_title_count/_title_count.jsx'
 export TitleDetail from './pb_title_detail/_title_detail.jsx'

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

@@ -0,0 +1,205 @@
+
+/* @flow */
+
+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 { Body, Caption, Flex, Icon, PbReactPopover, ProgressSimple, TextInput } from '../'
+
+type PassphraseProps = {
+  aria?: object,
+  averageThreshold?: number,
+  common?: boolean,
+  confirmation?: boolean,
+  className?: string,
+  data?: object,
+  dark?: boolean,
+  id?: string,
+  inputProps?: {},
+  label?: string,
+  minLength?: number,
+  onChange: (String) => void,
+  showTipsBelow?: 'always' | 'xs' | 'sm' | 'md' | 'lg' | 'xl',
+  onStrengthChange?: (number) => void,
+  strongThreshold?: number,
+  tips?: Array<string>,
+  uncontrolled?: boolean,
+  value: string,
+}
+
+const Passphrase = (props: PassphraseProps) => {
+  const {
+    aria = {},
+    averageThreshold = 2,
+    className,
+    common = false,
+    confirmation = false,
+    dark = false,
+    data = {},
+    id,
+    inputProps = {},
+    label = confirmation ? 'Confirm Passphrase' : 'Passphrase',
+    minLength,
+    onChange = () => {},
+    showTipsBelow = 'always',
+    onStrengthChange,
+    strongThreshold = 3,
+    tips = [],
+    uncontrolled = false,
+    value = '',
+  } = props
+
+  const [uncontrolledValue, setUncontrolledValue] = useState('')
+
+  const handleChange = useCallback(
+    (e) => uncontrolled ? setUncontrolledValue(e.target.value) :  onChange(e),
+    [uncontrolled, onChange]
+  )
+
+  const displayValue = useMemo(
+    () => (uncontrolled ? uncontrolledValue : value),
+    [value, uncontrolledValue, uncontrolled],
+  )
+
+  const [showPopover, setShowPopover] = useState(false)
+  const toggleShowPopover = () => setShowPopover(!showPopover)
+  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 { percent: progressPercent, variant: progressVariant, text: strengthLabel, strength } = calculator.test(displayValue, common)
+
+  useEffect(() => {
+    if (typeof onStrengthChange === 'function') {
+      onStrengthChange(strength)
+    }
+  }, [strength])
+
+  const tipClass = classnames(
+    (dark ? 'dark' : null),
+    (showTipsBelow === 'always' ? null : `show-below-${showTipsBelow}`),
+  )
+
+  const popoverReference = (
+    <a
+        className={tipClass}
+        onClick={toggleShowPopover}
+    >
+      <Icon
+          dark={dark}
+          icon="info-circle"
+          size="xs"
+          variant="link"
+      />
+    </a>
+  )
+
+  return (
+    <div
+        {...ariaProps}
+        {...dataProps}
+        className={classes}
+        id={id}
+    >
+      <label>
+        <Flex align="baseline">
+          <Caption
+              className="passphrase-label"
+              text={label}
+          />
+          <If condition={tips.length > 0 && !confirmation}>
+            <PbReactPopover
+                placement="right"
+                reference={popoverReference}
+                show={showPopover}
+            >
+              <Flex
+                  align="center"
+                  orientation="column"
+              >
+                <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>
+                    ))
+                  }
+                </div>
+              </Flex>
+            </PbReactPopover>
+          </If>
+        </Flex>
+        <div className="passphrase-text-input-wrapper">
+          <TextInput
+              className="passphrase-text-input"
+              dark={dark}
+              marginBottom="xs"
+              onChange={handleChange}
+              placeholder="Enter a passphrase..."
+              type={showPassphrase ? 'text' : 'password'}
+              value={displayValue}
+              {...inputProps}
+          />
+          <span
+              className="show-passphrase-icon"
+              dark={dark}
+              onClick={toggleShowPassphrase}
+          >
+            <Body
+                className={showPassphrase ? 'hide-icon' : ''}
+                color="light"
+                dark={dark}
+            >
+              <Icon icon="eye-slash" />
+            </Body>
+            <Body
+                className={showPassphrase ? '' : 'hide-icon'}
+                color="light"
+                dark={dark}
+            >
+              <Icon icon="eye" />
+            </Body>
+          </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

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

@@ -0,0 +1,73 @@
+@import "../tokens/colors";
+@import "../tokens/spacing";
+@import "../tokens/screen_sizes";
+
+.pb_passphrase {
+  margin-bottom: $space_sm;
+
+  label {
+    display: inline;
+  }
+
+  a.dark {
+    color: $white;
+  }
+
+  a {
+
+    &[class*=show-below-] {
+      display: none;
+    }
+    @each $breakpoint_name, $breakpoint in $breakpoints {
+      &.show-below-#{$breakpoint_name} {
+        @include break_at($breakpoint) {
+          display: inline;
+        }
+      }
+    }
+  }
+
+  .passphrase-label {
+    margin-right: ($space_xs/2);
+  }
+
+  .passphrase-text-input-wrapper {
+    position: relative;
+
+    .pb_text_input_kit_label {
+      margin-bottom: ($space_xs/2);
+    }
+
+    .passphrase-text-input input {
+      padding-right: 42px;
+    }
+
+    .passphrase-text-input .text_input_wrapper {
+      margin-bottom: 0;
+    }
+
+    .show-passphrase-icon {
+      position: absolute;
+      right: 11px;
+      top: 11px;
+      cursor: pointer;
+      @media (hover:hover) {
+        &:hover .pb_body_kit_light {
+          color: $primary;
+        }
+      }
+
+      .hide-icon {
+        display: none;
+      }
+    }
+  }
+
+  .pb_progress_simple_wrapper, .pb_progress_simple_wrapper_dark {
+    margin-bottom: ($space_xs/2);
+
+    &.progress-empty-input {
+      visibility: hidden;
+    }
+  }
+}

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

@@ -0,0 +1,33 @@
+import React, { useState } from 'react'
+import { Body, Passphrase } from '../../'
+
+const PassphraseCommon = (props) => {
+  const [input, setInput] = useState('')
+
+  const handleChange = (e) => setInput(e.target.value)
+
+  const COMMON_PASSPHRASES = ['passphrase', 'apple', 'password', 'p@55w0rd']
+
+  const commonCheck = (passphrase) => {
+    if (COMMON_PASSPHRASES.includes(passphrase))
+      return true
+    return false
+  }
+
+  return (
+    <>
+      <div>
+        <Body text={`Try typing any of the following: ${COMMON_PASSPHRASES.join(' ')}`} />
+        <br />
+        <Passphrase
+            common={commonCheck(input)}
+            onChange={handleChange}
+            value={input}
+            {...props}
+        />
+      </div>
+    </>
+  )
+}
+
+export default PassphraseCommon

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

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

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

@@ -0,0 +1,31 @@
+import React, { useState } from 'react'
+import { Passphrase } from '../../'
+
+const PassphraseDefault = (props) => {
+  const [input, setInput] = useState('')
+  const handleChange = (e) => setInput(e.target.value)
+
+  const [confoInput, setConfoInput] = useState('')
+  const handleConfoChange = (e) => setConfoInput(e.target.value)
+
+  return (
+    <>
+      <div>
+        <Passphrase
+            onChange={handleChange}
+            value={input}
+            {...props}
+        />
+        <Passphrase
+            confirmation
+            onChange={handleConfoChange}
+            value={confoInput}
+            {...props}
+        />
+        <span>{input === confoInput ? 'They match!' : 'They don\'t match!'}</span>
+      </div>
+    </>
+  )
+}
+
+export default PassphraseDefault

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

@@ -0,0 +1 @@
+Use the `confirmation` prop to only include the label and show/hide icon.

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

@@ -0,0 +1,16 @@
+<%= pb_rails("passphrase", props: {
+  input_props: {
+    disabled: true,
+    id: "my-disabled-passphrase",
+    name: "my-disabled-field",
+  },
+  label: "Input props passed directly to input kit"
+}) %>
+
+<%= pb_rails("passphrase", props: {
+  input_props: {
+    id: "my-custome-id",
+    name: "my-value-name",
+  },
+  label: "Set name, id, etc for use in forms"
+}) %>

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

@@ -0,0 +1,56 @@
+import React, { useState } from 'react'
+import { Passphrase } from '../../'
+
+const PassphraseInputProps = (props) => {
+  const [input, setInput] = useState('')
+
+  const handleChange = (e) => setInput(e.target.value)
+
+  return (
+    <>
+      <div>
+        <Passphrase
+            inputProps={{
+              name: 'my-disabled-field',
+              id: 'my-value-id',
+              disabled: true,
+            }}
+            label="Pass props directly to input kit"
+            onChange={handleChange}
+            value={input}
+            {...props}
+        />
+        <Passphrase
+            inputProps={{
+              children: (
+                <input
+                    onChange={handleChange}
+                    type="password"
+                    value={input}
+                />),
+            }}
+            label="Custom input"
+            onChange={handleChange}
+            value={input}
+            {...props}
+        />
+        <Passphrase
+            inputProps={{ name: 'my-value-name', id: 'my-value-id' }}
+            label="Set name and ID for use in form libraries"
+            onChange={handleChange}
+            value={input}
+            {...props}
+        />
+        <Passphrase
+            confirmation
+            inputProps={{ name: 'my-value-confirmation-name', id: 'my-value-confirmation-id' }}
+            onChange={handleChange}
+            value={input}
+            {...props}
+        />
+      </div>
+    </>
+  )
+}
+
+export default PassphraseInputProps

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

@@ -0,0 +1 @@
+`inputProps` is passed directly to an underlying Text Input kit. See the specific docs <a href="/kits/text_input/react" target="_blank">here</a> for more details.

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

@@ -0,0 +1,10 @@
+
+<%= pb_rails("passphrase", props: { label: "Default Settings"}) %>
+
+<%= pb_rails("passphrase", props: { label: "Min length = 5", min_length: 5}) %>
+
+<%= pb_rails("passphrase", props: { label: "Min length = 30", min_length: 30}) %>
+
+<%= pb_rails("passphrase", props: { average_threshold: 1, label: "Average Threshold = 1"}) %>
+
+<%= pb_rails("passphrase", props: { label: "Strong Threshold = 4", strong_threshold: 4}) %>

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

@@ -0,0 +1,68 @@
+import React, { useState } from 'react'
+import { Body, Passphrase, TextInput } from '../../'
+
+const PassphraseMeterSettings = (props) => {
+  const [input, setInput] = useState('')
+
+  const handleChange = (e) => setInput(e.target.value)
+
+  const [strength, setStrength] = useState(0)
+  const handleStrengthChange = (str) => setStrength(str)
+  return (
+    <>
+      <div>
+        <Body>
+          {'These examples will all share the same input value. Type in any of the inputs to see how the strength meter changes in response to different settings.'}
+        </Body>
+        <br />
+        <TextInput
+            disabled
+            label="Calculated Strength"
+            readOnly
+            value={strength}
+        />
+
+        <Passphrase
+            label="Default settings"
+            onChange={handleChange}
+            onStrengthChange={handleStrengthChange}
+            value={input}
+            {...props}
+        />
+
+        <Passphrase
+            label="Min length = 5"
+            minLength={5}
+            onChange={handleChange}
+            value={input}
+            {...props}
+        />
+        <Passphrase
+            label="Min length = 30"
+            minLength={30}
+            onChange={handleChange}
+            value={input}
+            {...props}
+        />
+
+        <Passphrase
+            averageThreshold={1}
+            label="Average threshold = 1"
+            onChange={handleChange}
+            value={input}
+            {...props}
+        />
+
+        <Passphrase
+            label="Strong Threshold = 4"
+            onChange={handleChange}
+            strongThreshold={4}
+            value={input}
+            {...props}
+        />
+      </div>
+    </>
+  )
+}
+
+export default PassphraseMeterSettings

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

@@ -0,0 +1,9 @@
+By default, the minimum length is 12 and the strength meter will show a strength of 1 if not met. Notice the bar won't change from red until the minimum is met
+Use the `minLength` prop to adjust.
+
+
+The meter also response to `averageThreshold` and `strongTreshold` props. `averageThresold` defaults to 2, and `strongThreshold` defaults to 3.
+This means that the bar will turn yellow when the strength of the passphrase is calculated to be 2 on a 0-4 scale, and green when 3.
+
+Adjust these props to tune the sensitivity of the bar.
+Note: minimum length trumps strength and will set the bar to a red color, despite whatever strength is calculated.

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

@@ -0,0 +1,33 @@
+import React, { useState } from 'react'
+import { Passphrase, TextInput } from '../../'
+
+const PassphraseStrengthChange = (props) => {
+  const [input, setInput] = useState('')
+
+  const handleChange = (e) => setInput(e.target.value)
+
+  const [strength, setStrength] = useState(0)
+  const handleStrengthChange = (str) => setStrength(str)
+
+  return (
+    <>
+      <div>
+        <Passphrase
+            label="Passphrase"
+            onChange={handleChange}
+            onStrengthChange={handleStrengthChange}
+            value={input}
+            {...props}
+        />
+        <TextInput
+            disabled
+            label="Passphrase Strength"
+            readOnly
+            value={strength}
+        />
+      </div>
+    </>
+  )
+}
+
+export default PassphraseStrengthChange

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

@@ -0,0 +1,3 @@
+As the strength of the entered passphrase changes, the optional `onStrengthChange` callback is called with the new strength value. This exposes the calculated strength.
+
+Strength is calculated on a 0-4 scale by the <a href="https://github.com/dropbox/zxcvbn" target="_blank"> Zxcvbn package</a>

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

@@ -0,0 +1,26 @@
+<%= pb_rails("passphrase", props: {
+  label: "Pass an array of strings to the tips prop",
+  tips: ['And the info icon will appear.', 'Each string will be displayed as its own tip'],
+}) %>
+
+<%= pb_rails("passphrase", props: {
+  label: "Omit the prop to hide the icon"
+}) %>
+
+<%= pb_rails("passphrase", props: {
+  label: "Only show tips at small screen size",
+  show_tips_below: "sm",
+  tips: ['Make the password longer', 'Type more things', 'Use something else'],
+}) %>
+
+<%= pb_rails("passphrase", props: {
+  label: "Only show tips at medium screen size",
+  show_tips_below: "md",
+  tips: ['Make the password longer', 'Type more things', 'Use something else'],
+}) %>
+
+<%= pb_rails("passphrase", props: {
+  label: "Only show tips at large screen size",
+  show_tips_below: "lg",
+  tips: ['Make the password longer', 'Type more things', 'Use something else'],
+}) %>

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

@@ -0,0 +1,54 @@
+import React, { useState } from 'react'
+import { Passphrase } from '../../'
+
+const PassphraseTips = (props) => {
+  const [input, setInput] = useState('')
+
+  const handleChange = (e) => setInput(e.target.value)
+
+  return (
+    <>
+      <div>
+        <Passphrase
+            label="Pass an array of strings to the tips prop"
+            onChange={handleChange}
+            tips={['And the info icon will appear.', 'Each string will be displayed as its own tip']}
+            value={input}
+            {...props}
+        />
+        <Passphrase
+            label="Omit the prop to hide the icon"
+            onChange={handleChange}
+            value={input}
+            {...props}
+        />
+        <Passphrase
+            label="Only show tips at small screen size"
+            onChange={handleChange}
+            showTipsBelow="xs"
+            tips={['Make the password longer', 'Type more things', 'Use something else']}
+            value={input}
+            {...props}
+        />
+        <Passphrase
+            label="Only show tips at medium screen size"
+            onChange={handleChange}
+            showTipsBelow="md"
+            tips={['Make the password longer', 'Type more things', 'Use something else']}
+            value={input}
+            {...props}
+        />
+        <Passphrase
+            label="Only show tips at large screen size"
+            onChange={handleChange}
+            showTipsBelow="lg"
+            tips={['Make the password longer', 'Type more things', 'Use something else']}
+            value={input}
+            {...props}
+        />
+      </div>
+    </>
+  )
+}
+
+export default PassphraseTips

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

@@ -0,0 +1 @@
+`showTipsBelow`(react) / `show_tips_below`(rails) takes 'xs', 'sm', 'md', 'lg', 'xl' and only show the tips below the given screen size. Similar to the <a href="/kits/table/react" target="_blank">responsive table breakpoints.</a>  Omit this prop to always show.

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

@@ -0,0 +1,15 @@
+examples:
+
+  rails:
+  - passphrase_default: Default
+  - passphrase_meter_settings: Meter Settings
+  - passphrase_input_props: Input Props
+  - passphrase_tips: Tips
+
+  react:
+  - passphrase_default: Default
+  - passphrase_meter_settings: Meter Settings
+  - passphrase_input_props: Input Props
+  - passphrase_tips: Tips
+  - passphrase_strength_change: Strength Change
+  - passphrase_common: Common Passphrases

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

@@ -0,0 +1,6 @@
+export { default as PassphraseDefault } from './_passphrase_default.jsx'
+export { default as PassphraseMeterSettings } from './_passphrase_meter_settings'
+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'

data/app/pb_kits/playbook/pb_passphrase/passphrase.html.erb

@@ -0,0 +1 @@
+  <%= react_component('Passphrase', object.passphrase_options) %>

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

@@ -0,0 +1,36 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbPassphrase
+    class Passphrase < Playbook::KitBase
+      prop :average_threshold
+      prop :confirmation, type: Playbook::Props::Boolean, default: false
+      prop :input_props, type: Playbook::Props::Hash, default: {}
+      prop :label
+      prop :min_length
+      prop :show_tips_below
+      prop :strong_threshold
+      prop :tips, type: Playbook::Props::Array, default: []
+
+      def classname
+        generate_classname("pb_passphrase")
+      end
+
+      def passphrase_options
+        {
+          dark: dark,
+          id: id,
+          averageThreshold: average_threshold,
+          confirmation: confirmation,
+          inputProps: input_props,
+          label: label,
+          minLength: min_length,
+          showTipsBelow: show_tips_below,
+          strongThreshold: strong_threshold,
+          tips: tips,
+          uncontrolled: true,
+        }.compact
+      end
+    end
+  end
+end

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

@@ -0,0 +1,123 @@
+import React from 'react'
+import { render, screen } from '../utilities/test-utils'
+import { Passphrase } from '../'
+
+const testId = 'text-input1',
+  kitClass = 'pb_passphrase'
+
+/* See these resources for more testing info:
+  - https://github.com/testing-library/jest-dom#usage for useage and examples
+  - https://jestjs.io/docs/en/using-matchers
+*/
+
+test('returns namespaced class name', () => {
+  render(
+    <Passphrase
+        data={{ testid: testId }}
+    />
+  )
+
+  const kit = screen.getByTestId(testId)
+  expect(kit).toHaveClass(kitClass)
+})
+
+test('returns additional class name', () => {
+  render(
+    <Passphrase
+        className="additional_class"
+        data={{ testid: testId }}
+    />
+  )
+
+  const kit = screen.getByTestId(testId)
+  expect(kit).toHaveClass(`${kitClass} additional_class`)
+})
+
+test('returns dark class name', () => {
+  render(
+    <Passphrase
+        dark
+        data={{ testid: testId }}
+    />
+  )
+
+  const kit = screen.getByTestId(testId)
+  expect(kit).toHaveClass(`${kitClass} dark`)
+})
+
+test('passes input props to input element', () => {
+  render(
+    <Passphrase
+        data={{ testid: testId }}
+        inputProps={{
+          name: 'test-name',
+          id: 'test-input-id',
+          disabled: true,
+        }}
+    />
+  )
+
+  const kit = screen.getByTestId(testId)
+  const input = kit.getElementsByTagName('input')[0]
+  expect(input).toHaveAttribute('name', 'test-name')
+  expect(input).toHaveAttribute('id', 'test-input-id')
+  expect(input).toBeDisabled()
+})
+
+test('progress bar is invisible when value is empty', () => {
+  render(
+    <Passphrase
+        data={{ testid: testId }}
+    />
+  )
+
+  const kit = screen.getByTestId(testId)
+  expect(kit.querySelector('[class^=pb_progress_simple_wrapper]')).toHaveClass('progress-empty-input')
+})
+
+test('progress bar is visible when value is not empty', () => {
+  render(
+    <Passphrase
+        data={{ testid: testId }}
+        value="test_password_input"
+    />
+  )
+
+  const kit = screen.getByTestId(testId)
+  expect(kit.querySelector('[class^=pb_progress_simple_wrapper]')).not.toHaveClass('progress-empty-input')
+})
+
+test('no progress bar is show when confirmation is true', () => {
+  render(
+    <Passphrase
+        confirmation
+        data={{ testid: testId }}
+    />
+  )
+
+  const kit = screen.getByTestId(testId)
+  expect(kit.querySelector('[class^=pb_progress_simple_wrapper]')).toBeNull()
+})
+
+test('popover target shows when tips are given', () => {
+  render(
+    <Passphrase
+        data={{ testid: testId }}
+        tips={['some helpful tips']}
+    />
+  )
+
+  const kit = screen.getByTestId(testId)
+  expect(kit.querySelector('[class^=pb_popover_reference_wrapper]')).toBeDefined()
+})
+
+test('popover target does not show when tips are not given', () => {
+  render(
+    <Passphrase
+        data={{ testid: testId }}
+    />
+  )
+
+  const kit = screen.getByTestId(testId)
+  expect(kit.querySelector('[class^=pb_popover_reference_wrapper]')).toBeNull()
+})

data/app/pb_kits/playbook/pb_passphrase/passwordStrength.js

@@ -0,0 +1,55 @@
+import zxcvbn from 'zxcvbn'
+
+export const zxcvbnPasswordScore = (options) => {
+  const {
+    calculate = zxcvbn,
+    averageThreshold = 2,
+    strongThreshold = 3,
+    minLength = 12,
+  } = options
+
+  return {
+    minLength,
+    averageThreshold,
+    strongThreshold,
+    test: function (password = '', common = false) {
+      const feedbackValues = (str) => {
+        let percent, variant, text
+
+        if (password.length <= 0) {
+          percent = '0'
+          variant = 'negative'
+          text = '\u00A0' //nbsp to keep form from jumping when typing beings
+        } else if (common) {
+          percent = '25'
+          variant = 'negative'
+          text = 'This passphrase is too common'
+        } else if (password.length < this.minLength || str < this.averageThreshold) {
+          percent = '25'
+          variant = 'negative'
+          text = 'Too weak'
+        } else if (str < this.strongThreshold){
+          percent = '50'
+          variant = 'warning'
+          text = 'Almost there, keep going!'
+        } else if (str >= this.strongThreshold) {
+          percent = '100'
+          variant = 'positive'
+          text = 'Success! Strong passphrase'
+        }
+        return { percent, variant, text }
+      }
+
+      const result = calculate(password)
+
+      return (
+        {
+          suggestions: result.feedback.suggestions,
+          warning: result.feedback.warning,
+          strength: result.score,
+          ...feedbackValues(result.score),
+        }
+      )
+    },
+  }
+}

data/app/pb_kits/playbook/react_rails_kits.js

@@ -3,6 +3,7 @@ export { default as BarGraph } from './pb_bar_graph/_bar_graph.jsx'
 export { default as DistributionBar } from './pb_distribution_bar/_distribution_bar.jsx'
 export { default as Legend } from './pb_legend/_legend.jsx'
 export { default as LineGraph } from './pb_line_graph/_line_graph.jsx'
+export { default as Passphrase } from './pb_passphrase/_passphrase.jsx'
 export { default as Typeahead } from './pb_typeahead/_typeahead.jsx'
 export { default as RichTextEditor } from './pb_rich_text_editor/_rich_text_editor.jsx'
 export { default as Dialog } from './pb_dialog/_dialog.jsx'

data/lib/playbook/version.rb

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

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 9.5.0
+  version: 9.6.0
 platform: ruby
 authors:
 - Power UX
@@ -1378,6 +1378,29 @@ files:
 - app/pb_kits/playbook/pb_online_status/docs/index.js
 - app/pb_kits/playbook/pb_online_status/online_status.html.erb
 - 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_common.jsx
+- app/pb_kits/playbook/pb_passphrase/docs/_passphrase_default.html.erb
+- app/pb_kits/playbook/pb_passphrase/docs/_passphrase_default.jsx
+- app/pb_kits/playbook/pb_passphrase/docs/_passphrase_default.md
+- app/pb_kits/playbook/pb_passphrase/docs/_passphrase_input_props.html.erb
+- app/pb_kits/playbook/pb_passphrase/docs/_passphrase_input_props.jsx
+- app/pb_kits/playbook/pb_passphrase/docs/_passphrase_input_props.md
+- app/pb_kits/playbook/pb_passphrase/docs/_passphrase_meter_settings.html.erb
+- app/pb_kits/playbook/pb_passphrase/docs/_passphrase_meter_settings.jsx
+- app/pb_kits/playbook/pb_passphrase/docs/_passphrase_meter_settings.md
+- app/pb_kits/playbook/pb_passphrase/docs/_passphrase_strength_change.jsx
+- app/pb_kits/playbook/pb_passphrase/docs/_passphrase_strength_change.md
+- app/pb_kits/playbook/pb_passphrase/docs/_passphrase_tips.html.erb
+- app/pb_kits/playbook/pb_passphrase/docs/_passphrase_tips.jsx
+- app/pb_kits/playbook/pb_passphrase/docs/_passphrase_tips.md
+- app/pb_kits/playbook/pb_passphrase/docs/example.yml
+- app/pb_kits/playbook/pb_passphrase/docs/index.js
+- app/pb_kits/playbook/pb_passphrase/passphrase.html.erb
+- 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_person/_person.jsx
 - app/pb_kits/playbook/pb_person/_person.scss
 - app/pb_kits/playbook/pb_person/docs/_description.md
@@ -2107,7 +2130,8 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.1.4
+rubyforge_project:
+rubygems_version: 2.7.3
 signing_key:
 specification_version: 4
 summary: Playbook Design System