Identité

Ce composant présente un avatar accompagné d'un texte principal (généralement prénom et nom) et d'un texte secondaire (description, rôle, etc.)

Christopher MACHICOANE-HURTAUD

Lorem ipsum dolor sit amet, consectetur adipisicing elit. At aut dignissimos eaque explicabo hic neque nesciunt quod saepe soluta veniam.

<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" trimDirectiveWhitespaces="true" %>
<%@ taglib prefix="kuik" uri="kuik" %>

<kuik:identity link="/" title="Christopher MACHICOANE-HURTAUD" content="Lorem ipsum dolor sit amet, consectetur adipisicing elit. At aut dignissimos eaque explicabo hic neque nesciunt quod saepe soluta veniam." />

Name	Type	Required	Description
link	java.lang.String	false	URL du lien au clic sur le composant
avatar	java.lang.String	false	URL de l'image de l'avatar
title	java.lang.String	true	Texte principal (nom, prénom…)
content	java.lang.String	false	Texte secondaire (description, rôle…)
size	java.lang.String	false	Taille du composant
status	java.lang.String	false	Statut du composant

.identity {
  --identity-avatar-width: var(--size-8);
  --identity-avatar-fill: var(--color2-40);
  --identity-avatar-stroke: var(--color2-50);
  --identity-column-gap: var(--space-4);
  --identity-row-gap: var(--space-0);
  --identity-title-font-size: var(--font-size-50);
  --identity-content-font-size: var(--font-size-30);

  column-gap: var(--identity-column-gap);
  display: var(--disp, inline) grid;
  grid-template-areas: "avatar title";
  row-gap: var(--identity-row-gap);
  width: fit-content;

  &:has(.identity__content) {
    grid-template-areas: "avatar title" "avatar content";
  }

  &:link {
    color: inherit;
    text-decoration: none;
  }
}

.identity--lg {
  --identity-avatar-width: var(--size-18);
  --identity-column-gap: var(--space-6);
  --identity-row-gap: var(--space-4);
  --identity-title-font-size: var(--font-size-70);
  --identity-content-font-size: var(--font-size-50);
}

.identity--primary {
  --identity-avatar-fill: var(--color1-40);
  --identity-avatar-stroke: var(--color1-50);
}

.identity--neutral {
  --identity-avatar-fill: var(--neutral-40);
  --identity-avatar-stroke: var(--neutral-50);
}

.identity__avatar {
  align-self: center;
  aspect-ratio: 1;
  background-color: var(--identity-avatar-fill);
  border-radius: var(--radius-infinite);
  color: var(--black);
  color-scheme: only dark;
  grid-area: avatar;
  object-fit: cover;
  object-position: center;
  overflow: hidden;
  width: var(--identity-avatar-width);
}

.identity__avatar--auto {
  border: var(--line-thin) var(--identity-avatar-stroke);
  display: grid;
  padding: var(--space-2);
  place-content: center;
  text-align: center;

  &::after {
    content: attr(data-initials);
    text-transform: uppercase;
  }
}

.identity__title {
  align-self: center;
  font-size: var(--identity-title-font-size);
  font-weight: var(--font-weight-700);
  grid-area: title;
}

.identity__content {
  font-size: var(--identity-content-font-size);
  grid-area: content;
  margin-block: var(--space-0);
}

<%@ tag pageEncoding="UTF-8" trimDirectiveWhitespaces="true" dynamic-attributes="dynattrs" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>

<%@ attribute name="link" required="false" type="java.lang.String" description="URL du lien au clic sur le composant" %>
<%@ attribute name="avatar" required="false" type="java.lang.String" description="URL de l'image de l'avatar" %>
<%@ attribute name="title" required="true" type="java.lang.String" description="Texte principal (nom, prénom…)" %>
<%@ attribute name="content" required="false" type="java.lang.String" description="Texte secondaire (description, rôle…)" %>
<%@ attribute name="size" required="false" type="java.lang.String" description="Taille du composant" %>
<%@ attribute name="status" required="false" type="java.lang.String" description="Statut du composant" %>

<c:set var="tag" value="${not empty pageScope.link ? 'a' : 'span'}" />

<c:if test="${empty size}">
    <c:set var="size" value="md" />
</c:if>

<c:if test="${empty status}">
    <c:set var="status" value="secondary" />
</c:if>

<c:set var="classes" value="identity identity--${size} identity--${status}" />

<c:set var="attributes">
    <c:forEach items="${dynattrs}" var="a">
        <c:choose>
            <c:when test="${a.key == 'class'}">
                <c:set value="${classes} ${a.value}" var="classes" />
            </c:when>
            <c:otherwise>${a.key}="${a.value}" </c:otherwise>
        </c:choose>
    </c:forEach>
    <c:if test="${not empty pageScope.link}">href="${pageScope.link}"</c:if>
</c:set>

<c:if test="${not empty pageScope.title or not empty pageScope.content or not empty pageScope.avatar}">
    <${pageScope.tag} class="${pageScope.classes}" ${pageScope.attributes}>
        <c:choose>
            <c:when test="${not empty pageScope.avatar}">
                <img class="identity__avatar" src="<c:out value="${pageScope.avatar}" />" alt="">
            </c:when>
            <c:otherwise>
                <span class="identity__avatar identity__avatar--auto" data-initials="${fn:substring(title, 0, 1)}"></span>
            </c:otherwise>
        </c:choose>
        <div class="identity__title">
            <c:out value="${pageScope.title}" />
        </div>
        <c:if test="${not empty pageScope.content}">
            <p class="identity__content">
                <c:out value="${pageScope.content}" escapeXml="false" />
            </p>
        </c:if>
    </${pageScope.tag}>
</c:if>