Merge pull request #69 from RamboGj/feat-text-components

Creating Text Components: H1, H2, H3, H4 + Body 1 - 3

apps/builddao/widget/components/Text/H1.jsx

@@ -0,0 +1,18 @@
+const StyledH1 = styled.h1`
+  font-family: "Aekonik", sans-serif;
+  font-weight: 500;
+  font-size: 2rem;
+  line-height: 100%;
+  letter-spacing: 0;
+  color: ${(props) => `${props.textColor}`}
+`;
+
+function H1({ children, textColor}) {
+  return (
+    <StyledH1 textColor={textColor ?? "#FFFFFF"}>
+      {children}
+    </StyledH1>
+  )
+}
+
+return { H1 }

apps/builddao/widget/components/Text/H2.jsx

@@ -0,0 +1,18 @@
+const StyledH2 = styled.h2`
+  font-family: "Aekonik", sans-serif;
+  font-weight: 500;
+  font-size: 1.625rem;
+  line-height: 120%;
+  letter-spacing: 0;
+  color: ${(props) => `${props.textColor}`}
+`;
+
+function H2({ children, textColor }) {
+  return (
+    <StyledH2 textColor={textColor ?? "#FFFFFF"}>
+      {children}
+    </StyledH2>
+  )
+}
+
+return { H2 }

apps/builddao/widget/components/Text/H3.jsx

@@ -0,0 +1,18 @@
+const StyledH3 = styled.h3`
+  font-family: "Aekonik", sans-serif;
+  font-weight: 500;
+  font-size: 1.5rem;
+  line-height: 140%;
+  letter-spacing: 0;
+  color: ${(props) => `${props.textColor}`}
+`;
+
+function H3({ children, textColor }) {
+  return (
+    <StyledH3 textColor={textColor ?? "#FFFFFF"}>
+      {children}
+    </StyledH3>
+  )
+}
+
+return { H3 }

apps/builddao/widget/components/Text/H4.jsx

@@ -0,0 +1,18 @@
+const StyledH4 = styled.h4`
+  font-family: "Aekonik", sans-serif;
+  font-weight: 500;
+  font-size: 1.125rem;
+  line-height: 160%;
+  letter-spacing: 0;
+  color: ${(props) => `${props.textColor}`}
+`;
+
+function H4({ children, textColor }) {
+  return (
+    <StyledH4 textColor={textColor ?? "#FFFFFF"}>
+      {children}
+    </StyledH4>
+  )
+}
+
+return { H4 }

apps/builddao/widget/components/Text/P.jsx

@@ -0,0 +1,45 @@
+const StyledParagraph = styled.p`
+  font-family: "Aekonik", sans-serif;
+  font-weight: 500;
+  letter-spacing: 0;
+  color: ${(props) => `${props.textColor}`};
+  font-size: ${(props) => {
+    switch (props.pType) {
+      case "p1":
+        return "1rem";
+      case "p2":
+        return "0.875rem";
+      case "p3":
+        return "0.8125rem";
+      default:
+        return "";
+    }
+  }};
+  line-height: ${(props) => {
+    switch (props.pType) {
+      case "p1":
+        return "170%";
+      case "p2":
+        return "170%";
+      case "p3":
+        return "auto";
+      default:
+        return "";
+    }
+  }};
+`;
+
+function P({ children, pType, textColor }) {
+  const defaults = {
+    pType: pType ?? "p1",
+    textColor: textColor ?? "#000000",
+  };
+
+  return (
+    <StyledParagraph pType={defaults.pType} textColor={defaults.textColor}>
+      {children}
+    </StyledParagraph>
+  );
+}
+
+return { P };