DNA Styleguide repository provides the set of components and theme object used in various DNA projects.

## Installation

Run install command in repository where DNA Styleguide should be added

```shell
npm install @dnanpm/styleguide
```

## Documentation

> [!NOTE]
> Requires access to DNA Cloud URL!

### Interactive documentation and API

See latest version of [DNA Styleguide](https://styleguide.devkube.kauppa5test.acs.dnacloud.fi/latest/) for theme documentation, API and interactive documentation of components.

### Changelog

See [Changelog](https://styleguide.devkube.kauppa5test.acs.dnacloud.fi/latest/#/Changelog) for current major version changes, or [Changelog Archive](https://styleguide.devkube.kauppa5test.acs.dnacloud.fi/latest/#/Changelog%20archive) for old major versions' changes.

### Migration guide

See [Migration guide](https://styleguide.devkube.kauppa5test.acs.dnacloud.fi/latest/#/Migration%20Guide) for more information about how to migrate between major versions of DNA Styleguide.

### Contribution guide

See [Contribution guide](https://styleguide.devkube.kauppa5test.acs.dnacloud.fi/latest/#/Contribution%20guide) for more information about how to contribute to DNA Styleguide.

## Usage example

### Theme

```js
import { theme as defaultTheme } from '@dnanpm/styleguide';

const color = {
    ...defaultTheme.color,
    background: '#000000',
};

const iconSize = {
    default: '0.75em',
    defaultMobile: '2em',
};

const theme = {
    ...defaultTheme,
    colors,
    iconSize,
};

export type ThemeInterface = typeof theme;
export default theme;
```

```js
import theme from './theme';

class MyApp {
    public render() {
        const { Component, pageProps } = this.props;

        return (
            <ThemeProvider theme={theme}>
                <Component {...pageProps} />
            </ThemeProvider>
        );
    }
}
```

### Component

```js
import { ButtonPrimary } from '@dnanpm/styleguide';

interface Props {
    myProp?: string;
}

const MyComponent = ({
    myProp,
}: Props) => {
    return (
        <ButtonPrimary>{myProp || 'Lorem Ipsum'}</ButtonPrimary>
    );
};

export default MyComponent;
```