playbook_ui 14.9.0.pre.alpha.PBNTR746datepickerdefaultbug4903 → 14.9.0.pre.alpha.PLAY1660reactdropzone5020

Sign up to get free protection for your applications and to get access to all the features.
Files changed (55) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom.jsx +53 -49
  3. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom_rails.html.erb +29 -36
  4. data/app/pb_kits/playbook/pb_collapsible/_collapsible.tsx +9 -4
  5. data/app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleContent.tsx +2 -2
  6. data/app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleMain.tsx +2 -2
  7. data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.ts +2 -4
  8. data/app/pb_kits/playbook/pb_drawer/_drawer.tsx +2 -2
  9. data/app/pb_kits/playbook/pb_file_upload/_file_upload.tsx +24 -15
  10. data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_accept.jsx +3 -1
  11. data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_custom_description.jsx +4 -1
  12. data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_max_size.jsx +1 -1
  13. data/app/pb_kits/playbook/pb_layout/_layout.tsx +30 -11
  14. data/app/pb_kits/playbook/pb_link/_link.scss +3 -3
  15. data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_filter.jsx +166 -0
  16. data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_height_width.jsx +2 -0
  17. data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_user.jsx +89 -0
  18. data/app/pb_kits/playbook/pb_skeleton_loading/docs/example.yml +2 -1
  19. data/app/pb_kits/playbook/pb_skeleton_loading/docs/index.js +2 -0
  20. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible.jsx +75 -0
  21. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible.md +1 -0
  22. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_click.jsx +108 -0
  23. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_click.md +2 -0
  24. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_content.jsx +94 -0
  25. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_content.md +0 -0
  26. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_rows.jsx +83 -0
  27. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_rows.md +3 -0
  28. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table.jsx +120 -0
  29. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table.md +1 -0
  30. data/app/pb_kits/playbook/pb_table/docs/example.yml +5 -0
  31. data/app/pb_kits/playbook/pb_table/docs/index.js +5 -0
  32. data/app/pb_kits/playbook/pb_table/styles/_all.scss +2 -1
  33. data/app/pb_kits/playbook/pb_table/styles/_collapsible.scss +35 -0
  34. data/app/pb_kits/playbook/pb_table/subcomponents/_table_row.tsx +106 -1
  35. data/app/pb_kits/playbook/pb_text_input/_text_input.tsx +35 -3
  36. data/app/pb_kits/playbook/pb_text_input/docs/_text_input_mask.jsx +88 -0
  37. data/app/pb_kits/playbook/pb_text_input/docs/example.yml +1 -0
  38. data/app/pb_kits/playbook/pb_text_input/docs/index.js +1 -0
  39. data/app/pb_kits/playbook/pb_text_input/inputMask.ts +64 -0
  40. data/app/pb_kits/playbook/pb_text_input/text_input.test.js +139 -2
  41. data/dist/chunks/_typeahead-CZ_5SxHq.js +36 -0
  42. data/dist/chunks/_weekday_stacked-D345GDEZ.js +45 -0
  43. data/dist/chunks/lib-CuCy3_xO.js +29 -0
  44. data/dist/chunks/{pb_form_validation-DXJs12Hd.js → pb_form_validation-D37k10a0.js} +1 -1
  45. data/dist/chunks/vendor.js +1 -1
  46. data/dist/menu.yml +1 -1
  47. data/dist/playbook-doc.js +1 -1
  48. data/dist/playbook-rails-react-bindings.js +1 -1
  49. data/dist/playbook-rails.js +1 -1
  50. data/dist/playbook.css +1 -1
  51. data/lib/playbook/version.rb +1 -1
  52. metadata +21 -6
  53. data/dist/chunks/_typeahead-8iXlv4ii.js +0 -22
  54. data/dist/chunks/_weekday_stacked-QiMNKnzf.js +0 -45
  55. data/dist/chunks/lib-orI4wF5u.js +0 -29
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: d7b3f96db16633e2d11c150f69e673e06c4b00563a4443b4488b3c70c076e545
4
- data.tar.gz: 1d7bd6f688a3bab9fc3dfdb1865bffc92a88258164a35f99d32ac658222b7a1d
3
+ metadata.gz: 9bd94a16e8f4921dfb9fc4dec855acde1e435ef517754f0622a861ee987a0d63
4
+ data.tar.gz: 8599257f054471735d29bad11278793ed971382e2910dbc50f30dd80b6f85cf2
5
5
  SHA512:
