@mmb-digital/design-system-web 0.1.4 → 0.1.5

package/src/components/slider/slider/sliderFunction/linearVisualSteps/sliderValueByValue.test.ts

@@ -1,249 +0,0 @@
-import { getSliderValueByValue } from '@/components/slider/slider/sliderFunction/linearVisualSteps/sliderValueByValue';
-import { SliderSteps } from '@/components/slider/slider/slider.types';
-
-describe('Running Test for slider linear visual step sliderValue', () => {
-	test('linear step', () => {
-		const steps: SliderSteps = {
-			baseStep: 1,
-			breakpointList: [],
-		};
-
-		expect(
-			getSliderValueByValue({
-				min: 10,
-				max: 20,
-				steps: steps,
-				value: 10,
-			}),
-		).toBe(10);
-
-		expect(
-			getSliderValueByValue({
-				min: 10,
-				max: 20,
-				steps: steps,
-				value: 15,
-			}),
-		).toBe(15);
-
-		expect(
-			getSliderValueByValue({
-				min: 10,
-				max: 20,
-				steps: steps,
-				value: 20,
-			}),
-		).toBe(20);
-	});
-
-	test('multiple step 1', () => {
-		const steps: SliderSteps = {
-			baseStep: 1,
-			breakpointList: [
-				{
-					step: 2,
-					bottomBreakpoint: 20,
-				},
-			],
-		};
-
-		expect(
-			getSliderValueByValue({
-				min: 10,
-				max: 30,
-				steps: steps,
-				value: 10,
-			}),
-		).toBe(10);
-
-		expect(
-			getSliderValueByValue({
-				min: 10,
-				max: 30,
-				steps: steps,
-				value: 20,
-			}),
-		).toBe(20);
-
-		expect(
-			getSliderValueByValue({
-				min: 10,
-				max: 30,
-				steps: steps,
-				value: 22,
-			}),
-		).toBe(21);
-
-		expect(
-			getSliderValueByValue({
-				min: 10,
-				max: 30,
-				steps: steps,
-				value: 30,
-			}),
-		).toBe(25);
-
-		expect(
-			getSliderValueByValue({
-				min: 10,
-				max: 30,
-				steps: steps,
-				value: 28,
-			}),
-		).toBe(24);
-
-		expect(
-			getSliderValueByValue({
-				min: 10,
-				max: 30,
-				steps: steps,
-				value: 27,
-			}),
-		).toBe(24);
-	});
-
-	test('multiple step 2', () => {
-		const steps: SliderSteps = {
-			baseStep: 1,
-			breakpointList: [
-				{
-					step: 2,
-					bottomBreakpoint: 20,
-				},
-				{
-					step: 3,
-					bottomBreakpoint: 30,
-				},
-			],
-		};
-
-		expect(
-			getSliderValueByValue({
-				min: 10,
-				max: 40,
-				steps: steps,
-				value: 30,
-			}),
-		).toBe(25);
-
-		expect(
-			getSliderValueByValue({
-				min: 10,
-				max: 40,
-				steps: steps,
-				value: 33,
-			}),
-		).toBe(26);
-
-		expect(
-			getSliderValueByValue({
-				min: 10,
-				max: 40,
-				steps: steps,
-				value: 34,
-			}),
-		).toBe(27);
-
-		expect(
-			getSliderValueByValue({
-				min: 10,
-				max: 40,
-				steps: steps,
-				value: 36,
-			}),
-		).toBe(27);
-
-		expect(
-			getSliderValueByValue({
-				min: 10,
-				max: 40,
-				steps: steps,
-				value: 39,
-			}),
-		).toBe(28);
-
-		expect(
-			getSliderValueByValue({
-				min: 10,
-				max: 40,
-				steps: steps,
-				value: 40,
-			}),
-		).toBe(29);
-	});
-
-	test('multiple step 3', () => {
-		const steps: SliderSteps = {
-			baseStep: 3,
-			breakpointList: [
-				{
-					step: 4,
-					bottomBreakpoint: 20,
-				},
-			],
-		};
-
-		expect(
-			getSliderValueByValue({
-				min: 10,
-				max: 50,
-				steps: steps,
-				value: 19,
-			}),
-		).toBe(13);
-
-		expect(
-			getSliderValueByValue({
-				min: 10,
-				max: 50,
-				steps: steps,
-				value: 20,
-			}),
-		).toBe(14);
-
-		expect(
-			getSliderValueByValue({
-				min: 10,
-				max: 50,
-				steps: steps,
-				value: 21,
-			}),
-		).toBe(15);
-
-		expect(
-			getSliderValueByValue({
-				min: 10,
-				max: 50,
-				steps: steps,
-				value: 22,
-			}),
-		).toBe(15);
-
-		expect(
-			getSliderValueByValue({
-				min: 10,
-				max: 50,
-				steps: steps,
-				value: 23,
-			}),
-		).toBe(15);
-
-		expect(
-			getSliderValueByValue({
-				min: 10,
-				max: 50,
-				steps: steps,
-				value: 24,
-			}),
-		).toBe(15);
-
-		expect(
-			getSliderValueByValue({
-				min: 10,
-				max: 50,
-				steps: steps,
-				value: 25,
-			}),
-		).toBe(16);
-	});
-});

