coveragebook_components 0.15.0 → 0.17.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (108) hide show
  1. checksums.yaml +4 -4
  2. data/app/assets/build/coco/{book.css → coco.css} +1158 -1796
  3. data/app/assets/build/coco/coco.js +11206 -10950
  4. data/app/assets/build/coco/tailwind.preset.js +2760 -0
  5. data/app/assets/css/base/setup.css +0 -43
  6. data/app/assets/css/base/tippy.css +40 -43
  7. data/app/assets/css/base/utils/text.css +0 -210
  8. data/app/assets/css/coco.css +34 -0
  9. data/app/assets/css/plugins/aspect.js +27 -0
  10. data/app/assets/css/plugins/colors.js +30 -0
  11. data/app/assets/css/plugins/icons.js +17 -0
  12. data/app/assets/css/plugins/layout.js +15 -0
  13. data/app/assets/css/plugins/text.js +183 -0
  14. data/app/assets/js/base/tippy/plugins/hide_on_esc.js +3 -1
  15. data/app/assets/js/coco/coco.js +0 -9
  16. data/app/assets/js/coco.js +5 -0
  17. data/app/assets/js/helpers/index.js +10 -2
  18. data/app/components/coco/buttons/button/button.css +5 -5
  19. data/app/components/coco/buttons/button_group/button_group.css +1 -1
  20. data/app/components/coco/buttons/color_picker_button/color_picker_button.css +1 -1
  21. data/app/components/coco/buttons/layout_picker_button/layout_picker_button.html.erb +5 -1
  22. data/app/components/coco/buttons/layout_picker_button/layout_picker_button.rb +2 -2
  23. data/app/components/coco/buttons/menu/menu.css +1 -1
  24. data/app/components/coco/buttons/menu_items/user_profile/user_profile.css +1 -1
  25. data/app/components/coco/component.rb +1 -1
  26. data/app/components/coco/concerns/acts_as_field_with_options.rb +0 -1
  27. data/app/components/coco/fields/button_component.rb +1 -1
  28. data/app/components/coco/fields/submit_component.rb +1 -1
  29. data/app/components/coco/indicators/badge/badge.css +1 -1
  30. data/app/components/coco/layout/panel/panel.css +1 -1
  31. data/app/components/coco/modals/modal/modal.css +1 -1
  32. data/app/components/coco/modals/modal_dialog/modal_dialog.css +1 -1
  33. data/app/components/coco/utilities/placeholder/placeholder.css +1 -1
  34. data/app/helpers/coco/components_helper.rb +253 -3
  35. data/app/helpers/coco/integration_helper.rb +26 -4
  36. data/config/exports.js +0 -0
  37. data/config/locales/coco.en.yml +0 -18
  38. data/config/tailwind.config.js +1 -83
  39. data/config/tailwind.preset.js +67 -0
  40. data/config/tokens.js +25 -21
  41. data/lib/coco/engine.rb +0 -4
  42. data/lib/coco.rb +1 -1
  43. metadata +12 -68
  44. data/app/assets/build/coco/app.css +0 -9711
  45. data/app/assets/build/coco/app.js +0 -25142
  46. data/app/assets/build/coco/book.js +0 -16548
  47. data/app/assets/css/app.css +0 -3
  48. data/app/assets/css/base/utils/colors.css +0 -30
  49. data/app/assets/css/base/utils/icons.css +0 -16
  50. data/app/assets/css/base/utils/layout.css +0 -13
  51. data/app/assets/css/book.css +0 -3
  52. data/app/assets/js/app.js +0 -11
  53. data/app/assets/js/book.js +0 -9
  54. data/app/assets/js/helpers/screenshot.js +0 -42
  55. data/app/assets/js/helpers/turbo_events.js +0 -13
  56. data/app/components/coco/app/application_layout/application_layout.css +0 -122
  57. data/app/components/coco/app/application_layout/application_layout.html.erb +0 -32
  58. data/app/components/coco/app/application_layout/application_layout.js +0 -36
  59. data/app/components/coco/app/application_layout/application_layout.rb +0 -16
  60. data/app/components/coco/app/contact_callout/contact_callout.css +0 -119
  61. data/app/components/coco/app/contact_callout/contact_callout.html.erb +0 -28
  62. data/app/components/coco/app/contact_callout/contact_callout.rb +0 -21
  63. data/app/components/coco/app/faqs/faqs.css +0 -38
  64. data/app/components/coco/app/faqs/faqs.html.erb +0 -12
  65. data/app/components/coco/app/faqs/faqs.rb +0 -14
  66. data/app/components/coco/app/header/header.css +0 -47
  67. data/app/components/coco/app/header/header.html.erb +0 -30
  68. data/app/components/coco/app/header/header.js +0 -11
  69. data/app/components/coco/app/header/header.rb +0 -33
  70. data/app/components/coco/app/nav_drawer/nav_drawer.css +0 -58
  71. data/app/components/coco/app/nav_drawer/nav_drawer.html.erb +0 -16
  72. data/app/components/coco/app/nav_drawer/nav_drawer.js +0 -24
  73. data/app/components/coco/app/nav_drawer/nav_drawer.rb +0 -32
  74. data/app/components/coco/app/plan_card/plan_card.css +0 -132
  75. data/app/components/coco/app/plan_card/plan_card.html.erb +0 -36
  76. data/app/components/coco/app/plan_card/plan_card.rb +0 -66
  77. data/app/components/coco/app/plan_confirmation/plan_confirmation.css +0 -53
  78. data/app/components/coco/app/plan_confirmation/plan_confirmation.html.erb +0 -16
  79. data/app/components/coco/app/plan_confirmation/plan_confirmation.rb +0 -18
  80. data/app/components/coco/app/plan_picker/plan_picker.css +0 -128
  81. data/app/components/coco/app/plan_picker/plan_picker.html.erb +0 -69
  82. data/app/components/coco/app/plan_picker/plan_picker.js +0 -56
  83. data/app/components/coco/app/plan_picker/plan_picker.rb +0 -25
  84. data/app/components/coco/app/sidebar_nav/item/item.css +0 -121
  85. data/app/components/coco/app/sidebar_nav/item/item.html.erb +0 -9
  86. data/app/components/coco/app/sidebar_nav/item/item.js +0 -80
  87. data/app/components/coco/app/sidebar_nav/item/item.rb +0 -48
  88. data/app/components/coco/app/sidebar_nav/menu/menu.css +0 -138
  89. data/app/components/coco/app/sidebar_nav/menu/menu.html.erb +0 -24
  90. data/app/components/coco/app/sidebar_nav/menu/menu.js +0 -12
  91. data/app/components/coco/app/sidebar_nav/menu/menu.rb +0 -46
  92. data/app/components/coco/app/sidebar_nav/navbar/navbar.css +0 -75
  93. data/app/components/coco/app/sidebar_nav/navbar/navbar.html.erb +0 -29
  94. data/app/components/coco/app/sidebar_nav/navbar/navbar.js +0 -28
  95. data/app/components/coco/app/sidebar_nav/navbar/navbar.rb +0 -50
  96. data/app/components/coco/app/slide_editor/slide_editor.css +0 -149
  97. data/app/components/coco/app/slide_editor/slide_editor.html.erb +0 -302
  98. data/app/components/coco/app/slide_editor/slide_editor.js +0 -269
  99. data/app/components/coco/app/slide_editor/slide_editor.rb +0 -114
  100. data/app/components/coco/book/editable_slide/editable_slide.css +0 -332
  101. data/app/components/coco/book/editable_slide/editable_slide.html.erb +0 -48
  102. data/app/components/coco/book/editable_slide/editable_slide.rb +0 -72
  103. data/app/components/coco/book/media_slide/media_slide.css +0 -7
  104. data/app/components/coco/book/media_slide/media_slide.html.erb +0 -3
  105. data/app/components/coco/book/media_slide/media_slide.rb +0 -12
  106. data/app/helpers/coco/app_components_helper.rb +0 -39
  107. data/app/helpers/coco/book_components_helper.rb +0 -11
  108. data/app/helpers/coco/core_components_helper.rb +0 -257
