fixes tslint issues

user-interviews · Sep 29, 2023 · 7779cf4 · 7779cf4
1 parent 21a33c6
commit 7779cf4
Show file tree

Hide file tree

Showing 5 changed files with 58 additions and 55 deletions.
diff --git a/src/EmptyState/EmptyState.stories.tsx b/src/EmptyState/EmptyState.stories.tsx
@@ -19,15 +19,15 @@ export const Default: Story = {
   args: {
     subtitle: 'Launch your first project to start conducting research!',
     title: 'You have no projects',
-  }
+  },
 };
 
 export const PrimaryAction: Story = {
   args: {
     primaryAction: <Button leadingIcon={faPlus} variant="primary">New project</Button>,
     subtitle: 'Launch your first project to start conducting research! Source from a pool of 2.4 million participants to reach nearly any target audience.',
     title: 'You have no projects',
-  }
+  },
 };
 
 export const FullWidth: Story = {
@@ -36,13 +36,13 @@ export const FullWidth: Story = {
     primaryAction: <Button leadingIcon={faPlus} variant="primary">New project</Button>,
     subtitle: 'Launch your first project to start conducting research! Source from a pool of 2.4 million participants to reach nearly any target audience.',
     title: 'You have no projects',
-  }
+  },
 };
 
 export const MarginTop: Story = {
   args: {
     marginTop: 'sm',
     subtitle: 'Add a new participant segment above',
     title: 'No segments created',
-  }
+  },
 };
diff --git a/src/EmptyState/EmptyState.tsx b/src/EmptyState/EmptyState.tsx
@@ -42,7 +42,7 @@ const EmptyState = ({
           size="lg"
           textAlign="center"
           weight="bold"
-          >
+        >
             {title}
         </Heading>
       )}

diff --git a/src/Flex/Flex.stories.tsx b/src/Flex/Flex.stories.tsx
@@ -1,17 +1,17 @@
 import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 
-import Flex from './Flex';
 import Card from 'src/Card';
+import Flex from './Flex';
 
 const meta: Meta<typeof Flex> = {
   component: Flex,
   parameters: {
     docs: {
       description: {
-        component:  'Flex is a utility component for creating consistent spacing between items. Use this for quick alignment and spacing in your layouts.'
+        component: 'Flex is a utility component for creating consistent spacing between items. Use this for quick alignment and spacing in your layouts.',
       },
-    }
+    },
   },
   title: 'Layouts/Flex',
 };
@@ -25,54 +25,54 @@ export const Default: Story = {
     flexDirection: 'row',
     justifyContent: 'space-between',
   },
-  render: ({children, ...args}) => (
+  render: ({ children, ...args }) => (
     <Flex {...args}>
-      <Card title="Card 1" size="xs" />
-      <Card title="Card 2" size="xs" />
-      <Card title="Card 3" size="xs" />
+      <Card size="xs" title="Card 1" />
+      <Card size="xs" title="Card 2" />
+      <Card size="xs" title="Card 3" />
     </Flex>
-  )
-}
+  ),
+};
 
 export const FlexDirection: Story = {
   args: {
     container: true,
     flexDirection: 'column',
   },
-  render: ({children, ...args}) => (
+  render: ({ children, ...args }) => (
     <Flex {...args}>
-      <Card title="Card 1" size="xs" />
-      <Card title={'flex-direction: ' } subTitle={args.flexDirection} size="xs" />
-      <Card title="Card 3" size="xs" />
+      <Card size="xs" title="Card 1" />
+      <Card size="xs" subTitle={args.flexDirection} title="flex-direction: " />
+      <Card size="xs" title="Card 3" />
     </Flex>
-  )
-}
+  ),
+};
 
 export const JustifyContent: Story = {
   args: {
     container: true,
     flexDirection: 'row',
-    justifyContent: 'space-between'
+    justifyContent: 'space-between',
   },
-  render: ({children, ...args}) => (
+  render: ({ children, ...args }) => (
     <Flex {...args}>
-      <Card title="Card 1" size="xs" />
-      <Card title={'justify-content: ' } subTitle={args.justifyContent} size="xs" />
-      <Card title="Card 3" size="xs" />
+      <Card size="xs" title="Card 1" />
+      <Card size="xs" subTitle={args.justifyContent} title="justify-content: " />
+      <Card size="xs" title="Card 3" />
     </Flex>
-  )
-}
+  ),
+};
 
 export const AlignItems: Story = {
   args: {
     container: true,
     alignItems: 'center',
   },
-  render: ({children, ...args}) => (
+  render: ({ children, ...args }) => (
     <Flex {...args}>
-      <Card title="Card 1" size="xs" />
-      <Card title={'align-items: ' } subTitle={args.alignItems} size="xs" />
-      <Card title="Card 3" size="xs" />
+      <Card size="xs" title="Card 1" />
+      <Card size="xs" subTitle={args.alignItems} title="align-items: " />
+      <Card size="xs" title="Card 3" />
     </Flex>
-  )
-}
+  ),
+};
diff --git a/src/Flex/Flex.tsx b/src/Flex/Flex.tsx
@@ -59,11 +59,12 @@ const Flex = ({
   maxHeight,
   maxWidth,
   width,
-  ...props } : FlexProps) => (
+  ...props
+}: FlexProps) => (
   <FlexWrapper
-    as={as}
     alignItems={alignItems}
     alignSelf={alignSelf}
+    as={as}
     className={className}
     container={container}
     flex={flex}

diff --git a/src/Heading/Heading.stories.tsx b/src/Heading/Heading.stories.tsx
@@ -8,54 +8,56 @@ const meta: Meta<typeof Heading> = {
   parameters: {
     docs: {
       description: {
-        component: 'Headings are used as the titles of each major section of a page in the interface.'
+        component: 'Headings are used as the titles of each major section of a page in the interface.',
       },
-    }
+    },
   },
   title: 'Components/Heading',
 };
 
 export default meta;
 type Story = StoryObj<typeof Heading>;
 
