playbook_ui 12.25.0 → 12.26.0.pre.alpha.alphafix810

Sign up to get free protection for your applications and to get access to all the features.
Files changed (38) 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_avatar/docs/_avatar_swift.md +82 -1
  5. data/app/pb_kits/playbook/pb_detail/_detail.scss +44 -0
  6. data/app/pb_kits/playbook/pb_detail/_detail.tsx +55 -0
  7. data/app/pb_kits/playbook/pb_detail/_detail_mixins.scss +29 -0
  8. data/app/pb_kits/playbook/pb_detail/detail.html.erb +7 -0
  9. data/app/pb_kits/playbook/pb_detail/detail.rb +31 -0
  10. data/app/pb_kits/playbook/pb_detail/detail.test.jsx +46 -0
  11. data/app/pb_kits/playbook/pb_detail/docs/_description.md +1 -0
  12. data/app/pb_kits/playbook/pb_detail/docs/_detail_bold.html.erb +34 -0
  13. data/app/pb_kits/playbook/pb_detail/docs/_detail_bold.jsx +49 -0
  14. data/app/pb_kits/playbook/pb_detail/docs/_detail_bold.md +1 -0
  15. data/app/pb_kits/playbook/pb_detail/docs/_detail_colors.html.erb +24 -0
  16. data/app/pb_kits/playbook/pb_detail/docs/_detail_colors.jsx +38 -0
  17. data/app/pb_kits/playbook/pb_detail/docs/_detail_colors.md +6 -0
  18. data/app/pb_kits/playbook/pb_detail/docs/_detail_default.html.erb +3 -0
  19. data/app/pb_kits/playbook/pb_detail/docs/_detail_default.jsx +13 -0
  20. data/app/pb_kits/playbook/pb_detail/docs/_detail_styled.html.erb +22 -0
  21. data/app/pb_kits/playbook/pb_detail/docs/_detail_styled.jsx +32 -0
  22. data/app/pb_kits/playbook/pb_detail/docs/example.yml +11 -0
  23. data/app/pb_kits/playbook/pb_detail/docs/index.js +4 -0
  24. data/app/pb_kits/playbook/pb_docs/kit_example.html.erb +14 -13
  25. data/app/pb_kits/playbook/pb_form_pill/_form_pill.tsx +3 -2
  26. data/app/pb_kits/playbook/pb_multi_level_select/_helper_functions.tsx +212 -0
  27. data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.scss +58 -98
  28. data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx +340 -86
  29. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.md +1 -1
  30. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_return_all_selected.html.erb +1 -0
  31. data/app/pb_kits/playbook/pb_multi_level_select/multi_level_select.test.jsx +1 -1
  32. data/app/pb_kits/playbook/playbook-doc.js +2 -0
  33. data/dist/menu.yml +1 -0
  34. data/dist/playbook-rails.js +7 -7
  35. data/lib/playbook/version.rb +2 -2
  36. metadata +27 -9
  37. data/app/pb_kits/playbook/pb_multi_level_select/_multi_select_helper.tsx +0 -31
  38. data/app/pb_kits/playbook/pb_multi_level_select/helper_functions.ts +0 -87
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 2c0e138725ae04e9e300cea544d787219534b5da851b11840c536622e6a94c6c
4
- data.tar.gz: '067282a70e9f2e6277f85bb62ca4eb398a6f3e001f6acfcd36e445bbd141b322'
3
+ metadata.gz: 271bcae8bfc3bbad66487582748a9c6913456fdbb753930c4ae347592356c968
4
+ data.tar.gz: 3c1ecdc7a8ef45fb406d13e9c26336a1d4f1c690ecf188ffa629d9dcbb076559
5
5
  SHA512:
