odaptos_design_system 2.0.39 → 2.0.41

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "2.0.39",
+  "version": "2.0.41",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/Atoms/Buttons/MksiteButton.modules.scss

@@ -0,0 +1,84 @@
+.button {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  gap: 0.5rem;
+  cursor: pointer;
+  height: 3.125rem;
+}
+
+.button_primary {
+  background: var(--Color-Neutral-Dark-Shades-950, #26292e);
+  border: 1px solid var(--Color-Neutral-Dark-Shades-950, #26292e);
+  border-radius: 0.3125rem;
+  padding: var(--space-spacing-none, 0rem) var(--scale-s-20, 1.25rem);
+
+  &:hover {
+    background: var(--Color-Neutral-Dark-Shades-950, #26292e);
+    border: 1px solid var(--Color-Neutral-Dark-Shades-950, #26292e);
+  }
+
+  &:active {
+    background: var(--Color-Neutral-Dark-Shades-950, #26292e);
+    border: 1px solid var(--Color-Neutral-Dark-Shades-950, #26292e);
+  }
+
+  &:disabled {
+    background: var(--Color-Neutral-Dark-Shades-950, #26292e);
+    border: 1px solid var(--Color-Neutral-Dark-Shades-950, #26292e);
+    cursor: not-allowed !important;
+    opacity: 0.5;
+  }
+
+  p {
+    color: white !important;
+  }
+
+  svg {
+    stroke: white !important;
+    fill: white !important;
+  }
+}
+
+.button_secondary {
+  background: var(--White, #fff);
+  border: 1px solid var(--color-neutral-basics-black, #00040a);
+  padding: var(--space-spacing-none, 0rem) var(--scale-s-20, 1.25rem)
+    var(--space-spacing-none, 0rem) 0.9375rem;
+  border-radius: 0.3125rem;
+
+  &:hover {
+    border: 1px solid var(--color-neutral-basics-black, #00040a);
+    background: var(--White, #fff);
+  }
+
+  &:active {
+    border: 1px solid var(--color-neutral-basics-black, #00040a);
+    background: var(--White, #fff);
+  }
+
+  &:disabled {
+    border: 1px solid var(--color-neutral-basics-black, #00040a);
+    background: var(--White, #fff);
+    opacity: 0.5;
+    cursor: not-allowed !important;
+
+    p {
+      color: var(--color-neutral-basics-black, #00040a) !important;
+    }
+
+    svg {
+      stroke: var(--color-neutral-basics-black, #00040a) !important;
+      fill: var(--color-neutral-basics-black, #00040a) !important;
+    }
+  }
+
+  p {
+    color: var(--color-neutral-basics-black, #00040a) !important;
+  }
+
+  svg {
+    stroke: var(--color-neutral-basics-black, #00040a) !important;
+    fill: var(--color-neutral-basics-black, #00040a) !important;
+  }
+}

package/src/Atoms/Buttons/MksiteButton.tsx

@@ -0,0 +1,41 @@
+import React, { HTMLAttributes } from 'react';
+import { TextForButton } from '../../';
+import styles from './MksiteButton.modules.scss';
+
+export interface MksiteButtonProps extends HTMLAttributes<HTMLButtonElement> {
+  variant?: 'primary' | 'secondary';
+  iconLeft?: JSX.Element;
+  iconRight?: JSX.Element;
+  disabled?: boolean;
+  text: string;
+  className?: string;
+}
+
+/** Figma link : https://www.figma.com/file/fjnhhbL12HvKccPmJchVnr/Atomic-Library?type=design&node-id=131-253&mode=dev */
+export const MksiteButton = ({
+  variant = 'primary',
+  iconLeft,
+  iconRight,
+  text,
+  disabled,
+  className,
+  ...props
+}: MksiteButtonProps) => {
+  const getStylesByVariant = (): string => {
+    if (variant === 'primary') return styles.button_primary;
+    else if (variant === 'secondary') return styles.button_secondary;
+    else return styles.button_primary;
+  };
+
+  return (
+    <button
+      className={`${styles.button} ${getStylesByVariant()} ${className ?? ''}`}
+      disabled={disabled}
+      {...props}
+    >
+      {iconLeft && iconLeft}
+      <TextForButton text={text} bold />
+      {iconRight && iconRight}
+    </button>
+  );
+};

package/src/DesignTokens/Icons/Interaction/AccountIconMksite.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { SvgIcon, SvgIconProps } from '@mui/material';
+import { getIconSize } from '../../../utils/getIconSize';
+
+interface CustomSvgProps {
+  size?: 'sm' | 'base' | 'lg' | 'xl';
+}
+
+export default function AccountIconMksite({
+  stroke,
+  strokeWidth,
+  fill,
+  size = 'base',
+  ...rest
+}: SvgIconProps & CustomSvgProps) {
+  return (
+    <SvgIcon
+      strokeWidth={strokeWidth ?? 0.1}
+      stroke={stroke ? stroke : 'currentColor'}
+      sx={{ height: getIconSize(size), width: getIconSize(size) }}
+      {...rest}
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="20"
+        height="20"
+        viewBox="0 0 20 20"
+        fill="none"
+      >
+        <path
+          d="M10 10C8.88889 10 7.94444 9.61111 7.16667 8.83333C6.38889 8.05556 6 7.11111 6 6C6 4.88889 6.38889 3.94444 7.16667 3.16667C7.94444 2.38889 8.88889 2 10 2C11.1111 2 12.0556 2.38889 12.8333 3.16667C13.6111 3.94444 14 4.88889 14 6C14 7.11111 13.6111 8.05556 12.8333 8.83333C12.0556 9.61111 11.1111 10 10 10ZM2 18V15.3333C2 14.9074 2.11574 14.5046 2.34722 14.125C2.5787 13.7454 2.89815 13.4259 3.30556 13.1667C4.32407 12.5741 5.40278 12.1204 6.54167 11.8056C7.68056 11.4907 8.83333 11.3333 10 11.3333C11.1667 11.3333 12.3194 11.4907 13.4583 11.8056C14.5972 12.1204 15.6759 12.5741 16.6944 13.1667C17.1019 13.4074 17.4213 13.7222 17.6528 14.1111C17.8843 14.5 18 14.9074 18 15.3333V18H2Z"
+          fill={fill}
+        />
+      </svg>
+    </SvgIcon>
+  );
+}

package/src/DesignTokens/Icons/index.ts

@@ -61,6 +61,7 @@ export { default as VideoFlag2 } from './Illustrations/VideoFlag2';
 export { default as VideoFlagGreen } from './Illustrations/VideoFlagGreen';
 export { default as WaitingMen } from './Illustrations/WaitingMen';
 export { default as AccountIcon } from './Interaction/AccountIcon';
+export { default as AccountIconMksite } from './Interaction/AccountIconMksite';
 export { default as AddIcon } from './Interaction/AddIcon';
 export { default as AddTagIcon } from './Interaction/AddTagIcon';
 export { default as AgendaIcon } from './Interaction/AgendaIcon';

package/src/Molecules/Interviews/SelfProtocolManager.tsx

@@ -41,7 +41,7 @@ export interface SelfProtocolManagerProps
   areAllTasksSend?: boolean;
   isLastScenario?: boolean;
   isRecordingFinished?: boolean;
-  isUserSharingScreen: boolean;
+  isUserSharingScreen?: boolean;
   isScreenShareMessageDisplayed?: boolean;
   disabledStopRecording?: boolean;
   isExtensionDownloaded?: boolean;
@@ -161,7 +161,9 @@ export const SelfProtocolManager = ({
                   ctaText={texts.nextTaskCTA}
                   buttonIcon={<SendIcon />}
                   onClick={() => sendTask(task)}
-                  isDisabled={getIsTaskDisabled(task)}
+                  isDisabled={
+                    getIsTaskDisabled(task) || isUserSharingScreen === false
+                  }
                   isDisplay={task.isDisplay}
                 />
               );
@@ -179,7 +181,9 @@ export const SelfProtocolManager = ({
                   buttonId={'start_scenario'}
                   onClick={() => sendTask(task)}
                   isDisplay={task.isDisplay}
-                  isDisabled={getIsTaskDisabled(task) || !isUserSharingScreen}
+                  isDisabled={
+                    getIsTaskDisabled(task) || isUserSharingScreen === false
+                  }
                 />
               );
             } else return <></>;

package/src/index.ts

@@ -3,6 +3,7 @@ export * from './Atoms/Avatar/Avatar';
 export * from './Atoms/Badge/Badge';
 export * from './Atoms/Box/Box';
 export * from './Atoms/Buttons/Button';
+export * from './Atoms/Buttons/MksiteButton';
 export * from './Atoms/Buttons/IconButton';
 export * from './Atoms/Cards/Card';
 export * from './Atoms/Cards/CardButton';