playbook_ui 12.25.0.pre.alpha.railsmultilevelimprovements776 → 12.25.0.pre.alpha.railsmultilevelimprovements785

Sign up to get free protection for your applications and to get access to all the features.
Files changed (30) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/_playbook.scss +1 -0
  3. data/app/pb_kits/playbook/index.js +1 -0
  4. data/app/pb_kits/playbook/pb_detail/_detail.scss +44 -0
  5. data/app/pb_kits/playbook/pb_detail/_detail.tsx +55 -0
  6. data/app/pb_kits/playbook/pb_detail/_detail_mixins.scss +29 -0
  7. data/app/pb_kits/playbook/pb_detail/detail.html.erb +7 -0
  8. data/app/pb_kits/playbook/pb_detail/detail.rb +31 -0
  9. data/app/pb_kits/playbook/pb_detail/detail.test.jsx +46 -0
  10. data/app/pb_kits/playbook/pb_detail/docs/_description.md +1 -0
  11. data/app/pb_kits/playbook/pb_detail/docs/_detail_bold.html.erb +34 -0
  12. data/app/pb_kits/playbook/pb_detail/docs/_detail_bold.jsx +49 -0
  13. data/app/pb_kits/playbook/pb_detail/docs/_detail_bold.md +1 -0
  14. data/app/pb_kits/playbook/pb_detail/docs/_detail_colors.html.erb +24 -0
  15. data/app/pb_kits/playbook/pb_detail/docs/_detail_colors.jsx +38 -0
  16. data/app/pb_kits/playbook/pb_detail/docs/_detail_colors.md +6 -0
  17. data/app/pb_kits/playbook/pb_detail/docs/_detail_default.html.erb +3 -0
  18. data/app/pb_kits/playbook/pb_detail/docs/_detail_default.jsx +13 -0
  19. data/app/pb_kits/playbook/pb_detail/docs/_detail_styled.html.erb +22 -0
  20. data/app/pb_kits/playbook/pb_detail/docs/_detail_styled.jsx +32 -0
  21. data/app/pb_kits/playbook/pb_detail/docs/example.yml +11 -0
  22. data/app/pb_kits/playbook/pb_detail/docs/index.js +4 -0
  23. data/app/pb_kits/playbook/pb_multi_level_select/_helper_functions.tsx +2 -2
  24. data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx +13 -11
  25. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_return_all_selected.html.erb +0 -1
  26. data/app/pb_kits/playbook/playbook-doc.js +2 -0
  27. data/dist/menu.yml +1 -0
  28. data/dist/playbook-rails.js +1 -1
  29. data/lib/playbook/version.rb +1 -1
  30. metadata +20 -1
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: aaefeb2f6dee2aa2ca4a688e1cfb3d4d98892380b6392085bbc1d568d95ba06e
4
- data.tar.gz: 8aff944c3691bdbf150827da3bb977f161178a0e5175d51d3699966bb31d799a
3
+ metadata.gz: dbd58f8ab04fa69f87a55fd4848a36f53ffb67ff249bf9bd8d09b199fb7e51b8
4
+ data.tar.gz: e3bc97d4d4035db97049bfe7d64424d0887061cba7772db8091a55c884be2ba1
5
5
  SHA512:
6
- metadata.gz: e83ef28c4e79c7be64c9fe4c1d8f24ef39f7f39facb0de7c578f7774b2b347754f1e17b1b5fd59dfd5946daa4b6d73d0e782cefad19626ce9ef1a4dfe5a27f77
7
- data.tar.gz: 040f3d9438b9689d8b616e48bef5bf07d047662afcd0d5f42272b16c05a79dbb3f0f645e78191a0f8c89865923e7df436f27f2fd0013e5d52ea5dd1314140587
6
+ metadata.gz: e8cf7aeadcc735afeb4697b378ee93d56c2220f26b37c808d106dd432bd5ae5220ba251a400fb551c32ae79b5f351a550e435c320d72367b512abf907eeb3512
7
+ data.tar.gz: 2a4461c2be7dbcc118fb7bb786ba6970dca3f669bce9256fb4337db9e775ba1c4710340c284742fd3e8218424eaff772b7b99e4b7446ca33d1f45e87ede5539c
@@ -5,6 +5,7 @@
5
5
  @import 'pb_button_toolbar/button_toolbar';
