@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.
73 lines • 2.46 kB
JavaScript
import * as React from "react";
import styled, { css } from "styled-components";
import { left, rtlSpacing } from "../utils/rtl";
import mq from "../utils/mediaQuery";
import { StyledTextLink } from "../TextLink";
import defaultTheme from "../defaultTheme";
import { SPACINGS } from "../utils/layout/consts";
import getSpacing from "../Stack/helpers/getSpacing";
import getDirectionSpacingTemplate from "../Stack/helpers/getDirectionSpacingTemplate";
const StyledLinkList = styled.ul.withConfig({
displayName: "LinkList__StyledLinkList",
componentId: "sc-1rx425d-0"
})(["", ";"], ({
$indent,
$direction,
theme,
$legacy,
$spacing
}) => css(["display:flex;flex-direction:", ";width:100%;margin:0;gap:", ";padding:0;padding-", ":", ";list-style:none;font-size:", ";"], $direction, !$legacy && $spacing && getSpacing(theme)[$spacing], left, $indent && theme.orbit.spaceXXSmall, theme.orbit.fontSizeTextNormal));
StyledLinkList.defaultProps = {
theme: defaultTheme
};
const resolveSpacings = ({
$legacy,
$direction,
theme,
$spacing
}) => {
const margin = $spacing && $direction && String(getDirectionSpacingTemplate($direction)).replace("__spacing__", getSpacing(theme)[$spacing]);
if (!$legacy) return null;
return css(["margin:", ";&:last-child{margin:0;}"], margin && rtlSpacing(margin));
};
const StyledNavigationLinkListChild = styled.li.withConfig({
displayName: "LinkList__StyledNavigationLinkListChild",
componentId: "sc-1rx425d-1"
})(["", ""], ({
$direction,
$spacing,
$legacy,
theme
}) => css(["", "{text-decoration:none;}", ";", ";"], StyledTextLink, resolveSpacings({
$direction,
$spacing,
$legacy,
theme
}), $direction === "column" && css(["width:100%;", "{width:100%;", ";}"], StyledTextLink, mq.tablet(css(["width:auto;"])))));
StyledNavigationLinkListChild.defaultProps = {
theme: defaultTheme
};
const LinkList = ({
direction = "column",
indent,
legacy = false,
spacing = SPACINGS.MEDIUM,
children,
dataTest
}) => /*#__PURE__*/React.createElement(StyledLinkList, {
$indent: indent,
$direction: direction,
"data-test": dataTest,
$legacy: legacy,
$spacing: spacing
}, React.Children.map(children, item => {
if ( /*#__PURE__*/React.isValidElement(item)) {
return /*#__PURE__*/React.createElement(StyledNavigationLinkListChild, {
$direction: direction,
$spacing: spacing,
$legacy: legacy
}, item);
}
return null;
}));
export default LinkList;