@contentful/f36-skeleton
Advanced tools
Comparing version 4.16.0 to 4.17.0
# Change Log | ||
## 4.17.0 | ||
### Minor Changes | ||
- [#2169](https://github.com/contentful/forma-36/pull/2169) [`71baf762`](https://github.com/contentful/forma-36/commit/71baf762bc3635730f496dab4113975984878736) Thanks [@denkristoffer](https://github.com/denkristoffer)! - feat(skeleton): enable compound component pattern | ||
### Patch Changes | ||
- Updated dependencies []: | ||
- @contentful/f36-table@4.17.0 | ||
- @contentful/f36-core@4.17.0 | ||
## 4.16.0 | ||
@@ -4,0 +16,0 @@ |
@@ -12,2 +12,3 @@ var $gbt2b$react = require("react"); | ||
$parcel$export(module.exports, "Skeleton", () => $91a57e72ff770234$export$8f31e4c4a37b8e9c); | ||
$parcel$export(module.exports, "SkeletonBodyText", () => $b73b2a08349178b5$export$919fca0c481496d5); | ||
@@ -21,26 +22,4 @@ $parcel$export(module.exports, "SkeletonContainer", () => $8e88ffccb54a3f30$export$66b8cea0c448285); | ||
const $041187023cd1b680$export$cb6ddd830302c2a8 = ({ numberOfLines: numberOfLines = 1 , offsetLeft: offsetLeft = 0 , offsetTop: offsetTop = 0 , lineHeight: lineHeight = 21 , marginBottom: marginBottom = 20 , width: width })=>{ | ||
const getLineWidth = (0, $gbt2b$react.useCallback)((lastLine)=>{ | ||
if (width) return width; | ||
return lastLine ? "80%" : "100%"; | ||
}, [ | ||
width | ||
]); | ||
return /*#__PURE__*/ (0, ($parcel$interopDefault($gbt2b$react))).createElement((0, ($parcel$interopDefault($gbt2b$react))).Fragment, null, Array.from(Array(numberOfLines)).map((_, index)=>/*#__PURE__*/ (0, ($parcel$interopDefault($gbt2b$react))).createElement("rect", { | ||
key: `skeleton-display-text-${index}`, | ||
x: offsetLeft, | ||
y: index * (+lineHeight + +marginBottom) + +offsetTop // eslint-disable-line @typescript-eslint/no-non-null-assertion | ||
, | ||
rx: "0", | ||
ry: "0", | ||
width: getLineWidth(numberOfLines > 1 && numberOfLines - index === 1 // eslint-disable-line @typescript-eslint/no-non-null-assertion | ||
), | ||
height: lineHeight | ||
}))); | ||
}; | ||
$041187023cd1b680$export$cb6ddd830302c2a8.displayName = "SkeletonText"; | ||
const $b73b2a08349178b5$export$919fca0c481496d5 = ({ lineHeight: lineHeight = 16 , marginBottom: marginBottom = 8 , numberOfLines: numberOfLines = 2 , offsetLeft: offsetLeft = 0 , offsetTop: offsetTop = 0 , ...otherProps })=>{ | ||
return /*#__PURE__*/ (0, ($parcel$interopDefault($gbt2b$react))).createElement((0, $041187023cd1b680$export$cb6ddd830302c2a8), { | ||
return /*#__PURE__*/ (0, ($parcel$interopDefault($gbt2b$react))).createElement((0, $91a57e72ff770234$export$8f31e4c4a37b8e9c).Text, { | ||
lineHeight: lineHeight, | ||
@@ -125,3 +104,3 @@ marginBottom: marginBottom, | ||
const $43f386fc7c923d82$export$406e2958a1a2b65d = ({ lineHeight: lineHeight = 21 , marginBottom: marginBottom = 20 , numberOfLines: numberOfLines = 1 , offsetLeft: offsetLeft = 0 , offsetTop: offsetTop = 0 , width: width = 100 , ...otherProps })=>{ | ||
return /*#__PURE__*/ (0, ($parcel$interopDefault($gbt2b$react))).createElement((0, $041187023cd1b680$export$cb6ddd830302c2a8), { | ||
return /*#__PURE__*/ (0, ($parcel$interopDefault($gbt2b$react))).createElement((0, $91a57e72ff770234$export$8f31e4c4a37b8e9c).Text, { | ||
lineHeight: lineHeight, | ||
@@ -160,7 +139,6 @@ marginBottom: marginBottom, | ||
const $ce475dd116a738bd$export$46c6672a9bd39b51 = ()=>{ | ||
return /*#__PURE__*/ (0, ($parcel$interopDefault($gbt2b$react))).createElement((0, $gbt2b$contentfulf36table.TableCell), null, /*#__PURE__*/ (0, ($parcel$interopDefault($gbt2b$react))).createElement((0, $8e88ffccb54a3f30$export$66b8cea0c448285), { | ||
return /*#__PURE__*/ (0, ($parcel$interopDefault($gbt2b$react))).createElement((0, $gbt2b$contentfulf36table.TableCell), null, /*#__PURE__*/ (0, ($parcel$interopDefault($gbt2b$react))).createElement((0, $91a57e72ff770234$export$8f31e4c4a37b8e9c).Container, { | ||
svgHeight: 16 | ||
}, /*#__PURE__*/ (0, ($parcel$interopDefault($gbt2b$react))).createElement((0, $b73b2a08349178b5$export$919fca0c481496d5), { | ||
}, /*#__PURE__*/ (0, ($parcel$interopDefault($gbt2b$react))).createElement((0, $91a57e72ff770234$export$8f31e4c4a37b8e9c).BodyText, { | ||
numberOfLines: 1 | ||
@@ -181,4 +159,41 @@ }))); | ||
const $041187023cd1b680$export$cb6ddd830302c2a8 = ({ numberOfLines: numberOfLines = 1 , offsetLeft: offsetLeft = 0 , offsetTop: offsetTop = 0 , lineHeight: lineHeight = 21 , marginBottom: marginBottom = 20 , width: width })=>{ | ||
const getLineWidth = (0, $gbt2b$react.useCallback)((lastLine)=>{ | ||
if (width) return width; | ||
return lastLine ? "80%" : "100%"; | ||
}, [ | ||
width | ||
]); | ||
return /*#__PURE__*/ (0, ($parcel$interopDefault($gbt2b$react))).createElement((0, ($parcel$interopDefault($gbt2b$react))).Fragment, null, Array.from(Array(numberOfLines)).map((_, index)=>/*#__PURE__*/ (0, ($parcel$interopDefault($gbt2b$react))).createElement("rect", { | ||
key: `skeleton-display-text-${index}`, | ||
x: offsetLeft, | ||
y: index * (+lineHeight + +marginBottom) + +offsetTop // eslint-disable-line @typescript-eslint/no-non-null-assertion | ||
, | ||
rx: "0", | ||
ry: "0", | ||
width: getLineWidth(numberOfLines > 1 && numberOfLines - index === 1 // eslint-disable-line @typescript-eslint/no-non-null-assertion | ||
), | ||
height: lineHeight | ||
}))); | ||
}; | ||
$041187023cd1b680$export$cb6ddd830302c2a8.displayName = "SkeletonText"; | ||
const $91a57e72ff770234$export$8f31e4c4a37b8e9c = {}; | ||
$91a57e72ff770234$export$8f31e4c4a37b8e9c.BodyText = (0, $b73b2a08349178b5$export$919fca0c481496d5); | ||
$91a57e72ff770234$export$8f31e4c4a37b8e9c.Container = (0, $8e88ffccb54a3f30$export$66b8cea0c448285); | ||
$91a57e72ff770234$export$8f31e4c4a37b8e9c.DisplayText = (0, $43f386fc7c923d82$export$406e2958a1a2b65d); | ||
$91a57e72ff770234$export$8f31e4c4a37b8e9c.Image = (0, $e6046a5136031fdb$export$d72bf888bd1ed2bc); | ||
$91a57e72ff770234$export$8f31e4c4a37b8e9c.Row = (0, $78eceaa2147bc1c7$export$8bbcb87f63697989); | ||
$91a57e72ff770234$export$8f31e4c4a37b8e9c.Text = (0, $041187023cd1b680$export$cb6ddd830302c2a8); | ||
//# sourceMappingURL=main.js.map |
@@ -7,26 +7,4 @@ import $59JSH$react, {useCallback as $59JSH$useCallback} from "react"; | ||
const $00f6bdd671a67129$export$cb6ddd830302c2a8 = ({ numberOfLines: numberOfLines = 1 , offsetLeft: offsetLeft = 0 , offsetTop: offsetTop = 0 , lineHeight: lineHeight = 21 , marginBottom: marginBottom = 20 , width: width })=>{ | ||
const getLineWidth = (0, $59JSH$useCallback)((lastLine)=>{ | ||
if (width) return width; | ||
return lastLine ? "80%" : "100%"; | ||
}, [ | ||
width | ||
]); | ||
return /*#__PURE__*/ (0, $59JSH$react).createElement((0, $59JSH$react).Fragment, null, Array.from(Array(numberOfLines)).map((_, index)=>/*#__PURE__*/ (0, $59JSH$react).createElement("rect", { | ||
key: `skeleton-display-text-${index}`, | ||
x: offsetLeft, | ||
y: index * (+lineHeight + +marginBottom) + +offsetTop // eslint-disable-line @typescript-eslint/no-non-null-assertion | ||
, | ||
rx: "0", | ||
ry: "0", | ||
width: getLineWidth(numberOfLines > 1 && numberOfLines - index === 1 // eslint-disable-line @typescript-eslint/no-non-null-assertion | ||
), | ||
height: lineHeight | ||
}))); | ||
}; | ||
$00f6bdd671a67129$export$cb6ddd830302c2a8.displayName = "SkeletonText"; | ||
const $20cd7b984354214c$export$919fca0c481496d5 = ({ lineHeight: lineHeight = 16 , marginBottom: marginBottom = 8 , numberOfLines: numberOfLines = 2 , offsetLeft: offsetLeft = 0 , offsetTop: offsetTop = 0 , ...otherProps })=>{ | ||
return /*#__PURE__*/ (0, $59JSH$react).createElement((0, $00f6bdd671a67129$export$cb6ddd830302c2a8), { | ||
return /*#__PURE__*/ (0, $59JSH$react).createElement((0, $7477401eaec262fa$export$8f31e4c4a37b8e9c).Text, { | ||
lineHeight: lineHeight, | ||
@@ -111,3 +89,3 @@ marginBottom: marginBottom, | ||
const $8d8b0c86f35f77bf$export$406e2958a1a2b65d = ({ lineHeight: lineHeight = 21 , marginBottom: marginBottom = 20 , numberOfLines: numberOfLines = 1 , offsetLeft: offsetLeft = 0 , offsetTop: offsetTop = 0 , width: width = 100 , ...otherProps })=>{ | ||
return /*#__PURE__*/ (0, $59JSH$react).createElement((0, $00f6bdd671a67129$export$cb6ddd830302c2a8), { | ||
return /*#__PURE__*/ (0, $59JSH$react).createElement((0, $7477401eaec262fa$export$8f31e4c4a37b8e9c).Text, { | ||
lineHeight: lineHeight, | ||
@@ -146,7 +124,6 @@ marginBottom: marginBottom, | ||
const $30c71ab4212f826c$export$46c6672a9bd39b51 = ()=>{ | ||
return /*#__PURE__*/ (0, $59JSH$react).createElement((0, $59JSH$TableCell), null, /*#__PURE__*/ (0, $59JSH$react).createElement((0, $5ce6df81e0e6093a$export$66b8cea0c448285), { | ||
return /*#__PURE__*/ (0, $59JSH$react).createElement((0, $59JSH$TableCell), null, /*#__PURE__*/ (0, $59JSH$react).createElement((0, $7477401eaec262fa$export$8f31e4c4a37b8e9c).Container, { | ||
svgHeight: 16 | ||
}, /*#__PURE__*/ (0, $59JSH$react).createElement((0, $20cd7b984354214c$export$919fca0c481496d5), { | ||
}, /*#__PURE__*/ (0, $59JSH$react).createElement((0, $7477401eaec262fa$export$8f31e4c4a37b8e9c).BodyText, { | ||
numberOfLines: 1 | ||
@@ -167,5 +144,42 @@ }))); | ||
const $00f6bdd671a67129$export$cb6ddd830302c2a8 = ({ numberOfLines: numberOfLines = 1 , offsetLeft: offsetLeft = 0 , offsetTop: offsetTop = 0 , lineHeight: lineHeight = 21 , marginBottom: marginBottom = 20 , width: width })=>{ | ||
const getLineWidth = (0, $59JSH$useCallback)((lastLine)=>{ | ||
if (width) return width; | ||
return lastLine ? "80%" : "100%"; | ||
}, [ | ||
width | ||
]); | ||
return /*#__PURE__*/ (0, $59JSH$react).createElement((0, $59JSH$react).Fragment, null, Array.from(Array(numberOfLines)).map((_, index)=>/*#__PURE__*/ (0, $59JSH$react).createElement("rect", { | ||
key: `skeleton-display-text-${index}`, | ||
x: offsetLeft, | ||
y: index * (+lineHeight + +marginBottom) + +offsetTop // eslint-disable-line @typescript-eslint/no-non-null-assertion | ||
, | ||
rx: "0", | ||
ry: "0", | ||
width: getLineWidth(numberOfLines > 1 && numberOfLines - index === 1 // eslint-disable-line @typescript-eslint/no-non-null-assertion | ||
), | ||
height: lineHeight | ||
}))); | ||
}; | ||
$00f6bdd671a67129$export$cb6ddd830302c2a8.displayName = "SkeletonText"; | ||
export {$20cd7b984354214c$export$919fca0c481496d5 as SkeletonBodyText, $5ce6df81e0e6093a$export$66b8cea0c448285 as SkeletonContainer, $8d8b0c86f35f77bf$export$406e2958a1a2b65d as SkeletonDisplayText, $fb0ca3c3a071df41$export$d72bf888bd1ed2bc as SkeletonImage, $e08101ed77535408$export$8bbcb87f63697989 as SkeletonRow, $00f6bdd671a67129$export$cb6ddd830302c2a8 as SkeletonText}; | ||
const $7477401eaec262fa$export$8f31e4c4a37b8e9c = {}; | ||
$7477401eaec262fa$export$8f31e4c4a37b8e9c.BodyText = (0, $20cd7b984354214c$export$919fca0c481496d5); | ||
$7477401eaec262fa$export$8f31e4c4a37b8e9c.Container = (0, $5ce6df81e0e6093a$export$66b8cea0c448285); | ||
$7477401eaec262fa$export$8f31e4c4a37b8e9c.DisplayText = (0, $8d8b0c86f35f77bf$export$406e2958a1a2b65d); | ||
$7477401eaec262fa$export$8f31e4c4a37b8e9c.Image = (0, $fb0ca3c3a071df41$export$d72bf888bd1ed2bc); | ||
$7477401eaec262fa$export$8f31e4c4a37b8e9c.Row = (0, $e08101ed77535408$export$8bbcb87f63697989); | ||
$7477401eaec262fa$export$8f31e4c4a37b8e9c.Text = (0, $00f6bdd671a67129$export$cb6ddd830302c2a8); | ||
export {$7477401eaec262fa$export$8f31e4c4a37b8e9c as Skeleton, $20cd7b984354214c$export$919fca0c481496d5 as SkeletonBodyText, $5ce6df81e0e6093a$export$66b8cea0c448285 as SkeletonContainer, $8d8b0c86f35f77bf$export$406e2958a1a2b65d as SkeletonDisplayText, $fb0ca3c3a071df41$export$d72bf888bd1ed2bc as SkeletonImage, $e08101ed77535408$export$8bbcb87f63697989 as SkeletonRow, $00f6bdd671a67129$export$cb6ddd830302c2a8 as SkeletonText}; | ||
//# sourceMappingURL=module.js.map |
@@ -113,3 +113,12 @@ import React from "react"; | ||
export const SkeletonRow: ({ columnCount, rowCount, }: SkeletonRowProps) => JSX.Element; | ||
type CompoundSkeleton = { | ||
BodyText: typeof SkeletonBodyText; | ||
Container: typeof SkeletonContainer; | ||
DisplayText: typeof SkeletonDisplayText; | ||
Image: typeof SkeletonImage; | ||
Row: typeof SkeletonRow; | ||
Text: typeof SkeletonText; | ||
}; | ||
export const Skeleton: CompoundSkeleton; | ||
//# sourceMappingURL=types.d.ts.map |
{ | ||
"name": "@contentful/f36-skeleton", | ||
"version": "4.16.0", | ||
"version": "4.17.0", | ||
"description": "Forma 36: Skeleton component", | ||
@@ -10,4 +10,4 @@ "scripts": { | ||
"@babel/runtime": "^7.6.2", | ||
"@contentful/f36-core": "^4.16.0", | ||
"@contentful/f36-table": "^4.16.0", | ||
"@contentful/f36-core": "^4.17.0", | ||
"@contentful/f36-table": "^4.17.0", | ||
"@contentful/f36-tokens": "^4.0.1", | ||
@@ -14,0 +14,0 @@ "emotion": "^10.0.17" |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
75142
427
104