6
- metadata.gz: d034799f6965ecd6d82823ac00d5392c5427ff175b322b0a33fbed74fbebfa558207a4c6372b8aca269c3d0e14a2acf4e0edc0cfcaddf8ebc66325be62614325
7
- data.tar.gz: 0ebf023711e4150a1a610f5eee2ae3d9a5c3499c4f15222fe84a94a9e8aaf53c2501889b655840241c1f4a94111d72ed8216a821be22271049f9155b500466bf
6
+ metadata.gz: '08ae24ed193cc83d2d58b670103cd21f30198cb2cd399479795a194bc6968452a7e9e04cd8bc25aa27e029545fec02879b72b2810530b0b3d54dbb5dde32442e'
7
+ data.tar.gz: 295905c940167fae71cfc5e1842441d215db993973f141ac03ee95af119e9a187e83f713204b8a2d8da3a36d349b88be4cd6a85ee94f4ab984a1af35f7cb4542
@@ -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'
@@ -1 +1,82 @@
1
- ![image for avatar](https://images.unsplash.com/photo-1684237276530-a562fa8338b1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=580&q=80)
1
+ In the world of design, consistency is key. Whether you're designing a website, app, or product, having a consistent visual language can make all the difference. That's where design systems come in.
2
+
3
+ A design system is a collection of reusable components, guidelines, and assets that help ensure consistency across all of your design work. It's a way to standardize your design language, making it easier for your team to work together and for your users to navigate your products.
4
+
5
+ In this article, we'll explore the various elements of a design system and how they can be used to create a cohesive and effective design language.
6
+
7
+ ### Headings
8
+ Headings are an essential component of any design system. They help organize content, provide visual hierarchy, and make it easier for users to scan and find what they're looking for. A good design system will have headings of various sizes, ranging from H1 (the largest) to H6 (the smallest). Here's an example:
9
+
10
+ # H1: Main Title Headings
11
+ ## H2: Headings
12
+ ### H3: Subheadings
13
+ #### H4: Sub-Subheadings
14
+
15
+ ![image for avatar](https://images.unsplash.com/photo-1684237276530-a562fa8338b1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=580&q=80)
16
+
17
+ ### Lists
18
+ Lists are another important component of a design system. They help organize content into easily digestible chunks, making it easier for users to read and understand. There are two types of lists: ordered and unordered.
19
+
20
+ Ordered lists are numbered, and each item is listed in a specific order. For example:
21
+
22
+ 1. Headings
23
+ 2. Lists
24
+ 3. Blockquotes
25
+ 4. Links
26
+ 5. Bold
27
+ 6. Underline
28
+ 7. Code Blocks
29
+ 8. Inline Code
30
+ 9. Example Tables
31
+ 10. Horizontal Rules
32
+
33
+ Unordered lists, on the other hand, use bullet points to separate each item. For example:
34
+
35
+ * Headings
36
+ * Lists
37
+ * Blockquotes
38
+ * Links
39
+ * Bold
40
+ * Underline
41
+ * Code Blocks
42
+ * Inline Code
43
+ * Example Tables
44
+ * Horizontal Rules
45
+
46
+ ### Blockquotes
47
+ Blockquotes are used to highlight a particular section of text or quote. They’re often used to emphasize an important point or to provide context. Here’s an example:
48
+
49
+ > “Design systems are a collection of reusable components, guidelines, and assets that help ensure consistency across all of your design work.” - ChatGPT
50
+
51
+
52
+ ### Links
53
+ Links are an important part of any design system. They allow users to navigate between different pages and sections of your product. When using links in your design system, it’s important to make sure they’re consistent in color, size, and style. Here’s an example:
54
+ Click here to learn more about design systems.
55
+
56
+ ### Bold, Underline, & Italics
57
+ **Bold** and _underline_ are used to *highlight specific words* or phrases within ~~a block of~~ text. They help draw the user’s attention to important information. Here’s an example: *Design systems are* a collection of **reusable components**, **guidelines**, and **assets** that help ensure _consistency across all of your design work_.
58
+
59
+ ### Code Blocks and Inline Code
60
+ Code blocks and `inline code` are used to display and highlight code within a block of text. This is especially useful for developers who need to reference code snippets in their work.
61
+
62
+ Here’s an example:
63
+
64
+ ```js
65
+ function greet() {
66
+ console.log(“Hello, world!”);
67
+ }
68
+ ```
69
+
70
+ ### Example Tables
71
+ Example tables are used to display data in a clear and organized way. They help users compare and analyze information quickly. Here’s an example:
72
+
73
+ | Tables | Are | Cool |
74
+ |----------|:-------------:|------:|
75
+ | col 1 is | left-aligned | $1600 |
76
+ | col 2 is | centered | $12 |
77
+ | col 3 is | right-aligned | $1 |
78
+
79
+ ---
80
+
81
+ ### Horizontal Rules
82
+ Horizontal rules are used to separate sections of content visually. They help break up long blocks of text and make it easier for users
@@ -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'
@@ -1,20 +1,21 @@
1
1
  <% example_html = ERB.new(example).result %>
2
2
 
3
3
  <%= pb_rails("card", props: { classname: "pb--doc", padding: "none", dark: dark }) do %>
4
- <div class="pb--kit-example">
5
- <%= pb_rails("caption", props: { text: example_title, dark: dark }) %>
6
- <br />
7
- <%= example %>
8
- <br>
9
- </div>
10
-
11
- <% if (action_name == "kit_show_swift") %>
12
- <div class="pb--kit-example-markdown pt_none <%= dark ? "dark" : "" %>">
4
+ <% unless (action_name == "kit_show_swift") %>
5
+ <div class="pb--kit-example">
6
+ <%= pb_rails("caption", props: { text: example_title, dark: dark }) %>
7
+ <br />
8
+ <%= example %>
9
+ <br>
10
+ </div>
11
+ <% else %>
12
+ <div class="pb--kit-example-markdown pt_none markdown <%= dark ? "dark" : "" %>">
13
+ <%= pb_rails("caption", props: { text: example_title, dark: dark, margin_top: "md" }) %>
13
14
  <%= render_markdown(description) %>
14
15
  </div>
15
16
  <% end %>
16
17
  <% if show_code %>
17
- <div class="markdown pb--kit-example-markdown <%= dark ? "dark" : "" %>">
18
+ <div class="markdown pb--kit-example-markdown markdown <%= dark ? "dark" : "" %>">
18
19
  <%= render_markdown(description) %>
19
20
  </div>
20
21
  <div id="code-wrapper">
@@ -32,10 +33,10 @@
32
33
  </div>
33
34
  <div class="pb--codeCopy" data-action="toggle" data-togglable="code_example" style="display: none" >
34
35
  <%= pb_rails("section_separator", props: { dark: dark })%>
35
- <a href="#" style="padding: 16px 0px 22px 0px;" id="copy-code-<%= example_key %>" class="pb--copy-code" onclick="copyOnClick(`<%= source %>`, `copy-code-<%= example_key %>`)">
36
- <%= pb_rails("button", props: { id: "copy-button-#{example_key}", text: "Copy Code", size: "sm", icon: "copy" }) %>
36
+ <a href="#" id="copy-code-<%= example_key %>" class="pb--copy-code" onclick="copyOnClick(`<%= source %>`, `copy-code-<%= example_key %>`)">
37
+ <%= pb_rails("button", props: { id: "copy-button-#{example_key}", text: "Copy Code", size: "sm", icon: "copy", padding_x: "xs" }) %>
37
38
  </a>
38
- <pre class="highlight"><%= raw rouge(source, highlighter) %></pre>
39
+ <pre class="highlight"><%= raw render_code(source, highlighter) %></pre>
39
40
  </div>
40
41
  <%= pb_rails("popover", props: {
41
42
  trigger_element_id: "copy-button-#{example_key}",
@@ -10,7 +10,7 @@ type FormPillProps = {
10
10
  className?: string,
11
11
  id?: string,
12
12
  text: string,
13
- name: string,
13
+ name?: string,
14
14
  onClick?: React.MouseEventHandler<HTMLSpanElement>,
15
15
  avatar?: boolean,
16
16
  avatarUrl?: string,
@@ -25,6 +25,7 @@ type FormPillProps = {
25
25
  const FormPill = (props: FormPillProps) => {
26
26
  const {
27
27
  className,
28
+ id,
28
29
  text,
29
30
  name,
30
31
  onClick = () => {},
@@ -41,7 +42,7 @@ const FormPill = (props: FormPillProps) => {
41
42
  textTransform,
42
43
  )
43
44
  return (
44
- <div className={css}>
45
+ <div className={css} id={id}>
45
46
  {name &&
46
47
  <>
47
48
  <Avatar