SVGFlip.stories.tsx

Filename	Percent	Threshold	Total	Covered	Uncovered
storybook/stories/SVGFlip/SVGFlip.stories.tsx	100.00%	95%	86	86	0

import { select } from "d3"
import React from "react"

import { StoryInfo, TemplateType } from "../common"

import { ROOT_ID } from "./constants"
import * as styles from "./svgFlip.module.css"

type Props = { color: string; infinite: boolean }

const main = ({ color, infinite }: Props) => {
  const svg = select(`#${ROOT_ID}`)
    .text("")
    .append("svg")
    .style("border", "1px solid black")

  const container = svg.append("g").attr("transform", "translate(40, 40)")

  const circle = container
    .append("circle")
    .attr("fill", color)
    .attr("r", "25")
    .attr("stroke", "black")
    .attr("stroke-width", "2px")

  svg
    .on("mouseenter", () => {
      circle
        .attr("fill", "orange")
        .style(
          "animation",
          [styles.flipLeft, "1s", infinite && "infinite", "forwards"]
            .filter((v) => !!v)
            .join(" ")
        )
    })
    .on("mouseleave", () => {
      circle.attr("fill", color).style("animation", null)
    })
}

const SVGFlip = (props: Props) => {
  React.useEffect(() => {
    main(props)
  })

  return (
    <div>
      <p>Hover the rectangle to flip the circle</p>
      <StoryInfo
        source="https://codepen.io/demianpt/pen/qbLaQZ"
        storyName="SVGFlip"
      />
      <div id={ROOT_ID} />
    </div>
  )
}

const Template = ((props: Props) => (
  <SVGFlip {...props} />
)) as TemplateType<Props>

const Common = Template.bind({})

Common.args = {
  color: "green",
  infinite: false,
}

export default {
  argTypes: {
    color: { control: "color" },
  },
  component: SVGFlip,
  title: "SVG/Flip",
}

export { Common }

[]

TypeScript Coverage Report generated by type-coverage and typescript-coverage-report at Wed, 01 Jun 2022 21:16:57 GMT

TypeScript coverage report