merge with develop

2025-11-08 22:45:45 +01:00 · 2020-04-07 08:31:53 +02:00
parent 7517756479 fc78f003f5
commit c8e2681dae
18 changed files with 2180 additions and 1712 deletions
--- a/scm-ui/ui-components/src/CardColumn.stories.tsx
+++ b/scm-ui/ui-components/src/CardColumn.stories.tsx
@@ -0,0 +1,56 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+import React, { FC } from "react";
+import { MemoryRouter } from "react-router-dom";
+import { storiesOf } from "@storybook/react";
+import CardColumn from "./CardColumn";
+import Icon from "./Icon";
+import styled from "styled-components";
+
+const Wrapper = styled.div`
+  margin: 2rem;
+  max-width: 400px;
+`;
+
+const Container: FC = ({ children }) => <Wrapper>{children}</Wrapper>;
+
+const title = <strong>title</strong>;
+const avatar = <Icon name="icons fa-2x" className="media-left" />;
+const link = "/foo/bar";
+const footerLeft = <small>left footer</small>;
+const footerRight = <small>right footer</small>;
+
+storiesOf("CardColumn", module)
+  .addDecorator(story => <MemoryRouter initialEntries={["/"]}>{story()}</MemoryRouter>)
+  .addDecorator(storyFn => <Container>{storyFn()}</Container>)
+  .add("default", () => (
+    <CardColumn
+      title={title}
+      description="A description can be added here."
+      avatar={avatar}
+      link={link}
+      footerLeft={footerLeft}
+      footerRight={footerRight}
+    />
+  ));
--- a/scm-ui/ui-components/src/CardColumn.tsx
+++ b/scm-ui/ui-components/src/CardColumn.tsx
@@ -68,6 +68,14 @@ const ContentRight = styled.div`
  margin-left: auto;
 `;

