feat: export components

Author: minheq

src/Background.stories.tsx

@@ -0,0 +1,27 @@
+import { storiesOf } from '@storybook/react';
+import React from 'react';
+import { Box } from 'paramount-ui';
+
+import { Background } from './Background';
+
+storiesOf('Background', module)
+  .add('Textured', () => (
+    <Background pattern="textured">
+      <Box width={60} height={60} />
+    </Background>
+  ))
+  .add('Dotted', () => (
+    <Background pattern="dotted">
+      <Box width={60} height={60} />
+    </Background>
+  ))
+  .add('Dark', () => (
+    <Background pattern="dark-pattern">
+      <Box width={60} height={60} />
+    </Background>
+  ))
+  .add('Logo', () => (
+    <Background pattern="dark-logo">
+      <Box width={60} height={60} />
+    </Background>
+  ));

src/Background.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+
+export interface BackgroundProps {
+  pattern: 'dotted' | 'textured' | 'dark-pattern' | 'dark-logo';
+  children?: React.ReactNode;
+}
+
+export const Background = (props: BackgroundProps): JSX.Element => {
+  const { children, pattern = 'textured' } = props;
+
+  if (pattern === 'dark-pattern') {
+    return (
+      <div
+        style={{
+          backgroundImage: `url('https://res.cloudinary.com/wetrust-cryptounlocked/image/upload/c_crop,w_400/v1573530837/dark-bg.jpg')`,
+        }}
+      >
+        {children}
+      </div>
+    );
+  }
+
+  if (pattern === 'dark-logo') {
+    return (
+      <div
+        style={{
+          backgroundImage: `url('https://res.cloudinary.com/wetrust-cryptounlocked/image/upload/c_crop,w_400/v1573530837/wetrust-bg.jpg')`,
+        }}
+      >
+        {children}
+      </div>
+    );
+  }
+
+  if (pattern === 'dotted') {
+    return (
+      <div
+        style={{
+          backgroundImage: `url('https://res.cloudinary.com/wetrust-cryptounlocked/image/upload/c_crop,w_400/v1568706049/dotted-bg.png')`,
+        }}
+      >
+        {children}
+      </div>
+    );
+  }
+
+  return (
+    <div
+      style={{
+        backgroundImage: `url('https://res.cloudinary.com/wetrust-cryptounlocked/image/upload/c_crop,w_400/v1568706049/textured-bg.png')`,
+      }}
+    >
+      {children}
+    </div>
+  );
+};

src/index.ts

@@ -1,4 +1,5 @@
 export * from './BlockchainAccountStatus';
+export * from './Background';
 export * from './CTAButton';
 export * from './CurrencyProvider';
 export * from './CurrencyUtils';