@bethinkpl/design-system 15.0.3 → 15.1.2

package/lib/js/components/PopOver/PopOver.vue

@@ -9,16 +9,24 @@
 		:delay-on-mouse-over="300"
 		:delay-on-mouse-out="300"
 		:append-to-body="appendToBody"
+		:visible-arrow="isPointerVisible"
+		:root-class="rootClass"
 	>
 		<div
 			class="popper popOver"
-			:class="{ '-color-neutral': color === POP_OVER_COLORS.NEUTRAL }"
+			:class="{
+				'-color-neutral': color === POP_OVER_COLORS.NEUTRAL,
+				'-small': size === POP_OVER_SIZES.SMALL,
+				'-medium': size === POP_OVER_SIZES.MEDIUM,
+			}"
 		>
 			<img v-if="headerImageUrl" class="popOver__image" :src="headerImageUrl" alt="" />
 			<div class="popOver__content">
 				<div v-if="titleText" class="popOver__title"> {{ titleText }} </div>
 				<div v-if="subtitleText" class="popOver__subtitle"> {{ subtitleText }} </div>
-				<slot :close="close" />
+				<div class="popOver__contentSlot" :class="{ '-maxHeight': maxHeight }">
+					<slot :close="close" />
+				</div>
 			</div>
 			<ds-button
 				v-if="buttonText"
@@ -53,7 +61,6 @@
 	display: flex;
 	flex-direction: column;
 	padding: 0;
-	max-width: 320px;
 
 	&.-color-neutral ::v-deep .popper__arrow {
 		border-color: $color-neutral-background transparent !important;
@@ -63,6 +70,30 @@
 		background-color: $color-neutral-background;
 	}
 
+	.popOver__contentSlot {
+		word-break: break-word;
+	}
+
+	.popOver__contentSlot.-maxHeight {
+		overflow: hidden scroll;
+	}
+
+	&.-small {
+		width: 320px;
+
+		.popOver__contentSlot.-maxHeight {
+			max-height: 160px;
+		}
+	}
+
+	&.-medium {
+		width: min(90vw, 460px);
+
+		.popOver__contentSlot.-maxHeight {
+			max-height: 250px;
+		}
+	}
+
 	&[x-placement^='bottom'] {
 		margin-top: $space-s;
 
@@ -145,8 +176,8 @@
 	}
 
 	&__button {
-		margin: 0 $space-s $space-xs;
 		align-self: flex-end;
+		margin: 0 $space-s $space-xs;
 	}
 }
 </style>
@@ -154,7 +185,12 @@
 <script>
 import VuePopper from 'vue-popperjs';
 import 'vue-popperjs/dist/vue-popper.css';
