Unverified Commit 44f81984 authored by Guilherme Gazzo's avatar Guilherme Gazzo Committed by GitHub
Browse files

feat: Sidebar Item (#284)

parent d35f7b3e
......@@ -11,6 +11,8 @@ export function ButtonGroup({
stretch,
vertical,
wrap,
small,
medium,
...props
}) {
return <Box
......@@ -18,6 +20,8 @@ export function ButtonGroup({
rcx-button-group--align={align}
rcx-button-group--stretch={stretch}
rcx-button-group--vertical={vertical}
rcx-button-group--small={small}
rcx-button-group--medium={medium}
rcx-button-group--wrap={wrap}
role='group'
{...props}
......@@ -41,4 +45,6 @@ ButtonGroup.propTypes = {
vertical: PropTypes.bool,
/** Will wrap the items when they exceed the container space? */
wrap: PropTypes.bool,
small: PropTypes.bool,
medium: PropTypes.bool,
};
......@@ -53,6 +53,10 @@
margin-inline: lengths.margin(2);
}
.rcx-button-group.rcx-button-group--medium > & {
margin-inline: lengths.margin(4);
}
.rcx-button-group--wrap > & {
margin-block-end: lengths.margin(16);
margin-inline-start: lengths.margin(none);
......
import React from 'react';
import { ButtonGroup } from '../..';
export const Actions = (props) => <ButtonGroup mb='neg-x2' medium {...props}/>;
import React from 'react';
import { Icon as FuselageIcon, ButtonGroup } from '../..';
const Item = ({ selected, highlighted, clickable, ...props }) => <div className={[
'rc-box rcx-box--full rcx-sidebar-item',
highlighted && 'rcx-sidebar-item--highlighted',
clickable && 'rcx-sidebar-item--clickable',
selected && 'rcx-sidebar-item--selected',
].filter(Boolean).join(' ')} {...props} />;
const Container = (props) => <div className='rc-box rcx-box--full rcx-sidebar-item__container' {...props}/>;
const Content = (props) => <div className='rc-box rcx-box--full rcx-sidebar-item__container rcx-sidebar-item__content' {...props}/>;
const Title = (props) => <div className='rc-box rcx-box--full rcx-sidebar-item__title' {...props}/>;
const Subtitle = (props) => <div className='rc-box rcx-box--full rcx-sidebar-item__subtitle' {...props}/>;
const Wrapper = (props) => <div className='rc-box rcx-box--full rcx-sidebar-item__wrapper' {...props}/>;
const Icon = (props) => <FuselageIcon w='x12' mi='x4' size='x16' {...props} />;
const Avatar = (props) => <Container><div className='rc-box rcx-box--full rcx-sidebar-item__avatar' {...props}/></Container>;
const Actions = (props) => <ButtonGroup small {...props}/>;
Object.assign(Item, {
Container,
Content,
Title,
Subtitle,
Wrapper,
Icon,
Avatar,
Actions,
});
export default Item;
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment