@bethinkpl/design-system 15.0.3 → 15.1.1

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;
 		}
 	}
 

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

@@ -19,9 +19,9 @@
 	@include formText-s-default-regular;
 
 	border: 1px solid $color-neutral-border-weak;
-	box-sizing: border-box;
-	box-shadow: inset 0 1px 3px var(--raw-gray-400);
 	border-radius: $radius-s;
+	box-shadow: inset 0 1px 3px var(--raw-gray-400);
+	box-sizing: border-box;
 	min-height: 2em;
 	padding: $space-xxs;
 	resize: none;

package/lib/js/components/SurveyToggle/SurveyToggle.vue

@@ -186,10 +186,10 @@ $survey-toggle-colors: (
 	&__ring {
 		// TODO: IT-4131 mixin
 		align-items: center;
-		display: flex;
-		justify-content: center;
 		border: 3px solid $color-neutral-border;
 		border-radius: 100%;
+		display: flex;
+		justify-content: center;
 		transition: border-color ease-in-out $default-transition-time;
 		width: 100%;
 	}
@@ -205,18 +205,18 @@ $survey-toggle-colors: (
 	}
 
 	&__icon {
-		display: flex;
 		color: $color-inverted-icon;
+		display: flex;
 	}
 
 	&__label {
 		@include label-xs-default-bold;
 
 		color: $color-neutral-text;
-		text-align: center;
 		margin-top: $space-xxs;
-		min-height: 2em;
 		max-width: 100%;
+		min-height: 2em;
+		text-align: center;
 
 		@media #{breakpoint-s()} {
 			@include label-s-default-regular;

package/lib/js/components/Toggles/CounterToggle/CounterToggle.vue

@@ -171,8 +171,8 @@ $counter-toggle-colors: (
 @mixin setCounterToggleDisabled($disabled-color, $disabled-icon, $disabled-background) {
 	&:disabled,
 	&.-disabled {
-		color: $disabled-color;
 		background-color: $disabled-background;
+		color: $disabled-color;
 
 		.counterToggle__icon {
 			color: $disabled-icon;
@@ -222,13 +222,13 @@ $counter-toggle-colors: (
 	border-radius: $radius-s;
 	cursor: pointer;
 	display: inline-flex;
-	width: auto;
 	justify-content: center;
 	padding: $space-xxs;
 	position: relative;
 	transition: color ease-in-out $default-transition-time,
 		background-color ease-in-out $default-transition-time;
 	user-select: none;
+	width: auto;
 
 	&.-selected {
 		@each $color-name, $color-map in $counter-toggle-colors {

package/lib/js/index.ts

@@ -56,6 +56,8 @@ export { default as Dropdown } from './components/Dropdown';
 export * from './components/Dropdown/Dropdown.consts';
 export { default as ProgressBar } from './components/ProgressBar';
 export * from './components/ProgressBar/ProgressBar.consts';
+export { default as ProgressDonutChart } from './components/ProgressDonutChart';
+export * from './components/ProgressDonutChart/ProgressDonutChart.consts';
 export { default as IconText } from './components/IconText';
 export * from './components/IconText/IconText.consts';
 export { default as Pagination } from './components/Pagination';

package/lib/js/styles/ItemsList.vue

@@ -42,8 +42,8 @@
 	}
 
 	&__category {
-		font-weight: var(--typography-font-weight-bold);
 		font-size: var(--typography-font-size-2xl);
+		font-weight: var(--typography-font-weight-bold);
 		line-height: var(--typography-line-height-3xl);
 	}
 

package/lib/styles/components/_buttons.scss

@@ -64,9 +64,9 @@
 ) {
 	&:disabled,
 	&.-disabled {
+		background-color: $disabled-background;
 		border-color: $disabled-border;
 		color: $disabled-color;
-		background-color: $disabled-background;
 
 		.a-button__icon {
 			color: $disabled-icon;
@@ -174,8 +174,8 @@ $button-disabled-alpha: 0.6;
 	border-radius: 100px;
 	cursor: pointer;
 	display: inline-flex;
-	min-height: $button-medium-min-height;
 	justify-content: center;
+	min-height: $button-medium-min-height;
 	outline: none;
 	padding: $space-xxxxs $space-s;
 	position: relative;

package/lib/styles/components/_items-list-item.scss

@@ -40,8 +40,8 @@
 
 	&__attributes {
 		color: var(--color-neutral-data-medium);
-		font-style: var(--typography-font-style-italic);
 		font-size: var(--typography-font-size-xs);
+		font-style: var(--typography-font-style-italic);
 		line-height: var(--typography-line-height-s);
 		width: 25%;