Upate emotion example to use @properly-styled/emotion

jaridmargolin · May 21, 2019 · 8963b99 · 8963b99
1 parent ff20915
commit 8963b99
Show file tree

Hide file tree

Showing 5 changed files with 11 additions and 21 deletions.
diff --git a/examples/emotion/package.json b/examples/emotion/package.json
@@ -5,7 +5,7 @@
   "dependencies": {
     "@emotion/core": "^10.0.10",
     "@emotion/styled": "^10.0.10",
-    "@properly-styled/core": "^0.0.2",
+    "@properly-styled/emotion": "^0.0.2",
     "@properly-styled/styles": "^0.0.2",
     "@types/jest": "24.0.13",
     "@types/node": "12.0.2",

diff --git a/examples/emotion/src/components/App.tsx b/examples/emotion/src/components/App.tsx
@@ -16,9 +16,7 @@ import Text from "./Text";
 
 const App = () => (
   <ThemeProvider theme={theme}>
-    <Text textColor="blue" font="f1" margin="0">
-      Properly Styled + Emotion
-    </Text>
+    <Text textColor="blue">Properly Styled + Emotion</Text>
   </ThemeProvider>
 );
 

diff --git a/examples/emotion/src/components/Text.tsx b/examples/emotion/src/components/Text.tsx
@@ -4,10 +4,9 @@
 
 // 3rd party
 import * as React from "react";
-import styled from "@emotion/styled";
 
 // properly-styled
-import { compose } from "@properly-styled/core";
+import properlyStyled, { PropsOf } from "@properly-styled/emotion";
 import {
   coloringStyles,
   spacingStyles,
@@ -16,27 +15,24 @@ import {
 
 // lib
 import { font } from "../utils/variants";
-import { GetProps } from "../utils/types";
 
 /* -----------------------------------------------------------------------------
  * StyledText
  * -------------------------------------------------------------------------- */
 
-const textStyles = compose(
+const StyledText = properlyStyled("p")(
   font,
   coloringStyles,
   spacingStyles,
   typographyStyles
 );
 
-const StyledText = styled.p<typeof textStyles["props"]>(textStyles);
-
 /* -----------------------------------------------------------------------------
  * Text
  * -------------------------------------------------------------------------- */
 
-const Text = (props: GetProps<typeof StyledText>) => (
-  <StyledText marginTop="0" marginBottom="0" {...props} />
+const Text = (props: PropsOf<typeof StyledText>) => (
+  <StyledText marginTop="0" marginBottom="0" font="s16.normal" {...props} />
 );
 
 export default Text;
diff --git a/examples/emotion/src/theme.ts b/examples/emotion/src/theme.ts
@@ -9,8 +9,8 @@ const theme = {
     desktop: "1024px"
   },
   colors: {
-    blue: "rgba(0, 0, 1)",
-    red: "rgba(0, 0, 0)"
+    blue: "rgba(49, 110, 232, 1)",
+    red: "rgba(232, 49, 49, 1)"
   },
   fontSizes: {
     s10: "10px",
@@ -23,10 +23,11 @@ const theme = {
     auto: "auto"
   },
   fonts: {
-    f1: {
+    "s16.normal": {
       fontFamily:
         '"Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif',
-      fontSize: "12px"
+      fontSize: "16px",
+      fontWeight: 400
     }
   }
 };

diff --git a/examples/emotion/src/utils/types.ts b/examples/emotion/src/utils/types.ts