@scality/core-ui 0.152.0 → 0.154.0

package/dist/components/buttonv2/Buttonv2.component.js

@@ -25,10 +25,10 @@ export const ButtonStyled = styled.button `
   text-decoration: none;
   font-family: 'Lato';
   font-weight: ${fontWeight.base};
-
   padding: ${spacing.r4} ${spacing.r8};
   font-size: ${fontSize.base};
   border-radius: ${spacing.r4};
+  white-space: nowrap;
   height: ${(props) => (props.size === 'inline' ? spacing.r24 : spacing.r32)};
   ${(props) => {
     const brand = props.theme;

package/dist/components/icon/Icon.component.d.ts

@@ -125,6 +125,7 @@ export declare const iconTable: {
     Ring: string;
     Stop: string;
     Play: string;
+    Mail: string;
 };
 export declare const customIcons: {
     'Remote-user': ({ ariaLabel, color, size }: {

package/dist/components/icon/Icon.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/icon/Icon.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,mCAAmC,CAAC;AAE7D,OAAO,EACL,aAAa,EAKd,MAAM,OAAO,CAAC;AAGf,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAIhD,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4HrB,CAAC;AAEF,eAAO,MAAM,WAAW;;;;;;;;;;;CAOvB,CAAC;AAaF,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,SAAS,GAAG,MAAM,OAAO,WAAW,CAAC;AACzE,MAAM,MAAM,SAAS,GAAG,MAAM,WAAW,CAAC;AAC1C,KAAK,KAAK,GAAG;IACX,IAAI,EAAE,QAAQ,CAAC;IACf,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,KAAK,CAAC,EAAE,SAAS,GAAG,aAAa,CAAC,OAAO,CAAC,CAAC;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IACtC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAiBF,eAAO,MAAM,WAAW;UAAsB,QAAQ;SAiCrD,CAAC;AAyEF,iBAAS,IAAI,CAAC,EAAE,WAAW,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,2CAU7C;AAED,OAAO,EAAE,IAAI,EAAE,CAAC"}
+{"version":3,"file":"Icon.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/icon/Icon.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,mCAAmC,CAAC;AAE7D,OAAO,EACL,aAAa,EAKd,MAAM,OAAO,CAAC;AAGf,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAIhD,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6HrB,CAAC;AAEF,eAAO,MAAM,WAAW;;;;;;;;;;;CAOvB,CAAC;AAaF,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,SAAS,GAAG,MAAM,OAAO,WAAW,CAAC;AACzE,MAAM,MAAM,SAAS,GAAG,MAAM,WAAW,CAAC;AAC1C,KAAK,KAAK,GAAG;IACX,IAAI,EAAE,QAAQ,CAAC;IACf,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,KAAK,CAAC,EAAE,SAAS,GAAG,aAAa,CAAC,OAAO,CAAC,CAAC;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IACtC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAiBF,eAAO,MAAM,WAAW;UAAsB,QAAQ;SAiCrD,CAAC;AAyEF,iBAAS,IAAI,CAAC,EAAE,WAAW,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,2CAU7C;AAED,OAAO,EAAE,IAAI,EAAE,CAAC"}

package/dist/components/icon/Icon.component.js

@@ -129,6 +129,7 @@ export const iconTable = {
     Ring: 'fas faRing',
     Stop: 'fas faStop',
     Play: 'fas faPlay',
+    Mail: 'fas faEnvelope',
 };
 export const customIcons = {
     'Remote-user': ({ ariaLabel, color, size }) => (_jsx(RemoteUser, { ariaLabel: ariaLabel, color: color, size: size })),
@@ -217,7 +218,7 @@ function NonWrappedIcon({ name, size = '1x', color = undefined, ariaLabel = '',
             }
         },
     });
-    return (_jsxs(_Fragment, { children: [(status === 'loading' || status === 'error') && (_jsx(DelayedFallback, { "aria-label": `${name} ${ariaLabel}`, children: _jsx(Loader, { size: "base" }) })), status === 'success' && (_jsx(data.default, { name: name, color: color, size: size, ariaLabel: ariaLabel, title: title || name, ...rest }))] }));
+    return (_jsxs(_Fragment, { children: [(status === 'loading' || status === 'error') && (_jsx(DelayedFallback, { "aria-label": `${name} ${ariaLabel}`, children: _jsx(Loader, { size: "base" }) })), status === 'success' && (_jsx(data.default, { name: name, color: color, size: size, ariaLabel: ariaLabel, title: title, ...rest }))] }));
 }
 function Icon({ withWrapper, ...props }) {
     if (withWrapper) {

package/dist/components/inputv2/inputv2.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from 'react';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import { spacing } from '../../spacing';
 import { DESCRIPTION_PREFIX, useFieldContext } from '../form/Form.component';
 import { Icon } from '../icon/Icon.component';
@@ -57,12 +57,12 @@ const InputContainer = styled.div `
   padding: 0 ${spacing.r8} 0 ${spacing.r8};
   background: ${(props) => props.theme.backgroundLevel1};
   border-radius: ${spacing.r4};
