Skip to content

Mettle components are a collection of custom elements based of the Web Components spec to be used in front-end JavaScript applications.

License

Notifications You must be signed in to change notification settings

johnsonandjohnson/mettle-components

Repository files navigation

Mettle Logo

Mettle Custom Elements

CodeQL npm Unit Test codecov

A Suite of custom elements and services to be used on a front-end JavaScript application.

These are built under the Web Components spec. These tags can be dropped into any front end application like html. You can use this package in addition to your own or with other custom element packages.

Mettle Components Documentation

Goals

  • Use native JS for little to no dependency
  • Cross browser support
  • Flexible for CSS
  • Unit tested

Project Installation

$ npm install @johnsonandjohnson/mettle-components --save

To include the components to your code

import '@johnsonandjohnson/mettle-components'

Quick Sample

<html>
  <head>
    <title>Mettle Component Example</title>
  </head>
  <body>
    <span id="id-44629472-5691-4c53-b7f0-c5488854761b">
      Hover or tap me for tip
    </span>
    <mettle-tool-tip
      data-for="id-44629472-5691-4c53-b7f0-c5488854761b">
        <p>Slot HTML/Text</p>
    </mettle-tool-tip>
    <script type="module" src="https://cdn.jsdelivr.net/npm/@johnsonandjohnson/mettle-components/index.js"></script>
  </body>
</html>

To include services to your code

import { 
  HtmlMarker,
  HttpFetch,
  I18n,
  Observable,
  Roles,
  Router
} from '@johnsonandjohnson/mettle-components/services'

Quick Sample

<html>
  <head>
    <title>Mettle Services Example</title>
  </head>
  <body>
    <div id="render"></div>

    <script type="module">
      import { HtmlMarker } from 'https://cdn.jsdelivr.net/npm/@johnsonandjohnson/mettle-components/services.js'

      (async () => {
        const htmlMarker = new HtmlMarker()
        const htmlString = '<button disabled="${disabled}">Random Disabled</button>'
        const div = document.querySelector('#render')

        let model = {
          disabled: 'disabled'
        }
        await htmlMarker.render(div, htmlString, model)

        window.setInterval(() => {
          model.disabled = (Math.random() >= 0.5) ? 'disabled' : ''
          htmlMarker.updateModel(model)
        }, 1000)
      })()
    </script>
  </body>
</html>

Changelog

Review our latest changes and updates

Contributing

License Contributor Covenant

Contributions are welcomed!