Nemcio/SCM-Manager
1
0
Fork 0
mirror of https://github.com/scm-manager/scm-manager.git synced 2025-11-12 08:25:44 +01:00
Code Issues Packages Projects Releases Activity

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

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

2
scm-ui/ui-components/src/CardColumn.stories.tsx
View File

@@ -36,7 +36,7 @@ const Wrapper = styled.div`
const Container: FC = ({ children }) => <Wrapper>{children}</Wrapper>; const Container: FC = ({ children }) => <Wrapper>{children}</Wrapper>;
const title = <strong>title</strong>; 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 link = "/foo/bar";
const footerLeft = <small>left footer</small>; const footerLeft = <small>left footer</small>;
const footerRight = <small>right footer</small>; const footerRight = <small>right footer</small>;

2
scm-ui/ui-components/src/CardColumnSmall.stories.tsx
View File

@@ -36,7 +36,7 @@ const Wrapper = styled.div`
const Container: FC = ({ children }) => <Wrapper>{children}</Wrapper>; const Container: FC = ({ children }) => <Wrapper>{children}</Wrapper>;
const link = "/foo/bar"; 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 contentLeft = <strong className="is-marginless">main content</strong>;
const contentRight = <small>more text</small>; const contentRight = <small>more text</small>;

6
scm-ui/ui-components/src/CardColumnSmall.tsx
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 }) => { const CardColumnSmall: FC<Props> = ({ link, icon, contentLeft, contentRight, footer }) => {
return ( return (
<StyledLink to={link}> <StyledLink to={link}>
<div className="media"> <div className="media">
{icon} <IconWrapper className="media-left">{icon}</IconWrapper>
<FlexFullHeight className={classNames("media-content", "text-box", "is-flex")}> <FlexFullHeight className={classNames("media-content", "text-box", "is-flex")}>
<CenteredItems className="is-flex"> <CenteredItems className="is-flex">
<ContentLeft>{contentLeft}</ContentLeft> <ContentLeft>{contentLeft}</ContentLeft>

8
scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap
View File

@@ -461,7 +461,7 @@ exports[`Storyshots CardColumn default 1`] = `
className="CardColumn__AvatarWrapper-sc-1w6lsih-1 bZyfne media-left" className="CardColumn__AvatarWrapper-sc-1w6lsih-1 bZyfne media-left"
> >
<i <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> </figure>
<div <div
@@ -524,10 +524,14 @@ exports[`Storyshots CardColumnSmall default 1`] = `
> >
<div <div
className="media" className="media"
>
<figure
className="CardColumnSmall__IconWrapper-tk9h0o-5 bEHHUw media-left"
> >
<i <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 <div
className="CardColumnSmall__FlexFullHeight-tk9h0o-0 fwRxNw media-content text-box is-flex" className="CardColumnSmall__FlexFullHeight-tk9h0o-0 fwRxNw media-content text-box is-flex"
> >