@dnanpm/styleguide

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

npm install @dnanpm/styleguide

Contribution

See Contribution guide in DNA Styleguide repository for more information.

[!NOTE] Requires access to DNA private repository!

Changelog

See Changelog in DNA Styleguide repository for more information.

[!NOTE] Requires access to DNA private repository!

Usage example

Theme

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;

import theme from './theme';

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

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

Component

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

interface Props {
    myProp?: string;
}

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

export default MyComponent;