Added Event notification banner and added narrow padding styles for t…

dist/lib/components/event-notification-banner/event-notification-banner.d.ts

@@ -0,0 +1,9 @@
+export interface EventNotificationBannerProps {
+    text: string | undefined;
+    linkText?: string;
+    linkSource?: string;
+    withPageTile?: boolean;
+}
+export declare const EventNotificationBanner: ({ text, linkText, linkSource, withPageTile, }: EventNotificationBannerProps) => import("react/jsx-runtime").JSX.Element | null;
+export default EventNotificationBanner;
+//# sourceMappingURL=event-notification-banner.d.ts.map

dist/lib/components/tooltip/tooltip.d.ts

@@ -4,6 +4,7 @@ type StyledReactTooltipProps = {
     lineHeight?: 'xs' | 'sm';
     scale?: 'xs' | 'sm';
     paddingScale?: 1 | 2;
+    padding?: string;
 };
 export interface TooltipProps extends BaseProps {
     tooltipContent?: JSX.Element | string | null;

dist/lib/index.d.ts

@@ -80,6 +80,7 @@ export * from './components/activity-feed-item/activity-feed-item';
 export * from './components/cspr-amount/cspr-amount';
 export * from './components/cspr-amount-with-fiat/cspr-amount-with-fiat';
 export * from './components/token-amount/token-amount';
+export * from './components/event-notification-banner/event-notification-banner';
 export * from './hooks/use-click-and-touch-away';
 export * from './hooks/use-escape-key';
 export * from './hooks/use-click-away';

src/lib/components/event-notification-banner/event-notification-banner.tsx

@@ -0,0 +1,106 @@
+import React from 'react';
+import styled from 'styled-components';
+import PageTile from "../page-tile/page-tile";
+import FlexRow from "../flex-row/flex-row";
+import SvgIcon from "../svg-icon/svg-icon";
+import Link from "../link/link";
+import InfoColourIcon from '../../assets/icons/ic-info-colour.svg';
+import BodyText from "../body-text/body-text";
+
+const StyledPageTile = styled(PageTile)(({ theme }) =>
+  theme.withMedia({
+    margin: '24px 0 0',
+    padding: 0,
+    maxWidth: theme.maxWidth,
+  })
+);
+
+const EventNotificationContainer = styled(FlexRow)<{ withPageTile?: boolean }>(
+  ({ theme, withPageTile }) =>
+    theme.withMedia({
+      width: '100%',
+      maxWidth: theme.maxWidth,
+      backgroundColor: `${theme.styleguideColors.contentYellow}1F`,
+      borderRadius: '4px',
+      padding: ['16px 24px', '10px 0'],
+      color: withPageTile
+        ? theme.styleguideColors.contentPrimary
+        : theme.styleguideColors.contentYellow,
+      alignItems: ['baseline', 'center'],
+    })
+);
+
+const TextContainer = styled(FlexRow)(({ theme }) =>
+  theme.withMedia({
+    flexWrap: 'wrap',
+  })
+);
+
+const StyledSvgIcon = styled(SvgIcon)(({ theme }) =>
+  theme.withMedia({
+    path: {
+      fill: theme.styleguideColors.contentYellow,
+    },
+  })
+);
+
+const StyledLink = styled(Link)<{ withPageTile?: boolean }>(
+  ({ theme, withPageTile }) => ({
+    color: withPageTile ? theme.styleguideColors.contentBlue : '#8FA6FF',
+  })
+);
+
+export interface EventNotificationBannerProps {
+  text: string | undefined;
+  linkText?: string;
+  linkSource?: string;
+  withPageTile?: boolean;
+}
+
+export const EventNotificationBanner = ({
+  text,
+  linkText,
+  linkSource,
+  withPageTile,
+}: EventNotificationBannerProps) => {
+  if (!text) {
+    return null;
+  }
+
+  const bannerContent = (
+    <EventNotificationContainer
+      justify={'center'}
+      itemsSpacing={8}
+      withPageTile={withPageTile}
+    >
+      <StyledSvgIcon src={InfoColourIcon} alt={'Event notification icon'} />
+      <TextContainer>
+        <BodyText size={3}>
+          {text}
+
+          {linkText && linkSource && (
+            <>
+              {' '}
+              <StyledLink
+                href={linkSource}
+                target="_blank"
+                rel="noopener noreferrer"
+                withPageTile={withPageTile}
+              >
+                {linkText}
+              </StyledLink>
+            </>
+          )}
+        </BodyText>
+      </TextContainer>
+    </EventNotificationContainer>
+  );
+
+  return withPageTile ? (
+    <StyledPageTile>{bannerContent}</StyledPageTile>
+  ) : (
+    bannerContent
+  );
+};
+
+export default EventNotificationBanner;

src/lib/components/tooltip/tooltip.tsx

@@ -17,6 +17,7 @@ type StyledReactTooltipProps = {
   lineHeight?: 'xs' | 'sm';
   scale?: 'xs' | 'sm';
   paddingScale?: 1 | 2;
+  padding?: string;
 };
 
 export interface TooltipProps extends BaseProps {
@@ -32,12 +33,12 @@ const StyledReactTooltip = styled(
     ReakitTooltip,
 ).withConfig<StyledReactTooltipProps>({
     shouldForwardProp: (prop) => prop !== 'paddingScale',
-})(({ theme, lineHeight = 'sm', scale = 'sm', paddingScale = 2 }) => ({
+})(({ theme, lineHeight = 'sm', scale = 'sm', paddingScale = 2, padding }) => ({
     zIndex: theme.zIndex.tooltip,
     color: theme.styleguideColors.contentPrimary,
     backgroundColor: theme.styleguideColors.backgroundPrimary,
     borderRadius: theme.borderRadius.base,
-    padding: theme.padding[paddingScale],
+    padding: padding || theme.padding[paddingScale],
     boxShadow: theme.boxShadow.tooltip,
 
     transition: 'opacity 250ms ease-in-out',
@@ -77,6 +78,7 @@ export const Tooltip = React.forwardRef<
       lineHeight = 'sm',
       scale = 'sm',
       paddingScale = 2,
+      padding,
       ...props
     },
     ref,
@@ -101,7 +103,7 @@ export const Tooltip = React.forwardRef<
         <TooltipReference {...tooltip} ref={children.ref} {...children.props}>
           {(referenceProps) => React.cloneElement(children, referenceProps)}
         </TooltipReference>
-        <StyledReactTooltip paddingScale={paddingScale} {...tooltip} {...props}>
+        <StyledReactTooltip paddingScale={paddingScale} padding={padding} {...tooltip} {...props}>
           <div style={{ maxWidth }}>
             <FlexColumn itemsSpacing={8}>
               <FlexColumn>

src/lib/index.ts

@@ -80,6 +80,7 @@ export * from './components/activity-feed-item/activity-feed-item';
 export * from './components/cspr-amount/cspr-amount';
 export * from './components/cspr-amount-with-fiat/cspr-amount-with-fiat';
 export * from './components/token-amount/token-amount';
+export * from './components/event-notification-banner/event-notification-banner';
 export * from './hooks/use-click-and-touch-away';
 export * from './hooks/use-escape-key';
 export * from './hooks/use-click-away';