orcs-design-system 2.1.16 → 2.1.17
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.
|
@@ -38,6 +38,13 @@ export var centeredLoading = function centeredLoading() {
|
|
|
38
38
|
}));
|
|
39
39
|
};
|
|
40
40
|
centeredLoading.storyName = "Centered";
|
|
41
|
+
export var colouredLoading = function colouredLoading() {
|
|
42
|
+
return /*#__PURE__*/React.createElement(Loading, {
|
|
43
|
+
large: true,
|
|
44
|
+
primary: true
|
|
45
|
+
});
|
|
46
|
+
};
|
|
47
|
+
colouredLoading.storyName = "Coloured";
|
|
41
48
|
export var invertedLoading = function invertedLoading() {
|
|
42
49
|
return /*#__PURE__*/React.createElement(Box, {
|
|
43
50
|
bg: "greyDarkest",
|
|
@@ -67,6 +74,11 @@ centeredLoading.__docgenInfo = {
|
|
|
67
74
|
"methods": [],
|
|
68
75
|
"displayName": "centeredLoading"
|
|
69
76
|
};
|
|
77
|
+
colouredLoading.__docgenInfo = {
|
|
78
|
+
"description": "",
|
|
79
|
+
"methods": [],
|
|
80
|
+
"displayName": "colouredLoading"
|
|
81
|
+
};
|
|
70
82
|
invertedLoading.__docgenInfo = {
|
|
71
83
|
"description": "",
|
|
72
84
|
"methods": [],
|
|
@@ -26,7 +26,7 @@ var LoadingIcon = styled.svg.withConfig({
|
|
|
26
26
|
}, function (props) {
|
|
27
27
|
return props.large ? css(["animation:", " 800ms infinite linear;"], loadingSpin) : css(["animation:", " 600ms infinite linear;"], loadingSpin);
|
|
28
28
|
}, function (props) {
|
|
29
|
-
return props.inverted ? css(["fill:white;"]) : css(["fill:black;"]);
|
|
29
|
+
return props.inverted ? css(["fill:white;"]) : props.primary ? css(["fill:#0091ea;"]) : css(["fill:black;"]);
|
|
30
30
|
});
|
|
31
31
|
/**
|
|
32
32
|
* As a general guide, use the large prop for when whole pages or sections are loading, and the default (small) loading for smaller elements.
|
|
@@ -36,14 +36,16 @@ export default function Loading(_ref) {
|
|
|
36
36
|
var large = _ref.large,
|
|
37
37
|
centered = _ref.centered,
|
|
38
38
|
inverted = _ref.inverted,
|
|
39
|
+
primary = _ref.primary,
|
|
39
40
|
theme = _ref.theme,
|
|
40
|
-
props = _objectWithoutProperties(_ref, ["large", "centered", "inverted", "theme"]);
|
|
41
|
+
props = _objectWithoutProperties(_ref, ["large", "centered", "inverted", "primary", "theme"]);
|
|
41
42
|
|
|
42
43
|
var component = /*#__PURE__*/React.createElement(LoadingWrapper, _extends({}, props, {
|
|
43
44
|
centered: centered
|
|
44
45
|
}), /*#__PURE__*/React.createElement(LoadingIcon, {
|
|
45
46
|
large: large,
|
|
46
47
|
inverted: inverted,
|
|
48
|
+
primary: primary,
|
|
47
49
|
xmlns: "http://www.w3.org/2000/svg",
|
|
48
50
|
viewBox: "0 0 512 512"
|
|
49
51
|
}, /*#__PURE__*/React.createElement("path", {
|
|
@@ -67,6 +69,9 @@ Loading.propTypes = {
|
|
|
67
69
|
/** Changes colours to work on dark background */
|
|
68
70
|
inverted: PropTypes.bool,
|
|
69
71
|
|
|
72
|
+
/** Changes colours to primary branding colour */
|
|
73
|
+
primary: PropTypes.bool,
|
|
74
|
+
|
|
70
75
|
/** Specifies the system design theme */
|
|
71
76
|
theme: PropTypes.object
|
|
72
77
|
};
|
|
@@ -96,6 +101,13 @@ Loading.__docgenInfo = {
|
|
|
96
101
|
"required": false,
|
|
97
102
|
"description": "Changes colours to work on dark background"
|
|
98
103
|
},
|
|
104
|
+
"primary": {
|
|
105
|
+
"type": {
|
|
106
|
+
"name": "bool"
|
|
107
|
+
},
|
|
108
|
+
"required": false,
|
|
109
|
+
"description": "Changes colours to primary branding colour"
|
|
110
|
+
},
|
|
99
111
|
"theme": {
|
|
100
112
|
"type": {
|
|
101
113
|
"name": "object"
|