[3] USWDS Design System

.gitignore

@@ -34,3 +34,10 @@
 
 # Ignore master key for decrypting credentials and more.
 /config/master.key
+
+node_modules
+
+/app/assets/builds/*
+!/app/assets/builds/.keep
+
+/node_modules

.tool-versions

@@ -0,0 +1 @@
+ruby 3.2.2

Gemfile

@@ -65,3 +65,8 @@ group :test do
   gem "capybara"
   gem "selenium-webdriver"
 end
+
+gem "cssbundling-rails", "~> 1.4"
+
+# Use Sass to process CSS
+gem "sassc-rails"

Gemfile.lock

@@ -95,12 +95,17 @@ GEM
     concurrent-ruby (1.3.3)
     connection_pool (2.4.1)
     crass (1.0.6)
+    cssbundling-rails (1.4.0)
+      railties (>= 6.0.0)
     date (3.3.4)
     debug (1.9.2)
       irb (~> 1.10)
       reline (>= 0.3.8)
     drb (2.2.1)
     erubi (1.13.0)
+    ffi (1.17.0-aarch64-linux-gnu)
+    ffi (1.17.0-arm64-darwin)
+    ffi (1.17.0-x86_64-linux-gnu)
     globalid (1.2.1)
       activesupport (>= 6.1)
     i18n (1.14.5)
@@ -198,6 +203,14 @@ GEM
     rexml (3.3.0)
       strscan
     rubyzip (2.3.2)
+    sassc (2.4.0)
+      ffi (~> 1.9)
+    sassc-rails (2.1.2)
+      railties (>= 4.0.0)
+      sassc (>= 2.0)
+      sprockets (> 3.0)
+      sprockets-rails
+      tilt
     selenium-webdriver (4.21.1)
       base64 (~> 0.2)
       rexml (~> 3.2, >= 3.2.5)
@@ -218,6 +231,7 @@ GEM
     stringio (3.1.1)
     strscan (3.1.0)
     thor (1.3.1)
+    tilt (2.3.0)
     timeout (0.4.1)
     turbo-rails (2.0.5)
       actionpack (>= 6.0.0)
@@ -241,17 +255,20 @@ GEM
 
 PLATFORMS
   aarch64-linux
+  arm64-darwin-21
   arm64-darwin-22
   x86_64-linux
 
 DEPENDENCIES
   bootsnap
   capybara
+  cssbundling-rails (~> 1.4)
   debug
   importmap-rails
   jbuilder
   puma (>= 5.0)
   rails (~> 7.1.3, >= 7.1.3.4)
+  sassc-rails
   selenium-webdriver
   sprockets-rails
   sqlite3 (~> 1.4)

Procfile.dev

@@ -0,0 +1,2 @@
+web: env RUBY_DEBUG_OPEN=true bin/rails server
+css: yarn build:css --watch

app/assets/config/manifest.js

@@ -1,2 +1,9 @@
 //= link_tree ../images
+//= link_tree ../builds
+//= link_tree ../uswds
+
 //= link_directory ../stylesheets .css
+//= link application.sass.scss
+//= link application.css
+//= link application.js
+//= link_tree ../../javascript .js

app/assets/stylesheets/application.css

@@ -13,3 +13,4 @@
  *= require_tree .
  *= require_self
  */
+

app/assets/stylesheets/application.sass.scss

@@ -0,0 +1,13 @@
+// @use "uswds-core" as *;
+@use "uswds-core" with (
+  $theme-font-path: "../sploing",
+  $theme-image-path: "../spling",
+);
+
+// Entry point for your Sass build
+//  1. Load your project's USWDS settings configuration
+@forward "../app/assets/uswds/_uswds-theme.scss";
+
+
+// // 2. Load USWDS source code
+@forward "../node_modules/@uswds/uswds/packages/uswds/_index.scss";

app/assets/uswds/_uswds-theme-custom-styles.scss

@@ -0,0 +1,23 @@
+/*
+* * * * * ==============================
+* * * * * ==============================
+* * * * * ==============================
+* * * * * ==============================
+========================================
+========================================
+========================================
+----------------------------------------
+USWDS THEME CUSTOM STYLES
+----------------------------------------
+!! Copy this file to your project's
+   sass root. Don't edit the version
+   in node_modules.
+----------------------------------------
+Custom project SASS goes here.
+
+i.e.
+@include u-padding-right('05');
+----------------------------------------
+*/
+
+@use "uswds-core" as *;

app/assets/uswds/_uswds-theme.scss

@@ -0,0 +1,15 @@
+/*
+----------------------------------------
+USWDS with settings overrides
+----------------------------------------
+Uncomment the following lines and add a list of changed settings
+in the form $setting: value,
+----------------------------------------
+*/
+
+//
+// @use "uswds-core" with (
+//   $theme-font-path: "../fonts",
+//   $theme-image-path: "../img",
+// );
+//

app/assets/uswds/styles.scss

@@ -0,0 +1,3 @@
+@forward "uswds-theme";
+@forward "uswds";
+@forward "uswds-theme-custom-styles";

app/controllers/sandbox_controller.rb

@@ -0,0 +1,4 @@
+class SandboxController < ApplicationController
+    def index
+    end    
+end

app/javascript/application.js

@@ -0,0 +1,3 @@
+console.log("tweet")
+// import "uswds/uswds-init"
+// import "./uswds/uswds"

app/javascript/uswds/uswds-init.js

@@ -0,0 +1,24 @@
+/* eslint-disable no-var */
+(function uswdsInit() {
+  "use strict";
+
+  var loadingClass = "usa-js-loading";
+  var fallback;
+
+  document.documentElement.classList.add(loadingClass);
+  function revertClass() {
+    document.documentElement.classList.remove(loadingClass);
+  }
+
+  fallback = setTimeout(revertClass, 8000);
+
+  function verifyLoaded() {
+    if (window.uswdsPresent) {
+      clearTimeout(fallback);
+      revertClass();
+      window.removeEventListener("load", verifyLoaded, true);
+    }
+  }
+
+  window.addEventListener("load", verifyLoaded, true);
+})();