@bethinkpl/design-system 26.4.0 → 26.6.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 +18 -18
- package/dist/design-system.umd.cjs.map +1 -1
- package/dist/lib/js/components/DatePickers/DatePicker/DatePicker.composables.d.ts +1 -1
- package/dist/lib/js/components/DatePickers/DatePicker/DatePicker.vue.d.ts +31 -8
- package/dist/lib/js/components/DatePickers/DateRangePicker/DateRangePicker.vue.d.ts +4 -1
- package/dist/lib/js/components/Drawer/DrawerTile/DrawerTile.vue.d.ts +40 -14
- package/dist/lib/js/components/Headers/OverlayHeader/OverlayHeader.vue.d.ts +10 -0
- package/dist/lib/js/components/Outline/OutlineItem/OutlineItem.vue.d.ts +1 -0
- package/dist/lib/js/components/RichList/BasicRichListItem/BasicRichListItem.vue.d.ts +122 -0
- package/dist/lib/js/components/SelectList/SelectListItemTile/SelectListItemTile.vue.d.ts +40 -14
- package/dist/lib/js/components/TextGroup/TextGroup.vue.d.ts +121 -0
- package/dist/lib/js/components/Tile/Tile.consts.d.ts +22 -0
- package/dist/lib/js/components/Tile/Tile.sb.shared.d.ts +1462 -0
- package/dist/lib/js/components/Tile/Tile.shared.d.ts +9 -4
- package/dist/lib/js/components/Tile/Tile.vue.d.ts +22 -7
- package/dist/lib/js/components/Tooltip/Tooltip.vue.d.ts +10 -0
- package/docs/assets/BasicRichListItem-Ctm7LWMn.js +1 -0
- package/docs/assets/{BasicRichListItem.stories-CYAxAAa4.js → BasicRichListItem.stories-CW9os382.js} +9 -5
- package/docs/assets/{Color-ERTF36HU-BKLy-2-d.js → Color-ERTF36HU-CqJ5SSs8.js} +1 -1
- package/docs/assets/DatePicker-Br-Dxnyn.js +2 -0
- package/docs/assets/DatePicker.stories-C4sN46Ws.js +175 -0
- package/docs/assets/DateRangePicker-B2xmoGPO.js +1 -0
- package/docs/assets/{DateRangePicker.stories-BEQd6aEn.js → DateRangePicker.stories-DGh5m4TF.js} +1 -1
- package/docs/assets/{DocsRenderer-CFRXHY34-vJAQuqDP.js → DocsRenderer-CFRXHY34-CemqquOQ.js} +5 -5
- package/docs/assets/{DrawerTile-BqpTb_42.js → DrawerTile-OeT5gefI.js} +1 -1
- package/docs/assets/DrawerTile.stories-nBKWobdB.js +10 -0
- package/docs/assets/OutlineItem-B0GAacWf.js +1 -0
- package/docs/assets/{OutlineItem.stories-CEsNJBgo.js → OutlineItem.stories-RvYTOp9N.js} +1 -1
- package/docs/assets/{OverlayHeader-Cuwk2J3B.js → OverlayHeader--26-GHPy.js} +1 -1
- package/docs/assets/{OverlayHeader.stories-WMRsiDpt.js → OverlayHeader.stories-BVxhjyuC.js} +1 -1
- package/docs/assets/{RichListItem.stories-CtgWAG3q.js → RichListItem.stories-B_DlwcQo.js} +1 -1
- package/docs/assets/SelectListItemTile-ohFw-wM4.js +1 -0
- package/docs/assets/SelectListItemTile.stories-BRCqpIYj.js +19 -0
- package/docs/assets/{SelectionTile-dsZMyVPh.js → SelectionTile-CjfV3f7H.js} +1 -1
- package/docs/assets/{SelectionTile.stories-DsAapWdD.js → SelectionTile.stories-PT6dhdE2.js} +1 -1
- package/docs/assets/TextGroup-lwPvABi6.js +1 -0
- package/docs/assets/TextGroup.stories-CnojKPTw.js +56 -0
- package/docs/assets/{ThreeColumnLayout-CRPRmmvx.js → ThreeColumnLayout-BR3bkVIs.js} +1 -1
- package/docs/assets/{ThreeColumnLayout.stories-CeCLjYHh.js → ThreeColumnLayout.stories-V4L7zdf_.js} +1 -1
- package/docs/assets/Tile-DjRk5xHI.js +1 -0
- package/docs/assets/Tile.sb.shared-Dt0Nhl_4.js +20 -0
- package/docs/assets/Tile.stories-lM4we8lW.js +12 -0
- package/docs/assets/Tooltip-Cni6OHo9.js +1 -0
- package/docs/assets/{Tooltip.stories-B94PUKgP.js → Tooltip.stories-C3h4ABpf.js} +1 -1
- package/docs/assets/{iframe-DuOsjH1S.js → iframe-OBly2w25.js} +11 -11
- package/docs/assets/{index-TQ9qBbRg.js → index-BX4u4pqi.js} +1 -1
- package/docs/assets/{index-D4AlyEjM.js → index-DRNPKjaN.js} +1 -1
- package/docs/assets/{preview-BjkZFWp3.js → preview-BA4xsxRI.js} +2 -2
- package/docs/assets/{preview-D76Q7lmj.js → preview-ByrBU2E6.js} +1 -1
- package/docs/iframe.html +1 -1
- package/docs/index.json +1 -1
- package/docs/project.json +1 -1
- package/lib/js/components/DatePickers/DatePicker/DatePicker.composables.ts +22 -1
- package/lib/js/components/DatePickers/DatePicker/DatePicker.stories.ts +26 -1
- package/lib/js/components/DatePickers/DatePicker/DatePicker.vue +36 -4
- package/lib/js/components/DatePickers/DateRangePicker/DateRangePicker.vue +15 -2
- package/lib/js/components/Layouts/ThreeColumnLayout/ThreeColumnLayout.vue +1 -0
- package/lib/js/components/Outline/OutlineItem/OutlineItem.vue +2 -1
- package/lib/js/components/RichList/BasicRichListItem/BasicRichListItem.stories.ts +6 -0
- package/lib/js/components/RichList/BasicRichListItem/BasicRichListItem.vue +5 -0
- package/lib/js/components/SelectList/SelectListItemTile/SelectListItemTile.vue +1 -1
- package/lib/js/components/TextGroup/TextGroup.stories.ts +20 -0
- package/lib/js/components/TextGroup/TextGroup.vue +51 -8
- package/lib/js/components/Tile/Tile.consts.ts +26 -0
- package/lib/js/components/Tile/Tile.sb.shared.ts +38 -4
- package/lib/js/components/Tile/Tile.shared.ts +19 -4
- package/lib/js/components/Tile/Tile.stories.ts +2 -2
- package/lib/js/components/Tile/Tile.vue +93 -44
- package/lib/js/components/Tooltip/Tooltip.vue +15 -1
- package/package.json +1 -1
- package/docs/assets/BasicRichListItem-VxP1mYya.js +0 -1
- package/docs/assets/DatePicker-B1ILf2Dx.js +0 -2
- package/docs/assets/DatePicker.stories-DOAIlaQC.js +0 -95
- package/docs/assets/DateRangePicker-DCZj8tMQ.js +0 -1
- package/docs/assets/DrawerTile.stories-BXRxmk1J.js +0 -10
- package/docs/assets/OutlineItem-BSNc7fID.js +0 -1
- package/docs/assets/SelectListItemTile-CRDx7Wjx.js +0 -1
- package/docs/assets/SelectListItemTile.stories-CADs56nZ.js +0 -19
- package/docs/assets/TextGroup-C6PK25ok.js +0 -1
- package/docs/assets/TextGroup.stories-DnrIWKMT.js +0 -48
- package/docs/assets/Tile-C731KsjF.js +0 -1
- package/docs/assets/Tile.sb.shared-Dr6W7Z8_.js +0 -16
- package/docs/assets/Tile.stories-CZlgEnY4.js +0 -12
- package/docs/assets/Tooltip-4m2CjENZ.js +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
import{
|
|
1
|
+
import{c as n,p as t}from"./Tile-DjRk5xHI.js";import{d as a,c as i,k as c,p,r as l,o as m}from"./vue.esm-bundler-CWlcb7ht.js";import{_ as d}from"./_plugin-vue_export-helper-DlAUqK2U.js";const o=a({name:"DrawerTile",components:{DsTile:n},props:t,emits:{click:()=>!0}}),_={class:"ds-drawerTile"};function f(e,s,u,k,w,D){const r=l("ds-tile");return m(),i("div",_,[c(r,p(e.$props,{onClick:s[0]||(s[0]=T=>e.$emit("click"))}),null,16)])}const y=d(o,[["render",f],["__scopeId","data-v-3aa8c837"]]);o.__docgenInfo={displayName:"DrawerTile",exportName:"default",description:"",tags:{},events:[{name:"click"}],sourceFiles:["/home/runner/work/design-system/design-system/lib/js/components/Drawer/DrawerTile/DrawerTile.vue"]};export{y as D};
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import{D as o}from"./DrawerTile-OeT5gefI.js";import{a as p,b as n,t as m,d as i}from"./Tile.sb.shared-Dt0Nhl_4.js";import"./Tile-DjRk5xHI.js";import"./Icon-ChGia3n4.js";import"./vue.esm-bundler-CWlcb7ht.js";import"./_plugin-vue_export-helper-DlAUqK2U.js";import"./Banner-BmKYBJ1B.js";import"./Button-DVtHJ-a3.js";import"./Divider-4HN2u4Et.js";import"./IconButton-rhUVXzuc.js";import"./device-9fgosCm4.js";const _={title:"Components/Drawer/DrawerTile",component:o},c=s=>({components:{DrawerTile:o},setup(){return s},template:m("drawer-tile"),data:i}),e=c.bind({});e.argTypes=p;e.args=n;e.parameters={design:{type:"figma",url:"https://www.figma.com/file/izQdYyiBR1GQgFkaOIfIJI/LMS---DS-Components?node-id=6785-111025&t=pzyp7YuJcnGNBfS5-4"}};var r,t,a;e.parameters={...e.parameters,docs:{...(r=e.parameters)==null?void 0:r.docs,source:{originalSource:`args => ({
|
|
2
|
+
components: {
|
|
3
|
+
DrawerTile
|
|
4
|
+
},
|
|
5
|
+
setup() {
|
|
6
|
+
return args;
|
|
7
|
+
},
|
|
8
|
+
template: template('drawer-tile'),
|
|
9
|
+
data
|
|
10
|
+
})`,...(a=(t=e.parameters)==null?void 0:t.docs)==null?void 0:a.source}}};const b=["Interactive"];export{e as Interactive,b as __namedExportsOrder,_ as default};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{a as S,I as o,b as O}from"./Icon-ChGia3n4.js";import{d as E,t as m,c as n,a as u,n as l,j as i,g as t,b as d,f as I,F as b,l as y,r as L,o as a}from"./vue.esm-bundler-CWlcb7ht.js";import{_ as v}from"./_plugin-vue_export-helper-DlAUqK2U.js";const r={SMALL:"small",MEDIUM:"medium"},c={DEFAULT:"default",DISABLED:"disabled"},f={NEUTRAL_WEAK:"neutralWeak",NEUTRAL:"neutral"},p=E({name:"OutlineItem",components:{DsIcon:S},props:{size:{type:String,default:r.SMALL,validator(e){return Object.values(r).includes(e)}},backgroundColor:{type:String,default:f.NEUTRAL_WEAK,validator(e){return Object.values(f).includes(e)}},iconLeft:{type:Object,default:null,validator(e){return e==null||Object.values(o).includes(m(e))}},iconRight:{type:Object,default:null,validator(e){return e==null||Object.values(o).includes(m(e))}},iconRightRotation:{type:Number,default:null,validator(e){return[90,180,270].includes(e)}},index:{type:Number,default:null},label:{type:String,default:""},isLabelUppercase:{type:Boolean,default:!1},additionalText:{type:String,default:null},state:{type:String,default:c.DEFAULT,validator(e){return Object.values(c).includes(e)}},isSelected:{type:Boolean,default:!1},isDone:{type:Boolean,default:!1},hasSelectedIconsColorPrimary:{type:Boolean,default:!0},isSelectedInteractive:{type:Boolean,default:!1}},data(){return{ICONS:Object.freeze(o),ICON_SIZES:Object.freeze(O),OUTLINE_ITEM_BACKGROUND_COLORS:Object.freeze(f),OUTLINE_ITEM_SIZES:Object.freeze(r)}},computed:{isDisabled(){return this.state===c.DISABLED}}}),T={class:"ds-outlineItem__text"},_={key:0,class:"ds-outlineItem__additionalText"};function N(e,C,g,U,A,R){const s=L("ds-icon");return a(),n("div",{class:l(["ds-outlineItem",{"-ds-disabled":e.isDisabled,"-ds-medium":e.size===e.OUTLINE_ITEM_SIZES.MEDIUM,"-ds-selected":e.isSelected,"-ds-hoverable":!e.isSelected||e.isSelectedInteractive,"-ds-backgroundNeutral":e.backgroundColor===e.OUTLINE_ITEM_BACKGROUND_COLORS.NEUTRAL}])},[u("div",{class:l(["ds-outlineItem__content",{"-ds-centeredContent":e.$slots.default}])},[e.index!==null?(a(),n("span",{key:0,class:l(["ds-outlineItem__index",{"-ds-active":e.isSelected}])},i(e.index)+". ",3)):t("",!0),e.iconLeft?(a(),d(s,{key:1,class:l(["ds-outlineItem__icon",{"-ds-active":e.isSelected&&e.hasSelectedIconsColorPrimary}]),icon:e.iconLeft,size:e.ICON_SIZES.X_SMALL},null,8,["class","icon","size"])):t("",!0),u("span",T,[u("span",{class:l(["ds-outlineItem__label",{"-ds-uppercase":e.isLabelUppercase}])},[e.$slots.labelSlot?I(e.$slots,"labelSlot",{key:0},void 0,!0):(a(),n(b,{key:1},[y(i(e.label),1)],64))],2),e.additionalText?(a(),n("span",_,i(e.additionalText),1)):t("",!0)])],2),e.$slots.default||e.isDone||e.iconRight?(a(),n("div",{key:0,class:l(["ds-outlineItem__rightContent",{"-ds-centeredContent":e.$slots.default}])},[e.$slots.default?I(e.$slots,"default",{key:0},void 0,!0):t("",!0),e.isDone?(a(),d(s,{key:1,class:"ds-outlineItem__icon -ds-active",icon:e.ICONS.FA_CHECK_SOLID,size:e.ICON_SIZES.X_SMALL},null,8,["icon","size"])):e.iconRight?(a(),d(s,{key:2,class:l(["ds-outlineItem__icon",{"-ds-active":e.isSelected&&e.hasSelectedIconsColorPrimary}]),icon:e.iconRight,size:e.ICON_SIZES.X_SMALL,rotation:e.iconRightRotation},null,8,["class","icon","size","rotation"])):t("",!0)],2)):t("",!0)],2)}const k=v(p,[["render",N],["__scopeId","data-v-ed113d02"]]);p.__docgenInfo={displayName:"OutlineItem",exportName:"default",description:"",tags:{},props:[{name:"size",type:{name:"string"},defaultValue:{func:!1,value:"OUTLINE_ITEM_SIZES.SMALL"}},{name:"backgroundColor",type:{name:"string"},defaultValue:{func:!1,value:"OUTLINE_ITEM_BACKGROUND_COLORS.NEUTRAL_WEAK"}},{name:"iconLeft",type:{name:"object"},defaultValue:{func:!1,value:"null"}},{name:"iconRight",type:{name:"object"},defaultValue:{func:!1,value:"null"}},{name:"iconRightRotation",type:{name:"number"},defaultValue:{func:!1,value:"null"},values:[90,180,270]},{name:"index",type:{name:"number"},defaultValue:{func:!1,value:"null"}},{name:"label",type:{name:"string"},defaultValue:{func:!1,value:"''"}},{name:"isLabelUppercase",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"additionalText",type:{name:"string"},defaultValue:{func:!1,value:"null"}},{name:"state",type:{name:"string"},defaultValue:{func:!1,value:"OUTLINE_ITEM_STATES.DEFAULT"}},{name:"isSelected",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"isDone",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"hasSelectedIconsColorPrimary",type:{name:"boolean"},defaultValue:{func:!1,value:"true"}},{name:"isSelectedInteractive",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}}],slots:[{name:"labelSlot"},{name:"default"}],sourceFiles:["/home/runner/work/design-system/design-system/lib/js/components/Outline/OutlineItem/OutlineItem.vue"]};export{k as O,r as a,f as b,c};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{O as i,a,b as s,c as r}from"./OutlineItem-
|
|
1
|
+
import{O as i,a,b as s,c as r}from"./OutlineItem-B0GAacWf.js";import{C as d}from"./Chip-D-3z8YPj.js";import{I as t}from"./Icon-ChGia3n4.js";import"./vue.esm-bundler-CWlcb7ht.js";import"./_plugin-vue_export-helper-DlAUqK2U.js";import"./IconButton-rhUVXzuc.js";import"./Button-DVtHJ-a3.js";import"./device-9fgosCm4.js";const x={title:"Components/Outline/OutlineItem",component:i},p=c=>({components:{OutlineItem:i,DsChip:d},setup(){return c},data(){return{ICONS:Object.freeze(t)}},template:`
|
|
2
2
|
<outline-item :label="label" :additional-text="additionalText" :size="size" :state="state"
|
|
3
3
|
:icon-left="ICONS[iconLeft]" :icon-right="ICONS[iconRight]" :is-done="isDone"
|
|
4
4
|
:is-selected="isSelected" :background-color="backgroundColor" :index="index"
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{I as L}from"./IconButton-rhUVXzuc.js";import{D as A,a as C}from"./Divider-4HN2u4Et.js";import{D as I,c as f}from"./Dropdown-CR-eIdCF.js";import{D}from"./Skeleton-Budxm1Jq.js";import{T as b,a as g}from"./Tooltip-
|
|
1
|
+
import{I as L}from"./IconButton-rhUVXzuc.js";import{D as A,a as C}from"./Divider-4HN2u4Et.js";import{D as I,c as f}from"./Dropdown-CR-eIdCF.js";import{D}from"./Skeleton-Budxm1Jq.js";import{T as b,a as g}from"./Tooltip-Cni6OHo9.js";import{I as w,i as H,h}from"./Button-DVtHJ-a3.js";import{I as c}from"./Icon-ChGia3n4.js";import{d as k,t as U,c as o,k as r,g as t,f as n,n as u,j as T,a as d,F as R,e as _,r as l,o as s}from"./vue.esm-bundler-CWlcb7ht.js";import{_ as B}from"./_plugin-vue_export-helper-DlAUqK2U.js";const p={NEUTRAL_GHOST:"neutralGhost",NEUTRAL:"neutral",SUCCESS:"success",FAIL:"fail",WARNING:"warning"},O={DEFAULT:"default",LOADING:"loading"},V=e=>(e==null?void 0:e.tagName)==="INPUT"||(e==null?void 0:e.tagName)==="SELECT"||(e==null?void 0:e.tagName)==="TEXTAREA"||!!(e!=null&&e.isContentEditable),S=k({name:"OverlayHeader",components:{DsIconButton:L,DsDivider:A,DsDropdown:I,DsSkeleton:D,DsTooltip:b},props:{title:{type:String,required:!0},shortTitle:{type:String,default:null},eyebrowText:{type:String,default:null},borderColor:{type:String,default:p.NEUTRAL_GHOST,validator:e=>Object.values(p).includes(e)},isTitleInteractive:{type:Boolean,default:!1},state:{type:String,default:O.DEFAULT,validator(e){return Object.values(O).includes(e)}},dropdownIcon:{type:Object,default:()=>c.FA_ELLIPSIS_VERTICAL,validator(e){return Object.values(c).includes(U(e))}}},emits:{close:()=>!0,titleClick:()=>!0},data(){return{ICON_BUTTON_SIZES:Object.freeze(w),ICON_BUTTON_COLORS:Object.freeze(H),ICON_BUTTON_STATES:Object.freeze(h),ICONS:Object.freeze(c),DIVIDER_PROMINENCES:Object.freeze(C),OVERLAY_HEADER_BORDER_COLORS:Object.freeze(p),OVERLAY_HEADER_STATES:Object.freeze(O),DROPDOWN_PLACEMENTS:Object.freeze(f),isDropdownOpen:!1,TOOLTIP_PLACEMENTS:Object.freeze(g)}},computed:{isLoading(){return this.state===O.LOADING}},beforeUnmount(){window.removeEventListener("keydown",this.onKeydown)},mounted(){window.addEventListener("keydown",this.onKeydown)},methods:{onKeydown(e){if(!V(e.target))switch(e.key){case"q":case"Q":e.stopPropagation(),this.$emit("close");break}},onTitleClick(){this.isTitleInteractive&&this.$emit("titleClick")}}}),$={key:0,class:"ds-overlayHeader__loadingWrapper"},P={key:1,class:"ds-overlayHeader__accessory"},j={key:2,class:"ds-overlayHeader__content"},M={key:0,class:"ds-overlayHeader__eyebrow"},z=["title"],F={key:1,class:"ds-overlayHeader__eyebrowAccessory"},G={class:"ds-overlayHeader__main"},Y={key:0,class:"ds-overlayHeader__titleLeading"},W=["title"],Z={class:"ds-overlayHeader__title -ds-desktop"},K={class:"ds-overlayHeader__title -ds-mobile"},q={key:2,class:"ds-overlayHeader__titleTrailingWrapper"},Q={class:"ds-overlayHeader__titleTrailing"},X={class:"ds-overlayHeader__actions"};function J(e,a,x,ee,oe,se){const E=l("ds-skeleton"),y=l("ds-divider"),v=l("ds-icon-button"),N=l("ds-dropdown"),m=l("ds-tooltip");return s(),o("div",{class:u(["ds-overlayHeader",{"-ds-borderNeutral":e.borderColor===e.OVERLAY_HEADER_BORDER_COLORS.NEUTRAL,"-ds-borderSuccess":e.borderColor===e.OVERLAY_HEADER_BORDER_COLORS.SUCCESS,"-ds-borderFail":e.borderColor===e.OVERLAY_HEADER_BORDER_COLORS.FAIL,"-ds-borderWarning":e.borderColor===e.OVERLAY_HEADER_BORDER_COLORS.WARNING}])},[e.isLoading?(s(),o("div",$,[r(E,{width:"50%",height:"12px"}),r(E,{class:"ds-overlayHeader__loadingBar -ds-desktop",width:"100%",height:"20px"}),r(E,{class:"ds-overlayHeader__loadingBar -ds-mobile",width:"100%",height:"18px"})])):t("",!0),!e.isLoading&&e.$slots.accessory?(s(),o("div",P,[n(e.$slots,"accessory",{},void 0,!0)])):t("",!0),e.isLoading?t("",!0):(s(),o("div",j,[e.eyebrowText||e.$slots.eyebrowAccessory?(s(),o("div",M,[e.eyebrowText?(s(),o("div",{key:0,class:u(["ds-overlayHeader__eyebrowText",{"-ds-withRightMargin":e.$slots.eyebrowAccessory}]),title:e.eyebrowText},T(e.eyebrowText),11,z)):t("",!0),e.$slots.eyebrowAccessory?(s(),o("div",F,[n(e.$slots,"eyebrowAccessory",{},void 0,!0)])):t("",!0)])):t("",!0),d("div",G,[e.$slots.titleLeading?(s(),o("div",Y,[n(e.$slots,"titleLeading",{},void 0,!0)])):t("",!0),e.title||e.shortTitle?(s(),o("div",{key:1,class:u(["ds-overlayHeader__titleWrapper",{"-ds-interactive":e.isTitleInteractive}]),title:e.title,onClick:a[0]||(a[0]=(...i)=>e.onTitleClick&&e.onTitleClick(...i))},[d("div",Z,T(e.title),1),d("div",K,T(e.shortTitle||e.title),1)],10,W)):t("",!0),e.$slots.titleTrailing?(s(),o("div",q,[d("div",Q,[n(e.$slots,"titleTrailing",{},void 0,!0)])])):t("",!0)])])),!e.isLoading&&e.$slots.actions?(s(),o(R,{key:3},[d("div",X,[n(e.$slots,"actions",{},void 0,!0)]),r(y,{class:"ds-overlayHeader__divider -ds-mobileHidden",prominence:e.DIVIDER_PROMINENCES.STRONG,"is-vertical":""},null,8,["prominence"])],64)):t("",!0),!e.isLoading&&e.$slots.dropdown?(s(),o(R,{key:4},[r(N,{"boundaries-selector":"body",placement:e.DROPDOWN_PLACEMENTS.BOTTOM_END,onShow:a[1]||(a[1]=i=>e.isDropdownOpen=!0),onHide:a[2]||(a[2]=i=>e.isDropdownOpen=!1)},{reference:_(()=>[r(v,{icon:e.dropdownIcon,size:e.ICON_BUTTON_SIZES.MEDIUM,color:e.ICON_BUTTON_COLORS.NEUTRAL,state:e.isDropdownOpen?e.ICON_BUTTON_STATES.HOVERED:e.ICON_BUTTON_STATES.DEFAULT},null,8,["icon","size","color","state"])]),default:_(({close:i})=>[n(e.$slots,"dropdown",{close:i},void 0,!0)]),_:3},8,["placement"]),r(y,{class:"ds-overlayHeader__divider",prominence:e.DIVIDER_PROMINENCES.STRONG,"is-vertical":""},null,8,["prominence"])],64)):t("",!0),r(m,{"is-pointer-visible":!1,placement:e.TOOLTIP_PLACEMENTS.LEFT,text:"Zamknij — Q"},{default:_(()=>[r(v,{"data-test-selector":"overlay-header-close-button",icon:e.ICONS.FA_XMARK,size:e.ICON_BUTTON_SIZES.MEDIUM,color:e.ICON_BUTTON_COLORS.NEUTRAL,onClick:a[3]||(a[3]=i=>e.$emit("close"))},null,8,["icon","size","color"])]),_:1},8,["placement"])],2)}const ce=B(S,[["render",J],["__scopeId","data-v-fc6a5a13"]]);S.__docgenInfo={displayName:"OverlayHeader",exportName:"default",description:"",tags:{},props:[{name:"title",type:{name:"string"},required:!0},{name:"shortTitle",type:{name:"string"},defaultValue:{func:!1,value:"null"}},{name:"eyebrowText",type:{name:"string"},defaultValue:{func:!1,value:"null"}},{name:"borderColor",type:{name:"string"},defaultValue:{func:!1,value:"OVERLAY_HEADER_BORDER_COLORS.NEUTRAL_GHOST"}},{name:"isTitleInteractive",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"state",type:{name:"string"},defaultValue:{func:!1,value:"OVERLAY_HEADER_STATES.DEFAULT"}},{name:"dropdownIcon",type:{name:"object"},defaultValue:{func:!0,value:"() => ICONS.FA_ELLIPSIS_VERTICAL"}}],events:[{name:"close"},{name:"titleClick"}],slots:[{name:"accessory"},{name:"eyebrowAccessory"},{name:"titleLeading"},{name:"titleTrailing"},{name:"actions"},{name:"dropdown",scoped:!0,bindings:[{name:"close",title:"binding"}]}],sourceFiles:["/home/runner/work/design-system/design-system/lib/js/components/Headers/OverlayHeader/OverlayHeader.vue"]};export{ce as O,p as a,O as b};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{O as o,a as s,b as n}from"./OverlayHeader-
|
|
1
|
+
import{O as o,a as s,b as n}from"./OverlayHeader--26-GHPy.js";import{I as l}from"./Icon-ChGia3n4.js";import"./IconButton-rhUVXzuc.js";import"./Button-DVtHJ-a3.js";import"./vue.esm-bundler-CWlcb7ht.js";import"./_plugin-vue_export-helper-DlAUqK2U.js";import"./device-9fgosCm4.js";import"./Divider-4HN2u4Et.js";import"./Dropdown-CR-eIdCF.js";import"./vue-popper-CpfGMX4Q.js";import"./_commonjsHelpers-Chg3vePA.js";import"./Skeleton-Budxm1Jq.js";import"./Tooltip-Cni6OHo9.js";const A={title:"Components/Headers/OverlayHeader",component:o},d=i=>({components:{OverlayHeader:o},setup(){return{args:i}},methods:{onClose(){console.log("OverlayHeader emitted close event")}},data(){return{ICONS:Object.freeze(l)}},template:`
|
|
2
2
|
<div style="height: 300px">
|
|
3
3
|
<overlay-header v-bind=args :dropdown-icon="ICONS[args.dropdownIcon]" @close="onClose">
|
|
4
4
|
<template v-if="args.accessorySlot" #accessory>
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{i as n,R as l,a as c,b as m,c as d,d as _,e as p,f}from"./GroupRichListItem-DEqhXKuF.js";import{c as g,I as s}from"./Icon-ChGia3n4.js";import"./BadgeScore-C0Ghj-5s.js";import"./Banner-BmKYBJ1B.js";import"./Button-DVtHJ-a3.js";import"./ToggleButton-APZXu2t7.js";import"./Card-CbIL2Iiq.js";import"./CardExpandable-DvrXNsTR.js";import"./DatePicker-
|
|
1
|
+
import{i as n,R as l,a as c,b as m,c as d,d as _,e as p,f}from"./GroupRichListItem-DEqhXKuF.js";import{c as g,I as s}from"./Icon-ChGia3n4.js";import"./BadgeScore-C0Ghj-5s.js";import"./Banner-BmKYBJ1B.js";import"./Button-DVtHJ-a3.js";import"./ToggleButton-APZXu2t7.js";import"./Card-CbIL2Iiq.js";import"./CardExpandable-DvrXNsTR.js";import"./DatePicker-Br-Dxnyn.js";import"./DateRangePicker-B2xmoGPO.js";import"./Divider-4HN2u4Et.js";import"./FeatureIcon-B09zj5Bd.js";import"./IconButton-rhUVXzuc.js";import"./string-BIzBNuWk.js";import"./Modal-xys3UXAy.js";import"./ModalDialog-C79kCvIP.js";import"./NumberInCircle-Cqbd2PUf.js";import"./TabItem-GC7LQNvp.js";import"./Tile-DjRk5xHI.js";import"./Toast-Dgoj-mgi.js";import"./AccessStatus-Dz1vfbnh.js";import"./BlockadeStatus-4Zx578QV.js";import"./SurveyToggle-CyohUVKo.js";import"./SurveyQuestionScale-OhARHAbk.js";import"./SurveyQuestionOpenEnded-7vjfdqDE.js";import"./SectionHeader-C2Y0CGjY.js";import"./PageHeader-CwyCLKPQ.js";import"./SectionTitle-B1v2FcuB.js";import"./Drawer-DRYKGdtt.js";import"./DrawerContent-CY64oeID.js";import"./DrawerDivider-B6matEEg.js";import"./DrawerHeader-kxEGS3hp.js";import"./DrawerListItem-k3WHGFah.js";import"./DrawerListItemGroup-B40g16RV.js";import"./DrawerTile-OeT5gefI.js";import"./DrawerSection-DIeDQFNf.js";import"./OutlineItem-B0GAacWf.js";import"./OutlineDivider-9phD7EaD.js";import"./OutlineSectionHeader-BDh6TrVb.js";import"./Chip-D-3z8YPj.js";import"./CounterToggle-FQNWJcH5.js";import"./SelectList-CiuxFUk4.js";import"./SelectListItem-BU_U7IZs.js";import"./SelectListItemDivider-CIueguWt.js";import"./SelectListItemToggle-C1VDDxAm.js";import"./SelectListItemTile-ohFw-wM4.js";import"./SelectListSectionTitle-DBd3RwED.js";import"./SelectionTile-CjfV3f7H.js";import"./LoadingBar-BeOPZFzu.js";import"./PopOver-CQVq9c4Z.js";import"./Dropdown-CR-eIdCF.js";import"./ProgressBar-3iykKXJT.js";import"./ProgressDonutChart-6EInE7M5.js";import"./IconText-CKA7x6Oe.js";import"./Pagination-XlcLXTgM.js";import"./OverlayHeader--26-GHPy.js";import"./Well-DSgC9yDa.js";import"./ThreeColumnLayout-BR3bkVIs.js";import"./BasicRichListItem-Ctm7LWMn.js";import"./Switch-BtYFtHgw.js";import"./TextGroup-lwPvABi6.js";import"./Tooltip-Cni6OHo9.js";import{I as y}from"./Image-BF_Kx0up.js";import"./Skeleton-Budxm1Jq.js";import{w as x}from"./decorator-CSnIf-k5.js";import"./vue.esm-bundler-CWlcb7ht.js";import"./Checkbox-Bk9Hyj7u.js";import"./SelectionControl-DEv8iTfR.js";import"./_plugin-vue_export-helper-DlAUqK2U.js";import"./iframe-OBly2w25.js";import"../sb-preview/runtime.js";import"./device-9fgosCm4.js";import"./user-_JB5aHqq.js";import"./vue-popper-CpfGMX4Q.js";import"./_commonjsHelpers-Chg3vePA.js";import"./v4-BZawosSj.js";const{useArgs:S}=__STORYBOOK_MODULE_PREVIEW_API__,Je={title:"Components/RichList/RichListItem",component:n,decorators:[e=>({components:{story:e},template:"<div style='display: flex;padding: 16px;'><story /></div>"}),x]},O=(e,a={})=>(e.argTypes={type:{options:Object.values(l),control:"select"},size:{options:Object.values(c),control:"select"},layout:{options:Object.values(m),control:{type:"select"}},state:{options:Object.values(d),control:"select"},iconColor:{options:Object.values(g),control:"select"},borderColor:{options:[null,...Object.values(_)],control:"select"},icon:{options:[null,...Object.keys(s)],control:"select"},iconColorHex:{control:"text"},borderColorHex:{control:"text"},content:{control:"text"},metadata:{control:"text"},actions:{control:"text"},draggableIconClassName:{control:"text"},backgroundColor:{options:[null,...Object.values(p)],control:"select"},elevation:{options:[null,...Object.values(f)],control:"select"}},e.args={size:c.MEDIUM,type:l.DEFAULT,layout:m.HORIZONTAL,backgroundColor:p.NEUTRAL,elevation:null,isDimmed:!1,isDraggable:!0,hasDraggableHandler:!0,icon:null,iconColor:g.NEUTRAL_WEAK,iconColorHex:"",hasActionsSlotDivider:!0,isSelectable:!0,isSelected:!0,borderColor:null,borderColorHex:"",state:d.DEFAULT,isInteractive:!0,draggableIconClassName:"draggableIconClassName-1",content:"Content Slot",metadata:"Metadata Slot",actions:"ACS",...a},e.parameters={actions:{handles:["icon-click","click","update:is-selected"]},layout:"fullscreen",design:{type:"figma",url:"https://www.figma.com/file/izQdYyiBR1GQgFkaOIfIJI/LMS---DS-Components?type=design&node-id=8507-129603&mode=design&t=dC5vBzU9RlP1j7G2-4"}},e),D=e=>{const[a,i]=S();return{components:{RichListItem:n},setup(){return e},data(){return{ICONS:Object.freeze(s)}},methods:{updateIsSelected(r){i({isSelected:r})}},template:`
|
|
2
2
|
<rich-list-item
|
|
3
3
|
:size="size"
|
|
4
4
|
:type="type"
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{c as s,p as i}from"./Tile-DjRk5xHI.js";import{d as r,c as l,k as n,r as a,o as c}from"./vue.esm-bundler-CWlcb7ht.js";import{_ as p}from"./_plugin-vue_export-helper-DlAUqK2U.js";const t=r({name:"SelectListItemTile",components:{DsTile:s},props:i}),d={class:"ds-selectListItemTile"};function m(e,f,b,y,T,u){const o=a("ds-tile");return c(),l("div",d,[n(o,{interactive:e.interactive,"icon-left":e.iconLeft,"icon-right":e.iconRight,text:e.text,"eyebrow-text":e.eyebrowText,"additional-text":e.additionalText,color:e.color,"is-eyebrow-text-uppercase":e.isEyebrowTextUppercase,state:e.state,"eyebrow-ellipsis":e.eyebrowEllipsis,"text-ellipsis":e.textEllipsis,"border-color":e.borderColor},null,8,["interactive","icon-left","icon-right","text","eyebrow-text","additional-text","color","is-eyebrow-text-uppercase","state","eyebrow-ellipsis","text-ellipsis","border-color"])])}const g=p(t,[["render",m],["__scopeId","data-v-0afe46d9"]]);t.__docgenInfo={displayName:"SelectListItemTile",exportName:"default",description:"",tags:{},sourceFiles:["/home/runner/work/design-system/design-system/lib/js/components/SelectList/SelectListItemTile/SelectListItemTile.vue"]};export{g as S};
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import{S as a}from"./SelectListItemTile-ohFw-wM4.js";import{a as g}from"./Tile-DjRk5xHI.js";import{a as c,b as l,t as d,d as T}from"./Tile.sb.shared-Dt0Nhl_4.js";import{w as u}from"./decorator-CSnIf-k5.js";import"./vue.esm-bundler-CWlcb7ht.js";import"./_plugin-vue_export-helper-DlAUqK2U.js";import"./Icon-ChGia3n4.js";import"./Banner-BmKYBJ1B.js";import"./Button-DVtHJ-a3.js";import"./Divider-4HN2u4Et.js";import"./IconButton-rhUVXzuc.js";import"./device-9fgosCm4.js";import"./v4-BZawosSj.js";const R={title:"Components/SelectList/SelectListItemTile",component:a,decorators:[u]},S=s=>({components:{SelectListItemTile:a},setup(){return s},template:d("select-list-item-tile"),data:T}),t=S.bind({});t.argTypes=c;t.args=l;t.parameters={actions:{handles:["click"]},design:{type:"figma",url:"https://www.figma.com/file/izQdYyiBR1GQgFkaOIfIJI/LMS---DS-Components?type=design&node-id=5367-94239&t=GqiOb5BFRTyJrsv8-4"}};const f=s=>({components:{SelectListItemTile:a},setup(){return s},template:d("select-list-item-tile"),data:T}),e=f.bind({});e.argTypes=c;e.args={...l,interactive:!1,iconLeft:null,iconRight:null,text:"this is a text text",eyebrowText:"this is an eyebrowText text",additionalText:"this is some additionalText",state:g.DEFAULT};var i,r,o;t.parameters={...t.parameters,docs:{...(i=t.parameters)==null?void 0:i.docs,source:{originalSource:`args => ({
|
|
2
|
+
components: {
|
|
3
|
+
SelectListItemTile
|
|
4
|
+
},
|
|
5
|
+
setup() {
|
|
6
|
+
return args;
|
|
7
|
+
},
|
|
8
|
+
template: template('select-list-item-tile'),
|
|
9
|
+
data
|
|
10
|
+
})`,...(o=(r=t.parameters)==null?void 0:r.docs)==null?void 0:o.source}}};var n,m,p;e.parameters={...e.parameters,docs:{...(n=e.parameters)==null?void 0:n.docs,source:{originalSource:`args => ({
|
|
11
|
+
components: {
|
|
12
|
+
SelectListItemTile
|
|
13
|
+
},
|
|
14
|
+
setup() {
|
|
15
|
+
return args;
|
|
16
|
+
},
|
|
17
|
+
template: template('select-list-item-tile'),
|
|
18
|
+
data
|
|
19
|
+
})`,...(p=(m=e.parameters)==null?void 0:m.docs)==null?void 0:p.source}}};const k=["Interactive","Static"];export{t as Interactive,e as Static,k as __namedExportsOrder,R as default};
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["./Checkbox-Bk9Hyj7u.js","./vue.esm-bundler-CWlcb7ht.js","./SelectionControl-DEv8iTfR.js","./Icon-ChGia3n4.js","./_plugin-vue_export-helper-DlAUqK2U.js","./RadioButton-zouOWpRs.js"])))=>i.map(i=>d[i]);
|
|
2
|
-
import{_ as d}from"./iframe-
|
|
2
|
+
import{_ as d}from"./iframe-OBly2w25.js";import{d as L,v as u,t as O,c as r,a as i,b as c,x as m,j as p,g as T,n as _,r as f,o as n}from"./vue.esm-bundler-CWlcb7ht.js";import{a as C,I as E,b as N}from"./Icon-ChGia3n4.js";import{a as o,b as A,S as g}from"./SelectionControl-DEv8iTfR.js";import{_ as D}from"./_plugin-vue_export-helper-DlAUqK2U.js";const a={RADIO_BUTTON:"radioButton",CHECKBOX:"checkbox"},t={DEFAULT:"default",DISABLED:"disabled",LOADING:"loading"},v={[t.DEFAULT]:o.DEFAULT,[t.LOADING]:o.LOADING,[t.DISABLED]:o.DISABLED},I=L({name:"SelectionTile",components:{SelectionControl:A,Icon:C,Checkbox:u(()=>d(()=>import("./Checkbox-Bk9Hyj7u.js").then(e=>e.b),__vite__mapDeps([0,1,2,3,4]),import.meta.url)),RadioButton:u(()=>d(()=>import("./RadioButton-zouOWpRs.js").then(e=>e.c),__vite__mapDeps([5,1,2,3,4]),import.meta.url))},props:{type:{type:String,default:a.RADIO_BUTTON,validator(e){return Object.values(a).includes(e)}},title:{type:String,required:!0},supportingText:{type:String,default:null},icon:{type:Object,default:null,validator(e){return Object.values(E).includes(O(e))}},isSelected:{type:Boolean,default:!1},state:{type:String,default:t.DEFAULT,validator(e){return Object.values(t).includes(e)}}},emits:["update:is-selected","icon-click"],data(){return{ICONS:Object.freeze(E),ICON_SIZES:Object.freeze(N),SELECTION_CONTROL_SIZE:Object.freeze(g),SELECTION_TILE_STATE:Object.freeze(t),SELECTION_TILE_TYPE:Object.freeze(a),SELECTION_CONTROL_STATE_MAP:v,inputIsFocused:!1}},computed:{isLoading(){return this.state===t.LOADING}},methods:{updateIsSelected(e){this.isLoading||this.state===t.DISABLED||this.$emit("update:is-selected",e)},onIconClick(e){this.isLoading||(e.stopPropagation(),this.$emit("icon-click"))},onInputFocus(){this.inputIsFocused=!0},onInputBlur(){this.inputIsFocused=!1}}}),b={class:"ds-selectionTile__wrapper"},y={class:"ds-selectionTile__textWrapper"},B={class:"ds-selectionTile__title"},k={key:0,class:"ds-selectionTile__supportingText"};function h(e,s,R,F,j,P){const S=f("icon");return n(),r("div",{class:_(["ds-selectionTile",[{"-ds-selected":e.isSelected,"-ds-default":e.state===e.SELECTION_TILE_STATE.DEFAULT,"-ds-disabled":e.state===e.SELECTION_TILE_STATE.DISABLED,"-ds-loading":e.isLoading,"-ds-focused":e.inputIsFocused&&!e.isLoading}]]),onClick:s[1]||(s[1]=l=>e.updateIsSelected(!e.isSelected))},[i("div",b,[(n(),c(m(e.type===e.SELECTION_TILE_TYPE.RADIO_BUTTON?"radio-button":"checkbox"),{size:e.SELECTION_CONTROL_SIZE.X_SMALL,"is-selected":e.isSelected,state:e.SELECTION_CONTROL_STATE_MAP[e.state],"onUpdate:isSelected":s[0]||(s[0]=l=>e.updateIsSelected(l)),"onInput:focus":e.onInputFocus,"onInput:blur":e.onInputBlur},null,40,["size","is-selected","state","onInput:focus","onInput:blur"])),i("div",y,[i("div",B,p(e.title),1),e.supportingText?(n(),r("div",k,p(e.supportingText),1)):T("",!0)])]),e.icon||e.isLoading?(n(),c(S,{key:0,class:"ds-selectionTile__icon",icon:e.isLoading?e.ICONS.FAD_SPINNER_THIRD:e.icon,size:e.ICON_SIZES.X_SMALL,spinning:e.isLoading,onClick:e.onIconClick},null,8,["icon","size","spinning","onClick"])):T("",!0)],2)}const G=D(I,[["render",h],["__scopeId","data-v-e2d48501"]]);I.__docgenInfo={displayName:"SelectionTile",exportName:"default",description:"",tags:{},props:[{name:"type",type:{name:"SelectionTileType"},defaultValue:{func:!1,value:"SELECTION_TILE_TYPE.RADIO_BUTTON"}},{name:"title",type:{name:"string"},required:!0},{name:"supportingText",type:{name:"string"},defaultValue:{func:!1,value:"null"}},{name:"icon",type:{name:"object"},defaultValue:{func:!1,value:"null"}},{name:"isSelected",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"state",type:{name:"SelectionTileState"},defaultValue:{func:!1,value:"SELECTION_TILE_STATE.DEFAULT"}}],events:[{name:"update:is-selected",type:{names:["undefined"]}},{name:"icon-click"}],sourceFiles:["/home/runner/work/design-system/design-system/lib/js/components/SelectionTile/SelectionTile.vue"]};export{G as S,a,t as b};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{S as i,a as c,b as l}from"./SelectionTile-
|
|
1
|
+
import{S as i,a as c,b as l}from"./SelectionTile-CjfV3f7H.js";import{I as r}from"./Icon-ChGia3n4.js";import{w as d}from"./decorator-CSnIf-k5.js";import"./iframe-OBly2w25.js";import"../sb-preview/runtime.js";import"./vue.esm-bundler-CWlcb7ht.js";import"./SelectionControl-DEv8iTfR.js";import"./_plugin-vue_export-helper-DlAUqK2U.js";import"./v4-BZawosSj.js";const{useArgs:m}=__STORYBOOK_MODULE_PREVIEW_API__,k={title:"Components/SelectionTile",component:i,decorators:[t=>({components:{story:t},template:"<div style='display: flex; max-width: 300px;'><story /></div>"}),d]},S=t=>{const[u,p]=m();return{components:{SelectionTile:i},setup(){return t},methods:{onIsSelectedUpdated(a){p({isSelected:a})},onIconClick(){alert("Klik w ikonę")}},data(){return{ICONS:Object.freeze(r)}},template:`
|
|
2
2
|
<SelectionTile
|
|
3
3
|
:title="title"
|
|
4
4
|
:supporting-text="supportingText"
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{d as m,c as a,n as l,k as o,j as p,g as n,b as y,e as E,r as u,o as t,a as r}from"./vue.esm-bundler-CWlcb7ht.js";import{D as g}from"./Skeleton-Budxm1Jq.js";import{T as S}from"./Tooltip-Cni6OHo9.js";import{_ as c}from"./_plugin-vue_export-helper-DlAUqK2U.js";const _={NEUTRAL:"neutral"},b={SMALL:"small",MEDIUM:"medium",LARGE:"large"},d={SMALL:"small",MEDIUM:"medium"},i={DEFAULT:"default",HOVERED:"hovered",DISABLED:"disabled",LOADING:"loading"},T=m({name:"TextGroup",components:{DsSkeleton:g,DsTooltip:S},props:{size:{type:String,default:d.MEDIUM},color:{type:String,default:_.NEUTRAL},eyebrowText:{type:String,default:null},eyebrowTextEllipsis:{type:Boolean,default:!1},isEyebrowTextUppercase:{type:Boolean,default:!0},mainText:{type:String,default:null},mainTextEllipsis:{type:Boolean,default:!1},supportingText:{type:String,default:null},supportingTextEllipsis:{type:Boolean,default:!1},isInteractive:{type:Boolean,default:!0},skeletonLoadingSize:{type:String,default:b.LARGE},isSelected:{type:Boolean,default:!1},state:{type:String,default:i.DEFAULT},isSupportingTextTooltipEnabled:{type:Boolean,default:!1},isSupportingTextTooltipEnabledOnMobile:{type:Boolean,default:!0},isSupportingTextTooltipAutoFilledWithContent:{type:Boolean,default:!0},supportingTextTooltipContent:{type:[String,null],default:null}},data(){return{TEXT_GROUP_SIZES:Object.freeze(d),TEXT_GROUP_STATES:Object.freeze(i)}},computed:{colorClassName(){return`-ds-${this.color}`},isLoading(){return this.state===i.LOADING},loadingSizeClassName(){return`-ds-loading-${this.skeletonLoadingSize}`}}}),G={key:0,class:"ds-textGroup__skeletonWrapper"},x={key:1},L={key:2},v={key:0,class:"ds-textGroup__skeletonWrapper"},h={key:1},A={key:2},O={key:2,class:"ds-textGroup__supportingWrapper"},k={key:0,class:"ds-textGroup__skeletonWrapper"},U={key:1},D=["innerHTML"];function R(e,V,I,C,w,M){const s=u("ds-skeleton"),f=u("ds-tooltip");return t(),a("div",{class:l(["ds-textGroup",{"-ds-small":e.size===e.TEXT_GROUP_SIZES.SMALL,"-ds-hovered":e.state===e.TEXT_GROUP_STATES.HOVERED,"-ds-loading":e.isLoading,"-ds-disabled":e.state===e.TEXT_GROUP_STATES.DISABLED,"-ds-interactive":e.isInteractive,"-ds-selected":e.isSelected,[e.loadingSizeClassName]:e.isLoading,[e.colorClassName]:!0}])},[e.eyebrowText!==null?(t(),a("div",{key:0,class:l(["ds-textGroup__eyebrow",{"-ds-ellipsis":e.eyebrowTextEllipsis,"-ds-uppercase":e.isEyebrowTextUppercase}])},[e.isLoading?(t(),a("div",G,[o(s,{width:"50%",height:"100%"})])):e.eyebrowText===""?(t(),a("span",x," ")):(t(),a("span",L,p(e.eyebrowText),1))],2)):n("",!0),e.mainText!==null?(t(),a("div",{key:1,class:l(["ds-textGroup__main",{"-ds-ellipsis":e.mainTextEllipsis}])},[e.isLoading?(t(),a("div",v,[o(s,{width:"100%",height:"100%"})])):e.mainText===""?(t(),a("span",h," ")):(t(),a("span",A,p(e.mainText),1))],2)):n("",!0),e.supportingText!==null?(t(),a("div",O,[e.isLoading?(t(),a("div",k,[o(s,{width:"100%",height:"100%"})])):e.supportingText===""?(t(),a("span",U," ")):(t(),y(f,{key:2,class:"ds-textGroup__supportingTooltip",text:e.isSupportingTextTooltipAutoFilledWithContent?e.supportingText:e.supportingTextTooltipContent,"is-disabled":!e.isSupportingTextTooltipEnabled,"is-hidden-on-mobile":!e.isSupportingTextTooltipEnabledOnMobile,inline:""},{default:E(()=>[r("div",{class:l(["ds-textGroup__supporting",{"-ds-ellipsis":e.supportingTextEllipsis}])},[r("span",{innerHTML:e.supportingText},null,8,D)],2)]),_:1},8,["text","is-disabled","is-hidden-on-mobile"]))])):n("",!0)],2)}const X=c(T,[["render",R],["__scopeId","data-v-92b787ca"]]);T.__docgenInfo={displayName:"TextGroup",exportName:"default",description:"",tags:{},props:[{name:"size",type:{name:"TextGroupSize"},defaultValue:{func:!1,value:"TEXT_GROUP_SIZES.MEDIUM"}},{name:"color",type:{name:"TextGroupColor"},defaultValue:{func:!1,value:"TEXT_GROUP_COLORS.NEUTRAL"}},{name:"eyebrowText",type:{name:"string | null"},defaultValue:{func:!1,value:"null"}},{name:"eyebrowTextEllipsis",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"isEyebrowTextUppercase",type:{name:"boolean"},defaultValue:{func:!1,value:"true"}},{name:"mainText",type:{name:"string | null"},defaultValue:{func:!1,value:"null"}},{name:"mainTextEllipsis",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"supportingText",type:{name:"string | null"},defaultValue:{func:!1,value:"null"}},{name:"supportingTextEllipsis",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"isInteractive",type:{name:"boolean"},defaultValue:{func:!1,value:"true"}},{name:"skeletonLoadingSize",type:{name:"TextGroupLoadingSize"},defaultValue:{func:!1,value:"TEXT_GROUP_LOADING_SIZES.LARGE"}},{name:"isSelected",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"state",type:{name:"TextGroupState"},defaultValue:{func:!1,value:"TEXT_GROUP_STATES.DEFAULT"}},{name:"isSupportingTextTooltipEnabled",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"isSupportingTextTooltipEnabledOnMobile",type:{name:"boolean"},defaultValue:{func:!1,value:"true"}},{name:"isSupportingTextTooltipAutoFilledWithContent",type:{name:"boolean"},defaultValue:{func:!1,value:"true"}},{name:"supportingTextTooltipContent",type:{name:"string|null"},defaultValue:{func:!1,value:"null"}}],sourceFiles:["/home/runner/work/design-system/design-system/lib/js/components/TextGroup/TextGroup.vue"]};export{X as D,d as T,_ as a,b,i as c};
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
import{D as u}from"./Divider-4HN2u4Et.js";import{D as s,T as l,a as n,b as p,c as r}from"./TextGroup-lwPvABi6.js";import"./vue.esm-bundler-CWlcb7ht.js";import"./_plugin-vue_export-helper-DlAUqK2U.js";import"./Skeleton-Budxm1Jq.js";import"./Tooltip-Cni6OHo9.js";import"./device-9fgosCm4.js";const S={title:"Components/TextGroup",component:s},x=a=>({components:{DsDivider:u,DsTextGroup:s},setup(){return a},template:`
|
|
2
|
+
<ds-text-group
|
|
3
|
+
:size="size"
|
|
4
|
+
:color="color"
|
|
5
|
+
:eyebrow-text="eyebrowText === 'null' ? null : eyebrowText"
|
|
6
|
+
:eyebrow-text-ellipsis="eyebrowTextEllipsis"
|
|
7
|
+
:is-eyebrow-text-uppercase="isEyebrowTextUppercase"
|
|
8
|
+
:main-text="mainText === 'null' ? null : mainText"
|
|
9
|
+
:main-text-ellipsis="mainTextEllipsis"
|
|
10
|
+
:supporting-text="supportingText === 'null' ? null : supportingText"
|
|
11
|
+
:supporting-text-ellipsis="supportingTextEllipsis"
|
|
12
|
+
:is-interactive="isInteractive"
|
|
13
|
+
:skeleton-loading-size="skeletonLoadingSize"
|
|
14
|
+
:is-selected="isSelected"
|
|
15
|
+
:state="state"
|
|
16
|
+
:is-supporting-text-tooltip-enabled="isSupportingTextTooltipEnabled"
|
|
17
|
+
:is-supporting-text-tooltip-enabled-on-mobile="isSupportingTextTooltipEnabledOnMobile"
|
|
18
|
+
:is-supporting-text-tooltip-auto-filled-with-content="isSupportingTextTooltipAutoFilledWithContent"
|
|
19
|
+
:supporting-text-tooltip-content="supportingTextTooltipContent"
|
|
20
|
+
/>
|
|
21
|
+
<div style="margin-top: 100px; color: #888">
|
|
22
|
+
<ds-divider />
|
|
23
|
+
<small>Use "null" in *Text props to get nullable value</small>
|
|
24
|
+
</div>`}),t=x.bind({});t.args={size:l.MEDIUM,color:n.NEUTRAL,eyebrowText:"Eyebrow Uppercase Veritatis aspernatur cupiditate magnam quidem",eyebrowTextEllipsis:!1,isEyebrowTextUppercase:!0,mainText:"Main text Veritatis aspernatur cupiditate magnam quidem",mainTextEllipsis:!1,supportingText:"Eaque cumque ut beatae ratione nostrum vitae nisi. Consequatur ut expedita labore quisquam impedit ullam ipsam delectus at. Veritatis aspernatur cupiditate magnam quidem.",supportingTextEllipsis:!1,isInteractive:!0,skeletonLoadingSize:p.LARGE,isSelected:!1,state:r.DEFAULT,isSupportingTextTooltipEnabled:!1,isSupportingTextTooltipEnabledOnMobile:!0,isSupportingTextTooltipAutoFilledWithContent:!0,supportingTextTooltipContent:""};t.argTypes={size:{control:"select",options:Object.values(l)},color:{control:"select",options:Object.values(n)},eyebrowText:{control:"text"},eyebrowTextEllipsis:{control:"boolean"},isEyebrowTextUppercase:{control:"boolean"},mainText:{control:"text"},mainTextEllipsis:{control:"boolean"},supportingText:{control:"text"},supportingTextEllipsis:{control:"boolean"},isInteractive:{control:"boolean"},skeletonLoadingSize:{control:"select",options:Object.values(p)},isSelected:{control:"boolean"},state:{control:"select",options:Object.values(r)},isSupportingTextTooltipEnabled:{control:"boolean"},isSupportingTextTooltipEnabledOnMobile:{control:"boolean"},isSupportingTextTooltipAutoFilledWithContent:{control:"boolean"},supportingTextTooltipContent:{control:"text"}};t.parameters={design:{type:"figma",url:"https://www.figma.com/design/izQdYyiBR1GQgFkaOIfIJI/LMS---DS-Components?node-id=10439-30112&t=NLnObQEu7dAT74xq-0"}};var e,o,i;t.parameters={...t.parameters,docs:{...(e=t.parameters)==null?void 0:e.docs,source:{originalSource:`args => ({
|
|
25
|
+
components: {
|
|
26
|
+
DsDivider,
|
|
27
|
+
DsTextGroup
|
|
28
|
+
},
|
|
29
|
+
setup() {
|
|
30
|
+
return args;
|
|
31
|
+
},
|
|
32
|
+
template: \`
|
|
33
|
+
<ds-text-group
|
|
34
|
+
:size="size"
|
|
35
|
+
:color="color"
|
|
36
|
+
:eyebrow-text="eyebrowText === 'null' ? null : eyebrowText"
|
|
37
|
+
:eyebrow-text-ellipsis="eyebrowTextEllipsis"
|
|
38
|
+
:is-eyebrow-text-uppercase="isEyebrowTextUppercase"
|
|
39
|
+
:main-text="mainText === 'null' ? null : mainText"
|
|
40
|
+
:main-text-ellipsis="mainTextEllipsis"
|
|
41
|
+
:supporting-text="supportingText === 'null' ? null : supportingText"
|
|
42
|
+
:supporting-text-ellipsis="supportingTextEllipsis"
|
|
43
|
+
:is-interactive="isInteractive"
|
|
44
|
+
:skeleton-loading-size="skeletonLoadingSize"
|
|
45
|
+
:is-selected="isSelected"
|
|
46
|
+
:state="state"
|
|
47
|
+
:is-supporting-text-tooltip-enabled="isSupportingTextTooltipEnabled"
|
|
48
|
+
:is-supporting-text-tooltip-enabled-on-mobile="isSupportingTextTooltipEnabledOnMobile"
|
|
49
|
+
:is-supporting-text-tooltip-auto-filled-with-content="isSupportingTextTooltipAutoFilledWithContent"
|
|
50
|
+
:supporting-text-tooltip-content="supportingTextTooltipContent"
|
|
51
|
+
/>
|
|
52
|
+
<div style="margin-top: 100px; color: #888">
|
|
53
|
+
<ds-divider />
|
|
54
|
+
<small>Use "null" in *Text props to get nullable value</small>
|
|
55
|
+
</div>\`
|
|
56
|
+
})`,...(i=(o=t.parameters)==null?void 0:o.docs)==null?void 0:i.source}}};const y=["Interactive"];export{t as Interactive,y as __namedExportsOrder,S as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{d as s,c as u,a as l,n as i,f as o,o as m}from"./vue.esm-bundler-CWlcb7ht.js";import{_ as r}from"./_plugin-vue_export-helper-DlAUqK2U.js";const t={MEDIUM:"medium",LARGE:"large"},a=s({name:"ThreeColumnLayout",props:{rightColumnSize:{type:String,default:t.MEDIUM,validator(e){return Object.values(t).includes(e)}},rightColumnVisible:{type:Boolean,default:!0},leftColumnVisible:{type:Boolean,default:!0},initialMobileRightColumnVisibleState:{type:Boolean,default:!1},initialMobileLeftColumnVisibleState:{type:Boolean,default:!1},contentWithoutPadding:{type:Boolean,default:!1}},emits:["overlay-clicked"],data(){return{THREE_COLUMN_LAYOUT_RIGHT_COLUMN_SIZE:Object.freeze(t),leftColumnVisibleMobile:!1,rightColumnVisibleMobile:!1}},watch:{leftColumnVisible(e){this.leftColumnVisibleMobile!==e&&(this.leftColumnVisibleMobile=e)},rightColumnVisible(e){this.rightColumnVisibleMobile!==e&&(this.rightColumnVisibleMobile=e)}},created(){this.leftColumnVisibleMobile=this.initialMobileLeftColumnVisibleState,this.rightColumnVisibleMobile=this.initialMobileRightColumnVisibleState}}),d={class:"ds-threeColumnLayout"},f={class:"ds-threeColumnLayout__contentColumn"};function C(e,n,b,h,V,M){return m(),u("div",d,[l("div",{class:i(["ds-threeColumnLayout__overlay",{"-ds-visible":e.rightColumnVisibleMobile||e.leftColumnVisibleMobile}]),onClick:n[0]||(n[0]=g=>e.$emit("overlay-clicked"))},null,2),l("div",{class:i(["ds-threeColumnLayout__leftColumn",{"-ds-desktopVisible":e.leftColumnVisible||e.leftColumnVisibleMobile,"-ds-mobileVisible":e.leftColumnVisibleMobile}])},[o(e.$slots,"leftColumn",{},void 0,!0)],2),l("div",f,[l("div",{class:i(["ds-threeColumnLayout__content",{"-ds-noPadding":e.contentWithoutPadding}])},[o(e.$slots,"default",{},void 0,!0)],2)]),l("div",{class:i(["ds-threeColumnLayout__rightColumn",{"-ds-medium":e.rightColumnSize===e.THREE_COLUMN_LAYOUT_RIGHT_COLUMN_SIZE.MEDIUM,"-ds-large":e.rightColumnSize===e.THREE_COLUMN_LAYOUT_RIGHT_COLUMN_SIZE.LARGE,"-ds-desktopVisible":e.rightColumnVisible||e.rightColumnVisibleMobile,"-ds-mobileVisible":e.rightColumnVisibleMobile}])},[o(e.$slots,"rightColumn",{},void 0,!0)],2)])}const _=r(a,[["render",C],["__scopeId","data-v-
|
|
1
|
+
import{d as s,c as u,a as l,n as i,f as o,o as m}from"./vue.esm-bundler-CWlcb7ht.js";import{_ as r}from"./_plugin-vue_export-helper-DlAUqK2U.js";const t={MEDIUM:"medium",LARGE:"large"},a=s({name:"ThreeColumnLayout",props:{rightColumnSize:{type:String,default:t.MEDIUM,validator(e){return Object.values(t).includes(e)}},rightColumnVisible:{type:Boolean,default:!0},leftColumnVisible:{type:Boolean,default:!0},initialMobileRightColumnVisibleState:{type:Boolean,default:!1},initialMobileLeftColumnVisibleState:{type:Boolean,default:!1},contentWithoutPadding:{type:Boolean,default:!1}},emits:["overlay-clicked"],data(){return{THREE_COLUMN_LAYOUT_RIGHT_COLUMN_SIZE:Object.freeze(t),leftColumnVisibleMobile:!1,rightColumnVisibleMobile:!1}},watch:{leftColumnVisible(e){this.leftColumnVisibleMobile!==e&&(this.leftColumnVisibleMobile=e)},rightColumnVisible(e){this.rightColumnVisibleMobile!==e&&(this.rightColumnVisibleMobile=e)}},created(){this.leftColumnVisibleMobile=this.initialMobileLeftColumnVisibleState,this.rightColumnVisibleMobile=this.initialMobileRightColumnVisibleState}}),d={class:"ds-threeColumnLayout"},f={class:"ds-threeColumnLayout__contentColumn"};function C(e,n,b,h,V,M){return m(),u("div",d,[l("div",{class:i(["ds-threeColumnLayout__overlay",{"-ds-visible":e.rightColumnVisibleMobile||e.leftColumnVisibleMobile}]),onClick:n[0]||(n[0]=g=>e.$emit("overlay-clicked"))},null,2),l("div",{class:i(["ds-threeColumnLayout__leftColumn",{"-ds-desktopVisible":e.leftColumnVisible||e.leftColumnVisibleMobile,"-ds-mobileVisible":e.leftColumnVisibleMobile}])},[o(e.$slots,"leftColumn",{},void 0,!0)],2),l("div",f,[l("div",{class:i(["ds-threeColumnLayout__content",{"-ds-noPadding":e.contentWithoutPadding}])},[o(e.$slots,"default",{},void 0,!0)],2)]),l("div",{class:i(["ds-threeColumnLayout__rightColumn",{"-ds-medium":e.rightColumnSize===e.THREE_COLUMN_LAYOUT_RIGHT_COLUMN_SIZE.MEDIUM,"-ds-large":e.rightColumnSize===e.THREE_COLUMN_LAYOUT_RIGHT_COLUMN_SIZE.LARGE,"-ds-desktopVisible":e.rightColumnVisible||e.rightColumnVisibleMobile,"-ds-mobileVisible":e.rightColumnVisibleMobile}])},[o(e.$slots,"rightColumn",{},void 0,!0)],2)])}const _=r(a,[["render",C],["__scopeId","data-v-f395c4f5"]]);a.__docgenInfo={displayName:"ThreeColumnLayout",exportName:"default",description:"",tags:{},props:[{name:"rightColumnSize",type:{name:"ThreeColumnLayoutRightColumnSize"},defaultValue:{func:!1,value:"THREE_COLUMN_LAYOUT_RIGHT_COLUMN_SIZE.MEDIUM"}},{name:"rightColumnVisible",type:{name:"boolean"},defaultValue:{func:!1,value:"true"}},{name:"leftColumnVisible",type:{name:"boolean"},defaultValue:{func:!1,value:"true"}},{name:"initialMobileRightColumnVisibleState",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"initialMobileLeftColumnVisibleState",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"contentWithoutPadding",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}}],events:[{name:"overlay-clicked"}],slots:[{name:"leftColumn"},{name:"default"},{name:"rightColumn"}],sourceFiles:["/home/runner/work/design-system/design-system/lib/js/components/Layouts/ThreeColumnLayout/ThreeColumnLayout.vue"]};export{_ as T,t as a};
|
package/docs/assets/{ThreeColumnLayout.stories-CeCLjYHh.js → ThreeColumnLayout.stories-V4L7zdf_.js}
RENAMED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{T as n,a}from"./ThreeColumnLayout-
|
|
1
|
+
import{T as n,a}from"./ThreeColumnLayout-BR3bkVIs.js";import"./vue.esm-bundler-CWlcb7ht.js";import"./_plugin-vue_export-helper-DlAUqK2U.js";const c={title:"Components/Layouts/ThreeColumnLayout",component:n,decorators:[e=>({components:{story:e},template:`<div style='display: flex; width: 100vw; height: 100vh; background: lightgray; flex-direction: column;'><div style="padding: 16px; background: lightcoral; z-index: 1">Example header</div><story /></div>`}),e=>({components:{story:e},template:"<div style='display: flex; width: 100%; height: 100%; font-size: 12px; color: #fff;'><story /></div>"})]},r=e=>({components:{ThreeColumnLayout:n},setup(){return e},template:`
|
|
2
2
|
<three-column-layout :rightColumnSize='rightColumnSize'
|
|
3
3
|
:rightColumnVisible='rightColumnVisible'
|
|
4
4
|
:leftColumnVisible='leftColumnVisible'
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{I as u,a as T,b as p}from"./Icon-ChGia3n4.js";import{t as I,d as S,r as L,o as s,c as l,b as o,g as r,a as A,n as i,j as d}from"./vue.esm-bundler-CWlcb7ht.js";import{_}from"./_plugin-vue_export-helper-DlAUqK2U.js";const t={NEUTRAL:"neutral",NEUTRAL_WEAK:"neutralWeak",PRIMARY:"primary",SUCCESS:"success",FAIL:"fail",DANGER:"danger",WARNING:"warning",INFO:"info"},a={DEFAULT:"default",DISABLED:"disabled",LOADING:"loading"},v={NEUTRAL:"neutral",NEUTRAL_WEAK:"neutralWeak",PRIMARY:"primary",PRIMARY_WEAK:"primaryWeak",SUCCESS:"success",SUCCESS_WEAK:"successWeak",FAIL:"fail",FAIL_WEAK:"failWeak",DANGER:"danger",DANGER_WEAK:"dangerWeak",WARNING:"warning",WARNING_WEAK:"warningWeak",INFO:"info",INFO_WEAK:"infoWeak"},c={SMALL:"small",MEDIUM:"medium"},f={interactive:{type:Boolean,default:!1},iconLeft:{type:Object,default:null,validator(e){return Object.values(u).includes(I(e))}},iconRight:{type:Object,default:null,validator(e){return Object.values(u).includes(I(e))}},isIconRightHiddenOnMobile:{type:Boolean,default:!1},text:{type:String,required:!0},eyebrowText:{type:String,default:null},additionalText:{type:String,default:null},color:{type:String,default:t.NEUTRAL,validator(e){return Object.values(t).includes(e)}},isEyebrowTextUppercase:{type:Boolean,default:!1},state:{type:String,default:a.DEFAULT,validator(e){return Object.values(a).includes(e)}},eyebrowEllipsis:{type:Boolean,default:!0},textEllipsis:{type:Boolean,default:!0},borderColor:{type:String,default:null},additionalTextMaxWidth:{type:String,default:c.SMALL,validator(e){return Object.values(c).includes(e)}}},E=S({name:"Tile",components:{DsIcon:T},props:f,data(){return{ICONS:Object.freeze(u),ICON_SIZES:Object.freeze(p),TILE_STATES:Object.freeze(a),TILE_ADDITIONAL_TEXT_MAX_WIDTHS:Object.freeze(c)}},computed:{tileColor(){return{[t.NEUTRAL]:"-ds-neutral",[t.NEUTRAL_WEAK]:"-ds-neutralWeak",[t.PRIMARY]:"-ds-primary",[t.SUCCESS]:"-ds-success",[t.FAIL]:"-ds-fail",[t.DANGER]:"-ds-danger",[t.WARNING]:"-ds-warning",[t.INFO]:"-ds-info"}[this.color]},tileState(){return{[a.DEFAULT]:null,[a.DISABLED]:"-ds-disabled",[a.LOADING]:"-ds-loading"}[this.state]}}}),N={class:"ds-tile__center"},O=["textContent"],R=["textContent"];function m(e,y,b,D,g,C){const n=L("ds-icon");return s(),l("div",{class:i([[e.tileColor,e.tileState,{"-ds-interactive":e.interactive,[`-ds-border-${e.borderColor}`]:e.borderColor!==null}],"ds-tile"])},[e.iconLeft?(s(),o(n,{key:0,icon:e.iconLeft,size:e.ICON_SIZES.SMALL,class:"ds-tile__iconLeft"},null,8,["icon","size"])):r("",!0),A("div",N,[e.eyebrowText?(s(),l("span",{key:0,class:i(["ds-tile__eyebrowText",{"-ds-uppercase":e.isEyebrowTextUppercase,"-ds-ellipsis":e.eyebrowEllipsis}]),textContent:d(e.eyebrowText)},null,10,O)):r("",!0),A("span",{class:i(["ds-tile__text",{"-ds-ellipsis":e.textEllipsis}]),textContent:d(e.text)},null,10,R)]),e.state===e.TILE_STATES.LOADING?(s(),o(n,{key:1,class:"ds-tile__iconRight",icon:e.ICONS.FAD_SPINNER_THIRD,size:e.ICON_SIZES.SMALL,spinning:""},null,8,["icon","size"])):e.iconRight?(s(),o(n,{key:2,class:i(["ds-tile__iconRight",{"-ds-hiddenOnMobile":e.isIconRightHiddenOnMobile}]),icon:e.iconRight,size:e.ICON_SIZES.SMALL},null,8,["class","icon","size"])):e.additionalText?(s(),l("div",{key:3,class:i(["ds-tile__additionalText",{"-ds-max-width-small":e.additionalTextMaxWidth===e.TILE_ADDITIONAL_TEXT_MAX_WIDTHS.SMALL,"-ds-max-width-medium":e.additionalTextMaxWidth===e.TILE_ADDITIONAL_TEXT_MAX_WIDTHS.MEDIUM}])},d(e.additionalText),3)):r("",!0)],2)}const k=_(E,[["render",m],["__scopeId","data-v-4d92feb4"]]);E.__docgenInfo={displayName:"Tile",exportName:"default",description:"",tags:{},sourceFiles:["/home/runner/work/design-system/design-system/lib/js/components/Tile/Tile.vue"]};export{t as T,a,v as b,k as c,c as d,f as p};
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import{I as t}from"./Icon-ChGia3n4.js";import{T as o,a as r,b as e}from"./Tile-DjRk5xHI.js";import{a as l,B as i}from"./Banner-BmKYBJ1B.js";const R=s=>`
|
|
2
|
+
<div style="display: flex; row-gap: 16px; flex-direction: column">
|
|
3
|
+
<${s}
|
|
4
|
+
:additional-text="additionalText"
|
|
5
|
+
:color="color"
|
|
6
|
+
:eyebrow-ellipsis="eyebrowEllipsis"
|
|
7
|
+
:eyebrow-text="eyebrowText"
|
|
8
|
+
:icon-left="ICONS[iconLeft]"
|
|
9
|
+
:icon-right="ICONS[iconRight]"
|
|
10
|
+
:is-icon-right-hidden-on-mobile="isIconRightHiddenOnMobile"
|
|
11
|
+
:interactive="interactive"
|
|
12
|
+
:is-eyebrow-text-uppercase="isEyebrowTextUppercase"
|
|
13
|
+
:state="state"
|
|
14
|
+
:text-ellipsis="textEllipsis"
|
|
15
|
+
:text="text"
|
|
16
|
+
:border-color="borderColor"
|
|
17
|
+
/>
|
|
18
|
+
<ds-banner :color="BANNER_COLORS.WARNING" title="Taka kombinacja koloru komponentu z kolorem bordera jest niezgodna z design systemem!" v-if="borderColor && !allowedColorsToBorderColorsMap[color].includes(borderColor)" />
|
|
19
|
+
</div>
|
|
20
|
+
`,A=()=>({ICONS:Object.freeze(t),BANNER_COLORS:Object.freeze(l),allowedColorsToBorderColorsMap:{[o.NEUTRAL]:[e.NEUTRAL,e.NEUTRAL_WEAK,e.PRIMARY,e.PRIMARY_WEAK],[o.NEUTRAL_WEAK]:[e.NEUTRAL,e.NEUTRAL_WEAK,e.PRIMARY,e.PRIMARY_WEAK],[o.PRIMARY]:[e.PRIMARY,e.PRIMARY_WEAK],[o.SUCCESS]:[e.SUCCESS,e.SUCCESS_WEAK],[o.FAIL]:[e.FAIL,e.FAIL_WEAK],[o.DANGER]:[e.DANGER,e.DANGER_WEAK],[o.WARNING]:[e.WARNING,e.WARNING_WEAK],[o.INFO]:[e.INFO,e.INFO_WEAK]}}),E={DsBanner:i},d={interactive:!0,color:o.NEUTRAL,borderColor:null,iconLeft:null,iconRight:null,isIconRightHiddenOnMobile:!1,eyebrowText:"this is an eyebrowText text",eyebrowEllipsis:!0,isEyebrowTextUppercase:!1,text:"this is a text text",textEllipsis:!0,additionalText:"",state:r.DEFAULT},b={iconLeft:{control:"select",options:[null,...Object.keys(t)]},iconRight:{control:"select",options:[null,...Object.keys(t)]},color:{control:"select",options:[...Object.values(o)]},borderColor:{control:"select",options:[null,...Object.values(e)]},state:{control:"select",options:[...Object.values(r)]}};export{b as a,d as b,E as c,A as d,R as t};
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import{c as a,a as d}from"./Tile-DjRk5xHI.js";import{c as l,d as T,t as x,a as g,b as p}from"./Tile.sb.shared-Dt0Nhl_4.js";import{w as f}from"./decorator-CSnIf-k5.js";import"./Icon-ChGia3n4.js";import"./vue.esm-bundler-CWlcb7ht.js";import"./_plugin-vue_export-helper-DlAUqK2U.js";import"./Banner-BmKYBJ1B.js";import"./Button-DVtHJ-a3.js";import"./Divider-4HN2u4Et.js";import"./IconButton-rhUVXzuc.js";import"./device-9fgosCm4.js";import"./v4-BZawosSj.js";const D={title:"Components/Tile",component:a,decorators:[f],render:c=>({components:{...l,Tile:a},setup(){return c},data:T,template:x("tile")}),argTypes:g,parameters:{actions:{handles:["click"]},design:{type:"figma",url:"https://www.figma.com/file/izQdYyiBR1GQgFkaOIfIJI/LMS---DS---Components?node-id=1923%3A34378"}}},t={args:p},e={args:{...p,interactive:!1,text:"this is a text text",eyebrowText:"this is an eyebrowText text",additionalText:"this is some additionalText",state:d.DEFAULT}};var s,r,o;t.parameters={...t.parameters,docs:{...(s=t.parameters)==null?void 0:s.docs,source:{originalSource:`{
|
|
2
|
+
args
|
|
3
|
+
}`,...(o=(r=t.parameters)==null?void 0:r.docs)==null?void 0:o.source}}};var i,n,m;e.parameters={...e.parameters,docs:{...(i=e.parameters)==null?void 0:i.docs,source:{originalSource:`{
|
|
4
|
+
args: {
|
|
5
|
+
...args,
|
|
6
|
+
interactive: false,
|
|
7
|
+
text: 'this is a text text',
|
|
8
|
+
eyebrowText: 'this is an eyebrowText text',
|
|
9
|
+
additionalText: 'this is some additionalText',
|
|
10
|
+
state: TILE_STATES.DEFAULT
|
|
11
|
+
} as Args
|
|
12
|
+
}`,...(m=(n=e.parameters)==null?void 0:n.docs)==null?void 0:m.source}}};const F=["Interactive","Static"];export{t as Interactive,e as Static,F as __namedExportsOrder,D as default};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{d as p,z as a,c as o,f as s,A as r,o as i}from"./vue.esm-bundler-CWlcb7ht.js";import{i as d}from"./device-9fgosCm4.js";import{_ as u}from"./_plugin-vue_export-helper-DlAUqK2U.js";const l={TOP:"top",BOTTOM:"bottom",LEFT:"left",RIGHT:"right"},n=p({name:"Tooltip",props:{placement:{type:String,default:l.BOTTOM,validator(e){return Object.values(l).includes(e)}},text:{type:String,default:""},isDisabled:{type:Boolean,default:!1},isPointerVisible:{type:Boolean,default:!0},inline:{type:Boolean,default:!1},isHiddenOnMobile:{type:Boolean,default:!1}},computed:{tooltipParams(){return{position:this.placement,event:d()?"focus":"hover"}},options(){return{value:this.text,disabled:this.isDisabled,dt:{shadow:"0px 0px 4px 0px rgba(12, 23, 38, 0.08), 0px 6px 12px 0px rgba(12, 23, 38, 0.12), 0px 2px 4px 0px rgba(12, 23, 38, 0.06)",padding:"var(--spacing-space-3xs, 6px) var(--spacing-space-2xs, 8px)",background:"var(--neutral-background-medium, #E5E7ED)",color:"var(--neutral-text-heavy, #343C50)",borderRadius:"4px",maxWidth:"900px"},class:this.isHiddenOnMobile?"ds-tooltip-hide-on-mobile":null,ptOptions:{mergeProps:!0},pt:{text:"ds-tooltip-text",arrow:this.isPointerVisible?"":"ds-tooltip-arrow-hide"}}}}}),f={key:0,tabindex:"-1"},m={key:1,tabindex:"-1"};function c(e,b,v,x,T,h){const t=r("pv-tooltip");return e.inline?a((i(),o("span",f,[s(e.$slots,"default")])),[[t,e.options,e.tooltipParams]]):a((i(),o("div",m,[s(e.$slots,"default")])),[[t,e.options,e.tooltipParams]])}const P=u(n,[["render",c]]);n.__docgenInfo={displayName:"Tooltip",exportName:"default",description:"",tags:{},props:[{name:"placement",type:{name:"TooltipPlacement"},defaultValue:{func:!1,value:"TOOLTIP_PLACEMENTS.BOTTOM"}},{name:"text",type:{name:"string"},defaultValue:{func:!1,value:"''"}},{name:"isDisabled",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"isPointerVisible",type:{name:"boolean"},defaultValue:{func:!1,value:"true"}},{name:"inline",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"isHiddenOnMobile",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}}],slots:[{name:"default"}],sourceFiles:["/home/runner/work/design-system/design-system/lib/js/components/Tooltip/Tooltip.vue"]};export{P as T,l as a};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{T as n,a as x}from"./Tooltip-
|
|
1
|
+
import{T as n,a as x}from"./Tooltip-Cni6OHo9.js";import{D as v}from"./Switch-BtYFtHgw.js";import{D as y}from"./Button-DVtHJ-a3.js";import"./vue.esm-bundler-CWlcb7ht.js";import"./device-9fgosCm4.js";import"./_plugin-vue_export-helper-DlAUqK2U.js";import"./Icon-ChGia3n4.js";const B={title:"Prime Vue Components/Tooltip",component:n},f=s=>({components:{Tooltip:n},setup(){return s},template:`
|
|
2
2
|
<div style="padding: 60px; width: 100%;display: flex; justify-content: center">
|
|
3
3
|
<div style="padding: 60px;">
|
|
4
4
|
<span>This is a text with </span>
|