@bethinkpl/design-system 26.2.0 → 26.2.2
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/.github/workflows/build-to-review-on-trigger.yml +1 -1
- package/.yarnrc.yml +1 -0
- package/dist/design-system.umd.cjs +16 -16
- package/dist/design-system.umd.cjs.map +1 -1
- package/dist/lib/js/components/RichList/BasicRichListItem/BasicRichListItem.vue.d.ts +7 -0
- package/dist/lib/js/components/RichList/RichListItem/RichListItem.consts.d.ts +1 -0
- package/dist/lib/js/components/RichList/RichListItem/RichListItem.vue.d.ts +2 -0
- package/docs/assets/Banner-CrcVtTA6.js +1 -0
- package/docs/assets/{Banner.stories-BNQs4B7a.js → Banner.stories-DrJfhoQX.js} +1 -1
- package/docs/assets/BasicRichListItem-BGCsDKGm.js +1 -0
- package/docs/assets/{BasicRichListItem.stories-ufd33VzT.js → BasicRichListItem.stories-CoDsthG-.js} +1 -1
- package/docs/assets/{Chip-CZhGhfp2.js → Chip-Bq1ZSXp_.js} +1 -1
- package/docs/assets/{Chip.stories-CJlT4U9X.js → Chip.stories-DFtBefaz.js} +1 -1
- package/docs/assets/{Color-ERTF36HU-DCQ3oTfn.js → Color-ERTF36HU-DQFMuB9T.js} +1 -1
- package/docs/assets/DatePicker-DrPI8Qx8.js +2 -0
- package/docs/assets/{DatePicker.stories-CHXq2t7N.js → DatePicker.stories-SkK1UYle.js} +1 -1
- package/docs/assets/{DateRangePicker-Ba8OCzac.js → DateRangePicker-CAPEY0y3.js} +1 -1
- package/docs/assets/{DateRangePicker.stories-Tnl6ue7H.js → DateRangePicker.stories-CrNDA1Lq.js} +1 -1
- package/docs/assets/{DocsRenderer-CFRXHY34-2RWLQUnC.js → DocsRenderer-CFRXHY34-D8iWQ1SK.js} +5 -5
- package/docs/assets/{DrawerHeader-27Pq83bZ.js → DrawerHeader-CXML6ILI.js} +1 -1
- package/docs/assets/{DrawerHeader.stories-DKVM_b_K.js → DrawerHeader.stories-BFRntv9g.js} +1 -1
- package/docs/assets/{DrawerSection-NA8YIWNP.js → DrawerSection-CZQts4fV.js} +1 -1
- package/docs/assets/{DrawerSection.stories-AsNcvKAY.js → DrawerSection.stories-Ck3mBS5K.js} +1 -1
- package/docs/assets/GroupRichListItem-LQNLl-ci.js +1 -0
- package/docs/assets/{GroupRichListItem.stories-ClHv1fNz.js → GroupRichListItem.stories-DwQP_oqX.js} +1 -1
- package/docs/assets/{IconButton-DQERAUFJ.js → IconButton-5VVKI4L8.js} +1 -1
- package/docs/assets/{IconButton.stories-DYBf2RxR.js → IconButton.stories-CyKoply2.js} +1 -1
- package/docs/assets/{Modal-Dyxmofkt.js → Modal-BaQ9m90i.js} +1 -1
- package/docs/assets/{Modal.stories-D20EV-4r.js → Modal.stories-B_MFS7hu.js} +1 -1
- package/docs/assets/{ModalDialog-CQ6gqQT0.js → ModalDialog-z2qdc3v4.js} +1 -1
- package/docs/assets/{ModalDialog.stories-ClzefBkX.js → ModalDialog.stories-DRoTs0vN.js} +1 -1
- package/docs/assets/{OutlineItem-BfrVnSqG.js → OutlineItem-CgcmTUfn.js} +1 -1
- package/docs/assets/{OutlineItem.stories-BTU-NNLx.js → OutlineItem.stories-BTZHHUjA.js} +1 -1
- package/docs/assets/{OverlayHeader-axMuTIwo.js → OverlayHeader-ChWcQ7A3.js} +1 -1
- package/docs/assets/{OverlayHeader.stories-Ce-FqIzk.js → OverlayHeader.stories-BXb_hoVv.js} +1 -1
- package/docs/assets/{Pagination-DIlv-PQx.js → Pagination-D-Sq3rMY.js} +1 -1
- package/docs/assets/{Pagination.stories-CmSNdwer.js → Pagination.stories-B09ssoO2.js} +1 -1
- package/docs/assets/{PopOver-DTk9tym7.js → PopOver-BjiDLwai.js} +1 -1
- package/docs/assets/{PopOver.stories-CUplOgMq.js → PopOver.stories-DFGElLEQ.js} +1 -1
- package/docs/assets/{ProgressBar-i05eIOJ-.js → ProgressBar-xIGt_7Oi.js} +1 -1
- package/docs/assets/{ProgressBar.stories-DvDerxCw.js → ProgressBar.stories-3VuVrMzK.js} +1 -1
- package/docs/assets/{ProgressDonutChart-dD82ao8i.js → ProgressDonutChart-CZhcGOel.js} +1 -1
- package/docs/assets/{ProgressDonutChart.stories-ByyC4Wpy.js → ProgressDonutChart.stories-bOyf8HX5.js} +1 -1
- package/docs/assets/{RichListItem.stories-DpgvNK5a.js → RichListItem.stories-BTMYgGxX.js} +1 -1
- package/docs/assets/{SectionHeader-ivDpWZdM.js → SectionHeader-CkqBv6QD.js} +1 -1
- package/docs/assets/{SectionHeader.stories-CljoeeXk.js → SectionHeader.stories-DImv7yZ-.js} +1 -1
- package/docs/assets/{SelectionTile-6DXgUYii.js → SelectionTile-Be2rbLr5.js} +1 -1
- package/docs/assets/{SelectionTile.stories-DoopCCEq.js → SelectionTile.stories-BPsTTXAB.js} +1 -1
- package/docs/assets/{SurveyQuestionOpenEnded-Dm58tKCP.js → SurveyQuestionOpenEnded-DMkrJ7PV.js} +1 -1
- package/docs/assets/{SurveyQuestionOpenEnded.stories-CVQ8H6mG.js → SurveyQuestionOpenEnded.stories-D3ydQcqO.js} +1 -1
- package/docs/assets/{SurveyQuestionScale-RjE7KKni.js → SurveyQuestionScale-D50B0A4F.js} +1 -1
- package/docs/assets/{SurveyQuestionScale.stories-C80IEuWZ.js → SurveyQuestionScale.stories-DSllYgWJ.js} +1 -1
- package/docs/assets/{iframe-TMx3aCBI.js → iframe-BVrI2R6j.js} +14 -14
- package/docs/assets/{index-DaN1k6Cs.js → index-CVcbOGcI.js} +1 -1
- package/docs/assets/{index-DBp1ogeF.js → index-CwAYglRo.js} +1 -1
- package/docs/assets/{preview-C89Bllzm.js → preview-CCF2FhdL.js} +1 -1
- package/docs/assets/{preview-Uql0YBlW.js → preview-D0XepLBk.js} +2 -2
- package/docs/iframe.html +1 -1
- package/docs/preview.css +6 -6
- package/docs/project.json +1 -1
- package/lib/js/components/Banner/Banner.vue +122 -113
- package/lib/js/components/Buttons/IconButton/IconButton.vue +2 -2
- package/lib/js/components/DatePickers/DatePicker/DatePicker.vue +2 -2
- package/lib/js/components/Drawer/DrawerHeader/DrawerHeader.vue +2 -2
- package/lib/js/components/Outline/OutlineItem/OutlineItem.vue +1 -1
- package/lib/js/components/PopOver/PopOver.vue +2 -1
- package/lib/js/components/ProgressBar/ProgressBar.vue +0 -1
- package/lib/js/components/ProgressDonutChart/ProgressDonutChart.vue +2 -2
- package/lib/js/components/RichList/BasicRichListItem/BasicRichListItem.vue +11 -3
- package/lib/js/components/RichList/RichListItem/RichListItem.consts.ts +1 -0
- package/lib/js/components/RichList/RichListItem/RichListItem.vue +21 -2
- package/lib/styles/components/_buttons.scss +2 -2
- package/lib/styles/settings/_fonts.scss +6 -6
- package/lib/styles/settings/_radiuses.scss +1 -1
- package/package.json +5 -4
- package/stylelint.config.cjs +32 -4
- package/docs/assets/Banner-CLCcYMqw.js +0 -1
- package/docs/assets/BasicRichListItem-DLEOXqPF.js +0 -1
- package/docs/assets/DatePicker-DIRNXtbt.js +0 -2
- package/docs/assets/GroupRichListItem-DZzp4b-c.js +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
import{d as l,c as r,a as n,F as C,m as O,b as i,n as R,k as c,h as u,r as A,o as s,s as N}from"./vue.esm-bundler-CzUSCRPq.js";import{a as d,I,b as D}from"./Icon-CQ850_cO.js";import{_ as h}from"./_plugin-vue_export-helper-DlAUqK2U.js";const z={PRIMARY_MEDIUM:"primaryMedium",PRIMARY:"primary",PRIMARY_WEAK:"primaryWeak",PRIMARY_GHOST:"primaryGhost",NEUTRAL_MEDIUM:"neutralMedium",NEUTRAL:"neutral",NEUTRAL_WEAK:"neutralWeak",NEUTRAL_GHOST:"neutralGhost",INFO_MEDIUM:"infoMedium",INFO:"info",INFO_WEAK:"infoWeak",INFO_GHOST:"infoGhost",SUCCESS_MEDIUM:"successMedium",SUCCESS:"success",SUCCESS_WEAK:"successWeak",SUCCESS_GHOST:"successGhost",WARNING_MEDIUM:"warningMedium",WARNING:"warning",WARNING_WEAK:"warningWeak",WARNING_GHOST:"warningGhost",FAIL_MEDIUM:"failMedium",FAIL:"fail",FAIL_WEAK:"failWeak",FAIL_GHOST:"failGhost"},a={DEFAULT:"default",LOADING:"loading",DONE:"done",OVERAGE:"overage"},p=90,o=40,G=4,g=o/2,m=o/2-G/2,S=l({name:"ProgressDonutChart",components:{DsIcon:d},props:{label:{type:String,default:""},state:{type:String,default:a.DEFAULT,validator(e){return Object.values(a).includes(e)}},ranges:{type:Array,required:!0,validator(e){return e.every(t=>t.start>=0&&t.length>=0&&t.start+t.length<=100)}}},data(){return{PROGRESS_DONUT_CHART_STATES:Object.freeze(a),ICONS:Object.freeze(I),ICON_SIZES:Object.freeze(D),PROGRESS_DONUT_CHART_SIZE:o,PROGRESS_DONUT_CHART_CIRCLE_CENTER_POINT:g,PROGRESS_DONUT_CHART_CIRCLE_RADIUS:m}},computed:{labelText(){return[this.state===a.OVERAGE&&"+",this.label].filter(Boolean).join("")},calculatedRanges(){return this.ranges.map(e=>({...e,rotate:e.start/100*360+p}))}}}),U={class:"ds-progressDonutChart"},P=["width","height"],f=["cx","cy","r"],y=["cx","cy","r"],H=["cx","cy","r"],L={class:"ds-progressDonutChart__label"},M={key:0,class:"ds-progressDonutChart__loaderText"};function
|
|
1
|
+
import{d as l,c as r,a as n,F as C,m as O,b as i,n as R,k as c,h as u,r as A,o as s,s as N}from"./vue.esm-bundler-CzUSCRPq.js";import{a as d,I,b as D}from"./Icon-CQ850_cO.js";import{_ as h}from"./_plugin-vue_export-helper-DlAUqK2U.js";const z={PRIMARY_MEDIUM:"primaryMedium",PRIMARY:"primary",PRIMARY_WEAK:"primaryWeak",PRIMARY_GHOST:"primaryGhost",NEUTRAL_MEDIUM:"neutralMedium",NEUTRAL:"neutral",NEUTRAL_WEAK:"neutralWeak",NEUTRAL_GHOST:"neutralGhost",INFO_MEDIUM:"infoMedium",INFO:"info",INFO_WEAK:"infoWeak",INFO_GHOST:"infoGhost",SUCCESS_MEDIUM:"successMedium",SUCCESS:"success",SUCCESS_WEAK:"successWeak",SUCCESS_GHOST:"successGhost",WARNING_MEDIUM:"warningMedium",WARNING:"warning",WARNING_WEAK:"warningWeak",WARNING_GHOST:"warningGhost",FAIL_MEDIUM:"failMedium",FAIL:"fail",FAIL_WEAK:"failWeak",FAIL_GHOST:"failGhost"},a={DEFAULT:"default",LOADING:"loading",DONE:"done",OVERAGE:"overage"},p=90,o=40,G=4,g=o/2,m=o/2-G/2,S=l({name:"ProgressDonutChart",components:{DsIcon:d},props:{label:{type:String,default:""},state:{type:String,default:a.DEFAULT,validator(e){return Object.values(a).includes(e)}},ranges:{type:Array,required:!0,validator(e){return e.every(t=>t.start>=0&&t.length>=0&&t.start+t.length<=100)}}},data(){return{PROGRESS_DONUT_CHART_STATES:Object.freeze(a),ICONS:Object.freeze(I),ICON_SIZES:Object.freeze(D),PROGRESS_DONUT_CHART_SIZE:o,PROGRESS_DONUT_CHART_CIRCLE_CENTER_POINT:g,PROGRESS_DONUT_CHART_CIRCLE_RADIUS:m}},computed:{labelText(){return[this.state===a.OVERAGE&&"+",this.label].filter(Boolean).join("")},calculatedRanges(){return this.ranges.map(e=>({...e,rotate:e.start/100*360+p}))}}}),U={class:"ds-progressDonutChart"},P=["width","height"],f=["cx","cy","r"],y=["cx","cy","r"],H=["cx","cy","r"],L={class:"ds-progressDonutChart__label"},M={key:0,class:"ds-progressDonutChart__loaderText"};function k(e,t,v,F,b,W){const E=A("ds-icon");return s(),r("div",U,[(s(),r("svg",{class:"ds-progressDonutChart__svg",width:e.PROGRESS_DONUT_CHART_SIZE,height:e.PROGRESS_DONUT_CHART_SIZE,xmlns:"http://www.w3.org/2000/svg"},[n("circle",{class:"ds-progressDonutChart__circle ds-progressDonutChart__thumb",cx:e.PROGRESS_DONUT_CHART_CIRCLE_CENTER_POINT,cy:e.PROGRESS_DONUT_CHART_CIRCLE_CENTER_POINT,r:e.PROGRESS_DONUT_CHART_CIRCLE_RADIUS},null,8,f),e.state===e.PROGRESS_DONUT_CHART_STATES.LOADING?(s(),r("circle",{key:0,class:"ds-progressDonutChart__circle ds-progressDonutChart__loader",cx:e.PROGRESS_DONUT_CHART_CIRCLE_CENTER_POINT,cy:e.PROGRESS_DONUT_CHART_CIRCLE_CENTER_POINT,r:e.PROGRESS_DONUT_CHART_CIRCLE_RADIUS},null,8,y)):(s(!0),r(C,{key:1},O(e.calculatedRanges,(_,T)=>(s(),r("circle",{key:`circle_${T}`,class:R(["ds-progressDonutChart__circle ds-progressDonutChart__track",[`-ds-${_.color}`]]),cx:e.PROGRESS_DONUT_CHART_CIRCLE_CENTER_POINT,cy:e.PROGRESS_DONUT_CHART_CIRCLE_CENTER_POINT,r:e.PROGRESS_DONUT_CHART_CIRCLE_RADIUS,style:N(`--length: ${_.length}; transform: rotate(${_.rotate}deg);`)},null,14,H))),128))],8,P)),n("div",L,[e.state===e.PROGRESS_DONUT_CHART_STATES.LOADING?(s(),r("div",M)):e.state===e.PROGRESS_DONUT_CHART_STATES.DONE?(s(),i(E,{key:1,class:"ds-progressDonutChart__icon",icon:e.ICONS.FA_CHECK_SOLID,size:e.ICON_SIZES.X_SMALL},null,8,["icon","size"])):e.label?(s(),r("div",{key:2,class:R(["ds-progressDonutChart__labelText",{"-ds-hasOverage":e.state===e.PROGRESS_DONUT_CHART_STATES.OVERAGE}])},c(e.labelText),3)):u("",!0)])])}const V=h(S,[["render",k],["__scopeId","data-v-47472a1c"]]);S.__docgenInfo={displayName:"ProgressDonutChart",exportName:"default",description:"",tags:{},props:[{name:"label",type:{name:"string"},defaultValue:{func:!1,value:"''"}},{name:"state",type:{name:"ProgressDonutChartState"},defaultValue:{func:!1,value:"PROGRESS_DONUT_CHART_STATES.DEFAULT"}},{name:"ranges",type:{name:"Array<ProgressDonutChartRange>"},required:!0}],sourceFiles:["/home/runner/work/design-system/design-system/lib/js/components/ProgressDonutChart/ProgressDonutChart.vue"]};export{V as P,a,z as b};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{P as n,a,b as r}from"./ProgressDonutChart-
|
|
1
|
+
import{P as n,a,b as r}from"./ProgressDonutChart-CZhcGOel.js";import"./vue.esm-bundler-CzUSCRPq.js";import"./Icon-CQ850_cO.js";import"./_plugin-vue_export-helper-DlAUqK2U.js";const d={title:"Components/ProgressDonutChart",component:n},p=c=>({components:{ProgressDonutChart:n},setup(){return{args:c}},template:`
|
|
2
2
|
<ProgressDonutChart
|
|
3
3
|
v-bind=args
|
|
4
4
|
/>`}),t=p.bind({}),g={label:"70",state:a.DEFAULT,ranges:[{color:r.SUCCESS,start:0,length:30},{color:r.INFO,start:30,length:25},{color:r.FAIL_GHOST,start:55,length:25}]},l={label:{control:"text"},state:{control:"select",options:Object.values(a)},ranges:{control:"object"}};t.argTypes=l;t.args=g;t.parameters={design:{type:"figma",url:"https://www.figma.com/file/izQdYyiBR1GQgFkaOIfIJI/LMS---DS-Components?node-id=5867-97923&t=wQeUoflFyMwdW7Ne-4"}};var e,o,s;t.parameters={...t.parameters,docs:{...(e=t.parameters)==null?void 0:e.docs,source:{originalSource:`args => ({
|
|
@@ -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-
|
|
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-LQNLl-ci.js";import{c as g,I as s}from"./Icon-CQ850_cO.js";import"./BadgeScore-CZzWzYgk.js";import"./Banner-CrcVtTA6.js";import"./Button-CYE3lqUM.js";import"./ToggleButton-BehxPJAN.js";import"./Card-DQn9130w.js";import"./CardExpandable-BUtFN6qF.js";import"./DatePicker-DrPI8Qx8.js";import"./DateRangePicker-CAPEY0y3.js";import"./Divider-ClNbKvxH.js";import"./FeatureIcon-BralJUmR.js";import"./IconButton-5VVKI4L8.js";import"./string-Cr9ML3bf.js";import"./Modal-BaQ9m90i.js";import"./ModalDialog-z2qdc3v4.js";import"./NumberInCircle-CvJAMxEl.js";import"./TabItem-CZUx6uYU.js";import"./Tile-ByPW4b0z.js";import"./Toast-C9PW1GAe.js";import"./AccessStatus-DRDZqpES.js";import"./BlockadeStatus-BfAr-sGX.js";import"./SurveyToggle-CEytwXTu.js";import"./SurveyQuestionScale-D50B0A4F.js";import"./SurveyQuestionOpenEnded-DMkrJ7PV.js";import"./SectionHeader-CkqBv6QD.js";import"./PageHeader-ybo14zma.js";import"./SectionTitle-Bo_ArbM7.js";import"./Drawer-CPwHZ_w7.js";import"./DrawerContent-D-JrB94m.js";import"./DrawerDivider-glZ2sb5T.js";import"./DrawerHeader-CXML6ILI.js";import"./DrawerListItem-DwU7tkY-.js";import"./DrawerListItemGroup-BJGU_uck.js";import"./DrawerTile-BqaB6Qm3.js";import"./DrawerSection-CZQts4fV.js";import"./OutlineItem-CgcmTUfn.js";import"./OutlineDivider-F421Sb92.js";import"./OutlineSectionHeader-BTQYgDGK.js";import"./Chip-Bq1ZSXp_.js";import"./CounterToggle-DE96dwGZ.js";import"./SelectList-DWop0yaP.js";import"./SelectListItem-BK_eMqRE.js";import"./SelectListItemDivider-CU5vX-7p.js";import"./SelectListItemToggle-uu8aTlbZ.js";import"./SelectListItemTile-BZdx79sR.js";import"./SelectListSectionTitle-DKYayu9U.js";import"./SelectionTile-Be2rbLr5.js";import"./LoadingBar-Bo6mXGaA.js";import"./PopOver-BjiDLwai.js";import"./Dropdown-BFqYgkV7.js";import"./ProgressBar-xIGt_7Oi.js";import"./ProgressDonutChart-CZhcGOel.js";import"./IconText-CkVKy_JT.js";import"./Pagination-D-Sq3rMY.js";import"./OverlayHeader-ChWcQ7A3.js";import"./Well-D7yLLQH0.js";import"./ThreeColumnLayout-DLip97ZI.js";import"./BasicRichListItem-BGCsDKGm.js";import"./Switch-BRgc0E3r.js";import"./TextGroup-F6Fc0qPD.js";import"./Tooltip-CPu68UXg.js";import{I as y}from"./Image-DQHO1hnh.js";import"./Skeleton-CMYm0ueF.js";import{w as x}from"./decorator-CSnIf-k5.js";import"./vue.esm-bundler-CzUSCRPq.js";import"./Checkbox-KYcZTLuT.js";import"./SelectionControl-C2m3ylYI.js";import"./_plugin-vue_export-helper-DlAUqK2U.js";import"./iframe-BVrI2R6j.js";import"../sb-preview/runtime.js";import"./device-9fgosCm4.js";import"./user-DY5hg_iu.js";import"./vue-popper-D-VHfyeL.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"
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{c as a,a as L,I as c,b as f}from"./Icon-CQ850_cO.js";import{I as h}from"./IconButton-
|
|
1
|
+
import{c as a,a as L,I as c,b as f}from"./Icon-CQ850_cO.js";import{I as h}from"./IconButton-5VVKI4L8.js";import{I as R,i as A}from"./Button-CYE3lqUM.js";import{D as T}from"./Divider-ClNbKvxH.js";import{d as y,t as l,c as n,a as i,b as d,n as o,h as t,k as p,g as b,u as g,f as S,r as E,o as s}from"./vue.esm-bundler-CzUSCRPq.js";import{_ as H}from"./_plugin-vue_export-helper-DlAUqK2U.js";const r={XX_SMALL:"xx-small",X_SMALL:"x-small",SMALL:"small",MEDIUM:"medium",LARGE:"large"},m={VERTICAL:"vertical",HORIZONTAL:"horizontal"},O={ACCENT:a.ACCENT,DANGER:a.DANGER,DEFAULT:a.DEFAULT,FAIL:a.FAIL,INFO:a.INFO,INVERTED:a.INVERTED,NEUTRAL:a.NEUTRAL,NEUTRAL_STRONG:a.NEUTRAL_STRONG,NEUTRAL_WEAK:a.NEUTRAL_WEAK,PRIMARY:a.PRIMARY,PRIMARY_WEAK:a.PRIMARY_WEAK,SUCCESS:a.SUCCESS,WARNING:a.WARNING},_=y({name:"SectionHeader",components:{DsIcon:L,DsIconButton:h,DsDivider:T},props:{isExpandable:{type:Boolean,default:!1},hideSlotWhenCollapsed:{type:Boolean,default:!1},iconLeft:{type:Object,default:null,validator(e){return Object.values(c).includes(l(e))}},iconLeftColor:{type:String,default:null,validator(e){return Object.values(O).includes(l(e))}},iconRight:{type:Object,default:null,validator(e){return Object.values(c).includes(l(e))}},iconRightColor:{type:String,default:null,validator(e){return Object.values(O).includes(l(e))}},isExpanded:{type:Boolean,default:!1},info:{type:Boolean,default:!1},size:{type:String,default:r.MEDIUM,validator(e){return Object.values(r).includes(e)}},title:{type:String,required:!0},titleEllipsis:{type:Boolean,default:!1},eyebrow:{type:String,default:""},supportingText:{type:String,default:null},hasDivider:{type:Boolean,default:!0},mobileLayout:{type:String,default:m.VERTICAL,validator:e=>Object.values(m).includes(e)}},emits:["info-click","update:isExpanded"],data(){return{ICONS:Object.freeze(c),ICON_SIZES:Object.freeze(f),ICON_BUTTON_SIZES:Object.freeze(R),ICON_BUTTON_COLORS:Object.freeze(A),SECTION_HEADER_MOBILE_LAYOUTS:Object.freeze(m),isExpandedInternal:!1}},computed:{chevronRotation(){return this.isExpanded?180:void 0},showSlot(){return this.isExpanded||!this.hideSlotWhenCollapsed},sizeClass(){return`-ds-size-${this.size}`},iconSize(){return this.size===r.MEDIUM||this.size===r.LARGE?f.X_SMALL:f.XX_SMALL}},watch:{isExpanded:{handler(e){e!==this.isExpandedInternal&&(this.isExpandedInternal=e)},immediate:!0}},methods:{onInfoClicked(){this.$emit("info-click")},onTitleWrapperClicked(){this.isExpandable&&(this.isExpandedInternal=!this.isExpandedInternal,this.$emit("update:isExpanded",this.isExpandedInternal))}}}),D={class:"ds-sectionHeader__wrapper"},z={class:"ds-sectionHeader__main"},U={class:"ds-sectionHeader__header"},k={class:"ds-sectionHeader__titleContainer"},M={key:0,class:"ds-sectionHeader__eyebrow"},V=["title"],B={key:0,class:"ds-sectionHeader__info"},j={key:0,class:"ds-sectionHeader__slotHorizontal"};function w(e,I,W,$,Z,F){const u=E("ds-icon"),C=E("ds-icon-button"),N=E("ds-divider");return s(),n("div",{class:o(["ds-sectionHeader",{"-ds-expandable":e.isExpandable,"-ds-horizontal":e.mobileLayout===e.SECTION_HEADER_MOBILE_LAYOUTS.HORIZONTAL,[e.sizeClass]:!0}])},[i("div",D,[i("div",z,[i("div",U,[i("div",{class:"ds-sectionHeader__titleWrapper",onClick:I[0]||(I[0]=(...v)=>e.onTitleWrapperClicked&&e.onTitleWrapperClicked(...v))},[e.iconLeft?(s(),d(u,{key:0,class:o(["ds-sectionHeader__icon",{[`-ds-${e.iconLeftColor}`]:e.iconLeftColor}]),icon:e.iconLeft,size:e.iconSize},null,8,["class","icon","size"])):t("",!0),i("div",k,[e.eyebrow?(s(),n("div",M,p(e.eyebrow),1)):t("",!0),i("div",{class:o(["ds-sectionHeader__title",{"-ds-ellipsis":e.titleEllipsis}]),title:e.titleEllipsis?e.title:void 0},p(e.title),11,V)]),e.iconRight?(s(),d(u,{key:1,class:o(["ds-sectionHeader__icon",{[`-ds-${e.iconRightColor}`]:e.iconRightColor}]),icon:e.iconRight,size:e.iconSize},null,8,["class","icon","size"])):t("",!0),e.isExpandable?(s(),d(u,{key:2,class:"ds-sectionHeader__icon",icon:e.ICONS.FA_CHEVRON_DOWN,rotation:e.chevronRotation,size:e.iconSize},null,8,["icon","rotation","size"])):t("",!0)]),e.info?(s(),n("div",B,[b(C,{icon:e.ICONS.FA_CIRCLE_QUESTION,size:e.ICON_BUTTON_SIZES.X_SMALL,color:e.ICON_BUTTON_COLORS.NEUTRAL_WEAK,touchable:!1,onClick:g(e.onInfoClicked,["prevent","stop"])},null,8,["icon","size","color","onClick"])])):t("",!0)]),e.$slots.default&&e.showSlot?(s(),n("div",j,[S(e.$slots,"default",{},void 0,!0)])):t("",!0)]),e.supportingText?(s(),n("div",{key:0,class:o(["ds-sectionHeader__supportingText",{"-ds-withoutPadding":!e.hasDivider||!e.hasDivider&&e.mobileLayout===e.SECTION_HEADER_MOBILE_LAYOUTS.HORIZONTAL}])},p(e.supportingText),3)):t("",!0),e.$slots.default&&e.showSlot?(s(),n("div",{key:1,class:o(["ds-sectionHeader__slotVertical",{"-ds-withoutPadding":!e.hasDivider}])},[S(e.$slots,"default",{},void 0,!0)],2)):t("",!0)]),e.hasDivider?(s(),d(N,{key:0})):t("",!0)],2)}const Q=H(_,[["render",w],["__scopeId","data-v-d45ebe81"]]);_.__docgenInfo={displayName:"SectionHeader",exportName:"default",description:"",tags:{},props:[{name:"isExpandable",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"hideSlotWhenCollapsed",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"iconLeft",type:{name:"Object as () => IconItem"},defaultValue:{func:!1,value:"null"}},{name:"iconLeftColor",type:{name:"String as () => SectionHeaderIconColor"},defaultValue:{func:!1,value:"null"}},{name:"iconRight",type:{name:"Object as () => IconItem"},defaultValue:{func:!1,value:"null"}},{name:"iconRightColor",type:{name:"String as () => SectionHeaderIconColor"},defaultValue:{func:!1,value:"null"}},{name:"isExpanded",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"info",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"size",type:{name:"string"},defaultValue:{func:!1,value:"SECTION_HEADER_SIZES.MEDIUM"}},{name:"title",type:{name:"string"},required:!0},{name:"titleEllipsis",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"eyebrow",type:{name:"string"},defaultValue:{func:!1,value:"''"}},{name:"supportingText",type:{name:"string"},defaultValue:{func:!1,value:"null"}},{name:"hasDivider",type:{name:"boolean"},defaultValue:{func:!1,value:"true"}},{name:"mobileLayout",type:{name:"string"},defaultValue:{func:!1,value:"SECTION_HEADER_MOBILE_LAYOUTS.VERTICAL"}}],events:[{name:"info-click"},{name:"update:isExpanded",type:{names:["undefined"]}}],slots:[{name:"default"}],sourceFiles:["/home/runner/work/design-system/design-system/lib/js/components/Headers/SectionHeader/SectionHeader.vue"]};export{O as S,r as a,Q as b,m as c};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{b as r,a as l,S as t,c as a}from"./SectionHeader-
|
|
1
|
+
import{b as r,a as l,S as t,c as a}from"./SectionHeader-CkqBv6QD.js";import{I as o}from"./Icon-CQ850_cO.js";import{w as u}from"./decorator-CSnIf-k5.js";import"./IconButton-5VVKI4L8.js";import"./Button-CYE3lqUM.js";import"./vue.esm-bundler-CzUSCRPq.js";import"./_plugin-vue_export-helper-DlAUqK2U.js";import"./device-9fgosCm4.js";import"./Divider-ClNbKvxH.js";import"./v4-BZawosSj.js";const{useArgs:m}=__STORYBOOK_MODULE_PREVIEW_API__,R={title:"Components/Headers/SectionHeader",component:r,decorators:[u]},E=d=>{const[b,p]=m();return{components:{SectionHeader:r},setup(){return d},data(){return{ICONS:Object.freeze(o)}},methods:{onIsExpandedUpdated(c){p({isExpanded:c})}},template:'<section-header :is-expandable="isExpandable" :hide-slot-when-collapsed="hideSlotWhenCollapsed" :icon-left="ICONS[iconLeft]" :icon-left-color="iconLeftColor" :icon-right="ICONS[iconRight]" :icon-right-color="iconRightColor" :is-expanded="isExpanded" :size="size" :info="info" :title="title" :title-ellipsis="titleEllipsis" :eyebrow="eyebrow" :has-divider="hasDivider" :mobile-layout="mobileLayout" :supportingText="supportingText" @update:isExpanded="onIsExpandedUpdated"><div style="border: 1px solid;">Slot content</div></section-header>'}},e=E.bind({}),g={size:l.MEDIUM,title:"Section Header",titleEllipsis:!1,supportingText:"Supporting text. Et doloribus aspernatur suscipit provident maiores. Natus natus et pariatur. Eligendi illo quo esse. Tenetur ad neque veniam.",eyebrow:"eyebrow text",iconLeft:null,iconLeftColor:t.NEUTRAL,iconRight:null,iconRightColor:t.NEUTRAL,info:!1,hasDivider:!0,isExpandable:!1,isExpanded:!1,hideSlotWhenCollapsed:!1,mobileLayout:a.VERTICAL},h={iconLeft:{control:"select",options:[null,...Object.keys(o)]},iconLeftColor:{control:"select",options:[null,...Object.values(t)]},iconRight:{control:"select",options:[null,...Object.keys(o)]},iconRightColor:{control:"select",options:[null,...Object.values(t)]},size:{control:"select",options:Object.values(l)},hasDivider:{control:"boolean"},info:{control:"boolean"},mobileLayout:{control:"select",options:Object.values(a)},titleEllipsis:{control:"boolean"}};e.argTypes=h;e.args=g;e.parameters={actions:{handles:["click"]},design:{type:"figma",url:"https://www.figma.com/file/izQdYyiBR1GQgFkaOIfIJI/LMS---DS-Components?type=design&node-id=6984-129711&t=ivzu5dM9vSgW20Re-0"}};var i,s,n;e.parameters={...e.parameters,docs:{...(i=e.parameters)==null?void 0:i.docs,source:{originalSource:`args => {
|
|
2
2
|
const [_, updateArgs] = useArgs();
|
|
3
3
|
return {
|
|
4
4
|
components: {
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["./Checkbox-KYcZTLuT.js","./vue.esm-bundler-CzUSCRPq.js","./SelectionControl-C2m3ylYI.js","./Icon-CQ850_cO.js","./_plugin-vue_export-helper-DlAUqK2U.js","./RadioButton-BqrBPM7P.js"])))=>i.map(i=>d[i]);
|
|
2
|
-
import{_ as d}from"./iframe-
|
|
2
|
+
import{_ as d}from"./iframe-BVrI2R6j.js";import{d as L,v as u,t as O,c as r,a as i,b as c,x as m,k as p,h as T,n as _,r as f,o as n}from"./vue.esm-bundler-CzUSCRPq.js";import{a as C,I as E,b as N}from"./Icon-CQ850_cO.js";import{a as o,b as A,S as D}from"./SelectionControl-C2m3ylYI.js";import{_ as g}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-KYcZTLuT.js").then(e=>e.b),__vite__mapDeps([0,1,2,3,4]),import.meta.url)),RadioButton:u(()=>d(()=>import("./RadioButton-BqrBPM7P.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(D),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=g(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-Be2rbLr5.js";import{I as r}from"./Icon-CQ850_cO.js";import{w as d}from"./decorator-CSnIf-k5.js";import"./iframe-BVrI2R6j.js";import"../sb-preview/runtime.js";import"./vue.esm-bundler-CzUSCRPq.js";import"./SelectionControl-C2m3ylYI.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"
|
package/docs/assets/{SurveyQuestionOpenEnded-Dm58tKCP.js → SurveyQuestionOpenEnded-DMkrJ7PV.js}
RENAMED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{C as f}from"./Card-DQn9130w.js";import{b as v,M as T,S as r,r as c}from"./string-Cr9ML3bf.js";import{D as y,i as I,a as N}from"./Button-CYE3lqUM.js";import{I as C}from"./IconButton-
|
|
1
|
+
import{C as f}from"./Card-DQn9130w.js";import{b as v,M as T,S as r,r as c}from"./string-Cr9ML3bf.js";import{D as y,i as I,a as N}from"./Button-CYE3lqUM.js";import{I as C}from"./IconButton-5VVKI4L8.js";import{I as U,b}from"./Icon-CQ850_cO.js";import{d as Q,c as g,b as l,e as o,h as u,g as d,n as B,r as n,o as i,a,l as D,f as A,k as w}from"./vue.esm-bundler-CzUSCRPq.js";import{_ as z}from"./_plugin-vue_export-helper-DlAUqK2U.js";const p=Q({name:"SurveyQuestionOpenEnded",components:{SurveyQuestionTextarea:v,DsButton:y,DsCard:f,IconButton:C,DsModal:T},props:{title:{type:String,required:!0},value:{type:String,required:!0},placeholder:{type:String,default:"Wpisz swoją odpowiedź"},state:{type:String,default:r.DEFAULT,validator(e){return Object.values(r).includes(e)}}},emits:["input"],data(){return{showModal:!1,inputId:"survey-question-"+c(8),ICONS:Object.freeze(U),ICON_BUTTON_COLORS:Object.freeze(I),ICON_SIZES:Object.freeze(b),BUTTON_TYPES:Object.freeze(N),SURVEY_QUESTION_STATES:Object.freeze(r)}}}),M={class:"ds-surveyQuestionOpenEnded__header"},V=["for"],L={class:"ds-surveyQuestionOpenEnded__content"};function R(e,s,$,h,j,k){const S=n("ds-button"),m=n("ds-modal"),O=n("icon-button"),E=n("survey-question-textarea"),_=n("ds-card");return i(),g("div",{class:B(["ds-surveyQuestionOpenEnded",{"-ds-disabled":e.state===e.SURVEY_QUESTION_STATES.DISABLED}])},[e.showModal?(i(),l(m,{key:0,onCloseModal:s[1]||(s[1]=t=>e.showModal=!1)},{footer:o(()=>[a("div",null,[d(S,{type:e.BUTTON_TYPES.OUTLINED,onClick:s[0]||(s[0]=t=>e.showModal=!1)},{default:o(()=>s[4]||(s[4]=[D(" OK, rozumiem ")])),_:1},8,["type"])])]),default:o(()=>[A(e.$slots,"explanation",{},void 0,!0)]),_:3})):u("",!0),d(_,null,{content:o(()=>[a("div",M,[a("label",{class:"ds-surveyQuestionOpenEnded__title",for:e.inputId},w(e.title),9,V),e.$slots.explanation?(i(),l(O,{key:0,class:"ds-surveyQuestionOpenEnded__explanation",color:e.ICON_BUTTON_COLORS.NEUTRAL_WEAK,icon:e.ICONS.FA_CIRCLE_QUESTION,size:e.ICON_SIZES.MEDIUM,touchable:!1,onClick:s[2]||(s[2]=t=>e.showModal=!0)},null,8,["color","icon","size"])):u("",!0)]),a("div",L,[d(E,{id:e.inputId,class:"ds-surveyQuestionOpenEnded__input",disabled:e.state===e.SURVEY_QUESTION_STATES.DISABLED,value:e.value,placeholder:e.placeholder,onInput:s[3]||(s[3]=t=>e.$emit("input",t))},null,8,["id","disabled","value","placeholder"])])]),_:1})],2)}const G=z(p,[["render",R],["__scopeId","data-v-18877829"]]);p.__docgenInfo={displayName:"SurveyQuestionOpenEnded",exportName:"default",description:"",tags:{},props:[{name:"title",type:{name:"string"},required:!0},{name:"value",type:{name:"string"},required:!0},{name:"placeholder",type:{name:"string"},defaultValue:{func:!1,value:"'Wpisz swoją odpowiedź'"}},{name:"state",type:{name:"string"},defaultValue:{func:!1,value:"SURVEY_QUESTION_STATES.DEFAULT"}}],events:[{name:"input"}],slots:[{name:"explanation"}],sourceFiles:["/home/runner/work/design-system/design-system/lib/js/components/SurveyQuestions/SurveyQuestionOpenEnded/SurveyQuestionOpenEnded.vue"]};export{G as S};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{S as n}from"./SurveyQuestionOpenEnded-
|
|
1
|
+
import{S as n}from"./SurveyQuestionOpenEnded-DMkrJ7PV.js";import{S as i}from"./string-Cr9ML3bf.js";import"./Card-DQn9130w.js";import"./vue.esm-bundler-CzUSCRPq.js";import"./Divider-ClNbKvxH.js";import"./_plugin-vue_export-helper-DlAUqK2U.js";import"./LoadingBar-Bo6mXGaA.js";import"./Button-CYE3lqUM.js";import"./Icon-CQ850_cO.js";import"./IconButton-5VVKI4L8.js";import"./device-9fgosCm4.js";const{useArgs:l}=__STORYBOOK_MODULE_PREVIEW_API__,w={title:"Components/SurveyQuestions/SurveyQuestionOpenEnded",component:n},d=s=>{const[c,r]=l();return{components:{SurveyQuestionOpenEnded:n},setup(){return s},template:'<survey-question-open-ended :title="title" :value="value" :state="state" :placeholder="placeholder" @input="explanationUpdate"><template v-if="explanation" #explanation><div v-html="explanation" /></template></survey-question-open-ended>',methods:{explanationUpdate(p){r({value:p})}}}},e=d.bind({}),u={title:"Main question write here if it's long it will collapse.",value:"value",explanation:'<h3 class="modalHeader" style="text-align: center; margin-bottom: 16px;">Jak ocenić, czy slajdy i diagramy były zrozumiałe?</h3><div>Wyczerpujące materiały dają poczucie pełnego zrozumieina, przy jednoczesnym usystematyzowaniu informacji. Wpływa na to nie tylko ich jakość, ale też ilość.</div>',placeholder:"Wpisz swoją odpowiedź",state:i.DEFAULT},m={explanation:{control:"text"},state:{control:"select",options:Object.values(i)}};e.argTypes=m;e.args=u;e.parameters={design:{type:"figma",url:"https://www.figma.com/file/izQdYyiBR1GQgFkaOIfIJI/LMS---DS---Components?node-id=1555%3A41739"}};var t,a,o;e.parameters={...e.parameters,docs:{...(t=e.parameters)==null?void 0:t.docs,source:{originalSource:`args => {
|
|
2
2
|
const [_, updateArgs] = useArgs();
|
|
3
3
|
return {
|
|
4
4
|
components: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{C as b}from"./Card-DQn9130w.js";import{I as C}from"./IconButton-
|
|
1
|
+
import{C as b}from"./Card-DQn9130w.js";import{I as C}from"./IconButton-5VVKI4L8.js";import{D as A,i as V,a as L}from"./Button-CYE3lqUM.js";import{I as R,b as Q}from"./Icon-CQ850_cO.js";import{b as Y,M as G,S as d,a as E,r as D}from"./string-Cr9ML3bf.js";import{a as h,S as k,c as B,b as j}from"./SurveyToggle-CEytwXTu.js";import{d as z,c as l,b as _,e as u,h as i,g as r,r as o,o as t,a as n,l as $,f as M,k as m,n as T,F as O,m as p}from"./vue.esm-bundler-CzUSCRPq.js";import{_ as w}from"./_plugin-vue_export-helper-DlAUqK2U.js";const v=z({name:"SurveyQuestionScale",components:{SurveyQuestionTextarea:Y,DsCard:b,IconButton:C,SurveyToggle:h,DsModal:G,DsButton:A},props:{title:{type:String,required:!0},state:{type:String,default:d.DEFAULT,validator(e){return Object.values(d).includes(e)}},scaleOptions:{type:Array,required:!0,validator(e){return e.every(s=>typeof s=="object")}},elaborationLabel:{type:String,default:null},elaborationValue:{type:String,required:!0},placeholder:{type:String,default:"Wpisz swoją odpowiedź"},selectedValue:{type:String,default:null},containers:{type:String,default:E.TWO,validator(e){return Object.values(E).includes(e)}}},emits:["elaboration-change","select-change"],data(){return{showModal:!1,inputId:"survey-question-"+D(8),ICONS:Object.freeze(R),ICON_SIZES:Object.freeze(Q),ICON_BUTTON_COLORS:Object.freeze(V),BUTTON_TYPES:Object.freeze(L),SURVEY_TOGGLE_COLORS:Object.freeze(k),SURVEY_TOGGLE_STATES:Object.freeze(B),SURVEY_TOGGLE_STATUSES:Object.freeze(j),SURVEY_QUESTION_STATES:Object.freeze(d),SURVEY_QUESTION_CONTAINERS:Object.freeze(E)}},computed:{standaloneOptions(){return this.scaleOptions.filter(e=>e.standalone)}},methods:{onToggleClick(e){this.$emit("select-change",this.selectedValue===e?null:e)}}}),F={class:"ds-surveyQuestionScale"},q={class:"ds-surveyQuestionScale__header"},W={class:"ds-surveyQuestionScale__title"},P={key:0,class:"ds-surveyQuestionScale__container -ds-justifyEnd -ds-hideOnMobile"},Z={class:"ds-surveyQuestionScale__elaboration"},K=["for"];function H(e,s,J,X,x,ee){const y=o("ds-button"),U=o("ds-modal"),f=o("icon-button"),c=o("survey-toggle"),N=o("survey-question-textarea"),I=o("ds-card");return t(),l("div",F,[e.showModal?(t(),_(U,{key:0,onCloseModal:s[1]||(s[1]=a=>e.showModal=!1)},{footer:u(()=>[n("div",null,[r(y,{type:e.BUTTON_TYPES.OUTLINED,onClick:s[0]||(s[0]=a=>e.showModal=!1)},{default:u(()=>s[4]||(s[4]=[$(" OK, rozumiem ")])),_:1},8,["type"])])]),default:u(()=>[M(e.$slots,"explanation",{},void 0,!0)]),_:3})):i("",!0),r(I,null,{content:u(()=>[n("div",q,[n("span",W,m(e.title),1),e.$slots.explanation?(t(),_(f,{key:0,class:"ds-surveyQuestionScale__explanation",color:e.ICON_BUTTON_COLORS.NEUTRAL_WEAK,icon:e.ICONS.FA_CIRCLE_QUESTION,size:e.ICON_SIZES.MEDIUM,touchable:!1,onClick:s[2]||(s[2]=a=>e.showModal=!0)},null,8,["color","icon","size"])):i("",!0)]),n("div",{class:T(["ds-surveyQuestionScale__content",{"-oneContainer":e.containers===e.SURVEY_QUESTION_CONTAINERS.ONE}])},[n("div",{class:T(["ds-surveyQuestionScale__container",{"-ds-oneContainer":e.containers===e.SURVEY_QUESTION_CONTAINERS.ONE}])},[(t(!0),l(O,null,p(e.scaleOptions,(a,S)=>(t(),l("div",{key:`ds-surveyQuestionScale-${S}`,class:T(["ds-surveyQuestionScale__toggle",{"-ds-hideOnDesktop":a.standalone&&e.containers===e.SURVEY_QUESTION_CONTAINERS.TWO}])},[r(c,{meaning:a.meaning,"content-text":a.content,label:a.label,status:e.selectedValue===a.value?e.SURVEY_TOGGLE_STATUSES.SELECTED:e.SURVEY_TOGGLE_STATUSES.DEFAULT,state:e.state===e.SURVEY_QUESTION_STATES.DISABLED?e.SURVEY_TOGGLE_STATES.DISABLED:e.SURVEY_TOGGLE_STATES.DEFAULT,onClick:g=>e.onToggleClick(a.value)},null,8,["meaning","content-text","label","status","state","onClick"])],2))),128))],2),e.standaloneOptions.length>0&&e.containers===e.SURVEY_QUESTION_CONTAINERS.TWO?(t(),l("div",P,[(t(!0),l(O,null,p(e.standaloneOptions,(a,S)=>(t(),l("div",{key:`ds-surveyQuestionScale-standalone-${S}`,class:"ds-surveyQuestionScale__toggle"},[r(c,{meaning:a.meaning,"content-text":a.content,label:a.label,status:e.selectedValue===a.value?e.SURVEY_TOGGLE_STATUSES.SELECTED:e.SURVEY_TOGGLE_STATUSES.DEFAULT,state:e.state===e.SURVEY_QUESTION_STATES.DISABLED?e.SURVEY_TOGGLE_STATES.DISABLED:e.SURVEY_TOGGLE_STATES.DEFAULT,onClick:g=>e.onToggleClick(a.value)},null,8,["meaning","content-text","label","status","state","onClick"])]))),128))])):i("",!0)],2),e.selectedValue!==null&&e.elaborationLabel!==null?(t(),l(O,{key:0},[s[5]||(s[5]=n("hr",{class:"ds-surveyQuestionScale__separator"},null,-1)),n("div",Z,[n("label",{class:"ds-surveyQuestionScale__elaborationLabel",for:e.inputId},m(e.elaborationLabel),9,K),r(N,{id:e.inputId,value:e.elaborationValue,class:"ds-surveyQuestionScale__elaborationInput",placeholder:e.placeholder,disabled:e.state===e.SURVEY_QUESTION_STATES.DISABLED,onInput:s[3]||(s[3]=a=>e.$emit("elaboration-change",a))},null,8,["id","value","placeholder","disabled"])])],64)):i("",!0)]),_:1})])}const ie=w(v,[["render",H],["__scopeId","data-v-de80e429"]]);v.__docgenInfo={displayName:"SurveyQuestionScale",exportName:"default",description:"",tags:{},props:[{name:"title",type:{name:"string"},required:!0},{name:"state",type:{name:"string"},defaultValue:{func:!1,value:"SURVEY_QUESTION_STATES.DEFAULT"}},{name:"scaleOptions",type:{name:"Array as () => Array<SurveyQuestionScaleOption>"},required:!0},{name:"elaborationLabel",type:{name:"string"},defaultValue:{func:!1,value:"null"}},{name:"elaborationValue",type:{name:"string"},required:!0},{name:"placeholder",type:{name:"string"},defaultValue:{func:!1,value:"'Wpisz swoją odpowiedź'"}},{name:"selectedValue",type:{name:"string"},defaultValue:{func:!1,value:"null"}},{name:"containers",type:{name:"string"},defaultValue:{func:!1,value:"SURVEY_QUESTION_SCALE_CONTAINERS.TWO"}}],events:[{name:"elaboration-change"},{name:"select-change",type:{names:["undefined"]}}],slots:[{name:"explanation"}],sourceFiles:["/home/runner/work/design-system/design-system/lib/js/components/SurveyQuestions/SurveyQuestionScale/SurveyQuestionScale.vue"]};export{ie as S};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{S as r}from"./SurveyQuestionScale-
|
|
1
|
+
import{S as r}from"./SurveyQuestionScale-D50B0A4F.js";import{S as e}from"./SurveyToggle-CEytwXTu.js";import{a as s,S as c}from"./string-Cr9ML3bf.js";import"./Card-DQn9130w.js";import"./vue.esm-bundler-CzUSCRPq.js";import"./Divider-ClNbKvxH.js";import"./_plugin-vue_export-helper-DlAUqK2U.js";import"./LoadingBar-Bo6mXGaA.js";import"./IconButton-5VVKI4L8.js";import"./Icon-CQ850_cO.js";import"./Button-CYE3lqUM.js";import"./device-9fgosCm4.js";const{useArgs:u}=__STORYBOOK_MODULE_PREVIEW_API__,q={title:"Components/SurveyQuestions/SurveyQuestionScale",component:r},R=i=>{const[p,t]=u();return{components:{SurveyQuestionScale:r},setup(){return i},template:'<survey-question-scale :title="title" :scale-options="scaleOptions" :elaboration-value="elaborationValue" :elaborationLabel="elaborationLabel" :placeholder="placeholder" :selected-value="selectedValue" :state="state" :containers="containers" @select-change="selectedValueUpdate" @elaboration-change="elaborationUpdate"><template v-if="explanation" #explanation><div v-html="explanation" /></template></survey-question-scale>',methods:{elaborationUpdate(a){t({elaborationValue:a})},selectedValueUpdate(a){t({selectedValue:a})}}}},l=R.bind({}),S={title:"Main question write here if it's long it will collapse.",elaborationLabel:"Jeśli chcesz, uzasadnij lub rozwiń swoją ocenę",elaborationValue:"",explanation:`<h3 style="text-align: center; margin-bottom: 16px;">Jak ocenić, czy slajdy i diagramy były zrozumiałe?</h3>
|
|
2
2
|
<div>Wyczerpujące materiały dają poczucie pełnego zrozumienia, przy jednoczesnym usystematyzowaniu informacji. Wpływa na to nie tylko ich jakość, ale też ilość.</div>`,placeholder:"Wpisz swoją odpowiedź",containers:s.TWO,selectedValue:null,scaleOptions:[{value:"1",label:"Nie zgadzam się",meaning:e.PRIMARY,content:"1"},{value:"2",label:"Trochę się nie zgadzam",meaning:e.PRIMARY,content:"2"},{value:"3",label:"Trochę się zgadzam",meaning:e.PRIMARY,content:"3"},{value:"4",label:"Zgadzam się ",meaning:e.PRIMARY,content:"4"},{value:"5",label:"Nie wiem",meaning:e.NEUTRAL,standalone:!0}],state:c.DEFAULT},O={elaborationValue:{control:"text"},selectedValue:{control:!1},explanation:{control:"text"},containers:{control:"select",options:Object.values(s)},scaleOptions:{control:"object"},state:{control:"select",options:Object.values(c)}};l.argTypes=O;l.args=S;l.parameters={design:{type:"figma",url:"https://www.figma.com/file/izQdYyiBR1GQgFkaOIfIJI/LMS---DS---Components?node-id=1555%3A41739"}};const A={elaborationValue:{control:!1},explanation:{control:!1},selectedValue:{control:!1},scaleOptions:{control:!1},state:{control:!1},placeholder:{control:!1},elaborationLabel:{control:!1},title:{control:!1},"elaboration-change":{control:!1},"select-change":{control:!1}},U=i=>{const[p,t]=u();return{components:{SurveyQuestionScale:r},setup(){return i},template:'<div style="max-width: 600px"><survey-question-scale :title="title" :scale-options="scaleOptions" :elaboration-value="elaborationValue" :elaborationLabel="elaborationLabel" :placeholder="placeholder" :selected-value="selectedValue" :containers="containers" :state="state" @select-change="selectedValueUpdate" @elaboration-change="elaborationUpdate"><template v-if="explanation" #explanation><div v-html="explanation" /></template></survey-question-scale></div>',methods:{elaborationUpdate(a){t({elaborationValue:a})},selectedValueUpdate(a){t({selectedValue:a})}}}},o=U.bind({});o.argTypes={...A,containers:{control:"select",options:Object.values(s)}};o.args={title:"Main question write here if it's long it will collapse.",elaborationLabel:"Jeśli chcesz, uzasadnij lub rozwiń swoją ocenę",elaborationValue:"",explanation:`<h3 class="modalHeader" style="text-align: center; margin-bottom: 16px;">Jak ocenić, czy slajdy i diagramy były zrozumiałe?</h3>
|
|
3
3
|
<div>Wyczerpujące materiały dają poczucie pełnego zrozumienia, przy jednoczesnym usystematyzowaniu informacji. Wpływa na to nie tylko ich jakość, ale też ilość.</div>`,placeholder:"Wpisz swoją odpowiedź",containers:s.TWO,state:c.DEFAULT,selectedValue:null,scaleOptions:[{value:"1",label:"Nie zgadzam się",meaning:e.PRIMARY,content:"1"},{value:"2",label:"Trochę się nie zgadzam",meaning:e.PRIMARY,content:"2"},{value:"3",label:"Trochę się zgadzam",meaning:e.PRIMARY,content:"3"},{value:"4",label:"Zgadzam się ",meaning:e.PRIMARY,content:"4"},{value:"5",label:"Nie wiem",meaning:e.NEUTRAL,standalone:!0}]};const x=i=>{const[p,t]=u();return{components:{SurveyQuestionScale:r},setup(){return i},data(){return{elaboration:""}},template:'<survey-question-scale title="title" :scale-options="scaleOptions" elaborationLabel="elaborationLabel" :elaboration-value="elaboration" :selected-value="selectedValue" :containers="containers" @select-change="selectedValueUpdate" />',methods:{selectedValueUpdate(a){t({selectedValue:a})}}}},n=x.bind({});n.argTypes={...A,containers:{control:"select",options:Object.values(s)}};n.args={containers:s.ONE,selectedValue:null,scaleOptions:[{value:"1",label:"Nie zgadzam się",meaning:e.PRIMARY,content:"1"},{value:"2",label:"",meaning:e.PRIMARY,content:"2"},{value:"3",label:"",meaning:e.PRIMARY,content:"3"},{value:"4",label:"Trochę",meaning:e.PRIMARY,content:"4"},{value:"5",label:"",meaning:e.PRIMARY,content:"5"},{value:"6",label:"",meaning:e.PRIMARY,content:"6"},{value:"7",label:"Zgadzam się",meaning:e.PRIMARY,content:"7"}]};var d,m,b;l.parameters={...l.parameters,docs:{...(d=l.parameters)==null?void 0:d.docs,source:{originalSource:`args => {
|
|
4
4
|
const [_, updateArgs] = useArgs();
|