feat(procedures): implemented gdpr form

ref:MANAGER-15317

Signed-off-by: Omar ALKABOUSS MOUSSANA <[email protected]>

packages/manager/apps/container/tailwind.config.js

@@ -7,4 +7,7 @@ module.exports = {
     './src/**/*.{js,jsx,ts,tsx}',
     '../../../manager-react-components/src/**/*.{js,jsx,ts,tsx}',
   ],
+  corePlugins: {
+    preflight: false,
+  },
 };

packages/manager/apps/procedures/src/components/Select/Select.component.tsx

@@ -0,0 +1,83 @@
+import {
+  ODS_INPUT_TYPE,
+  OdsInputValueChangeEventDetail,
+  OdsSelectValueChangeEventDetail,
+  OsdsInputCustomEvent,
+  OsdsSelectCustomEvent,
+} from '@ovhcloud/ods-components';
+import {
+  ODS_THEME_COLOR_INTENT,
+  ODS_THEME_TYPOGRAPHY_LEVEL,
+} from '@ovhcloud/ods-common-theming';
+import {
+  OsdsFormField,
+  OsdsSelect,
+  OsdsSelectOption,
+  OsdsText,
+} from '@ovhcloud/ods-components/react';
+import React, { FunctionComponent } from 'react';
+
+export type SelectOption = {
+  label: string;
+  value: string;
+};
+
+type Props = {
+  label?: string;
+  value?: string;
+  onChange?: (
+    event: OsdsSelectCustomEvent<OdsSelectValueChangeEventDetail>,
+  ) => void;
+  onBlur?: React.FocusEventHandler<HTMLOsdsSelectElement>;
+  name: string;
+  id: string;
+  error?: string;
+  required?: boolean;
+  placeholder?: string;
+  options: SelectOption[];
+};
+
+export const Select: FunctionComponent<Props> = ({
+  label,
+  error,
+  id,
+  onChange,
+  name,
+  value,
+  onBlur,
+  required,
+  placeholder,
+  options,
+}) => {
+  return (
+    <OsdsFormField error={error}>
+      {label && (
+        <label htmlFor={id} slot="label">
+          <OsdsText
+            level={ODS_THEME_TYPOGRAPHY_LEVEL.heading}
+            color={ODS_THEME_COLOR_INTENT.primary}
+          >
+            {label}:
+          </OsdsText>
+        </label>
+      )}
+
+      <OsdsSelect
+        onOdsValueChange={onChange}
+        onBlur={onBlur}
+        value={value}
+        name={name}
+        required={required}
+        id={id}
+        inline
+      >
+        {placeholder && <span slot="placeholder">{placeholder}</span>}
+        {options.map((option, index) => (
+          <OsdsSelectOption value={option.value} key={index}>
+            {option.label}
+          </OsdsSelectOption>
+        ))}
+      </OsdsSelect>
+    </OsdsFormField>
+  );
+};

packages/manager/apps/procedures/src/components/TextArea/TextArea.component.tsx

@@ -0,0 +1,62 @@
+import {
+  OdsTextAreaValueChangeEvent,
+  OsdsTextareaCustomEvent,
+} from '@ovhcloud/ods-components';
+import {
+  ODS_THEME_COLOR_INTENT,
+  ODS_THEME_TYPOGRAPHY_LEVEL,
+} from '@ovhcloud/ods-common-theming';
+import {
+  OsdsFormField,
+  OsdsText,
+  OsdsTextarea,
+} from '@ovhcloud/ods-components/react';
+import React, { FunctionComponent } from 'react';
+
+type Props = {
+  label?: string;
+  value?: string;
+  onChange?: (
+    event: OsdsTextareaCustomEvent<OdsTextAreaValueChangeEvent>,
+  ) => void;
+  onBlur?: (event: OsdsTextareaCustomEvent<void>) => void;
+  name: string;
+  id: string;
+  error?: string;
+  required?: boolean;
+};
+
+export const TextArea: FunctionComponent<Props> = ({
+  label,
+  error,
+  id,
+  onChange,
+  name,
+  value,
+  onBlur,
+  required,
+}) => {
+  return (
+    <OsdsFormField error={error}>
+      {label && (
+        <label htmlFor={id} slot="label">
+          <OsdsText
+            level={ODS_THEME_TYPOGRAPHY_LEVEL.heading}
+            color={ODS_THEME_COLOR_INTENT.primary}
+          >
+            {label}:
+          </OsdsText>
+        </label>
+      )}
+      <OsdsTextarea
+        onOdsValueChange={onChange}
+        required={required}
+        name={name}
+        onOdsBlur={onBlur}
+        id={id}
+        value={value}
+        color={ODS_THEME_COLOR_INTENT.primary}
+      />
+    </OsdsFormField>
+  );
+};

