@contentful/f36-spinner 4.0.1-beta.2555 → 4.0.1-beta.2694

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.
Files changed (7) hide show
  1. package/dist/main.js +54 -37
  2. package/dist/main.js.map +1 -1
  3. package/dist/module.js +52 -35
  4. package/dist/module.js.map +1 -1
  5. package/dist/types.d.ts +259 -11
  6. package/dist/types.d.ts.map +1 -1
  7. package/package.json +5 -5
package/dist/main.js CHANGED
@@ -1,3 +1,4 @@
1
+ var $b84Wv$reactjsxruntime = require("react/jsx-runtime");
1
2
  var $b84Wv$emotion = require("emotion");
2
3
  var $b84Wv$react = require("react");
3
4
  var $b84Wv$contentfulf36tokens = require("@contentful/f36-tokens");
@@ -18,6 +19,7 @@ $parcel$export(module.exports, "Spinner", () => $05c01a9aaed28186$export$7f7cbe8
18
19
 
19
20
 
20
21
 
22
+
21
23
  const $ccc4b2a72ca993e7$var$sizes = {
22
24
  large: '36px',
23
25
  medium: '20px',
@@ -81,13 +83,13 @@ const $ccc4b2a72ca993e7$export$ffd58b7f6f099a57 = ()=>{
81
83
 
82
84
  const $05c01a9aaed28186$var$SPINNER_DEFAULT_TAG = 'div';
83
85
  const $05c01a9aaed28186$var$variants = {
84
- default: $parcel$interopDefault($b84Wv$contentfulf36tokens).gray700,
85
- primary: $parcel$interopDefault($b84Wv$contentfulf36tokens).colorPrimary,
86
- white: $parcel$interopDefault($b84Wv$contentfulf36tokens).colorWhite
86
+ default: ($parcel$interopDefault($b84Wv$contentfulf36tokens)).gray700,
87
+ primary: ($parcel$interopDefault($b84Wv$contentfulf36tokens)).colorPrimary,
88
+ white: ($parcel$interopDefault($b84Wv$contentfulf36tokens)).colorWhite
87
89
  };
88
90
  const $05c01a9aaed28186$export$7f7cbe89f1eacd2 = /*#__PURE__*/ $b84Wv$react.forwardRef(({ className: className , customSize: customSize , size: size = 'medium' , variant: variant = 'default' , testId: testId = 'cf-ui-spinner' , ...otherProps }, forwardedRef)=>{
89
91
  const styles = $ccc4b2a72ca993e7$export$ffd58b7f6f099a57();
90
- return(/*#__PURE__*/ $parcel$interopDefault($b84Wv$react).createElement($b84Wv$contentfulf36core.Box, {
92
+ return(/*#__PURE__*/ $b84Wv$reactjsxruntime.jsx($b84Wv$contentfulf36core.Box, {
91
93
  as: $05c01a9aaed28186$var$SPINNER_DEFAULT_TAG,
92
94
  display: "inline-block",
93
95
  ...otherProps,
@@ -96,39 +98,54 @@ const $05c01a9aaed28186$export$7f7cbe89f1eacd2 = /*#__PURE__*/ $b84Wv$react.forw
96
98
  customSize: customSize
97
99
  }), className),
98
100
  ref: forwardedRef,
99
- testId: testId
100
- }, /*#__PURE__*/ $parcel$interopDefault($b84Wv$react).createElement("svg", {
101
- className: $b84Wv$emotion.css({
102
- display: 'block',
103
- fill: $05c01a9aaed28186$var$variants[variant]
104
- }),
105
- viewBox: "0 0 60 51",
106
- xmlns: "http://www.w3.org/2000/svg"
107
- }, /*#__PURE__*/ $parcel$interopDefault($b84Wv$react).createElement("title", null, "Loading…"), /*#__PURE__*/ $parcel$interopDefault($b84Wv$react).createElement("g", {
108
- className: styles.circle1Translate,
109
- transform: "translate(10,33.528168)"
110
- }, /*#__PURE__*/ $parcel$interopDefault($b84Wv$react).createElement("g", {
111
- className: styles.circle1Scale
112
- }, /*#__PURE__*/ $parcel$interopDefault($b84Wv$react).createElement("circle", {
113
- r: "6",
114
- transform: "translate(0,10.471832)"
115
- }))), /*#__PURE__*/ $parcel$interopDefault($b84Wv$react).createElement("g", {
116
- className: styles.circle2Translate,
117
- transform: "translate(30,33.528168)"
118
- }, /*#__PURE__*/ $parcel$interopDefault($b84Wv$react).createElement("g", {
119
- className: styles.circle2Scale
120
- }, /*#__PURE__*/ $parcel$interopDefault($b84Wv$react).createElement("circle", {
121
- r: "6",
122
- transform: "translate(0,10.471832)"
123
- }))), /*#__PURE__*/ $parcel$interopDefault($b84Wv$react).createElement("g", {
124
- className: styles.circle3Translate,
125
- transform: "translate(50,33.528168)"
126
- }, /*#__PURE__*/ $parcel$interopDefault($b84Wv$react).createElement("g", {
127
- className: styles.circle3Scale
128
- }, /*#__PURE__*/ $parcel$interopDefault($b84Wv$react).createElement("circle", {
129
- r: "6",
130
- transform: "translate(0,10.471832)"
131
- }))))));
101
+ testId: testId,
102
+ children: /*#__PURE__*/ $b84Wv$reactjsxruntime.jsxs("svg", {
103
+ className: $b84Wv$emotion.css({
104
+ display: 'block',
105
+ fill: $05c01a9aaed28186$var$variants[variant]
106
+ }),
107
+ viewBox: "0 0 60 51",
108
+ xmlns: "http://www.w3.org/2000/svg",
109
+ children: [
110
+ /*#__PURE__*/ $b84Wv$reactjsxruntime.jsx("title", {
111
+ children: "Loading…"
112
+ }),
113
+ /*#__PURE__*/ $b84Wv$reactjsxruntime.jsx("g", {
114
+ className: styles.circle1Translate,
115
+ transform: "translate(10,33.528168)",
116
+ children: /*#__PURE__*/ $b84Wv$reactjsxruntime.jsx("g", {
117
+ className: styles.circle1Scale,
118
+ children: /*#__PURE__*/ $b84Wv$reactjsxruntime.jsx("circle", {
119
+ r: "6",
120
+ transform: "translate(0,10.471832)"
121
+ })
122
+ })
123
+ }),
124
+ /*#__PURE__*/ $b84Wv$reactjsxruntime.jsx("g", {
125
+ className: styles.circle2Translate,
126
+ transform: "translate(30,33.528168)",
127
+ children: /*#__PURE__*/ $b84Wv$reactjsxruntime.jsx("g", {
128
+ className: styles.circle2Scale,
129
+ children: /*#__PURE__*/ $b84Wv$reactjsxruntime.jsx("circle", {
130
+ r: "6",
131
+ transform: "translate(0,10.471832)"
132
+ })
133
+ })
134
+ }),
135
+ /*#__PURE__*/ $b84Wv$reactjsxruntime.jsx("g", {
136
+ className: styles.circle3Translate,
137
+ transform: "translate(50,33.528168)",
138
+ children: /*#__PURE__*/ $b84Wv$reactjsxruntime.jsx("g", {
139
+ className: styles.circle3Scale,
140
+ children: /*#__PURE__*/ $b84Wv$reactjsxruntime.jsx("circle", {
141
+ r: "6",
142
+ transform: "translate(0,10.471832)"
143
+ })
144
+ })
145
+ })
146
+ ]
147
+ })
148
+ }));
132
149
  });
133
150
  $05c01a9aaed28186$export$7f7cbe89f1eacd2.displayName = 'Spinner';
134
151
 
