Addressing spacing issues.

ClickHouse · Aug 2, 2023 · d2d29c3 · d2d29c3
1 parent 467b2b8
commit d2d29c3
Show file tree

Hide file tree

Showing 7 changed files with 173 additions and 134 deletions.
diff --git a/.prettierrc b/.prettierrc
@@ -10,5 +10,7 @@
   "bracketSpacing": true,
   "endOfLine": "lf",
   "singleAttributePerLine": true,
-  "arrowParens": "avoid"
+  "arrowParens": "avoid",
+  "tabWidth": 2,
+  "useTabs": false
 }
diff --git a/src/components/Card/CardPrimary/CardPrimary.test.tsx b/src/components/Card/CardPrimary/CardPrimary.test.tsx
@@ -3,39 +3,38 @@ import { ThemeProvider } from "@/theme";
 import { CardPrimary, CardProps } from "././CardPrimary";
 
 describe("CardPrimary Component", () => {
-
-	describe("Primary card", () => {
-		const renderCard = (props: CardProps) =>
-    render(
-      <ThemeProvider theme="light">
-        <CardPrimary {...props} />
-      </ThemeProvider>
-    );
+  describe("Primary card", () => {
+    const renderCard = (props: CardProps) =>
+      render(
+        <ThemeProvider theme="light">
+          <CardPrimary {...props} />
+        </ThemeProvider>
+      );
 
-		it("should render the title", () => {
+    it("should render the title", () => {
       const title = "Test card component";
       renderCard({
-				title,
-				image: "warning",
-				description: "",
-				infoUrl: "",
-				infoText: ""
-			});
+        title,
+        image: "warning",
+        description: "",
+        infoUrl: "",
+        infoText: "",
+      });
 
       expect(screen.getByText(title)).toBeDefined();
     });
 
-		it("should render the description when provided", () => {
-			const description = "This is the card description";
-			renderCard({
-				image: "warning",
-				title: "",
-				description,
-				infoUrl: "",
-				infoText: ""
-			});
-	
-			expect(screen.getByText(description)).toBeDefined();
-		});	
-	});
-});
+    it("should render the description when provided", () => {
+      const description = "This is the card description";
+      renderCard({
+        image: "warning",
+        title: "",
+        description,
+        infoUrl: "",
+        infoText: "",
+      });
+
+      expect(screen.getByText(description)).toBeDefined();
+    });
+  });
+});
diff --git a/src/components/Card/CardPrimary/CardPrimary.tsx b/src/components/Card/CardPrimary/CardPrimary.tsx
@@ -16,7 +16,7 @@ export interface CardProps {
 }
 
 const Wrapper = styled.div<Pick<CardProps, "size" | "hasShadow" | "size" | "disabled">>`
-  background-color: ${({  theme }) => theme.click.card.primary.color.background.default};
+  background-color: ${({ theme }) => theme.click.card.primary.color.background.default};
   border-radius: ${({ theme }) => theme.click.card.primary.radii.all};
   border: ${({ theme }) => `1px solid ${theme.click.card.primary.color.stroke.default}`};
   display: flex;
@@ -26,38 +26,47 @@ const Wrapper = styled.div<Pick<CardProps, "size" | "hasShadow" | "size" | "disa
   padding: ${({ size = "md", theme }) =>
     `${theme.click.card.primary.space[size].x} ${theme.click.card.primary.space[size].y}`};
   gap: ${({ size = "md", theme }) => theme.click.card.primary.space[size].gap};
-  box-shadow: ${({ hasShadow, theme }) => hasShadow ? theme.shadow[1] : "none"};
+  box-shadow: ${({ hasShadow, theme }) => (hasShadow ? theme.shadow[1] : "none")};
 
-  &:hover, &:focus {
+  &:hover,
+  &:focus {
     background-color: ${({ theme }) => theme.click.card.secondary.color.background.hover};
     cursor: pointer;
     button {
-      background-color: ${({ theme }) => theme.click.button.basic.color.primary.background.hover};
+      background-color: ${({ theme }) =>
+        theme.click.button.basic.color.primary.background.hover};
       border-color: ${({ theme }) => theme.click.button.basic.color.primary.stroke.hover};
       &:active {
-        background-color: ${({ theme }) => theme.click.button.basic.color.primary.background.active};
-        border-color: ${({ theme }) => theme.click.button.basic.color.primary.stroke.active};
+        background-color: ${({ theme }) =>
+          theme.click.button.basic.color.primary.background.active};
+        border-color: ${({ theme }) =>
+          theme.click.button.basic.color.primary.stroke.active};
       }
     }
   }
 
   &[disabled],
   &[disabled]:hover,
   &[disabled]:active {
-    background-color: ${({ theme }) => theme.click.card.primary.color.background.disabled};
+    background-color: ${({ theme }) =>
+      theme.click.card.primary.color.background.disabled};
     color: ${({ theme }) => theme.click.card.primary.color.title.disabled};
     border: 1px solid ${({ theme }) => theme.click.card.primary.color.stroke.disabled};
     cursor: not-allowed;
 
     button {
-      background-color: ${({ theme }) => theme.click.button.basic.color.primary.background.disabled};
-      border-color: ${({ theme }) => theme.click.button.basic.color.primary.stroke.disabled};
+      background-color: ${({ theme }) =>
+        theme.click.button.basic.color.primary.background.disabled};
+      border-color: ${({ theme }) =>
+        theme.click.button.basic.color.primary.stroke.disabled};
       &:active {
-        background-color: ${({ theme }) => theme.click.button.basic.color.primary.background.disabled};
-        border-color: ${({ theme }) => theme.click.button.basic.color.primary.stroke.disabled};
+        background-color: ${({ theme }) =>
+          theme.click.button.basic.color.primary.background.disabled};
+        border-color: ${({ theme }) =>
+          theme.click.button.basic.color.primary.stroke.disabled};
       }
     }
-  }  
+  }
 `;
 
 const Header = styled.div<Pick<CardProps, "size" | "disabled">>`
@@ -67,7 +76,10 @@ const Header = styled.div<Pick<CardProps, "size" | "disabled">>`
   gap: ${({ size = "md", theme }) => theme.click.card.primary.space[size].gap};
 
   h3 {
-    color: ${({ disabled, theme }) => disabled == true ? theme.click.global.color.text.muted : theme.click.global.color.text.default};
+    color: ${({ disabled, theme }) =>
+      disabled == true
+        ? theme.click.global.color.text.muted
+        : theme.click.global.color.text.default};
   }
 
   svg {
@@ -92,27 +104,30 @@ export const CardPrimary = ({
   infoUrl,
   infoText,
   size,
-  disabled = false
+  disabled = false,
 }: CardProps) => (
-  <Wrapper 
-    hasShadow={hasShadow} 
+  <Wrapper
+    hasShadow={hasShadow}
     size={size}
     disabled={disabled}
-    onClick={() => alert(`We need to implement a routing system so I can go to ${infoUrl}`)}>
-
-    <Header size={size} disabled={disabled}>
+    onClick={() =>
+      alert(`We need to implement a routing system so I can go to ${infoUrl}`)
+    }
+  >
+    <Header
+      size={size}
+      disabled={disabled}
+    >
       <Icon name={image} />
-      <Title type='h3'>{title}</Title>
+      <Title type="h3">{title}</Title>
     </Header>
 
     <Content size={size}>
       <Text color="muted">{description}</Text>
     </Content>
 
-    { size == "sm" &&
-      <Spacer size="sm"/>
-    }
+    {size == "sm" && <Spacer size="sm" />}
 
     <Button disabled={disabled}>{infoText}</Button>
   </Wrapper>
-);
+);
diff --git a/src/components/Card/CardSecondary/CardSecondary.test.tsx b/src/components/Card/CardSecondary/CardSecondary.test.tsx
@@ -10,44 +10,43 @@ describe("CardSecondary Component", () => {
       </ThemeProvider>
     );
 
-		it("should render the title", () => {
-      const title = "Test card component";
-      renderCard({
-				title,
-				image: "warning",
-				description: "",
-				infoUrl: "",
-				infoText: ""
-			});
+  it("should render the title", () => {
+    const title = "Test card component";
+    renderCard({
+      title,
+      image: "warning",
+      description: "",
+      infoUrl: "",
+      infoText: "",
+    });
+
+    expect(screen.getAllByText(title).length).toEqual(1);
+  });
 
-			expect(screen.getAllByText(title).length).toEqual(1);
+  it("should render the description when provided", () => {
+    const description = "This is the card description";
+    renderCard({
+      image: "warning",
+      title: "",
+      description,
+      infoUrl: "",
+      infoText: "",
     });
 
-		it("should render the description when provided", () => {
-			const description = "This is the card description";
-			renderCard({
-				image: "warning",
-				title: "",
-				description,
-				infoUrl: "",
-				infoText: ""
-			});
-
-			expect(screen.getAllByText(description).length).toEqual(1);
-		});	
+    expect(screen.getAllByText(description).length).toEqual(1);
+  });
 
-		it("should render the badge when hasBadge prop is present", () => {
-			const badgeText = "I should eat more bananas";
-			renderCard({
-				image: "warning",
-				title: "",
-				description: "",
-				infoUrl: "",
-				infoText: "",
-				badgeText,
-			});
-
-			expect(screen.getAllByText(badgeText).length).toEqual(1);
-		});	
+  it("should render the badge when hasBadge prop is present", () => {
+    const badgeText = "I should eat more bananas";
+    renderCard({
+      image: "warning",
+      title: "",
+      description: "",
+      infoUrl: "",
+      infoText: "",
+      badgeText,
+    });
 
-});
+    expect(screen.getAllByText(badgeText).length).toEqual(1);
+  });
+});
diff --git a/src/components/Card/CardSecondary/CardSecondary.tsx b/src/components/Card/CardSecondary/CardSecondary.tsx
@@ -29,14 +29,15 @@ export interface CardProps {
 const Wrapper = styled.div<Pick<CardProps, "hasShadow" | "disabled">>`
   background-color: ${({ theme }) => theme.click.card.secondary.color.background.default};
   border-radius: ${({ theme }) => theme.click.card.secondary.radii.all};
-  border: ${({ theme }) => `1px solid ${theme.click.card.secondary.color.stroke.default}`};
+  border: ${({ theme }) =>
+    `1px solid ${theme.click.card.secondary.color.stroke.default}`};
   max-width: 420px;
   min-width: 320px;
   display: flex;
   flex-direction: column;
   padding: ${({ theme }) => theme.click.card.secondary.space.all};
   gap: ${({ theme }) => theme.click.card.secondary.space.gap};
-  box-shadow: ${({ hasShadow, theme }) => hasShadow ? theme.shadow[1] : "none"};
+  box-shadow: ${({ hasShadow, theme }) => (hasShadow ? theme.shadow[1] : "none")};
 
   &:hover, :focus {
     background-color: ${({ theme }) => theme.click.card.secondary.color.background.hover};
@@ -50,18 +51,17 @@ const Wrapper = styled.div<Pick<CardProps, "hasShadow" | "disabled">>`
   &[disabled],
   &[disabled]:hover,
   &[disabled]:active {
-    background-color: ${({ theme }) => theme.click.card.secondary.color.background.disabled};
+    background-color: ${({ theme }) =>
+      theme.click.card.secondary.color.background.disabled};
     color: ${({ theme }) => theme.click.card.secondary.color.title.disabled};
     border: 1px solid ${({ theme }) => theme.click.card.secondary.color.stroke.disabled};
     cursor: not-allowed;
 
     .link, .link-arrow {
       color: ${({ theme }) => theme.click.card.secondary.color.link.disabled};
     }
-  }
-    
-  }  
-
+  } 
+}  
 `;
 
 const Header = styled.div`
