playbook_ui 14.14.0 → 14.15.0.pre.alpha.play1910emptystatekitreactbeta6579

data/app/pb_kits/playbook/pb_empty_state/_empty_state.tsx

@@ -0,0 +1,199 @@
+
+import React from "react"
+import classnames from "classnames"
+import { buildAriaProps, buildCss, buildDataProps } from "../utilities/props"
+import { globalProps } from "../utilities/globalProps"
+import Title from "../pb_title/_title"
+import Body from "../pb_body/_body"
+import Button from "../pb_button/_button"
+import Detail from "../pb_detail/_detail"
+import Flex from "../pb_flex/_flex"
+import FlexItem from "../pb_flex/_flex_item"
+import Image from "../pb_image/_image"
+
+type EventHandler = (React.MouseEventHandler<HTMLElement>)
+
+type EmptyStateProps = {
+  aria?: { [key: string]: string },
+  alignment?: "center" | "left" | "right",
+  className?: string,
+  data?: { [key: string]: string },
+  description?: string,
+  header?: string,
+  id?: string,
+  image?: string,
+  linkButton?: string,
+  onLinkButtonClick?: EventHandler,
+  onPrimaryButtonClick?: EventHandler,
+  orientation?: "horizontal" | "vertical",
+  primaryButton?: string,
+  size?: "sm" | "md" | "lg",
+}
+
+const EmptyState = (props: EmptyStateProps) => {
+  const {
+    aria = {},
+    alignment = "center",
+    className,
+    data = {},
+    description,
+    header = "",
+    id,
+    image,
+    linkButton,
+    onLinkButtonClick,
+    onPrimaryButtonClick,
+    orientation = "vertical",
+    primaryButton,
+    size = "md",
+  } = props
+
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
+  const classes = classnames(buildCss("pb_empty_state_kit"), globalProps(props), className)
+
+  const renderContent = () => {
+    const sizeConfigs = {
+      sm: {
+        vertical: {
+          imageWidth: "100px",
+          titleSize: 4,
+          titlePadding: "xxs",
+          descriptionPadding: "sm",
+          buttonSize: "sm",
+          buttonMargin: "xs",
+          scssClassName: "sm-state-vertical",
+          column: "column",
+        },
+        horizontal: {
+          imageWidth: "100px",
+          titleSize: 4,
+          titlePadding: "xxs",
+          descriptionPadding: "sm",
+          buttonSize: "sm",
+          buttonMargin: "xs",
+          scssClassName: "sm-state-horizontal",
+          column: "",
+        },
+      },
+      md: {
+        vertical: {
+          imageWidth: "140px",
+          titleSize: 3,
+          titlePadding: "xs",
+          descriptionPadding: "md",
+          buttonSize: "md",
+          buttonMargin: "sm",
+          scssClassName: "md-state-vertical",
+          column: "column",
+        },
+        horizontal: {
+          imageWidth: "140px",
+          titleSize: 3,
+          titlePadding: "xs",
+          descriptionPadding: "md",
+          buttonSize: "md",
+          buttonMargin: "sm",
+          scssClassName: "md-state-horizontal",
+          column: "",
+        },
+      },
+      lg: {
+        vertical: {
+          imageWidth: "100%",
+          titleSize: 2,
+          titlePadding: "sm",
+          descriptionPadding: "lg",
+          buttonSize: "md",
+          buttonMargin: "md",
+          scssClassName: "lg-state-vertical",
+          column: "column",
+        },
+        horizontal: {
+          imageWidth: "100%",
+          titleSize: 2,
+          titlePadding: "sm",
+          descriptionPadding: "lg",
+          buttonSize: "md",
+          buttonMargin: "md",
+          scssClassName: "lg-state-horizontal",
+          column: "",
+        },
+      },
+    };
+
+    const configs = sizeConfigs[size]?.[orientation]
+    const alignFlex = alignment === "center" ? "center" : alignment === "right" ? "end" : "start"
+    const alignText = alignment === "center" ? "center" : alignment === "right" ? "right" : undefined
+
+
+    const layout = (
+      <div {...ariaProps}
+          {...dataProps}
+          className={classes}
+          id={id}
+      >
+        <Flex align={alignFlex}
+            className={configs.scssClassName}
+            orientation={configs.column as "column" | "row" | undefined}
+            paddingLeft="xl"
+            paddingRight="xl"
+            vertical="center"
+        >
+          { image ? (
+            <Image
+                alt="test"
+                htmlOptions={{ width: configs.imageWidth, height: "auto", alignment: "start" }}
+                url={image}
+            />
+          ) : null }
+
+          <FlexItem >
+            <Title paddingBottom={configs.titlePadding as "xxs" | "xs" | "sm" | undefined}
+                size={configs.titleSize as 1 | 2 | 3 | 4 | undefined}
+                text={header}
+                textAlign={alignText}
+            />
+
+            {size !== "sm" ? (
+              <Body paddingBottom={configs.descriptionPadding as "sm" | "md" | "lg" | undefined}
+                  text={description}
+                  textAlign={alignText}
+              />
+            ) : (
+              <Detail paddingBottom={configs.descriptionPadding as "sm" | "md" | "lg" | undefined}
+                  text={description}
+                  textAlign={alignText}
+              />
+            )}
+
+            { primaryButton ? (
+                <Button
+                    marginBottom={configs.buttonMargin as "xs" | "sm" | "md" | undefined}
+                    onClick={onPrimaryButtonClick}
+                    size={configs.buttonSize as "sm" | "md" | undefined}
+                    text={primaryButton}
+                    variant="primary"
+                    width="100%"
+                />
+            ) : null }
+
+            { linkButton ? (
+                <Button onClick={onLinkButtonClick}
+                    size={configs.buttonSize as "sm" | "md" | undefined}
+                    text={linkButton}
+                    variant="link"
+                    width="100%"
+                />
+            ) : null }
+
+          </FlexItem>
+        </Flex>
+      </div>
+    )
+    return layout
+  }
+  return renderContent()
+}
+
+export default EmptyState