package/dist/main.js.map CHANGED
@@ -1 +1 @@
1
- {"mappings":"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","sources":["packages/components/spinner/src/index.ts","packages/components/spinner/src/Spinner.tsx","packages/components/spinner/src/Spinner.styles.ts"],"sourcesContent":["export { Spinner } from './Spinner';\nexport type { SpinnerProps } from './Spinner';\n","import { cx, css } from 'emotion';\nimport React, { forwardRef } from 'react';\nimport tokens from '@contentful/f36-tokens';\nimport { Box } from '@contentful/f36-core';\nimport type { CommonProps, PropsWithHTMLElement } from '@contentful/f36-core';\nimport type { SpinnerSize, SpinnerVariant } from './types';\nimport { getStyles } from './Spinner.styles';\n\nconst SPINNER_DEFAULT_TAG = 'div';\n\nconst variants: { [key in SpinnerVariant]: string } = {\n default: tokens.gray700,\n primary: tokens.colorPrimary,\n white: tokens.colorWhite,\n};\n\nexport type SpinnerInternalProps = CommonProps & {\n /**\n * Determines the color that will be used in the `fill` property of the SVG\n */\n variant?: SpinnerVariant;\n /**\n * Allows resizing the spinner with any N value. The final size will be NxN pixels\n */\n customSize?: number;\n /**\n * Controls the size of the spinner. The default `medium` size is 20px wide,\n * the `small` size is 14px wide, and the `large` size is 36px wide\n */\n size?: SpinnerSize;\n};\n\nexport type SpinnerProps = PropsWithHTMLElement<SpinnerInternalProps, 'div'>;\n\nexport const Spinner = forwardRef<HTMLDivElement, SpinnerProps>(\n (\n {\n className,\n customSize,\n size = 'medium',\n variant = 'default',\n testId = 'cf-ui-spinner',\n ...otherProps\n },\n forwardedRef,\n ) => {\n const styles = getStyles();\n return (\n <Box\n as={SPINNER_DEFAULT_TAG}\n display=\"inline-block\"\n {...otherProps}\n className={cx(styles.root({ size, customSize }), className)}\n ref={forwardedRef}\n testId={testId}\n >\n <svg\n className={css({\n display: 'block',\n fill: variants[variant],\n })}\n viewBox=\"0 0 60 51\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <title>Loading…</title>\n <g\n className={styles.circle1Translate}\n transform=\"translate(10,33.528168)\"\n >\n <g className={styles.circle1Scale}>\n <circle r=\"6\" transform=\"translate(0,10.471832)\" />\n </g>\n </g>\n\n <g\n className={styles.circle2Translate}\n transform=\"translate(30,33.528168)\"\n >\n <g className={styles.circle2Scale}>\n <circle r=\"6\" transform=\"translate(0,10.471832)\" />\n </g>\n </g>\n\n <g\n className={styles.circle3Translate}\n transform=\"translate(50,33.528168)\"\n >\n <g className={styles.circle3Scale}>\n <circle r=\"6\" transform=\"translate(0,10.471832)\" />\n </g>\n </g>\n </svg>\n </Box>\n );\n },\n);\n\nSpinner.displayName = 'Spinner';\n","import { css, keyframes } from 'emotion';\nimport type { SpinnerSize } from './types';\n\nconst sizes: { [key in SpinnerSize]: string } = {\n large: '36px',\n medium: '20px',\n small: '14px',\n};\n\nexport const getStyles = () => {\n const animations = {\n scale1: keyframes`\n 0% {\n transform: scale(1, 1);\n }\n 6.666667% {\n transform: scale(1.5, 0.5);\n }\n 13.333333% {\n transform: scale(1, 1);\n }\n 26.666667% {\n transform: scale(1, 1);\n }\n 33.333333% {\n transform: scale(1, 1);\n }\n 40% {\n transform: scale(1, 1);\n }\n 53.333333% {\n transform: scale(1, 1);\n }\n 60% {\n transform: scale(1.5, 0.5);\n }\n 66.666667% {\n transform: scale(1, 1);\n }\n 100% {\n transform: scale(1, 1);\n }\n `,\n scale2: keyframes`\n 0% {\n transform: scale(1, 1);\n }\n 13.333333% {\n transform: scale(1, 1);\n }\n 20% {\n transform: scale(1.5, 0.5);\n }\n 26.666667% {\n transform: scale(1, 1);\n }\n 40% {\n transform: scale(1, 1);\n }\n 46.666667% {\n transform: scale(1, 1);\n }\n 53.333333% {\n transform: scale(1, 1);\n }\n 66.666667% {\n transform: scale(1, 1);\n }\n 73.333333% {\n transform: scale(1.5, 0.5);\n }\n 80% {\n transform: scale(1, 1);\n }\n 100% {\n transform: scale(1, 1);\n }\n `,\n scale3: keyframes`\n 0% {\n transform: scale(1, 1);\n }\n 26.666667% {\n transform: scale(1, 1);\n }\n 33.333333% {\n transform: scale(1.5, 0.5);\n }\n 40% {\n transform: scale(1, 1);\n }\n 53.333333% {\n transform: scale(1, 1);\n }\n 60% {\n transform: scale(1, 1);\n }\n 66.666667% {\n transform: scale(1, 1);\n }\n 80% {\n transform: scale(1, 1);\n }\n 86.666667% {\n transform: scale(1.5, 0.5);\n }\n 93.333333% {\n transform: scale(1, 1);\n }\n 100% {\n transform: scale(1, 1);\n }\n `,\n translate1: keyframes`\n 0% {\n transform: translate(10px, 33.528168px);\n }\n 6.666667% {\n transform: translate(10px, 41.764084px);\n }\n 13.333333% {\n transform: translate(10px, 33.528168px);\n }\n 26.666667% {\n transform: translate(10px, -2.651608px);\n }\n 33.333333% {\n transform: translate(10px, -4.471832px);\n }\n 40% {\n transform: translate(10px, -2.651608px);\n }\n 53.333333% {\n transform: translate(10px, 33.528168px);\n }\n 60% {\n transform: translate(10px, 41.764084px);\n }\n 66.666667% {\n transform: translate(10px, 33.528168px);\n }\n 100% {\n transform: translate(10px, 33.528168px);\n }\n `,\n translate2: keyframes`\n 0% {\n transform: translate(30px, 33.528168px);\n }\n 13.333333% {\n transform: translate(30px, 33.528168px);\n }\n 20% {\n transform: translate(30px, 41.764084px);\n }\n 26.666667% {\n transform: translate(30px, 33.528168px);\n }\n 40% {\n transform: translate(30px, -2.651608px);\n }\n 46.666667% {\n transform: translate(30px, -4.471832px);\n }\n 53.333333% {\n transform: translate(30px, -2.651608px);\n }\n 66.666667% {\n transform: translate(30px, 33.528168px);\n }\n 73.333333% {\n transform: translate(30px, 41.764084px);\n }\n 80% {\n transform: translate(30px, 33.528168px);\n }\n 100% {\n transform: translate(30px, 33.528168px);\n }\n `,\n translate3: keyframes`\n 0% {\n transform: translate(50px, 33.528168px);\n }\n 26.666667% {\n transform: translate(50px, 33.528168px);\n }\n 33.333333% {\n transform: translate(50px, 41.764084px);\n }\n 40% {\n transform: translate(50px, 33.528168px);\n }\n 53.333333% {\n transform: translate(50px, -2.651608px);\n }\n 60% {\n transform: translate(50px, -4.471832px);\n }\n 66.666667% {\n transform: translate(50px, -2.651608px);\n }\n 80% {\n transform: translate(50px, 33.528168px);\n }\n 86.666667% {\n transform: translate(50px, 41.764084px);\n }\n 93.333333% {\n transform: translate(50px, 33.528168px);\n }\n 100% {\n transform: translate(50px, 33.528168px);\n }\n `,\n };\n\n return {\n root: (props: { size: SpinnerSize; customSize?: number }) =>\n css({\n height: props.customSize ? `${props.customSize}px` : undefined,\n verticalAlign: 'middle',\n width: props.customSize ? `${props.customSize}px` : sizes[props.size],\n }),\n circle1Scale: css({\n animation: `${animations.scale1} 1s linear infinite normal forwards;`,\n }),\n circle2Scale: css({\n animation: `${animations.scale2} 1s linear infinite normal forwards;`,\n }),\n circle3Scale: css({\n animation: `${animations.scale3} 1s linear infinite normal forwards;`,\n }),\n circle1Translate: css({\n animation: `${animations.translate1} 1s linear infinite normal forwards;`,\n }),\n circle2Translate: css({\n animation: `${animations.translate2} 1s linear infinite normal forwards;`,\n }),\n circle3Translate: css({\n animation: `${animations.translate3} 1s linear infinite normal forwards;`,\n }),\n };\n};\n"],"names":["Spinner","SpinnerProps","React","forwardRef","tokens","Box","CommonProps","PropsWithHTMLElement","SpinnerSize","SpinnerVariant","getStyles","SPINNER_DEFAULT_TAG","variants","default","gray700","primary","colorPrimary","white","colorWhite","SpinnerInternalProps","variant","customSize","size","HTMLDivElement","className","testId","otherProps","forwardedRef","styles","root","display","fill","circle1Translate","circle1Scale","circle2Translate","circle2Scale","circle3Translate","circle3Scale","displayName","sizes","large","medium","small","animations","scale1","scale2","scale3","translate1","translate2","translate3","props","height","undefined","verticalAlign","width","animation"],"version":3,"file":"main.js.map"}
1
+ {"mappings":";;;;;;;;;;;;;;;;;;;;;;AEGA,KAAA,CAAMwC,2BAAK,GAAqC,CAAhD;IACEC,KAAK,EAAE,CADuC;IAE9CC,MAAM,EAAE,CAFsC;IAG9CC,KAAK,EAAE,CAAPA;AAH8C,CAAhD;AAMO,KAAA,CAAMhC,yCAAS,OAAS,CAA/B;IACE,KAAA,CAAMiC,UAAU,GAAG,CAAnB;QACEC,MAAM,EAANA,EAAAA,AAAAA,SAAAA,AAAAA,EAAAA,CAAAA,wBAAAA,CAAAA,CAAAA;YAAM,IAAA,EAAA,CAAA;YAAA,MAAA,EAAA,CAAA;QAAA,CAAA;QAgCNC,MAAM,EAANA,EAAAA,AAAAA,SAAAA,AAAAA,EAAAA,CAAAA,wBAAAA,CAAAA,CAAAA;YAAM,IAAA,EAAA,CAAA;YAAA,MAAA,EAAA,CAAA;QAAA,CAAA;QAmCNC,MAAM,EAANA,EAAAA,AAAAA,SAAAA,AAAAA,EAAAA,CAAAA,wBAAAA,CAAAA,CAAAA;YAAM,IAAA,EAAA,CAAA;YAAA,MAAA,EAAA,CAAA;QAAA,CAAA;QAmCNC,UAAU,EAAVA,EAAAA,AAAAA,SAAAA,AAAAA,EAAAA,CAAAA,wBAAAA,CAAAA,CAAAA;YAAU,IAAA,EAAA,CAAA;YAAA,MAAA,EAAA,CAAA;QAAA,CAAA;QAgCVC,UAAU,EAAVA,EAAAA,AAAAA,SAAAA,AAAAA,EAAAA,CAAAA,wBAAAA,CAAAA,CAAAA;YAAU,IAAA,EAAA,CAAA;YAAA,MAAA,EAAA,CAAA;QAAA,CAAA;QAmCVC,UAAU,EAAVA,EAAAA,AAAAA,SAAAA,AAAAA,EAAAA,CAAAA,wBAAAA,CAAAA,CAAAA;YAAU,IAAA,EAAA,CAAA;YAAA,MAAA,EAAA,CAAA;QAAA,CAAA;IA1KO,CAAnB;IA+MA,MAAA,CAAO,CAAP;QACEpB,IAAI,GAAGqB,KAAD,GAAA,EACJ,AADI,SACJ,AADI,EACJ,CAAA,kBAAA,CAAI,CADQ;gBAEVC,MAAM,EAAED,KAAK,CAAC7B,UAAN,MAAsB6B,KAAK,CAAC7B,UAAW,CAAA,EAAA,IAAM+B,SADnD;gBAEFC,aAAa,EAAE,CAFb;gBAGFC,KAAK,EAAEJ,KAAK,CAAC7B,UAAN,MAAsB6B,KAAK,CAAC7B,UAAW,CAAA,EAAA,IAAMkB,2BAAK,CAACW,KAAK,CAAC5B,IAAP;YAHvD,CAAJ;;QAKFW,YAAY,EAAA,EAAE,AAAF,SAAE,AAAF,EAAE,CAAA,kBAAA,CAAI,CAAlBA;YACEsB,SAAS,KAAKZ,UAAU,CAACC,MAAO,CAAhCW,oCAAAA;QADgB,CAAJ;QAGdpB,YAAY,EAAA,EAAE,AAAF,SAAE,AAAF,EAAE,CAAA,kBAAA,CAAI,CAAlBA;YACEoB,SAAS,KAAKZ,UAAU,CAACE,MAAO,CAAhCU,oCAAAA;QADgB,CAAJ;QAGdlB,YAAY,EAAA,EAAE,AAAF,SAAE,AAAF,EAAE,CAAA,kBAAA,CAAI,CAAlBA;YACEkB,SAAS,KAAKZ,UAAU,CAACG,MAAO,CAAhCS,oCAAAA;QADgB,CAAJ;QAGdvB,gBAAgB,EAAA,EAAE,AAAF,SAAE,AAAF,EAAE,CAAA,kBAAA,CAAI,CAAtBA;YACEuB,SAAS,KAAKZ,UAAU,CAACI,UAAW,CAApCQ,oCAAAA;QADoB,CAAJ;QAGlBrB,gBAAgB,EAAA,EAAE,AAAF,SAAE,AAAF,EAAE,CAAA,kBAAA,CAAI,CAAtBA;YACEqB,SAAS,KAAKZ,UAAU,CAACK,UAAW,CAApCO,oCAAAA;QADoB,CAAJ;QAGlBnB,gBAAgB,EAAA,EAAE,AAAF,SAAE,AAAF,EAAE,CAAA,kBAAA,CAAI,CAAtBA;YACEmB,SAAS,KAAKZ,UAAU,CAACM,UAAW,CAApCM,oCAAAA;QADoB,CAAJ;IAtBb,CAAP;AA0BD,CA1OM;;;ADGP,KAAA,CAAM5C,yCAAmB,GAAG,CAA5B;AAEA,KAAA,CAAMC,8BAAQ,GAAwC,CAAtD;IACEC,OAAO,EAAEV,oDAAM,CAACW,OADoC;IAEpDC,OAAO,EAAEZ,oDAAM,CAACa,YAFoC;IAGpDC,KAAK,EAAEd,oDAAM,CAACe,UAAdD;AAHoD,CAAtD;AAwBO,KAAA,CAAMlB,wCAAO,iBAAGG,uBAAU,EAE7B,CAFJ,YAGMsB,SADF,eAEEH,UAFF,SAGEC,IAAI,GAAG,CAHT,mBAIEF,OAAO,GAAG,CAJZ,mBAKEK,MAAM,GAAG,CALX,oBAMKC,UAAH,CANF,CADF,EASEC,YATF,GAUK,CATH;IAUA,KAAA,CAAMC,MAAM,GAAGlB,yCAAS;IACxB,MAAA,0CACG,4BAAD;QACE,EAAA,EAAIC,yCAAD;QACH,OAAA,EAAQ,CAFV;WAGMe,UAAJ;QACA,SAAA,EAAW,iBAAA,CAAGE,MAAM,CAACC,IAAP,CAAY,CAL9B;kBAKgCP,IAAF;wBAAQD,UAAAA;QAAR,CAAZ,GAAmCG,SAAtC;QACX,GAAA,EAAKG,YAAD;QACJ,MAAA,EAAQF,MAAD;4DAEN,CAAD;YACE,SAAA,EAAW,kBAAA,CAAI,CADzB;gBAEYK,OAAO,EAAE,CADI;gBAEbC,IAAI,EAAEnB,8BAAQ,CAACQ,OAAD;YAFD,CAAJ;YAIX,OAAA,EAAQ,CALV;YAME,KAAA,EAAM,CANR;;yDAQG,CAAD;8BAAO,CAAQ;;yDACd,CAAD;oBACE,SAAA,EAAWQ,MAAM,CAACI,gBAAR;oBACV,SAAA,EAAU,CAFZ;uEAIG,CAAD;wBAAG,SAAA,EAAWJ,MAAM,CAACK,YAAR;2EACV,CAAD;4BAAQ,CAAA,EAAE,CAAV;4BAAc,SAAA,EAAU,CAAxB;;;;yDAIH,CAAD;oBACE,SAAA,EAAWL,MAAM,CAACM,gBAAR;oBACV,SAAA,EAAU,CAFZ;uEAIG,CAAD;wBAAG,SAAA,EAAWN,MAAM,CAACO,YAAR;2EACV,CAAD;4BAAQ,CAAA,EAAE,CAAV;4BAAc,SAAA,EAAU,CAAxB;;;;yDAIH,CAAD;oBACE,SAAA,EAAWP,MAAM,CAACQ,gBAAR;oBACV,SAAA,EAAU,CAFZ;uEAIG,CAAD;wBAAG,SAAA,EAAWR,MAAM,CAACS,YAAR;2EACV,CAAD;4BAAQ,CAAA,EAAE,CAAV;4BAAc,SAAA,EAAU,CAAxB;;;;;;;AAMX,CA5D8B;AA+DjCtC,wCAAO,CAACuC,WAAR,GAAsB,CAAtB","sources":["packages/components/spinner/src/index.ts","packages/components/spinner/src/Spinner.tsx","packages/components/spinner/src/Spinner.styles.ts"],"sourcesContent":["export { Spinner } from './Spinner';\nexport type { SpinnerProps } from './Spinner';\n","import { cx, css } from 'emotion';\nimport React, { forwardRef } from 'react';\nimport tokens from '@contentful/f36-tokens';\nimport { Box } from '@contentful/f36-core';\nimport type {\n CommonProps,\n PropsWithHTMLElement,\n ExpandProps,\n} from '@contentful/f36-core';\nimport type { SpinnerSize, SpinnerVariant } from './types';\nimport { getStyles } from './Spinner.styles';\n\nconst SPINNER_DEFAULT_TAG = 'div';\n\nconst variants: { [key in SpinnerVariant]: string } = {\n default: tokens.gray700,\n primary: tokens.colorPrimary,\n white: tokens.colorWhite,\n};\n\nexport type SpinnerInternalProps = CommonProps & {\n /**\n * Determines the color that will be used in the `fill` property of the SVG\n */\n variant?: SpinnerVariant;\n /**\n * Allows resizing the spinner with any N value. The final size will be NxN pixels\n */\n customSize?: number;\n /**\n * Controls the size of the spinner. The default `medium` size is 20px wide,\n * the `small` size is 14px wide, and the `large` size is 36px wide\n */\n size?: SpinnerSize;\n};\n\nexport type SpinnerProps = PropsWithHTMLElement<SpinnerInternalProps, 'div'>;\n\nexport const Spinner = forwardRef<HTMLDivElement, ExpandProps<SpinnerProps>>(\n (\n {\n className,\n customSize,\n size = 'medium',\n variant = 'default',\n testId = 'cf-ui-spinner',\n ...otherProps\n },\n forwardedRef,\n ) => {\n const styles = getStyles();\n return (\n <Box\n as={SPINNER_DEFAULT_TAG}\n display=\"inline-block\"\n {...otherProps}\n className={cx(styles.root({ size, customSize }), className)}\n ref={forwardedRef}\n testId={testId}\n >\n <svg\n className={css({\n display: 'block',\n fill: variants[variant],\n })}\n viewBox=\"0 0 60 51\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <title>Loading…</title>\n <g\n className={styles.circle1Translate}\n transform=\"translate(10,33.528168)\"\n >\n <g className={styles.circle1Scale}>\n <circle r=\"6\" transform=\"translate(0,10.471832)\" />\n </g>\n </g>\n\n <g\n className={styles.circle2Translate}\n transform=\"translate(30,33.528168)\"\n >\n <g className={styles.circle2Scale}>\n <circle r=\"6\" transform=\"translate(0,10.471832)\" />\n </g>\n </g>\n\n <g\n className={styles.circle3Translate}\n transform=\"translate(50,33.528168)\"\n >\n <g className={styles.circle3Scale}>\n <circle r=\"6\" transform=\"translate(0,10.471832)\" />\n </g>\n </g>\n </svg>\n </Box>\n );\n },\n);\n\nSpinner.displayName = 'Spinner';\n","import { css, keyframes } from 'emotion';\nimport type { SpinnerSize } from './types';\n\nconst sizes: { [key in SpinnerSize]: string } = {\n large: '36px',\n medium: '20px',\n small: '14px',\n};\n\nexport const getStyles = () => {\n const animations = {\n scale1: keyframes`\n 0% {\n transform: scale(1, 1);\n }\n 6.666667% {\n transform: scale(1.5, 0.5);\n }\n 13.333333% {\n transform: scale(1, 1);\n }\n 26.666667% {\n transform: scale(1, 1);\n }\n 33.333333% {\n transform: scale(1, 1);\n }\n 40% {\n transform: scale(1, 1);\n }\n 53.333333% {\n transform: scale(1, 1);\n }\n 60% {\n transform: scale(1.5, 0.5);\n }\n 66.666667% {\n transform: scale(1, 1);\n }\n 100% {\n transform: scale(1, 1);\n }\n `,\n scale2: keyframes`\n 0% {\n transform: scale(1, 1);\n }\n 13.333333% {\n transform: scale(1, 1);\n }\n 20% {\n transform: scale(1.5, 0.5);\n }\n 26.666667% {\n transform: scale(1, 1);\n }\n 40% {\n transform: scale(1, 1);\n }\n 46.666667% {\n transform: scale(1, 1);\n }\n 53.333333% {\n transform: scale(1, 1);\n }\n 66.666667% {\n transform: scale(1, 1);\n }\n 73.333333% {\n transform: scale(1.5, 0.5);\n }\n 80% {\n transform: scale(1, 1);\n }\n 100% {\n transform: scale(1, 1);\n }\n `,\n scale3: keyframes`\n 0% {\n transform: scale(1, 1);\n }\n 26.666667% {\n transform: scale(1, 1);\n }\n 33.333333% {\n transform: scale(1.5, 0.5);\n }\n 40% {\n transform: scale(1, 1);\n }\n 53.333333% {\n transform: scale(1, 1);\n }\n 60% {\n transform: scale(1, 1);\n }\n 66.666667% {\n transform: scale(1, 1);\n }\n 80% {\n transform: scale(1, 1);\n }\n 86.666667% {\n transform: scale(1.5, 0.5);\n }\n 93.333333% {\n transform: scale(1, 1);\n }\n 100% {\n transform: scale(1, 1);\n }\n `,\n translate1: keyframes`\n 0% {\n transform: translate(10px, 33.528168px);\n }\n 6.666667% {\n transform: translate(10px, 41.764084px);\n }\n 13.333333% {\n transform: translate(10px, 33.528168px);\n }\n 26.666667% {\n transform: translate(10px, -2.651608px);\n }\n 33.333333% {\n transform: translate(10px, -4.471832px);\n }\n 40% {\n transform: translate(10px, -2.651608px);\n }\n 53.333333% {\n transform: translate(10px, 33.528168px);\n }\n 60% {\n transform: translate(10px, 41.764084px);\n }\n 66.666667% {\n transform: translate(10px, 33.528168px);\n }\n 100% {\n transform: translate(10px, 33.528168px);\n }\n `,\n translate2: keyframes`\n 0% {\n transform: translate(30px, 33.528168px);\n }\n 13.333333% {\n transform: translate(30px, 33.528168px);\n }\n 20% {\n transform: translate(30px, 41.764084px);\n }\n 26.666667% {\n transform: translate(30px, 33.528168px);\n }\n 40% {\n transform: translate(30px, -2.651608px);\n }\n 46.666667% {\n transform: translate(30px, -4.471832px);\n }\n 53.333333% {\n transform: translate(30px, -2.651608px);\n }\n 66.666667% {\n transform: translate(30px, 33.528168px);\n }\n 73.333333% {\n transform: translate(30px, 41.764084px);\n }\n 80% {\n transform: translate(30px, 33.528168px);\n }\n 100% {\n transform: translate(30px, 33.528168px);\n }\n `,\n translate3: keyframes`\n 0% {\n transform: translate(50px, 33.528168px);\n }\n 26.666667% {\n transform: translate(50px, 33.528168px);\n }\n 33.333333% {\n transform: translate(50px, 41.764084px);\n }\n 40% {\n transform: translate(50px, 33.528168px);\n }\n 53.333333% {\n transform: translate(50px, -2.651608px);\n }\n 60% {\n transform: translate(50px, -4.471832px);\n }\n 66.666667% {\n transform: translate(50px, -2.651608px);\n }\n 80% {\n transform: translate(50px, 33.528168px);\n }\n 86.666667% {\n transform: translate(50px, 41.764084px);\n }\n 93.333333% {\n transform: translate(50px, 33.528168px);\n }\n 100% {\n transform: translate(50px, 33.528168px);\n }\n `,\n };\n\n return {\n root: (props: { size: SpinnerSize; customSize?: number }) =>\n css({\n height: props.customSize ? `${props.customSize}px` : undefined,\n verticalAlign: 'middle',\n width: props.customSize ? `${props.customSize}px` : sizes[props.size],\n }),\n circle1Scale: css({\n animation: `${animations.scale1} 1s linear infinite normal forwards;`,\n }),\n circle2Scale: css({\n animation: `${animations.scale2} 1s linear infinite normal forwards;`,\n }),\n circle3Scale: css({\n animation: `${animations.scale3} 1s linear infinite normal forwards;`,\n }),\n circle1Translate: css({\n animation: `${animations.translate1} 1s linear infinite normal forwards;`,\n }),\n circle2Translate: css({\n animation: `${animations.translate2} 1s linear infinite normal forwards;`,\n }),\n circle3Translate: css({\n animation: `${animations.translate3} 1s linear infinite normal forwards;`,\n }),\n };\n};\n"],"names":["Spinner","SpinnerProps","React","forwardRef","tokens","Box","CommonProps","PropsWithHTMLElement","ExpandProps","SpinnerSize","SpinnerVariant","getStyles","SPINNER_DEFAULT_TAG","variants","default","gray700","primary","colorPrimary","white","colorWhite","SpinnerInternalProps","variant","customSize","size","HTMLDivElement","className","testId","otherProps","forwardedRef","styles","root","display","fill","circle1Translate","circle1Scale","circle2Translate","circle2Scale","circle3Translate","circle3Scale","displayName","sizes","large","medium","small","animations","scale1","scale2","scale3","translate1","translate2","translate3","props","height","undefined","verticalAlign","width","animation"],"version":3,"file":"main.js.map"}
package/dist/module.js CHANGED
@@ -1,5 +1,6 @@
1
+ import {jsx as $dzcjh$jsx, jsxs as $dzcjh$jsxs} from "react/jsx-runtime";
1
2
  import {cx as $dzcjh$cx, css as $dzcjh$css, keyframes as $dzcjh$keyframes} from "emotion";
