playbook_ui 14.1.0.pre.alpha.PBNTR449rtepreviewerrails3605 → 14.1.0.pre.alpha.PBNTR455ganttchartPOC3569

Sign up to get free protection for your applications and to get access to all the features.
Files changed (80) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/_playbook.scss +0 -1
  3. data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss +3 -3
  4. data/app/pb_kits/playbook/pb_advanced_table/advanced_table.html.erb +1 -1
  5. data/app/pb_kits/playbook/pb_badge/_badge.scss +0 -9
  6. data/app/pb_kits/playbook/pb_badge/_badge.tsx +3 -8
  7. data/app/pb_kits/playbook/pb_badge/badge.rb +1 -1
  8. data/app/pb_kits/playbook/pb_badge/badge.test.js +11 -17
  9. data/app/pb_kits/playbook/pb_badge/docs/_badge_notification.html.erb +0 -13
  10. data/app/pb_kits/playbook/pb_badge/docs/_badge_notification.jsx +12 -31
  11. data/app/pb_kits/playbook/pb_button/_button.tsx +1 -4
  12. data/app/pb_kits/playbook/pb_button/button.html.erb +1 -1
  13. data/app/pb_kits/playbook/pb_button/button.rb +0 -4
  14. data/app/pb_kits/playbook/pb_date_time/dateTime.test.js +2 -2
  15. data/app/pb_kits/playbook/pb_dialog/_close_icon.tsx +1 -5
  16. data/app/pb_kits/playbook/pb_dialog/_dialog.tsx +1 -3
  17. data/app/pb_kits/playbook/pb_dialog/dialog.test.jsx +1 -20
  18. data/app/pb_kits/playbook/pb_dialog/dialog_header.html.erb +1 -1
  19. data/app/pb_kits/playbook/pb_dialog/dialog_header.rb +0 -4
  20. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_default.jsx +5 -1
  21. data/app/pb_kits/playbook/pb_dialog/docs/example.yml +0 -1
  22. data/app/pb_kits/playbook/pb_dialog/docs/index.js +0 -1
  23. data/app/pb_kits/playbook/pb_filter/filter.rb +1 -1
  24. data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb +0 -1
  25. data/app/pb_kits/playbook/pb_form_pill/_form_pill.scss +25 -43
  26. data/app/pb_kits/playbook/pb_form_pill/_form_pill.tsx +2 -6
  27. data/app/pb_kits/playbook/pb_form_pill/docs/example.yml +2 -2
  28. data/app/pb_kits/playbook/pb_form_pill/form_pill.html.erb +4 -4
  29. data/app/pb_kits/playbook/pb_form_pill/form_pill.rb +0 -4
  30. data/app/pb_kits/playbook/pb_icon/_icon.tsx +1 -1
  31. data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx +2 -0
  32. data/app/pb_kits/playbook/pb_pagination/_pagination.scss +13 -49
  33. data/app/pb_kits/playbook/pb_pagination/docs/example.yml +1 -3
  34. data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.scss +7 -0
  35. data/app/pb_kits/playbook/pb_popover/_popover.tsx +5 -10
  36. data/app/pb_kits/playbook/pb_rich_text_editor/_previewer_mixin.scss +13 -49
  37. data/app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.scss +12 -0
  38. data/app/pb_kits/playbook/pb_rich_text_editor/_tiptap_styles.scss +23 -23
  39. data/app/pb_kits/playbook/pb_rich_text_editor/_trix_styles.scss +27 -19
  40. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_preview.html.erb +11 -21
  41. data/app/pb_kits/playbook/pb_star_rating/index.js +41 -78
  42. data/app/pb_kits/playbook/pb_star_rating/star_rating.html.erb +2 -4
  43. data/app/pb_kits/playbook/pb_star_rating/star_rating.rb +0 -17
  44. data/app/pb_kits/playbook/pb_star_rating/subcomponents/_star_rating_display.tsx +2 -0
  45. data/app/pb_kits/playbook/pb_star_rating/subcomponents/_star_rating_interactive.tsx +1 -0
  46. data/app/pb_kits/playbook/pb_time/_time.tsx +8 -12
  47. data/app/pb_kits/playbook/pb_time/time.html.erb +3 -3
  48. data/app/pb_kits/playbook/pb_time/time.rb +0 -4
  49. data/app/pb_kits/playbook/utilities/globalPropNames.mjs +0 -1
  50. data/app/pb_kits/playbook/utilities/globalProps.ts +3 -20
  51. data/dist/chunks/_typeahead-B6CmTH6o.js +22 -0
  52. data/dist/chunks/_weekday_stacked-CNZpeoOR.js +45 -0
  53. data/dist/chunks/{lib-DErGXNy3.js → lib-XlOB2yGW.js} +2 -2
  54. data/dist/chunks/{pb_form_validation-BC6kh7Hu.js → pb_form_validation-mwEv7D-z.js} +1 -1
  55. data/dist/chunks/vendor.js +1 -1
  56. data/dist/playbook-doc.js +1 -1
  57. data/dist/playbook-rails-react-bindings.js +1 -1
  58. data/dist/playbook-rails.js +1 -1
  59. data/dist/playbook.css +1 -1
  60. data/lib/playbook/classnames.rb +0 -1
  61. data/lib/playbook/spacing.rb +2 -31
  62. data/lib/playbook/version.rb +1 -1
  63. metadata +9 -23
  64. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_loading.jsx +0 -46
  65. data/app/pb_kits/playbook/pb_pagination/_pagination.tsx +0 -164
  66. data/app/pb_kits/playbook/pb_pagination/docs/_pagination_default.jsx +0 -19
  67. data/app/pb_kits/playbook/pb_pagination/docs/_pagination_default_react.md +0 -1
  68. data/app/pb_kits/playbook/pb_pagination/docs/_pagination_page_change.jsx +0 -62
  69. data/app/pb_kits/playbook/pb_pagination/docs/_pagination_page_change_react.md +0 -1
  70. data/app/pb_kits/playbook/pb_pagination/docs/data.js +0 -23
  71. data/app/pb_kits/playbook/pb_pagination/docs/index.js +0 -2
  72. data/app/pb_kits/playbook/tokens/_container.scss +0 -21
  73. data/app/pb_kits/playbook/utilities/_min_width.scss +0 -45
  74. data/app/pb_kits/playbook/utilities/icons/allicons.tsx +0 -59
  75. data/app/pb_kits/playbook/utilities/icons/clock.svg +0 -9
  76. data/app/pb_kits/playbook/utilities/icons/spinner.svg +0 -3
  77. data/app/pb_kits/playbook/utilities/icons/times.svg +0 -3
  78. data/dist/chunks/_typeahead-Cq7RLPBA.js +0 -22
  79. data/dist/chunks/_weekday_stacked-Cykj5kLZ.js +0 -45
  80. /data/app/pb_kits/playbook/pb_pagination/docs/{_pagination_default_rails.md → _pagination_default.md} +0 -0
