RubyGems - playbook_ui - Versions diffs - 11.12.1 → 11.13.0 - Mend

playbook_ui 11.12.1 → 11.13.0

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 (45) hide show

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

@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react'
+import React, { useEffect, useCallback, useRef } from 'react'
 import { useDropzone } from 'react-dropzone'
 import classnames from 'classnames'
@@ -12,26 +12,51 @@ import Card from '../pb_card/_card'
 type FileUploadProps = {
   accept?: string[],
   className?: string,
-  data?: object,
+  data?: {[key: string]: string | number},
   acceptedFilesDescription?: string,
+  maxSize?: number,
   onFilesAccepted: Callback<File, File>,
+  onFilesRejected: (error: string, files: File[]) => void,
 }
-const FileUpload = (props: FileUploadProps) => {
+const getFormattedFileSize = (fileSize: number): string => {
+  return `${fileSize / 1e+6} MB`
+}
+const FileUpload = (props: FileUploadProps): React.ReactElement => {
   const {
     accept = null,
     acceptedFilesDescription = '',
     className,
     data = {},
+    maxSize,
     onFilesAccepted = noop,
+    onFilesRejected = noop,
   } = props
-  const onDrop = useCallback((files) => onFilesAccepted(files), []);
-  const { getRootProps, getInputProps, isDragActive } = useDropzone({
+  const onDrop = useCallback((files) => {
+    onFilesAccepted(files)
+  }, [onFilesAccepted])
+  const { getRootProps, getInputProps, isDragActive, rejectedFiles } = useDropzone({
     accept,
+    maxSize,
     onDrop,
   })
+  const prevRejected: any = useRef();
+  const maxFileSizeText = `Max file size is ${getFormattedFileSize(maxSize)}.`
+  useEffect(() => {
+    if (rejectedFiles === prevRejected.current) return
+    const isFileTooLarge = maxSize && rejectedFiles.length > 0 && rejectedFiles[0].size > maxSize;
+    if (isFileTooLarge) {
+      onFilesRejected(`File size is too large! ${maxFileSizeText}`, rejectedFiles)
+    }
+    prevRejected.current = rejectedFiles
+  }, [maxFileSizeText, maxSize, onFilesRejected, rejectedFiles])
   const acceptedFileTypes = () => {
     return accept.map((fileType) => {
       if (fileType.startsWith('image/')) {
@@ -44,6 +69,13 @@ const FileUpload = (props: FileUploadProps) => {
   const dataProps = buildDataProps(data)
+  const getDescription = () => {
+    let msg = ""
+    accept === null ? msg += 'Choose a file or drag it here.' : msg += `Choose a file or drag it here. The accepted file types are: ${acceptedFilesDescription || acceptedFileTypes()}.`
+    if (maxSize) msg += ` ${maxFileSizeText}`
+    return msg
+  }
   return (
     <div
         className={classnames(buildCss('pb_file_upload_kit'), globalProps(props), className)}
@@ -56,7 +88,7 @@ const FileUpload = (props: FileUploadProps) => {
           {isDragActive ?
             <p>{'Drop the files here ...'}</p>
             :
-            <p>{accept === null ? 'Choose a file or drag it here' : `Choose a file or drag it here. The accepted file types are: ${acceptedFilesDescription || acceptedFileTypes()}`}</p>
+            <p>{getDescription()}</p>
           }
         </Body>
       </Card>

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

@@ -0,0 +1,71 @@
+/* @flow */
+/* eslint-disable react/no-multi-comp */
+import React, { useState } from 'react'
+import {
+  Body,
+  FileUpload,
+  List,
+  ListItem,
+} from '../..'
+const AcceptedFilesList = ({ files }: FileList) => (
+  <List>
+    {files.map((file) => (
+      <ListItem key={file.name}>{file.name}</ListItem>
+    ))}
+  </List>
+)
+const RejectedFilesList = ({ files }: FileList) => (
+  <List>
+    {files.map((file) => (
+      <ListItem key={file.name}><Body color="error">{`${file.name} (file too large)`}</Body></ListItem>
+    ))}
+  </List>
+)
+const FileUploadMaxSize = (props) => {
+  const [filesToUpload, setFilesToUpload] = useState([])
+  const [filesRejected, setFilesRejected] = useState([])
+  const [error, setError] = useState()
+  const handleOnFilesAccepted = (files) => {
+    if (files.length) setError()
+    setFilesToUpload([...filesToUpload, ...files])
+  }
+  const handleOnFilesRejected = (error, files) => {
+    setError(error)
+    setFilesRejected([...filesRejected, ...files])
+  }
+  return (
+    <div>
+      <AcceptedFilesList
+          files={filesToUpload}
+          {...props}
+      />
+      <RejectedFilesList
+          files={filesRejected}
+          {...props}
+      />
+      <FileUpload
+          acceptedFilesDescription="Choose a file or drag it here. 1 MB size limit."
+          maxSize={1000000}
+          onFilesAccepted={handleOnFilesAccepted}
+          onFilesRejected={handleOnFilesRejected}
+          {...props}
+      />
+      { error && (
+        <Body
+            color="error"
+            marginY="md"
+        >
+          {error}
+        </Body>
+      )}
+    </div>
+  )
+}
+export default FileUploadMaxSize

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

@@ -6,4 +6,5 @@ examples:
   - file_upload_default: Default List of files to upload
   - file_upload_accept: Accept only certain types of files
   - file_upload_custom_description: Add your one accepted files description
+  - file_upload_max_size: Set a file size limit

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

@@ -1,3 +1,4 @@
 export { default as FileUploadDefault } from './_file_upload_default.jsx'
 export { default as FileUploadAccept } from './_file_upload_accept.jsx'
 export { default as FileUploadCustomDescription } from './_file_upload_custom_description.jsx'
+export { default as FileUploadMaxSize } from './_file_upload_max_size.jsx'

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

@@ -27,14 +27,14 @@ test('shows default drag text', () => {
   expect(kit).toHaveTextContent('Choose a file or drag it here')
 })
-test('shows type-specific drag text', () => {
+test('displays max file size text', () => {
   render(
     <FileUpload
-        accept={['image/svg+xml']}
         data={{ testid: testid }}
+        maxSize={1e+6}
     />
   )
   const kit = screen.getByTestId(testid)
-  expect(kit).toHaveTextContent('Choose a file or drag it here. The accepted file types are: svg+xml')
+  expect(kit).toHaveTextContent('Choose a file or drag it here. Max file size is 1 MB.')
 })

data/app/pb_kits/playbook/pb_selectable_list/_item.jsx CHANGED Viewed

@@ -1,6 +1,6 @@
 /* @flow */
-import React, { Node } from 'react'
+import React, { Node, useState } from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
@@ -50,8 +50,19 @@ const SelectableListItem = ({
     className
   )
+  const initialCheckedState = checked
+  const [checkedState, setCheckedState] = useState(initialCheckedState)
+  const handleChecked = (event) => {
+    onChange(event)
+    setCheckedState(event.target.checked)
+  }
   return (
-    <ListItem {...props}>
+    <ListItem
+        {...props}
+        className={classnames(checkedState ? "checked_item" : "", className)}
+    >
       <div
           {...ariaProps}
           {...dataProps}
@@ -60,10 +71,10 @@ const SelectableListItem = ({
         <Choose>
           <When condition={variant == 'checkbox'}>
             <Checkbox
-                checked={checked}
+                checked={checkedState}
                 id={id}
                 name={name}
-                onChange={onChange}
+                onChange={handleChecked}
                 // eslint suppressor, text is needed to display on screen
                 text={label || (text && false)}
                 type="checkbox"

data/app/pb_kits/playbook/pb_selectable_list/_selectable_list.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 /* @flow */
-import React from 'react'
+import React, { useState } from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
@@ -29,7 +29,29 @@ const SelectableList = (props: SelectableListProps) => {
   const ariaProps = buildAriaProps(aria)
   const classes = classnames(buildCss('pb_selectable_list_kit'), globalProps(props), className)
   const dataProps = buildDataProps(data)
+  const isRadio = props.variant === "radio"
+  const defaultCheckedRadioValue = children.filter(item => item.props.defaultChecked)[0]?.props?.value
+  const [selectedRadioValue, setSelectedRadioValue] = useState(defaultCheckedRadioValue)
+  const onChangeRadioValue = ({ target }) => {
+    setSelectedRadioValue(target.value)
+  }
+  let selectableListItems = children
+  if (isRadio) {
+    selectableListItems = children.map(({ props }) => {
+      return (
+        <SelectableListItem
+            {...props}
+            className={classnames(selectedRadioValue === props.value ? "checked_item" : "", props.className)}
+            key={props.value}
+            onChange={evt => { onChangeRadioValue(evt); props?.onChange?.(evt); }}
+        />
+      )
+    })
+  }
   return (
     <div
         {...ariaProps}
@@ -38,7 +60,7 @@ const SelectableList = (props: SelectableListProps) => {
         id={id}
     >
       <List {...props}>
-        {children}
+        {selectableListItems}
       </List>
     </div>
   )

data/app/pb_kits/playbook/pb_selectable_list/_selectable_list.scss CHANGED Viewed

@@ -7,6 +7,9 @@
     &:hover {
       background-color: $bg_light;
     }
+    &[class*=checked_item] {
+      background-color: $bg_light;
+    }
   }
   [class^=pb_radio_kit] {
     margin-left: $space_xs;

data/app/pb_kits/playbook/pb_selectable_list/selectable_list.html.erb CHANGED Viewed

@@ -5,7 +5,7 @@
     id: object.id) do %>
   <%= pb_rails("list") do %>
     <% object.items.each do |item| %>
-      <%= pb_rails("selectable_list/selectable_list_item", props: item.merge(variant: object.variant) )%>
+      <%= pb_rails("selectable_list/selectable_list_item", props: item.merge(variant: object.variant, id: object.get_id(item)) )%>
     <% end %>
   <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_selectable_list/selectable_list.rb CHANGED Viewed

@@ -1,5 +1,7 @@
 # frozen_string_literal: true
+require "securerandom"
 module Playbook
   module PbSelectableList
     class SelectableList < Playbook::KitBase
@@ -15,6 +17,10 @@ module Playbook
       def classname
         generate_classname("pb_selectable_list_kit")
       end
+      def get_id(item)
+        item[:id] || ("a".."z").to_a.sample(12).join
+      end
     end
   end
 end

data/app/pb_kits/playbook/pb_selectable_list/selectable_list_item.html.erb CHANGED Viewed

@@ -14,4 +14,36 @@
       <%= content %>
     <% end %>
   <% end %>
+  <% if object.variant == "checkbox"%>
+    <script>
+      var checkboxElement = document.querySelector("#<%=object.id%> input[type=checkbox]")
+      checkboxElement.addEventListener("change", (evt) => {
+        var listItemElement = document.querySelector("#<%=object.id%>")
+        if (evt.target.checked) {
+          listItemElement.classList.add("checked_item");
+        } else {
+          listItemElement.classList.remove("checked_item")
+        }
+      })
+    </script>
+  <% else %>
+    <script>
+      var radioElement = document.querySelector("#<%=object.id%> input[type=radio]")
+      radioElement.addEventListener("change", () => {
+        var radios = radioElement.closest("ul").querySelectorAll("input[type=radio]")
+        radios.forEach((radio) => {
+          if (radio.checked) {
+            radio.closest("li").classList.add("checked_item");
+          } else {
+            radio.closest("li").classList.remove("checked_item")
+          }
+        });
+      })
+    </script>
+  <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_selectable_list/selectable_list_item.rb CHANGED Viewed

@@ -4,7 +4,6 @@ module Playbook
   module PbSelectableList
     class SelectableListItem < Playbook::KitBase
       prop :tabindex
       prop :checked, type: Playbook::Props::Boolean,
                      default: false
       prop :name, type: Playbook::Props::String
@@ -17,7 +16,13 @@ module Playbook
                            default: {}
       def classname
-        generate_classname("pb_item_kit")
+        generate_classname("pb_item_kit") + checked_class
+      end
+    private
+      def checked_class
+        checked ? " checked_item" : ""
       end
     end
   end

data/lib/playbook/version.rb CHANGED Viewed

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 module Playbook
-  PREVIOUS_VERSION = "11.12.0"
-  VERSION = "11.12.1"
+  PREVIOUS_VERSION = "11.12.1"
+  VERSION = "11.13.0"
 end

metadata CHANGED Viewed

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 11.12.1
+  version: 11.13.0
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2022-11-22 00:00:00.000000000 Z
+date: 2022-12-06 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -836,20 +836,26 @@ files:
 - app/pb_kits/playbook/pb_dialog/docs/_dialog_default.html.erb
 - app/pb_kits/playbook/pb_dialog/docs/_dialog_default.jsx
 - app/pb_kits/playbook/pb_dialog/docs/_dialog_default.md
+- app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height.html.erb
 - app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height.jsx
 - app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height.md
+- app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height_placement.html.erb
 - app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height_placement.jsx
 - app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height_placement.md
+- app/pb_kits/playbook/pb_dialog/docs/_dialog_scrollable.html.erb
 - app/pb_kits/playbook/pb_dialog/docs/_dialog_scrollable.jsx
 - app/pb_kits/playbook/pb_dialog/docs/_dialog_scrollable.md
 - app/pb_kits/playbook/pb_dialog/docs/_dialog_separators.jsx
 - app/pb_kits/playbook/pb_dialog/docs/_dialog_separators.md
+- app/pb_kits/playbook/pb_dialog/docs/_dialog_should_close_on_overlay.html.erb
 - app/pb_kits/playbook/pb_dialog/docs/_dialog_should_close_on_overlay.jsx
 - app/pb_kits/playbook/pb_dialog/docs/_dialog_should_close_on_overlay.md
 - app/pb_kits/playbook/pb_dialog/docs/_dialog_sizes.html.erb
 - app/pb_kits/playbook/pb_dialog/docs/_dialog_sizes.jsx
+- app/pb_kits/playbook/pb_dialog/docs/_dialog_stacked_alert.html.erb
 - app/pb_kits/playbook/pb_dialog/docs/_dialog_stacked_alert.jsx
 - app/pb_kits/playbook/pb_dialog/docs/_dialog_stacked_alert.md
+- app/pb_kits/playbook/pb_dialog/docs/_dialog_status.html.erb
 - app/pb_kits/playbook/pb_dialog/docs/_dialog_status.jsx
 - app/pb_kits/playbook/pb_dialog/docs/_dialog_status.md
 - app/pb_kits/playbook/pb_dialog/docs/example.yml
@@ -870,8 +876,8 @@ files:
 - app/pb_kits/playbook/pb_docs/kit_api.rb
 - app/pb_kits/playbook/pb_docs/kit_example.html.erb
 - app/pb_kits/playbook/pb_docs/kit_example.rb
-- app/pb_kits/playbook/pb_enhanced_element/element_observer.js
-- app/pb_kits/playbook/pb_enhanced_element/index.js
+- 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
 - app/pb_kits/playbook/pb_file_upload/_file_upload.tsx
 - app/pb_kits/playbook/pb_file_upload/docs/_description.md
@@ -879,6 +885,7 @@ files:
 - app/pb_kits/playbook/pb_file_upload/docs/_file_upload_custom_description.jsx
 - app/pb_kits/playbook/pb_file_upload/docs/_file_upload_custom_description.md
 - app/pb_kits/playbook/pb_file_upload/docs/_file_upload_default.jsx
+- app/pb_kits/playbook/pb_file_upload/docs/_file_upload_max_size.jsx
 - app/pb_kits/playbook/pb_file_upload/docs/example.yml
 - app/pb_kits/playbook/pb_file_upload/docs/index.js
 - app/pb_kits/playbook/pb_file_upload/fileupload.test.js