@metamask-previews/design-system-react 0.0.0-preview.6fee845 → 0.0.0-preview.aac9b91

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/Button.cjs CHANGED
@@ -7,3 +7,4 @@ exports.Button = void 0;
7
7
  const react_1 = __importDefault(require("react"));
8
8
  const Button = ({ children, ...props }) => (react_1.default.createElement("button", { className: "px-4 h-8 rounded-full bg-primary-default text-primary-inverse", ...props }, children));
9
9
  exports.Button = Button;
10
+ //# sourceMappingURL=Button.cjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Button.cjs","sourceRoot":"","sources":["../src/Button.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAQnB,MAAM,MAAM,GAAG,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAe,EAAE,EAAE,CAAC,CAC7D,0CACE,SAAS,EAAC,+DAA+D,KACrE,KAAK,IAER,QAAQ,CACF,CACV,CAAC;AAPW,QAAA,MAAM,UAOjB","sourcesContent":["import React from 'react';\n\nexport interface ButtonProps\n extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n /** Button contents */\n children: React.ReactNode;\n}\n\nexport const Button = ({ children, ...props }: ButtonProps) => (\n <button\n className=\"px-4 h-8 rounded-full bg-primary-default text-primary-inverse\"\n {...props}\n >\n {children}\n </button>\n);\n"]}
package/dist/Button.mjs CHANGED
@@ -7,3 +7,4 @@ function $importDefault(module) {
7
7
  import $React from "react";
8
8
  const React = $importDefault($React);
9
9
  export const Button = ({ children, ...props }) => (React.createElement("button", { className: "px-4 h-8 rounded-full bg-primary-default text-primary-inverse", ...props }, children));
10
+ //# sourceMappingURL=Button.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Button.mjs","sourceRoot":"","sources":["../src/Button.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,MAAK,cAAc;;AAQ1B,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAe,EAAE,EAAE,CAAC,CAC7D,gCACE,SAAS,EAAC,+DAA+D,KACrE,KAAK,IAER,QAAQ,CACF,CACV,CAAC","sourcesContent":["import React from 'react';\n\nexport interface ButtonProps\n extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n /** Button contents */\n children: React.ReactNode;\n}\n\nexport const Button = ({ children, ...props }: ButtonProps) => (\n <button\n className=\"px-4 h-8 rounded-full bg-primary-default text-primary-inverse\"\n {...props}\n >\n {children}\n </button>\n);\n"]}
@@ -26,3 +26,4 @@ describe('Button Component', () => {
26
26
  expect(react_2.screen.getByLabelText('custom-button')).toBeInTheDocument();
27
27
  });
28
28
  });
29
+ //# sourceMappingURL=Button.test.cjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Button.test.cjs","sourceRoot":"","sources":["../src/Button.test.tsx"],"names":[],"mappings":";;;;;AAAA,kDAA0B;AAC1B,kDAAmE;AACnE,yCAAkC;AAElC,QAAQ,CAAC,kBAAkB,EAAE,GAAG,EAAE;IAChC,EAAE,CAAC,4BAA4B,EAAE,GAAG,EAAE;QACpC,IAAA,cAAM,EAAC,8BAAC,eAAM,mBAAkB,CAAC,CAAC;QAClC,MAAM,CAAC,cAAM,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;IAC3D,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,6BAA6B,EAAE,GAAG,EAAE;QACrC,MAAM,EAAE,SAAS,EAAE,GAAG,IAAA,cAAM,EAAC,8BAAC,eAAM,wBAAuB,CAAC,CAAC;QAC7D,MAAM,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC,WAAW,CACtC,+DAA+D,CAChE,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,sBAAsB,EAAE,GAAG,EAAE;QAC9B,MAAM,WAAW,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC;QAC9B,IAAA,cAAM,EAAC,8BAAC,eAAM,IAAC,OAAO,EAAE,WAAW,YAAgB,CAAC,CAAC;QACrD,iBAAS,CAAC,KAAK,CAAC,cAAM,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC;QAC3C,MAAM,CAAC,WAAW,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,CAAC;IAC/C,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,+CAA+C,EAAE,GAAG,EAAE;QACvD,IAAA,cAAM,EAAC,8BAAC,eAAM,kBAAY,eAAe,wBAA2B,CAAC,CAAC;QACtE,MAAM,CAAC,cAAM,CAAC,cAAc,CAAC,eAAe,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;IACrE,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import React from 'react';\nimport { render, screen, fireEvent } from '@testing-library/react';\nimport { Button } from './Button';\n\ndescribe('Button Component', () => {\n it('renders children correctly', () => {\n render(<Button>Click Me</Button>);\n expect(screen.getByText('Click Me')).toBeInTheDocument();\n });\n\n it('applies the correct classes', () => {\n const { container } = render(<Button>Styled Button</Button>);\n expect(container.firstChild).toHaveClass(\n 'px-4 h-8 rounded-full bg-primary-default text-primary-inverse',\n );\n });\n\n it('handles click events', () => {\n const handleClick = jest.fn();\n render(<Button onClick={handleClick}>Click</Button>);\n fireEvent.click(screen.getByText('Click'));\n expect(handleClick).toHaveBeenCalledTimes(1);\n });\n\n it('passes additional props to the button element', () => {\n render(<Button aria-label=\"custom-button\">Accessible Button</Button>);\n expect(screen.getByLabelText('custom-button')).toBeInTheDocument();\n });\n});\n"]}
@@ -29,3 +29,4 @@ describe('Button Component', () => {
29
29
  expect(screen.getByLabelText('custom-button')).toBeInTheDocument();
30
30
  });
