playbook_ui 11.4.0 → 11.5.0.pre.alpha.datepicker1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (128) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/data/menu.yml +0 -13
  3. data/app/pb_kits/playbook/pb_badge/badge.test.js +80 -0
  4. data/app/pb_kits/playbook/pb_button/_button.tsx +7 -2
  5. data/app/pb_kits/playbook/pb_button/_button_mixins.scss +7 -0
  6. data/app/pb_kits/playbook/pb_button/button.html.erb +11 -0
  7. data/app/pb_kits/playbook/pb_button/button.rb +3 -0
  8. data/app/pb_kits/playbook/pb_button/button.test.js +6 -8
  9. data/app/pb_kits/playbook/pb_button/docs/_button_block_content.html.erb +1 -1
  10. data/app/pb_kits/playbook/pb_button/docs/_button_block_content.jsx +12 -9
  11. data/app/pb_kits/playbook/pb_button/docs/_button_block_content.md +1 -0
  12. data/app/pb_kits/playbook/pb_button/docs/_button_icon_options.html.erb +2 -0
  13. data/app/pb_kits/playbook/pb_button/docs/_button_icon_options.jsx +23 -0
  14. data/app/pb_kits/playbook/pb_button/docs/_button_icon_options.md +1 -0
  15. data/app/pb_kits/playbook/pb_button/docs/example.yml +2 -0
  16. data/app/pb_kits/playbook/pb_button/docs/index.js +1 -0
  17. data/app/pb_kits/playbook/pb_date/_date.tsx +1 -1
  18. data/app/pb_kits/playbook/pb_date_picker/_date_picker.jsx +13 -1
  19. data/app/pb_kits/playbook/pb_date_picker/_date_picker.scss +24 -19
  20. data/app/pb_kits/playbook/pb_date_picker/date_picker.html.erb +1 -1
  21. data/app/pb_kits/playbook/pb_date_picker/date_picker.rb +9 -0
  22. data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.js +25 -3
  23. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_positions.html.erb +44 -0
  24. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_positions.jsx +60 -0
  25. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_positions.md +9 -0
  26. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_positions_element.html.erb +33 -0
  27. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_positions_element.jsx +67 -0
  28. data/app/pb_kits/playbook/pb_date_picker/docs/example.yml +4 -0
  29. data/app/pb_kits/playbook/pb_date_picker/docs/index.js +2 -0
  30. data/app/pb_kits/playbook/pb_date_picker/sass_partials/_flatpickr_styles.scss +0 -3
  31. data/app/pb_kits/playbook/pb_date_picker/sass_partials/_overrides.scss +4 -4
  32. data/app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.tsx +142 -0
  33. data/app/pb_kits/playbook/pb_date_range_inline/date_range_inline.test.js +116 -0
  34. data/app/pb_kits/playbook/pb_date_range_inline/docs/_date_range_inline_default.jsx +1 -1
  35. data/app/pb_kits/playbook/pb_date_time/{_date_time.jsx → _date_time.tsx} +2 -5
  36. data/app/pb_kits/playbook/pb_date_time/dateTime.test.js +110 -0
  37. data/app/pb_kits/playbook/pb_date_time/docs/_date_time_align.jsx +1 -1
  38. data/app/pb_kits/playbook/pb_date_time/docs/_date_time_default.jsx +1 -1
  39. data/app/pb_kits/playbook/pb_date_time/docs/_date_time_size.jsx +1 -1
  40. data/app/pb_kits/playbook/pb_date_year_stacked/{_date_year_stacked.jsx → _date_year_stacked.tsx} +6 -6
  41. data/app/pb_kits/playbook/pb_date_year_stacked/date_year_stacked.test.js +67 -0
  42. data/app/pb_kits/playbook/pb_dialog/_dialog.jsx +32 -14
  43. data/app/pb_kits/playbook/pb_dialog/_dialog.scss +5 -0
  44. data/app/pb_kits/playbook/pb_dialog/child_kits/_dialog_body.jsx +2 -2
  45. data/app/pb_kits/playbook/pb_dialog/child_kits/_dialog_footer.jsx +22 -4
  46. data/app/pb_kits/playbook/pb_dialog/child_kits/_dialog_header.jsx +3 -3
  47. data/app/pb_kits/playbook/pb_dialog/dialog.test.jsx +79 -17
  48. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_stacked_alert.jsx +55 -93
  49. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_status.jsx +79 -42
  50. data/app/pb_kits/playbook/pb_file_upload/{_file_upload.jsx → _file_upload.tsx} +6 -10
  51. data/app/pb_kits/playbook/pb_filter/Filter/FilterDouble.jsx +2 -0
  52. data/app/pb_kits/playbook/pb_filter/Filter/FilterSingle.jsx +2 -0
  53. data/app/pb_kits/playbook/pb_filter/Filter/FiltersPopover.jsx +2 -2
  54. data/app/pb_kits/playbook/pb_filter/docs/_filter_min_width.html.erb +1 -0
  55. data/app/pb_kits/playbook/pb_filter/docs/_filter_placement.html.erb +34 -0
  56. data/app/pb_kits/playbook/pb_filter/docs/_filter_placement.jsx +66 -0
  57. data/app/pb_kits/playbook/pb_filter/docs/_filter_placement.md +4 -0
  58. data/app/pb_kits/playbook/pb_filter/docs/example.yml +2 -0
  59. data/app/pb_kits/playbook/pb_filter/docs/index.js +1 -0
  60. data/app/pb_kits/playbook/pb_filter/filter.html.erb +2 -2
  61. data/app/pb_kits/playbook/pb_filter/filter.rb +3 -0
  62. data/app/pb_kits/playbook/pb_filter/filter.test.js +76 -0
  63. data/app/pb_kits/playbook/pb_form_group/{_form_group.jsx → _form_group.tsx} +1 -4
  64. data/app/pb_kits/playbook/pb_form_group/form_group.test.js +17 -0
  65. data/app/pb_kits/playbook/pb_hashtag/_hashtag.tsx +10 -1
  66. data/app/pb_kits/playbook/pb_hashtag/docs/_hashtag_link.html.erb +5 -0
  67. data/app/pb_kits/playbook/pb_hashtag/docs/_hashtag_link.jsx +26 -0
  68. data/app/pb_kits/playbook/pb_hashtag/docs/_hashtag_link.md +1 -0
  69. data/app/pb_kits/playbook/pb_hashtag/docs/example.yml +2 -0
  70. data/app/pb_kits/playbook/pb_hashtag/docs/index.js +1 -0
  71. data/app/pb_kits/playbook/pb_hashtag/hashtag.html.erb +1 -1
  72. data/app/pb_kits/playbook/pb_hashtag/hashtag.rb +6 -0
  73. data/app/pb_kits/playbook/pb_hashtag/hashtag.test.js +54 -0
  74. data/app/pb_kits/playbook/pb_home_address_street/_home_address_street.tsx +129 -0
  75. data/app/pb_kits/playbook/pb_home_address_street/city_emphasis.html.erb +2 -1
  76. data/app/pb_kits/playbook/pb_home_address_street/city_emphasis.rb +2 -0
  77. data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_default.jsx +1 -1
  78. data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_emphasis.jsx +2 -2
  79. data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_link.html.erb +12 -0
  80. data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_link.jsx +23 -0
  81. data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_link.md +1 -0
  82. data/app/pb_kits/playbook/pb_home_address_street/docs/example.yml +3 -0
  83. data/app/pb_kits/playbook/pb_home_address_street/docs/index.js +1 -0
  84. data/app/pb_kits/playbook/pb_home_address_street/home_address_street.rb +4 -0
  85. data/app/pb_kits/playbook/pb_home_address_street/home_adress_street.test.js +60 -0
  86. data/app/pb_kits/playbook/pb_home_address_street/street_emphasis.html.erb +2 -1
  87. data/app/pb_kits/playbook/pb_home_address_street/street_emphasis.rb +4 -1
  88. data/app/pb_kits/playbook/pb_icon_stat_value/{_icon_stat_value.jsx → _icon_stat_value.tsx} +2 -4
  89. data/app/pb_kits/playbook/pb_icon_stat_value/icon_stat_value.test.js +154 -0
  90. data/app/pb_kits/playbook/pb_icon_value/{_icon_value.jsx → _icon_value.tsx} +2 -4
  91. data/app/pb_kits/playbook/pb_icon_value/icon_value.test.js +77 -0
  92. data/app/pb_kits/playbook/pb_label_value/_label_value.tsx +123 -0
  93. data/app/pb_kits/playbook/pb_label_value/label_value.test.js +109 -0
  94. data/app/pb_kits/playbook/pb_layout/{_layout.jsx → _layout.tsx} +13 -19
  95. data/app/pb_kits/playbook/pb_layout/layout.test.js +97 -0
  96. data/app/pb_kits/playbook/pb_lightbox/lightbox.test.jsx +23 -15
  97. data/app/pb_kits/playbook/pb_popover/popover.rb +1 -1
  98. data/app/pb_kits/playbook/pb_text_input/_text_input.tsx +0 -1
  99. data/app/pb_kits/playbook/pb_time/_time.tsx +2 -2
  100. data/app/pb_kits/playbook/pb_timestamp/_timestamp.jsx +5 -2
  101. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_elapsed.html.erb +9 -0
  102. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_elapsed.jsx +10 -0
  103. data/app/pb_kits/playbook/pb_timestamp/timestamp.rb +4 -1
  104. data/app/pb_kits/playbook/pb_timestamp/timestamp.test.js +164 -0
  105. data/app/pb_kits/playbook/pb_tooltip/_tooltip.tsx +0 -4
  106. data/app/pb_kits/playbook/pb_tooltip/tooltip.test.jsx +11 -8
  107. data/app/pb_kits/playbook/tokens/_colors.scss +74 -74
  108. data/app/pb_kits/playbook/tokens/_typography.scss +8 -8
  109. data/app/pb_kits/playbook/utilities/_flexbox.scss +11 -11
  110. data/app/pb_kits/playbook/utilities/{_align_content.scss → flexbox_global_props/_align_content.scss} +0 -0
  111. data/app/pb_kits/playbook/utilities/{_align_items.scss → flexbox_global_props/_align_items.scss} +0 -0
  112. data/app/pb_kits/playbook/utilities/{_align_self.scss → flexbox_global_props/_align_self.scss} +0 -0
  113. data/app/pb_kits/playbook/utilities/{_flex.scss → flexbox_global_props/_flex.scss} +0 -0
  114. data/app/pb_kits/playbook/utilities/{_flex_direction.scss → flexbox_global_props/_flex_direction.scss} +0 -0
  115. data/app/pb_kits/playbook/utilities/{_flex_grow.scss → flexbox_global_props/_flex_grow.scss} +0 -0
  116. data/app/pb_kits/playbook/utilities/{_flex_shrink.scss → flexbox_global_props/_flex_shrink.scss} +0 -0
  117. data/app/pb_kits/playbook/utilities/{_flex_wrap.scss → flexbox_global_props/_flex_wrap.scss} +0 -0
  118. data/app/pb_kits/playbook/utilities/{_justify_content.scss → flexbox_global_props/_justify_content.scss} +0 -0
  119. data/app/pb_kits/playbook/utilities/{_justify_self.scss → flexbox_global_props/_justify_self.scss} +0 -0
  120. data/app/pb_kits/playbook/utilities/{_order.scss → flexbox_global_props/_order.scss} +0 -0
  121. data/app/pb_kits/playbook/utilities/props.ts +1 -1
  122. data/app/pb_kits/playbook/utilities/test-utils.js +2 -3
  123. data/app/pb_kits/playbook/utilities/text.ts +1 -1
  124. data/lib/playbook/version.rb +2 -2
  125. metadata +56 -25
  126. data/app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.jsx +0 -155
  127. data/app/pb_kits/playbook/pb_home_address_street/_home_address_street.jsx +0 -124
  128. data/app/pb_kits/playbook/pb_label_value/_label_value.jsx +0 -155
