playbook_ui 14.15.0.pre.alpha.play1854reacthookmultilvlselect6572 → 14.15.0.pre.alpha.play1910emptystatekitreactbeta6579

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 490e06dd4cafd132cf385ecbb9c648ba507870bc063cbcd04f3c079be70dad6e
-  data.tar.gz: 5bdf49498aca37b53ca14af0895ad20676e22bebdb97d988c8f2e9f9ed8e300a
+  metadata.gz: a4b6fab9ece5fae4518e897b8210410b09d0e556020f43189ba301003be177e1
+  data.tar.gz: e0edb633f206fa6120fc1ffec4abf63481818afef913b8cf1cbfb9200e8ed4ff
 SHA512:
-  metadata.gz: 8b7ba9cdef8ac50cb46523b4f9f12273639fcfc389641803959b5a231633346336ca90bea21e72601528b80a3122fffb22865f5542b5c41a23c3b8ddc01a3e23
-  data.tar.gz: 3d2a14ba0096a4cf98b164ffa456168834219f9d087b22d3067939237d021e7f9726238c4e51319f63c9a63645cff456a54aa12a4b0da703117b9c9da20e7e8b
+  metadata.gz: 8c868d18999ce1bdff2d2bad36eebf0fe83debdd6527e0fbe8dccfb0cc2d2d2d8573c78f47a8cf3bf3f2c216f20f3e7bfaa2e4ffd4ef1a931b2a28392b216843
+  data.tar.gz: a4bf1483d2e93163ca1e6b30088a6783696dee5d39f0f05075c4db4f48ca2ccaa5d53cd6a8afb7da3941b2c50dc64806e13e167839ee2065d70ea9053076d9db

data/app/pb_kits/playbook/_playbook.scss

@@ -1,4 +1,5 @@
 
+
 @import 'pb_advanced_table/advanced_table';
 @import 'pb_avatar/avatar';
 @import 'pb_background/background';
@@ -14,8 +15,8 @@
 @import 'pb_circle_chart/circle_chart';
 @import 'pb_circle_icon_button/circle_icon_button';
 @import 'pb_collapsible/collapsible';
-@import 'pb_copy_button/copy_button';
 @import 'pb_contact/contact';
+@import 'pb_copy_button/copy_button';
 @import 'pb_currency/currency';
 @import 'pb_dashboard_value/dashboard_value';
 @import 'pb_date/date';
@@ -45,6 +46,7 @@
 @import 'pb_highlight/highlight';
 @import 'pb_home_address_street/home_address_street';
 @import 'pb_icon/icon';
+@import 'pb_icon_button/icon_button';
 @import 'pb_icon_circle/icon_circle';
 @import 'pb_icon_stat_value/icon_stat_value';
 @import 'pb_icon_value/icon_value';
@@ -109,7 +111,7 @@
 @import 'pb_user_badge/user_badge';
 @import 'pb_walkthrough/walkthrough';
 @import 'pb_weekday_stacked/weekday_stacked';
