@bigbinary/neetoui 2.0.75 → 2.0.79
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 +2 -2
- package/stories/Avatar.stories.jsx +9 -0
- package/stories/Header.stories.jsx +15 -28
- package/stories/Layouts.stories.jsx +1 -5
- package/stories/MenuBar.stories.jsx +2 -6
- package/v2/formik.js +7 -7
- package/v2/index.js +7 -7
- package/v2/layouts.js +7 -7
- package/webpack.config.js +0 -11
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@bigbinary/neetoui",
|
|
3
|
-
"version": "2.0.
|
|
3
|
+
"version": "2.0.79",
|
|
4
4
|
"main": "./neetoui.js",
|
|
5
5
|
"author": "BigBinary",
|
|
6
6
|
"license": "MIT",
|
|
@@ -82,7 +82,7 @@
|
|
|
82
82
|
"react-toastify": "^8.0.2"
|
|
83
83
|
},
|
|
84
84
|
"dependencies": {
|
|
85
|
-
"@bigbinary/neeto-icons": "^1.7.
|
|
85
|
+
"@bigbinary/neeto-icons": "^1.7.4",
|
|
86
86
|
"@popperjs/core": "^2.9.2",
|
|
87
87
|
"@reach/auto-id": "^0.15.0",
|
|
88
88
|
"@tailwindcss/forms": "^0.3.2",
|
|
@@ -50,6 +50,15 @@ Xlarge.args = {
|
|
|
50
50
|
size: "xlarge",
|
|
51
51
|
};
|
|
52
52
|
|
|
53
|
+
export const WithCustomClassName = Template.bind({});
|
|
54
|
+
WithCustomClassName.storyName="With Custom className"
|
|
55
|
+
WithCustomClassName.args = {
|
|
56
|
+
onClick: { onClick },
|
|
57
|
+
user: { name: "neeto UI" },
|
|
58
|
+
size: "xlarge",
|
|
59
|
+
className: "cursor-pointer"
|
|
60
|
+
};
|
|
61
|
+
|
|
53
62
|
export const AllVariants = () => {
|
|
54
63
|
const imageUrl = "https://i.pravatar.cc/300";
|
|
55
64
|
const onClick = () => {
|
|
@@ -17,22 +17,6 @@ export default {
|
|
|
17
17
|
},
|
|
18
18
|
};
|
|
19
19
|
|
|
20
|
-
const SidebarHandleIcon = ({ size, color }) => {
|
|
21
|
-
return (
|
|
22
|
-
<svg
|
|
23
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
24
|
-
width={size}
|
|
25
|
-
height={size}
|
|
26
|
-
fill="none"
|
|
27
|
-
viewBox="0 0 24 24"
|
|
28
|
-
>
|
|
29
|
-
<path stroke={color} strokeWidth="1.5" d="M3 7.25L21 7.25"></path>
|
|
30
|
-
<path stroke={color} strokeWidth="1.5" d="M3 11.25L15 11.25"></path>
|
|
31
|
-
<path stroke={color} strokeWidth="1.5" d="M3 15.25L11 15.25"></path>
|
|
32
|
-
</svg>
|
|
33
|
-
);
|
|
34
|
-
};
|
|
35
|
-
|
|
36
20
|
const Template = (args) => (
|
|
37
21
|
<Router>
|
|
38
22
|
<Header {...args} />
|
|
@@ -41,18 +25,21 @@ const Template = (args) => (
|
|
|
41
25
|
|
|
42
26
|
export const BasicUsage = Template.bind({});
|
|
43
27
|
BasicUsage.args = {
|
|
44
|
-
title:
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
28
|
+
title: "Layouts",
|
|
29
|
+
actionBlock: <Button label="Primary Action" />,
|
|
30
|
+
};
|
|
31
|
+
|
|
32
|
+
export const WithMenuBarToggle = Template.bind({});
|
|
33
|
+
WithMenuBarToggle.args = {
|
|
34
|
+
title: "Layouts",
|
|
35
|
+
menuBarToggle: () => alert('clicked'),
|
|
36
|
+
actionBlock: <Button label="Primary Action" />,
|
|
37
|
+
};
|
|
38
|
+
|
|
39
|
+
export const WithBreadcrumbs = Template.bind({});
|
|
40
|
+
WithBreadcrumbs.args = {
|
|
41
|
+
title: "Layouts",
|
|
42
|
+
menuBarToggle: () => alert('clicked'),
|
|
56
43
|
actionBlock: <Button label="Primary Action" />,
|
|
57
44
|
breadcrumbs: [{ text: "Home", link: "/" }],
|
|
58
45
|
};
|
|
@@ -58,11 +58,7 @@ export const Page = () => {
|
|
|
58
58
|
<div className="flex">
|
|
59
59
|
<MenuBar
|
|
60
60
|
showMenu={showMenu}
|
|
61
|
-
title=
|
|
62
|
-
<div className="flex justify-between">
|
|
63
|
-
<Typography style="h2">Contacts</Typography>
|
|
64
|
-
</div>
|
|
65
|
-
}
|
|
61
|
+
title="Contacts"
|
|
66
62
|
>
|
|
67
63
|
<MenuBar.Block label="All" count={13} active />
|
|
68
64
|
<MenuBar.Block label="Users" count={2} />
|
|
@@ -31,11 +31,7 @@ export const MenuBarStory = () => {
|
|
|
31
31
|
<div className="flex">
|
|
32
32
|
<MenuBar
|
|
33
33
|
showMenu={showMenu}
|
|
34
|
-
title=
|
|
35
|
-
<div className="flex justify-between">
|
|
36
|
-
<Typography style="h2">Contacts</Typography>
|
|
37
|
-
</div>
|
|
38
|
-
}
|
|
34
|
+
title="Contacts"
|
|
39
35
|
>
|
|
40
36
|
<MenuBar.Block label="All" count={13} active />
|
|
41
37
|
<MenuBar.Block label="Users" count={2} />
|
|
@@ -109,7 +105,7 @@ export const MenuBarStory = () => {
|
|
|
109
105
|
/>
|
|
110
106
|
</MenuBar>
|
|
111
107
|
<Container>
|
|
112
|
-
<div className="
|
|
108
|
+
<div className="flex items-center justify-center w-full h-full">
|
|
113
109
|
<Button
|
|
114
110
|
label={`${showMenu ? "Close" : "Open"} MenuBar`}
|
|
115
111
|
onClick={() => setShowMenu(!showMenu)}
|