@@ -13,7 +13,6 @@ module Playbook
13
13
  prop(:classname),
14
14
  spacing_props,
15
15
  dark_props,
16
- min_width_props,
17
16
  max_width_props,
18
17
  z_index_props,
19
18
  number_spacing_props,
@@ -11,7 +11,6 @@ module Playbook
11
11
  base.prop :margin_x
12
12
  base.prop :margin_y
13
13
  base.prop :max_width
14
- base.prop :min_width
15
14
  base.prop :padding
16
15
  base.prop :padding_bottom
17
16
  base.prop :padding_left
@@ -27,18 +26,8 @@ module Playbook
27
26
  }
28
27
  end
29
28
 
30
- def min_width_options
31
- {
32
- min_width: "minw",
33
- }
34
- end
35
-
36
29
  def max_width_values
37
- %w[0% xs sm md lg xl xxl 0 none 100%]
38
- end
39
-
40
- def min_width_values
41
- %w[0% xs sm md lg xl xxl 0 none 100%]
30
+ %w[xs sm md lg xl xxl 0 none]
42
31
  end
43
32
 
44
33
  def spacing_options
@@ -98,31 +87,13 @@ module Playbook
98
87
  css.strip unless css.blank?
99
88
  end
100
89
 
101
- def filter_classname(value)
102
- if value.include?("%")
103
- value.gsub("%", "_percent")
104
- else
105
- value
106
- end
107
- end
108
-
109
- def min_width_props
110
- selected_minw_props = min_width_options.keys.select { |sk| try(sk) }
111
- return nil unless selected_minw_props.present?
112
-
113
- selected_minw_props.map do |k|
114
- width_value = send(k)
115
- "min_width_#{filter_classname(width_value)}" if min_width_values.include? width_value
116
- end.compact.join(" ")
117
- end
118
-
119
90
  def max_width_props
120
91
  selected_mw_props = max_width_options.keys.select { |sk| try(sk) }
121
92
  return nil unless selected_mw_props.present?
122
93
 
123
94
  selected_mw_props.map do |k|
124
95
  width_value = send(k)
125
- "max_width_#{filter_classname(width_value)}" if max_width_values.include? width_value
96
+ "max_width_#{width_value}" if max_width_values.include? width_value
126
97
  end.compact.join(" ")
127
98
  end
128
99
  end
@@ -2,5 +2,5 @@
2
2
 
3
3
  module Playbook
4
4
  PREVIOUS_VERSION = "14.1.0"
5
- VERSION = "14.1.0.pre.alpha.PBNTR449rtepreviewerrails3605"
5
+ VERSION = "14.1.0.pre.alpha.PBNTR455ganttchartPOC3569"
6
6
  end
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: playbook_ui
3
3
  version: !ruby/object:Gem::Version
4
- version: 14.1.0.pre.alpha.PBNTR449rtepreviewerrails3605
4
+ version: 14.1.0.pre.alpha.PBNTR455ganttchartPOC3569
5
5
  platform: ruby
6
6
  authors:
7
7
  - Power UX
@@ -9,7 +9,7 @@ authors:
9
9
  autorequire:
10
10
  bindir: bin
11
11
  cert_chain: []
