List Item: Operation

Content aligned at the end of the element goes in .sds-rightContent.
<div class="sds-listItemWrapper">
    <div class="sds-listItem">
        <span class="sds-iconCircle -info100" aria-hidden="true">

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

        </span>

        <div class="sds-listItem__text">
            <div class="sds-listItem__textMain">List item helper with text</div>

            <div class="sds-listItem__textMeta sds-textHelper">helper text</div>

            <div class="sds-listItem__textMeta sds-textHelper">helper text 2</div>

            <div class="sds-listItem__textMeta sds-textHelper">helper text 3</div>

        </div>

        <div class="sds-listItem__rightContent ">

            <div class="sds-listItem__status -positive">Actif</div>
        </div>
        <button type="button" class="sds-listItem__collapseTrigger">
            <span class="sr-only">Show list item details</span>
        </button>
    </div>

    <div class="sds-listItem__collapse collapse" id="" data-parent="#">
        <div class="sds-listItem__detail sds-box -insetXl">
            <div class="sds-listItem__detailHeader sds-listItem sds-hoverContentSecondary">
                <span class="sds-iconCircle -info100" aria-hidden="true">

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

                </span>

                <div class="sds-listItem__textMain">Text text text text</div>
                <div class="sds-listItem__rightContent">
                    <div class="sds-btnGroup -aboveClickArea">
                        <button type="button" class="sds-btn -btnSecondary">

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

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

                        </button>
                        <button type="button" class="sds-btn -iconBtn -btnSecondary">

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

                        </button>
                        <button type="button" class="sds-btn -iconBtn -btnSecondary">

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

                        </button>
                    </div>
                </div>
                <button type="button" class="sds-listItem__collapseTrigger">
                    <span class="sr-only">Close list item detail</span>
                </button>
            </div>
            <div class="row">
                <div class="col-6 sds-stackLg">
                    <div class="sds-stackXs">
                        <div class="sds-listItem__detailHelperText">Statut</div>
                        <div class="sds-listItem__detailText -success100">Actif</div>
                    </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">
                                            <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 class="col-6 sds-stackLg">
                    <div class="text-right sds-stackXs">
                        <div class="sds-listItem__detailHelperText">Dernier encaissement</div>
                        <div class="sds-listItem__detailText">01.06.2022</div>
                    </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">
                                            <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>
        </div>
    </div>

</div>
<div class="{{ namespace }}listItemWrapper">
	<div class="{{ namespace }}listItem">
		{% render "@icon-circle-regular--info-100",{icon: icon}, true %}
		<div class="{{ namespace }}listItem__text">
			<div class="{{ namespace }}listItem__textMain">{{ text }}</div>
			{% for key, item in helperItems %}
				<div class="{{ namespace }}listItem__textMeta {{ namespace }}textHelper">{{ item.helperText }}</div>
			{% endfor %}
		</div>

		<div class="{{ namespace }}listItem__rightContent {% if number %}-number{% endif %}">
			{% if number %}
				<div>{{ number }}</div>
			{% endif %}
			<div class="{{ namespace }}listItem__status {% if positive %}-positive{% endif %}{% if neg %}-neg{% endif %}">{{ statusText }}</div>
		</div>
		<button type="button" class="{{ namespace }}listItem__collapseTrigger"{% for attrKey, attr in attrs %} {{ attrKey }}="{{ attr }}"{% endfor %}>
			<span class="sr-only">Show list item details</span>
		</button>
	</div>

	{% if ordresPermanents %}
		<div class="{{ namespace }}listItem__collapse collapse" id="{{ collapseID }}" data-parent="#{{ parentCollapse }}">
			{% render "@snet-list-item-detail--ordres-permanents",sectionItemDetailOptions,true %}
		</div>
	{% else %}
		<div class="{{ namespace }}listItem__collapse collapse" id="{{ collapseID }}" data-parent="#{{ parentCollapse }}">
			{% render "@snet-list-item-detail",sectionItemDetailOptions,true %}
		</div>
	{% endif %}
