Municipio React UI

Library of accessible & reusable React UI components for developing interactive module/plugins on helsingborg.se and other websites built with Municipio (Open Source Theme for Wordpress).

• UI Components depends on CSS styles from helsingborg-stad/styleguide
• UI Components are written in TypeScript
• Library can be used without Wordpress just as long the styleguide CSS is included

📦 Installation

# using npm
npm install @helsingborg-stad/municipio-react-ui

# using yarn
yarn add @helsingborg-stad/municipio-react-ui

🎨 Styleguide

Include the latest styleguide and fonts in your app:

<!-- styleguide css -->
<link
  rel="stylesheet"
  id="styleguide-css"
  type="text/css"
  href="https://styleguide.getmunicipio.com/assets/dist/css/styleguide-css.min.css"
  media="all"
/>

<!-- roboto font -->
<link
  href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;0,900;1,400;1,500&amp;display=swap"
  rel="stylesheet"
/>

<!-- material icons -->
<link
  href="https://fonts.googleapis.com/icon?family=Material+Icons"
  rel="stylesheet"
/>

Stylesheet can also be built & imported as a ES6 module but it requires your build pipeline to support SASS.

🔧 Usage

import { Button, Icon } from '@helsingborg-stad/municipio-react-ui'

const App = () => (
  <>
    <Icon name="phone">
    <Button>Example button</Button>
  </>
);

📚 Documentation

• Storybook
• Styleguide
• Icons

🛠 Development

Clone & run locally

git clone helsingborg-stad/municipio-react-ui
cd municipio-react-ui
yarn
yarn start

Open your browser and visit http://localhost:6006.

Lint code

yarn lint

Format code

yarn format

Run tests

yarn test

🤝 Contributing

You can submit any ideas as pull requests or as GitHub issues.

📝 Changelog

The CHANGELOG.md is regularly updated to reflect what's changed in each new release.

🔗 Links

• helsingborg-stad/styleguide
• helsingborg-stad/Municipio
• helsingborg-stad/component-lib
• helsingborg-stad/modularity

License

MIT