spacing

Shopify · Sep 16, 2024 · c72de97 · c72de97
1 parent e1ab4f7
commit c72de97
Show file tree

Hide file tree

Showing 7 changed files with 117 additions and 24 deletions.
diff --git a/.shopifyignore b/.shopifyignore
@@ -0,0 +1,6 @@
+package.json
+package-lock.json
+.gitignore
+.DS_Store
+.prettierignore
+.prettierrc
diff --git a/LICENSE.md b/LICENSE.md
diff --git a/assets/critical.css b/assets/critical.css
@@ -215,3 +215,29 @@ a {
   background: var(--background-color);
   color: var(--color);
 }
+
+/* Spacing System */
+.spacing-bottom-2xs{
+  padding-bottom: 4px;
+}
+.spacing-bottom-xs{
+  padding-bottom: 8px;
+}
+.spacing-bottom-s{
+  padding-bottom: 12px;
+}
+.spacing-bottom-m{
+  padding-bottom: 16px;
+}
+.spacing-bottom-l{
+  padding-bottom: 20px;
+}
+.spacing-bottom-xl{
+  padding-bottom: 28px;
+}
+.spacing-bottom-2xl{
+  padding-bottom: 40px;
+}
+.spacing-bottom-3xl{
+  padding-bottom: 60px;
+}
diff --git a/blocks/button.liquid b/blocks/button.liquid
@@ -1,15 +1,17 @@
-<button type="{{ block.settings.type }}">
-  <span class="button-label">
-    {{ block.settings.label }}
-  </span>
-  <svg
-    focusable="false"
-    class="button-spinner"
-    viewBox="0 0 66 66"
-    xmlns="http://www.w3.org/2000/svg">
-    <circle class="path" fill="none" stroke-width="6" cx="33" cy="33" r="30"></circle>
-  </svg>
-</button>
+<div class="spacing-bottom-{{ block.settings.spacing_bottom }}">
+  <button type="{{ block.settings.type }}">
+    <span class="button-label">
+      {{ block.settings.label }}
+    </span>
+    <svg
+      focusable="false"
+      class="button-spinner"
+      viewBox="0 0 66 66"
+      xmlns="http://www.w3.org/2000/svg">
+      <circle class="path" fill="none" stroke-width="6" cx="33" cy="33" r="30"></circle>
+    </svg>
+  </button>
+</div>
 
 {% comment %} Todo: loading & disabled state {% endcomment %}
 {% comment %} Todo: Only inside forms {% endcomment %}
@@ -64,6 +66,23 @@
         }
       ],
       "default": "btn btn--primary"
+    },
+    {
+      "type": "select",
+      "id": "spacing_bottom",
+      "label": "Spacing bottom",
+      "options": [
+        { "value": "none", "label": "none" },
+        { "value": "2xs", "label": "2xs" },
+        { "value": "xs", "label": "xs" },
+        { "value": "s", "label": "s" },
+        { "value": "m", "label": "m" },
+        { "value": "l", "label": "l" },
+        { "value": "xl", "label": "xl" },
+        { "value": "2xl", "label": "2xl" },
+        { "value": "3xl", "label": "3xl" }
+      ],
+      "default": "none"
     }
   ],
   "presets": [

diff --git a/blocks/heading.liquid b/blocks/heading.liquid
@@ -1,6 +1,6 @@
 {% comment %} Should make a setting to decide which type of heading we're outputting instead of a heading size one. {% endcomment %}
 <{{ block.settings.html_tag }}
-  class="shopify-block-heading {{ block.settings | class_list }} {{ block.settings.heading_style }} text-{{ block.settings.alignment }}"
+  class="shopify-block-heading {{ block.settings | class_list }} {{ block.settings.heading_style }} text-{{ block.settings.alignment }} spacing-bottom-{{ block.settings.spacing_bottom }}"
   {{ block.shopify_attributes }}>
   {{ block.settings.heading }}
 </{{ block.settings.html_tag }}>
@@ -89,6 +89,23 @@
       "id": "alignment",
       "label": "Text alignment",
       "default": "center"
+    },
+    {
+      "type": "select",
+      "id": "spacing_bottom",
+      "label": "Spacing bottom",
+      "options": [
+        { "value": "none", "label": "none" },
+        { "value": "2xs", "label": "2xs" },
+        { "value": "xs", "label": "xs" },
+        { "value": "s", "label": "s" },
+        { "value": "m", "label": "m" },
+        { "value": "l", "label": "l" },
+        { "value": "xl", "label": "xl" },
+        { "value": "2xl", "label": "2xl" },
+        { "value": "3xl", "label": "3xl" }
+      ],
+      "default": "none"
     }
   ],
   "presets": [{ "name": "Heading" }]

diff --git a/blocks/link.liquid b/blocks/link.liquid
@@ -1,6 +1,6 @@
 <a
   href="{{ block.settings.link }}"
-  class="shopify-block-link {{ block.settings.button_style }}"
+  class="shopify-block-link {{ block.settings.button_style }} spacing-bottom-{{ block.settings.spacing_bottom }}"
   {%- if block.settings.open_in_new_tab -%}
     target="_blank" rel="noopener noreferrer"
   {%- endif -%}
@@ -55,6 +55,23 @@
       "id": "open_in_new_tab",
       "label": "Open this link in a new window",
       "default": false
+    },
+    {
+      "type": "select",
+      "id": "spacing_bottom",
+      "label": "Spacing bottom",
+      "options": [
+        { "value": "none", "label": "none" },
+        { "value": "2xs", "label": "2xs" },
+        { "value": "xs", "label": "xs" },
+        { "value": "s", "label": "s" },
+        { "value": "m", "label": "m" },
+        { "value": "l", "label": "l" },
+        { "value": "xl", "label": "xl" },
+        { "value": "2xl", "label": "2xl" },
+        { "value": "3xl", "label": "3xl" }
+      ],
+      "default": "none"
     }
   ],
   "presets": [

diff --git a/blocks/text.liquid b/blocks/text.liquid
@@ -1,5 +1,5 @@
 <div
-  class="shopify-block-text {{ block.settings | class_list }} {{ block.settings.text_style }} text-{{ block.settings.alignment }}"
+  class="shopify-block-text {{ block.settings | class_list }} {{ block.settings.text_style }} text-{{ block.settings.alignment }} spacing-bottom-{{ block.settings.spacing_bottom }}"
   {{ block.shopify_attributes }}>
   {{ block.settings.text }}
 </div>
@@ -40,6 +40,23 @@
       "id": "alignment",
       "label": "Text alignment",
       "default": "center"
+    },
+    {
+      "type": "select",
+      "id": "spacing_bottom",
+      "label": "Spacing bottom",
+      "options": [
+        { "value": "none", "label": "none" },
+        { "value": "2xs", "label": "2xs" },
+        { "value": "xs", "label": "xs" },
+        { "value": "s", "label": "s" },
+        { "value": "m", "label": "m" },
+        { "value": "l", "label": "l" },
+        { "value": "xl", "label": "xl" },
+        { "value": "2xl", "label": "2xl" },
+        { "value": "3xl", "label": "3xl" }
+      ],
+      "default": "none"
     }
   ],
   "presets": [{ "name": "Text" }]