playbook_ui 14.15.0.pre.alpha.play1907passglobalpropstotooltiprails6706 → 14.15.0.pre.alpha.play1910emptystatekitreactbeta6579

data/app/pb_kits/playbook/pb_drawer/docs/_drawer_breakpoints.jsx

@@ -1,6 +1,5 @@
 import React from "react"
-import Button from '../../pb_button/_button'
-import Body from "../../pb_body/_body"
+import { Button, Body } from "playbook-ui"
 
 const DrawerMenu = () => {
   return (

data/app/pb_kits/playbook/pb_drawer/docs/_drawer_default.jsx

@@ -1,8 +1,5 @@
 import React, { useState } from "react";
-
-import Button from '../../pb_button/_button'
-import Drawer from '../../pb_drawer/_drawer'
-import Flex from '../../pb_flex/_flex'
+import { Button, Drawer, Flex } from "playbook-ui";
 
 const useDrawer = (visible = false) => {
   const [opened, setOpened] = useState(visible);

data/app/pb_kits/playbook/pb_drawer/docs/_drawer_menu.jsx

@@ -1,10 +1,5 @@
 import React, { useState, useEffect } from "react"
-
-import Button from '../../pb_button/_button'
-import Drawer from '../../pb_drawer/_drawer'
-import Icon from '../../pb_icon/_icon'
-import Nav from '../../pb_nav/_nav'
-import NavItem from '../../pb_nav/_item'
+import { Button, Drawer, Icon, Nav, NavItem } from "playbook-ui"
 
 const DrawerMenu = () => {
   const [isSmallScreen, setIsSmallScreen] = useState(false)

data/app/pb_kits/playbook/pb_drawer/docs/_drawer_overlay.jsx

@@ -1,8 +1,5 @@
 import React, { useState } from "react"
-
-import Button from '../../pb_button/_button'
-import Drawer from '../../pb_drawer/_drawer'
-import Flex from '../../pb_flex/_flex'
+import { Button, Drawer, Flex } from "playbook-ui"
 
 const DrawerSizes = () => {
   // Individual state variables for each drawer size

data/app/pb_kits/playbook/pb_drawer/docs/_drawer_sizes.jsx

@@ -1,8 +1,5 @@
 import React, { useState } from "react";
-
-import Button from '../../pb_button/_button'
-import Drawer from '../../pb_drawer/_drawer'
-import Flex from '../../pb_flex/_flex'
+import { Button, Drawer, Flex } from "playbook-ui";
 
 const DrawerSizes = () => {
   // Individual state variables for each drawer size

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_blank_selection.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import Dropdown from '../../pb_dropdown/_dropdown'
+import { Dropdown } from 'playbook-ui'
 
 const DropdownBlankSelection = (props) => {
   const options = [

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_clear_selection.jsx

@@ -1,7 +1,5 @@
 import React, { useRef } from 'react'
-
-import Button from '../../pb_button/_button'
-import Dropdown from '../../pb_dropdown/_dropdown'
+import { Button, Dropdown } from 'playbook-ui'
 
 const options = [
     {

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import Dropdown from '../../pb_dropdown/_dropdown'
+import { Dropdown } from 'playbook-ui'
 
 const DropdownDefault = (props) => {
 

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default_value.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import Dropdown from '../../pb_dropdown/_dropdown'
+import { Dropdown } from 'playbook-ui'
 
 const DropdownDefaultValue = (props) => {
   const options = [

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_error.jsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import Dropdown from '../../pb_dropdown/_dropdown'
+import { Dropdown } from 'playbook-ui'
 
 const DropdownError = (props) => {
     const [selectedOption, setSelectedOption] = useState()

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_separators_hidden.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import Dropdown from '../../pb_dropdown/_dropdown'
+import { Dropdown } from 'playbook-ui'
 
 const DropdownSeparatorsHidden = (props) => {
 

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subcomponent_structure.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import Dropdown from '../../pb_dropdown/_dropdown'
+import { Dropdown } from 'playbook-ui'
 
 const DropdownSubcomponentStructure = (props) => {
 

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subtle_variant.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import Dropdown from '../../pb_dropdown/_dropdown'
+import { Dropdown } from 'playbook-ui'
 
 const DropdownSubtleVariant = (props) => {
 

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete.jsx

@@ -1,9 +1,5 @@
 import React from 'react'
-
-import Dropdown from '../../pb_dropdown/_dropdown'
-import Badge from '../../pb_badge/_badge'
-import FlexItem from '../../pb_flex/_flex_item'
-import User from '../../pb_user/_user'
+import { Dropdown, User, Badge, FlexItem } from 'playbook-ui'
 
 const DropdownWithAutocomplete = (props) => {
 

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_and_custom_display.jsx

@@ -1,11 +1,5 @@
 import React, { useState } from 'react'
-
-import Dropdown from '../../pb_dropdown/_dropdown'
-import Badge from '../../pb_badge/_badge'
-import FlexItem from '../../pb_flex/_flex_item'
-import Avatar from '../../pb_avatar/_avatar'
-import User from '../../pb_user/_user'
-
+import { Dropdown, User, Badge, FlexItem, Avatar } from 'playbook-ui'
 
 const DropdownWithAutocompleteAndCustomDisplay = (props) => {
   const [selectedOption, setSelectedOption] = useState();

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.jsx

@@ -1,11 +1,5 @@
 import React, { useState } from 'react'
-
-import Dropdown from '../../pb_dropdown/_dropdown'
-import Badge from '../../pb_badge/_badge'
-import Flex from '../../pb_flex/_flex'
-import FlexItem from '../../pb_flex/_flex_item'
-import Avatar from '../../pb_avatar/_avatar'
-import User from '../../pb_user/_user'
+import { Dropdown, User, Flex, FlexItem, Badge, Avatar } from 'playbook-ui'
 
 const DropdownWithCustomDisplay = (props) => {
   const [selectedOption, setSelectedOption] = useState();

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options.jsx

@@ -1,11 +1,5 @@
 import React from 'react'
-
-import Dropdown from '../../pb_dropdown/_dropdown'
-import FlexItem from '../../pb_flex/_flex_item'
-import Icon from '../../pb_icon/_icon'
-import Body from '../../pb_body/_body'
-import Flex from '../../pb_flex/_flex'
-
+import { Dropdown, Icon, Body, FlexItem, Flex } from 'playbook-ui'
 
 const DropdownWithCustomOptions = (props) => {
 

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_padding.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import Dropdown from '../../pb_dropdown/_dropdown'
+import { Dropdown } from 'playbook-ui'
 
 const DropdownWithCustomPadding = (props) => {
 

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger.jsx

@@ -1,11 +1,5 @@
 import React, { useState } from 'react'
-
-import Dropdown from '../../pb_dropdown/_dropdown'
-import FlexItem from '../../pb_flex/_flex_item'
-import Icon from '../../pb_icon/_icon'
-import Body from '../../pb_body/_body'
-import Flex from '../../pb_flex/_flex'
-import IconCircle from '../../pb_icon_circle/_icon_circle'
+import { Dropdown, Icon, Body, FlexItem, Flex, IconCircle } from 'playbook-ui'
 
 const DropdownWithCustomTrigger = (props) => {
 

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_external_control.jsx

@@ -1,9 +1,5 @@
 import React from 'react'
-
-import Dropdown from '../../pb_dropdown/_dropdown'
-import useDropdown from '../../pb_dropdown/hooks/useDropdown'
-
-import Button from '../../pb_button/_button'
+import { Dropdown, useDropdown, Button } from 'playbook-ui'
 
 const DropdownWithExternalControl = (props) => {
 const [isDropDownClosed, setIsDropdownClosed] = useDropdown(true);

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_hook.jsx

@@ -1,12 +1,5 @@
 import React, { useRef } from 'react'
-
-import Dropdown from '../../pb_dropdown/_dropdown'
-import useDropdown from '../../pb_dropdown/hooks/useDropdown'
-import CircleIconButton from '../../pb_circle_icon_button/_circle_icon_button'
-import FlexItem from '../../pb_flex/_flex_item'
-import Icon from '../../pb_icon/_icon'
-import Body from '../../pb_body/_body'
-import Flex from '../../pb_flex/_flex'
+import { Dropdown, useDropdown, CircleIconButton, Icon, Body, FlexItem, Flex  } from 'playbook-ui'
 
 const DropdownWithHook = (props) => {
 const [isDropDownClosed, setIsDropdownClosed] = useDropdown(true);

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import Dropdown from '../../pb_dropdown/_dropdown'
+import { Dropdown } from 'playbook-ui'
 
 const DropdownDefault = (props) => {
 

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

@@ -0,0 +1,38 @@
+.pb_empty_state_kit {
+
+  .sm-state-vertical {
+    width: 150px;
+  }
+
+  .md-state-vertical {
+    width: 300px;
+  }
+
+  .lg-state-vertical {
+    width: 450px;
+  }
+
+  .sm-state-horizontal {
+    width: max-content;
+    max-width: 400px;
+    .pb_flex_item_kit {
+      align-self: end;
+    }
+  }
+
+  .md-state-horizontal {
+    width: max-content;
+    max-width: 600px;
+    .pb_flex_item_kit {
+      align-self: end;
+    }
+  }
+
+  .lg-state-horizontal {
+    width: max-content;
+    .pb_flex_item_kit {
+      align-self: end;
+    }
+  }
+
+}

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_file_upload/docs/_file_upload_accept.jsx

@@ -1,9 +1,10 @@
 
 import React, { useState } from 'react'
-
-import FileUpload from '../../pb_file_upload/_file_upload'
-import List from '../../pb_list/_list'
-import ListItem from '../../pb_list/_list_item'
+import {
+  FileUpload,
+  List,
+  ListItem,
+} from 'playbook-ui'
 
 const AcceptedFilesList = ({ files }) => (
   <List>

data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_custom_description.jsx

@@ -1,9 +1,7 @@
 /* eslint-disable react/no-multi-comp */
 
 import React, { useState } from "react";
-import FileUpload from '../../pb_file_upload/_file_upload'
-import List from '../../pb_list/_list'
-import ListItem from '../../pb_list/_list_item'
+import { FileUpload, List, ListItem } from "playbook-ui";
 
 const AcceptedFilesList = ({ files }) => (
   <List>

data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_custom_message.jsx

@@ -1,8 +1,10 @@
 
 import React, { useState } from 'react'
-import FileUpload from '../../pb_file_upload/_file_upload'
-import List from '../../pb_list/_list'
-import ListItem from '../../pb_list/_list_item'
+import {
+  FileUpload,
+  List,
+  ListItem,
+} from 'playbook-ui'
 
 const AcceptedFilesList = ({ files }) => (
   <List>

data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_default.jsx

@@ -1,8 +1,10 @@
 
 import React, { useState } from 'react'
-import FileUpload from '../../pb_file_upload/_file_upload'
-import List from '../../pb_list/_list'
-import ListItem from '../../pb_list/_list_item'
+import {
+  FileUpload,
+  List,
+  ListItem,
+} from 'playbook-ui'
 
 const AcceptedFilesList = ({ files }) => (
   <List>