Merge pull request #586 from carbon-design-system/dev

`v1.25.0`

.achecker.yml

@@ -1,3 +1,5 @@
+# https://www.npmjs.com/package/accessibility-checker#configuring-accessibility-checker
+
 # optional - Specify the rule archive
 # Default: latest
 # Run `npx achecker archives` for a list of valid ruleArchive ids and policy ids
@@ -8,7 +10,7 @@ ruleArchive: latest
 # i.e. Multiple policies: IBM_Accessibility,IBM_Accessibility_BETA
 # Run `npx achecker archives` for a list of valid ruleArchive ids and policy ids
 policies:
-    - IBM_Accessibility
+  - WCAG_2_1
 
 # optional - Specify one or many violation levels on which to fail the test
 #            i.e. If specified violation then the testcase will only fail if
@@ -17,7 +19,7 @@ policies:
 # i.e. failLevels: violation,potential violation or refer to below as a list
 # Default: violation, potentialviolation
 failLevels:
-    - violation
+  - violation
 
 # optional - Specify one or many violation levels which should be reported
 #            i.e. If specified violation then in the report it would only contain
@@ -26,14 +28,14 @@ failLevels:
 # Valid values: violation, potentialviolation, recommendation, potentialrecommendation, manual
 # Default: violation, potentialviolation
 reportLevels:
-    - violation
-    - potentialviolation
+  - potentialviolation
+  - violation
 
 # Optional - Which type should the results be outputted to
 # Valid values: json, csv
 # Default: json
 outputFormat:
-    - json
+  - json
 
 # Optional - Specify labels that you would like associated to your scan
 #
@@ -45,8 +47,6 @@ outputFormat:
 #       - V12
 #       - Linux
 # Default: N/A
-label:
-    - master
 
 # optional - Where the scan results should be saved.
 # Default: results

.github/ISSUE_TEMPLATE/CARBON.md

@@ -0,0 +1,12 @@
+---
+name: Carbon upgrade
+about: Issue template for upgrading Carbon
+---
+
+## Upgrade to Carbon `vx.x.x`
+
+### Description
+
+Upgrade to the latest version of Carbon and manually verify that no issues were introduced:
+
+- [ ] <!-- https://github.com/carbon-design-system/carbon/releases/tag/vx.x.x -->

.gitignore

@@ -4,14 +4,15 @@
 
 # Generated directories.
 coverage
-css
+/css
 es
 lib
 node_modules
 /scss
 storybook-static
 
-# Generated Gridish file.
+# CSS Gridish.
+src/globals/grid/css-gridish/css
 src/globals/grid/css-gridish/bx-grid.sketch
 
 # Logs.
@@ -27,4 +28,4 @@ src/globals/grid/css-gridish/bx-grid.sketch
 package-lock.json
 
 # AAT test results from DAP/Axe
-results/ 
+results/

config/jest/matchers/toHaveNoDAPViolations.js

@@ -5,9 +5,16 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import aChecker from 'accessibility-checker';
+let aChecker;
 
 async function toHaveNoDAPViolations(node, label) {
+  // We defer initialization of AAT as it seems to have a race condition if
+  // we are running a test suite in node instead of jsdom. As a result, we only
+  // initialize it if this matcher is called
+  if (!aChecker) {
+    aChecker = require('accessibility-checker');
+  }
+
   const results = await aChecker.getCompliance(node, label);
   if (aChecker.assertCompliance(results.report) === 0) {
     return {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carbon/ibm-security",
-  "version": "1.24.0",
+  "version": "1.25.0-prerelease.5",
   "description": "Carbon for IBM Security",
   "license": "Apache-2.0",
   "main": "lib/index.js",
@@ -37,7 +37,7 @@
     "lint-staged": "lint-staged",
     "semantic-release": "semantic-release",
     "start": "run-s build:pre:grid && start-storybook -p 3000 -s public",
-    "test": "yarn jest spec -ci",
+    "test": "yarn jest spec --ci -i",
     "test:precommit": "yarn jest -b --passWithNoTests --testMatch src/**/*.spec.js --findRelatedTests",
     "test:imports": "scripts/checkImports.sh",
     "test:scss": "node scripts/scss",
@@ -104,7 +104,7 @@
     "@testing-library/jest-dom": "4.2.4",
     "@testing-library/react": "9.3.2",
     "@testing-library/user-event": "8.1.0",
-    "accessibility-checker": "^3.0.2",
+    "accessibility-checker": "^3.0.4",
     "autoprefixer": "^9.4.10",
     "axe-core": "^3.4.1",
     "babel-eslint": "^10.0.1",
@@ -181,7 +181,6 @@
     "lib",
     "dist",
     "scss",
-    "storybook-static",
     "macros"
   ],
   "jest": {

scripts/scss/compile/index.js

@@ -0,0 +1,20 @@
+/**
+ * @file SCSS compilation helpers.
+ * @copyright IBM Security 2020
+ */
+
+const { sync } = require('glob');
+const { renderSync } = require('node-sass');
+
+module.exports = {
+  compile: file =>
+    renderSync({
+      file,
+      includePaths: ['node_modules'],
+      outputStyle: 'expanded',
+    }),
+  forEachImport: callback =>
+    sync('src/**/*.scss', {
+      ignore: ['src/globals/grid/css-gridish/**/*'],
+    }).forEach(callback),
+};

scripts/scss/index.js

@@ -4,22 +4,21 @@
  */
 
 const { bgGreen, bgRed, red } = require('colors');
-const { sync } = require('glob');
-const { render } = require('node-sass');
 
-sync('src/**/*.scss').forEach(file =>
-  render(
-    {
-      file,
-      includePaths: ['node_modules'],
-    },
+const { compile, forEachImport } = require('./compile');
 
-    error => {
-      console.log(`${error ? bgRed('FAIL') : bgGreen('PASS')} ${file}`);
+forEachImport(file => {
+  let status;
 
-      if (error) {
-        console.error(`\n${red(error.formatted)}`);
-      }
+  try {
+    compile(file);
+  } catch (error) {
+    status = error;
+  } finally {
+    console.log(`${status ? bgRed('FAIL') : bgGreen('PASS')} ${file}`);
+
+    if (status) {
+      console.error(`\n${red(status.formatted)}`);
     }
-  )
-);
+  }
+});

src/__tests__/scss/SCSS.spec.js

@@ -0,0 +1,24 @@
+/**
+ * @file SCSS tests.
+ * @copyright IBM Security 2020
+ */
+
+import { compile, forEachImport } from '../../../scripts/scss/compile';
+
+describe('SCSS', () => {
+  test('Bundle', () => {
+    expect(
+      compile('src/index.scss')
+        .css.toString()
+        .replace(/'/g, '"')
+    ).toMatchSnapshot();
+  });
+
+  describe('Imports', () => {
+    forEachImport(file => {
+      test(file, () => {
+        expect(compile(file)).not.toHaveProperty('message');
+      });
+    });
+  });
+});