playbook_ui 14.1.0.pre.alpha.fixaction3547 → 14.1.0.pre.alpha.pbntr373enablekitsforradio3593

Sign up to get free protection for your applications and to get access to all the features.
Files changed (93) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/_playbook.scss +2 -0
  3. data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss +3 -3
  4. data/app/pb_kits/playbook/pb_advanced_table/advanced_table.html.erb +1 -1
  5. data/app/pb_kits/playbook/pb_badge/_badge.scss +9 -0
  6. data/app/pb_kits/playbook/pb_badge/_badge.tsx +8 -3
  7. data/app/pb_kits/playbook/pb_badge/badge.rb +1 -1
  8. data/app/pb_kits/playbook/pb_badge/badge.test.js +17 -11
  9. data/app/pb_kits/playbook/pb_badge/docs/_badge_notification.html.erb +13 -0
  10. data/app/pb_kits/playbook/pb_badge/docs/_badge_notification.jsx +31 -12
  11. data/app/pb_kits/playbook/pb_button/_button.tsx +4 -1
  12. data/app/pb_kits/playbook/pb_button/button.html.erb +1 -1
  13. data/app/pb_kits/playbook/pb_button/button.rb +4 -0
  14. data/app/pb_kits/playbook/pb_date_time/dateTime.test.js +2 -2
  15. data/app/pb_kits/playbook/pb_dialog/_close_icon.tsx +5 -1
  16. data/app/pb_kits/playbook/pb_dialog/_dialog.tsx +3 -1
  17. data/app/pb_kits/playbook/pb_dialog/dialog.test.jsx +20 -1
  18. data/app/pb_kits/playbook/pb_dialog/dialog_header.html.erb +1 -1
  19. data/app/pb_kits/playbook/pb_dialog/dialog_header.rb +4 -0
  20. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_default.jsx +1 -5
  21. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_loading.jsx +46 -0
  22. data/app/pb_kits/playbook/pb_dialog/docs/example.yml +1 -0
  23. data/app/pb_kits/playbook/pb_dialog/docs/index.js +1 -0
  24. data/app/pb_kits/playbook/pb_filter/filter.rb +1 -1
  25. data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb +1 -0
  26. data/app/pb_kits/playbook/pb_form_pill/_form_pill.scss +43 -25
  27. data/app/pb_kits/playbook/pb_form_pill/_form_pill.tsx +6 -2
  28. data/app/pb_kits/playbook/pb_form_pill/docs/example.yml +2 -2
  29. data/app/pb_kits/playbook/pb_form_pill/form_pill.html.erb +4 -4
  30. data/app/pb_kits/playbook/pb_form_pill/form_pill.rb +4 -0
  31. data/app/pb_kits/playbook/pb_gantt_chart/_gantt_chart.scss +3 -0
  32. data/app/pb_kits/playbook/pb_gantt_chart/_gantt_chart.tsx +72 -0
  33. data/app/pb_kits/playbook/pb_gantt_chart/docs/_gantt_chart_default.jsx +53 -0
  34. data/app/pb_kits/playbook/pb_gantt_chart/docs/example.yml +7 -0
  35. data/app/pb_kits/playbook/pb_gantt_chart/docs/index.js +1 -0
  36. data/app/pb_kits/playbook/pb_gantt_chart/gantt_chart.test.jsx +19 -0
  37. data/app/pb_kits/playbook/pb_icon/_icon.tsx +1 -1
  38. data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx +0 -2
  39. data/app/pb_kits/playbook/pb_pagination/_pagination.scss +49 -13
  40. data/app/pb_kits/playbook/pb_pagination/_pagination.tsx +164 -0
  41. data/app/pb_kits/playbook/pb_pagination/docs/_pagination_default.jsx +19 -0
  42. data/app/pb_kits/playbook/pb_pagination/docs/_pagination_default_react.md +1 -0
  43. data/app/pb_kits/playbook/pb_pagination/docs/_pagination_page_change.jsx +62 -0
  44. data/app/pb_kits/playbook/pb_pagination/docs/_pagination_page_change_react.md +1 -0
  45. data/app/pb_kits/playbook/pb_pagination/docs/data.js +23 -0
  46. data/app/pb_kits/playbook/pb_pagination/docs/example.yml +3 -1
  47. data/app/pb_kits/playbook/pb_pagination/docs/index.js +2 -0
  48. data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.scss +0 -7
  49. data/app/pb_kits/playbook/pb_popover/_popover.tsx +10 -5
  50. data/app/pb_kits/playbook/pb_radio/_radio.scss +11 -11
  51. data/app/pb_kits/playbook/pb_radio/_radio.tsx +100 -50
  52. data/app/pb_kits/playbook/pb_radio/docs/_radio_children.jsx +51 -0
  53. data/app/pb_kits/playbook/pb_radio/docs/_radio_default.jsx +1 -1
  54. data/app/pb_kits/playbook/pb_radio/docs/example.yml +1 -0
  55. data/app/pb_kits/playbook/pb_radio/docs/index.js +1 -0
  56. data/app/pb_kits/playbook/pb_rich_text_editor/_previewer_mixin.scss +132 -0
  57. data/app/pb_kits/playbook/pb_rich_text_editor/_tiptap_styles.scss +50 -76
  58. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_preview.jsx +73 -0
  59. data/app/pb_kits/playbook/pb_rich_text_editor/docs/example.yml +1 -0
  60. data/app/pb_kits/playbook/pb_rich_text_editor/docs/index.js +2 -1
  61. data/app/pb_kits/playbook/pb_star_rating/index.js +78 -41
  62. data/app/pb_kits/playbook/pb_star_rating/star_rating.html.erb +4 -2
  63. data/app/pb_kits/playbook/pb_star_rating/star_rating.rb +17 -0
  64. data/app/pb_kits/playbook/pb_star_rating/subcomponents/_star_rating_display.tsx +0 -2
  65. data/app/pb_kits/playbook/pb_star_rating/subcomponents/_star_rating_interactive.tsx +0 -1
  66. data/app/pb_kits/playbook/pb_time/_time.tsx +12 -8
  67. data/app/pb_kits/playbook/pb_time/time.html.erb +3 -3
  68. data/app/pb_kits/playbook/pb_time/time.rb +4 -0
  69. data/app/pb_kits/playbook/tokens/_container.scss +21 -0
  70. data/app/pb_kits/playbook/utilities/_min_width.scss +45 -0
  71. data/app/pb_kits/playbook/utilities/globalPropNames.mjs +1 -0
  72. data/app/pb_kits/playbook/utilities/globalProps.ts +20 -3
  73. data/app/pb_kits/playbook/utilities/icons/allicons.tsx +59 -0
  74. data/app/pb_kits/playbook/utilities/icons/clock.svg +9 -0
  75. data/app/pb_kits/playbook/utilities/icons/spinner.svg +3 -0
  76. data/app/pb_kits/playbook/utilities/icons/times.svg +3 -0
  77. data/dist/chunks/_typeahead-CTLaD81v.js +22 -0
  78. data/dist/chunks/_weekday_stacked-U-4S3-tB.js +45 -0
  79. data/dist/chunks/{lib-BE0Z3F7x.js → lib-DErGXNy3.js} +2 -2
  80. data/dist/chunks/{pb_form_validation-TzZQ0Flx.js → pb_form_validation-BC6kh7Hu.js} +1 -1
  81. data/dist/chunks/vendor.js +1 -1
  82. data/dist/menu.yml +4 -0
  83. data/dist/playbook-doc.js +1 -1
  84. data/dist/playbook-rails-react-bindings.js +1 -1
  85. data/dist/playbook-rails.js +1 -1
  86. data/dist/playbook.css +1 -1
  87. data/lib/playbook/classnames.rb +1 -0
  88. data/lib/playbook/spacing.rb +31 -2
  89. data/lib/playbook/version.rb +1 -1
  90. metadata +32 -9
  91. data/dist/chunks/_typeahead-D-4y9pbv.js +0 -22
  92. data/dist/chunks/_weekday_stacked-D5SswkOC.js +0 -45
  93. /data/app/pb_kits/playbook/pb_pagination/docs/{_pagination_default.md → _pagination_default_rails.md} +0 -0
