Merge pull request #7 from zigomir/miscellaneous-slot

Add misc slot

package.json

@@ -1,6 +1,6 @@
 {
   "name": "caly",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "description": "Caly is a small calendar!",
   "main": "dist/index.cjs.js",
   "module": "dist/custom-elements/index.js",

src/components/caly-calendar/__snapshots__/caly-calendar.spec.ts.snap

@@ -4,6 +4,9 @@ exports[`should render caly-calendar: render-2010-01-01 1`] = `
 <caly-calendar month="1" selected="2010-01-01" year="2010">
   <mock:shadow-root>
     <div class="grid">
+      <section class="misc">
+        <slot name="misc"></slot>
+      </section>
       <section class="navigation">
         <div class="button">
           <slot name="back">

src/components/caly-calendar/caly-calendar.css

@@ -32,8 +32,9 @@
 .grid {
   display: inline-grid;
   grid-template-areas: var(--grid,
-    "nav nav"
-    "mn  mn"
+    "misc misc"
+    "nav  nav"
+    "mn   mn"
   );
   column-gap: var(--grid-column-gap, 0px);
 }
@@ -43,6 +44,10 @@
   color: var(--out-of-range-color, #d3d3d3);
 }
 
+.misc {
+  grid-area: misc;
+}
+
 .navigation {
   grid-area: nav;
   height: var(--navigation-height, 16px);

src/components/caly-calendar/caly-calendar.tsx

@@ -19,8 +19,9 @@ interface IMonth {
 }
 
 /**
- * @slot back – Slot for the previous month button
- * @slot forward – Slot for the next month button
+ * @slot misc - Slot for the miscellaneous, e.g. date preset buttons
+ * @slot back - Slot for the previous month button
+ * @slot forward - Slot for the next month button
  */
 @Component({
   tag: 'caly-calendar',
@@ -131,6 +132,10 @@ export class CalyCalendar {
 
     return (
       <div class="grid">
+        <section class="misc">
+          <slot name="misc"></slot>
+        </section>
+
         <section class="navigation">
           <div onClick={() => this.back()} class="button">
             <slot name="back">&lt;</slot>

src/components/caly-calendar/readme.md

@@ -73,10 +73,11 @@ Caly, a 6k customizable calendar.
 
 ## Slots
 
-| Slot                                          | Description |
-| --------------------------------------------- | ----------- |
-| `"back – Slot for the previous month button"` |             |
-| `"forward – Slot for the next month button"`  |             |
+| Slot        | Description                                          |
+| ----------- | ---------------------------------------------------- |
+| `"back"`    | Slot for the previous month button                   |
+| `"forward"` | Slot for the next month button                       |
+| `"misc"`    | Slot for the miscellaneous, e.g. date preset buttons |
 
 
 ## CSS Custom Properties

src/index.html

@@ -33,11 +33,6 @@
 
         --cell-width: 40px;
         --cell-height: 40px;
-
-        --grid:
-          "nav nav"
-          "mn  mn";
-
         --grid-column-gap: 15px;
 
         --in-range-bg-color: yellow;