Nervous Parrot Muttering

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

    Keywords

    none

    Install

    npm i @telia/styleguide-web

    DownloadsWeekly Downloads

    6

    Version

    1.14.3

    License

    ISC

    Unpacked Size

    17 MB

    Total Files

    497

    Last publish

    Collaborators

    • telia-no-machine-user
    • mkmarek
    • tiborv
    • it-vegard
    • joakikr
    • mhadaily
    • ropimo
    • wkv
    • nmenglund
    • bogesti
    • wbern
    • andersos