feat(plate): subAddons slot, on/off border&shadow&borderRadius, new v…

…iew 'custom' (#158)

* feat: subAddons slot, on/of border&shadow&borderRadis, new view 'custom'

* fix: element alignment, rework subAddons render

* refactor: rework buttons render

* chore: update screenshots

* fix: fix alignment children withoout title and any addons

* fix: component padding

* docs(plate): update docs

* fix(plate): fix jumping component on border turn off/on

* docs: fix regexp for css-vars block (#161)

* fix(plate): fix otline

* refactor(plate): buttonList components for render Buttons, ds

* fix(plate): update screenshots

* fix(plate): fix defautlt buttons margins, rect plate in docs

* fix(plate): fix test

* fix(plate): use variable for left border

Co-authored-by: Developer <developer@MacBook-Pro-som-tillhor-admin.local>
Co-authored-by: EGNKupava <62112300+EGNKupava@users.noreply.github.com>

.storybook/public/global.css

@@ -862,3 +862,7 @@ table.docblock-argstable tbody.docblock-argstable-body td div:only-child span {
     border-color: var(--color-light-border-secondary);
     background: var(--color-light-bg-secondary);
 }
+
+.plateGlobal {
+    --plate-background: url('./images/docs-background.png');
+}

packages/alert/src/Component.tsx

@@ -10,9 +10,9 @@ export type AlertProps = Omit<PlateProps, 'foldable' | 'defaultFolded' | 'leftAd
 export const Alert: FC<AlertProps> = ({ className, title, ...restProps }) => (
     <Plate
         className={cn(styles.component, className)}
-        buttonsClassName={styles.buttons}
-        contentClassName={styles.content}
         title={title ? <span className={styles.title}>{title}</span> : null}
+        rounded={false}
+        limitContentWidth={false}
         {...restProps}
     />
 );

packages/alert/src/index.module.css

@@ -1,25 +1,9 @@
 @import '../../themes/src/default.css';
 
 .component {
-    border-radius: var(--border-radius-xs) 0 0 var(--border-radius-xs);
-    border-top: 0;
-    border-right: 0;
-    border-bottom: 0;
-    border-left-width: 2px;
-    padding-top: var(--gap-s);
-    padding-bottom: var(--gap-s);
-    padding-right: var(--gap-s);
     min-height: 48px;
 }
 
-.buttons {
-    margin-top: var(--gap-m);
-}
-
 .title {
     @mixin accent_primary_medium;
 }
-
-.content {
-    max-width: none;
-}

packages/plate/src/Component.test.tsx

@@ -34,7 +34,7 @@ describe('Plate', () => {
         expect(getByTestId(dataTestId).tagName).toBe('DIV');
     });
 
-    it('should render buttons size=xs, first view=outlined, others view=link', () => {
+    it('should render buttons size=xxs, first view=secondary, others view=link', () => {
         const { queryByTestId } = render(
             <Plate
                 buttons={[
@@ -49,28 +49,30 @@ describe('Plate', () => {
         expect(queryByTestId('button-2')).toBeInTheDocument();
         expect(queryByTestId('button-3')).toBeInTheDocument();
 
-        expect(queryByTestId('button-1')).toHaveClass('xs');
-        expect(queryByTestId('button-2')).toHaveClass('xs');
-        expect(queryByTestId('button-3')).toHaveClass('xs');
+        expect(queryByTestId('button-1')).toHaveClass('xxs');
+        expect(queryByTestId('button-2')).toHaveClass('xxs');
+        expect(queryByTestId('button-3')).toHaveClass('xxs');
 
-        expect(queryByTestId('button-1')).toHaveClass('outlined');
+        expect(queryByTestId('button-1')).toHaveClass('secondary');
         expect(queryByTestId('button-2')).toHaveClass('link');
         expect(queryByTestId('button-3')).toHaveClass('link');
     });
 
     describe('Classes tests', () => {
         it('should set `className` class', () => {
             const className = 'test-class';
-            const { container } = render(<Plate className={className} />);
+            const dataTestId = 'test-id';
+            const { getByTestId } = render(<Plate className={className} dataTestId={dataTestId} />);
 
-            expect(container.firstElementChild).toHaveClass(className);
+            expect(getByTestId(dataTestId)).toHaveClass(className);
         });
 
         it('should set `positive` class if `view` prop is `positive`', () => {
             const view = 'positive';
-            const { container } = render(<Plate view={view} />);
+            const dataTestId = 'test-id';
+            const { getByTestId } = render(<Plate view={view} dataTestId={dataTestId} />);
 
-            expect(container.firstElementChild).toHaveClass(view);
+            expect(getByTestId(dataTestId)).toHaveClass(view);
         });
     });