From 9bd6d01f85a6c94a7a2c47ec0caa0e951bc6d80e Mon Sep 17 00:00:00 2001 From: Oleksandr Fediashov Date: Mon, 25 Mar 2019 16:31:29 +0200 Subject: [PATCH 01/13] feat(Loader): add support for SVG animations, update in Teams theme --- .../react/src/components/Loader/Loader.tsx | 10 ++- .../react/src/themes/teams/componentStyles.ts | 2 + .../src/themes/teams/componentVariables.ts | 2 + .../teams/components/Loader/loaderStyles.ts | 85 +++++++++++++++++++ .../components/Loader/loaderSvgDataUrl.ts | 1 + .../components/Loader/loaderVariables.ts | 44 ++++++++++ 6 files changed, 143 insertions(+), 1 deletion(-) create mode 100644 packages/react/src/themes/teams/components/Loader/loaderStyles.ts create mode 100644 packages/react/src/themes/teams/components/Loader/loaderSvgDataUrl.ts create mode 100644 packages/react/src/themes/teams/components/Loader/loaderVariables.ts diff --git a/packages/react/src/components/Loader/Loader.tsx b/packages/react/src/components/Loader/Loader.tsx index 44c8123f50..95ffa4d568 100644 --- a/packages/react/src/components/Loader/Loader.tsx +++ b/packages/react/src/components/Loader/Loader.tsx @@ -105,6 +105,9 @@ class Loader extends UIComponent, LoaderState> { const { indicator, label } = this.props const { visible } = this.state + const svgElement = + styles.svg && Box.create({}, { defaultProps: { className: 'container', styles: styles.svg } }) + return ( visible && ( , LoaderState> { {...accessibility.attributes.root} {...unhandledProps} > - {Box.create(indicator, { defaultProps: { styles: styles.indicator } })} + {Box.create(indicator, { + defaultProps: { + children: svgElement, + styles: styles.indicator, + }, + })} {Box.create(label, { defaultProps: { styles: styles.label } })} ) diff --git a/packages/react/src/themes/teams/componentStyles.ts b/packages/react/src/themes/teams/componentStyles.ts index c69164a190..a556109730 100644 --- a/packages/react/src/themes/teams/componentStyles.ts +++ b/packages/react/src/themes/teams/componentStyles.ts @@ -43,6 +43,8 @@ export { default as Label } from './components/Label/labelStyles' export { default as Layout } from './components/Layout/layoutStyles' +export { default as Loader } from './components/Loader/loaderStyles' + export { default as ItemLayout } from './components/ItemLayout/itemLayoutStyles' export { default as List } from './components/List/listStyles' diff --git a/packages/react/src/themes/teams/componentVariables.ts b/packages/react/src/themes/teams/componentVariables.ts index 61a93c4583..326fb335c7 100644 --- a/packages/react/src/themes/teams/componentVariables.ts +++ b/packages/react/src/themes/teams/componentVariables.ts @@ -40,6 +40,8 @@ export { default as Label } from './components/Label/labelVariables' export { default as Layout } from './components/Layout/layoutVariables' +export { default as Loader } from './components/Loader/loaderVariables' + export { default as ItemLayout } from './components/ItemLayout/itemLayoutVariables' export { default as ListItem } from './components/List/listItemVariables' diff --git a/packages/react/src/themes/teams/components/Loader/loaderStyles.ts b/packages/react/src/themes/teams/components/Loader/loaderStyles.ts new file mode 100644 index 0000000000..91bedeb10e --- /dev/null +++ b/packages/react/src/themes/teams/components/Loader/loaderStyles.ts @@ -0,0 +1,85 @@ +import { LoaderProps } from '../../../../components/Loader/Loader' +import { ComponentStyleFunctionParam, ICSSInJSStyle } from '../../../types' +import { LoaderVariables } from './loaderVariables' + +export default { + indicator: ({ + props: p, + variables: v, + }: ComponentStyleFunctionParam): ICSSInJSStyle => ({ + // Reset existing styles from base theme + animationName: 'none', + animationDuration: 'unset', + animationIterationCount: 'unset', + animationTimingFunction: 'unset', + borderColor: 'transparent', + borderRadius: 0, + borderStyle: 'none', + borderWidth: 0, + + height: v.containerHeights[p.size], + width: v.containerWidths[p.size], + overflow: 'hidden', + }), + svg: ({ + props: p, + theme: t, + variables: v, + }: ComponentStyleFunctionParam) => { + const outerAnimation: ICSSInJSStyle = { + animationName: t.renderer.renderKeyframe( + () => + ({ + to: { + opacity: 1, + }, + } as any), + {}, + ), + animationDelay: '1.5s', + animationDirection: 'normal', + animationDuration: '.3s', + animationFillMode: 'both', + animationIterationCount: '1', + animationPlayState: 'running', + animationTimingFunction: 'ease-out', + display: 'block', + overflow: 'hidden', + position: 'relative', + } + const svgAnimation: ICSSInJSStyle = { + animationName: t.renderer.renderKeyframe( + () => + ({ + to: { + transform: `translate3d(0, ${v.svgTranslatePosition[p.size]}, 0)`, + }, + } as any), + {}, + ), + animationDelay: '0s', + animationDirection: 'normal', + animationDuration: '2s', + animationFillMode: 'both', + animationPlayState: 'running', + animationTimingFunction: 'steps(60, end)', + animationIterationCount: 'infinite', + } + + return { + ...outerAnimation, + + ':before': { + ...svgAnimation, + + backgroundImage: v.svgContent, + content: '" "', + display: 'block', + overflow: 'hidden', + + height: v.svgHeights[p.size], + width: v.svgWidths[p.size], + }, + } + }, +} diff --git a/packages/react/src/themes/teams/components/Loader/loaderSvgDataUrl.ts b/packages/react/src/themes/teams/components/Loader/loaderSvgDataUrl.ts new file mode 100644 index 0000000000..548552fd3b --- /dev/null +++ b/packages/react/src/themes/teams/components/Loader/loaderSvgDataUrl.ts @@ -0,0 +1 @@ +export default `url("data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 80 4880\'%3E%3Cg role=\'presentation\'%3E%3Cpath fill=\'%236264a7\' d=\'M67.4 26.4c5.8-2 12.4 3.3 11.4 9.4-.4 6.5-8.8 10-13.8 6-5.6-3.6-4.2-13.5 2.4-15.3zM66.5 113.7c5.7-3.3 13.6 1.8 12.7 8.4 0 6.4-8 10.4-13.2 7-5.6-3.2-5.4-12.5.5-15.3z\'%3E%3C/path%3E%3Cpath fill=\'%235659b0\' d=\'M65.5 200.4c5.7-3.4 13.6 2 12.6 8.5 0 6-7 10.7-12.7 7.7-6.4-3-6-13.2.2-16.3z\'%3E%3C/path%3E%3Cpath fill=\'%23575ab1\' d=\'M64.3 286.2c5-2 11.3 2.3 11.2 7.8 0 5.4-4.5 11.7-10.5 11-5.4-.3-9.2-6.3-7.3-11.2 1.2-3.2 3.2-6.5 6.6-7.6z\'%3E%3C/path%3E%3Cpath fill=\'%23585bb2\' d=\'M59.4 372.5c5-2.6 11.6 1 12 6.5.8 5-3.4 8.6-7 11.3-4.5 3.2-11.7.2-12.6-5.3-1.4-5.5 3.6-9.7 7.6-12.5z\'%3E%3C/path%3E%3Cpath fill=\'%235a5db4\' d=\'M54.3 457.4c4-2.2 9.6 0 11.2 4.2 1.7 3.7 0 8.4-3.5 10.5-3.7 2.5-8.2 5.6-12.8 4-4.3-1.6-6.5-6.8-4.8-11 1.5-4.2 6.4-5.4 10-7.6z\'%3E%3C/path%3E%3Cpath fill=\'%235b5fb6\' d=\'M48.6 540.7c4.4-2 10 1 11 5.7 1 4-1.4 8.4-5.4 9.7-4 1.6-8.5 3-13 2.5-5.6-.8-8.6-8-5.3-12.6 2.7-4.4 8.4-3.5 12.6-5.3z\'%3E%3C/path%3E%3Cpath fill=\'%235d60b8\' d=\'M29.4 622.4c3-1.5 6.4 0 9.6 0 3.4.3 7.3-1 10.3 1.3 4.6 3 4.4 10.4-.2 13.3-3.7 2-8.2 1.7-12.4 1.5-3.6-.5-7.8-.7-10.2-4-3.2-3.7-1.6-10.2 3-12z\'%3E%3C/path%3E%3Cpath fill=\'%235f63ba\' d=\'M20.3 698.3c4-2 7.8 1.3 11.4 2.8 4 2 9.6 1 12.2 5 3.3 4.7-.2 12-6 12.3-7 0-14-2.6-19.7-6.6-4.7-3.4-3.5-11.6 2-13.4z\'%3E%3C/path%3E%3Cpath fill=\'%236165bc\' d=\'M12.3 771.3c3-1.5 7-.6 9 2 3 3.8 6.7 6.7 11 8.3 3.3 1 5.7 4 5.5 7.4.2 4.8-4.8 8.7-9.3 7.4-7.7-2.2-14.5-7.2-19.3-13.6-2.8-3.7-1.2-9.8 3-11.5z\'%3E%3C/path%3E%3Cpath fill=\'%236467bf\' d=\'M7.5 841.7c4-2 9.2.3 10.3 4.6 1.7 5.4 5 10 9.7 13 4 2.5 4.6 8.4 1.4 11.6-2.5 2.6-7 3-10 1-7.4-5-13-12.6-15.5-21-1.2-3.6.5-8 4-9.3z\'%3E%3C/path%3E%3Cpath fill=\'%23666ac1\' d=\'M6.5 910.8c3-1.6 7.3-.4 9 2.6 1.7 2.2 1 5 1.4 7.6 0 5.6 2.5 11 6 15 2.5 2.5 2.7 6.7.5 9.5-2.4 3.3-7.8 3.8-10.7 1-7.6-7.8-11.5-19-10.6-29.6.2-2.7 1.8-5.2 4.3-6.2z\'%3E%3C/path%3E%3Cpath fill=\'%23696cc4\' d=\'M9.3 980c3.7-2 9 .3 10 4.4 1 2.4-.2 4.8-1 7-2.4 5.7-2.3 12.4.3 18 1 2.3 2.4 5 1.5 7.6-1 4-5.7 6.2-9.5 4.5-2.6-1-3.8-3.7-5-6-4.4-10-4.3-21.8.4-31.6.6-1.7 1.7-3 3.3-4z\'%3E%3C/path%3E%3Cpath fill=\'%236b6fc7\' d=\'M16.3 1051.2c4-2.6 10 1 10 5.8.5 3-2 5.3-4 7.4-5.3 5.7-7 14-5.2 21.6 1 3.5-1 7.4-4.4 8.5-3.4 1.2-7.6-.8-8.7-4.3-4.2-13.8.7-30.2 12.3-39z\'%3E%3C/path%3E%3Cpath fill=\'%236e72ca\' d=\'M26.4 1125.3c4.5-2.6 10.7 1.5 10 6.7-.4 3.3-3.3 5.2-6 6.3-8.2 3.4-14 11.8-14.2 20.6 0 2.6-.6 5.6-3.2 7-4 2.8-10 0-10.2-5-.8-15.3 9.2-30.3 23.6-35.7z\'%3E%3C/path%3E%3Cpath fill=\'%237175cd\' d=\'M35.3 1203.2c3.7-.3 8.6-1.2 11.2 2.3 2.7 3.2 1 8.8-3 10-3.7.8-7.7.3-11.3 1.7-8 2.6-13.8 9.5-15.8 17.5-1 4.7-7.6 6.2-10.8 2.7-2.8-2.7-1.7-7-.4-10 4.5-13 16.6-22.6 30-24.2z\'%3E%3C/path%3E%3Cpath fill=\'%237478d0\' d=\'M36.4 1283.3c7-.6 14.2.5 20.3 4 3.8 2.4 3.3 8.7-.8 10.6-3 1.5-6-.2-8.6-1-9.8-3.5-21.6.5-27.3 9-1.5 2.4-3 5.6-6 6-4.6 1-9-4.4-6.8-8.7 5.4-11 17-18.8 29.2-20z\'%3E%3C/path%3E%3Cpath fill=\'%23777bd3\' d=\'M36.5 1363.5c11.6-1 23.8 3.6 31.3 12.7 2.7 3.6-.3 9.5-4.8 9.4-3.2.3-5-2.6-7.3-4.4-8.4-7.4-22.2-7.6-31-.4-2.3 1.8-4.3 5-7.7 4.7-4.7 0-7.5-6.3-4.4-9.8 6-7 14.8-11.3 24-12.2z\'%3E%3C/path%3E%3Cpath fill=\'%237a7ed6\' d=\'M31.4 1444.6c18-4.8 38.3 6.6 43.3 24.6 1 4-3.5 8-7.4 6.6-3.5-1-4-4.8-5.5-7.5-5.5-10.8-19.6-16-30.8-11.4-3.2 1-6.2 4.3-10 3-3.8-1.4-5-7.2-1.7-9.8 3.5-2.8 7.8-4.4 12-5.6z\'%3E%3C/path%3E%3Cpath fill=\'%237d81da\' d=\'M32.4 1524.6c15-3.4 31.8 4 39.2 17.8 3.5 6.5 5.3 14 4.3 21.5-1 4-6.7 5.5-9.5 2.4-2-2-1.4-5-1.6-7.4-.2-11.6-9.6-22-21-23.7-4.4-.8-8.8 0-13 1-4 1.2-7.7-3.5-6-7.2 1-3 4.6-3.7 7.4-4.4z\'%3E%3C/path%3E%3Cpath fill=\'%238084dd\' d=\'M36.3 1604.4c14-2 28.5 6 35 18.2 6 10.6 6 24.3 0 34.8-2 3.5-7.6 3-9-.6-1.8-3.5 1.4-6.8 2-10.2 3.8-12.4-4-26.7-16.3-30.5-4-1.6-8.3-.8-12.4-1.6-4.6-1.7-4-9 .7-10z\'%3E%3C/path%3E%3Cpath fill=\'%238387e0\' d=\'M43.3 1685.3c4-1.2 8.2 1 12 2.5 14.7 6.6 23.3 24.2 19.5 40-1.8 8-6.5 15.7-13.4 20.6-3 2.2-8-.6-7.7-4.4 0-2.3 1.8-3.7 3.3-5 7-6 10-16 7.8-24.7-1.8-8-7.6-15-15.3-18-2.2-.8-4.6-1-6.8-2-3.4-2-3-7.5.6-9z\'%3E%3C/path%3E%3Cpath fill=\'%23868be4\' d=\'M50.2 1768c1.4-.8 3.2-.8 4.7 0 13.2 5.7 21.7 20.5 20.3 35-1 15-12.6 28.5-27.3 31.4-3.4.6-6.4-3-5-6.3.6-2.6 3.7-3 6-4 8.2-2.8 14.5-10.4 16.2-19 2-9-1.5-18.8-8.6-24.6-2.2-2-5-3-7.2-4.8-2.2-2-1.7-6 .8-7.5z\'%3E%3C/path%3E%3Cpath fill=\'%238a8ee7\' d=\'M57.4 1852.2c3.7-1.8 6.6 2 9 4.5 11 12 11.7 31.6 1.7 44.5-6.8 9.3-18.5 14.6-30 14-2.4-.3-5.3-.2-7-2.2-1.6-2-1-5.4 1.3-6.8 1.7-1 3.8-.3 5.6-.4 9.8 1 20-4.5 24.7-13.2 4.6-8 4.3-18.7-.8-26.5-1.8-3-4.5-5-6.6-7.4-1.4-2.2-.4-5.4 2-6.4z\'%3E%3C/path%3E%3Cpath fill=\'%238d91ea\' d=\'M62.3 1938.3c1.7-1 4.3-1 5.6.8 9 11.5 9.2 28.8.8 40.8-7 10.4-20 16.4-32.6 15-5.7-.7-11.3-2.7-16-6-2.6-1.8-2-6.4 1-7.5 2.2-1 4.2.6 6 1.5 8.6 5 20 4.4 28-1.5 7.7-5.4 12-15 10.8-24.3-.3-4.5-2.3-8.6-4.7-12.4-1.6-2-1-5 1-6.3z\'%3E%3C/path%3E%3Cpath fill=\'%239095ee\' d=\'M66.3 2025.2c2-1.2 4.8-.5 5.7 1.6 5.6 12.8 2.2 28.7-8 38.2-9.4 9.2-24.2 12.2-36.5 7.4-7-2.8-13.5-8-17.3-14.7-1.2-2.6 1-5.8 3.8-5.7 2.5 0 3.7 2.4 5 4 7 9.5 20.5 13 31.2 8.4 12-4.7 19-18.8 15.3-31-.8-2.7-2.3-6.5.8-8.2z\'%3E%3C/path%3E%3Cpath fill=\'%239398f1\' d=\'M68.6 2112.7c2-1 5 0 5.4 2.4 2.4 14.5-5.8 30-19.2 36-12.5 6.2-28.7 3.6-38.7-6.2-5.6-5.5-9.4-13-10-21-.4-4 6-5 7.2-1.2 1 5.5 3 11 7 15.3 7 7.8 19 11 28.8 7 10.7-3.6 18.4-14.7 17.7-26-.2-2.2-.6-5.3 2-6.3z\'%3E%3C/path%3E%3Cpath fill=\'%23969bf5\' d=\'M8.4 2188.4c2-2 6-.3 6 2.6-.4 2-1 4-1.2 5.8-1 8.8 2.5 18 9.3 23.7 7 6 17.2 8 26 5 10-3 17-12.3 18.4-22.5.3-4 6.7-3.6 7 .3-1 15-13.3 28-28 30.3-13 2.5-27.4-3.6-34.6-15-5.2-7.8-6.8-17.8-4.6-27 .4-1 .6-2.4 1.6-3.2z\'%3E%3C/path%3E%3Cpath fill=\'%23999ef8\' d=\'M15.3 2257c2-1 4.4 0 5 2.2.3 2-1.3 3.3-2.3 4.8-5.7 7.6-6.8 18.2-3 27 4.3 10 15 16.7 26 16.2 10-.3 19.4-6.6 23.7-15.6 1.2-3.4 6.7-2.2 6.4 1.4-.7 3.4-3 6.3-5 9-9.3 11-26 15-39.3 9.2C13.8 2306 5 2292 6 2278c.7-7.8 3.7-15.7 9.3-21z\'%3E%3C/path%3E%3Cpath fill=\'%239ca1fb\' d=\'M25.6 2329.6c1.8-1.2 4.5.2 4.6 2.5.2 2.7-2.8 3.4-4.6 4.7-12 7-16.6 23.5-10 35.7 5.8 12.2 21.6 18.4 34.2 13.2 3.6-1.2 6.4-3.6 9.5-5.7 2.8-2 6 2.5 3.6 4.7-11.4 11-30.5 12-43 2.4-12.8-9-17.4-27.3-10.5-41.3 3.3-7 9-13 16-16z\'%3E%3C/path%3E%3Cpath fill=\'%236264a7\' d=\'M33.2 2407.2c2.3-.4 4.6-.8 7-.6 2.4.5 3 4.2.6 5.4-4 .7-8.3 1-12 2.8-12.6 5.3-19.5 20.5-15.2 33.4 4 13.3 18.8 22 32.3 18.8 2-.6 6-2 6.7 1.3.7 3.7-4 4-6.6 4.6-15.4 3-32.3-6.4-37.4-21.4-5.3-13.8 0-30.6 12-39 3.8-2.6 8-4.4 12.6-5.4z\'%3E%3C/path%3E%3Cpath fill=\'%239ca1fb\' d=\'M37.4 2486.4c5.5-.4 11.3.4 16.3 3 2 1.6.8 5.3-2 5.4-3.5-.8-7-2.3-10.8-2.2-13-.7-25.2 9-27.8 21.4-3 12 3.4 25 14.4 30.5 3.4 2 7.3 2.3 11 3 2.7 1 2.3 5.6-.6 6-17.3-.3-32-16.3-31.7-33.5-.4-17 14-32.7 31-33.6z\'%3E%3C/path%3E%3Cpath fill=\'%23999ef8\' d=\'M33.5 2566.7c10.8-2.2 22.7 1.3 30.5 9.3 1.8 1.6 1 5-1.3 5.6-2.3 1-4-1.5-5.6-2.7-9.6-8.4-25-8-34.6.3-8.6 7-12 19.7-8 30 2.3 6.4 7 11.4 12.7 14.8 3.2 2 .6 7.3-2.8 6-13.8-6.8-21.2-24-17-38.7 3-12.3 13.8-22.3 26.3-24.6z\'%3E%3C/path%3E%3Cpath fill=\'%23969bf5\' d=\'M32.4 2646.7c15-3.7 32 4.3 38.3 18.5.8 2.3-1.4 4.8-3.8 4.5-2.2 0-3-2.2-4-3.7-5.6-9.7-17.8-14.8-28.6-12.4-9.8 2-18 10-20.5 19.6-2 7.2-.8 15.2 3.4 21.4 1 1.5 2.4 3.3 1.4 5.2-1 2.4-4.7 2.8-6 .7-9.2-11.7-9.2-29.2-.2-41 4.8-6.4 12-11 19.8-12.8z\'%3E%3C/path%3E%3Cpath fill=\'%239398f1\' d=\'M31.4 2726.7c14.6-4 31.3 3 38.5 16.3 1.7 3.3 3.4 7 3.7 10.8-.3 2.8-4 4.3-6 2.6-1.6-1-1.7-3-2.3-4.6-2.5-8.4-9.6-15-18-17.5-8.6-2.6-18.6-.3-25.2 5.8-6.5 6-10 15-8.6 23.5 0 1.8 1 4-.5 5.6-1.5 2.2-5.2 1.8-6.3-.7-5.2-17.5 7-37.5 24.7-41.6z\'%3E%3C/path%3E%3Cpath fill=\'%239095ee\' d=\'M36.4 2805.5c14.7-1.7 29.7 7 35.4 20.6 2 5 3.2 10.4 2.8 15.7-.5 4-6.7 4.5-7.8.7-.6-3.3-.3-6.8-1.5-10-3-10.4-12.7-18.2-23.4-18.8-11.8-1-23.7 6.8-27 18-1 2.2-1 5-3.4 6-2.7 1.2-6-1.4-5.6-4.3 2.6-14.6 15.7-26.5 30.4-27.8z\'%3E%3C/path%3E%3Cpath fill=\'%238d91ea\' d=\'M33.5 2885.7c14-2.8 29.3 4 36.5 16.3 5 8.4 6.4 19 3.3 28.2-1 3-5.7 3.6-7.5 1-1.5-2.2 0-4.8 0-7 2.3-12-5-24.4-16.3-28.6-9.8-4-22-1.2-29 7-1.5 1.5-2.8 4-5.4 3.8-3.2 0-5.3-4-3.3-6.8 5-7.2 13-12.3 21.8-14z\'%3E%3C/path%3E%3Cpath fill=\'%238a8ee7\' d=\'M32.4 2965.7c15-3.5 31.4 4 38.5 17.4 5.8 10.8 5.6 24.7-1 35.2-1.6 3-6.4 2.6-7.8-.5-1.4-2.3.4-4.7 1.3-7 4.2-8.3 3-19-2.8-26.4-6-8-17-12-27-9.5-3 .6-5.7 2.6-8.8 3.3-4 .4-6.4-5-3.6-7.6 3.2-2.5 7.2-3.8 11-4.8z\'%3E%3C/path%3E%3Cpath fill=\'%23868be4\' d=\'M34.4 3045.4c14.2-3.4 29.8 4.8 36.7 17.5 7.7 13.5 5 32-6.5 42.5-2.5 2.2-7 .7-7.6-2.5-1-3.2 2-5.3 3.5-7.6 6-7.6 7-18.6 2.4-27-4.4-8.5-13.5-14.3-23-14-2-.2-4.6.4-6.3-1.2-2.5-2-2-6.3.7-7.8z\'%3E%3C/path%3E%3Cpath fill=\'%238387e0\' d=\'M48.2 3126c4.2-.4 8 2.2 11.5 4.2 13 8.3 19 25.5 14.5 40-2.6 8.7-8.6 16.4-16.5 20.7-3.2 2-7.7-1-7.4-4.8 0-2.7 2.5-4 4.5-5.5 7.5-5 11.6-14.7 10.5-23.6-1-9-7.2-17.2-15.7-20.5-1.8-1-4-1.5-4.8-3.6-1.3-2.8.5-6.3 3.4-7z\'%3E%3C/path%3E%3Cpath fill=\'%238084dd\' d=\'M58.3 3212.3c3.8-1.7 6.8 1.8 9 4.4 9.5 10.8 11.3 27.5 4.5 40-4.6 8.7-12.8 15.4-22.2 18-3.7 1-7.6-2.8-6.5-6.5 1-3.7 5-4 7.8-5.4 11.3-5 17.4-19.2 13-30.8-1.3-4.5-4.2-8.2-7.5-11.4-2.4-2.5-1.2-7 2-8.3z\'%3E%3C/path%3E%3Cpath fill=\'%237d81da\' d=\'M65.2 3302.3c2.8-1.5 6.5-.2 7.7 2.7 2.6 6 3.6 12.6 3 19-1.7 17.8-18.2 32.7-36 32-4.5 0-6.6-6.3-3.4-9.3 2.6-2.5 6.6-1.5 9.7-2.5 10.8-2.6 19-13 18.7-24.2 0-4-1.2-7.6-2.5-11.3-1-2.4.5-5.3 2.7-6.4z\'%3E%3C/path%3E%3Cpath fill=\'%237a7ed6\' d=\'M67.4 3394.4c3-2.2 8-.2 8.8 3.6 1.3 15-8.5 30.3-22.6 35.8-7.2 2.8-15.4 3.5-23 1.3-3.8-1.3-4.7-7.2-1.3-9.7 2.8-2.4 6.5-.6 9.7-.6 12 .8 23.8-8.7 25.4-20.7.6-3.3-.3-7.6 3-9.5z\'%3E%3C/path%3E%3Cpath fill=\'%23777bd3\' d=\'M66.5 3485.7c4.3-1.7 9.2 2.8 7.7 7.2-5 14.3-20 24.2-35.2 23.6-6-.2-12-1.6-17-4.8-3.5-2.5-2.8-8.7 1.3-10.2 3-1.5 6 .6 8.7 1.5 10.6 4.2 23.8-.8 29.2-10.8 1.4-2.4 2.3-5.7 5.3-6.5z\'%3E%3C/path%3E%3Cpath fill=\'%237478d0\' d=\'M59.5 3575.7c3.7-1.5 8.3 1.4 8.4 5.4.3 4.4-4 7-6.8 9.2-13.7 10-34.2 8.6-46.3-3.2-3.4-3.2-1.5-9.6 3-10.4 3-1 5.4 1.3 7.6 3 7.4 5.7 18.3 6.3 26.4 1.5 2.8-1.3 4.8-4 7.5-5.3z\'%3E%3C/path%3E%3Cpath fill=\'%237175cd\' d=\'M11.4 3651.2c2.5-1.4 6-1 8 1.4 2 2.5 4 5.3 6.8 7 6.6 5 15.5 5.6 23 2.7 4.7-2.3 10.3 2.6 8.8 7.6-1 4-5.6 5-9 6-15 4-32-2.8-40-16-2-3-.7-7.2 2.4-8.8z\'%3E%3C/path%3E%3Cpath fill=\'%236e72ca\' d=\'M9.5 3723.6c3.4-1 7 1.2 8 4.6 3 8.3 11 14.7 19.8 15.4 2.4.4 5.3 0 7.2 2 3 2.4 3 7.4 0 10-2.5 2.4-6.4 1.7-9.6 1.3C21 3755 9 3745 4.6 3732c-1.2-3.5 1-7.6 4.8-8.4z\'%3E%3C/path%3E%3Cpath fill=\'%236b6fc7\' d=\'M6.4 3796.4c3.3-1.6 7.6-.2 9.3 3 1 2.7 1 5.5 2 8.2 2 6 6.3 11 12 13.6 2.5 1.2 5.2 2.8 5.6 5.8 1.2 4.7-3.6 9.4-8.3 8-13.5-4.5-23.5-17.8-24.4-32-.2-2.8 1.5-5.4 3.8-6.6z\'%3E%3C/path%3E%3Cpath fill=\'%23696cc4\' d=\'M7.3 3868.4c3.3-1.3 7.3.3 9 3.5 1 1.8.4 4 .4 6-.7 7 2 13.7 6.7 18.6 2.4 2 3.4 5.8 1.8 8.7-1.8 4-7.5 5.2-10.8 2.3C5 3899.4.7 3886 2.8 3874c.4-2.6 2.2-4.7 4.5-5.6z\'%3E%3C/path%3E%3Cpath fill=\'%23666ac1\' d=\'M8.5 3941.4c4.6-2.7 11 1.3 10.7 6.7-.7 4-2.7 7.8-2.4 12-.2 4 1.3 7.5 2.5 11 1.2 4-1.6 8.3-5.5 9-3.4.8-7-1-8.3-4.4-4.3-9.3-4.5-20.3-.7-29.8.7-1.8 2-3.5 3.7-4.4z\'%3E%3C/path%3E%3Cpath fill=\'%236467bf\' d=\'M12.5 4014.7c4.2-2.2 9.8.6 10.5 5.3 1 5-4 8.3-5 13-2 4.6.7 10.7-3.4 14.6-3.8 4-11.3 1.7-12.4-3.7-1.2-8.7 1.2-17.6 6-25 1-1.6 2.3-3.5 4.3-4.3z\'%3E%3C/path%3E%3Cpath fill=\'%236165bc\' d=\'M17.4 4089.3c4.7-2.6 11.3 1.2 11 6.7.5 5-5 7.3-7.3 11-2.7 3.7-2.6 9.7-7.5 11.4-5.3 2.3-11.6-2.8-10.4-8.4 2.2-8.2 7.3-16 14.4-20.7z\'%3E%3C/path%3E%3Cpath fill=\'%235f63ba\' d=\'M25.4 4164.6c5.4-1.4 11 4 9.3 9.5-.7 4.2-5 5.6-8 7.7-4 2.3-5.7 7.7-10.7 7.8-6 .8-10.6-6.7-7.3-11.8 4-6 10-10.7 16.7-13z\'%3E%3C/path%3E%3Cpath fill=\'%235d60b8\' d=\'M30.3 4242.6c4.3-1.7 10 0 11.3 4.8 1.8 4.7-1.7 10-6.6 10.6-5 .8-9 6-14.3 4.2-5.6-1.3-7.6-9-3.6-13 3.8-3.4 8.6-5.2 13.3-6.6z\'%3E%3C/path%3E%3Cpath fill=\'%235b5fb6\' d=\'M35.4 4321.5c4.2-.4 9.4-1 12.3 2.8 3.6 4.3 1.3 12-4.3 13l-11.4 1.2c-6 .3-10-6.8-7-11.8 1.7-4 6.5-4.7 10.4-5.2z\'%3E%3C/path%3E%3Cpath fill=\'%235a5db4\' d=\'M39.3 4401.5c4.3-.8 8.7.2 12.7 1.6 5.2 2.3 6.2 10.2 2 13.8-4.4 3.8-10.4 1.2-15.3.4-7.2-2.4-6.6-14 .6-15.7z\'%3E%3C/path%3E%3Cpath fill=\'%23585bb2\' d=\'M49.3 4483c4-.5 7.7 1.7 11 3.8 4.5 3.5 3.7 11.5-1.6 14-4.6 2.4-9.5-.6-13.4-3-5.3-4.2-2.7-13.8 4-14.7z\'%3E%3C/path%3E%3Cpath fill=\'%23575ab1\' d=\'M56.3 4567.4c7-1.7 15 6.2 12 13.2-1.6 4.6-7.8 6.7-12 4-2.8-1.6-5.7-4-6.2-7.7-.6-4.2 2.2-8.6 6.3-9.6z\'%3E%3C/path%3E%3Cpath fill=\'%235659b0\' d=\'M61.4 4653.5c7-3 14.7 5.6 11.5 12.3-2.3 6-11 7-14.8 2-4.2-4.3-2.7-12.4 3-14.3z\'%3E%3C/path%3E%3Cpath fill=\'%236264a7\' d=\'M64.5 4740.3c5.7-3 13.2 2.2 12.4 8.6-.3 6.3-8.4 10.2-13.6 6.5-5.5-3.4-5-12.7 1-15.2zM67.3 4826.3c6.2-2.4 13 4 11.3 10.3-1 6-9.3 9-14 4.8-5.2-4-3.7-13.4 2.7-15z\'%3E%3C/path%3E%3C/g%3E%3C/svg%3E")` diff --git a/packages/react/src/themes/teams/components/Loader/loaderVariables.ts b/packages/react/src/themes/teams/components/Loader/loaderVariables.ts new file mode 100644 index 0000000000..18c5a44a37 --- /dev/null +++ b/packages/react/src/themes/teams/components/Loader/loaderVariables.ts @@ -0,0 +1,44 @@ +import { pxToRem } from '../../../../lib' +import svgContent from './loaderSvgDataUrl' + +type LoaderSizes = 'small' | 'large' | 'medium' + +export interface LoaderVariables { + containerHeights: Record + containerWidths: Record + + svgContent: string + svgHeights: Record + svgTranslatePosition: Record + svgWidths: Record +} + +export default (): LoaderVariables => ({ + containerHeights: { + small: pxToRem(38.4), + medium: pxToRem(57.6), + large: pxToRem(115.2), + }, + containerWidths: { + small: pxToRem(38.4), + medium: pxToRem(57.6), + large: pxToRem(115.2), + }, + + svgContent, + svgHeights: { + small: pxToRem(2342.4), + medium: pxToRem(3513), + large: pxToRem(7027.2), + }, + svgTranslatePosition: { + small: pxToRem(-2304), + medium: pxToRem(-3456), + large: pxToRem(-6912), + }, + svgWidths: { + small: pxToRem(38.4), + medium: pxToRem(57.6), + large: pxToRem(115.2), + }, +}) From 732e38405d61b9a31d2340ff6ff521fc833c6631 Mon Sep 17 00:00:00 2001 From: Oleksandr Fediashov Date: Mon, 25 Mar 2019 16:40:32 +0200 Subject: [PATCH 02/13] add changelog entry --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 76f99e9a22..376333cc49 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -35,6 +35,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm - Add `Alert` component @Bugaa92 ([#1063](https://github.com/stardust-ui/react/pull/1063)) - Add `placeholderColor` variable for `Input` component in Teams theme @layershifter ([#1092](https://github.com/stardust-ui/react/pull/1092)) - Add and export files icons in Teams theme @codepretty ([#1094](https://github.com/stardust-ui/react/pull/1094)) +- Add support for SVG animations to `Loader`, update in Teams theme @layershifter ([#1097](https://github.com/stardust-ui/react/pull/1097)) ## [v0.23.1](https://github.com/stardust-ui/react/tree/v0.23.1) (2019-03-13) From 51d8c47b95a3fe9c164e83912ac16a8a0f643bce Mon Sep 17 00:00:00 2001 From: Oleksandr Fediashov Date: Mon, 25 Mar 2019 16:54:29 +0200 Subject: [PATCH 03/13] add missing sizes --- .../components/Loader/loaderVariables.ts | 34 ++++++++++++++----- 1 file changed, 26 insertions(+), 8 deletions(-) diff --git a/packages/react/src/themes/teams/components/Loader/loaderVariables.ts b/packages/react/src/themes/teams/components/Loader/loaderVariables.ts index 18c5a44a37..4bef844f5d 100644 --- a/packages/react/src/themes/teams/components/Loader/loaderVariables.ts +++ b/packages/react/src/themes/teams/components/Loader/loaderVariables.ts @@ -1,44 +1,62 @@ -import { pxToRem } from '../../../../lib' +import { pxToRem, SizeValue } from '../../../../lib' import svgContent from './loaderSvgDataUrl' -type LoaderSizes = 'small' | 'large' | 'medium' - export interface LoaderVariables { - containerHeights: Record - containerWidths: Record + containerHeights: Record + containerWidths: Record svgContent: string - svgHeights: Record - svgTranslatePosition: Record - svgWidths: Record + svgHeights: Record + svgTranslatePosition: Record + svgWidths: Record } export default (): LoaderVariables => ({ containerHeights: { + smallest: pxToRem(38.4), + smaller: pxToRem(38.4), small: pxToRem(38.4), medium: pxToRem(57.6), large: pxToRem(115.2), + larger: pxToRem(115.2), + largest: pxToRem(115.2), }, containerWidths: { + smallest: pxToRem(38.4), + smaller: pxToRem(38.4), small: pxToRem(38.4), medium: pxToRem(57.6), large: pxToRem(115.2), + larger: pxToRem(115.2), + largest: pxToRem(115.2), }, svgContent, svgHeights: { + smaller: pxToRem(2342.4), + smallest: pxToRem(2342.4), small: pxToRem(2342.4), medium: pxToRem(3513), large: pxToRem(7027.2), + larger: pxToRem(7027.2), + largest: pxToRem(7027.2), }, svgTranslatePosition: { + smallest: pxToRem(-2304), + smaller: pxToRem(-2304), small: pxToRem(-2304), medium: pxToRem(-3456), large: pxToRem(-6912), + larger: pxToRem(-6912), + largest: pxToRem(-6912), }, svgWidths: { + smallest: pxToRem(38.4), + smaller: pxToRem(38.4), small: pxToRem(38.4), medium: pxToRem(57.6), large: pxToRem(115.2), + larger: pxToRem(115.2), + largest: pxToRem(115.2), }, }) From f8ed85c88a6cb0f52613211d4a32e8e5390db322 Mon Sep 17 00:00:00 2001 From: Oleksandr Fediashov Date: Mon, 25 Mar 2019 16:31:29 +0200 Subject: [PATCH 04/13] feat(Loader): add support for SVG animations, update in Teams theme --- .../react/src/components/Loader/Loader.tsx | 10 ++- .../react/src/themes/teams/componentStyles.ts | 2 + .../src/themes/teams/componentVariables.ts | 2 + .../teams/components/Loader/loaderStyles.ts | 85 +++++++++++++++++++ .../components/Loader/loaderSvgDataUrl.ts | 1 + .../components/Loader/loaderVariables.ts | 44 ++++++++++ 6 files changed, 143 insertions(+), 1 deletion(-) create mode 100644 packages/react/src/themes/teams/components/Loader/loaderStyles.ts create mode 100644 packages/react/src/themes/teams/components/Loader/loaderSvgDataUrl.ts create mode 100644 packages/react/src/themes/teams/components/Loader/loaderVariables.ts diff --git a/packages/react/src/components/Loader/Loader.tsx b/packages/react/src/components/Loader/Loader.tsx index 44c8123f50..95ffa4d568 100644 --- a/packages/react/src/components/Loader/Loader.tsx +++ b/packages/react/src/components/Loader/Loader.tsx @@ -105,6 +105,9 @@ class Loader extends UIComponent, LoaderState> { const { indicator, label } = this.props const { visible } = this.state + const svgElement = + styles.svg && Box.create({}, { defaultProps: { className: 'container', styles: styles.svg } }) + return ( visible && ( , LoaderState> { {...accessibility.attributes.root} {...unhandledProps} > - {Box.create(indicator, { defaultProps: { styles: styles.indicator } })} + {Box.create(indicator, { + defaultProps: { + children: svgElement, + styles: styles.indicator, + }, + })} {Box.create(label, { defaultProps: { styles: styles.label } })} ) diff --git a/packages/react/src/themes/teams/componentStyles.ts b/packages/react/src/themes/teams/componentStyles.ts index c69164a190..a556109730 100644 --- a/packages/react/src/themes/teams/componentStyles.ts +++ b/packages/react/src/themes/teams/componentStyles.ts @@ -43,6 +43,8 @@ export { default as Label } from './components/Label/labelStyles' export { default as Layout } from './components/Layout/layoutStyles' +export { default as Loader } from './components/Loader/loaderStyles' + export { default as ItemLayout } from './components/ItemLayout/itemLayoutStyles' export { default as List } from './components/List/listStyles' diff --git a/packages/react/src/themes/teams/componentVariables.ts b/packages/react/src/themes/teams/componentVariables.ts index 61a93c4583..326fb335c7 100644 --- a/packages/react/src/themes/teams/componentVariables.ts +++ b/packages/react/src/themes/teams/componentVariables.ts @@ -40,6 +40,8 @@ export { default as Label } from './components/Label/labelVariables' export { default as Layout } from './components/Layout/layoutVariables' +export { default as Loader } from './components/Loader/loaderVariables' + export { default as ItemLayout } from './components/ItemLayout/itemLayoutVariables' export { default as ListItem } from './components/List/listItemVariables' diff --git a/packages/react/src/themes/teams/components/Loader/loaderStyles.ts b/packages/react/src/themes/teams/components/Loader/loaderStyles.ts new file mode 100644 index 0000000000..91bedeb10e --- /dev/null +++ b/packages/react/src/themes/teams/components/Loader/loaderStyles.ts @@ -0,0 +1,85 @@ +import { LoaderProps } from '../../../../components/Loader/Loader' +import { ComponentStyleFunctionParam, ICSSInJSStyle } from '../../../types' +import { LoaderVariables } from './loaderVariables' + +export default { + indicator: ({ + props: p, + variables: v, + }: ComponentStyleFunctionParam): ICSSInJSStyle => ({ + // Reset existing styles from base theme + animationName: 'none', + animationDuration: 'unset', + animationIterationCount: 'unset', + animationTimingFunction: 'unset', + borderColor: 'transparent', + borderRadius: 0, + borderStyle: 'none', + borderWidth: 0, + + height: v.containerHeights[p.size], + width: v.containerWidths[p.size], + overflow: 'hidden', + }), + svg: ({ + props: p, + theme: t, + variables: v, + }: ComponentStyleFunctionParam) => { + const outerAnimation: ICSSInJSStyle = { + animationName: t.renderer.renderKeyframe( + () => + ({ + to: { + opacity: 1, + }, + } as any), + {}, + ), + animationDelay: '1.5s', + animationDirection: 'normal', + animationDuration: '.3s', + animationFillMode: 'both', + animationIterationCount: '1', + animationPlayState: 'running', + animationTimingFunction: 'ease-out', + display: 'block', + overflow: 'hidden', + position: 'relative', + } + const svgAnimation: ICSSInJSStyle = { + animationName: t.renderer.renderKeyframe( + () => + ({ + to: { + transform: `translate3d(0, ${v.svgTranslatePosition[p.size]}, 0)`, + }, + } as any), + {}, + ), + animationDelay: '0s', + animationDirection: 'normal', + animationDuration: '2s', + animationFillMode: 'both', + animationPlayState: 'running', + animationTimingFunction: 'steps(60, end)', + animationIterationCount: 'infinite', + } + + return { + ...outerAnimation, + + ':before': { + ...svgAnimation, + + backgroundImage: v.svgContent, + content: '" "', + display: 'block', + overflow: 'hidden', + + height: v.svgHeights[p.size], + width: v.svgWidths[p.size], + }, + } + }, +} diff --git a/packages/react/src/themes/teams/components/Loader/loaderSvgDataUrl.ts b/packages/react/src/themes/teams/components/Loader/loaderSvgDataUrl.ts new file mode 100644 index 0000000000..548552fd3b --- /dev/null +++ b/packages/react/src/themes/teams/components/Loader/loaderSvgDataUrl.ts @@ -0,0 +1 @@ +export default `url("data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 80 4880\'%3E%3Cg role=\'presentation\'%3E%3Cpath fill=\'%236264a7\' d=\'M67.4 26.4c5.8-2 12.4 3.3 11.4 9.4-.4 6.5-8.8 10-13.8 6-5.6-3.6-4.2-13.5 2.4-15.3zM66.5 113.7c5.7-3.3 13.6 1.8 12.7 8.4 0 6.4-8 10.4-13.2 7-5.6-3.2-5.4-12.5.5-15.3z\'%3E%3C/path%3E%3Cpath fill=\'%235659b0\' d=\'M65.5 200.4c5.7-3.4 13.6 2 12.6 8.5 0 6-7 10.7-12.7 7.7-6.4-3-6-13.2.2-16.3z\'%3E%3C/path%3E%3Cpath fill=\'%23575ab1\' d=\'M64.3 286.2c5-2 11.3 2.3 11.2 7.8 0 5.4-4.5 11.7-10.5 11-5.4-.3-9.2-6.3-7.3-11.2 1.2-3.2 3.2-6.5 6.6-7.6z\'%3E%3C/path%3E%3Cpath fill=\'%23585bb2\' d=\'M59.4 372.5c5-2.6 11.6 1 12 6.5.8 5-3.4 8.6-7 11.3-4.5 3.2-11.7.2-12.6-5.3-1.4-5.5 3.6-9.7 7.6-12.5z\'%3E%3C/path%3E%3Cpath fill=\'%235a5db4\' d=\'M54.3 457.4c4-2.2 9.6 0 11.2 4.2 1.7 3.7 0 8.4-3.5 10.5-3.7 2.5-8.2 5.6-12.8 4-4.3-1.6-6.5-6.8-4.8-11 1.5-4.2 6.4-5.4 10-7.6z\'%3E%3C/path%3E%3Cpath fill=\'%235b5fb6\' d=\'M48.6 540.7c4.4-2 10 1 11 5.7 1 4-1.4 8.4-5.4 9.7-4 1.6-8.5 3-13 2.5-5.6-.8-8.6-8-5.3-12.6 2.7-4.4 8.4-3.5 12.6-5.3z\'%3E%3C/path%3E%3Cpath fill=\'%235d60b8\' d=\'M29.4 622.4c3-1.5 6.4 0 9.6 0 3.4.3 7.3-1 10.3 1.3 4.6 3 4.4 10.4-.2 13.3-3.7 2-8.2 1.7-12.4 1.5-3.6-.5-7.8-.7-10.2-4-3.2-3.7-1.6-10.2 3-12z\'%3E%3C/path%3E%3Cpath fill=\'%235f63ba\' d=\'M20.3 698.3c4-2 7.8 1.3 11.4 2.8 4 2 9.6 1 12.2 5 3.3 4.7-.2 12-6 12.3-7 0-14-2.6-19.7-6.6-4.7-3.4-3.5-11.6 2-13.4z\'%3E%3C/path%3E%3Cpath fill=\'%236165bc\' d=\'M12.3 771.3c3-1.5 7-.6 9 2 3 3.8 6.7 6.7 11 8.3 3.3 1 5.7 4 5.5 7.4.2 4.8-4.8 8.7-9.3 7.4-7.7-2.2-14.5-7.2-19.3-13.6-2.8-3.7-1.2-9.8 3-11.5z\'%3E%3C/path%3E%3Cpath fill=\'%236467bf\' d=\'M7.5 841.7c4-2 9.2.3 10.3 4.6 1.7 5.4 5 10 9.7 13 4 2.5 4.6 8.4 1.4 11.6-2.5 2.6-7 3-10 1-7.4-5-13-12.6-15.5-21-1.2-3.6.5-8 4-9.3z\'%3E%3C/path%3E%3Cpath fill=\'%23666ac1\' d=\'M6.5 910.8c3-1.6 7.3-.4 9 2.6 1.7 2.2 1 5 1.4 7.6 0 5.6 2.5 11 6 15 2.5 2.5 2.7 6.7.5 9.5-2.4 3.3-7.8 3.8-10.7 1-7.6-7.8-11.5-19-10.6-29.6.2-2.7 1.8-5.2 4.3-6.2z\'%3E%3C/path%3E%3Cpath fill=\'%23696cc4\' d=\'M9.3 980c3.7-2 9 .3 10 4.4 1 2.4-.2 4.8-1 7-2.4 5.7-2.3 12.4.3 18 1 2.3 2.4 5 1.5 7.6-1 4-5.7 6.2-9.5 4.5-2.6-1-3.8-3.7-5-6-4.4-10-4.3-21.8.4-31.6.6-1.7 1.7-3 3.3-4z\'%3E%3C/path%3E%3Cpath fill=\'%236b6fc7\' d=\'M16.3 1051.2c4-2.6 10 1 10 5.8.5 3-2 5.3-4 7.4-5.3 5.7-7 14-5.2 21.6 1 3.5-1 7.4-4.4 8.5-3.4 1.2-7.6-.8-8.7-4.3-4.2-13.8.7-30.2 12.3-39z\'%3E%3C/path%3E%3Cpath fill=\'%236e72ca\' d=\'M26.4 1125.3c4.5-2.6 10.7 1.5 10 6.7-.4 3.3-3.3 5.2-6 6.3-8.2 3.4-14 11.8-14.2 20.6 0 2.6-.6 5.6-3.2 7-4 2.8-10 0-10.2-5-.8-15.3 9.2-30.3 23.6-35.7z\'%3E%3C/path%3E%3Cpath fill=\'%237175cd\' d=\'M35.3 1203.2c3.7-.3 8.6-1.2 11.2 2.3 2.7 3.2 1 8.8-3 10-3.7.8-7.7.3-11.3 1.7-8 2.6-13.8 9.5-15.8 17.5-1 4.7-7.6 6.2-10.8 2.7-2.8-2.7-1.7-7-.4-10 4.5-13 16.6-22.6 30-24.2z\'%3E%3C/path%3E%3Cpath fill=\'%237478d0\' d=\'M36.4 1283.3c7-.6 14.2.5 20.3 4 3.8 2.4 3.3 8.7-.8 10.6-3 1.5-6-.2-8.6-1-9.8-3.5-21.6.5-27.3 9-1.5 2.4-3 5.6-6 6-4.6 1-9-4.4-6.8-8.7 5.4-11 17-18.8 29.2-20z\'%3E%3C/path%3E%3Cpath fill=\'%23777bd3\' d=\'M36.5 1363.5c11.6-1 23.8 3.6 31.3 12.7 2.7 3.6-.3 9.5-4.8 9.4-3.2.3-5-2.6-7.3-4.4-8.4-7.4-22.2-7.6-31-.4-2.3 1.8-4.3 5-7.7 4.7-4.7 0-7.5-6.3-4.4-9.8 6-7 14.8-11.3 24-12.2z\'%3E%3C/path%3E%3Cpath fill=\'%237a7ed6\' d=\'M31.4 1444.6c18-4.8 38.3 6.6 43.3 24.6 1 4-3.5 8-7.4 6.6-3.5-1-4-4.8-5.5-7.5-5.5-10.8-19.6-16-30.8-11.4-3.2 1-6.2 4.3-10 3-3.8-1.4-5-7.2-1.7-9.8 3.5-2.8 7.8-4.4 12-5.6z\'%3E%3C/path%3E%3Cpath fill=\'%237d81da\' d=\'M32.4 1524.6c15-3.4 31.8 4 39.2 17.8 3.5 6.5 5.3 14 4.3 21.5-1 4-6.7 5.5-9.5 2.4-2-2-1.4-5-1.6-7.4-.2-11.6-9.6-22-21-23.7-4.4-.8-8.8 0-13 1-4 1.2-7.7-3.5-6-7.2 1-3 4.6-3.7 7.4-4.4z\'%3E%3C/path%3E%3Cpath fill=\'%238084dd\' d=\'M36.3 1604.4c14-2 28.5 6 35 18.2 6 10.6 6 24.3 0 34.8-2 3.5-7.6 3-9-.6-1.8-3.5 1.4-6.8 2-10.2 3.8-12.4-4-26.7-16.3-30.5-4-1.6-8.3-.8-12.4-1.6-4.6-1.7-4-9 .7-10z\'%3E%3C/path%3E%3Cpath fill=\'%238387e0\' d=\'M43.3 1685.3c4-1.2 8.2 1 12 2.5 14.7 6.6 23.3 24.2 19.5 40-1.8 8-6.5 15.7-13.4 20.6-3 2.2-8-.6-7.7-4.4 0-2.3 1.8-3.7 3.3-5 7-6 10-16 7.8-24.7-1.8-8-7.6-15-15.3-18-2.2-.8-4.6-1-6.8-2-3.4-2-3-7.5.6-9z\'%3E%3C/path%3E%3Cpath fill=\'%23868be4\' d=\'M50.2 1768c1.4-.8 3.2-.8 4.7 0 13.2 5.7 21.7 20.5 20.3 35-1 15-12.6 28.5-27.3 31.4-3.4.6-6.4-3-5-6.3.6-2.6 3.7-3 6-4 8.2-2.8 14.5-10.4 16.2-19 2-9-1.5-18.8-8.6-24.6-2.2-2-5-3-7.2-4.8-2.2-2-1.7-6 .8-7.5z\'%3E%3C/path%3E%3Cpath fill=\'%238a8ee7\' d=\'M57.4 1852.2c3.7-1.8 6.6 2 9 4.5 11 12 11.7 31.6 1.7 44.5-6.8 9.3-18.5 14.6-30 14-2.4-.3-5.3-.2-7-2.2-1.6-2-1-5.4 1.3-6.8 1.7-1 3.8-.3 5.6-.4 9.8 1 20-4.5 24.7-13.2 4.6-8 4.3-18.7-.8-26.5-1.8-3-4.5-5-6.6-7.4-1.4-2.2-.4-5.4 2-6.4z\'%3E%3C/path%3E%3Cpath fill=\'%238d91ea\' d=\'M62.3 1938.3c1.7-1 4.3-1 5.6.8 9 11.5 9.2 28.8.8 40.8-7 10.4-20 16.4-32.6 15-5.7-.7-11.3-2.7-16-6-2.6-1.8-2-6.4 1-7.5 2.2-1 4.2.6 6 1.5 8.6 5 20 4.4 28-1.5 7.7-5.4 12-15 10.8-24.3-.3-4.5-2.3-8.6-4.7-12.4-1.6-2-1-5 1-6.3z\'%3E%3C/path%3E%3Cpath fill=\'%239095ee\' d=\'M66.3 2025.2c2-1.2 4.8-.5 5.7 1.6 5.6 12.8 2.2 28.7-8 38.2-9.4 9.2-24.2 12.2-36.5 7.4-7-2.8-13.5-8-17.3-14.7-1.2-2.6 1-5.8 3.8-5.7 2.5 0 3.7 2.4 5 4 7 9.5 20.5 13 31.2 8.4 12-4.7 19-18.8 15.3-31-.8-2.7-2.3-6.5.8-8.2z\'%3E%3C/path%3E%3Cpath fill=\'%239398f1\' d=\'M68.6 2112.7c2-1 5 0 5.4 2.4 2.4 14.5-5.8 30-19.2 36-12.5 6.2-28.7 3.6-38.7-6.2-5.6-5.5-9.4-13-10-21-.4-4 6-5 7.2-1.2 1 5.5 3 11 7 15.3 7 7.8 19 11 28.8 7 10.7-3.6 18.4-14.7 17.7-26-.2-2.2-.6-5.3 2-6.3z\'%3E%3C/path%3E%3Cpath fill=\'%23969bf5\' d=\'M8.4 2188.4c2-2 6-.3 6 2.6-.4 2-1 4-1.2 5.8-1 8.8 2.5 18 9.3 23.7 7 6 17.2 8 26 5 10-3 17-12.3 18.4-22.5.3-4 6.7-3.6 7 .3-1 15-13.3 28-28 30.3-13 2.5-27.4-3.6-34.6-15-5.2-7.8-6.8-17.8-4.6-27 .4-1 .6-2.4 1.6-3.2z\'%3E%3C/path%3E%3Cpath fill=\'%23999ef8\' d=\'M15.3 2257c2-1 4.4 0 5 2.2.3 2-1.3 3.3-2.3 4.8-5.7 7.6-6.8 18.2-3 27 4.3 10 15 16.7 26 16.2 10-.3 19.4-6.6 23.7-15.6 1.2-3.4 6.7-2.2 6.4 1.4-.7 3.4-3 6.3-5 9-9.3 11-26 15-39.3 9.2C13.8 2306 5 2292 6 2278c.7-7.8 3.7-15.7 9.3-21z\'%3E%3C/path%3E%3Cpath fill=\'%239ca1fb\' d=\'M25.6 2329.6c1.8-1.2 4.5.2 4.6 2.5.2 2.7-2.8 3.4-4.6 4.7-12 7-16.6 23.5-10 35.7 5.8 12.2 21.6 18.4 34.2 13.2 3.6-1.2 6.4-3.6 9.5-5.7 2.8-2 6 2.5 3.6 4.7-11.4 11-30.5 12-43 2.4-12.8-9-17.4-27.3-10.5-41.3 3.3-7 9-13 16-16z\'%3E%3C/path%3E%3Cpath fill=\'%236264a7\' d=\'M33.2 2407.2c2.3-.4 4.6-.8 7-.6 2.4.5 3 4.2.6 5.4-4 .7-8.3 1-12 2.8-12.6 5.3-19.5 20.5-15.2 33.4 4 13.3 18.8 22 32.3 18.8 2-.6 6-2 6.7 1.3.7 3.7-4 4-6.6 4.6-15.4 3-32.3-6.4-37.4-21.4-5.3-13.8 0-30.6 12-39 3.8-2.6 8-4.4 12.6-5.4z\'%3E%3C/path%3E%3Cpath fill=\'%239ca1fb\' d=\'M37.4 2486.4c5.5-.4 11.3.4 16.3 3 2 1.6.8 5.3-2 5.4-3.5-.8-7-2.3-10.8-2.2-13-.7-25.2 9-27.8 21.4-3 12 3.4 25 14.4 30.5 3.4 2 7.3 2.3 11 3 2.7 1 2.3 5.6-.6 6-17.3-.3-32-16.3-31.7-33.5-.4-17 14-32.7 31-33.6z\'%3E%3C/path%3E%3Cpath fill=\'%23999ef8\' d=\'M33.5 2566.7c10.8-2.2 22.7 1.3 30.5 9.3 1.8 1.6 1 5-1.3 5.6-2.3 1-4-1.5-5.6-2.7-9.6-8.4-25-8-34.6.3-8.6 7-12 19.7-8 30 2.3 6.4 7 11.4 12.7 14.8 3.2 2 .6 7.3-2.8 6-13.8-6.8-21.2-24-17-38.7 3-12.3 13.8-22.3 26.3-24.6z\'%3E%3C/path%3E%3Cpath fill=\'%23969bf5\' d=\'M32.4 2646.7c15-3.7 32 4.3 38.3 18.5.8 2.3-1.4 4.8-3.8 4.5-2.2 0-3-2.2-4-3.7-5.6-9.7-17.8-14.8-28.6-12.4-9.8 2-18 10-20.5 19.6-2 7.2-.8 15.2 3.4 21.4 1 1.5 2.4 3.3 1.4 5.2-1 2.4-4.7 2.8-6 .7-9.2-11.7-9.2-29.2-.2-41 4.8-6.4 12-11 19.8-12.8z\'%3E%3C/path%3E%3Cpath fill=\'%239398f1\' d=\'M31.4 2726.7c14.6-4 31.3 3 38.5 16.3 1.7 3.3 3.4 7 3.7 10.8-.3 2.8-4 4.3-6 2.6-1.6-1-1.7-3-2.3-4.6-2.5-8.4-9.6-15-18-17.5-8.6-2.6-18.6-.3-25.2 5.8-6.5 6-10 15-8.6 23.5 0 1.8 1 4-.5 5.6-1.5 2.2-5.2 1.8-6.3-.7-5.2-17.5 7-37.5 24.7-41.6z\'%3E%3C/path%3E%3Cpath fill=\'%239095ee\' d=\'M36.4 2805.5c14.7-1.7 29.7 7 35.4 20.6 2 5 3.2 10.4 2.8 15.7-.5 4-6.7 4.5-7.8.7-.6-3.3-.3-6.8-1.5-10-3-10.4-12.7-18.2-23.4-18.8-11.8-1-23.7 6.8-27 18-1 2.2-1 5-3.4 6-2.7 1.2-6-1.4-5.6-4.3 2.6-14.6 15.7-26.5 30.4-27.8z\'%3E%3C/path%3E%3Cpath fill=\'%238d91ea\' d=\'M33.5 2885.7c14-2.8 29.3 4 36.5 16.3 5 8.4 6.4 19 3.3 28.2-1 3-5.7 3.6-7.5 1-1.5-2.2 0-4.8 0-7 2.3-12-5-24.4-16.3-28.6-9.8-4-22-1.2-29 7-1.5 1.5-2.8 4-5.4 3.8-3.2 0-5.3-4-3.3-6.8 5-7.2 13-12.3 21.8-14z\'%3E%3C/path%3E%3Cpath fill=\'%238a8ee7\' d=\'M32.4 2965.7c15-3.5 31.4 4 38.5 17.4 5.8 10.8 5.6 24.7-1 35.2-1.6 3-6.4 2.6-7.8-.5-1.4-2.3.4-4.7 1.3-7 4.2-8.3 3-19-2.8-26.4-6-8-17-12-27-9.5-3 .6-5.7 2.6-8.8 3.3-4 .4-6.4-5-3.6-7.6 3.2-2.5 7.2-3.8 11-4.8z\'%3E%3C/path%3E%3Cpath fill=\'%23868be4\' d=\'M34.4 3045.4c14.2-3.4 29.8 4.8 36.7 17.5 7.7 13.5 5 32-6.5 42.5-2.5 2.2-7 .7-7.6-2.5-1-3.2 2-5.3 3.5-7.6 6-7.6 7-18.6 2.4-27-4.4-8.5-13.5-14.3-23-14-2-.2-4.6.4-6.3-1.2-2.5-2-2-6.3.7-7.8z\'%3E%3C/path%3E%3Cpath fill=\'%238387e0\' d=\'M48.2 3126c4.2-.4 8 2.2 11.5 4.2 13 8.3 19 25.5 14.5 40-2.6 8.7-8.6 16.4-16.5 20.7-3.2 2-7.7-1-7.4-4.8 0-2.7 2.5-4 4.5-5.5 7.5-5 11.6-14.7 10.5-23.6-1-9-7.2-17.2-15.7-20.5-1.8-1-4-1.5-4.8-3.6-1.3-2.8.5-6.3 3.4-7z\'%3E%3C/path%3E%3Cpath fill=\'%238084dd\' d=\'M58.3 3212.3c3.8-1.7 6.8 1.8 9 4.4 9.5 10.8 11.3 27.5 4.5 40-4.6 8.7-12.8 15.4-22.2 18-3.7 1-7.6-2.8-6.5-6.5 1-3.7 5-4 7.8-5.4 11.3-5 17.4-19.2 13-30.8-1.3-4.5-4.2-8.2-7.5-11.4-2.4-2.5-1.2-7 2-8.3z\'%3E%3C/path%3E%3Cpath fill=\'%237d81da\' d=\'M65.2 3302.3c2.8-1.5 6.5-.2 7.7 2.7 2.6 6 3.6 12.6 3 19-1.7 17.8-18.2 32.7-36 32-4.5 0-6.6-6.3-3.4-9.3 2.6-2.5 6.6-1.5 9.7-2.5 10.8-2.6 19-13 18.7-24.2 0-4-1.2-7.6-2.5-11.3-1-2.4.5-5.3 2.7-6.4z\'%3E%3C/path%3E%3Cpath fill=\'%237a7ed6\' d=\'M67.4 3394.4c3-2.2 8-.2 8.8 3.6 1.3 15-8.5 30.3-22.6 35.8-7.2 2.8-15.4 3.5-23 1.3-3.8-1.3-4.7-7.2-1.3-9.7 2.8-2.4 6.5-.6 9.7-.6 12 .8 23.8-8.7 25.4-20.7.6-3.3-.3-7.6 3-9.5z\'%3E%3C/path%3E%3Cpath fill=\'%23777bd3\' d=\'M66.5 3485.7c4.3-1.7 9.2 2.8 7.7 7.2-5 14.3-20 24.2-35.2 23.6-6-.2-12-1.6-17-4.8-3.5-2.5-2.8-8.7 1.3-10.2 3-1.5 6 .6 8.7 1.5 10.6 4.2 23.8-.8 29.2-10.8 1.4-2.4 2.3-5.7 5.3-6.5z\'%3E%3C/path%3E%3Cpath fill=\'%237478d0\' d=\'M59.5 3575.7c3.7-1.5 8.3 1.4 8.4 5.4.3 4.4-4 7-6.8 9.2-13.7 10-34.2 8.6-46.3-3.2-3.4-3.2-1.5-9.6 3-10.4 3-1 5.4 1.3 7.6 3 7.4 5.7 18.3 6.3 26.4 1.5 2.8-1.3 4.8-4 7.5-5.3z\'%3E%3C/path%3E%3Cpath fill=\'%237175cd\' d=\'M11.4 3651.2c2.5-1.4 6-1 8 1.4 2 2.5 4 5.3 6.8 7 6.6 5 15.5 5.6 23 2.7 4.7-2.3 10.3 2.6 8.8 7.6-1 4-5.6 5-9 6-15 4-32-2.8-40-16-2-3-.7-7.2 2.4-8.8z\'%3E%3C/path%3E%3Cpath fill=\'%236e72ca\' d=\'M9.5 3723.6c3.4-1 7 1.2 8 4.6 3 8.3 11 14.7 19.8 15.4 2.4.4 5.3 0 7.2 2 3 2.4 3 7.4 0 10-2.5 2.4-6.4 1.7-9.6 1.3C21 3755 9 3745 4.6 3732c-1.2-3.5 1-7.6 4.8-8.4z\'%3E%3C/path%3E%3Cpath fill=\'%236b6fc7\' d=\'M6.4 3796.4c3.3-1.6 7.6-.2 9.3 3 1 2.7 1 5.5 2 8.2 2 6 6.3 11 12 13.6 2.5 1.2 5.2 2.8 5.6 5.8 1.2 4.7-3.6 9.4-8.3 8-13.5-4.5-23.5-17.8-24.4-32-.2-2.8 1.5-5.4 3.8-6.6z\'%3E%3C/path%3E%3Cpath fill=\'%23696cc4\' d=\'M7.3 3868.4c3.3-1.3 7.3.3 9 3.5 1 1.8.4 4 .4 6-.7 7 2 13.7 6.7 18.6 2.4 2 3.4 5.8 1.8 8.7-1.8 4-7.5 5.2-10.8 2.3C5 3899.4.7 3886 2.8 3874c.4-2.6 2.2-4.7 4.5-5.6z\'%3E%3C/path%3E%3Cpath fill=\'%23666ac1\' d=\'M8.5 3941.4c4.6-2.7 11 1.3 10.7 6.7-.7 4-2.7 7.8-2.4 12-.2 4 1.3 7.5 2.5 11 1.2 4-1.6 8.3-5.5 9-3.4.8-7-1-8.3-4.4-4.3-9.3-4.5-20.3-.7-29.8.7-1.8 2-3.5 3.7-4.4z\'%3E%3C/path%3E%3Cpath fill=\'%236467bf\' d=\'M12.5 4014.7c4.2-2.2 9.8.6 10.5 5.3 1 5-4 8.3-5 13-2 4.6.7 10.7-3.4 14.6-3.8 4-11.3 1.7-12.4-3.7-1.2-8.7 1.2-17.6 6-25 1-1.6 2.3-3.5 4.3-4.3z\'%3E%3C/path%3E%3Cpath fill=\'%236165bc\' d=\'M17.4 4089.3c4.7-2.6 11.3 1.2 11 6.7.5 5-5 7.3-7.3 11-2.7 3.7-2.6 9.7-7.5 11.4-5.3 2.3-11.6-2.8-10.4-8.4 2.2-8.2 7.3-16 14.4-20.7z\'%3E%3C/path%3E%3Cpath fill=\'%235f63ba\' d=\'M25.4 4164.6c5.4-1.4 11 4 9.3 9.5-.7 4.2-5 5.6-8 7.7-4 2.3-5.7 7.7-10.7 7.8-6 .8-10.6-6.7-7.3-11.8 4-6 10-10.7 16.7-13z\'%3E%3C/path%3E%3Cpath fill=\'%235d60b8\' d=\'M30.3 4242.6c4.3-1.7 10 0 11.3 4.8 1.8 4.7-1.7 10-6.6 10.6-5 .8-9 6-14.3 4.2-5.6-1.3-7.6-9-3.6-13 3.8-3.4 8.6-5.2 13.3-6.6z\'%3E%3C/path%3E%3Cpath fill=\'%235b5fb6\' d=\'M35.4 4321.5c4.2-.4 9.4-1 12.3 2.8 3.6 4.3 1.3 12-4.3 13l-11.4 1.2c-6 .3-10-6.8-7-11.8 1.7-4 6.5-4.7 10.4-5.2z\'%3E%3C/path%3E%3Cpath fill=\'%235a5db4\' d=\'M39.3 4401.5c4.3-.8 8.7.2 12.7 1.6 5.2 2.3 6.2 10.2 2 13.8-4.4 3.8-10.4 1.2-15.3.4-7.2-2.4-6.6-14 .6-15.7z\'%3E%3C/path%3E%3Cpath fill=\'%23585bb2\' d=\'M49.3 4483c4-.5 7.7 1.7 11 3.8 4.5 3.5 3.7 11.5-1.6 14-4.6 2.4-9.5-.6-13.4-3-5.3-4.2-2.7-13.8 4-14.7z\'%3E%3C/path%3E%3Cpath fill=\'%23575ab1\' d=\'M56.3 4567.4c7-1.7 15 6.2 12 13.2-1.6 4.6-7.8 6.7-12 4-2.8-1.6-5.7-4-6.2-7.7-.6-4.2 2.2-8.6 6.3-9.6z\'%3E%3C/path%3E%3Cpath fill=\'%235659b0\' d=\'M61.4 4653.5c7-3 14.7 5.6 11.5 12.3-2.3 6-11 7-14.8 2-4.2-4.3-2.7-12.4 3-14.3z\'%3E%3C/path%3E%3Cpath fill=\'%236264a7\' d=\'M64.5 4740.3c5.7-3 13.2 2.2 12.4 8.6-.3 6.3-8.4 10.2-13.6 6.5-5.5-3.4-5-12.7 1-15.2zM67.3 4826.3c6.2-2.4 13 4 11.3 10.3-1 6-9.3 9-14 4.8-5.2-4-3.7-13.4 2.7-15z\'%3E%3C/path%3E%3C/g%3E%3C/svg%3E")` diff --git a/packages/react/src/themes/teams/components/Loader/loaderVariables.ts b/packages/react/src/themes/teams/components/Loader/loaderVariables.ts new file mode 100644 index 0000000000..18c5a44a37 --- /dev/null +++ b/packages/react/src/themes/teams/components/Loader/loaderVariables.ts @@ -0,0 +1,44 @@ +import { pxToRem } from '../../../../lib' +import svgContent from './loaderSvgDataUrl' + +type LoaderSizes = 'small' | 'large' | 'medium' + +export interface LoaderVariables { + containerHeights: Record + containerWidths: Record + + svgContent: string + svgHeights: Record + svgTranslatePosition: Record + svgWidths: Record +} + +export default (): LoaderVariables => ({ + containerHeights: { + small: pxToRem(38.4), + medium: pxToRem(57.6), + large: pxToRem(115.2), + }, + containerWidths: { + small: pxToRem(38.4), + medium: pxToRem(57.6), + large: pxToRem(115.2), + }, + + svgContent, + svgHeights: { + small: pxToRem(2342.4), + medium: pxToRem(3513), + large: pxToRem(7027.2), + }, + svgTranslatePosition: { + small: pxToRem(-2304), + medium: pxToRem(-3456), + large: pxToRem(-6912), + }, + svgWidths: { + small: pxToRem(38.4), + medium: pxToRem(57.6), + large: pxToRem(115.2), + }, +}) From 7c21c0aa5b7a66e6c4ebd216f6ede4f71be02b2e Mon Sep 17 00:00:00 2001 From: Oleksandr Fediashov Date: Mon, 25 Mar 2019 16:40:32 +0200 Subject: [PATCH 05/13] add changelog entry --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 731b6e4b75..9be8318a63 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -57,6 +57,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm - Add `Alert` component @Bugaa92 ([#1063](https://github.com/stardust-ui/react/pull/1063)) - Add `placeholderColor` variable for `Input` component in Teams theme @layershifter ([#1092](https://github.com/stardust-ui/react/pull/1092)) - Add and export files icons in Teams theme @codepretty ([#1094](https://github.com/stardust-ui/react/pull/1094)) +- Add support for SVG animations to `Loader`, update in Teams theme @layershifter ([#1097](https://github.com/stardust-ui/react/pull/1097)) ### Documentation - Add layout guide @kuzhelov ([#1091](https://github.com/stardust-ui/react/pull/1091)) From 03321f9b1eeea8da40d01b4bb1bcb549ae93ed1a Mon Sep 17 00:00:00 2001 From: Oleksandr Fediashov Date: Mon, 25 Mar 2019 16:54:29 +0200 Subject: [PATCH 06/13] add missing sizes --- .../components/Loader/loaderVariables.ts | 34 ++++++++++++++----- 1 file changed, 26 insertions(+), 8 deletions(-) diff --git a/packages/react/src/themes/teams/components/Loader/loaderVariables.ts b/packages/react/src/themes/teams/components/Loader/loaderVariables.ts index 18c5a44a37..4bef844f5d 100644 --- a/packages/react/src/themes/teams/components/Loader/loaderVariables.ts +++ b/packages/react/src/themes/teams/components/Loader/loaderVariables.ts @@ -1,44 +1,62 @@ -import { pxToRem } from '../../../../lib' +import { pxToRem, SizeValue } from '../../../../lib' import svgContent from './loaderSvgDataUrl' -type LoaderSizes = 'small' | 'large' | 'medium' - export interface LoaderVariables { - containerHeights: Record - containerWidths: Record + containerHeights: Record + containerWidths: Record svgContent: string - svgHeights: Record - svgTranslatePosition: Record - svgWidths: Record + svgHeights: Record + svgTranslatePosition: Record + svgWidths: Record } export default (): LoaderVariables => ({ containerHeights: { + smallest: pxToRem(38.4), + smaller: pxToRem(38.4), small: pxToRem(38.4), medium: pxToRem(57.6), large: pxToRem(115.2), + larger: pxToRem(115.2), + largest: pxToRem(115.2), }, containerWidths: { + smallest: pxToRem(38.4), + smaller: pxToRem(38.4), small: pxToRem(38.4), medium: pxToRem(57.6), large: pxToRem(115.2), + larger: pxToRem(115.2), + largest: pxToRem(115.2), }, svgContent, svgHeights: { + smaller: pxToRem(2342.4), + smallest: pxToRem(2342.4), small: pxToRem(2342.4), medium: pxToRem(3513), large: pxToRem(7027.2), + larger: pxToRem(7027.2), + largest: pxToRem(7027.2), }, svgTranslatePosition: { + smallest: pxToRem(-2304), + smaller: pxToRem(-2304), small: pxToRem(-2304), medium: pxToRem(-3456), large: pxToRem(-6912), + larger: pxToRem(-6912), + largest: pxToRem(-6912), }, svgWidths: { + smallest: pxToRem(38.4), + smaller: pxToRem(38.4), small: pxToRem(38.4), medium: pxToRem(57.6), large: pxToRem(115.2), + larger: pxToRem(115.2), + largest: pxToRem(115.2), }, }) From d5af17439bf457b4b4524b07ce0090dcda478809 Mon Sep 17 00:00:00 2001 From: Oleksandr Fediashov Date: Wed, 27 Mar 2019 13:16:01 +0200 Subject: [PATCH 07/13] use svg slot --- .../react/src/components/Loader/Loader.tsx | 29 +++++++++++++++---- 1 file changed, 24 insertions(+), 5 deletions(-) diff --git a/packages/react/src/components/Loader/Loader.tsx b/packages/react/src/components/Loader/Loader.tsx index 95ffa4d568..f515dde631 100644 --- a/packages/react/src/components/Loader/Loader.tsx +++ b/packages/react/src/components/Loader/Loader.tsx @@ -17,6 +17,12 @@ import Box from '../Box/Box' export type LoaderPosition = 'above' | 'below' | 'start' | 'end' +export interface LoaderSlotClassNames { + indicator: string + label: string + svg: string +} + export interface LoaderProps extends UIComponentProps, ColorComponentProps { /** * Accessibility behavior if overridden by the user. @@ -41,6 +47,9 @@ export interface LoaderProps extends UIComponentProps, ColorComponentProps { /** A size of the loader. */ size?: SizeValue + + /** A loader can contain a custom svg element. */ + svg?: ShorthandValue } export interface LoaderState { @@ -54,6 +63,11 @@ class Loader extends UIComponent, LoaderState> { static create: Function static displayName = 'Loader' static className = 'ui-loader' + static slotClassNames: LoaderSlotClassNames = { + indicator: `${Loader.className}__indicator`, + label: `${Loader.className}__label`, + svg: `${Loader.className}__svg`, + } static propTypes = { ...commonPropTypes.createCommon({ @@ -72,8 +86,9 @@ class Loader extends UIComponent, LoaderState> { static defaultProps = { accessibility: loaderBehavior, delay: 0, - indicator: '', + indicator: {}, labelPosition: 'below', + svg: '', size: 'medium', } @@ -102,11 +117,12 @@ class Loader extends UIComponent, LoaderState> { } renderComponent({ ElementType, classes, accessibility, variables, styles, unhandledProps }) { - const { indicator, label } = this.props + const { indicator, label, svg } = this.props const { visible } = this.state - const svgElement = - styles.svg && Box.create({}, { defaultProps: { className: 'container', styles: styles.svg } }) + const svgElement = Box.create(svg, { + defaultProps: { className: Loader.slotClassNames.indicator, styles: styles.svg }, + }) return ( visible && ( @@ -118,10 +134,13 @@ class Loader extends UIComponent, LoaderState> { {Box.create(indicator, { defaultProps: { children: svgElement, + className: Loader.slotClassNames.indicator, styles: styles.indicator, }, })} - {Box.create(label, { defaultProps: { styles: styles.label } })} + {Box.create(label, { + defaultProps: { className: Loader.slotClassNames.label, styles: styles.label }, + })} ) ) From e4a1e354d9a4474f481b68a17b14235d96797efb Mon Sep 17 00:00:00 2001 From: Oleksandr Fediashov Date: Wed, 27 Mar 2019 13:57:42 +0200 Subject: [PATCH 08/13] add propType --- packages/react/src/components/Loader/Loader.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/react/src/components/Loader/Loader.tsx b/packages/react/src/components/Loader/Loader.tsx index f515dde631..4a7d3e5c3c 100644 --- a/packages/react/src/components/Loader/Loader.tsx +++ b/packages/react/src/components/Loader/Loader.tsx @@ -81,6 +81,7 @@ class Loader extends UIComponent, LoaderState> { label: customPropTypes.itemShorthand, labelPosition: PropTypes.oneOf(['above', 'below', 'start', 'end']), size: customPropTypes.size, + svg: customPropTypes.itemShorthand, } static defaultProps = { From 98a49e44113cbdfad8504331edc22e173b33f1d0 Mon Sep 17 00:00:00 2001 From: Oleksandr Fediashov Date: Wed, 27 Mar 2019 15:38:24 +0200 Subject: [PATCH 09/13] fix className --- packages/react/src/components/Loader/Loader.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/src/components/Loader/Loader.tsx b/packages/react/src/components/Loader/Loader.tsx index 4a7d3e5c3c..ec5749edd7 100644 --- a/packages/react/src/components/Loader/Loader.tsx +++ b/packages/react/src/components/Loader/Loader.tsx @@ -122,7 +122,7 @@ class Loader extends UIComponent, LoaderState> { const { visible } = this.state const svgElement = Box.create(svg, { - defaultProps: { className: Loader.slotClassNames.indicator, styles: styles.svg }, + defaultProps: { className: Loader.slotClassNames.svg, styles: styles.svg }, }) return ( From e2041364b699ac5231081851cd2ef40324d7b9df Mon Sep 17 00:00:00 2001 From: Oleksandr Fediashov Date: Wed, 27 Mar 2019 15:39:51 +0200 Subject: [PATCH 10/13] move changelog entry --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 9be8318a63..1780464a36 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -24,6 +24,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm ### Features - Add `attached` prop on the `ChatMessage` component, which is automatically set by the `ChatItem` component @mnajdova ([#1100](https://github.com/stardust-ui/react/pull/1100)) +- Add support for SVG animations to `Loader`, update in Teams theme @layershifter ([#1097](https://github.com/stardust-ui/react/pull/1097)) ## [v0.25.0](https://github.com/stardust-ui/react/tree/v0.25.0) (2019-03-26) @@ -57,7 +58,6 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm - Add `Alert` component @Bugaa92 ([#1063](https://github.com/stardust-ui/react/pull/1063)) - Add `placeholderColor` variable for `Input` component in Teams theme @layershifter ([#1092](https://github.com/stardust-ui/react/pull/1092)) - Add and export files icons in Teams theme @codepretty ([#1094](https://github.com/stardust-ui/react/pull/1094)) -- Add support for SVG animations to `Loader`, update in Teams theme @layershifter ([#1097](https://github.com/stardust-ui/react/pull/1097)) ### Documentation - Add layout guide @kuzhelov ([#1091](https://github.com/stardust-ui/react/pull/1091)) From 8e6d1558156256ada237d9d91efcb19d61fdf227 Mon Sep 17 00:00:00 2001 From: Brigette Lundeen Date: Wed, 27 Mar 2019 14:09:44 -0700 Subject: [PATCH 11/13] update loader size, translation variables & update the Loader size example --- .../Loader/Variations/LoaderExampleSize.tsx | 16 +++-- .../components/Loader/loaderVariables.ts | 70 +++++++++---------- 2 files changed, 44 insertions(+), 42 deletions(-) diff --git a/docs/src/examples/components/Loader/Variations/LoaderExampleSize.tsx b/docs/src/examples/components/Loader/Variations/LoaderExampleSize.tsx index fbd19090f9..1bdb1a52f4 100644 --- a/docs/src/examples/components/Loader/Variations/LoaderExampleSize.tsx +++ b/docs/src/examples/components/Loader/Variations/LoaderExampleSize.tsx @@ -2,14 +2,16 @@ import { Grid, Loader } from '@stardust-ui/react' import * as React from 'react' const LoaderExampleSize: React.FC = () => ( - - - - + + + + - - - + + + + + ) diff --git a/packages/react/src/themes/teams/components/Loader/loaderVariables.ts b/packages/react/src/themes/teams/components/Loader/loaderVariables.ts index 4bef844f5d..beda5922a0 100644 --- a/packages/react/src/themes/teams/components/Loader/loaderVariables.ts +++ b/packages/react/src/themes/teams/components/Loader/loaderVariables.ts @@ -13,50 +13,50 @@ export interface LoaderVariables { export default (): LoaderVariables => ({ containerHeights: { - smallest: pxToRem(38.4), - smaller: pxToRem(38.4), - small: pxToRem(38.4), - medium: pxToRem(57.6), - large: pxToRem(115.2), - larger: pxToRem(115.2), - largest: pxToRem(115.2), + smallest: pxToRem(24), + smaller: pxToRem(24), + small: pxToRem(24), + medium: pxToRem(36), + large: pxToRem(72), + larger: pxToRem(72), + largest: pxToRem(72), }, containerWidths: { - smallest: pxToRem(38.4), - smaller: pxToRem(38.4), - small: pxToRem(38.4), - medium: pxToRem(57.6), - large: pxToRem(115.2), - larger: pxToRem(115.2), - largest: pxToRem(115.2), + smallest: pxToRem(24), + smaller: pxToRem(24), + small: pxToRem(24), + medium: pxToRem(36), + large: pxToRem(72), + larger: pxToRem(72), + largest: pxToRem(72), }, svgContent, svgHeights: { - smaller: pxToRem(2342.4), - smallest: pxToRem(2342.4), - small: pxToRem(2342.4), - medium: pxToRem(3513), - large: pxToRem(7027.2), - larger: pxToRem(7027.2), - largest: pxToRem(7027.2), + smaller: pxToRem(1464), + smallest: pxToRem(1464), + small: pxToRem(1464), + medium: pxToRem(2196), + large: pxToRem(4392), + larger: pxToRem(4392), + largest: pxToRem(4392), }, svgTranslatePosition: { - smallest: pxToRem(-2304), - smaller: pxToRem(-2304), - small: pxToRem(-2304), - medium: pxToRem(-3456), - large: pxToRem(-6912), - larger: pxToRem(-6912), - largest: pxToRem(-6912), + smallest: pxToRem(-1440), + smaller: pxToRem(-1440), + small: pxToRem(-1440), + medium: pxToRem(-2160), + large: pxToRem(-4320), + larger: pxToRem(-4320), + largest: pxToRem(-4320), }, svgWidths: { - smallest: pxToRem(38.4), - smaller: pxToRem(38.4), - small: pxToRem(38.4), - medium: pxToRem(57.6), - large: pxToRem(115.2), - larger: pxToRem(115.2), - largest: pxToRem(115.2), + smallest: pxToRem(24), + smaller: pxToRem(24), + small: pxToRem(24), + medium: pxToRem(36), + large: pxToRem(72), + larger: pxToRem(72), + largest: pxToRem(72), }, }) From 4d7ddcd866b4f5258e2583b5cf4dad538048f68a Mon Sep 17 00:00:00 2001 From: Brigette Lundeen Date: Wed, 27 Mar 2019 14:14:54 -0700 Subject: [PATCH 12/13] removing old changelog entry from bad merge --- CHANGELOG.md | 1 - 1 file changed, 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 0e37059e78..1780464a36 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -58,7 +58,6 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm - Add `Alert` component @Bugaa92 ([#1063](https://github.com/stardust-ui/react/pull/1063)) - Add `placeholderColor` variable for `Input` component in Teams theme @layershifter ([#1092](https://github.com/stardust-ui/react/pull/1092)) - Add and export files icons in Teams theme @codepretty ([#1094](https://github.com/stardust-ui/react/pull/1094)) -- Add support for SVG animations to `Loader`, update in Teams theme @layershifter ([#1097](https://github.com/stardust-ui/react/pull/1097)) ### Documentation - Add layout guide @kuzhelov ([#1091](https://github.com/stardust-ui/react/pull/1091)) From 34ff8d3a82a3ad01fd01129eb64611aaa4aee9dd Mon Sep 17 00:00:00 2001 From: Oleksandr Fediashov Date: Thu, 28 Mar 2019 11:22:02 +0200 Subject: [PATCH 13/13] fix size in prototype --- docs/src/prototypes/dropdowns/AsyncDropdownSearch.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/src/prototypes/dropdowns/AsyncDropdownSearch.tsx b/docs/src/prototypes/dropdowns/AsyncDropdownSearch.tsx index 1dfa61f0dd..766b9cc65b 100644 --- a/docs/src/prototypes/dropdowns/AsyncDropdownSearch.tsx +++ b/docs/src/prototypes/dropdowns/AsyncDropdownSearch.tsx @@ -57,7 +57,7 @@ class AsyncDropdownSearch extends React.Component<{}, SearchPageState> { if (this.state.items.length > 10) return this.setState({ loading: true }) - this.searchTimer = setTimeout(() => { + this.searchTimer = window.setTimeout(() => { this.setState(prevState => ({ loading: false, items: [...prevState.items, ..._.times(2, createEntry)], @@ -76,7 +76,7 @@ class AsyncDropdownSearch extends React.Component<{}, SearchPageState> { items={items} loading={loading} loadingMessage={{ - content: , + content: , }} multiple onSearchQueryChange={this.handleSearchQueryChange}