Feat/improvepanel (#1226)

* feat: add tag prop to Panel * feat: add buttons prop to Panel * feat: add dismissable prop to Panel * feat: give Panel better status styles * test: improve coverage of Panel dismissable * feat: refactor a bit * test: improve coverage
bylapidist · Oct 1, 2022 · 24e03d3 · 24e03d3
1 parent 9850226
commit 24e03d3
Show file tree

Hide file tree

Showing 33 changed files with 3,075 additions and 931 deletions.
diff --git a/src/components/button/Button.spec.tsx b/src/components/button/Button.spec.tsx
@@ -21,7 +21,7 @@ test('it works', () => {
 
 test('it works with size small', () => {
     const { container } = setup(
-        <Button type="button" kind="secondary" sizes="small">
+        <Button type="button" kind="secondary" variant="small">
             Hello world
         </Button>
     );
@@ -30,7 +30,7 @@ test('it works with size small', () => {
 
 test('it works with size medium', () => {
     const { container } = setup(
-        <Button type="button" kind="secondary" sizes="small">
+        <Button type="button" kind="secondary" variant="medium">
             Hello world
         </Button>
     );
@@ -39,7 +39,7 @@ test('it works with size medium', () => {
 
 test('it works with size large', () => {
     const { container } = setup(
-        <Button type="button" kind="secondary" sizes="small">
+        <Button type="button" kind="secondary" variant="large">
             Hello world
         </Button>
     );

diff --git a/src/components/button/__snapshots__/Button.spec.tsx.snap b/src/components/button/__snapshots__/Button.spec.tsx.snap
@@ -11,8 +11,8 @@ exports[`it works 1`] = `
   border-radius: 0.3rem;
   border-width: 2px;
   box-shadow: 0 2px 3px rgba(0,0,0,0.1);
-  padding-left: 1rem;
-  padding-right: 1rem;
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
   background-color: #17a3a5;
@@ -49,8 +49,8 @@ exports[`it works 1`] = `
   border-radius: 0.3rem;
   border-width: 2px;
   box-shadow: 0 2px 3px rgba(0,0,0,0.1);
-  padding-left: 1rem;
-  padding-right: 1rem;
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
   background-color: #17a3a5;
@@ -110,11 +110,11 @@ exports[`it works with anchor 1`] = `
   border-radius: 0.3rem;
   border-width: 2px;
   box-shadow: 0 2px 3px rgba(0,0,0,0.1);
-  padding-left: 1rem;
-  padding-right: 1rem;
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
-  background-color: transparent;
+  background-color: white;
   color: #17a3a5;
   border-color: #d4d4d4;
 }
@@ -148,11 +148,11 @@ exports[`it works with anchor 1`] = `
   border-radius: 0.3rem;
   border-width: 2px;
   box-shadow: 0 2px 3px rgba(0,0,0,0.1);
-  padding-left: 1rem;
-  padding-right: 1rem;
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
-  background-color: transparent;
+  background-color: white;
   color: #17a3a5;
   border-color: #d4d4d4;
 }
@@ -210,11 +210,11 @@ exports[`it works with icon 1`] = `
   border-radius: 0.3rem;
   border-width: 2px;
   box-shadow: 0 2px 3px rgba(0,0,0,0.1);
-  padding-left: 1rem;
-  padding-right: 1rem;
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
-  background-color: transparent;
+  background-color: white;
   color: #17a3a5;
   border-color: #d4d4d4;
 }
@@ -248,11 +248,11 @@ exports[`it works with icon 1`] = `
   border-radius: 0.3rem;
   border-width: 2px;
   box-shadow: 0 2px 3px rgba(0,0,0,0.1);
-  padding-left: 1rem;
-  padding-right: 1rem;
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
-  background-color: transparent;
+  background-color: white;
   color: #17a3a5;
   border-color: #d4d4d4;
 }
@@ -325,11 +325,11 @@ exports[`it works with loading 1`] = `
   border-radius: 0.3rem;
   border-width: 2px;
   box-shadow: 0 2px 3px rgba(0,0,0,0.1);
-  padding-left: 1rem;
-  padding-right: 1rem;
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
-  background-color: transparent;
+  background-color: white;
   color: #17a3a5;
   border-color: #d4d4d4;
 }
@@ -363,11 +363,11 @@ exports[`it works with loading 1`] = `
   border-radius: 0.3rem;
   border-width: 2px;
   box-shadow: 0 2px 3px rgba(0,0,0,0.1);
-  padding-left: 1rem;
-  padding-right: 1rem;
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
-  background-color: transparent;
+  background-color: white;
   color: #17a3a5;
   border-color: #d4d4d4;
 }
@@ -502,11 +502,11 @@ exports[`it works with size large 1`] = `
   border-radius: 0.3rem;
   border-width: 2px;
   box-shadow: 0 2px 3px rgba(0,0,0,0.1);
-  padding-left: 1rem;
-  padding-right: 1rem;
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
-  background-color: transparent;
+  background-color: white;
   color: #17a3a5;
   border-color: #d4d4d4;
 }
@@ -540,11 +540,11 @@ exports[`it works with size large 1`] = `
   border-radius: 0.3rem;
   border-width: 2px;
   box-shadow: 0 2px 3px rgba(0,0,0,0.1);
-  padding-left: 1rem;
-  padding-right: 1rem;
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
-  background-color: transparent;
+  background-color: white;
   color: #17a3a5;
   border-color: #d4d4d4;
 }
@@ -580,7 +580,6 @@ exports[`it works with size large 1`] = `
 
 <button
   class="c0 sc-bcXHqe c1"
-  sizes="small"
   type="button"
 >
   <div
@@ -597,16 +596,16 @@ exports[`it works with size medium 1`] = `
   text-align: center;
   display: inline-block;
   position: relative;
-  font-size: 1rem;
+  font-size: 0.875rem;
   font-weight: 500;
   border-radius: 0.3rem;
   border-width: 2px;
   box-shadow: 0 2px 3px rgba(0,0,0,0.1);
-  padding-left: 1rem;
-  padding-right: 1rem;
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
-  background-color: transparent;
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+  background-color: white;
   color: #17a3a5;
   border-color: #d4d4d4;
 }
@@ -633,18 +632,18 @@ exports[`it works with size medium 1`] = `
   text-align: center;
   display: inline-block;
   position: relative;
-  font-size: 1rem;
+  font-size: 0.875rem;
   font-weight: 500;
   font-family: Montserrat,sans-serif;
   line-height: 2;
   border-radius: 0.3rem;
   border-width: 2px;
   box-shadow: 0 2px 3px rgba(0,0,0,0.1);
-  padding-left: 1rem;
-  padding-right: 1rem;
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
-  background-color: transparent;
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+  background-color: white;
   color: #17a3a5;
   border-color: #d4d4d4;
 }
@@ -680,7 +679,6 @@ exports[`it works with size medium 1`] = `
 
 <button
   class="c0 sc-bcXHqe c1"
-  sizes="small"
   type="button"
 >
   <div
@@ -697,16 +695,16 @@ exports[`it works with size small 1`] = `
   text-align: center;
   display: inline-block;
   position: relative;
-  font-size: 1rem;
+  font-size: 0.75rem;
   font-weight: 500;
   border-radius: 0.3rem;
   border-width: 2px;
   box-shadow: 0 2px 3px rgba(0,0,0,0.1);
-  padding-left: 1rem;
-  padding-right: 1rem;
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
-  background-color: transparent;
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+  padding-top: 0;
+  padding-bottom: 0;
+  background-color: white;
   color: #17a3a5;
   border-color: #d4d4d4;
 }
@@ -733,18 +731,18 @@ exports[`it works with size small 1`] = `
   text-align: center;
   display: inline-block;
   position: relative;
-  font-size: 1rem;
+  font-size: 0.75rem;
   font-weight: 500;
   font-family: Montserrat,sans-serif;
   line-height: 2;
   border-radius: 0.3rem;
   border-width: 2px;
   box-shadow: 0 2px 3px rgba(0,0,0,0.1);
-  padding-left: 1rem;
-  padding-right: 1rem;
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
-  background-color: transparent;
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+  padding-top: 0;
+  padding-bottom: 0;
+  background-color: white;
   color: #17a3a5;
   border-color: #d4d4d4;
 }
@@ -780,7 +778,6 @@ exports[`it works with size small 1`] = `
 
 <button
   class="c0 sc-bcXHqe c1"
-  sizes="small"
   type="button"
 >
   <div

diff --git a/src/components/button/styles.ts b/src/components/button/styles.ts
@@ -73,7 +73,7 @@ const buttonColors = (dark: string, base: string, kind: string) => {
 
     return {
         borderColor: borderColor(),
-        backgroundColor: isPrimary ? base : 'transparent',
+        backgroundColor: isPrimary ? base : lightBase,
         textColor: textColor(),
         hoverBackgroundColor: isPrimary ? dark : lightestGrey,
         hoverTextColor: hoverTextColor(),
@@ -103,7 +103,7 @@ const buttonBaseStyles: Styles = {
     position: 'relative',
     borderWidth: '1',
     textAlign: 'center',
-    paddingX: '4',
+    paddingX: '3',
     borderRadius: '2',
     borderStyle: 'solid',
     fontWeight: '500'

diff --git a/src/components/index.ts b/src/components/index.ts
@@ -9,7 +9,6 @@ export * from './list';
 export * from './logo';
 export * from './panel';
 export * from './spinner';
-export * from './status-message';
 export * from './tag';
 export * from './text';
 export * from './theme-provider';

diff --git a/src/components/panel/Panel.spec.tsx b/src/components/panel/Panel.spec.tsx
@@ -1,10 +1,10 @@
 import * as React from 'react';
-import { render } from '@testing-library/react';
+import { render, fireEvent } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import 'jest-styled-components';
 
 import { ThemeProvider } from '../theme-provider';
-import { Panel } from './index';
+import { Panel, PanelStatusType } from './index';
 import { ElevationHeight } from '../elevated';
 
 const setup = (panel: React.ReactElement) =>
@@ -25,11 +25,65 @@ test('it works with heading', () => {
     expect(container.querySelectorAll('h2').length).toBe(1);
 });
 
+test('it works with tag', () => {
+    const { container, getByText } = setup(
+        <Panel tag={{ title: 'v1.0.0', props: { kind: 'primary' } }}>
+            body
+        </Panel>
+    );
+    expect(container.firstChild).toMatchSnapshot();
+    expect(getByText('v1.0.0')).toBeTruthy();
+    expect(getByText('body')).toBeTruthy();
+});
+
+test('it works with button', () => {
+    const { container, getByText, getAllByRole } = setup(
+        <Panel buttons={[{ title: 'Edit', props: { kind: 'primary' } }]}>
+            body
+        </Panel>
+    );
+    expect(container.firstChild).toMatchSnapshot();
+    expect(getByText('Edit')).toBeTruthy();
+    expect(getByText('body')).toBeTruthy();
+    expect(getAllByRole('button').length).toBe(1);
+});
+
+test('it works with dismissable', () => {
+    const onDismissMock = jest.fn();
+    const { container, getByText, getAllByRole } = setup(
+        <Panel dismissable onDismiss={onDismissMock}>
+            body
+        </Panel>
+    );
+    expect(container.firstChild).toMatchSnapshot();
+    expect(getByText('body')).toBeTruthy();
+    expect(getAllByRole('button').length).toBe(1);
+    fireEvent.click(getAllByRole('button')[0]);
+    expect(onDismissMock).toHaveBeenCalledTimes(1);
+});
+
 test('it works loading', () => {
     const { container } = setup(<Panel loading>Hello world</Panel>);
     expect(container.firstChild).toMatchSnapshot();
 });
 
+test('it works with image', () => {
+    const { container, getByAltText } = setup(
+        <Panel image={{ src: '', alt: 'test' }}>Hello world</Panel>
+    );
+    expect(container.firstChild).toMatchSnapshot();
+    expect(getByAltText('test')).toBeTruthy();
+});
+
+test('it works with status', () => {
+    const statuses: PanelStatusType[] = ['none', 'info', 'warning', 'error'];
+
+    statuses.forEach((status) => {
+        const { container } = setup(<Panel status={status}>Hello world</Panel>);
+        expect(container.firstChild).toMatchSnapshot();
+    });
+});
+
 test('it works with elevation', () => {
     const elevations: ElevationHeight[] = ['1', '2', '3', '4'];