playbook_ui 9.2.2.pre.alpha.margin → 9.3.0.pre.alpha.password.strength.2

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,8 +37,6 @@ type SelectProps = {
   id?: string,
   includeBlank?: string,
   label?: string,
-  margin: string,
-  marginBottom: string,
   multiple?: boolean,
   name?: string,
   required?: boolean,
@@ -76,14 +74,7 @@ const Select = ({
   const dataProps = buildDataProps(data)
   const optionsList = createOptions(options)
 
-  const classes = classnames(
-    buildCss('pb_select'),
-    globalProps({
-      ...props,
-      marginBottom: props.marginBottom || props.margin || 'sm',
-    }),
-    className)
-
+  const classes = classnames(buildCss('pb_select'), globalProps(props), className)
   const selectWrapperClass = classnames(buildCss('pb_select_kit_wrapper'), { error }, className)
 
   return (

data/app/pb_kits/playbook/pb_select/_select.scss

@@ -4,6 +4,7 @@
 @import "../tokens/colors";
 
 [class^=pb_select] {
+  margin-bottom: $space_sm;
   select {
     @include pb_textarea_light;
     @include pb_body_light;
@@ -64,36 +65,38 @@
     transform: translateY(-50%);
     pointer-events: none;
   }
-}
-
-[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);
+  &.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;
       }
     }
-  }
-  .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;
+          }
         }
       }
     }
   }
-}
+}

data/app/pb_kits/playbook/pb_select/select.rb

@@ -17,17 +17,13 @@ module Playbook
       prop :required, type: Playbook::Props::Boolean, default: false
 
       def classname
-        generate_classname("pb_select", select_margin_bottom, separator: " ")
+        generate_classname("pb_select")
       end
 
       def select_wrapper_class
         "pb_select_kit_wrapper" + error_class
       end
 
-      def select_margin_bottom
-        margin.present? || margin_bottom.present? ? nil : "mb_sm"
-      end
-
       def options_to_array
         options.map { |option| [option[:value_text] || option[:value], option[:value]] }
       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.2.2.pre.alpha.margin"
+  VERSION = "9.3.0.pre.alpha.password.strength.2"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 9.2.2.pre.alpha.margin
+  version: 9.3.0.pre.alpha.password.strength.2
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2021-04-08 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