@allakando/allakando-web-ui
Version:
Allakando's web component library
44 lines (43 loc) • 2.59 kB
JavaScript
const a=`# Allakando Timeslot-card\r
\r
The timeslot component is an allakando component to display a card component which works on the basis of the input date and duration. Based on the input date value the styling of the card is determined. The card has 3 states,\r
\r
Reported Lesson\r
Unreported Lesson\r
Scheduled Lesson\r
\r
There are altogether 6 attributes for this component. Those are,\r
\r
date\r
duration\r
name\r
href\r
reported\r
country\r
\r
Most of this timeslot card values are determined by the date fields. The component contains a getter function called cardState which returns (numerical values) the state of the ako-timeline-card. It has 3 states which ranges from 1 to 3 and 0 being an error state,\r
\r
## State - 1 (returns 1)\r
\r
Booked time has not passed.\r
\r
## State - 2 (returns 2)\r
\r
In all situation of reported state\r
\r
## State - 3 (returns 3)\r
\r
Booked but time has passed and also not reported\r
\r
## Error (returns 0)\r
\r
In all other scenarios which is an error scenario\r
`,s={title:"Atomic Components/Timeslot-Card",component:"ako-timeslot-card",tags:["autodocs"],parameters:{docs:{description:{component:a}}},argTypes:{date:{control:{type:"date"}},name:{control:{type:"text"}},href:{control:{type:"text"}},reported:{control:{type:"boolean"}},duration:{control:{type:"number"}},country:{options:["Sweden","France"],control:{type:"select"}}}},t=e=>`<ako-timeslot-card
${e.date?`date="${new Date(e.date).toISOString()}"`:""}
${e.name?`name="${e.name}"`:""}
${e.href?`href="${e.href}"`:""}
${e.reported?`reported="${e.reported}"`:""}
${e.duration?`duration="${e.duration}"`:""}
${e.country?`country="${e.country}"`:""}
>
</ako-timeslot-card>`;t.args={href:"https://storage.googleapis.com/production-coachnannyportal/contact_persons/fredrik-fridlund.jpg",name:"minnaminnaminnaminnaminna",date:Date.now(),duration:"60",reported:!1};var r,n,o;t.parameters={...t.parameters,docs:{...(r=t.parameters)==null?void 0:r.docs,source:{originalSource:'args => {\n return `<ako-timeslot-card \n ${args.date ? `date="${new Date(args.date).toISOString()}"` : ""}\n ${args.name ? `name="${args.name}"` : ""}\n ${args.href ? `href="${args.href}"` : ""}\n ${args.reported ? `reported="${args.reported}"` : ""}\n ${args.duration ? `duration="${args.duration}"` : ""}\n ${args.country ? `country="${args.country}"` : ""}\n >\n </ako-timeslot-card>`;\n}',...(o=(n=t.parameters)==null?void 0:n.docs)==null?void 0:o.source}}};const d=["Template"];export{t as Template,d as __namedExportsOrder,s as default};