@bethinkpl/design-system 16.2.1 → 16.3.0

package/lib/js/components/Drawer/DrawerSection/DrawerSection.vue

@@ -0,0 +1,107 @@
+<template>
+	<div class="drawerSection">
+		<div
+			v-if="title"
+			class="drawerSection__header"
+			:class="{ '-isExpandable': isExpandable }"
+			@click="onHeaderClick"
+		>
+			<div class="drawerSection__headerTitleWrapper">
+				<div class="drawerSection__headerTitle">{{ title }}</div>
+				<ds-icon-button
+					v-if="isExpandable"
+					:color="ICON_BUTTON_COLORS.NEUTRAL"
+					:icon="isExpanded ? ICONS.FA_ANGLE_UP : ICONS.FA_ANGLE_DOWN"
+					:size="ICON_BUTTON_SIZES.X_SMALL"
+					:touchable="false"
+				/>
+			</div>
+			<ds-divider v-if="hasDivider" />
+		</div>
+		<div v-if="isExpanded || !isExpandable">
+			<slot />
+		</div>
+		<div v-if="$slots.uncollapsible"><slot name="uncollapsible" /></div>
+	</div>
+</template>
+
+<style lang="scss" scoped>
+@import '../../../../styles/settings/colors/tokens';
+@import '../../../../styles/settings/spacings';
+@import '../../../../styles/settings/typography/tokens';
+
+.drawerSection {
+	$root: &;
+
+	&__header {
+		&:hover,
+		&:focus {
+			#{$root}__headerTitle {
+				color: $color-neutral-text-weak-hovered;
+			}
+		}
+
+		&.-isExpandable {
+			cursor: pointer;
+		}
+	}
+
+	&__headerTitleWrapper {
+		align-items: center;
+		display: flex;
+		gap: $space-xxs;
+		justify-content: space-between;
+	}
+
+	&__headerTitle {
+		@include info-s-extensive-bold-uppercase;
+
+		color: $color-neutral-text-weak;
+		padding: $space-xxs 0;
+	}
+}
+</style>
+
+<script lang="ts">
+import Divider from '../../Divider';
+import IconButton from '../../Buttons/IconButton/IconButton.vue';
+import { ICONS } from '../../Icons/Icon';
+import { ICON_BUTTON_COLORS, ICON_BUTTON_SIZES } from '../../Buttons/IconButton';
+
+export default {
+	name: 'DrawerSection',
+	components: {
+		DsIconButton: IconButton,
+		DsDivider: Divider,
+	},
+	props: {
+		hasDivider: {
+			type: Boolean,
+			default: true,
+		},
+		isExpandable: {
+			type: Boolean,
+			default: false,
+		},
+		title: {
+			type: String,
+			default: null,
+		},
+	},
+	data() {
+		return {
+			isExpanded: false,
+			ICON_BUTTON_COLORS: Object.freeze(ICON_BUTTON_COLORS),
+			ICON_BUTTON_SIZES: Object.freeze(ICON_BUTTON_SIZES),
+			ICONS: Object.freeze(ICONS),
+		};
+	},
+	methods: {
+		onHeaderClick(): void {
+			if (this.isExpandable) {
+				this.isExpanded = !this.isExpanded;
+			}
+		},
+	},
+};
+</script>

package/lib/js/components/Drawer/DrawerTile/DrawerTile.stories.ts

@@ -0,0 +1,30 @@
+import DrawerTile from './DrawerTile.vue';
+
+import { Meta, StoryFn } from '@storybook/vue3';
+import { args, argTypes, data, template } from '../../Tile/Tile.sb.shared';
+
+export default {
+	title: 'Components/Drawer/DrawerTile',
+	component: DrawerTile,
+} as Meta<typeof DrawerTile>;
+
+const StoryTemplate: StoryFn<typeof DrawerTile> = (args) => ({
+	components: { DrawerTile },
+	setup() {
+		return { ...args };
+	},
+	template: template('drawer-tile'),
+	data,
+});
+
+export const Interactive = StoryTemplate.bind({});
+
+Interactive.argTypes = argTypes;
+Interactive.args = args;
+
+Interactive.parameters = {
+	design: {
+		type: 'figma',
+		url: 'https://www.figma.com/file/izQdYyiBR1GQgFkaOIfIJI/LMS---DS-Components?node-id=6785-111025&t=pzyp7YuJcnGNBfS5-4',
+	},
+};

package/lib/js/components/Drawer/DrawerTile/DrawerTile.vue

