cfpb · anselmbradford · Aug 8, 2024 · Jul 26, 2024 · Aug 7, 2024 · Aug 7, 2024
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -219,16 +219,16 @@ and one that does not require media query support.
 Instructions for developers who've received a new or updated icon from a designer:
 
 1. Place SVG file (named with its canonical name, i.e., `canonical.svg`)
-   in [`packages/cfpb-icons/src/icons`](tree/main/packages/cfpb-icons/src/icons/)
+   in [`packages/cfpb-design-system/src/components/cfpb-icons/icons`](tree/main/packages/cfpb-design-system/src/components/cfpb-icons/icons/)
 1. If it has a `-round` or `-square` version, ensure those are in place as well
 1. Run `yarn process-icon-svgs` from the root of the repository
    - This script compresses and standardizes the SVG code for all of our icons
    - It should be a no-op for icons that have not changed
 1. From the repo root, copy the icons into the docs site with `yarn copy-assets'
 
 1. If adding a new icon or updating any names, update the tables on both
-   [`packages/cfpb-icons/usage.md`](tree/main/packages/cfpb-icons/usage.md)
+   [`packages/cfpb-design-system/src/components/cfpb-icons/usage.md`](tree/main/packages/cfpb-design-system/src/components/cfpb-icons/usage.md)
    and [`docs/pages/iconography.md`](tree/main/docs/pages/iconography.md)
    accordingly
 1. If any icons were deleted, be sure to delete them from both
-   `packages/cfpb-icons/src/icons/` and `docs/_includes/icons/`
+   `packages/cfpb-design-system/src/components/cfpb-icons/icons/` and `docs/_includes/icons/`
diff --git a/docs/_includes/search-scripts.html b/docs/_includes/search-scripts.html
@@ -63,4 +63,4 @@
     ];
 })();
 </script>
-<script src="{{ site.baseurl }}/dist/js/search.js"></script>
+<script src="{{ site.baseurl }}/dist/search.js"></script>
diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html
@@ -11,7 +11,7 @@
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="stylesheet" href="{{ "/dist/css/main.css" | relative_url }}">
+  <link rel="stylesheet" href="{{ "/dist/main.css" | relative_url }}">
   <script>
       // Confirm availability of JS and remove no-js class from html
       var docElement = document.documentElement;
@@ -35,7 +35,7 @@
   {% if page.url != 'search/index' and page.url != '/index' %}
   {% include footer.html %}
   {% endif %}
-  <script src="{{ "/dist/js/main.js" | relative_url }}" charset="utf-8"></script>
+  <script src="{{ "/dist/main.js" | relative_url }}" charset="utf-8"></script>
 
   {% if page.is_interstitial %}
   <script>
@@ -55,7 +55,7 @@
       {%- endif -%}
     {%- endfor -%}
   </script>
-  <script src="{{ "/dist/js/interstitial.js" | relative_url }}" charset="utf-8"></script>
+  <script src="{{ "/dist/interstitial.js" | relative_url }}" charset="utf-8"></script>
   {% endif %}
 
 </body>

diff --git a/docs/admin/index.html b/docs/admin/index.html
@@ -26,7 +26,7 @@
   </head>
   <body>
     <!-- Include the script that builds the page and powers Netlify CMS -->
-    <script src="../dist/js/admin/netlify-cms.js"></script>
+    <script src="../dist/admin/netlify-cms.js"></script>
     <!-- Google Tag Manager code -->
     <iframe
       src="https://www.googletagmanager.com/ns.html?id=GTM-WH4L8LB"

diff --git a/docs/assets/css/color-swatches.scss b/docs/assets/css/color-swatches.scss
@@ -1,5 +1,5 @@
 @use 'sass:math';
-@import '@cfpb/cfpb-core/src/vars';
+@use '@cfpb/cfpb-design-system/src/abstracts' as *;
 
 /* Color swatches for Identity/Color page
    ========================================================================== */

diff --git a/docs/assets/css/global-eyebrow.scss b/docs/assets/css/global-eyebrow.scss
@@ -1,6 +1,5 @@
 @use 'sass:math';
-@import '@cfpb/cfpb-core/src/vars';
-@import '@cfpb/cfpb-grid/src/cfpb-grid';
+@use '@cfpb/cfpb-design-system/src/abstracts' as *;
 
 // Taken from global-eyebrow.scss in cfgov.
 .m-global-eyebrow {

diff --git a/docs/assets/css/grid-demo.scss b/docs/assets/css/grid-demo.scss
@@ -1,4 +1,5 @@
 @use 'sass:math';
+@use '@cfpb/cfpb-design-system/src/abstracts' as *;
 
 /* ==========================================================================
    Grid Demo

diff --git a/docs/assets/css/header.scss b/docs/assets/css/header.scss
@@ -1,4 +1,5 @@
 @use 'sass:math';
+@use '@cfpb/cfpb-design-system/src/abstracts' as *;
 
 /* ==========================================================================
    Header

diff --git a/docs/assets/css/layout.scss b/docs/assets/css/layout.scss
@@ -1,5 +1,6 @@
-// Taken from enhancements/layout.scss in cfgov-refresh
+@use '@cfpb/cfpb-design-system/src/abstracts' as *;
 
+// Taken from enhancements/layout.scss in cfgov-refresh
 .wrapper--match-content {
   // Tablet and above.
   @include respond-to-min($bp-sm-min) {

diff --git a/docs/assets/css/main-content.scss b/docs/assets/css/main-content.scss
@@ -1,4 +1,6 @@
 @use 'sass:math';
+@use '@cfpb/cfpb-design-system/src/abstracts' as *;
+@use '@cfpb/cfpb-design-system/src/utilities' as *;
 
 /* ==========================================================================
    Main content

diff --git a/docs/assets/css/main.scss b/docs/assets/css/main.scss
@@ -2,40 +2,31 @@
    Design System
    ========================================================================== */
 
-// Webfont variables
-// This is the path for self-hosted fonts.
-$cf-fonts-path: '/design-system/fonts';
-
 // Import Design System packages.
-@import '@cfpb/cfpb-atomic-component/src/cfpb-atomic-component';
-@import '@cfpb/cfpb-core/src/cfpb-core';
-@import '@cfpb/cfpb-grid/src/cfpb-grid';
-@import '@cfpb/cfpb-icons/src/cfpb-icons';
-@import '@cfpb/cfpb-typography/src/cfpb-typography';
-@import '@cfpb/cfpb-layout/src/cfpb-layout';
-@import '@cfpb/cfpb-buttons/src/cfpb-buttons';
-@import '@cfpb/cfpb-forms/src/cfpb-forms';
-@import '@cfpb/cfpb-notifications/src/cfpb-notifications';
-@import '@cfpb/cfpb-pagination/src/cfpb-pagination';
-@import '@cfpb/cfpb-expandables/src/cfpb-expandables';
-@import '@cfpb/cfpb-tables/src/cfpb-tables';
+@use '@cfpb/cfpb-design-system/src/abstracts' as *;
+@use '@cfpb/cfpb-design-system/src/base' as *;
+@use '@cfpb/cfpb-design-system/dist/index.css' as *;
 
 // Custom modules.
-@import 'sidebar';
-@import 'footer';
-@import 'skip-nav';
-@import 'global-eyebrow';
-@import 'layout';
-@import 'header';
-@import 'main-content';
-@import 'code';
-@import 'grid-demo';
-@import 'netlify';
-@import 'tabs';
-@import 'toggle-code-button';
-@import 'variation';
-@import 'color-swatches';
-@import 'search';
+@use 'sidebar' as *;
+@use 'footer' as *;
+@use 'skip-nav' as *;
+@use 'global-eyebrow' as *;
+@use 'layout' as *;
+@use 'header' as *;
+@use 'main-content' as *;
+@use 'code' as *;
+@use 'grid-demo' as *;
+@use 'netlify' as *;
+@use 'tabs' as *;
+@use 'toggle-code-button' as *;
+@use 'variation' as *;
+@use 'color-swatches' as *;
+@use 'search' as *;
+
+// Webfont
+// This is the path for self-hosted fonts.
+@include licensed-font('/design-system/fonts');
 
 // Documentation specific stlyes
 html,

diff --git a/docs/assets/css/netlify.scss b/docs/assets/css/netlify.scss
@@ -1,3 +1,5 @@
+@use '@cfpb/cfpb-design-system/src/abstracts' as *;
+
 .o-editor {
   position: fixed;
   bottom: 60px;

diff --git a/docs/assets/css/sidebar.scss b/docs/assets/css/sidebar.scss
@@ -1,3 +1,5 @@
+@use '@cfpb/cfpb-design-system/src/abstracts' as *;
+
 .ds-nav a {
   border-bottom-color: transparent;
 

diff --git a/docs/assets/css/skip-nav.scss b/docs/assets/css/skip-nav.scss
@@ -1,4 +1,6 @@
 @use 'sass:math';
+@use '@cfpb/cfpb-design-system/src/abstracts' as *;
+@use '@cfpb/cfpb-design-system/src/components/cfpb-buttons/vars' as *;
 
 /* ==========================================================================
    cfgov-refresh

diff --git a/docs/assets/css/tabs.scss b/docs/assets/css/tabs.scss
@@ -1,3 +1,7 @@
+@use '@cfpb/cfpb-design-system/src/abstracts' as *;
+@use '@cfpb/cfpb-design-system/src/base' as *;
+@use '@cfpb/cfpb-design-system/src/utilities' as *;
+
 // All screen sizes.
 .m-tabs {
   &__list {

diff --git a/docs/assets/css/variation.scss b/docs/assets/css/variation.scss
@@ -1,4 +1,6 @@
 @use 'sass:math';
+@use '@cfpb/cfpb-design-system/src/abstracts' as *;
+@use '@cfpb/cfpb-design-system/src/utilities' as *;
 
 /* ==========================================================================
    Variation page template

diff --git a/docs/assets/js/admin/netlify-cms.js b/docs/assets/js/admin/netlify-cms.js
@@ -12,4 +12,4 @@ CMS.registerPreviewTemplate('special-pages', genericPreviewTemplate);
 CMS.registerPreviewTemplate('pages', pagePreviewTemplate);
 CMS.registerPreviewTemplate('side-navigation', navigationPreviewTemplate);
 
-CMS.registerPreviewStyle('/design-system/dist/css/main.css');
+CMS.registerPreviewStyle('/design-system/dist/main.css');
diff --git a/docs/assets/js/main.js b/docs/assets/js/main.js
@@ -5,17 +5,16 @@ import {
   ExpandableGroup,
   Summary,
   SummaryMinimal,
-} from '@cfpb/cfpb-expandables';
-import { Multiselect } from '@cfpb/cfpb-forms';
-import {
+  Multiselect,
   FlyoutMenu,
   AlphaTransition,
   MaxHeightTransition,
   MoveTransition,
-} from '@cfpb/cfpb-atomic-component';
+} from '@cfpb/cfpb-design-system';
 import Tabs from './Tabs.js';
 import redirectBanner from './redirect-banner.js';
 import sidebar from './sidebar.js';
+export * as MainStyles from '../css/main.scss';
 
 redirectBanner.init();
 sidebar.init();

diff --git a/docs/pages/banner-notification.md b/docs/pages/banner-notification.md
@@ -40,7 +40,8 @@ variation_groups:
                   </div>
               </div>
           </div>
-        variation_description: The warning banner is used to display high-priority
+        variation_description:
+          The warning banner is used to display high-priority
           system or product level notifications that are not specific to an
           immediate task.
         variation_name: Warning banner
@@ -80,7 +81,8 @@ variation_groups:
               </div>
           </div>
         variation_name: Archived content banner
-        variation_description: The archived content banner is used to identify website
+        variation_description:
+          The archived content banner is used to identify website
           pages that are outdated and should no longer be referenced for
           guidance. These pages may have historical value or significance to
           researchers, historians, and the public.
@@ -100,5 +102,5 @@ redirect_from:
   - /banners
 last_updated: 2020-01-28T15:55:47.394Z
 title: Banner (notification)
-behavior: ""
+behavior: ''
 ---
diff --git a/docs/pages/helper-classes-mixins.md b/docs/pages/helper-classes-mixins.md
@@ -236,17 +236,6 @@ variation_groups:
     variation_group_name: Helper classes
   - variation_group_name: Mixins
     variations:
-      - variation_name: '"Align with button" mixin'
-        variation_description: >-
-          Align an element vertically with the text within a button that may be
-          to either side.
-
-
-          _Pass `font-size` as the argument for calculating spacing, default value is `@base-font-size-px`._
-
-
-          `.u-align-with-btn(@font-size: @base-font-size-px);`
-        variation_code_snippet: ''
       - variation_name: '"Flexible proportional containers" mixin'
         variation_description: >-
           Utilize intrinsic ratios to create a flexible container that retains

diff --git a/docs/pages/iconography.md b/docs/pages/iconography.md
@@ -644,7 +644,7 @@ description: >-
 
 
   <a class="a-link"
-     href="https://github.com/cfpb/design-system/tree/main/packages/cfpb-icons/src/icons">
+     href="https://github.com/cfpb/design-system/tree/main/packages/cfpb-design-system/src/components/cfpb-icons/icons">
       <span class="a-link__text">View on GitHub</span>
       {% include icons/download.svg %}
   </a>
@@ -663,7 +663,7 @@ description: >-
 
 
   <a class="a-link"
-     href="https://github.com/cfpb/design-system/blob/main/packages/cfpb-icons/src/font/CFPBIcons-Regular.otf?raw=true">
+     href="https://github.com/cfpb/design-system/blob/main/packages/cfpb-design-system/src/components/cfpb-icons/src/font/CFPBIcons-Regular.otf?raw=true">
       <span class="a-link__text">Download font</span>
       {% include icons/download.svg %}
   </a>
@@ -675,7 +675,7 @@ behavior: >-
   ### SVG icon basics
 
 
-  The [cfpb-icons](https://github.com/cfpb/design-system/tree/main/packages/cfpb-icons/src/icons) component provides Scalable Vector Graphic (SVG) icons. The filenames of the SVGs included with cfpb-icons match the names in the [icon library](https://cfpb.github.io/design-system/foundation/iconography#icon-library-1) section. We encourage using your templating system to inject the SVG icon files, as opposed to copying and pasting the raw SVG.
+  The [cfpb-icons](https://github.com/cfpb/design-system/tree/main/packages/cfpb-design-system/src/components/cfpb-icons/icons) component provides Scalable Vector Graphic (SVG) icons. The filenames of the SVGs included with cfpb-icons match the names in the [icon library](https://cfpb.github.io/design-system/foundation/iconography#icon-library-1) section. We encourage using your templating system to inject the SVG icon files, as opposed to copying and pasting the raw SVG.
 
 
   Note: Jinja2, the templating language that consumerfinance.gov uses, has a near-identical syntax for includes, but it requires that the path be enclosed in quotation marks, like so: `{% include 'icons/download.svg' %}`.
@@ -684,7 +684,7 @@ behavior: >-
   #### What the SCSS is doing
 
 
-  If you look in [cfpb-icons.scss](https://github.com/cfpb/design-system/blob/main/packages/cfpb-icons/src/cfpb-icons.scss) you can see that we have encoded `class="cf-icon-svg"` in the root element of each of our SVG icons. As a result, the CSS rule gets applied to all of the SVGs on the page,
+  If you look in [cfpb-icons.scss](https://github.com/cfpb/design-system/blob/main/packages/cfpb-design-system/src/components/cfpb-icons/src/cfpb-icons.scss) you can see that we have encoded `class="cf-icon-svg"` in the root element of each of our SVG icons. As a result, the CSS rule gets applied to all of the SVGs on the page,
   just like any other HTML element.
 
 

diff --git a/docs/pages/variables.md b/docs/pages/variables.md
@@ -347,7 +347,7 @@ variation_groups:
           Override this variable in order to specify a font stack other than the
           CFPB's default brand font and fallback.
 
-          `@font-stack: 'Avenir Next', Arial, sans-serif;`
+          `--font-stack: 'Avenir Next', Arial, sans-serif;`
       - variation_name: '@font-face file path'
         variation_description: >-
           Use this variable to point to the file containing your `@font-face`

diff --git a/esbuild/docs/build.js b/esbuild/docs/build.js
@@ -1,8 +1,7 @@
 import esbuild from 'esbuild';
 
 import { pluginEsbuildLiquid } from '../plugins/plugin-esbuild-liquid.js';
-import { scripts, jsPaths } from './scripts.js';
-import { styles, cssPaths } from './styles.js';
+import { scripts } from './scripts.js';
 
 const baseConfig = {
   logLevel: 'info',
@@ -15,25 +14,22 @@ const baseConfig = {
     '.svg': 'text',
   },
   outdir: './docs/dist/',
-  outbase: './docs/assets/',
+  outbase: './docs/assets/js/',
   plugins: [pluginEsbuildLiquid],
 };
 
 const arg = process.argv.slice(2)[0];
 
 (async function () {
   const scriptsConfig = scripts(baseConfig);
-  const stylesConfig = styles(baseConfig);
-  const mergedConfig = { ...scriptsConfig, ...stylesConfig };
-  mergedConfig.entryPoints = jsPaths.concat(cssPaths);
 
+  const ctx = await esbuild.context(scriptsConfig);
   if (arg === 'watch') {
-    const ctx = await esbuild.context(mergedConfig);
     await ctx.watch();
     // Not disposing context here as the user will ctrl+c to end watching.
   } else {
-    const ctx = await esbuild.context(mergedConfig);
     await ctx.rebuild();
     await ctx.dispose();
   }
+  //await copy();
 })();
diff --git a/esbuild/docs/scripts.js b/esbuild/docs/scripts.js
@@ -1,3 +1,6 @@
+import { pluginPostCssSass } from '../plugins/plugin-postcss-sass.js';
+import autoprefixer from 'autoprefixer';
+
 const jsPaths = [
   './docs/assets/js/interstitial.js',
   './docs/assets/js/main.js',
@@ -14,7 +17,12 @@ function scripts(baseConfig) {
     ...baseConfig,
     entryPoints: jsPaths,
     target: 'es6',
+    plugins: baseConfig.plugins.concat([
+      pluginPostCssSass({
+        plugins: [autoprefixer],
+      }),
+    ]),
   };
 }
 
-export { scripts, jsPaths };
+export { scripts };