@paprika/tabs 2.3.12-next.0 → 2.3.13-next.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.
|
@@ -62,12 +62,12 @@ function getHeightValue(height) {
|
|
|
62
62
|
|
|
63
63
|
var horizontalStyles = function horizontalStyles(_ref3) {
|
|
64
64
|
var tabHeight = _ref3.tabHeight;
|
|
65
|
-
return (0, _styledComponents.css)(["align-items:center;border-bottom:", " solid transparent;border-radius:", " ", " 0 0;display:inline-flex;height:", ";margin-
|
|
65
|
+
return (0, _styledComponents.css)(["align-items:center;border-bottom:", " solid transparent;border-radius:", " ", " 0 0;display:inline-flex;height:", ";margin-inline-end:", ";padding:", " ", " 0 ", ";&:last-child{margin-inline-end:0;}"], _tokens["default"].spaceSm, _tokens["default"].border.radius, _tokens["default"].border.radius, getHeightValue(tabHeight), _tokens["default"].space, _tokens["default"].spaceSm, _tokens["default"].space, _tokens["default"].space);
|
|
66
66
|
};
|
|
67
67
|
|
|
68
68
|
var verticalStyles = function verticalStyles(_ref4) {
|
|
69
69
|
var hasTruncation = _ref4.hasTruncation;
|
|
70
|
-
return (0, _styledComponents.css)(["border-
|
|
70
|
+
return (0, _styledComponents.css)(["border-inline-start:", " solid transparent;padding:", ";", " &:hover{background-color:", ";}"], _tokens["default"].spaceSm, _tokens["default"].spaceLg, hasTruncation ? (0, _styledComponents.css)(["display:block;", ";"], _stylers["default"].truncateText) : (0, _styledComponents.css)(["display:flex;"]), _tokens["default"].color.blackLighten70);
|
|
71
71
|
};
|
|
72
72
|
|
|
73
73
|
var baseStyles = function baseStyles(_ref5) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/Tab/Tab.styles.js"],"names":["types","kind","PRIMARY","SECONDARY","size","MEDIUM","LARGE","kindColor","tokens","color","blue","purple","fontSize","stylers","activeStyles","isVertical","css","textColor","link","blackLighten70","disabledStyles","hasInsetFocusStyle","blackDisabled","focusRing","subtle","getHeightValue","height","isNaN","horizontalStyles","tabHeight","spaceSm","border","radius","space","verticalStyles","hasTruncation","spaceLg","truncateText","baseStyles","isDisabled","isSelected","black","lineHeight","z","Tab","RawButton","Link","styled","a","highlight","active","withBorder","insetBoxShadow","boxShadow"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;;;;;AAEA,kBAA+BA,kBAAMC,IAArC;AAAA,IAAQC,OAAR,eAAQA,OAAR;AAAA,IAAiBC,SAAjB,eAAiBA,SAAjB;AACA,kBAA0BH,kBAAMI,IAAhC;AAAA,IAAQC,MAAR,eAAQA,MAAR;AAAA,IAAgBC,KAAhB,eAAgBA,KAAhB;AAEA,IAAMC,SAAS,kEACZL,OADY,EACFM,mBAAOC,KAAP,CAAaC,IADX,gDAEZP,SAFY,EAEAK,mBAAOC,KAAP,CAAaE,MAFb,cAAf;AAKA,IAAMC,QAAQ,gEACXP,MADW,EACFQ,oBAAQD,QAAR,CAAiB,CAAC,CAAlB,CADE,+CAEXN,KAFW,EAEHO,oBAAQD,QAAR,EAFG,aAAd;;AAKA,IAAME,YAAY,GAAG,SAAfA,YAAe;AAAA,MAAGC,UAAH,QAAGA,UAAH;AAAA,MAAed,IAAf,QAAeA,IAAf;AAAA,aAA0Be,qBAA1B,4DACVR,mBAAOS,SAAP,CAAiBC,IADP,EAKDX,SAAS,CAACN,IAAD,CALR,EAQjBc,UAAU,QACVC,qBADU,8BAEYR,mBAAOC,KAAP,CAAaU,cAFzB,CARO;AAAA,CAArB;;AAcA,IAAMC,cAAc,GAAG,SAAjBA,cAAiB;AAAA,MAAGC,kBAAH,SAAGA,kBAAH;AAAA,aAA4BL,qBAA5B,wFAIZR,mBAAOC,KAAP,CAAaa,aAJD,EAQjBT,oBAAQU,SAAR,CAAkBC,MAAlB,CAAyBH,kBAAzB,CARiB;AAAA,CAAvB;;AAYA,SAASI,cAAT,CAAwBC,MAAxB,EAAgC;AAC9B,MAAI,CAACA,MAAL,EAAa,OAAO,MAAP,CADiB,CAE9B;;AACA,SAAOC,KAAK,CAACD,MAAD,CAAL,GAAgBA,MAAhB,aAA4BA,MAA5B,OAAP;AACD;;AAED,IAAME,gBAAgB,GAAG,SAAnBA,gBAAmB;AAAA,MAAGC,SAAH,SAAGA,SAAH;AAAA,aAAmBb,qBAAnB,
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Tab/Tab.styles.js"],"names":["types","kind","PRIMARY","SECONDARY","size","MEDIUM","LARGE","kindColor","tokens","color","blue","purple","fontSize","stylers","activeStyles","isVertical","css","textColor","link","blackLighten70","disabledStyles","hasInsetFocusStyle","blackDisabled","focusRing","subtle","getHeightValue","height","isNaN","horizontalStyles","tabHeight","spaceSm","border","radius","space","verticalStyles","hasTruncation","spaceLg","truncateText","baseStyles","isDisabled","isSelected","black","lineHeight","z","Tab","RawButton","Link","styled","a","highlight","active","withBorder","insetBoxShadow","boxShadow"],"mappings":"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","sourcesContent":["import styled, { css } from \"styled-components\";\nimport RawButton from \"@paprika/raw-button\";\nimport tokens from \"@paprika/tokens\";\nimport stylers from \"@paprika/stylers\";\nimport types from \"../../types\";\n\nconst { PRIMARY, SECONDARY } = types.kind;\nconst { MEDIUM, LARGE } = types.size;\n\nconst kindColor = {\n [PRIMARY]: tokens.color.blue,\n [SECONDARY]: tokens.color.purple,\n};\n\nconst fontSize = {\n [MEDIUM]: stylers.fontSize(-1),\n [LARGE]: stylers.fontSize(),\n};\n\nconst activeStyles = ({ isVertical, kind }) => css`\n color: ${tokens.textColor.link};\n &,\n &:focus,\n &:hover {\n border-color: ${kindColor[kind]};\n }\n\n ${isVertical &&\n css`\n background-color: ${tokens.color.blackLighten70};\n `}\n`;\n\nconst disabledStyles = ({ hasInsetFocusStyle }) => css`\n &&& {\n border-bottom-color: transparent;\n }\n color: ${tokens.color.blackDisabled};\n cursor: not-allowed;\n\n &:focus {\n ${stylers.focusRing.subtle(hasInsetFocusStyle)}\n }\n`;\n\nfunction getHeightValue(height) {\n if (!height) return \"auto\";\n // eslint-disable-next-line no-restricted-globals\n return isNaN(height) ? height : `${height}px`;\n}\n\nconst horizontalStyles = ({ tabHeight }) => css`\n align-items: center;\n border-bottom: ${tokens.spaceSm} solid transparent;\n border-radius: ${tokens.border.radius} ${tokens.border.radius} 0 0;\n display: inline-flex;\n height: ${getHeightValue(tabHeight)};\n margin-inline-end: ${tokens.space};\n padding: ${tokens.spaceSm} ${tokens.space} 0 ${tokens.space};\n\n &:last-child {\n margin-inline-end: 0;\n }\n`;\n\nconst verticalStyles = ({ hasTruncation }) => css`\n border-inline-start: ${tokens.spaceSm} solid transparent;\n padding: ${tokens.spaceLg};\n\n ${hasTruncation\n ? css`\n display: block;\n ${stylers.truncateText};\n `\n : css`\n display: flex;\n `}\n\n &:hover {\n background-color: ${tokens.color.blackLighten70};\n }\n`;\n\nconst baseStyles = ({ isDisabled, isSelected, isVertical, size }) => css`\n border: 0;\n box-sizing: border-box;\n color: ${tokens.color.black};\n margin: 0;\n position: relative;\n transition: border-color 0.3s ease, background-color 0.3s ease;\n ${fontSize[size]}\n ${stylers.lineHeight(-2)}\n ${isVertical ? verticalStyles : horizontalStyles}\n\n &:hover, &:focus {\n border-color: ${tokens.border.color};\n }\n\n &:focus {\n ${stylers.z(1)}\n }\n\n ${isDisabled ? disabledStyles : null}\n ${isSelected ? activeStyles : null}\n`;\n\nexport const Tab = styled(RawButton)(baseStyles);\n\nexport const Link = styled.a(\n ({ hasInsetFocusStyle }) => css`\n ${baseStyles}\n text-decoration: none;\n\n &:focus {\n box-shadow: ${hasInsetFocusStyle\n ? tokens.highlight.active.withBorder.insetBoxShadow\n : tokens.highlight.active.withBorder.boxShadow};\n outline: none;\n }\n `\n);\n"],"file":"Tab.styles.js"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@paprika/tabs",
|
|
3
|
-
"version": "2.3.
|
|
3
|
+
"version": "2.3.13-next.0",
|
|
4
4
|
"description": "Tabs component displays tabs with panels associated with each tab",
|
|
5
5
|
"author": "@paprika",
|
|
6
6
|
"license": "MIT",
|
|
@@ -18,9 +18,9 @@
|
|
|
18
18
|
"@babel/runtime-corejs2": "^7.3.1",
|
|
19
19
|
"@paprika/constants": "^1.0.1",
|
|
20
20
|
"@paprika/helpers": "^2.4.2",
|
|
21
|
-
"@paprika/raw-button": "^1.0.
|
|
22
|
-
"@paprika/stylers": "^1.1.
|
|
23
|
-
"@paprika/tokens": "^3.1.0
|
|
21
|
+
"@paprika/raw-button": "^1.0.19-next.0",
|
|
22
|
+
"@paprika/stylers": "^1.1.12-next.0",
|
|
23
|
+
"@paprika/tokens": "^3.1.0",
|
|
24
24
|
"classnames": "^2.2.6",
|
|
25
25
|
"prop-types": "^15.7.2",
|
|
26
26
|
"uuid": "^8.3.2"
|