Merge pull request #4 from freshjuice-dev/develop

Added new Tabs module, and improving existing modules

package.json

@@ -1,6 +1,6 @@
 {
   "name": "freshjuice-hubspot-theme",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "Hubspot CMS theme boilerplate with TailwindCSS, AlpineJS, and more.",
   "main": "index.js",
   "scripts": {
@@ -54,6 +54,7 @@
   "homepage": "https://github.com/freshjuice-dev/freshjuice-hubspot-theme#readme",
   "devDependencies": {
     "@alpinejs/collapse": "^3.13.10",
+    "@alpinejs/focus": "^3.13.10",
     "@alpinejs/intersect": "^3.13.10",
     "@tailwindcss/aspect-ratio": "^0.4.2",
     "@tailwindcss/forms": "^0.5.7",

source/js/main.js

@@ -6,6 +6,7 @@ import flyingPages from "flying-pages-module";
 import Alpine from "alpinejs";
 import intersect from "@alpinejs/intersect";
 import collapse from "@alpinejs/collapse";
+import focus from "@alpinejs/focus";
 import dataDOM from "./modules/Alpine.data/DOM";
 
 // The window.Alpine = Alpine bit is optional, but is nice to have for
@@ -28,6 +29,7 @@ function domReady(callback) {
 // Add plugins to Alpine
 Alpine.plugin(intersect);
 Alpine.plugin(collapse);
+Alpine.plugin(focus);
 
 Alpine.data("xDOM", dataDOM);
 

theme/css/tailwind.css

@@ -1834,6 +1834,10 @@ lite-youtube.lyt-activated > .lty-playbtn{
   margin-top:0px !important;
 }
 
+.-fj-mb-px{
+  margin-bottom:-1px;
+}
+
 .fj-mb-2{
   margin-bottom:0.5rem;
 }
@@ -2126,6 +2130,10 @@ lite-youtube.lyt-activated > .lty-playbtn{
   align-items:center;
 }
 
+.fj-items-stretch{
+  align-items:stretch;
+}
+
 .fj-justify-end{
   justify-content:flex-end;
 }
@@ -2261,18 +2269,35 @@ lite-youtube.lyt-activated > .lty-playbtn{
   border-top-right-radius:0.25rem;
 }
 
+.fj-rounded-t-md{
+  border-top-left-radius:0.375rem;
+  border-top-right-radius:0.375rem;
+}
+
 .fj-rounded-bl-none{
   border-bottom-left-radius:0px;
 }
 
+.fj-rounded-tl-none{
+  border-top-left-radius:0px;
+}
+
 .fj-border{
   border-width:1px;
 }
 
+.fj-border-l{
+  border-left-width:1px;
+}
+
 .fj-border-l-4{
   border-left-width:4px;
 }
 
+.fj-border-r{
+  border-right-width:1px;
+}
+
 .fj-border-t{
   border-top-width:1px;
 }
@@ -2296,6 +2321,10 @@ lite-youtube.lyt-activated > .lty-playbtn{
   border-color:rgb(28 25 23 / 0.1);
 }
 
+.fj-border-transparent{
+  border-color:transparent;
+}
+
 .fj-bg-amber-100{
   --fj-bg-opacity:1;
   background-color:rgb(254 243 199 / var(--fj-bg-opacity));
@@ -2420,6 +2449,10 @@ lite-youtube.lyt-activated > .lty-playbtn{
   padding:1rem;
 }
 
+.fj-p-8{
+  padding:2rem;
+}
+
 .\!fj-py-0{
   padding-top:0px !important;
   padding-bottom:0px !important;