react-sass-inlinesvg/module/atoms/svg/Svg.stories.js

React library designed to control SVG from Sass.

import React from "react";
import { renderStoryCatalog } from "../..";
import { SVG, pathMap } from "./Svg";
import classNames from "./svg.stories.module.scss";
import nameDefaultClassNames from "./name-default.module.scss";
import nameSvgClassNames from "./name.module.scss";
export default { component: SVG, title: "atoms/SVG" };
export const _1_ShowHoverColor = {
    args: { className: classNames.showHoverColor },
};
export const _2_ShowHoverShow = {
    args: { className: classNames.showHoverShow },
};
export const _3_ShowHoverHidden = {
    args: { className: classNames.showHoverHidden },
};
export const _4_ShowClickNone = {
    args: { className: classNames.showClickNone },
};
export const _5_ShowClickNull = {
    args: { className: classNames.showClickNull },
};
export const _6_NoneClickShow = {
    args: { className: classNames.noneClickShow },
};
export const _7_HiddenHoverShow = {
    args: { className: classNames.hiddenHoverShow },
};
export const Catalog = () => renderStoryCatalog(SVG, pathMap, classNames.svgCatalog, true);
export const StylingPattern = () => (React.createElement(React.Fragment, null,
    React.createElement("section", null,
        React.createElement("h1", null, "Plane & Fill"),
        React.createElement(SVG, { defaultName: "Svg", className: nameDefaultClassNames.plane }),
        "\u00A0",
        React.createElement(SVG, { className: nameSvgClassNames.plane }),
        "\u00A0",
        React.createElement(SVG, { defaultName: "React", className: nameDefaultClassNames.planeFill }),
        "\u00A0",
        React.createElement(SVG, { className: nameSvgClassNames.planeFill })),
    React.createElement("section", null,
        React.createElement("h1", null, "+ Background"),
        React.createElement(SVG, { defaultName: "Svg", className: nameDefaultClassNames.circle }),
        "\u00A0",
        React.createElement(SVG, { className: nameSvgClassNames.circle }),
        "\u00A0",
        React.createElement(SVG, { defaultName: "React", className: nameDefaultClassNames.circleFill }),
        "\u00A0",
        React.createElement(SVG, { className: nameSvgClassNames.circleFill }),
        React.createElement("br", null),
        React.createElement(SVG, { defaultName: "Svg", className: nameDefaultClassNames.square }),
        "\u00A0",
        React.createElement(SVG, { className: nameSvgClassNames.square }),
        "\u00A0",
        React.createElement(SVG, { defaultName: "React", className: nameDefaultClassNames.squareFill }),
        "\u00A0",
        React.createElement(SVG, { className: nameSvgClassNames.squareFill })),
    React.createElement("section", null,
        React.createElement("h1", null, "+ Border"),
        React.createElement(SVG, { defaultName: "Svg", className: nameDefaultClassNames.circleBorder }),
        "\u00A0",
        React.createElement(SVG, { className: nameSvgClassNames.circleBorder }),
        "\u00A0",
        React.createElement(SVG, { defaultName: "React", className: nameDefaultClassNames.circleFillBorder }),
        "\u00A0",
        React.createElement(SVG, { className: nameSvgClassNames.circleFillBorder }),
        React.createElement("br", null),
        React.createElement(SVG, { defaultName: "Svg", className: nameDefaultClassNames.squareBorder }),
        "\u00A0",
        React.createElement(SVG, { className: nameSvgClassNames.squareBorder }),
        "\u00A0",
        React.createElement(SVG, { defaultName: "React", className: nameDefaultClassNames.squareFillBorder }),
        "\u00A0",
        React.createElement(SVG, { className: nameSvgClassNames.squareFillBorder }))));