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

`v1.27.0`

.gitignore

@@ -11,10 +11,6 @@ node_modules
 /scss
 storybook-static
 
-# CSS Gridish.
-src/globals/grid/css-gridish/css
-src/globals/grid/css-gridish/bx-grid.sketch
-
 # Logs.
 *.log
 

.nvmrc

@@ -1 +1 @@
-11.15
+12

.storybook/index.scss

@@ -1,12 +1,15 @@
 ////
 /// Entry point.
 /// @group storybook
-/// @copyright IBM Security 2019
+/// @copyright IBM Security 2019 - 2020
 ////
 
 @import '@carbon/layout/scss/spacing';
 
 @import '../src/globals/index';
+
+@import 'carbon-components/scss/globals/scss/vars';
+
 @import '../src/components/index';
 @import '../src/platform/index';
 

config/jest/helpers/renderWithinLandmark.js

@@ -0,0 +1,18 @@
+/**
+ * @file Helper to render jsx in a landmark element.
+ * @copyright IBM Security 2020
+ */
+
+import { render } from '@testing-library/react';
+
+function renderWithinLandmark(jsxExpression) {
+  // DAP requires a landmark '<main>' in the DOM:
+  const container = document.createElement('main');
+  document.body.appendChild(container);
+
+  return render(jsxExpression, {
+    container,
+  });
+}
+
+export default renderWithinLandmark;

docs/testing/README.md

@@ -14,27 +14,25 @@ Use this structure for automated accessibility tests:
 
 ```jsx
 test('should have no Axe or DAP violations', async () => {
-  const main = document.createElement('main');
-  render(<Component />, {
-    // DAP requires a landmark '<main>' in the DOM:
-    container: document.body.appendChild(main),
-  });
-
-  await expect(document.body).toHaveNoAxeViolations();
-  await expect(document.body).toHaveNoDAPViolations('ComponentName');
+  const { container } = render(<Component />);
+
+  await expect(container).toHaveNoAxeViolations();
+  await expect(container).toHaveNoDAPViolations('ComponentName');
 });
 
 test('should have no Axe or DAP violations with component variation', async () => {
-  const main = document.createElement('main');
-  render(<Component variationProp={value} />, {
-    // DAP requires a landmark '<main>' in the DOM:
-    container: document.body.appendChild(main),
-  });
-
-  await expect(document.body).toHaveNoAxeViolations();
-  await expect(document.body).toHaveNoDAPViolations(
-    'ComponentName with variation'
-  );
+  const { container } = render(<Component variationProp={value} />);
+
+  await expect(container).toHaveNoAxeViolations();
+  await expect(container).toHaveNoDAPViolations('ComponentName with variation');
+});
+
+test('should have no Axe or DAP violations with component variation that should be wrapped in a landmark node', async () => {
+  // `renderWithinLandmark` can be used to wrap a component in a `main` node:
+  const { container } = renderWithinLandmark(<Component />);
+
+  await expect(container).toHaveNoAxeViolations();
+  await expect(container).toHaveNoDAPViolations('ComponentName');
 });
 ```
 
@@ -45,7 +43,7 @@ test('should have no Axe or DAP violations with component variation', async () =
 
 #### DAP requirements
 
-- DAP requires that components be rendered inside a valid landmark element, which is why the `container` is a `main` node. This extra step may not be required if the component is already wrapped in a `main` or another significant HTML landmark element.
+- DAP requires that components be rendered inside a valid landmark element. Use the `renderWithinLandmark` helper to wrap a component in a landmark `main` node.
 - DAP requires a unique id per test within a given component. (Hence, "ComponentName" and "ComponentName with variation")
 
 ## User events

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carbon/ibm-security",
-  "version": "1.26.0",
+  "version": "1.27.0-prerelease.4",
   "description": "Carbon for IBM Security",
   "license": "Apache-2.0",
   "main": "lib/index.js",
@@ -15,7 +15,6 @@
     "build": "run-s build:*",
     "build:pre": "run-s build:pre:*",
     "build:pre:clean": "rm -rf css es lib scss storybook-static",
-    "build:pre:grid": "css-gridish",
     "build:main": "run-p build:main:*",
     "build:main:copy-assets": "node scripts/copyAssets.js",
     "build:main:cjs": "babel src -d lib --ignore **/_mocks_/**,**/__tests__/**,**/*.stories.js,src/globals/scss-exports/index.js",
@@ -25,7 +24,7 @@
     "build:main:styles": "node scripts/styles.js",
     "build:post": "run-p build:post:*",
     "build:post:clean-css": "cleancss -O2 -o css/index.min.css css/index.css",
-    "build:post:storybook": "run-s build:pre:grid && build-storybook -s public",
+    "build:post:storybook": "build-storybook -s public",
     "docs": "node scripts/themes && git add docs/themes/themes.md",
     "format": "yarn format:precommit '**/*.{js,md,scss}'",
     "format:precommit": "prettier --ignore-path .gitignore --write",
@@ -37,7 +36,7 @@
     "lint:scss:precommit": "stylelint --fix --ignore-path .gitignore",
     "lint-staged": "lint-staged",
     "semantic-release": "semantic-release",
-    "start": "run-s build:pre:grid && start-storybook -p 3000 -s public",
+    "start": "start-storybook -p 3000 -s public",
     "test": "yarn jest spec --ci -i",
     "test:precommit": "yarn jest -b --passWithNoTests --testMatch src/**/*.spec.js --findRelatedTests",
     "test:imports": "scripts/checkImports.sh",
@@ -116,7 +115,6 @@
     "babel-plugin-ramda": "^2.0.0",
     "clean-css-cli": "^4.1.11",
     "colors": "^1.4.0",
-    "css-gridish": "^2.0.0",
     "css-loader": "^3.0.0",
     "data-uri.macro": "^1.0.0",
     "del": "^3.0.0",