Merge branch 'main' into future/pnpm

IPG-Automotive-UK · Feb 28, 2024 · 8867855 · 8867855
2 parents 3450fa0 + 57e1009
commit 8867855
Show file tree

Hide file tree

Showing 21 changed files with 429 additions and 206 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ipguk/react-ui",
-  "version": "6.1.2",
+  "version": "7.0.0",
   "description": "React UI component library for IPG web applications",
   "author": "IPG-Automotive-UK",
   "license": "MIT",
@@ -32,17 +32,17 @@
     "@emotion/styled": "^11.11.0",
     "@mui/material": "^5.15.7",
     "@playwright/test": "^1.41.2",
-    "@storybook/addon-actions": "^7.6.16",
-    "@storybook/addon-essentials": "^7.6.16",
-    "@storybook/addon-interactions": "^7.6.16",
-    "@storybook/addon-links": "^7.6.16",
-    "@storybook/addon-storysource": "^7.6.16",
+    "@storybook/addon-actions": "^7.6.17",
+    "@storybook/addon-essentials": "^7.6.17",
+    "@storybook/addon-interactions": "^7.6.17",
+    "@storybook/addon-links": "^7.6.17",
+    "@storybook/addon-storysource": "^7.6.17",
     "@storybook/blocks": "^7.6.17",
-    "@storybook/node-logger": "^7.6.16",
-    "@storybook/preview-api": "^7.6.16",
-    "@storybook/react": "^7.6.16",
-    "@storybook/react-vite": "^7.6.16",
-    "@storybook/theming": "^7.6.16",
+    "@storybook/node-logger": "^7.6.17",
+    "@storybook/preview-api": "^7.6.17",
+    "@storybook/react": "^7.6.17",
+    "@storybook/react-vite": "^7.6.17",
+    "@storybook/theming": "^7.6.17",
     "@testing-library/dom": "^9.3.4",
     "@testing-library/jest-dom": "^6.4.2",
     "@testing-library/react": "^14.2.1",
@@ -81,7 +81,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "rimraf": "^5.0.5",
-    "storybook": "^7.6.16",
+    "storybook": "^7.6.17",
     "storybook-dark-mode": "^3.0.3",
     "ts-jest": "^29.1.2",
     "typescript": "^5.3.3",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/LoadErrorMessage/LoadErrorMessage.spec.tsx b/src/LoadErrorMessage/LoadErrorMessage.spec.tsx
@@ -7,14 +7,14 @@ test("Renders the title", async ({ page }) => {
 
   const title = page
     .frameLocator('iframe[title="storybook-preview-iframe"]')
-    .getByText("Failed to load");
+    .getByText("Title");
 
   await expect(title).toBeVisible();
 });
 
 test("Renders the action button", async ({ page }) => {
   await page.goto(
-    "http://localhost:6006/?path=/story/card-loaderrormessage--default"
+    "http://localhost:6006/?path=/story/card-loaderrormessage--default&args=actionButtonText:Refresh"
   );
 
   const button = page
@@ -41,9 +41,9 @@ test('Does not render "View More Details" text if no details are provided', asyn
   await expect(viewMoreDetailsText).toBeHidden();
 });
 
-test("Does not render image when showImg is false", async ({ page }) => {
+test("Does not render image when image is none", async ({ page }) => {
   await page.goto(
-    "http://localhost:6006/?path=/story/card-loaderrormessage--default&args=showImg:false"
+    "http://localhost:6006/?path=/story/card-loaderrormessage--default&args=image:none"
   );
 
   const frame = page.frameLocator('iframe[title="storybook-preview-iframe"]');

diff --git a/src/LoadErrorMessage/LoadErrorMessage.stories.tsx b/src/LoadErrorMessage/LoadErrorMessage.stories.tsx
@@ -1,14 +1,18 @@
-import { Meta, StoryFn } from "@storybook/react";
+import { Meta, StoryFn, StoryObj } from "@storybook/react";
 
 import LoadErrorMessage from "./LoadErrorMessage";
 import { LoadErrorMessageProps } from "./LoadErrorMessage.types";
 import React from "react";
-import { action } from "@storybook/addon-actions";
 
 /**
  * Story metadata
  */
 const meta: Meta<typeof LoadErrorMessage> = {
+  argTypes: {
+    onButtonClick: {
+      control: false
+    }
+  },
   component: LoadErrorMessage,
   title: "Card/LoadErrorMessage"
 };
@@ -19,88 +23,28 @@ const Template: StoryFn<LoadErrorMessageProps> = args => {
   return <LoadErrorMessage {...args} />;
 };
 
-// Default
-export const Default = {
-  args: {
-    actionButtonText: "Refresh",
-    contactTeam: "Support",
-    errorDetails: "Component failed to load",
-    message: "Something has gone wrong. Please refresh the page.",
-    onButtonClick: action("Refresh action triggered"),
-    showImg: true,
-    supportUrl: "https://ipg-automotive.com/en/support/support-request/",
-    title: "Failed to load"
-  },
-  render: Template
-};
-
-// User Login Error
-export const UserLoginError = {
-  args: {
-    actionButtonText: "Log out",
-    contactTeam: "Support",
-    errorDetails: "Invalid token - length is 0",
-    message:
-      "Seems like there is an issue with user login account. Please log out and try logging in again.",
-    onButtonClick: action("Logout action triggered"),
-    showImg: true,
-    supportUrl: "https://ipg-automotive.com/en/support/support-request/",
-    title: "Failed to load"
-  },
-  render: Template
-};
-
-// Failed to fetch data
-export const DataFetchError = {
-  args: {
-    contactTeam: "Support",
-    errorDetails: "Failed to fetch users from VIRTO.ID: 400 Bad Request",
-    message:
-      "Seems like there is an issue fetching data. Please try again later.",
-    showImg: true,
-    supportUrl: "https://ipg-automotive.com/en/support/support-request/",
-    title: "Failed to fetch data"
-  },
-  render: Template
-};
+// Story type
+type Story = StoryObj<typeof LoadErrorMessage>;
 
-// Failed to fetch data
-export const TechnicalError = {
+// Default
+export const Default: Story = {
   args: {
     contactTeam: "Support",
-    errorDetails: "",
-    message:
-      "We're experiencing technical difficulties with our server right now. 😓",
-    showImg: true,
-    supportUrl: "https://ipg-automotive.com/en/support/support-request/",
-    title: "Error!"
+    image: "virto-thinking",
+    message: "Your message goes here.",
+    title: "Title"
   },
   render: Template
 };
 
-// API Connection Error
-export const APIError = {
-  args: {
-    contactTeam: "Support",
-    errorDetails: "Unexpected token < in JSON at position 0",
-    message: "This issue requires developer attention.",
-    showImg: true,
-    supportUrl: "https://ipg-automotive.com/en/support/support-request/",
-    title: "API Connection Error"
-  },
+// HTTP 404
+export const HTTP404: Story = {
+  args: LoadErrorMessage.default404Props,
   render: Template
 };
 
-// Code Error
-export const CodeError = {
-  args: {
-    contactTeam: "Support",
-    errorDetails: "vehicless is not defined",
-    message:
-      "As this error is related to our code, a developer will need to investigate and fix it.",
-    showImg: true,
-    supportUrl: "https://ipg-automotive.com/en/support/support-request/",
-    title: "Something is not right!"
-  },
+// General Error
+export const GeneralError: Story = {
+  args: LoadErrorMessage.defaultErrorProps,
   render: Template
 };