@component-controls/addon-images

Embed images in your documentation sites

Usage no npm install needed!

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

README

Table of contents

In action

Example site

Overview

This addon contains an ImagesBlock that you can integrate into any page, as well as a standalone ImagesPage

Getting Started

Install

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

Add to a document

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

in mystory.stories.tsx

import { Document } from '@component-controls/core';
import main_screen from './media/main-screen.jpg';

export default {
  title: 'MyStory',
  plugins: {
    images: {
      title: 'Screen design',
      items: [main_screen],
    },
  },
} as Document;

Add to a story

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

in mystory.stories.tsx

import React from 'react';
import { Document, Example } from '@component-controls/core';
import main_screen from './media/main-screen.jpg';

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

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

story.design = {
  plugins: {
    images: [main_screen],
  },
};

Insert into an MDX document

in mystory.mdx

---
title: MyStory
---
import { ImagesBlock } from '@component-controls/addon-images';
import login_screen from './media/login-screen.jpg';
import logout_screen from './media/logout-screen.jpg';

<ImagesBlock
  items={[login_screen, logout_screen]}
/>

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: {
    images: {
      title: 'Screenshots'
    }
  },
};

export default config;

API

ImagesBlock

ImagesBlock source code

properties

Name Type Description
items (string | { [key: string]: any; src: 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