feat: calendar component (#823)

Signed-off-by: Aykut Saraç <aykutsarac0@gmail.com>
Co-authored-by: Levent Anil Ozen <leventanilozen@gmail.com>
Co-authored-by: Buse Selvi <106681486+buseselvi@users.noreply.github.com>
Co-authored-by: Aykut Saraç <aykutsarac0@gmail.com>

commitlint.config.cjs

@@ -33,6 +33,7 @@ module.exports = {
  "textarea",
  "popover",
  "notification",
+ "calendar",
  "table",
  "split-button",
  ],

custom-elements-manifest.config.mjs

@@ -2,7 +2,7 @@ import { parse } from "comment-parser";
 
 export default {
  globs: ["src/components/**/!(*.test|*.stories).ts"],
- exclude: ["src/**/*.css", "src/components/icon/icon-list.ts"],
+ exclude: ["src/**/*.css", "src/**/*.constant.ts","src/**/*/*.types.ts","src/components/icon/icon-list.ts"],
  outdir: "dist/",
  dev: false,
  watch: false,

playground/template.html

@@ -8,7 +8,7 @@
  <script type="module" src="./dist/baklava.js"></script>
  <script>
  // Live reload
- new EventSource('/esbuild').addEventListener('change', () => location.reload());
+ new EventSource("/esbuild").addEventListener("change", () => location.reload());
  </script>
  <style>
  *:not(:defined) {

src/baklava.ts

@@ -34,4 +34,5 @@ export { default as BlTableRow } from "./components/table/table-row/bl-table-row
 export { default as BlTableHeaderCell } from "./components/table/table-header-cell/bl-table-header-cell";
 export { default as BlTableCell } from "./components/table/table-cell/bl-table-cell";
 export { default as BlSplitButton } from "./components/split-button/bl-split-button";
+export { default as BlCalendar } from "./components/calendar/bl-calendar";
 export { getIconPath, setIconPath } from "./utilities/asset-paths";

src/components/button/bl-button.css

@@ -84,7 +84,7 @@
 }
 
 .button:focus-visible::after {
- border: 2px solid var(--main-color);
+ border: 2px solid var(--bl-button-focus-border-color, var(--main-color));
  border-radius: var(--bl-border-radius-l);
  content: "";
  position: absolute;

src/components/calendar/bl-calendar.constant.ts

@@ -0,0 +1,14 @@
+export const FIRST_MONTH_INDEX = 0;
+export const LAST_MONTH_INDEX = 11;
+
+export enum CALENDAR_VIEWS {
+ DAYS = "days",
+ MONTHS = "months",
+ YEARS = "years",
+}
+
+export enum CALENDAR_TYPES {
+ SINGLE = "single",
+ MULTIPLE = "multiple",
+ RANGE = "range",
+}

src/components/calendar/bl-calendar.css

@@ -0,0 +1,137 @@
+.calendar {
+ display: flex;
+ flex-direction: column;
+}
+
+.calendar-content {
+ display: flex;
+ padding: 16px;
+ flex-direction: column;
+ align-items: center;
+ gap: 16px;
+ border-radius: var(--bl-border-radius-s);
+ width: fit-content;
+ border: 1px solid var(--bl-color-primary);
+ background: var(--bl-color-neutral-full);
+}
+
+.calendar-header {
+ display: flex;
+ justify-content: space-between;
+ width: 100%;
+ align-items: center;
+ gap: 2px;
+}
+
+.arrow {
+ flex: 1;
+}
+
+.header-text {
+ flex: 3;
+}
+
+.header-text-hover {
+ background: var(--bl-color-neutral-lightest);
+ border-radius: var(--bl-border-radius-s);
+}
+
+.days-wrapper {
+ display: flex;
+ flex-direction: column;
+}
+
+.day-wrapper {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.week-row {
+ display: flex;
+ align-items: center;
+ flex-direction: row;
+ padding-bottom: 8px;
+}
+
+.day {
+ display: flex;
+ align-items: center;
+ width: 40px;
+
+ --bl-button-focus-border-color: #000;
+ --bl-font-title-4-medium: var(--bl-font-weight-regular) var(--bl-font-size-m);
+ --bl-size-xl: 40px;
+ --bl-border-radius-m: 50%;
+ --bl-border-radius-l: 50%;
+
+ &.today-day {
+ --bl-color-neutral-darker: var(--bl-color-primary);
+ --bl-color-neutral-darkest: var(--bl-color-primary);
+ }
+
+ &.selected-day {
+ background: var(--bl-color-primary);
+ border-radius: 50%;
+
+ --bl-button-focus-border-color: var(--bl-color-primary);
+ --bl-color-neutral-darker: var(--bl-color-neutral-full);
+ }
+
+ &.other-month-day {
+ --bl-color-neutral-darker: var(--bl-color-neutral-dark);
+ }
+}
+
+.range-day {
+ background: var(--bl-color-primary-contrast);
+
+ --bl-color-neutral-lightest: var(--bl-color-primary-contrast);
+}
+
+.range-end-day,
+.range-start-day,
+.selected-day {
+ --bl-color-neutral-lightest: var(--bl-color-primary);
+ --bl-color-neutral-darker: var(--bl-color-neutral-full);
+ --bl-color-neutral-darkest: var(--bl-color-neutral-full) !important;
+}
+
+.range-start-day {
+ background: var(--bl-color-primary-contrast);
+ border-top-left-radius: 50%;
+ border-bottom-left-radius: 50%;
+}
+
+.range-end-day {
+ background: var(--bl-color-primary-contrast);
+ border-top-right-radius: 50%;
+ border-bottom-right-radius: 50%;
+}
+
+.weekday-text {
+ color: var(--bl-color-neutral-dark);
+ text-align: center;
+ padding: 8px 0;
+ width: 40px;
+}
+
+.grid-content {
+ display: grid;
+ grid-template-columns: auto auto auto;
+ text-align: center;
+}
+
+.grid-item {
+ width: 93.33px;
+
+ --bl-size-3xs: 15px;
+}
+
+.grid-item:not(:nth-last-child(-n + 3)) {
+ padding-bottom: 8px;
+}
+
+.calendar-text {
+ font: var(--bl-font-title-3-regular);
+}

src/components/calendar/bl-calendar.stories.mdx

@@ -0,0 +1,93 @@
+import { html } from 'lit';
+import { Meta, Canvas, ArgsTable, Story } from '@storybook/addon-docs';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+
+<Meta
+ title="Components/Calendar"
+ component="bl-calendar"
+ argTypes={{
+ type: {
+ control: {
+ control: 'text',
+ description: 'Type of the calendar'
+ }
+ },
+ }}
+/>
+
+export const CalendarTemplate = (args) => html`<bl-calendar
+ type=${ifDefined(args.type)}
+ min-date=${ifDefined(args.minDate)}
+ max-date=${ifDefined(args.maxDate)}
+ start-of-week=${ifDefined(args.startOfWeek)}
+ locale=${ifDefined(args.locale)}
+ default-value=${ifDefined(args.defaultValue)}
+ disabled-dates=${ifDefined(args.disabledDates)}>${unsafeHTML(args.content)}</bl-calendar>`
+
+
+export const Template = (args) => html`${CalendarTemplate({...args})}`;
+
+
+# Calendar
+
+<bl-badge icon="document">[ADR](https://github.com/Trendyol/baklava/issues/795)</bl-badge>
+<bl-badge icon="puzzle">[Figma](https://www.figma.com/file/RrcLH0mWpIUy4vwuTlDeKN/Baklava-Design-Guide?type=design&node-id=1412-8914&mode=design&t=b0kU7tBfJQFvz2at-0)</bl-badge>
+
+Calendar component is an **internal** component for using inside Datepicker component.
+
+### Usage
+
+* Calendar has three types such as **single**,**multiple** and **range**.Default calendar type is `single`.You can set calendar type by using `type` attribute.
+* Calendar has **min-date** and **max-date** attributes.By entering these values,you can disable all dates before min-date property or will disable all dates after max-date property.
+* Another attribute **disabled-dates** is also restrict the dates that can be selected on the calendar.
+* Attribute **start-of-date** defines the days of the week, corresponding to 0 Sundays and 6 Saturdays. By entering this, you can choose from which day the calendar will create the calendar view.
+
+
+## Calendar Types
+
+### Single Type Calendar
+
+Default calendar type is `single` and you can only select a single day from calendar.
+
+<Canvas>
+ <Story name="Single Type Calendar" args={{ type: 'single' }}>
+ {Template.bind({})}
+ </Story>
+</Canvas>
+
+### Multiple Type Calendar
+
+You can select multiple days from calendar.
+
+<Canvas>
+ <Story name="Multiple Type Calendar" args={{ type: 'multiple' }}>
+ {Template.bind({})}
+ </Story>
+</Canvas>
+
+
+### Range Type Calendar
+
+You can select date range from calendar.
+
+<Canvas>
+ <Story name="Range Type Calendar" args={{ type: 'range' }}>
+ {Template.bind({})}
+ </Story>
+</Canvas>
+
+### Disabled Dates
+
+You can set dates which you want to disable from calendar.
+
+<Canvas>
+ <Story name="Disabled Dates" args={{ type: 'single',disabledDates:`["${new Date(new Date().getFullYear(),new Date().getMonth(),new Date().getDate()+2)}"]` }}>
+ {Template.bind({})}
+ </Story>
+</Canvas>
+
+
+## Reference
+
+<ArgsTable of="bl-calendar" />