@ssa-ui-kit/core 1.0.3 → 1.0.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ssa-ui-kit/core",
-  "version": "1.0.3",
+  "version": "1.0.5",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "private": false,

package/src/components/Badge/Badge.stories.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 import type { Meta } from '@storybook/react';
 import { useTheme } from '@emotion/react';
+import Icon from '@components/Icon';
 import { HeaderTitle, GridWrapper, colors, sizes, icons } from './helpers';
 
 import Badge from './index';
-import Icon from '@components/Icon';
 
 export default {
   title: 'Components/Badge',

package/src/components/ImageItem/ImageItem.spec.tsx

@@ -0,0 +1,54 @@
+import { screen } from '@testing-library/dom';
+import { ImageItem } from '@components/ImageItem';
+
+const image =
+  'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAASGSURBVHgBfVVbUhtXEO2eGQ0SLz1AIAgYycSO7XKVo898hazA3kGSFeBkATHFAhJYAVlCvIKwgiiqpCLHNhbgBwgkIYHempl2952HBkr2VI10de/M6dOnT7cQPnMVCoWEaU5vEsIGgbNGDuRknwgaRM7fRPQcnP4f+Xz+8FMYOG6zVCpnQac9x6ENchwGJP+IZO3dGOwT7fVosP3NmEDazY2X5aNNzcACx/4WXIAwOvq3YoeoAvLih5g+8Vex+GLzswFeld8+Ixt2HKKEz9wDC5hfA3bXcswbkOTPneI/pWdjJToov3tqE/1Gtg0Og/u3xxw0TSO+URLq9wdhDEI3Hwmmojno/Jx/+GAnCFAqn2QjYBVYc2HOMVQQpfHUVIzS8ymMRaO8Zyu9zEgEWq02nFaq1Gp3gkTkQ7Lj3017SFz7+4eGnOpkb/myOCNZYCmThpmZKTw7q8HR5XuwLNvVlROJz87ArdVlrNcbUDmvkUsWPc6UMCb0PV58hy57uyzMLdtGh9kL8/R8UsChfPiOGBhZHohOmIrhVautiqDrOt5ZXwPJ4uT0nJRarl78nAbWoJ3UDLCfCKAwV6UUWSZjkEjMCriwRtM06e6XWchwRouL8/jg3joYho5So9dvjiEen2EpJ9EvqSsVkBmd3mQX0WPPMfKCeiKdToHIYtuOYjw/l0BhecBgrw+OqNlscYYpdSb1qlSqsLgwBzfqINlsaLx8pLiPbKkyuLpqBzbVdY2L2gl+d3s9MM2IWgvg5VULYtEJycrvGfQCZTVVXE8iiSwOGQyHwPUILCrgUhMGJQkm7FvtbiCFZGozQV3TR/5XZ1rW8OyoMgj3RbiR6hdNikQi+NWd2+r8vFoDcY/0hltY750Rc1VkZLcZDHzEYGs+qDAXJpLucGih17V4dl6FRrMJ7Bzo9fqezkoiMgxDegMtywpIqcZErWEwZpkBbvne54yINcaZ6Slk5jA5GcXMwjzEYjEYDIYqR9G/2+lhtV6Hy8u2PAttlkwIMgHpeL+1ixyA9vneCMmiGmvliwywLJBKxuH47QfxOvnshMxcKgHLS4tc3CYkE3F4f1Lx5pLykgrEjz3HQrmcMDrDi7Du8r2UWVCF/f/VG+h2+948ElkwGA3TzPx2dhXOzut819S5zCuNJdZYSgOtnJbP5Rr8zr47tEZT8gMzOj2rQm5thRnOqpqI0eQxcVIqmaCV5QzUahcg9fF6AKW4IpGm4++5XO7QHXalUnZo6wWZIV4dFGMJyMOOa5BmtpOqBrLHAVCyqjBwp9P15pMA6yDBWZ4GD4p8EECu4r8vnnJVfg3/Y4VlE1eYEUPZUAiw731/oucaBjZI4wAaGj+t55Z31Xt+gEcP7+1ww2x7wH7ga4UdDC2SJrRVz6B/+bZ0nUO47YNfayz/KhT/40zgF0ZOhvf9AgteUOWR54V9AzV96+766m74vbF/+oVCKcsibQHS9z6QG8Cd+SLXCF9Zcp8i+ON91vwm1tgA4UBc7ic89h8z0NeMFfcCHrNmh2zFPwc9YzefZyd+4voIMSvIE1PFRoIAAAAASUVORK5CYII=';
+
+describe('ImageItem', () => {
+  it('Should be rendered without link', () => {
+    render(<ImageItem image={image}>Name Surname</ImageItem>);
+
+    expect(
+      screen.getByText(
+        (content, element) =>
+          element?.tagName.toLowerCase() === 'div' &&
+          element?.getAttribute('data-testid') === 'image-item',
+      ),
+    ).toBeInTheDocument();
+  });
+  it('Should be rendered with the link', () => {
+    render(
+      <ImageItem
+        image={image}
+        link="/?path=/story/components-button--all-states">
+        Name Surname
+      </ImageItem>,
+    );
+
+    expect(
+      screen.getByText(
+        (content, element) =>
+          element?.tagName.toLowerCase() === 'a' &&
+          element.getAttribute('target') !== '_blank',
+      ),
+    ).toBeInTheDocument();
+  });
+  it('Should be rendered with the link, opening in the new window', () => {
+    render(
+      <ImageItem
+        image={image}
+        link="/?path=/story/components-button--all-states"
+        openLinkInNewTab>
+        Name Surname
+      </ImageItem>,
+    );
+
+    expect(
+      screen.getByText(
+        (content, element) =>
+          element?.tagName.toLowerCase() === 'a' &&
+          element.getAttribute('target') === '_blank',
+      ),
+    ).toBeInTheDocument();
+  });
+});

package/src/components/ImageItem/ImageItem.stories.tsx

@@ -0,0 +1,33 @@
+import type { Meta } from '@storybook/react';
+import { ImageItem } from './ImageItem';
+
+export default {
+  title: 'Widgets/ImageItem',
+  component: ImageItem,
+} as Meta<typeof ImageItem>;
+
+export const Default = {
+  args: {
+    children: 'Name Surname',
+    image:
+      'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAASGSURBVHgBfVVbUhtXEO2eGQ0SLz1AIAgYycSO7XKVo898hazA3kGSFeBkATHFAhJYAVlCvIKwgiiqpCLHNhbgBwgkIYHempl2952HBkr2VI10de/M6dOnT7cQPnMVCoWEaU5vEsIGgbNGDuRknwgaRM7fRPQcnP4f+Xz+8FMYOG6zVCpnQac9x6ENchwGJP+IZO3dGOwT7fVosP3NmEDazY2X5aNNzcACx/4WXIAwOvq3YoeoAvLih5g+8Vex+GLzswFeld8+Ixt2HKKEz9wDC5hfA3bXcswbkOTPneI/pWdjJToov3tqE/1Gtg0Og/u3xxw0TSO+URLq9wdhDEI3Hwmmojno/Jx/+GAnCFAqn2QjYBVYc2HOMVQQpfHUVIzS8ymMRaO8Zyu9zEgEWq02nFaq1Gp3gkTkQ7Lj3017SFz7+4eGnOpkb/myOCNZYCmThpmZKTw7q8HR5XuwLNvVlROJz87ArdVlrNcbUDmvkUsWPc6UMCb0PV58hy57uyzMLdtGh9kL8/R8UsChfPiOGBhZHohOmIrhVautiqDrOt5ZXwPJ4uT0nJRarl78nAbWoJ3UDLCfCKAwV6UUWSZjkEjMCriwRtM06e6XWchwRouL8/jg3joYho5So9dvjiEen2EpJ9EvqSsVkBmd3mQX0WPPMfKCeiKdToHIYtuOYjw/l0BhecBgrw+OqNlscYYpdSb1qlSqsLgwBzfqINlsaLx8pLiPbKkyuLpqBzbVdY2L2gl+d3s9MM2IWgvg5VULYtEJycrvGfQCZTVVXE8iiSwOGQyHwPUILCrgUhMGJQkm7FvtbiCFZGozQV3TR/5XZ1rW8OyoMgj3RbiR6hdNikQi+NWd2+r8vFoDcY/0hltY750Rc1VkZLcZDHzEYGs+qDAXJpLucGih17V4dl6FRrMJ7Bzo9fqezkoiMgxDegMtywpIqcZErWEwZpkBbvne54yINcaZ6Slk5jA5GcXMwjzEYjEYDIYqR9G/2+lhtV6Hy8u2PAttlkwIMgHpeL+1ixyA9vneCMmiGmvliwywLJBKxuH47QfxOvnshMxcKgHLS4tc3CYkE3F4f1Lx5pLykgrEjz3HQrmcMDrDi7Du8r2UWVCF/f/VG+h2+948ElkwGA3TzPx2dhXOzut819S5zCuNJdZYSgOtnJbP5Rr8zr47tEZT8gMzOj2rQm5thRnOqpqI0eQxcVIqmaCV5QzUahcg9fF6AKW4IpGm4++5XO7QHXalUnZo6wWZIV4dFGMJyMOOa5BmtpOqBrLHAVCyqjBwp9P15pMA6yDBWZ4GD4p8EECu4r8vnnJVfg3/Y4VlE1eYEUPZUAiw731/oucaBjZI4wAaGj+t55Z31Xt+gEcP7+1ww2x7wH7ga4UdDC2SJrRVz6B/+bZ0nUO47YNfayz/KhT/40zgF0ZOhvf9AgteUOWR54V9AzV96+766m74vbF/+oVCKcsibQHS9z6QG8Cd+SLXCF9Zcp8i+ON91vwm1tgA4UBc7ic89h8z0NeMFfcCHrNmh2zFPwc9YzefZyd+4voIMSvIE1PFRoIAAAAASUVORK5CYII=',
+    avatarSize: 24,
+    link: '',
+    openLinkInNewTab: false,
+  },
+};
+
+export const WithLink = {
+  args: {
+    ...Default.args,
+    link: 'https://uikit.ssa.group',
+  },
+};
+
+export const WithLinkOpeningInNewTab = {
+  args: {
+    ...Default.args,
+    link: 'https://uikit.ssa.group',
+    openLinkInNewTab: true,
+  },
+};

package/src/components/ImageItem/ImageItem.tsx

@@ -0,0 +1,43 @@
+import { useTheme } from '@emotion/react';
+import Avatar from '@components/Avatar';
+import Wrapper from '@components/Wrapper';
+import { ImageItemProps } from './types';
+
+export const ImageItem = ({
+  children,
+  image,
+  avatarSize = 24,
+  link = '',
+  openLinkInNewTab = false,
+  className,
+}: ImageItemProps) => {
+  const theme = useTheme();
+  const additionalProps = link
+    ? {
+        href: link,
+        target: openLinkInNewTab ? '_blank' : undefined,
+      }
+    : {};
+  return (
+    <Wrapper
+      css={{ gap: 8, textDecoration: 'none' }}
+      as={link ? 'a' : 'div'}
+      className={className}
+      data-testid="image-item"
+      {...additionalProps}>
+      <Avatar size={avatarSize} image={image} />
+      <span
+        css={{
+          color: theme.colors.greyDarker,
+          fontSize: 14,
+          fontWeight: 500,
+          cursor: link ? 'pointer' : 'default',
+          '&:hover': {
+            color: link ? theme.colors.blue : theme.colors.greyDarker,
+          },
+        }}>
+        {children}
+      </span>
+    </Wrapper>
+  );
+};

package/src/components/ImageItem/index.ts

@@ -0,0 +1 @@
+export * from './ImageItem';

package/src/components/ImageItem/types.ts

@@ -0,0 +1,7 @@
+export type ImageItemProps = React.PropsWithChildren<{
+  image: string;
+  avatarSize?: number;
+  link?: string;
+  className?: string;
+  openLinkInNewTab?: boolean;
+}>;

package/src/components/TextField/TextField.stories.tsx

@@ -37,11 +37,24 @@ export default {
     },
   },
   decorators: [
-    (Story) => (
-      <Form>
-        <FormGroup>{Story()}</FormGroup>
-      </Form>
-    ),
+    (Story, context) => {
+      const useFormResult = useForm<FieldValues>();
+      return (
+        <Form
+          onSubmit={useFormResult.handleSubmit((data) => {
+            console.log('>>>onSubmit', data);
+          })}>
+          <FormGroup>
+            {Story({
+              args: {
+                ...context.args,
+                register: useFormResult.register,
+              },
+            })}
+          </FormGroup>
+        </Form>
+      );
+    },
   ],
 } as Meta<typeof TextField>;
 