@@ -12,6 +12,8 @@ module Playbook
12
12
  prop :align, type: Playbook::Props::Enum,
13
13
  values: %w[left center right],
14
14
  default: "left"
15
+ prop :hide_updated, type: Playbook::Props::Boolean,
16
+ default: false
15
17
  prop :show_date, type: Playbook::Props::Boolean,
16
18
  default: true
17
19
  prop :show_timezone, type: Playbook::Props::Boolean,
@@ -70,8 +72,9 @@ module Playbook
70
72
  def format_elapsed_string
71
73
  user_string = show_user ? " by #{text}" : ""
72
74
  datetime_string = " #{time_ago_in_words(pb_date_time.convert_to_timestamp)} ago"
75
+ updated_string = hide_updated ? "" : "Last updated"
73
76
 
74
- "Last updated#{user_string}#{datetime_string}"
77
+ "#{updated_string}#{user_string}#{datetime_string}"
75
78
  end
76
79
 
77
80
  def datetime_or_text
@@ -0,0 +1,164 @@
1
+ import React from "react";
2
+ import { render, screen } from "../utilities/test-utils";
3
+
4
+ import Timestamp from "./_timestamp";
5
+
6
+ const TEST_DATE = "01/01/2020 00:00:000 GMT-0500";
7
+ jest.setSystemTime(new Date(TEST_DATE));
8
+
9
+ const testId = "timestamp-kit";
10
+ const realDate = Date;
11
+ const futureDate = new Date(
12
+ new Date().getFullYear() + 4,
13
+ new Date().getMonth(),
14
+ new Date().getDate(),
15
+ new Date().getHours(),
16
+ new Date().getMinutes()
17
+ );
18
+
19
+ beforeEach(() => {
20
+ global.Date.now = jest.fn(() => new Date(TEST_DATE).getTime());
21
+ });
22
+
23
+ afterEach(() => {
24
+ global.Date = realDate;
25
+ });
26
+
27
+ describe("Timestamp Kit", () => {
28
+ test("renders Timestamp className", () => {
29
+ render(
30
+ <Timestamp
31
+ align="left"
32
+ data={{ testid: testId }}
33
+ showDate
34
+ timestamp={new Date(Date.now())}
35
+ />
36
+ );
37
+
38
+ const kit = screen.getByTestId(testId);
39
+ expect(kit).toHaveClass("pb_timestamp_kit_left_variant");
40
+ });
41
+
42
+ test("renders Timestamp time", () => {
43
+ render(
44
+ <Timestamp
45
+ align="left"
46
+ data={{ testid: testId }}
47
+ showDate={false}
48
+ timestamp={new Date(Date.now())}
49
+ />
50
+ );
51
+
52
+ const kit = screen.getByTestId(testId);
53
+ const text = kit.querySelector(".pb_caption_kit_xs");
54
+ expect(text.textContent).toEqual("12:00a");
55
+ });
56
+
57
+ test("renders Timestamp date and time with future year", () => {
58
+ render(
59
+ <Timestamp
60
+ align="left"
61
+ data={{ testid: testId }}
62
+ showDate
63
+ timestamp={new Date(futureDate)}
64
+ />
65
+ );
66
+ const kit = screen.getByTestId(testId);
67
+ const text = kit.querySelector(".pb_caption_kit_xs");
68
+ expect(text.textContent).toEqual("Jan 1, 2024 · 12:00a");
69
+ });
70
+
71
+ test("renders Timestamp className with alignment", () => {
72
+ render(
73
+ <Timestamp
74
+ align="center"
75
+ data={{ testid: testId }}
76
+ showDate
77
+ timestamp={new Date(Date.now())}
78
+ />
79
+ );
80
+
81
+ const kit = screen.getByTestId(testId);
82
+ expect(kit).toHaveClass("pb_timestamp_kit_center_variant");
83
+ });
84
+
85
+ test("renders Timestamp timezone", () => {
86
+ render(
87
+ <Timestamp
88
+ align="left"
89
+ data={{ testid: testId }}
90
+ showDate={false}
91
+ showTimezone
92
+ timestamp={new Date()}
93
+ timezone="America/New_York"
94
+ />
95
+ );
96
+ const kit = screen.getByTestId(testId);
97
+ const text = kit.querySelector(".pb_caption_kit_xs");
98
+ expect(text.textContent).toEqual("12:00a EST");
99
+ });
100
+
101
+ test("renders Timestamp updated variant with user", () => {
102
+ render(
103
+ <Timestamp
104
+ data={{ testid: testId }}
105
+ showDate={false}
106
+ showUser
107
+ text="Maricris Nonato"
108
+ timestamp={new Date()}
109
+ variant="updated"
110
+ />
111
+ );
112
+ const kit = screen.getByTestId(testId);
113
+ const text = kit.querySelector(".pb_caption_kit_xs");
114
+ expect(text.textContent).toEqual(
115
+ "Last updated by Maricris Nonato on Jan 1 at 12:00a"
116
+ );
117
+ });
118
+
119
+ test("renders Timestamp updated variant without user", () => {
120
+ render(
121
+ <Timestamp
122
+ data={{ testid: testId }}
123
+ showDate={false}
124
+ timestamp={new Date()}
125
+ variant="updated"
126
+ />
127
+ );
128
+ const kit = screen.getByTestId(testId);
129
+ const text = kit.querySelector(".pb_caption_kit_xs");
130
+ expect(text.textContent).toEqual("Last updated on Jan 1 at 12:00a");
131
+ });
132
+
133
+ test("renders Timestamp elapsed variant with user", () => {
134
+ render(
135
+ <Timestamp
136
+ data={{ testid: testId }}
137
+ showUser
138
+ text="Maricris Nonato"
139
+ timestamp={new Date()}
140
+ variant="elapsed"
141
+ />
142
+ );
143
+ const kit = screen.getByTestId(testId);
144
+ const text = kit.querySelector(".pb_caption_kit_xs");
145
+ expect(text.textContent).toEqual(
146
+ "Last updated by Maricris Nonato a few seconds ago"
147
+ );
148
+ });
149
+
150
+ test("renders Timestamp elapsed variant without user and without updated text", () => {
151
+ render(
152
+ <Timestamp
153
+ data={{ testid: testId }}
154
+ hideUpdated
155
+ showUser={false}
156
+ timestamp={new Date()}
157
+ variant="elapsed"
158
+ />
159
+ );
160
+ const kit = screen.getByTestId(testId);
161
+ const text = kit.querySelector(".pb_caption_kit_xs");
162
+ expect(text.textContent).toEqual(" a few seconds ago");
163
+ });
164
+ });
@@ -1,5 +1,3 @@
1
- /* @flow*/
2
-
3
1
  import React, { useRef, useState } from "react"
