DNA Styleguide

Styles and styled components for DNA.

Installation

1. Run install command in repository where styleguide should be added
   • Example

   npm install @dnanpm/styleguide
   

Usage example

Theme

import { createStyled, 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 const { styled, css } = createStyled<ThemeInterface>();
export default theme;

import theme from './theme';

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

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

Button

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

interface Props {
    myProp?: string;
}

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

export default MyComponent;

IE11 Support NextJS

In next.config.js you need to use next-transpile-modules package to allow nextjs to be able to transpile styleguide and related es6 modules based on babel config.

// next.config.js
const withTM = require('next-transpile-modules')(['@dnanpm/styleguide', "react-spring"]);

module.exports = withTM();