@@ -75,9 +75,12 @@ const HeaderLeft = styled.div<Pick<CardProps, "disabled">>`
   display: flex;
   align-items: center;
   gap: ${({ theme }) => theme.click.card.secondary.space.gap};
-  
+
   h3 {
-    color: ${({ disabled, theme }) => disabled == true ? theme.click.global.color.text.muted : theme.click.global.color.text.default};
+    color: ${({ disabled, theme }) =>
+      disabled == true
+        ? theme.click.global.color.text.muted
+        : theme.click.global.color.text.default};
   }
 `;
 
@@ -99,7 +102,7 @@ const ArrowContainer = styled(Icon)`
   color: ${({ theme }) => theme.click.card.secondary.color.link.default};
   height: ${({ theme }) => theme.click.image.medium.size.height};
   width: ${({ theme }) => theme.click.image.medium.size.width};
-`
+`;
 
 export const CardSecondary = ({
   title,
@@ -112,18 +115,27 @@ export const CardSecondary = ({
   infoUrl,
   infoText,
 }: CardProps) => (
-  <Wrapper disabled={disabled} hasShadow={hasShadow} onClick={() => alert(`We need to implement a routing system so I can go to ${infoUrl}`)}>
+  <Wrapper
+    disabled={disabled}
+    hasShadow={hasShadow}
+    onClick={() =>
+      alert(`We need to implement a routing system so I can go to ${infoUrl}`)
+    }
+  >
     <Header>
       <HeaderLeft disabled={disabled}>
-        <Icon name={image} size="large" />
-        <Title type='h3'>{title}</Title>
+        <Icon
+          name={image}
+          size="large"
+        />
+        <Title type="h3">{title}</Title>
       </HeaderLeft>
-      { badgeText && (
+      {badgeText && (
         <Badge
           text={badgeText}
-          state={disabled == true ? "disabled" : badgeState }
-        />)
-      }
+          state={disabled == true ? "disabled" : badgeState}
+        />
+      )}
     </Header>
 
     <Content>
@@ -134,7 +146,8 @@ export const CardSecondary = ({
       <Text className="link">{infoText}</Text>
       <ArrowContainer
         name="chevron-right"
-        className="link-arrow" />
+        className="link-arrow"
+      />
     </InfoLink>
   </Wrapper>
-);
+);