playbook_ui 11.9.0.pre.alpha.fileupload1 → 11.10.0

data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_size.jsx

@@ -0,0 +1,68 @@
+import React from 'react'
+import { Collapsible } from '../..'
+
+const CollapsibleSize = () => (
+  <div>
+    <Collapsible
+        iconSize="xs"
+        marginBottom="xs"
+    >
+      <Collapsible.Main>
+        <div>{'Extra Small Section'}</div>
+      </Collapsible.Main>
+      <Collapsible.Content>
+        <div>
+          {
+            'Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vel erat sed purus hendrerit viverra. Duis et vestibulum metus. Sed consequat ut ante non vehicula. Etiam nunc massa, pharetra vel quam id, posuere rhoncus quam. Quisque imperdiet arcu enim, nec aliquet justo auctor eget. Curabitur in metus nec nunc rhoncus faucibus vitae ac elit. Nulla facilisi. Vestibulum quis pretium nulla. Nulla ut accumsan velit. Duis varius urna sed sem tempor, sit amet fermentum nibh auctor. Praesent lorem arcu, egestas non ante quis, placerat pellentesque lectus.Vestibulum lacinia ipsum quis venenatis tristique. Vivamus suscipit, libero eu fringilla egestas, orci urna commodo arcu, vel gravida turpis ipsum molestie nibh. Donec cursus eu ante sagittis ultrices. Phasellus id sagittis risus. Mauris dapibus neque faucibus, tempor ligula vel, cursus ante. Donec faucibus gravida porta. Nullam egestas est quis aliquam feugiat. Sed eget metus diam. Cras eget placerat libero.'
+          }
+        </div>
+      </Collapsible.Content>
+    </Collapsible>
+    <Collapsible
+        iconSize="sm"
+        marginBottom="xs"
+    >
+      <Collapsible.Main>
+        <div>{'Small Section'}</div>
+      </Collapsible.Main>
+      <Collapsible.Content>
+        <div>
+          {
+            'Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vel erat sed purus hendrerit viverra. Duis et vestibulum metus. Sed consequat ut ante non vehicula. Etiam nunc massa, pharetra vel quam id, posuere rhoncus quam. Quisque imperdiet arcu enim, nec aliquet justo auctor eget. Curabitur in metus nec nunc rhoncus faucibus vitae ac elit. Nulla facilisi. Vestibulum quis pretium nulla. Nulla ut accumsan velit. Duis varius urna sed sem tempor, sit amet fermentum nibh auctor. Praesent lorem arcu, egestas non ante quis, placerat pellentesque lectus.Vestibulum lacinia ipsum quis venenatis tristique. Vivamus suscipit, libero eu fringilla egestas, orci urna commodo arcu, vel gravida turpis ipsum molestie nibh. Donec cursus eu ante sagittis ultrices. Phasellus id sagittis risus. Mauris dapibus neque faucibus, tempor ligula vel, cursus ante. Donec faucibus gravida porta. Nullam egestas est quis aliquam feugiat. Sed eget metus diam. Cras eget placerat libero.'
+          }
+        </div>
+      </Collapsible.Content>
+    </Collapsible>
+    <Collapsible
+        marginBottom="xs"
+    >
+      <Collapsible.Main>
+        <div>{'Default Section'}</div>
+      </Collapsible.Main>
+      <Collapsible.Content>
+        <div>
+          {
+            'Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vel erat sed purus hendrerit viverra. Duis et vestibulum metus. Sed consequat ut ante non vehicula. Etiam nunc massa, pharetra vel quam id, posuere rhoncus quam. Quisque imperdiet arcu enim, nec aliquet justo auctor eget. Curabitur in metus nec nunc rhoncus faucibus vitae ac elit. Nulla facilisi. Vestibulum quis pretium nulla. Nulla ut accumsan velit. Duis varius urna sed sem tempor, sit amet fermentum nibh auctor. Praesent lorem arcu, egestas non ante quis, placerat pellentesque lectus.Vestibulum lacinia ipsum quis venenatis tristique. Vivamus suscipit, libero eu fringilla egestas, orci urna commodo arcu, vel gravida turpis ipsum molestie nibh. Donec cursus eu ante sagittis ultrices. Phasellus id sagittis risus. Mauris dapibus neque faucibus, tempor ligula vel, cursus ante. Donec faucibus gravida porta. Nullam egestas est quis aliquam feugiat. Sed eget metus diam. Cras eget placerat libero.'
+          }
+        </div>
+      </Collapsible.Content>
+    </Collapsible>
+    <Collapsible
+        iconSize="lg"
+        marginBottom="xs"
+    >
+      <Collapsible.Main>
+        <div>{'Large Section'}</div>
+      </Collapsible.Main>
+      <Collapsible.Content>
+        <div>
+          {
+            'Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vel erat sed purus hendrerit viverra. Duis et vestibulum metus. Sed consequat ut ante non vehicula. Etiam nunc massa, pharetra vel quam id, posuere rhoncus quam. Quisque imperdiet arcu enim, nec aliquet justo auctor eget. Curabitur in metus nec nunc rhoncus faucibus vitae ac elit. Nulla facilisi. Vestibulum quis pretium nulla. Nulla ut accumsan velit. Duis varius urna sed sem tempor, sit amet fermentum nibh auctor. Praesent lorem arcu, egestas non ante quis, placerat pellentesque lectus.Vestibulum lacinia ipsum quis venenatis tristique. Vivamus suscipit, libero eu fringilla egestas, orci urna commodo arcu, vel gravida turpis ipsum molestie nibh. Donec cursus eu ante sagittis ultrices. Phasellus id sagittis risus. Mauris dapibus neque faucibus, tempor ligula vel, cursus ante. Donec faucibus gravida porta. Nullam egestas est quis aliquam feugiat. Sed eget metus diam. Cras eget placerat libero.'
+          }
+        </div>
+      </Collapsible.Content>
+    </Collapsible>
+  </div>
+)
+
+export default CollapsibleSize