31
31
  });
32
+ //# sourceMappingURL=Button.test.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Button.test.mjs","sourceRoot":"","sources":["../src/Button.test.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,MAAK,cAAc;;;;AAE1B,OAAO,EAAE,MAAM,EAAE,qBAAiB;AAElC,QAAQ,CAAC,kBAAkB,EAAE,GAAG,EAAE;IAChC,EAAE,CAAC,4BAA4B,EAAE,GAAG,EAAE;QACpC,MAAM,CAAC,oBAAC,MAAM,mBAAkB,CAAC,CAAC;QAClC,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;IAC3D,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,6BAA6B,EAAE,GAAG,EAAE;QACrC,MAAM,EAAE,SAAS,EAAE,GAAG,MAAM,CAAC,oBAAC,MAAM,wBAAuB,CAAC,CAAC;QAC7D,MAAM,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC,WAAW,CACtC,+DAA+D,CAChE,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,sBAAsB,EAAE,GAAG,EAAE;QAC9B,MAAM,WAAW,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC;QAC9B,MAAM,CAAC,oBAAC,MAAM,IAAC,OAAO,EAAE,WAAW,YAAgB,CAAC,CAAC;QACrD,SAAS,CAAC,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC;QAC3C,MAAM,CAAC,WAAW,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,CAAC;IAC/C,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,+CAA+C,EAAE,GAAG,EAAE;QACvD,MAAM,CAAC,oBAAC,MAAM,kBAAY,eAAe,wBAA2B,CAAC,CAAC;QACtE,MAAM,CAAC,MAAM,CAAC,cAAc,CAAC,eAAe,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;IACrE,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import React from 'react';\nimport { render, screen, fireEvent } from '@testing-library/react';\nimport { Button } from './Button';\n\ndescribe('Button Component', () => {\n it('renders children correctly', () => {\n render(<Button>Click Me</Button>);\n expect(screen.getByText('Click Me')).toBeInTheDocument();\n });\n\n it('applies the correct classes', () => {\n const { container } = render(<Button>Styled Button</Button>);\n expect(container.firstChild).toHaveClass(\n 'px-4 h-8 rounded-full bg-primary-default text-primary-inverse',\n );\n });\n\n it('handles click events', () => {\n const handleClick = jest.fn();\n render(<Button onClick={handleClick}>Click</Button>);\n fireEvent.click(screen.getByText('Click'));\n expect(handleClick).toHaveBeenCalledTimes(1);\n });\n\n it('passes additional props to the button element', () => {\n render(<Button aria-label=\"custom-button\">Accessible Button</Button>);\n expect(screen.getByLabelText('custom-button')).toBeInTheDocument();\n });\n});\n"]}
package/dist/Text.cjs CHANGED
@@ -37,3 +37,4 @@ const Text = ({ variant, children, className }) => {
37
37
  return react_1.default.createElement("p", { className: `${variantClass} ${className}` }, children);
38
38
  };
39
39
  exports.Text = Text;
