playbook_ui 11.11.0 → 11.13.0.pre.alpha.fileupload1

data/app/pb_kits/playbook/pb_dialog/dialog_footer.html.erb

@@ -0,0 +1,13 @@
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    aria: object.aria) do %>
+    <%= pb_rails("flex", props: { classname:object.classname, spacing:"between", padding_x:"sm", padding:"sm", padding_bottom:"sm" }) do %>
+        <%= pb_rails("button", props: { type: "submit", id: object.confirm_button_id }) do %>
+            <%= object.confirm_button %>
+        <% end %>
+        <%= pb_rails("button", props: { data: {"close-dialog": "#{object.id}" }, id: object.cancel_button_id, variant: "link"}) do %>
+            <%= object.cancel_button %>
+        <% end %>
+    <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_dialog/dialog_footer.rb

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbDialog
+    class DialogFooter < Playbook::KitBase
+      prop :cancel_button
+      prop :confirm_button
+      prop :confirm_button_id
+      prop :cancel_button_id
+
+      def classname
+        generate_classname("dialog_footer")
+      end
+    end
+  end
+end

data/app/pb_kits/playbook/pb_dialog/dialog_header.html.erb

@@ -0,0 +1,13 @@
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    aria: object.aria) do %>
+        <%= pb_rails("flex", props: {classname:object.classname, spacing:"between", padding:"sm", align:"center"}) do %>
+            <%= content.presence || object.title %>
+            
+            <button class="dialog-button-class" data-close-dialog= <%= object.id %> >
+                <%= pb_rails("icon", props:{icon: "times"}) %>
+            </button>
+        <% end %>
+        <%= pb_rails("section_separator") %>
+<% end %>

data/app/pb_kits/playbook/pb_dialog/dialog_header.rb

@@ -2,28 +2,11 @@
 
 module Playbook
   module PbDialog
-    class DialogHeader
-      include Playbook::Props
-
-      partial "pb_dialog/child_kits/dialog_header"
-
-      prop :closeable, type: Playbook::Props::Boolean, default: true
-      prop :padding
-      prop :separator, type: Playbook::Props::Boolean, default: true
-      prop :spacing
-      prop :text
+    class DialogHeader < Playbook::KitBase
       prop :title
 
-      def dialog_header_options
-        {
-          id: id,
-          closeable: closeable,
-          padding: padding,
-          separator: separator,
-          spacing: spacing,
-          text: text,
-          title: title,
-        }
+      def classname
+        generate_classname("dialog_header")
       end
     end
   end

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_compound_components.html.erb

@@ -0,0 +1,12 @@
+<%= pb_rails("button", props: { text: "Open Complex Dialog", data:{"open-dialog": "dialog-complex"} }) %>
+
+<%= pb_rails("dialog", props: { id:"dialog-complex", size: "lg" }) do %>
+    <%= pb_rails("dialog/dialog_header", props: { id: "dialog-complex" } ) do %>
+        <%= pb_rails("caption", props: { text: "This is a complex dialog" }) %>
+    <% end %>
+    <%= pb_rails("dialog/dialog_body") do %>
+        <%= pb_rails("caption", props: { text: "Description", margin_bottom: "xs" }) %>
+        <%= pb_rails("rich_text_editor", props: {id: "default", value: "Add your text here"}) %>
+    <% end %>
+    <%= pb_rails("dialog/dialog_footer", props: {cancel_button: "Cancel", confirm_button: "Confirm", confirm_button_id:"confirm-complex", id: "dialog-complex"}) %>
+<% end %>

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_compound_components.md

