Merge pull request #63 from bruceharrison1984/doc-update

update header docs
bruceharrison1984 · Oct 24, 2022 · 48a20e8 · 48a20e8
2 parents ae9863c + 92ae6d5
commit 48a20e8
Showing 1 changed file with 16 additions and 11 deletions.
diff --git a/apps/schedulely-docs/docs/Components/Header.md b/apps/schedulely-docs/docs/Components/Header.md
@@ -21,15 +21,16 @@ export interface HeaderProps {
 }
 ```
 
-| Property       | Type         | Description                                                         |
-| -------------- | ------------ | ------------------------------------------------------------------- |
-| month          | `string`     | The current month the calendar is displaying                        |
-| year           | `number`     | The current year the calendar is displaying                         |
-| isCurrentMonth | `boolean`    | True if the selected month is the same as the current month         |
-| onNextMonth    | `() => void` | Calling this functions moves to the next month                      |
-| onNextYear     | `() => void` | Calling this functions moves to the same month of the next year     |
-| onPrevMonth    | `() => void` | Calling this functions moves to the previous month                  |
-| onPrevYear     | `() => void` | Calling this functions moves to the same month of the previous year |
+| Property       | Type            | Description                                                                          |
+| -------------- | --------------- | ------------------------------------------------------------------------------------ |
+| month          | `string`        | The current month the calendar is displaying                                         |
+| year           | `number`        | The current year the calendar is displaying                                          |
+| isCurrentMonth | `boolean`       | True if the selected month is the same as the current month                          |
+| onNextMonth    | `() => void`    | Calling this functions moves to the next month                                       |
+| onNextYear     | `() => void`    | Calling this functions moves to the same month of the next year                      |
+| onPrevMonth    | `() => void`    | Calling this functions moves to the previous month                                   |
+| onPrevYear     | `() => void`    | Calling this functions moves to the same month of the previous year                  |
+| componentSize  | `ComponentSize` | Enum value that indicates the current size of the calendar (used for element sizing) |
 
 ## Example (DefaultHeader)
 
@@ -45,6 +46,7 @@ const DefaultHeader = ({
   onPrevMonth,
   onPrevYear,
   isCurrentMonth,
+  componentSize,
 }) => (
   <div className="header-layout">
     <button
@@ -63,7 +65,10 @@ const DefaultHeader = ({
     </button>
 
     <div className="header-banner">
-      <span className="header-text">
+      <span
+        className="header-text"
+        style={{ fontSize: componentSize === 'large' ? '1.5em' : '1.1em' }}
+      >
         {month} - {year}
       </span>
       {isCurrentMonth && (
@@ -82,7 +87,7 @@ const DefaultHeader = ({
 
 render(
   <div className="schedulely">
-    <DefaultHeader month="December" year="2022" />
+    <DefaultHeader month="December" year="2022" componentSize={'large'} />
   </div>
 );
 ```