playbook_ui 14.1.0.pre.alpha.fixaction3547 → 14.1.0.pre.alpha.pbntr373enablekitsforradio3593

Sign up to get free protection for your applications and to get access to all the features.
Files changed (93) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/_playbook.scss +2 -0
  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 +9 -0
  6. data/app/pb_kits/playbook/pb_badge/_badge.tsx +8 -3
  7. data/app/pb_kits/playbook/pb_badge/badge.rb +1 -1
  8. data/app/pb_kits/playbook/pb_badge/badge.test.js +17 -11
  9. data/app/pb_kits/playbook/pb_badge/docs/_badge_notification.html.erb +13 -0
  10. data/app/pb_kits/playbook/pb_badge/docs/_badge_notification.jsx +31 -12
  11. data/app/pb_kits/playbook/pb_button/_button.tsx +4 -1
  12. data/app/pb_kits/playbook/pb_button/button.html.erb +1 -1
  13. data/app/pb_kits/playbook/pb_button/button.rb +4 -0
  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 +5 -1
  16. data/app/pb_kits/playbook/pb_dialog/_dialog.tsx +3 -1
  17. data/app/pb_kits/playbook/pb_dialog/dialog.test.jsx +20 -1
  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 +4 -0
  20. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_default.jsx +1 -5
  21. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_loading.jsx +46 -0
  22. data/app/pb_kits/playbook/pb_dialog/docs/example.yml +1 -0
  23. data/app/pb_kits/playbook/pb_dialog/docs/index.js +1 -0
  24. data/app/pb_kits/playbook/pb_filter/filter.rb +1 -1
  25. data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb +1 -0
  26. data/app/pb_kits/playbook/pb_form_pill/_form_pill.scss +43 -25
  27. data/app/pb_kits/playbook/pb_form_pill/_form_pill.tsx +6 -2
  28. data/app/pb_kits/playbook/pb_form_pill/docs/example.yml +2 -2
  29. data/app/pb_kits/playbook/pb_form_pill/form_pill.html.erb +4 -4
  30. data/app/pb_kits/playbook/pb_form_pill/form_pill.rb +4 -0
  31. data/app/pb_kits/playbook/pb_gantt_chart/_gantt_chart.scss +3 -0
  32. data/app/pb_kits/playbook/pb_gantt_chart/_gantt_chart.tsx +72 -0
  33. data/app/pb_kits/playbook/pb_gantt_chart/docs/_gantt_chart_default.jsx +53 -0
  34. data/app/pb_kits/playbook/pb_gantt_chart/docs/example.yml +7 -0
  35. data/app/pb_kits/playbook/pb_gantt_chart/docs/index.js +1 -0
  36. data/app/pb_kits/playbook/pb_gantt_chart/gantt_chart.test.jsx +19 -0
  37. data/app/pb_kits/playbook/pb_icon/_icon.tsx +1 -1
  38. data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx +0 -2
  39. data/app/pb_kits/playbook/pb_pagination/_pagination.scss +49 -13
  40. data/app/pb_kits/playbook/pb_pagination/_pagination.tsx +164 -0
  41. data/app/pb_kits/playbook/pb_pagination/docs/_pagination_default.jsx +19 -0
  42. data/app/pb_kits/playbook/pb_pagination/docs/_pagination_default_react.md +1 -0
  43. data/app/pb_kits/playbook/pb_pagination/docs/_pagination_page_change.jsx +62 -0
  44. data/app/pb_kits/playbook/pb_pagination/docs/_pagination_page_change_react.md +1 -0
  45. data/app/pb_kits/playbook/pb_pagination/docs/data.js +23 -0
  46. data/app/pb_kits/playbook/pb_pagination/docs/example.yml +3 -1
  47. data/app/pb_kits/playbook/pb_pagination/docs/index.js +2 -0
  48. data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.scss +0 -7
  49. data/app/pb_kits/playbook/pb_popover/_popover.tsx +10 -5
  50. data/app/pb_kits/playbook/pb_radio/_radio.scss +11 -11
  51. data/app/pb_kits/playbook/pb_radio/_radio.tsx +100 -50
  52. data/app/pb_kits/playbook/pb_radio/docs/_radio_children.jsx +51 -0
  53. data/app/pb_kits/playbook/pb_radio/docs/_radio_default.jsx +1 -1
  54. data/app/pb_kits/playbook/pb_radio/docs/example.yml +1 -0
  55. data/app/pb_kits/playbook/pb_radio/docs/index.js +1 -0
  56. data/app/pb_kits/playbook/pb_rich_text_editor/_previewer_mixin.scss +132 -0
  57. data/app/pb_kits/playbook/pb_rich_text_editor/_tiptap_styles.scss +50 -76
  58. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_preview.jsx +73 -0
  59. data/app/pb_kits/playbook/pb_rich_text_editor/docs/example.yml +1 -0
  60. data/app/pb_kits/playbook/pb_rich_text_editor/docs/index.js +2 -1
  61. data/app/pb_kits/playbook/pb_star_rating/index.js +78 -41
  62. data/app/pb_kits/playbook/pb_star_rating/star_rating.html.erb +4 -2
  63. data/app/pb_kits/playbook/pb_star_rating/star_rating.rb +17 -0
  64. data/app/pb_kits/playbook/pb_star_rating/subcomponents/_star_rating_display.tsx +0 -2
  65. data/app/pb_kits/playbook/pb_star_rating/subcomponents/_star_rating_interactive.tsx +0 -1
  66. data/app/pb_kits/playbook/pb_time/_time.tsx +12 -8
  67. data/app/pb_kits/playbook/pb_time/time.html.erb +3 -3
  68. data/app/pb_kits/playbook/pb_time/time.rb +4 -0
  69. data/app/pb_kits/playbook/tokens/_container.scss +21 -0
  70. data/app/pb_kits/playbook/utilities/_min_width.scss +45 -0
  71. data/app/pb_kits/playbook/utilities/globalPropNames.mjs +1 -0
  72. data/app/pb_kits/playbook/utilities/globalProps.ts +20 -3
  73. data/app/pb_kits/playbook/utilities/icons/allicons.tsx +59 -0
  74. data/app/pb_kits/playbook/utilities/icons/clock.svg +9 -0
  75. data/app/pb_kits/playbook/utilities/icons/spinner.svg +3 -0
  76. data/app/pb_kits/playbook/utilities/icons/times.svg +3 -0
  77. data/dist/chunks/_typeahead-CTLaD81v.js +22 -0
  78. data/dist/chunks/_weekday_stacked-U-4S3-tB.js +45 -0
  79. data/dist/chunks/{lib-BE0Z3F7x.js → lib-DErGXNy3.js} +2 -2
  80. data/dist/chunks/{pb_form_validation-TzZQ0Flx.js → pb_form_validation-BC6kh7Hu.js} +1 -1
  81. data/dist/chunks/vendor.js +1 -1
  82. data/dist/menu.yml +4 -0
  83. data/dist/playbook-doc.js +1 -1
  84. data/dist/playbook-rails-react-bindings.js +1 -1
  85. data/dist/playbook-rails.js +1 -1
  86. data/dist/playbook.css +1 -1
  87. data/lib/playbook/classnames.rb +1 -0
  88. data/lib/playbook/spacing.rb +31 -2
  89. data/lib/playbook/version.rb +1 -1
  90. metadata +32 -9
  91. data/dist/chunks/_typeahead-D-4y9pbv.js +0 -22
  92. data/dist/chunks/_weekday_stacked-D5SswkOC.js +0 -45
  93. /data/app/pb_kits/playbook/pb_pagination/docs/{_pagination_default.md → _pagination_default_rails.md} +0 -0
