feat(uikit-tags): Add typography props (#245)

pancakeswap · Aug 19, 2021 · 55ed86b · 55ed86b
1 parent 2262df1
commit 55ed86b
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 3 deletions.
diff --git a/packages/pancake-uikit/src/components/Tag/StyledTag.tsx b/packages/pancake-uikit/src/components/Tag/StyledTag.tsx
@@ -1,5 +1,5 @@
 import styled, { DefaultTheme } from "styled-components";
-import { space, variant } from "styled-system";
+import { space, variant, typography } from "styled-system";
 import { Colors } from "../../theme/types";
 import { scaleVariants, styleVariants } from "./theme";
 import { TagProps, variants } from "./types";
@@ -35,6 +35,8 @@ export const StyledTag = styled.div<ThemedProps>`
     fill: currentColor;
   }
 
+  ${({ textTransform }) => textTransform && `text-transform: ${textTransform};`}
+
   ${variant({
     prop: "scale",
     variants: scaleVariants,
@@ -43,6 +45,7 @@ export const StyledTag = styled.div<ThemedProps>`
     variants: styleVariants,
   })}
   ${space}
+  ${typography}
 
   ${getOutlineStyles}
 `;

diff --git a/packages/pancake-uikit/src/components/Tag/index.stories.tsx b/packages/pancake-uikit/src/components/Tag/index.stories.tsx
@@ -44,3 +44,16 @@ export const Default: React.FC = () => {
     </Box>
   );
 };
+
+export const TextVariations: React.FC = () => {
+  return (
+    <div>
+      <Tag textTransform="uppercase" mr="16px">
+        uppercase
+      </Tag>
+      <Tag fontWeight="bold" mr="16px">
+        Bold
+      </Tag>
+    </div>
+  );
+};
diff --git a/packages/pancake-uikit/src/components/Tag/types.ts b/packages/pancake-uikit/src/components/Tag/types.ts
@@ -1,5 +1,5 @@
 import { ReactNode } from "react";
-import { SpaceProps } from "styled-system";
+import { SpaceProps, TypographyProps } from "styled-system";
 
 export const variants = {
   PRIMARY: "primary",
@@ -20,10 +20,11 @@ export const scales = {
 export type Scale = typeof scales[keyof typeof scales];
 export type Variant = typeof variants[keyof typeof variants];
 
-export interface TagProps extends SpaceProps {
+export interface TagProps extends SpaceProps, TypographyProps {
   variant?: Variant;
   scale?: Scale;
   startIcon?: ReactNode;
   endIcon?: ReactNode;
   outline?: boolean;
+  textTransform?: "uppercase" | "lowercase" | "capitalize";
 }