diff --git a/.storybook/main.ts b/.storybook/main.ts
index e94b61ef1a..9a08dc34bd 100644
--- a/.storybook/main.ts
+++ b/.storybook/main.ts
@@ -1,7 +1,15 @@
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$/'
@@ -9,18 +17,19 @@ const webpackConfig = (config) => {
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,
+ },
+ },
+ },
],
})
diff --git a/src/components/Alert/Alert.module.css b/src/components/Alert/Alert.module.scss
similarity index 100%
rename from src/components/Alert/Alert.module.css
rename to src/components/Alert/Alert.module.scss
diff --git a/src/components/Alert/Alert.tsx b/src/components/Alert/Alert.tsx
index 6a8abdcc69..bacbedb9b3 100644
--- a/src/components/Alert/Alert.tsx
+++ b/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'
diff --git a/src/components/Icon/Icon.stories.tsx b/src/components/Icon/Icon.stories.tsx
index 5e95eb815a..ff05a90947 100644
--- a/src/components/Icon/Icon.stories.tsx
+++ b/src/components/Icon/Icon.stories.tsx
@@ -285,6 +285,10 @@ export const eco = (args: StorybookArgs): React.ReactElement => (
)
+export const edit = (args: StorybookArgs): React.ReactElement => (
+
+)
+
export const electricalServices = (args: StorybookArgs): React.ReactElement => (
)
@@ -333,6 +337,10 @@ export const favoriteBorder = (args: StorybookArgs): React.ReactElement => (
)
+export const fax = (args: StorybookArgs): React.ReactElement => (
+
+)
+
export const fileDownload = (args: StorybookArgs): React.ReactElement => (
)
@@ -509,6 +517,10 @@ export const link = (args: StorybookArgs): React.ReactElement => (
)
+export const linkedIn = (args: StorybookArgs): React.ReactElement => (
+
+)
+
export const linkOff = (args: StorybookArgs): React.ReactElement => (
)
@@ -725,6 +737,10 @@ export const remove = (args: StorybookArgs): React.ReactElement => (
)
+export const removeCircle = (args: StorybookArgs): React.ReactElement => (
+
+)
+
export const report = (args: StorybookArgs): React.ReactElement => (
)
diff --git a/src/components/Icon/Icons.stories.tsx b/src/components/Icon/Icons.stories.tsx
index 1922460ceb..4e1157043e 100644
--- a/src/components/Icon/Icons.stories.tsx
+++ b/src/components/Icon/Icons.stories.tsx
@@ -95,6 +95,7 @@ export const allIcons = (args: StorybookArgs): React.ReactElement => (
+
@@ -107,6 +108,7 @@ export const allIcons = (args: StorybookArgs): React.ReactElement => (
+
@@ -151,6 +153,7 @@ export const allIcons = (args: StorybookArgs): React.ReactElement => (
+
@@ -206,6 +209,7 @@ export const allIcons = (args: StorybookArgs): React.ReactElement => (
+
diff --git a/src/components/Icon/Icons.ts b/src/components/Icon/Icons.ts
index 722737bb82..199ddb52ca 100644
--- a/src/components/Icon/Icons.ts
+++ b/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 =
makeUSWDSIcon(FavoriteBorderSvg)
+ public static Fax: React.ComponentType = makeUSWDSIcon(FaxSvg)
+
public static FileDownload: React.ComponentType =
makeUSWDSIcon(FileDownloadSvg)
@@ -580,6 +585,9 @@ export class Icon {
public static LightbulbOutline: React.ComponentType =
makeUSWDSIcon(LightbulbOutlineSvg)
+ public static LinkedIn: React.ComponentType =
+ makeUSWDSIcon(LinkedInSvg)
+
public static Link: React.ComponentType = makeUSWDSIcon(LinkSvg)
public static LinkOff: React.ComponentType =
@@ -731,6 +739,9 @@ export class Icon {
public static ReduceCapacity: React.ComponentType =
makeUSWDSIcon(ReduceCapacitySvg)
+ public static RemoveCircle: React.ComponentType =
+ makeUSWDSIcon(RemoveCircleSvg)
+
public static Remove: React.ComponentType =
makeUSWDSIcon(RemoveSvg)
diff --git a/src/components/Table/Table.module.css b/src/components/Table/Table.module.scss
similarity index 100%
rename from src/components/Table/Table.module.css
rename to src/components/Table/Table.module.scss
diff --git a/src/components/Table/Table.tsx b/src/components/Table/Table.tsx
index 75df08c48d..bc1d8a1e71 100644
--- a/src/components/Table/Table.tsx
+++ b/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
diff --git a/webpack.config.js b/webpack.config.js
index 42862039bc..403fbeb9c7 100644
--- a/webpack.config.js
+++ b/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$/,