@component-controls/addon-notes

Embed markdown documents in your documentation sites

Usage no npm install needed!

<script type="module">
  import componentControlsAddonNotes from 'https://cdn.skypack.dev/@component-controls/addon-notes';
</script>

README

Table of contents

In action

Example site

Overview

This addon contains a NotesBlock that you can integrate into any page, as well as a standalone NotesPage

Getting Started

Install

yarn add@component-controls/addon-notes --dev

Add to a document

The notes will be assigned to all the stories in the current document

in mystory.stories.tsx

import { Document } from '@component-controls/core';
import design_notes from './design-assets/design-notes.md';;


export default {
  title: 'MyStory',
  plugins: {
    notes: {
      title: 'Design brief',
      items: [design_notes],
    },
  },
} as Document;

Add to a story

The notes will be assigned only to a specific story. This allows multiple stories in the document to have different notes associated with them.

in mystory.stories.tsx

import React from 'react';
import { Document, Example } from '@component-controls/core';

export default {
  title: 'MyStory',
} as Document;

export const story: Example = () => <Button>click me</Button>;

story.design = {
  plugins: {
    notes: [
      # Introduction
      some **markdown**
    ],
  },
};

Insert into an MDX document

in mystory.mdx

---
title: MyStory
---
import { NotesBlock } from '@component-controls/addon-notes';

<NotesBlock
  items={[
      `
# Introduction
some **markdown**
`,
  ]}
/>

Configure props globally

You can globally change the default options of the NotesBlock component

in .config/runtime.tsx

import { RuntimeConfiguration } from "@component-controls/core";

const config: RuntimeConfiguration = {
  ...
  components: {
    notes: {
      title: 'Design files'
    }
  },
};

export default config;

API

NotesBlock

NotesBlock source code

properties

Name Type Description
items (string | { [key: string]: any; text: string; })[]
title string optional section title for the block.
description string optional markdown description.
id string optional id to be used for the block if no id is provided, one will be calculated automatically from the title.
collapsible boolean if false, will nothave a collapsible frame.
data-testid string testing id
plain boolean inner container variant or plain
sx ThemeUIStyleObject
ref ((instance: HTMLDivElement) => void) | RefObject<HTMLDivElement>
name string