playbook_ui 9.5.0.alpha.rs.downgrade → 9.7.0.pre.alphawidth1

data/app/pb_kits/playbook/pb_nav/docs/_block_nav.jsx

@@ -1,12 +1,12 @@
 import React from 'react'
-import { Nav } from '../../'
+import { Nav, User } from '../../'
 import NavItem from '../_item.jsx'
 
 const BlockNav = (props) => {
   return (
     <Nav
         link="#"
-        title="Menu"
+        title="Users"
         {...props}
     >
       <NavItem
@@ -14,11 +14,49 @@ const BlockNav = (props) => {
           link="#"
           {...props}
       >
-        {'Photos'}
+        <User
+            align="left"
+            avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
+            name="Anna Black"
+            orientation="horizontal"
+            territory="PHL"
+            title="Remodeling Consultant"
+            {...props}
+        />
+      </NavItem>
+      <NavItem link="#">
+        <User
+            align="left"
+            avatarUrl="https://randomuser.me/api/portraits/women/45.jpg"
+            name="Julie Hamilton"
+            orientation="horizontal"
+            territory="PHL"
+            title="Inside Sales Agent"
+            {...props}
+        />
+      </NavItem>
+      <NavItem link="#">
+        <User
+            align="left"
+            avatarUrl="https://randomuser.me/api/portraits/men/44.jpg"
+            name="Dennis Wilks"
+            orientation="horizontal"
+            territory="PHL"
+            title="Senior Remodeling Consultant"
+            {...props}
+        />
+      </NavItem>
+      <NavItem link="#">
+        <User
+            align="left"
+            avatarUrl="https://randomuser.me/api/portraits/men/46.jpg"
+            name="Ronnie Martin"
+            orientation="horizontal"
+            territory="PHL"
+            title="Customer Development Representative"
+            {...props}
+        />
       </NavItem>
-      <NavItem link="#">{'Music'}</NavItem>
-      <NavItem link="#">{'Video'}</NavItem>
-      <NavItem link="#">{'Files'}</NavItem>
     </Nav>
   )
 }

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 { zxcvbnPasswordScore }  from './passwordStrength.js'
+import { Body, Caption, Flex, Icon, PbReactPopover, ProgressSimple, TextInput } from '../'
+
+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,73 @@
+@import "../tokens/colors";
+@import "../tokens/spacing";
+@import "../tokens/screen_sizes";
+
+.pb_passphrase {
+  margin-bottom: $space_sm;
+
+  label {
+    display: inline;
+  }
+
+  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: ($space_xs/2);
+  }
+
+  .passphrase-text-input-wrapper {
+    position: relative;
+
+    .pb_text_input_kit_label {
+      margin-bottom: ($space_xs/2);
+    }
+
+    .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;
+      cursor: pointer;
+      @media (hover:hover) {
+        &:hover .pb_body_kit_light {
+          color: $primary;
+        }
+      }
+
+      .hide-icon {
+        display: none;
+      }
+    }
+  }
+
+  .pb_progress_simple_wrapper, .pb_progress_simple_wrapper_dark {
+    margin-bottom: ($space_xs/2);
+
+    &.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

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

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

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

@@ -0,0 +1,16 @@
+<%= pb_rails("passphrase", props: {
+  input_props: {
+    disabled: true,
+    id: "my-disabled-passphrase",
+    name: "my-disabled-field",
+  },
+  label: "Input props passed directly to input kit"
+}) %>
+
+<%= pb_rails("passphrase", props: {
+  input_props: {
+    id: "my-custome-id",
+    name: "my-value-name",
+  },
+  label: "Set name, id, etc for use in forms"
+}) %>

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

@@ -0,0 +1,56 @@
+import React, { useState } from 'react'
+import { Passphrase } from '../../'
+
+const PassphraseInputProps = (props) => {
+  const [input, setInput] = useState('')
+
+  const handleChange = (e) => setInput(e.target.value)
+
+  return (
+    <>
+      <div>
+        <Passphrase
+            inputProps={{
+              name: 'my-disabled-field',
+              id: 'my-value-id',
+              disabled: true,
+            }}
+            label="Pass props directly to input kit"
+            onChange={handleChange}
+            value={input}
+            {...props}
+        />
+        <Passphrase
+            inputProps={{
+              children: (
+                <input
+                    onChange={handleChange}
+                    type="password"
+                    value={input}
+                />),
+            }}
+            label="Custom input"
+            onChange={handleChange}
+            value={input}
+            {...props}
+        />
+        <Passphrase
+            inputProps={{ name: 'my-value-name', id: 'my-value-id' }}
+            label="Set name and ID for use in form libraries"
+            onChange={handleChange}
+            value={input}
+            {...props}
+        />
+        <Passphrase
+            confirmation
+            inputProps={{ name: 'my-value-confirmation-name', id: 'my-value-confirmation-id' }}
+            onChange={handleChange}
+            value={input}
+            {...props}
+        />
+      </div>
+    </>
+  )
+}
+
+export default PassphraseInputProps