@progressive-development/pd-calendar 0.0.3 → 0.0.5

package/package.json

@@ -3,7 +3,7 @@
   "description": "progressive development calendar web component",
   "license": "SEE LICENSE IN LICENSE",
   "author": "PD Progressive Development",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "main": "index.js",
   "module": "index.js",
   "scripts": {
@@ -31,7 +31,7 @@
   ],
   "dependencies": {
     "lit": "^2.0.2",
-    "@progressive-development/pd-icon": "0.0.4",
+    "@progressive-development/pd-icon": "0.0.7",
     "fecha": "^4.2.0"
   },
   "devDependencies": {

package/src/PdCalendar.js

@@ -232,7 +232,7 @@ export class PdCalendar extends LitElement {
         /* Hack */
         padding-top: 8px;
         cursor: pointer;
-        --squi-icon-size: 1.5rem;
+        --pd-icon-size: 1.5rem;
         --my-fill-color: var(--my-title-color);
       }
     `;
@@ -328,19 +328,19 @@ export class PdCalendar extends LitElement {
       <div class="layout-container">
         <div class="header">
           <div class="header-main">
-            <squi-icon
+            <pd-icon
               @click="${this._previousMonth}"
               class="arrow"
               icon="previousArrow"
-            ></squi-icon>
+            ></pd-icon>
 
             <span class="content-title">${this._monthName}</span>
 
-            <squi-icon
+            <pd-icon
               @click="${this._nextMonth}"
               class="arrow"
               icon="nextArrow"
-            ></squi-icon>
+            ></pd-icon>
           </div>
 
           <div class="header-icons"></div>

package/stories/index.stories.js

@@ -2,43 +2,24 @@ import { html } from 'lit';
 import '../pd-calendar.js';
 
 export default {
-  title: 'PdCalendar',
+  title: 'Calendar',
   component: 'pd-calendar',
   argTypes: {
-    title: { control: 'text' },
-    counter: { control: 'number' },
-    textColor: { control: 'color' },
   },
 };
 
-function Template({ title = 'Hello world', counter = 5, textColor, slot }) {
-  return html`
-    <pd-calendar
-      style="--pd-calendar-text-color: ${textColor || 'black'}"
-      .title=${title}
-      .counter=${counter}
-    >
-      ${slot}
-    </pd-calendar>
-  `;
+function CalendarTemplate({ data }) {  
+  return html` <pd-calendar .data="${data || {}}"></pd-calendar> `;  
 }
 
-export const Regular = Template.bind({});
+export const Basic = CalendarTemplate.bind({});
+Basic.args = {};
 
-export const CustomTitle = Template.bind({});
-CustomTitle.args = {
-  title: 'My title',
-};
-
-export const CustomCounter = Template.bind({});
-CustomCounter.args = {
-  counter: 123456,
-};
-
-export const SlottedContent = Template.bind({});
-SlottedContent.args = {
-  slot: html`<p>Slotted content</p>`,
-};
-SlottedContent.argTypes = {
-  slot: { table: { disable: true } },
+export const WithInfo = CalendarTemplate.bind({});
+WithInfo.args = {
+  data: {
+    '2021-05-13': [{ info: '180€' }],
+    '2021-05-14': [{ info: '160€' }],
+    '2021-05-31': [{ info: '120€' }],
+  },
 };