Merge pull request #6 from freshjuice-dev/develop

Added more modules and UI optimisations
freshjuice-dev · May 30, 2024 · 639a514 · 639a514
2 parents 96177e9 + 162688d
commit 639a514
Show file tree

Hide file tree

Showing 27 changed files with 1,041 additions and 2 deletions.
diff --git a/theme/css/tailwind.css b/theme/css/tailwind.css
diff --git a/theme/modules/price-card-with-details.module/fields.json b/theme/modules/price-card-with-details.module/fields.json
@@ -0,0 +1,180 @@
+[ {
+  "id" : "d6f776b8-4c95-0265-0338-95b2b892258b",
+  "name" : "two_column_group",
+  "display_width" : null,
+  "label" : "Two Column Group",
+  "required" : false,
+  "locked" : false,
+  "children" : [ {
+    "id" : "29f3b9dc-17c7-28f2-83e3-2c3ecbb966f5",
+    "name" : "title",
+    "display_width" : null,
+    "label" : "Title",
+    "required" : false,
+    "locked" : false,
+    "validation_regex" : "",
+    "allow_new_line" : false,
+    "show_emoji_picker" : false,
+    "type" : "text",
+    "default" : "Juicy Permanent"
+  }, {
+    "id" : "a4ca36af-76ae-770a-f896-743348937a9d",
+    "name" : "description",
+    "display_width" : null,
+    "label" : "Description",
+    "required" : false,
+    "locked" : false,
+    "validation_regex" : "",
+    "allow_new_line" : false,
+    "show_emoji_picker" : false,
+    "type" : "text",
+    "default" : "The best, the mightiest, the bravest juices and smoothies are there to help you smooth up for the day."
+  }, {
+    "id" : "4d13341b-ebf6-9c32-120b-e35e6f07ef30",
+    "name" : "divider_text",
+    "display_width" : null,
+    "label" : "Divider Text",
+    "required" : false,
+    "locked" : false,
+    "validation_regex" : "",
+    "allow_new_line" : false,
+    "show_emoji_picker" : false,
+    "type" : "text",
+    "default" : "What's included"
+  }, {
+    "id" : "a0b675a1-c232-5c7a-d638-4789a941e235",
+    "name" : "features_item",
+    "display_width" : null,
+    "label" : "Features Item",
+    "required" : false,
+    "locked" : false,
+    "occurrence" : {
+      "min" : 0,
+      "max" : null,
+      "sorting_label_field" : null,
+      "default" : 4
+    },
+    "validation_regex" : "",
+    "allow_new_line" : false,
+    "show_emoji_picker" : false,
+    "type" : "text",
+    "default" : [ "Permanent Juiciness", "VIP access to secret Juicy Events", "Private Juice and Smoothie Butlers", "Hotels Secret Juice Service" ]
+  } ],
+  "tab" : "CONTENT",
+  "expanded" : false,
+  "group_occurrence_meta" : null,
+  "type" : "group",
+  "default" : {
+    "title" : "Juicy Permanent",
+    "description" : "The best, the mightiest, the bravest juices and smoothies are there to help you smooth up for the day.",
+    "divider_text" : "What's included",
+    "features_item" : [ "Permanent Juiciness", "VIP access to secret Juicy Events", "Private Juice and Smoothie Butlers", "Hotels Secret Juice Service" ]
+  }
+}, {
+  "id" : "108c4f09-fc25-b23c-13b5-48538075edb8",
+  "name" : "one_column_price_card",
+  "display_width" : null,
+  "label" : "One Column Price Card",
+  "required" : false,
+  "locked" : false,
+  "children" : [ {
+    "id" : "6dc1090e-378c-01fe-85dd-05dc515a86f3",
+    "name" : "slogan",
+    "display_width" : null,
+    "label" : "Slogan",
+    "required" : true,
+    "locked" : false,
+    "validation_regex" : "",
+    "allow_new_line" : false,
+    "show_emoji_picker" : false,
+    "type" : "text",
+    "default" : "Pay once, be juicy forever"
+  }, {
+    "id" : "92df9402-f998-f648-c234-ac827a557f38",
+    "name" : "cost",
+    "display_width" : null,
+    "label" : "Cost",
+    "required" : false,
+    "locked" : false,
+    "validation_regex" : "",
+    "allow_new_line" : false,
+    "show_emoji_picker" : false,
+    "type" : "text",
+    "default" : "$349"
+  }, {
+    "id" : "77177926-9187-1c83-97d3-1f8fbfe752c8",
+    "name" : "cost_details",
+    "display_width" : null,
+    "label" : "Cost Details",
+    "required" : false,
+    "locked" : false,
+    "validation_regex" : "",
+    "allow_new_line" : false,
+    "show_emoji_picker" : false,
+    "type" : "text",
+    "default" : "USD"
+  }, {
+    "id" : "c574064a-3430-990d-1d95-6988c4bd360a",
+    "name" : "cta_link",
+    "display_width" : null,
+    "label" : "CTA Link",
+    "required" : false,
+    "locked" : false,
+    "supported_types" : [ "EXTERNAL", "CONTENT", "FILE", "EMAIL_ADDRESS", "BLOG", "CALL_TO_ACTION", "PHONE_NUMBER" ],
+    "show_advanced_rel_options" : false,
+    "type" : "link",
+    "default" : {
+      "url" : {
+        "content_id" : null,
+        "href" : "https://source.unsplash.com/random/1024x1024/?infinite+smoothie",
+        "type" : "EXTERNAL"
+      },
+      "open_in_new_tab" : false,
+      "no_follow" : false
+    }
+  }, {
+    "id" : "890ae293-bf26-c503-e479-22fae50a76f1",
+    "name" : "cta_text",
+    "display_width" : null,
+    "label" : "CTA Text",
+    "required" : false,
+    "locked" : false,
+    "validation_regex" : "",
+    "allow_new_line" : false,
+    "show_emoji_picker" : false,
+    "type" : "text",
+    "default" : "Get Juicy"
+  }, {
+    "id" : "35860b0d-061e-a20c-9a54-140dd6662713",
+    "name" : "sub_text",
+    "display_width" : null,
+    "label" : "Sub Text",
+    "required" : false,
+    "locked" : false,
+    "validation_regex" : "",
+    "allow_new_line" : false,
+    "show_emoji_picker" : false,
+    "type" : "text",
+    "default" : "Invoices and receipts available for easy juicy reevaluations"
+  } ],
+  "tab" : "CONTENT",
+  "expanded" : false,
+  "group_occurrence_meta" : null,
+  "type" : "group",
+  "default" : {
+    "slogan" : "Pay once, be juicy forever",
+    "cost" : "$349",
+    "cost_details" : "USD",
+    "cta_link" : {
+      "url" : {
+        "content_id" : null,
+        "href" : "https://source.unsplash.com/random/1024x1024/?infinite+smoothie",
+        "type" : "EXTERNAL"
+      },
+      "open_in_new_tab" : false,
+      "no_follow" : false
+    },
+    "cta_text" : "Get Juicy",
+    "sub_text" : "Invoices and receipts available for easy juicy reevaluations"
+  }
+} ]
diff --git a/theme/modules/price-card-with-details.module/meta.json b/theme/modules/price-card-with-details.module/meta.json
@@ -0,0 +1,16 @@
+{
+  "global": false,
+  "content_types": [
+    "LANDING_PAGE",
+    "SITE_PAGE",
+    "BLOG_LISTING",
+    "BLOG_POST"
+  ],
+  "host_template_types": [
+    "PAGE",
+    "BLOG_LISTING",
+    "BLOG_POST"
+  ],
+  "label": "Price Card with Details",
+  "is_available_for_new_content": true
+}
diff --git a/theme/modules/price-card-with-details.module/module.css b/theme/modules/price-card-with-details.module/module.css
diff --git a/theme/modules/price-card-with-details.module/module.html b/theme/modules/price-card-with-details.module/module.html
@@ -0,0 +1,57 @@
+<div class="fj-max-w-2xl fj-rounded-3xl fj-ring-1 fj-ring-gray-200 fj-mx-auto lg:fj-mx-0 lg:fj-flex lg:fj-max-w-none">
+  <div class="fj-flex fj-flex-col fj-justify-center fj-p-8 sm:fj-p-10 fj-space-y-4 lg:fj-flex-auto">
+    <p class="fj-text-2xl fj-font-bold fj-tracking-tight">{{ module.two_column_group.title }}</p>
+
+    <p class="fj-text-base fj-leading-none">{{ module.two_column_group.description }}</p>
+
+    {% if module.two_column_group.features_item | length > 0 %}
+      <div class="fj-flex fj-items-center fj-gap-x-4">
+        <p class="fj-flex-none fj-text-sm fj-font-semibold fj-leading-6 fj-text-blue-600">{{ module.two_column_group.divider_text }}</p>
+
+        <div class="fj-h-px fj-flex-auto fj-bg-gray-300"></div>
+      </div>
+    {% endif %}
+
+    <ul role="list" class="fj-grid fj-grid-cols-1 fj-gap-4 fj-text-sm fj-leading-6 fj-text-gray-600 md:fj-grid-cols-2 md:fj-gap-6">
+      {% for item in module.two_column_group.features_item %}
+        <li class="fj-flex fj-gap-x-3">
+          <svg class="fj-size-6 fj-flex-none fj-text-blue-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+            <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
+          </svg>
+
+          {{ item }}
+        </li>
+      {% endfor %}
+    </ul>
+  </div>
+
+  <div class="-fj-mt-2 fj-p-2 lg:fj-mt-0 lg:fj-w-full lg:fj-max-w-md lg:fj-flex-shrink-0">
+    <div class="fj-rounded-2xl fj-bg-gray-50 fj-py-10 fj-text-center fj-ring-1 fj-ring-inset fj-ring-gray-900/5 lg:fj-flex lg:fj-flex-col lg:fj-justify-center lg:fj-py-16">
+      <div class="fj-grid fj-gap-4 fj-mx-auto fj-max-w-xs fj-px-8">
+        <p class="fj-text-base fj-font-semibold">{{ module.one_column_price_card.slogan }}</p>
+
+        <div class="fj-flex fj-items-baseline fj-justify-center fj-gap-x-2">
+          <span class="fj-text-5xl fj-font-bold">{{ module.one_column_price_card.cost }}</span>
+
+          <span class="fj-text-sm fj-font-semibold fj-leading-6">{{ module.one_column_price_card.cost_details }}</span>
+        </div>
+
+        {% set href = module.one_column_price_card.cta_link.url.href %}
+        {% if module.one_column_price_card.cta_link.url.type is equalto "EMAIL_ADDRESS" %}
+          {% set href = "mailto:" + href %}
+        {% endif %}
+
+        <a class="fj-button fj-button--small fj-normal-case	fj-text-sm fj-text-white fj-font-semibold fj-text-center"
+           href="{{ href|escape_url }}" {% if module.one_column_price_card.cta_link.open_in_new_tab %}
+           target="_blank"{% endif %} {% if module.one_column_price_card.cta_link.rel %}
+           rel="{{ module.one_column_price_card.cta_link.rel|escape_attr }}"{% endif %}>
+          {{ module.one_column_price_card.cta_text }}
+        </a>
+
+        <p class="fj-text-xs fj-leading-5">{{ module.one_column_price_card.sub_text }}</p>
+
+      </div>
+    </div>
+
+  </div>
+</div>
diff --git a/theme/modules/price-card-with-details.module/module.js b/theme/modules/price-card-with-details.module/module.js