playbook_ui 9.8.0 → 9.9.0.alpha.inline1

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

@@ -17,6 +17,7 @@ type TextInputProps = {
   disabled?: boolean,
   error?: string,
   id?: string,
+  inline?: boolean,
   name: string,
   label: string,
   onChange: (String) => void,
@@ -39,6 +40,7 @@ const TextInput = (
     disabled,
     error,
     id,
+    inline = false,
     name,
     label,
     onChange = () => {},
@@ -53,6 +55,7 @@ const TextInput = (
   const dataProps = buildDataProps(data)
   const css = classnames([
     'pb_text_input_kit',
+    inline ? 'inline' : null,
     error ? 'error' : null,
     globalProps(props),
     className,

data/app/pb_kits/playbook/pb_text_input/_text_input.scss

@@ -79,4 +79,12 @@
       }
     }
   }
+  &.inline {
+    &:not(:hover) { 
+      .text_input_wrapper input:not(:focus) {
+        background-color: transparent;
+        border-color: transparent;
+      }
+    }
+  }
 }

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_inline.html.erb

@@ -0,0 +1,5 @@
+<%= pb_rails("text_input", props: {
+  inline: true,
+  label: "Hover Over Text Below",
+  value: "Inline Input"
+}) %>

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_inline.jsx

@@ -0,0 +1,22 @@
+import React, { useState } from 'react'
+import { TextInput } from '../../'
+
+const TextInputInline = (props) => {
+  const [value, setValue] = useState('Inline Input')
+  const handleValueChange = ({ target }) => {
+    setValue(target.value)
+  }
+  return (
+    <div>
+      <TextInput
+          inline
+          label="Hover Over Text Below"
+          onChange={handleValueChange}
+          value={value}
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default TextInputInline

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

@@ -4,8 +4,10 @@ examples:
   - text_input_error: With Error
   - text_input_custom: Custom
   - text_input_disabled: Disabled
+  - text_input_inline: Inline
   react:
   - text_input_default: Default
   - text_input_error: With Error
   - text_input_custom: Custom
   - text_input_disabled: Disabled
+  - text_input_inline: Inline

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

@@ -2,3 +2,4 @@ export { default as TextInputDefault } from './_text_input_default.jsx'
 export { default as TextInputCustom } from './_text_input_custom.jsx'
 export { default as TextInputError } from './_text_input_error.jsx'
 export { default as TextInputDisabled } from './_text_input_disabled.jsx'
+export { default as TextInputInline } from './_text_input_inline.jsx'