Section Item Detail

Ready

Notes
HTML
View
Info

Use the .sds-sectionItem__aboveClickArea class on items in columns that need to be interacted with. This lets them "float" over the js-sectionItem__toggle trigger element that covers the entirety of the section item.


        
        
            <!-- Default -->
<div class="sds-box sds-sectionItem__detail">
    <div class="sds-sectionItem__detailInner">
        <div class="sds-sectionItem__innerCol -date">
            <div class="sds-sectionItem__textMeta sds-textHelper">
                18/03/2022
            </div>
        </div>
        <div class="sds-sectionItem__innerCol -dot">
            <div class="sds-sectionItem__dotWrapper">
                <span class="sds-iconCircle -product -shopping" aria-hidden="true">

                    <span class="sds-icon sds-icon-shoppingbag"></span>

                </span>

            </div>
        </div>
        <div class="sds-sectionItem__innerCol -justifyEnd -grow">
            <div class="sds-btnGroup sds-sectionItem__aboveClickArea">
                <button type="button" class="sds-btn -iconBtn -btnSecondary" data-toggle="tooltip" data-placement="top" data-title="Exclure de l’analyse">

                    <span class="sds-icon sds-icon-hidden"></span>

                </button>
            </div>
        </div>
        <button class="sds-sectionItem__toggle js-sectionItem__detailToggle" type="button">
            <span class="sr-only">Close detail</span>
        </button>
    </div>
    <div class="sds-sectionItem__detailContent">
        <div class="h3">Domiciliation relevé Post Telecom Test 1</div>

        <table class="sds-infoTable table">
            <tbody>

                <tr>
                    <td class="">
                        <div class="sds-infoTable__cellContent">

                            <div class="sds-label">
                                Montant de la transaction

                            </div>

                        </div>
                    </td>
                    <td class="">
                        <div class="sds-infoTable__cellContent">

                            <div class="sds-amount -negative -amountXl">
                                <span class="sds-amount__value">-165</span>

                                <span class="sds-amount__currency">€</span>

                            </div>

                        </div>
                    </td>
                </tr>

                <tr>
                    <td class="">
                        <div class="sds-infoTable__cellContent">

                            <div class="sds-label">
                                Date de la transaction

                            </div>

                        </div>
                    </td>
                    <td class="">
                        <div class="sds-infoTable__cellContent">

                            <div>
                                30.09.2021
                            </div>

                        </div>
                    </td>
                </tr>

                <tr>
                    <td class="">
                        <div class="sds-infoTable__cellContent">

                            <div class="sds-label">
                                Montant

                            </div>

                        </div>
                    </td>
                    <td class="">
                        <div class="sds-infoTable__cellContent">

                            <div class="sds-amount -negative">
                                <span class="sds-amount__value">-165</span>

                                <span class="sds-amount__currency">€</span>

                            </div>

                        </div>
                    </td>
                </tr>

                <tr>
                    <td class="">
                        <div class="sds-infoTable__cellContent">

                            <div class="sds-label">
                                Pays

                            </div>

                        </div>
                    </td>
                    <td class="">
                        <div class="sds-infoTable__cellContent">

                            <div>
                                Luxembourg
                            </div>

                        </div>
                    </td>
                </tr>

            </tbody>
        </table>

    </div>
</div>


        
            <!-- Mouvements Compte -->
