playbook_ui 11.11.0 → 11.12.1.pre.alpha.passphrase1

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

@@ -1,34 +1,110 @@
 import React, { useState } from 'react'
+import { useEffect } from 'react'
 
-import Passphrase from '../_passphrase'
-
-import TextInput from '../../pb_text_input/_text_input'
+import { Caption, Passphrase, ProgressSimple, TextInput} from '../..'
+import zxcvbn from 'zxcvbn'
 
 const PassphraseStrengthChange = (props) => {
   const [input, setInput] = useState('')
+  const [checkStrength, setCheckStrength] = useState({
+    label: '',
+    percent: 0,
+    score: 0,
+    variant: ''
+  })
 
   const handleChange = (e) => setInput(e.target.value)
 
-  const [strength, setStrength] = useState(0)
-  const handleStrengthChange = (str) => setStrength(str)
+  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 result = handleStrengthCalculation({ passphrase: input })
+     setCheckStrength({...result})
+    },[input])
 
   return (
     <>
-      <div>
-        <Passphrase
-            label="Passphrase"
-            onChange={handleChange}
-            onStrengthChange={handleStrengthChange}
-            value={input}
-            {...props}
-        />
-        <TextInput
-            disabled
-            label="Passphrase Strength"
-            readOnly
-            value={strength}
-        />
-      </div>
+      <Passphrase
+          label="Passphrase"
+          onChange={handleChange}
+          value={input}
+          {...props}
+      /> 
+      {input.length > 0 && (
+        <>
+          <ProgressSimple
+              percent={checkStrength.percent}
+              variant={checkStrength.variant}
+          />
+          <Caption size='xs'
+              text={checkStrength.label} 
+          />
+        </>
+      )}
+      <TextInput
+          disabled
+          label="Passphrase Strength"
+          marginTop="xl"
+          readOnly
+          value={checkStrength.score}
+      />
     </>
   )
 }

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

@@ -1,3 +1,7 @@
-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>. 
 
-Strength is calculated on a 0-4 scale by the <a href="https://github.com/dropbox/zxcvbn" target="_blank"> Zxcvbn package</a>
+<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. 
+
+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.

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

@@ -2,13 +2,17 @@ examples:
 
   rails:
   - passphrase_default: Default
+  - passphrase_confirmation: Confirmation
   - passphrase_meter_settings: Meter Settings
   - passphrase_input_props: Input Props
   - passphrase_tips: Tips
+  - passphrase_strength_change: Strength Change
+  - passphrase_common: Common Passphrases
   - passphrase_breached: Breached Passphrases
 
   react:
   - passphrase_default: Default
+  - passphrase_confirmation: Confirmation
   - passphrase_meter_settings: Meter Settings
   - passphrase_input_props: Input Props
   - passphrase_tips: Tips

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

@@ -1,4 +1,5 @@
 export { default as PassphraseDefault } from './_passphrase_default.jsx'
+export { default as PassphraseConfirmation } from './_passphrase_confirmation.jsx'
 export { default as PassphraseMeterSettings } from './_passphrase_meter_settings'
 export { default as PassphraseInputProps } from './_passphrase_input_props'
 export { default as PassphraseTips } from './_passphrase_tips'

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

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

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

@@ -3,15 +3,14 @@
 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
-      prop :min_length
-      prop :show_tips_below
-      prop :strong_threshold
+      prop :show_tips_below, type: Playbook::Props::Enum,
+                             values: %w[always xs sm md lg xl],
+                             default: "always"
       prop :tips, type: Playbook::Props::Array, default: []
+      prop :value, type: Playbook::Props::String
 
       def classname
         generate_classname("pb_passphrase")
@@ -19,18 +18,15 @@ module Playbook
 
       def passphrase_options
         {
-          checkPwned: check_pwned,
           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,
+          value: value,
         }.compact
       end
     end

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

@@ -64,41 +64,6 @@ test('passes input props to input element', () => {
   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
@@ -121,15 +86,3 @@ 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_radio/_radio.scss

@@ -40,7 +40,7 @@
     }
   }
 
