@bethinkpl/design-system 26.14.4 → 26.14.5

package/dist/lib/js/components/TabItem/TabItem.stories.d.ts

@@ -0,0 +1,5 @@
+import TabItem from './TabItem.vue';
+import { Meta, StoryFn } from '@storybook/vue3';
+declare const _default: Meta<typeof TabItem>;
+export default _default;
+export declare const Interactive: StoryFn<typeof TabItem>;

package/dist/lib/js/components/TextGroup/TextGroup.stories.d.ts

@@ -0,0 +1,5 @@
+import { Meta, StoryFn } from '@storybook/vue3';
+import DsDivider from '../Divider/Divider.vue';
+declare const _default: Meta<typeof DsDivider>;
+export default _default;
+export declare const Interactive: StoryFn<typeof DsDivider>;

package/dist/lib/js/components/Tile/Tile.spec.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,6 @@
+import Tile from './Tile.vue';
+import { Meta, StoryFn } from '@storybook/vue3';
+declare const _default: Meta<typeof Tile>;
+export default _default;
+export declare const Interactive: StoryFn<typeof Tile>;
+export declare const Static: StoryFn<typeof Tile>;

package/dist/lib/js/components/Toast/Toast.stories.d.ts

@@ -0,0 +1,5 @@
+import { Meta, StoryFn } from '@storybook/vue3';
+import DsToast from './Toast.vue';
+declare const _default: Meta<typeof DsToast>;
+export default _default;
+export declare const Interactive: StoryFn<typeof DsToast>;

package/dist/lib/js/components/Toggles/CounterToggle/CounterToggle.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/lib/js/components/Toggles/CounterToggle/CounterToggle.stories.d.ts

@@ -0,0 +1,5 @@
+import CounterToggle from './CounterToggle.vue';
+import { Meta, StoryFn } from '@storybook/vue3';
+declare const _default: Meta<typeof CounterToggle>;
+export default _default;
+export declare const Interactive: StoryFn<typeof CounterToggle>;

package/dist/lib/js/components/Toggles/ToggleButton/ToggleButton.stories.d.ts

@@ -0,0 +1,5 @@
+import ToggleButton from './ToggleButton.vue';
+import { Meta, StoryFn } from '@storybook/vue3';
+declare const _default: Meta<typeof ToggleButton>;
+export default _default;
+export declare const Interactive: StoryFn<typeof ToggleButton>;

package/dist/lib/js/components/Tooltip/Tooltip.stories.d.ts

@@ -0,0 +1,7 @@
+import Tooltip from './Tooltip.vue';
+import { Meta, StoryFn } from '@storybook/vue3';
+declare const _default: Meta<typeof Tooltip>;
+export default _default;
+export declare const Interactive: StoryFn<typeof Tooltip>;
+export declare const OnDsSwitch: StoryFn<typeof Tooltip>;
+export declare const OnDsButton: StoryFn<typeof Tooltip>;

package/dist/lib/js/components/Well/Well.consts.d.ts

@@ -1,4 +1,7 @@
+import { Value } from '../../utils/type.utils';
+
 export declare const WELL_PADDINGS: {
     SMALL: string;
     MEDIUM: string;
 };
+export type WellPadding = Value<typeof WELL_PADDINGS>;

package/dist/lib/js/components/Well/Well.stories.d.ts

@@ -0,0 +1,5 @@
+import { Meta, StoryFn } from '@storybook/vue3';
+import Well from './Well.vue';
+declare const _default: Meta<typeof Well>;
+export default _default;
+export declare const Interactive: StoryFn<typeof Well>;

package/dist/lib/js/components/Well/Well.vue.d.ts

@@ -0,0 +1,43 @@
+import { WellPadding } from './Well.consts';
+import { ChipRadius, ChipColor } from '../Chip';
+import { IconItem } from '../Icons/Icon';
+
+declare function __VLS_template(): {
+    chipAccessory?(_: {}): any;
+    default?(_: {}): any;
+};
+declare const __VLS_component: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+    padding?: WellPadding;
+    hasChip?: boolean;
+    chipLabel?: string;
+    chipLabelUppercase?: boolean;
+    chipLeftIcon?: IconItem;
+    chipRadius?: ChipRadius;
+    chipColor?: ChipColor;
+    chipColorHex?: string;
+}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+    padding?: WellPadding;
+    hasChip?: boolean;
+    chipLabel?: string;
+    chipLabelUppercase?: boolean;
+    chipLeftIcon?: IconItem;
+    chipRadius?: ChipRadius;
+    chipColor?: ChipColor;
+    chipColorHex?: string;
+}>>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/lib/js/styles/Borders/BorderSizes.stories.d.ts