package/src/components/slider/slider/sliderFunction/linearVisualSteps/sliderValueByValue.ts

@@ -1,41 +0,0 @@
-import { SliderBreakpoint, SliderSteps } from '@/components/slider/slider/slider.types';
-
-interface GetSliderValueByValueParam {
-	readonly max: number;
-	readonly min: number;
-	readonly steps: SliderSteps;
-	readonly value: number;
-}
-
-export const getSliderValueByValue = (param: GetSliderValueByValueParam): number => {
-	const { max, min, steps, value } = param;
-
-	const breakpoints: SliderBreakpoint[] = [{ step: steps.baseStep, bottomBreakpoint: min }, ...steps.breakpointList];
-
-	let sliderValue = min;
-
-	outerCycle: for (const [breakpointIndex, breakpoint] of breakpoints.entries()) {
-		const { bottomBreakpoint: currenBottomBreakpoint, step } = breakpoint;
-		// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-		const nextBreakpoint = breakpoints[breakpointIndex + 1]?.bottomBreakpoint === undefined ? max : breakpoints[breakpointIndex + 1].bottomBreakpoint;
-
-		let i: number = currenBottomBreakpoint;
-		if (value <= currenBottomBreakpoint) {
-			break;
-		}
-		while (i + step < nextBreakpoint) {
-			i = i + step;
-			sliderValue = sliderValue + 1;
-
-			if (i === value || (i > value && i < value + step)) {
-				break outerCycle;
-			}
-		}
-
-		if (i < nextBreakpoint) {
-			sliderValue = sliderValue + 1;
-		}
-	}
-
-	return sliderValue;
-};

package/src/components/slider/slider/sliderFunction/linearVisualSteps/valueBySliderValue.test.ts

