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

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

@@ -46,7 +46,7 @@ const ProgressPill = ({ active, dark, step }: ProgressPillProps) => (
 const ProgressPills = (props: ProgressPillsProps) => {
   const {
     active = 0,
-    aria = {},
+    aria = { hidden: true },
     className,
     data = {},
     id,

data/app/pb_kits/playbook/pb_progress_pills/docs/_description.md

@@ -1 +1,3 @@
-Progress pills indicate a specific point in time of a series of sequential steps. They are used to track progress of something over time.
+Progress pills indicate a specific point in time of a series of sequential steps. They are used to track progress of something over time.
+
+Note: be sure to make use of the aria attribute as shown in the example if you want this kit to be web accessible.

data/app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_default.html.erb

@@ -1 +1 @@
-<%= pb_rails("progress_pills", props: { steps: 3, active: 2 }) %>
+<%= pb_rails("progress_pills", props: { aria: { label: "2 out of 3 steps complete" }, steps: 3, active: 2 }) %>

data/app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_default.jsx

@@ -7,6 +7,7 @@ const ProgressPillsDefault = (props) => {
     <div>
       <ProgressPills
           active={2}
+          aria={{ label: '2 out of 3 steps complete' }}
           steps={3}
           {...props}
       />

data/app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_status.html.erb

@@ -1 +1 @@
-<%= pb_rails("progress_pills", props: { steps: 3, active: 2, title:"Status:", value:"Orientation" }) %>
+<%= pb_rails("progress_pills", props: { aria: { label: "2 out of 3 steps complete" }, steps: 3, active: 2, title:"Status:", value:"Orientation" }) %>

data/app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_status.jsx

@@ -7,6 +7,7 @@ const ProgressPillsStatus = (props) => {
     <div>
       <ProgressPills
           active={2}
+          aria={{ label: '2 out of 3 steps complete' }}
           steps={3}
           title="Status:"
           value="Orientation"

data/app/pb_kits/playbook/pb_progress_pills/progress_pills.html.erb

@@ -1,5 +1,5 @@
 <%= content_tag(:div,
-    aria: object.aria,
+    aria: object.aria_attributes,
     id: object.id,
     data: object.data,
     class: object.classname) do %>

data/app/pb_kits/playbook/pb_progress_pills/progress_pills.rb

@@ -26,6 +26,11 @@ module Playbook
          step <= active ? "_active" : "_inactive"
       end
 
+      def aria_attributes
+        return aria if aria.present?
+        { hidden: true }
+      end
+
       def dark_pill
         dark ? " dark" : nil
       end

data/app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.scss

@@ -81,6 +81,7 @@
       position: sticky;
       top: 0;
       z-index: 1;
+      background-color: $white;
     }
   }
   trix-editor {
@@ -211,6 +212,11 @@
         border-color: $error_dark;
       }
     }
+    &.sticky {
+      trix-toolbar {
+        background-color: tint($bg_dark, 10%) !important;
+      }
+    }
     .trix-dialog.trix-dialog--link.trix-active {
       background-color: tint($bg_dark, 10%) !important;
       border: 1px solid rgba($white, 0.1);

data/app/pb_kits/playbook/pb_stat_value/_stat_value.jsx

@@ -25,6 +25,7 @@ const StatValue = (props: StatValueProps) => {
       return (
         <Title
             size={1}
+            tag="span"
             text={`${value}`}
         />
       )
@@ -36,6 +37,7 @@ const StatValue = (props: StatValueProps) => {
       return (
         <Title
             size={3}
+            tag="span"
             text={unit}
         />
       )

data/app/pb_kits/playbook/pb_stat_value/stat_value.html.erb

@@ -6,10 +6,12 @@
     <%= pb_rails "title", props: {
       classname: "pb_stat_value_kit",
       size: 1,
+      tag: "span",
       text: object.formatted_value } %>
       &nbsp;
       <%= pb_rails "title", props: {
       classname: "pb_stat_value_kit",
+      tag: "span",
       size: 3,
       text: object.unit } %>
   </div>

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.1.0"
+  VERSION = "9.3.0.pre.alpha.password.strength.1"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 9.1.0
+  version: 9.3.0.pre.alpha.password.strength.1
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2021-04-05 00:00:00.000000000 Z
+date: 2021-04-09 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -75,114 +75,114 @@ dependencies:
   name: react-rails
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - '='
+    - - "~>"
       - !ruby/object:Gem::Version
-        version: 2.6.0
+        version: '2.6'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - '='
+    - - "~>"
       - !ruby/object:Gem::Version
-        version: 2.6.0
+        version: '2.6'
 - !ruby/object:Gem::Dependency
   name: redcarpet
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - '='
+    - - "~>"
       - !ruby/object:Gem::Version
-        version: 3.5.1
+        version: '3.5'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - '='
+    - - "~>"
       - !ruby/object:Gem::Version
-        version: 3.5.1
+        version: '3.5'
 - !ruby/object:Gem::Dependency
   name: rouge
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - '='
+    - - "~>"
       - !ruby/object:Gem::Version
-        version: 3.15.0
+        version: '3.15'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - '='
+    - - "~>"
       - !ruby/object:Gem::Version
-        version: 3.15.0
+        version: '3.15'
 - !ruby/object:Gem::Dependency
   name: sassc-rails
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - '='
+    - - "~>"
       - !ruby/object:Gem::Version
-        version: 1.3.0
+        version: '1.3'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - '='
+    - - "~>"
       - !ruby/object:Gem::Version
-        version: 1.3.0
+        version: '1.3'
 - !ruby/object:Gem::Dependency
   name: slim-rails
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - '='
+    - - "~>"
       - !ruby/object:Gem::Version
-        version: 3.2.0
+        version: '3.2'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - '='
+    - - "~>"
       - !ruby/object:Gem::Version
-        version: 3.2.0
+        version: '3.2'
 - !ruby/object:Gem::Dependency
   name: sprockets-rails
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - '='
+    - - "~>"
       - !ruby/object:Gem::Version
-        version: 2.3.3
+        version: '2.3'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - '='
+    - - "~>"
       - !ruby/object:Gem::Version
-        version: 2.3.3
+        version: '2.3'
 - !ruby/object:Gem::Dependency
   name: view_component
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - '='
+    - - "~>"
       - !ruby/object:Gem::Version
-        version: 2.23.2
+        version: '2.23'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - '='
+    - - "~>"
       - !ruby/object:Gem::Version
-        version: 2.23.2
+        version: '2.23'
 - !ruby/object:Gem::Dependency
   name: webpacker
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - '='
+    - - "~>"
       - !ruby/object:Gem::Version
-        version: 4.2.2
+        version: '4.3'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - '='
+    - - "~>"
       - !ruby/object:Gem::Version
-        version: 4.2.2
+        version: '4.3'
 - !ruby/object:Gem::Dependency
   name: webpacker-react
   requirement: !ruby/object:Gem::Requirement
@@ -1378,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
@@ -2103,9 +2126,9 @@ required_ruby_version: !ruby/object:Gem::Requirement
       version: '0'
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
-  - - ">="
+  - - ">"
     - !ruby/object:Gem::Version
-      version: '0'
+      version: 1.3.1
 requirements: []
 rubyforge_project:
 rubygems_version: 2.7.3