playbook_ui 9.10.0.pre.alpha2 → 9.12.0

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

@@ -3,10 +3,17 @@
 module Playbook
   module PbDateTimeStacked
     class DateTimeStacked < Playbook::KitBase
-      prop :date, type: Playbook::Props::Date,
-                  default: ::DateTime.current
+      prop :date, deprecated: true
+      prop :date_time, 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

data/app/pb_kits/playbook/pb_date_time_stacked/date_time_stacked.test.js

@@ -0,0 +1,35 @@
+import { ensureAccessible, renderKit } from '../utilities/test-utils'
+import { DateTimeStacked } from '../'
+
+/* eslint-disable jsx-control-statements/jsx-jcs-no-undef */
+
+const props = {
+  data: { testid: 'datetimestacked' },
+  datetime: new Date('Wed Mar 31 2021 12:00:00 GMT-0500'),
+}
+
+test('Kit renders date time', () => {
+  const kit = renderKit(DateTimeStacked, props)
+  expect(kit).toBeInTheDocument()
+})
+
+it('Should be accessible', async () => {
+  ensureAccessible(DateTimeStacked, props)
+})
+
+test('renders time in default timezone', () => {
+  const kit = renderKit(DateTimeStacked, props)
+  expect(kit).toHaveTextContent(/Mar311:00pEDT/i)
+})
+
+test('renders time in timezone', () => {
+  props.timeZone = 'Asia/Tokyo'
+  const kit = renderKit(DateTimeStacked, props)
+  expect(kit).toHaveTextContent(/Mar312:00aJST/i)
+})
+
+test('renders time in timezone', () => {
+  props.timeZone = 'America/Denver'
+  const kit = renderKit(DateTimeStacked, props)
+  expect(kit).toHaveTextContent(/Mar3111:00aMDT/i)
+})

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_passphrase/_passphrase.jsx

@@ -7,7 +7,7 @@ import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps.js'
 import useZxcvbn from './useZxcvbn'
 import useHaveIBeenPwned from './useHaveIBeenPwned'
