From 00b1076939b49baa22e3d0e47b6d1c64ba7bc04c Mon Sep 17 00:00:00 2001 From: Shakira Reid-Thomas Date: Wed, 8 Jan 2025 17:25:55 -0500 Subject: [PATCH 01/24] Setup basic folder structure for component and added basic import code --- .../organisms/GovBanner/GovBanner.js | 28 +++++++++++++++++++ .../organisms/GovBanner/GovBanner.scss | 0 .../organisms/GovBanner/cod-gov-banner.js | 2 ++ src/stable/stories/govbanner.stories.js | 2 ++ 4 files changed, 32 insertions(+) create mode 100644 src/stable/components/organisms/GovBanner/GovBanner.js create mode 100644 src/stable/components/organisms/GovBanner/GovBanner.scss create mode 100644 src/stable/components/organisms/GovBanner/cod-gov-banner.js create mode 100644 src/stable/stories/govbanner.stories.js diff --git a/src/stable/components/organisms/GovBanner/GovBanner.js b/src/stable/components/organisms/GovBanner/GovBanner.js new file mode 100644 index 00000000..a3bc7766 --- /dev/null +++ b/src/stable/components/organisms/GovBanner/GovBanner.js @@ -0,0 +1,28 @@ +import styles from '!!raw-loader!./GovBanner.css'; +import varStyles from '!!raw-loader!../../../../shared/vairbale.css'; +import bootstrapStyles from '!!raw-loader!../../../../shared/themed-bootstrapStyles.css'; + + +const template = document.createElement('template'); + +template.innerHTML = ` + +`; \ No newline at end of file diff --git a/src/stable/components/organisms/GovBanner/GovBanner.scss b/src/stable/components/organisms/GovBanner/GovBanner.scss new file mode 100644 index 00000000..e69de29b diff --git a/src/stable/components/organisms/GovBanner/cod-gov-banner.js b/src/stable/components/organisms/GovBanner/cod-gov-banner.js new file mode 100644 index 00000000..c7360bfc --- /dev/null +++ b/src/stable/components/organisms/GovBanner/cod-gov-banner.js @@ -0,0 +1,2 @@ +import GovBanner from './GovBanner'; +customElements.define('cod-gov-banner', GovBanner); \ No newline at end of file diff --git a/src/stable/stories/govbanner.stories.js b/src/stable/stories/govbanner.stories.js new file mode 100644 index 00000000..cfb77e48 --- /dev/null +++ b/src/stable/stories/govbanner.stories.js @@ -0,0 +1,2 @@ +import '../components/organisms/GovBanner/cod-gov-banner'; +import { COMMON_STORY_ARGS } from '../../shared/js/storybook/args-utils'; \ No newline at end of file From 8ddfedd9980380728b458bb259cce160b2d3c4f4 Mon Sep 17 00:00:00 2001 From: Shakira Reid-Thomas Date: Wed, 8 Jan 2025 18:13:26 -0500 Subject: [PATCH 02/24] Set up componenet constructor and styles --- .../organisms/GovBanner/GovBanner.js | 29 +++++++++++++++++-- 1 file changed, 26 insertions(+), 3 deletions(-) diff --git a/src/stable/components/organisms/GovBanner/GovBanner.js b/src/stable/components/organisms/GovBanner/GovBanner.js index a3bc7766..6bb41d3e 100644 --- a/src/stable/components/organisms/GovBanner/GovBanner.js +++ b/src/stable/components/organisms/GovBanner/GovBanner.js @@ -4,7 +4,7 @@ import bootstrapStyles from '!!raw-loader!../../../../shared/themed-bootstrapSty const template = document.createElement('template'); - + template.innerHTML = ` -`; \ No newline at end of file +`; + +class GovBanner extends HTMLElement { + constructor(){ + + // Always call super first in constructor + super(); + + // Create a shadow root + const shadow = this.attachShadow({ mode: 'open' }); + shadow.appendChild(template.content.cloneNode(true)); + + // Add Styles + const bootStyles = document.createElement('style'); + bootStyles.textContent = bootstrapStyles; + const variableStyles = document.createElement('style'); + variableStyles.textContent = varStyles; + const itemStyles = document.createElement('style'); + itemStyles.textContent = styles; + shadow.appendChild(bootStyles); + shadow.appendChild(variableStyles); + shadow.appendChild(itemStyles); + } +} \ No newline at end of file From b6d5c4c966bad5d4e7e19c4468584e123e74fe8a Mon Sep 17 00:00:00 2001 From: Shakira Reid-Thomas Date: Thu, 9 Jan 2025 17:03:35 -0500 Subject: [PATCH 03/24] Updated GovBanner.js to use template literals for Stylesheets, added CSS for component and updated govbanner.stories.js file --- .../organisms/GovBanner/GovBanner.css | 69 ++++++++++++++++++ .../organisms/GovBanner/GovBanner.js | 73 ++++++++++++------- .../organisms/GovBanner/GovBanner.scss | 1 + src/stable/stories/govbanner.stories.js | 36 ++++++++- 4 files changed, 153 insertions(+), 26 deletions(-) create mode 100644 src/stable/components/organisms/GovBanner/GovBanner.css diff --git a/src/stable/components/organisms/GovBanner/GovBanner.css b/src/stable/components/organisms/GovBanner/GovBanner.css new file mode 100644 index 00000000..e9292fb9 --- /dev/null +++ b/src/stable/components/organisms/GovBanner/GovBanner.css @@ -0,0 +1,69 @@ +.banner-container { + width: 100%; + background-color: #004445; + color: white; + } + + .banner-header { + display: flex; + justify-content: space-between; + align-items: center; + padding: 0.75rem 1rem; + } + + .title-section { + display: flex; + align-items: center; + gap: 0.5rem; + flex: 1; + } + + .official-text { + display: flex; + gap: 0.25rem; + flex-wrap: wrap; + } + + .know-text { + text-decoration: underline; + } + + .chevron-container { + background: none; + border: none; + padding: 0.5rem; + color: inherit; + cursor: pointer; + } + + .chevron-container svg { + transition: transform 0.2s ease; + } + + .chevron-container[aria-expanded="true"] svg { + transform: rotate(180deg); + } + + .content-container { + background-color: #f0f0f0; + padding: 1rem; + color: #333; + } + + @media (max-width: 768px) { + .banner-header { + flex-direction: column; + align-items: flex-start; + gap: 0.5rem; + } + + .title-section { + flex-direction: column; + align-items: flex-start; + } + + .chevron-container { + align-self: flex-end; + margin-top: -2rem; + } + } \ No newline at end of file diff --git a/src/stable/components/organisms/GovBanner/GovBanner.js b/src/stable/components/organisms/GovBanner/GovBanner.js index 6bb41d3e..5a997b31 100644 --- a/src/stable/components/organisms/GovBanner/GovBanner.js +++ b/src/stable/components/organisms/GovBanner/GovBanner.js @@ -1,11 +1,15 @@ import styles from '!!raw-loader!./GovBanner.css'; -import varStyles from '!!raw-loader!../../../../shared/vairbale.css'; -import bootstrapStyles from '!!raw-loader!../../../../shared/themed-bootstrapStyles.css'; - +import varStyles from '!!raw-loader!../../../../shared/variables.css'; +import bootstrapStyles from '!!raw-loader!../../../../shared/themed-bootstrap.css'; const template = document.createElement('template'); template.innerHTML = ` + - ` + `, }; \ No newline at end of file diff --git a/webpack.config.js b/webpack.config.js index 9e73a422..279e1bbb 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -1,3 +1,148 @@ +// const path = require('path'); +// const MiniCssExtractPlugin = require('mini-css-extract-plugin'); +// const HtmlWebpackPlugin = require('html-webpack-plugin'); +// const webpack = require('webpack'); +// const TerserWebpackPlugin = require('terser-webpack-plugin'); +// const CssMinimizerPlugin = require('css-minimizer-webpack-plugin'); + +// module.exports = function (_env, argv) { +// const isProduction = argv.mode === 'production'; +// const isDevelopment = !isProduction; + +// return { +// devtool: isDevelopment && 'cheap-module-source-map', +// entry: './src/index-experimental.js', +// output: { +// path: path.resolve(__dirname, 'build/experimental'), +// filename: 'assets/js/[name].js', +// publicPath: '', +// }, +// module: { +// rules: [ +// { +// test: /\.jsx?$/, +// exclude: /node_modules/, +// use: { +// loader: 'babel-loader', +// options: { +// cacheDirectory: true, +// cacheCompression: false, +// envName: isProduction ? 'production' : 'development', +// }, +// }, +// }, +// { +// test: /\.css$/i, +// use: [ +// isProduction ? MiniCssExtractPlugin.loader : 'to-string-loader', +// 'css-loader', +// 'postcss-loader', +// ], +// }, +// { +// test: /\.s[ac]ss$/i, +// use: [ +// isProduction ? MiniCssExtractPlugin.loader : 'style-loader', +// 'css-loader', +// 'sass-loader', +// ], +// }, +// { +// test: /\.(png|jpg|gif)$/i, +// use: { +// loader: 'url-loader', +// options: { +// limit: 8192, +// name: 'static/media/[name].[hash:8].[ext]', +// }, +// }, +// }, +// { +// test: /\.svg$/, +// use: ['@svgr/webpack'], +// }, +// { +// test: /\.(eot|otf|ttf|woff|woff2)$/, +// loader: require.resolve('file-loader'), +// options: { +// name: 'static/media/[name].[hash:8].[ext]', +// }, +// }, +// ], +// }, +// resolve: { +// extensions: ['.js', '.jsx'], +// }, +// plugins: [ +// isProduction && +// new MiniCssExtractPlugin({ +// filename: 'assets/css/[name].css', +// chunkFilename: 'assets/css/[name].chunk.css', +// }), +// new HtmlWebpackPlugin({ +// template: path.resolve(__dirname, 'public/index.html'), +// inject: true, +// }), +// new webpack.DefinePlugin({ +// 'process.env.NODE_ENV': JSON.stringify( +// isProduction ? 'production' : 'development', +// ), +// }), +// ].filter(Boolean), +// optimization: { +// minimize: isProduction, +// minimizer: [ +// new TerserWebpackPlugin({ +// terserOptions: { +// compress: { +// comparisons: false, +// }, +// mangle: { +// safari10: true, +// }, +// output: { +// comments: false, +// ascii_only: true, +// }, +// warnings: false, +// }, +// }), +// new CssMinimizerPlugin(), +// ], +// splitChunks: { +// chunks: 'all', +// minSize: 0, +// maxInitialRequests: 10, +// maxAsyncRequests: 10, +// cacheGroups: { +// vendors: { +// test: /[\\/]node_modules[\\/]/, +// name(module, chunks, cacheGroupKey) { +// const packageName = module.context.match( +// /[\\/]node_modules[\\/](.*?)([\\/]|$)/, +// )[1]; +// return `${cacheGroupKey}.${packageName.replace('@', '')}`; +// }, +// }, +// common: { +// minChunks: 2, +// priority: -10, +// }, +// }, +// }, +// runtimeChunk: 'single', +// }, +// devServer: { +// port: 3000, +// compress: true, +// historyApiFallback: true, +// open: true, +// client: { +// overlay: true, +// }, +// }, +// }; +// }; const path = require('path'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const HtmlWebpackPlugin = require('html-webpack-plugin'); @@ -8,14 +153,21 @@ const CssMinimizerPlugin = require('css-minimizer-webpack-plugin'); module.exports = function (_env, argv) { const isProduction = argv.mode === 'production'; const isDevelopment = !isProduction; + const buildType = process.env.BUILD_TYPE || 'experimental'; return { devtool: isDevelopment && 'cheap-module-source-map', - entry: './src/index-experimental.js', + entry: { + main: buildType === 'stable' + ? './src/stable/index-stable.js' + : './src/index-experimental.js' + }, output: { - path: path.resolve(__dirname, 'build/experimental'), - filename: 'assets/js/[name].js', + path: path.resolve(__dirname, `build/${buildType}`), + filename: 'assets/js/[name].[contenthash].js', + chunkFilename: 'assets/js/[name].[contenthash].chunk.js', publicPath: '', + clean: true }, module: { rules: [ @@ -35,7 +187,18 @@ module.exports = function (_env, argv) { test: /\.css$/i, use: [ isProduction ? MiniCssExtractPlugin.loader : 'to-string-loader', - 'css-loader', + { + loader: 'css-loader', + options: { + importLoaders: 1, + modules: { + auto: true, + localIdentName: isProduction + ? '[hash:base64]' + : '[path][name]__[local]', + }, + }, + }, 'postcss-loader', ], }, @@ -49,11 +212,10 @@ module.exports = function (_env, argv) { }, { test: /\.(png|jpg|gif)$/i, - use: { - loader: 'url-loader', - options: { - limit: 8192, - name: 'static/media/[name].[hash:8].[ext]', + type: 'asset', + parser: { + dataUrlCondition: { + maxSize: 8192, }, }, }, @@ -63,30 +225,48 @@ module.exports = function (_env, argv) { }, { test: /\.(eot|otf|ttf|woff|woff2)$/, - loader: require.resolve('file-loader'), - options: { - name: 'static/media/[name].[hash:8].[ext]', + type: 'asset/resource', + generator: { + filename: 'assets/fonts/[name].[hash][ext]', }, }, ], }, resolve: { extensions: ['.js', '.jsx'], + alias: { + '@stable': path.resolve(__dirname, 'src/stable'), + '@experimental': path.resolve(__dirname, 'src/experimental'), + '@shared': path.resolve(__dirname, 'src/shared'), + }, }, plugins: [ isProduction && new MiniCssExtractPlugin({ - filename: 'assets/css/[name].css', - chunkFilename: 'assets/css/[name].chunk.css', + filename: 'assets/css/[name].[contenthash].css', + chunkFilename: 'assets/css/[name].[contenthash].chunk.css', }), new HtmlWebpackPlugin({ template: path.resolve(__dirname, 'public/index.html'), inject: true, + minify: isProduction ? { + removeComments: true, + collapseWhitespace: true, + removeRedundantAttributes: true, + useShortDoctype: true, + removeEmptyAttributes: true, + removeStyleLinkTypeAttributes: true, + keepClosingSlash: true, + minifyJS: true, + minifyCSS: true, + minifyURLs: true, + } : undefined, }), new webpack.DefinePlugin({ 'process.env.NODE_ENV': JSON.stringify( - isProduction ? 'production' : 'development', + isProduction ? 'production' : 'development' ), + 'process.env.BUILD_TYPE': JSON.stringify(buildType), }), ].filter(Boolean), optimization: { @@ -96,6 +276,7 @@ module.exports = function (_env, argv) { terserOptions: { compress: { comparisons: false, + inline: 2, }, mangle: { safari10: true, @@ -104,34 +285,38 @@ module.exports = function (_env, argv) { comments: false, ascii_only: true, }, - warnings: false, }, }), new CssMinimizerPlugin(), ], splitChunks: { chunks: 'all', - minSize: 0, - maxInitialRequests: 10, - maxAsyncRequests: 10, + minSize: 20000, + minRemainingSize: 0, + minChunks: 1, + maxAsyncRequests: 30, + maxInitialRequests: 30, + enforceSizeThreshold: 50000, cacheGroups: { - vendors: { + defaultVendors: { test: /[\\/]node_modules[\\/]/, - name(module, chunks, cacheGroupKey) { - const packageName = module.context.match( - /[\\/]node_modules[\\/](.*?)([\\/]|$)/, - )[1]; - return `${cacheGroupKey}.${packageName.replace('@', '')}`; - }, + priority: -10, + reuseExistingChunk: true, }, - common: { + default: { minChunks: 2, - priority: -10, + priority: -20, + reuseExistingChunk: true, }, }, }, runtimeChunk: 'single', }, + performance: { + hints: isProduction ? 'warning' : false, + maxEntrypointSize: 512000, + maxAssetSize: 512000, + }, devServer: { port: 3000, compress: true, @@ -142,4 +327,4 @@ module.exports = function (_env, argv) { }, }, }; -}; +}; \ No newline at end of file From e54c48d38ec9a14b8c7b58679d36956dde4d654b Mon Sep 17 00:00:00 2001 From: Shakira Reid-Thomas Date: Wed, 15 Jan 2025 11:06:29 -0500 Subject: [PATCH 05/24] Removed unnecessary files --- build/index.html | 1 - build/stable/assets/js/main.b7aa51b21d57536540c4.js | 1 - build/stable/assets/js/runtime.233cb6c825dcb23b2c2f.js | 1 - build/stable/index.html | 1 - 4 files changed, 4 deletions(-) delete mode 100644 build/index.html delete mode 100644 build/stable/assets/js/main.b7aa51b21d57536540c4.js delete mode 100644 build/stable/assets/js/runtime.233cb6c825dcb23b2c2f.js delete mode 100644 build/stable/index.html diff --git a/build/index.html b/build/index.html deleted file mode 100644 index 5fe837a0..00000000 --- a/build/index.html +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/build/stable/assets/js/main.b7aa51b21d57536540c4.js b/build/stable/assets/js/main.b7aa51b21d57536540c4.js deleted file mode 100644 index 472bff48..00000000 --- a/build/stable/assets/js/main.b7aa51b21d57536540c4.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkcod_design_system=self.webpackChunkcod_design_system||[]).push([[179],{57:function(){function n(o){return n="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(n){return typeof n}:function(n){return n&&"function"==typeof Symbol&&n.constructor===Symbol&&n!==Symbol.prototype?"symbol":typeof n},n(o)}function o(o){var r=function(o,r){if("object"!==n(o)||null===o)return o;var t=o[Symbol.toPrimitive];if(void 0!==t){var a=t.call(o,r||"default");if("object"!==n(a))return a;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===r?String:Number)(o)}(o,"string");return"symbol"===n(r)?r:String(r)}const r=document.createElement("template");r.innerHTML="\n \n \n');class t extends HTMLElement{constructor(){super();this.attachShadow({mode:"open"}).appendChild(r.content.cloneNode(!0))}connectedCallback(){this._setupListeners()}disconnectedCallback(){this.shadowRoot.querySelector('[part="toggle"]').removeEventListener("click",this._handleToggle)}_setupListeners(){this.shadowRoot.querySelector('[part="toggle"]').addEventListener("click",this._handleToggle.bind(this))}_handleToggle(){const n=this.shadowRoot.querySelector('[part="content"]'),o=this.shadowRoot.querySelector('[part="toggle"]'),r="true"===o.getAttribute("aria-expanded");o.setAttribute("aria-expanded",!r),n.hidden=r}}var a,e,i;a=t,i=["expanded"],(e=o(e="observedAttributes"))in a?Object.defineProperty(a,e,{value:i,enumerable:!0,configurable:!0,writable:!0}):a[e]=i,customElements.define("cod-gov-banner",t)}},function(n){var o;o=57,n(n.s=o)}]); \ No newline at end of file diff --git a/build/stable/assets/js/runtime.233cb6c825dcb23b2c2f.js b/build/stable/assets/js/runtime.233cb6c825dcb23b2c2f.js deleted file mode 100644 index 400d7d25..00000000 --- a/build/stable/assets/js/runtime.233cb6c825dcb23b2c2f.js +++ /dev/null @@ -1 +0,0 @@ -!function(){"use strict";var n={},r={};function e(t){var o=r[t];if(void 0!==o)return o.exports;var i=r[t]={exports:{}};return n[t](i,i.exports,e),i.exports}e.m=n,function(){var n=[];e.O=function(r,t,o,i){if(!t){var u=1/0;for(a=0;a=i)&&Object.keys(e.O).every((function(n){return e.O[n](t[c])}))?t.splice(c--,1):(f=!1,i0&&n[a-1][2]>i;a--)n[a]=n[a-1];n[a]=[t,o,i]}}(),e.o=function(n,r){return Object.prototype.hasOwnProperty.call(n,r)},function(){var n={666:0};e.O.j=function(r){return 0===n[r]};var r=function(r,t){var o,i,u=t[0],f=t[1],c=t[2],s=0;if(u.some((function(r){return 0!==n[r]}))){for(o in f)e.o(f,o)&&(e.m[o]=f[o]);if(c)var a=c(e)}for(r&&r(t);s \ No newline at end of file From 55a881d64d8661edd182ba5be6950e882b2b630c Mon Sep 17 00:00:00 2001 From: Max Morgan Date: Wed, 15 Jan 2025 11:15:19 -0500 Subject: [PATCH 06/24] Revert package.json to dev --- package.json | 19 ++++++++----------- 1 file changed, 8 insertions(+), 11 deletions(-) diff --git a/package.json b/package.json index 1b4fb010..6fbf291d 100644 --- a/package.json +++ b/package.json @@ -21,23 +21,20 @@ }, "readmeFilename": "README.md", "homepage": "https://jedgar1mx.github.io/COD-Design-System", -"scripts": { + "scripts": { "check-lint-config": "npx eslint-config-prettier src/index.js", "lint": "eslint src && prettier --check src/*", - "build:experimental": "cross-env BUILD_TYPE=experimental webpack --mode production", - "build:stable": "cross-env BUILD_TYPE=stable webpack --mode production", - "build": "yarn build:stable && yarn build:experimental", - "build-package": "cross-env BABEL_ENV=production babel src -d dist", - "start:experimental": "cross-env BUILD_TYPE=experimental webpack-dev-server --mode development", - "start:stable": "cross-env BUILD_TYPE=stable webpack-dev-server --mode development", - "start": "yarn start:experimental", + "build": "yarn build:experimental && yarn build:stable", + "build:experimental": "webpack --mode production --config webpack.config.experimental.js", + "build:stable": "webpack --mode production --config webpack.config.stable.js", "storybook": "storybook dev -p 6006", "build-storybook": "storybook build", "deploy-storybook": "storybook-to-ghpages", "test-storybook": "test-storybook --maxWorkers=2 --coverage", - "release": "auto shipit --base-branch=dev", - "chromatic": "chromatic --exit-zero-on-changes" -}, + "chromatic": "chromatic --exit-zero-on-changes", + "build-package": "cross-env BABEL_ENV=production babel src -d dist", + "release": "auto shipit --base-branch=dev" + }, "author": { "name": "Edgar Montes" }, From 54961a1e85880f845109e82798440f8a64d713b6 Mon Sep 17 00:00:00 2001 From: Max Morgan Date: Wed, 15 Jan 2025 11:17:35 -0500 Subject: [PATCH 07/24] Remove webpack config to match dev --- webpack.config.js | 330 ---------------------------------------------- 1 file changed, 330 deletions(-) delete mode 100644 webpack.config.js diff --git a/webpack.config.js b/webpack.config.js deleted file mode 100644 index 279e1bbb..00000000 --- a/webpack.config.js +++ /dev/null @@ -1,330 +0,0 @@ -// const path = require('path'); -// const MiniCssExtractPlugin = require('mini-css-extract-plugin'); -// const HtmlWebpackPlugin = require('html-webpack-plugin'); -// const webpack = require('webpack'); -// const TerserWebpackPlugin = require('terser-webpack-plugin'); -// const CssMinimizerPlugin = require('css-minimizer-webpack-plugin'); - -// module.exports = function (_env, argv) { -// const isProduction = argv.mode === 'production'; -// const isDevelopment = !isProduction; - -// return { -// devtool: isDevelopment && 'cheap-module-source-map', -// entry: './src/index-experimental.js', -// output: { -// path: path.resolve(__dirname, 'build/experimental'), -// filename: 'assets/js/[name].js', -// publicPath: '', -// }, -// module: { -// rules: [ -// { -// test: /\.jsx?$/, -// exclude: /node_modules/, -// use: { -// loader: 'babel-loader', -// options: { -// cacheDirectory: true, -// cacheCompression: false, -// envName: isProduction ? 'production' : 'development', -// }, -// }, -// }, -// { -// test: /\.css$/i, -// use: [ -// isProduction ? MiniCssExtractPlugin.loader : 'to-string-loader', -// 'css-loader', -// 'postcss-loader', -// ], -// }, -// { -// test: /\.s[ac]ss$/i, -// use: [ -// isProduction ? MiniCssExtractPlugin.loader : 'style-loader', -// 'css-loader', -// 'sass-loader', -// ], -// }, -// { -// test: /\.(png|jpg|gif)$/i, -// use: { -// loader: 'url-loader', -// options: { -// limit: 8192, -// name: 'static/media/[name].[hash:8].[ext]', -// }, -// }, -// }, -// { -// test: /\.svg$/, -// use: ['@svgr/webpack'], -// }, -// { -// test: /\.(eot|otf|ttf|woff|woff2)$/, -// loader: require.resolve('file-loader'), -// options: { -// name: 'static/media/[name].[hash:8].[ext]', -// }, -// }, -// ], -// }, -// resolve: { -// extensions: ['.js', '.jsx'], -// }, -// plugins: [ -// isProduction && -// new MiniCssExtractPlugin({ -// filename: 'assets/css/[name].css', -// chunkFilename: 'assets/css/[name].chunk.css', -// }), -// new HtmlWebpackPlugin({ -// template: path.resolve(__dirname, 'public/index.html'), -// inject: true, -// }), -// new webpack.DefinePlugin({ -// 'process.env.NODE_ENV': JSON.stringify( -// isProduction ? 'production' : 'development', -// ), -// }), -// ].filter(Boolean), -// optimization: { -// minimize: isProduction, -// minimizer: [ -// new TerserWebpackPlugin({ -// terserOptions: { -// compress: { -// comparisons: false, -// }, -// mangle: { -// safari10: true, -// }, -// output: { -// comments: false, -// ascii_only: true, -// }, -// warnings: false, -// }, -// }), -// new CssMinimizerPlugin(), -// ], -// splitChunks: { -// chunks: 'all', -// minSize: 0, -// maxInitialRequests: 10, -// maxAsyncRequests: 10, -// cacheGroups: { -// vendors: { -// test: /[\\/]node_modules[\\/]/, -// name(module, chunks, cacheGroupKey) { -// const packageName = module.context.match( -// /[\\/]node_modules[\\/](.*?)([\\/]|$)/, -// )[1]; -// return `${cacheGroupKey}.${packageName.replace('@', '')}`; -// }, -// }, -// common: { -// minChunks: 2, -// priority: -10, -// }, -// }, -// }, -// runtimeChunk: 'single', -// }, -// devServer: { -// port: 3000, -// compress: true, -// historyApiFallback: true, -// open: true, -// client: { -// overlay: true, -// }, -// }, -// }; -// }; -const path = require('path'); -const MiniCssExtractPlugin = require('mini-css-extract-plugin'); -const HtmlWebpackPlugin = require('html-webpack-plugin'); -const webpack = require('webpack'); -const TerserWebpackPlugin = require('terser-webpack-plugin'); -const CssMinimizerPlugin = require('css-minimizer-webpack-plugin'); - -module.exports = function (_env, argv) { - const isProduction = argv.mode === 'production'; - const isDevelopment = !isProduction; - const buildType = process.env.BUILD_TYPE || 'experimental'; - - return { - devtool: isDevelopment && 'cheap-module-source-map', - entry: { - main: buildType === 'stable' - ? './src/stable/index-stable.js' - : './src/index-experimental.js' - }, - output: { - path: path.resolve(__dirname, `build/${buildType}`), - filename: 'assets/js/[name].[contenthash].js', - chunkFilename: 'assets/js/[name].[contenthash].chunk.js', - publicPath: '', - clean: true - }, - module: { - rules: [ - { - test: /\.jsx?$/, - exclude: /node_modules/, - use: { - loader: 'babel-loader', - options: { - cacheDirectory: true, - cacheCompression: false, - envName: isProduction ? 'production' : 'development', - }, - }, - }, - { - test: /\.css$/i, - use: [ - isProduction ? MiniCssExtractPlugin.loader : 'to-string-loader', - { - loader: 'css-loader', - options: { - importLoaders: 1, - modules: { - auto: true, - localIdentName: isProduction - ? '[hash:base64]' - : '[path][name]__[local]', - }, - }, - }, - 'postcss-loader', - ], - }, - { - test: /\.s[ac]ss$/i, - use: [ - isProduction ? MiniCssExtractPlugin.loader : 'style-loader', - 'css-loader', - 'sass-loader', - ], - }, - { - test: /\.(png|jpg|gif)$/i, - type: 'asset', - parser: { - dataUrlCondition: { - maxSize: 8192, - }, - }, - }, - { - test: /\.svg$/, - use: ['@svgr/webpack'], - }, - { - test: /\.(eot|otf|ttf|woff|woff2)$/, - type: 'asset/resource', - generator: { - filename: 'assets/fonts/[name].[hash][ext]', - }, - }, - ], - }, - resolve: { - extensions: ['.js', '.jsx'], - alias: { - '@stable': path.resolve(__dirname, 'src/stable'), - '@experimental': path.resolve(__dirname, 'src/experimental'), - '@shared': path.resolve(__dirname, 'src/shared'), - }, - }, - plugins: [ - isProduction && - new MiniCssExtractPlugin({ - filename: 'assets/css/[name].[contenthash].css', - chunkFilename: 'assets/css/[name].[contenthash].chunk.css', - }), - new HtmlWebpackPlugin({ - template: path.resolve(__dirname, 'public/index.html'), - inject: true, - minify: isProduction ? { - removeComments: true, - collapseWhitespace: true, - removeRedundantAttributes: true, - useShortDoctype: true, - removeEmptyAttributes: true, - removeStyleLinkTypeAttributes: true, - keepClosingSlash: true, - minifyJS: true, - minifyCSS: true, - minifyURLs: true, - } : undefined, - }), - new webpack.DefinePlugin({ - 'process.env.NODE_ENV': JSON.stringify( - isProduction ? 'production' : 'development' - ), - 'process.env.BUILD_TYPE': JSON.stringify(buildType), - }), - ].filter(Boolean), - optimization: { - minimize: isProduction, - minimizer: [ - new TerserWebpackPlugin({ - terserOptions: { - compress: { - comparisons: false, - inline: 2, - }, - mangle: { - safari10: true, - }, - output: { - comments: false, - ascii_only: true, - }, - }, - }), - new CssMinimizerPlugin(), - ], - splitChunks: { - chunks: 'all', - minSize: 20000, - minRemainingSize: 0, - minChunks: 1, - maxAsyncRequests: 30, - maxInitialRequests: 30, - enforceSizeThreshold: 50000, - cacheGroups: { - defaultVendors: { - test: /[\\/]node_modules[\\/]/, - priority: -10, - reuseExistingChunk: true, - }, - default: { - minChunks: 2, - priority: -20, - reuseExistingChunk: true, - }, - }, - }, - runtimeChunk: 'single', - }, - performance: { - hints: isProduction ? 'warning' : false, - maxEntrypointSize: 512000, - maxAssetSize: 512000, - }, - devServer: { - port: 3000, - compress: true, - historyApiFallback: true, - open: true, - client: { - overlay: true, - }, - }, - }; -}; \ No newline at end of file From 5df36dd8da954c0c084e5222379d509c09528324 Mon Sep 17 00:00:00 2001 From: Max Morgan Date: Wed, 15 Jan 2025 11:49:57 -0500 Subject: [PATCH 08/24] Simplify code for debugging --- .../organisms/GovBanner/GovBanner.js | 36 ++----------------- 1 file changed, 2 insertions(+), 34 deletions(-) diff --git a/src/stable/components/organisms/GovBanner/GovBanner.js b/src/stable/components/organisms/GovBanner/GovBanner.js index 4b1d4715..c5dc9ab3 100644 --- a/src/stable/components/organisms/GovBanner/GovBanner.js +++ b/src/stable/components/organisms/GovBanner/GovBanner.js @@ -34,12 +34,6 @@ template.innerHTML = ` `; class GovBanner extends HTMLElement { - static get observedAttributes() { - return['expanded']; - } - - static observedAttributes = ['expanded']; - constructor() { // Always call super first in constructor super(); @@ -47,36 +41,17 @@ class GovBanner extends HTMLElement { // Create a shadow root const shadow = this.attachShadow({ mode: 'open' }); shadow.appendChild(template.content.cloneNode(true)); - } connectedCallback() { this._setupListeners(); - this._updateExpandedState(this.expanded); } disconnectedCallback() { + // TODO: Confirm this is working correctly. const toggle = this.shadowRoot.querySelector('[part="toggle"]'); toggle.removeEventListener('click', this._handleToggle); } - attributeChangedCallback(name, oldValue, newValue){ - if(name == 'expanded'){ - this._updateExpandedState(newValue == 'true'); - } - } - - get expanded() { - return this.hasAttribute('expanded') && this.getAttribute('expanded') === 'true'; - } - - set expanded(value){ - if(value) { - this.setAttribute('expanded', 'true'); - } else { - this.removeAttribute('expanded'); - } - } - _setupListeners() { const toggle = this.shadowRoot.querySelector('[part="toggle"]'); if (toggle) { @@ -84,15 +59,8 @@ class GovBanner extends HTMLElement { } } - _updateExpandedState(isExpanded){ - const content = this.shadowRoot.querySelector('[part="content"]'); - const toggle = this.shadowRoot.querySelector('[part="toggle"]'); - toggle.setAttribute('aria-expanded', isExpanded); - content.hidden = !isExpanded; - } - _handleToggle() { - this.expanded = !this.expanded; + console.log('I was clicked.'); } } From 86aafdcab5d57dc0f93f14ede496e82e3111435c Mon Sep 17 00:00:00 2001 From: Shakira Reid-Thomas Date: Wed, 15 Jan 2025 17:11:42 -0500 Subject: [PATCH 09/24] Fixed JavaScript functionality and CSS Stylings with Media Queries --- .../organisms/GovBanner/GovBanner.css | 265 ++++++++++++++---- .../organisms/GovBanner/GovBanner.js | 74 +++-- src/stable/stories/govbanner.stories.js | 4 +- 3 files changed, 267 insertions(+), 76 deletions(-) diff --git a/src/stable/components/organisms/GovBanner/GovBanner.css b/src/stable/components/organisms/GovBanner/GovBanner.css index e9292fb9..e0381424 100644 --- a/src/stable/components/organisms/GovBanner/GovBanner.css +++ b/src/stable/components/organisms/GovBanner/GovBanner.css @@ -1,69 +1,236 @@ .banner-container { - width: 100%; - background-color: #004445; - color: white; + width: 100%; + background-color: #004445; + color: white; +} + +.banner-header { + display: flex; + justify-content: center; + align-items: center; + padding: 0.5rem 1rem; + max-width: 1200px; + margin: 0 auto; +} + +.title-section { + display: flex; + align-items: center; + gap: 1rem; +} + +.city-name { + font-weight: bold; + text-transform: uppercase; + display: inline-flex; + flex-direction: column; + align-items: center; +} + +.city-name > span { + display: inline-flex; + flex-direction: column; + align-items: center; +} + +.city-name > span:first-child { + font-size: 0.75rem; + line-height: 1; +} + +.city-name > span:last-child { + font-size: 1rem; +} + +.official-text { + display: flex; + align-items: center; + gap: 0.25rem; + font-size: 0.875rem; +} + +.know-text { + display: flex; + align-items: center; + text-decoration: underline; + cursor: pointer; + margin-left: 0.25rem; +} + +.chevron-container { + background: none; + border: none; + padding: 0; + color: inherit; + cursor: pointer; + display: inline-flex; + align-items: center; + margin-left: 0.25rem; +} + +.chevron-container svg { + transition: transform 0.2s ease; + width: 12px; + height: 12px; +} + +.chevron-container[aria-expanded="true"] svg { + transform: rotate(180deg); +} + +.content-container { + background-color: #f8f9fa; + width: 100%; + border-top: 1px solid #dee2e6; +} + +.info-section { + display: flex; + justify-content: space-between; + max-width: 1200px; + margin: 0 auto; + padding: 1.5rem 1rem; + gap: 2rem; +} + +.info-item { + display: flex; + gap: 1rem; + align-items: flex-start; + flex: 1; +} + +.icon-circle { + width: 48px; + height: 48px; + border-radius: 50%; + border: 2px solid #dee2e6; + background-color: white; + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; +} + +.gov-icon, .lock-icon { + font-size: 1.5rem; + color: #004445; +} + +.info-item h3 { + margin: 0 0 0.5rem 0; + font-size: 1rem; + font-weight: 600; + color: #212529; +} + +.info-item p { + margin: 0; + line-height: 1.5; + color: #495057; + font-size: 0.875rem; +} + +/* @media (max-width: 900px) and (min-width: 769px) { + .banner-header { + justify-content: center; } - .banner-header { + .title-section { + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + gap: 1rem; + } + + .city-name { + margin-top: 0.25rem; + flex-shrink: 0; + } + + .official-text { display: flex; - justify-content: space-between; + flex-direction: column; align-items: center; - padding: 0.75rem 1rem; + white-space: nowrap; + min-width: 0; + } + + .know-text { + display: flex; + justify-content: center; + margin-top: 0.5rem; + width: 100%; + } +} + +@media (max-width: 768px) { + .banner-header { + justify-content: flex-start; + padding-top: 0.75rem; + padding-bottom: 0.75rem; } .title-section { display: flex; + flex-direction: row; align-items: center; - gap: 0.5rem; - flex: 1; + gap: 1rem; } - + + .city-name { + margin-top: 0.25rem; + flex-shrink: 0; + } + .official-text { display: flex; - gap: 0.25rem; - flex-wrap: wrap; + flex-direction: column; + align-items: flex-start; + white-space: nowrap; + min-width: 0; } - + .know-text { - text-decoration: underline; + display: flex; + justify-content: center; + margin-top: 0.5rem; + width: 100%; } - - .chevron-container { - background: none; - border: none; - padding: 0.5rem; - color: inherit; - cursor: pointer; +} */ + +/* Tablet and Mobile shared styles */ +@media (max-width: 900px) { + .official-text { + display: flex; + flex-direction: column; + white-space: nowrap; + min-width: 0; } - - .chevron-container svg { - transition: transform 0.2s ease; + + .know-text { + display: flex; + justify-content: center; + margin-top: 0.5rem; + width: 100%; } - - .chevron-container[aria-expanded="true"] svg { - transform: rotate(180deg); + + .city-name { + margin-top: 0.25rem; + flex-shrink: 0; } - - .content-container { - background-color: #f0f0f0; - padding: 1rem; - color: #333; +} + +/* Mobile-specific overrides */ +@media (max-width: 550px) { + .banner-header { + justify-content: flex-start; + padding-top: 0.75rem; + padding-bottom: 0.75rem; } - - @media (max-width: 768px) { - .banner-header { - flex-direction: column; - align-items: flex-start; - gap: 0.5rem; - } - - .title-section { - flex-direction: column; - align-items: flex-start; - } - - .chevron-container { - align-self: flex-end; - margin-top: -2rem; - } - } \ No newline at end of file + + .official-text { + align-items: flex-start; + } +} diff --git a/src/stable/components/organisms/GovBanner/GovBanner.js b/src/stable/components/organisms/GovBanner/GovBanner.js index c5dc9ab3..1a7f94cc 100644 --- a/src/stable/components/organisms/GovBanner/GovBanner.js +++ b/src/stable/components/organisms/GovBanner/GovBanner.js @@ -3,64 +3,88 @@ import varStyles from '!!raw-loader!../../../../shared/variables.css'; import bootstrapStyles from '!!raw-loader!../../../../shared/themed-bootstrap.css'; const template = document.createElement('template'); - template.innerHTML = ` - + `; class GovBanner extends HTMLElement { constructor() { - // Always call super first in constructor super(); - - // Create a shadow root const shadow = this.attachShadow({ mode: 'open' }); shadow.appendChild(template.content.cloneNode(true)); } + connectedCallback() { this._setupListeners(); } disconnectedCallback() { - // TODO: Confirm this is working correctly. - const toggle = this.shadowRoot.querySelector('[part="toggle"]'); + const toggle = this.shadowRoot.querySelector('.chevron-container'); toggle.removeEventListener('click', this._handleToggle); } _setupListeners() { - const toggle = this.shadowRoot.querySelector('[part="toggle"]'); + const toggle = this.shadowRoot.querySelector('.chevron-container'); if (toggle) { toggle.addEventListener('click', this._handleToggle.bind(this)); } } _handleToggle() { - console.log('I was clicked.'); + const content = this.shadowRoot.querySelector('#content'); + const button = this.shadowRoot.querySelector('.chevron-container'); + if (content && button) { + const isExpanded = button.getAttribute('aria-expanded') === 'true'; + button.setAttribute('aria-expanded', !isExpanded); + content.hidden = isExpanded; + } } } diff --git a/src/stable/stories/govbanner.stories.js b/src/stable/stories/govbanner.stories.js index 3f9f6743..0caae1e0 100644 --- a/src/stable/stories/govbanner.stories.js +++ b/src/stable/stories/govbanner.stories.js @@ -9,7 +9,7 @@ export default { export const Default = { render: () => html` - + CITY OF DETROIT An official website of the City of Detroit. Here's how you know. @@ -36,6 +36,6 @@ export const Default = { - + `, }; \ No newline at end of file From 5ce0fbead1a333e2dc01f01490cffcc1415974b9 Mon Sep 17 00:00:00 2001 From: Shakira Reid-Thomas Date: Wed, 15 Jan 2025 17:12:43 -0500 Subject: [PATCH 10/24] Fixed prettier issues in one file --- src/stable/stories/govbanner.stories.js | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/src/stable/stories/govbanner.stories.js b/src/stable/stories/govbanner.stories.js index 0caae1e0..993f6033 100644 --- a/src/stable/stories/govbanner.stories.js +++ b/src/stable/stories/govbanner.stories.js @@ -4,14 +4,16 @@ import { COMMON_STORY_ARGS } from '../../shared/js/storybook/args-utils'; export default { title: 'Organisms/GovBanner', - tags: ['autodocs'] + tags: ['autodocs'], }; export const Default = { render: () => html` CITY OF DETROIT - An official website of the City of Detroit. + An official website of the City of Detroit. Here's how you know. ▼
@@ -20,7 +22,10 @@ export const Default = {
🏛️

Official websites use .gov

-

A .gov website belongs to an official government organization in the United States.

+

+ A .gov website belongs to an official government organization in + the United States. +

@@ -38,4 +43,4 @@ export const Default = {
`, -}; \ No newline at end of file +}; From 65d795b7cc052670d798cdd28f9d44b3768a3464 Mon Sep 17 00:00:00 2001 From: Shakira Reid-Thomas Date: Wed, 15 Jan 2025 17:20:12 -0500 Subject: [PATCH 11/24] Fixed prettier issues in 5 files --- src/stable/components/organisms/GovBanner/GovBanner.css | 5 +++-- src/stable/components/organisms/GovBanner/GovBanner.js | 2 +- src/stable/components/organisms/GovBanner/GovBanner.scss | 2 +- src/stable/components/organisms/GovBanner/cod-gov-banner.js | 2 +- src/stable/stories/govbanner.stories.js | 1 - 5 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/stable/components/organisms/GovBanner/GovBanner.css b/src/stable/components/organisms/GovBanner/GovBanner.css index e0381424..cb69e84a 100644 --- a/src/stable/components/organisms/GovBanner/GovBanner.css +++ b/src/stable/components/organisms/GovBanner/GovBanner.css @@ -74,7 +74,7 @@ height: 12px; } -.chevron-container[aria-expanded="true"] svg { +.chevron-container[aria-expanded='true'] svg { transform: rotate(180deg); } @@ -112,7 +112,8 @@ flex-shrink: 0; } -.gov-icon, .lock-icon { +.gov-icon, +.lock-icon { font-size: 1.5rem; color: #004445; } diff --git a/src/stable/components/organisms/GovBanner/GovBanner.js b/src/stable/components/organisms/GovBanner/GovBanner.js index 1a7f94cc..5098d9e9 100644 --- a/src/stable/components/organisms/GovBanner/GovBanner.js +++ b/src/stable/components/organisms/GovBanner/GovBanner.js @@ -88,4 +88,4 @@ class GovBanner extends HTMLElement { } } -export { GovBanner as default }; \ No newline at end of file +export { GovBanner as default }; diff --git a/src/stable/components/organisms/GovBanner/GovBanner.scss b/src/stable/components/organisms/GovBanner/GovBanner.scss index 1f2997a4..ecdce5d8 100644 --- a/src/stable/components/organisms/GovBanner/GovBanner.scss +++ b/src/stable/components/organisms/GovBanner/GovBanner.scss @@ -1 +1 @@ -// Only Use For Complex Styling Tasks such as looping, functions, variables, etc \ No newline at end of file +// Only Use For Complex Styling Tasks such as looping, functions, variables, etc diff --git a/src/stable/components/organisms/GovBanner/cod-gov-banner.js b/src/stable/components/organisms/GovBanner/cod-gov-banner.js index c7360bfc..6bc7a117 100644 --- a/src/stable/components/organisms/GovBanner/cod-gov-banner.js +++ b/src/stable/components/organisms/GovBanner/cod-gov-banner.js @@ -1,2 +1,2 @@ import GovBanner from './GovBanner'; -customElements.define('cod-gov-banner', GovBanner); \ No newline at end of file +customElements.define('cod-gov-banner', GovBanner); diff --git a/src/stable/stories/govbanner.stories.js b/src/stable/stories/govbanner.stories.js index 993f6033..7db8dbfa 100644 --- a/src/stable/stories/govbanner.stories.js +++ b/src/stable/stories/govbanner.stories.js @@ -1,6 +1,5 @@ import { html } from 'lit-html'; import '../../stable/components/organisms/GovBanner/cod-gov-banner'; -import { COMMON_STORY_ARGS } from '../../shared/js/storybook/args-utils'; export default { title: 'Organisms/GovBanner', From 36f2b2847c8a1f4ca24a17220874a1531c8aea44 Mon Sep 17 00:00:00 2001 From: Shakira Reid-Thomas Date: Thu, 16 Jan 2025 10:09:45 -0500 Subject: [PATCH 12/24] Fixed prettier issues in GovBanner.css, closed gap with text in banner and stacked drop down content in mobile view --- .../organisms/GovBanner/GovBanner.css | 82 +++---------------- 1 file changed, 12 insertions(+), 70 deletions(-) diff --git a/src/stable/components/organisms/GovBanner/GovBanner.css b/src/stable/components/organisms/GovBanner/GovBanner.css index cb69e84a..7aaee321 100644 --- a/src/stable/components/organisms/GovBanner/GovBanner.css +++ b/src/stable/components/organisms/GovBanner/GovBanner.css @@ -132,75 +132,6 @@ font-size: 0.875rem; } -/* @media (max-width: 900px) and (min-width: 769px) { - .banner-header { - justify-content: center; - } - - .title-section { - display: flex; - flex-direction: row; - align-items: center; - justify-content: center; - gap: 1rem; - } - - .city-name { - margin-top: 0.25rem; - flex-shrink: 0; - } - - .official-text { - display: flex; - flex-direction: column; - align-items: center; - white-space: nowrap; - min-width: 0; - } - - .know-text { - display: flex; - justify-content: center; - margin-top: 0.5rem; - width: 100%; - } -} - -@media (max-width: 768px) { - .banner-header { - justify-content: flex-start; - padding-top: 0.75rem; - padding-bottom: 0.75rem; - } - - .title-section { - display: flex; - flex-direction: row; - align-items: center; - gap: 1rem; - } - - .city-name { - margin-top: 0.25rem; - flex-shrink: 0; - } - - .official-text { - display: flex; - flex-direction: column; - align-items: flex-start; - white-space: nowrap; - min-width: 0; - } - - .know-text { - display: flex; - justify-content: center; - margin-top: 0.5rem; - width: 100%; - } -} */ - /* Tablet and Mobile shared styles */ @media (max-width: 900px) { .official-text { @@ -208,12 +139,13 @@ flex-direction: column; white-space: nowrap; min-width: 0; + gap: 0.0625rem; } .know-text { display: flex; justify-content: center; - margin-top: 0.5rem; + margin-top: 0.0625rem; width: 100%; } @@ -234,4 +166,14 @@ .official-text { align-items: flex-start; } + + .info-section { + flex-direction: column; + padding: 1rem; + gap: 1.5rem; + } + + .info-item { + width: 100%; + } } From b56e5a5bd71cf32eab3cecd356f0d2c282a2d31b Mon Sep 17 00:00:00 2001 From: Shakira Reid-Thomas Date: Thu, 16 Jan 2025 10:15:43 -0500 Subject: [PATCH 13/24] Changed comment in index-stable.js --- src/stable/index-stable.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/stable/index-stable.js b/src/stable/index-stable.js index 9b15936f..41110461 100644 --- a/src/stable/index-stable.js +++ b/src/stable/index-stable.js @@ -1,2 +1,2 @@ -// Import GovBanner component +// Importing Organisms import './components/organisms/GovBanner/cod-gov-banner.js'; From d328488c51fcd2e88758cfa82de503767ffbdebd Mon Sep 17 00:00:00 2001 From: Shakira Reid-Thomas Date: Tue, 21 Jan 2025 11:01:22 -0500 Subject: [PATCH 14/24] Removed H3s and added spans instead --- src/stable/components/organisms/GovBanner/GovBanner.css | 2 +- src/stable/components/organisms/GovBanner/GovBanner.js | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/stable/components/organisms/GovBanner/GovBanner.css b/src/stable/components/organisms/GovBanner/GovBanner.css index 7aaee321..d4ba2eab 100644 --- a/src/stable/components/organisms/GovBanner/GovBanner.css +++ b/src/stable/components/organisms/GovBanner/GovBanner.css @@ -118,7 +118,7 @@ color: #004445; } -.info-item h3 { +.info-item .info-title { margin: 0 0 0.5rem 0; font-size: 1rem; font-weight: 600; diff --git a/src/stable/components/organisms/GovBanner/GovBanner.js b/src/stable/components/organisms/GovBanner/GovBanner.js index 5098d9e9..31dee94f 100644 --- a/src/stable/components/organisms/GovBanner/GovBanner.js +++ b/src/stable/components/organisms/GovBanner/GovBanner.js @@ -36,7 +36,7 @@ template.innerHTML = ` 🏛️
-

Official websites use .gov

+ Official websites use .gov

A .gov website belongs to an official government organization in the United States.

@@ -45,7 +45,7 @@ template.innerHTML = ` 🔒
-

Secure .gov websites use HTTPS

+ Secure .gov websites use HTTPS

A lock (🔒) or https:// means you've safely connected to the .gov website. Share sensitive information only on official, secure websites.

From 620eb456aa4a078755ecb2ea8300c9ae592be5c9 Mon Sep 17 00:00:00 2001 From: Shakira Reid-Thomas Date: Tue, 21 Jan 2025 11:03:50 -0500 Subject: [PATCH 15/24] Removed H3s and added span in stories file --- src/stable/stories/govbanner.stories.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/stable/stories/govbanner.stories.js b/src/stable/stories/govbanner.stories.js index 7db8dbfa..1b2f6dfd 100644 --- a/src/stable/stories/govbanner.stories.js +++ b/src/stable/stories/govbanner.stories.js @@ -20,7 +20,7 @@ export const Default = {
🏛️
-

Official websites use .gov

+ Official websites use .gov

A .gov website belongs to an official government organization in the United States. @@ -30,7 +30,7 @@ export const Default = {

🔒
-

Secure .gov websites use HTTPS

+ Secure .gov websites use HTTPS

A lock or https:// means you've safely connected to the .gov website. Share sensitive information only on official, secure From 410113f517d50886b4518a2625e06e383b0fe4b7 Mon Sep 17 00:00:00 2001 From: Shakira Reid-Thomas Date: Tue, 21 Jan 2025 11:05:51 -0500 Subject: [PATCH 16/24] Removed template code from govbanner.stories.js --- src/stable/stories/govbanner.stories.js | 31 ------------------------- 1 file changed, 31 deletions(-) diff --git a/src/stable/stories/govbanner.stories.js b/src/stable/stories/govbanner.stories.js index 1b2f6dfd..f4fccbb2 100644 --- a/src/stable/stories/govbanner.stories.js +++ b/src/stable/stories/govbanner.stories.js @@ -9,37 +9,6 @@ export default { export const Default = { render: () => html` - CITY OF DETROIT - An official website of the City of Detroit. - Here's how you know. - ▼ -

-
-
-
🏛️
-
- Official websites use .gov -

- A .gov website belongs to an official government organization in - the United States. -

-
-
-
-
🔒
-
- Secure .gov websites use HTTPS -

- A lock or https:// means you've safely connected to the .gov - website. Share sensitive information only on official, secure - websites. -

-
-
-
-
`, }; From bd4c692e3c8f18e234bc3613d8625803b771f21a Mon Sep 17 00:00:00 2001 From: Shakira Reid-Thomas Date: Tue, 21 Jan 2025 11:30:23 -0500 Subject: [PATCH 17/24] Used getters and setters for dropdown functionality --- .../organisms/GovBanner/GovBanner.js | 49 ++++++++++++++----- 1 file changed, 38 insertions(+), 11 deletions(-) diff --git a/src/stable/components/organisms/GovBanner/GovBanner.js b/src/stable/components/organisms/GovBanner/GovBanner.js index 31dee94f..effcd624 100644 --- a/src/stable/components/organisms/GovBanner/GovBanner.js +++ b/src/stable/components/organisms/GovBanner/GovBanner.js @@ -55,14 +55,32 @@ template.innerHTML = ` `; class GovBanner extends HTMLElement { + + static get observedAttributes(){ + return['expanded']; + } + constructor() { super(); const shadow = this.attachShadow({ mode: 'open' }); shadow.appendChild(template.content.cloneNode(true)); } + get expanded(){ + return this.hasAttribute('expanded') && this.getAttribute('expanded') === 'true'; + } + + set expanded(value) { + if(value) { + this.setAttribute('expanded', 'true'); + } else { + this.removeAttribute('expanded'); + } + } + connectedCallback() { this._setupListeners(); + this._updateExpandedState(this.expanded); } disconnectedCallback() { @@ -70,22 +88,31 @@ class GovBanner extends HTMLElement { toggle.removeEventListener('click', this._handleToggle); } + attributeChangedCallback(name, oldValue, newValue) { + if(name === 'expanded'){ + this._updateExpandedState(newValue === 'true'); + } + } + _setupListeners() { const toggle = this.shadowRoot.querySelector('.chevron-container'); if (toggle) { toggle.addEventListener('click', this._handleToggle.bind(this)); } } - _handleToggle() { - const content = this.shadowRoot.querySelector('#content'); - const button = this.shadowRoot.querySelector('.chevron-container'); - if (content && button) { - const isExpanded = button.getAttribute('aria-expanded') === 'true'; - button.setAttribute('aria-expanded', !isExpanded); - content.hidden = isExpanded; - } - } -} + this.expanded = !this.expanded; + } + + _updateExpandedState(isExpanded){ + const content = this.shadowRoot.querySelector('#content'); + const button = this.shadowRoot.querySelector('.chevron-container'); + + if (content && button) { + button.setAttribute('aria-expanded', isExpanded); + content.hidden = !isExpanded; + } + } + } -export { GovBanner as default }; +export { GovBanner as default }; \ No newline at end of file From c46166bdf68a90ff6ec32c95c5eb75eaeb6bca73 Mon Sep 17 00:00:00 2001 From: Shakira Reid-Thomas Date: Tue, 21 Jan 2025 11:39:12 -0500 Subject: [PATCH 18/24] Fixed prettier issues in 2 files --- .../organisms/GovBanner/GovBanner.js | 41 ++++++++++--------- 1 file changed, 21 insertions(+), 20 deletions(-) diff --git a/src/stable/components/organisms/GovBanner/GovBanner.js b/src/stable/components/organisms/GovBanner/GovBanner.js index effcd624..650e0a94 100644 --- a/src/stable/components/organisms/GovBanner/GovBanner.js +++ b/src/stable/components/organisms/GovBanner/GovBanner.js @@ -55,9 +55,8 @@ template.innerHTML = ` `; class GovBanner extends HTMLElement { - - static get observedAttributes(){ - return['expanded']; + static get observedAttributes() { + return ['expanded']; } constructor() { @@ -66,12 +65,14 @@ class GovBanner extends HTMLElement { shadow.appendChild(template.content.cloneNode(true)); } - get expanded(){ - return this.hasAttribute('expanded') && this.getAttribute('expanded') === 'true'; + get expanded() { + return ( + this.hasAttribute('expanded') && this.getAttribute('expanded') === 'true' + ); } set expanded(value) { - if(value) { + if (value) { this.setAttribute('expanded', 'true'); } else { this.removeAttribute('expanded'); @@ -89,7 +90,7 @@ class GovBanner extends HTMLElement { } attributeChangedCallback(name, oldValue, newValue) { - if(name === 'expanded'){ + if (name === 'expanded') { this._updateExpandedState(newValue === 'true'); } } @@ -102,17 +103,17 @@ class GovBanner extends HTMLElement { } _handleToggle() { this.expanded = !this.expanded; - } - - _updateExpandedState(isExpanded){ - const content = this.shadowRoot.querySelector('#content'); - const button = this.shadowRoot.querySelector('.chevron-container'); - - if (content && button) { - button.setAttribute('aria-expanded', isExpanded); - content.hidden = !isExpanded; - } - } - } + } + + _updateExpandedState(isExpanded) { + const content = this.shadowRoot.querySelector('#content'); + const button = this.shadowRoot.querySelector('.chevron-container'); + + if (content && button) { + button.setAttribute('aria-expanded', isExpanded); + content.hidden = !isExpanded; + } + } +} -export { GovBanner as default }; \ No newline at end of file +export { GovBanner as default }; From 3fc5074d72bb722e2465c6b3b15919a0ee5f0df3 Mon Sep 17 00:00:00 2001 From: Shakira Reid-Thomas Date: Tue, 21 Jan 2025 11:44:05 -0500 Subject: [PATCH 19/24] Fixed prettier issues in 2 files --- src/stable/stories/govbanner.stories.js | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/src/stable/stories/govbanner.stories.js b/src/stable/stories/govbanner.stories.js index f4fccbb2..2a3159eb 100644 --- a/src/stable/stories/govbanner.stories.js +++ b/src/stable/stories/govbanner.stories.js @@ -7,8 +7,5 @@ export default { }; export const Default = { - render: () => html` - - - `, + render: () => html` `, }; From da0850e44f3be226399091aac0e565fb2e032f20 Mon Sep 17 00:00:00 2001 From: Shakira Reid-Thomas Date: Thu, 23 Jan 2025 09:52:29 -0500 Subject: [PATCH 20/24] Removed organisms folder and updated imports --- src/stable/components/{organisms => }/GovBanner/GovBanner.css | 0 src/stable/components/{organisms => }/GovBanner/GovBanner.js | 4 ++-- .../components/{organisms => }/GovBanner/GovBanner.scss | 0 .../components/{organisms => }/GovBanner/cod-gov-banner.js | 0 src/stable/stories/govbanner.stories.js | 2 +- 5 files changed, 3 insertions(+), 3 deletions(-) rename src/stable/components/{organisms => }/GovBanner/GovBanner.css (100%) rename src/stable/components/{organisms => }/GovBanner/GovBanner.js (95%) rename src/stable/components/{organisms => }/GovBanner/GovBanner.scss (100%) rename src/stable/components/{organisms => }/GovBanner/cod-gov-banner.js (100%) diff --git a/src/stable/components/organisms/GovBanner/GovBanner.css b/src/stable/components/GovBanner/GovBanner.css similarity index 100% rename from src/stable/components/organisms/GovBanner/GovBanner.css rename to src/stable/components/GovBanner/GovBanner.css diff --git a/src/stable/components/organisms/GovBanner/GovBanner.js b/src/stable/components/GovBanner/GovBanner.js similarity index 95% rename from src/stable/components/organisms/GovBanner/GovBanner.js rename to src/stable/components/GovBanner/GovBanner.js index 650e0a94..fb3d2647 100644 --- a/src/stable/components/organisms/GovBanner/GovBanner.js +++ b/src/stable/components/GovBanner/GovBanner.js @@ -1,6 +1,6 @@ import styles from '!!raw-loader!./GovBanner.css'; -import varStyles from '!!raw-loader!../../../../shared/variables.css'; -import bootstrapStyles from '!!raw-loader!../../../../shared/themed-bootstrap.css'; +import varStyles from '!!raw-loader!../../../shared/variables.css'; +import bootstrapStyles from '!!raw-loader!../../../shared/themed-bootstrap.css'; const template = document.createElement('template'); template.innerHTML = ` diff --git a/src/stable/components/organisms/GovBanner/GovBanner.scss b/src/stable/components/GovBanner/GovBanner.scss similarity index 100% rename from src/stable/components/organisms/GovBanner/GovBanner.scss rename to src/stable/components/GovBanner/GovBanner.scss diff --git a/src/stable/components/organisms/GovBanner/cod-gov-banner.js b/src/stable/components/GovBanner/cod-gov-banner.js similarity index 100% rename from src/stable/components/organisms/GovBanner/cod-gov-banner.js rename to src/stable/components/GovBanner/cod-gov-banner.js diff --git a/src/stable/stories/govbanner.stories.js b/src/stable/stories/govbanner.stories.js index 2a3159eb..bd0140c5 100644 --- a/src/stable/stories/govbanner.stories.js +++ b/src/stable/stories/govbanner.stories.js @@ -1,5 +1,5 @@ import { html } from 'lit-html'; -import '../../stable/components/organisms/GovBanner/cod-gov-banner'; +import '../components/GovBanner/cod-gov-banner'; export default { title: 'Organisms/GovBanner', From 86a3de7c7c94a87bf0299bec9a95aad25801b157 Mon Sep 17 00:00:00 2001 From: Shakira Reid-Thomas Date: Thu, 23 Jan 2025 10:32:06 -0500 Subject: [PATCH 21/24] Updated import path in index-stable.js --- src/stable/index-stable.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/stable/index-stable.js b/src/stable/index-stable.js index 41110461..72730de3 100644 --- a/src/stable/index-stable.js +++ b/src/stable/index-stable.js @@ -1,2 +1,2 @@ // Importing Organisms -import './components/organisms/GovBanner/cod-gov-banner.js'; +import './components/GovBanner/cod-gov-banner.js'; From 46efee9caac79ff20b820dfb1bbb256c31103a8b Mon Sep 17 00:00:00 2001 From: Shakira Reid-Thomas Date: Thu, 23 Jan 2025 10:45:06 -0500 Subject: [PATCH 22/24] Updated stories file to rename section in Storybook as Stable --- src/stable/index-stable.js | 1 - src/stable/stories/govbanner.stories.js | 2 +- 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/src/stable/index-stable.js b/src/stable/index-stable.js index 72730de3..b20dac72 100644 --- a/src/stable/index-stable.js +++ b/src/stable/index-stable.js @@ -1,2 +1 @@ -// Importing Organisms import './components/GovBanner/cod-gov-banner.js'; diff --git a/src/stable/stories/govbanner.stories.js b/src/stable/stories/govbanner.stories.js index bd0140c5..f61ab101 100644 --- a/src/stable/stories/govbanner.stories.js +++ b/src/stable/stories/govbanner.stories.js @@ -2,7 +2,7 @@ import { html } from 'lit-html'; import '../components/GovBanner/cod-gov-banner'; export default { - title: 'Organisms/GovBanner', + title: 'Stable/GovBanner', tags: ['autodocs'], }; From b246e722637a8876e29c084777377908d76e780b Mon Sep 17 00:00:00 2001 From: Shakira Reid-Thomas Date: Thu, 23 Jan 2025 11:51:40 -0500 Subject: [PATCH 23/24] Added a custom event (emit) --- src/stable/components/GovBanner/GovBanner.js | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/src/stable/components/GovBanner/GovBanner.js b/src/stable/components/GovBanner/GovBanner.js index fb3d2647..66b6d617 100644 --- a/src/stable/components/GovBanner/GovBanner.js +++ b/src/stable/components/GovBanner/GovBanner.js @@ -72,11 +72,24 @@ class GovBanner extends HTMLElement { } set expanded(value) { - if (value) { + const isExpanded = Boolean(value); + + if (isExpanded === this.expanded) { + return; + } + + if (isExpanded) { this.setAttribute('expanded', 'true'); } else { this.removeAttribute('expanded'); } + + this.dispatchEvent( + new CustomEvent('expandedchange', { + detail: { expanded: isExpanded }, + bubbles: true, + }) + ); } connectedCallback() { From 9c7ea36174d438b1250eb31423a145daed4adffb Mon Sep 17 00:00:00 2001 From: Shakira Reid-Thomas Date: Thu, 23 Jan 2025 12:13:56 -0500 Subject: [PATCH 24/24] Fixed prettier issues in 1 file --- src/stable/components/GovBanner/GovBanner.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/stable/components/GovBanner/GovBanner.js b/src/stable/components/GovBanner/GovBanner.js index 66b6d617..9adf294b 100644 --- a/src/stable/components/GovBanner/GovBanner.js +++ b/src/stable/components/GovBanner/GovBanner.js @@ -88,7 +88,7 @@ class GovBanner extends HTMLElement { new CustomEvent('expandedchange', { detail: { expanded: isExpanded }, bubbles: true, - }) + }), ); }