feat: Desing change (#276)

Author: NasgulNexus

docs/styles.md

@@ -1,5 +1,6 @@
 import React from 'react';
 
+// eslint-disable-next-line import/no-extraneous-dependencies
 import type {JsonObject} from '@playwright/experimental-ct-core/types/component';
 import type {MountOptions} from '@playwright/experimental-ct-react';
 
@@ -9,14 +10,19 @@ export const mountFixture: PlaywrightFixture<MountFixture> = async ({mount: base
     const mount = async (
         component: JSX.Element,
         options?: MountOptions<JsonObject> | undefined,
+        style?: React.CSSProperties | undefined,
     ) => {
         return await baseMount(
             <div
-                style={{
-                    padding: 20,
-                    width: 'fit-content',
-                    height: 'fit-content',
-                }}
+                style={
+                    style
+                        ? style
+                        : {
+                              padding: 20,
+                              width: 'fit-content',
+                              height: 'fit-content',
+                          }
+                }
                 className="playwright-wrapper-test"
             >
                 {component}

playwright/core/mountFixture.tsx

@@ -1,4 +1,3 @@
-import type {ComponentFixtures} from '@playwright/experimental-ct-react';
 import type {
     Locator,
     PageScreenshotOptions,
@@ -8,6 +7,26 @@ import type {
     PlaywrightWorkerOptions,
     TestFixture,
 } from '@playwright/test';
+import type {MountOptions} from '@playwright/experimental-ct-react';
+
+type JsonPrimitive = string | number | boolean | null;
+type JsonValue = JsonPrimitive | JsonObject | JsonArray;
+type JsonArray = JsonValue[];
+
+type JsonObject = {[Key in string]?: JsonValue};
+
+interface MountResult extends Locator {
+    unmount(): Promise<void>;
+    update(component: JSX.Element): Promise<void>;
+}
+
+interface ComponentFixtures {
+    mount<HooksConfig extends JsonObject>(
+        component: JSX.Element,
+        options?: MountOptions<HooksConfig>,
+        style?: React.CSSProperties | undefined,
+    ): Promise<MountResult>;
+}
 
 type PlaywrightTestFixtures = PlaywrightTestArgs & PlaywrightTestOptions & ComponentFixtures;
 type PlaywrightWorkerFixtures = PlaywrightWorkerArgs & PlaywrightWorkerOptions;

playwright/core/types.ts

@@ -91,7 +91,7 @@
     }
 
     &__interal-actions {
-        margin-right: var(--df-accordeon-card-interal-actions-margin-right, $df-offset-5);
+        margin-right: var(--df-accordeon-card-interal-actions-margin-right, var(--g-spacing-1));
     }
 
     &__toggle-icon_open {

src/lib/kit/components/AccordeonCard/AccordeonCard.scss

@@ -59,7 +59,7 @@
         align-items: center;
 
         & > * {
-            margin-left: var(--df-card-header-right-child-margin-left, $df-offset-10);
+            margin-left: var(--df-card-header-right-child-margin-left, var(--g-spacing-2));
         }
     }
 
@@ -75,7 +75,7 @@
     }
 
     &__note {
-        margin-left: var(--df-card-note-margin-left, $df-offset-5);
+        margin-left: var(--df-card-note-margin-left, var(--g-spacing-1));
 
         .gc-help-popover {
             display: flex;