-import { POP_OVER_COLORS, POP_OVER_PLACEMENTS, POP_OVER_TRIGGER_ACTIONS } from './PopOver.consts';
+import {
+	POP_OVER_COLORS,
+	POP_OVER_PLACEMENTS,
+	POP_OVER_TRIGGER_ACTIONS,
+	POP_OVER_SIZES,
+} from './PopOver.consts';
 import DsButton, { BUTTON_SIZES, BUTTON_TYPES } from '../Buttons/Button';
 
 export default {
@@ -217,10 +253,30 @@ export default {
 			type: Object,
 			default: () => ({}),
 		},
+		size: {
+			type: String,
+			default: POP_OVER_SIZES.SMALL,
+			validator(size) {
+				return Object.values(POP_OVER_SIZES).includes(size);
+			},
+		},
+		maxHeight: {
+			type: Boolean,
+			default: false,
+		},
+		isPointerVisible: {
+			type: Boolean,
+			default: true,
+		},
+		rootClass: {
+			type: String,
+			default: '',
+		},
 	},
 	data() {
 		return {
 			POP_OVER_COLORS: Object.freeze(POP_OVER_COLORS),
+			POP_OVER_SIZES: Object.freeze(POP_OVER_SIZES),
 			BUTTON_TYPES: Object.freeze(BUTTON_TYPES),
 			BUTTON_SIZES: Object.freeze(BUTTON_SIZES),
 			key: 1,

package/lib/js/components/ProgressBar/ProgressBar.vue

@@ -229,8 +229,8 @@ $progress-bar-badge-colors: (
 		display: flex;
 		flex-wrap: wrap;
 		justify-content: right;
-		margin-left: $space-xxs;
 		margin-bottom: $space-xxxxxs;
+		margin-left: $space-xxs;
 		max-width: $progress-bar-label-data-max-width;
 	}
 
@@ -272,8 +272,8 @@ $progress-bar-badge-colors: (
 		}
 
 		align-items: center;
-		border-radius: 50%;
 		border: 1px solid $color-inverted-border;
+		border-radius: 50%;
 		display: flex;
 		height: $progress-bar-badge-size;
 		justify-content: center;

package/lib/js/components/ProgressDonutChart/ProgressDonutChart.consts.ts

@@ -0,0 +1,47 @@
+export const PROGRESS_DONUT_CHART_RANGE_COLORS = {
+	PRIMARY_MEDIUM: 'primaryMedium',
+	PRIMARY: 'primary',
+	PRIMARY_WEAK: 'primaryWeak',
+	PRIMARY_GHOST: 'primaryGhost',
+
+	NEUTRAL_MEDIUM: 'neutralMedium',
+	NEUTRAL: 'neutral',
+	NEUTRAL_WEAK: 'neutralWeak',
+	NEUTRAL_GHOST: 'neutralGhost',
+
+	INFO_MEDIUM: 'infoMedium',
+	INFO: 'info',
+	INFO_WEAK: 'infoWeak',
+	INFO_GHOST: 'infoGhost',
+
+	SUCCESS_MEDIUM: 'successMedium',
+	SUCCESS: 'success',
+	SUCCESS_WEAK: 'successWeak',
+	SUCCESS_GHOST: 'successGhost',
+
+	WARNING_MEDIUM: 'warningMedium',
+	WARNING: 'warning',
+	WARNING_WEAK: 'warningWeak',
+	WARNING_GHOST: 'warningGhost',
+
+	FAIL_MEDIUM: 'failMedium',
+	FAIL: 'fail',
+	FAIL_WEAK: 'failWeak',
+	FAIL_GHOST: 'failGhost',
+} as const;
+
+export const PROGRESS_DONUT_CHART_STATES = {
+	DEFAULT: 'default',
+	LOADING: 'loading',
+	DONE: 'done',
+	OVERAGE: 'overage',
+};
+
+export type ProgressDonutChartState =
+	typeof PROGRESS_DONUT_CHART_STATES[keyof typeof PROGRESS_DONUT_CHART_STATES];
+
+export interface ProgressDonutChartRange {
+	color: typeof PROGRESS_DONUT_CHART_RANGE_COLORS[keyof typeof PROGRESS_DONUT_CHART_RANGE_COLORS];
+	start: number;
+	length: number;
+}

package/lib/js/components/ProgressDonutChart/ProgressDonutChart.spec.ts

@@ -0,0 +1,97 @@
+import { createLocalVue, shallowMount } from '@vue/test-utils';
+
+import ProgressDonutChart from './ProgressDonutChart.vue';
+import {
+	PROGRESS_DONUT_CHART_RANGE_COLORS,
+	PROGRESS_DONUT_CHART_STATES,
+	ProgressDonutChartRange,
+	ProgressDonutChartState,
+} from './ProgressDonutChart.consts';
+
+const localVue = createLocalVue();
+const createComponent = function ({
+	label = '',
+	state = PROGRESS_DONUT_CHART_STATES.DEFAULT,
+	ranges = [],
+}: createComponentOptions) {
+	return shallowMount(ProgressDonutChart, {
+		localVue,
+		propsData: {
+			label,
+			state,
+			ranges,
+		},
+	});
+};
+
+const rangesMock = [
+	{
+		color: PROGRESS_DONUT_CHART_RANGE_COLORS.SUCCESS,
+		start: 0,
+		length: 30,
+	} as ProgressDonutChartRange,
+	{
+		color: PROGRESS_DONUT_CHART_RANGE_COLORS.INFO,
+		start: 30,
+		length: 25,
+	} as ProgressDonutChartRange,
+	{
+		color: PROGRESS_DONUT_CHART_RANGE_COLORS.FAIL_GHOST,
+		start: 55,
+		length: 25,
+	} as ProgressDonutChartRange,
+];
+
+interface createComponentOptions {
+	label: string;
+	state?: ProgressDonutChartState;
+	ranges?: Array<ProgressDonutChartRange>;
+}
+
+describe('ProgressDonutChart', () => {
+	it('should render loading', () => {
+		const component = createComponent({
+			label: 'test',
+			state: PROGRESS_DONUT_CHART_STATES.LOADING,
+			ranges: rangesMock,
+		});
+
+		expect(component.find('.progressDonutChart__loader').exists()).toBeTruthy();
+		expect(component.find('.progressDonutChart__track').exists()).toBeFalsy();
+	});
+
+	it('should render icon when done', async () => {
+		const component = createComponent({
+			label: 'test',
+			state: PROGRESS_DONUT_CHART_STATES.DONE,
+			ranges: rangesMock,
+		});
+
+		expect(component.find('ds-icon-stub').exists()).toBeTruthy();
+	});
+
+	it('should render + sign when overage', () => {
+		const component = createComponent({
+			label: 'test',
+			state: PROGRESS_DONUT_CHART_STATES.OVERAGE,
+			ranges: rangesMock,
+		});
+
+		expect(component.find('.progressDonutChart__track.-success').exists()).toBeTruthy();
+		expect(component.find('.progressDonutChart__labelText').exists()).toBeTruthy();
+		expect(component.find('.progressDonutChart__labelText').text()).toBe('+test');
+	});
+
+	it('should calculate track rotation based on start and length', () => {
+		const component = createComponent({
+			label: 'test',
+			state: PROGRESS_DONUT_CHART_STATES.DEFAULT,
+			ranges: rangesMock,
+		});
+		const tracks = component.findAll('.progressDonutChart__track');
+		expect(tracks.length).toBe(3);
+		expect(tracks.at(0).attributes('style')).toBe('transform: rotate(90deg);');
+		expect(tracks.at(1).attributes('style')).toBe('transform: rotate(198deg);');
+		expect(tracks.at(2).attributes('style')).toBe('transform: rotate(288deg);');
+	});
+});

package/lib/js/components/ProgressDonutChart/ProgressDonutChart.stories.ts

@@ -0,0 +1,64 @@
+import ProgressDonutChart from './ProgressDonutChart.vue';
+
+import { ArgTypes, Meta, StoryFn } from '@storybook/vue';
+import {
+	PROGRESS_DONUT_CHART_RANGE_COLORS,
+	PROGRESS_DONUT_CHART_STATES,
+	ProgressDonutChartRange,
+} from './ProgressDonutChart.consts';
+
+export default {
+	title: 'Components/ProgressDonutChart',
+	component: ProgressDonutChart,
+} as Meta<typeof ProgressDonutChart>;
+
+const StoryTemplate: StoryFn<typeof ProgressDonutChart> = (argTypes) => ({
+	components: { ProgressDonutChart },
+	props: Object.keys(argTypes),
+	template: `
+		<ProgressDonutChart
+			v-bind=$props
+		/>`,
+});
+
+export const Interactive = StoryTemplate.bind({});
+
+const argTypes = {
+	label: {
+		control: { type: 'text' },
+		defaultValue: '70',
+	},
+	state: {
+		control: { type: 'select', options: Object.values(PROGRESS_DONUT_CHART_STATES) },
+		defaultValue: PROGRESS_DONUT_CHART_STATES.DEFAULT,
+	},
+	ranges: {
+		control: { type: 'array' },
+		defaultValue: [
+			{
+				color: PROGRESS_DONUT_CHART_RANGE_COLORS.SUCCESS,
+				start: 0,
+				length: 30,
+			} as ProgressDonutChartRange,
+			{
+				color: PROGRESS_DONUT_CHART_RANGE_COLORS.INFO,
+				start: 30,
+				length: 25,
+			} as ProgressDonutChartRange,
+			{
+				color: PROGRESS_DONUT_CHART_RANGE_COLORS.FAIL_GHOST,
+				start: 55,
+				length: 25,
+			} as ProgressDonutChartRange,
+		],
+	},
+} as ArgTypes;
+
+Interactive.argTypes = argTypes;
+
+Interactive.parameters = {
+	design: {
+		type: 'figma',
+		url: 'https://www.figma.com/file/izQdYyiBR1GQgFkaOIfIJI/LMS---DS-Components?node-id=5867-97923&t=wQeUoflFyMwdW7Ne-4',
+	},
+};

package/lib/js/components/ProgressDonutChart/ProgressDonutChart.vue

@@ -0,0 +1,293 @@
+<template>
+	<div
+		:class="{
+			progressDonutChart: true,
+		}"
+	>
+		<svg
+			class="progressDonutChart__svg"
+			:width="PROGRESS_DONUT_CHART_SIZE"
+			:height="PROGRESS_DONUT_CHART_SIZE"
+			xmlns="http://www.w3.org/2000/svg"
+		>
+			<circle
+				class="progressDonutChart__circle progressDonutChart__thumb"
+				:cx="PROGRESS_DONUT_CHART_CIRCLE_CENTER_POINT"
+				:cy="PROGRESS_DONUT_CHART_CIRCLE_CENTER_POINT"
+				:r="PROGRESS_DONUT_CHART_CIRCLE_RADIUS"
+			/>
+			<circle
+				v-if="state === PROGRESS_DONUT_CHART_STATES.LOADING"
+				class="progressDonutChart__circle progressDonutChart__loader"
+				:cx="PROGRESS_DONUT_CHART_CIRCLE_CENTER_POINT"
+				:cy="PROGRESS_DONUT_CHART_CIRCLE_CENTER_POINT"
+				:r="PROGRESS_DONUT_CHART_CIRCLE_RADIUS"
+			/>
+			<template v-else>
+				<circle
+					v-for="(range, index) in calculatedRanges"
+					:key="`circle_${index}`"
+					class="progressDonutChart__circle progressDonutChart__track"
+					:cx="PROGRESS_DONUT_CHART_CIRCLE_CENTER_POINT"
+					:cy="PROGRESS_DONUT_CHART_CIRCLE_CENTER_POINT"
+					:r="PROGRESS_DONUT_CHART_CIRCLE_RADIUS"
+					:style="`--length: ${range.length}; transform: rotate(${range.rotate}deg);`"
+					:class="[`-${range.color}`]"
+				/>
+			</template>
+		</svg>
+		<div class="progressDonutChart__label">
+			<div
+				v-if="state === PROGRESS_DONUT_CHART_STATES.LOADING"
+				class="progressDonutChart__loaderText"
+			/>
+			<ds-icon
+				v-else-if="state === PROGRESS_DONUT_CHART_STATES.DONE"
+				class="progressDonutChart__icon"
+				:icon="ICONS.FA_CHECK_SOLID"
+				:size="ICON_SIZES.X_SMALL"
+			/>
+			<div
+				v-else-if="label"
+				class="progressDonutChart__labelText"
+				:class="{ '-hasOverage': state === PROGRESS_DONUT_CHART_STATES.OVERAGE }"
+			>
+				{{ labelText }}
+			</div>
+		</div>
+	</div>
+</template>
+
+<style scoped lang="scss">
+@import '../../../styles/settings/animations';
+@import '../../../styles/settings/colors/tokens';
+@import '../../../styles/settings/spacings';
+@import '../../../styles/settings/typography/tokens';
+
+$progress-donut-chart-size: 40px;
+$progress-donut-chart-circle-stroke-width: 4;
+$pi: 3.1416;
+$progress-donut-chart-circle-radius: 18; // (width / 2) - (stroke-width / 2)
+$circle-circumference: 2 * $pi * $progress-donut-chart-circle-radius;
+$progress-donut-chart-loading-dot-size: 2px;
+
+$progress-donut-chart-range-colors: (
+	'primaryMedium': $color-primary-data-medium,
+	'primary': $color-primary-data,
+	'primaryWeak': $color-primary-data-weak,
+	'primaryGhost': $color-primary-data-ghost,
+	'neutralMedium': $color-neutral-data-medium,
+	'neutral': $color-neutral-data,
+	'neutralWeak': $color-neutral-data-weak,
+	'neutralGhost': $color-neutral-data-ghost,
+	'infoMedium': $color-info-data-medium,
+	'info': $color-info-data,
+	'infoWeak': $color-info-data-weak,
+	'infoGhost': $color-info-data-ghost,
+	'successMedium': $color-success-data-medium,
+	'success': $color-success-data,
+	'successWeak': $color-success-data-weak,
+	'successGhost': $color-success-data-ghost,
+	'warningMedium': $color-warning-data-medium,
+	'warning': $color-warning-data,
+	'warningWeak': $color-warning-data-weak,
+	'warningGhost': $color-warning-data-ghost,
+	'failMedium': $color-fail-data-medium,
+	'fail': $color-fail-data,
+	'failWeak': $color-fail-data-weak,
+	'failGhost': $color-fail-data-ghost,
+);
+
+@keyframes dot-flashing {
+	0% {
+		background-color: $color-neutral-text;
+	}
+
+	50%,
+	100% {
+		background-color: transparent;
+	}
+}
+
+.progressDonutChart {
+	box-sizing: border-box;
+	height: $progress-donut-chart-size;
+	margin: 0;
+	padding: 0;
+	position: relative;
+	width: $progress-donut-chart-size;
+
+	&__svg {
+		height: $progress-donut-chart-size;
+		width: $progress-donut-chart-size;
+	}
+
+	&__circle {
+		fill: none;
+		stroke-width: $progress-donut-chart-circle-stroke-width;
+		transform: rotate(90deg);
+		transform-origin: 50% 50%;
+		// Disabled for v3.0
+		//stroke-linecap: round;
+		//stroke-linejoin: round;
+		transition: all $default-transition-time ease-out;
+	}
+
+	&__thumb {
+		stroke: $color-neutral-data-ghost;
+	}
+
+	&__track {
+		@each $class, $color-name in $progress-donut-chart-range-colors {
+			&.-#{$class} {
+				stroke: $color-name;
+			}
+		}
+
+		stroke-dasharray: $circle-circumference;
+		stroke-dashoffset: calc(
+			#{$circle-circumference} - (#{$circle-circumference} * (var(--length, 0) / 100))
+		);
+	}
+
+	&__loader {
+		animation: a-spinAround 2s infinite linear;
+		stroke: $color-neutral-background-strong;
+		stroke-dasharray: $circle-circumference;
+		stroke-dashoffset: #{$circle-circumference - ($circle-circumference * (25 / 100))};
+		transform: rotate(0deg);
+	}
+
+	&__label {
+		@include info-m-default-bold;
+
+		align-items: center;
+		color: $color-neutral-text;
+		display: flex;
+		height: 100%;
+		justify-content: center;
+		left: 0;
+		position: absolute;
+		top: 0;
+		width: 100%;
+	}
+
+	&__icon {
+		color: $color-success-icon;
+	}
+
+	&__labelText {
+		max-width: 80%;
+		overflow: hidden;
+
+		&.-hasOverage {
+			color: $color-success-text;
+			margin-left: -$space-xxxxxs;
+		}
+	}
+
+	&__loaderText {
+		animation: dot-flashing #{2 * $default-transition-time} infinite linear alternate;
+		animation-delay: $default-transition-time;
+		background-color: $color-neutral-text;
+		border-radius: 100%;
+		color: $color-neutral-text;
+		height: $progress-donut-chart-loading-dot-size;
+		margin-top: $space-xxxs;
+		position: relative;
+		width: $progress-donut-chart-loading-dot-size;
+
+		&::before,
+		&::after {
+			animation: dot-flashing #{2 * $default-transition-time} infinite alternate;
+			background-color: $color-neutral-text;
+			border-radius: 100%;
+			color: $color-neutral-text;
+			content: '';
+			display: inline-block;
+			height: $progress-donut-chart-loading-dot-size;
+			position: absolute;
+			top: 0;
+			width: $progress-donut-chart-loading-dot-size;
+		}
+
+		&::before {
+			animation-delay: 0s;
+			left: -($progress-donut-chart-loading-dot-size * 2);
+		}
+
+		&::after {
+			animation-delay: 2 * $default-transition-time;
+			left: $progress-donut-chart-loading-dot-size * 2;
+		}
+	}
+}
+</style>
+
+<script lang="ts">
+import {
+	PROGRESS_DONUT_CHART_STATES,
+	ProgressDonutChartRange,
+	ProgressDonutChartState,
+} from './ProgressDonutChart.consts';
+import { PropType } from 'vue';
+import DsIcon, { ICON_SIZES, ICONS } from '../Icons/Icon';
+
+const OFFSET_IN_DEGREES_OF_TRACK_START_POINT = 90; // 90 is to set starting point at the bottom
+const PROGRESS_DONUT_CHART_SIZE = 40; //  keep consider with $progress-donut-chart-size
+const PROGRESS_DONUT_CHART_STROKE_WIDTH = 4; // keep consider with $progress-donut-chart-circle-stroke-width
+const PROGRESS_DONUT_CHART_CIRCLE_CENTER_POINT = PROGRESS_DONUT_CHART_SIZE / 2;
+const PROGRESS_DONUT_CHART_CIRCLE_RADIUS =
+	PROGRESS_DONUT_CHART_SIZE / 2 - PROGRESS_DONUT_CHART_STROKE_WIDTH / 2;
+export default {
+	name: 'ProgressDonutChart',
+	components: {
+		DsIcon,
+	},
+	props: {
+		label: { type: String, default: '' },
+		state: {
+			type: String as PropType<ProgressDonutChartState>,
+			default: PROGRESS_DONUT_CHART_STATES.DEFAULT,
+			validator(state) {
+				return Object.values(PROGRESS_DONUT_CHART_STATES).includes(state);
+			},
+		},
+		ranges: {
+			type: Array as PropType<Array<ProgressDonutChartRange>>,
+			required: true,
+			validator(ranges) {
+				return ranges.every(
+					(range: ProgressDonutChartRange) =>
+						range.start >= 0 && range.length >= 0 && range.start + range.length <= 100,
+				);
+			},
+		},
+	},
+	data() {
+		return {
+			PROGRESS_DONUT_CHART_STATES: Object.freeze(PROGRESS_DONUT_CHART_STATES),
+			ICONS: Object.freeze(ICONS),
+			ICON_SIZES: Object.freeze(ICON_SIZES),
+			PROGRESS_DONUT_CHART_SIZE,
+			PROGRESS_DONUT_CHART_CIRCLE_CENTER_POINT,
+			PROGRESS_DONUT_CHART_CIRCLE_RADIUS,
+		};
+	},
+	computed: {
+		labelText() {
+			return [this.state === PROGRESS_DONUT_CHART_STATES.OVERAGE && '+', this.label]
+				.filter(Boolean)
+				.join('');
+		},
+		calculatedRanges() {
+			return this.ranges.map((range) => {
+				return {
+					...range,
+					rotate: (range.start / 100) * 360 + OFFSET_IN_DEGREES_OF_TRACK_START_POINT,
+				};
+			});
+		},
+	},
+};
+</script>

