@contentful/f36-spinner 4.6.2 → 4.7.0
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.
- package/CHANGELOG.md +7 -0
- package/dist/main.js +3 -3
- package/dist/main.js.map +1 -1
- package/dist/module.js +3 -3
- package/dist/module.js.map +1 -1
- package/package.json +3 -3
package/CHANGELOG.md
CHANGED
package/dist/main.js
CHANGED
|
@@ -87,7 +87,7 @@ const $05c01a9aaed28186$var$variants = {
|
|
|
87
87
|
};
|
|
88
88
|
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
89
|
const styles = $ccc4b2a72ca993e7$export$ffd58b7f6f099a57();
|
|
90
|
-
return
|
|
90
|
+
return /*#__PURE__*/ ($parcel$interopDefault($b84Wv$react)).createElement($b84Wv$contentfulf36core.Box, {
|
|
91
91
|
as: $05c01a9aaed28186$var$SPINNER_DEFAULT_TAG,
|
|
92
92
|
display: "inline-block",
|
|
93
93
|
...otherProps,
|
|
@@ -104,7 +104,7 @@ const $05c01a9aaed28186$export$7f7cbe89f1eacd2 = /*#__PURE__*/ $b84Wv$react.forw
|
|
|
104
104
|
}),
|
|
105
105
|
viewBox: "0 0 60 51",
|
|
106
106
|
xmlns: "http://www.w3.org/2000/svg"
|
|
107
|
-
}, /*#__PURE__*/ ($parcel$interopDefault($b84Wv$react)).createElement("title", null, "Loading
|
|
107
|
+
}, /*#__PURE__*/ ($parcel$interopDefault($b84Wv$react)).createElement("title", null, "Loading\u2026"), /*#__PURE__*/ ($parcel$interopDefault($b84Wv$react)).createElement("g", {
|
|
108
108
|
className: styles.circle1Translate,
|
|
109
109
|
transform: "translate(10,33.528168)"
|
|
110
110
|
}, /*#__PURE__*/ ($parcel$interopDefault($b84Wv$react)).createElement("g", {
|
|
@@ -128,7 +128,7 @@ const $05c01a9aaed28186$export$7f7cbe89f1eacd2 = /*#__PURE__*/ $b84Wv$react.forw
|
|
|
128
128
|
}, /*#__PURE__*/ ($parcel$interopDefault($b84Wv$react)).createElement("circle", {
|
|
129
129
|
r: "6",
|
|
130
130
|
transform: "translate(0,10.471832)"
|
|
131
|
-
})))))
|
|
131
|
+
})))));
|
|
132
132
|
});
|
|
133
133
|
$05c01a9aaed28186$export$7f7cbe89f1eacd2.displayName = 'Spinner';
|
|
134
134
|
|
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 {\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"}
|
|
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":"main.js.map"}
|
package/dist/module.js
CHANGED
|
@@ -79,7 +79,7 @@ const $e780e5d24bf8af61$var$variants = {
|
|
|
79
79
|
};
|
|
80
80
|
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
81
|
const styles = $d9f7c1001d753182$export$ffd58b7f6f099a57();
|
|
82
|
-
return
|
|
82
|
+
return /*#__PURE__*/ $dzcjh$react.createElement($dzcjh$Box, {
|
|
83
83
|
as: $e780e5d24bf8af61$var$SPINNER_DEFAULT_TAG,
|
|
84
84
|
display: "inline-block",
|
|
85
85
|
...otherProps,
|
|
@@ -96,7 +96,7 @@ const $e780e5d24bf8af61$export$7f7cbe89f1eacd2 = /*#__PURE__*/ $dzcjh$forwardRef
|
|
|
96
96
|
}),
|
|
97
97
|
viewBox: "0 0 60 51",
|
|
98
98
|
xmlns: "http://www.w3.org/2000/svg"
|
|
99
|
-
}, /*#__PURE__*/ $dzcjh$react.createElement("title", null, "Loading
|
|
99
|
+
}, /*#__PURE__*/ $dzcjh$react.createElement("title", null, "Loading\u2026"), /*#__PURE__*/ $dzcjh$react.createElement("g", {
|
|
100
100
|
className: styles.circle1Translate,
|
|
101
101
|
transform: "translate(10,33.528168)"
|
|
102
102
|
}, /*#__PURE__*/ $dzcjh$react.createElement("g", {
|
|
@@ -120,7 +120,7 @@ const $e780e5d24bf8af61$export$7f7cbe89f1eacd2 = /*#__PURE__*/ $dzcjh$forwardRef
|
|
|
120
120
|
}, /*#__PURE__*/ $dzcjh$react.createElement("circle", {
|
|
121
121
|
r: "6",
|
|
122
122
|
transform: "translate(0,10.471832)"
|
|
123
|
-
})))))
|
|
123
|
+
})))));
|
|
124
124
|
});
|
|
125
125
|
$e780e5d24bf8af61$export$7f7cbe89f1eacd2.displayName = 'Spinner';
|
|
126
126
|
|
package/dist/module.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
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,gBAAAA,CAAAA,CAAAA;YAAM,IAAA,EAAA,CAAA;YAAA,MAAA,EAAA,CAAA;QAAA,CAAA;QAgCNC,MAAM,EAANA,EAAAA,AAAAA,SAAAA,AAAAA,EAAAA,CAAAA,gBAAAA,CAAAA,CAAAA;YAAM,IAAA,EAAA,CAAA;YAAA,MAAA,EAAA,CAAA;QAAA,CAAA;QAmCNC,MAAM,EAANA,EAAAA,AAAAA,SAAAA,AAAAA,EAAAA,CAAAA,gBAAAA,CAAAA,CAAAA;YAAM,IAAA,EAAA,CAAA;YAAA,MAAA,EAAA,CAAA;QAAA,CAAA;QAmCNC,UAAU,EAAVA,EAAAA,AAAAA,SAAAA,AAAAA,EAAAA,CAAAA,gBAAAA,CAAAA,CAAAA;YAAU,IAAA,EAAA,CAAA;YAAA,MAAA,EAAA,CAAA;QAAA,CAAA;QAgCVC,UAAU,EAAVA,EAAAA,AAAAA,SAAAA,AAAAA,EAAAA,CAAAA,gBAAAA,CAAAA,CAAAA;YAAU,IAAA,EAAA,CAAA;YAAA,MAAA,EAAA,CAAA;QAAA,CAAA;QAmCVC,UAAU,EAAVA,EAAAA,AAAAA,SAAAA,AAAAA,EAAAA,CAAAA,gBAAAA,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,UAAA,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,UAAA,CAAI,CAAlBA;YACEsB,SAAS,KAAKZ,UAAU,CAACC,MAAO,CAAhCW,oCAAAA;QADgB,CAAJ;QAGdpB,YAAY,EAAA,EAAE,AAAF,SAAE,AAAF,EAAE,CAAA,UAAA,CAAI,CAAlBA;YACEoB,SAAS,KAAKZ,UAAU,CAACE,MAAO,CAAhCU,oCAAAA;QADgB,CAAJ;QAGdlB,YAAY,EAAA,EAAE,AAAF,SAAE,AAAF,EAAE,CAAA,UAAA,CAAI,CAAlBA;YACEkB,SAAS,KAAKZ,UAAU,CAACG,MAAO,CAAhCS,oCAAAA;QADgB,CAAJ;QAGdvB,gBAAgB,EAAA,EAAE,AAAF,SAAE,AAAF,EAAE,CAAA,UAAA,CAAI,CAAtBA;YACEuB,SAAS,KAAKZ,UAAU,CAACI,UAAW,CAApCQ,oCAAAA;QADoB,CAAJ;QAGlBrB,gBAAgB,EAAA,EAAE,AAAF,SAAE,AAAF,EAAE,CAAA,UAAA,CAAI,CAAtBA;YACEqB,SAAS,KAAKZ,UAAU,CAACK,UAAW,CAApCO,oCAAAA;QADoB,CAAJ;QAGlBnB,gBAAgB,EAAA,EAAE,AAAF,SAAE,AAAF,EAAE,CAAA,UAAA,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,0BAAM,CAACW,OADoC;IAEpDC,OAAO,EAAEZ,0BAAM,CAACa,YAFoC;IAGpDC,KAAK,EAAEd,0BAAM,CAACe,UAAdD;AAHoD,CAAtD;AAwBO,KAAA,CAAMlB,wCAAO,iBAAGG,iBAAU,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,UAAD;QACE,EAAA,EAAIC,yCAAD;QACH,OAAA,EAAQ,CAFV;WAGMe,UAAJ;QACA,SAAA,EAAW,SAAA,CAAGE,MAAM,CAACC,IAAP,CAAY,CAL9B;kBAKgCP,IAAF;wBAAQD,UAAAA;QAAR,CAAZ,GAAmCG,SAAtC;QACX,GAAA,EAAKG,YAAD;QACJ,MAAA,EAAQF,MAAD;gDAEN,CAAD;QACE,SAAA,EAAW,UAAA,CAAI,CADzB;YAEYK,OAAO,EAAE,CADI;YAEbC,IAAI,EAAEnB,8BAAQ,CAACQ,OAAD;QAFD,CAAJ;QAIX,OAAA,EAAQ,CALV;QAME,KAAA,EAAM,CANR;gDAQG,CAAD,cAAO,CAAQ,uDACd,CAAD;QACE,SAAA,EAAWQ,MAAM,CAACI,gBAAR;QACV,SAAA,EAAU,CAFZ;gDAIG,CAAD;QAAG,SAAA,EAAWJ,MAAM,CAACK,YAAR;gDACV,CAAD;QAAQ,CAAA,EAAE,CAAV;QAAc,SAAA,EAAU,CAAxB;mDAIH,CAAD;QACE,SAAA,EAAWL,MAAM,CAACM,gBAAR;QACV,SAAA,EAAU,CAFZ;gDAIG,CAAD;QAAG,SAAA,EAAWN,MAAM,CAACO,YAAR;gDACV,CAAD;QAAQ,CAAA,EAAE,CAAV;QAAc,SAAA,EAAU,CAAxB;mDAIH,CAAD;QACE,SAAA,EAAWP,MAAM,CAACQ,gBAAR;QACV,SAAA,EAAU,CAFZ;gDAIG,CAAD;QAAG,SAAA,EAAWR,MAAM,CAACS,YAAR;gDACV,CAAD;QAAQ,CAAA,EAAE,CAAV;QAAc,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":"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/package.json
CHANGED
|
@@ -1,18 +1,18 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@contentful/f36-spinner",
|
|
3
|
-
"version": "4.
|
|
3
|
+
"version": "4.7.0",
|
|
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.
|
|
10
|
+
"@contentful/f36-core": "^4.7.0",
|
|
11
11
|
"@contentful/f36-tokens": "^4.0.1",
|
|
12
12
|
"emotion": "^10.0.17"
|
|
13
13
|
},
|
|
14
14
|
"devDependencies": {
|
|
15
|
-
"@contentful/f36-typography": "^4.
|
|
15
|
+
"@contentful/f36-typography": "^4.7.0"
|
|
16
16
|
},
|
|
17
17
|
"peerDependencies": {
|
|
18
18
|
"react": ">=16.8"
|