fix: export all patterns as components

package.json

@@ -1,6 +1,6 @@
 {
  "name": "@meetalva/alva-design",
- "version": "1.4.2",
+ "version": "1.4.3",
  "description": "Every component used for the official Alva website",
  "alva": {
  "name": "Alva Website Design",

src/copy/copy.tsx

@@ -9,7 +9,6 @@ export interface CopyProps {
  /** @name Text Align @default Left */ textAlign?: TextAlign;
  /** @name Color @default #000000 */ color?: string;
  /** @name Uppercase @default false */ uppercase?: boolean;
-
  children?: React.ReactNode;
 }
 
@@ -19,10 +18,7 @@ export enum CopySize {
  Large = 'copy-large'
 }
 
-/**
- * @icon Type
- */
-export const Copy = styled.div<CopyProps>`
+const StyledCopy = styled.div<CopyProps>`
  margin: 0;
  font-family: ${fonts().NORMAL_FONT};
  color: ${(props: CopyProps) => props.color || 'inherit'};
@@ -65,3 +61,14 @@ export const Copy = styled.div<CopyProps>`
  text-transform: uppercase;`
  : ''};
 `;
+
+/**
+ * @icon Type
+ */
+export const Copy: React.StatelessComponent<CopyProps> = (props): JSX.Element => {
+ return (
+ <StyledCopy {...props}>
+ {props.children}
+ </StyledCopy>
+ );
+};

src/layout/layout.tsx

@@ -6,21 +6,30 @@ export interface LayoutProps {
  /** @name Width @default 100% */ width?: string;
  /** @name Maximum width*/ maxWidth?: string;
  /** @name Background color @default transparent */ backgroundColor?: string;
- center?: boolean;
+ /** @name Center */ center?: boolean;
  children?: React.ReactNode;
- className?: string;
+ /** @name ignore */ className?: string;
 }
 
 export enum LayoutDirection {
  /** @name horizontal */ Horizontal,
  /** @name vertical */ Vertical
 }
 
-export const Layout = styled.div<LayoutProps>`
+const StyledLayout = styled.div<LayoutProps>`
  display: ${props => (props.direction === LayoutDirection.Vertical ? "block" : "flex")};
  position: relative;
  margin: 0 ${props => (props.center && "auto") || ""};
  width: ${props => props.width || "auto"};
  max-width: ${props => props.maxWidth || "none"};
  background-color: ${props => props.backgroundColor || "none"};
 `;
+
+export const Layout: React.StatelessComponent<LayoutProps> = (props): JSX.Element => {
+ return (
+ <StyledLayout {...props}>
+ {props.children}
+ </StyledLayout>
+ );
+};
+

src/link/link.tsx

@@ -1,5 +1,4 @@
 import * as React from "react";
-import styled from "@emotion/styled";;
 import { Color } from "../colors";
 import { fonts } from '../fonts';
 
@@ -11,8 +10,15 @@ export interface LinkProps {
  children?: React.ReactNode;
 }
 
-export const Link = styled.div<LinkProps>`
- display: inline-block;
- color: ${props => props.color || 'inherit'};
- font-family: ${fonts().NORMAL_FONT};
-`;
+export const Link: React.StatelessComponent<LinkProps> = (props): JSX.Element => {
+ return (
+ <div onClick={props.onClick} style={{
+ display: 'inline-block',
+ color: props.color || 'inherit',
+ fontFamily: fonts().NORMAL_FONT
+ }}>
+ {props.children}
+ </div>
+ );
+};
+

src/space/space.tsx

@@ -1,4 +1,4 @@
-import styled from "@emotion/styled";
+import * as React from 'react';
 
 export interface SpaceProps {
  /** @name Size @default M */ size?: SpaceSize;
@@ -15,8 +15,14 @@ export enum SpaceSize {
 /**
  * @icon Maximize
  */
-export const Space = styled.div<SpaceProps>`
- display: block;
- width: ${props => props.size}px;
- height: ${props => props.size}px;
-`;
+export const Space: React.StatelessComponent<SpaceProps> = (props): JSX.Element => {
+ return (
+ <div style={{
+ display: 'block',
+ width: `${props.size}px`,
+ height: `${props.size}px`
+ }}>
+ {props.children}
+ </div>
+ );
+};