@alveole/components 1.10.0 → 2.0.0-alpha.1

package/dist/ui/ToolbarTop/ToolbarTop.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ToolbarTop.styles.d.ts","sourceRoot":"","sources":["../../../src/ui/ToolbarTop/ToolbarTop.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmFnB,CAAC"}
+{"version":3,"file":"ToolbarTop.styles.d.ts","sourceRoot":"","sources":["../../../src/ui/ToolbarTop/ToolbarTop.styles.ts"],"names":[],"mappings":"AAkGA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAkF,CAAC"}

package/dist/ui/ToolbarTop/ToolbarTop.styles.js

@@ -1,14 +1,16 @@
 import { makeStyles } from '@alveole/theme';
-export const useStyles = makeStyles(({ text, color, spacing }) => ({
+// Le regroupement suit le decoupage du composant : la barre et ses variantes, le bloc qui
+// identifie le dossier, et la zone d'actions.
+const barre = ({ color, spacing }) => ({
     toolbarContainer: {
         backgroundColor: 'white',
         display: 'flex',
         flexDirection: 'row',
         alignItems: 'center',
-        paddingLeft: spacing('025'),
-        paddingRight: spacing('025'),
-        paddingTop: spacing('050'),
-        paddingBottom: spacing('050'),
+        paddingLeft: spacing('1V'),
+        paddingRight: spacing('1V'),
+        paddingTop: spacing('1W'),
+        paddingBottom: spacing('1W'),
     },
     compactLargetoolbarContainer: {
         paddingTop: spacing('3V'),
@@ -35,13 +37,15 @@ export const useStyles = makeStyles(({ text, color, spacing }) => ({
     toolbarNavigation: {
         display: 'flex',
         justifyContent: 'center',
-        gap: spacing('075'),
+        gap: spacing('3V'),
     },
+});
+const information = ({ color, text, spacing }) => ({
     toolbarInformation: {
         display: 'flex',
         flexDirection: 'row',
         alignItems: 'center',
-        gap: spacing('075'),
+        gap: spacing('3V'),
         flex: 1,
     },
     toolbarInformationTitle: {
@@ -69,17 +73,13 @@ export const useStyles = makeStyles(({ text, color, spacing }) => ({
     largeToolbarInformationTitleSubText: {
         ...text['Corps de texte'].SM.Regular,
     },
+});
+const actions = () => ({
     toolbarActions: {
         display: 'flex',
         flexDirection: 'row',
         justifyContent: 'flex-end',
         alignItems: 'center',
     },
-    toolbarInformationContainer: {
-        flex: 1,
-        alignItems: 'center',
-        display: 'flex',
-        flexDirection: 'row',
-        justifyContent: 'space-between',
-    },
-}));
+});
+export const useStyles = makeStyles(theme => ({ ...barre(theme), ...information(theme), ...actions() }));

package/dist/ui/ToolbarTop/ToolbarTop.types.d.ts

@@ -0,0 +1,40 @@
+import React from 'react';
+import { BoxProps } from '../../core/Box';
+import { AvatarProps } from '../Avatar';
+import { IconProps } from '../LucideIcon';
+/**
+ * La navigation va par trois : le geste, son icone et son nom. Les separer laissait passer une
+ * fleche muette. Le type les lie donc, et `navigationLabel` devient exigible des qu'il y a un
+ * geste : la meme fleche sert a revenir, a replier ou a ouvrir, et seul l'appelant sait
+ * laquelle des trois.
+ */
+export type Navigation = {
+    onNavigate?: undefined;
+    navigationIcon?: undefined;
+    navigationLabel?: undefined;
+} | {
+    onNavigate: () => void;
+    navigationIcon?: IconProps['name'];
+    navigationLabel: string;
+};
+/**
+ * `default` tient sur une ligne, `large` empile la navigation au-dessus du reste, et
+ * `compactLarge` garde la ligne en grossissant le titre. Les deux dernieres partagent ce grand
+ * titre, et rien d'autre.
+ */
+export type ToolbarTopVariant = 'default' | 'large' | 'compactLarge';
+export type ToolbarTopProps = BoxProps & Navigation & {
+    variant?: ToolbarTopVariant;
+    title: string;
+    AvatarProps?: Omit<AvatarProps, 'size'>;
+    withBorder?: boolean;
+    sousTitre?: string;
+    actions?: React.ReactNode;
+    typographyStyle?: React.CSSProperties;
+};
+/** Ce qui identifie le dossier courant : l'avatar, le titre et son sous-titre. */
+export type InformationDeLaBarre = Pick<ToolbarTopProps, 'title' | 'sousTitre' | 'AvatarProps' | 'typographyStyle'> & {
+    grandTitre: boolean;
+    compact: boolean;
+};
+//# sourceMappingURL=ToolbarTop.types.d.ts.map

package/dist/ui/ToolbarTop/ToolbarTop.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarTop.types.d.ts","sourceRoot":"","sources":["../../../src/ui/ToolbarTop/ToolbarTop.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AACxC,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAE1C;;;;;GAKG;AACH,MAAM,MAAM,UAAU,GAClB;IAAE,UAAU,CAAC,EAAE,SAAS,CAAC;IAAC,cAAc,CAAC,EAAE,SAAS,CAAC;IAAC,eAAe,CAAC,EAAE,SAAS,CAAA;CAAE,GACnF;IAAE,UAAU,EAAE,MAAM,IAAI,CAAC;IAAC,cAAc,CAAC,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;IAAC,eAAe,EAAE,MAAM,CAAA;CAAE,CAAC;AAE5F;;;;GAIG;AACH,MAAM,MAAM,iBAAiB,GAAG,SAAS,GAAG,OAAO,GAAG,cAAc,CAAC;AAErE,MAAM,MAAM,eAAe,GAAG,QAAQ,GACpC,UAAU,GAAG;IACX,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,IAAI,CAAC,WAAW,EAAE,MAAM,CAAC,CAAC;IACxC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,eAAe,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CACvC,CAAC;AAEJ,kFAAkF;AAClF,MAAM,MAAM,oBAAoB,GAAG,IAAI,CAAC,eAAe,EAAE,OAAO,GAAG,WAAW,GAAG,aAAa,GAAG,iBAAiB,CAAC,GAAG;IACpH,UAAU,EAAE,OAAO,CAAC;IACpB,OAAO,EAAE,OAAO,CAAC;CAClB,CAAC"}

package/dist/ui/ToolbarTop/ToolbarTop.types.js

@@ -0,0 +1 @@
+export {};

package/dist/ui/ToolbarTop/ToolbarTopInformation.d.ts

@@ -0,0 +1,7 @@
+import { InformationDeLaBarre } from './ToolbarTop.types';
+/**
+ * Ce qui identifie le dossier courant. Le style que l'appelant fournit passe en dernier : il sert
+ * justement a corriger ce que la variante a decide, et l'inverse le rendrait inoperant.
+ */
+export declare const ToolbarTopInformation: ({ title, sousTitre, AvatarProps, typographyStyle, grandTitre, compact, }: InformationDeLaBarre) => import("react").JSX.Element;
+//# sourceMappingURL=ToolbarTopInformation.d.ts.map

package/dist/ui/ToolbarTop/ToolbarTopInformation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarTopInformation.d.ts","sourceRoot":"","sources":["../../../src/ui/ToolbarTop/ToolbarTopInformation.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;AAG1D;;;GAGG;AACH,eAAO,MAAM,qBAAqB,GAAI,0EAOnC,oBAAoB,gCActB,CAAC"}

package/dist/ui/ToolbarTop/ToolbarTopInformation.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box } from '../../core/Box';
+import { Typography } from '../../core/Typography';
+import { Avatar } from '../Avatar';
+import { useStyles } from './ToolbarTop.styles';
+import { styleDuBlocDInformation, styleDuSousTitre, styleDuTitre } from './toolbarTopStyling';
+/**
+ * Ce qui identifie le dossier courant. Le style que l'appelant fournit passe en dernier : il sert
+ * justement a corriger ce que la variante a decide, et l'inverse le rendrait inoperant.
+ */
+export const ToolbarTopInformation = ({ title, sousTitre, AvatarProps, typographyStyle, grandTitre, compact, }) => {
+    const styles = useStyles();
+    return (_jsxs(Box, { tag: "toolbar-information", style: styleDuBlocDInformation(styles, compact), children: [AvatarProps && _jsx(Avatar, { ...AvatarProps, size: "md", carre: true }), _jsxs(Box, { tag: "toolbar-information-title", style: styles.toolbarInformationTitle, children: [_jsx(Typography, { style: styleDuTitre(styles, grandTitre, typographyStyle), children: title }), sousTitre && (_jsx(Typography, { style: styleDuSousTitre(styles, grandTitre, typographyStyle), children: sousTitre }))] })] }));
+};

package/dist/ui/ToolbarTop/ToolbarTopNavigation.d.ts

@@ -0,0 +1,10 @@
+import { Navigation } from './ToolbarTop.types';
+/**
+ * Le geste de retour, quand il y en a un. La fleche par defaut ramene en arriere : c'est le cas
+ * de loin le plus frequent, et l'appelant qui replie ou qui ferme designe la sienne.
+ *
+ * L'union entiere est exigee en entree, et non les trois champs a plat : c'est elle qui apprend
+ * au compilateur qu'un geste vient toujours avec son nom, et donc que le bouton est nomme.
+ */
+export declare const ToolbarTopNavigation: ({ onNavigate, navigationIcon, navigationLabel }: Navigation) => import("react").JSX.Element | null;
+//# sourceMappingURL=ToolbarTopNavigation.d.ts.map

package/dist/ui/ToolbarTop/ToolbarTopNavigation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarTopNavigation.d.ts","sourceRoot":"","sources":["../../../src/ui/ToolbarTop/ToolbarTopNavigation.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAEhD;;;;;;GAMG;AACH,eAAO,MAAM,oBAAoB,GAAI,iDAAiE,UAAU,uCAiB/G,CAAC"}

package/dist/ui/ToolbarTop/ToolbarTopNavigation.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box } from '../../core/Box';
+import { ButtonIcon } from '../Button';
+import { useStyles } from './ToolbarTop.styles';
+/**
+ * Le geste de retour, quand il y en a un. La fleche par defaut ramene en arriere : c'est le cas
+ * de loin le plus frequent, et l'appelant qui replie ou qui ferme designe la sienne.
+ *
+ * L'union entiere est exigee en entree, et non les trois champs a plat : c'est elle qui apprend
+ * au compilateur qu'un geste vient toujours avec son nom, et donc que le bouton est nomme.
+ */
+export const ToolbarTopNavigation = ({ onNavigate, navigationIcon = 'ChevronLeft', navigationLabel }) => {
+    const styles = useStyles();
+    if (!onNavigate)
+        return null;
+    return (_jsx(Box, { tag: "toolbar-navigation", style: styles.toolbarNavigation, children: _jsx(ButtonIcon, { variant: "tertiary", size: "lg", iconSize: "md", icon: navigationIcon, accessibilityLabel: navigationLabel, onPress: onNavigate }) }));
+};