feat(sbb-calendar): add year and month selection views (#1951)

Co-authored-by: Mario Castigliano <[email protected]>
sbb-design-systems · Sep 21, 2023 · df3a5d7 · df3a5d7
1 parent 60c3114
commit df3a5d7
Show file tree

Hide file tree

Showing 19 changed files with 1,584 additions and 485 deletions.
diff --git a/src/components.d.ts b/src/components.d.ts
@@ -312,19 +312,19 @@ export namespace Components {
          */
         "dateFilter": (date: Date | null) => boolean;
         /**
-          * The maximum valid date. Takes Date Object, ISOString, and Unix Timestamp (number of seconds since Jan 1 1970).
+          * The maximum valid date. Takes Date Object, ISOString, and Unix Timestamp (number of seconds since Jan 1, 1970).
          */
         "max": Date | string | number;
         /**
-          * The minimum valid date. Takes Date Object, ISOString, and Unix Timestamp (number of seconds since Jan 1 1970).
+          * The minimum valid date. Takes Date Object, ISOString, and Unix Timestamp (number of seconds since Jan 1, 1970).
          */
         "min": Date | string | number;
         /**
           * Resets the active month according to the new state of the calendar.
          */
         "resetPosition": () => Promise<void>;
         /**
-          * The selected date. Takes Date Object, ISOString, and Unix Timestamp (number of seconds since Jan 1 1970).
+          * The selected date. Takes Date Object, ISOString, and Unix Timestamp (number of seconds since Jan 1, 1970).
          */
         "selectedDate": Date | string | number;
         /**
@@ -3031,19 +3031,19 @@ declare namespace LocalJSX {
          */
         "dateFilter"?: (date: Date | null) => boolean;
         /**
-          * The maximum valid date. Takes Date Object, ISOString, and Unix Timestamp (number of seconds since Jan 1 1970).
+          * The maximum valid date. Takes Date Object, ISOString, and Unix Timestamp (number of seconds since Jan 1, 1970).
          */
         "max"?: Date | string | number;
         /**
-          * The minimum valid date. Takes Date Object, ISOString, and Unix Timestamp (number of seconds since Jan 1 1970).
+          * The minimum valid date. Takes Date Object, ISOString, and Unix Timestamp (number of seconds since Jan 1, 1970).
          */
         "min"?: Date | string | number;
         /**
           * Event emitted on date selection.
          */
         "onDate-selected"?: (event: SbbCalendarCustomEvent<Date>) => void;
         /**
-          * The selected date. Takes Date Object, ISOString, and Unix Timestamp (number of seconds since Jan 1 1970).
+          * The selected date. Takes Date Object, ISOString, and Unix Timestamp (number of seconds since Jan 1, 1970).
          */
         "selectedDate"?: Date | string | number;
         /**

diff --git a/src/components/sbb-calendar/readme.md b/src/components/sbb-calendar/readme.md
@@ -1,12 +1,11 @@
-The `sbb-calendar` component displays a calendar that allows the user to select a date. For accessibility purposes it's rendered as a native table element and each day is a button. 
+The `sbb-calendar` component displays a calendar that allows the user to select a date. For accessibility purposes, it's rendered as a native table element and each day is a button. 
 
 While being deeply linked to the implementation of the `sbb-datepicker-toggle` component, it can be used on its own.
 
 For date inputs (`min`, `max`, `selected-date`) the accepted formats are: 
 - Date objects
 - ISO String 
-- Unix Timestamp (number of seconds since 1 Jan 1970)
-
+- Unix Timestamp (number of seconds since Jan 1, 1970)
 and it's recommended to set the time to 00:00:00.
 
 The component displays one month by default; two months can be displayed setting the `wide` property to `true`. It's also
@@ -51,13 +50,13 @@ This is helpful if you need a specific state of the component.
 
 ## Properties
 
-| Property       | Attribute       | Description                                                                                                    | Type                       | Default      |
-| -------------- | --------------- | -------------------------------------------------------------------------------------------------------------- | -------------------------- | ------------ |
-| `dateFilter`   | --              | A function used to filter out dates.                                                                           | `(date: Date) => boolean`  | `() => true` |
-| `max`          | `max`           | The maximum valid date. Takes Date Object, ISOString, and Unix Timestamp (number of seconds since Jan 1 1970). | `Date \| number \| string` | `undefined`  |
-| `min`          | `min`           | The minimum valid date. Takes Date Object, ISOString, and Unix Timestamp (number of seconds since Jan 1 1970). | `Date \| number \| string` | `undefined`  |
-| `selectedDate` | `selected-date` | The selected date. Takes Date Object, ISOString, and Unix Timestamp (number of seconds since Jan 1 1970).      | `Date \| number \| string` | `undefined`  |
-| `wide`         | `wide`          | If set to true, two months are displayed                                                                       | `boolean`                  | `false`      |
+| Property       | Attribute       | Description                                                                                                     | Type                       | Default      |
+| -------------- | --------------- | --------------------------------------------------------------------------------------------------------------- | -------------------------- | ------------ |
+| `dateFilter`   | --              | A function used to filter out dates.                                                                            | `(date: Date) => boolean`  | `() => true` |
+| `max`          | `max`           | The maximum valid date. Takes Date Object, ISOString, and Unix Timestamp (number of seconds since Jan 1, 1970). | `Date \| number \| string` | `undefined`  |
+| `min`          | `min`           | The minimum valid date. Takes Date Object, ISOString, and Unix Timestamp (number of seconds since Jan 1, 1970). | `Date \| number \| string` | `undefined`  |
+| `selectedDate` | `selected-date` | The selected date. Takes Date Object, ISOString, and Unix Timestamp (number of seconds since Jan 1, 1970).      | `Date \| number \| string` | `undefined`  |
+| `wide`         | `wide`          | If set to true, two months are displayed                                                                        | `boolean`                  | `false`      |
 
 
 ## Events
@@ -88,11 +87,13 @@ Type: `Promise<void>`
 
 ### Depends on
 
+- [sbb-icon](../sbb-icon)
 - [sbb-button](../sbb-button)
 
 ### Graph
 ```mermaid
 graph TD;
+  sbb-calendar --> sbb-icon
   sbb-calendar --> sbb-button
   sbb-button --> sbb-icon
   sbb-datepicker-toggle --> sbb-calendar

diff --git a/src/components/sbb-calendar/sbb-calendar.custom.d.ts b/src/components/sbb-calendar/sbb-calendar.custom.d.ts
@@ -5,7 +5,15 @@ export interface Day {
   yearValue: string;
 }
 
+export interface Month {
+  value: string;
+  longValue: string;
+  monthValue: number;
+}
+
 export interface Weekday {
   long: string;
   narrow: string;
 }
+
+export type CalendarView = 'day' | 'month' | 'year';