-  ${(props) => props.isContextAvailable &&
-    props.disabled &&
-    `
-  opacity: 0.5;
-  cursor: not-allowed;
-  `}
+  ${(props) => props.disabled
+    ? css `
+          opacity: 0.5;
+          cursor: not-allowed;
+        `
+    : ''}
 `;
 const InputBorder = styled.div `
   box-sizing: border-box;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scality/core-ui",
-  "version": "0.152.0",
+  "version": "0.154.0",
   "description": "Scality common React component library",
   "author": "Scality Engineering",
   "license": "SEE LICENSE IN LICENSE",

package/src/lib/components/buttonv2/Buttonv2.component.tsx

@@ -40,10 +40,10 @@ export const ButtonStyled = styled.button<Props>`
   text-decoration: none;
   font-family: 'Lato';
   font-weight: ${fontWeight.base};
-
   padding: ${spacing.r4} ${spacing.r8};
   font-size: ${fontSize.base};
   border-radius: ${spacing.r4};
+  white-space: nowrap;
   height: ${(props) => (props.size === 'inline' ? spacing.r24 : spacing.r32)};
   ${(props) => {
     const brand = props.theme;
@@ -198,8 +198,8 @@ export const ButtonLoader = styled(Loader)<{ label; variant }>`
         fill: ${props.variant === 'danger'
           ? props.theme.statusCritical
           : props.variant === 'outline'
-          ? props.theme.textPrimary
-          : props.theme.textSecondary};
+            ? props.theme.textPrimary
+            : props.theme.textSecondary};
       }
     `;
   }}

package/src/lib/components/icon/Icon.component.tsx

@@ -137,6 +137,7 @@ export const iconTable = {
   Ring: 'fas faRing',
   Stop: 'fas faStop',
   Play: 'fas faPlay',
+  Mail: 'fas faEnvelope',
 };
 
 export const customIcons = {
@@ -285,7 +286,7 @@ function NonWrappedIcon({
           color={color}
           size={size}
           ariaLabel={ariaLabel}
-          title={title || name}
+          title={title}
           {...rest}
         />
       )}

package/src/lib/components/iconhelper/IconHelper.test.tsx

@@ -5,15 +5,15 @@ import { getWrapper } from '../../testUtils';
 import userEvent from '@testing-library/user-event';
 import { IconHelp } from './IconHelper';
 
-describe('Icon', () => {
+describe('IconHelper', () => {
   const selectors = {
-    icon: () => screen.getByRole('img', { name: /Info/i }),
+    icon: () => screen.getByRole('img'),
   };
   const renderIcon = (tooltipMessage: React.ReactNode) => {
     const { Wrapper } = getWrapper();
     render(
       <Wrapper>
-        <IconHelp tooltipMessage={tooltipMessage} />
+        <IconHelp tooltipMessage={tooltipMessage} title="Info" />
       </Wrapper>,
     );
   };
@@ -41,12 +41,12 @@ describe('Icon', () => {
       <Wrapper>
         <IconHelp
           tooltipMessage={'This is a tooltip'}
-          title="Info Helper testing"
+          title="Info Helper Testing"
         />
       </Wrapper>,
     );
     await waitFor(() => {
-      expect(screen.getByLabelText('Info Helper testing')).toBeInTheDocument();
+      expect(screen.getByLabelText('Info Helper Testing')).toBeInTheDocument();
     });
   });
 });

package/src/lib/components/inputv2/inputv2.tsx

@@ -1,5 +1,5 @@
 import { forwardRef, InputHTMLAttributes } from 'react';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import { spacing } from '../../spacing';
 import { DESCRIPTION_PREFIX, useFieldContext } from '../form/Form.component';
 import { Icon, IconName } from '../icon/Icon.component';
@@ -62,12 +62,12 @@ const InputContainer = styled.div<{
   background: ${(props) => props.theme.backgroundLevel1};
   border-radius: ${spacing.r4};
   ${(props) =>
-    props.isContextAvailable &&
-    props.disabled &&
-    `
-  opacity: 0.5;
-  cursor: not-allowed;
-  `}
+    props.disabled
+      ? css`
+          opacity: 0.5;
+          cursor: not-allowed;
+        `
+      : ''}
 `;
 
 const InputBorder = styled.div<{