coveragebook_components 0.5.0 → 0.5.2

Sign up to get free protection for your applications and to get access to all the features.
Files changed (50) hide show
  1. checksums.yaml +4 -4
  2. data/app/assets/build/coco/app.css +28 -28
  3. data/app/assets/build/coco/app.js +8113 -974
  4. data/app/assets/build/coco/book.css +3 -0
  5. data/app/assets/build/coco/book.js +37 -4
  6. data/app/assets/js/base/polyfills/request-submit.js +39 -0
  7. data/app/assets/js/base/setup.js +2 -0
  8. data/app/assets/js/helpers/path.js +9 -1
  9. data/app/assets/js/helpers/screenshot.js +20 -4
  10. data/app/components/coco/app/blocks/slide_editor/slide_editor.css +8 -11
  11. data/app/components/coco/app/blocks/slide_editor/slide_editor.html.erb +155 -196
  12. data/app/components/coco/app/blocks/slide_editor/slide_editor.js +92 -70
  13. data/app/components/coco/app/blocks/slide_editor/slide_editor.rb +36 -85
  14. data/app/components/coco/app/elements/alert/alert.css +1 -1
  15. data/app/components/coco/app/elements/button/button.css +11 -11
  16. data/app/components/coco/app/elements/color_picker_button/color_picker_button.html.erb +17 -16
  17. data/app/components/coco/app/elements/color_picker_button/color_picker_button.js +0 -8
  18. data/app/components/coco/app/elements/color_picker_button/color_picker_button.rb +2 -15
  19. data/app/components/coco/app/elements/image_picker/image_picker.html.erb +4 -4
  20. data/app/components/coco/app/elements/image_picker/image_picker.js +18 -6
  21. data/app/components/coco/app/elements/image_picker/image_picker.rb +2 -11
  22. data/app/components/coco/app/elements/image_picker_button/image_picker_button.html.erb +9 -8
  23. data/app/components/coco/app/elements/image_picker_button/image_picker_button.js +10 -23
  24. data/app/components/coco/app/elements/image_picker_button/image_picker_button.rb +19 -35
  25. data/app/components/coco/app/elements/seamless_textarea/seamless_textarea.html.erb +7 -4
  26. data/app/components/coco/app/elements/seamless_textarea/seamless_textarea.js +9 -3
  27. data/app/components/coco/app/elements/seamless_textarea/seamless_textarea.rb +5 -20
  28. data/app/components/coco/base/button/button.css +3 -3
  29. data/app/components/coco/base/button/button.js +1 -3
  30. data/app/components/coco/base/image_uploader/image_uploader.html.erb +3 -2
  31. data/app/components/coco/base/image_uploader/image_uploader.rb +2 -12
  32. data/app/components/coco/book/blocks/slides/media_slide/media_slide.css +1 -1
  33. data/app/components/coco/component.rb +1 -0
  34. data/app/components/coco/concerns/has_name.rb +1 -1
  35. data/app/components/coco/concerns/translatable.rb +18 -0
  36. data/config/credentials/production.key +1 -0
  37. data/config/credentials/production.yml.enc +1 -0
  38. data/config/icons.json +886 -0
  39. data/config/locales/coco.en.yml +22 -0
  40. data/config/tailwind.app.config.cjs +21 -0
  41. data/config/tailwind.base.config.cjs +79 -0
  42. data/config/tailwind.book.config.cjs +20 -0
  43. data/config/tokens.cjs +229 -0
  44. data/config/utils.cjs +16 -0
  45. data/lib/coco.rb +1 -1
  46. metadata +13 -6
  47. data/app/assets/build/coco/app.dev.css +0 -3427
  48. data/app/assets/build/coco/app.dev.js +0 -24891
  49. data/app/assets/build/coco/book.dev.css +0 -992
  50. data/app/assets/build/coco/book.dev.js +0 -19840
