Search: Inverted Tab Filters

Behaviour and classes

The -isFocused class is used to give the shadow to the search. It is toggled through javascript. As long as the focus is on the input or one of the buttons contained within the nav, the class should remain present.

The modifier classes are as follow:

  • -isFocused: the search enters an "active" state
  • -clearActive: the clear button is shown
  • -performSearchVisible: The search button is visible
  • -small: Smaller height and smaller buttons (that each have their own component modifier classes)
  • inverted: inverted color scheme
<div class="sds-search -clearActive -inverted">
    <div class="sds-search__inner form-control">
        <span class="sds-search__searchIcon sds-icon sds-icon-search" aria-hidden="true"></span>
        <input id="" type="text" placeholder="{Placeholder}" value="{Search Query}" class="sds-search__input form-control" />
        <div class="sds-search__actions">
            <div class="sds-search__clear">
                <button type="button" class="sds-btn -iconBtn -btnSecondary -ghost">

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

                </button>
            </div>
            <div class="sds-btnGroup" data-toggle-visibility-at="">
                <div class="sds-toggleTab -light">
                    <label class="sds-btn -btnSecondary -btnSmall sds-toggleTab__btn">

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

                    </label>
                    <label class="sds-btn -btnSecondary -btnSmall sds-toggleTab__btn -isActive">

                        <span class="sds-btn__text">S-Bank</span>

                    </label>
                </div>
                <div class="dropdown">
                    <button type="button" class="sds-btn -iconBtn -btnSecondary -btnInverse -hasNotifications" data-offset="0,8" data-toggle="dropdown">

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

                    </button>
                    <div aria-labelledby="" class="sds-actionMenu dropdown-menu dropdown-menu-right">

                        <div class="dropdown-item">
                            <div class="sds-checkbox custom-control custom-checkbox">
                                <input value="checkbox-value" type="checkbox" name="" class="sr-only custom-control-input " id="action-menu-checkbox-0-base"><span class="sds-checkboxDot sds-checkbox__shape" aria-hidden="true"></span>
                                <label class="custom-control-label" for="action-menu-checkbox-0-base">Check this custom checkbox</label>

                                <div class="sds-checkbox__error invalid-feedback">Error message</div>
                            </div>
                        </div>

                        <div class="dropdown-item">
                            <div class="sds-checkbox custom-control custom-checkbox">
                                <input value="checkbox-value" type="checkbox" name="" class="sr-only custom-control-input " id="action-menu-checkbox-1-base"><span class="sds-checkboxDot sds-checkbox__shape" aria-hidden="true"></span>
                                <label class="custom-control-label" for="action-menu-checkbox-1-base">Check this custom checkbox</label>

                                <div class="sds-checkbox__error invalid-feedback">Error message</div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="{{ namespace }}search{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}"{% for attrKey, attr in attrs %} {{ attrKey }}="{{ attr }}"{% endfor %}>
	<div class="{{ namespace }}search__inner form-control">
		<span class="{{ namespace }}search__searchIcon {{ namespace }}icon {{ namespace }}icon-search" aria-hidden="true"></span>
		<input id="{{ id }}" type="text" placeholder="{{ placeholder }}" value="{{ value }}" class="{{ namespace }}search__input form-control"{% if disabled %} disabled{% endif %}{% if readonly %} readonly{% endif %} />
		<div class="{{ namespace }}search__actions">
			<div class="{{ namespace }}search__clear">
				{% render "@icon-btn-secondary--ghost",{
					classes: clearBtnClasses,
					icon: "icon-cross",
					disabled: filtersBtnDisabled
				}, true %}
			</div>
			<div class="{{ namespace }}btnGroup" data-toggle-visibility-at="{{ breakpoint }}">
				{% render "@toggle-tab",{
					toggleTabBtn1Text: "Agences",
					toggleTabBtn2Text: "S-Bank",
					classes: ["-light"]
				},true %}
				<div class="dropdown">
					{% render "@icon-btn-secondary-inverse",{
						icon: "icon-filter",
						classes: ["-hasNotifications"],
						"attrs": {
							"data-offset": "0,8",
							"data-toggle": "dropdown"
						}
					},true %}
					{% render "@snet-action-menu--checkboxes",{
						modifiers: ["dropdown-menu-right"],
						checkboxes: checkboxes
					},true %}
				</div>
			</div>
		</div>
	</div>
