@dnanpm/styleguide
v3.9.0
Published
DNA Styleguide repository provides the set of components and theme object used in various DNA projects.
Downloads
2,429
Maintainers
Readme
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;