@@ -0,0 +1,73 @@
1
+ import React, { useState } from 'react'
2
+ import { Button, Card, RichTextEditor } from 'playbook-ui'
3
+ import { useEditor, EditorContent } from "@tiptap/react"
4
+ import StarterKit from "@tiptap/starter-kit"
5
+ import Link from '@tiptap/extension-link'
6
+
7
+
8
+ const RichTextEditorAdvancedPreview = (props) => {
9
+
10
+ const editor = useEditor({
11
+ extensions: [
12
+ StarterKit,
13
+ Link
14
+ ],
15
+ content: "Add text here, format it, and press \"Preview Output\" to see what your stylized output will look like on the page."
16
+ })
17
+
18
+ const [showPreview, setShowPreview] = useState(false)
19
+ const [previewText, setPreviewText] = useState(<div />)
20
+
21
+ const handleChange = () => {
22
+ if (editor) {
23
+ setPreviewText(editor.getHTML())
24
+ }
25
+ }
26
+
27
+ const handleClick = () => {
28
+ handleChange()
29
+ setShowPreview(true)
30
+ }
31
+ if (!editor) {
32
+ return null
33
+ }
34
+
35
+
36
+ return (
37
+ <div>
38
+ <RichTextEditor
39
+ advancedEditor={editor}
40
+ id="content-advanced-preview-editor"
41
+ onChange={handleChange}
42
+ {...props}
43
+ >
44
+ <EditorContent editor={editor}/>
45
+ </RichTextEditor>
46
+ {showPreview && (
47
+ <Card
48
+ marginTop="md"
49
+ maxWidth="md"
50
+ >
51
+ <div
52
+ className="tiptap-content"
53
+ // eslint-disable-next-line react/no-danger
54
+ dangerouslySetInnerHTML={{ __html: previewText }}
55
+ id="advanced-preview-content"
56
+ />
57
+ </Card>
58
+ )}
59
+ {!showPreview && (
60
+ <div />
61
+ )}
62
+ <Button
63
+ id="preview-button"
64
+ marginTop="md"
65
+ onClick={handleClick}
66
+ text="Preview Output"
67
+ variant="secondary"
68
+ />
69
+ </div>
70
+ )
71
+ }
72
+
73
+ export default RichTextEditorAdvancedPreview
@@ -24,3 +24,4 @@ examples:
24
24
  - rich_text_editor_toolbar_bottom: Toolbar Bottom