12
- date: 2024-08-27 00:00:00.000000000 Z
12
+ date: 2024-08-22 00:00:00.000000000 Z
13
13
  dependencies:
14
14
  - !ruby/object:Gem::Dependency
15
15
  name: actionpack
@@ -73,14 +73,14 @@ dependencies:
73
73
  requirements:
74
74
  - - '='
75
75
  - !ruby/object:Gem::Version
76
- version: 2.83.0
76
+ version: 2.55.0
77
77
  type: :runtime
78
78
  prerelease: false
79
79
  version_requirements: !ruby/object:Gem::Requirement
80
80
  requirements:
81
81
  - - '='
82
82
  - !ruby/object:Gem::Version
83
- version: 2.83.0
83
+ version: 2.55.0
84
84
  - !ruby/object:Gem::Dependency
85
85
  name: webpacker-react
86
86
  requirement: !ruby/object:Gem::Requirement
@@ -1045,7 +1045,6 @@ files:
1045
1045
  - app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height_placement.html.erb
1046
1046
  - app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height_placement.jsx
1047
1047
  - app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height_placement.md
1048
- - app/pb_kits/playbook/pb_dialog/docs/_dialog_loading.jsx
1049
1048
  - app/pb_kits/playbook/pb_dialog/docs/_dialog_props_swift.md
1050
1049
  - app/pb_kits/playbook/pb_dialog/docs/_dialog_scrollable.html.erb
1051
1050
  - app/pb_kits/playbook/pb_dialog/docs/_dialog_scrollable.jsx
@@ -1935,16 +1934,9 @@ files:
1935
1934
  - app/pb_kits/playbook/pb_overlay/subcomponents/_overlay_percentage.tsx
1936
1935
  - app/pb_kits/playbook/pb_overlay/subcomponents/_overlay_token.tsx
1937
1936
  - app/pb_kits/playbook/pb_pagination/_pagination.scss
1938
- - app/pb_kits/playbook/pb_pagination/_pagination.tsx
1939
1937
  - app/pb_kits/playbook/pb_pagination/docs/_pagination_default.html.erb
1940
- - app/pb_kits/playbook/pb_pagination/docs/_pagination_default.jsx
1941
- - app/pb_kits/playbook/pb_pagination/docs/_pagination_default_rails.md
1942
- - app/pb_kits/playbook/pb_pagination/docs/_pagination_default_react.md
1943
- - app/pb_kits/playbook/pb_pagination/docs/_pagination_page_change.jsx
1944
- - app/pb_kits/playbook/pb_pagination/docs/_pagination_page_change_react.md
1945
- - app/pb_kits/playbook/pb_pagination/docs/data.js
1938
+ - app/pb_kits/playbook/pb_pagination/docs/_pagination_default.md
1946
1939
  - app/pb_kits/playbook/pb_pagination/docs/example.yml
1947
- - app/pb_kits/playbook/pb_pagination/docs/index.js
1948
1940
  - app/pb_kits/playbook/pb_pagination/pagination.html.erb
1949
1941
  - app/pb_kits/playbook/pb_pagination/pagination.rb
1950
1942
  - app/pb_kits/playbook/pb_passphrase/_passphrase.scss
@@ -2940,7 +2932,6 @@ files:
2940
2932
  - app/pb_kits/playbook/tokens/_animation-curves.scss
2941
2933
  - app/pb_kits/playbook/tokens/_border_radius.scss
2942
2934
  - app/pb_kits/playbook/tokens/_colors.scss
2943
- - app/pb_kits/playbook/tokens/_container.scss
2944
2935
  - app/pb_kits/playbook/tokens/_display.scss
2945
2936
  - app/pb_kits/playbook/tokens/_line_height.scss
2946
2937
  - app/pb_kits/playbook/tokens/_opacity.scss
@@ -2977,7 +2968,6 @@ files:
2977
2968
  - app/pb_kits/playbook/utilities/_hover.scss
2978
2969
  - app/pb_kits/playbook/utilities/_line_height.scss
2979
2970
  - app/pb_kits/playbook/utilities/_max_width.scss
2980
- - app/pb_kits/playbook/utilities/_min_width.scss
2981
2971
  - app/pb_kits/playbook/utilities/_mixins.scss
2982
2972
  - app/pb_kits/playbook/utilities/_number_spacing.scss
2983
2973
  - app/pb_kits/playbook/utilities/_overflow.scss
@@ -3000,10 +2990,6 @@ files:
3000
2990
  - app/pb_kits/playbook/utilities/flexbox_global_props/_order.scss
3001
2991
  - app/pb_kits/playbook/utilities/globalPropNames.mjs
3002
2992
  - app/pb_kits/playbook/utilities/globalProps.ts
3003
- - app/pb_kits/playbook/utilities/icons/allicons.tsx
3004
- - app/pb_kits/playbook/utilities/icons/clock.svg
3005
- - app/pb_kits/playbook/utilities/icons/spinner.svg
3006
- - app/pb_kits/playbook/utilities/icons/times.svg
3007
2993
  - app/pb_kits/playbook/utilities/object.ts
3008
2994
  - app/pb_kits/playbook/utilities/props.ts
