@dnanpm/styleguide/README.md

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

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;
```