Major v11 (#935)

Co-authored-by: notlee <[email protected]>
Co-authored-by: Lee Moody <[email protected]>
Co-authored-by: chee <[email protected]>
Co-authored-by: Jake Champion <[email protected]>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: chee <[email protected]>

.github/workflows/add-new-issues-and-pull-requests-to-origami-project-board.yml

@@ -2,7 +2,6 @@ name: Add new issues and pull requests to Origami Project Board
 on:
   - issues
   - pull_request_target
-  - pull_request
 
 jobs:
   origami_project_board_job:

.github/workflows/apply-labels.yml

@@ -2,7 +2,6 @@ name: Apply Origami labels
 on:
   - issues
   - pull_request_target
-  - pull_request
 jobs:
   apply-labels:
     runs-on: ubuntu-latest

.github/workflows/auto-approve.yml

@@ -1,25 +1,23 @@
 name: Auto Approve Dependabot PRs
 
-on: pull_request
+on:
+  pull_request_target:
+    types: [labeled]
 
 jobs:
   auto-update-dependabot:
     name: Auto-Approve and enable Auto-Merge for all Dependabot PRs
     runs-on: ubuntu-latest
+    if: github.event.pull_request.user.login == 'dependabot[bot]' && contains(github.event.pull_request.labels.*.name, 'dependencies')
     steps:
-    - id: auto-approve-dependabot
-      uses: hmarr/[email protected]
-      if: github.actor == 'dependabot[bot]' || github.actor == 'dependabot-preview[bot]'
+
+    # Enable auto-merge *before* issuing an approval.
+    - name: Enable Github Automerge
+      uses: alexwilson/enable-github-automerge-action@main
       with:
         github-token: "${{ secrets.ORIGAMI_FOX_ACCESS_TOKEN }}"
-    - name: Checkout
-      uses: actions/checkout@master
-      if: github.actor == 'dependabot[bot]' || github.actor == 'dependabot-preview[bot]'
-      with:
-        fetch-depth: 1
-    - id: enable-automerge
-      name: Enable Github Automerge
-      if: github.actor == 'dependabot[bot]' || github.actor == 'dependabot-preview[bot]'
-      uses: alexwilson/[email protected]
+
+    # We "trust" dependabot updates (this still requires all other checks to pass!)
+    - uses: hmarr/auto-approve-action@bca9db08da72b576ae3273e776e7ccf3f0a36e12
       with:
         github-token: "${{ secrets.ORIGAMI_FOX_ACCESS_TOKEN }}"

.github/workflows/publish-to-npm-as-latest.yml

@@ -10,8 +10,9 @@ jobs:
     - uses: actions/checkout@v2
     - uses: actions/[email protected]
       with:
-        node-version: '12.x'
+        node-version: '14.x'
         registry-url: 'https://registry.npmjs.org'
+    - run: npm install -g npm@^7
     - run: npm ci
     - name: Get the version
       id: version

.github/workflows/publish-to-npm-as-prerelease.yml

@@ -10,8 +10,9 @@ jobs:
     - uses: actions/checkout@v2
     - uses: actions/[email protected]
       with:
-        node-version: '12.x'
+        node-version: '14.x'
         registry-url: 'https://registry.npmjs.org'
+    - run: npm install -g npm@^7
     - run: npm ci
     - name: Get the version
       id: version

.github/workflows/sync-repo-labels.yml

@@ -2,7 +2,6 @@ name: Sync Origami labels
 on:
   - issues
   - pull_request_target
-  - pull_request
 jobs:
   sync-labels:
     runs-on: ubuntu-latest

.github/workflows/test.yml

@@ -5,12 +5,13 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [12.x, 14.x]
+        node-version: ['14.x']
     steps:
     - uses: actions/checkout@v2
     - name: Use Node.js ${{ matrix.node-version }}
       uses: actions/[email protected]
       with:
         node-version: ${{ matrix.node-version }}
+    - run: npm install -g npm@^7
     - run: npm ci
     - run: make ci

.gitignore

@@ -1,9 +1,7 @@
 .idea/
-/node_modules/
+node_modules
 npm-debug.log*
 .DS_Store
 .editorconfig
-/bower_components/
-/test/integration/*/fixtures/*/package-lock.json
-test/integration/demo/fixtures/no-demos/o-component-boilerplate/
+test/integration/tmp/
 ws-*

MIGRATION.md

@@ -1,5 +1,23 @@
 # Migration Guides
 
+## Migrating from v10 to v11
+
+obt no longer supports bower, it now only supports npm.
+
+The `--ignore-bower` flag has been removed.
+
+Installing bower dependencies has been removed.
+
+Bundling/Compiling code which uses bower dependencies is no longer supported.
+
+`obt test` no longer runs `npm test`, this is to allow `obt test` to be a command within the components `npm test` script.
+
+`obt verify` linting enforces fewer configuration options. Ignore patterns must now be configured for each component by creating `.eslintignore` and `.stylelintignore` files, with content that includes `demos/local/**` and any other file patterns which do not need to be linted. `node_modules` is ignored by default.
+
+node-sass support has been removed, obt will no longer test the component sass can compile with node-sass.
+
+Component lint configuration must be renamed to use the CommonJS extension `.eslintrc.js` becomes `.eslintrc.cjs`, `.stylelintrc.js` becomes `.stylelintrc.cjs`, `.remarkrc.js` becomes `.remarkrc.cjs`.
+
 ## Migrating from v9 to v10
 The following `demo` command flags have been removed and replaced with the `develop` (`dev`) command:
 - Removed the `--watch` flag.

README.md

@@ -37,7 +37,7 @@ To preview the components demos run the `dev` command. The `dev` command will au
 
 After making your changes run the linter and check for errors:
 
-`obt verify`
+`obt lint`
 
 Also run the components tests:
 
@@ -59,12 +59,12 @@ Origami Build Tools provides boilerplate for creating up a new Origami component
 		$ obt <command> [<options>]
 
 	Commands
-		install, i    Install npm and bower dependencies required to build the component
-		develop, dev  Build demos locally every time a file changes and run a server to view them
-		demo, d       Build demos into the demos directory
-		init          Initialise a new component with a boilerplate folder structure
-		test, t       Run Origami specification tests and component specific tests
-		verify, v     Check folder and code structure follows Origami specification
+		install, i             Install npm dependencies required to build the component
+		develop, dev           Build demos locally every time a file changes and run a server to view them
+		demo, d                Build demos into the demos directory
+		init                   Initialise a new component with a boilerplate folder structure
+		test, t                Run Origami specification tests and component specific tests
+		verify, v, lint, l     Check folder and code structure follows Origami specification
 
 	Options
 		-h, --help                 Print out this message
@@ -78,7 +78,7 @@ Origami Build Tools provides boilerplate for creating up a new Origami component
 
 ### `install` or `i`
 
-Install npm and bower dependencies required to build components.
+Install npm required to build components.
 
 ### `develop` or `dev`
 
@@ -90,25 +90,24 @@ Creates boilerplate for a new Origami component.
 
 ### `demo` or `d`
 
-Build demos found in the [origami.json manifest](https://origami.ft.com/spec/v1/manifest/#demos).
+Build demos found in the [origami.json manifest](https://origami.ft.com/docs/manifests/origami-json/#demos).
 
 Build a specific demo with the `--demo-filter` option.
 
 Demos consist of HTML, CSS and JS (if Sass & JS exists), and are created in `demos/local/`. These files should not be committed. It is recommended to add _demos/local/_ to your `.gitignore`.
 
-### `verify` or `v`
+### `verify` or `v` or `lint` or `l`
 
-Lints JavaScript, Sass and configuration files against [Origami specification](https://origami.ft.com/spec/v1/components/).
+Lints JavaScript, Sass and configuration files ([see Origami code recommendations](https://origami.ft.com/docs/components/code/)).
 
 ### `test` or `t`
 
 Runs JavaScript and Sass tests.
 
 * If `--debug` is set, the test runner will not exit automatically to allow debugging of the tests.
 
-Checks Sass supports [silent and non-silent compilation modes](https://origami.ft.com/spec/v1/sass/#sass-silent-mode).
+Checks Sass [includes a primary mixin](https://origami.ft.com/docs/components/code/#sass).
 If `pa11y.html` demo exists, confirms it is accessible using [Pa11y](http://pa11y.org/).
-If `package.json` contains a `test` script, confirms it exits with a 0 exit code.
 Runs tests using [Karma](https://karma-runner.github.io) defaulting to Chrome Stable, can be configured to use BrowserStack by using the `--browserstack` flag. You will need the environment variables `BROWSER_STACK_USERNAME` and `BROWSER_STACK_ACCESS_KEY` set. This will run the tests on the minimum version for enhanced experience based on the [FT Browser Support Policy[(https://docs.google.com/document/d/1mByh6sT8zI4XRyPKqWVsC2jUfXHZvhshS5SlHErWjXU).
 
 ## Migration Guides

config/karma.config.browserstack.js

@@ -69,7 +69,7 @@ const customLaunchers = {
 
 const browsers = Object.keys(customLaunchers);
 
-module.exports.getBrowserStackKarmaConfig = function (opts = { ignoreBower: false }) {
+module.exports.getBrowserStackKarmaConfig = function (opts = { sassIncludePaths: [] }) {
 	return getBaseKarmaConfig(opts).then(karmaBaseConfig => {
 		const karmaConfig = Object.assign(
 			{},

config/karma.config.chrome.js

@@ -3,7 +3,7 @@
 const { getBaseKarmaConfig } = require('./karma.config');
 const constants = require('karma').constants;
 
-module.exports.getChromeKarmaConfig = function (opts = { ignoreBower: false }) {
+module.exports.getChromeKarmaConfig = function (opts = { sassIncludePaths: [] }) {
 	return getBaseKarmaConfig(opts).then(karmaBaseConfig => {
 		const karmaConfig = Object.assign(
 			{},

config/karma.config.js

@@ -3,15 +3,16 @@
 const process = require('process');
 const path = require('path');
 const fileHelpers = require('../lib/helpers/files');
+const karmaSass = require('../lib/plugins/dart-sass-karma');
+const karmaJavaScript = require('../lib/plugins/bundle-javascript');
+const { camelCase } = require('lodash');
 
-const karmaScrumple = require('../lib/karma-scrumple');
-const karmaSwc = require('../lib/karma-swc');
-
-module.exports.getBaseKarmaConfig = function (opts = { ignoreBower: false }) {
-	return Promise.all([fileHelpers.getModuleName(), fileHelpers.getModuleBrands(), fileHelpers.readIfExists(path.resolve('main.scss'))]).then(values => {
+module.exports.getBaseKarmaConfig = function (opts = { sassIncludePaths: []}) {
+	return Promise.all([fileHelpers.getComponentName(), fileHelpers.getModuleBrands(), fileHelpers.readIfExists(path.resolve('main.scss'))]).then(values => {
 		const moduleName = values[0];
 		const brands = values[1];
 		const mainScssContent = values[2];
+		const primaryMixinName = camelCase(moduleName);
 		return {
 			// enable / disable watching file and executing tests whenever any file changes
 			autoWatch: false,
@@ -50,48 +51,44 @@ module.exports.getBaseKarmaConfig = function (opts = { ignoreBower: false }) {
 					pattern: 'main.js',
 					watched: true,
 					included: false,
-					served: false
+					served: true
 				},
 				{
 					pattern: 'src/**/*.js',
 					watched: true,
 					included: false,
-					served: false
+					served: true
 				},
 				{
 					pattern: 'src/**/*.scss',
 					watched: true,
 					included: false,
-					served: false
+					served: true
 				},
 			],
 
 			// frameworks to use
 			// available frameworks: https://npmjs.org/browse/keyword/karma-adapter
 			frameworks: ['mocha', 'sinon', 'proclaim'],
 
-			ignoreBower: opts.ignoreBower,
-
 			plugins: [
 				'karma-*',
-				karmaScrumple,
-				karmaSwc,
-				'@financial-times/karma-proclaim'
+				karmaSass,
+				'@financial-times/karma-proclaim',
+				karmaJavaScript
 			],
 
 			// web server port
 			port: 9876,
 
-			// preprocess matching files before serving them to the browser
-			// available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
 			preprocessors: {
-				'test/**/*.js': ['swc', 'scrumple', 'sourcemap'],
+				'**/*.js': ['javascript'],
 				'main.scss': ['scss']
 			},
 			scssPreprocessor: {
 				options: {
 					file: '',
-					data: `$system-code: "origami-build-tools";${brands.length ? `$o-brand: ${brands[0]};` : ''}$${moduleName}-is-silent: false; ${mainScssContent}`,
+					data: `$system-code: "origami-build-tools";${brands.length ? `$o-brand: ${brands[0]};` : ''}${mainScssContent}@if mixin-exists('${primaryMixinName}') {@include ${primaryMixinName}();};`,
 					includePaths: fileHelpers.getSassIncludePaths(process.cwd(), opts)
 				}
 			},
@@ -102,3 +99,4 @@ module.exports.getBaseKarmaConfig = function (opts = { ignoreBower: false }) {
 		};
 	});
 };
+

lib/helpers/construct-polyfill-url.js

@@ -6,7 +6,7 @@ const denodeify = require('util').promisify;
 const readFile = denodeify(require('fs-extra').readFile);
 
 async function constructBrowserDeps() {
-	const dependencies = await globby(['bower_components/*/origami.json', 'origami.json']);
+	const dependencies = await globby(['node_modules/*/*/origami.json', 'node_modules/*/origami.json', 'origami.json']);
 	const requiredFeatures = [];
 	await Promise.all(dependencies.map(async dependency => {
 		if (dependency.startsWith('/')) {