6
- metadata.gz: f7651cee71bffcb59d7fc86fd04ef361acc68620d3a16ecdad34886e240d8447983a06ae0b150c146508a28166bc1efce89a73f5910eeae6482e15069d52bf77
7
- data.tar.gz: 13dda38a57028c9134c8398b2aec92ca4bb50ec6f51db65a1232d3cb704a2113cb7d7a1a6e4a2b1bd589bc4aeff821c293ae206c5202228ed65e8adc39860496
6
+ metadata.gz: 07b3efaee6c1db4128f6225d25d89aac30a35d9747881aca6f065a58d83982fda6373244c2fc9cfce867701b75c2bfbaca56f8980ca3b51886abf2b773e3e84b
7
+ data.tar.gz: 41c4d23b85f2c20877f01bac703b5d50312b5a6e826c1fcc8cb1bb0f0810ce84c118f3334ca9f01489c99c84529b1f4c96df3e8762ce92cf4e8f8326f5a60732
@@ -1,66 +1,70 @@
1
1
  import React from 'react'
2
-
2
+ import ReactDOMServer from 'react-dom/server'
3
3
  import BarGraph from '../_bar_graph'
4
+ import Icon from '../../pb_icon/_icon'
5
+
6
+ const chartData = [
7
+ {
8
+ name: 'Role',
9
+ data: [0, 200, 300, 654, 656],
10
+ },
11
+ {
12
+ name: 'Company',
13
+ data: [150, 524, 320, 440, 500],
14
+ },
15
+ ]
4
16
 
5
- const chartData = [{
6
- name: 'Installation',
7
- data: [1475, 200, 3000, 654, 656],
8
- }, {
9
- name: 'Manufacturing',
10
- data: [4434, 524, 2320, 440, 500],
11
- }, {
12
- name: 'Sales & Distribution',
13
- data: [3387, 743, 1344, 434, 440],
14
- }, {
15
- name: 'Project Development',
16
- data: [3227, 878, 999, 780, 1000],
17
- }, {
18
- name: 'Other',
19
- data: [1111, 677, 3245, 500, 200],
20
- }]
17
+ const renderIcon = (iconName, color) => {
18
+ return ReactDOMServer.renderToStaticMarkup(
19
+ <Icon
20
+ color={color}
21
+ icon={iconName}
22
+ />)
23
+ };
21
24
 
22
25
  const barGraphOptions = {
23
- subtitle: {
24
- text: "Overwritten subtitle",
25
- style: {
26
- color: "red"
27
- }
26
+ yAxis: {
27
+ tickInterval: 5,
28
28
  },
29
29
  xAxis: {
30
- labels: {
31
- useHTML: true,
32
- formatter: function() {
33
- switch (this.value) {
34
- case 'Jan':
35
- return `<i class="far fa-apple-whole"></i> ${this.value}`
36
- case 'Feb':
37
- return `<i class="far fa-strawberry"></i> ${this.value}`
38
- case 'Mar':
39
- return `<i class="far fa-lemon"></i> ${this.value}`
40
- case 'Apr':
41
- return `<i class="far fa-pear"></i> ${this.value}`
42
- case 'May':
43
- return `<i class="far fa-peach"></i> ${this.value}`
44
- default:
45
- return ''
46
- }
47
- }
48
- }
49
- }
30
+ categories: ['1', '2', '3', '4', '5'],
31
+ labels: {
32
+ useHTML: true,
33
+ formatter: function () {
34
+ switch (this.value) {
35
+ case '1':
36
+ return `${renderIcon('frown', 'error')}`;
37
+ case '2':
38
+ return `${renderIcon('frown', 'warning')}`;
39
+ case '3':
40
+ return `${renderIcon('frown-open', 'neutral')}`;
41
+ case '4':
42
+ return `${renderIcon('smile', 'category_7')}`;
43
+ case '5':
44
+ return `${renderIcon('smile-beam', 'success')}`;
45
+ default:
46
+ return ''
47
+ }
48
+ },
49
+ style: {
50
+ fontSize: '1.4em',
51
+ },
52
+ y: 42,
53
+ },
54
+ },
55
+ legend: {
56
+ itemMarginTop: 62,
57
+ },
50
58
  }