40
+ //# sourceMappingURL=Text.cjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Text.cjs","sourceRoot":"","sources":["../src/Text.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAE1B,IAAY,WAcX;AAdD,WAAY,WAAW;IACrB,gBAAgB;IAChB,uCAAwB,CAAA;IAExB,gBAAgB;IAChB,uCAAwB,CAAA;IACxB,uCAAwB,CAAA;IACxB,uCAAwB,CAAA;IAExB,aAAa;IACb,iCAAkB,CAAA;IAClB,iCAAkB,CAAA;IAClB,iCAAkB,CAAA;IAClB,iCAAkB,CAAA;AACpB,CAAC,EAdW,WAAW,2BAAX,WAAW,QActB;AAQD,4DAA4D;AAC5D,MAAM,kBAAkB,GAAgC;IACtD,CAAC,WAAW,CAAC,SAAS,CAAC,EACrB,2KAA2K;IAC7K,CAAC,WAAW,CAAC,SAAS,CAAC,EACrB,2KAA2K;IAC7K,CAAC,WAAW,CAAC,SAAS,CAAC,EACrB,2KAA2K;IAC7K,CAAC,WAAW,CAAC,SAAS,CAAC,EACrB,2KAA2K;IAC7K,CAAC,WAAW,CAAC,MAAM,CAAC,EAClB,2MAA2M;IAC7M,CAAC,WAAW,CAAC,MAAM,CAAC,EAClB,mJAAmJ;IACrJ,CAAC,WAAW,CAAC,MAAM,CAAC,EAClB,mJAAmJ;IACrJ,CAAC,WAAW,CAAC,MAAM,CAAC,EAClB,mJAAmJ;CACtJ,CAAC;AAEF,wDAAwD;AACjD,MAAM,IAAI,GAAwB,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,EAAE;IAC5E,sEAAsE;IACtE,MAAM,YAAY,GAAG,kBAAkB,CAAC,OAAO,CAAC,CAAC;IAEjD,OAAO,qCAAG,SAAS,EAAE,GAAG,YAAY,IAAI,SAAS,EAAE,IAAG,QAAQ,CAAK,CAAC;AACtE,CAAC,CAAC;AALW,QAAA,IAAI,QAKf","sourcesContent":["import React from 'react';\n\nexport enum TextVariant {\n // Display Sizes\n DisplayMd = 'display-md',\n\n // Heading Sizes\n HeadingLg = 'heading-lg',\n HeadingMd = 'heading-md',\n HeadingSm = 'heading-sm',\n\n // Font Sizes\n BodyLg = 'body-lg',\n BodyMd = 'body-md',\n BodySm = 'body-sm',\n BodyXs = 'body-xs',\n}\n\ninterface TextProps {\n variant: TextVariant;\n children: React.ReactNode;\n className?: string;\n}\n\n// Create a mapping from TextVariant to Tailwind class names\nconst typographyClassMap: Record<TextVariant, string> = {\n [TextVariant.DisplayMd]:\n 'text-s-display-md font-s-display-md leading-s-display-md tracking-s-display-md lg:text-l-display-md lg:font-l-display-md lg:leading-l-display-md lg:tracking-l-display-md',\n [TextVariant.HeadingLg]:\n 'text-s-heading-lg font-s-heading-lg leading-s-heading-lg tracking-s-heading-lg lg:text-l-heading-lg lg:font-l-heading-lg lg:leading-l-heading-lg lg:tracking-l-heading-lg',\n [TextVariant.HeadingMd]:\n 'text-s-heading-md font-s-heading-md leading-s-heading-md tracking-s-heading-md lg:text-l-heading-md lg:font-l-heading-md lg:leading-l-heading-md lg:tracking-l-heading-md',\n [TextVariant.HeadingSm]:\n 'text-s-heading-sm font-s-heading-sm leading-s-heading-sm tracking-s-heading-sm lg:text-l-heading-sm lg:font-l-heading-sm lg:leading-l-heading-sm lg:tracking-l-heading-sm',\n [TextVariant.BodyLg]:\n 'text-s-body-lg-medium font-s-body-lg-medium leading-s-body-lg-medium tracking-s-body-lg-medium lg:text-l-body-lg-medium lg:font-l-body-lg-medium lg:leading-l-body-lg-medium lg:tracking-l-body-lg-medium',\n [TextVariant.BodyMd]:\n 'text-s-body-md font-s-body-md leading-s-body-md tracking-s-body-md lg:text-l-body-md lg:font-l-body-md lg:leading-l-body-md lg:tracking-l-body-md',\n [TextVariant.BodySm]:\n 'text-s-body-sm font-s-body-sm leading-s-body-sm tracking-s-body-sm lg:text-l-body-sm lg:font-l-body-sm lg:leading-l-body-sm lg:tracking-l-body-sm',\n [TextVariant.BodyXs]:\n 'text-s-body-xs font-s-body-xs leading-s-body-xs tracking-s-body-xs lg:text-l-body-xs lg:font-l-body-xs lg:leading-l-body-xs lg:tracking-l-body-xs',\n};\n\n// Update the Text component to use the TextVariant enum\nexport const Text: React.FC<TextProps> = ({ variant, children, className }) => {\n // Map the TextVariant to corresponding class names from typography.ts\n const variantClass = typographyClassMap[variant];\n\n return <p className={`${variantClass} ${className}`}>{children}</p>;\n};\n"]}
package/dist/Text.mjs CHANGED
@@ -37,3 +37,4 @@ export const Text = ({ variant, children, className }) => {
37
37
  const variantClass = typographyClassMap[variant];
38
38
  return React.createElement("p", { className: `${variantClass} ${className}` }, children);
39
39
  };
