Sinch Design System

Welcome to the Sinch Design System! This library contains SCSS files and will include JavaScript functionalities in the future. It is intended for internal use for Sinch company websites.

Introduction

The Sinch Design System provides a consistent and reusable set of styles and components for building Sinch company websites. It ensures a unified look and feel across all our web properties.

Installation

To install the SCSS package, you can use npm:

npm install @sinch-web/design-system

Usage

To use the SCSS files in your project, you have two options:

1. Include the entire library:

   Import the main SCSS file to include the entire design system:

   @import 'path/to/sinch-design-system/scss/design-system';

2. Include components or elements separately:

   Use the @use rule to import specific components or elements, and then call the mixins inside those files to include the CSS code. For example:

   @use 'path/to/sinch-design-system/scss/elements/buttons';
   @include buttons.btn();
   @include buttons.btn-primary();
   @include buttons.btn-lg();

   For the order of inclusion of the files and for a list of existing mixins, it is recommended to consult the scss/design-system.scss file.

   Additionally, you can call different mixins from the mixins folder. For example, to use breakpoint mixins:

   @use 'path/to/sinch-design-system/scss/mixins/breakpoints';
   @include breakpoints.media-breakpoint-up('lg') {
     // Your styles here
   }

   Some components may have parameters. Check each mixin's files to see what parameters you can use.

   The utilities can also all be loaded (without specifying any parameters), or you can specify which utility to load and what values ​​to use for it (via a parameter). See the demo.html file for more details.

Releasing

npm version patch   # or minor / major

This bumps the version in package.json, prepends an auto-generated entry to its changelog field (built from the commit messages since the last release tag, with merge/bump commits and Jira IDs filtered out), commits, and tags vX.Y.Z — all in one go via the npm version lifecycle script (release-notes.mjs).

Write the changelog text yourself (instead of auto-generating it from commits):

$env:RELEASE_SUMMARY = "Update testimonial block"
npm version patch
Remove-Item Env:RELEASE_SUMMARY

Preview without changing anything:

$env:DRY_RUN = "1"
node release-notes.mjs
Remove-Item Env:DRY_RUN

Pushing stays manual: git push origin main --follow-tags (the --follow-tags makes the release tags go up too — they mark where the previous release ended).