{"id":23125119,"url":"https://github.com/statisticsnorway/ssb-component-library","last_synced_at":"2025-08-17T03:32:45.160Z","repository":{"id":37484486,"uuid":"212587671","full_name":"statisticsnorway/ssb-component-library","owner":"statisticsnorway","description":"Component library for SSB","archived":false,"fork":false,"pushed_at":"2024-10-29T12:42:52.000Z","size":16366,"stargazers_count":3,"open_issues_count":21,"forks_count":1,"subscribers_count":6,"default_branch":"master","last_synced_at":"2024-10-29T14:54:42.367Z","etag":null,"topics":["backstage"],"latest_commit_sha":null,"homepage":"https://statisticsnorway.github.io/design-system/#/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/statisticsnorway.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-10-03T13:30:44.000Z","updated_at":"2024-10-28T08:12:28.000Z","dependencies_parsed_at":"2023-11-10T14:13:52.982Z","dependency_job_id":"beb1eb94-18d8-4415-ae86-adaaf2eb8bc8","html_url":"https://github.com/statisticsnorway/ssb-component-library","commit_stats":{"total_commits":712,"total_committers":19,"mean_commits":"37.473684210526315","dds":0.8089887640449438,"last_synced_commit":"a9fd94eb451f627cf6336053726b6277b023e1da"},"previous_names":[],"tags_count":63,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/statisticsnorway%2Fssb-component-library","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/statisticsnorway%2Fssb-component-library/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/statisticsnorway%2Fssb-component-library/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/statisticsnorway%2Fssb-component-library/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/statisticsnorway","download_url":"https://codeload.github.com/statisticsnorway/ssb-component-library/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":230085319,"owners_count":18170425,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["backstage"],"created_at":"2024-12-17T08:12:36.848Z","updated_at":"2024-12-17T08:12:37.657Z","avatar_url":"https://github.com/statisticsnorway.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# SSB Component Library\n\n[![npm version](https://badge.fury.io/js/%40statisticsnorway%2Fssb-component-library.svg)](https://badge.fury.io/js/%40statisticsnorway%2Fssb-component-library)\n\nThe SSB component library is developed mainly for developers at SSB.\nVisit the [documentation page](https://github.com/statisticsnorway/design-system) to see all available components and how to use them.\n\n- [Usage](#usage)\n  - [Installing library](#installing-library)\n  - [Use components](#use-components)\n- [Contributing](#contributing)\n  - [Run project locally](#run-project-locally)\n  - [How to start working on a feature](#how-to-start-working-on-a-feature)\n  - [Publish to NPM](#publish-to-npm)\n  - [Development](#development)\n    - [Components](#components)\n    - [Storybook](#storybook)\n    - [Testing](#testing)\n    - [Styling](#styling)\n\n---\n\n## Usage\n\n### Installing library\n\nIf you want to use the component library in your project, simply install it from npm.\n\n`$ npm install @statisticsnorway/ssb-component-library --save`\n\n### Use components\n\nEvery component is developed to support being used as React components or as HTML by downloading the bundled CSS.\nRegardless of which way you use it, you need to import the stylesheet at the top of your project.\nYou can do this either in the top javascript file, or in the top scss file. If using the library as a module, we recommend importing the [main scss file](./src/main.scss),\nIf you want to only apply the CSS, you can download the [bundled CSS](./lib/bundle.css) stylesheet and add it to your project.\n\nIf your project uses React, just use the module as you usually would use an external react component.\n\n```jsx harmony\nimport { Button } from '@statisticsnorway/ssb-component-library'\n;\u003cButton onClick={callback} primary\u003e\n  Click me!\n\u003c/Button\u003e\n```\n\nIf you only use HTML and CSS, look at the documentation for the specific component to make sure you get the class names right.\nUse them precisely to ensure you get all the appropriate styles.\n\n```html\n\u003cbutton class=\"ssb-button primary-btn\"\u003eClick me\u003c/button\u003e\n```\n\nYou can find all available components [here](src/components) with the needed descriptions of how to use.\nYou can also find this at the [website](https://statisticsnorway.github.io/design-system/#/components) (only in Norwegian for now).\n\n## Contributing\n\n### Run project locally\n\n```\n... clone repository ...\n$ npm install\n$ npm start\n```\n\nThis will open [storybook](#storybook) where you can develop components in an isolated environment.\n\n### How to start working on a feature\n\n```\n$ git checkout master\n$ git pull\n$ git checkout -b add-feature-x\n... do changes ...\n$ git commit -a -m \"detailed commit message\"\n$ git status\n... verify that correct files are included ...\n$ git push -u origin add-feature-x\n... create pull-request to master ...\n```\n\n### Publish to NPM\n\nMerge to master will automatically publish to NPM if version number in `package.json` is updated.\n\n## Development\n\n#### Components\n\nComponents are written in [React](https://reactjs.org/) using the [JSX](https://reactjs.org/docs/introducing-jsx.html) syntax.\nComponents should be written as functions, as opposed to classes, and if a local state or event handler is needed you should\ntake use of the [Hooks API](https://reactjs.org/docs/hooks-intro.html).\n\nAs a way to ensure that our components are being used they way we intended, we use [PropTypes](https://www.npmjs.com/package/prop-types)\nto check properties being passed to components. _All_ components with props available should have this.\n\nOne of the requirements for the components is that they should be able to render with the desired design using only HTML.\nPlease develop components with that in mind. Some projects will only extract the stylesheet and apply the class names to receive styling,\nwhile handling interactions on their own. Always develop with this in mind.\n\n#### Storybook\n\n[Storybook](https://storybook.js.org/) is an open source tool for developing UI components in an isolated environment.\nIt is also a useful tool for demoing components by themselves or put together into a user scenario.\nTo add a component to the storybook build, create a file named like `componentName.story.jsx`.\nImport some needed modules, the component you are creating the story for, and add it like this:\n\n```jsx harmony\nimport React from 'react'\nimport { storiesOf } from '@storybook/react'\nimport centered from '@storybook/addon-centered/react'\nimport Button from './index'\n\nstoriesOf('Button', module)\n  .addDecorator(centered)\n  .add('Primary button', () =\u003e (\n    \u003cdiv\u003e\n      \u003cButton text='Primary' primary /\u003e\n      \u003cButton text='Disabled' primary disabled /\u003e\n    \u003c/div\u003e\n  ))\n```\n\nEvery new instance of `storiesOf` creates a new menu item in the storybook. When using the `add`, it creates an item in\na sub menu.\n\n#### Testing\n\nTesting is done with [Jest](https://jestjs.io/en/) and React testing library. Write unit tests for all components and aim for a 100% test coverage. [Do no test component internals and state. Test on actual ouput on what user experiences.](https://testing-library.com/docs/guiding-principles)\nTo run the tests, simply run `npm test`. To run tests without using any cache, run `npm run clean-test`.\nIf you need to replace outdated screenshots, run `npm run clear-tests`.\n\n[Here is a cheat sheet for Jest](https://github.com/sapegin/jest-cheat-sheet).\n\n[Here is a cheat sheet for Testing library](https://testing-library.com/docs/react-testing-library/cheatsheet/).\n\n#### Styling\n\nStyling is done with SCSS. You should familiarise yourself just a bit with the [stylelint](./.stylelintrc) configuration,\nbut it's pretty manageable. Just make sure you stick to the color variables specified in the [variables document](./src/style/_variables.scss)\nto make maintenance and potential changes easier.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstatisticsnorway%2Fssb-component-library","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstatisticsnorway%2Fssb-component-library","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstatisticsnorway%2Fssb-component-library/lists"}