@techsio/storybook-better-a11y 0.0.5 → 0.0.6

package/dist/components/A11yContext.test.js

@@ -0,0 +1,277 @@
+import { act, cleanup, render } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { Fragment, createElement, useState } from "react";
+import { STORY_FINISHED, STORY_RENDER_PHASE_CHANGED } from "storybook/internal/core-events";
+import { EVENTS } from "../constants.js";
+import { A11yContextProvider, useA11yContext } from "./A11yContext.js";
+import * as __rspack_external_storybook_manager_api_d834c1f5 from "storybook/manager-api";
+vi.mock('storybook/manager-api');
+const mockedApi = vi.mocked(__rspack_external_storybook_manager_api_d834c1f5);
+const storyId = 'button--primary';
+const axeResult = {
+    incomplete: [
+        {
+            id: 'color-contrast',
+            impact: 'serious',
+            tags: [],
+            description: 'Ensures the contrast between foreground and background colors meets WCAG 2 AA contrast ratio thresholds',
+            help: 'Elements must have sufficient color contrast',
+            helpUrl: 'https://dequeuniversity.com/rules/axe/3.2/color-contrast?application=axeAPI',
+            nodes: []
+        }
+    ],
+    passes: [
+        {
+            id: 'aria-allowed-attr',
+            impact: void 0,
+            tags: [],
+            description: "Ensures ARIA attributes are allowed for an element's role",
+            help: 'Elements must only use allowed ARIA attributes',
+            helpUrl: 'https://dequeuniversity.com/rules/axe/3.2/aria-allowed-attr?application=axeAPI',
+            nodes: []
+        }
+    ],
+    violations: [
+        {
+            id: 'color-contrast',
+            impact: 'serious',
+            tags: [],
+            description: 'Ensures the contrast between foreground and background colors meets WCAG 2 AA contrast ratio thresholds',
+            help: 'Elements must have sufficient color contrast',
+            helpUrl: 'https://dequeuniversity.com/rules/axe/3.2/color-contrast?application=axeAPI',
+            nodes: []
+        }
+    ]
+};
+describe('A11yContext', ()=>{
+    afterEach(()=>{
+        cleanup();
+    });
+    const onAllStatusChange = vi.fn();
+    const getAll = vi.fn();
+    const set = vi.fn();
+    const onSelect = vi.fn();
+    const unset = vi.fn();
+    const getCurrentStoryData = vi.fn();
+    const getParameters = vi.fn();
+    const getQueryParam = vi.fn();
+    beforeEach(()=>{
+        mockedApi.experimental_getStatusStore.mockReturnValue({
+            onAllStatusChange,
+            getAll,
+            set,
+            onSelect,
+            unset
+        });
+        mockedApi.useAddonState.mockImplementation((_, defaultState)=>useState(defaultState));
+        mockedApi.useChannel.mockReturnValue(vi.fn());
+        getCurrentStoryData.mockReturnValue({
+            id: storyId,
+            type: 'story'
+        });
+        getParameters.mockReturnValue({});
+        mockedApi.useStorybookApi.mockReturnValue({
+            getCurrentStoryData,
+            getParameters,
+            getQueryParam
+        });
+        mockedApi.useParameter.mockReturnValue({
+            manual: false
+        });
+        mockedApi.useStorybookState.mockReturnValue({
+            storyId
+        });
+        mockedApi.useGlobals.mockReturnValue([
+            {
+                a11y: {}
+            }
+        ]);
+        mockedApi.useChannel.mockClear();
+        mockedApi.useStorybookApi.mockClear();
+        mockedApi.useAddonState.mockClear();
+        mockedApi.useParameter.mockClear();
+        mockedApi.useStorybookState.mockClear();
+        mockedApi.useGlobals.mockClear();
+    });
+    it('should render children', ()=>{
+        const { getByTestId } = render(/*#__PURE__*/ createElement(A11yContextProvider, null, /*#__PURE__*/ createElement("div", {
+            "data-testid": "child"
+        })));
+        expect(getByTestId('child')).toBeTruthy();
+    });
+    it('should handle STORY_FINISHED event correctly', ()=>{
+        const emit = vi.fn();
+        mockedApi.useChannel.mockReturnValue(emit);
+        const Component = ()=>{
+            const { results } = useA11yContext();
+            return /*#__PURE__*/ createElement(Fragment, null, !!results?.passes.length && /*#__PURE__*/ createElement("div", {
+                "data-testid": "anyPassesResults"
+            }, JSON.stringify(results.passes)), !!results?.incomplete.length && /*#__PURE__*/ createElement("div", {
+                "data-testid": "anyIncompleteResults"
+            }, JSON.stringify(results.incomplete)), !!results?.violations.length && /*#__PURE__*/ createElement("div", {
+                "data-testid": "anyViolationsResults"
+            }, JSON.stringify(results.violations)));
+        };
+        const { queryByTestId } = render(/*#__PURE__*/ createElement(A11yContextProvider, null, /*#__PURE__*/ createElement(Component, null)));
+        expect(queryByTestId('anyPassesResults')).toBeFalsy();
+        expect(queryByTestId('anyIncompleteResults')).toBeFalsy();
+        expect(queryByTestId('anyViolationsResults')).toBeFalsy();
+        const useChannelArgs = mockedApi.useChannel.mock.calls[0][0];
+        const storyFinishedPayload = {
+            storyId,
+            status: 'error',
+            reporters: [
+                {
+                    type: 'a11y',
+                    result: axeResult,
+                    status: 'failed',
+                    version: 1
+                }
+            ]
+        };
+        act(()=>useChannelArgs[STORY_FINISHED](storyFinishedPayload));
+        expect(queryByTestId('anyPassesResults')).toHaveTextContent(JSON.stringify(axeResult.passes));
+        expect(queryByTestId('anyIncompleteResults')).toHaveTextContent(JSON.stringify(axeResult.incomplete));
+        expect(queryByTestId('anyViolationsResults')).toHaveTextContent(JSON.stringify(axeResult.violations));
+    });
+    it('should set discrepancy to cliFailedButModeManual when in manual mode (set via globals)', ()=>{
+        mockedApi.useGlobals.mockReturnValue([
+            {
+                a11y: {
+                    manual: true
+                }
+            }
+        ]);
+        mockedApi.experimental_useStatusStore.mockReturnValue('status-value:error');
+        const Component = ()=>{
+            const { discrepancy } = useA11yContext();
+            return /*#__PURE__*/ createElement("div", {
+                "data-testid": "discrepancy"
+            }, discrepancy);
+        };
+        const { getByTestId } = render(/*#__PURE__*/ createElement(A11yContextProvider, null, /*#__PURE__*/ createElement(Component, null)));
+        expect(getByTestId('discrepancy').textContent).toBe('cliFailedButModeManual');
+    });
+    it('should set discrepancy to cliPassedBrowserFailed', ()=>{
+        mockedApi.useParameter.mockReturnValue({
+            manual: true
+        });
+        mockedApi.experimental_useStatusStore.mockReturnValue('status-value:success');
+        const Component = ()=>{
+            const { discrepancy } = useA11yContext();
+            return /*#__PURE__*/ createElement("div", {
+                "data-testid": "discrepancy"
+            }, discrepancy);
+        };
+        const { getByTestId } = render(/*#__PURE__*/ createElement(A11yContextProvider, null, /*#__PURE__*/ createElement(Component, null)));
+        const storyFinishedPayload = {
+            storyId,
+            status: 'error',
+            reporters: [
+                {
+                    type: 'a11y',
+                    result: axeResult,
+                    status: 'failed',
+                    version: 1
+                }
+            ]
+        };
+        const useChannelArgs = mockedApi.useChannel.mock.calls[0][0];
+        act(()=>useChannelArgs[STORY_FINISHED](storyFinishedPayload));
+        expect(getByTestId('discrepancy').textContent).toBe('cliPassedBrowserFailed');
+    });
+    it('should handle STORY_RENDER_PHASE_CHANGED event correctly', ()=>{
+        const emit = vi.fn();
+        mockedApi.useChannel.mockReturnValue(emit);
+        const Component = ()=>{
+            const { status } = useA11yContext();
+            return /*#__PURE__*/ createElement("div", {
+                "data-testid": "status"
+            }, status);
+        };
+        const { queryByTestId } = render(/*#__PURE__*/ createElement(A11yContextProvider, null, /*#__PURE__*/ createElement(Component, null)));
+        expect(queryByTestId('status')).toHaveTextContent('initial');
+        const useChannelArgs = mockedApi.useChannel.mock.calls[0][0];
+        act(()=>useChannelArgs[STORY_RENDER_PHASE_CHANGED]({
+                newPhase: 'loading'
+            }));
+        expect(queryByTestId('status')).toHaveTextContent('initial');
+        act(()=>useChannelArgs[STORY_RENDER_PHASE_CHANGED]({
+                newPhase: 'afterEach'
+            }));
+        expect(queryByTestId('status')).toHaveTextContent('running');
+    });
+    it('should handle STORY_RENDER_PHASE_CHANGED event correctly when in manual mode (set via globals)', ()=>{
+        mockedApi.useGlobals.mockReturnValue([
+            {
+                a11y: {
+                    manual: true
+                }
+            }
+        ]);
+        const emit = vi.fn();
+        mockedApi.useChannel.mockReturnValue(emit);
+        const Component = ()=>{
+            const { status } = useA11yContext();
+            return /*#__PURE__*/ createElement("div", {
+                "data-testid": "status"
+            }, status);
+        };
+        const { queryByTestId } = render(/*#__PURE__*/ createElement(A11yContextProvider, null, /*#__PURE__*/ createElement(Component, null)));
+        expect(queryByTestId('status')).toHaveTextContent('manual');
+        const useChannelArgs = mockedApi.useChannel.mock.calls[0][0];
+        act(()=>useChannelArgs[STORY_RENDER_PHASE_CHANGED]({
+                newPhase: 'loading'
+            }));
+        expect(queryByTestId('status')).toHaveTextContent('manual');
+        act(()=>useChannelArgs[STORY_RENDER_PHASE_CHANGED]({
+                newPhase: 'afterEach'
+            }));
+        expect(queryByTestId('status')).toHaveTextContent('manual');
+    });
+    it('should handle STORY_FINISHED event with error correctly', ()=>{
+        const emit = vi.fn();
+        mockedApi.useChannel.mockReturnValue(emit);
+        const Component = ()=>{
+            const { error } = useA11yContext();
+            return /*#__PURE__*/ createElement("div", {
+                "data-testid": "error"
+            }, error ? error.message : 'No Error');
+        };
+        const { getByTestId } = render(/*#__PURE__*/ createElement(A11yContextProvider, null, /*#__PURE__*/ createElement(Component, null)));
+        expect(getByTestId('error').textContent).toBe('No Error');
+        const useChannelArgs = mockedApi.useChannel.mock.calls[0][0];
+        const storyFinishedPayload = {
+            storyId,
+            status: 'error',
+            reporters: [
+                {
+                    status: 'failed',
+                    version: 1,
+                    type: 'a11y',
+                    result: {
+                        error: new Error('Test error')
+                    }
+                }
+            ]
+        };
+        act(()=>useChannelArgs[STORY_FINISHED](storyFinishedPayload));
+        expect(getByTestId('error').textContent).toBe('Test error');
+    });
+    it('should handle manual run correctly', ()=>{
+        const emit = vi.fn();
+        mockedApi.useChannel.mockReturnValue(emit);
+        const Component = ()=>{
+            const { handleManual } = useA11yContext();
+            return /*#__PURE__*/ createElement("button", {
+                onClick: handleManual,
+                "data-testid": "manualRunButton"
+            }, "Run Manual");
+        };
+        const { getByTestId } = render(/*#__PURE__*/ createElement(A11yContextProvider, null, /*#__PURE__*/ createElement(Component, null)));
+        act(()=>{
+            getByTestId('manualRunButton').click();
+        });
+        expect(emit).toHaveBeenCalledWith(EVENTS.MANUAL, storyId, expect.any(Object));
+    });
+});

