Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@contentful/f36-skeleton
Advanced tools
@contentful/f36-skeleton - npm Package Compare versions
Comparing version 4.0.1-next-v4-9789.2434 to 4.0.1-next-v4-9898.2438
178
dist/main.js
@@ -1,2 +0,178 @@ | ||
| var e=f(require("@babel/runtime/helpers/extends")),t=require("react"),n=f(t),{useCallback:r}=t,{Box:o,useId:i}=require("@contentful/f36-core"),{TableRow:a,TableCell:l}=require("@contentful/f36-table");function s(e,t,n,r){Object.defineProperty(e,t,{get:n,set:r,enumerable:!0,configurable:!0})}function f(e){return e&&e.__esModule?e.default:e}var c={};function u({numberOfLines:e=1,offsetLeft:t=0,offsetTop:o=0,lineHeight:i=21,marginBottom:a=20,width:l}){const s=r((e=>l||(e?"80%":"100%")),[l]);return n.createElement(n.Fragment,null,Array.from(Array(e)).map(((r,l)=>n.createElement("rect",{key:`skeleton-display-text-${l}`,x:t,y:l*(+i+ +a)+ +o,rx:"0",ry:"0",width:s(e>1&&e-l==1),height:i}))))}s(c,"SkeletonBodyText",(()=>m)),s(c,"SkeletonContainer",(()=>d)),s(c,"SkeletonDisplayText",(()=>p)),s(c,"SkeletonImage",(()=>g)),s(c,"SkeletonRow",(()=>b)),s(c,"SkeletonText",(()=>u));const m=({lineHeight:t=16,marginBottom:r=8,numberOfLines:o=2,offsetLeft:i=0,offsetTop:a=0,...l})=>n.createElement(u,e({lineHeight:t,marginBottom:r,numberOfLines:o>0?o:1,offsetLeft:i,offsetTop:a},l));function d({children:t,testId:r="cf-ui-skeleton-form",ariaLabel:a="Loading component...",width:l="100%",height:s="100%",preserveAspectRatio:f,backgroundColor:c="#e5ebed",backgroundOpacity:u=1,isAnimated:m=!0,speed:d=2,foregroundColor:p="#f7f9fa",foregroundOpacity:g=1,svgWidth:h="100%",svgHeight:b="100%",clipId:y,gradientId:E,animateId:k,...$}){const L=i(y,"cf-ui-skeleton-clip"),O=i(E,"cf-ui-skeleton-clip-gradient"),v=i(void 0,"animation"),C=k||v;return n.createElement(o,e({as:"svg",display:"block",role:"img","aria-label":a,preserveAspectRatio:f,width:h,height:b,testId:r},$),a?n.createElement("title",null,a):null,n.createElement("rect",{x:"0",y:"0",width:l,height:s,clipPath:`url(#${L})`,style:{fill:`url(#${O})`}}),n.createElement("defs",null,n.createElement("clipPath",{id:L},t),n.createElement("linearGradient",{id:O},n.createElement("stop",{offset:"0%",stopColor:c,stopOpacity:u},m&&n.createElement("animate",{id:C,attributeName:"stop-color",values:`${c}; ${p}; ${c}`,dur:`${d}s`,repeatCount:"indefinite"})),n.createElement("stop",{offset:"50%",stopColor:p,stopOpacity:g},m&&n.createElement("animate",{attributeName:"stop-color",values:`${c}; ${p}; ${c}`,begin:`${C}.begin+0.25s`,dur:`${d}s`,repeatCount:"indefinite"})),n.createElement("stop",{offset:"100%",stopColor:c,stopOpacity:u},m&&n.createElement("animate",{attributeName:"stop-color",begin:`${C}.begin+0.5s`,values:`${c}; ${p}; ${c}`,dur:`${d}s`,repeatCount:"indefinite"})))))}function p({lineHeight:t=21,marginBottom:r=20,numberOfLines:o=1,offsetLeft:i=0,offsetTop:a=0,width:l=100,...s}){return n.createElement(u,e({lineHeight:t,marginBottom:r,numberOfLines:o,offsetLeft:i,offsetTop:a,width:l},s))}function g({testId:t="cf-ui-skeleton-image",offsetLeft:r,offsetTop:o,width:i=70,height:a=70,radiusX:l=0,radiusY:s=0,...f}){return n.createElement("rect",e({x:r,y:o,rx:l,ry:s,width:i,height:a,"data-test-id":t},f))}const h=()=>n.createElement(l,null,n.createElement(d,{svgHeight:16},n.createElement(m,{numberOfLines:1}))),b=({columnCount:e=5,rowCount:t=1})=>n.createElement(n.Fragment,null,Array.from(Array(t)).map(((t,r)=>n.createElement(a,{key:r},Array.from(Array(e)).map(((e,t)=>n.createElement(h,{key:t})))))));var y,E;y=module.exports,E=c,Object.keys(E).forEach((function(e){"default"!==e&&"__esModule"!==e&&Object.defineProperty(y,e,{enumerable:!0,get:function(){return E[e]}})})); | ||
| var $gbt2b$react = require("react"); | ||
| var $gbt2b$contentfulf36core = require("@contentful/f36-core"); | ||
| var $gbt2b$contentfulf36table = require("@contentful/f36-table"); | ||
| function $parcel$export(e, n, v, s) { | ||
| Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true}); | ||
| } | ||
| function $parcel$interopDefault(a) { | ||
| return a && a.__esModule ? a.default : a; | ||
| } | ||
| $parcel$export(module.exports, "SkeletonBodyText", () => $b73b2a08349178b5$export$919fca0c481496d5); | ||
| $parcel$export(module.exports, "SkeletonContainer", () => $8e88ffccb54a3f30$export$66b8cea0c448285); | ||
| $parcel$export(module.exports, "SkeletonDisplayText", () => $43f386fc7c923d82$export$406e2958a1a2b65d); | ||
| $parcel$export(module.exports, "SkeletonImage", () => $e6046a5136031fdb$export$d72bf888bd1ed2bc); | ||
| $parcel$export(module.exports, "SkeletonRow", () => $78eceaa2147bc1c7$export$8bbcb87f63697989); | ||
| $parcel$export(module.exports, "SkeletonText", () => $041187023cd1b680$export$cb6ddd830302c2a8); | ||
| function $041187023cd1b680$export$cb6ddd830302c2a8({ numberOfLines: numberOfLines = 1 , offsetLeft: offsetLeft = 0 , offsetTop: offsetTop = 0 , lineHeight: lineHeight = 21 , marginBottom: marginBottom = 20 , width: width }) { | ||
| const getLineWidth = $gbt2b$react.useCallback((lastLine)=>{ | ||
| if (width) return width; | ||
| return lastLine ? '80%' : '100%'; | ||
| }, [ | ||
| width | ||
| ]); | ||
| return(/*#__PURE__*/ $parcel$interopDefault($gbt2b$react).createElement($parcel$interopDefault($gbt2b$react).Fragment, null, Array.from(Array(numberOfLines)).map((_, index)=>/*#__PURE__*/ $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 | ||
| }) | ||
| ))); | ||
| } | ||
| const $b73b2a08349178b5$export$919fca0c481496d5 = ({ lineHeight: lineHeight = 16 , marginBottom: marginBottom = 8 , numberOfLines: numberOfLines = 2 , offsetLeft: offsetLeft = 0 , offsetTop: offsetTop = 0 , ...otherProps })=>{ | ||
| return(/*#__PURE__*/ $parcel$interopDefault($gbt2b$react).createElement($041187023cd1b680$export$cb6ddd830302c2a8, { | ||
| lineHeight: lineHeight, | ||
| marginBottom: marginBottom, | ||
| numberOfLines: numberOfLines > 0 // eslint-disable-line @typescript-eslint/no-non-null-assertion | ||
| ? numberOfLines : 1, | ||
| offsetLeft: offsetLeft, | ||
| offsetTop: offsetTop, | ||
| ...otherProps | ||
| })); | ||
| }; | ||
| function $8e88ffccb54a3f30$export$66b8cea0c448285({ children: children , testId: testId = 'cf-ui-skeleton-form' , ariaLabel: ariaLabel = 'Loading component...' , width: width = '100%' , height: height = '100%' , preserveAspectRatio: preserveAspectRatio , backgroundColor: backgroundColor = '#e5ebed' , backgroundOpacity: backgroundOpacity = 1 , isAnimated: isAnimated = true , speed: speed = 2 , foregroundColor: foregroundColor = '#f7f9fa' , foregroundOpacity: foregroundOpacity = 1 , svgWidth: svgWidth = '100%' , svgHeight: svgHeight = '100%' , clipId: clipId , gradientId: gradientId , animateId: animateId , ...otherProps }) { | ||
| const uniqueClipId = $gbt2b$contentfulf36core.useId(clipId, 'cf-ui-skeleton-clip'); | ||
| const uniqueGradientId = $gbt2b$contentfulf36core.useId(gradientId, 'cf-ui-skeleton-clip-gradient'); | ||
| const randomAnimateId = $gbt2b$contentfulf36core.useId(undefined, 'animation'); | ||
| const uniqueAnimateId = animateId || randomAnimateId; | ||
| return(/*#__PURE__*/ $parcel$interopDefault($gbt2b$react).createElement($gbt2b$contentfulf36core.Box, { | ||
| as: "svg", | ||
| display: "block", | ||
| role: "img", | ||
| "aria-label": ariaLabel, | ||
| preserveAspectRatio: preserveAspectRatio, | ||
| width: svgWidth, | ||
| height: svgHeight, | ||
| testId: testId, | ||
| ...otherProps | ||
| }, ariaLabel ? /*#__PURE__*/ $parcel$interopDefault($gbt2b$react).createElement("title", null, ariaLabel) : null, /*#__PURE__*/ $parcel$interopDefault($gbt2b$react).createElement("rect", { | ||
| x: "0", | ||
| y: "0", | ||
| width: width, | ||
| height: height, | ||
| clipPath: `url(#${uniqueClipId})`, | ||
| style: { | ||
| fill: `url(#${uniqueGradientId})` | ||
| } | ||
| }), /*#__PURE__*/ $parcel$interopDefault($gbt2b$react).createElement("defs", null, /*#__PURE__*/ $parcel$interopDefault($gbt2b$react).createElement("clipPath", { | ||
| id: uniqueClipId | ||
| }, children), /*#__PURE__*/ $parcel$interopDefault($gbt2b$react).createElement("linearGradient", { | ||
| id: uniqueGradientId | ||
| }, /*#__PURE__*/ $parcel$interopDefault($gbt2b$react).createElement("stop", { | ||
| offset: "0%", | ||
| stopColor: backgroundColor, | ||
| stopOpacity: backgroundOpacity | ||
| }, isAnimated && /*#__PURE__*/ $parcel$interopDefault($gbt2b$react).createElement("animate", { | ||
| id: uniqueAnimateId, | ||
| attributeName: "stop-color", | ||
| values: `${backgroundColor}; ${foregroundColor}; ${backgroundColor}`, | ||
| dur: `${speed}s`, | ||
| repeatCount: "indefinite" | ||
| })), /*#__PURE__*/ $parcel$interopDefault($gbt2b$react).createElement("stop", { | ||
| offset: "50%", | ||
| stopColor: foregroundColor, | ||
| stopOpacity: foregroundOpacity | ||
| }, isAnimated && /*#__PURE__*/ $parcel$interopDefault($gbt2b$react).createElement("animate", { | ||
| attributeName: "stop-color", | ||
| values: `${backgroundColor}; ${foregroundColor}; ${backgroundColor}`, | ||
| begin: `${uniqueAnimateId}.begin+0.25s`, | ||
| dur: `${speed}s`, | ||
| repeatCount: "indefinite" | ||
| })), /*#__PURE__*/ $parcel$interopDefault($gbt2b$react).createElement("stop", { | ||
| offset: "100%", | ||
| stopColor: backgroundColor, | ||
| stopOpacity: backgroundOpacity | ||
| }, isAnimated && /*#__PURE__*/ $parcel$interopDefault($gbt2b$react).createElement("animate", { | ||
| attributeName: "stop-color", | ||
| begin: `${uniqueAnimateId}.begin+0.5s`, | ||
| values: `${backgroundColor}; ${foregroundColor}; ${backgroundColor}`, | ||
| dur: `${speed}s`, | ||
| repeatCount: "indefinite" | ||
| })))))); | ||
| } | ||
| function $43f386fc7c923d82$export$406e2958a1a2b65d({ lineHeight: lineHeight = 21 , marginBottom: marginBottom = 20 , numberOfLines: numberOfLines = 1 , offsetLeft: offsetLeft = 0 , offsetTop: offsetTop = 0 , width: width = 100 , ...otherProps }) { | ||
| return(/*#__PURE__*/ $parcel$interopDefault($gbt2b$react).createElement($041187023cd1b680$export$cb6ddd830302c2a8, { | ||
| lineHeight: lineHeight, | ||
| marginBottom: marginBottom, | ||
| numberOfLines: numberOfLines, | ||
| offsetLeft: offsetLeft, | ||
| offsetTop: offsetTop, | ||
| width: width, | ||
| ...otherProps | ||
| })); | ||
| } | ||
| function $e6046a5136031fdb$export$d72bf888bd1ed2bc({ testId: testId = 'cf-ui-skeleton-image' , offsetLeft: offsetLeft , offsetTop: offsetTop , width: width = 70 , height: height = 70 , radiusX: radiusX = 0 , radiusY: radiusY = 0 , ...otherProps }) { | ||
| return(/*#__PURE__*/ $parcel$interopDefault($gbt2b$react).createElement("rect", { | ||
| x: offsetLeft, | ||
| y: offsetTop, | ||
| rx: radiusX, | ||
| ry: radiusY, | ||
| width: width, | ||
| height: height, | ||
| "data-test-id": testId, | ||
| ...otherProps | ||
| })); | ||
| } | ||
| const $ce475dd116a738bd$export$46c6672a9bd39b51 = ()=>{ | ||
| return(/*#__PURE__*/ $parcel$interopDefault($gbt2b$react).createElement($gbt2b$contentfulf36table.TableCell, null, /*#__PURE__*/ $parcel$interopDefault($gbt2b$react).createElement($8e88ffccb54a3f30$export$66b8cea0c448285, { | ||
| svgHeight: 16 | ||
| }, /*#__PURE__*/ $parcel$interopDefault($gbt2b$react).createElement($b73b2a08349178b5$export$919fca0c481496d5, { | ||
| numberOfLines: 1 | ||
| })))); | ||
| }; | ||
| const $78eceaa2147bc1c7$export$8bbcb87f63697989 = ({ columnCount: columnCount = 5 , rowCount: rowCount = 1 })=>{ | ||
| return(/*#__PURE__*/ $parcel$interopDefault($gbt2b$react).createElement($parcel$interopDefault($gbt2b$react).Fragment, null, Array.from(Array(rowCount)).map((_, rowIndex)=>/*#__PURE__*/ $parcel$interopDefault($gbt2b$react).createElement($gbt2b$contentfulf36table.TableRow, { | ||
| key: rowIndex | ||
| }, Array.from(Array(columnCount)).map((_, cellIndex)=>/*#__PURE__*/ $parcel$interopDefault($gbt2b$react).createElement($ce475dd116a738bd$export$46c6672a9bd39b51, { | ||
| key: cellIndex | ||
| }) | ||
| )) | ||
| ))); | ||
| }; | ||
| //# sourceMappingURL=main.js.map |
@@ -1,2 +0,166 @@ | ||
| import e from"@babel/runtime/helpers/esm/extends";import t,{useCallback as n}from"react";import{Box as o,useId as r}from"@contentful/f36-core";import{TableRow as a,TableCell as i}from"@contentful/f36-table";function l(e,t,n,o){Object.defineProperty(e,t,{get:n,set:o,enumerable:!0,configurable:!0})}var s={};function f({numberOfLines:e=1,offsetLeft:o=0,offsetTop:r=0,lineHeight:a=21,marginBottom:i=20,width:l}){const s=n((e=>l||(e?"80%":"100%")),[l]);return t.createElement(t.Fragment,null,Array.from(Array(e)).map(((n,l)=>t.createElement("rect",{key:`skeleton-display-text-${l}`,x:o,y:l*(+a+ +i)+ +r,rx:"0",ry:"0",width:s(e>1&&e-l==1),height:a}))))}l(s,"SkeletonBodyText",(()=>m)),l(s,"SkeletonContainer",(()=>c)),l(s,"SkeletonDisplayText",(()=>u)),l(s,"SkeletonImage",(()=>p)),l(s,"SkeletonRow",(()=>g)),l(s,"SkeletonText",(()=>f));const m=({lineHeight:n=16,marginBottom:o=8,numberOfLines:r=2,offsetLeft:a=0,offsetTop:i=0,...l})=>t.createElement(f,e({lineHeight:n,marginBottom:o,numberOfLines:r>0?r:1,offsetLeft:a,offsetTop:i},l));function c({children:n,testId:a="cf-ui-skeleton-form",ariaLabel:i="Loading component...",width:l="100%",height:s="100%",preserveAspectRatio:f,backgroundColor:m="#e5ebed",backgroundOpacity:c=1,isAnimated:u=!0,speed:p=2,foregroundColor:d="#f7f9fa",foregroundOpacity:g=1,svgWidth:h="100%",svgHeight:b="100%",clipId:y,gradientId:k,animateId:E,...$}){const x=r(y,"cf-ui-skeleton-clip"),C=r(k,"cf-ui-skeleton-clip-gradient"),L=r(void 0,"animation"),T=E||L;return t.createElement(o,e({as:"svg",display:"block",role:"img","aria-label":i,preserveAspectRatio:f,width:h,height:b,testId:a},$),i?t.createElement("title",null,i):null,t.createElement("rect",{x:"0",y:"0",width:l,height:s,clipPath:`url(#${x})`,style:{fill:`url(#${C})`}}),t.createElement("defs",null,t.createElement("clipPath",{id:x},n),t.createElement("linearGradient",{id:C},t.createElement("stop",{offset:"0%",stopColor:m,stopOpacity:c},u&&t.createElement("animate",{id:T,attributeName:"stop-color",values:`${m}; ${d}; ${m}`,dur:`${p}s`,repeatCount:"indefinite"})),t.createElement("stop",{offset:"50%",stopColor:d,stopOpacity:g},u&&t.createElement("animate",{attributeName:"stop-color",values:`${m}; ${d}; ${m}`,begin:`${T}.begin+0.25s`,dur:`${p}s`,repeatCount:"indefinite"})),t.createElement("stop",{offset:"100%",stopColor:m,stopOpacity:c},u&&t.createElement("animate",{attributeName:"stop-color",begin:`${T}.begin+0.5s`,values:`${m}; ${d}; ${m}`,dur:`${p}s`,repeatCount:"indefinite"})))))}function u({lineHeight:n=21,marginBottom:o=20,numberOfLines:r=1,offsetLeft:a=0,offsetTop:i=0,width:l=100,...s}){return t.createElement(f,e({lineHeight:n,marginBottom:o,numberOfLines:r,offsetLeft:a,offsetTop:i,width:l},s))}function p({testId:n="cf-ui-skeleton-image",offsetLeft:o,offsetTop:r,width:a=70,height:i=70,radiusX:l=0,radiusY:s=0,...f}){return t.createElement("rect",e({x:o,y:r,rx:l,ry:s,width:a,height:i,"data-test-id":n},f))}const d=()=>t.createElement(i,null,t.createElement(c,{svgHeight:16},t.createElement(m,{numberOfLines:1}))),g=({columnCount:e=5,rowCount:n=1})=>t.createElement(t.Fragment,null,Array.from(Array(n)).map(((n,o)=>t.createElement(a,{key:o},Array.from(Array(e)).map(((e,n)=>t.createElement(d,{key:n})))))));export{m as SkeletonBodyText,c as SkeletonContainer,u as SkeletonDisplayText,p as SkeletonImage,g as SkeletonRow,f as SkeletonText}; | ||
| import $59JSH$react, {useCallback as $59JSH$useCallback} from "react"; | ||
| import {useId as $59JSH$useId, Box as $59JSH$Box} from "@contentful/f36-core"; | ||
| import {TableRow as $59JSH$TableRow, TableCell as $59JSH$TableCell} from "@contentful/f36-table"; | ||
| function $00f6bdd671a67129$export$cb6ddd830302c2a8({ numberOfLines: numberOfLines = 1 , offsetLeft: offsetLeft = 0 , offsetTop: offsetTop = 0 , lineHeight: lineHeight = 21 , marginBottom: marginBottom = 20 , width: width }) { | ||
| const getLineWidth = $59JSH$useCallback((lastLine)=>{ | ||
| if (width) return width; | ||
| return lastLine ? '80%' : '100%'; | ||
| }, [ | ||
| width | ||
| ]); | ||
| return(/*#__PURE__*/ $59JSH$react.createElement($59JSH$react.Fragment, null, Array.from(Array(numberOfLines)).map((_, index)=>/*#__PURE__*/ $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 | ||
| }) | ||
| ))); | ||
| } | ||
| const $20cd7b984354214c$export$919fca0c481496d5 = ({ lineHeight: lineHeight = 16 , marginBottom: marginBottom = 8 , numberOfLines: numberOfLines = 2 , offsetLeft: offsetLeft = 0 , offsetTop: offsetTop = 0 , ...otherProps })=>{ | ||
| return(/*#__PURE__*/ $59JSH$react.createElement($00f6bdd671a67129$export$cb6ddd830302c2a8, { | ||
| lineHeight: lineHeight, | ||
| marginBottom: marginBottom, | ||
| numberOfLines: numberOfLines > 0 // eslint-disable-line @typescript-eslint/no-non-null-assertion | ||
| ? numberOfLines : 1, | ||
| offsetLeft: offsetLeft, | ||
| offsetTop: offsetTop, | ||
| ...otherProps | ||
| })); | ||
| }; | ||
| function $5ce6df81e0e6093a$export$66b8cea0c448285({ children: children , testId: testId = 'cf-ui-skeleton-form' , ariaLabel: ariaLabel = 'Loading component...' , width: width = '100%' , height: height = '100%' , preserveAspectRatio: preserveAspectRatio , backgroundColor: backgroundColor = '#e5ebed' , backgroundOpacity: backgroundOpacity = 1 , isAnimated: isAnimated = true , speed: speed = 2 , foregroundColor: foregroundColor = '#f7f9fa' , foregroundOpacity: foregroundOpacity = 1 , svgWidth: svgWidth = '100%' , svgHeight: svgHeight = '100%' , clipId: clipId , gradientId: gradientId , animateId: animateId , ...otherProps }) { | ||
| const uniqueClipId = $59JSH$useId(clipId, 'cf-ui-skeleton-clip'); | ||
| const uniqueGradientId = $59JSH$useId(gradientId, 'cf-ui-skeleton-clip-gradient'); | ||
| const randomAnimateId = $59JSH$useId(undefined, 'animation'); | ||
| const uniqueAnimateId = animateId || randomAnimateId; | ||
| return(/*#__PURE__*/ $59JSH$react.createElement($59JSH$Box, { | ||
| as: "svg", | ||
| display: "block", | ||
| role: "img", | ||
| "aria-label": ariaLabel, | ||
| preserveAspectRatio: preserveAspectRatio, | ||
| width: svgWidth, | ||
| height: svgHeight, | ||
| testId: testId, | ||
| ...otherProps | ||
| }, ariaLabel ? /*#__PURE__*/ $59JSH$react.createElement("title", null, ariaLabel) : null, /*#__PURE__*/ $59JSH$react.createElement("rect", { | ||
| x: "0", | ||
| y: "0", | ||
| width: width, | ||
| height: height, | ||
| clipPath: `url(#${uniqueClipId})`, | ||
| style: { | ||
| fill: `url(#${uniqueGradientId})` | ||
| } | ||
| }), /*#__PURE__*/ $59JSH$react.createElement("defs", null, /*#__PURE__*/ $59JSH$react.createElement("clipPath", { | ||
| id: uniqueClipId | ||
| }, children), /*#__PURE__*/ $59JSH$react.createElement("linearGradient", { | ||
| id: uniqueGradientId | ||
| }, /*#__PURE__*/ $59JSH$react.createElement("stop", { | ||
| offset: "0%", | ||
| stopColor: backgroundColor, | ||
| stopOpacity: backgroundOpacity | ||
| }, isAnimated && /*#__PURE__*/ $59JSH$react.createElement("animate", { | ||
| id: uniqueAnimateId, | ||
| attributeName: "stop-color", | ||
| values: `${backgroundColor}; ${foregroundColor}; ${backgroundColor}`, | ||
| dur: `${speed}s`, | ||
| repeatCount: "indefinite" | ||
| })), /*#__PURE__*/ $59JSH$react.createElement("stop", { | ||
| offset: "50%", | ||
| stopColor: foregroundColor, | ||
| stopOpacity: foregroundOpacity | ||
| }, isAnimated && /*#__PURE__*/ $59JSH$react.createElement("animate", { | ||
| attributeName: "stop-color", | ||
| values: `${backgroundColor}; ${foregroundColor}; ${backgroundColor}`, | ||
| begin: `${uniqueAnimateId}.begin+0.25s`, | ||
| dur: `${speed}s`, | ||
| repeatCount: "indefinite" | ||
| })), /*#__PURE__*/ $59JSH$react.createElement("stop", { | ||
| offset: "100%", | ||
| stopColor: backgroundColor, | ||
| stopOpacity: backgroundOpacity | ||
| }, isAnimated && /*#__PURE__*/ $59JSH$react.createElement("animate", { | ||
| attributeName: "stop-color", | ||
| begin: `${uniqueAnimateId}.begin+0.5s`, | ||
| values: `${backgroundColor}; ${foregroundColor}; ${backgroundColor}`, | ||
| dur: `${speed}s`, | ||
| repeatCount: "indefinite" | ||
| })))))); | ||
| } | ||
| function $8d8b0c86f35f77bf$export$406e2958a1a2b65d({ lineHeight: lineHeight = 21 , marginBottom: marginBottom = 20 , numberOfLines: numberOfLines = 1 , offsetLeft: offsetLeft = 0 , offsetTop: offsetTop = 0 , width: width = 100 , ...otherProps }) { | ||
| return(/*#__PURE__*/ $59JSH$react.createElement($00f6bdd671a67129$export$cb6ddd830302c2a8, { | ||
| lineHeight: lineHeight, | ||
| marginBottom: marginBottom, | ||
| numberOfLines: numberOfLines, | ||
| offsetLeft: offsetLeft, | ||
| offsetTop: offsetTop, | ||
| width: width, | ||
| ...otherProps | ||
| })); | ||
| } | ||
| function $fb0ca3c3a071df41$export$d72bf888bd1ed2bc({ testId: testId = 'cf-ui-skeleton-image' , offsetLeft: offsetLeft , offsetTop: offsetTop , width: width = 70 , height: height = 70 , radiusX: radiusX = 0 , radiusY: radiusY = 0 , ...otherProps }) { | ||
| return(/*#__PURE__*/ $59JSH$react.createElement("rect", { | ||
| x: offsetLeft, | ||
| y: offsetTop, | ||
| rx: radiusX, | ||
| ry: radiusY, | ||
| width: width, | ||
| height: height, | ||
| "data-test-id": testId, | ||
| ...otherProps | ||
| })); | ||
| } | ||
| const $30c71ab4212f826c$export$46c6672a9bd39b51 = ()=>{ | ||
| return(/*#__PURE__*/ $59JSH$react.createElement($59JSH$TableCell, null, /*#__PURE__*/ $59JSH$react.createElement($5ce6df81e0e6093a$export$66b8cea0c448285, { | ||
| svgHeight: 16 | ||
| }, /*#__PURE__*/ $59JSH$react.createElement($20cd7b984354214c$export$919fca0c481496d5, { | ||
| numberOfLines: 1 | ||
| })))); | ||
| }; | ||
| const $e08101ed77535408$export$8bbcb87f63697989 = ({ columnCount: columnCount = 5 , rowCount: rowCount = 1 })=>{ | ||
| return(/*#__PURE__*/ $59JSH$react.createElement($59JSH$react.Fragment, null, Array.from(Array(rowCount)).map((_, rowIndex)=>/*#__PURE__*/ $59JSH$react.createElement($59JSH$TableRow, { | ||
| key: rowIndex | ||
| }, Array.from(Array(columnCount)).map((_, cellIndex)=>/*#__PURE__*/ $59JSH$react.createElement($30c71ab4212f826c$export$46c6672a9bd39b51, { | ||
| key: cellIndex | ||
| }) | ||
| )) | ||
| ))); | ||
| }; | ||
| 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}; | ||
| //# sourceMappingURL=module.js.map |
| { | ||
| "name": "@contentful/f36-skeleton", | ||
| "version": "4.0.1-next-v4-9789.2434+754dee05", | ||
| "version": "4.0.1-next-v4-9898.2438+c14d4c99", | ||
| "description": "Forma 36: Skeleton component", | ||
| "scripts": { | ||
| "build": "parcel build index.ts" | ||
| "build": "parcel build" | ||
| }, | ||
| "dependencies": { | ||
| "@babel/runtime": "^7.6.2", | ||
| "@contentful/f36-core": "4.0.1-next-v4-9789.2434+754dee05", | ||
| "@contentful/f36-table": "4.0.1-next-v4-9789.2434+754dee05", | ||
| "@contentful/f36-tokens": "4.0.1-next-v4-9789.2434+754dee05", | ||
| "@contentful/f36-core": "4.0.1-next-v4-9898.2438+c14d4c99", | ||
| "@contentful/f36-table": "4.0.1-next-v4-9898.2438+c14d4c99", | ||
| "@contentful/f36-tokens": "4.0.1-next-v4-9898.2438+c14d4c99", | ||
| "emotion": "^10.0.17" | ||
@@ -36,3 +36,3 @@ }, | ||
| }, | ||
| "gitHead": "754dee05f9e188f1492231120e4449a9e4f1992d" | ||
| "gitHead": "c14d4c99c0a87c8905dbe90d5f1dc38dd12d1008" | ||
| } |
| # @contentful/f36-skeleton | ||
| This package is part of the pre-release. This means it is unsupported and subject to breaking changes without warning. | ||
| Please use official, supported version of the library [forma-36](https://github.com/contentful/forma-36/tree/master/packages/forma-36-react-components), [NPM](https://www.npmjs.com/package/@contentful/forma-36-react-components) | ||
| ### Table of contents | ||
| - [`SkeletonContainer`](./src/SkeletonContainer/README.mdx) | ||
| - [`SkeletonBodyText`](./src/SkeletonBodyText/README.mdx) | ||
| - [`SkeletonDisplayText`](./src/SkeletonDisplayText/README.mdx) | ||
| - [`SkeletonImage`](./src/SkeletonImage/README.mdx) | ||
| - [`SkeletonRow`](./src/SkeletonRow/README.mdx) | ||
| Please use official, supported version of the library [forma-36](https://github.com/contentful/forma-36/tree/master/packages/forma-36-react-components), [NPM](https://www.npmjs.com/package/@contentful/forma-36-react-components). |
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
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
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
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
Manifest confusion
Supply chain riskThis package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.
Found 1 instance in 1 package
Fixed alerts
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
Manifest confusion
Supply chain riskThis package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.
Found 1 instance in 1 package
Minified code
QualityThis package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by14.1%
75663
- Lines of code
- increased by53.75%
738
- Number of low quality alerts
- decreased by-33.33%
2
Worsened metrics
- Number of lines in readme file
- decreased by-53.85%
6