@@ -0,0 +1,4 @@
+import { Args, Meta, StoryFn } from '@storybook/vue3';
+declare const _default: Meta<Args>;
+export default _default;
+export declare const Static: StoryFn<Args>;

package/dist/lib/js/styles/Colors/Colors.stories.d.ts

@@ -0,0 +1,5 @@
+import { Meta, StoryFn } from '@storybook/vue3';
+import ItemsList from './../ItemsList.vue';
+declare const _default: Meta<typeof ItemsList>;
+export default _default;
+export declare const Raw: StoryFn<typeof ItemsList>;

package/dist/lib/js/styles/ColorsThemes/ColorsThemes.stories.d.ts

@@ -0,0 +1,5 @@
+import { Meta, StoryFn } from '@storybook/vue3';
+import ItemsList from './../ItemsList.vue';
+declare const _default: Meta<typeof ItemsList>;
+export default _default;
+export declare const Theme: StoryFn<typeof ItemsList>;

package/dist/lib/js/styles/ColorsTokensLms/ColorsTokensLms.stories.d.ts

@@ -0,0 +1,5 @@
+import { Meta, StoryFn } from '@storybook/vue3';
+import ItemsList from './../ItemsList.vue';
+declare const _default: Meta<typeof ItemsList>;
+export default _default;
+export declare const LMS: StoryFn<typeof ItemsList>;

package/dist/lib/js/styles/ColorsTokensPrimaryBodywork/ColorsTokensPrimaryBodywork.stories.d.ts

@@ -0,0 +1,5 @@
+import { Meta, StoryFn } from '@storybook/vue3';
+import ItemsList from './../ItemsList.vue';
+declare const _default: Meta<typeof ItemsList>;
+export default _default;
+export declare const PrimaryBodywork: StoryFn<typeof ItemsList>;

package/dist/lib/js/styles/ColorsTokensPrimaryWnl/ColorsTokensPrimaryWnl.stories.d.ts

@@ -0,0 +1,5 @@
+import { Meta, StoryFn } from '@storybook/vue3';
+import ItemsList from './../ItemsList.vue';
+declare const _default: Meta<typeof ItemsList>;
+export default _default;
+export declare const PrimaryWNL: StoryFn<typeof ItemsList>;

package/dist/lib/js/styles/Spacings/Spacings.stories.d.ts

@@ -0,0 +1,4 @@
+import { Args, Meta, StoryFn } from '@storybook/vue3';
+declare const _default: Meta<Args>;
+export default _default;
+export declare const Interactive: StoryFn<Args>;

package/dist/lib/js/styles/TypographyTokensLms/TypographyTokensLms.stories.d.ts

@@ -0,0 +1,5 @@
+import { Meta, StoryFn } from '@storybook/vue3';
+import ItemsList from './../ItemsList.vue';
+declare const _default: Meta<typeof ItemsList>;
+export default _default;
+export declare const LMS: StoryFn<typeof ItemsList>;

package/dist/lib/js/styles/TypographyVariables/TypographyVariables.stories.d.ts

@@ -0,0 +1,5 @@
+import { Meta, StoryFn } from '@storybook/vue3';
+import ItemsList from './../ItemsList.vue';
+declare const _default: Meta<typeof ItemsList>;
+export default _default;
+export declare const Variables: StoryFn<typeof ItemsList>;

package/dist/tools/importers/helpers/modifiers.d.ts

@@ -0,0 +1,9 @@
+export declare const pascalCase: (str: string) => string;
+export declare const capitalizeFirstLetter: (str: string) => string;
+export declare const camelize: (str: string) => string;
+export declare const kebabize: (str: any) => any;
+export declare const cssFileFirstLine: (isTheme: boolean, themeName: string | undefined) => string;
+export declare const cssFileRootFirstLine: () => string;
+export declare const mixinNameLine: (token: string) => string;
+export declare const tokenAsCssPropertyLine: (token: string) => string;
+export declare const closeBracketLine: () => string;

package/dist/tools/importers/helpers/structures.d.ts

