sbwb-ds 3.1.11 → 3.1.13

package/src/presentation/components/molecules/PopConfirm/PopConfirm.stories.tsx

@@ -0,0 +1,72 @@
+import React from 'react';
+import PopConfirm from './';
+
+export default {
+  title: 'Floating/PopConfirm',
+  component: PopConfirm,
+  tags: ['autodocs'],
+  argTypes: {
+    position: {
+      control: 'select',
+      options: ['top', 'bottom', 'left', 'right'],
+      description: 'Position of the popconfirm relative to the target element.',
+    },
+  },
+};
+
+const Template = (args) => {
+  const [isVisible, setIsVisible] = React.useState(false);
+  return (
+    <div
+      style={{
+        width: '100%',
+        display: 'flex',
+        alignItems: 'center',
+        flexDirection: 'column',
+        marginTop: '100px',
+      }}
+    >
+      <div
+        style={{
+          width: 'fit-content',
+          height: 'fit-content',
+          display: 'flex',
+          alignItems: 'center',
+          flexDirection: 'column',
+        }}
+      >
+        <PopConfirm
+          position="bottom"
+          {...args}
+          isActive={isVisible}
+          onClickCancel={() => {
+            setIsVisible(false);
+          }}
+        >
+          <button
+            style={{
+              padding: '10px',
+              borderRadius: '5px',
+              cursor: 'pointer',
+            }}
+            onClick={() => setIsVisible(!isVisible)}
+          >
+            Click me!
+          </button>
+        </PopConfirm>
+      </div>
+    </div>
+  );
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  width: '240px',
+  height: 'fit-content',
+  type: 'danger',
+  title: "Don't use big titles!",
+  text: 'A test with a long description. Are you sure you want to do this?',
+  onClickConfirm: () => {
+    alert('Confirmed!');
+  },
+};

package/src/presentation/components/molecules/PopConfirm/index.tsx

@@ -0,0 +1,164 @@
+import * as C from './styles';
+import ReactDOM from 'react-dom';
+import Icon from '../../atoms/Icon';
+import { sg } from '../../../styles';
+import Button from '../../atoms/Button';
+import { pxToRem } from '../../../../main/helpers/functions/measurementConverters';
+
+import { useRef, useEffect } from 'react';
+
+export interface PopConfirmProps {
+  id?: string;
+  children?: React.ReactNode;
+  type: 'danger' | 'success' | 'warning';
+  title: string;
+  text?: string;
+  position?: 'top' | 'bottom' | 'left' | 'right';
+  isActive?: boolean;
+  popConfirmMargin?: string;
+  wrapperWidth?: string;
+  wrapperHeight?: string;
+  wrapperStyles?: React.CSSProperties;
+  onClickConfirm?: () => void;
+  onClickCancel?: () => void;
+}
+
+const PopConfirm = ({
+  id,
+  children,
+  type,
+  title,
+  text,
+  position,
+  isActive = true,
+  popConfirmMargin = '8px',
+  wrapperWidth,
+  wrapperHeight,
+  wrapperStyles,
+  onClickConfirm,
+  onClickCancel,
+}: PopConfirmProps) => {
+  const targetRef = useRef<HTMLDivElement>(null);
+  const popconfirmRef = useRef<HTMLDivElement>(null);
+  const updatePopConfirmPosition = () => {
+    if (targetRef.current && popconfirmRef.current) {
+      const targetRect = targetRef.current.getBoundingClientRect();
+      const popconfirmRect = popconfirmRef.current.getBoundingClientRect();
+      const margin = parseInt(popConfirmMargin, 10);
+      let newStyle: React.CSSProperties = {};
+
+      switch (position) {
+        case 'top':
+          newStyle = {
+            top: `${targetRect.top - popconfirmRect.height - margin}px`,
+            left: `${targetRect.left + targetRect.width / 2}px`,
+            transform: 'translate(-50%, 0)',
+          };
+          break;
+
+        case 'bottom':
+          newStyle = {
+            top: `${targetRect.bottom + margin}px`,
+            left: `${targetRect.left + targetRect.width / 2}px`,
+            transform: 'translate(-50%, 0)',
+          };
+          break;
+
+        case 'left':
+          newStyle = {
+            top: `${targetRect.top + targetRect.height / 2}px`,
+            left: `${targetRect.left - popconfirmRect.width - margin}px`,
+            transform: 'translate(0, -50%)',
+          };
+          break;
+
+        case 'right':
+          newStyle = {
+            top: `${targetRect.top + targetRect.height / 2}px`,
+            left: `${targetRect.right + margin}px`,
+            transform: 'translate(0, -50%)',
+          };
+          break;
+      }
+
+      Object.assign(popconfirmRef.current.style, newStyle);
+    }
+  };
+  useEffect(() => {
+    if (isActive) {
+      updatePopConfirmPosition();
+      window.addEventListener('resize', updatePopConfirmPosition);
+    }
+
+    return () => {
+      window.removeEventListener('resize', updatePopConfirmPosition);
+    };
+  }, [isActive, position, popConfirmMargin]);
+
+  if (!isActive) {
+    return <>{children}</>;
+  }
+  const setIconName = () => {
+    switch (type) {
+      case 'danger':
+        return 'CancelFill0Md';
+      case 'success':
+        return 'CheckCircleMd';
+      case 'warning':
+        return 'WarningMd';
+      default:
+        return 'WarningMd';
+    }
+  };
+
+  const setIconColor = () => {
+    switch (type) {
+      case 'danger':
+        return sg.colors.feedbackColors.colorFeedbackError;
+      case 'success':
+        return sg.colors.feedbackColors.colorFeedbackSuccess;
+      case 'warning':
+        return sg.colors.feedbackColors.colorFeedbackWarning;
+      default:
+        return sg.colors.feedbackColors.colorFeedbackWarning;
+    }
+  };
+  const popConfirmContent = (
+    <C.PopconfirmContainer ref={popconfirmRef} position={position}>
+      <C.Header>
+        <Icon iconName={setIconName()} color={setIconColor()} />
+        <C.Spacing width={sg.spacings.spacingStack.spacingStackXs} />
+        <C.Title>{title}</C.Title>
+      </C.Header>
+      <C.Spacing height={sg.spacings.spacingStack.spacingStackXs} />
+      <C.Content>{text}</C.Content>
+      <C.Spacing height={sg.spacings.spacingInline.spacingInlineAnt} />
+      <C.Footer>
+        <Button
+          variant="secondary"
+          size="Small"
+          width={pxToRem('102px')}
+          onClick={onClickCancel}
+        >
+          Cancel
+        </Button>
+        <Button size="Small" width={pxToRem('102px')} onClick={onClickConfirm}>
+          Confirm
+        </Button>
+      </C.Footer>
+    </C.PopconfirmContainer>
+  );
+  return (
+    <C.PopConfirmWrapper
+      ref={targetRef}
+      wrapperWidth={wrapperWidth}
+      wrapperHeight={wrapperHeight}
+      wrapperStyles={wrapperStyles}
+    >
+      {children}
+      {ReactDOM.createPortal(popConfirmContent, document.body)}
+    </C.PopConfirmWrapper>
+  );
+};
+
+export default PopConfirm;

