allaw-ui 3.3.7 → 3.3.8

package/dist/components/molecules/entityCard/EntityCard.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+export type EntityCardProps = {
+    entityName: string;
+    numberOfMembers: number;
+    formatedAddress?: string;
+    immat?: string;
+    actionType: "QUIT" | "REQUEST" | "REMOVE_REQUEST" | "NONE";
+    onActionButtonClick?: () => void;
+    onCardClick?: () => void;
+};
+declare function EntityCard({ entityName, numberOfMembers, formatedAddress, immat, actionType, onActionButtonClick, onCardClick }: EntityCardProps): React.JSX.Element;
+export default EntityCard;

package/dist/components/molecules/entityCard/EntityCard.js

@@ -0,0 +1,51 @@
+import React from "react";
+import styles from "./entityCard.module.css";
+var ActionButton = function (_a) {
+    var type = _a.type, action = _a.action;
+    var elements = {
+        "QUIT": {
+            text: "Quitter l'organisation",
+            icon: "allaw-icon-close",
+            color: "#E15151",
+        },
+        "REQUEST": {
+            text: "Demander à rejoindre",
+            icon: "allaw-icon-arrow-right",
+            color: "#25BEEB",
+        },
+        "REMOVE_REQUEST": {
+            text: "Annuler la demande",
+            icon: "allaw-icon-close",
+            color: "#E15151",
+        },
+        "NONE": {
+            text: "",
+            icon: "",
+            color: "",
+        }
+    };
+    return React.createElement("button", { style: { color: elements[type].color }, className: styles.actionButton, onClick: function () { action && action(); } },
+        elements[type].text,
+        React.createElement("i", { className: elements[type].icon }));
+};
+function EntityCard(_a) {
+    var entityName = _a.entityName, numberOfMembers = _a.numberOfMembers, formatedAddress = _a.formatedAddress, immat = _a.immat, actionType = _a.actionType, onActionButtonClick = _a.onActionButtonClick, onCardClick = _a.onCardClick;
+    return React.createElement("div", { className: styles.card, style: { cursor: onCardClick ? "pointer" : "default" }, onClick: function () { return onCardClick && onCardClick(); } },
+        React.createElement("div", { className: styles.picturePlaceHolder },
+            React.createElement("i", { className: "allaw-icon-home" })),
+        React.createElement("div", { className: styles.dataInfo },
+            React.createElement("div", { className: styles.basicsInfo },
+                React.createElement("span", { className: styles.entityName }, entityName),
+                React.createElement("span", { className: styles.numberOfMembers }, formatedAddress)),
+            React.createElement("div", { className: styles.detailsInfo },
+                React.createElement("span", { className: styles.detail },
+                    React.createElement("i", { className: "allaw-icon-users" }),
+                    numberOfMembers,
+                    " membre",
+                    numberOfMembers > 1 ? "s" : ""),
+                React.createElement("span", { className: styles.detail },
+                    React.createElement("i", { className: "allaw-icon-prestation" }),
+                    immat))),
+        actionType != "NONE" && React.createElement(ActionButton, { type: actionType, action: onActionButtonClick && onActionButtonClick() }));
+}
+export default EntityCard;

package/dist/components/molecules/entityCard/EntityCard.stories.d.ts

@@ -0,0 +1,7 @@
+declare namespace _default {
+    export let title: string;
+    export { EntityCard as component };
+}
+export default _default;
+export const Default: any;
+import EntityCard from "./EntityCard";

package/dist/components/molecules/entityCard/EntityCard.stories.js

@@ -0,0 +1,30 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import React from "react";
+import EntityCard from "./EntityCard";
+import { action } from "@storybook/addon-actions";
+export default {
+    title: "Components/Molecules/EntityCard",
+    component: EntityCard,
+};
+var Template = function (args) { return React.createElement(EntityCard, __assign({}, args)); };
+export var Default = Template.bind({});
+Default.args = {
+    pictureLink: "https://via.placeholder.com/100",
+    entityName: "Cabinet Martin & Associés",
+    numberOfMembers: 3,
+    formatedAddress: "12 rue du Droit, 75001 Paris",
+    immat: "RCS Paris 123 456 789",
+    actionType: "REQUEST",
+    onActionButtonClick: action("Action button clicked"),
+    onCardClick: action("Card clicked"),
+};