@@ -0,0 +1,68 @@
+export interface Dict<V> {
+    [key: string]: V;
+}
+export interface JsonAttributeValues {
+    value: string;
+    type: string;
+}
+export interface JsonAttribute<JsonAttributeValues> {
+    [key: string]: JsonAttributeValues;
+}
+export interface ITokenJsonObject {
+    id: string;
+    label: string;
+    labelFull?: string;
+    value: string;
+    base?: number | null;
+    ratio?: number | null;
+}
+export interface IResultJsonObject {
+    id: string;
+    label: string;
+    labelFull?: string;
+    value: string;
+}
+export interface TypographyBinFiles {
+    variablesRaw: {
+        destinationVariables: string;
+        destinationVariablesCss: string;
+        destinationVariablesCssJson: string;
+    };
+    tokens: {
+        destination: string;
+        destinationJson: string;
+    };
+}
+export interface TypographyConfigFileBin {
+    id: string;
+    files: TypographyBinFiles;
+}
+export interface TypographyConfigFile {
+    destinationPath: string;
+    jsonBinApiUrl: string;
+    bin: TypographyConfigFileBin;
+}
+export interface ColorsBinFiles {
+    variablesRaw: {
+        destination: string;
+        destinationJson: string;
+    };
+    tokens: {
+        destination: string;
+        destinationJson: string;
+        destinationVariables: string;
+    };
+}
+export interface ColorsConfigFileBin {
+    name: string;
+    id: string;
+    files: ColorsBinFiles;
+    isTheme: boolean;
+}
+export interface ITypographyToken {
+    id: string;
+    category: string;
+    token: string;
+    attributes: Array<string>;
+    attributesRaw: Array<Object>;
+}

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

@@ -19,6 +19,8 @@ export const CHIP_COLORS = {
 	INFO: 'info',
 } as const;
 