6
6
  @import 'pb_caption/caption';
7
7
  @import 'pb_card/card';
8
+ @import 'pb_detail/detail';
8
9
  @import 'pb_title/title';
9
10
  @import 'pb_avatar/avatar';
10
11
  @import 'pb_avatar_action_button/avatar_action_button';
@@ -31,6 +31,7 @@ export { default as DateStacked } from './pb_date_stacked/_date_stacked'
31
31
  export { default as DateTime } from './pb_date_time/_date_time'
32
32
  export { default as DateTimeStacked } from './pb_date_time_stacked/_date_time_stacked'
33
33
  export { default as DateYearStacked } from './pb_date_year_stacked/_date_year_stacked'
34
+ export { default as Detail} from './pb_detail/_detail'
34
35
  export { default as Dialog } from './pb_dialog/_dialog'
35
36
  export { default as DistributionBar } from './pb_distribution_bar/_distribution_bar'
36
37
  export { default as FileUpload } from './pb_file_upload/_file_upload'
@@ -0,0 +1,44 @@
1
+ @import "./detail_mixins";
2
+ @import "../tokens/titles";
3
+ @import "../tokens/typography";
4
+
5
+ [class^=pb_detail_kit]{
6
+ @include pb_detail;
7
+
8
+ @each $color_name, $color_value in $pb_detail_colors {
9
+ &[class*=_#{$color_name}] {
10
+ @include pb_detail($color_value);
11
+ }
12
+ }
13
+
14
+ @each $dark_color_name, $dark_color_value in $pb_dark_detail_colors{
15
+ &[class*=_#{$dark_color_name}][class*=dark]{
16
+ @include pb_detail($dark_color_value)
17
+ }
18
+ }
19
+
20
+ // Styles
21
+ &.bold,
22
+ &.bold.dark,
23
+ b,
24
+ strong {
25
+ font-weight: $bold;
26
+ }
27
+
28
+ a {
29
+ color: $primary;
30
+ &:hover {
31
+ cursor: pointer;
32
+ color: $text_lt_default;
33
+ }
34
+ }
35
+
36
+ em {
37
+ font-weight: $bold;
38
+ }
39
+
40
+ small {
41
+ font-size: $font_smaller;
42
+ letter-spacing: $lspace_loose;
43
+ }
44
+ }
@@ -0,0 +1,55 @@
1
+ import React from 'react'
2
+ import classnames from 'classnames'
3
+ import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
4
+ import { globalProps, GlobalProps } from '../utilities/globalProps'
5
+
6
+ type DetailProps = {
7
+ aria?: { [key: string]: string },
8
+ bold?: boolean,
9
+ children?: React.ReactChild[] | React.ReactChild,
10
+ className?: string,
11
+ color?: 'light' | 'default' | 'lighter' | 'link' | 'error' | 'success',
12
+ dark?: boolean,
13
+ data?: { [key: string]: string },
14
+ id?: string,
15
+ tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'div',
16
+ text?: string,
17
+ } & GlobalProps
18
+
19
+ const Detail = (props: DetailProps) => {
20
+ const {
21
+ aria = {},
22
+ bold = false,
23
+ children,
24
+ className,
25
+ color = 'light',
26
+ data = {},
27
+ id = '',
28
+ tag = 'div',
29
+ text= ''
30
+ } = props
31
+
32
+ const ariaProps: {[key: string]: any} = buildAriaProps(aria)
33
+ const dataProps: {[key: string]: any} = buildDataProps(data)
34
+ const isBold = bold ? "bold" : null
35
+ const classes = classnames(
36
+ buildCss('pb_detail_kit', color),
37
+ isBold,
38
+ globalProps(props),
39
+ className
40
+ )
41
+ const Tag: React.ReactElement | any = `${tag}`
42
+
43
+ return (
44
+ <Tag
45
+ {...ariaProps}
46
+ {...dataProps}
47
+ className={classes}
48
+ id={id}
49
+ >
50
+ {text || children}
51
+ </Tag>
52
+ )
53
+ }
54
+
55
+ export default Detail
@@ -0,0 +1,29 @@
1
+ @import "../tokens/colors";
2
+ @import "../tokens/line_height";
3
+ @import "../tokens/typography";
4
+
5
+ $pb_detail_colors: (
6
+ light: $text_lt_light,
7
+ default: $text_lt_default,
8
+ lighter: $text_lt_lighter,
9
+ link: $primary,
10
+ error: $error,
11
+ success: $text_lt_success_sm,
12
+ );
13
+
14
+ $pb_dark_detail_colors: (
15
+ light: $text_dk_light,
16
+ default: $text_dk_default,
17
+ lighter: $text_dk_lighter,
18
+ link: $primary,
19
+ error: $error_dark,
20
+ success: $text_dk_success_sm,
21
+ );
22
+
23
+ @mixin pb_detail($color: $text_lt_light) {
24
+ line-height: $lh_tight;
25
+ color: $color;
26
+ font-size: $text_small;
27
+ font-weight: $regular;
28
+ font-family: $font-family-base;
29
+ }
@@ -0,0 +1,7 @@
1
+ <%= content_tag(object.tag,
2
+ aria: object.aria,
3
+ class: object.classname,
4
+ data: object.data,
5
+ id: object.id) do %>
6
+ <%= object.content %>
7
+ <% end %>
@@ -0,0 +1,31 @@
1
+ # frozen_string_literal: true
2
+
3
+ module Playbook
4
+ module PbDetail
5
+ class Detail < Playbook::KitBase
6
+ prop :bold, type: Playbook::Props::Boolean,
7
+ default: false
8
+ prop :color, type: Playbook::Props::Enum,
9
+ values: %w[light default lighter link error success],
10
+ default: "light"
11
+ prop :tag, type: Playbook::Props::Enum,
12
+ values: %w[h1 h2 h3 h4 h5 h6 p span div],
13
+ default: "div"
14
+ prop :text
15
+
16
+ def classname
17
+ generate_classname("pb_detail_kit", color) + is_bold
18
+ end
19
+
20
+ def content
21
+ super.presence || text
22
+ end
23
+
24
+ private
25
+
26
+ def is_bold
27
+ bold ? " bold" : ""
28
+ end
29
+ end
30
+ end
31
+ end
@@ -0,0 +1,46 @@
1
+ import React from 'react'
2
+ import { render, screen } from '../utilities/test-utils'
3
+
4
+ import Detail from './_detail'
5
+
6
+ test('returns namespaced class name', () => {
7
+ render(
8
+ <Detail
9
+ data={{ testid: 'primary-test' }}
10
+ text="Test class name"
11
+ />
12
+ )
13
+
14
+ const kit = screen.getByTestId('primary-test')
15
+ expect(kit).toHaveClass('pb_detail_kit_light')
16
+ })
17
+
18
+ test('with colors', () => {
19
+ ['light', 'default', 'lighter', 'link', 'success', 'error'].forEach((color) => {
20
+ const testId = `colors-test-${color}`
21
+
22
+ render(
23
+ <Detail
24
+ color={color}
25
+ data={{ testid: testId }}
26
+ text="Test colors"
27
+ />
28
+ )
29
+
30
+ const kit = screen.getByTestId(testId)
31
+ expect(kit).toHaveClass(`pb_detail_kit_${color}`)
32
+ })
33
+ })
34
+
35
+ test('bold font-weight should be 600', () => {
36
+ render(
37
+ <Detail
38
+ bold
39
+ data={{ testid: 'primary-test' }}
40
+ text="Test bold prop"
41
+ />
42
+ )
43
+
44
+ const kit = screen.getByTestId('primary-test')
45
+ expect(kit).toHaveClass("bold")
46
+ })
@@ -0,0 +1 @@
1
+ Used for tables or designs with large amounts of data or text.
@@ -0,0 +1,34 @@
1
+ <%= pb_rails("detail", props: {
2
+ bold: true,
3
+ text: "I am a bold detail kit"
4
+ }) %>
5
+
6
+ <%= pb_rails("detail", props: {
7
+ bold: true,
8
+ color: "default",
9
+ text: "I am a bold detail kit"
10
+ }) %>
11
+
12
+ <%= pb_rails("detail", props: {
13
+ bold: true,
14
+ color: "lighter",
15
+ text: "I am a bold detail kit"
16
+ }) %>
17
+
18
+ <%= pb_rails("detail", props: {
19
+ bold: true,
20
+ color: "link",
21
+ text: "I am a bold detail kit"
22
+ }) %>
23
+
24
+ <%= pb_rails("detail", props: {
25
+ bold: true,
26
+ color: "error",
27
+ text: "I am a bold detail kit"
28
+ }) %>
29
+
30
+ <%= pb_rails("detail", props: {
31
+ bold: true,
32
+ color: "success",
33
+ text: "I am a bold detail kit"
34
+ }) %>
@@ -0,0 +1,49 @@
1
+ import React from 'react'
2
+ import { Detail } from '../..'
3
+
4
+ const DetailBold = (props) => (
5
+ <div>
6
+ <Detail
7
+ bold
8
+ text="I am a bold detail kit"
9
+ {...props}
10
+ />
11
+
12
+ <Detail
13
+ bold
14
+ color="default"
15
+ text="I am a bold detail kit"
16
+ {...props}
17
+ />
18
+
19
+ <Detail
20
+ bold
21
+ color="lighter"
22
+ text="I am a bold detail kit"
23
+ {...props}
24
+ />
25
+
26
+ <Detail
27
+ bold
28
+ color="link"
29
+ text="I am a bold detail kit"
30
+ {...props}
31
+ />
32
+
33
+ <Detail
34
+ bold
35
+ color="error"
36
+ text="I am a bold detail kit"
37
+ {...props}
38
+ />
39
+
40
+ <Detail
41
+ bold
42
+ color="success"
43
+ text="I am a bold detail kit"
44
+ {...props}
45
+ />
46
+ </div>
47
+ )
48
+
49
+ export default DetailBold
@@ -0,0 +1 @@
1
+ Use the `bold` prop to strongly emphasis your text.
@@ -0,0 +1,24 @@
1
+ <%= pb_rails("detail", props: {
2
+ text: "I am a detail kit",
3
+ color: "default"
4
+ }) %>
5
+
6
+ <%= pb_rails("detail", props: {
7
+ text: "I am a detail kit",
8
+ color: "lighter"
9
+ }) %>
10
+
11
+ <%= pb_rails("detail", props: {
12
+ text: "I am a detail kit",
13
+ color: "link"
14
+ }) %>
15
+
16
+ <%= pb_rails("detail", props: {
17
+ text: "I am a detail kit",
18
+ color: "error"
19
+ }) %>
20
+
21
+ <%= pb_rails("detail", props: {
22
+ text: "I am a detail kit",
23
+ color: "success"
24
+ }) %>
@@ -0,0 +1,38 @@
1
+ import React from 'react'
2
+ import { Detail } from '../..'
3
+
4
+ const DetailColors = (props) => (
5
+ <div>
6
+ <Detail
7
+ color="default"
8
+ text="I am a detail kit"
9
+ {...props}
10
+ />
11
+
12
+ <Detail
13
+ color="lighter"
14
+ text="I am a detail kit"
15
+ {...props}
16
+ />
17
+
18
+ <Detail
19
+ color="link"
20
+ text="I am a detail kit"
21
+ {...props}
22
+ />
23
+
24
+ <Detail
25
+ color="error"
26
+ text="I am a detail kit"
27
+ {...props}
28
+ />
29
+
30
+ <Detail
31
+ color="success"
32
+ text="I am a detail kit"
33
+ {...props}
34
+ />
35
+ </div>
36
+ )
37
+
38
+ export default DetailColors
@@ -0,0 +1,6 @@
1
+ ##### Prop
2
+ This kit uses the `light` color by default, and can be replaced with colors below:
3
+
4
+ `default` `lighter` `link` `error` `success`
5
+
6
+ These colors are not for standard usage. You can use the `color` prop to make fixes if colors are not appearing properly, but consult your UX team members if you are deciding to implement it.
@@ -0,0 +1,3 @@
1
+ <%= pb_rails("detail", props: {
2
+ text: "I am a detail kit"
3
+ }) %>
@@ -0,0 +1,13 @@
1
+ import React from 'react'
2
+ import { Detail } from '../..'
3
+
4
+ const DetailDefault = (props) => (
5
+ <div>
6
+ <Detail
7
+ text="I am a detail kit"
8
+ {...props}
9
+ />
10
+ </div>
11
+ )
12
+
13
+ export default DetailDefault
@@ -0,0 +1,22 @@
1
+ <%= pb_rails("detail") do %>
2
+ <b>This text is using the <%="<b>"%> tag.</b>
3
+ <br />
4
+ <br />
5
+ <strong>This text is using the <%="<strong>"%> tag.</strong>
6
+ <br />
7
+ <br />
8
+ <a>This text is using the <%="<a>"%> tag.</a>
9
+ <br />
10
+ <br />
11
+ <i>This text is using the <%="<i>"%> tag.</i>
12
+ <br />
13
+ <br />
14
+ This <em>word</em> is using an <%="<em>"%> tag.
15
+ <br />
16
+ <br />
17
+ <small>This text is using the <%="<small>"%> tag.</small>
18
+ <br />
19
+ <br />
20
+ <u>This text is using the <%="<u>"%> tag.</u>
21
+ <br />
22
+ <% end %>
@@ -0,0 +1,32 @@
1
+ import React from 'react'
2
+ import { Detail } from '../..'
3
+
4
+ const DetailStyled = (props) => (
5
+ <>
6
+ <Detail {...props}>
7
+ <b>{"This text is using the <b> tag."}</b>
8
+ <br />
9
+ <br />
10
+ <strong>{"This text is using the <strong> tag."}</strong>
11
+ <br />
12
+ <br />
13
+ <a>{"This text is using the <a> tag."}</a>
14
+ <br />
15
+ <br />
16
+ <i>{"This text is using the <i> tag."}</i>
17
+ <br />
18
+ <br />
19
+ {"This "}<em>{"word"}</em>{" is using an <em> tag."}
20
+ <br />
21
+ <br />
22
+ <small>{"This text is using the <small> tag."}</small>
23
+ <br />
24
+ <br />
25
+ <u>{"This text is using the <u> tag."}</u>
26
+ <br />
27
+ <br />
28
+ </Detail>
29
+ </>
30
+ )
31
+
32
+ export default DetailStyled
@@ -0,0 +1,11 @@
1
+ examples:
2
+
3
+ rails:
4
+ - detail_default: Default
5
+ - detail_colors: Colors
6
+ - detail_bold: Bold
7
+
8
+ react:
9
+ - detail_default: Default
10
+ - detail_colors: Colors
11
+ - detail_bold: Bold
@@ -0,0 +1,4 @@
1
+ export { default as DetailDefault } from './_detail_default.jsx'
2
+ export { default as DetailColors } from './_detail_colors.jsx'
3
+ export { default as DetailStyled } from './_detail_styled.jsx'
4
+ export { default as DetailBold } from './_detail_bold.jsx'
@@ -62,7 +62,7 @@ export const filterFormattedDataById = (
62
62
  const matched: { [key: string]: any }[] = [];
63
63
  const recursiveSearch = (data: { [key: string]: any }[], term: string) => {
64
64
  for (const item of data) {
65
- if (item.id.toLowerCase().includes(term.toLowerCase())) {
65
+ if (item.id.toLowerCase() === (term.toLowerCase())) {
66
66
  matched.push(item);
67
67
  }
68
68
 
@@ -206,7 +206,7 @@ export const removeChildrenIfParentChecked = (
206
206
  ) => {
207
207
  const childIds = getChildIds(items, defaultReturn);
208
208
  const filteredDefaultArray = defaultReturn.filter(
209
- (item: { [key: string]: any }) => !childIds.includes(item.id)
209
+ (item: { [key: string]: any }) => childIds !== item.id
210
210
  );
211
211
  setDefaultReturn([...filteredDefaultArray, items]);
212
212
  };
@@ -75,6 +75,18 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
75
75
  JSON.stringify(returnAllSelected ? returnedArray : defaultReturn)
76
76
  );
77
77
  }
78
+
79
+ const updateHiddenInputValue = (value: any) => {
80
+ console.log("value", value)
81
+ const hiddenInput = document.querySelector(
82
+ "input#" + id
83
+ ) as HTMLInputElement
84
+ console.log("hiddenInput", hiddenInput)
85
+ if (hiddenInput) {
86
+ hiddenInput.value = JSON.stringify(value)
87
+ }
88
+ }
89
+
78
90
  updateHiddenInputValue(returnAllSelected ? returnedArray : defaultReturn);
79
91
  returnAllSelected
80
92
  ? onSelect(returnedArray)
@@ -86,15 +98,6 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
86
98
  );
87
99
  }, [returnedArray, defaultReturn]);