package/src/presentation/components/molecules/PopConfirm/styles.ts

@@ -0,0 +1,126 @@
+import styled, { css } from 'styled-components';
+import { resetStyles, sg } from '../../../styles';
+
+interface PopConfirmWrapperProps {
+  wrapperWidth?: string;
+  wrapperHeight?: string;
+  wrapperStyles?: any;
+}
+export const PopConfirmWrapper = styled.div<PopConfirmWrapperProps>`
+  ${resetStyles}
+  width: ${({ wrapperWidth }) => wrapperWidth ?? 'fit-content'};
+  height: ${({ wrapperHeight }) => wrapperHeight ?? 'fit-content'};
+  ${({ wrapperStyles }) => wrapperStyles && css(wrapperStyles)};
+`;
+
+interface PopConfirmContainerProps {
+  height?: string;
+  width?: string;
+  position?: 'top' | 'bottom' | 'left' | 'right';
+}
+export const PopconfirmContainer = styled.div<PopConfirmContainerProps>`
+  position: fixed;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  height: ${({ height }) => height ?? 'fit-content'};
+  width: ${({ width }) => width ?? '240px'};
+  background-color: ${sg.colors.backgroundColors.colorBackgroundSnow};
+  border-radius: ${sg.borders.borderRadius.borderRadiusSm};
+  box-shadow: ${sg.shadows.shadowLevelNear};
+  padding: ${sg.spacings.spacingInset.spacingInsetXs};
+  border-width: ${sg.borders.borderWidth.borderWidthThinner};
+  border-color: ${sg.colors.neutralColors.colorNeutralClean};
+  border-style: solid;
+  min-width: 240px;
+  z-index: 1000;
+  &::before {
+    content: '';
+    position: absolute;
+    width: 12px;
+    height: 12px;
+    border-style: solid;
+
+    ${({ position }) => {
+      const borderColor = sg.colors.neutralColors.colorNeutralClean;
+      return css`
+        ${['top', 'topLeft', 'topRight'].includes(position) &&
+        css`
+          background-color: ${sg.colors.neutralColors.colorNeutralSnow};
+          bottom: -6px;
+          left: calc(50% - 6px);
+          border-width: 1px 1px 1px 1px;
+          border-color: transparent ${borderColor} ${borderColor} transparent;
+          transform: rotate(45deg);
+          border-radius: 2px;
+        `}
+        ${['bottom', 'bottomLeft', 'bottomRight'].includes(position) &&
+        css`
+          top: -6px;
+          left: calc(50% - 6px);
+          border-width: 1px;
+          border-color: ${borderColor} transparent transparent ${borderColor};
+          background-color: ${sg.colors.neutralColors.colorNeutralSnow};
+          transform: rotate(45deg);
+          border-radius: 2px;
+        `}
+        ${['left', 'leftStart', 'leftEnd'].includes(position) &&
+        css`
+          top: calc(50% - 6px);
+          right: -6px;
+          border-width: 1px 1px 1px 1px;
+          border-color: ${borderColor} ${borderColor} transparent transparent;
+          background-color: ${sg.colors.neutralColors.colorNeutralSnow};
+          transform: rotate(45deg);
+          border-radius: 2px;
+        `}
+        ${['right', 'rightStart', 'rightEnd'].includes(position) &&
+        css`
+          top: calc(50% - 6px);
+          left: -6px;
+          border-width: 1px 1px 1px 1px;
+          border-color: transparent transparent ${borderColor} ${borderColor};
+          background-color: ${sg.colors.neutralColors.colorNeutralSnow};
+          transform: rotate(45deg);
+          border-radius: 2px;
+        `}
+      `;
+    }}
+  }
+`;
+
+export const Header = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+`;
+export const Title = styled.div`
+  font-family: ${sg.fonts.fontFamily.fontFamilyPrimary};
+  font-size: ${sg.fonts.fontSize.fontSizeBodyLg};
+  font-weight: ${sg.fonts.fontWeight.fontWeightSemiBold};
+  color: ${sg.colors.neutralColors.colorNeutralDarkest};
+`;
+export const Content = styled.div`
+  font-family: ${sg.fonts.fontFamily.fontFamilyPrimary};
+  font-weight: ${sg.fonts.fontWeight.fontWeightRegular};
+  font-size: ${sg.fonts.fontSize.fontSizeBodyMd};
+  color: ${sg.colors.neutralColors.colorNeutralDark};
+  letter-spacing: 0%;
+  overflow-wrap: break-word;
+  overflow: hidden;
+`;
+export const Footer = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+`;
+
+interface SpacingProps {
+  height?: string;
+  width?: string;
+}
+export const Spacing = styled.div<SpacingProps>`
+  height: ${({ height }) => height ?? '0px'};
+  width: ${({ width }) => width ?? '0px'};
+`;

