@manamerge/mana-atomic-ui 1.0.183 → 1.0.185
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/index.d.ts +1 -0
- package/dist/index.js +44 -22
- package/dist/index.js.map +1 -1
- package/dist/themes/themes/manamerge/fonts/Gilmer-Bold.woff2 +0 -0
- package/dist/themes/themes/manamerge/fonts/Gilmer-Heavy.woff2 +0 -0
- package/dist/themes/themes/manamerge/fonts/Gilmer-Light.woff2 +0 -0
- package/dist/themes/themes/manamerge/fonts/Gilmer-Medium.woff2 +0 -0
- package/dist/themes/themes/manamerge/fonts/Gilmer-Regular.woff2 +0 -0
- package/dist/themes/themes/manamerge/layouts/pint3.ts +3 -2
- package/dist/themes/themes/manamerge/miscellaneous/colorpalette.ts +3 -0
- package/dist/themes/themes/manamerge/molecules/cardSimpleRender.ts +22 -16
- package/dist/types/components/Layouts/Pint3/Pint3.stories.d.ts +1 -0
- package/dist/types/components/Molecules/CardSimpleRender/CardSimpleRender.css.d.ts +1 -0
- package/dist/types/components/Molecules/CardSimpleRender/CardSimpleRender.d.ts +1 -0
- package/dist/types/components/Molecules/CardSimpleRender/CardSimpleRender.stories copy.d.ts +11 -0
- package/dist/types/themes/ManamergeTheme.d.ts +12 -8
- package/dist/types/themes/manamerge/layouts/pint3.d.ts +2 -1
- package/dist/types/themes/manamerge/miscellaneous/colorpalette.d.ts +3 -0
- package/dist/types/themes/manamerge/molecules/cardSimpleRender.d.ts +7 -7
- package/package.json +1 -1
package/dist/index.d.ts
CHANGED
|
@@ -177,6 +177,7 @@ interface CardSimpleRenderTypes {
|
|
|
177
177
|
icon?: FunctionComponent<SVGProps<SVGSVGElement>>;
|
|
178
178
|
title?: string;
|
|
179
179
|
description?: string;
|
|
180
|
+
gradientPosition?: "center" | "top" | "bottom" | "left" | "right" | "top left" | "top right" | "bottom left" | "bottom right";
|
|
180
181
|
children?: ReactNode;
|
|
181
182
|
onClick?: React.MouseEventHandler<HTMLElement>;
|
|
182
183
|
}
|
package/dist/index.js
CHANGED
|
@@ -548,7 +548,7 @@ const WrapperHeader = styled.div `
|
|
|
548
548
|
return css `
|
|
549
549
|
align-items: ${(thisTheme === null || thisTheme === void 0 ? void 0 : thisTheme.alignItems) || "center"};
|
|
550
550
|
padding: ${thisTheme === null || thisTheme === void 0 ? void 0 : thisTheme.padding};
|
|
551
|
-
text-align: ${thisTheme === null || thisTheme === void 0 ? void 0 : thisTheme.textAlign}
|
|
551
|
+
text-align: ${thisTheme === null || thisTheme === void 0 ? void 0 : thisTheme.textAlign};
|
|
552
552
|
`;
|
|
553
553
|
}}
|
|
554
554
|
`;
|
|
@@ -1270,8 +1270,8 @@ const BreakerTape = ({ moleculeVariant = "primary", words, svg }) => {
|
|
|
1270
1270
|
};
|
|
1271
1271
|
|
|
1272
1272
|
const Card$1 = styled.div `
|
|
1273
|
-
${({ theme, moleculeVariant, cardHover }) => {
|
|
1274
|
-
var _a, _b, _c, _d, _e, _f, _g;
|
|
1273
|
+
${({ theme, moleculeVariant, cardHover, gradientPosition }) => {
|
|
1274
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j;
|
|
1275
1275
|
const thisTheme = ((_a = theme === null || theme === void 0 ? void 0 : theme.cardSimpleRender) === null || _a === void 0 ? void 0 : _a[moleculeVariant]) || {};
|
|
1276
1276
|
return css `
|
|
1277
1277
|
all: unset;
|
|
@@ -1280,8 +1280,22 @@ const Card$1 = styled.div `
|
|
|
1280
1280
|
min-width: ${(thisTheme === null || thisTheme === void 0 ? void 0 : thisTheme.minWidth) || "auto"};
|
|
1281
1281
|
max-width: ${(thisTheme === null || thisTheme === void 0 ? void 0 : thisTheme.maxWidth) || "auto"};
|
|
1282
1282
|
background: ${thisTheme === null || thisTheme === void 0 ? void 0 : thisTheme.background};
|
|
1283
|
-
|
|
1283
|
+
${gradientPosition &&
|
|
1284
|
+
css `
|
|
1285
|
+
background-image:
|
|
1286
|
+
radial-gradient(
|
|
1287
|
+
circle at ${gradientPosition},
|
|
1288
|
+
${thisTheme.gradientColor}55,
|
|
1289
|
+
transparent 70%
|
|
1290
|
+
),
|
|
1291
|
+
radial-gradient(
|
|
1292
|
+
circle at ${gradientPosition},
|
|
1293
|
+
${thisTheme.gradientColor}22,
|
|
1294
|
+
transparent 75%
|
|
1295
|
+
);
|
|
1296
|
+
`}
|
|
1284
1297
|
border: ${thisTheme === null || thisTheme === void 0 ? void 0 : thisTheme.border};
|
|
1298
|
+
outline: ${thisTheme === null || thisTheme === void 0 ? void 0 : thisTheme.outline};
|
|
1285
1299
|
border-radius: ${thisTheme === null || thisTheme === void 0 ? void 0 : thisTheme.borderRadius};
|
|
1286
1300
|
box-shadow: ${thisTheme === null || thisTheme === void 0 ? void 0 : thisTheme.boxShadow};
|
|
1287
1301
|
box-sizing: border-box;
|
|
@@ -1295,15 +1309,17 @@ const Card$1 = styled.div `
|
|
|
1295
1309
|
css `
|
|
1296
1310
|
&:focus {
|
|
1297
1311
|
border: ${(_b = thisTheme === null || thisTheme === void 0 ? void 0 : thisTheme.focus) === null || _b === void 0 ? void 0 : _b.border};
|
|
1298
|
-
|
|
1299
|
-
|
|
1312
|
+
outline: ${(_c = thisTheme === null || thisTheme === void 0 ? void 0 : thisTheme.focus) === null || _c === void 0 ? void 0 : _c.outline};
|
|
1313
|
+
box-shadow: ${(_d = thisTheme === null || thisTheme === void 0 ? void 0 : thisTheme.focus) === null || _d === void 0 ? void 0 : _d.boxShadow};
|
|
1314
|
+
transition: ${(_e = thisTheme === null || thisTheme === void 0 ? void 0 : thisTheme.focus) === null || _e === void 0 ? void 0 : _e.transition};
|
|
1300
1315
|
}
|
|
1301
1316
|
|
|
1302
1317
|
&:hover {
|
|
1303
1318
|
cursor: pointer;
|
|
1304
|
-
border: ${(
|
|
1305
|
-
|
|
1306
|
-
|
|
1319
|
+
border: ${(_f = thisTheme === null || thisTheme === void 0 ? void 0 : thisTheme.hover) === null || _f === void 0 ? void 0 : _f.border};
|
|
1320
|
+
outline: ${(_g = thisTheme === null || thisTheme === void 0 ? void 0 : thisTheme.hover) === null || _g === void 0 ? void 0 : _g.outline};
|
|
1321
|
+
box-shadow: ${(_h = thisTheme === null || thisTheme === void 0 ? void 0 : thisTheme.hover) === null || _h === void 0 ? void 0 : _h.boxShadow};
|
|
1322
|
+
transition: ${(_j = thisTheme === null || thisTheme === void 0 ? void 0 : thisTheme.hover) === null || _j === void 0 ? void 0 : _j.transition};
|
|
1307
1323
|
}
|
|
1308
1324
|
`}
|
|
1309
1325
|
`;
|
|
@@ -1318,16 +1334,20 @@ const WrapperLine = styled.div `
|
|
|
1318
1334
|
gap: 10px;
|
|
1319
1335
|
`;
|
|
1320
1336
|
const AtomIcon$2 = styled(Icon).attrs(({ theme, moleculeVariant }) => {
|
|
1321
|
-
var _a, _b, _c;
|
|
1337
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j;
|
|
1322
1338
|
return ({
|
|
1323
|
-
variant: (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.cardSimpleRender) === null || _a === void 0 ? void 0 : _a[moleculeVariant]) === null || _b === void 0 ? void 0 : _b.atomIcon) === null || _c === void 0 ? void 0 : _c.variant
|
|
1339
|
+
variant: (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.cardSimpleRender) === null || _a === void 0 ? void 0 : _a[moleculeVariant]) === null || _b === void 0 ? void 0 : _b.atomIcon) === null || _c === void 0 ? void 0 : _c.variant,
|
|
1340
|
+
fill: (_f = (_e = (_d = theme === null || theme === void 0 ? void 0 : theme.cardSimpleRender) === null || _d === void 0 ? void 0 : _d[moleculeVariant]) === null || _e === void 0 ? void 0 : _e.atomIcon) === null || _f === void 0 ? void 0 : _f.fill,
|
|
1341
|
+
stroke: (_j = (_h = (_g = theme === null || theme === void 0 ? void 0 : theme.cardSimpleRender) === null || _g === void 0 ? void 0 : _g[moleculeVariant]) === null || _h === void 0 ? void 0 : _h.atomIcon) === null || _j === void 0 ? void 0 : _j.stroke
|
|
1324
1342
|
});
|
|
1325
|
-
})
|
|
1343
|
+
}) `
|
|
1344
|
+
min-width: fit-content;
|
|
1345
|
+
`;
|
|
1326
1346
|
const AtomHeading$2 = styled(Heading).attrs(({ theme, moleculeVariant }) => {
|
|
1327
1347
|
var _a, _b, _c, _d, _e, _f;
|
|
1328
1348
|
return ({
|
|
1329
1349
|
variant: (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.cardSimpleRender) === null || _a === void 0 ? void 0 : _a[moleculeVariant]) === null || _b === void 0 ? void 0 : _b.atomHeading) === null || _c === void 0 ? void 0 : _c.variant,
|
|
1330
|
-
|
|
1350
|
+
asTag: (_f = (_e = (_d = theme === null || theme === void 0 ? void 0 : theme.cardSimpleRender) === null || _d === void 0 ? void 0 : _d[moleculeVariant]) === null || _e === void 0 ? void 0 : _e.atomHeading) === null || _f === void 0 ? void 0 : _f.asTag
|
|
1331
1351
|
});
|
|
1332
1352
|
}) ``;
|
|
1333
1353
|
const AtomText$2 = styled(Text).attrs(({ theme, moleculeVariant }) => {
|
|
@@ -1337,9 +1357,9 @@ const AtomText$2 = styled(Text).attrs(({ theme, moleculeVariant }) => {
|
|
|
1337
1357
|
});
|
|
1338
1358
|
}) ``;
|
|
1339
1359
|
|
|
1340
|
-
const CardSimpleRender = ({ moleculeVariant = "primary", icon, title, description, children, onClick }) => {
|
|
1360
|
+
const CardSimpleRender = ({ moleculeVariant = "primary", icon, title, description, gradientPosition, children, onClick }) => {
|
|
1341
1361
|
const compVariant = `CardSimpleRender-${moleculeVariant}`;
|
|
1342
|
-
return (jsxs(Card$1, Object.assign({ className: classNames(compVariant), moleculeVariant: compVariant, as: onClick ? "button" : "div", onClick: onClick, cardHover: !!onClick }, { children: [(icon || title || description) && (jsxs("div", { children: [(icon || title) && (jsxs(WrapperLine, { children: [icon && (jsx(AtomIcon$2, { moleculeVariant: compVariant, svg: icon })), title && (jsx(AtomHeading$2, Object.assign({ moleculeVariant: compVariant }, { children: title })))] })), description && (jsx(AtomText$2, Object.assign({ moleculeVariant: compVariant }, { children: description })))] })), children] })));
|
|
1362
|
+
return (jsxs(Card$1, Object.assign({ className: classNames(compVariant), moleculeVariant: compVariant, as: onClick ? "button" : "div", onClick: onClick, cardHover: !!onClick, gradientPosition: gradientPosition }, { children: [(icon || title || description) && (jsxs("div", { children: [(icon || title) && (jsxs(WrapperLine, { children: [icon && (jsx(AtomIcon$2, { moleculeVariant: compVariant, svg: icon })), title && (jsx(AtomHeading$2, Object.assign({ moleculeVariant: compVariant }, { children: title })))] })), description && (jsx(AtomText$2, Object.assign({ moleculeVariant: compVariant }, { children: description })))] })), children] })));
|
|
1343
1363
|
};
|
|
1344
1364
|
|
|
1345
1365
|
const Card = styled.div `
|
|
@@ -1513,23 +1533,25 @@ const Layout = styled.div `
|
|
|
1513
1533
|
return css `
|
|
1514
1534
|
display: flex;
|
|
1515
1535
|
flex-wrap: wrap;
|
|
1536
|
+
/* align-items: stretch; */
|
|
1516
1537
|
justify-content: center;
|
|
1517
1538
|
gap: ${(thisTheme === null || thisTheme === void 0 ? void 0 : thisTheme.gap) || "10px"};
|
|
1518
|
-
height: ${(thisTheme === null || thisTheme === void 0 ? void 0 : thisTheme.height) || "500px"};
|
|
1519
1539
|
max-width: ${(thisTheme === null || thisTheme === void 0 ? void 0 : thisTheme.maxWidth) || "1100px"};
|
|
1540
|
+
min-height: ${(thisTheme === null || thisTheme === void 0 ? void 0 : thisTheme.minHeight) || "500px"};
|
|
1541
|
+
/* align-content: flex-start; */
|
|
1520
1542
|
`;
|
|
1521
1543
|
}}
|
|
1522
1544
|
`;
|
|
1523
1545
|
const Column = styled.div `
|
|
1524
1546
|
${({ theme, moleculeVariant }) => {
|
|
1525
|
-
var _a, _b, _c, _d;
|
|
1547
|
+
var _a, _b, _c, _d, _e;
|
|
1526
1548
|
const thisTheme = ((_a = theme === null || theme === void 0 ? void 0 : theme.pint3) === null || _a === void 0 ? void 0 : _a[moleculeVariant]) || {};
|
|
1527
1549
|
return css `
|
|
1528
1550
|
flex: 1 1 0;
|
|
1529
|
-
height:
|
|
1530
|
-
gap: ${((
|
|
1531
|
-
min-width: ${((
|
|
1532
|
-
max-width: ${((
|
|
1551
|
+
min-height: ${((_b = thisTheme === null || thisTheme === void 0 ? void 0 : thisTheme.column) === null || _b === void 0 ? void 0 : _b.minHeight) || "700px"};
|
|
1552
|
+
gap: ${((_c = thisTheme === null || thisTheme === void 0 ? void 0 : thisTheme.column) === null || _c === void 0 ? void 0 : _c.gap) || "10px"};
|
|
1553
|
+
min-width: ${((_d = thisTheme === null || thisTheme === void 0 ? void 0 : thisTheme.column) === null || _d === void 0 ? void 0 : _d.minWidth) || "200px"};
|
|
1554
|
+
max-width: ${((_e = thisTheme === null || thisTheme === void 0 ? void 0 : thisTheme.column) === null || _e === void 0 ? void 0 : _e.maxWidth) || "500px"};
|
|
1533
1555
|
white-space: normal;
|
|
1534
1556
|
display: flex;
|
|
1535
1557
|
flex-direction: column;
|
|
@@ -1548,7 +1570,7 @@ const Element = styled.div `
|
|
|
1548
1570
|
|
|
1549
1571
|
const Pint3 = ({ moleculeVariant = "primary", cards }) => {
|
|
1550
1572
|
const compVariant = `Pint3-${moleculeVariant}`;
|
|
1551
|
-
return (jsxs(Layout, Object.assign({ className: classNames(compVariant), moleculeVariant: compVariant }, { children: [jsxs(Column, Object.assign({ moleculeVariant: compVariant }, { children: [jsx(Element, Object.assign({ weight:
|
|
1573
|
+
return (jsxs(Layout, Object.assign({ className: classNames(compVariant), moleculeVariant: compVariant }, { children: [jsxs(Column, Object.assign({ moleculeVariant: compVariant }, { children: [jsx(Element, Object.assign({ weight: 2 }, { children: cards === null || cards === void 0 ? void 0 : cards[0] })), jsx(Element, Object.assign({ weight: 8 }, { children: cards === null || cards === void 0 ? void 0 : cards[1] }))] })), jsxs(Column, Object.assign({ moleculeVariant: compVariant }, { children: [jsx(Element, Object.assign({ weight: 6 }, { children: cards === null || cards === void 0 ? void 0 : cards[2] })), jsx(Element, Object.assign({ weight: 1 }, { children: cards === null || cards === void 0 ? void 0 : cards[3] })), jsx(Element, Object.assign({ weight: 3 }, { children: cards === null || cards === void 0 ? void 0 : cards[4] }))] })), jsxs(Column, Object.assign({ moleculeVariant: compVariant }, { children: [jsx(Element, Object.assign({ weight: 3.5 }, { children: cards === null || cards === void 0 ? void 0 : cards[5] })), jsx(Element, Object.assign({ weight: 6.5 }, { children: cards === null || cards === void 0 ? void 0 : cards[6] }))] }))] })));
|
|
1552
1574
|
};
|
|
1553
1575
|
|
|
1554
1576
|
export { Accordion, BreakerTape, Button, CDNImage, CardBanner, CardSimpleRender, CardTeaser, Divider, Footer, Gradient, Header, Heading, Icon, Link, Navigation, Pint3, Text };
|