@@ -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
@@ -1,58 +0,0 @@
1
- @layer components {
2
- [data-coco][data-component="app-nav-drawer"] {
3
- @apply pointer-events-none fixed top-14 left-0 bottom-0 w-screen overflow-hidden;
4
- height: var(--app-height);
5
-
6
- .nav-drawer-overlay {
7
- @apply pointer-events-none absolute inset-0 bg-black opacity-0 transition-opacity;
8
- }
9
-
10
- .nav-drawer-content {
11
- @apply absolute top-0 right-0 bottom-0 bg-white overflow-auto translate-x-full transition-transform py-4;
12
- max-width: 340px;
13
- min-width: 280px;
14
- width: fit-content;
15
- }
16
-
17
- .nav-drawer-item:last-child {
18
- @apply mb-10;
19
- }
20
-
21
- .nav-drawer-button {
22
- @apply w-full text-content-dark-2 hover:text-content-dark-1 hover:bg-background-light-3;
23
-
24
- .button-inner {
25
- @apply mx-0 px-4 py-3;
26
- }
27
-
28
- .button-label {
29
- @apply font-normal;
30
- }
31
- }
32
-
33
- .nav-drawer-heading {
34
- @apply mt-4 mb-2 mx-4 border-b text-content-dark-1/50 border-gray-300 pb-3;
35
- }
36
-
37
- .nav-drawer-divider {
38
- @apply h-0 border-t border-gray-300 my-3;
39
- }
40
-
41
- [data-component="notice"] {
42
- @apply mb-4;
43
- }
44
-
45
- .drawer-open & {
46
- @apply pointer-events-auto;
47
-
48
- .nav-drawer-overlay {
49
- @apply pointer-events-auto opacity-60;
50
- backdrop-filter: blur(2px);
51
- }
52
-
53
- .nav-drawer-content {
54
- @apply pointer-events-auto translate-x-0 shadow-2xl;
55
- }
56
- }
57
- }
58
- }
@@ -1,16 +0,0 @@
1
- <%= render component_tag(
2
- x: {
3
- data: "appNavDrawer",
4
- "@keydown.escape.document": "close",
5
- "@resize.window": "close"
6
- }
7
- ) do %>
8
- <div class="nav-drawer-overlay" @click="close"></div>
9
- <div class="nav-drawer-content" x-ref="content" x-trap.noscroll.inert.noreturn="active">
10
- <% items.each do |item| %>
11
- <div class="nav-drawer-item">
12
- <%= item %>
13
- </div>
14
- <% end %>
15
- </div>
16
- <% end %>
@@ -1,24 +0,0 @@
1
- import { CocoComponent } from "@assets/js/coco/component";
2
-
3
- export default CocoComponent("appNavDrawer", () => {
4
- return {
5
- active: false,
6
-
7
- init() {
8
- this.$watch("drawerOpen", (open) => {
9
- if (open) {
10
- this.$refs.content.scrollTop = 0;
11
- setTimeout(() => {
12
- this.active = true;
13
- }, 200);
14
- } else {
15
- this.active = false;
16
- }
17
- });
18
- },
19
-
20
- close() {
21
- this.drawerOpen = false;
22
- },
23
- };
24
- });
@@ -1,32 +0,0 @@
1
- module Coco
2
- module App
3
- class NavDrawer < Coco::Component
4
- renders_many :items, types: {
5
- html: ->(&block) { block.call },
6
- divider: ->(&block) { tag.div class: "nav-drawer-divider" },
7
- heading: ->(text, **kwargs, &block) do
8
- tag.h4(text, class: "nav-drawer-heading")
9
- end,
10
- button: ->(*args, **kwargs, &block) do
11
- coco_button(*args, **kwargs, theme: nil, size: :md, fit: :full, class: "nav-drawer-button", &block)
12
- end
13
- }
14
-
15
- def with_divider(...)
16
- with_item_divider(...)
17
- end
18
-
19
- def with_html(...)
20
- with_item_html(...)
21
- end
22
-
23
- def with_button(...)
24
- with_item_button(...)
25
- end
26
-
27
- def with_heading(...)
28
- with_item_heading(...)
29
- end
30
- end
31
- end
32
- end
@@ -1,132 +0,0 @@
1
- @layer components {
2
- [data-coco][data-component="app-plan-card"] {
3
- @apply @container border border-gray-transparent-200 rounded-2xl bg-background-light-1 shadow-md max-w-lg relative;
4
- min-width: 192px;
5
-
6
- .plan-container {
7
- @apply px-5 py-6 space-y-5;
8
- }
9
-
10
- .plan-badge {
11
- @apply absolute top-0 left-5 -translate-y-1/2;
12
- }
13
-
14
- .plan-promo {
15
- @apply label-sm text-content-primary;
16
- }
17
-
18
- .plan-qualifier {
19
- @apply para-sm text-content-dark-3;
20
- }
21
-
22
- .plan-header {
23
- @apply space-y-1;
24
- }
25
-
26
- .plan-name {
27
- @apply branded-heading-4;
28
- }
29
-
30
- .plan-price {
31
- @apply subheading-4;
32
- }
33
-
34
- .plan-info * {
35
- @apply para-sm;
36
- }
37
-
38
- .plan-benefits {
39
- @apply space-y-4 py-5 border-t border-gray-300;
40
- }
41
-
42
- .plan-benefit {
43
- @apply label-sm flex;
44
-
45
- .coco-icon {
46
- @apply text-content-primary mr-1 mt-0.5;
47
- }
48
- }
49
-
50
- .plan-benefit-detail {
51
- @apply flex-grow;
52
- }
53
-
54
- &[data-variant="active"] {
55
- @apply border-background-primary bg-background-primary-light;
56
- }
57
-
58
- &[data-variant="selected"] {
59
- @apply border-background-primary;
60
- }
61
-
62
- &[data-variant="negated"] {
63
- @apply border-content-dark-muted bg-background-light-3 shadow-none;
64
-
65
- .plan-benefit-detail {
66
- @apply text-content-dark-muted;
67
-
68
- text-decoration: line-through;
69
- }
70
-
71
- .plan-benefit .coco-icon {
72
- @apply text-content-dark-muted;
73
- }
74
- }
75
-
76
- @container (min-width: 230px) {
77
- .plan-container {
78
- @apply px-6 pt-8 space-y-6;
79
- }
80
-
81
- .plan-badge {
82
- @apply left-6;
83
- }
84
-
85
- .plan-name {
86
- @apply branded-heading-3;
87
- }
88
-
89
- .plan-benefits {
90
- @apply py-6;
91
- }
92
- }
93
-
94
- @container (min-width: 280px) {
95
- .plan-container {
96
- @apply px-10;
97
- }
98
-
99
- .plan-badge {
100
- @apply left-10;
101
- }
102
-
103
- .plan-badge {
104
- @apply badge-md;
105
- }
106
-
107
- .plan-name {
108
- @apply branded-heading-2;
109
- }
110
-
111
- .plan-price {
112
- @apply subheading-3;
113
- }
114
-
115
- .plan-info * {
116
- @apply para-md;
117
- }
118
-
119
- .plan-benefits {
120
- @apply space-y-5;
121
- }
122
-
123
- .plan-benefit {
124
- @apply label-md;
125
- }
126
-
127
- .coco-button {
128
- @apply button-md;
129
- }
130
- }
131
- }
132
- }
@@ -1,36 +0,0 @@
1
- <%= render component_tag do %>
2
- <%= badge %>
3
-
4
- <div class="plan-container">
5
-
6
- <div class="plan-header">
7
- <h3 class="plan-name" data-role="name"><%= name %></h3>
8
- <p class="plan-price" data-role="price"><%= price %></p>
9
- <% if qualifier.present? %>
10
- <p class="plan-qualifier" data-role="qualifier"><%= qualifier %></p>
11
- <% end %>
12
- <% if promo.present? %>
13
- <p class="plan-promo" data-role="promo"><%= promo %></p>
14
- <% end %>
15
- </div>
16
-
17
- <div class="plan-action" data-role="action">
18
- <%= action %>
19
- </div>
20
-
21
- <div class="plan-info" data-role="info">
22
- <p><%= content %></p>
23
- </div>
24
-
25
- <ul class="plan-benefits">
26
- <% @benefits.each do |benefit, info| %>
27
- <li class="plan-benefit">
28
- <%= coco_icon(negated? ? :minus : :check, size: :sm) %>
29
- <div class="plan-benefit-detail" data-role="benefit">
30
- <%= benefit %>
31
- </div>
32
- </li>
33
- <% end %>
34
- </ul>
35
- </div>
36
- <% end %>
@@ -1,66 +0,0 @@
1
- module Coco
2
- module App
3
- class PlanCard < Coco::Component
4
- include Concerns::AcceptsOptions
5
-
6
- accepts_option :variant, from: [:active, :recommended, :negated, :selected, nil]
7
-
8
- renders_one :action, ->(*args, **kwargs, &block) do
9
- coco_button(*args,
10
- **kwargs,
11
- size: :sm,
12
- fit: :full,
13
- disabled: active?,
14
- &block)
15
- end
16
-
17
- renders_one :badge, ->(label, **kwargs) do
18
- coco_badge(label,
19
- class: "plan-badge",
20
- **kwargs,
21
- icon: :award,
22
- size: :sm)
23
- end
24
-
25
- renders_many :benefits, ->(benefit, &block) do
26
- @benefits[benefit] = block&.call
27
- end
28
-
29
- before_render do
30
- unless badge?
31
- if recommended?
32
- with_badge("Recommended")
33
- elsif active?
34
- with_badge("Current Plan")
35
- end
36
- end
37
- end
38
-
39
- attr_reader :name, :price, :promo, :qualifier
40
-
41
- def initialize(name:, price:, promo: nil, qualifier: nil, **kwargs)
42
- @name = name
43
- @price = price
44
- @promo = promo
45
- @qualifier = qualifier
46
- @benefits = {}
47
- end
48
-
49
- def active?
50
- get_option_value(:variant) == :active
51
- end
52
-
53
- def recommended?
54
- get_option_value(:variant) == :recommended
55
- end
56
-
57
- def negated?
58
- get_option_value(:variant) == :negated
59
- end
60
-
61
- def selected?
62
- get_option_value(:variant) == :selected
63
- end
64
- end
65
- end
66
- end
@@ -1,53 +0,0 @@
1
- @layer components {
2
- [data-coco][data-component="app-plan-confirmation"] {
3
- @apply @container;
4
- max-width: 37rem;
5
-
6
- .plan-confirmation-grid {
7
- @apply grid gap-4;
8
- }
9
-
10
- .plan-confirmation-new-plan {
11
- order: 1;
12
- }
13
-
14
- .plan-confirmation-old-plan {
15
- @apply hidden;
16
- }
17
-
18
- .plan-confirmation-secondary-action {
19
- order: 3;
20
- }
21
-
22
- .plan-confirmation-primary-action {
23
- order: 2;
24
- }
25
-
26
- @container (min-width: 420px) {
27
- [data-component="app-plan-card"] {
28
- @apply h-full;
29
- }
30
-
31
- .plan-confirmation-grid {
32
- @apply gap-8 grid-cols-2;
33
- }
34
-
35
- .plan-confirmation-new-plan {
36
- order: 2;
37
- }
38
-
39
- .plan-confirmation-old-plan {
40
- @apply block;
41
- order: 1;
42
- }
43
-
44
- .plan-confirmation-secondary-action {
45
- order: 3;
46
- }
47
-
48
- .plan-confirmation-primary-action {
49
- order: 4;
50
- }
51
- }
52
- }
53
- }
@@ -1,16 +0,0 @@
1
- <%= render component_tag do %>
2
- <div class="plan-confirmation-grid">
3
- <div class="plan-confirmation-new-plan" data-role="new-plan">
4
- <%= new_plan %>
5
- </div>
6
- <div class="plan-confirmation-old-plan" data-role="old-plan">
7
- <%= old_plan %>
8
- </div>
9
- <div class="plan-confirmation-primary-action" data-role="primary-action">
10
- <%= primary_action %>
11
- </div>
12
- <div class="plan-confirmation-secondary-action" data-role="secondary-action">
13
- <%= secondary_action %>
14
- </div>
15
- </div>
16
- <% end %>
@@ -1,18 +0,0 @@
1
- module Coco
2
- module App
3
- class PlanConfirmation < Coco::Component
4
- include Concerns::AcceptsOptions
5
-
6
- renders_one :new_plan
7
- renders_one :old_plan
8
-
9
- renders_one :primary_action, ->(*args, **kwargs, &block) do
10
- coco_button(*args, theme: :primary, size: :md, **kwargs, fit: :full, &block)
11
- end
12
-
13
- renders_one :secondary_action, ->(*args, **kwargs, &block) do
14
- coco_button(*args, theme: :secondary, size: :md, **kwargs, fit: :full, &block)
15
- end
16
- end
17
- end
18
- end
@@ -1,128 +0,0 @@
1
- @layer components {
2
- [data-coco][data-component="app-plan-picker"] {
3
- @apply @container;
4
-
5
- .plan-picker-controls {
6
- @apply space-y-4;
7
-
8
- [data-component="option-bar"] {
9
- @apply mx-auto;
10
- }
11
-
12
- .plan-picker-view-toggle {
13
- @apply hidden;
14
- }
15
- }
16
-
17
- .plan-picker-slider {
18
- @apply relative;
19
- }
20
-
21
- .plan-picker-slider-container {
22
- @apply overflow-x-clip;
23
- }
24
-
25
- .plan-picker-plans {
26
- @apply grid gap-y-8 grid-cols-1 transition-transform duration-300;
27
- }
28
-
29
- .plan-picker-view-toggle-mobile .coco-button {
30
- @apply mx-auto;
31
- }
32
-
33
- .plan-picker-pagination {
34
- @apply hidden;
35
- }
36
-
37
- [data-component="app-plan-card"] {
38
- @apply h-full;
39
- }
40
-
41
- &.slider-active {
42
- .plan-picker-pagination {
43
- @apply flex items-center justify-between absolute top-1/2 left-0 right-0 -translate-y-1/2;
44
- }
45
- }
46
-
47
- @container (min-width: 420px) {
48
- .plan-picker-controls {
49
- @apply relative space-y-0;
50
-
51
- .plan-picker-currency {
52
- @apply absolute left-0 top-0 mx-0;
53
- }
54
-
55
- .plan-picker-currency
56
- + .plan-picker-interval
57
- > [data-component="option-bar"] {
58
- @apply mr-0;
59
- }
60
- }
61
-
62
- .plan-picker-plans {
63
- @apply grid gap-x-4 grid-cols-2;
64
- }
65
- }
66
-
67
- @container (min-width: 984px) {
68
- .plan-picker-controls {
69
- .plan-picker-interval > [data-component="option-bar"] {
70
- @apply !mx-auto;
71
- }
72
-
73
- .plan-picker-view-toggle {
74
- @apply block absolute right-0 top-0 mx-0;
75
- }
76
- }
77
-
78
- .plan-picker-plans {
79
- @apply gap-x-6 grid-cols-4;
80
- }
81
-
82
- .plan-picker-view-toggle-mobile {
83
- @apply hidden;
84
- }
85
-
86
- &.slider-active {
87
- .plan-picker-plans {
88
- grid-template-columns: repeat(20, calc((100% - 4.5rem) / 4));
89
- }
90
- }
91
-
92
- &.slider-active {
93
- .plan-picker-slider {
94
- padding-left: 72px;
95
- padding-right: 72px;
96
- }
97
- }
98
- }
99
-
100
- @container (min-width: 1200px) {
101
- .plan-picker-plans {
102
- @apply gap-x-8;
103
- }
104
-
105
- &.slider-active {
106
- .plan-picker-plans {
107
- grid-template-columns: repeat(20, calc((100% - 6rem) / 4));
108
- }
109
- }
110
- }
111
-
112
- @media (min-width: 1540px) {
113
- &.slider-active {
114
- .plan-picker-pagination {
115
- @apply flex items-center justify-between absolute top-1/2 left-0 right-0 -translate-y-1/2;
116
- margin-left: -72px;
117
- margin-right: -72px;
118
- width: calc(100% + 144px);
119
- }
120
-
121
- .plan-picker-slider {
122
- padding-left: 0;
123
- padding-right: 0;
124
- }
125
- }
126
- }
127
- }
128
- }
@@ -1,69 +0,0 @@
1
- <%= render component_tag(x: slider? ? {
2
- data: "appPlanPicker",
3
- ":class": "{'slider-active': shouldPaginate}",
4
- "options": "options",
5
- "@resize.window": "calculateOffset"
6
- } : {}) do %>
7
- <div class="plan-picker-container">
8
- <div class="plan-picker-controls">
9
- <% if currency_selector? %>
10
- <div class="plan-picker-currency" data-role="currency-selector">
11
- <%= currency_selector %>
12
- </div>
13
- <% end %>
14
- <div class="plan-picker-interval" data-role="interval-selector">
15
- <%= interval_selector %>
16
- </div>
17
- <% if view_toggle? %>
18
- <div class="plan-picker-view-toggle" data-role="view-all-toggle">
19
- <%= view_toggle %>
20
- </div>
21
- <% end %>
22
- </div>
23
- <%= space 4 %>
24
- <div x-ref="slider" class="plan-picker-slider" <%= "x-cloak" if slider? %>>
25
- <div class="plan-picker-slider-container">
26
- <div class="plan-picker-plans" x-ref="sliderItems">
27
- <% plans.each do |plan| %>
28
- <div class="plan-picker-plan">
29
- <%= plan %>
30
- </div>
31
- <% end %>
32
- </div>
33
- </div>
34
-
35
- <% if slider? %>
36
- <div class="plan-picker-pagination" x-show="shouldPaginate" data-role="pagination">
37
- <%= coco_button(
38
- icon: :arrow_left,
39
- theme: :secondary,
40
- floating: true,
41
- size: :lg,
42
- x: {
43
- ref: "previous",
44
- "@click": "previous",
45
- "effect": "disabled = isFirst"
46
- }) %>
47
- <%= coco_button(
48
- icon: :arrow_right,
49
- theme: :secondary,
50
- floating: true,
51
- size: :lg,
52
- x: {
53
- ref: "next",
54
- "@click": "next",
55
- "effect": "disabled = isLast"
56
- }) %>
57
- </div>
58
- <% end %>
59
-
60
- </div>
61
-
62
- <% if view_toggle? %>
63
- <div class="plan-picker-view-toggle-mobile" data-role="view-all-toggle">
64
- <%= space 4 %>
65
- <%= view_toggle %>
66
- </div>
67
- <% end %>
68
- </div>
69
- <% end %>