package/src/presentation/components/molecules/SegmentedButton/SegmentedButton.stories.tsx

@@ -0,0 +1,78 @@
+import React from 'react';
+import SegmentedButton from '.';
+export default {
+  title: 'Components/SegmentedButton',
+  component: SegmentedButton,
+  tags: ['autodocs'],
+  argTypes: {
+    buttons: {
+      control: {
+        type: 'object',
+      },
+      description:
+        'Array of button objects. Valid props are "label", "iconName", "onClick", and "disabled".',
+    },
+    onClick: {
+      control: {
+        type: 'function',
+      },
+      description: 'Function to be called when a button is clicked.',
+    },
+    disabled: {
+      control: {
+        type: 'boolean',
+      },
+      description: 'Disables the button if set to true.',
+    },
+    label: {
+      control: {
+        type: 'string',
+      },
+      description: 'Label of the button. It is mandatory.',
+    },
+  },
+};
+
+const Template = (args) => <SegmentedButton {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  buttons: [
+    {
+      label: 'Button 1',
+      iconName: 'AccountCircleFILL1Sm',
+      onClick: () => console.log('Button 1 clicked'),
+    },
+    {
+      label: 'Button 2',
+      iconName: 'AccountCircleFILL1Sm',
+      onClick: () => console.log('Button 2 clicked'),
+      disabled: false,
+    },
+  ],
+};
+
+const Template3bt = (args) => <SegmentedButton {...args} />;
+
+export const ThreeButtons = Template3bt.bind({});
+ThreeButtons.args = {
+  buttons: [
+    {
+      label: 'Button 1',
+      iconName: 'AccountCircleFILL1Sm',
+      onClick: () => console.log('Button 1 clicked'),
+    },
+    {
+      label: 'Button 2',
+      iconName: 'AccountCircleFILL1Sm',
+      onClick: () => console.log('Button 2 clicked'),
+      disabled: false,
+    },
+    {
+      label: 'Button 3',
+      iconName: 'AccountCircleFILL1Sm',
+      onClick: () => console.log('Button 3 clicked'),
+      disabled: false,
+    },
+  ],
+};