2
- import $dzcjh$react, {forwardRef as $dzcjh$forwardRef} from "react";
3
+ import {forwardRef as $dzcjh$forwardRef} from "react";
3
4
  import $dzcjh$contentfulf36tokens from "@contentful/f36-tokens";
4
5
  import {Box as $dzcjh$Box} from "@contentful/f36-core";
5
6
 
@@ -10,6 +11,7 @@ import {Box as $dzcjh$Box} from "@contentful/f36-core";
10
11
 
11
12
 
12
13
 
14
+
13
15
  const $d9f7c1001d753182$var$sizes = {
14
16
  large: '36px',
15
17
  medium: '20px',
@@ -79,7 +81,7 @@ const $e780e5d24bf8af61$var$variants = {
79
81
  };
80
82
  const $e780e5d24bf8af61$export$7f7cbe89f1eacd2 = /*#__PURE__*/ $dzcjh$forwardRef(({ className: className , customSize: customSize , size: size = 'medium' , variant: variant = 'default' , testId: testId = 'cf-ui-spinner' , ...otherProps }, forwardedRef)=>{
81
83
  const styles = $d9f7c1001d753182$export$ffd58b7f6f099a57();
82
- return(/*#__PURE__*/ $dzcjh$react.createElement($dzcjh$Box, {
84
+ return(/*#__PURE__*/ $dzcjh$jsx($dzcjh$Box, {
83
85
  as: $e780e5d24bf8af61$var$SPINNER_DEFAULT_TAG,
84
86
  display: "inline-block",
85
87
  ...otherProps,
@@ -88,39 +90,54 @@ const $e780e5d24bf8af61$export$7f7cbe89f1eacd2 = /*#__PURE__*/ $dzcjh$forwardRef
88
90
  customSize: customSize
89
91
  }), className),
90
92
  ref: forwardedRef,
91
- testId: testId
92
- }, /*#__PURE__*/ $dzcjh$react.createElement("svg", {
93
- className: $dzcjh$css({
94
- display: 'block',
95
- fill: $e780e5d24bf8af61$var$variants[variant]
96
- }),
97
- viewBox: "0 0 60 51",
98
- xmlns: "http://www.w3.org/2000/svg"
99
- }, /*#__PURE__*/ $dzcjh$react.createElement("title", null, "Loading…"), /*#__PURE__*/ $dzcjh$react.createElement("g", {
100
- className: styles.circle1Translate,
101
- transform: "translate(10,33.528168)"
102
- }, /*#__PURE__*/ $dzcjh$react.createElement("g", {
103
- className: styles.circle1Scale
104
- }, /*#__PURE__*/ $dzcjh$react.createElement("circle", {
105
- r: "6",
106
- transform: "translate(0,10.471832)"
107
- }))), /*#__PURE__*/ $dzcjh$react.createElement("g", {
108
- className: styles.circle2Translate,
109
- transform: "translate(30,33.528168)"
110
- }, /*#__PURE__*/ $dzcjh$react.createElement("g", {
111
- className: styles.circle2Scale
112
- }, /*#__PURE__*/ $dzcjh$react.createElement("circle", {
113
- r: "6",
114
- transform: "translate(0,10.471832)"
115
- }))), /*#__PURE__*/ $dzcjh$react.createElement("g", {
116
- className: styles.circle3Translate,
117
- transform: "translate(50,33.528168)"
118
- }, /*#__PURE__*/ $dzcjh$react.createElement("g", {
119
- className: styles.circle3Scale
120
- }, /*#__PURE__*/ $dzcjh$react.createElement("circle", {
121
- r: "6",
122
- transform: "translate(0,10.471832)"
123
- }))))));
93
+ testId: testId,
94
+ children: /*#__PURE__*/ $dzcjh$jsxs("svg", {
95
+ className: $dzcjh$css({
96
+ display: 'block',
97
+ fill: $e780e5d24bf8af61$var$variants[variant]
98
+ }),
99
+ viewBox: "0 0 60 51",
100
+ xmlns: "http://www.w3.org/2000/svg",
101
+ children: [
102
+ /*#__PURE__*/ $dzcjh$jsx("title", {
103
+ children: "Loading…"
104
+ }),
105
+ /*#__PURE__*/ $dzcjh$jsx("g", {
106
+ className: styles.circle1Translate,
107
+ transform: "translate(10,33.528168)",
108
+ children: /*#__PURE__*/ $dzcjh$jsx("g", {
109
+ className: styles.circle1Scale,
110
+ children: /*#__PURE__*/ $dzcjh$jsx("circle", {
111
+ r: "6",
112
+ transform: "translate(0,10.471832)"
113
+ })
114
+ })
115
+ }),
116
+ /*#__PURE__*/ $dzcjh$jsx("g", {
117
+ className: styles.circle2Translate,
118
+ transform: "translate(30,33.528168)",
119
+ children: /*#__PURE__*/ $dzcjh$jsx("g", {
120
+ className: styles.circle2Scale,
121
+ children: /*#__PURE__*/ $dzcjh$jsx("circle", {
122
+ r: "6",
123
+ transform: "translate(0,10.471832)"
124
+ })
125
+ })
126
+ }),
127
+ /*#__PURE__*/ $dzcjh$jsx("g", {
128
+ className: styles.circle3Translate,
129
+ transform: "translate(50,33.528168)",
130
+ children: /*#__PURE__*/ $dzcjh$jsx("g", {
131
+ className: styles.circle3Scale,
132
+ children: /*#__PURE__*/ $dzcjh$jsx("circle", {
133
+ r: "6",
134
+ transform: "translate(0,10.471832)"
135
+ })
136
+ })
137
+ })
138
+ ]
139
+ })
140
+ }));
124
141
  });
