playbook_ui 11.12.1.pre.alpha.charts1 → 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_treemap_chart/_treemap_chart.jsx

@@ -0,0 +1,79 @@
+/* @flow */
+
+import React from 'react'
+import classnames from 'classnames'
+
+import { globalProps } from '../utilities/globalProps'
+import pbChart from '../plugins/pb_chart'
+
+type TreemapChartProps = {
+  chartData: array<{
+    name: string,
+    parent?: string | number,
+    value: number,
+    color?: string,
+    id?: string | number,
+  }>,
+  className?: string,
+  colors: array,
+  dark?: boolean,
+  drillable: boolean,
+  grouped: boolean,
+  height?: string,
+  id: number,
+  title: string,
+  tooltipHtml: string,
+  type?: string,
+}
+
+export default class TreemapChart extends React.Component<TreemapChartProps> {
+  static defaultProps = {
+    className: 'pb_treemap_chart',
+    dark: false,
+    drillable: false,
+    grouped: false,
+    type: 'treemap',
+  }
+
+  componentDidMount() {
+    const {
+      chartData,
+      className,
+      colors  = [],
+      dark,
+      drillable,
+      grouped,
+      height,
+      id,
+      title = "",
+      tooltipHtml = '<span style="font-weight: bold; color:{point.color};">&#9679; </span>{point.name}: <b>{point.value}</b>',
+      type,
+    } = this.props
+
+    new pbChart(`.${className}`, {
+      chartData: chartData,
+      colors: colors,
+      dark,
+      drillable,
+      grouped,
+      height: height,
+      id: id,
+      title: title,
+      tooltipHtml,
+      type,
+    })
+  }
+
+  props: TreemapChartProps
+
+  render() {
+    const { className, id } = this.props
+
+    return (
+      <div
+          className={classnames(globalProps(this.props), className)}
+          id={id}
+      />
+    )
+  }
+}

data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_tooltip.jsx

@@ -39,7 +39,7 @@ const TreemapChartTooltip = (props) => (
         chartData={chartData}
         id="treemap-tooltip"
         title="Favored Pizza Toppings"
-        tooltipHtml= '<p>Custom tooltip for {point.name} <br/>with value: {point.value}</p>'
+        tooltipHtml={"<p>Custom tooltip for {point.name} <br/>with value: {point.value}</p>"}
         {...props}
     />
   </div>

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

@@ -4,13 +4,11 @@ import WebpackerReact from 'webpacker-react'
 import ujs from 'webpacker-react/ujs'
 
 import BarGraph from './pb_bar_graph/_bar_graph'
-import CircleChart from './pb_circle_chart/_circle_chart'
 import Dialog from './pb_dialog/_dialog'
 import DialogBody from './pb_dialog/child_kits/_dialog_body'
 import DialogFooter from './pb_dialog/child_kits/_dialog_footer'
 import DialogHeader from './pb_dialog/child_kits/_dialog_header'
 import DistributionBar from './pb_distribution_bar/_distribution_bar'
-import Gauge from './pb_gauge/_gauge'
 import Legend from './pb_legend/_legend'
 import LineGraph from './pb_line_graph/_line_graph'
 import Passphrase from './pb_passphrase/_passphrase'
@@ -20,7 +18,6 @@ import Typeahead from './pb_typeahead/_typeahead'
 
 WebpackerReact.registerComponents({
   BarGraph,
-  CircleChart,
   Dialog,
   DialogBody,
   DialogFooter,
@@ -32,7 +29,6 @@ WebpackerReact.registerComponents({
   RichTextEditor,
   TreemapChart,
   Typeahead,
-  Gauge,
 })
 
 ujs.setup(

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

@@ -1,3 +1,7 @@
+// Charts
+import pbChart from './plugins/pb_chart'
+window.pbChart = pbChart
+
 // Forms
 import './pb_form/pb_form_validation'