@universal-tennis/ui-shared 0.0.5 → 0.0.7

package/package.json

@@ -1,86 +1,86 @@
-{
-  "name": "@universal-tennis/ui-shared",
-  "version": "0.0.5",
-  "main": "dist/items.js",
-  "license": "MIT",
-  "homepage": "https://universaltennis.com",
-  "dependencies": {
-    "@emotion/react": "^11.10.5",
-    "@emotion/styled": "^11.10.5",
-    "@mui/material": "^5.10.15",
-    "copyfiles": "^2.4.1",
-    "cross-env": "^7.0.3",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-scripts": "5.0.1",
-    "typescript": "^4.9.3",
-    "web-vitals": "^2.1.4"
-  },
-  "scripts": {
-    "start": "start-storybook -p 6006 -s public",
-    "build-storybook": "build-storybook -s public",
-    "publish:npm": "tsc && yarn copy-files",
-    "publish-package": "npm publish --access public",
-    "copy-files": "copyfiles -u 1 src/stories/assets/*.svg src/stories/assets/*.png src/stories/assets/*.gif src/stories/assets/css/*.css dist/",
-    "eslint": "npx eslint --ext .jsx,.js src --fix"
-  },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ],
-    "overrides": [
-      {
-        "files": [
-          "**/*.stories.*"
-        ],
-        "rules": {
-          "import/no-anonymous-default-export": "off"
-        }
-      }
-    ]
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  },
-  "devDependencies": {
-    "@storybook/addon-actions": "^6.5.13",
-    "@storybook/addon-essentials": "^6.5.13",
-    "@storybook/addon-interactions": "^6.5.13",
-    "@storybook/addon-links": "^6.5.13",
-    "@storybook/builder-webpack5": "^6.5.13",
-    "@storybook/manager-webpack5": "^6.5.13",
-    "@storybook/node-logger": "^6.5.13",
-    "@storybook/preset-create-react-app": "^4.1.2",
-    "@storybook/react": "^6.5.13",
-    "@storybook/testing-library": "^0.0.13",
-    "@types/babel__core": "^7.1.20",
-    "@types/react": "^18.0.25",
-    "babel-plugin-named-exports-order": "^0.0.2",
-    "eslint": "^8.28.0",
-    "eslint-config-airbnb": "^19.0.4",
-    "eslint-import-resolver-typescript": "^3.5.2",
-    "eslint-plugin-import": "^2.25.3",
-    "eslint-plugin-jsx-a11y": "^6.5.1",
-    "eslint-plugin-react": "^7.28.0",
-    "eslint-plugin-react-hooks": "^4.3.0",
-    "eslint-plugin-storybook": "^0.6.7",
-    "prop-types": "^15.8.1",
-    "webpack": "^5.75.0"
-  },
-  "description": "Shared UI components for UT",
-  "repository": {
-    "type": "git",
-    "url": "git+https://bitbucket.org/universaltennis/ui-shared.git"
-  },
-  "author": "universal-tennis"
-}
+{
+  "name": "@universal-tennis/ui-shared",
+  "version": "0.0.7",
+  "main": "dist/items.js",
+  "license": "MIT",
+  "homepage": "https://universaltennis.com",
+  "dependencies": {
+    "@emotion/react": "^11.10.5",
+    "@emotion/styled": "^11.10.5",
+    "@mui/material": "^5.10.15",
+    "copyfiles": "^2.4.1",
+    "cross-env": "^7.0.3",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-scripts": "5.0.1",
+    "typescript": "^4.9.3",
+    "web-vitals": "^2.1.4"
+  },
+  "scripts": {
+    "start": "start-storybook -p 6006 -s public",
+    "build-storybook": "build-storybook -s public",
+    "publish:npm": "tsc && yarn copy-files",
+    "publish-package": "npm publish --access public",
+    "copy-files": "copyfiles -u 1 src/stories/assets/*.svg src/stories/assets/*.png src/stories/assets/*.gif src/stories/assets/css/*.css dist/",
+    "eslint": "npx eslint --ext .jsx,.js src --fix"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ],
+    "overrides": [
+      {
+        "files": [
+          "**/*.stories.*"
+        ],
+        "rules": {
+          "import/no-anonymous-default-export": "off"
+        }
+      }
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "@storybook/addon-actions": "^6.5.13",
+    "@storybook/addon-essentials": "^6.5.13",
+    "@storybook/addon-interactions": "^6.5.13",
+    "@storybook/addon-links": "^6.5.13",
+    "@storybook/builder-webpack5": "^6.5.13",
+    "@storybook/manager-webpack5": "^6.5.13",
+    "@storybook/node-logger": "^6.5.13",
+    "@storybook/preset-create-react-app": "^4.1.2",
+    "@storybook/react": "^6.5.13",
+    "@storybook/testing-library": "^0.0.13",
+    "@types/babel__core": "^7.1.20",
+    "@types/react": "^18.0.25",
+    "babel-plugin-named-exports-order": "^0.0.2",
+    "eslint": "^8.28.0",
+    "eslint-config-airbnb": "^19.0.4",
+    "eslint-import-resolver-typescript": "^3.5.2",
+    "eslint-plugin-import": "^2.25.3",
+    "eslint-plugin-jsx-a11y": "^6.5.1",
+    "eslint-plugin-react": "^7.28.0",
+    "eslint-plugin-react-hooks": "^4.3.0",
+    "eslint-plugin-storybook": "^0.6.7",
+    "prop-types": "^15.8.1",
+    "webpack": "^5.75.0"
+  },
+  "description": "Shared UI components for UT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://bitbucket.org/universaltennis/ui-shared.git"
+  },
+  "author": "universal-tennis"
+}

