@telia/styleguide-web

1.14.3 • Public • Published

Telia Styleguide

This is a living styleguide, showing the Atomic Design components which should be used in Telia Norway's web applications to achieve a common look & feel, and therefore user experience.

Development

Getting started

  • Clone the repository
  • Install dependencies: npm install
  • Run in development mode: npm run dev
  • Go to this URL in your browser: http://localhost:3000/

Adding a new component

  • Add a folder called YourComponentName in component-lib/src/atoms|molecules|organisms
  • Inside the new folder, add a YourComponentName.jsx React component file
  • Add PropTypes to your component with documentation (you can look at Button component for inspiration)
  • Expose your React component in component-lib/src/index.js (NOTE: in two places)
  • Add a YourComponent.pcss file for your PostCSS
  • Add examples of usage of your component to src/client/examples/atoms|molecules|organisms (again you can look at Button examples)

Serving the styleguide locally for consumption from another local web app

  • Install http-server globally with npm (https://www.npmjs.com/package/http-server)
  • Go to you local styleguide folder in your terminal and type http-server ./ --cors
  • Include stylesheet in your project <link rel="stylesheet" href="http://local-styleguide:8080/css/bundle.components.css">

Exporting to another project

  • Make sure the server is running, then run npm run build to generate the styleguide
  • npm run export -- PATH where PATH is the path to your project

Deployment

Website

  • Install the Heroku CLI. See the Heroku Website for details
  • Make sure your Heroku account has access to the styleguide Heroku app
  • Add a remote for the heroku app: heroku git:remote -a telia-styleguide -r heroku
  • To deploy, run: npm run deploy:prod

React component library

See README.md in the component-lib folder.

Other

Useful links

Versioning

Notify all "breaking changes" or major changes in the #styleguide Slack Channel and update VERSIONS.md.

Readme

Keywords

none

Package Sidebar

Install

npm i @telia/styleguide-web

Weekly Downloads

1

Version

1.14.3

License

ISC

Unpacked Size

17 MB

Total Files

497

Last publish

Collaborators

  • leskraas
  • mkmarek
  • joakikr
  • wkv
  • andersos
  • telia-no-machine-user