#61 renames styleguide-sections directory

views/organisms/styleguide_sections/_elements/color-all.twig → 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="

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>
+

views/organisms/styleguide_sections/_elements/spacing.twig → 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 = [

views/organisms/styleguide_sections/atoms/inputs.twig → 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>