package/public/index.html

@@ -10,6 +10,8 @@
       content="Web site created using create-react-app"
     />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <link rel="stylesheet" type="text/css" href="https://cloud.typography.com/6323816/6761592/css/fonts.css" />
+    
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/

package/src/components.jsx

@@ -1,5 +1,6 @@
 // ATOMS
 export { default as Button } from './stories/atoms/Button';
+export { default as Typography } from './stories/atoms/Typography';
 
 // MOLECULES
 // ORGANISMS 

package/src/custom.d.ts

@@ -1,13 +1,13 @@
-declare module '*.jpg';
-declare module '*.png';
-declare module '*.woff2';
-declare module '*.woff';
-declare module '*.ttf';
-
-declare module '*.svg' {
-  import React = require('react');
-
-  export const ReactComponent: React.SFC<React.SVGProps<SVGSVGElement>>;
-  const src: string;
-  export default src;
-}
+declare module '*.jpg';
+declare module '*.png';
+declare module '*.woff2';
+declare module '*.woff';
+declare module '*.ttf';
+
+declare module '*.svg' {
+  import React = require('react');
+
+  export const ReactComponent: React.SFC<React.SVGProps<SVGSVGElement>>;
+  const src: string;
+  export default src;
+}

package/src/items.jsx

@@ -1 +1 @@
-module.exports = require('./components');
+module.exports = require('./components');

package/src/stories/atoms/{Button.stories.tsx → Button/Button.stories.tsx}

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { Button } from './Button';
+import Button from './Button';
 
 interface Props {
   children: string;
@@ -25,6 +25,12 @@ Primary.args = {
   children: 'Button',
 };
 
+export const PrimaryExpanded = Template.bind({});
+PrimaryExpanded.args = {
+  category: "primary-expanded",
+  children: 'Button',
+};
+
 export const Secondary = Template.bind({});
 Secondary.args = {
   category: "secondary",

package/src/stories/atoms/{Button.tsx → Button/Button.tsx}

@@ -7,6 +7,10 @@ type ButtonProps = {
   category?: string;
 }
 
+type StyledButtonProps = {
+  isExpanded?: boolean;
+}
+
 const StyledButton = styled(MuiButton)({
   borderRadius: '24px',
   fontSize: '12px',
@@ -17,10 +21,11 @@ const StyledButton = styled(MuiButton)({
   border: '1px solid transparent'
 });
 
-const PrimaryButton = styled(StyledButton)({
+const PrimaryButton = styled(StyledButton)((props: StyledButtonProps) => ({
   backgroundColor: 'var(--black)',
   color: 'var(--white)',
-
+  width: props.isExpanded ? '100%' : 'inherit',
+  
   '&:hover': {
     backgroundColor: 'var(--darkest-grey)',
     borderColor: 'var(--darkest-grey)',
@@ -29,7 +34,7 @@ const PrimaryButton = styled(StyledButton)({
     backgroundColor: 'var(--lightest-grey)',
     borderColor: 'var(--lightest-grey)',
   },
-});
+}));
 
 const SecondaryButton = styled(StyledButton)({
   borderColor: 'var(--black)',
@@ -44,7 +49,7 @@ const SecondaryButton = styled(StyledButton)({
   },
 });
 
-export function Button({ children, category, ...props }: ButtonProps) {
+export default function Button({ children, category, ...props }: ButtonProps) {
   switch (category) {
     case 'primary':
       return (
@@ -54,6 +59,15 @@ export function Button({ children, category, ...props }: ButtonProps) {
           {children}
         </PrimaryButton>
       );
+    case 'primary-expanded':
+      return (
+          <PrimaryButton
+            isExpanded
+            {...props}
+          >
+            {children}
+          </PrimaryButton>
+      );
     case 'secondary':
       return (
         <SecondaryButton

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

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

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';