playbook_ui 11.9.0.pre.alpha.fileupload1 → 11.9.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 5376b30a51f38366cf934ddf2b1e7924a9b7a1ee80b1825c29f1f3f7b21ec3d9
-  data.tar.gz: f522f4649bf2f6efd3a707023f350b9b2a6518c2f7e6bdbeff5bf639e61d8426
+  metadata.gz: c7907cac22ab4a319dd70e7433325da9f079abbbf23808f11a98048070e86919
+  data.tar.gz: 8eadc10503563e32ef0502098d32fbda57590a6296ebace53df424b135293fcf
 SHA512:
-  metadata.gz: 647e3eb358806661f465ba9e1bdf3a5e2261895e6002c526088289b2170e87fca1cd6b12688ef5d78e981b9045971ef949534bcd27b1e7e23c94b36046be4d26
-  data.tar.gz: 1e19f47ed627201e2569f11e52623491de59111397deb5b38196b869f1361580aee8f49d8c23f0fbc38a971400f5ab47307c359d282d599c933a1b0b7f80915b
+  metadata.gz: 6288cbbe9397dbdf6e68f938453e5cb5211e0b56afd13fac33641c5e366a4a4116695b0da162d5cb3066ebb5a5721914af339490bd37f5150f03a3811c75cd29
+  data.tar.gz: 9c4f76436d01fb6ffad7d3be1473be696360ba68d55b9e06d82861be97d1a5cfbe8e60767989c5689b67e2dce7a35a7c098ccce66c055cd8ff119a581d2a74fd

data/app/pb_kits/playbook/pb_checkbox/_checkbox.scss

@@ -87,6 +87,11 @@ $transition: $transition_cubic;
         border-color: $error_dark;
       }
     }
+    &.pb_checkbox_kit_error {
+      > .pb_checkbox_checkmark {
+        border-color: $error_dark;
+      }
+    }
   }
 
   &.error {
@@ -94,4 +99,9 @@ $transition: $transition_cubic;
       border-color: $error;
     }
   }
+  &.pb_checkbox_kit_error {
+    > .pb_checkbox_checkmark {
+      border-color: $error;
+    }
+  }
 }

data/app/pb_kits/playbook/pb_checkbox/_checkbox.tsx

