allaw-ui 1.0.12 → 1.0.16

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.
@@ -3,6 +3,14 @@
3
3
  align-items: flex-start;
4
4
  }
5
5
 
6
+ .tab-navigation.small .tab-label {
7
+ font-size: 14px;
8
+ }
9
+
10
+ .tab-navigation.normal .tab-label {
11
+ font-size: 18px;
12
+ }
13
+
6
14
  .tab-item {
7
15
  display: flex;
8
16
  padding: 0px 16px 10px 16px;
@@ -15,6 +23,7 @@
15
23
 
16
24
  .tab-item.active {
17
25
  border-bottom: 2px solid #000;
26
+ padding-bottom: 9px;
18
27
  color: var(--Primary-Mid-black, var(--primary-black, #171e25));
19
28
  }
20
29
 
@@ -25,7 +34,6 @@
25
34
 
26
35
  .tab-label {
27
36
  font-family: "Poppins", sans-serif;
28
- font-size: 14px;
29
37
  font-style: normal;
30
38
  font-weight: 600;
31
39
  line-height: 1;
@@ -38,6 +46,6 @@
38
46
  background-color: #ef1a1a;
39
47
  border-radius: 50%;
40
48
  position: absolute;
41
- top: 3px;
49
+ top: 6px;
42
50
  right: 6px;
43
51
  }
@@ -8,6 +8,7 @@ export interface TabNavigationProps {
8
8
  hasNotification: boolean;
9
9
  }[];
10
10
  onTabClick: (index: number) => void;
11
+ size?: "small" | "normal";
11
12
  }
12
13
  declare const TabNavigation: React.FC<TabNavigationProps>;
13
14
  export default TabNavigation;
@@ -2,8 +2,8 @@ import React from "react";
2
2
  import "./TabNavigation.css";
3
3
  import "../../../styles/global.css";
4
4
  var TabNavigation = function (_a) {
5
- var tabs = _a.tabs, onTabClick = _a.onTabClick;
6
- return (React.createElement("div", { className: "tab-navigation" }, tabs.map(function (tab, index) { return (React.createElement("div", { key: index, className: "tab-item ".concat(tab.isActive ? "active" : "inactive"), onClick: function () { return onTabClick(index); } },
5
+ var tabs = _a.tabs, onTabClick = _a.onTabClick, _b = _a.size, size = _b === void 0 ? "normal" : _b;
6
+ return (React.createElement("div", { className: "tab-navigation ".concat(size) }, tabs.map(function (tab, index) { return (React.createElement("div", { key: index, className: "tab-item ".concat(tab.isActive ? "active" : "inactive"), onClick: function () { return onTabClick(index); } },
7
7
  React.createElement("span", { className: "tab-label" }, tab.label),
8
8
  tab.hasNotification && React.createElement("span", { className: "tab-notification-dot" }))); })));
9
9
  };
@@ -15,6 +15,7 @@ export interface CaseCardProps {
15
15
  dateStyle?: "horizontal" | "hybride" | "vertical";
16
16
  dateLabel?: string;
17
17
  barColor?: BarColor;
18
+ showYear?: boolean;
18
19
  }
19
20
  declare const CaseCard: React.FC<CaseCardProps>;
20
21
  export default CaseCard;
@@ -4,7 +4,7 @@ import OtherStatusTag from "../../atoms/tags/OtherStatusTag";
4
4
  import CardDate from "../../atoms/typography/CardDate";
5
5
  import ProgressBar from "../../atoms/progressBars/ProgressBar";
6
6
  var CaseCard = function (_a) {
7
- var clientName = _a.clientName, title = _a.title, nextAppointment = _a.nextAppointment, categories = _a.categories, variant = _a.variant, _b = _a.categoryLabelLimit, categoryLabelLimit = _b === void 0 ? 20 : _b, _c = _a.isDisabled, isDisabled = _c === void 0 ? false : _c, _d = _a.dateStyle, dateStyle = _d === void 0 ? "hybride" : _d, dateLabel = _a.dateLabel, _e = _a.barColor, barColor = _e === void 0 ? "blue" : _e;
7
+ var clientName = _a.clientName, title = _a.title, nextAppointment = _a.nextAppointment, categories = _a.categories, variant = _a.variant, _b = _a.categoryLabelLimit, categoryLabelLimit = _b === void 0 ? 20 : _b, _c = _a.isDisabled, isDisabled = _c === void 0 ? false : _c, _d = _a.dateStyle, dateStyle = _d === void 0 ? "hybride" : _d, dateLabel = _a.dateLabel, _e = _a.barColor, barColor = _e === void 0 ? "blue" : _e, _f = _a.showYear, showYear = _f === void 0 ? true : _f;
8
8
  return (React.createElement("div", { className: "case-card-wrapper case-card-".concat(variant) },
9
9
  React.createElement("div", { className: "case-card-content" },
10
10
  React.createElement("div", { className: "case-card-header" },
@@ -14,6 +14,6 @@ var CaseCard = function (_a) {
14
14
  React.createElement(ProgressBar, { startIcon: false, endIcon: false, steps: 100, currentStep: 50, barColor: barColor })),
15
15
  React.createElement("div", { className: "case-card-categories" }, categories.map(function (category, index) { return (React.createElement(OtherStatusTag, { key: index, label: category, type: "readonly", labelLimit: categoryLabelLimit })); }))),
16
16
  nextAppointment && variant !== "archived" && (React.createElement("div", { className: "case-card-next-appointment" },
17
- React.createElement(CardDate, { date: nextAppointment.date, showYear: variant === "desktop", variant: dateStyle, label: dateLabel, isDisabled: isDisabled })))));
17
+ React.createElement(CardDate, { date: nextAppointment.date, showYear: showYear, variant: dateStyle, label: dateLabel, isDisabled: isDisabled })))));
18
18
  };
19
19
  export default CaseCard;
@@ -7,5 +7,5 @@ export type CaseLinkCardProps = {
7
7
  isLoading?: boolean;
8
8
  onCaseCardClick?: () => any;
9
9
  };
10
- declare function CaseLinkCard({ proName, caseName, createdDate, onCaseCardClick, isLoading }: CaseLinkCardProps): React.JSX.Element;
10
+ declare function CaseLinkCard({ proName, caseName, createdDate, onCaseCardClick, isLoading, }: CaseLinkCardProps): React.JSX.Element;
11
11
  export default CaseLinkCard;
@@ -14,7 +14,7 @@ function CaseLinkCard(_a) {
14
14
  var formatProName = function (name) {
15
15
  return "Ma\u00EEtre ".concat(name).toUpperCase();
16
16
  };
17
- return !isLoading ? React.createElement("div", { className: "case-card-link", onClick: function () { return onCaseCardClick && onCaseCardClick(); }, style: { cursor: onCaseCardClick ? "pointer" : "default" } },
17
+ return !isLoading ? (React.createElement("div", { className: "case-card-link", onClick: function () { return onCaseCardClick && onCaseCardClick(); }, style: { cursor: onCaseCardClick ? "pointer" : "default" } },
18
18
  React.createElement("div", { className: "case-card-link-folder-icon" },
19
19
  React.createElement("i", { className: "allaw-icon-folder", style: { fontSize: "20px" } })),
20
20
  React.createElement("div", { className: "case-card-link-right" },
@@ -25,6 +25,6 @@ function CaseLinkCard(_a) {
25
25
  React.createElement("div", { className: "case-card-link-info-col" },
26
26
  React.createElement(Paragraph, { variant: "bold", size: "default", text: caseName, maxLines: 1 }),
27
27
  React.createElement(SmallTitle, { variant: "medium12", color: "mid-grey", text: formatProName(proName) })),
28
- React.createElement("i", { className: "allaw-icon-arrow-right" })))) : React.createElement(LoadingBox, { boxHeigth: "100px", boxRadius: "8px", boxWidth: "100%" });
28
+ React.createElement("i", { className: "allaw-icon-arrow-right" }))))) : (React.createElement(LoadingBox, { boxHeight: "100px", boxRadius: "8px", boxWidth: "100%" }));
29
29
  }
30
30
  export default CaseLinkCard;
@@ -9,5 +9,5 @@ export type ClientLinkCardProps = {
9
9
  company?: string;
10
10
  onClientCardClick?: () => any;
11
11
  };
12
- declare function ClientLinkCard({ clientFirstName, isLoading, clientName, clientMail, company, onClientCardClick }: ClientLinkCardProps): React.JSX.Element;
12
+ declare function ClientLinkCard({ clientFirstName, isLoading, clientName, clientMail, company, onClientCardClick, }: ClientLinkCardProps): React.JSX.Element;
13
13
  export default ClientLinkCard;
@@ -5,12 +5,12 @@ import "../../../styles/icons.css";
5
5
  import LoadingBox from "../loadingBox/LoadingBox";
6
6
  function ClientLinkCard(_a) {
7
7
  var clientFirstName = _a.clientFirstName, isLoading = _a.isLoading, clientName = _a.clientName, clientMail = _a.clientMail, company = _a.company, onClientCardClick = _a.onClientCardClick;
8
- return !isLoading ? React.createElement("div", { className: "client-link-card", style: { cursor: onClientCardClick ? "pointer" : "default" }, onClick: function () { return onClientCardClick && onClientCardClick(); } },
8
+ return !isLoading ? (React.createElement("div", { className: "client-link-card", style: { cursor: onClientCardClick ? "pointer" : "default" }, onClick: function () { return onClientCardClick && onClientCardClick(); } },
9
9
  React.createElement("div", { className: "client-link-card-left" },
10
10
  React.createElement(Paragraph, { variant: "semiBold", text: "".concat(clientFirstName, " ").concat(clientName === null || clientName === void 0 ? void 0 : clientName.toUpperCase()), size: "default", maxLines: 1, color: "noir" }),
11
11
  React.createElement(SmallTitle, { variant: "medium12", color: "mid-grey", text: clientMail === null || clientMail === void 0 ? void 0 : clientMail.toLowerCase() })),
12
12
  React.createElement("div", { className: "client-link-card-right" },
13
- company && React.createElement("span", { className: "client-link-card-office-tag" }, company),
14
- React.createElement("i", { className: "allaw-icon-arrow-right" }))) : React.createElement(LoadingBox, { boxHeigth: "91px", boxRadius: "16px", boxWidth: "100%" });
13
+ company && (React.createElement("span", { className: "client-link-card-office-tag" }, company)),
14
+ React.createElement("i", { className: "allaw-icon-arrow-right" })))) : (React.createElement(LoadingBox, { boxHeight: "91px", boxRadius: "16px", boxWidth: "100%" }));
15
15
  }
16
16
  export default ClientLinkCard;
@@ -1,13 +1,12 @@
1
1
  .loading-box {
2
- animation: skeleton-loading 1s linear infinite alternate;
2
+ animation: skeleton-loading 1s linear infinite alternate;
3
3
  }
4
4
 
5
5
  @keyframes skeleton-loading {
6
- 0% {
7
- background-color: hsl(200, 20%, 80%);
8
- }
9
- 100% {
10
- background-color: hsl(200, 20%, 95%);
11
- }
6
+ 0% {
7
+ background-color: hsl(200, 20%, 80%);
12
8
  }
13
-
9
+ 100% {
10
+ background-color: hsl(200, 20%, 95%);
11
+ }
12
+ }
@@ -1,9 +1,12 @@
1
1
  import React from "react";
2
2
  import "./LoadingBox.css";
3
- export type LoadingBoxProps = {
4
- boxHeigth: string;
5
- boxWidth: string;
6
- boxRadius: string;
7
- };
8
- declare function LoadingBox({ boxHeigth, boxWidth, boxRadius }: LoadingBoxProps): React.JSX.Element;
3
+ export interface LoadingBoxProps {
4
+ boxHeight?: string;
5
+ boxWidth?: string;
6
+ boxRadius?: string;
7
+ height?: string;
8
+ width?: string;
9
+ borderRadius?: string;
10
+ }
11
+ declare const LoadingBox: React.FC<LoadingBoxProps>;
9
12
  export default LoadingBox;
@@ -1,7 +1,11 @@
1
1
  import React from "react";
2
2
  import "./LoadingBox.css";
3
- function LoadingBox(_a) {
4
- var boxHeigth = _a.boxHeigth, boxWidth = _a.boxWidth, boxRadius = _a.boxRadius;
5
- return React.createElement("div", { className: "loading-box", style: { minHeight: boxHeigth, minWidth: boxWidth, borderRadius: boxRadius } });
6
- }
3
+ var LoadingBox = function (_a) {
4
+ var boxHeight = _a.boxHeight, boxWidth = _a.boxWidth, boxRadius = _a.boxRadius, _b = _a.height, height = _b === void 0 ? "100px" : _b, _c = _a.width, width = _c === void 0 ? "100px" : _c, _d = _a.borderRadius, borderRadius = _d === void 0 ? "8px" : _d;
5
+ return (React.createElement("div", { className: "loading-box", style: {
6
+ height: boxHeight || height,
7
+ width: boxWidth || width,
8
+ borderRadius: boxRadius || borderRadius,
9
+ } }));
10
+ };
7
11
  export default LoadingBox;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "allaw-ui",
3
- "version": "1.0.12",
3
+ "version": "1.0.16",
4
4
  "description": "Composants UI pour l'application Allaw",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.esm.js",