</div>
  • Content:
    export default class SDSSearch {
    	constructor() {
    
    		this.focusToggle();
    
    	}
    
    	focusToggle() {
    
    		let searches = document.querySelectorAll(".sds-search");
    
    		searches.forEach((element, index) => {
    
    			element.querySelectorAll("button").forEach((btnElt, index) => {
    
    				btnElt.addEventListener("focus", (e) => {
    
    					if (e.currentTarget === document.activeElement) {
    
    						e.currentTarget.closest(".sds-search").classList.add("-isFocused")
    
    					}
    
    				})
    
    				btnElt.addEventListener("blur", (e) => {
    
    					e.currentTarget.closest(".sds-search").classList.remove("-isFocused")
    
    				})
    
    			})
    
    			element.querySelector(".sds-search__input").addEventListener("blur", (e) => {
    
    				e.currentTarget.closest(".sds-search").classList.remove("-isFocused");
    
    			})
    
    			element.querySelector(".sds-search__input").addEventListener("focus", (e) => {
    				e.currentTarget.closest(".sds-search").classList.add("-isFocused")
    			})
    
    		})
    
    	}
    
    }
    
  • URL: /components/raw/search/SDSSearch.js
  • Filesystem Path: components/base-components/atoms/forms/search/SDSSearch.js
  • Size: 933 Bytes
  • Content:
    @use "sass:math";
    /* variables specific to current element */
    
    $search-input-height-large:  map-deep-get($token-sizes-unit-map, "56");
    
    .#{$namespace}search {
    
    	/* Save root element context for easy access if nesting is needed */
    
    	$self: &;
    
    	/* properties of current element  + media queries */
    	flex-grow: 1;
    	border-radius: map-deep-get($token-radius-map, "32");
    	position: relative;
    	z-index: z("zero");
    
    	/* 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 */
    
    	// search__inner
    	&__inner {
    
    		display: flex;
    		align-items: center;
    		padding-left: $input-padding-x*2;
    		padding-right: $input-padding-x;
    		border-radius: inherit;
    		@include custom-prop-fallback("background-color","sys-color-elevation-surface-flat");
    		@include custom-prop-fallback("border-color","sys-color-elevation-surface-flat");
    		border: 0;
    		height: $search-input-height-large;
    
    		position: relative;
    
    		&::after {
    
    			content: "";
    			display: block;
    			position: absolute;
    			z-index: z("negative");
    			top: 0;
    			left: 0;
    			width: 100%;
    			height: 100%;
    			box-shadow: map-deep-get($token-shadow-map, "active");
    			opacity: 1;
    			transition: opacity 0.25s linear;
    			border-radius: inherit;
    
    		}
    
    	}
    
    	// search__input
    	&__input {
    
    		// follows same logic as parent
    
    		background-color: transparent !important;
    		height: auto;
    		border: none;
    		border-radius: inherit;
    
    	}
    
    	&__actions {
    
    		display: flex;
    		align-items: center;
    		flex-shrink: 0;
    		@include spacer-component-inline("sm");
    
    	}
    
    	&__searchIcon {
    
    		@include custom-prop-fallback("color","sys-color-text-primary-muted");
    
    	}
    
    	&__clear,
    	&__searchBtn {
    
    		display: none;
    
    	}
    
    	/* modifiers */
    
    	&.-isFocused.-isFocused  {
    
    		#{$self}__inner {
    
    			@include custom-prop-fallback("background-color","sys-color-elevation-surface-flat");
    			@include custom-prop-fallback("border-color","sys-color-elevation-surface-flat");
    
    			&::after {
    
    				opacity: 1;
    
    			}
    
    		}
    
    	}
    
    	&.-clearActive {
    
    		#{$self}__clear,
    		#{$self}__searchBtn {
    
    			display: inline-flex;
    
    		}
    
    	}
    
    	&.-performSearchVisible {
    
    		#{$self}__searchBtn {
    
    			display: none;
    
    		}
    
    	}
    
    	&.-inverted {
    
    		#{$self}__inner {
    
    			@include custom-prop-fallback("background-color","sys-color-elevation-surface-sunken");
    
    			&::after {
    
    				opacity: 0;
    
    			}
    
    		}
    
    	}
    
    	&.-small {
    
    		#{$self}__inner {
    
    			height: $input-height;
    			padding-right: $input-padding-x;
    
    		}
    
    		#{$self}__actions {
    			//@include spacer-component-inline("xs");
    		}
    
    	}
    
    	/* random parent element */
    	/* 
    	*
    	*   Syntax : .randomParentElt & {}
    	*
    	*/
    
    	/* Pseudo Classes */
    
    	&:hover {
    		@media (hover: hover) {
    
    		}
    	}
    
    	&:focus {
    	}
    
    	&:active {
    	}
    
    	&:focus,
    	&:active {
    	}
    
    }
  • URL: /components/raw/search/_search.scss
  • Filesystem Path: components/base-components/atoms/forms/search/_search.scss
  • Size: 2.9 KB