playbook_ui 14.19.0 → 14.20.0.pre.rc.0

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_visibility_with_state.jsx

@@ -0,0 +1,65 @@
+import React, { useState } from "react"
+import AdvancedTable from '../../pb_advanced_table/_advanced_table'
+import MOCK_DATA from "./advanced_table_mock_data.json"
+
+const AdvancedTableColumnVisibilityWithState = (props) => {
+  const columnDefinitions = [
+    {
+      accessor: "year",
+      label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
+      id: "year"
+    },
+    {
+      accessor: "newEnrollments",
+      label: "New Enrollments",
+      id: "newEnrollments"
+    },
+    {
+      accessor: "scheduledMeetings",
+      label: "Scheduled Meetings",
+      id: "scheduledMeetings"
+    },
+    {
+      accessor: "attendanceRate",
+      label: "Attendance Rate",
+      id: "attendanceRate"
+    },
+    {
+      accessor: "completedClasses",
+      label: "Completed Classes",
+      id: "completedClasses"
+    },
+    {
+      accessor: "classCompletionRate",
+      label: "Class Completion Rate",
+      id: "classCompletionRate"
+    },
+    {
+      accessor: "graduatedStudents",
+      label: "Graduated Students",
+      id: "graduatedStudents"
+    },
+  ]
+
+  const [columnVisibility, setColumnVisibility] = useState({
+    newEnrollments: false 
+  })
+
+  const columnVisibilityControl = {
+    value: columnVisibility,
+    onChange: setColumnVisibility,
+  }
+  return (
+    <div>
+      <AdvancedTable
+          columnDefinitions={columnDefinitions}
+          columnVisibilityControl={columnVisibilityControl}
+          tableData={MOCK_DATA}
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default AdvancedTableColumnVisibilityWithState

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_visibility_with_state.md

@@ -0,0 +1 @@
+The `columnVisibilityControl` prop also allows for greater control over the columnVisibility state. Devs can manage state themselves by passing in `value` and `onChange` as shown.

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

@@ -47,3 +47,7 @@ examples:
   - advanced_table_selectable_rows_header: Selectable Rows (No Actions Bar)
   - advanced_table_inline_editing: Inline Cell Editing
   - advanced_table_fullscreen: Fullscreen
+  - advanced_table_column_visibility: Column Visibility Control
+  - advanced_table_column_visibility_with_state: Column Visibility Control With State
+  - advanced_table_column_visibility_custom: Column Visibility Control with Custom Dropdown
+  - advanced_table_column_visibility_multi: Column Visibility Control with Multi-Header Columns

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

@@ -27,4 +27,8 @@ export { default as AdvancedTableStickyColumns } from './_advanced_table_sticky_
 export { default as AdvancedTableStickyHeader } from './_advanced_table_sticky_header.jsx'
 export { default as AdvancedTableStickyColumnsAndHeader } from './_advanced_table_sticky_columns_and_header.jsx'
 export { default as AdvancedTableExpandByDepth } from './_advanced_table_expand_by_depth.jsx'
-export { default as AdvancedTableColumnBorderColor} from './_advanced_table_column_border_color.jsx'
+export { default as AdvancedTableColumnBorderColor} from './_advanced_table_column_border_color.jsx'
+export { default as AdvancedTableColumnVisibility } from './_advanced_table_column_visibility.jsx'
+export { default as AdvancedTableColumnVisibilityCustom } from './_advanced_table_column_visibility_custom.jsx'
+export { default as AdvancedTableColumnVisibilityMulti } from './_advanced_table_column_visibility_multi.jsx'
+export { default as AdvancedTableColumnVisibilityWithState } from './_advanced_table_column_visibility_with_state.jsx'

data/app/pb_kits/playbook/pb_advanced_table/scss_partials/advanced_table_sticky_mixin.scss

@@ -77,6 +77,7 @@
     top: 0;
     left: 0;
     border-radius: unset;
+    z-index: 5;
   }
 
   .checkbox-cell {

data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownContainer.tsx

@@ -6,7 +6,7 @@ import {
   buildDataProps,
   buildHtmlProps
 } from "../../utilities/props";
-import { globalProps } from "../../utilities/globalProps";
+import { globalProps, GlobalProps } from "../../utilities/globalProps";
 
 import DropdownContext from "../context";
 
@@ -24,7 +24,7 @@ type DropdownContainerProps = {
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string;
   searchbar?: boolean;
-};
+} & GlobalProps;
 
 const DropdownContainer = (props: DropdownContainerProps) => {
   const {

data/app/pb_kits/playbook/pb_file_upload/_file_upload.scss

@@ -9,10 +9,23 @@
     border: none;
     width: 0;
   }
+  &.error {
+    [class^='pb_card_kit'] {
+      border-color: $error;
+    }
+    [class^='pb_body_kit'][status="negative"] {
+      margin-top: $space_xs;
+    }
+  }
 }
 
 .dark [class*='pb_file_upload_kit'] {
   [class*='pb_card_kit'] {
     border: 1px $text_dk_lighter dashed;
   }
+  &.error {
+    [class^='pb_card_kit'] {
+      border-color: $error_dark;
+    }
+  }
 }

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

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

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

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

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

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

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

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

@@ -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_phone_number_input/_phone_number_input.scss

@@ -42,7 +42,7 @@ $flag-min-resolution: 192dpi;
   .iti__country-list {
     min-width: $dropdown-min-width;
   }
-  // iti-spacer-horizontal's default is 8px, or $space_xs 
+  // iti-spacer-horizontal's default is 8px, or $space_xs
   .iti__country-list .iti__flag, .iti__country-name {
     margin-right: $space_xs;
   }
@@ -60,7 +60,7 @@ $flag-min-resolution: 192dpi;
     color: $focus_input_light;
   }
 
