@bethinkpl/design-system 22.2.0 → 22.3.0

package/lib/js/components/DatePickers/DatePickerBox/DatePickerBox.vue

@@ -0,0 +1,291 @@
+<template>
+	<div
+		class="ds-datePickerBox"
+		:class="{
+			'-ds-disabled': state === DATE_PICKER_STATES.DISABLED,
+			'-ds-loading': state === DATE_PICKER_STATES.LOADING,
+			'-ds-interactive': isInteractive,
+			'-ds-warning': color === DATE_PICKER_COLORS.WARNING,
+			'-ds-neutral': color === DATE_PICKER_COLORS.NEUTRAL,
+			'-ds-isOpen': isOpen,
+		}"
+	>
+		<span v-if="eyebrowText" class="ds-datePickerBox__eyebrow">{{ eyebrowText }}</span>
+		<div class="ds-datePickerBox__dateWrapper">
+			<ds-icon
+				v-if="icon"
+				class="ds-datePickerBox__icon"
+				:class="{ '-ds-hiddenOnMobile': isIconHiddenOnMobile }"
+				:icon="icon"
+				:size="ICON_SIZES.XX_SMALL"
+			></ds-icon>
+			<span class="ds-datePickerBox__date">{{ text }}</span>
+		</div>
+
+		<div v-if="state === DATE_PICKER_STATES.LOADING" class="ds-datePickerBox__loader">
+			<ds-icon :icon="ICONS.FAD_SPINNER_THIRD" :size="ICON_SIZES.X_SMALL" spinning />
+		</div>
+	</div>
+</template>
+
+<style scoped lang="scss">
+@import '../../../../styles/settings/typography/tokens';
+@import '../../../../styles/settings/colors/tokens';
+@import '../../../../styles/settings/spacings';
+@import '../../../../styles/settings/media-queries';
+@import '../../../../styles/settings/borders';
+@import '../../../../styles/settings/radiuses';
+
+@mixin color-scheme(
+	$color-eyebrow,
+	$color-date,
+	$color-icon,
+	$color-icon-hovered,
+	$color-date-hovered,
+	$color-icon-disabled,
+	$color-eyebrow-disabled,
+	$color-date-disabled,
+	$self
+) {
+	&.-ds-interactive {
+		&:hover {
+			#{$self}__icon {
+				color: $color-icon-hovered;
+			}
+
+			#{$self}__date {
+				color: $color-date-hovered;
+			}
+		}
+	}
+
+	&.-ds-disabled {
+		#{$self}__eyebrow {
+			color: $color-eyebrow-disabled;
+		}
+
+		#{$self}__date {
+			color: $color-date-disabled;
+		}
+
+		#{$self}__icon {
+			color: $color-icon-disabled;
+		}
+	}
+
+	&.-ds-isOpen {
+		&:hover {
+			#{$self}__icon {
+				color: $color-icon;
+			}
+
+			#{$self}__date {
+				color: $color-date;
+			}
+		}
+	}
+	#{$self}__eyebrow {
+		color: $color-eyebrow;
+	}
+
+	#{$self}__date {
+		color: $color-date;
+	}
+
+	#{$self}__icon {
+		color: $color-icon;
+	}
+
+	#{$self}__loader {
+		color: $color-icon;
+	}
+}
+
+.ds-datePickerBox {
+	$self: &;
+
+	border: $border-xs solid transparent;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	min-height: 44px;
+	min-width: 76px;
+	padding: $space-2xs $space-xs;
+	pointer-events: none;
+	position: relative;
+
+	&.-ds-loading,
+	&.-ds-interactive {
+		background-color: $color-neutral-background-weak;
+		border-color: $color-neutral-border-weak;
+		border-radius: $radius-s;
+	}
+
+	&.-ds-disabled {
+		background-color: $color-neutral-background-weak-disabled;
+		pointer-events: none;
+	}
+
+	&.-ds-isOpen {
+		background-color: $color-neutral-background-medium;
+
+		&:hover {
+			background-color: $color-neutral-background-medium;
+		}
+	}
+
+	&__eyebrow {
+		@include info-xs-default-regular;
+	}
+
+	&__dateWrapper {
+		column-gap: $space-4xs;
+		display: inline-flex;
+
+		/* Prevent text select */
+		-webkit-user-select: none; /* Safari */
+		user-select: none;
+	}
+
+	&__date {
+		@include text-s-default-regular;
+	}
+
+	&__icon {
+		&.-ds-hiddenOnMobile {
+			display: none;
+
+			@media (#{breakpoint-s()}) {
+				display: flex;
+			}
+		}
+	}
+
+	&__loader {
+		background-color: inherit;
+		display: flex;
+		height: calc(100% - $border-s * 2);
+		justify-content: center;
+		left: $space-5xs;
+		position: absolute;
+		top: $space-5xs;
+		width: calc(100% - $border-s * 2);
+	}
+
+	&.-ds-loading,
+	&.-ds-neutral {
+		@include color-scheme(
+			$color-neutral-text-weak,
+			$color-neutral-text-heavy,
+			$color-neutral-icon,
+			$color-neutral-icon-hovered,
+			$color-neutral-text-heavy,
+			$color-neutral-icon-disabled,
+			$color-neutral-text-disabled,
+			$color-neutral-text-heavy-disabled,
+			$self
+		);
+	}
+
+	&:not(.-ds-loading) {
+		&.-ds-interactive {
+			cursor: pointer;
+			pointer-events: all;
+
+			&:hover:not(.-ds-isOpen) {
+				background-color: $color-neutral-background-weak-hovered;
+			}
+		}
+
+		&.-ds-warning {
+			@include color-scheme(
+				$color-warning-text,
+				$color-warning-text,
+				$color-warning-icon,
+				$color-warning-icon-hovered,
+				$color-warning-text-hovered,
+				$color-warning-icon-disabled,
+				$color-warning-text-disabled,
+				$color-warning-text-disabled,
+				$self
+			);
+		}
+	}
+}
+</style>
+
+<script lang="ts">
+import DsIcon, { ICON_SIZES, ICONS } from '../../Icons/Icon';
+import {
+	DATE_PICKER_COLORS,
+	DATE_PICKER_STATES,
+	DatePickerColors,
+	DatePickerStates,
+} from '../DatePicker/DatePicker.consts';
+import { PropType, toRaw } from 'vue';
+
+export default {
+	name: 'DatePickerBox',
+	components: {
+		DsIcon,
+	},
+	props: {
+		isInteractive: {
+			type: Boolean,
+			default: true,
+		},
+		placeholder: {
+			type: String,
+			default: 'Ustaw',
+		},
+		date: {
+			type: Date,
+			default: null,
+		},
+		icon: {
+			type: Object,
+			default: null,
+			validate: (icon) => icon === null || Object.values(ICONS).includes(toRaw(icon)),
+		},
+		isIconHiddenOnMobile: {
+			type: Boolean,
+			default: false,
+		},
+		state: {
+			type: (String as PropType<DatePickerStates>) || null,
+			default: DATE_PICKER_STATES.DEFAULT,
+		},
+		color: {
+			type: String as PropType<DatePickerColors>,
+			default: DATE_PICKER_COLORS.NEUTRAL,
+		},
+		eyebrowText: {
+			type: String,
+			default: '',
+		},
+		isOpen: {
+			type: Boolean,
+			default: false,
+		},
+	},
+	data() {
+		return {
+			ICONS: Object.freeze(ICONS),
+			ICON_SIZES: Object.freeze(ICON_SIZES),
+			DATE_PICKER_STATES: Object.freeze(DATE_PICKER_STATES),
+			DATE_PICKER_COLORS: Object.freeze(DATE_PICKER_COLORS),
+		};
+	},
+	computed: {
+		text() {
+			if (this.date) {
+				return this.date.toLocaleDateString(undefined, {
+					month: 'short',
+					day: '2-digit',
+				});
+			}
+			return this.placeholder;
+		},
+	},
+};
+</script>

