@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

Documentation

[!NOTE] Requires access to DNA Cloud URL!

Interactive documentation and API

See latest version of DNA Styleguide for theme documentation, API and interactive documentation of components.

Changelog

See Changelog for current major version changes, or Changelog Archive for old major versions' changes.

Migration guide

See Migration guide for more information about how to migrate between major versions of DNA Styleguide.

Contribution guide

See Contribution guide for more information about how to contribute to DNA Styleguide.

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;