@@ -0,0 +1,22 @@
1
+ en:
2
+ coco:
3
+ app:
4
+ blocks:
5
+ slide_editor:
6
+ bg_color_picker:
7
+ label: "Background colour"
8
+ bg_image_picker:
9
+ label: "Background image"
10
+ blank_state: "Drag a jpg, png or gif onto the slide area or..."
11
+ text_color_picker:
12
+ label: "Text colour"
13
+ undo_button:
14
+ tooltip: "Undo"
15
+ redo_button:
16
+ tooltip: "Redo"
17
+ save_button:
18
+ label: "Save"
19
+ saving_label: "Saving..."
20
+ test:
21
+ translatable:
22
+ greeting: "Hello"
@@ -0,0 +1,21 @@
1
+ /** @type {import('tailwindcss').Config} */
2
+
3
+ const merge = require("lodash/merge");
4
+ const defaultTheme = require("tailwindcss/defaultTheme");
5
+ const baseConfig = require("./tailwind.base.config.cjs");
6
+ const { fontSize, fontFamily, colors, screens } = require("./tokens.cjs").app;
7
+
8
+ module.exports = merge(baseConfig, {
9
+ theme: {
10
+ colors,
11
+ screens,
12
+ fontFamily: {
13
+ display: [fontFamily.displaySans, ...defaultTheme.fontFamily.sans],
14
+ body: [fontFamily.bodySans, ...defaultTheme.fontFamily.sans],
15
+ serif: [fontFamily.displaySerif, ...defaultTheme.fontFamily.serif],
16
+ },
17
+ extend: {
18
+ fontSize,
19
+ },
20
+ },
21
+ });
@@ -0,0 +1,79 @@
1
+ /** @type {import('tailwindcss').Config} */
2
+
3
+ const { cocoPath } = require("./utils.cjs");
4
+
5
+ module.exports = {
6
+ content: [
7
+ cocoPath("@components/**/*.{erb,rb,js}", true),
8
+ cocoPath("@assets/**/*.{erb,rb}", true),
9
+ cocoPath("@previews/**/*.{erb,rb}", true),
10
+ ],
11
+ safelist: [
12
+ {
13
+ pattern: /tippy-.+/,
14
+ },
15
+ ],
16
+ blocklist: ["container"],
17
+ theme: {
18
+ extend: {
19
+ containers: {
20
+ "slide-fluid": "700px",
21
+ },
22
+ aspectRatio: {
23
+ slide: "16 / 10",
24
+ },
25
+ animation: {
26
+ spin: "spin 1.5s linear infinite",
27
+ "spin-reverse": "spin 1.5s linear infinite reverse",
28
+ },
29
+ customForms: () => ({
30
+ DEFAULT: {
31
+ checkbox: {
32
+ "&:indeterminate": {
33
+ background:
34
+ "url(\"data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='8' height='2' x='4' y='7' rx='1'/%3E%3C/svg%3E\");",
35
+ borderColor: "transparent",
36
+ backgroundColor: "currentColor",
37
+ backgroundSize: "100% 100%",
38
+ backgroundPosition: "center",
39
+ backgroundRepeat: "no-repeat",
40
+ },
41
+ },
42
+ },
43
+ }),
44
+ },
45
+ },
46
+ corePlugins: {
47
+ aspectRatio: false,
48
+ },
49
+ plugins: [
50
+ require("@tailwindcss/forms"),
51
+ require("@tailwindcss/container-queries"),
52
+
53
+ ({ matchUtilities, theme }) => {
54
+ // Safari 14-compatible aspect ratio
55
+ matchUtilities(
56
+ {
57
+ aspect: (value) => ({
58
+ "@supports (aspect-ratio: 1 / 1)": {
59
+ aspectRatio: value,
60
+ },
61
+ "@supports not (aspect-ratio: 1 / 1)": {
62
+ "&::before": {
63
+ content: '""',
64
+ float: "left",
65
+ paddingTop: `calc(100% / (${value}))`,
66
+ },
67
+ "&::after": {
68
+ clear: "left",
69
+ content: '""',
70
+ display: "block",
71
+ },
72
+ },
73
+ }),
74
+ },
75
+ { values: theme("aspectRatio") }
76
+ );
77
+ },
78
+ ],
79
+ };
@@ -0,0 +1,20 @@
1
+ /** @type {import('tailwindcss').Config} */
2
+
3
+ const merge = require("lodash/merge");
4
+ const defaultTheme = require("tailwindcss/defaultTheme");
5
+ const baseConfig = require("./tailwind.base.config.cjs");
6
+ const { fontSize, fontFamily, colors, screens } = require("./tokens.cjs").book;
7
+
8
+ module.exports = merge(baseConfig, {
9
+ theme: {
10
+ colors,
11
+ screens,
12
+ fontFamily: {
13
+ display: [fontFamily.displaySans, ...defaultTheme.fontFamily.sans],
14
+ body: [fontFamily.bodySans, ...defaultTheme.fontFamily.sans],
15
+ },
16
+ extend: {
17
+ fontSize,
18
+ },
19
+ },
20
+ });
data/config/tokens.cjs ADDED
@@ -0,0 +1,229 @@
1
+ const tailwindColors = require("tailwindcss/colors");
2
+
3
+ const colors = {
4
+ transparent: "transparent",
5
+ current: "currentColor",
6
+ black: tailwindColors.black,
7
+ white: tailwindColors.white,
8
+ gray: {
9
+ 50: "#F9FAFB",
10
+ 100: "#F3F4F6",
11
+ 200: "#E5E7EB",
12
+ 300: "#D1D5DB",
13
+ 400: "#9CA3AF",
14
+ 500: "#6B7280",
15
+ 600: "#4B5563",
16
+ 700: "#374151",
17
+ 800: "#1F2937",
18
+ 900: "#111827",
19
+ transparent: {
20
+ 50: "rgba(0, 12, 39, 0.06)",
21
+ 100: "rgba(0, 12, 39, 0.1)",
22
+ 200: "rgba(0, 12, 39, 0.18)",
23
+ },
24
+ },
25
+ green: {
26
+ 50: "#E8F3F1",
27
+ 100: "#D1E7E2",
28
+ 200: "#A3CFC5",
29
+ 300: "#76B8AA",
30
+ 400: "#48A08D",
31
+ 500: "#1A8871",
32
+ 600: "#137464",
33
+ 700: "#0D6159",
34
+ 800: "#084C4E",
35
+ 900: "#013C43",
36
+ },
37
+ red: {
38
+ 50: "#FEF2F2",
39
+ 100: "#FEE2E2",
40
+ 200: "#FECACA",
41
+ 300: "#FCA5A5",
42
+ 400: "#F87171",
43
+ 500: "#EF4444",
44
+ 600: "#DC2626",
45
+ 700: "#B91C1C",
46
+ 800: "#991B1B",
47
+ 900: "#7F1D1D",
48
+ },
49
+ amber: {
50
+ 50: "#FFFBEB",
51
+ 100: "#FEF3C7",
52
+ 200: "#FDE68A",
53
+ 300: "#FCD34D",
54
+ 400: "#FBBF24",
55
+ 500: "#F59E0B",
56
+ 600: "#D97706",
57
+ 700: "#B45309",
58
+ 800: "#92400E",
59
+ 900: "#78350F",
60
+ },
61
+ blue: {
62
+ 50: "#F0F9FF",
63
+ 100: "#E0F2FE",
64
+ 200: "#BAE6FD",
65
+ 300: "#7DD3FC",
66
+ 400: "#38BDF8",
67
+ 500: "#0EA5E9",
68
+ 600: "#0284C7",
69
+ 700: "#0369A1",
70
+ 800: "#075985",
71
+ 900: "#0C4A6E",
72
+ },
73
+ teal: tailwindColors.teal,
74
+ };
75
+
76
+ const colorAliases = {
77
+ primary: {
78
+ ...colors.green,
79
+ },
80
+ positive: {
81
+ ...colors.green,
82
+ },
83
+ negative: {
84
+ ...colors.red,
85
+ },
86
+ warning: {
87
+ ...colors.amber,
88
+ },
89
+ info: {
90
+ ...colors.blue,
91
+ },
92
+ background: {
93
+ light: {
94
+ 1: colors.white,
95
+ 2: colors.gray[50],
96
+ 3: colors.gray[100],
97
+ },
98
+ dark: {
99
+ 1: colors.gray[900],
100
+ 2: colors.gray[800],
101
+ 3: colors.gray[700],
102
+ },
103
+ primary: {
104
+ DEFAULT: colors.green[500],
105
+ light: colors.green[100],
106
+ },
107
+ negative: {
108
+ DEFAULT: colors.red[600],
109
+ light: colors.red[100],
110
+ },
111
+ warning: {
112
+ DEFAULT: colors.amber[500],
113
+ light: colors.amber[50],
114
+ },
115
+ positive: {
116
+ DEFAULT: colors.green[500],
117
+ light: colors.green[100],
118
+ },
119
+ info: {
120
+ DEFAULT: colors.blue[600],
121
+ light: colors.blue[100],
122
+ },
123
+ },
124
+ content: {
125
+ dark: {
126
+ 1: colors.gray[900],
127
+ 2: colors.gray[800],
128
+ muted: colors.gray[400],
129
+ },
130
+ light: {
131
+ 1: colors.white,
132
+ 2: colors.gray[200],
133
+ muted: colors.gray[400],
134
+ },
135
+ primary: {
136
+ DEFAULT: colors.green[500],
137
+ dark: colors.green[600],
138
+ inverse: colors.green[300],
139
+ },
140
+ negative: {
141
+ DEFAULT: colors.red[600],
142
+ dark: colors.red[700],
143
+ inverse: colors.red[300],
144
+ },
145
+ warning: {
146
+ DEFAULT: colors.amber[600],
147
+ dark: colors.amber[700],
148
+ inverse: colors.amber[300],
149
+ },
150
+ positive: {
151
+ DEFAULT: colors.green[500],
152
+ dark: colors.green[600],
153
+ inverse: colors.green[300],
154
+ },
155
+ info: {
156
+ DEFAULT: colors.blue[600],
157
+ dark: colors.blue[700],
158
+ inverse: colors.blue[300],
159
+ },
160
+ },
161
+ };
162
+
163
+ const screens = {
164
+ xs: "380px",
165
+ sm: "576px",
166
+ md: "768px",
167
+ lg: "992px",
168
+ xl: "1200px",
169
+ "2xl": "1400px",
170
+ max: "1800px",
171
+ print: { raw: "print" }, // Note: PDFs are rendered at a viewport width of 1280px
172
+ };
173
+
174
+ const fontSize = {
175
+ "para-xs": ["12px", "16px"],
176
+ "para-sm": ["14px", "20px"],
177
+ "para-md": ["16px", "24px"],
178
+ "para-lg": ["18px", "27px"],
179
+
180
+ "label-xs": ["12px", "14px"],
181
+ "label-sm": ["14px", "16px"],
182
+ "label-md": ["16px", "20px"],
183
+ "label-lg": ["18px", "24px"],
184
+
185
+ "display-1": ["96px", "96px"],
186
+ "display-2": ["80px", "84px"],
187
+ "display-3": ["64px", "68px"],
188
+ "display-4": ["48px", "52px"],
189
+
190
+ "heading-1": ["48px", "50px"],
191
+ "heading-2": ["36px", "40px"],
192
+ "heading-3": ["30px", "36px"],
193
+ "heading-4": ["24px", "30px"],
194
+ "heading-5": ["20px", "25px"],
195
+ "heading-6": ["16px", "20px"],
196
+
197
+ "subheading-1": ["32px", "40px"],
198
+ "subheading-2": ["24px", "32px"],
199
+ "subheading-3": ["20px", "28px"],
200
+ "subheading-4": ["16px", "24px"],
201
+ };
202
+
203
+ module.exports = {
204
+ app: {
205
+ colors: {
206
+ ...colors,
207
+ ...colorAliases,
208
+ },
209
+ screens,
210
+ fontSize,
211
+ fontFamily: {
212
+ displaySans: "proxima-nova",
213
+ bodySans: "proxima-nova",
214
+ displaySerif: "merriweather",
215
+ },
216
+ },
217
+ book: {
218
+ colors: {
219
+ ...colors,
220
+ ...colorAliases,
221
+ },
222
+ screens,
223
+ fontSize,
224
+ fontFamily: {
225
+ displaySans: "proxima-nova",
226
+ bodySans: "proxima-nova",
227
+ },
228
+ },
229
+ };
data/config/utils.cjs ADDED
@@ -0,0 +1,16 @@
1
+ const hq = require("alias-hq");
2
+ const aliases = hq.get("webpack");
3
+
4
+ exports.cocoPath = function (aliasedPath, relative = false) {
5
+ const pathParts = aliasedPath.split("/");
6
+ const alias = pathParts.shift();
7
+ const restPath = pathParts.join("/");
8
+
9
+ if (aliases[alias]) {
10
+ const rootPath = aliases[alias].replace(/\/$/, "");
11
+ const path = restPath.length ? `${rootPath}/${restPath}` : rootPath;
12
+ return relative ? path.replace(process.cwd(), "").replace(/^\//, "") : path;
13
+ } else {
14
+ throw new Error(`'${alias}' is not a valid path alias.`);
15
+ }
16
+ };
data/lib/coco.rb CHANGED
@@ -1,3 +1,3 @@
1
1
  module Coco
2
- VERSION = "0.5.0"
2
+ VERSION = "0.5.2"
3
3
  end
metadata CHANGED
@@ -1,14 +1,14 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: coveragebook_components
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.5.0
4
+ version: 0.5.2
5
5
  platform: ruby
6
6
  authors:
7
7
  - Mark Perkins
8
8
  autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
- date: 2023-07-03 00:00:00.000000000 Z
11
+ date: 2023-07-05 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: rails
@@ -60,12 +60,8 @@ extensions: []
60
60
  extra_rdoc_files: []
61
61
  files:
62
62
  - app/assets/build/coco/app.css
63
- - app/assets/build/coco/app.dev.css
64
- - app/assets/build/coco/app.dev.js
65
63
  - app/assets/build/coco/app.js
66
64
  - app/assets/build/coco/book.css
67
- - app/assets/build/coco/book.dev.css
68
- - app/assets/build/coco/book.dev.js
69
65
  - app/assets/build/coco/book.js
70
66
  - app/assets/build/coco/icons/accessibility.svg
71
67
  - app/assets/build/coco/icons/activity.svg
@@ -984,6 +980,7 @@ files:
984
980
  - app/assets/js/base/mixins/size-observer.js
985
981
  - app/assets/js/base/mixins/tooltip.js
986
982
  - app/assets/js/base/mixins/undo.js
983
+ - app/assets/js/base/polyfills/request-submit.js
987
984
  - app/assets/js/base/setup.js
988
985
  - app/assets/js/book.js
989
986
  - app/assets/js/book/components.js
@@ -1168,6 +1165,7 @@ files:
1168
1165
  - app/components/coco/concerns/acts_as_notification.rb
1169
1166
  - app/components/coco/concerns/extendable.rb
1170
1167
  - app/components/coco/concerns/has_name.rb
1168
+ - app/components/coco/concerns/translatable.rb
1171
1169
  - app/components/coco/concerns/with_dropdown.rb
1172
1170
  - app/components/coco/concerns/with_dropdown_options.rb
1173
1171
  - app/components/coco/concerns/with_icon.rb
@@ -1185,6 +1183,15 @@ files:
1185
1183
  - app/helpers/coco/integration_helper.rb
1186
1184
  - app/helpers/coco/tag_helper.rb
1187
1185
  - app/helpers/coco/url_helper.rb
1186
+ - config/credentials/production.key
1187
+ - config/credentials/production.yml.enc
1188
+ - config/icons.json
1189
+ - config/locales/coco.en.yml
1190
+ - config/tailwind.app.config.cjs
1191
+ - config/tailwind.base.config.cjs
1192
+ - config/tailwind.book.config.cjs
1193
+ - config/tokens.cjs
1194
+ - config/utils.cjs
1188
1195
  - lib/coco.rb
1189
1196
  - lib/coco/action_view_helper.rb
1190
1197
  - lib/coco/app_form_builder.rb