data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_size.md

@@ -0,0 +1,4 @@
+##### Prop
+This kit uses `icon` sizes. If you don't give it a size, it will default to medium. You can be replaced with the sizes below:
+
+* `lg` `xs` `sm` `1x` `2x` `3x` `4x` `5x` `6x` `7x` `8x` `9x` `10x`

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

@@ -1,9 +1,11 @@
 examples:
 
   rails:
-  - collapsible_default: Light
+  - collapsible_default: Default
+  - collapsible_size: Size
+  - collapsible_color: Color
 
   react:
-  - collapsible_default: Light
-  
-  
+  - collapsible_default: Default
+  - collapsible_size: Size
+  - collapsible_color: Color

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

@@ -1 +1,3 @@
 export { default as CollapsibleDefault } from './_collapsible_default.jsx'
+export { default as CollapsibleSize } from './_collapsible_size.jsx'
+export { default as CollapsibleColor } from './_collapsible_color.jsx'

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

@@ -12,42 +12,26 @@ import Card from '../pb_card/_card'
 type FileUploadProps = {
   accept?: string[],
   className?: string,
-  data?: {[key: string]: string | number},
+  data?: object,
   acceptedFilesDescription?: string,
-  maxSize?: number,
   onFilesAccepted: Callback<File, File>,
-  onFilesRejected: Callback<string, string>,
 }
 
