Natural Language Form: Select With Arrow

Ready

HTML
View
Context
Assets
Info
Notes


        
        <h1 class="supersize">
    Event
    <div class="m-natural-language-form  m-natural-language-form--arrow">
        <label for="naturalSelect" class="m-natural-language-form__label">i Stockholm</label>
        <select id="naturalSelect" class="m-natural-language-form__select js-natural-language-select">
            <option value="på goto10">på Goto 10</option>
            <option value="stockholm" data-color="peacock" selected>i Stockholm</option>
            <option value="malmo" data-color="jade">i Malmö</option>
            <option value="linkoping" data-color="sandstone">i Linköping</option>
            <option value="streaming" data-color="ocean">som streamas</option>
        </select>
    </div>

</h1>


        <{{textElement}}{{#if elementClass}} class="{{elementClass}}"{{/if}}>
	Event
	<div class="m-natural-language-form {{#if modifier}} m-natural-language-form--{{modifier}}{{/if}}">
	{{#if select}}
		<label for="naturalSelect" class="m-natural-language-form__label">i Stockholm</label>
		<select id="naturalSelect" class="m-natural-language-form__select js-natural-language-select">
			<option value="på goto10">på Goto 10</option>
			<option value="stockholm" data-color="peacock" selected>i Stockholm</option>
			<option value="malmo" data-color="jade">i Malmö</option>
			<option value="linkoping" data-color="sandstone">i Linköping</option>
			<option value="streaming" data-color="ocean">som streamas</option>
		</select>
	{{/if}}
	{{#unless select}}
		<input type="text" value="i Stockholm" class="m-natural-language-form__input js-natural-language-input" data-color="peacock">
		<span class="m-natural-language-form__temp-text js-temp-text">i Stockholm</span>
	{{/unless}}
	</div>
	{{#unless modifier}} lorem ipsum{{/unless}}
</{{textElement}}>


        
            
            {
  "title": "Select",
  "select": true,
  "textElement": "h1",
  "elementClass": "supersize",
  "modifier": "arrow"
}

File:

Content:


                                @charset "UTF-8";
@use "sass:meta";
@use '../../configurations/mixins' as mixin;
@use '../../configurations/bem' as bem;
@use '../../configurations/config' as config;
@use '../../configurations/variables' as var;
@use '../../configurations/functions' as func;
@use '../../configurations/colors/colors' as colors;
@use '../../configurations/colors/colors-functions' as colorFunc;
@use '../../vendor/grid/breakpoints' as breakpoint;
@use '../../vendor/grid/grid' as grid;

@include mixin.molecule(natural-language-form) {
	display: inline-block;
	position: relative;

	@include bem.m(arrow) {
		@include bem.e(label) {
			padding-right: func.rhythm(4);
			border-bottom: 2px solid currentColor;
			background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' id='icon-arrow-down' viewBox='0 0 32 18.9' width='100%25' height='100%25'%3E%3Cpolygon points='32,2.9 16,18.9 0,2.9 2.9,0 16,13.1 29.1,0 '%3E%3C/polygon%3E%3C/svg%3E%0A");
			background-repeat: no-repeat;
			background-position: calc(95%) 60%;
			background-size: var.$icon-size-medium var.$icon-size-medium;
			text-decoration: none;

			@if meta.variable-exists(cyberspace-color) {
				@media (prefers-color-scheme: dark) {
					background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' id='icon-arrow-down' fill='%23ffffff' viewBox='0 0 32 18.9' width='100%25' height='100%25'%3E%3Cpolygon points='32,2.9 16,18.9 0,2.9 2.9,0 16,13.1 29.1,0 '%3E%3C/polygon%3E%3C/svg%3E%0A");
				}
			}

			&[data-color='ocean'] {
				background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' id='icon-arrow-down' fill='%2350b2fc' viewBox='0 0 32 18.9' width='100%25' height='100%25'%3E%3Cpolygon points='32,2.9 16,18.9 0,2.9 2.9,0 16,13.1 29.1,0 '%3E%3C/polygon%3E%3C/svg%3E%0A");
			}

			&[data-color='peacock'] {
				background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' id='icon-arrow-down' fill='%23c27fec' viewBox='0 0 32 18.9' width='100%25' height='100%25'%3E%3Cpolygon points='32,2.9 16,18.9 0,2.9 2.9,0 16,13.1 29.1,0 '%3E%3C/polygon%3E%3C/svg%3E%0A");
			}

			&[data-color='jade'] {
				background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' id='icon-arrow-down' fill='%2355c7b4' viewBox='0 0 32 18.9' width='100%25' height='100%25'%3E%3Cpolygon points='32,2.9 16,18.9 0,2.9 2.9,0 16,13.1 29.1,0 '%3E%3C/polygon%3E%3C/svg%3E%0A");
			}

			&[data-color='sandstone'] {
				background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' id='icon-arrow-down' fill='%23f99963' viewBox='0 0 32 18.9' width='100%25' height='100%25'%3E%3Cpolygon points='32,2.9 16,18.9 0,2.9 2.9,0 16,13.1 29.1,0 '%3E%3C/polygon%3E%3C/svg%3E%0A");
			}

			@include breakpoint.bp-up(sm) {
				border-bottom: 4px solid currentColor;
				background-position: calc(100%) 60%;
			}

			@include breakpoint.bp-up(lg) {
				border-bottom: 5px solid currentColor;
			}
		}
	}

	@include bem.e(select) {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		padding-right: func.rhythm(4);
		opacity: 0;
		cursor: pointer;
	}

	@include bem.e(label) {
		display: inline-block;
		font-family: inherit;
		font-size: inherit;
		text-decoration: underline;
		cursor: pointer;

		option:not(:checked) {
			color: colors.$color-cyberspace;
		}

		&[data-color='ocean'] {
			color: colors.$color-ocean;
		}

		&[data-color='peacock'] {
			color: colors.$color-peacock;
		}

		&[data-color='jade'] {
			color: colors.$color-jade;
		}

		&[data-color='sandstone'] {
			color: colors.$color-sandstone;
		}
	}

	@include bem.e(input) {
		position: relative;
		z-index: 1;
		top: 0;
		left: 0;
		width: 100%;
		min-width: none;
		max-width: none;
		padding: 0;
		border: 0;
		background: transparent;
		text-decoration: underline;
		cursor: pointer;

		&[data-color='ocean'] {
			color: colors.$color-ocean;
		}

		&[data-color='peacock'] {
			color: colors.$color-peacock;
		}

		&[data-color='jade'] {
			color: colors.$color-jade;
		}
	}

	@include bem.e(temp-text) {
		position: absolute;
		z-index: -1;
		top: 0;
		opacity: 0;
		white-space: nowrap;
		pointer-events: none;
	}
}

URL: /components/raw/natural-language-form/_natural-language-form.scss
Filesystem Path: src/molecules/natural-language-form/_natural-language-form.scss
Size: 4.3 KB

Content:


                                const selects = document.querySelectorAll('.js-natural-language-select');
const inputs = document.querySelectorAll('.js-natural-language-input');

function sync(el, option) {
	const { color } = option.dataset;

	el.dataset.color = color;
	el.innerText = option.innerText;
}

function setupSelect(select) {
	const parent = select.parentNode;
	const text = parent.querySelector('label');

	select.addEventListener('change', () => {
		sync(text, select.options[select.selectedIndex]);
	});

	// Next tick
	setTimeout(() => {
		sync(text, select.options[select.selectedIndex]);
	}, 0);
}

if (selects) {
	[].forEach.call(selects, setupSelect);
}

function syncInput(el, input, value) {
	el.innerText = value;

	setTimeout(() => {
		const selectWidth = el.getBoundingClientRect().width;
		input.style.width = `${selectWidth}px`;
	}, 0);
}

if (inputs) {
	[].forEach.call(inputs, (input) => {
		const text = input.nextElementSibling;

		syncInput(text, input, input.value);

		input.addEventListener('input', (e) => {
			syncInput(text, input, e.target.value);
		});

		input.addEventListener('change', (e) => {
			syncInput(text, input, e.target.value);
		});
	});
}

URL: /components/raw/natural-language-form/natural-language-form.js
Filesystem Path: src/molecules/natural-language-form/natural-language-form.js
Size: 1.2 KB

Handle: @natural-language-form--select-with-arrow
Variants (4): Select , Select With Arrow , Other Text Element , Input
Preview:
- With layout
- Component only
Filesystem Path: src/molecules/natural-language-form/natural-language-form.hbs

No notes defined.