@tcn/sb-blackcat-addon v1.0.0

Storybook Blackcat Addon

A Storybook addon that provides accessibility scaling and layout direction controls for your components. It adds these toolbar controls:

1. A scalar control to adjust component sizes based on user preferences
2. A direction control to switch between LTR and RTL layouts

Requirements

• Storybook v8+
• React

Installation

yarn add -D @tcn/sb-blackcat-addon

Configuration

Add the addon to your Storybook configuration:

// .storybook/main.ts
import type { StorybookConfig } from '@storybook/react-vite';

const config: StorybookConfig = {
  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-onboarding',
    '@storybook/addon-interactions',
    '@tcn/sb-blackcat-addon',
  ],
  framework: {
    name: '@storybook/react-vite',
    options: {},
  },
  docs: {
    autodocs: 'tag',
  },
};

export default config;

Note: The addon ID BLACKCAT_ADDON_ID is exported from the package for future parameter configuration.

Usage

CSS Variables

The addon sets CSS variables that you can use in your components:

/* Font size scaling */
.my-component {
  font-size: calc(16px * var(--accessibility-scalar));
}

/* Component sizing */
.my-component {
  min-height: calc(100px * var(--accessibility-scalar));
  padding: calc(16px * var(--accessibility-scalar));
}

/* When using data attributes,
 * the scalar should typically still be applied per variant
 * for responsive scaling */

[data-hierarchy="md"] {
  min-height: calc(200px * var(--accessibility-scalar));
  font-size: calc(14px * var(--accessibility-scalar));
}

Available Values

Accessibility Scalar

The scalar can be set to any numeric value. The following values are pre-configured for testing:

Direction