coveragebook_components 0.16.0 → 0.17.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (87) hide show
  1. checksums.yaml +4 -4
  2. data/app/assets/build/coco/coco.css +1 -3
  3. data/app/assets/build/coco/coco.js +11224 -10972
  4. data/app/assets/build/coco/tailwind.preset.js +7 -6
  5. data/app/assets/css/base/setup.css +0 -32
  6. data/app/assets/css/coco.css +33 -2
  7. data/app/assets/js/base/alpine/directives/dropdown.js +2 -2
  8. data/app/assets/js/base/tippy/plugins/hide_on_esc.js +3 -1
  9. data/app/assets/js/coco/coco.js +0 -9
  10. data/app/assets/js/coco.js +5 -0
  11. data/app/assets/js/helpers/index.js +10 -2
  12. data/app/components/coco/buttons/layout_picker_button/layout_picker_button.html.erb +5 -1
  13. data/app/components/coco/buttons/layout_picker_button/layout_picker_button.rb +2 -2
  14. data/app/components/coco/component.rb +1 -1
  15. data/app/components/coco/concerns/acts_as_field_with_options.rb +0 -1
  16. data/app/components/coco/fields/button_component.rb +1 -1
  17. data/app/components/coco/fields/submit_component.rb +1 -1
  18. data/app/helpers/coco/components_helper.rb +253 -3
  19. data/app/helpers/coco/integration_helper.rb +6 -6
  20. data/config/locales/coco.en.yml +0 -18
  21. data/config/tailwind.preset.js +7 -6
  22. data/lib/coco/engine.rb +0 -4
  23. data/lib/coco.rb +1 -1
  24. metadata +2 -65
  25. data/app/assets/build/coco/app.css +0 -9619
  26. data/app/assets/build/coco/app.js +0 -25150
  27. data/app/assets/build/coco/book.css +0 -7453
  28. data/app/assets/build/coco/book.js +0 -16552
  29. data/app/assets/css/app.css +0 -3
  30. data/app/assets/css/book.css +0 -3
  31. data/app/assets/js/app.js +0 -11
  32. data/app/assets/js/book.js +0 -9
  33. data/app/assets/js/helpers/screenshot.js +0 -42
  34. data/app/assets/js/helpers/turbo_events.js +0 -13
  35. data/app/components/coco/app/application_layout/application_layout.css +0 -122
  36. data/app/components/coco/app/application_layout/application_layout.html.erb +0 -32
  37. data/app/components/coco/app/application_layout/application_layout.js +0 -36
  38. data/app/components/coco/app/application_layout/application_layout.rb +0 -16
  39. data/app/components/coco/app/contact_callout/contact_callout.css +0 -119
  40. data/app/components/coco/app/contact_callout/contact_callout.html.erb +0 -28
  41. data/app/components/coco/app/contact_callout/contact_callout.rb +0 -21
  42. data/app/components/coco/app/faqs/faqs.css +0 -38
  43. data/app/components/coco/app/faqs/faqs.html.erb +0 -12
  44. data/app/components/coco/app/faqs/faqs.rb +0 -14
  45. data/app/components/coco/app/header/header.css +0 -47
  46. data/app/components/coco/app/header/header.html.erb +0 -30
  47. data/app/components/coco/app/header/header.js +0 -11
  48. data/app/components/coco/app/header/header.rb +0 -33
  49. data/app/components/coco/app/nav_drawer/nav_drawer.css +0 -58
  50. data/app/components/coco/app/nav_drawer/nav_drawer.html.erb +0 -16
  51. data/app/components/coco/app/nav_drawer/nav_drawer.js +0 -24
  52. data/app/components/coco/app/nav_drawer/nav_drawer.rb +0 -32
  53. data/app/components/coco/app/plan_card/plan_card.css +0 -132
  54. data/app/components/coco/app/plan_card/plan_card.html.erb +0 -36
  55. data/app/components/coco/app/plan_card/plan_card.rb +0 -66
  56. data/app/components/coco/app/plan_confirmation/plan_confirmation.css +0 -53
  57. data/app/components/coco/app/plan_confirmation/plan_confirmation.html.erb +0 -16
  58. data/app/components/coco/app/plan_confirmation/plan_confirmation.rb +0 -18
  59. data/app/components/coco/app/plan_picker/plan_picker.css +0 -128
  60. data/app/components/coco/app/plan_picker/plan_picker.html.erb +0 -69
  61. data/app/components/coco/app/plan_picker/plan_picker.js +0 -56
  62. data/app/components/coco/app/plan_picker/plan_picker.rb +0 -25
  63. data/app/components/coco/app/sidebar_nav/item/item.css +0 -121
  64. data/app/components/coco/app/sidebar_nav/item/item.html.erb +0 -9
  65. data/app/components/coco/app/sidebar_nav/item/item.js +0 -80
  66. data/app/components/coco/app/sidebar_nav/item/item.rb +0 -48
  67. data/app/components/coco/app/sidebar_nav/menu/menu.css +0 -138
  68. data/app/components/coco/app/sidebar_nav/menu/menu.html.erb +0 -24
  69. data/app/components/coco/app/sidebar_nav/menu/menu.js +0 -12
  70. data/app/components/coco/app/sidebar_nav/menu/menu.rb +0 -46
  71. data/app/components/coco/app/sidebar_nav/navbar/navbar.css +0 -75
  72. data/app/components/coco/app/sidebar_nav/navbar/navbar.html.erb +0 -29
  73. data/app/components/coco/app/sidebar_nav/navbar/navbar.js +0 -28
  74. data/app/components/coco/app/sidebar_nav/navbar/navbar.rb +0 -50
  75. data/app/components/coco/app/slide_editor/slide_editor.css +0 -149
  76. data/app/components/coco/app/slide_editor/slide_editor.html.erb +0 -302
  77. data/app/components/coco/app/slide_editor/slide_editor.js +0 -269
  78. data/app/components/coco/app/slide_editor/slide_editor.rb +0 -114
  79. data/app/components/coco/book/editable_slide/editable_slide.css +0 -332
  80. data/app/components/coco/book/editable_slide/editable_slide.html.erb +0 -48
  81. data/app/components/coco/book/editable_slide/editable_slide.rb +0 -72
  82. data/app/components/coco/book/media_slide/media_slide.css +0 -7
  83. data/app/components/coco/book/media_slide/media_slide.html.erb +0 -3
  84. data/app/components/coco/book/media_slide/media_slide.rb +0 -12
  85. data/app/helpers/coco/app_components_helper.rb +0 -39
  86. data/app/helpers/coco/book_components_helper.rb +0 -11
  87. data/app/helpers/coco/core_components_helper.rb +0 -257
