Skip to main content

Component documentation template

This page is rendered documentation template for a component. Find the raw version of this file in Github.

Component Name

note

Docusaurus automatically uses the site's title as its main heading

Also, write the purpose of the component here. Keep it direct and short.

Example​

(Base example of the component)

Usage Rules​

These are general design UI Do’s / Don’ts and notes.

Feel free to put pics here, especially comparison shots to make it clear how to use the component properly.

Avoid writing too much, be clear and to the point. One or two sentences per rule is preferred, 3 max.

With MDX you can also use Figma embeds to visualize Do's and Don'ts:

Copy paste this code lines into your MDX:

import { FigmaEmbed } from '../../src/components/FigmaEmbed';

<FigmaEmbed embedUrl="https://www.figma.com/file/TEHijB0j0gxT9AVKInGuSo/Atlas-Documentation?node-id=67%3A1416" height="200" />;
tip

You can specify height and width in the code to make the container taller or wider.

Usage Rule Subheader​

Subheaders are optional and used to make a specific point. Use them to keep info easy to digest.

Variants​

Name of Variant​

Write the purpose of the component here. One or two sentences per rule is preferred, 3 max. List all variants.

(interactive example here using a live editor)

```jsx live
  <MyComponent/>
```

Name of Variant (2)​

Write the purpose of the component here. One or two sentences per rule is preferred, 3 max. List all variants.

(interactive example here using a live editor)

Props​

For rendering a list of property for a compoonent we've developed a component called PropertyTable. You can use MDX to integrate it into the documentation:

NameTypeDefault
appName *
The appName will be used as a placeholder in case the app icon is not available
string
—
css
Add custom styles to this component. Use with caution. Learn more here: Link
SupportedStyleAttributes
—
inputFieldCss
SupportedStyleAttributes
—
appId
An app id in either Android's namespace format (e.g. "com.adjust.insights") or in iOS' number format (e.g. "1125517808")
string
—
size
Size of the icon
"small" | "medium" | "large"
"medium"
customQueryClient
custom queryClient for query hook
QueryClient
—
data-{foo}
Data attributes can be used by testing libraries to retrieve components or assert their existence
string
—
* - the prop is required.

Copy paste this code lines into your MDX:

import { PropertyTable } from '../../src/components/PropertyTable';

<PropertyTable of="AppIcon" />;

Make sure to:

  1. Include the newly developed component into the type ComponentType here and run yarn gen-types on root.
  2. Add the path to the component here
note

In case the PropertyTable can't find the props for a component appending "Component" to the component name in the of prop as shown above.

Accessibility​

See our accessibility guidelines for more information

Notes​

Optional. Use if necessary if there’s other information that doesn’t quite fit in the other sections.

  • (link to Related Component here)
  • (link to Related Component here)