@ssa-ui-kit/core 1.0.3 → 1.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ssa-ui-kit/core",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "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: theme.colors.blue,
+          },
+        }}>
+        {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/index.ts

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