@atlaskit/logo 13.5.0 → 13.5.4
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 +25 -0
- package/dist/cjs/AtlassianStartLogo/Logo.js +1 -1
- package/dist/cjs/Wrapper.js +64 -28
- package/dist/cjs/version.json +1 -1
- package/dist/es2019/AtlassianStartLogo/Logo.js +1 -4
- package/dist/es2019/Wrapper.js +62 -40
- package/dist/es2019/version.json +1 -1
- package/dist/esm/AtlassianStartLogo/Logo.js +1 -1
- package/dist/esm/Wrapper.js +64 -22
- package/dist/esm/version.json +1 -1
- package/dist/types/Wrapper.d.ts +7 -1
- package/dist/types/constants.d.ts +5 -1
- package/package.json +14 -9
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,30 @@
|
|
|
1
1
|
# @atlaskit/logo
|
|
2
2
|
|
|
3
|
+
## 13.5.4
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [`ec464e07b10`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ec464e07b10) - Fixes a bug where the Atlassian Start logo did not render correctly on Firefox
|
|
8
|
+
|
|
9
|
+
## 13.5.3
|
|
10
|
+
|
|
11
|
+
### Patch Changes
|
|
12
|
+
|
|
13
|
+
- [`af4bca32ad4`](https://bitbucket.org/atlassian/atlassian-frontend/commits/af4bca32ad4) - Internal changes to supress eslint rules.
|
|
14
|
+
- Updated dependencies
|
|
15
|
+
|
|
16
|
+
## 13.5.2
|
|
17
|
+
|
|
18
|
+
### Patch Changes
|
|
19
|
+
|
|
20
|
+
- [`545d363ca28`](https://bitbucket.org/atlassian/atlassian-frontend/commits/545d363ca28) - Convert usage of `styled-components` to `emotion`.
|
|
21
|
+
|
|
22
|
+
## 13.5.1
|
|
23
|
+
|
|
24
|
+
### Patch Changes
|
|
25
|
+
|
|
26
|
+
- [`378d1cef00f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/378d1cef00f) - Bump `@atlaskit/theme` to version `^11.3.0`.
|
|
27
|
+
|
|
3
28
|
## 13.5.0
|
|
4
29
|
|
|
5
30
|
### Minor Changes
|
|
@@ -47,7 +47,7 @@ var svg = function svg(iconGradientStart, iconGradientStop) {
|
|
|
47
47
|
var id = (0, _reactUid.uid)({
|
|
48
48
|
iconGradientStart: iconGradientStop
|
|
49
49
|
});
|
|
50
|
-
return "<canvas height=\"32\" width=\"270\" aria-hidden=\"true\"></canvas>\n<svg\n fill=\"none\"\n viewBox=\"0 0 270 32\"\n xmlns=\"http://www.w3.org/2000/svg\"\n focusable=\"false\"\n aria-hidden=\"true\"\n>\n <linearGradient\n id=\"".concat(id, "\"\n gradientUnits=\"userSpaceOnUse\"\n x1=\"9.85184\"\n x2=\"3.72154\"\n y1=\"13.0072\"\n y2=\"23.6252\"\n >\n <stop offset=\"0\" stop-color=\"").concat(iconGradientStart, "\" ").concat(iconGradientStart === 'inherit' ? 'stop-opacity="0.4"' : '', " />\n <stop offset=\"92%\" stop-color=\"").concat(iconGradientStop, "\" />\n </linearGradient>\n <
|
|
50
|
+
return "<canvas height=\"32\" width=\"270\" aria-hidden=\"true\"></canvas>\n<svg\n fill=\"none\"\n viewBox=\"0 0 270 32\"\n xmlns=\"http://www.w3.org/2000/svg\"\n focusable=\"false\"\n aria-hidden=\"true\"\n>\n <linearGradient\n id=\"".concat(id, "\"\n gradientUnits=\"userSpaceOnUse\"\n x1=\"9.85184\"\n x2=\"3.72154\"\n y1=\"13.0072\"\n y2=\"23.6252\"\n >\n <stop offset=\"0\" stop-color=\"").concat(iconGradientStart, "\" ").concat(iconGradientStart === 'inherit' ? 'stop-opacity="0.4"' : '', " />\n <stop offset=\"92%\" stop-color=\"").concat(iconGradientStop, "\" />\n </linearGradient>\n <g>\n <path\n d=\"m6.67038 11.2143c-.07074-.0921-.16397-.1644-.27073-.2099-.10676-.0456-.22345-.0629-.33885-.0503-.11539.0125-.22561.0546-.32004.1221s-.16989.1582-.21914.2633l-5.804641 11.6165c-.053275.1055-.07859.2229-.073521.3409.005069.1181.040351.2329.102472.3334.06212.1006.149001.1835.25232999.2409.10332901.0573.21965001.0872.33783401.0868h8.087846c.12984.0039.25797-.0303.36862-.0983.11064-.0681.19897-.167.25408-.2846 1.74286-3.6038.68711-9.0828-2.37626-12.3608z\"\n fill=\"url(#").concat(id, ")\"\n />\n <path\n fill=\"currentColor\"\n d=\"m10.9326.649949c-1.44794 2.227461-2.29174 4.793151-2.4486 7.445211-.15685 2.65204.37864 5.29934 1.5539 7.68194l3.8972 7.798c.0579.1154.1469.2124.2569.28.11.0677.2367.1033.3658.1029h8.0878c.1182.0004.2346-.0295.3379-.0868.1033-.0574.1902-.1403.2523-.2409.0621-.1005.0974-.2153.1025-.3334.0051-.118-.0203-.2355-.0735-.3409l-11.1513-22.309629c-.0537-.111145-.1377-.204841-.2424-.270285-.1047-.065443-.2257-.099968-.3492-.099594-.1234.000374-.2442.035633-.3485.101709-.1043.066077-.1878.16028-.2408.271748z\"\n />\n <g fill=\"").concat(iconGradientStart, "\">\n <path\n clip-rule=\"evenodd\"\n d=\"m139.715 18.207c0-3.4105-1.807-5.0102-6.906-6.1088-2.82-.6227-3.5-1.2454-3.5-2.14723 0-1.12729 1.009-1.60326 2.863-1.60326 2.251 0 4.477.68353 6.581 1.63189v-4.46263c-2.021-.92008-4.222-1.37618-6.442-1.33486-5.042 0-7.651 2.19374-7.651 5.78317 0 2.86292 1.335 5.15692 6.553 6.16612 3.113.6513 3.768 1.1559 3.768 2.1937s-.655 1.6605-2.863 1.6605c-2.651-.0477-5.249-.751-7.562-2.047v4.6881c1.575.7694 3.65 1.6283 7.515 1.6283 5.454 0 7.619-2.4299 7.619-6.048zm-25.788-6.1088c5.1 1.0987 6.911 2.6983 6.911 6.1088 0 3.6181-2.165 6.048-7.623 6.048-3.868 0-5.944-.8589-7.515-1.6283v-4.6881c2.309 1.2953 4.904 1.9986 7.551 2.047 2.212 0 2.863-.6227 2.863-1.6605s-.651-1.5424-3.765-2.1937c-5.213-1.0083-6.55-3.299-6.552-6.15828l-.015-.00783c0-3.58943 2.609-5.78317 7.652-5.78317 2.219-.04048 4.42.41558 6.441 1.33485v4.46263c-2.108-.94835-4.33-1.63188-6.585-1.63188-1.853 0-2.863.47597-2.863 1.60326 0 .90182.684 1.52452 3.5 2.14722zm61.966-7.61904v19.47884h4.151v-14.85517l1.75 3.94377 5.869 10.9114h5.221v-19.47884h-4.155v12.57194l-1.571-3.6467-4.713-8.92524zm-30.942 0h4.538v19.48244h-4.538zm-74.3973 19.47884v-19.47884h4.5664v15.27024h6.227l-1.4709 4.2086zm-18.4231-19.47884v4.20854h5.0388v15.2703h4.5664v-15.2703h5.3967v-4.20854zm-12.6077-.00716h5.9836l6.7888 19.4788h-5.1927l-.9627-3.2781c-2.3714.6969-4.8933.6969-7.2647 0l-.9627 3.2781h-5.1891zm.4867 12.3286c.8135.239 1.6572.3595 2.5051.3579v.0071c.8482-.001 1.6919-.124 2.5051-.365l-2.5051-8.50298zm55.9457-12.3286h-6.0015l-6.7995 19.4788h5.1891l.9627-3.2781c2.3725.6976 4.8957.6976 7.2683 0l.9627 3.2781h5.1889zm-2.9954 12.6936c-.8479.0017-1.6916-.1189-2.5051-.3578l2.5051-8.50302 2.5051 8.50302c-.8135.2388-1.6572.3594-2.5051.3578zm66.8931-12.6936h5.969l6.8 19.4788h-5.19l-.962-3.2781c-2.372.6969-4.894.6969-7.265 0l-.963 3.2781h-5.189zm.472 12.3286c.814.2384 1.657.3589 2.505.3579l.015.0071c.843-.0026 1.682-.1255 2.49-.365l-2.505-8.50298z\"\n fill-rule=\"evenodd\"\n />\n </g>\n <g fill=\"inherit\">\n <path\n clip-rule=\"evenodd\"\n d=\"m210.985 24.2765c-4.047 0-5.926-.7981-7.551-1.6247v-2.931c1.943 1.0199 4.939 1.75 7.709 1.75 3.152 0 4.333-1.2418 4.333-3.0884s-1.148-2.8164-5.131-3.7899c-4.714-1.1487-6.8-2.7734-6.8-6.21257 0-3.24945 2.487-5.67223 7.361-5.67223 3.024 0 4.968.71574 6.403 1.52811v2.86295c-1.997-1.10283-4.251-1.65375-6.531-1.5961-2.738 0-4.363.95909-4.363 2.86296 0 1.71778 1.339 2.58028 5.032 3.50358 4.427 1.1129 6.914 2.548 6.914 6.3056-.018 3.6467-2.183 6.1017-7.376 6.1017zm17.042-2.8987c.579-.0169 1.154-.0924 1.718-.2255v2.6447c-.6.1729-1.222.2585-1.847.254-3.407 0-5.064-2.004-5.064-4.9672v-8.5065h-2.58v-2.54807h2.58v-3.37829h2.674v3.37829h4.237v2.54807h-4.237v8.4421c0 1.4028.83 2.3584 2.519 2.3584zm10.017 2.8987c2.437 0 4.348-1.0844 5.368-3.1851l.014 2.8666h2.741v-15.92879h-2.741v2.80209c-.955-2.07203-2.738-3.12059-5.064-3.12059-4.462 0-6.692 3.78979-6.692 8.28109 0 4.6845 2.137 8.2847 6.374 8.2847zm5.368-7.6477c0 3.5358-2.197 5.0997-4.652 5.0997-2.835 0-4.363-1.9146-4.363-5.7438 0-3.6861 1.593-5.726 4.685-5.726 2.322 0 4.33 1.5604 4.33 5.0961zm9.555 7.3292h-2.688v-15.92878h2.674v2.80208c.926-1.87878 2.505-3.22079 5.64-3.02754v2.67684c-3.504-.3578-5.64.7158-5.64 4.0797zm16.025-2.8057c-.564.1328-1.141.2083-1.721.2255-1.689 0-2.516-.9556-2.516-2.3584v-8.4421h4.248v-2.54807h-4.237v-3.37829h-2.677v3.37829h-2.591v2.54807h2.58v8.5065c0 2.9632 1.657 4.9672 5.064 4.9672.626.0042 1.249-.0814 1.85-.254z\"\n fill-rule=\"evenodd\"\n />\n </g>\n </g>\n</svg>");
|
|
51
51
|
};
|
|
52
52
|
|
|
53
53
|
var AtlassianStartLogo = /*#__PURE__*/function (_Component) {
|
package/dist/cjs/Wrapper.js
CHANGED
|
@@ -2,8 +2,6 @@
|
|
|
2
2
|
|
|
3
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
4
|
|
|
5
|
-
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
6
|
-
|
|
7
5
|
Object.defineProperty(exports, "__esModule", {
|
|
8
6
|
value: true
|
|
9
7
|
});
|
|
@@ -11,44 +9,82 @@ exports.default = void 0;
|
|
|
11
9
|
|
|
12
10
|
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
13
11
|
|
|
14
|
-
var
|
|
12
|
+
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
15
13
|
|
|
16
|
-
var
|
|
14
|
+
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
|
17
15
|
|
|
18
|
-
var
|
|
16
|
+
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
19
17
|
|
|
20
|
-
var
|
|
18
|
+
var _core = require("@emotion/core");
|
|
21
19
|
|
|
22
20
|
var _constants = require("./constants");
|
|
23
21
|
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
22
|
+
/** @jsx jsx */
|
|
23
|
+
var CSS_VAR_COLOR = '--logo-color';
|
|
24
|
+
var CSS_VAR_FILL = '--logo-fill';
|
|
25
|
+
var baseWrapperStyles = (0, _core.css)({
|
|
26
|
+
display: 'inline-block',
|
|
27
|
+
position: 'relative',
|
|
28
|
+
color: "var(".concat(CSS_VAR_COLOR, ")"),
|
|
29
|
+
fill: "var(".concat(CSS_VAR_FILL, ")"),
|
|
30
|
+
userSelect: 'none',
|
|
31
|
+
// eslint-disable-next-line @repo/internal/styles/no-nested-styles
|
|
32
|
+
'> svg': {
|
|
33
|
+
width: '100%',
|
|
34
|
+
height: '100%',
|
|
35
|
+
position: 'absolute',
|
|
36
|
+
top: '0',
|
|
37
|
+
left: '0',
|
|
38
|
+
fill: 'inherit'
|
|
39
|
+
},
|
|
40
|
+
// eslint-disable-next-line @repo/internal/styles/no-nested-styles
|
|
41
|
+
'> canvas': {
|
|
42
|
+
display: 'block',
|
|
43
|
+
height: '100%',
|
|
44
|
+
visibility: 'hidden'
|
|
45
|
+
}
|
|
46
|
+
});
|
|
47
|
+
var stopColorStyles = (0, _core.css)({
|
|
48
|
+
// eslint-disable-next-line @repo/internal/styles/no-nested-styles
|
|
49
|
+
stop: {
|
|
50
|
+
stopColor: 'currentColor'
|
|
51
|
+
}
|
|
52
|
+
});
|
|
53
|
+
var sizeStyles = Object.entries(_constants.sizes).reduce(function (acc, _ref) {
|
|
54
|
+
var _ref2 = (0, _slicedToArray2.default)(_ref, 2),
|
|
55
|
+
key = _ref2[0],
|
|
56
|
+
val = _ref2[1];
|
|
27
57
|
|
|
28
|
-
|
|
58
|
+
acc[key] = (0, _core.css)({
|
|
59
|
+
height: "".concat(val, "px")
|
|
60
|
+
});
|
|
61
|
+
return acc;
|
|
62
|
+
}, {});
|
|
63
|
+
/**
|
|
64
|
+
* __Wrapper__
|
|
65
|
+
*
|
|
66
|
+
* An internal component used by `@atlaskit/logo` to render logo SVGs with correct styles.
|
|
67
|
+
*/
|
|
29
68
|
|
|
30
|
-
var
|
|
31
|
-
|
|
32
|
-
}, function (p) {
|
|
33
|
-
return p.textColor;
|
|
34
|
-
}, function (p) {
|
|
35
|
-
return p.size && _constants.sizes[p.size];
|
|
36
|
-
}, function (p) {
|
|
37
|
-
return (
|
|
38
|
-
/* Only apply this if our stop-colors are inherit, if they aren't we don't need to set stop-color via css */
|
|
39
|
-
p.iconGradientStart === 'inherit' && p.iconGradientStop === 'inherit' && (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n /* Stop-color doesn't properly apply in chrome when the inherited/current color changes.\n * We have to initially set stop-color to inherit (either via DOM attribute or an initial CSS\n * rule) and then override it with currentColor for the color changes to be picked up.\n */\n stop {\n stop-color: currentColor;\n }\n "])))
|
|
40
|
-
);
|
|
41
|
-
});
|
|
69
|
+
var Wrapper = function Wrapper(_ref3) {
|
|
70
|
+
var _ref4;
|
|
42
71
|
|
|
43
|
-
var
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
72
|
+
var label = _ref3.label,
|
|
73
|
+
svg = _ref3.svg,
|
|
74
|
+
iconGradientStart = _ref3.iconGradientStart,
|
|
75
|
+
iconGradientStop = _ref3.iconGradientStop,
|
|
76
|
+
size = _ref3.size,
|
|
77
|
+
iconColor = _ref3.iconColor,
|
|
78
|
+
textColor = _ref3.textColor,
|
|
79
|
+
rest = (0, _objectWithoutProperties2.default)(_ref3, ["label", "svg", "iconGradientStart", "iconGradientStop", "size", "iconColor", "textColor"]);
|
|
80
|
+
var shouldApplyStopColor = iconGradientStart === 'inherit' && iconGradientStop === 'inherit';
|
|
81
|
+
return (0, _core.jsx)("span", (0, _extends2.default)({
|
|
82
|
+
css: [baseWrapperStyles, shouldApplyStopColor && stopColorStyles, size && sizeStyles[size]],
|
|
83
|
+
style: (_ref4 = {}, (0, _defineProperty2.default)(_ref4, CSS_VAR_COLOR, iconColor), (0, _defineProperty2.default)(_ref4, CSS_VAR_FILL, textColor), _ref4),
|
|
48
84
|
"aria-label": label ? label : undefined,
|
|
49
85
|
role: label ? 'img' : 'presentation',
|
|
50
86
|
dangerouslySetInnerHTML: {
|
|
51
|
-
__html: typeof svg === 'function' ? svg(String(
|
|
87
|
+
__html: typeof svg === 'function' ? svg(String(iconGradientStart), String(iconGradientStop)) : svg
|
|
52
88
|
}
|
|
53
89
|
}, rest));
|
|
54
90
|
};
|
package/dist/cjs/version.json
CHANGED
|
@@ -28,10 +28,7 @@ const svg = (iconGradientStart, iconGradientStop) => {
|
|
|
28
28
|
<stop offset="0" stop-color="${iconGradientStart}" ${iconGradientStart === 'inherit' ? 'stop-opacity="0.4"' : ''} />
|
|
29
29
|
<stop offset="92%" stop-color="${iconGradientStop}" />
|
|
30
30
|
</linearGradient>
|
|
31
|
-
<
|
|
32
|
-
<path d="m0 0h270v32h-270z" />
|
|
33
|
-
</clipPath>
|
|
34
|
-
<g clip-path="url(#${id})">
|
|
31
|
+
<g>
|
|
35
32
|
<path
|
|
36
33
|
d="m6.67038 11.2143c-.07074-.0921-.16397-.1644-.27073-.2099-.10676-.0456-.22345-.0629-.33885-.0503-.11539.0125-.22561.0546-.32004.1221s-.16989.1582-.21914.2633l-5.804641 11.6165c-.053275.1055-.07859.2229-.073521.3409.005069.1181.040351.2329.102472.3334.06212.1006.149001.1835.25232999.2409.10332901.0573.21965001.0872.33783401.0868h8.087846c.12984.0039.25797-.0303.36862-.0983.11064-.0681.19897-.167.25408-.2846 1.74286-3.6038.68711-9.0828-2.37626-12.3608z"
|
|
37
34
|
fill="url(#${id})"
|
package/dist/es2019/Wrapper.js
CHANGED
|
@@ -1,51 +1,73 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/extends";
|
|
2
|
-
import React from 'react';
|
|
3
|
-
import styled, { css } from 'styled-components';
|
|
4
|
-
import { sizes } from './constants';
|
|
5
|
-
const Span = styled.span`
|
|
6
|
-
color: ${p => p.iconColor};
|
|
7
|
-
display: inline-block;
|
|
8
|
-
fill: ${p => p.textColor};
|
|
9
|
-
height: ${p => p.size && sizes[p.size]}px;
|
|
10
|
-
position: relative;
|
|
11
|
-
user-select: none;
|
|
12
2
|
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
3
|
+
/** @jsx jsx */
|
|
4
|
+
import { css, jsx } from '@emotion/core';
|
|
5
|
+
import { sizes } from './constants';
|
|
6
|
+
const CSS_VAR_COLOR = '--logo-color';
|
|
7
|
+
const CSS_VAR_FILL = '--logo-fill';
|
|
8
|
+
const baseWrapperStyles = css({
|
|
9
|
+
display: 'inline-block',
|
|
10
|
+
position: 'relative',
|
|
11
|
+
color: `var(${CSS_VAR_COLOR})`,
|
|
12
|
+
fill: `var(${CSS_VAR_FILL})`,
|
|
13
|
+
userSelect: 'none',
|
|
14
|
+
// eslint-disable-next-line @repo/internal/styles/no-nested-styles
|
|
15
|
+
'> svg': {
|
|
16
|
+
width: '100%',
|
|
17
|
+
height: '100%',
|
|
18
|
+
position: 'absolute',
|
|
19
|
+
top: '0',
|
|
20
|
+
left: '0',
|
|
21
|
+
fill: 'inherit'
|
|
22
|
+
},
|
|
23
|
+
// eslint-disable-next-line @repo/internal/styles/no-nested-styles
|
|
24
|
+
'> canvas': {
|
|
25
|
+
display: 'block',
|
|
26
|
+
height: '100%',
|
|
27
|
+
visibility: 'hidden'
|
|
20
28
|
}
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
29
|
+
});
|
|
30
|
+
const stopColorStyles = css({
|
|
31
|
+
// eslint-disable-next-line @repo/internal/styles/no-nested-styles
|
|
32
|
+
stop: {
|
|
33
|
+
stopColor: 'currentColor'
|
|
25
34
|
}
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
35
|
+
});
|
|
36
|
+
const sizeStyles = Object.entries(sizes).reduce((acc, [key, val]) => {
|
|
37
|
+
acc[key] = css({
|
|
38
|
+
height: `${val}px`
|
|
39
|
+
});
|
|
40
|
+
return acc;
|
|
41
|
+
}, {});
|
|
42
|
+
/**
|
|
43
|
+
* __Wrapper__
|
|
44
|
+
*
|
|
45
|
+
* An internal component used by `@atlaskit/logo` to render logo SVGs with correct styles.
|
|
46
|
+
*/
|
|
38
47
|
|
|
39
48
|
const Wrapper = ({
|
|
40
49
|
label,
|
|
41
50
|
svg,
|
|
51
|
+
iconGradientStart,
|
|
52
|
+
iconGradientStop,
|
|
53
|
+
size,
|
|
54
|
+
iconColor,
|
|
55
|
+
textColor,
|
|
42
56
|
...rest
|
|
43
|
-
}) =>
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
57
|
+
}) => {
|
|
58
|
+
const shouldApplyStopColor = iconGradientStart === 'inherit' && iconGradientStop === 'inherit';
|
|
59
|
+
return jsx("span", _extends({
|
|
60
|
+
css: [baseWrapperStyles, shouldApplyStopColor && stopColorStyles, size && sizeStyles[size]],
|
|
61
|
+
style: {
|
|
62
|
+
[CSS_VAR_COLOR]: iconColor,
|
|
63
|
+
[CSS_VAR_FILL]: textColor
|
|
64
|
+
},
|
|
65
|
+
"aria-label": label ? label : undefined,
|
|
66
|
+
role: label ? 'img' : 'presentation',
|
|
67
|
+
dangerouslySetInnerHTML: {
|
|
68
|
+
__html: typeof svg === 'function' ? svg(String(iconGradientStart), String(iconGradientStop)) : svg
|
|
69
|
+
}
|
|
70
|
+
}, rest));
|
|
71
|
+
};
|
|
50
72
|
|
|
51
73
|
export default Wrapper;
|
package/dist/es2019/version.json
CHANGED
|
@@ -23,7 +23,7 @@ var svg = function svg(iconGradientStart, iconGradientStop) {
|
|
|
23
23
|
var id = uid({
|
|
24
24
|
iconGradientStart: iconGradientStop
|
|
25
25
|
});
|
|
26
|
-
return "<canvas height=\"32\" width=\"270\" aria-hidden=\"true\"></canvas>\n<svg\n fill=\"none\"\n viewBox=\"0 0 270 32\"\n xmlns=\"http://www.w3.org/2000/svg\"\n focusable=\"false\"\n aria-hidden=\"true\"\n>\n <linearGradient\n id=\"".concat(id, "\"\n gradientUnits=\"userSpaceOnUse\"\n x1=\"9.85184\"\n x2=\"3.72154\"\n y1=\"13.0072\"\n y2=\"23.6252\"\n >\n <stop offset=\"0\" stop-color=\"").concat(iconGradientStart, "\" ").concat(iconGradientStart === 'inherit' ? 'stop-opacity="0.4"' : '', " />\n <stop offset=\"92%\" stop-color=\"").concat(iconGradientStop, "\" />\n </linearGradient>\n <
|
|
26
|
+
return "<canvas height=\"32\" width=\"270\" aria-hidden=\"true\"></canvas>\n<svg\n fill=\"none\"\n viewBox=\"0 0 270 32\"\n xmlns=\"http://www.w3.org/2000/svg\"\n focusable=\"false\"\n aria-hidden=\"true\"\n>\n <linearGradient\n id=\"".concat(id, "\"\n gradientUnits=\"userSpaceOnUse\"\n x1=\"9.85184\"\n x2=\"3.72154\"\n y1=\"13.0072\"\n y2=\"23.6252\"\n >\n <stop offset=\"0\" stop-color=\"").concat(iconGradientStart, "\" ").concat(iconGradientStart === 'inherit' ? 'stop-opacity="0.4"' : '', " />\n <stop offset=\"92%\" stop-color=\"").concat(iconGradientStop, "\" />\n </linearGradient>\n <g>\n <path\n d=\"m6.67038 11.2143c-.07074-.0921-.16397-.1644-.27073-.2099-.10676-.0456-.22345-.0629-.33885-.0503-.11539.0125-.22561.0546-.32004.1221s-.16989.1582-.21914.2633l-5.804641 11.6165c-.053275.1055-.07859.2229-.073521.3409.005069.1181.040351.2329.102472.3334.06212.1006.149001.1835.25232999.2409.10332901.0573.21965001.0872.33783401.0868h8.087846c.12984.0039.25797-.0303.36862-.0983.11064-.0681.19897-.167.25408-.2846 1.74286-3.6038.68711-9.0828-2.37626-12.3608z\"\n fill=\"url(#").concat(id, ")\"\n />\n <path\n fill=\"currentColor\"\n d=\"m10.9326.649949c-1.44794 2.227461-2.29174 4.793151-2.4486 7.445211-.15685 2.65204.37864 5.29934 1.5539 7.68194l3.8972 7.798c.0579.1154.1469.2124.2569.28.11.0677.2367.1033.3658.1029h8.0878c.1182.0004.2346-.0295.3379-.0868.1033-.0574.1902-.1403.2523-.2409.0621-.1005.0974-.2153.1025-.3334.0051-.118-.0203-.2355-.0735-.3409l-11.1513-22.309629c-.0537-.111145-.1377-.204841-.2424-.270285-.1047-.065443-.2257-.099968-.3492-.099594-.1234.000374-.2442.035633-.3485.101709-.1043.066077-.1878.16028-.2408.271748z\"\n />\n <g fill=\"").concat(iconGradientStart, "\">\n <path\n clip-rule=\"evenodd\"\n d=\"m139.715 18.207c0-3.4105-1.807-5.0102-6.906-6.1088-2.82-.6227-3.5-1.2454-3.5-2.14723 0-1.12729 1.009-1.60326 2.863-1.60326 2.251 0 4.477.68353 6.581 1.63189v-4.46263c-2.021-.92008-4.222-1.37618-6.442-1.33486-5.042 0-7.651 2.19374-7.651 5.78317 0 2.86292 1.335 5.15692 6.553 6.16612 3.113.6513 3.768 1.1559 3.768 2.1937s-.655 1.6605-2.863 1.6605c-2.651-.0477-5.249-.751-7.562-2.047v4.6881c1.575.7694 3.65 1.6283 7.515 1.6283 5.454 0 7.619-2.4299 7.619-6.048zm-25.788-6.1088c5.1 1.0987 6.911 2.6983 6.911 6.1088 0 3.6181-2.165 6.048-7.623 6.048-3.868 0-5.944-.8589-7.515-1.6283v-4.6881c2.309 1.2953 4.904 1.9986 7.551 2.047 2.212 0 2.863-.6227 2.863-1.6605s-.651-1.5424-3.765-2.1937c-5.213-1.0083-6.55-3.299-6.552-6.15828l-.015-.00783c0-3.58943 2.609-5.78317 7.652-5.78317 2.219-.04048 4.42.41558 6.441 1.33485v4.46263c-2.108-.94835-4.33-1.63188-6.585-1.63188-1.853 0-2.863.47597-2.863 1.60326 0 .90182.684 1.52452 3.5 2.14722zm61.966-7.61904v19.47884h4.151v-14.85517l1.75 3.94377 5.869 10.9114h5.221v-19.47884h-4.155v12.57194l-1.571-3.6467-4.713-8.92524zm-30.942 0h4.538v19.48244h-4.538zm-74.3973 19.47884v-19.47884h4.5664v15.27024h6.227l-1.4709 4.2086zm-18.4231-19.47884v4.20854h5.0388v15.2703h4.5664v-15.2703h5.3967v-4.20854zm-12.6077-.00716h5.9836l6.7888 19.4788h-5.1927l-.9627-3.2781c-2.3714.6969-4.8933.6969-7.2647 0l-.9627 3.2781h-5.1891zm.4867 12.3286c.8135.239 1.6572.3595 2.5051.3579v.0071c.8482-.001 1.6919-.124 2.5051-.365l-2.5051-8.50298zm55.9457-12.3286h-6.0015l-6.7995 19.4788h5.1891l.9627-3.2781c2.3725.6976 4.8957.6976 7.2683 0l.9627 3.2781h5.1889zm-2.9954 12.6936c-.8479.0017-1.6916-.1189-2.5051-.3578l2.5051-8.50302 2.5051 8.50302c-.8135.2388-1.6572.3594-2.5051.3578zm66.8931-12.6936h5.969l6.8 19.4788h-5.19l-.962-3.2781c-2.372.6969-4.894.6969-7.265 0l-.963 3.2781h-5.189zm.472 12.3286c.814.2384 1.657.3589 2.505.3579l.015.0071c.843-.0026 1.682-.1255 2.49-.365l-2.505-8.50298z\"\n fill-rule=\"evenodd\"\n />\n </g>\n <g fill=\"inherit\">\n <path\n clip-rule=\"evenodd\"\n d=\"m210.985 24.2765c-4.047 0-5.926-.7981-7.551-1.6247v-2.931c1.943 1.0199 4.939 1.75 7.709 1.75 3.152 0 4.333-1.2418 4.333-3.0884s-1.148-2.8164-5.131-3.7899c-4.714-1.1487-6.8-2.7734-6.8-6.21257 0-3.24945 2.487-5.67223 7.361-5.67223 3.024 0 4.968.71574 6.403 1.52811v2.86295c-1.997-1.10283-4.251-1.65375-6.531-1.5961-2.738 0-4.363.95909-4.363 2.86296 0 1.71778 1.339 2.58028 5.032 3.50358 4.427 1.1129 6.914 2.548 6.914 6.3056-.018 3.6467-2.183 6.1017-7.376 6.1017zm17.042-2.8987c.579-.0169 1.154-.0924 1.718-.2255v2.6447c-.6.1729-1.222.2585-1.847.254-3.407 0-5.064-2.004-5.064-4.9672v-8.5065h-2.58v-2.54807h2.58v-3.37829h2.674v3.37829h4.237v2.54807h-4.237v8.4421c0 1.4028.83 2.3584 2.519 2.3584zm10.017 2.8987c2.437 0 4.348-1.0844 5.368-3.1851l.014 2.8666h2.741v-15.92879h-2.741v2.80209c-.955-2.07203-2.738-3.12059-5.064-3.12059-4.462 0-6.692 3.78979-6.692 8.28109 0 4.6845 2.137 8.2847 6.374 8.2847zm5.368-7.6477c0 3.5358-2.197 5.0997-4.652 5.0997-2.835 0-4.363-1.9146-4.363-5.7438 0-3.6861 1.593-5.726 4.685-5.726 2.322 0 4.33 1.5604 4.33 5.0961zm9.555 7.3292h-2.688v-15.92878h2.674v2.80208c.926-1.87878 2.505-3.22079 5.64-3.02754v2.67684c-3.504-.3578-5.64.7158-5.64 4.0797zm16.025-2.8057c-.564.1328-1.141.2083-1.721.2255-1.689 0-2.516-.9556-2.516-2.3584v-8.4421h4.248v-2.54807h-4.237v-3.37829h-2.677v3.37829h-2.591v2.54807h2.58v8.5065c0 2.9632 1.657 4.9672 5.064 4.9672.626.0042 1.249-.0814 1.85-.254z\"\n fill-rule=\"evenodd\"\n />\n </g>\n </g>\n</svg>");
|
|
27
27
|
};
|
|
28
28
|
|
|
29
29
|
export var AtlassianStartLogo = /*#__PURE__*/function (_Component) {
|
package/dist/esm/Wrapper.js
CHANGED
|
@@ -1,35 +1,77 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/extends";
|
|
2
|
+
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
2
3
|
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
|
3
|
-
import
|
|
4
|
+
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
4
5
|
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
import React from 'react';
|
|
8
|
-
import styled, { css } from 'styled-components';
|
|
6
|
+
/** @jsx jsx */
|
|
7
|
+
import { css, jsx } from '@emotion/core';
|
|
9
8
|
import { sizes } from './constants';
|
|
10
|
-
var
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
9
|
+
var CSS_VAR_COLOR = '--logo-color';
|
|
10
|
+
var CSS_VAR_FILL = '--logo-fill';
|
|
11
|
+
var baseWrapperStyles = css({
|
|
12
|
+
display: 'inline-block',
|
|
13
|
+
position: 'relative',
|
|
14
|
+
color: "var(".concat(CSS_VAR_COLOR, ")"),
|
|
15
|
+
fill: "var(".concat(CSS_VAR_FILL, ")"),
|
|
16
|
+
userSelect: 'none',
|
|
17
|
+
// eslint-disable-next-line @repo/internal/styles/no-nested-styles
|
|
18
|
+
'> svg': {
|
|
19
|
+
width: '100%',
|
|
20
|
+
height: '100%',
|
|
21
|
+
position: 'absolute',
|
|
22
|
+
top: '0',
|
|
23
|
+
left: '0',
|
|
24
|
+
fill: 'inherit'
|
|
25
|
+
},
|
|
26
|
+
// eslint-disable-next-line @repo/internal/styles/no-nested-styles
|
|
27
|
+
'> canvas': {
|
|
28
|
+
display: 'block',
|
|
29
|
+
height: '100%',
|
|
30
|
+
visibility: 'hidden'
|
|
31
|
+
}
|
|
32
|
+
});
|
|
33
|
+
var stopColorStyles = css({
|
|
34
|
+
// eslint-disable-next-line @repo/internal/styles/no-nested-styles
|
|
35
|
+
stop: {
|
|
36
|
+
stopColor: 'currentColor'
|
|
37
|
+
}
|
|
21
38
|
});
|
|
39
|
+
var sizeStyles = Object.entries(sizes).reduce(function (acc, _ref) {
|
|
40
|
+
var _ref2 = _slicedToArray(_ref, 2),
|
|
41
|
+
key = _ref2[0],
|
|
42
|
+
val = _ref2[1];
|
|
43
|
+
|
|
44
|
+
acc[key] = css({
|
|
45
|
+
height: "".concat(val, "px")
|
|
46
|
+
});
|
|
47
|
+
return acc;
|
|
48
|
+
}, {});
|
|
49
|
+
/**
|
|
50
|
+
* __Wrapper__
|
|
51
|
+
*
|
|
52
|
+
* An internal component used by `@atlaskit/logo` to render logo SVGs with correct styles.
|
|
53
|
+
*/
|
|
54
|
+
|
|
55
|
+
var Wrapper = function Wrapper(_ref3) {
|
|
56
|
+
var _ref4;
|
|
22
57
|
|
|
23
|
-
var
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
58
|
+
var label = _ref3.label,
|
|
59
|
+
svg = _ref3.svg,
|
|
60
|
+
iconGradientStart = _ref3.iconGradientStart,
|
|
61
|
+
iconGradientStop = _ref3.iconGradientStop,
|
|
62
|
+
size = _ref3.size,
|
|
63
|
+
iconColor = _ref3.iconColor,
|
|
64
|
+
textColor = _ref3.textColor,
|
|
65
|
+
rest = _objectWithoutProperties(_ref3, ["label", "svg", "iconGradientStart", "iconGradientStop", "size", "iconColor", "textColor"]);
|
|
27
66
|
|
|
28
|
-
|
|
67
|
+
var shouldApplyStopColor = iconGradientStart === 'inherit' && iconGradientStop === 'inherit';
|
|
68
|
+
return jsx("span", _extends({
|
|
69
|
+
css: [baseWrapperStyles, shouldApplyStopColor && stopColorStyles, size && sizeStyles[size]],
|
|
70
|
+
style: (_ref4 = {}, _defineProperty(_ref4, CSS_VAR_COLOR, iconColor), _defineProperty(_ref4, CSS_VAR_FILL, textColor), _ref4),
|
|
29
71
|
"aria-label": label ? label : undefined,
|
|
30
72
|
role: label ? 'img' : 'presentation',
|
|
31
73
|
dangerouslySetInnerHTML: {
|
|
32
|
-
__html: typeof svg === 'function' ? svg(String(
|
|
74
|
+
__html: typeof svg === 'function' ? svg(String(iconGradientStart), String(iconGradientStop)) : svg
|
|
33
75
|
}
|
|
34
76
|
}, rest));
|
|
35
77
|
};
|
package/dist/esm/version.json
CHANGED
package/dist/types/Wrapper.d.ts
CHANGED
|
@@ -1,3 +1,9 @@
|
|
|
1
|
+
/** @jsx jsx */
|
|
1
2
|
import { WrapperProps } from './constants';
|
|
2
|
-
|
|
3
|
+
/**
|
|
4
|
+
* __Wrapper__
|
|
5
|
+
*
|
|
6
|
+
* An internal component used by `@atlaskit/logo` to render logo SVGs with correct styles.
|
|
7
|
+
*/
|
|
8
|
+
declare const Wrapper: ({ label, svg, iconGradientStart, iconGradientStop, size, iconColor, textColor, ...rest }: WrapperProps) => JSX.Element;
|
|
3
9
|
export default Wrapper;
|
|
@@ -18,5 +18,9 @@ export declare type WrapperProps = Props & {
|
|
|
18
18
|
svg: string | ((a: string, b: string) => string);
|
|
19
19
|
};
|
|
20
20
|
export declare const sizes: {
|
|
21
|
-
|
|
21
|
+
readonly xsmall: 16;
|
|
22
|
+
readonly small: 24;
|
|
23
|
+
readonly medium: 32;
|
|
24
|
+
readonly large: 40;
|
|
25
|
+
readonly xlarge: 48;
|
|
22
26
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/logo",
|
|
3
|
-
"version": "13.5.
|
|
3
|
+
"version": "13.5.4",
|
|
4
4
|
"description": "A logo is a visual representation of a brand or product. It can be a word or an image, or a combination of both.",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -41,33 +41,38 @@
|
|
|
41
41
|
".": "./src/index.ts"
|
|
42
42
|
},
|
|
43
43
|
"dependencies": {
|
|
44
|
-
"@atlaskit/ds-lib": "^1.
|
|
44
|
+
"@atlaskit/ds-lib": "^1.3.0",
|
|
45
45
|
"@babel/runtime": "^7.0.0",
|
|
46
|
+
"@emotion/core": "^10.0.9",
|
|
46
47
|
"react-uid": "^2.2.0"
|
|
47
48
|
},
|
|
48
49
|
"peerDependencies": {
|
|
49
|
-
"react": "^16.8.0"
|
|
50
|
-
"styled-components": "^3.2.6"
|
|
50
|
+
"react": "^16.8.0"
|
|
51
51
|
},
|
|
52
52
|
"devDependencies": {
|
|
53
53
|
"@atlaskit/build-utils": "*",
|
|
54
|
-
"@atlaskit/button": "^
|
|
55
|
-
"@atlaskit/code": "^14.
|
|
54
|
+
"@atlaskit/button": "^16.1.0",
|
|
55
|
+
"@atlaskit/code": "^14.3.0",
|
|
56
56
|
"@atlaskit/docs": "*",
|
|
57
|
-
"@atlaskit/
|
|
57
|
+
"@atlaskit/section-message": "^6.1.0",
|
|
58
58
|
"@atlaskit/select": "^15.0.0",
|
|
59
59
|
"@atlaskit/ssr": "*",
|
|
60
|
-
"@atlaskit/theme": "^
|
|
60
|
+
"@atlaskit/theme": "^12.0.0",
|
|
61
61
|
"@atlaskit/visual-regression": "*",
|
|
62
62
|
"@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
|
|
63
63
|
"@testing-library/react": "^8.0.1",
|
|
64
|
-
"jscodeshift": "^0.
|
|
64
|
+
"jscodeshift": "^0.13.0",
|
|
65
65
|
"react-dom": "^16.8.0",
|
|
66
66
|
"typescript": "3.9.6"
|
|
67
67
|
},
|
|
68
68
|
"techstack": {
|
|
69
69
|
"@atlassian/frontend": {
|
|
70
70
|
"import-structure": "atlassian-conventions"
|
|
71
|
+
},
|
|
72
|
+
"@repo/internal": {
|
|
73
|
+
"analytics": "analytics-next",
|
|
74
|
+
"theming": "react-context",
|
|
75
|
+
"styling": "emotion"
|
|
71
76
|
}
|
|
72
77
|
},
|
|
73
78
|
"homepage": "https://atlassian.design/components/logo/",
|