</div>
  • Content:
    export default class ListItem {
    
    	constructor() {
    
    		this.showDetails();
    
    	}
    
    	showDetails () {
    
    		$(".sds-listItem__collapse").each(function( index, element ) {
    			$(element).on("show.bs.collapse", function (e) {
    				$(e.target).closest(".sds-listItemWrapper").addClass("-detailShown");
    			});
    		})
    
    		$(".sds-listItem__collapse").each(function( index, element ) {
    			$(element).on("hide.bs.collapse", function (e) {
    				$(e.target).closest(".sds-listItemWrapper").removeClass("-detailShown");
    			});
    		})
    
    	}
    
    }
    
  • URL: /components/raw/snet-list-item/ListItem.js
  • Filesystem Path: components/snet/molecules/list-item/ListItem.js
  • Size: 514 Bytes
  • Content:
    /* variables specific to current element */
    
    $element-specific-variables: "";
    
    .#{$namespace}listItem {
    
    	/* Save root element context for easy access if nesting is needed */
    
    	$self: &;
    
    	/* properties of current element  + media queries */
    
    	display: flex;
    	align-items: center;
    	border-radius: map-deep-get($token-radius-map,"16");
    	@include spacer-component-inset("sm");
    	@include spacer-component-inline("md");
    	width: 100%; // Needed if item is button
    	text-align: left; // Needed if item is button
    	@include custom-prop-fallback("background-color", "sys-color-elevation-surface-flat");
    
    	/* Pseudo Elements */
    
    	&::before {
    	}
    
    	&::after {
    	}
    
    	/*
    	Include elements that are linked to the current element but have to reside at the root level of the stylesheet
    	(e.g: keyframes)
    	*/
    	@at-root {
    	}
    
    
    	/* children - write selector in full in comments in order to facilitate search */
    
    	&__inner {
    
    		@include spacer-component-inline("md");
    		display: flex;
    		align-items: center;
    		position: relative;
    		flex-grow: 1;
    		margin: 0 !important;
    
    
    	}
    
    	// listItem__text
    	&__text {
    
    		// follows same logic as parent
    		min-width: 0; // necessary if text overflow applied
    		//flex-shrink: 0;
    	}
    		
    	// listItem__textMain
    	&__textMain {
    			
    		display: block;
    		@include text-truncate();
    			
    		&.#{$namespace}textBodyLg {
    
    			font-weight: map-deep-get($token-font-weight-map, "semi-bold");
    
    		}	
    			
    		+ #{$self}__description,
    		+ #{$self}__textMeta {
    
    			//margin-top: 2px; //@TODO exception?
    		
    		}
    		
    	}	
    		
    	&__textMeta {
    
    		@include custom-prop-fallback("color", "sys-color-text-primary-muted");
    		
    	}
    
    	&__rightContent {
    
    		display: flex;
    		align-items: center;
    		margin-left: auto;
    		@include spacer-component-inline("md");
    
    		&.-number {
    
    			justify-content: space-between;
    			width: 25%;
    
    		}
    
    	}
    	
    	&__collapseTrigger {
    
    		position: absolute;
    		top: 0;
    		left: 0;
    		width: 100%;
    		height: 100%;
    
    	}
    
    	&__collapse{
    
    		transition: none !important;
    
    	}
    
    	&__status {
    
    		font-weight: map-deep-get($token-font-weight-map, "semi-bold");
    
    		&.-positive {
    
    			@include custom-prop-fallback("color", "sys-color-text-status-success-vivid");
    
    		}
    
    		&.-neg {
    
    			@include custom-prop-fallback("color", "sys-color-text-status-danger-vivid");
    
    		}
    
    	}
    
    	&__iconCircleTextGroup {
    
    		margin-top: map-deep-get($token-spacer-unit-map, "8");
    
    	}
    
    	&__detail {
    
    		box-shadow: map-deep-get($token-shadow-map, "active");
    		position: relative; // necessary for shadow to show above next element
    		margin: 0 (-($timeline-item-horiz-padding-global));
    
    	}
    
    	&__detailHeader {
    
    		margin-bottom: map-deep-get($token-spacer-unit-map, "48");
    		margin-left: -8px;
    		margin-right: -8px;
    		position: relative;
    		width: auto;
    
    
    		#{$self}__rightContent {
    
    			margin-right: 0;
    
    		}
    
    	}
    
    	&__detailHelperText {
    
    		@include custom-prop-fallback("color", "sys-color-text-primary-vivid");
    
    		font-size: map-deep-get($token-font-size-map, "body", "s");
    
    	}
    
    	&__detailText {
    
    		font-size: map-deep-get($token-font-size-map, "body", "xl");
    
    		&.-success100 {
    
    			@include custom-prop-fallback("color", "sys-color-text-status-success-vivid");
    
    		}
    
    	}
    
    	&__transactionState,
    	&__transactionState > * {
    
    		@include text-truncate();
    		
    		[class*="icon"] {
    			flex-shrink: 0;
    		}
    
    	}
    
    	&__secondary100 {
    
    		@include custom-prop-fallback("color", "sys-color-text-primary-vivid");
    
    	}
    
    	&__creditCard {
    
    		width: map-deep-get($token-sizes-unit-map, "40");
    
    	}
    
    	/* modifiers */
    
    	// listItem -headingText
    	&.-headingText {
    
    		// follows same logic as base element
    
    		#{$self}__textMain {
    
    			@extend %headingBase;
    			@extend %h5;
    
    		}
    
    	}
    
    	// listItem -rounded
    	&.-rounded {
    
    		border-radius: map-deep-get($token-radius-map, "32");
    
    	}
    
    	&.-action {
    
    		align-items: flex-start;
    
    		#{$self}__avatar {
    
    			margin-top: map-deep-get($token-spacer-unit-map, "4");
    
    		}
    
    		#{$self}__textMeta {
    
    			@include custom-prop-fallback("color", "sys-color-text-primary-contrast");
    
    		}
    
    	}
    
    	&.-disabled {
    
    		pointer-events: none;
    		opacity: .4;
    
    	}
    
    	&.-dom {
    
    		#{$self}__textMeta {
    
    			font-weight: map-deep-get($token-font-weight-map, "semi-bold");
    			margin-top: map-deep-get($token-spacer-unit-map, "4");
    			margin-bottom: map-deep-get($token-spacer-unit-map, "2");
    
    		}
    
    	}
    
    	&.-insetMd {
    		@include spacer-component-inset("md");
    	}
    
    	&.-insetLg,
    	&.-paddingLg {
    		@include spacer-component-inset("lg");
    	}
    
    	/* random parent element */
    	/* 
    	*
    	*   Syntax : .randomParentElt & {}
    	*
    	*/
    
    	&Wrapper {
    
    		position: relative;
    
    		@include hover() {
    
    			> #{$self} {
    
    				@include custom-prop-fallback("background-color", "sys-color-elevation-surface-sunken");
    
    			}
    
    		}
    
    		&.-detailShown {
    
    			> #{$self} {
    
    				display: none;
    
    			}
    
    		}
    
    	}
    
    	/* Pseudo Classes */
    
    	&:hover {
    		@media (hover: hover) {
    
    		}
    	}
    
    	&:focus {
    	}
    
    	&:active {
    	}
    
    	&:focus,
    	&:active {
    	}
    
    }
  • URL: /components/raw/snet-list-item/_list-item.scss
  • Filesystem Path: components/snet/molecules/list-item/_list-item.scss
  • Size: 4.8 KB