playbook_ui 14.15.0.pre.alpha.PLAY1756pbcontenttagpt76661 → 14.15.0.pre.alpha.PLAY1756pbcontenttagpt76722

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_selectable_list.jsx

@@ -1,5 +1,7 @@
 import React, { useState } from "react";
-import { SelectableList, DraggableProvider } from "playbook-ui";
+
+import SelectableList from '../../pb_selectable_list/_selectable_list'
+import { DraggableProvider } from '../../pb_draggable/context'
 
 // Initial items to be dragged
 const data = [

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table_react.jsx

@@ -1,5 +1,10 @@
 import React, { useState } from "react";
-import { Flex, Table, Body, Avatar, DraggableProvider } from "playbook-ui";
+
+import Flex from '../../pb_flex/_flex'
+import { DraggableProvider } from '../../pb_draggable/context'
+import Avatar from '../../pb_avatar/_avatar'
+import Body from '../../pb_body/_body'
+import Table from '../../pb_table/_table'
 
 // Initial items to be dragged
 const data = [

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

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

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

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

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

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

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

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

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

@@ -1,5 +1,10 @@
 import React, { useState, useEffect } from "react"
-import { Button, Drawer, Icon, Nav, NavItem } from "playbook-ui"
+
+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'
 
 const DrawerMenu = () => {
   const [isSmallScreen, setIsSmallScreen] = useState(false)

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

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

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

@@ -1,5 +1,8 @@
 import React, { useState } from "react";
-import { Button, Drawer, Flex } from "playbook-ui";
+
+import Button from '../../pb_button/_button'
+import Drawer from '../../pb_drawer/_drawer'
+import Flex from '../../pb_flex/_flex'
 
 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 'playbook-ui'
+import Dropdown from '../../pb_dropdown/_dropdown'
 
 const DropdownBlankSelection = (props) => {
   const options = [

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

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

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

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

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

@@ -1,5 +1,9 @@
 import React from 'react'
-import { Dropdown, User, Badge, FlexItem } from 'playbook-ui'
+
+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'
 
 const DropdownWithAutocomplete = (props) => {
 

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

@@ -1,5 +1,11 @@
 import React, { useState } from 'react'
-import { Dropdown, User, Badge, FlexItem, Avatar } from 'playbook-ui'
+
+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'
+
 
 const DropdownWithAutocompleteAndCustomDisplay = (props) => {
   const [selectedOption, setSelectedOption] = useState();

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

@@ -1,5 +1,11 @@
 import React, { useState } from 'react'
-import { Dropdown, User, Flex, FlexItem, Badge, Avatar } from 'playbook-ui'
+
+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'
 
 const DropdownWithCustomDisplay = (props) => {
   const [selectedOption, setSelectedOption] = useState();

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

@@ -1,5 +1,11 @@
 import React from 'react'
-import { Dropdown, Icon, Body, FlexItem, Flex } from 'playbook-ui'
+
+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'
+
 
 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 'playbook-ui'
+import Dropdown from '../../pb_dropdown/_dropdown'
 
 const DropdownWithCustomPadding = (props) => {
 

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

@@ -1,5 +1,11 @@
 import React, { useState } from 'react'
-import { Dropdown, Icon, Body, FlexItem, Flex, IconCircle } from 'playbook-ui'
+
+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'
 
 const DropdownWithCustomTrigger = (props) => {
 

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

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

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

@@ -1,5 +1,12 @@
 import React, { useRef } from 'react'
-import { Dropdown, useDropdown, CircleIconButton, Icon, Body, FlexItem, Flex  } from 'playbook-ui'
+
+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'
 
 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 'playbook-ui'
+import Dropdown from '../../pb_dropdown/_dropdown'
 
 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,213 @@
+
+import React from "react"
+import ReactDOMServer from "react-dom/server"
+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"
+import computer from "./docs/default_image/utils"
+
+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: 1,
+          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 getSvgAsDataUrl = () => {
+      const svgString = ReactDOMServer.renderToStaticMarkup(computer)
+      const encodedSvg = encodeURIComponent(svgString)
+      return `data:image/svg+xml,${encodedSvg}`
+    }
+
+    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 === 'default' ? (
+            <Image
+                alt="test"
+                htmlOptions={{ width: configs.imageWidth, height: "auto", alignment: "start" }}
+                url={getSvgAsDataUrl()}
+            />
+          ) : image && 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="default"
+          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="default"
+          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="default"
+          primaryButton="Next Action"
+          size="md"
+      />
+  </Flex>
+)
+
+export default EmptyStateAlignment

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

@@ -0,0 +1,17 @@
+import React from 'react'
+import { EmptyState, Flex } from 'playbook-ui'
+
+const EmptyStateDefault = (props) => (
+  <Flex align="center"
+      orientation="column"
+  >
+    <EmptyState
+        {...props}
+        description="Body text goes into detail with possible steps for user to take"
+        header="Title Explains"
+        image="default"
+    />
+  </Flex>
+)
+
+export default EmptyStateDefault

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

@@ -0,0 +1,21 @@
+import React from 'react'
+import { EmptyState, Flex } from 'playbook-ui'
+
+const EmptyStateOrientation = (props) => (
+  <Flex align="center"
+      orientation="column"
+  >
+    <EmptyState
+        {...props}
+        alignment="left"
+        description="Body text goes into detail with possible steps for user to take"
+        header="Title Explains"
+        image="default"
+        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="default"
+          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="default"
+          linkButton="Alt Action"
+          onLinkButtonClick={() => alert("link button clicked!")}
+          onPrimaryButtonClick={() => alert("primary button clicked!")}
+          primaryButton="Next Action"
+          size="lg"
+      />
+  </Flex>
+)
+
+export default EmptyStateSize