@procore/core-react
Version:
React library of Procore Design Guidelines
159 lines (147 loc) • 7.98 kB
JavaScript
import styled, { css } from 'styled-components';
import { Card } from '../Card';
import { StyledItem } from '../MenuImperative/MenuImperative.styles';
import { getTypographyIntent } from '../Typography';
import { colors } from '../_styles/colors';
import { spacing } from '../_styles/spacing';
var hiddenTab = /*#__PURE__*/css(["pointer-events:none;position:absolute;visibility:hidden;"]);
var visible = /*#__PURE__*/css(["pointer-events:all;position:relative;visibility:visible;"]);
var borderRadius = /*#__PURE__*/css(["border-radius:", "px ", "px 0 0;"], spacing.xs, spacing.xs);
//// START BASE LAYOUT COMPONENTS FOR TABS ////
/**
* Elements to handle general layout and browser resets.
* Will be the referencable element (class) other selectors
* that need to target general layout references.
*/
var StyledTabBase = /*#__PURE__*/styled.div.withConfig({
displayName: "StyledTabBase",
componentId: "core-12_44_0__sc-17s58xs-0"
})(["align-items:center;box-sizing:border-box;cursor:pointer;display:inline-flex;flex:0 0 auto;justify-content:center;position:relative;white-space:nowrap;text-decoration:none;background-color:transparent;border:none;font-family:inherit;padding:0;"]);
var StyledTabInnerBase = /*#__PURE__*/styled.div.withConfig({
displayName: "StyledTabInnerBase",
componentId: "core-12_44_0__sc-17s58xs-1"
})(["align-self:baseline;box-sizing:border-box;&,> a{display:flex;text-decoration:none;width:100%;}"]);
// This so that it can be visible/hidden via CSS down below
var StyledDropdownTabBase = /*#__PURE__*/styled(StyledTabBase).withConfig({
displayName: "StyledDropdownTabBase",
componentId: "core-12_44_0__sc-17s58xs-2"
})(["", ""], hiddenTab);
//// END BASE LAYOUT COMPONENTS FOR TABS ////
//// START TRADITIONAL DESIGN SYSTEM TAB STYLES ////
/**
* Styles specific to the Design System general cases (not Global nav)
*/
function getTabStyle() {
return css(["", ";height:26px;& + ", "{margin-left:", "px;}a&{", "}&,a&,button&{", "}&:focus-visible,&:hover{background:", ";}&:focus-visible{box-shadow:inset 0 0 0 2px ", ";outline:none;a{outline:none;}}"], borderRadius, StyledTabBase, spacing.xl, borderRadius, function (_ref) {
var $selected = _ref.$selected;
if ($selected) {
return css(["border-bottom:3px solid ", ";"], colors.gray15);
}
}, function (_ref2) {
var $dark = _ref2.$dark;
return $dark ? 'transparent' : colors.gray90;
}, colors.blue40);
}
var StyledTab = /*#__PURE__*/styled(StyledTabBase).withConfig({
displayName: "StyledTab",
componentId: "core-12_44_0__sc-17s58xs-3"
})(["", ""], getTabStyle);
var StyledTabInner = /*#__PURE__*/styled(StyledTabInnerBase).withConfig({
displayName: "StyledTabInner",
componentId: "core-12_44_0__sc-17s58xs-4"
})(["", " padding:0 ", "px;font-weight:", ";&,> a{", ";color:", ";height:23px;}& a:focus-visible{outline:2px solid ", ";outline-offset:-1px;border-radius:", "px;}", ""], getTypographyIntent('body'), spacing.xs, function (_ref3) {
var $selected = _ref3.$selected;
return $selected ? 600 : 400;
}, borderRadius, colors.gray15, colors.blue40, spacing.xs, function (_ref4) {
var $selected = _ref4.$selected,
$dark = _ref4.$dark;
if ($dark) {
return css(["&,> a,button&,a&{color:", ";&:hover{color:white;}}"], $selected ? colors.white : colors.gray70);
}
});
var StyledDropdownTab = /*#__PURE__*/styled(StyledDropdownTabBase).withConfig({
displayName: "StyledDropdownTab",
componentId: "core-12_44_0__sc-17s58xs-5"
})(["", ""], getTabStyle);
var StyledDropdownTabInner = /*#__PURE__*/styled(StyledTabInner).withConfig({
displayName: "StyledDropdownTabInner",
componentId: "core-12_44_0__sc-17s58xs-6"
})(["align-items:center;cursor:pointer;display:inline-flex;"]);
var StyledLink = /*#__PURE__*/styled.span.withConfig({
displayName: "StyledLink",
componentId: "core-12_44_0__sc-17s58xs-7"
})(["align-items:center;display:flex;height:23px;", ";box-sizing:border-box;"], borderRadius);
//// END TRADITIONAL DESIGN SYSTEM TAB STYLES ////
//// START HELIX GLOBAL NAVIGATION TAB STYLES ////
function getHelixHeaderTabStyles() {
return css(["border-radius:4px;color:", ";height:24px;overflow:hidden;padding:", "px;text-align:center;", ";font-weight:600;& + ", "{margin-left:", "px;}&:hover{background:rgba(117,131,138,0.3);color:", ";text-decoration:none;}&:focus-visible{outline:2px solid ", ";outline-offset:-2px;background:rgba(117,131,138,0.3);}", ""], colors.white, spacing.xs, getTypographyIntent('small'), StyledTabBase, spacing.sm, colors.white, colors.blue70, function (_ref5) {
var $selected = _ref5.$selected;
if ($selected) {
return css(["background:", ";"], colors.gray30);
}
});
}
var StyledGlobalNavigationTab = /*#__PURE__*/styled(StyledTabBase).withConfig({
displayName: "StyledGlobalNavigationTab",
componentId: "core-12_44_0__sc-17s58xs-8"
})(["", ""], getHelixHeaderTabStyles);
var StyledGlobalNavigationDropdownTab = /*#__PURE__*/styled(StyledDropdownTabBase).withConfig({
displayName: "StyledGlobalNavigationDropdownTab",
componentId: "core-12_44_0__sc-17s58xs-9"
})(["", ""], getHelixHeaderTabStyles);
var StyledGlobalNavigationDropdownTabInner = /*#__PURE__*/styled(StyledTabInnerBase).withConfig({
displayName: "StyledGlobalNavigationDropdownTabInner",
componentId: "core-12_44_0__sc-17s58xs-10"
})(["align-items:center;cursor:pointer;display:inline-flex;"]);
var StyledGlobalNavigationLink = /*#__PURE__*/styled.span.withConfig({
displayName: "StyledGlobalNavigationLink",
componentId: "core-12_44_0__sc-17s58xs-11"
})(["padding-left:6px;padding-right:6px;"]);
//// END HELIX GLOBAL NAVIGATION TAB STYLES ////
export var StyledOverlay = /*#__PURE__*/styled(Card).withConfig({
displayName: "StyledOverlay",
componentId: "core-12_44_0__sc-17s58xs-12"
})(["max-height:40vh;", "{padding:0;display:flex;justify-content:center;a{margin:unset;padding:unset;&:focus-visible{outline-offset:1px;}}}", "{padding:0;display:flex;}", "{padding:2px 16px 4px 16px;}", ",", "{color:", ";border-radius:0;display:flex;width:100%;background:inherit;font-weight:inherit;font-size:inherit;padding:0;}[data-selected='true']{", ",", "{border-bottom-color:transparent;color:", ";}}"], StyledItem, StyledLink, StyledTabInnerBase, StyledLink, StyledTabBase, colors.gray15, StyledLink, StyledTabBase, colors.blue50);
export var StyledTabList = /*#__PURE__*/styled.div.withConfig({
displayName: "StyledTabList",
componentId: "core-12_44_0__sc-17s58xs-13"
})(["display:flex;width:100%;"]);
export var StyledTabs = /*#__PURE__*/styled.div.withConfig({
displayName: "StyledTabs",
componentId: "core-12_44_0__sc-17s58xs-14"
})(["background-color:", ";display:flex;overflow:hidden;width:100%;", "{&:nth-child(1n + ", "){&:not(", "){", "}}}", ""], function (_ref6) {
var $dark = _ref6.$dark;
return $dark && colors.gray15;
}, StyledTabBase, function (_ref7) {
var $index = _ref7.$index;
return $index;
}, StyledDropdownTabBase, hiddenTab, function (_ref8) {
var _ref8$$index = _ref8.$index,
$index = _ref8$$index === void 0 ? -1 : _ref8$$index;
return $index >= 0 && css(["", "{", "}"], StyledDropdownTabBase, visible);
});
/**
* Switches between different Tab styles of traditional and helix header navigation.
* Allows separate style CSS without conditionals across all the components.
* @returns Subcomponents to render
*/
export function getStyledComponents() {
var helixHeader = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
if (helixHeader) {
return {
Tab: StyledGlobalNavigationTab,
TabInner: StyledTabInnerBase,
Link: StyledGlobalNavigationLink,
DropdownTab: StyledGlobalNavigationDropdownTab,
DropdownTabInner: StyledGlobalNavigationDropdownTabInner
};
}
return {
Tab: StyledTab,
TabInner: StyledTabInner,
Link: StyledLink,
DropdownTab: StyledDropdownTab,
DropdownTabInner: StyledDropdownTabInner
};
}
//# sourceMappingURL=Tabs.styles.js.map