# @tdstestingstuff/automate-release

> Global Design System component library

Latest version **20.1.0** (published 2021-08-24) · MIT license · 0 weekly downloads

## Install

```sh
npm install @tdstestingstuff/automate-release
pnpm add @tdstestingstuff/automate-release
yarn add @tdstestingstuff/automate-release
bun add @tdstestingstuff/automate-release
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 20.1.0 |
| Published | 2021-08-24 |
| First published | 2021-03-25 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 4.6 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | teliacompany |

## Links

- npm: https://www.npmjs.com/package/@tdstestingstuff/automate-release
- Repository: https://github.com/telia-company/ds-cicd-automation
- Homepage: https://github.com/telia-company/ds-cicd-automation#readme
- Issues: https://github.com/telia-company/ds-cicd-automation/issues
- npm.io page: https://npm.io/package/@tdstestingstuff/automate-release

## Recent versions

- 20.1.0 (latest) — 2021-08-24
- 20.0.0 — 2021-08-20
- 19.1.0 — 2021-08-20
- 19.0.1 — 2021-08-20
- 19.0.0 — 2021-08-18
- 18.0.0 — 2021-08-18
- 17.0.0 — 2021-08-18
- 16.0.0 — 2021-08-18
- 15.1.0 — 2021-08-18
- 15.0.1 — 2021-08-18
- 15.0.0 — 2021-08-18
- 14.0.0 — 2021-08-18
- 13.1.0 — 2021-08-18
- 13.0.0 — 2021-08-18
- 12.0.0 — 2021-08-18
- … 40 more at https://npm.io/package/@tdstestingstuff/automate-release/versions

## README

# 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](https://www.figma.com/files/881297678389013465/project/20688193/Foundation-Libraries)

The Component libraries are here: [Voca DS Components](https://www.figma.com/files/881297678389013465/project/25464217/Component-Libraries)

### Storybook

For an overview of available components and their API, [go to the storybook](https://teliads.netlify.app/). 

### Accessibility

Read our [accessibility guidelines here.](https://wiki.intra.telia.fi/display/MOLNIA/DS+Accessibility+guidelines) 

## 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](https://github.com/telia-company/design-system/blob/main/documentation/changes.md).

## 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](https://stenciljs.com/docs/vue) and [more info for Angular users](https://stenciljs.com/docs/angular)


### 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:

```javascript
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](https://www.gatsbyjs.com/plugins/gatsby-plugin-stencil/?=stenc) 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:

```javascript
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.

```javascript
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
```

---
_Source: https://npm.io/package/@tdstestingstuff/automate-release · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._