@availity/mui-chip 0.1.2 → 0.2.1

package/CHANGELOG.md

@@ -2,6 +2,15 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [0.2.1](https://github.com/Availity/element/compare/@availity/mui-chip@0.2.0...@availity/mui-chip@0.2.1) (2023-11-07)
+
+## [0.2.0](https://github.com/Availity/element/compare/@availity/mui-chip@0.1.2...@availity/mui-chip@0.2.0) (2023-11-02)
+
+
+### Features
+
+* **mui-chip:** break out StatusChip into a separate component ([a1ac4db](https://github.com/Availity/element/commit/a1ac4dba9c944ae7ebe3cbbbd9b1b97a89abeb11))
+
 ## [0.1.2](https://github.com/Availity/element/compare/@availity/mui-chip@0.1.1...@availity/mui-chip@0.1.2) (2023-10-06)
 
 ## [0.1.1](https://github.com/Availity/element/compare/@availity/mui-chip@0.1.0...@availity/mui-chip@0.1.1) (2023-08-23)

package/dist/index.d.ts

@@ -1,12 +1,6 @@
 import { ChipProps as ChipProps$1 } from '@mui/material';
 
-type ChipProps = {
-    /** The color of the component. Nondefault colors are only to be used with size `small`.
-     * @default default */
-    color?: 'default' | 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning';
-    /** The size of the component. Size `small` is for statuses and inline counters. */
-    size?: 'small' | 'medium';
-} & Omit<ChipProps$1, 'children' | 'color' | 'variant' | 'skipFocusWhenDisabled' | 'disabled' | 'size' | 'icon' | 'clickable'>;
-declare const Chip: ({ color, onDelete, ...rest }: ChipProps) => JSX.Element;
+type ChipProps = Omit<ChipProps$1, 'children' | 'color' | 'variant' | 'skipFocusWhenDisabled' | 'disabled' | 'size' | 'icon' | 'clickable' | 'color'>;
+declare const Chip: (props: ChipProps) => JSX.Element;
 
 export { Chip, ChipProps };

package/dist/index.js

@@ -27,12 +27,11 @@ module.exports = __toCommonJS(src_exports);
 // src/lib/Chip.tsx
 var import_material = require("@mui/material");
 var import_jsx_runtime = require("react/jsx-runtime");
-var Chip = ({ color = "default", onDelete, ...rest }) => {
+var Chip = (props) => {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Chip, {
-    color,
-    onClick: onDelete,
-    onDelete,
-    ...rest
+    ...props,
+    color: "default",
+    size: "medium"
   });
 };
 // Annotate the CommonJS export names for ESM import in node:

package/dist/index.mjs

@@ -1,12 +1,11 @@
 // src/lib/Chip.tsx
 import { Chip as MuiChip } from "@mui/material";
 import { jsx } from "react/jsx-runtime";
-var Chip = ({ color = "default", onDelete, ...rest }) => {
+var Chip = (props) => {
   return /* @__PURE__ */ jsx(MuiChip, {
-    color,
-    onClick: onDelete,
-    onDelete,
-    ...rest
+    ...props,
+    color: "default",
+    size: "medium"
   });
 };
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@availity/mui-chip",
-  "version": "0.1.2",
+  "version": "0.2.1",
   "description": "Availity MUI Chip Component - part of the @availity/element design system",
   "keywords": [
     "react",
@@ -28,11 +28,11 @@
     "dev": "tsup src/index.ts --format esm,cjs --watch --dts",
     "clean": "rm -rf dist",
     "clean:nm": "rm -rf node_modules",
-    "bundlesize": "bundlesize",
     "publish": "yarn npm publish --tolerate-republish --access public",
     "publish:canary": "yarn npm publish --access public --tag canary"
   },
   "devDependencies": {
+    "@availity/mui-avatar": "^0.1.6",
     "@mui/material": "^5.14.12",
     "react": "18.2.0",
     "react-dom": "18.2.0",

package/src/lib/Chip.stories.tsx

@@ -1,6 +1,7 @@
 import { useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
-import { Avatar, Collapse } from '@mui/material';
+import { Avatar } from '@availity/mui-avatar';
+import { Collapse } from '@mui/material';
 import { Chip, ChipProps } from './Chip';
 
 const meta: Meta<typeof Chip> = {
@@ -43,30 +44,3 @@ export const _RemovableChip: StoryObj<typeof Chip> = {
 export const _Avatar: StoryObj<typeof Chip> = {
   render: (args: ChipProps) => <Chip {...args} avatar={<Avatar>A</Avatar>} />,
 };
-
-/** Status styling is achieved by using size `small` */
-export const _Status: StoryObj<typeof Chip> = {
-  render: () => (
-    <>
-      Item 1 <Chip color="success" label="Approved" size="small" />
-      <br />
-      Item 2 <Chip color="info" label="Info" size="small" />
-      <br />
-      Item 3 <Chip color="warning" label="Pending" size="small" />
-      <br />
-      Item 4 <Chip color="error" label="Declined" size="small" />
-      <br />
-      Item 5 <Chip color="secondary" label="Neutral" size="small" />
-      <br />
-    </>
-  ),
-};
-
-/** Inline counter styling is achieved by using size `small`. For counters that affix to the corner of an element see `Badge`. */
-export const _InlineCounter: StoryObj<typeof Chip> = {
-  render: () => (
-    <div>
-      Items <Chip color="error" label="5" size="small" />
-    </div>
-  ),
-};

package/src/lib/Chip.test.tsx

@@ -6,12 +6,4 @@ describe('Chip', () => {
     const { getByText } = render(<Chip label="Test" />);
     expect(getByText('Test')).toBeTruthy();
   });
-  test('should have clickable styling when onDelete passed', () => {
-    const onDelete = () => {
-      // do nothing
-    };
-    const { getByRole } = render(<Chip label="Test" onDelete={onDelete} />);
-    expect(getByRole('button')).toBeTruthy();
-    expect(getByRole('button')).toHaveClass('MuiChip-clickable');
-  });
 });

package/src/lib/Chip.tsx

@@ -1,16 +1,10 @@
 import { Chip as MuiChip, ChipProps as MuiChipProps } from '@mui/material';
 
-export type ChipProps = {
-  /** The color of the component. Nondefault colors are only to be used with size `small`.
-   * @default default */
-  color?: 'default' | 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning';
-  /** The size of the component. Size `small` is for statuses and inline counters. */
-  size?: 'small' | 'medium';
-} & Omit<
+export type ChipProps = Omit<
   MuiChipProps,
-  'children' | 'color' | 'variant' | 'skipFocusWhenDisabled' | 'disabled' | 'size' | 'icon' | 'clickable'
+  'children' | 'color' | 'variant' | 'skipFocusWhenDisabled' | 'disabled' | 'size' | 'icon' | 'clickable' | 'color'
 >;
 
-export const Chip = ({ color = 'default', onDelete, ...rest }: ChipProps): JSX.Element => {
-  return <MuiChip color={color} onClick={onDelete} onDelete={onDelete} {...rest} />;
+export const Chip = (props: ChipProps): JSX.Element => {
+  return <MuiChip {...props} color="default" size="medium" />;
 };

package/src/lib/StatusChip.stories.tsx

@@ -0,0 +1,39 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { StatusChip, StatusChipProps } from './StatusChip';
+
+const meta: Meta<typeof StatusChip> = {
+  title: 'Components/Chip/StatusChip',
+  component: StatusChip,
+  tags: ['autodocs'],
+  args: {
+    label: 'Chip',
+    color: 'default',
+  },
+};
+
+export default meta;
+
+export const _Chip: StoryObj<typeof StatusChip> = {
+  render: (args: StatusChipProps) => <StatusChip {...args} />,
+  args: {
+    label: 'Chip',
+    color: 'primary',
+  },
+};
+
+export const _Status: StoryObj<typeof StatusChip> = {
+  render: () => (
+    <>
+      Item 1 <StatusChip color="success" label="Approved" />
+      <br />
+      Item 2 <StatusChip color="info" label="Info" />
+      <br />
+      Item 3 <StatusChip color="warning" label="Pending" />
+      <br />
+      Item 4 <StatusChip color="error" label="Declined" />
+      <br />
+      Item 5 <StatusChip color="secondary" label="Neutral" />
+      <br />
+    </>
+  ),
+};

package/src/lib/StatusChip.test.tsx

@@ -0,0 +1,9 @@
+import { render } from '@testing-library/react';
+import { Chip } from './Chip';
+
+describe('Chip', () => {
+  test('should render successfully', () => {
+    const { getByText } = render(<Chip label="Test" />);
+    expect(getByText('Test')).toBeTruthy();
+  });
+});

package/src/lib/StatusChip.tsx

@@ -0,0 +1,24 @@
+import { Chip as MuiChip, ChipProps as MuiChipProps } from '@mui/material';
+
+export type StatusChipProps = {
+  /** The color of the component.
+   * @default default */
+  color?: 'default' | 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning';
+} & Omit<
+  MuiChipProps,
+  | 'avatar'
+  | 'children'
+  | 'color'
+  | 'variant'
+  | 'skipFocusWhenDisabled'
+  | 'disabled'
+  | 'size'
+  | 'icon'
+  | 'clickable'
+  | 'deleteIcon'
+  | 'onDelete'
+>;
+
+export const StatusChip = ({ color = 'default', ...rest }: StatusChipProps): JSX.Element => {
+  return <MuiChip color={color} {...rest} size="small" />;
+};