Merge branch 'main' into gidjin/update-happo-build-for-storybook-7

.storybook/main.ts

@@ -1,26 +1,35 @@
 const path = require('path')
 
+const uswdsIncludePaths = [
+  './node_modules/@uswds',
+  './node_modules/@uswds/uswds/packages',
+]
+
 const webpackConfig = (config) => {
-  config.resolve.alias.uswds = path.resolve(__dirname, '../node_modules/@uswds/uswds')
+  config.resolve.alias.uswds = path.resolve(
+    __dirname,
+    '../node_modules/@uswds/uswds'
+  )
 
   config.module.rules = config.module.rules.filter(
     (rule) => rule.test.toString() !== '/\\.css$/'
   )
   config.module.rules.push({
     test: /\.(sa|sc|c)ss$/,
     exclude: /\.module\.(sa|sc|c)ss$/i,
-    use: ['style-loader', 'css-loader', {
-      loader: "sass-loader",
-      options: {
-        sourceMap: true,
-        sassOptions: {
-          includePaths: [
-            "./node_modules/@uswds",
-            "./node_modules/@uswds/uswds/packages",
-          ],
+    use: [
+      'style-loader',
+      'css-loader',
+      {
+        loader: 'sass-loader',
+        options: {
+          sourceMap: true,
+          sassOptions: {
+            includePaths: uswdsIncludePaths,
+          },
         },
       },
-    },],
+    ],
     include: path.resolve(__dirname, '../'),
   })
 
@@ -37,7 +46,15 @@ const webpackConfig = (config) => {
           },
         },
       },
-      "sass-loader",
+      {
+        loader: 'sass-loader',
+        options: {
+          sourceMap: true,
+          sassOptions: {
+            includePaths: uswdsIncludePaths,
+          },
+        },
+      },
     ],
   })
 

src/components/Alert/Alert.tsx

@@ -3,7 +3,7 @@ import classnames from 'classnames'
 
 import { HeadingLevel } from '../../types/headingLevel'
 
