Noisy Pillaging Monster

    storybook-addon-poleaxe
    TypeScript icon, indicating that this package has built-in type declarations

    0.1.4 • Public • Published

    Storybook Poleaxe


    storybook a11y poleaxe

    a11y axe 🪓 on a stick


    npm downloads

    Idea

    Inspired by HTML-tree

    Provides:

    • 👁 highlighting for Headings on the page, helping to understand their placement
    • 🌳 tree view of a page structure, creating a capability to "see" your page as a glossary

    Screen Shot 2021-11-22 at 7 49 35 pm

    Screen Shot 2021-11-22 at 7 49 56 pm

    Installation

    // .storybook/main.js
    module.exports = {
    addons: [require.resolve('storybook-addon-poleaxe/preset')],
    };

    Configuration

    You can enable or disable highlighting by default for a specific story via story parameters

    HighlightedByDefault.parameters = {
      poleaxe: {
        highlighter: true,
      }
    }

    You can also control the behavior of MutationObserver

    StaticStory.parameters = {
      poleaxe: {
        mutationObserver: true | false, // enabled of disabled for all
        mutationObserver: 'highlighter' | 'panel', // enabled only for some pieces
      }
    }

    See also

    License

    MIT

    Install

    npm i storybook-addon-poleaxe

    DownloadsWeekly Downloads

    188

    Version

    0.1.4

    License

    MIT

    Unpacked Size

    66.9 kB

    Total Files

    77

    Last publish

    Collaborators

    • kashey