@@ -45,7 +45,7 @@ const Checkbox = (props: CheckboxProps): JSX.Element => {
   const ariaProps = buildAriaProps(aria)
   const classes = classnames(
     buildCss('pb_checkbox_kit', checked ? 'checked' : null, error ? 'error' : null, indeterminate? 'indeterminate' : null),
-    globalProps(props),        
+    globalProps(props),
     className
   )
 
@@ -59,7 +59,7 @@ const Checkbox = (props: CheckboxProps): JSX.Element => {
   const checkboxChildren = () => {
     if (children)
       return (children)
-    else 
+    else
     return (
     <input
         defaultChecked={checked}

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_home_address_street/_home_address_street.tsx

@@ -110,6 +110,7 @@ const HomeAddressStreet = (props: HomeAddressStreetProps) => {
         <Hashtag
             classname="home-hashtag"
             dark={dark}
+            marginRight="xxs"
             newWindow={newWindow}
             text={homeId}
             type="home"

data/app/pb_kits/playbook/pb_nav/_vertical_nav.scss

@@ -19,7 +19,7 @@ $selector: ".pb_nav_list";
   }
 
   [class*=pb_nav_list_title] {
-    padding: 0 $space_md $space_sm;
+    padding: 0 $space_md $space_sm $space_sm;
   }
 
   // Normal Variant

data/app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.scss

@@ -95,6 +95,12 @@
     a {
       cursor: pointer;
     }
+    ol,
+    ul {
+      li {
+        margin-left: $space_sm;
+      }
+    }
   }
   trix-toolbar {
     .trix-button--icon {

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

@@ -17,7 +17,7 @@ module Playbook
                            default: {}
 
       def classname
-        generate_classname("pb_selectable_list_item_kit")
+        generate_classname("pb_item_kit")
       end
     end
   end

data/app/pb_kits/playbook/pb_table/_table.jsx

@@ -1,6 +1,6 @@
 /* @flow */
 
-import React, { type Node } from 'react'
+import React, { useEffect, type Node } from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildDataProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps'
@@ -45,8 +45,10 @@ const Table = (props: TableProps) => {
   const dataProps = buildDataProps(data)
   const tableCollapseCss = responsive !== 'none' ? `table-collapse-${collapse}` : ''
 
-  const instance = new PbTable()
-  instance.connect()
+  useEffect(() => {
+    const instance = new PbTable()
+    instance.connect()
+  }, [])
 
   return (
     <table

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

@@ -65,12 +65,12 @@ const TextInput = (props: TextInputProps, ref: React.LegacyRef<HTMLInputElement>
   const borderCss = `border_${borderToChange}_${borderToggle}`
 
   const shouldShowAddOn = icon !== null
-  const addOnCss = shouldShowAddOn ? 'text_input_wrapper_add_on' : null
-  const addOnDarkModeCardCss = (shouldShowAddOn && dark) ? 'add-on-card-dark' : null
+  const addOnCss = shouldShowAddOn ? 'text_input_wrapper_add_on' : ""
+  const addOnDarkModeCardCss = (shouldShowAddOn && dark) ? 'add-on-card-dark' : ""
   const css = classnames([
     'pb_text_input_kit',
-    inline ? 'inline' : null,
-    error ? 'error' : null,
+    inline ? 'inline' : "",
+    error ? 'error' : "",
     globalProps(props),
     className,
   ])

data/app/pb_kits/playbook/pb_timeline/_timeline.scss

@@ -110,9 +110,8 @@ $height_from_top: $icon_height/2 - $connector_width/2;
                 &[class*=_solid] {
                     flex-basis: 100%;
                     [class=pb_timeline_item_left_block] {
-                        @include flex_wrapper(column);
+                        display: flex;
                         height: 55px;
-                        justify-content: flex-end;
                         [class=pb_date_stacked_kit_center_sm] {
                             [class=pb_date_stacked_day_month] {
                                 [class=pb_caption_kit_md] {

data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_date.html.erb

@@ -42,3 +42,26 @@
     <% end %>
 <% end %>
 
+<br /><br /><br />
+
+<%= pb_rails("timeline", props: {orientation: "vertical", show_date: true}) do %>
+    <%= pb_rails("timeline/item", props: {icon: "user", icon_color: "royal", line_style: "solid", date: Date.new(2018, 03, 20) }) do %>
+        <%= pb_rails("title_detail", props: {
+            title: "Jackson Heights",
+            detail: "37-27 74th Street"
+        }) %>
+    <% end %>
+    <%= pb_rails("timeline/item", props: {icon: "check", icon_color: "teal", line_style: "dotted" }) do %>
+        <%= pb_rails("title_detail", props: {
+            title: "Greenpoint",
+            detail: "81 Gate St Brooklyn"
+        }) %>
+    <% end %>
+    <%= pb_rails("timeline/item", props: {icon: "map-marker-alt", icon_color: "purple", date: Date.new(2018, 05, 20) }) do %>
+        <%= pb_rails("title_detail", props: {
+            title: "Society Hill",
+            detail: "72 E St Astoria"
+        }) %>
+    <% end %>
+<% end %>
+

data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_date.jsx

@@ -94,6 +94,53 @@ const TimelineWithDate = (props) => (
         />
       </Timeline.Item>
     </Timeline>
+
+    <br/>
+    <br/>
+    <br/>
+
+    <Timeline
+        orientation="vertical"
+        showDate
+        {...props}
+    >
+      <Timeline.Item
+          date={new Date('20 Mar 2018')}
+          icon="user"
+          iconColor="royal"
+          {...props}
+      >
+        <TitleDetail
+            detail="37-27 74th Street"
+            title="Jackson Heights"
+            {...props}
+        />
+      </Timeline.Item>
+      <Timeline.Item
+          icon="check"
+          iconColor="teal"
+          lineStyle="dotted"
+          {...props}
+      >
+        <TitleDetail
+            detail="81 Gate St Brooklyn"
+            title="Greenpoint"
+            {...props}
+        />
+      </Timeline.Item>
+      <Timeline.Item
+          date={new Date('20 May 2018')}
+          icon="map-marker-alt"
+          iconColor="purple"
+          {...props}
+      >
+        <TitleDetail
+            detail="72 E St Astoria"
+            title="Society Hill"
+            {...props}
+        />
+      </Timeline.Item>
+    </Timeline>
   </div>
 )
 

data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_date.md

@@ -0,0 +1 @@
+Use the optional `showDate` prop to render the timeline kit with a visible date. If the date is from the current year, the year will not be displayed, however if date is NOT from the current year, the kit will display the year as well.

data/lib/playbook/version.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
 module Playbook
-  PREVIOUS_VERSION = "11.8.0"
-  VERSION = "11.9.0.pre.alpha.fileupload1"
+  PREVIOUS_VERSION = "11.8.1"
+  VERSION = "11.9.0"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 11.9.0.pre.alpha.fileupload1
+  version: 11.9.0
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2022-10-17 00:00:00.000000000 Z
+date: 2022-10-19 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -854,7 +854,6 @@ 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
@@ -1950,6 +1949,7 @@ files:
 - app/pb_kits/playbook/pb_timeline/docs/_timeline_vertical.jsx
 - app/pb_kits/playbook/pb_timeline/docs/_timeline_with_date.html.erb
 - app/pb_kits/playbook/pb_timeline/docs/_timeline_with_date.jsx
+- app/pb_kits/playbook/pb_timeline/docs/_timeline_with_date.md
 - app/pb_kits/playbook/pb_timeline/docs/example.yml
 - app/pb_kits/playbook/pb_timeline/docs/index.js
 - app/pb_kits/playbook/pb_timeline/item.html.erb
@@ -2310,9 +2310,9 @@ required_ruby_version: !ruby/object:Gem::Requirement
       version: '0'
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
-  - - ">"
+  - - ">="
     - !ruby/object:Gem::Version
-      version: 1.3.1
+      version: '0'
 requirements: []
 rubygems_version: 3.3.7
 signing_key:

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

@@ -1,51 +0,0 @@
-/* @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 FileUploadMaxSize = (props) => {
-  const [filesToUpload, setFilesToUpload] = useState([])
-  const [error, setError] = useState()
-
-  const handleOnFilesAccepted = (files) => {
-    setFilesToUpload([...filesToUpload, ...files])
-  }
-
-  return (
-    <div>
-      <AcceptedFilesList
-          files={filesToUpload}
-          {...props}
-      />
-      <FileUpload
-          acceptedFilesDescription="Choose a file or drag it here. 1 MB size limit."
-          maxSize={1000000}
-          onFilesAccepted={handleOnFilesAccepted}
-          onFilesRejected={(errorMessage) => setError(errorMessage)}
-          {...props}
-      />
-      { error && (
-        <Body
-            color="error"
-            marginY="md"
-        >{error}</Body>
-      )}
-    </div>
-  )
-}
-
-export default FileUploadMaxSize