playbook_ui 9.5.0.alpha.rs.downgrade → 9.7.0.pre.alpha.a11y.btn

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/pb_select/_select.jsx

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

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