package/dist/components/Report/Details.js

@@ -0,0 +1,169 @@
+import react, { Fragment, useCallback, useState } from "react";
+import { Button, Link, SyntaxHighlighter } from "storybook/internal/components";
+import { CheckIcon, CopyIcon, LocationIcon } from "@storybook/icons";
+import { Content, List, Root, Trigger } from "@radix-ui/react-tabs";
+import { styled } from "storybook/theming";
+import { getFriendlySummaryForAxeResult } from "../../axeRuleMappingHelper.js";
+import { useA11yContext } from "../A11yContext.js";
+const StyledSyntaxHighlighter = styled(SyntaxHighlighter)(({ theme })=>({
+        fontSize: theme.typography.size.s1
+    }), ({ language })=>'css' === language && {
+        '.selector ~ span:nth-last-of-type(-n+3)': {
+            display: 'none'
+        }
+    });
+const Info = styled.div({
+    display: 'flex',
+    flexDirection: 'column'
+});
+const RuleId = styled.div(({ theme })=>({
+        display: 'block',
+        color: theme.textMutedColor,
+        fontFamily: theme.typography.fonts.mono,
+        fontSize: theme.typography.size.s1,
+        marginTop: -8,
+        marginBottom: 12,
+        '@container (min-width: 800px)': {
+            display: 'none'
+        }
+    }));
+const Description = styled.p({
+    margin: 0
+});
+const Wrapper = styled.div({
+    display: 'flex',
+    flexDirection: 'column',
+    padding: '0 15px 20px 15px',
+    gap: 20
+});
+const Columns = styled.div({
+    gap: 15,
+    '@container (min-width: 800px)': {
+        display: 'grid',
+        gridTemplateColumns: '50% 50%'
+    }
+});
+const Details_Content = styled.div(({ theme, side })=>({
+        display: 'left' === side ? 'flex' : 'none',
+        flexDirection: 'column',
+        gap: 15,
+        margin: 'left' === side ? '15px 0' : 0,
+        padding: 'left' === side ? '0 15px' : 0,
+        borderLeft: 'left' === side ? `1px solid ${theme.color.border}` : 'none',
+        '&:focus-visible': {
+            outline: 'none',
+            borderRadius: 4,
+            boxShadow: `0 0 0 1px inset ${theme.color.secondary}`
+        },
+        '@container (min-width: 800px)': {
+            display: 'left' === side ? 'none' : 'flex'
+        }
+    }));
+const Item = styled(Button)(({ theme })=>({
+        fontFamily: theme.typography.fonts.mono,
+        fontWeight: theme.typography.weight.regular,
+        color: theme.textMutedColor,
+        height: 40,
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap',
+        display: 'block',
+        width: '100%',
+        textAlign: 'left',
+        padding: '0 12px',
+        '&[data-state="active"]': {
+            color: theme.color.secondary,
+            backgroundColor: theme.background.hoverable
+        }
+    }));
+const Messages = styled.div({
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 10
+});
+const Actions = styled.div({
+    display: 'flex',
+    gap: 10
+});
+const CopyButton = ({ onClick })=>{
+    const [copied, setCopied] = useState(false);
+    const handleClick = useCallback(()=>{
+        onClick();
+        setCopied(true);
+        const timeout = setTimeout(()=>setCopied(false), 2000);
+        return ()=>clearTimeout(timeout);
+    }, [
+        onClick
+    ]);
+    return /*#__PURE__*/ react.createElement(Button, {
+        ariaLabel: false,
+        onClick: handleClick
+    }, copied ? /*#__PURE__*/ react.createElement(CheckIcon, null) : /*#__PURE__*/ react.createElement(CopyIcon, null), " ", copied ? 'Copied' : 'Copy link');
+};
+const Details = ({ id, item, type, selection, handleSelectionChange })=>/*#__PURE__*/ react.createElement(Wrapper, {
+        id: id
+    }, /*#__PURE__*/ react.createElement(Info, null, /*#__PURE__*/ react.createElement(RuleId, null, item.id), /*#__PURE__*/ react.createElement(Description, null, getFriendlySummaryForAxeResult(item), ' ', /*#__PURE__*/ react.createElement(Link, {
+        href: item.helpUrl,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        withArrow: true
+    }, "Learn how to resolve this violation"))), /*#__PURE__*/ react.createElement(Root, {
+        defaultValue: selection,
+        orientation: "vertical",
+        value: selection,
+        onValueChange: handleSelectionChange,
+        asChild: true
+    }, /*#__PURE__*/ react.createElement(Columns, null, /*#__PURE__*/ react.createElement(List, {
+        "aria-label": type
+    }, item.nodes.map((node, index)=>{
+        const key = `${type}.${item.id}.${index + 1}`;
+        return /*#__PURE__*/ react.createElement(Fragment, {
+            key: key
+        }, /*#__PURE__*/ react.createElement(Trigger, {
+            value: key,
+            asChild: true
+        }, /*#__PURE__*/ react.createElement(Item, {
+            ariaLabel: false,
+            variant: "ghost",
+            size: "medium",
+            id: key
+        }, index + 1, ". ", node.html)), /*#__PURE__*/ react.createElement(Content, {
+            value: key,
+            asChild: true
+        }, /*#__PURE__*/ react.createElement(Details_Content, {
+            side: "left"
+        }, getContent(node))));
+    })), item.nodes.map((node, index)=>{
+        const key = `${type}.${item.id}.${index + 1}`;
+        return /*#__PURE__*/ react.createElement(Content, {
+            key: key,
+            value: key,
+            asChild: true
+        }, /*#__PURE__*/ react.createElement(Details_Content, {
+            side: "right"
+        }, getContent(node)));
+    }))));
+function getContent(node) {
+    const { handleCopyLink, handleJumpToElement } = useA11yContext();
+    const { any, all, none, html, target } = node;
+    const rules = [
+        ...any,
+        ...all,
+        ...none
+    ];
+    return /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(Messages, null, rules.map((rule)=>/*#__PURE__*/ react.createElement("div", {
+            key: rule.id
+        }, `${rule.message}${/(\.|: [^.]+\.*)$/.test(rule.message) ? '' : '.'}`))), /*#__PURE__*/ react.createElement(Actions, null, /*#__PURE__*/ react.createElement(Button, {
+        ariaLabel: false,
+        onClick: ()=>handleJumpToElement(node.target.toString())
+    }, /*#__PURE__*/ react.createElement(LocationIcon, null), " Jump to element"), /*#__PURE__*/ react.createElement(CopyButton, {
+        onClick: ()=>handleCopyLink(node.linkPath)
+    })), /*#__PURE__*/ react.createElement(StyledSyntaxHighlighter, {
+        language: "jsx",
+        wrapLongLines: true
+    }, `/* element */\n${html}`), /*#__PURE__*/ react.createElement(StyledSyntaxHighlighter, {
+        language: "css",
+        wrapLongLines: true
+    }, `/* selector */\n${target} {}`));
+}
+export { Details };

package/dist/components/Report/Report.js

@@ -0,0 +1,106 @@
+import react from "react";
+import { Badge, Button, EmptyTabContent } from "storybook/internal/components";
+import { ChevronSmallDownIcon } from "@storybook/icons";
+import { styled } from "storybook/theming";
+import { getTitleForAxeResult } from "../../axeRuleMappingHelper.js";
+import { RuleType } from "../../types.js";
+import { Details } from "./Details.js";
+const impactStatus = {
+    minor: 'neutral',
+    moderate: 'warning',
+    serious: 'negative',
+    critical: 'critical'
+};
+const impactLabels = {
+    minor: 'Minor',
+    moderate: 'Moderate',
+    serious: 'Serious',
+    critical: 'Critical'
+};
+const Wrapper = styled.div(({ theme })=>({
+        display: 'flex',
+        flexDirection: 'column',
+        width: '100%',
+        borderBottom: `1px solid ${theme.appBorderColor}`,
+        containerType: 'inline-size',
+        fontSize: theme.typography.size.s2
+    }));
+const Icon = styled(ChevronSmallDownIcon)({
+    transition: 'transform 0.1s ease-in-out'
+});
+const HeaderBar = styled.div(({ theme })=>({
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        gap: 6,
+        padding: '6px 10px 6px 15px',
+        minHeight: 40,
+        background: 'none',
+        color: 'inherit',
+        textAlign: 'left',
+        cursor: 'pointer',
+        width: '100%',
+        '&:hover': {
+            color: theme.color.secondary
+        }
+    }));
+const Title = styled.div(({ theme })=>({
+        display: 'flex',
+        alignItems: 'baseline',
+        flexGrow: 1,
+        fontSize: theme.typography.size.s2,
+        gap: 8
+    }));
+const RuleId = styled.div(({ theme })=>({
+        display: 'none',
+        color: theme.textMutedColor,
+        fontFamily: theme.typography.fonts.mono,
+        fontSize: theme.typography.size.s1,
+        '@container (min-width: 800px)': {
+            display: 'block'
+        }
+    }));
+const Count = styled.div(({ theme })=>({
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        color: theme.textMutedColor,
+        width: 28,
+        height: 28
+    }));
+const Report = ({ items, empty, type, handleSelectionChange, selectedItems, toggleOpen })=>/*#__PURE__*/ react.createElement(react.Fragment, null, items && items.length ? items.map((item)=>{
+        const id = `${type}.${item.id}`;
+        const detailsId = `details:${id}`;
+        const selection = selectedItems.get(id);
+        const title = getTitleForAxeResult(item);
+        return /*#__PURE__*/ react.createElement(Wrapper, {
+            key: id
+        }, /*#__PURE__*/ react.createElement(HeaderBar, {
+            onClick: (event)=>toggleOpen(event, type, item),
+            "data-active": !!selection
+        }, /*#__PURE__*/ react.createElement(Title, null, /*#__PURE__*/ react.createElement("strong", null, title), /*#__PURE__*/ react.createElement(RuleId, null, item.id)), item.impact && /*#__PURE__*/ react.createElement(Badge, {
+            status: type === RuleType.PASS ? 'neutral' : impactStatus[item.impact]
+        }, impactLabels[item.impact]), /*#__PURE__*/ react.createElement(Count, null, item.nodes.length), /*#__PURE__*/ react.createElement(Button, {
+            onClick: (event)=>toggleOpen(event, type, item),
+            ariaLabel: `${selection ? 'Collapse' : 'Expand'} details for: ${title}`,
+            "aria-expanded": !!selection,
+            "aria-controls": detailsId,
+            variant: "ghost",
+            padding: "small"
+        }, /*#__PURE__*/ react.createElement(Icon, {
+            style: {
+                transform: `rotate(${selection ? -180 : 0}deg)`
+            }
+        }))), selection ? /*#__PURE__*/ react.createElement(Details, {
+            id: detailsId,
+            item: item,
+            type: type,
+            selection: selection,
+            handleSelectionChange: handleSelectionChange
+        }) : /*#__PURE__*/ react.createElement("div", {
+            id: detailsId
+        }));
+    }) : /*#__PURE__*/ react.createElement(EmptyTabContent, {
+        title: empty
+    }));
+export { Report };

