@alveole/components 0.17.0 → 0.18.0

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.
Files changed (15) hide show
  1. package/dist/core/Metabase/Metabase.stories.d.ts +1 -1
  2. package/dist/core/Metabase/Metabase.styles.d.ts +1 -1
  3. package/dist/core/Metabase/Metabase.styles.js +1 -1
  4. package/dist/core/Version/Version.d.ts +1 -1
  5. package/dist/core/Version/Version.d.ts.map +1 -1
  6. package/dist/ui/ToolbarTop/ToolbarTop.d.ts +1 -0
  7. package/dist/ui/ToolbarTop/ToolbarTop.d.ts.map +1 -1
  8. package/dist/ui/ToolbarTop/ToolbarTop.js +6 -2
  9. package/dist/ui/ToolbarTop/ToolbarTop.stories.d.ts +6 -0
  10. package/dist/ui/ToolbarTop/ToolbarTop.stories.d.ts.map +1 -1
  11. package/dist/ui/ToolbarTop/ToolbarTop.stories.js +2 -0
  12. package/dist/ui/ToolbarTop/ToolbarTop.styles.d.ts +5 -0
  13. package/dist/ui/ToolbarTop/ToolbarTop.styles.d.ts.map +1 -1
  14. package/dist/ui/ToolbarTop/ToolbarTop.styles.js +5 -0
  15. package/package.json +1 -1
package/dist/core/Metabase/Metabase.stories.d.ts CHANGED
@@ -9,7 +9,7 @@ declare const _default: {
9
9
  height: 600 | "100%";
10
10
  width: "100%";
11
11
  flex: number;
12
- background: string;
12
+ backgroundColor: "#ffffff";
13
13
  borderRadius: number;
14
14
  boxSizing: "border-box";
15
15
  };
package/dist/core/Metabase/Metabase.styles.d.ts CHANGED
@@ -3,7 +3,7 @@ export declare const useStyles: () => {
3
3
  height: 600 | "100%";
4
4
  width: "100%";
5
5
  flex: number;
6
- background: string;
6
+ backgroundColor: "#ffffff";
7
7
  borderRadius: number;
8
8
  boxSizing: "border-box";
9
9
  };
