@citydna/common

@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

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

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 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:

• 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)
• from /packages/common run yarn build:icons