playbook_ui 11.13.0 → 11.15.0.pre.alpha.table1

data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_strength_change.html.erb

@@ -0,0 +1,123 @@
+<%= pb_rails("passphrase", props: { label: "Passphrase", classname: "passphrase_change" }) %>
+
+<%= pb_rails("progress_simple", props: { percent: 0, id: "bar_change" }) %>
+
+<%= pb_rails("caption", props: { size: 'xs', text: "hello", id: "caption_change" }) %>
+
+<%= pb_rails("text_input", props: { label: "Passphrase Strength", value: "0", disabled: true, id: "calc_strength_change" }) %>
+
+
+<%= javascript_tag do %>
+    window.addEventListener("DOMContentLoaded", () => {
+
+    // variables for the kits you are targeting 
+    const passphrase = document.querySelector(".passphrase_change").querySelector("input")
+    const calcStrength = document.querySelector("#calc_strength_change")
+    const barVariant = document.getElementById("bar_change")
+    const barPercent = document.getElementById("bar_change").querySelector("div")
+    const caption = document.getElementById("caption_change")
+
+    // hide the bar and captions
+    barVariant.style.display = 'none';
+    barPercent.style.display = 'none';
+    caption.style.display = 'none';
+
+
+    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}
+      }
+    }
+
+    // event listeners attached to the input field
+    passphrase.addEventListener('input', (e) => {
+      const passphrase = e.target.value;
+
+      // pass in passphrase to the handleStrengthCalculation and set that equal to result variable
+      const result = handleStrengthCalculation({passphrase: passphrase})
+
+      // set the value of the text_input to the score
+      calcStrength.value = result.score
+
+      // conditional statment to show or hide progress_simple bar and caption if user has entered a password
+      if (passphrase) {
+        barVariant.style.display = 'block';
+
+        barPercent.style.display = 'block';
+
+        caption.style.display = 'block';
+      } else {
+        barVariant.style.display = 'none';
+
+        barPercent.style.display = 'none';
+
+        caption.style.display = 'none';
+      }
+
+      // set the width of the progress_simple kit
+      barPercent.style.width = result.percent.toString()+ "%"
+
+
+      // set the variant of the progress_simple kit
+      barVariant.setAttribute("class", "pb_progress_simple_kit_"+ result.variant +"_left");
+
+
+      // set the text of the caption kit
+      caption.textContent = result.label
+    });
+
+  })
+<% end %>

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_table/styles/_all.scss

@@ -9,7 +9,6 @@
 @import "side_highlight";
 @import "alignment";
 @import "hover";
-@import "as-cards";
 @import "single-line";
 @import "table-dark";
 @import "mobile";

data/app/pb_kits/playbook/pb_table/styles/_desktop_collapse.scss

@@ -81,6 +81,10 @@
               border-left-width: 1px !important;
               border-right-width: 1px !important;
               border-top-width: 1px !important;
