@availity/mui-disclaimer 0.1.0

package/CHANGELOG.md

@@ -0,0 +1,14 @@
+# Changelog
+
+This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
+
+## 0.1.0 (2024-06-12)
+
+### Dependency Updates
+
+* `mui-link` updated to version `0.1.0`
+* `mui-typography` updated to version `0.1.0`
+
+### Features
+
+* **mui-disclaimer:** add disclaimer component ([841e989](https://github.com/Availity/element/commit/841e98900adc535171fc82865a931d802ddab96c))

package/README.md

@@ -0,0 +1,61 @@
+# @availity/mui-disclaimer
+
+> Availity MUI Disclaimer component to be used with @availity/element design system.
+
+[![Version](https://img.shields.io/npm/v/@availity/mui-disclaimer.svg?style=for-the-badge)](https://www.npmjs.com/package/@availity/mui-disclaimer)
+[![NPM Downloads](https://img.shields.io/npm/dt/@availity/mui-disclaimer.svg?style=for-the-badge)](https://www.npmjs.com/package/@availity/mui-disclaimer)
+[![Dependency Status](https://img.shields.io/librariesio/release/npm/@availity/mui-disclaimer?style=for-the-badge)](https://github.com/Availity/element/blob/main/packages/mui-disclaimer/package.json)
+
+## Documentation
+
+This package extends the MUI Disclaimer component: [MUI Disclaimer Docs](https://mui.com/components/disclaimer/)
+
+Live demo and documentation in our [Storybook](https://availity.github.io/element/?path=/docs/components-disclaimer-introduction--docs)
+
+Availity standards for design and usage can be found in the [Availity Design Guide](https://zeroheight.com/2e36e50c7)
+
+## Installation
+
+### Import Through @availity/element (Recommended)
+
+#### NPM
+
+```bash
+npm install @availity/element
+```
+
+#### Yarn
+
+```bash
+yarn add @availity/element
+```
+
+### Direct Import
+
+#### NPM
+
+_This package has a few peer dependencies. Add `@mui/material` & `@emotion/react` to your project if not already installed._
+
+```bash
+npm install @availity/mui-disclaimer
+```
+
+#### Yarn
+
+```bash
+yarn add @availity/mui-disclaimer
+```
+
+### Usage
+
+#### Import through @availity/element
+
+```tsx
+import { Disclaimer } from '@availity/element';
+```
+
+#### Direct import
+
+```tsx
+import { Disclaimer } from '@availity/mui-disclaimer';
+```

package/dist/index.d.mts

@@ -0,0 +1,19 @@
+import { LinkProps } from '@availity/mui-link';
+
+type AvDisclaimerProps = {
+    /** If true, the warning accent display on the left  */
+    accent?: boolean;
+    /** If true, the Disclaimer displays with less padding  */
+    dense?: boolean;
+};
+interface DisclaimerProps extends AvDisclaimerProps {
+    /** The text to display in the header */
+    headerText?: string;
+    /** The text to display in the body */
+    description: string;
+    /** The link to display */
+    link?: LinkProps;
+}
+declare const Disclaimer: ({ accent, dense, description, headerText, link, ...rest }: DisclaimerProps) => JSX.Element;
+
+export { Disclaimer, type DisclaimerProps };

package/dist/index.d.ts

@@ -0,0 +1,19 @@
+import { LinkProps } from '@availity/mui-link';
+
+type AvDisclaimerProps = {
+    /** If true, the warning accent display on the left  */
+    accent?: boolean;
+    /** If true, the Disclaimer displays with less padding  */
+    dense?: boolean;
+};
+interface DisclaimerProps extends AvDisclaimerProps {
+    /** The text to display in the header */
+    headerText?: string;
+    /** The text to display in the body */
+    description: string;
+    /** The link to display */
+    link?: LinkProps;
+}
+declare const Disclaimer: ({ accent, dense, description, headerText, link, ...rest }: DisclaimerProps) => JSX.Element;
+
+export { Disclaimer, type DisclaimerProps };

package/dist/index.js

@@ -0,0 +1,109 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  Disclaimer: () => Disclaimer
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/lib/Disclaimer.tsx
+var import_mui_typography = require("@availity/mui-typography");
+var import_mui_link = require("@availity/mui-link");
+var import_styles = require("@mui/material/styles");
+var import_jsx_runtime = require("react/jsx-runtime");
+var AvDisclaimer = (0, import_styles.styled)("div", {
+  name: "AvDisclaimer",
+  slot: "root",
+  overridesResolver: (props, styles) => [styles.root, props.accent && styles.accent, props.dense && styles.dense]
+})({});
+var AvDisclaimerHeader = (0, import_styles.styled)(import_mui_typography.Typography, {
+  name: "AvDisclaimer",
+  slot: "header"
+})(({ ownerState }) => ({
+  marginBottom: ownerState.dense ? "4px" : "8px"
+}));
+var AvDisclaimerLink = (0, import_styles.styled)(import_mui_link.Link, {
+  name: "AvDisclaimer",
+  slot: "link"
+})(({ ownerState }) => ({
+  marginTop: ownerState.dense ? "8px" : "16px",
+  display: "block"
+}));
+var Disclaimer = (_a) => {
+  var _b = _a, {
+    accent = true,
+    dense = false,
+    description,
+    headerText,
+    link
+  } = _b, rest = __objRest(_b, [
+    "accent",
+    "dense",
+    "description",
+    "headerText",
+    "link"
+  ]);
+  let textVariant = "body1";
+  let headerVariant = "h5";
+  if (dense) {
+    textVariant = "body2";
+    headerVariant = "h6";
+  }
+  const ownerState = { dense };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(AvDisclaimer, __spreadProps(__spreadValues({ accent, dense }, rest), { children: [
+    headerText && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AvDisclaimerHeader, { variant: headerVariant, ownerState, color: "text.secondary", children: headerText }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_mui_typography.Typography, { variant: textVariant, color: "text.secondary", children: description }),
+    link && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AvDisclaimerLink, __spreadProps(__spreadValues({ ownerState }, link), { iconPosition: "end", variant: textVariant }))
+  ] }));
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Disclaimer
+});

package/dist/index.mjs

@@ -0,0 +1,85 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+
+// src/lib/Disclaimer.tsx
+import { Typography } from "@availity/mui-typography";
+import { Link } from "@availity/mui-link";
+import { styled } from "@mui/material/styles";
+import { jsx, jsxs } from "react/jsx-runtime";
+var AvDisclaimer = styled("div", {
+  name: "AvDisclaimer",
+  slot: "root",
+  overridesResolver: (props, styles) => [styles.root, props.accent && styles.accent, props.dense && styles.dense]
+})({});
+var AvDisclaimerHeader = styled(Typography, {
+  name: "AvDisclaimer",
+  slot: "header"
+})(({ ownerState }) => ({
+  marginBottom: ownerState.dense ? "4px" : "8px"
+}));
+var AvDisclaimerLink = styled(Link, {
+  name: "AvDisclaimer",
+  slot: "link"
+})(({ ownerState }) => ({
+  marginTop: ownerState.dense ? "8px" : "16px",
+  display: "block"
+}));
+var Disclaimer = (_a) => {
+  var _b = _a, {
+    accent = true,
+    dense = false,
+    description,
+    headerText,
+    link
+  } = _b, rest = __objRest(_b, [
+    "accent",
+    "dense",
+    "description",
+    "headerText",
+    "link"
+  ]);
+  let textVariant = "body1";
+  let headerVariant = "h5";
+  if (dense) {
+    textVariant = "body2";
+    headerVariant = "h6";
+  }
+  const ownerState = { dense };
+  return /* @__PURE__ */ jsxs(AvDisclaimer, __spreadProps(__spreadValues({ accent, dense }, rest), { children: [
+    headerText && /* @__PURE__ */ jsx(AvDisclaimerHeader, { variant: headerVariant, ownerState, color: "text.secondary", children: headerText }),
+    /* @__PURE__ */ jsx(Typography, { variant: textVariant, color: "text.secondary", children: description }),
+    link && /* @__PURE__ */ jsx(AvDisclaimerLink, __spreadProps(__spreadValues({ ownerState }, link), { iconPosition: "end", variant: textVariant }))
+  ] }));
+};
+export {
+  Disclaimer
+};

package/introduction.stories.mdx

@@ -0,0 +1,7 @@
+import { Markdown } from '@storybook/blocks';
+import { Meta } from '@storybook/addon-docs';
+import ReadMe from './README.md?raw';
+
+<Meta title="Components/Disclaimer/Introduction" />
+
+<Markdown>{ReadMe}</Markdown>

package/jest.config.js

@@ -0,0 +1,7 @@
+const global = require('../../jest.config.global');
+
+module.exports = {
+  ...global,
+  displayName: 'disclaimer',
+  coverageDirectory: '../../coverage/disclaimer',
+};

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@availity/mui-disclaimer",
+  "version": "0.1.0",
+  "description": "Availity MUI Disclaimer Component - part of the @availity/element design system",
+  "keywords": [
+    "react",
+    "typescript",
+    "availity",
+    "mui"
+  ],
+  "homepage": "https://availity.github.io/element/?path=/docs/components-disclaimer-introduction--docs",
+  "bugs": {
+    "url": "https://github.com/Availity/element/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Availity/element.git",
+    "directory": "packages/disclaimer"
+  },
+  "license": "MIT",
+  "author": "Availity Developers <AVOSS@availity.com>",
+  "browser": "./dist/index.js",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "scripts": {
+    "build": "tsup src/index.ts --format esm,cjs --dts",
+    "dev": "tsup src/index.ts --format esm,cjs --watch --dts",
+    "clean": "rm -rf dist",
+    "clean:nm": "rm -rf node_modules",
+    "publish": "yarn npm publish --tolerate-republish --access public",
+    "publish:canary": "yarn npm publish --access public --tag canary"
+  },
+  "devDependencies": {
+    "@mui/material": "^5.15.15",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "tsup": "^8.0.2",
+    "typescript": "^5.4.5"
+  },
+  "peerDependencies": {
+    "@mui/material": "^5.11.9",
+    "react": ">=16.3.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@availity/mui-link": "^0.4.0",
+    "@availity/mui-typography": "^0.1.8"
+  }
+}

package/project.json

@@ -0,0 +1,41 @@
+{
+  "name": "mui-disclaimer",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "packages/disclaimer/src",
+  "projectType": "library",
+  "tags": [],
+  "targets": {
+    "lint": {
+      "executor": "@nx/eslint:lint",
+      "options": {
+        "eslintConfig": ".eslintrc.json",
+        "silent": false,
+        "fix": false,
+        "cache": true,
+        "cacheLocation": "./node_modules/.cache/disclaimer/.eslintcache",
+        "maxWarnings": -1,
+        "quiet": false,
+        "noEslintrc": false,
+        "hasTypeAwareRules": true,
+        "cacheStrategy": "metadata"
+      }
+    },
+    "test": {
+      "executor": "@nx/jest:jest",
+      "outputs": ["{workspaceRoot}/coverage/disclaimer"],
+      "options": {
+        "jestConfig": "packages/disclaimer/jest.config.js"
+      }
+    },
+    "version": {
+      "executor": "@jscutlery/semver:version",
+      "options": {
+        "preset": "conventional",
+        "commitMessageFormat": "chore({projectName}): release version ${version} [skip ci]",
+        "tagPrefix": "@availity/{projectName}@",
+        "trackDeps": true,
+        "skipCommitTypes": ["docs"]
+      }
+    }
+  }
+}

package/src/index.ts

@@ -0,0 +1 @@
+export * from './lib/Disclaimer';

package/src/lib/Disclaimer.stories.tsx

@@ -0,0 +1,25 @@
+// Each exported component in the package should have its own stories file
+
+import type { Meta, StoryObj } from '@storybook/react';
+import { Disclaimer, DisclaimerProps } from './Disclaimer';
+
+const meta: Meta<typeof Disclaimer> = {
+  title: 'Components/Disclaimer/Disclaimer',
+  component: Disclaimer,
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+export const _Disclaimer: StoryObj<typeof Disclaimer> = {
+  render: (args: DisclaimerProps) => <Disclaimer {...args} />,
+  args: {
+    description: 'A description about the disclaimer.',
+    headerText: 'This is a header',
+    link: {
+      href: '#',
+      children: 'A link',
+      target: '_blank',
+    },
+  },
+};

package/src/lib/Disclaimer.test.tsx

@@ -0,0 +1,26 @@
+import { render } from '@testing-library/react';
+import { Disclaimer } from './Disclaimer';
+
+describe('Disclaimer', () => {
+  test('should render successfully', () => {
+    const { getByText } = render(
+      <Disclaimer headerText="header" description="test" link={{ href: '#', children: 'a link' }} />
+    );
+    expect(getByText('test')).toBeTruthy();
+    expect(getByText('test').classList.contains('MuiTypography-body1')).toBeTruthy();
+    expect(getByText('header')).toBeTruthy();
+    expect(getByText('header').tagName).toBe('H5');
+    expect(getByText('a link')).toBeTruthy();
+  });
+
+  test('should render dense successfully', () => {
+    const { getByText } = render(
+      <Disclaimer dense headerText="header" description="test" link={{ href: '#', children: 'a link' }} />
+    );
+    expect(getByText('test')).toBeTruthy();
+    expect(getByText('test').classList.contains('MuiTypography-body2')).toBeTruthy();
+    expect(getByText('header')).toBeTruthy();
+    expect(getByText('header').tagName).toBe('H6');
+    expect(getByText('a link')).toBeTruthy();
+  });
+});

package/src/lib/Disclaimer.tsx

@@ -0,0 +1,82 @@
+// For bundling purposes, always use the direct import for an mui component, i.e. '@mui/material/xxx'
+import { Typography, TypographyProps } from '@availity/mui-typography';
+import { Link, LinkProps } from '@availity/mui-link';
+import { styled } from '@mui/material/styles';
+
+type AvDisclaimerProps = {
+  /** If true, the warning accent display on the left  */
+  accent?: boolean;
+  /** If true, the Disclaimer displays with less padding  */
+  dense?: boolean;
+};
+
+export interface DisclaimerProps extends AvDisclaimerProps {
+  /** The text to display in the header */
+  headerText?: string;
+  /** The text to display in the body */
+  description: string;
+  /** The link to display */
+  link?: LinkProps;
+}
+
+interface AvDisclaimerHeaderProps extends TypographyProps {
+  ownerState: { dense: boolean };
+}
+
+interface AvDisclaimerLinkProps extends LinkProps {
+  ownerState: { dense: boolean };
+}
+
+const AvDisclaimer = styled('div', {
+  name: 'AvDisclaimer',
+  slot: 'root',
+  overridesResolver: (props, styles) => [styles.root, props.accent && styles.accent, props.dense && styles.dense],
+})<AvDisclaimerProps>({});
+
+const AvDisclaimerHeader = styled(Typography, {
+  name: 'AvDisclaimer',
+  slot: 'header',
+})<AvDisclaimerHeaderProps>(({ ownerState }: { ownerState: { dense: boolean } }) => ({
+  marginBottom: ownerState.dense ? '4px' : '8px',
+}));
+
+const AvDisclaimerLink = styled(Link, {
+  name: 'AvDisclaimer',
+  slot: 'link',
+})<AvDisclaimerLinkProps>(({ ownerState }: { ownerState: { dense: boolean } }) => ({
+  marginTop: ownerState.dense ? '8px' : '16px',
+  display: 'block',
+}));
+
+export const Disclaimer = ({
+  accent = true,
+  dense = false,
+  description,
+  headerText,
+  link,
+  ...rest
+}: DisclaimerProps): JSX.Element => {
+  let textVariant: 'body1' | 'body2' = 'body1';
+  let headerVariant: 'h5' | 'h6' = 'h5';
+
+  if (dense) {
+    textVariant = 'body2';
+    headerVariant = 'h6';
+  }
+
+  const ownerState = { dense };
+
+  return (
+    <AvDisclaimer accent={accent} dense={dense} {...rest}>
+      {headerText && (
+        <AvDisclaimerHeader variant={headerVariant} ownerState={ownerState} color="text.secondary">
+          {headerText}
+        </AvDisclaimerHeader>
+      )}
+      <Typography variant={textVariant} color="text.secondary">
+        {description}
+      </Typography>
+      {link && <AvDisclaimerLink ownerState={ownerState} {...link} iconPosition="end" variant={textVariant} />}
+    </AvDisclaimer>
+  );
+};

package/tsconfig.json

@@ -0,0 +1,5 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "include": ["."],
+  "exclude": ["dist", "build", "node_modules"]
+}

package/tsconfig.spec.json

@@ -0,0 +1,10 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "module": "commonjs",
+    "types": ["jest", "node", "@testing-library/jest-dom"],
+    "allowJs": true
+  },
+  "include": ["**/*.test.js", "**/*.test.ts", "**/*.test.tsx", "**/*.d.ts"]
+}