playbook_ui 9.11.0 → 9.14.1.alpha.radio.alignment

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

@@ -1,13 +1,17 @@
 <%= content_tag(:div,
     id: object.id,
     data: object.data,
-    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 }) %>
+    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 }) %>
       <% end %>
-      <%= pb_rails("flex/flex_item") do %>
-        <%= pb_rails("time_stacked", props: { classname: "pb_date_time_stacked_kit", time: object.date, tag: "caption" }) %>
+      <%= 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 }) %>
       <% end %>
-    <% end %>
-<% end %>
+  <% end %>
+
+<% end %>

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

@@ -14,6 +14,7 @@ type FormPillProps = {
   onClick?: EventHandler,
   avatar?: boolean,
   avatarUrl?: string,
+  size?: string,
   closeProps?: {
     onClick?: EventHandler,
     onMouseDown?: EventHandler,
@@ -21,11 +22,20 @@ type FormPillProps = {
   },
 }
 const FormPill = (props: FormPillProps) => {
-  const { className, text, name, onClick = () => {}, avatarUrl, closeProps = {} } = props
+  const {
+    className,
+    text,
+    name,
+    onClick = () => {},
+    avatarUrl,
+    closeProps = {},
+    size = '',
+  } = props
   const css = classnames(
     `pb_form_pill_kit_${'primary'}`,
     globalProps(props),
-    className
+    className,
+    size === 'small' ? 'small' : null,
   )
   return (
     <div className={css}>

data/app/pb_kits/playbook/pb_form_pill/_form_pill.scss

@@ -51,4 +51,23 @@ $form_pill_colors: (
       }
     }
   }
+  &.small {
+    height: fit-content;
+    height: -moz-fit-content;
+    .pb_form_pill_text, .pb_form_pill_close, .pb_form_pill_tag {
+      font-size: 16px;
+      font-weight: 400;
+    }
+    .pb_form_pill_text, .pb_form_pill_tag {
+      line-height: 1.7;
+      padding-left: $space_xs;
+      padding-right: 2px;
+    }
+    [class^=pb_avatar_kit], [class^=pb_avatar_kit] .avatar_wrapper {
+      width: 20px;
+      height: 20px;
+      flex-basis: 20px;
+      &::before { line-height: 21px; }
+    }
+  }
 }

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_size.html.erb

@@ -0,0 +1,13 @@
+<%= pb_rails("form_pill", props: {
+   name: "Anna Black",
+   avatar_url: "https://randomuser.me/api/portraits/women/44.jpg",
+   size: "small",
+}) %>
+
+<br />
+<br />
+
+<%= pb_rails("form_pill", props: {
+   name: "Anna Black",
+   size: "small",
+}) %>

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_size.jsx

@@ -0,0 +1,25 @@
+import React from 'react'
+import FormPill from '../_form_pill.jsx'
+
+const FormPillSize = (props) => {
+  return (
+
+    <div>
+      <FormPill
+          avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
+          name="Anna Black"
+          size="small"
+          {...props}
+      />
+      <br />
+      <br />
+      <FormPill
+          name="Anna Black"
+          size="small"
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default FormPillSize

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_user.html.erb

@@ -1,12 +1,11 @@
 <%= pb_rails("form_pill", props: {
    name: "Anna Black",
    avatar_url: "https://randomuser.me/api/portraits/women/44.jpg",
+}) %>
 
-   }) %>
-
-<br>
-<br>
+<br />
+<br />
 
 <%= pb_rails("form_pill", props: {
    name: "Anna Black",
-   }) %>
+}) %>

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_user.jsx

@@ -8,18 +8,14 @@ const FormPillDefault = (props) => {
       <FormPill
           avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
           name="Anna Black"
-          onClick={() => {
- alert('Click!')
-}}
+          onClick={() => alert('Click!')}
           {...props}
       />
       <br />
       <br />
       <FormPill
           name="Anna Black"
-          onClick={() => {
- alert('Click!')
-}}
+          onClick={() => alert('Click!')}
           {...props}
       />
     </div>

data/app/pb_kits/playbook/pb_form_pill/docs/example.yml

@@ -2,9 +2,11 @@ examples:
 
   rails:
   - form_pill_user: Form Pill User
+  - form_pill_size: Form Pill Size
   - form_pill_tag: Form Pill Tag
 
 
   react:
   - form_pill_user: Form Pill User
+  - form_pill_size: Form Pill Size
   - form_pill_tag: Form Pill Tag

data/app/pb_kits/playbook/pb_form_pill/docs/index.js

@@ -1,2 +1,3 @@
 export { default as FormPillUser } from './_form_pill_user.jsx'
+export { default as FormPillSize } from './_form_pill_size.jsx'
 export { default as FormPillTag } from './_form_pill_tag.jsx'

data/app/pb_kits/playbook/pb_form_pill/form_pill.html.erb

@@ -1,7 +1,7 @@
 <%= content_tag(:div,
     id: object.id,
     data: object.data,
-    class: object.classname) do %>
+    class: object.classname + object.size_class) do %>
     <% if object.name.present? %>
       <%= pb_rails("avatar", props: {
         name: object.name,

data/app/pb_kits/playbook/pb_form_pill/form_pill.rb

@@ -6,6 +6,7 @@ module Playbook
       prop :avatar_url
       prop :name
       prop :text
+      prop :size
 
       def classname
         generate_classname("pb_form_pill_kit", "primary", name, text)
@@ -14,6 +15,10 @@ module Playbook
       def display_text
         name.downcase
       end
+
+      def size_class
+        size == "small" ? " small" : ""
+      end
     end
   end
 end

data/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.scss

@@ -16,7 +16,7 @@
   position: relative;
   flex-shrink: 0;
   flex-grow: 0;
-  .pb_multiple_users_stacked_item {
+  [class^=pb_avatar_kit].pb_multiple_users_stacked_item {
     height: $stacked_size;
     width: $stacked_size;
       &.dark {
@@ -41,13 +41,17 @@
       height: $container_size;
     }
   }
-  .second_item {
+  [class^=pb_avatar_kit].second_item, [class^=pb_badge_kit].second_item {
     position: absolute;
     bottom: 0;
     right: 0;
     z-index: 2;
     background: tint($primary, 90%);
     border-radius: $border_rad_mega;
+    padding: 0;
+    span {
+      transform: translateY(0);
+    }
     .avatar_wrapper {
       border: $border_size solid $white;
       height: $stacked_size;

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,11 @@ const Passphrase = (props: PassphraseProps) => {
           />
           <If condition={tips.length > 0 && !confirmation}>
             <PbReactPopover
+                className="passphrase-tips"
+                closeOnClick="outside"
                 placement="right"
                 reference={popoverReference}
+                shouldClosePopover={handleShouldClosePopover}
                 show={showPopover}
             >
               <Flex