@universal-tennis/ui-shared 0.0.6 → 0.0.7

package/src/stories/atoms/Typography/Typography.stories.tsx

@@ -0,0 +1,229 @@
+import React from 'react';
+
+import Typography from './Typography';
+
+interface Props {
+  children: string;
+  category: string;
+}
+
+export default {
+  title: 'Atoms/Typography',
+  component: Typography,
+};
+
+function Template(args: Props) {
+  return <Typography {...args} />;  
+}
+
+export const Default = Template.bind({});
+Default.args = {
+  children: 'Text',
+};
+
+export const Display = Template.bind({});
+Display.args = {
+  category: "display",
+  children: 'Text',
+};
+
+export const DisplayXXXLarge = Template.bind({});
+DisplayXXXLarge.args = {
+  children: 'Text',
+  category: "display",
+  size: 'XXX-large'
+};
+
+export const DisplayXXLarge = Template.bind({});
+DisplayXXLarge.args = {
+  children: 'Text',
+  category: "display",
+  size: 'XX-large'
+};
+
+export const DisplayXLarge = Template.bind({});
+DisplayXLarge.args = {
+  children: 'Text',
+  category: "display",
+  size: 'X-large'
+};
+
+export const DisplayLarge = Template.bind({});
+DisplayLarge.args = {
+  children: 'Text',
+  category: "display",
+  size: 'large'
+};
+
+export const DisplayLargelight = Template.bind({});
+DisplayLargelight.args = {
+  children: 'Text',
+  category: "display",
+  size: 'large-light'
+};
+
+export const DisplayMediumBook = Template.bind({});
+DisplayMediumBook.args = {
+  children: 'Text',
+  category: "display",
+  size: 'medium-book'
+};
+
+export const Primary = Template.bind({});
+Primary.args = {
+  category: "primary",
+  children: 'Text',
+};
+
+export const PrimaryLargeBold = Template.bind({});
+PrimaryLargeBold.args = {
+  children: 'Text',
+  category: "primary",
+  size: 'large-bold'
+};
+
+export const PrimaryLargeBook = Template.bind({});
+PrimaryLargeBook.args = {
+  children: 'Text',
+  category: "primary",
+  size: 'large-book'
+};
+
+export const PrimaryLargeLight = Template.bind({});
+PrimaryLargeLight.args = {
+  children: 'Text',
+  category: "primary",
+  size: 'large-light'
+};
+
+export const PrimaryMediumSemiBold = Template.bind({});
+PrimaryMediumSemiBold.args = {
+  children: 'Text',
+  category: "primary",
+  size: 'medium-semibold'
+};
+
+export const PrimaryMediumMedium = Template.bind({});
+PrimaryMediumMedium.args = {
+  children: 'Text',
+  category: "primary",
+  size: 'medium-medium'
+};
+
+export const PrimaryMediumBook = Template.bind({});
+PrimaryMediumBook.args = {
+  children: 'Text',
+  category: "primary",
+  size: 'medium-book'
+};
+
+export const PrimarySmallBook = Template.bind({});
+PrimarySmallBook.args = {
+  children: 'Text',
+  category: "primary",
+  size: 'small-book'
+};
+
+export const PrimaryXSmallBook = Template.bind({});
+PrimaryXSmallBook.args = {
+  children: 'Text',
+  category: "primary",
+  size: 'x-small-book'
+};
+
+export const Secondary = Template.bind({});
+Secondary.args = {
+  category: "secondary",
+  children: 'Text',
+};
+
+export const SecondaryLargeMedium = Template.bind({});
+SecondaryLargeMedium.args = {
+  category: "secondary",
+  children: 'Text',
+  size: 'large-medium'
+};
+
+export const SecondaryLargeBook = Template.bind({});
+SecondaryLargeBook.args = {
+  category: "secondary",
+  children: 'Text',
+  size: 'large-book'
+};
+
+export const SecondaryMediumMedium = Template.bind({});
+SecondaryMediumMedium.args = {
+  category: "secondary",
+  children: 'Text',
+  size: 'medium-medium'
+};
+
+export const SecondaryMediumBook = Template.bind({});
+SecondaryMediumBook.args = {
+  category: "secondary",
+  children: 'Text',
+  size: 'medium-book'
+};
+
+export const SecondarySmallMediumCap = Template.bind({});
+SecondarySmallMediumCap.args = {
+  category: "secondary",
+  children: 'Text',
+  size: 'small-medium-cap'
+};
+
+export const SecondarySmallMedium = Template.bind({});
+SecondarySmallMedium.args = {
+  category: "secondary",
+  children: 'Text',
+  size: 'small-medium'
+};
+
+export const SecondarySmallBook = Template.bind({});
+SecondarySmallBook.args = {
+  category: "secondary",
+  children: 'Text',
+  size: 'small-book'
+};
+
+export const SecondaryXSmallMediumCap = Template.bind({});
+SecondaryXSmallMediumCap.args = {
+  category: "secondary",
+  children: 'Text',
+  size: 'x-small-medium-cap'
+};
+
+export const SecondaryXSmallMedium = Template.bind({});
+SecondaryXSmallMedium.args = {
+  category: "secondary",
+  children: 'Text',
+  size: 'x-small-medium'
+};
+
+export const SecondaryXSmallBookCap = Template.bind({});
+SecondaryXSmallBookCap.args = {
+  category: "secondary",
+  children: 'Text',
+  size: 'x-small-book-cap'
+};
+
+export const SecondaryXSmallBook = Template.bind({});
+SecondaryXSmallBook.args = {
+  category: "secondary",
+  children: 'Text',
+  size: 'x-small-book'
+};
+
+export const SecondaryXXSmallMediumCap = Template.bind({});
+SecondaryXXSmallMediumCap.args = {
+  category: "secondary",
+  children: 'Text',
+  size: 'xx-small-medium-cap'
+};
+
+export const SecondaryXXSmallBook = Template.bind({});
+SecondaryXXSmallBook.args = {
+  category: "secondary",
+  children: 'Text',
+  size: 'xx-small-book'
+};

