@dbcdk/react-components 0.0.163 → 0.0.165

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -42,6 +42,10 @@
42
42
  min-width: 0; /* required for truncation inside flex */
43
43
  }
44
44
 
45
+ h2.headline {
46
+ min-block-size: var(--component-size-md);
47
+ }
48
+
45
49
  /* CollapsibleHeadline wrapper */
46
50
  .collapsibleRoot {
47
51
  display: flex;
@@ -221,6 +221,7 @@
221
221
 
222
222
  .horizontal .content {
223
223
  padding-top: var(--spacing-lg);
224
+ padding-inline: var(--spacing-lg);
224
225
  }
225
226
 
226
227
  .footer {
@@ -228,6 +229,7 @@
228
229
  background: var(--color-bg-surface-subtle);
229
230
  display: flex;
230
231
  justify-content: center;
232
+ padding-inline: var(--spacing-md);
231
233
 
232
234
  /* When there is extra space (content is short), this pushes footer to the bottom.
233
235
  When content is long, footer follows content normally and is reached by scrolling.
@@ -236,6 +238,10 @@
236
238
  flex: 0 0 auto;
237
239
  }
238
240
 
241
+ .horizontal .footer {
242
+ padding-inline: var(--spacing-lg);
243
+ }
244
+
239
245
  /* Header slot wrappers */
240
246
  .headerContainer {
241
247
  display: flex;
@@ -244,6 +250,10 @@
244
250
  padding-inline: var(--spacing-md);
245
251
  }
246
252
 
253
+ .horizontal .headerContainer {
254
+ padding-inline: var(--spacing-lg);
255
+ }
256
+
247
257
  .headerContent {
248
258
  width: 100%;
249
259
  box-sizing: border-box;
@@ -6,10 +6,7 @@
6
6
 
7
7
  .inner {
8
8
  inline-size: 100%;
9
- max-inline-size: var(--container-xl);
10
- margin-inline: auto;
11
9
  padding-block: var(--spacing-lg);
12
- padding-inline: var(--spacing-xl);
13
10
  display: flex;
14
11
  flex-direction: row;
15
12
  align-items: flex-start;
@@ -53,7 +53,6 @@ function Tabs({
53
53
  storageKey,
54
54
  onValueChange,
55
55
  addition,
56
- disableTopPadding,
57
56
  loading = false,
58
57
  children
59
58
  }) {
@@ -139,8 +138,7 @@ function Tabs({
139
138
  {
140
139
  className: [
141
140
  styles__default.default.headerContainer,
142
- variant === "outlined" ? styles__default.default.headerContainerOutlined : "",
143
- disableTopPadding ? styles__default.default.disableTopPadding : ""
141
+ variant === "outlined" ? styles__default.default.headerContainerOutlined : ""
144
142
  ].filter(Boolean).join(" "),
145
143
  children: /* @__PURE__ */ jsxRuntime.jsx(Headline.Headline, { disableMargin: true, size: 2, subheader, addition, children: header })
146
144
  }
@@ -28,7 +28,6 @@ export interface TabsProps {
28
28
  storageKey?: string;
29
29
  onValueChange?: (id: TabId, tab: TabItem, index: number) => void;
30
30
  addition?: ReactNode;
31
- disableTopPadding?: boolean;
32
31
  loading?: boolean;
33
32
  /** Composition API */
34
33
  children?: ReactNode;
@@ -46,7 +45,7 @@ type SlotName = 'Item';
46
45
  type TabsItemComponent = ((props: TabsItemProps) => JSX.Element) & {
47
46
  __TABS_SLOT__?: SlotName;
48
47
  };
49
- export declare function Tabs({ header, subheader, variant, panelStyle, tabs, value, defaultValue, storageKey, onValueChange, addition, disableTopPadding, loading, children, }: TabsProps): JSX.Element;
48
+ export declare function Tabs({ header, subheader, variant, panelStyle, tabs, value, defaultValue, storageKey, onValueChange, addition, loading, children, }: TabsProps): JSX.Element;
50
49
  export declare namespace Tabs {
51
50
  var Item: TabsItemComponent;
52
51
  }
@@ -47,7 +47,6 @@ function Tabs({
47
47
  storageKey,
48
48
  onValueChange,
49
49
  addition,
50
- disableTopPadding,
51
50
  loading = false,
52
51
  children
53
52
  }) {
@@ -133,8 +132,7 @@ function Tabs({
133
132
  {
134
133
  className: [
135
134
  styles.headerContainer,
136
- variant === "outlined" ? styles.headerContainerOutlined : "",
137
- disableTopPadding ? styles.disableTopPadding : ""
135
+ variant === "outlined" ? styles.headerContainerOutlined : ""
138
136
  ].filter(Boolean).join(" "),
139
137
  children: /* @__PURE__ */ jsx(Headline, { disableMargin: true, size: 2, subheader, addition, children: header })
140
138
  }
@@ -10,12 +10,9 @@
10
10
  display: flex;
11
11
  justify-content: space-between;
12
12
  align-items: center;
13
- padding-block: var(--spacing-lg);
14
- gap: var(--spacing-md);
15
- }
16
-
17
- .headerContainer.disableTopPadding {
18
13
  padding-block-start: 0;
14
+ padding-block-end: var(--spacing-lg);
15
+ gap: var(--spacing-md);
19
16
  }
20
17
 
21
18
  /* Outer wrapper for tablist + content */
@@ -188,12 +185,7 @@
188
185
  }
189
186
 
190
187
  .headerContainerOutlined {
191
- padding-block-start: var(--spacing-sm);
192
- padding-block-end: 0;
193
- }
194
-
195
- .headerContainerOutlined.disableTopPadding {
196
- padding-block-start: 0;
188
+ padding-block-end: var(--spacing-xs);
197
189
  }
198
190
 
199
191
  .outlined .tab {
@@ -240,7 +232,8 @@
240
232
 
241
233
  @media (max-width: 767px) {
242
234
  .headerContainer {
243
- padding-block: var(--spacing-md);
235
+ padding-block-start: 0;
236
+ padding-block-end: var(--spacing-md);
244
237
  }
245
238
 
246
239
  .tabButton {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dbcdk/react-components",
3
- "version": "0.0.163",
3
+ "version": "0.0.165",
4
4
  "description": "Reusable React components for DBC projects",
5
5
  "license": "ISC",
6
6
  "author": "",