@cloudflare/component-logo 3.10.3 → 4.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.
Files changed (11) hide show
  1. package/CHANGELOG.md +22 -0
  2. package/dist/Logo.d.ts +1 -0
  3. package/es/Logo.js +5 -5
  4. package/es/LogoCloud.js +0 -4
  5. package/es/LogoHeader.js +4 -1
  6. package/es/LogoInline.js +0 -4
  7. package/lib/Logo.js +5 -5
  8. package/lib/LogoCloud.js +0 -4
  9. package/lib/LogoHeader.js +5 -1
  10. package/lib/LogoInline.js +0 -4
  11. package/package.json +5 -4
package/CHANGELOG.md CHANGED
@@ -3,6 +3,28 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ # [4.0.0](http://stash.cfops.it:7999/fe/stratus/compare/@cloudflare/component-logo@3.10.3...@cloudflare/component-logo@4.0.0) (2021-09-14)
7
+
8
+
9
+ ### Bug Fixes
10
+
11
+ * **component-logo:** DESSYS-899 Remove removeMargin ([89cf885](http://stash.cfops.it:7999/fe/stratus/commits/89cf885))
12
+
13
+
14
+ ### Features
15
+
16
+ * **component-logo:** DESSYS-917 Dark mode change ([d4f2508](http://stash.cfops.it:7999/fe/stratus/commits/d4f2508))
17
+ * **component-logo:** DESSYS-994 remove flare from Cloudflare logo ([2f729e4](http://stash.cfops.it:7999/fe/stratus/commits/2f729e4))
18
+
19
+
20
+ ### BREAKING CHANGES
21
+
22
+ * **component-logo:** Change in logo SVG output and appearance on darker backgrounds
23
+
24
+
25
+
26
+
27
+
6
28
  ## [3.10.3](http://stash.cfops.it:7999/fe/stratus/compare/@cloudflare/component-logo@3.10.2...@cloudflare/component-logo@3.10.3) (2021-08-25)
7
29
 
8
30
  **Note:** Version bump only for package @cloudflare/component-logo
package/dist/Logo.d.ts CHANGED
@@ -3,6 +3,7 @@ declare type Props = {
3
3
  light?: boolean;
4
4
  width?: string;
5
5
  height?: string;
6
+ textColor?: string;
6
7
  };
7
8
  declare const _default: React.ComponentType<Props>;
8
9
  export default _default;
package/es/Logo.js CHANGED
@@ -5,10 +5,13 @@ import { Trans } from '@cloudflare/intl-react';
5
5
  const Logo = ({
6
6
  theme,
7
7
  light,
8
+ textColor,
8
9
  width = '105px',
9
10
  height = '41px'
10
11
  }) => {
11
- const textColor = light ? theme.colors.white : theme.colors.marketing.gray[0];
12
+ var _textColor;
13
+
14
+ const textCol = (_textColor = textColor) !== null && _textColor !== void 0 ? _textColor : light ? theme.colors.white : theme.colors.marketing.gray[0];
12
15
  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("svg", {
13
16
  viewBox: "0 0 704 240",
14
17
  width: width,
@@ -25,11 +28,8 @@ const Logo = ({
25
28
  id: "accessibility.header.logo.desc",
26
29
  _: "Navigate back"
27
30
  })), /*#__PURE__*/React.createElement("path", {
28
- fill: textColor,
31
+ fill: textCol,
29
32
  d: "M77.1 182.1h15.6v42.5h27.1v13.6H77.1zM135.9 210.3v-.2c0-16.1 13-29.2 30.3-29.2s30.1 12.9 30.1 29v.2c0 16.1-13 29.2-30.3 29.2s-30.1-12.9-30.1-29m44.6 0v-.2c0-8.1-5.8-15.1-14.4-15.1-8.5 0-14.2 6.9-14.2 15v.2c0 8.1 5.8 15.1 14.3 15.1 8.6 0 14.3-6.9 14.3-15M215.4 213.6v-31.5h15.8v31.2c0 8.1 4.1 11.9 10.3 11.9 6.2 0 10.3-3.7 10.3-11.5v-31.6h15.8v31.1c0 18.1-10.3 26-26.3 26-15.9 0-25.9-8-25.9-25.6M291.4 182.1H313c20 0 31.7 11.5 31.7 27.7v.2c0 16.2-11.8 28.2-32 28.2h-21.3v-56.1zm21.9 42.3c9.3 0 15.5-5.1 15.5-14.2v-.2c0-9-6.2-14.2-15.5-14.2H307v28.5h6.3v.1zM367.3 182.1h44.9v13.6h-29.4v9.6h26.6v12.9h-26.6v20h-15.5zM433.8 182.1h15.5v42.5h27.2v13.6h-42.7zM517.1 181.7h15l23.9 56.5h-16.7l-4.1-10h-21.6l-4 10h-16.3l23.8-56.5zm13.7 34.4l-6.2-15.9-6.3 15.9h12.5zM576 182.1h26.5c8.6 0 14.5 2.2 18.3 6.1 3.3 3.2 5 7.5 5 13.1v.2c0 8.6-4.6 14.3-11.5 17.2l13.4 19.6h-18l-11.3-17h-6.8v17H576v-56.2zm25.8 26.9c5.3 0 8.3-2.6 8.3-6.6v-.2c0-4.4-3.2-6.6-8.4-6.6h-10.2V209h10.3zM648.2 182.1h45.1v13.2h-29.7v8.5h26.9v12.3h-26.9v8.9h30.1v13.2h-45.5zM43.1 216.9c-2.2 4.9-6.8 8.4-12.8 8.4-8.5 0-14.3-7.1-14.3-15.1v-.2c0-8.1 5.7-15 14.2-15 6.4 0 11.3 3.9 13.3 9.3h16.4C57.3 190.9 45.5 181 30.3 181 13 181 0 194.1 0 210.2v.2c0 16.1 12.8 29 30.1 29 14.8 0 26.4-9.6 29.4-22.4l-16.4-.1z"
30
- }), /*#__PURE__*/React.createElement("path", {
31
- fill: theme.colors.white,
32
- d: "M674.9 92.6L632 68l-7.4-3.2L449.1 66v89.1h225.8z"
33
33
  }), /*#__PURE__*/React.createElement("path", {
34
34
  d: "M596.8 146.9c2.1-7.2 1.3-13.8-2.2-18.7-3.2-4.5-8.6-7.1-15.1-7.4l-123.1-1.6c-.8 0-1.5-.4-1.9-1-.4-.6-.5-1.4-.3-2.2.4-1.2 1.6-2.1 2.9-2.2l124.2-1.6c14.7-.7 30.7-12.6 36.3-27.2l7.1-18.5c.3-.8.4-1.6.2-2.4C616.9 27.9 584.6.9 546 .9c-35.6 0-65.8 23-76.6 54.9-7-5.2-15.9-8-25.5-7.1-17.1 1.7-30.8 15.4-32.5 32.5-.4 4.4-.1 8.7.9 12.7-27.9.8-50.2 23.6-50.2 51.7 0 2.5.2 5 .5 7.5.2 1.2 1.2 2.1 2.4 2.1h227.2c1.3 0 2.5-.9 2.9-2.2l1.7-6.1z",
35
35
  fill: theme.colors.marketing.orange
package/es/LogoCloud.js CHANGED
@@ -18,10 +18,6 @@ const LogoCloud = ({
18
18
  id: "accessibility.header.logo.desc",
19
19
  _: "Navigate Back"
20
20
  })), /*#__PURE__*/React.createElement("path", {
21
- id: "flare",
22
- fill: theme.colors.white,
23
- d: "M370.9,150.2l-40.7-24.7c-0.6-0.1-4.4,0.3-6.4-0.7c-1.4-0.7-2.5-1.9-3.2-4c-3.2,0-175.5,0-175.5,0 v91.8h225.8V150.2z"
24
- }), /*#__PURE__*/React.createElement("path", {
25
21
  fill: theme.colors.marketing.lightOrange,
26
22
  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"
27
23
  }), /*#__PURE__*/React.createElement("path", {
package/es/LogoHeader.js CHANGED
@@ -2,6 +2,7 @@ import React from 'react';
2
2
  import Logo from './Logo';
3
3
  import LogoCloud from './LogoCloud';
4
4
  import { createStyledComponent } from '@cloudflare/style-container';
5
+ import { isDarkMode, variables as theme } from '@cloudflare/style-const';
5
6
  export const LogoWrapper = createStyledComponent(() => ({
6
7
  my: 2,
7
8
  userSelect: 'none',
@@ -22,7 +23,9 @@ export const MobileOnly = createStyledComponent(() => ({
22
23
  }
23
24
  }));
24
25
 
25
- const LogoHeader = () => /*#__PURE__*/React.createElement(LogoWrapper, null, /*#__PURE__*/React.createElement(DesktopOnly, null, /*#__PURE__*/React.createElement(Logo, null)), /*#__PURE__*/React.createElement(MobileOnly, null, /*#__PURE__*/React.createElement(LogoCloud, {
26
+ const LogoHeader = () => /*#__PURE__*/React.createElement(LogoWrapper, null, /*#__PURE__*/React.createElement(DesktopOnly, null, /*#__PURE__*/React.createElement(Logo, {
27
+ textColor: isDarkMode() ? theme.colors.gray[1] : undefined
28
+ })), /*#__PURE__*/React.createElement(MobileOnly, null, /*#__PURE__*/React.createElement(LogoCloud, {
26
29
  width: "70px",
27
30
  height: "41px"
28
31
  })));
package/es/LogoInline.js CHANGED
@@ -49,10 +49,6 @@ const LogoInline = ({
49
49
  fill: textColor,
50
50
  d: "M469.1,190.4c-2.2,4.9-6.8,8.4-12.8,8.4c-8.5,0-14.3-7.1-14.3-15.1v-0.2c0-8.1,5.7-15,14.2-15 c6.4,0,11.3,3.9,13.3,9.3h16.4c-2.6-13.4-14.4-23.3-29.6-23.3c-17.3,0-30.3,13.1-30.3,29.2v0.2c0,16.1,12.8,29,30.1,29 c14.8,0,26.4-9.6,29.4-22.4H469.1z"
51
51
  })), /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("path", {
52
- id: "flare",
53
- fill: theme.colors.white,
54
- d: "M370.9,150.2l-40.7-24.7c-0.6-0.1-4.4,0.3-6.4-0.7c-1.4-0.7-2.5-1.9-3.2-4c-3.2,0-175.5,0-175.5,0 v91.8h225.8V150.2z"
55
- }), /*#__PURE__*/React.createElement("path", {
56
52
  fill: theme.colors.marketing.lightOrange,
57
53
  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"
58
54
  }), /*#__PURE__*/React.createElement("path", {
package/lib/Logo.js CHANGED
@@ -14,13 +14,16 @@ var _intlReact = require("@cloudflare/intl-react");
14
14
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
15
15
 
16
16
  var Logo = function Logo(_ref) {
17
+ var _textColor;
18
+
17
19
  var theme = _ref.theme,
18
20
  light = _ref.light,
21
+ textColor = _ref.textColor,
19
22
  _ref$width = _ref.width,
20
23
  width = _ref$width === void 0 ? '105px' : _ref$width,
21
24
  _ref$height = _ref.height,
22
25
  height = _ref$height === void 0 ? '41px' : _ref$height;
23
- var textColor = light ? theme.colors.white : theme.colors.marketing.gray[0];
26
+ var textCol = (_textColor = textColor) !== null && _textColor !== void 0 ? _textColor : light ? theme.colors.white : theme.colors.marketing.gray[0];
24
27
  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("svg", {
25
28
  viewBox: "0 0 704 240",
26
29
  width: width,
@@ -37,11 +40,8 @@ var Logo = function Logo(_ref) {
37
40
  id: "accessibility.header.logo.desc",
38
41
  _: "Navigate back"
39
42
  })), /*#__PURE__*/_react.default.createElement("path", {
40
- fill: textColor,
43
+ fill: textCol,
41
44
  d: "M77.1 182.1h15.6v42.5h27.1v13.6H77.1zM135.9 210.3v-.2c0-16.1 13-29.2 30.3-29.2s30.1 12.9 30.1 29v.2c0 16.1-13 29.2-30.3 29.2s-30.1-12.9-30.1-29m44.6 0v-.2c0-8.1-5.8-15.1-14.4-15.1-8.5 0-14.2 6.9-14.2 15v.2c0 8.1 5.8 15.1 14.3 15.1 8.6 0 14.3-6.9 14.3-15M215.4 213.6v-31.5h15.8v31.2c0 8.1 4.1 11.9 10.3 11.9 6.2 0 10.3-3.7 10.3-11.5v-31.6h15.8v31.1c0 18.1-10.3 26-26.3 26-15.9 0-25.9-8-25.9-25.6M291.4 182.1H313c20 0 31.7 11.5 31.7 27.7v.2c0 16.2-11.8 28.2-32 28.2h-21.3v-56.1zm21.9 42.3c9.3 0 15.5-5.1 15.5-14.2v-.2c0-9-6.2-14.2-15.5-14.2H307v28.5h6.3v.1zM367.3 182.1h44.9v13.6h-29.4v9.6h26.6v12.9h-26.6v20h-15.5zM433.8 182.1h15.5v42.5h27.2v13.6h-42.7zM517.1 181.7h15l23.9 56.5h-16.7l-4.1-10h-21.6l-4 10h-16.3l23.8-56.5zm13.7 34.4l-6.2-15.9-6.3 15.9h12.5zM576 182.1h26.5c8.6 0 14.5 2.2 18.3 6.1 3.3 3.2 5 7.5 5 13.1v.2c0 8.6-4.6 14.3-11.5 17.2l13.4 19.6h-18l-11.3-17h-6.8v17H576v-56.2zm25.8 26.9c5.3 0 8.3-2.6 8.3-6.6v-.2c0-4.4-3.2-6.6-8.4-6.6h-10.2V209h10.3zM648.2 182.1h45.1v13.2h-29.7v8.5h26.9v12.3h-26.9v8.9h30.1v13.2h-45.5zM43.1 216.9c-2.2 4.9-6.8 8.4-12.8 8.4-8.5 0-14.3-7.1-14.3-15.1v-.2c0-8.1 5.7-15 14.2-15 6.4 0 11.3 3.9 13.3 9.3h16.4C57.3 190.9 45.5 181 30.3 181 13 181 0 194.1 0 210.2v.2c0 16.1 12.8 29 30.1 29 14.8 0 26.4-9.6 29.4-22.4l-16.4-.1z"
42
- }), /*#__PURE__*/_react.default.createElement("path", {
43
- fill: theme.colors.white,
44
- d: "M674.9 92.6L632 68l-7.4-3.2L449.1 66v89.1h225.8z"
45
45
  }), /*#__PURE__*/_react.default.createElement("path", {
46
46
  d: "M596.8 146.9c2.1-7.2 1.3-13.8-2.2-18.7-3.2-4.5-8.6-7.1-15.1-7.4l-123.1-1.6c-.8 0-1.5-.4-1.9-1-.4-.6-.5-1.4-.3-2.2.4-1.2 1.6-2.1 2.9-2.2l124.2-1.6c14.7-.7 30.7-12.6 36.3-27.2l7.1-18.5c.3-.8.4-1.6.2-2.4C616.9 27.9 584.6.9 546 .9c-35.6 0-65.8 23-76.6 54.9-7-5.2-15.9-8-25.5-7.1-17.1 1.7-30.8 15.4-32.5 32.5-.4 4.4-.1 8.7.9 12.7-27.9.8-50.2 23.6-50.2 51.7 0 2.5.2 5 .5 7.5.2 1.2 1.2 2.1 2.4 2.1h227.2c1.3 0 2.5-.9 2.9-2.2l1.7-6.1z",
47
47
  fill: theme.colors.marketing.orange
package/lib/LogoCloud.js CHANGED
@@ -31,10 +31,6 @@ var LogoCloud = function LogoCloud(_ref) {
31
31
  id: "accessibility.header.logo.desc",
32
32
  _: "Navigate Back"
33
33
  })), /*#__PURE__*/_react.default.createElement("path", {
34
- id: "flare",
35
- fill: theme.colors.white,
36
- d: "M370.9,150.2l-40.7-24.7c-0.6-0.1-4.4,0.3-6.4-0.7c-1.4-0.7-2.5-1.9-3.2-4c-3.2,0-175.5,0-175.5,0 v91.8h225.8V150.2z"
37
- }), /*#__PURE__*/_react.default.createElement("path", {
38
34
  fill: theme.colors.marketing.lightOrange,
39
35
  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"
40
36
  }), /*#__PURE__*/_react.default.createElement("path", {
package/lib/LogoHeader.js CHANGED
@@ -13,6 +13,8 @@ var _LogoCloud = _interopRequireDefault(require("./LogoCloud"));
13
13
 
14
14
  var _styleContainer = require("@cloudflare/style-container");
15
15
 
16
+ var _styleConst = require("@cloudflare/style-const");
17
+
16
18
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
17
19
 
18
20
  var LogoWrapper = (0, _styleContainer.createStyledComponent)(function () {
@@ -45,7 +47,9 @@ var MobileOnly = (0, _styleContainer.createStyledComponent)(function () {
45
47
  exports.MobileOnly = MobileOnly;
46
48
 
47
49
  var LogoHeader = function LogoHeader() {
48
- return /*#__PURE__*/_react.default.createElement(LogoWrapper, null, /*#__PURE__*/_react.default.createElement(DesktopOnly, null, /*#__PURE__*/_react.default.createElement(_Logo.default, null)), /*#__PURE__*/_react.default.createElement(MobileOnly, null, /*#__PURE__*/_react.default.createElement(_LogoCloud.default, {
50
+ return /*#__PURE__*/_react.default.createElement(LogoWrapper, null, /*#__PURE__*/_react.default.createElement(DesktopOnly, null, /*#__PURE__*/_react.default.createElement(_Logo.default, {
51
+ textColor: (0, _styleConst.isDarkMode)() ? _styleConst.variables.colors.gray[1] : undefined
52
+ })), /*#__PURE__*/_react.default.createElement(MobileOnly, null, /*#__PURE__*/_react.default.createElement(_LogoCloud.default, {
49
53
  width: "70px",
50
54
  height: "41px"
51
55
  })));
package/lib/LogoInline.js CHANGED
@@ -61,10 +61,6 @@ var LogoInline = function LogoInline(_ref) {
61
61
  fill: textColor,
62
62
  d: "M469.1,190.4c-2.2,4.9-6.8,8.4-12.8,8.4c-8.5,0-14.3-7.1-14.3-15.1v-0.2c0-8.1,5.7-15,14.2-15 c6.4,0,11.3,3.9,13.3,9.3h16.4c-2.6-13.4-14.4-23.3-29.6-23.3c-17.3,0-30.3,13.1-30.3,29.2v0.2c0,16.1,12.8,29,30.1,29 c14.8,0,26.4-9.6,29.4-22.4H469.1z"
63
63
  })), /*#__PURE__*/_react.default.createElement("g", null, /*#__PURE__*/_react.default.createElement("path", {
64
- id: "flare",
65
- fill: theme.colors.white,
66
- d: "M370.9,150.2l-40.7-24.7c-0.6-0.1-4.4,0.3-6.4-0.7c-1.4-0.7-2.5-1.9-3.2-4c-3.2,0-175.5,0-175.5,0 v91.8h225.8V150.2z"
67
- }), /*#__PURE__*/_react.default.createElement("path", {
68
64
  fill: theme.colors.marketing.lightOrange,
69
65
  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"
70
66
  }), /*#__PURE__*/_react.default.createElement("path", {
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@cloudflare/component-logo",
3
3
  "description": "Cloudflare Logo Component",
4
- "version": "3.10.3",
4
+ "version": "4.0.0",
5
5
  "main": "lib/index.js",
6
6
  "module": "es/index.js",
7
7
  "author": "Vojtech Miksu <vojtech@miksu.cz>",
@@ -11,8 +11,9 @@
11
11
  "access": "public"
12
12
  },
13
13
  "dependencies": {
14
- "@cloudflare/intl-react": "^1.8.111",
15
- "@cloudflare/style-container": "^7.3.54",
14
+ "@cloudflare/intl-react": "^1.8.112",
15
+ "@cloudflare/style-const": "^2.4.38",
16
+ "@cloudflare/style-container": "^7.3.55",
16
17
  "prop-types": "^15.6.0"
17
18
  },
18
19
  "peerDependencies": {
@@ -33,5 +34,5 @@
33
34
  "title": "Logo",
34
35
  "status": "active"
35
36
  },
36
- "gitHead": "a5fda8b17e6662527b9fb2f970048abb6eb11d9f"
37
+ "gitHead": "1e801a7ac1f15d9c14896523413211fd12ba83f5"
37
38
  }