playbook_ui 9.4.0.pre.alpha2 → 9.6.1.pre.deps1

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_section_separator/_section_separator.jsx

@@ -38,13 +38,9 @@ const SectionSeparator = (props: SectionSeparatorProps) => {
         className={classes}
         id={id}
     >
-
-      <If condition={text}>
-        <span>
-          <Caption text={text} />
-        </span>
-      </If>
-
+      <span>
+        <Caption text={text} />
+      </span>
     </div>
   )
 }

data/app/pb_kits/playbook/pb_time_stacked/time_stacked.html.erb

@@ -3,10 +3,10 @@
     data: object.data,
     class: object.classname) do %>
 
-    <%= pb_rails("body", props: { color: "light", dark: object.dark, classname: "pb_time_stacked time-spacing" }) do %>
+    <%= pb_rails("body", props: { color: "light", classname: "pb_time_stacked time-spacing" }) do %>
       <time>
         <%= object.format_time_string %>
-        <%= pb_rails("caption", props: { color: "light", tag: "span", text: object.pb_date_time.to_timezone.upcase, dark: object.dark, classname: "pb_time_stacked" }) %>
+        <%= pb_rails("caption", props: { color: "light", tag: "span", text: object.pb_date_time.to_timezone.upcase, classname: "pb_time_stacked" }) %>
       </time>
     <% end %>
 <% end %>

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.4.0.pre.alpha2"
+  VERSION = "9.6.1.pre.deps1"
 end

metadata

@@ -1,15 +1,15 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 9.4.0.pre.alpha2
+  version: 9.6.1.pre.deps1
 platform: ruby
 authors:
 - Power UX
 - Power Devs
-autorequire:
+autorequire: 
 bindir: bin
 cert_chain: []
-date: 2021-04-12 00:00:00.000000000 Z
+date: 2021-04-16 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -285,22 +285,22 @@ dependencies:
   name: rspec-rails
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - "~>"
-      - !ruby/object:Gem::Version
-        version: '3.8'
     - - ">="
       - !ruby/object:Gem::Version
         version: 3.8.0
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '3.8'
   type: :development
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - "~>"
-      - !ruby/object:Gem::Version
-        version: '3.8'
     - - ">="
       - !ruby/object:Gem::Version
         version: 3.8.0
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '3.8'
 - !ruby/object:Gem::Dependency
   name: rspec-html-matchers
   requirement: !ruby/object:Gem::Requirement
@@ -809,8 +809,6 @@ files:
 - app/pb_kits/playbook/pb_date_stacked/date_stacked.rb
 - app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_align.html.erb
 - app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_align.jsx
-- app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_bold.html.erb
-- app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_bold.jsx
 - app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_default.html.erb
 - app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_default.jsx
 - app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_not_current_year.html.erb
@@ -840,7 +838,6 @@ files:
 - app/pb_kits/playbook/pb_date_time_stacked/_date_time_stacked.scss
 - app/pb_kits/playbook/pb_date_time_stacked/date_time_stacked.html.erb
 - app/pb_kits/playbook/pb_date_time_stacked/date_time_stacked.rb
-- app/pb_kits/playbook/pb_date_time_stacked/date_time_stacked.test.js
 - app/pb_kits/playbook/pb_date_time_stacked/docs/_date_time_stacked_default.html.erb
 - app/pb_kits/playbook/pb_date_time_stacked/docs/_date_time_stacked_default.jsx
 - app/pb_kits/playbook/pb_date_time_stacked/docs/example.yml
@@ -1381,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
@@ -2095,7 +2115,7 @@ homepage: http://playbook.powerapp.cloud
 licenses:
 - MIT
 metadata: {}
-post_install_message:
+post_install_message: 
 rdoc_options: []
 require_paths:
 - lib
@@ -2110,9 +2130,8 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: 1.3.1
 requirements: []
-rubyforge_project:
-rubygems_version: 2.7.3
-signing_key:
+rubygems_version: 3.0.3
+signing_key: 
 specification_version: 4
 summary: Playbook Design System
 test_files: []

data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_bold.html.erb

@@ -1,5 +0,0 @@
-<%= pb_rails("date_stacked", props: { date: DateTime.now, align: "left", bold: true }) %>
-<br>
-<%= pb_rails("date_stacked", props: { date: Date.new(2018, 03, 20), align: "center", bold: true }) %>
-<br>
-<%= pb_rails("date_stacked", props: { date: DateTime.now, align: "right", bold: true }) %>

data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_bold.jsx

@@ -1,38 +0,0 @@
-import React from 'react'
-import DateStacked from '../_date_stacked.jsx'
-
-const DateStackedBold = (props) => {
-  return (
-    <div>
-      <DateStacked
-          align="left"
-          bold
-          date={new Date()}
-          {...props}
-      />
-
-      <br />
-
-      <DateStacked
-          align="center"
-          bold
-          date={new Date('20 Mar 2018')}
-          {...props}
-      />
-
-      <br />
-
-      <DateStacked
-          align="right"
-          bold
-          date={new Date()}
-          {...props}
-      />
-
-      <br />
-
-    </div>
-  )
-}
-
-export default DateStackedBold