fix(collective-page): add hover tooltip to collective names displayed in hero header

components/LinkCollective.js

@@ -17,7 +17,7 @@ const getEventParentCollectiveSlug = parentCollective => {
  * Create a `Link` to the collective based on collective type.
  * It properly deals with type `EVENT` and `isIncognito`
  */
-const LinkCollective = ({ target, title, collective, children, ...props }) => {
+const LinkCollective = ({ target, title, noTitle, collective, children, ...props }) => {
   if (!collective || collective.isIncognito) {
     return children || <FormattedMessage id="profile.incognito" defaultMessage="Incognito" />;
   } else if (collective.isGuest) {
@@ -37,13 +37,13 @@ const LinkCollective = ({ target, title, collective, children, ...props }) => {
     return children || <FormattedMessage id="profile.incognito" defaultMessage="Incognito" />;
   }
   return type !== 'EVENT' ? (
-    <Link href={`/${slug}`} {...props} title={title || name} target={target}>
+    <Link href={`/${slug}`} {...props} title={noTitle ? null : title || name} target={target}>
       {children || name || slug}
     </Link>
   ) : (
     <Link
       href={`/${getEventParentCollectiveSlug(parentCollective)}/events/${slug}`}
-      title={title || name}
+      title={noTitle ? null : title || name}
       target={target}
       {...props}
     >
@@ -68,6 +68,8 @@ LinkCollective.propTypes = {
   children: PropTypes.node,
   title: PropTypes.string,
   target: PropTypes.string,
+  /** Set this to true to remove the `title` attribute from the link */
+  noTitle: PropTypes.bool,
 };
 
 export default LinkCollective;

components/TruncatedTextWithTooltip.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { truncate } from 'lodash';
+
+import StyledTooltip from './StyledTooltip';
+import { Span } from './Text';
+
+/**
+ * A tooltip that truncates a value if it's longer than the
+ * provided length.
+ */
+const TruncatedTextWithTooltip = ({ value, length = 30 }) => {
+  if (value.length <= length) {
+    return value;
+  } else {
+    return (
+      <React.Fragment>
+        <StyledTooltip content={() => <Span color="black.100">{value}</Span>}>
+          {truncate(value, { length })}
+        </StyledTooltip>
+      </React.Fragment>
+    );
+  }
+};
+
+TruncatedTextWithTooltip.propTypes = {
+  value: PropTypes.string.isRequired,
+  length: PropTypes.number,
+};
+
+export default TruncatedTextWithTooltip;

components/__tests__/TruncatedTextWithTooltip.test.js

@@ -0,0 +1,27 @@
+import 'jest-styled-components';
+
+import React from 'react';
+import { ThemeProvider } from 'styled-components';
+
+import theme from '../../lib/theme';
+import { snapshot } from '../../test/snapshot-helpers';
+
+import TruncatedTextWithTooltip from '../TruncatedTextWithTooltip';
+
+describe('TruncatedTextWithTooltip component', () => {
+  it('renders default options', () => {
+    snapshot(
+      <ThemeProvider theme={theme}>
+        <TruncatedTextWithTooltip value="A short string" />
+      </ThemeProvider>,
+    );
+  });
+
+  it('renders default options', () => {
+    snapshot(
+      <ThemeProvider theme={theme}>
+        <TruncatedTextWithTooltip value="a string that is more than 30 characters long" />
+      </ThemeProvider>,
+    );
+  });
+});

components/__tests__/__snapshots__/TruncatedTextWithTooltip.test.js.snap

@@ -0,0 +1,23 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TruncatedTextWithTooltip component renders default options 1`] = `"A short string"`;
+
+exports[`TruncatedTextWithTooltip component renders default options 2`] = `
+.c0 {
+  display: inline-block;
+  cursor: help;
+}
+
+.c0 button:disabled {
+  pointer-events: none;
+}
+
+<div
+  className="c0"
+  display="inline-block"
+  onMouseEnter={[Function]}
+  onMouseLeave={[Function]}
+>
+  a string that is more than ...
+</div>
+`;

components/collective-page/hero/Hero.js

@@ -26,6 +26,7 @@ import StyledLink from '../../StyledLink';
 import StyledRoundButton from '../../StyledRoundButton';
 import StyledTag from '../../StyledTag';
 import { H1, Span } from '../../Text';
+import TruncatedTextWithTooltip from '../../TruncatedTextWithTooltip';
 import UserCompany from '../../UserCompany';
 import ContainerSectionContent from '../ContainerSectionContent';
 
@@ -85,6 +86,7 @@ const Hero = ({ collective, host, isAdmin, onPrimaryColorChange }) => {
   const isEvent = collective.type === CollectiveType.EVENT;
   const isProject = collective.type === CollectiveType.PROJECT;
   const isFund = collective.type === CollectiveType.FUND;
+  const parentIsHost = collective.connectedTo.length !== 0 && collective.connectedTo[0].collective.id === host.id;
 
   const handleHeroMessage = msg => {
     if (!msg) {
@@ -242,25 +244,25 @@ const Hero = ({ collective, host, isAdmin, onPrimaryColorChange }) => {
                       values={{
                         FiscalHost: <DefinedTerm term={Terms.FISCAL_HOST} color="black.700" />,
                         hostName: (
-                          <LinkCollective collective={host}>
-                            <Span data-cy="fiscalHostName" color="black.700">
-                              {host.name}
+                          <LinkCollective collective={host} data-cy="fiscalHostName" noTitle>
+                            <Span color="black.700">
+                              <TruncatedTextWithTooltip value={host.name} />
                             </Span>
                           </LinkCollective>
                         ),
                       }}
                     />
                   </Container>
-                  {collective.connectedTo.length !== 0 && (
+                  {!parentIsHost && collective.connectedTo.length > 0 && (
                     <Container mx={1} color="black.700" my="12px">
                       <FormattedMessage
                         id="Collective.Hero.ParentCollective"
                         defaultMessage="Part of: {parentName}"
                         values={{
                           parentName: (
-                            <LinkCollective collective={collective.connectedTo[0].collective}>
-                              <Span data-cy="parentCollectiveName" color="black.700">
-                                {collective.connectedTo[0].collective.name}
+                            <LinkCollective collective={collective} noTitle>
+                              <Span color="black.700" data-cy="parentCollectiveName">
+                                <TruncatedTextWithTooltip value={collective.connectedTo[0].collective.name} />
                               </Span>
                             </LinkCollective>
                           ),