Skip to content

Commit 7b0ddd5

Browse files
dilandooganerbilnas
dilandoogan
and
erbilnas
authored
feat(datepicker): developing datepicker component (#907)
Co-authored-by: Erbil <[email protected]>
1 parent 7831765 commit 7b0ddd5

18 files changed

+2130
-440
lines changed

‎commitlint.config.cjs

+1
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@ module.exports = {
3636
"calendar",
3737
"table",
3838
"split-button",
39+
"datepicker",
3940
],
4041
],
4142
},

‎playground/template.html

+31-31
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,37 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="UTF-8" />
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6-
<title>Baklava Playground</title>
7-
<link rel="stylesheet" href="./dist/themes/default.css" />
8-
<script type="module" src="./dist/baklava.js"></script>
9-
<script>
10-
// Live reload
11-
new EventSource("/esbuild").addEventListener("change", () => location.reload());
12-
</script>
13-
<style>
14-
*:not(:defined) {
15-
display: none;
16-
}
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
6+
<title>Baklava Playground</title>
7+
<link href="./dist/themes/default.css" rel="stylesheet" />
8+
<script src="./dist/baklava.js" type="module"></script>
9+
<script>
10+
// Live reload
11+
new EventSource("/esbuild").addEventListener("change", () => location.reload());
12+
</script>
13+
<style>
14+
*:not(:defined) {
15+
display: none;
16+
}
1717

18-
body {
19-
font-family: var(--bl-font-family);
20-
}
18+
body {
19+
font-family: var(--bl-font-family);
20+
}
2121

22-
h1 {
23-
font: var(--bl-font-display-1);
24-
}
25-
</style>
26-
</head>
27-
<body>
28-
<h1>Baklava Playground</h1>
22+
h1 {
23+
font: var(--bl-font-display-1);
24+
}
25+
</style>
26+
</head>
27+
<body>
28+
<h1>Baklava Playground</h1>
2929

30-
<p>
31-
Copy this file as playground/index.html and try your work here by running
32-
<code>npm run serve</code>.
33-
</p>
30+
<p>
31+
Copy this file as playground/index.html and try your work here by running
32+
<code>npm run serve</code>.
33+
</p>
3434

35-
<bl-button>Baklava is ready</bl-button>
36-
</body>
37-
</html>
35+
<bl-button>Baklava is ready</bl-button>
36+
</body>
37+
</html>

‎src/baklava.ts

+1
Original file line numberDiff line numberDiff line change
@@ -36,4 +36,5 @@ export { default as BlTableHeaderCell } from "./components/table/table-header-ce
3636
export { default as BlTableCell } from "./components/table/table-cell/bl-table-cell";
3737
export { default as BlSplitButton } from "./components/split-button/bl-split-button";
3838
export { default as BlCalendar } from "./components/calendar/bl-calendar";
39+
export { default as BlDatePicker } from "./components/datepicker/bl-datepicker";
3940
export { getIconPath, setIconPath } from "./utilities/asset-paths";

‎src/components/calendar/bl-calendar.css

+6-6
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,10 @@
55

66
.calendar-content {
77
display: flex;
8-
padding: 16px;
8+
padding: var(--bl-size-m);
99
flex-direction: column;
1010
align-items: center;
11-
gap: 16px;
11+
gap: var(--bl-size-m);
1212
border-radius: var(--bl-border-radius-s);
1313
width: fit-content;
1414
background: var(--bl-color-neutral-full);
@@ -19,7 +19,7 @@
1919
justify-content: space-between;
2020
width: 100%;
2121
align-items: center;
22-
gap: 2px;
22+
padding-bottom: var(--bl-size-s);
2323
}
2424

2525
.arrow {
@@ -50,7 +50,7 @@
5050
display: flex;
5151
align-items: center;
5252
flex-direction: row;
53-
padding-bottom: 8px;
53+
padding-bottom: var(--bl-size-2xs);
5454
}
5555

5656
.day {
@@ -115,7 +115,7 @@
115115
.weekday-text {
116116
color: var(--bl-color-neutral-dark);
117117
text-align: center;
118-
padding: 8px 0;
118+
padding: var(--bl-size-2xs) 0;
119119
width: 40px;
120120
}
121121

@@ -132,7 +132,7 @@
132132
}
133133

134134
.grid-item:not(:nth-last-child(-n + 3)) {
135-
padding-bottom: 8px;
135+
padding-bottom: var(--bl-size-2xs);
136136
}
137137

138138
.calendar-text {

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

+29-10
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
import { html } from 'lit';
2-
import { Meta, Canvas, ArgsTable, Story } from '@storybook/addon-docs';
3-
import { ifDefined } from 'lit/directives/if-defined.js';
4-
import { unsafeHTML } from 'lit/directives/unsafe-html.js';
1+
import { html } from "lit";
2+
import { ArgsTable, Canvas, Meta, Story } from "@storybook/addon-docs";
3+
import { ifDefined } from "lit/directives/if-defined.js";
4+
import { unsafeHTML } from "lit/directives/unsafe-html.js";
55

66
<Meta
77
title="Components/Calendar"
@@ -16,23 +16,26 @@ import { unsafeHTML } from 'lit/directives/unsafe-html.js';
1616
}}
1717
/>
1818

19-
export const CalendarTemplate = (args) => html`<bl-calendar
19+
export const CalendarTemplate = (args) => html`
20+
<bl-calendar
2021
type=${ifDefined(args.type)}
2122
min-date=${ifDefined(args.minDate)}
2223
max-date=${ifDefined(args.maxDate)}
2324
start-of-week=${ifDefined(args.startOfWeek)}
2425
locale=${ifDefined(args.locale)}
25-
default-value=${ifDefined(args.defaultValue)}
26-
disabled-dates=${ifDefined(args.disabledDates)}>${unsafeHTML(args.content)}</bl-calendar>`
26+
value=${ifDefined(args.value)}
27+
disabled-dates=${ifDefined(args.disabledDates)}>${unsafeHTML(args.content)}
28+
</bl-calendar>`
2729

2830

29-
export const Template = (args) => html`${CalendarTemplate({...args})}`;
31+
export const Template = (args) => html`${CalendarTemplate({ ...args })}`;
3032

3133

3234
# Calendar
3335

3436
<bl-badge icon="document">[ADR](https://github.com/Trendyol/baklava/issues/795)</bl-badge>
35-
<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>
37+
<bl-badge
38+
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>
3639

3740
Calendar component is an **internal** component for using inside Datepicker component.
3841

@@ -77,12 +80,28 @@ You can select date range from calendar.
7780
</Story>
7881
</Canvas>
7982

83+
### Set Value
84+
85+
You can set default value to calendar.
86+
87+
<Canvas>
88+
<Story name="Default Value" args={{
89+
type: 'single',
90+
value: new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate() + 2)
91+
}}>
92+
{Template.bind({})}
93+
</Story>
94+
</Canvas>
95+
8096
### Disabled Dates
8197

8298
You can set dates which you want to disable from calendar.
8399

84100
<Canvas>
85-
<Story name="Disabled Dates" args={{ type: 'single',disabledDates:`["${new Date(new Date().getFullYear(),new Date().getMonth(),new Date().getDate()+2)}"]` }}>
101+
<Story name="Disabled Dates" args={{
102+
type: 'single',
103+
disabledDates: new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate() + 2)
104+
}}>
86105
{Template.bind({})}
87106
</Story>
88107
</Canvas>

0 commit comments

Comments
 (0)