@bethinkpl/design-system 16.2.1 → 16.3.0

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

@@ -0,0 +1,395 @@
+<template>
+	<div
+		class="sectionHeader"
+		:class="{
+			'-expandable': isExpandable,
+			'-horizontal': mobileLayout === SECTION_HEADER_MOBILE_LAYOUTS.HORIZONTAL,
+			[sizeClass]: true,
+		}"
+	>
+		<div class="sectionHeader__wrapper">
+			<div class="sectionHeader__main">
+				<div class="sectionHeader__header">
+					<div class="sectionHeader__titleWrapper" @click="onTitleWrapperClicked">
+						<ds-icon
+							v-if="iconLeft"
+							class="sectionHeader__icon"
+							:icon="iconLeft"
+							:size="iconSize"
+						/>
+						<div class="sectionHeader__titleContainer">
+							<div v-if="eyebrow" class="sectionHeader__eyebrow">{{ eyebrow }}</div>
+							<div class="sectionHeader__title">{{ title }}</div>
+						</div>
+						<ds-icon
+							v-if="iconRight"
+							class="sectionHeader__icon"
+							:icon="iconRight"
+							:size="iconSize"
+						/>
+						<ds-icon
+							v-if="isExpandable"
+							class="sectionHeader__icon"
+							:icon="ICONS.FA_CHEVRON_DOWN"
+							:rotation="chevronRotation"
+							:size="iconSize"
+						/>
+					</div>
+					<div v-if="info" class="sectionHeader__info">
+						<ds-icon-button
+							:icon="ICONS.FA_CIRCLE_QUESTION"
+							:size="ICON_BUTTON_SIZES.X_SMALL"
+							:color="ICON_BUTTON_COLORS.NEUTRAL_WEAK"
+							:touchable="false"
+							@click.prevent.stop="onInfoClicked"
+						/>
+					</div>
+				</div>
+				<div v-if="$slots.default && showSlot" class="sectionHeader__slotHorizontal">
+					<slot />
+				</div>
+			</div>
+
+			<div
+				v-if="supportingText"
+				class="sectionHeader__supportingText"
+				:class="{
+					'-withoutPadding':
+						!divider ||
+						(!divider && mobileLayout === SECTION_HEADER_MOBILE_LAYOUTS.HORIZONTAL),
+				}"
+				>{{ supportingText }}
+			</div>
+
+			<div
+				v-if="$slots.default && showSlot"
+				class="sectionHeader__slotVertical"
+				:class="{ '-withoutPadding': !divider }"
+			>
+				<slot />
+			</div>
+		</div>
+		<ds-divider v-if="divider" />
+	</div>
+</template>
+
+<style scoped lang="scss">
+@import '../../../../styles/settings/colors/tokens';
+@import '../../../../styles/settings/typography/tokens';
+@import '../../../../styles/settings/media-queries';
+@import '../../../../styles/settings/spacings';
+
+.sectionHeader {
+	$root: &;
+
+	padding: 0;
+
+	&__wrapper {
+		display: flex;
+		flex-direction: column;
+		padding: 0;
+	}
+
+	&__main {
+		align-items: center;
+		display: flex;
+		flex-direction: row;
+		gap: $space-xxs;
+		justify-content: space-between;
+		padding: $space-xxxxs 0;
+	}
+
+	&__supportingText {
+		@include text-s-compact-regular;
+
+		color: $color-neutral-text;
+		padding: 0 0 $space-xs;
+
+		&.-withoutPadding {
+			padding: 0;
+		}
+	}
+
+	&__header {
+		align-items: center;
+		display: flex;
+		gap: $space-xxs;
+		width: 100%;
+
+		@media #{breakpoint-s()} {
+			width: auto;
+		}
+	}
+
+	&.-expandable &__header {
+		cursor: pointer;
+
+		&:hover {
+			#{$root}__icon {
+				color: $color-neutral-icon-hovered;
+			}
+
+			#{$root}__title {
+				color: $color-neutral-text-strong-hovered;
+			}
+		}
+	}
+
+	&__titleWrapper {
+		align-items: center;
+		display: flex;
+	}
+
+	&__icon {
+		color: $color-neutral-icon;
+	}
+
+	&__titleContainer {
+		display: flex;
+		flex-direction: column;
+		gap: $space-xxxxxs;
+		padding: $space-xxs 0;
+	}
+
+	&__title {
+		color: $color-neutral-text-strong;
+	}
+
+	&__info {
+		padding: $space-xxxs 0;
+	}
+
+	&__eyebrow {
+		@include info-xs-extensive-bold-uppercase;
+
+		color: $color-neutral-text-weak;
+	}
+
+	&.-size-large {
+		#{$root}__main {
+			padding: $space-xxxxxs 0;
+		}
+
+		#{$root}__header {
+			@include heading-l-default-bold;
+		}
+
+		#{$root}__titleWrapper {
+			gap: $space-xxs;
+		}
+
+		#{$root}__info {
+			padding: $space-xxs 0;
+		}
+
+		#{$root}__eyebrow {
+			@include info-s-extensive-bold-uppercase;
+		}
+	}
+
+	&.-size-medium {
+		#{$root}__header {
+			@include heading-m-default-bold;
+		}
+
+		#{$root}__titleWrapper {
+			gap: $space-xxs;
+		}
+
+		#{$root}__info {
+			padding: $space-xxs 0;
+		}
+
+		#{$root}__eyebrow {
+			@include info-s-extensive-bold-uppercase;
+		}
+	}
+
+	&.-size-small {
+		#{$root}__main {
+			padding: $space-xxxxxs 0;
+		}
+
+		#{$root}__header {
+			@include heading-s-default-bold;
+		}
+
+		#{$root}__titleWrapper {
+			gap: $space-xxxs;
+		}
+
+		#{$root}__info {
+			padding: $space-xxs 0;
+		}
+	}
+
+	&.-size-x-small {
+		#{$root}__main {
+			padding: 0 0;
+		}
+
+		#{$root}__titleContainer {
+			padding: $space-xxxs 0;
+		}
+
+		#{$root}__titleWrapper {
+			gap: $space-xxxs;
+			padding: $space-xxxs 0;
+		}
+
+		#{$root}__header {
+			@include heading-xs-default-bold-uppercase;
+		}
+	}
+
+	&__slotHorizontal {
+		display: none;
+
+		@media #{breakpoint-s()} {
+			display: block;
+		}
+	}
+
+	&__slotVertical {
+		display: block;
+		padding: 0 0 $space-xxxs;
+
+		@media #{breakpoint-s()} {
+			display: none;
+		}
+
+		&.-withoutPadding {
+			padding: 0;
+		}
+	}
+
+	&.-horizontal {
+		#{$root}__slotHorizontal {
+			display: block;
+		}
+
+		#{$root}__slotVertical {
+			display: none;
+		}
+	}
+}
+</style>
+
+<script lang="ts">
+import { SECTION_HEADER_MOBILE_LAYOUTS, SECTION_HEADER_SIZES } 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';
+import { toRaw } from 'vue';
+
+export default {
+	name: 'SectionHeader',
+	components: {
+		DsIcon,
+		DsIconButton,
+		DsDivider,
+	},
+	props: {
+		isExpandable: {
+			type: Boolean,
+			default: false,
+		},
+		hideSlotWhenCollapsed: {
+			type: Boolean,
+			default: false,
+		},
+		iconLeft: {
+			type: Object as () => IconItem,
+			default: null,
+			validator(iconLeft: IconItem) {
+				return Object.values(ICONS).includes(toRaw(iconLeft));
+			},
+		},
+		iconRight: {
+			type: Object as () => IconItem,
+			default: null,
+			validator(iconRight: IconItem) {
+				return Object.values(ICONS).includes(toRaw(iconRight));
+			},
+		},
+		isExpanded: {
+			type: Boolean,
+			default: false,
+		},
+		info: {
+			type: Boolean,
+			default: false,
+		},
+		size: {
+			type: String,
+			default: SECTION_HEADER_SIZES.MEDIUM,
+			validator(size) {
+				return Object.values(SECTION_HEADER_SIZES).includes(size);
+			},
+		},
+		title: {
+			type: String,
+			required: true,
+		},
+		eyebrow: {
+			type: String,
+			default: '',
+		},
+		supportingText: {
+			type: String,
+			default: null,
+		},
+		divider: {
+			type: Boolean,
+			default: true,
+		},
+		mobileLayout: {
+			type: String,
+			default: SECTION_HEADER_MOBILE_LAYOUTS.VERTICAL,
+			validator: (value) => Object.values(SECTION_HEADER_MOBILE_LAYOUTS).includes(value),
+		},
+	},
+	emits: ['info-click', 'update:isExpanded'],
+	data() {
+		return {
+			ICONS: Object.freeze(ICONS),
+			ICON_SIZES: Object.freeze(ICON_SIZES),
+			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),
+		};
+	},
+	computed: {
+		chevronRotation(): number | undefined {
+			return this.isExpanded ? 180 : undefined;
+		},
+		showSlot(): boolean {
+			return this.isExpanded || !this.hideSlotWhenCollapsed;
+		},
+		sizeClass(): string {
+			return `-size-${this.size}`;
+		},
+		iconSize(): string {
+			if (
+				this.size === SECTION_HEADER_SIZES.MEDIUM ||
+				this.size === SECTION_HEADER_SIZES.LARGE
+			) {
+				return ICON_SIZES.X_SMALL;
+			}
+
+			return ICON_SIZES.XX_SMALL;
+		},
+	},
+	methods: {
+		onInfoClicked(): void {
+			this.$emit('info-click');
+		},
+		onTitleWrapperClicked(): void {
+			if (!this.isExpandable) {
+				return;
+			}
+			this.$emit('update:isExpanded', !this.isExpanded);
+		},
+	},
+};
+</script>

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

