@cloudflare/component-logo 5.3.4 → 6.0.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 +851 -2721
- package/dist/LogoHeader.d.ts +132 -132
- package/es/Logo.js +9 -10
- package/es/LogoCloud.js +20 -17
- package/es/LogoHeader.js +35 -26
- package/es/LogoInline.js +8 -7
- package/lib/Logo.js +1 -3
- package/lib/LogoHeader.js +1 -1
- package/lib/index.js +6 -6
- package/package.json +8 -8
package/es/Logo.js
CHANGED
|
@@ -1,16 +1,15 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { withTheme } from '@cloudflare/style-container';
|
|
3
3
|
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
const textCol = (_textColor = textColor) !== null && _textColor !== void 0 ? _textColor : light ? theme.colors.white : theme.colors.black;
|
|
4
|
+
var Logo = _ref => {
|
|
5
|
+
var {
|
|
6
|
+
theme,
|
|
7
|
+
light,
|
|
8
|
+
textColor,
|
|
9
|
+
width = '105px',
|
|
10
|
+
height = '41px'
|
|
11
|
+
} = _ref;
|
|
12
|
+
var textCol = textColor !== null && textColor !== void 0 ? textColor : light ? theme.colors.white : theme.colors.black;
|
|
14
13
|
return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("svg", {
|
|
15
14
|
viewBox: "0 0 105 36",
|
|
16
15
|
role: "img",
|
package/es/LogoCloud.js
CHANGED
|
@@ -1,22 +1,25 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { withTheme } from '@cloudflare/style-container';
|
|
3
3
|
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
4
|
+
var LogoCloud = _ref => {
|
|
5
|
+
var {
|
|
6
|
+
theme,
|
|
7
|
+
width = '80px',
|
|
8
|
+
height = '47px'
|
|
9
|
+
} = _ref;
|
|
10
|
+
return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("svg", {
|
|
11
|
+
role: "img",
|
|
12
|
+
viewBox: "0 0 460 271.2",
|
|
13
|
+
width: width,
|
|
14
|
+
height: height,
|
|
15
|
+
"aria-hidden": true
|
|
16
|
+
}, /*#__PURE__*/React.createElement("path", {
|
|
17
|
+
fill: theme.colors.marketing.lightOrange,
|
|
18
|
+
d: "M328.6,125.6c-0.8,0-1.5,0.6-1.8,1.4l-4.8,16.7c-2.1,7.2-1.3,13.8,2.2,18.7 c3.2,4.5,8.6,7.1,15.1,7.4l26.2,1.6c0.8,0,1.5,0.4,1.9,1c0.4,0.6,0.5,1.5,0.3,2.2c-0.4,1.2-1.6,2.1-2.9,2.2l-27.3,1.6 c-14.8,0.7-30.7,12.6-36.3,27.2l-2,5.1c-0.4,1,0.3,2,1.4,2h93.8c1.1,0,2.1-0.7,2.4-1.8c1.6-5.8,2.5-11.9,2.5-18.2 c0-37-30.2-67.2-67.3-67.2C330.9,125.5,329.7,125.5,328.6,125.6z"
|
|
19
|
+
}), /*#__PURE__*/React.createElement("path", {
|
|
20
|
+
fill: theme.colors.marketing.orange,
|
|
21
|
+
d: "M292.8,204.4c2.1-7.2,1.3-13.8-2.2-18.7c-3.2-4.5-8.6-7.1-15.1-7.4l-123.1-1.6 c-0.8,0-1.5-0.4-1.9-1s-0.5-1.4-0.3-2.2c0.4-1.2,1.6-2.1,2.9-2.2l124.2-1.6c14.7-0.7,30.7-12.6,36.3-27.2l7.1-18.5 c0.3-0.8,0.4-1.6,0.2-2.4c-8-36.2-40.3-63.2-78.9-63.2c-35.6,0-65.8,23-76.6,54.9c-7-5.2-15.9-8-25.5-7.1 c-17.1,1.7-30.8,15.4-32.5,32.5c-0.4,4.4-0.1,8.7,0.9,12.7c-27.9,0.8-50.2,23.6-50.2,51.7c0,2.5,0.2,5,0.5,7.5 c0.2,1.2,1.2,2.1,2.4,2.1h227.2c1.3,0,2.5-0.9,2.9-2.2L292.8,204.4z"
|
|
22
|
+
})));
|
|
23
|
+
};
|
|
21
24
|
|
|
22
25
|
export default withTheme(LogoCloud);
|
package/es/LogoHeader.js
CHANGED
|
@@ -3,33 +3,42 @@ import Logo from './Logo';
|
|
|
3
3
|
import LogoCloud from './LogoCloud';
|
|
4
4
|
import { createStyledComponent } from '@cloudflare/style-container';
|
|
5
5
|
import { isDarkMode, variables as theme } from '@cloudflare/style-const';
|
|
6
|
-
export
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
})
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
6
|
+
export var LogoWrapper = createStyledComponent(_ref => {
|
|
7
|
+
var {
|
|
8
|
+
removeMargin
|
|
9
|
+
} = _ref;
|
|
10
|
+
return {
|
|
11
|
+
my: removeMargin ? 0 : 2,
|
|
12
|
+
userSelect: 'none',
|
|
13
|
+
'-webkit-tap-highlight-color': 'rgba(0, 0, 0, 0)'
|
|
14
|
+
};
|
|
15
|
+
});
|
|
16
|
+
export var DesktopOnly = createStyledComponent(_ref2 => {
|
|
17
|
+
var {
|
|
18
|
+
removeMargin
|
|
19
|
+
} = _ref2;
|
|
20
|
+
return {
|
|
21
|
+
display: 'none',
|
|
22
|
+
mx: removeMargin ? 0 : 3,
|
|
23
|
+
tabletWide: {
|
|
24
|
+
display: 'block'
|
|
25
|
+
}
|
|
26
|
+
};
|
|
27
|
+
});
|
|
28
|
+
export var MobileOnly = createStyledComponent(_ref3 => {
|
|
29
|
+
var {
|
|
30
|
+
removeMargin
|
|
31
|
+
} = _ref3;
|
|
32
|
+
return {
|
|
33
|
+
display: 'block',
|
|
34
|
+
mx: removeMargin ? 0 : 2,
|
|
35
|
+
tabletWide: {
|
|
36
|
+
display: 'none'
|
|
37
|
+
}
|
|
38
|
+
};
|
|
39
|
+
});
|
|
31
40
|
|
|
32
|
-
|
|
41
|
+
var LogoHeader = () => /*#__PURE__*/React.createElement(LogoWrapper, null, /*#__PURE__*/React.createElement(DesktopOnly, null, /*#__PURE__*/React.createElement(Logo, {
|
|
33
42
|
textColor: isDarkMode() ? theme.colors.black : undefined
|
|
34
43
|
})), /*#__PURE__*/React.createElement(MobileOnly, null, /*#__PURE__*/React.createElement(LogoCloud, {
|
|
35
44
|
width: "70px",
|
package/es/LogoInline.js
CHANGED
|
@@ -2,13 +2,14 @@ import React from 'react';
|
|
|
2
2
|
import { withTheme } from '@cloudflare/style-container';
|
|
3
3
|
import { Trans } from '@cloudflare/intl-react';
|
|
4
4
|
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
5
|
+
var LogoInline = _ref => {
|
|
6
|
+
var {
|
|
7
|
+
theme,
|
|
8
|
+
light,
|
|
9
|
+
width = '200px',
|
|
10
|
+
height = '46px'
|
|
11
|
+
} = _ref;
|
|
12
|
+
var textColor = light ? theme.colors.white : theme.colors.black;
|
|
12
13
|
return /*#__PURE__*/React.createElement("svg", {
|
|
13
14
|
viewBox: "0 0 1179.5 271.2",
|
|
14
15
|
width: width,
|
package/lib/Logo.js
CHANGED
|
@@ -12,8 +12,6 @@ var _styleContainer = require("@cloudflare/style-container");
|
|
|
12
12
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
13
13
|
|
|
14
14
|
var Logo = function Logo(_ref) {
|
|
15
|
-
var _textColor;
|
|
16
|
-
|
|
17
15
|
var theme = _ref.theme,
|
|
18
16
|
light = _ref.light,
|
|
19
17
|
textColor = _ref.textColor,
|
|
@@ -21,7 +19,7 @@ var Logo = function Logo(_ref) {
|
|
|
21
19
|
width = _ref$width === void 0 ? '105px' : _ref$width,
|
|
22
20
|
_ref$height = _ref.height,
|
|
23
21
|
height = _ref$height === void 0 ? '41px' : _ref$height;
|
|
24
|
-
var textCol =
|
|
22
|
+
var textCol = textColor !== null && textColor !== void 0 ? textColor : light ? theme.colors.white : theme.colors.black;
|
|
25
23
|
return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("svg", {
|
|
26
24
|
viewBox: "0 0 105 36",
|
|
27
25
|
role: "img",
|
package/lib/LogoHeader.js
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.default = exports.MobileOnly = exports.
|
|
6
|
+
exports.default = exports.MobileOnly = exports.LogoWrapper = exports.DesktopOnly = void 0;
|
|
7
7
|
|
|
8
8
|
var _react = _interopRequireDefault(require("react"));
|
|
9
9
|
|
package/lib/index.js
CHANGED
|
@@ -9,22 +9,22 @@ Object.defineProperty(exports, "Logo", {
|
|
|
9
9
|
return _Logo.default;
|
|
10
10
|
}
|
|
11
11
|
});
|
|
12
|
-
Object.defineProperty(exports, "
|
|
12
|
+
Object.defineProperty(exports, "LogoCloud", {
|
|
13
13
|
enumerable: true,
|
|
14
14
|
get: function get() {
|
|
15
|
-
return
|
|
15
|
+
return _LogoCloud.default;
|
|
16
16
|
}
|
|
17
17
|
});
|
|
18
|
-
Object.defineProperty(exports, "
|
|
18
|
+
Object.defineProperty(exports, "LogoHeader", {
|
|
19
19
|
enumerable: true,
|
|
20
20
|
get: function get() {
|
|
21
|
-
return
|
|
21
|
+
return _LogoHeader.default;
|
|
22
22
|
}
|
|
23
23
|
});
|
|
24
|
-
Object.defineProperty(exports, "
|
|
24
|
+
Object.defineProperty(exports, "LogoInline", {
|
|
25
25
|
enumerable: true,
|
|
26
26
|
get: function get() {
|
|
27
|
-
return
|
|
27
|
+
return _LogoInline.default;
|
|
28
28
|
}
|
|
29
29
|
});
|
|
30
30
|
|
package/package.json
CHANGED
|
@@ -1,22 +1,23 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@cloudflare/component-logo",
|
|
3
3
|
"description": "Cloudflare Logo Component",
|
|
4
|
-
"version": "
|
|
4
|
+
"version": "6.0.0",
|
|
5
5
|
"main": "lib/index.js",
|
|
6
6
|
"module": "es/index.js",
|
|
7
7
|
"author": "Vojtech Miksu <vojtech@miksu.cz>",
|
|
8
8
|
"license": "BSD-3-Clause",
|
|
9
9
|
"publishConfig": {
|
|
10
|
-
"
|
|
11
|
-
"
|
|
10
|
+
"access": "public",
|
|
11
|
+
"main": "lib/index.js",
|
|
12
|
+
"module": "es/index.js"
|
|
12
13
|
},
|
|
13
14
|
"dependencies": {
|
|
14
|
-
"@cloudflare/intl-react": "^1.9.
|
|
15
|
+
"@cloudflare/intl-react": "^1.9.80",
|
|
15
16
|
"prop-types": "^15.6.0"
|
|
16
17
|
},
|
|
17
18
|
"peerDependencies": {
|
|
18
19
|
"@cloudflare/style-const": "^5.3.9",
|
|
19
|
-
"@cloudflare/style-container": "^7.
|
|
20
|
+
"@cloudflare/style-container": "^7.9.0",
|
|
20
21
|
"react": "^15.0.0-0 || ^16.0.0-0 || ^17.0.0-0"
|
|
21
22
|
},
|
|
22
23
|
"stratus": {
|
|
@@ -33,6 +34,5 @@
|
|
|
33
34
|
"metadata": {
|
|
34
35
|
"title": "Logo",
|
|
35
36
|
"status": "active"
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
}
|
|
37
|
+
}
|
|
38
|
+
}
|