@@ -1,204 +0,0 @@
-import { SliderSteps } from '@/components/slider/slider/slider.types';
-import { getValueBySliderValue } from '@/components/slider/slider/sliderFunction/linearVisualSteps/valueBySliderValue';
-
-describe('Running Test for slider linear visual step value', () => {
-	test('linear step', () => {
-		const steps: SliderSteps = {
-			baseStep: 1,
-			breakpointList: [],
-		};
-
-		expect(
-			getValueBySliderValue({
-				min: 10,
-				max: 20,
-				steps: steps,
-				sliderValue: 10,
-			}),
-		).toBe(10);
-
-		expect(
-			getValueBySliderValue({
-				min: 10,
-				max: 20,
-				steps: steps,
-				sliderValue: 15,
-			}),
-		).toBe(15);
-
-		expect(
-			getValueBySliderValue({
-				min: 10,
-				max: 20,
-				steps: steps,
-				sliderValue: 20,
-			}),
-		).toBe(20);
-	});
-
-	test('multiple step 1', () => {
-		const steps: SliderSteps = {
-			baseStep: 1,
-			breakpointList: [
-				{
-					step: 2,
-					bottomBreakpoint: 20,
-				},
-			],
-		};
-
-		expect(
-			getValueBySliderValue({
-				min: 10,
-				max: 30,
-				steps: steps,
-				sliderValue: 10,
-			}),
-		).toBe(10);
-
-		expect(
-			getValueBySliderValue({
-				min: 10,
-				max: 30,
-				steps: steps,
-				sliderValue: 20,
-			}),
-		).toBe(20);
-
-		expect(
-			getValueBySliderValue({
-				min: 10,
-				max: 30,
-				steps: steps,
-				sliderValue: 21,
-			}),
-		).toBe(22);
-
-		expect(
-			getValueBySliderValue({
-				min: 10,
-				max: 30,
-				steps: steps,
-				sliderValue: 25,
-			}),
-		).toBe(30);
-
-		expect(
-			getValueBySliderValue({
-				min: 10,
-				max: 30,
-				steps: steps,
-				sliderValue: 24,
-			}),
-		).toBe(28);
-	});
-
-	test('multiple step 2', () => {
-		const steps: SliderSteps = {
-			baseStep: 1,
-			breakpointList: [
-				{
-					step: 2,
-					bottomBreakpoint: 20,
-				},
-				{
-					step: 3,
-					bottomBreakpoint: 30,
-				},
-			],
-		};
-
-		expect(
-			getValueBySliderValue({
-				min: 10,
-				max: 40,
-				steps: steps,
-				sliderValue: 25,
-			}),
-		).toBe(30);
-
-		expect(
-			getValueBySliderValue({
-				min: 10,
-				max: 40,
-				steps: steps,
-				sliderValue: 26,
-			}),
-		).toBe(33);
-
-		expect(
-			getValueBySliderValue({
-				min: 10,
-				max: 40,
-				steps: steps,
-				sliderValue: 27,
-			}),
-		).toBe(36);
-
-		expect(
-			getValueBySliderValue({
-				min: 10,
-				max: 40,
-				steps: steps,
-				sliderValue: 28,
-			}),
-		).toBe(39);
-
-		expect(
-			getValueBySliderValue({
-				min: 10,
-				max: 40,
-				steps: steps,
-				sliderValue: 30,
-			}),
-		).toBe(40);
-	});
-
-	test('multiple step 3', () => {
-		const steps: SliderSteps = {
-			baseStep: 3,
-			breakpointList: [
-				{
-					step: 4,
-					bottomBreakpoint: 20,
-				},
-			],
-		};
-
-		expect(
-			getValueBySliderValue({
-				min: 10,
-				max: 50,
-				steps: steps,
-				sliderValue: 13,
-			}),
-		).toBe(19);
-
-		expect(
-			getValueBySliderValue({
-				min: 10,
-				max: 50,
-				steps: steps,
-				sliderValue: 14,
-			}),
-		).toBe(20);
-
-		expect(
-			getValueBySliderValue({
-				min: 10,
-				max: 50,
-				steps: steps,
-				sliderValue: 15,
-			}),
-		).toBe(24);
-
-		expect(
-			getValueBySliderValue({
-				min: 10,
-				max: 50,
-				steps: steps,
-				sliderValue: 16,
-			}),
-		).toBe(28);
-	});
-});

package/src/components/slider/slider/sliderFunction/linearVisualSteps/valueBySliderValue.ts

@@ -1,35 +0,0 @@
-import { SliderBreakpoint, SliderMapOnChangeFunction } from '@/components/slider/slider/slider.types';
-
-export const getValueBySliderValue: SliderMapOnChangeFunction = (param): number => {
-	const { max, min, sliderValue, steps } = param;
-
-	const breakpoints: SliderBreakpoint[] = [{ step: steps.baseStep, bottomBreakpoint: min }, ...steps.breakpointList];
-
-	let currentSliderValue = min;
-	let currentValue = min;
-
-	while (currentSliderValue < sliderValue) {
-		let breakpointIndexFound = 0;
-		let breakpointFound: SliderBreakpoint = breakpoints[breakpointIndexFound];
-
-		for (const [currentBreakpointIndex, currentBreakpoint] of breakpoints.entries()) {
-			if (currentBreakpoint.bottomBreakpoint > currentValue) {
-				break;
-			}
-
-			breakpointIndexFound = currentBreakpointIndex;
-			breakpointFound = currentBreakpoint;
-		}
-
-		const breakpointFoundStep = breakpointFound.step;
-
-		// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-		const nextBreakpoint = breakpoints[breakpointIndexFound + 1]?.bottomBreakpoint === undefined ? max : breakpoints[breakpointIndexFound + 1].bottomBreakpoint;
-
-		const nextValue = currentValue + breakpointFoundStep;
-		currentValue = nextValue < nextBreakpoint ? nextValue : nextBreakpoint;
-		currentSliderValue = currentSliderValue + 1;
-	}
-
-	return currentValue;
-};

