@teliads/components

Telia component library

Telia's web components library created with Stencil.js.

How to use

Telia Global Design System can bbe used cross platforms in any project, becasue it's build using Web Components.

Setting up artifactory for your project

Mainly for developers inside Finland!

You need to have deveo credentials in order to be able to access artifactory.

Create a file .npmrc into the root of your project. File should include:

registry = https://artifactory.verso.sonera.fi:443/api/npm/npm-registry-virtual/
always-auth = true

Login to the artifactory by running npm login. When the command line asks, enter your deveo credentials and matching email. After this you'll be logged in to artifactory and you are able to install the dependencies.

Installation

Once the artifactory setup is complete, you can install @teliads/components library as any node_module

npm install @teliads/components --save or using yarn yarn add @teliads/components.

Alternative installation with Github

Mainly for developers outside of Finland, who doesn't have deveo credebntials!

In case the artifactory for some reason is a no go for you, you can install the library using Github.

npm install --save https://{USER}:{ACCESS_TOKEN}@github.com/TeliaSoneraFinland/design-system/archive/{VERSION}.tar.gz

Read how to create an access token

importing web components from @telia/component web component library in your project

Non React projects

Coming soon...

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 a little differently. This is because Stencil ships ES Modules by default, but Next.js doesn’t support this, so innstead 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