Merge branch 'main' of github.com:Availity/element into feat/mui-6

.github/dependabot.yml

@@ -1,48 +1,51 @@
 version: 2
 updates:
+  - package-ecosystem: "github-actions"
+    directory: "/"
+    schedule:
+      interval: "monthly"
+    groups:
+      gh-actions:
+        update-types:
+          - "minor"
+          - "patch"
+          - "major"
   - package-ecosystem: npm
     directory: '/'
     schedule:
-      interval: weekly
+      interval: monthly
       time: '10:00'
     open-pull-requests-limit: 10
     groups:
-      dependencies:
-        dependency-type: "production"
-        update-types:
-          - "minor"
-          - "patch"
-      dev-dependencies:
-        dependency-type: "development"
-        update-types:
-          - "minor"
-          - "patch"
       mui:
         patterns:
           - "@mui/*"
-        update-types:
-          - "major"
+        exclude-patterns:
+          - "@mui/x-*"
       nx:
         patterns:
           - "nx"
           - "@nx/*"
-        update-types:
-          - "major"
       storybook:
         patterns:
           - "@storybook/*"
-        update-types:
-          - "major"
+          - "*storybook*"
       versioning:
         patterns:
           - "@commitlint/*"
           - "@jscutlery/semver"
           - "conventional-changelog-*"
-        update-types:
-          - "major"
       jest:
         patterns:
           - "jest"
           - "*jest*"
+      dependencies:
+        dependency-type: "production"
         update-types:
-          - "major"
+          - "minor"
+          - "patch"
+      dev-dependencies:
+        dependency-type: "development"
+        update-types:
+          - "minor"
+          - "patch"

README.md

@@ -4,7 +4,7 @@
 
 This is a collection of reusable React components intended to be used across multiple projects. These components use [@availity/design-tokens](https://github.com/Availity/element/tree/main/packages/design-tokens#readme) for styling and [Material UI](https://mui.com/) as the base.
 
-Visit our [documentation site](https://zeroheight.com/2e36e50c7/p/77f9e0-components) for more information on how to use the components.
+Visit our [documentation site](https://design.availity.com/2e36e50c7/p/77f9e0-components) for more information on how to use the components.
 
 ## Installation
 

apps/element-storybook/.storybook/ElementTheme.ts

@@ -6,7 +6,7 @@ import ElementLogo from '../../../static/availity-Element-Logo.png'
 export default create({
   base: 'light',
   brandTitle: 'Availity Element',
-  brandUrl: 'https://zeroheight.com/2e36e50c7/p/15d54a-element-design-system',
+  brandUrl: 'https://design.availity.com/2e36e50c7/p/15d54a-element-design-system',
   brandImage: ElementLogo,
   brandTarget: '_self',
 
@@ -15,7 +15,7 @@ export default create({
   colorSecondary: 'rgb(255, 103, 31)',
 
   // UI
-  appBg: 'rgb(17, 49, 90)',
+  // appBg: 'rgb(17, 49, 90)',
 
   // Text colors
   textColor: 'rgb(33, 33, 33)',

apps/element-storybook/.storybook/manager-head.html

@@ -1,4 +1,7 @@
 <style>
+  .sidebar-container {
+    background-color: rgb(17, 49, 90);
+  }
   #storybook-explorer-tree {
     & > div > div > .sidebar-item {
       margin-left: 8px;
@@ -18,7 +21,25 @@
       color: #ffffff;
     }
   }
-  #storybook-explorer-searchfield:not(:focus, :focus-visible) {
-    border-color: #ffffff;
+  .search-field {
+    #storybook-explorer-searchfield {
+      background-color: transparent;
+      color: #ffffff;
+      &:not(:focus, :focus-visible) {
+        border-color: #ffffff;
+      }
+    }
+    > svg, > code, &:focus-within > svg, &:focus-within > code {
+      color: #ffffff !important;
+      fill: #ffffff !important;
+    }
+  }
+  .search-result-item--label strong {
+    color: #ffffff;
+  }
+  #storybook-explorer-menu {
+    li > div, li > div *{
+      color: #ffffff;
+    }
   }
 </style>

apps/element-storybook/.storybook/preview.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import { themes } from '@storybook/theming';
 import { Preview } from '@storybook/react';
 import { Title, Subtitle, Description, Primary, Controls, Stories, useOf } from '@storybook/blocks';
@@ -37,7 +38,7 @@ const preview: Preview = {
       theme: themes.light,
       source: {
         excludeDecorators: true,
-        type: 'code'
+        type: 'code',
       },
       page: () => {
         // https://github.com/storybookjs/storybook/blob/next/code/ui/blocks/src/blocks/DocsPage.tsx

apps/element-storybook/src/bs4-migration/MigrationExamples.tsx

@@ -1,5 +1,7 @@
-import { useEffect, useRef, useState } from 'react';
+import { useState } from 'react';
+import { styled } from '@mui/material/styles';
 import {
+  Alert,
   Badge,
   Button,
   Chip,
@@ -25,7 +27,12 @@ import {
   Tab,
   Tabs,
   ThemeProvider,
+  TextField,
+  Input,
+  InputAdornment,
+  SearchIcon,
 } from '@availity/element';
+import { AsYouType } from 'libphonenumber-js';
 
 export const BadgeExample = () => (
   <ThemeProvider theme="legacyBS">
@@ -147,7 +154,7 @@ export const ListItemExample = () => (
       <ListItem>
         <ListItemText>ListItem</ListItemText>
       </ListItem>
-      <ListItemStatusCard>
+      <ListItemStatusCard color="success">
         <ListItemText primary="ListItemStatusCard" secondary={<StatusChip color="success" label="Approved" />} />
       </ListItemStatusCard>
     </List>
@@ -175,3 +182,64 @@ export const StepperExample = () => {
     </ThemeProvider>
   );
 };
+
+const SnackbarStoryPreview = styled('div', {
+  name: 'MuiSnackbar',
+  slot: 'Root',
+  overridesResolver: (props, styles) => styles.root,
+})({});
+
+export const SnackbarExample = () => (
+  <ThemeProvider theme="legacyBS">
+    <SnackbarStoryPreview>
+      <Alert severity="info" icon={false} onClose={() => null}>
+        Close
+      </Alert>
+    </SnackbarStoryPreview>
+  </ThemeProvider>
+);
+
+export const PhoneExample = () => {
+  const [phone, setPhone] = useState('');
+
+  const asYouFormat = (phoneString: string) => {
+    // partial parsePhoneNumber always return country code :(
+    const asYouType = new AsYouType('US');
+
+    return asYouType.input(phoneString);
+  };
+
+  const formatPhoneOnBlur = () => {
+    setPhone(asYouFormat(phone));
+  };
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setPhone(event.target.value);
+  };
+
+  return (
+    <ThemeProvider theme="legacyBS">
+      <TextField
+        type="tel"
+        label="Phone"
+        id="phone"
+        value={phone}
+        onBlur={formatPhoneOnBlur}
+        onChange={handleChange}
+        fullWidth={true}
+      />
+    </ThemeProvider>
+  );
+};
+
+export const InputGroupAddonExample = () => (
+  <ThemeProvider theme="legacyBS">
+    <Input
+      startAdornment={
+        <InputAdornment position="start">
+          <SearchIcon />
+        </InputAdornment>
+      }
+    />
+  </ThemeProvider>
+);