@ndla/ui 3.2.0 → 3.2.1-alpha.3
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/es/Spinner/Spinner.js
CHANGED
|
@@ -8,12 +8,11 @@ import _styled from "@emotion/styled-base";
|
|
|
8
8
|
*
|
|
9
9
|
*/
|
|
10
10
|
import React from 'react';
|
|
11
|
-
import PropTypes from 'prop-types';
|
|
12
11
|
import { spacing, colors } from '@ndla/core';
|
|
13
12
|
import { jsx as ___EmotionJSX } from "@emotion/core";
|
|
14
13
|
|
|
15
14
|
var SpinnerDiv = /*#__PURE__*/_styled('div', {
|
|
16
|
-
target: "
|
|
15
|
+
target: "eecx2hs0",
|
|
17
16
|
label: "SpinnerDiv"
|
|
18
17
|
})("border:calc(", function (props) {
|
|
19
18
|
return spacing[props.size];
|
|
@@ -25,26 +24,19 @@ var SpinnerDiv = /*#__PURE__*/_styled('div', {
|
|
|
25
24
|
return spacing[props.size];
|
|
26
25
|
}, ";display:block;margin:", function (props) {
|
|
27
26
|
return props.margin;
|
|
28
|
-
}, ";@keyframes spinnerAnimation{0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,
|
|
27
|
+
}, ";@keyframes spinnerAnimation{0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlNwaW5uZXIudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWtCdUMiLCJmaWxlIjoiU3Bpbm5lci50c3giLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIENvcHlyaWdodCAoYykgMjAxOC1wcmVzZW50LCBORExBLlxuICpcbiAqIFRoaXMgc291cmNlIGNvZGUgaXMgbGljZW5zZWQgdW5kZXIgdGhlIEdQTHYzIGxpY2Vuc2UgZm91bmQgaW4gdGhlXG4gKiBMSUNFTlNFIGZpbGUgaW4gdGhlIHJvb3QgZGlyZWN0b3J5IG9mIHRoaXMgc291cmNlIHRyZWUuXG4gKlxuICovXG5cbmltcG9ydCBSZWFjdCBmcm9tICdyZWFjdCc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBzcGFjaW5nLCBjb2xvcnMsIFNwYWNpbmdOYW1lcyB9IGZyb20gJ0BuZGxhL2NvcmUnO1xuXG5pbnRlcmZhY2UgUHJvcHMge1xuICBzaXplOiBTcGFjaW5nTmFtZXM7XG4gIG1hcmdpbjogc3RyaW5nO1xuICBpbnZlcnRlZDogYm9vbGVhbjtcbn1cblxuY29uc3QgU3Bpbm5lckRpdiA9IHN0eWxlZCgnZGl2Jyk8UHJvcHM+YFxuICBib3JkZXI6IGNhbGMoJHsocHJvcHMpID0+IHNwYWNpbmdbcHJvcHMuc2l6ZV19IC8gNi41KSBzb2xpZCByZ2JhKDAsIDAsIDAsIDAuMSk7XG4gIGJvcmRlci1ib3R0b20tY29sb3I6ICR7KHByb3BzKSA9PiAocHJvcHMuaW52ZXJ0ZWQgPyAnI2ZmZicgOiBjb2xvcnMuYnJhbmQucHJpbWFyeSl9O1xuICBib3JkZXItcmFkaXVzOiA1MCU7XG4gIGFuaW1hdGlvbjogc3Bpbm5lckFuaW1hdGlvbiAwLjdzIGxpbmVhciBpbmZpbml0ZTtcbiAgaGVpZ2h0OiAkeyhwcm9wcykgPT4gc3BhY2luZ1twcm9wcy5zaXplXX07XG4gIHdpZHRoOiAkeyhwcm9wcykgPT4gc3BhY2luZ1twcm9wcy5zaXplXX07XG4gIGRpc3BsYXk6IGJsb2NrO1xuICBtYXJnaW46ICR7KHByb3BzKSA9PiBwcm9wcy5tYXJnaW59O1xuICBAa2V5ZnJhbWVzIHNwaW5uZXJBbmltYXRpb24ge1xuICAgIDAlIHtcbiAgICAgIHRyYW5zZm9ybTogcm90YXRlKDBkZWcpO1xuICAgIH1cbiAgICAxMDAlIHtcbiAgICAgIHRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7XG4gICAgfVxuICB9XG5gO1xuXG5jb25zdCBTcGlubmVyID0gKHsgc2l6ZSA9ICdsYXJnZScsIG1hcmdpbiA9IGAke3NwYWNpbmcubm9ybWFsfSBhdXRvYCwgaW52ZXJ0ZWQgfTogUGFydGlhbDxQcm9wcz4pID0+IChcbiAgPFNwaW5uZXJEaXYgc2l6ZT17c2l6ZX0gbWFyZ2luPXttYXJnaW59IGludmVydGVkPXshIWludmVydGVkfSAvPlxuKTtcblxuZXhwb3J0IGRlZmF1bHQgU3Bpbm5lcjtcbiJdfQ== */"));
|
|
29
28
|
|
|
30
29
|
var Spinner = function Spinner(_ref) {
|
|
31
|
-
var size = _ref.size,
|
|
32
|
-
|
|
30
|
+
var _ref$size = _ref.size,
|
|
31
|
+
size = _ref$size === void 0 ? 'large' : _ref$size,
|
|
32
|
+
_ref$margin = _ref.margin,
|
|
33
|
+
margin = _ref$margin === void 0 ? "".concat(spacing.normal, " auto") : _ref$margin,
|
|
33
34
|
inverted = _ref.inverted;
|
|
34
35
|
return ___EmotionJSX(SpinnerDiv, {
|
|
35
36
|
size: size,
|
|
36
37
|
margin: margin,
|
|
37
|
-
inverted: inverted
|
|
38
|
+
inverted: !!inverted
|
|
38
39
|
});
|
|
39
40
|
};
|
|
40
41
|
|
|
41
|
-
Spinner.propTypes = {
|
|
42
|
-
size: PropTypes.oneOf(['large', 'medium', 'normal']),
|
|
43
|
-
margin: PropTypes.string,
|
|
44
|
-
inverted: PropTypes.bool
|
|
45
|
-
};
|
|
46
|
-
Spinner.defaultProps = {
|
|
47
|
-
size: 'large',
|
|
48
|
-
margin: "".concat(spacing.normal, " auto")
|
|
49
|
-
};
|
|
50
42
|
export default Spinner;
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright (c) 2018-present, NDLA.
|
|
3
|
+
*
|
|
4
|
+
* This source code is licensed under the GPLv3 license found in the
|
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
|
6
|
+
*
|
|
7
|
+
*/
|
|
8
|
+
import { SpacingNames } from '@ndla/core';
|
|
9
|
+
interface Props {
|
|
10
|
+
size: SpacingNames;
|
|
11
|
+
margin: string;
|
|
12
|
+
inverted: boolean;
|
|
13
|
+
}
|
|
14
|
+
declare const Spinner: ({ size, margin, inverted }: Partial<Props>) => JSX.Element;
|
|
15
|
+
export default Spinner;
|
package/lib/Spinner/Spinner.js
CHANGED
|
@@ -9,8 +9,6 @@ var _styledBase = _interopRequireDefault(require("@emotion/styled-base"));
|
|
|
9
9
|
|
|
10
10
|
var _react = _interopRequireDefault(require("react"));
|
|
11
11
|
|
|
12
|
-
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
13
|
-
|
|
14
12
|
var _core = require("@ndla/core");
|
|
15
13
|
|
|
16
14
|
var _core2 = require("@emotion/core");
|
|
@@ -25,7 +23,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
|
|
|
25
23
|
*
|
|
26
24
|
*/
|
|
27
25
|
var SpinnerDiv = ( /*#__PURE__*/0, _styledBase["default"])('div', {
|
|
28
|
-
target: "
|
|
26
|
+
target: "eecx2hs0",
|
|
29
27
|
label: "SpinnerDiv"
|
|
30
28
|
})("border:calc(", function (props) {
|
|
31
29
|
return _core.spacing[props.size];
|
|
@@ -37,27 +35,20 @@ var SpinnerDiv = ( /*#__PURE__*/0, _styledBase["default"])('div', {
|
|
|
37
35
|
return _core.spacing[props.size];
|
|
38
36
|
}, ";display:block;margin:", function (props) {
|
|
39
37
|
return props.margin;
|
|
40
|
-
}, ";@keyframes spinnerAnimation{0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,
|
|
38
|
+
}, ";@keyframes spinnerAnimation{0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlNwaW5uZXIudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWtCdUMiLCJmaWxlIjoiU3Bpbm5lci50c3giLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIENvcHlyaWdodCAoYykgMjAxOC1wcmVzZW50LCBORExBLlxuICpcbiAqIFRoaXMgc291cmNlIGNvZGUgaXMgbGljZW5zZWQgdW5kZXIgdGhlIEdQTHYzIGxpY2Vuc2UgZm91bmQgaW4gdGhlXG4gKiBMSUNFTlNFIGZpbGUgaW4gdGhlIHJvb3QgZGlyZWN0b3J5IG9mIHRoaXMgc291cmNlIHRyZWUuXG4gKlxuICovXG5cbmltcG9ydCBSZWFjdCBmcm9tICdyZWFjdCc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBzcGFjaW5nLCBjb2xvcnMsIFNwYWNpbmdOYW1lcyB9IGZyb20gJ0BuZGxhL2NvcmUnO1xuXG5pbnRlcmZhY2UgUHJvcHMge1xuICBzaXplOiBTcGFjaW5nTmFtZXM7XG4gIG1hcmdpbjogc3RyaW5nO1xuICBpbnZlcnRlZDogYm9vbGVhbjtcbn1cblxuY29uc3QgU3Bpbm5lckRpdiA9IHN0eWxlZCgnZGl2Jyk8UHJvcHM+YFxuICBib3JkZXI6IGNhbGMoJHsocHJvcHMpID0+IHNwYWNpbmdbcHJvcHMuc2l6ZV19IC8gNi41KSBzb2xpZCByZ2JhKDAsIDAsIDAsIDAuMSk7XG4gIGJvcmRlci1ib3R0b20tY29sb3I6ICR7KHByb3BzKSA9PiAocHJvcHMuaW52ZXJ0ZWQgPyAnI2ZmZicgOiBjb2xvcnMuYnJhbmQucHJpbWFyeSl9O1xuICBib3JkZXItcmFkaXVzOiA1MCU7XG4gIGFuaW1hdGlvbjogc3Bpbm5lckFuaW1hdGlvbiAwLjdzIGxpbmVhciBpbmZpbml0ZTtcbiAgaGVpZ2h0OiAkeyhwcm9wcykgPT4gc3BhY2luZ1twcm9wcy5zaXplXX07XG4gIHdpZHRoOiAkeyhwcm9wcykgPT4gc3BhY2luZ1twcm9wcy5zaXplXX07XG4gIGRpc3BsYXk6IGJsb2NrO1xuICBtYXJnaW46ICR7KHByb3BzKSA9PiBwcm9wcy5tYXJnaW59O1xuICBAa2V5ZnJhbWVzIHNwaW5uZXJBbmltYXRpb24ge1xuICAgIDAlIHtcbiAgICAgIHRyYW5zZm9ybTogcm90YXRlKDBkZWcpO1xuICAgIH1cbiAgICAxMDAlIHtcbiAgICAgIHRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7XG4gICAgfVxuICB9XG5gO1xuXG5jb25zdCBTcGlubmVyID0gKHsgc2l6ZSA9ICdsYXJnZScsIG1hcmdpbiA9IGAke3NwYWNpbmcubm9ybWFsfSBhdXRvYCwgaW52ZXJ0ZWQgfTogUGFydGlhbDxQcm9wcz4pID0+IChcbiAgPFNwaW5uZXJEaXYgc2l6ZT17c2l6ZX0gbWFyZ2luPXttYXJnaW59IGludmVydGVkPXshIWludmVydGVkfSAvPlxuKTtcblxuZXhwb3J0IGRlZmF1bHQgU3Bpbm5lcjtcbiJdfQ== */"));
|
|
41
39
|
|
|
42
40
|
var Spinner = function Spinner(_ref) {
|
|
43
|
-
var size = _ref.size,
|
|
44
|
-
|
|
41
|
+
var _ref$size = _ref.size,
|
|
42
|
+
size = _ref$size === void 0 ? 'large' : _ref$size,
|
|
43
|
+
_ref$margin = _ref.margin,
|
|
44
|
+
margin = _ref$margin === void 0 ? "".concat(_core.spacing.normal, " auto") : _ref$margin,
|
|
45
45
|
inverted = _ref.inverted;
|
|
46
46
|
return (0, _core2.jsx)(SpinnerDiv, {
|
|
47
47
|
size: size,
|
|
48
48
|
margin: margin,
|
|
49
|
-
inverted: inverted
|
|
49
|
+
inverted: !!inverted
|
|
50
50
|
});
|
|
51
51
|
};
|
|
52
52
|
|
|
53
|
-
Spinner.propTypes = {
|
|
54
|
-
size: _propTypes["default"].oneOf(['large', 'medium', 'normal']),
|
|
55
|
-
margin: _propTypes["default"].string,
|
|
56
|
-
inverted: _propTypes["default"].bool
|
|
57
|
-
};
|
|
58
|
-
Spinner.defaultProps = {
|
|
59
|
-
size: 'large',
|
|
60
|
-
margin: "".concat(_core.spacing.normal, " auto")
|
|
61
|
-
};
|
|
62
53
|
var _default = Spinner;
|
|
63
54
|
exports["default"] = _default;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ndla/ui",
|
|
3
|
-
"version": "3.2.
|
|
3
|
+
"version": "3.2.1-alpha.3+1c15ee767",
|
|
4
4
|
"description": "UI component library for NDLA.",
|
|
5
5
|
"license": "GPL-3.0",
|
|
6
6
|
"main": "lib/index.js",
|
|
@@ -31,13 +31,13 @@
|
|
|
31
31
|
"types"
|
|
32
32
|
],
|
|
33
33
|
"dependencies": {
|
|
34
|
-
"@ndla/button": "^1.0.
|
|
34
|
+
"@ndla/button": "^1.0.7-alpha.26+1c15ee767",
|
|
35
35
|
"@ndla/carousel": "^1.0.6",
|
|
36
36
|
"@ndla/core": "^0.7.2",
|
|
37
37
|
"@ndla/hooks": "^1.0.6",
|
|
38
38
|
"@ndla/icons": "^1.3.1",
|
|
39
39
|
"@ndla/licenses": "^1.0.7",
|
|
40
|
-
"@ndla/modal": "^1.1.
|
|
40
|
+
"@ndla/modal": "^1.1.12-alpha.23+1c15ee767",
|
|
41
41
|
"@ndla/safelink": "^1.0.5",
|
|
42
42
|
"@ndla/switch": "^0.0.32",
|
|
43
43
|
"@ndla/tabs": "^1.0.8",
|
|
@@ -92,5 +92,5 @@
|
|
|
92
92
|
"publishConfig": {
|
|
93
93
|
"access": "public"
|
|
94
94
|
},
|
|
95
|
-
"gitHead": "
|
|
95
|
+
"gitHead": "1c15ee767bf22877c3b1176a00117a75496293e9"
|
|
96
96
|
}
|
|
@@ -7,11 +7,16 @@
|
|
|
7
7
|
*/
|
|
8
8
|
|
|
9
9
|
import React from 'react';
|
|
10
|
-
import PropTypes from 'prop-types';
|
|
11
10
|
import styled from '@emotion/styled';
|
|
12
|
-
import { spacing, colors } from '@ndla/core';
|
|
11
|
+
import { spacing, colors, SpacingNames } from '@ndla/core';
|
|
13
12
|
|
|
14
|
-
|
|
13
|
+
interface Props {
|
|
14
|
+
size: SpacingNames;
|
|
15
|
+
margin: string;
|
|
16
|
+
inverted: boolean;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
const SpinnerDiv = styled('div')<Props>`
|
|
15
20
|
border: calc(${(props) => spacing[props.size]} / 6.5) solid rgba(0, 0, 0, 0.1);
|
|
16
21
|
border-bottom-color: ${(props) => (props.inverted ? '#fff' : colors.brand.primary)};
|
|
17
22
|
border-radius: 50%;
|
|
@@ -30,17 +35,8 @@ const SpinnerDiv = styled('div')`
|
|
|
30
35
|
}
|
|
31
36
|
`;
|
|
32
37
|
|
|
33
|
-
const Spinner = ({ size, margin
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
size: PropTypes.oneOf(['large', 'medium', 'normal']),
|
|
37
|
-
margin: PropTypes.string,
|
|
38
|
-
inverted: PropTypes.bool,
|
|
39
|
-
};
|
|
40
|
-
|
|
41
|
-
Spinner.defaultProps = {
|
|
42
|
-
size: 'large',
|
|
43
|
-
margin: `${spacing.normal} auto`,
|
|
44
|
-
};
|
|
38
|
+
const Spinner = ({ size = 'large', margin = `${spacing.normal} auto`, inverted }: Partial<Props>) => (
|
|
39
|
+
<SpinnerDiv size={size} margin={margin} inverted={!!inverted} />
|
|
40
|
+
);
|
|
45
41
|
|
|
46
42
|
export default Spinner;
|
|
File without changes
|