@@ -51,9 +64,7 @@ const mockError: FieldError = {
 };
 
 export const Basic: StoryObj<typeof TextField> = (args: Args) => {
-  const { register } = useForm<FieldValues>();
-
-  return <TextField {...args} register={register} />;
+  return <TextField {...args} register={args.register} />;
 };
 Basic.args = {
   placeholder: 'Field',
@@ -65,15 +76,13 @@ Basic.args = {
   helperText: 'some nice text',
 };
 
-export const WithError: StoryObj<typeof TextField> = () => {
-  const { register } = useForm<FieldValues>();
-
+export const WithError: StoryObj<typeof TextField> = (args: Args) => {
   return (
     <TextField
       placeholder="Field error"
       label="Field"
       name="field2"
-      register={register}
+      register={args.register}
       validationSchema={{
         required: 'Required',
       }}
@@ -83,15 +92,13 @@ export const WithError: StoryObj<typeof TextField> = () => {
 };
 WithError.args = {};
 
-export const WithSuccess: StoryObj<typeof TextField> = () => {
-  const { register } = useForm<FieldValues>();
-
+export const WithSuccess: StoryObj<typeof TextField> = (args: Args) => {
   return (
     <TextField
       placeholder="Field success"
       label="Field"
       name="field3"
-      register={register}
+      register={args.register}
       validationSchema={{
         required: 'Required',
       }}
@@ -102,15 +109,13 @@ export const WithSuccess: StoryObj<typeof TextField> = () => {
 };
 WithSuccess.args = {};
 
-export const Disabled: StoryObj<typeof TextField> = () => {
-  const { register } = useForm<FieldValues>();
-
+export const Disabled: StoryObj<typeof TextField> = (args: Args) => {
   return (
     <TextField
       placeholder="Field disabled"
       label="Field"
       name="field4"
-      register={register}
+      register={args.register}
       helperText="some nice text"
       disabled={true}
       endElement={<Icon name="visible" size={16} />}
@@ -119,15 +124,13 @@ export const Disabled: StoryObj<typeof TextField> = () => {
 };
 Disabled.args = {};
 
-export const WithStatusDisabled: StoryObj<typeof TextField> = () => {
-  const { register } = useForm<FieldValues>();
-
+export const WithStatusDisabled: StoryObj<typeof TextField> = (args: Args) => {
   return (
     <TextField
       placeholder="Field success disabled"
       label="Field"
       name="field5"
-      register={register}
+      register={args.register}
       helperText="some nice text"
       disabled={true}
       success={true}
@@ -136,23 +139,21 @@ export const WithStatusDisabled: StoryObj<typeof TextField> = () => {
 };
 WithStatusDisabled.args = {};
 
-export const WithAction: StoryObj<typeof TextField> = () => {
-  const { register } = useForm<FieldValues>();
-
+export const WithAction: StoryObj<typeof TextField> = (args: Args) => {
   return (
     <TextField
       type="password"
       placeholder="Field"
       label="Field"
       name="field6"
-      register={register}
+      register={args.register}
       helperText="some nice text"
       endElement={
         <button
+          type="submit"
           onClick={(event) => {
-            event.stopPropagation();
+            console.log('>>>action...');
             event.preventDefault();
-            console.log('calling action...');
           }}>
           Action
         </button>
@@ -162,24 +163,20 @@ export const WithAction: StoryObj<typeof TextField> = () => {
 };
 WithAction.args = {};
 
-export const MultilineSimple: StoryObj<typeof TextField> = () => {
-  const { register } = useForm<FieldValues>();
-
+export const MultilineSimple: StoryObj<typeof TextField> = (args: Args) => {
   return (
     <TextField
       multirow
       rows={10}
       placeholder="Textarea"
       name="textarea"
-      register={register}
+      register={args.register}
     />
   );
 };
 MultilineSimple.args = {};
 
-export const Multiline: StoryObj<typeof TextField> = () => {
-  const { register } = useForm<FieldValues>();
-
+export const Multiline: StoryObj<typeof TextField> = (args: Args) => {
   return (
     <TextField
       multirow
@@ -188,15 +185,13 @@ export const Multiline: StoryObj<typeof TextField> = () => {
       placeholder="Textarea"
       name="textarea"
       helperText="some nice text"
-      register={register}
+      register={args.register}
     />
   );
 };
 Multiline.args = {};
 
-export const MultilineDisabled: StoryObj<typeof TextField> = () => {
-  const { register } = useForm<FieldValues>();
-
+export const MultilineDisabled: StoryObj<typeof TextField> = (args: Args) => {
   return (
     <TextField
       multirow
@@ -205,16 +200,14 @@ export const MultilineDisabled: StoryObj<typeof TextField> = () => {
       placeholder="Textarea"
       name="textarea"
       helperText="some nice text"
-      register={register}
+      register={args.register}
     />
   );
 };
 MultilineDisabled.args = {};
 
 export const Focused: StoryObj<typeof TextField> = (args: Args) => {
-  const { register } = useForm<FieldValues>();
-
-  return <TextField {...args} register={register} />;
+  return <TextField {...args} />;
 };
 Focused.args = {
   ...Basic.args,

package/src/components/index.ts

@@ -101,3 +101,4 @@ export * from './CollapsibleNavBar';
 export * from './Filters';
 export * from './TableFilters';
 export * from './Typeahead';
+export * from './ImageItem';