package/src/stories/atoms/Typography/Typography.tsx

@@ -0,0 +1,113 @@
+import React, {ReactElement} from 'react';
+import MuiTypography from '@mui/material/Typography';
+import { styled } from '@mui/material/styles';
+import "./typography.css";
+
+type TypographyProps = {
+  children: string | ReactElement;
+  category?: string;
+  size?: string;
+}
+
+type MuiTypographyProps = {
+  size?: string;
+  isCap?: boolean;
+}
+
+const DISPLAY_SIZES = {
+  "XXX-large": '120px',
+  "XX-large": '100px',
+  "X-large": '75px',
+  large: '50px',
+  "large-light": '50px',
+  "medium-book": '36px',
+};
+
+const PRIMARY_SIZES = {
+  "large-bold": '34px',
+  "large-book": '34px',
+  "large-light": '34px',
+  "medium-semibold": '22px',
+  "medium-medium": '22px',
+  "medium-book": '22px',
+  "small-book": '16px',
+  "x-small-book": '12px',
+};
+
+const SECONDARY_SIZES = {
+  "large-medium": '20px',
+  "large-book": '20px',
+  "medium-medium": '16px',
+  "medium-book": '16px',
+  "small-medium-cap": '14px',
+  "small-medium": '14px',
+  "small-book": '14px',
+  "x-small-medium-cap": '12px',
+  "x-small-medium": '12px',
+  "x-small-book-cap": '12px',
+  "x-small-book": '12px',
+  "xx-small-medium-cap": '10px',
+  "xx-small-book": '10px',
+};
+
+const DisplayTypography = styled(MuiTypography)((props: MuiTypographyProps) => ({
+  fontFamily: 'var(--display)',
+  fontSize: DISPLAY_SIZES[props.size as keyof typeof DISPLAY_SIZES],
+}));
+
+const PrimaryTypography = styled(MuiTypography)((props: MuiTypographyProps) => ({
+  fontFamily: 'var(--primary)',
+  fontSize: PRIMARY_SIZES[props.size as keyof typeof PRIMARY_SIZES],
+}));
+
+const SecondaryTypography = styled(MuiTypography)((props: MuiTypographyProps) => ({
+  fontFamily: 'var(--secondary)',
+  fontSize: SECONDARY_SIZES[props.size as keyof typeof SECONDARY_SIZES],
+  textTransform: props.isCap ? 'uppercase' : 'inherit'
+}));
+
+export default function Typography({
+  children, category, size, ...props 
+}: TypographyProps) {
+  const isCap = size?.includes("cap");
+
+  switch (category) {
+    case 'primary':
+      return (
+        <PrimaryTypography
+          size={size}
+          {...props}
+        >
+          {children}
+        </PrimaryTypography>
+      );
+    case 'secondary':
+      return (
+        <SecondaryTypography
+          size={size}
+          isCap={isCap}
+          {...props}
+        >
+          {children}
+        </SecondaryTypography>
+      );
+    case 'display':
+      return (
+        <DisplayTypography
+          size={size}
+          {...props}
+        >
+          {children}
+        </DisplayTypography>
+      );
+    default: 
+      return (
+          <PrimaryTypography
+            size={size}
+            {...props}
+          >
+          {children}
+          </PrimaryTypography>
+      );
+  }
+}

package/src/stories/atoms/Typography/index.tsx

@@ -0,0 +1 @@
+export { default as Typography } from './Typography';