@@ -1,3 +0,0 @@
1
- @import "./base/setup";
2
-
3
- @import-glob "@components/**/*.css";
@@ -1,3 +0,0 @@
1
- @import "./base/setup";
2
-
3
- @import-glob "@components/!(app)/**/*.css";
data/app/assets/js/app.js DELETED
@@ -1,11 +0,0 @@
1
- import "./base/polyfills";
2
- import Coco from "./coco/coco";
3
- import baseComponents from "./base/components";
4
- import bookComponents from "@bookComponents/**/*.js";
5
- import appComponents from "@appComponents/**/*.js";
6
-
7
- Coco.registerComponents(baseComponents);
8
- Coco.registerComponents(bookComponents);
9
- Coco.registerComponents(appComponents);
10
-
11
- export default Coco;
@@ -1,9 +0,0 @@
1
- import "./base/polyfills";
2
- import Coco from "./coco/coco";
3
- import baseComponents from "./base/components";
4
- import bookComponents from "@bookComponents/**/*.js";
5
-
6
- Coco.registerComponents(baseComponents);
7
- Coco.registerComponents(bookComponents);
8
-
9
- export default Coco;
@@ -1,42 +0,0 @@
1
- import html2canvas from "html2canvas";
2
- import { stripExtension } from "./path";
3
- import { isObject } from "./lang";
4
- import { blobToFile } from "./file";
5
-
6
- const screenshotDefaultOptions = {
7
- useCORS: true,
8
- logging: false,
9
- };
10
-
11
- function generateScreenshotFilename(name = null, ext = null) {
12
- name = [stripExtension(name || "screenshot"), new Date().getTime()].join("-");
13
- return ext ? `${name}.${ext}` : name;
14
- }
15
-
16
- // Attempts to convert a DOM element into a static image.
17
- // Returns a File object.
18
- async function captureElementScreenshot(el, filename, opts = {}) {
19
- if (isObject(filename)) {
20
- filename = null;
21
- opts = filename;
22
- }
23
-
24
- const screenshotFilename = generateScreenshotFilename(filename, "jpg");
25
- const screenshotOptions = {
26
- ...screenshotDefaultOptions,
27
- ...opts,
28
- };
29
-
30
- const canvas = await html2canvas(el, screenshotOptions);
31
- const imageBlob = await new Promise((resolve, reject) => {
32
- canvas.toBlob((result) => {
33
- return result
34
- ? resolve(result)
35
- : reject(new Error("Screenshot could not be created"));
36
- });
37
- });
38
-
39
- return blobToFile(imageBlob, screenshotFilename, "image/jpg");
40
- }
41
-
42
- export { captureElementScreenshot };
@@ -1,13 +0,0 @@
1
- function wasSuccessful(event) {
2
- return getEventDetail(event).success;
3
- }
4
-
5
- function hasFailed(event) {
6
- return !getEventDetail(event).success;
7
- }
8
-
9
- function getEventDetail(obj) {
10
- return obj instanceof CustomEvent ? obj.detail : obj;
11
- }
12
-
13
- export { wasSuccessful, hasFailed };
@@ -1,122 +0,0 @@
1
- @layer components {
2
- [data-coco][data-component="application-layout"] {
3
- @apply grid overflow-hidden absolute inset-0 w-screen;
4
- height: var(--app-height);
5
- --sidebar-nav-width: 0;
6
-
7
- grid-template-areas: "body";
8
- grid-template-rows: 1fr;
9
- grid-template-columns: 1fr;
10
-
11
- &.with-header {
12
- grid-template-areas: "header" "body";
13
- grid-template-rows: min-content 1fr;
14
-
15
- &.with-banner {
16
- grid-template-areas: "header" "body" "banner";
17
- grid-template-rows: min-content 1fr min-content;
18
-
19
- &.with-sidebar-nav {
20
- grid-template-areas: "header" "body" "banner" "sidebar";
21
- grid-template-rows: min-content 1fr min-content min-content;
22
- }
23
- }
24
-
25
- &:not(.with-banner) {
26
- &.with-sidebar-nav {
27
- grid-template-areas: "header" "body" "sidebar";
28
- grid-template-rows: min-content 1fr min-content;
29
- }
30
- }
31
- }
32
-
33
- &.with-sidebar-nav {
34
- --snackbar-bottom-offset: theme(spacing.16);
35
- }
36
-
37
- &:not(.with-header).with-banner {
38
- grid-template-areas: "body" "banner";
39
- grid-template-rows: 1fr min-content;
40
- }
41
-
42
- .layout-banner {
43
- @apply w-screen z-10;
44
- grid-area: banner;
45
- height: min-content;
46
- }
47
-
48
- .layout-header {
49
- @apply w-screen z-10;
50
- grid-area: header;
51
- height: min-content;
52
- }
53
-
54
- .layout-body {
55
- @apply relative z-0 h-full overflow-y-auto scroll-smooth bg-background-light-2;
56
- grid-area: body;
57
- }
58
-
59
- .layout-sidebar-nav {
60
- @apply scroll-smooth;
61
- scrollbar-width: none;
62
- grid-area: sidebar;
63
- height: min-content;
64
-
65
- &::-webkit-scrollbar {
66
- display: none;
67
- }
68
- }
69
-
70
- @media screen(sm) {
71
- .layout-sidebar-nav {
72
- @apply h-full overflow-auto;
73
- width: min-content;
74
-
75
- > * {
76
- @apply h-full;
77
- }
78
- }
79
-
80
- grid-template-areas: "body";
81
- grid-template-rows: 1fr;
82
-
83
- &.with-sidebar-nav {
84
- --snackbar-bottom-offset: theme(spacing.10);
85
- }
86
-
87
- &.with-header {
88
- &.with-banner {
89
- grid-template-areas: "banner" "header" "body";
90
- grid-template-rows: min-content min-content 1fr;
91
- grid-template-columns: 1fr;
92
-
93
- &.with-sidebar-nav {
94
- grid-template-areas: "banner banner" "header header" "sidebar body";
95
- grid-template-rows: min-content min-content 1fr;
96
- grid-template-columns: min-content 1fr;
97
- }
98
- }
99
-
100
- &:not(.with-banner) {
101
- &.with-sidebar-nav {
102
- grid-template-areas: "header header" "sidebar body";
103
- grid-template-rows: min-content 1fr;
104
- grid-template-columns: min-content 1fr;
105
- }
106
- }
107
- }
108
- }
109
-
110
- @media screen(sm) and screen(max-xl) {
111
- --sidebar-nav-width: theme(width.16);
112
- }
113
-
114
- @media screen(xl) {
115
- --sidebar-nav-width: theme(width.24);
116
- }
117
-
118
- @media screen(letterbox) {
119
- --sidebar-nav-width: theme(width.16);
120
- }
121
- }
122
- }
@@ -1,32 +0,0 @@
1
- <%= render component_tag(
2
- x: {
3
- data: x_data("appLayout", banner: banner? && banner_content?),
4
- ":class": "{'with-banner': banner}",
5
- "@app:navigate.window": "handleNavigation",
6
- "@resize.window": "setAppHeight"
7
- },
8
- class: {
9
- "with-sidebar-nav": sidebar_nav?,
10
- "with-banner": banner? && banner_content?,
11
- "with-header": header?
12
- }) do %>
13
- <% if banner? && banner_content? %>
14
- <div class="layout-banner" data-role="app-banner" role="banner" @banner:dismiss="hideBanner">
15
- <%= banner %>
16
- </div>
17
- <% end %>
18
- <% if header? %>
19
- <div class="layout-header" data-role="app-header">
20
- <%= header %>
21
- </div>
22
- <% end %>
23
- <% if sidebar_nav? %>
24
- <div class="layout-sidebar-nav" data-role="app-sidebar-nav">
25
- <%= sidebar_nav %>
26
- </div>
27
- <% end %>
28
- <div class="layout-body" data-role="app-body">
29
- <%= content %>
30
- </div>
31
- <%= flashes %>
32
- <% end %>
@@ -1,36 +0,0 @@
1
- import { CocoComponent } from "@assets/js/coco/component";
2
- import { navigateTo } from "@helpers/location";
3
-
4
- export default CocoComponent("appLayout", (opts) => {
5
- return {
6
- banner: false,
7
-
8
- init() {
9
- this.banner = opts.banner;
10
- this.setAppHeight();
11
- },
12
-
13
- handleNavigation(event) {
14
- const url = event.detail.url;
15
- if (url) {
16
- delete event.detail.url;
17
- navigateTo(url, event.detail);
18
- }
19
- },
20
-
21
- // Update the value of the `--app-height` css variable
22
- // when the viewport size changes. To help work around the
23
- // issues when using 100vh on mobile safari (https://medium.com/quick-code/100vh-problem-with-ios-safari-92ab23c852a8)
24
- setAppHeight() {
25
- document.documentElement.style.setProperty(
26
- "--app-height",
27
- `${window.innerHeight}px`
28
- );
29
- },
30
-
31
- hideBanner() {
32
- this.banner = false;
33
- this.$el.remove();
34
- },
35
- };
36
- });
@@ -1,16 +0,0 @@
1
- module Coco
2
- module App
3
- class ApplicationLayout < Coco::Component
4
- component_name :application_layout
5
-
6
- renders_one :flashes
7
- renders_one :banner
8
- renders_one :header
9
- renders_one :sidebar_nav
10
-
11
- def banner_content?
12
- banner.to_s.strip != ""
13
- end
14
- end
15
- end
16
- end
@@ -1,119 +0,0 @@
1
- @layer components {
2
- [data-coco][data-component="app-contact-callout"] {
3
- @apply @container bg-background-primary-light rounded-2xl;
4
-
5
- .callout-container {
6
- @apply w-full p-6 gap-x-6;
7
- }
8
-
9
- .callout-avatar {
10
- @apply flex-none self-start ml-6 float-right;
11
- width: 100px;
12
- }
13
-
14
- .callout-blurb {
15
- @apply subheading-4 space-y-2;
16
-
17
- h1,
18
- h2,
19
- h3,
20
- h4,
21
- h5,
22
- h6 {
23
- @apply branded-heading-6;
24
- }
25
- }
26
-
27
- .callout-action {
28
- @apply mt-4;
29
- }
30
-
31
- .callout-tel,
32
- .callout-number {
33
- @apply flex items-center;
34
- }
35
-
36
- .callout-tel {
37
- @apply mt-4 gap-x-4;
38
-
39
- .coco-icon {
40
- @apply hidden;
41
- }
42
- }
43
-
44
- .callout-numbers {
45
- @apply gap-x-10;
46
- }
47
-
48
- .callout-number {
49
- @apply gap-x-2 whitespace-nowrap;
50
- }
51
-
52
- @container (min-width: 600px) {
53
- .callout-container {
54
- @apply flex items-center;
55
- }
56
-
57
- .callout-numbers {
58
- @apply flex items-center;
59
- }
60
-
61
- .callout-tel {
62
- .coco-icon {
63
- @apply flex;
64
- }
65
- }
66
-
67
- .callout-avatar {
68
- @apply float-none ml-0;
69
- }
70
- }
71
-
72
- @container (min-width: 800px) {
73
- .callout-container {
74
- @apply gap-x-6;
75
- }
76
-
77
- .callout-main {
78
- @apply flex items-center gap-x-6 w-full;
79
- }
80
-
81
- .callout-action {
82
- @apply flex-none ml-auto mt-0;
83
- width: min-content;
84
- }
85
-
86
- .callout-avatar {
87
- @apply flex-none self-center;
88
- width: 120px;
89
- }
90
- }
91
-
92
- @container (min-width: 1100px) {
93
- .callout-container {
94
- @apply px-10 gap-x-10;
95
- }
96
-
97
- .callout-main {
98
- @apply gap-x-10;
99
- }
100
-
101
- .callout-avatar {
102
- width: 140px;
103
- }
104
-
105
- .callout-blurb {
106
- @apply subheading-3;
107
-
108
- h1,
109
- h2,
110
- h3,
111
- h4,
112
- h5,
113
- h6 {
114
- @apply branded-heading-5;
115
- }
116
- }
117
- }
118
- }
119
- }
@@ -1,28 +0,0 @@
1
- <%= render component_tag do %>
2
- <div class="callout-container">
3
- <div class="callout-avatar">
4
- <%= avatar %>
5
- </div>
6
- <div class="callout-main">
7
- <div class="callout-details">
8
- <div class="callout-blurb">
9
- <%= content %>
10
- </div>
11
- <div class="callout-tel">
12
- <%= coco_icon(:phone, size: :md) %>
13
- <ul class="callout-numbers">
14
- <% @contact_numbers.each do |tel| %>
15
- <li class="callout-number">
16
- <span><%= tel[:region] %>:</span>
17
- <%= helpers.coco_link_to tel[:number], "tel:#{tel[:number]}", theme: :primary %>
18
- </li>
19
- <% end %>
20
- </ul>
21
- </div>
22
- </div>
23
- <div class="callout-action">
24
- <%= action %>
25
- </div>
26
- </div>
27
- </div>
28
- <% end %>
@@ -1,21 +0,0 @@
1
- module Coco
2
- module App
3
- class ContactCallout < Coco::Component
4
- renders_one :avatar, ->(*args, **kwargs) do
5
- coco_avatar(*args, **kwargs, size: :full)
6
- end
7
-
8
- renders_one :action, ->(*args, **kwargs, &block) do
9
- coco_button(*args, theme: :primary, **kwargs, &block)
10
- end
11
-
12
- renders_many :contact_numbers, ->(region, number) do
13
- @contact_numbers << {region:, number:}
14
- end
15
-
16
- def initialize(**kwargs)
17
- @contact_numbers = []
18
- end
19
- end
20
- end
21
- end
@@ -1,38 +0,0 @@
1
- @layer components {
2
- [data-coco][data-component="app-faqs"] {
3
- @apply @container;
4
-
5
- .faqs-entries {
6
- @apply space-y-6;
7
- }
8
-
9
- .faqs-entry {
10
- break-inside: avoid;
11
- }
12
-
13
- .faqs-question {
14
- @apply branded-heading-6 mb-2;
15
- }
16
-
17
- .faqs-answer {
18
- @apply para-md space-y-4;
19
-
20
- a[href] {
21
- @apply link-primary;
22
- }
23
- }
24
-
25
- @container (min-width: 700px) {
26
- .faqs-entries {
27
- columns: 2;
28
- column-gap: 2rem;
29
- }
30
- }
31
-
32
- @container (min-width: 900px) {
33
- .faqs-entries {
34
- column-gap: 3rem;
35
- }
36
- }
37
- }
38
- }
@@ -1,12 +0,0 @@
1
- <%= render component_tag do %>
2
- <ul class="faqs-entries">
3
- <% @entries.each do |entry| %>
4
- <%= tag.li(id: ("faq-#{entry[:id]}" if entry[:id].present?), class: "faqs-entry") do %>
5
- <h4 class="faqs-question"><%= entry[:question] %></h4>
6
- <div class="faqs-answer">
7
- <%= entry[:answer] %>
8
- </div>
9
- <% end %>
10
- <% end %>
11
- </ul>
12
- <% end %>
@@ -1,14 +0,0 @@
1
- module Coco
2
- module App
3
- class Faqs < Coco::Component
4
- renders_many :entries, ->(question, id: nil, &block) do
5
- @entries << {question:, answer: block.call, id:}
6
- end
7
-
8
- def initialize(title: "Frequently asked questions", **)
9
- @title = title
10
- @entries = []
11
- end
12
- end
13
- end
14
- end
@@ -1,47 +0,0 @@
1
- @layer components {
2
- [data-coco][data-component="app-header"] {
3
- @apply @container;
4
-
5
- .header-content {
6
- @apply h-14 flex items-center bg-background-header px-app;
7
- }
8
-
9
- .header-logo {
10
- @apply flex-none mr-6;
11
- }
12
-
13
- .header-logo-no-wordmark {
14
- @apply h-7 xs:hidden translate-x-1;
15
- }
16
-
17
- .header-logo-full {
18
- @apply hidden xs:block h-7;
19
- }
20
-
21
- .header-links {
22
- @apply flex items-center w-full;
23
- }
24
-
25
- .header-link-group {
26
- @apply items-center gap-x-6;
27
- }
28
-
29
- .header-secondary {
30
- @apply ml-auto translate-x-2 sm:translate-x-[17px];
31
- }
32
-
33
- .header-mobile-controls {
34
- @apply flex lg:hidden items-center ml-auto translate-x-2 sm:translate-x-4 md:translate-x-6;
35
- }
36
-
37
- .coco-button[data-variant="highlighted"] {
38
- @apply text-amber-300;
39
- }
40
-
41
- &.with-nav-drawer {
42
- .header-link-group {
43
- @apply hidden lg:flex;
44
- }
45
- }
46
- }
47
- }
@@ -1,30 +0,0 @@
1
- <%= render component_tag(
2
- x: {data: "appHeader", "bind:class": "{'drawer-open': drawerOpen}"},
3
- class: {"with-nav-drawer": mobile_nav?}
4
- ) do %>
5
- <div class="header-content">
6
- <%= tag.send(home_path ? :a : :div, class: "header-logo", href: home_path) do %>
7
- <%= image_tag asset_url("coco/img/coveragebook-logomark-white.svg"),
8
- alt: "CoverageBook logomark",
9
- class: "header-logo-no-wordmark" %>
10
- <%= image_tag asset_url("coco/img/coveragebook-landscape-white.svg"),
11
- alt: "CoverageBook full logo",
12
- class: "header-logo-full" %>
13
- <% end %>
14
- <nav class="header-links" x-ref="links">
15
- <div class="header-link-group header-primary" x-ref="primaryLinks">
16
- <%= primary_nav %>
17
- </div>
18
- <div class="header-link-group header-secondary" x-ref="secondaryLinks">
19
- <%= secondary_nav %>
20
- </div>
21
- <% if mobile_nav? %>
22
- <div class="header-mobile-controls">
23
- <%= coco_button(icon: :menu, theme: :text_neutral_light, size: :md, click: "toggleDrawer", x: {show: "!drawerOpen"}) %>
24
- <%= coco_button(icon: :x, theme: :text_neutral_light, size: :md, click: "toggleDrawer", x: {show: "drawerOpen", cloak: true}) %>
25
- </div>
26
- <% end %>
27
- </nav>
28
- </div>
29
- <%= mobile_nav %>
30
- <% end %>
@@ -1,11 +0,0 @@
1
- import { CocoComponent } from "@assets/js/coco/component";
2
-
3
- export default CocoComponent("appHeader", () => {
4
- return {
5
- drawerOpen: false,
6
-
7
- toggleDrawer() {
8
- this.drawerOpen = !this.drawerOpen;
9
- },
10
- };
11
- });
@@ -1,33 +0,0 @@
1
- module Coco
2
- module App
3
- class Header < Coco::Component
4
- renders_one :primary_nav, ->(**kwargs) do
5
- Coco::ButtonGroup.new(
6
- theme: :text_neutral_light,
7
- collapsible: false,
8
- size: :xs,
9
- **kwargs
10
- )
11
- end
12
-
13
- renders_one :secondary_nav, ->(**kwargs) do
14
- Coco::ButtonGroup.new(
15
- theme: :text_neutral_light,
16
- collapsible: false,
17
- size: :xs,
18
- **kwargs
19
- )
20
- end
21
-
22
- renders_one :mobile_nav, ->(**kwargs) do
23
- Coco::App::NavDrawer.new(**kwargs)
24
- end
25
-
26
- attr_reader :home_path
27
-
28
- def initialize(home_path: nil, **)
29
- @home_path = home_path
30
- end
31
- end
32
- end
33
- end