Implement new layout + grid breakpoints (#52)

* enable gap + column tailwind plugins * add 96px spacing step * [breaking] change "lg" breakpoint to "md"; add "xl" * add gap, grid, and margin (w/"gutter-auto") to tw theme * add grid.css, .responsive-grid + .responsive-container * fix title of fullscreen example link * stub out responsive grid + container examples * add back m*-auto * add "1/1" width and reorder keys * add breakpoints to "width" utilities (w-lg, etc.) * add h*-auto * add support for wrapper_class="..." in code blocks; nix margin on responsive-container example * delete hidden node dump comment from example template * better whitespace in spacing examples * delete empty "Position" heading from spacing docs * simplify theme.js, add more gridColumns and gridTemplateColumns entries * fix up .responsive-container margins * nix mx-gutter-auto utility * enable gridRow + gridTemplateRows in Tailwind * add theme specs for gridRow + gridTemplateRows * Update src/theme.js * add deprecate comments to bad spacing values * add todo column for line heights in spacing scale * nix unnecessary lg:grid-cols-12 in .responsive-grid * add width tokens, use in maxWidth + width theme * BREAKING CHANGE: update breakpoints The new breakpoints are intended to allow for layout adjustments at common viewport widths. * fix(typography): add .title-sm/-xs defaults * chore(dev): watch assets in "develop" script * Revert "[breaking] change "lg" breakpoint to "md"; add "xl"" This reverts commit cbd778f. * feat: add new "md" breakpoint (420px) * bring in modal dialog element for mobile nav * add z-index utilities * import dialog modal * add base grid utilities * add column utilities and displays for responsive layout * implement dialog modal for mobile nav * remove default marker styles * change colors, move implementations out * nav implementation, add responsive features * decouple header from nav, temporarily hide pkg info on lg * change link colors * refactor for grid/responsive utilities * add margin above footer * refine classes and remove repo links * create separate component for repo links * remove grid utilities from <body> * apply margin only on lg screens * Revert "BREAKING CHANGE: update breakpoints" This reverts commit 1cb2758. * move dialog package to devDependencies * change to flex header for consistent spacing * fix(grid): change .responsive-container max-width The max-w-lg class is preventing the responsive container from reaching its full (xl) width. It should be max-w-xl. * docs(grid): add figma link, row-span utils * inherit some babel changes * add pointerEvents and opacity utilities * add grid overlay functionality * install hotkey * rename script * remove lint-js for now * another fix * fix(grid): change .responsive-container max-width The max-w-lg class is preventing the responsive container from reaching its full (xl) width. It should be max-w-xl. * update package.json * fix(grid): refactor overlay * fix(grid): remove unused variable * fix(color): add red token for grid overlay * fix(accessibility): add aria-labels and roles * fix(deps): npm audit fix * chore: fix up dangling comment Co-authored-by: Shawn Allen <[email protected]>
SFDigitalServices · May 2, 2022 · 615a49a · 615a49a
1 parent 2f68fea
commit 615a49a
Show file tree

Hide file tree

Showing 6 changed files with 96 additions and 105 deletions.
diff --git a/docs/_includes/base.njk b/docs/_includes/base.njk
@@ -2,14 +2,19 @@
 layout: skeleton
 ---
 
-{% from 'macros.njk' import nav_link with context %}
-{% set nav %}{% include 'nav.njk' %}{% endset %}
+{% from 'nav.njk' import nav_link with context %}
+{% set nav %}
+  {{ nav_link('/', false) }}
+  {{ nav_link('/foundations') }}
+  {{ nav_link('/components') }}
+  {{ nav_link('/usage') }}
+{% endset %}
 
 {% set toc = content | toc %}
 
 <div class="bg-grey-1">
-  <div class="responsive-container flex flex-wrap justify-between py-8">
-    <details class="details-reset">
+  <div class="responsive-container flex justify-between py-8">
+    <details>
       <summary
         data-hotkey="Control+g"
         aria-label="press Control+g to enable the grid overlay"
@@ -18,12 +23,12 @@ layout: skeleton
       <div class="z-50 pointer-events-none responsive-container fixed h-full top-0 left-0 right-0 opacity-10">
         <div class="responsive-grid grid md:hidden h-full">
           {% for i in range(0, 6) %}
-            <div style="background-color: #FF0000"></div>
+            <div class="bg-red-grid"></div>
           {% endfor %}
         </div>
         <div class="responsive-grid hidden md:grid h-full">
           {% for i in range(0, 12) %}
-            <div style="background-color: #FF0000"></div>
+            <div class="bg-red-grid"></div>
           {% endfor %}
         </div>
       </div>
@@ -34,40 +39,39 @@ layout: skeleton
   </div>
 </div>
 
+<div class="responsive-container flex lg:hidden mt-60 mb-28 items-center">
+  <details>
+    <summary role="navigation" aria-label="open navigation menu">
+      <sfgov-icon class="pr-20" symbol="menu" role="img" aria-label="hamburger menu"></sfgov-icon>
+    </summary>
+    <details-dialog class="top-0 left-0 w-full h-full fixed p-20 bg-grey-1 z-50 max-w-sm">
+      <sfgov-icon class="py-20 block mt-96 ml-8" symbol="close" role="img" aria-label="x" data-close-dialog></sfgov-icon>
+      {{ nav | safe }}
+    </details-dialog>
+  </details>
+
+  <header>
+    {% include 'header.njk' %}
+  </header>
+</div>
 
 {% block main %}
-  <div class="responsive-grid responsive-container gap-y-0">
-    <div class="col-span-full lg:col-span-3 flex items-center mt-60 mb-28 lg:m-0">
-      <details class="details-reset lg:hidden">
-        <summary class="cursor-pointer">
-          <sfgov-icon class="pr-20" symbol="menu"></sfgov-icon>
-        </summary>
-        <details-dialog class="top-0 left-0 w-full h-full fixed p-20 bg-grey-1 z-50 max-w-sm"
-          role="navigation"
-          aria-label="navigation menu"
-        >
-          <button class="block mt-96 py-20 border-0 bg-grey-1" aria-label="close navigation menu" data-close-dialog>
-            <sfgov-icon symbol="close"></sfgov-icon>
-          </button>
-          {{ nav | safe }}
-        </details-dialog>
-      </details>
-      <div>{% include 'header.njk' %}</div>
+  <div class="responsive-grid responsive-container grid-rows-2">
+    <div class="hidden lg:block lg:row-span-full lg:col-span-3">
+      {% include 'header.njk' %}
+      {{ nav | safe }}
     </div>
-    <div class="col-span-full lg:col-span-9 row-span-1 lg:mt-48">
+    <div class="col-span-full lg:col-span-9 lg:mt-48">
       {% include 'title.njk' %}
     </div>
-    <div class="hidden lg:block lg:row-span-2 lg:col-span-3">
-      {{ nav | safe }}
-    </div>
-    <div class="col-span-full lg:col-span-9 lg:row-span-2 {% if toc %} xl:col-span-6 {% endif %}">
+    <div class="col-span-full lg:col-span-9 {% if toc %} xl:col-span-6 {% endif %}">
       {% block content %}
         {% include 'main.njk' %}
       {% endblock %}
       {% include 'source-meta.njk' %}
     </div>
     {% if toc %}
-      <div class="hidden xl:block xl:col-span-3 xl:row-span-2">
+      <div class="hidden xl:block xl:col-span-3">
         {% include 'toc.njk' %}
       </div>
     {% endif %}

diff --git a/docs/_includes/header.njk b/docs/_includes/header.njk
@@ -1,33 +1,11 @@
-<header>
-  <div class="px-20 max-w-xl mx-auto py-20 lg:py-48">
-    <div class="flex items-center justify-between">
-      <a class="flex items-center no-underline" href="/">
-        <img
-          alt="City &amp; County of San Francisco"
-          class="block"
-          height="60"
-          src="https://sf.gov/themes/custom/sfgovpl/logo.svg">
-        <div class="pl-16">
-          <div class="title-sm text-slate mt-2">{{ site.title }}</div>
-        </div>
-      </a>
-      <div class="flex items-center">
-        <div>
-          <a
-            href="{{ '/' | published_url(package.version) }}"
-            class="text-slate-light font-mono no-underline"
-          >{{ package.name }}@{{ package.version }}</a>
-
-          <a
-            class="text-slate-light font-medium no-underline ml-24"
-            href="{{ '' | repo_url }}"
-          >
-            <svg style="fill: currentColor;" class="align-middle inline-block mr-2 mb-4" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg>
-            GitHub
-          </a>
-        </div>
-        {# % include 'search.njk' % #}
-      </div>
+<div class="max-w-xl mx-auto py-20 lg:py-48">
+  <a class="flex items-center no-underline" href="/">
+    <img
+      alt="City &amp; County of San Francisco"
+      class="block h-48 w-48"
+      src="https://sf.gov/themes/custom/sfgovpl/logo.svg">
+    <div class="pl-16">
+      <div class="title-xs text-slate mt-2">{{ site.title }}</div>
     </div>
   </a>
 </div>
diff --git a/docs/_includes/nav.njk b/docs/_includes/nav.njk
@@ -1,5 +1,45 @@
-{{ nav_link('/', false) }}
-{{ nav_link('/foundations') }}
-{{ nav_link('/components') }}
-{{ nav_link('/resources') }}
-{{ nav_link('/usage') }}
+{% macro nav_link(url, deep=true) %}
+  {% set node = url | node(collections.all) %}
+  {% set children = node.data.page | children(collections.all) %}
+  <div class="mb-20">
+    <a
+      class="flex justify-center title-xs no-underline mb-20"
+      href="{{ url }}"
+      {% if node.data.page.url === page.url %}
+        aria-current="page"
+      {% endif %}
+    >
+      <div class="flex-auto">{{ node.data.title }}</div>
+      <div>
+        {% if deep and children.length %}
+          <sfgov-icon symbol="chevron-down" role="img" aria-label="arrow pointing down"></sfgov-icon>
+        {% endif %}
+      </div>
+    </a>
+    {% if deep %}
+      {% if url === '/' %}
+        {% set parent_active = page.url === url %}
+      {% else %}
+        {% set parent_active = page.url.startsWith(url) %}
+      {% endif %}
+      {% if parent_active %}
+        <ul class="m-0 p-0 list-none">
+          {% for child in children %}
+            {% set child_active = child.url === page.url %}
+            <li class="pl-16 m-0 mb-20 {{ 'bg-slate-2 rounded-4' if child_active }}">
+              <a
+                href="{{ child.url }}"
+                {% if child_active %}
+                  aria-current="page"
+                {% endif %}
+                class="block no-underline {{ 'text-white' if child_active else 'text-slate-4' }}"
+              >
+                {{ child.data.title }}
+              </a>
+            </li>
+          {% endfor %}
+        </ul>
+      {% endif %}
+    {% endif %}
+  </div>
+{% endmacro %}
diff --git a/docs/resources/icon-library.md b/docs/resources/icon-library.md
diff --git a/src/css/base.css b/src/css/base.css
@@ -11,7 +11,7 @@
   }
 
   a {
-    @apply text-action;
+    @apply text-slate-3;
   }
 
   :focus,
@@ -23,4 +23,12 @@
   ::placeholder {
     @apply text-slate-light;
   }
+
+  summary {
+    list-style: none;
+
+    &::marker {
+      display: none;
+    }
+  }
 }
diff --git a/src/tokens/colors.js b/src/tokens/colors.js
@@ -88,6 +88,7 @@ module.exports = {
     1: '#E9F7EC'
   },
   red: {
+    grid: '#FF0000',
     4: '#BC4427',
     3: '#C9563A',
     2: '#EFCABB',