@scality/core-ui 0.183.0 → 0.184.0

package/dist/components/infomessage/InfoMessage.component.d.ts

@@ -2,7 +2,8 @@ type Props = {
     title: string | React.ReactNode;
     content: React.ReactNode;
     link?: string;
+    linkText?: string;
 };
-export declare const InfoMessage: ({ title, content, link }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const InfoMessage: ({ title, content, link, linkText }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=InfoMessage.component.d.ts.map

package/dist/components/infomessage/InfoMessage.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InfoMessage.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/infomessage/InfoMessage.component.tsx"],"names":[],"mappings":"AAMA,KAAK,KAAK,GAAG;IACX,KAAK,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IAChC,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAYF,eAAO,MAAM,WAAW,6BAA8B,KAAK,4CAuB1D,CAAC"}
+{"version":3,"file":"InfoMessage.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/infomessage/InfoMessage.component.tsx"],"names":[],"mappings":"AAMA,KAAK,KAAK,GAAG;IACX,KAAK,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IAChC,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAYF,eAAO,MAAM,WAAW,uCAAwC,KAAK,4CAuBpE,CAAC"}

package/dist/components/infomessage/InfoMessage.component.js

@@ -13,8 +13,8 @@ const InfoMessageContainer = styled.div `
   gap: 0.5rem;
   color: white;
 `;
-export const InfoMessage = ({ title, content, link }) => {
+export const InfoMessage = ({ title, content, link, linkText }) => {
     const { containerRef, backgroundColor } = useComputeBackgroundColor();
     const theme = useTheme();
-    return (_jsxs(InfoMessageContainer, { ref: containerRef, style: { backgroundColor: backgroundColor }, children: [_jsxs(Stack, { children: [_jsx(Icon, { name: "Info-circle", color: theme.infoPrimary, size: "lg" }), typeof title === 'string' ? _jsx(Text, { isEmphazed: true, children: title }) : title] }), _jsx(Text, { color: "textSecondary", isGentleEmphazed: true, children: content }), link && (_jsxs(Link, { href: link, target: "_blank", style: { alignSelf: 'flex-end' }, children: ["More info ", _jsx(Icon, { name: "External-link" })] }))] }));
+    return (_jsxs(InfoMessageContainer, { ref: containerRef, style: { backgroundColor: backgroundColor }, children: [_jsxs(Stack, { children: [_jsx(Icon, { name: "Info-circle", color: theme.infoPrimary, size: "lg" }), typeof title === 'string' ? _jsx(Text, { isEmphazed: true, children: title }) : title] }), _jsx(Text, { color: "textSecondary", isGentleEmphazed: true, children: content }), link && (_jsxs(Link, { href: link, target: "_blank", style: { alignSelf: 'flex-end' }, children: [linkText || 'More info', " ", _jsx(Icon, { name: "External-link" })] }))] }));
 };

package/dist/components/textarea/TextArea.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextArea.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/textarea/TextArea.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,aAAa,EAEb,sBAAsB,EAMvB,MAAM,OAAO,CAAC;AAIf,KAAK,eAAe,GAAG,MAAM,GAAG,MAAM,CAAC;AAWvC,KAAK,OAAO,GAAG,mBAAmB,GAAG,IAAI,CAAC;AAyJ1C,eAAO,MAAM,QAAQ;cAlKT,eAAe;YACjB,aAAa,CAAC,OAAO,CAAC;aACrB,aAAa,CAAC,QAAQ,CAAC;IAChC;;;OAGG;eACQ,OAAO;2CA2J+C,CAAC"}
+{"version":3,"file":"TextArea.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/textarea/TextArea.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,aAAa,EAEb,sBAAsB,EAMvB,MAAM,OAAO,CAAC;AAIf,KAAK,eAAe,GAAG,MAAM,GAAG,MAAM,CAAC;AAWvC,KAAK,OAAO,GAAG,mBAAmB,GAAG,IAAI,CAAC;AA0J1C,eAAO,MAAM,QAAQ;cAnKT,eAAe;YACjB,aAAa,CAAC,OAAO,CAAC;aACrB,aAAa,CAAC,QAAQ,CAAC;IAChC;;;OAGG;eACQ,OAAO;2CA4J+C,CAAC"}

package/dist/components/textarea/TextArea.component.js

@@ -5,7 +5,7 @@ import { spacing } from '../../spacing';
 const TextAreaContainer = styled.textarea `
   padding: ${spacing.r12} ${spacing.r8};
   border-radius: 4px;
-  resize: vertical;
+  resize: ${(props) => (props.autoGrow ? 'none' : 'vertical')};
   font-family: ${(props) => props.variant === 'code' ? 'Courier New' : 'Lato'};
   font-size: ${spacing.f14};
 
@@ -19,7 +19,7 @@ const TextAreaContainer = styled.textarea `
     css `
       width: ${props.width};
     `}
-
+    
   ${(props) => props.height &&
     css `
       height: ${props.height};
@@ -28,6 +28,7 @@ const TextAreaContainer = styled.textarea `
   ${(props) => props.autoGrow &&
     css `
       overflow: hidden;
+      box-sizing: border-box;
     `}
 
   &:placeholder-shown {
@@ -67,7 +68,7 @@ function TextAreaElement({ rows = 3, cols = 20, width, height, variant = 'code',
         if (!textarea || !autoGrow)
             return;
         // Reset height to auto to get the correct scrollHeight
-        textarea.style.height = 'auto';
+        textarea.style.height = '0px';
         // Set the height to match the content
         const newHeight = textarea.scrollHeight;
         textarea.style.height = `${newHeight}px`;

package/package.json

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

package/src/lib/components/infomessage/InfoMessage.component.tsx

@@ -8,6 +8,7 @@ type Props = {
   title: string | React.ReactNode;
   content: React.ReactNode;
   link?: string;
+  linkText?: string;
 };
 
 const InfoMessageContainer = styled.div`
@@ -20,7 +21,7 @@ const InfoMessageContainer = styled.div`
   color: white;
 `;
 
-export const InfoMessage = ({ title, content, link }: Props) => {
+export const InfoMessage = ({ title, content, link, linkText }: Props) => {
   const { containerRef, backgroundColor } = useComputeBackgroundColor();
   const theme = useTheme();
 
@@ -38,7 +39,7 @@ export const InfoMessage = ({ title, content, link }: Props) => {
       </Text>
       {link && (
         <Link href={link} target="_blank" style={{ alignSelf: 'flex-end' }}>
-          More info <Icon name="External-link"></Icon>
+          {linkText || 'More info'} <Icon name="External-link"></Icon>
         </Link>
       )}
     </InfoMessageContainer>

package/src/lib/components/infomessage/InfoMessageUtils.test.tsx

@@ -1,8 +1,66 @@
+import React from 'react';
 import '@testing-library/jest-dom';
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import { coreUIAvailableThemes } from '../../style/theme';
 import { CoreUiThemeProvider } from '../coreuithemeprovider/CoreUiThemeProvider';
 import { useComputeBackgroundColor } from './InfoMessageUtils';
+import { InfoMessage } from './InfoMessage.component';
+import { getWrapper } from '../../testUtils';
+
+describe('InfoMessage', () => {
+  const selectors = {
+    title: () => screen.getByText('Title'),
+    content: () => screen.getByText('Content'),
+    defaultLinkText: () => screen.getByText('More info'),
+    link: () => screen.getByRole('link'),
+    linkText: () => screen.getByText('Link text'),
+  };
+  it('should render', () => {
+    const { Wrapper } = getWrapper();
+    render(<InfoMessage title="Title" content="Content" />, {
+      wrapper: Wrapper,
+    });
+    expect(selectors.title()).toBeInTheDocument();
+    expect(selectors.content()).toBeInTheDocument();
+  });
+  it('should render with link and default link text', () => {
+    const { Wrapper } = getWrapper();
+    render(
+      <InfoMessage
+        title="Title"
+        content="Content"
+        link="https://www.google.com"
+      />,
+      {
+        wrapper: Wrapper,
+      },
+    );
+    expect(selectors.title()).toBeInTheDocument();
+    expect(selectors.content()).toBeInTheDocument();
+    expect(selectors.link()).toBeInTheDocument();
+    expect(selectors.defaultLinkText()).toBeInTheDocument();
+    expect(selectors.link()).toHaveAttribute('href', 'https://www.google.com');
+  });
+  it('should render with correct link text', () => {
+    const { Wrapper } = getWrapper();
+    render(
+      <InfoMessage
+        title="Title"
+        content="Content"
+        link="https://www.google.com"
+        linkText="Link text"
+      />,
+      {
+        wrapper: Wrapper,
+      },
+    );
+    expect(selectors.title()).toBeInTheDocument();
+    expect(selectors.content()).toBeInTheDocument();
+    expect(selectors.link()).toBeInTheDocument();
+    expect(selectors.linkText()).toBeInTheDocument();
+    expect(selectors.link()).toHaveAttribute('href', 'https://www.google.com');
+  });
+});
 
 describe('useComputeBackgroundColor', () => {
   const SUT = jest.fn();

package/src/lib/components/textarea/TextArea.component.tsx

@@ -32,7 +32,7 @@ const TextAreaContainer = styled.textarea<{
 }>`
   padding: ${spacing.r12} ${spacing.r8};
   border-radius: 4px;
-  resize: vertical;
+  resize: ${(props) => (props.autoGrow ? 'none' : 'vertical')};
   font-family: ${(props) =>
     props.variant === 'code' ? 'Courier New' : 'Lato'};
   font-size: ${spacing.f14};
@@ -49,7 +49,7 @@ const TextAreaContainer = styled.textarea<{
     css`
       width: ${props.width};
     `}
-
+    
   ${(props) =>
     props.height &&
     css`
@@ -60,6 +60,7 @@ const TextAreaContainer = styled.textarea<{
     props.autoGrow &&
     css`
       overflow: hidden;
+      box-sizing: border-box;
     `}
 
   &:placeholder-shown {
@@ -118,7 +119,7 @@ function TextAreaElement(
     if (!textarea || !autoGrow) return;
 
     // Reset height to auto to get the correct scrollHeight
-    textarea.style.height = 'auto';
+    textarea.style.height = '0px';
 
     // Set the height to match the content
     const newHeight = textarea.scrollHeight;

package/stories/textarea.stories.tsx

@@ -68,6 +68,14 @@ export const RowsAndColsSet = {
   },
 };
 
+export const AutoGrowShortText = {
+  args: {
+    autoGrow: true,
+    defaultValue: 'Hello World!',
+    width: '400px',
+  },
+};
+
 /**
  * Auto-growing textarea adjusts its height based on content
  * Perfect for displaying commands or long text where you want the entire content visible