@scania/tegel-react

@scania/tegel-react

This is an ongoing project with the purpose to simplify the integration of Tegel in React apps.

This guide here has served as base for the configuration.

Official website: https://tegel.scania.com/

Storybook: https://tds-storybook.tegel.scania.com/

The design system supports the design and development of digital solutions at Scania. The purpose is to secure a coherent, premium brand and user experience across all of Scania's digital touchpoints.

Status

This package is in production and ready for use. It's available via NPM and can be installed using the installation guide below.

Installation

• Run npm install @scania/tegel-react
• In your App.tsx:

import { defineCustomElements, TdsButton } '@scania/tegel-react';

defineCustomElements(); // Needs to be run in the browser once, before any elements are used.

function App() {
return (
<div className="App">
  <TdsButton text="Click me!">
  </TdsButton>
</div>
);
}

export default App;

• In your global css file import the tegel stylesheet.

@import url('@scania/tegel/dist/tegel/tegel.css');

See all available components in the Tegel Design System.

Browser support

See the browser support section on the Tegel website.

Community

Get in touch with the team and the community:

• Teams

License

All CSS, HTML and JS code are available under the MIT license. The Scania brand identity, logos and photographs found in this repository are copyrighted Scania CV AB and are not available on an open source basis or to be used as examples or in any other way, if not specifically ordered by Scania CV AB.