refactor(components): resolve buttons' nested structure (#18840)

* refactor(components): resolve buttons' nested structure

Author: koji

components/src/atoms/buttons/AlertPrimaryButton.tsx

@@ -1,14 +1,14 @@
 import styled from 'styled-components'
 
 import { BORDERS, COLORS } from '../../helix-design-system'
-import { NewAlertPrimaryBtn, styleProps } from '../../primitives'
+import { Btn, styleProps } from '../../primitives'
 import { SPACING, TYPOGRAPHY } from '../../ui-style-constants'
 
-export const AlertPrimaryButton = styled(NewAlertPrimaryBtn)`
+export const AlertPrimaryButton = styled(Btn)`
+  color: ${COLORS.white};
   background-color: ${COLORS.red50};
   border-radius: ${BORDERS.borderRadius8};
-  padding-left: ${SPACING.spacing16};
-  padding-right: ${SPACING.spacing16};
+  padding: ${SPACING.spacing8} ${SPACING.spacing16};
   text-transform: ${TYPOGRAPHY.textTransformNone};
   box-shadow: 0 0 0;
   ${TYPOGRAPHY.pSemiBold}

components/src/atoms/buttons/AltPrimaryButton.tsx

@@ -1,12 +1,18 @@
 import styled from 'styled-components'
 
-import { PrimaryButton } from '../..'
-import { COLORS } from '../../helix-design-system'
-import { styleProps } from '../../primitives'
+import { BORDERS, COLORS } from '../../helix-design-system'
+import { Btn, styleProps } from '../../primitives'
+import { SPACING, TYPOGRAPHY } from '../../ui-style-constants'
 
-export const AltPrimaryButton = styled(PrimaryButton)`
+export const AltPrimaryButton = styled(Btn)`
   background-color: ${COLORS.grey30};
   color: ${COLORS.black90};
+  padding: ${SPACING.spacing8} ${SPACING.spacing16};
+  border-radius: ${BORDERS.borderRadius8};
+  box-shadow: none;
+  font-size: ${TYPOGRAPHY.fontSizeH3};
+  font-weight: ${TYPOGRAPHY.fontWeightSemiBold};
+  line-height: ${TYPOGRAPHY.lineHeight20};
 
   ${styleProps}
 

components/src/atoms/buttons/PrimaryButton.tsx

@@ -1,15 +1,15 @@
 import styled from 'styled-components'
 
 import { BORDERS, COLORS } from '../../helix-design-system'
-import { NewPrimaryBtn, styleProps } from '../../primitives'
+import { Btn, styleProps } from '../../primitives'
 import { SPACING, TYPOGRAPHY } from '../../ui-style-constants'
 
-export const PrimaryButton = styled(NewPrimaryBtn)`
+export const PrimaryButton = styled(Btn)`
+  color: ${COLORS.white};
   background-color: ${COLORS.blue50};
   border-radius: ${BORDERS.borderRadius8};
   box-shadow: none;
-  padding-left: ${SPACING.spacing16};
-  padding-right: ${SPACING.spacing16};
+  padding: ${SPACING.spacing8} ${SPACING.spacing16};
   line-height: ${TYPOGRAPHY.lineHeight20};
   text-transform: ${TYPOGRAPHY.textTransformNone};
   font-size: ${TYPOGRAPHY.fontSizeH3};

components/src/atoms/buttons/__tests__/AlertPrimaryButton.test.tsx

