diff --git a/scm-ui/ui-components/src/CardColumn.stories.tsx b/scm-ui/ui-components/src/CardColumn.stories.tsx index fbf8ffdf78..276e357bbe 100644 --- a/scm-ui/ui-components/src/CardColumn.stories.tsx +++ b/scm-ui/ui-components/src/CardColumn.stories.tsx @@ -35,9 +35,9 @@ const Wrapper = styled.div` const Container: FC = ({ children }) => {children}; -const title = title; -const avatar = ; const link = "/foo/bar"; +const avatar = ; +const title = title; const footerLeft = left footer; const footerRight = right footer; @@ -46,10 +46,17 @@ storiesOf("CardColumn", module) .addDecorator(storyFn => {storyFn()}) .add("default", () => ( + )) + .add("minimal", () => ( + diff --git a/scm-ui/ui-components/src/CardColumn.tsx b/scm-ui/ui-components/src/CardColumn.tsx index 2ef488e746..c85e15371a 100644 --- a/scm-ui/ui-components/src/CardColumn.tsx +++ b/scm-ui/ui-components/src/CardColumn.tsx @@ -21,19 +21,19 @@ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE * SOFTWARE. */ -import React, { ReactNode } from "react"; +import React, { FC, ReactNode } from "react"; import classNames from "classnames"; import styled from "styled-components"; import { Link } from "react-router-dom"; type Props = { + link?: string; + avatar?: ReactNode; title: ReactNode; description?: string; - avatar: ReactNode; contentRight?: ReactNode; footerLeft: ReactNode; footerRight: ReactNode; - link?: string; action?: () => void; className?: string; }; @@ -76,51 +76,60 @@ const InheritFlexShrinkDiv = styled.div` flex-shrink: inherit; `; -export default class CardColumn extends React.Component { - createLink = () => { - const { link, action } = this.props; - if (link) { - return ; - } else if (action) { - return ( - { - e.preventDefault(); - action(); - }} - href="#" - /> - ); - } - return null; - }; +const CardColumn: FC = ({ + link, + avatar, + title, + description, + contentRight, + footerLeft, + footerRight, + action, + className +}) => { + const renderAvatar = avatar ? {avatar} : null; + const renderDescription = description ?

{description}

: null; + const renderContentRight = contentRight ? {contentRight} : null; - render() { - const { avatar, title, description, contentRight, footerLeft, footerRight, className } = this.props; - const link = this.createLink(); - return ( - <> - {link} - - {avatar} - -
- -

{title}

-

{description}

- - {contentRight} -
- - {footerLeft} - - {footerRight} - - - - - + let createLink = null; + if (link) { + createLink = ; + } else if (action) { + createLink = ( + { + e.preventDefault(); + action(); + }} + href="#" + /> ); } -} + + return ( + <> + {createLink} + + {renderAvatar} + +
+ +

{title}

+ {renderDescription} + + {renderContentRight} +
+ + {footerLeft} + + {footerRight} + + + + + + ); +}; + +export default CardColumn; diff --git a/scm-ui/ui-components/src/CardColumnSmall.stories.tsx b/scm-ui/ui-components/src/CardColumnSmall.stories.tsx index d94f8af7c6..029e5b1548 100644 --- a/scm-ui/ui-components/src/CardColumnSmall.stories.tsx +++ b/scm-ui/ui-components/src/CardColumnSmall.stories.tsx @@ -44,5 +44,8 @@ storiesOf("CardColumnSmall", module) .addDecorator(story => {story()}) .addDecorator(storyFn => {storyFn()}) .add("default", () => ( - + + )) + .add("minimal", () => ( + )); diff --git a/scm-ui/ui-components/src/CardColumnSmall.tsx b/scm-ui/ui-components/src/CardColumnSmall.tsx index 82b4889b91..4e1acbbc72 100644 --- a/scm-ui/ui-components/src/CardColumnSmall.tsx +++ b/scm-ui/ui-components/src/CardColumnSmall.tsx @@ -29,7 +29,7 @@ import { Link } from "react-router-dom"; type Props = { link: string; - icon: ReactNode; + avatar?: ReactNode; contentLeft: ReactNode; contentRight: ReactNode; footer?: ReactNode; @@ -62,21 +62,24 @@ const StyledLink = styled(Link)` } `; -const IconWrapper = styled.figure` +const AvatarWrapper = styled.figure` margin-right: 0.5rem; `; -const CardColumnSmall: FC = ({ link, icon, contentLeft, contentRight, footer }) => { +const CardColumnSmall: FC = ({ link, avatar, contentLeft, contentRight, footer }) => { + const renderAvatar = avatar ? {avatar} : null; + const renderFooter = footer ? {footer} : null; + return (
- {icon} + {renderAvatar} {contentLeft} {contentRight} - {footer} + {renderFooter}
diff --git a/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap b/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap index ccd2fcd609..1c61844bf6 100644 --- a/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap +++ b/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap @@ -486,9 +486,54 @@ exports[`Storyshots CardColumn default 1`] = ` A description can be added here.

+ +
+ className="CardColumn__RightMarginDiv-sc-1w6lsih-6 dbLPPh level-left is-hidden-mobile" + > + + left footer + +
+
+ + right footer + +
+
+ + + +`; + +exports[`Storyshots CardColumn minimal 1`] = ` +
+
+
+
+
+

+ + title + +

+
- +
+ + + +`; + +exports[`Storyshots CardColumnSmall minimal 1`] = ` +
+ +
+
+
+
+ + main content + +
+
+ + more text + +
+
@@ -34564,9 +34649,6 @@ exports[`Storyshots RepositoryEntry Avatar EP 1`] = ` The starship Heart of Gold was the first spacecraft to make use of the Infinite Improbability Drive

-
-
-
-