-const getFormattedFileSize = (fileSize: number): string => {
-  return `${fileSize / 1e+6} MB`
-}
-
-const FileUpload = (props: FileUploadProps): React.ReactElement => {
+const FileUpload = (props: FileUploadProps) => {
   const {
     accept = null,
     acceptedFilesDescription = '',
     className,
     data = {},
-    maxSize,
     onFilesAccepted = noop,
-    onFilesRejected = noop,
   } = props
 
-  const onDrop = useCallback((files) => {
-    onFilesAccepted(files)
-  }, [onFilesAccepted])
-  const { getRootProps, getInputProps, isDragActive, rejectedFiles } = useDropzone({
+  const onDrop = useCallback((files) => onFilesAccepted(files), []);
+  const { getRootProps, getInputProps, isDragActive } = useDropzone({
     accept,
-    maxSize,
     onDrop,
   })
 
-  const getMaxFileSizeText = () => `Max file size is ${getFormattedFileSize(maxSize)}.`
-
-  const isFileTooLarge = maxSize && rejectedFiles.length > 0 && rejectedFiles[0].size > maxSize;
-  if (isFileTooLarge) onFilesRejected(`File size is too large! ${getMaxFileSizeText()}`)
-
   const acceptedFileTypes = () => {
     return accept.map((fileType) => {
       if (fileType.startsWith('image/')) {
@@ -60,13 +44,6 @@ const FileUpload = (props: FileUploadProps): React.ReactElement => {
 
   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 += ` ${getMaxFileSizeText()}`
-    return msg
-  }
-
   return (
     <div
         className={classnames(buildCss('pb_file_upload_kit'), globalProps(props), className)}
@@ -79,7 +56,7 @@ const FileUpload = (props: FileUploadProps): React.ReactElement => {
           {isDragActive ?
             <p>{'Drop the files here ...'}</p>
             :
-            <p>{getDescription()}</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>
           }
         </Body>
       </Card>

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

@@ -6,5 +6,4 @@ 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,4 +1,3 @@
 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('displays max file size text', () => {
+test('shows type-specific drag 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. Max file size is 1 MB.')
+  expect(kit).toHaveTextContent('Choose a file or drag it here. The accepted file types are: svg+xml')
 })

data/app/pb_kits/playbook/pb_filter/_filter.scss

@@ -73,7 +73,6 @@
   }
 
   .maskContainer::after {
-    background-image: linear-gradient(to right, rgba($card_light,.3) , rgba($card_light,1));
     content: " ";
     height: 48px;
     padding-left: $space_xl;
@@ -82,7 +81,6 @@
   }
 
   .maskContainer::before {
-    background-image: linear-gradient(to right, rgba($card_light,.3) , rgba($card_light,1));
     content: " ";
     height: 48px;
     padding-right: $space_sm;

data/app/pb_kits/playbook/pb_filter/docs/_description.md

@@ -1,3 +1,7 @@
-**Note**
 This kit can be implemented in a variety of ways.
 To see examples of how to implement this kit in production visit the **/dev_docs/search** page in production.
+
+**Note**
+All React examples are wrapped in a <code>{closePopover}</code> method to ensure the popover closes on click of "Apply".
+
+The `min_width` prop for the popover inside of filter is used in all the examples and is set to 360px. That is the `min_width` prop we recommend using as it is the same pixel value as our `max_width` `sm` global prop.

data/app/pb_kits/playbook/pb_filter/docs/_filter_default.html.erb

@@ -1,7 +1,8 @@
 <%=
   pb_rails("filter", props: {
-    min_width: "375px",
+    min_width: "360px",
     id: "1",
+    margin_bottom: "xl",
     filters: [
       { name: "name", value: "John Wick" },
       { name: "city", value: "San Francisco"}
@@ -21,12 +22,12 @@
       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 away...", value: 5)
+      OpenStruct.new(name: "A galaxy 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.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true } %>
 
     <%= form.actions do |action| %>
       <%= action.submit props: { text: "Apply", data: { disable_with: "<i class='far fa-spinner fa-spin mr-3'></i>Searching...".html_safe },}%>
@@ -35,12 +36,10 @@
   <% end %>
 <% end %>
 
-<br>
-<br>
 
 <%=
   pb_rails("filter", props: {
-    min_width: "375px",
+    min_width: "360px",
     id: "def2",
     sort_menu: [
       { item: "Popularity", link: "?q[sorts]=managers_popularity+asc", active: true, direction: "desc" },
@@ -57,12 +56,12 @@
       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 away...", value: 5)
+      OpenStruct.new(name: "A galaxy 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.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true } %>
 
     <%= form.actions do |action| %>
       <%= action.submit props: { text: "Apply", data: { disable_with: "<i class='far fa-spinner fa-spin mr-3'></i>Searching...".html_safe },}%>

data/app/pb_kits/playbook/pb_filter/docs/_filter_default.jsx

@@ -22,6 +22,7 @@ const FilterDefault = (props) => {
             'Full Name': 'John Wick',
             'City': 'San Francisco',
           }}
+          marginBottom="xl"
           minWidth="375px"
           onSortChange={SortingChangeCallback}
           results={1}
@@ -35,37 +36,43 @@ const FilterDefault = (props) => {
           sortValue={[{ name: 'popularity', dir: 'desc' }]}
           {...props}
       >
-        <TextInput
-            label="Full Name"
-            placeholder="Enter name"
-            {...props}
-        />
+      {({ closePopover }) => (
+        <form>
 
-        <Select
-            blankSelection="Select One..."
-            label="Territory"
-            maxWidth="sm"
-            name="location"
-            options={options}
-            {...props}
-        />
-        <Flex
-            spacing="between"
-            {...props}
-        >
-          <Button
-              text="Apply"
+          <TextInput
+              label="Full Name"
+              placeholder="Enter name"
               {...props}
           />
-          <Button
-              text="Clear"
-              variant="secondary"
+
+          <Select
+              blankSelection="Select One..."
+              label="Territory"
+              maxWidth="sm"
+              name="location"
+              options={options}
               {...props}
           />
-        </Flex>
+          <Flex
+              spacing="between"
+              {...props}
+          >
+            <Button
+                onClick={closePopover}
+                text="Apply"
+                {...props}
+            />
+            <Button
+                text="Clear"
+                variant="secondary"
+                {...props}
+            />
+          </Flex>
+        </form>
+      )}
+
       </Filter>
 
-      <br />
 
       <Filter
           double
@@ -82,33 +89,39 @@ const FilterDefault = (props) => {
           sortValue={[{ name: 'popularity', dir: 'desc' }]}
           {...props}
       >
-        <TextInput
-            label="Example Text Field"
-            placeholder="Enter Text"
-            {...props}
-        />
+      {({ closePopover }) => (
+        <form>
 
-        <Select
-            blankSelection="Select One..."
-            label="Example Collection Select"
-            name="Collection Select"
-            options={options}
-            {...props}
-        />
-        <Flex
-            spacing="between"
-            {...props}
-        >
-          <Button
-              text="Apply"
+          <TextInput
+              label="Example Text Field"
+              placeholder="Enter Text"
               {...props}
           />
-          <Button
-              text="Clear"
-              variant="secondary"
+
+          <Select
+              blankSelection="Select One..."
+              label="Example Collection Select"
+              name="Collection Select"
+              options={options}
               {...props}
           />
-        </Flex>
+          <Flex
+              spacing="between"
+              {...props}
+          >
+            <Button
+                onClick={closePopover}
+                text="Apply"
+                {...props}
+            />
+            <Button
+                text="Clear"
+                variant="secondary"
+                {...props}
+            />
+          </Flex>
+        </form>
+      )}
       </Filter>
     </>
   )

data/app/pb_kits/playbook/pb_filter/docs/{_filter_min_width.html.erb → _filter_max_width.html.erb}

@@ -1,6 +1,6 @@
 <%=
   pb_rails("filter", props: {
-    min_width: "375px",
+    min_width: "360px",
     id: "25",
     position: "top",
     filters: [
@@ -22,12 +22,12 @@
       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 away...", value: 5)
+      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: { 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: "<i class='far fa-spinner fa-spin mr-3'></i>Searching...".html_safe },}%>

data/app/pb_kits/playbook/pb_filter/docs/_filter_max_width.jsx

@@ -0,0 +1,69 @@
+import React from 'react'
+import { Button, Filter, Flex, Select } from '../../'
+
+const FilterMaxWidth = (props) => {
+  const options = [
+    { value: 'USA' },
+    { value: 'Canada' },
+    { value: 'Brazil' },
+    { value: 'Philippines' },
+    { value: '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...' },
+  ]
+  return (
+    <Filter
+        {...props}
+        double
+        filters={{
+          'Full Name': 'John Wick',
+          'City': 'San Francisco',
+        }}
+        minWidth="360px"
+        results={1}
+        sortOptions={{
+          popularity: 'Popularity',
+          // eslint-disable-next-line
+          manager_title: 'Manager\'s Title',
+          // eslint-disable-next-line
+          manager_name: 'Manager\'s Name',
+        }}
+        sortValue={[{ name: 'popularity', dir: 'desc' }]}
+    >
+    {({ closePopover }) => (
+      <form>
+
+      <Select
+          blankSelection="Select One..."
+          label="Territory"
+          maxWidth="sm"
+          name="location"
+          options={options}
+      />
+        <Button
+            text="Apply"
+        />
+
+        <Select
+            blankSelection="Select One..."
+            label="Territory"
+            name="location"
+            options={options}
+        />
+        <Flex
+            spacing="between"
+        >
+          <Button
+              onClick={closePopover}
+              text="Apply"
+          />
+          <Button
+              text="Clear"
+              variant="secondary"
+          />
+        </Flex>
+      </form>
+    )}
+    </Filter>
+  )
+}
+
+export default FilterMaxWidth

data/app/pb_kits/playbook/pb_filter/docs/{_filter_default.md → _filter_max_width.md}

@@ -1 +1 @@
-Filter can leverage the max-width property. Learn more in our <a href="https://playbook.powerapp.cloud/visual_guidelines" target="_blank">visual guidelines.</a>
+Filter can leverage the max-width property. Learn more in our <a href="https://playbook.powerapp.cloud/visual_guidelines" target="_blank">visual guidelines.</a>

data/app/pb_kits/playbook/pb_filter/docs/_filter_no_background.html.erb

@@ -1,7 +1,8 @@
 <%=
   pb_rails("filter", props: {
-    min_width: "375px",
+    min_width: "360px",
     id: "3",
+    margin_bottom: "xl",
     background: false,
     filters: [
       { name: "name", value: "John Wick" },
@@ -22,7 +23,7 @@
       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 away...", value: 5)
+      OpenStruct.new(name: "A galaxy far far away...", value: 5)
     ]
   %>
 
@@ -37,11 +38,9 @@
   <% end %>
 <% end %>
 
-<br>
-
 <%=
   pb_rails("filter", props: {
-    min_width: "375px",
+    min_width: "360px",
     id: "4",
     background: false,
     filters: [
@@ -62,7 +61,7 @@
       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 away...", value: 5)
+      OpenStruct.new(name: "A galaxy far far away...", value: 5)
     ]
   %>
   <%= pb_rails("form", props: { form_system_options: { scope: :example, method: :get } }) do |form| %>