@kiwicom/orbit-components
Version:
Orbit-components is a React component library which provides developers with the easiest possible way of building Kiwi.com’s products.
99 lines • 4.08 kB
JavaScript
import React from "react";
import styled, { css } from "styled-components";
import { convertHexToRgba } from "@kiwicom/orbit-design-tokens";
import { useTabs, useTab } from "../../TabContext";
import { TYPE_OPTIONS } from "./consts";
import defaultTheme from "../../../defaultTheme";
const getColorBackground = ({
type,
theme
}) => {
if (type === TYPE_OPTIONS.MEDIUM) return theme.orbit.backgroundColorTabBundleMedium;
if (type === TYPE_OPTIONS.BASIC) return theme.orbit.backgroundColorTabBundleBasic;
return theme.orbit.backgroundColorTabBundleTop;
};
const getBackgroundType = state => ({
theme,
$type
}) => {
if (state === "hover") {
if ($type === TYPE_OPTIONS.MEDIUM) return convertHexToRgba(theme.orbit.paletteBundleMedium, 8);
if ($type === TYPE_OPTIONS.BASIC) return convertHexToRgba(theme.orbit.paletteBundleBasic, 8);
return theme.orbit.paletteWhiteHover;
}
if (state === "active") {
if ($type === TYPE_OPTIONS.MEDIUM) return convertHexToRgba(theme.orbit.paletteBundleMedium, 12);
if ($type === TYPE_OPTIONS.BASIC) return convertHexToRgba(theme.orbit.paletteBundleBasic, 12);
return theme.orbit.paletteWhiteActive;
}
return "none";
};
const StyledTab = styled.button.withConfig({
displayName: "Tab__StyledTab",
componentId: "sc-1cv6n1m-0"
})(["", ";"], ({
theme,
active,
$type,
compact,
disabled
}) => css(["display:flex;border:0;flex:1;min-width:fit-content;position:relative;appearance:none;flex-direction:row;justify-content:space-between;box-sizing:border-box;align-items:center;font-family:", ";cursor:", ";opacity:", ";padding:", ";background:", ";font-weight:", ";line-height:", ";font-size:", ";border-radius:", " ", " 0 0;transition:background ", " ease-in-out;border-bottom-width:2px;border-style:solid;border-image-slice:1;border-image-source:", ";border-bottom-color:", ";&:hover{background:", ";}&:focus,&:active{background:", ";}"], theme.orbit.fontFamily, !disabled && "pointer", disabled && "0.5", compact ? "5px 16px" : "9px 16px", getBackgroundType(), theme.orbit.fontWeightMedium, compact ? theme.orbit.lineHeightTextNormal : theme.orbit.lineHeightTextLarge, compact ? theme.orbit.fontSizeTextNormal : theme.orbit.fontSizeTextLarge, theme.orbit.borderRadiusNormal, theme.orbit.borderRadiusNormal, theme.orbit.durationFast, !disabled && active && $type !== TYPE_OPTIONS.DEFAULT && getColorBackground({
type: $type,
theme
}), !disabled && active && $type === TYPE_OPTIONS.DEFAULT ? `${theme.orbit.paletteProductNormal}` : "transparent", !disabled && getBackgroundType("hover"), !disabled && getBackgroundType("active")));
StyledTab.defaultProps = {
theme: defaultTheme
};
const StyledTabText = styled.span.withConfig({
displayName: "Tab__StyledTabText",
componentId: "sc-1cv6n1m-1"
})(["", ";"], ({
theme,
type
}) => css(["color:", ";width:100%;", ";"], theme.orbit.paletteInkDark, type !== TYPE_OPTIONS.DEFAULT && css(["background:", ";-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;"], getColorBackground)));
StyledTabText.defaultProps = {
theme: defaultTheme
};
const Tab = ({
children,
dataTest,
active = false,
disabled,
onClick,
type = TYPE_OPTIONS.DEFAULT
}) => {
const {
setSelected,
selected,
onChange
} = useTabs();
const {
index,
compact
} = useTab();
const isSelected = active || selected === index;
React.useEffect(() => {
if (onChange && !onClick) onChange(selected);
if (onClick) setSelected(undefined);
}, [onChange, selected, setSelected]);
return /*#__PURE__*/React.createElement(StyledTab, {
"data-test": dataTest,
onClick: ev => {
if (onClick) {
onClick(ev);
} else setSelected(index);
},
type: "button",
disabled: disabled,
$type: type,
role: "tab",
"aria-selected": isSelected,
"aria-disabled": disabled,
"aria-controls": `panel-${index}`,
compact: compact,
active: isSelected
}, /*#__PURE__*/React.createElement(StyledTabText, {
type: type
}, children));
};
export default Tab;