25
25
  - rich_text_editor_inline: Inline
26
26
  - rich_text_editor_preview: Preview
27
+ - rich_text_editor_advanced_preview: Advanced Preview
@@ -9,4 +9,5 @@ export { default as RichTextEditorInline } from './_rich_text_editor_inline.jsx'
9
9
  export { default as RichTextEditorPreview } from './_rich_text_editor_preview.jsx'
10
10
  export { default as RichTextEditorAdvancedDefault } from './_rich_text_editor_advanced_default.jsx'
11
11
  export { default as RichTextEditorMoreExtensions } from './_rich_text_editor_more_extensions.jsx'
12
- export { default as RichTextEditorToolbarDisabled } from './_rich_text_editor_toolbar_disabled.jsx'
12
+ export { default as RichTextEditorToolbarDisabled } from './_rich_text_editor_toolbar_disabled.jsx'
13
+ export { default as RichTextEditorAdvancedPreview } from './_rich_text_editor_advanced_preview.jsx'
@@ -1,119 +1,156 @@
1
- import PbEnhancedElement from "../pb_enhanced_element";
1
+ import PbEnhancedElement from "../pb_enhanced_element"
2
2
 
3
- const STAR_RATING_SELECTOR = "[data-pb-star-rating]";
4
- const STAR_RATING_INPUT_ID = "star-rating-input";
3
+ const STAR_RATING_WRAPPER_SELECTOR = "[data-pb-star-rating-wrapper]"
4
+ const STAR_RATING_SELECTOR = "[data-pb-star-rating]"
5
+ const STAR_RATING_INPUT_DATA_SELECTOR = "[data-pb-star-rating-input]"
5
6
 
