refactor: move globalStyles, set default Text type

Altalogy · May 4, 2022 · c572ada · c572ada
1 parent 5acafa1
commit c572ada
Show file tree

Hide file tree

Showing 6 changed files with 33 additions and 28 deletions.
diff --git a/applications/launchpad_v2/src/components/Text/index.tsx b/applications/launchpad_v2/src/components/Text/index.tsx
@@ -1,28 +1,7 @@
-import { createGlobalStyle } from 'styled-components'
-
-import { AvenirRegular, AvenirMedium, AvenirHeavy } from '../../assets/fonts/fonts'
-
+import { StyledText } from './styles' 
 import { TextProps } from './types'
-
 import styles from '../../styles/styles'
 
-/**
- * Global style rule to make fonts files accessible
- */
-const GlobalFonts = createGlobalStyle`
-  @font-face {
-    src: url(${AvenirRegular});
-    font-family: 'AvenirRegular'
-  }
-  @font-face {
-    src: url(${AvenirMedium});
-    font-family: 'AvenirMedium'
-  }
-  @font-face {
-    src: url(${AvenirHeavy});
-    font-family: 'AvenirHeavy'
-  }
-`
 /**
  * @name Text
  * 
@@ -36,7 +15,7 @@ const GlobalFonts = createGlobalStyle`
  */
 
 const Text = ({
-  type,
+  type = 'defaultMedium',
   color,
   children,
 }: TextProps) => {
@@ -46,8 +25,7 @@ const Text = ({
   }
   return (
     <>
-      <GlobalFonts />
-      <p style={textStyles}>{children}</p>
+      <StyledText style={textStyles}>{children}</StyledText>
     </>
   )
 }

diff --git a/applications/launchpad_v2/src/components/Text/styles.ts b/applications/launchpad_v2/src/components/Text/styles.ts
@@ -0,0 +1,3 @@
+import styled from 'styled-components'
+
+export const StyledText = styled.p``
diff --git a/applications/launchpad_v2/src/components/Text/types.ts b/applications/launchpad_v2/src/components/Text/types.ts
@@ -2,13 +2,13 @@ import { ReactNode } from 'react'
 
 /**
  * @typedef TextProps
- * @prop {'header' | 'subheader' | 'defaultHeavy' | 'defaultMedium' | 'defaultUnder' | 'smallHeavy' | 'smallMedium' | 'smallUnder' | 'microHeavy' | 'microRegular'  | 'microOblique' } type - text styles
+ * @prop {'header' | 'subheader' | 'defaultHeavy' | 'defaultMedium' | 'defaultUnder' | 'smallHeavy' | 'smallMedium' | 'smallUnder' | 'microHeavy' | 'microRegular'  | 'microOblique' } [type] - text styles
  * @prop {ReactNode} children - text content to display
  * @prop {string} [color] - font color
  */
 
 export interface TextProps {
-  type:
+  type?:
     | 'header'
     | 'subheader'
     | 'defaultHeavy'

diff --git a/applications/launchpad_v2/src/styles/globalStyles.ts b/applications/launchpad_v2/src/styles/globalStyles.ts
@@ -0,0 +1,24 @@
+import { createGlobalStyle } from 'styled-components'
+
+import { AvenirRegular, AvenirMedium, AvenirHeavy } from '../assets/fonts/fonts'
+
+/**
+ * Global styles
+ */
+
+const GlobalStyle = createGlobalStyle`
+  @font-face {
+    src: url(${AvenirRegular});
+    font-family: 'AvenirRegular'
+  }
+  @font-face {
+    src: url(${AvenirMedium});
+    font-family: 'AvenirMedium'
+  }
+  @font-face {
+    src: url(${AvenirHeavy});
+    font-family: 'AvenirHeavy'
+  }
+`
+
+export default GlobalStyle
diff --git a/applications/launchpad_v2/src/styles/styles/index.ts b/applications/launchpad_v2/src/styles/styles/index.ts
@@ -1,6 +1,6 @@
 import colors from './colors'
 import gradients from './gradients'
-import typography from '../typography'
+import  typography from './typography'
 
 const styles = {
   colors,

diff --git a/...ons/launchpad_v2/src/styles/typography.ts → ...nchpad_v2/src/styles/styles/typography.ts b/...ons/launchpad_v2/src/styles/typography.ts → ...nchpad_v2/src/styles/styles/typography.ts