feat: calendar component (#823)

Signed-off-by: Aykut Saraç <[email protected]>
Co-authored-by: Levent Anil Ozen <[email protected]>
Co-authored-by: Buse Selvi <[email protected]>
Co-authored-by: Aykut Saraç <[email protected]>

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" />