@@ -0,0 +1,22 @@
+<template>
+	<ds-tile v-bind="$attrs" class="drawerTile" />
+</template>
+
+<style lang="scss" scoped>
+@import '../../../../styles/settings/spacings';
+
+.drawerTile {
+	padding: $space-xxs 0;
+}
+</style>
+
+<script lang="ts">
+import Tile from '../../Tile/Tile.vue';
+
+export default {
+	name: 'DrawerTile',
+	components: {
+		DsTile: Tile,
+	},
+};
+</script>

package/lib/js/components/{OverlayHeader → Headers/OverlayHeader}/OverlayHeader.stories.ts

@@ -4,7 +4,7 @@ import { Args, ArgTypes, Meta, StoryFn } from '@storybook/vue3';
 import { OVERLAY_HEADER_BORDER_COLORS } from './OverlayHeader.consts';
 
 export default {
-	title: 'Components/OverlayHeader',
+	title: 'Components/Headers/OverlayHeader',
 	component: OverlayHeader,
 } as Meta<typeof OverlayHeader>;
 

package/lib/js/components/{OverlayHeader → Headers/OverlayHeader}/OverlayHeader.vue

@@ -97,11 +97,11 @@
 </template>
 
 <style scoped lang="scss">
-@import '../../../styles/settings/spacings';
-@import '../../../styles/settings/media-queries';
-@import '../../../styles/settings/colors/tokens';
-@import '../../../styles/settings/typography/tokens';
-@import '../../../styles/mixins/flex-overflow-mask';
+@import '../../../../styles/settings/spacings';
+@import '../../../../styles/settings/media-queries';
+@import '../../../../styles/settings/colors/tokens';
+@import '../../../../styles/settings/typography/tokens';
+@import '../../../../styles/mixins/flex-overflow-mask';
 
 .ds-overlayHeader {
 	align-items: center;
@@ -258,11 +258,15 @@
 </style>
 
 <script lang="ts">
-import IconButton from '../Buttons/IconButton/IconButton.vue';
-import DsDivider, { DIVIDER_PROMINENCES } from '../Divider';
-import DsDropdown, { DROPDOWN_PLACEMENTS } from '../Dropdown';
-import { ICON_BUTTON_COLORS, ICON_BUTTON_SIZES, ICON_BUTTON_STATES } from '../Buttons/IconButton';
-import { ICONS } from '../Icons/Icon';
+import IconButton from '../../Buttons/IconButton/IconButton.vue';
+import DsDivider, { DIVIDER_PROMINENCES } from '../../Divider';
+import DsDropdown, { DROPDOWN_PLACEMENTS } from '../../Dropdown';
+import {
+	ICON_BUTTON_COLORS,
+	ICON_BUTTON_SIZES,
+	ICON_BUTTON_STATES,
+} from '../../Buttons/IconButton';
+import { ICONS } from '../../Icons/Icon';
 import { OVERLAY_HEADER_BORDER_COLORS } from './OverlayHeader.consts';
 
 export default {

package/lib/js/components/Headers/PageHeader/PageHeader.consts.ts

@@ -0,0 +1,4 @@
+export const PAGE_HEADER_MOBILE_LAYOUTS = {
+	VERTICAL: 'vertical',
+	HORIZONTAL: 'horizontal',
+} as const;

package/lib/js/components/Headers/PageHeader/PageHeader.stories.ts

@@ -0,0 +1,75 @@
+import PageHeader from './PageHeader.vue';
+
+import { Args, ArgTypes, Meta, StoryFn } from '@storybook/vue3';
+import { PAGE_HEADER_MOBILE_LAYOUTS } from './PageHeader.consts';
+
+export default {
+	title: 'Components/Headers/PageHeader',
+	component: PageHeader,
+} as Meta<typeof PageHeader>;
+
+const StoryTemplate: StoryFn<typeof PageHeader> = (args) => ({
+	components: { PageHeader },
+	setup() {
+		return { ...args };
+	},
+	template:
+		'<page-header' +
+		' :page-title="pageTitle"' +
+		' :supporting-info="supportingInfo"' +
+		' :mobile-layout="mobileLayout"' +
+		' :divider="divider"' +
+		'>' +
+		'<template v-if="breadcrumbs" #breadcrumbs><div v-html="breadcrumbs" /></template>' +
+		'<template v-if="actions" #actions><div v-html="actions" /></template>' +
+		'</page-header>',
+});
+
+export const Interactive = StoryTemplate.bind({});
+
+const args = {
+	breadcrumbs: '',
+	actions: '',
+	pageTitle: 'Page title',
+	supportingInfo: 'Supporting info write here',
+	divider: true,
+	mobileLayout: 'vertical',
+} as Args;
+
+const argTypes = {
+	breadcrumbs: {
+		control: { type: 'text' },
+	},
+	actions: {
+		control: { type: 'text' },
+	},
+	pageTitle: {
+		control: { type: 'text' },
+	},
+	supportingInfo: {
+		control: { type: 'text' },
+	},
+	divider: {
+		control: { type: 'boolean' },
+		defaultValue: true,
+	},
+	mobileLayout: {
+		control: {
+			type: 'select',
+			options: Object.values(PAGE_HEADER_MOBILE_LAYOUTS),
+			defaultValue: PAGE_HEADER_MOBILE_LAYOUTS.VERTICAL,
+		},
+	},
+} as ArgTypes;
+
+Interactive.argTypes = argTypes;
+Interactive.args = args;
+Interactive.parameters = {
+	actions: {
+		handles: ['click'],
+	},
+	design: {
+		type: 'figma',
+		url: 'https://www.figma.com/file/izQdYyiBR1GQgFkaOIfIJI/LMS---DS-Components?type=design&node-id=6984-129711&t=ivzu5dM9vSgW20Re-0',
+	},
+};

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

@@ -0,0 +1,125 @@
+<template>
+	<div
+		class="pageHeader"
+		:class="{ '-horizontal': mobileLayout === PAGE_HEADER_MOBILE_LAYOUTS.HORIZONTAL }"
+	>
+		<div class="pageHeader__wrapper">
+			<div v-if="$slots.breadcrumbs" class="pageHeader__breadcrumbs">
+				<slot name="breadcrumbs" />
+			</div>
+			<div class="pageHeader__contentWrapper">
+				<div class="pageHeader__textWrapper">
+					<div class="pageHeader__title">{{ pageTitle }}</div>
+					<div v-if="supportingInfo" class="pageHeader__supportingText"
+						>{{ supportingInfo }}
+					</div>
+				</div>
+
+				<div v-if="$slots.actions" class="pageHeader__actions">
+					<slot name="actions" />
+				</div>
+			</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';
+
+.pageHeader {
+	$root: &;
+
+	padding: 0;
+
+	&__wrapper {
+		align-items: flex-start;
+		display: flex;
+		flex-direction: column;
+		gap: $space-xxs;
+		padding: $space-xxs 0;
+	}
+
+	&__contentWrapper {
+		align-items: flex-start;
+		display: flex;
+		flex-direction: column;
+		gap: $space-xxs;
+		justify-content: space-between;
+		padding: 0;
+		width: 100%;
+
+		@media #{breakpoint-s()} {
+			align-items: center;
+			flex-direction: row;
+		}
+	}
+
+	&__textWrapper {
+		align-items: flex-start;
+		display: flex;
+		flex-direction: column;
+		gap: $space-xxxxs;
+		justify-content: center;
+		padding: $space-xxxxs 0;
+	}
+
+	&__title {
+		@include pageHeading-s-default-bold;
+
+		color: $color-default-text;
+	}
+
+	&__supportingText {
+		@include info-m-default-regular;
+
+		color: $color-neutral-text;
+	}
+
+	&.-horizontal {
+		#{$root}__contentWrapper {
+			align-items: center;
+			flex-direction: row;
+		}
+	}
+}
+</style>
+
+<script lang="ts">
+import DsDivider from '../../Divider';
+import { PAGE_HEADER_MOBILE_LAYOUTS } from './PageHeader.consts';
+
+export default {
+	name: 'PageHeader',
+	components: {
+		DsDivider,
+	},
+	props: {
+		pageTitle: {
+			type: String,
+			required: true,
+		},
+		supportingInfo: {
+			type: String,
+			default: null,
+		},
+		divider: {
+			type: Boolean,
+			default: true,
+		},
+		mobileLayout: {
+			type: String,
+			default: PAGE_HEADER_MOBILE_LAYOUTS.VERTICAL,
+			validator: (value) => Object.values(PAGE_HEADER_MOBILE_LAYOUTS).includes(value),
+		},
+	},
+	data() {
+		return {
+			PAGE_HEADER_MOBILE_LAYOUTS: Object.freeze(PAGE_HEADER_MOBILE_LAYOUTS),
+		};
+	},
+};
+</script>

