playbook_ui 14.0.0 → 14.1.0.pre.alpha.PA1477timestampkit3536

Sign up to get free protection for your applications and to get access to all the features.
Files changed (98) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_advanced_table/Components/TableHeaderCell.tsx +5 -2
  3. data/app/pb_kits/playbook/pb_advanced_table/SubKits/TableBody.tsx +24 -20
  4. data/app/pb_kits/playbook/pb_advanced_table/SubKits/TableHeader.tsx +17 -12
  5. data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss +86 -1
  6. data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx +5 -1
  7. data/app/pb_kits/playbook/pb_advanced_table/advanced_table.test.jsx +30 -0
  8. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_responsive.jsx +67 -0
  9. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_responsive.md +1 -0
  10. data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +1 -0
  11. data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +2 -1
  12. data/app/pb_kits/playbook/pb_avatar/_avatar.scss +0 -30
  13. data/app/pb_kits/playbook/pb_avatar/_avatar.tsx +19 -1
  14. data/app/pb_kits/playbook/pb_avatar/avatar.rb +44 -1
  15. data/app/pb_kits/playbook/pb_avatar/avatar.test.js +17 -0
  16. data/app/pb_kits/playbook/pb_date_picker/docs/_description.md +3 -1
  17. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.scss +1 -1
  18. data/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb +1 -0
  19. data/app/pb_kits/playbook/pb_icon/_icon.tsx +3 -0
  20. data/app/pb_kits/playbook/pb_icon/icon.rb +2 -0
  21. data/app/pb_kits/playbook/pb_icon_circle/_icon_circle.tsx +2 -1
  22. data/app/pb_kits/playbook/pb_icon_circle/icon_circle.rb +2 -2
  23. data/app/pb_kits/playbook/pb_icon_stat_value/_icon_stat_value.scss +0 -11
  24. data/app/pb_kits/playbook/pb_icon_stat_value/_icon_stat_value.tsx +3 -2
  25. data/app/pb_kits/playbook/pb_icon_stat_value/docs/_icon_stat_value_color.html.erb +1 -0
  26. data/app/pb_kits/playbook/pb_icon_stat_value/icon_stat_value.rb +2 -2
  27. data/app/pb_kits/playbook/pb_icon_stat_value/icon_stat_value.test.js +5 -4
  28. data/app/pb_kits/playbook/pb_nav/_horizontal_nav.scss +1 -1
  29. data/app/pb_kits/playbook/pb_online_status/_online_status.scss +52 -5
  30. data/app/pb_kits/playbook/pb_online_status/_online_status.tsx +6 -1
  31. data/app/pb_kits/playbook/pb_online_status/docs/_online_status_no_border.html.erb +1 -0
  32. data/app/pb_kits/playbook/pb_online_status/docs/_online_status_no_border.jsx +14 -0
  33. data/app/pb_kits/playbook/pb_online_status/docs/_online_status_size.html.erb +3 -0
  34. data/app/pb_kits/playbook/pb_online_status/docs/_online_status_size.jsx +25 -0
  35. data/app/pb_kits/playbook/pb_online_status/docs/example.yml +6 -2
  36. data/app/pb_kits/playbook/pb_online_status/docs/index.js +2 -0
  37. data/app/pb_kits/playbook/pb_online_status/online_status.rb +11 -1
  38. data/app/pb_kits/playbook/pb_online_status/online_status.test.js +31 -0
  39. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_toggle.html.erb +61 -0
  40. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_toggle.jsx +70 -0
  41. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_toggle.md +1 -0
  42. data/app/pb_kits/playbook/pb_overlay/docs/example.yml +4 -2
  43. data/app/pb_kits/playbook/pb_overlay/docs/index.js +1 -0
  44. data/app/pb_kits/playbook/pb_star_rating/_star_rating.scss +83 -6
  45. data/app/pb_kits/playbook/pb_star_rating/docs/example.yml +3 -1
  46. data/app/pb_kits/playbook/pb_star_rating/index.js +73 -4
  47. data/app/pb_kits/playbook/pb_star_rating/star_rating.html.erb +1 -1
  48. data/app/pb_kits/playbook/pb_star_rating/star_rating.rb +2 -2
  49. data/app/pb_kits/playbook/pb_star_rating/stars/utils.tsx +5 -1
  50. data/app/pb_kits/playbook/pb_star_rating/subcomponents/_star_rating_interactive.tsx +50 -21
  51. data/app/pb_kits/playbook/pb_table/_table.tsx +1 -1
  52. data/app/pb_kits/playbook/pb_table/index.ts +4 -4
  53. data/app/pb_kits/playbook/pb_table/subcomponents/_table_body.tsx +1 -1
  54. data/app/pb_kits/playbook/pb_table/subcomponents/_table_cell.tsx +1 -1
  55. data/app/pb_kits/playbook/pb_table/subcomponents/_table_head.tsx +1 -1
  56. data/app/pb_kits/playbook/pb_table/subcomponents/_table_header.tsx +1 -1
  57. data/app/pb_kits/playbook/pb_table/subcomponents/_table_row.tsx +1 -1
  58. data/app/pb_kits/playbook/pb_table/table.test.js +2 -0
  59. data/app/pb_kits/playbook/pb_text_input/_text_input.tsx +1 -1
  60. data/app/pb_kits/playbook/pb_text_input/docs/_text_input_default.jsx +1 -1
  61. data/app/pb_kits/playbook/pb_textarea/_textarea.tsx +45 -27
  62. data/app/pb_kits/playbook/pb_textarea/index.ts +3 -3
  63. data/app/pb_kits/playbook/pb_time/_time.tsx +3 -3
  64. data/app/pb_kits/playbook/pb_time_range_inline/_time_range_inline.tsx +1 -1
  65. data/app/pb_kits/playbook/pb_timeline/_item.tsx +1 -1
  66. data/app/pb_kits/playbook/pb_timeline/_timeline.tsx +1 -1
  67. data/app/pb_kits/playbook/pb_timestamp/timestamp.rb +37 -2
  68. data/app/pb_kits/playbook/pb_title_detail/_title_detail.tsx +10 -10
  69. data/app/pb_kits/playbook/pb_toggle/_toggle.tsx +1 -1
  70. data/app/pb_kits/playbook/pb_tooltip/_tooltip.tsx +2 -2
  71. data/app/pb_kits/playbook/pb_treemap_chart/_treemap_chart.tsx +1 -2
  72. data/app/pb_kits/playbook/pb_treemap_chart/treemapChart.test.js +2 -0
  73. data/app/pb_kits/playbook/pb_typeahead/_typeahead.tsx +2 -2
  74. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_multi_kit.html.erb +1 -1
  75. data/app/pb_kits/playbook/pb_typeahead/typeahead.rb +1 -0
  76. data/app/pb_kits/playbook/pb_user/_user.tsx +1 -1
  77. data/app/pb_kits/playbook/pb_user_badge/_user_badge.tsx +6 -6
  78. data/app/pb_kits/playbook/pb_user_badge/badges/million-dollar.tsx +236 -235
  79. data/app/pb_kits/playbook/pb_user_badge/badges/veteran.tsx +1 -1
  80. data/app/pb_kits/playbook/pb_walkthrough/_walkthrough.tsx +68 -63
  81. data/app/pb_kits/playbook/pb_weekday_stacked/_weekday_stacked.tsx +1 -1
  82. data/app/pb_kits/playbook/utilities/_positioning.scss +26 -15
  83. data/dist/chunks/_typeahead-D-4y9pbv.js +22 -0
  84. data/dist/chunks/_weekday_stacked-Cax4nrUa.js +45 -0
  85. data/dist/chunks/lazysizes-DHz07jlL.js +1 -0
  86. data/dist/chunks/{lib-Bf_E03gc.js → lib-BE0Z3F7x.js} +1 -1
  87. data/dist/chunks/{pb_form_validation-D0dhqeN2.js → pb_form_validation-TzZQ0Flx.js} +1 -1
  88. data/dist/chunks/vendor.js +1 -1
  89. data/dist/playbook-doc.js +1 -1
  90. data/dist/playbook-rails-react-bindings.js +1 -1
  91. data/dist/playbook-rails.js +1 -1
  92. data/dist/playbook.css +1 -1
  93. data/lib/playbook/version.rb +2 -2
  94. metadata +20 -11
  95. data/app/pb_kits/playbook/pb_online_status/_online_status_mixins.scss +0 -32
  96. data/dist/chunks/_typeahead-COUJ88EA.js +0 -22
  97. data/dist/chunks/_weekday_stacked-BAkwel5p.js +0 -45
  98. data/dist/chunks/lazysizes-B7xYodB-.js +0 -1
