@vodafone_de/brix-components 7.0.12 → 7.0.13

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.
@@ -28,7 +28,7 @@ export interface IconButtonProps extends PatternProps, ButtonHTMLAttributes<HTML
28
28
  */
29
29
  disabled?: boolean;
30
30
  /**
31
- * No idea what this means :)
31
+ * Elevates the button by giving it a shadow
32
32
  */
33
33
  floating?: boolean;
34
34
  /**
@@ -20,7 +20,7 @@ const objectPositionRightTop = "top right";
20
20
  const objectPositionRightCenter = "center right";
21
21
  const objectPositionRightBottom = "bottom right";
22
22
  const aspectRatio1_1 = "1/1";
23
- const aspectRatio3_4 = "3/4";
23
+ const aspectRatio4_3 = "4/3";
24
24
  const aspectRatio16_9 = "16/9";
25
25
  const aspectRatio21_9 = "21/9";
26
26
  const aspectRatio32_9 = "32/9";
@@ -65,8 +65,8 @@ export {
65
65
  aspectRatio1_1,
66
66
  aspectRatio21_9,
67
67
  aspectRatio32_9,
68
- aspectRatio3_4,
69
68
  aspectRatio48_9,
69
+ aspectRatio4_3,
70
70
  Image as default,
71
71
  horizontalAlignmentCenter,
72
72
  horizontalAlignmentLeft,
@@ -18,12 +18,12 @@ export declare const objectPositionRightCenter = "center right";
18
18
  export declare const objectPositionRightBottom = "bottom right";
19
19
  export type ImageObjectPosition = typeof objectPositionCenter | typeof objectPositionLeftTop | typeof objectPositionLeftCenter | typeof objectPositionLeftBottom | typeof objectPositionRightTop | typeof objectPositionRightCenter | typeof objectPositionRightBottom;
20
20
  export declare const aspectRatio1_1 = "1/1";
21
- export declare const aspectRatio3_4 = "3/4";
21
+ export declare const aspectRatio4_3 = "4/3";
22
22
  export declare const aspectRatio16_9 = "16/9";
23
23
  export declare const aspectRatio21_9 = "21/9";
24
24
  export declare const aspectRatio32_9 = "32/9";
25
25
  export declare const aspectRatio48_9 = "48/9";
26
- export type AspectRatio = typeof aspectRatio1_1 | typeof aspectRatio3_4 | typeof aspectRatio16_9 | typeof aspectRatio21_9 | typeof aspectRatio32_9 | typeof aspectRatio48_9;
26
+ export type AspectRatio = typeof aspectRatio1_1 | typeof aspectRatio4_3 | typeof aspectRatio16_9 | typeof aspectRatio21_9 | typeof aspectRatio32_9 | typeof aspectRatio48_9;
27
27
  export interface ImageProps extends PatternProps, ImgHTMLAttributes<HTMLImageElement & HTMLSourceElement> {
28
28
  /**
29
29
  * Pin component's name from string to the concrete name
@@ -1,8 +1,8 @@
1
1
  "use client";
2
- import { jsxs, jsx, Fragment } from "react/jsx-runtime";
2
+ import { jsxs, jsx } from "react/jsx-runtime";
3
3
  import { useState, useRef, useEffect } from "react";
4
4
  import IconLoader from "../IconLoader/index.js";
5
- import { b as iconSizeSm } from "../../styled-OqbLiEnJ.js";
5
+ import { b as iconSizeSm, d as iconSizeLg } from "../../styled-OqbLiEnJ.js";
6
6
  import styled from "styled-components";
7
7
  import Container from "../Container/index.js";
8
8
  import Flex from "../Flex/index.js";
@@ -10,6 +10,7 @@ import forcedColors from "../../foundations/media-query/forcedColors/index.js";
10
10
  import { getBorderColor } from "../../foundations/token/getBorderColor/index.js";
11
11
  import { getBorderRadius } from "../../foundations/token/getBorderRadius/index.js";
12
12
  import { getBorderWidth } from "../../foundations/token/getBorderWidth/index.js";
13
+ import { getBottomSpacing } from "../../foundations/token/getBottomSpacing/index.js";
13
14
  import { getFontWeight } from "../../foundations/token/getFontWeight/index.js";
14
15
  import { getHoverColor } from "../../foundations/token/getHoverColor/index.js";
15
16
  import { getObjectColor } from "../../foundations/token/getObjectColor/index.js";
@@ -20,21 +21,32 @@ import { d as borderRadiusSm } from "../../BorderRadius-ClUShVLu.js";
20
21
  import { a as borderWidthFocus } from "../../BorderWidth-DfOlyKK7.js";
21
22
  import { f as fontWeightBold } from "../../FontWeight-DEBGHbtO.js";
22
23
  import { c as colorObjectBrand } from "../../ObjectColor-BZDBuV8H.js";
23
- import { c as spacingSm, a as spacingXs, e as spacing2Xs } from "../../Spacing-D0HQH9YJ.js";
24
+ import { s as spacingMd, c as spacingSm, a as spacingXs, e as spacing2Xs } from "../../Spacing-D0HQH9YJ.js";
24
25
  import { a as filterProps } from "../../filterProps-xigToTuS.js";
25
26
  import { d as flexJustifyCenter } from "../../styled-DLlpknmo.js";
26
27
  const tabOrientationHorizontal = "horizontal";
27
28
  const tabOrientationVertical = "vertical";
28
29
  const tabGroupWidthFull = "full";
29
30
  const tabGroupWidthAuto = "auto";
31
+ const TabGroupContainerStyled = styled.div.withConfig({
32
+ shouldForwardProp: filterProps(),
33
+ displayName: "TabGroupContainerStyled",
34
+ componentId: "sc-qawwg-0"
35
+ })(({
36
+ bottomSpacing = spacingMd
37
+ }) => ({
38
+ ...getBottomSpacing({
39
+ bottomSpacing
40
+ })
41
+ }));
30
42
  const TabGroupTabsScrollableContainerStyled = styled.div.withConfig({
31
43
  shouldForwardProp: filterProps(),
32
44
  displayName: "TabGroupTabsScrollableContainerStyled",
33
- componentId: "sc-qawwg-0"
45
+ componentId: "sc-qawwg-1"
34
46
  })(({
35
47
  width
36
48
  }) => ({
37
- width: width || "100%",
49
+ width: tabGroupWidthAuto === width ? width : "100%",
38
50
  position: "relative",
39
51
  ...width === "auto" && {
40
52
  overflowX: "auto",
@@ -50,7 +62,7 @@ const TabGroupTabsScrollableContainerStyled = styled.div.withConfig({
50
62
  }));
51
63
  const TabGroupTabsStyled = styled(Flex).withConfig({
52
64
  displayName: "TabGroupTabsStyled",
53
- componentId: "sc-qawwg-1"
65
+ componentId: "sc-qawwg-2"
54
66
  })({
55
67
  display: "flex",
56
68
  gap: 0,
@@ -63,7 +75,7 @@ const TabGroupTabsStyled = styled(Flex).withConfig({
63
75
  const TabStyled = styled.button.withConfig({
64
76
  shouldForwardProp: filterProps(["tabOrientation", "width"]),
65
77
  displayName: "TabStyled",
66
- componentId: "sc-qawwg-2"
78
+ componentId: "sc-qawwg-3"
67
79
  })({
68
80
  background: "none",
69
81
  border: "none",
@@ -105,7 +117,7 @@ const TabStyled = styled.button.withConfig({
105
117
  }));
106
118
  const TabLabelStyled = styled.span.withConfig({
107
119
  displayName: "TabLabelStyled",
108
- componentId: "sc-qawwg-3"
120
+ componentId: "sc-qawwg-4"
109
121
  })({
110
122
  '[aria-selected="true"] &': {
111
123
  fontWeight: getFontWeight(fontWeightBold)
@@ -113,7 +125,7 @@ const TabLabelStyled = styled.span.withConfig({
113
125
  });
114
126
  const TabGroupIndicatorStyled = styled.div.withConfig({
115
127
  displayName: "TabGroupIndicatorStyled",
116
- componentId: "sc-qawwg-4"
128
+ componentId: "sc-qawwg-5"
117
129
  })({
118
130
  position: "absolute",
119
131
  bottom: "1px",
@@ -128,8 +140,9 @@ const TabGroupIndicatorStyled = styled.div.withConfig({
128
140
  });
129
141
  const PanelStyled = styled(Container).withConfig({
130
142
  displayName: "PanelStyled",
131
- componentId: "sc-qawwg-5"
143
+ componentId: "sc-qawwg-6"
132
144
  })({
145
+ background: "transparent",
133
146
  "&:focus-visible": {
134
147
  outline: `4px solid ${getBorderColor(colorBorderFocus)}`,
135
148
  borderRadius: `${getBorderRadius(borderRadiusSm)} ${getBorderRadius(borderRadiusSm)} 0 0`,
@@ -144,7 +157,8 @@ const TabGroup = ({
144
157
  value,
145
158
  width = tabGroupWidthFull,
146
159
  "aria-label": ariaLabel,
147
- onTabChange
160
+ onTabChange,
161
+ ...props
148
162
  }) => {
149
163
  if (!(tabs == null ? void 0 : tabs.length)) return null;
150
164
  const getValueFromUrl = () => {
@@ -282,7 +296,7 @@ const TabGroup = ({
282
296
  return /* @__PURE__ */ jsxs(TabStyled, { tabOrientation, width, type: "button", ref: (el) => {
283
297
  tabRefs.current[tabValue] = el;
284
298
  }, onClick: () => handleTabClick(tabValue), "aria-selected": isActive, tabIndex: isActive ? 0 : -1, role: "tab", id: `tab-${tabValue}`, "aria-controls": `tabpanel-${tabValue}`, onKeyDown: (e) => handleKeyDown(e, tabIndex), children: [
285
- tab.icon ? /* @__PURE__ */ jsx(IconLoader, { name: tab.icon, size: iconSizeSm }) : null,
299
+ tab.icon ? /* @__PURE__ */ jsx(IconLoader, { name: tab.icon, size: tabOrientation === tabOrientationHorizontal ? iconSizeSm : iconSizeLg }) : null,
286
300
  /* @__PURE__ */ jsx(TabLabelStyled, { children: tab.label })
287
301
  ] }, `tab-${tabIndex}`);
