playbook_ui 12.10.0 → 12.12.0.pre.alpha.PLAY697sandpacklayoutstyles413

Sign up to get free protection for your applications and to get access to all the features.
Files changed (34) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_avatar/_avatar.tsx +1 -1
  3. data/app/pb_kits/playbook/pb_button/_button.tsx +15 -3
  4. data/app/pb_kits/playbook/pb_button/button.rb +10 -1
  5. data/app/pb_kits/playbook/pb_button/button.test.js +92 -61
  6. data/app/pb_kits/playbook/pb_button/docs/_button_link.html.erb +3 -2
  7. data/app/pb_kits/playbook/pb_button/docs/_button_link.jsx +12 -2
  8. data/app/pb_kits/playbook/pb_button/docs/_button_link.md +1 -0
  9. data/app/pb_kits/playbook/pb_circle_chart/_circle_chart.tsx +3 -3
  10. data/app/pb_kits/playbook/pb_circle_chart/circle_chart.rb +3 -0
  11. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_custom_tooltip.html.erb +20 -0
  12. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_custom_tooltip.jsx +31 -0
  13. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_custom_tooltip.md +3 -0
  14. data/app/pb_kits/playbook/pb_circle_chart/docs/example.yml +3 -1
  15. data/app/pb_kits/playbook/pb_circle_chart/docs/index.js +1 -0
  16. data/app/pb_kits/playbook/pb_date_picker/sass_partials/_day_styles.scss +1 -1
  17. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.tsx +13 -1
  18. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_auto_close.jsx +68 -0
  19. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_auto_close.md +1 -0
  20. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/example.yml +1 -0
  21. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/index.js +1 -0
  22. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/fixed_confirmation_toast.rb +6 -1
  23. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/index.js +17 -0
  24. data/app/pb_kits/playbook/pb_rich_text_editor/{_rich_text_editor.jsx → _rich_text_editor.tsx} +40 -32
  25. data/app/pb_kits/playbook/pb_rich_text_editor/{inlineFocus.js → inlineFocus.ts} +1 -1
  26. data/app/pb_kits/playbook/pb_rich_text_editor/{useFocus.js → useFocus.ts} +1 -1
  27. data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.tsx +1 -0
  28. data/app/pb_kits/playbook/pb_selectable_card_icon/_selectable_card_icon.test.js +67 -0
  29. data/app/pb_kits/playbook/pb_selectable_card_icon/{_selectable_card_icon.jsx → _selectable_card_icon.tsx} +26 -28
  30. data/app/pb_kits/playbook/pb_source/{_source.jsx → _source.tsx} +33 -29
  31. data/app/pb_kits/playbook/pb_source/source.test.js +82 -0
  32. data/app/pb_kits/playbook/pb_tooltip/_tooltip.tsx +4 -1
  33. data/lib/playbook/version.rb +2 -2
  34. metadata +20 -12
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: f9e1489462a3801b52dfe684f47a206bd828e7acef14d05c33d0f82fc2338cee
4
- data.tar.gz: 01d894ce63d37e36d7ba7cac5e6469c51f280b06d43a736046899300b3c6b230
3
+ metadata.gz: eac850ebbc05e1ce91f38e6377564b32fa3ba241de3ff599b5e0084a39666223
4
+ data.tar.gz: 2ce42692684f6598b0c22d7e763ff9bd815044bd28ea806b659746d1f73ea098
5
5
  SHA512:
6
- metadata.gz: 4ce7e5fa512dfe372904d822f263888f05557305935ff171c48582aa1d80a67ddbfb772a92598ecffce4d39a6399a6b34e27b754b4f11f46da116cb5db358030
7
- data.tar.gz: 47eccdf4be23394775ab3ebd74e0797d0b49290906dd0ae7da66d289b04702f374152cbc1180963ee5a0c9d8c31988d61a7421d00adeb34aa55ca1c150a81671
6
+ metadata.gz: 268d73b140d2e8aeb3086a4588b2a42c3f3c0dd26d7c4112b37583bcd85e9657fe59e6854042e2a8c9ca02bb139e4aef5aec926430d9da6f2b98c2c1b92d2d2e
7
+ data.tar.gz: f58ed28b37d12a8e3555f44612a907aabb5e60b81cba57c78c017bb86328c6d437d14999849106847bc5967f59f51daac1c3e5bca921f7e7f7958dffc1ee843a
@@ -7,7 +7,7 @@ import { globalProps, GlobalProps } from '../utilities/globalProps'
7
7
  import Image from '../pb_image/_image'