package/dist/core/Metabase/Metabase.styles.js CHANGED
@@ -5,7 +5,7 @@ export const useStyles = makeStyles(() => ({
5
5
  height: Platform.OS === 'web' ? '100%' : 600,
6
6
  width: '100%',
7
7
  flex: 1,
8
- background: '#ffffff',
8
+ backgroundColor: '#ffffff',
9
9
  borderRadius: 10,
10
10
  boxSizing: 'border-box',
11
11
  },
package/dist/core/Version/Version.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import React from 'react';
2
2
  export declare const displayVersion: (version: string | undefined, build?: string) => string;
3
- export type VersionProps = React.PropsWithoutRef<{}>;
3
+ export type VersionProps = React.PropsWithoutRef<object>;
4
4
  export declare const Version: (_props: VersionProps) => import("react/jsx-runtime").JSX.Element;
5
5
  //# sourceMappingURL=Version.d.ts.map
package/dist/core/Version/Version.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Version.d.ts","sourceRoot":"","sources":["../../../src/core/Version/Version.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,eAAO,MAAM,cAAc,GAAI,SAAS,MAAM,GAAG,SAAS,EAAE,QAAQ,MAAM,WAEzE,CAAC;AACF,MAAM,MAAM,YAAY,GAAG,KAAK,CAAC,eAAe,CAAC,EAAE,CAAC,CAAC;AACrD,eAAO,MAAM,OAAO,GAAI,QAAQ,YAAY,4CAa3C,CAAC"}
1
+ {"version":3,"file":"Version.d.ts","sourceRoot":"","sources":["../../../src/core/Version/Version.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,eAAO,MAAM,cAAc,GAAI,SAAS,MAAM,GAAG,SAAS,EAAE,QAAQ,MAAM,WAEzE,CAAC;AACF,MAAM,MAAM,YAAY,GAAG,KAAK,CAAC,eAAe,CAAC,MAAM,CAAC,CAAC;AACzD,eAAO,MAAM,OAAO,GAAI,QAAQ,YAAY,4CAa3C,CAAC"}
package/dist/ui/ToolbarTop/ToolbarTop.d.ts CHANGED
@@ -6,6 +6,7 @@ export type ToolbarTopProps = BoxProps & {
6
6
  variant?: 'default' | 'large' | 'compactLarge';
7
7
  title: string;
8
8
  AvatarProps?: Omit<AvatarProps, 'size'>;
9
+ withBorder?: boolean;
9
10
  onNavigate?: () => void;
10
11
  navigationIcon?: IconProps['name'];
11
12
  sousTitre?: string;
package/dist/ui/ToolbarTop/ToolbarTop.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ToolbarTop.d.ts","sourceRoot":"","sources":["../../../src/ui/ToolbarTop/ToolbarTop.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAO,QAAQ,EAAc,MAAM,YAAY,CAAC;AACvD,OAAO,EAAU,WAAW,EAAE,MAAM,WAAW,CAAC;AAEhD,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAG1C,MAAM,MAAM,eAAe,GAAG,QAAQ,GAAG;IACvC,OAAO,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,cAAc,CAAC;IAC/C,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,IAAI,CAAC,WAAW,EAAE,MAAM,CAAC,CAAC;IACxC,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,cAAc,CAAC,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,WAAW,CAAC,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;IAChC,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAEF,eAAO,MAAM,UAAU,GAAI,OAAO,eAAe,4CAmFhD,CAAC"}
1
+ {"version":3,"file":"ToolbarTop.d.ts","sourceRoot":"","sources":["../../../src/ui/ToolbarTop/ToolbarTop.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAO,QAAQ,EAAc,MAAM,YAAY,CAAC;AACvD,OAAO,EAAU,WAAW,EAAE,MAAM,WAAW,CAAC;AAEhD,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAG1C,MAAM,MAAM,eAAe,GAAG,QAAQ,GAAG;IACvC,OAAO,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,cAAc,CAAC;IAC/C,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,IAAI,CAAC,WAAW,EAAE,MAAM,CAAC,CAAC;IACxC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,cAAc,CAAC,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,WAAW,CAAC,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;IAChC,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAEF,eAAO,MAAM,UAAU,GAAI,OAAO,eAAe,4CAwFhD,CAAC"}
package/dist/ui/ToolbarTop/ToolbarTop.js CHANGED
@@ -4,10 +4,14 @@ import { Avatar } from '../Avatar';
4
4
  import { ButtonIcon } from '../Button';
5
5
  import { useStyles } from './ToolbarTop.styles';
6
6
  export const ToolbarTop = (props) => {
7
- const { variant = 'default', style, title, onNavigate, navigationIcon = 'ChevronLeft', AvatarProps, sousTitre, actions, ...toolbarProps } = props;
7
+ const { variant = 'default', style, title, onNavigate, navigationIcon = 'ChevronLeft', AvatarProps, sousTitre, actions, withBorder = false, ...toolbarProps } = props;
8
8
  const styles = useStyles();
9
9
  const toolbarNavigation = onNavigate ? (_jsx(Box, { tag: "toolbar-navigation", style: styles.toolbarNavigation, children: _jsx(ButtonIcon, { variant: "tertiary", size: "lg", iconSize: "md", icon: navigationIcon, onPress: onNavigate }) })) : (_jsx(_Fragment, {}));
10
- const toolbarInformation = (_jsxs(Box, { tag: "toolbar-information", style: { ...styles.toolbarInformation, ...(variant === 'compactLarge' ? styles.compactLargeInformations : {}) }, children: [AvatarProps && _jsx(Avatar, { ...AvatarProps, size: "md" }), _jsxs(Box, { tag: "toolbar-information-title", style: styles.toolbarInformationTitle, children: [_jsx(Typography, { style: {
10
+ const toolbarInformation = (_jsxs(Box, { tag: "toolbar-information", style: {
11
+ ...styles.toolbarInformation,
12
+ ...(variant === 'compactLarge' ? styles.compactLargeInformations : {}),
13
+ ...(withBorder ? styles.toolbarInformationWithBorder : {}),
14
+ }, children: [AvatarProps && _jsx(Avatar, { ...AvatarProps, size: "md", carre: true }), _jsxs(Box, { tag: "toolbar-information-title", style: styles.toolbarInformationTitle, children: [_jsx(Typography, { style: {
11
15
  ...styles.toolbarInformationTitleText,
12
16
  ...(variant === 'compactLarge' || variant === 'large' ? styles.largeInformationTitleText : {}),
13
17
  }, children: title }), sousTitre && (_jsx(Typography, { style: {
package/dist/ui/ToolbarTop/ToolbarTop.stories.d.ts CHANGED
@@ -31,6 +31,11 @@ declare const _default: {
31
31
  flexDirection: "column";
32
32
  alignItems: "flex-start";
33
33
  };
34
+ toolbarInformationWithBorder: {
35
+ borderBottomWidth: number;
36
+ borderStyle: "solid";
37
+ borderColor: "#DEE3EC";
38
+ };
34
39
  toolbarNavigation: {
35
40
  display: "flex";
36
41
  justifyContent: "center";
@@ -102,6 +107,7 @@ export declare const AvecAvatarSansActions: () => import("react/jsx-runtime").JS
102
107
  export declare const AvecAvatarEtActions: () => import("react/jsx-runtime").JSX.Element;
103
108
  export declare const AvecPlusieursActions: () => import("react/jsx-runtime").JSX.Element;
104
109
  export declare const AvecTitreEtSansSousTitre: () => import("react/jsx-runtime").JSX.Element;
110
+ export declare const AvecBorder: () => import("react/jsx-runtime").JSX.Element;
105
111
  export declare const CompactLarge: () => import("react/jsx-runtime").JSX.Element;
106
112
  export declare const Large: () => import("react/jsx-runtime").JSX.Element;
107
113
  //# sourceMappingURL=ToolbarTop.stories.d.ts.map
package/dist/ui/ToolbarTop/ToolbarTop.stories.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ToolbarTop.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/ToolbarTop/ToolbarTop.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKA,wBAWkB;AAElB,eAAO,MAAM,OAAO,+CAA4D,CAAC;AAEjF,eAAO,MAAM,uBAAuB,+CAOnC,CAAC;AAEF,eAAO,MAAM,qBAAqB,+CAEjC,CAAC;AAEF,eAAO,MAAM,mBAAmB,+CAQ/B,CAAC;AAEF,eAAO,MAAM,oBAAoB,+CAahC,CAAC;AAEF,eAAO,MAAM,wBAAwB,+CAYpC,CAAC;AAEF,eAAO,MAAM,YAAY,+CAA0E,CAAC;AAEpG,eAAO,MAAM,KAAK,+CAEjB,CAAC"}
1
+ {"version":3,"file":"ToolbarTop.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/ToolbarTop/ToolbarTop.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA,wBAWkB;AAElB,eAAO,MAAM,OAAO,+CAA4D,CAAC;AAEjF,eAAO,MAAM,uBAAuB,+CAOnC,CAAC;AAEF,eAAO,MAAM,qBAAqB,+CAEjC,CAAC;AAEF,eAAO,MAAM,mBAAmB,+CAQ/B,CAAC;AAEF,eAAO,MAAM,oBAAoB,+CAahC,CAAC;AAEF,eAAO,MAAM,wBAAwB,+CAYpC,CAAC;AAEF,eAAO,MAAM,UAAU,+CAQtB,CAAC;AAEF,eAAO,MAAM,YAAY,+CAA0E,CAAC;AAEpG,eAAO,MAAM,KAAK,+CAEjB,CAAC"}
package/dist/ui/ToolbarTop/ToolbarTop.stories.js CHANGED
@@ -1,4 +1,5 @@
1
1
  import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import { Typography } from '../../core';
2
3
  import { ButtonIcon } from '../Button/ButtonIcon';
3
4
  import { ToolbarTop } from './ToolbarTop';
4
5
  import { useStyles } from './ToolbarTop.styles';
@@ -18,5 +19,6 @@ export const AvecAvatarSansActions = () => (_jsx(ToolbarTop, { title: "Titre", s
18
19
  export const AvecAvatarEtActions = () => (_jsx(ToolbarTop, { title: "Titre", sousTitre: "Sous-titre", onNavigate: console.log, AvatarProps: { src: 'https://picsum.photos/100/200' }, actions: _jsx(ButtonIcon, { variant: "tertiary", size: "lg", iconSize: "md", icon: 'Plus', onPress: console.log }) }));
19
20
  export const AvecPlusieursActions = () => (_jsx(ToolbarTop, { title: "Titre", sousTitre: "Sous-titre", onNavigate: console.log, AvatarProps: { src: 'https://picsum.photos/100/200' }, actions: _jsxs(_Fragment, { children: [_jsx(ButtonIcon, { variant: "tertiary", size: "lg", iconSize: "md", icon: 'Plus', onPress: console.log }), _jsx(ButtonIcon, { variant: "tertiary", size: "lg", iconSize: "md", icon: 'Download', onPress: console.log })] }) }));
20
21
  export const AvecTitreEtSansSousTitre = () => (_jsx(ToolbarTop, { title: "Titre", onNavigate: console.log, AvatarProps: { src: 'https://picsum.photos/100/200' }, actions: _jsxs(_Fragment, { children: [_jsx(ButtonIcon, { variant: "tertiary", size: "lg", iconSize: "md", icon: 'Plus', onPress: console.log }), _jsx(ButtonIcon, { variant: "tertiary", size: "lg", iconSize: "md", icon: 'Download', onPress: console.log })] }) }));
22
+ export const AvecBorder = () => (_jsxs(_Fragment, { children: [_jsx(Typography, { children: "En r\u00E8gle g\u00E9n\u00E9ral, on applique la propri\u00E9t\u00E9 `withBorder` sur la ToolbarTop pour ajouter une bordure seulement quand on a scroll dans la page. Si on retourne en haut de la page, la bordure dispara\u00EEt." }), _jsx(ToolbarTop, { title: "Titre", sousTitre: "Sous-titre", withBorder: true })] }));
21
23
  export const CompactLarge = () => _jsx(ToolbarTop, { title: "Titre compact large", variant: "compactLarge" });
22
24
  export const Large = () => (_jsx(ToolbarTop, { title: "Titre large", variant: "large", onNavigate: console.log, sousTitre: "Sous-titre" }));
package/dist/ui/ToolbarTop/ToolbarTop.styles.d.ts CHANGED
@@ -23,6 +23,11 @@ export declare const useStyles: () => {
23
23
  flexDirection: "column";
24
24
  alignItems: "flex-start";
25
25
  };
26
+ toolbarInformationWithBorder: {
27
+ borderBottomWidth: number;
28
+ borderStyle: "solid";
29
+ borderColor: "#DEE3EC";
30
+ };
26
31
  toolbarNavigation: {
27
32
  display: "flex";
28
33
  justifyContent: "center";
package/dist/ui/ToolbarTop/ToolbarTop.styles.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ToolbarTop.styles.d.ts","sourceRoot":"","sources":["../../../src/ui/ToolbarTop/ToolbarTop.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2EnB,CAAC"}
1
+ {"version":3,"file":"ToolbarTop.styles.d.ts","sourceRoot":"","sources":["../../../src/ui/ToolbarTop/ToolbarTop.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgFnB,CAAC"}
package/dist/ui/ToolbarTop/ToolbarTop.styles.js CHANGED
@@ -24,6 +24,11 @@ export const useStyles = makeStyles(({ text, color, spacing }) => ({
24
24
  flexDirection: 'column',
25
25
  alignItems: 'flex-start',
26
26
  },
27
+ toolbarInformationWithBorder: {
28
+ borderBottomWidth: 1,
29
+ borderStyle: 'solid',
30
+ borderColor: color.light.border['default-grey'],
31
+ },
27
32
  toolbarNavigation: {
28
33
  display: 'flex',
29
34
  justifyContent: 'center',
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@alveole/components",
3
- "version": "0.17.0",
3
+ "version": "0.18.0",
4
4
  "description": "Shared UI components.",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",