From c48981442b4bb65b403dc2009ed3cd28a72037a9 Mon Sep 17 00:00:00 2001 From: Andrew Nelson Date: Fri, 29 Sep 2023 12:14:15 -0700 Subject: [PATCH 1/2] feat: added 4 icons (#2525) --- src/components/Icon/Icon.stories.tsx | 16 ++++++++++++++++ src/components/Icon/Icons.stories.tsx | 4 ++++ src/components/Icon/Icons.ts | 11 +++++++++++ 3 files changed, 31 insertions(+) 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) From a1ed9f758c151b639726b16fb74327299f7c09a2 Mon Sep 17 00:00:00 2001 From: Joe Kleinschmidt Date: Fri, 29 Sep 2023 14:53:00 -0500 Subject: [PATCH 2/2] fix: Sass modules bug (#2555) --- .storybook/main.ts | 41 +++++++++++++------ .../{Alert.module.css => Alert.module.scss} | 0 src/components/Alert/Alert.tsx | 2 +- .../{Table.module.css => Table.module.scss} | 0 src/components/Table/Table.tsx | 2 +- webpack.config.js | 38 +++++++++++------ 6 files changed, 56 insertions(+), 27 deletions(-) rename src/components/Alert/{Alert.module.css => Alert.module.scss} (100%) rename src/components/Table/{Table.module.css => Table.module.scss} (100%) 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/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$/,