8
8
  import OnlineStatus from '../pb_online_status/_online_status'
9
9
 
10
- type AvatarProps = {
10
+ export type AvatarProps = {
11
11
  aria?: {[key: string]: string},
12
12
  className?: string,
13
13
  data?: {[key: string]: string},
@@ -25,6 +25,7 @@ type ButtonPropTypes = {
25
25
  onClick?: EventHandler,
26
26
  tabIndex?: number,
27
27
  size?: 'sm' | 'md' | 'lg',
28
+ target?: string,
28
29
  text?: string,
29
30
  type?: 'inline' | null,
30
31
  htmlType?: 'submit' | 'reset' | 'button' | undefined,
@@ -70,6 +71,7 @@ const Button = (props: ButtonPropTypes) => {
70
71
  tabIndex,
71
72
  link = null,
72
73
  newWindow = false,
74
+ target = '',
73
75
  text,
74
76
  htmlType = 'button',
75
77
  value,
@@ -119,7 +121,17 @@ const Button = (props: ButtonPropTypes) => {
119
121
  }
120
122
  }
121
123
 
122
- const displayButton = () => {
124
+ const getTargetAttribute = () => {
125
+ if (target && link) {
126
+ return target
127
+ } else if (newWindow) {
128
+ return '_blank'
129
+ }
130
+
131
+ return null
132
+ }
133
+
134
+ const displayButton = () => {
123
135
  if (link)
124
136
  return (
125
137
  <a
@@ -128,10 +140,10 @@ const Button = (props: ButtonPropTypes) => {
128
140
  className={css}
129
141
  href={link}
130
142
  id={id}
131
- rel="noreferrer"
143
+ rel={target !== 'child' ? 'noreferrer' : null}
132
144
  role="link"
133
145
  tabIndex={tabIndex}
134
- target={newWindow ? '_blank' : null}
146
+ target={getTargetAttribute()}
135
147
  >
136
148
  {ifLoading()}
137
149
  </a>
@@ -18,6 +18,7 @@ module Playbook
18
18
  prop :variant, type: Playbook::Props::Enum,
19
19
  values: %w[primary secondary link],
20
20
  default: "primary"
21
+ prop :target
21
22
  prop :text
22
23
  prop :type
23
24
  prop :value
@@ -41,11 +42,19 @@ module Playbook
41
42
  }.compact
42
43
  end
43
44
 
45
+ def target_attribute
46
+ if target && link
47
+ target
48
+ elsif new_window
49
+ "_blank"
50
+ end
51
+ end
52
+
44
53
  def link_options
45
54
  options.tap do |option|
46
55
  option[:href] = link
47
56
  option[:role] = "link"
48
- option[:target] = "_blank" if new_window
57
+ option[:target] = target_attribute if target_attribute.present?
49
58
  option[:tabindex] = 0
50
59
  end
51
60
  end
@@ -6,97 +6,128 @@ import Button from './_button'
6
6
 
7
7
  // Primary Test Variables
8
8
  const htmlType = 'submit',
9
- text = 'Button Text',
10
- value = '1234'
9
+ text = 'Button Text',
10
+ value = '1234'
11
11
 
12
12
  test('passes type, text, and value props to button', () => {
13
- render(
14
- <Button
15
- data={{ testid: 'primary-test' }}
16
- htmlType={htmlType}
17
- text={text}
18
- value={value}
19
- />
20
- )
21
-
22
- const kit = screen.getByTestId('primary-test')
23
- const content = screen.getByText(text)
24
-
25
- expect(kit).toHaveClass('pb_button_kit_primary_inline_enabled')
26
- expect(kit).toHaveAttribute('type', htmlType)
27
- expect(kit).toHaveAttribute('value', value)
28
- expect(content).toHaveTextContent(text)
13
+ render(
14
+ <Button
15
+ data={{ testid: 'primary-test' }}
16
+ htmlType={htmlType}
17
+ text={text}
18
+ value={value}
19
+ />
20
+ )
21
+
22
+ const kit = screen.getByTestId('primary-test')
23
+ const content = screen.getByText(text)
24
+
25
+ expect(kit).toHaveClass('pb_button_kit_primary_inline_enabled')
26
+ expect(kit).toHaveAttribute('type', htmlType)
27
+ expect(kit).toHaveAttribute('value', value)
28
+ expect(content).toHaveTextContent(text)
29
29
  })
30
30
 
31
31
  // Link Test Variables
32
32
  const link = 'https://www.google.com'
33
33
 
34
34
  test('adds link to button', () => {
35
- render(
36
- <Button
37
- data={{ testid: 'link-test' }}
38
- link={link}
39
- />
40
- )
35
+ render(
36
+ <Button
37
+ data={{ testid: 'link-test' }}
38
+ link={link}
39
+ />
40
+ )
41
41
 
42
- const kit = screen.getByTestId('link-test')
42
+ const kit = screen.getByTestId('link-test')
43
43
 
44
- expect(kit).toHaveAttribute('href', link)
44
+ expect(kit).toHaveAttribute('href', link)
45
45
  })
46
46
 
47
47
  test('button with secondary variant', () => {
48
- render(
49
- <Button
50
- data={{ testid: 'variant-test' }}
51
- variant="secondary"
52
- />
53
- )
48
+ render(
49
+ <Button
50
+ data={{ testid: 'variant-test' }}
51
+ variant="secondary"
52
+ />
53
+ )
54
54
 
55
- const kit = screen.getByTestId('variant-test')
55
+ const kit = screen.getByTestId('variant-test')
56
56
 
57
- expect(kit).toHaveClass('pb_button_kit_secondary_inline_enabled')
58
- expect(kit).toHaveAttribute('type', 'button')
57
+ expect(kit).toHaveClass('pb_button_kit_secondary_inline_enabled')
58
+ expect(kit).toHaveAttribute('type', 'button')
59
59
  })
60
60
 
61
61
  test('disable prop', () => {
62
- render(
63
- <Button
64
- data={{ testid: 'disable-test' }}
65
- disabled
66
- />
67
- )
62
+ render(
63
+ <Button
64
+ data={{ testid: 'disable-test' }}
65
+ disabled
66
+ />
67
+ )
68
68
 
69
- const kit = screen.getByTestId('disable-test')
69
+ const kit = screen.getByTestId('disable-test')
70
70
 
71
- expect(kit).toBeDisabled()
71
+ expect(kit).toBeDisabled()
72
72
  })
73
73
 
74
74
  test('click event', async () => {
75
- render(
76
- <Button
77
- data={{ testid: 'click-test' }}
78
- onClick={() => appendAlert('clicked button!')}
79
- />
80
- )
75
+ render(
76
+ <Button
77
+ data={{ testid: 'click-test' }}
78
+ onClick={() => appendAlert('clicked button!')}
79
+ />
80
+ )
81
81
 
82
- const kit = screen.getByTestId('click-test')
82
+ const kit = screen.getByTestId('click-test')
83
83
 
84
- fireEvent.click(kit)
84
+ fireEvent.click(kit)
85
85
 
86
- await waitFor(() => screen.getByText('clicked button!'))
86
+ await waitFor(() => screen.getByText('clicked button!'))
87
87
 
88
- expect(screen.getByText('clicked button!')).toBeInTheDocument()
88
+ expect(screen.getByText('clicked button!')).toBeInTheDocument()
89
89
  })
90
90
 
91
91
  test('size prop', () => {
92
- render(
93
- <Button
94
- data={{ testid: 'size-test' }}
95
- size="sm"
96
- />
97
- )
92
+ render(
93
+ <Button
94
+ data={{ testid: 'size-test' }}
95
+ size="sm"
96
+ />
97
+ )
98
98
 
99
- const kit = screen.getByTestId('size-test')
99
+ const kit = screen.getByTestId('size-test')
100
100
 
101
- expect(kit).toHaveClass('pb_button_kit_primary_inline_enabled size_sm')
101
+ expect(kit).toHaveClass('pb_button_kit_primary_inline_enabled size_sm')
102
+ })
103
+
104
+ test('should render target prop', () => {
105
+ render(
106
+ <Button
107
+ data={{ testid: 'variant-test' }}
108
+ link="https://google.com"
109
+ target="_parent"
110
+ variant="secondary"
111
+ />
112
+ )
113
+
114
+ const kit = screen.getByTestId('variant-test')
115
+ expect(kit).toHaveAttribute('target', '_parent')
116
+ expect(kit).toHaveAttribute('rel', 'noreferrer')
117
+ })
118
+
119
+ test('should render child target prop', () => {
120
+ render(
121
+ <Button
122
+ data={{ testid: 'variant-test' }}
123
+ link="https://google.com"
124
+ newWindow
125
+ target="child"
126
+ variant="secondary"
127
+ />
128
+ )
129
+
130
+ const kit = screen.getByTestId('variant-test')
131
+ expect(kit).toHaveAttribute('target', 'child')
132
+ expect(kit).not.toHaveAttribute('rel')
102
133
  })
@@ -1,3 +1,4 @@
1
1
  <%= pb_rails("button", props: { text: "A Tag Button", aria: { label: "Link to Google" }, tag: "a", link: "http://google.com", margin_right: "lg" }) %>
2
- <%= pb_rails("button", props: { text: "Open in new Window", aria: { label: "Link to Google in new window" }, new_window: true, link: "http://google.com",margin_right: "lg" }) %>
3
- <%= pb_rails("button", props: { text: "A Tag Button Disabled", aria: { label: "Disabled link to Google" }, disabled: true, link: "http://google.com",margin_right: "lg" }) %>
2
+ <%= pb_rails("button", props: { text: "Open in new Window", aria: { label: "Link to Google in new window" }, new_window: true, link: "http://google.com", margin_right: "lg" }) %>
3
+ <%= pb_rails("button", props: { text: "Open in a Child Tab", aria: { label: "Link to Playbook in new window" }, link: "https://playbook.powerapp.cloud/", margin_right: "lg", target: "child"}) %>
4
+ <%= pb_rails("button", props: { text: "A Tag Button Disabled", aria: { label: "Disabled link to Google" }, disabled: true, link: "http://google.com", margin_right: "lg" }) %>
@@ -2,7 +2,7 @@ import React from 'react'
2
2
  import { Button } from '../../'
3
3
 
4
4
  const ButtonLink = (props) => (
5
- <div>
5
+ <>
6
6
  <Button
7
7
  aria={{ label: 'Link to Google' }}
8
8
  link="https://google.com"
@@ -22,6 +22,16 @@ const ButtonLink = (props) => (
22
22
  {...props}
23
23
  />
24
24
  {' '}
25
+ <Button
26
+ aria={{ label: 'Link to Playbook in new window' }}
27
+ link="https://playbook.powerapp.cloud/"
28
+ marginRight='lg'
29
+ tabIndex={0}
30
+ target='child'
31
+ text="Open in a Child Tab"
32
+ {...props}
33
+ />
34
+ {' '}
25
35
  <Button
26
36
  aria={{ label: 'Disabled link to Google' }}
27
37
  disabled
@@ -31,7 +41,7 @@ const ButtonLink = (props) => (
31
41
  text="A Tag Button Disabled"
32
42
  {...props}
33
43
  />
34
- </div>
44
+ </>
35
45
  )
36
46
 
37
47
  export default ButtonLink
@@ -0,0 +1 @@
1
+ The `link` prop accepts a string that is used as an href value and causes the button to act as a link. The default behavior of a link is to open in the current window. You can optionally alter the link behavior by adding the `newWindow` prop (boolean), which will open the link in a new window, or by calling the `target` prop, which accepts `_self`, `_blank`, `_parent`, `_top`, `child`, or any string, allowing you to specify any link target.
@@ -32,6 +32,7 @@ type CircleChartProps = {
32
32
  startAngle?: number;
33
33
  style?: string;
34
34
  title?: string;
35
+ tooltipHtml: string;
35
36
  useHtml?: boolean;
36
37
  zMin?: number;
37
38
  layout?: "horizontal" | "vertical" | "proximate";
@@ -78,6 +79,7 @@ const CircleChart = ({
78
79
  startAngle = null,
79
80
  style = "pie",
80
81
  title,
82
+ tooltipHtml,
81
83
  useHtml = false,
82
84
  zMin = null,
83
85
  layout = "horizontal",
@@ -100,9 +102,7 @@ const CircleChart = ({
100
102
  Highcharts.setOptions({
101
103
  tooltip: {
102
104
  headerFormat: null,
103
- pointFormat:
104
- '<span style="font-weight: bold; color:{point.color};">●</span>{point.name}: ' +
105
- "<b>{point.y}</b>",
105
+ pointFormat: tooltipHtml ? tooltipHtml : '<span style="font-weight: bold; color:{point.color};">●</span>{point.name}: ' + "<b>{point.y}</b>",
106
106
  useHTML: useHtml,
107
107
  },
108
108
  });
@@ -24,6 +24,9 @@ module Playbook
24
24
  prop :use_html, type: Playbook::Props::Boolean, default: false
25
25
  prop :legend, type: Playbook::Props::Boolean, default: false
26
26
  prop :title, default: ""
27
+ prop :tooltip_html, default: '<span style="font-weight: bold; color:{point.color};">&#9679; </span>
28
+ {point.name}: ' + '<b>{point.y}
29
+ </b>'
27
30
  prop :height
28
31
  prop :rounded, type: Playbook::Props::Boolean, default: false
29
32
  prop :colors, type: Playbook::Props::Array,
@@ -0,0 +1,20 @@
1
+ <% data = [{
2
+ name: 'Waiting for Calls',
3
+ value: 41,
4
+ },
5
+ {
6
+ name: 'On Call',
7
+ value: 49,
8
+ },
9
+ {
10
+ name: 'After call',
11
+ value: 10,
12
+ }
13
+ ] %>
14
+
15
+
16
+ <%= pb_rails("circle_chart", props: {
17
+ chart_data: data,
18
+ tooltip_html: "<p>Custom tooltip for {point.name} <br/>with value: {point.y}</p>",
19
+ id: "default-test"
20
+ }) %>
@@ -0,0 +1,31 @@
1
+ import React from 'react'
2
+
3
+ import CircleChart from '../_circle_chart'
4
+
5
+ const data = [
6
+ {
7
+ name: 'Waiting for Calls',
8
+ value: 41,
9
+ },
10
+ {
11
+ name: 'On Call',
12
+ value: 49,
13
+ },
14
+ {
15
+ name: 'After call',
16
+ value: 10,
17
+ },
18
+ ]
19
+
20
+ const CircleChartCustomTooltip = (props) => (
21
+ <div>
22
+ <CircleChart
23
+ chartData={data}
24
+ id="circle-chart-default"
25
+ tooltipHtml= '<p>Custom tooltip for {point.name} <br/>with value: {point.y}</p>'
26
+ {...props}
27
+ />
28
+ </div>
29
+ )
30
+
31
+ export default CircleChartCustomTooltip
@@ -0,0 +1,3 @@
1
+ A custom tooltip format can be specified. The desired format can be passed as a `string` of custom HTML to the `tooltipHtml` prop.
2
+
3
+ `{point.name}` and `{point.y}` are useful values that can be referenced for each point in the graph.
@@ -9,7 +9,8 @@ examples:
9
9
  - circle_chart_with_legend_kit: Legend
10
10
  - circle_chart_legend_position: Legend Position
11
11
  - circle_chart_with_title: Title
12
- - circle_chart_inner_sizes: Inner Circle Size Options
12
+ - circle_chart_inner_sizes: Inner Circle Size Options
13
+ - circle_chart_custom_tooltip: Tooltip Customization
13
14
 
14
15
  react:
15
16
  - circle_chart_default: Default Style
@@ -22,5 +23,6 @@ examples:
22
23
  - circle_chart_legend_position: Legend Position
23
24
  - circle_chart_with_title: Title
24
25
  - circle_chart_inner_sizes: Inner Circle Size Options
26
+ - circle_chart_custom_tooltip: Tooltip Customization
25
27
 
26
28
 
@@ -8,3 +8,4 @@ export { default as CircleChartWithLegendKit } from './_circle_chart_with_legend
8
8
  export { default as CircleChartLegendPosition } from './_circle_chart_legend_position.jsx'
9
9
  export { default as CircleChartWithTitle } from './_circle_chart_with_title.jsx'
10
10
  export { default as CircleChartInnerSizes } from './_circle_chart_inner_sizes.jsx'
11
+ export { default as CircleChartCustomTooltip } from "./_circle_chart_custom_tooltip.jsx"
@@ -34,7 +34,7 @@
34
34
  }
35
35
  .flatpickr-day.inRange {
36
36
  background-color: #F7FBFF;
37
- border: 2px;
37
+ border-color: transparent;
38
38
  box-shadow: -$space_xs + 4 0 0 #F7FBFF, $space_xs - 3 0 0 #F7FBFF;
39
39
  }
40
40
  /*
@@ -14,6 +14,7 @@ const iconMap = {
14
14
  };
15
15
 
16
16
  type FixedConfirmationToastProps = {
17
+ autoClose?: number;
17
18
  className?: string;
18
19
  closeable?: boolean;
19
20
  data?: string;
@@ -30,11 +31,12 @@ type FixedConfirmationToastProps = {
30
31
  const FixedConfirmationToast = (props: FixedConfirmationToastProps) => {
31
32
  const [showToast, toggleToast] = useState(true);
32
33
  const {
34
+ autoClose = 0,
33
35
  className,
34
36
  closeable = false,
35
37
  horizontal,
36
38
  multiLine = false,
37
- onClose = () => {},
39
+ onClose = () => { },
38
40
  open = true,
39
41
  status = "neutral",
40
42
  text,
@@ -49,8 +51,18 @@ const FixedConfirmationToast = (props: FixedConfirmationToastProps) => {
49
51
  );
50
52
  const icon = iconMap[status];
51
53
 
54
+ const autoCloseToast = () => {
55
+ if (autoClose && open) {
56
+ setTimeout(() => {
57
+ toggleToast(false);
58
+ onClose();
59
+ }, autoClose);
60
+ }
61
+ }
62
+
52
63
  useEffect(() => {
53
64
  toggleToast(open);
65
+ autoCloseToast();
54
66
  }, [open]);
55
67
 
56
68
  const handleClick = () => {
@@ -0,0 +1,68 @@
1
+ import React, { useState } from 'react'
2
+
3
+ import Button from '../../pb_button/_button'
4
+ import FixedConfirmationToast from '../_fixed_confirmation_toast'
5
+
6
+ const FixedConfirmationToastAutoClose = (props) => {
7
+
8
+ const [open, setOpen] = useState(false)
9
+ const [openCloseable, setOpenCloseable] = useState(false)
10
+
11
+ const handleClick = () => {
12
+ setOpen(true)
13
+ }
14
+ const handleClickCloseable = () => {
15
+ setOpenCloseable(true)
16
+ }
17
+
18
+ const handleClose = () => {
19
+ setOpen(false)
20
+ }
21
+
22
+ const handleCloseCloseable = () => {
23
+ setOpenCloseable(false)
24
+ }
25
+
26
+ return (
27
+ <>
28
+ <Button
29
+ onClick={handleClick}
30
+ text="Show Auto Close Toast"
31
+ variant="secondary"
32
+ {...props}
33
+ />
34
+ {' '}
35
+ <Button
36
+ onClick={handleClickCloseable}
37
+ text="Show Closeable Auto Close Toast"
38
+ variant="secondary"
39
+ {...props}
40
+ />
41
+
42
+ <FixedConfirmationToast
43
+ autoClose={3000}
44
+ horizontal='center'
45
+ onClose={handleClose}
46
+ open={open}
47
+ status='tip'
48
+ text='I will disappear in 3 seconds.'
49
+ vertical='top'
50
+ {...props}
51
+ />
52
+
53
+ <FixedConfirmationToast
54
+ autoClose={10000}
55
+ closeable
56
+ horizontal='center'
57
+ onClose={handleCloseCloseable}
58
+ open={openCloseable}
59
+ status='tip'
60
+ text='I will disappear in 10 seconds.'
61
+ vertical='top'
62
+ {...props}
63
+ />
64
+ </>
65
+ )
66
+ }
67
+
68
+ export default FixedConfirmationToastAutoClose
@@ -0,0 +1 @@
1
+ Auto close is used when you want the confirmation toast to close automatically after a certain time. `autoClose` property will be a delay number in ms.
@@ -11,3 +11,4 @@ examples:
11
11
  - fixed_confirmation_toast_multi_line: Multi Line
12
12
  - fixed_confirmation_toast_close: Click to Close
13
13
  - fixed_confirmation_toast_positions: Click to Show Positions
14
+ - fixed_confirmation_toast_auto_close: Click to Show Auto Close
@@ -2,3 +2,4 @@ export { default as FixedConfirmationToastDefault } from './_fixed_confirmation_
2
2
  export { default as FixedConfirmationToastMultiLine } from './_fixed_confirmation_toast_multi_line.jsx'
3
3
  export { default as FixedConfirmationToastClose } from './_fixed_confirmation_toast_close.jsx'
4
4
  export { default as FixedConfirmationToastPositions } from './_fixed_confirmation_toast_positions.jsx'
5
+ export { default as FixedConfirmationToastAutoClose } from './_fixed_confirmation_toast_auto_close.jsx'
@@ -19,6 +19,7 @@ module Playbook
19
19
  prop :vertical, type: Playbook::Props::Enum,
20
20
  values: [nil, "top", "bottom"],
21
21
  default: nil
22
+ prop :auto_close, type: Playbook::Props::Number
22
23
 
23
24
  def show_text?
24
25
  text.present?
@@ -28,6 +29,10 @@ module Playbook
28
29
  closeable.present? ? " remove_toast" : ""
29
30
  end
30
31
 
32
+ def auto_close_class
33
+ auto_close.present? ? " auto_close_#{auto_close}" : ""
34
+ end
35
+
31
36
  def position_class
32
37
  horizontal && vertical ? " positioned_toast #{vertical} #{horizontal}" : ""
33
38
  end
@@ -50,7 +55,7 @@ module Playbook
50
55
  end
51
56
 
52
57
  def classname
53
- generate_classname("pb_fixed_confirmation_toast_kit", status, multi_line_class) + close_class + position_class
58
+ generate_classname("pb_fixed_confirmation_toast_kit", status, multi_line_class) + close_class + position_class + auto_close_class
54
59
  end
55
60
  end
56
61
  end
@@ -7,6 +7,8 @@ export default class PbFixedConfirmationToast extends PbEnhancedElement {
7
7
 
8
8
  connect() {
9
9
  this.self = this.element
10
+ this.autoCloseToast(this.self)
11
+
10
12
  this.self.addEventListener('click', () => {
11
13
  this.removeToast(this.self)
12
14
  })
@@ -15,4 +17,19 @@ export default class PbFixedConfirmationToast extends PbEnhancedElement {
15
17
  removeToast(elem) {
16
18
  elem.parentNode.removeChild(elem)
17
19
  }
20
+
21
+ autoCloseToast(element) {
22
+ const classListValues = element.classList.value
23
+ const hasAutoCloseClass = classListValues.includes('auto_close')
24
+
25
+ if (hasAutoCloseClass) {
26
+ const classList = classListValues.split(' ')
27
+ const autoCloseValue = classList[classList.length - 1].split('_')[2]
28
+ const autoCloseIntValue = parseInt(autoCloseValue)
29
+
30
+ setTimeout(() => {
31
+ this.removeToast(element)
32
+ }, autoCloseIntValue)
33
+ }
34
+ }
18
35
  }