Consolidate packages into cfpb-design-system

cfpb · Jul 31, 2024 · 5bcc595 · 5bcc595
1 parent beec3eb
commit 5bcc595
Show file tree

Hide file tree

Showing 1,045 changed files with 847 additions and 18,332 deletions.
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/dist/index.css' as *;
+@use '@cfpb/cfpb-design-system/src/abstracts' as *;
+@use '@cfpb/cfpb-design-system/src/base' 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/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 };
diff --git a/esbuild/docs/styles.js b/esbuild/docs/styles.js
diff --git a/esbuild/packages/build.js b/esbuild/packages/build.js
@@ -1,8 +1,7 @@
 import esbuild from 'esbuild';
 
 import { copy } from './copy.js';
-import { scripts, jsPaths } from './scripts.js';
-import { styles, cssPaths } from './styles.js';
+import { scripts } from './scripts.js';
 
 const baseConfig = {
   logLevel: 'info',
@@ -20,11 +19,7 @@ const baseConfig = {
 
 (async function () {
   const scriptsConfig = scripts(baseConfig);
-  const stylesConfig = styles(baseConfig);
-  const mergedConfig = { ...scriptsConfig, ...stylesConfig };
-  mergedConfig.entryPoints = jsPaths.concat(cssPaths);
-
-  const ctx = await esbuild.context(mergedConfig);
+  const ctx = await esbuild.context(scriptsConfig);
 
   await ctx.rebuild();
   await ctx.dispose();

diff --git a/esbuild/packages/copy.js b/esbuild/packages/copy.js
@@ -1,7 +1,7 @@
 import fs from 'fs';
 const { mkdir, rename } = fs.promises;
 import { dirname, resolve } from 'path';
-import { getFiles } from './utils.js';
+import { getFiles } from '../utils.js';
 
 /**
  * Copy dist files from temporary directory to packages directories.