data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_alignment.jsx

@@ -0,0 +1,38 @@
+import React from 'react'
+import { EmptyState, Flex } from 'playbook-ui'
+
+const EmptyStateAlignment = (props) => (
+  <Flex align="center"
+      spacing="evenly"
+  >
+      <EmptyState
+          {...props}
+          alignment="left"
+          description="Body text goes into detail with possible steps for user to take"
+          header="Title Explains"
+          image="https://component.gallery/static/8d36eaa25b6dcb026685101ebc379022/Empty%20state%20icon..svg"
+          primaryButton="Next Action"
+          size="md"
+      />
+      <EmptyState
+          {...props}
+          alignment="center"
+          description="Body text goes into detail with possible steps for user to take"
+          header="Title Explains"
+          image="https://component.gallery/static/8d36eaa25b6dcb026685101ebc379022/Empty%20state%20icon..svg"
+          primaryButton="Next Action"
+          size="md"
+      />
+      <EmptyState
+          {...props}
+          alignment="right"
+          description="Body text goes into detail with possible steps for user to take"
+          header="Title Explains"
+          image="https://component.gallery/static/8d36eaa25b6dcb026685101ebc379022/Empty%20state%20icon..svg"
+          primaryButton="Next Action"
+          size="md"
+      />
+  </Flex>
+)
+
+export default EmptyStateAlignment

data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_orientation.jsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import { EmptyState, Flex } from 'playbook-ui'
+
+const EmptyStateOrientation = (props) => (
+  <Flex align="center">
+    <EmptyState
+        {...props}
+        alignment="left"
+        description="Body text goes into detail with possible steps for user to take"
+        header="Title Explains"
+        image="https://component.gallery/static/8d36eaa25b6dcb026685101ebc379022/Empty%20state%20icon..svg"
+        orientation="horizontal"
+        primaryButton="Next Action"
+        size="lg"
+    />
+  </Flex>
+)
+
+export default EmptyStateOrientation

data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_size.jsx

@@ -0,0 +1,35 @@
+import React from 'react'
+import { EmptyState, Flex } from 'playbook-ui'
+
+const EmptyStateSize = (props) => (
+  <Flex align="center"
+      spacing="evenly"
+  >
+      <EmptyState
+          {...props}
+          alignment="center"
+          description="Body text goes into detail with possible steps for user to take"
+          header="Title Explains"
+          image="https://component.gallery/static/8d36eaa25b6dcb026685101ebc379022/Empty%20state%20icon..svg"
+          linkButton="Alt Action"
+          onLinkButtonClick={() => alert("link button clicked!")}
+          onPrimaryButtonClick={() => alert("primary button clicked!")}
+          primaryButton="Next Action"
+          size="sm"
+      />
+      <EmptyState
+          {...props}
+          alignment="center"
+          description="Body text goes into detail with possible steps for user to take"
+          header="Title Explains"
+          image="https://component.gallery/static/8d36eaa25b6dcb026685101ebc379022/Empty%20state%20icon..svg"
+          linkButton="Alt Action"
+          onLinkButtonClick={() => alert("link button clicked!")}
+          onPrimaryButtonClick={() => alert("primary button clicked!")}
+          primaryButton="Next Action"
+          size="lg"
+      />
+  </Flex>
+)
+
+export default EmptyStateSize

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