40
+ //# sourceMappingURL=Text.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Text.mjs","sourceRoot":"","sources":["../src/Text.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,MAAK,cAAc;;AAE1B,MAAM,CAAN,IAAY,WAcX;AAdD,WAAY,WAAW;IACrB,gBAAgB;IAChB,uCAAwB,CAAA;IAExB,gBAAgB;IAChB,uCAAwB,CAAA;IACxB,uCAAwB,CAAA;IACxB,uCAAwB,CAAA;IAExB,aAAa;IACb,iCAAkB,CAAA;IAClB,iCAAkB,CAAA;IAClB,iCAAkB,CAAA;IAClB,iCAAkB,CAAA;AACpB,CAAC,EAdW,WAAW,KAAX,WAAW,QActB;AAQD,4DAA4D;AAC5D,MAAM,kBAAkB,GAAgC;IACtD,CAAC,WAAW,CAAC,SAAS,CAAC,EACrB,2KAA2K;IAC7K,CAAC,WAAW,CAAC,SAAS,CAAC,EACrB,2KAA2K;IAC7K,CAAC,WAAW,CAAC,SAAS,CAAC,EACrB,2KAA2K;IAC7K,CAAC,WAAW,CAAC,SAAS,CAAC,EACrB,2KAA2K;IAC7K,CAAC,WAAW,CAAC,MAAM,CAAC,EAClB,2MAA2M;IAC7M,CAAC,WAAW,CAAC,MAAM,CAAC,EAClB,mJAAmJ;IACrJ,CAAC,WAAW,CAAC,MAAM,CAAC,EAClB,mJAAmJ;IACrJ,CAAC,WAAW,CAAC,MAAM,CAAC,EAClB,mJAAmJ;CACtJ,CAAC;AAEF,wDAAwD;AACxD,MAAM,CAAC,MAAM,IAAI,GAAwB,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,EAAE;IAC5E,sEAAsE;IACtE,MAAM,YAAY,GAAG,kBAAkB,CAAC,OAAO,CAAC,CAAC;IAEjD,OAAO,2BAAG,SAAS,EAAE,GAAG,YAAY,IAAI,SAAS,EAAE,IAAG,QAAQ,CAAK,CAAC;AACtE,CAAC,CAAC","sourcesContent":["import React from 'react';\n\nexport enum TextVariant {\n // Display Sizes\n DisplayMd = 'display-md',\n\n // Heading Sizes\n HeadingLg = 'heading-lg',\n HeadingMd = 'heading-md',\n HeadingSm = 'heading-sm',\n\n // Font Sizes\n BodyLg = 'body-lg',\n BodyMd = 'body-md',\n BodySm = 'body-sm',\n BodyXs = 'body-xs',\n}\n\ninterface TextProps {\n variant: TextVariant;\n children: React.ReactNode;\n className?: string;\n}\n\n// Create a mapping from TextVariant to Tailwind class names\nconst typographyClassMap: Record<TextVariant, string> = {\n [TextVariant.DisplayMd]:\n 'text-s-display-md font-s-display-md leading-s-display-md tracking-s-display-md lg:text-l-display-md lg:font-l-display-md lg:leading-l-display-md lg:tracking-l-display-md',\n [TextVariant.HeadingLg]:\n 'text-s-heading-lg font-s-heading-lg leading-s-heading-lg tracking-s-heading-lg lg:text-l-heading-lg lg:font-l-heading-lg lg:leading-l-heading-lg lg:tracking-l-heading-lg',\n [TextVariant.HeadingMd]:\n 'text-s-heading-md font-s-heading-md leading-s-heading-md tracking-s-heading-md lg:text-l-heading-md lg:font-l-heading-md lg:leading-l-heading-md lg:tracking-l-heading-md',\n [TextVariant.HeadingSm]:\n 'text-s-heading-sm font-s-heading-sm leading-s-heading-sm tracking-s-heading-sm lg:text-l-heading-sm lg:font-l-heading-sm lg:leading-l-heading-sm lg:tracking-l-heading-sm',\n [TextVariant.BodyLg]:\n 'text-s-body-lg-medium font-s-body-lg-medium leading-s-body-lg-medium tracking-s-body-lg-medium lg:text-l-body-lg-medium lg:font-l-body-lg-medium lg:leading-l-body-lg-medium lg:tracking-l-body-lg-medium',\n [TextVariant.BodyMd]:\n 'text-s-body-md font-s-body-md leading-s-body-md tracking-s-body-md lg:text-l-body-md lg:font-l-body-md lg:leading-l-body-md lg:tracking-l-body-md',\n [TextVariant.BodySm]:\n 'text-s-body-sm font-s-body-sm leading-s-body-sm tracking-s-body-sm lg:text-l-body-sm lg:font-l-body-sm lg:leading-l-body-sm lg:tracking-l-body-sm',\n [TextVariant.BodyXs]:\n 'text-s-body-xs font-s-body-xs leading-s-body-xs tracking-s-body-xs lg:text-l-body-xs lg:font-l-body-xs lg:leading-l-body-xs lg:tracking-l-body-xs',\n};\n\n// Update the Text component to use the TextVariant enum\nexport const Text: React.FC<TextProps> = ({ variant, children, className }) => {\n // Map the TextVariant to corresponding class names from typography.ts\n const variantClass = typographyClassMap[variant];\n\n return <p className={`${variantClass} ${className}`}>{children}</p>;\n};\n"]}
@@ -20,3 +20,4 @@ describe('Text Component', () => {
20
20
  expect(container.firstChild).toHaveClass('text-s-body-sm font-s-body-sm leading-s-body-sm tracking-s-body-sm lg:text-l-body-sm lg:font-l-body-sm lg:leading-l-body-sm lg:tracking-l-body-sm custom-class');
21
21
  });