3009
2995
  - app/pb_kits/playbook/utilities/test-utils.js
@@ -3022,11 +3008,11 @@ files:
3022
3008
  - app/pb_kits/playbook/utilities/test/globalProps/truncate.test.js
3023
3009
  - app/pb_kits/playbook/utilities/text.ts
3024
3010
  - app/pb_kits/playbook/utilities/validEmojiChecker.ts
3025
- - dist/chunks/_typeahead-Cq7RLPBA.js
3026
- - dist/chunks/_weekday_stacked-Cykj5kLZ.js
3011
+ - dist/chunks/_typeahead-B6CmTH6o.js
3012
+ - dist/chunks/_weekday_stacked-CNZpeoOR.js
3027
3013
  - dist/chunks/lazysizes-B7xYodB-.js
3028
- - dist/chunks/lib-DErGXNy3.js
3029
- - dist/chunks/pb_form_validation-BC6kh7Hu.js
3014
+ - dist/chunks/lib-XlOB2yGW.js
3015
+ - dist/chunks/pb_form_validation-mwEv7D-z.js
3030
3016
  - dist/chunks/vendor.js
3031
3017
  - dist/menu.yml
3032
3018
  - dist/playbook-doc.js
@@ -1,46 +0,0 @@
1
- import React, { useState } from 'react'
2
- import { Button, Dialog } from 'playbook-ui'
3
-
4
- const DialogLoading = () => {
5
- const [isOpen, setIsOpen] = useState(false)
6
- const close = () => {
7
- if (!isLoading) {
8
- setIsOpen(false)
9
- }
10
- }
11
- const open = () => setIsOpen(true)
12
- const [isLoading, setIsLoading] = useState(false)
13
- const submit = async () => {
14
- setIsLoading(true)
15
-
16
- try {
17
- await new Promise((r) => setTimeout(r, 3000))
18
- setIsOpen(false)
19
- } catch (error) {
20
- console.error("An error occurred.")
21
- } finally {
22
- setIsLoading(false)
23
- }
24
- }
25
-
26
- return (
27
- <>
28
- <Button onClick={open}>{'Open Dialog'}</Button>
29
- <Dialog
30
- cancelButton="Cancel"
31
- className="wrapper"
32
- confirmButton="Okay"
33
- loading={isLoading}
34
- onCancel={close}
35
- onClose={close}
36
- onConfirm={submit}
37
- opened={isOpen}
38
- size="sm"
39
- text="Make a 3 second request?"
40
- title="Loading Example"
41
- />
42
- </>
43
- )
44
- }
45
-
46
- export default DialogLoading
@@ -1,164 +0,0 @@
1
- import React, { useState } from "react";
2
- import classnames from 'classnames'
3
- import { globalProps } from '../utilities/globalProps'
4
- import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
5
- import Icon from '../pb_icon/_icon';
6
-
7
- type PaginationProps = {
8
- aria?: { [key: string]: string },
9
- className?: string,
10
- data?: { [key: string]: string },
11
- htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
12
- id?: string,
13
- current?: number;
14
- onChange?: (pageNumber: number) => void;
15
- range?: number;
16
- total?: number;
17
- };
18
-
19
- const Pagination = ( props: PaginationProps) => {
20
- const {
21
- aria = {},
22
- className,
23
- data = {},
24
- htmlOptions = {},
25
- id,
26
- current = 1,
27
- onChange,
28
- range = 5,
29
- total = 1,
30
- } = props
31
- const [currentPage, setCurrentPage] = useState(current);
32
-
33
- const handlePageChange = (pageNumber: number) => {
34
- if (pageNumber >= 1 && pageNumber <= total) {
35
- setCurrentPage(pageNumber);
36
- if (onChange) {
37
- onChange(pageNumber);
38
- }
39
- }
40
- };
41
-
42
- const renderPageButtons = (): JSX.Element[] => {
43
- const buttons: JSX.Element[] = [];
44
-
45
- // Calculate pagination range with let
46
- let rangeStart = Math.max(1, currentPage - Math.floor(range / 2));
47
- let rangeEnd = Math.min(total, rangeStart + range - 1);
48
-
49
- // Adjust range if it's too short to fit the range
50
- if (rangeEnd - rangeStart + 1 < range) {
51
- if (rangeStart > 1) {
52
- rangeStart = Math.max(1, rangeEnd - range + 1);
53
- } else {
54
- rangeEnd = Math.min(total, rangeStart + range - 1);
55
- }
56
- }
57
-
58
- // Always display the first page button
59
- if (rangeStart > 1) {
60
- buttons.push(
61
- <li
62
- className="pagination-number"
63
- key={1}
64
- onClick={() => handlePageChange(1)}
65
- >
66
- 1
67
- </li>
68
- );
69
- }
70
-
71
- // Always display the second page button
72
- if (rangeStart > 2) {
73
- buttons.push(
74
- <li
75
- className="pagination-number"
76
- key={2}
77
- onClick={() => handlePageChange(2)}
78
- >
79
- 2
80
- </li>
81
- );
82
- }
83
-
84
- // Display page buttons within the calculated range
85
- for (let i = rangeStart; i <= rangeEnd; i++) {
86
- buttons.push(
87
- <li
88
- className={`pagination-number ${i === currentPage ? "active" : ""}`}
89
- key={i}
90
- onClick={() => handlePageChange(i)}
91
- >
92
- {i}
93
- </li>
94
- );
95
- }
96
-
97
- // Always display the second-to-last page button
98
- if (rangeEnd < total - 1) {
99
- buttons.push(
100
- <li
101
- className={`pagination-number ${total - 1 === currentPage ? "active" : ""}`}
102
- key={total - 1}
103
- onClick={() => handlePageChange(total - 1)}
104
- >
105
- {total - 1}
106
- </li>
107
- );
108
- }
109
-
110
- // Always display the last page button
111
- if (rangeEnd < total) {
112
- buttons.push(
113
- <li
114
- className={`pagination-number ${total === currentPage ? "active" : ""}`}
115
- key={total}
116
- onClick={() => handlePageChange(total)}
117
- >
118
- {total}
119
- </li>
120
- );
121
- }
122
-
123
-
124
- return buttons;
125
- };
126
-
127
-
128
- const ariaProps = buildAriaProps(aria)
129
- const dataProps = buildDataProps(data)
130
- const htmlProps = buildHtmlProps(htmlOptions)
131
- const classes = classnames(
132
- buildCss('pb_paginate'),
133
- globalProps(props),
134
- className
135
- )
136
-
137
- return (
138
- <div
139
- {...ariaProps}
140
- {...dataProps}
141
- {...htmlProps}
142
- className={classes}
143
- id={id}
144
- >
145
- <div className="pb_pagination">
146
- <li
147
- className={`pagination-left ${currentPage === 1 ? 'disabled' : ''}`}
148
- onClick={() => handlePageChange(currentPage - 1)}
149
- >
150
- <Icon icon="chevron-left" />
151
- </li>
152
- {renderPageButtons()}
153
- <li
154
- className={`pagination-right ${currentPage === total ? 'disabled' : ''}`}
155
- onClick={() => handlePageChange(currentPage + 1)}
156
- >
157
- <Icon icon="chevron-right" />
158
- </li>
159
- </div>
160
- </div>
161
- );
162
- };
163
-
164
- export default Pagination;
@@ -1,19 +0,0 @@
1
- import React from 'react'
2
-
3
- import Pagination from '../_pagination'
4
-
5
- const PaginationDefault = (props) => {
6
-
7
- return (
8
- <>
9
- <Pagination
10
- current={1}
11
- range={5}
12
- total={10}
13
- {...props}
14
- />
15
- </>
16
- )
17
- }
18
-
19
- export default PaginationDefault
@@ -1 +0,0 @@
1
- The `range` prop determines how many pages to display in the Pagination component. Regardless of this value, the first two and last two pages are always visible to facilitate navigation to the beginning and end of the pagination. If these always-visible pages fall within the specified range, they are included in the display. If they fall outside the range, the pagination will show additional pages up to the number defined by the `range` prop.
@@ -1,62 +0,0 @@
1
- import React, { useState } from "react";
2
- import { Table, Pagination } from 'playbook-ui'
3
-
4
-
5
- import { data } from "./data";
6
-
7
- const PaginationPageChange = (props) => {
8
-
9
- const [activePage, setActivePage] = useState(1);
10
- const rowsPerPage = 3;
11
- const totalPages = Math.ceil(data.length / rowsPerPage);
12
-
13
- const onPageChange = (pageNumber) => {
14
- setActivePage(pageNumber);
15
- };
16
-
17
- const currentData = data.slice(
18
- (activePage - 1) * rowsPerPage,
19
- activePage * rowsPerPage
20
- );
21
-
22
-
23
- return (
24
- <div className="App">
25
- <Table
26
- marginBottom="xs"
27
- responsive="none"
28
- size="sm"
29
- {...props}
30
- >
31
- <Table.Head>
32
- <Table.Row>
33
- <Table.Header>{"Column 1"}</Table.Header>
34
- <Table.Header>{"Column 2"}</Table.Header>
35
- <Table.Header>{"Column 3"}</Table.Header>
36
- <Table.Header>{"Column 4"}</Table.Header>
37
- <Table.Header>{"Column 5"}</Table.Header>
38
- </Table.Row>
39
- </Table.Head>
40
- <Table.Body>
41
- {currentData.map((row, index) => (
42
- <Table.Row key={index}>
43
- {row.map((cell, cellIndex) => (
44
- <Table.Cell key={cellIndex}>{cell}</Table.Cell>
45
- ))}
46
- </Table.Row>
47
- ))}
48
- </Table.Body>
49
- </Table>
50
-
51
- <Pagination
52
- current={1}
53
- onChange={onPageChange}
54
- range={5}
55
- total={totalPages}
56
- {...props}
57
- />
58
- </div>
59
- )
60
- }
61
-
62
- export default PaginationPageChange
@@ -1 +0,0 @@
1
- You can use the `onChange` prop to control the data of your table. This prop is callback function that will allow you control the state.
@@ -1,23 +0,0 @@
1
- export const data = [
2
- ["Value 1", "Value 2", "Value 3", "Value 4", "Value 5"],
3
- ["Value 6", "Value 7", "Value 8", "Value 9", "Value 10"],
4
- ["Value 11", "Value 12", "Value 13", "Value 14", "Value 15"],
5
- ["Value 16", "Value 17", "Value 18", "Value 19", "Value 20"],
6
- ["Value 21", "Value 22", "Value 23", "Value 24", "Value 25"],
7
- ["Value 26", "Value 27", "Value 28", "Value 29", "Value 30"],
8
- ["Value 31", "Value 32", "Value 33", "Value 34", "Value 35"],
9
- ["Value 36", "Value 37", "Value 38", "Value 39", "Value 40"],
10
- ["Value 41", "Value 42", "Value 43", "Value 44", "Value 45"],
11
- ["Value 46", "Value 47", "Value 48", "Value 49", "Value 50"],
12
- ["Value 51", "Value 52", "Value 53", "Value 54", "Value 55"],
13
- ["Value 56", "Value 57", "Value 58", "Value 59", "Value 60"],
14
- ["Value 61", "Value 62", "Value 63", "Value 64", "Value 65"],
15
- ["Value 66", "Value 67", "Value 68", "Value 69", "Value 70"],
16
- ["Value 71", "Value 72", "Value 73", "Value 74", "Value 75"],
17
- ["Value 76", "Value 77", "Value 78", "Value 79", "Value 80"],
18
- ["Value 81", "Value 82", "Value 83", "Value 84", "Value 85"],
19
- ["Value 86", "Value 87", "Value 88", "Value 89", "Value 90"],
20
- ["Value 91", "Value 92", "Value 93", "Value 94", "Value 95"],
21
- ["Value 96", "Value 97", "Value 98", "Value 99", "Value 100"],
22
- ];
23
-
@@ -1,2 +0,0 @@
1
- export { default as PaginationDefault } from './_pagination_default.jsx'
2
- export { default as PaginationPageChange } from './_pagination_page_change.jsx'
@@ -1,21 +0,0 @@
1
- $container_0: 0% !default;
2
- $container_xxs: 320px !default;
3
- $container_xs: 360px !default;
4
- $container_sm: 540px !default;
5
- $container_md: 720px !default;
6
- $container_lg: 960px !default;
7
- $container_xl: 1140px !default;
8
- $container_xxl: 1320px !default;
9
- $container_100: 100% !default;
10
- $containers: (
11
- container_0: $container_0,
12
- container_xxs: $container_xxs,
13
- container_xs: $container_xs,
14
- container_sm: $container_sm,
15
- container_md: $container_md,
16
- container_lg: $container_lg,
17
- container_xl: $container_xl,
18
- container_xxl: $container_xxl,
19
- container_100: $container_100,
20
- none: 0,
21
- );
@@ -1,45 +0,0 @@
1
- @import "../tokens/container";
2
-
3
- .min_width_0 {
4
- min-width: map-get($containers, 'none');
5
- }
6
-
7
- .min_with_0_percent {
8
- min-width: $container_0;
9
- }
10
-
11
- .min_width_xxs {
12
- min-width: $container_xxs;
13
- }
14
-
15
- .min_width_xs {
16
- min-width: $container_xs;
17
- }
18
-
19
- .min_width_sm {
20
- min-width: $container_sm;
21
- }
22
-
23
- .min_width_md {
24
- min-width: $container_md;
25
- }
26
-
27
- .min_width_lg {
28
- min-width: $container_lg;
29
- }
30
-
31
- .min_width_xl {
32
- min-width: $container_xl;
33
- }
34
-
35
- .min_width_xxl {
36
- min-width: $container_xxl;
37
- }
38
-
39
- .min_width_100_percent {
40
- min-width: $container_100;
41
- }
42
-
43
- .minwidth-resize {
44
- resize: horizontal;
45
- }
@@ -1,59 +0,0 @@
1
- import React from "react";
2
-
3
- const spinner = (
4
- <svg
5
- fill="none"
6
- height="25"
7
- viewBox="0 0 31 25"
8
- width="31"
9
- xmlns="http://www.w3.org/2000/svg"
10
- >
11
- <path d="M17.4043 1.85547C17.4043 2.69922 16.7012 3.35547 15.9043 3.35547C15.0605 3.35547 14.4043 2.69922 14.4043 1.85547C14.4043 1.05859 15.0605 0.355469 15.9043 0.355469C16.7012 0.355469 17.4043 1.05859 17.4043 1.85547ZM17.4043 22.8555C17.4043 23.6992 16.7012 24.3555 15.9043 24.3555C15.0605 24.3555 14.4043 23.6992 14.4043 22.8555C14.4043 22.0586 15.0605 21.3555 15.9043 21.3555C16.7012 21.3555 17.4043 22.0586 17.4043 22.8555ZM24.9043 12.3555C24.9043 11.5586 25.5605 10.8555 26.4043 10.8555C27.2012 10.8555 27.9043 11.5586 27.9043 12.3555C27.9043 13.1992 27.2012 13.8555 26.4043 13.8555C25.5605 13.8555 24.9043 13.1992 24.9043 12.3555ZM5.4043 13.8555C4.56055 13.8555 3.9043 13.1992 3.9043 12.3555C3.9043 11.5586 4.56055 10.8555 5.4043 10.8555C6.20117 10.8555 6.9043 11.5586 6.9043 12.3555C6.9043 13.1992 6.20117 13.8555 5.4043 13.8555ZM7.41992 20.8398C6.81055 20.2773 6.81055 19.3398 7.41992 18.7305C7.98242 18.168 8.91992 18.168 9.5293 18.7305C10.0918 19.3398 10.0918 20.2773 9.5293 20.8398C8.91992 21.4492 7.98242 21.4492 7.41992 20.8398ZM22.2324 20.8398C21.8574 20.5117 21.6699 19.9023 21.8105 19.3867C21.9512 18.8711 22.373 18.4492 22.8887 18.3086C23.4043 18.168 24.0137 18.3555 24.3887 18.7305C24.7637 19.1055 24.9512 19.668 24.8105 20.2305C24.6699 20.7461 24.248 21.168 23.7324 21.3086C23.1699 21.4492 22.6074 21.2617 22.2324 20.8398ZM7.41992 3.87109C7.98242 3.30859 8.91992 3.30859 9.5293 3.87109C10.0918 4.48047 10.0918 5.41797 9.5293 6.02734C8.91992 6.58984 7.98242 6.58984 7.41992 6.02734C6.81055 5.41797 6.81055 4.48047 7.41992 3.87109Z"
12
- fill="#242B42"
13
- />
14
- </svg>
15
- )
16
-
17
- const clock = (
18
- <svg
19
- fill="none"
20
- height="25"
21
- viewBox="0 0 31 25"
22
- width="31"
23
- xmlns="http://www.w3.org/2000/svg"
24
- >
25
- <path d="M25.1221 12C25.1221 8.53125 23.2471 5.34375 20.2471 3.5625C17.2002 1.82812 13.4971 1.82812 10.4971 3.5625C7.4502 5.34375 5.62207 8.53125 5.62207 12C5.62207 15.5156 7.4502 18.7031 10.4971 20.4844C13.4971 22.2188 17.2002 22.2188 20.2471 20.4844C23.2471 18.7031 25.1221 15.5156 25.1221 12ZM3.37207 12C3.37207 7.73438 5.62207 3.79688 9.37207 1.64062C13.0752 -0.515625 17.6221 -0.515625 21.3721 1.64062C25.0752 3.79688 27.3721 7.73438 27.3721 12C27.3721 16.3125 25.0752 20.25 21.3721 22.4062C17.6221 24.5625 13.0752 24.5625 9.37207 22.4062C5.62207 20.25 3.37207 16.3125 3.37207 12ZM14.2471 5.625C14.2471 5.01562 14.7158 4.5 15.3721 4.5C15.9814 4.5 16.4971 5.01562 16.4971 5.625V11.4375L20.4814 14.0625C20.9971 14.4375 21.1377 15.1406 20.8096 15.6562C20.4346 16.1719 19.7314 16.3125 19.2158 15.9375L14.7158 12.9375C14.4346 12.75 14.2471 12.375 14.2471 12V5.625Z"
26
- fill="#242B42"
27
- />
28
- </svg>
29
- )
30
-
31
- const times = (
32
- <svg
33
- fill="none"
34
- height="25"
35
- viewBox="0 0 31 25"
36
- width="31"
37
- xmlns="http://www.w3.org/2000/svg"
38
- >
39
- <path
40
- d="M23.0762 6.77734L17.4512 12.4023L23.0293 17.9805C23.498 18.4023 23.498 19.1055 23.0293 19.5273C22.6074 19.9961 21.9043 19.9961 21.4824 19.5273L15.8574 13.9492L10.2793 19.5273C9.85742 19.9961 9.1543 19.9961 8.73242 19.5273C8.26367 19.1055 8.26367 18.4023 8.73242 17.9336L14.3105 12.3555L8.73242 6.77734C8.26367 6.35547 8.26367 5.65234 8.73242 5.18359C9.1543 4.76172 9.85742 4.76172 10.3262 5.18359L15.9043 10.8086L21.4824 5.23047C21.9043 4.76172 22.6074 4.76172 23.0762 5.23047C23.498 5.65234 23.498 6.35547 23.0762 6.77734Z"
41
- fill="#242B42"
42
- />
43
- </svg>
44
- )
45
-
46
- export const getAllIcons = () => {
47
-
48
- return {
49
- clock: {
50
- icon: clock
51
- },
52
- spinner: {
53
- icon: spinner
54
- },
55
- times: {
56
- icon: times
57
- }
58
- }
59
- }
@@ -1,9 +0,0 @@
1
- <svg
2
- fill="none"
3
- height="25"
4
- viewBox="0 0 31 25"
5
- width="31"
6
- xmlns="http://www.w3.org/2000/svg"
7
- >
8
- <path d="M25.1221 12C25.1221 8.53125 23.2471 5.34375 20.2471 3.5625C17.2002 1.82812 13.4971 1.82812 10.4971 3.5625C7.4502 5.34375 5.62207 8.53125 5.62207 12C5.62207 15.5156 7.4502 18.7031 10.4971 20.4844C13.4971 22.2188 17.2002 22.2188 20.2471 20.4844C23.2471 18.7031 25.1221 15.5156 25.1221 12ZM3.37207 12C3.37207 7.73438 5.62207 3.79688 9.37207 1.64062C13.0752 -0.515625 17.6221 -0.515625 21.3721 1.64062C25.0752 3.79688 27.3721 7.73438 27.3721 12C27.3721 16.3125 25.0752 20.25 21.3721 22.4062C17.6221 24.5625 13.0752 24.5625 9.37207 22.4062C5.62207 20.25 3.37207 16.3125 3.37207 12ZM14.2471 5.625C14.2471 5.01562 14.7158 4.5 15.3721 4.5C15.9814 4.5 16.4971 5.01562 16.4971 5.625V11.4375L20.4814 14.0625C20.9971 14.4375 21.1377 15.1406 20.8096 15.6562C20.4346 16.1719 19.7314 16.3125 19.2158 15.9375L14.7158 12.9375C14.4346 12.75 14.2471 12.375 14.2471 12V5.625Z" fill="#242B42" />
9
- </svg>
@@ -1,3 +0,0 @@
1
- <svg width="31" height="25" viewBox="0 0 31 25" fill="none" xmlns="http://www.w3.org/2000/svg">
2
- <path d="M17.4043 1.85547C17.4043 2.69922 16.7012 3.35547 15.9043 3.35547C15.0605 3.35547 14.4043 2.69922 14.4043 1.85547C14.4043 1.05859 15.0605 0.355469 15.9043 0.355469C16.7012 0.355469 17.4043 1.05859 17.4043 1.85547ZM17.4043 22.8555C17.4043 23.6992 16.7012 24.3555 15.9043 24.3555C15.0605 24.3555 14.4043 23.6992 14.4043 22.8555C14.4043 22.0586 15.0605 21.3555 15.9043 21.3555C16.7012 21.3555 17.4043 22.0586 17.4043 22.8555ZM24.9043 12.3555C24.9043 11.5586 25.5605 10.8555 26.4043 10.8555C27.2012 10.8555 27.9043 11.5586 27.9043 12.3555C27.9043 13.1992 27.2012 13.8555 26.4043 13.8555C25.5605 13.8555 24.9043 13.1992 24.9043 12.3555ZM5.4043 13.8555C4.56055 13.8555 3.9043 13.1992 3.9043 12.3555C3.9043 11.5586 4.56055 10.8555 5.4043 10.8555C6.20117 10.8555 6.9043 11.5586 6.9043 12.3555C6.9043 13.1992 6.20117 13.8555 5.4043 13.8555ZM7.41992 20.8398C6.81055 20.2773 6.81055 19.3398 7.41992 18.7305C7.98242 18.168 8.91992 18.168 9.5293 18.7305C10.0918 19.3398 10.0918 20.2773 9.5293 20.8398C8.91992 21.4492 7.98242 21.4492 7.41992 20.8398ZM22.2324 20.8398C21.8574 20.5117 21.6699 19.9023 21.8105 19.3867C21.9512 18.8711 22.373 18.4492 22.8887 18.3086C23.4043 18.168 24.0137 18.3555 24.3887 18.7305C24.7637 19.1055 24.9512 19.668 24.8105 20.2305C24.6699 20.7461 24.248 21.168 23.7324 21.3086C23.1699 21.4492 22.6074 21.2617 22.2324 20.8398ZM7.41992 3.87109C7.98242 3.30859 8.91992 3.30859 9.5293 3.87109C10.0918 4.48047 10.0918 5.41797 9.5293 6.02734C8.91992 6.58984 7.98242 6.58984 7.41992 6.02734C6.81055 5.41797 6.81055 4.48047 7.41992 3.87109Z" fill="#242B42"/>
3
- </svg>
@@ -1,3 +0,0 @@
1
- <svg width="31" height="25" viewBox="0 0 31 25" fill="none" xmlns="http://www.w3.org/2000/svg">
2
- <path d="M23.0762 6.77734L17.4512 12.4023L23.0293 17.9805C23.498 18.4023 23.498 19.1055 23.0293 19.5273C22.6074 19.9961 21.9043 19.9961 21.4824 19.5273L15.8574 13.9492L10.2793 19.5273C9.85742 19.9961 9.1543 19.9961 8.73242 19.5273C8.26367 19.1055 8.26367 18.4023 8.73242 17.9336L14.3105 12.3555L8.73242 6.77734C8.26367 6.35547 8.26367 5.65234 8.73242 5.18359C9.1543 4.76172 9.85742 4.76172 10.3262 5.18359L15.9043 10.8086L21.4824 5.23047C21.9043 4.76172 22.6074 4.76172 23.0762 5.23047C23.498 5.65234 23.498 6.35547 23.0762 6.77734Z" fill="#242B42"/>
3
- </svg>