Nr/feat/safer travel

doc/contributing/application-architecture.md

@@ -42,7 +42,7 @@
 
         - `js/`
 
-          Any javascript files located in here will be concatenated and compiled into `docs/js/wmcads-vendor.min.js` via the [javascript build task](tasks.md#markdown-header-141-scripts-javascript).
+          Any javascript files located in here will be concatenated and compiled into `docs/js/ds-vendor.min.js` via the [javascript build task](tasks.md#markdown-header-141-scripts-javascript).
 
 - `build/` **contains auto-generated files**
 

doc/contributing/coding-standards.md

@@ -2,9 +2,9 @@
 
 Find components in `src/wmcads/components`.
 
-Components must use the `.wmcads-` namespace.
+Components must use the `.ds-` namespace.
 
-For example, `.wmcads-button`.
+For example, `.ds-button`.
 
 ## Writing CSS for components
 

doc/contributing/css.md

@@ -4,7 +4,7 @@
 
 ## `wmca` namespacing
 
-All class names start with a `.wmcads-` namespace to reduce the likelihood of
+All class names start with a `.ds-` namespace to reduce the likelihood of
 conflicting with existing classes in your application. It also helps to identify
 where the styling for a particular element is coming from.
 
@@ -24,9 +24,9 @@ The naming convention follows this pattern:
 .block__element {}
 .block--modifier {}
 
-.wmcads-card               // Block - the root of a component
-.wmcads-card__body         // Element - a part of the block
-.wmcads-card--active       // Modifier - a variant of the block
+.ds-card               // Block - the root of a component
+.ds-card__body         // Element - a part of the block
+.ds-card--active       // Modifier - a variant of the block
 ```
 
 It uses double hyphens (`--`) and underscores (`__`) so that the block, element
@@ -35,9 +35,9 @@ or modifiers themselves can be hyphen delimited without causing ambiguity.
 For example:
 
 ```scss
-.wmcads-phase-banner
-.wmcads-phase-banner__phase-tag
-.wmcads-phase-banner__phase-tag--light-blue
+.ds-phase-banner
+.ds-phase-banner__phase-tag
+.ds-phase-banner__phase-tag--light-blue
 ```
 
 ### Further reading:
@@ -57,7 +57,7 @@ given class name. It also discourages excessive nesting.
 Bad:
 
 ```
-.wmcads-breadcrumb {
+.ds-breadcrumb {
   ...
   &__item {
     ...
@@ -68,11 +68,11 @@ Bad:
 Good:
 
 ```
-.wmcads-breadcrumb {
+.ds-breadcrumb {
   ...
 }
 
-.wmcads-breadcrumb__item {
+.ds-breadcrumb__item {
   ...
 }
 ```
@@ -98,11 +98,11 @@ other components.
 
 Keep all of the variants of a component in the same place.
 
-`.wmcads-error-summary` modifies the `.wmcads-list` component.
+`.ds-error-summary` modifies the `.ds-list` component.
 
 Component modifiers use an extra class, scoped to the component:
 
-`.wmcads-error-summary__list`
+`.ds-error-summary__list`
 
 This class is part of the component, rather than a parent of a component.
 
@@ -165,7 +165,7 @@ Good:
 
 ```
 .selector {
-  color: $wmcads-blue;
+  color: $ds-blue;
 }
 ```
 
@@ -214,7 +214,7 @@ Bad:
 Good:
 
 ```
-.wmcads-wrapper {
+.ds-wrapper {
   ...
 }
 ```
@@ -256,7 +256,7 @@ a {
 Bad:
 
 ```
-.wmcads-breadcrumb {
+.ds-breadcrumb {
   ...
   &__item {
     ...
@@ -267,11 +267,11 @@ Bad:
 Good:
 
 ```
-.wmcads-breadcrumb {
+.ds-breadcrumb {
   ...
 }
 
-.wmcads-breadcrumb__item {
+.ds-breadcrumb__item {
   ...
 }
 ```
@@ -420,15 +420,15 @@ Bad:
 
 ```
 @mixin FONT_STACK() {
-  font-family: $wmcads-font-stack;
+  font-family: $ds-font-stack;
 }
 ```
 
 Good:
 
 ```
 @mixin font-stack() {
-  font-family: $wmcads-font-stack;
+  font-family: $ds-font-stack;
 }
 ```
 

doc/contributing/nunjucks-api.md

@@ -30,7 +30,7 @@ Find out more about the [Nunjucks templating language](https://github.com/mozill
     {% macro wmcadsComponentName(params) %}
     {# Component description/ comments here #}
 
-    <div class="wmcads-componentName">
+    <div class="ds-componentName">
 
     </div>
 

doc/contributing/tasks/building.md

@@ -43,9 +43,9 @@ Build commands are used for when code is to be compiled to an output that is sui
 - Uses [autoprefixer](https://www.npmjs.com/package/gulp-autoprefixer) to parse CSS and add vendor prefixes
 - Minifies CSS
 - Creates two files in `{root}/doc/css/`
-  - `wmcads-website.min.css`
+  - `ds-website.min.css`
     - For styleguide specific styling
-  - `wmcads-components.min.css`
+  - `ds-components.min.css`
     - For any styling related to WMRE components
 - Creates sourcemaps in `{route}/_sourcemaps/`
 
@@ -74,8 +74,8 @@ Build commands are used for when code is to be compiled to an output that is sui
 - Concatenates all smaller javascript files together into one file
 - Mangles and minifies the file
 - Creates three files in `{root}/doc/js/`
-  - `wmcads-website.min.js`
-    - Created from any javascript files found in `{root}/src/wmcads-website/**/*.js`
+  - `ds-website.min.js`
+    - Created from any javascript files found in `{root}/src/ds-website/**/*.js`
     - For styleguide specific items only
   - `vendor.min.js`
     - Created from any javascript files found in `{root}/src/assets/js/vendor/**/*.js`

gulp-tasks/browser-sync.js

@@ -1,6 +1,6 @@
 // Local requires
 const browserSync = require('browser-sync').create();
-const paths = require('./paths.js'); // List of all paths in a config
+const paths = require('./paths'); // List of all paths in a config
 
 const startingBrowserSync = () => {
   return browserSync.init({

gulp-tasks/build-nunjucks.js

@@ -1,3 +1,4 @@
+const fs = require('fs');
 const babel = require('@babel/standalone');
 const DOMPurify = require('dompurify');
 // Gulp requires
@@ -7,7 +8,6 @@ const beautify = require('js-beautify').html;
 const beautifyJS = require('js-beautify');
 
 // Local requires
-const fs = require('fs');
 const markdown = require('nunjucks-markdown');
 const marked = require('marked');
 const paths = require('./paths');

gulp-tasks/cache-bust.js

@@ -2,7 +2,7 @@
 const { src, dest } = require('gulp');
 const plugins = require('gulp-load-plugins')();
 // Local requires
-const paths = require('./paths.js');
+const paths = require('./paths');
 
 const bustingCache = () => {
   const cbString = new Date().getTime();

gulp-tasks/clean.js

@@ -1,5 +1,5 @@
 const del = require('del');
-const paths = require('./paths.js');
+const paths = require('./paths');
 
 const cleaningDir = () => {
   return del([paths.output, paths.logs.sourcemaps, paths.clean.a11y, paths.clean.tmp]);

gulp-tasks/lint-styles.js

@@ -2,7 +2,7 @@
 const { src } = require('gulp');
 const plugins = require('gulp-load-plugins')();
 // Local requires
-const paths = require('./paths.js');
+const paths = require('./paths');
 
 const lintingStyles = () => {
   return src(paths.styles.src)

gulp-tasks/lint-templates.js

@@ -1,7 +1,7 @@
 // Gulp requires
 const { src } = require('gulp');
 const plugins = require('gulp-load-plugins')();
-const paths = require('./paths.js');
+const paths = require('./paths');
 
 const lintingTemplates = () => {
   return src(`${paths.nunjucks.output}**/*.html`)

gulp-tasks/min-images.js

@@ -2,7 +2,7 @@
 const { src, dest } = require('gulp');
 const plugins = require('gulp-load-plugins')();
 // Local requires
-const paths = require('./paths.js');
+const paths = require('./paths');
 
 const minifyingImages = () => {
   return src(paths.images.src)

gulp-tasks/paths.js

@@ -9,9 +9,12 @@ module.exports = {
     src: ['src/**/*.scss'], // src of styles to watch
     minifySrc: [
       'src/wmcads/assets/sass/wmcads.scss',
-      'src/www/wmcads-website.scss',
+      'src/wmcads/assets/sass/tfwmds.scss',
+      'src/wmcads/assets/sass/stds.scss',
+      'src/wmcads/assets/sass/mcds.scss',
+      'src/www/ds-website.scss',
       'src/www/pages/templates/templates.scss',
-      'src/wmcads/assets/sass/wmcads-grid/grid.scss',
+      'src/wmcads/assets/sass/ds-grid/grid.scss',
       'src/wmcads/assets/sass/split/buttons.scss',
       'src/wmcads/assets/sass/split/accordion.scss',
       'src/wmcads/assets/sass/split/typography.scss',
@@ -26,13 +29,13 @@ module.exports = {
     // List of JS folders to concatenate, lint and minified to one file (DON'T LINT ASSETS AS IT WILL TAKE TOO LONG TO SCAN MINIFIED LIBS)
     minifySrc: [
       {
-        src: 'src/www/wmcads-website.js',
-        minName: 'wmcads-website.min.js',
+        src: 'src/www/ds-website.js',
+        minName: 'ds-website.min.js',
         lint: true
       },
       {
-        src: 'src/www/wmcads-templates.js',
-        minName: 'wmcads-templates.min.js',
+        src: 'src/www/ds-templates.js',
+        minName: 'ds-templates.min.js',
         lint: true
       }
     ],

gulp-tasks/sprite-svgs.js

@@ -1,18 +1,18 @@
 // Gulp requires
 const { src, dest } = require('gulp');
 const plugins = require('gulp-load-plugins')();
+
 // Local requires
-const path = require('path');
-const paths = require('./paths.js');
+const path = require('./paths');
 
 const spritingSVGs = () => {
-  return src(paths.svgs.src)
+  return src(path.svgs.src)
     .pipe(
       plugins.rename(file => {
         const newName = file;
         const name = file.dirname.split(path.sep);
         name.push(file.basename);
-        name.unshift('wmcads');
+        name.unshift('ds');
         newName.basename = name.join('-');
       })
     )
@@ -36,8 +36,8 @@ const spritingSVGs = () => {
       })
     )
     .pipe(plugins.svgstore())
-    .pipe(plugins.rename({ basename: 'wmcads-icons', extname: '.min.svg' }))
-    .pipe(dest(paths.svgs.dest));
+    .pipe(plugins.rename({ basename: 'ds-icons', extname: '.min.svg' }))
+    .pipe(dest(path.svgs.dest));
 };
 
 module.exports = spritingSVGs;

gulpfile.js

@@ -1,6 +1,6 @@
 const { src, dest, watch, series, parallel } = require('gulp');
 
-const paths = require('./gulp-tasks/paths.js'); // List of all paths in a config
+const paths = require('./gulp-tasks/paths'); // List of all paths in a config
 
 // STYLES
 const lintStyles = require('./gulp-tasks/lint-styles'); // Lint styles
@@ -31,8 +31,6 @@ const cleanBuild = require('./gulp-tasks/clean'); // Clean the current build & _
 
 const cacheBust = require('./gulp-tasks/cache-bust'); // This function checks index.html for cb=123 and replaces with current dateTime to bust cache
 
-const { moveOldCSS, moveOldReactNative, moveOldIcons } = require('./gulp-tasks/move-old-files');
-
 const { startBrowserSync, reload } = require('./gulp-tasks/browser-sync'); // BrowserSync server
 
 // WATCHERS
@@ -69,10 +67,7 @@ const buildAll = series(
   buildConfig,
   lintStyles,
   lintTemplates,
-  lintScripts,
-  moveOldCSS,
-  moveOldReactNative,
-  moveOldIcons
+  lintScripts
 );
 
 // run buildStyles, buildFonts,& minifyJS on start, series so () => run in an order and parallel so () => can run at same time

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "wmcads-design-system",
+  "name": "ds-design-system",
   "version": "1.5.0",
   "description": "A library of typography, visual styles and user interface components which are documented for West Midlands Combined Authority.",
   "homepage": "https://wmcadigital.github.io/wmca-design-system",