From 7c7d08bc60373f2d4d77d1658369dc2e9d3fe3d3 Mon Sep 17 00:00:00 2001 From: Banks Nussman <115251059+bnussman-akamai@users.noreply.github.com> Date: Tue, 18 Apr 2023 19:46:45 -0400 Subject: [PATCH] refactor: [M3-6322] - SRC > Components > DisplayPrice (#9022) Styles clean up for , Also includes some related clean ups and removal of unused test selector Co-authored-by: Banks Nussman --- .../components/CheckoutBar/CheckoutBar.tsx | 2 +- .../components/DisplayPrice/DisplayPrice.tsx | 49 ++++++------------- .../src/components/DisplayPrice/index.tsx | 5 +- .../src/features/Backups/BackupDrawer.tsx | 2 +- .../Kubernetes/KubeCheckoutBar/HACheckbox.tsx | 2 +- .../KubeCheckoutBar/NodePoolSummary.tsx | 2 +- .../Volumes/VolumeDrawer/CloneVolumeForm.tsx | 2 +- .../CreateVolumeForLinodeForm.tsx | 2 +- .../Volumes/VolumeDrawer/PricePanel.tsx | 30 ++---------- .../Volumes/VolumeDrawer/ResizeVolumeForm.tsx | 4 +- 10 files changed, 28 insertions(+), 72 deletions(-) diff --git a/packages/manager/src/components/CheckoutBar/CheckoutBar.tsx b/packages/manager/src/components/CheckoutBar/CheckoutBar.tsx index 6c450a5e23b..a4deb69fac8 100644 --- a/packages/manager/src/components/CheckoutBar/CheckoutBar.tsx +++ b/packages/manager/src/components/CheckoutBar/CheckoutBar.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import Button from 'src/components/Button'; import Typography from 'src/components/core/Typography'; -import DisplayPrice from 'src/components/DisplayPrice'; +import { DisplayPrice } from 'src/components/DisplayPrice'; import useStyles from './styles'; interface Props { diff --git a/packages/manager/src/components/DisplayPrice/DisplayPrice.tsx b/packages/manager/src/components/DisplayPrice/DisplayPrice.tsx index 96f951b69ef..a431a6693be 100644 --- a/packages/manager/src/components/DisplayPrice/DisplayPrice.tsx +++ b/packages/manager/src/components/DisplayPrice/DisplayPrice.tsx @@ -1,57 +1,36 @@ import * as React from 'react'; -import { makeStyles } from '@mui/styles'; -import { Theme } from '@mui/material/styles'; +import { SxProps, Theme, useTheme } from '@mui/material/styles'; import Typography from 'src/components/core/Typography'; import Currency from 'src/components/Currency'; -const useStyles = makeStyles((theme: Theme) => ({ - price: { - display: 'inline-block', - color: theme.palette.text.primary, - fontSize: '1.125rem', - }, -})); - -interface Props { +export interface DisplayPriceProps { price: number; interval?: string; - fontSize?: string; // optional override + fontSize?: string; } -type CombinedProps = Props; - -export const displayPrice = (v: number) => `$${v.toFixed(2)}`; +export const displayPrice = (price: number) => `$${price.toFixed(2)}`; -export const DisplayPrice: React.FC = (props) => { - const classes = useStyles(); - const { interval, price } = props; +export const DisplayPrice = (props: DisplayPriceProps) => { + const theme = useTheme(); + const { interval, price, fontSize } = props; - const overrideStyle = { - fontSize: props?.fontSize, + const sx: SxProps = { + display: 'inline-block', + color: theme.palette.text.primary, + fontSize: fontSize ?? '1.125rem', }; return ( <> - - + + {interval && ( - + /{interval} )} ); }; - -export default DisplayPrice; diff --git a/packages/manager/src/components/DisplayPrice/index.tsx b/packages/manager/src/components/DisplayPrice/index.tsx index 8c933c730e1..e336dbe72a4 100644 --- a/packages/manager/src/components/DisplayPrice/index.tsx +++ b/packages/manager/src/components/DisplayPrice/index.tsx @@ -1,3 +1,2 @@ -import DisplayPrice, { displayPrice } from './DisplayPrice'; -export { displayPrice }; -export default DisplayPrice; +export { displayPrice, DisplayPrice } from './DisplayPrice'; +export type { DisplayPriceProps } from './DisplayPrice'; diff --git a/packages/manager/src/features/Backups/BackupDrawer.tsx b/packages/manager/src/features/Backups/BackupDrawer.tsx index 5647eed6390..45ba6d49db0 100644 --- a/packages/manager/src/features/Backups/BackupDrawer.tsx +++ b/packages/manager/src/features/Backups/BackupDrawer.tsx @@ -8,7 +8,7 @@ import { compose } from 'recompose'; import ActionsPanel from 'src/components/ActionsPanel'; import Button from 'src/components/Button'; import Typography from 'src/components/core/Typography'; -import DisplayPrice from 'src/components/DisplayPrice'; +import { DisplayPrice } from 'src/components/DisplayPrice'; import Drawer from 'src/components/Drawer'; import Grid from '@mui/material/Unstable_Grid2'; import Link from 'src/components/Link'; diff --git a/packages/manager/src/features/Kubernetes/KubeCheckoutBar/HACheckbox.tsx b/packages/manager/src/features/Kubernetes/KubeCheckoutBar/HACheckbox.tsx index b0ad64fc649..4213a3602d6 100644 --- a/packages/manager/src/features/Kubernetes/KubeCheckoutBar/HACheckbox.tsx +++ b/packages/manager/src/features/Kubernetes/KubeCheckoutBar/HACheckbox.tsx @@ -4,7 +4,7 @@ import Box from 'src/components/core/Box'; import { makeStyles } from '@mui/styles'; import { Theme } from '@mui/material/styles'; import Typography from 'src/components/core/Typography'; -import DisplayPrice from 'src/components/DisplayPrice'; +import { DisplayPrice } from 'src/components/DisplayPrice'; import Link from 'src/components/Link'; import { HIGH_AVAILABILITY_PRICE } from 'src/constants'; diff --git a/packages/manager/src/features/Kubernetes/KubeCheckoutBar/NodePoolSummary.tsx b/packages/manager/src/features/Kubernetes/KubeCheckoutBar/NodePoolSummary.tsx index a788868a750..1101b73372e 100644 --- a/packages/manager/src/features/Kubernetes/KubeCheckoutBar/NodePoolSummary.tsx +++ b/packages/manager/src/features/Kubernetes/KubeCheckoutBar/NodePoolSummary.tsx @@ -5,7 +5,7 @@ import Divider from 'src/components/core/Divider'; import { makeStyles } from '@mui/styles'; import { Theme } from '@mui/material/styles'; import Typography from 'src/components/core/Typography'; -import DisplayPrice from 'src/components/DisplayPrice'; +import { DisplayPrice } from 'src/components/DisplayPrice'; import EnhancedNumberInput from 'src/components/EnhancedNumberInput'; import IconButton from 'src/components/IconButton'; import { ExtendedType } from 'src/utilities/extendType'; diff --git a/packages/manager/src/features/Volumes/VolumeDrawer/CloneVolumeForm.tsx b/packages/manager/src/features/Volumes/VolumeDrawer/CloneVolumeForm.tsx index 6532a999018..e7bfd14ae6e 100644 --- a/packages/manager/src/features/Volumes/VolumeDrawer/CloneVolumeForm.tsx +++ b/packages/manager/src/features/Volumes/VolumeDrawer/CloneVolumeForm.tsx @@ -12,7 +12,7 @@ import { } from 'src/utilities/formikErrorUtils'; import LabelField from './LabelField'; import NoticePanel from './NoticePanel'; -import PricePanel from './PricePanel'; +import { PricePanel } from './PricePanel'; import VolumesActionsPanel from './VolumesActionsPanel'; interface Props { diff --git a/packages/manager/src/features/Volumes/VolumeDrawer/CreateVolumeForLinodeForm.tsx b/packages/manager/src/features/Volumes/VolumeDrawer/CreateVolumeForLinodeForm.tsx index 737293236fe..00625e09ac4 100644 --- a/packages/manager/src/features/Volumes/VolumeDrawer/CreateVolumeForLinodeForm.tsx +++ b/packages/manager/src/features/Volumes/VolumeDrawer/CreateVolumeForLinodeForm.tsx @@ -34,7 +34,7 @@ import LabelField from './LabelField'; import { modes } from './modes'; import { ModeSelection } from './ModeSelection'; import NoticePanel from './NoticePanel'; -import PricePanel from './PricePanel'; +import { PricePanel } from './PricePanel'; import SizeField from './SizeField'; import VolumesActionsPanel from './VolumesActionsPanel'; diff --git a/packages/manager/src/features/Volumes/VolumeDrawer/PricePanel.tsx b/packages/manager/src/features/Volumes/VolumeDrawer/PricePanel.tsx index 99eed2e76fe..5782ce950c7 100644 --- a/packages/manager/src/features/Volumes/VolumeDrawer/PricePanel.tsx +++ b/packages/manager/src/features/Volumes/VolumeDrawer/PricePanel.tsx @@ -1,10 +1,7 @@ import * as React from 'react'; -import { createStyles, withStyles, WithStyles } from '@mui/styles'; -import { Theme } from '@mui/material/styles'; -import DisplayPrice from 'src/components/DisplayPrice'; +import { DisplayPrice } from 'src/components/DisplayPrice'; import { MAX_VOLUME_SIZE } from 'src/constants'; - -type ClassNames = 'root'; +import Box from 'src/components/core/Box'; const getPrice = (size: number) => { return size * 0.1; @@ -17,34 +14,17 @@ const getClampedPrice = (newSize: number, currentSize: number) => : getPrice(MAX_VOLUME_SIZE) : getPrice(currentSize); -const styles = (theme: Theme) => - createStyles({ - root: { - marginTop: theme.spacing(4), - }, - }); - interface Props { value: number; currentSize: number; } -type CombinedProps = Props & WithStyles; - -const PricePanel: React.FC = ({ - currentSize, - value, - classes, -}) => { +export const PricePanel = ({ currentSize, value }: Props) => { const price = getClampedPrice(value, currentSize); return ( -
+ -
+ ); }; - -const styled = withStyles(styles); - -export default styled(PricePanel); diff --git a/packages/manager/src/features/Volumes/VolumeDrawer/ResizeVolumeForm.tsx b/packages/manager/src/features/Volumes/VolumeDrawer/ResizeVolumeForm.tsx index 9abcfe00dcc..9d77f9d0b32 100644 --- a/packages/manager/src/features/Volumes/VolumeDrawer/ResizeVolumeForm.tsx +++ b/packages/manager/src/features/Volumes/VolumeDrawer/ResizeVolumeForm.tsx @@ -10,7 +10,7 @@ import { handleGeneralErrors, } from 'src/utilities/formikErrorUtils'; import NoticePanel from './NoticePanel'; -import PricePanel from './PricePanel'; +import { PricePanel } from './PricePanel'; import SizeField from './SizeField'; import VolumesActionsPanel from './VolumesActionsPanel'; @@ -104,9 +104,7 @@ export const ResizeVolumeForm = (props: Props) => { resize={volumeSize} disabled={readOnly} /> - -