@@ -0,0 +1,7 @@
+examples:
+
+
+  react:
+  - empty_state_size: Size
+  - empty_state_orientation: Orientation
+  - empty_state_alignment: Alignment

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

@@ -0,0 +1,3 @@
+export { default as EmptyStateOrientation } from './_empty_state_orientation.jsx'
+export { default as EmptyStateSize } from './_empty_state_size.jsx'
+export { default as EmptyStateAlignment } from './_empty_state_alignment.jsx'

data/app/pb_kits/playbook/pb_empty_state/empty_state.test.jsx

@@ -0,0 +1,17 @@
+import React from 'react'
+import { render, screen } from '../utilities/test-utils'
+
+import { EmptyState } from 'playbook-ui'
+
+
+test('returns namespaced class name', () => {
+  render(
+    <EmptyState
+        data={{ testid: 'primary-test' }}
+        text="some text"
+    />
+  )
+
+  const kit = screen.getByTestId('primary-test')
+  expect(kit).toHaveClass('pb_empty_state_kit')
+})

data/app/pb_kits/playbook/pb_filter/Filter/CurrentFilters.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
-import { isEmpty, map, omitBy } from 'lodash'
+import { map } from 'lodash'
+import { isEmpty, omitBy } from '../../utilities/object'
 
 import Body from '../../pb_body/_body'
 import Caption from '../../pb_caption/_caption'
@@ -40,13 +41,13 @@ const CurrentFilters = ({ dark, filters }: CurrentFiltersProps): React.ReactElem
                   className="filter"
                   key={`filter-${name}`}
               >
-                { value === true ? 
+                { value === true ?
                 <Title
                     dark={dark}
                     size={4}
                     tag="h4"
                     text={name}
-                /> : 
+                /> :
                 <div>
                   <Caption
                       dark={dark}
@@ -58,7 +59,7 @@ const CurrentFilters = ({ dark, filters }: CurrentFiltersProps): React.ReactElem
                       tag="h4"
                       text={value}
                   />
-                </div>    
+                </div>
                 }
               </div>
             ))}

data/app/pb_kits/playbook/pb_filter/Filter/FilterSingle.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { isEmpty } from 'lodash'
+import { isEmpty } from '../../utilities/object'
 
 import Flex from '../../pb_flex/_flex'
 
