feat(phone-number): add countries in component

packages-new/components/phone-number/src/components/osds-phone-number/core/controller.spec.ts

@@ -0,0 +1,130 @@
+import { ODS_COUNTRY_ISO_CODE, ODS_COUNTRY_ISO_CODES } from '@ovhcloud/ods-common-core';
+import { OsdsPhoneNumber } from '../osds-phone-number';
+import { OdsPhoneNumberController } from './controller';
+
+class OdsPhoneNumberMock extends OsdsPhoneNumber {
+  constructor(attribute: Partial<OsdsPhoneNumber>) {
+    super();
+    Object.assign(this, attribute)
+  }
+  emitChange = jest.fn();
+  emitFocus = jest.fn();
+  emitBlur = jest.fn();
+}
+
+describe('spec:ods-phone-number-controller', () => {
+  let controller: OdsPhoneNumberController;
+  let component: OsdsPhoneNumber;
+
+  function setup(attributes: Partial<OsdsPhoneNumber> = {}, language?: string) {
+    component = new OdsPhoneNumberMock(attributes);
+    controller = new OdsPhoneNumberController(component);
+    global.navigator = {
+      ...global.navigator,
+      language,
+    }    
+  }
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe('methods', () => {
+    describe('methods:setDefaultIsoCode', () => {
+      it('should get the default iso code', () => {
+        setup();
+        const isoCode = controller.setDefaultIsoCode();
+        expect(isoCode).toBe(ODS_COUNTRY_ISO_CODE.AD);
+      });
+
+      it('should get the component iso code', () => {
+        setup({ isoCode: ODS_COUNTRY_ISO_CODE.FR });
+        const isoCode = controller.setDefaultIsoCode();
+        expect(isoCode).toBe(ODS_COUNTRY_ISO_CODE.FR);
+      });
+
+      it('should get the navigator iso code', () => {
+        setup({ }, 'fr-FR');
+        const isoCode = controller.setDefaultIsoCode();
+        expect(isoCode).toBe(ODS_COUNTRY_ISO_CODE.FR);
+      });
+
+      it('should get the navigator iso code with the second language', () => {
+        setup({ }, 'en-us');
+        const isoCode = controller.setDefaultIsoCode();
+        expect(isoCode).toBe(ODS_COUNTRY_ISO_CODE.US);
+      });
+
+      it('should not get the navigator iso code because of a wrong isoCode', () => {
+        setup({ }, 'en');
+        const isoCode = controller.setDefaultIsoCode();
+        expect(isoCode).toBe(ODS_COUNTRY_ISO_CODE.AD);
+      });
+
+      it('should not get the component iso code because of a wrong isoCode', () => {
+        setup({ isoCode: 'fake' as ODS_COUNTRY_ISO_CODE });
+        const isoCode = controller.setDefaultIsoCode();
+        expect(isoCode).toBe(ODS_COUNTRY_ISO_CODE.AD);
+      });
+    });
+
+    describe('methods:setDefaultLocale', () => {
+      it('should get the default locale', () => {
+        setup();
+        const locale = controller.setDefaultLocale();
+        expect(locale).toBe(ODS_COUNTRY_ISO_CODE.FR);
+      });
+
+      it('should get the component locale', () => {
+        setup({ locale: ODS_COUNTRY_ISO_CODE.GB });
+        const locale = controller.setDefaultLocale();
+        expect(locale).toBe(ODS_COUNTRY_ISO_CODE.GB);
+      });
+
+      it('should get the navigator locale', () => {
+        setup({ }, 'fr-FR');
+        const locale = controller.setDefaultLocale();
+        expect(locale).toBe(ODS_COUNTRY_ISO_CODE.FR);
+      });
+
+      it('should get the navigator locale with the second language', () => {
+        setup({ }, 'en-us');
+        const isoCode = controller.setDefaultIsoCode();
+        expect(isoCode).toBe(ODS_COUNTRY_ISO_CODE.US);
+      });
+
+      it('should not get the navigator locale because of a wrong isoCode', () => {
+        setup({ }, 'en-UK');
+        const locale = controller.setDefaultLocale();
+        expect(locale).toBe(ODS_COUNTRY_ISO_CODE.FR);
+      });
+
+      it('should not get the component locale because of a wrong isoCode', () => {
+        setup({ locale: 'fake' as ODS_COUNTRY_ISO_CODE });
+        const locale = controller.setDefaultLocale();
+        expect(locale).toBe(ODS_COUNTRY_ISO_CODE.FR);
+      });
+    });
+
+    describe('methods:getCountriesList', () => {
+      it('should get all countries', () => {
+        setup({ countries: 'all' });
+        const countries = controller.getCountriesList();
+        expect(countries).toEqual(ODS_COUNTRY_ISO_CODES);
+      });
+
+      it('should get no countries', () => {
+        setup({ });
+        const countries = controller.getCountriesList();
+        expect(countries).toEqual([]);
+      });
+
+      it('should get a list countries', () => {
+        const countries = [ODS_COUNTRY_ISO_CODE.FR, ODS_COUNTRY_ISO_CODE.GB]
+        setup({ countries });
+        expect(controller.getCountriesList()).toEqual(countries);
+      });
+    });
+
+  });
+});