+const RightMarginDiv = styled.div`
+  margin-right: 0.5rem;
+`;
+
+const InheritFlexShrinkDiv = styled.div`
+  flex-shrink: inherit;
+`;
+
 export default class CardColumn extends React.Component<Props> {
  createLink = () => {
    const { link, action } = this.props;
@@ -105,8 +113,10 @@ export default class CardColumn extends React.Component<Props> {
              <ContentRight>{contentRight}</ContentRight>
            </div>
            <FooterWrapper className={classNames("level", "is-flex")}>
-              <div className="level-left is-hidden-mobile">{footerLeft}</div>
-              <div className="level-right is-mobile is-marginless">{footerRight}</div>
+              <RightMarginDiv className="level-left is-hidden-mobile">{footerLeft}</RightMarginDiv>
+              <InheritFlexShrinkDiv className="level-right is-block is-mobile is-marginless shorten-text">
+                {footerRight}
+              </InheritFlexShrinkDiv>
            </FooterWrapper>
          </FlexFullHeight>
        </NoEventWrapper>
--- a/scm-ui/ui-components/src/CardColumnSmall.stories.tsx
+++ b/scm-ui/ui-components/src/CardColumnSmall.stories.tsx
@@ -0,0 +1,48 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+import React, { FC } from "react";
+import { MemoryRouter } from "react-router-dom";
+import { storiesOf } from "@storybook/react";
+import CardColumnSmall from "./CardColumnSmall";
+import Icon from "./Icon";
+import styled from "styled-components";
+
+const Wrapper = styled.div`
+  margin: 2rem;
+  max-width: 400px;
+`;
+
+const Container: FC = ({ children }) => <Wrapper>{children}</Wrapper>;
+
+const link = "/foo/bar";
+const icon = <Icon name="icons fa-2x" className="media-left" />;
+const contentLeft = <strong className="is-marginless">main content</strong>;
+const contentRight = <small>more text</small>;
+
+storiesOf("CardColumnSmall", module)
+  .addDecorator(story => <MemoryRouter initialEntries={["/"]}>{story()}</MemoryRouter>)
+  .addDecorator(storyFn => <Container>{storyFn()}</Container>)
+  .add("default", () => (
+    <CardColumnSmall link={link} icon={icon} contentLeft={contentLeft} contentRight={contentRight} />
+  ));
--- a/scm-ui/ui-components/src/CardColumnSmall.tsx
+++ b/scm-ui/ui-components/src/CardColumnSmall.tsx
@@ -0,0 +1,82 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+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;
+  icon: ReactNode;
+  contentLeft: ReactNode;
+  contentRight: ReactNode;
+  footer?: ReactNode;
+};
+
+const FlexFullHeight = styled.div`
+  flex-direction: column;
+  justify-content: space-around;
+  align-self: stretch;
+`;
+
+const ContentLeft = styled.div`
+  margin-bottom: 0 !important;
+  overflow: hidden;
+`;
+
+const ContentRight = styled.div`
+  margin-left: auto;
+  align-items: start;
+`;
+
+const CenteredItems = styled.div`
+  align-items: center;
+`;
+
+const StyledLink = styled(Link)`
+  color: inherit;
+  :hover {
+    color: #33b2e8 !important;
+  }
+`;
+
+const CardColumnSmall: FC<Props> = ({ link, icon, contentLeft, contentRight, footer }) => {
+  return (
+    <StyledLink to={link}>
+      <div className="media">
+        {icon}
+        <FlexFullHeight className={classNames("media-content", "text-box", "is-flex")}>
+          <CenteredItems className="is-flex">
+            <ContentLeft>{contentLeft}</ContentLeft>
+            <ContentRight>{contentRight}</ContentRight>
+          </CenteredItems>
+          <small>{footer}</small>
+        </FlexFullHeight>
+      </div>
+    </StyledLink>
+  );
+};
+
+export default CardColumnSmall;
--- a/scm-ui/ui-components/src/snapshots/storyshots.test.ts.snap
+++ b/scm-ui/ui-components/src/snapshots/storyshots.test.ts.snap
@@ -445,6 +445,119 @@ exports[`Storyshots Buttons|SubmitButton Default 1`] = `
 </div>
 `;

+exports[`Storyshots CardColumn default 1`] = `
+<div
+  className="CardColumnstories__Wrapper-sc-1ztucl-0 IFDjP"
+>
+  <a
+    className="overlay-column"
+    href="/foo/bar"
+    onClick={[Function]}
+  />
+  <article
+    className="CardColumn__NoEventWrapper-sc-1w6lsih-0 kZKqpc media"
+  >
+    <figure
+      className="CardColumn__AvatarWrapper-sc-1w6lsih-1 bZyfne media-left"
+    >
+      <i
+        className="fas fa-icons fa-2x has-text-grey-light media-left"
+      />
+    </figure>
+    <div
+      className="CardColumn__FlexFullHeight-sc-1w6lsih-2 cAdfGj media-content text-box is-flex"
+    >
+      <div
+        className="is-flex"
+      >
+        <div
+          className="CardColumn__ContentLeft-sc-1w6lsih-4 dumWkw content"
+        >
+          <p
+            className="shorten-text is-marginless"
+          >
+            <strong>
+              title
+            </strong>
+          </p>
+          <p
+            className="shorten-text"
+          >
+            A description can be added here.
+          </p>
+        </div>
+        <div
+          className="CardColumn__ContentRight-sc-1w6lsih-5 kyEPRa"
+        />
+      </div>
+      <div
+        className="CardColumn__FooterWrapper-sc-1w6lsih-3 jlTqlS level is-flex"
+      >
+        <div
+          className="CardColumn__RightMarginDiv-sc-1w6lsih-6 dbLPPh level-left is-hidden-mobile"
+        >
+          <small>
+            left footer
+          </small>
+        </div>
+        <div
+          className="CardColumn__InheritFlexShrinkDiv-sc-1w6lsih-7 jkwBTE level-right is-block is-mobile is-marginless shorten-text"
+        >
+          <small>
+            right footer
+          </small>
+        </div>
+      </div>
+    </div>
+  </article>
+</div>
+`;
+
+exports[`Storyshots CardColumnSmall default 1`] = `
+<div
+  className="CardColumnSmallstories__Wrapper-ofr817-0 fwZASP"
+>
+  <a
+    className="CardColumnSmall__StyledLink-tk9h0o-4 bSCFyE"
+    href="/foo/bar"
+    onClick={[Function]}
+  >
+    <div
+      className="media"
+    >
+      <i
+        className="fas fa-icons fa-2x has-text-grey-light media-left"
+      />
+      <div
+        className="CardColumnSmall__FlexFullHeight-tk9h0o-0 fwRxNw media-content text-box is-flex"
+      >
+        <div
+          className="CardColumnSmall__CenteredItems-tk9h0o-3 eHPOKj is-flex"
+        >
+          <div
+            className="CardColumnSmall__ContentLeft-tk9h0o-1 ihirgF"
+          >
+            <strong
+              className="is-marginless"
+            >
+              main content
+            </strong>
+          </div>
+          <div
+            className="CardColumnSmall__ContentRight-tk9h0o-2 jZRaNn"
+          >
+            <small>
+              more text
+            </small>
+          </div>
+        </div>
+        <small />
+      </div>
+    </div>
+  </a>
+</div>
+`;
+
 exports[`Storyshots DateFromNow Default 1`] = `
 <div>
  <p>
@@ -34455,7 +34568,7 @@ exports[`Storyshots RepositoryEntry Avatar EP 1`] = `
        className="CardColumn__FooterWrapper-sc-1w6lsih-3 jlTqlS level is-flex"
      >
        <div
-          className="level-left is-hidden-mobile"
+          className="CardColumn__RightMarginDiv-sc-1w6lsih-6 dbLPPh level-left is-hidden-mobile"
        >
          <a
            className="RepositoryEntryLink__PointerEventsLink-sc-1hpqj0w-0 gtboNN level-item"
@@ -34495,7 +34608,7 @@ exports[`Storyshots RepositoryEntry Avatar EP 1`] = `
          </a>
        </div>
        <div
-          className="level-right is-mobile is-marginless"
+          className="CardColumn__InheritFlexShrinkDiv-sc-1w6lsih-7 jkwBTE level-right is-block is-mobile is-marginless shorten-text"
        >
          <small
            className="level-item"
@@ -34572,7 +34685,7 @@ exports[`Storyshots RepositoryEntry Before Title EP 1`] = `
        className="CardColumn__FooterWrapper-sc-1w6lsih-3 jlTqlS level is-flex"
      >
        <div
-          className="level-left is-hidden-mobile"
+          className="CardColumn__RightMarginDiv-sc-1w6lsih-6 dbLPPh level-left is-hidden-mobile"
        >
          <a
            className="RepositoryEntryLink__PointerEventsLink-sc-1hpqj0w-0 gtboNN level-item"
@@ -34612,7 +34725,7 @@ exports[`Storyshots RepositoryEntry Before Title EP 1`] = `
          </a>
        </div>
        <div
-          className="level-right is-mobile is-marginless"
+          className="CardColumn__InheritFlexShrinkDiv-sc-1w6lsih-7 jkwBTE level-right is-block is-mobile is-marginless shorten-text"
        >
          <small
            className="level-item"
@@ -34686,7 +34799,7 @@ exports[`Storyshots RepositoryEntry Default 1`] = `
        className="CardColumn__FooterWrapper-sc-1w6lsih-3 jlTqlS level is-flex"
      >
        <div
-          className="level-left is-hidden-mobile"
+          className="CardColumn__RightMarginDiv-sc-1w6lsih-6 dbLPPh level-left is-hidden-mobile"
        >
          <a
            className="RepositoryEntryLink__PointerEventsLink-sc-1hpqj0w-0 gtboNN level-item"
@@ -34726,7 +34839,7 @@ exports[`Storyshots RepositoryEntry Default 1`] = `
          </a>
        </div>
        <div
-          className="level-right is-mobile is-marginless"
+          className="CardColumn__InheritFlexShrinkDiv-sc-1w6lsih-7 jkwBTE level-right is-block is-mobile is-marginless shorten-text"
        >
          <small
            className="level-item"
@@ -34800,7 +34913,7 @@ exports[`Storyshots RepositoryEntry Quick Link EP 1`] = `
        className="CardColumn__FooterWrapper-sc-1w6lsih-3 jlTqlS level is-flex"
      >
        <div
-          className="level-left is-hidden-mobile"
+          className="CardColumn__RightMarginDiv-sc-1w6lsih-6 dbLPPh level-left is-hidden-mobile"
        >
          <a
            className="RepositoryEntryLink__PointerEventsLink-sc-1hpqj0w-0 gtboNN level-item"
@@ -34847,7 +34960,7 @@ exports[`Storyshots RepositoryEntry Quick Link EP 1`] = `
          </a>
        </div>
        <div
-          className="level-right is-mobile is-marginless"
+          className="CardColumn__InheritFlexShrinkDiv-sc-1w6lsih-7 jkwBTE level-right is-block is-mobile is-marginless shorten-text"
        >
          <small
            className="level-item"
--- a/scm-ui/ui-components/src/index.ts
+++ b/scm-ui/ui-components/src/index.ts
@@ -75,6 +75,7 @@ export { default as ErrorBoundary } from "./ErrorBoundary";
 export { default as OverviewPageActions } from "./OverviewPageActions";
 export { default as CardColumnGroup } from "./CardColumnGroup";
 export { default as CardColumn } from "./CardColumn";
+export { default as CardColumnSmall } from "./CardColumnSmall";

 export { default as comparators } from "./comparators";