Skip to content

Commit fa0b85d

Browse files
jpzwartejpzwarte
authored
New calendar & date-field components (#1593)
1 parent ba69c17 commit fa0b85d

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

64 files changed

+3450
-594
lines changed

Diff for: ‎.changeset/deep-hats-push.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@sl-design-system/shared': minor
3+
---
4+
5+
Add date converters

Diff for: ‎.changeset/dull-boats-taste.md

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
---
2+
'@sl-design-system/date-field': patch
3+
---
4+
5+
New `<sl-date-field>` component:
6+
- Uses the `Intl` APIs for date formatting and localization
7+
- Integrates with other form field components
8+
- Allows for custom date formatting
9+
- Supports `select-only` mode, which disables text editing
10+
- Reuses `<sl-calendar>` in the popover

Diff for: ‎.changeset/icy-seals-fall.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@sl-design-system/format-date': minor
3+
---
4+
5+
Export the `format()` method

Diff for: ‎.changeset/loud-humans-hope.md

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
---
2+
'@sl-design-system/calendar': patch
3+
---
4+
5+
New `<sl-calendar>` component:
6+
- Uses the `Intl` APIs for date formatting and localization
7+
- Supports quick navigation to different months and years
8+
- Supports swiping to navigate between months
9+
- Ability to customize rendering of days
10+
- Ability to change the first day of the week
11+
- Toggles for week numbers and highlighting today's date
12+
- Separate `<sl-month-view>` component for rendering individual months

Diff for: ‎.yarn/releases/yarn-4.5.3.cjs renamed to ‎.yarn/releases/yarn-4.7.0.cjs

+256-255
Large diffs are not rendered by default.

Diff for: ‎.yarnrc.yml

+1-1
Original file line numberDiff line numberDiff line change
@@ -14,4 +14,4 @@ npmScopes:
1414
npmAuthToken: "${FONT_AWESOME_AUTH_TOKEN}"
1515
npmRegistryServer: "https://npm.fontawesome.com/"
1616

17-
yarnPath: .yarn/releases/yarn-4.5.3.cjs
17+
yarnPath: .yarn/releases/yarn-4.7.0.cjs

Diff for: ‎chromatic/package.json

+6-6
Original file line numberDiff line numberDiff line change
@@ -40,13 +40,13 @@
4040
}
4141
},
4242
"devDependencies": {
43-
"@storybook/addon-a11y": "^8.6.3",
44-
"@storybook/addon-essentials": "^8.6.3",
45-
"@storybook/addon-storysource": "^8.6.3",
46-
"@storybook/addon-themes": "^8.6.3",
47-
"@storybook/web-components-vite": "^8.6.3",
43+
"@storybook/addon-a11y": "^8.6.7",
44+
"@storybook/addon-essentials": "^8.6.7",
45+
"@storybook/addon-storysource": "^8.6.7",
46+
"@storybook/addon-themes": "^8.6.7",
47+
"@storybook/web-components-vite": "^8.6.7",
4848
"lit": "^3.2.1",
49-
"storybook": "^8.6.3",
49+
"storybook": "^8.6.7",
5050
"storybook-addon-pseudo-states": "^4.0.2",
5151
"tslib": "^2.8.1",
5252
"typescript": "^5.4.5",

Diff for: ‎package.json

+13-13
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@sl-design-system/monorepo",
3-
"packageManager": "yarn@4.5.3",
3+
"packageManager": "yarn@4.7.0",
44
"private": true,
55
"repository": {
66
"type": "git",
@@ -450,15 +450,15 @@
450450
"@lit/localize-tools": "^0.8.0",
451451
"@oddbird/popover-polyfill": "^0.5.2",
452452
"@open-wc/testing": "^4.0.0",
453-
"@storybook/addon-a11y": "^8.6.3",
454-
"@storybook/addon-essentials": "^8.6.3",
455-
"@storybook/addon-storysource": "^8.6.3",
456-
"@storybook/core-events": "^8.6.3",
457-
"@storybook/manager-api": "^8.6.3",
458-
"@storybook/preview-api": "^8.6.3",
459-
"@storybook/test": "^8.6.3",
460-
"@storybook/theming": "^8.6.3",
461-
"@storybook/web-components-vite": "^8.6.3",
453+
"@storybook/addon-a11y": "^8.6.7",
454+
"@storybook/addon-essentials": "^8.6.7",
455+
"@storybook/addon-storysource": "^8.6.7",
456+
"@storybook/core-events": "^8.6.7",
457+
"@storybook/manager-api": "^8.6.7",
458+
"@storybook/preview-api": "^8.6.7",
459+
"@storybook/test": "^8.6.7",
460+
"@storybook/theming": "^8.6.7",
461+
"@storybook/web-components-vite": "^8.6.7",
462462
"@types/chai-as-promised": "^8.0.1",
463463
"@types/mocha": "^10.0.10",
464464
"@types/sinon": "^17.0.4",
@@ -474,12 +474,12 @@
474474
"husky": "^9.1.7",
475475
"lint-staged": "^15.4.3",
476476
"lit": "^3.2.1",
477-
"playwright": "^1.50.1",
477+
"playwright": "^1.51.0",
478478
"sinon": "^19.0.2",
479-
"storybook": "^8.6.3",
479+
"storybook": "^8.6.7",
480480
"stylelint": "^16.15.0",
481481
"typescript": "^5.4.5",
482-
"vite": "^6.2.0",
482+
"vite": "^6.2.2",
483483
"wireit": "^0.14.11"
484484
}
485485
}

