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

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 13859d3f8d731118151f55f115ddddc05fe056a20f5166cd74d373ac333d56c5
-  data.tar.gz: 7bbbc053d7fe78a2f0052440b42e78d8a4cca82013cc0ae11166c1d75521b693
+  metadata.gz: 8f2f364f3ddeeb9deedacb265c4740dc30e2ee30674ffac2b201a83a7ab04dfe
+  data.tar.gz: 34ba1be5b7fb2c41b49c4942239f365ea13793e34ed1195894d5172ca5cfca61
 SHA512:
-  metadata.gz: ba648346b0802233d2dba4a4bd932b0bfe039ee63667afc90efbef0f00a3d09671866783c6a8ace55e84f2ba6430ecd230f30241aa328a7d925db8cdeef684ef
-  data.tar.gz: ded1c063a8f3b196bae5e4af2cc446411392dba688ec444b0e885fb03c0cf4703f7984d7e0a09722c345613e25033afbc92f447baa7ba9b93c265998d7503a8b
+  metadata.gz: d03d13b429587603b894ad28a093ac0e0ff27c47dda184f0f655ba017405e7fcf6b14c2f75907b6c57c47156639fb9c5eba0d232bcf535bfbde2ba8fca9d0dcf
+  data.tar.gz: 989a00fe0377210d658918ebf38ef93f49621a9c4bdfd6c87c87f8914d09aa7f40ec58eaa1a46ddaaef52aca55d30662bf63049c4638352ec8705d684e19777c

data/app/pb_kits/playbook/_playbook.scss

@@ -55,6 +55,7 @@
 @import 'pb_multiple_users_stacked/multiple_users_stacked';
 @import 'pb_nav/nav';
 @import 'pb_online_status/online_status';
+@import 'pb_passphrase/passphrase';
 @import 'pb_person/person';
 @import 'pb_person_contact/person_contact';
 @import 'pb_pill/pill';

data/app/pb_kits/playbook/data/menu.yml

@@ -26,6 +26,7 @@ kits:
     - form
     - form_group
     - form_pill
+    - passphrase
     - radio
     - rich_text_editor
     - select

data/app/pb_kits/playbook/index.js

@@ -61,6 +61,7 @@ export MultipleUsersStacked from './pb_multiple_users_stacked/_multiple_users_st
 export Nav from './pb_nav/_nav.jsx'
 export NavItem from './pb_nav/_item.jsx'
 export OnlineStatus from './pb_online_status/_online_status.jsx'
+export Passphrase from './pb_passphrase/_passphrase.jsx'
 export PbReactPopover from './pb_popover/_popover.jsx'
 export Person from './pb_person/_person.jsx'
 export PersonContact from './pb_person_contact/_person_contact.jsx'
@@ -84,13 +85,13 @@ export StatChange from './pb_stat_change/_stat_change.jsx'
 export StatValue from './pb_stat_value/_stat_value.jsx'
 export Table from './pb_table/_table.jsx'
 export TableRow from './pb_table/_table_row.jsx'
-export Textarea from './pb_textarea/_textarea.jsx'
 export TextInput from './pb_text_input/_text_input.jsx'
+export Textarea from './pb_textarea/_textarea.jsx'
 export Time from './pb_time/_time.jsx'
-export Timeline from './pb_timeline/_timeline.jsx'
+export TimeRangeInline from './pb_time_range_inline/_time_range_inline.jsx'
 export TimeStacked from './pb_time_stacked/_time_stacked.jsx'
+export Timeline from './pb_timeline/_timeline.jsx'
 export Timestamp from './pb_timestamp/_timestamp.jsx'
-export TimeRangeInline from './pb_time_range_inline/_time_range_inline.jsx'
 export Title from './pb_title/_title.jsx'
 export TitleCount from './pb_title_count/_title_count.jsx'
 export TitleDetail from './pb_title_detail/_title_detail.jsx'

data/app/pb_kits/playbook/pb_highlight/_highlight.jsx

@@ -28,7 +28,7 @@ const Highlight = (props: HighlightProps) => {
         autoEscape
         data={data}
         highlightClassName={classnames(globalProps(props), className)}
-        highlightTag="span"
+        highlightTag="mark"
         id={id}
         searchWords={highlightedText}
         textToHighlight={text || children}

data/app/pb_kits/playbook/pb_highlight/highlight.html.erb

@@ -2,5 +2,7 @@
     id: object.id,
     data: object.data,
     class: object.classname) do %>
-    <%= content.presence || object.text %>
+    <mark>
+      <%= content.presence || object.text %>
+    </mark>
 <% end %>

data/app/pb_kits/playbook/pb_icon_stat_value/_icon_stat_value.jsx

