Web components - Intelligence Community Design System

Show navigation section

Step one

In the root of your project:

# using npm
npm install @ukic/web-components @ukic/fonts

# using yarn
rm package-lock.json
yarn add @ukic/web-components @ukic/fonts

Step two

ImportdefineCustomElements in your file. Where you do this will depend on your framework or build tool, but the format is as follows:

import { defineCustomElements } from "@ukic/web-components/loader";

Step three

CalldefineCustomElements in your file. Again, the file you edit will depend on your framework or build tool, but the format is as follows:

//other code
...
defineCustomElements();

Step four

Depending on your framework or build tool, this can be included in either a CSS file or JavaScript\TypeScript file.

Add the following into the top level CSS file for your project.

@import "@ukic/fonts/dist/fonts.css";
@import "@ukic/web-components/dist/core/core.css";

In order to be rendered consistently across browsers and in line with modern standards, each of the components uses styles from a global CSS file based on Normalize.css .

If you would like to import these styles to apply them to the rest of your project and slotted elements used within any of the components, add the following into the top level CSS file as well.

@import "@ukic/web-components/dist/core/normalize.css";

Step five

In your HTML, you can now declare a component as follows:

<ic-status-tag label="Neutral"></ic-status-tag>

Webpack example

Webpack is a tool for bundling web applications. This example assumes the following config inwebpack.config.js . For more detailed information on Webpack configuration, please refer to the Webpack documentation.

const path = require("path");

module.exports = {
  entry: "./src/index.js",
  output: {
    filename: "main.js",
    path: path.resolve(__dirname, "dist"),
  },
  devServer: {
    static: "./dist",
  },
  mode: "development",
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
};

Step one

// using npm
npm install @ukic/web-components @ukic/fonts

// using yarn
rm package-lock.json
yarn add @ukic/web-components @ukic/fonts

Step two

In the file defined as theentry in thewebpack.config.js , add the following:

//src/index.js
import "@ukic/fonts/dist/fonts.css";
import "@ukic/web-components/dist/core/core.css";

import { defineCustomElements } from "@ukic/web-components/loader";
defineCustomElements();

Step three

You can now use any of the components so long as your HTML page includes the output file defined in yourwebpack.config.js . For example, including an ic-status-tag below:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Getting started</title>
  </head>
  <body>
    <script src="dist/main.js"></script>
    <ic-status-tag label="Neutral"></ic-status-tag>
  </body>
</html>

Last reviewed 23 December 2024 .