From c2c64d8c0d1ae14bd092256f5f0a1cf0090cb7ff Mon Sep 17 00:00:00 2001 From: Michael Altamirano Date: Fri, 2 Apr 2021 09:16:29 -0500 Subject: [PATCH] [Styles] Prefer Anonymous Default Export Pattern (#903) * Transition Accordion style exports to anonymous default export * Export IconProps type * Convert Alert style exports * Convert banner * Use import type syntax where appropriate * OptionButton through VerificationMessages * Commit non-button/carousel changes * Move Button styles and types to base button directory, move Button component as sibling to others * Test diff * Reduce diff * Misc PR cleanup, add code comment about button exports --- src/shared-components/accordion/index.tsx | 38 +++++------ src/shared-components/accordion/style.ts | 24 +++++-- .../accordion/thumbnails/index.tsx | 28 +++----- .../accordion/thumbnails/style.ts | 19 ++++-- src/shared-components/alert/index.tsx | 31 ++++----- src/shared-components/alert/style.ts | 21 ++++-- src/shared-components/banner/index.tsx | 21 +++--- src/shared-components/banner/style.ts | 15 +++-- .../button}/__snapshots__/test.tsx.snap | 0 .../button/{ => components/button}/index.tsx | 26 +++---- .../button/{ => components/button}/test.tsx | 2 +- .../button/components/linkButton/index.tsx | 6 +- .../button/components/linkButton/style.ts | 8 ++- .../button/components/roundButton/index.tsx | 30 ++++----- .../button/components/roundButton/style.ts | 18 +++-- .../button/components/textButton/index.tsx | 6 +- .../button/components/textButton/style.ts | 6 +- src/shared-components/button/index.ts | 6 ++ .../button/shared-components/loader/index.tsx | 2 +- .../button/shared-components/loader/style.ts | 2 +- src/shared-components/button/style.ts | 21 +++--- src/shared-components/button/types.ts | 18 +++++ .../carousel/arrow/index.tsx | 8 +-- src/shared-components/carousel/arrow/style.ts | 6 +- src/shared-components/carousel/index.tsx | 15 +++-- src/shared-components/carousel/style.ts | 8 ++- src/shared-components/chip/index.tsx | 8 +-- src/shared-components/chip/style.ts | 6 +- src/shared-components/dialogModal/index.tsx | 24 +++---- src/shared-components/dialogModal/style.ts | 18 +++-- .../dropdown/desktopDropdown.tsx | 31 ++++----- .../dropdown/mobileDropdown.tsx | 12 ++-- src/shared-components/dropdown/style.ts | 21 ++++-- src/shared-components/field/index.tsx | 30 ++++----- src/shared-components/field/style.ts | 21 ++++-- .../immersiveModal/index.tsx | 67 +++++++++---------- src/shared-components/immersiveModal/style.ts | 39 +++++++---- src/shared-components/index.ts | 1 + src/shared-components/indicator/index.tsx | 9 ++- src/shared-components/indicator/style.ts | 4 +- .../loadingSpinner/index.tsx | 16 ++--- src/shared-components/loadingSpinner/style.ts | 8 ++- src/shared-components/optionButton/index.tsx | 34 ++++------ src/shared-components/optionButton/style.ts | 28 +++++--- src/shared-components/progressBar/index.tsx | 8 +-- src/shared-components/progressBar/style.ts | 6 +- .../selectorButton/index.tsx | 27 ++++---- src/shared-components/selectorButton/style.ts | 18 +++-- src/shared-components/tabs/index.tsx | 10 +-- src/shared-components/tabs/style.ts | 6 +- src/shared-components/toggle/index.tsx | 22 +++--- src/shared-components/toggle/style.ts | 18 +++-- src/shared-components/tooltip/index.tsx | 29 ++++---- src/shared-components/tooltip/style.ts | 18 +++-- src/shared-components/transitions/index.tsx | 12 ++-- src/shared-components/transitions/style.ts | 9 ++- .../formatMessage/index.tsx | 2 +- .../verificationMessages/index.tsx | 10 +-- .../verificationMessages/style.ts | 8 ++- 59 files changed, 532 insertions(+), 433 deletions(-) rename src/shared-components/button/{ => components/button}/__snapshots__/test.tsx.snap (100%) rename src/shared-components/button/{ => components/button}/index.tsx (79%) rename src/shared-components/button/{ => components/button}/test.tsx (97%) create mode 100644 src/shared-components/button/index.ts create mode 100644 src/shared-components/button/types.ts diff --git a/src/shared-components/accordion/index.tsx b/src/shared-components/accordion/index.tsx index 9bc2099b2..cfdbac547 100644 --- a/src/shared-components/accordion/index.tsx +++ b/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 ( - - + { if (!disabled) { onClick(event); @@ -97,29 +93,29 @@ export const Accordion = ({ aria-disabled={!!disabled} aria-expanded={isOpen} > - {title} - + {title} + - - - + +
{children}
- - + + ); }; -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, diff --git a/src/shared-components/accordion/style.ts b/src/shared-components/accordion/style.ts index 6f3d0ffa3..d924cf854 100644 --- a/src/shared-components/accordion/style.ts +++ b/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 * 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, +}; diff --git a/src/shared-components/accordion/thumbnails/index.tsx b/src/shared-components/accordion/thumbnails/index.tsx index 93c619791..69362d5de 100644 --- a/src/shared-components/accordion/thumbnails/index.tsx +++ b/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 = ( - - - + + + ); let secondThumbnail = null; if (photoSrcs.length === 2) { secondThumbnail = ( - - - + + + ); } else if (photoSrcs.length > 2) { secondThumbnail = ( - - +{photoSrcs.length - 1} - + + +{photoSrcs.length - 1} + ); } @@ -53,5 +47,5 @@ export const Thumbnails = ({ photoSrcs }: ThumbnailsProps) => { ); }; - return {renderThumbnails()}; + return {renderThumbnails()}; }; diff --git a/src/shared-components/accordion/thumbnails/style.ts b/src/shared-components/accordion/thumbnails/style.ts index c9b30a47a..a0662975f 100644 --- a/src/shared-components/accordion/thumbnails/style.ts +++ b/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, +}; diff --git a/src/shared-components/alert/index.tsx b/src/shared-components/alert/index.tsx index f090c6c9d..176157190 100644 --- a/src/shared-components/alert/index.tsx +++ b/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 ( - - - + + {avatarSrc ? ( ) : ( )} - - + + {content} - - + + {ctaContent && ( - +
{ctaContent}
- + )} - + ); }; Alert.Container = ({ children }: { children: React.ReactNode }) => ( - {children} + {children} ); Alert.propTypes = { diff --git a/src/shared-components/alert/style.ts b/src/shared-components/alert/style.ts index b03d6c57c..d7683e497 100644 --- a/src/shared-components/alert/style.ts +++ b/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, +}; diff --git a/src/shared-components/banner/index.tsx b/src/shared-components/banner/index.tsx index 36308783d..6439fbe06 100644 --- a/src/shared-components/banner/index.tsx +++ b/src/shared-components/banner/index.tsx @@ -3,12 +3,7 @@ import PropTypes from 'prop-types'; import { useTheme } from 'emotion-theming'; import { CheckmarkIcon, ErrorIcon, InfoIcon } from '../../icons'; -import { - BannerContainer, - MainContainer, - ContentContainer, - IconContainer, -} from './style'; +import Style from './style'; const bannerIconMapping = { success: CheckmarkIcon, @@ -37,18 +32,18 @@ export const Banner = ({ content, onClick, type = 'default' }: BannerProps) => { const Icon = bannerIconMapping[type]; return ( - - - + + - - {content} - - + + {content} + + ); }; diff --git a/src/shared-components/banner/style.ts b/src/shared-components/banner/style.ts index 665ceba18..a46277674 100644 --- a/src/shared-components/banner/style.ts +++ b/src/shared-components/banner/style.ts @@ -20,7 +20,7 @@ const errorAlertStyles = (theme: ThemeType) => ` box-shadow: 0px 8px 24px rgba(189, 32, 15, 0.05); `; -export const BannerContainer = styled.button<{ +const BannerContainer = styled.button<{ bannerType: BannerType; onClick?: () => void; }>` @@ -55,7 +55,7 @@ export const BannerContainer = styled.button<{ } `; -export const MainContainer = styled.div` +const MainContainer = styled.div` width: 100%; display: flex; flex-flow: row nowrap; @@ -65,14 +65,21 @@ export const MainContainer = styled.div` font-size: ${({ theme }) => theme.TYPOGRAPHY.fontSize.caption}; `; -export const ContentContainer = styled.div` +const ContentContainer = styled.div` margin: -3px 0 0 ${SPACER.medium}; `; -export const IconContainer = styled.div` +const IconContainer = styled.div` svg { height: ${SPACER.medium}; width: ${SPACER.medium}; fill: ${({ theme }) => theme.COLORS.white}; } `; + +export default { + BannerContainer, + ContentContainer, + IconContainer, + MainContainer, +}; diff --git a/src/shared-components/button/__snapshots__/test.tsx.snap b/src/shared-components/button/components/button/__snapshots__/test.tsx.snap similarity index 100% rename from src/shared-components/button/__snapshots__/test.tsx.snap rename to src/shared-components/button/components/button/__snapshots__/test.tsx.snap diff --git a/src/shared-components/button/index.tsx b/src/shared-components/button/components/button/index.tsx similarity index 79% rename from src/shared-components/button/index.tsx rename to src/shared-components/button/components/button/index.tsx index 377bcf4fa..ff00471d2 100644 --- a/src/shared-components/button/index.tsx +++ b/src/shared-components/button/components/button/index.tsx @@ -2,26 +2,17 @@ import React from 'react'; import PropTypes from 'prop-types'; import { useTheme } from 'emotion-theming'; -import Loader from './shared-components/loader'; -import Container from './shared-components/container'; -import { ButtonBase, ButtonText, ButtonContents } from './style'; -import withDeprecationWarning from '../../utils/withDeprecationWarning'; -import { LinkButton } from './components/linkButton'; -import { AnchorLinkButton } from './components/anchorLinkButton'; -import RoundButton from './components/roundButton'; -import { TextButton } from './components/textButton'; +import Loader from '../../shared-components/loader'; +import Container from '../../shared-components/container'; +import withDeprecationWarning from '../../../../utils/withDeprecationWarning'; import { deprecatedProperties, isLoadingPropFunction, -} from './deprecatedPropsHandler'; -import { COLORS_PROP_TYPES, ThemeColors } from '../../constants'; -import { isDefined } from '../../utils/isDefined'; - -export type ButtonType = 'primary' | 'secondary' | 'tertiary' | 'quaternary'; -/** - * RoundButton can also accept a buttonType prop of 'action' - */ -export type ButtonTypeWithAction = ButtonType | 'action'; +} from '../../deprecatedPropsHandler'; +import { COLORS_PROP_TYPES, ThemeColors } from '../../../../constants'; +import { isDefined } from '../../../../utils/isDefined'; +import type { ButtonType } from '../../types'; +import { ButtonBase, ButtonContents, ButtonText } from '../../style'; export interface ButtonProps { buttonColor?: ThemeColors; @@ -141,7 +132,6 @@ Button.propTypes = { textColor: PropTypes.string, }; -export { AnchorLinkButton, LinkButton, RoundButton, TextButton }; const ButtonComponent = withDeprecationWarning(Button, deprecatedProperties); export { ButtonComponent as Button }; diff --git a/src/shared-components/button/test.tsx b/src/shared-components/button/components/button/test.tsx similarity index 97% rename from src/shared-components/button/test.tsx rename to src/shared-components/button/components/button/test.tsx index 04a6c3227..7706bcb9d 100644 --- a/src/shared-components/button/test.tsx +++ b/src/shared-components/button/components/button/test.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { userEvent, render } from 'src/tests/testingLibraryHelpers'; import { assert } from 'src/utils/assert'; -import { CameraIcon } from '../../icons'; +import { CameraIcon } from '../../../../icons'; import { Button } from './index'; diff --git a/src/shared-components/button/components/linkButton/index.tsx b/src/shared-components/button/components/linkButton/index.tsx index 2820330e6..f92a24b9b 100644 --- a/src/shared-components/button/components/linkButton/index.tsx +++ b/src/shared-components/button/components/linkButton/index.tsx @@ -3,9 +3,9 @@ import PropTypes from 'prop-types'; import { useTheme } from 'emotion-theming'; import Container from '../../shared-components/container'; -import type { ButtonType } from '../..'; +import type { ButtonType } from '../../types'; import { ButtonContents, ButtonText } from '../../style'; -import { linkButtonStyles } from './style'; +import Style from './style'; import { COLORS_PROP_TYPES, ThemeColors } from '../../../../constants'; export interface LinkProps { @@ -54,7 +54,7 @@ export const LinkButton = ({ return ( - + false} disabled={disabled} buttonType={buttonType} @@ -89,21 +83,27 @@ export const RoundButton = ({ buttonColor={buttonColorWithTheme} buttonType={buttonType} disabled={disabled} - css={roundButtonLoader(disabled, theme)} + css={Style.roundButtonLoader(disabled, theme)} isLoading={loadingVal} textColor={textColor} /> - + {isDefined(children) && ( -

+

{children}

)} - + ); }; -RoundButton.Container = RoundButtonContainer; +RoundButton.Container = Style.RoundButtonContainer; RoundButton.propTypes = { buttonColor: COLORS_PROP_TYPES, diff --git a/src/shared-components/button/components/roundButton/style.ts b/src/shared-components/button/components/roundButton/style.ts index 2246e3f85..e9a824fdf 100644 --- a/src/shared-components/button/components/roundButton/style.ts +++ b/src/shared-components/button/components/roundButton/style.ts @@ -13,7 +13,7 @@ const multiStyles = ` margin: 0 auto; `; -export const RoundButtonContainer = styled.div<{ multi: boolean }>` +const RoundButtonContainer = styled.div<{ multi: boolean }>` display: flex; justify-content: center; align-items: start; @@ -21,14 +21,14 @@ export const RoundButtonContainer = styled.div<{ multi: boolean }>` ${({ multi }) => multi && multiStyles}; `; -export const RoundButtonWrapper = styled.div` +const RoundButtonWrapper = styled.div` align-items: center; display: flex; flex-direction: column; justify-content: center; `; -export const RoundButtonBase = styled(ButtonBase)` +const RoundButtonBase = styled(ButtonBase)` border-radius: 50%; max-width: unset; min-height: unset; @@ -54,7 +54,7 @@ export const RoundButtonBase = styled(ButtonBase)` } `; -export const roundButtonLoader = (disabled: boolean, theme: ThemeType) => css` +const roundButtonLoader = (disabled: boolean, theme: ThemeType) => css` width: 36px; margin: -3px -3px 0 0; @@ -118,7 +118,7 @@ const buttonTextColor = ( : determineAlternateTextColor(buttonColor, theme); }; -export const roundButtonTextStyles = ( +const roundButtonTextStyles = ( buttonColor: ThemeColors, theme: ThemeType, textColor?: ThemeColors, @@ -126,3 +126,11 @@ export const roundButtonTextStyles = ( color: ${buttonTextColor(buttonColor, theme, textColor)}; margin: 10px 0; `; + +export default { + RoundButtonBase, + RoundButtonContainer, + roundButtonLoader, + roundButtonTextStyles, + RoundButtonWrapper, +}; diff --git a/src/shared-components/button/components/textButton/index.tsx b/src/shared-components/button/components/textButton/index.tsx index 5b22f48d7..98820f65c 100644 --- a/src/shared-components/button/components/textButton/index.tsx +++ b/src/shared-components/button/components/textButton/index.tsx @@ -2,7 +2,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import { ButtonContents } from '../../style'; -import { BaseTextButton } from './style'; +import Style from './style'; export interface TextButtonProps { /** @@ -25,7 +25,7 @@ export const TextButton = ({ onClick = () => undefined, ...rest }: TextButtonProps) => ( - {children} - + ); TextButton.propTypes = { diff --git a/src/shared-components/button/components/textButton/style.ts b/src/shared-components/button/components/textButton/style.ts index 9aa393368..f64bbdf71 100644 --- a/src/shared-components/button/components/textButton/style.ts +++ b/src/shared-components/button/components/textButton/style.ts @@ -1,6 +1,6 @@ import styled from '@emotion/styled'; -export const BaseTextButton = styled.button<{ disabled: boolean }>` +const BaseTextButton = styled.button<{ disabled: boolean }>` border-color: transparent; background-color: transparent; border-radius: ${({ theme }) => theme.BORDER_RADIUS.small}; @@ -20,3 +20,7 @@ export const BaseTextButton = styled.button<{ disabled: boolean }>` box-shadow: ${({ theme }) => theme.BOX_SHADOWS.focus}; } `; + +export default { + BaseTextButton, +}; diff --git a/src/shared-components/button/index.ts b/src/shared-components/button/index.ts new file mode 100644 index 000000000..d7622db7a --- /dev/null +++ b/src/shared-components/button/index.ts @@ -0,0 +1,6 @@ +export * from './components/anchorLinkButton'; +export * from './components/button'; +export * from './components/linkButton'; +export * from './components/roundButton'; +export * from './components/textButton'; +export * from './types'; diff --git a/src/shared-components/button/shared-components/loader/index.tsx b/src/shared-components/button/shared-components/loader/index.tsx index 5bf727ef1..5fb1111ca 100644 --- a/src/shared-components/button/shared-components/loader/index.tsx +++ b/src/shared-components/button/shared-components/loader/index.tsx @@ -1,7 +1,7 @@ import React from 'react'; import ButtonLoader from './style'; -import type { ButtonTypeWithAction } from '../..'; +import type { ButtonTypeWithAction } from '../../types'; import type { ThemeColors } from '../../../../constants'; export interface LoaderProps { diff --git a/src/shared-components/button/shared-components/loader/style.ts b/src/shared-components/button/shared-components/loader/style.ts index 46d34d7da..f72aa33d9 100644 --- a/src/shared-components/button/shared-components/loader/style.ts +++ b/src/shared-components/button/shared-components/loader/style.ts @@ -2,7 +2,7 @@ import styled from '@emotion/styled'; import tinycolor from 'tinycolor2'; import { keyframes } from '@emotion/core'; -import type { ButtonTypeWithAction } from '../..'; +import type { ButtonTypeWithAction } from '../../types'; import type { ThemeColors, ThemeType } from '../../../../constants'; import { primaryButtonLoadingBackgroundColor } from '../../../../utils/themeStyles'; import { isDefined } from '../../../../utils/isDefined'; diff --git a/src/shared-components/button/style.ts b/src/shared-components/button/style.ts index 3503c881f..828645b45 100644 --- a/src/shared-components/button/style.ts +++ b/src/shared-components/button/style.ts @@ -1,3 +1,11 @@ +/** + * We do not use our pattern of anonymous default exports in this file because + * these styles are shared across all button components. To make the distinction + * between styles defined specifically for the components, and shared styles, we + * use named exports for the shared styles and anonymous default exports for the + * component-specific styles + */ + import styled from '@emotion/styled'; import tinycolor from 'tinycolor2'; @@ -10,8 +18,7 @@ import { setThemeLineHeight, } from '../../utils/themeStyles'; import { isDefined } from '../../utils/isDefined'; - -import type { ButtonTypeWithAction } from '.'; +import type { BaseButtonStylesTypes, ButtonTypeWithAction } from './types'; const primaryStyles = (buttonColor: ThemeColors, theme: ThemeType) => { const backgroundColor = primaryButtonBackgroundColor(theme, buttonColor); @@ -160,16 +167,6 @@ function parseTheme( } } -export interface BaseButtonStylesTypes { - buttonColor: ThemeColors; - buttonType: ButtonTypeWithAction; - disabled: boolean; - isFullWidth: boolean; - isLoading: boolean; - textColor?: ThemeColors; - theme: ThemeType; -} - export const baseButtonStyles = ({ disabled, buttonType, diff --git a/src/shared-components/button/types.ts b/src/shared-components/button/types.ts new file mode 100644 index 000000000..17b3263ba --- /dev/null +++ b/src/shared-components/button/types.ts @@ -0,0 +1,18 @@ +import type { ThemeColors, ThemeType } from '../../constants'; + +export type ButtonType = 'primary' | 'secondary' | 'tertiary' | 'quaternary'; + +/** + * RoundButton can also accept a buttonType prop of 'action' + */ +export type ButtonTypeWithAction = ButtonType | 'action'; + +export interface BaseButtonStylesTypes { + buttonColor: ThemeColors; + buttonType: ButtonTypeWithAction; + disabled: boolean; + isFullWidth: boolean; + isLoading: boolean; + textColor?: ThemeColors; + theme: ThemeType; +} diff --git a/src/shared-components/carousel/arrow/index.tsx b/src/shared-components/carousel/arrow/index.tsx index 577c6ccab..6d0b72b60 100644 --- a/src/shared-components/carousel/arrow/index.tsx +++ b/src/shared-components/carousel/arrow/index.tsx @@ -1,8 +1,8 @@ import React from 'react'; -import { RoundButton } from '../../button'; +import { RoundButton } from '../../button/components/roundButton'; import { ArrowLeftIcon, ArrowRightIcon } from '../../../icons'; -import { ArrowContainer, BottomRightAlignedArrowContainer } from './style'; +import Style from './style'; export interface ArrowProps { bottomRightAlignedArrows?: boolean; @@ -20,8 +20,8 @@ const Arrow = ({ prev = false, }: ArrowProps) => { const ArrowContainerComponent = bottomRightAlignedArrows - ? BottomRightAlignedArrowContainer - : ArrowContainer; + ? Style.BottomRightAlignedArrowContainer + : Style.ArrowContainer; return ( diff --git a/src/shared-components/carousel/arrow/style.ts b/src/shared-components/carousel/arrow/style.ts index d0a742838..20e109ed2 100644 --- a/src/shared-components/carousel/arrow/style.ts +++ b/src/shared-components/carousel/arrow/style.ts @@ -2,7 +2,7 @@ import styled from '@emotion/styled'; import { SPACER, Z_SCALE } from '../../../constants'; -export const ArrowContainer = styled.div<{ +const ArrowContainer = styled.div<{ disabled: boolean; next: boolean; prev: boolean; @@ -19,7 +19,7 @@ export const ArrowContainer = styled.div<{ ${({ disabled }) => (disabled ? `display: none;` : '')} `; -export const BottomRightAlignedArrowContainer = styled.div<{ +const BottomRightAlignedArrowContainer = styled.div<{ disabled: boolean; next: boolean; prev: boolean; @@ -46,3 +46,5 @@ export const BottomRightAlignedArrowContainer = styled.div<{ ` : ''}; `; + +export default { ArrowContainer, BottomRightAlignedArrowContainer }; diff --git a/src/shared-components/carousel/index.tsx b/src/shared-components/carousel/index.tsx index b805b3899..93b1d2774 100644 --- a/src/shared-components/carousel/index.tsx +++ b/src/shared-components/carousel/index.tsx @@ -3,7 +3,7 @@ import PropTypes from 'prop-types'; import Slider from 'react-slick'; import Arrow from './arrow'; -import { OuterContainer, InnerContainer, Card } from './style'; +import Style from './style'; import { isDefined } from '../../utils/isDefined'; const FIRST_INDEX = 0; @@ -157,18 +157,21 @@ export const Carousel = ({ }; return ( - - + + {/* eslint-disable-next-line react/jsx-props-no-spreading */} {children} - - + + ); }; -Carousel.Card = Card; +Carousel.Card = Style.Card; Carousel.propTypes = { autoplay: PropTypes.bool, diff --git a/src/shared-components/carousel/style.ts b/src/shared-components/carousel/style.ts index 3bc9fa30f..37a7e246f 100644 --- a/src/shared-components/carousel/style.ts +++ b/src/shared-components/carousel/style.ts @@ -4,7 +4,7 @@ import { SPACER, ThemeType } from '../../constants'; import type { CarouselType } from '.'; -export const Card = styled.div` +const Card = styled.div` width: 311px !important; min-height: 48px; margin: 0 ${SPACER.small}; @@ -178,11 +178,11 @@ const parseOuterStyle = (numCardsVisible: number) => { `; }; -export const OuterContainer = styled.div<{ numCardsVisible: number }>` +const OuterContainer = styled.div<{ numCardsVisible: number }>` ${({ numCardsVisible }) => parseOuterStyle(numCardsVisible)}; `; -export const InnerContainer = styled.div<{ +const InnerContainer = styled.div<{ carouselType: CarouselType; }>` overflow: hidden !important; @@ -200,3 +200,5 @@ export const InnerContainer = styled.div<{ ${({ carouselType, theme }) => parseStyle(carouselType, theme)} `; + +export default { Card, InnerContainer, OuterContainer }; diff --git a/src/shared-components/chip/index.tsx b/src/shared-components/chip/index.tsx index f1e95843e..f1c88c1f7 100644 --- a/src/shared-components/chip/index.tsx +++ b/src/shared-components/chip/index.tsx @@ -2,7 +2,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import { useTheme } from 'emotion-theming'; -import { ChipStyles, ChipText } from './style'; +import Style from './style'; import type { ThemeColors, ThemeType } from '../../constants'; export type StatusType = 'primary' | 'success' | 'error' | 'white'; @@ -82,9 +82,9 @@ export const Chip = ({ }); return ( - - {text} - + + {text} + ); }; diff --git a/src/shared-components/chip/style.ts b/src/shared-components/chip/style.ts index ce7f4ed7a..accbd948b 100644 --- a/src/shared-components/chip/style.ts +++ b/src/shared-components/chip/style.ts @@ -4,7 +4,7 @@ import { TYPOGRAPHY_STYLE } from '../typography'; import { SPACER, ThemeColors } from '../../constants'; import { applyPrimaryThemeVerticalOffset } from '../../utils/themeStyles'; -export const ChipText = styled.span` +const ChipText = styled.span` ${({ theme }) => TYPOGRAPHY_STYLE.label(theme)} font-weight: ${({ theme }) => theme.TYPOGRAPHY.fontWeight.bold}; ${({ theme }) => applyPrimaryThemeVerticalOffset(theme)}; @@ -15,7 +15,7 @@ interface ChipStylesProps { textColor: ThemeColors; } -export const ChipStyles = styled.div` +const ChipStyles = styled.div` align-items: center; border-radius: ${({ theme }) => theme.BORDER_RADIUS.small}; display: inline-flex; @@ -30,3 +30,5 @@ export const ChipStyles = styled.div` color: ${({ textColor }) => textColor}; } `; + +export default { ChipStyles, ChipText }; diff --git a/src/shared-components/dialogModal/index.tsx b/src/shared-components/dialogModal/index.tsx index 15a91823d..4a562dc00 100644 --- a/src/shared-components/dialogModal/index.tsx +++ b/src/shared-components/dialogModal/index.tsx @@ -6,13 +6,7 @@ import { FocusScope } from '@react-aria/focus'; import { useTheme } from 'emotion-theming'; import { CrossIcon } from '../../icons'; -import { - Overlay, - ModalContainer, - ModalTitle, - CrossIconContainer, - Paragraph, -} from './style'; +import Style from './style'; import { Colors, primaryTheme, secondaryTheme } from '../../constants'; export interface DialogModalProps { @@ -97,15 +91,15 @@ export const DialogModal = ({ > {(transitionState): JSX.Element => ( // eslint-disable-next-line react/jsx-props-no-spreading - + - {onCloseIconClick && ( - - + )} - {!!title && {title}} + {!!title && {title}} {children} - + - + )} , domNode.current, ); }; -DialogModal.Paragraph = Paragraph; +DialogModal.Paragraph = Style.Paragraph; DialogModal.propTypes = { backgroundColor: PropTypes.oneOf([ diff --git a/src/shared-components/dialogModal/style.ts b/src/shared-components/dialogModal/style.ts index aa9ffc1fd..2c87938ff 100644 --- a/src/shared-components/dialogModal/style.ts +++ b/src/shared-components/dialogModal/style.ts @@ -3,7 +3,7 @@ import styled from '@emotion/styled'; import { Typography } from '../typography'; import { Colors, MEDIA_QUERIES, SPACER, Z_SCALE } from '../../constants'; -export const Overlay = styled.div` +const Overlay = styled.div` position: fixed; top: 0; right: 0; @@ -31,7 +31,7 @@ export const Overlay = styled.div` } `; -export const Paragraph = styled.p` +const Paragraph = styled.p` margin-bottom: ${SPACER.large}; &:last-of-type { @@ -39,7 +39,7 @@ export const Paragraph = styled.p` } `; -export const ModalContainer = styled.div<{ +const ModalContainer = styled.div<{ backgroundColor: Colors['background'] | Colors['white']; }>` width: 100%; @@ -86,11 +86,11 @@ export const ModalContainer = styled.div<{ } `; -export const ModalTitle = styled(Typography.Title)` +const ModalTitle = styled(Typography.Title)` margin-bottom: ${SPACER.small}; `; -export const CrossIconContainer = styled.div<{ +const CrossIconContainer = styled.div<{ backgroundColor: Colors['background'] | Colors['white']; }>` position: absolute; @@ -117,3 +117,11 @@ export const CrossIconContainer = styled.div<{ box-shadow: ${({ theme }) => theme.BOX_SHADOWS.focus}; } `; + +export default { + CrossIconContainer, + ModalContainer, + ModalTitle, + Overlay, + Paragraph, +}; diff --git a/src/shared-components/dropdown/desktopDropdown.tsx b/src/shared-components/dropdown/desktopDropdown.tsx index cbe7a25fe..627617470 100644 --- a/src/shared-components/dropdown/desktopDropdown.tsx +++ b/src/shared-components/dropdown/desktopDropdown.tsx @@ -7,14 +7,7 @@ import { isDefined } from '../../utils/isDefined'; import { keyboardKeys } from '../../constants/keyboardKeys'; import { OffClickWrapper } from '../offClickWrapper'; import { ChevronIcon } from '../../icons'; -import { - DropdownContainer, - DropdownFocusContainer, - dropdownInputStyle, - IconContainer, - DropdownOptionsContainer, - DropdownOption, -} from './style'; +import Style from './style'; import { OptionType, OptionValue } from './index'; @@ -70,8 +63,8 @@ export const DesktopDropdown = ({ width: 100%; `} > - - + ({ ref={initialFocus} >
({ > {currentOption?.label}
- + - - + + - ({ : `undefined-${index}`; return ( - ({ {...rest} > {label} - + ); })} - - + + ); }; diff --git a/src/shared-components/dropdown/mobileDropdown.tsx b/src/shared-components/dropdown/mobileDropdown.tsx index e90d7eae0..9e47268b3 100644 --- a/src/shared-components/dropdown/mobileDropdown.tsx +++ b/src/shared-components/dropdown/mobileDropdown.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { useTheme } from 'emotion-theming'; import { ChevronIcon } from '../../icons'; -import { DropdownContainer, dropdownInputStyle, IconContainer } from './style'; +import Style from './style'; import { OptionType, OptionValue } from '.'; @@ -29,9 +29,9 @@ export const MobileDropdown = ({ const theme = useTheme(); return ( - + - + - - + + ); }; diff --git a/src/shared-components/dropdown/style.ts b/src/shared-components/dropdown/style.ts index bee59ac74..10a81e041 100644 --- a/src/shared-components/dropdown/style.ts +++ b/src/shared-components/dropdown/style.ts @@ -10,7 +10,7 @@ export interface DropdownInputStyleProps { theme: ThemeType; } -export const DropdownContainer = styled.div<{ textAlign: 'left' | 'center' }>` +const DropdownContainer = styled.div<{ textAlign: 'left' | 'center' }>` position: relative; width: 100%; text-align: ${({ textAlign }) => textAlign}; @@ -22,7 +22,7 @@ export const DropdownContainer = styled.div<{ textAlign: 'left' | 'center' }>` } `; -export const dropdownInputStyle = ({ +const dropdownInputStyle = ({ borderRadius, shouldBeFullyRounded, textAlign, @@ -79,7 +79,7 @@ export const dropdownInputStyle = ({ `; }; -export const DropdownFocusContainer = styled.div` +const DropdownFocusContainer = styled.div` &:focus { > div:first-of-type { box-shadow: ${({ theme }) => theme.BOX_SHADOWS.focusInner}; @@ -88,7 +88,7 @@ export const DropdownFocusContainer = styled.div` } `; -export const IconContainer = styled.div` +const IconContainer = styled.div` position: absolute; right: 0; top: 0; @@ -109,7 +109,7 @@ export const IconContainer = styled.div` } `; -export const DropdownOptionsContainer = styled.ul<{ +const DropdownOptionsContainer = styled.ul<{ borderRadius: string; isOpen: boolean; optionsContainerMaxHeight: string; @@ -150,7 +150,7 @@ export const DropdownOptionsContainer = styled.ul<{ } `; -export const DropdownOption = styled.li<{ +const DropdownOption = styled.li<{ disabled: boolean; selected: boolean; }>` @@ -195,3 +195,12 @@ export const DropdownOption = styled.li<{ } `} `; + +export default { + DropdownContainer, + DropdownFocusContainer, + dropdownInputStyle, + DropdownOption, + DropdownOptionsContainer, + IconContainer, +}; diff --git a/src/shared-components/field/index.tsx b/src/shared-components/field/index.tsx index 07029f64b..21f239eed 100644 --- a/src/shared-components/field/index.tsx +++ b/src/shared-components/field/index.tsx @@ -2,14 +2,7 @@ import PropTypes from 'prop-types'; import React from 'react'; import { useTheme } from 'emotion-theming'; -import { - FieldContainer, - Label, - InputContainer, - Textarea, - Input, - HintItem, -} from './style'; +import Style from './style'; import { CheckmarkIcon, ErrorIcon } from '../../icons'; import { VerificationMessages, @@ -82,31 +75,34 @@ export const Field = ({ ); return ( - + {!!label && ( - + )} - + {hideMessagesIcon || MessageIcon} {React.cloneElement(inputChild, { disabled, })} - {!!hintMessage && {hintMessage}} + {!!hintMessage && {hintMessage}} - - + + ); }; -Field.Textarea = Textarea; +Field.Textarea = Style.Textarea; -Field.Input = Input; +Field.Input = Style.Input; Field.propTypes = { children: PropTypes.element.isRequired, diff --git a/src/shared-components/field/style.ts b/src/shared-components/field/style.ts index 68f43c7e2..9e7b16d4d 100644 --- a/src/shared-components/field/style.ts +++ b/src/shared-components/field/style.ts @@ -5,20 +5,20 @@ import { SPACER, ANIMATION, ThemeType } from '../../constants'; import { MessagesTypes } from '../verificationMessages'; import { setThemeLineHeight } from '../../utils/themeStyles'; -export const HintItem = styled.div` +const HintItem = styled.div` ${({ theme }) => TYPOGRAPHY_STYLE.caption(theme)} transition: all ${ANIMATION.defaultTiming} ease-in-out; opacity: 0; max-height: 0; `; -export const FieldContainer = styled.div` +const FieldContainer = styled.div` display: flex; flex-direction: column; margin-bottom: 22px; `; -export const Label = styled.label<{ disabled: boolean }>` +const Label = styled.label<{ disabled: boolean }>` ${({ theme }) => TYPOGRAPHY_STYLE.label(theme)} ${({ disabled, theme }) => @@ -63,12 +63,12 @@ const inputStyles = (theme: ThemeType) => ` } `; -export const Input = styled.input` +const Input = styled.input` ${({ theme }) => inputStyles(theme)} padding: 13px ${SPACER.xlarge} 13px ${SPACER.medium}; `; -export const Textarea = styled.textarea` +const Textarea = styled.textarea` ${({ theme }) => inputStyles(theme)} color: ${({ theme }) => theme.COLORS.primary}; display: block; @@ -102,7 +102,7 @@ const applyMessagesStyles = (messagesType: MessagesTypes, theme: ThemeType) => ` } `; -export const InputContainer = styled.div<{ +const InputContainer = styled.div<{ messagesType: MessagesTypes; showMessages: boolean; }>` @@ -119,3 +119,12 @@ export const InputContainer = styled.div<{ ${({ showMessages, messagesType, theme }) => showMessages && applyMessagesStyles(messagesType, theme)} `; + +export default { + FieldContainer, + HintItem, + Input, + InputContainer, + Label, + Textarea, +}; diff --git a/src/shared-components/immersiveModal/index.tsx b/src/shared-components/immersiveModal/index.tsx index 6bb32b364..5c8170d7a 100644 --- a/src/shared-components/immersiveModal/index.tsx +++ b/src/shared-components/immersiveModal/index.tsx @@ -7,20 +7,7 @@ import { FocusScope } from '@react-aria/focus'; import { OffClickWrapper } from '../offClickWrapper'; import { CrossIcon } from '../../icons'; -import { - Overlay, - MobileHeaderBar, - DesktopHeaderBar, - ModalContainer, - MobileTopOverlay, - CrossIconContainer, - HeaderImageContainer, - ContentWithFooterContainer, - ModalTitle, - ModalFooter, - MainModalContentContainer, - Paragraph, -} from './style'; +import Style from './style'; import { isDefined } from '../../utils/isDefined'; export interface ImmersiveModalProps { @@ -172,15 +159,15 @@ export const ImmersiveModal = ({ > {(transitionState): JSX.Element => ( - + {title} - + - - + + {/* eslint-disable-next-line react/jsx-props-no-spreading */} - - + @@ -188,48 +175,54 @@ export const ImmersiveModal = ({ onOffClick={handleCloseIntent} className="modal-offclick-wrapper" > - + - - - + - {title} - - - + + {hasHeaderImage && ( - {headerImage} + + {headerImage} + )} - +
- {isDefined(title) && {title}} + {isDefined(title) && ( + {title} + )} {children}
{isDefined(footerContent) && ( - {footerContent} + {footerContent} )} - - + + - - + + )} , @@ -237,7 +230,7 @@ export const ImmersiveModal = ({ ); }; -ImmersiveModal.Paragraph = Paragraph; +ImmersiveModal.Paragraph = Style.Paragraph; ImmersiveModal.propTypes = { children: PropTypes.node.isRequired, diff --git a/src/shared-components/immersiveModal/style.ts b/src/shared-components/immersiveModal/style.ts index 60f24ad9f..dbce60f5e 100644 --- a/src/shared-components/immersiveModal/style.ts +++ b/src/shared-components/immersiveModal/style.ts @@ -10,7 +10,7 @@ import { ThemeType, } from '../../constants'; -export const Overlay = styled.div` +const Overlay = styled.div` position: fixed; top: 0; right: 0; @@ -37,7 +37,7 @@ export const Overlay = styled.div` } `; -export const CrossIconContainer = styled.button` +const CrossIconContainer = styled.button` ${buttonReset}; padding: 0; position: absolute; @@ -66,7 +66,7 @@ export const CrossIconContainer = styled.button` } `; -export const HeaderImageContainer = styled.div` +const HeaderImageContainer = styled.div` min-height: 240px; max-height: 240px; width: 100%; @@ -92,11 +92,11 @@ export const HeaderImageContainer = styled.div` } `; -export const ModalTitle = styled(Typography.Heading)` +const ModalTitle = styled(Typography.Heading)` margin-bottom: ${SPACER.small}; `; -export const Paragraph = styled.p` +const Paragraph = styled.p` margin-bottom: ${SPACER.large}; &:last-of-type { @@ -104,7 +104,7 @@ export const Paragraph = styled.p` } `; -export const ModalFooter = styled.div` +const ModalFooter = styled.div` margin-bottom: ${SPACER.xlarge}; `; @@ -126,7 +126,7 @@ const commonHeaderBarStyles = (theme: ThemeType) => ` pointer-events: none; `; -export const MobileHeaderBar = styled.div<{ showMobileHeaderBar: boolean }>` +const MobileHeaderBar = styled.div<{ showMobileHeaderBar: boolean }>` ${({ theme }) => commonHeaderBarStyles(theme)} transition: opacity ${ANIMATION.defaultTiming} @@ -140,7 +140,7 @@ export const MobileHeaderBar = styled.div<{ showMobileHeaderBar: boolean }>` } `; -export const DesktopHeaderBar = styled.div<{ showDesktopHeaderBar: boolean }>` +const DesktopHeaderBar = styled.div<{ showDesktopHeaderBar: boolean }>` ${({ theme }) => commonHeaderBarStyles(theme)} top: 56px; @@ -164,7 +164,7 @@ export const DesktopHeaderBar = styled.div<{ showDesktopHeaderBar: boolean }>` } `; -export const MobileTopOverlay = styled.div` +const MobileTopOverlay = styled.div` width: 100%; background: transparent; height: 32px; @@ -174,7 +174,7 @@ export const MobileTopOverlay = styled.div` } `; -export const ModalContainer = styled.div` +const ModalContainer = styled.div` width: 100%; height: 100%; margin: 0 auto; @@ -211,7 +211,7 @@ export interface HasHeaderImageProps { // 32px comes from top overlay // 272px comes from 32px top overlay + 240px image -export const MainModalContentContainer = styled.div` +const MainModalContentContainer = styled.div` position: relative; border-top-left-radius: ${({ theme }) => theme.BORDER_RADIUS.large}; border-top-right-radius: ${({ theme }) => theme.BORDER_RADIUS.large}; @@ -228,7 +228,7 @@ export const MainModalContentContainer = styled.div` } `; -export const ContentWithFooterContainer = styled.div` +const ContentWithFooterContainer = styled.div` display: flex; flex-flow: column nowrap; justify-content: space-between; @@ -250,3 +250,18 @@ export const ContentWithFooterContainer = styled.div` hasHeaderImage ? 'calc(100% - 264px)' : '100%'}; } `; + +export default { + ContentWithFooterContainer, + CrossIconContainer, + Overlay, + DesktopHeaderBar, + HeaderImageContainer, + MainModalContentContainer, + MobileHeaderBar, + MobileTopOverlay, + ModalContainer, + ModalFooter, + ModalTitle, + Paragraph, +}; diff --git a/src/shared-components/index.ts b/src/shared-components/index.ts index 7b6894273..49c17a537 100644 --- a/src/shared-components/index.ts +++ b/src/shared-components/index.ts @@ -11,6 +11,7 @@ export * from './container'; export * from './dialogModal'; export * from './dropdown'; export * from './field'; +export type { IconProps } from './icon'; export * from './immersiveModal'; export * from './indicator'; export * from './loadingSpinner'; diff --git a/src/shared-components/indicator/index.tsx b/src/shared-components/indicator/index.tsx index a610d7a29..89e07d9d1 100644 --- a/src/shared-components/indicator/index.tsx +++ b/src/shared-components/indicator/index.tsx @@ -3,7 +3,7 @@ import PropTypes from 'prop-types'; import type { ThemeColors, ThemeType } from 'src/constants'; import { useTheme } from 'emotion-theming'; -import { IndicatorContainer } from './style'; +import Style from './style'; export interface IndicatorProps { text: string | number; @@ -55,9 +55,12 @@ export const Indicator = ({ text, type = 'error' }: IndicatorProps) => { const { backgroundColor, textColor } = getStyles({ theme, type }); return ( - +
{text}
- + ); }; diff --git a/src/shared-components/indicator/style.ts b/src/shared-components/indicator/style.ts index 1990fc100..8e097d977 100644 --- a/src/shared-components/indicator/style.ts +++ b/src/shared-components/indicator/style.ts @@ -9,7 +9,7 @@ interface IndicatorContainerProps { textColor: ThemeColors; } -export const IndicatorContainer = styled.div` +const IndicatorContainer = styled.div` background-color: ${({ backgroundColor }) => backgroundColor}; min-height: 16px; height: 16px; @@ -31,3 +31,5 @@ export const IndicatorContainer = styled.div` ${({ theme }) => applyPrimaryThemeVerticalOffset(theme)}; } `; + +export default { IndicatorContainer }; diff --git a/src/shared-components/loadingSpinner/index.tsx b/src/shared-components/loadingSpinner/index.tsx index 294af5d40..01eb97465 100644 --- a/src/shared-components/loadingSpinner/index.tsx +++ b/src/shared-components/loadingSpinner/index.tsx @@ -2,7 +2,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import { useTheme } from 'emotion-theming'; -import { LoadingSpinnerContainer, Overlay, Dot } from './style'; +import Style from './style'; import type { ThemeColors } from '../../constants'; export interface LoadingSpinnerProps { @@ -44,28 +44,28 @@ export const LoadingSpinner = ({ const colorWithTheme = color ?? theme.COLORS.primary; return ( - - - + + - - - - + + ); }; diff --git a/src/shared-components/loadingSpinner/style.ts b/src/shared-components/loadingSpinner/style.ts index b0e2038cc..6beaacd6e 100644 --- a/src/shared-components/loadingSpinner/style.ts +++ b/src/shared-components/loadingSpinner/style.ts @@ -9,7 +9,7 @@ const appPreloader = (translateX: string) => keyframes` 100% { opacity: 0; transform: translate3d(-${translateX}, 0, 0) } `; -export const LoadingSpinnerContainer = styled.div<{ bgColor: string }>` +const LoadingSpinnerContainer = styled.div<{ bgColor: string }>` display: flex; align-items: center; justify-content: center; @@ -23,7 +23,7 @@ export const LoadingSpinnerContainer = styled.div<{ bgColor: string }>` background-color: ${(props) => props.bgColor}; `; -export const Overlay = styled.div` +const Overlay = styled.div` display: flex; align-items: center; justify-content: center; @@ -31,7 +31,7 @@ export const Overlay = styled.div` position: relative; `; -export const Dot = styled.span<{ +const Dot = styled.span<{ dotColor: ThemeColors; dotSize: string; duration: number; @@ -62,3 +62,5 @@ export const Dot = styled.span<{ animation-delay: ${(props) => -props.duration / 4}s; } `; + +export default { Dot, LoadingSpinnerContainer, Overlay }; diff --git a/src/shared-components/optionButton/index.tsx b/src/shared-components/optionButton/index.tsx index 4085af906..360a69c36 100644 --- a/src/shared-components/optionButton/index.tsx +++ b/src/shared-components/optionButton/index.tsx @@ -1,15 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { - ClickableContainer, - FlexContainer, - TextContainer, - Text, - SubText, - IconWrapper, - CheckmarkWrapper, -} from './style'; +import Style from './style'; import { CheckmarkIcon } from '../../icons'; import { isDefined } from '../../utils/isDefined'; @@ -42,7 +34,7 @@ export const OptionButton = ({ text, ...rest }: OptionButtonProps) => ( - - + {/** * We sometimes use && conditionals such that we are passing in `false` as a value */} {isDefined(icon) && icon !== false ? ( - {selected ? : icon} - + ) : ( - - + )} - - {text} - {isDefined(subtext) && {subtext}} - - - + + {text} + {isDefined(subtext) && {subtext}} + + + ); OptionButton.propTypes = { diff --git a/src/shared-components/optionButton/style.ts b/src/shared-components/optionButton/style.ts index 2bd284c92..f2531878b 100644 --- a/src/shared-components/optionButton/style.ts +++ b/src/shared-components/optionButton/style.ts @@ -31,7 +31,7 @@ const getTypeColor = ( return theme.COLORS.primary; }; -export const ClickableContainer = styled.button<{ +const ClickableContainer = styled.button<{ borderRadius?: string; containerType: ContainerType; }>` @@ -49,7 +49,7 @@ export const ClickableContainer = styled.button<{ } `; -export const FlexContainer = styled.div` +const FlexContainer = styled.div` display: flex; flex-flow: row nowrap; justify-content: flex-start; @@ -97,9 +97,7 @@ const getBaseIconWrapperStyles = ({ } `; -export const CheckmarkWrapper = styled.div< - Omit ->` +const CheckmarkWrapper = styled.div>` ${({ buttonType, optionType, selected, theme }) => getBaseIconWrapperStyles({ buttonType, @@ -109,9 +107,7 @@ export const CheckmarkWrapper = styled.div< })} `; -export const IconWrapper = styled.div< - Omit ->` +const IconWrapper = styled.div>` ${({ buttonType, optionType, selected, theme }) => getBaseIconWrapperStyles({ buttonType, @@ -138,16 +134,26 @@ export const IconWrapper = styled.div< `}; `; -export const TextContainer = styled.div` +const TextContainer = styled.div` margin-left: ${SPACER.medium}; `; -export const Text = styled.div` +const Text = styled.div` color: ${({ theme }) => theme.COLORS.primaryTint1}; line-height: ${({ theme }) => setThemeLineHeight(theme, '1.5')}; `; -export const SubText = styled.div` +const SubText = styled.div` ${({ theme }) => TYPOGRAPHY_STYLE.caption(theme)} line-height: ${({ theme }) => setThemeLineHeight(theme, '1.5')}; `; + +export default { + CheckmarkWrapper, + ClickableContainer, + FlexContainer, + IconWrapper, + SubText, + Text, + TextContainer, +}; diff --git a/src/shared-components/progressBar/index.tsx b/src/shared-components/progressBar/index.tsx index ba8a84d80..3deee0ed0 100644 --- a/src/shared-components/progressBar/index.tsx +++ b/src/shared-components/progressBar/index.tsx @@ -3,7 +3,7 @@ import PropTypes from 'prop-types'; import { useTheme } from 'emotion-theming'; import { PROGRESS_BAR_STATUS, ThemeColors } from '../../constants'; -import { OuterContainer, InnerBar } from './style'; +import Style from './style'; export type ProgressBarStatusType = valueof; @@ -41,20 +41,20 @@ export const ProgressBar = ({ const barColorWithTheme = barColor ?? theme.COLORS.primary; return ( - - - + ); }; diff --git a/src/shared-components/progressBar/style.ts b/src/shared-components/progressBar/style.ts index d41db5d10..82084e7ef 100644 --- a/src/shared-components/progressBar/style.ts +++ b/src/shared-components/progressBar/style.ts @@ -10,7 +10,7 @@ const loadingProgression = keyframes` to { transform: translateX(-5%); } `; -export const OuterContainer = styled.div<{ +const OuterContainer = styled.div<{ backgroundColor: string; barHeight: number; status: ProgressBarStatusType; @@ -51,7 +51,7 @@ const getStatusStyles = (status: ProgressBarStatusType, theme: ThemeType) => { return baseStyles; }; -export const InnerBar = styled.div<{ +const InnerBar = styled.div<{ barColor: string; barHeight: number; loadingTime: string; @@ -67,3 +67,5 @@ export const InnerBar = styled.div<{ ${({ status, theme }) => getStatusStyles(status, theme)} `; + +export default { InnerBar, OuterContainer }; diff --git a/src/shared-components/selectorButton/index.tsx b/src/shared-components/selectorButton/index.tsx index bd83e12ea..4932441b8 100644 --- a/src/shared-components/selectorButton/index.tsx +++ b/src/shared-components/selectorButton/index.tsx @@ -4,13 +4,7 @@ import { css } from '@emotion/core'; import { useTheme } from 'emotion-theming'; import { CheckmarkIcon, CircleSolidIcon } from '../../icons'; -import { - OuterContainer, - Selector, - SelectorContainer, - TextContainer, - SelectorIcon, -} from './style'; +import Style from './style'; import { isDefined } from '../../utils/isDefined'; export type SelectorType = 'radio' | 'checkbox'; @@ -60,8 +54,9 @@ export const SelectorButton = ({ `} /> ); + return ( - - - + + {checked ? checkedIcon : size === 'large' && icon} - - + - + - {isDefined(children) && {children}} - + {isDefined(children) && ( + {children} + )} + ); }; diff --git a/src/shared-components/selectorButton/style.ts b/src/shared-components/selectorButton/style.ts index f001248cb..ece92a56d 100644 --- a/src/shared-components/selectorButton/style.ts +++ b/src/shared-components/selectorButton/style.ts @@ -4,14 +4,14 @@ import { SPACER, ANIMATION, ThemeType } from '../../constants'; import type { SelectorType, SizeType, StyleType } from '.'; -export const SelectorContainer = styled.div` +const SelectorContainer = styled.div` align-items: center; display: flex; justify-content: center; position: relative; `; -export const OuterContainer = styled.div<{ selector: SelectorType }>` +const OuterContainer = styled.div<{ selector: SelectorType }>` align-items: center; cursor: pointer; display: flex; @@ -32,7 +32,7 @@ export const OuterContainer = styled.div<{ selector: SelectorType }>` } `; -export const SelectorIcon = styled.div<{ disabled: boolean }>` +const SelectorIcon = styled.div<{ disabled: boolean }>` fill: currentColor; left: 50%; position: absolute; @@ -59,7 +59,7 @@ const disabledSelectorStyle = (theme: ThemeType) => ` cursor: not-allowed; `; -export const Selector = styled.div<{ +const Selector = styled.div<{ disabled: boolean; selector: SelectorType; selectorChecked: boolean; @@ -104,9 +104,17 @@ export const Selector = styled.div<{ } `; -export const TextContainer = styled.p` +const TextContainer = styled.p` margin-left: ${SPACER.medium}; margin-top: ${SPACER.xsmall}; min-width: 125px; text-align: left; `; + +export default { + OuterContainer, + Selector, + SelectorContainer, + SelectorIcon, + TextContainer, +}; diff --git a/src/shared-components/tabs/index.tsx b/src/shared-components/tabs/index.tsx index e2ecc77d2..204479721 100644 --- a/src/shared-components/tabs/index.tsx +++ b/src/shared-components/tabs/index.tsx @@ -1,7 +1,7 @@ import PropTypes from 'prop-types'; import React, { useState } from 'react'; -import { TabsContainer, TabItem } from './style'; +import Style from './style'; interface TabType { id: number; @@ -31,9 +31,9 @@ export const Tabs = ({ }; return ( - + {tabItems.map((tab) => ( - { @@ -41,9 +41,9 @@ export const Tabs = ({ }} > {tab.text} - + ))} - + ); }; diff --git a/src/shared-components/tabs/style.ts b/src/shared-components/tabs/style.ts index b575ea639..458c561f4 100644 --- a/src/shared-components/tabs/style.ts +++ b/src/shared-components/tabs/style.ts @@ -4,7 +4,7 @@ import { buttonReset } from 'src/utils/styles/buttonReset'; import { TYPOGRAPHY_STYLE } from '../typography'; import { SPACER, ANIMATION, MEDIA_QUERIES } from '../../constants'; -export const TabsContainer = styled.div` +const TabsContainer = styled.div` display: flex; align-items: center; justify-content: flex-start; @@ -19,7 +19,7 @@ export const TabsContainer = styled.div` } `; -export const TabItem = styled.button<{ active: boolean }>` +const TabItem = styled.button<{ active: boolean }>` ${buttonReset} ${({ theme }) => TYPOGRAPHY_STYLE.button(theme)} display: flex; @@ -44,3 +44,5 @@ export const TabItem = styled.button<{ active: boolean }>` box-shadow: ${({ theme }) => theme.BOX_SHADOWS.focus}; } `; + +export default { TabsContainer, TabItem }; diff --git a/src/shared-components/toggle/index.tsx b/src/shared-components/toggle/index.tsx index 69663fbbd..8917dba0b 100644 --- a/src/shared-components/toggle/index.tsx +++ b/src/shared-components/toggle/index.tsx @@ -4,13 +4,7 @@ import React from 'react'; // @ts-expect-error: No @types, we should replace this dependency import ToggleButton from 'react-toggle-button'; -import { - Container, - Label, - ReactToggleButtonContainer, - trackStyle, - thumbStyle, -} from './style'; +import Style from './style'; export interface ToggleProps { checked?: boolean; @@ -40,16 +34,16 @@ export const Toggle = ({ const theme = useTheme(); return ( - - {label && } - + + {label && {label}} + - - + + ); }; diff --git a/src/shared-components/toggle/style.ts b/src/shared-components/toggle/style.ts index 259d3b078..8a419d63d 100644 --- a/src/shared-components/toggle/style.ts +++ b/src/shared-components/toggle/style.ts @@ -3,7 +3,7 @@ import styled from '@emotion/styled'; import { SPACER, ThemeType } from '../../constants'; import { setThemeLineHeight } from '../../utils/themeStyles'; -export const Container = styled.div` +const Container = styled.div` position: relative; display: flex; flex-flow: row nowrap; @@ -17,7 +17,7 @@ export const Container = styled.div` } `; -export const Label = styled.span` +const Label = styled.span` color: ${({ theme }) => theme.COLORS.primaryTint1}; margin: 0; font-size: ${SPACER.medium}; @@ -28,13 +28,13 @@ export const Label = styled.span` margin-right: ${SPACER.small}; `; -export const trackStyle = { +const trackStyle = { borderRadius: 100, height: 24, width: 40, }; -export const thumbStyle = (theme: ThemeType) => ({ +const thumbStyle = (theme: ThemeType) => ({ height: 22, width: 22, border: `1px solid ${theme.COLORS.border}`, @@ -43,7 +43,7 @@ export const thumbStyle = (theme: ThemeType) => ({ backgroundColor: theme.COLORS.white, }); -export const ReactToggleButtonContainer = styled.div` +const ReactToggleButtonContainer = styled.div` > div:first-of-type { > input { &:focus { @@ -54,3 +54,11 @@ export const ReactToggleButtonContainer = styled.div` } } `; + +export default { + Container, + Label, + ReactToggleButtonContainer, + thumbStyle, + trackStyle, +}; diff --git a/src/shared-components/tooltip/index.tsx b/src/shared-components/tooltip/index.tsx index beecfd04b..391d57a4d 100644 --- a/src/shared-components/tooltip/index.tsx +++ b/src/shared-components/tooltip/index.tsx @@ -5,13 +5,7 @@ import { useTheme } from 'emotion-theming'; import { ArrowIcon } from '../../icons'; import { OffClickWrapper } from '../offClickWrapper'; -import { - MainContainer, - Trigger, - TooltipBox, - TooltipContent, - ArrowImageContainer, -} from './style'; +import Style from './style'; export type ArrowAlignTypes = 'left' | 'middle' | 'right'; @@ -126,8 +120,8 @@ export const Tooltip = ({ }, }} /> - - + { setHovered(true); @@ -137,8 +131,8 @@ export const Tooltip = ({ }} > {children} - - + - {content} - + {content} + - - - + + + ); }; diff --git a/src/shared-components/tooltip/style.ts b/src/shared-components/tooltip/style.ts index f2b9eeba9..46c8aa6c6 100644 --- a/src/shared-components/tooltip/style.ts +++ b/src/shared-components/tooltip/style.ts @@ -4,17 +4,17 @@ import { SPACER } from '../../constants'; import { ArrowAlignTypes, PositionTypes } from '.'; -export const MainContainer = styled.div` +const MainContainer = styled.div` position: relative; align-items: left; flex-direction: column-reverse; `; -export const Trigger = styled.div` +const Trigger = styled.div` cursor: pointer; `; -export const TooltipBox = styled.div<{ +const TooltipBox = styled.div<{ alignRightPercent: number; alignTopPercent: number; arrowAlign: ArrowAlignTypes; @@ -122,12 +122,12 @@ export const TooltipBox = styled.div<{ display: ${({ displayTooltip }) => (displayTooltip ? 'block' : 'none')}; `; -export const TooltipContent = styled.div` +const TooltipContent = styled.div` z-index: 5; position: relative; `; -export const ArrowImageContainer = styled.div<{ +const ArrowImageContainer = styled.div<{ arrowAlign: ArrowAlignTypes; position: PositionTypes; }>` @@ -170,3 +170,11 @@ export const ArrowImageContainer = styled.div<{ } }}; `; + +export default { + ArrowImageContainer, + MainContainer, + TooltipBox, + TooltipContent, + Trigger, +}; diff --git a/src/shared-components/transitions/index.tsx b/src/shared-components/transitions/index.tsx index 37e222c60..332039e32 100644 --- a/src/shared-components/transitions/index.tsx +++ b/src/shared-components/transitions/index.tsx @@ -1,9 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { FadeInContainer as StyledContainer } from './style'; - -export { opacityInAnimationStyle } from './style'; +import Style from './style'; export interface FadeInContainerProps { children: React.ReactNode; @@ -22,9 +20,9 @@ export const FadeInContainer = ({ slide = false, speed = '350ms', }: FadeInContainerProps) => ( - + {children} - + ); FadeInContainer.propTypes = { @@ -32,3 +30,7 @@ FadeInContainer.propTypes = { slide: PropTypes.bool, speed: PropTypes.string, }; + +const { opacityInAnimationStyle } = Style; + +export { opacityInAnimationStyle }; diff --git a/src/shared-components/transitions/style.ts b/src/shared-components/transitions/style.ts index 45bf8d5e2..462441202 100644 --- a/src/shared-components/transitions/style.ts +++ b/src/shared-components/transitions/style.ts @@ -41,7 +41,7 @@ const getAnimationStyle = (slide: boolean, speed: string) => { `; }; -export const FadeInContainer = styled.div<{ +const FadeInContainer = styled.div<{ animationSpeed: string; withSlide: boolean; }>` @@ -49,6 +49,11 @@ export const FadeInContainer = styled.div<{ getAnimationStyle(withSlide, animationSpeed)}; `; -export const opacityInAnimationStyle = css` +const opacityInAnimationStyle = css` animation: ${opacityInAnimation} ${ANIMATION.defaultTiming} ease-in-out; `; + +export default { + FadeInContainer, + opacityInAnimationStyle, +}; diff --git a/src/shared-components/verificationMessages/formatMessage/index.tsx b/src/shared-components/verificationMessages/formatMessage/index.tsx index 94901207e..945446408 100644 --- a/src/shared-components/verificationMessages/formatMessage/index.tsx +++ b/src/shared-components/verificationMessages/formatMessage/index.tsx @@ -1,7 +1,7 @@ import React from 'react'; import uniqueid from 'lodash.uniqueid'; -import { MessageType } from '..'; +import type { MessageType } from '..'; const formatMessage = (message: MessageType) => { if (Array.isArray(message)) { diff --git a/src/shared-components/verificationMessages/index.tsx b/src/shared-components/verificationMessages/index.tsx index 26bc45f4f..403b9f37a 100644 --- a/src/shared-components/verificationMessages/index.tsx +++ b/src/shared-components/verificationMessages/index.tsx @@ -2,7 +2,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import { TransitionGroup } from 'react-transition-group'; -import { CenteredMessageList, MessageList, MessageItem } from './style'; +import Style from './style'; import HelperTransition from '../../utils/helperTransition'; import formatMessage from './formatMessage'; @@ -39,7 +39,9 @@ export const VerificationMessages = ({ const showMessages = messageKeys.length > 0; return ( - + {showMessages ? ( messageKeys .filter((key) => { @@ -51,9 +53,9 @@ export const VerificationMessages = ({ }) .map((key) => ( - + {formatMessage(messages[key])} - + )) ) : ( diff --git a/src/shared-components/verificationMessages/style.ts b/src/shared-components/verificationMessages/style.ts index 79333f8ce..a6e611d96 100644 --- a/src/shared-components/verificationMessages/style.ts +++ b/src/shared-components/verificationMessages/style.ts @@ -6,16 +6,16 @@ import { setThemeLineHeight } from '../../utils/themeStyles'; import { MessagesTypes } from '.'; -export const MessageList = styled.ul` +const MessageList = styled.ul` list-style-type: none; margin: 0; `; -export const CenteredMessageList = styled(MessageList)` +const CenteredMessageList = styled(MessageList)` text-align: center; `; -export const MessageItem = styled.li<{ type: MessagesTypes }>` +const MessageItem = styled.li<{ type: MessagesTypes }>` &:last-of-type { margin: 0 0 ${SPACER.x2small} 0; } @@ -27,3 +27,5 @@ export const MessageItem = styled.li<{ type: MessagesTypes }>` line-height: ${({ theme }) => setThemeLineHeight(theme, '24px')}; `; + +export default { CenteredMessageList, MessageItem, MessageList };