Skip to content

Commit 2c6bda1

Browse files
FreddyNOFreddyNO
committed
Merged PR 81999: feat(notificationpanel): compactmode kan nå vise children
feat(notificationpanel): compactmode kan nå vise children Related work items: #324320
1 parent 63b9cc9 commit 2c6bda1

File tree

5 files changed

+103
-46
lines changed

5 files changed

+103
-46
lines changed

‎npm/designsystem/src/components/NotificationPanel/NotificationPanel.stories.tsx

+33
Original file line numberDiff line numberDiff line change
@@ -200,6 +200,39 @@ export const Compact: Story = {
200200
),
201201
};
202202

203+
export const CompactWithChildren: Story = {
204+
render: args => (
205+
<div style={{ backgroundColor: getColor('blueberry', 50), padding: '3rem' }}>
206+
<div className="row mt-6">
207+
<div className={'col-12'}>
208+
<NotificationPanel {...args} label={undefined} compactVariant={'basic'}>
209+
<div>
210+
{`På grunn av kommunesammenslåingen ved nyttår vil enkelte Helsenorge-tjenester være ustabile eller tidsvis utilgjenglig i en
211+
periode i begynnelsen av januar. Vi beklager ulempnene dette medfører og oppfordrer til å prøve igjen senere.`}
212+
<a href={'https://www.helsenorge.no'} target="_parent">
213+
{'Les mer om dine rettigheter her.'}
214+
</a>
215+
</div>
216+
</NotificationPanel>{' '}
217+
</div>
218+
</div>
219+
<div className="row mt-6">
220+
<div className={'col-12'}>
221+
<NotificationPanel {...args} label={undefined} compactVariant={'outline'}>
222+
<div>
223+
{`På grunn av kommunesammenslåingen ved nyttår vil enkelte Helsenorge-tjenester være ustabile eller tidsvis utilgjenglig i en
224+
periode i begynnelsen av januar. Vi beklager ulempnene dette medfører og oppfordrer til å prøve igjen senere.`}
225+
<a href={'https://www.helsenorge.no'} target="_parent">
226+
{'Les mer om dine rettigheter her.'}
227+
</a>
228+
</div>
229+
</NotificationPanel>
230+
</div>
231+
</div>
232+
</div>
233+
),
234+
};
235+
203236
export const WithSetWidth: Story = {
204237
render: args => (
205238
<GridExample>

‎npm/designsystem/src/components/NotificationPanel/NotificationPanel.tsx

+9-10
Original file line numberDiff line numberDiff line change
@@ -84,7 +84,6 @@ const NotificationPanel = React.forwardRef<HTMLDivElement, NotificationPanelProp
8484
compactVariant,
8585
label,
8686
fluid = false,
87-
size,
8887
className,
8988
labelId,
9089
role,
@@ -126,15 +125,17 @@ const NotificationPanel = React.forwardRef<HTMLDivElement, NotificationPanelProp
126125
),
127126
};
128127
const renderContent = (): JSX.Element => {
128+
const outlineVariant = compactVariant === 'outline';
129129
const contentClasses = classNames(styles['notification-panel__content']);
130130
const labelClasses = classNames(styles['notification-panel__label'], {
131131
[styles['notification-panel__label--no-content']]: !children && !expanderChildren,
132-
[styles['notification-panel__label__compact']]: !!compactVariant,
133-
[styles['notification-panel__label__compact--basic']]: compactVariant === 'basic',
132+
[styles['notification-panel__label--compact']]: !!compactVariant,
133+
[styles['notification-panel__label--outline']]: outlineVariant,
134134
});
135135
const childrenClasses = classNames(styles['notification-panel__children'], {
136-
[styles['notification-panel__label-and-content--spacing']]: label,
136+
[styles['notification-panel__children--with-label']]: label,
137137
[styles['notification-panel__children--expander-no-label']]: expanderChildren && !label,
138+
[styles['notification-panel__children--outline']]: outlineVariant,
138139
});
139140

140141
return (
@@ -144,7 +145,7 @@ const NotificationPanel = React.forwardRef<HTMLDivElement, NotificationPanelProp
144145
{label}
145146
</h1>
146147
)}
147-
{children && !compactVariant && <div className={childrenClasses}>{children}</div>}
148+
{children && <div className={childrenClasses}>{children}</div>}
148149
{expanderChildren && expanderButtonText && expanderButtonClosedText && !compactVariant && (
149150
<DetailButton
150151
expanderOpenFromStart={expanderOpenFromStart}
@@ -161,11 +162,9 @@ const NotificationPanel = React.forwardRef<HTMLDivElement, NotificationPanelProp
161162
styles['notification-panel'],
162163
styles[`notification-panel--${variant}`],
163164
{
164-
[styles[`notification-panel--${size}`]]: !!size,
165-
[styles['notification-panel__compact']]: !!compactVariant,
166-
[styles['notification-panel__compact--basic']]: compactVariant === 'basic',
167-
[styles['notification-panel__compact--outline']]: compactVariant === 'outline',
168-
[styles['notification-panel--has-children']]: !!children,
165+
[styles['notification-panel--compact']]: !!compactVariant,
166+
[styles['notification-panel--compact--basic']]: compactVariant === 'basic',
167+
[styles['notification-panel--compact--outline']]: compactVariant === 'outline',
169168
[styles['notification-panel--with-content']]: expanderChildren || (label && children),
170169
[styles['notification-panel--dismissable']]: dismissable,
171170
},

‎npm/designsystem/src/components/NotificationPanel/__snapshots__/NotificationPanel.test.tsx.snap

+26-4
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
exports[`Gitt at NotificationPanel skal vises Når bruker ser compact-variant Så vises innhold 1`] = `
44
<div>
55
<div
6-
class="notification-panel notification-panel--info notification-panel__compact notification-panel__compact--basic notification-panel--has-children"
6+
class="notification-panel notification-panel--info notification-panel--compact notification-panel--compact--basic"
77
data-analyticsid="notification-panel"
88
>
99
<span
@@ -29,10 +29,21 @@ exports[`Gitt at NotificationPanel skal vises Når bruker ser compact-variant S
2929
<div
3030
class="notification-panel__content"
3131
id="test"
32-
/>
32+
>
33+
<div
34+
class="notification-panel__children"
35+
>
36+
Some text here for testing.
37+
<a
38+
href="/"
39+
>
40+
Lenke
41+
</a>
42+
</div>
43+
</div>
3344
</div>
3445
<div
35-
class="notification-panel notification-panel--info notification-panel__compact notification-panel__compact--outline notification-panel--has-children"
46+
class="notification-panel notification-panel--info notification-panel--compact notification-panel--compact--outline"
3647
data-analyticsid="notification-panel"
3748
>
3849
<span
@@ -58,7 +69,18 @@ exports[`Gitt at NotificationPanel skal vises Når bruker ser compact-variant S
5869
<div
5970
class="notification-panel__content"
6071
id="test"
61-
/>
72+
>
73+
<div
74+
class="notification-panel__children notification-panel__children--outline"
75+
>
76+
Some text here for testing.
77+
<a
78+
href="/"
79+
>
80+
Lenke
81+
</a>
82+
</div>
83+
</div>
6284
</div>
6385
</div>
6486
`;

‎npm/designsystem/src/components/NotificationPanel/styles.module.scss

+28-26
Original file line numberDiff line numberDiff line change
@@ -21,9 +21,8 @@
2121
}
2222
}
2323

24-
&__compact {
24+
&--compact {
2525
width: fit-content;
26-
font-weight: 600;
2726
font-size: $font-size-xs;
2827
line-height: 1.25rem;
2928
box-shadow: none;
@@ -33,10 +32,6 @@
3332
padding-right: getSpacer(s);
3433
}
3534

36-
&--basic {
37-
font-weight: 400;
38-
}
39-
4035
&--outline {
4136
border: none;
4237
}
@@ -66,12 +61,12 @@
6661
background-color: $blueberry50;
6762
}
6863

69-
&--info.notification-panel__compact {
64+
&--info#{&}--compact {
7065
box-shadow: none;
7166
background-color: transparent;
7267
}
7368

74-
&--info.notification-panel__compact--basic {
69+
&--info#{&}--compact--basic {
7570
border: none;
7671
}
7772

@@ -80,12 +75,12 @@
8075
background-color: $banana50;
8176
}
8277

