@trimble-oss/modus-web-components

The Trimble Modus Design System describes the UX that Trimble wants to provide in its UI across its many applications. The benefits of using Modus include rapid prototyping, development efficiency, and UX consistency.

Modus includes...

• Typography
• Colors
• Rules
• Elements (components)

This library provides Modus Elements as web components. Web components are reusable, encapsulated UI elements that are framework agnostic (can be implemented in any site). The modus-web-components library was built using the latest UX specs from Figma. Releases follow the semantic versioning 2.0.0 spec.

Table of Contents

• Getting Started
• Available Scripts
• Technology
• Components
  • Implemented
    • Accordion (modus-accordion)
    • Accordion Item (modus-accordion-item)
    • Alert (modus-alert)
    • Badge (modus-badge)
    • Breadcrumb (modus-breadcrumb)
    • Button (modus-button)
    • Card (modus-card)
    • Checkbox (modus-checkbox)
    • Chip (modus-chip)
    • Dialog (modus-dialog)
    • Dropdown (modus-dropdown)
    • Input Number (modus-number-input)
    • Input Radio Group (modus-radio-group)
    • Input Text (modus-text-input)
    • List (modus-list)
    • List Item (modus-list-item)
    • Message (modus-message)
    • Modal (modus-modal)
    • Navbar (modus-navbar)
    • Pagination (modus-pagination)
    • Progress Bar (modus-progress-bar)
    • Select (modus-select)
    • Slider (modus-slider)
    • Spinner (modus-spinner)
    • Switch (modus-switch)
    • Tabs (modus-tabs)
    • Toast (modus-toast)
    • Tooltip (modus-tooltip)
  • Not Implemented
    • initial development of defined components finished
  • Future Development
    • Input Date (design not currently specified)
    • Table/List (in re-design by tiger team - do not create)
    • Table/Sheet (in re-design by tiger team - do not create)

Getting Started

Contribution

If this is your first time in the project, run npm install to download 3rd party packages.

All web components are located under the src/components directory.

The index.html file provides a place to render components for development and end to end testing.

Global SCSS files are available to provide Modus colors, variables and functions for component styling.

Implementation

Stencil web component implementation details can be found in their Framework Integration Docs.

If you need to use form input web components (eg modus-checkbox, modus-text-input, etc) there are many good examples online. We won't cover them here as they are often very specific to an individual SPA framework.

Available Scripts

All NPM scripts are run from the root of the project.

npm install - Install 3rd party packages

npm start - Compile and run the Stencil development site

npm run build - Compile the component library

npm run test - Run the unit and e2e tests

npm run test.watch - Run the unit and e2e tests with auto re-run on changes

npm run generate - Start the interactive Stencil component generator

npm run lint - Run ESLint to find problems with JS, TS and SCSS code

Technology

• ESLint - A JS linter to help find and fix problems in code.
• Jest - A JS testing framework.
• Stencil - A toolchain for building reusable, scalable design systems and web components.
• SASS - The most mature, stable, and powerful professional grade CSS extension language in the world.
• rollup.js - A module bundler for JavaScript which compiles small pieces of code into something larger and more complex, such as a library or application.

---

Back to Top