playbook_ui 12.25.0.pre.alpha.PLAY733DetailKit761 → 12.25.0.pre.alpha.PLAY818multilevelrebuild773

Sign up to get free protection for your applications and to get access to all the features.
Files changed (35) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/_playbook.scss +0 -1
  3. data/app/pb_kits/playbook/index.js +0 -1
  4. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_swift.md +82 -1
  5. data/app/pb_kits/playbook/pb_docs/kit_example.html.erb +14 -13
  6. data/app/pb_kits/playbook/pb_form_pill/_form_pill.tsx +3 -2
  7. data/app/pb_kits/playbook/pb_multi_level_select/_helper_functions.tsx +212 -0
  8. data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.scss +58 -98
  9. data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx +340 -86
  10. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.md +1 -1
  11. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_return_all_selected.html.erb +1 -0
  12. data/app/pb_kits/playbook/pb_multi_level_select/multi_level_select.test.jsx +1 -1
  13. data/app/pb_kits/playbook/playbook-doc.js +0 -2
  14. data/dist/menu.yml +0 -1
  15. data/dist/playbook-rails.js +7 -7
  16. data/lib/playbook/version.rb +1 -1
  17. metadata +3 -20
  18. data/app/pb_kits/playbook/pb_detail/_detail.scss +0 -44
  19. data/app/pb_kits/playbook/pb_detail/_detail.tsx +0 -51
  20. data/app/pb_kits/playbook/pb_detail/_detail_mixins.scss +0 -29
  21. data/app/pb_kits/playbook/pb_detail/detail.html.erb +0 -7
  22. data/app/pb_kits/playbook/pb_detail/detail.rb +0 -23
  23. data/app/pb_kits/playbook/pb_detail/detail.test.jsx +0 -33
  24. data/app/pb_kits/playbook/pb_detail/docs/_description.md +0 -1
  25. data/app/pb_kits/playbook/pb_detail/docs/_detail_bolded.html.erb +0 -33
  26. data/app/pb_kits/playbook/pb_detail/docs/_detail_bolded.jsx +0 -47
  27. data/app/pb_kits/playbook/pb_detail/docs/_detail_default.html.erb +0 -28
  28. data/app/pb_kits/playbook/pb_detail/docs/_detail_default.jsx +0 -43
  29. data/app/pb_kits/playbook/pb_detail/docs/_detail_default.md +0 -6
  30. data/app/pb_kits/playbook/pb_detail/docs/_detail_styled.html.erb +0 -22
  31. data/app/pb_kits/playbook/pb_detail/docs/_detail_styled.jsx +0 -32
  32. data/app/pb_kits/playbook/pb_detail/docs/example.yml +0 -11
  33. data/app/pb_kits/playbook/pb_detail/docs/index.js +0 -3
  34. data/app/pb_kits/playbook/pb_multi_level_select/_multi_select_helper.tsx +0 -31
  35. data/app/pb_kits/playbook/pb_multi_level_select/helper_functions.ts +0 -87
@@ -2,5 +2,5 @@
2
2
 
3
3
  module Playbook
4
4
  PREVIOUS_VERSION = "12.25.0"
5
- VERSION = "12.25.0.pre.alpha.PLAY733DetailKit761"
5
+ VERSION = "12.25.0.pre.alpha.PLAY818multilevelrebuild773"
6
6
  end
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: playbook_ui
3
3
  version: !ruby/object:Gem::Version
4
- version: 12.25.0.pre.alpha.PLAY733DetailKit761
4
+ version: 12.25.0.pre.alpha.PLAY818multilevelrebuild773
5
5
  platform: ruby
6
6
  authors:
7
7
  - Power UX
@@ -9,7 +9,7 @@ authors:
9
9
  autorequire:
10
10
  bindir: bin
11
11
  cert_chain: []
12
- date: 2023-06-13 00:00:00.000000000 Z
12
+ date: 2023-06-14 00:00:00.000000000 Z
13
13
  dependencies:
14
14
  - !ruby/object:Gem::Dependency
15
15
  name: actionpack
@@ -823,22 +823,6 @@ files:
823
823
  - app/pb_kits/playbook/pb_date_year_stacked/docs/_footer.md
824
824
  - app/pb_kits/playbook/pb_date_year_stacked/docs/example.yml
825
825
  - app/pb_kits/playbook/pb_date_year_stacked/docs/index.js
