jvetrau-ds 0.1.23 → 0.1.24
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 +15 -0
- 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 +1 -1
- package/styles.css +16 -1
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
|
+
headerAlign = "start",
|
|
14
15
|
mainAlign = "start",
|
|
15
16
|
header,
|
|
16
17
|
footer,
|
|
@@ -23,6 +24,10 @@ const LayoutBase = ({
|
|
|
23
24
|
"layout-base__content--wide": width === "wide",
|
|
24
25
|
"layout-base__content--full": width === "full"
|
|
25
26
|
});
|
|
27
|
+
const headerClasses = classnames.classnames("layout-base__header", "", {
|
|
28
|
+
"layout-base__header--align-center": headerAlign === "center",
|
|
29
|
+
"layout-base__header--align-end": headerAlign === "end"
|
|
30
|
+
});
|
|
26
31
|
const mainClasses = classnames.classnames("layout-base__main", "", {
|
|
27
32
|
"layout-base__main--align-center": mainAlign === "center",
|
|
28
33
|
"layout-base__main--align-end": mainAlign === "end"
|
|
@@ -34,7 +39,7 @@ const LayoutBase = ({
|
|
|
34
39
|
className,
|
|
35
40
|
...props,
|
|
36
41
|
children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "layout-base", children: [
|
|
37
|
-
header && /* @__PURE__ */ jsxRuntime.jsx("div", { className:
|
|
42
|
+
header && /* @__PURE__ */ jsxRuntime.jsx("div", { className: headerClasses, children: header }),
|
|
38
43
|
/* @__PURE__ */ jsxRuntime.jsx("main", { className: mainClasses, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: contentClasses, children }) }),
|
|
39
44
|
footer && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "layout-base__footer", children: footer })
|
|
40
45
|
] })
|
|
@@ -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":";;;;;;;;;;;AA0BA,MAAM,aAAwC,CAAC;AAAA,EAC7C,KAAA,GAAQ,SAAA;AAAA,EACR,WAAA,GAAc,OAAA;AAAA,EACd,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,aAAA,GAAgBA,qBAAA,CAAW,qBAAA,EAAuB,EAAA,EAAI;AAAA,IAC1D,qCAAqC,WAAA,KAAgB,QAAA;AAAA,IACrD,kCAAkC,WAAA,KAAgB;AAAA,GACnD,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,EAAW,aAAA,EACb,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 LayoutBaseHeaderAlign =\n | 'start'\n | 'center'\n | 'end';\n\nexport type LayoutBaseMainAlign =\n | 'start'\n | 'center'\n | 'end';\n\nexport interface LayoutBaseProps\n extends React.HTMLAttributes<HTMLDivElement> {\n width?: LayoutFoundationWidth;\n headerAlign?: LayoutBaseHeaderAlign;\n mainAlign?: LayoutBaseMainAlign;\n header?: React.ReactNode;\n footer?: React.ReactNode;\n}\n\nconst LayoutBase: React.FC<LayoutBaseProps> = ({\n width = 'default',\n headerAlign = 'start',\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 headerClasses = classnames('layout-base__header', '', {\n 'layout-base__header--align-center': headerAlign === 'center',\n 'layout-base__header--align-end': headerAlign === 'end',\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={headerClasses}>\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
|
@@ -4,6 +4,8 @@
|
|
|
4
4
|
/* typography */
|
|
5
5
|
|
|
6
6
|
/* size */
|
|
7
|
+
--layout-base-header-height: 120px;
|
|
8
|
+
|
|
7
9
|
display: flex;
|
|
8
10
|
flex-direction: column;
|
|
9
11
|
|
|
@@ -29,7 +31,12 @@
|
|
|
29
31
|
/* typography */
|
|
30
32
|
|
|
31
33
|
/* size */
|
|
34
|
+
display: flex;
|
|
35
|
+
align-items: flex-start;
|
|
36
|
+
justify-content: center;
|
|
37
|
+
|
|
32
38
|
width: 100%;
|
|
39
|
+
min-height: var(--layout-base-header-height);
|
|
33
40
|
|
|
34
41
|
/* border */
|
|
35
42
|
|
|
@@ -38,6 +45,14 @@
|
|
|
38
45
|
/* motion */
|
|
39
46
|
}
|
|
40
47
|
|
|
48
|
+
.layout-base__header--align-center {
|
|
49
|
+
align-items: center;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
.layout-base__header--align-end {
|
|
53
|
+
align-items: flex-end;
|
|
54
|
+
}
|
|
55
|
+
|
|
41
56
|
.layout-base__main {
|
|
42
57
|
/* color */
|
|
43
58
|
|
package/layouts/base/base.d.cts
CHANGED
|
@@ -1,13 +1,15 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { LayoutFoundationWidth } from '../foundation/foundation.cjs';
|
|
3
3
|
|
|
4
|
+
type LayoutBaseHeaderAlign = 'start' | 'center' | 'end';
|
|
4
5
|
type LayoutBaseMainAlign = 'start' | 'center' | 'end';
|
|
5
6
|
interface LayoutBaseProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
6
7
|
width?: LayoutFoundationWidth;
|
|
8
|
+
headerAlign?: LayoutBaseHeaderAlign;
|
|
7
9
|
mainAlign?: LayoutBaseMainAlign;
|
|
8
10
|
header?: React.ReactNode;
|
|
9
11
|
footer?: React.ReactNode;
|
|
10
12
|
}
|
|
11
13
|
declare const LayoutBase: React.FC<LayoutBaseProps>;
|
|
12
14
|
|
|
13
|
-
export { type LayoutBaseMainAlign, type LayoutBaseProps, LayoutBase as default };
|
|
15
|
+
export { type LayoutBaseHeaderAlign, type LayoutBaseMainAlign, type LayoutBaseProps, LayoutBase as default };
|
package/layouts/base/base.d.ts
CHANGED
|
@@ -1,13 +1,15 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { LayoutFoundationWidth } from '../foundation/foundation.js';
|
|
3
3
|
|
|
4
|
+
type LayoutBaseHeaderAlign = 'start' | 'center' | 'end';
|
|
4
5
|
type LayoutBaseMainAlign = 'start' | 'center' | 'end';
|
|
5
6
|
interface LayoutBaseProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
6
7
|
width?: LayoutFoundationWidth;
|
|
8
|
+
headerAlign?: LayoutBaseHeaderAlign;
|
|
7
9
|
mainAlign?: LayoutBaseMainAlign;
|
|
8
10
|
header?: React.ReactNode;
|
|
9
11
|
footer?: React.ReactNode;
|
|
10
12
|
}
|
|
11
13
|
declare const LayoutBase: React.FC<LayoutBaseProps>;
|
|
12
14
|
|
|
13
|
-
export { type LayoutBaseMainAlign, type LayoutBaseProps, LayoutBase as default };
|
|
15
|
+
export { type LayoutBaseHeaderAlign, 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
|
+
headerAlign = "start",
|
|
8
9
|
mainAlign = "start",
|
|
9
10
|
header,
|
|
10
11
|
footer,
|
|
@@ -17,6 +18,10 @@ const LayoutBase = ({
|
|
|
17
18
|
"layout-base__content--wide": width === "wide",
|
|
18
19
|
"layout-base__content--full": width === "full"
|
|
19
20
|
});
|
|
21
|
+
const headerClasses = classnames("layout-base__header", "", {
|
|
22
|
+
"layout-base__header--align-center": headerAlign === "center",
|
|
23
|
+
"layout-base__header--align-end": headerAlign === "end"
|
|
24
|
+
});
|
|
20
25
|
const mainClasses = classnames("layout-base__main", "", {
|
|
21
26
|
"layout-base__main--align-center": mainAlign === "center",
|
|
22
27
|
"layout-base__main--align-end": mainAlign === "end"
|
|
@@ -28,7 +33,7 @@ const LayoutBase = ({
|
|
|
28
33
|
className,
|
|
29
34
|
...props,
|
|
30
35
|
children: /* @__PURE__ */ jsxs("div", { className: "layout-base", children: [
|
|
31
|
-
header && /* @__PURE__ */ jsx("div", { className:
|
|
36
|
+
header && /* @__PURE__ */ jsx("div", { className: headerClasses, children: header }),
|
|
32
37
|
/* @__PURE__ */ jsx("main", { className: mainClasses, children: /* @__PURE__ */ jsx("div", { className: contentClasses, children }) }),
|
|
33
38
|
footer && /* @__PURE__ */ jsx("div", { className: "layout-base__footer", children: footer })
|
|
34
39
|
] })
|
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":";;;;;AA0BA,MAAM,aAAwC,CAAC;AAAA,EAC7C,KAAA,GAAQ,SAAA;AAAA,EACR,WAAA,GAAc,OAAA;AAAA,EACd,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,aAAA,GAAgB,UAAA,CAAW,qBAAA,EAAuB,EAAA,EAAI;AAAA,IAC1D,qCAAqC,WAAA,KAAgB,QAAA;AAAA,IACrD,kCAAkC,WAAA,KAAgB;AAAA,GACnD,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,EAAW,aAAA,EACb,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 LayoutBaseHeaderAlign =\n | 'start'\n | 'center'\n | 'end';\n\nexport type LayoutBaseMainAlign =\n | 'start'\n | 'center'\n | 'end';\n\nexport interface LayoutBaseProps\n extends React.HTMLAttributes<HTMLDivElement> {\n width?: LayoutFoundationWidth;\n headerAlign?: LayoutBaseHeaderAlign;\n mainAlign?: LayoutBaseMainAlign;\n header?: React.ReactNode;\n footer?: React.ReactNode;\n}\n\nconst LayoutBase: React.FC<LayoutBaseProps> = ({\n width = 'default',\n headerAlign = 'start',\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 headerClasses = classnames('layout-base__header', '', {\n 'layout-base__header--align-center': headerAlign === 'center',\n 'layout-base__header--align-end': headerAlign === 'end',\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={headerClasses}>\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
package/styles.css
CHANGED
|
@@ -2598,7 +2598,7 @@
|
|
|
2598
2598
|
|
|
2599
2599
|
width: 100%;
|
|
2600
2600
|
|
|
2601
|
-
padding-block: var(--margin-container-item)
|
|
2601
|
+
padding-block: var(--margin-container-item);
|
|
2602
2602
|
|
|
2603
2603
|
/* border */
|
|
2604
2604
|
|
|
@@ -2750,6 +2750,8 @@
|
|
|
2750
2750
|
/* typography */
|
|
2751
2751
|
|
|
2752
2752
|
/* size */
|
|
2753
|
+
--layout-base-header-height: 120px;
|
|
2754
|
+
|
|
2753
2755
|
display: flex;
|
|
2754
2756
|
flex-direction: column;
|
|
2755
2757
|
|
|
@@ -2775,7 +2777,12 @@
|
|
|
2775
2777
|
/* typography */
|
|
2776
2778
|
|
|
2777
2779
|
/* size */
|
|
2780
|
+
display: flex;
|
|
2781
|
+
align-items: flex-start;
|
|
2782
|
+
justify-content: center;
|
|
2783
|
+
|
|
2778
2784
|
width: 100%;
|
|
2785
|
+
min-height: var(--layout-base-header-height);
|
|
2779
2786
|
|
|
2780
2787
|
/* border */
|
|
2781
2788
|
|
|
@@ -2784,6 +2791,14 @@
|
|
|
2784
2791
|
/* motion */
|
|
2785
2792
|
}
|
|
2786
2793
|
|
|
2794
|
+
.layout-base__header--align-center {
|
|
2795
|
+
align-items: center;
|
|
2796
|
+
}
|
|
2797
|
+
|
|
2798
|
+
.layout-base__header--align-end {
|
|
2799
|
+
align-items: flex-end;
|
|
2800
|
+
}
|
|
2801
|
+
|
|
2787
2802
|
.layout-base__main {
|
|
2788
2803
|
/* color */
|
|
2789
2804
|
|