Update behavior when optional props are not passed, Consistency towards two CardColumns established

2026-03-03 19:00:52 +01:00 · 2020-04-08 15:20:35 +02:00
parent bbcff0c9df
commit 825f5fcdb4
6 changed files with 177 additions and 132 deletions
--- 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 }) => <Wrapper>{children}</Wrapper>;

-const title = <strong>title</strong>;
-const avatar = <Icon name="icons fa-2x fa-fw" />;
 const link = "/foo/bar";
+const avatar = <Icon name="icons fa-2x fa-fw" />;
+const title = <strong>title</strong>;
 const footerLeft = <small>left footer</small>;
 const footerRight = <small>right footer</small>;

@@ -46,10 +46,17 @@ storiesOf("CardColumn", module)
  .addDecorator(storyFn => <Container>{storyFn()}</Container>)
  .add("default", () => (
    <CardColumn
+      link={link}
+      avatar={avatar}
      title={title}
      description="A description can be added here."
-      avatar={avatar}
-      link={link}
+      footerLeft={footerLeft}
+      footerRight={footerRight}
+    />
+  ))
+  .add("minimal", () => (
+    <CardColumn
+      title={title}
      footerLeft={footerLeft}
      footerRight={footerRight}
    />
--- 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<Props> {
-  createLink = () => {
-    const { link, action } = this.props;
-    if (link) {
-      return <Link className="overlay-column" to={link} />;
-    } else if (action) {
-      return (
-        <a
-          className="overlay-column"
-          onClick={e => {
-            e.preventDefault();
-            action();
-          }}
-          href="#"
-        />
-      );
-    }
-    return null;
-  };
+const CardColumn: FC<Props> = ({
+  link,
+  avatar,
+  title,
+  description,
+  contentRight,
+  footerLeft,
+  footerRight,
+  action,
+  className
+}) => {
+  const renderAvatar = avatar ? <AvatarWrapper className="media-left">{avatar}</AvatarWrapper> : null;
+  const renderDescription = description ? <p className="shorten-text">{description}</p> : null;
+  const renderContentRight = contentRight ? <ContentRight>{contentRight}</ContentRight> : null;

-  render() {
-    const { avatar, title, description, contentRight, footerLeft, footerRight, className } = this.props;
-    const link = this.createLink();
-    return (
-      <>
-        {link}
-        <NoEventWrapper className={classNames("media", className)}>
-          <AvatarWrapper className="media-left">{avatar}</AvatarWrapper>
-          <FlexFullHeight className={classNames("media-content", "text-box", "is-flex")}>
-            <div className="is-flex">
-              <ContentLeft className="content">
-                <p className="shorten-text is-marginless">{title}</p>
-                <p className="shorten-text">{description}</p>
-              </ContentLeft>
-              <ContentRight>{contentRight}</ContentRight>
-            </div>
-            <FooterWrapper className={classNames("level", "is-flex")}>
-              <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>
-      </>
+  let createLink = null;
+  if (link) {
+    createLink = <Link className="overlay-column" to={link} />;
+  } else if (action) {
+    createLink = (
+      <a
+        className="overlay-column"
+        onClick={e => {
+          e.preventDefault();
+          action();
+        }}
+        href="#"
+      />
    );
  }
-}
+
+  return (
+    <>
+      {createLink}
+      <NoEventWrapper className={classNames("media", className)}>
+        {renderAvatar}
+        <FlexFullHeight className={classNames("media-content", "text-box", "is-flex")}>
+          <div className="is-flex">
+            <ContentLeft className="content">
+              <p className="shorten-text is-marginless">{title}</p>
+              {renderDescription}
+            </ContentLeft>
+            {renderContentRight}
+          </div>
+          <FooterWrapper className={classNames("level", "is-flex")}>
+            <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>
+    </>
+  );
+};
+
+export default CardColumn;
--- 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 => <MemoryRouter initialEntries={["/"]}>{story()}</MemoryRouter>)
  .addDecorator(storyFn => <Container>{storyFn()}</Container>)
  .add("default", () => (
-    <CardColumnSmall link={link} icon={icon} contentLeft={contentLeft} contentRight={contentRight} />
+    <CardColumnSmall link={link} avatar={icon} contentLeft={contentLeft} contentRight={contentRight} />
+  ))
+  .add("minimal", () => (
+    <CardColumnSmall link={link} contentLeft={contentLeft} contentRight={contentRight} />
  ));
--- 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<Props> = ({ link, icon, contentLeft, contentRight, footer }) => {
+const CardColumnSmall: FC<Props> = ({ link, avatar, contentLeft, contentRight, footer }) => {
+  const renderAvatar = avatar ? <AvatarWrapper className="media-left">{avatar}</AvatarWrapper> : null;
+  const renderFooter = footer ? <small>{footer}</small> : null;
+
  return (
    <StyledLink to={link}>
      <div className="media">
-        <IconWrapper className="media-left">{icon}</IconWrapper>
+        {renderAvatar}
        <FlexFullHeight className={classNames("media-content", "text-box", "is-flex")}>
          <CenteredItems className="is-flex">
            <ContentLeft>{contentLeft}</ContentLeft>
            <ContentRight>{contentRight}</ContentRight>
          </CenteredItems>
-          <small>{footer}</small>
+          {renderFooter}
        </FlexFullHeight>
      </div>
    </StyledLink>
--- 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.
          </p>
        </div>
+      </div>
+      <div
+        className="CardColumn__FooterWrapper-sc-1w6lsih-3 jlTqlS level is-flex"
+      >
        <div
-          className="CardColumn__ContentRight-sc-1w6lsih-5 kyEPRa"
-        />
+          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 CardColumn minimal 1`] = `
+<div
+  className="CardColumnstories__Wrapper-sc-1ztucl-0 IFDjP"
+>
+  <article
+    className="CardColumn__NoEventWrapper-sc-1w6lsih-0 kZKqpc media"
+  >
+    <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>
+        </div>
      </div>
      <div
        className="CardColumn__FooterWrapper-sc-1w6lsih-3 jlTqlS level is-flex"
@@ -526,7 +571,7 @@ exports[`Storyshots CardColumnSmall default 1`] = `
      className="media"
    >
      <figure
-        className="CardColumnSmall__IconWrapper-tk9h0o-5 bEHHUw media-left"
+        className="CardColumnSmall__AvatarWrapper-tk9h0o-5 jvTAoV media-left"
      >
        <i
          className="fas fa-icons fa-2x fa-fw has-text-grey-light"
@@ -555,7 +600,47 @@ exports[`Storyshots CardColumnSmall default 1`] = `
            </small>
          </div>
        </div>
-        <small />
+      </div>
+    </div>
+  </a>
+</div>
+`;
+
+exports[`Storyshots CardColumnSmall minimal 1`] = `
+<div
+  className="CardColumnSmallstories__Wrapper-ofr817-0 fwZASP"
+>
+  <a
+    className="CardColumnSmall__StyledLink-tk9h0o-4 bSCFyE"
+    href="/foo/bar"
+    onClick={[Function]}
+  >
+    <div
+      className="media"
+    >
+      <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>
      </div>
    </div>
  </a>
@@ -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
          </p>
        </div>
-        <div
-          className="CardColumn__ContentRight-sc-1w6lsih-5 kyEPRa"
-        />
      </div>
      <div
        className="CardColumn__FooterWrapper-sc-1w6lsih-3 jlTqlS level is-flex"
@@ -34681,9 +34763,6 @@ exports[`Storyshots RepositoryEntry Before Title EP 1`] = `
            The starship Heart of Gold was the first spacecraft to make use of the Infinite Improbability Drive
          </p>
        </div>
-        <div
-          className="CardColumn__ContentRight-sc-1w6lsih-5 kyEPRa"
-        />
      </div>
      <div
        className="CardColumn__FooterWrapper-sc-1w6lsih-3 jlTqlS level is-flex"
@@ -34795,9 +34874,6 @@ exports[`Storyshots RepositoryEntry Default 1`] = `
            The starship Heart of Gold was the first spacecraft to make use of the Infinite Improbability Drive
          </p>
        </div>
-        <div
-          className="CardColumn__ContentRight-sc-1w6lsih-5 kyEPRa"
-        />
      </div>
      <div
        className="CardColumn__FooterWrapper-sc-1w6lsih-3 jlTqlS level is-flex"
@@ -34909,9 +34985,6 @@ exports[`Storyshots RepositoryEntry Quick Link EP 1`] = `
            The starship Heart of Gold was the first spacecraft to make use of the Infinite Improbability Drive
          </p>
        </div>
-        <div
-          className="CardColumn__ContentRight-sc-1w6lsih-5 kyEPRa"
-        />
      </div>
      <div
        className="CardColumn__FooterWrapper-sc-1w6lsih-3 jlTqlS level is-flex"
--- a/yarn.lock
+++ b/yarn.lock
@@ -5656,7 +5656,7 @@ debug@3.1.0:
  dependencies:
    ms "2.0.0"

-debug@^3.0.0, debug@^3.1.0, debug@^3.1.1, debug@^3.2.5, debug@^3.2.6:
+debug@^3.0.0, debug@^3.1.0, debug@^3.1.1, debug@^3.2.5:
  version "3.2.6"
  resolved "https://registry.yarnpkg.com/debug/-/debug-3.2.6.tgz#e83d17de16d8a7efb7717edbe5fb10135eee629b"
  integrity sha512-mel+jf7nrtEl5Pn1Qx46zARXKDpBbvzezse7p7LqINmdoIk8PYP5SySaxEmYv6TZ0JyEKA1hsCId6DIhgITtWQ==
@@ -5715,11 +5715,6 @@ deep-equal@^1.0.1, deep-equal@^1.1.1:
    object-keys "^1.1.1"
    regexp.prototype.flags "^1.2.0"

-deep-extend@^0.6.0:
-  version "0.6.0"
-  resolved "https://registry.yarnpkg.com/deep-extend/-/deep-extend-0.6.0.tgz#c4fa7c95404a17a9c3e8ca7e1537312b736330ac"
-  integrity sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==
-
 deep-is@~0.1.3:
  version "0.1.3"
  resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.3.tgz#b369d6fb5dbc13eecf524f91b070feedc357cf34"
@@ -5835,11 +5830,6 @@ detect-indent@^5.0.0:
  resolved "https://registry.yarnpkg.com/detect-indent/-/detect-indent-5.0.0.tgz#3871cc0a6a002e8c3e5b3cf7f336264675f06b9d"
  integrity sha1-OHHMCmoALow+Wzz38zYmRnXwa50=

-detect-libc@^1.0.2:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/detect-libc/-/detect-libc-1.0.3.tgz#fa137c4bd698edf55cd5cd02ac559f91a4c4ba9b"
-  integrity sha1-+hN8S9aY7fVc1c0CrFWfkaTEups=
-
 detect-newline@^2.1.0:
  version "2.1.0"
  resolved "https://registry.yarnpkg.com/detect-newline/-/detect-newline-2.1.0.tgz#f41f1c10be4b00e87b5f13da680759f2c5bfd3e2"
@@ -8059,7 +8049,7 @@ i18next@^17.3.0:
  dependencies:
    "@babel/runtime" "^7.3.1"

-iconv-lite@0.4.24, iconv-lite@^0.4.24, iconv-lite@^0.4.4, iconv-lite@~0.4.13:
+iconv-lite@0.4.24, iconv-lite@^0.4.24, iconv-lite@~0.4.13:
  version "0.4.24"
  resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b"
  integrity sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==
@@ -8198,7 +8188,7 @@ inherits@2.0.3:
  resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.3.tgz#633c2c83e3da42a502f52466022480f4208261de"
  integrity sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=

-ini@^1.3.2, ini@^1.3.4, ini@^1.3.5, ini@~1.3.0:
+ini@^1.3.2, ini@^1.3.4, ini@^1.3.5:
  version "1.3.5"
  resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.5.tgz#eee25f56db1c9ec6085e0c22778083f596abf927"
  integrity sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw==
@@ -10386,15 +10376,6 @@ nearley@^2.7.10:
    randexp "0.4.6"
    semver "^5.4.1"

-needle@^2.2.1:
-  version "2.4.1"
-  resolved "https://registry.yarnpkg.com/needle/-/needle-2.4.1.tgz#14af48732463d7475696f937626b1b993247a56a"
-  integrity sha512-x/gi6ijr4B7fwl6WYL9FwlCvRQKGlUNvnceho8wxkwXqN8jvVmmmATTmZPRRG7b/yC1eode26C2HO9jl78Du9g==
-  dependencies:
-    debug "^3.2.6"
-    iconv-lite "^0.4.4"
-    sax "^1.2.4"
-
 negotiator@0.6.2:
  version "0.6.2"
  resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.6.2.tgz#feacf7ccf525a77ae9634436a64883ffeca346fb"
@@ -10519,22 +10500,6 @@ node-notifier@^5.4.2:
    shellwords "^0.1.1"
    which "^1.3.0"

-node-pre-gyp@*:
-  version "0.14.0"
-  resolved "https://registry.yarnpkg.com/node-pre-gyp/-/node-pre-gyp-0.14.0.tgz#9a0596533b877289bcad4e143982ca3d904ddc83"
-  integrity sha512-+CvDC7ZttU/sSt9rFjix/P05iS43qHCOOGzcr3Ry99bXG7VX953+vFyEuph/tfqoYu8dttBkE86JSKBO2OzcxA==
-  dependencies:
-    detect-libc "^1.0.2"
-    mkdirp "^0.5.1"
-    needle "^2.2.1"
-    nopt "^4.0.1"
-    npm-packlist "^1.1.6"
-    npmlog "^4.0.2"
-    rc "^1.2.7"
-    rimraf "^2.6.1"
-    semver "^5.3.0"
-    tar "^4.4.2"
-
 node-releases@^1.1.29, node-releases@^1.1.53:
  version "1.1.53"
  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.53.tgz#2d821bfa499ed7c5dffc5e2f28c88e78a08ee3f4"
@@ -10633,7 +10598,7 @@ npm-normalize-package-bin@^1.0.0, npm-normalize-package-bin@^1.0.1:
    semver "^5.6.0"
    validate-npm-package-name "^3.0.0"

-npm-packlist@^1.1.6, npm-packlist@^1.4.4:
+npm-packlist@^1.4.4:
  version "1.4.8"
  resolved "https://registry.yarnpkg.com/npm-packlist/-/npm-packlist-1.4.8.tgz#56ee6cc135b9f98ad3d51c1c95da22bbb9b2ef3e"
  integrity sha512-5+AZgwru5IevF5ZdnFglB5wNlHG1AOOuw28WhUq8/8emhBmLv6jX5by4WJCh7lW0uSYZYS6DXqIsyZVIXRZU9A==
@@ -10658,7 +10623,7 @@ npm-run-path@^2.0.0:
  dependencies:
    path-key "^2.0.0"

-npmlog@^4.0.2, npmlog@^4.1.2:
+npmlog@^4.1.2:
  version "4.1.2"
  resolved "https://registry.yarnpkg.com/npmlog/-/npmlog-4.1.2.tgz#08a7f2a8bf734604779a9efa4ad5cc717abb954b"
  integrity sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg==
@@ -12117,16 +12082,6 @@ raw-loader@~0.5.1:
  resolved "https://registry.yarnpkg.com/raw-loader/-/raw-loader-0.5.1.tgz#0c3d0beaed8a01c966d9787bf778281252a979aa"
  integrity sha1-DD0L6u2KAclm2Xh793goElKpeao=

-rc@^1.2.7:
-  version "1.2.8"
-  resolved "https://registry.yarnpkg.com/rc/-/rc-1.2.8.tgz#cd924bf5200a075b83c188cd6b9e211b7fc0d3ed"
-  integrity sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==
-  dependencies:
-    deep-extend "^0.6.0"
-    ini "~1.3.0"
-    minimist "^1.2.0"
-    strip-json-comments "~2.0.1"
-
 react-clientside-effect@^1.2.2:
  version "1.2.2"
  resolved "https://registry.yarnpkg.com/react-clientside-effect/-/react-clientside-effect-1.2.2.tgz#6212fb0e07b204e714581dd51992603d1accc837"
@@ -13035,7 +12990,7 @@ rimraf@2.6.3:
  dependencies:
    glob "^7.1.3"

-rimraf@^2.2.8, rimraf@^2.5.4, rimraf@^2.6.1, rimraf@^2.6.2, rimraf@^2.6.3, rimraf@^2.7.1:
+rimraf@^2.2.8, rimraf@^2.5.4, rimraf@^2.6.2, rimraf@^2.6.3, rimraf@^2.7.1:
  version "2.7.1"
  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.7.1.tgz#35797f13a7fdadc566142c29d4f07ccad483e3ec"
  integrity sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==
@@ -13198,7 +13153,7 @@ selfsigned@^1.10.7:
  dependencies:
    node-forge "0.9.0"

-"semver@2 || 3 || 4 || 5", "semver@2.x || 3.x || 4 || 5", semver@^5.3.0, semver@^5.4.1, semver@^5.5.0, semver@^5.5.1, semver@^5.6.0, semver@^5.7.0, semver@^5.7.1:
+"semver@2 || 3 || 4 || 5", "semver@2.x || 3.x || 4 || 5", semver@^5.4.1, semver@^5.5.0, semver@^5.5.1, semver@^5.6.0, semver@^5.7.0, semver@^5.7.1:
  version "5.7.1"
  resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.1.tgz#a954f931aeba508d307bbf069eff0c01c96116f7"
  integrity sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==
@@ -13965,11 +13920,6 @@ strip-json-comments@^3.0.1:
  resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.1.0.tgz#7638d31422129ecf4457440009fba03f9f9ac180"
  integrity sha512-e6/d0eBu7gHtdCqFt0xJr642LdToM5/cN4Qb9DbHjVx1CP5RyeM+zH7pbecEmDv/lBqb0QH+6Uqq75rxFPkM0w==

-strip-json-comments@~2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-2.0.1.tgz#3c531942e908c2697c0ec344858c286c7ca0a60a"
-  integrity sha1-PFMZQukIwml8DsNEhYwobHygpgo=
-
 strong-log-transformer@^2.0.0:
  version "2.1.0"
  resolved "https://registry.yarnpkg.com/strong-log-transformer/-/strong-log-transformer-2.1.0.tgz#0f5ed78d325e0421ac6f90f7f10e691d6ae3ae10"
@@ -14113,7 +14063,7 @@ tapable@^1.0.0, tapable@^1.1.3:
  resolved "https://registry.yarnpkg.com/tapable/-/tapable-1.1.3.tgz#a1fccc06b58db61fd7a45da2da44f5f3a3e67ba2"
  integrity sha512-4WK/bYZmj8xLr+HUCODHGF1ZFzsYffasLUgEiMBY4fgtltdO6B4WJtlSbPaDTLpYTcGVwM2qLnFTICEcNxs3kA==

-tar@^4.4.10, tar@^4.4.12, tar@^4.4.2, tar@^4.4.8:
+tar@^4.4.10, tar@^4.4.12, tar@^4.4.8:
  version "4.4.13"
  resolved "https://registry.yarnpkg.com/tar/-/tar-4.4.13.tgz#43b364bc52888d555298637b10d60790254ab525"
  integrity sha512-w2VwSrBoHa5BsSyH+KxEqeQBAllHhccyMFVHtGtdMpF4W7IRWfZjFiQceJPChOeTsSDVUpER2T8FA93pr0L+QA==