Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 | 2x 2x 2x 2x 2x 2x 2x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 2x 2x 2x 2x 4x | import React from "react";
import {
SideBarGroupProps,
SideBarGroupStyleProps,
} from "./SideBarGroup.types";
import styled from "styled-components";
import Text from "../../Text/Text";
import Link from "../../Link/Link";
import { useTheme } from "../../ThemeProvider/ThemeProvider";
import { getColorPalette } from "../../../helpers/helpers";
import colorTokens from "../../../tokens/colors.json";
const SideBarGroup = ({
children,
className,
style,
title,
leadingIcon,
trailingIcon,
size,
selected,
color = colorTokens.default.primary.main,
// Events
onClick,
"data-testid": dataTestId,
...props
}: SideBarGroupProps) => {
const theme = useTheme().theme;
const colorPalette = getColorPalette(theme, color);
return (
<StyledSideBarGroup
className={className}
style={style}
data-testid={dataTestId}
{...props}
>
{(title || leadingIcon || trailingIcon) && (
<StyledSideBarGroupHeader $colorPalette={colorPalette} $color={color}>
{leadingIcon && <span>{leadingIcon}</span>}
{title && typeof title === "string" ? (
onClick ? (
<Link
size={size}
variant="hover"
preciseColor={
selected
? colorPalette![color].accentScale[11]
: colorPalette![color].grayScale[11]
}
onClick={onClick}
>
{title}
</Link>
) : (
<Text color={color} size={size} variant="span">
{title}
</Text>
)
) : (
title
)}
{trailingIcon && <span>{trailingIcon}</span>}
</StyledSideBarGroupHeader>
)}
{children}
</StyledSideBarGroup>
);
};
export default SideBarGroup;
SideBarGroup.displayName = "SideBarGroup"
const StyledSideBarGroup = styled.ul`
display: flex;
flex-direction: column;
padding: 0;
margin: 0;
list-style-type: none;
`;
const StyledSideBarGroupHeader = styled.li<SideBarGroupStyleProps>`
display: flex;
flex-direction: row;
padding: 0.5rem 0.5rem 0.25rem 1rem;
color: ${(props) => props.$colorPalette[props.$color].grayScale[11]};
`;
|