@@ -0,0 +1,5 @@
+export const SECTION_TITLE_SIZES = {
+	XS: 'xs',
+};
+
+export type SectionTitleSize = typeof SECTION_TITLE_SIZES[keyof typeof SECTION_TITLE_SIZES];

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

@@ -0,0 +1,41 @@
+import SectionTitle from './SectionTitle.vue';
+import { SECTION_TITLE_SIZES } from './SectionTitle.consts';
+
+import { Args, ArgTypes, Meta, StoryFn } from '@storybook/vue3';
+
+export default {
+	title: 'Components/SectionTitle',
+	component: SectionTitle,
+} as Meta<typeof SectionTitle>;
+
+const StoryTemplate: StoryFn<typeof SectionTitle> = (args, { updateArgs }) => ({
+	components: { SectionTitle },
+	setup() {
+		return { ...args };
+	},
+	template: `<section-title :size="size" :supporting-text="supportingText" :title-text="titleText" />`,
+});
+
+export const Interactive = StoryTemplate.bind({});
+
+const args = {
+	supportingText: '',
+	titleText: 'Title',
+} as Args;
+
+const argTypes = {
+	size: {
+		control: { type: 'select', options: Object.values(SECTION_TITLE_SIZES) },
+		defaultValue: SECTION_TITLE_SIZES.XS,
+	},
+} as ArgTypes;
+
+Interactive.argTypes = argTypes;
+Interactive.args = args;
+
+Interactive.parameters = {
+	design: {
+		type: 'figma',
+		url: 'https://www.figma.com/file/izQdYyiBR1GQgFkaOIfIJI/LMS---DS-Components?node-id=6785-111037&t=2Z2n2tIHRHEsWjoW-4',
+	},
+};