6
7
  export default class PbStarRating extends PbEnhancedElement {
7
8
  static get selector() {
8
- return STAR_RATING_SELECTOR;
9
+ return STAR_RATING_WRAPPER_SELECTOR
9
10
  }
10
11
 
11
12
  connect() {
12
- this.element.addEventListener("click", (event) => {
13
- const clickedStarId = event.currentTarget.id;
14
- this.updateStarColors(clickedStarId);
15
- this.updateHiddenInputValue(clickedStarId);
16
- });
13
+ this.addEventListeners()
14
+ this.handleFormReset()
15
+ }
16
+
17
+ addEventListeners() {
18
+ this.element.querySelectorAll(STAR_RATING_SELECTOR).forEach(star => {
19
+ star.addEventListener("click", (event) => {
20
+ const clickedStarId = event.currentTarget.id
21
+ this.updateStarColors(clickedStarId)
22
+ this.updateHiddenInputValue(clickedStarId)
23
+ this.clearFormValidation()
24
+ })
17
25
 
18
- document.querySelectorAll(STAR_RATING_SELECTOR).forEach(star => {
19
26
  star.addEventListener("mouseenter", (event) => {
20
27
  const hoveredStarId = event.currentTarget.id
21
- this.updateStarHoverColors(hoveredStarId);
28
+ this.updateStarHoverColors(hoveredStarId)
22
29
  })
23
30
 
24
31
  star.addEventListener("mouseleave", () => {
25
- this.removeStarHoverColors();
32
+ this.removeStarHoverColors()
26
33
  })
27
34
 
28
35
  star.addEventListener("keydown", (event) => {
29
36
  if (event.key === 'Enter' || event.key === ' ') {
30
- event.preventDefault();
31
- this.handleStarClick(star.id);
37
+ event.preventDefault()
38
+ this.handleStarClick(star.id)
32
39
  }
33
40
  })
34
41
  })
35
42
  }
36
43
 
37
44
  handleStarClick(starId) {
38
- this.updateStarColors(starId);
39
- this.updateHiddenInputValue(starId);
45
+ this.updateStarColors(starId)
46
+ this.updateHiddenInputValue(starId)
40
47
  }
41
48
 
42
49
  updateStarColors(clickedStarId) {
43
- const allStars = document.querySelectorAll(STAR_RATING_SELECTOR);
50
+ const allStars = this.element.querySelectorAll(STAR_RATING_SELECTOR)
44
51
 
45
52
  allStars.forEach(star => {
46
- const starId = star.id;
47
- const icon = star.querySelector(".interactive-star-icon");
53
+ const starId = star.id
54
+ const icon = star.querySelector(".interactive-star-icon")
48
55
 
49
56
  if (icon) {
50
57
  if (starId <= clickedStarId) {
51
58
  if (star.classList.contains("yellow_star")) {
52
- icon.classList.add("yellow-star-selected");
59
+ icon.classList.add("yellow-star-selected")
53
60
  } else if (star.classList.contains("primary_star_light")) {
54
- icon.classList.add("primary-star-selected");
61
+ icon.classList.add("primary-star-selected")
55
62
  } else if (star.classList.contains("primary_star_dark")) {
56
- icon.classList.add("primary-star-selected");
63
+ icon.classList.add("primary-star-selected")
57
64
  } else if (star.classList.contains("subtle_star_light")) {
58
- icon.classList.add("subtle-star-selected");
65
+ icon.classList.add("subtle-star-selected")
59
66
  } else if (star.classList.contains("subtle_star_dark")) {
60
- icon.classList.add("subtle-star-selected");
67
+ icon.classList.add("subtle-star-selected")
61
68
  } else {
62
- icon.classList.add("yellow-star-selected");
69
+ icon.classList.add("yellow-star-selected")
63
70
  }
64
71
  } else {
65
- icon.classList.remove("yellow-star-selected", "primary-star-selected", "subtle-star-selected");
72
+ icon.classList.remove("yellow-star-selected", "primary-star-selected", "subtle-star-selected")
66
73
  }
67
- icon.classList.remove("star-hovered");
74
+ icon.classList.remove("star-hovered")
68
75
  }
69
- });
76
+ })
70
77
  }
71
78
 
72
79
  updateHiddenInputValue(value) {
73
- const hiddenInput = document.getElementById(STAR_RATING_INPUT_ID);
80
+ const hiddenInput = this.element.querySelector(STAR_RATING_INPUT_DATA_SELECTOR)
74
81
  if (hiddenInput) {
75
- hiddenInput.value = value;
82
+ hiddenInput.value = value
76
83
  }
77
84
  }
78
85
 
79
86
  updateStarHoverColors(hoveredStarId) {
80
- const allStars = document.querySelectorAll(STAR_RATING_SELECTOR);
87
+ const allStars = this.element.querySelectorAll(STAR_RATING_SELECTOR)
81
88
 
82
89
  allStars.forEach(star => {
83
- const starId = star.id;
84
- const icon = star.querySelector(".interactive-star-icon");
90
+ const starId = star.id
91
+ const icon = star.querySelector(".interactive-star-icon")
85
92
 
86
93
  if (icon) {
87
94
  if (starId <= hoveredStarId) {
88
95
  if (!icon.classList.contains("yellow-star-selected") &&
89
96
  !icon.classList.contains("primary-star-selected") &&
90
97
  !icon.classList.contains("subtle-star-selected")) {
91
- icon.classList.add("star-hovered");
98
+ icon.classList.add("star-hovered")
92
99
  }
93
100
  } else {
94
- icon.classList.remove("star-hovered");
101
+ icon.classList.remove("star-hovered")
95
102
  }
96
103
  }
97
- });
104
+ })
98
105
  }