826
- - app/pb_kits/playbook/pb_detail/_detail.scss
827
- - app/pb_kits/playbook/pb_detail/_detail.tsx
828
- - app/pb_kits/playbook/pb_detail/_detail_mixins.scss
829
- - app/pb_kits/playbook/pb_detail/detail.html.erb
830
- - app/pb_kits/playbook/pb_detail/detail.rb
831
- - app/pb_kits/playbook/pb_detail/detail.test.jsx
832
- - app/pb_kits/playbook/pb_detail/docs/_description.md
833
- - app/pb_kits/playbook/pb_detail/docs/_detail_bolded.html.erb
834
- - app/pb_kits/playbook/pb_detail/docs/_detail_bolded.jsx
835
- - app/pb_kits/playbook/pb_detail/docs/_detail_default.html.erb
836
- - app/pb_kits/playbook/pb_detail/docs/_detail_default.jsx
837
- - app/pb_kits/playbook/pb_detail/docs/_detail_default.md
838
- - app/pb_kits/playbook/pb_detail/docs/_detail_styled.html.erb
839
- - app/pb_kits/playbook/pb_detail/docs/_detail_styled.jsx
840
- - app/pb_kits/playbook/pb_detail/docs/example.yml
841
- - app/pb_kits/playbook/pb_detail/docs/index.js
842
826
  - app/pb_kits/playbook/pb_dialog/_close_icon.tsx
843
827
  - app/pb_kits/playbook/pb_dialog/_dialog.scss
844
828
  - app/pb_kits/playbook/pb_dialog/_dialog.tsx
@@ -1423,9 +1407,9 @@ files:
1423
1407
  - app/pb_kits/playbook/pb_message/message.html.erb
1424
1408
  - app/pb_kits/playbook/pb_message/message.rb
1425
1409
  - app/pb_kits/playbook/pb_message/message.test.js
1410
+ - app/pb_kits/playbook/pb_multi_level_select/_helper_functions.tsx
1426
1411
  - app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.scss
1427
1412
  - app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx
1428
- - app/pb_kits/playbook/pb_multi_level_select/_multi_select_helper.tsx
1429
1413
  - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.html.erb
1430
1414
  - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.jsx
1431
1415
  - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.md
@@ -1434,7 +1418,6 @@ files:
1434
1418
  - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_return_all_selected.md
1435
1419
  - app/pb_kits/playbook/pb_multi_level_select/docs/example.yml
1436
1420
  - app/pb_kits/playbook/pb_multi_level_select/docs/index.js
1437
- - app/pb_kits/playbook/pb_multi_level_select/helper_functions.ts
1438
1421
  - app/pb_kits/playbook/pb_multi_level_select/multi_level_select.html.erb
1439
1422
  - app/pb_kits/playbook/pb_multi_level_select/multi_level_select.rb
1440
1423
  - app/pb_kits/playbook/pb_multi_level_select/multi_level_select.test.jsx