+export const CHIP_DEFAULT_COLOR = CHIP_COLORS.NEUTRAL;
+
 export type ChipColor = Value<typeof CHIP_COLORS>;
 
 export const CHIP_STATES = {

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

@@ -1,5 +1,11 @@
 import Chip from './Chip.vue';
-import { CHIP_COLORS, CHIP_RADIUSES, CHIP_SIZES, CHIP_STATES } from './Chip.consts';
+import {
+	CHIP_COLORS,
+	CHIP_DEFAULT_COLOR,
+	CHIP_RADIUSES,
+	CHIP_SIZES,
+	CHIP_STATES,
+} from './Chip.consts';
 import { ICONS } from '../Icons/Icon';
 import LogoBadge from '../../../images/logo-badge.svg';
 import { Args, ArgTypes, Meta, StoryFn } from '@storybook/vue3';
@@ -55,7 +61,7 @@ const args = {
 	leftIcon: null,
 	radius: CHIP_RADIUSES.CAPSULE,
 	size: CHIP_SIZES.SMALL,
-	color: CHIP_COLORS.NEUTRAL,
+	color: CHIP_DEFAULT_COLOR,
 	colorHex: '',
 	isRemovable: false,
 	state: CHIP_STATES.DEFAULT,

package/lib/js/components/Chip/Chip.vue

@@ -251,6 +251,7 @@ import {
 	CHIP_RADIUSES,
 	CHIP_SIZES,
 	CHIP_STATES,
+	CHIP_DEFAULT_COLOR,
 	ChipColor,
 	ChipRadius,
 	ChipSize,
@@ -304,7 +305,7 @@ export default defineComponent({
 		},
 		color: {
 			type: String,
-			default: CHIP_COLORS.NEUTRAL,
+			default: CHIP_DEFAULT_COLOR,
 			validator(color: ChipColor) {
 				return Object.values(CHIP_COLORS).includes(color);
 			},

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

@@ -1,4 +1,8 @@
+import { Value } from '../../utils/type.utils';
+
 export const WELL_PADDINGS = {
 	SMALL: 'small',
 	MEDIUM: 'medium',
 };
+
+export type WellPadding = Value<typeof WELL_PADDINGS>;

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

@@ -4,18 +4,39 @@ import { Args, ArgTypes, Meta, StoryObj } from '@storybook/vue3';
 import Well from './Well.vue';
 import { WELL_PADDINGS } from './Well.consts';
 import type { ComponentProps } from 'vue-component-type-helpers';
+import { ICONS } from '../Icons/Icon';
+import { CHIP_COLORS, CHIP_DEFAULT_COLOR, CHIP_RADIUSES } from '../Chip';
+import DsBanner, { BANNER_COLORS } from '../Banner';
 
 type WellProps = ComponentProps<typeof Well>;
 
+function wrapWithContainer(template: string): string {
+	// line-height: 0; is to remove extra space below the badge (as it's an inline element)
+	return `<div style="display: inline-flex; flex-direction: column; width: 100%; gap: 20px;">${template}
+<ds-banner :color="BANNER_COLORS.WARNING" title="Taka kombinacja jest niezgodna z design systemem!" v-if="invalidUsage" /></div>
+`;
+}
+
 const meta: Meta<WellProps> = {
 	title: 'Components/Well',
 	component: Well,
 	render: (args) => ({
-		components: { Well },
+		components: { Well, DsBanner },
 		setup() {
-			return { args };
+			return {
+				args,
+				ICONS,
+				BANNER_COLORS,
+			};
+		},
+		template: wrapWithContainer(
+			'<well v-bind="args" :chip-left-icon="ICONS[args.chipLeftIcon]"><div v-html="args.content" /></well>',
+		),
+		computed: {
+			invalidUsage() {
+				return args.hasChip && !args.padding;
+			},
 		},
-		template: '<well v-bind="args"><div v-html="args.content" /></well>',
 	}),
 	argTypes: {
 		padding: {
@@ -29,7 +50,7 @@ const meta: Meta<WellProps> = {
 	parameters: {
 		design: {
 			type: 'figma',
-			url: 'https://www.figma.com/file/oqNhXXGdc4ZnNQ6YNpkLEK/INI-152-Baza-v3---planowanie?node-id=1807-518161&t=sQ5nflpPY2YcPKNc-4',
+			url: 'https://www.figma.com/design/izQdYyiBR1GQgFkaOIfIJI/LMS---DS-Components?node-id=13194-76861&p=f&m=dev',
 		},
 	},
 };
@@ -43,5 +64,29 @@ export const Interactive: Story = {
 		content:
 			'<h3 style="margin-top: 0">Content</h3>' +
 			'Voluptatem saepe suscipit optio et delectus esse sed velit. Autem maxime soluta aliquam perspiciatis quidem dolor saepe rerum.',
+		hasChip: false,
+		chipLabel: 'Chip z labelem',
+		chipLabelUppercase: false,
+		chipLeftIcon: null,
+		chipRadius: CHIP_RADIUSES.ROUNDED,
+		color: CHIP_DEFAULT_COLOR,
+		colorHex: '',
 	} as Args,
 };
+
+const argTypes = {
+	chipLeftIcon: {
+		control: 'select',
+		options: [null, ...Object.keys(ICONS)],
+	},
+	chipColor: {
+		control: 'select',
+		options: Object.values(CHIP_COLORS),
+	},
+	chipRadius: {
+		control: 'select',
+		options: Object.values(CHIP_RADIUSES),
+	},
+} as ArgTypes;
+
+Interactive.argTypes = argTypes;

package/lib/js/components/Well/Well.vue

@@ -6,6 +6,21 @@
 			'-ds-small': WELL_PADDINGS.SMALL === padding,
 		}"
 	>
+		<div v-if="hasChip" class="ds-well__chipContainer">
+			<chip
+				:label="chipLabel"
+				:is-label-uppercase="chipLabelUppercase"
+				:left-icon="chipLeftIcon"
+				:radius="chipRadius"
+				:color="chipColor"
+				:color-hex="chipColorHex"
+			>
+				<template v-if="$slots.chipAccessory" #accessory>
+					<slot name="chipAccessory" />
+				</template>
+			</chip>
+		</div>
+
 		<slot />
 	</div>
 </template>
@@ -16,39 +31,59 @@
 @import '../../../styles/settings/colors/tokens';
 
 .ds-well {
+	$root: &;
+
 	background-color: $color-neutral-background;
 	border-radius: $radius-m;
+	position: relative;
+
+	&__chipContainer {
+		display: flex;
+		position: absolute;
+		right: 0;
+		top: -10px;
+	}
 
 	&.-ds-medium {
 		padding: $space-s;
+
+		#{$root}__chipContainer {
+			right: $space-s;
+		}
 	}
 
 	&.-ds-small {
 		padding: $space-xs;
+
+		#{$root}__chipContainer {
+			right: $space-xs;
+		}
 	}
 }
 </style>
 
-<script>
-import { WELL_PADDINGS } from './Well.consts';
-
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-	name: 'Well',
-	props: {
-		padding: {
-			type: String,
-			default: null,
-			validator(padding) {
-				return Object.values(WELL_PADDINGS).includes(padding);
-			},
-		},
-	},
-	data() {
-		return {
-			WELL_PADDINGS: Object.freeze(WELL_PADDINGS),
-		};
-	},
-});
+<script lang="ts" setup>
+import { WELL_PADDINGS, WellPadding } from './Well.consts';
+import Chip, { CHIP_DEFAULT_COLOR, CHIP_RADIUSES, ChipRadius, ChipColor } from '../Chip';
+import { IconItem } from '../Icons/Icon';
+
+const {
+	padding = null,
+	hasChip = false,
+	chipLabel,
+	chipLabelUppercase = false,
+	chipLeftIcon = null,
+	chipRadius = CHIP_RADIUSES.ROUNDED,
+	chipColor = CHIP_DEFAULT_COLOR,
+	chipColorHex,
+} = defineProps<{
+	padding?: WellPadding;
+	hasChip?: boolean;
+	chipLabel?: string;
+	chipLabelUppercase?: boolean;
+	chipLeftIcon?: IconItem;
+	chipRadius?: ChipRadius;
+	chipColor?: ChipColor;
+	chipColorHex?: string;
+}>();
 </script>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bethinkpl/design-system",
-  "version": "26.14.4",
+  "version": "26.14.5",
   "description": "Bethink universe design-system",
   "repository": {
     "type": "git",