@abstraks-dev/ui-library 1.1.29 → 1.2.1
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/dist/__tests__/Footer.test.js +57 -22
- package/dist/components/Footer.js +24 -36
- package/dist/components/Header.js +1 -1
- package/dist/components/SideMenu.js +28 -0
- package/dist/index.js +112 -0
- package/dist/styles/footer.css +109 -17
- package/dist/styles/footer.css.map +1 -1
- package/dist/styles/footer.scss +114 -23
- package/dist/styles/header.css +4 -3
- package/dist/styles/header.css.map +1 -1
- package/dist/styles/header.scss +15 -16
- package/dist/styles/main.css +140 -21
- package/dist/styles/main.css.map +1 -1
- package/dist/styles/search.css +5 -1
- package/dist/styles/search.css.map +1 -1
- package/dist/styles/search.scss +4 -1
- package/dist/styles/side-menu.css +22 -0
- package/dist/styles/side-menu.css.map +1 -1
- package/dist/styles/side-menu.scss +27 -0
- package/package.json +1 -1
|
@@ -16,39 +16,32 @@ afterAll(() => {
|
|
|
16
16
|
describe('Footer', () => {
|
|
17
17
|
it('renders with default props', () => {
|
|
18
18
|
(0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Footer.default, {
|
|
19
|
-
|
|
19
|
+
navigationOne: /*#__PURE__*/_react.default.createElement("li", null, "NavItem")
|
|
20
20
|
}));
|
|
21
21
|
expect(_react2.screen.getByRole('contentinfo')).toBeInTheDocument();
|
|
22
22
|
expect(_react2.screen.getByText('NavItem')).toBeInTheDocument();
|
|
23
23
|
});
|
|
24
|
-
it('renders
|
|
25
|
-
// Mock useWindowSize to return mobile width
|
|
26
|
-
jest.spyOn(require('../utils/useWindowSize'), 'useWindowSize').mockReturnValue({
|
|
27
|
-
width: 500
|
|
28
|
-
});
|
|
24
|
+
it('renders navigation sections', () => {
|
|
29
25
|
(0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Footer.default, {
|
|
30
|
-
|
|
26
|
+
navigationOne: /*#__PURE__*/_react.default.createElement("li", null, "Section1"),
|
|
27
|
+
navigationTwo: /*#__PURE__*/_react.default.createElement("li", null, "Section2"),
|
|
28
|
+
navigationThree: /*#__PURE__*/_react.default.createElement("li", null, "Section3")
|
|
31
29
|
}));
|
|
32
|
-
expect(_react2.screen.
|
|
33
|
-
expect(_react2.screen.getByText('
|
|
30
|
+
expect(_react2.screen.getByText('Section1')).toBeInTheDocument();
|
|
31
|
+
expect(_react2.screen.getByText('Section2')).toBeInTheDocument();
|
|
32
|
+
expect(_react2.screen.getByText('Section3')).toBeInTheDocument();
|
|
34
33
|
});
|
|
35
|
-
it('renders
|
|
36
|
-
jest.spyOn(require('../utils/useWindowSize'), 'useWindowSize').mockReturnValue({
|
|
37
|
-
width: 1024
|
|
38
|
-
});
|
|
34
|
+
it('renders copyright when not authenticated', () => {
|
|
39
35
|
(0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Footer.default, {
|
|
40
|
-
|
|
36
|
+
hasAuth: false
|
|
41
37
|
}));
|
|
42
|
-
expect(_react2.screen.
|
|
43
|
-
expect(_react2.screen.getByText('DesktopNav')).toBeInTheDocument();
|
|
38
|
+
expect(_react2.screen.getByText(/© 2025 Abstraks. All rights reserved./)).toBeInTheDocument();
|
|
44
39
|
});
|
|
45
|
-
it('renders auth menu when hasAuth is true
|
|
46
|
-
|
|
47
|
-
width: 500
|
|
48
|
-
});
|
|
40
|
+
it('renders auth menu when hasAuth is true', () => {
|
|
41
|
+
const authMenuContent = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement("span", null, "Home")), /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement("span", null, "Search")), /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement("span", null, "Add")), /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement("span", null, "Profile")));
|
|
49
42
|
(0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Footer.default, {
|
|
50
43
|
hasAuth: true,
|
|
51
|
-
|
|
44
|
+
authMenu: authMenuContent
|
|
52
45
|
}));
|
|
53
46
|
expect(_react2.screen.getByLabelText('User navigation')).toBeInTheDocument();
|
|
54
47
|
expect(_react2.screen.getByText('Home')).toBeInTheDocument();
|
|
@@ -56,11 +49,53 @@ describe('Footer', () => {
|
|
|
56
49
|
expect(_react2.screen.getByText('Add')).toBeInTheDocument();
|
|
57
50
|
expect(_react2.screen.getByText('Profile')).toBeInTheDocument();
|
|
58
51
|
});
|
|
52
|
+
it('applies box shadow based on auth state and screen size', () => {
|
|
53
|
+
// Test desktop without auth (should have box shadow)
|
|
54
|
+
jest.spyOn(require('../utils/useWindowSize'), 'useWindowSize').mockReturnValue({
|
|
55
|
+
width: 1024
|
|
56
|
+
});
|
|
57
|
+
const {
|
|
58
|
+
rerender
|
|
59
|
+
} = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Footer.default, {
|
|
60
|
+
hasAuth: false
|
|
61
|
+
}));
|
|
62
|
+
expect(_react2.screen.getByRole('contentinfo')).toHaveStyle('box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1)');
|
|
63
|
+
|
|
64
|
+
// Test mobile with auth (should have box shadow)
|
|
65
|
+
jest.spyOn(require('../utils/useWindowSize'), 'useWindowSize').mockReturnValue({
|
|
66
|
+
width: 500
|
|
67
|
+
});
|
|
68
|
+
rerender(/*#__PURE__*/_react.default.createElement(_Footer.default, {
|
|
69
|
+
hasAuth: true
|
|
70
|
+
}));
|
|
71
|
+
expect(_react2.screen.getByRole('contentinfo')).toHaveStyle('box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1)');
|
|
72
|
+
});
|
|
59
73
|
it('applies custom aria-label', () => {
|
|
60
74
|
(0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Footer.default, {
|
|
61
|
-
|
|
75
|
+
navigationOne: /*#__PURE__*/_react.default.createElement("li", null, "Nav"),
|
|
62
76
|
"aria-label": "Custom Footer"
|
|
63
77
|
}));
|
|
64
78
|
expect(_react2.screen.getByRole('contentinfo')).toHaveAttribute('aria-label', 'Custom Footer');
|
|
65
79
|
});
|
|
80
|
+
it('renders with custom id', () => {
|
|
81
|
+
(0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Footer.default, {
|
|
82
|
+
id: "custom-footer",
|
|
83
|
+
navigationOne: /*#__PURE__*/_react.default.createElement("li", null, "Nav")
|
|
84
|
+
}));
|
|
85
|
+
expect(_react2.screen.getByRole('contentinfo')).toHaveAttribute('id', 'custom-footer');
|
|
86
|
+
});
|
|
87
|
+
it('renders without copyright when hasAuth is true', () => {
|
|
88
|
+
(0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Footer.default, {
|
|
89
|
+
hasAuth: true,
|
|
90
|
+
authMenu: /*#__PURE__*/_react.default.createElement("li", null, "Menu")
|
|
91
|
+
}));
|
|
92
|
+
expect(_react2.screen.queryByText(/© 2025 Abstraks. All rights reserved./)).not.toBeInTheDocument();
|
|
93
|
+
});
|
|
94
|
+
it('renders with custom className', () => {
|
|
95
|
+
(0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Footer.default, {
|
|
96
|
+
className: "custom-footer",
|
|
97
|
+
navigationOne: /*#__PURE__*/_react.default.createElement("li", null, "Nav")
|
|
98
|
+
}));
|
|
99
|
+
expect(_react2.screen.getByRole('contentinfo')).toHaveClass('footer custom-footer');
|
|
100
|
+
});
|
|
66
101
|
});
|
|
@@ -8,7 +8,6 @@ var _react = _interopRequireWildcard(require("react"));
|
|
|
8
8
|
var _propTypes = require("prop-types");
|
|
9
9
|
var _useWindowSize = require("../utils/useWindowSize");
|
|
10
10
|
var _ssrSafeId = require("../utils/ssrSafeId");
|
|
11
|
-
var _Animation = require("./Animation");
|
|
12
11
|
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
|
|
13
12
|
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
|
14
13
|
/**
|
|
@@ -20,12 +19,15 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : f
|
|
|
20
19
|
const Footer = exports.Footer = /*#__PURE__*/(0, _react.forwardRef)(({
|
|
21
20
|
id,
|
|
22
21
|
className = '',
|
|
23
|
-
|
|
22
|
+
navigationOne = null,
|
|
23
|
+
navigationTwo = null,
|
|
24
|
+
navigationThree = null,
|
|
24
25
|
signInLink = null,
|
|
25
26
|
signUpLink = null,
|
|
26
27
|
avatarSrc = null,
|
|
27
28
|
ellipsesList = [],
|
|
28
29
|
hasAuth = false,
|
|
30
|
+
authMenu = null,
|
|
29
31
|
'aria-label': ariaLabel = 'Footer',
|
|
30
32
|
componentName = 'footer',
|
|
31
33
|
additionalClassName = '',
|
|
@@ -35,54 +37,40 @@ const Footer = exports.Footer = /*#__PURE__*/(0, _react.forwardRef)(({
|
|
|
35
37
|
const generateId = (0, _ssrSafeId.useStableId)('footer');
|
|
36
38
|
const finalId = id || generateId();
|
|
37
39
|
const finalClassName = className || additionalClassName;
|
|
40
|
+
const shouldApplyBoxShadow = !hasAuth && size.width > 768 || hasAuth && size.width < 768;
|
|
38
41
|
return /*#__PURE__*/_react.default.createElement("footer", _extends({
|
|
39
42
|
ref: ref,
|
|
40
43
|
id: finalId,
|
|
41
44
|
className: `${componentName} ${finalClassName}`,
|
|
42
45
|
"data-testid": componentName,
|
|
43
46
|
role: "contentinfo",
|
|
44
|
-
"aria-label": ariaLabel
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
},
|
|
49
|
-
/*#__PURE__*/
|
|
50
|
-
// mobile
|
|
51
|
-
_react.default.createElement("div", {
|
|
47
|
+
"aria-label": ariaLabel,
|
|
48
|
+
style: shouldApplyBoxShadow ? {
|
|
49
|
+
boxShadow: '0 -2px 4px rgba(0, 0, 0, 0.1)'
|
|
50
|
+
} : undefined
|
|
51
|
+
}, restProps), /*#__PURE__*/_react.default.createElement("div", {
|
|
52
52
|
className: "navigation",
|
|
53
53
|
role: "navigation",
|
|
54
|
-
"aria-label": "
|
|
55
|
-
}, !hasAuth ? /*#__PURE__*/_react.default.createElement("ul", {
|
|
54
|
+
"aria-label": "footer navigation"
|
|
55
|
+
}, !hasAuth ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("ul", {
|
|
56
56
|
className: "unordered-list",
|
|
57
57
|
role: "list"
|
|
58
|
-
}, navigation) : /*#__PURE__*/_react.default.createElement("ul", {
|
|
59
|
-
className: "unordered-list auth-menu",
|
|
60
|
-
role: "list",
|
|
61
|
-
"aria-label": "User navigation"
|
|
62
58
|
}, /*#__PURE__*/_react.default.createElement("li", {
|
|
63
|
-
className: "list-item",
|
|
59
|
+
className: "list-item list-one",
|
|
64
60
|
role: "listitem"
|
|
65
|
-
},
|
|
66
|
-
className: "list-item",
|
|
61
|
+
}, navigationOne), /*#__PURE__*/_react.default.createElement("li", {
|
|
62
|
+
className: "list-item list-two",
|
|
67
63
|
role: "listitem"
|
|
68
|
-
},
|
|
69
|
-
className: "list-item",
|
|
64
|
+
}, navigationTwo), /*#__PURE__*/_react.default.createElement("li", {
|
|
65
|
+
className: "list-item list-three",
|
|
70
66
|
role: "listitem"
|
|
71
|
-
},
|
|
72
|
-
className: "
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
className: "navigation",
|
|
79
|
-
"data-testid": "navigation",
|
|
80
|
-
role: "navigation",
|
|
81
|
-
"aria-label": "Desktop footer navigation"
|
|
82
|
-
}, /*#__PURE__*/_react.default.createElement("ul", {
|
|
83
|
-
className: "unordered-list",
|
|
84
|
-
role: "list"
|
|
85
|
-
}, navigation))));
|
|
67
|
+
}, navigationThree)), /*#__PURE__*/_react.default.createElement("div", {
|
|
68
|
+
className: "bottom"
|
|
69
|
+
}, "\xA9 ", new Date().getFullYear(), " Abstraks. All rights reserved.")) : /*#__PURE__*/_react.default.createElement("ul", {
|
|
70
|
+
className: "unordered-list auth-menu",
|
|
71
|
+
role: "list",
|
|
72
|
+
"aria-label": "User navigation"
|
|
73
|
+
}, authMenu)));
|
|
86
74
|
});
|
|
87
75
|
Footer.displayName = 'Footer';
|
|
88
76
|
Footer.propTypes = {
|
|
@@ -208,7 +208,7 @@ const Header = exports.Header = /*#__PURE__*/(0, _react.forwardRef)(({
|
|
|
208
208
|
onKeyDown: handleKeyDown
|
|
209
209
|
}, restProps), /*#__PURE__*/_react.default.createElement("div", {
|
|
210
210
|
className: isMobile ? 'container-mobile' : 'container-large'
|
|
211
|
-
}, logo, hasAuth && search, isMobile ? /*#__PURE__*/_react.default.createElement(_SideMenu.SideMenu, {
|
|
211
|
+
}, logo, hasAuth && !isMobile && search, isMobile ? /*#__PURE__*/_react.default.createElement(_SideMenu.SideMenu, {
|
|
212
212
|
direction: "vertical",
|
|
213
213
|
position: "top",
|
|
214
214
|
isOpen: isMenuOpen,
|
|
@@ -84,6 +84,34 @@ const SideMenu = exports.SideMenu = /*#__PURE__*/(0, _react.forwardRef)(({
|
|
|
84
84
|
const generateId = (0, _ssrSafeId.useStableId)('side-menu');
|
|
85
85
|
const finalId = id || testId || generateId();
|
|
86
86
|
const finalClassName = className || additionalClassName;
|
|
87
|
+
|
|
88
|
+
// Handle body scroll locking when menu is open
|
|
89
|
+
(0, _react.useEffect)(() => {
|
|
90
|
+
if (typeof document !== 'undefined') {
|
|
91
|
+
if (isOpen) {
|
|
92
|
+
// Store current scroll position
|
|
93
|
+
const scrollY = window.scrollY;
|
|
94
|
+
document.body.style.top = `-${scrollY}px`;
|
|
95
|
+
document.body.classList.add('side-menu-open');
|
|
96
|
+
} else {
|
|
97
|
+
document.body.classList.remove('side-menu-open');
|
|
98
|
+
// Restore scroll position
|
|
99
|
+
const scrollY = document.body.style.top;
|
|
100
|
+
document.body.style.top = '';
|
|
101
|
+
if (scrollY) {
|
|
102
|
+
window.scrollTo(0, parseInt(scrollY || '0', 10));
|
|
103
|
+
}
|
|
104
|
+
}
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
// Cleanup function
|
|
108
|
+
return () => {
|
|
109
|
+
if (typeof document !== 'undefined') {
|
|
110
|
+
document.body.classList.remove('side-menu-open');
|
|
111
|
+
document.body.style.top = '';
|
|
112
|
+
}
|
|
113
|
+
};
|
|
114
|
+
}, [isOpen]);
|
|
87
115
|
const handleToggle = (0, _react.useCallback)(() => {
|
|
88
116
|
if (isOpen) {
|
|
89
117
|
onClose();
|
package/dist/index.js
CHANGED
|
@@ -31,21 +31,47 @@ var _exportNames = {
|
|
|
31
31
|
Tabs: true,
|
|
32
32
|
TextArea: true,
|
|
33
33
|
TextInput: true,
|
|
34
|
+
AccountBox: true,
|
|
35
|
+
AccountCircle: true,
|
|
34
36
|
ArrowIcon: true,
|
|
35
37
|
ArrowRight: true,
|
|
38
|
+
BookOpen: true,
|
|
36
39
|
CameraIcon: true,
|
|
37
40
|
CheckCircle: true,
|
|
38
41
|
ChevronDown: true,
|
|
39
42
|
Close: true,
|
|
43
|
+
Comment: true,
|
|
40
44
|
EditSquare: true,
|
|
41
45
|
Ellipses: true,
|
|
46
|
+
Explore: true,
|
|
47
|
+
Filter: true,
|
|
48
|
+
Group: true,
|
|
49
|
+
GroupReview: true,
|
|
42
50
|
Hamburger: true,
|
|
51
|
+
Heart: true,
|
|
52
|
+
Home: true,
|
|
43
53
|
LoadingSpinner: true,
|
|
54
|
+
LogOut: true,
|
|
55
|
+
Magnify: true,
|
|
56
|
+
News: true,
|
|
44
57
|
PlusCircle: true,
|
|
58
|
+
Review: true,
|
|
45
59
|
SaveIcon: true,
|
|
46
60
|
TrashX: true,
|
|
47
61
|
CaretDown: true
|
|
48
62
|
};
|
|
63
|
+
Object.defineProperty(exports, "AccountBox", {
|
|
64
|
+
enumerable: true,
|
|
65
|
+
get: function () {
|
|
66
|
+
return _AccountBox.AccountBox;
|
|
67
|
+
}
|
|
68
|
+
});
|
|
69
|
+
Object.defineProperty(exports, "AccountCircle", {
|
|
70
|
+
enumerable: true,
|
|
71
|
+
get: function () {
|
|
72
|
+
return _AccountCircle.AccountCircle;
|
|
73
|
+
}
|
|
74
|
+
});
|
|
49
75
|
Object.defineProperty(exports, "Alert", {
|
|
50
76
|
enumerable: true,
|
|
51
77
|
get: function () {
|
|
@@ -94,6 +120,12 @@ Object.defineProperty(exports, "Avatar", {
|
|
|
94
120
|
return _Avatar.default;
|
|
95
121
|
}
|
|
96
122
|
});
|
|
123
|
+
Object.defineProperty(exports, "BookOpen", {
|
|
124
|
+
enumerable: true,
|
|
125
|
+
get: function () {
|
|
126
|
+
return _BookOpen.BookOpen;
|
|
127
|
+
}
|
|
128
|
+
});
|
|
97
129
|
Object.defineProperty(exports, "Button", {
|
|
98
130
|
enumerable: true,
|
|
99
131
|
get: function () {
|
|
@@ -142,6 +174,12 @@ Object.defineProperty(exports, "Close", {
|
|
|
142
174
|
return _Close.Close;
|
|
143
175
|
}
|
|
144
176
|
});
|
|
177
|
+
Object.defineProperty(exports, "Comment", {
|
|
178
|
+
enumerable: true,
|
|
179
|
+
get: function () {
|
|
180
|
+
return _Comment.Comment;
|
|
181
|
+
}
|
|
182
|
+
});
|
|
145
183
|
Object.defineProperty(exports, "Crud", {
|
|
146
184
|
enumerable: true,
|
|
147
185
|
get: function () {
|
|
@@ -172,18 +210,42 @@ Object.defineProperty(exports, "Error", {
|
|
|
172
210
|
return _Error.default;
|
|
173
211
|
}
|
|
174
212
|
});
|
|
213
|
+
Object.defineProperty(exports, "Explore", {
|
|
214
|
+
enumerable: true,
|
|
215
|
+
get: function () {
|
|
216
|
+
return _Explore.Explore;
|
|
217
|
+
}
|
|
218
|
+
});
|
|
175
219
|
Object.defineProperty(exports, "FileInput", {
|
|
176
220
|
enumerable: true,
|
|
177
221
|
get: function () {
|
|
178
222
|
return _FileInput.default;
|
|
179
223
|
}
|
|
180
224
|
});
|
|
225
|
+
Object.defineProperty(exports, "Filter", {
|
|
226
|
+
enumerable: true,
|
|
227
|
+
get: function () {
|
|
228
|
+
return _Filter.Filter;
|
|
229
|
+
}
|
|
230
|
+
});
|
|
181
231
|
Object.defineProperty(exports, "Form", {
|
|
182
232
|
enumerable: true,
|
|
183
233
|
get: function () {
|
|
184
234
|
return _Form.default;
|
|
185
235
|
}
|
|
186
236
|
});
|
|
237
|
+
Object.defineProperty(exports, "Group", {
|
|
238
|
+
enumerable: true,
|
|
239
|
+
get: function () {
|
|
240
|
+
return _Group.Group;
|
|
241
|
+
}
|
|
242
|
+
});
|
|
243
|
+
Object.defineProperty(exports, "GroupReview", {
|
|
244
|
+
enumerable: true,
|
|
245
|
+
get: function () {
|
|
246
|
+
return _GroupReview.GroupReview;
|
|
247
|
+
}
|
|
248
|
+
});
|
|
187
249
|
Object.defineProperty(exports, "Hamburger", {
|
|
188
250
|
enumerable: true,
|
|
189
251
|
get: function () {
|
|
@@ -202,12 +264,24 @@ Object.defineProperty(exports, "Heading", {
|
|
|
202
264
|
return _Heading.default;
|
|
203
265
|
}
|
|
204
266
|
});
|
|
267
|
+
Object.defineProperty(exports, "Heart", {
|
|
268
|
+
enumerable: true,
|
|
269
|
+
get: function () {
|
|
270
|
+
return _Heart.Heart;
|
|
271
|
+
}
|
|
272
|
+
});
|
|
205
273
|
Object.defineProperty(exports, "Hero", {
|
|
206
274
|
enumerable: true,
|
|
207
275
|
get: function () {
|
|
208
276
|
return _Hero.default;
|
|
209
277
|
}
|
|
210
278
|
});
|
|
279
|
+
Object.defineProperty(exports, "Home", {
|
|
280
|
+
enumerable: true,
|
|
281
|
+
get: function () {
|
|
282
|
+
return _Home.Home;
|
|
283
|
+
}
|
|
284
|
+
});
|
|
211
285
|
Object.defineProperty(exports, "Label", {
|
|
212
286
|
enumerable: true,
|
|
213
287
|
get: function () {
|
|
@@ -226,6 +300,24 @@ Object.defineProperty(exports, "LoadingSpinner", {
|
|
|
226
300
|
return _LoadingSpinner.LoadingSpinner;
|
|
227
301
|
}
|
|
228
302
|
});
|
|
303
|
+
Object.defineProperty(exports, "LogOut", {
|
|
304
|
+
enumerable: true,
|
|
305
|
+
get: function () {
|
|
306
|
+
return _LogOut.LogOut;
|
|
307
|
+
}
|
|
308
|
+
});
|
|
309
|
+
Object.defineProperty(exports, "Magnify", {
|
|
310
|
+
enumerable: true,
|
|
311
|
+
get: function () {
|
|
312
|
+
return _Magnify.Magnify;
|
|
313
|
+
}
|
|
314
|
+
});
|
|
315
|
+
Object.defineProperty(exports, "News", {
|
|
316
|
+
enumerable: true,
|
|
317
|
+
get: function () {
|
|
318
|
+
return _News.News;
|
|
319
|
+
}
|
|
320
|
+
});
|
|
229
321
|
Object.defineProperty(exports, "Paragraph", {
|
|
230
322
|
enumerable: true,
|
|
231
323
|
get: function () {
|
|
@@ -244,6 +336,12 @@ Object.defineProperty(exports, "Radio", {
|
|
|
244
336
|
return _Radio.Radio;
|
|
245
337
|
}
|
|
246
338
|
});
|
|
339
|
+
Object.defineProperty(exports, "Review", {
|
|
340
|
+
enumerable: true,
|
|
341
|
+
get: function () {
|
|
342
|
+
return _Review.Review;
|
|
343
|
+
}
|
|
344
|
+
});
|
|
247
345
|
Object.defineProperty(exports, "SaveIcon", {
|
|
248
346
|
enumerable: true,
|
|
249
347
|
get: function () {
|
|
@@ -343,17 +441,31 @@ var _SideMenu = require("./components/SideMenu");
|
|
|
343
441
|
var _Tabs = require("./components/Tabs");
|
|
344
442
|
var _TextArea = require("./components/TextArea");
|
|
345
443
|
var _TextInput = require("./components/TextInput");
|
|
444
|
+
var _AccountBox = require("./icons/AccountBox");
|
|
445
|
+
var _AccountCircle = require("./icons/AccountCircle");
|
|
346
446
|
var _ArrowIcon = require("./icons/ArrowIcon");
|
|
347
447
|
var _ArrowRight = require("./icons/ArrowRight");
|
|
448
|
+
var _BookOpen = require("./icons/BookOpen");
|
|
348
449
|
var _Camera = require("./icons/Camera");
|
|
349
450
|
var _CheckCircle = require("./icons/CheckCircle");
|
|
350
451
|
var _ChevronDown = require("./icons/ChevronDown");
|
|
351
452
|
var _Close = require("./icons/Close");
|
|
453
|
+
var _Comment = require("./icons/Comment");
|
|
352
454
|
var _EditSquare = require("./icons/EditSquare");
|
|
353
455
|
var _Ellipses = require("./icons/Ellipses");
|
|
456
|
+
var _Explore = require("./icons/Explore");
|
|
457
|
+
var _Filter = require("./icons/Filter");
|
|
458
|
+
var _Group = require("./icons/Group");
|
|
459
|
+
var _GroupReview = require("./icons/GroupReview");
|
|
354
460
|
var _Hamburger = require("./icons/Hamburger");
|
|
461
|
+
var _Heart = require("./icons/Heart");
|
|
462
|
+
var _Home = require("./icons/Home");
|
|
355
463
|
var _LoadingSpinner = require("./icons/LoadingSpinner");
|
|
464
|
+
var _LogOut = require("./icons/LogOut");
|
|
465
|
+
var _Magnify = require("./icons/Magnify");
|
|
466
|
+
var _News = require("./icons/News");
|
|
356
467
|
var _PlusCircle = require("./icons/PlusCircle");
|
|
468
|
+
var _Review = require("./icons/Review");
|
|
357
469
|
var _SaveIcon = require("./icons/SaveIcon");
|
|
358
470
|
var _TrashX = require("./icons/TrashX");
|
|
359
471
|
var _CaretDown = _interopRequireDefault(require("./icons/CaretDown"));
|
package/dist/styles/footer.css
CHANGED
|
@@ -115,51 +115,143 @@
|
|
|
115
115
|
align-items: center;
|
|
116
116
|
flex-direction: row;
|
|
117
117
|
padding: 15px;
|
|
118
|
+
/* Absolute positioning - reliably pins footer to bottom */
|
|
119
|
+
position: absolute;
|
|
120
|
+
bottom: 0;
|
|
121
|
+
left: 0;
|
|
122
|
+
right: 0;
|
|
123
|
+
background: #fff;
|
|
124
|
+
box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
|
|
125
|
+
/* Ensure footer stays above other content */
|
|
126
|
+
z-index: 200;
|
|
118
127
|
}
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
justify-content: flex-end;
|
|
123
|
-
}
|
|
128
|
+
.footer .navigation {
|
|
129
|
+
display: flex;
|
|
130
|
+
flex-direction: column;
|
|
124
131
|
}
|
|
125
132
|
.footer .navigation .unordered-list {
|
|
126
133
|
display: flex;
|
|
127
134
|
flex-direction: column;
|
|
135
|
+
width: 100%;
|
|
128
136
|
}
|
|
129
137
|
@media (min-width: 768px) {
|
|
130
138
|
.footer .navigation .unordered-list {
|
|
131
|
-
display:
|
|
139
|
+
display: flex;
|
|
132
140
|
flex-direction: row;
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
padding: 0;
|
|
136
|
-
margin: 0;
|
|
141
|
+
justify-content: space-between;
|
|
142
|
+
width: 50%;
|
|
137
143
|
}
|
|
138
144
|
}
|
|
139
145
|
.footer .navigation .unordered-list.auth-menu {
|
|
140
|
-
border-top: 1px solid #e9ecef;
|
|
141
146
|
flex-direction: row;
|
|
142
147
|
justify-content: space-between;
|
|
148
|
+
display: flex;
|
|
149
|
+
}
|
|
150
|
+
@media (min-width: 768px) {
|
|
151
|
+
.footer .navigation .unordered-list.auth-menu {
|
|
152
|
+
display: none;
|
|
153
|
+
}
|
|
143
154
|
}
|
|
144
155
|
.footer .navigation .unordered-list.auth-menu .list-item {
|
|
145
156
|
display: inline-flex;
|
|
146
|
-
|
|
157
|
+
align-items: center;
|
|
158
|
+
}
|
|
159
|
+
@media (min-width: 768px) {
|
|
160
|
+
.footer .navigation .unordered-list.auth-menu .list-item {
|
|
161
|
+
width: 33.3%;
|
|
162
|
+
}
|
|
163
|
+
}
|
|
164
|
+
.footer .navigation .bottom {
|
|
165
|
+
display: flex;
|
|
166
|
+
flex-direction: row;
|
|
167
|
+
margin-top: 10px;
|
|
168
|
+
font-size: 0.875rem;
|
|
169
|
+
color: #6c757d;
|
|
147
170
|
}
|
|
148
|
-
.footer .navigation .
|
|
171
|
+
.footer .navigation .list-item {
|
|
149
172
|
display: flex;
|
|
150
173
|
}
|
|
151
174
|
@media (min-width: 768px) {
|
|
152
|
-
.footer .navigation .
|
|
175
|
+
.footer .navigation .list-item {
|
|
153
176
|
display: inline-flex;
|
|
154
|
-
padding: 0
|
|
177
|
+
padding: 10px 0;
|
|
155
178
|
}
|
|
156
179
|
}
|
|
157
|
-
.footer .
|
|
180
|
+
.footer .anchor {
|
|
158
181
|
color: #6c757d;
|
|
159
182
|
text-decoration: none;
|
|
160
183
|
}
|
|
161
|
-
.footer .
|
|
184
|
+
.footer .anchor:hover {
|
|
162
185
|
color: #333;
|
|
163
186
|
}
|
|
164
187
|
|
|
188
|
+
/* Global styles to support absolute positioned footer */
|
|
189
|
+
/*
|
|
190
|
+
* Usage: Apply these classes to your layout:
|
|
191
|
+
* - Add 'sticky-footer-layout' class to your main container
|
|
192
|
+
* - Add 'main-content' class to your content wrapper
|
|
193
|
+
* - The footer will be absolutely positioned at the bottom
|
|
194
|
+
*/
|
|
195
|
+
html.sticky-footer-layout,
|
|
196
|
+
body.sticky-footer-layout {
|
|
197
|
+
height: 100%;
|
|
198
|
+
margin: 0;
|
|
199
|
+
padding: 0;
|
|
200
|
+
/* Force proper height on mobile */
|
|
201
|
+
}
|
|
202
|
+
@media (max-width: 767px) {
|
|
203
|
+
html.sticky-footer-layout,
|
|
204
|
+
body.sticky-footer-layout {
|
|
205
|
+
height: 100%;
|
|
206
|
+
min-height: 100vh;
|
|
207
|
+
margin: 0;
|
|
208
|
+
padding: 0;
|
|
209
|
+
}
|
|
210
|
+
}
|
|
211
|
+
|
|
212
|
+
.sticky-footer-layout {
|
|
213
|
+
position: relative;
|
|
214
|
+
min-height: 100vh;
|
|
215
|
+
margin: 0;
|
|
216
|
+
padding: 0;
|
|
217
|
+
/* Add bottom padding to prevent content hiding behind footer */
|
|
218
|
+
padding-bottom: 80px; /* Adjust based on footer height */
|
|
219
|
+
/* Ensure layout works on all screen sizes */
|
|
220
|
+
/* Footer positioning within the layout */
|
|
221
|
+
}
|
|
222
|
+
@media (max-width: 767px) {
|
|
223
|
+
.sticky-footer-layout {
|
|
224
|
+
position: relative;
|
|
225
|
+
min-height: 100vh;
|
|
226
|
+
padding-bottom: 100px; /* Slightly more padding on mobile */
|
|
227
|
+
}
|
|
228
|
+
}
|
|
229
|
+
.sticky-footer-layout .main-content {
|
|
230
|
+
width: 100%;
|
|
231
|
+
padding-bottom: 20px; /* Additional content padding */
|
|
232
|
+
/* Mobile-specific main content */
|
|
233
|
+
}
|
|
234
|
+
@media (max-width: 767px) {
|
|
235
|
+
.sticky-footer-layout .main-content {
|
|
236
|
+
width: 100%;
|
|
237
|
+
padding-bottom: 20px;
|
|
238
|
+
}
|
|
239
|
+
}
|
|
240
|
+
.sticky-footer-layout .footer {
|
|
241
|
+
position: absolute;
|
|
242
|
+
bottom: 0;
|
|
243
|
+
left: 0;
|
|
244
|
+
right: 0;
|
|
245
|
+
/* Mobile-specific footer */
|
|
246
|
+
}
|
|
247
|
+
@media (max-width: 767px) {
|
|
248
|
+
.sticky-footer-layout .footer {
|
|
249
|
+
position: absolute;
|
|
250
|
+
bottom: 0;
|
|
251
|
+
left: 0;
|
|
252
|
+
right: 0;
|
|
253
|
+
width: 100%;
|
|
254
|
+
}
|
|
255
|
+
}
|
|
256
|
+
|
|
165
257
|
/*# sourceMappingURL=footer.css.map */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sourceRoot":"","sources":["../../src/styles/_variables.scss","../../src/styles/footer.scss"],"names":[],"mappings":"AAgSA;EAJE;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;;;AC1RF;EACC;EACA;EACA;EACA
|
|
1
|
+
{"version":3,"sourceRoot":"","sources":["../../src/styles/_variables.scss","../../src/styles/footer.scss"],"names":[],"mappings":"AAgSA;EAJE;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;;;AC1RF;EACC;EACA;EACA;EACA;AAEA;EACA;EACA;EACA;EACA;EACA;EACA;AAEA;EACA,SDyDgB;;ACvDhB;EACC;EACA;;AAEA;EACC;EACA;EACA;;AAEA;EALD;IAME;IACA;IACA;IACA;;;AAGD;EACC;EACA;EACA;;AAEA;EALD;IAME;;;AAGD;EACC;EACA;;AAEA;EAJD;IAKE;;;AAMJ;EACC;EACA;EACA;EACA;EACA,OD6BQ;;AC1BT;EACC;;AAEA;EAHD;IAIE;IACA;;;AAKH;EACC,ODeS;ECdT;;AAEA;EACC,ODnDe;;;ACwDlB;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAMA;AAAA;EAEC;EACA;EACA;AAEA;;AACA;EAPD;AAAA;IAQE;IACA;IACA;IACA;;;;AAIF;EACC;EACA;EACA;EACA;AAEA;EACA;AAEA;AAkBA;;AAjBA;EAVD;IAWE;IACA;IACA;;;AAGD;EACC;EACA;AAEA;;AACA;EALD;IAME;IACA;;;AAKF;EACC;EACA;EACA;EACA;AAEA;;AACA;EAPD;IAQE;IACA;IACA;IACA;IACA","file":"footer.css"}
|