Skip to content

Commit

Permalink
feat(look&feel): refonte modal (#781)
Browse files Browse the repository at this point in the history
* feat(look&feel): refonte modal

* feat(look&feel): refactor modal
  • Loading branch information
samuel-gomez-axa authored Jan 22, 2025
1 parent 776b15a commit 9fa36dc
Show file tree
Hide file tree
Showing 29 changed files with 931 additions and 616 deletions.
22 changes: 15 additions & 7 deletions client/look-and-feel/css/src/Button/render.ts
Original file line number Diff line number Diff line change
@@ -1,22 +1,30 @@
import type { Args } from "@storybook/html";

export const render = (args: Args) => {
const { label, variant, iconLeft, iconRight, disabled, ...restAttributes } =
args;
const btn = document.createElement("button");
btn.innerHTML = args.label;
if (args.iconLeft) {
btn.innerHTML = `${args.iconLeft}${btn.innerHTML}`;
btn.innerHTML = label;
if (iconLeft) {
btn.innerHTML = `${iconLeft}${btn.innerHTML}`;
}
if (args.iconRight) {
if (iconRight) {
btn.innerHTML = `${btn.innerHTML}${args.iconRight}`;
}

btn.className = [
"af-btn-client",
args.variant ? `af-btn-client--${args.variant}` : "",
variant ? `af-btn-client--${variant}` : "",
].join(" ");

if (args.disabled) {
btn.setAttribute("disabled", args.disabled);
if (disabled) {
btn.setAttribute("disabled", disabled);
}

for (const attr in restAttributes) {
if (restAttributes[attr]) {
btn.setAttribute(attr, restAttributes[attr]);
}
}

return btn;
Expand Down
151 changes: 62 additions & 89 deletions client/look-and-feel/css/src/Modal/Modal.scss
Original file line number Diff line number Diff line change
@@ -1,128 +1,101 @@
@use "../common/common" as common;
@use "../common/common.scss" as common;

.af-modal {
position: fixed;
width: 100%;
margin: 0 auto;
padding: 0 0 1.5rem;
--spacing-modal: calc(16 / var(--font-size-base) * 1rem);
--font-size-heading: calc(20 / var(--font-size-base) * 1rem);
--font-size-subtitle: calc(16 / var(--font-size-base) * 1rem);
--line-height-heading: calc(25 / var(--font-size-base) * 1rem);
--line-height-subtitle: calc(20 / var(--font-size-base) * 1rem);

padding: var(--spacing-modal) 0;
border: none;
border-radius: 0.5rem;
background-color: var(--color-white);
border-radius: var(--radius-8);

&::backdrop {
opacity: 0.4;
background: var(--color-gray-900);
}

&__top {
position: sticky;
z-index: 5;
top: 0;
display: flex;
padding: 1.5rem;
&__header {
display: grid;
padding-bottom: var(--spacing-modal);
padding-inline: var(--spacing-modal);
border-bottom: 1px solid var(--color-gray-400);
align-items: center;
gap: 1rem;
background-color: var(--color-white);

&-title {
display: flex;
width: 100%;
margin: 0;
grid-template-areas: "headertitle closebtn";
grid-template-columns: 1fr auto;
gap: var(--spacing-modal);

> .af-btn-client {
width: fit-content;
height: fit-content;
grid-area: closebtn;
align-items: start;
justify-content: space-between;
color: var(--color-gray-900);
justify-self: end;
}

&-text {
&-title {
display: grid;
grid-area: headertitle;
grid-template-areas:
"icon title"
"icon subtitle";
justify-self: start;
gap: 0 1rem;

&-heading {
margin: 0;
grid-area: title;
font-family: var(--font-family-publico);
font-size: 1.5rem;
line-height: 1.875rem;
font-size: var(--font-size-heading);
line-height: var(--line-height-heading);
color: var(--color-gray-900);
}

&-subtitle {
font-family: var(--font-family-sans-serif);
font-size: 1.125rem;
font-weight: 400;
line-height: 1.406rem;
grid-area: subtitle;
font-size: var(--font-size-subtitle);
line-height: var(--line-height-subtitle);
color: var(--color-gray-700);
}

&-close-btn {
all: unset;
display: flex;
width: 2rem;
height: 2rem;
align-items: center;
justify-content: center;
cursor: pointer;
svg {
grid-area: icon;
fill: var(--color-axa);
}

:hover {
background: none;
}

:focus {
border: none;
background: none;
}
}
}

&__content {
z-index: 0;
display: flex;
margin-top: 2.5rem;
padding: 0 1.5rem;
flex-direction: column;
gap: 2.5rem;
font-family: var(--font-family-base);
font-size: 1.125rem;
font-weight: 400;
&__body {
padding: var(--spacing-modal);
}

&__actions {
&__footer {
display: flex;
padding-top: 0;
flex-direction: column-reverse;
align-items: flex-end;
padding: var(--spacing-modal) var(--spacing-modal) 0 var(--spacing-modal);
justify-content: flex-end;
gap: 1rem;
gap: var(--spacing-modal);

// force fullwidth in mobile
& * {
width: 100%;
.af-btn-client {
flex-grow: 1;
}

&--fullWidth {
& * {
width: 100%;
flex-grow: 1;
}
}
}
}

@media only screen and (width >= #{common.$screen-size-m}) {
.af-modal {
min-width: 48rem;
max-width: 72rem;
margin: auto;
@media (width > #{common.$breakpoint-sm}) {
--spacing-modal: calc(24 / var(--font-size-base) * 1rem);
--font-size-heading: calc(24 / var(--font-size-base) * 1rem);
--font-size-subtitle: calc(18 / var(--font-size-base) * 1rem);
--line-height-heading: calc(30 / var(--font-size-base) * 1rem);
--line-height-subtitle: calc(22.5 / var(--font-size-base) * 1rem);

&__actions {
flex-direction: row-reverse;
justify-content: flex-start;
max-width: revert;

& * {
width: auto;
flex-grow: unset;
}
&__footer {
.af-btn-client {
min-width: 180px;
flex-grow: inherit;

&--fullWidth {
& * {
width: 100%;
flex-grow: 1;
&:last-child {
width: 250px;
}
}
}
Expand Down
80 changes: 7 additions & 73 deletions client/look-and-feel/css/src/Modal/Modal.stories.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
import type { Meta, StoryObj } from "@storybook/html";
import "../look-and-feel.scss";
import "./Modal.scss";
import { render } from "./render";

const meta: Meta = {
title: "Components/Modal",
Expand All @@ -8,82 +10,14 @@ const meta: Meta = {
export default meta;

export const Default: StoryObj = {
render: (args) => {
const container = document.createElement("dialog");
container.className = "af-modal";
container.innerHTML = `
<div class="af-modal__top">
${args.iconTitle ? args.iconTitle : ""}
<h2 class="af-modal__top-title">
<div class="af-modal__top-title-text">${args.title}</div>
${
args.hasCloseBtn
? `<button
class="af-modal__top-title-close-btn"
type="button"
aria-label="close"
>
<svg
class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-10gnm35-MuiSvgIcon-root"
focusable="false"
aria-hidden="true"
viewBox="0 0 24 24"
data-testid="CloseIcon"
>
<path
d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
></path>
</svg>
</button>`
: ""
}
</h2>
</div>
<div class="af-modal__content">
Vestibulum nunc neque, sodales non luctus in, dictum vitae nisl. Curabitur
vitae massa non nisl lacinia tempus. Pellentesque id nulla tortor.
</div>
<div class="af-modal__actions ${
args.fullWidthButtons ? "af-modal__actions--fullWidth" : ""
}">
${
args.actions?.primary
? `<button class="af-btn-client af-btn-client--primary" type="button">
${args.actions?.primary.text}</button>`
: ""
}
${
args.actions?.secondary
? `<button class="af-btn-client af-btn-client--secondary" type="button">
${args.actions?.secondary.text}</button>`
: ""
}
${
args.actions?.tertiary
? `<button class="af-btn-client af-btn-client--tertiary" type="button">
${args.actions?.tertiary.text}</button>`
: ""
}
</div>
`;
if (args.isOpen) {
container.setAttribute("open", "");
} else {
container.removeAttribute("open");
}
return container;
},
render,
args: {
isOpen: true,
hasCloseBtn: true,
open: true,
onClose: () => true,
title: "Modal title",
iconTitle: null,
fullWidthButtons: false,
actions: {
primary: { text: "Save", callback: () => true },
secondary: { text: "Cancel", callback: () => true },
tertiary: { text: "Reset", callback: () => true },
},
subtitle: "Modal subtitle",
cancelTitle: "Cancel",
submitTitle: "Submit",
},
};
Loading

0 comments on commit 9fa36dc

Please sign in to comment.