[4725] Inverted Variants of buttons (#5671)

Resolves #4725

---------

Co-authored-by: Félix Malfait <felix.malfait@gmail.com>
This commit is contained in:
Hinson Chan
2024-06-06 07:41:22 -07:00
committed by GitHub
parent 9567103d5f
commit c76bc4729d
5 changed files with 222 additions and 102 deletions

View File

@ -1,7 +1,11 @@
import styled from '@emotion/styled';
const StyledLayout = styled.div<{ width?: number }>`
background: ${({ theme }) => theme.background.primary};
const StyledLayout = styled.div<{
width?: number;
backgroundColor?: string | undefined;
}>`
background: ${({ theme, backgroundColor }) =>
backgroundColor ?? theme.background.primary};
border: 1px solid ${({ theme }) => theme.border.color.light};
border-radius: 5px;
@ -17,12 +21,16 @@ const StyledLayout = styled.div<{ width?: number }>`
type ComponentStorybookLayoutProps = {
width?: number;
backgroundColor?: string | undefined;
children: JSX.Element;
};
export const ComponentStorybookLayout = ({
width,
backgroundColor,
children,
}: ComponentStorybookLayoutProps) => (
<StyledLayout width={width}>{children}</StyledLayout>
<StyledLayout width={width} backgroundColor={backgroundColor}>
{children}
</StyledLayout>
);