playbook_ui 9.4.0.pre.alpha2 → 9.6.1.pre.deps1

data/app/pb_kits/playbook/pb_date_time_stacked/date_time_stacked.html.erb

@@ -1,17 +1,13 @@
 <%= content_tag(:div,
     id: object.id,
     data: object.data,
-    class: object.classname,
-    aria: object.aria) do %>
-
-  <%= pb_rails("flex", props: {classname: "flex-container", vertical: "stretch"}) do %>
-      <%= pb_rails("body", props: {classname: "flex-item"}) do %>
-        <%= pb_rails("date_stacked", props: { date: object.date_time_value, size: "sm", align: "right", bold: true, dark: object.dark }) %>
+    class: object.classname) do %>
+    <%= pb_rails("flex", props: { orientation: "row", vertical: "center" }) do %>
+      <%= pb_rails("flex/flex_item") do %>
+        <%= pb_rails("date_stacked", props: { align: "right", date: object.date, reverse: true, size: "sm", dark: object.dark }) %>
       <% end %>
-      <%= pb_rails("section_separator", props: { orientation: "vertical", classname: "date-time-padding" }) %>
-      <%= pb_rails("body", props: {classname: "flex-item"}) do %>
-        <%= pb_rails("time_stacked", props: { time: object.date_time_value, dark: object.dark, timezone: object.timezone }) %>
+      <%= pb_rails("flex/flex_item") do %>
+        <%= pb_rails("time_stacked", props: { classname: "pb_date_time_stacked_kit", time: object.date, tag: "caption" }) %>
       <% end %>
-  <% end %>
-
-<% end %>
+    <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_date_time_stacked/date_time_stacked.rb

@@ -3,17 +3,10 @@
 module Playbook
   module PbDateTimeStacked
     class DateTimeStacked < Playbook::KitBase
-      prop :date, deprecated: true
-      prop :date_time, type: Playbook::Props::Date,
+      prop :date, type: Playbook::Props::Date,
                   default: ::DateTime.current
       prop :dark, type: Playbook::Props::Boolean,
                   default: false
-      prop :timezone, type: Playbook::Props::String,
-                  default: "America/New_York"
-
-    def date_time_value
-      date || date_time
-    end
     end
   end
-end
+end

data/app/pb_kits/playbook/pb_date_time_stacked/docs/_date_time_stacked_default.html.erb

@@ -1,8 +1 @@
-<%= pb_rails("date_time_stacked", props: { date_time: DateTime.now }) %>
-<br>
-<%= pb_rails("date_time_stacked", props: { date_time: Date.new(2018, 03, 20) }) %>
-<br>
-<%= pb_rails("date_time_stacked", props: { date_time: DateTime.now, timezone: "Asia/Tokyo" }) %>
-<br>
-<%= pb_rails("date_time_stacked", props: { date_time: DateTime.now, timezone: "America/Denver" }) %>
-
+<%= pb_rails("date_time_stacked") %>

data/app/pb_kits/playbook/pb_date_time_stacked/docs/_date_time_stacked_default.jsx

@@ -4,28 +4,10 @@ import { DateTimeStacked } from '../../'
 const DateTimeStackedDefault = (props) => (
   <div>
     <DateTimeStacked
-        datetime={new Date()}
+        date={new Date()}
         {...props}
     />
-    <br />
-    <DateTimeStacked
-        datetime={new Date()}
-        timeZone="Asia/Tokyo"
-
-        {...props}
-    />
-    <br />
-    <DateTimeStacked
-        datetime={new Date()}
-        timeZone="America/Denver"
-
-        {...props}
-    />
-
   </div>
 )
 
 export default DateTimeStackedDefault
-
-// *Development Note* -  We are reviewing this kit for a potential name change due to naming collisions when `new Date()` is used.
-// To avoid this bug, please use name spacing as shown in the code examples. ie `import { Date as AliasedComponentName } from '../../'

data/app/pb_kits/playbook/pb_dialog/dialog.test.jsx

@@ -9,7 +9,7 @@ import { Dialog } from '../'
   - https://jestjs.io/docs/en/using-matchers
 */
 