package/lib/js/components/SectionTitle/SectionTitle.vue

@@ -0,0 +1,58 @@
+<template>
+	<div class="sectionTitle">
+		<div class="sectionTitle__title">{{ titleText }}</div>
+		<div class="sectionTitle__supportingText">{{ supportingText }}</div>
+	</div>
+</template>
+
+<style scoped lang="scss">
+@import '../../../styles/settings/colors/tokens';
+@import '../../../styles/settings/typography/tokens';
+@import '../../../styles/settings/spacings';
+
+.sectionTitle {
+	display: flex;
+	flex-direction: column;
+	gap: $space-xxxxs;
+	overflow-wrap: break-word;
+	padding: $space-xxs 0;
+
+	&__title {
+		@include heading-xs-default-bold;
+
+		color: $color-neutral-text-heavy;
+	}
+
+	&__supportingText {
+		@include info-s-default-regular;
+
+		color: $color-neutral-text-weak;
+	}
+}
+</style>
+
+<script lang="ts">
+import { SECTION_TITLE_SIZES } from './SectionTitle.consts';
+
+export default {
+	name: 'SectionTitle',
+	props: {
+		// It's unused for now but we want to have the prop already
+		size: {
+			type: String,
+			default: SECTION_TITLE_SIZES.XS,
+			validator(size) {
+				return Object.values(SECTION_TITLE_SIZES).includes(size);
+			},
+		},
+		supportingText: {
+			type: String,
+			default: null,
+		},
+		titleText: {
+			type: String,
+			required: true,
+		},
+	},
+};
+</script>

package/lib/js/components/Tile/Tile.sb.shared.ts