package/src/components/slider/slider/sliderHandleSvgHandler.ts

@@ -1,26 +0,0 @@
-import { theme } from '@/style/styledComponents/theme';
-import { encode as encodeBase64 } from 'base-64';
-
-export const getSliderHandleBackgroundSvg = (disable: boolean) => {
-	if (disable) {
-		return `
-				<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
-					<circle cx="12" cy="12" r="11" stroke="${theme.colors.fg.disabled.light}" stroke-width="2"/>
-				</svg>`;
-	}
-
-	return `
-			<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
-				<circle cx="12" cy="12" r="11" stroke="url(#paint0_linear_1206_76209)" stroke-width="2" />
-				<defs>
-					<linearGradient id="paint0_linear_1206_76209" x1="24" y1="0" x2="0" y2="24" gradientUnits="userSpaceOnUse">
-						<stop offset="0.0677083" stop-color="${theme.palette.pink600}"/>
-						<stop offset="1" stop-color="${theme.palette.blue600}"/>
-					</linearGradient>
-				</defs>
-			</svg>`;
-};
-
-export const getSliderHandleBackgroundSvgBase64 = (disable: boolean) => {
-	return encodeBase64(getSliderHandleBackgroundSvg(disable));
-};

package/src/components/storeButton/assets/androidSvg.tsx

