Merge branch 'main' into denpitco-masking-tests

Author: dpitcock

build-tools/tasks/a11y.js

@@ -13,7 +13,7 @@ module.exports = task('test:a11y', async () => {
     },
   };
   const shard = parseArgs({ options, strict: false }).values.shard;
-  const devServer = execa('webpack', ['serve', '--config', 'pages/webpack.config.integ.js'], {
+  const devServer = execa('webpack', ['serve', '--config', 'pages/webpack.config.integ.cjs'], {
     env: {
       NODE_ENV: 'development',
     },

build-tools/tasks/build-pages.js

@@ -6,7 +6,7 @@ const webpack = require('webpack');
 const { parallel } = require('gulp');
 const path = require('path');
 const { mkdirSync, existsSync } = require('fs');
-const createConfig = require('../../pages/webpack.config');
+const createConfig = require('../../pages/webpack.config.cjs');
 const { task } = require('../utils/gulp-utils');
 const workspace = require('../utils/workspace');
 

build-tools/tasks/integ.js

@@ -13,7 +13,7 @@ module.exports = task('test:integ', async () => {
     },
   };
   const shard = parseArgs({ options, strict: false }).values.shard;
-  const devServer = execa('webpack', ['serve', '--config', 'pages/webpack.config.integ.js'], {
+  const devServer = execa('webpack', ['serve', '--config', 'pages/webpack.config.integ.cjs'], {
     env: {
       NODE_ENV: 'development',
     },

build-tools/tasks/motion.js

@@ -6,7 +6,7 @@ const waitOn = require('wait-on');
 const { task } = require('../utils/gulp-utils.js');
 
 module.exports = task('test:motion', async () => {
-  const devServer = execa('webpack', ['serve', '--config', 'pages/webpack.config.integ.js'], {
+  const devServer = execa('webpack', ['serve', '--config', 'pages/webpack.config.integ.cjs'], {
     env: {
       NODE_ENV: 'development',
     },

package.json

@@ -20,8 +20,8 @@
     "lint:stylelint": "stylelint --ignore-path .gitignore --fix '{src,pages}/**/*.{css,scss}'",
     "start": "npm-run-all --parallel start:watch start:dev",
     "start:watch": "gulp watch",
-    "start:dev": "cross-env NODE_ENV=development webpack serve --config pages/webpack.config.js",
-    "start:integ": "cross-env NODE_ENV=development webpack serve --config pages/webpack.config.integ.js",
+    "start:dev": "cross-env NODE_ENV=development webpack serve --config pages/webpack.config.cjs",
+    "start:integ": "cross-env NODE_ENV=development webpack serve --config pages/webpack.config.integ.cjs",
     "prepare": "husky"
   },
   "dependencies": {

pages/webpack.config.base.js renamed to pages/webpack.config.base.cjs

@@ -1,7 +1,7 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 const path = require('path');
-const baseConfig = require('./webpack.config.base');
+const baseConfig = require('./webpack.config.base.cjs');
 const themes = require('../build-tools/utils/themes');
 const workspace = require('../build-tools/utils/workspace');
 

pages/webpack.config.js renamed to pages/webpack.config.cjs

@@ -1,7 +1,7 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-const baseConfig = require('./webpack.config');
 const merge = require('lodash/merge');
+const baseConfig = require('./webpack.config.cjs');
 
 module.exports = (...args) => {
   const webConfig = baseConfig(...args);

pages/webpack.config.integ.js renamed to pages/webpack.config.integ.cjs

@@ -140,7 +140,7 @@ $drawer-resize-handle-size: awsui.$space-m;
       z-index: 1;
       align-self: start;
       display: flex;
-      justify-content: end;
+      justify-content: flex-end;
     }
 
     > .drawer-content {
@@ -168,6 +168,7 @@ $drawer-resize-handle-size: awsui.$space-m;
 
     @include mobile-only {
       grid-template-columns: 1fr;
+      grid-column: 1 / span 2;
     }
 
     > .drawer-gap {
@@ -223,7 +224,7 @@ $drawer-resize-handle-size: awsui.$space-m;
         z-index: 1;
         align-self: start;
         display: flex;
-        justify-content: end;
+        justify-content: flex-end;
       }
 
       > .drawer-content {