@bethinkpl/design-system 19.0.3 → 20.0.1

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

@@ -14,6 +14,9 @@
 						<ds-icon
 							v-if="iconLeft"
 							class="sectionHeader__icon"
+							:class="{
+								[`-${iconLeftColor}`]: iconLeftColor,
+							}"
 							:icon="iconLeft"
 							:size="iconSize"
 						/>
@@ -24,6 +27,9 @@
 						<ds-icon
 							v-if="iconRight"
 							class="sectionHeader__icon"
+							:class="{
+								[`-${iconRightColor}`]: iconRightColor,
+							}"
 							:icon="iconRight"
 							:size="iconSize"
 						/>
@@ -55,8 +61,8 @@
 				class="sectionHeader__supportingText"
 				:class="{
 					'-withoutPadding':
-						!divider ||
-						(!divider && mobileLayout === SECTION_HEADER_MOBILE_LAYOUTS.HORIZONTAL),
+						!hasDivider ||
+						(!hasDivider && mobileLayout === SECTION_HEADER_MOBILE_LAYOUTS.HORIZONTAL),
 				}"
 				>{{ supportingText }}
 			</div>
@@ -64,20 +70,21 @@
 			<div
 				v-if="$slots.default && showSlot"
 				class="sectionHeader__slotVertical"
-				:class="{ '-withoutPadding': !divider }"
+				:class="{ '-withoutPadding': !hasDivider }"
 			>
 				<slot />
 			</div>
 		</div>
-		<ds-divider v-if="divider" />
+		<ds-divider v-if="hasDivider" />
 	</div>
 </template>
 
 <style scoped lang="scss">
 @import '../../../../styles/settings/colors/tokens';
-@import '../../../../styles/settings/typography/tokens';
+@import '../../../../styles/settings/icons';
 @import '../../../../styles/settings/media-queries';
 @import '../../../../styles/settings/spacings';
+@import '../../../../styles/settings/typography/tokens';
 
 .sectionHeader {
 	$root: &;
@@ -121,6 +128,10 @@
 		}
 	}
 
+	&__icon {
+		color: $color-neutral-icon;
+	}
+
 	&.-expandable &__header {
 		cursor: pointer;
 
@@ -135,15 +146,21 @@
 		}
 	}
 
+	&__icon,
+	&.-size-xx-small &__icon {
+		@include coloredIcon();
+	}
+
+	&.-expandable &__header:hover &__icon,
+	&.-expandable.-size-xx-small &__header:hover &__icon {
+		@include coloredIcon('hovered');
+	}
+
 	&__titleWrapper {
 		align-items: center;
 		display: flex;
 	}
 
-	&__icon {
-		color: $color-neutral-icon;
-	}
-
 	&__titleContainer {
 		display: flex;
 		flex-direction: column;
@@ -238,6 +255,38 @@
 		}
 	}
 
+	&.-size-xx-small {
+		#{$root}__main {
+			padding: $space-xxxxxs 0;
+		}
+
+		#{$root}__titleWrapper {
+			gap: $space-xxxs;
+		}
+
+		#{$root}__header {
+			@include info-s-extensive-bold-uppercase;
+		}
+
+		#{$root}__icon {
+			color: $color-neutral-icon-weak;
+		}
+
+		#{$root}__title {
+			color: $color-neutral-text-weak;
+		}
+
+		&.-expandable #{$root}__header:hover {
+			#{$root}__icon {
+				color: $color-neutral-icon-weak-hovered;
+			}
+
+			#{$root}__title {
+				color: $color-neutral-text-weak-hovered;
+			}
+		}
+	}
+
 	&__slotHorizontal {
 		display: none;
 		flex-shrink: 0;
@@ -273,7 +322,12 @@
 </style>
 
 <script lang="ts">
-import { SECTION_HEADER_MOBILE_LAYOUTS, SECTION_HEADER_SIZES } from './SectionHeader.consts';
+import {
+	SECTION_HEADER_MOBILE_LAYOUTS,
+	SECTION_HEADER_SIZES,
+	SECTION_HEADER_ICON_COLORS,
+	SectionHeaderIconColor,
+} from './SectionHeader.consts';
 import DsIcon, { ICON_SIZES, IconItem, ICONS } from '../../Icons/Icon';
 import DsIconButton, { ICON_BUTTON_COLORS, ICON_BUTTON_SIZES } from '../../Buttons/IconButton';
 import DsDivider from '../../Divider';
@@ -302,6 +356,13 @@ export default {
 				return Object.values(ICONS).includes(toRaw(iconLeft));
 			},
 		},
