allaw-ui 2.9.3 → 2.9.5

package/dist/components/atoms/typography/Heading.js

@@ -2,7 +2,7 @@
 import React, { useEffect, useState } from "react";
 import "./Heading.css";
 var Heading = function (_a) {
-    var variant = _a.variant, _b = _a.color, color = _b === void 0 ? "pure-white" : _b, text = _a.text, _c = _a.align, align = _c === void 0 ? "center" : _c, responsiveSize = _a.responsiveSize, _d = _a.as, Component = _d === void 0 ? "span" : _d;
+    var variant = _a.variant, _b = _a.color, color = _b === void 0 ? "pure-white" : _b, text = _a.text, _c = _a.align, align = _c === void 0 ? "left" : _c, responsiveSize = _a.responsiveSize, _d = _a.as, Component = _d === void 0 ? "span" : _d;
     var _e = useState(variant), currentVariant = _e[0], setCurrentVariant = _e[1];
     useEffect(function () {
         if (!responsiveSize)

package/dist/components/atoms/typography/Heading.stories.d.ts

@@ -75,4 +75,5 @@ export const H6: any;
 export const H7: any;
 export const ResponsiveHeading: any;
 export const CustomElement: any;
+export const CenteredHeading: any;
 import Heading from "./Heading";

package/dist/components/atoms/typography/Heading.stories.js

@@ -61,8 +61,8 @@ export default {
         backgrounds: {
             default: "light",
             values: [
-                { name: "light", value: "#ffffff" },
                 { name: "grey", value: "#728ea7" },
+                { name: "light", value: "#ffffff" },
                 { name: "figma", value: "#404040" },
                 { name: "dark", value: "#171e25" },
             ],
@@ -140,3 +140,11 @@ CustomElement.args = {
     text: "This heading uses a paragraph tag",
     as: "p",
 };
+export var CenteredHeading = Template.bind({});
+CenteredHeading.args = {
+    variant: "h3",
+    color: "bleu-allaw",
+    text: "This heading is centered",
+    align: "center",
+    as: "h3",
+};

package/dist/components/molecules/questionAnswer/QuestionAnswer.d.ts

@@ -4,6 +4,7 @@ export type QuestionAnswerProps = {
         question: string;
         answer: string;
     }[];
+    title?: string;
 };
 declare const QuestionAnswer: React.FC<QuestionAnswerProps>;
 export default QuestionAnswer;

package/dist/components/molecules/questionAnswer/QuestionAnswer.js

@@ -9,9 +9,8 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 };
 import React, { useState } from "react";
 import styles from "./questionAnswer.module.css";
-import IconButton from "../../atoms/buttons/IconButton";
 var QuestionAnswer = function (_a) {
-    var questions = _a.questions;
+    var questions = _a.questions, title = _a.title;
     var _b = useState([]), openIndices = _b[0], setOpenIndices = _b[1];
     var toggleAnswer = function (index) {
         if (openIndices.includes(index)) {
@@ -23,15 +22,11 @@ var QuestionAnswer = function (_a) {
     };
     return (React.createElement("section", { className: styles.questionAnswerContainer, "aria-labelledby": "faq-title" },
         React.createElement("div", { className: styles.questionAnswerContent },
-            React.createElement("h2", { className: styles.questionAnswerTitle }, "Questions Fr\u00E9quemment Pos\u00E9es"),
+            React.createElement("h2", { className: styles.questionAnswerTitle }, title ? title : "Questions Fréquemment Posées"),
             React.createElement("ul", { className: styles.questionAnswerListContent }, questions.map(function (item, index) { return (React.createElement("li", { key: index, className: styles.questionAnswerItem, onClick: function () { return toggleAnswer(index); } },
                 React.createElement("div", { className: styles.questionContainer },
                     React.createElement("h3", { className: styles.questionTitle }, item.question),
-                    React.createElement(IconButton, { color: "#050505", style: "iconOnly", iconName: openIndices.includes(index)
-                            ? "allaw-icon-chevron-up"
-                            : "allaw-icon-chevron-down", "aria-label": openIndices.includes(index)
-                            ? "Fermer la r\u00E9ponse \u00E0 : ".concat(item.question)
-                            : "Ouvrir la r\u00E9ponse \u00E0 : ".concat(item.question) })),
+                    React.createElement("i", { className: !openIndices.includes(index) ? "allaw-icon-chevron-down" : "allaw-icon-chevron-up", style: { color: "#171E25" } })),
                 React.createElement("div", { id: "answer-".concat(index), className: "".concat(styles.answerContainer, " ").concat(openIndices.includes(index) ? styles.open : "") },
                     React.createElement("p", { className: styles.answer }, item.answer)))); })))));
 };

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

@@ -2,7 +2,6 @@
   width: 100%;
   height: auto;
   display: flex;
-  padding: 64px 0;
   flex-direction: column;
   justify-content: center;
   align-items: center;
@@ -16,14 +15,14 @@
   height: auto;
   flex-direction: column;
   align-items: center;
-  gap: 124px;
+  gap: 56px;
 }
 
 .questionAnswerTitle {
   color: var(--Primary-Mid-black, #171e25);
-  text-align: center;
+  text-align: left;
   font-family: Poppins;
-  font-size: 30px;
+  font-size: 26px;
   font-style: normal;
   font-weight: 600;
   line-height: normal;
@@ -51,7 +50,7 @@
 
 .questionContainer {
   display: flex;
-  align-items: flex-start;
+  align-items: center;
   gap: 32px;
   align-self: stretch;
   justify-content: space-between;
@@ -59,9 +58,9 @@
 }
 
 .questionTitle {
-  color: var(--Primary-Mid-black, #171e25);
-  font-family: Poppins;
-  font-size: 20px;
+  color: #171E25;
+  font-family: "Open Sans";
+  font-size: 18px;
   font-style: normal;
   font-weight: 600;
   line-height: normal;
@@ -81,46 +80,22 @@
 }
 
 .answer {
-  color: var(--Primary-Dark-grey, #456073);
+  color: #456073;
   font-family: "Open Sans";
-  font-size: 20px;
+  font-size: 16px;
   font-weight: 400;
   line-height: normal;
+  text-align: justify;
 }
 
-@media (max-width: 995px) {
-  .questionAnswerContainer {
-    padding: 26px 80px;
-  }
-
-  .questionAnswerContent {
-    gap: 70px;
-  }
-
-  .questionAnswerTitle {
-    font-size: 26px;
-  }
-
+@media (max-width: 800px) {
   .answer {
-    font-size: 18px;
+    text-align: justify;
   }
-}
-
-@media (max-width: 450px) {
-  .questionAnswerContainer {
-    padding: 12px 40px;
-    gap: 20px;
+  .questionAnswerTitle {
+    font-size: 20px;
   }
-
   .questionAnswerContent {
-    gap: 60px;
-  }
-
-  .questionTitle {
-    font-size: 18px;
-  }
-
-  .answer {
-    font-size: 16px;
+    gap: 42px;
   }
 }

package/package.json

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