125
142
  $e780e5d24bf8af61$export$7f7cbe89f1eacd2.displayName = 'Spinner';
126
143
 
package/dist/module.js.map CHANGED
@@ -1 +1 @@
1
- {"mappings":"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","sources":["packages/components/spinner/src/index.ts","packages/components/spinner/src/Spinner.tsx","packages/components/spinner/src/Spinner.styles.ts"],"sourcesContent":["export { Spinner } from './Spinner';\nexport type { SpinnerProps } from './Spinner';\n","import { cx, css } from 'emotion';\nimport React, { forwardRef } from 'react';\nimport tokens from '@contentful/f36-tokens';\nimport { Box } from '@contentful/f36-core';\nimport type { CommonProps, PropsWithHTMLElement } from '@contentful/f36-core';\nimport type { SpinnerSize, SpinnerVariant } from './types';\nimport { getStyles } from './Spinner.styles';\n\nconst SPINNER_DEFAULT_TAG = 'div';\n\nconst variants: { [key in SpinnerVariant]: string } = {\n default: tokens.gray700,\n primary: tokens.colorPrimary,\n white: tokens.colorWhite,\n};\n\nexport type SpinnerInternalProps = CommonProps & {\n /**\n * Determines the color that will be used in the `fill` property of the SVG\n */\n variant?: SpinnerVariant;\n /**\n * Allows resizing the spinner with any N value. The final size will be NxN pixels\n */\n customSize?: number;\n /**\n * Controls the size of the spinner. The default `medium` size is 20px wide,\n * the `small` size is 14px wide, and the `large` size is 36px wide\n */\n size?: SpinnerSize;\n};\n\nexport type SpinnerProps = PropsWithHTMLElement<SpinnerInternalProps, 'div'>;\n\nexport const Spinner = forwardRef<HTMLDivElement, SpinnerProps>(\n (\n {\n className,\n customSize,\n size = 'medium',\n variant = 'default',\n testId = 'cf-ui-spinner',\n ...otherProps\n },\n forwardedRef,\n ) => {\n const styles = getStyles();\n return (\n <Box\n as={SPINNER_DEFAULT_TAG}\n display=\"inline-block\"\n {...otherProps}\n className={cx(styles.root({ size, customSize }), className)}\n ref={forwardedRef}\n testId={testId}\n >\n <svg\n className={css({\n display: 'block',\n fill: variants[variant],\n })}\n viewBox=\"0 0 60 51\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <title>Loading…</title>\n <g\n className={styles.circle1Translate}\n transform=\"translate(10,33.528168)\"\n >\n <g className={styles.circle1Scale}>\n <circle r=\"6\" transform=\"translate(0,10.471832)\" />\n </g>\n </g>\n\n <g\n className={styles.circle2Translate}\n transform=\"translate(30,33.528168)\"\n >\n <g className={styles.circle2Scale}>\n <circle r=\"6\" transform=\"translate(0,10.471832)\" />\n </g>\n </g>\n\n <g\n className={styles.circle3Translate}\n transform=\"translate(50,33.528168)\"\n >\n <g className={styles.circle3Scale}>\n <circle r=\"6\" transform=\"translate(0,10.471832)\" />\n </g>\n </g>\n </svg>\n </Box>\n );\n },\n);\n\nSpinner.displayName = 'Spinner';\n","import { css, keyframes } from 'emotion';\nimport type { SpinnerSize } from './types';\n\nconst sizes: { [key in SpinnerSize]: string } = {\n large: '36px',\n medium: '20px',\n small: '14px',\n};\n\nexport const getStyles = () => {\n const animations = {\n scale1: keyframes`\n 0% {\n transform: scale(1, 1);\n }\n 6.666667% {\n transform: scale(1.5, 0.5);\n }\n 13.333333% {\n transform: scale(1, 1);\n }\n 26.666667% {\n transform: scale(1, 1);\n }\n 33.333333% {\n transform: scale(1, 1);\n }\n 40% {\n transform: scale(1, 1);\n }\n 53.333333% {\n transform: scale(1, 1);\n }\n 60% {\n transform: scale(1.5, 0.5);\n }\n 66.666667% {\n transform: scale(1, 1);\n }\n 100% {\n transform: scale(1, 1);\n }\n `,\n scale2: keyframes`\n 0% {\n transform: scale(1, 1);\n }\n 13.333333% {\n transform: scale(1, 1);\n }\n 20% {\n transform: scale(1.5, 0.5);\n }\n 26.666667% {\n transform: scale(1, 1);\n }\n 40% {\n transform: scale(1, 1);\n }\n 46.666667% {\n transform: scale(1, 1);\n }\n 53.333333% {\n transform: scale(1, 1);\n }\n 66.666667% {\n transform: scale(1, 1);\n }\n 73.333333% {\n transform: scale(1.5, 0.5);\n }\n 80% {\n transform: scale(1, 1);\n }\n 100% {\n transform: scale(1, 1);\n }\n `,\n scale3: keyframes`\n 0% {\n transform: scale(1, 1);\n }\n 26.666667% {\n transform: scale(1, 1);\n }\n 33.333333% {\n transform: scale(1.5, 0.5);\n }\n 40% {\n transform: scale(1, 1);\n }\n 53.333333% {\n transform: scale(1, 1);\n }\n 60% {\n transform: scale(1, 1);\n }\n 66.666667% {\n transform: scale(1, 1);\n }\n 80% {\n transform: scale(1, 1);\n }\n 86.666667% {\n transform: scale(1.5, 0.5);\n }\n 93.333333% {\n transform: scale(1, 1);\n }\n 100% {\n transform: scale(1, 1);\n }\n `,\n translate1: keyframes`\n 0% {\n transform: translate(10px, 33.528168px);\n }\n 6.666667% {\n transform: translate(10px, 41.764084px);\n }\n 13.333333% {\n transform: translate(10px, 33.528168px);\n }\n 26.666667% {\n transform: translate(10px, -2.651608px);\n }\n 33.333333% {\n transform: translate(10px, -4.471832px);\n }\n 40% {\n transform: translate(10px, -2.651608px);\n }\n 53.333333% {\n transform: translate(10px, 33.528168px);\n }\n 60% {\n transform: translate(10px, 41.764084px);\n }\n 66.666667% {\n transform: translate(10px, 33.528168px);\n }\n 100% {\n transform: translate(10px, 33.528168px);\n }\n `,\n translate2: keyframes`\n 0% {\n transform: translate(30px, 33.528168px);\n }\n 13.333333% {\n transform: translate(30px, 33.528168px);\n }\n 20% {\n transform: translate(30px, 41.764084px);\n }\n 26.666667% {\n transform: translate(30px, 33.528168px);\n }\n 40% {\n transform: translate(30px, -2.651608px);\n }\n 46.666667% {\n transform: translate(30px, -4.471832px);\n }\n 53.333333% {\n transform: translate(30px, -2.651608px);\n }\n 66.666667% {\n transform: translate(30px, 33.528168px);\n }\n 73.333333% {\n transform: translate(30px, 41.764084px);\n }\n 80% {\n transform: translate(30px, 33.528168px);\n }\n 100% {\n transform: translate(30px, 33.528168px);\n }\n `,\n translate3: keyframes`\n 0% {\n transform: translate(50px, 33.528168px);\n }\n 26.666667% {\n transform: translate(50px, 33.528168px);\n }\n 33.333333% {\n transform: translate(50px, 41.764084px);\n }\n 40% {\n transform: translate(50px, 33.528168px);\n }\n 53.333333% {\n transform: translate(50px, -2.651608px);\n }\n 60% {\n transform: translate(50px, -4.471832px);\n }\n 66.666667% {\n transform: translate(50px, -2.651608px);\n }\n 80% {\n transform: translate(50px, 33.528168px);\n }\n 86.666667% {\n transform: translate(50px, 41.764084px);\n }\n 93.333333% {\n transform: translate(50px, 33.528168px);\n }\n 100% {\n transform: translate(50px, 33.528168px);\n }\n `,\n };\n\n return {\n root: (props: { size: SpinnerSize; customSize?: number }) =>\n css({\n height: props.customSize ? `${props.customSize}px` : undefined,\n verticalAlign: 'middle',\n width: props.customSize ? `${props.customSize}px` : sizes[props.size],\n }),\n circle1Scale: css({\n animation: `${animations.scale1} 1s linear infinite normal forwards;`,\n }),\n circle2Scale: css({\n animation: `${animations.scale2} 1s linear infinite normal forwards;`,\n }),\n circle3Scale: css({\n animation: `${animations.scale3} 1s linear infinite normal forwards;`,\n }),\n circle1Translate: css({\n animation: `${animations.translate1} 1s linear infinite normal forwards;`,\n }),\n circle2Translate: css({\n animation: `${animations.translate2} 1s linear infinite normal forwards;`,\n }),\n circle3Translate: css({\n animation: `${animations.translate3} 1s linear infinite normal forwards;`,\n }),\n };\n};\n"],"names":["Spinner","SpinnerProps","React","forwardRef","tokens","Box","CommonProps","PropsWithHTMLElement","SpinnerSize","SpinnerVariant","getStyles","SPINNER_DEFAULT_TAG","variants","default","gray700","primary","colorPrimary","white","colorWhite","SpinnerInternalProps","variant","customSize","size","HTMLDivElement","className","testId","otherProps","forwardedRef","styles","root","display","fill","circle1Translate","circle1Scale","circle2Translate","circle2Scale","circle3Translate","circle3Scale","displayName","sizes","large","medium","small","animations","scale1","scale2","scale3","translate1","translate2","translate3","props","height","undefined","verticalAlign","width","animation"],"version":3,"file":"module.js.map"}
1
+ {"mappings":"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","sources":["packages/components/spinner/src/index.ts","packages/components/spinner/src/Spinner.tsx","packages/components/spinner/src/Spinner.styles.ts"],"sourcesContent":["export { Spinner } from './Spinner';\nexport type { SpinnerProps } from './Spinner';\n","import { cx, css } from 'emotion';\nimport React, { forwardRef } from 'react';\nimport tokens from '@contentful/f36-tokens';\nimport { Box } from '@contentful/f36-core';\nimport type {\n CommonProps,\n PropsWithHTMLElement,\n ExpandProps,\n} from '@contentful/f36-core';\nimport type { SpinnerSize, SpinnerVariant } from './types';\nimport { getStyles } from './Spinner.styles';\n\nconst SPINNER_DEFAULT_TAG = 'div';\n\nconst variants: { [key in SpinnerVariant]: string } = {\n default: tokens.gray700,\n primary: tokens.colorPrimary,\n white: tokens.colorWhite,\n};\n\nexport type SpinnerInternalProps = CommonProps & {\n /**\n * Determines the color that will be used in the `fill` property of the SVG\n */\n variant?: SpinnerVariant;\n /**\n * Allows resizing the spinner with any N value. The final size will be NxN pixels\n */\n customSize?: number;\n /**\n * Controls the size of the spinner. The default `medium` size is 20px wide,\n * the `small` size is 14px wide, and the `large` size is 36px wide\n */\n size?: SpinnerSize;\n};\n\nexport type SpinnerProps = PropsWithHTMLElement<SpinnerInternalProps, 'div'>;\n\nexport const Spinner = forwardRef<HTMLDivElement, ExpandProps<SpinnerProps>>(\n (\n {\n className,\n customSize,\n size = 'medium',\n variant = 'default',\n testId = 'cf-ui-spinner',\n ...otherProps\n },\n forwardedRef,\n ) => {\n const styles = getStyles();\n return (\n <Box\n as={SPINNER_DEFAULT_TAG}\n display=\"inline-block\"\n {...otherProps}\n className={cx(styles.root({ size, customSize }), className)}\n ref={forwardedRef}\n testId={testId}\n >\n <svg\n className={css({\n display: 'block',\n fill: variants[variant],\n })}\n viewBox=\"0 0 60 51\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <title>Loading…</title>\n <g\n className={styles.circle1Translate}\n transform=\"translate(10,33.528168)\"\n >\n <g className={styles.circle1Scale}>\n <circle r=\"6\" transform=\"translate(0,10.471832)\" />\n </g>\n </g>\n\n <g\n className={styles.circle2Translate}\n transform=\"translate(30,33.528168)\"\n >\n <g className={styles.circle2Scale}>\n <circle r=\"6\" transform=\"translate(0,10.471832)\" />\n </g>\n </g>\n\n <g\n className={styles.circle3Translate}\n transform=\"translate(50,33.528168)\"\n >\n <g className={styles.circle3Scale}>\n <circle r=\"6\" transform=\"translate(0,10.471832)\" />\n </g>\n </g>\n </svg>\n </Box>\n );\n },\n);\n\nSpinner.displayName = 'Spinner';\n","import { css, keyframes } from 'emotion';\nimport type { SpinnerSize } from './types';\n\nconst sizes: { [key in SpinnerSize]: string } = {\n large: '36px',\n medium: '20px',\n small: '14px',\n};\n\nexport const getStyles = () => {\n const animations = {\n scale1: keyframes`\n 0% {\n transform: scale(1, 1);\n }\n 6.666667% {\n transform: scale(1.5, 0.5);\n }\n 13.333333% {\n transform: scale(1, 1);\n }\n 26.666667% {\n transform: scale(1, 1);\n }\n 33.333333% {\n transform: scale(1, 1);\n }\n 40% {\n transform: scale(1, 1);\n }\n 53.333333% {\n transform: scale(1, 1);\n }\n 60% {\n transform: scale(1.5, 0.5);\n }\n 66.666667% {\n transform: scale(1, 1);\n }\n 100% {\n transform: scale(1, 1);\n }\n `,\n scale2: keyframes`\n 0% {\n transform: scale(1, 1);\n }\n 13.333333% {\n transform: scale(1, 1);\n }\n 20% {\n transform: scale(1.5, 0.5);\n }\n 26.666667% {\n transform: scale(1, 1);\n }\n 40% {\n transform: scale(1, 1);\n }\n 46.666667% {\n transform: scale(1, 1);\n }\n 53.333333% {\n transform: scale(1, 1);\n }\n 66.666667% {\n transform: scale(1, 1);\n }\n 73.333333% {\n transform: scale(1.5, 0.5);\n }\n 80% {\n transform: scale(1, 1);\n }\n 100% {\n transform: scale(1, 1);\n }\n `,\n scale3: keyframes`\n 0% {\n transform: scale(1, 1);\n }\n 26.666667% {\n transform: scale(1, 1);\n }\n 33.333333% {\n transform: scale(1.5, 0.5);\n }\n 40% {\n transform: scale(1, 1);\n }\n 53.333333% {\n transform: scale(1, 1);\n }\n 60% {\n transform: scale(1, 1);\n }\n 66.666667% {\n transform: scale(1, 1);\n }\n 80% {\n transform: scale(1, 1);\n }\n 86.666667% {\n transform: scale(1.5, 0.5);\n }\n 93.333333% {\n transform: scale(1, 1);\n }\n 100% {\n transform: scale(1, 1);\n }\n `,\n translate1: keyframes`\n 0% {\n transform: translate(10px, 33.528168px);\n }\n 6.666667% {\n transform: translate(10px, 41.764084px);\n }\n 13.333333% {\n transform: translate(10px, 33.528168px);\n }\n 26.666667% {\n transform: translate(10px, -2.651608px);\n }\n 33.333333% {\n transform: translate(10px, -4.471832px);\n }\n 40% {\n transform: translate(10px, -2.651608px);\n }\n 53.333333% {\n transform: translate(10px, 33.528168px);\n }\n 60% {\n transform: translate(10px, 41.764084px);\n }\n 66.666667% {\n transform: translate(10px, 33.528168px);\n }\n 100% {\n transform: translate(10px, 33.528168px);\n }\n `,\n translate2: keyframes`\n 0% {\n transform: translate(30px, 33.528168px);\n }\n 13.333333% {\n transform: translate(30px, 33.528168px);\n }\n 20% {\n transform: translate(30px, 41.764084px);\n }\n 26.666667% {\n transform: translate(30px, 33.528168px);\n }\n 40% {\n transform: translate(30px, -2.651608px);\n }\n 46.666667% {\n transform: translate(30px, -4.471832px);\n }\n 53.333333% {\n transform: translate(30px, -2.651608px);\n }\n 66.666667% {\n transform: translate(30px, 33.528168px);\n }\n 73.333333% {\n transform: translate(30px, 41.764084px);\n }\n 80% {\n transform: translate(30px, 33.528168px);\n }\n 100% {\n transform: translate(30px, 33.528168px);\n }\n `,\n translate3: keyframes`\n 0% {\n transform: translate(50px, 33.528168px);\n }\n 26.666667% {\n transform: translate(50px, 33.528168px);\n }\n 33.333333% {\n transform: translate(50px, 41.764084px);\n }\n 40% {\n transform: translate(50px, 33.528168px);\n }\n 53.333333% {\n transform: translate(50px, -2.651608px);\n }\n 60% {\n transform: translate(50px, -4.471832px);\n }\n 66.666667% {\n transform: translate(50px, -2.651608px);\n }\n 80% {\n transform: translate(50px, 33.528168px);\n }\n 86.666667% {\n transform: translate(50px, 41.764084px);\n }\n 93.333333% {\n transform: translate(50px, 33.528168px);\n }\n 100% {\n transform: translate(50px, 33.528168px);\n }\n `,\n };\n\n return {\n root: (props: { size: SpinnerSize; customSize?: number }) =>\n css({\n height: props.customSize ? `${props.customSize}px` : undefined,\n verticalAlign: 'middle',\n width: props.customSize ? `${props.customSize}px` : sizes[props.size],\n }),\n circle1Scale: css({\n animation: `${animations.scale1} 1s linear infinite normal forwards;`,\n }),\n circle2Scale: css({\n animation: `${animations.scale2} 1s linear infinite normal forwards;`,\n }),\n circle3Scale: css({\n animation: `${animations.scale3} 1s linear infinite normal forwards;`,\n }),\n circle1Translate: css({\n animation: `${animations.translate1} 1s linear infinite normal forwards;`,\n }),\n circle2Translate: css({\n animation: `${animations.translate2} 1s linear infinite normal forwards;`,\n }),\n circle3Translate: css({\n animation: `${animations.translate3} 1s linear infinite normal forwards;`,\n }),\n };\n};\n"],"names":["Spinner","SpinnerProps","React","forwardRef","tokens","Box","CommonProps","PropsWithHTMLElement","ExpandProps","SpinnerSize","SpinnerVariant","getStyles","SPINNER_DEFAULT_TAG","variants","default","gray700","primary","colorPrimary","white","colorWhite","SpinnerInternalProps","variant","customSize","size","HTMLDivElement","className","testId","otherProps","forwardedRef","styles","root","display","fill","circle1Translate","circle1Scale","circle2Translate","circle2Scale","circle3Translate","circle3Scale","displayName","sizes","large","medium","small","animations","scale1","scale2","scale3","translate1","translate2","translate3","props","height","undefined","verticalAlign","width","animation"],"version":3,"file":"module.js.map"}
package/dist/types.d.ts CHANGED
@@ -18,19 +18,267 @@ type SpinnerInternalProps = CommonProps & {
18
18
  size?: SpinnerSize;
19
19
  };
