@sobolt/sobolt-components v1.2.5

Sobolt Components

Web Component library for Sobolt's design system.

Installation

npm i @sobolt/sobolt-components

Development / Component building

npm install to install packages, followed by npm start to start the development server

Development / Storybook

To work with storybook, open 2 terminals and in the first terminal run npm run watch and in the second terminal run npm run start-storybook The first command will open a development server that keeps track of updates, so that storybook, which will open in a separate tab, will also reflect updates.

React

To use with React, follow the following instructions:

In your index.js file, import the necessary loaders:

import {
	applyPolyfills,
	defineCustomElements,
} from "@sobolt/sobolt-components/loader"

Then apply the polyfills and define the custome lements

applyPolyfills().then(() => {
	defineCustomElements()
})

Angular

To use with Angular, follow the following instructions:

• Include CUSTOM_ELEMENTS_SCHEMA within your modules that use components, for example within AppModule
• Call defineCustomElements() from main.ts (or other place)

// within main.ts -> also apply polyfills for different browser support

import { applyPolyfills, defineCustomElements } from  "@sobolt/sobolt-components/loader";

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.log(err));

applyPolyfills().then(() => {
	defineCustomElements()
})

// within module or wherever you're going to define custom schema elements

import { BrowserModule } from '@angular/platform-browser';
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, FormsModule],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class AppModule {}

For more information on integrating with Angular visit the official Stencil docs

After integrating the library, you can use every sobolt component available

Documentation

Sobolt Components Documentation, please contact Sobolt for login credentials

Request Sobolt Component

Coming soon

Global Styles

For now, global styling only works with font-sizes and widths of contained elements of your choosing for each breakpoint. These widths work with navbar, but you can also choose to add these widths to whatever component you want. Inside your main css file (e.g. main.scss), and add the following variables to the root to control the widths and font-sizes:

:root {
	--largeScreenWidth: 1200px;
	--mediumScreenWidth: 890px;
	--smallScreenWidth: 600px;
	--tabletScreenWidth: 480px;
	--mobileScreenWidth: 320px;

	--body: 13px;
}

Patch 0.2.1 notes

• Replaced functions wth event emitters
• Updated storybooks with methods & eventemitters
• Fixed dropdown and added width and color customization to button
• Fixed bug in select component that makes it automatically choose first option in select content list