Add misc slot

zigomir · Sep 17, 2020 · 01f852b · 01f852b
1 parent 5171276
commit 01f852b
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 13 deletions.
diff --git a/src/components/caly-calendar/__snapshots__/caly-calendar.spec.ts.snap b/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">

diff --git a/src/components/caly-calendar/caly-calendar.css b/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);

diff --git a/src/components/caly-calendar/caly-calendar.tsx b/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>

diff --git a/src/components/caly-calendar/readme.md b/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

diff --git a/src/index.html b/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;