@universal-tennis/ui-shared 0.0.6 → 0.0.7

package/dist/components.js

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

package/dist/components.js.map

@@ -1 +1 @@
-{"version":3,"file":"components.js","sourceRoot":"","sources":["../src/components.jsx"],"names":[],"mappings":"AAAA,QAAQ;AACR,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAE3D,YAAY;AACZ,aAAa"}
+{"version":3,"file":"components.js","sourceRoot":"","sources":["../src/components.jsx"],"names":[],"mappings":"AAAA,QAAQ;AACR,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAEnE,YAAY;AACZ,aAAa"}

package/dist/stories/atoms/{Button.d.ts → Button/Button.d.ts}

@@ -3,5 +3,5 @@ type ButtonProps = {
     children: string | ReactElement;
     category?: string;
 };
-export declare function Button({ children, category, ...props }: ButtonProps): JSX.Element;
+export default function Button({ children, category, ...props }: ButtonProps): JSX.Element;
 export {};

package/dist/stories/atoms/{Button.js → Button/Button.js}

@@ -21,9 +21,10 @@ const StyledButton = styled(MuiButton)({
     lineHeight: '39px',
     border: '1px solid transparent'
 });
-const PrimaryButton = styled(StyledButton)({
+const PrimaryButton = styled(StyledButton)((props) => ({
     backgroundColor: 'var(--black)',
     color: 'var(--white)',
+    width: props.isExpanded ? '100%' : 'inherit',
     '&:hover': {
         backgroundColor: 'var(--darkest-grey)',
         borderColor: 'var(--darkest-grey)',
@@ -32,7 +33,7 @@ const PrimaryButton = styled(StyledButton)({
         backgroundColor: 'var(--lightest-grey)',
         borderColor: 'var(--lightest-grey)',
     },
-});
+}));
 const SecondaryButton = styled(StyledButton)({
     borderColor: 'var(--black)',
     backgroundColor: 'transparent',
@@ -44,11 +45,13 @@ const SecondaryButton = styled(StyledButton)({
         borderColor: 'var(--disabled)'
     },
 });
-export function Button(_a) {
+export default function Button(_a) {
     var { children, category } = _a, props = __rest(_a, ["children", "category"]);
     switch (category) {
         case 'primary':
             return (React.createElement(PrimaryButton, Object.assign({}, props), children));
+        case 'primary-expanded':
+            return (React.createElement(PrimaryButton, Object.assign({ isExpanded: true }, props), children));
         case 'secondary':
             return (React.createElement(SecondaryButton, Object.assign({}, props), children));
         default:

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

@@ -0,0 +1 @@
+{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../../src/stories/atoms/Button/Button.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAC1C,OAAO,SAAS,MAAM,sBAAsB,CAAC;AAC7C,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAW9C,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;CAChC,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,sBAAsB;QACvC,WAAW,EAAE,sBAAsB;KACpC;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,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,CACL,oBAAC,aAAa,oBACR,KAAK,GAER,QAAQ,CACK,CACjB,CAAC;QACJ,KAAK,kBAAkB;YACrB,OAAO,CACH,oBAAC,aAAa,kBACZ,UAAU,UACN,KAAK,GAER,QAAQ,CACK,CACnB,CAAC;QACJ,KAAK,WAAW;YACd,OAAO,CACL,oBAAC,eAAe,oBACV,KAAK,GAER,QAAQ,CACO,CACnB,CAAC;QACJ;YACE,OAAO,CACH,oBAAC,YAAY,oBACP,KAAK,GAEV,QAAQ,CACM,CAClB,CAAC;KACL;AACH,CAAC"}

package/dist/stories/atoms/{Button.stories.d.ts → Button/Button.stories.d.ts}

@@ -1,4 +1,4 @@
-import { Button } from './Button';
+import Button from './Button';
 declare const _default: {
     title: string;
     component: typeof Button;
@@ -10,5 +10,6 @@ declare const _default: {
 };
 export default _default;
 export declare const Primary: any;
+export declare const PrimaryExpanded: any;
 export declare const Secondary: any;
 export declare const Default: any;

package/dist/stories/atoms/{Button.stories.js → Button/Button.stories.js}

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Button } from './Button';
+import Button from './Button';
 export default {
     title: 'Atoms/Button',
     component: Button,
@@ -15,6 +15,11 @@ Primary.args = {
     category: "primary",
     children: 'Button',
 };
+export const PrimaryExpanded = Template.bind({});
+PrimaryExpanded.args = {
+    category: "primary-expanded",
+    children: 'Button',
+};
 export const Secondary = Template.bind({});
 Secondary.args = {
     category: "secondary",

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

@@ -0,0 +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,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACzC,OAAO,CAAC,IAAI,GAAG;IACb,QAAQ,EAAE,QAAQ;CACnB,CAAC"}

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

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

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

@@ -0,0 +1,2 @@
+export { default as Button } from './Button';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/stories/atoms/Button/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC"}

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

@@ -0,0 +1,9 @@
+import { ReactElement } from 'react';
+import "./typography.css";
+type TypographyProps = {
+    children: string | ReactElement;
+    category?: string;
+    size?: string;
+};
+export default function Typography({ children, category, size, ...props }: TypographyProps): JSX.Element;
+export {};

package/dist/stories/atoms/Typography/Typography.js

@@ -0,0 +1,76 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import MuiTypography from '@mui/material/Typography';
+import { styled } from '@mui/material/styles';
+import "./typography.css";
+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) => ({
+    fontFamily: 'var(--display)',
+    fontSize: DISPLAY_SIZES[props.size],
+}));
+const PrimaryTypography = styled(MuiTypography)((props) => ({
+    fontFamily: 'var(--primary)',
+    fontSize: PRIMARY_SIZES[props.size],
+}));
+const SecondaryTypography = styled(MuiTypography)((props) => ({
+    fontFamily: 'var(--secondary)',
+    fontSize: SECONDARY_SIZES[props.size],
+    textTransform: props.isCap ? 'uppercase' : 'inherit'
+}));
+export default function Typography(_a) {
+    var { children, category, size } = _a, props = __rest(_a, ["children", "category", "size"]);
+    const isCap = size === null || size === void 0 ? void 0 : size.includes("cap");
+    switch (category) {
+        case 'primary':
+            return (React.createElement(PrimaryTypography, Object.assign({ size: size }, props), children));
+        case 'secondary':
+            return (React.createElement(SecondaryTypography, Object.assign({ size: size, isCap: isCap }, props), children));
+        case 'display':
+            return (React.createElement(DisplayTypography, Object.assign({ size: size }, props), children));
+        default:
+            return (React.createElement(PrimaryTypography, Object.assign({ size: size }, props), children));
+    }
+}
+//# sourceMappingURL=Typography.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Typography.js","sourceRoot":"","sources":["../../../../src/stories/atoms/Typography/Typography.tsx"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,37 @@
+import Typography from './Typography';
+declare const _default: {
+    title: string;
+    component: typeof Typography;
+};
+export default _default;
+export declare const Default: any;
+export declare const Display: any;
+export declare const DisplayXXXLarge: any;
+export declare const DisplayXXLarge: any;
+export declare const DisplayXLarge: any;
+export declare const DisplayLarge: any;
+export declare const DisplayLargelight: any;
+export declare const DisplayMediumBook: any;
+export declare const Primary: any;
+export declare const PrimaryLargeBold: any;
+export declare const PrimaryLargeBook: any;
+export declare const PrimaryLargeLight: any;
+export declare const PrimaryMediumSemiBold: any;
+export declare const PrimaryMediumMedium: any;
+export declare const PrimaryMediumBook: any;
+export declare const PrimarySmallBook: any;
+export declare const PrimaryXSmallBook: any;
+export declare const Secondary: any;
+export declare const SecondaryLargeMedium: any;
+export declare const SecondaryLargeBook: any;
+export declare const SecondaryMediumMedium: any;
+export declare const SecondaryMediumBook: any;
+export declare const SecondarySmallMediumCap: any;
+export declare const SecondarySmallMedium: any;
+export declare const SecondarySmallBook: any;
+export declare const SecondaryXSmallMediumCap: any;
+export declare const SecondaryXSmallMedium: any;
+export declare const SecondaryXSmallBookCap: any;
+export declare const SecondaryXSmallBook: any;
+export declare const SecondaryXXSmallMediumCap: any;
+export declare const SecondaryXXSmallBook: any;

package/dist/stories/atoms/Typography/Typography.stories.js

@@ -0,0 +1,191 @@
+import React from 'react';
+import Typography from './Typography';
+export default {
+    title: 'Atoms/Typography',
+    component: Typography,
+};
+function Template(args) {
+    return React.createElement(Typography, Object.assign({}, 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'
+};
+//# sourceMappingURL=Typography.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Typography.stories.js","sourceRoot":"","sources":["../../../../src/stories/atoms/Typography/Typography.stories.tsx"],"names":[],"mappings":"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"}

package/dist/stories/atoms/Typography/index.d.ts

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

package/dist/stories/atoms/Typography/index.js

@@ -0,0 +1,2 @@
+export { default as Typography } from './Typography';
+//# sourceMappingURL=index.js.map

package/dist/stories/atoms/Typography/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/stories/atoms/Typography/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC"}

package/package.json

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

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