@alveole/components 1.5.2 → 1.5.3

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 (11) hide show
  1. package/dist/generated/version.d.ts +1 -1
  2. package/dist/generated/version.js +1 -1
  3. package/dist/ui/Card/Card.stories.js +1 -1
  4. package/dist/ui/Card/Card.stories.sources.d.ts.map +1 -1
  5. package/dist/ui/Card/Card.stories.sources.js +1 -1
  6. package/dist/ui/Card/CardHeader.d.ts.map +1 -1
  7. package/dist/ui/Card/CardHeader.js +3 -2
  8. package/dist/ui/Card/CardHeader.styles.d.ts +3 -0
  9. package/dist/ui/Card/CardHeader.styles.d.ts.map +1 -1
  10. package/dist/ui/Card/CardHeader.styles.js +3 -0
  11. package/package.json +1 -1
package/dist/generated/version.d.ts CHANGED
@@ -1,2 +1,2 @@
1
- export declare const ALVEOLE_COMPONENTS_VERSION: "1.5.2";
1
+ export declare const ALVEOLE_COMPONENTS_VERSION: "1.5.3";
2
2
  //# sourceMappingURL=version.d.ts.map
package/dist/generated/version.js CHANGED
@@ -1 +1 @@
1
- export const ALVEOLE_COMPONENTS_VERSION = "1.5.2";
1
+ export const ALVEOLE_COMPONENTS_VERSION = "1.5.3";
package/dist/ui/Card/Card.stories.js CHANGED
@@ -19,7 +19,7 @@ export const card = () => {
19
19
  return (_jsx(Box, { style: { width: '100%', maxWidth: 400 }, children: _jsxs(Card, { children: [_jsx(Card.Header, { titre: "Titre lorem", sousTitre: "Sous-titre", image: _jsx(Avatar, { size: "md", fallbackText: "M" }), badge: _jsx(Badge, { variant: "success", size: "sm", children: "PR\u00C9SENT" }) }), _jsx(Card.Section, { titre: "Titre section", titreIcone: "Calendar", description: "Description" }), _jsx(Card.Section, { titre: "Titre section", titreIcone: "Calendar", description: "Description" }), _jsxs(Card.Actions, { children: [_jsx(Button, { variant: "secondary", title: "Libell\u00E9", size: "sm" }), _jsx(Button, { variant: "primary", title: "Libell\u00E9", size: "sm" })] })] }) }));
20
20
  };
21
21
  export const cardDisabled = () => {
22
- return (_jsx(Box, { style: { width: '100%', maxWidth: 400 }, children: _jsxs(Card, { children: [_jsx(Card.Header, { variant: "disabled", titre: "Titre lorem", sousTitre: "Sous-titre", image: _jsx(Avatar, { size: "md", fallbackText: "M" }), badge: _jsx(Badge, { variant: "disabled", size: "sm", children: "PR\u00C9SENT" }) }), _jsx(Card.Section, { variant: "disabled", titre: "Titre section", titreIcone: "Calendar", description: "Description" }), _jsx(Card.Section, { variant: "disabled", titre: "Titre section", titreIcone: "Calendar", description: "Description" }), _jsxs(Card.Actions, { children: [_jsx(Button, { variant: "secondary", title: "Libell\u00E9", size: "sm", disabled: true }), _jsx(Button, { variant: "primary", title: "Libell\u00E9", size: "sm", disabled: true })] })] }) }));
22
+ return (_jsx(Box, { style: { width: '100%', maxWidth: 400 }, children: _jsxs(Card, { children: [_jsx(Card.Header, { variant: "disabled", titre: "Titre lorem", sousTitre: "Sous-titre", image: _jsx(Avatar, { size: "md", src: "https://picsum.photos/100/100", fallbackText: "M" }), badge: _jsx(Badge, { variant: "disabled", size: "sm", children: "PR\u00C9SENT" }) }), _jsx(Card.Section, { variant: "disabled", titre: "Titre section", titreIcone: "Calendar", description: "Description" }), _jsx(Card.Section, { variant: "disabled", titre: "Titre section", titreIcone: "Calendar", description: "Description" }), _jsxs(Card.Actions, { children: [_jsx(Button, { variant: "secondary", title: "Libell\u00E9", size: "sm", disabled: true }), _jsx(Button, { variant: "primary", title: "Libell\u00E9", size: "sm", disabled: true })] })] }) }));
23
23
  };