22
22
  });
23
+ //# sourceMappingURL=Text.test.cjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Text.test.cjs","sourceRoot":"","sources":["../src/Text.test.tsx"],"names":[],"mappings":";;;;;AAAA,kDAA0B;AAC1B,kDAAwD;AACxD,qCAA2C;AAE3C,QAAQ,CAAC,gBAAgB,EAAE,GAAG,EAAE;IAC9B,EAAE,CAAC,4BAA4B,EAAE,GAAG,EAAE;QACpC,IAAA,cAAM,EAAC,8BAAC,WAAI,IAAC,OAAO,EAAE,kBAAW,CAAC,MAAM,oBAAsB,CAAC,CAAC;QAChE,MAAM,CAAC,cAAM,CAAC,SAAS,CAAC,eAAe,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;IAChE,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,qCAAqC,EAAE,GAAG,EAAE;QAC7C,MAAM,EAAE,SAAS,EAAE,GAAG,IAAA,cAAM,EAC1B,8BAAC,WAAI,IAAC,OAAO,EAAE,kBAAW,CAAC,SAAS,cAAgB,CACrD,CAAC;QACF,MAAM,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC,WAAW,CACtC,2KAA2K,CAC5K,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,+BAA+B,EAAE,GAAG,EAAE;QACvC,MAAM,EAAE,SAAS,EAAE,GAAG,IAAA,cAAM,EAC1B,8BAAC,WAAI,IAAC,OAAO,EAAE,kBAAW,CAAC,MAAM,EAAE,SAAS,EAAC,cAAc,mBAEpD,CACR,CAAC;QACF,MAAM,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC,WAAW,CACtC,gKAAgK,CACjK,CAAC;IACJ,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import React from 'react';\nimport { render, screen } from '@testing-library/react';\nimport { Text, TextVariant } from './Text';\n\ndescribe('Text Component', () => {\n it('renders children correctly', () => {\n render(<Text variant={TextVariant.BodyMd}>Hello, World!</Text>);\n expect(screen.getByText('Hello, World!')).toBeInTheDocument();\n });\n\n it('applies the correct variant classes', () => {\n const { container } = render(\n <Text variant={TextVariant.HeadingLg}>Heading</Text>,\n );\n expect(container.firstChild).toHaveClass(\n 'text-s-heading-lg font-s-heading-lg leading-s-heading-lg tracking-s-heading-lg lg:text-l-heading-lg lg:font-l-heading-lg lg:leading-l-heading-lg lg:tracking-l-heading-lg',\n );\n });\n\n it('merges additional class names', () => {\n const { container } = render(\n <Text variant={TextVariant.BodySm} className=\"custom-class\">\n Custom Class\n </Text>,\n );\n expect(container.firstChild).toHaveClass(\n 'text-s-body-sm font-s-body-sm leading-s-body-sm tracking-s-body-sm lg:text-l-body-sm lg:font-l-body-sm lg:leading-l-body-sm lg:tracking-l-body-sm custom-class',\n );\n });\n});\n"]}
@@ -23,3 +23,4 @@ describe('Text Component', () => {
23
23
  expect(container.firstChild).toHaveClass('text-s-body-sm font-s-body-sm leading-s-body-sm tracking-s-body-sm lg:text-l-body-sm lg:font-l-body-sm lg:leading-l-body-sm lg:tracking-l-body-sm custom-class');
24
24
  });
