Merge branch '0.16.x' into Fix/FormElementsAccessibilityError

.changeset/clever-worms-breathe.md

@@ -0,0 +1,5 @@
+---
+'@smile/haring-react': minor
+---
+
+Accessibility Correction unsupported ARIA attributes

.changeset/curvy-zoos-stare.md

@@ -0,0 +1,5 @@
+---
+'@smile/haring-react': minor
+---
+
+make corrections to color contrasts

.changeset/heavy-cows-pay.md

@@ -0,0 +1,5 @@
+---
+'@smile/haring-react-table': minor
+---
+
+Accessibility corrections to table header text

.changeset/khaki-planets-design.md

@@ -0,0 +1,5 @@
+---
+'@smile/haring-react': minor
+---
+
+correction to dropdownMenu role

.changeset/lazy-coins-camp.md

@@ -0,0 +1,5 @@
+---
+'@smile/haring-react': minor
+---
+
+Creating a floating menu

packages/haring-react-table/src/Components/Table/Table.tsx

@@ -135,7 +135,6 @@ export function Table<Data extends Record<string, unknown>>(
   const table = useMantineReactTable({
     displayColumnDefOptions: {
       'mrt-row-actions': {
-        header: undefined,
         size: 124,
       },
     },

packages/haring-react-table/src/Components/Table/__snapshots__/Table.test.tsx.snap

@@ -855,7 +855,9 @@ exports[`Table matches snapshot 1`] = `
                 >
                   <div
                     class="mrt-table-head-cell-content-wrapper MRT_TableHeadCell-module_content-wrapper__py6aJ MRT_TableHeadCell-module_content-wrapper-nowrap__-4aIg m_8bffd616 mantine-Flex-root __m__-r5l"
-                  />
+                  >
+                    Actions
+                  </div>
                 </div>
                 <div
                   class="mrt-table-head-cell-content-actions MRT_TableHeadCell-module_content-actions__utxbm m_8bffd616 mantine-Flex-root __m__-r5n"

packages/haring-react-table/src/Components/TableGridView/__snapshots__/TableGridView.test.tsx.snap

@@ -954,7 +954,9 @@ exports[`TableGridView matches snapshot 1`] = `
                     >
                       <div
                         class="mrt-table-head-cell-content-wrapper MRT_TableHeadCell-module_content-wrapper__py6aJ MRT_TableHeadCell-module_content-wrapper-nowrap__-4aIg m_8bffd616 mantine-Flex-root __m__-r6q"
-                      />
+                      >
+                        Actions
+                      </div>
                     </div>
                     <div
                       class="mrt-table-head-cell-content-actions MRT_TableHeadCell-module_content-actions__utxbm m_8bffd616 mantine-Flex-root __m__-r6s"

packages/haring-react/src/Components/CardHeader/CardHeader.stories.tsx

@@ -27,7 +27,7 @@ const meta = {
               </Badge>
             </Group>
 
-            <Text color="dimmed" size="sm">
+            <Text c="dark.3" size="sm">
               With Fjord Tours you can explore more of the magical fjord
               landscapes with tours and activities on and around the fjords of
               Norway

packages/haring-react/src/Components/CollapseButton/CollapseButtonControlled.tsx

@@ -83,7 +83,6 @@ export function CollapseButtonControlled<
   return (
     <>
       <Button
-        aria-expanded={opened ? 'true' : 'false'}
         classNames={{
           label: labelClasses.join(' '),
           root: rootClasses.join(' '),

packages/haring-react/src/Components/CollapseButton/__snapshots__/CollapseButton.test.tsx.snap

@@ -13,7 +13,6 @@ exports[`CollapseButton matches snapshot 1`] = `
     @media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}
   </style>
   <div
-    aria-expanded="false"
     class="haring-focus haring-active m_77c9d27d mantine-Button-root m_87cf2631 mantine-UnstyledButton-root"
     data-block="true"
     data-size="md"

packages/haring-react/src/Components/DataBadge/DataBadge.stories.tsx

@@ -1,11 +1,15 @@
 import type { Meta, StoryObj } from '@storybook/react';
 
+import { DEFAULT_THEME } from '@mantine/core';
+
 import { DataBadge as Cmp } from './DataBadge';
 
+const colorOptions = Object.keys(DEFAULT_THEME.colors);
 const meta = {
   argTypes: {
     color: {
-      control: { type: 'color' },
+      control: 'select',
+      options: colorOptions,
     },
   },
   component: Cmp,

packages/haring-react/src/Components/DropdownButton/DropdownButton.tsx

@@ -12,6 +12,7 @@ export interface IDropdownButtonProps extends MenuProps {
   buttonComponent?: ReactNode;
   children?: ReactNode;
   label?: string;
+  role?: string;
 }
 
 /** Additional props will be forwarded to the [Mantine Menu component](https://mantine.dev/core/menu) */

packages/haring-react/src/Components/FloatingMenu/FloatingMenu.mock.tsx

@@ -0,0 +1,34 @@
+export const floatingMenuLabelMock = {
+  children: [
+    {
+      hasModal: true,
+      href: '',
+      id: 0,
+      text: 'Document',
+    },
+    {
+      hasModal: false,
+      href: 'https://mantine.dev#1',
+      id: 1,
+      text: 'Favoris ',
+    },
+    {
+      hasModal: true,
+      href: '',
+      id: 2,
+      text: 'Archives',
+    },
+    {
+      hasModal: false,
+      href: 'https://mantine.dev#2',
+      id: 3,
+      text: 'Contrats',
+    },
+    {
+      hasModal: true,
+      href: '',
+      id: 4,
+      text: 'Aide',
+    },
+  ],
+};

packages/haring-react/src/Components/FloatingMenu/FloatingMenu.module.css

@@ -0,0 +1,175 @@
+.isOpened {
+  position: relative;
+  justify-content: center;
+  align-items: center;
+  color: white;
+  background-color: var(--mantine-color-cyan-9);
+
+  .floatingMenuLabel {
+    display: block;
+    color: #fff;
+  }
+
+  .floatingMenuButton {
+    color: #fff;
+  }
+  /* noinspection CssInvalidAtRule    */
+  @mixin larger-than $mantine-breakpoint-xs {
+    align-items: flex-start;
+    border-radius: 28px 0px 0px 28px;
+
+    svg {
+      flex: 1 0 25px;
+    }
+  }
+}
+.floatingMenuContainer {
+  position: fixed;
+  bottom: 0;
+  justify-content: space-around;
+  align-items: self-start;
+  flex-direction: row;
+  background-color: white;
+  width: 100%;
+  z-index: 190;
+
+  /*noinspection CssInvalidAtRule*/
+  @mixin larger-than $mantine-breakpoint-xs {
+    justify-content: space-evenly;
+    flex-direction: column;
+    top: 50%;
+    width: 56px;
+    height: max-content;
+    box-shadow: -6px 6px 7px 3px #00000008;
+    transform: translateY(-50%);
+    gap: 5px;
+  }
+}
+@mixin larger-than $mantine-breakpoint-xs {
+  .left {
+    left: 0;
+    border-radius: 0px 8px 8px 0px;
+    .floatingMenuItem {
+      left: calc(-138px + 56px);
+      transition: left 0.3s ease;
+    }
+
+    .floatingMenuItem {
+      justify-content: flex-end;
+      align-items: center;
+
+      &:hover,
+      &.isOpened {
+        justify-content: flex-start;
+        border-radius: 0px 28px 28px 0px;
+        left: 0;
+
+        .floatingMenuLabel {
+          display: block;
+          color: #fff;
+        }
+
+        .floatingMenuButton {
+          color: #fff;
+        }
+      }
+    }
+
+    .floatingMenuButton {
+      span {
+        justify-content: flex-start;
+        flex-direction: row-reverse;
+      }
+    }
+  }
+
+  .right {
+    right: 0;
+    border-radius: 8px 0px 0px 8px;
+
+    .floatingMenuItem {
+      right: 0;
+      transition: right 0.3s ease;
+
+      &:hover,
+      &.isOpened {
+        flex-direction: column;
+        border-radius: 28px 0px 0px 28px;
+        right: calc(138px - 56px);
+
+        .floatingMenuLabel {
+          display: block;
+          color: #fff;
+        }
+
+        .floatingMenuButton {
+          color: #fff;
+        }
+      }
+    }
+  }
+}
+.floatingMenuItem {
+  position: relative;
+  padding: 10px 5px;
+  justify-content: space-between;
+  height: 100%;
+
+  span {
+    flex-direction: column;
+    max-width: 84px;
+    justify-content: flex-start;
+    align-items: center;
+    text-align: center;
+    gap: 5px;
+  }
+
+  &:hover {
+    position: relative;
+    justify-content: center;
+    align-items: center;
+    color: white;
+    background-color: var(--mantine-color-cyan-9);
+
+    /*noinspection CssInvalidAtRule*/
+    @mixin larger-than $mantine-breakpoint-xs {
+      align-items: flex-start;
+      border-radius: 28px 0px 0px 28px;
+
+      svg {
+        flex: 1 0 25px;
+      }
+    }
+  }
+  /*noinspection CssInvalidAtRule*/
+  @mixin larger-than $mantine-breakpoint-xs {
+    width: 138px;
+    padding: 0 15px;
+    height: 56px;
+
+    span {
+      flex-direction: row;
+      max-width: 100%;
+      gap: 0;
+    }
+  }
+}
+
+.floatingMenuButton {
+  width: 100%;
+  height: 100%;
+  border-radius: 0;
+  color: var(--mantine-color-dark-6);
+
+  @mixin larger-than $mantine-breakpoint-xs {
+    height: 59px;
+    align-items: flex-start;
+    border-radius: 28px 0px 0px 28px;
+  }
+}
+
+.floatingMenuLabel {
+  @mixin larger-than $mantine-breakpoint-xs {
+    display: none;
+  }
+}

packages/haring-react/src/Components/FloatingMenu/FloatingMenu.stories.tsx

@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { FloatingMenu as Cmp } from './FloatingMenu';
+import { floatingMenuLabelMock } from './FloatingMenu.mock';
+
+const meta = {
+  component: Cmp,
+  decorators: [
+    (Story) => (
+      <div style={{ height: '500px' }}>
+        <Story />
+      </div>
+    ),
+  ],
+  tags: ['autodocs'],
+  title: '3-custom/Components/FloatingMenu',
+} satisfies Meta<typeof Cmp>;
+
+export default meta;
+type IStory = StoryObj<typeof meta>;
+
+export const FloatingMenu: IStory = {
+  args: {
+    items: floatingMenuLabelMock.children,
+    position: 'right',
+  },
+};