coveragebook_components 0.12.0 → 0.12.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: bbeeed5148a322ea32398e0521d72f398dfdcd08cfb6bee476c32bd3df7fbc55
-  data.tar.gz: 36b58e768841a56e6d50eb66bf1d754a25b4730e9601b6030bbeb272ffa70caf
+  metadata.gz: 7dcf86084959ce92670ea5cdfabf7f121e7454e1b7e073cf1cb317a791cb332d
+  data.tar.gz: 50a47b71854e071a2b3fc5c5c80599e90cf620c35f0918e5b56b67cd7fd9e951
 SHA512:
-  metadata.gz: 96aca4f58f5f4d69d8d7b1a004d1f6e07789ab8d33b4860c6a4d631e9f3724013f104434adb1cfaf212aa57e1f50d9f6353c46f4abcfbaf8c425cce1cf2b6e64
-  data.tar.gz: 3045072e7e9230b73662d16169b35e2325ba4b1ee3c497a8a5b8f1867219d7a1e45ff85205c04255950ba25328662c5c302f3f0301d37e333340348721da3a51
+  metadata.gz: 000552fd4d65a2bbef90e888cc57b0a3931feb68db6b4025da457d685e469f56a54293c9f386646b11a1379617c4e88717b1a5fcc9e53938fd7588dffa5083e2
+  data.tar.gz: dfb4b25c5e357b800b66b3ff6ae91274af799ad1e644bdf549e859658edac117bd0c1bbac07891fb0f2293fce20a84ae766d86e375b899263f57ebec06b9156c

data/app/assets/build/coco/app.css

@@ -3727,7 +3727,7 @@ select{
   margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
   margin-bottom: calc(1rem * var(--tw-space-y-reverse));
 }
-[data-coco][data-component="app-plan-picker"] .plan-picker-controls > *{
+[data-coco][data-component="app-plan-picker"] .plan-picker-controls [data-component="app-option-bar"]{
   margin-left: auto;
   margin-right: auto;
 }
@@ -3771,9 +3771,7 @@ select{
 }
 @container (min-width: 420px) {
       [data-coco][data-component="app-plan-picker"] .plan-picker-controls{
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
+    position: relative;
   }
       [data-coco][data-component="app-plan-picker"] .plan-picker-controls > :not([hidden]) ~ :not([hidden]){
     --tw-space-y-reverse: 0;
@@ -3781,11 +3779,20 @@ select{
     margin-bottom: calc(0px * var(--tw-space-y-reverse));
   }
 
-        [data-coco][data-component="app-plan-picker"] .plan-picker-controls > *{
+        [data-coco][data-component="app-plan-picker"] .plan-picker-controls .plan-picker-currency{
+    position: absolute;
+    left: 0px;
+    top: 0px;
     margin-left: 0px;
     margin-right: 0px;
   }
 
+        [data-coco][data-component="app-plan-picker"] .plan-picker-controls .plan-picker-currency
+          + .plan-picker-interval
+          > [data-component="app-option-bar"]{
+    margin-right: 0px;
+  }
+
       [data-coco][data-component="app-plan-picker"] .plan-picker-plans{
     display: grid;
     grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -3794,7 +3801,17 @@ select{
   }
     }
 @container (min-width: 984px) {
+        [data-coco][data-component="app-plan-picker"] .plan-picker-controls .plan-picker-interval > [data-component="app-option-bar"]{
+    margin-left: auto !important;
+    margin-right: auto !important;
+  }
+
         [data-coco][data-component="app-plan-picker"] .plan-picker-controls .plan-picker-view-toggle{
+    position: absolute;
+    right: 0px;
+    top: 0px;
+    margin-left: 0px;
+    margin-right: 0px;
     display: block;
   }
 

data/app/assets/build/coco/app.js

@@ -14048,7 +14048,7 @@
   // ../../../package.json
   var package_default = {
     name: "coveragebook-components",
-    version: "0.12.0",
+    version: "0.12.1",
     repository: "git@github.com:coveragebook/coco.git",
     license: "NO LICENSE",
     author: "Mark Perkins <mark@coveragebook.com>",

data/app/components/coco/app/blocks/plan_picker/plan_picker.css

@@ -5,7 +5,7 @@
     .plan-picker-controls {
       @apply space-y-4;
 
-      > * {
+      [data-component="app-option-bar"] {
         @apply mx-auto;
       }
 
@@ -46,10 +46,16 @@
 
     @container (min-width: 420px) {
       .plan-picker-controls {
-        @apply flex items-center justify-between space-y-0;
+        @apply relative space-y-0;
 
-        > * {
-          @apply mx-0;
+        .plan-picker-currency {
+          @apply absolute left-0 top-0 mx-0;
+        }
+
+        .plan-picker-currency
+          + .plan-picker-interval
+          > [data-component="app-option-bar"] {
+          @apply mr-0;
         }
       }
 
@@ -60,8 +66,12 @@
 
     @container (min-width: 984px) {
       .plan-picker-controls {
+        .plan-picker-interval > [data-component="app-option-bar"] {
+          @apply !mx-auto;
+        }
+
         .plan-picker-view-toggle {
-          @apply block;
+          @apply block absolute right-0 top-0 mx-0;
         }
       }
 

data/app/components/coco/app/blocks/plan_picker/plan_picker.html.erb

@@ -1,15 +1,17 @@
-<%= render component_tag(x: {
-  data: "appPlanPicker",
-  ":class": "{'slider-active': shouldPaginate}",
-  "options": "options",
-  "@resize.window": "calculateOffset"
-}) do %>
+<%= render component_tag(x: slider? ? {
+    data: "appPlanPicker",
+    ":class": "{'slider-active': shouldPaginate}",
+    "options": "options",
+    "@resize.window": "calculateOffset"
+  } : {}) do %>
   <div class="plan-picker-container">
     <div class="plan-picker-controls">
-      <div data-role="currency-selector">
-        <%= currency_selector %>
-      </div>
-      <div data-role="interval-selector">
+      <% if currency_selector? %>
+        <div class="plan-picker-currency" data-role="currency-selector">
+          <%= currency_selector %>
+        </div>
+      <% end %>
+      <div class="plan-picker-interval" data-role="interval-selector">
         <%= interval_selector %>
       </div>
       <% if view_toggle? %>
@@ -19,7 +21,7 @@
       <% end %>
     </div>
     <%= space 4 %>
-    <div x-ref="slider" class="plan-picker-slider" x-cloak>
+    <div x-ref="slider" class="plan-picker-slider" <%= "x-cloak" if slider? %>>
       <div class="plan-picker-slider-container">
         <div class="plan-picker-plans" x-ref="sliderItems">
           <% plans.each do |plan| %>

data/lib/coco.rb

@@ -1,3 +1,3 @@
 module Coco
-  VERSION = "0.12.0"
+  VERSION = "0.12.1"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: coveragebook_components
 version: !ruby/object:Gem::Version
-  version: 0.12.0
+  version: 0.12.1
 platform: ruby
 authors:
 - Mark Perkins
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2023-12-18 00:00:00.000000000 Z
+date: 2023-12-21 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails