Creating a component

1. Checkout master

$ git checkout master

2. Install dependencies

$ npm i

Then we bootstrap, installing all the dependencies for the packages:

$ lerna bootstrap

As a general workflow, discard any changes to the package-lock.json-files at this stage:

$ git checkout -- packages package-lock.json

This to make sure that when you want to create a new component/package, that you have a clean slate.

3. Dev branch

Checkout a developing branch for the fix or new component, and push it.

$ git checkout -b <name of branch>
$ git push -u origin <name of branch>

4. Copy

Copy the required files listed below as a scaffold.

Copy the files from packages/button, copy ONLY the files listed below:

|-dev
| |-*.html
|-demo
| |-*.html
|-docs
| |-button.md
|-CHANGELOG.md
|-gulpfile.js
|-src
| |-button.styl
|-test
| |-diff.js
|-package.json
|-README.md
|-.stylintrc

5. Rename

Rename the files to fit the new component name

$ mv docs/button.md docs/<new-component-name>.md
$ mv demo/button.html demo/<new-component-name>.html
$ mv src/button.styl src/<new-component-name>.styl
$ mv src/button.scss src/<new-component-name>.scss
$ mv src/button.less src/<new-component-name>.less

6. Reset

Reset and update names in the files below:

  • Remove all content in CHANGELOG.md
  • Rename references of button to <new-component-name> in package.json
  • Rename references of button to <new-component-name> in demo/<new-component-name>.html
  • Rename references of button to <new-component-name> in dev/index.html
  • Rename references of button to <new-component-name> in test/diff.js
  • Remove documentation and rename references of button to <new-component-name> in docs/<new-component-name>.md
  • Remove all styling in src/<new-component-name>.styl
  • Rename references of button to in the commented section of src/<new-component-name>.styl
`docs/.md` should look something like this
`src/.styl` should look something like this:

package.json-should look something like this:

{
  "name": "@ids-core/<new-component-name>",
  "version": "5.0.2",
  "description": "",
  "main": "./dist/<new-component-name>.css",
  "scripts": {
    "build": "npm test && rimraf ./dist ./*.zip && gulp -L",
    "test": "gulp pretest -L && mocha test/diff.js"
  },
  "author": {
    "name": "If P&C Insurance"
  },
  "license": "SEE LICENSE IN LICENSE",
  "devDependencies": {
    "colors": "^1.4.0",
    "cssnano": "^4.1.10",
    "diff": "^4.0.2",
    "eslint": "^4.19.1",
    "eslint-config-prettier": "^2.9.0",
    "gulp": "^4.0.0",
    "mocha": "^7.0.1",
    "prettier": "^1.13.7",
    "rimraf": "^2.6.2",
    "stylint-stylish": "^2.0.0"
  },
  "dependencies": {
    "@ids-core/breakpoint": "5.0.2",
    "@ids-core/color": "5.0.2",
    "@ids-core/core": "5.0.2",
    "@ids-core/typography": "5.0.2",
    "@ids-core/utils": "5.0.2"
  }
}

7. Add to build

Add the new component to the build.

Open config/module-dirs.js and add your component:

module.exports = [
  './src/',
  './node_modules/',
  './node_modules/@ids-core/core/src/',
  './node_modules/@ids-core/color/src/',
  './node_modules/@ids-core/breakpoint/src/',
  './node_modules/@ids-core/typography/src/',
  './node_modules/@ids-core/grid/src/',
  './node_modules/@ids-core/icons/src/',
  './node_modules/@ids-core/utils/src/',
  './node_modules/@ids-core/input-fields/src/',
  './node_modules/@ids-core/logo/src/',
  './node_modules/@ids-core/consent-banner/src/',
  './node_modules/@ids-core/button/src/',
  './node_modules/@ids-core/<new-component-name>/src/',
];

Then add your component to packages/bundle/src/bundle.styl:

@require '@ids-core/core/src/core.styl'
@require '@ids-core/color/src/color.styl'
@require '@ids-core/breakpoint/src/breakpoint.styl'
@require '@ids-core/typography/src/typography.styl'
@require '@ids-core/grid/src/grid.styl'
@require '@ids-core/utils/src/utils.styl'
@require '@ids-core/icons/src/icons.styl'
@require '@ids-core/logo/src/logo.styl'
@require '@ids-core/<new-component-name>/src/<new-component-name>.styl'

Then add your component to packages/bundle/src/bundle.less:

@import '@ids-core/core/src/core.less';
@import '@ids-core/color/src/color.less';
@import '@ids-core/breakpoint/src/breakpoint.less';
@import '@ids-core/typography/src/typography.less';
@import '@ids-core/grid/src/grid.less';
@import '@ids-core/utils/src/utils.less';
@import '@ids-core/icons/src/icons.less';
@import '@ids-core/logo/src/logo.less';
@import '@ids-core/<new-component-name>/src/<new-component-name>.less';

Then add your component to packages/bundle/src/bundle.scss:

@import '@ids-core/core/src/core.scss';
@import '@ids-core/color/src/color.scss';
@import '@ids-core/breakpoint/src/breakpoint.scss';
@import '@ids-core/typography/src/typography.scss';
@import '@ids-core/grid/src/grid.scss';
@import '@ids-core/utils/src/utils.scss';
@import '@ids-core/icons/src/icons.scss';
@import '@ids-core/logo/src/logo.scss';
@import '@ids-core/<new-component-name>/src/<new-component-name>.scss';

Then make sure the bundle - package.json file has the new component as a dependency:

"dependencies": {
  "@ids-core/breakpoint": "5.0.2",
  "@ids-core/color": "5.0.2",
  "@ids-core/core": "5.0.2",
  "@ids-core/grid": "5.0.2",
  "@ids-core/logo": "5.0.2",
  "@ids-core/icons": "5.0.2",
  "@ids-core/typography": "5.0.2",
  "@ids-core/utils": "5.0.2",
  "@ids-core/<new-component-name>": "5.0.2",
  "what-input": "^5.1.0"
}

And then in the root project folder, run:

$ lerna bootstrap

To symlink and install dependencies.

8. Add to documentation

Add the new component to the documentation generation.

Open up gulpfile.babel.js and add your component:

gulp.src([
  './packages/core/dist/core.css',
  './packages/color/dist/color.css',
  './packages/breakpoint/dist/breakpoint.css',
  './packages/typography/dist/typography.css',
  './packages/grid/dist/grid.css',
  './packages/utils/dist/utils.css',
  './packages/icons/dist/icons.css',
  './packages/logo/dist/logo.css',
  './packages/consent-banner/dist/consent-banner.css',
  './packages/button/dist/button.css',
  './packages/input-fields/dist/input-fields.css',
  './packages/<new-component-name>/dist/<new-component-name>.css',
]);

And remember to add the demo:

const copyDemoFiles = () =>
  gulp
    .src([
      './packages/typography/demo/*.html',
      './packages/hero/demo/*.html',
      './packages/grid/demo/*.html',
      './packages/notification/demo/*.html',
      './packages/bundle/demo/*.html',
      './packages/expandable/demo/*.html',
      './packages/breadcrumbs/demo/*.html',
      './packages/core/demo/*.html',
      './packages/modal/demo/*.html',
      './packages/footer/demo/*.html',
      './packages/datepicker/demo/*.html',
      './packages/navigational-card/demo/*.html',
      './packages/shortcuts/demo/*.html',
      './packages/product-matrix-table/demo/*.html',
      './packages/quick-facts/demo/*.html',
      './packages/<new-component-name>/demo/*.html',
    ])
    .pipe(gulp.dest('./public/demos'));

9. Code

And now you are ready to start developing a new component!

Add your styling to the component and make a pull request!

10. Result

To see your component in the documentation, run:

$ npm run build

This will build all packages and the documentation. This might take a lot of time, you might shorten the time by just doing:

$ npm run bundle
$ gulp

If you only have updated the documentation files, or the styling for the documentation, you can just run:

$ gulp

And to start the dev server for the documentation, so that you can view the changes, run:

$ npm start

This server can be run in separate window while you build and code!

Dev server

You can start your own local component development server with this command at root:

$ npm run start:dev -- <component-folder-name>

For example:

$ npm run start:dev -- hero

This will:

  • Start a local webserver for the hero component
  • Watch for changes in the src, docs and demo-folder
  • Build the bundle
  • Build the styleguide
  • Live reload the dev index.html file

11. Script

If you feel that the guide was a bit long and tedious, you can use a script to set up the scaffolding for a new component for you:

$ npm run create:component New-component-name
$ lerna bootstrap

This script will copy and rename all the files and references for you, set up scaffolding documentation files and update references to bundle. It will also build the files and documentation one time!

Table of Contents

Edit this section, Opens in new window
Contact us, Opens in new window