@@ -3,4 +3,6 @@ examples:
3
3
  rails:
4
4
  - pagination_default: Default
5
5
 
6
-
6
+ react:
7
+ - pagination_default: Default
8
+ - pagination_page_change: Page Change
@@ -0,0 +1,2 @@
1
+ export { default as PaginationDefault } from './_pagination_default.jsx'
2
+ export { default as PaginationPageChange } from './_pagination_page_change.jsx'
@@ -60,7 +60,6 @@ $flag-min-resolution: 192dpi;
60
60
  }
61
61
 
62
62
  .iti__flag {
63
- background-image: url("https://intl-tel-input.com/intl-tel-input/img/flags.png");
64
63
  border-radius: 1px;
65
64
  }
66
65
 
@@ -197,10 +196,4 @@ $flag-min-resolution: 192dpi;
197
196
  }
198
197
  }
199
198
  }
200
-
201
- @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: $flag-min-resolution) {
202
- .iti__flag {
203
- background-image: url("https://intl-tel-input.com/intl-tel-input/img/flags.png");
204
- }
205
- }
206
199
  }
@@ -21,6 +21,8 @@ import classnames from "classnames";
21
21
  import { globalProps, GlobalProps } from "../utilities/globalProps";
22
22
  import { uniqueId } from 'lodash';