@@ -0,0 +1,54 @@
+import { ICONS } from '../Icons/Icon';
+import { TILE_COLORS, TILE_STATES } from './Tile.consts';
+import { Args, ArgTypes } from '@storybook/vue3';
+
+export const template = (componentTag: string) => `
+		<${componentTag}
+			:additional-text="additionalText"
+			:color="color"
+			:eyebrow-ellipsis="eyebrowEllipsis"
+			:eyebrow-text="eyebrowText"
+			:icon-left="ICONS[iconLeft]"
+			:icon-right="ICONS[iconRight]"
+			:interactive="interactive"
+			:is-eyebrow-text-uppercase="isEyebrowTextUppercase"
+			:state="state"
+			:text-ellipsis="textEllipsis"
+			:text="text"
+		/>`;
+
+export const data = () => ({
+	ICONS: Object.freeze(ICONS),
+});
+
+export const args = {
+	interactive: true,
+	iconLeft: null,
+	iconRight: null,
+	text: 'this is a text text',
+	eyebrowText: 'this is an eyebrowText text',
+	additionalText: '',
+	isEyebrowTextUppercase: false,
+	state: TILE_STATES.DEFAULT,
+	eyebrowEllipsis: true,
+	textEllipsis: true,
+} as Args;
+
+export const argTypes = {
+	iconLeft: {
+		control: { type: 'select', options: [null, ...Object.keys(ICONS)] },
+		defaultValue: null,
+	},
+	iconRight: {
+		control: { type: 'select', options: [null, ...Object.keys(ICONS)] },
+		defaultValue: null,
+	},
+	color: {
+		control: { type: 'select', options: [...Object.values(TILE_COLORS)] },
+		defaultValue: TILE_COLORS.NEUTRAL,
+	},
+	state: {
+		control: { type: 'select', options: [...Object.values(TILE_STATES)] },
+		defaultValue: TILE_STATES.DEFAULT,
+	},
+} as ArgTypes;

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

@@ -1,8 +1,8 @@
 import Tile from './Tile.vue';
-import { TILE_COLORS, TILE_STATES } from './Tile.consts';
-import { ICONS } from '../Icons/Icon';
+import { TILE_STATES } from './Tile.consts';
 
