@availity/mui-transitions 0.1.2 → 0.2.0

package/CHANGELOG.md

@@ -2,6 +2,16 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [0.2.0](https://github.com/Availity/element/compare/@availity/mui-transitions@0.1.2...@availity/mui-transitions@0.2.0) (2024-06-21)
+
+### Dependency Updates
+
+* `mui-typography` updated to version `0.1.2`
+
+### Features
+
+* **mui-transitions:** add Fade component ([0a6e4b9](https://github.com/Availity/element/commit/0a6e4b9b31da786f26f64a66ceef789a57d302fe))
+
 ## [0.1.2](https://github.com/Availity/element/compare/@availity/mui-transitions@0.1.1...@availity/mui-transitions@0.1.2) (2024-04-19)
 
 ## [0.1.1](https://github.com/Availity/element/compare/@availity/mui-transitions@0.1.0...@availity/mui-transitions@0.1.1) (2024-04-04)

package/dist/index.d.mts

@@ -1,6 +1,10 @@
 import { CollapseProps as CollapseProps$1 } from '@mui/material/Collapse';
+import { FadeProps as FadeProps$1 } from '@mui/material/Fade';
 
 type CollapseProps = CollapseProps$1;
 declare const Collapse: (props: CollapseProps) => JSX.Element;
 
-export { Collapse, type CollapseProps };
+type FadeProps = FadeProps$1;
+declare const Fade: (props: FadeProps) => JSX.Element;
+
+export { Collapse, type CollapseProps, Fade, type FadeProps };

package/dist/index.d.ts

@@ -1,6 +1,10 @@
 import { CollapseProps as CollapseProps$1 } from '@mui/material/Collapse';
+import { FadeProps as FadeProps$1 } from '@mui/material/Fade';
 
 type CollapseProps = CollapseProps$1;
 declare const Collapse: (props: CollapseProps) => JSX.Element;
 
-export { Collapse, type CollapseProps };
+type FadeProps = FadeProps$1;
+declare const Fade: (props: FadeProps) => JSX.Element;
+
+export { Collapse, type CollapseProps, Fade, type FadeProps };

package/dist/index.js

@@ -44,7 +44,8 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var src_exports = {};
 __export(src_exports, {
-  Collapse: () => Collapse
+  Collapse: () => Collapse,
+  Fade: () => Fade
 });
 module.exports = __toCommonJS(src_exports);
 
@@ -54,7 +55,15 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var Collapse = (props) => {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Collapse.default, __spreadValues({}, props));
 };
+
+// src/lib/Fade.tsx
+var import_Fade = __toESM(require("@mui/material/Fade"));
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var Fade = (props) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_Fade.default, __spreadValues({}, props));
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  Collapse
+  Collapse,
+  Fade
 });

package/dist/index.mjs

@@ -21,6 +21,14 @@ import { jsx } from "react/jsx-runtime";
 var Collapse = (props) => {
   return /* @__PURE__ */ jsx(MuiCollapse, __spreadValues({}, props));
 };
+
+// src/lib/Fade.tsx
+import MuiFade from "@mui/material/Fade";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var Fade = (props) => {
+  return /* @__PURE__ */ jsx2(MuiFade, __spreadValues({}, props));
+};
 export {
-  Collapse
+  Collapse,
+  Fade
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@availity/mui-transitions",
-  "version": "0.1.2",
+  "version": "0.2.0",
   "description": "Availity MUI Transitions Component - part of the @availity/element design system",
   "keywords": [
     "react",
@@ -32,6 +32,8 @@
     "publish:canary": "yarn npm publish --access public --tag canary"
   },
   "devDependencies": {
+    "@availity/mui-alert": "^0.5.13",
+    "@availity/mui-typography": "^0.2.0",
     "@mui/material": "^5.15.15",
     "react": "18.2.0",
     "react-dom": "18.2.0",

package/src/index.ts

@@ -1 +1,2 @@
 export * from './lib/Collapse';
+export * from './lib/Fade';

package/src/lib/Collapse.stories.tsx

@@ -13,7 +13,7 @@ import TableHead from '@mui/material/TableHead';
 import TableRow from '@mui/material/TableRow';
 import TableCell from '@mui/material/TableCell';
 import TableBody from '@mui/material/TableBody';
-import Alert from '@mui/material/Alert';
+import { Alert } from '@availity/mui-alert';
 
 /** Expand from the start edge of the child element. */
 const meta: Meta<typeof Collapse> = {

package/src/lib/Fade.stories.tsx

@@ -0,0 +1,34 @@
+// Each exported component in the package should have its own stories file
+
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { Alert } from '@availity/mui-alert';
+import { Fade, FadeProps } from './Fade';
+
+/** Expand from the start edge of the child element. */
+const meta: Meta<typeof Fade> = {
+  title: 'Components/Transitions/Fade',
+  component: Fade,
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+export const _Fade: StoryObj<typeof Fade> = {
+  render: (args: FadeProps) => {
+    const [visible, setVisible] = useState(true);
+
+    const onClose = () => {
+      setVisible(false);
+      setTimeout(() => setVisible(true), 1000);
+    };
+
+    return (
+      <Fade in={visible} {...args}>
+        <div>
+          <Alert onClose={onClose}>Dismissable Alert</Alert>
+        </div>
+      </Fade>
+    );
+  },
+};

package/src/lib/Fade.test.tsx

@@ -0,0 +1,14 @@
+import { render } from '@testing-library/react';
+import { Typography } from '@availity/mui-typography';
+import { Fade } from './Fade';
+
+describe('Fade', () => {
+  test('should render successfully', () => {
+    const { getByText } = render(
+      <Fade>
+        <Typography>Test</Typography>
+      </Fade>
+    );
+    expect(getByText('Test')).toBeTruthy();
+  });
+});

package/src/lib/Fade.tsx

@@ -0,0 +1,7 @@
+import MuiFade, { FadeProps as MuiFadeProps } from '@mui/material/Fade';
+
+export type FadeProps = MuiFadeProps;
+
+export const Fade = (props: FadeProps): JSX.Element => {
+  return <MuiFade {...props} />;
+};