@bethinkpl/design-system 26.10.2 → 26.11.0

package/lib/js/components/Badge/Badge.vue

@@ -0,0 +1,297 @@
+<template>
+	<div
+		class="ds-badge"
+		:class="{
+			'-ds-x-small': size === BADGE_SIZES.X_SMALL,
+			'-ds-small': size === BADGE_SIZES.SMALL,
+			'-ds-medium': size === BADGE_SIZES.MEDIUM,
+			'-ds-large': size === BADGE_SIZES.LARGE,
+			'-ds-x-large': size === BADGE_SIZES.X_LARGE,
+			'-ds-color-primary': color === BADGE_COLORS.PRIMARY,
+			'-ds-color-success': color === BADGE_COLORS.SUCCESS,
+			'-ds-color-fail': color === BADGE_COLORS.FAIL,
+			'-ds-color-danger': color === BADGE_COLORS.DANGER,
+			'-ds-color-neutral': color === BADGE_COLORS.NEUTRAL,
+		}"
+	>
+		<div
+			:class="[
+				'ds-badge__elevation',
+				{
+					'-ds-no-elevation': elevation === BADGE_ELEVATIONS.NONE,
+					'-ds-elevation-s': elevation === BADGE_ELEVATIONS.SMALL,
+				},
+			]"
+		>
+		</div>
+		<div v-if="!imageUrl && !icon" class="ds-badge__content">
+			{{ label }}
+		</div>
+		<icon v-if="!imageUrl && icon" :icon="icon" :size="iconSize" class="ds-badge__icon" />
+		<img v-if="imageUrl" :src="imageUrl" class="ds-badge__image" />
+	</div>
+</template>
+
+<style scoped lang="scss">
+@import '../../../styles/settings/radiuses';
+@import '../../../styles/settings/typography/tokens';
+@import '../../../styles/settings/colors/tokens';
+@import '../../../styles/settings/spacings';
+@import '../../../styles/settings/shadows';
+
+$badge-elevation-size-xl: 30px;
+$badge-elevation-size-l: 24px;
+$badge-elevation-size-m: 18px;
+$badge-elevation-size-s: 12px;
+$badge-elevation-size-xs: 10px;
+
+$badge-content-size-xl: 20px;
+$badge-content-size-l: 16px;
+$badge-content-size-m: 12px;
+$badge-content-size-s: 8px;
+$badge-content-size-xs: 6px;
+
+$elevation-gap-xl: ($badge-elevation-size-xl - $badge-content-size-xl) / 2;
+$elevation-gap-l: ($badge-elevation-size-l - $badge-content-size-l) / 2;
+$elevation-gap-m: ($badge-elevation-size-m - $badge-content-size-m) / 2;
+$elevation-gap-s: ($badge-elevation-size-s - $badge-content-size-s) / 2;
+$elevation-gap-xs: ($badge-elevation-size-xs - $badge-content-size-xs) / 2;
+
+.ds-badge {
+	$root: &;
+
+	display: inline-flex;
+	justify-content: center;
+	position: relative;
+
+	&__elevation {
+		align-items: center;
+		background-color: $color-default-background;
+		border-radius: $radius-xl;
+		display: flex;
+		justify-content: center;
+		position: absolute;
+
+		&.-ds-no-elevation {
+			display: none;
+		}
+
+		&.-ds-elevation-s {
+			box-shadow: $shadow-s;
+		}
+	}
+
+	&__content {
+		align-items: center;
+		border-radius: $radius-xl;
+		color: $color-inverted-text;
+		display: flex;
+		justify-content: center;
+		position: relative;
+		width: 100%;
+	}
+
+	&__icon {
+		position: relative;
+	}
+
+	&__image {
+		position: relative;
+	}
+
+	&.-ds-x-small {
+		height: $badge-content-size-xs;
+		min-width: $badge-content-size-xs;
+
+		& #{$root}__elevation {
+			height: $badge-elevation-size-xs;
+			left: -$elevation-gap-xs;
+			padding: $elevation-gap-xs;
+			top: -$elevation-gap-xs;
+			width: calc(100% + 2 * $elevation-gap-xs);
+		}
+
+		& #{$root}__image {
+			max-width: $badge-content-size-xs;
+		}
+	}
+
+	&.-ds-small {
+		height: $badge-content-size-s;
+		min-width: $badge-content-size-s;
+
+		& #{$root}__elevation {
+			height: $badge-elevation-size-s;
+			left: -$elevation-gap-s;
+			padding: $elevation-gap-s;
+			top: -$elevation-gap-s;
+			width: calc(100% + 2 * $elevation-gap-s);
+		}
+
+		& #{$root}__image {
+			max-width: $badge-content-size-s;
+		}
+	}
+
+	&.-ds-medium {
+		height: $badge-content-size-m;
+		min-width: $badge-content-size-m;
+
+		& #{$root}__elevation {
+			height: $badge-elevation-size-m;
+			left: -$elevation-gap-m;
+			padding: $elevation-gap-m;
+			top: -$elevation-gap-m;
+			width: calc(100% + 2 * $elevation-gap-m);
+		}
+
+		& #{$root}__content {
+			@include label-xs-default-bold;
+
+			padding: 0 $space-5xs;
+		}
+
+		& #{$root}__image {
+			max-width: $badge-content-size-m;
+		}
+	}
+
+	&.-ds-large {
+		height: $badge-content-size-l;
+		min-width: $badge-content-size-l;
+
+		& #{$root}__elevation {
+			height: $badge-elevation-size-l;
+			left: -$elevation-gap-l;
+			padding: $elevation-gap-l;
+			top: -$elevation-gap-l;
+			width: calc(100% + 2 * $elevation-gap-l);
+		}
+
+		& #{$root}__content {
+			@include label-xs-default-bold;
+
+			padding: 0 $space-4xs;
+		}
+
+		& #{$root}__image {
+			max-width: $badge-content-size-l;
+		}
+	}
+
+	&.-ds-x-large {
+		height: $badge-content-size-xl;
+		min-width: $badge-content-size-xl;
+
+		& #{$root}__elevation {
+			height: $badge-elevation-size-xl;
+			left: -$elevation-gap-xl;
+			padding: $elevation-gap-xl;
+			top: -$elevation-gap-xl;
+			width: calc(100% + 2 * $elevation-gap-xl);
+		}
+
+		& #{$root}__content {
+			@include label-s-default-bold;
+
+			padding: 0 $space-4xs;
+		}
+
+		& #{$root}__image {
+			max-width: $badge-content-size-xl;
+		}
+	}
+
+	&.-ds-color-primary {
+		& #{$root}__content {
+			background-color: $color-primary-background-strong;
+		}
+
+		& #{$root}__icon {
+			color: $color-primary-icon;
+		}
+	}
+
+	&.-ds-color-success {
+		& #{$root}__content {
+			background-color: $color-success-background-strong;
+		}
+
+		& #{$root}__icon {
+			color: $color-success-icon;
+		}
+	}
+
+	&.-ds-color-fail {
+		& #{$root}__content {
+			background-color: $color-fail-background-strong;
+		}
+
+		& #{$root}__icon {
+			color: $color-fail-icon;
+		}
+	}
+
+	&.-ds-color-danger {
+		& #{$root}__content {
+			background-color: $color-danger-background-strong;
+		}
+
+		& #{$root}__icon {
+			color: $color-danger-icon;
+		}
+	}
+
+	&.-ds-color-neutral {
+		& #{$root}__content {
+			background-color: $color-neutral-background-heavy;
+		}
+
+		& #{$root}__icon {
+			color: $color-neutral-icon;
+		}
+	}
+}
+</style>
+
+<script lang="ts" setup>
+import {
+	BADGE_COLORS,
+	BADGE_SIZES,
+	BADGE_ELEVATIONS,
+	BadgeColor,
+	BadgeElevation,
+	BadgeSize,
+} from './Badge.consts';
+import Icon, { ICON_SIZES, IconItem } from '../Icons/Icon';
+import { computed } from 'vue';
+
+const {
+	size = BADGE_SIZES.SMALL,
+	color = BADGE_COLORS.PRIMARY,
+	elevation = BADGE_ELEVATIONS.X_SMALL,
+	icon,
+} = defineProps<{
+	color?: BadgeColor;
+	size?: BadgeSize;
+	label?: string;
+	icon?: IconItem;
+	imageUrl?: string;
+	elevation?: BadgeElevation;
+}>();
+
+const iconSize = computed(() => {
+	// Casting to BadgeSize to work around an IDE issue (PhpStorm incorrectly flags some case branches as unreachable)
+	switch (size as BadgeSize) {
+		case BADGE_SIZES.SMALL:
+			return ICON_SIZES.XXX_SMALL;
+		case BADGE_SIZES.MEDIUM:
+			return ICON_SIZES.XX_SMALL;
+		case BADGE_SIZES.LARGE:
+			return ICON_SIZES.X_SMALL;
+		case BADGE_SIZES.X_LARGE:
+		default:
+			return ICON_SIZES.SMALL;
+	}
+});
+</script>