99
106
 
100
107
 
101
108
  removeStarHoverColors() {
102
- const allStars = document.querySelectorAll(STAR_RATING_SELECTOR);
109
+ const allStars = this.element.querySelectorAll(STAR_RATING_SELECTOR)
103
110
 
104
111
  allStars.forEach(star => {
105
- const icon = star.querySelector(".interactive-star-icon");
112
+ const icon = star.querySelector(".interactive-star-icon")
106
113
  if (icon) {
107
114
  if (!icon.classList.contains("yellow-star-selected") &&
108
115
  !icon.classList.contains("primary-star-selected") &&
109
116
  !icon.classList.contains("subtle-star-selected")) {
110
- icon.classList.remove("star-hovered");
117
+ icon.classList.remove("star-hovered")
111
118
  }
112
119
  }
113
- });
120
+ })
114
121
  }
115
122
 
116
123
  isStarSelected() {
117
- return document.querySelectorAll(".yellow-star-selected, .primary-star-selected, .subtle-star-selected").length > 0;
124
+ return this.element.querySelectorAll(".yellow-star-selected, .primary-star-selected, .subtle-star-selected").length > 0
125
+ }
126
+
127
+ handleFormReset() {
128
+ const form = this.element.closest("form")
129
+ if (form) {
130
+ form.addEventListener("reset", () => {
131
+ this.updateHiddenInputValue("")
132
+ this.resetStarRatingValues()
133
+ })
134
+ }
135
+ }
136
+
137
+ resetStarRatingValues() {
138
+ const allStars = this.element.querySelectorAll(STAR_RATING_SELECTOR)
139
+ allStars.forEach(star => {
140
+ const icon = star.querySelector(".interactive-star-icon")
141
+ if (icon) {
142
+ icon.classList.remove("yellow-star-selected", "primary-star-selected", "subtle-star-selected")
143
+ }
144
+ })
145
+ }
146
+
147
+ clearFormValidation() {
148
+ const hiddenInput = this.element.querySelector(STAR_RATING_INPUT_DATA_SELECTOR)
149
+ if (hiddenInput.checkValidity()) {
150
+ const errorLabelElement = this.element.querySelector(".pb_body_kit_negative")
151
+ if (errorLabelElement) {
152
+ errorLabelElement.remove()
153
+ }
154
+ }
118
155
  }
119
156
  }
@@ -39,11 +39,13 @@
39
39
  <% end %>
40
40
 
41
41
  <% else %>
42
- <%= pb_rails("flex", props: { orientation: "column" }) do %>
42
+ <%= pb_rails("flex", props: { data: {"pb-star-rating-wrapper": "true" }, orientation: "column" }) do %>
43
43
  <% if object.label.present? %>
44
44
  <%= pb_rails("caption", props: {text: object.label, margin_bottom:"xs"}) %>
45
45
  <% end %>
46
- <input type="hidden" id="star-rating-input" value="" name="<%= object.name %>"/>
46
+
47
+ <%= hidden_input_tag %>
48
+
47
49
  <%= pb_rails("flex", props: { orientation: "row" }) do %>
48
50
  <% object.denominator.times do |index| %>
49
51
  <div data-pb-star-rating id="<%= index + 1 %>" class="<%= star_color %>">
@@ -30,6 +30,10 @@ module Playbook
30
30
  default: "display"
31
31
  prop :label, type: Playbook::Props::String
32
32
  prop :name, type: Playbook::Props::String
33
+ prop :required, type: Playbook::Props::Boolean,
34
+ default: false
35
+ prop :input_options, type: Playbook::Props::HashProp,
36
+ default: {}
33
37
 
34
38
  def one_decimal_rating
35
39
  rating.to_f.round(1)
@@ -106,6 +110,19 @@ module Playbook
106
110
  def classname
