playbook_ui 9.3.0.pre.alpha.password.strength.1 → 9.4.0.pre.alpha2

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

@@ -1 +1,8 @@
-<%= pb_rails("date_time_stacked") %>
+<%= 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" }) %>
+

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

@@ -4,10 +4,28 @@ import { DateTimeStacked } from '../../'
 const DateTimeStackedDefault = (props) => (
   <div>
     <DateTimeStacked
-        date={new Date()}
+        datetime={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('generated scaffold test - update me', () => {
+test('Kit renders Dialog', () => {
   const testId = 'test1'
 
   render(

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

@@ -2,11 +2,12 @@
 
 import React from 'react'
 import classnames from 'classnames'
-import { buildCss } from '../utilities/props'
+import { buildCss, buildDataProps } 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,
@@ -27,6 +28,7 @@ const Flex = (props: FlexProps) => {
     align = 'none',
     children,
     className,
+    data = {},
     inline = false,
     horizontal = 'left',
     justify = 'none',
@@ -51,6 +53,8 @@ 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(
@@ -70,6 +74,7 @@ const Flex = (props: FlexProps) => {
         globalProps(props),
         className
       )}
+        {...dataProps}
     >
       {children}
     </div>

data/app/pb_kits/playbook/pb_section_separator/_section_separator.jsx

@@ -38,9 +38,13 @@ const SectionSeparator = (props: SectionSeparatorProps) => {
         className={classes}
         id={id}
     >
-      <span>
-        <Caption text={text} />
-      </span>
+
+      <If condition={text}>
+        <span>
+          <Caption text={text} />
+        </span>
+      </If>
+
     </div>
   )
 }

data/app/pb_kits/playbook/pb_time_stacked/time_stacked.html.erb

@@ -3,10 +3,10 @@
     data: object.data,
     class: object.classname) do %>
 
-    <%= pb_rails("body", props: { color: "light", classname: "pb_time_stacked time-spacing" }) do %>
+    <%= pb_rails("body", props: { color: "light", dark: object.dark, classname: "pb_time_stacked time-spacing" }) do %>
       <time>
         <%= object.format_time_string %>
-        <%= pb_rails("caption", props: { color: "light", tag: "span", text: object.pb_date_time.to_timezone.upcase, classname: "pb_time_stacked" }) %>
+        <%= pb_rails("caption", props: { color: "light", tag: "span", text: object.pb_date_time.to_timezone.upcase, dark: object.dark, classname: "pb_time_stacked" }) %>
       </time>
     <% end %>
 <% end %>

data/app/pb_kits/playbook/react_rails_kits.js

@@ -3,7 +3,6 @@ export { default as BarGraph } from './pb_bar_graph/_bar_graph.jsx'
 export { default as DistributionBar } from './pb_distribution_bar/_distribution_bar.jsx'
 export { default as Legend } from './pb_legend/_legend.jsx'
 export { default as LineGraph } from './pb_line_graph/_line_graph.jsx'
-export { default as Passphrase } from './pb_passphrase/_passphrase.jsx'
 export { default as Typeahead } from './pb_typeahead/_typeahead.jsx'
 export { default as RichTextEditor } from './pb_rich_text_editor/_rich_text_editor.jsx'
 export { default as Dialog } from './pb_dialog/_dialog.jsx'

data/lib/playbook/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module Playbook
-  VERSION = "9.3.0.pre.alpha.password.strength.1"
+  VERSION = "9.4.0.pre.alpha2"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 9.3.0.pre.alpha.password.strength.1
+  version: 9.4.0.pre.alpha2
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2021-04-09 00:00:00.000000000 Z
+date: 2021-04-12 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -809,6 +809,8 @@ files:
 - app/pb_kits/playbook/pb_date_stacked/date_stacked.rb
 - app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_align.html.erb
 - app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_align.jsx
+- app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_bold.html.erb
+- app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_bold.jsx
 - app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_default.html.erb
 - app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_default.jsx
 - app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_not_current_year.html.erb
@@ -838,6 +840,7 @@ files:
 - app/pb_kits/playbook/pb_date_time_stacked/_date_time_stacked.scss
 - app/pb_kits/playbook/pb_date_time_stacked/date_time_stacked.html.erb
 - app/pb_kits/playbook/pb_date_time_stacked/date_time_stacked.rb
+- app/pb_kits/playbook/pb_date_time_stacked/date_time_stacked.test.js
 - app/pb_kits/playbook/pb_date_time_stacked/docs/_date_time_stacked_default.html.erb
 - app/pb_kits/playbook/pb_date_time_stacked/docs/_date_time_stacked_default.jsx
 - app/pb_kits/playbook/pb_date_time_stacked/docs/example.yml
@@ -1378,29 +1381,6 @@ files:
 - app/pb_kits/playbook/pb_online_status/docs/index.js
 - app/pb_kits/playbook/pb_online_status/online_status.html.erb
 - app/pb_kits/playbook/pb_online_status/online_status.rb
-- app/pb_kits/playbook/pb_passphrase/_passphrase.jsx
-- app/pb_kits/playbook/pb_passphrase/_passphrase.scss
-- app/pb_kits/playbook/pb_passphrase/docs/_passphrase_common.jsx
-- app/pb_kits/playbook/pb_passphrase/docs/_passphrase_default.html.erb
-- app/pb_kits/playbook/pb_passphrase/docs/_passphrase_default.jsx
-- app/pb_kits/playbook/pb_passphrase/docs/_passphrase_default.md
-- app/pb_kits/playbook/pb_passphrase/docs/_passphrase_input_props.html.erb
-- app/pb_kits/playbook/pb_passphrase/docs/_passphrase_input_props.jsx
-- app/pb_kits/playbook/pb_passphrase/docs/_passphrase_input_props.md
-- app/pb_kits/playbook/pb_passphrase/docs/_passphrase_meter_settings.html.erb
-- app/pb_kits/playbook/pb_passphrase/docs/_passphrase_meter_settings.jsx
-- app/pb_kits/playbook/pb_passphrase/docs/_passphrase_meter_settings.md
-- app/pb_kits/playbook/pb_passphrase/docs/_passphrase_strength_change.jsx
-- app/pb_kits/playbook/pb_passphrase/docs/_passphrase_strength_change.md
-- app/pb_kits/playbook/pb_passphrase/docs/_passphrase_tips.html.erb
-- app/pb_kits/playbook/pb_passphrase/docs/_passphrase_tips.jsx
-- app/pb_kits/playbook/pb_passphrase/docs/_passphrase_tips.md
-- app/pb_kits/playbook/pb_passphrase/docs/example.yml
-- app/pb_kits/playbook/pb_passphrase/docs/index.js
-- app/pb_kits/playbook/pb_passphrase/passphrase.html.erb
-- app/pb_kits/playbook/pb_passphrase/passphrase.rb
-- app/pb_kits/playbook/pb_passphrase/passphrase.test.jsx
-- app/pb_kits/playbook/pb_passphrase/passwordStrength.js
 - app/pb_kits/playbook/pb_person/_person.jsx
 - app/pb_kits/playbook/pb_person/_person.scss
 - app/pb_kits/playbook/pb_person/docs/_description.md

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

@@ -1,205 +0,0 @@
-
-/* @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

@@ -1,63 +0,0 @@
-@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;
-    }
-  }
-}