@@ -1,2 +1,4 @@
 The dialog kit also supports customizing your dialog with a [compound component](https://kentcdodds.com/blog/compound-components-with-react-hooks) structure.
-This allows for greater flexibility and more complex dialogs.
+This allows for greater flexibility and more complex dialogs.
+
+For the Rails version, when using the kit as a compound component it is necessary to pass the same value as the id for the dialog, the dialog header and the dialog footer in order for the opening and closing of the dialog to function as expected.

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_default.html.erb

@@ -0,0 +1,11 @@
+<%= pb_rails("button", props: { text: "Open Dialog", data: {"open-dialog": "dialog-1"} }) %>
+
+<%= pb_rails("dialog", props: { 
+    id:"dialog-1", 
+    size: "sm", 
+    title: "This is a header", 
+    text: "This is a dialog.", 
+    cancel_button: "Cancel", 
+    confirm_button: "Confirm", 
+    confirm_button_id: "confirm-button-1"
+}) %>

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_default.md

@@ -0,0 +1,3 @@
+For the Rails version of the dialog kit, the clickable element being used to open the dialog must be given a `open-dialog` data attribute with a value that is the same as the id being given to the dialog itself. See code example below to see this in action.
+
+Additionally, both the cancel button and the confirm button have optional id props which can be used to pass in a custom id to allow developers to target that button with custom javascript if needed (`confirm_button_id` and `cancel_button_id`).

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_sizes.html.erb

@@ -0,0 +1,29 @@
+<%= pb_rails("button", props: { text: "Small Dialog", data:{"open-dialog": "dialog-sm"} }) %>
+<%= pb_rails("button", props: { text: "Medium Dialog", data:{"open-dialog": "dialog-md"} }) %>
+<%= pb_rails("button", props: { text: "Large Dialog", data:{"open-dialog": "dialog-lg"} }) %>
+
+<%= pb_rails("dialog", props: { 
+    id:"dialog-sm", 
+    size: "sm", 
+    title: "This is a header",
+    text: "I am a small dialog",
+    cancel_button: "Cancel", 
+    confirm_button: "Confirm", 
+   }) %>
+
+
+<%= pb_rails("dialog", props: { 
+    id:"dialog-md", 
+    size: "md",
+    title: "This is a header",
+    text: "I am a medium dialog",
+    cancel_button: "Cancel", confirm_button: "Confirm", 
+     })  %>
+     
+<%= pb_rails("dialog", props: { 
+    id:"dialog-lg", size: "lg",
+    title: "This is a header",
+    text: "I am a large dialog",
+    cancel_button: "Cancel", 
+    confirm_button: "Confirm"
+     }) %>

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

@@ -1,6 +1,9 @@
 examples:
 
   rails:
+  - dialog_default: Simple
+  - dialog_compound_components: Complex
+  - dialog_sizes: Sizes
 
   react:
   - dialog_default: Simple

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

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

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

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

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

@@ -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_icon/_icon.tsx

@@ -34,6 +34,7 @@ type IconProps = {
   pulse?: boolean,
   rotation?: 90 | 180 | 270,
   size?: IconSizes,
+  fontStyle?: 'far' | 'fas' | 'fab',
   spin?: boolean,
 } & GlobalProps
 
@@ -61,6 +62,7 @@ const Icon = (props: IconProps) => {
     pulse = false,
     rotation,
     size,
+    fontStyle = 'far',
     spin = false,
   } = props
 
@@ -85,7 +87,7 @@ const Icon = (props: IconProps) => {
   const classes = classnames(
     flipMap[flip],
     'pb_icon_kit',
-    customIcon ? '' : 'far',
+    customIcon ? '' : fontStyle,
     faClasses,
     globalProps(props),
     className

data/app/pb_kits/playbook/pb_icon/icon.rb

@@ -32,13 +32,16 @@ module Playbook
       prop :size, type: Playbook::Props::Enum,
                   values: ["lg", "xs", "sm", "1x", "2x", "3x", "4x", "5x", "6x", "7x", "8x", "9x", "10x", nil],
                   default: nil
+      prop :font_style, type: Playbook::Props::Enum,
+                        values: %w[far fas fab],
+                        default: "far"
       prop :spin, type: Playbook::Props::Boolean,
                   default: false
 
       def classname
         generate_classname(
           "pb_icon_kit",
-          "far",
+          font_style_class,
           icon_class,
           border_class,
           fixed_width_class,
@@ -131,6 +134,10 @@ module Playbook
         size ? "fa-#{size}" : nil
       end
 
+      def font_style_class
+        font_style ? font_style.to_s : "far"
+      end
+
       def spin_class
         spin ? "fa-spin" : nil
       end

data/app/pb_kits/playbook/pb_icon/icon.test.js

@@ -0,0 +1,155 @@
+import React from 'react'
+import { render, screen, cleanup } from '../utilities/test-utils'
+
+import Icon from './_icon'
+
+const testId = "icon-kit"
+
+describe("Icon Kit", () => {
+    test("renders Icon classname", () => {
+        render(
+            <Icon
+                data={{ testid: testId }}
+                fixedWidth
+                icon="user"
+      />
+        )
+
+        const kit = screen.getByTestId(testId)
+        expect(kit).toHaveClass("fa-user pb_icon_kit fa-fw far")
+    })
+
+    test("renders rotate prop", () => {[
+        "90", "180", "270"].forEach((rotateProp)=> {
+        render(
+            <Icon
+                data={{ testid: testId }}
+                fixedWidth
+                icon="user"
+                rotation={rotateProp}
+      />
+        )
+
+        const kit = screen.getByTestId(testId)
+        expect(kit).toHaveClass(`fa-user pb_icon_kit fa-fw fa-rotate-${rotateProp} far`)
+
+        cleanup()
+    })
+})
+
+    test("renders flip prop", () => {
+        render(
+            <Icon
+                data={{ testid: testId }}
+                fixedWidth
+                flip="horizontal"
+                icon="user"
+      />
+        )
+
+        const kit = screen.getByTestId(testId)
+        expect(kit).toHaveClass("fa-user pb_icon_kit fa-fw fa-flip-horizontal far")
+    })
+
+
+    test("renders spinning icon", () => {
+        render(
+            <Icon
+                data={{ testid: testId }}
+                fixedWidth
+                icon="spinner"
+                spin
+      />
+        )
+
+        const kit = screen.getByTestId(testId)
+        expect(kit).toHaveClass("fa-spinner pb_icon_kit fa-fw fa-spin far")
+    })
+
+    test("renders pull icon", () => {
+        render(
+            <Icon
+                data={{ testid: testId }}
+                fixedWidth
+                icon="arrow-left"
+                pull="left"
+      />
+        )
+
+        const kit = screen.getByTestId(testId)
+        expect(kit).toHaveClass("fa-arrow-left pb_icon_kit fa-fw fa-pull-left far")
+    })
+
+    test("renders pull icon", () => {
+        render(
+            <Icon
+                data={{ testid: testId }}
+                fixedWidth
+                icon="arrow-left"
+                pull="left"
+      />
+        )
+
+        const kit = screen.getByTestId(testId)
+        expect(kit).toHaveClass("fa-arrow-left pb_icon_kit fa-fw fa-pull-left far")
+    })
+
+    test("renders border around icon", () => {
+        render(
+            <Icon
+                border
+                data={{ testid: testId }}
+                fixedWidth
+                icon="user"
+      />
+        )
+
+        const kit = screen.getByTestId(testId)
+        expect(kit).toHaveClass("fa-user pb_icon_kit fa-border fa-fw far")
+    })
+
+    test("renders size prop", () => {
+        ["lg",
+        "sm",
+        "xs",
+        "1x",
+        "2x",
+        "3x",
+        "4x",
+        "5x",
+        "6x",
+        "7x",
+        "8x",
+        "9x",
+        "10x"].forEach(
+            (sizeProp) => {
+            render(
+                <Icon
+                    data={{ testid: testId }}
+                    icon="user"
+                    size={sizeProp}
+          />
+            )
+    
+            const kit = screen.getByTestId(testId)
+            expect(kit).toHaveClass(`pb_icon_kit fa-user fa-fw fa-${sizeProp} far`)
+
+            cleanup()
+        }) 
+    })
+
+    test("renders fontStyle prop", () => {
+        render(
+            <Icon
+                data={{ testid: testId }}
+                fixedWidth
+                fontStyle="fas"
+                icon="user"
+      />
+        )
+
+        const kit = screen.getByTestId(testId)
+        expect(kit).toHaveClass("fa-user pb_icon_kit fa-fw fas")
+    })
+
+})

data/app/pb_kits/playbook/pb_legend/{_legend.jsx → _legend.tsx}

@@ -1,5 +1,3 @@
-/* @flow */
-
 import React from 'react'
 import classnames from 'classnames'
 
@@ -10,7 +8,7 @@ import Body from '../pb_body/_body'
 import Title from '../pb_title/_title'
 
 type LegendProps = {
-  aria?: object,
+  aria?: { [key: string]: string },
   className?: string,
   color?: string,
   dark?: boolean,
@@ -59,14 +57,16 @@ const Legend = (props: LegendProps) => {
         <span className={`${customColor ? "pb_legend_indicator_circle_custom" : "pb_legend_indicator_circle"}`}
             style={customColorStyle} 
         />
-        <If condition={prefixText}>
-          <Title
+        {
+          prefixText && (
+            <Title
               dark={dark}
               size={4}
               tag="span"
               text={` ${prefixText} `}
           />
-        </If>
+          )
+        }
         {` ${text} `}
       </Body>
     </div>

data/app/pb_kits/playbook/pb_legend/legend.test.js

@@ -27,3 +27,32 @@ test('color prop', () => {
   const kit = screen.getByTestId('primary-test')
   expect(kit).toHaveClass('pb_legend_kit_category_17')
 })
+
+test('prefixText prop renders', () => {
+  render(
+    <Legend
+        color="category_17"
+        data={{ testid: 'primary-test' }}
+        prefixText="10"
+        text="Test colors"
+    />
+  )
+
+  const kit = screen.getByTestId('primary-test')
+  const prefix = kit.querySelector(".pb_title_kit_size_4")
+  expect(prefix).toBeInTheDocument()
+})
+
+test('Color prop renders with custom HEX value', () => {
+  render(
+    <Legend
+        color="#dc418a"
+        data={{ testid: 'primary-test' }}
+        text="Test colors"
+    />
+  )
+
+  const kit = screen.getByTestId('primary-test')
+  const circle = kit.querySelector(".pb_legend_indicator_circle_custom")
+  expect(circle).toHaveStyle('background: rgb(220, 65, 138);')
+})