package/lib/js/components/Badge/index.ts

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

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

@@ -1,7 +1,7 @@
 import Chip from './Chip.vue';
 import { CHIP_COLORS, CHIP_RADIUSES, CHIP_SIZES, CHIP_STATES } from './Chip.consts';
 import { ICONS } from '../Icons/Icon';
-import LogoBadge from './logo-badge.svg';
+import LogoBadge from '../../../images/logo-badge.svg';
 import { Args, ArgTypes, Meta, StoryFn } from '@storybook/vue3';
 
 export default {

package/lib/js/index.ts

@@ -1,5 +1,7 @@
 export { default as Avatar } from './components/Avatar';
 export * from './components/Avatar/Avatar.consts';
+export { default as Badge } from './components/Badge';
+export * from './components/Badge/Badge.consts';
 export { default as BadgeScore } from './components/BadgeScore';
 export { default as DsBadgeScore } from './components/BadgeScore';
 export * from './components/BadgeScore/BadgeScore.consts';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bethinkpl/design-system",
-  "version": "26.10.2",
+  "version": "26.11.0",
   "description": "Bethink universe design-system",
   "repository": {
     "type": "git",
@@ -62,7 +62,7 @@
     "eslint-config-prettier": "8.5.0",
     "eslint-plugin-import": "2.26.0",
     "eslint-plugin-storybook": "0.8.0",
-    "eslint-plugin-vue": "9.6.0",
+    "eslint-plugin-vue": "10.0.0",
     "flatpickr": "^4.6.13",
     "jest": "^29.4.0",
     "jest-environment-jsdom": "^29.4.0",
@@ -87,6 +87,7 @@
     "vite-plugin-dts": "^3.9.1",
     "vite-svg-loader": "^5.1.0",
     "vue": "3.5.12",
+    "vue-eslint-parser": "^10.1.1",
     "vue-popperjs": "github:bethinkpl/vue-popper#03c7912c4729386743b0cca8f39b35448cc3db7f"
   },
   "dependencies": {

package/docs/assets/Avatar-OqeGv3bT.js

@@ -1 +0,0 @@
-import{d as A,q as o,c as n,a as v,j as _,s as L,n as g,u as s,o as l}from"./vue.esm-bundler-DmkhfO_9.js";import{_ as S}from"./_plugin-vue_export-helper-DlAUqK2U.js";const e={XX_SMALL:"xx-small",X_SMALL:"x-small",SMALL:"small",MEDIUM:"medium",LARGE:"large",X_LARGE:"x-large"},M=["src","alt"],y={key:1,class:"ds-avatar__initials"},d=A({__name:"Avatar",props:{username:{},avatarUrl:{default:void 0},size:{default:e.X_SMALL}},setup(c){const t=c,u=["#1abc9c","#2ecc71","#3498db","#9b59b6","#34495e","#16a085","#27ae60","#2980b9","#8e44ad","#2c3e50","#f1c40f","#e67e22","#e74c3c","#f39c12","#d35400","#c0392b"];function m(a){const[r,i]=a.split(/\s+/);return r&&i?`${r[0]}${i[0]}`.toUpperCase():r.substring(0,2).toUpperCase()}const p=o(()=>{if(t.avatarUrl)return;const a=(t.username.charCodeAt(0)-65)%16;return u[a]}),f=o(()=>m(t.username));return(a,r)=>(l(),n("div",{class:g(["ds-avatar",{"-ds-xx-small":a.size===s(e).XX_SMALL,"-ds-x-small":a.size===s(e).X_SMALL,"-ds-small":a.size===s(e).SMALL,"-ds-medium":a.size===s(e).MEDIUM,"-ds-large":a.size===s(e).LARGE,"-ds-x-large":a.size===s(e).X_LARGE}])},[v("div",{class:"ds-avatar__content",style:L({backgroundColor:p.value})},[a.avatarUrl?(l(),n("img",{key:0,src:a.avatarUrl,alt:a.username,class:"ds-avatar__image"},null,8,M)):(l(),n("span",y,_(f.value),1))],4)],2))}}),b=S(d,[["__scopeId","data-v-11da23f8"]]);d.__docgenInfo={exportName:"default",displayName:"Avatar",description:"",tags:{},props:[{name:"username",required:!0,type:{name:"string"}},{name:"avatarUrl",required:!1,type:{name:"string"},defaultValue:{func:!1,value:"undefined"}},{name:"size",required:!1,type:{name:"AvatarSize"},defaultValue:{func:!1,value:"AVATAR_SIZES.X_SMALL"}}],sourceFiles:["/home/runner/work/design-system/design-system/lib/js/components/Avatar/Avatar.vue"]};export{b as A,e as a};

package/docs/assets/Avatar.stories-Ran7nhCi.js

@@ -1,35 +0,0 @@
-import{A as o,a as r}from"./Avatar-OqeGv3bT.js";import"./vue.esm-bundler-DmkhfO_9.js";import"./_plugin-vue_export-helper-DlAUqK2U.js";const z={title:"Components/Avatar",component:o,render:s=>({components:{Avatar:o},setup(){return{args:s}},template:'<Avatar v-bind="args" />'}),argTypes:{size:{control:"select",options:[...Object.values(r)]}}},a={args:{size:r.X_SMALL,username:"Dariusz Chrapek",avatarUrl:"https://wiecejnizlek.pl/wp-content/uploads/2021/08/Dariusz_Chrapek-uai-2996x2996-1-scaled.jpeg"}};a.parameters={design:{type:"figma",url:"https://www.figma.com/design/izQdYyiBR1GQgFkaOIfIJI/LMS---DS-Components?node-id=12364-12175&t=UpUoIm9oCAaH4dEp-4"}};const e={render:s=>({components:{Avatar:o},setup(){return{args:s,names:["Arkadiusz Kowalski","Bartosz Nowak","Cezary Kowalczyk","Dariusz Chrapek","Edward Nowak","Feliks Kowalski","Grzegorz Nowak","Henryk Kowalczyk","Ireneusz Nowak","Jacek Kowalski","Kamil Nowak","Leszek Kowalczyk","Marek Nowak","Norbert Kowalski","Oskar Nowak","Piotr Kowalczyk"]}},template:'<div style="display: flex; gap: 12px;  flex-wrap: wrap;"><div v-for="name in names"><Avatar :username="name" :size="args.size" /></div></div>'}),argTypes:{size:{control:"select",options:Object.values(r)},username:{control:!1},avatarUrl:{control:!1}},args:{size:r.X_SMALL}};var t,n,i;a.parameters={...a.parameters,docs:{...(t=a.parameters)==null?void 0:t.docs,source:{originalSource:`{
-  args: {
-    size: AVATAR_SIZES.X_SMALL,
-    username: 'Dariusz Chrapek',
-    avatarUrl: 'https://wiecejnizlek.pl/wp-content/uploads/2021/08/Dariusz_Chrapek-uai-2996x2996-1-scaled.jpeg'
-  }
-}`,...(i=(n=a.parameters)==null?void 0:n.docs)==null?void 0:i.source}}};var l,p,k;e.parameters={...e.parameters,docs:{...(l=e.parameters)==null?void 0:l.docs,source:{originalSource:`{
-  render: (args: AvatarProps) => ({
-    components: {
-      Avatar
-    },
-    setup() {
-      return {
-        args,
-        names: ['Arkadiusz Kowalski', 'Bartosz Nowak', 'Cezary Kowalczyk', 'Dariusz Chrapek', 'Edward Nowak', 'Feliks Kowalski', 'Grzegorz Nowak', 'Henryk Kowalczyk', 'Ireneusz Nowak', 'Jacek Kowalski', 'Kamil Nowak', 'Leszek Kowalczyk', 'Marek Nowak', 'Norbert Kowalski', 'Oskar Nowak', 'Piotr Kowalczyk']
-      };
-    },
-    template: \`<div style="display: flex; gap: 12px;  flex-wrap: wrap;"><div v-for="name in names"><Avatar :username="name" :size="args.size" /></div></div>\`
-  }),
-  argTypes: {
-    size: {
-      control: 'select',
-      options: Object.values(AVATAR_SIZES)
-    },
-    username: {
-      control: false
-    },
-    avatarUrl: {
-      control: false
-    }
-  },
-  args: {
-    size: AVATAR_SIZES.X_SMALL
-  }
-}`,...(k=(p=e.parameters)==null?void 0:p.docs)==null?void 0:k.source}}};const d=["Interactive","Colors"];export{e as Colors,a as Interactive,d as __namedExportsOrder,z as default};