Voca design system

Voca design system is a web components library.

Resources

New resourse are to be found here. Read through them carefully and start using design sytem package! This is for minor This is for Major!

Figma

The Foundation libraries are here: Voca DS Foundations

The Component libraries are here: Voca DS Components

Storybook

For an overview of available components and their API, go to the storybook.

Accessibility

Read our accessibility guidelines here.

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  

Change management

For information about the type of changes each release may contain, please read Change type deifintions.

Usage

Environments that support custom elements

Custom elements can be used directly in HTML5, Vue and Angular enviroments, among others.

Basic usage

1. Import and define custom elements one time in root file

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

2. Use the web component

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

Framwork integration

More info for Vue users and more info for Angular users

React projects

CRA – create-react-app

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 Voca 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,
        },
      },
    },
  ],
};

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