package/dist/components/molecules/entityCard/entityCard.module.css

@@ -0,0 +1,115 @@
+.card {
+    display: flex;
+    min-height: 92px;
+    padding: 16px;
+    justify-content: start;
+    align-items: center;
+    gap: 1rem;
+    flex-wrap: wrap;
+    align-self: stretch;
+    border-radius: 16px;
+    border: 1.5px solid var(--Primary-Venom-grey, #E6EDF5);
+}
+
+.picturePlaceHolder {
+    display: flex;
+    width: 60px;
+    height: 60px;
+    padding: 8px;
+    justify-content: center;
+    align-items: center;
+    gap: 10px;
+    border-radius: 8px;
+    background: #F5F7FA;
+}
+
+.dataInfo {
+    display: flex;
+    flex-direction: row;
+    gap: 2rem;
+    flex-wrap: wrap;
+}
+
+.basicsInfo {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+    align-items: start;
+}
+
+.entityName {
+    color: #000;
+    leading-trim: both;
+    text-edge: cap;
+    font-family: Poppins;
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 22px; /* 137.5% */
+    max-width: 300px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    }
+
+.numberOfMembers {
+    color: #456073;
+    leading-trim: both;
+    text-edge: cap;
+    font-family: var(--font-open-sans);
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: normal;
+    max-width: 300px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.detailsInfo {
+    display: flex;
+    flex-direction: row;
+    gap: 1rem;
+    align-items: center;
+    flex-wrap: wrap;
+}
+
+.detail {
+    display: flex;
+    padding: 2px 0px;
+    justify-content: center;
+    align-items: center;
+    gap: 8px;
+    color: var(--Primary-Dark-grey, #456073);
+    leading-trim: both;
+    text-edge: cap;
+    text-wrap: nowrap;
+    /* OS - 16px - Paragraphe/OS - SemiBold */
+    font-family: var(--font-open-sans);
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: normal;
+}
+
+.actionButton {
+    margin-left: auto;
+    display: flex;
+    padding: 12px 0px;
+    align-items: baseline;
+    gap: 8px;
+    cursor: pointer;
+
+    font-family: var(--font-open-sans);
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: normal;
+    background: transparent;
+    border: none;
+}
+
+.actionButton > i {
+    font-size: 12px;
+}

package/dist/components/molecules/entityCard/index.d.ts

@@ -0,0 +1,2 @@
+export { default as EntityCard } from "./EntityCard";
+export type { EntityCardProps } from "./EntityCard";

package/dist/components/molecules/entityCard/index.js

@@ -0,0 +1 @@
+export { default as EntityCard } from "./EntityCard";

package/dist/index.d.ts

@@ -81,6 +81,8 @@ export { default as FeatureCard } from "./components/atoms/featureCard/featureCa
 export type { FeatureType } from "./components/atoms/featureCard/featureCard";
 export { default as FeatureGrid } from "./components/molecules/featureGrid/FeatureGrid";
 export type { FeatureGridProps } from "./components/molecules/featureGrid/FeatureGrid";
+export { default as EntityCard } from "./components/molecules/entityCard/EntityCard";
+export type { EntityCardProps } from "./components/molecules/entityCard/EntityCard";
 export { default as HeroSection } from "./components/molecules/heroSection/HeroSection";
 export type { HeroSectionProps } from "./components/molecules/heroSection/HeroSection";
 export { default as FrameCTA } from "./components/molecules/frameCTA/FrameCTA";

package/dist/index.js

@@ -91,6 +91,7 @@ export { default as VerificationCodeInput } from "./components/atoms/inputs/Veri
 export { default as Banner } from "./components/molecules/banner/Banner";
 export { default as FeatureCard } from "./components/atoms/featureCard/featureCard";
 export { default as FeatureGrid } from "./components/molecules/featureGrid/FeatureGrid";
+export { default as EntityCard } from "./components/molecules/entityCard/EntityCard";
 export { default as HeroSection } from "./components/molecules/heroSection/HeroSection";
 export { default as FrameCTA } from "./components/molecules/frameCTA/FrameCTA";
 export { default as QuestionAnswer } from "./components/molecules/questionAnswer/QuestionAnswer";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "allaw-ui",
-  "version": "3.3.7",
+  "version": "3.3.8",
   "description": "Composants UI pour l'application Allaw",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",