-  .dropdown_open {
+  .dropdown_open:not(.error) {
     .text_input {
       border-color: $primary !important;
     }
@@ -76,7 +76,7 @@ $flag-min-resolution: 192dpi;
   }
 
   .iti__divider {
-    border-bottom: 1px solid $border_light !important;  
+    border-bottom: 1px solid $border_light !important;
   }
 
   .iti__selected-country-primary {
@@ -96,7 +96,7 @@ $flag-min-resolution: 192dpi;
     justify-content: center;
     align-items: center;
     border-width: 0;
-    border-radius: $space_xxs; 
+    border-radius: $space_xxs;
 
     &[aria-expanded="true"] {
       color: $primary_action;
@@ -199,7 +199,7 @@ $flag-min-resolution: 192dpi;
   }
 
   .iti__dropdown-content {
-    border-radius: $space_xs; 
+    border-radius: $space_xs;
     border: 1px solid $border_light !important;
     position: absolute;
     top: 100%;
@@ -228,13 +228,13 @@ $flag-min-resolution: 192dpi;
     }
 
     .iti__dropdown-content {
-      border-radius: $space_xs; 
+      border-radius: $space_xs;
       border: 1px solid $border_dark !important;
       .iti__search-input {
         background-color: $bg_dark_card;
         &:hover {
           background-color: $bg_dark_card;
-        }      
+        }
         &:active,
         &:focus {
           background-color: $card_dark;
@@ -243,7 +243,7 @@ $flag-min-resolution: 192dpi;
     }
 
     .iti__divider {
-      border-bottom: 1px solid $border_dark !important;  
+      border-bottom: 1px solid $border_dark !important;
     }
 
     .iti__country-list {
@@ -278,7 +278,7 @@ $flag-min-resolution: 192dpi;
       color: $white;
     }
   }
-  
+
   @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: $flag-min-resolution) {
     .iti__flag {
       background-image: url("https://unpkg.com/intl-tel-input@24.6.0/build/img/flags@2x.png");

data/app/pb_kits/playbook/pb_section_separator/_section_separator.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import classnames from 'classnames'
 
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
-import { globalProps, globalInlineProps } from '../utilities/globalProps'
+import { globalProps, globalInlineProps, GlobalProps } from '../utilities/globalProps'
 
 import Caption from '../pb_caption/_caption'
 
@@ -19,7 +19,7 @@ type SectionSeparatorProps = {
   orientation?: "horizontal" | "vertical",
   text?: string,
   variant?: "card" | "background",
-}
+} & GlobalProps
 
 const SectionSeparator = (props: SectionSeparatorProps): React.ReactElement => {
   const {

data/app/pb_kits/playbook/pb_text_input/_text_input.scss

@@ -71,7 +71,8 @@
     }
     &.error {
       .text_input_wrapper {
-        input,
+        // The `:not` here prevents error styling from affecting the country search input in the Phone Number Input Kit.
+        input:not(.iti__search-input),
         .text_input {
           border-color: $error_dark;
         }
@@ -102,7 +103,8 @@
       [class*="pb_body_kit"] {
         margin-top: $space_xs / 2;
       }
-      input,
+      // The `:not` here prevents error styling from affecting the country search input in the Phone Number Input Kit.
+      input:not(.iti__search-input),
       .text_input {
         border-color: $error;
       }