RubyGems - playbook_ui - Versions diffs - 14.18.0 → 14.19.0.pre.alpha.PLAY1968typeaheadpreservesearchreact7796 - Mend

playbook_ui 14.18.0 → 14.19.0.pre.alpha.PLAY1968typeaheadpreservesearchreact7796

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (273) hide show

data/app/pb_kits/playbook/pb_file_upload/_file_upload.tsx CHANGED Viewed

@@ -22,6 +22,7 @@ type FileUploadProps = {
   maxSize?: number,
   onFilesAccepted: Callback<File, File>,
   onFilesRejected: (error: string, files: readonly FileRejection[]) => void,
+  error?: string,
 }
 const getFormattedFileSize = (fileSize: number): string => {
@@ -36,6 +37,7 @@ const FileUpload = (props: FileUploadProps): React.ReactElement => {
     customMessage,
     dark = false,
     data = {},
+    error,
     htmlOptions = {},
     maxSize,
     onFilesAccepted = noop,
@@ -100,7 +102,7 @@ const FileUpload = (props: FileUploadProps): React.ReactElement => {
   return (
     <div
-        className={classnames(buildCss('pb_file_upload_kit'), globalProps(props), className)}
+        className={classnames(buildCss('pb_file_upload_kit'), { 'error': error }, globalProps(props), className)}
         {...dataProps}
         {...htmlProps}
         {...getRootProps()}
@@ -118,6 +120,14 @@ const FileUpload = (props: FileUploadProps): React.ReactElement => {
           }
         </Body>
       </Card>
+      {error && (
+        <Body
+            dark={dark}
+            marginTop="xxs"
+            status="negative"
+            text={error}
+        />
+      )}
     </div>
   )
 }

data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_error.html.erb ADDED Viewed

	@@ -0,0 +1 @@
1	+ <%= pb_rails("file_upload", props: {id: "error", error: raw(pb_rails("icon", props: { icon: "warning" }) + " Please upload a valid file")}) %>

data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_error.jsx ADDED Viewed

@@ -0,0 +1,41 @@
+import React, { useState } from 'react'
+import FileUpload from '../_file_upload'
+import List from '../../pb_list/_list'
+import ListItem from '../../pb_list/_list_item'
+import Icon from '../../pb_icon/_icon'
+const AcceptedFilesList = ({ files }) => (
+  <List>
+    {files.map((file) => (
+      <ListItem key={file.name}>{file.name}</ListItem>
+    ))}
+  </List>
+)
+const FileUploadError = (props) => {
+  const [filesToUpload, setFilesToUpload] = useState([])
+  const handleOnFilesAccepted = (files) => {
+    setFilesToUpload([...filesToUpload, ...files])
+  }
+  const error = (<>
+    <Icon icon="warning" /> Please upload a valid file
+  </>)
+  return (
+    <div>
+      <AcceptedFilesList
+          files={filesToUpload}
+          {...props}
+      />
+      <FileUpload
+          error={error}
+          onFilesAccepted={handleOnFilesAccepted}
+          {...props}
+      />
+    </div>
+  )
+}
+export default FileUploadError

data/app/pb_kits/playbook/pb_file_upload/docs/example.yml CHANGED Viewed

@@ -3,6 +3,7 @@ examples:
   rails:
   - file_upload_default: File Upload
   - file_upload_custom: Custom
+  - file_upload_error: Error
   react:
   - file_upload_default: Default List of files to upload
@@ -10,3 +11,4 @@ examples:
   - file_upload_custom_message: Add a custom message
   - file_upload_custom_description: Add your one accepted files description
   - file_upload_max_size: Set a file size limit
+  - file_upload_error: Error

data/app/pb_kits/playbook/pb_file_upload/docs/index.js CHANGED Viewed

@@ -3,3 +3,4 @@ export { default as FileUploadAccept } from './_file_upload_accept.jsx'
 export { default as FileUploadCustomMessage } from './_file_upload_custom_message.jsx'
 export { default as FileUploadCustomDescription } from './_file_upload_custom_description.jsx'
 export { default as FileUploadMaxSize } from './_file_upload_max_size.jsx'
+export { default as FileUploadError } from './_file_upload_error.jsx'

data/app/pb_kits/playbook/pb_file_upload/file_upload.html.erb CHANGED Viewed

@@ -9,6 +9,7 @@
         <%= pb_rails("text_input", props: {
           type: "file",
           dark: object.dark,
+          error: object.error.presence,
           input_options: {
             id: "upload-#{object.id}",
             classname: "cursor_pointer",

data/app/pb_kits/playbook/pb_file_upload/file_upload.rb CHANGED Viewed

@@ -21,14 +21,20 @@ module Playbook
       prop :input_options, type: Playbook::Props::HashProp,
                            default: {}
+      prop :error, type: Playbook::Props::String
       def classname
         file_upload_class = generate_classname("pb_file_upload_kit")
-        file_upload_class + full_width_class
+        file_upload_class + error_class + full_width_class
       end
       def full_width_class
         full_width ? " full_width" : ""
       end
+      def error_class
+        error.present? ? "_error" : ""
+      end
     end
   end
 end

data/app/pb_kits/playbook/pb_file_upload/fileupload.test.js CHANGED Viewed

@@ -50,3 +50,21 @@ test('displays custom message', () => {
   const kit = screen.getByTestId(testid)
   expect(kit).toHaveTextContent('Hello world!')
 })
+test('handles error state with error prop', () => {
+  const errorText = "Test error message"
+  render(
+    <FileUpload
+        data={{ testid: testid }}
+        error={errorText}
+    />
+  )
+  const kit = screen.getByTestId(testid)
+  expect(kit).toHaveClass('pb_file_upload_kit')
+  expect(kit).toHaveClass('error')
+  const errorElement = screen.getByText(errorText)
+  expect(errorElement).toBeInTheDocument()
+})

data/app/pb_kits/playbook/pb_filter/docs/_filter_within_turbo_frames.html.erb ADDED Viewed

@@ -0,0 +1,41 @@
+<%=
+  pb_rails("filter", props: {
+    id: "filter_within_trubo_frames",
+    position: "top",
+    filters: [
+      { name: "name", value: "John Wick" },
+      { name: "city", value: "San Francisco"}
+    ],
+    sort_menu: [
+      { item: "Popularity", link: "?q[sorts]=managers_popularity+asc", active: true, direction: "desc" },
+      { item: "Mananger's Title", link: "?q[sorts]=managers_title+asc", active: false },
+      { item: "Manager's Name", link: "?q[sorts]=managers_name+asc", active: false },
+    ],
+    template: "default",
+    results: 1,
+    popover_props: { append_to: "parent"  },
+  }) do
+%>
+  <%
+   example_collection = [
+      OpenStruct.new(name: "USA", value: 1),
+      OpenStruct.new(name: "Canada", value: 2),
+      OpenStruct.new(name: "Brazil", value: 3),
+      OpenStruct.new(name: "Philippines", value: 4),
+      OpenStruct.new(name: "A galaxy far far away, like really far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far away...", value: 5)
+    ]
+  %>
+  <%= pb_rails("form", props: { form_system_options: { scope: :example, method: :get } }) do |form| %>
+    <%= form.text_field :example_text_field, props: { label: true } %>
+    <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: {max_width: "sm", label: true } %>
+    <%= form.actions do |action| %>
+      <%= action.submit props: {
+        text: "Apply",
+        data: {
+          disable_with: "pb_rails('icon', props: { icon: 'spinner', spin: true, fixed_width: true })Searching...".html_safe
+      },}%>
+      <%= action.button props: { type: "reset", text: "Clear", variant: "secondary" } %>
+    <% end %>
+  <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_filter/docs/_filter_within_turbo_frames.md ADDED Viewed

	@@ -0,0 +1 @@
1	+ By default, the filter popover attaches to the `<body>`. To attach it elsewhere, like inside a Turbo Frame, pass the `append_to` prop through `popover_props`. Set it to `"parent"` to place the tooltip inside its parent element, or pass any CSS selector (`#id` or `.class`) to specify a custom container.

data/app/pb_kits/playbook/pb_filter/docs/example.yml CHANGED Viewed

@@ -11,6 +11,7 @@ examples:
   - filter_max_height: Max Height for Popover Inside of Filter
   - filter_placement: Filter Placement
   - filter_popover_props: Popover Props
+  - filter_within_turbo_frames: Within Turbo Frames
   react:
   - filter_default: Default

data/app/pb_kits/playbook/pb_form_group/_error_state_mixin.scss CHANGED Viewed

@@ -23,35 +23,39 @@
 @mixin error-state-right-side-select-kit {
   &:has(.pb_text_input_kit:not(.error)):has(.pb_text_input_kit_label):has(.pb_select_kit_wrapper.error),
   &:has(.pb_text_input_kit.error):has(.pb_text_input_kit_label):has(.pb_select_kit_wrapper) {
-    align-items: flex-start;
-    .pb_select_kit_wrapper {
-      padding-top: $space_md;
-      margin-top: 2px;
+    &:not(:has(.pb_phone_number_input)):not(:has(.passphrase-text-input)) {
+      align-items: flex-start;
-      .pb_select_kit_caret {
+      .pb_select_kit_wrapper {
         padding-top: $space_md;
+        margin-top: 2px;
+        .pb_select_kit_caret {
+          padding-top: $space_md;
+        }
       }
-    }
-    .pb_select_kit_wrapper.error {
-      padding-top: $space_md;
-      margin-top: 2px;
+      .pb_select_kit_wrapper.error {
+        padding-top: $space_md;
+        margin-top: 2px;
-      .pb_select_kit_caret {
-        padding-top: $space_xl;
+        .pb_select_kit_caret {
+          padding-top: $space_xl;
+        }
       }
     }
   }
 }
 @mixin error-state-left-side-select-kit {
-  &:has(.pb_select_kit_label):has(.pb_select_kit_wrapper):has(.pb_phone_number_input):has(.pb_text_input_kit.error) {
-    align-items: flex-start;
+  &:has(.pb_select_kit_label):has(.pb_select_kit_wrapper):has(.pb_text_input_kit.error) {
+    &:not(:has(.pb_phone_number_input)):not(:has(.passphrase-text-input)) {
+      align-items: flex-start;
-    .pb_text_input_kit.error {
-      padding-top: $space_md;
-      margin-top: 2px;
+      .pb_text_input_kit.error {
+        padding-top: $space_md;
+        margin-top: 2px;
+      }
     }
   }
-}
+}

data/app/pb_kits/playbook/pb_form_pill/_form_pill.scss CHANGED Viewed

@@ -20,9 +20,12 @@ $form_pill_colors: map-merge($status_color_text, map-merge($data_colors, $produc
   margin-bottom: 2px;
   margin-top: 2px;
   cursor: pointer;
-  .pb_form_pill_text, .pb_form_pill_close, .pb_form_pill_tag{
+  .pb_form_pill_text, .pb_form_pill_tag {
     font-size: $font_small !important;
   }
+  .pb_form_pill_close {
+    font-size: 17px;
+  }
   &[class*=wrapped] {
     height: max-content;
@@ -96,7 +99,9 @@ $form_pill_colors: map-merge($status_color_text, map-merge($data_colors, $produc
         display: flex;
         align-items: center;
         height: 17px;
-        border-radius: calc(50%);
+        width: 17px;
+        justify-content: center;
+        border-radius: 50%;
         cursor: pointer;
         @if ($color_name == "neutral") {
           color: $text_lt_default;
@@ -146,8 +151,7 @@ $form_pill_colors: map-merge($status_color_text, map-merge($data_colors, $produc
     outline-offset: -1px;
   }
   .pb_form_pill_icon {
-    height: 12px !important;
-    width: 12px !important;
+    height: 0.875em;
     padding-right: $space_xs;
     + .pb_form_pill_text, + .pb_form_pill_tag,
     + .pb_tooltip_kit .pb_form_pill_text, + .pb_tooltip_kit .pb_form_pill_tag,
@@ -158,7 +162,7 @@ $form_pill_colors: map-merge($status_color_text, map-merge($data_colors, $produc
   &.small {
     height: 17px;
     padding: 0 $space-xs;
-    .pb_form_pill_text, .pb_form_pill_close, .pb_form_pill_tag {
+    .pb_form_pill_text, .pb_form_pill_tag {
       font-size: $font_smallest !important;
     }
     .pb_form_pill_text, .pb_form_pill_tag {
@@ -166,17 +170,20 @@ $form_pill_colors: map-merge($status_color_text, map-merge($data_colors, $produc
       padding: 0 $space_xxs;
     }
     .pb_form_pill_close {
-      height: 10px;
-      border-radius: calc(50%);
+      height: 14px;
+      width: 14px;
+      font-size: 15px;
+      border-radius: 50%;
     }
     [class^=pb_avatar_kit] .avatar_wrapper {
-      flex-basis: 16px;
-      height: 16px;
-      margin-top: 2px;
-      width: 16px;
-      &::before { line-height: 16.5px; }
+      flex-basis: 14px;
+      height: 14px;
+      margin-top: 3px;
+      width: 14px;
+      &::before { line-height: 15px; }
     }
     .pb_form_pill_icon {
+      height: 0.75em;
       padding-right: $space_xxs;
       + .pb_form_pill_text, + .pb_form_pill_tag,
       + .pb_tooltip_kit .pb_form_pill_text, + .pb_tooltip_kit .pb_form_pill_tag,

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_pb_styles.jsx CHANGED Viewed

@@ -11,7 +11,6 @@ SolidGauge(Highcharts);
 const data = [{ name: "Name", y: 45 }]
 const baseOptions = {
-  title: { text: "" },
   series: [{ data: data }],
 };

data/app/pb_kits/playbook/pb_gauge/gaugeTheme.ts CHANGED Viewed

@@ -2,6 +2,7 @@ import colors from '../tokens/exports/_colors.module.scss'
 import typography from '../tokens/exports/_typography.module.scss'
 const gaugeTheme = {
+  title: { text: "" },
   chart: {
     type: "solidgauge",
     events: {
@@ -77,7 +78,8 @@ const gaugeTheme = {
         y: -26,
       },
     },
-  }
+  },
+  credits: { enabled: false }
 }
 export default gaugeTheme;

data/app/pb_kits/playbook/pb_home_address_street/_home_address_street.tsx CHANGED Viewed

@@ -81,6 +81,11 @@ const HomeAddressStreet = (props: HomeAddressStreetProps): React.ReactElement =>
   const formatStreetAdr = (address: string): string => preserveCase ? address : titleize(address)
+  const uppercaseState = state?.toUpperCase() ?? ''
+  const fields = [address, addressCont, city, homeId, homeUrl, houseStyle, state, territory, zipcode]
+  const hasAllEmptyProps = fields.every(field => field === undefined || field === null || field === '')
   return (
     <div
         className={classes(className, dark)}
@@ -88,7 +93,8 @@ const HomeAddressStreet = (props: HomeAddressStreetProps): React.ReactElement =>
         {...dataProps}
         {...htmlProps}
     >
-      {emphasis == 'street' &&
+      {hasAllEmptyProps && '—'}
+      {emphasis == 'street' && !hasAllEmptyProps &&
         <div>
           <Title
               className="pb_home_address_street_address"
@@ -105,11 +111,11 @@ const HomeAddressStreet = (props: HomeAddressStreetProps): React.ReactElement =>
             {titleize(addressCont)}
           </Title>
           <Body color="light">
-            {`${titleize(city)}, ${state.toUpperCase()} ${zipcode}`}
+            {`${city ? `${titleize(city)}, ` : ''}${uppercaseState}${zipcode ? ` ${zipcode}` : ''}`}
           </Body>
         </div>
       }
-      {emphasis == 'city' &&
+      {emphasis == 'city' && !hasAllEmptyProps &&
         <div>
           <Body color="light">
             {joinPresent([formatStreetAdr(address), houseStyle], ' · ')}
@@ -122,18 +128,18 @@ const HomeAddressStreet = (props: HomeAddressStreetProps): React.ReactElement =>
                 size={4}
                 tag="span"
             >
-              {`${titleize(city)}, ${state.toUpperCase()}`}
+              {`${city ? `${titleize(city)}, ` : ''}${uppercaseState}`}
             </Title>
             <Body
                 color="light"
                 tag="span"
             >
-              {` ${zipcode}`}
+              {` ${zipcode ?? ''}`}
             </Body>
           </div>
         </div>
       }
-      {emphasis == 'none' &&
+      {emphasis == 'none' && !hasAllEmptyProps &&
         <div>
           <Body dark={dark}>
             {joinPresent([formatStreetAdr(address), houseStyle], ' · ')}
@@ -144,7 +150,7 @@ const HomeAddressStreet = (props: HomeAddressStreetProps): React.ReactElement =>
                 color="light"
                 dark={dark}
               >
-            {`${titleize(city)}, ${state.toUpperCase()} ${zipcode}`}
+            {`${city ? `${titleize(city)}, ` : ''}${uppercaseState}${zipcode ? ` ${zipcode}` : ''}`}
           </Body>
           </div>
         </div>

data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_pb_styles.jsx ADDED Viewed

@@ -0,0 +1,52 @@
+import React from 'react'
+import lineGraphTheme from '../lineGraphTheme'
+import Highcharts from "highcharts"
+import HighchartsReact from "highcharts-react-official"
+const data = [{
+  name: 'Installation',
+  data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175],
+}, {
+  name: 'Manufacturing',
+  data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434],
+}, {
+  name: 'Sales & Distribution',
+  data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387],
+}, {
+  name: 'Project Development',
+  data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227],
+}, {
+  name: 'Other',
+  data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111],
+}]
+const categories = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
+const baseOptions = {
+  series: data,
+  title: { text: "Solar Employment Growth by Sector, 2010-2016" },
+  subtitle: { text: "Source: thesolarfoundation.com" },
+  xAxis: {
+    categories: categories,
+  },
+  yAxis: {
+    title: {
+      text: "Number of Employees",
+    },
+  },
+}
+const LineGraphPbStyles = () => {
+  const options = Highcharts.merge({}, lineGraphTheme, baseOptions)
+  return(
+    <div>
+      <HighchartsReact
+          highcharts={Highcharts}
+          options={options}
+      />
+    </div>
+  )
+}
+export default LineGraphPbStyles

data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_pb_styles.md ADDED Viewed

	@@ -0,0 +1 @@
1	+ You don't need to use the Line Graph Kit to apply Playbook styles to your Highcharts line graph. Just import lineGraphTheme.ts and merge it with your graph options—Playbook’s styling will apply automatically.

data/app/pb_kits/playbook/pb_line_graph/docs/example.yml CHANGED Viewed

@@ -11,6 +11,7 @@ examples:
   react:
   - line_graph_default: Default
+  - line_graph_pb_styles: Playbook Styles
   - line_graph_legend: Legend
   - line_graph_legend_position: Legend Position
   - line_graph_legend_nonclickable: Legend Nonclickable

data/app/pb_kits/playbook/pb_line_graph/docs/index.js CHANGED Viewed

@@ -4,3 +4,4 @@ export { default as LineGraphLegendPosition } from './_line_graph_legend_positio
 export { default as LineGraphLegendNonclickable } from './_line_graph_legend_nonclickable.jsx'
 export { default as LineGraphHeight } from './_line_graph_height.jsx'
 export { default as LineGraphColors } from './_line_graph_colors.jsx'
+export { default as LineGraphPbStyles } from './_line_graph_pb_styles.jsx'

data/app/pb_kits/playbook/pb_line_graph/lineGraphTheme.ts ADDED Viewed

@@ -0,0 +1,110 @@
+import colors from '../tokens/exports/_colors.module.scss'
+import typography from '../tokens/exports/_typography.module.scss'
+const lineGraphTheme = {
+  title: {
+    text: "",
+    style: {
+      color: colors.text_lt_default,
+      fontFamily: typography.font_family_base,
+      fontWeight: typography.bold,
+      fontSize: typography.heading_3,
+    },
+  },
+  subtitle: {
+    text: "" ,
+    style: {
+      fontFamily: typography.font_family_base,
+      color: colors.text_lt_light,
+      fontWeight: typography.regular,
+      fontSize: typography.text_base,
+    },
+  },
+  chart: {
+    type: "line",
+  },
+  tooltip: {
+    backgroundColor: {
+      linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
+      stops: [
+        [0, colors.bg_dark],
+        [1, colors.bg_dark],
+      ],
+    },
+    followPointer: true,
+    shadow: false,
+    borderWidth: 0,
+    borderRadius: 10,
+    style: {
+      fontFamily: typography.font_family_base,
+      color: colors.text_dk_default,
+      fontWeight: typography.regular,
+      fontSize: typography.text_smaller,
+    },
+  },
+  plotOptions: {
+    line: {
+      dataLabels: {
+        enabled: false,
+      },
+    },
+  },
+  credits: { enabled: false },
+  legend: { enabled: false },
+  colors: [
+    colors.data_1,
+    colors.data_2,
+    colors.data_3,
+    colors.data_4,
+    colors.data_5,
+    colors.data_6,
+    colors.data_7,
+  ],
+  xAxis: {
+    gridLineWidth: 0,
+    lineColor: colors.border_light,
+    tickColor: colors.border_light,
+    labels: {
+      style: {
+        fontFamily: typography.font_family_base,
+        color: colors.text_lt_lighter,
+        fontWeight: typography.bold,
+        fontSize: typography.text_smaller,
+      },
+    },
+    title: {
+      style: {
+        color: colors.text_lt_default,
+        fontFamily: typography.font_family_base,
+        fontWeight: typography.regular,
+        fontSize: typography.heading_4,
+      },
+    },
+  },
+  yAxis: {
+    alternateGridColor: undefined as string | undefined,
+    minorTickInterval: null as number | null,
+    gridLineColor: colors.border_light,
+    minorGridLineColor: colors.border_light,
+    lineWidth: 0,
+    tickWidth: 0,
+    labels: {
+      style: {
+        fontFamily: typography.font_family_base,
+        color: colors.text_lt_lighter,
+        fontWeight: typography.bold,
+        fontSize: typography.text_smaller,
+      },
+    },
+    title: {
+      style: {
+        fontFamily: typography.font_family_base,
+        color: colors.text_lt_lighter,
+        fontWeight: typography.bold,
+        fontSize: typography.text_smaller,
+      },
+    },
+  },
+}
+export default lineGraphTheme;

data/app/pb_kits/playbook/pb_message/_message.tsx CHANGED Viewed

@@ -13,6 +13,7 @@ import MessageMention from './_message_mention'
 type MessageProps = {
   aria: { [key: string]: string },
+  avatarGrayscale?: boolean,
   avatarName?: string,
   avatarStatus?: "away" | "offline" | "online",
   avatarUrl?: string,
@@ -32,6 +33,7 @@ type MessageProps = {
 const Message = (props: MessageProps) => {
   const {
     aria = {},
+    avatarGrayscale = false,
     avatarName,
     avatarStatus = null,
     avatarUrl,
@@ -71,6 +73,7 @@ const Message = (props: MessageProps) => {
     >
       {shouldDisplayAvatar &&
         <Avatar
+            grayscale={avatarGrayscale}
             imageUrl={avatarUrl}
             name={avatarName}
             size="xs"

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

@@ -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 ADDED Viewed

@@ -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