Shot

TSX

import { Shot } from "@arcadia/ui";

<Shot src={screenshot} alt="The sign-up page, Create account clicked" width={1280} height={800} marks={[{ kind: "ring", x: 640, y: 612 }]} />

A picture of a page, as an agent saw it, with what it did drawn on top: a ring on a point it clicked, a box around what it read or filled, an arrow from one point to another. Give width and height in the units the marks use, as a rule the page's CSS pixels, whatever the picture's own resolution: the marks land where they belong at any size the picture is shown.

A frame, the default, shows the whole picture at its container's width and no taller than --shot-max-h, so a tall page comes out narrower, never cropped. The marks keep their size as the picture scales: a ring is 18px across and every line 2px, in --mark over a --mark-halo, so they read on a dark page and a light one.

Examples

Thumb

size="thumb" is 32 by 20, to sit in a line of text: the picture zoomed in by zoom (2 by default) onto focus, which takes a dot.

Typed into Email

Left Password empty

Clicked Create account

import { Shot } from "@arcadia/ui";

function Steps() {
  const steps = [
    { label: "Typed into Email", at: { x: 320, y: 168 } },
    { label: "Left Password empty", at: { x: 320, y: 240 } },
    { label: "Clicked Create account", at: { x: 320, y: 306 } },
  ];
  return (
    <div {...stylex.props(s.steps)}>
      {steps.map((step) => (
        <span key={step.label} {...stylex.props(s.step)}>
          <Shot src={SIGNUP} alt="" width={640} height={400} size="thumb" focus={step.at} />
          {step.label}
        </span>
      ))}
    </div>
  );
}

Without a focus it looks at the middle and draws no dot. Marks keep their full size on a thumb, where a ring would cover most of it, so give a thumb a focus rather than marks.

Opens larger

With onOpen the picture is a button that opens it larger. Here a thumb opens its page in a Dialog, as a frame with its mark.

rootStyle takes where the picture sits and how tall a frame may grow. A frame sets its own width from its height and shape, so give it a box of the width you want rather than a width.

--shot-max-h: Ref<Measure> | `calc(${Ref<Space>} * ${number})`Default var(--media-max-height); A frame's greatest height.

The picture is an img with your alt. Say what the page shows and what happened on it, or pass an empty alt when the words beside it already say so, as in a list of steps. The marks and the focus dot are hidden from assistive technology, so what they point at belongs in the alt or in the text nearby.

With onOpen the picture is a button named by its alt, so a picture that opens needs an alt that is not empty. It takes the focus ring like any control, and the pointer shows it zooms in.

EnterSpace: Opens a picture that has onOpen

srcrequired: string
altrequired: string
widthrequired: number; The span it shows, in its marks' units.
heightrequired: number
marks: readonly ShotMark[]Default []
size: "frame" | "thumb"Default "frame"; thumb: 32 by 20, zoomed onto focus.
focus: { x: number; y: number }; A thumb's dotted centre.
zoom: numberDefault 2
onOpen: () => void; Makes it a button.
label: string
rootStyle: RootStyle<ShotKnobs>

Usage

Examples

Thumb

Opens larger

Customising

Accessibility

API reference

Shot