packages-new/components/phone-number/src/components/osds-phone-number/core/controller.ts

@@ -0,0 +1,56 @@
+import { ODS_COUNTRY_ISO_CODE, ODS_COUNTRY_ISO_CODES } from '@ovhcloud/ods-common-core';
+import { OsdsPhoneNumber } from '../osds-phone-number';
+
+class OdsPhoneNumberController {
+
+  constructor(private readonly component: OsdsPhoneNumber) { }
+
+  setDefaultLocale(): ODS_COUNTRY_ISO_CODE {
+    if (this.isOdsCountryCode(this.component.locale)) {
+      return ODS_COUNTRY_ISO_CODES[ODS_COUNTRY_ISO_CODES.indexOf(this.component.locale)];
+    }
+    const navigatorLang = this.getNavigatorLang();
+    if (navigatorLang) {
+        return ODS_COUNTRY_ISO_CODES[ODS_COUNTRY_ISO_CODES.indexOf(navigatorLang)];
+    }
+    return ODS_COUNTRY_ISO_CODE.FR;
+  }
+
+  setDefaultIsoCode(): ODS_COUNTRY_ISO_CODE {
+    if (this.isOdsCountryCode(this.component.isoCode)) {
+        return ODS_COUNTRY_ISO_CODES[ODS_COUNTRY_ISO_CODES.indexOf(this.component.isoCode)];
+    }
+    const navigatorLang = this.getNavigatorLang();
+    if (navigatorLang) {
+        return ODS_COUNTRY_ISO_CODES[ODS_COUNTRY_ISO_CODES.indexOf(navigatorLang)];
+    }
+    return ODS_COUNTRY_ISO_CODE.AD;
+  }
+
+  getCountriesList(): ODS_COUNTRY_ISO_CODE[] {
+    if (this.component.countries === 'all') {
+      return ODS_COUNTRY_ISO_CODES as ODS_COUNTRY_ISO_CODE[];
+    }
+    return this.component.countries || [];
+  }
+
+  private getNavigatorLang(): ODS_COUNTRY_ISO_CODE | undefined {
+    const language = navigator.language?.split('-')[0];
+    if (language && this.isOdsCountryCode(language)) {
+      return language;
+    }
+    const language2 = navigator.language?.split('-')[1];
+    if (language2 && this.isOdsCountryCode(language2)) {
+      return language2;
+    }
+    return undefined;
+  }
+
+  private isOdsCountryCode(value: string | ODS_COUNTRY_ISO_CODE | undefined): value is ODS_COUNTRY_ISO_CODE {
+    return !!value && ODS_COUNTRY_ISO_CODES.includes(value as ODS_COUNTRY_ISO_CODE);
+  }
+}
+
+export {
+  OdsPhoneNumberController,
+};

packages-new/storybook/stories/components/phone-number/phone-number.specifications.stories.mdx

@@ -0,0 +1,13 @@
+import { Meta } from '@storybook/addon-docs';
+import SpecificationsPhoneNumber from '@ovhcloud/ods-component-phone-number/documentation/specifications/specifications-phone-number.mdx';
+import Notes from '../notes.mdx';
+
+<Meta title="UI Components/Phone Number [molecule]/Specifications" />
+
+# Phone Number - Technical Specifications
+----
+
+<SpecificationsPhoneNumber />
+
+---
+<Notes/>

packages-new/storybook/stories/components/phone-number/phone-number.web-component.stories.page.mdx