-@import 'pb_icon_button/icon_button';
+@import 'pb_empty_state/empty_state';
 @import 'utilities/mixins';
 @import 'utilities/spacing';
 @import 'utilities/cursor';

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_multi_level_select/_multi_level_select.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef, forwardRef } from "react";
+import React, { useState, useEffect, useRef } from "react";
 import classnames from "classnames";
 import { globalProps, GlobalProps } from "../utilities/globalProps";
 import {
@@ -23,13 +23,6 @@ import {
   getExpandedItems,
 } from "./_helper_functions";
 
-interface MultiLevelSelectComponent
-  extends React.ForwardRefExoticComponent<
-    MultiLevelSelectProps & React.RefAttributes<HTMLInputElement>
-  > {
-  Options: typeof MultiLevelSelectOptions;
-}
-
 type MultiLevelSelectProps = {
   aria?: { [key: string]: string }
   className?: string
@@ -42,7 +35,6 @@ type MultiLevelSelectProps = {
   name?: string
   returnAllSelected?: boolean
   treeData?: { [key: string]: string; }[] | any
-  onChange?: (event: { target: { name?: string; value: any } }) => void
   onSelect?: (prop: { [key: string]: any }) => void
   selectedIds?: string[] | any
   variant?: "multi" | "single"
@@ -50,7 +42,7 @@ type MultiLevelSelectProps = {
   pillColor?: "primary" | "neutral" | "success" | "warning" | "error" | "info" | "data_1" | "data_2" | "data_3" | "data_4" | "data_5" | "data_6" | "data_7" | "data_8" | "windows" | "siding" | "roofing" | "doors" | "gutters" | "solar" | "insulation" | "accessories",
 } & GlobalProps
 
-const MultiLevelSelect = forwardRef<HTMLInputElement, MultiLevelSelectProps>((props) => {
+const MultiLevelSelect = (props: MultiLevelSelectProps) => {
   const {
     aria = {},
     className,
@@ -63,7 +55,6 @@ const MultiLevelSelect = forwardRef<HTMLInputElement, MultiLevelSelectProps>((pr
     name,
     returnAllSelected = false,
     treeData,
-    onChange = () => null,
     onSelect = () => null,
     selectedIds,
     variant = "multi",
@@ -296,10 +287,8 @@ const MultiLevelSelect = forwardRef<HTMLInputElement, MultiLevelSelectProps>((pr
     // Logic for removing items from returnArray or defaultReturn when pills clicked
     if (returnAllSelected) {
       onSelect(getCheckedItems(updatedTree));
-      onChange({ target: { name, value: getCheckedItems(updatedTree) } });
     } else {
       onSelect(getDefaultCheckedItems(updatedTree));
-      onChange({ target: { name, value: getDefaultCheckedItems(updatedTree) } });
     }
   };
 
@@ -325,10 +314,8 @@ const MultiLevelSelect = forwardRef<HTMLInputElement, MultiLevelSelectProps>((pr
     const updatedTree = changeItem(filtered[0], check);
     if (returnAllSelected) {
       onSelect(getCheckedItems(updatedTree));
-      onChange({ target: { name, value: getCheckedItems(updatedTree) } });
     } else {
       onSelect(getDefaultCheckedItems(updatedTree));
-      onChange({ target: { name, value: getDefaultCheckedItems(updatedTree) } });
     }
   };
 
@@ -361,7 +348,6 @@ const MultiLevelSelect = forwardRef<HTMLInputElement, MultiLevelSelectProps>((pr
     setIsDropdownClosed(true);
 
     onSelect(selectedItem);
-    onChange({ target: { name, value: selectedItem } });
   };
 
   // Single select: reset the tree state upon typing
@@ -403,12 +389,12 @@ const MultiLevelSelect = forwardRef<HTMLInputElement, MultiLevelSelectProps>((pr
   // Rendering formattedData to UI based on typeahead
   const renderNestedOptions = (items: { [key: string]: string; }[] | any ) => {
     const hasOptionsChild = React.Children.toArray(props.children).some(
-      (child) => React.isValidElement(child) && child.type === MultiLevelSelect.Options
+      (child: any) => child.type === MultiLevelSelect.Options
     );
 
     if (hasOptionsChild) {
       return React.Children.map(props.children, (child) => {
-        if (React.isValidElement(child) && child.type === MultiLevelSelect.Options) {
+        if (child.type === MultiLevelSelect.Options) {
           return React.cloneElement(child, { items });
         }
         return null;
@@ -561,9 +547,8 @@ const MultiLevelSelect = forwardRef<HTMLInputElement, MultiLevelSelectProps>((pr
       </MultiLevelSelectContext.Provider>
     </div>
   );
-}) as MultiLevelSelectComponent;
+};
 
-MultiLevelSelect.displayName = "MultiLevelSelect";
 MultiLevelSelect.Options = MultiLevelSelectOptions;
 
 export default MultiLevelSelect;

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

@@ -12,7 +12,6 @@ examples:
 
   react:
   - multi_level_select_default: Default
-  - multi_level_select_react_hook: React Hook
   - multi_level_select_single: Single Select
   - multi_level_select_single_children_only: Single Select w/ Hidden Radios
   - multi_level_select_return_all_selected: Return All Selected

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

@@ -7,4 +7,3 @@ export { default as MultiLevelSelectColor } from './_multi_level_select_color.js
 export { default as MultiLevelSelectWithChildren } from './_multi_level_select_with_children.jsx'
 export { default as MultiLevelSelectWithChildrenWithRadios } from './_multi_level_select_with_children_with_radios.jsx'
 export { default as MultiLevelSelectDisabled } from './_multi_level_select_disabled.jsx'
-export { default as MultiLevelSelectReactHook  } from './_multi_level_select_react_hook.jsx'