package/lib/js/components/ProgressDonutChart/index.ts

@@ -0,0 +1,4 @@
+import ProgressDonutChart from './ProgressDonutChart.vue';
+
+export default ProgressDonutChart;
+export * from './ProgressDonutChart.consts';

package/lib/js/components/SectionHeader/SectionHeader.vue

@@ -86,8 +86,8 @@ $icons-and-slot-min-height-l: 50px;
 
 	&__slot,
 	&__iconWrapper {
-		display: flex;
 		align-items: center;
+		display: flex;
 	}
 
 	&__iconWrapper {

package/lib/js/components/SurveyQuestions/SurveyQuestionOpenEnded/SurveyQuestionOpenEnded.vue

@@ -53,10 +53,10 @@
 .surveyQuestionOpenEnded {
 	&__header {
 		display: flex;
+		justify-content: space-between;
+		margin-bottom: $space-s;
 		// header without explanation iconButton has to be the same size as with iconButton
 		min-height: $icon-button-medium-size;
-		margin-bottom: $space-s;
-		justify-content: space-between;
 	}
 
 	&__title {

package/lib/js/components/SurveyQuestions/SurveyQuestionScale/SurveyQuestionScale.vue

@@ -90,10 +90,10 @@
 		@include heading-m-default-regular;
 
 		display: flex;
+		justify-content: space-between;
+		margin-bottom: $space-m;
 		// title without explanation iconButton has to be the same size as with iconButton
 		min-height: $icon-button-medium-size;
-		margin-bottom: $space-m;
-		justify-content: space-between;
 	}
 
 	&__title {
@@ -110,8 +110,8 @@
 		border-radius: $radius-s;
 		display: flex;
 		justify-content: space-between;
-		padding: $space-s $space-xxs;
 		overflow-x: auto;
+		padding: $space-s $space-xxs;
 
 		@media #{breakpoint-s()} {
 			padding: $space-s $space-l;
@@ -132,8 +132,8 @@
 		display: none;
 
 		@media #{breakpoint-s()} {
-			width: $space-l;
 			display: block;
+			width: $space-l;
 		}
 	}