88
100
 
89
-
90
-
91
- const updateHiddenInputValue = (value: any) => {
92
- const hiddenInput = document.querySelector('input#'+id) as HTMLInputElement;
93
- if (hiddenInput) {
94
- hiddenInput.value = JSON.stringify(value);
95
- }
96
- };
97
-
98
101
  useEffect(() => {
99
102
  //Create new formattedData array for use
100
103
  setFormattedData(addCheckedAndParentProperty(treeData));
@@ -117,7 +120,6 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
117
120
  };
118
121
  }, []);
119
122
 
120
-
121
123
  //function to map over data and add parent_id + depth property to each item
122
124
  const addCheckedAndParentProperty = (
123
125
  treeData: { [key: string]: any }[],
@@ -346,7 +348,7 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
346
348
  <div ref={dropdownRef} className="wrapper">
347
349
  <div className="input_wrapper" onClick={handleInputWrapperClick}>
348
350
  <div className="input_inner_container">
349
- <input type="hidden" id={id} name={name} value="" />
351
+ <input type="hidden" id={id} name={name} value={JSON.stringify(returnAllSelected ? returnedArray : defaultReturn)} />
350
352
  {returnedArray.length !== 0 && returnAllSelected
351
353
  ? returnedArray.map((item, index) => (
352
354
  <FormPill
@@ -64,7 +64,6 @@
64
64
  ],
65
65
  }] %>
66
66
 
67
-
68
67
  <%= pb_rails("multi_level_select", props: {
69
68
  id: "parent-persistence-multi-level-select",
70
69
  tree_data:treeData,
@@ -30,6 +30,7 @@ import * as DateStacked from 'pb_date_stacked/docs'
30
30
  import * as DateTime from 'pb_date_time/docs'
31
31
  import * as DateTimeStacked from 'pb_date_time_stacked/docs'
32
32
  import * as DateYearStacked from 'pb_date_year_stacked/docs'
33
+ import * as Detail from 'pb_detail/docs'
33
34
  import * as Dialog from 'pb_dialog/docs'
34
35
  import * as DistributionBarDocs from 'pb_distribution_bar/docs'
35
36
  import * as FileUpload from 'pb_file_upload/docs'
@@ -130,6 +131,7 @@ WebpackerReact.setup({
130
131
  ...DateTime,
131
132
  ...DateTimeStacked,
132
133
  ...DateYearStacked,
134
+ ...Detail,
133
135
  ...Dialog,
134
136
  ...DistributionBarDocs,
135
137
  ...FileUpload,
data/dist/menu.yml CHANGED
@@ -90,6 +90,7 @@ kits:
90
90
  - typography:
91
91
  - body
92
92
  - caption
93
+ - detail
93
94
  - title
94
95
  - typography_patterns:
95
96
  - contact