107
111
  generate_classname("pb_star_rating_kit")
108
112
  end
113
+
114
+ def hidden_input_tag
115
+ tag(:input, all_input_options)
116
+ end
117
+
118
+ def all_input_options
119
+ input_options.merge(
120
+ data: { "pb-star-rating-input": true },
121
+ name: name,
122
+ required: required,
123
+ style: "display: none"
124
+ )
125
+ end
109
126
  end
110
127
  end
111
128
  end
@@ -36,7 +36,6 @@ const StarRatingDisplay = (props: StarRatingDisplayProps) => {
36
36
  <Icon
37
37
  className={starIcon[colorOption].className}
38
38
  customIcon={starIcon[colorOption].icon as unknown as { [key: string]: SVGElement }}
39
- icon=""
40
39
  />
41
40
  </React.Fragment>
42
41
  ))}
@@ -45,7 +44,6 @@ const StarRatingDisplay = (props: StarRatingDisplayProps) => {
45
44
  <Icon
46
45
  className={starIcon[backgroundType].className}
47
46
  customIcon={starIcon[backgroundType].icon as unknown as { [key: string]: SVGElement }}
48
- icon=""
49
47
  />
50
48
  </React.Fragment>
51
49
  ))}
@@ -80,7 +80,6 @@ const StarRatingInteractive = (props: StarRatingInteractiveProps) => {
80
80
  onMouseEnter: () => handleMouseEnter(starIndex),
81
81
  onMouseLeave: () => handleMouseLeave(),
82
82
  }}
83
- icon=""
84
83
  tabIndex={0}
85
84
  />
86
85
  </div>
@@ -1,6 +1,7 @@
1
1
  import React from "react";
2
2
  import classnames from "classnames";
3
3
 
4
+ import { getAllIcons } from "../utilities/icons/allicons"
4
5
  import { buildCss, buildHtmlProps } from "../utilities/props";
5
6
  import { globalProps, GlobalProps } from "../utilities/globalProps";
6
7
  import DateTime from '../pb_kit/dateTime';
@@ -42,7 +43,7 @@ const Time = (props: TimeProps): React.ReactElement => {
42
43
  globalProps(props),
43
44
  className
44
45
  );
45
-
46
+ const clockIcon = getAllIcons()["clock"]
46
47
  const htmlProps = buildHtmlProps(htmlOptions);
47
48
 
