[Styles] Prefer Anonymous Default Export Pattern

src/shared-components/accordion/index.tsx

@@ -5,15 +5,7 @@ import { useTheme } from 'emotion-theming';
 import type { ThemeType } from '../../constants';
 import { ChevronIcon } from '../../icons';
 import { Thumbnails } from './thumbnails';
-import {
-  AccordionBox,
-  ArrowWrapper,
-  Container,
-  Content,
-  ExpansionWrapper,
-  TitleWrapper,
-  Truncate,
-} from './style';
+import Style from './style';
 import { keyboardKeys } from '../../constants/keyboardKeys';
 
 export type BorderRadiusValues =
@@ -81,8 +73,12 @@ export const Accordion = ({
   };
 
   return (
-    <AccordionBox isOpen={isOpen} noBorder={!!noBorder} disabled={!!disabled}>
-      <TitleWrapper
+    <Style.AccordionBox
+      isOpen={isOpen}
+      noBorder={!!noBorder}
+      disabled={!!disabled}
+    >
+      <Style.TitleWrapper
         onClick={(event): void => {
           if (!disabled) {
             onClick(event);
@@ -97,29 +93,29 @@ export const Accordion = ({
         aria-disabled={!!disabled}
         aria-expanded={isOpen}
       >
-        <Truncate>{title}</Truncate>
-        <ArrowWrapper rightAlign={!!rightAlignArrow}>
+        <Style.Truncate>{title}</Style.Truncate>
+        <Style.ArrowWrapper rightAlign={!!rightAlignArrow}>
           <ChevronIcon rotate={isOpen ? 90 : 0} fill={theme.COLORS.primary} />
-        </ArrowWrapper>
-      </TitleWrapper>
-      <ExpansionWrapper
+        </Style.ArrowWrapper>
+      </Style.TitleWrapper>
+      <Style.ExpansionWrapper
         contentHeight={contentHeight}
         aria-disabled={!!disabled}
         aria-hidden={!isOpen}
       >
         <div ref={contentRef}>{children}</div>
-      </ExpansionWrapper>
-    </AccordionBox>
+      </Style.ExpansionWrapper>
+    </Style.AccordionBox>
   );
 };
 
-Accordion.Container = Container;
+Accordion.Container = Style.Container;
 
-Accordion.Content = Content;
+Accordion.Content = Style.Content;
 
 Accordion.Thumbnails = Thumbnails;
 
-Accordion.Truncate = Truncate;
+Accordion.Truncate = Style.Truncate;
 
 Accordion.propTypes = {
   borderRadius: PropTypes.string,

src/shared-components/accordion/style.ts

@@ -4,12 +4,12 @@ import { ANIMATION, BREAKPOINTS, SPACER, ThemeType } from '../../constants';
 
 import { BorderRadiusValues } from '.';
 
-export const Content = styled.div`
+const Content = styled.div`
   padding: ${SPACER.medium};
   width: 100%;
 `;
 
-export const ExpansionWrapper = styled.div<{ contentHeight: string }>`
+const ExpansionWrapper = styled.div<{ contentHeight: string }>`
   max-height: ${({ contentHeight }) => contentHeight};
   overflow: hidden;
   transition: max-height ${ANIMATION.defaultTiming} ease-in-out;
@@ -23,7 +23,7 @@ const getBorderStyle = (theme: ThemeType, isOpen: boolean) => `
   }
 `;
 
-export const AccordionBox = styled.div<{
+const AccordionBox = styled.div<{
   disabled: boolean;
   isOpen: boolean;
   noBorder: boolean;
@@ -47,7 +47,7 @@ export const AccordionBox = styled.div<{
       : ''};
 `;
 
-export const ArrowWrapper = styled.div<{ rightAlign: boolean }>`
+const ArrowWrapper = styled.div<{ rightAlign: boolean }>`
   display: flex;
   align-items: center;
 
@@ -57,7 +57,7 @@ export const ArrowWrapper = styled.div<{ rightAlign: boolean }>`
       : `padding: 0 ${SPACER.medium};`};
 `;
 
-export const TitleWrapper = styled.div<{
+const TitleWrapper = styled.div<{
   borderRadius?: BorderRadiusValues;
   disabled: boolean;
   isOpen: boolean;
@@ -85,7 +85,7 @@ export const TitleWrapper = styled.div<{
   }
 `;
 
-export const Truncate = styled.div`
+const Truncate = styled.div`
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
@@ -96,7 +96,7 @@ export const Truncate = styled.div`
  * borderRadius must match borderRadius passed to main <Accordion />
  * component if opting out of default values.
  */
-export const Container = styled.div<{
+const Container = styled.div<{
   borderRadius?: BorderRadiusValues;
 }>`
   box-shadow: ${({ theme }) => theme.BOX_SHADOWS.clickable};
@@ -134,3 +134,13 @@ export const Container = styled.div<{
   `;
   }}
 `;
+
+export default {
+  AccordionBox,
+  ArrowWrapper,
+  Container,
+  Content,
+  ExpansionWrapper,
+  TitleWrapper,
+  Truncate,
+};

src/shared-components/accordion/thumbnails/index.tsx

@@ -1,12 +1,6 @@
 import React from 'react';
 
-import {
-  Container,
-  ImageContainer,
-  ThumbnailImage,
-  MultiplesContainer,
-  MultiplesText,
-} from './style';
+import Style from './style';
 
 export interface ThumbnailsProps {
   /** An array of image src strings that Accordion.Thumbails will use to render */
@@ -24,24 +18,24 @@ export const Thumbnails = ({ photoSrcs }: ThumbnailsProps) => {
     }
 
     const firstThumbnail = (
-      <ImageContainer>
-        <ThumbnailImage alt="" src={photoSrcs[0]} />
-      </ImageContainer>
+      <Style.ImageContainer>
+        <Style.ThumbnailImage alt="" src={photoSrcs[0]} />
+      </Style.ImageContainer>
     );
 
     let secondThumbnail = null;
 
     if (photoSrcs.length === 2) {
       secondThumbnail = (
-        <ImageContainer>
-          <ThumbnailImage alt="" src={photoSrcs[1]} />
-        </ImageContainer>
+        <Style.ImageContainer>
+          <Style.ThumbnailImage alt="" src={photoSrcs[1]} />
+        </Style.ImageContainer>
       );
     } else if (photoSrcs.length > 2) {
       secondThumbnail = (
-        <MultiplesContainer>
-          <MultiplesText>+{photoSrcs.length - 1}</MultiplesText>
-        </MultiplesContainer>
+        <Style.MultiplesContainer>
+          <Style.MultiplesText>+{photoSrcs.length - 1}</Style.MultiplesText>
+        </Style.MultiplesContainer>
       );
     }
 
@@ -53,5 +47,5 @@ export const Thumbnails = ({ photoSrcs }: ThumbnailsProps) => {
     );
   };
 
-  return <Container>{renderThumbnails()}</Container>;
+  return <Style.Container>{renderThumbnails()}</Style.Container>;
 };

src/shared-components/accordion/thumbnails/style.ts

@@ -2,7 +2,7 @@ import styled from '@emotion/styled';
 import { TYPOGRAPHY_STYLE } from 'src/shared-components/typography';
 import { SPACER } from 'src/constants';
 
-export const Container = styled.div`
+const Container = styled.div`
   display: flex;
   flex-direction: row;
   margin-left: ${SPACER.large};
@@ -16,7 +16,7 @@ const thumbnailBase = `
   width: 1rem;
 `;
 
-export const ImageContainer = styled.div`
+const ImageContainer = styled.div`
   ${thumbnailBase}
   overflow: hidden;
   height: 1.5rem;
@@ -27,18 +27,27 @@ export const ImageContainer = styled.div`
   }
 `;
 
-export const ThumbnailImage = styled.img`
+const ThumbnailImage = styled.img`
   min-height: 1.5rem;
   min-width: 1rem;
   object-fit: cover;
 `;
 
-export const MultiplesContainer = styled.div`
+const MultiplesContainer = styled.div`
   ${thumbnailBase}
   background-color: ${({ theme }) => theme.COLORS.defaultBorder};
 `;
 
-export const MultiplesText = styled.div`
+const MultiplesText = styled.div`
   ${({ theme }) => TYPOGRAPHY_STYLE.label(theme)}
   font-size: 10px;
 `;
+
+export default {
+  Container,
+  ImageContainer,
+  MultiplesContainer,
+  MultiplesText,
+  thumbnailBase,
+  ThumbnailImage,
+};

src/shared-components/alert/index.tsx

@@ -4,14 +4,7 @@ import { useTheme } from 'emotion-theming';
 
 import { CheckmarkIcon, ChevronIcon, ErrorIcon, InfoIcon } from '../../icons';
 import { Avatar } from '../avatar';
-import {
-  AlertsContainer,
-  AlertContainer,
-  MainContainer,
-  IconContainer,
-  ContentContainer,
-  CtaContent,
-} from './style';
+import Style from './style';
 import { isDefined } from '../../utils/isDefined';
 
 const ANIMATION_DELAY = 500;
@@ -147,37 +140,37 @@ export const Alert = (alertProps: AlertProps) => {
   const Icon = alertIconMapping[type];
 
   return (
-    <AlertContainer
+    <Style.AlertContainer
       alertType={type}
       exiting={exiting}
       onClick={alertExitHandler}
       // eslint-disable-next-line react/jsx-props-no-spreading
       {...rest}
     >
-      <MainContainer>
-        <IconContainer hasAvatar={!!avatarSrc}>
+      <Style.MainContainer>
+        <Style.IconContainer hasAvatar={!!avatarSrc}>
           {avatarSrc ? (
             <Avatar size="small" src={avatarSrc} alt="avatar" />
           ) : (
             <Icon fill={theme.COLORS.white} />
           )}
-        </IconContainer>
-        <ContentContainer truncateText={truncateText} ref={contentText}>
+        </Style.IconContainer>
+        <Style.ContentContainer truncateText={truncateText} ref={contentText}>
           {content}
-        </ContentContainer>
-      </MainContainer>
+        </Style.ContentContainer>
+      </Style.MainContainer>
       {ctaContent && (
-        <CtaContent>
+        <Style.CtaContent>
           <div>{ctaContent}</div>
           <ChevronIcon fill={theme.COLORS.white} width={14} height={14} />
-        </CtaContent>
+        </Style.CtaContent>
       )}
-    </AlertContainer>
+    </Style.AlertContainer>
   );
 };
 
 Alert.Container = ({ children }: { children: React.ReactNode }) => (
-  <AlertsContainer>{children}</AlertsContainer>
+  <Style.AlertsContainer>{children}</Style.AlertsContainer>
 );
 
 Alert.propTypes = {

src/shared-components/alert/style.ts

@@ -5,7 +5,7 @@ import { MEDIA_QUERIES, SPACER, ANIMATION, ThemeType } from '../../constants';
 
 import type { AlertType } from '.';
 
-export const AlertsContainer = styled.div`
+const AlertsContainer = styled.div`
   display: flex;
   flex-direction: column;
   align-items: flex-end;
@@ -46,7 +46,7 @@ const errorAlertStyles = (theme: ThemeType) => `
   box-shadow: 0px 8px 24px rgba(189, 32, 15, 0.05);
 `;
 
-export const AlertContainer = styled.button<{
+const AlertContainer = styled.button<{
   alertType: AlertType;
   exiting: boolean;
 }>`
@@ -90,7 +90,7 @@ export const AlertContainer = styled.button<{
   }
 `;
 
-export const MainContainer = styled.div`
+const MainContainer = styled.div`
   display: flex;
   flex-flow: row nowrap;
   justify-content: flex-start;
@@ -100,12 +100,12 @@ export const MainContainer = styled.div`
   padding: ${SPACER.medium};
 `;
 
-export const ContentContainer = styled.div<{ truncateText: boolean }>`
+const ContentContainer = styled.div<{ truncateText: boolean }>`
   margin: -3px 0 0 ${SPACER.medium};
   max-height: ${({ truncateText }) => (truncateText ? '48px' : 'none')};
 `;
 
-export const CtaContent = styled.div`
+const CtaContent = styled.div`
   padding: ${SPACER.medium};
 
   display: flex;
@@ -117,7 +117,7 @@ export const CtaContent = styled.div`
   border-top: 1px solid rgba(255, 255, 255, 0.1);
 `;
 
-export const IconContainer = styled.div<{ hasAvatar: boolean }>`
+const IconContainer = styled.div<{ hasAvatar: boolean }>`
   ${({ hasAvatar }) =>
     hasAvatar &&
     `
@@ -130,3 +130,12 @@ export const IconContainer = styled.div<{ hasAvatar: boolean }>`
     fill: ${({ theme }) => theme.COLORS.white};
   }
 `;
+
+export default {
+  AlertsContainer,
+  AlertContainer,
+  ContentContainer,
+  CtaContent,
+  MainContainer,
+  IconContainer,
+};