Merge branch 'improvement/navbar' into q/1.0

scality · Feb 14, 2024 · 564293d · 564293d
2 parents a24ca67 + 71ec003
commit 564293d
Show file tree

Hide file tree

Showing 20 changed files with 713 additions and 153 deletions.
diff --git a/.storybook/preview.js b/.storybook/preview.js
@@ -1,9 +1,9 @@
 import React from 'react';
 import { QueryClient, QueryClientProvider } from 'react-query';
 import { CoreUiThemeProvider } from '../src/lib/next';
-import { brand, coreUIAvailableThemes} from '../src/lib/style/theme';
+import { brand, coreUIAvailableThemes } from '../src/lib/style/theme';
 import { Wrapper } from '../stories/common';
-
+import { ToastProvider } from '../src/lib';
 
 export const globalTypes = {
   theme: {
@@ -14,22 +14,28 @@ export const globalTypes = {
       title: 'Preview Theme',
       dynamicTitle: false,
       // array of plain string values or MenuItem shape (see below)
-      items: [{ value: 'darkRebrand', title: 'Dark', icon: 'moon' }, { value: 'artescaLight', title: 'Light', icon: 'sun' }, {value: 'ring9dark', title: 'Ring Dark', icon: 'moon'}],
+      items: [
+        { value: 'darkRebrand', title: 'Dark', icon: 'moon' },
+        { value: 'artescaLight', title: 'Light', icon: 'sun' },
+        { value: 'ring9dark', title: 'Ring Dark', icon: 'moon' },
+      ],
     },
   },
 };
 
 const withThemeProvider = (Story, context) => {
   const theme = coreUIAvailableThemes[context.globals.theme];
-  const {viewMode} = context
+  const { viewMode } = context;
   return (
     <QueryClientProvider client={new QueryClient()}>
       <CoreUiThemeProvider theme={theme}>
         {/* Wrapper to make the stories take the full screen but not in docs */}
-        <div style={viewMode === 'story' ? {height: 100 + 'vh' }: null}>
-          <Wrapper>
-            <Story {...context} />
-          </Wrapper>
+        <div style={viewMode === 'story' ? { height: 100 + 'vh' } : null}>
+          <ToastProvider>
+            <Wrapper>
+              <Story {...context} />
+            </Wrapper>
+          </ToastProvider>
         </div>
       </CoreUiThemeProvider>
     </QueryClientProvider>
@@ -40,17 +46,18 @@ export const decorators = [withThemeProvider];
 
 export const parameters = {
   layout: 'fullscreen',
-  docs:{
-      toc : {headingSelector: 'h2,h3',
-      title: "Table of Contents"},
+  docs: {
+    toc: { headingSelector: 'h2,h3', title: 'Table of Contents' },
   },
-  controls:{
+  controls: {
     //All props with color in name will automatically have a control 'color'
     //with colors presets to theme colors, possible to have the color name from theme in control
-    presetColors: Object.entries(brand).map(color => {return {color: color[1],title:color[0] }}),
-    matchers:{
-      color: /color/i
-    }
+    presetColors: Object.entries(brand).map((color) => {
+      return { color: color[1], title: color[0] };
+    }),
+    matchers: {
+      color: /color/i,
+    },
   },
   options: {
     storySort: {
@@ -60,8 +67,15 @@ export const parameters = {
         'Guidelines',
         'Templates',
         'Components',
-        ['Navigation', 'Data Display', 'Inputs', 'Feedback', 'Progress & loading', 'Styling', 'Deprecated']
-
+        [
+          'Navigation',
+          'Data Display',
+          'Inputs',
+          'Feedback',
+          'Progress & loading',
+          'Styling',
+          'Deprecated',
+        ],
       ],
     },
   },

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -48,7 +48,7 @@
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^11.2.7",
     "@testing-library/react-hooks": "^8.0.1",
-    "@testing-library/user-event": "^13.1.9",
+    "@testing-library/user-event": "^13.5.0",
     "@types/jest": "^27.5.0",
     "@types/react": "^17.0.39",
     "@types/react-dom": "^17.0.11",
@@ -95,21 +95,21 @@
   },
   "dependencies": {
     "@floating-ui/dom": "^0.1.10",
-    "@storybook/preview-api": "^7.6.6",
-    "framer-motion": "^4.1.17",
-    "react-hook-form": "^7.49.2",
     "@fortawesome/fontawesome-free": "^5.10.2",
     "@fortawesome/fontawesome-svg-core": "^1.2.35",
     "@fortawesome/free-regular-svg-icons": "^5.15.3",
     "@fortawesome/free-solid-svg-icons": "^5.15.3",
     "@fortawesome/react-fontawesome": "^0.1.14",
     "@js-temporal/polyfill": "^0.4.4",
+    "@storybook/preview-api": "^7.6.6",
+    "framer-motion": "^4.1.17",
     "polished": "3.4.1",
     "pretty-bytes": "^5.6.0",
     "react": "^17.0.2",
     "react-debounce-input": "3.2.2",
     "react-dom": "^17.0.2",
     "react-dropzone": "^14.2.3",
+    "react-hook-form": "^7.49.2",
     "react-query": "^3.34.0",
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",

diff --git a/src/lib/components/buttonv2/Buttonv2.component.tsx b/src/lib/components/buttonv2/Buttonv2.component.tsx
@@ -4,6 +4,13 @@ import { spacing } from '../../spacing';
 import { fontSize, fontWeight } from '../../style/theme';
 import { Loader } from '../loader/Loader.component';
 import { Tooltip, Props as TooltipProps } from '../tooltip/Tooltip.component';
+
+export const FocusVisibleStyle = css`
+  outline: dashed ${spacing.r2} ${(props) => props.theme.selectedActive};
+  outline-offset: ${spacing.r2};
+  z-index: 1000;
+`;
+
 export type Props = Omit<
   ButtonHTMLAttributes<HTMLButtonElement>,
   'size' | 'label'
@@ -54,8 +61,7 @@ export const ButtonStyled = styled.button<Props>`
           }
           // :focus-visible is the keyboard-only version of :focus
           &:focus-visible:enabled {
-            outline: dashed ${spacing.r2} ${brand.selectedActive};
-            outline-offset: ${spacing.r2};
+            ${FocusVisibleStyle}
             color: ${brand.textPrimary};
           }
           &:active:enabled {
@@ -76,8 +82,7 @@ export const ButtonStyled = styled.button<Props>`
             color: ${brand.textPrimary};
           }
           &:focus-visible:enabled {
-            outline: dashed ${spacing.r2} ${brand.selectedActive};
-            outline-offset: ${spacing.r2};
+            ${FocusVisibleStyle}
             color: ${brand.textPrimary};
           }
           &:active:enabled {
@@ -97,8 +102,7 @@ export const ButtonStyled = styled.button<Props>`
             border: ${spacing.r1} solid ${brand.infoPrimary};
           }
           &:focus-visible:enabled {
-            outline: dashed ${spacing.r2} ${brand.selectedActive};
-            outline-offset: ${spacing.r2};
+            ${FocusVisibleStyle}s
           }
           &:active:enabled {
             cursor: pointer;
@@ -117,8 +121,7 @@ export const ButtonStyled = styled.button<Props>`
             color: ${brand.textPrimary};
           }
           &:focus-visible:enabled {
-            outline: dashed ${spacing.r2} ${brand.selectedActive};
-            outline-offset: ${spacing.r2};
+            ${FocusVisibleStyle}
             border-color: ${brand.buttonSecondary};
           }
           &:active:enabled {

diff --git a/src/lib/components/card/Card.component.tsx b/src/lib/components/card/Card.component.tsx
@@ -1,8 +1,9 @@
 // @ts-nocheck
 import { HTMLProps } from 'react';
 import { createContext } from 'react';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import { hex2RGB } from '../../utils';
+import { FocusVisibleStyle } from '../buttonv2/Buttonv2.component';
 const CardContext = createContext(null);
 type CardElementProps = {
   children: React.ReactNode;
@@ -101,18 +102,17 @@ const StyledCard = styled.div<{
 
   ${(props) =>
     props.onClick && !props.disabled
-      ? `
-      cursor: pointer;
+      ? css`
+          cursor: pointer;
 
-      &:hover {
-        box-shadow: 0 0 0 2px ${props.theme.highlight};
-      }
+          &:hover {
+            box-shadow: 0 0 0 2px ${props.theme.highlight};
+          }
 
-      &:focus {
-        outline: 2px solid ${props.theme.buttonSecondary};
-        outline-offset: 2px;
-      }
-    `
+          &:focus {
+            ${FocusVisibleStyle}
+          }
+        `
       : ''};
 
   &.active {

diff --git a/src/lib/components/checkbox/Checkbox.component.tsx b/src/lib/components/checkbox/Checkbox.component.tsx
@@ -3,6 +3,7 @@ import styled from 'styled-components';
 import { spacing, Stack } from '../../spacing';
 
 import { Text } from '../text/Text.component';
+import { FocusVisibleStyle } from '../buttonv2/Buttonv2.component';
 
 type Props = {
   label?: string;
@@ -113,8 +114,7 @@ const StyledCheckbox = styled.label<{
   }
 
   [type='checkbox']:focus-visible:enabled {
-    outline: dashed ${spacing.r2} ${(props) => props.theme.selectedActive};
-    outline-offset: ${spacing.r2};
+    ${FocusVisibleStyle}
   }
 
   /* Disabled */