@logora/debate 0.3.5 → 0.3.6
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/package.json
CHANGED
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
import React, { useState } from "react";
|
|
2
|
+
import cx from "classnames";
|
|
3
|
+
import styles from "./tabs.stories.module.scss";
|
|
4
|
+
|
|
5
|
+
const TabsDemo = ({ tabs }) => {
|
|
6
|
+
const [activeTab, setActiveTab] = useState(0);
|
|
7
|
+
|
|
8
|
+
return (
|
|
9
|
+
<div>
|
|
10
|
+
<nav>
|
|
11
|
+
<ul className={styles.navTabs}>
|
|
12
|
+
{tabs.map((tab, index) => (
|
|
13
|
+
<li key={tab} className={styles.navItem}>
|
|
14
|
+
<div
|
|
15
|
+
className={cx(styles.navLink, {
|
|
16
|
+
[styles.active]: activeTab === index,
|
|
17
|
+
})}
|
|
18
|
+
onClick={() => setActiveTab(index)}
|
|
19
|
+
onKeyUp={(e) => {
|
|
20
|
+
if (e.key === "Enter" || e.key === " ") setActiveTab(index);
|
|
21
|
+
}}
|
|
22
|
+
role="tab"
|
|
23
|
+
tabIndex={0}
|
|
24
|
+
aria-selected={activeTab === index}
|
|
25
|
+
>
|
|
26
|
+
{tab}
|
|
27
|
+
</div>
|
|
28
|
+
</li>
|
|
29
|
+
))}
|
|
30
|
+
</ul>
|
|
31
|
+
</nav>
|
|
32
|
+
<div className={styles.tabContent}>
|
|
33
|
+
{tabs.map((tab, index) => (
|
|
34
|
+
<div
|
|
35
|
+
key={tab}
|
|
36
|
+
className={cx(styles.tabPane, { [styles.active]: activeTab === index })}
|
|
37
|
+
>
|
|
38
|
+
Contenu de l'onglet : <strong>{tab}</strong>
|
|
39
|
+
</div>
|
|
40
|
+
))}
|
|
41
|
+
</div>
|
|
42
|
+
</div>
|
|
43
|
+
);
|
|
44
|
+
};
|
|
45
|
+
|
|
46
|
+
const meta = {
|
|
47
|
+
title: "Styles/Tabs",
|
|
48
|
+
component: TabsDemo,
|
|
49
|
+
args: {
|
|
50
|
+
tabs: ["Onglet 1", "Onglet 2", "Onglet 3"],
|
|
51
|
+
},
|
|
52
|
+
argTypes: {
|
|
53
|
+
tabs: { control: "object" },
|
|
54
|
+
},
|
|
55
|
+
render: (args) => <TabsDemo {...args} />,
|
|
56
|
+
};
|
|
57
|
+
|
|
58
|
+
export default meta;
|
|
59
|
+
|
|
60
|
+
export const DefaultTabs = {};
|
|
61
|
+
|
|
62
|
+
export const TwoTabs = {
|
|
63
|
+
args: {
|
|
64
|
+
tabs: ["En cours", "Sélectionnés"],
|
|
65
|
+
},
|
|
66
|
+
};
|
|
@@ -25,10 +25,6 @@
|
|
|
25
25
|
display: none;
|
|
26
26
|
}
|
|
27
27
|
|
|
28
|
-
.navItem {
|
|
29
|
-
margin-bottom: -1px;
|
|
30
|
-
}
|
|
31
|
-
|
|
32
28
|
.navLink {
|
|
33
29
|
border: 1px solid transparent;
|
|
34
30
|
border-top-left-radius: theme.$box-border-radius;
|
|
@@ -56,7 +52,7 @@
|
|
|
56
52
|
|
|
57
53
|
.navLink {
|
|
58
54
|
display: block;
|
|
59
|
-
padding-bottom: spacing.$spacer-
|
|
55
|
+
padding-bottom: spacing.$spacer-sm;
|
|
60
56
|
|
|
61
57
|
&:hover,
|
|
62
58
|
&:focus {
|
|
@@ -99,22 +95,28 @@
|
|
|
99
95
|
outline: 0;
|
|
100
96
|
}
|
|
101
97
|
|
|
102
|
-
.navLink.active
|
|
103
|
-
.navLink:hover {
|
|
98
|
+
.navLink.active {
|
|
104
99
|
border: none !important;
|
|
105
100
|
color: theme.$text-primary !important;
|
|
106
101
|
background: transparent;
|
|
107
102
|
font-weight: theme.$font-weight-bold;
|
|
108
103
|
}
|
|
109
104
|
|
|
105
|
+
.navLink:hover {
|
|
106
|
+
border: none !important;
|
|
107
|
+
color: theme.$text-primary !important;
|
|
108
|
+
background: transparent;
|
|
109
|
+
}
|
|
110
|
+
|
|
110
111
|
.navLink::after {
|
|
111
112
|
content: "";
|
|
112
113
|
background-color: theme.$text-primary;
|
|
113
|
-
height:
|
|
114
|
+
height: 2px;
|
|
114
115
|
position: absolute;
|
|
115
116
|
width: 100%;
|
|
116
117
|
left: 0;
|
|
117
118
|
bottom: -1px;
|
|
119
|
+
z-index: 1;
|
|
118
120
|
transition: all 250ms ease 0s;
|
|
119
121
|
transform: scale(0);
|
|
120
122
|
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@use './tabs';
|