@@ -0,0 +1,17 @@
+import { Canvas, Description, Meta, DocsContainer } from '@storybook/addon-docs';
+import APITable from '@ovhcloud/ods-component-phone-number/dist/docs/components/osds-phone-number/readme.md';
+import Usage from '@ovhcloud/ods-component-phone-number/src/docs/osds-phone-number/usage.mdx';
+
+<Meta title="UI Components/Phone Number [molecule]/Web Component" />
+
+# `<osds-phone-number>`
+
+## Table of Contents
+> - **[Usage](#usage)**
+> - **[Getting Started](#getting-started)**
+> - **[API Table](#api-table)**
+
+<hr/>
+<Usage />
+<hr/>
+<div id="api-table"><Description>{APITable}</Description></div>

packages-new/storybook/stories/components/phone-number/phone-number.web-components.stories.ts

@@ -0,0 +1,108 @@
+import { html } from 'lit-html';
+import { defineCustomElements } from '@ovhcloud/ods-component-phone-number/loader';
+import { extractArgTypes, extractStoryParams, getTagAttributes } from '../../../core/componentHTMLUtils';
+// @ts-ignore
+import changelog from '@ovhcloud/ods-component-phone-number/CHANGELOG.md';
+// @ts-ignore
+import page from './phone-number.web-component.stories.page.mdx';
+
+defineCustomElements();
+
+/* Default story parameters  */
+const storyParams = {
+  value: {
+    category: 'Misc',
+    control: { type: 'text' },
+  },
+  clearable: {
+    category: 'Misc',
+    defaultValue: false,
+  },
+  disabled: {
+    category: 'Misc',
+    defaultValue: false,
+  },
+  error: {
+    category: 'Misc',
+    defaultValue: false,
+  },
+  locale: {
+    category: 'Général',
+    control: { type: 'text' },
+    defaultValue: 'fr',
+  },
+  isoCode: {
+    category: 'Général',
+    control: { type: 'text' },
+    defaultValue: 'fr',
+  }
+};
+
+const countriesParams = {
+  countries: {
+    category: 'Général',
+    defaultValue: [
+      'fr', 'pt', 'gb'
+    ]
+  },
+}
+
+<<<<<<<< HEAD:packages/storybook/stories/components/phone-number/phone-number.web-components.stories.ts
+const allCountriesParams = {
+  countries: {
+    category: 'Général',
+    defaultValue: 'all'
+  },
+}
+
+========
+>>>>>>>> 01c53f47 (feat(phone-number): add countries in component):packages-new/storybook/stories/components/phone-number/phone-number.web-components.stories.ts
+export default {
+  title: 'UI Components/Phone Number [molecule]/Web Component',
+  id: 'phone-number',
+  parameters: {
+    notes: {
+      changelog,
+    },
+    docs: { page }
+  },
+  argTypes: extractArgTypes({...storyParams, ...countriesParams })
+};
+
+/* Default */
+const OsdsPhoneNumberDefault = (args: Record<string, unknown>) => html`
+  <osds-phone-number ...=${getTagAttributes(args)} @keydown=${(e: KeyboardEvent) => e.stopPropagation()}>
+  </osds-phone-number>
+`;
+export const Default = OsdsPhoneNumberDefault.bind({});
+// @ts-ignore
+Default.args = {
+  ...(extractStoryParams(storyParams)),
+};
+
+<<<<<<<< HEAD:packages/storybook/stories/components/phone-number/phone-number.web-components.stories.ts
+export const Countries = OsdsPhoneNumberDefault.bind({});
+========
+const OsdsPhoneNumberCountriesTemplate = (args: Record<string, unknown>) => {
+  return html`
+    <osds-phone-number ...=${getTagAttributes(args)} @keydown=${(e: KeyboardEvent) => e.stopPropagation()}>
+    </osds-phone-number>
+  `;
+}
+export const Countries = OsdsPhoneNumberCountriesTemplate.bind({});
+>>>>>>>> 01c53f47 (feat(phone-number): add countries in component):packages-new/storybook/stories/components/phone-number/phone-number.web-components.stories.ts
+// @ts-ignore
+Countries.args = {
+  ...extractStoryParams({ ...storyParams, ...countriesParams }),
+};
+
+<<<<<<<< HEAD:packages/storybook/stories/components/phone-number/phone-number.web-components.stories.ts
+
+export const AllCountries = OsdsPhoneNumberDefault.bind({});
+// @ts-ignore
+AllCountries.args = {
+  ...extractStoryParams({ ...storyParams, ...allCountriesParams }),
+};
+
+========
+>>>>>>>> 01c53f47 (feat(phone-number): add countries in component):packages-new/storybook/stories/components/phone-number/phone-number.web-components.stories.ts

packages/storybook/stories/components/phone-number/phone-number.web-components.stories.ts

@@ -88,4 +88,3 @@ export const AllCountries = OsdsPhoneNumberDefault.bind({});
 AllCountries.args = {
   ...extractStoryParams({ ...storyParams, ...allCountriesParams }),
 }
-