Remove percy. Adjust old percy stuff for chromatic (#114)

.storybook/preview.js

@@ -27,7 +27,7 @@ class FlameStyling extends React.Component {
         />
         <FlameTheme themeName={this.state.selectedTheme}>
           <Box p={3}>
-            <Box mb={2} width="200px" className="hide-in-percy">
+            <Box mb={2} width="200px" className="hide-in-percy chromatic-ignore">
               <Select
                 value={this.state.selectedTheme}
                 onChange={e => {

packages/flame/package.json

@@ -28,8 +28,7 @@
     "build:private-to-public": "node ./scripts/private-to-public.js",
     "build": "yarn build:icons && yarn build:flags && yarn build:themes && yarn build:cjs && yarn build:esm && yarn build:copy-files && yarn build:types && yarn build:types:esm && yarn build:private-to-public && node ../../scripts/validate-build",
     "release": "yarn build && yarn build:docgen && npm publish dist --quiet",
-    "release:dryrun": "npm publish dist --dry-run",
-    "percy": "build-storybook -c .storybook && percy-storybook --widths=1280"
+    "release:dryrun": "npm publish dist --dry-run"
   },
   "peerDependencies": {
     "@emotion/core": "^10.0.0",

packages/flame/src/Alert/story.tsx

@@ -25,7 +25,7 @@ const Alerts = () => (
           title={`${type[0].toUpperCase().concat(type.slice(1))}`}
           mb={2}
         >
-          Description of an alert.
+          Description of alert.
         </Alert>
       );
     })}
@@ -40,7 +40,7 @@ const Alerts = () => (
           mb={2}
           noCloseBtn
         >
-          Description of an alert with no close button.
+          Description of alert with no close button.
         </Alert>
       );
     })}

packages/flame/src/Autocomplete/story.tsx

@@ -117,7 +117,7 @@ stories.add(
       />
     </div>
   ),
-  { percy: { skip: true } },
+  { chromatic: { disable: true } },
 );
 
 stories.add('States', () => (
@@ -210,5 +210,5 @@ stories.add(
       />
     </div>
   ),
-  { percy: { skip: true } },
+  { chromatic: { disable: true } },
 );

packages/flame/src/Bone/story.tsx

@@ -128,5 +128,5 @@ stories.add(
       </div>
     </div>
   ),
-  { percy: { skip: true } },
+  { chromatic: { disable: true } },
 );

packages/flame/src/Checkbox/story.tsx

@@ -174,5 +174,5 @@ stories.add(
       </TextContent>
     </div>
   ),
-  { percy: { skip: true } },
+  { chromatic: { disable: true } },
 );

packages/flame/src/Core/story.tsx

@@ -86,7 +86,7 @@ const Colours = withTheme(({ theme }) => {
   );
 });
 export const colors = () => <Colours />;