-import { Args, ArgTypes, Meta, StoryFn } from '@storybook/vue3';
+import { Args, Meta, StoryFn } from '@storybook/vue3';
+import { args, argTypes, data, template } from './Tile.sb.shared';
 
 export default {
 	title: 'Components/Tile',
@@ -14,49 +14,12 @@ const StoryTemplate: StoryFn<typeof Tile> = (args) => ({
 	setup() {
 		return { ...args };
 	},
-	template:
-		'<tile :text="text" :eyebrowText="eyebrowText" :interactive="interactive" :iconLeft="ICONS[iconLeft]" :additionalText="additionalText" :iconRight="ICONS[iconRight]" :color="color" :is-eyebrow-text-uppercase="isEyebrowTextUppercase" :state="state" :eyebrow-ellipsis="eyebrowEllipsis" :text-ellipsis="textEllipsis"/>',
-	data() {
-		return {
-			ICONS: Object.freeze(ICONS),
-		};
-	},
+	template: template('tile'),
+	data,
 });
 
 export const Interactive = StoryTemplate.bind({});
 
-const args = {
-	interactive: true,
-	iconLeft: null,
-	iconRight: null,
-	text: 'this is a text text',
-	eyebrowText: 'this is an eyebrowText text',
-	additionalText: '',
-	isEyebrowTextUppercase: false,
-	state: TILE_STATES.DEFAULT,
-	eyebrowEllipsis: true,
-	textEllipsis: true,
-} as Args;
-
-const argTypes = {
-	iconLeft: {
-		control: { type: 'select', options: [null, ...Object.keys(ICONS)] },
-		defaultValue: null,
-	},
-	iconRight: {
-		control: { type: 'select', options: [null, ...Object.keys(ICONS)] },
-		defaultValue: null,
-	},
-	color: {
-		control: { type: 'select', options: [...Object.values(TILE_COLORS)] },
-		defaultValue: TILE_COLORS.NEUTRAL,
-	},
-	state: {
-		control: { type: 'select', options: [...Object.values(TILE_STATES)] },
-		defaultValue: TILE_STATES.DEFAULT,
-	},
-} as ArgTypes;
-
 Interactive.argTypes = argTypes;
 Interactive.args = args;
 
@@ -75,35 +38,13 @@ const StoryStaticTemplate: StoryFn<typeof Tile> = (args) => ({
 	setup() {
 		return { ...args };
 	},
-	template:
-		'<tile :text="text" :eyebrowText="eyebrowText" :interactive="interactive" :iconLeft="ICONS[iconLeft]" :additionalText="additionalText" :iconRight="ICONS[iconRight]" :color="color" :state="state" />',
-	data() {
-		return {
-			ICONS: Object.freeze(ICONS),
-		};
-	},
+	template: template('tile'),
+	data,
 });
 
 export const Static = StoryStaticTemplate.bind({});
 
-Static.argTypes = {
-	iconLeft: {
-		control: { type: 'select', options: [null, ...Object.keys(ICONS)] },
-		defaultValue: null,
-	},
-	iconRight: {
-		control: { type: 'select', options: [null, ...Object.keys(ICONS)] },
-		defaultValue: null,
-	},
-	color: {
-		control: { type: 'select', options: [null, ...Object.values(TILE_COLORS)] },
-		defaultValue: TILE_COLORS.NEUTRAL,
-	},
-	state: {
-		control: { type: 'select', options: [...Object.values(TILE_STATES)] },
-		defaultValue: TILE_STATES.DEFAULT,
-	},
-} as ArgTypes;
+Static.argTypes = argTypes;
 
 Static.args = {
 	interactive: false,

package/lib/js/index.ts

@@ -40,10 +40,20 @@ export * from './components/SurveyQuestions/SurveyQuestion.consts';
 export * from './components/SurveyQuestions/SurveyQuestion.domain';
 export { default as Ripple } from './components/Ripple';
 export * from './components/Ripple/Ripple.consts';
-export { default as SectionHeader } from './components/SectionHeader';
-export * from './components/SectionHeader/SectionHeader.consts';
+export { default as SectionHeader } from './components/Headers/SectionHeader';
+export * from './components/Headers/SectionHeader/SectionHeader.consts';
+export { default as SectionTitle } from './components/SectionTitle/SectionTitle.vue';
+export * from './components/SectionTitle/SectionTitle.consts';
 export { default as Drawer } from './components/Drawer';
+export { default as DrawerHeader } from './components/Drawer/DrawerHeader';
 export * from './components/Drawer/Drawer.consts';
+export { default as DrawerContent } from './components/Drawer/DrawerContent/DrawerContent.vue';
+export { default as DrawerDivider } from './components/Drawer/DrawerDivider/DrawerDivider.vue';
+export { default as DrawerListItem } from './components/Drawer/DrawerListItem/DrawerListItem.vue';
+export { default as DrawerListItemGroup } from './components/Drawer/DrawerListItemGroup/DrawerListItemGroup.vue';
+export * from './components/Drawer/DrawerListItem/DrawerListItem.consts';
+export { default as DrawerTile } from './components/Drawer/DrawerTile/DrawerTile.vue';
+export { default as DrawerSection } from './components/Drawer/DrawerSection/DrawerSection.vue';
 export { default as Pill } from './components/Pill';
 export * from './components/Pill/Pill.consts';
 export { default as CounterToggle } from './components/Toggles/CounterToggle';
@@ -65,8 +75,8 @@ export { default as IconText } from './components/IconText';
 export * from './components/IconText/IconText.consts';
 export { default as Pagination } from './components/Pagination';
 export * from './components/Pagination/Pagination.consts';
-export { default as OverlayHeader } from './components/OverlayHeader';
-export * from './components/OverlayHeader/OverlayHeader.consts';
+export { default as OverlayHeader } from './components/Headers/OverlayHeader';
+export * from './components/Headers/OverlayHeader/OverlayHeader.consts';
 export { default as Well } from './components/Well';
 export * from './components/Well/Well.consts';
 

package/lib/styles/settings/colors/_tokens-variables.scss

@@ -78,6 +78,8 @@
 	--color-neutral-text-heavy: var(--raw-gray-900);
 	--color-neutral-text-heavy-disabled: var(--raw-gray-400);
 	--color-neutral-text-strong: var(--raw-gray-800);
+	--color-neutral-text-strong-hovered: var(--raw-gray-900);
+	--color-neutral-text-strong-focused: var(--raw-gray-900);
 	--color-neutral-text-strong-disabled: var(--raw-gray-400);
 	--color-neutral-text: var(--raw-gray-700);
 	--color-neutral-text-hovered: var(--raw-gray-900);
@@ -88,6 +90,8 @@
 	--color-neutral-text-weak-focused: var(--raw-gray-700);
 	--color-neutral-text-weak-disabled: var(--raw-gray-400);
 	--color-neutral-icon-strong: var(--raw-gray-800);
+	--color-neutral-icon-strong-hovered: var(--raw-gray-900);
+	--color-neutral-icon-strong-focused: var(--raw-gray-900);
 	--color-neutral-icon-strong-disabled: var(--raw-gray-300);
 	--color-neutral-icon: var(--raw-gray-600);
 	--color-neutral-icon-hovered: var(--raw-gray-800);