Add figure with media-left for CardColumnSmall.tsx as well as fa-fw tag for constant width

This commit is contained in:
Florian Scholdei
2020-04-07 12:51:17 +02:00
parent 3a6a41ac5b
commit bbcff0c9df
4 changed files with 15 additions and 7 deletions

View File

@@ -36,7 +36,7 @@ const Wrapper = styled.div`
const Container: FC = ({ children }) => <Wrapper>{children}</Wrapper>;
const title = <strong>title</strong>;
const avatar = <Icon name="icons fa-2x" className="media-left" />;
const avatar = <Icon name="icons fa-2x fa-fw" />;
const link = "/foo/bar";
const footerLeft = <small>left footer</small>;
const footerRight = <small>right footer</small>;

View File

@@ -36,7 +36,7 @@ const Wrapper = styled.div`
const Container: FC = ({ children }) => <Wrapper>{children}</Wrapper>;
const link = "/foo/bar";
const icon = <Icon name="icons fa-2x" className="media-left" />;
const icon = <Icon name="icons fa-2x fa-fw" />;
const contentLeft = <strong className="is-marginless">main content</strong>;
const contentRight = <small>more text</small>;

View File

@@ -62,11 +62,15 @@ const StyledLink = styled(Link)`
}
`;
const IconWrapper = styled.figure`
margin-right: 0.5rem;
`;
const CardColumnSmall: FC<Props> = ({ link, icon, contentLeft, contentRight, footer }) => {
return (
<StyledLink to={link}>
<div className="media">
{icon}
<IconWrapper className="media-left">{icon}</IconWrapper>
<FlexFullHeight className={classNames("media-content", "text-box", "is-flex")}>
<CenteredItems className="is-flex">
<ContentLeft>{contentLeft}</ContentLeft>

View File

@@ -461,7 +461,7 @@ exports[`Storyshots CardColumn default 1`] = `
className="CardColumn__AvatarWrapper-sc-1w6lsih-1 bZyfne media-left"
>
<i
className="fas fa-icons fa-2x has-text-grey-light media-left"
className="fas fa-icons fa-2x fa-fw has-text-grey-light"
/>
</figure>
<div
@@ -525,9 +525,13 @@ exports[`Storyshots CardColumnSmall default 1`] = `
<div
className="media"
>
<i
className="fas fa-icons fa-2x has-text-grey-light media-left"
/>
<figure
className="CardColumnSmall__IconWrapper-tk9h0o-5 bEHHUw media-left"
>
<i
className="fas fa-icons fa-2x fa-fw has-text-grey-light"
/>
</figure>
<div
className="CardColumnSmall__FlexFullHeight-tk9h0o-0 fwRxNw media-content text-box is-flex"
>