@techsio/storybook-better-a11y 0.0.6 → 0.0.8

package/dist/components/A11yContext.test.js

@@ -1,277 +0,0 @@
-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

@@ -1,169 +0,0 @@
-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

@@ -1,106 +0,0 @@
-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

@@ -1,86 +0,0 @@
-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 };