feat: nav component (#12)

* feat(ECEP-114): nav component

tested in TACC/Core-CMS#464

* fix(ECEP-114): nav should go mobile at wider width

* fix(ECEP-114): larger nav link click area

* fix(ECEP-114): larger no list nav link click area

* fix(ECEP-114): remove whitespace between nav links

* fix(ECEP-114): indenting, wrapping, spacing

* refactor(ECEP-114): rename indent variables

source/_imports/components/c-nav.css

@@ -0,0 +1,163 @@
+/*
+Nav
+
+Navigation links that flows inline on narrow screens.
+
+To enforce appropriate semantic HTML, a `<nav>` is required.
+
+For list-like navigation, use `<ul>` or `<ol>` (with children `<li>`). Inside this kind of nav, markup whitespace is __not__ rendered.
+
+To support a navigation not as a list and with direct `<a>` children, add class `c-nav--no-list`. Inside this kind of nav, markup whitespace __is__ rendered.﹡
+
+﹡ To remove whitespace with CSS would break or complicate font-size cascade.
+- c-nav--boxed - Surrounded by a box
+
+Markup: c-nav.html
+
+Styleguide Components.Nav
+*/
+@import url("_imports/tools/media-queries.css");
+
+
+
+
+
+/* Block */
+
+nav.c-nav {
+  --link-padding: 0.5em;
+}
+
+
+
+
+
+/* Modifiers */
+
+
+
+/* Modifiers: Boxed */
+
+nav.c-nav--boxed {
+  --indent-small: calc(var(--global-space--list-indent) / 4);
+  --indent-medium: calc(var(--global-space--list-indent) / 2);
+  --indent-large: var(--global-space--list-indent);
+
+  width: fit-content;
+
+  border: var(--global-border--normal);
+}
+
+/* any list */
+nav.c-nav--boxed :is(ul,ol) {
+  margin: 0;
+}
+
+/* Modifiers: Boxed: Padding */
+
+/* unordered list */
+nav.c-nav--boxed ul {
+  list-style-type: none; /* to remove bullets (must then reduce padding left) */
+  padding-left: var(--indent-medium);
+  padding-right: var(--indent-large);
+}
+
+/* wide screen */
+@media (--medium-and-above) {
+  nav.c-nav--boxed {
+    /* Normal vertical padding */
+    padding-block: var(--indent-medium);
+  }
+
+  nav.c-nav--boxed ol {
+    /* We retain bullets, which (wide screen) need large padding (so keep it) */
+    padding-left: var(--indent-large);
+    padding-right: calc( var(--indent-large) - var(--link-padding) );
+  }
+}
+
+/* narrow screen */
+@media (--medium-and-below) {
+  nav.c-nav--boxed {
+    /* Reduced vertical padding because of narrow screen link line-height */
+    padding-block: var(--indent-small);
+  }
+
+  nav.c-nav--boxed ol {
+    /* We retain bullets, which (narrow screen) don't need large padding left */
+    padding-left: calc( var(--indent-medium) - var(--link-padding) );
+    padding-right: calc( var(--indent-large) - var(--link-padding) );
+  }
+}
+
+/* no list */
+nav.c-nav--boxed.c-nav--no-list {
+  /* Has no bullets, thus smaller padding left */
+  padding-left: var(--indent-medium);
+  padding-right: var(--indent-large);
+}
+
+
+
+/* Modifiers: No List */
+
+/* This is not a true modifier. It is required to support certain markup. */
+/* SEE: stylesheet docblock, "no list" comments, `...--no-list` selectors */
+
+
+
+
+
+/* Elements */
+
+
+
+nav.c-nav {
+  --space-between-inline-items: 0.5em;
+}
+nav.c-nav a {
+  display: inline-block; /* to let line-height define clickable area */
+  padding-inline: var(--link-padding);
+}
+
+/* no list */
+nav.c-nav--no-list {
+  display: flex; /* to remove whitespace between items */
+  flex-wrap: wrap;
+}
+nav.c-nav--no-list > a {
+  /* To space items via margin (use `-right` to not increase left indent) */
+  margin-right: var(--space-between-inline-items);
+}
+
+
+
+/* Elements: Narrow Screen */
+
+@media (--medium-and-below) {
+
+  nav.c-nav a {
+    line-height: 2.5;
+  }
+
+  /* any list */
+  nav.c-nav :is(ul,ol) {
+    display: flex;
+    flex-wrap: wrap;
+
+    /* To prevent overlap of any lists' decorators (when items are inline) */
+    list-style-position: inside;
+  }
+  nav.c-nav :is(ul,ol):not(.c-nav--boxed :is(ul,ol)) {
+    /* To remove padding because list decorators are `...position: inside` */
+    padding-left: unset;
+  }
+  nav.c-nav :is(ul,ol) li {
+    /* To space items via margin (use `-right` to not increase left indent) */
+    margin-right: var(--space-between-inline-items);
+  }
+
+  /* unordered list */
+  nav.c-nav ul { list-style-type: none; }
+
+}

source/_imports/components/c-nav.html

@@ -0,0 +1,45 @@
+{# The {{ html }} allows DjangoCMS Snippet to pass in class names #}
+
+<h3>Unordered List</h3>
+<nav class="c-nav {{modifier_class}} {{ html }}">
+  <ul>
+    <li><a href="#alabama">Alabama</a></li>
+    <li><a href="#alaska">Alaska</a></li>
+    <li><a href="#arizona">Arizona</a></li>
+    <li><a href="#arkansas">Arkansas</a></li>
+    <li><a href="#california">California</a></li>
+    <li><a href="#colorado">Colorado</a></li>
+    <li><a href="#connecticut">Connecticut</a></li>
+    <li><a href="#deleware">Delware</a></li>
+    <li><a href="#florida">Florida</a></li>
+  </ul>
+</nav>
+
+<h3>Ordered List</h3>
+<nav class="c-nav {{modifier_class}} {{ html }}">
+  <ol>
+    <li><a href="#alabama">Alabama</a></li>
+    <li><a href="#alaska">Alaska</a></li>
+    <li><a href="#arizona">Arizona</a></li>
+    <li><a href="#arkansas">Arkansas</a></li>
+    <li><a href="#california">California</a></li>
+    <li><a href="#colorado">Colorado</a></li>
+    <li><a href="#connecticut">Connecticut</a></li>
+    <li><a href="#deleware">Delware</a></li>
+    <li><a href="#florida">Florida</a></li>
+  </ol>
+</nav>
+
+<h3>No List</h3>
+<p>(requires <code>c-nav--no-list</code>)</p>
+<nav class="c-nav c-nav--no-list {{modifier_class}} {{ html }}">
+  <a href="#alabama">Alabama</a>
+  <a href="#alaska">Alaska</a>
+  <a href="#arizona">Arizona</a>
+  <a href="#arkansas">Arkansas</a>
+  <a href="#california">California</a>
+  <a href="#colorado">Colorado</a>
+  <a href="#connecticut">Connecticut</a>
+  <a href="#deleware">Delware</a>
+  <a href="#florida">Florida</a>
+</nav>