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

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 +34 -51
  2. package/dist/main.js.map +1 -1
  3. package/dist/module.js +35 -52
  4. package/dist/module.js.map +1 -1
  5. package/dist/types.d.ts +0 -0
  6. package/dist/types.d.ts.map +0 -0
  7. package/package.json +5 -5
package/dist/main.js CHANGED
@@ -1,4 +1,3 @@
1
- var $b84Wv$reactjsxruntime = require("react/jsx-runtime");
2
1
  var $b84Wv$emotion = require("emotion");
3
2
  var $b84Wv$react = require("react");
4
3
  var $b84Wv$contentfulf36tokens = require("@contentful/f36-tokens");
@@ -19,7 +18,6 @@ $parcel$export(module.exports, "Spinner", () => $05c01a9aaed28186$export$7f7cbe8
19
18
 
20
19
 
21
20
 
22
-
23
21
  const $ccc4b2a72ca993e7$var$sizes = {
24
22
  large: '36px',
25
23
  medium: '20px',
@@ -89,7 +87,7 @@ const $05c01a9aaed28186$var$variants = {
89
87
  };
90
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)=>{
91
89
  const styles = $ccc4b2a72ca993e7$export$ffd58b7f6f099a57();
92
- return(/*#__PURE__*/ $b84Wv$reactjsxruntime.jsx($b84Wv$contentfulf36core.Box, {
90
+ return(/*#__PURE__*/ ($parcel$interopDefault($b84Wv$react)).createElement($b84Wv$contentfulf36core.Box, {
93
91
  as: $05c01a9aaed28186$var$SPINNER_DEFAULT_TAG,
94
92
  display: "inline-block",
95
93
  ...otherProps,
@@ -98,54 +96,39 @@ const $05c01a9aaed28186$export$7f7cbe89f1eacd2 = /*#__PURE__*/ $b84Wv$react.forw
98
96
  customSize: customSize
99
97
  }), className),
100
98
  ref: forwardedRef,
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
- }));
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
+ }))))));
149
132
  });
150
133
  $05c01a9aaed28186$export$7f7cbe89f1eacd2.displayName = 'Spinner';
151
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
@@ -1,6 +1,5 @@
1
- import {jsx as $dzcjh$jsx, jsxs as $dzcjh$jsxs} from "react/jsx-runtime";
2
1
  import {cx as $dzcjh$cx, css as $dzcjh$css, keyframes as $dzcjh$keyframes} from "emotion";
3
- import {forwardRef as $dzcjh$forwardRef} from "react";
2
+ import $dzcjh$react, {forwardRef as $dzcjh$forwardRef} from "react";
4
3
  import $dzcjh$contentfulf36tokens from "@contentful/f36-tokens";
5
4
  import {Box as $dzcjh$Box} from "@contentful/f36-core";
6
5
 
@@ -11,7 +10,6 @@ import {Box as $dzcjh$Box} from "@contentful/f36-core";
11
10
 
12
11
 
13
12
 
14
-
15
13
  const $d9f7c1001d753182$var$sizes = {
16
14
  large: '36px',
17
15
  medium: '20px',
@@ -81,7 +79,7 @@ const $e780e5d24bf8af61$var$variants = {
81
79
  };
82
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)=>{
83
81
  const styles = $d9f7c1001d753182$export$ffd58b7f6f099a57();
84
- return(/*#__PURE__*/ $dzcjh$jsx($dzcjh$Box, {
82
+ return(/*#__PURE__*/ $dzcjh$react.createElement($dzcjh$Box, {
85
83
  as: $e780e5d24bf8af61$var$SPINNER_DEFAULT_TAG,
86
84
  display: "inline-block",
87
85
  ...otherProps,
@@ -90,54 +88,39 @@ const $e780e5d24bf8af61$export$7f7cbe89f1eacd2 = /*#__PURE__*/ $dzcjh$forwardRef
90
88
  customSize: customSize
91
89
  }), className),
92
90
  ref: forwardedRef,
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
- }));
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
+ }))))));
141
124
  });
142
125
  $e780e5d24bf8af61$export$7f7cbe89f1eacd2.displayName = 'Spinner';
143
126
 
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 {\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":";;;;;;;;;;;;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"}
package/dist/types.d.ts CHANGED
File without changes
package/dist/types.d.ts.map CHANGED
File without changes
package/package.json CHANGED
@@ -1,18 +1,18 @@
1
1
  {
2
2
  "name": "@contentful/f36-spinner",
3
- "version": "4.0.1-beta.2694+5eee5f80",
3
+ "version": "4.0.1-beta.2696+d160443b",
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.2694+5eee5f80",
11
- "@contentful/f36-tokens": "4.0.1-beta.2694+5eee5f80",
10
+ "@contentful/f36-core": "4.0.1-beta.2696+d160443b",
11
+ "@contentful/f36-tokens": "4.0.1-beta.2696+d160443b",
12
12
  "emotion": "^10.0.17"
13
13
  },
14
14
  "devDependencies": {
15
- "@contentful/f36-typography": "4.0.1-beta.2694+5eee5f80"
15
+ "@contentful/f36-typography": "4.0.1-beta.2696+d160443b"
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": "5eee5f8092c3d92b9ba054c00baa1bc484511c69"
37
+ "gitHead": "d160443b21d033f6567ce0cf6a7760c42d89a772"
38
38
  }