package/lib/js/components/DatePickers/DatePickerBox/index.ts

@@ -0,0 +1,3 @@
+import DatePickerBox from './DatePickerBox.vue';
+
+export default DatePickerBox;

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

@@ -59,8 +59,8 @@ const argTypes = {
 		control: {
 			type: 'select',
 			options: Object.values(OVERLAY_HEADER_BORDER_COLORS),
-			defaultValue: OVERLAY_HEADER_BORDER_COLORS.NEUTRAL_GHOST,
 		},
+		defaultValue: OVERLAY_HEADER_BORDER_COLORS.NEUTRAL_GHOST,
 	},
 } as ArgTypes;
 

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

@@ -30,6 +30,7 @@
 					<slot name="titleLeading" />
 				</div>
 				<div
+					v-if="title || shortTitle"
 					class="ds-overlayHeader__titleWrapper"
 					:title="title"
 					:class="{ '-ds-interactive': isTitleInteractive }"
@@ -100,6 +101,7 @@
 @import '../../../../styles/settings/spacings';
 @import '../../../../styles/settings/media-queries';
 @import '../../../../styles/settings/colors/tokens';
+@import '../../../../styles/settings/shadows';
 @import '../../../../styles/settings/typography/tokens';
 @import '../../../../styles/mixins/flex-overflow-mask';
 