288
302
  });
@@ -291,7 +305,7 @@ const TabGroup = ({
291
305
  const isActive = tabValue === activeTab;
292
306
  return /* @__PURE__ */ jsx(PanelStyled, { role: "tabpanel", id: `tabpanel-${tabValue}`, "aria-labelledby": `tab-${tabValue}`, hidden: !isActive, tabIndex: 0, children: tab.panelContent }, `tabpanel-${tabIndex}`);
293
307
  });
294
- return /* @__PURE__ */ jsxs(Fragment, { children: [
308
+ return /* @__PURE__ */ jsxs(TabGroupContainerStyled, { ...props, children: [
295
309
  /* @__PURE__ */ jsxs(TabGroupTabsScrollableContainerStyled, { width, ref: tabsContainerRef, children: [
296
310
  /* @__PURE__ */ jsx(TabGroupTabsStyled, { "aria-label": ariaLabel, role: "tablist", children: getTabs }),
297
311
  /* @__PURE__ */ jsx(TabGroupIndicatorStyled, { style: indicatorStyle })
@@ -301,6 +315,7 @@ const TabGroup = ({
301
315
  };
302
316
  export {
303
317
  PanelStyled,
318
+ TabGroupContainerStyled,
304
319
  TabGroupIndicatorStyled,
305
320
  TabGroupTabsScrollableContainerStyled,
306
321
  TabGroupTabsStyled,
@@ -7,11 +7,7 @@ export declare const tabGroupWidthFull = "full";
7
7
  export declare const tabGroupWidthAuto = "auto";
8
8
  export type TabOrientation = typeof tabOrientationHorizontal | typeof tabOrientationVertical;
9
9
  export type TabGroupWidth = typeof tabGroupWidthFull | typeof tabGroupWidthAuto;
10
- export interface TabProps extends ButtonHTMLAttributes<HTMLInputElement> {
11
- /**
12
- * Specify a system icon to be displayed to the left of the label.
13
- */
14
- icon?: IconName;
10
+ interface TabBaseProps extends ButtonHTMLAttributes<HTMLInputElement> {
15
11
  /**
16
12
  * Label for the tab
17
13
  */
@@ -25,19 +21,25 @@ export interface TabProps extends ButtonHTMLAttributes<HTMLInputElement> {
25
21
  */
26
22
  panelContent: ReactNode;
27
23
  }
28
- export interface TabGroupProps extends PatternProps, HTMLAttributes<HTMLDivElement> {
24
+ /** Horizontal Tab: icon is optional */
25
+ export type TabPropsHorizontal = TabBaseProps & {
29
26
  /**
30
- * Pin component's name from string to the concrete name
27
+ * Optional leading icon (horizontal TabGroup only)
31
28
  */
32
- component?: 'TabGroup';
29
+ icon?: IconName;
30
+ };
31
+ /** Vertical Tab: icon is required */
32
+ export type TabPropsVertical = TabBaseProps & {
33
33
  /**
34
- * List of tabs
34
+ * Required leading icon (vertical TabGroup)
35
35
  */
36
- tabs: TabProps[];
36
+ icon: IconName;
37
+ };
38
+ interface TabGroupBaseProps extends PatternProps, HTMLAttributes<HTMLDivElement> {
37
39
  /**
38
- * TabGroup tabs orientation, can be horizontal or vertical
40
+ * Pin component's name from string to the concrete name
39
41
  */
40
- tabOrientation?: TabOrientation;
42
+ component?: 'TabGroup';
41
43
  /**
42
44
  * TabGroup width, when it's Auto, the TabGroup is scrollable horizontally
43
45
  */
@@ -51,3 +53,23 @@ export interface TabGroupProps extends PatternProps, HTMLAttributes<HTMLDivEleme
51
53
  */
52
54
  onTabChange?: (value: string) => void;
53
55
  }
56
+ /**
57
+ * Horizontal variant:
58
+ * - `tabOrientation` is optional (treat missing as horizontal)
59
+ * - `icon` on each tab is optional
60
+ */
61
+ export interface TabGroupHorizontalProps extends TabGroupBaseProps {
62
+ tabs: TabPropsHorizontal[];
63
+ tabOrientation?: typeof tabOrientationHorizontal;
64
+ }
65
+ /**
66
+ * Vertical variant:
67
+ * - `tabOrientation` must be "vertical"
68
+ * - `icon` on each tab is required
69
+ */
70
+ export interface TabGroupVerticalProps extends TabGroupBaseProps {
71
+ tabs: TabPropsVertical[];
72
+ tabOrientation: typeof tabOrientationVertical;
73
+ }
74
+ export type TabGroupProps = TabGroupHorizontalProps | TabGroupVerticalProps;
75
+ export {};
@@ -1,4 +1,5 @@
1
1
  import { TabGroupProps } from './props';
2
+ export declare const TabGroupContainerStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<TabGroupProps, "bottomSpacing">>> & string;
2
3
  export declare const TabGroupTabsScrollableContainerStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<TabGroupProps, "width">>> & string;
3
4
  export declare const TabGroupTabsStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('../Flex').FlexProps, never>> & string & Omit<import('react').FC<import('../Flex').FlexProps>, keyof import('react').Component<any, {}, any>>;
4
5
  export declare const TabStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, Pick<TabGroupProps, "width" | "tabOrientation">>> & string;
@@ -1,21 +1,28 @@
1
- import { AnchorHTMLAttributes, ComponentType } from 'react';
1
+ import { ComponentType, ReactNode, JSX } from 'react';
2
2
  /**
3
3
  * Props of the link component.
4
4
  */
5
- export type LinkComponentProps = AnchorHTMLAttributes<HTMLAnchorElement>;
5
+ export type LinkComponentProps = JSX.IntrinsicElements['a'];
6
6
  /**
7
- * Type of the context.
7
+ * Link component type.
8
8
  */
9
- export type LinkContextType = ComponentType<LinkComponentProps>;
9
+ export type LinkComponentType = ComponentType<LinkComponentProps>;
10
10
  /**
11
11
  * Default link component using `<a>`.
12
12
  */
13
- export declare const DefaultLinkComponent: LinkContextType;
13
+ export declare const DefaultLink: LinkComponentType;
14
14
  /**
15
15
  * Context for providing a custom link component.
16
16
  */
17
- export declare const LinkContext: import('react').Context<LinkContextType>;
17
+ export declare const LinkContext: import('react').Context<LinkComponentType>;
18
18
  /**
19
19
  * Hook to access the current link component from context.
20
20
  */
21
- export declare const useLinkComponent: () => LinkContextType;
21
+ export declare const useLinkComponent: () => LinkComponentType;
22
+ /**
23
+ * Provider for LinkContext
24
+ */
25
+ export declare const LinkProvider: ({ linkComponent, children, }: {
26
+ linkComponent: LinkComponentType;
27
+ children?: ReactNode;
28
+ }) => import("react/jsx-runtime").JSX.Element;
@@ -1,10 +1,17 @@
1
1
  import { jsx } from "react/jsx-runtime";
2
2
  import { createContext, useContext } from "react";
3
- const DefaultLinkComponent = (props) => /* @__PURE__ */ jsx("a", { ...props });
4
- const LinkContext = createContext(DefaultLinkComponent);
3
+ const DefaultLink = (props) => /* @__PURE__ */ jsx("a", { ...props });
4
+ const LinkContext = createContext(DefaultLink);
5
5
  const useLinkComponent = () => useContext(LinkContext);
6
+ const LinkProvider = ({
7
+ linkComponent,
8
+ children
9
+ }) => {
10
+ return /* @__PURE__ */ jsx(LinkContext, { value: linkComponent, children });
11
+ };
6
12
  export {
7
- DefaultLinkComponent,
13
+ DefaultLink,
8
14
  LinkContext,
15
+ LinkProvider,
9
16
  useLinkComponent
10
17
  };
package/dist/index.js CHANGED
@@ -4,7 +4,7 @@ import { default as default4 } from "./components/TimeInput/index.js";
4
4
  import { default as default5 } from "./components/Textarea/index.js";
5
5
  import { R, T, a } from "./index-B854Z6wJ.js";
6
6
  import { P, T as T2, c, g, f, p, a as a2, e, d, b } from "./index-D1-XMn0u.js";
7
- import { PanelStyled, default as default6, TabGroupIndicatorStyled, TabGroupTabsScrollableContainerStyled, TabGroupTabsStyled, TabLabelStyled, TabStyled, tabGroupWidthAuto, tabGroupWidthFull, tabOrientationHorizontal, tabOrientationVertical } from "./components/TabGroup/index.js";
7
+ import { PanelStyled, default as default6, TabGroupContainerStyled, TabGroupIndicatorStyled, TabGroupTabsScrollableContainerStyled, TabGroupTabsStyled, TabLabelStyled, TabStyled, tabGroupWidthAuto, tabGroupWidthFull, tabOrientationHorizontal, tabOrientationVertical } from "./components/TabGroup/index.js";
8
8
  import { default as default7 } from "./components/Switch/index.js";
9
9
  import { default as default8 } from "./components/SuggestInput/index.js";
10
10
  import { default as default9 } from "./components/Stepper/index.js";
@@ -30,7 +30,7 @@ import { default as default26 } from "./components/Input/index.js";
30
30
  import { default as default27 } from "./components/InlineLink/index.js";
31
31
  import { default as default28 } from "./components/InlineIcon/index.js";
32
32
  import { default as default29, imageHeaderPositionLeft, imageHeaderPositionRight, imageHeaderVariantFull, imageHeaderVariantSplit } from "./components/ImageHeader/index.js";
33
- import { default as default30, aspectRatio16_9, aspectRatio1_1, aspectRatio21_9, aspectRatio32_9, aspectRatio3_4, aspectRatio48_9, horizontalAlignmentCenter, horizontalAlignmentLeft, horizontalAlignmentRight, objectFitContain, objectFitCover, objectFitNone, objectPositionCenter, objectPositionLeftBottom, objectPositionLeftCenter, objectPositionLeftTop, objectPositionRightBottom, objectPositionRightCenter, objectPositionRightTop } from "./components/Image/index.js";
33
+ import { default as default30, aspectRatio16_9, aspectRatio1_1, aspectRatio21_9, aspectRatio32_9, aspectRatio48_9, aspectRatio4_3, horizontalAlignmentCenter, horizontalAlignmentLeft, horizontalAlignmentRight, objectFitContain, objectFitCover, objectFitNone, objectPositionCenter, objectPositionLeftBottom, objectPositionLeftCenter, objectPositionLeftTop, objectPositionRightBottom, objectPositionRightCenter, objectPositionRightTop } from "./components/Image/index.js";
34
34
  import { default as default31 } from "./components/IconSnippetList/index.js";
35
35
  import { default as default32, iconSnippetAlignCenter, iconSnippetAlignTop, iconSnippetPositionCenter, iconSnippetPositionLeft, iconSnippetSize3Xl, iconSnippetSizeLarge, iconSnippetSizeSmall } from "./components/IconSnippet/index.js";
36
36
  import { default as default33 } from "./components/IconLoader/index.js";
@@ -99,7 +99,7 @@ import { u } from "./index-Cs0Hw0dj.js";
99
99
  import { checkThirdPartyConsentStorage, consentStorageFeature, consentStorageItemName, consentStorageKey, useThirdPartyConsent } from "./hooks/useThirdPartyConsent/index.js";
100
100
  import { useReducedMotion } from "./hooks/useReducedMotion/index.js";
101
101
  import { useMediaQuery } from "./hooks/useMediaQuery/index.js";
102
- import { DefaultLinkComponent, LinkContext, useLinkComponent } from "./hooks/useLinkComponent/index.js";
102
+ import { DefaultLink, LinkContext, LinkProvider, useLinkComponent } from "./hooks/useLinkComponent/index.js";
103
103
  import { useForcedColors } from "./hooks/useForcedColors/index.js";
104
104
  import { useFocusWithin } from "./hooks/useFocusWithin/index.js";
105
105
  import { a as a4, i } from "./props-DDpgcryb.js";
@@ -128,7 +128,7 @@ export {
128
128
  default58 as Container,
129
129
  ContainerAppearanceColor,
130
130
  default57 as DateInput,
131
- DefaultLinkComponent,
131
+ DefaultLink,
132
132
  default56 as DemoBox,
133
133
  default55 as Dialog,
134
134
  default54 as DiscoveryCard,
@@ -172,6 +172,7 @@ export {
172
172
  LinkContext,
173
173
  default22 as LinkList,
174
174
  default21 as LinkListItem,
175
+ LinkProvider,
175
176
  default20 as LoadingSpinner,
176
177
  default19 as MediaText,
177
178
  default18 as Notification,
@@ -193,6 +194,7 @@ export {
193
194
  default8 as SuggestInput,
194
195
  default7 as Switch,
195
196
  default6 as TabGroup,
197
+ TabGroupContainerStyled,
196
198
  TabGroupIndicatorStyled,
197
199
  TabGroupTabsScrollableContainerStyled,
198
200
  TabGroupTabsStyled,
@@ -214,8 +216,8 @@ export {
214
216
  aspectRatio1_1,
215
217
  aspectRatio21_9,
216
218
  aspectRatio32_9,
217
- aspectRatio3_4,
218
219
  aspectRatio48_9,
220
+ aspectRatio4_3,
219
221
  bodyAlignCenter,
220
222
  bodyAlignLeft,
221
223
  bodyAlignRight,
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@vodafone_de/brix-components",
3
3
  "description": "Brix is the digital design system for vodafone.de",
4
- "version": "7.0.12",
4
+ "version": "7.0.13",
5
5
  "exports": {
6
6
  "./package.json": "./package.json",
7
7
  ".": {