cozy-ui

Components available

Alerter

import { Alerter } from 'cozy-ui/react'

Button

import { Button } from 'cozy-ui/react'

<Button theme='regular'></Button>
<Button theme='primary'></Button>
<Button theme='secondary'></Button>

I18n

import { I18n } from 'cozy-ui/react'

Icon

import { Icon } from 'cozy-ui/react'
<Icon icon='check' />

• album-add
• album-remove
• check
• cozy
• cross
• delete-grey08
• delete
• device-laptop
• dots
• download
• moveto
• openwith
• paperplane
• rename
• share-grey08
• share
• upload-grey08
• upload
• warn
• warning

SelectionBar

import { SelectionBar } from 'cozy-ui/react'

Spinner

import { Spinner } from 'cozy-ui/react'
<Spinner />

Tabs

import { TabPanels, Tabs, TabPanel, TabList } from 'cozy-ui/react'

const myTabs = ({account}) => {
  <Tabs initialActiveTab='details'>
  <TabList>
    <Tab name='details'>{t('Détails')}</Tab>
    <Tab name='sharing'>{t('Partage')}</Tab>
  </TabList>
  <TabPanels>
    <TabPanel name='details'>
      <AccountDetails account={account} />
    </TabPanel>
    <TabPanel name='sharing'>
      <AccountSharingDetails account={account} />
    </TabPanel>
  </TabPanels>
</Tabs>
}

Toggle

import { Toggle } from 'cozy-ui/react'
<Toggle checked={ true } onToggle={checked => alert(checked) } />

ModalContent

import { Modal, ModalContent } from 'cozy-ui/react'

const example = () =>
  <Modal withCross>
    <ModalContent>
      <div>
        Hello, I'm a Modal with a close button.
      </div>
    </ModalContent>
  </Modal>

I18n, translate

• I18n: Context provider for children to have access to t in their context
• translate: HOC to pass t as a prop, from the context

 <I18n lang='en' dictRequire={(lang) => require(`../src/locales/${lang}`)}>
  <App />
 </I18n>

class HelloWorld extends Component {
  render () {
    const {t} = this.props
    return <div>{t('hello-world')}</div>
  }
}

export default translate()(HelloWorld)