Add scripLink prop to render ScriptLink component

[ghost]

Resolves #2467

Overall change: Integrate ScriptLink to Brand.

Code changes:

• Add scriptLink prop to render the passed <ScriptLink/>.
• Add assertion tests to test that the script link is rendered correctly.
• Update snapshots.

---

• I have assigned myself to this PR and the corresponding issues
• Automated jest tests added (for new features) or updated (for existing features)
• This PR requires manual testing

[j-pendlebury]

looks fine to me

[Bopchy]

Looks good 👍

[DenisHdz]

The top calculation is wrong when the screen is small, making the link to go outside the banner when it should stay in it.

⬇

Instead of making it absolute and calculate the top position, an alternative would be to add a new div to wrap both, Brand and Script Link, and use flex to align the items vertically and put them on each side. And then you wouldn't need ScriptLinkWrapper and SvgWrapper, just to apply a couple of tweaks to the Banner height and padding. Up to you :)

const StyledWrapper = styled.div`
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  max-width: ${GEL_GROUP_5_SCREEN_WIDTH_MIN};
  margin: 0 auto;
`;

  <Banner
      svgHeight={svgHeight}
      borderTop={borderTop}
      borderBottom={borderBottom}
      backgroundColour={backgroundColour}
      logoColour={logoColour}
      {...rest}
    >
      <StyledWrapper>
        {url ? (
          <StyledLink href={url} maxWidth={maxWidth} minWidth={minWidth}>
            <StyledBrand {...props} />
          </StyledLink>
        ) : (
          <StyledBrand {...props} />
        )}
        {scriptLinkComponent}
      </StyledWrapper>
    </Banner>

[ghost]

@DenisHdz Good point. Done 😎

[jamesbrumpton]

lgtm