Pog, Toast, Tooltip, Upsell, Video: add visual diff testing and screenshot to description in VSCode (Flow extension)

cypress/integration/visual-test/Pog-dark_spec.js

@@ -0,0 +1,15 @@
+describe('Pog visual dark mode regression check', () => {
+  beforeEach(() => {
+    cy.visit('/visual-test/Pog-dark');
+  });
+
+  it('Compares snapshots', () => {
+    cy.get('[data-test-id="visual-test"]').toMatchImageSnapshot({
+      name: 'Pog-dark',
+      imageConfig: {
+        threshold: 0.001,
+        thresholdType: 'percent',
+      },
+    });
+  });
+});

cypress/integration/visual-test/Pog_spec.js

@@ -0,0 +1,15 @@
+describe('Pog visual regression check', () => {
+  beforeEach(() => {
+    cy.visit('/visual-test/Pog');
+  });
+
+  it('Compares snapshots', () => {
+    cy.get('[data-test-id="visual-test"]').toMatchImageSnapshot({
+      name: 'Pog',
+      imageConfig: {
+        threshold: 0.001,
+        thresholdType: 'percent',
+      },
+    });
+  });
+});

cypress/integration/visual-test/Toast-dark_spec.js

@@ -0,0 +1,15 @@
+describe('Toast visual dark mode regression check', () => {
+  beforeEach(() => {
+    cy.visit('/visual-test/Toast-dark');
+  });
+
+  it('Compares snapshots', () => {
+    cy.get('[data-test-id="visual-test"]').toMatchImageSnapshot({
+      name: 'Toast-dark',
+      imageConfig: {
+        threshold: 0.001,
+        thresholdType: 'percent',
+      },
+    });
+  });
+});

cypress/integration/visual-test/Toast_spec.js

@@ -0,0 +1,15 @@
+describe('Toast visual regression check', () => {
+  beforeEach(() => {
+    cy.visit('/visual-test/Toast');
+  });
+
+  it('Compares snapshots', () => {
+    cy.get('[data-test-id="visual-test"]').toMatchImageSnapshot({
+      name: 'Toast',
+      imageConfig: {
+        threshold: 0.001,
+        thresholdType: 'percent',
+      },
+    });
+  });
+});

cypress/integration/visual-test/Tooltip-dark_spec.js

@@ -0,0 +1,17 @@
+describe('Tooltip visual dark mode regression check', () => {
+  beforeEach(() => {
+    cy.visit('/visual-test/Tooltip-dark');
+  });
+
+  it('Compares snapshots', () => {
+    cy.get('[data-test-id="visual-test"]').find('button').first().focus();
+
+    cy.get('[data-test-id="visual-test"]').toMatchImageSnapshot({
+      name: 'Tooltip-dark',
+      imageConfig: {
+        threshold: 0.001,
+        thresholdType: 'percent',
+      },
+    });
+  });
+});

cypress/integration/visual-test/Tooltip_spec.js

@@ -0,0 +1,17 @@
+describe('Tooltip visual regression check', () => {
+  beforeEach(() => {
+    cy.visit('/visual-test/Tooltip');
+  });
+
+  it('Compares snapshots', () => {
+    cy.get('[data-test-id="visual-test"]').find('button').first().focus();
+
+    cy.get('[data-test-id="visual-test"]').toMatchImageSnapshot({
+      name: 'Tooltip',
+      imageConfig: {
+        threshold: 0.001,
+        thresholdType: 'percent',
+      },
+    });
+  });
+});

cypress/integration/visual-test/Upsell-dark_spec.js

@@ -0,0 +1,15 @@
+describe('Upsell dark mode visual regression check', () => {
+  beforeEach(() => {
+    cy.visit('/visual-test/Upsell-dark');
+  });
+
+  it('Compares snapshots', () => {
+    cy.get('[data-test-id="visual-test"]').toMatchImageSnapshot({
+      name: 'Upsell-dark',
+      imageConfig: {
+        threshold: 0.001,
+        thresholdType: 'percent',
+      },
+    });
+  });
+});

cypress/integration/visual-test/Upsell_spec.js

@@ -0,0 +1,15 @@
+describe('Upsell visual regression check', () => {
+  beforeEach(() => {
+    cy.visit('/visual-test/Upsell');
+  });
+
+  it('Compares snapshots', () => {
+    cy.get('[data-test-id="visual-test"]').toMatchImageSnapshot({
+      name: 'Upsell',
+      imageConfig: {
+        threshold: 0.001,
+        thresholdType: 'percent',
+      },
+    });
+  });
+});