package/src/presentation/components/molecules/SegmentedButton/index.tsx

@@ -0,0 +1,47 @@
+import * as C from './styles';
+import { sg } from '../../../styles/styleGuide';
+import Icon, { IconProps } from '../../atoms/Icon';
+import { useState } from 'react';
+
+export interface SegmentedButtonProps {
+  buttons: {
+    label: string;
+    iconName?: IconProps['iconName'];
+    onClick?: () => void;
+    disabled?: boolean;
+  }[];
+}
+const SegmentedButton = ({ buttons }: SegmentedButtonProps) => {
+  const [activeButton, setActiveButton] = useState(0);
+  const handleButtonClick = (index: number) => {
+    setActiveButton(index);
+    if (buttons[index].onClick && !buttons[index].disabled) {
+      buttons[index].onClick();
+    }
+  };
+  return (
+    <C.Container>
+      {buttons.map((button, index) => (
+        <>
+          <C.BaseButtonContainer
+            onClick={() => handleButtonClick(index)}
+            key={button.label}
+            active={activeButton === index}
+            disabled={button.disabled}
+          >
+            <Icon iconName={button.iconName} color={'currentcolor'} />
+            <C.Space width={sg.spacings.spacingInline.spacingInlineNano} />
+            <C.BaseButton disabled={button.disabled}>
+              {button.label}
+            </C.BaseButton>
+          </C.BaseButtonContainer>
+          {index < buttons.length - 1 && (
+            <C.Space width={sg.spacings.spacingInline.spacingInlineNano} />
+          )}
+        </>
+      ))}
+    </C.Container>
+  );
+};
+
+export default SegmentedButton;

package/src/presentation/components/molecules/SegmentedButton/styles.ts

@@ -0,0 +1,71 @@
+import { sg } from '../../../styles/styleGuide';
+import { pxToRem } from '../../../../main/helpers/functions/measurementConverters';
+import styled, { css } from 'styled-components';
+
+export const Container = styled.div`
+  display: flex;
+  background-color: ${sg.colors.backgroundColors.colorBackgroundSky};
+  width: fit-content;
+  min-width: fit-content;
+  border-radius: ${sg.borders.borderRadius.borderRadiusSm};
+  padding: ${sg.spacings.spacingStack.spacingStackNano}
+    ${sg.spacings.spacingInline.spacingInlineNano};
+  min-height: ${pxToRem('32px')};
+`;
+
+interface BaseButtonContainerProps {
+  active?: boolean;
+  disabled?: boolean;
+}
+export const BaseButtonContainer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: ${sg.spacings.spacingStack.spacingStackNano}
+    ${sg.spacings.spacingInline.spacingInlineXs};
+  min-width: fit-content;
+  min-height: ${pxToRem('24px')};
+  border-radius: ${sg.borders.borderRadius.borderRadiusXs};
+  color: ${sg.colors.neutralColors.colorNeutralDark};
+  ${({ disabled, active }: BaseButtonContainerProps) => {
+    if (disabled) {
+      return css`
+        color: ${sg.colors.neutralColors.colorNeutralCleanest};
+      `;
+    }
+    if (active) {
+      return css`
+        background-color: ${sg.colors.backgroundColors.colorBackgroundSnow};
+        color: ${sg.colors.neutralColors.colorNeutralDarkest};
+        border-radius: ${sg.borders.borderRadius.borderRadiusXs};
+        box-shadow: ${sg.shadows.shadowLevelNear};
+      `;
+    }
+  }}
+
+  &: hover {
+    color: ${({ disabled }) =>
+      !disabled && sg.colors.neutralColors.colorNeutralDarkest};
+    cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
+`;
+
+export const BaseButton = styled.button`
+  display: flex;
+  align-items: center;
+  background-color: transparent;
+  justify-content: center;
+  color: currentcolor;
+  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
+  font-weight: ${sg.fonts.fontWeight.fontWeightRegular};
+  font-size: ${sg.fonts.fontSize.fontSizeBodyMd};
+  line-height: 16px;
+`;
+
+interface SpaceProps {
+  width: string;
+  height?: string;
+}
+export const Space = styled.div`
+  height: ${(props: SpaceProps) => props.height || '0'};
+  width: ${(props: SpaceProps) => props.width || '0'};
+`;