From f53a4bf93db4959547018df445eab206a446eb9c Mon Sep 17 00:00:00 2001
From: Nick Pang <nick95927@gmail.com>
Date: Mon, 15 Jul 2024 14:00:38 +1000
Subject: [PATCH] Updated variable name & stories structure as requested.

---
 .../OperationalStatus.stories.tsx             | 23 ++++++++-----------
 .../OperationalStatus/OperationalStatus.tsx   |  4 ++--
 src/components/OperationalStatus/index.ts     |  2 +-
 3 files changed, 12 insertions(+), 17 deletions(-)

diff --git a/src/components/OperationalStatus/OperationalStatus.stories.tsx b/src/components/OperationalStatus/OperationalStatus.stories.tsx
index 3d258af4..9c4747af 100644
--- a/src/components/OperationalStatus/OperationalStatus.stories.tsx
+++ b/src/components/OperationalStatus/OperationalStatus.stories.tsx
@@ -1,10 +1,7 @@
 import { Meta, StoryFn } from "@storybook/react";
-import { OperationalStatus, OperationalStatusData } from "./OperationalStatus";
+import { OperationalStatus, OperationalStatusProps } from "./OperationalStatus";
 import jsonData from "../../../public/status.json";
 
-const typedJsonData: OperationalStatusData["data"] =
-  jsonData as OperationalStatusData["data"];
-
 export default {
   title: "Component/OperationalStatus",
   component: OperationalStatus,
@@ -14,28 +11,26 @@ const Template: StoryFn<typeof OperationalStatus> = (args) => (
   <OperationalStatus {...args} />
 );
 
+export const Default = Template.bind({});
+Default.args = {
+  title: "Display all",
+  data: jsonData as OperationalStatusProps["data"],
+};
+
 export const Operational = Template.bind({});
 Operational.args = {
+  ...Default.args,
   title: "Operational status",
-  data: typedJsonData,
   displayOKOnly: true,
 };
 
 export const Disruptions = Template.bind({});
 Disruptions.args = {
+  ...Default.args,
   title: "Service disruptions",
-  data: typedJsonData,
   displayDisruptedOnly: true,
 };
 
-export const DisplayAllData = Template.bind({});
-DisplayAllData.args = {
-  title: "Service disruptions",
-  data: typedJsonData,
-  displayOKOnly: false,
-  displayDisruptedOnly: false,
-};
-
 export const NoDataAvailable = Template.bind({});
 NoDataAvailable.args = {
   title: "No available data",
diff --git a/src/components/OperationalStatus/OperationalStatus.tsx b/src/components/OperationalStatus/OperationalStatus.tsx
index 1d58592c..0f1b0868 100644
--- a/src/components/OperationalStatus/OperationalStatus.tsx
+++ b/src/components/OperationalStatus/OperationalStatus.tsx
@@ -28,14 +28,14 @@ interface Data extends Service {
   services: Service[];
 }
 
-export interface OperationalStatusData extends Data {
+export interface OperationalStatusProps extends Data {
   title: string;
   data?: Data;
   displayOKOnly: boolean;
   displayDisruptedOnly: boolean;
 }
 
-export const OperationalStatus: FunctionComponent<OperationalStatusData> = ({
+export const OperationalStatus: FunctionComponent<OperationalStatusProps> = ({
   title,
   data,
   displayOKOnly = false,
diff --git a/src/components/OperationalStatus/index.ts b/src/components/OperationalStatus/index.ts
index 784b3c13..6fd4600e 100644
--- a/src/components/OperationalStatus/index.ts
+++ b/src/components/OperationalStatus/index.ts
@@ -1,4 +1,4 @@
 export {
   OperationalStatus,
-  type OperationalStatusData,
+  type OperationalStatusProps,
 } from "./OperationalStatus";