Update Login.gov Design System to 9.0 (#523)

_articles/slack.md

@@ -35,7 +35,7 @@ These handles ping oncall engineers, use for emergencies or urgent items.
 - `@login-partnerships-team` Group to address Login.gov partnerships team members
 - `@login-ux-feds` Group to tag the Login.gov UX federal employees
 - `@login-ux-practice` Group to tag all of the Login.gov UX practitioners
-- `@login-ux-ops` Group to tag the Login.gov UX Operations team 
+- `@login-ux-ops` Group to tag the Login.gov UX Operations team
 - `@github-admins-login` members of this group can edit [`identity-core`](https://github.com/orgs/18F/teams/identity-core) GitHub team membership
 
 ### Sprint Team Handles
@@ -91,24 +91,24 @@ Here are some common Slack Channels for the Login.gov team
 #### Design/UX
 
 - [`#login-ux`](https://gsa-tts.slack.com/archives/CEUQ9FXNJ):
-  {% include tag.html name='design' color='bg-green' %}
+  {% include tag.html name='design' color='bg-success' %}
   Channel for the user experience design team (research, visual, content)
 
 - [`#login-public-site`](https://gsa-tts.slack.com/archives/CNZCW01PX)
   Discussion around the Login.gov marketing/brochure/public site
 
 - [`#login-design-system`](https://gsa-tts.slack.com/archives/C01JVKYE4KD)
-  {% include tag.html name='design' color='bg-green' %}
+  {% include tag.html name='design' color='bg-success' %}
   Discussion around the Login.gov design system
 
 - [`#login-accessibility-wg`](https://gsa-tts.slack.com/archives/C01C89LM6UF)
-  {% include tag.html name='design' color='bg-green' %}
+  {% include tag.html name='design' color='bg-success' %}
   Accessibility working group
 
 #### Engineering/AppDev
 
 - [`#login-appdev`](https://gsa-tts.slack.com/archives/C0NGESUN5):
-  {% include tag.html name='appdev' color='bg-blue' %}
+  {% include tag.html name='appdev' color='bg-primary' %}
   General IDP and Appdev matters
 
 - [`#login-reporting`](https://gsa-tts.slack.com/archives/C5E7EJWF7):
@@ -117,7 +117,7 @@ Here are some common Slack Channels for the Login.gov team
 #### Engineering/DevOps
 
 - [`#login-devops`](https://gsa-tts.slack.com/archives/C16RSBG49):
-  {% include tag.html name='devops' color='bg-green' %}
+  {% include tag.html name='devops' color='bg-success' %}
   Platform and tools channel
 
 - [`#login-new-env-setup`](https://gsa-tts.slack.com/archives/CMW9H0RFX):
@@ -181,7 +181,7 @@ see data/sprint_teams.yml for the data
   Discussion and coordination around professional development, attending conferences, etc.
 
 - [`#login-situation`](https://gsa-tts.slack.com/archives/C5QUGUANN):
-  {% include tag.html name='devops' color='bg-green' %}
+  {% include tag.html name='devops' color='bg-success' %}
   Incident response coordination channel
 
 - [`#login-random`](https://gsa-tts.slack.com/archives/CNMN7K2MA):

_config.yml

@@ -17,8 +17,12 @@ sass:
   load_paths:
     - node_modules
 
-copy_to_destination:
-  - node_modules/@18f/identity-design-system/dist/assets
+copy_files:
+  - from:
+      - node_modules/@18f/identity-design-system/dist/assets/css
+      - node_modules/@18f/identity-design-system/dist/assets/fonts
+      - node_modules/@18f/identity-design-system/dist/assets/img
+    to: assets
 
 keep_files:
   - assets/js

_includes/tag.html

@@ -3,4 +3,4 @@
 include:
 - name: the name of the tag (required)
 - color: color of the tag, defaults to red (optional)
-{% endcomment %}<span class="usa-tag {{ include.color | default: 'bg-red' }} float-right" data-filter="{{ include.name }}">{{ include.name }}</span>
+{% endcomment %}<span class="usa-tag {{ include.color | default: 'bg-error' }} float-right" data-filter="{{ include.name }}">{{ include.name }}</span>

_layouts/default.html

@@ -50,10 +50,10 @@
     <footer class="usa-footer usa-footer--slim" role="contentinfo">
       <div class="grid-container usa-footer__return-to-top">
         <div class="grid-row flex-align-center">
-          <div class="grid-col flex-1">
+          <div class="grid-col grid-col-auto">
             <a href="#">Return to top</a>
           </div>
-          <div class="grid-col flex-auto">
+          <div class="grid-col grid-col-fill text-right">
             This page was last modified on {{ page.last_modified_at | date: '%b %e, %Y' }}
             <a href="{{ site.github_repo_url }}/edit/main/{{ page.path }}" class="usa-button usa-button--outline">Edit this page</a>
           </div>

_plugins/copy_files.rb

@@ -0,0 +1,17 @@
+## This plugin copies files configured in the site configuration from a source
+## directory to the built site output
+
+Jekyll::Hooks.register :site, :post_write do |site|
+  configurations = site.config['copy_files']
+  next if configurations.nil?
+  configurations = [configurations] unless configurations.is_a?(Array)
+  configurations.each do |config|
+    from_entries = [*config['from']]
+    to_folder = File.join(site.config['destination'], config['to'])
+    FileUtils.mkdir_p(to_folder)
+    from_entries.each do |from_entry|
+      basename = File.basename(from_entry)
+      FileUtils.copy_entry(from_entry, File.join(to_folder, basename))
+    end
+  end
+end