# `@citydna/common`

A branded component library for Melbourne CityDNA. Check out the Storybook for examples of most components. For everything else, use `@material-ui/core`.

## Installation

```bash
$ yarn add @citydna/common @material-ui/core @material-ui/icons
```

## Usage

Most importantly, wrap your app in the `<Theme />` component. After that, go for gold. You can [play with the example below in codesandbox](https://codesandbox.io/s/cool-curran-qis1k).

```tsx
import React from "react"
import { Button, Header, InsetWrap, Theme, Title } from "@citydna/common"

export const MyComponent = () => (
  <Theme variant="dark">
    <Header microBranding right={<Button variant="text" color="default" size="small">Click me</Button>} />
    <InsetWrap>
      <Title primary="Easily build branded UIs" secondary="That look and feel great too.">
      <Button>Lovin' life?</Button>
    </InsetWrap>
  </Theme>
)

// note: You only need to wrap your whole app with <Theme /> once - unless you want to nest themes.
```

## Available components

Check the [storybook](https://citydna-storybook.netlify.app/) for interactive demos and usage.

- `Alert`
- `Button`
- `CounterInput`
- `Dialog`
- `Header`
- `HorizontalTileGrid`
- `ReactMarkdownMui`
- `InsetWrap`
- `Logo`
- `MicroLogo`
- `ResultsList`
- `SearchForm`
- `Select`
- `Skrim`
- `Snackbars`
- `Subtitle`
- `TextField`
- `Theme`
- `Title`
- `VerticalTileGrid`

## City DNA icons

When adding a new icon to this package follow these steps:

1. Add the .svg file to the application specific dir i.e. `/aboriginal-melbourne` and copy the code into a new `.ts` file with the same name (follow an existing .ts file as an example)
2. from `/packages/common` run `yarn build:icons`