Merge pull request #1785 from dxc-technology/Mil4n0r/header_footer_types-fix

Fixed typings from footer/header margins

Author: raquelarrojo

lib/src/footer/Footer.tsx

@@ -78,7 +78,7 @@ const FooterContainer = styled.footer<{ margin: FooterPropsType["margin"] }>`
   justify-content: space-between;
   width: 100%;
   min-height: ${(props) => props.theme.height};
-  margin-top: ${(props) => (props.margin && typeof props.margin !== "object" ? spaces[props.margin] : "0px")};
+  margin-top: ${(props) => (props.margin ? spaces[props.margin] : "0px")};
   background-color: ${(props) => props.theme.backgroundColor};
 
   @media (min-width: ${responsiveSizes.small}rem) {

lib/src/footer/types.ts

@@ -1,10 +1,4 @@
 type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
-type Size = {
-  top?: Space;
-  bottom?: Space;
-  left?: Space;
-  right?: Space;
-};
 type SVG = React.ReactNode & React.SVGProps<SVGSVGElement>;
 
 type SocialLink = {
@@ -56,7 +50,7 @@ type FooterPropsType = {
   /**
    * Size of the top margin to be applied to the footer.
    */
-  margin?: Space | Size;
+  margin?: Space;
   /**
    * Value of the tabindex for all interactive elements, except those
    * inside the custom area.

lib/src/header/Header.tsx

@@ -167,7 +167,7 @@ const HeaderContainer = styled.header<{ margin: HeaderPropsType["margin"]; under
   align-items: center;
   justify-content: space-between;
   min-height: ${(props) => props.theme.minHeight};
-  margin-bottom: ${(props) => (props.margin && typeof props.margin !== "object" ? spaces[props.margin] : "0px")};
+  margin-bottom: ${(props) => (props.margin ? spaces[props.margin] : "0px")};
   padding: ${(props) =>
     `${props.theme.paddingTop} ${props.theme.paddingRight} ${props.theme.paddingBottom} ${props.theme.paddingLeft}`};
   background-color: ${(props) => props.theme.backgroundColor};

lib/src/header/types.ts

@@ -1,3 +1,5 @@
+type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
+
 type Props = {
   /**
    * Whether a contrast line should appear at the bottom of the header.
@@ -21,7 +23,7 @@ type Props = {
   /**
    * Size of the bottom margin to be applied to the header.
    */
-  margin?: "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
+  margin?: Space;
   /**
    * Value of the tabindex for all interactive elements, except those inside the
    * custom area.