24
24
  export const cardWithMedia = () => {
25
25
  return (_jsx(Box, { style: { width: '100%', maxWidth: 400 }, children: _jsxs(Card, { children: [_jsx(Card.Media, { children: _jsx("img", { src: "https://picsum.photos/400/200", alt: "", style: { width: '100%', display: 'block' } }) }), _jsx(Card.Header, { titre: "Titre lorem", sousTitre: "Sous-titre", image: _jsx(Avatar, { size: "md", fallbackText: "M" }), badge: _jsx(Badge, { variant: "success", size: "sm", children: "PR\u00C9SENT" }) }), _jsx(Card.Section, { titre: "Titre section", titreIcone: "Calendar", description: "Description" }), _jsx(Card.Section, { titre: "Titre section", titreIcone: "Calendar", description: "Description" }), _jsxs(Card.Actions, { children: [_jsx(Button, { variant: "secondary", title: "Libell\u00E9", size: "sm" }), _jsx(Button, { variant: "primary", title: "Libell\u00E9", size: "sm" })] })] }) }));
package/dist/ui/Card/Card.stories.sources.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Card.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/Card/Card.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,IAAI,cAA80B,CAAC;AAEh2B,eAAO,MAAM,YAAY,cAAm7B,CAAC;AAE78B,eAAO,MAAM,aAAa,cAAk/B,CAAC;AAE7gC,eAAO,MAAM,qBAAqB,cAA4mC,CAAC;AAE/oC,eAAO,MAAM,WAAW,cAA8O,CAAC;AAEvQ,eAAO,MAAM,mBAAmB,cAAkR,CAAC;AAEnT,eAAO,MAAM,UAAU,cAA2hB,CAAC;AAEnjB,eAAO,MAAM,kBAAkB,cAAqW,CAAC;AAErY,eAAO,MAAM,WAAW,cAAoP,CAAC;AAE7Q,eAAO,MAAM,YAAY;;;;;;;;;;CAUf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC;AAExD,eAAO,MAAM,iBAAiB,EAAE,OAAO,CAAC,MAAM,CAAC,eAAe,EAAE,MAAM,CAAC,CAEtE,CAAC"}
1
+ {"version":3,"file":"Card.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/Card/Card.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,IAAI,cAA80B,CAAC;AAEh2B,eAAO,MAAM,YAAY,cAAy9B,CAAC;AAEn/B,eAAO,MAAM,aAAa,cAAk/B,CAAC;AAE7gC,eAAO,MAAM,qBAAqB,cAA4mC,CAAC;AAE/oC,eAAO,MAAM,WAAW,cAA8O,CAAC;AAEvQ,eAAO,MAAM,mBAAmB,cAAkR,CAAC;AAEnT,eAAO,MAAM,UAAU,cAA2hB,CAAC;AAEnjB,eAAO,MAAM,kBAAkB,cAAqW,CAAC;AAErY,eAAO,MAAM,WAAW,cAAoP,CAAC;AAE7Q,eAAO,MAAM,YAAY;;;;;;;;;;CAUf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC;AAExD,eAAO,MAAM,iBAAiB,EAAE,OAAO,CAAC,MAAM,CAAC,eAAe,EAAE,MAAM,CAAC,CAEtE,CAAC"}
package/dist/ui/Card/Card.stories.sources.js CHANGED
@@ -1,7 +1,7 @@
1
1
  // This file is generated. Do not edit manually.
2
2
  // Source: src/ui/Card/Card.stories.tsx
3
3
  export const card = () => "export const card = () => {\n return (\n <Box style={{ width: '100%', maxWidth: 400 }}>\n <Card>\n <Card.Header\n titre=\"Titre lorem\"\n sousTitre=\"Sous-titre\"\n image={<Avatar size=\"md\" fallbackText=\"M\" />}\n badge={\n <Badge variant=\"success\" size=\"sm\">\n PRÉSENT\n </Badge>\n }\n />\n <Card.Section titre=\"Titre section\" titreIcone=\"Calendar\" description=\"Description\" />\n <Card.Section titre=\"Titre section\" titreIcone=\"Calendar\" description=\"Description\" />\n <Card.Actions>\n <Button variant=\"secondary\" title=\"Libellé\" size=\"sm\" />\n <Button variant=\"primary\" title=\"Libellé\" size=\"sm\" />\n </Card.Actions>\n </Card>\n </Box>\n );\n};";
4
- export const cardDisabled = () => "export const cardDisabled = () => {\n return (\n <Box style={{ width: '100%', maxWidth: 400 }}>\n <Card>\n <Card.Header\n variant=\"disabled\"\n titre=\"Titre lorem\"\n sousTitre=\"Sous-titre\"\n image={<Avatar size=\"md\" fallbackText=\"M\" />}\n badge={\n <Badge variant=\"disabled\" size=\"sm\">\n PRÉSENT\n </Badge>\n }\n />\n <Card.Section variant=\"disabled\" titre=\"Titre section\" titreIcone=\"Calendar\" description=\"Description\" />\n <Card.Section variant=\"disabled\" titre=\"Titre section\" titreIcone=\"Calendar\" description=\"Description\" />\n <Card.Actions>\n <Button variant=\"secondary\" title=\"Libellé\" size=\"sm\" disabled />\n <Button variant=\"primary\" title=\"Libellé\" size=\"sm\" disabled />\n </Card.Actions>\n </Card>\n </Box>\n );\n};";
4
+ export const cardDisabled = () => "export const cardDisabled = () => {\n return (\n <Box style={{ width: '100%', maxWidth: 400 }}>\n <Card>\n <Card.Header\n variant=\"disabled\"\n titre=\"Titre lorem\"\n sousTitre=\"Sous-titre\"\n image={<Avatar size=\"md\" src=\"https://picsum.photos/100/100\" fallbackText=\"M\" />}\n badge={\n <Badge variant=\"disabled\" size=\"sm\">\n PRÉSENT\n </Badge>\n }\n />\n <Card.Section variant=\"disabled\" titre=\"Titre section\" titreIcone=\"Calendar\" description=\"Description\" />\n <Card.Section variant=\"disabled\" titre=\"Titre section\" titreIcone=\"Calendar\" description=\"Description\" />\n <Card.Actions>\n <Button variant=\"secondary\" title=\"Libellé\" size=\"sm\" disabled />\n <Button variant=\"primary\" title=\"Libellé\" size=\"sm\" disabled />\n </Card.Actions>\n </Card>\n </Box>\n );\n};";
5
5
  export const cardWithMedia = () => "export const cardWithMedia = () => {\n return (\n <Box style={{ width: '100%', maxWidth: 400 }}>\n <Card>\n <Card.Media>\n <img src=\"https://picsum.photos/400/200\" alt=\"\" style={{ width: '100%', display: 'block' }} />\n </Card.Media>\n <Card.Header\n titre=\"Titre lorem\"\n sousTitre=\"Sous-titre\"\n image={<Avatar size=\"md\" fallbackText=\"M\" />}\n badge={\n <Badge variant=\"success\" size=\"sm\">\n PRÉSENT\n </Badge>\n }\n />\n <Card.Section titre=\"Titre section\" titreIcone=\"Calendar\" description=\"Description\" />\n <Card.Section titre=\"Titre section\" titreIcone=\"Calendar\" description=\"Description\" />\n <Card.Actions>\n <Button variant=\"secondary\" title=\"Libellé\" size=\"sm\" />\n <Button variant=\"primary\" title=\"Libellé\" size=\"sm\" />\n </Card.Actions>\n </Card>\n </Box>\n );\n};";
6
6
  export const cardWithMediaDisabled = () => "export const cardWithMediaDisabled = () => {\n return (\n <Box style={{ width: '100%', maxWidth: 400 }}>\n <Card>\n <Card.Media variant=\"disabled\">\n <img src=\"https://picsum.photos/400/200\" alt=\"\" style={{ width: '100%', display: 'block' }} />\n </Card.Media>\n <Card.Header\n variant=\"disabled\"\n titre=\"Titre lorem\"\n sousTitre=\"Sous-titre\"\n image={<Avatar size=\"md\" fallbackText=\"M\" />}\n badge={\n <Badge variant=\"disabled\" size=\"sm\">\n PRÉSENT\n </Badge>\n }\n />\n <Card.Section variant=\"disabled\" titre=\"Titre section\" titreIcone=\"Calendar\" description=\"Description\" />\n <Card.Section variant=\"disabled\" titre=\"Titre section\" titreIcone=\"Calendar\" description=\"Description\" />\n <Card.Actions>\n <Button variant=\"secondary\" title=\"Libellé\" size=\"sm\" disabled />\n <Button variant=\"primary\" title=\"Libellé\" size=\"sm\" disabled />\n </Card.Actions>\n </Card>\n </Box>\n );\n};";
7
7
  export const cardSection = () => "export const cardSection = () => {\n return (\n <Card.Section\n titre=\"Titre de la carte\"\n description=\"Description de la carte\"\n titreIcone=\"Image\"\n descriptionIcone=\"Image\"\n />\n );\n};";
package/dist/ui/Card/CardHeader.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"CardHeader.d.ts","sourceRoot":"","sources":["../../../src/ui/Card/CardHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAO,QAAQ,EAAc,MAAM,YAAY,CAAC;AAGvD,MAAM,MAAM,iBAAiB,GAAG,SAAS,GAAG,UAAU,CAAC;AAEvD,MAAM,MAAM,eAAe,GAAG,QAAQ,GAAG;IACvC,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACzB,CAAC;AAEF,eAAO,MAAM,UAAU,GAAI,OAAO,eAAe,sBAqBhD,CAAC"}
1
+ {"version":3,"file":"CardHeader.d.ts","sourceRoot":"","sources":["../../../src/ui/Card/CardHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAO,QAAQ,EAAc,MAAM,YAAY,CAAC;AAGvD,MAAM,MAAM,iBAAiB,GAAG,SAAS,GAAG,UAAU,CAAC;AAEvD,MAAM,MAAM,eAAe,GAAG,QAAQ,GAAG;IACvC,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACzB,CAAC;AAEF,eAAO,MAAM,UAAU,GAAI,OAAO,eAAe,sBA0BhD,CAAC"}
package/dist/ui/Card/CardHeader.js CHANGED
@@ -4,6 +4,7 @@ import { useStyles } from './CardHeader.styles';
4
4
  export const CardHeader = (props) => {
5
5
  const { variant = 'default', titre, sousTitre, image, badge, style, children, ...boxProps } = props;
6
6
  const styles = useStyles();
7
- const disabledTextStyle = variant === 'disabled' ? styles.disabledText : {};
8
- return (_jsxs(Box, { tag: "card-header", style: [styles.cardHeader, disabledTextStyle, style], ...boxProps, children: [image, _jsxs(Box, { tag: "card-header-texte", style: styles.texte, children: [_jsx(Typography, { style: [styles.titre, disabledTextStyle], children: titre }), sousTitre && _jsx(Typography, { style: [styles.sousTitre, disabledTextStyle], children: sousTitre })] }), badge && (_jsx(Box, { tag: "card-trailing", style: styles.trailing, children: badge }))] }));
7
+ const isDisabled = variant === 'disabled';
8
+ const disabledTextStyle = isDisabled ? styles.disabledText : {};
9
+ return (_jsxs(Box, { tag: "card-header", style: [styles.cardHeader, disabledTextStyle, style], ...boxProps, children: [image && (_jsx(Box, { tag: "card-image", style: [isDisabled ? styles.imageDisabled : {}], children: image })), _jsxs(Box, { tag: "card-header-texte", style: styles.texte, children: [_jsx(Typography, { style: [styles.titre, disabledTextStyle], children: titre }), sousTitre && _jsx(Typography, { style: [styles.sousTitre, disabledTextStyle], children: sousTitre })] }), badge && (_jsx(Box, { tag: "card-trailing", style: styles.trailing, children: badge }))] }));
9
10
  };
package/dist/ui/Card/CardHeader.styles.d.ts CHANGED
@@ -33,5 +33,8 @@ export declare const useStyles: () => {
33
33
  display: "flex";
34
34
  alignItems: "flex-start";
35
35
  };
36
+ imageDisabled: {
37
+ filter: "grayscale(1)";
38
+ };
36
39
  };
37
40
  //# sourceMappingURL=CardHeader.styles.d.ts.map
package/dist/ui/Card/CardHeader.styles.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"CardHeader.styles.d.ts","sourceRoot":"","sources":["../../../src/ui/Card/CardHeader.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2BnB,CAAC"}
1
+ {"version":3,"file":"CardHeader.styles.d.ts","sourceRoot":"","sources":["../../../src/ui/Card/CardHeader.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8BnB,CAAC"}
package/dist/ui/Card/CardHeader.styles.js CHANGED
@@ -26,4 +26,7 @@ export const useStyles = makeStyles(({ spacing, color, text }) => ({
26
26
  display: 'flex',
27
27
  alignItems: 'flex-start',
28
28
  },
29
+ imageDisabled: {
30
+ filter: 'grayscale(1)',
31
+ },
29
32
  }));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@alveole/components",
3
- "version": "1.5.2",
3
+ "version": "1.5.3",
4
4
  "description": "Shared UI components.",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",