@@ -52,6 +52,7 @@ const IconStatValue = (props: IconStatValueProps) => {
       return (
         <Title
             size={1}
+            tag="span"
             text={`${value}`}
         />
       )
@@ -59,6 +60,7 @@ const IconStatValue = (props: IconStatValueProps) => {
       return (
         <Title
             size={2}
+            tag="span"
             text={`${value}`}
         />
       )
@@ -66,6 +68,7 @@ const IconStatValue = (props: IconStatValueProps) => {
       return (
         <Title
             size={3}
+            tag="span"
             text={`${value}`}
         />
       )

data/app/pb_kits/playbook/pb_icon_stat_value/icon_stat_value.html.erb

@@ -12,6 +12,7 @@
       <div>
         <%= pb_rails("flex", props: { vertical: "bottom" }) do %>
             <%= pb_rails "title", props: {
+                tag: "span",
                 text: object.value_string,
                 size: object.title_size } %>
                 &nbsp;

data/app/pb_kits/playbook/pb_passphrase/_passphrase.jsx

@@ -0,0 +1,205 @@
+
+/* @flow */
+
+import React, { useCallback, useEffect, useMemo, useState } from 'react'
+import classnames from 'classnames'
+import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
+import { globalProps } from '../utilities/globalProps.js'
+import { Body, Caption, Flex, Icon, PbReactPopover, ProgressSimple, TextInput } from '../'
+import { zxcvbnPasswordScore }  from './passwordStrength.js'
+
+type PassphraseProps = {
+  aria?: object,
+  averageThreshold?: number,
+  common?: boolean,
+  confirmation?: boolean,
+  className?: string,
+  data?: object,
+  dark?: boolean,
+  id?: string,
+  inputProps?: {},
+  label?: string,
+  minLength?: number,
+  onChange: (String) => void,
+  showTipsBelow?: 'always' | 'xs' | 'sm' | 'md' | 'lg' | 'xl',
+  onStrengthChange?: (number) => void,
+  strongThreshold?: number,
+  tips?: Array<string>,
+  uncontrolled?: boolean,
+  value: string,
+}
+
+const Passphrase = (props: PassphraseProps) => {
+  const {
+    aria = {},
+    averageThreshold = 2,
+    className,
+    common = false,
+    confirmation = false,
+    dark = false,
+    data = {},
+    id,
+    inputProps = {},
+    label = confirmation ? 'Confirm Passphrase' : 'Passphrase',
+    minLength,
+    onChange = () => {},
+    showTipsBelow = 'always',
+    onStrengthChange,
+    strongThreshold = 3,
+    tips = [],
+    uncontrolled = false,
+    value = '',
+  } = props
+
+  const [uncontrolledValue, setUncontrolledValue] = useState('')
+
+  const handleChange = useCallback(
+    (e) => uncontrolled ? setUncontrolledValue(e.target.value) :  onChange(e),
+    [uncontrolled, onChange]
+  )
+
+  const displayValue = useMemo(
+    () => (uncontrolled ? uncontrolledValue : value),
+    [value, uncontrolledValue, uncontrolled],
+  )
+
+  const [showPopover, setShowPopover] = useState(false)
+  const toggleShowPopover = () => setShowPopover(!showPopover)
+  const [showPassphrase, setShowPassphrase] = useState(false)
+  const toggleShowPassphrase = () => setShowPassphrase(!showPassphrase)
+
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
+  const classes = classnames(buildCss('pb_passphrase'), globalProps(props), className)
+
+  const calculator = useMemo(
+    () => confirmation ? { test: () => ({}) } : zxcvbnPasswordScore({ averageThreshold, strongThreshold, minLength }),
+    [averageThreshold, confirmation, strongThreshold, minLength]
+  )
+
+  const { percent: progressPercent, variant: progressVariant, text: strengthLabel, strength } = calculator.test(displayValue, common)
+
+  useEffect(() => {
+    if (typeof onStrengthChange === 'function') {
+      onStrengthChange(strength)
+    }
+  }, [strength])
+
+  const tipClass = classnames(
+    (dark ? 'dark' : null),
+    (showTipsBelow === 'always' ? null : `show-below-${showTipsBelow}`),
+  )
+
+  const popoverReference = (
+    <a
+        className={tipClass}
+        onClick={toggleShowPopover}
+    >
+      <Icon
+          dark={dark}
+          icon="info-circle"
+          size="xs"
+          variant="link"
+      />
+    </a>
+  )
+
+  return (
+    <div
+        {...ariaProps}
+        {...dataProps}
+        className={classes}
+        id={id}
+    >
+      <label>
+        <Flex align="baseline">
+          <Caption
+              className="passphrase-label"
+              text={label}
+          />
+          <If condition={tips.length > 0 && !confirmation}>
+            <PbReactPopover
+                placement="right"
+                reference={popoverReference}
+                show={showPopover}
+            >
+              <Flex
+                  align="center"
+                  orientation="column"
+              >
+                <Caption
+                    marginBottom="xs"
+                    text="Tips for a good passphrase"
+                />
+                <div>
+                  {
+                    tips.map((tip, i) => (
+                      <Caption
+                          key={i}
+                          marginBottom="xs"
+                          size="xs"
+                      >
+                        <Icon
+                            icon="shield-check"
+                            marginRight="xs"
+                        />
+                        {tip}
+                      </Caption>
+                    ))
+                  }
+                </div>
+              </Flex>
+            </PbReactPopover>
+          </If>
+        </Flex>
+        <div className="passphrase-text-input-wrapper">
+          <TextInput
+              className="passphrase-text-input"
+              dark={dark}
+              marginBottom="xs"
+              onChange={handleChange}
+              placeholder="Enter a passphrase..."
+              type={showPassphrase ? 'text' : 'password'}
+              value={displayValue}
+              {...inputProps}
+          />
+          <span
+              className="show-passphrase-icon"
+              dark={dark}
+              onClick={toggleShowPassphrase}
+          >
+            <Body
+                className={showPassphrase ? 'hide-icon' : ''}
+                color="light"
+                dark={dark}
+            >
+              <Icon icon="eye-slash" />
+            </Body>
+            <Body
+                className={showPassphrase ? '' : 'hide-icon'}
+                color="light"
+                dark={dark}
+            >
+              <Icon icon="eye" />
+            </Body>
+          </span>
+        </div>
+      </label>
+      <If condition={!confirmation}>
+        <ProgressSimple
+            className={displayValue.length === 0 ? 'progress-empty-input' : null}
+            dark={dark}
+            percent={progressPercent}
+            variant={progressVariant}
+        />
+        <Caption
+            dark={dark}
+            size="xs"
+            text={strengthLabel}
+        />
+      </If>
+    </div>
+  )
+}
+
+export default Passphrase

data/app/pb_kits/playbook/pb_passphrase/_passphrase.scss

@@ -0,0 +1,63 @@
+@import "../tokens/colors";
+@import "../tokens/spacing";
+@import "../tokens/screen_sizes";
+
+.pb_passphrase {
+  margin-bottom: $space_sm;
+
+  a.dark {
+    color: $white;
+  }
+
+  a {
+
+    &[class*=show-below-] {
+      display: none;
+    }
+    @each $breakpoint_name, $breakpoint in $breakpoints {
+      &.show-below-#{$breakpoint_name} {
+        @include break_at($breakpoint) {
+          display: inline;
+        }
+      }
+    }
+  }
+
+  .passphrase-label{
+    margin-right: 4px;
+  }
+
+  .passphrase-text-input-wrapper {
+    position: relative;
+
+    .pb_text_input_kit_label {
+      margin-bottom: 4px;
+    }
+
+    .passphrase-text-input input{
+      padding-right: 42px;
+    }
+
+    .passphrase-text-input .text_input_wrapper {
+      margin-bottom: 0;
+    }
+
+    .show-passphrase-icon {
+      position: absolute;
+      right: 11px;
+      top: 11px;
+
+      .hide-icon {
+        display: none;
+      }
+    }
+  }
+
+  .pb_progress_simple_wrapper, .pb_progress_simple_wrapper_dark {
+    margin-bottom: 4px;
+
+    &.progress-empty-input {
+      visibility: hidden;
+    }
+  }
+}

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

@@ -0,0 +1,33 @@
+import React, { useState } from 'react'
+import { Body, Passphrase } from '../../'
+
+const PassphraseCommon = (props) => {
+  const [input, setInput] = useState('')
+
+  const handleChange = (e) => setInput(e.target.value)
+
+  const COMMON_PASSPHRASES = ['passphrase', 'apple', 'password', 'p@55w0rd']
+
+  const commonCheck = (passphrase) => {
+    if (COMMON_PASSPHRASES.includes(passphrase))
+      return true
+    return false
+  }
+
+  return (
+    <>
+      <div>
+        <Body text={`Try typing any of the following: ${COMMON_PASSPHRASES.join(' ')}`} />
+        <br />
+        <Passphrase
+            common={commonCheck(input)}
+            onChange={handleChange}
+            value={input}
+            {...props}
+        />
+      </div>
+    </>
+  )
+}
+
+export default PassphraseCommon

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

@@ -0,0 +1,3 @@
+<%= pb_rails("passphrase") %>
+
+<%= pb_rails("passphrase", props: { confirmation: true}) %>

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

@@ -0,0 +1,31 @@
+import React, { useState } from 'react'
+import { Passphrase } from '../../'
+
+const PassphraseDefault = (props) => {
+  const [input, setInput] = useState('')
+  const handleChange = (e) => setInput(e.target.value)
+
+  const [confoInput, setConfoInput] = useState('')
+  const handleConfoChange = (e) => setConfoInput(e.target.value)
+
+  return (
+    <>
+      <div>
+        <Passphrase
+            onChange={handleChange}
+            value={input}
+            {...props}
+        />
+        <Passphrase
+            confirmation
+            onChange={handleConfoChange}
+            value={confoInput}
+            {...props}
+        />
+        <span>{input === confoInput ? 'They match!' : 'They don\'t match!'}</span>
+      </div>
+    </>
+  )
+}
+
+export default PassphraseDefault