added FormHeader component

components/FormHeader/FormHeader.jsx

@@ -0,0 +1,25 @@
+import { Button, ButtonGroup, Heading, HStack } from "@chakra-ui/react";
+
+export function FormHeader({ rightButtons, text }) {
+  return (
+    <HStack gap={4} p={2} justifyContent="space-between">
+      <Heading
+        textOverflow="ellipsis"
+        overflow="hidden"
+        whiteSpace="nowrap"
+        size="lg"
+      >
+        {text}
+      </Heading>
+
+      <ButtonGroup>{rightButtons}</ButtonGroup>
+    </HStack>
+  );
+}
+
+// const rightButton = (
+//   <>
+//     <Button variant="outline">Cancel</Button>
+//     <Button>Save</Button>
+//   </>
+// );

components/FormHeader/FormHeader.stories.jsx

@@ -0,0 +1,35 @@
+import { FormHeader } from "./FormHeader";
+import { Button, IconButton } from "@chakra-ui/react";
+import { CgMinimizeAlt } from "react-icons/cg";
+
+const meta = {
+  title: "RecordForm/FormHeader",
+  component: FormHeader,
+  argTypes: {
+    rightButtons: {
+      options: ["saveCancel", "minimize"],
+      control: { type: "radio" },
+      mapping: {
+        saveCancel: (
+          <>
+            <Button variant="outline">Cancel</Button>
+            <Button>Save</Button>
+          </>
+        ),
+        minimize: (
+          <IconButton
+            aria-label="minimize"
+            icon={<CgMinimizeAlt size="24px" />}
+          />
+        ),
+      },
+    },
+  },
+};
+export default meta;
+
+export const Default = {
+  args: {
+    text: "New Record",
+  },
+};

components/FormHeader/index.js

@@ -0,0 +1 @@
+export { FormHeader } from "./FormHeader";

components/InstitutionTab/InstitutionTab.module.css

@@ -15,7 +15,7 @@
 
 .stateIcon {
     flex-shrink: 0;
-    width: var(--chakra-sizes-7);
+    width: var(--chakra-sizes-8);
     padding: 2px;
 
     font-weight: var(--chakra-fontWeights-extrabold);
@@ -32,9 +32,6 @@
     padding-left: var(--chakra-sizes-1);
     gap: var(--chakra-sizes-3);
 
-    text-overflow:ellipsis;
-    white-space:nowrap;
-
     border-radius: var(--chakra-radii-lg);  
 }
 
@@ -43,4 +40,6 @@
     max-width: 100%;
     min-width: var(--chakra-sizes-1);
     overflow: hidden;
+    text-overflow:clip;
+    white-space:nowrap;
 }