@madie/madie-design-system 1.0.42 → 1.0.45

package/components/Tabs/Tab.js

@@ -2,25 +2,86 @@ import React from "react";
 import PropTypes from "prop-types";
 import { Tab as MuiTab } from "@mui/material";
 
-const Tab = ({ href, ...rest }) => {
+const typeA = {
+    color: "#fff",
+    borderRadius: "4px 4px 0px 0px !important",
+    backgroundColor: "#003366",
+    "&:hover":{
+        background: "#001F3D"
+    },
+    "&:focus":{
+        background: "#125496",
+        boxShadow: "0px 0px 0px 4px #CBE4FF",
+    },
+};
+const typeB = {
+    color: "#515151",
+    "&:hover":{
+        background: "#F2F9FF",
+        color: "#242424"
+    },
+    "&:focus":{
+        boxShadow: "0px 0px 0px 4px #CBE4FF",
+        background: "#fff"
+    }
+};
+const typeC = {
+    color: "#333",
+    background: "#EDEDED",
+    "&:hover":{
+        background: "#FAFAFA",
+        color: "#515151"
+    },
+    "&:focus":{
+        boxShadow: "0px 0px 0px 4px #CBE4FF",
+        background: "#fff"
+    }
+};
+
+
+const Tab = ({ type, orientation, size, ...rest }) => {
+    const baseStyle = {
+        height: size === 'standard' ? '48px' : '60px',
+        fontFamily: "Rubik, sans serif",
+        fontWeight: 400,
+        padding: size === 'standard' ? "14.5px 24.5px" : "20.5px 24px",
+        textTransform: "none",
+        fontSize: "16px",
+        alignItems: orientation === 'vertical' && "flex-start",
+        '& .Mui-disabled': {
+            background: "#DDDDDD",
+            color: "#717171"
+        },
+    }
+    const style = ((type) => {
+        if (type === "A") {
+            return  { ...baseStyle, ...typeA}
+        }
+        if (type === "B" || type === "D") {
+            return  { ...baseStyle, ...typeB, }
+        }
+        if (type === "C") {
+            return  { ...baseStyle, ...typeC}
+        }
+    })(type)
     return (
-        <MuiTab
-            component="a"
-            disableRipple
-            onClick={(e) => {
-                e.preventDefault();
-                if (window.history && href) {
-                    window.history.replaceState({}, document.title, href);
-                }
-            }}
-            className="qpp-c-tabs__item"
+        <MuiTab            
+            tabIndex={0}
+            sx={style}
             {...rest}
         />
     );
 };
 
 Tab.propTypes = {
-    href: PropTypes.string,
+    orientation: PropTypes.string,
+    type: PropTypes.oneOf(["A", "B", "C", "D"]),
+    size: PropTypes.oneOf(["standard", "large"]),
+};
+Tab.defaultProps = {
+    type: "A",
+    size: "standard",
+    onChange: null,
 };
 
 export default Tab;

package/components/Tabs/Tabs.stories.js

@@ -2,8 +2,8 @@ import React, { useState } from "react";
 import { withKnobs } from "@storybook/addon-knobs";
 
 import Tabs from "./index";
-import TabPanel from "./TabPanel";
-import Button from "../Button";
+import Tab from './Tab';
+
 
 export default {
     title: "Tabs",
@@ -11,120 +11,101 @@ export default {
     decorators: [withKnobs],
 };
 
-export const Default = () => {
-    return (
-        <div className="qpp-u-padding--12">
-            <Tabs>
-                <TabPanel
-                    id="summary"
-                    tab="Summary"
-                    className="my-summary-class"
-                >
-                    The Bill of Rights is the first ten amendments to the United
-                    States Constitution.
-                </TabPanel>
-                <TabPanel id="preamble" tab="Preamble">
-                    We the People of the United States, in Order to form a more
-                    perfect Union, establish Justice, insure domestic
-                    Tranquility, provide for the common defence, promote the
-                    general Welfare, and secure the Blessings of Liberty to
-                    ourselves and our Posterity, do ordain and establish this
-                    Constitution for the United States of America.
-                </TabPanel>
-                <TabPanel id="amendments" tab="Amendments">
-                    <h2 className="ds-h4">Bill of Rights</h2>
-                    <ol className="ds-c-list">
-                        <li>Freedoms, Petitions, Assembly</li>
-                        <li>Right to bear arms</li>
-                        <li>Quartering of soldiers</li>
-                        <li>Search and arrest</li>
-                        <li>Rights in criminal cases</li>
-                        <li>Right to a fair trial</li>
-                        <li>Rights in civil cases</li>
-                        <li>Bail, fines, punishment</li>
-                        <li>Rights retained by the People</li>
-                        <li>States’ rights</li>
-                    </ol>
+export const TypeA = () => {
+    // state, setState
+    const [selected, setSelected] = useState(1)
 
-                    <h2 className="ds-h4">Later Amendments</h2>
-                    <ol className="ds-c-list" start="11">
-                        <li>Lawsuits against states</li>
-                        <li>Presidential elections</li>
-                        <li>Abolition of slavery</li>
-                        <li>Civil rights</li>
-                        <li>Black suffrage</li>
-                        <li>Income taxes</li>
-                        <li>Senatorial elections</li>
-                        <li>Prohibition of liquor</li>
-                        <li>Women’s suffrage</li>
-                        <li>Terms of office</li>
-                        <li>Repeal of Prohibition</li>
-                        <li>Term Limits for the Presidency</li>
-                        <li>Washington, D.C., suffrage</li>
-                        <li>Abolition of poll taxes</li>
-                        <li>Presidential succession</li>
-                        <li>18-year-old suffrage</li>
-                        <li>Congressional pay raises</li>
-                    </ol>
 
-                    <h2 className="ds-h4">Even Later Amendments</h2>
-                    <ol className="ds-c-list">
-                        <li>Thou must count to three</li>
-                        <li>
-                            Three shall be the number of the counting and the
-                            number of the counting shall be three
-                        </li>
-                        <li>Four shalt thou not count</li>
-                        <li>
-                            Neither shalt thou count two, excepting that thou
-                            then proceedeth to three
-                        </li>
-                        <li>Five is right out</li>
-                    </ol>
-                </TabPanel>
-                <TabPanel id="disabled" tab="Disabled" disabled>
-                    You should not see this.
-                </TabPanel>
-            </Tabs>
-        </div>
-    );
-};
+    const handleChange = (e,v) => {
+        // 1,2,3
+        setSelected(v);
+    };
+
 
-export const ControlledTabs = () => {
-    const [selectedId, setSelectedId] = useState("preamble");
     return (
-        <div className="qpp-u-padding--12">
-            <Tabs selected={selectedId} onChange={(id) => setSelectedId(id)}>
-                <TabPanel
-                    id="summary"
-                    tab="Summary"
-                    className="my-summary-class"
-                >
-                    The Bill of Rights is the first ten amendments to the United
-                    States Constitution.
-                </TabPanel>
-                <TabPanel id="preamble" tab="Preamble">
-                    We the People of the United States, in Order to form a more
-                    perfect Union, establish Justice, insure domestic
-                    Tranquility, provide for the common defence, promote the
-                    general Welfare, and secure the Blessings of Liberty to
-                    ourselves and our Posterity, do ordain and establish this
-                    Constitution for the United States of America.
-                </TabPanel>
-                <TabPanel id="amendments" tab="Amendments">
-                    All of the amendments
-                    <br />
-                    <Button
-                        className="qpp-u-margin-top--16"
-                        onClick={() => setSelectedId("summary")}
-                    >
-                        Go to Summary
-                    </Button>
-                </TabPanel>
-                <TabPanel id="disabled" tab="Disabled" disabled>
-                    You should not see this.
-                </TabPanel>
-            </Tabs>
+        <div style={{margin: "25px"}}>
+            <div style={{ width: "fit-content"}}>
+                Standard: A
+                <Tabs type="A" size="standard" value={selected} onChange={handleChange}>
+                <Tab type="A" size="standard" label="Item One" value={1}/>
+                <Tab type="A" size="standard" label="Item Two" value={2}/>
+                <Tab type="A" size="standard" label="Item Three" value={3}/>
+                <Tab type="A" size="standard" label="disabled" value={4} disabled/>
+                </Tabs>
+            </div>
+            <div style={{ width: "fit-content"}}>
+                Large: A
+                <Tabs type="A" size="large" value={selected} onChange={handleChange}>
+                <Tab type="A" size="large" label="Item One" value={1}/>
+                <Tab type="A" size="large" label="Item Two" value={2}/>
+                <Tab type="A" size="large" label="Item Three" value={3}/>
+                <Tab type="A" size="large" label="disabled" value={4} disabled/>
+                </Tabs>
+            </div>
+            <div style={{ width: "fit-content"}}>
+                Standard: B
+                <Tabs type="B" size="standard" value={selected} onChange={handleChange}>
+                    <Tab type="B" size="standard" label="Item One" value={1} />
+                    <Tab type="B" size="standard" label="Item Two" value={2} />
+                    <Tab type="B" size="standard" label="Item Three" value={3} />
+                    <Tab type="B" size="standard" label="disabled" value={4} disabled/>
+                </Tabs>
+            </div>
+            
+            <div style={{ width: "fit-content"}}>
+                Large: B
+                <Tabs type="B" size="large" value={selected} onChange={handleChange}>
+                    <Tab type="B" size="large" label="Item One" value={1} />
+                    <Tab type="B" size="large" label="Item Two" value={2} />
+                    <Tab type="B" size="large" label="Item Three" value={3} />
+                    <Tab type="B" size="large" label="disabled" value={4} disabled/>
+                </Tabs>
+            </div>
+            <div style={{ width: "fit-content"}}>
+                Standard: C
+                <Tabs type="C" value={selected} onChange={handleChange}>
+                    <Tab type="C" size="standard" label="Item One" value={1} />
+                    <Tab type="C" size="standard" label="Item Two" value={2} />
+                    <Tab type="C" size="standard" label="Item Three"value={3} />
+                    <Tab type="C" size="standard" label="disabled" value={4} disabled/>
+                </Tabs>
+            </div>
+            <div style={{ width: "fit-content" }}>
+                Large: C
+                <Tabs type="C" value={selected} onChange={handleChange}>
+                    <Tab type="C" size="large" label="Item One" value={1} />
+                    <Tab type="C" size="large" label="Item Two" value={2} />
+                    <Tab type="C" size="large" label="Item Three"value={3} />
+                    <Tab type="C" size="large" label="disabled" value={4} disabled/>
+                </Tabs>
+            </div>
+            <div>
+                Vertical Standard: C
+                <Tabs type="C" value={selected} onChange={handleChange} orientation="vertical">
+                    <Tab type="C" size="standard" label="Item One" value={1} orientation="vertical"/>
+                    <Tab type="C" size="standard" label="Item Two" value={2} orientation="vertical"/>
+                    <Tab type="C" size="standard" label="Item Three"value={3} orientation="vertical"/>
+                    <Tab type="C" size="standard" label="disabled" value={4} disabled orientation="vertical"/>
+                </Tabs>
+            </div>
+            <div style={{ width: "fit-content"}}>
+                Standard: D
+                <Tabs type="D" value={selected} onChange={handleChange}>
+                    <Tab type="D" size="standard" label="Item One" value={1} />
+                    <Tab type="D" size="standard" label="Item Two" value={2} />
+                    <Tab type="D" size="standard" label="Item Three"value={3} />
+                    <Tab type="D" size="standard" label="disabled" value={4} disabled/>
+                </Tabs>
+            </div>
+            <div style={{ width: "fit-content" }}>
+                Large: D
+                <Tabs type="D" value={selected} onChange={handleChange}>
+                    <Tab type="D" size="large" label="Item One" value={1} />
+                    <Tab type="D" size="large" label="Item Two" value={2} />
+                    <Tab type="D" size="large" label="Item Three"value={3} />
+                    <Tab type="D" size="large" label="disabled" value={4} disabled/>
+                </Tabs>
+            </div>
         </div>
     );
 };

package/components/Tabs/index.js

@@ -1,87 +1,88 @@
-import React, { useEffect, useState } from "react";
 import PropTypes from "prop-types";
 import { Tabs as MuiTabs } from "@mui/material";
-import TabPanel from "./TabPanel";
-import LinkTab from "./Tab";
+import React from "react";
 
-const isTabPanel = (child) => child?.type === TabPanel;
+const typeA = {
+    "& .MuiTabs-flexContainer": {
+        columnGap: "4px !important",
+    },
+    "& .MuiTabs-indicator": {
+        display: "none !important"
+      },
+};
+
+const typeB = {
+    backgroundColor: "#FFF",
+    color: "#515151",
+    "& .MuiTabs-indicator": {
+        backgroundColor:"#209FA6",
+        height: "6px"
+      },
+};
 
-const getPanelChildren = (children) => {
-    return React.Children.toArray(children).filter(isTabPanel);
+const typeC = {
+    color:"333",
+    "& .MuiTabs-indicator": {
+        backgroundColor:"#209FA6",
+        height: "100%",
+        width: "6px !important",
+        left: 0,
+      },
 };
 
+const typeD = {
+    backgroundColor: "#FFF",
+    color: "#515151",
+    "& .MuiTabs-indicator": {
+        backgroundColor:"#209FA6",
+        height: "6px",
+        top: 0
+      },
+}
+
 const Tabs = ({
-    children,
-    onChange,
-    selected,
-    defaultSelectedId,
-    ariaLabel,
+    type,
+    size,
+    ...rest
 }) => {
-    const [value, setValue] = useState(defaultSelectedId || selected);
-
-    useEffect(() => {
-        if (selected) {
-            setValue(selected);
+    const baseStyle = {
+        outline: "none",
+        fontFamily: "Rubik, sans Sarif",
+        fontWeight: 400,
+        lineHeight: 19,
+        backgroundColor: "transparent",
+        "& .Mui-selected": {
+            outline: "none",
+            fontWeight: 500,
+            color: "#333 !important",
+            backgroundColor: "#fff",
+          },
+    }
+    const style = ((type) => {
+        if (type === "A") {
+            return  { ...baseStyle, ...typeA}
         }
-    }, [selected]);
-
-    if (!children) return null;
-
-    const handleChange = (event, newValue) => {
-        if (onChange) {
-            onChange(tabList[newValue]?.id, event);
+        if (type === "B") {
+            return  { ...baseStyle, ...typeB}
         }
-        if (setValue) {
-            setValue(tabList[newValue]?.id);
+        if (type === "C") {
+            return  { ...baseStyle, ...typeC}
         }
-    };
-
-    const renderChildren = () => {
-        return React.Children.map(children, (child, index) => {
-            if (isTabPanel(child)) {
-                return React.cloneElement(child, { index, value: tabIndex });
-            }
-            return child;
-        });
-    };
-
-    const panels = getPanelChildren(children);
-
-    const tabList = panels.map((panel) => {
-        const { id, tab, tabHref, disabled } = panel?.props || {};
-        return { tab, tabHref, disabled, id };
-    });
-
-    const foundIndex = tabList.findIndex(({ id }) => id === value);
-
-    const tabIndex = foundIndex >= 0 ? foundIndex : 0;
-
-    return (
-        <>
-            <div className="qpp-c-tabs qpp-c-tabs--mui">
-                <MuiTabs
-                    value={tabIndex}
-                    onChange={handleChange}
-                    aria-label={ariaLabel}
-                >
-                    {tabList.map(({ tab, tabHref, disabled, id }, index) => (
-                        <LinkTab
-                            index={index}
-                            key={`link-tab-${tab}`}
-                            label={tab}
-                            href={tabHref}
-                            disabled={disabled}
-                            id={`qpp-c-tabs__item--${id}`}
-                        />
-                    ))}
-                </MuiTabs>
-            </div>
-            {renderChildren()}
-        </>
-    );
-};
+        if (type === "D") {
+            return  { ...baseStyle, ...typeD}
+        }
+    })(type)
+    return (<MuiTabs
+        disableRipple
+        sx={style}
+        {...rest}
+    />)
+}
 
 Tabs.propTypes = {
+    orientatin: PropTypes.string,
+    type: PropTypes.oneOf(["A", "B", "C", "D"]),
+    size: PropTypes.oneOf(["standard", "large"]),
     ariaLabel: PropTypes.string,
     selected: PropTypes.string,
     defaultSelectedId: PropTypes.string,
@@ -90,7 +91,9 @@ Tabs.propTypes = {
 };
 
 Tabs.defaultProps = {
-    ariaLabel: "qpp tabs",
+    orientation: "horizontal",
+    type: "A",
+    size: "standard",
     selected: null,
     defaultSelectedId: null,
     onChange: null,

package/components/index.js

@@ -22,6 +22,7 @@ import Select from "./Select";
 import Spinner from "./UnwrappedSpinner";
 import TabPanel from "./Tabs/TabPanel";
 import Tabs from "./Tabs/index";
+import Tab from "./Tabs/Tab";
 import TextField from "./TextField";
 import TextArea from './TextArea';
 import Tooltip from "./Tooltip";
@@ -141,6 +142,7 @@ export {
     Spinner,
     TabPanel,
     Tabs,
+    Tab,
     TextButton,
     TextInput,
     TextField,