Enrich styleguide with new features, rules and changes

The styleguide for usage of visual elements has not been updated for a long time. In the course of this story it should be adapted to the current standards and rules. In addition, heavy violations were rectified directly.
2025-10-26 08:06:09 +01:00 · 2021-01-28 12:46:42 +01:00
parent 0046c78b40
commit 57c9484d41
12 changed files with 2530 additions and 1003 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -24,6 +24,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Apply test ids to production builds for usage in e2e tests ([#1499](https://github.com/scm-manager/scm-manager/pull/1499))
 - Bump google guava version to 30.1-jre
 - Refactor table component so that it can be styled by styled-components ([#1503](https://github.com/scm-manager/scm-manager/pull/1503))
+- Enrich styleguide with new features, rules and changes ([#1506](https://github.com/scm-manager/scm-manager/pull/1506))

 ### Fixed
 - Add explicit provider setup for bouncy castle ([#1500](https://github.com/scm-manager/scm-manager/pull/1500))
--- a/scm-ui/ui-components/src/BranchSelector.stories.tsx
+++ b/scm-ui/ui-components/src/BranchSelector.stories.tsx
@@ -42,4 +42,4 @@ const Wrapper = styled.div`

 storiesOf("BranchSelector", module)
  .addDecorator(storyFn => <Wrapper>{storyFn()}</Wrapper>)
-  .add("Default", () => <BranchSelector branches={branches} onSelectBranch={branchSelected} label="Select branch:" />);
+  .add("Default", () => <BranchSelector branches={branches} onSelectBranch={branchSelected} label="Select Branch" />);
--- a/scm-ui/ui-components/src/Breadcrumb.tsx
+++ b/scm-ui/ui-components/src/Breadcrumb.tsx
@@ -45,7 +45,6 @@ type Props = {
 };

 const PermaLinkWrapper = styled.div`
-  margin: 1.2rem 0 0 1.5rem;
  width: 16px;
  height: 16px;
  font-size: 13px;
@@ -132,7 +131,7 @@ const Breadcrumb: FC<Props> = ({ repository, branch, defaultBranch, revision, pa

  return (
    <>
-      <div className="is-flex">
+      <div className="is-flex is-align-items-center">
        <PermaLinkWrapper>
          {copying ? (
            <Icon name="spinner fa-spin" />
--- a/scm-ui/ui-components/src/CardColumnSmall.tsx
+++ b/scm-ui/ui-components/src/CardColumnSmall.tsx
@@ -51,10 +51,6 @@ const ContentRight = styled.div`
  align-items: start;
 `;

-const CenteredItems = styled.div`
-  align-items: center;
-`;
-
 const StyledLink = styled(Link)`
  color: inherit;
  :hover {
@@ -75,10 +71,10 @@ const CardColumnSmall: FC<Props> = ({ link, avatar, contentLeft, contentRight, f
      <div className="media">
        {renderAvatar}
        <FlexFullHeight className={classNames("media-content", "text-box", "is-flex")}>
-          <CenteredItems className="is-flex">
+          <div className="is-flex is-align-items-center">
            <ContentLeft>{contentLeft}</ContentLeft>
            <ContentRight>{contentRight}</ContentRight>
-          </CenteredItems>
+          </div>
          {renderFooter}
        </FlexFullHeight>
      </div>
--- a/scm-ui/ui-components/src/DateElement.ts
+++ b/scm-ui/ui-components/src/DateElement.ts
@@ -24,7 +24,7 @@
 import styled from "styled-components";

 const DateElement = styled.time`
-  border-bottom: 1px dotted rgba(219, 219, 219);
+  border-bottom: 1px dotted rgb(219, 219, 219);
  cursor: help;
 `;

--- a/scm-ui/ui-components/src/snapshots/storyshots.test.ts.snap
+++ b/scm-ui/ui-components/src/snapshots/storyshots.test.ts.snap
@@ -80,7 +80,7 @@ exports[`Storyshots Annotate Default 1`] = `
              className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__When-h9c4md-2 cLNtyY bRzlfo"
            >
              <time
-                className="DateElement-sc-1schp8c-0 IMGpa"
+                className="DateElement-sc-1schp8c-0 gkptML"
                title="2020-04-09 15:07:42"
              >
                2020-04-09
@@ -160,7 +160,7 @@ exports[`Storyshots Annotate Default 1`] = `
              className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__When-h9c4md-2 cLNtyY bRzlfo"
            >
              <time
-                className="DateElement-sc-1schp8c-0 IMGpa"
+                className="DateElement-sc-1schp8c-0 gkptML"
                title="2020-05-10 11:18:42"
              >
                2020-05-10
@@ -260,7 +260,7 @@ exports[`Storyshots Annotate Default 1`] = `
              className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__When-h9c4md-2 cLNtyY bRzlfo"
            >
              <time
-                className="DateElement-sc-1schp8c-0 IMGpa"
+                className="DateElement-sc-1schp8c-0 gkptML"
                title="2020-04-09 15:07:42"
              >
                2020-04-09
@@ -372,7 +372,7 @@ exports[`Storyshots Annotate Default 1`] = `
              className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__When-h9c4md-2 cLNtyY bRzlfo"
            >
              <time
-                className="DateElement-sc-1schp8c-0 IMGpa"
+                className="DateElement-sc-1schp8c-0 gkptML"
                title="2020-04-12 18:29:42"
              >
                2020-04-12
@@ -474,7 +474,7 @@ exports[`Storyshots Annotate Default 1`] = `
              className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__When-h9c4md-2 cLNtyY bRzlfo"
            >
              <time
-                className="DateElement-sc-1schp8c-0 IMGpa"
+                className="DateElement-sc-1schp8c-0 gkptML"
                title="2020-04-09 15:07:42"
              >
                2020-04-09
@@ -633,7 +633,7 @@ exports[`Storyshots Annotate Markdown 1`] = `
              className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__When-h9c4md-2 cLNtyY bRzlfo"
            >
              <time
-                className="DateElement-sc-1schp8c-0 IMGpa"
+                className="DateElement-sc-1schp8c-0 gkptML"
                title="2020-04-09 15:07:42"
              >
                2020-04-09
@@ -725,7 +725,7 @@ exports[`Storyshots Annotate Markdown 1`] = `
              className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__When-h9c4md-2 cLNtyY bRzlfo"
            >
              <time
-                className="DateElement-sc-1schp8c-0 IMGpa"
+                className="DateElement-sc-1schp8c-0 gkptML"
                title="2020-05-10 11:18:42"
              >
                2020-05-10
@@ -791,7 +791,7 @@ exports[`Storyshots Annotate Markdown 1`] = `
              className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__When-h9c4md-2 cLNtyY bRzlfo"
            >
              <time
-                className="DateElement-sc-1schp8c-0 IMGpa"
+                className="DateElement-sc-1schp8c-0 gkptML"
                title="2020-04-09 15:07:42"
              >
                2020-04-09
@@ -912,7 +912,7 @@ exports[`Storyshots Annotate Markdown 1`] = `
              className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__When-h9c4md-2 cLNtyY bRzlfo"
            >
              <time
-                className="DateElement-sc-1schp8c-0 IMGpa"
+                className="DateElement-sc-1schp8c-0 gkptML"
                title="2020-04-12 18:29:42"
              >
                2020-04-12
@@ -955,7 +955,7 @@ exports[`Storyshots Annotate Markdown 1`] = `
              className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__When-h9c4md-2 cLNtyY bRzlfo"
            >
              <time
-                className="DateElement-sc-1schp8c-0 IMGpa"
+                className="DateElement-sc-1schp8c-0 gkptML"
                title="2020-04-09 15:07:42"
              >
                2020-04-09
@@ -1119,7 +1119,7 @@ exports[`Storyshots Annotate With Avatars 1`] = `
              className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__When-h9c4md-2 cLNtyY bRzlfo"
            >
              <time
-                className="DateElement-sc-1schp8c-0 IMGpa"
+                className="DateElement-sc-1schp8c-0 gkptML"
                title="2020-04-09 15:07:42"
              >
                2020-04-09
@@ -1204,7 +1204,7 @@ exports[`Storyshots Annotate With Avatars 1`] = `
              className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__When-h9c4md-2 cLNtyY bRzlfo"
            >
              <time
-                className="DateElement-sc-1schp8c-0 IMGpa"
+                className="DateElement-sc-1schp8c-0 gkptML"
                title="2020-05-10 11:18:42"
              >
                2020-05-10
@@ -1309,7 +1309,7 @@ exports[`Storyshots Annotate With Avatars 1`] = `
              className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__When-h9c4md-2 cLNtyY bRzlfo"
            >
              <time
-                className="DateElement-sc-1schp8c-0 IMGpa"
+                className="DateElement-sc-1schp8c-0 gkptML"
                title="2020-04-09 15:07:42"
              >
                2020-04-09
@@ -1426,7 +1426,7 @@ exports[`Storyshots Annotate With Avatars 1`] = `
              className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__When-h9c4md-2 cLNtyY bRzlfo"
            >
              <time
-                className="DateElement-sc-1schp8c-0 IMGpa"
+                className="DateElement-sc-1schp8c-0 gkptML"
                title="2020-04-12 18:29:42"
              >
                2020-04-12
@@ -1533,7 +1533,7 @@ exports[`Storyshots Annotate With Avatars 1`] = `
              className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__When-h9c4md-2 cLNtyY bRzlfo"
            >
              <time
-                className="DateElement-sc-1schp8c-0 IMGpa"
+                className="DateElement-sc-1schp8c-0 gkptML"
                title="2020-04-09 15:07:42"
              >
                2020-04-09
@@ -1625,7 +1625,7 @@ exports[`Storyshots BranchSelector Default 1`] = `
      <label
        className="label is-size-6"
      >
-        Select branch:
+        Select Branch
      </label>
    </div>
    <div
@@ -1672,10 +1672,10 @@ exports[`Storyshots BreadCrumb Default 1`] = `
  className="Breadcrumbstories__Wrapper-sc-1eq8sgz-0 hTbphm"
 >
  <div
-    className="is-flex"
+    className="is-flex is-align-items-center"
  >
    <div
-      className="Breadcrumb__PermaLinkWrapper-zvtb4t-0 grYLJW"
+      className="Breadcrumb__PermaLinkWrapper-zvtb4t-0 eqtJhO"
    >
      <span
        className="tooltip has-tooltip-right"
@@ -2356,7 +2356,7 @@ exports[`Storyshots CardColumn With hoverable date 1`] = `
            className="level-item"
          >
            <time
-              className="DateElement-sc-1schp8c-0 IMGpa"
+              className="DateElement-sc-1schp8c-0 gkptML"
              title="2020-03-23 09:26:01"
            >
              3 days ago
@@ -2374,7 +2374,7 @@ exports[`Storyshots CardColumnSmall Default 1`] = `
  className="CardColumnSmallstories__Wrapper-ofr817-0 eWDSlT"
 >
  <a
-    className="CardColumnSmall__StyledLink-tk9h0o-4 jDZRch"
+    className="CardColumnSmall__StyledLink-tk9h0o-3 jGsrTe"
    href="/foo/bar"
    onClick={[Function]}
  >
@@ -2382,7 +2382,7 @@ exports[`Storyshots CardColumnSmall Default 1`] = `
      className="media"
    >
      <figure
-        className="CardColumnSmall__AvatarWrapper-tk9h0o-5 cEyGXM media-left"
+        className="CardColumnSmall__AvatarWrapper-tk9h0o-4 evHbLN media-left"
      >
        <i
          className="fas fa-icons fa-2x fa-fw has-text-grey-light"
@@ -2392,7 +2392,7 @@ exports[`Storyshots CardColumnSmall Default 1`] = `
        className="CardColumnSmall__FlexFullHeight-tk9h0o-0 kqmVxI media-content text-box is-flex"
      >
        <div
-          className="CardColumnSmall__CenteredItems-tk9h0o-3 gECiIv is-flex"
+          className="is-flex is-align-items-center"
        >
          <div
            className="CardColumnSmall__ContentLeft-tk9h0o-1 irMufS"
@@ -2422,7 +2422,7 @@ exports[`Storyshots CardColumnSmall Minimal 1`] = `
  className="CardColumnSmallstories__Wrapper-ofr817-0 eWDSlT"
 >
  <a
-    className="CardColumnSmall__StyledLink-tk9h0o-4 jDZRch"
+    className="CardColumnSmall__StyledLink-tk9h0o-3 jGsrTe"
    href="/foo/bar"
    onClick={[Function]}
  >
@@ -2433,7 +2433,7 @@ exports[`Storyshots CardColumnSmall Minimal 1`] = `
        className="CardColumnSmall__FlexFullHeight-tk9h0o-0 kqmVxI media-content text-box is-flex"
      >
        <div
-          className="CardColumnSmall__CenteredItems-tk9h0o-3 gECiIv is-flex"
+          className="is-flex is-align-items-center"
        >
          <div
            className="CardColumnSmall__ContentLeft-tk9h0o-1 irMufS"
@@ -4564,7 +4564,7 @@ exports[`Storyshots Date Date from now 1`] = `
 >
  <p>
    <time
-      className="DateElement-sc-1schp8c-0 IMGpa"
+      className="DateElement-sc-1schp8c-0 gkptML"
      title="2009-06-30 18:30:00"
    >
      over 10 years ago
@@ -4572,7 +4572,7 @@ exports[`Storyshots Date Date from now 1`] = `
  </p>
  <p>
    <time
-      className="DateElement-sc-1schp8c-0 IMGpa"
+      className="DateElement-sc-1schp8c-0 gkptML"
      title="2019-06-30 18:30:00"
    >
      3 months ago
@@ -4580,7 +4580,7 @@ exports[`Storyshots Date Date from now 1`] = `
  </p>
  <p>
    <time
-      className="DateElement-sc-1schp8c-0 IMGpa"
+      className="DateElement-sc-1schp8c-0 gkptML"
      title="2019-10-12 13:56:40"
    >
      less than a minute ago
@@ -4588,7 +4588,7 @@ exports[`Storyshots Date Date from now 1`] = `
  </p>
  <p>
    <time
-      className="DateElement-sc-1schp8c-0 IMGpa"
+      className="DateElement-sc-1schp8c-0 gkptML"
      title="2019-10-11 13:56:40"
    >
      1 day ago
@@ -4603,7 +4603,7 @@ exports[`Storyshots Date Short 1`] = `
 >
  <p>
    <time
-      className="DateElement-sc-1schp8c-0 IMGpa"
+      className="DateElement-sc-1schp8c-0 gkptML"
      title="2009-06-30 18:30:00"
    >
      2009-06-30
@@ -4611,7 +4611,7 @@ exports[`Storyshots Date Short 1`] = `
  </p>
  <p>
    <time
-      className="DateElement-sc-1schp8c-0 IMGpa"
+      className="DateElement-sc-1schp8c-0 gkptML"
      title="2019-06-30 18:30:00"
    >
      2019-06-30
@@ -4619,7 +4619,7 @@ exports[`Storyshots Date Short 1`] = `
  </p>
  <p>
    <time
-      className="DateElement-sc-1schp8c-0 IMGpa"
+      className="DateElement-sc-1schp8c-0 gkptML"
      title="2019-10-12 13:56:40"
    >
      2019-10-12
@@ -4627,7 +4627,7 @@ exports[`Storyshots Date Short 1`] = `
  </p>
  <p>
    <time
-      className="DateElement-sc-1schp8c-0 IMGpa"
+      className="DateElement-sc-1schp8c-0 gkptML"
      title="2019-10-11 13:56:40"
    >
      2019-10-11
@@ -48041,7 +48041,7 @@ exports[`Storyshots Navigation|Secondary Active when match 1`] = `
    >
      <div>
        <p
-          className="SecondaryNavigation__MenuLabel-sc-8p1rgi-2 fNFkkZ menu-label"
+          className="SecondaryNavigation__MenuLabel-sc-8p1rgi-2 bTmDSq menu-label"
          onClick={[Function]}
        >
          <i
@@ -48103,7 +48103,7 @@ exports[`Storyshots Navigation|Secondary Default 1`] = `
    >
      <div>
        <p
-          className="SecondaryNavigation__MenuLabel-sc-8p1rgi-2 fNFkkZ menu-label"
+          className="SecondaryNavigation__MenuLabel-sc-8p1rgi-2 bTmDSq menu-label"
          onClick={[Function]}
        >
          <i
@@ -48165,7 +48165,7 @@ exports[`Storyshots Navigation|Secondary Extension Point 1`] = `
    >
      <div>
        <p
-          className="SecondaryNavigation__MenuLabel-sc-8p1rgi-2 fNFkkZ menu-label"
+          className="SecondaryNavigation__MenuLabel-sc-8p1rgi-2 bTmDSq menu-label"
          onClick={[Function]}
        >
          <i
@@ -48253,7 +48253,7 @@ exports[`Storyshots Navigation|Secondary Sub Navigation 1`] = `
    >
      <div>
        <p
-          className="SecondaryNavigation__MenuLabel-sc-8p1rgi-2 fNFkkZ menu-label"
+          className="SecondaryNavigation__MenuLabel-sc-8p1rgi-2 bTmDSq menu-label"
          onClick={[Function]}
        >
          <i
@@ -48572,7 +48572,7 @@ exports[`Storyshots RepositoryEntry Archived 1`] = `
            className="level-item"
          >
            <time
-              className="DateElement-sc-1schp8c-0 IMGpa"
+              className="DateElement-sc-1schp8c-0 gkptML"
              title="2020-03-23 09:26:01"
            >
              3 days ago
@@ -48717,7 +48717,7 @@ exports[`Storyshots RepositoryEntry Avatar EP 1`] = `
            className="level-item"
          >
            <time
-              className="DateElement-sc-1schp8c-0 IMGpa"
+              className="DateElement-sc-1schp8c-0 gkptML"
              title="2020-03-23 09:26:01"
            >
              3 days ago
@@ -48865,7 +48865,7 @@ exports[`Storyshots RepositoryEntry Before Title EP 1`] = `
            className="level-item"
          >
            <time
-              className="DateElement-sc-1schp8c-0 IMGpa"
+              className="DateElement-sc-1schp8c-0 gkptML"
              title="2020-03-23 09:26:01"
            >
              3 days ago
@@ -49010,7 +49010,7 @@ exports[`Storyshots RepositoryEntry Default 1`] = `
            className="level-item"
          >
            <time
-              className="DateElement-sc-1schp8c-0 IMGpa"
+              className="DateElement-sc-1schp8c-0 gkptML"
              title="2020-03-23 09:26:01"
            >
              3 days ago
@@ -49162,7 +49162,7 @@ exports[`Storyshots RepositoryEntry Quick Link EP 1`] = `
            className="level-item"
          >
            <time
-              className="DateElement-sc-1schp8c-0 IMGpa"
+              className="DateElement-sc-1schp8c-0 gkptML"
              title="2020-03-23 09:26:01"
            >
              3 days ago
--- a/scm-ui/ui-components/src/modals/Modal.stories.tsx
+++ b/scm-ui/ui-components/src/modals/Modal.stories.tsx
@@ -52,6 +52,24 @@ const text = `Mind-paralyzing change needed improbability vortex machine sorts s

 // eslint-disable-next-line @typescript-eslint/no-empty-function
 const doNothing = () => {};
+const withFormElementsBody = (
+  <>
+    <RadioList>
+      <Radio label="One" checked={true} helpText="The first one" />
+      <Radio label="Two" checked={false} helpText="The second one" />
+    </RadioList>
+    <hr />
+    <p>{text}</p>
+    <hr />
+    <Textarea label="Text" onChange={doNothing} />
+  </>
+);
+const withFormElementsFooter = (
+  <ButtonGroup>
+    <Button label="One" />
+    <Button label="Two" />
+  </ButtonGroup>
+);

 storiesOf("Modal|Modal", module)
  .addDecorator(story => <MemoryRouter initialEntries={["/"]}>{story()}</MemoryRouter>)
@@ -66,21 +84,13 @@ storiesOf("Modal|Modal", module)
    </CloseableModal>
  ))
  .add("With form elements", () => (
-    <NonCloseableModal>
-      <RadioList>
-        <Radio label="One" checked={true} helpText="The first one" />
-        <Radio label="Two" checked={false} helpText="The second one" />
-      </RadioList>
-      <hr />
-      <p>{text}</p>
-      <hr />
-      <Textarea label="Text" onChange={doNothing} />
-      <hr />
-      <ButtonGroup>
-        <Button label="One" />
-        <Button label="Two" />
-      </ButtonGroup>
-    </NonCloseableModal>
+    <Modal
+      body={withFormElementsBody}
+      closeFunction={doNothing}
+      active={true}
+      title={"Hitchhiker Modal"}
+      footer={withFormElementsFooter}
+    />
  ))
  .add("With long tooltips", () => {
    return (
--- a/scm-ui/ui-components/src/navigation/SecondaryNavigation.tsx
+++ b/scm-ui/ui-components/src/navigation/SecondaryNavigation.tsx
@@ -54,9 +54,6 @@ const Icon = styled.i<CollapsedProps>`
 `;

 const MenuLabel = styled.p<CollapsedProps>`
-  height: 3.2rem;
-  display: flex;
-  align-items: center;
  justify-content: ${(props: CollapsedProps) => (props.collapsed ? "center" : "inherit")};
  cursor: pointer;
 `;
--- a/scm-ui/ui-styles/public/index.html
+++ b/scm-ui/ui-styles/public/index.html
--- a/scm-ui/ui-styles/src/scm.scss
+++ b/scm-ui/ui-styles/src/scm.scss
@@ -708,6 +708,9 @@ form .field:not(.is-grouped) {
  }
 }
 .menu-label {
+  display: flex;
+  height: 3.2rem;
+  align-items: center;
  color: #fff;
  font-size: 1em;
  font-weight: 600;
@@ -802,13 +805,11 @@ form .field:not(.is-grouped) {
 }

 // modal
-.modal {
-  .modal-card {
-    border-radius: 6px;
+.modal-card {
+  border-radius: 6px;

-    .modal-card-foot {
-      justify-content: flex-end; // pulled-right
-    }
+  .modal-card-foot {
+    justify-content: flex-end; // pulled-right
  }
 }

--- a/scm-ui/ui-styles/webpack.config.js
+++ b/scm-ui/ui-styles/webpack.config.js
@@ -50,9 +50,10 @@ module.exports = {
    filename: "ui-styles.bundle.js"
  },
  devServer: {
-    contentBase: path.join(__dirname, "public"),
+    contentBase: [path.join(__dirname, "public"), path.join(__dirname, "..", "ui-webapp", "public")],
+    contentBasePublicPath: ["/", "/ui-webapp"],
    compress: false,
    overlay: true,
-    port: 5000,
+    port: 5000
  }
 };
--- a/scm-ui/ui-webapp/src/repos/sources/containers/Content.tsx
+++ b/scm-ui/ui-webapp/src/repos/sources/containers/Content.tsx
@@ -58,10 +58,6 @@ const Header = styled.div`
  padding: 0.5em 0.75em;
 `;

-const VCenteredChild = styled.div`
-  align-items: center;
-`;
-
 const RightMarginIcon = styled(Icon)`
  margin-right: 0.5em;
 `;
@@ -128,7 +124,7 @@ class Content extends React.Component<Props, State> {

    return (
      <span className="has-cursor-pointer">
-        <VCenteredChild className={classNames("media", "is-flex")}>
+        <div className={classNames("media", "is-flex", "is-align-items-center")}>
          <div className="media-content" onClick={this.toggleCollapse}>
            <RightMarginIcon name={icon} color="inherit" />
            <span className="is-word-break">{file.name}</span>
@@ -151,7 +147,7 @@ class Content extends React.Component<Props, State> {
              renderAll={true}
            />
          </div>
-        </VCenteredChild>
+        </div>
      </span>
    );
  }