package/dist/components/Report/Report.stories.js

@@ -0,0 +1,86 @@
+import react from "react";
+import { ManagerContext } from "storybook/manager-api";
+import { fn } from "storybook/test";
+import { styled } from "storybook/theming";
+import preview from "../../../../../.storybook/preview";
+import { results } from "../../results.mock.js";
+import { RuleType } from "../../types.js";
+import { Report } from "./Report.js";
+const StyledWrapper = styled.div(({ theme })=>({
+        backgroundColor: theme.background.content,
+        fontSize: theme.typography.size.s2 - 1,
+        color: theme.color.defaultText,
+        display: 'block',
+        height: '100%',
+        position: 'absolute',
+        left: 0,
+        right: 0,
+        bottom: 0,
+        overflow: 'auto'
+    }));
+const managerContext = {
+    state: {},
+    api: {
+        getDocsUrl: fn().mockName('api::getDocsUrl')
+    }
+};
+const meta = preview.meta({
+    title: 'Report',
+    component: Report,
+    decorators: [
+        (Story)=>/*#__PURE__*/ react.createElement(ManagerContext.Provider, {
+                value: managerContext
+            }, /*#__PURE__*/ react.createElement(StyledWrapper, {
+                id: "panel-tab-content"
+            }, /*#__PURE__*/ react.createElement(Story, null)))
+    ],
+    parameters: {
+        layout: 'fullscreen'
+    },
+    args: {
+        items: [],
+        empty: 'No issues found',
+        type: RuleType.VIOLATION,
+        handleSelectionChange: fn().mockName('handleSelectionChange'),
+        selectedItems: new Map(),
+        toggleOpen: fn().mockName('toggleOpen')
+    }
+});
+const Empty = meta.story({});
+const Violations = meta.story({
+    args: {
+        items: results.violations,
+        type: RuleType.VIOLATION,
+        selectedItems: new Map([
+            [
+                `${RuleType.VIOLATION}.${results.violations["0"].id}`,
+                `${RuleType.VIOLATION}.${results.violations["0"].id}.3`
+            ]
+        ])
+    }
+});
+const Incomplete = meta.story({
+    args: {
+        items: results.incomplete,
+        type: RuleType.INCOMPLETION,
+        selectedItems: new Map([
+            [
+                `${RuleType.INCOMPLETION}.${results.incomplete["1"].id}`,
+                `${RuleType.INCOMPLETION}.${results.incomplete["1"].id}.2`
+            ]
+        ])
+    }
+});
+const Passes = meta.story({
+    args: {
+        items: results.passes,
+        type: RuleType.PASS,
+        selectedItems: new Map([
+            [
+                `${RuleType.PASS}.${results.passes["2"].id}`,
+                `${RuleType.PASS}.${results.passes["2"].id}.1`
+            ]
+        ])
+    }
+});
+export { Empty, Incomplete, Passes, Violations };