-colors.story = { percy: { skip: true } };
+colors.story = { chromatic: { disable: true } };
 
 const TypographyExample: React.FC<{ output: React.ReactNode; example: React.ReactNode }> = ({
   output,
@@ -200,7 +200,7 @@ const Typography = withTheme(({ theme }) => {
   );
 });
 export const typography = () => <Typography />;
-typography.story = { percy: { skip: true } };
+typography.story = { chromatic: { disable: true } };
 
 const BoxExample: React.FC<{ box: React.ReactNode; sample: React.ReactNode }> = ({
   box,
@@ -287,7 +287,7 @@ const Spacing = withTheme(({ theme }) => {
   );
 });
 export const spacing = () => <Spacing />;
-spacing.story = { percy: { skip: true } };
+spacing.story = { chromatic: { disable: true } };
 
 const Shadows = withTheme(({ theme }) => {
   const { shadows, innerShadows, innerShadowsN, borderShadows } = theme;
@@ -412,7 +412,7 @@ const Shadows = withTheme(({ theme }) => {
 });
 
 export const shadows = () => <Shadows />;
-shadows.story = { percy: { skip: true } };
+shadows.story = { chromatic: { disable: true } };
 
 const BorderRadii = withTheme(({ theme }) => {
   const { radii } = theme;
@@ -450,7 +450,7 @@ const BorderRadii = withTheme(({ theme }) => {
   );
 });
 export const radii = () => <BorderRadii />;
-radii.story = { percy: { skip: true } };
+radii.story = { chromatic: { disable: true } };
 
 const Transitions = withTheme(({ theme }) => {
   const { transition } = theme;
@@ -495,4 +495,4 @@ const Transitions = withTheme(({ theme }) => {
   );
 });
 export const transitions = () => <Transitions />;
-transitions.story = { percy: { skip: true } };
+transitions.story = { chromatic: { disable: true } };

packages/flame/src/Dialog/story.tsx

@@ -127,7 +127,7 @@ class DialogStoryHelper extends React.Component<{}, State> {
   }
 }
 
-stories.add('Story', () => <DialogStoryHelper />, { percy: { skip: true } });
+stories.add('Story', () => <DialogStoryHelper />, { chromatic: { disable: true } });
 
 stories.add('Percy story', () => (
   <Dialog

packages/flame/src/Divider/story.tsx

@@ -114,7 +114,7 @@ stories.add(
       </Divider>
     </div>
   ),
-  { percy: { skip: true } },
+  { chromatic: { disable: true } },
 );
 
 stories.add(
@@ -153,7 +153,7 @@ stories.add(
       </Box>
     </div>
   ),
-  { percy: { skip: true } },
+  { chromatic: { disable: true } },
 );
 
 stories.add(
@@ -166,5 +166,5 @@ stories.add(
       <Divider color="#F42069" />
     </div>
   ),
-  { percy: { skip: true } },
+  { chromatic: { disable: true } },
 );

packages/flame/src/Dropdown/story.tsx

@@ -168,7 +168,7 @@ stories.add(
       </div>
     );
   },
-  { percy: { skip: true } },
+  { chromatic: { disable: true } },
 );
 
 stories.add('Story for Percy', () => {

packages/flame/src/Icon/examples/story.tsx

@@ -367,7 +367,7 @@ stories.add(
       </div>
     </div>
   ),
-  { percy: { skip: true } },
+  { chromatic: { disable: true } },
 );
 
 stories.add('Sprite', () => (

packages/flame/src/Input/story.tsx

@@ -179,5 +179,5 @@ stories.add(
       </Box>
     </div>
   ),
-  { percy: { skip: true } },
+  { chromatic: { disable: true } },
 );

packages/flame/src/Modal/story.tsx

@@ -271,8 +271,8 @@ class ModalStoryHelper extends React.Component<Props, State> {
   }
 }
 
-stories.add('Header', () => <ModalStoryHelper header />, { percy: { skip: true } });
+stories.add('Header', () => <ModalStoryHelper header />, { chromatic: { disable: true } });
 
-stories.add('Footer', () => <ModalStoryHelper footer />, { percy: { skip: true } });
+stories.add('Footer', () => <ModalStoryHelper footer />, { chromatic: { disable: true } });
 
-stories.add('Options', () => <ModalStoryHelper options />, { percy: { skip: true } });
+stories.add('Options', () => <ModalStoryHelper options />, { chromatic: { disable: true } });

packages/flame/src/Popover/story.tsx

@@ -206,7 +206,7 @@ stories.add(
       />
     </div>
   ),
-  { percy: { skip: true } },
+  { chromatic: { disable: true } },
 );
 
 stories.add(
@@ -235,7 +235,7 @@ stories.add(
       </div>
     </div>
   ),
-  { percy: { skip: true } },
+  { chromatic: { disable: true } },
 );
 
 stories.add(
@@ -253,7 +253,7 @@ stories.add(
       </div>
     </div>
   ),
-  { percy: { skip: true } },
+  { chromatic: { disable: true } },
 );
 
 stories.add(
@@ -274,7 +274,7 @@ stories.add(
       <Input label="I should be behind the popover" />
     </div>
   ),
-  { percy: { skip: true } },
+  { chromatic: { disable: true } },
 );
 
 const RerenderingPopover = () => {
@@ -307,7 +307,7 @@ stories.add(
       </div>
     </div>
   ),
-  { percy: { skip: true } },
+  { chromatic: { disable: true } },
 );
 
 stories.add('Percy Placement', () => (

packages/flame/src/Radio/story.tsx

@@ -164,7 +164,7 @@ stories.add(
       </Box>
     </TextContent>
   ),
-  { percy: { skip: true } },
+  { chromatic: { disable: true } },
 );
 
 stories.add(
@@ -216,5 +216,5 @@ stories.add(
       </Box>
     </TextContent>
   ),
-  { percy: { skip: true } },
+  { chromatic: { disable: true } },
 );

packages/flame/src/Switch/story.tsx

@@ -144,5 +144,5 @@ stories.add(
       </Box>
     </div>
   ),
-  { percy: { skip: true } },
+  { chromatic: { disable: true } },
 );

packages/flame/src/Tag/story.tsx

@@ -66,7 +66,7 @@ stories.add(
       </Box>
     </TextContent>
   ),
-  { percy: { skip: true } },
+  { chromatic: { disable: true } },
 );
 
 stories.add(
@@ -90,7 +90,7 @@ stories.add(
       <Text size="small">(See action logger)</Text>
     </TextContent>
   ),
-  { percy: { skip: true } },
+  { chromatic: { disable: true } },
 );
 
 stories.add(
@@ -105,5 +105,5 @@ stories.add(
       <Text size="small">(Click label or remove icon)</Text>
     </TextContent>
   ),
-  { percy: { skip: true } },
+  { chromatic: { disable: true } },
 );

packages/flame/src/Text/story.tsx

@@ -144,7 +144,7 @@ stories.add(
       ))}
     </div>
   ),