4
2
  import classnames from "classnames"
5
3
  import {
@@ -41,8 +39,6 @@ const Tooltip = (props: TooltipProps) => {
41
39
  ...rest
42
40
  } = props
43
41
 
44
- console.log(rest)
45
-
46
42
  const dataProps: { [key: string]: any } = buildDataProps(data)
47
43
  const ariaProps: { [key: string]: any } = buildAriaProps(aria)
48
44
 
@@ -1,5 +1,5 @@
1
1
  import React from "react";
2
- import { cleanup, render, screen, fireEvent } from "../utilities/test-utils";
2
+ import { cleanup, render, screen, fireEvent, waitFor } from "../utilities/test-utils";
3
3
  import { Button, Tooltip } from "..";
4
4
 
5
5
  function TooltipTest() {
@@ -30,21 +30,24 @@ test("renders the component", () => {
30
30
  cleanup();
31
31
  });
32
32
 
33
- test("opens on mouseenter", () => {
33
+ test("opens on mouseenter", async () => {
34
34
  render(<TooltipTest />);
35
35
 
36
36
  fireEvent.mouseEnter(screen.getByRole("tooltip_trigger"));
37
- expect(screen.queryByRole("tooltip")).toBeInTheDocument();
38
-
39
- cleanup();
37
+ await waitFor(() => {
38
+ expect(screen.queryByRole("tooltip")).toBeInTheDocument();
39
+ cleanup();
40
+ })
40
41
  });
41
42
 
42
- test("closes on mouseleave", () => {
43
+ test("closes on mouseleave", async () => {
43
44
  render(<TooltipTest />);
44
45
 
45
46
  fireEvent.mouseEnter(screen.getByRole("tooltip_trigger"));
46
47
  fireEvent.mouseLeave(screen.getByRole("tooltip_trigger"));
47
- expect(screen.queryByRole("tooltip")).not.toBeInTheDocument();
48
48
 
49
- cleanup();
49
+ await waitFor(() => {
50
+ expect(screen.queryByRole("tooltip")).not.toBeInTheDocument();
51
+ cleanup();
52
+ })
50
53
  });
@@ -5,15 +5,15 @@ Base colors should not be documented.
5
5
  Only document color use.
6
6
 
7
7
  Colors -----------------------------*/
8
- $royal: #0056CF;
9
- $purple: #9E64E9;
10
- $teal: #00C4D7;
11
- $red: #FF2229;
12
- $red_dark: #ff4a50;
13
- $yellow: #F9BB00;
14
- $green: #00CA74;
15
- $orange: #FD804C;
16
- $default: #93a8b8;
8
+ $royal: #0056CF !default;
9
+ $purple: #9E64E9 !default;
10
+ $teal: #00C4D7 !default;
11
+ $red: #FF2229 !default;
12
+ $red_dark: #ff4a50 !default;
13
+ $yellow: #F9BB00 !default;
14
+ $green: #00CA74 !default;
15
+ $orange: #FD804C !default;
16
+ $default: #93a8b8 !default;
17
17
  $colors: (
18
18
  royal: $royal,
19
19
  purple: $purple,
@@ -26,15 +26,15 @@ $colors: (
26
26
  );
27
27
 
28
28
  /* Specialty Gradient -----------------*/
29
- $gradient_start: #1C75F2;
30
- $gradient_end: $royal;
29
+ $gradient_start: #1C75F2 !default;
30
+ $gradient_end: $royal !default;
31
31
 
32
32
  /* Interface colors -------------------*/
33
- $white: #FFFFFF;
34
- $silver: #F3F7FB;
35
- $slate: #C1CDD6;
36
- $charcoal: #242B42;
37
- $black: #000000;
33
+ $white: #FFFFFF !default;
34
+ $silver: #F3F7FB !default;
35
+ $slate: #C1CDD6 !default;
36
+ $charcoal: #242B42 !default;
37
+ $black: #000000 !default;
38
38
 
39
39
  $interface_colors: (
40
40
  white: $white,
@@ -46,9 +46,9 @@ $interface_colors: (
46
46
  );
47
47
 
48
48
  /* Main colors ------------------------*/
49
- $primary: $royal;
50
- $secondary: $yellow;
51
- $tertiary: $purple;
49
+ $primary: $royal !default;
50
+ $secondary: $yellow !default;
51
+ $tertiary: $purple !default;
52
52
  $main_colors: (
53
53
  primary: $primary,
54
54
  secondary: $secondary,
@@ -57,29 +57,29 @@ $main_colors: (
57
57
  /*=====================================
58
58
 
59
59
  Background colors ------------------*/
60
- $bg_light: $silver;
61
- $bg_dark: #0a0527;
60
+ $bg_light: $silver !default;
61
+ $bg_dark: #0a0527 !default;
62
62
  $background_colors: (
63
63
  bg_light: $bg_light,
64
64
  bg_dark: $bg_dark
65
65
  );
66
66
 
67
67
  /* Card colors ------------------*/
68
- $card_light: $white;
68
+ $card_light: $white !default;
69
69
  $card_dark: rgba($white, $opacity_1);
70
70
  $card_colors: (
71
71
  card_light: $card_light,
72
72
  card_dark: $card_dark
73
73
  );
74
74
 
75
- $primary-action: $primary;
75
+ $primary-action: $primary !default;
76
76
  $action_colors: (
77
77
  primary_action: $primary-action
78
78
  );
79
79
 
80
80
  /* Active colors ----------------------*/
81
81
  $active_light: lighten(#E5F2FF, 3.5%);
82
- $active_dark: #0082ff;
82
+ $active_dark: #0082ff !default;
83
83
  $active_colors: (
84
84
  active_light: $active_light,
85
85
  active_dark: $active_dark
@@ -102,7 +102,7 @@ $focus_input_colors: (
102
102
  );
103
103
 
104
104
  /* Border colors ----------------------*/
105
- $border_light: #E4E8F0;
105
+ $border_light: #E4E8F0 !default;
106
106
  $border_dark: rgba($white, $opacity_1);
107
107
  $border_colors: (
108
108
  border_light: $border_light,
@@ -116,10 +116,10 @@ $shadow_colors: (
116
116
  );
117
117
 
118
118
  /* Text colors ------------------------*/
119
- $text_lt_default: $charcoal;
120
- $text_lt_light: #687887;
121
- $text_lt_lighter: $slate;
122
- $text_dk_default: $white;
119
+ $text_lt_default: $charcoal !default;
120
+ $text_lt_light: #687887 !default;
121
+ $text_lt_lighter: $slate !default;
122
+ $text_dk_default: $white !default;
123
123
  $text_dk_light: rgba($white, $opacity_6);
124
124
  $text_dk_lighter: rgba($white, $opacity_4);
125
125
  $text_colors: (
@@ -132,14 +132,14 @@ $text_colors: (
132
132
  );
133
133
 
134
134
  /* Data colors ------------------------*/
135
- $data_1: $royal;
136
- $data_2: $yellow;
137
- $data_3: $purple;
138
- $data_4: $green;
139
- $data_5: $orange;
140
- $data_6: #144075;
141
- $data_7: $teal;
142
- $data_8: $red;
135
+ $data_1: $royal !default;
136
+ $data_2: $yellow !default;
137
+ $data_3: $purple !default;
138
+ $data_4: $green !default;
139
+ $data_5: $orange !default;
140
+ $data_6: #144075 !default;
141
+ $data_7: $teal !default;
142
+ $data_8: $red !default;
143
143
  $data_colors: (
144
144
  data_1: $data_1,
145
145
  data_2: $data_2,
@@ -152,19 +152,19 @@ $data_colors: (
152
152
  );
153
153
 
154
154
  /* Status colors ----------------------*/
155
- $success: $green;
155
+ $success: $green !default;
156
156
  $success_secondary: lighten($success, 10%);
157
- $warning: $yellow;
157
+ $warning: $yellow !default;
158
158
  $warning_secondary: lighten($warning, 10%);
159
- $error: $red;
160
- $error_dark: $red_dark;
159
+ $error: $red !default;
160
+ $error_dark: $red_dark !default;
161
161
  $error_dark_body: lighten($error_dark, 2%);
162
162
  $error_secondary: lighten($error, 10%);
163
- $info: $teal;
163
+ $info: $teal !default;
164
164
  $info_secondary : lighten($info, 10%);
165
- $neutral: $slate;
165
+ $neutral: $slate !default;
166
166
  $neutral_secondary: lighten($neutral, 10%);
167
- $primary: $primary;
167
+ $primary: $primary !default;
168
168
  $primary_secondary: lighten($primary, 10%);
169
169
 
170
170
  $status_colors: (
@@ -194,16 +194,16 @@ $status_color_text: (
194
194
  );
195
195
 
196
196
  /* Link colors ------------------------*/
197
- $primary_action: $primary;
197
+ $primary_action: $primary !default;
198
198
 
199
199
  /* Product colors ---------------------*/
200
- $windows: $royal;
201
- $siding: $yellow;
202
- $doors: $teal;
203
- $solar: $green;
204
- $roofing: $slate;
205
- $gutters: $purple;
206
- $insulation: $red;
200
+ $windows: $royal !default;
201
+ $siding: $yellow !default;
202
+ $doors: $teal !default;
203
+ $solar: $green !default;
204
+ $roofing: $slate !default;
205
+ $gutters: $purple !default;
206
+ $insulation: $red !default;
207
207
  $product_colors: (
208
208
  windows: $windows,
209
209
  siding: $siding,
@@ -215,27 +215,27 @@ $product_colors: (
215
215
  );
216
216
 
217
217
  /* Category colors ---------------------*/
218
- $category_1: $royal;
219
- $category_2: #0CD2E5;
220
- $category_3: $yellow;
221
- $category_4: #14D595;
222
- $category_5: #A057FF;
223
- $category_6: #FF7034;
224
- $category_7: #97DA22;
225
- $category_8: #EA599F;
226
- $category_9: #0091FF;
227
- $category_10: #5027E4;
228
- $category_11: $red;
229
- $category_12: #109922;
230
- $category_13: #058F9D;
231
- $category_14: #A33E6F;
232
- $category_15: #B2171C;
233
- $category_16: #0A5C49;
234
- $category_17: #325B91;
235
- $category_18: #BE4714;
236
- $category_19: #000080;
237
- $category_20: #5C0E0A;
238
- $category_21: #040830;
218
+ $category_1: $royal !default;
219
+ $category_2: #0CD2E5 !default;
220
+ $category_3: $yellow !default;
221
+ $category_4: #14D595 !default;
222
+ $category_5: #A057FF !default;
223
+ $category_6: #FF7034 !default;
224
+ $category_7: #97DA22 !default;
225
+ $category_8: #EA599F !default;
226
+ $category_9: #0091FF !default;
227
+ $category_10: #5027E4 !default;
228
+ $category_11: $red !default;
229
+ $category_12: #109922 !default;
230
+ $category_13: #058F9D !default;
231
+ $category_14: #A33E6F !default;
232
+ $category_15: #B2171C !default;
233
+ $category_16: #0A5C49 !default;
234
+ $category_17: #325B91 !default;
235
+ $category_18: #BE4714 !default;
236
+ $category_19: #000080 !default;
237
+ $category_20: #5C0E0A !default;
238
+ $category_21: #040830 !default;
239
239
  $category_colors: (
240
240
  category_1: $category_1,
241
241
  category_2: $category_2,
@@ -260,7 +260,7 @@ $category_colors: (
260
260
  category_21: $category_21
261
261
  );
262
262
 
263
- $transparent: transparent;
263
+ $transparent: transparent !default;
264
264
 
265
265
  @function tint($color, $percentage) {
266
266
  @return mix($white, $color, $percentage);
@@ -1,5 +1,5 @@
1
1
 
2
- $font_family_base: "Proxima Nova", "Helvetica Neue", Helvetica, Arial, sans_serif;
2
+ $font_family_base: "Proxima Nova", "Helvetica Neue", Helvetica, Arial, sans_serif !default;
3
3
 
4
4
 
5
5
  /* CLEAN UP AND REMOVE */
@@ -53,12 +53,12 @@ $lspace_super_loosest: .2em;
53
53
 
54
54
 
55
55
  /* Standard Font Weights */
56
- $bold: 600;
57
- $regular: 400;
56
+ $bold: 600 !default;
57
+ $regular: 400 !default;
58
58
 
59
59
  /* Non_Standard Font Weights */
60
- $extrabold: 900;
61
- $boldest: 800;
62
- $bolder: 700;
63
- $light: 300;
64
- $lighter: 100;
60
+ $extrabold: 900 !default;
61
+ $boldest: 800 !default;
62
+ $bolder: 700 !default;
63
+ $light: 300 !default;
64
+ $lighter: 100 !default;
@@ -1,11 +1,11 @@
1
- @import './utilities/flex_direction';
2
- @import './utilities/justify_content';
3
- @import './utilities/flex_wrap';
4
- @import './utilities/justify_self';
5
- @import './utilities/align_items';
6
- @import './utilities/align_content';
7
- @import './utilities/align_self';
8
- @import './utilities/flex';
9
- @import './utilities/flex_grow';
10
- @import './utilities/flex_shrink';
11
- @import './utilities/order';
1
+ @import './flexbox_global_props/flex_direction';
2
+ @import './flexbox_global_props/justify_content';
3
+ @import './flexbox_global_props/flex_wrap';
4
+ @import './flexbox_global_props/justify_self';
5
+ @import './flexbox_global_props/align_items';
6
+ @import './flexbox_global_props/align_content';
7
+ @import './flexbox_global_props/align_self';
8
+ @import './flexbox_global_props/flex';
9
+ @import './flexbox_global_props/flex_grow';
10
+ @import './flexbox_global_props/flex_shrink';
11
+ @import './flexbox_global_props/order';
@@ -47,5 +47,5 @@ export const buildDataProps = (data: {[key: string]: any}) => buildPrefixedProps
47
47
  * @param {Object} rules a 'classnames' compliant rules object, used to derive the root className.
48
48
  * @returns {String} the derived root className value.
49
49
  */
50
- export const buildCss = (...rules: (string | { [x: string]: string; })[]): string => classnames(rules).replace(/\s/g, '_')
50
+ export const buildCss = (...rules: (string | { [x: string]: string | boolean; })[]): string => classnames(rules).replace(/\s/g, '_')
51
51
 
@@ -37,9 +37,8 @@ export const renderKit = (Kit, props = {}, newProps = {}) => {
37
37
 
38
38
  export const ensureAccessible = async (Kit, props = {}, newProps = {}) => {
39
39
  const kitProps = { ...props, ...newProps }
40
- const render = () => <Kit {...kitProps} />
41
- const html = render()
42
- expect(await axe(html)).toHaveNoViolations()
40
+ render(<Kit {...kitProps} />)
41
+ expect(await axe(screen.getByTestId(kitProps.data.testid))).toHaveNoViolations()
43
42
  }
44
43
 
45
44
  export const appendAlert = (message) => {
@@ -10,7 +10,7 @@ export const titleize = (sentence: string): string => (
10
10
 
11
11
  const notEmpty = (value: string | Record<string, unknown>): boolean => !isEmpty(value)
12
12
 
13
- export const joinPresent = (array: [], separator: string): string => (
13
+ export const joinPresent = (array: string[], separator: string): string => (
14
14
  filter(array, notEmpty).join(separator)
15
15
  )
16
16
 
@@ -1,6 +1,6 @@
1
1
  # frozen_string_literal: true
2
2
 
3
3
  module Playbook
4
- PREVIOUS_VERSION = "11.3.0"
5
- VERSION = "11.4.0"
4
+ PREVIOUS_VERSION = "11.5.0"
5
+ VERSION = "11.5.0.pre.alpha.datepicker1"
6
6
  end