<div class="sds-box sds-sectionItem__detail">
    <div class="sds-sectionItem__detailInner">
        <div class="sds-sectionItem__innerCol -date">
            <div class="sds-sectionItem__textMeta sds-textHelper">
                {DD/MM/YYYY}
            </div>
        </div>
        <div class="sds-sectionItem__innerCol -dot">
            <div class="sds-sectionItem__dotWrapper">

                <span class="sds-iconCircle -product -shopping" aria-hidden="true">

                    <span class="sds-icon sds-icon-shoppingbag"></span>

                </span>

            </div>
        </div>

        <div class="sds-sectionItem__innerCol -justifyEnd -grow">
            <div class="sds-btnGroup sds-sectionItem__aboveClickArea">
                <a href="" class="sds-btn -btnSecondary">

                    <span class="sds-icon sds-icon-document"></span>

                    <span class="sds-btn__text">Avis de débit</span>

                </a>
                <button type="button" class="sds-btn -iconBtn -btnSecondary" data-toggle="tooltip" data-placement="top" data-title="Exclure de l’analyse">

                    <span class="sds-icon sds-icon-hidden"></span>

                </button>
                <button type="button" class="sds-btn -iconBtn -btnSecondary" data-toggle="tooltip" data-placement="top" data-title="Signer">

                    <span class="sds-icon sds-icon-compose"></span>

                </button>
            </div>
        </div>

        <button class="sds-sectionItem__toggle js-sectionItem__detailToggle" type="button">
            <span class="sr-only">Close detail</span>
        </button>
    </div>
    <div class="sds-sectionItem__detailContent">

        <div class="h3">Domiciliation relevé Post Telecom Test 1</div>

        <table class="sds-infoTable table">
            <tbody>

                <tr>
                    <td class="">
                        <div class="sds-infoTable__cellContent">

                            <div class="sds-label">
                                Montant de la transaction

                            </div>

                        </div>
                    </td>
                    <td class="">
                        <div class="sds-infoTable__cellContent">

                            <div class="sds-amount -negative -amountXl">
                                <span class="sds-amount__value">-165</span>

                                <span class="sds-amount__currency">€</span>

                            </div>

                        </div>
                    </td>
                </tr>

                <tr>
                    <td class="">
                        <div class="sds-infoTable__cellContent">

                            <div class="sds-label">
                                Date de la transaction

                            </div>

                        </div>
                    </td>
                    <td class="">
                        <div class="sds-infoTable__cellContent">

                            <div>
                                30.09.2021
                            </div>

                        </div>
                    </td>
                </tr>

                <tr>
                    <td class="">
                        <div class="sds-infoTable__cellContent">

                            <div class="sds-label">
                                Montant

                            </div>

                        </div>
                    </td>
                    <td class="">
                        <div class="sds-infoTable__cellContent">

                            <div class="sds-amount -negative">
                                <span class="sds-amount__value">-165</span>

                                <span class="sds-amount__currency">€</span>

                            </div>

                        </div>
                    </td>
                </tr>

                <tr>
                    <td class="">
                        <div class="sds-infoTable__cellContent">

                            <div class="sds-label">
                                Pays

                            </div>

                        </div>
                    </td>
                    <td class="">
                        <div class="sds-infoTable__cellContent">

                            <div>
                                Luxembourg
                            </div>

                        </div>
                    </td>
                </tr>

            </tbody>
        </table>

        <div class="sds-box -insetMd -boxSunken sds-staticStackMd sds-outOfBoundsMd">
            <div class="sds-btnGroup d-flex justify-content-end">
                <a href="" class="sds-btn -btnSecondary -btnInverse">

                    <span class="sds-icon sds-icon-edit"></span>

                    <span class="sds-btn__text">Modifier</span>

                </a>
                <button type="button" class="sds-btn -iconBtn -btnSecondary -btnInverse" data-toggle="tooltip" data-placement="top" data-title="Supprimer">

                    <span class="sds-icon sds-icon-trash"></span>

                </button>
            </div>
            <div class="h4 d-flex align-items-center">
                <span>Espace fiscal</span>
                <button type="button" class="sds-infoDot" data-trigger="focus" data-container="body" data-placement="left" data-toggle="popover" title="Popover title" data-content="Le détail de la / des transactions (bénéficiaire et communication) sera masqué dans les mouvements des transactions (sur S-Net Pro et dans les extraits de compte)">
                    <span class="sds-icon sds-icon-infocirclefill"></span>
                    <span class="sr-only">Show more info</span>
                </button>
            </div>
            <div class="sds-staticExceptionStackLg">

                <table class="sds-infoTable table">
                    <tbody>

                        <tr>
                            <td class="">
                                <div class="sds-infoTable__cellContent">

                                    <div class="sds-label">
                                        Catégorie fiscale

                                    </div>

                                </div>
                            </td>
                            <td class="">
                                <div class="sds-infoTable__cellContent">

                                    <div>
                                        DS - Dépenses Spéciales
                                    </div>

                                </div>
                            </td>
                        </tr>

                        <tr>
                            <td class="">
                                <div class="sds-infoTable__cellContent">

                                    <div class="sds-label">
                                        Année fiscale

                                    </div>

                                </div>
                            </td>
                            <td class="">
                                <div class="sds-infoTable__cellContent">

                                    <div>
                                        2022
                                    </div>

                                </div>
                            </td>
                        </tr>

                    </tbody>
                </table>

            </div>
        </div>

    </div>
</div>


        
            <!-- Mouvements Compte Externe -->
