Implement new designs for Kubit and Wireframe

This commit introduces new designs for the Kubit and Wireframe components. The updated designs enhance the user interface, improving the overall user experience and aligning with the latest design guidelines. These changes will ensure that our application remains modern and user-friendly.

Author: Hector Arce De Las Heras

src/designSystem/kubit/components/checkbox/styles.ts

@@ -101,6 +101,7 @@ export const CHECKBOX_STYLES: CheckboxStylesType<CheckboxVariantType> = {
         color: COLORS.DISABLED.color_accentDisabled_icon_50,
       },
     },
+    // deprecated - This `error` state will be deprecated in the future
     [CheckboxStateType.ERROR]: {
       ...commonProps,
       checkbox: {

src/designSystem/kubit/components/inputDate/styles.ts

@@ -1,5 +1,5 @@
 // types
-import { InputHelpMessagePosition, InputState } from '@/components/input/types';
+import { InputHelpMessagePosition, InputState, LABEL_TYPE } from '@/components/input/types';
 import { InputDateStylesType } from '@/components/inputDate/types';
 import { DeviceBreakpointsType } from '@/types';
 
@@ -26,6 +26,9 @@ const commonProps = {
     [DeviceBreakpointsType.TABLET]: true,
     [DeviceBreakpointsType.MOBILE]: true,
   },
+  label: {
+    type: LABEL_TYPE.STANDARD,
+  },
 };
 
 export const INPUT_DATE_STYLES: InputDateStylesType<InputDateVariantType> = {

src/designSystem/kubit/components/radioButton/styles.ts

@@ -89,6 +89,7 @@ const radioButtonDefaultTokens = {
     ...commonVariantsTokens,
     radioButton: {
       ...commonVariantsTokens.radioButton,
+      cursor: 'not-allowed',
       background_color: COLORS.DISABLED.color_accentDisabled_bg_150,
       border_color: COLORS.DISABLED.color_accentDisabled_border_50,
     },
@@ -97,6 +98,7 @@ const radioButtonDefaultTokens = {
     ...commonVariantsTokens,
     radioButton: {
       ...commonVariantsTokens.radioButton,
+      cursor: 'not-allowed',
       background_color: COLORS.DISABLED.color_accentDisabled_bg_150,
       border_color: COLORS.DISABLED.color_accentDisabled_border_50,
     },

src/designSystem/kubit/components/radioButtonGroup/styles.ts

@@ -88,6 +88,7 @@ const radioButtonDefaultTokens = {
     ...commonVariantsTokens,
     radioButton: {
       ...commonVariantsTokens.radioButton,
+      cursor: 'not-allowed',
       background_color: COLORS.DISABLED.color_accentDisabled_bg_150,
       border_color: COLORS.DISABLED.color_accentDisabled_border_50,
     },
@@ -96,6 +97,7 @@ const radioButtonDefaultTokens = {
     ...commonVariantsTokens,
     radioButton: {
       ...commonVariantsTokens.radioButton,
+      cursor: 'not-allowed',
       background_color: COLORS.DISABLED.color_accentDisabled_bg_150,
       border_color: COLORS.DISABLED.color_accentDisabled_border_50,
     },

src/designSystem/kubitWireframe/commons/components/checkbox/styles.ts

@@ -105,6 +105,7 @@ export const getCheckboxStyles = (COLORS: {
           color: COLORS.DISABLED.color_accentDisabled_icon_50,
         },
       },
+      // deprecated - This `error` state will be deprecated in the future
       [CheckboxStateType.ERROR]: {
         ...commonProps(COLORS),
         checkbox: {

src/designSystem/kubitWireframe/commons/components/inputDate/styles.ts

@@ -1,4 +1,4 @@
-import { InputHelpMessagePosition, InputState } from '@/components/input/types';
+import { InputHelpMessagePosition, InputState, LABEL_TYPE } from '@/components/input/types';
 import { InputDateStylesType } from '@/components/inputDate/types';
 import { DeviceBreakpointsType } from '@/types';
 
@@ -24,6 +24,9 @@ const commonProps = {
     [DeviceBreakpointsType.TABLET]: true,
     [DeviceBreakpointsType.MOBILE]: true,
   },
+  label: {
+    type: LABEL_TYPE.STANDARD,
+  },
 };
 
 export const getInputDateStyles = (COLORS: {

src/designSystem/kubitWireframe/commons/components/radioButton/styles.ts

@@ -90,6 +90,7 @@ export const getRadioButtonGroupStyles = (COLORS: {
         ...commonVariantsTokens(COLORS),
         radioButton: {
           ...commonVariantsTokens(COLORS).radioButton,
+          cursor: 'not-allowed',
           background_color: COLORS.DISABLED.color_accentDisabled_bg_150,
           border_color: COLORS.DISABLED.color_accentDisabled_border_50,
         },
@@ -98,6 +99,7 @@ export const getRadioButtonGroupStyles = (COLORS: {
         ...commonVariantsTokens(COLORS),
         radioButton: {
           ...commonVariantsTokens(COLORS).radioButton,
+          cursor: 'not-allowed',
           background_color: COLORS.DISABLED.color_accentDisabled_bg_150,
           border_color: COLORS.DISABLED.color_accentDisabled_border_50,
         },

src/designSystem/kubitWireframe/commons/components/radioButtonGroup/styles.ts

@@ -90,6 +90,7 @@ export const getRadioButtonGroupStyles = (COLORS: {
         ...commonVariantsTokens(COLORS),
         radioButton: {
           ...commonVariantsTokens(COLORS).radioButton,
+          cursor: 'not-allowed',
           background_color: COLORS.DISABLED.color_accentDisabled_bg_150,
           border_color: COLORS.DISABLED.color_accentDisabled_border_50,
         },
@@ -98,6 +99,7 @@ export const getRadioButtonGroupStyles = (COLORS: {
         ...commonVariantsTokens(COLORS),
         radioButton: {
           ...commonVariantsTokens(COLORS).radioButton,
+          cursor: 'not-allowed',
           background_color: COLORS.DISABLED.color_accentDisabled_bg_150,
           border_color: COLORS.DISABLED.color_accentDisabled_border_50,
         },