-test('Kit renders Dialog', () => {
+test('generated scaffold test - update me', () => {
   const testId = 'test1'
 
   render(

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

@@ -2,12 +2,11 @@
 
 import React from 'react'
 import classnames from 'classnames'
-import { buildCss, buildDataProps } from '../utilities/props'
+import { buildCss } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps.js'
 type FlexProps = {
   children: array<React.ReactNode> | React.ReactNode,
   className?: string,
-  data?: object,
   horizontal?: "left" | "center" | "right" | "stretch" | "none",
   justify?: "start" | "center" | "end" | "around" | "between" | "evenly" | "none",
   id?: string,
@@ -28,7 +27,6 @@ const Flex = (props: FlexProps) => {
     align = 'none',
     children,
     className,
-    data = {},
     inline = false,
     horizontal = 'left',
     justify = 'none',
@@ -53,8 +51,6 @@ const Flex = (props: FlexProps) => {
   const columnGapClass = columnGap !== 'none' ? `columnGap_${columnGap}` : ''
   const wrapClass = wrap === true ? 'wrap' : ''
   const reverseClass = reverse === true ? 'reverse' : ''
-  const dataProps = buildDataProps(data)
-
   return (
     <div
         className={classnames(
@@ -74,7 +70,6 @@ const Flex = (props: FlexProps) => {
         globalProps(props),
         className
       )}
-        {...dataProps}
     >
       {children}
     </div>

data/app/pb_kits/playbook/pb_icon/_icon.jsx

@@ -2,12 +2,14 @@
 
 import React from 'react'
 import classnames from 'classnames'
+import { buildAriaProps, buildDataProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps.js'
 
 type IconProps = {
-  aria?: Object,
+  aria?: object,
   border?: boolean,
   className?: string,
+  data?: object,
   fixedWidth?: boolean,
   flip?: "horizontal" | "vertical" | "both" | "none",
   icon: string,
@@ -41,8 +43,10 @@ const flipMap = {
 
 const Icon = (props: IconProps) => {
   const {
+    aria = {},
     border = false,
     className,
+    data = {},
     fixedWidth = true,
     flip = false,
     icon,
@@ -75,11 +79,22 @@ const Icon = (props: IconProps) => {
     className
   )
 
+  aria.label ? null : aria.label = `${icon} icon`
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
+
   return (
-    <i
-        className={classes}
-        id={id}
-    />
+    <>
+      <i
+          {...dataProps}
+          className={classes}
+          id={id}
+      />
+      <span
+          {...ariaProps}
+          hidden
+      />
+    </>
   )
 }
 

data/app/pb_kits/playbook/pb_icon/icon.html.erb

@@ -1,5 +1,7 @@
 <%= content_tag(:i, nil,
     id: object.id,
     data: object.data,
-    class: object.classname,
-    aria: object.aria) %>
+    class: object.classname ) %>
+<%= content_tag(:span, nil,
+    aria: { label: "#{object.icon} icon" }.merge(object.aria),
+    hidden: true ) %>

data/app/pb_kits/playbook/pb_loading_inline/_loading_inline.jsx

@@ -22,6 +22,7 @@ const LoadingInline = (props: LoadingInlineProps) => {
     >
       <Body color="light">
         <Icon
+            aria={{ label: 'loading icon' }}
             fixedWidth
             icon="spinner"
             pulse

data/app/pb_kits/playbook/pb_loading_inline/loading_inline.html.erb

@@ -4,6 +4,6 @@
     class: object.classname) do %>
 
   <%= pb_rails("body", props: { color: "light", dark: object.dark }) do %>
-    <%= pb_rails("icon", props: { fixed_width: true, icon: "spinner", pulse: true }) %> Loading
+    <%= pb_rails("icon", props: { aria: { label: "loading icon" }, fixed_width: true, icon: "spinner", pulse: true }) %> Loading
   <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_nav/_item.jsx

@@ -75,7 +75,6 @@ const NavItem = (props: NavItemProps) => {
               key={iconLeft}
           >
             <Icon
-                aria={{ label: iconLeft }}
                 className="pb_nav_list_item_icon_left"
                 fixedWidth
                 icon={iconLeft}
@@ -91,7 +90,6 @@ const NavItem = (props: NavItemProps) => {
               key={iconRight}
           >
             <Icon
-                aria={{ label: iconRight }}
                 className="pb_nav_list_item_icon_right"
                 fixedWidth
                 icon={iconRight}

data/app/pb_kits/playbook/pb_nav/item.html.erb

@@ -9,13 +9,13 @@
       <%= pb_rails("image", props: { url: object.image_url, classname: "pb_nav_img_wrapper" }) %>
     <% end %>
     <% if object.icon_left %>
-      <%= pb_rails("icon", props: { aria: { label: object.icon_left }, icon: object.icon_left, classname: "pb_nav_list_item_icon_left", fixed_width: true}) %>
+      <%= pb_rails("icon", props: { icon: object.icon_left, classname: "pb_nav_list_item_icon_left", fixed_width: true}) %>
     <% end %>
     <span class="pb_nav_list_item_text">
       <%= object.text %><%= content.presence %>
     </span>
     <% if object.icon_right %>
-      <%= pb_rails("icon", props: { aria: { label: object.icon_right }, icon: object.icon_right, classname: "pb_nav_list_item_icon_right", fixed_width: true}) %>
+      <%= pb_rails("icon", props: { icon: object.icon_right, classname: "pb_nav_list_item_icon_right", fixed_width: true}) %>
     <% end %>
   <% end %>
 <% end %>

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