Diff for: ‎packages/angular/package.json

+3-3
Original file line numberDiff line numberDiff line change
@@ -80,8 +80,8 @@
8080
"@sl-design-system/switch": "^1.1.0",
8181
"@sl-design-system/text-area": "^1.1.0",
8282
"@sl-design-system/text-field": "^1.6.0",
83-
"@storybook/angular": "^8.6.3",
84-
"@storybook/theming": "^8.6.3",
83+
"@storybook/angular": "^8.6.7",
84+
"@storybook/theming": "^8.6.7",
8585
"@types/jasmine": "~5.1.7",
8686
"jasmine-core": "~5.6.0",
8787
"karma": "~6.4.4",
@@ -91,7 +91,7 @@
9191
"karma-jasmine-html-reporter": "~2.1.0",
9292
"ng-packagr": "^18.2.1",
9393
"rxjs": "~7.8.2",
94-
"storybook": "^8.6.3",
94+
"storybook": "^8.6.7",
9595
"tslib": "^2.8.1",
9696
"typescript": "~5.4.5",
9797
"wireit": "^0.14.11",

Diff for: ‎packages/components/calendar/index.ts

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
export * from './src/calendar.js';
2+
export * from './src/month-view.js';

Diff for: ‎packages/components/calendar/package.json

+55
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
{
2+
"name": "@sl-design-system/calendar",
3+
"version": "0.0.0",
4+
"description": "Calendar components for the SL Design System",
5+
"license": "Apache-2.0",
6+
"publishConfig": {
7+
"registry": "https://npm.pkg.github.com"
8+
},
9+
"repository": {
10+
"type": "git",
11+
"url": "https://github.com/sl-design-system/components.git",
12+
"directory": "packages/components/calendar"
13+
},
14+
"homepage": "https://sanomalearning.design/components/calendar",
15+
"bugs": {
16+
"url": "https://github.com/sl-design-system/components/issues"
17+
},
18+
"type": "module",
19+
"main": "./index.js",
20+
"module": "./index.js",
21+
"types": "./index.d.ts",
22+
"customElements": "custom-elements.json",
23+
"exports": {
24+
".": "./index.js",
25+
"./package.json": "./package.json",
26+
"./register.js": "./register.js"
27+
},
28+
"files": [
29+
"**/*.d.ts",
30+
"**/*.js",
31+
"**/*.js.map",
32+
"custom-elements.json"
33+
],
34+
"sideEffects": [
35+
"register.js"
36+
],
37+
"scripts": {
38+
"test": "echo \"Error: run tests from monorepo root.\" && exit 1"
39+
},
40+
"dependencies": {
41+
"@sl-design-system/button": "^1.0.3",
42+
"@sl-design-system/format-date": "^0.0.4",
43+
"@sl-design-system/icon": "^1.0.2"
44+
},
45+
"devDependencies": {
46+
"@lit/localize": "^0.12.1",
47+
"@open-wc/scoped-elements": "^3.0.5",
48+
"lit": "^3.1.4"
49+
},
50+
"peerDependencies": {
51+
"@lit/localize": "^0.12.1",
52+
"@open-wc/scoped-elements": "^3.0.5",
53+
"lit": "^3.1.4"
54+
}
55+
}

