contentbox + fixed title ellipsis

packages/core/admin/admin/src/pages/SettingsPage/pages/Users/components/MagicLink/MagicLinkWrapper.js

@@ -44,6 +44,7 @@ const MagicLinkWrapper = ({ children, target }) => {
         </CopyToClipboard>
       }
       title={target}
+      titleEllipsis
       subtitle={children}
       icon={<Envelope />}
       iconBackground="neutral100"

packages/core/helper-plugin/lib/src/components/ContentBox/ContentBox.stories.mdx

@@ -47,6 +47,7 @@ TODO
         iconBackground="alternative100"
       />
       <ContentBox
+        titleEllipsis
         endAction={<IconButton label="Duplicate" noBorder icon={<Duplicate />} />}
         title="http://localhost:4000/admin/auth/register?registrationToken=e02849fabef5239fe3c459d23d8c3b30d5057aa9"
         subtitle="Send this link to the user for them to connect"

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

@@ -4,7 +4,7 @@ import styled from 'styled-components';
 import { Flex } from '@strapi/design-system/Flex';
 import { Stack } from '@strapi/design-system/Stack';
 import { Text } from '@strapi/design-system/Text';
-import customEllipsis from '../../utils/customEllipsis';
+import { Typography } from '@strapi/design-system/Typography';
 
 const IconWrapper = styled(Flex)`
   margin-right: ${({ theme }) => theme.spaces[6]};
@@ -14,11 +14,13 @@ const IconWrapper = styled(Flex)`
   }
 `;
 
-const ContentBox = ({ title, subtitle, icon, iconBackground, endAction }) => {
+const TypographyWordBreak = styled(Typography)`
-  const firstTitleChar = title.substring(0, 4);
+  word-break: break-all;
+`;
 
-  if (title.length > 70 && firstTitleChar === 'http') {
+const ContentBox = ({ title, subtitle, icon, iconBackground, endAction, titleEllipsis }) => {
-    title = customEllipsis(title);
+  if (title.length > 70 && titleEllipsis) {
+    title = `${title.substring(0, 70)}...`;
   }
 
   return (
@@ -28,9 +30,9 @@ const ContentBox = ({ title, subtitle, icon, iconBackground, endAction }) => {
       </IconWrapper>
       <Stack size={endAction ? 0 : 1}>
         <Flex>
-          <Text small bold style={{ wordBreak: 'break-all' }}>
+          <TypographyWordBreak variant="pi" fontWeight="bold">
             {title}
-          </Text>
+          </TypographyWordBreak>
           {endAction}
         </Flex>
         <Text textColor="neutral600">{subtitle}</Text>
@@ -40,6 +42,7 @@ const ContentBox = ({ title, subtitle, icon, iconBackground, endAction }) => {
 };
 
 ContentBox.defaultProps = {
+  titleEllipsis: false,
   title: undefined,
   subtitle: undefined,
   icon: undefined,
@@ -48,6 +51,7 @@ ContentBox.defaultProps = {
 };
 
 ContentBox.propTypes = {
+  titleEllipsis: PropTypes.bool,
   title: PropTypes.string,
   subtitle: PropTypes.string,
   icon: PropTypes.node,

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

@@ -88,7 +88,6 @@ export { default as prefixPluginTranslations } from './utils/prefixPluginTransla
 export { default as pxToRem } from './utils/pxToRem';
 export { default as to } from './utils/await-to-js';
 export { default as setHexOpacity } from './utils/setHexOpacity';
-export { default as customEllipsis } from './utils/customEllipsis';
 export { default as translatedErrors } from './utils/translatedErrors';
 export { default as formatComponentData } from './content-manager/utils/formatComponentData';
 export { findMatchingPermissions } from './utils/hasPermissions';

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

@@ -1,25 +0,0 @@
-<!--- 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
-
-```js
-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

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