51
59
 
52
- const BarGraphCustom = (props) => (
60
+ const BarGraphCustom = () => (
53
61
  <div>
54
62
  <BarGraph
55
- axisTitle="Number of Employees"
56
63
  chartData={chartData}
57
64
  customOptions={barGraphOptions}
58
- id="bar-custom"
59
- subTitle="Subtitle to replace"
65
+ id="happiness-dashboard"
66
+ legend
60
67
  title="Bar Graph with Custom Overrides"
61
- xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May']}
62
- yAxisMin={0}
63
- {...props}
64
68
  />
65
69
  </div>
66
70
  )
@@ -1,49 +1,42 @@
1
1
  <% data = [{
2
- name: 'Installation',
3
- data: [1475,200,3000,654,656]
2
+ name: 'Role',
3
+ data: [0, 200, 300, 654, 656],
4
4
  }, {
5
- name: 'Manufacturing',
6
- data: [4434,524,2320,440,500]
7
- }, {
8
- name: 'Sales & Distribution',
9
- data: [3387,743,1344,434,440,]
10
- }, {
11
- name: 'Project Development',
12
- data: [3227,878,999,780,1000]
13
- }, {
14
- name: 'Other',
15
- data: [1111,677,3245,500,200]
5
+ name: 'Company',
6
+ data: [150, 524, 320, 440, 500],
16
7
  }] %>
17
8
 
18
9
  <% bar_graph_options = {
19
- customOptions: {
20
- subtitle: {
21
- text: "Overwritten subtitle",
22
- style: {
23
- color: "red"
24
- }
10
+ customOptions: {
11
+ yAxis: {
12
+ tickInterval: 5,
13
+ },
14
+ xAxis: {
15
+ categories: [
16
+ raw(pb_rails("icon", props: { icon: "frown", color: "error", size: "2x" })),
17
+ raw(pb_rails("icon", props: { icon: "frown", color: "warning", size: "2x" })),
18
+ raw(pb_rails("icon", props: { icon: "frown-open", color: "neutral", size: "2x" })),
19
+ raw(pb_rails("icon", props: { icon: "smile", color: "category_7", size: "2x" })),
20
+ raw(pb_rails("icon", props: { icon: "smile-beam", color: "success", size: "2x" }))
21
+ ],
22
+ labels: {
23
+ useHTML: true,
24
+ sytle: {
25
+ fontSize: '1.4em',
25
26
  },
26
- xAxis: {
27
- categories: [
28
- '<i class="far fa-apple-whole"></i> Jan',
29
- '<i class="far fa-strawberry"></i> Feb',
30
- '<i class="far fa-lemon"></i> Mar',
31
- '<i class="far fa-pear"></i> Apr',
32
- '<i class="far fa-peach"></i> May'
33
- ],
34
- labels: {
35
- useHTML: true,
36
- }
37
- }
38
- }
27
+ y: 42,
28
+ },
29
+ },
30
+ legend: {
31
+ itemMarginTop: 62,
32
+ },
33
+ }
39
34
  } %>
40
35
 
41
36
  <%= pb_rails("bar_graph", props: {
42
- axis_title: 'Number of Employees',
43
37
  chart_data: data,
44
38
  id: "bar-default",
45
- y_axis_min: 0,
46
- subtitle: 'Subtitle to replace',
39
+ legend: true,
47
40
  title: 'Bar Graph with Custom Overrides',
48
41
  custom_options: bar_graph_options
49
- }) %>
42
+ }) %>
@@ -2,7 +2,7 @@ import React, { useEffect, ReactElement } from 'react'
2
2
  import classnames from 'classnames'
3
3
  import useCollapsible from './useCollapsible'
4
4
 
5
- import { globalProps, globalInlineProps } from '../utilities/globalProps'
5
+ import { globalProps, globalInlineProps, GlobalProps } from '../utilities/globalProps'
6
6
  import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
7
7
 
8
8
  import CollapsibleContent from './child_kits/CollapsibleContent'
@@ -32,6 +32,7 @@ type CollapsibleProps = {
32
32
  onClick?: ()=> void,
33
33
  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
34
34
  id?: string,
35
+ tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'div' | 'tr' | 'th' | 'td' | 'thead' | 'col',
35
36
  }
36
37
 