@@ -46,7 +46,7 @@ const FilterSingle = ({
           paddingRight="lg"
           vertical="center"
       >
-        { children && 
+        { children &&
           <>
             <FiltersPopover
                 dark={dark}

data/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb

@@ -46,6 +46,7 @@
   %>
   <%= form.date_picker :example_date_picker_1, props: { label: true } %>
   <%= form.star_rating_field :example_star_rating, props: { variant: "interactive", label: true } %>
+  <%= form.time_zone_select_field :example_time_zone_select, ActiveSupport::TimeZone.us_zones, { default: "Eastern Time (US & Canada)" }, props: { label: true } %>
 
   <%= form.actions do |action| %>
     <%= action.submit %>

data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb

@@ -32,11 +32,12 @@
   <%= form.url_field :example_url_field_validation, props: { label: true, required: true } %>
   <%= form.text_area :example_text_area_validation, props: { label: true, required: true } %>
   <%= form.dropdown_field :example_dropdown_validation, props: { label: true, options: example_dropdown_options, required: true } %>
-  <%= form.select :example_select_validation, [ ["Yes", 1], ["No", 2] ], props: { label: true, blank_selection: "Select One...", required: true } %>
+  <%= form.select :example_select_validation, [ ["Yes", 1], ["No", 2] ], props: { label: true, blank_selection: "Select One...", required: true, validation_message: "Please, select an option." } %>
   <%= form.collection_select :example_collection_select_validation, example_collection, :value, :name, props: { label: true, blank_selection: "Select One...", required: true } %>
   <%= form.check_box :example_checkbox, props: { text: "Example Checkbox", label: true, required: true } %>
-  <%= form.date_picker :example_date_picker_2, props: { label: true, required: true } %>
+  <%= form.date_picker :example_date_picker_2, props: { label: true, required: true, validation_message: "Please, select a date.", allow_input: true } %>
   <%= form.star_rating_field :example_star_rating_validation, props: { variant: "interactive", label: true, required: true } %>
+  <%= form.time_zone_select_field :example_time_zone_select, ActiveSupport::TimeZone.us_zones, { default: "Eastern Time (US & Canada)" }, props: { label: true, blank_selection: "Select a Time Zone...", required: true } %>
 
   <%= form.actions do |action| %>
     <%= action.submit %>

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

@@ -23,6 +23,13 @@ $form_pill_colors: map-merge($status_color_text, map-merge($data_colors, $produc
   .pb_form_pill_text, .pb_form_pill_close, .pb_form_pill_tag{
     font-size: $font_small !important;
   }
+
+  &[class*=wrapped] {
+    height: max-content;
+    padding-top: $space-xxs;
+    padding-bottom: $space-xxs;
+  }
+
   @each $color_name, $color_value in $form_pill_colors {
     &[class*=_#{$color_name}]  {
       background-color: mix($color_value, $card_light, 10%);
@@ -142,7 +149,7 @@ $form_pill_colors: map-merge($status_color_text, map-merge($data_colors, $produc
     height: 12px !important;
     width: 12px !important;
     padding-right: $space_xs;
-    + .pb_form_pill_text, + .pb_form_pill_tag, 
+    + .pb_form_pill_text, + .pb_form_pill_tag,
     + .pb_tooltip_kit .pb_form_pill_text, + .pb_tooltip_kit .pb_form_pill_tag,
     + div .pb_form_pill_text, + div .pb_form_pill_tag {
       padding-left: 0;
@@ -171,7 +178,7 @@ $form_pill_colors: map-merge($status_color_text, map-merge($data_colors, $produc
     }
     .pb_form_pill_icon {
       padding-right: $space_xxs;
-      + .pb_form_pill_text, + .pb_form_pill_tag, 
+      + .pb_form_pill_text, + .pb_form_pill_tag,
       + .pb_tooltip_kit .pb_form_pill_text, + .pb_tooltip_kit .pb_form_pill_tag,
       + div .pb_form_pill_text, + div .pb_form_pill_tag {
         padding-left: 0;

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

@@ -22,6 +22,7 @@ type FormPillProps = {
   data?: {[key: string]: string},
   tabIndex?: number,
   icon?: string,
+  wrapped?: boolean,
   closeProps?: {
     onClick?: React.MouseEventHandler<HTMLSpanElement>,
     onMouseDown?: React.MouseEventHandler<HTMLSpanElement>,
@@ -38,6 +39,7 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
     onClick = () => undefined,
     avatarUrl,
     closeProps = {},
+    wrapped,
     size = '',
     textTransform = 'none',
     color = "primary",
@@ -48,6 +50,7 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
 
   const iconClass = icon ? "_icon" : ""
   const closeIconSize = size === "small" ? "xs" : "sm"
+  const wrappedClass = wrapped ? "wrapped" : ""
 
   const filteredProps: FormPillProps = {...props}
   delete filteredProps.truncate
@@ -55,6 +58,7 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
   const css = classnames(
     `pb_form_pill_kit_${color}${iconClass}`,
     globalProps(filteredProps),
+    wrappedClass,
     className,
     size === 'small' ? 'small' : null,
     textTransform,

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

@@ -0,0 +1,40 @@
+<%
+  names = [
+    { label: 'Alexander Nathaniel Montgomery', value: 'Alexander Nathaniel Montgomery' },
+    { label: 'Isabella Anastasia Wellington', value: 'Isabella Anastasia Wellington' },
+    { label: 'Christopher Maximilian Harrington', value: 'Christopher Maximilian Harrington' },
+    { label: 'Elizabeth Seraphina Kensington', value: 'Elizabeth Seraphina Kensington' },
+    { label: 'Theodore Jonathan Abernathy', value: 'Theodore Jonathan Abernathy' },
+  ]
+%>
+
+<%= pb_rails("typeahead", props: {
+    html_options: { style: { maxWidth: "240px" }},
+    id: "typeahead-form-pill",
+    is_multi: true,
+    options: names,
+    label: "Wrapped Within Typeahead",
+    pills: true,
+    wrapped: true,
+}) %>
+
+<%= pb_rails("caption", props: { text: "Form Pill Wrapped Text" }) %>
+<%= pb_rails("card", props: { max_width: "xs" })  do %>
+  <%= pb_rails("form_pill", props: {
+      name: "Princess Amelia Mignonette Grimaldi Thermopolis Renaldo",
+      avatar_url: "https://randomuser.me/api/portraits/women/44.jpg",
+      tabindex: 0,
+      wrapped: true,
+  }) %>
+  <%= pb_rails("form_pill", props: {
+      icon: "badge-check",
+      text: "icon and a very long tag to show wrapped text",
+      tabindex: 0,
+      wrapped: true,
+  }) %>
+  <%= pb_rails("form_pill", props: {
+      text: "form pill long tag no tooltip show wrapped text",
+      tabindex: 0,
+      wrapped: true,
+  }) %>
+<% end %>

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

@@ -0,0 +1,50 @@
+import React from 'react'
+import { Card, Caption, FormPill, Typeahead } from 'playbook-ui'
+
+const names = [
+  { label: 'Alexander Nathaniel Montgomery', value: 'Alexander Nathaniel Montgomery' },
+  { label: 'Isabella Anastasia Wellington', value: 'Isabella Anastasia Wellington' },
+  { label: 'Christopher Maximilian Harrington', value: 'Christopher Maximilian Harrington' },
+  { label: 'Elizabeth Seraphina Kensington', value: 'Elizabeth Seraphina Kensington' },
+  { label: 'Theodore Jonathan Abernathy', value: 'Theodore Jonathan Abernathy' },
+]
+
+const FormPillWrapped = (props) => {
+  return (
+    <>
+      <Typeahead
+          htmlOptions={{ style: { maxWidth: "240px" } }}
+          isMulti
+          label="Wrapped Within Typeahead"
+          options={names}
+          wrapped
+          {...props}
+      />
+      <Caption text="Form Pill Wrapped Text"/>
+      <Card maxWidth="xs">
+        <FormPill
+            avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
+            name="Princess Amelia Mignonette Grimaldi Thermopolis Renaldo"
+            onClick={() => alert('Click!')}
+            tabIndex={0}
+            wrapped
+        />
+        <FormPill
+            icon="badge-check"
+            onClick={() => {alert('Click!')}}
+            tabIndex={0}
+            text="icon and a very long tag to show wrapped text"
+            wrapped
+        />
+        <FormPill
+            onClick={() => {alert('Click!')}}
+            tabIndex={0}
+            text="form pill with a very long tag to show wrapped text"
+            wrapped
+        />
+      </Card>
+    </>
+  )
+}
+
+export default FormPillWrapped

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_wrapped.md

@@ -0,0 +1,3 @@
+For Form Pills with longer text, the `wrapped` prop can be used to wrap the label within each Form Pill.
+
+**Note**: Avoid using the `wrapped` and `small` props together, as their styles conflict and may cause functionality issues.

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

@@ -4,6 +4,7 @@ examples:
   - form_pill_user: Form Pill User
   - form_pill_size: Form Pill Size
   - form_pill_truncated_text: Truncated Text
+  - form_pill_wrapped: Wrapped Text
   - form_pill_tag: Form Pill Tag
   - form_pill_example: Example
   - form_pill_icon: Form Pill Icon
@@ -13,6 +14,7 @@ examples:
   - form_pill_user: Form Pill User
   - form_pill_size: Form Pill Size
   - form_pill_truncated_text: Truncated Text
+  - form_pill_wrapped: Wrapped Text
   - form_pill_tag: Form Pill Tag
   - form_pill_example: Example
   - form_pill_icon: Form Pill Icon

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

@@ -5,3 +5,4 @@ export { default as FormPillExample } from './_form_pill_example.jsx'
 export { default as FormPillIcon } from './_form_pill_icon.jsx'
 export { default as FormPillColors } from './_form_pill_colors.jsx'
 export { default as FormPillTruncatedText } from './_form_pill_truncated_text.jsx'
+export { default as FormPillWrapped } from './_form_pill_wrapped.jsx'

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

@@ -16,9 +16,11 @@ module Playbook
                    default: "primary"
       prop :tabindex
       prop :icon
+      prop :wrapped, type: Playbook::Props::Boolean,
+                     default: false
 
       def classname
-        generate_classname("pb_form_pill_kit", color, icon_class, name, text, text_transform)
+        generate_classname("pb_form_pill_kit", color, icon_class, name, text, text_transform, wrapped_class)
       end
 
       def display_text
@@ -36,6 +38,10 @@ module Playbook
       def close_icon_size
         size == "small" ? "xs" : "sm"
       end
+
+      def wrapped_class
+        wrapped ? "wrapped" : nil
+      end
     end
   end
 end