+              &:after {
+                height: 0;
+                background-color: transparent;
+              }
 
               &:first-child {
                 border-radius: $border_rad_light $border_rad_light 0 0 !important;

data/app/pb_kits/playbook/pb_table/styles/_hover.scss

@@ -12,39 +12,42 @@ $transition-speed: 0.2s;
         tr {
           box-shadow: 0 0 0 $white;
           transition: box-shadow $transition-speed ease;
-
           td {
             border-top-color: transparent;
-            border-top-width: 1px !important;
-            transition: all $transition-speed ease;
+            border-top-width: 0;
+            transition: all $transition-speed ease; 
           }
-
-          @media (hover:hover) {
+          @media (hover:hover) { 
+            td {
+              position: relative;
+              &:after {
+                transition: background-color $transition-speed ease, height $transition-speed ease;
+                content: "";
+                position: absolute;
+                display: block;
+                top: -1px;
+                left: 0;
+                right: 0;
+                height: 0;
+                background-color: transparent;
+              }
+              &:first-child:after {
+                left: -1px;
+              }
+              &:last-child:after {
+                right: -1px;
+              }
+            }
             &:hover {
               box-shadow: 0 2px 10px 0 rgba($slate, $opacity-6);
-
               td {
-                background: $white;
                 border-color: darken($border_light, 10%);
-                border-top-width: 1px;
+                border-top-width: 0;
                 border-top-color: transparent;
-              }
-            }
-          }
-        }
-      }
-      &.as-cards {
-        tbody {
-          tr {
-            td {
-              border-top-color: $border_light;
-              border-top-width: 1px;
-            }
-            @media (hover:hover) {
-              &:hover {
-                td {
-                  border-top-width: 1px;
-                  border-top-color: $border_light;
+                &:after {
+                  transition: background-color $transition-speed ease, height $transition-speed ease;
+                  background-color: darken($border_light, 10%);
+                  height: 1px;
                 }
               }
             }

data/app/pb_kits/playbook/pb_table/styles/_mobile.scss

@@ -81,6 +81,10 @@
               border-left-width: 1px !important;
               border-right-width: 1px !important;
               border-top-width: 1px !important;
+              &:after {
+                height: 0;
+                background-color: transparent;
+              }
 
               &:first-child {
                 border-radius: $border_rad_light $border_rad_light 0 0 !important;

data/app/pb_kits/playbook/pb_table/styles/_mobile_collapse.scss

@@ -81,6 +81,10 @@
               border-left-width: 1px !important;
               border-right-width: 1px !important;
               border-top-width: 1px !important;
+              &:after {
+                height: 0;
+                background-color: transparent;
+              }
 
               &:first-child {
                 border-radius: $border_rad_light $border_rad_light 0 0 !important;

data/app/pb_kits/playbook/pb_table/styles/_single-line.scss

@@ -9,7 +9,6 @@
         td {
           white-space: nowrap;
           text-overflow: ellipsis;
-          overflow: hidden;
 
           & > * {
             &:not(.btn, br) {

data/app/pb_kits/playbook/pb_table/styles/_table-card.scss

@@ -57,33 +57,6 @@
           }
         }
       }
-
-      &.as-cards {
-        border: 1px solid $border_light;
-        border-radius: 4px;
-
-        thead {
-          tr {
-            margin: $space-xs 0 0;
-            padding: 0 $space-xs;
-            border-bottom: 1px solid $border_light;
-
-            th {
-              border-width: 0;
-            }
-          }
-        }
-        tbody {
-          tr {
-            margin: $space-xs;
-            width: calc(100% - #{$space-xs}*2);
-
-            td {
-              border-top-width: 1px;
-            }
-          }
-        }
-      }
     }
   }
 }

data/app/pb_kits/playbook/pb_table/styles/_tablet_collapse.scss

@@ -81,6 +81,10 @@
               border-left-width: 1px !important;
               border-right-width: 1px !important;
               border-top-width: 1px !important;
+              &:after {
+                height: 0;
+                background-color: transparent;
+              }
 
               &:first-child {
                 border-radius: $border_rad_light $border_rad_light 0 0 !important;

data/lib/playbook/version.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
 module Playbook
-  PREVIOUS_VERSION = "11.12.1"
-  VERSION = "11.13.0"
+  PREVIOUS_VERSION = "11.15.0"
+  VERSION = "11.15.0.pre.alpha.table1"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 11.13.0
+  version: 11.15.0.pre.alpha.table1
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2022-12-06 00:00:00.000000000 Z
+date: 2022-12-21 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -1465,16 +1465,20 @@ files:
 - app/pb_kits/playbook/pb_passphrase/docs/_passphrase_breached.html.erb
 - app/pb_kits/playbook/pb_passphrase/docs/_passphrase_breached.jsx
 - app/pb_kits/playbook/pb_passphrase/docs/_passphrase_breached.md
+- app/pb_kits/playbook/pb_passphrase/docs/_passphrase_common.html.erb
 - app/pb_kits/playbook/pb_passphrase/docs/_passphrase_common.jsx
+- app/pb_kits/playbook/pb_passphrase/docs/_passphrase_common.md
+- app/pb_kits/playbook/pb_passphrase/docs/_passphrase_confirmation.html.erb
+- app/pb_kits/playbook/pb_passphrase/docs/_passphrase_confirmation.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.html.erb
 - 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
@@ -1485,9 +1489,6 @@ files:
 - 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_passphrase/useHaveIBeenPwned.js
-- app/pb_kits/playbook/pb_passphrase/useZxcvbn.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
@@ -1872,7 +1873,6 @@ files:
 - app/pb_kits/playbook/pb_table/index.js
 - app/pb_kits/playbook/pb_table/styles/_alignment.scss
 - app/pb_kits/playbook/pb_table/styles/_all.scss
-- app/pb_kits/playbook/pb_table/styles/_as-cards.scss
 - app/pb_kits/playbook/pb_table/styles/_content.scss
 - app/pb_kits/playbook/pb_table/styles/_desktop_collapse.scss
 - app/pb_kits/playbook/pb_table/styles/_headers.scss
@@ -2358,9 +2358,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: []
 rubygems_version: 3.3.7
 signing_key:

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

@@ -1 +0,0 @@
-Use the `confirmation` prop to only include the label and show/hide icon.