playbook_ui_docs 14.18.1.pre.rc.0 → 14.19.0.pre.alpha.PLAY21297675

data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_default.html.erb

@@ -0,0 +1,7 @@
+<%= pb_rails("flex", props: {align: "center", justify: "center"}) do %>
+  <%= pb_rails("empty_state", props: {
+    description: "Body text goes into detail with possible steps for user to take",
+    header: "Title Explains",
+    image: "default",
+  }) %>
+<% end %>

data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_orientation.html.erb

@@ -0,0 +1,12 @@
+<%= pb_rails("flex", props: {align: "center", justify: "center", wrap: true}) do %>
+  <%= pb_rails("empty_state", props: {
+    description: "Body text goes into detail with possible steps for user to take",
+    header: "Title Explains",
+    image: "default",
+    orientation:"horizontal",
+    alignment: "left",
+    size: "lg",
+    primary_button: "Next Action",
+    primary_button_url: "#primary_button_url",
+  }) %>
+<% end %>

data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_size.html.erb

@@ -0,0 +1,23 @@
+<%= pb_rails("flex", props: {align: "center", spacing: "evenly", wrap: true}) do %>
+  <%= pb_rails("empty_state", props: {
+    description: "Body text goes into detail with possible steps for user to take",
+    header: "Title Explains",
+    image: "default",
+    primary_button: "Next Action",
+    primary_button_url: "#primary_button_url",
+    link_button: "Alt Action",
+    link_button_url: "#link_button_url",
+    size: "sm",
+  }) %>
+
+  <%= pb_rails("empty_state", props: {
+    description: "Body text goes into detail with possible steps for user to take",
+    header: "Title Explains",
+    image: "default",
+    primary_button: "Next Action",
+    primary_button_url: "#primary_button_url",
+    link_button: "Alt Action",
+    link_button_url: "#link_button_url",
+    size: "lg",
+  }) %>
+<% end %>

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

@@ -1,5 +1,9 @@
 examples:
-
+  rails:
+  - empty_state_default: Default
+  - empty_state_size: Size
+  - empty_state_orientation: Orientation
+  - empty_state_alignment: Alignment
 
   react:
   - empty_state_default: Default

data/app/pb_kits/playbook/pb_message/docs/_message_grayscale.html.erb

@@ -0,0 +1,9 @@
+<%= pb_rails("message", props: {
+  label: "Mike Bishop",
+  message: "So long, and thanks for all the fish!",
+  timestamp: "3 months ago",
+  avatar_name: "Mike Bishop",
+  avatar_url: "https://randomuser.me/api/portraits/men/50.jpg",
+  avatar_status: "offline",
+  avatar_grayscale: true,
+}) %>

data/app/pb_kits/playbook/pb_message/docs/_message_grayscale.jsx

@@ -0,0 +1,21 @@
+import React from "react"
+
+import Message from "../_message"
+
+const MessageGrayscale = (props) => {
+  return (
+    <Message
+        avatarGrayscale
+        avatarName='Mike Bishop'
+        avatarStatus='offline'
+        avatarUrl='https://randomuser.me/api/portraits/men/50.jpg'
+        borderRadius='rounded'
+        label='Mike Bishop'
+        message='So long, and thanks for all the fish!'
+        timestamp='3 months ago'
+        {...props}
+    />
+  )
+}
+
+export default MessageGrayscale

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

@@ -5,12 +5,14 @@ examples:
   - message_timestamp: With Timestamp Hover
   - message_hover: Hover
   - message_mentions: Mentions
+  - message_grayscale: Grayscale Avatar
 
   react:
   - message_default: Default
   - message_timestamp: With Timestamp Hover
   - message_hover: Hover
   - message_mentions: Mentions
+  - message_grayscale: Grayscale Avatar
 
   swift:
    - message_default_swift: Default

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

@@ -2,3 +2,4 @@ export { default as MessageDefault } from './_message_default.jsx'
 export { default as MessageTimestamp } from './_message_timestamp.jsx'
 export { default as MessageHover } from './_message_hover.jsx'
 export { default as MessageMentions } from './_message_mentions.jsx'
+export { default as MessageGrayscale } from './_message_grayscale.jsx'

data/app/pb_kits/playbook/pb_overlay/docs/_overlay_vertical_dynamic_multi_directional.jsx