25
25
  });
26
+ //# sourceMappingURL=Text.test.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Text.test.mjs","sourceRoot":"","sources":["../src/Text.test.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,MAAK,cAAc;;;;AAE1B,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,mBAAe;AAE3C,QAAQ,CAAC,gBAAgB,EAAE,GAAG,EAAE;IAC9B,EAAE,CAAC,4BAA4B,EAAE,GAAG,EAAE;QACpC,MAAM,CAAC,oBAAC,IAAI,IAAC,OAAO,EAAE,WAAW,CAAC,MAAM,oBAAsB,CAAC,CAAC;QAChE,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,eAAe,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;IAChE,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,qCAAqC,EAAE,GAAG,EAAE;QAC7C,MAAM,EAAE,SAAS,EAAE,GAAG,MAAM,CAC1B,oBAAC,IAAI,IAAC,OAAO,EAAE,WAAW,CAAC,SAAS,cAAgB,CACrD,CAAC;QACF,MAAM,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC,WAAW,CACtC,2KAA2K,CAC5K,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,+BAA+B,EAAE,GAAG,EAAE;QACvC,MAAM,EAAE,SAAS,EAAE,GAAG,MAAM,CAC1B,oBAAC,IAAI,IAAC,OAAO,EAAE,WAAW,CAAC,MAAM,EAAE,SAAS,EAAC,cAAc,mBAEpD,CACR,CAAC;QACF,MAAM,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC,WAAW,CACtC,gKAAgK,CACjK,CAAC;IACJ,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import React from 'react';\nimport { render, screen } from '@testing-library/react';\nimport { Text, TextVariant } from './Text';\n\ndescribe('Text Component', () => {\n it('renders children correctly', () => {\n render(<Text variant={TextVariant.BodyMd}>Hello, World!</Text>);\n expect(screen.getByText('Hello, World!')).toBeInTheDocument();\n });\n\n it('applies the correct variant classes', () => {\n const { container } = render(\n <Text variant={TextVariant.HeadingLg}>Heading</Text>,\n );\n expect(container.firstChild).toHaveClass(\n 'text-s-heading-lg font-s-heading-lg leading-s-heading-lg tracking-s-heading-lg lg:text-l-heading-lg lg:font-l-heading-lg lg:leading-l-heading-lg lg:tracking-l-heading-lg',\n );\n });\n\n it('merges additional class names', () => {\n const { container } = render(\n <Text variant={TextVariant.BodySm} className=\"custom-class\">\n Custom Class\n </Text>,\n );\n expect(container.firstChild).toHaveClass(\n 'text-s-body-sm font-s-body-sm leading-s-body-sm tracking-s-body-sm lg:text-l-body-sm lg:font-l-body-sm lg:leading-l-body-sm lg:tracking-l-body-sm custom-class',\n );\n });\n});\n"]}
package/dist/index.cjs CHANGED
@@ -5,3 +5,4 @@ var Button_1 = require("./Button.cjs");
5
5
  Object.defineProperty(exports, "Button", { enumerable: true, get: function () { return Button_1.Button; } });
6
6
  var Text_1 = require("./Text.cjs");
7
7
  Object.defineProperty(exports, "Text", { enumerable: true, get: function () { return Text_1.Text; } });
8
+ //# sourceMappingURL=index.cjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.cjs","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;AAAA,uCAAkC;AAAzB,gGAAA,MAAM,OAAA;AACf,mCAA8B;AAArB,4FAAA,IAAI,OAAA","sourcesContent":["export { Button } from './Button';\nexport { Text } from './Text';\n"]}
package/dist/index.mjs CHANGED
@@ -1,2 +1,3 @@
1
1
  export { Button } from "./Button.mjs";
2
2
  export { Text } from "./Text.mjs";
3
+ //# sourceMappingURL=index.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.mjs","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,qBAAiB;AAClC,OAAO,EAAE,IAAI,EAAE,mBAAe","sourcesContent":["export { Button } from './Button';\nexport { Text } from './Text';\n"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@metamask-previews/design-system-react",
3
- "version": "0.0.0-preview.6fee845",
3
+ "version": "0.0.0-preview.aac9b91",
4
4
  "description": "Design system react ui components",
