From be0b35ab2797fb0e717aaf21a7db67d3959383ce Mon Sep 17 00:00:00 2001
From: Jules <jules@thinkshout.com>
Date: Fri, 8 Mar 2024 18:20:34 -0800
Subject: [PATCH] #61 renames styleguide-sections directory

---
 .../_elements/color-all.twig                  | 13 ++--
 .../_elements/color-bg.twig                   |  0
 .../_elements/colorways.twig                  |  0
 .../styleguide-sections/_elements/grids.twig  | 66 +++++++++++++++++++
 .../_elements/spacing.twig                    | 13 ++--
 .../_elements/typography.twig                 |  0
 .../atoms/buttons-&-links.twig                |  0
 .../atoms/inputs.twig                         |  8 +--
 .../molecules/cards.twig                      |  0
 .../molecules/section-title.twig              |  0
 .../styleguide_sections/_elements/grids.twig  | 50 --------------
 11 files changed, 88 insertions(+), 62 deletions(-)
 rename views/organisms/{styleguide_sections => styleguide-sections}/_elements/color-all.twig (96%)
 rename views/organisms/{styleguide_sections => styleguide-sections}/_elements/color-bg.twig (100%)
 rename views/organisms/{styleguide_sections => styleguide-sections}/_elements/colorways.twig (100%)
 create mode 100644 views/organisms/styleguide-sections/_elements/grids.twig
 rename views/organisms/{styleguide_sections => styleguide-sections}/_elements/spacing.twig (65%)
 rename views/organisms/{styleguide_sections => styleguide-sections}/_elements/typography.twig (100%)
 rename views/organisms/{styleguide_sections => styleguide-sections}/atoms/buttons-&-links.twig (100%)
 rename views/organisms/{styleguide_sections => styleguide-sections}/atoms/inputs.twig (68%)
 rename views/organisms/{styleguide_sections => styleguide-sections}/molecules/cards.twig (100%)
 rename views/organisms/{styleguide_sections => styleguide-sections}/molecules/section-title.twig (100%)
 delete mode 100644 views/organisms/styleguide_sections/_elements/grids.twig

diff --git a/views/organisms/styleguide_sections/_elements/color-all.twig b/views/organisms/styleguide-sections/_elements/color-all.twig
similarity index 96%
rename from views/organisms/styleguide_sections/_elements/color-all.twig
rename to views/organisms/styleguide-sections/_elements/color-all.twig
index 687d99109..d6265ce8e 100644
--- a/views/organisms/styleguide_sections/_elements/color-all.twig
+++ b/views/organisms/styleguide-sections/_elements/color-all.twig
@@ -43,21 +43,26 @@
 %}
 {%
   set row5 = [
-  'error-100',
   'error-500',
-  'warning-100',
   'warning-500',
-  'success-100',
   'success-500',
 ]
 %}
+{%
+  set row6 = [
+  'error-100',
+  'warning-100',
+  'success-100'
+]
+%}
 
 {% set color_rows = [
   row1,
   row2,
   row3,
   row4,
-  row5
+  row5,
+  row6
 ] %}
 
 <span class="
