@knapsack/sandbox-components 4.66.2 → 4.66.3--canary.b1cd7eb.0
Sign up to get free protection for your applications and to get access to all the features.
- package/CHANGELOG.md +0 -32
- package/dist/css/ks-sandbox-styles.css +2 -138
- package/dist/react/divider.d.ts +0 -1
- package/dist/react/divider.d.ts.map +1 -1
- package/dist/react/divider.js +2 -2
- package/dist/react/divider.js.map +1 -1
- package/dist/react/grid.d.ts +0 -1
- package/dist/react/grid.d.ts.map +1 -1
- package/dist/react/grid.js +1 -2
- package/dist/react/grid.js.map +1 -1
- package/dist/react/index.d.ts +0 -1
- package/dist/react/index.d.ts.map +1 -1
- package/dist/react/index.js +0 -1
- package/dist/react/index.js.map +1 -1
- package/package.json +7 -7
- package/src/css/divider.css +0 -27
- package/src/css/global.css +1 -0
- package/src/css/grid.css +0 -27
- package/src/css/hero.css +0 -1
- package/src/css/index.css +0 -1
- package/src/react/divider.tsx +2 -22
- package/src/react/grid.tsx +0 -11
- package/src/react/index.tsx +0 -1
- package/dist/react/callout-image.d.ts +0 -3
- package/dist/react/callout-image.d.ts.map +0 -1
- package/dist/react/callout-image.js +0 -5
- package/dist/react/callout-image.js.map +0 -1
- package/dist/react/callout.d.ts +0 -8
- package/dist/react/callout.d.ts.map +0 -1
- package/dist/react/callout.js +0 -7
- package/dist/react/callout.js.map +0 -1
- package/src/css/callout.css +0 -53
- package/src/react/callout-image.tsx +0 -11
- package/src/react/callout.tsx +0 -29
package/CHANGELOG.md
CHANGED
@@ -1,35 +1,3 @@
|
|
1
|
-
# v4.66.2 (Thu Jul 18 2024)
|
2
|
-
|
3
|
-
#### 🏠 Internal
|
4
|
-
|
5
|
-
- fix permanent were loading your tokens message KSP-5281 [#4352](https://github.com/knapsack-labs/app-monorepo/pull/4352) ([@GormanDesign](https://github.com/GormanDesign))
|
6
|
-
|
7
|
-
#### Authors: 1
|
8
|
-
|
9
|
-
- Matt Gorman ([@GormanDesign](https://github.com/GormanDesign))
|
10
|
-
|
11
|
-
---
|
12
|
-
|
13
|
-
# v4.66.1 (Thu Jul 18 2024)
|
14
|
-
|
15
|
-
#### 🐛 Bug Fix
|
16
|
-
|
17
|
-
- KS Sandbox Landing Page Prototype [#4356](https://github.com/knapsack-labs/app-monorepo/pull/4356) ([@brittanysmart](https://github.com/brittanysmart) [@GormanDesign](https://github.com/GormanDesign))
|
18
|
-
- Merge branch 'latest' into feature/ksp-5200-build-landing-page-prototype ([@GormanDesign](https://github.com/GormanDesign))
|
19
|
-
- tweaks ([@GormanDesign](https://github.com/GormanDesign))
|
20
|
-
- Remove Padding from Demo Wrapper to Prevent Display in New Window ([@brittanysmart](https://github.com/brittanysmart))
|
21
|
-
- Add Grid spacingBottom prop ([@brittanysmart](https://github.com/brittanysmart))
|
22
|
-
- Center Hero image ([@brittanysmart](https://github.com/brittanysmart))
|
23
|
-
- Add Divider spacingBottom prop ([@brittanysmart](https://github.com/brittanysmart))
|
24
|
-
- Add Callout component ([@brittanysmart](https://github.com/brittanysmart))
|
25
|
-
|
26
|
-
#### Authors: 2
|
27
|
-
|
28
|
-
- Brittany Smart ([@brittanysmart](https://github.com/brittanysmart))
|
29
|
-
- Matt Gorman ([@GormanDesign](https://github.com/GormanDesign))
|
30
|
-
|
31
|
-
---
|
32
|
-
|
33
1
|
# v4.66.0 (Mon Jul 15 2024)
|
34
2
|
|
35
3
|
#### 🐛 Bug Fix
|
@@ -1158,6 +1158,8 @@ body {
|
|
1158
1158
|
}
|
1159
1159
|
|
1160
1160
|
.demo-wrapper {
|
1161
|
+
padding: 24px;
|
1162
|
+
padding: var(--spacing-xlarge);
|
1161
1163
|
align-items: center;
|
1162
1164
|
}
|
1163
1165
|
|
@@ -1330,45 +1332,6 @@ body {
|
|
1330
1332
|
}
|
1331
1333
|
}
|
1332
1334
|
|
1333
|
-
.grid--spacingBottom--none {
|
1334
|
-
margin-bottom: 0;
|
1335
|
-
}
|
1336
|
-
|
1337
|
-
.grid--spacingBottom--xsmall {
|
1338
|
-
margin-bottom: 4px;
|
1339
|
-
margin-bottom: var(--spacing-xsmall);
|
1340
|
-
}
|
1341
|
-
|
1342
|
-
.grid--spacingBottom--small {
|
1343
|
-
margin-bottom: 8px;
|
1344
|
-
margin-bottom: var(--spacing-small);
|
1345
|
-
}
|
1346
|
-
|
1347
|
-
.grid--spacingBottom--medium {
|
1348
|
-
margin-bottom: 12px;
|
1349
|
-
margin-bottom: var(--spacing-medium);
|
1350
|
-
}
|
1351
|
-
|
1352
|
-
.grid--spacingBottom--large {
|
1353
|
-
margin-bottom: 16px;
|
1354
|
-
margin-bottom: var(--spacing-large);
|
1355
|
-
}
|
1356
|
-
|
1357
|
-
.grid--spacingBottom--xlarge {
|
1358
|
-
margin-bottom: 24px;
|
1359
|
-
margin-bottom: var(--spacing-xlarge);
|
1360
|
-
}
|
1361
|
-
|
1362
|
-
.grid--spacingBottom--xxlarge {
|
1363
|
-
margin-bottom: 40px;
|
1364
|
-
margin-bottom: var(--spacing-xxlarge);
|
1365
|
-
}
|
1366
|
-
|
1367
|
-
.grid--spacingBottom--xxxlarge {
|
1368
|
-
margin-bottom: 64px;
|
1369
|
-
margin-bottom: var(--spacing-xxxlarge);
|
1370
|
-
}
|
1371
|
-
|
1372
1335
|
.header {
|
1373
1336
|
background-color: #7a34ed;
|
1374
1337
|
background-color: var(--brand-color);
|
@@ -1459,7 +1422,6 @@ body {
|
|
1459
1422
|
max-width: 992px;
|
1460
1423
|
max-width: var(--breakpoint-xlarge);
|
1461
1424
|
height: auto;
|
1462
|
-
margin: auto;
|
1463
1425
|
}
|
1464
1426
|
|
1465
1427
|
.divider {
|
@@ -1484,45 +1446,6 @@ body {
|
|
1484
1446
|
);
|
1485
1447
|
}
|
1486
1448
|
|
1487
|
-
.divider--spacingBottom--none {
|
1488
|
-
margin-bottom: 0;
|
1489
|
-
}
|
1490
|
-
|
1491
|
-
.divider--spacingBottom--xsmall {
|
1492
|
-
margin-bottom: 4px;
|
1493
|
-
margin-bottom: var(--spacing-xsmall);
|
1494
|
-
}
|
1495
|
-
|
1496
|
-
.divider--spacingBottom--small {
|
1497
|
-
margin-bottom: 8px;
|
1498
|
-
margin-bottom: var(--spacing-small);
|
1499
|
-
}
|
1500
|
-
|
1501
|
-
.divider--spacingBottom--medium {
|
1502
|
-
margin-bottom: 12px;
|
1503
|
-
margin-bottom: var(--spacing-medium);
|
1504
|
-
}
|
1505
|
-
|
1506
|
-
.divider--spacingBottom--large {
|
1507
|
-
margin-bottom: 16px;
|
1508
|
-
margin-bottom: var(--spacing-large);
|
1509
|
-
}
|
1510
|
-
|
1511
|
-
.divider--spacingBottom--xlarge {
|
1512
|
-
margin-bottom: 24px;
|
1513
|
-
margin-bottom: var(--spacing-xlarge);
|
1514
|
-
}
|
1515
|
-
|
1516
|
-
.divider--spacingBottom--xxlarge {
|
1517
|
-
margin-bottom: 40px;
|
1518
|
-
margin-bottom: var(--spacing-xxlarge);
|
1519
|
-
}
|
1520
|
-
|
1521
|
-
.divider--spacingBottom--xxxlarge {
|
1522
|
-
margin-bottom: 64px;
|
1523
|
-
margin-bottom: var(--spacing-xxxlarge);
|
1524
|
-
}
|
1525
|
-
|
1526
1449
|
.text {
|
1527
1450
|
font-family: Inter;
|
1528
1451
|
font-family: var(--brand-font-family);
|
@@ -1610,65 +1533,6 @@ body {
|
|
1610
1533
|
margin-bottom: var(--spacing-xxxlarge);
|
1611
1534
|
}
|
1612
1535
|
|
1613
|
-
.callout {
|
1614
|
-
margin: 64px 0;
|
1615
|
-
margin: var(--spacing-xxxlarge) 0;
|
1616
|
-
text-align: center;
|
1617
|
-
}
|
1618
|
-
|
1619
|
-
.callout-content {
|
1620
|
-
display: flex;
|
1621
|
-
flex-direction: column;
|
1622
|
-
align-items: center;
|
1623
|
-
max-width: 1200px;
|
1624
|
-
width: 100%;
|
1625
|
-
margin: 0 auto;
|
1626
|
-
box-sizing: border-box;
|
1627
|
-
}
|
1628
|
-
|
1629
|
-
.callout-image {
|
1630
|
-
width: 100%;
|
1631
|
-
height: auto;
|
1632
|
-
max-width: 100%;
|
1633
|
-
max-height: 400px;
|
1634
|
-
-o-object-fit: contain;
|
1635
|
-
object-fit: contain;
|
1636
|
-
margin-bottom: 40px;
|
1637
|
-
margin-bottom: var(--spacing-xxlarge);
|
1638
|
-
}
|
1639
|
-
|
1640
|
-
.callout-text-content {
|
1641
|
-
display: flex;
|
1642
|
-
flex-direction: column;
|
1643
|
-
align-items: center;
|
1644
|
-
box-sizing: border-box;
|
1645
|
-
padding: 0 12px;
|
1646
|
-
padding: 0 var(--spacing-medium);
|
1647
|
-
}
|
1648
|
-
|
1649
|
-
@media (min-width: 768px) {
|
1650
|
-
.callout-content {
|
1651
|
-
flex-direction: row;
|
1652
|
-
justify-content: center;
|
1653
|
-
align-items: center;
|
1654
|
-
}
|
1655
|
-
|
1656
|
-
.callout-image {
|
1657
|
-
margin-bottom: 0;
|
1658
|
-
margin-right: 16px;
|
1659
|
-
margin-right: var(--spacing-large);
|
1660
|
-
}
|
1661
|
-
|
1662
|
-
.callout-text-content {
|
1663
|
-
align-items: flex-start;
|
1664
|
-
padding: 0;
|
1665
|
-
}
|
1666
|
-
|
1667
|
-
.callout-text {
|
1668
|
-
text-align: left;
|
1669
|
-
}
|
1670
|
-
}
|
1671
|
-
|
1672
1536
|
.hover\:border-neutral-100:hover {
|
1673
1537
|
--tw-border-opacity: 1;
|
1674
1538
|
border-color: rgba(245, 245, 245, 1);
|
package/dist/react/divider.d.ts
CHANGED
@@ -1,7 +1,6 @@
|
|
1
1
|
import React from 'react';
|
2
2
|
export type DividerProps = {
|
3
3
|
className?: string;
|
4
|
-
spacingBottom?: 'none' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | 'xxxlarge';
|
5
4
|
};
|
6
5
|
export declare const Divider: React.FC<DividerProps>;
|
7
6
|
//# sourceMappingURL=divider.d.ts.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"divider.d.ts","sourceRoot":"","sources":["../../src/react/divider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,MAAM,YAAY,GAAG;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;
|
1
|
+
{"version":3,"file":"divider.d.ts","sourceRoot":"","sources":["../../src/react/divider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,MAAM,YAAY,GAAG;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAE1C,CAAC"}
|
package/dist/react/divider.js
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
2
2
|
import clsx from 'clsx';
|
3
|
-
export const Divider = ({ className
|
4
|
-
return
|
3
|
+
export const Divider = ({ className }) => {
|
4
|
+
return _jsx("hr", { className: clsx('divider', className) });
|
5
5
|
};
|
6
6
|
//# sourceMappingURL=divider.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"divider.js","sourceRoot":"","sources":["../../src/react/divider.tsx"],"names":[],"mappings":";AACA,OAAO,IAAI,MAAM,MAAM,CAAC;
|
1
|
+
{"version":3,"file":"divider.js","sourceRoot":"","sources":["../../src/react/divider.tsx"],"names":[],"mappings":";AACA,OAAO,IAAI,MAAM,MAAM,CAAC;AAMxB,MAAM,CAAC,MAAM,OAAO,GAA2B,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE;IAC/D,OAAO,aAAI,SAAS,EAAE,IAAI,CAAC,SAAS,EAAE,SAAS,CAAC,GAAI,CAAC;AACvD,CAAC,CAAC"}
|
package/dist/react/grid.d.ts
CHANGED
@@ -4,7 +4,6 @@ interface GridItemProps {
|
|
4
4
|
columns?: 1 | 2 | 3 | 4;
|
5
5
|
gap?: 'small' | 'medium' | 'large';
|
6
6
|
maxWidth?: string;
|
7
|
-
spacingBottom?: 'none' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | 'xxxlarge';
|
8
7
|
}
|
9
8
|
export declare const Grid: React.FC<GridItemProps>;
|
10
9
|
export {};
|
package/dist/react/grid.d.ts.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"grid.d.ts","sourceRoot":"","sources":["../../src/react/grid.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,UAAU,aAAa;IACrB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACxB,GAAG,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACnC,QAAQ,CAAC,EAAE,MAAM,CAAC;
|
1
|
+
{"version":3,"file":"grid.d.ts","sourceRoot":"","sources":["../../src/react/grid.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,UAAU,aAAa;IACrB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACxB,GAAG,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACnC,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAkBxC,CAAC"}
|
package/dist/react/grid.js
CHANGED
@@ -1,11 +1,10 @@
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
2
2
|
import clsx from 'clsx';
|
3
|
-
export const Grid = ({ children, columns = 2, gap = 'medium', maxWidth,
|
3
|
+
export const Grid = ({ children, columns = 2, gap = 'medium', maxWidth, }) => {
|
4
4
|
return (_jsx("div", { className: clsx({
|
5
5
|
grid: true,
|
6
6
|
[`grid--columns--${columns}`]: columns,
|
7
7
|
[`grid--gap-${gap}`]: gap,
|
8
|
-
[`grid--spacingBottom--${spacingBottom}`]: spacingBottom,
|
9
8
|
}), style: { maxWidth }, children: children }));
|
10
9
|
};
|
11
10
|
//# sourceMappingURL=grid.js.map
|
package/dist/react/grid.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"grid.js","sourceRoot":"","sources":["../../src/react/grid.tsx"],"names":[],"mappings":";AAAA,OAAO,IAAI,MAAM,MAAM,CAAC;
|
1
|
+
{"version":3,"file":"grid.js","sourceRoot":"","sources":["../../src/react/grid.tsx"],"names":[],"mappings":";AAAA,OAAO,IAAI,MAAM,MAAM,CAAC;AAUxB,MAAM,CAAC,MAAM,IAAI,GAA4B,CAAC,EAC5C,QAAQ,EACR,OAAO,GAAG,CAAC,EACX,GAAG,GAAG,QAAQ,EACd,QAAQ,GACT,EAAE,EAAE;IACH,OAAO,CACL,cACE,SAAS,EAAE,IAAI,CAAC;YACd,IAAI,EAAE,IAAI;YACV,CAAC,kBAAkB,OAAO,EAAE,CAAC,EAAE,OAAO;YACtC,CAAC,aAAa,GAAG,EAAE,CAAC,EAAE,GAAG;SAC1B,CAAC,EACF,KAAK,EAAE,EAAE,QAAQ,EAAE,YAElB,QAAQ,GACL,CACP,CAAC;AACJ,CAAC,CAAC"}
|
package/dist/react/index.d.ts
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/react/index.tsx"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,6BAA6B,CAAC;AAC5C,cAAc,sBAAsB,CAAC;AACrC,cAAc,uBAAuB,CAAC;AACtC,cAAc,WAAW,CAAC
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/react/index.tsx"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,6BAA6B,CAAC;AAC5C,cAAc,sBAAsB,CAAC;AACrC,cAAc,uBAAuB,CAAC;AACtC,cAAc,WAAW,CAAC"}
|
package/dist/react/index.js
CHANGED
package/dist/react/index.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/react/index.tsx"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,6BAA6B,CAAC;AAC5C,cAAc,sBAAsB,CAAC;AACrC,cAAc,uBAAuB,CAAC;AACtC,cAAc,WAAW,CAAC
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/react/index.tsx"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,6BAA6B,CAAC;AAC5C,cAAc,sBAAsB,CAAC;AACrC,cAAc,uBAAuB,CAAC;AACtC,cAAc,WAAW,CAAC"}
|
package/package.json
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
{
|
2
2
|
"name": "@knapsack/sandbox-components",
|
3
3
|
"description": "",
|
4
|
-
"version": "4.66.
|
4
|
+
"version": "4.66.3--canary.b1cd7eb.0",
|
5
5
|
"type": "module",
|
6
6
|
"exports": {
|
7
7
|
"./css": "./dist/css/ks-sandbox-styles.css",
|
@@ -37,11 +37,11 @@
|
|
37
37
|
"vue": "^3.4.27"
|
38
38
|
},
|
39
39
|
"devDependencies": {
|
40
|
-
"@knapsack/eslint-config-starter": "4.66.
|
41
|
-
"@knapsack/postcss-config-starter": "4.66.
|
42
|
-
"@knapsack/prettier-config": "4.66.
|
43
|
-
"@knapsack/sandbox-tokens": "4.66.
|
44
|
-
"@knapsack/typescript-config-starter": "4.66.
|
40
|
+
"@knapsack/eslint-config-starter": "4.66.3--canary.b1cd7eb.0",
|
41
|
+
"@knapsack/postcss-config-starter": "4.66.3--canary.b1cd7eb.0",
|
42
|
+
"@knapsack/prettier-config": "4.66.3--canary.b1cd7eb.0",
|
43
|
+
"@knapsack/sandbox-tokens": "4.66.3--canary.b1cd7eb.0",
|
44
|
+
"@knapsack/typescript-config-starter": "4.66.3--canary.b1cd7eb.0",
|
45
45
|
"@types/node": "^20.12.12",
|
46
46
|
"@types/react": "^18.3.3",
|
47
47
|
"eslint": "^8.57.0",
|
@@ -59,5 +59,5 @@
|
|
59
59
|
"directory": "apps/ui/libs/sandbox-components",
|
60
60
|
"type": "git"
|
61
61
|
},
|
62
|
-
"gitHead": "
|
62
|
+
"gitHead": "b1cd7eb5337d013df565a505b93faceab6fdaffe"
|
63
63
|
}
|
package/src/css/divider.css
CHANGED
@@ -19,30 +19,3 @@
|
|
19
19
|
hsla(0, 0%, 0%, 0) 95%
|
20
20
|
);
|
21
21
|
}
|
22
|
-
|
23
|
-
.divider--spacingBottom {
|
24
|
-
&--none {
|
25
|
-
margin-bottom: 0;
|
26
|
-
}
|
27
|
-
&--xsmall {
|
28
|
-
margin-bottom: var(--spacing-xsmall);
|
29
|
-
}
|
30
|
-
&--small {
|
31
|
-
margin-bottom: var(--spacing-small);
|
32
|
-
}
|
33
|
-
&--medium {
|
34
|
-
margin-bottom: var(--spacing-medium);
|
35
|
-
}
|
36
|
-
&--large {
|
37
|
-
margin-bottom: var(--spacing-large);
|
38
|
-
}
|
39
|
-
&--xlarge {
|
40
|
-
margin-bottom: var(--spacing-xlarge);
|
41
|
-
}
|
42
|
-
&--xxlarge {
|
43
|
-
margin-bottom: var(--spacing-xxlarge);
|
44
|
-
}
|
45
|
-
&--xxxlarge {
|
46
|
-
margin-bottom: var(--spacing-xxxlarge);
|
47
|
-
}
|
48
|
-
}
|
package/src/css/global.css
CHANGED
package/src/css/grid.css
CHANGED
@@ -29,30 +29,3 @@
|
|
29
29
|
}
|
30
30
|
}
|
31
31
|
}
|
32
|
-
|
33
|
-
.grid--spacingBottom {
|
34
|
-
&--none {
|
35
|
-
margin-bottom: 0;
|
36
|
-
}
|
37
|
-
&--xsmall {
|
38
|
-
margin-bottom: var(--spacing-xsmall);
|
39
|
-
}
|
40
|
-
&--small {
|
41
|
-
margin-bottom: var(--spacing-small);
|
42
|
-
}
|
43
|
-
&--medium {
|
44
|
-
margin-bottom: var(--spacing-medium);
|
45
|
-
}
|
46
|
-
&--large {
|
47
|
-
margin-bottom: var(--spacing-large);
|
48
|
-
}
|
49
|
-
&--xlarge {
|
50
|
-
margin-bottom: var(--spacing-xlarge);
|
51
|
-
}
|
52
|
-
&--xxlarge {
|
53
|
-
margin-bottom: var(--spacing-xxlarge);
|
54
|
-
}
|
55
|
-
&--xxxlarge {
|
56
|
-
margin-bottom: var(--spacing-xxxlarge);
|
57
|
-
}
|
58
|
-
}
|
package/src/css/hero.css
CHANGED
package/src/css/index.css
CHANGED
package/src/react/divider.tsx
CHANGED
@@ -3,28 +3,8 @@ import clsx from 'clsx';
|
|
3
3
|
|
4
4
|
export type DividerProps = {
|
5
5
|
className?: string;
|
6
|
-
spacingBottom?:
|
7
|
-
| 'none'
|
8
|
-
| 'xsmall'
|
9
|
-
| 'small'
|
10
|
-
| 'medium'
|
11
|
-
| 'large'
|
12
|
-
| 'xlarge'
|
13
|
-
| 'xxlarge'
|
14
|
-
| 'xxxlarge';
|
15
6
|
};
|
16
7
|
|
17
|
-
export const Divider: React.FC<DividerProps> = ({
|
18
|
-
className,
|
19
|
-
spacingBottom,
|
20
|
-
}) => {
|
21
|
-
return (
|
22
|
-
<hr
|
23
|
-
className={clsx(
|
24
|
-
'divider',
|
25
|
-
className,
|
26
|
-
spacingBottom && `divider--spacingBottom--${spacingBottom}`,
|
27
|
-
)}
|
28
|
-
/>
|
29
|
-
);
|
8
|
+
export const Divider: React.FC<DividerProps> = ({ className }) => {
|
9
|
+
return <hr className={clsx('divider', className)} />;
|
30
10
|
};
|
package/src/react/grid.tsx
CHANGED
@@ -6,15 +6,6 @@ interface GridItemProps {
|
|
6
6
|
columns?: 1 | 2 | 3 | 4;
|
7
7
|
gap?: 'small' | 'medium' | 'large';
|
8
8
|
maxWidth?: string;
|
9
|
-
spacingBottom?:
|
10
|
-
| 'none'
|
11
|
-
| 'xsmall'
|
12
|
-
| 'small'
|
13
|
-
| 'medium'
|
14
|
-
| 'large'
|
15
|
-
| 'xlarge'
|
16
|
-
| 'xxlarge'
|
17
|
-
| 'xxxlarge';
|
18
9
|
}
|
19
10
|
|
20
11
|
export const Grid: React.FC<GridItemProps> = ({
|
@@ -22,7 +13,6 @@ export const Grid: React.FC<GridItemProps> = ({
|
|
22
13
|
columns = 2,
|
23
14
|
gap = 'medium',
|
24
15
|
maxWidth,
|
25
|
-
spacingBottom,
|
26
16
|
}) => {
|
27
17
|
return (
|
28
18
|
<div
|
@@ -30,7 +20,6 @@ export const Grid: React.FC<GridItemProps> = ({
|
|
30
20
|
grid: true,
|
31
21
|
[`grid--columns--${columns}`]: columns,
|
32
22
|
[`grid--gap-${gap}`]: gap,
|
33
|
-
[`grid--spacingBottom--${spacingBottom}`]: spacingBottom,
|
34
23
|
})}
|
35
24
|
style={{ maxWidth }}
|
36
25
|
>
|
package/src/react/index.tsx
CHANGED
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"callout-image.d.ts","sourceRoot":"","sources":["../../src/react/callout-image.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAQhC,CAAC"}
|