5
5
  "keywords": [
6
6
  "MetaMask",
@@ -47,7 +47,7 @@
47
47
  "test:watch": "NODE_OPTIONS=--experimental-vm-modules jest --watch"
48
48
  },
49
49
  "devDependencies": {
50
- "@metamask-previews/design-system-tailwind-preset": "0.0.0-preview.6fee845",
50
+ "@metamask-previews/design-system-tailwind-preset": "0.0.0-preview.aac9b91",
51
51
  "@metamask/auto-changelog": "^3.4.4",
52
52
  "@storybook/react": "^8.3.5",
53
53
  "@storybook/test": "^8.3.5",
@@ -65,8 +65,8 @@
65
65
  },
66
66
  "peerDependencies": {
67
67
  "@metamask/design-tokens": "^4.0.0",
68
- "react": "^18.2.0",
69
- "react-dom": "^18.2.0",
68
+ "react": "^16.0.0",
69
+ "react-dom": "^16.0.0",
70
70
  "tailwindcss": "^3.0.0"
71
71
  },
72
72
  "engines": {
@@ -1,19 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.Default = void 0;
4
- const test_1 = require("@storybook/test");
5
- const Button_1 = require("./Button.cjs");
6
- // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
7
- const meta = {
8
- title: 'Components/Button',
9
- component: Button_1.Button,
10
- tags: ['autodocs'],
11
- args: { onClick: (0, test_1.fn)() },
12
- };
13
- exports.default = meta;
14
- // More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
15
- exports.Default = {
16
- args: {
17
- children: 'Button',
18
- },
19
- };
@@ -1,7 +0,0 @@
1
- import type { Meta, StoryObj } from "@storybook/react";
2
- import { Button } from "./Button.cjs";
3
- declare const meta: Meta<typeof Button>;
4
- export default meta;
5
- type Story = StoryObj<typeof meta>;
6
- export declare const Default: Story;
7
- //# sourceMappingURL=Button.stories.d.cts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Button.stories.d.cts","sourceRoot":"","sources":["../src/Button.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,yBAAyB;AAGvD,OAAO,EAAE,MAAM,EAAE,qBAAiB;AAGlC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,MAAM,CAK7B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAGnC,eAAO,MAAM,OAAO,EAAE,KAIrB,CAAC"}
@@ -1,7 +0,0 @@
1
- import type { Meta, StoryObj } from "@storybook/react";
2
- import { Button } from "./Button.mjs";
3
- declare const meta: Meta<typeof Button>;
4
- export default meta;
5
- type Story = StoryObj<typeof meta>;
6
- export declare const Default: Story;
7
- //# sourceMappingURL=Button.stories.d.mts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Button.stories.d.mts","sourceRoot":"","sources":["../src/Button.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,yBAAyB;AAGvD,OAAO,EAAE,MAAM,EAAE,qBAAiB;AAGlC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,MAAM,CAK7B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAGnC,eAAO,MAAM,OAAO,EAAE,KAIrB,CAAC"}
@@ -1,16 +0,0 @@
1
- import { fn } from "@storybook/test";
2
- import { Button } from "./Button.mjs";
3
- // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
4
- const meta = {
5
- title: 'Components/Button',
6
- component: Button,
7
- tags: ['autodocs'],
8
- args: { onClick: fn() },
9
- };
10
- export default meta;
11
- // More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
12
- export const Default = {
13
- args: {
14
- children: 'Button',
15
- },
16
- };
@@ -1,29 +0,0 @@
1
- "use strict";
2
- var __importDefault = (this && this.__importDefault) || function (mod) {
3
- return (mod && mod.__esModule) ? mod : { "default": mod };
4
- };
5
- Object.defineProperty(exports, "__esModule", { value: true });
6
- exports.Default = void 0;
7
- const react_1 = __importDefault(require("react"));
8
- const Text_1 = require("./Text.cjs");
9
- const meta = {
10
- title: 'Components/Text',
11
- component: Text_1.Text,
12
- tags: ['autodocs'],
13
- };
14
- exports.default = meta;
15
- const variants = [
16
- { name: 'DisplayMd', variant: Text_1.TextVariant.DisplayMd },
17
- { name: 'HeadingLg', variant: Text_1.TextVariant.HeadingLg },
18
- { name: 'HeadingMd', variant: Text_1.TextVariant.HeadingMd },
19
- { name: 'HeadingSm', variant: Text_1.TextVariant.HeadingSm },
20
- { name: 'BodyLg', variant: Text_1.TextVariant.BodyLg },
21
- { name: 'BodyMd', variant: Text_1.TextVariant.BodyMd },
22
- { name: 'BodySm', variant: Text_1.TextVariant.BodySm },
23
- { name: 'BodyXs', variant: Text_1.TextVariant.BodyXs },
24
- ];
25
- // Update the AllTypography story to use the CSF3.0 Story format
26
- exports.Default = {
27
- render: () => (react_1.default.createElement("div", { className: "space-y-4 p-4" }, variants.map(({ name, variant }) => (react_1.default.createElement("div", { key: variant },
28
- react_1.default.createElement(Text_1.Text, { className: "text-default", variant: variant }, name)))))),
29
- };
@@ -1,7 +0,0 @@
1
- import type { Meta, StoryObj } from "@storybook/react";
2
- import { Text } from "./Text.cjs";
3
- declare const meta: Meta<typeof Text>;
4
- export default meta;
5
- type Story = StoryObj<typeof meta>;
6
- export declare const Default: Story;
7
- //# sourceMappingURL=Text.stories.d.cts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Text.stories.d.cts","sourceRoot":"","sources":["../src/Text.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,yBAAyB;AACvD,OAAO,EAAE,IAAI,EAAe,mBAAe;AAE3C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,IAAI,CAI3B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAcnC,eAAO,MAAM,OAAO,EAAE,KAYrB,CAAC"}
@@ -1,7 +0,0 @@
1
- import type { Meta, StoryObj } from "@storybook/react";
2
- import { Text } from "./Text.mjs";
3
- declare const meta: Meta<typeof Text>;
4
- export default meta;
5
- type Story = StoryObj<typeof meta>;
6
- export declare const Default: Story;
7
- //# sourceMappingURL=Text.stories.d.mts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Text.stories.d.mts","sourceRoot":"","sources":["../src/Text.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,yBAAyB;AACvD,OAAO,EAAE,IAAI,EAAe,mBAAe;AAE3C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,IAAI,CAI3B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAcnC,eAAO,MAAM,OAAO,EAAE,KAYrB,CAAC"}
@@ -1,30 +0,0 @@
1
- function $importDefault(module) {
2
- if (module?.__esModule) {
3
- return module.default;
4
- }
5
- return module;
6
- }
7
- import $React from "react";
8
- const React = $importDefault($React);
9
- import { Text, TextVariant } from "./Text.mjs";
10
- const meta = {
11
- title: 'Components/Text',
12
- component: Text,
13
- tags: ['autodocs'],
14
- };
15
- export default meta;
16
- const variants = [
17
- { name: 'DisplayMd', variant: TextVariant.DisplayMd },
18
- { name: 'HeadingLg', variant: TextVariant.HeadingLg },
19
- { name: 'HeadingMd', variant: TextVariant.HeadingMd },
20
- { name: 'HeadingSm', variant: TextVariant.HeadingSm },
21
- { name: 'BodyLg', variant: TextVariant.BodyLg },
22
- { name: 'BodyMd', variant: TextVariant.BodyMd },
23
- { name: 'BodySm', variant: TextVariant.BodySm },
24
- { name: 'BodyXs', variant: TextVariant.BodyXs },
25
- ];
26
- // Update the AllTypography story to use the CSF3.0 Story format
27
- export const Default = {
28
- render: () => (React.createElement("div", { className: "space-y-4 p-4" }, variants.map(({ name, variant }) => (React.createElement("div", { key: variant },
29
- React.createElement(Text, { className: "text-default", variant: variant }, name)))))),
30
- };
@@ -1,11 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- const _1 = require("./index.cjs");
4
- describe('Design System React Index', () => {
5
- it('should export Button component', () => {
6
- expect(_1.Button).toBeDefined();
7
- });
8
- it('should export Text component', () => {
9
- expect(_1.Text).toBeDefined();
10
- });
11
- });
@@ -1,2 +0,0 @@
1
- export {};
2
- //# sourceMappingURL=index.test.d.cts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.test.d.cts","sourceRoot":"","sources":["../src/index.test.ts"],"names":[],"mappings":""}
@@ -1,2 +0,0 @@
1
- export {};
2
- //# sourceMappingURL=index.test.d.mts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.test.d.mts","sourceRoot":"","sources":["../src/index.test.ts"],"names":[],"mappings":""}
@@ -1,9 +0,0 @@
1
- import { Button, Text } from "./index.mjs";
2
- describe('Design System React Index', () => {
3
- it('should export Button component', () => {
4
- expect(Button).toBeDefined();
5
- });
6
- it('should export Text component', () => {
7
- expect(Text).toBeDefined();
8
- });
9
- });