@universal-tennis/ui-shared 0.1.5 → 0.1.7

package/dist/stories/atoms/Button/Button.js

@@ -48,6 +48,19 @@ const SecondaryButton = styled(StyledButton)({
         borderColor: 'var(--disabled)'
     },
 });
+const SecondaryButtonFlipped = styled(StyledButton)({
+    borderColor: 'var(--white)',
+    backgroundColor: 'transparent',
+    color: 'var(--white)',
+    borderWidth: '2px',
+    '&:hover': {
+        borderColor: 'var(--darkest-grey)',
+        color: 'var(--darkest-grey)',
+    },
+    '&:disabled': {
+        borderColor: 'var(--disabled)'
+    },
+});
 const LinkButton = styled(MuiButton)({
     borderColor: 'transparent',
     backgroundColor: 'transparent',
@@ -71,6 +84,8 @@ export default function Button(_a) {
             return (React.createElement(PrimaryButton, Object.assign({ isExpanded: true }, props), children));
         case 'secondary':
             return (React.createElement(SecondaryButton, Object.assign({}, props), children));
+        case 'secondary-flipped':
+            return (React.createElement(SecondaryButtonFlipped, Object.assign({}, props), children));
         case 'link':
             return (React.createElement(LinkButton, Object.assign({ disableTouchRipple: true }, props), children));
         default:

package/dist/stories/atoms/Button/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../../src/stories/atoms/Button/Button.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAuB,MAAM,OAAO,CAAC;AAC5C,OAAO,SAAS,MAAM,sBAAsB,CAAC;AAC7C,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAc9C,MAAM,YAAY,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC;IACrC,YAAY,EAAE,MAAM;IACpB,QAAQ,EAAE,MAAM;IAChB,OAAO,EAAE,QAAQ;IACjB,MAAM,EAAE,MAAM;IACd,UAAU,EAAE,QAAQ;IACpB,UAAU,EAAE,MAAM;IAClB,MAAM,EAAE,uBAAuB;IAE/B,SAAS,EAAE;QACT,MAAM,EAAE,SAAS;KAClB;CACF,CAAC,CAAC;AAEH,MAAM,aAAa,GAAG,MAAM,CAAC,YAAY,CAAC,CAAC,CAAC,KAAwB,EAAE,EAAE,CAAC,CAAC;IACxE,eAAe,EAAE,cAAc;IAC/B,KAAK,EAAE,cAAc;IACrB,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS;IAE5C,SAAS,EAAE;QACT,eAAe,EAAE,qBAAqB;QACtC,WAAW,EAAE,qBAAqB;KACnC;IACD,YAAY,EAAE;QACZ,eAAe,EAAE,mBAAmB;QACpC,WAAW,EAAE,mBAAmB;KACjC;CACF,CAAC,CAAC,CAAC;AAEJ,MAAM,eAAe,GAAG,MAAM,CAAC,YAAY,CAAC,CAAC;IAC3C,WAAW,EAAE,cAAc;IAC3B,eAAe,EAAE,aAAa;IAC9B,KAAK,EAAE,cAAc;IAErB,SAAS,EAAE;QACT,WAAW,EAAE,qBAAqB;KACnC;IACD,YAAY,EAAE;QACZ,WAAW,EAAE,iBAAiB;KAC/B;CACF,CAAC,CAAC;AAEH,MAAM,UAAU,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC;IACnC,WAAW,EAAE,aAAa;IAC1B,eAAe,EAAE,aAAa;IAC9B,KAAK,EAAE,gBAAgB;IACvB,aAAa,EAAE,SAAS;IACxB,cAAc,EAAE,MAAM;IACtB,OAAO,EAAE,CAAC;IAEV,SAAS,EAAE;QACT,eAAe,EAAE,aAAa;KAC/B;IAED,YAAY,EAAE;QACZ,WAAW,EAAE,iBAAiB;KAC/B;CACF,CAAC,CAAC;AAEH,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAA6C;QAA7C,EAAE,QAAQ,EAAE,QAAQ,OAAyB,EAApB,KAAK,cAA9B,wBAAgC,CAAF;IAC3D,QAAQ,QAAQ,EAAE;QAChB,KAAK,SAAS;YACZ,OAAO,CACH,oBAAC,aAAa,oBACN,KAAK,GAER,QAAQ,CACG,CACnB,CAAC;QACJ,KAAK,kBAAkB;YACrB,OAAO,CACH,oBAAC,aAAa,kBACV,UAAU,UACN,KAAK,GAER,QAAQ,CACG,CACnB,CAAC;QACJ,KAAK,WAAW;YACd,OAAO,CACH,oBAAC,eAAe,oBACR,KAAK,GAER,QAAQ,CACK,CACrB,CAAC;QACJ,KAAK,MAAM;YACT,OAAO,CACH,oBAAC,UAAU,kBACP,kBAAkB,UACd,KAAK,GAER,QAAQ,CACA,CAChB,CAAC;QACJ;YACE,OAAO,CACH,oBAAC,YAAY,oBACL,KAAK,GAER,QAAQ,CACE,CAClB,CAAC;KACL;AACH,CAAC"}
+{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../../src/stories/atoms/Button/Button.tsx"],"names":[],"mappings":"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"}

package/dist/stories/atoms/Button/Button.stories.d.ts

@@ -12,5 +12,6 @@ export default _default;
 export declare const Primary: any;
 export declare const PrimaryExpanded: any;
 export declare const Secondary: any;
+export declare const SecondaryFlipped: any;
 export declare const Link: any;
 export declare const Default: any;

package/dist/stories/atoms/Button/Button.stories.js

@@ -10,6 +10,10 @@ export default {
 function Template(args) {
     return React.createElement(Button, Object.assign({}, args));
 }
+function BlackTemplate(args) {
+    return (React.createElement("div", { style: { backgroundColor: "#000", height: '100vh' } },
+        React.createElement(Button, Object.assign({}, args))));
+}
 export const Primary = Template.bind({});
 Primary.args = {
     category: "primary",
@@ -25,6 +29,11 @@ Secondary.args = {
     category: "secondary",
     children: 'Button',
 };
+export const SecondaryFlipped = BlackTemplate.bind({});
+SecondaryFlipped.args = {
+    category: "secondary-flipped",
+    children: 'Button',
+};
 export const Link = Template.bind({});
 Link.args = {
     category: "link",

package/dist/stories/atoms/Button/Button.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.stories.js","sourceRoot":"","sources":["../../../../src/stories/atoms/Button/Button.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,MAAM,MAAM,UAAU,CAAC;AAO9B,eAAe;IACb,KAAK,EAAE,cAAc;IACrB,SAAS,EAAE,MAAM;IACjB,QAAQ,EAAE;QACR,eAAe,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE;KACtC;CACF,CAAC;AAEF,SAAS,QAAQ,CAAC,IAAW;IAC3B,OAAO,oBAAC,MAAM,oBAAK,IAAI,EAAI,CAAC;AAC9B,CAAC;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACzC,OAAO,CAAC,IAAI,GAAG;IACb,QAAQ,EAAE,SAAS;IACnB,QAAQ,EAAE,QAAQ;CACnB,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACjD,eAAe,CAAC,IAAI,GAAG;IACrB,QAAQ,EAAE,kBAAkB;IAC5B,QAAQ,EAAE,QAAQ;CACnB,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC3C,SAAS,CAAC,IAAI,GAAG;IACf,QAAQ,EAAE,WAAW;IACrB,QAAQ,EAAE,QAAQ;CACnB,CAAC;AAEF,MAAM,CAAC,MAAM,IAAI,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACtC,IAAI,CAAC,IAAI,GAAG;IACV,QAAQ,EAAE,MAAM;IAChB,QAAQ,EAAE,QAAQ;CACnB,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACzC,OAAO,CAAC,IAAI,GAAG;IACb,QAAQ,EAAE,QAAQ;CACnB,CAAC"}
+{"version":3,"file":"Button.stories.js","sourceRoot":"","sources":["../../../../src/stories/atoms/Button/Button.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,MAAM,MAAM,UAAU,CAAC;AAO9B,eAAe;IACb,KAAK,EAAE,cAAc;IACrB,SAAS,EAAE,MAAM;IACjB,QAAQ,EAAE;QACR,eAAe,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE;KACtC;CACF,CAAC;AAEF,SAAS,QAAQ,CAAC,IAAW;IAC3B,OAAO,oBAAC,MAAM,oBAAK,IAAI,EAAI,CAAC;AAC9B,CAAC;AAED,SAAS,aAAa,CAAC,IAAW;IAChC,OAAO,CACH,6BAAK,KAAK,EAAE,EAAE,eAAe,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE;QACpD,oBAAC,MAAM,oBAAK,IAAI,EAAI,CAClB,CACT,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACzC,OAAO,CAAC,IAAI,GAAG;IACb,QAAQ,EAAE,SAAS;IACnB,QAAQ,EAAE,QAAQ;CACnB,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACjD,eAAe,CAAC,IAAI,GAAG;IACrB,QAAQ,EAAE,kBAAkB;IAC5B,QAAQ,EAAE,QAAQ;CACnB,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC3C,SAAS,CAAC,IAAI,GAAG;IACf,QAAQ,EAAE,WAAW;IACrB,QAAQ,EAAE,QAAQ;CACnB,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAG,aAAa,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACvD,gBAAgB,CAAC,IAAI,GAAG;IACtB,QAAQ,EAAE,mBAAmB;IAC7B,QAAQ,EAAE,QAAQ;CACnB,CAAC;AAEF,MAAM,CAAC,MAAM,IAAI,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACtC,IAAI,CAAC,IAAI,GAAG;IACV,QAAQ,EAAE,MAAM;IAChB,QAAQ,EAAE,QAAQ;CACnB,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACzC,OAAO,CAAC,IAAI,GAAG;IACb,QAAQ,EAAE,QAAQ;CACnB,CAAC"}

package/dist/stories/organisms/Modals/FullPageModal.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import Button from 'stories/atoms/Button/Button';
 import AppBar from '@mui/material/AppBar';
 import Box from '@mui/material/Box';
 import CloseIcon from '@mui/icons-material/Close';
@@ -9,6 +8,7 @@ import IconButton from '@mui/material/IconButton';
 import Toolbar from '@mui/material/Toolbar';
 import Typography from '@mui/material/Typography';
 import Grid from '@mui/material/Grid';
+import Button from '../../atoms/Button/Button';
 function FullPageModal({ isOpen, onClose, pageTitle, bottomCTAText, handleBottomCTAClick, isBottomCTAdisabled, PagePopupModal, children, }) {
     const handleOnClose = () => {
         onClose();

package/dist/stories/organisms/Modals/FullPageModal.js.map

@@ -1 +1 @@
-{"version":3,"file":"FullPageModal.js","sourceRoot":"","sources":["../../../../src/stories/organisms/Modals/FullPageModal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,MAAM,MAAM,6BAA6B,CAAC;AACjD,OAAO,MAAM,MAAM,sBAAsB,CAAC;AAC1C,OAAO,GAAG,MAAM,mBAAmB,CAAC;AACpC,OAAO,SAAS,MAAM,2BAA2B,CAAC;AAClD,OAAO,SAAS,MAAM,yBAAyB,CAAC;AAChD,OAAO,MAAM,MAAM,sBAAsB,CAAC;AAC1C,OAAO,UAAU,MAAM,0BAA0B,CAAC;AAClD,OAAO,OAAO,MAAM,uBAAuB,CAAC;AAC5C,OAAO,UAAU,MAAM,0BAA0B,CAAC;AAClD,OAAO,IAAI,MAAM,oBAAoB,CAAC;AAGtC,SAAS,aAAa,CAAC,EACrB,MAAM,EACN,OAAO,EACP,SAAS,EACT,aAAa,EACb,oBAAoB,EACpB,mBAAmB,EACnB,cAAc,EACd,QAAQ,GACU;IAClB,MAAM,aAAa,GAAG,GAAG,EAAE;QACzB,OAAO,EAAE,CAAC;IACZ,CAAC,CAAC;IAEF,OAAO,CACH,oBAAC,GAAG,IAAC,QAAQ,EAAC,UAAU;QACpB,oBAAC,MAAM,IACH,UAAU,EAAE;gBACV,KAAK,EAAE;oBACL,eAAe,EAAE,sBAAsB;oBACvC,SAAS,EAAE,MAAM;iBAClB;aACF,EACD,UAAU,QACV,IAAI,EAAE,MAAM,EACZ,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,QAAQ,EAAE,MAAM,CAAC;YAEzD,oBAAC,MAAM,IAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,eAAe,EAAE,cAAc,EAAE;gBACjE,oBAAC,OAAO;oBACJ,oBAAC,SAAS,IAAC,QAAQ,EAAE,KAAK;wBACtB,oBAAC,GAAG,IAAC,OAAO,EAAC,MAAM,EAAC,cAAc,EAAC,eAAe,EAAC,UAAU,EAAC,QAAQ;4BAClE,oBAAC,UAAU,IAAC,OAAO,EAAC,IAAI,IAAE,SAAS,CAAc;4BACjD,oBAAC,UAAU,IAAC,IAAI,EAAC,OAAO,EAAC,OAAO,EAAE,aAAa,gBAAa,OAAO;gCAC/D,oBAAC,SAAS,OAAG,CACJ,CACX,CACE,CACN,CACL;YACT,oBAAC,IAAI,IAAC,MAAM,EAAC,OAAO,EAAC,SAAS,UACzB,QAAQ,CACN;YACN,aAAa,IAAI,CAAC,CAAC,oBAAoB,IAAI,CACxC,oBAAC,GAAG,IAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,eAAe,EAAE,OAAO,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC;gBACpF,oBAAC,GAAG,IAAC,OAAO,EAAC,MAAM,EAAC,cAAc,EAAC,UAAU;oBACzC,oBAAC,MAAM,IAAC,OAAO,EAAE,oBAAoB,EAAE,QAAQ,EAAE,mBAAmB,EAAE,QAAQ,EAAC,SAAS,IACnF,aAAa,CACT,CACP,CACJ,CACT;YACA,cAAc,CACV,CACP,CACT,CAAC;AACJ,CAAC;AACD,eAAe,aAAa,CAAC"}
+{"version":3,"file":"FullPageModal.js","sourceRoot":"","sources":["../../../../src/stories/organisms/Modals/FullPageModal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,MAAM,MAAM,sBAAsB,CAAC;AAC1C,OAAO,GAAG,MAAM,mBAAmB,CAAC;AACpC,OAAO,SAAS,MAAM,2BAA2B,CAAC;AAClD,OAAO,SAAS,MAAM,yBAAyB,CAAC;AAChD,OAAO,MAAM,MAAM,sBAAsB,CAAC;AAC1C,OAAO,UAAU,MAAM,0BAA0B,CAAC;AAClD,OAAO,OAAO,MAAM,uBAAuB,CAAC;AAC5C,OAAO,UAAU,MAAM,0BAA0B,CAAC;AAClD,OAAO,IAAI,MAAM,oBAAoB,CAAC;AACtC,OAAO,MAAM,MAAM,2BAA2B,CAAC;AAG/C,SAAS,aAAa,CAAC,EACrB,MAAM,EACN,OAAO,EACP,SAAS,EACT,aAAa,EACb,oBAAoB,EACpB,mBAAmB,EACnB,cAAc,EACd,QAAQ,GACU;IAClB,MAAM,aAAa,GAAG,GAAG,EAAE;QACzB,OAAO,EAAE,CAAC;IACZ,CAAC,CAAC;IAEF,OAAO,CACH,oBAAC,GAAG,IAAC,QAAQ,EAAC,UAAU;QACpB,oBAAC,MAAM,IACH,UAAU,EAAE;gBACV,KAAK,EAAE;oBACL,eAAe,EAAE,sBAAsB;oBACvC,SAAS,EAAE,MAAM;iBAClB;aACF,EACD,UAAU,QACV,IAAI,EAAE,MAAM,EACZ,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,QAAQ,EAAE,MAAM,CAAC;YAEzD,oBAAC,MAAM,IAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,eAAe,EAAE,cAAc,EAAE;gBACjE,oBAAC,OAAO;oBACJ,oBAAC,SAAS,IAAC,QAAQ,EAAE,KAAK;wBACtB,oBAAC,GAAG,IAAC,OAAO,EAAC,MAAM,EAAC,cAAc,EAAC,eAAe,EAAC,UAAU,EAAC,QAAQ;4BAClE,oBAAC,UAAU,IAAC,OAAO,EAAC,IAAI,IAAE,SAAS,CAAc;4BACjD,oBAAC,UAAU,IAAC,IAAI,EAAC,OAAO,EAAC,OAAO,EAAE,aAAa,gBAAa,OAAO;gCAC/D,oBAAC,SAAS,OAAG,CACJ,CACX,CACE,CACN,CACL;YACT,oBAAC,IAAI,IAAC,MAAM,EAAC,OAAO,EAAC,SAAS,UACzB,QAAQ,CACN;YACN,aAAa,IAAI,CAAC,CAAC,oBAAoB,IAAI,CACxC,oBAAC,GAAG,IAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,eAAe,EAAE,OAAO,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC;gBACpF,oBAAC,GAAG,IAAC,OAAO,EAAC,MAAM,EAAC,cAAc,EAAC,UAAU;oBACzC,oBAAC,MAAM,IAAC,OAAO,EAAE,oBAAoB,EAAE,QAAQ,EAAE,mBAAmB,EAAE,QAAQ,EAAC,SAAS,IACnF,aAAa,CACT,CACP,CACJ,CACT;YACA,cAAc,CACV,CACP,CACT,CAAC;AACJ,CAAC;AACD,eAAe,aAAa,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@universal-tennis/ui-shared",
-  "version": "0.1.5",
+  "version": "0.1.7",
   "main": "dist/items.js",
   "license": "MIT",
   "homepage": "https://universaltennis.com",

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

@@ -19,6 +19,14 @@ function Template(args: Props) {
   return <Button {...args} />;  
 }
 
+function BlackTemplate(args: Props) {
+  return (
+      <div style={{ backgroundColor: "#000", height: '100vh' }}>
+          <Button {...args} /> 
+      </div>
+  );
+}
+
 export const Primary = Template.bind({});
 Primary.args = {
   category: "primary",
@@ -37,6 +45,12 @@ Secondary.args = {
   children: 'Button',
 };
 
+export const SecondaryFlipped = BlackTemplate.bind({});
+SecondaryFlipped.args = {
+  category: "secondary-flipped",
+  children: 'Button',
+};
+
 export const Link = Template.bind({});
 Link.args = {
   category: "link",

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

@@ -56,6 +56,21 @@ const SecondaryButton = styled(StyledButton)({
   },
 });
 
+const SecondaryButtonFlipped = styled(StyledButton)({
+  borderColor: 'var(--white)',
+  backgroundColor: 'transparent',
+  color: 'var(--white)',
+  borderWidth: '2px',
+
+  '&:hover': {
+    borderColor: 'var(--darkest-grey)',
+    color: 'var(--darkest-grey)',
+  },
+  '&:disabled': {
+    borderColor: 'var(--disabled)'
+  },
+});
+
 const LinkButton = styled(MuiButton)({
   borderColor: 'transparent',
   backgroundColor: 'transparent',
@@ -100,6 +115,14 @@ export default function Button({ children, category, ...props }: ButtonProps) {
               {children}
           </SecondaryButton>
       );
+    case 'secondary-flipped':
+      return (
+          <SecondaryButtonFlipped
+              {...props}
+          >
+              {children}
+          </SecondaryButtonFlipped>
+      );
     case 'link':
       return (
           <LinkButton

package/src/stories/organisms/Modals/FullPageModal.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import Button from 'stories/atoms/Button/Button';
 import AppBar from '@mui/material/AppBar';
 import Box from '@mui/material/Box';
 import CloseIcon from '@mui/icons-material/Close';
@@ -9,6 +8,7 @@ import IconButton from '@mui/material/IconButton';
 import Toolbar from '@mui/material/Toolbar';
 import Typography from '@mui/material/Typography';
 import Grid from '@mui/material/Grid';
+import Button from '../../atoms/Button/Button';
 import { FullPageModalType } from './sharedTypes';
 
 function FullPageModal({