-  &.vertical {
+  &[class*=vertical] {
     flex-direction: column;
     align-items: center;
     .pb_radio_button {

data/app/pb_kits/playbook/pb_title/_title.scss

@@ -6,6 +6,7 @@
   &[class*=_1] {
     @include pb_title_1;
     @include title_colors;
+    @include pb_title_bold;
   }
 
   &[class*=_2] {
@@ -26,4 +27,8 @@
   &.dark {
     @include pb_title_dark;
   }
+
+  &[class*=_thin] {
+    @include pb_title_thin;
+  }
 }

data/app/pb_kits/playbook/pb_title/_title.tsx

@@ -5,6 +5,7 @@ import { deprecatedProps, GlobalProps, globalProps } from '../utilities/globalPr
 
 type TitleProps = {
   aria?: {[key: string]: string},
+  bold?: boolean,
   children?: React.ReactChild[] | React.ReactChild,
   className?: string,
   color?: "default" | "light" | "lighter" | "success" | "error" | "link",
@@ -20,6 +21,7 @@ const Title = (props: TitleProps): React.ReactElement => {
   if (props.variant) deprecatedProps('Title', ['variant']) //variant prop is deprecated, use color instead
   const {
     aria = {},
+    bold = true,
     children,
     className,
     color,
@@ -33,8 +35,9 @@ const Title = (props: TitleProps): React.ReactElement => {
 
   const ariaProps: {[key: string]: string | number} = buildAriaProps(aria)
   const dataProps: {[key: string]: string | number} = buildDataProps(data)
+  const getBold = bold ? '' : 'thin'
   const classes = classnames(
-    buildCss('pb_title_kit', `size_${size}`, variant, color),
+    buildCss('pb_title_kit', `size_${size}`, variant, color, getBold),
     globalProps(props),
     className,
   )

data/app/pb_kits/playbook/pb_title/docs/{_title_light.html.erb → _title_default.html.erb}

@@ -5,7 +5,7 @@
 
 <br/>
 
-<%= pb_rails("title", props: { text: "Title 4", tag: "h4", size: 4 }) %> 
-<%= pb_rails("title", props: { text: "Title 3", tag: "h3", size: 3 }) %>
-<%= pb_rails("title", props: { text: "Title 2", tag: "h2", size: 2 }) %>
 <%= pb_rails("title", props: { text: "Title 1", tag: "h1", size: 1 }) %>
+<%= pb_rails("title", props: { text: "Title 2", tag: "h2", size: 2 }) %>
+<%= pb_rails("title", props: { text: "Title 3", tag: "h3", size: 3 }) %>
+<%= pb_rails("title", props: { text: "Title 4", tag: "h4", size: 4 }) %>

data/app/pb_kits/playbook/pb_title/docs/{_title_light.jsx → _title_default.jsx}

@@ -2,7 +2,7 @@ import React from 'react'
 
 import Title from '../_title'
 
-const TitleLight = (props) => {
+const TitleDefault = (props) => {
   return (
     <div>
       <Title
@@ -11,15 +11,9 @@ const TitleLight = (props) => {
       />
       <br />
       <Title
-          size={4}
-          tag="h4"
-          text="Title 4"
-          {...props}
-      />
-      <Title
-          size={3}
-          tag="h3"
-          text="Title 3"
+          size={1}
+          tag="h1"
+          text="Title 1"
           {...props}
       />
       <Title
@@ -29,13 +23,19 @@ const TitleLight = (props) => {
           {...props}
       />
       <Title
-          size={1}
-          tag="h1"
-          text="Title 1"
+          size={3}
+          tag="h3"
+          text="Title 3"
+          {...props}
+      />
+      <Title
+          size={4}
+          tag="h4"
+          text="Title 4"
           {...props}
       />
     </div>
   )
 }
 
-export default TitleLight
+export default TitleDefault

data/app/pb_kits/playbook/pb_title/docs/_title_light_weight.html.erb

@@ -0,0 +1 @@
+<%= pb_rails("title", props: { text: "Title 1", tag: "h1", size: 1, bold: false }) %>

data/app/pb_kits/playbook/pb_title/docs/_title_light_weight.jsx

@@ -0,0 +1,19 @@
+import React from 'react'
+
+import Title from '../_title'
+
+const TitleLightWeight = (props) => {
+  return (
+    <div>
+      <Title
+          bold={false}
+          size={1}
+          tag="h1"
+          text="Title 1"
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default TitleLightWeight

data/app/pb_kits/playbook/pb_title/docs/_title_light_weight.md

@@ -0,0 +1,4 @@
+##### Prop
+Title `size 1` will use `font-weight: 700` by default, if you want a lighter font weight, use the `bold` prop set to `false`.
+Title `size 2` & `size 3` uses a light font weight by default and will not accept a bold font weight.
+Title `size 4` uses a heavy font weight by default and will not accept a lighter font weight.

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

@@ -1,8 +1,10 @@
 examples:
   rails:
-  - title_light: Light UI
+  - title_default: Default UI
+  - title_light_weight: Light Weight UI
   - title_colors: Colors
 
   react:
-  - title_light: Light UI
+  - title_default: Default UI
+  - title_light_weight: Light Weight UI
   - title_colors: Colors

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

@@ -1,2 +1,3 @@
-export { default as TitleLight } from './_title_light.jsx'
+export { default as TitleDefault } from './_title_default.jsx'
+export { default as TitleLightWeight } from './_title_light_weight.jsx'
 export { default as TitleColors } from './_title_colors.jsx'

data/app/pb_kits/playbook/pb_title/title.rb

@@ -17,9 +17,14 @@ module Playbook
                      values: [nil, "link"],
                      default: nil,
                      deprecated: true
+      prop :bold, type: Playbook::Props::Boolean, default: true
 
       def classname
-        generate_classname("pb_title_kit", size, variant, color)
+        generate_classname("pb_title_kit", size, variant, color, is_bold)
+      end
+
+      def is_bold
+        bold ? nil : "thin"
       end
     end
   end

data/app/pb_kits/playbook/pb_title/title.test.js

@@ -15,6 +15,19 @@ test('returns namespaced class name', () => {
   expect(kit).toHaveClass('pb_title_kit_size_3')
 })
 
+test('with thin font weight', () => {
+  render(
+    <Title
+        bold={false}
+        data={{ testid: 'primary-test' }}
+        text="Test thin font weight"
+    />
+  )
+
+  const kit = screen.getByTestId('primary-test')
+  expect(kit).toHaveClass('pb_title_kit_size_3_thin')
+})
+
 test('with colors', () => {
   render(
     <Title

data/app/pb_kits/playbook/playbook-rails.js

@@ -9,6 +9,10 @@ import './pb_form/pb_form_validation'
 import datePickerHelper from './pb_date_picker/date_picker_helper'
 window.datePickerHelper = datePickerHelper
 
+// Dialog
+import dialogHelper from './pb_dialog/dialogHelper'
+window.dialogHelper = dialogHelper
+
 // Lazy image loading
 import 'lazysizes'
 

data/app/pb_kits/playbook/plugins/pb_chart.js

@@ -167,6 +167,14 @@ class pbChart {
         },
       },
 
+      legend: {
+        align: this.defaults.align,
+        verticalAlign: this.defaults.verticalAlign,
+        layout: this.defaults.layout,
+        x: this.defaults.x,
+        y: this.defaults.y,
+      },
+
       plotOptions: {
         pie: {
           colors: options.colors.length > 0 ? mapColors(options.colors) : highchartsTheme.colors,
@@ -255,6 +263,11 @@ class pbChart {
       },
       legend: {
         enabled: this.defaults.legend,
+        align: this.defaults.align,
+        verticalAlign: this.defaults.verticalAlign,
+        layout: this.defaults.layout,
+        x: this.defaults.x,
+        y: this.defaults.y,
       },
       colors: options.colors !== undefined && options.colors.length > 0 ? mapColors(options.colors) : highchartsTheme.colors,
       plotOptions: {

data/app/pb_kits/playbook/tokens/_titles.scss

@@ -18,7 +18,6 @@
 
 @mixin pb_title_1 {
   @include pb_title($heading_1);
-  letter-spacing: -0.03em;
 }
 
 @mixin pb_title_2 {
@@ -31,8 +30,18 @@
 
 @mixin pb_title_4 {
   @include pb_title($heading_4, $bolder);
+  letter-spacing: -0.03em;
 }
 
 @mixin pb_title_dark {
   color: $text_dk_default;
 }
+
+@mixin pb_title_bold {
+  font-weight: $bolder;
+}
+
+@mixin pb_title_thin {
+  font-weight: $lighter;
+  letter-spacing: $lspace_tight;
+}

data/app/pb_kits/playbook/tokens/_typography.scss

@@ -30,7 +30,7 @@ $text_smallest:     $font_smallest;
 
 
 /* Headings */
-$heading_1: 48px;
+$heading_1: 46px;
 $heading_2: 34px;
 $heading_3: $font_larger;
 $heading_4: $font_base;
@@ -41,7 +41,7 @@ $heading_4: $font_base;
 // Letter Spacing
 $lspace_tightest:         -.1em;
 $lspace_tighter:          -.07em;
-$lspace_tight:            -.03em;
+$lspace_tight:            -.01em;
 $lspace_normal:           0;
 $lspace_loose:            .03em;
 $lspace_looser:           .07em;

data/lib/playbook/version.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
 module Playbook
-  PREVIOUS_VERSION = "11.10.0"
-  VERSION = "11.11.0"
+  PREVIOUS_VERSION = "11.12.1"
+  VERSION = "11.12.1.pre.alpha.passphrase1"
 end