@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.

Changelog

• Changelog - A file that contains a curated list of chronological entries for each version of a project.
• Purpose - Enable users to quickly see precise changes between each release or version of a project.
• Uses - End users want to know how and why the software they use changes.

Semantic Versioning

This project uses the following semantic versioning convention for the repository and changelog entries. Given a version number [MAJOR.MINOR.PATCH], increment the following:

1. Major Version: to make incompatible API changes - updates containing new dependencies.
2. Minor Version: to add functionality in a backwards compatible manner.
3. Patch Version: to make backwards compatible bug fixes. Example: Version 1.0.0 has a function added in accordance with a minor version update. The new version will be 1.1.0. See: semver.org.

Guidelines

• Entries are are easy to understand.
• Each version has an entry and release date.
• Entries have corresponding addresses linked.
• Entries are ordered by date from newest to oldest.
• Entries contain updates relevant to an end user and may not reflect every commit.

Update-Types

Each changelog entry will include one or more update types relevant to each change:

• Added: New features.
• Changed: Changes in functionality.
• Deprecated: For soon to be removed features.
• Removed: For removed features.
• Fixed: For bug Fixes.
• Security: For vulnerabilities.

---

Back to Top