83-
&--warn.notification-panel__compact {
78+
&--warn#{&}--compact {
8479
box-shadow: none;
8580
background-color: transparent;
8681
}
8782

88-
&--warn.notification-panel__compact--basic {
83+
&--warn#{&}--compact--basic {
8984
border: none;
9085
}
9186

@@ -94,12 +89,12 @@
9489
background-color: $cherry50;
9590
}
9691

97-
&--alert.notification-panel__compact {
92+
&--alert#{&}--compact {
9893
box-shadow: none;
9994
background-color: transparent;
10095
}
10196

102-
&--alert.notification-panel__compact--basic {
97+
&--alert#{&}--compact--basic {
10398
border: none;
10499
}
105100

@@ -108,12 +103,12 @@
108103
background-color: $kiwi50;
109104
}
110105

111-
&--success.notification-panel__compact {
106+
&--success#{&}--compact {
112107
box-shadow: none;
113108
background-color: transparent;
114109
}
115110

116-
&--success.notification-panel__compact--basic {
111+
&--success#{&}--compact--basic {
117112
border: none;
118113
}
119114

@@ -132,10 +127,6 @@
132127
}
133128
}
134129

135-
&__children.notification-panel__label-and-content--spacing {
136-
font-weight: 500;
137-
}
138-
139130
&__label,
140131
&__children {
141132
font-size: $font-size-xs;
@@ -152,33 +143,44 @@
152143
font-weight: 700;
153144
margin: getSpacer(2xs) 0 0 0;
154145

155-
&__compact {
156-
font-weight: 600;
146+
&--compact {
157147
font-size: $font-size-xs;
158148
line-height: 1.25rem;
159149
}
160150

161-
&__compact--basic {
162-
font-weight: 400;
151+
&--no-content {
152+
margin: 0;
163153
}
164-
}
165154

166-
&__label--no-content {
167-
margin: 0;
168-
font-weight: 600;
155+
&--compact,
156+
&--no-content {
157+
font-weight: 600;
158+
}
159+
160+
&--outline {
161+
font-weight: 500;
162+
}
169163
}
170164

171165
&__children {
172166
font-weight: 600;
173167
padding: getSpacer(3xs) 0;
174168

169+
&--with-label {
170+
font-weight: 500;
171+
}
172+
175173
&--expander-no-label {
176174
margin: getSpacer(2xs) 0 0 0;
177175

178176
@media (max-width: map.get($grid-breakpoints, lg)) {
179177
padding-top: 0;
180178
}
181179
}
180+
181+
&--outline {
182+
font-weight: 500;
183+
}
182184
}
183185

184186
&__icon {

‎npm/designsystem/src/components/NotificationPanel/styles.module.scss.d.ts

+7-6
Original file line numberDiff line numberDiff line change
@@ -6,18 +6,19 @@ export type Styles = {
66
'notification-panel': string;
77
'notification-panel__children': string;
88
'notification-panel__children--expander-no-label': string;
9+
'notification-panel__children--outline': string;
10+
'notification-panel__children--with-label': string;
911
'notification-panel__close': string;
10-
'notification-panel__compact': string;
11-
'notification-panel__compact--basic': string;
12-
'notification-panel__compact--outline': string;
1312
'notification-panel__content': string;
1413
'notification-panel__icon': string;
1514
'notification-panel__label': string;
16-
'notification-panel__label__compact': string;
17-
'notification-panel__label__compact--basic': string;
15+
'notification-panel__label--compact': string;
1816
'notification-panel__label--no-content': string;
19-
'notification-panel__label-and-content--spacing': string;
17+
'notification-panel__label--outline': string;
2018
'notification-panel--alert': string;
19+
'notification-panel--compact': string;
20+
'notification-panel--compact--basic': string;
21+
'notification-panel--compact--outline': string;
2122
'notification-panel--dismissable': string;
2223
'notification-panel--info': string;
2324
'notification-panel--large': string;

0 commit comments

Comments
 (0)