<div class="sds-box sds-sectionItem__detail">
    <div class="sds-sectionItem__detailInner">
        <div class="sds-sectionItem__innerCol -date">
            <div class="sds-sectionItem__textMeta sds-textHelper">
                {DD.MM.YYYY}
            </div>
        </div>
        <div class="sds-sectionItem__innerCol -dot">
            <div class="sds-sectionItem__dotWrapper">

                <span class="sds-iconCircle -product -shopping" aria-hidden="true">

                    <span class="sds-icon sds-icon-shoppingbag"></span>

                </span>

            </div>
        </div>

        <div class="sds-sectionItem__innerCol -justifyEnd -grow">
            <div class="sds-btnGroup sds-sectionItem__aboveClickArea">
                <button type="button" class="sds-btn -iconBtn -btnSecondary" data-toggle="tooltip" data-placement="top" data-title="Imprimer">

                    <span class="sds-icon sds-icon-printer"></span>

                </button>
                <button type="button" class="sds-btn -iconBtn -btnSecondary" data-toggle="tooltip" data-placement="top" data-title="Exclure de l’analyse">

                    <span class="sds-icon sds-icon-hidden"></span>

                </button>
                <button type="button" class="sds-btn -iconBtn -btnSecondary" data-toggle="tooltip" data-placement="top" data-title="Signer">

                    <span class="sds-icon sds-icon-compose"></span>

                </button>
            </div>
        </div>

        <button class="sds-sectionItem__toggle js-sectionItem__detailToggle" type="button">
            <span class="sr-only">Close detail</span>
        </button>
    </div>
    <div class="sds-sectionItem__detailContent">

        <div class="h3">Domiciliation relevé Post Telecom Test 1</div>

        <table class="sds-infoTable table">
            <tbody>

                <tr>
                    <td class="">
                        <div class="sds-infoTable__cellContent">

                            <div class="sds-label">
                                {Label}

                            </div>

                        </div>
                    </td>
                    <td class="">
                        <div class="sds-infoTable__cellContent">

                            <div class="sds-amount -negative -amountXl">
                                <span class="sds-amount__value">{- #.###,##}</span>

                                <span class="sds-amount__currency">€</span>

                            </div>

                        </div>
                    </td>
                </tr>

                <tr>
                    <td class="">
                        <div class="sds-infoTable__cellContent">

                            <div class="sds-label">
                                {Label}

                            </div>

                        </div>
                    </td>
                    <td class="">
                        <div class="sds-infoTable__cellContent">

                            <div>
                                {item}
                            </div>

                        </div>
                    </td>
                </tr>

                <tr>
                    <td class="">
                        <div class="sds-infoTable__cellContent">

                            <div class="sds-label">
                                {Label}

                            </div>

                        </div>
                    </td>
                    <td class="">
                        <div class="sds-infoTable__cellContent">

                            <div>
                                {item}
                            </div>

                        </div>
                    </td>
                </tr>

            </tbody>
        </table>

    </div>
</div>


        <!-- Default -->
<div class="{{ namespace }}box {{ namespace }}sectionItem__detail">
	<div class="{{ namespace }}sectionItem__detailInner">
		<div class="{{ namespace }}sectionItem__innerCol -date">
			<div class="{{ namespace }}sectionItem__textMeta {{ namespace }}textHelper">
				18/03/2022
			</div>
		</div>
		<div class="{{ namespace }}sectionItem__innerCol -dot">
			<div class="{{ namespace }}sectionItem__dotWrapper">
				{% render "@icon-circle-mia"+product %}
			</div>
		</div>
		<div class="{{ namespace }}sectionItem__innerCol -justifyEnd -grow">
			<div class="{{ namespace }}btnGroup {{ namespace }}sectionItem__aboveClickArea">
				{% render "@icon-btn-secondary",{
					icon: "icon-hidden",
					attrs: {
						"data-toggle": "tooltip",
						"data-placement": "top",
						"data-title": "Exclure de l’analyse"
					}
				},true %}
			</div>
		</div>
		<button class="{{ namespace }}sectionItem__toggle js-sectionItem__detailToggle" type="button" {% for attrKey, attr in detailToggleOptions %} {{ attrKey }}="{{ attr }}"{% endfor %}>
			<span class="sr-only">Close detail</span>
		</button>
	</div>
	<div class="{{ namespace }}sectionItem__detailContent">
		<div class="h3">{{ communication }}</div>
		{% render "@snet-info-table",infotableOptions,true %}
	</div>
</div>

<!-- Mouvements Compte -->
<div class="{{ namespace }}box {{ namespace }}sectionItem__detail">
	<div class="{{ namespace }}sectionItem__detailInner">
		<div class="{{ namespace }}sectionItem__innerCol -date">
			<div class="{{ namespace }}sectionItem__textMeta {{ namespace }}textHelper">
				{DD/MM/YYYY}
			</div>
		</div>
		<div class="{{ namespace }}sectionItem__innerCol -dot">
			<div class="{{ namespace }}sectionItem__dotWrapper">
				{% if noCategory %}
					{% render "@circle--default" %}
				{% else %}
					{% render "@icon-circle-mia"+product %}
				{% endif %}
			</div>
		</div>
		{% if noActions %}
		{% else %}
		<div class="{{ namespace }}sectionItem__innerCol -justifyEnd -grow">
			<div class="{{ namespace }}btnGroup {{ namespace }}sectionItem__aboveClickArea">
				{% render "@btn-secondary--icon-left",{
					eltType: "a",
					icon: "icon-document",
					text:"Avis de débit"
				},true %}
				{% render "@icon-btn-secondary",{
					icon: "icon-hidden",
					attrs: {
						"data-toggle": "tooltip",
						"data-placement": "top",
						"data-title": "Exclure de l’analyse"
					}
				},true %}
				{% render "@icon-btn-secondary",{
					icon: "icon-compose",
					attrs: {
						"data-toggle": "tooltip",
						"data-placement": "top",
						"data-title": "Signer"
					}
				},true %}
			</div>
		</div>
		{% endif %}
		<button class="{{ namespace }}sectionItem__toggle js-sectionItem__detailToggle" type="button" {% for attrKey, attr in detailToggleOptions %} {{ attrKey }}="{{ attr }}"{% endfor %}>
			<span class="sr-only">Close detail</span>
		</button>
	</div>
	<div class="{{ namespace }}sectionItem__detailContent">
		{% if loading %}
			{% for i in range(0,6) %}
				{% render "@skeleton-unit" %}
			{% endfor %}
			{% else %}
			<div class="h3">{{ communication }}</div>
			{% render "@snet-info-table",infotableOptions,true %}
			<div class="{{ namespace }}box -insetMd -boxSunken {{ namespace }}staticStackMd {{ namespace }}outOfBoundsMd">
				<div class="{{ namespace }}btnGroup d-flex justify-content-end">
					{% render "@btn-secondary-inverse--icon-left",{
						eltType: "a",
						icon: "icon-edit",
						text:"Modifier"
					},true %}
					{% render "@icon-btn-secondary-inverse",{
						icon: "icon-trash",
						attrs: {
							"data-toggle": "tooltip",
							"data-placement": "top",
							"data-title": "Supprimer"
						}
					},true %}
				</div>
				<div class="h4 d-flex align-items-center">
					<span>Espace fiscal</span>
					{% render "@info-dot" %}
				</div>
				<div class="{{ namespace }}staticExceptionStackLg">
					{% render "@snet-info-table",espaceFiscalInfoTableOptions,true %}
				</div>
			</div>
		{% endif %}
	</div>
</div>

<!-- Mouvements Compte Externe -->
<div class="{{ namespace }}box {{ namespace }}sectionItem__detail">
	<div class="{{ namespace }}sectionItem__detailInner">
		<div class="{{ namespace }}sectionItem__innerCol -date">
			<div class="{{ namespace }}sectionItem__textMeta {{ namespace }}textHelper">
				{DD.MM.YYYY}
			</div>
		</div>
		<div class="{{ namespace }}sectionItem__innerCol -dot">
			<div class="{{ namespace }}sectionItem__dotWrapper">
				{% if noCategory %}
					{% render "@circle--default" %}
				{% else %}
					{% render "@icon-circle-mia"+product %}
				{% endif %}
			</div>
		</div>
		{% if noActions %}
			{% else %}
			<div class="{{ namespace }}sectionItem__innerCol -justifyEnd -grow">
				<div class="{{ namespace }}btnGroup {{ namespace }}sectionItem__aboveClickArea">
					{% render "@icon-btn-secondary",{
						icon: "icon-printer",
						attrs: {
							"data-toggle": "tooltip",
							"data-placement": "top",
							"data-title": "Imprimer"
						}
					},true %}
					{% render "@icon-btn-secondary",{
						icon: "icon-hidden",
						attrs: {
							"data-toggle": "tooltip",
							"data-placement": "top",
							"data-title": "Exclure de l’analyse"
						}
					},true %}
					{% render "@icon-btn-secondary",{
						icon: "icon-compose",
						attrs: {
							"data-toggle": "tooltip",
							"data-placement": "top",
							"data-title": "Signer"
						}
					},true %}
				</div>
			</div>
		{% endif %}
		<button class="{{ namespace }}sectionItem__toggle js-sectionItem__detailToggle" type="button" {% for attrKey, attr in detailToggleOptions %} {{ attrKey }}="{{ attr }}"{% endfor %}>
			<span class="sr-only">Close detail</span>
		</button>
	</div>
	<div class="{{ namespace }}sectionItem__detailContent">
		{% if loading %}
			{% for i in range(0,4) %}
				{% render "@skeleton-unit" %}
			{% endfor %}
			{% else %}
			<div class="h3">{{ communication }}</div>
			{% render "@snet-info-table",infoTableOptions,true %}
		{% endif %}
	</div>
</div>

Handle: @snet-section-item-detail
Preview:
- With layout
- Component only
Filesystem Path: components/snet/organisms/section-item-detail/section-item-detail.njk
References (3): @icon-circle-mia, @icon-btn-secondary, @snet-info-table
Referenced by (3): @snet-section-item--timeline-detail, @snet-section-item--timeline-detail-mouvements-compte, @snet-section-item--timeline-detail-mouvements-compte-externe