playbook_ui 9.3.0.alpha.inline3 → 9.3.0.pre.alpha.password.strength.1

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/pb_rich_text_editor/_rich_text_editor.jsx

@@ -1,6 +1,6 @@
 /* @flow */
 
-import React, { forwardRef, useEffect, useRef } from 'react'
+import React, { useEffect, useRef } from 'react'
 import classnames from 'classnames'
 import useFocus from './useFocus.js'
 import Trix from 'trix'
@@ -22,7 +22,7 @@ type RichTextEditorProps = {
   value?: string,
 }
 
-const RichTextEditor = (props: RichTextEditorProps, ref: React.ElementRef<"input">) => {
+const RichTextEditor = (props: RichTextEditorProps) => {
   const {
     aria = {},
     className,
@@ -120,7 +120,6 @@ const RichTextEditor = (props: RichTextEditorProps, ref: React.ElementRef<"input
       <input
           id={id}
           name={name}
-          ref={ref}
           type="hidden"
           value={value}
       />
@@ -134,4 +133,4 @@ const RichTextEditor = (props: RichTextEditorProps, ref: React.ElementRef<"input
   )
 }
 
-export default forwardRef(RichTextEditor)
+export default RichTextEditor

data/app/pb_kits/playbook/pb_text_input/_text_input.jsx

@@ -19,7 +19,6 @@ type TextInputProps = {
   id?: string,
   name: string,
   label: string,
-  onBlur: (String) => void,
   onChange: (String) => void,
   placeholder: string,
   required?: boolean,
@@ -42,7 +41,6 @@ const TextInput = (
     id,
     name,
     label,
-    onBlur = () => {},
     onChange = () => {},
     placeholder,
     required,
@@ -81,7 +79,6 @@ const TextInput = (
               disabled={disabled}
               id={id}
               name={name}
-              onBlur={onBlur}
               onChange={onChange}
               placeholder={placeholder}
               ref={ref}

data/app/pb_kits/playbook/pb_textarea/_textarea.jsx

@@ -24,7 +24,6 @@ type TextareaProps = {
   required?: boolean,
   rows?: number,
   resize: 'none' | 'both' | 'horizontal' | 'vertical' | 'auto',
-  onBlur?: InputCallback<HTMLTextAreaElement>,
   onChange?: InputCallback<HTMLTextAreaElement>,
 }
 
@@ -38,7 +37,6 @@ const Textarea = ({
   label,
   maxCharacters,
   name,
-  onBlur = () => {},
   onChange = () => {},
   placeholder,
   required,
@@ -77,7 +75,6 @@ const Textarea = ({
             className="pb_textarea_kit"
             disabled={disabled}
             name={name}
-            onBlur={onBlur}
             onChange={onChange}
             placeholder={placeholder}
             ref={ref}

data/app/pb_kits/playbook/pb_typeahead/_typeahead.jsx

@@ -3,14 +3,12 @@
 import React from 'react'
 import Select from 'react-select'
 import AsyncSelect from 'react-select/async'
-import CreateableSelect from 'react-select/creatable'
 import { get } from 'lodash'
 import { globalProps } from '../utilities/globalProps.js'
 
 import Control from './components/Control'
 import ClearIndicator from './components/ClearIndicator'
 import IndicatorsContainer from './components/IndicatorsContainer'
-// import Input from './components/Input'
 import MenuList from './components/MenuList'
 import MultiValue from './components/MultiValue'
 import Option from './components/Option'
@@ -28,7 +26,6 @@ import { noop } from '../utilities/props'
 
 type Props = {
   async?: boolean,
-  createable?: boolean,
   dark?: boolean,
   label?: string,
   loadOptions?: noop | string,
@@ -44,14 +41,12 @@ type Props = {
 
 const Typeahead = (props: Props) => {
   const selectProps = {
-    badges: false,
     cacheOptions: true,
     components: {
       Control,
       ClearIndicator,
       IndicatorsContainer,
       IndicatorSeparator: null,
-      // Input,
       MenuList,
       MultiValue,
       Option,
@@ -63,8 +58,6 @@ const Typeahead = (props: Props) => {
     isClearable: true,
     isSearchable: true,
     name,
-    onCreate: () => {},
-    plusIcon: false,
     ...props,
   }
 
@@ -72,8 +65,7 @@ const Typeahead = (props: Props) => {
   if (typeof(props.getOptionLabel) === 'string') selectProps.getOptionLabel = get(window, props.getOptionLabel)
   if (typeof(props.getOptionValue) === 'string') selectProps.getOptionValue = get(window, props.getOptionValue)
 
-  let Tag = props.async ? AsyncSelect : Select
-  if (props.createable) Tag = CreateableSelect
+  const Tag = props.async ? AsyncSelect : Select
 
   const handleOnChange = (data, { action, option, removedValue }) => {
     if (action === 'select-option') {

data/app/pb_kits/playbook/pb_typeahead/_typeahead.scss

@@ -154,17 +154,4 @@
       box-sizing: border-box;
     }
   }
-  .placeholder+.input-wrapper .typeahead-plus-icon {
-    display: none;
-  }
-  .typeahead-kit-select__control--is-focused .typeahead-plus-icon {
-    display: none;
-  }
-  .typeahead-plus-icon {
-    color: $text_lt_lighter;
-  }
-  [class^=pb_badge_kit] span {
-    line-height: 16.5px;
-    letter-spacing: normal;
-  }
 }

data/app/pb_kits/playbook/pb_typeahead/components/MultiValue.jsx

@@ -3,7 +3,7 @@
 import React from 'react'
 import { components } from 'react-select'
 
-import { Badge, FormPill } from '../../'
+import { FormPill } from '../../'
 
 type Props = {
   data: object,
@@ -15,7 +15,6 @@ type Props = {
 const MultiValue = (props: Props) => {
   const { removeProps } = props
   const { imageUrl, label } = props.data
-  const { badges } = props.selectProps
 
   const formPillProps = {
     marginRight: 'xs',
@@ -29,28 +28,19 @@ const MultiValue = (props: Props) => {
         className="text_input_multivalue_container"
         {...props}
     >
-      <If condition={badges}>
-        <Badge
+      <If condition={imageUrl}>
+        <FormPill
+            avatarUrl={imageUrl}
             closeProps={removeProps}
-            removeIcon
-            text={label}
-            variant="primary"
+            marginRight="xs"
+            name={label}
         />
         <Else />
-        <If condition={imageUrl}>
-          <FormPill
-              avatarUrl={imageUrl}
-              closeProps={removeProps}
-              marginRight="xs"
-              name={label}
-          />
-          <Else />
-          <FormPill
-              closeProps={removeProps}
-              marginRight="xs"
-              text={label}
-          />
-        </If>
+        <FormPill
+            closeProps={removeProps}
+            marginRight="xs"
+            text={label}
+        />
       </If>
     </components.MultiValueContainer>
   )

data/app/pb_kits/playbook/pb_typeahead/components/Placeholder.jsx

@@ -1,26 +1,13 @@
 /* @flow */
 
 import React from 'react'
-import { Flex, Icon } from '../../'
 import { components } from 'react-select'
 
 const Placeholder = (props: any) => (
-  <>
-    <Flex
-        align="center"
-        className="placeholder"
-    >
-      <components.IndicatorsContainer
-          {...props}
-      />
-      <If condition={props.selectProps.plusIcon}>
-        <Icon
-            className="typeahead-plus-icon"
-            icon="plus"
-        />
-      </If>
-    </Flex>
-  </>
+  <components.IndicatorsContainer
+      className="placeholder"
+      {...props}
+  />
 )
 
 export default Placeholder

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_default.jsx

@@ -13,7 +13,6 @@ const options = [
 const TypeaheadDefault = (props) => {
   return (
     <Typeahead
-        // badges
         label="Colors"
         options={options}
         {...props}

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.jsx

@@ -3,7 +3,7 @@
 import React from 'react'
 import { Typeahead } from '../..'
 
-const initOptions = [
+const options = [
   { label: 'Windows', value: '#FFA500' },
   { label: 'Siding', value: '#FF0000' },
   { label: 'Doors', value: '#00FF00' },
@@ -11,18 +11,13 @@ const initOptions = [
 ]
 
 const TypeaheadWithPills = (props) => {
-  // const [values, setValues] = useState([])
   return (
     <>
       <Typeahead
-          badges
-          createable
           isMulti
           label="Colors"
-          // onChange={(value) => console.log(value)}
-          options={initOptions}
-          placeholder="Placeholder"
-          plusIcon
+          options={options}
+          placeholder=""
           {...props}
       />
     </>