23
23
 
24
+ type ModifiedGlobalProps = Omit<GlobalProps, 'minWidth'>
25
+
24
26
  type PbPopoverProps = {
25
27
  aria?: { [key: string]: string };
26
28
  className?: string;
@@ -32,7 +34,7 @@ type PbPopoverProps = {
32
34
  reference: PopperReference & any;
33
35
  show?: boolean;
34
36
  shouldClosePopover?: (arg0: boolean) => void;
35
- } & GlobalProps & Omit<PopperProps<any>, 'children'>
37
+ } & ModifiedGlobalProps & Omit<PopperProps<any>, 'children'>
36
38
  & { children?: React.ReactChild[] | React.ReactChild }
37
39
 
38
40
  // Prop enabled default modifiers here
@@ -80,10 +82,13 @@ const Popover = (props: PbPopoverProps) => {
80
82
  targetId,
81
83
  } = props;
82
84
 
85
+ const items = globalProps(props).split(' ')
86
+ const filteredItems = items.filter(item => !item.includes('min_width'))
87
+ const filteredGlobalProps = filteredItems.join(' ')
83
88
  const popoverSpacing =
84
- globalProps(props).includes("dark") || !globalProps(props)
89
+ filteredGlobalProps.includes("dark") || !filteredGlobalProps
85
90
  ? "p_sm"
86
- : globalProps(props);
91
+ : filteredGlobalProps
87
92
  const overflowHandling = maxHeight || maxWidth ? "overflow_handling" : "";
88
93
  const zIndexStyle = zIndex ? { zIndex: zIndex } : {};