20
20
  export type SpinnerProps = PropsWithHTMLElement<SpinnerInternalProps, 'div'>;
21
- export const Spinner: React.ForwardRefExoticComponent<Omit<Omit<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>>, never>, "size" | keyof CommonProps | "variant" | "customSize"> & CommonProps & {
22
- /**
23
- * Determines the color that will be used in the `fill` property of the SVG
24
- */
21
+ export const Spinner: React.ForwardRefExoticComponent<{
22
+ color?: string;
23
+ translate?: "no" | "yes";
24
+ slot?: string;
25
+ title?: string;
26
+ key?: React.Key;
27
+ defaultChecked?: boolean;
28
+ defaultValue?: string | number | readonly string[];
29
+ suppressContentEditableWarning?: boolean;
30
+ suppressHydrationWarning?: boolean;
31
+ accessKey?: string;
32
+ contentEditable?: "inherit" | (boolean | "true" | "false");
33
+ contextMenu?: string;
34
+ dir?: string;
35
+ draggable?: boolean | "true" | "false";
36
+ hidden?: boolean;
37
+ id?: string;
38
+ lang?: string;
39
+ placeholder?: string;
40
+ spellCheck?: boolean | "true" | "false";
41
+ tabIndex?: number;
42
+ radioGroup?: string;
43
+ role?: string;
44
+ about?: string;
45
+ datatype?: string;
46
+ inlist?: any;
47
+ prefix?: string;
48
+ property?: string;
49
+ resource?: string;
50
+ typeof?: string;
51
+ vocab?: string;
52
+ autoCapitalize?: string;
53
+ autoCorrect?: string;
54
+ autoSave?: string;
55
+ itemProp?: string;
56
+ itemScope?: boolean;
57
+ itemType?: string;
58
+ itemID?: string;
59
+ itemRef?: string;
60
+ results?: number;
61
+ security?: string;
62
+ unselectable?: "on" | "off";
63
+ inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search";
64
+ is?: string;
65
+ 'aria-activedescendant'?: string;
66
+ 'aria-atomic'?: boolean | "true" | "false";
67
+ 'aria-autocomplete'?: "both" | "none" | "list" | "inline";
68
+ 'aria-busy'?: boolean | "true" | "false";
69
+ 'aria-checked'?: boolean | "true" | "false" | "mixed";
70
+ 'aria-colcount'?: number;
71
+ 'aria-colindex'?: number;
72
+ 'aria-colspan'?: number;
73
+ 'aria-controls'?: string;
74
+ 'aria-current'?: boolean | "time" | "true" | "false" | "step" | "page" | "location" | "date";
75
+ 'aria-describedby'?: string;
76
+ 'aria-details'?: string;
77
+ 'aria-disabled'?: boolean | "true" | "false";
78
+ 'aria-dropeffect'?: "none" | "link" | "copy" | "execute" | "move" | "popup";
79
+ 'aria-errormessage'?: string;
80
+ 'aria-expanded'?: boolean | "true" | "false";
81
+ 'aria-flowto'?: string;
82
+ 'aria-grabbed'?: boolean | "true" | "false";
83
+ 'aria-haspopup'?: boolean | "grid" | "dialog" | "menu" | "true" | "false" | "listbox" | "tree";
84
+ 'aria-hidden'?: boolean | "true" | "false";
85
+ 'aria-invalid'?: boolean | "true" | "false" | "grammar" | "spelling";
86
+ 'aria-keyshortcuts'?: string;
87
+ 'aria-label'?: string;
88
+ 'aria-labelledby'?: string;
89
+ 'aria-level'?: number;
90
+ 'aria-live'?: "off" | "assertive" | "polite";
91
+ 'aria-modal'?: boolean | "true" | "false";
92
+ 'aria-multiline'?: boolean | "true" | "false";
93
+ 'aria-multiselectable'?: boolean | "true" | "false";
94
+ 'aria-orientation'?: "horizontal" | "vertical";
95
+ 'aria-owns'?: string;
96
+ 'aria-placeholder'?: string;
97
+ 'aria-posinset'?: number;
98
+ 'aria-pressed'?: boolean | "true" | "false" | "mixed";
99
+ 'aria-readonly'?: boolean | "true" | "false";
100
+ 'aria-relevant'?: "all" | "text" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals";
101
+ 'aria-required'?: boolean | "true" | "false";
102
+ 'aria-roledescription'?: string;
103
+ 'aria-rowcount'?: number;
104
+ 'aria-rowindex'?: number;
105
+ 'aria-rowspan'?: number;
106
+ 'aria-selected'?: boolean | "true" | "false";
107
+ 'aria-setsize'?: number;
108
+ 'aria-sort'?: "none" | "ascending" | "descending" | "other";
109
+ 'aria-valuemax'?: number;
110
+ 'aria-valuemin'?: number;
111
+ 'aria-valuenow'?: number;
112
+ 'aria-valuetext'?: string;
113
+ children?: React.ReactNode;
114
+ dangerouslySetInnerHTML?: {
115
+ __html: string;
116
+ };
117
+ onCopy?: React.ClipboardEventHandler<HTMLDivElement>;
118
+ onCopyCapture?: React.ClipboardEventHandler<HTMLDivElement>;
119
+ onCut?: React.ClipboardEventHandler<HTMLDivElement>;
120
+ onCutCapture?: React.ClipboardEventHandler<HTMLDivElement>;
121
+ onPaste?: React.ClipboardEventHandler<HTMLDivElement>;
122
+ onPasteCapture?: React.ClipboardEventHandler<HTMLDivElement>;
123
+ onCompositionEnd?: React.CompositionEventHandler<HTMLDivElement>;
124
+ onCompositionEndCapture?: React.CompositionEventHandler<HTMLDivElement>;
125
+ onCompositionStart?: React.CompositionEventHandler<HTMLDivElement>;
126
+ onCompositionStartCapture?: React.CompositionEventHandler<HTMLDivElement>;
127
+ onCompositionUpdate?: React.CompositionEventHandler<HTMLDivElement>;
128
+ onCompositionUpdateCapture?: React.CompositionEventHandler<HTMLDivElement>;
129
+ onFocus?: React.FocusEventHandler<HTMLDivElement>;
130
+ onFocusCapture?: React.FocusEventHandler<HTMLDivElement>;
131
+ onBlur?: React.FocusEventHandler<HTMLDivElement>;
132
+ onBlurCapture?: React.FocusEventHandler<HTMLDivElement>;
133
+ onChange?: React.FormEventHandler<HTMLDivElement>;
134
+ onChangeCapture?: React.FormEventHandler<HTMLDivElement>;
135
+ onBeforeInput?: React.FormEventHandler<HTMLDivElement>;
136
+ onBeforeInputCapture?: React.FormEventHandler<HTMLDivElement>;
137
+ onInput?: React.FormEventHandler<HTMLDivElement>;
138
+ onInputCapture?: React.FormEventHandler<HTMLDivElement>;
139
+ onReset?: React.FormEventHandler<HTMLDivElement>;
140
+ onResetCapture?: React.FormEventHandler<HTMLDivElement>;
141
+ onSubmit?: React.FormEventHandler<HTMLDivElement>;
142
+ onSubmitCapture?: React.FormEventHandler<HTMLDivElement>;
143
+ onInvalid?: React.FormEventHandler<HTMLDivElement>;
144
+ onInvalidCapture?: React.FormEventHandler<HTMLDivElement>;
145
+ onLoad?: React.ReactEventHandler<HTMLDivElement>;
146
+ onLoadCapture?: React.ReactEventHandler<HTMLDivElement>;
147
+ onError?: React.ReactEventHandler<HTMLDivElement>;
148
+ onErrorCapture?: React.ReactEventHandler<HTMLDivElement>;
149
+ onKeyDown?: React.KeyboardEventHandler<HTMLDivElement>;
150
+ onKeyDownCapture?: React.KeyboardEventHandler<HTMLDivElement>;
151
+ onKeyPress?: React.KeyboardEventHandler<HTMLDivElement>;
152
+ onKeyPressCapture?: React.KeyboardEventHandler<HTMLDivElement>;
153
+ onKeyUp?: React.KeyboardEventHandler<HTMLDivElement>;
154
+ onKeyUpCapture?: React.KeyboardEventHandler<HTMLDivElement>;
155
+ onAbort?: React.ReactEventHandler<HTMLDivElement>;
156
+ onAbortCapture?: React.ReactEventHandler<HTMLDivElement>;
157
+ onCanPlay?: React.ReactEventHandler<HTMLDivElement>;
158
+ onCanPlayCapture?: React.ReactEventHandler<HTMLDivElement>;
159
+ onCanPlayThrough?: React.ReactEventHandler<HTMLDivElement>;
160
+ onCanPlayThroughCapture?: React.ReactEventHandler<HTMLDivElement>;
161
+ onDurationChange?: React.ReactEventHandler<HTMLDivElement>;
162
+ onDurationChangeCapture?: React.ReactEventHandler<HTMLDivElement>;
163
+ onEmptied?: React.ReactEventHandler<HTMLDivElement>;
164
+ onEmptiedCapture?: React.ReactEventHandler<HTMLDivElement>;
165
+ onEncrypted?: React.ReactEventHandler<HTMLDivElement>;
166
+ onEncryptedCapture?: React.ReactEventHandler<HTMLDivElement>;
167
+ onEnded?: React.ReactEventHandler<HTMLDivElement>;
168
+ onEndedCapture?: React.ReactEventHandler<HTMLDivElement>;
169
+ onLoadedData?: React.ReactEventHandler<HTMLDivElement>;
170
+ onLoadedDataCapture?: React.ReactEventHandler<HTMLDivElement>;
171
+ onLoadedMetadata?: React.ReactEventHandler<HTMLDivElement>;
172
+ onLoadedMetadataCapture?: React.ReactEventHandler<HTMLDivElement>;
173
+ onLoadStart?: React.ReactEventHandler<HTMLDivElement>;
174
+ onLoadStartCapture?: React.ReactEventHandler<HTMLDivElement>;
175
+ onPause?: React.ReactEventHandler<HTMLDivElement>;
176
+ onPauseCapture?: React.ReactEventHandler<HTMLDivElement>;
177
+ onPlay?: React.ReactEventHandler<HTMLDivElement>;
178
+ onPlayCapture?: React.ReactEventHandler<HTMLDivElement>;
179
+ onPlaying?: React.ReactEventHandler<HTMLDivElement>;
180
+ onPlayingCapture?: React.ReactEventHandler<HTMLDivElement>;
181
+ onProgress?: React.ReactEventHandler<HTMLDivElement>;
182
+ onProgressCapture?: React.ReactEventHandler<HTMLDivElement>;
183
+ onRateChange?: React.ReactEventHandler<HTMLDivElement>;
184
+ onRateChangeCapture?: React.ReactEventHandler<HTMLDivElement>;
185
+ onSeeked?: React.ReactEventHandler<HTMLDivElement>;
186
+ onSeekedCapture?: React.ReactEventHandler<HTMLDivElement>;
187
+ onSeeking?: React.ReactEventHandler<HTMLDivElement>;
188
+ onSeekingCapture?: React.ReactEventHandler<HTMLDivElement>;
189
+ onStalled?: React.ReactEventHandler<HTMLDivElement>;
190
+ onStalledCapture?: React.ReactEventHandler<HTMLDivElement>;
191
+ onSuspend?: React.ReactEventHandler<HTMLDivElement>;
192
+ onSuspendCapture?: React.ReactEventHandler<HTMLDivElement>;
193
+ onTimeUpdate?: React.ReactEventHandler<HTMLDivElement>;
194
+ onTimeUpdateCapture?: React.ReactEventHandler<HTMLDivElement>;
195
+ onVolumeChange?: React.ReactEventHandler<HTMLDivElement>;
196
+ onVolumeChangeCapture?: React.ReactEventHandler<HTMLDivElement>;
197
+ onWaiting?: React.ReactEventHandler<HTMLDivElement>;
198
+ onWaitingCapture?: React.ReactEventHandler<HTMLDivElement>;
199
+ onAuxClick?: React.MouseEventHandler<HTMLDivElement>;
200
+ onAuxClickCapture?: React.MouseEventHandler<HTMLDivElement>;
201
+ onClick?: React.MouseEventHandler<HTMLDivElement>;
202
+ onClickCapture?: React.MouseEventHandler<HTMLDivElement>;
203
+ onContextMenu?: React.MouseEventHandler<HTMLDivElement>;
204
+ onContextMenuCapture?: React.MouseEventHandler<HTMLDivElement>;
205
+ onDoubleClick?: React.MouseEventHandler<HTMLDivElement>;
206
+ onDoubleClickCapture?: React.MouseEventHandler<HTMLDivElement>;
207
+ onDrag?: React.DragEventHandler<HTMLDivElement>;
208
+ onDragCapture?: React.DragEventHandler<HTMLDivElement>;
209
+ onDragEnd?: React.DragEventHandler<HTMLDivElement>;
210
+ onDragEndCapture?: React.DragEventHandler<HTMLDivElement>;
211
+ onDragEnter?: React.DragEventHandler<HTMLDivElement>;
212
+ onDragEnterCapture?: React.DragEventHandler<HTMLDivElement>;
213
+ onDragExit?: React.DragEventHandler<HTMLDivElement>;
214
+ onDragExitCapture?: React.DragEventHandler<HTMLDivElement>;
215
+ onDragLeave?: React.DragEventHandler<HTMLDivElement>;
216
+ onDragLeaveCapture?: React.DragEventHandler<HTMLDivElement>;
217
+ onDragOver?: React.DragEventHandler<HTMLDivElement>;
218
+ onDragOverCapture?: React.DragEventHandler<HTMLDivElement>;
219
+ onDragStart?: React.DragEventHandler<HTMLDivElement>;
220
+ onDragStartCapture?: React.DragEventHandler<HTMLDivElement>;
221
+ onDrop?: React.DragEventHandler<HTMLDivElement>;
222
+ onDropCapture?: React.DragEventHandler<HTMLDivElement>;
223
+ onMouseDown?: React.MouseEventHandler<HTMLDivElement>;
224
+ onMouseDownCapture?: React.MouseEventHandler<HTMLDivElement>;
225
+ onMouseEnter?: React.MouseEventHandler<HTMLDivElement>;
226
+ onMouseLeave?: React.MouseEventHandler<HTMLDivElement>;
227
+ onMouseMove?: React.MouseEventHandler<HTMLDivElement>;
228
+ onMouseMoveCapture?: React.MouseEventHandler<HTMLDivElement>;
229
+ onMouseOut?: React.MouseEventHandler<HTMLDivElement>;
230
+ onMouseOutCapture?: React.MouseEventHandler<HTMLDivElement>;
231
+ onMouseOver?: React.MouseEventHandler<HTMLDivElement>;
232
+ onMouseOverCapture?: React.MouseEventHandler<HTMLDivElement>;
233
+ onMouseUp?: React.MouseEventHandler<HTMLDivElement>;
234
+ onMouseUpCapture?: React.MouseEventHandler<HTMLDivElement>;
235
+ onSelect?: React.ReactEventHandler<HTMLDivElement>;
236
+ onSelectCapture?: React.ReactEventHandler<HTMLDivElement>;
237
+ onTouchCancel?: React.TouchEventHandler<HTMLDivElement>;
238
+ onTouchCancelCapture?: React.TouchEventHandler<HTMLDivElement>;
239
+ onTouchEnd?: React.TouchEventHandler<HTMLDivElement>;
240
+ onTouchEndCapture?: React.TouchEventHandler<HTMLDivElement>;
241
+ onTouchMove?: React.TouchEventHandler<HTMLDivElement>;
242
+ onTouchMoveCapture?: React.TouchEventHandler<HTMLDivElement>;
243
+ onTouchStart?: React.TouchEventHandler<HTMLDivElement>;
244
+ onTouchStartCapture?: React.TouchEventHandler<HTMLDivElement>;
245
+ onPointerDown?: React.PointerEventHandler<HTMLDivElement>;
246
+ onPointerDownCapture?: React.PointerEventHandler<HTMLDivElement>;
247
+ onPointerMove?: React.PointerEventHandler<HTMLDivElement>;
248
+ onPointerMoveCapture?: React.PointerEventHandler<HTMLDivElement>;
249
+ onPointerUp?: React.PointerEventHandler<HTMLDivElement>;
250
+ onPointerUpCapture?: React.PointerEventHandler<HTMLDivElement>;
251
+ onPointerCancel?: React.PointerEventHandler<HTMLDivElement>;
252
+ onPointerCancelCapture?: React.PointerEventHandler<HTMLDivElement>;
253
+ onPointerEnter?: React.PointerEventHandler<HTMLDivElement>;
254
+ onPointerEnterCapture?: React.PointerEventHandler<HTMLDivElement>;
255
+ onPointerLeave?: React.PointerEventHandler<HTMLDivElement>;
256
+ onPointerLeaveCapture?: React.PointerEventHandler<HTMLDivElement>;
257
+ onPointerOver?: React.PointerEventHandler<HTMLDivElement>;
258
+ onPointerOverCapture?: React.PointerEventHandler<HTMLDivElement>;
259
+ onPointerOut?: React.PointerEventHandler<HTMLDivElement>;
260
+ onPointerOutCapture?: React.PointerEventHandler<HTMLDivElement>;
261
+ onGotPointerCapture?: React.PointerEventHandler<HTMLDivElement>;
262
+ onGotPointerCaptureCapture?: React.PointerEventHandler<HTMLDivElement>;
263
+ onLostPointerCapture?: React.PointerEventHandler<HTMLDivElement>;
264
+ onLostPointerCaptureCapture?: React.PointerEventHandler<HTMLDivElement>;
265
+ onScroll?: React.UIEventHandler<HTMLDivElement>;
266
+ onScrollCapture?: React.UIEventHandler<HTMLDivElement>;
267
+ onWheel?: React.WheelEventHandler<HTMLDivElement>;
268
+ onWheelCapture?: React.WheelEventHandler<HTMLDivElement>;
269
+ onAnimationStart?: React.AnimationEventHandler<HTMLDivElement>;
270
+ onAnimationStartCapture?: React.AnimationEventHandler<HTMLDivElement>;
271
+ onAnimationEnd?: React.AnimationEventHandler<HTMLDivElement>;
272
+ onAnimationEndCapture?: React.AnimationEventHandler<HTMLDivElement>;
273
+ onAnimationIteration?: React.AnimationEventHandler<HTMLDivElement>;
274
+ onAnimationIterationCapture?: React.AnimationEventHandler<HTMLDivElement>;
275
+ onTransitionEnd?: React.TransitionEventHandler<HTMLDivElement>;
276
+ onTransitionEndCapture?: React.TransitionEventHandler<HTMLDivElement>;
277
+ className?: string;
278
+ testId?: string;
279
+ style?: React.CSSProperties;
25
280
  variant?: SpinnerVariant;
26
- /**
27
- * Allows resizing the spinner with any N value. The final size will be NxN pixels
28
- */
29
281
  customSize?: number;
30
- /**
31
- * Controls the size of the spinner. The default `medium` size is 20px wide,
32
- * the `small` size is 14px wide, and the `large` size is 36px wide
33
- */
34
282
  size?: SpinnerSize;
35
283
  } & React.RefAttributes<HTMLDivElement>>;
36
284
 
package/dist/types.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"mappings":";;AAAA,sBAA6B,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AAE7D,mBAA0B,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AEcvD,4BAAmC,WAAW,GAAG;IAC/C;;OAEG;IACH,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;CACpB,CAAC;AAEF,2BAA2B,qBAAqB,oBAAoB,EAAE,KAAK,CAAC,CAAC;AAE7E,OAAO,MAAM;IAjBX;;OAEG;cACO,cAAc;IACxB;;OAEG;iBACU,MAAM;IACnB;;;OAGG;WACI,WAAW;wCAkEnB,CAAC","sources":["packages/components/spinner/src/src/types.ts","packages/components/spinner/src/src/Spinner.styles.ts","packages/components/spinner/src/src/Spinner.tsx","packages/components/spinner/src/src/index.ts","packages/components/spinner/src/index.ts"],"sourcesContent":[null,null,null,null,"export { Spinner } from './Spinner';\nexport type { SpinnerProps } from './Spinner';\n"],"names":[],"version":3,"file":"types.d.ts.map"}
1
+ {"mappings":";;AAAA,sBAA6B,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AAE7D,mBAA0B,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AEkBvD,4BAAmC,WAAW,GAAG;IAC/C;;OAEG;IACH,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;CACpB,CAAC;AAEF,2BAA2B,qBAAqB,oBAAoB,EAAE,KAAK,CAAC,CAAC;AAE7E,OAAO,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAdD,cAAc;iBAIX,MAAM;WAKZ,WAAW;wCAkEnB,CAAC","sources":["packages/components/spinner/src/src/types.ts","packages/components/spinner/src/src/Spinner.styles.ts","packages/components/spinner/src/src/Spinner.tsx","packages/components/spinner/src/src/index.ts","packages/components/spinner/src/index.ts"],"sourcesContent":[null,null,null,null,"export { Spinner } from './Spinner';\nexport type { SpinnerProps } from './Spinner';\n"],"names":[],"version":3,"file":"types.d.ts.map"}
package/package.json CHANGED
@@ -1,18 +1,18 @@
1
1
  {
2
2
  "name": "@contentful/f36-spinner",
3
- "version": "4.0.1-beta.2555+75658c31",
3
+ "version": "4.0.1-beta.2694+5eee5f80",
4
4
  "description": "Forma 36: Spinner Component",
5
5
  "scripts": {
6
6
  "build": "parcel build src/index.ts"
7
7
  },
8
8
  "dependencies": {
9
9
  "@babel/runtime": "^7.6.2",
10
- "@contentful/f36-core": "4.0.1-beta.2555+75658c31",
11
- "@contentful/f36-tokens": "4.0.1-beta.2555+75658c31",
10
+ "@contentful/f36-core": "4.0.1-beta.2694+5eee5f80",
11
+ "@contentful/f36-tokens": "4.0.1-beta.2694+5eee5f80",
12
12
  "emotion": "^10.0.17"
13
13
  },
14
14
  "devDependencies": {
15
- "@contentful/f36-typography": "4.0.1-beta.2555+75658c31"
15
+ "@contentful/f36-typography": "4.0.1-beta.2694+5eee5f80"
16
16
  },
17
17
  "peerDependencies": {
18
18
  "react": ">=16.8"
@@ -34,5 +34,5 @@
34
34
  "publishConfig": {
35
35
  "access": "public"
36
36
  },
37
- "gitHead": "75658c3103d5398649323709c03d8ba97771532e"
37
+ "gitHead": "5eee5f8092c3d92b9ba054c00baa1bc484511c69"
38
38
  }