jvetrau-ds 0.1.22 → 0.1.23
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/layouts/base/base.cjs +6 -1
- package/layouts/base/base.cjs.map +1 -1
- package/layouts/base/base.css +17 -6
- package/layouts/base/base.d.cts +3 -1
- package/layouts/base/base.d.ts +3 -1
- package/layouts/base/base.js +6 -1
- package/layouts/base/base.js.map +1 -1
- package/layouts/base/index.d.cts +1 -1
- package/layouts/base/index.d.ts +1 -1
- package/package.json +1 -1
- package/patterns/masthead/masthead.css +4 -1
- package/styles.css +21 -7
package/layouts/base/base.cjs
CHANGED
|
@@ -11,6 +11,7 @@ var LayoutFoundation__default = /*#__PURE__*/_interopDefault(LayoutFoundation);
|
|
|
11
11
|
|
|
12
12
|
const LayoutBase = ({
|
|
13
13
|
width = "default",
|
|
14
|
+
mainAlign = "start",
|
|
14
15
|
header,
|
|
15
16
|
footer,
|
|
16
17
|
children,
|
|
@@ -22,6 +23,10 @@ const LayoutBase = ({
|
|
|
22
23
|
"layout-base__content--wide": width === "wide",
|
|
23
24
|
"layout-base__content--full": width === "full"
|
|
24
25
|
});
|
|
26
|
+
const mainClasses = classnames.classnames("layout-base__main", "", {
|
|
27
|
+
"layout-base__main--align-center": mainAlign === "center",
|
|
28
|
+
"layout-base__main--align-end": mainAlign === "end"
|
|
29
|
+
});
|
|
25
30
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
26
31
|
LayoutFoundation__default.default,
|
|
27
32
|
{
|
|
@@ -30,7 +35,7 @@ const LayoutBase = ({
|
|
|
30
35
|
...props,
|
|
31
36
|
children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "layout-base", children: [
|
|
32
37
|
header && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "layout-base__header", children: header }),
|
|
33
|
-
/* @__PURE__ */ jsxRuntime.jsx("main", { className:
|
|
38
|
+
/* @__PURE__ */ jsxRuntime.jsx("main", { className: mainClasses, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: contentClasses, children }) }),
|
|
34
39
|
footer && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "layout-base__footer", children: footer })
|
|
35
40
|
] })
|
|
36
41
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/layouts/base/base.tsx"],"names":["classnames","jsx","LayoutFoundation","jsxs"],"mappings":";;;;;;;;;;;
|
|
1
|
+
{"version":3,"sources":["../../../src/layouts/base/base.tsx"],"names":["classnames","jsx","LayoutFoundation","jsxs"],"mappings":";;;;;;;;;;;AAoBA,MAAM,aAAwC,CAAC;AAAA,EAC7C,KAAA,GAAQ,SAAA;AAAA,EACR,SAAA,GAAY,OAAA;AAAA,EACZ,MAAA;AAAA,EACA,MAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,cAAA,GAAiBA,qBAAA,CAAW,sBAAA,EAAwB,EAAA,EAAI;AAAA,IAC5D,gCAAgC,KAAA,KAAU,QAAA;AAAA,IAC1C,8BAA8B,KAAA,KAAU,MAAA;AAAA,IACxC,8BAA8B,KAAA,KAAU;AAAA,GACzC,CAAA;AAED,EAAA,MAAM,WAAA,GAAcA,qBAAA,CAAW,mBAAA,EAAqB,EAAA,EAAI;AAAA,IACtD,mCAAmC,SAAA,KAAc,QAAA;AAAA,IACjD,gCAAgC,SAAA,KAAc;AAAA,GAC/C,CAAA;AAED,EAAA,uBACEC,cAAA;AAAA,IAACC,iCAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAM,MAAA;AAAA,MACN,SAAA;AAAA,MACC,GAAG,KAAA;AAAA,MAEJ,QAAA,kBAAAC,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,aAAA,EACZ,QAAA,EAAA;AAAA,QAAA,MAAA,oBACCF,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,qBAAA,EACZ,QAAA,EAAA,MAAA,EACH,CAAA;AAAA,wBAGFA,cAAA,CAAC,UAAK,SAAA,EAAW,WAAA,EACf,yCAAC,KAAA,EAAA,EAAI,SAAA,EAAW,cAAA,EACb,QAAA,EACH,CAAA,EACF,CAAA;AAAA,QAEC,MAAA,oBACCA,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,uBACZ,QAAA,EAAA,MAAA,EACH;AAAA,OAAA,EAEJ;AAAA;AAAA,GACF;AAEJ,CAAA;AAEA,IAAO,YAAA,GAAQ","file":"base.cjs","sourcesContent":["import React from 'react';\nimport LayoutFoundation, {\n type LayoutFoundationWidth,\n} from '../foundation';\nimport './base.css';\nimport { classnames } from '../../components/helpers/classnames';\n\nexport type LayoutBaseMainAlign =\n | 'start'\n | 'center'\n | 'end';\n\nexport interface LayoutBaseProps\n extends React.HTMLAttributes<HTMLDivElement> {\n width?: LayoutFoundationWidth;\n mainAlign?: LayoutBaseMainAlign;\n header?: React.ReactNode;\n footer?: React.ReactNode;\n}\n\nconst LayoutBase: React.FC<LayoutBaseProps> = ({\n width = 'default',\n mainAlign = 'start',\n header,\n footer,\n children,\n className = '',\n ...props\n}) => {\n const contentClasses = classnames('layout-base__content', '', {\n 'layout-base__content--narrow': width === 'narrow',\n 'layout-base__content--wide': width === 'wide',\n 'layout-base__content--full': width === 'full',\n });\n\n const mainClasses = classnames('layout-base__main', '', {\n 'layout-base__main--align-center': mainAlign === 'center',\n 'layout-base__main--align-end': mainAlign === 'end',\n });\n\n return (\n <LayoutFoundation\n width=\"full\"\n className={className}\n {...props}\n >\n <div className=\"layout-base\">\n {header && (\n <div className=\"layout-base__header\">\n {header}\n </div>\n )}\n\n <main className={mainClasses}>\n <div className={contentClasses}>\n {children}\n </div>\n </main>\n\n {footer && (\n <div className=\"layout-base__footer\">\n {footer}\n </div>\n )}\n </div>\n </LayoutFoundation>\n );\n};\n\nexport default LayoutBase;"]}
|
package/layouts/base/base.css
CHANGED
|
@@ -8,10 +8,13 @@
|
|
|
8
8
|
flex-direction: column;
|
|
9
9
|
|
|
10
10
|
width: 100%;
|
|
11
|
-
min-height:
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
11
|
+
min-height:
|
|
12
|
+
calc(
|
|
13
|
+
100dvh -
|
|
14
|
+
(
|
|
15
|
+
var(--layout-foundation-padding-vert) * 2
|
|
16
|
+
)
|
|
17
|
+
);
|
|
15
18
|
|
|
16
19
|
/* border */
|
|
17
20
|
|
|
@@ -42,13 +45,13 @@
|
|
|
42
45
|
|
|
43
46
|
/* size */
|
|
44
47
|
display: flex;
|
|
48
|
+
flex: 1;
|
|
45
49
|
justify-content: center;
|
|
50
|
+
align-items: flex-start;
|
|
46
51
|
|
|
47
52
|
width: 100%;
|
|
48
53
|
min-width: 0;
|
|
49
54
|
|
|
50
|
-
flex: 1;
|
|
51
|
-
|
|
52
55
|
padding:
|
|
53
56
|
var(--layout-foundation-padding-vert)
|
|
54
57
|
var(--layout-foundation-padding-horz);
|
|
@@ -62,6 +65,14 @@
|
|
|
62
65
|
/* motion */
|
|
63
66
|
}
|
|
64
67
|
|
|
68
|
+
.layout-base__main--align-center {
|
|
69
|
+
align-items: center;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
.layout-base__main--align-end {
|
|
73
|
+
align-items: flex-end;
|
|
74
|
+
}
|
|
75
|
+
|
|
65
76
|
.layout-base__content {
|
|
66
77
|
/* color */
|
|
67
78
|
|
package/layouts/base/base.d.cts
CHANGED
|
@@ -1,11 +1,13 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { LayoutFoundationWidth } from '../foundation/foundation.cjs';
|
|
3
3
|
|
|
4
|
+
type LayoutBaseMainAlign = 'start' | 'center' | 'end';
|
|
4
5
|
interface LayoutBaseProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
5
6
|
width?: LayoutFoundationWidth;
|
|
7
|
+
mainAlign?: LayoutBaseMainAlign;
|
|
6
8
|
header?: React.ReactNode;
|
|
7
9
|
footer?: React.ReactNode;
|
|
8
10
|
}
|
|
9
11
|
declare const LayoutBase: React.FC<LayoutBaseProps>;
|
|
10
12
|
|
|
11
|
-
export { type LayoutBaseProps, LayoutBase as default };
|
|
13
|
+
export { type LayoutBaseMainAlign, type LayoutBaseProps, LayoutBase as default };
|
package/layouts/base/base.d.ts
CHANGED
|
@@ -1,11 +1,13 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { LayoutFoundationWidth } from '../foundation/foundation.js';
|
|
3
3
|
|
|
4
|
+
type LayoutBaseMainAlign = 'start' | 'center' | 'end';
|
|
4
5
|
interface LayoutBaseProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
5
6
|
width?: LayoutFoundationWidth;
|
|
7
|
+
mainAlign?: LayoutBaseMainAlign;
|
|
6
8
|
header?: React.ReactNode;
|
|
7
9
|
footer?: React.ReactNode;
|
|
8
10
|
}
|
|
9
11
|
declare const LayoutBase: React.FC<LayoutBaseProps>;
|
|
10
12
|
|
|
11
|
-
export { type LayoutBaseProps, LayoutBase as default };
|
|
13
|
+
export { type LayoutBaseMainAlign, type LayoutBaseProps, LayoutBase as default };
|
package/layouts/base/base.js
CHANGED
|
@@ -5,6 +5,7 @@ import { classnames } from '../../components/helpers/classnames';
|
|
|
5
5
|
|
|
6
6
|
const LayoutBase = ({
|
|
7
7
|
width = "default",
|
|
8
|
+
mainAlign = "start",
|
|
8
9
|
header,
|
|
9
10
|
footer,
|
|
10
11
|
children,
|
|
@@ -16,6 +17,10 @@ const LayoutBase = ({
|
|
|
16
17
|
"layout-base__content--wide": width === "wide",
|
|
17
18
|
"layout-base__content--full": width === "full"
|
|
18
19
|
});
|
|
20
|
+
const mainClasses = classnames("layout-base__main", "", {
|
|
21
|
+
"layout-base__main--align-center": mainAlign === "center",
|
|
22
|
+
"layout-base__main--align-end": mainAlign === "end"
|
|
23
|
+
});
|
|
19
24
|
return /* @__PURE__ */ jsx(
|
|
20
25
|
LayoutFoundation,
|
|
21
26
|
{
|
|
@@ -24,7 +29,7 @@ const LayoutBase = ({
|
|
|
24
29
|
...props,
|
|
25
30
|
children: /* @__PURE__ */ jsxs("div", { className: "layout-base", children: [
|
|
26
31
|
header && /* @__PURE__ */ jsx("div", { className: "layout-base__header", children: header }),
|
|
27
|
-
/* @__PURE__ */ jsx("main", { className:
|
|
32
|
+
/* @__PURE__ */ jsx("main", { className: mainClasses, children: /* @__PURE__ */ jsx("div", { className: contentClasses, children }) }),
|
|
28
33
|
footer && /* @__PURE__ */ jsx("div", { className: "layout-base__footer", children: footer })
|
|
29
34
|
] })
|
|
30
35
|
}
|
package/layouts/base/base.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/layouts/base/base.tsx"],"names":[],"mappings":";;;;;
|
|
1
|
+
{"version":3,"sources":["../../../src/layouts/base/base.tsx"],"names":[],"mappings":";;;;;AAoBA,MAAM,aAAwC,CAAC;AAAA,EAC7C,KAAA,GAAQ,SAAA;AAAA,EACR,SAAA,GAAY,OAAA;AAAA,EACZ,MAAA;AAAA,EACA,MAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,cAAA,GAAiB,UAAA,CAAW,sBAAA,EAAwB,EAAA,EAAI;AAAA,IAC5D,gCAAgC,KAAA,KAAU,QAAA;AAAA,IAC1C,8BAA8B,KAAA,KAAU,MAAA;AAAA,IACxC,8BAA8B,KAAA,KAAU;AAAA,GACzC,CAAA;AAED,EAAA,MAAM,WAAA,GAAc,UAAA,CAAW,mBAAA,EAAqB,EAAA,EAAI;AAAA,IACtD,mCAAmC,SAAA,KAAc,QAAA;AAAA,IACjD,gCAAgC,SAAA,KAAc;AAAA,GAC/C,CAAA;AAED,EAAA,uBACE,GAAA;AAAA,IAAC,gBAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAM,MAAA;AAAA,MACN,SAAA;AAAA,MACC,GAAG,KAAA;AAAA,MAEJ,QAAA,kBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,aAAA,EACZ,QAAA,EAAA;AAAA,QAAA,MAAA,oBACC,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,qBAAA,EACZ,QAAA,EAAA,MAAA,EACH,CAAA;AAAA,wBAGF,GAAA,CAAC,UAAK,SAAA,EAAW,WAAA,EACf,8BAAC,KAAA,EAAA,EAAI,SAAA,EAAW,cAAA,EACb,QAAA,EACH,CAAA,EACF,CAAA;AAAA,QAEC,MAAA,oBACC,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,uBACZ,QAAA,EAAA,MAAA,EACH;AAAA,OAAA,EAEJ;AAAA;AAAA,GACF;AAEJ,CAAA;AAEA,IAAO,YAAA,GAAQ","file":"base.js","sourcesContent":["import React from 'react';\nimport LayoutFoundation, {\n type LayoutFoundationWidth,\n} from '../foundation';\nimport './base.css';\nimport { classnames } from '../../components/helpers/classnames';\n\nexport type LayoutBaseMainAlign =\n | 'start'\n | 'center'\n | 'end';\n\nexport interface LayoutBaseProps\n extends React.HTMLAttributes<HTMLDivElement> {\n width?: LayoutFoundationWidth;\n mainAlign?: LayoutBaseMainAlign;\n header?: React.ReactNode;\n footer?: React.ReactNode;\n}\n\nconst LayoutBase: React.FC<LayoutBaseProps> = ({\n width = 'default',\n mainAlign = 'start',\n header,\n footer,\n children,\n className = '',\n ...props\n}) => {\n const contentClasses = classnames('layout-base__content', '', {\n 'layout-base__content--narrow': width === 'narrow',\n 'layout-base__content--wide': width === 'wide',\n 'layout-base__content--full': width === 'full',\n });\n\n const mainClasses = classnames('layout-base__main', '', {\n 'layout-base__main--align-center': mainAlign === 'center',\n 'layout-base__main--align-end': mainAlign === 'end',\n });\n\n return (\n <LayoutFoundation\n width=\"full\"\n className={className}\n {...props}\n >\n <div className=\"layout-base\">\n {header && (\n <div className=\"layout-base__header\">\n {header}\n </div>\n )}\n\n <main className={mainClasses}>\n <div className={contentClasses}>\n {children}\n </div>\n </main>\n\n {footer && (\n <div className=\"layout-base__footer\">\n {footer}\n </div>\n )}\n </div>\n </LayoutFoundation>\n );\n};\n\nexport default LayoutBase;"]}
|
package/layouts/base/index.d.cts
CHANGED
package/layouts/base/index.d.ts
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
.masthead {
|
|
2
2
|
/* color */
|
|
3
|
-
color: var(--color-text)
|
|
3
|
+
/* color: var(--color-text);*/
|
|
4
4
|
|
|
5
5
|
/* typography */
|
|
6
6
|
|
|
@@ -8,8 +8,11 @@
|
|
|
8
8
|
display: flex;
|
|
9
9
|
align-items: center;
|
|
10
10
|
justify-content: center;
|
|
11
|
+
|
|
11
12
|
width: 100%;
|
|
12
13
|
|
|
14
|
+
padding-block: var(--margin-container-item) 0;
|
|
15
|
+
|
|
13
16
|
/* border */
|
|
14
17
|
|
|
15
18
|
/* depth */
|
package/styles.css
CHANGED
|
@@ -2587,7 +2587,7 @@
|
|
|
2587
2587
|
/* src/patterns/masthead/masthead.css */
|
|
2588
2588
|
.masthead {
|
|
2589
2589
|
/* color */
|
|
2590
|
-
color: var(--color-text)
|
|
2590
|
+
/* color: var(--color-text);*/
|
|
2591
2591
|
|
|
2592
2592
|
/* typography */
|
|
2593
2593
|
|
|
@@ -2595,8 +2595,11 @@
|
|
|
2595
2595
|
display: flex;
|
|
2596
2596
|
align-items: center;
|
|
2597
2597
|
justify-content: center;
|
|
2598
|
+
|
|
2598
2599
|
width: 100%;
|
|
2599
2600
|
|
|
2601
|
+
padding-block: var(--margin-container-item) 0;
|
|
2602
|
+
|
|
2600
2603
|
/* border */
|
|
2601
2604
|
|
|
2602
2605
|
/* depth */
|
|
@@ -2751,10 +2754,13 @@
|
|
|
2751
2754
|
flex-direction: column;
|
|
2752
2755
|
|
|
2753
2756
|
width: 100%;
|
|
2754
|
-
min-height:
|
|
2755
|
-
|
|
2756
|
-
|
|
2757
|
-
|
|
2757
|
+
min-height:
|
|
2758
|
+
calc(
|
|
2759
|
+
100dvh -
|
|
2760
|
+
(
|
|
2761
|
+
var(--layout-foundation-padding-vert) * 2
|
|
2762
|
+
)
|
|
2763
|
+
);
|
|
2758
2764
|
|
|
2759
2765
|
/* border */
|
|
2760
2766
|
|
|
@@ -2785,13 +2791,13 @@
|
|
|
2785
2791
|
|
|
2786
2792
|
/* size */
|
|
2787
2793
|
display: flex;
|
|
2794
|
+
flex: 1;
|
|
2788
2795
|
justify-content: center;
|
|
2796
|
+
align-items: flex-start;
|
|
2789
2797
|
|
|
2790
2798
|
width: 100%;
|
|
2791
2799
|
min-width: 0;
|
|
2792
2800
|
|
|
2793
|
-
flex: 1;
|
|
2794
|
-
|
|
2795
2801
|
padding:
|
|
2796
2802
|
var(--layout-foundation-padding-vert)
|
|
2797
2803
|
var(--layout-foundation-padding-horz);
|
|
@@ -2805,6 +2811,14 @@
|
|
|
2805
2811
|
/* motion */
|
|
2806
2812
|
}
|
|
2807
2813
|
|
|
2814
|
+
.layout-base__main--align-center {
|
|
2815
|
+
align-items: center;
|
|
2816
|
+
}
|
|
2817
|
+
|
|
2818
|
+
.layout-base__main--align-end {
|
|
2819
|
+
align-items: flex-end;
|
|
2820
|
+
}
|
|
2821
|
+
|
|
2808
2822
|
.layout-base__content {
|
|
2809
2823
|
/* color */
|
|
2810
2824
|
|