import { Meta, DocsContainer } from '@storybook/addon-docs'
import { Pill } from '@opencrvs/components/lib/Pill'
import { Button } from '@opencrvs/components/lib/Button'
import { ThemeProvider } from 'styled-components'
import { getTheme } from '@opencrvs/components/lib/theme'

<Meta
  title="Introduction"
  parameters={{
    docsCss: {
      maxWidth: '640px'
    }
  }}
/>

export const ExternalLinkIcon = () => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width="14"
    height="14"
    viewBox="0 0 24 24"
    fill="none"
    stroke="#4972BB"
    strokeWidth="2"
    strokeLinecap="round"
    strokeLinejoin="round"
    className="feather feather-external-link"
  >
    <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path>
    <polyline points="15 3 21 3 21 9"></polyline>
    <line x1="10" y1="14" x2="21" y2="3"></line>
  </svg>
)

<Pill label="v 1.5.0" type="default" size="small" />
<br />
<br />

# OpenCRVS UI-Kit

The OpenCRVS UI-Kit is a collection of guidelines, components and templates to build new features for OpenCRVS and high-quality branded applications faster.

<br />
<br />

### Design Resources

---

Use the <a href="https://www.figma.com/file/SsqCzO2eherXXCKyixmli9/OpenCRVS-Design-System-v2-WIP?node-id=0%3A1" target="_blank">Figma UI-Kit <ExternalLinkIcon /></a> for rapid design and prototyping of web-based applications. It contains all the resources you need to get started consisting of three libraries of styles, components, and templates.

<br />

### Accessibility

---

Accessible design not only helps users with disabilities, it provides a better user experience for everyone. The OpenCRVS team strives to write perceivable, understandable, and navigable components and screens for all users (WCAG 2.1). Including those employing a screen reader or other assistive technology.

<br />

### Contributing

---

OpenCRVS UI-Kit is being developed with <a href="https://github.com/opencrvs/opencrvs-core" target="_blank">GitHub <ExternalLinkIcon /></a>, where pull requests and issues are welcomed to make the component library even better. More information about contributing can be found in the README.

<br />

### Support and feedback

---

One of our missions is to build tools to make your job easier and you more successful. If there is a component or pattern you need or you have any other feedback, question or comment please contact.

jonathan@opencrvs.org

We look forward to building an amazing open source community with you!

<br />