Create Banner component and examples

Author: tristandubbeld

packages/components/src/components/Banner/Banner.stories.tsx

@@ -0,0 +1,105 @@
+import React from 'react';
+
+import { Banner } from './Banner';
+import { Stack } from '../Stack';
+import { Text } from '../Text';
+import { Button } from '../Button';
+import { Icon } from '../Icon';
+import { Grid, Column } from '../Grid';
+
+export default {
+  title: 'components/facelift/Banner',
+  component: Banner,
+};
+
+export const WithDismiss = () => (
+  <Banner onDismiss={() => {}}>
+    You are no longer in a Pro team. This private repo is in view mode only.
+    Make it public or upgrade.
+  </Banner>
+);
+
+export const WithoutDismiss = () => (
+  <Banner>
+    You are no longer in a Pro team. This private repo is in view mode only.
+    Make it public or upgrade.
+  </Banner>
+);
+
+export const ExampleUsage = () => (
+  <Banner onDismiss={() => {}}>
+    <Stack gap={2} justify="space-between">
+      <Stack direction="vertical" gap={8} justify="space-between">
+        <Text fontFamily="everett" size={24}>
+          <Text color="#EDFFA5" weight="600" block>
+            Upgrade to <Text css={{ textTransform: 'uppercase' }}>pro</Text>
+          </Text>
+          <Text block>Enjoy the full CodeSandbox experience.</Text>
+        </Text>
+        <Button autoWidth>Learn more</Button>
+      </Stack>
+      <Stack align="flex-end">
+        <Grid
+          as="ul"
+          columnGap={3}
+          rowGap={3}
+          css={{
+            color: '#EBEBEB',
+            margin: 0,
+            padding: 0,
+            listStyleType: 'none',
+          }}
+        >
+          <Column as="li" span={6}>
+            <Stack gap={4}>
+              <Icon name="profile" />
+              <Text size={13} lineHeight="16px">
+                Up to 20 editors
+              </Text>
+            </Stack>
+          </Column>
+          <Column as="li" span={6}>
+            <Stack gap={4}>
+              <Icon name="profile" />
+              <Text size={13} lineHeight="16px">
+                Private NPM packages
+              </Text>
+            </Stack>
+          </Column>
+          <Column as="li" span={6}>
+            <Stack gap={4}>
+              <Icon name="profile" />
+              <Text size={13} lineHeight="16px">
+                Unlimited sandboxes
+              </Text>
+            </Stack>
+          </Column>
+          <Column as="li" span={6}>
+            <Stack gap={4}>
+              <Icon name="profile" />
+              <Text size={13} lineHeight="16px">
+                Advanced privacy settings
+              </Text>
+            </Stack>
+          </Column>
+          <Column as="li" span={6}>
+            <Stack gap={4}>
+              <Icon name="profile" />
+              <Text size={13} lineHeight="16px">
+                Unlimited repositories
+              </Text>
+            </Stack>
+          </Column>
+          <Column as="li" span={6}>
+            <Stack gap={4}>
+              <Icon name="profile" />
+              <Text size={13} lineHeight="16px">
+                6GB RAM, 12GB Disk, 4 vCPUs
+              </Text>
+            </Stack>
+          </Column>
+        </Grid>
+      </Stack>
+    </Stack>
+  </Banner>
+);

packages/components/src/components/Banner/Banner.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+
+import { Element } from '../Element';
+import { IconButton } from '../IconButton';
+
+interface BannerProps {
+  children: React.ReactNode;
+  onDismiss?: () => void;
+}
+
+export const Banner = ({ children, onDismiss }: BannerProps) => {
+  return (
+    <Element
+      css={{
+        position: 'relative',
+        padding: [4, 6, 8],
+        backgroundColor: '#252525',
+        borderRadius: '4px',
+      }}
+    >
+      {children}
+
+      {onDismiss ? (
+        <Element
+          css={{ position: 'absolute', right: [1, 2, 4], top: [1, 2, 4] }}
+        >
+          <IconButton
+            name="cross"
+            variant="round"
+            title="Dismiss"
+            onClick={onDismiss}
+          />
+        </Element>
+      ) : null}
+    </Element>
+  );
+};

packages/components/src/components/Stack/index.tsx

@@ -9,12 +9,14 @@ export const Stack = styled(Element)<{
   justify?: React.CSSProperties['justifyContent'];
   align?: React.CSSProperties['alignItems'];
   inline?: boolean;
-}>(({ gap = 0, direction = 'horizontal', justify, align, inline }) =>
+  wrap?: boolean;
+}>(({ gap = 0, direction = 'horizontal', justify, align, inline, wrap }) =>
   css({
     display: inline ? 'inline-flex' : 'flex',
     flexDirection: direction === 'horizontal' ? 'row' : 'column',
     justifyContent: justify,
     alignItems: align,
+    flexWrap: wrap ? 'wrap' : 'nowrap',
 
     '> *:not(:last-child)': {
       [direction === 'horizontal' ? 'marginRight' : 'marginBottom']: gap,

packages/components/src/components/Text/index.tsx

@@ -16,6 +16,11 @@ const overflowStyles = {
   whiteSpace: 'nowrap',
 };
 
+const fontFamilies = {
+  inter: 'Inter, sans-serif',
+  everett: 'Everett, sans-serif',
+};
+
 export interface ITextProps extends React.HTMLAttributes<HTMLSpanElement> {
   size?: number;
   align?: string;
@@ -26,6 +31,8 @@ export interface ITextProps extends React.HTMLAttributes<HTMLSpanElement> {
   variant?: 'body' | 'muted' | 'danger' | 'active';
   dateTime?: string;
   lineHeight?: string;
+  color?: string;
+  fontFamily?: 'inter' | 'everett';
 }
 
 export const Text = styled(Element).attrs(p => ({
@@ -40,6 +47,8 @@ export const Text = styled(Element).attrs(p => ({
     variant = 'body',
     maxWidth,
     lineHeight,
+    color,
+    fontFamily,
     ...props
   }) =>
     css({
@@ -49,8 +58,9 @@ export const Text = styled(Element).attrs(p => ({
       lineHeight: lineHeight || 'normal',
       fontStyle: fontStyle || null, // from theme.fontWeights
       display: block || maxWidth ? 'block' : 'inline',
-      color: variants[variant],
+      color: color || variants[variant],
       maxWidth,
+      fontFamily: fontFamilies[fontFamily],
       ...(maxWidth ? overflowStyles : {}),
     })
 );