diff --git a/views/organisms/styleguide_sections/_elements/color-bg.twig b/views/organisms/styleguide-sections/_elements/color-bg.twig
similarity index 100%
rename from views/organisms/styleguide_sections/_elements/color-bg.twig
rename to views/organisms/styleguide-sections/_elements/color-bg.twig
diff --git a/views/organisms/styleguide_sections/_elements/colorways.twig b/views/organisms/styleguide-sections/_elements/colorways.twig
similarity index 100%
rename from views/organisms/styleguide_sections/_elements/colorways.twig
rename to views/organisms/styleguide-sections/_elements/colorways.twig
diff --git a/views/organisms/styleguide-sections/_elements/grids.twig b/views/organisms/styleguide-sections/_elements/grids.twig
new file mode 100644
index 000000000..f27a18532
--- /dev/null
+++ b/views/organisms/styleguide-sections/_elements/grids.twig
@@ -0,0 +1,66 @@
+{# Layouts
+ * All grids in use, styled in utilities.css.
+#}
+{% set gridStyle = "bg-neutral-200 p-xl" %}
+{% set headerClasses = "utility-xs my-sm" %}
+
+<div class="">
+  <h2 class="h3 mb-xs">Grids</h2>
+  <p class="body-sm m-zero">Defined in tailwind-grids.json. Use "xl:container p-site" for site container and padding.</p>
+</div>
+<h3 class="{{ headerClasses }}">Wrapped in ts-grid-col-1</h3>
+<div class="ts-grid-col-1">
+  <div class="{{ gridStyle }}"></div>
+</div>
+<h3 class="{{ headerClasses }}">Wrapped in ts-grid-col-2</h3>
+<div class="ts-grid-col-2">
+  <div class="{{ gridStyle }}"></div>
+  <div class="{{ gridStyle }}"></div>
+</div>
+<h3 class="{{ headerClasses }}">Wrapped in ts-grid-col-3</h3>
+<div class="ts-grid-col-3">
+  <div class="{{ gridStyle }}"></div>
+  <div class="{{ gridStyle }}"></div>
+  <div class="{{ gridStyle }}"></div>
+</div>
+<h3 class="{{ headerClasses }}">Wrapped in ts-grid-col-4</h3>
+<div class="ts-grid-col-4">
+  <div class="{{ gridStyle }}"></div>
+  <div class="{{ gridStyle }}"></div>
+  <div class="{{ gridStyle }}"></div>
+  <div class="{{ gridStyle }}"></div>
+</div>
+<h3 class="{{ headerClasses }}">Wrapped in ts-grid-col-6</h3>
+<div class="ts-grid-col-6">
+  <div class="{{ gridStyle }}"></div>
+  <div class="{{ gridStyle }}"></div>
+  <div class="{{ gridStyle }}"></div>
+  <div class="{{ gridStyle }}"></div>
+  <div class="{{ gridStyle }}"></div>
+  <div class="{{ gridStyle }}"></div>
+</div>
+<h3 class="{{ headerClasses }}">Wrapped in ts-grid-4-8</h3>
+<div class="ts-grid-4-8">
+  <div class="{{ gridStyle }}"></div>
+  <div class="{{ gridStyle }}"></div>
+</div>
+<h3 class="{{ headerClasses }}">Wrapped in ts-grid-7-5</h3>
+<div class="ts-grid-7-5">
+  <div class="{{ gridStyle }}"></div>
+  <div class="{{ gridStyle }}"></div>
+</div>
+<h3 class="{{ headerClasses }}">Wrapped in ts-grid-8-4</h3>
+<div class="ts-grid-8-4">
+  <div class="{{ gridStyle }}"></div>
+  <div class="{{ gridStyle }}"></div>
+</div>
+<h3 class="{{ headerClasses }}">Wrapped in ts-grid-9-3</h3>
+<div class="ts-grid-9-3">
+  <div class="{{ gridStyle }}"></div>
+  <div class="{{ gridStyle }}"></div>
+</div>
+<h3 class="{{ headerClasses }}">Wrapped in ts-grid-center</h3>
+<div class="ts-grid-center">
+  <div class="{{ gridStyle }}"></div>
+</div>
+
diff --git a/views/organisms/styleguide_sections/_elements/spacing.twig b/views/organisms/styleguide-sections/_elements/spacing.twig
similarity index 65%
rename from views/organisms/styleguide_sections/_elements/spacing.twig
rename to views/organisms/styleguide-sections/_elements/spacing.twig
index 74d36d6cb..c24cf6694 100644
--- a/views/organisms/styleguide_sections/_elements/spacing.twig
+++ b/views/organisms/styleguide-sections/_elements/spacing.twig
@@ -5,11 +5,16 @@
 
 <h2 class="h3 mt-md mb-xs">Spacing</h2>
 <p class="body-xs mt-zero">tokens/src/spacer.tokens.json</p>
-<p class="body-sm mt-sm"><em>.ts-py-block</em> and <em>.ts-py-block-sm</em> classes define block-level spacing.</p>
-<p class="body-xs mt-zero">See assets/css/base/utilities.css for definitions.</p>
-<p class="body-xs">All of the margin, padding and height classes use generated from these base values. The are also
+<p class="body-sm mt-sm">Spacing values define the space between elements on the page. This can include space
+  between buttons, between columns of text, or around an image. Setting a scale of sizes helps the page to feel
+  cohesive and considered.</p>
+<p class="utility-sm mt-sm">Development notes on spacing: <em>.ts-py-block, .ts-my-block, .ts-py-block-sm and
+    .ts-my-block-sm</em> classes define
+  block-level spacing.</p>
+<p class="utility-sm mt-zero">See tokens/tailwind-site-spacing, and tokens/src/spacer-tokens.json for definitions.
+  All of the margin, padding and height classes use generated from these base values. They are also
   available as css and tailwind variables.</p>
-<p class="utility-sm my-md">--spacer-[size]</p>
+<p class="utility-sm my-md">CSS custom property name: --spacer-[size]</p>
 <span class="h-4xl h-xl h-lg h-md h-2xs h-3xs h-px hidden"></span>
 
 {% set spacing_values = [
diff --git a/views/organisms/styleguide_sections/_elements/typography.twig b/views/organisms/styleguide-sections/_elements/typography.twig
similarity index 100%
rename from views/organisms/styleguide_sections/_elements/typography.twig
rename to views/organisms/styleguide-sections/_elements/typography.twig
diff --git a/views/organisms/styleguide_sections/atoms/buttons-&-links.twig b/views/organisms/styleguide-sections/atoms/buttons-&-links.twig
similarity index 100%
rename from views/organisms/styleguide_sections/atoms/buttons-&-links.twig
rename to views/organisms/styleguide-sections/atoms/buttons-&-links.twig
diff --git a/views/organisms/styleguide_sections/atoms/inputs.twig b/views/organisms/styleguide-sections/atoms/inputs.twig
similarity index 68%
rename from views/organisms/styleguide_sections/atoms/inputs.twig
rename to views/organisms/styleguide-sections/atoms/inputs.twig
index b8c06c479..68459e1bc 100644
--- a/views/organisms/styleguide_sections/atoms/inputs.twig
+++ b/views/organisms/styleguide-sections/atoms/inputs.twig
@@ -7,8 +7,8 @@
 <div class="my-sm flex flex-row gap-sm">
   <div>
     <h3 class="h5">Searchable Select</h3>
-    <p class="body-sm mb-xs">views/components/input--select.twig</p>
-    {% embed "components/input--select.twig" with { select_label: 'Searchable Select', select_searchable: true } %}
+    <p class="body-sm mb-xs">views/atoms/input--select.twig</p>
+    {% embed "atoms/input--select.twig" with { select_label: 'Searchable Select', select_searchable: true } %}
       {% block options %}
         {% for example_option in example_options %}
           <option value="{{ example_option.value }}">{{ example_option.label }}</option>
@@ -18,8 +18,8 @@
   </div>
   <div>
     <h3 class="h5">Select</h3>
-    <p class="body-sm mb-xs">views/components/input--select.twig</p>
-    {% embed "components/input--select.twig" with { select_label: 'Standard Select' } %}
+    <p class="body-sm mb-xs">views/atoms/input--select.twig</p>
+    {% embed "atoms/input--select.twig" with { select_label: 'Standard Select' } %}
       {% block options %}
         {% for example_option in example_options %}
           <option value="{{ example_option.value }}">{{ example_option.label }}</option>
diff --git a/views/organisms/styleguide_sections/molecules/cards.twig b/views/organisms/styleguide-sections/molecules/cards.twig
similarity index 100%
rename from views/organisms/styleguide_sections/molecules/cards.twig
rename to views/organisms/styleguide-sections/molecules/cards.twig
diff --git a/views/organisms/styleguide_sections/molecules/section-title.twig b/views/organisms/styleguide-sections/molecules/section-title.twig
similarity index 100%
rename from views/organisms/styleguide_sections/molecules/section-title.twig
rename to views/organisms/styleguide-sections/molecules/section-title.twig
diff --git a/views/organisms/styleguide_sections/_elements/grids.twig b/views/organisms/styleguide_sections/_elements/grids.twig
deleted file mode 100644
index d79025a16..000000000
--- a/views/organisms/styleguide_sections/_elements/grids.twig
+++ /dev/null
@@ -1,50 +0,0 @@
-{# Layouts
- * All grids in use, styled in utilities.css.
-#}
-
-<div class="">
-  <h2 class="h3 mb-xs">Grids</h2>
-  <p class="body-sm m-zero">Defined in tailwind-grids.json. Use "xl:container p-site" for site container and padding.</p>
-</div>
-<h3 class="utility-xs my-sm">Wrapped in ts-grid-col-2</h3>
-<div class="ts-grid-col-2">
-  <div class="bg-neutral-100 p-xl"></div>
-  <div class="bg-neutral-100 p-xl"></div>
-</div>
-<h3 class="utility-xs my-sm">Wrapped in ts-grid-col-3</h3>
-<div class="ts-grid-col-3">
-  <div class="bg-neutral-100 p-xl"></div>
-  <div class="bg-neutral-100 p-xl"></div>
-  <div class="bg-neutral-100 p-xl"></div>
-</div>
-<h3 class="utility-xs my-sm">Wrapped in ts-grid-col-4</h3>
-<div class="ts-grid-col-4">
-  <div class="bg-neutral-100 p-xl"></div>
-  <div class="bg-neutral-100 p-xl"></div>
-  <div class="bg-neutral-100 p-xl"></div>
-  <div class="bg-neutral-100 p-xl"></div>
-</div>
-<h3 class="utility-xs my-sm">Wrapped in ts-grid-col-6</h3>
-<div class="ts-grid-col-6">
-  <div class="bg-neutral-100 p-xl"></div>
-  <div class="bg-neutral-100 p-xl"></div>
-  <div class="bg-neutral-100 p-xl"></div>
-  <div class="bg-neutral-100 p-xl"></div>
-  <div class="bg-neutral-100 p-xl"></div>
-  <div class="bg-neutral-100 p-xl"></div>
-</div>
-<h3 class="utility-xs my-sm">Wrapped in ts-grid-7-5</h3>
-<div class="ts-grid-7-5">
-  <div class="bg-neutral-100 p-xl"></div>
-  <div class="bg-neutral-100 p-xl"></div>
-</div>
-<h3 class="utility-xs my-sm">Wrapped in ts-grid-9-3</h3>
-<div class="ts-grid-9-3">
-  <div class="bg-neutral-100 p-xl"></div>
-  <div class="bg-neutral-100 p-xl"></div>
-</div>
-<h3 class="utility-xs my-sm">Wrapped in ts-grid-center</h3>
-<div class="ts-grid-center">
-  <div class="bg-neutral-100 p-xl"></div>
-</div>
-