Move display names to exported components

Author: colinrotherham

src/components/content-presentation/details/Details.tsx

@@ -32,6 +32,11 @@ const ExpanderGroup: FC<HTMLProps<HTMLDivElement>> = ({ className, ...rest }) =>
   <div className={classNames('nhsuk-expander-group', className)} {...rest} />
 );
 
+DetailsComponent.displayName = 'Details';
+DetailsSummary.displayName = 'Details.Summary';
+DetailsText.displayName = 'Details.Text';
+ExpanderGroup.displayName = 'Details.ExpanderGroup';
+
 DetailsComponent.Summary = DetailsSummary;
 DetailsComponent.Text = DetailsText;
 DetailsComponent.ExpanderGroup = ExpanderGroup;

src/components/content-presentation/do-and-dont-list/DoAndDontList.tsx

@@ -71,6 +71,9 @@ const DoAndDontItem: FC<DoAndDontItemProps> = ({ prefixText, listItemType, child
   );
 };
 
+DoAndDontListComponent.displayName = 'DoAndDontList';
+DoAndDontItem.displayName = 'DoAndDontList.Item';
+
 DoAndDontListComponent.Item = DoAndDontItem;
 
 export default DoAndDontListComponent;

src/components/content-presentation/hero/Hero.tsx

@@ -75,6 +75,10 @@ const HeroComponent: HeroComponent = ({ className, children, imageSrc, ...rest }
   </section>
 );
 
+HeroComponent.displayName = 'Hero';
+HeroHeading.displayName = 'Hero.Heading';
+HeroText.displayName = 'Hero.Text';
+
 HeroComponent.Heading = HeroHeading;
 HeroComponent.Text = HeroText;
 

src/components/content-presentation/images/Images.tsx

@@ -16,4 +16,6 @@ const ImagesComponent: FC<ImageProps> = ({ className, caption, ...rest }) => (
   </figure>
 );
 
+ImagesComponent.displayName = 'Images';
+
 export default ImagesComponent;

src/components/content-presentation/inset-text/InsetText.tsx

@@ -8,4 +8,6 @@ const InsetTextComponent: FC<HTMLProps<HTMLDivElement>> = ({ className, children
   </div>
 );
 
+InsetTextComponent.displayName = 'InsetText';
+
 export default InsetTextComponent;

src/components/content-presentation/summary-list/SummaryList.tsx

@@ -39,6 +39,12 @@ const SummaryListComponent: SummaryListComponent = ({ className, noBorder, ...re
   />
 );
 
+SummaryListComponent.displayName = 'SummaryList';
+SummaryListRow.displayName = 'SummaryList.Row';
+SummaryListKey.displayName = 'SummaryList.Key';
+SummaryListValue.displayName = 'SummaryList.Value';
+SummaryListActions.displayName = 'SummaryList.Actions';
+
 SummaryListComponent.Row = SummaryListRow;
 SummaryListComponent.Key = SummaryListKey;
 SummaryListComponent.Value = SummaryListValue;

src/components/content-presentation/table/Table.tsx

@@ -59,11 +59,13 @@ const TableComponent = ({
   );
 };
 
-TableComponent.Body = TableBody;
-TableComponent.Cell = TableCell;
+TableComponent.displayName = 'Table';
+
 TableComponent.Container = TableContainer;
-TableComponent.Head = TableHead;
 TableComponent.Panel = TablePanel;
+TableComponent.Head = TableHead;
+TableComponent.Body = TableBody;
 TableComponent.Row = TableRow;
+TableComponent.Cell = TableCell;
 
 export default TableComponent;

src/components/content-presentation/table/components/TablePanel.tsx

@@ -28,4 +28,6 @@ const TablePanel: FC<TablePanelProps> = ({
   </div>
 );
 
+TablePanel.displayName = 'Table.Panel';
+
 export default TablePanel;

src/components/content-presentation/tabs/Tabs.tsx

@@ -77,6 +77,12 @@ const TabsComponent: TabsComponent = ({ className, children, ...rest }) => {
   );
 };
 
+TabsComponent.displayName = 'Tabs';
+TabTitle.displayName = 'Tabs.Title';
+TabList.displayName = 'Tabs.List';
+TabListItem.displayName = 'Tabs.ListItem';
+TabContents.displayName = 'Tabs.Contents';
+
 TabsComponent.Title = TabTitle;
 TabsComponent.List = TabList;
 TabsComponent.ListItem = TabListItem;

src/components/content-presentation/tag/Tag.tsx

@@ -27,4 +27,6 @@ const TagComponent: FC<TagProps> = ({ className, color, modifier = color, ...res
   />
 );
 
+TagComponent.displayName = 'Tag';
+
 export default TagComponent;