@teliads/components

Telia Design System

Telia design system is a web components library.

Installation

Package info at NPM: https://www.npmjs.com/package/@teliads/components

To install:

npm install @teliads/components  

or with yarn

yarn add @teliads/components  

Usage

Import and define custom element one time in root file.

import {defineCustomElements} from ‘@teliads/components/loader’;
defineCustomElements(window);

Use the web component

<telia-button>Press me!</telia-button>

More info for Vue users: https://stenciljs.com/docs/vue

More info for Angular users: https://stenciljs.com/docs/angular

React projects

CRA - create-react-app

1. If you are using create-react-app with TypeScript

import React, { FC } from "react";
import { TeliaColorDot } from "@teliads/components/react";

const App: FC = (props) => {
  return <TeliaColorDot color="red" withborder={true} />;
};
export default App;

Server Side Rendered React applications

SSR and SSG technologies doesn't support web components out of the box, by default web components are not available at all on server side rendered apps or in Static Site Generators, because in NodeJS environment there is no document or window awailable.

Usage with Next.js

With an application built using Next.js, you need to import the components differently. Default import of telia design system is ES modules, but for Next.js we need to import CommonJS version of components.

Import Components from @teliads/components/react/commonjs by importing them from common js files like this:

import React from "react";
import App from 'next/app';
import {TeliaColorDot} from '@teliads/components/react/commonjs';

export default class MyApp extends App {
  render() {
    return <TeliaColorDot color="blue" withborder={true} />;
  }
};

Gatsby.js

Gatsby.js provides official gatsby-plugin-stencil plugin to support stencil.js web components in your Gatsby.js websites.

You can find more information about gatsby-plugin-stencil from offical Gatsby.js documentation.

1. In order to start using gatsby-plugin-stencil, you need to install it into your Gatsby.js site, by running npm install --save gatsby-plugin-stencil or for yarn yarn add gatsby-plugin-stencil.

2. Include gatsby-plugin-stencil plugin into your gastsby-config.js file inside of plugins array following settings:

module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-stencil`,
      options: {
        // The module of your components (required), eg "@ionic/core".
        module: "@teliads/components",

        // Stencil renderToString options (optional): https://stenciljs.com/docs/hydrate-app#configuration-options
        renderToStringOptions: {
          prettyHtml: true,
        },
      },
    },
  ],
};

1. Use Web components from react wrapper package folder in your Gatsby.js website in any file by importing web components from @teliads/components/react folder.

import * as React from "react"
import { TeliaColorDot } from '@teliads/components/react';

// markup
const IndexPage = () => {
  return (
    <main>
      <TeliaColorDot color="green" withborder={true} />
    </main>
  )
}

export default IndexPage