89
94
  const widthHeightStyles = () => {
@@ -100,7 +105,7 @@ const Popover = (props: PbPopoverProps) => {
100
105
  const htmlProps = buildHtmlProps(htmlOptions);
101
106
  const classes = classnames(
102
107
  buildCss("pb_popover_kit"),
103
- globalProps(props),
108
+ filteredGlobalProps,
104
109
  className
105
110
  );
106
111
 
@@ -250,4 +255,4 @@ const PbReactPopover = (props: PbPopoverProps): React.ReactElement => {
250
255
  );
251
256
  };
252
257
 
253
- export default PbReactPopover;
258
+ export default PbReactPopover;
@@ -8,17 +8,17 @@
8
8
  display: inline-flex;
9
9
  cursor: pointer;
10
10
 
11
- .pb_radio_button {
12
- width: 22px;
13
- min-width: 22px;
14
- height: 22px;
15
- box-sizing: border-box;
16
- border-radius: 1000px;
17
- border: 2px solid $border_light;
18
- margin-right: $space_xs;
19
- transition: background $transition_default ease, box-shadow $transition_default ease, border-color $transition_default ease;
20
- }
21
-
11
+ .pb_radio_button{
12
+ width: 22px;
13
+ min-width: 22px;
14
+ height: 22px;
15
+ box-sizing: border-box;
16
+ border-radius: 1000px;
17
+ border: 2px solid $border_light;
18
+ margin-right: $space_xs;
19
+ transition: background $transition_default ease, box-shadow $transition_default ease, border-color $transition_default ease;
20
+ }
21
+
22
22
  @media (hover:hover) {
23
23
  &:hover .pb_radio_button {
24
24
  background-color: $bg_light;
@@ -1,28 +1,27 @@
1
- /*eslint-disable react/no-multi-comp, flowtype/space-before-type-colon */
2
-
3
- import React, { forwardRef } from 'react'
1
+ import React, { forwardRef, isValidElement, useRef } from 'react'
4
2
  import Body from '../pb_body/_body'
3
+ import Flex from '../pb_flex/_flex'
5
4
  import classnames from 'classnames'
6
5
  import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
7
6
  import { globalProps, GlobalProps } from '../utilities/globalProps'
8
7
 
9
8
  type RadioProps = {
10
- aria?: {[key: string]: string},
9
+ aria?: { [key: string]: string },
11
10
  alignment?: string,
12
11
  checked?: boolean,
13
12
  children?: React.ReactChild[] | React.ReactChild,
14
13
  className?: string,
15
14
  dark?: boolean,
16
- data?: {[key: string]: string},
15
+ data?: { [key: string]: string },
17
16
  disabled?: boolean,
18
17
  error?: boolean,
19
- htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
18
+ htmlOptions?: { [key: string]: string | number | boolean | (() => void) },
20
19
  id?: string,
21
20
  label: string,
22
21
  name?: string,
23
22
  value?: string,
24
23
  text?: string,
25
- onChange: (event: React.FormEvent<HTMLInputElement> | null)=>void,
24
+ onChange: (event: React.FormEvent<HTMLInputElement> | null) => void,
26
25
  } & GlobalProps
27
26
 
28
27
  const Radio = ({
@@ -31,9 +30,9 @@ const Radio = ({
31
30
  children,
32
31
  className,
33
32
  dark = false,
34
- data = {},
35
33
  disabled = false,
36
34
  error = false,
35
+ data = {},
37
36
  htmlOptions = {},
38
37
  id,
39
38
  label,
@@ -42,52 +41,103 @@ const Radio = ({
42
41
  value = 'radio_text',
43
42
  onChange = () => { void 0 },
44
43
  ...props
45
- }: RadioProps, ref: any) => {
46
- const ariaProps = buildAriaProps(aria)
47
- const dataProps = buildDataProps(data)
48
- const htmlProps = buildHtmlProps(htmlOptions)
44
+ }: RadioProps ) => {
45
+ const radioRef = useRef(null);
46
+
47
+ const ariaProps = buildAriaProps(aria);
48
+ const dataProps = buildDataProps(data);
49
+ const htmlProps = buildHtmlProps(htmlOptions);
49
50
  const classes = classnames(
50
- buildCss('pb_radio_kit', alignment ),
51
- dark ? 'dark': null, error ? 'error': null,
51
+ buildCss('pb_radio_kit', alignment),
52
+ dark ? 'dark' : null,
53
+ error ? 'error' : null,
52
54
  globalProps(props),
53
- className)
55
+ className
56
+ );
57
+
58
+ const classesCustom = classnames(
59
+ dark ? 'dark' : null,
60
+ error ? 'error' : null,
61
+ globalProps(props),
62
+ className
63
+ );
64
+
65
+ const isCustomChild = children && isValidElement(children) && children.type !== 'input';
54
66
 
55
67
  const displayRadio = (props: RadioProps & any) => {
56
- if (children)
57
- return (children)
58
- else
59
- return (
60
- <input
61
- disabled={disabled}
62
- id={id}
63
- name={name}
64
- onChange={onChange}
65
- ref={ref}
66
- text={text}
67
- type="radio"
68
- value={value}
69
- {...props}
70
- />
71
- )}
68
+ if (isValidElement(children) && children.type === 'input') {
69
+ return React.cloneElement(children, { ...props, ref: radioRef });
70
+ } else if (isCustomChild || !children) {
71
+ return (
72
+ <input
73
+ disabled={disabled}
74
+ id={id}
75
+ name={name}
76
+ onChange={onChange}
77
+ ref={radioRef}
78
+ text={text}
79
+ type="radio"
80
+ value={value}
81
+ {...props}
82
+ />
83
+ );
84
+ }
85
+ };
86
+
87
+ const handleContainerClick = (event: React.MouseEvent<HTMLDivElement, MouseEvent> | undefined) => {
88
+ if (event) {
89
+ const target = event.target as HTMLElement;
90
+ if (
91
+ target.id === 'children-wrapper' ||
92
+ target.closest('#children-wrapper')
93
+ ) {
94
+ radioRef.current?.click();
95
+ }
96
+ }
97
+ };
72
98
 
73
99
  return (
74
- <label
75
- {...ariaProps}
76
- {...dataProps}
77
- {...htmlProps}
78
- className={classes}
79
- htmlFor={id}
80
- >
81
- <>{displayRadio(props)}</>
82
- <span className="pb_radio_button" />
83
- <Body
84
- dark={dark}
85
- status={error ? 'negative' : null}
86
- text={label}
87
- variant={null}
88
- />
89
- </label>
90
- )
91
- }
100
+ isCustomChild ? (
101
+ <Flex
102
+ {...ariaProps}
103
+ {...dataProps}
104
+ {...htmlProps}
105
+ align='center'
106
+ className={classesCustom}
107
+ cursor='pointer'
108
+ htmlFor={id}
109
+ htmlOptions={{
110
+ onClick: ((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
111
+ handleContainerClick(event);
112
+ }) as unknown as () => void
113
+ }}
114
+ id="radio-container"
115
+ >
116
+ <label className={buildCss('pb_radio_kit', alignment)}>
117
+ <>{displayRadio(props)}</>
118
+ <span className="pb_radio_button" />
119
+ </label>
120
+ <div id="children-wrapper"> {children} </div>
121
+ </Flex>
122
+ ) : (
123
+ <label
124
+ {...ariaProps}
125
+ {...dataProps}
126
+ {...htmlProps}
127
+ className={classes}
128
+ htmlFor={id}
129
+ >
130
+ <>{displayRadio(props)}</>
131
+ <span className="pb_radio_button" />
132
+ <Body
133
+ dark={dark}
134
+ status={error ? 'negative' : null}
135
+ text={label}
136
+ variant={null}
137
+ />
138
+ </label>
139
+ )
140
+ );
141
+ };
92
142
 
93
- export default forwardRef(Radio)
143
+ export default forwardRef(Radio);
@@ -0,0 +1,51 @@
1
+ import React from 'react'
2
+ import Radio from '../_radio'
3
+ import Typeahead from '../../pb_typeahead/_typeahead'
4
+ import Dropdown from '../../pb_dropdown/_dropdown'
5
+ import Title from '../../pb_title/_title'
6
+
7
+ const RadioChildren = (props) => {
8
+
9
+
10
+ const options = [
11
+ { label: 'Orange', value: '#FFA500' },
12
+ { label: 'Red', value: '#FF0000' },
13
+ { label: 'Green', value: '#00FF00' },
14
+ { label: 'Blue', value: '#0000FF' },
15
+ ]
16
+
17
+ return (
18
+ <div>
19
+ <Radio
20
+ label="Power"
21
+ name="Group2"
22
+ tabIndex={0}
23
+ value="Power"
24
+ {...props}
25
+ >
26
+ <Dropdown options={options}/>
27
+ </Radio>
28
+ <br />
29
+ <Radio
30
+ defaultChecked={false}
31
+ label="Nitro"
32
+ name="Group2"
33
+ value="Nitro"
34
+ {...props}
35
+ >
36
+ <Typeahead options={options} />
37
+ </Radio>
38
+ <br />
39
+ <Radio
40
+ defaultChecked={false}
41
+ label="Google"
42
+ name="Group2"
43
+ value="Google"
44
+ {...props}
45
+ >
46
+ <Title text="Custom Typography" />
47
+ </Radio>
48
+ </div>
49
+ )
50
+ }
51
+ export default RadioChildren
@@ -34,4 +34,4 @@ const RadioDefault = (props) => {
34
34
  </div>
35
35
  )
36
36
  }
37
- export default RadioDefault
37
+ export default RadioDefault
@@ -14,6 +14,7 @@ examples:
14
14
  - radio_error: With Error
15
15
  - radio_alignment: Alignment
16
16
  - radio_disabled: Disabled
17
+ - radio_children: Children
17
18
 
18
19
  swift:
19
20
  - radio_default_swift: Default
@@ -3,3 +3,4 @@ export { default as RadioCustom } from './_radio_custom.jsx'
3
3
  export { default as RadioError } from './_radio_error.jsx'
4
4
  export { default as RadioAlignment } from './_radio_alignment.jsx'
5
5
  export { default as RadioDisabled } from './_radio_disabled.jsx'
6
+ export { default as RadioChildren } from './_radio_children.jsx'
@@ -0,0 +1,132 @@
1
+ @import "../tokens/border_radius";
2
+ @import "../tokens/colors";
3
+ @import "../tokens/spacing";
4
+ @import "../tokens/typography";
5
+
6
+ @mixin preview_first_child {
7
+ :first-child {
8
+ margin-top: 0;
9
+ }
10
+ }
11
+
12
+ @mixin preview_p {
13
+ margin: 1rem 0 0 0;
14
+ min-height: 1rem;
15
+ }
16
+
17
+ @mixin preview_code {
18
+ font-family: monospace;
19
+ background: $bg_light;
20
+ padding: 0.1rem 0.3rem;
21
+ box-shadow: 0 2px 10px $shadow;
22
+ border-radius: 0.25rem;
23
+ overflow: hidden;
24
+ }
25
+
26
+ @mixin preview_pre_codeblock {
27
+ display: inline-block;
28
+ width: 100%;
29
+ vertical-align: top;
30
+ font-family: monospace;
31
+ font-size: 0.9em;
32
+ padding: 0.5em;
33
+ overflow-x: auto;
34
+ background: $bg_dark;
35
+ padding: $space_sm;
36
+ border-radius: $border_rad_heaviest;
37
+ margin: 1.5rem 0 2rem 0;
38
+
39
+ code {
40
+ background: transparent !important;
41
+ box-shadow: none;
42
+ border: 0;
43
+ color: #faf6e4;
44
+ }
45
+ }
46
+
47
+ @mixin preview_a {
48
+ color: $primary;
49
+ border-bottom: 1px solid $primary;
50
+ &:hover {
51
+ color: $text_lt_default;
52
+ border-bottom: 1px solid $text_lt_default;
53
+ }
54
+ }
55
+
56
+ @mixin preview_blockquote {
57
+ font-size: $font_larger;
58
+ padding: $space_sm $space_md;
59
+ font-style: italic;
60
+ margin: 1rem 0 0 0;
61
+ p {
62
+ margin: 0;
63
+ }
64
+ }
65
+
66
+ @mixin preview_h1 {
67
+ font-size: $text_largest;
68
+ line-height: $text_larger;
69
+ font-weight: $bolder;
70
+ letter-spacing: $lspace_tight;
71
+ margin: 2.1rem 0 0 0;
72
+ }
73
+
74
+ @mixin preview_h2 {
75
+ font-size: $text_larger;
76
+ line-height: $text_larger;
77
+ font-weight: $bolder;
78
+ letter-spacing: $lspace_tight;
79
+ margin: 1.9rem 0 0 0;
80
+ }
81
+
82
+ @mixin preview_h3 {
83
+ font-size: $text_large;
84
+ line-height: $text_large;
85
+ font-weight: $bolder;
86
+ letter-spacing: $lspace_tight;
87
+ margin: 1.7rem 0 0 0;
88
+ }
89
+
90
+ @mixin preview_smaller_headings {
91
+ font-size: $text_base;
92
+ line-height: $text_base;
93
+ letter-spacing: $lspace_tight;
94
+ font-weight: $bolder;
95
+ margin: 1rem 0 0 0;
96
+ }
97
+
98
+ @mixin preview_hr {
99
+ margin: 2.2rem 0;
100
+ box-sizing: content-box;
101
+ overflow: hidden;
102
+ background: transparent;
103
+ border-bottom: 1px solid $transparent;
104
+ height: 1px;
105
+ padding: 0;
106
+ background-color: $border_light;
107
+ border: 0;
108
+ }
109
+
110
+ @mixin preview_ol {
111
+ margin: 1rem 0 0 0;
112
+ padding-left: $space_md;
113
+ list-style: decimal;
114
+ li {
115
+ margin: 2px 0;
116
+ p {
117
+ margin: 0;
118
+ }
119
+ }
120
+ }
121
+
122
+ @mixin preview_ul {
123
+ list-style-position: disc;
124
+ margin: 1rem 0 0 0;
125
+ padding-left: $space_md;
126
+ li {
127
+ margin: 2px 0;
128
+ p {
129
+ margin: 0;
130
+ }
131
+ }
132
+ }
@@ -6,6 +6,7 @@
6
6
  @import "../tokens/typography";
7
7
  @import "../tokens/shadows";
8
8
  @import "../tokens/transition";
9
+ @import "previewer_mixin";
9
10
 
10
11
  [class^="pb_rich_text_editor_kit"] {
11
12
  .toolbar_button {
@@ -85,109 +86,44 @@
85
86
  }
86
87
 
87
88
  code {
88
- font-family: monospace;
89
- background: $bg_light;
90
- padding: 0.1rem 0.3rem;
91
- margin: 0 5px;
92
- box-shadow: 0 2px 10px $shadow;
93
- border-radius: 0.25rem;
94
- overflow: hidden;
95
- font-size: ($text_small - 1px);
89
+ @include preview_code;
96
90
  }
97
91
 
98
92
  pre {
99
- background: $bg_dark;
100
- padding: $space_sm;
101
- border-radius: $border_rad_heaviest;
102
- margin: 1.5rem 0 2rem 0;
103
- code {
104
- background: transparent;
105
- box-shadow: none;
106
- border: 0;
107
- color: #faf6e4;
108
- }
93
+ @include preview_pre_codeblock;
109
94
  }
110
95
  a {
111
- color: $primary;
112
- border-bottom: 1px solid $primary;
113
- &:hover {
114
- color: $text_lt_default;
115
- border-bottom: 1px solid $text_lt_default;
116
- }
96
+ @include preview_a;
117
97
  }
118
98
  blockquote {
119
- font-size: $font_larger;
120
- padding: $space_sm $space_md;
121
- font-style: italic;
122
- p {
123
- margin: 0;
124
- }
99
+ @include preview_blockquote;
125
100
  }
126
101
  &:focus-visible {
127
102
  outline: unset;
128
103
  @include transition_default;
129
104
  }
130
105
  h1 {
131
- font-size: $text_largest;
132
- line-height: $text_larger;
133
- font-weight: $bolder;
134
- letter-spacing: $lspace_tight;
135
- margin: 2.1rem 0 0 0;
106
+ @include preview_h1;
136
107
  }
137
108
  h2 {
138
- font-size: $text_larger;
139
- line-height: $text_larger;
140
- font-weight: $bolder;
141
- letter-spacing: $lspace_tight;
142
- margin: 1.9rem 0 0 0;
109
+ @include preview_h2;
143
110
  }
144
111
  h3 {
145
- font-size: $text_large;
146
- line-height: $text_large;
147
- font-weight: $bolder;
148
- letter-spacing: $lspace_tight;
149
- margin: 1.7rem 0 0 0;
112
+ @include preview_h3;
150
113
  }
151
114
  h4,
152
115
  h5,
153
116
  h6 {
154
- font-size: $text_base;
155
- line-height: $text_base;
156
- letter-spacing: $lspace_tight;
157
- font-weight: $bolder;
117
+ @include preview_smaller_headings;
158
118
  }
159
119
  hr {
160
- margin: 2.2rem 0;
161
- box-sizing: content-box;
162
- overflow: hidden;
163
- background: transparent;
164
- border-bottom: 1px solid $transparent;
165
- height: 1px;
166
- padding: 0;
167
- background-color: $border_light;
168
- border: 0;
120
+ @include preview_hr;
169
121
  }
170
122
  ol {
171
- margin: 1rem 0 0 0;
172
- padding-left: $space_md;
173
- list-style: decimal;
174
- li {
175
- margin: 2px 0;
176
- p {
177
- margin: 0;
178
- }
179
- }
123
+ @include preview_ol;
180
124
  }
181
125
  ul {
182
- list-style-position: disc;
183
- margin: 1rem 0 0 0;
184
- padding-left: $space_md;
185
- li {
186
- margin: 2px 0;
187
- p {
188
- margin: 0;
189
- }
190
- }
126
+ @include preview_ul;
191
127
  }
192
128
  }
193
129
  }
@@ -233,3 +169,41 @@
233
169
  }
234
170
  }
235
171
  }
172
+ .tiptap-content {
173
+ @include preview_first_child;
174
+ a {
175
+ @include preview_a;
176
+ }
177
+ blockquote {
178
+ @include preview_blockquote;
179
+ }
180
+ h1 {
181
+ @include preview_h1;
182
+ }
183
+ h2 {
184
+ @include preview_h2;
185
+ }
186
+ h3 {
187
+ @include preview_h3;
188
+ }
189
+ h4,
190
+ h5,
191
+ h6 {
192
+ @include preview_smaller_headings;
193
+ }
194
+ hr {
195
+ @include preview_hr;
196
+ }
197
+ ol {
198
+ @include preview_ol;
199
+ }
200
+ p {
201
+ @include preview_p;
202
+ }
203
+ pre {
204
+ @include preview_pre_codeblock;
205
+ }
206
+ ul {
207
+ @include preview_ul;
208
+ }
209
+ }