customEllipsis in utils + updated tests

packages/core/helper-plugin/lib/src/components/ContentBox/index.js

@@ -4,6 +4,7 @@ import styled from 'styled-components';
 import { Row } from '@strapi/parts/Row';
 import { Stack } from '@strapi/parts/Stack';
 import { Text } from '@strapi/parts/Text';
+import customEllipsis from '../../utils/customEllipsis';
 
 const IconWrapper = styled(Row)`
   margin-right: ${({ theme }) => theme.spaces[6]};
@@ -17,11 +18,7 @@ const ContentBox = ({ title, subtitle, icon, iconBackground, endAction }) => {
   const firstTitleChar = title.substring(0, 4);
 
   if (title.length > 70 && firstTitleChar === 'http') {
-    const endSubstring = title.indexOf('registrationToken') + 20;
+    title = customEllipsis(title);
-    title = `${title.substring(0, endSubstring)}...${title.substring(
-      title.length - 3,
-      title.length
-    )}`;
   }
 
   return (

packages/core/helper-plugin/lib/src/components/ContentBox/tests/index.test.js

@@ -23,6 +23,7 @@ describe('ContentBox', () => {
 
     expect(firstChild).toMatchInlineSnapshot(`
       .c0 {
+        background: #ffffff;
         padding: 24px;
         border-radius: 4px;
         box-shadow: 0px 1px 4px rgba(33,33,52,0.1);
@@ -66,51 +67,20 @@ describe('ContentBox', () => {
         margin-top: 4px;
       }
 
-      .c8 {
+      .c5 {
+        font-weight: 500;
+        font-size: 0.75rem;
+        line-height: 1.33;
+        color: #32324d;
+      }
+
+      .c6 {
         font-weight: 400;
         font-size: 0.875rem;
         line-height: 1.43;
         color: #666687;
       }
 
-      .c7 {
-        font-weight: 400;
-        font-size: 0.75rem;
-        line-height: 1.33;
-        color: #4945ff;
-      }
-
-      .c5 {
-        display: -webkit-box;
-        display: -webkit-flex;
-        display: -ms-flexbox;
-        display: flex;
-        -webkit-flex-direction: row;
-        -ms-flex-direction: row;
-        flex-direction: row;
-        -webkit-align-items: center;
-        -webkit-box-align: center;
-        -ms-flex-align: center;
-        align-items: center;
-      }
-
-      .c6 {
-        background: transparent;
-        border: none;
-      }
-
-      .c6 svg {
-        display: -webkit-box;
-        display: -webkit-flex;
-        display: -ms-flexbox;
-        display: flex;
-        font-size: 0.625rem;
-      }
-
-      .c6 svg path {
-        fill: #4945ff;
-      }
-
       .c3 {
         margin-right: 24px;
       }
@@ -132,20 +102,14 @@ describe('ContentBox', () => {
           <div
             class="c1"
           >
-            <button
+            <span
-              aria-disabled="false"
+              class="c5"
-              class="c5 c6"
-              type="button"
             >
-              <span
+              Code example
-                class="c7"
+            </span>
-              >
-                Code example
-              </span>
-            </button>
           </div>
           <span
-            class="c8"
+            class="c6"
           >
             Learn by testing real project developed by the community
           </span>

packages/core/helper-plugin/lib/src/index.js

@@ -167,6 +167,7 @@ export { default as to } from './utils/await-to-js';
 
 // NEW UTILS
 export { default as setHexOpacity } from './utils/setHexOpacity';
+export { default as customEllipsis } from './utils/customEllipsis';
 
 // SVGS
 export { default as LayoutIcon } from './old/svgs/Layout';

packages/core/helper-plugin/lib/src/utils/customEllipsis/customEllipsis.stories.mdx

@@ -0,0 +1,25 @@
+<!--- customEllipsis.stories.mdx --->
+
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="utils/customEllipsis" />
+
+# customEllipsis
+
+This hook is used to have a custom ellipsis for large url
+
+## Usage
+
+```
+import { customEllipsis } from '@strapi/helper-plugin';
+
+const ContentBox = ({ title, subtitle, icon, iconBackground, endAction }) => {
+  const firstTitleChar = title.substring(0, 4);
+
+  if (title.length > 70 && firstTitleChar === 'http') {
+    //will return for example http://localhost:4000/admin/auth/register?registrationToken=e0...aa9
+    title = customEllipsis(title);
+  }
+
+  return <div>title</div>;
+```

packages/core/helper-plugin/lib/src/utils/customEllipsis/index.js

@@ -0,0 +1,6 @@
+const customEllipsis = title => {
+  const endSubstring = title.indexOf('registrationToken') + 20;
+  return `${title.substring(0, endSubstring)}...${title.substring(title.length - 3, title.length)}`;
+};
+
+export default customEllipsis;