package/lib/js/components/Headers/PageHeader/index.ts

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

package/lib/js/components/Headers/SectionHeader/SectionHeader.consts.ts

@@ -0,0 +1,10 @@
+export const SECTION_HEADER_SIZES = {
+	X_SMALL: 'x-small',
+	SMALL: 'small',
+	MEDIUM: 'medium',
+	LARGE: 'large',
+};
+export const SECTION_HEADER_MOBILE_LAYOUTS = {
+	VERTICAL: 'vertical',
+	HORIZONTAL: 'horizontal',
+} as const;

package/lib/js/components/{SectionHeader → Headers/SectionHeader}/SectionHeader.stories.ts

@@ -1,11 +1,11 @@
 import SectionHeader from './SectionHeader.vue';
-import { SECTION_HEADER_SIZES } from './SectionHeader.consts';
-import { ICONS } from '../Icons/Icon';
+import { SECTION_HEADER_MOBILE_LAYOUTS, SECTION_HEADER_SIZES } from './SectionHeader.consts';
+import { ICONS } from '../../Icons/Icon';
 
 import { Args, ArgTypes, Meta, StoryFn } from '@storybook/vue3';
 
 export default {
-	title: 'Components/SectionHeader',
+	title: 'Components/Headers/SectionHeader',
 	component: SectionHeader,
 } as Meta<typeof SectionHeader>;
 
