Merge branch 'main' of github.com:Availity/element into chore/upgrade…

…-deps
Availity · Apr 16, 2024 · 352d7e1 · 352d7e1
2 parents 04c24fd + d53f794
commit 352d7e1
Show file tree

Hide file tree

Showing 7 changed files with 81 additions and 50 deletions.
diff --git a/packages/block-ui/CHANGELOG.md b/packages/block-ui/CHANGELOG.md
@@ -2,6 +2,13 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [0.1.9](https://github.com/Availity/element/compare/@availity/[email protected]...@availity/[email protected]) (2024-04-16)
+
+
+### Bug Fixes
+
+* **mui-block-ui:** update color ([fdf5197](https://github.com/Availity/element/commit/fdf51971de9e1858cd306b0970fac129bcf13db4))
+
 ## [0.1.8](https://github.com/Availity/element/compare/@availity/[email protected]...@availity/[email protected]) (2024-04-15)
 
 ### Dependency Updates

diff --git a/packages/block-ui/package.json b/packages/block-ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@availity/mui-block-ui",
-  "version": "0.1.8",
+  "version": "0.1.9",
   "description": "Availity MUI BlockUi Component - part of the @availity/element design system",
   "keywords": [
     "react",

diff --git a/packages/block-ui/project.json b/packages/block-ui/project.json
@@ -33,7 +33,8 @@
         "preset": "conventional",
         "commitMessageFormat": "chore({projectName}): release version ${version} [skip ci]",
         "tagPrefix": "@availity/{projectName}@",
-        "trackDeps": true
+        "trackDeps": true,
+        "skipCommitTypes": ["docs"]
       }
     }
   }

diff --git a/packages/block-ui/src/lib/BlockUi.stories.tsx b/packages/block-ui/src/lib/BlockUi.stories.tsx
@@ -1,4 +1,5 @@
 // Each exported component in the package should have its own stories file
+import { useEffect, useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import { Paper } from '@availity/mui-paper';
 import { Button } from '@availity/mui-button';
@@ -16,52 +17,62 @@ export default meta;
 
 export const _BlockUi: StoryObj<typeof BlockUi> = {
   render: (args: BlockUiProps) => {
+    const [blocking, setBlocking] = useState(args.blocking);
+
+    useEffect(() => {
+      setBlocking(args.blocking);
+    }, [args.blocking]);
+
     return (
-      <BlockUi {...args}>
-        <Paper sx={{ padding: '1.5rem', minHeight: '250px' }}>
-          <Typography variant="h1">Header</Typography>
-          <Typography paragraph>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sem mauris, sollicitudin sit amet lacus
-            vel, sollicitudin tincidunt mi. Mauris risus nisi, sagittis id augue sit amet, venenatis volutpat dui. Etiam
-            commodo vel lectus eget ornare. Donec laoreet urna eu velit condimentum viverra. Curabitur ut pulvinar
-            ipsum, vitae laoreet nulla. Nam in nisl sit amet leo dignissim tempor. Donec imperdiet est odio, ac aliquam
-            libero eleifend at. Pellentesque tempor semper nulla vel fermentum. Pellentesque viverra, neque vel laoreet
-            sollicitudin, massa lacus ultricies lectus, quis rutrum odio orci vitae turpis. Donec rhoncus dui nec ex
-            porta, vel porta odio suscipit.
-          </Typography>
-          <Typography paragraph>
-            Vestibulum nec lectus ac metus semper tempus. Aliquam porttitor odio at eros condimentum lobortis. Mauris
-            lectus nibh, feugiat sit amet metus at, auctor placerat enim. Mauris finibus elit vel orci tincidunt
-            euismod. Duis mollis dolor lectus, nec rutrum nisi porta pharetra. Mauris dictum aliquet diam et molestie.
-            In hac habitasse platea dictumst. Quisque pulvinar semper diam, ut euismod felis congue ut. Integer eget
-            tortor a justo volutpat pellentesque. Duis a egestas arcu, sed bibendum ipsum. Duis rhoncus nulla nec
-            euismod venenatis. Praesent tincidunt neque vitae justo commodo, sed sollicitudin ante iaculis.
-          </Typography>
-          <Typography paragraph>
-            Duis eu lorem scelerisque, lacinia nulla quis, tristique ex. Integer ipsum nisl, consectetur vel rhoncus
-            vel, scelerisque nec justo. Cras bibendum tempor magna, non dictum quam facilisis eget. Curabitur nec odio
-            nec leo dapibus commodo a sed sem. Suspendisse accumsan sollicitudin ante, vel rutrum orci blandit ut. Nulla
-            sed magna mauris. Proin nec dignissim urna, sit amet tempor libero. Morbi commodo urna et porta porta.
-            Mauris fermentum, dui eu ullamcorper blandit, neque urna laoreet ante, semper interdum magna orci id velit.
-            Etiam in cursus eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos
-            himenaeos. Duis massa lacus, vulputate sit amet euismod sit amet, pharetra id sem. In hac habitasse platea
-            dictumst. Praesent purus sem, sagittis malesuada nulla sed, congue hendrerit orci. Vestibulum imperdiet,
-            urna a tempor efficitur, nibh nulla efficitur leo, id faucibus tortor quam a erat. Ut eget purus augue.
-          </Typography>
-          <Typography paragraph>
-            Maecenas dapibus sollicitudin gravida. Nunc bibendum erat id est tincidunt varius. Nullam nulla ante,
-            fringilla a suscipit in, commodo sed sapien. Morbi id ornare nibh. Orci varius natoque penatibus et magnis
-            dis parturient montes, nascetur ridiculus mus. Etiam tincidunt ipsum id mi lacinia, at placerat mi
-            ullamcorper. Nam vel purus a enim consectetur posuere sit amet a lacus. Curabitur euismod aliquam nisl vel
-            feugiat. Nulla venenatis orci ac fringilla tincidunt. Curabitur pulvinar vehicula ipsum, sit amet molestie
-            nisi consectetur id. Pellentesque vel mi in purus varius pharetra. Cras nibh nunc, tincidunt vitae erat sit
-            amet, consequat dapibus nisl. Nulla quam mi, rutrum non bibendum at, facilisis eget est. Praesent vestibulum
-            dictum sapien quis dictum. Morbi nulla lorem, ultricies bibendum augue at, pulvinar volutpat mi. Donec
-            gravida est ac leo maximus maximus.
-          </Typography>
-          <Button>Click</Button>
-        </Paper>
-      </BlockUi>
+      <>
+        <BlockUi {...args} blocking={blocking}>
+          <Paper sx={{ padding: '1.5rem', minHeight: '250px' }}>
+            <Typography variant="h1">Header</Typography>
+            <Typography paragraph>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sem mauris, sollicitudin sit amet
+              lacus vel, sollicitudin tincidunt mi. Mauris risus nisi, sagittis id augue sit amet, venenatis volutpat
+              dui. Etiam commodo vel lectus eget ornare. Donec laoreet urna eu velit condimentum viverra. Curabitur ut
+              pulvinar ipsum, vitae laoreet nulla. Nam in nisl sit amet leo dignissim tempor. Donec imperdiet est odio,
+              ac aliquam libero eleifend at. Pellentesque tempor semper nulla vel fermentum. Pellentesque viverra, neque
+              vel laoreet sollicitudin, massa lacus ultricies lectus, quis rutrum odio orci vitae turpis. Donec rhoncus
+              dui nec ex porta, vel porta odio suscipit.
+            </Typography>
+            <Typography paragraph>
+              Vestibulum nec lectus ac metus semper tempus. Aliquam porttitor odio at eros condimentum lobortis. Mauris
+              lectus nibh, feugiat sit amet metus at, auctor placerat enim. Mauris finibus elit vel orci tincidunt
+              euismod. Duis mollis dolor lectus, nec rutrum nisi porta pharetra. Mauris dictum aliquet diam et molestie.
+              In hac habitasse platea dictumst. Quisque pulvinar semper diam, ut euismod felis congue ut. Integer eget
+              tortor a justo volutpat pellentesque. Duis a egestas arcu, sed bibendum ipsum. Duis rhoncus nulla nec
+              euismod venenatis. Praesent tincidunt neque vitae justo commodo, sed sollicitudin ante iaculis.
+            </Typography>
+            <Typography paragraph>
+              Duis eu lorem scelerisque, lacinia nulla quis, tristique ex. Integer ipsum nisl, consectetur vel rhoncus
+              vel, scelerisque nec justo. Cras bibendum tempor magna, non dictum quam facilisis eget. Curabitur nec odio
+              nec leo dapibus commodo a sed sem. Suspendisse accumsan sollicitudin ante, vel rutrum orci blandit ut.
+              Nulla sed magna mauris. Proin nec dignissim urna, sit amet tempor libero. Morbi commodo urna et porta
+              porta. Mauris fermentum, dui eu ullamcorper blandit, neque urna laoreet ante, semper interdum magna orci
+              id velit. Etiam in cursus eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
+              inceptos himenaeos. Duis massa lacus, vulputate sit amet euismod sit amet, pharetra id sem. In hac
+              habitasse platea dictumst. Praesent purus sem, sagittis malesuada nulla sed, congue hendrerit orci.
+              Vestibulum imperdiet, urna a tempor efficitur, nibh nulla efficitur leo, id faucibus tortor quam a erat.
+              Ut eget purus augue.
+            </Typography>
+            <Typography paragraph>
+              Maecenas dapibus sollicitudin gravida. Nunc bibendum erat id est tincidunt varius. Nullam nulla ante,
+              fringilla a suscipit in, commodo sed sapien. Morbi id ornare nibh. Orci varius natoque penatibus et magnis
+              dis parturient montes, nascetur ridiculus mus. Etiam tincidunt ipsum id mi lacinia, at placerat mi
+              ullamcorper. Nam vel purus a enim consectetur posuere sit amet a lacus. Curabitur euismod aliquam nisl vel
+              feugiat. Nulla venenatis orci ac fringilla tincidunt. Curabitur pulvinar vehicula ipsum, sit amet molestie
+              nisi consectetur id. Pellentesque vel mi in purus varius pharetra. Cras nibh nunc, tincidunt vitae erat
+              sit amet, consequat dapibus nisl. Nulla quam mi, rutrum non bibendum at, facilisis eget est. Praesent
+              vestibulum dictum sapien quis dictum. Morbi nulla lorem, ultricies bibendum augue at, pulvinar volutpat
+              mi. Donec gravida est ac leo maximus maximus.
+            </Typography>
+            <Button>Click</Button>
+          </Paper>
+        </BlockUi>
+        <Button onClick={() => setBlocking((prev) => !prev)}>Toggle Blocking</Button>
+      </>
     );
   },
   args: {

diff --git a/packages/block-ui/src/lib/BlockUi.tsx b/packages/block-ui/src/lib/BlockUi.tsx
@@ -30,7 +30,9 @@ const BlockUiContainer = styled('div')({
 const BlockUiOverlay = styled('div')({
   width: '100%',
   height: '100%',
-  backgroundColor: 'rgb(0, 0, 0, 0.55)',
+  opacity: '0.5',
+  filter: 'alpha(opacity=50)',
+  backgroundColor: 'white',
 });
 
 const BlockUiMessageContainer = styled('div')<{ top?: string | number }>(({ top = '50%' }) => ({
@@ -44,7 +46,7 @@ const BlockUiMessageContainer = styled('div')<{ top?: string | number }>(({ top
 }));
 
 const BlockUiMessage = styled('div')({
-  color: 'white',
+  color: '#333',
   background: 'none',
   zIndex: '1011',
 });

diff --git a/packages/element/CHANGELOG.md b/packages/element/CHANGELOG.md
@@ -2,6 +2,16 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [0.37.12](https://github.com/Availity/element/compare/@availity/[email protected]...@availity/[email protected]) (2024-04-16)
+
+### Dependency Updates
+
+* `mui-block-ui` updated to version `0.1.9`
+## [0.37.11](https://github.com/Availity/element/compare/@availity/[email protected]...@availity/[email protected]) (2024-04-16)
+
+### Dependency Updates
+
+* `mui-block-ui` updated to version `0.1.9`
 ## [0.37.10](https://github.com/Availity/element/compare/@availity/[email protected]...@availity/[email protected]) (2024-04-15)
 
 ### Dependency Updates

diff --git a/packages/element/package.json b/packages/element/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@availity/element",
-  "version": "0.37.10",
+  "version": "0.37.12",
   "browser": "./dist/index.js",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",