playbook_ui 14.15.0.pre.alpha.play1910emptystatekitreactbeta6579 → 14.15.0.pre.alpha.play1917lodashremoval2of36615

data/lib/playbook/version.rb

@@ -2,5 +2,5 @@
 
 module Playbook
   PREVIOUS_VERSION = "14.15.0"
-  VERSION = "14.15.0.pre.alpha.play1910emptystatekitreactbeta6579"
+  VERSION = "14.15.0.pre.alpha.play1917lodashremoval2of36615"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 14.15.0.pre.alpha.play1910emptystatekitreactbeta6579
+  version: 14.15.0.pre.alpha.play1917lodashremoval2of36615
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2025-03-10 00:00:00.000000000 Z
+date: 2025-03-11 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -1308,14 +1308,6 @@ files:
 - app/pb_kits/playbook/pb_dropdown/utilities/clickOutsideHelper.tsx
 - app/pb_kits/playbook/pb_dropdown/utilities/index.ts
 - app/pb_kits/playbook/pb_dropdown/utilities/subComponentHelper.tsx
-- app/pb_kits/playbook/pb_empty_state/_empty_state.scss
-- app/pb_kits/playbook/pb_empty_state/_empty_state.tsx
-- app/pb_kits/playbook/pb_empty_state/docs/_empty_state_alignment.jsx
-- app/pb_kits/playbook/pb_empty_state/docs/_empty_state_orientation.jsx
-- app/pb_kits/playbook/pb_empty_state/docs/_empty_state_size.jsx
-- app/pb_kits/playbook/pb_empty_state/docs/example.yml
-- app/pb_kits/playbook/pb_empty_state/docs/index.js
-- app/pb_kits/playbook/pb_empty_state/empty_state.test.jsx
 - app/pb_kits/playbook/pb_enhanced_element/element_observer.ts
 - app/pb_kits/playbook/pb_enhanced_element/index.ts
 - app/pb_kits/playbook/pb_file_upload/_file_upload.scss
@@ -3134,9 +3126,9 @@ files:
 - app/pb_kits/playbook/pb_tooltip/docs/_tooltip_delay.md
 - app/pb_kits/playbook/pb_tooltip/docs/_tooltip_delay_rails.html.erb
 - app/pb_kits/playbook/pb_tooltip/docs/_tooltip_delay_rails.md
-- app/pb_kits/playbook/pb_tooltip/docs/_tooltip_icon.erb
 - app/pb_kits/playbook/pb_tooltip/docs/_tooltip_icon.jsx
 - app/pb_kits/playbook/pb_tooltip/docs/_tooltip_icon.md
+- app/pb_kits/playbook/pb_tooltip/docs/_tooltip_icon_rails.html.erb
 - app/pb_kits/playbook/pb_tooltip/docs/_tooltip_interaction.html.erb
 - app/pb_kits/playbook/pb_tooltip/docs/_tooltip_interaction.jsx
 - app/pb_kits/playbook/pb_tooltip/docs/_tooltip_interaction.md
@@ -3213,6 +3205,8 @@ files:
 - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_margin_bottom.jsx
 - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_multi_kit.html.erb
 - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_multi_kit.jsx
+- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_react_hook.jsx
+- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_react_hook.md
 - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_truncated_text.html.erb
 - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_truncated_text.jsx
 - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_truncated_text.md
@@ -3411,11 +3405,11 @@ files:
 - app/pb_kits/playbook/utilities/test/globalProps/truncate.test.js
 - app/pb_kits/playbook/utilities/text.ts
 - app/pb_kits/playbook/utilities/validEmojiChecker.ts
-- dist/chunks/_typeahead-D2Wtk1Vx.js
-- dist/chunks/_weekday_stacked-toeDpRDd.js
+- dist/chunks/_typeahead-CdVbIURO.js
+- dist/chunks/_weekday_stacked-BSTKfYPJ.js
 - dist/chunks/lazysizes-B7xYodB-.js
-- dist/chunks/lib-5OzNgeeu.js
-- dist/chunks/pb_form_validation-DGhKbZtO.js
+- dist/chunks/lib-e7oBFFDo.js
+- dist/chunks/pb_form_validation-CMXevI1t.js
 - dist/chunks/vendor.js
 - dist/menu.yml
 - dist/playbook-doc.js

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

@@ -1,38 +0,0 @@
-.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

@@ -1,199 +0,0 @@
-
-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

@@ -1,38 +0,0 @@
-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

@@ -1,19 +0,0 @@
-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

@@ -1,35 +0,0 @@
-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

@@ -1,7 +0,0 @@
-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

@@ -1,3 +0,0 @@
-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

@@ -1,17 +0,0 @@
-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_tooltip/docs/_tooltip_icon.erb

@@ -1,10 +0,0 @@
-<%= pb_rails("icon_circle", props: { icon: "paper-plane", id: "result-1-sample-email-link" }) %>
-
-<%= pb_rails("tooltip", props: {
-  trigger_element_id: "result-1-sample-email-link",
-  tooltip_id: "sample-email-tooltip-result-1",
-  position: "top",
-  dark: true
-}) do %>
-  Send Email
-<% end %>