@@ -28,13 +28,18 @@ const StoryTemplate: StoryFn<typeof SectionHeader> = (args, { updateArgs }) => (
 	},
 	template:
 		'<section-header' +
-		' :expandable="expandable"' +
+		' :is-expandable="isExpandable"' +
 		' :hide-slot-when-collapsed="hideSlotWhenCollapsed"' +
 		' :icon-left="ICONS[iconLeft]"' +
+		' :icon-right="ICONS[iconRight]"' +
 		' :is-expanded="isExpanded"' +
 		' :size="size"' +
-		' :slot-padding="slotPadding"' +
+		' :info="info"' +
 		' :title="title"' +
+		' :eyebrow="eyebrow"' +
+		' :divider="divider"' +
+		' :mobile-layout="mobileLayout"' +
+		' :supportingText="supportingText"' +
 		' @update:isExpanded="onIsExpandedUpdated"' +
 		'>' +
 		'<div style="border: 1px solid;">Slot content</div>' +
@@ -44,13 +49,19 @@ const StoryTemplate: StoryFn<typeof SectionHeader> = (args, { updateArgs }) => (
 export const Interactive = StoryTemplate.bind({});
 
 const args = {
-	expandable: false,
-	hideSlotWhenCollapsed: false,
-	iconLeft: null,
+	size: SECTION_HEADER_SIZES.MEDIUM,
+	title: 'Section Header',
+	supportingText:
+		'Supporting text. Et doloribus aspernatur suscipit provident maiores. Natus natus et pariatur. Eligendi illo quo esse. Tenetur ad neque veniam.',
+	eyebrow: 'eyebrow text',
+	iconLeft: ICONS.FA_PLAY,
+	iconRight: ICONS.FA_BOOK,
+	info: true,
+	divider: true,
+	isExpandable: false,
 	isExpanded: false,
-	size: SECTION_HEADER_SIZES.M,
-	slotPadding: true,
-	title: 'Title',
+	hideSlotWhenCollapsed: false,
+	mobileLayout: SECTION_HEADER_MOBILE_LAYOUTS.VERTICAL,
 } as Args;
 
 const argTypes = {
@@ -58,9 +69,28 @@ const argTypes = {
 		control: { type: 'select', options: [null, ...Object.keys(ICONS)] },
 		defaultValue: null,
 	},
+	iconRight: {
+		control: { type: 'select', options: [null, ...Object.keys(ICONS)] },
+		defaultValue: null,
+	},
 	size: {
 		control: { type: 'select', options: Object.values(SECTION_HEADER_SIZES) },
-		defaultValue: SECTION_HEADER_SIZES.M,
+		defaultValue: SECTION_HEADER_SIZES.MEDIUM,
+	},
+	divider: {
+		control: { type: 'boolean' },
+		defaultValue: true,
+	},
+	info: {
+		control: { type: 'boolean' },
+		defaultValue: false,
+	},
+	mobileLayout: {
+		control: {
+			type: 'select',
+			options: Object.values(SECTION_HEADER_MOBILE_LAYOUTS),
+			defaultValue: SECTION_HEADER_MOBILE_LAYOUTS.VERTICAL,
+		},
 	},
 } as ArgTypes;
 
@@ -68,8 +98,11 @@ Interactive.argTypes = argTypes;
 Interactive.args = args;
 
 Interactive.parameters = {
+	actions: {
+		handles: ['click'],
+	},
 	design: {
 		type: 'figma',
-		url: 'https://www.figma.com/file/izQdYyiBR1GQgFkaOIfIJI/LMS---DS-Components?node-id=3703%3A70270',
+		url: 'https://www.figma.com/file/izQdYyiBR1GQgFkaOIfIJI/LMS---DS-Components?type=design&node-id=6984-129711&t=ivzu5dM9vSgW20Re-0',
 	},
 };