@madie/madie-design-system 1.0.44 → 1.0.45
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/Tabs/Tab.js +9 -5
- package/components/Tabs/Tabs.stories.js +9 -0
- package/components/Tabs/index.js +6 -2
- package/dist/browser.js +1 -1
- package/dist/index.js +1 -1
- package/dist/react/index.js +1 -1
- package/dist/react/index.js.map +1 -1
- package/package.json +1 -1
- package/test/components/Tabs.test.js +41 -0
package/components/Tabs/Tab.js
CHANGED
|
@@ -4,13 +4,15 @@ import { Tab as MuiTab } from "@mui/material";
|
|
|
4
4
|
|
|
5
5
|
const typeA = {
|
|
6
6
|
color: "#fff",
|
|
7
|
+
borderRadius: "4px 4px 0px 0px !important",
|
|
8
|
+
backgroundColor: "#003366",
|
|
7
9
|
"&:hover":{
|
|
8
10
|
background: "#001F3D"
|
|
9
11
|
},
|
|
10
12
|
"&:focus":{
|
|
11
13
|
background: "#125496",
|
|
12
14
|
boxShadow: "0px 0px 0px 4px #CBE4FF",
|
|
13
|
-
}
|
|
15
|
+
},
|
|
14
16
|
};
|
|
15
17
|
const typeB = {
|
|
16
18
|
color: "#515151",
|
|
@@ -27,7 +29,7 @@ const typeC = {
|
|
|
27
29
|
color: "#333",
|
|
28
30
|
background: "#EDEDED",
|
|
29
31
|
"&:hover":{
|
|
30
|
-
|
|
32
|
+
background: "#FAFAFA",
|
|
31
33
|
color: "#515151"
|
|
32
34
|
},
|
|
33
35
|
"&:focus":{
|
|
@@ -37,7 +39,7 @@ const typeC = {
|
|
|
37
39
|
};
|
|
38
40
|
|
|
39
41
|
|
|
40
|
-
const Tab = ({ type, size, ...rest }) => {
|
|
42
|
+
const Tab = ({ type, orientation, size, ...rest }) => {
|
|
41
43
|
const baseStyle = {
|
|
42
44
|
height: size === 'standard' ? '48px' : '60px',
|
|
43
45
|
fontFamily: "Rubik, sans serif",
|
|
@@ -45,10 +47,11 @@ const Tab = ({ type, size, ...rest }) => {
|
|
|
45
47
|
padding: size === 'standard' ? "14.5px 24.5px" : "20.5px 24px",
|
|
46
48
|
textTransform: "none",
|
|
47
49
|
fontSize: "16px",
|
|
48
|
-
'
|
|
50
|
+
alignItems: orientation === 'vertical' && "flex-start",
|
|
51
|
+
'& .Mui-disabled': {
|
|
49
52
|
background: "#DDDDDD",
|
|
50
53
|
color: "#717171"
|
|
51
|
-
}
|
|
54
|
+
},
|
|
52
55
|
}
|
|
53
56
|
const style = ((type) => {
|
|
54
57
|
if (type === "A") {
|
|
@@ -71,6 +74,7 @@ const Tab = ({ type, size, ...rest }) => {
|
|
|
71
74
|
};
|
|
72
75
|
|
|
73
76
|
Tab.propTypes = {
|
|
77
|
+
orientation: PropTypes.string,
|
|
74
78
|
type: PropTypes.oneOf(["A", "B", "C", "D"]),
|
|
75
79
|
size: PropTypes.oneOf(["standard", "large"]),
|
|
76
80
|
};
|
|
@@ -79,6 +79,15 @@ export const TypeA = () => {
|
|
|
79
79
|
<Tab type="C" size="large" label="disabled" value={4} disabled/>
|
|
80
80
|
</Tabs>
|
|
81
81
|
</div>
|
|
82
|
+
<div>
|
|
83
|
+
Vertical Standard: C
|
|
84
|
+
<Tabs type="C" value={selected} onChange={handleChange} orientation="vertical">
|
|
85
|
+
<Tab type="C" size="standard" label="Item One" value={1} orientation="vertical"/>
|
|
86
|
+
<Tab type="C" size="standard" label="Item Two" value={2} orientation="vertical"/>
|
|
87
|
+
<Tab type="C" size="standard" label="Item Three"value={3} orientation="vertical"/>
|
|
88
|
+
<Tab type="C" size="standard" label="disabled" value={4} disabled orientation="vertical"/>
|
|
89
|
+
</Tabs>
|
|
90
|
+
</div>
|
|
82
91
|
<div style={{ width: "fit-content"}}>
|
|
83
92
|
Standard: D
|
|
84
93
|
<Tabs type="D" value={selected} onChange={handleChange}>
|
package/components/Tabs/index.js
CHANGED
|
@@ -3,8 +3,9 @@ import { Tabs as MuiTabs } from "@mui/material";
|
|
|
3
3
|
import React from "react";
|
|
4
4
|
|
|
5
5
|
const typeA = {
|
|
6
|
-
|
|
7
|
-
|
|
6
|
+
"& .MuiTabs-flexContainer": {
|
|
7
|
+
columnGap: "4px !important",
|
|
8
|
+
},
|
|
8
9
|
"& .MuiTabs-indicator": {
|
|
9
10
|
display: "none !important"
|
|
10
11
|
},
|
|
@@ -49,6 +50,7 @@ const Tabs = ({
|
|
|
49
50
|
fontFamily: "Rubik, sans Sarif",
|
|
50
51
|
fontWeight: 400,
|
|
51
52
|
lineHeight: 19,
|
|
53
|
+
backgroundColor: "transparent",
|
|
52
54
|
"& .Mui-selected": {
|
|
53
55
|
outline: "none",
|
|
54
56
|
fontWeight: 500,
|
|
@@ -78,6 +80,7 @@ const Tabs = ({
|
|
|
78
80
|
}
|
|
79
81
|
|
|
80
82
|
Tabs.propTypes = {
|
|
83
|
+
orientatin: PropTypes.string,
|
|
81
84
|
type: PropTypes.oneOf(["A", "B", "C", "D"]),
|
|
82
85
|
size: PropTypes.oneOf(["standard", "large"]),
|
|
83
86
|
ariaLabel: PropTypes.string,
|
|
@@ -88,6 +91,7 @@ Tabs.propTypes = {
|
|
|
88
91
|
};
|
|
89
92
|
|
|
90
93
|
Tabs.defaultProps = {
|
|
94
|
+
orientation: "horizontal",
|
|
91
95
|
type: "A",
|
|
92
96
|
size: "standard",
|
|
93
97
|
selected: null,
|