-import { Body, Caption, Flex, Icon, PbReactPopover, ProgressSimple, TextInput } from '../'
+import { Body, Caption, CircleIconButton, Flex, Icon, PbReactPopover, ProgressSimple, TextInput } from '../'
 
 type PassphraseProps = {
   aria?: object,
@@ -69,6 +69,10 @@ const Passphrase = (props: PassphraseProps) => {
 
   const [showPopover, setShowPopover] = useState(false)
   const toggleShowPopover = () => setShowPopover(!showPopover)
+  const handleShouldClosePopover = (shouldClosePopover) => {
+    setShowPopover(!shouldClosePopover)
+  }
+
   const [showPassphrase, setShowPassphrase] = useState(false)
   const toggleShowPassphrase = () => setShowPassphrase(!showPassphrase)
 
@@ -85,7 +89,7 @@ const Passphrase = (props: PassphraseProps) => {
   }, [strength])
 
   const tipClass = classnames(
-    (dark ? 'dark' : null),
+    'passphrase-popover',
     (showTipsBelow === 'always' ? null : `show-below-${showTipsBelow}`),
   )
   const dataProps = useMemo(
@@ -94,17 +98,13 @@ const Passphrase = (props: PassphraseProps) => {
   )
 
   const popoverReference = (
-    <a
+    <CircleIconButton
         className={tipClass}
+        dark={dark}
+        icon="info-circle"
         onClick={toggleShowPopover}
-    >
-      <Icon
-          dark={dark}
-          icon="info-circle"
-          size="xs"
-          variant="link"
-      />
-    </a>
+        variant="link"
+    />
   )
 
   return (
@@ -122,8 +122,10 @@ const Passphrase = (props: PassphraseProps) => {
           />
           <If condition={tips.length > 0 && !confirmation}>
             <PbReactPopover
+                closeOnClick="outside"
                 placement="right"
                 reference={popoverReference}
+                shouldClosePopover={handleShouldClosePopover}
                 show={showPopover}
             >
               <Flex

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

@@ -9,20 +9,13 @@
     display: inline;
   }
 
-  a.dark {
-    color: $white;
+  [class*=show-below-] {
+    display: none;
   }
-
-  a {
-
-    &[class*=show-below-] {
-      display: none;
-    }
-    @each $breakpoint_name, $breakpoint in $breakpoints {
-      &.show-below-#{$breakpoint_name} {
-        @include break_at($breakpoint) {
-          display: inline;
-        }
+  @each $breakpoint_name, $breakpoint in $breakpoints {
+    .show-below-#{$breakpoint_name} {
+      @include break_at($breakpoint) {
+        display: inline;
       }
     }
   }
@@ -70,4 +63,16 @@
       visibility: hidden;
     }
   }
+  .passphrase-popover {
+    position: relative;
+    left: -($space_xs * 1.25);
+  }
+  @-moz-document url-prefix() {
+    .passphrase-popover {
+      position: relative;
+      top: $space_sm;
+      left: -($space_xs * 1.5);
+    }
+  }
 }
+

data/app/pb_kits/playbook/pb_passphrase/useZxcvbn.js

@@ -15,9 +15,9 @@ export default function useZxcvbn(options) {
 
   useEffect(() => {
     if (confirmation) return
-
-    setResult(calculator(passphrase))
-    const str = result.score
+    const newResult = calculator(passphrase)
+    setResult(newResult)
+    const str = newResult.score
 
     const noPassphrase = passphrase.length <= 0
     const commonPassphrase = common || isPwned

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_text_input/_text_input.jsx

@@ -1,13 +1,10 @@
 /* @flow */
 import React, { forwardRef } from 'react'
 import classnames from 'classnames'
-import { Body, Caption } from '../'
+import { Body, Caption, Card, Flex, Icon } from '../'
 import { globalProps } from '../utilities/globalProps.js'
 
-import {
-  buildAriaProps,
-  buildDataProps,
-} from '../utilities/props'
+import { buildAriaProps, buildDataProps } from '../utilities/props'
 
 type TextInputProps = {
   aria?: object,
@@ -25,12 +22,14 @@ type TextInputProps = {
   type: string,
   value: string | number,
   children: Node,
+  addOn?: {
+    icon?: string,
+    alignment?: "right" | "left",
+    border?: boolean,
+  },
 }
 
-const TextInput = (
-  props: TextInputProps,
-  ref: React.ElementRef<"input">
-) => {
+const TextInput = (props: TextInputProps, ref: React.ElementRef<"input">) => {
   const {
     aria = {},
     className,
@@ -47,16 +46,78 @@ const TextInput = (
     type = 'text',
     value = '',
     children = null,
+    addOn = { icon: null, alignment: 'right', border: true },
   } = props
 
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
+
+  const { alignment, border, icon } = addOn
+  const addOnAlignment = alignment === 'left' ? 'left' : 'right'
+  const borderToChange = addOnAlignment === 'left' ? 'right' : 'left'
+  const borderToggle = border === false ? 'off' : 'on'
+  const borderCss = `border_${borderToChange}_${borderToggle}`
+
+  const shouldShowAddOn = icon !== null
+  const addOnCss = shouldShowAddOn ? 'text_input_wrapper_add_on' : null
+  const addOnDarkModeCardCss = (shouldShowAddOn && dark) ? 'add-on-card-dark' : null
   const css = classnames([
     'pb_text_input_kit',
     error ? 'error' : null,
     globalProps(props),
     className,
   ])
+  const addOnIcon = (
+    <Icon
+        className="add-on-icon"
+        dark={dark}
+        fixedWidth={false}
+        icon={icon}
+    />
+  )
+  const textInput = (
+    <input
+        {...props}
+        className="text_input"
+        disabled={disabled}
+        id={id}
+        name={name}
+        onChange={onChange}
+        placeholder={placeholder}
+        ref={ref}
+        required={required}
+        type={type}
+        value={value}
+    />
+  )
+
+  const addOnInput = (
+    <React.Fragment>
+      <Flex
+          className={`add-on-${addOnAlignment} ${borderCss}`}
+          inline="flex-container"
+          vertical="center"
+      >
+        <If condition={addOnAlignment == 'left'}>
+          <Card
+              className={`${addOnDarkModeCardCss} add-on-card card-left-aligned`}
+              dark={dark}
+          >
+            {addOnIcon}
+          </Card>
+          {textInput}
+          <Else />
+          {textInput}
+          <Card
+              className={`${addOnDarkModeCardCss} add-on-card card-right-aligned`}
+              dark={dark}
+          >
+            {addOnIcon}
+          </Card>
+        </If>
+      </Flex>
+    </React.Fragment>
+  )
 
   return (
     <div
@@ -69,29 +130,17 @@ const TextInput = (
           dark={dark}
           text={label}
       />
-      <div className="text_input_wrapper">
-        <If condition={children}>
-          {children}
-          <Else />
-          <input
-              {...props}
-              className="text_input"
-              disabled={disabled}
-              id={id}
-              name={name}
-              onChange={onChange}
-              placeholder={placeholder}
-              ref={ref}
-              required={required}
-              type={type}
-              value={value}
+      <div className={`${addOnCss} text_input_wrapper`}>
+        <Choose>
+          <When condition={children}>{children}</When>
+          <When condition={shouldShowAddOn}>{addOnInput}</When>
+          <Otherwise>{textInput}</Otherwise>
+        </Choose>
+        <If condition={error}>
+          <Body
+              status="negative"
+              text={error}
           />
-          <If condition={error}>
-            <Body
-                status="negative"
-                text={error}
-            />
-          </If>
         </If>
       </div>
     </div>

data/app/pb_kits/playbook/pb_text_input/_text_input.scss

@@ -36,6 +36,16 @@
     }
   }
   &.dark {
+    .add_on_left {
+      .text_input {
+        border-left: 0;
+      }
+    }
+    .add_on_right {
+      .text_input {
+        border-right: 0;
+      }
+    }
     .text_input_wrapper {
       margin-bottom: 1rem;
       input::placeholder,
@@ -80,3 +90,91 @@
     }
   }
 }
+
+.text_input_wrapper_add_on {
+  & > [class^=pb_text_input_kit]:not(:last-child) {
+    .text_input_wrapper_add_on input, [class^=pb_text_input_kit] .text_input_wrapper_add_on .text_input {
+      border-bottom-right-radius: 0;
+      border-top-right-radius: 0;
+      border-right-width: 0;
+    }
+  }
+  .section-separator span {
+    padding: 0;
+  }
+
+  .add-on {
+    &-card {
+      height: 45px;
+      margin: 0;
+      padding: 0 !important;
+      align-items: center;
+      justify-content: center;
+      width: 45px;
+    }
+    &-icon {
+      color: $text_lt_lighter;
+    }
+    &-card-dark {
+      background-color: $bg-dark;
+    }
+    &-left {
+      .text_input {
+        border-top-left-radius: 0 !important;
+        border-bottom-left-radius: 0 !important;
+      }
+    }
+
+    &-right {
+      .text_input{
+        border-top-right-radius: 0 !important;
+        border-bottom-right-radius: 0 !important;
+      }
+    }
+  }
+  .text_input:focus ~ .add-on-card-dark {
+    background-color: $focus_input_dark;
+    border-width: 0px;
+  }
+
+  .card-left-aligned {
+    border-top-right-radius: 0 !important;
+    border-bottom-right-radius: 0 !important;
+  }
+
+  .card-right-aligned {
+    border-top-left-radius: 0 !important;
+    border-bottom-left-radius: 0 !important;
+  }
+
+  .border {
+    &_right_off {
+      .card-left-aligned {
+        border-right: 0;
+      }
+      .text_input {
+        border-left: 0 !important;
+        padding-left: 0 !important;
+      }
+    }
+    &_left_on {
+      .card-right-aligned {
+        border-left: 0;
+      }
+    }
+    &_right_on {
+      .card-left-aligned {
+        border-right: 0;
+      }
+    }
+    &_left_off {
+      .card-right-aligned {
+        border-left: 0;
+      }
+      .text_input {
+        border-right: 0 !important;
+        padding-right: 0 !important;
+      }
+    }
+  }
+}