@@ -9,7 +9,7 @@ const InlineCardsExample = forwardRef(function InlineCardsExample(ref) {
         <Flex
             columnGap="lg"
             orientation="row"
-            ref={ref} 
+            ref={ref}
         >
             {Array.from({ length: 15 }, (_, index) => (
                 <FlexItem key={index}>

data/app/pb_kits/playbook/pb_select/docs/_select_error.html.erb

@@ -1,5 +1,5 @@
 <%= pb_rails("select", props: {
-  error: "Please make a valid selection",
+  error: raw(pb_rails("icon", props: { icon: "warning" }) + " Please make a valid selection"),
   label: "Favorite Food",
   name: "food",
   options: [

data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_click.jsx

@@ -8,7 +8,7 @@ const TableWithCollapsibleWithCustomClick = (props) => {
 
   const Content = () => {
     return (
-      <Card 
+      <Card
           borderNone
           borderRadius="none"
           padding="md"
@@ -37,7 +37,7 @@ return (
 
         </Table.Head>
         <Table.Body>
-          <Table.Row collapsible 
+          <Table.Row collapsible
               collapsibleContent={<Content/>}
               toggleCellId="cell-1"
               {...props}
@@ -47,7 +47,7 @@ return (
             <Table.Cell>{'Value 3'}</Table.Cell>
             <Table.Cell>{'Value 4'}</Table.Cell>
             <Table.Cell>{'Value 5'}</Table.Cell>
-            <Table.Cell cursor="pointer" 
+            <Table.Cell cursor="pointer"
                 id="cell-1"
                 textAlign="right"
             >
@@ -59,7 +59,7 @@ return (
             </Table.Cell>
 
           </Table.Row>
-          <Table.Row collapsible 
+          <Table.Row collapsible
               collapsibleContent={<Content/>}
               toggleCellId="cell-2"
               {...props}
@@ -69,7 +69,7 @@ return (
             <Table.Cell>{'Value 3'}</Table.Cell>
             <Table.Cell>{'Value 4'}</Table.Cell>
             <Table.Cell>{'Value 5'}</Table.Cell>
-            <Table.Cell cursor="pointer" 
+            <Table.Cell cursor="pointer"
                 id="cell-2"
                 textAlign="right"
             >
@@ -81,7 +81,7 @@ return (
             </Table.Cell>
 
           </Table.Row>
-          <Table.Row collapsible 
+          <Table.Row collapsible
               collapsibleContent={<Content/>}
               toggleCellId="cell-3"
               {...props}
@@ -91,7 +91,7 @@ return (
             <Table.Cell>{'Value 3'}</Table.Cell>
             <Table.Cell>{'Value 4'}</Table.Cell>
             <Table.Cell>{'Value 5'}</Table.Cell>
-            <Table.Cell cursor="pointer" 
+            <Table.Cell cursor="pointer"
                 id="cell-3"
                 textAlign="right"
             >

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_error.html.erb

@@ -4,7 +4,7 @@
     border: true,
     icon: "user"
   },
-  error: "Please enter a valid email address",
+  error: raw(pb_rails("icon", props: { icon: "warning" }) + " Please enter a valid email address"),
   label: "Email Address",
   placeholder: "Enter email address",
   type: "email"

data/app/pb_kits/playbook/pb_textarea/docs/_textarea_error.html.erb

@@ -1 +1,5 @@
-<%= pb_rails("textarea", props: { error: "This field has an error!", label: "Label", rows: 4}) %>
+<%= pb_rails("textarea", props: {
+  error: raw(pb_rails("icon", props: { icon: "warning" }) + " This field has an error!"),
+  label: "Label",
+  rows: 4
+}) %>

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_error_state.html.erb

@@ -8,7 +8,14 @@
 
 %>
 
-<%= pb_rails("typeahead", props: { id: "typeahead-error-example", options: options, error: "Please make a valid selection", label: "Products", name: :foo, is_multi: false }) %>
+<%= pb_rails("typeahead", props: {
+  id: "typeahead-error-example",
+  options: options,
+  error: "Please make a valid selection",
+  label: "Products",
+  name: :foo,
+  is_multi: false
+}) %>
 
 <!-- This section is an example of the available JavaScript event hooks -->
 <%= javascript_tag defer: "defer" do %>

data/app/pb_kits/playbook/pb_user/docs/_user_grayscale.html.erb

@@ -0,0 +1,6 @@
+<%= pb_rails("user", props: {
+  name: "Anna Black",
+  title: "Remodeling Consultant",
+  avatar_url: "https://randomuser.me/api/portraits/women/44.jpg",
+  avatar_grayscale: true,
+}) %>

data/app/pb_kits/playbook/pb_user/docs/_user_grayscale.jsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import User from '../../pb_user/_user'
+
+const UserGrayscale = (props) => {
+  return (
+    <User
+        avatarGrayscale
+        avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
+        name="Anna Black"
+        title="Remodeling Consultant"
+        {...props}
+    />
+  )
+}
+
+export default UserGrayscale

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

@@ -10,6 +10,7 @@ examples:
   - user_subtitle: Subtitle
   - user_block_content_subtitle_rails: Block Content Subtitle
   - user_font_options: Font Options
+  - user_grayscale: Grayscale Avatar
 
   react:
   - user_default: Default
@@ -21,6 +22,7 @@ examples:
   - user_subtitle: Subtitle
   - user_block_content_subtitle_react: Block Content Subtitle
   - user_font_options: Font Options
+  - user_grayscale: Grayscale Avatar
 
   swift:
   - user_horizontal_swift: Horizontal

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

@@ -7,3 +7,4 @@ export { default as UserVerticalSize } from './_user_vertical_size.jsx'
 export { default as UserSubtitle } from './_user_subtitle.jsx'
 export { default as UserBlockContentSubtitleReact } from './_user_block_content_subtitle_react.jsx'
 export { default as UserFontOptions } from './_user_font_options.jsx'
+export { default as UserGrayscale } from './_user_grayscale.jsx'