diff --git a/packages/dnb-design-system-portal/src/pages/uilib/usage/customisation/assets/css_structure_diagram.svg b/packages/dnb-design-system-portal/src/pages/uilib/usage/customisation/assets/css_structure_diagram.svg new file mode 100644 index 00000000000..e26678f4f92 --- /dev/null +++ b/packages/dnb-design-system-portal/src/pages/uilib/usage/customisation/assets/css_structure_diagram.svg @@ -0,0 +1,45 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/dnb-design-system-portal/src/pages/uilib/usage/customisation/styling.md b/packages/dnb-design-system-portal/src/pages/uilib/usage/customisation/styling.md index 6dc8b6a114b..4b134bc8215 100644 --- a/packages/dnb-design-system-portal/src/pages/uilib/usage/customisation/styling.md +++ b/packages/dnb-design-system-portal/src/pages/uilib/usage/customisation/styling.md @@ -5,11 +5,14 @@ draft: false order: 1 --- +import Img from 'Tags/Img' +import CSSDiagram from 'Pages/uilib/usage/customisation/assets/css_structure_diagram.svg' + # Styling The CSS is a compiled and minified version. You will find it here: `dnb-ui-lib/style/dnb-ui-lib.min.css` -**TODO:** CSS structure graphics +{CSSDiagram} ## Apply the DNB Style diff --git a/packages/dnb-design-system-portal/src/shared/inlineTags/Img.js b/packages/dnb-design-system-portal/src/shared/inlineTags/Img.js index 8c2349e59eb..f84ed73626b 100644 --- a/packages/dnb-design-system-portal/src/shared/inlineTags/Img.js +++ b/packages/dnb-design-system-portal/src/shared/inlineTags/Img.js @@ -1,11 +1,11 @@ import React, { Fragment } from 'react' import PropTypes from 'prop-types' -const Img = ({ alt, src, height, caption }) => { +const Img = ({ alt, src, children, height, caption }) => { return (
- {alt} + {alt {caption &&
{caption}
}
@@ -13,14 +13,18 @@ const Img = ({ alt, src, height, caption }) => { } Img.propTypes = { - alt: PropTypes.string.isRequired, - src: PropTypes.string.isRequired, + alt: PropTypes.string, + children: PropTypes.node, + src: PropTypes.string, height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), caption: PropTypes.string } Img.defaultProps = { caption: null, - height: null + alt: null, + src: null, + height: null, + children: null } export default Img