48
49
  return (
@@ -54,9 +55,10 @@ const Time = (props: TimeProps): React.ReactElement => {
54
55
  unstyled
55
56
  ? (
56
57
  <span>
57
- <Icon fixedWidth
58
- icon="clock"
59
- />
58
+ <Icon
59
+ className="svg-inline--fa clock"
60
+ customIcon={clockIcon.icon as unknown as { [key: string]: SVGElement }}
61
+ />
60
62
  {" "}
61
63
  </span>
62
64
  )
@@ -65,10 +67,12 @@ const Time = (props: TimeProps): React.ReactElement => {
65
67
  <Body color="light"
66
68
  tag="span"
67
69
  >
68
- <Icon fixedWidth
69
- icon="clock"
70
- size={size === "md" ? "" : "sm"}
71
- />
70
+ <Icon
71
+ className="svg-inline--fa clock"
72
+ customIcon={clockIcon.icon as unknown as { [key: string]: SVGElement }}
73
+ fixedWidth
74
+ size={size === "md" ? "" : "sm"}
75
+ />
72
76
  {" "}
73
77
  </Body>
74
78
  </>
@@ -13,7 +13,7 @@
13
13
  <% if object.unstyled %>
14
14
  <% if object.show_icon %>
15
15
  <span>
16
- <%= pb_rails("icon", props: { icon: "clock", fixed_width: true }) %>
16
+ <%= pb_rails("icon", props: { custom_icon: Playbook::Engine.root.join(clock_icon), fixed_width: true }) %>
17
17
  </span>
18
18
  <% end %>
19
19
 
@@ -27,7 +27,7 @@
27
27
  <% elsif size == "md" %>
28
28
  <% if object.show_icon %>
29
29
  <%= pb_rails("body", props: { color: "light", tag: "span"}) do %>
30
- <%= pb_rails("icon", props: { icon: "clock", fixed_width: true }) %>
30
+ <%= pb_rails("icon", props: { custom_icon: Playbook::Engine.root.join(clock_icon), fixed_width: true }) %>
31
31
  <% end %>
32
32
  <% end %>
33
33
 
@@ -41,7 +41,7 @@
41
41
  <% else %>
42
42
  <% if object.show_icon %>
43
43
  <%= pb_rails("body", props: { color: "light", tag: "span"}) do %>
44
- <%= pb_rails("icon", props: { icon: "clock", fixed_width: true, size: "sm" }) %>
44
+ <%= pb_rails("icon", props: { custom_icon: Playbook::Engine.root.join(clock_icon), fixed_width: true, size: "sm" }) %>
45
45
  <% end %>
46
46
  <% end %>
47
47
 
@@ -38,6 +38,10 @@ module Playbook
38
38
  def pb_date_time
39
39
  Playbook::PbKit::PbDateTime.new(time, timezone)
40
40
  end
41
+
42
+ def clock_icon
43
+ "app/pb_kits/playbook/utilities/icons/clock.svg"
44
+ end
41
45
  end
42
46
  end
43
47
  end
@@ -0,0 +1,21 @@
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
+ );
@@ -0,0 +1,45 @@
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
+ }
@@ -25,6 +25,7 @@ export default [
25
25
  "order",
26
26
  "numberSpacing",
27
27
  "maxWidth",
28
+ "minWidth",
28
29
  "marginRight",
29
30
  "marginLeft",
30
31
  "marginTop",
@@ -94,6 +94,10 @@ type MaxWidth = {
94
94
  maxWidth?: Sizes,
95
95
  }
96
96
 
97
+ type MinWidth = {
98
+ minWidth?: Sizes,
99
+ }
100
+
97
101
  type NumberSpacing = {
98
102
  numberSpacing?: "tabular",
99
103
  }
@@ -170,7 +174,7 @@ type ZIndex = {
170
174
  export type GlobalProps = AlignContent & AlignItems & AlignSelf &
171
175
  BorderRadius & Cursor & Dark & Display & DisplaySizes & Flex & FlexDirection &
172
176
  FlexGrow & FlexShrink & FlexWrap & JustifyContent & JustifySelf &
173
- LineHeight & Margin & MaxWidth & NumberSpacing & Order & Overflow & Padding &
177
+ LineHeight & Margin & MinWidth & MaxWidth & NumberSpacing & Order & Overflow & Padding &
174
178
  Position & Shadow & TextAlign & Truncate & VerticalAlign & ZIndex & { hover?: string } & Top & Right & Bottom & Left;
175
179
 
176
180
  const getResponsivePropClasses = (prop: {[key: string]: string}, classPrefix: string) => {
@@ -194,6 +198,14 @@ const getPositioningPropsClasses = (position: string, value: Sizes | {value: str
194
198
  return css;
195
199
  };
196
200
 
201
+ const filterClassName = (value: string): string => {
202
+ if (value.includes("%")) {
203
+ return value.replace("%", "_percent");
204
+ } else {
205
+ return value;
206
+ }
207
+ };
208
+
197
209
  // Prop categories
198
210
  const PROP_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => string} = {
199
211
 
@@ -320,10 +332,15 @@ const PROP_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => string} =
320
332
  css += numberSpacing ? `ns_${numberSpacing} ` : ''
321
333
  return css
322
334
  },
335
+ minWidthProps: ({ minWidth }: MinWidth) => {
336
+ let css = ''
337
+ css += minWidth ? `min_width_${filterClassName(minWidth)} ` : ''
338
+ return css.trimEnd()
339
+ },
323
340
  maxWidthProps: ({ maxWidth }: MaxWidth) => {
324
341
  let css = ''
325
- css += maxWidth ? `max_width_${maxWidth } ` : ''
326
- return css
342
+ css += maxWidth ? `max_width_${filterClassName(maxWidth)} ` : ''
343
+ return css.trimEnd()
327
344
  },
328
345
  zIndexProps: (zIndex: ZIndex) => {
329
346
  let css = ''
@@ -0,0 +1,59 @@
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
+ }
@@ -0,0 +1,9 @@
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>
@@ -0,0 +1,3 @@
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>
@@ -0,0 +1,3 @@
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>