@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

``shell
npm install @dnanpm/styleguide
`

Documentation

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

$3

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

$3

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

$3

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

$3

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

Usage example

$3

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



);
}
}
`

$3

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

interface Props {
myProp?: string;
}

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

export default MyComponent;
``