@@ -1,159 +0,0 @@
-import React from 'react';
-
-interface Props {
-	className?: string;
-	height?: string;
-	width?: string;
-}
-
-export const AndroidSvg: React.FC<Props> = ({ className, height = '29', width = '116' }) => (
-	<svg
-		className={className}
-		fill="none"
-		height={height}
-		viewBox="0 0 116 29"
-		width={width}
-		xmlns="http://www.w3.org/2000/svg"
-	>
-		<path
-			d="M58.1 16.8C55.7 16.8 53.8 18.6 53.8 21.1C53.8 23.5 55.7 25.4 58.1 25.4C60.5 25.4 62.4 23.6 62.4 21.1C62.4 18.5 60.5 16.8 58.1 16.8ZM58.1 23.6C56.8 23.6 55.7 22.5 55.7 21C55.7 19.5 56.8 18.4 58.1 18.4C59.4 18.4 60.5 19.4 60.5 21C60.5 22.5 59.4 23.6 58.1 23.6ZM48.8 16.8C46.4 16.8 44.5 18.6 44.5 21.1C44.5 23.5 46.4 25.4 48.8 25.4C51.2 25.4 53.1 23.6 53.1 21.1C53.1 18.5 51.2 16.8 48.8 16.8ZM48.8 23.6C47.5 23.6 46.4 22.5 46.4 21C46.4 19.5 47.5 18.4 48.8 18.4C50.1 18.4 51.2 19.4 51.2 21C51.2 22.5 50.1 23.6 48.8 23.6ZM37.7 18.1V19.9H42C41.9 20.9 41.5 21.7 41 22.2C40.4 22.8 39.4 23.5 37.7 23.5C35 23.5 33 21.4 33 18.7C33 16 35.1 13.9 37.7 13.9C39.1 13.9 40.2 14.5 41 15.2L42.3 13.9C41.2 12.9 39.8 12.1 37.8 12.1C34.2 12.1 31.1 15.1 31.1 18.7C31.1 22.3 34.2 25.3 37.8 25.3C39.8 25.3 41.2 24.7 42.4 23.4C43.6 22.2 44 20.5 44 19.2C44 18.8 44 18.4 43.9 18.1H37.7ZM83.1 19.5C82.7 18.5 81.7 16.8 79.5 16.8C77.3 16.8 75.5 18.5 75.5 21.1C75.5 23.5 77.3 25.4 79.7 25.4C81.6 25.4 82.8 24.2 83.2 23.5L81.8 22.5C81.3 23.2 80.7 23.7 79.7 23.7C78.7 23.7 78.1 23.3 77.6 22.4L83.3 20L83.1 19.5ZM77.3 20.9C77.3 19.3 78.6 18.4 79.5 18.4C80.2 18.4 80.9 18.8 81.1 19.3L77.3 20.9ZM72.6 25H74.5V12.5H72.6V25ZM69.6 17.7C69.1 17.2 68.3 16.7 67.3 16.7C65.2 16.7 63.2 18.6 63.2 21C63.2 23.4 65.1 25.2 67.3 25.2C68.3 25.2 69.1 24.7 69.5 24.2H69.6V24.8C69.6 26.4 68.7 27.3 67.3 27.3C66.2 27.3 65.4 26.5 65.2 25.8L63.6 26.5C64.1 27.6 65.3 29 67.4 29C69.6 29 71.4 27.7 71.4 24.6V17H69.6V17.7ZM67.4 23.6C66.1 23.6 65 22.5 65 21C65 19.5 66.1 18.4 67.4 18.4C68.7 18.4 69.7 19.5 69.7 21C69.7 22.5 68.7 23.6 67.4 23.6ZM91.8 12.5H87.3V25H89.2V20.3H91.8C93.9 20.3 95.9 18.8 95.9 16.4C95.9 14 93.9 12.5 91.8 12.5ZM91.9 18.5H89.2V14.2H91.9C93.3 14.2 94.1 15.4 94.1 16.3C94 17.4 93.2 18.5 91.9 18.5ZM103.4 16.7C102 16.7 100.6 17.3 100.1 18.6L101.8 19.3C102.2 18.6 102.8 18.4 103.5 18.4C104.5 18.4 105.4 19 105.5 20V20.1C105.2 19.9 104.4 19.6 103.6 19.6C101.8 19.6 100 20.6 100 22.4C100 24.1 101.5 25.2 103.1 25.2C104.4 25.2 105 24.6 105.5 24H105.6V25H107.4V20.2C107.2 18 105.5 16.7 103.4 16.7ZM103.2 23.6C102.6 23.6 101.7 23.3 101.7 22.5C101.7 21.5 102.8 21.2 103.7 21.2C104.5 21.2 104.9 21.4 105.4 21.6C105.2 22.8 104.2 23.6 103.2 23.6ZM113.7 17L111.6 22.4H111.5L109.3 17H107.3L110.6 24.6L108.7 28.8H110.6L115.7 17H113.7ZM96.9 25H98.8V12.5H96.9V25Z"
-			fill="white"
-		/>
-		<path
-			d="M0.4 2.5C0.0999999 2.8 0 3.3 0 3.9V26C0 26.6 0.2 27.1 0.5 27.4L0.6 27.5L13 15.1V14.9L0.4 2.5Z"
-			fill="url(#paint0_linear_2551_76392)"
-		/>
-		<path
-			d="M17 19.3L12.9 15.2V14.9L17 10.8L17.1 10.9L22 13.7C23.4 14.5 23.4 15.8 22 16.6L17 19.3Z"
-			fill="url(#paint1_linear_2551_76392)"
-		/>
-		<path
-			d="M17.1 19.2L12.9 15L0.400024 27.5C0.900024 28 1.60002 28 2.50002 27.6L17.1 19.2Z"
-			fill="url(#paint2_linear_2551_76392)"
-		/>
-		<path
-			d="M17.1 10.8L2.50002 2.49999C1.60002 1.99999 0.900024 2.09999 0.400024 2.59999L12.9 15L17.1 10.8Z"
-			fill="url(#paint3_linear_2551_76392)"
-		/>
-		<path
-			d="M17 19.1L2.50002 27.3C1.70002 27.8 1.00003 27.7 0.500025 27.3L0.400024 27.4L0.500025 27.5C1.00003 27.9 1.70002 28 2.50002 27.5L17 19.1Z"
-			fill="black"
-			opacity="0.2"
-		/>
-		<path
-			d="M0.399999 27.3C0.0999995 27 0 26.5 0 25.9V26C0 26.6 0.2 27.1 0.5 27.4V27.3H0.399999Z"
-			fill="black"
-			opacity="0.12"
-		/>
-		<path
-			d="M22 16.3L17 19.1L17.1 19.2L22 16.4C22.7 16 23 15.5 23 15C23 15.5 22.6 15.9 22 16.3Z"
-			fill="black"
-			opacity="0.12"
-		/>
-		<path
-			d="M2.5 2.60003L22 13.7C22.6 14.1 23 14.5 23 15C23 14.5 22.7 14 22 13.6L2.5 2.50003C1.1 1.70003 0 2.30003 0 3.90003V4.00003C0 2.50003 1.1 1.80003 2.5 2.60003Z"
-			fill="white"
-			opacity="0.25"
-		/>
-		<path
-			d="M31.3 8V2H32.2L35.1 6.7V2H36V8H35.2L32.1 3.1V8H31.3ZM39.6 8H38.8V5.2L36.8 2H37.7L39.2 4.4L40.7 2H41.6L39.6 5.2V8ZM42.5 8V2H43.4001L46.3 6.7V2H47.1V8H46.3L43.2 3.1V8H42.5ZM48.5 8V2H49.3001V8H48.5ZM49.2 1.5H48.5L49.0001 0.5H49.8001L49.2 1.5ZM52.6001 8V2H53.5L56.4 6.7V2H57.2V8H56.4L53.3 3.1V8H52.6001ZM58.1 8L60.4001 2H61.3L63.6 8H62.7L62.1 6.4H59.6L59.0001 8H58.1ZM59.8001 5.7H61.8001L60.8 3L59.8001 5.7Z"
-			fill="white"
-			stroke="white"
-			strokeWidth="0.138889"
-		/>
-		<defs>
-			<linearGradient
-				gradientUnits="userSpaceOnUse"
-				id="paint0_linear_2551_76392"
-				x1="7.93299"
-				x2="-2.72718"
-				y1="3.70975"
-				y2="14.3701"
-			>
-				<stop stopColor="#00A0FF" />
-				<stop
-					offset="0.00657"
-					stopColor="#00A1FF"
-				/>
-				<stop
-					offset="0.2601"
-					stopColor="#00BEFF"
-				/>
-				<stop
-					offset="0.5122"
-					stopColor="#00D2FF"
-				/>
-				<stop
-					offset="0.7604"
-					stopColor="#00DFFF"
-				/>
-				<stop
-					offset="1"
-					stopColor="#00E3FF"
-				/>
-			</linearGradient>
-			<linearGradient
-				gradientUnits="userSpaceOnUse"
-				id="paint1_linear_2551_76392"
-				x1="23.8343"
-				x2="-0.362575"
-				y1="15.0017"
-				y2="15.0017"
-			>
-				<stop stopColor="#FFE000" />
-				<stop
-					offset="0.4087"
-					stopColor="#FFBD00"
-				/>
-				<stop
-					offset="0.7754"
-					stopColor="#FFA500"
-				/>
-				<stop
-					offset="1"
-					stopColor="#FF9C00"
-				/>
-			</linearGradient>
-			<linearGradient
-				gradientUnits="userSpaceOnUse"
-				id="paint2_linear_2551_76392"
-				x1="14.827"
-				x2="-3.33"
-				y1="18.9735"
-				y2="37.1305"
-			>
-				<stop stopColor="#FF3A44" />
-				<stop
-					offset="1"
-					stopColor="#C31162"
-				/>
-			</linearGradient>
-			<linearGradient
-				gradientUnits="userSpaceOnUse"
-				id="paint3_linear_2551_76392"
-				x1="-2.70284"
-				x2="5.37702"
-				y1="0.672613"
-				y2="8.75243"
-			>
-				<stop stopColor="#32A071" />
-				<stop
-					offset="0.0685"
-					stopColor="#2DA771"
-				/>
-				<stop
-					offset="0.4762"
-					stopColor="#15CF74"
-				/>
-				<stop
-					offset="0.8009"
-					stopColor="#06E775"
-				/>
-				<stop
-					offset="1"
-					stopColor="#00F076"
-				/>
-			</linearGradient>
-		</defs>
-	</svg>
-);