@@ -107,6 +109,7 @@
 	align-items: center;
 	background: $color-neutral-background;
 	border-bottom: 2px solid $color-neutral-border-ghost;
+	box-shadow: $shadow-s;
 	display: flex;
 	padding: $space-2xs $space-3xs $space-2xs 0;
 
@@ -162,14 +165,19 @@
 	&__main {
 		align-items: center;
 		display: flex;
+		gap: $space-2xs;
+		// title is required, but in some edge-cases we don't render it. We need to set min-height to avoid jumping
+		// Keep value in sync with &__title line-height
+		min-height: $typography-line-height-s;
 	}
 
 	&__titleLeading {
 		display: flex;
-		margin-right: $space-2xs;
 	}
 
 	&__titleWrapper {
+		overflow: hidden;
+
 		&.-ds-interactive {
 			cursor: pointer;
 		}
@@ -202,9 +210,8 @@
 		@include flexOverflowMask($color-neutral-background, 20px);
 
 		display: flex;
-		// flex-shrink: 2 gives some more space for title
-		flex-shrink: 2;
-		margin-left: $space-2xs;
+		// flex-shrink: 100000 is big enough, so the title will not shrink
+		flex-shrink: 100000;
 	}
 
 	&__titleTrailing {

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

@@ -1,3 +1,5 @@
+import { Value } from '../../utils/type.utils';
+
 export const TILE_COLORS = {
 	NEUTRAL: 'neutral',
 	NEUTRAL_WEAK: 'neutralWeak',
@@ -8,8 +10,12 @@ export const TILE_COLORS = {
 	INFO: 'info',
 } as const;
 
+export type TileColors = Value<typeof TILE_COLORS>;
+
 export const TILE_STATES = {
 	DEFAULT: 'default',
 	DISABLED: 'disabled',
 	LOADING: 'loading',
 } as const;
+
+export type TileStates = Value<typeof TILE_STATES>;

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

@@ -10,6 +10,7 @@ export const template = (componentTag: string) => `
 			:eyebrow-text="eyebrowText"
 			:icon-left="ICONS[iconLeft]"
 			:icon-right="ICONS[iconRight]"
+			:is-icon-right-hidden-on-mobile="isIconRightHiddenOnMobile"
 			:interactive="interactive"
 			:is-eyebrow-text-uppercase="isEyebrowTextUppercase"
 			:state="state"
@@ -25,6 +26,7 @@ export const args = {
 	interactive: true,
 	iconLeft: null,
 	iconRight: null,
+	isIconRightHiddenOnMobile: false,
 	text: 'this is a text text',
 	eyebrowText: 'this is an eyebrowText text',
 	additionalText: '',

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

@@ -1,6 +1,6 @@
-import { toRaw } from 'vue';
+import { PropType, toRaw } from 'vue';
 import { ICONS } from '../Icons/Icon';
-import { TILE_COLORS, TILE_STATES } from './Tile.consts';
+import { TILE_COLORS, TILE_STATES, TileColors, TileStates } from './Tile.consts';
 import { Value } from '../../utils/type.utils';
 
 export const props = {
@@ -22,6 +22,10 @@ export const props = {
 			return Object.values(ICONS).includes(toRaw(iconRight));
 		},
 	},
+	isIconRightHiddenOnMobile: {
+		type: Boolean,
+		default: false,
+	},
 	text: {
 		type: String,
 		required: true,
@@ -35,7 +39,7 @@ export const props = {
 		default: null,
 	},
 	color: {
-		type: String,
+		type: String as PropType<TileColors>,
 		default: TILE_COLORS.NEUTRAL,
 		validator(color) {
 			return Object.values(TILE_COLORS).includes(color);
@@ -46,7 +50,7 @@ export const props = {
 		default: false,
 	},
 	state: {
-		type: String,
+		type: String as PropType<TileStates>,
 		default: TILE_STATES.DEFAULT,
 		validator(value: Value<typeof TILE_STATES>) {
 			return Object.values(TILE_STATES).includes(value);

package/lib/js/components/Tile/Tile.vue

@@ -28,6 +28,7 @@
 		<ds-icon
 			v-else-if="iconRight"
 			class="ds-tile__iconRight"
+			:class="{ '-ds-hiddenOnMobile': isIconRightHiddenOnMobile }"
 			:icon="iconRight"
 			:size="ICON_SIZES.SMALL"
 		/>
@@ -43,6 +44,7 @@
 @import '../../../styles/settings/radiuses';
 @import '../../../styles/settings/colors/tokens';
 @import '../../../styles/settings/typography/tokens';
+@import '../../../styles/settings/media-queries';
 
 $tile-colors: (
 	'neutral': (
@@ -263,6 +265,14 @@ $tile-colors: (
 
 	&__iconRight {
 		margin-left: $space-xs;
+
+		&.-ds-hiddenOnMobile {
+			display: none;
+
+			@media #{breakpoint-s()} {
+				display: block;
+			}
+		}
 	}
 
 	&.-ds-interactive:not(.-ds-disabled):not(.-ds-loading) {

package/lib/js/icons/fontawesome.ts

@@ -143,6 +143,8 @@ import { faWindowMaximize } from '@fortawesome/pro-regular-svg-icons/faWindowMax
 import { faXmark } from '@fortawesome/pro-regular-svg-icons/faXmark';
 import { faCommentsQuestion } from '@fortawesome/pro-regular-svg-icons/faCommentsQuestion';
 import { faCommentsQuestionCheck } from '@fortawesome/pro-regular-svg-icons/faCommentsQuestionCheck';
+import { faCalendarClock } from '@fortawesome/pro-regular-svg-icons/faCalendarClock';
+import { faFileCheck } from '@fortawesome/pro-regular-svg-icons/faFileCheck';
 import { faArrowDown as fasArrowDown } from '@fortawesome/pro-solid-svg-icons/faArrowDown';
 import { faArrowLeft as fasArrowLeft } from '@fortawesome/pro-solid-svg-icons/faArrowLeft';
 import { faArrowRight as fasArrowRight } from '@fortawesome/pro-solid-svg-icons/faArrowRight';
@@ -156,6 +158,7 @@ import { faCheck as fasCheck } from '@fortawesome/pro-solid-svg-icons/faCheck';
 import { faCircleCheck as fasCircleCheck } from '@fortawesome/pro-solid-svg-icons/faCircleCheck';
 import { faCirclePlay as fasCirclePlay } from '@fortawesome/pro-solid-svg-icons/faCirclePlay';
 import { faComment as fasComment } from '@fortawesome/pro-solid-svg-icons/faComment';
+import { faCompass as fasCompass } from '@fortawesome/pro-solid-svg-icons/faCompass';
 import { faExclamation as fasExclamation } from '@fortawesome/pro-solid-svg-icons/faExclamation';
 import { faFileLines as fasFileLines } from '@fortawesome/pro-solid-svg-icons/faFileLines';
 import { faFilePen as fasFilePen } from '@fortawesome/pro-solid-svg-icons/faFilePen';
@@ -221,6 +224,7 @@ export const FONTAWESOME_ICONS = {
 	FA_BOX: faBox,
 	FA_BOX_ARCHIVE: faBoxArchive,
 	FA_CALENDAR: faCalendar,
+	FA_CALENDAR_CLOCK: faCalendarClock,
 	FA_CALENDAR_CIRCLE_EXCLAMATION: faCalendarCircleExclamation,
 	FA_CALENDAR_CHECK: faCalendarCheck,
 	FA_CALENDAR_DAY: faCalendarDay,
@@ -262,6 +266,7 @@ export const FONTAWESOME_ICONS = {
 	FA_COMMENTS: faComments,
 	FA_COMMENTS_QUESTION: faCommentsQuestion,
 	FA_COMMENTS_QUESTION_CHECK: faCommentsQuestionCheck,
+	FA_COMPASS_SOLID: fasCompass,
 	FA_COMPRESS: faCompress,
 	FA_COPY: faCopy,
 	FA_CREDIT_CARD: faCreditCard,
@@ -277,6 +282,7 @@ export const FONTAWESOME_ICONS = {
 	FA_FACE_MEH: faFaceMeh,
 	FA_FACE_SMILE: faFaceSmile,
 	FA_FACEBOOK: faFacebook,
+	FA_FILE_CHECK: faFileCheck,
 	FA_FILE_INVOICE_DOLLAR: faFileInvoiceDollar,
 	FA_FILE_LINES: faFileLines,
 	FA_FILE_LINES_SOLID: fasFileLines,

package/lib/js/index.ts

@@ -1,99 +1,157 @@
 export { default as BadgeScore } from './components/BadgeScore';
+export { default as DsBadgeScore } from './components/BadgeScore';
 export * from './components/BadgeScore/BadgeScore.consts';
 export { default as Banner } from './components/Banner';
+export { default as DsBanner } from './components/Banner';
 export * from './components/Banner/Banner.consts';
 export { default as Button } from './components/Buttons/Button';
+export { default as DsButton } from './components/Buttons/Button';
 export * from './components/Buttons/Button/Button.consts';
 export { default as ToggleButton } from './components/Toggles/ToggleButton';
+export { default as DsToggleButton } from './components/Toggles/ToggleButton';
 export * from './components/Toggles/ToggleButton/ToggleButton.consts';
 export { default as Card } from './components/Cards/Card/';
+export { default as DsCard } from './components/Cards/Card/';
 export { default as CardExpandable } from './components/Cards/CardExpandable/';
+export { default as DsCardExpandable } from './components/Cards/CardExpandable/';
+export { default as DatePicker } from './components/DatePickers/DatePicker';
+export { default as DsDatePicker } from './components/DatePickers/DatePicker';
+export * from './components/DatePickers/DatePicker';
 export { default as Divider } from './components/Divider';
+export { default as DsDivider } from './components/Divider';
 export * from './components/Divider/Divider.consts';
 export { default as FeatureIcon } from './components/Icons/FeatureIcon';
+export { default as DsFeatureIcon } from './components/Icons/FeatureIcon';
 export * from './components/Icons/FeatureIcon/FeatureIcon.consts';
 export { default as Icon } from './components/Icons/Icon';
+export { default as DsIcon } from './components/Icons/Icon';
 export * from './components/Icons/Icon/Icon.consts';
 export { default as IconButton } from './components/Buttons/IconButton';
+export { default as DsIconButton } from './components/Buttons/IconButton';
 export * from './components/Buttons/IconButton/IconButton.consts';
 export { default as Modal } from './components/Modal';
 export { default as DsModal } from './components/Modals/Modal';
 export * from './components/Modals/Modal/Modal.consts';
 export { default as DsModalDialog } from './components/Modals/ModalDialog';
 export { default as NumberInCircle } from './components/NumberInCircle';
+export { default as DsNumberInCircle } from './components/NumberInCircle';
 export * from './components/NumberInCircle/NumberInCircle.consts';
 export { default as TabItem } from './components/TabItem';
+export { default as DsTabItem } from './components/TabItem';
 export * from './components/TabItem/TabItem.consts';
 export { default as Tile } from './components/Tile';
+export { default as DsTile } from './components/Tile';
 export * from './components/Tile/Tile.consts';
 export { default as AccessStatus } from './components/Statuses/AccessStatus/';
+export { default as DsAccessStatus } from './components/Statuses/AccessStatus/';
 export { default as BlockadeStatus } from './components/Statuses/BlockadeStatus/';
+export { default as DsBlockadeStatus } from './components/Statuses/BlockadeStatus/';
 export * from './consts/colors';
 export { default as SurveyToggle } from './components/SurveyToggle/';
+export { default as DsSurveyToggle } from './components/SurveyToggle/';
 export * from './components/SurveyToggle/SurveyToggle.consts';
 export { default as SurveyQuestionScale } from './components/SurveyQuestions/SurveyQuestionScale/';
+export { default as DsSurveyQuestionScale } from './components/SurveyQuestions/SurveyQuestionScale/';
 export { default as SurveyQuestionOpenEnded } from './components/SurveyQuestions/SurveyQuestionOpenEnded/';
+export { default as DsSurveyQuestionOpenEnded } from './components/SurveyQuestions/SurveyQuestionOpenEnded/';
 export * from './components/SurveyQuestions/SurveyQuestion.consts';
 export * from './components/SurveyQuestions/SurveyQuestion.domain';
 export { default as SectionHeader } from './components/Headers/SectionHeader';
+export { default as DsSectionHeader } from './components/Headers/SectionHeader';
 export * from './components/Headers/SectionHeader/SectionHeader.consts';
 export { default as PageHeader } from './components/Headers/PageHeader';
+export { default as DsPageHeader } from './components/Headers/PageHeader';
 export * from './components/Headers/PageHeader/PageHeader.consts';
 export { default as SectionTitle } from './components/SectionTitle/SectionTitle.vue';
+export { default as DsSectionTitle } from './components/SectionTitle/SectionTitle.vue';
 export * from './components/SectionTitle/SectionTitle.consts';
 export { default as Drawer } from './components/Drawer';
+export { default as DsDrawer } from './components/Drawer';
 export * from './components/Drawer/Drawer.consts';
 export { default as DrawerContent } from './components/Drawer/DrawerContent/DrawerContent.vue';
+export { default as DsDrawerContent } from './components/Drawer/DrawerContent/DrawerContent.vue';
 export { default as DrawerDivider } from './components/Drawer/DrawerDivider/DrawerDivider.vue';
+export { default as DsDrawerDivider } from './components/Drawer/DrawerDivider/DrawerDivider.vue';
 export { default as DrawerHeader } from './components/Drawer/DrawerHeader/DrawerHeader.vue';
+export { default as DsDrawerHeader } from './components/Drawer/DrawerHeader/DrawerHeader.vue';
 export * from './components/Drawer/DrawerHeader/DrawerHeader.consts';
 export { default as DrawerListItem } from './components/Drawer/DrawerListItem/DrawerListItem.vue';
+export { default as DsDrawerListItem } from './components/Drawer/DrawerListItem/DrawerListItem.vue';
 export { default as DrawerListItemGroup } from './components/Drawer/DrawerListItemGroup/DrawerListItemGroup.vue';
+export { default as DsDrawerListItemGroup } 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 DsDrawerTile } from './components/Drawer/DrawerTile/DrawerTile.vue';
 export { default as DrawerSection } from './components/Drawer/DrawerSection/DrawerSection.vue';
+export { default as DsDrawerSection } from './components/Drawer/DrawerSection/DrawerSection.vue';
 export { default as OutlineItem } from './components/Outline/OutlineItem';
+export { default as DsOutlineItem } from './components/Outline/OutlineItem';
 export * from './components/Outline/OutlineItem/OutlineItem.consts';
 export { default as OutlineDivider } from './components/Outline/OutlineDivider';
+export { default as DsOutlineDivider } from './components/Outline/OutlineDivider';
 export { default as OutlineSectionHeader } from './components/Outline/OutlineSectionHeader';
+export { default as DsOutlineSectionHeader } from './components/Outline/OutlineSectionHeader';
 export { default as Chip } from './components/Chip';
+export { default as DsChip } from './components/Chip';
 export * from './components/Chip/Chip.consts';
 export { default as CounterToggle } from './components/Toggles/CounterToggle';
+export { default as DsCounterToggle } from './components/Toggles/CounterToggle';
 export * from './components/Toggles/CounterToggle/CounterToggle.consts';
 export { default as SelectList } from './components/SelectList/SelectList.vue';
+export { default as DsSelectList } from './components/SelectList/SelectList.vue';
 export { default as SelectListItem } from './components/SelectList/SelectListItem/SelectListItem.vue';
+export { default as DsSelectListItem } from './components/SelectList/SelectListItem/SelectListItem.vue';
 export { default as SelectListItemDivider } from './components/SelectList/SelectListItemDivider/SelectListItemDivider.vue';
+export { default as DsSelectListItemDivider } from './components/SelectList/SelectListItemDivider/SelectListItemDivider.vue';
 export { default as SelectListItemToggle } from './components/SelectList/SelectListItemToggle/SelectListItemToggle.vue';
+export { default as DsSelectListItemToggle } from './components/SelectList/SelectListItemToggle/SelectListItemToggle.vue';
 export { default as SelectListItemTile } from './components/SelectList/SelectListItemTile/SelectListItemTile.vue';
+export { default as DsSelectListItemTile } from './components/SelectList/SelectListItemTile/SelectListItemTile.vue';
 export { default as SelectListSectionTitle } from './components/SelectList/SelectListSectionTitle/SelectListSectionTitle.vue';
+export { default as DsSelectListSectionTitle } from './components/SelectList/SelectListSectionTitle/SelectListSectionTitle.vue';
 export * from './components/SelectList/SelectListItem/SelectListItem.consts';
 export { default as SelectionTile } from './components/SelectionTile';
+export { default as DsSelectionTile } from './components/SelectionTile';
 export * from './components/SelectionTile';
 export { default as LoadingBar } from './components/LoadingBar';
+export { default as DsLoadingBar } from './components/LoadingBar';
 export * from './components/LoadingBar';
 export { default as PopOver } from './components/PopOver';
+export { default as DsPopOver } from './components/PopOver';
 export * from './components/PopOver/PopOver.consts';
 export { default as Dropdown } from './components/Dropdown';
+export { default as DsDropdown } from './components/Dropdown';
 export * from './components/Dropdown/Dropdown.consts';
 export { default as ProgressBar } from './components/ProgressBar';
+export { default as DsProgressBar } from './components/ProgressBar';
 export * from './components/ProgressBar/ProgressBar.consts';
 export { default as ProgressDonutChart } from './components/ProgressDonutChart';
+export { default as DsProgressDonutChart } from './components/ProgressDonutChart';
 export * from './components/ProgressDonutChart/ProgressDonutChart.consts';
 export { default as IconText } from './components/IconText';
+export { default as DsIconText } from './components/IconText';
 export * from './components/IconText/IconText.consts';
 export { default as Pagination } from './components/Pagination';
+export { default as DsPagination } from './components/Pagination';
 export * from './components/Pagination/Pagination.consts';
 export { default as OverlayHeader } from './components/Headers/OverlayHeader';
+export { default as DsOverlayHeader } from './components/Headers/OverlayHeader';
 export * from './components/Headers/OverlayHeader/OverlayHeader.consts';
 export { default as Well } from './components/Well';
+export { default as DsWell } from './components/Well';
 export * from './components/Well/Well.consts';
 export { default as ThreeColumnLayout } from './components/Layouts/ThreeColumnLayout';
+export { default as DsThreeColumnLayout } from './components/Layouts/ThreeColumnLayout';
 export * from './components/Layouts/ThreeColumnLayout/ThreeColumnLayout.consts';
 export { default as RichListItem } from './components/RichList/RichListItem';
+export { default as DsRichListItem } from './components/RichList/RichListItem';
 export * from './components/RichList/RichListItem/RichListItem.consts';
 export { default as BasicRichListItem } from './components/RichList/BasicRichListItem';
+export { default as DsBasicRichListItem } from './components/RichList/BasicRichListItem';
 export { default as GroupRichListItem } from './components/RichList/GroupRichListItem';
+export { default as DsGroupRichListItem } from './components/RichList/GroupRichListItem';
 export { default as Switch } from './components/Switch';
+export { default as DsSwitch } from './components/Switch';
 export * from './components/Switch/Switch.consts';
 export { default as DsTooltip } from './components/Tooltip';
 export * from './components/Tooltip/Tooltip.consts';