+		iconLeftColor: {
+			type: String as () => SectionHeaderIconColor,
+			default: null,
+			validator(iconLeftColor: SectionHeaderIconColor) {
+				return Object.values(SECTION_HEADER_ICON_COLORS).includes(toRaw(iconLeftColor));
+			},
+		},
 		iconRight: {
 			type: Object as () => IconItem,
 			default: null,
@@ -309,6 +370,13 @@ export default {
 				return Object.values(ICONS).includes(toRaw(iconRight));
 			},
 		},
+		iconRightColor: {
+			type: String as () => SectionHeaderIconColor,
+			default: null,
+			validator(iconRightColor: SectionHeaderIconColor) {
+				return Object.values(SECTION_HEADER_ICON_COLORS).includes(toRaw(iconRightColor));
+			},
+		},
 		isExpanded: {
 			type: Boolean,
 			default: false,
@@ -336,7 +404,7 @@ export default {
 			type: String,
 			default: null,
 		},
-		divider: {
+		hasDivider: {
 			type: Boolean,
 			default: true,
 		},
@@ -346,6 +414,8 @@ export default {
 			validator: (value) => Object.values(SECTION_HEADER_MOBILE_LAYOUTS).includes(value),
 		},
 	},
+	// TODO fix me when touching this file
+	// eslint-disable-next-line vue/require-emit-validator
 	emits: ['info-click', 'update:isExpanded'],
 	data() {
 		return {
@@ -354,6 +424,7 @@ export default {
 			ICON_BUTTON_SIZES: Object.freeze(ICON_BUTTON_SIZES),
 			ICON_BUTTON_COLORS: Object.freeze(ICON_BUTTON_COLORS),
 			SECTION_HEADER_MOBILE_LAYOUTS: Object.freeze(SECTION_HEADER_MOBILE_LAYOUTS),
+			isExpandedInternal: false,
 		};
 	},
 	computed: {
@@ -377,6 +448,16 @@ export default {
 			return ICON_SIZES.XX_SMALL;
 		},
 	},
+	watch: {
+		isExpanded: {
+			handler(isExpanded) {
+				if (isExpanded !== this.isExpandedInternal) {
+					this.isExpandedInternal = isExpanded;
+				}
+			},
+			immediate: true,
+		},
+	},
 	methods: {
 		onInfoClicked(): void {
 			this.$emit('info-click');
@@ -385,7 +466,8 @@ export default {
 			if (!this.isExpandable) {
 				return;
 			}
-			this.$emit('update:isExpanded', !this.isExpanded);
+			this.isExpandedInternal = !this.isExpandedInternal;
+			this.$emit('update:isExpanded', this.isExpandedInternal);
 		},
 	},
 };

package/lib/js/components/Icons/Icon/Icon.consts.ts

@@ -5,6 +5,24 @@ import CommentsCheck from '../../../../images/icons/comments-check.svg';
 import { FONTAWESOME_ICONS } from '../../../icons/fontawesome';
 import { Value } from '../../../utils/type.utils';
 
+export const ICON_COLORS = {
+	ACCENT: 'accent',
+	DANGER: 'danger',
+	DEFAULT: 'default',
+	FAIL: 'fail',
+	INFO: 'info',
+	INVERTED: 'inverted',
+	NEUTRAL: 'neutral',
+	NEUTRAL_STRONG: 'neutralStrong',
+	NEUTRAL_WEAK: 'neutralWeak',
+	PRIMARY: 'primary',
+	PRIMARY_WEAK: 'primaryWeak',
+	SUCCESS: 'success',
+	WARNING: 'warning',
+};
+
+export type IconColor = Value<typeof ICON_COLORS>;
+
 export const ICON_SIZES = {
 	XXX_SMALL: 'xxx-small',
 	XX_SMALL: 'xx-small',

package/lib/js/components/Layouts/ThreeColumnLayout/ThreeColumnLayout.vue

@@ -235,6 +235,8 @@ export default {
 			default: false,
 		},
 	},
+	// TODO fix me when touching this file
+	// eslint-disable-next-line vue/require-emit-validator
 	emits: ['overlay-clicked'],
 	data() {
 		return {

package/lib/js/components/Modal/Modal.vue

@@ -117,6 +117,8 @@ export default {
 			default: false,
 		},
 	},
+	// TODO fix me when touching this file
+	// eslint-disable-next-line vue/require-emit-validator
 	emits: ['close-modal'],
 	data() {
 		return {

package/lib/js/components/Modals/Modal/Modal.vue

@@ -312,10 +312,10 @@ $image-height-small: 140px;
 
 <script lang="ts">
 import FeatureIcon from '../../Icons/FeatureIcon/FeatureIcon.vue';
-import { MODAL_SIZES, MODAL_HEADER_TITLE_SIZES } from './Modal.consts';
-import { ICONS, ICON_SIZES } from '../../Icons/Icon';
+import { MODAL_HEADER_TITLE_SIZES, MODAL_SIZES } from './Modal.consts';
+import { ICON_SIZES, ICONS } from '../../Icons/Icon';
 import { FEATURE_ICON_COLOR, FEATURE_ICON_SIZES } from '../../Icons/FeatureIcon';
-import WnlButton, { BUTTON_COLORS, BUTTON_TYPES, BUTTON_ELEVATIONS } from '../../Buttons/Button';
+import WnlButton, { BUTTON_COLORS, BUTTON_ELEVATIONS, BUTTON_TYPES } from '../../Buttons/Button';
 import WnlIconButton, { ICON_BUTTON_COLORS } from '../../Buttons/IconButton';
 import { toRaw } from 'vue';
 
@@ -405,6 +405,8 @@ export default {
 			default: null,
 		},
 	},
+	// TODO fix me when touching this file
+	/* eslint vue/require-emit-validator: 0 */
 	emits: [
 		'tertiary-button-click',
 		'checkbox-change',

package/lib/js/components/Modals/ModalDialog/ModalDialog.vue

@@ -86,6 +86,8 @@ export default {
 			},
 		},
 	},
+	// TODO fix me when touching this file
+	// eslint-disable-next-line vue/require-emit-validator
 	emits: ['close-modal', 'primary-button-click', 'secondary-button-click'],
 	data() {
 		return {

package/lib/js/components/Pagination/Pagination.vue

@@ -306,6 +306,8 @@ export default {
 			required: true,
 		},
 	},
+	// TODO fix me when touching this file
+	// eslint-disable-next-line vue/require-emit-validator
 	emits: ['change-page'],
 	data() {
 		return {

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

@@ -273,6 +273,8 @@ export default {
 			default: '',
 		},
 	},
+	// TODO fix me when touching this file
+	// eslint-disable-next-line vue/require-emit-validator
 	emits: ['button-click'],
 	data() {
 		return {

package/lib/js/components/RichList/RichListItem/RichListItem.vue

@@ -392,6 +392,8 @@ export default {
 			default: null,
 		},
 	},
+	// TODO fix me when touching this file
+	// eslint-disable-next-line vue/require-emit-validator
 	emits: ['icon-click', 'click'],
 	data() {
 		return {

package/lib/js/components/SelectionTile/SelectionTile.vue

@@ -217,6 +217,8 @@ export default defineComponent({
 			},
 		},
 	},
+	// TODO fix me when touching this file
+	// eslint-disable-next-line vue/require-emit-validator
 	emits: ['update:isSelected', 'icon-click'],
 	data() {
 		return {

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

@@ -121,6 +121,8 @@ export default {
 			},
 		},
 	},
+	// TODO fix me when touching this file
+	// eslint-disable-next-line vue/require-emit-validator
 	emits: ['input'],
 	data() {
 		return {

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

@@ -297,6 +297,8 @@ export default {
 			},
 		},
 	},
+	// TODO fix me when touching this file
+	// eslint-disable-next-line vue/require-emit-validator
 	emits: ['elaboration-change', 'select-change'],
 	data() {
 		return {

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

@@ -50,6 +50,8 @@ export default {
 			default: false,
 		},
 	},
+	// TODO fix me when touching this file
+	// eslint-disable-next-line vue/require-emit-validator
 	emits: ['input'],
 	watch: {
 		value() {

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

@@ -0,0 +1,29 @@
+import { Value } from '../../utils/type.utils';
+
+export const SWITCH_SIZES = {
+	SMALL: 'small',
+	MEDIUM: 'medium',
+} as const;
+
+export type SwitchSize = Value<typeof SWITCH_SIZES>;
+
+export const SWITCH_RADIUSES = {
+	CAPSULE: 'capsule',
+	ROUNDED: 'rounded',
+} as const;
+
+export type SwitchRadius = Value<typeof SWITCH_RADIUSES>;
+
+export const SWITCH_STATE = {
+	DEFAULT: 'default',
+	DISABLED: 'disabled',
+} as const;
+
+export type SwitchState = typeof SWITCH_STATE[keyof typeof SWITCH_STATE];
+
+export const SWITCH_SIDE = {
+	LEFT: 'left',
+	RIGHT: 'right',
+} as const;
+
+export type SwitchSelection = typeof SWITCH_SIDE[keyof typeof SWITCH_SIDE];

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

@@ -0,0 +1,98 @@
+import { Args, ArgTypes, Meta, StoryFn } from '@storybook/vue3';
+import DsSwitch from './Switch.vue';
+import Icon, { ICONS } from '../Icons/Icon';
+import { SWITCH_RADIUSES, SWITCH_SIDE, SWITCH_SIZES, SWITCH_STATE } from './Switch.consts';
+
+export default {
+	title: 'Components/Switch',
+	component: DsSwitch,
+} as Meta<typeof DsSwitch>;
+
+const StoryTemplate: StoryFn<typeof DsSwitch> = (args, { updateArgs }) => ({
+	components: {
+		DsSwitch,
+		Icon,
+	},
+	setup() {
+		return { ...args };
+	},
+	methods: {
+		onSelectedUpdated(side) {
+			console.log(side);
+		},
+	},
+	data() {
+		return {
+			ICONS: Object.freeze(ICONS),
+		};
+	},
+	template: `
+		<div style="width: 500px; height: 300px; padding: 10px; border: 1px solid var(--raw-gray-100); position:relative">
+			<ds-switch
+				:size="size"
+				:radius="radius"
+				:icon-left="ICONS[iconLeft]"
+				:icon-right="ICONS[iconRight]"
+				:label-left="labelLeft"
+				:label-right="labelRight"
+				:state="state"
+				:selectedSide="selectedSide"
+				@update:selectedSide="onSelectedUpdated"
+			/>
+		</div>
+	`,
+});
+
+export const Interactive = StoryTemplate.bind({});
+
+const args = {
+	size: SWITCH_SIZES.MEDIUM,
+	radius: SWITCH_RADIUSES.CAPSULE,
+	iconLeft: null,
+	iconRight: null,
+	labelLeft: 'Left option',
+	labelRight: 'Right option',
+	state: SWITCH_STATE.DEFAULT,
+	selectedSide: SWITCH_SIDE.LEFT,
+} as Args;
+
+const argTypes = {
+	size: {
+		control: { type: 'select', options: Object.values(SWITCH_SIZES) },
+		defaultValue: SWITCH_SIZES.MEDIUM,
+	},
+	radius: {
+		control: { type: 'select', options: Object.values(SWITCH_RADIUSES) },
+		defaultValue: SWITCH_RADIUSES.CAPSULE,
+	},
+	iconLeft: {
+		control: { type: 'select', options: [null, ...Object.keys(ICONS)] },
+		defaultValue: null,
+	},
+	iconRight: {
+		control: { type: 'select', options: [null, ...Object.keys(ICONS)] },
+		defaultValue: null,
+	},
+	state: {
+		control: { type: 'select', options: Object.values(SWITCH_STATE) },
+		defaultValue: SWITCH_STATE.DEFAULT,
+	},
+	selectedSide: {
+		control: { type: 'select', options: Object.values(SWITCH_SIDE) },
+		defaultValue: SWITCH_SIDE.LEFT,
+	},
+} as ArgTypes;
+
+Interactive.argTypes = argTypes;
+
+Interactive.args = args;
+
+Interactive.parameters = {
+	actions: {
+		handles: ['updated:selectedSide'],
+	},
+	design: {
+		type: 'figma',
+		url: 'https://www.figma.com/file/izQdYyiBR1GQgFkaOIfIJI/LMS---DS-Components?type=design&node-id=7270-124052&mode=design&t=cVof0yT3M88A1z0U-0',
+	},
+};