@studiolxd/brand 49.22.0 → 49.23.1
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.
- package/CHANGELOG.md +44 -0
- package/dist/_shared/brandmessagescontext.js +2 -2
- package/dist/_types/messages/BrandMessages.d.ts +9 -1
- package/dist/_types/messages/BrandMessagesContext.d.ts +7 -1
- package/dist/_types/messages/index.d.ts +2 -2
- package/dist/_types/sections/AppHeader/AppHeader.d.ts +40 -2
- package/dist/app-header.css +1 -1
- package/dist/app-header.js +34 -21
- package/dist/app-shell.css +1 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -7,6 +7,50 @@ El paquete sigue [semver](https://semver.org/lang/es/): **patch** para bug fixes
|
|
|
7
7
|
regeneración de `dist`, **minor** para componentes/props/variantes/tokens nuevos, **major**
|
|
8
8
|
para breaking changes.
|
|
9
9
|
|
|
10
|
+
## [49.23.1] — 2026-10-04
|
|
11
|
+
|
|
12
|
+
> **Patch.** `appHeader` pasa a ser **opcional** en `BrandMessages`. En 49.23.0 entró obligatorio y un
|
|
13
|
+
> catálogo tipado estricto —un literal pasado a `BrandMessagesProvider` sin conversión, como el de
|
|
14
|
+
> `public-shell` en slxd— dejaba de compilar aunque no usara el logo: una minor no puede romper la
|
|
15
|
+
> compilación de nadie. Si ya declaraste `appHeader`, no hay que tocar nada.
|
|
16
|
+
|
|
17
|
+
- `BrandMessages.appHeader?` y `AppHeaderMessages.logo?`: solo hacen falta si algún `AppHeader` lleva
|
|
18
|
+
`logo` sin `logoLabel`.
|
|
19
|
+
- **Si ese caso llega sin `appHeader.logo` en el catálogo, `AppHeader` lanza** («el catálogo montado no
|
|
20
|
+
trae «appHeader.logo»»), igual que cualquier otra clave ausente: no hay castellano de respaldo y un
|
|
21
|
+
enlace sin nombre accesible tiene que verse en desarrollo. Documentado en `AppHeader` §
|
|
22
|
+
«Internacionalización».
|
|
23
|
+
- `BrandMessagesReader` lee los espacios opcionales sin `undefined` en el tipo devuelto (tipo nuevo
|
|
24
|
+
`BrandMessagesNamespace`); para los espacios obligatorios no cambia nada.
|
|
25
|
+
- Test de tipos (`BrandMessages.types.test.ts`): compila con el compilador de TypeScript un catálogo
|
|
26
|
+
sin `appHeader` contra `BrandMessages`, con un caso de control que sí debe fallar.
|
|
27
|
+
- Revisado el resto de 49.23.0: no añadió ningún otro campo obligatorio a tipos públicos (las props
|
|
28
|
+
nuevas de `AppHeader` ya eran opcionales).
|
|
29
|
+
|
|
30
|
+
## [49.23.0] — 2026-10-04
|
|
31
|
+
|
|
32
|
+
> **Minor.** Ranura `logo` en `AppHeader`, a petición de Homenize. Espacio nuevo `appHeader` en
|
|
33
|
+
> `BrandMessages` (una clave, `logo`): el catálogo de cada app tiene que añadirla para compilar.
|
|
34
|
+
|
|
35
|
+
### Logo en la cabecera de la aplicación
|
|
36
|
+
|
|
37
|
+
- **`logo`**: la marca del producto entre el botón de menú y `start`. Toma el alto de contenido de la
|
|
38
|
+
barra (`--app-header-content-height`, 40px) y el ancho de su proporción: el `Logo` del sistema a
|
|
39
|
+
cualquier talla, un SVG con `viewBox` o un `<img>` de cualquier proporción, sin darle medidas. Sin
|
|
40
|
+
`logo`, la barra queda exactamente igual que antes.
|
|
41
|
+
- **`logoHref`** (por defecto `/`) y **`renderLogoLink`** para el router del producto, con el mismo
|
|
42
|
+
contrato que `SiteHeader`: recibe `href`, `className`, `aria-label` y `children`. Tipo nuevo
|
|
43
|
+
exportado: `AppHeaderLogoLinkProps`.
|
|
44
|
+
- **`logoLabel`**, o sin él **`appHeader.logo`** del `BrandMessagesProvider` («Homenize, ir al
|
|
45
|
+
inicio»), como `siteHeader.logo`. Solo se lee con `logo`. Tipo nuevo: `AppHeaderMessages`.
|
|
46
|
+
- **Una marca a la vez con el `Sidebar`.** La cabecera está siempre a la vista, encima de la columna y
|
|
47
|
+
del cajón, así que el `logo` va en uno solo —mejor en la cabecera, que se ve también en rail y con la
|
|
48
|
+
sidebar cerrada—. Si llegan los dos, dentro de un `AppShell` manda el de la cabecera: el armazón
|
|
49
|
+
oculta `.sidebar__header` mientras el `AppHeader` lleve `logo` (`:has`, sin JS, sin parpadeo en SSR).
|
|
50
|
+
- Stories: `AppHeader` «Con logo», «Con una marca de producto», «Con logo (móvil)»; `AppShell` «Con logo
|
|
51
|
+
en la cabecera». Tests de story (orden, enlace, 40px de alto con `Logo xxl`, imagen 4:1 a 160×40, sin
|
|
52
|
+
logo nada cambia, sidebar sin marca) y unitarios (`AppHeader.test.tsx`).
|
|
53
|
+
|
|
10
54
|
## [49.22.0] — 2026-10-04
|
|
11
55
|
|
|
12
56
|
> **Minor.** Muestra y selector de color: `ColorSwatch`, `ColorPicker` y `ColorPickerField`, sin
|
|
@@ -4,10 +4,10 @@ var n = e(null);
|
|
|
4
4
|
function r(e) {
|
|
5
5
|
let r = t(n);
|
|
6
6
|
return function(t, n) {
|
|
7
|
-
if (n
|
|
7
|
+
if (n != null) return n;
|
|
8
8
|
if (!r) throw Error(`@studiolxd/brand: falta el texto «${String(e)}.${String(t)}» y no hay catálogo montado. Monta <BrandMessagesProvider> en la raíz de la aplicación con los textos del idioma vigente, o pasa la prop suelta en este uso concreto.`);
|
|
9
9
|
let i = r[e]?.[t];
|
|
10
|
-
if (i
|
|
10
|
+
if (i == null) throw Error(`@studiolxd/brand: el catálogo montado no trae «${String(e)}.${String(t)}».`);
|
|
11
11
|
return i;
|
|
12
12
|
};
|
|
13
13
|
}
|
|
@@ -36,6 +36,7 @@ import type { NotificationPanelMessages } from '../molecules/NotificationPanel/N
|
|
|
36
36
|
import type { MenuButtonMessages } from '../atoms/MenuButton/MenuButton';
|
|
37
37
|
import type { AppRootMessages } from '../sections/AppRoot/AppRoot';
|
|
38
38
|
import type { AppShellMessages } from '../sections/AppShell/AppShell';
|
|
39
|
+
import type { AppHeaderMessages } from '../sections/AppHeader/AppHeader';
|
|
39
40
|
import type { SidebarMessages } from '../sections/Sidebar/Sidebar';
|
|
40
41
|
import type { SidebarNavMessages } from '../molecules/SidebarNav/SidebarNav';
|
|
41
42
|
import type { SiteNavMessages } from '../molecules/SiteNav/SiteNav';
|
|
@@ -142,6 +143,13 @@ export interface BrandMessages {
|
|
|
142
143
|
menuButton: MenuButtonMessages;
|
|
143
144
|
appRoot: AppRootMessages;
|
|
144
145
|
appShell: AppShellMessages;
|
|
146
|
+
/**
|
|
147
|
+
* **Opcional** (desde v49.23.1): solo lo lee el `AppHeader` cuando lleva
|
|
148
|
+
* `logo` y no recibe `logoLabel`. En v49.23.0 entró obligatorio y rompía la
|
|
149
|
+
* compilación de catálogos que no usan el logo. Si un `AppHeader` lo
|
|
150
|
+
* necesita y falta, lanza como cualquier otra clave ausente.
|
|
151
|
+
*/
|
|
152
|
+
appHeader?: AppHeaderMessages;
|
|
145
153
|
sidebar: SidebarMessages;
|
|
146
154
|
sidebarNav: SidebarNavMessages;
|
|
147
155
|
siteNav: SiteNavMessages;
|
|
@@ -189,4 +197,4 @@ export interface BrandMessages {
|
|
|
189
197
|
connectorExternalSignIn: ConnectorExternalSignInMessages;
|
|
190
198
|
connectorRejection: ConnectorRejectionMessages;
|
|
191
199
|
}
|
|
192
|
-
export type { PaginationMessages, TableMessages, DataTableMessages, InputFieldMessages, PasswordFieldMessages, SelectMessages, MultiSelectMessages, NumberInputMessages, OtpInputMessages, InputPhoneMessages, AsyncSelectMessages, AsyncMultiSelectMessages, DocsSearchMessages, SearchFormMessages, SiteSearchMessages, FilterBarMessages, CalendarMessages, DatePickerMessages, ColorPickerMessages, TimeSelectMessages, FileUploadMessages, ImageCropDialogMessages, AvatarUploadMessages, ModalMessages, SheetMessages, ConfirmDialogMessages, AlertMessages, BannerMessages, ToasterMessages, ConsentMessages, CommandPaletteMessages, AppLauncherMessages, FloatingDockMessages, NotificationButtonMessages, NotificationPanelMessages, MenuButtonMessages, AppRootMessages, AppShellMessages, SidebarMessages, SidebarNavMessages, SiteNavMessages, SiteHeaderMessages, UserMenuMessages, OrgSwitcherMessages, BreadcrumbMessages, TableOfContentsMessages, PrevNextNavMessages, PublicPageShellMessages, OnboardingShellMessages, CopyMessages, CodeBlockMessages, DotsButtonMessages, ProgressBarMessages, SpinnerMessages, SliderMessages, TreeViewMessages, ClockWidgetMessages, HeatmapMessages, OrgChartMessages, PlanningGridMessages, RecurrenceFieldMessages, TimelineMessages, UptimeBarsMessages, ChartMessages, StepperMessages, CarouselMessages, LanguageSwitcherMessages, ProjectCardMessages, LegalFooterMessages, CalendarRosterMessages, CalendarPlannerMessages, NotificationListMessages, MessageComposerMessages, ConversationListMessages, ConversationThreadMessages, TypingIndicatorMessages, AnnotationThreadMessages, ChatShellMessages, UntrustedTextMessages, ConnectorRequestSummaryMessages, ConnectorConsentMessages, ConnectorSignInMessages, ConnectorExternalSignInMessages, ConnectorRejectionMessages, };
|
|
200
|
+
export type { PaginationMessages, TableMessages, DataTableMessages, InputFieldMessages, PasswordFieldMessages, SelectMessages, MultiSelectMessages, NumberInputMessages, OtpInputMessages, InputPhoneMessages, AsyncSelectMessages, AsyncMultiSelectMessages, DocsSearchMessages, SearchFormMessages, SiteSearchMessages, FilterBarMessages, CalendarMessages, DatePickerMessages, ColorPickerMessages, TimeSelectMessages, FileUploadMessages, ImageCropDialogMessages, AvatarUploadMessages, ModalMessages, SheetMessages, ConfirmDialogMessages, AlertMessages, BannerMessages, ToasterMessages, ConsentMessages, CommandPaletteMessages, AppLauncherMessages, FloatingDockMessages, NotificationButtonMessages, NotificationPanelMessages, MenuButtonMessages, AppRootMessages, AppShellMessages, AppHeaderMessages, SidebarMessages, SidebarNavMessages, SiteNavMessages, SiteHeaderMessages, UserMenuMessages, OrgSwitcherMessages, BreadcrumbMessages, TableOfContentsMessages, PrevNextNavMessages, PublicPageShellMessages, OnboardingShellMessages, CopyMessages, CodeBlockMessages, DotsButtonMessages, ProgressBarMessages, SpinnerMessages, SliderMessages, TreeViewMessages, ClockWidgetMessages, HeatmapMessages, OrgChartMessages, PlanningGridMessages, RecurrenceFieldMessages, TimelineMessages, UptimeBarsMessages, ChartMessages, StepperMessages, CarouselMessages, LanguageSwitcherMessages, ProjectCardMessages, LegalFooterMessages, CalendarRosterMessages, CalendarPlannerMessages, NotificationListMessages, MessageComposerMessages, ConversationListMessages, ConversationThreadMessages, TypingIndicatorMessages, AnnotationThreadMessages, ChatShellMessages, UntrustedTextMessages, ConnectorRequestSummaryMessages, ConnectorConsentMessages, ConnectorSignInMessages, ConnectorExternalSignInMessages, ConnectorRejectionMessages, };
|
|
@@ -11,8 +11,14 @@ export declare const BrandMessagesContext: import("react").Context<BrandMessages
|
|
|
11
11
|
* consumidor la pasa.
|
|
12
12
|
*/
|
|
13
13
|
export interface BrandMessagesReader<K extends keyof BrandMessages> {
|
|
14
|
-
<N extends keyof
|
|
14
|
+
<N extends keyof BrandMessagesNamespace<K>>(key: N, override?: BrandMessagesNamespace<K>[N]): NonNullable<BrandMessagesNamespace<K>[N]>;
|
|
15
15
|
}
|
|
16
|
+
/**
|
|
17
|
+
* El espacio de un componente, sin el `undefined` de los espacios opcionales
|
|
18
|
+
* (`appHeader`): el lector nunca devuelve `undefined`, porque si el texto
|
|
19
|
+
* falta lanza.
|
|
20
|
+
*/
|
|
21
|
+
export type BrandMessagesNamespace<K extends keyof BrandMessages> = NonNullable<BrandMessages[K]>;
|
|
16
22
|
/**
|
|
17
23
|
* El lector del espacio de un componente. Se llama **en el punto donde el
|
|
18
24
|
* texto se pinta**, no al principio del render: así un componente que no
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
export { BrandMessagesProvider } from './BrandMessagesProvider';
|
|
2
2
|
export type { BrandMessagesProviderProps } from './BrandMessagesProvider';
|
|
3
3
|
export { useBrandMessages } from './BrandMessagesContext';
|
|
4
|
-
export type { BrandMessagesReader } from './BrandMessagesContext';
|
|
5
|
-
export type { BrandMessages, PaginationMessages, TableMessages, DataTableMessages, InputFieldMessages, PasswordFieldMessages, SelectMessages, MultiSelectMessages, NumberInputMessages, OtpInputMessages, InputPhoneMessages, AsyncSelectMessages, AsyncMultiSelectMessages, DocsSearchMessages, SearchFormMessages, SiteSearchMessages, FilterBarMessages, CalendarMessages, DatePickerMessages, ColorPickerMessages, TimeSelectMessages, FileUploadMessages, ImageCropDialogMessages, AvatarUploadMessages, ModalMessages, SheetMessages, ConfirmDialogMessages, AlertMessages, BannerMessages, ToasterMessages, ConsentMessages, CommandPaletteMessages, AppLauncherMessages, FloatingDockMessages, NotificationButtonMessages, NotificationPanelMessages, MenuButtonMessages, AppRootMessages, AppShellMessages, SidebarMessages, SidebarNavMessages, SiteNavMessages, SiteHeaderMessages, UserMenuMessages, OrgSwitcherMessages, BreadcrumbMessages, TableOfContentsMessages, PrevNextNavMessages, PublicPageShellMessages, OnboardingShellMessages, CopyMessages, CodeBlockMessages, DotsButtonMessages, ProgressBarMessages, SpinnerMessages, SliderMessages, TreeViewMessages, ClockWidgetMessages, HeatmapMessages, OrgChartMessages, PlanningGridMessages, RecurrenceFieldMessages, TimelineMessages, UptimeBarsMessages, ChartMessages, StepperMessages, CarouselMessages, LanguageSwitcherMessages, ProjectCardMessages, LegalFooterMessages, CalendarRosterMessages, CalendarPlannerMessages, NotificationListMessages, MessageComposerMessages, ConversationListMessages, ConversationThreadMessages, TypingIndicatorMessages, AnnotationThreadMessages, ChatShellMessages, UntrustedTextMessages, ConnectorRequestSummaryMessages, ConnectorConsentMessages, ConnectorSignInMessages, ConnectorExternalSignInMessages, ConnectorRejectionMessages, } from './BrandMessages';
|
|
4
|
+
export type { BrandMessagesReader, BrandMessagesNamespace } from './BrandMessagesContext';
|
|
5
|
+
export type { BrandMessages, PaginationMessages, TableMessages, DataTableMessages, InputFieldMessages, PasswordFieldMessages, SelectMessages, MultiSelectMessages, NumberInputMessages, OtpInputMessages, InputPhoneMessages, AsyncSelectMessages, AsyncMultiSelectMessages, DocsSearchMessages, SearchFormMessages, SiteSearchMessages, FilterBarMessages, CalendarMessages, DatePickerMessages, ColorPickerMessages, TimeSelectMessages, FileUploadMessages, ImageCropDialogMessages, AvatarUploadMessages, ModalMessages, SheetMessages, ConfirmDialogMessages, AlertMessages, BannerMessages, ToasterMessages, ConsentMessages, CommandPaletteMessages, AppLauncherMessages, FloatingDockMessages, NotificationButtonMessages, NotificationPanelMessages, MenuButtonMessages, AppRootMessages, AppShellMessages, AppHeaderMessages, SidebarMessages, SidebarNavMessages, SiteNavMessages, SiteHeaderMessages, UserMenuMessages, OrgSwitcherMessages, BreadcrumbMessages, TableOfContentsMessages, PrevNextNavMessages, PublicPageShellMessages, OnboardingShellMessages, CopyMessages, CodeBlockMessages, DotsButtonMessages, ProgressBarMessages, SpinnerMessages, SliderMessages, TreeViewMessages, ClockWidgetMessages, HeatmapMessages, OrgChartMessages, PlanningGridMessages, RecurrenceFieldMessages, TimelineMessages, UptimeBarsMessages, ChartMessages, StepperMessages, CarouselMessages, LanguageSwitcherMessages, ProjectCardMessages, LegalFooterMessages, CalendarRosterMessages, CalendarPlannerMessages, NotificationListMessages, MessageComposerMessages, ConversationListMessages, ConversationThreadMessages, TypingIndicatorMessages, AnnotationThreadMessages, ChatShellMessages, UntrustedTextMessages, ConnectorRequestSummaryMessages, ConnectorConsentMessages, ConnectorSignInMessages, ConnectorExternalSignInMessages, ConnectorRejectionMessages, } from './BrandMessages';
|
|
@@ -1,6 +1,44 @@
|
|
|
1
1
|
import { type ReactNode } from 'react';
|
|
2
2
|
import './AppHeader.css';
|
|
3
|
+
export type AppHeaderLogoLinkProps = {
|
|
4
|
+
href: string;
|
|
5
|
+
className: string;
|
|
6
|
+
'aria-label': string;
|
|
7
|
+
children: ReactNode;
|
|
8
|
+
};
|
|
9
|
+
/**
|
|
10
|
+
* El único texto propio de la barra, y solo cuando lleva `logo`: es **cromo**,
|
|
11
|
+
* qué hace el logotipo («ir al inicio»), no qué marca es — el mismo criterio
|
|
12
|
+
* que `siteHeader.logo`.
|
|
13
|
+
*/
|
|
14
|
+
export interface AppHeaderMessages {
|
|
15
|
+
/**
|
|
16
|
+
* Texto accesible del enlace del logotipo. Opcional, como el espacio entero:
|
|
17
|
+
* solo hace falta si algún `AppHeader` lleva `logo` sin `logoLabel`.
|
|
18
|
+
*/
|
|
19
|
+
logo?: string;
|
|
20
|
+
}
|
|
3
21
|
export interface AppHeaderProps {
|
|
22
|
+
/**
|
|
23
|
+
* La marca del producto, entre el botón de menú y `start`: un `Logo`, un SVG
|
|
24
|
+
* o una imagen de cualquier proporción. Toma el alto de contenido de la barra
|
|
25
|
+
* (`--app-header-content-height`) y el ancho que le dé su proporción; no hay
|
|
26
|
+
* que darle medidas. Sin `logo`, la barra no cambia.
|
|
27
|
+
*/
|
|
28
|
+
logo?: ReactNode;
|
|
29
|
+
/** Destino del logotipo. Solo se usa con `logo`. */
|
|
30
|
+
logoHref?: string;
|
|
31
|
+
/**
|
|
32
|
+
* Texto accesible del enlace del logotipo. **Sin default**: sin él, sale de
|
|
33
|
+
* `appHeader.logo` del `BrandMessagesProvider`. Solo se lee con `logo`.
|
|
34
|
+
*/
|
|
35
|
+
logoLabel?: string;
|
|
36
|
+
/**
|
|
37
|
+
* Enlace del logotipo para el router del producto. Recibe `href`, `className`,
|
|
38
|
+
* `aria-label` y `children`, y debe reenviarlos todos. Mismo contrato que en
|
|
39
|
+
* `SiteHeader`.
|
|
40
|
+
*/
|
|
41
|
+
renderLogoLink?: (props: AppHeaderLogoLinkProps) => ReactNode;
|
|
4
42
|
/** Tras el botón de menú: breadcrumb, buscador, título de página… */
|
|
5
43
|
start?: ReactNode;
|
|
6
44
|
/** Antes del avatar: la campana con su contador. Sitio fijo. */
|
|
@@ -24,6 +62,6 @@ export interface AppHeaderProps {
|
|
|
24
62
|
* La barra superior de la aplicación, en todos los anchos. A la izquierda el
|
|
25
63
|
* botón de menú, que abre el cajón en móvil y pliega/despliega la sidebar en
|
|
26
64
|
* escritorio; a la derecha, notificaciones y cuenta. Entre medias, lo que la
|
|
27
|
-
* página necesite.
|
|
65
|
+
* página necesite. Con `logo`, la marca del producto va justo tras el botón.
|
|
28
66
|
*/
|
|
29
|
-
export declare function AppHeader({ start, notifications, end, menuLabel, menuCloseLabel, sidebarId, }: AppHeaderProps): import("react/jsx-runtime").JSX.Element;
|
|
67
|
+
export declare function AppHeader({ logo, logoHref, logoLabel, renderLogoLink, start, notifications, end, menuLabel, menuCloseLabel, sidebarId, }: AppHeaderProps): import("react/jsx-runtime").JSX.Element;
|
package/dist/app-header.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.app-header{align-items:center;gap:var(--app-header-gap);block-size:var(--app-header-height);padding-inline:var(--app-header-padding-inline);box-sizing:content-box;background-color:var(--app-header-bg);box-shadow:0 var(--app-header-border-width) 0 var(--app-header-border-color);z-index:var(--app-header-z-index);flex-shrink:0;padding-block-start:env(safe-area-inset-top);display:flex;position:sticky;inset-block-start:0}.app-header__start{flex:1;align-items:center;min-inline-size:0;display:flex}.app-header__notifications,.app-header__end{flex-shrink:0;align-items:center;display:flex}
|
|
1
|
+
.app-header{align-items:center;gap:var(--app-header-gap);block-size:var(--app-header-height);padding-inline:var(--app-header-padding-inline);box-sizing:content-box;background-color:var(--app-header-bg);box-shadow:0 var(--app-header-border-width) 0 var(--app-header-border-color);z-index:var(--app-header-z-index);flex-shrink:0;padding-block-start:env(safe-area-inset-top);display:flex;position:sticky;inset-block-start:0}.app-header__start{flex:1;align-items:center;min-inline-size:0;display:flex}.app-header__notifications,.app-header__end{flex-shrink:0;align-items:center;display:flex}.app-header__logo{box-shadow:none;color:inherit;--logo-height-sm:var(--app-header-content-height);--logo-height-md:var(--app-header-content-height);--logo-height-lg:var(--app-header-content-height);--logo-height-xl:var(--app-header-content-height);--logo-height-xxl:var(--app-header-content-height);flex-shrink:0;align-items:center;padding-block-end:0;display:flex}.app-header__logo:hover{box-shadow:none;color:inherit}.app-header__logo>*{block-size:var(--app-header-content-height);inline-size:auto}
|
package/dist/app-header.js
CHANGED
|
@@ -1,37 +1,50 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import './app-header.css';
|
|
3
|
-
import {
|
|
4
|
-
import { t } from "./
|
|
5
|
-
import {
|
|
6
|
-
import {
|
|
3
|
+
import { n as e } from "./_shared/brandmessagescontext.js";
|
|
4
|
+
import { MenuButton as t } from "./menu-button.js";
|
|
5
|
+
import { t as n } from "./_shared/appshellcontext.js";
|
|
6
|
+
import { useContext as r, useState as i } from "react";
|
|
7
|
+
import { jsx as a, jsxs as o } from "react/jsx-runtime";
|
|
7
8
|
//#region src/stories/sections/AppHeader/AppHeader.tsx
|
|
8
|
-
function
|
|
9
|
-
|
|
10
|
-
|
|
9
|
+
function s({ children: e, ...t }) {
|
|
10
|
+
return /* @__PURE__ */ a("a", {
|
|
11
|
+
...t,
|
|
12
|
+
children: e
|
|
13
|
+
});
|
|
14
|
+
}
|
|
15
|
+
function c({ logo: c, logoHref: l = "/", logoLabel: u, renderLogoLink: d = s, start: f, notifications: p, end: m, menuLabel: h, menuCloseLabel: g, sidebarId: _ }) {
|
|
16
|
+
let v = r(n), [y, b] = i(!1), x = v ? v.sidebar === "open" : y, S = v ? v.toggleSidebar : () => b((e) => !e), C = e("appHeader");
|
|
17
|
+
return /* @__PURE__ */ o("header", {
|
|
11
18
|
className: "app-header",
|
|
12
19
|
children: [
|
|
13
|
-
/* @__PURE__ */
|
|
14
|
-
isOpen:
|
|
15
|
-
onClick:
|
|
16
|
-
label:
|
|
17
|
-
closeLabel:
|
|
18
|
-
"aria-controls":
|
|
19
|
-
"aria-expanded":
|
|
20
|
+
/* @__PURE__ */ a(t, {
|
|
21
|
+
isOpen: x,
|
|
22
|
+
onClick: S,
|
|
23
|
+
label: h,
|
|
24
|
+
closeLabel: g,
|
|
25
|
+
"aria-controls": _,
|
|
26
|
+
"aria-expanded": x
|
|
20
27
|
}),
|
|
21
|
-
|
|
28
|
+
c && d({
|
|
29
|
+
href: l,
|
|
30
|
+
className: "app-header__logo",
|
|
31
|
+
"aria-label": C("logo", u),
|
|
32
|
+
children: c
|
|
33
|
+
}),
|
|
34
|
+
/* @__PURE__ */ a("div", {
|
|
22
35
|
className: "app-header__start",
|
|
23
|
-
children:
|
|
36
|
+
children: f
|
|
24
37
|
}),
|
|
25
|
-
|
|
38
|
+
p && /* @__PURE__ */ a("div", {
|
|
26
39
|
className: "app-header__notifications",
|
|
27
|
-
children:
|
|
40
|
+
children: p
|
|
28
41
|
}),
|
|
29
|
-
|
|
42
|
+
m && /* @__PURE__ */ a("div", {
|
|
30
43
|
className: "app-header__end",
|
|
31
|
-
children:
|
|
44
|
+
children: m
|
|
32
45
|
})
|
|
33
46
|
]
|
|
34
47
|
});
|
|
35
48
|
}
|
|
36
49
|
//#endregion
|
|
37
|
-
export {
|
|
50
|
+
export { c as AppHeader };
|
package/dist/app-shell.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.app-shell{--app-shell-sidebar-width:var(--sidebar-width);--app-shell-banner-height:0px;--app-shell-chrome-block-start:calc(var(--app-shell-banner-height) + var(--app-header-height) + env(safe-area-inset-top));flex-direction:column;block-size:100dvh;display:flex;overflow:clip}.app-shell__banner{flex-shrink:0}.app-shell__body{flex:1;min-block-size:0;display:flex;position:relative}.app-shell__content{min-inline-size:0;padding-inline:var(--section-padding-inline);padding-block:var(--section-padding-block-lg);flex:1;padding-block-end:max(var(--section-padding-block-lg), env(safe-area-inset-bottom));padding-inline-end:max(var(--section-padding-inline), env(safe-area-inset-right));overflow:auto}.app-shell__content.app-shell__content--flush{padding-block:0;padding-inline:0;padding-block-end:env(safe-area-inset-bottom);padding-inline-end:env(safe-area-inset-right)}.app-shell__backdrop{inset:0;background-color:var(--sidebar-backdrop-bg);opacity:var(--sidebar-backdrop-opacity);z-index:var(--sidebar-backdrop-z-index);position:fixed;inset-block-start:var(--app-shell-chrome-block-start)}
|
|
1
|
+
.app-shell{--app-shell-sidebar-width:var(--sidebar-width);--app-shell-banner-height:0px;--app-shell-chrome-block-start:calc(var(--app-shell-banner-height) + var(--app-header-height) + env(safe-area-inset-top));flex-direction:column;block-size:100dvh;display:flex;overflow:clip}.app-shell__banner{flex-shrink:0}.app-shell__body{flex:1;min-block-size:0;display:flex;position:relative}.app-shell__content{min-inline-size:0;padding-inline:var(--section-padding-inline);padding-block:var(--section-padding-block-lg);flex:1;padding-block-end:max(var(--section-padding-block-lg), env(safe-area-inset-bottom));padding-inline-end:max(var(--section-padding-inline), env(safe-area-inset-right));overflow:auto}.app-shell__content.app-shell__content--flush{padding-block:0;padding-inline:0;padding-block-end:env(safe-area-inset-bottom);padding-inline-end:env(safe-area-inset-right)}.app-shell__backdrop{inset:0;background-color:var(--sidebar-backdrop-bg);opacity:var(--sidebar-backdrop-opacity);z-index:var(--sidebar-backdrop-z-index);position:fixed;inset-block-start:var(--app-shell-chrome-block-start)}.app-shell:has(.app-header__logo) .sidebar__header{display:none}
|