packages/manager/apps/procedures/src/components/TextInput/TextInput.component.tsx

@@ -0,0 +1,67 @@
+import {
+  ODS_INPUT_TYPE,
+  OdsInputValueChangeEventDetail,
+  OsdsInputCustomEvent,
+} from '@ovhcloud/ods-components';
+import {
+  ODS_THEME_COLOR_INTENT,
+  ODS_THEME_TYPOGRAPHY_LEVEL,
+} from '@ovhcloud/ods-common-theming';
+import {
+  OsdsFormField,
+  OsdsInput,
+  OsdsText,
+} from '@ovhcloud/ods-components/react';
+import React, { FunctionComponent } from 'react';
+
+type Props = {
+  label?: string;
+  value?: string;
+  onChange?: (
+    event: OsdsInputCustomEvent<OdsInputValueChangeEventDetail>,
+  ) => void;
+  onBlur?: (event: OsdsInputCustomEvent<void>) => void;
+  name: string;
+  id: string;
+  error?: string;
+  required?: boolean;
+  helper?: string;
+};
+
+export const TextInput: FunctionComponent<Props> = ({
+  label,
+  error,
+  id,
+  onChange,
+  name,
+  value,
+  onBlur,
+  required,
+  helper,
+}) => {
+  return (
+    <OsdsFormField error={error}>
+      {label && (
+        <label htmlFor={id} slot="label">
+          <OsdsText
+            level={ODS_THEME_TYPOGRAPHY_LEVEL.heading}
+            color={ODS_THEME_COLOR_INTENT.primary}
+          >
+            {label}:
+          </OsdsText>
+        </label>
+      )}
+      <OsdsInput
+        onOdsValueChange={onChange}
+        required={required}
+        name={name}
+        onOdsInputBlur={onBlur}
+        id={id}
+        value={value}
+        type={ODS_INPUT_TYPE.text}
+        color={ODS_THEME_COLOR_INTENT.primary}
+      />
+      {helper && <OsdsText slot="helper">{helper}</OsdsText>}
+    </OsdsFormField>
+  );
+};

packages/manager/apps/procedures/src/pages/rgdp/RGDP.page.page.test.tsx

@@ -7,11 +7,18 @@ vi.mock('./rgdpIntroduction/RGDPIntroduction.component', () => ({
   RGDPIntroduction: () => <div>RGDPIntroduction</div>,
 }));
 
+vi.mock('./rgdpForm/RGDPForm.component', () => ({
+  RGDPForm: () => <div>RGDPForm</div>,
+}));
+
 describe('RGDP Component', () => {
   it('renders the component correctly', () => {
     render(<RGDP />);
 
     const introductionElement = screen.getByText('RGDPIntroduction');
+    const formElement = screen.getByText('RGDPForm');
+
     expect(introductionElement).toBeInTheDocument();
+    expect(formElement).toBeInTheDocument();
   });
 });

packages/manager/apps/procedures/src/pages/rgdp/RGDP.page.tsx

@@ -1,11 +1,13 @@
 import React from 'react';
 import { PageLayout } from '@/components/PageLayout/PageLayout.component';
 import { RGDPIntroduction } from './rgdpIntroduction/RGDPIntroduction.component';
+import { RGDPForm } from './rgdpForm/RGDPForm.component';
 
 export default function RGDP() {
   return (
     <PageLayout>
       <RGDPIntroduction />
+      <RGDPForm />
     </PageLayout>
   );
 }