@personio/ui-components

Design System Docz assets

Where to put component documentation related assets

To respect the modularity of each component, the suggested approach is to have a __docs__ dicrectory in each component's directory and put all the documentation assets there.

The following structure is used for the images and other doc related stuff:

src/select
├── __docs__
│   ├── docs.fixtures.js
│   ├── docs.styles.scss
│   └── img
│       ├── select_doc_briefexaple1.png
│       └── select_doc_briefexaple2.png

How to use images in .mdx files

The default ![foo](__docs__/img/bar.png) notation authomatically exposes the image assets to the bundler and the pipeline will upload them to the S3 bucket.

However for the <Playground/> components with image address, the suggested approach would be:

import fooImgUrl from './__docs__/img/foo.png'

<Playground>
  <FooComponent img={fooImgUrl} />
</Playground>