@contentful/f36-skeleton - npm Package Compare versions

Comparing version 4.16.0 to 4.17.0

CHANGELOG.md

 # 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 @@

dist/main.js

@@ -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

dist/module.js

@@ -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

dist/types.d.ts

@@ -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

package.json

 {
   "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"

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

75142

increased by13.25%

Lines of code

427

increased by5.96%

Number of lines in readme file

104

increased by940%

Dependency changes

• Updated@contentful/f36-core@^4.17.0

• Updated@contentful/f36-table@^4.17.0