cypress/integration/visual-test/Video_spec.js

@@ -0,0 +1,15 @@
+describe('Video visual regression check', () => {
+  beforeEach(() => {
+    cy.visit('/visual-test/Video');
+  });
+
+  it('Compares snapshots', () => {
+    cy.get('[data-test-id="visual-test"]').toMatchImageSnapshot({
+      name: 'Video',
+      imageConfig: {
+        threshold: 0.001,
+        thresholdType: 'percent',
+      },
+    });
+  });
+});

docs/pages/visual-test/Pog-dark.js

@@ -0,0 +1,36 @@
+// @flow strict
+import { type Node } from 'react';
+import { Text, Flex, Pog, Box, ColorSchemeProvider } from 'gestalt';
+
+export default function Screenshot(): Node {
+  return (
+    <ColorSchemeProvider colorScheme="dark">
+      <Box color="white" display="inlineBlock" padding={1}>
+        <Flex direction="column" gap={4}>
+          <Flex gap={4}>
+            <Flex direction="column" gap={1}>
+              <Text>Default</Text>
+              <Pog icon="heart" iconColor="red" />
+            </Flex>
+            <Flex direction="column" gap={1}>
+              <Text>Hovered</Text>
+              <Pog icon="heart" iconColor="red" hovered />
+            </Flex>
+            <Flex direction="column" gap={1}>
+              <Text>Focused</Text>
+              <Pog icon="heart" iconColor="red" focused />
+            </Flex>
+            <Flex direction="column" gap={1}>
+              <Text>Active</Text>
+              <Pog icon="heart" iconColor="red" active />
+            </Flex>
+            <Flex direction="column" gap={1}>
+              <Text>Selected</Text>
+              <Pog icon="heart" iconColor="red" selected />
+            </Flex>
+          </Flex>
+        </Flex>
+      </Box>
+    </ColorSchemeProvider>
+  );
+}

docs/pages/visual-test/Pog.js

@@ -0,0 +1,34 @@
+// @flow strict
+import { type Node } from 'react';
+import { Pog, Text, Flex, Box } from 'gestalt';
+
+export default function Screenshot(): Node {
+  return (
+    <Box color="white" display="inlineBlock" padding={1}>
+      <Flex direction="column" gap={4}>
+        <Flex gap={4}>
+          <Flex direction="column" gap={1}>
+            <Text>Default</Text>
+            <Pog icon="heart" iconColor="red" />
+          </Flex>
+          <Flex direction="column" gap={1}>
+            <Text>Hovered</Text>
+            <Pog icon="heart" iconColor="red" hovered />
+          </Flex>
+          <Flex direction="column" gap={1}>
+            <Text>Focused</Text>
+            <Pog icon="heart" iconColor="red" focused />
+          </Flex>
+          <Flex direction="column" gap={1}>
+            <Text>Active</Text>
+            <Pog icon="heart" iconColor="red" active />
+          </Flex>
+          <Flex direction="column" gap={1}>
+            <Text>Selected</Text>
+            <Pog icon="heart" iconColor="red" selected />
+          </Flex>
+        </Flex>
+      </Flex>
+    </Box>
+  );
+}

docs/pages/visual-test/Tag.js

@@ -1,25 +1,23 @@
 // @flow strict
 import { type Node } from 'react';
-import { ColorSchemeProvider, Flex, Tag } from 'gestalt';
+import { Flex, Tag } from 'gestalt';
 
 export default function Snapshot(): Node {
   return (
-    <ColorSchemeProvider colorScheme="light">
-      <Flex direction="column" gap={2}>
-        <Tag onRemove={() => {}} removeIconAccessibilityLabel="Remove" text="New" />
-        <Tag disabled text="Disabled" />
-        <Tag
-          onRemove={() => {}}
-          errorMessage="NOPE"
-          removeIconAccessibilityLabel="Remove"
-          text="Error"
-        />
-        <Tag
-          onRemove={() => {}}
-          removeIconAccessibilityLabel="Remove"
-          text="Some really long text that just keeps going on and on and on and on and on and on"
-        />
-      </Flex>
-    </ColorSchemeProvider>
+    <Flex direction="column" gap={2}>
+      <Tag onRemove={() => {}} removeIconAccessibilityLabel="Remove" text="New" />
+      <Tag disabled text="Disabled" />
+      <Tag
+        onRemove={() => {}}
+        errorMessage="NOPE"
+        removeIconAccessibilityLabel="Remove"
+        text="Error"
+      />
+      <Tag
+        onRemove={() => {}}
+        removeIconAccessibilityLabel="Remove"
+        text="Some really long text that just keeps going on and on and on and on and on and on"
+      />
+    </Flex>
   );
 }

