feat: datepicker component

packages/core/src/components/calendar/calendar.scss

@@ -0,0 +1,116 @@
+@use '../../helpers';
+@use '../../internal';
+@use '../../mixins';
+
+@mixin Calendar() {
+  @include internal.IndicatorContainer();
+
+  @if not mixins.includes('Calendar') {
+    @include _Calendar();
+  }
+}
+
+@mixin _Calendar() {
+  $cldr-btn-size: helpers.space(6);
+
+  .ods-calendar {
+    background-color: helpers.color('background-surface');
+    border: 1px solid helpers.color('border-input');
+    border-radius: helpers.border-radius('medium');
+    padding: helpers.space(0.5);
+    width: helpers.space(42);
+
+    &-nav {
+      align-items: center;
+      display: flex;
+      justify-content: space-between;
+      margin-bottom: helpers.space(0.5);
+      width: 100%;
+    }
+
+    &-nav-item {
+      border-radius: helpers.border-radius('full');
+      height: $cldr-btn-size;
+      width: $cldr-btn-size;
+    }
+
+    &-month {
+      align-items: center;
+      display: flex;
+      flex-grow: 1;
+      justify-content: center;
+      margin: 0;
+    }
+
+    &-year {
+      box-sizing: content-box;
+      margin-left: 1ch;
+      width: 4ch;
+    }
+
+    &-month,
+    &-year {
+      @include helpers.font('300-bold');
+    }
+
+    &-days,
+    &-dates {
+      display: flex;
+      flex-wrap: wrap;
+      list-style: none;
+      margin: 0;
+      padding: 0;
+    }
+
+    &-days li,
+    &-dates li {
+      align-items: center;
+      display: flex;
+      justify-content: center;
+      width: $cldr-btn-size;
+    }
+
+    &-days {
+      background-color: helpers.color('background-surface-alt');
+      border-radius: helpers.border-radius('medium');
+      color: helpers.color('content-secondary');
+      height: helpers.space(4);
+      margin-bottom: helpers.space(0.5);
+    }
+  }
+
+  .ods-button {
+    &.-date {
+      border-radius: helpers.border-radius('full');
+      height: $cldr-btn-size;
+      width: $cldr-btn-size;
+    }
+
+    &.-date:not(:disabled) {
+      color: helpers.color('content-main');
+    }
+
+    &.-date--selected:not(:disabled) {
+      background-color: helpers.color('background-action');
+      color: helpers.color('content-inverse-main');
+    }
+
+    &.-date--today::before {
+      $cldr-indicator-size: helpers.space(0.75);
+      background-color: helpers.color('background-action');
+      border-radius: helpers.border-radius('full');
+      bottom: helpers.space(0.5);
+
+      content: '';
+      height: $cldr-indicator-size;
+      left: 50%;
+      position: absolute;
+      transform: translateX(-50%);
+      width: $cldr-indicator-size;
+    }
+
+    &.-date--today.-date--selected::before {
+      background-color: helpers.color('background-inverse-action');
+    }
+  }
+}

packages/core/src/components/calendar/calendar.ts

@@ -0,0 +1,6 @@
+export interface CalendarProps {
+  canSelectFuture?: boolean;
+  canSelectPast?: boolean;
+  selectedDate?: string | null;
+  onDateSelect: (date: string) => void;
+}

packages/core/src/components/date-picker/date-picker.scss

@@ -0,0 +1,40 @@
+@use '../../helpers';
+@use '../../internal';
+@use '../../mixins';
+
+@mixin DatePicker() {
+  @include internal.IndicatorContainer();
+
+  @if not mixins.includes('DatePicker') {
+    @include _DatePicker();
+  }
+}
+
+@mixin _DatePicker() {
+  $stroke-size: helpers.space(0.25);
+
+  .ods-date-picker-overlay {
+    inset: 0;
+    position: fixed;
+  }
+
+  .ods-date-picker-container {
+    margin-bottom: 150vh; // To remove
+    position: relative;
+  }
+
+  .ods-date-picker {
+    @include helpers.font('600-regular');
+    position: relative;
+    width: helpers.space(24);
+  }
+
+  .ods-date-picker-button {
+    height: helpers.space(6);
+    position: absolute;
+    right: 0;
+    top: 50%;
+    transform: translateY(-50%);
+    width: helpers.space(6);
+  }
+}

packages/core/src/components/date-picker/date-picker.ts

@@ -0,0 +1,4 @@
+export interface DatePickerProps {
+  canSelectFuture?: boolean;
+  canSelectPast?: boolean;
+}

packages/core/src/components/index.scss

@@ -38,6 +38,10 @@
 @forward './tooltip/tooltip';
 @use './validation/validation';
 @forward './validation/validation';
+@use './date-picker/date-picker';
+@forward './date-picker/date-picker';
+@use './calendar/calendar';
+@forward './calendar/calendar';
 
 @mixin components() {
   @include asterisk.Asterisk();
@@ -60,4 +64,6 @@
   @include textarea.Textarea();
   @include tooltip.Tooltip();
   @include validation.Validation();
+  @include date-picker.DatePicker();
+  @include calendar.Calendar();
 }

packages/core/src/components/index.ts

@@ -1,5 +1,7 @@
 export * from './button/button';
+export * from './calendar/calendar';
 export * from './checkbox/checkbox';
+export * from './date-picker/date-picker';
 export * from './field/field';
 export * from './form/form';
 export * from './helper-text/helper-text';

packages/core/src/components/input/input.ts

@@ -1,5 +1,13 @@
 export interface InputProps {
   disabled?: boolean;
   invalid?: boolean;
-  type?: 'text' | 'number' | 'email' | 'password' | 'tel' | 'url' | 'search';
+  type?:
+    | 'text'
+    | 'number'
+    | 'email'
+    | 'password'
+    | 'tel'
+    | 'url'
+    | 'search'
+    | 'date';
 }

packages/react/src/components/calendar/calendar.stories.tsx

@@ -0,0 +1,53 @@
+import { Calendar, CalendarProps } from '@onfido/castor-react';
+import React from 'react';
+import { Meta, Story } from '../../../../../docs';
+
+export default {
+  title: 'React/Calendar',
+  component: Calendar,
+  argTypes: {
+    children: { description: 'Acts as a label for the `<input>`.' },
+    bordered: { table: { type: { summary: 'boolean' } } },
+    disabled: { table: { type: { summary: 'boolean' } } },
+    invalid: { table: { type: { summary: 'boolean' } } },
+  },
+  args: {
+    children: '',
+    bordered: false,
+    disabled: false,
+    invalid: false,
+  },
+  parameters: { display: 'flex' },
+} as Meta<CalendarProps>;
+
+export const Playground: Story<CalendarProps> = {
+  render: () => (
+    <Calendar
+      onDateSelect={() => {
+        console.log('selected');
+      }}
+    />
+  ),
+};
+
+export const NoPastSelection: Story<CalendarProps> = {
+  render: () => (
+    <Calendar
+      onDateSelect={() => {
+        console.log('selected');
+      }}
+      canSelectPast={false}
+    />
+  ),
+};
+
+export const NoFutureSelection: Story<CalendarProps> = {
+  render: () => (
+    <Calendar
+      onDateSelect={() => {
+        console.log('selected');
+      }}
+      canSelectFuture={false}
+    />
+  ),
+};