docs: allow highlighting screenshots with the <Screenshot /> component

Author: hassankhan

docs/src/components/Screenshot/index.tsx

@@ -1,18 +1,36 @@
-import React from 'react';
+import React, { CSSProperties } from 'react';
 import * as styles from './styles.module.scss';
 
 interface ScreenshotProps {
   alt?: string;
   src: string;
+
+  /**
+   * Use CSS `clip-path` to highlight a specific area of the screenshot.
+   *
+   * @example inset(20% 64% 72% 20% round 10px)
+   */
+  highlight?: CSSProperties['clipPath'];
 }
 
-export const Screenshot = ({ alt, src }: ScreenshotProps) => {
+const ScreenshotHighlight = ({ highlight, src }: ScreenshotProps) => (
+  <div
+    className={styles.highlight}
+    style={{
+      backgroundImage: `url(${src})`,
+      clipPath: highlight,
+    }}
+  />
+)
+
+export const Screenshot = (props: ScreenshotProps) => {
   return (
     <div className={styles.screenshot} style={{ textAlign: 'center'}}>
+      {props.highlight ? (<ScreenshotHighlight {...props} />) : null}
       <img
-        alt={alt}
-        src={src}
-        style={{ border: 'none' }}
+        alt={props.alt}
+        src={props.src}
+        style={{ border: 'none', filter: props.highlight ? 'brightness(0.5)' : 'none' }}
         width="100%"
       />
     </div>

docs/src/components/Screenshot/styles.module.scss

@@ -33,3 +33,11 @@
     //transform: scale(.25);
   }
 }
+
+.highlight {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  background-size: contain;
+  z-index: 9999;
+}