Text component (#202)

Fixes #195
saleor · Jan 12, 2023 · 964b6e6 · 964b6e6
1 parent 0a1f2d3
commit 964b6e6
Show file tree

Hide file tree

Showing 10 changed files with 149 additions and 36 deletions.
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -37,6 +37,12 @@ module.exports = {
     "import/order": [
       "error",
       {
+        pathGroups: [
+          {
+            pattern: "~/**",
+            group: "internal",
+          },
+        ],
         groups: [
           "external",
           "builtin",

diff --git a/package.json b/package.json
@@ -94,13 +94,14 @@
     "typescript": "^4.9.3",
     "vite": "^3.2.5",
     "vite-plugin-dts": "^1.7.1",
-    "webpack": "^5.75.0",
+    "webpack": "^5.75.0"
+  },
+  "dependencies": {
     "@vanilla-extract/css": "^1.9.2",
     "@vanilla-extract/recipes": "^0.3.0",
     "@vanilla-extract/sprinkles": "^1.5.1",
     "@dessert-box/react": "^0.4.0"
   },
-  "dependencies": {},
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
     "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/components/Text/Text.css.ts b/src/components/Text/Text.css.ts
@@ -0,0 +1,78 @@
+import { recipe, RecipeVariants } from "@vanilla-extract/recipes";
+
+import { sprinkles } from "~/theme";
+
+export const text = recipe({
+  base: [sprinkles({ fontFamily: "body" })],
+
+  variants: {
+    variant: {
+      body1: sprinkles({ lineHeight: "text" }),
+      body2: sprinkles({ lineHeight: "text" }),
+    },
+    size: {
+      small: {},
+      medium: {},
+      large: {},
+    },
+    fontWeight: {
+      light: sprinkles({ fontWeight: "light" }),
+      regular: sprinkles({ fontWeight: "regular" }),
+      medium: sprinkles({ fontWeight: "medium" }),
+    },
+  },
+
+  compoundVariants: [
+    {
+      variants: {
+        variant: "body1",
+        size: "large",
+      },
+      style: sprinkles({ fontSize: 6 }),
+    },
+    {
+      variants: {
+        variant: "body1",
+        size: "medium",
+      },
+      style: sprinkles({ fontSize: 5 }),
+    },
+    {
+      variants: {
+        variant: "body1",
+        size: "small",
+      },
+      style: sprinkles({ fontSize: 4 }),
+    },
+
+    {
+      variants: {
+        variant: "body2",
+        size: "large",
+      },
+      style: sprinkles({ fontSize: 4 }),
+    },
+    {
+      variants: {
+        variant: "body2",
+        size: "medium",
+      },
+      style: sprinkles({ fontSize: 3 }),
+    },
+    {
+      variants: {
+        variant: "body2",
+        size: "small",
+      },
+      style: sprinkles({ fontSize: 2 }),
+    },
+  ],
+
+  defaultVariants: {
+    variant: "body1",
+    size: "medium",
+    fontWeight: "regular",
+  },
+});
+
+export type TextVariants = RecipeVariants<typeof text>;
diff --git a/src/components/Text/Text.stories.tsx b/src/components/Text/Text.stories.tsx
@@ -0,0 +1,20 @@
+import { ComponentMeta, ComponentStory } from "@storybook/react";
+
+import { Text } from "./Text";
+
+export default {
+  component: Text,
+} as ComponentMeta<typeof Text>;
+
+const Template: ComponentStory<typeof Text> = (args) => (
+  <Text {...args}>Lorem ipsum dolor sit amet</Text>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  color: "neutralTextPrimary",
+  size: "medium",
+  variant: "body1",
+  fontWeight: "regular",
+  as: "span",
+};