Skip to content

Commit

Permalink
feat(datepicker): add locale prop
Browse files Browse the repository at this point in the history
  • Loading branch information
dpellier committed Oct 12, 2023
1 parent f71d16d commit 0cda07e
Show file tree
Hide file tree
Showing 13 changed files with 191 additions and 15 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,16 @@
|---|---|:---:|---|---|
|**`odsClipboardCopied`** | `EventEmitter<string>` | ✴️ | | |

### OdsClipboardMethod
|Name | Type | Required | Default | Description|
|---|---|:---:|---|---|
|**`closeSurface`** | `Promise<void>` | ✴️ | | Close the surface|

## Classes

### OsdsClipboard
### OsdsClipboard
#### Methods
> **closeSurface**() => `Promise<void>`
_Close the surface_

Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
* [**Interfaces**](#interfaces)
* [**Types**](#types)
* [**Classes**](#classes)

## Interfaces
Expand All @@ -14,11 +15,74 @@
|**`error`** | _boolean_ | | | Defines if the Datepicker should display an error message|
|**`format`** | _string_ | | | Defines which format the Datepicker should be applying (supported formats: https://mymth.github.io/vanillajs-datepicker/#/date-string+format?id=date-format)|
|**`inline`** | _boolean_ | | | Defines if the Datepicker should be displayed inline or not|
|**`locale`** | `ODS_LOCALE` | | | Defines the locale to use|
|**`maxDate`** | `undefined` \| `Date` | | | Defines the Datepicker's maximum selectable date|
|**`minDate`** | `undefined` \| `Date` | | | Defines the Datepicker's minimum selectable date|
|**`placeholder`** | _string_ | | | Defines if the Datepicker should display a placeholder message|
|**`value`** | `undefined` \| `Date` | | | Defines the Datepicker's value (Date object)|

### OdsDatepickerEvent
|Name | Type | Required | Default | Description|
|---|---|:---:|---|---|
|**`odsDatepickerBlur`** | `EventEmitter<void>` | ✴️ | | Triggered on blur|
|**`odsDatepickerFocus`** | `EventEmitter<void>` | ✴️ | | Triggered on focus|
|**`odsDatepickerValueChange`** | `EventEmitter<OdsDatepickerValueChangeEventDetail>` | ✴️ | | Triggered on value change|

### OdsDatepickerValueChangeEventDetail
|Name | Type | Required | Default | Description|
|---|---|:---:|---|---|
|**`formattedValue`** | _string_ | | | |
|**`oldValue`** | `undefined` \| `Date` | | | |
|**`value`** | `undefined` \| `Date` | | | |

## Types

### ODS_DATEPICKER_DAY
| |
|:---:|
| `friday` |
| `monday` |
| `saturday` |
| `sunday` |
| `thursday` |
| `tuesday` |
| `wednesday` |

### ODS_DATEPICKER_LOCALE
| |
|:---:|
| `AR` |
| `BG` |
| `CS` |
| `DA` |
| `DE` |
| `EL` |
| `EN` |
| `EO` |
| `ES` |
| `ET` |
| `EU` |
| `FI` |
| `FR` |
| `HR` |
| `HU` |
| `HY` |
| `IT` |
| `JA` |
| `KO` |
| `LT` |
| `NL` |
| `NO` |
| `PL` |
| `PT` |
| `RO` |
| `RU` |
| `SL` |
| `SV` |
| `TH` |
| `UK` |
| `ZH` |

## Classes

### OsdsDatepicker
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
import { ODS_LOCALE, ODS_LOCALES } from '@ovhcloud/ods-common-core';

export {
ODS_LOCALE as ODS_DATEPICKER_LOCALE,
ODS_LOCALES as ODS_DATEPICKER_LOCALES,
};
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming';
import { ODS_DATEPICKER_LOCALE } from '../constants/datepicker-locale';
import { OdsDatepickerAttribute } from '../interfaces/attributes';

const DEFAULT_ATTRIBUTE: OdsDatepickerAttribute = Object.freeze({
Expand All @@ -10,6 +11,7 @@ const DEFAULT_ATTRIBUTE: OdsDatepickerAttribute = Object.freeze({
error: false,
format: 'dd/mm/yyyy',
inline: false,
locale: ODS_DATEPICKER_LOCALE.EN,
maxDate: null,
minDate: null,
placeholder: '',
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import type { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming';
import type { ODS_DATEPICKER_DAY } from '../constants/datepicker-day';
import type { ODS_DATEPICKER_LOCALE } from '../constants/datepicker-locale';

interface OdsDatepickerAttribute {
/**
Expand Down Expand Up @@ -34,6 +35,10 @@ interface OdsDatepickerAttribute {
* Defines if the Datepicker should be displayed inline or not
*/
inline?: boolean;
/**
* Defines the locale to use
*/
locale?: ODS_DATEPICKER_LOCALE;
/**
* Defines the Datepicker's maximum selectable date
*/
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,9 @@ import type { OdsDatepickerAttribute } from './interfaces/attributes';
import type { OsdsDatepicker } from './osds-datepicker';
import { newE2EPage } from '@stencil/core/testing';
import { odsComponentAttributes2StringAttributes, odsStringAttributes2Str } from '@ovhcloud/ods-common-testing';
import { DEFAULT_ATTRIBUTE } from './constants/default-attributes';
import { ODS_DATEPICKER_DAY } from './constants/datepicker-day';
import { ODS_DATEPICKER_LOCALE } from './constants/datepicker-locale';
import { DEFAULT_ATTRIBUTE } from './constants/default-attributes';

describe('e2e:osds-datepicker', () => {
let page: E2EPage;
Expand Down Expand Up @@ -241,4 +242,12 @@ describe('e2e:osds-datepicker', () => {
const afterMaxDateButton = await page.find(`osds-datepicker >>> .datepicker .datepicker-grid .datepicker-cell:last-child`);
expect(afterMaxDateButton).toHaveClass('disabled');
});

it('should change the displayed locale', async () => {
await setup({ attributes: { locale: ODS_DATEPICKER_LOCALE.FR, value: new Date('2023-05-15') } });
await el.click();
await page.waitForChanges();
const monthSelector = await page.find(`osds-datepicker >>> .datepicker-controls .view-switch`);
expect(monthSelector.innerText).toBe('mai 2023');
});
});
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,14 @@ jest.mock('./core/controller');
import type { SpecPage } from '@stencil/core/testing';
import type { OdsDatepickerAttribute } from './interfaces/attributes';
import { newSpecPage } from '@stencil/core/testing';
import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming';
import { OdsUnitTestAttributeType, odsComponentAttributes2StringAttributes, odsStringAttributes2Str, odsUnitTestAttribute } from '@ovhcloud/ods-common-testing';
import { ODS_DATEPICKER_LOCALE } from './constants/datepicker-locale';
import { DEFAULT_ATTRIBUTE } from './constants/default-attributes';
import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming';
import { OsdsDatepicker } from './osds-datepicker';
import { OdsDatepickerController } from './core/controller';
import { ODS_DATEPICKER_DAY } from './constants/datepicker-day';
// @ts-ignore
import { Datepicker } from '../../jestStub';

describe('spec:osds-datepicker', () => {
Expand Down Expand Up @@ -140,6 +142,17 @@ describe('spec:osds-datepicker', () => {
});
});

describe('locale', () => {
odsUnitTestAttribute<OdsDatepickerAttribute, 'locale'>({
name: 'locale',
defaultValue: DEFAULT_ATTRIBUTE.locale,
newValue: ODS_DATEPICKER_LOCALE.EN,
value: ODS_DATEPICKER_LOCALE.FR,
setup: (value) => setup({ attributes: { ['locale']: value } }),
...config,
});
});

describe('maxDate', () => {
odsUnitTestAttribute<OdsDatepickerAttribute, 'maxDate'>({
name: 'maxDate',
Expand Down
Original file line number Diff line number Diff line change
@@ -1,22 +1,45 @@
import type { EventEmitter } from '@stencil/core';
import type { ODS_DATEPICKER_DAY } from './constants/datepicker-day';
import type { ODS_DATEPICKER_LOCALE } from './constants/datepicker-locale';
import type { OdsDatepickerAttribute } from './interfaces/attributes';
import type { OdsDatepickerEvent, OdsDatepickerValueChangeEventDetail } from './interfaces/events';
import type { ODS_DATEPICKER_DAY } from './constants/datepicker-day';
import { Component, Element, Event, Host, h, Listen, Prop, State, Watch } from '@stencil/core';
import { ODS_INPUT_TYPE } from '@ovhcloud/ods-component-input';
import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming';
import { ODS_ICON_NAME } from '@ovhcloud/ods-component-icon';
import { ODS_INPUT_TYPE } from '@ovhcloud/ods-component-input';
import { Datepicker } from 'vanillajs-datepicker';
import { DEFAULT_ATTRIBUTE } from './constants/default-attributes';
import { Datepicker } from 'vanillajs-datepicker'
import { OdsDatepickerController } from './core/controller';
// @ts-ignore
import de from 'vanillajs-datepicker/js/i18n/locales/de';
// @ts-ignore
import es from 'vanillajs-datepicker/js/i18n/locales/es';
// @ts-ignore
import fr from 'vanillajs-datepicker/js/i18n/locales/fr';
// @ts-ignore
import it from 'vanillajs-datepicker/js/i18n/locales/it';
// @ts-ignore
import nl from 'vanillajs-datepicker/js/i18n/locales/nl';
// @ts-ignore
import pl from 'vanillajs-datepicker/js/i18n/locales/pl';
// @ts-ignore
import pt from 'vanillajs-datepicker/js/i18n/locales/pt';

Object.assign(Datepicker.locales, de);
Object.assign(Datepicker.locales, es);
Object.assign(Datepicker.locales, fr);
Object.assign(Datepicker.locales, it);
Object.assign(Datepicker.locales, nl);
Object.assign(Datepicker.locales, pl);
Object.assign(Datepicker.locales, pt);

/**
* @slot (unnamed) - Datepicker content
*/
@Component({
tag: 'osds-datepicker',
styleUrl: 'osds-datepicker.scss',
shadow: true
shadow: true,
})
export class OsdsDatepicker implements OdsDatepickerAttribute, OdsDatepickerEvent {
controller: OdsDatepickerController = new OdsDatepickerController(this);
Expand Down Expand Up @@ -57,6 +80,9 @@ export class OsdsDatepicker implements OdsDatepickerAttribute, OdsDatepickerEven
/** @see OdsDatepickerAttribute.inline */
@Prop({ reflect: true }) inline?: boolean = DEFAULT_ATTRIBUTE.inline;

/** @see OdsDatepickerAttribute.locale */
@Prop({ reflect: true }) locale?: ODS_DATEPICKER_LOCALE = DEFAULT_ATTRIBUTE.locale;

/** @see OdsDatepickerAttribute.maxDate */
@Prop({ reflect: true }) maxDate?: Date | null = DEFAULT_ATTRIBUTE.maxDate;

Expand Down Expand Up @@ -93,6 +119,7 @@ export class OsdsDatepicker implements OdsDatepickerAttribute, OdsDatepickerEven
@Watch('datesDisabled')
@Watch('daysOfWeekDisabled')
@Watch('format')
@Watch('locale')
@Watch('maxDate')
@Watch('minDate')
updateDatepicker() {
Expand All @@ -106,6 +133,7 @@ export class OsdsDatepicker implements OdsDatepickerAttribute, OdsDatepickerEven
: undefined,
daysOfWeekDisabled: this.daysOfWeekDisabled,
format: this.format,
language: this.locale,
maxDate: this.maxDate
? this.maxDate
: undefined,
Expand Down Expand Up @@ -154,6 +182,7 @@ export class OsdsDatepicker implements OdsDatepickerAttribute, OdsDatepickerEven
: undefined,
daysOfWeekDisabled: this.daysOfWeekDisabled,
format: this.format,
language: this.locale,
maxDate: this.maxDate
? this.maxDate
: undefined,
Expand Down Expand Up @@ -282,4 +311,4 @@ export class OsdsDatepicker implements OdsDatepickerAttribute, OdsDatepickerEven
</Host>
);
}
}
}
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
export type { OdsDatepickerAttribute } from './interfaces/attributes';
export type { OdsDatepickerEvent, OdsDatepickerValueChangeEvent, OdsDatepickerValueChangeEventDetail } from './interfaces/events';
export { ODS_DATEPICKER_DAY, ODS_DATEPICKER_DAYS } from './constants/datepicker-day';
export { ODS_DATEPICKER_LOCALE, ODS_DATEPICKER_LOCALES } from './constants/datepicker-locale';
export { OsdsDatepicker } from './osds-datepicker';
1 change: 1 addition & 0 deletions packages/components/datepicker/src/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@
<div style="width:100%; height: 50px; background: rgb(220, 220, 220); margin: 20px 0;"></div>
<osds-datepicker placeholder="dd/mm/yyyy" disabled clearable inline></osds-datepicker>
<div style="width:100%; height: 50px; background: rgb(220, 220, 220); margin: 20px 0;"></div>
<osds-datepicker placeholder="dd/mm/yyyy" inline locale="fr"></osds-datepicker>

<script>
document.addEventListener("DOMContentLoaded", () => {
Expand Down
6 changes: 3 additions & 3 deletions packages/components/datepicker/src/jestStub.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
class Stub {
constructor() {
constructor() {}

}
static locales = {}

static formatDate(date, format) {
return `${date} ${format}`;
Expand All @@ -15,4 +15,4 @@ class Stub {
// eslint-disable-next-line no-undef
module.exports = {
Datepicker: Stub,
};
};
34 changes: 32 additions & 2 deletions packages/components/text/documentation/specifications/spec.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,14 +8,44 @@
|Name | Type | Required | Default | Description|
|---|---|:---:|---|---|
|**`breakSpaces`** | _boolean_ | | | If text handles break spaces or not|
|**`color`** | `ODS_TEXT_COLOR_INTENT` | | | Text contrasted theme|
|**`color`** | `ODS_THEME_COLOR_INTENT` | | | Text contrasted theme|
|**`contrasted`** | _boolean_ | | | Text design as contrasted version|
|**`hue`** | `ODS_TEXT_COLOR_HUE` | | | Text hue|
|**`hue`** | `ODS_THEME_COLOR_HUE` | | | Text hue|
|**`level`** | `ODS_THEME_TYPOGRAPHY_LEVEL` | | | Text level|
|**`size`** | `ODS_THEME_TYPOGRAPHY_SIZE` | | | Text size|

## Types

### ODS_TEXT_COLOR_HUE
| |
|:---:|
| `_000` |
| `_050` |
| `_075` |
| `_100` |
| `_1000` |
| `_200` |
| `_300` |
| `_400` |
| `_500` |
| `_600` |
| `_700` |
| `_800` |
| `_900` |

### ODS_TEXT_COLOR_INTENT
| |
|:---:|
| `accent` |
| `default` |
| `error` |
| `info` |
| `primary` |
| `promotion` |
| `success` |
| `text` |
| `warning` |

### ODS_TEXT_LEVEL
| |
|:---:|
Expand Down
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import { html } from 'lit-html';
import { defineCustomElements } from '@ovhcloud/ods-components/datepicker/loader';
import { extractArgTypes, extractStoryParams, getTagAttributes } from '../../../core/componentHTMLUtils';
import { ODS_DATEPICKER_DAYS, ODS_DATEPICKER_LOCALE, ODS_DATEPICKER_LOCALES } from '@ovhcloud/ods-components/datepicker';
import { DEFAULT_ATTRIBUTE } from '@ovhcloud/ods-components/datepicker/src/components/osds-datepicker/constants/default-attributes';
import { ODS_DATEPICKER_DAYS } from '@ovhcloud/ods-components/datepicker/src/components/osds-datepicker/constants/datepicker-day';
import { ODS_THEME_COLOR_INTENTS } from '@ovhcloud/ods-common-theming';
// @ts-ignore
import changelog from '@ovhcloud/ods-components/datepicker/CHANGELOG.md';
Expand Down Expand Up @@ -44,6 +44,12 @@ const storyParams = {
category: 'General',
defaultValue: false,
},
locale: {
category: 'General',
defaultValue: ODS_DATEPICKER_LOCALE.EN,
options: ODS_DATEPICKER_LOCALES,
control: { type: 'select' },
},
maxDate: {
category: 'General',
defaultValue: null,
Expand Down Expand Up @@ -97,4 +103,4 @@ type DefaultProps = {
};
(Default as unknown as DefaultProps).args = {
...(extractStoryParams(storyParams) as Record<string, unknown>)
};
};

0 comments on commit 0cda07e

Please sign in to comment.