Development WIP (#151)

* Fix backdrop flashing on page load

* Fix all file names to be what the CSS expects to prevent 404s.

* Jump nav: Allow empty list.

* Fixing color contrast ratios

* Datefinder conditionals (#153)

* Conditionally include portions of datefinder.

* Adjust indentation.

* Test list element

* Updating tile component

* Card variant needs to be passed in order to work. (#160)

* Image rendering option needs to be in the image object. (#159)

* Fixing read more icon

* Fixing wrapping header and line heights for accordions

* Action list component (#161)

* Refactor link-button.

* Action list component.

* Fix code style.

Co-authored-by: Marcin Jędras <[email protected]>
Co-authored-by: Jacine Luisi <[email protected]>
Co-authored-by: zakiya <[email protected]>

source/_patterns/00-protons/_global.scss

@@ -461,3 +461,13 @@ $aspect-width: 16;
   align-items: center;
   justify-content: center;
 }
+
+// Reset grid-col() styles (use with CSS Grid).
+@mixin grid-col-reset() {
+  flex: unset;
+  margin-left: unset;
+  margin-right: unset;
+  padding-left: unset;
+  padding-right: unset;
+  width: unset;
+}

source/_patterns/00-protons/_uswds-theme-color.scss

@@ -127,7 +127,7 @@ General colors
 */
 
 // Links
-$theme-link-color: "blue-cool-40v";
+$theme-link-color: "blue-cool-50v";
 $theme-link-visited-color: "blue-cool-60v";
 $theme-link-hover-color: "cyan-40v";
-$theme-link-active-color: "blue-cool-30v";
+$theme-link-active-color: "blue-cool-40v";

source/_patterns/00-protons/_uswds-theme-utilities.scss

@@ -581,7 +581,7 @@ Values
 ----------------------------------------
 */
 
-$jcc-cyan: #0186d0;
+$jcc-cyan: #017cc1;
 
 // .add-aspect
 

source/_patterns/01-atoms/buttons/_buttons.scss

@@ -1,6 +1,10 @@
 .usa-button {
   @include u-padding-y(2);
   @include u-padding-x(3);
+
+  &:disabled {
+    @include u-text(gray-70);
+  }
 }
 
 .usa-button--big {
@@ -26,7 +30,7 @@
 
   &:active,
   &.usa-button--active {
-    @include u-text("white");
+    @include u-text(gray-90);
     background-color: color(accent-warm-darker);
   }
 }

source/_patterns/01-atoms/buttons/link-button.twig

@@ -2,9 +2,9 @@
 
 {% set classes = [
   'usa-button',
-  style ? 'usa-button--' ~ style : '',
+  'usa-button--' ~ link_button.style|default('primary'),
 ]|merge(classes|default([''])) %}
 
-<a {{attributes.addClass(classes) }} href="{{ url }}">
-  {{- text -}}
-</a>
+<a{{ attributes.addClass(classes) }} href="{{ link_button.url }}">
+  {{- link_button.text -}}
+</a>

source/_patterns/01-atoms/buttons/link-button.yml

@@ -1,3 +1,4 @@
-text: 'Click me!'
-url: "#"
-style: 'primary'
+link_button:
+  text: 'Click me!'
+  url: "#"
+  style: 'primary'

source/_patterns/01-atoms/image/image.twig

@@ -1,7 +1,9 @@
-{% if patternlab %}
+{% set renderer = image.renderer|default(patternlab) %}
+
+{% if renderer == 'patternlab' %}
   {% if image.src %}
     <img src="{{- image.src -}}"{% if image.alt %} alt="{{ image.alt }}"{% endif %} />
   {% endif %}
 {% else %}
   {{ image }}
-{% endif %}
+{% endif %}

source/_patterns/01-atoms/typography/_text.scss

@@ -61,19 +61,19 @@ video {
 }
 
 a {
-  @include u-text("blue-cool-40v");
+  @include u-text("blue-cool-50v");
 
   &:hover {
     @include u-text("cyan-40v");
   }
 
   &:active,
   &:focus {
-    @include u-text("blue-cool-30v");
+    @include u-text("blue-cool-40v");
   }
 
   &:visited {
-    @include u-text("blue-cool-40v");
+    @include u-text("blue-cool-50v");
   }
 }
 
@@ -151,3 +151,7 @@ a {
 .t-small {
   @include t-small();
 }
+
+.usa-hint {
+  @include u-text(gray-50);
+}

source/_patterns/02-molecules/blocks/action-list/_action-list.scss

@@ -0,0 +1,76 @@
+.jcc-action-list {
+  &,
+  .usa-prose > & {
+    @include add-list-reset;
+    @include u-border-top(1px);
+    @include u-border-top(base-light);
+
+    [class*="has-background-color--dark"] & {
+      @include u-border-top(secondary-dark);
+    }
+  }
+
+  @include at-media(tablet) {
+    @supports (display: grid) {
+      display: grid;
+      grid-template-columns: 1fr max-content;
+      grid-template-areas: "content button";
+    }
+  }
+
+  li {
+    @include u-margin-bottom(3);
+    @include at-media(tablet) {
+      @include grid-row;
+
+      @supports (display: grid) {
+        display: contents;
+      }
+    }
+  }
+}
+
+.jcc-action-list__content,
+.jcc-action-list__action {
+  @include u-width(full);
+  @include u-padding-top(3);
+}
+
+.jcc-action-list__content {
+  @include at-media(tablet) {
+    @include u-padding-bottom(3);
+    @include u-padding-right(1);
+    @include u-border-bottom(base-light);
+    @include u-border-bottom(1px);
+    @include grid-col(9);
+
+    [class*="has-background-color--dark"] & {
+      @include u-border-bottom(secondary-dark);
+    }
+
+    @supports (display: grid) {
+      @include grid-col-reset;
+      @include u-padding-right(1);
+      grid-column: content;
+    }
+  }
+}
+
+.jcc-action-list__action {
+  @include u-border-bottom(base-light);
+  @include u-border-bottom(1px);
+  @include u-padding-bottom(3);
+
+  [class*="has-background-color--dark"] & {
+    @include u-border-bottom(secondary-dark);
+  }
+
+  @include at-media(tablet) {
+    @include grid-col(3);
+
+    @supports (display: grid) {
+      @include grid-col-reset;
+      grid-column: button;
+    }
+  }
+}

source/_patterns/02-molecules/blocks/action-list/action-list.twig

@@ -0,0 +1,33 @@
+{% if action_list.items|length > 0 %}
+  <ul class="jcc-action-list"{% if id %} id="{{ id }}"{% endif %}>
+
+    {% for item in action_list.items %}
+      <li class="jcc-action-list__item">
+        <div class="jcc-action-list__content">
+          {% if item.title %}
+            <p><strong>{{ item.title }}</strong></p>
+          {% endif %}
+
+          {% if item.description %}
+            <p>{{ item.description }}</p>
+          {% endif %}
+        </div>
+
+        {% if item.button %}
+          <div class="jcc-action-list__action">
+
+            {# Use 'secondary' button style, unless explicitly provided. #}
+            {% set button = item.button|merge({
+              style: item.button.style|default('secondary')
+            }) %}
+
+            {% include "@atoms/buttons/link-button.twig" with {
+              link_button: button
+            } only %}
+          </div>
+        {% endif %}
+      </li>
+    {% endfor %}
+
+  </ul>
+{% endif %}

source/_patterns/02-molecules/blocks/action-list/action-list.yml

@@ -0,0 +1,18 @@
+action_list:
+  items:
+    - title: "First brief sentence describing the action"
+      description: "One to two sentences providing addition details about the action link."
+      button:
+        text: "Click 1"
+        url: "#"
+        style: 'primary'
+    - title: "Second brief sentence describing the action"
+      description: "One to two sentences providing addition details about the action link."
+      button:
+        text: "Click 2 longer"
+        url: "#"
+    - title: "Third brief sentence describing the action"
+      description: "One to two sentences providing addition details about the action link."
+      button:
+        text: "Click 3"
+        url: "#"