Merge pull request #79 from innovation-upstream/chore/add-disable-pro…

…ps-to-tab

chore: Add disable props to tabs, export network modal

src/__tests__/components/tabs.test.tsx

@@ -11,7 +11,7 @@ it("renders correctly", () => {
   expect(asFragment()).toMatchInlineSnapshot(`
     <DocumentFragment>
       <div
-        class="css-1aoopwd"
+        class="css-1lch1du"
       >
         <span
           class="css-xogzuj"

src/components/Tabs/Tab.tsx

@@ -9,14 +9,15 @@ const Tab: React.FC<TabProps> = React.forwardRef(
     return (
       <Box
         ref={ref as any}
+        {...props}
         sx={{
           ...styles.tab,
           flex: variant === variants.FULLWIDTH ? 1 : undefined,
           px: tabPadding[size].x,
           py: tabPadding[size].y,
-          ...(props as any)?.sx,
+          cursor: props?.disabled ? "not-allowed" : "pointer",
         }}
-        onClick={() => onClick(index)}
+        onClick={() => props?.disabled || onClick(index)}
       >
         <Text sx={{ fontSize: fontSizes[size] }} weight="bold">
           {label}

src/components/Tabs/Tabs.stories.tsx

@@ -28,7 +28,7 @@ export const Default = (args: any) => {
   return (
     <StorybookLayout {...args}>
       <Tabs {...args} activeTab={activeTab}>
-        <Tab index={0} onClick={setActiveTab} label="Tab 1" {...args} />
+        <Tab disabled index={0} onClick={setActiveTab} label="Tab 1" {...args} />
         <Tab index={1} onClick={setActiveTab} label="Tab 2" {...args} />
         <Tab index={2} onClick={setActiveTab} label="Tab 3" {...args} />
       </Tabs>

src/components/Tabs/styles.ts

@@ -24,6 +24,7 @@ const styles: Record<string, ThemeUIStyleObject> = {
     height: "100%",
     fontSize: "14px",
     transition: "left 0.2s linear",
+    textTransform: "none",
     "&:hover": {
       filter: "none",
     },
@@ -32,10 +33,10 @@ const styles: Record<string, ThemeUIStyleObject> = {
     borderRadius: "10px",
     px: "36px",
     py: "9px",
-    cursor: "pointer",
     background: "white3",
     color: "primaryButtonDisable",
     textAlign: "center",
+    border: 0,
     "&:hover": {
       filter: "20%",
     },

src/components/Tabs/types.ts

@@ -1,3 +1,5 @@
+import { BoxProps } from "theme-ui";
+
 export enum sizes {
   SMALL = "sm",
   MEDIUM = "md",
@@ -24,13 +26,14 @@ export enum variants {
 export type variantProps = `${variants}`;
 export type sizeProps = `${sizes}`;
 
-export interface TabProps {
+export interface TabProps extends Omit<BoxProps, "onClick"> {
   index: number;
   activeTab?: number;
   label: string;
   onClick: (activeTab: number) => void;
   size: sizeProps;
   variant: variantProps;
+  disabled?: boolean;
 }
 
 export interface TabsProps {

src/index.ts

@@ -37,6 +37,7 @@ export * from "./hooks";
 export * from "./widgets/Modal";
 export * from "./widgets/Navbar";
 export * from "./widgets/WalletModal";
+export * from "./widgets/NetworkModal";
 export * from "./widgets/MarketingModal";
 
 // Theme