docs/pages/visual-test/Toast-dark.js

@@ -0,0 +1,24 @@
+// @flow strict
+import { type Node } from 'react';
+import { ColorSchemeProvider, Toast, Button, Image, Box } from 'gestalt';
+
+export default function Snapshot(): Node {
+  return (
+    <ColorSchemeProvider colorScheme="dark">
+      <Box color="white">
+        <Toast
+          button={<Button key="button-key" text="Undo" size="lg" />}
+          text="Home decor"
+          thumbnail={
+            <Image
+              alt="Modern ceramic vase pin."
+              naturalHeight={564}
+              naturalWidth={564}
+              src="https://i.ibb.co/Lx54BCT/stock1.jpg"
+            />
+          }
+        />
+      </Box>
+    </ColorSchemeProvider>
+  );
+}

docs/pages/visual-test/Toast.js

@@ -0,0 +1,20 @@
+// @flow strict
+import { type Node } from 'react';
+import { Toast, Button, Image } from 'gestalt';
+
+export default function Snapshot(): Node {
+  return (
+    <Toast
+      button={<Button key="button-key" text="Undo" size="lg" />}
+      text="Home decor"
+      thumbnail={
+        <Image
+          alt="Modern ceramic vase pin."
+          naturalHeight={564}
+          naturalWidth={564}
+          src="https://i.ibb.co/Lx54BCT/stock1.jpg"
+        />
+      }
+    />
+  );
+}

docs/pages/visual-test/Tooltip-dark.js

@@ -0,0 +1,21 @@
+// @flow strict
+import { type Node } from 'react';
+import { ColorSchemeProvider, Tooltip, IconButton, Box } from 'gestalt';
+
+export default function Snapshot(): Node {
+  return (
+    <ColorSchemeProvider colorScheme="dark">
+      <Box color="white" padding={4} width={150}>
+        <Tooltip idealDirection="right" inline text="Share" accessibilityLabel="">
+          <IconButton
+            accessibilityLabel="Share this Pin"
+            bgColor="white"
+            icon="share"
+            iconColor="darkGray"
+            size="lg"
+          />
+        </Tooltip>
+      </Box>
+    </ColorSchemeProvider>
+  );
+}

docs/pages/visual-test/Tooltip.js

@@ -0,0 +1,19 @@
+// @flow strict
+import { type Node } from 'react';
+import { Tooltip, IconButton, Box } from 'gestalt';
+
+export default function Snapshot(): Node {
+  return (
+    <Box color="white" padding={4} width={150}>
+      <Tooltip idealDirection="right" inline text="Share" accessibilityLabel="">
+        <IconButton
+          accessibilityLabel="Share this Pin"
+          bgColor="white"
+          icon="share"
+          iconColor="darkGray"
+          size="lg"
+        />
+      </Tooltip>
+    </Box>
+  );
+}

docs/pages/visual-test/Upsell-dark.js

@@ -0,0 +1,29 @@
+// @flow strict
+import { type Node } from 'react';
+import { Upsell, Box, ColorSchemeProvider, Icon } from 'gestalt';
+
+export default function Snapshot(): Node {
+  return (
+    <ColorSchemeProvider colorScheme="dark">
+      <Box color="white" padding={5}>
+        <Upsell
+          dismissButton={{
+            accessibilityLabel: 'Dismiss banner',
+            onDismiss: () => {},
+          }}
+          imageData={{
+            component: <Icon icon="pinterest" accessibilityLabel="" color="darkGray" size={32} />,
+          }}
+          message="Earn $60 of ads credit, and give $30 of ads credit to a friend"
+          primaryAction={{
+            href: 'https://pinterest.com',
+            label: 'Send invite',
+            accessibilityLabel: 'Invite friend to use ads',
+            target: 'blank',
+          }}
+          title="Give $30, get $60 in ads credit"
+        />
+      </Box>
+    </ColorSchemeProvider>
+  );
+}