[FRONT-426] remove Section component

CHANGELOG.md

@@ -8,6 +8,8 @@
 
 ### Removed
 
+- [BREAKING] `Section`: removed the component and replaced the instances with either a `Box` or a full-width `Banner` ([@farazatarodi](https://github.com/farazatarodi) in [#2558](https://github.com/teamleadercrm/ui/pull/2558))
+
 ### Fixed
 
 ### Dependency updates

src/components/banner/Banner.tsx

@@ -1,13 +1,19 @@
 import React from 'react';
+import cx from 'classnames';
 
-import Box from '../box';
-import Island, { IslandProps } from '../island';
-import Section, { SectionProps } from '../section';
+import Box, { BoxProps, Padding } from '../box';
 import IconButton from '../iconButton';
 import theme from './theme.css';
 import { IconCloseMediumOutline } from '@teamleader/ui-icons';
+import { COLORS, SIZES } from '../../constants';
 
-export interface BannerProps extends SectionProps, IslandProps {
+const PADDINGS: Record<'small' | 'medium' | 'large', Padding> = {
+  small: 3,
+  medium: 4,
+  large: 5,
+};
+
+export interface BannerProps extends Omit<BoxProps, 'size'> {
   /** The content to display inside the banner. */
   children?: React.ReactNode;
   /** A class name for the wrapper to give custom styles. */
@@ -18,13 +24,33 @@ export interface BannerProps extends SectionProps, IslandProps {
   onClose?: React.MouseEventHandler<HTMLButtonElement>;
   /** If true, component will take the full width of it's container. */
   fullWidth?: boolean;
+  /** The color for the Banner background and border */
+  color?: Exclude<typeof COLORS[number], 'teal'> | 'white';
+  /** The size of the Banner component */
+  size?: Exclude<typeof SIZES[number], 'tiny' | 'smallest' | 'hero' | 'fullscreen'>;
 }
 
-const Banner = ({ children, className, color = 'white', icon, onClose, fullWidth, ...others }: BannerProps) => {
-  const Element = fullWidth ? Section : Island;
+const Banner = ({
+  children,
+  className,
+  color = 'white',
+  size = 'medium',
+  icon,
+  onClose,
+  fullWidth,
+  ...others
+}: BannerProps) => {
+  const classNames = cx(className, theme[color], theme['banner'], { [theme['banner_full-width']]: fullWidth });
 
   return (
-    <Element data-teamleader-ui="banner" className={className} color={color} {...others}>
+    <Box
+      data-teamleader-ui="banner"
+      className={classNames}
+      color={color}
+      padding={PADDINGS[size]}
+      borderRadius={fullWidth ? 'square' : 'rounded'}
+      {...others}
+    >
       <div className={theme['inner']}>
         {icon && <span className={theme['icon']}>{icon}</span>}
         <Box flex={1} element="span" paddingRight={onClose && 7}>
@@ -39,7 +65,7 @@ const Banner = ({ children, className, color = 'white', icon, onClose, fullWidth
           />
         )}
       </div>
-    </Element>
+    </Box>
   );
 };
 

src/components/banner/__tests__/__snapshots__/Banner.spec.tsx.snap

@@ -3,9 +3,10 @@
 exports[`Component - Banner renders 1`] = `
 <DocumentFragment>
   <div
-    class="box background-color-neutral-lightest padding-bottom-4 padding-left-4 padding-right-4 padding-top-4 white"
-    data-teamleader-ui="island"
-    style="border-bottom: 1px solid #e4e4e6; border-left: 1px solid #e4e4e6; border-right: 1px solid #e4e4e6; border-top: 1px solid #e4e4e6; border-radius: 4px; border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px;"
+    class="box padding-bottom-4 padding-left-4 padding-right-4 padding-top-4 white banner"
+    color="white"
+    data-teamleader-ui="banner"
+    style="border-radius: 4px; border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px;"
   >
     <div
       class="inner"

src/components/banner/theme.css

@@ -1,6 +1,15 @@
 @import '@teamleader/ui-colors';
 @import '@teamleader/ui-utilities';
 
+.banner {
+  border: 1px solid;
+
+  &_full-width {
+    border: 0px solid;
+    border-bottom-width: 1px;
+  }
+}
+
 .icon {
   margin-right: var(--spacer-small);
   display: flex;
@@ -17,3 +26,45 @@
   top: -3px;
   right: -3px;
 }
+
+.white {
+  background-color: var(--color-white);
+  border-color: var(--color-neutral);
+  color: var(--color-teal-darkest);
+}
+
+.neutral {
+  background-color: var(--color-neutral-light);
+  border-color: var(--color-neutral);
+  color: var(--color-teal-darkest);
+}
+
+.mint {
+  background-color: var(--color-mint-lightest);
+  border-color: var(--color-mint);
+  color: var(--color-mint-darkest);
+}
+
+.violet {
+  background-color: var(--color-violet-lightest);
+  border-color: var(--color-violet);
+  color: var(--color-violet-darkest);
+}
+
+.ruby {
+  background-color: var(--color-ruby-lightest);
+  border-color: var(--color-ruby);
+  color: var(--color-ruby-darkest);
+}
+
+.gold {
+  background-color: var(--color-gold-lightest);
+  border-color: var(--color-gold);
+  color: var(--color-gold-darkest);
+}
+
+.aqua {
+  background-color: var(--color-aqua-lightest);
+  border-color: var(--color-aqua);
+  color: var(--color-aqua-darkest);
+}

src/components/detailPage/DetailPageHeader.tsx

@@ -6,7 +6,6 @@ import { BadgedLinkProps } from '../badgedLink/BadgedLink';
 import { Box } from '../box';
 import Container from '../container';
 import { ContainerProps } from '../container/Container';
-import Section from '../section';
 import { Heading1, TextBody } from '../typography';
 import theme from './theme.css';
 
@@ -28,7 +27,15 @@ const DetailPageHeader: GenericComponent<DetailPageHeaderProps> = ({
   ...others
 }) => {
   return (
-    <Container data-teamleader-ui="detail-page-header" {...others} element={Section}>
+    <Container
+      data-teamleader-ui="detail-page-header"
+      backgroundColor="neutral"
+      backgroundTint="lightest"
+      borderBottomWidth={1}
+      borderTint="normal"
+      padding={4}
+      {...others}
+    >
       <Box className={theme['header-inner']} display="flex">
         {backLinkProps && (
           <TextBody className={theme['back-link']}>

src/components/detailPage/__tests__/__snapshots__/DetailPage.spec.tsx.snap

@@ -6,10 +6,10 @@ exports[`Component - DetailPage renders 1`] = `
     class="box"
     data-teamleader-ui="detail-page"
   >
-    <section
-      class="box padding-bottom-4 padding-left-4 padding-right-4 padding-top-4 section box container white"
+    <div
+      class="box background-color-neutral-lightest padding-bottom-4 padding-left-4 padding-right-4 padding-top-4 container"
       data-teamleader-ui="detail-page-header"
-      style="box-sizing: content-box;"
+      style="border-bottom: 1px solid #e4e4e6; box-sizing: content-box;"
     >
       <div
         class="box display-flex header-inner"
@@ -48,7 +48,7 @@ exports[`Component - DetailPage renders 1`] = `
           </button>
         </div>
       </div>
-    </section>
+    </div>
     <div
       class="box padding-bottom-8 padding-top-6 container is-fixed"
       data-teamleader-ui="detail-page-body"

src/components/dialog/Header.tsx

@@ -1,12 +1,12 @@
 import React, { ReactNode } from 'react';
 import { IconCloseMediumOutline } from '@teamleader/ui-icons';
 
-import Section from '../section';
 import IconButton from '../iconButton';
 import Icon from '../icon';
 
 import theme from './theme.css';
 import { GenericComponent } from '../../@types/types';
+import Box from '../box';
 
 export interface HeaderProps {
   /** The content to display inside the dialog. */
@@ -19,7 +19,16 @@ export interface HeaderProps {
 
 const Header: GenericComponent<HeaderProps> = ({ icon, onCloseClick, children, ...rest }) => {
   return (
-    <Section display="flex" alignItems="center" color="neutral" {...rest}>
+    <Box
+      display="flex"
+      alignItems="center"
+      padding={4}
+      backgroundColor="neutral"
+      backgroundTint="light"
+      borderBottomWidth={1}
+      borderTint="normal"
+      {...rest}
+    >
       {icon && (
         <Icon color="teal" tint="darkest" marginRight={3}>
           {icon}
@@ -34,7 +43,7 @@ const Header: GenericComponent<HeaderProps> = ({ icon, onCloseClick, children, .
           className={theme['close-icon']}
         />
       )}
-    </Section>
+    </Box>
   );
 };
 

src/components/dialog/__tests__/Dialog.spec.tsx

@@ -61,7 +61,7 @@ describe('Component - Dialog', () => {
     );
 
     expect(handleOnClose).not.toBeCalled();
-    const closeButton = screen.baseElement.querySelector('section button[type="button"]');
+    const closeButton = screen.baseElement.querySelector('div button[type="button"]');
 
     await user.click(closeButton!);
     expect(handleOnClose).toBeCalledTimes(1);

src/components/dialog/__tests__/__snapshots__/Dialog.spec.tsx.snap

@@ -29,9 +29,9 @@ exports[`Component - Dialog renders 1`] = `
           <div
             class="inner"
           >
-            <section
-              class="box align-items-center display-flex padding-bottom-4 padding-left-4 padding-right-4 padding-top-4 section neutral"
-              data-teamleader-ui="section"
+            <div
+              class="box align-items-center background-color-neutral-light display-flex padding-bottom-4 padding-left-4 padding-right-4 padding-top-4"
+              style="border-bottom: 1px solid #e4e4e6;"
             >
               <span
                 class="box align-items-center display-flex margin-right-3 teal darkest"
@@ -88,7 +88,7 @@ exports[`Component - Dialog renders 1`] = `
                   </svg>
                 </span>
               </button>
-            </section>
+            </div>
             <div
               class="box display-flex flex-direction-column"
               style="overflow-y: auto;"

src/components/marketingDialog/__tests__/__snapshots__/MarketingDialog.spec.tsx.snap

@@ -25,9 +25,9 @@ exports[`Component - Dialog renders 1`] = `
               class="box display-flex flex-direction-column"
               style="overflow-y: auto;"
             >
-              <section
-                class="box align-items-center display-flex padding-bottom-4 padding-left-4 padding-right-4 padding-top-4 section neutral"
-                data-teamleader-ui="section"
+              <div
+                class="box align-items-center background-color-neutral-light display-flex padding-bottom-4 padding-left-4 padding-right-4 padding-top-4"
+                style="border-bottom: 1px solid #e4e4e6;"
               >
                 <h3
                   class="box heading heading-3 darkest"
@@ -61,7 +61,7 @@ exports[`Component - Dialog renders 1`] = `
                     </svg>
                   </span>
                 </button>
-              </section>
+              </div>
               <div
                 class="box align-items-center display-flex flex-direction-row justify-content-space-between padding-bottom-6 padding-left-6 padding-right-6 padding-top-6"
                 style="overflow-y: auto;"