-  { percy: { skip: true } },
+  { chromatic: { disable: true } },
 );
 
 stories.add(
@@ -157,7 +157,7 @@ stories.add(
       <Heading4>Heading 4</Heading4>
     </div>
   ),
-  { percy: { skip: true } },
+  { chromatic: { disable: true } },
 );
 
 stories.add(
@@ -178,7 +178,7 @@ stories.add(
       </Text>
     </TextContent>
   ),
-  { percy: { skip: true } },
+  { chromatic: { disable: true } },
 );
 
 stories.add(
@@ -208,7 +208,7 @@ stories.add(
       </TextContent>
     </div>
   ),
-  { percy: { skip: true } },
+  { chromatic: { disable: true } },
 );
 
 stories.add(
@@ -219,7 +219,7 @@ stories.add(
       <Text fontFamily="monospace">Monospaced fonts</Text>
     </div>
   ),
-  { percy: { skip: true } },
+  { chromatic: { disable: true } },
 );
 
 stories.add(
@@ -253,5 +253,5 @@ stories.add(
       </tbody>
     </table>
   ),
-  { percy: { skip: true } },
+  { chromatic: { disable: true } },
 );

packages/flame/src/Toaster/story.tsx

@@ -136,7 +136,7 @@ stories.add(
       </div>
     </ToasterProvider>
   ),
-  { percy: { skip: true } },
+  { chromatic: { disable: true } },
 );
 
 stories.add('percy snapshots', () => {
@@ -201,5 +201,5 @@ stories.add(
       </Modal>
     </ToasterProvider>
   ),
-  { percy: { skip: true } },
+  { chromatic: { disable: true } },
 );

packages/flame/src/Tooltip/story.tsx

@@ -38,7 +38,7 @@ stories.add(
       </Tooltip>
     </div>
   ),
-  { percy: { skip: true } },
+  { chromatic: { disable: true } },
 );
 
 stories.add('Directions', () => (