37
38
  const Collapsible = ({
@@ -47,8 +48,9 @@ const Collapsible = ({
47
48
  onIconClick,
48
49
  onClick,
49
50
  id,
51
+ tag = 'div',
50
52
  ...props
51
- }: CollapsibleProps): React.ReactElement => {
53
+ }: CollapsibleProps & GlobalProps): React.ReactElement => {
52
54
  const [isCollapsed, toggle, setIsCollapsed] = useCollapsible(collapsed)
53
55
 
54
56
  useEffect(()=> {
@@ -76,9 +78,12 @@ const Collapsible = ({
76
78
  className
77
79
  )
78
80
  const dynamicInlineProps = globalInlineProps(props)
81
+
82
+ const Tag: React.ReactElement | any = `${tag}`;
83
+
79
84
  return (
80
85
  <CollapsibleContext.Provider value={{ collapsed: isCollapsed, toggle, icon, iconSize, iconColor, onIconClick, onClick }}>
81
- <div
86
+ <Tag
82
87
  {...ariaProps}
83
88
  {...dataProps}
84
89
  {...htmlProps}
@@ -96,7 +101,7 @@ const Collapsible = ({
96
101
  <CollapsibleContent {...contentProps}>
97
102
  {contentChildren}
98
103
  </CollapsibleContent>
99
- </div>
104
+ </Tag>
100
105
  </CollapsibleContext.Provider>
101
106
  )
102
107
  }
@@ -1,7 +1,7 @@
1
1
  import classnames from 'classnames'
2
2
  import React, { useContext, useRef, useEffect } from 'react'
3
3
  import { buildCss } from '../../utilities/props'
4
- import { globalProps } from '../../utilities/globalProps'
4
+ import { globalProps, GlobalProps } from '../../utilities/globalProps'
5
5
  import { hideElement, showElement } from '../_helper_functions'
6
6
 
7
7
  import CollapsibleContext from '../context'
@@ -15,7 +15,7 @@ const CollapsibleContent = ({
15
15
  children,
16
16
  className,
17
17
  ...props
18
- }: CollapsibleContentProps): React.ReactElement => {
18
+ }: CollapsibleContentProps & GlobalProps): React.ReactElement => {
19
19
  const context: {[key: string]: boolean | string} = useContext(CollapsibleContext)
20
20
  const contentCSS = buildCss('pb_collapsible_content_kit')
21
21
  const contentSpacing = globalProps(props)
@@ -3,7 +3,7 @@
3
3
  import classnames from 'classnames'
4
4
  import React, { useContext } from 'react'
5
5
  import { buildCss } from '../../utilities/props'
6
- import { globalProps } from '../../utilities/globalProps'
6
+ import { globalProps, GlobalProps } from '../../utilities/globalProps'
7
7
 
8
8
  import Flex from '../../pb_flex/_flex'
9
9
  import FlexItem from '../../pb_flex/_flex_item'
@@ -25,7 +25,7 @@ const CollapsibleMain = ({
25
25
  className,
26
26
  cursor = 'pointer',
27
27
  ...props
28
- }: CollapsibleMainProps): React.ReactElement=> {
28
+ }: CollapsibleMainProps & GlobalProps): React.ReactElement=> {
29
29
  const {collapsed, toggle, icon, iconSize, iconColor, onIconClick, onClick}: any = useContext(CollapsibleContext)
30
30
  const mainCSS = buildCss('pb_collapsible_main_kit')
31
31
  const mainSpacing = globalProps(props, { cursor })
@@ -68,7 +68,7 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
68
68
  timeFormat = 'at h:i K',
69
69
  yearRange,
70
70
  } = config
71
- console.log("1 " + JSON.stringify(config));
71
+
72
72
  // ===========================================================
73
73
  // | Hook Definitions |
74
74
  // ===========================================================
@@ -148,8 +148,7 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
148
148
 
149
149
  // time selection
150
150
  if (enableTime) pluginList.push(timeSelectPlugin({ caption: timeCaption, showTimezone: showTimezone}))
151
- console.log("3 " + JSON.stringify(customQuickPickDates));
152
- console.log("4 " + pluginList);
151
+
153
152
  return pluginList
154
153
  }
155
154
 
@@ -245,7 +244,6 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
245
244
 
246
245
  // Reverse month and year dropdown reset on form.reset()
247
246
  if (picker.input.form) {
248
- console.log("5 " + picker.input.form);
249
247
  picker.input.form.addEventListener('reset', () => {
250
248
  // Code block triggers after form.reset() is called and executed
251
249
  setTimeout(() => {
@@ -287,7 +287,6 @@ const Drawer = (props: DrawerProps): React.ReactElement => {
287
287
  {...ariaProps}
288
288
  {...dataProps}
289
289
  {...htmlProps}
290
- style={dynamicInlineProps}
291
290
  className={classnames(drawerClassNames.base, {
292
291
  [drawerClassNames.afterOpen]:
293
292
  animationState === "afterOpen",
@@ -296,6 +295,7 @@ const Drawer = (props: DrawerProps): React.ReactElement => {
296
295
  })}
297
296
  id={id}
298
297
  onClick={(e) => e.stopPropagation()}
298
+ style={dynamicInlineProps}
299
299
  >
300
300
  {children}
301
301
  </div>
@@ -306,7 +306,6 @@ const Drawer = (props: DrawerProps): React.ReactElement => {
306
306
  {...dataProps}
307
307
  {...htmlProps}
308
308
  className={classes}
309
- style={dynamicInlineProps}
310
309
  >
311
310
  {isModalVisible && (
312
311
  <div
@@ -327,6 +326,7 @@ const Drawer = (props: DrawerProps): React.ReactElement => {
327
326
  animationState === "beforeClose",
328
327
  })}
329
328
  onClick={(e) => e.stopPropagation()}
329
+ style={dynamicInlineProps}
330
330
  >
331
331
  {children}
332
332
  </div>
@@ -1,5 +1,5 @@
1
1
  import React, { useEffect, useCallback, useRef } from 'react'
2
- import { useDropzone, DropzoneInputProps, DropzoneRootProps } from 'react-dropzone'
2
+ import { useDropzone, DropzoneInputProps, DropzoneRootProps, FileRejection } from 'react-dropzone'
3
3
  import classnames from 'classnames'
4
4
 
5
5
  import { buildCss, buildDataProps, noop, buildHtmlProps } from '../utilities/props'
@@ -9,8 +9,10 @@ import type { Callback } from '../types'
9
9
  import Body from '../pb_body/_body'
10
10
  import Card from '../pb_card/_card'
11
11
 
12
+ import { isEmpty } from '../utilities/object'
13
+
12
14
  type FileUploadProps = {
13
- accept?: string[],
15
+ accept?: Record<string, string[]>,
14
16
  className?: string,
15
17
  customMessage?: string,
16
18
  dark?: boolean,
@@ -19,7 +21,7 @@ type FileUploadProps = {
19
21
  acceptedFilesDescription?: string,
20
22
  maxSize?: number,
21
23
  onFilesAccepted: Callback<File, File>,
22
- onFilesRejected: (error: string, files: File[]) => void,
24
+ onFilesRejected: (error: string, files: readonly FileRejection[]) => void,
23
25
  }
24
26
 
25
27
  const getFormattedFileSize = (fileSize: number): string => {
@@ -28,7 +30,7 @@ const getFormattedFileSize = (fileSize: number): string => {
28
30
 
29
31
  const FileUpload = (props: FileUploadProps): React.ReactElement => {
30
32
  const {
31
- accept = null,
33
+ accept = {},
32
34
  acceptedFilesDescription = '',
33
35
  className,
34
36
  customMessage,
@@ -48,30 +50,37 @@ const FileUpload = (props: FileUploadProps): React.ReactElement => {
48
50
  getRootProps: () => DropzoneRootProps & any;
49
51
  getInputProps: () => DropzoneInputProps & any;
50
52
  isDragActive: boolean;
51
- rejectedFiles: File[];
53
+ fileRejections: readonly FileRejection[];
52
54
  }
53
55
 
54
- const { getRootProps, getInputProps, isDragActive, rejectedFiles }: DropZoneProps = useDropzone({
56
+ const { getRootProps, getInputProps, isDragActive, fileRejections }: DropZoneProps = useDropzone({
55
57
  accept,
56
58
  maxSize,
57
59
  onDrop,
58
60
  })
59
61
 
60
- const prevRejected = useRef<File[] | null>(null);
62
+ const prevRejected = useRef<readonly FileRejection[] | null>(null);
61
63
 
62
- const maxFileSizeText = `Max file size is ${getFormattedFileSize(maxSize)}.`
64
+ let maxFileSizeText = ''
65
+ if (maxSize !== undefined) {
66
+ maxFileSizeText = `Max file size is ${getFormattedFileSize(maxSize)}.`
67
+ }
63
68
 
64
69
  useEffect(() => {
65
- if (rejectedFiles === prevRejected.current) return
66
- const isFileTooLarge = maxSize && rejectedFiles.length > 0 && rejectedFiles[0].size > maxSize;
70
+ if (fileRejections === prevRejected.current) return
71
+ const isFileTooLarge = maxSize && fileRejections.length > 0 && fileRejections[0].file.size > maxSize;
67
72
  if (isFileTooLarge) {
68
- onFilesRejected(`File size is too large! ${maxFileSizeText}`, rejectedFiles)
73
+ onFilesRejected(`File size is too large! ${maxFileSizeText}`, fileRejections)
69
74
  }
70
- prevRejected.current = rejectedFiles
71
- }, [maxFileSizeText, maxSize, onFilesRejected, rejectedFiles])
75
+ prevRejected.current = fileRejections
76
+ }, [maxFileSizeText, maxSize, onFilesRejected, fileRejections])
72
77
 
73
78
  const acceptedFileTypes = () => {
74
- return accept.map((fileType) => {
79
+ if (!accept) {
80
+ return []
81
+ }
82
+
83
+ return Object.keys(accept).map((fileType) => {
75
84
  if (fileType.startsWith('image/')) {
76
85
  return fileType.replace('image/', ' ')
77
86
  } else {
@@ -86,7 +95,7 @@ const FileUpload = (props: FileUploadProps): React.ReactElement => {
86
95
  const getDescription = () => {
87
96
  return customMessage
88
97
  ? customMessage
89
- : `Choose a file or drag it here.${accept === null ? '' : ` The accepted file types are: ${acceptedFilesDescription || acceptedFileTypes()}.`}${maxSize ? ` ${maxFileSizeText}` : ''}`;
98
+ : `Choose a file or drag it here.${isEmpty(accept) ? '' : ` The accepted file types are: ${acceptedFilesDescription || acceptedFileTypes()}.`}${maxSize ? ` ${maxFileSizeText}` : ''}`;
90
99
  }
91
100
 
92
101
  return (
@@ -28,7 +28,9 @@ const FileUploadAccept = (props) => {
28
28
  {...props}
29
29
  />
30
30
  <FileUpload
31
- accept={['image/svg+xml']}
31
+ accept={{
32
+ "image/svg+xml": [".svg", ".xml"],
33
+ }}
32
34
  onFilesAccepted={handleOnFilesAccepted}
33
35
  {...props}
34
36
  />
@@ -25,7 +25,10 @@ const FileUploadCustomDescription = (props) => {
25
25
  {...props}
26
26
  />
27
27
  <FileUpload
28
- accept={['application/pdf','application/vnd.openxmlformats-officedocument.spreadsheetml.sheet']}
28
+ accept={{
29
+ "application/pdf": [".pdf"],
30
+ "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet": [".xlsx"],
31
+ }}
29
32
  acceptedFilesDescription="Adobe (.pdf) and Microsoft (.xslx)"
30
33
  onFilesAccepted={handleOnFilesAccepted}
31
34
  {...props}
@@ -18,7 +18,7 @@ const AcceptedFilesList = ({ files }) => (
18
18
  const RejectedFilesList = ({ files }) => (
19
19
  <List>
20
20
  {files.map((file) => (
21
- <ListItem key={file.name}><Body color="error">{`${file.name} (file too large)`}</Body></ListItem>
21
+ <ListItem key={file.file.name}><Body color="error">{`${file.file.name} (file too large)`}</Body></ListItem>
22
22
  ))}
23
23
  </List>
24
24
  )
@@ -24,34 +24,37 @@ type LayoutPropTypes = {
24
24
  type LayoutSideProps = {
25
25
  children: React.ReactNode[] | React.ReactNode,
26
26
  className?: string,
27
- }
27
+ } & GlobalProps
28
28
 
29
29
  type LayoutBodyProps = {
30
30
  children: React.ReactNode[] | React.ReactNode,
31
31
  className?: string,
32
- }
32
+ } & GlobalProps
33
33
 
34
34
  type LayoutItemProps = {
35
35
  children: React.ReactNode[] | React.ReactNode,
36
36
  className?: string,
37
37
  size?: "sm" | "md" | "lg"
38
- }
38
+ } & GlobalProps
39
39
 
40
40
  type LayoutHeaderProps = {
41
41
  children: React.ReactNode[] | React.ReactNode,
42
42
  className?: string,
43
- }
43
+ } & GlobalProps
44
44
 
45
45
  type LayoutFooterProps = {
46
46
  children: React.ReactNode[] | React.ReactNode,
47
47
  className?: string,
48
- }
48
+ } & GlobalProps
49
49
 
50
- // Side component
51
50
  const Side = (props: LayoutSideProps) => {
52
51
  const { children, className } = props
52
+ const dynamicInlineProps = globalInlineProps(props)
53
53
  return (
54
- <div className={classnames('layout_sidebar', globalProps(props), className)}>
54
+ <div
55
+ className={classnames('layout_sidebar', globalProps(props), className)}
56
+ style={dynamicInlineProps}
57
+ >
55
58
  {children}
56
59
  </div>
57
60
  )
@@ -60,8 +63,12 @@ const Side = (props: LayoutSideProps) => {
60
63
  // Body component
61
64
  const Body = (props: LayoutBodyProps) => {
62
65
  const { children, className } = props
66
+ const dynamicInlineProps = globalInlineProps(props)
63
67
  return (
64
- <div className={classnames('layout_body', globalProps(props), className)}>
68
+ <div
69
+ className={classnames('layout_body', globalProps(props), className)}
70
+ style={dynamicInlineProps}
71
+ >
65
72
  {children}
66
73
  </div>
67
74
  )
@@ -71,8 +78,12 @@ const Body = (props: LayoutBodyProps) => {
71
78
  const Item = (props: LayoutItemProps) => {
72
79
  const { children, className, size = 'sm' } = props
73
80
  const sizeClass = `size_${size}`
81
+ const dynamicInlineProps = globalInlineProps(props)
74
82
  return (
75
- <div className={classnames('layout_item', sizeClass, globalProps(props), className)}>
83
+ <div
84
+ className={classnames('layout_item', sizeClass, globalProps(props), className)}
85
+ style={dynamicInlineProps}
86
+ >
76
87
  {children}
77
88
  </div>
78
89
  )
@@ -81,8 +92,12 @@ const Item = (props: LayoutItemProps) => {
81
92
  // Header component
82
93
  const Header = (props: LayoutHeaderProps) => {
83
94
  const { children, className } = props
95
+ const dynamicInlineProps = globalInlineProps(props)
84
96
  return (
85
- <div className={classnames('layout_header', globalProps(props), className)}>
97
+ <div
98
+ className={classnames('layout_header', globalProps(props), className)}
99
+ style={dynamicInlineProps}
100
+ >
86
101
  {children}
87
102
  </div>
88
103
  )
@@ -91,8 +106,12 @@ const Header = (props: LayoutHeaderProps) => {
91
106
  // Footer component
92
107
  const Footer = (props: LayoutFooterProps) => {
93
108
  const { children, className } = props
109
+ const dynamicInlineProps = globalInlineProps(props)
94
110
  return (
95
- <div className={classnames('layout_footer', globalProps(props), className)}>
111
+ <div
112
+ className={classnames('layout_footer', globalProps(props), className)}
113
+ style={dynamicInlineProps}
114
+ >
96
115
  {children}
97
116
  </div>
98
117
  )
@@ -17,7 +17,7 @@
17
17
  outline-offset: 2px;
18
18
  }
19
19
  &:visited {
20
- color: $data_3;
20
+ color: darken($primary_action, 10%);
21
21
  }
22
22
  &.dark {
23
23
  @include pb_link($active_dark);
@@ -34,7 +34,7 @@
34
34
  }
35
35
 
36
36
  &:visited {
37
- color: $data_3;
37
+ color: darken($primary_action, 10%);
38
38
  }
39
39
  }
40
40
  }
@@ -48,7 +48,7 @@
48
48
  }
49
49
 
50
50
  &:visited {
51
- color: $data_3;
51
+ color: darken($primary_action, 10%);
52
52
  }
53
53
  }
54
54
  }