@@ -1,44 +0,0 @@
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
- b, strong {
22
- @include pb_title_4;
23
- color: inherit;
24
- font-size: $text_small;
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
- }
@@ -1,51 +0,0 @@
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
- children?: React.ReactChild[] | React.ReactChild,
9
- className?: string,
10
- color?: 'light' | 'default' | 'lighter' | 'link' | 'error' | 'success',
11
- dark?: boolean,
12
- data?: { [key: string]: string },
13
- id?: string,
14
- tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'div',
15
- text?: string,
16
- } & GlobalProps
17
-
18
- const Detail = (props: DetailProps) => {
19
- const {
20
- aria = {},
21
- children,
22
- className,
23
- color = 'light',
24
- data = {},
25
- id = '',
26
- tag = 'div',
27
- text= ''
28
- } = props
29
-
30
- const ariaProps: {[key: string]: any} = buildAriaProps(aria)
31
- const dataProps: {[key: string]: any} = buildDataProps(data)
32
- const classes = classnames(
33
- buildCss('pb_detail_kit', color),
34
- globalProps(props),
35
- className
36
- )
37
- const Tag: React.ReactElement | any = `${tag}`
38
-
39
- return (
40
- <Tag
41
- {...ariaProps}
42
- {...dataProps}
43
- className={classes}
44
- id={id}
45
- >
46
- {text || children}
47
- </Tag>
48
- )
49
- }
50
-
51
- export default Detail
@@ -1,29 +0,0 @@
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
- }
@@ -1,7 +0,0 @@
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 %>
@@ -1,23 +0,0 @@
1
- # frozen_string_literal: true
2
-
3
- module Playbook
4
- module PbDetail
5
- class Detail < ::Playbook::KitBase
6
- prop :color, type: Playbook::Props::Enum,
7
- values: %w[light default lighter link error success],
8
- default: "light"
9
- prop :tag, type: Playbook::Props::Enum,
10
- values: %w[h1 h2 h3 h4 h5 h6 p span div],
11
- default: "div"
12
- prop :text
13
-
14
- def classname
15
- generate_classname("pb_detail_kit", color)
16
- end
17
-
18
- def content
19
- super.presence || text
20
- end
21
- end
22
- end
23
- end
@@ -1,33 +0,0 @@
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 colors"
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
- })
@@ -1 +0,0 @@
1
- Used for tables or designs with large amounts of data or text. This kit's font size is smaller than the `Body` kit and larger than the Caption's kit `subcaption` variant.
@@ -1,33 +0,0 @@
1
- <%= pb_rails("detail") do %>
2
- <b>I am a bolded detail kit (Default)</b>
3
- <% end %>
4
-
5
- <%= pb_rails("detail", props: {
6
- color: "default"
7
- }) do %>
8
- <b>I am a bolded detail kit (Default as a color)</b>
9
- <% end %>
10
-
11
- <%= pb_rails("detail", props: {
12
- color: "lighter"
13
- }) do %>
14
- <b>I am a bolded detail kit (lighter)</b>
15
- <% end %>
16
-
17
- <%= pb_rails("detail", props: {
18
- color: "link"
19
- }) do %>
20
- <b>I am a bolded detail kit (link)</b>
21
- <% end %>
22
-
23
- <%= pb_rails("detail", props: {
24
- color: "error"
25
- }) do %>
26
- <b>I am a bolded detail kit (Error)</b>
27
- <% end %>
28
-
29
- <%= pb_rails("detail", props: {
30
- color: "success"
31
- }) do %>
32
- <b>I am a bolded detail kit (Success)</b>
33
- <% end %>
@@ -1,47 +0,0 @@
1
- import React from 'react'
2
- import { Detail } from '../..'
3
-
4
- const DetailBolded = (props) => (
5
- <div>
6
- <Detail {...props}>
7
- <b>{"I am a bolded detail kit (Default)"}</b>
8
- </Detail>
9
-
10
- <Detail
11
- color="default"
12
- {...props}
13
- >
14
- <b>{"I am a bolded detail kit (Default as a color)"}</b>
15
- </Detail>
16
-
17
- <Detail
18
- color="lighter"
19
- {...props}
20
- >
21
- <b>{"I am a bolded detail kit (Lighter)"}</b>
22
- </Detail>
23
-
24
- <Detail
25
- color="link"
26
- {...props}
27
- >
28
- <b>{"I am a bolded detail kit (Link)"}</b>
29
- </Detail>
30
-
31
- <Detail
32
- color="error"
33
- {...props}
34
- >
35
- <b>{"I am a bolded detail kit (Error)"}</b>
36
- </Detail>
37
-
38
- <Detail
39
- color="success"
40
- {...props}
41
- >
42
- <b>{"I am a bolded detail kit (Success)"}</b>
43
- </Detail>
44
- </div>
45
- )
46
-
47
- export default DetailBolded
@@ -1,28 +0,0 @@
1
- <%= pb_rails("detail", props: {
2
- text: "I am a detail kit (Default)"
3
- }) %>
4
-
5
- <%= pb_rails("detail", props: {
6
- text: "I am a detail kit (Default as a color)",
7
- color: "default"
8
- }) %>
9
-
10
- <%= pb_rails("detail", props: {
11
- text: "I am a detail kit (Lighter)",
12
- color: "lighter"
13
- }) %>
14
-
15
- <%= pb_rails("detail", props: {
16
- text: "I am a detail kit (Link)",
17
- color: "link"
18
- }) %>
19
-
20
- <%= pb_rails("detail", props: {
21
- text: "I am a detail kit (Error)",
22
- color: "error"
23
- }) %>
24
-
25
- <%= pb_rails("detail", props: {
26
- text: "I am a detail kit (Success)",
27
- color: "success"
28
- }) %>
@@ -1,43 +0,0 @@
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 (Default)"
8
- {...props}
9
- />
10
-
11
- <Detail
12
- color="default"
13
- text="I am a detail kit (Default as a color)"
14
- {...props}
15
- />
16
-
17
- <Detail
18
- color="lighter"
19
- text="I am a detail kit (Lighter)"
20
- {...props}
21
- />
22
-
23
- <Detail
24
- color="link"
25
- text="I am a detail kit (Link)"
26
- {...props}
27
- />
28
-
29
- <Detail
30
- color="error"
31
- text="I am a detail kit (Error)"
32
- {...props}
33
- />
34
-
35
- <Detail
36
- color="success"
37
- text="I am a detail kit (Success)"
38
- {...props}
39
- />
40
- </div>
41
- )
42
-
43
- export default DetailDefault
@@ -1,6 +0,0 @@
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.
@@ -1,22 +0,0 @@
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 %>
@@ -1,32 +0,0 @@
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
@@ -1,11 +0,0 @@
1
- examples:
2
-
3
- rails:
4
- - detail_default: Variants
5
- - detail_styled: Styled
6
- - detail_bolded: Bolded
7
-
8
- react:
9
- - detail_default: Variants
10
- - detail_styled: Styled
11
- - detail_bolded: Bolded
@@ -1,3 +0,0 @@
1
- export { default as DetailDefault } from './_detail_default.jsx'
2
- export { default as DetailStyled } from './_detail_styled.jsx'
3
- export { default as DetailBolded } from './_detail_bolded.jsx'
@@ -1,31 +0,0 @@
1
- import React from "react"
2
- import DropdownTreeSelect from "react-dropdown-tree-select"
3
- import "react-dropdown-tree-select/dist/styles.css"
4
-
5
- type HelperProps = {
6
- id?: string
7
- treeData?: { [key: string]: string }[]
8
- treeMode?: boolean
9
- onChange?: any
10
-
11
- }
12
-
13
- const MultiSelectHelper = (props: HelperProps) => {
14
- const { id, treeData, onChange, treeMode } = props
15
-
16
-
17
- return (
18
- <DropdownTreeSelect
19
- data={treeData}
20
- id={id}
21
- keepOpenOnSelect
22
- keepTreeOnSearch
23
- keepChildrenOnSearch
24
- onChange={onChange}
25
- texts={{ placeholder: "Select..." }}
26
- mode={treeMode ? 'hierarchical' : 'multiSelect'}
27
- />
28
- )
29
- }
30
-
31
- export default MultiSelectHelper
@@ -1,87 +0,0 @@
1
- export const findItemById = (
2
- items: { [key: string]: any }[],
3
- id: string
4
- ): any => {
5
- for (const item of items) {
6
- if (item.id === id) {
7
- return item;
8
- }
9
- if (item.children) {
10
- const found = findItemById(item.children, id);
11
- if (found) {
12
- return found;
13
- }
14
- }
15
- }
16
- return null;
17
- };
18
-
19
- export const checkIt = (
20
- foundItem: { [key: string]: any },
21
- selectedItems: any[],
22
- setSelectedItems: Function,
23
- expand: boolean
24
- ) => {
25
- if (!foundItem) {
26
- return;
27
- }
28
-
29
- foundItem.checked = true;
30
- foundItem.expanded = expand;
31
- selectedItems.push(foundItem);
32
-
33
- if (foundItem.children) {
34
- foundItem.children.map((x: any) => {
35
- checkIt(x, selectedItems, setSelectedItems, expand);
36
- });
37
- }
38
-
39
- setSelectedItems([...selectedItems]);
40
- };
41
-
42
- export const unCheckIt = (
43
- foundItem: { [key: string]: any },
44
- selectedItems: any,
45
- setSelectedItems: any,
46
- expand: boolean
47
- ) => {
48
- if (!foundItem) {
49
- return;
50
- }
51
-
52
- foundItem.checked = false;
53
- foundItem.expanded = false;
54
- const newSelectedItems = selectedItems.filter(
55
- (item: any) => item.id !== foundItem.id
56
- );
57
- if (foundItem.children) {
58
- foundItem.children.map((x: any) => {
59
- unCheckIt(x, selectedItems, setSelectedItems, expand);
60
- });
61
- }
62
- setSelectedItems([...newSelectedItems]);
63
- };
64
-
65
-
66
- export const getParentAndAncestorsIds = (itemId:string, items:{ [key: string]: string; }[], ancestors:string[] = []):any => {
67
- for (let i = 0; i < items.length; i++) {
68
- const item:any = items[i];
69
- if (item.id === itemId) {
70
- // item found in current level of items array
71
- return [...ancestors, item.id];
72
- }
73
- if (item.children && item.children.length > 0) {
74
- // recursively search through children
75
- const foundAncestors = getParentAndAncestorsIds(
76
- itemId,
77
- item.children,
78
- [...ancestors, item.id]
79
- );
80
- if (foundAncestors) {
81
- return foundAncestors;
82
- }
83
- }
84
- }
85
- // item not found in this level of items array or its children
86
- return null;
87
- }