playbook_ui 9.6.1 → 9.9.0.alpha.inline1

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

@@ -0,0 +1,3 @@
+Use `checkPwned | checked_pwned` prop to enable checking against <a href='https://haveibeenpwned.com/Passwords'>HaveIBeenPwned's</a> API. As the passphrase is typed, it is checked against more than half a billion breached passwords, to help ensure its not compromised.
+Should it fail, the feedback will express the passphrase is too common, prompting the user to change.
+This uses their k-Anonymity model, so only the first 5 characters of a hashed copy of the passphrase are sent.

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

@@ -12,6 +12,7 @@ const PassphraseDefault = (props) => {
     <>
       <div>
         <Passphrase
+            id="my-passphrase"
             onChange={handleChange}
             value={input}
             {...props}

data/app/pb_kits/playbook/pb_passphrase/docs/example.yml

@@ -5,6 +5,7 @@ examples:
   - passphrase_meter_settings: Meter Settings
   - passphrase_input_props: Input Props
   - passphrase_tips: Tips
+  - passphrase_breached: Breached Passphrases
 
   react:
   - passphrase_default: Default
@@ -13,3 +14,4 @@ examples:
   - passphrase_tips: Tips
   - passphrase_strength_change: Strength Change
   - passphrase_common: Common Passphrases
+  - passphrase_breached: Breached Passphrases

data/app/pb_kits/playbook/pb_passphrase/docs/index.js

@@ -4,3 +4,4 @@ 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'
+export { default as PassphraseBreached } from './_passphrase_breached'

data/app/pb_kits/playbook/pb_passphrase/passphrase.rb

@@ -4,6 +4,7 @@ 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
@@ -18,6 +19,7 @@ module Playbook
 
       def passphrase_options
         {
+          checkPwned: check_pwned,
           dark: dark,
           id: id,
           averageThreshold: average_threshold,

data/app/pb_kits/playbook/pb_passphrase/passphrase.test.jsx

@@ -121,3 +121,15 @@ 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_passphrase/useHaveIBeenPwned.js

@@ -0,0 +1,52 @@
+
+import  { useEffect, useState } from 'react'
+
+const checkHaveIBeenPwned = async function (passphrase) {
+  const buffer = new TextEncoder('utf-8').encode(passphrase)
+  const digest = await crypto.subtle.digest('SHA-1', buffer)
+  const hashArray = Array.from(new Uint8Array(digest))
+  const hashHex = hashArray.map((b) => b.toString(16).padStart(2, '0')).join('')
+
+  const firstFive = hashHex.slice(0, 5)
+  const endOfHash = hashHex.slice(5)
+
+  const resp = await fetch(`https://api.pwnedpasswords.com/range/${firstFive}`)
+  const text = await resp.text()
+
+  const match = text.split('\n').some((line) => {
+    //Each line is <sha-1-hash-suffix>:<count of incidents>
+    return line.split(':')[0] === endOfHash.toUpperCase()
+  })
+  return match
+}
+
+/**
+ * If the input hasn't changed in <delay> ms,
+ * hit the haveibeenpwned api and check if the given passphrase is compromised
+ */
+export default function useHaveIBeenPwned(passphrase, minLength, delay = 400) {
+  const [isPwned, setIsPwned] = useState(false)
+
+  useEffect(
+    () => {
+      // only check the API for passphrases above the minimum size
+      if (passphrase.length < minLength) {
+        setIsPwned(false)
+        return
+      }
+
+      const handler = setTimeout(() => {
+        checkHaveIBeenPwned(passphrase)
+          .then((pwned) => setIsPwned(pwned))
+          .catch(() => setIsPwned(false))
+      }, delay)
+
+      return () => {
+        clearTimeout(handler)
+      }
+    },
+    [passphrase, minLength, delay]
+  )
+
+  return isPwned
+}

data/app/pb_kits/playbook/pb_passphrase/useZxcvbn.js

@@ -0,0 +1,58 @@
+import { useEffect, useMemo, useState } from 'react'
+import zxcvbn from 'zxcvbn'
+
+export default function useZxcvbn(options) {
+  const { passphrase = '', common, isPwned, confirmation, averageThreshold, minLength, strongThreshold } = options
+  const calculator = useMemo(
+    () => confirmation ?  () => ({ score: 0 }) : zxcvbn,
+    [confirmation]
+  )
+
+  const [percent, setPercent] = useState('0')
+  const [variant, setVariant] = useState('negative')
+  const [text, setText] = useState('\u00A0') //nbsp to keep height constant
+  const [result, setResult] = useState({})
+
+  useEffect(() => {
+    if (confirmation) return
+
+    setResult(calculator(passphrase))
+    const str = result.score
+
+    const noPassphrase = passphrase.length <= 0
+    const commonPassphrase = common || isPwned
+    const weakPassphrase = passphrase.length < minLength || str < averageThreshold
+    const averagePassphrase = str < strongThreshold
+    const strongPassphrase = str >= strongThreshold
+
+    if (noPassphrase) {
+      setPercent('0')
+      setVariant('negative')
+      setText('\u00A0') //nbsp to keep height constant
+    } else if (commonPassphrase) {
+      setPercent('25')
+      setVariant('negative')
+      setText('This passphrase is too common')
+    } else if (weakPassphrase) {
+      setPercent('25')
+      setVariant('negative')
+      setText('Too weak')
+    } else if (averagePassphrase){
+      setPercent('50')
+      setVariant('warning')
+      setText('Almost there, keep going!')
+    } else if (strongPassphrase) {
+      setPercent('100')
+      setVariant('positive')
+      setText('Success! Strong passphrase')
+    }
+  }, [passphrase, common, isPwned, averageThreshold, minLength, strongThreshold]
+  )
+
+  return {
+    strength: common || isPwned ? 0 : result.score,
+    percent,
+    variant,
+    text,
+  }
+}

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

@@ -9,10 +9,12 @@ import { buildAriaProps, buildDataProps } from '../utilities/props'
 
 type RichTextEditorProps = {
   aria?: object,
+  toolbarBottom?: Boolean,
   className?: string,
   data?: object,
   focus?: boolean,
   id?: string,
+  inline?: boolean,
   name?: string,
   onChange: (string) => void,
   placeholder?: string,
@@ -25,10 +27,12 @@ type RichTextEditorProps = {
 const RichTextEditor = (props: RichTextEditorProps) => {
   const {
     aria = {},
+    toolbarBottom = false,
     className,
     data = {},
     focus = false,
     id,
+    inline = false,
     name,
     onChange,
     placeholder,
@@ -77,6 +81,8 @@ const RichTextEditor = (props: RichTextEditorProps) => {
         blockCodeButton.hidden = type == 'inline'
         inlineCodeButton.hidden = type == 'block'
       })
+
+      if (toolbarBottom) editor.element.after(toolbarElement)
     })
 
     trixRef.current.addEventListener('trix-change', (event) => {
@@ -103,6 +109,8 @@ const RichTextEditor = (props: RichTextEditorProps) => {
   const SimpleClass = simple ? 'simple' : ''
   const FocusClass = focus ? 'focus-editor-targets' : ''
   const StickyClass = sticky ? 'sticky' : ''
+  const InlineClass = inline ? 'inline' : ''
+  const ToolbarBottomClass = toolbarBottom ? 'toolbar-bottom' : ''
   const css = classnames(globalProps(props), className)
 
   return (
@@ -114,6 +122,8 @@ const RichTextEditor = (props: RichTextEditorProps) => {
         SimpleClass,
         FocusClass,
         StickyClass,
+        InlineClass,
+        ToolbarBottomClass,
         css
       )}
     >

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

@@ -5,6 +5,7 @@
 @import "../tokens/typography";
 @import "../tokens/opacity";
 @import "../tokens/spacing";
+@import "../tokens/transition";
 @import "../pb_icon/icon";
 @import "./trix_styles";
 
@@ -228,4 +229,64 @@
       color: $white;
     }
   }
+  &.toolbar-bottom {
+    trix-editor {
+      border-top-left-radius: 6px;
+      border-top-right-radius: 6px;
+      border-bottom: none;
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
+      &:empty:not(:focus)::before {
+        color: $neutral !important;
+      }
+    }
+    trix-toolbar .trix-button-row {
+      border-top: none;
+      border-top-left-radius: 0;
+      border-top-right-radius: 0;
+      border-bottom: 1px solid $border_light;
+      border-bottom-left-radius: 6px;
+      border-bottom-right-radius: 6px;
+    }
+    trix-toolbar {
+      display: grid;
+    }
+    &:focus, &:focus-within {
+      trix-toolbar .trix-button-row {
+        @include transition_default;
+        border-color: $primary;
+      }
+    }
+  }
+  &.inline {
+    &:hover {
+      trix-editor {
+        @include transition_default;
+        border-color: $border_light;
+        background-color: $white;
+        &+ trix-toolbar .trix-button-row {
+          transition: all 0.3s ease-in-out 0s;
+          opacity: 100;
+        }
+      }
+    }
+    trix-editor {
+      @include transition_default;
+      border-color: transparent;
+      background-color: transparent;
+      &+ trix-toolbar .trix-button-row  {
+        transition: all 0.3s ease-in-out 0s;
+        opacity: 0;
+      }
+      &:focus {
+        @include transition_default;
+        border-color: $primary;
+        background-color: $focus_input_light;
+        &+ trix-toolbar .trix-button-row  {
+          transition: all 0.3s ease-in-out 0s;
+          opacity: 100;
+        }
+      }
+    }
+  }
 }

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_inline.html.erb

@@ -0,0 +1,6 @@
+<%= pb_rails("rich_text_editor", props: {
+  id: "inline",
+  inline: true,
+  toolbar_bottom: true,
+  value: "Try hovering over this text. Then try modifying it or adding more of your own text."
+}) %>

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_inline.jsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import { RichTextEditor } from '../../'
+
+const RichTextEditorInline = (props) => (
+  <div>
+    <RichTextEditor
+        id="inline"
+        inline
+        toolbarBottom
+        value="Try hovering over this text. Then try modifying it or adding more of your own text."
+        {...props}
+    />
+  </div>
+)
+
+export default RichTextEditorInline

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_toolbar_bottom.html.erb

@@ -0,0 +1,4 @@
+<%= pb_rails("rich_text_editor", props: {
+  id: "toolbar-bottom",
+  toolbar_bottom: true
+}) %>

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_toolbar_bottom.jsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import { RichTextEditor } from '../../'
+
+const RichTextEditorToolbarBottom = (props) => (
+  <div>
+    <RichTextEditor
+        id="bottom-toolbar"
+        toolbarBottom
+        {...props}
+    />
+  </div>
+)
+
+export default RichTextEditorToolbarBottom

data/app/pb_kits/playbook/pb_rich_text_editor/docs/example.yml

@@ -7,6 +7,8 @@ examples:
   - rich_text_editor_focus: Focus
   - rich_text_editor_sticky: Sticky
   - rich_text_editor_templates: Templates
+  - rich_text_editor_toolbar_bottom: Toolbar Bottom
+  - rich_text_editor_inline: Inline
   - rich_text_editor_preview: Preview
 
   react:
@@ -16,4 +18,6 @@ examples:
   - rich_text_editor_focus: Focus
   - rich_text_editor_sticky: Sticky
   - rich_text_editor_templates: Templates
+  - rich_text_editor_toolbar_bottom: Toolbar Bottom
+  - rich_text_editor_inline: Inline
   - rich_text_editor_preview: Preview

data/app/pb_kits/playbook/pb_rich_text_editor/docs/index.js

@@ -4,4 +4,6 @@ export { default as RichTextEditorAttributes } from './_rich_text_editor_attribu
 export { default as RichTextEditorFocus } from './_rich_text_editor_focus.jsx'
 export { default as RichTextEditorSticky } from './_rich_text_editor_sticky.jsx'
 export { default as RichTextEditorTemplates } from './_rich_text_editor_templates.jsx'
+export { default as RichTextEditorToolbarBottom } from './_rich_text_editor_toolbar_bottom.jsx'
+export { default as RichTextEditorInline } from './_rich_text_editor_inline.jsx'
 export { default as RichTextEditorPreview } from './_rich_text_editor_preview.jsx'

data/app/pb_kits/playbook/pb_rich_text_editor/rich_text_editor.rb

@@ -6,11 +6,16 @@ module Playbook
       prop :focus, type: Playbook::Props::Boolean,
                    default: false
 
+      prop :inline, type: Playbook::Props::Boolean,
+                    default: false
+
       prop :simple, type: Playbook::Props::Boolean,
                     default: false
 
       prop :sticky, type: Playbook::Props::Boolean,
-                   default: false
+                    default: false
+      prop :toolbar_bottom, type: Playbook::Props::Boolean,
+                            default: false
 
       prop :value
       prop :template
@@ -35,13 +40,15 @@ module Playbook
       def rich_text_options
         {
           id: id,
+          inline: inline,
           className: classname,
           focus: focus,
           simple: simple,
           sticky: sticky,
+          toolbarBottom: toolbar_bottom,
           value: value,
           template: template,
-          placeholder: placeholder
+          placeholder: placeholder,
         }
       end
     end

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

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

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

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