@@ -10,8 +10,8 @@ module Playbook
10
10
  values: %w[xxs xs sm md base lg xl],
11
11
  default: "md"
12
12
  prop :variant, type: Playbook::Props::Enum,
13
- values: %w[default royal blue orange purple teal red yellow green orange],
14
- default: "default"
13
+ values: %w[default royal blue orange purple teal red yellow green orange lighter],
14
+ default: "lighter"
15
15
 
16
16
  def classname
17
17
  generate_classname("pb_icon_circle_kit", "size_#{size}", variant)
@@ -50,15 +50,4 @@
50
50
  margin-right: $space-sm;
51
51
  }
52
52
  }
53
- [class^=pb_title_kit_1] + [class^=pb_body_kit] {
54
- font-size: 36px;
55
- }
56
-
57
- [class^=pb_title_kit_2] + [class^=pb_body_kit] {
58
- font-size: 24px
59
- }
60
-
61
- [class^=pb_title_kit_3] + [class^=pb_body_kit] {
62
- font-size: 20px;
63
- }
64
53
  }
@@ -32,7 +32,8 @@ type IconStatValueProps = {
32
32
  | "red"
33
33
  | "yellow"
34
34
  | "orange"
35
- | "green",
35
+ | "green"
36
+ | "lighter",
36
37
  }
