From 4d51b6bb0f2b45f75925d3d9ed17da08ab32cf78 Mon Sep 17 00:00:00 2001 From: Ole Martin Handeland Date: Wed, 20 Jul 2022 18:31:15 +0200 Subject: [PATCH 1/4] Preparing for a panel type with error colors (figma color and icon currently missing) --- src/components/Panel/Panel.module.css | 6 ++++++ src/components/Panel/Panel.stories.tsx | 22 +++++++++++++++++----- src/components/Panel/Panel.tsx | 4 +++- 3 files changed, 26 insertions(+), 6 deletions(-) diff --git a/src/components/Panel/Panel.module.css b/src/components/Panel/Panel.module.css index 4d34f747..db4d3260 100644 --- a/src/components/Panel/Panel.module.css +++ b/src/components/Panel/Panel.module.css @@ -80,6 +80,12 @@ background-color: var(--component-panel-color-background-warning); } +.panel__content-wrapper--error, +.panel__pointer--error { + background-color: #F9CAD3; + /*background-color: var(--component-panel-color-background-error);*/ +} + .panel__content-wrapper { display: flex; gap: var(--panel-content-gap); diff --git a/src/components/Panel/Panel.stories.tsx b/src/components/Panel/Panel.stories.tsx index cd429c83..af3e9045 100644 --- a/src/components/Panel/Panel.stories.tsx +++ b/src/components/Panel/Panel.stories.tsx @@ -38,6 +38,18 @@ export default { const Template: ComponentStory = (args) => ; +export const Success = Template.bind({}); +Success.args = { + variant: PanelVariant.Success, +}; +Success.parameters = { + docs: { + description: { + story: 'Success beskrivelse', + }, + }, +}; + export const Info = Template.bind({}); Info.parameters = { docs: { @@ -59,14 +71,14 @@ Warning.parameters = { }, }; -export const Success = Template.bind({}); -Success.args = { - variant: PanelVariant.Success, +export const Error = Template.bind({}); +Error.args = { + variant: PanelVariant.Error, }; -Success.parameters = { +Error.parameters = { docs: { description: { - story: 'Success beskrivelse', + story: 'Error beskrivelse', }, }, }; diff --git a/src/components/Panel/Panel.tsx b/src/components/Panel/Panel.tsx index 4f39124b..f8a2a050 100644 --- a/src/components/Panel/Panel.tsx +++ b/src/components/Panel/Panel.tsx @@ -9,9 +9,10 @@ import { ReactComponent as SuccessIcon } from './success.svg'; import classes from './Panel.module.css'; export enum PanelVariant { + Success = 'success', Info = 'info', Warning = 'warning', - Success = 'success', + Error = 'error', } interface RenderIconProps { @@ -34,6 +35,7 @@ export interface PanelProps extends UseMobileLayoutProps { const defaultRenderIcon = ({ size, variant }: RenderIconProps) => { switch (variant) { case PanelVariant.Info: + case PanelVariant.Error: case PanelVariant.Warning: return ( Date: Wed, 20 Jul 2022 18:34:52 +0200 Subject: [PATCH 2/4] Adding TODOs and using figma color (albeit not the correct one) --- src/components/Panel/Panel.module.css | 4 ++-- src/components/Panel/Panel.tsx | 1 + 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/Panel/Panel.module.css b/src/components/Panel/Panel.module.css index db4d3260..055730f3 100644 --- a/src/components/Panel/Panel.module.css +++ b/src/components/Panel/Panel.module.css @@ -82,8 +82,8 @@ .panel__content-wrapper--error, .panel__pointer--error { - background-color: #F9CAD3; - /*background-color: var(--component-panel-color-background-error);*/ + /* TODO: Replace with specific panel color */ + background-color: var(--colors-red-300); } .panel__content-wrapper { diff --git a/src/components/Panel/Panel.tsx b/src/components/Panel/Panel.tsx index f8a2a050..30cf243c 100644 --- a/src/components/Panel/Panel.tsx +++ b/src/components/Panel/Panel.tsx @@ -33,6 +33,7 @@ export interface PanelProps extends UseMobileLayoutProps { } const defaultRenderIcon = ({ size, variant }: RenderIconProps) => { + // TODO: Add more relevant icons for error (and warning?) switch (variant) { case PanelVariant.Info: case PanelVariant.Error: From c61615b7694cf7f22925ce42ddeb9ca651a3e721 Mon Sep 17 00:00:00 2001 From: Ole Martin Handeland Date: Wed, 20 Jul 2022 18:36:56 +0200 Subject: [PATCH 3/4] Adding unit test --- src/components/Panel/Panel.test.tsx | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/src/components/Panel/Panel.test.tsx b/src/components/Panel/Panel.test.tsx index b61c3253..62b7d788 100644 --- a/src/components/Panel/Panel.test.tsx +++ b/src/components/Panel/Panel.test.tsx @@ -95,6 +95,15 @@ describe('Panel', () => { ).not.toBeInTheDocument(); }); + it('should show info icon when variant is error', () => { + render({ variant: PanelVariant.Error }); + expect(screen.getByTestId('panel-icon-wrapper')).toBeInTheDocument(); + expect(screen.getByTestId('panel-icon-info')).toBeInTheDocument(); + expect( + screen.queryByTestId('panel-icon-success'), + ).not.toBeInTheDocument(); + }); + it('should show success icon when variant is success', () => { render({ variant: PanelVariant.Success }); expect(screen.getByTestId('panel-icon-wrapper')).toBeInTheDocument(); From 75130d45f691409c73406d3175c6c41c58f23d1f Mon Sep 17 00:00:00 2001 From: Ole Martin Handeland Date: Thu, 21 Jul 2022 10:40:56 +0200 Subject: [PATCH 4/4] Removing TODOs --- src/components/Panel/Panel.module.css | 1 - src/components/Panel/Panel.tsx | 1 - 2 files changed, 2 deletions(-) diff --git a/src/components/Panel/Panel.module.css b/src/components/Panel/Panel.module.css index 055730f3..f56e8a1b 100644 --- a/src/components/Panel/Panel.module.css +++ b/src/components/Panel/Panel.module.css @@ -82,7 +82,6 @@ .panel__content-wrapper--error, .panel__pointer--error { - /* TODO: Replace with specific panel color */ background-color: var(--colors-red-300); } diff --git a/src/components/Panel/Panel.tsx b/src/components/Panel/Panel.tsx index 30cf243c..f8a2a050 100644 --- a/src/components/Panel/Panel.tsx +++ b/src/components/Panel/Panel.tsx @@ -33,7 +33,6 @@ export interface PanelProps extends UseMobileLayoutProps { } const defaultRenderIcon = ({ size, variant }: RenderIconProps) => { - // TODO: Add more relevant icons for error (and warning?) switch (variant) { case PanelVariant.Info: case PanelVariant.Error: