Final test

Author: SajanGhuman

.eslintrc.json

@@ -1,20 +1,17 @@
 {
-    "env": {
-        "browser": true,
-        "es2021": true
-    },
-    "extends": [
-        "standard-with-typescript",
-        "plugin:react/recommended",
-        "prettier"
-    ],
-    "parserOptions": {
-        "ecmaVersion": "latest",
-        "sourceType": "module"
-    },
-    "plugins": [
-        "react"
-    ],
-    "rules": {
-    }
+  "env": {
+    "browser": true,
+    "es2021": true
+  },
+  "extends": [
+    "standard-with-typescript",
+    "plugin:react/recommended",
+    "prettier"
+  ],
+  "parserOptions": {
+    "ecmaVersion": "latest",
+    "sourceType": "module"
+  },
+  "plugins": ["react"],
+  "rules": {}
 }

.storybook/main.ts

@@ -20,4 +20,4 @@ const config: StorybookConfig = {
     autodocs: "tag",
   },
 };
-export default config;
+export default config;

.storybook/preview.ts

@@ -12,4 +12,4 @@ const preview: Preview = {
   },
 };
 
-export default preview;
+export default preview;

package.json

@@ -61,5 +61,5 @@
   "lint-staged": {
     "*.js": "eslint --fix && npm run test",
     "*.{js,css,md,html,json}": "prettier --cache --write"
-}
+  }
 }

src/components/Card/Card.stories.tsx

@@ -6,7 +6,7 @@ import { CardProps } from "./Card.types";
 export default {
   title: "Card",
   component: Card,
-}  as Meta;
+} as Meta;
 
 const Template: Story<CardProps> = (args) => <Card {...args} />;
 

src/components/HeroImage/HeroImage.test.tsx

@@ -10,7 +10,7 @@ describe("HeroImage", () => {
         imageUrl="test.jpg"
         title="Test Title"
         subtitle="Test Subtitle"
-      />,
+      />
     );
     expect(getByText("Test Title")).toBeVisible();
     expect(getByText("Test Subtitle")).toBeVisible();
@@ -23,7 +23,7 @@ describe("HeroImage", () => {
         title="Test Title"
         subtitle="Test Subtitle"
         disabled
-      />,
+      />
     );
     const heroContainer = getByText("Test Title").parentElement;
     expect(heroContainer).toHaveStyle("background-color: darkgrey");

src/components/HeroImage/HeroImage.tsx

@@ -1,6 +1,6 @@
-import React from "react";
-import styled from "styled-components";
-import { HeroImageProps } from "./HeroImage.types";
+import React from 'react'
+import styled from 'styled-components'
+import { type HeroImageProps } from './HeroImage.types'
 
 const HeroImageContainer = styled.div<HeroImageProps>`
   background-image: url(${(props) => props.imageUrl});
@@ -14,28 +14,29 @@ const HeroImageContainer = styled.div<HeroImageProps>`
   text-align: center;
   position: relative;
   ${(props) =>
+    props.disabled !== undefined &&
     props.disabled &&
     `
     cursor: not-allowed;
     background: none;
     background-color: darkgrey;
   `}
-`;
+`
 
 const Title = styled.h1`
   color: #fff;
-`;
+`
 
 const Subtitle = styled.h2`
   color: #fff;
-`;
+`
 
 const CallToActionButton = styled.button`
   padding: 10px 20px;
   margin-top: 20px;
   font-size: 16px;
   cursor: pointer;
-`;
+`
 
 const HeroImage: React.FC<HeroImageProps> = ({
   imageUrl,
@@ -47,13 +48,14 @@ const HeroImage: React.FC<HeroImageProps> = ({
 }) => {
   return (
     <HeroImageContainer imageUrl={imageUrl} disabled={disabled}>
-      {title && <Title>{title}</Title>}
-      {subtitle && <Subtitle>{subtitle}</Subtitle>}
-      {Text && (
-        <CallToActionButton onClick={OnClick}>{Text}</CallToActionButton>
-      )}
+      {title ?? (false && <Title>{title}</Title>)}
+      {subtitle ?? (false && <Subtitle>{subtitle}</Subtitle>)}
+      {Text ??
+        (false && (
+          <CallToActionButton onClick={OnClick}>{Text}</CallToActionButton>
+        ))}
     </HeroImageContainer>
-  );
-};
+  )
+}
 
-export default HeroImage;
+export default HeroImage

src/components/Img/Img.stories.tsx

@@ -8,7 +8,7 @@ export default {
   component: Img,
 } as Meta<typeof Img>;
 
-const    Template: Story<ImgProps> = (args) => <Img {...args} />;
+const Template: Story<ImgProps> = (args) => <Img {...args} />;
 
 export const Default = Template.bind({});
 Default.args = {

src/components/Img/Img.test.tsx

@@ -4,13 +4,13 @@ import { render, screen } from "@testing-library/react";
 import Img from "./Img";
 
 describe("Img", () => {
-    it("renders the component", () => {
+  it("renders the component", () => {
     const { getByAltText } = render(<Img src="test.jpg" alt="Test" />);
     expect(getByAltText("Test")).toBeVisible();
-   });
+  });
 
-       it("changes opacity when disabled", () => {
+  it("changes opacity when disabled", () => {
     const { getByAltText } = render(<Img src="test.jpg" alt="Test" disabled />);
     expect(getByAltText("Test")).toHaveStyle("opacity: 0.5");
-   });
+  });
 });

src/components/Img/Img.types.tsx

@@ -3,5 +3,5 @@ export interface ImgProps {
   alt?: string;
   width?: string;
   height?: string;
-  disabled?:    boolean;
+  disabled?: boolean;
 }