-import styles from './Alert.module.css'
+import styles from './Alert.module.scss'
 
 type AlertProps = {
   type: 'success' | 'warning' | 'error' | 'info'

src/components/Icon/Icon.stories.tsx

@@ -285,6 +285,10 @@ export const eco = (args: StorybookArgs): React.ReactElement => (
   <Icon.Eco {...args} />
 )
 
+export const edit = (args: StorybookArgs): React.ReactElement => (
+  <Icon.Edit {...args} />
+)
+
 export const electricalServices = (args: StorybookArgs): React.ReactElement => (
   <Icon.ElectricalServices {...args} />
 )
@@ -333,6 +337,10 @@ export const favoriteBorder = (args: StorybookArgs): React.ReactElement => (
   <Icon.FavoriteBorder {...args} />
 )
 
+export const fax = (args: StorybookArgs): React.ReactElement => (
+  <Icon.Fax {...args} />
+)
+
 export const fileDownload = (args: StorybookArgs): React.ReactElement => (
   <Icon.FileDownload {...args} />
 )
@@ -509,6 +517,10 @@ export const link = (args: StorybookArgs): React.ReactElement => (
   <Icon.Link {...args} />
 )
 
+export const linkedIn = (args: StorybookArgs): React.ReactElement => (
+  <Icon.LinkedIn {...args} />
+)
+
 export const linkOff = (args: StorybookArgs): React.ReactElement => (
   <Icon.LinkOff {...args} />
 )
@@ -725,6 +737,10 @@ export const remove = (args: StorybookArgs): React.ReactElement => (
   <Icon.Remove {...args} />
 )
 
+export const removeCircle = (args: StorybookArgs): React.ReactElement => (
+  <Icon.RemoveCircle {...args} />
+)
+
 export const report = (args: StorybookArgs): React.ReactElement => (
   <Icon.Report {...args} />
 )

src/components/Icon/Icons.stories.tsx

@@ -95,6 +95,7 @@ export const allIcons = (args: StorybookArgs): React.ReactElement => (
     <Icon.DoNotTouch {...args} />
     <Icon.DragHandle {...args} />
     <Icon.Eco {...args} />
+    <Icon.Edit {...args} />
     <Icon.ElectricalServices {...args} />
     <Icon.EmojiEvents {...args} />
     <Icon.Error {...args} />
@@ -107,6 +108,7 @@ export const allIcons = (args: StorybookArgs): React.ReactElement => (
     <Icon.FastRewind {...args} />
     <Icon.Favorite {...args} />
     <Icon.FavoriteBorder {...args} />
+    <Icon.Fax {...args} />
     <Icon.FileDownload {...args} />
     <Icon.FilePresent {...args} />
     <Icon.FileUpload {...args} />
@@ -151,6 +153,7 @@ export const allIcons = (args: StorybookArgs): React.ReactElement => (
     <Icon.Lightbulb {...args} />
     <Icon.LightbulbOutline {...args} />
     <Icon.Link {...args} />
+    <Icon.LinkedIn {...args} />
     <Icon.LinkOff {...args} />
     <Icon.List {...args} />
     <Icon.LocalCafe {...args} />
@@ -206,6 +209,7 @@ export const allIcons = (args: StorybookArgs): React.ReactElement => (
     <Icon.Rain {...args} />
     <Icon.ReduceCapacity {...args} />
     <Icon.Remove {...args} />
+    <Icon.RemoveCircle {...args} />
     <Icon.Report {...args} />
     <Icon.Restaurant {...args} />
     <Icon.RssFeed {...args} />

src/components/Icon/Icons.ts

@@ -75,6 +75,7 @@ import FastForwardSvg from '@uswds/uswds/src/img/usa-icons/fast_forward.svg?svgr
 import FastRewindSvg from '@uswds/uswds/src/img/usa-icons/fast_rewind.svg?svgr'
 import FavoriteSvg from '@uswds/uswds/src/img/usa-icons/favorite.svg?svgr'
 import FavoriteBorderSvg from '@uswds/uswds/src/img/usa-icons/favorite_border.svg?svgr'
+import FaxSvg from '@uswds/uswds/src/img/usa-icons/fax.svg?svgr'
 import FileDownloadSvg from '@uswds/uswds/src/img/usa-icons/file_download.svg?svgr'
 import FilePresentSvg from '@uswds/uswds/src/img/usa-icons/file_present.svg?svgr'
 import FileUploadSvg from '@uswds/uswds/src/img/usa-icons/file_upload.svg?svgr'
@@ -118,6 +119,7 @@ import LastPageSvg from '@uswds/uswds/src/img/usa-icons/last_page.svg?svgr'
 import LaunchSvg from '@uswds/uswds/src/img/usa-icons/launch.svg?svgr'
 import LightbulbSvg from '@uswds/uswds/src/img/usa-icons/lightbulb.svg?svgr'
 import LightbulbOutlineSvg from '@uswds/uswds/src/img/usa-icons/lightbulb_outline.svg?svgr'
+import LinkedInSvg from '@uswds/uswds/src/img/usa-icons/linkedin.svg?svgr'
 import LinkSvg from '@uswds/uswds/src/img/usa-icons/link.svg?svgr'
 import LinkOffSvg from '@uswds/uswds/src/img/usa-icons/link_off.svg?svgr'
 import ListSvg from '@uswds/uswds/src/img/usa-icons/list.svg?svgr'
@@ -173,6 +175,7 @@ import PushPinSvg from '@uswds/uswds/src/img/usa-icons/push_pin.svg?svgr'
 import RadioButtonUncheckedSvg from '@uswds/uswds/src/img/usa-icons/radio_button_unchecked.svg?svgr'
 import RainSvg from '@uswds/uswds/src/img/usa-icons/rain.svg?svgr'
 import ReduceCapacitySvg from '@uswds/uswds/src/img/usa-icons/reduce_capacity.svg?svgr'
+import RemoveCircleSvg from '@uswds/uswds/src/img/usa-icons/remove_circle.svg?svgr'
 import RemoveSvg from '@uswds/uswds/src/img/usa-icons/remove.svg?svgr'
 import ReportSvg from '@uswds/uswds/src/img/usa-icons/report.svg?svgr'
 import RestaurantSvg from '@uswds/uswds/src/img/usa-icons/restaurant.svg?svgr'
@@ -459,6 +462,8 @@ export class Icon {
   public static FavoriteBorder: React.ComponentType<IconProps> =
     makeUSWDSIcon(FavoriteBorderSvg)
 
+  public static Fax: React.ComponentType<IconProps> = makeUSWDSIcon(FaxSvg)
+
   public static FileDownload: React.ComponentType<IconProps> =
     makeUSWDSIcon(FileDownloadSvg)
 
@@ -580,6 +585,9 @@ export class Icon {
   public static LightbulbOutline: React.ComponentType<IconProps> =
     makeUSWDSIcon(LightbulbOutlineSvg)
 
+  public static LinkedIn: React.ComponentType<IconProps> =
+    makeUSWDSIcon(LinkedInSvg)
+
   public static Link: React.ComponentType<IconProps> = makeUSWDSIcon(LinkSvg)
 
   public static LinkOff: React.ComponentType<IconProps> =
@@ -731,6 +739,9 @@ export class Icon {
   public static ReduceCapacity: React.ComponentType<IconProps> =
     makeUSWDSIcon(ReduceCapacitySvg)
 
+  public static RemoveCircle: React.ComponentType<IconProps> =
+    makeUSWDSIcon(RemoveCircleSvg)
+
   public static Remove: React.ComponentType<IconProps> =
     makeUSWDSIcon(RemoveSvg)
 

src/components/Table/Table.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import classnames from 'classnames'
 
-import styles from './Table.module.css'
+import styles from './Table.module.scss'
 
 type TableProps = {
   bordered?: boolean

webpack.config.js

@@ -2,6 +2,11 @@ const path = require('path')
 const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin')
 
+const uswdsIncludePaths = [
+  './node_modules/@uswds',
+  './node_modules/@uswds/uswds/packages',
+]
+
 module.exports = {
   mode: 'production',
   entry: {
@@ -62,26 +67,33 @@ module.exports = {
               },
             },
           },
-          'sass-loader'
+          {
+            loader: 'sass-loader',
+            options: {
+              sourceMap: true,
+              sassOptions: {
+                includePaths: uswdsIncludePaths,
+              },
+            },
+          },
         ],
       },
       {
         test: /\.(sa|sc|c)ss$/i,
         exclude: /\.module\.(sa|sc|c)ss$/i,
-        use: [MiniCssExtractPlugin.loader, 'css-loader', 
-        {
-          loader: "sass-loader",
-          options: {
-            sourceMap: true,
-            sassOptions: {
-              includePaths: [
-                "./node_modules/@uswds",
-                "./node_modules/@uswds/uswds/packages",
-              ],
+        use: [
+          MiniCssExtractPlugin.loader,
+          'css-loader',
+          {
+            loader: 'sass-loader',
+            options: {
+              sourceMap: true,
+              sassOptions: {
+                includePaths: uswdsIncludePaths,
+              },
             },
           },
-        },
-      ],
+        ],
       },
       {
         test: /\.svg$/,