-/** 
+/**
   A default `Heading` as a level `2` with size `xxl` and weight `bold`
-*/ 
+*/
 export const Default: Story = {
   args: {
-    children: 'The fastest way to recruit research participants'
+    children: 'The fastest way to recruit research participants',
   },
 };
 
-/** 
+/**
   Use the appropriate heading level to create hierarchy on the page.
 
   Adjust the font `size` with the available sizes:
 
-  `xxxl`, `xxl`, `xl`, `lg`, `md`, `sm`, `xs` 
+  `xxxl`, `xxl`, `xl`, `lg`, `md`, `sm`, `xs`
 
   #### Best practices:
 
   **DO**
-  - Use one unique `h1` per page that describes what that page is about, preferably starts just above the main content.
+  - Use one unique `h1` per page that describes what that page is about,
+  preferably starts just above the main content.
 
   **DON'T**
   - Do not choose a heading by its size, but by its level in the context of the content.
-  - Do not skip a heading level from the top down. 
+  - Do not skip a heading level from the top down.
 
   #### Accessibility
 
-  **Summary:** 
-  - Use headings to describe content and use them consistently and semantically. This will help all users to better find the content they are looking for.
-  - Font weight and size may be changed from `Heading` defaults as long as the semantic hierarchy is correct.
-
+  **Summary:**
+  - Use headings to describe content and use them consistently and semantically. This will help
+  all users to better find the content they are looking for.
+  - Font weight and size may be changed from `Heading` defaults as long as the semantic hierarchy
+  is correct.
 
   **WCAG2 AA success criteria:**
 
   - [Success Criterion: 2.4.6 Headings and labels.](https://www.w3.org/WAI/WCAG21/quickref/#headings-and-labels) Provide ways to help users navigate, find content, and determine where they are. Headings and labels describe topic or purpose.
   - [Success Criterion: 3.2.3 Consistent Navigation Level.](https://www.w3.org/WAI/WCAG21/quickref/?showtechniques=246#consistent-navigation) Navigational mechanisms that are repeated on multiple Web pages within a set of Web pages occur in the same relative order each time they are repeated, unless a change is initiated by the user.
   - [Success Criterion: 1.3.1 Info and Relationships.](https://www.w3.org/WAI/WCAG21/quickref/?showtechniques=246#info-and-relationships) Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text. In other words: if it looks like a heading, it should be a heading in the HTML (and not for example text made bold).
-*/ 
+*/
 export const Levels: Story = {
   render: () => (
     <>
@@ -67,8 +69,8 @@ export const Levels: Story = {
       <Heading level={6} size="sm" weight="bold">The fastest way to recruit research participants</Heading>
       <Heading level={6} size="xs" weight="bold">The fastest way to recruit research participants</Heading>
     </>
-  )
-}
+  ),
+};
 
 /**
   Use to give heading one of the supported font weights:
@@ -82,8 +84,8 @@ export const Weights: Story = {
       <Heading level={2} size="xxl" weight="medium">The fastest way to recruit research participants</Heading>
       <Heading level={2} size="xxl" weight="regular">The fastest way to recruit research participants</Heading>
     </>
-  )
-}
+  ),
+};
 
 /**
   Use to set heading alignment:
@@ -97,5 +99,5 @@ export const Alignment: Story = {
       <Heading level={2} size="xxl" textAlign="center" weight="bold">The fastest way to recruit research participants</Heading>
       <Heading level={2} size="xxl" textAlign="right" weight="bold">The fastest way to recruit research participants</Heading>
     </>
-  )
-}
+  ),
+};