Diff for: ‎packages/components/calendar/register.ts

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import { Calendar } from './src/calendar.js';
2+
import { MonthView } from './src/month-view.js';
3+
4+
customElements.define('sl-calendar', Calendar);
5+
customElements.define('sl-month-view', MonthView);

Diff for: ‎packages/components/calendar/src/calendar.scss

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
:host {
2+
display: inline-grid;
3+
grid-template-columns: 1fr;
4+
}
5+
6+
sl-select-day,
7+
sl-select-month,
8+
sl-select-year {
9+
grid-area: 1 / 1;
10+
inline-size: 100%;
11+
}

Diff for: ‎packages/components/calendar/src/calendar.stories.ts

+97
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
import { type Meta, type StoryObj } from '@storybook/web-components';
2+
import { html } from 'lit';
3+
import { ifDefined } from 'lit/directives/if-defined.js';
4+
import '../register.js';
5+
import { type Calendar } from './calendar.js';
6+
7+
type Props = Pick<
8+
Calendar,
9+
'firstDayOfWeek' | 'locale' | 'max' | 'min' | 'month' | 'readonly' | 'selected' | 'showToday' | 'showWeekNumbers'
10+
>;
11+
type Story = StoryObj<Props>;
12+
13+
export default {
14+
title: 'Date & Time/Calendar',
15+
tags: ['draft'],
16+
args: {
17+
readonly: false,
18+
showToday: false,
19+
showWeekNumbers: false
20+
},
21+
argTypes: {
22+
firstDayOfWeek: {
23+
control: 'number'
24+
},
25+
locale: {
26+
control: 'inline-radio',
27+
options: ['de', 'en-GB', 'es', 'fi', 'fr', 'it', 'nl', 'nl-BE', 'no', 'pl', 'sv']
28+
},
29+
max: {
30+
control: 'date'
31+
},
32+
min: {
33+
control: 'date'
34+
},
35+
month: {
36+
control: 'date'
37+
},
38+
selected: {
39+
control: 'date'
40+
}
41+
},
42+
render: ({ firstDayOfWeek, locale, max, min, month, readonly, selected, showToday, showWeekNumbers }) => {
43+
return html`
44+
<sl-calendar
45+
?readonly=${readonly}
46+
?show-today=${showToday}
47+
?show-week-numbers=${showWeekNumbers}
48+
first-day-of-week=${ifDefined(firstDayOfWeek)}
49+
locale=${ifDefined(locale)}
50+
max=${ifDefined(max?.toISOString())}
51+
min=${ifDefined(min?.toISOString())}
52+
month=${ifDefined(month?.toISOString())}
53+
selected=${ifDefined(selected?.toISOString())}
54+
></sl-calendar>
55+
`;
56+
}
57+
} satisfies Meta<Props>;
58+
59+
export const Basic: Story = {};
60+
61+
export const FirstDayOfWeek: Story = {
62+
args: {
63+
firstDayOfWeek: 0
64+
}
65+
};
66+
67+
export const MinMax: Story = {
68+
args: {
69+
month: new Date(2025, 0, 1),
70+
max: new Date(2025, 0, 20),
71+
min: new Date(2025, 0, 10)
72+
}
73+
};
74+
75+
export const Readonly: Story = {
76+
args: {
77+
readonly: true
78+
}
79+
};
80+
81+
export const Selected: Story = {
82+
args: {
83+
selected: new Date(2024, 8, 15)
84+
}
85+
};
86+
87+
export const Today: Story = {
88+
args: {
89+
showToday: true
90+
}
91+
};
92+
93+
export const WeekNumbers: Story = {
94+
args: {
95+
showWeekNumbers: true
96+
}
97+
};

0 commit comments

Comments
 (0)