37
38
 
38
39
  const IconStatValue = (props: IconStatValueProps): React.ReactElement => {
@@ -49,7 +50,7 @@ const IconStatValue = (props: IconStatValueProps): React.ReactElement => {
49
50
  text = '',
50
51
  unit = '',
51
52
  value = 0,
52
- variant = 'default',
53
+ variant = 'lighter',
53
54
  } = props
54
55
  const ariaProps = buildAriaProps(aria)
55
56
  const dataProps = buildDataProps(data)
@@ -47,6 +47,7 @@
47
47
  value: 19.18,
48
48
  variant:"green"
49
49
  }) %>
50
+ <br>
50
51
  <%= pb_rails("icon_stat_value", props: { icon: "globe",
51
52
  text: "Uranus",
52
53
  unit: "AU",
@@ -9,8 +9,8 @@ module Playbook
9
9
  values: %w[sm md lg],
10
10
  default: "sm"
11
11
  prop :variant, type: Playbook::Props::Enum,
12
- values: %w[default royal blue purple teal red yellow green orange],
13
- default: "default"
12
+ values: %w[default royal blue purple teal red yellow green orange lighter],
13
+ default: "lighter"
14
14
 
15
15
  prop :orientation, type: Playbook::Props::Enum,
16
16
  values: %w[vertical horizontal],
@@ -18,7 +18,7 @@ describe("IconStatValue Kit", () => {
18
18
  )
19
19
 
20
20
  const kit = screen.getByTestId(testId)
21
- expect(kit).toHaveClass("pb_icon_stat_value_kit_horizontal_sm_default")
21
+ expect(kit).toHaveClass("pb_icon_stat_value_kit_horizontal_sm_lighter")
22
22
  })
23
23
 
24
24
  test("renders icon", () => {
@@ -101,7 +101,7 @@ describe("IconStatValue Kit", () => {
101
101
  )
102
102
 
103
103
  const kit = screen.getByTestId(testId)
104
- expect(kit).toHaveClass(`pb_icon_stat_value_kit_horizontal_${sizeProp}_default`)
104
+ expect(kit).toHaveClass(`pb_icon_stat_value_kit_horizontal_${sizeProp}_lighter`)
105
105
 
106
106
  cleanup()
107
107
  })
@@ -115,7 +115,8 @@ describe("IconStatValue Kit", () => {
115
115
  "teal",
116
116
  "red",
117
117
  "yellow",
118
- "green"].forEach(
118
+ "green",
119
+ "lighter"].forEach(
119
120
  (colorProp) => {
120
121
  render(
121
122
  <IconStatValue
@@ -148,7 +149,7 @@ describe("IconStatValue Kit", () => {
148
149
  )
149
150
 
150
151
  const kit = screen.getByTestId(testId)
151
- expect(kit).toHaveClass("pb_icon_stat_value_kit_vertical_sm_default")
152
+ expect(kit).toHaveClass("pb_icon_stat_value_kit_vertical_sm_lighter")
152
153
  })
153
154
 
154
155
  })
@@ -11,7 +11,7 @@ $selector: ".pb_nav_list";
11
11
  [class^="pb_nav_list"][class*="_horizontal"] {
12
12
  .pb_nav_wrapper {
13
13
  display: flex;
14
- align-items: center;
14
+ align-items: end;
15
15
  padding: 0;
16
16
  margin: 0;
17
17
  list-style: none;
@@ -1,11 +1,58 @@
1
- @import "online_status_mixins";
1
+ @import "../tokens/colors";
2
+
3
+ $pb_online_status_size: 8px;
4
+ $pb_online_status_border: 2px;
5
+ $pb_online_status_sizes: (
6
+ "sm": 8px,
7
+ "md": 10px,
8
+ "lg": 12px,
9
+ );
10
+
11
+ $pb_online_status_statuses: (
12
+ online: $success,
13
+ away: $warning,
14
+ offline: $neutral,
15
+ success: $success,
16
+ warning: $warning,
17
+ error: $error,
18
+ info: $info,
19
+ neutral: $neutral,
20
+ primary: $primary,
21
+ );
2
22
 
3
23
  [class^=pb_online_status_kit] {
4
- @include pb_online_status;
24
+ box-sizing: content-box;
25
+ width: $pb_online_status_size;
26
+ height: $pb_online_status_size;
27
+ flex-basis: $pb_online_status_size;
28
+ flex-grow: 0;
29
+ flex-shrink: 0;
30
+ border-width: $pb_online_status_border;
31
+ border-color: $white;
32
+ border-style: solid;
33
+ border-radius: 50%;
34
+ background: $neutral;
35
+
36
+ &.dark {
37
+ border-color: $bg_dark;
38
+ }
5
39
 
6
40
  @each $status_name, $status_value in $pb_online_status_statuses {
7
- &[class*=_#{$status_name}] {
8
- @include pb_online_status($status_value);
41
+ &[class*=_#{$status_name}] {
42
+ background: $status_value;
9
43
  }
10
44
  }
11
- }
45
+
46
+ @each $size, $value in $pb_online_status_sizes {
47
+ &[class*=_size_#{$size}] {
48
+ width: $value;
49
+ height: $value;
50
+ flex-basis: $value;
51
+ }
52
+ }
53
+
54
+ &[class*=_no_border] {
55
+ border-width: 0;
56
+ border-style: none;
57
+ }
58
+ }
@@ -11,6 +11,8 @@ type OnlineStatusProps = {
11
11
  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
12
12
  id?: string,
13
13
  status?: "away" | "error" | "info" | "neutral" | "offline" |"online" | "primary"| "success" | "warning",
14
+ size?: "sm" | "md" | "lg",
15
+ noBorder?: boolean,
14
16
  } & GlobalProps
15
17
 
16
18
  const OnlineStatus = (props: OnlineStatusProps) => {
@@ -21,6 +23,8 @@ const OnlineStatus = (props: OnlineStatusProps) => {
21
23
  htmlOptions = {},
22
24
  id,
23
25
  status = 'offline',
26
+ size = 'sm',
27
+ noBorder = false,
24
28
  } = props
25
29
 
26
30
  aria.label = status
@@ -28,7 +32,8 @@ const OnlineStatus = (props: OnlineStatusProps) => {
28
32
  const ariaProps = buildAriaProps(aria)
29
33
  const dataProps = buildDataProps(data)
30
34
  const htmlProps = buildHtmlProps(htmlOptions)
31
- const classes = classnames(buildCss('pb_online_status_kit', status), globalProps(props), className)
35
+ const getBorder = noBorder ? 'no_border' : ''
36
+ const classes = classnames(buildCss('pb_online_status_kit', status, getBorder, "size", size), globalProps(props), className)
32
37
 
33
38
  return (
34
39
  <div
@@ -0,0 +1 @@
1
+ <%= pb_rails("online_status", props: { no_border: true }) %>
@@ -0,0 +1,14 @@
1
+ import React from 'react'
2
+
3
+ import OnlineStatus from '../_online_status'
4
+
5
+ const OnlineStatusNoBorder = (props) => (
6
+ <>
7
+ <OnlineStatus
8
+ noBorder
9
+ {...props}
10
+ />
11
+ </>
12
+ )
13
+
14
+ export default OnlineStatusNoBorder
@@ -0,0 +1,3 @@
1
+ <%= pb_rails("online_status", props: { size: "sm", margin_y: "xs" }) %>
2
+ <%= pb_rails("online_status", props: { size: "md", margin_y: "xs" }) %>
3
+ <%= pb_rails("online_status", props: { size: "lg", margin_y: "xs" }) %>
@@ -0,0 +1,25 @@
1
+ import React from 'react'
2
+
3
+ import OnlineStatus from '../_online_status'
4
+
5
+ const OnlineStatusSize = (props) => (
6
+ <>
7
+ <OnlineStatus
8
+ marginY="xs"
9
+ size="sm"
10
+ {...props}
11
+ />
12
+ <OnlineStatus
13
+ marginY="xs"
14
+ size="md"
15
+ {...props}
16
+ />
17
+ <OnlineStatus
18
+ marginY="xs"
19
+ size="lg"
20
+ {...props}
21
+ />
22
+ </>
23
+ )
24
+
25
+ export default OnlineStatusSize
@@ -1,8 +1,12 @@
1
1
  examples:
2
2
 
3
3
  rails:
4
- - online_status_default: Default
4
+ - online_status_default: Colors
5
+ - online_status_size: Size
6
+ - online_status_no_border: No Border
5
7
 
6
8
 
7
9
  react:
8
- - online_status_default: Default
10
+ - online_status_default: Colors
11
+ - online_status_size: Size
12
+ - online_status_no_border: No Border
@@ -1 +1,3 @@
1
1
  export { default as OnlineStatusDefault } from './_online_status_default.jsx'
2
+ export { default as OnlineStatusSize } from './_online_status_size.jsx'
3
+ export { default as OnlineStatusNoBorder } from './_online_status_no_border.jsx'
@@ -7,8 +7,18 @@ module Playbook
7
7
  values: %w[online offline away success warning error info neutral primary],
8
8
  default: "offline"
9
9
 
10
+ prop :size, type: Playbook::Props::Enum,
11
+ values: %w[sm md lg],
12
+ default: "sm"
13
+
14
+ prop :no_border, type: Playbook::Props::Boolean, default: false
15
+
10
16
  def classname
11
- generate_classname("pb_online_status_kit", status)
17
+ generate_classname("pb_online_status_kit", status, is_no_border, "size", size)
18
+ end
19
+
20
+ def is_no_border
21
+ no_border ? "no_border" : nil
12
22
  end
13
23
  end
14
24
  end
@@ -0,0 +1,31 @@
1
+ import React from 'react'
2
+ import { render, screen } from '../utilities/test-utils'
3
+
4
+ import OnlineStatus from './_online_status'
5
+
6
+ const testId = 'online-status'
7
+
8
+ test('renders online status with defaults', () => {
9
+ render(
10
+ <OnlineStatus data={{ testid: testId }} />
11
+ )
12
+
13
+ const kit = screen.getByTestId(testId)
14
+ expect(kit).toHaveClass('pb_online_status_kit_offline_size_sm')
15
+ })
16
+
17
+ test('renders online status with props', () => {
18
+ render(
19
+ <OnlineStatus
20
+ className="additional_class"
21
+ dark
22
+ data={{ testid: testId }}
23
+ noBorder
24
+ size="lg"
25
+ status="online"
26
+ />
27
+ )
28
+
29
+ const kit = screen.getByTestId(testId)
30
+ expect(kit).toHaveClass('pb_online_status_kit_online_no_border_size_lg dark additional_class')
31
+ })
@@ -0,0 +1,61 @@
1
+ <div id="outer-container">
2
+ <%= pb_rails("overlay", props: { id: "overlay-container", overflow: "hidden" }) do %>
3
+ <div id="underlying-table">
4
+ <%= pb_rails("table", props: { size: "sm" }) do %>
5
+ <thead>
6
+ <tr>
7
+ <th>Column 1</th>
8
+ <th>Column 2</th>
9
+ <th>Column 3</th>
10
+ <th>Column 4</th>
11
+ <th>Column 5</th>
12
+ </tr>
13
+ </thead>
14
+ <tbody>
15
+ <% 7.times do %>
16
+ <tr>
17
+ <td>Value 1</td>
18
+ <td>Value 2</td>
19
+ <td>Value 3</td>
20
+ <td>Value 4</td>
21
+ <td>Value 5</td>
22
+ </tr>
23
+ <% end %>
24
+ </tbody>
25
+ <% end %>
26
+ </div>
27
+ <% end %>
28
+ <%= pb_rails("button", props: { text: "Show More", id: "show-more-button", variant: "link", full_width: true, icon: "chevron-down", icon_right: true }) %>
29
+ <%= pb_rails("button", props: { text: "Show Less", id: "show-less-button", variant: "link", full_width: true, icon: "chevron-up", icon_right: true }) %>
30
+ </div>
31
+
32
+ <script type="text/javascript">
33
+ document.addEventListener("DOMContentLoaded", () => {
34
+ const showMoreButton = document.getElementById("show-more-button");
35
+ const showLessButton = document.getElementById("show-less-button");
36
+ const overlayContainer = document.getElementById("overlay-container");
37
+ const underlyingTable = document.getElementById("underlying-table");
38
+ const outerContainer = document.getElementById("outer-container");
39
+
40
+ showLessButton.style.display = "none";
41
+ underlyingTable.style.height = "200px";
42
+
43
+ const showMore = () => {
44
+ outerContainer.appendChild(underlyingTable);
45
+ outerContainer.appendChild(showLessButton);
46
+ showMoreButton.style.display = "none";
47
+ showLessButton.style.display = "flex";
48
+ underlyingTable.style.height = "auto";
49
+ };
50
+
51
+ const showLess = () => {
52
+ overlayContainer.appendChild(underlyingTable);
53
+ showMoreButton.style.display = "flex";
54
+ showLessButton.style.display = "none";
55
+ underlyingTable.style.height = "200px";
56
+ };
57
+
58
+ showMoreButton.addEventListener("click", showMore);
59
+ showLessButton.addEventListener("click", showLess);
60
+ });
61
+ </script>
@@ -0,0 +1,70 @@
1
+ /* eslint-disable react/no-multi-comp */
2
+ import React, { useState } from "react";
3
+ import { Overlay, Table, Button } from "playbook-ui";
4
+
5
+ const TableExample = () => {
6
+ return (
7
+ <Table size="sm">
8
+ <thead>
9
+ <tr>
10
+ <th>{"Column 1"}</th>
11
+ <th>{"Column 2"}</th>
12
+ <th>{"Column 3"}</th>
13
+ <th>{"Column 4"}</th>
14
+ <th>{"Column 5"}</th>
15
+ </tr>
16
+ </thead>
17
+ <tbody>
18
+ {Array.from({ length: 7 }, (_, index) => (
19
+ <tr key={index}>
20
+ {Array.from({ length: 5 }, (_, columnIndex) => (
21
+ <td key={columnIndex}>{`Value ${columnIndex + 1}`}</td>
22
+ ))}
23
+ </tr>
24
+ ))}
25
+ </tbody>
26
+ </Table>
27
+ );
28
+ };
29
+
30
+ const OverlayToggle = () => {
31
+ const [showOverlay, setShowOverlay] = useState(true);
32
+
33
+ return (
34
+ <>
35
+ {showOverlay ? (
36
+ <>
37
+ <Overlay overflow="hidden">
38
+ <div style={{ height: 200 }}>
39
+ <TableExample />
40
+ </div>
41
+ </Overlay>
42
+ <Button
43
+ fullWidth
44
+ icon="chevron-down"
45
+ iconRight
46
+ key="chevron-down"
47
+ onClick={() => setShowOverlay(false)}
48
+ text="Show More"
49
+ variant="link"
50
+ />
51
+ </>
52
+ ) : (
53
+ <>
54
+ <TableExample />
55
+ <Button
56
+ fullWidth
57
+ icon="chevron-up"
58
+ iconRight
59
+ key="chevron-up"
60
+ onClick={() => setShowOverlay(true)}
61
+ text="Show Less"
62
+ variant="link"
63
+ />
64
+ </>
65
+ )}
66
+ </>
67
+ );
68
+ };
69
+
70
+ export default OverlayToggle;
@@ -0,0 +1 @@
1
+ To toggle an overlay, add a button with an event handler. Remove the overlay container to reveal the underlying content. Re-wrap the overlay container to add the overlay back.
@@ -2,7 +2,9 @@ examples:
2
2
  react:
3
3
  - overlay_default: Default
4
4
  - overlay_multi_directional: Multi-directional
5
+ - overlay_toggle: Toggle
5
6
 
6
7
  rails:
7
- - overlay_default: Default
8
- - overlay_multi_directional: Multi-directional
8
+ - overlay_default: Default
9
+ - overlay_multi_directional: Multi-directional
10
+ - overlay_toggle: Toggle
@@ -1,2 +1,3 @@
1
1
  export { default as OverlayDefault } from './_overlay_default.jsx'
2
2
  export { default as OverlayMultiDirectional } from './_overlay_multi_directional.jsx'
3
+ export { default as OverlayToggle } from './_overlay_toggle.jsx'
@@ -9,10 +9,10 @@
9
9
  justify-content: flex-start;
10
10
 
11
11
  path {
12
- &.suble_star_dark {
12
+ &.subtle_star_dark {
13
13
  fill: $text_dk_default;
14
14
  }
15
- &.suble_star_light {
15
+ &.subtle_star_light {
16
16
  fill: $text_lt_default;
17
17
  }
18
18
  &.outline_star_dark {
@@ -49,9 +49,10 @@
49
49
 
50
50
  $star-styles: (
51
51
  yellow_star: (color: $yellow),
52
- primary_star: (color: $royal),
53
- suble_star_light: (color: $text_lt_default),
54
- suble_star_dark: (color: $text_dk_default),
52
+ primary_star_light: (color: $royal),
53
+ primary_star_dark: (color: $active_dark),
54
+ subtle_star_light: (color: $text_lt_default),
55
+ subtle_star_dark: (color: $text_dk_default),
55
56
  empty_star_dark: (color: $border_dark),
56
57
  empty_star_light: (color: $border_light),
57
58
  outline_empty_star_dark: (color: transparent),
@@ -111,13 +112,89 @@
111
112
  }
112
113
  }
113
114
  }
115
+
116
+ // Interactivity
117
+ path {
118
+ transition: fill 0.2s
119
+ }
120
+ // Rails selected styles
121
+ .interactive-star-icon {
122
+ cursor: pointer;
123
+ }
114
124
  .yellow-star-selected {
115
125
  color: $yellow;
116
126
  }
117
127
  .primary-star-selected {
118
128
  color: $royal
119
129
  }
120
- .suble-star-selected {
130
+ .subtle-star-selected {
121
131
  color: $text_lt_default;
122
132
  }
133
+ &.dark {
134
+ .primary-star-selected {
135
+ color: $active_dark;
136
+ }
137
+ .subtle-star-selected {
138
+ color: $text_dk_default;
139
+ }
140
+ }
141
+ // React selected styles
142
+ &.star-selected {
143
+ path {
144
+ animation: growColor 0.3s forwards;
145
+ }
146
+ .yellow-star-selected {
147
+ color: $yellow;
148
+ }
149
+ .primary-star-selected {
150
+ color: $royal;
151
+ }
152
+ .subtle-star-selected {
153
+ color: $text_lt_default;
154
+ }
155
+ &.dark {
156
+ .primary-star-selected {
157
+ color: $active_dark;
158
+ }
159
+ .subtle-star-selected {
160
+ color: $text_dk_default;
161
+ }
162
+ }
163
+ }
164
+ // Hover styles
165
+ .star-hovered {
166
+ path {
167
+ fill: mix($primary, $white, 20%);
168
+ }
169
+ }
170
+ &.dark{
171
+ .star-hovered {
172
+ path {
173
+ fill: mix($active_dark, $bg_dark, 50%);
174
+ }
175
+ }
176
+ }
177
+ // Focus styles
178
+ .pb_custom_icon {
179
+ &:focus {
180
+ outline: none;
181
+ }
182
+ &:focus-visible {
183
+ border-radius: 2px;
184
+ outline: 1px solid $primary;
185
+ outline-offset: 2px;
186
+ }
187
+ }
188
+ &.dark {
189
+ .pb_custom_icon {
190
+ &:focus {
191
+ outline: none;
192
+ }
193
+ &:focus-visible {
194
+ border-radius: 2px;
195
+ outline: 1px solid $active_dark;
196
+ outline-offset: 2px;
197
+ }
198
+ }
199
+ }
123
200
  }
@@ -6,6 +6,7 @@ examples:
6
6
  - star_rating_hide: Layout Options
7
7
  - star_rating_number_config: Number Config
8
8
  - star_rating_size_options: Size Options
9
+ - star_rating_interactive: Interactive
9
10
 
10
11
  react:
11
12
  - star_rating_default: Default
@@ -13,4 +14,5 @@ examples:
13
14
  - star_rating_background_options: Background Options
14
15
  - star_rating_hide: Layout Options
15
16
  - star_rating_number_config: Number Config
16
- - star_rating_size_options: Size Options
17
+ - star_rating_size_options: Size Options
18
+ - star_rating_interactive: Interactive