@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 CHANGED
@@ -1,5 +1,12 @@
1
1
  # Change Log
2
2
 
3
+ ## 4.7.0
4
+
5
+ ### Patch Changes
6
+
7
+ - Updated dependencies [[`e50b8945`](https://github.com/contentful/forma-36/commit/e50b8945faef7323187e1bd9a2a9cbfcbae2e405)]:
8
+ - @contentful/f36-core@4.7.0
9
+
3
10
  ## 4.6.2
4
11
 
5
12
  ### Patch Changes
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(/*#__PURE__*/ ($parcel$interopDefault($b84Wv$react)).createElement($b84Wv$contentfulf36core.Box, {
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"), /*#__PURE__*/ ($parcel$interopDefault($b84Wv$react)).createElement("g", {
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(/*#__PURE__*/ $dzcjh$react.createElement($dzcjh$Box, {
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"), /*#__PURE__*/ $dzcjh$react.createElement("g", {
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
 
@@ -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":"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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.6.2",
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.6.2",
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.6.2"
15
+ "@contentful/f36-typography": "^4.7.0"
16
16
  },
17
17
  "peerDependencies": {
18
18
  "react": ">=16.8"