@@ -28,7 +28,7 @@ describe('AlertPrimaryButton', () => {
     const button = screen.getByText('alert primary button')
     expect(button).toHaveStyle(`background-color: ${COLORS.red50}`)
     expect(button).toHaveStyle(
-      `padding: ${SPACING.spacing8} ${SPACING.spacing16} ${SPACING.spacing8} ${SPACING.spacing16}`
+      `padding: ${SPACING.spacing8} ${SPACING.spacing16}`
     )
     expect(button).toHaveStyle(`font-size: ${TYPOGRAPHY.fontSizeP}`)
     expect(button).toHaveStyle(`font-weight: ${TYPOGRAPHY.fontWeightSemiBold}`)

components/src/atoms/buttons/__tests__/AltPrimaryButton.test.tsx

@@ -28,7 +28,7 @@ describe('AltPrimaryButton', () => {
     const button = screen.getByText('alt primary button')
     expect(button).toHaveStyle(`background-color: ${COLORS.grey30}`)
     expect(button).toHaveStyle(
-      `padding: ${SPACING.spacing8} ${SPACING.spacing16} ${SPACING.spacing8} ${SPACING.spacing16}`
+      `padding: ${SPACING.spacing8} ${SPACING.spacing16}`
     )
     expect(button).toHaveStyle(`font-size: ${TYPOGRAPHY.fontSizeH3}`)
     expect(button).toHaveStyle(`font-weight: ${TYPOGRAPHY.fontWeightSemiBold}`)

components/src/atoms/buttons/__tests__/PrimaryButton.test.tsx

@@ -28,7 +28,7 @@ describe('PrimaryButton', () => {
     const button = screen.getByText('primary button')
     expect(button).toHaveStyle(`background-color: ${COLORS.blue50}`)
     expect(button).toHaveStyle(
-      `padding: ${SPACING.spacing8} ${SPACING.spacing16} ${SPACING.spacing8} ${SPACING.spacing16}`
+      `padding: ${SPACING.spacing8} ${SPACING.spacing16}`
     )
     expect(button).toHaveStyle(`font-size: ${TYPOGRAPHY.fontSizeH3}`)
     expect(button).toHaveStyle(`font-weight: ${TYPOGRAPHY.fontWeightSemiBold}`)

components/src/primitives/Btn.stories.tsx

@@ -1,7 +1,6 @@
 import { Box } from './Box'
 import {
   LightSecondaryBtn,
-  NewAlertPrimaryBtn,
   NewAlertSecondaryBtn,
   NewPrimaryBtn,
   NewSecondaryBtn,
@@ -36,37 +35,28 @@ Secondary.args = {
   title: 'secondary button title',
 }
 
-const AppPrimaryTemlate: Story<
+const AppPrimaryTemplate: Story<
   React.ComponentProps<typeof NewPrimaryBtn>
 > = args => <NewPrimaryBtn {...args} />
-export const AppPrimary = AppPrimaryTemlate.bind({})
+export const AppPrimary = AppPrimaryTemplate.bind({})
 AppPrimary.args = {
   children: 'Confirm and Proceed',
   title: 'app primary button title',
 }
 
-const AppSecondaryTemlate: Story<
+const AppSecondaryTemplate: Story<
   React.ComponentProps<typeof NewSecondaryBtn>
 > = args => <NewSecondaryBtn {...args} />
-export const AppSecondary = AppSecondaryTemlate.bind({})
+export const AppSecondary = AppSecondaryTemplate.bind({})
 AppSecondary.args = {
   children: 'Confirm and Proceed',
   title: 'app secondary button title',
 }
 
-const AppAlertPrimaryTemlate: Story<
-  React.ComponentProps<typeof NewAlertPrimaryBtn>
-> = args => <NewAlertPrimaryBtn {...args} />
-export const AppAlertPrimary = AppAlertPrimaryTemlate.bind({})
-AppAlertPrimary.args = {
-  children: 'Cancel',
-  title: 'app alert primary button title',
-}
-
-const AppAlertSecondaryTemlate: Story<
+const AppAlertSecondaryTemplate: Story<
   React.ComponentProps<typeof NewAlertSecondaryBtn>
 > = args => <NewAlertSecondaryBtn {...args} />
-export const AppAlertSecondary = AppAlertSecondaryTemlate.bind({})
+export const AppAlertSecondary = AppAlertSecondaryTemplate.bind({})
 AppAlertSecondary.args = {
   children: 'Cancel',
   title: 'app alert secondary button title',

components/src/primitives/Btn.tsx

@@ -190,25 +190,6 @@ export const NewSecondaryBtn = styled(SecondaryBtn)`
 
   ${styleProps}
 `
-/**
- * Red primary button variant used in app
- *
- * @component
- */
-export const NewAlertPrimaryBtn = styled(NewPrimaryBtn)`
-  background-color: ${Styles.C_ERROR_DARK};
-
-  &:hover,
-  &:focus {
-    background-color: ${Styles.C_ERROR_DARK};
-  }
-
-  &:active {
-    background-color: ${Styles.C_ERROR_LIGHT};
-  }
-
-  ${styleProps}
-`
 
 /**
  * Red secondary button variant used in app