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

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 354862f897edc053e27311b331ef01bb927323b9006af47752f1e51ae5e6eeca
-  data.tar.gz: 38946538f1a04c0c2df4b5e0d7e5cfeeeecf3bea46e3af26abb4852456429553
+  metadata.gz: 8f2f364f3ddeeb9deedacb265c4740dc30e2ee30674ffac2b201a83a7ab04dfe
+  data.tar.gz: 34ba1be5b7fb2c41b49c4942239f365ea13793e34ed1195894d5172ca5cfca61
 SHA512:
-  metadata.gz: fd7e15aab84fd9ac50f52bee181437b79d7d67c3df141c2c40d1349b1c568e9e235aa42308455cb18bd0073131786323182853ef2fe046040efb16c5bd93cb46
-  data.tar.gz: d0619331fbaec43977d07d10f9f6aa3ed89b3de0ac5f9a8e1572844b8696c4ae4fbd55513f087d830c1f6ef092f2be24f2c757ae95d88f16dec0555741ff7580
+  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_badge/_badge.jsx

@@ -3,7 +3,6 @@
 import React from 'react'
 import classnames from 'classnames'
 import { globalProps } from '../utilities/globalProps.js'
-import { Icon } from '../'
 
 import {
   buildAriaProps,
@@ -14,15 +13,8 @@ import {
 type BadgeProps = {
   aria?: object,
   className?: string,
-  closeProps?: {
-    onClick?: EventHandler,
-    onMouseDown?: EventHandler,
-    onTouchEnd?: EventHandler,
-  },
   data?: object,
   id?: string,
-  removeIcon?: Boolean,
-  removeOnClick?: EventHandler,
   rounded?: boolean,
   text?: string,
   variant?: "error" | "info" | "neutral" | "primary" | "success" | "warning",
@@ -31,11 +23,8 @@ const Badge = (props: BadgeProps) => {
   const {
     aria = {},
     className,
-    closeProps = {},
     data = {},
     id,
-    removeIcon = false,
-    removeOnClick = () => {},
     rounded = false,
     text,
     variant = 'neutral',
@@ -55,21 +44,7 @@ const Badge = (props: BadgeProps) => {
         className={css}
         id={id}
     >
-      <span>
-        {text}
-        <If condition={removeIcon}>
-          <span
-              onClick={removeOnClick}
-              style={{ cursor: 'pointer' }}
-              {...closeProps}
-          >
-            <Icon
-                fixedWidth
-                icon="times"
-            />
-          </span>
-        </If>
-      </span>
+      <span>{text}</span>
     </div>
   )
 }

data/app/pb_kits/playbook/pb_date_picker/_date_picker.jsx

@@ -25,8 +25,6 @@ type DatePickerProps = {
   id?: String,
   inputAria?: object,
   inputData?: object,
-  inputOnChange?: (String) => void,
-  inputValue?: any,
   label?: String,
   maxDate: String,
   minDate: String,
@@ -57,8 +55,6 @@ const DatePicker = (props: DatePickerProps) => {
     id,
     inputAria,
     inputData,
-    inputOnChange,
-    inputValue,
     label = 'Date Picker',
     maxDate,
     minDate,
@@ -118,6 +114,7 @@ const DatePicker = (props: DatePickerProps) => {
         className={classes}
         id={id}
     >
+      {className}
       <div className="input_wrapper">
         <TextInput
             aria={inputAria}
@@ -129,9 +126,7 @@ const DatePicker = (props: DatePickerProps) => {
             id={pickerId}
             label={hideLabel ? null : label}
             name={name}
-            onChange={inputOnChange}
             placeholder={placeholder}
-            value={inputValue}
         />
         <If condition={!hideIcon}>
           <div

data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.js

@@ -166,9 +166,6 @@ const datePickerHelper = (config) => {
     picker.input.style.caretColor = 'transparent'
     picker.input.style.cursor = 'pointer'
   }
-
-  // Fix event bubbling bug on wrapper
-  document.querySelector(`#${pickerId}`).parentElement.addEventListener('click', (e) => e.stopPropagation())
 }
 
 export default datePickerHelper

data/app/pb_kits/playbook/pb_flex/_flex.jsx

@@ -1,6 +1,6 @@
 /* @flow */
 
-import React, { forwardRef } from 'react'
+import React from 'react'
 import classnames from 'classnames'
 import { buildCss } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps.js'
@@ -22,12 +22,11 @@ type FlexProps = {
   wrap?: boolean,
 }
 
-const Flex = (props: FlexProps, ref: React.ElementRef<"div">) => {
+const Flex = (props: FlexProps) => {
   const {
     align = 'none',
     children,
     className,
-    id,
     inline = false,
     horizontal = 'left',
     justify = 'none',
@@ -71,12 +70,10 @@ const Flex = (props: FlexProps, ref: React.ElementRef<"div">) => {
         globalProps(props),
         className
       )}
-        id={id}
-        ref={ref}
     >
       {children}
     </div>
   )
 }
 
-export default forwardRef(Flex)
+export default Flex

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;
+    }
+  }
+}