shared-design-system 1.34.0 → 1.35.0
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.
|
@@ -1,15 +1,23 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import React, { useState, useEffect } from 'react';
|
|
3
|
+
// Standard Enterprise Breakpoints
|
|
4
|
+
const BREAKPOINTS = {
|
|
5
|
+
sm: 576,
|
|
6
|
+
md: 768,
|
|
7
|
+
lg: 992,
|
|
8
|
+
xl: 1200
|
|
9
|
+
};
|
|
3
10
|
export const Row = ({ gutter = 16, align = 'top', justify = 'start', children, style = {}, ...props }) => {
|
|
4
11
|
const horizontalGutter = Array.isArray(gutter) ? gutter[0] : gutter;
|
|
5
|
-
const verticalGutter = Array.isArray(gutter) ? gutter[1] : 0;
|
|
12
|
+
const verticalGutter = Array.isArray(gutter) ? gutter[1] : (Array.isArray(gutter) ? 0 : gutter);
|
|
6
13
|
const rowStyle = {
|
|
7
14
|
display: 'flex',
|
|
8
15
|
flexWrap: 'wrap',
|
|
9
|
-
//
|
|
16
|
+
// Apply negative margins to offset column paddings
|
|
10
17
|
marginLeft: -horizontalGutter / 2,
|
|
11
18
|
marginRight: -horizontalGutter / 2,
|
|
12
|
-
|
|
19
|
+
marginTop: -verticalGutter / 2,
|
|
20
|
+
marginBottom: -verticalGutter / 2,
|
|
13
21
|
alignItems: align === 'middle' ? 'center' : align === 'top' ? 'flex-start' : align === 'bottom' ? 'flex-end' : align,
|
|
14
22
|
justifyContent: justify === 'start' ? 'flex-start' : justify === 'end' ? 'flex-end' : justify,
|
|
15
23
|
...style,
|
|
@@ -26,28 +34,29 @@ export const Row = ({ gutter = 16, align = 'top', justify = 'start', children, s
|
|
|
26
34
|
};
|
|
27
35
|
export const Col = ({ span, xs, sm, md, lg, xl, offset = 0, children, gutter = [0, 0], style = {}, ...props }) => {
|
|
28
36
|
const [horizontalGutter, verticalGutter] = gutter;
|
|
29
|
-
// Track window width for responsive calculation
|
|
30
37
|
const [windowWidth, setWindowWidth] = useState(typeof window !== 'undefined' ? window.innerWidth : 1200);
|
|
31
38
|
useEffect(() => {
|
|
32
39
|
const handleResize = () => setWindowWidth(window.innerWidth);
|
|
33
40
|
window.addEventListener('resize', handleResize);
|
|
34
41
|
return () => window.removeEventListener('resize', handleResize);
|
|
35
42
|
}, []);
|
|
36
|
-
|
|
43
|
+
/**
|
|
44
|
+
* Logic: Find the explicitly defined breakpoint for the current width.
|
|
45
|
+
* If not found, use 'span'. This allows span={6} md={24} to work as:
|
|
46
|
+
* 24 on medium, 6 on everything else (including large/desktop).
|
|
47
|
+
*/
|
|
37
48
|
const getResponsiveSpan = () => {
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
if (
|
|
41
|
-
|
|
42
|
-
if (
|
|
43
|
-
|
|
44
|
-
if (
|
|
45
|
-
|
|
46
|
-
if (
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
s = xl;
|
|
50
|
-
return s;
|
|
49
|
+
if (xl !== undefined && windowWidth >= BREAKPOINTS.xl)
|
|
50
|
+
return xl;
|
|
51
|
+
if (lg !== undefined && windowWidth >= BREAKPOINTS.lg)
|
|
52
|
+
return lg;
|
|
53
|
+
if (md !== undefined && windowWidth >= BREAKPOINTS.md)
|
|
54
|
+
return md;
|
|
55
|
+
if (sm !== undefined && windowWidth >= BREAKPOINTS.sm)
|
|
56
|
+
return sm;
|
|
57
|
+
if (xs !== undefined && windowWidth >= 0)
|
|
58
|
+
return xs;
|
|
59
|
+
return span || 24;
|
|
51
60
|
};
|
|
52
61
|
const currentSpan = getResponsiveSpan();
|
|
53
62
|
const getWidth = (s) => `${(s / 24) * 100}%`;
|
|
@@ -60,7 +69,7 @@ export const Col = ({ span, xs, sm, md, lg, xl, offset = 0, children, gutter = [
|
|
|
60
69
|
maxWidth: getWidth(currentSpan),
|
|
61
70
|
marginLeft: offset ? getWidth(offset) : undefined,
|
|
62
71
|
boxSizing: 'border-box',
|
|
63
|
-
transition: 'all 0.3s ease',
|
|
72
|
+
transition: 'all 0.3s ease',
|
|
64
73
|
...style,
|
|
65
74
|
};
|
|
66
75
|
return (_jsx("div", { style: colStyle, className: `ds-col ds-col-${currentSpan}`, ...props, children: children }));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Grid.js","sourceRoot":"","sources":["../../../src/components/Grid.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"Grid.js","sourceRoot":"","sources":["../../../src/components/Grid.tsx"],"names":[],"mappings":"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"}
|