@bethinkpl/design-system 26.13.0 → 26.14.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/design-system.umd.cjs +16 -16
- package/dist/design-system.umd.cjs.map +1 -1
- package/dist/lib/js/components/Avatar/Avatar.vue.d.ts +2 -0
- package/dist/lib/js/components/Dropdown/Dropdown.vue.d.ts +1 -1
- package/dist/lib/js/components/Headers/OverlayHeader/OverlayHeader.vue.d.ts +2 -2
- package/dist/lib/js/components/Pagination/Pagination.vue.d.ts +1 -1
- package/dist/lib/js/components/RichList/BasicRichListItem/BasicRichListItem.vue.d.ts +1 -1
- package/dist/lib/js/components/TextGroup/TextGroup.vue.d.ts +1 -1
- package/dist/lib/js/components/Toggles/CounterToggle/CounterToggle.vue.d.ts +1 -1
- package/dist/lib/js/components/Tooltip/Tooltip.vue.d.ts +1 -1
- package/docs/assets/Avatar-DUThlKLV.js +1 -0
- package/docs/assets/Avatar.stories-Dwgdl1h5.js +38 -0
- package/docs/assets/{BasicRichListItem.stories-BEJ0NthN.js → BasicRichListItem.stories-ePDSld8d.js} +1 -1
- package/docs/assets/{Color-ERTF36HU-6VQes8GD.js → Color-ERTF36HU-CUHUHSmH.js} +1 -1
- package/docs/assets/{DateBox.stories-DQkN-NA-.js → DateBox.stories-BP1Z4i2_.js} +1 -1
- package/docs/assets/{DatePicker-Dfk2S4XE.js → DatePicker-Bc1APlab.js} +1 -1
- package/docs/assets/{DatePicker.stories-BuPRHUPO.js → DatePicker.stories-AUPbbqFP.js} +1 -1
- package/docs/assets/{DateRangePicker-C591NaMz.js → DateRangePicker-CNuyzpfG.js} +1 -1
- package/docs/assets/{DateRangePicker.stories-U0CpMcdr.js → DateRangePicker.stories-BQFhc4cw.js} +1 -1
- package/docs/assets/{DocsRenderer-CFRXHY34-BtI7lPJt.js → DocsRenderer-CFRXHY34-BTRR5RRG.js} +5 -5
- package/docs/assets/{RichListItem.stories-B66Eh4Ya.js → RichListItem.stories-C7rIgxO4.js} +1 -1
- package/docs/assets/{SelectionTile-CTk2qsoq.js → SelectionTile-D9A_Tf3q.js} +1 -1
- package/docs/assets/{SelectionTile.stories-BQdf1ZAm.js → SelectionTile.stories-aEkis98r.js} +1 -1
- package/docs/assets/{iframe-D0_R78Pi.js → iframe-BmaPoam5.js} +3 -3
- package/docs/assets/{index-CmxKferx.js → index-g_7p32Ii.js} +1 -1
- package/docs/assets/{index-_KmMzH9C.js → index-z7xpE_Pa.js} +1 -1
- package/docs/assets/{preview-BVg41aHH.js → preview-DqmV_9DV.js} +1 -1
- package/docs/assets/{preview-bQNvU0Tw.js → preview-Ds_xi8UF.js} +2 -2
- package/docs/iframe.html +1 -1
- package/docs/project.json +1 -1
- package/lib/js/components/Avatar/Avatar.spec.ts +16 -0
- package/lib/js/components/Avatar/Avatar.stories.ts +4 -0
- package/lib/js/components/Avatar/Avatar.vue +23 -5
- package/package.json +1 -1
- package/docs/assets/Avatar-U_7Z6nZ2.js +0 -1
- package/docs/assets/Avatar.stories-CVysqINz.js +0 -37
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["./DocsRenderer-CFRXHY34-
|
|
2
|
-
import{_ as s}from"./iframe-
|
|
1
|
+
const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["./DocsRenderer-CFRXHY34-BTRR5RRG.js","./iframe-BmaPoam5.js","./_commonjsHelpers-Chg3vePA.js","./index-vG0co4wr.js"])))=>i.map(i=>d[i]);
|
|
2
|
+
import{_ as s}from"./iframe-BmaPoam5.js";import"../sb-preview/runtime.js";const{global:_}=__STORYBOOK_MODULE_GLOBAL__;var o,i=Object.entries((o=_.TAGS_OPTIONS)!=null?o:{}).reduce((e,r)=>{let[t,a]=r;return a.excludeFromDocsStories&&(e[t]=!0),e},{}),d={docs:{renderer:async()=>{let{DocsRenderer:e}=await s(()=>import("./DocsRenderer-CFRXHY34-BTRR5RRG.js").then(r=>r.am),__vite__mapDeps([0,1,2,3]),import.meta.url);return new e},stories:{filter:e=>{var r;return(e.tags||[]).filter(t=>i[t]).length===0&&!((r=e.parameters.docs)!=null&&r.disable)}}}};export{d as parameters};
|
package/docs/iframe.html
CHANGED
|
@@ -510,7 +510,7 @@
|
|
|
510
510
|
</script>
|
|
511
511
|
<link rel="stylesheet" href="./preview.css">
|
|
512
512
|
|
|
513
|
-
<script type="module" crossorigin src="./assets/iframe-
|
|
513
|
+
<script type="module" crossorigin src="./assets/iframe-BmaPoam5.js"></script>
|
|
514
514
|
</head>
|
|
515
515
|
|
|
516
516
|
<body>
|
package/docs/project.json
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"generatedAt":
|
|
1
|
+
{"generatedAt":1746705153196,"hasCustomBabel":false,"hasCustomWebpack":false,"hasStaticDirs":true,"hasStorybookEslint":true,"refCount":0,"testPackages":{"@types/jest":"29.5.13","@vue/vue3-jest":"29.2.2","jest":"29.7.0","jest-environment-jsdom":"29.7.0","ts-jest":"29.0.5"},"packageManager":{"type":"yarn","version":"1.22.22"},"preview":{"usesGlobals":false},"framework":{"name":"@storybook/vue3-vite","options":{}},"builder":"@storybook/builder-vite","renderer":"@storybook/vue3","portableStoriesFileCount":2,"storybookVersion":"8.3.4","storybookVersionSpecifier":"^8.3.4","language":"typescript","storybookPackages":{"@storybook/vue3":{"version":"8.3.4"},"@storybook/vue3-vite":{"version":"8.3.4"},"eslint-plugin-storybook":{"version":"0.8.0"},"storybook":{"version":"8.3.4"}},"addons":{"@storybook/addon-actions":{"version":"8.3.4"},"@storybook/addon-designs":{"version":"8.0.3"},"@storybook/addon-docs":{"version":"8.3.4"},"@storybook/addon-controls":{"version":"8.3.4"},"@storybook/addon-storysource":{"version":"8.3.4"},"@storybook/addon-viewport":{"version":"8.3.4"}}}
|
|
@@ -214,4 +214,20 @@ describe('Avatar', () => {
|
|
|
214
214
|
expect(accessStatusElement.exists()).toBe(true);
|
|
215
215
|
expect(accessStatusElement.find('img').attributes('src')).toBe(teamMemberImageUrl);
|
|
216
216
|
});
|
|
217
|
+
|
|
218
|
+
it('should pass activityStatusTooltip to the tooltip component', () => {
|
|
219
|
+
const tooltipText = 'Active now';
|
|
220
|
+
const wrapper = mount(Avatar, {
|
|
221
|
+
props: {
|
|
222
|
+
size: AVATAR_SIZES.MEDIUM,
|
|
223
|
+
username: 'Dariusz Chrapek',
|
|
224
|
+
activityStatus: AVATAR_ACTIVITY_STATUSES.ACTIVE,
|
|
225
|
+
activityStatusTooltip: tooltipText,
|
|
226
|
+
},
|
|
227
|
+
});
|
|
228
|
+
|
|
229
|
+
const tooltip = wrapper.findComponent({ name: 'Tooltip' });
|
|
230
|
+
expect(tooltip.exists()).toBe(true);
|
|
231
|
+
expect(tooltip.props('text')).toBe(tooltipText);
|
|
232
|
+
});
|
|
217
233
|
});
|
|
@@ -41,6 +41,9 @@ const meta: Meta<typeof Avatar> = {
|
|
|
41
41
|
},
|
|
42
42
|
options: [undefined, ...Object.values(AVATAR_ACTIVITY_STATUSES)],
|
|
43
43
|
},
|
|
44
|
+
activityStatusTooltip: {
|
|
45
|
+
control: 'text',
|
|
46
|
+
},
|
|
44
47
|
},
|
|
45
48
|
};
|
|
46
49
|
export default meta;
|
|
@@ -54,6 +57,7 @@ export const Interactive: Story = {
|
|
|
54
57
|
avatarUrl:
|
|
55
58
|
'https://wiecejnizlek.pl/wp-content/uploads/2021/08/Dariusz_Chrapek-uai-2996x2996-1-scaled.jpeg',
|
|
56
59
|
teamMemberImageUrl: 'https://lek.wiecejnizlek.pl/images/lek/logo-badge.svg',
|
|
60
|
+
activityStatusTooltip: 'Active now',
|
|
57
61
|
},
|
|
58
62
|
};
|
|
59
63
|
|
|
@@ -20,11 +20,21 @@
|
|
|
20
20
|
<span v-else class="ds-avatar__initials">{{ initials }}</span>
|
|
21
21
|
</div>
|
|
22
22
|
<div v-if="activityStatus" class="ds-avatar__activityStatus">
|
|
23
|
-
<ds-
|
|
24
|
-
:
|
|
25
|
-
|
|
26
|
-
:
|
|
27
|
-
|
|
23
|
+
<ds-tooltip
|
|
24
|
+
:key="activityStatusTooltip"
|
|
25
|
+
class="ds-avatar__activityStatusTooltip"
|
|
26
|
+
:text="activityStatusTooltip"
|
|
27
|
+
:is-disabled="!activityStatusTooltip"
|
|
28
|
+
is-pointer-visible
|
|
29
|
+
:placement="TOOLTIP_PLACEMENTS.BOTTOM"
|
|
30
|
+
:is-hidden-on-mobile="false"
|
|
31
|
+
>
|
|
32
|
+
<ds-badge
|
|
33
|
+
:color="activityStatusColor"
|
|
34
|
+
:elevation="BADGE_ELEVATIONS.X_SMALL"
|
|
35
|
+
:size="activityStatusSize"
|
|
36
|
+
/>
|
|
37
|
+
</ds-tooltip>
|
|
28
38
|
</div>
|
|
29
39
|
<div v-if="accessStatus" class="ds-avatar__accessStatus">
|
|
30
40
|
<ds-badge
|
|
@@ -169,6 +179,11 @@
|
|
|
169
179
|
top: -3px;
|
|
170
180
|
}
|
|
171
181
|
}
|
|
182
|
+
|
|
183
|
+
&__activityStatusTooltip {
|
|
184
|
+
align-items: center;
|
|
185
|
+
display: flex;
|
|
186
|
+
}
|
|
172
187
|
}
|
|
173
188
|
</style>
|
|
174
189
|
|
|
@@ -184,6 +199,7 @@ import {
|
|
|
184
199
|
import DsBadge, { BADGE_ELEVATIONS, BADGE_SIZES, BADGE_COLORS } from '../Badge';
|
|
185
200
|
import { computed } from 'vue';
|
|
186
201
|
import { ICONS } from '../Icons/Icon';
|
|
202
|
+
import DsTooltip, { TOOLTIP_PLACEMENTS } from '../Tooltip';
|
|
187
203
|
|
|
188
204
|
const {
|
|
189
205
|
size = AVATAR_SIZES.X_SMALL,
|
|
@@ -192,6 +208,7 @@ const {
|
|
|
192
208
|
activityStatus,
|
|
193
209
|
accessStatus,
|
|
194
210
|
teamMemberImageUrl,
|
|
211
|
+
activityStatusTooltip,
|
|
195
212
|
} = defineProps<{
|
|
196
213
|
username: string;
|
|
197
214
|
avatarUrl?: string;
|
|
@@ -199,6 +216,7 @@ const {
|
|
|
199
216
|
activityStatus?: AvatarActivityStatus;
|
|
200
217
|
accessStatus?: AvatarAccessStatus;
|
|
201
218
|
teamMemberImageUrl?: string;
|
|
219
|
+
activityStatusTooltip?: string;
|
|
202
220
|
}>();
|
|
203
221
|
|
|
204
222
|
const { initials, initialBackgroundColor } = useInitials();
|
package/package.json
CHANGED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{d as G,q as i,c as u,a as b,j as k,u as e,s as p,k as I,g as v,n as h,o}from"./vue.esm-bundler-DmkhfO_9.js";import{c as M,B as C,b as l,a as s}from"./Badge-DSmH78WU.js";import{I as d}from"./Icon-BPz80dqH.js";import{_ as O}from"./_plugin-vue_export-helper-DlAUqK2U.js";const a={XX_SMALL:"xx-small",X_SMALL:"x-small",SMALL:"small",MEDIUM:"medium",LARGE:"large",X_LARGE:"x-large"},_={ACTIVE:"active",INACTIVE:"inactive"},c={ACTIVE:"active",INACTIVE:"inactive",AWAITING:"awaiting",BLOCKED:"blocked",TEAM_MEMBER:"team-member"},q=["src","alt"],w={key:1,class:"ds-avatar__initials"},K={key:0,class:"ds-avatar__activityStatus"},F={key:1,class:"ds-avatar__accessStatus"},f=G({__name:"Avatar",props:{username:{},avatarUrl:{},size:{default:()=>a.X_SMALL},activityStatus:{},accessStatus:{},teamMemberImageUrl:{}},setup(r){const{initials:g,initialBackgroundColor:y}=V(),{accessStatusColor:T,accessStatusIcon:U,accessStatusSize:z,accessStatusImage:R}=B(),{activityStatusColor:X,activityStatusSize:N}=D();function V(){const t=["#1abc9c","#2ecc71","#3498db","#9b59b6","#34495e","#16a085","#27ae60","#2980b9","#8e44ad","#2c3e50","#f1c40f","#e67e22","#e74c3c","#f39c12","#d35400","#c0392b"];function n(A){const[m,E]=A.split(/\s+/);return m&&E?`${m[0]}${E[0]}`.toUpperCase():m.substring(0,2).toUpperCase()}const S=i(()=>{if(r.avatarUrl)return;const A=(r.username.charCodeAt(0)-65)%16;return t[A]});return{initials:i(()=>n(r.username)),initialBackgroundColor:S}}function B(){const t=i(()=>{switch(r.accessStatus){case c.ACTIVE:return l.SUCCESS;case c.INACTIVE:case c.AWAITING:return l.NEUTRAL;case c.BLOCKED:return l.DANGER;default:return}}),n=i(()=>{switch(r.accessStatus){case c.ACTIVE:return d.FA_UNLOCK_KEYHOLE;case c.BLOCKED:case c.INACTIVE:return d.FA_LOCK_KEYHOLE;case c.AWAITING:return d.FA_HOURGLASS_START;default:return}}),S=i(()=>{switch(r.size){case a.XX_SMALL:return s.SMALL;case a.X_SMALL:return s.SMALL;case a.SMALL:return s.SMALL;case a.MEDIUM:return s.MEDIUM;case a.LARGE:return s.MEDIUM;case a.X_LARGE:default:return s.X_LARGE}}),L=i(()=>{if(r.accessStatus===c.TEAM_MEMBER)return r.teamMemberImageUrl});return{accessStatusColor:t,accessStatusIcon:n,accessStatusSize:S,accessStatusImage:L}}function D(){const t=i(()=>{switch(r.activityStatus){case _.ACTIVE:return l.SUCCESS;default:case _.INACTIVE:return l.NEUTRAL}}),n=i(()=>{switch(r.size){case a.XX_SMALL:return s.X_SMALL;case a.X_SMALL:return s.SMALL;case a.SMALL:return s.SMALL;case a.MEDIUM:return s.MEDIUM;case a.LARGE:return s.MEDIUM;case a.X_LARGE:default:return s.MEDIUM}});return{activityStatusColor:t,activityStatusSize:n}}return(t,n)=>(o(),u("div",{class:h(["ds-avatar",{"-ds-xx-small":t.size===e(a).XX_SMALL,"-ds-x-small":t.size===e(a).X_SMALL,"-ds-small":t.size===e(a).SMALL,"-ds-medium":t.size===e(a).MEDIUM,"-ds-large":t.size===e(a).LARGE,"-ds-x-large":t.size===e(a).X_LARGE}])},[b("div",{class:"ds-avatar__content",style:p({backgroundColor:e(y)})},[t.avatarUrl?(o(),u("img",{key:0,src:t.avatarUrl,alt:t.username,class:"ds-avatar__image"},null,8,q)):(o(),u("span",w,k(e(g)),1))],4),t.activityStatus?(o(),u("div",K,[I(e(C),{color:e(X),elevation:e(M).X_SMALL,size:e(N)},null,8,["color","elevation","size"])])):v("",!0),t.accessStatus?(o(),u("div",F,[I(e(C),{color:e(T),elevation:e(M).SMALL,icon:e(U),size:e(z),"image-url":e(R)},null,8,["color","elevation","icon","size","image-url"])])):v("",!0)],2))}}),x=O(f,[["__scopeId","data-v-e662d6a3"]]);f.__docgenInfo={exportName:"default",displayName:"Avatar",description:"",tags:{},props:[{name:"username",required:!0,type:{name:"string"}},{name:"avatarUrl",required:!1,type:{name:"string"}},{name:"size",required:!1,type:{name:"AvatarSize"}},{name:"activityStatus",required:!1,type:{name:"AvatarActivityStatus"}},{name:"accessStatus",required:!1,type:{name:"AvatarAccessStatus"}},{name:"teamMemberImageUrl",required:!1,type:{name:"string"}}],sourceFiles:["/home/runner/work/design-system/design-system/lib/js/components/Avatar/Avatar.vue"]};export{x as A,a,c as b,_ as c};
|
|
@@ -1,37 +0,0 @@
|
|
|
1
|
-
import{A as o,a as r,b as k,c as m}from"./Avatar-U_7Z6nZ2.js";import"./vue.esm-bundler-DmkhfO_9.js";import"./Badge-DSmH78WU.js";import"./Icon-BPz80dqH.js";import"./_plugin-vue_export-helper-DlAUqK2U.js";const v={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)},accessStatus:{control:{type:"select",labels:{undefined:"None (undefined)"}},options:[void 0,...Object.values(k)]},activityStatus:{control:{type:"select",labels:{undefined:"None (undefined)"}},options:[void 0,...Object.values(m)]}}},e={args:{size:r.X_SMALL,username:"Dariusz Chrapek",avatarUrl:"https://wiecejnizlek.pl/wp-content/uploads/2021/08/Dariusz_Chrapek-uai-2996x2996-1-scaled.jpeg",teamMemberImageUrl:"https://lek.wiecejnizlek.pl/images/lek/logo-badge.svg"}};e.parameters={design:{type:"figma",url:"https://www.figma.com/design/izQdYyiBR1GQgFkaOIfIJI/LMS---DS-Components?node-id=12364-12175&t=UpUoIm9oCAaH4dEp-4"}};const a={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 v-bind="args" :username="name" /></div></div>'}),argTypes:{size:{control:"select",options:Object.values(r)},username:{control:!1},avatarUrl:{control:!1}},args:{size:r.X_SMALL,teamMemberImageUrl:"https://lek.wiecejnizlek.pl/images/lek/logo-badge.svg"}};var t,l,i;e.parameters={...e.parameters,docs:{...(t=e.parameters)==null?void 0:t.docs,source:{originalSource:`{
|
|
2
|
-
args: {
|
|
3
|
-
size: AVATAR_SIZES.X_SMALL,
|
|
4
|
-
username: 'Dariusz Chrapek',
|
|
5
|
-
avatarUrl: 'https://wiecejnizlek.pl/wp-content/uploads/2021/08/Dariusz_Chrapek-uai-2996x2996-1-scaled.jpeg',
|
|
6
|
-
teamMemberImageUrl: 'https://lek.wiecejnizlek.pl/images/lek/logo-badge.svg'
|
|
7
|
-
}
|
|
8
|
-
}`,...(i=(l=e.parameters)==null?void 0:l.docs)==null?void 0:i.source}}};var n,p,c;a.parameters={...a.parameters,docs:{...(n=a.parameters)==null?void 0:n.docs,source:{originalSource:`{
|
|
9
|
-
render: (args: AvatarProps) => ({
|
|
10
|
-
components: {
|
|
11
|
-
Avatar
|
|
12
|
-
},
|
|
13
|
-
setup() {
|
|
14
|
-
return {
|
|
15
|
-
args,
|
|
16
|
-
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']
|
|
17
|
-
};
|
|
18
|
-
},
|
|
19
|
-
template: \`<div style="display: flex; gap: 12px; flex-wrap: wrap;"><div v-for="name in names"><Avatar v-bind="args" :username="name" /></div></div>\`
|
|
20
|
-
}),
|
|
21
|
-
argTypes: {
|
|
22
|
-
size: {
|
|
23
|
-
control: 'select',
|
|
24
|
-
options: Object.values(AVATAR_SIZES)
|
|
25
|
-
},
|
|
26
|
-
username: {
|
|
27
|
-
control: false
|
|
28
|
-
},
|
|
29
|
-
avatarUrl: {
|
|
30
|
-
control: false
|
|
31
|
-
}
|
|
32
|
-
},
|
|
33
|
-
args: {
|
|
34
|
-
size: AVATAR_SIZES.X_SMALL,
|
|
35
|
-
teamMemberImageUrl: 'https://lek.wiecejnizlek.pl/images/lek/logo-badge.svg'
|
|
36
|
-
}
|
|
37
|
-
}`,...(c=(p=a.parameters)==null?void 0:p.docs)==null?void 0:c.source}}};const A=["Interactive","Colors"];export{a as Colors,e as Interactive,A as __namedExportsOrder,v as default};
|