feat(medium): init component

packages/components/medium/.gitignore

@@ -0,0 +1,33 @@
+dist/
+custom-elements/
+custom-elements-bundle/
+www/
+loader/
+docs-api
+src/components.d.ts
+
+*~
+*.sw[mnpcod]
+*.log
+*.lock
+*.tmp
+*.tmp.*
+log.txt
+*.sublime-project
+*.sublime-workspace
+
+.stencil/
+screenshot/
+.idea/
+.vscode/
+.sass-cache/
+.versions/
+node_modules/
+$RECYCLE.BIN/
+
+.DS_Store
+Thumbs.db
+UserInterfaceState.xcuserstate
+.env
+
+src/**/readme.md

packages/components/medium/.npmignore

@@ -0,0 +1,4 @@
+!dist/
+!loader/
+!docs-api/
+src/

packages/components/medium/CHANGELOG.md

@@ -0,0 +1,12 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+[Latest version](https://ovh.github.io/design-system/latest/?path=/docs/design-system-changelog--page)
+
+
+# [16.3.1](https://ovh.github.io/design-system/v16.3.1/?path=/docs/design-system-changelog--page) (2023-11-07)
+[compare](https://github.com/ovh/design-system/compare/v16.3.0...v16.3.1)
+
+**Note:** Version bump only for package @ovhcloud/ods-component-icon

packages/components/medium/THIRD-PARTY-LICENCES

@@ -0,0 +1,5 @@
+This file was generated with the generate-license-file npm package!
+https://www.npmjs.com/package/generate-license-file
+
+This file was generated with the generate-license-file npm package!
+https://www.npmjs.com/package/generate-license-file

packages/components/medium/documentation/specifications/spec.md

@@ -0,0 +1,16 @@
+* [**Interfaces**](#interfaces)
+* [**Classes**](#classes)
+
+## Interfaces
+
+### OdsMediumAttribute
+|Name | Type | Required | Default | Description|
+|---|---|:---:|---|---|
+|**`alt`** | _string_ | ✴️ |  | Medium alternative description|
+|**`height`** | _number_ |  |  | Medium height in px|
+|**`src`** | _string_ | ✴️ |  | Medium url or path|
+|**`width`** | _number_ |  |  | Medium width in px|
+
+## Classes
+
+### OsdsMedium

packages/components/medium/documentation/specifications/specifications-medium.mdx

@@ -0,0 +1,4 @@
+import {Description} from '@storybook/addon-docs';
+import Specs from './spec.md';
+
+<Description>{Specs}</Description>

packages/components/medium/documentation/usage-guidelines/properties/usage.alt.mdx

@@ -0,0 +1,7 @@
+<div class="container">
+  <osds-medium alt='OVHcloud logo' src='https://corporate.ovhcloud.com/sites/default/files/2022-03/ovhcloud-logo2.pn' ></osds-medium>
+</div>
+
+```html
+<osds-medium alt='OVHcloud logo' src='https://corporate.ovhcloud.com/sites/default/files/2022-03/ovhcloud-logo2.pn' ></osds-medium>
+```

packages/components/medium/documentation/usage-guidelines/properties/usage.height.mdx

@@ -0,0 +1,7 @@
+<div class="container">
+  <osds-medium height='200' src='https://corporate.ovhcloud.com/sites/default/files/2022-03/ovhcloud-logo2.png' alt='OVHcloud logo'></osds-medium>
+</div>
+
+```html
+<osds-medium height='200' src='https://corporate.ovhcloud.com/sites/default/files/2022-03/ovhcloud-logo2.png' alt='OVHcloud logo'></osds-medium>
+```

packages/components/medium/documentation/usage-guidelines/properties/usage.src.mdx

@@ -0,0 +1,7 @@
+<div class="container">
+  <osds-medium src='https://corporate.ovhcloud.com/sites/default/files/2022-03/ovhcloud-logo2.png' alt='OVHcloud logo' width='1000'></osds-medium>
+</div>
+
+```html
+<osds-medium src='https://corporate.ovhcloud.com/sites/default/files/2022-03/ovhcloud-logo2.png' alt='OVHcloud logo'></osds-medium>
+```

packages/components/medium/documentation/usage-guidelines/properties/usage.width.mdx

@@ -0,0 +1,7 @@
+<div class="container">
+  <osds-medium width='700' src='https://corporate.ovhcloud.com/sites/default/files/2022-03/ovhcloud-logo2.png' alt='OVHcloud logo'></osds-medium>
+</div>
+
+```html
+<osds-medium width='700' src='https://corporate.ovhcloud.com/sites/default/files/2022-03/ovhcloud-logo2.png' alt='OVHcloud logo'></osds-medium>
+```

packages/components/medium/documentation/usage-guidelines/usage.mdx

@@ -0,0 +1,29 @@
+import GenericStyle from '@ovhcloud/ods-common-core/docs/generic-style.mdx';
+import HeightProperty from './properties/usage.height.mdx';
+import AltProperty from './properties/usage.alt.mdx';
+import SrcProperty from './properties/usage.src.mdx';
+import WidthProperty from './properties/usage.width.mdx';
+
+<GenericStyle />
+
+## Usage
+
+### Default
+
+<osds-medium src='https://corporate.ovhcloud.com/sites/default/files/2022-03/ovhcloud-logo2.png' alt='OVHcloud logo' width='1000'></osds-medium>
+
+```html
+<osds-medium src='https://corporate.ovhcloud.com/sites/default/files/2022-03/ovhcloud-logo2.png' alt='OVHcloud logo'></osds-medium>
+```
+
+### Src
+<SrcProperty />
+
+### Alt
+<AltProperty />
+
+### Height
+<HeightProperty />
+
+### Width
+<WidthProperty />

packages/components/medium/jest.config.ts

@@ -0,0 +1,7 @@
+import { getStencilJestConfig } from '@ovhcloud/ods-common-testing';
+
+const config = getStencilJestConfig({
+  args: process.argv.slice(2),
+});
+
+export default config;

packages/components/medium/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@ovhcloud/ods-component-medium",
+  "version": "16.3.1",
+  "description": "ODS Medium component",
+  "author": "OVH SAS",
+  "license": "Apache-2.0",
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.js",
+  "es2015": "dist/esm/index.js",
+  "es2017": "dist/esm/index.js",
+  "types": "dist/types/index.d.ts",
+  "collection": "dist/collection/collection-manifest.json",
+  "collection:main": "dist/collection/index.js",
+  "scripts": {
+    "build:ci": "build-stencil",
+    "build:prod": "build-stencil prod",
+    "build:react": "npm --prefix react run build",
+    "build:stencil": "stencil build --prod --config stencil.config.ts",
+    "build:vue": "npm --prefix vue run build",
+    "clean": "rimraf .stencil coverage custom-elements custom-elements-bundle dist docs-api loader screenshot www",
+    "doc": "typedoc --json ./docs-api/typedoc.json --pretty && node ../../../scripts/generate-typedoc-md.js",
+    "doc:api": "typedoc",
+    "generate:licence": "npx generate-license-file --input package.json --output THIRD-PARTY-LICENCES --overwrite",
+    "lint:scss": "stylelint 'src/components/**/*.scss'",
+    "lint:ts": "eslint 'src/**/*.{js,ts,tsx}'",
+    "start": "stencil build --dev --watch --serve",
+    "test:e2e": "stencil test --e2e --config stencil.config.ts",
+    "test:e2e:ci": "stencil test --config stencil.config.ts --e2e --ci",
+    "test:e2e:screenshot": "stencil test --e2e --screenshot --config stencil.config.ts --passWithNoTests",
+    "test:e2e:screenshot:update": "stencil test --e2e --screenshot --config stencil.config.ts --update-screenshot --passWithNoTests",
+    "test:spec": "stencil test --spec --config stencil.config.ts --coverage",
+    "test:spec:ci": "stencil test --config stencil.config.ts  --spec --ci --coverage",
+    "FIXME_test:e2e:ci:screenshot": "stencil test --config stencil.config.ts --e2e --ci --screenshot --passWithNoTests",
+    "FIXME_test:e2e:ci:screenshot:update": "stencil test --config stencil.config.ts --e2e --ci --screenshot --update-screenshot --passWithNoTests"
+  },
+  "dependencies": {
+    "@ovhcloud/ods-common-core": "16.3.1",
+    "@ovhcloud/ods-common-stencil": "16.3.1",
+    "@ovhcloud/ods-common-theming": "16.3.1"
+  },
+  "devDependencies": {
+    "@ovhcloud/ods-common-scripts": "16.3.1",
+    "@ovhcloud/ods-common-testing": "16.3.1",
+    "@ovhcloud/ods-stencil-dev": "16.3.1"
+  }
+}

packages/components/medium/src/components/osds-medium/constants/default-attributes.ts

@@ -0,0 +1,12 @@
+import type { OdsMediumAttribute } from '../interfaces/attributes';
+
+const DEFAULT_ATTRIBUTE: OdsMediumAttribute = Object.freeze({
+  alt: '',
+  height: undefined,
+  src: '',
+  width: undefined,
+});
+
+export {
+  DEFAULT_ATTRIBUTE,
+};

packages/components/medium/src/components/osds-medium/core/controller.spec.ts

@@ -0,0 +1,127 @@
+import type { OdsLoggerSpyReferences } from '@ovhcloud/ods-common-testing';
+import type { EventEmitter } from '@stencil/core';
+import { Ods, OdsLogger } from '@ovhcloud/ods-common-core';
+import { OdsClearLoggerSpy, OdsInitializeLoggerSpy } from '@ovhcloud/ods-common-testing';
+import { OdsMediumController } from './controller';
+import { DEFAULT_ATTRIBUTE } from '../constants/default-attributes';
+import { OsdsMedium } from '../osds-medium';
+
+class OdsMediumMock extends OsdsMedium {
+  constructor(attribute: Partial<OsdsMedium>) {
+    super();
+    Object.assign(this, attribute);
+  }
+
+  controller: OdsMediumController = jest.fn() as unknown as OdsMediumController;
+  odsRemoveClick!: EventEmitter<void>;
+  removeClicked = jest.fn();
+  beforeInit = jest.fn();
+}
+
+describe('spec:ods-medium-controller', () => {
+  let controller: OdsMediumController;
+  let component: OsdsMedium;
+  let loggerSpyReferences: OdsLoggerSpyReferences;
+
+  Ods.instance().logging(false);
+
+  function setup(attributes: Partial<OsdsMedium> = {}): void {
+    component = new OdsMediumMock(attributes);
+    controller = new OdsMediumController(component);
+  }
+
+  beforeEach(() => {
+    const loggerMocked = new OdsLogger('myLoggerMocked');
+    loggerSpyReferences = OdsInitializeLoggerSpy({
+      loggerMocked: loggerMocked as never,
+      spiedClass: OdsMediumController,
+    });
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+    OdsClearLoggerSpy(loggerSpyReferences);
+  });
+
+  it('should initialize', () => {
+    setup();
+    expect(controller).toBeTruthy();
+  });
+
+  describe('methods', () => {
+    describe('methods:validateAlt', () => {
+      it('should be checked at component creation', () => {
+        setup();
+        controller.validateAlt(DEFAULT_ATTRIBUTE.alt);
+        expect(loggerSpyReferences.methodSpies.warn).toHaveBeenCalled();
+      });
+
+      it('should throw a console.warn when alt is not set', () => {
+        setup();
+        controller.validateAlt('');
+
+        const expected = 'The alt attribute must be set';
+        expect(loggerSpyReferences.methodSpies.warn).toHaveBeenCalledWith(expected);
+      });
+    });
+
+    describe('methods:validateSrc', () => {
+      it('should be checked at component creation', () => {
+        setup();
+        controller.validateSrc(DEFAULT_ATTRIBUTE.src);
+        expect(loggerSpyReferences.methodSpies.warn).toHaveBeenCalled();
+      });
+
+      it('should throw a console.warn when src is not set', () => {
+        setup();
+        controller.validateSrc('');
+        const expected = 'The src attribute must be set';
+        expect(loggerSpyReferences.methodSpies.warn).toHaveBeenCalledWith(expected);
+      });
+    });
+
+    describe('methods:validateHeight', () => {
+      it('should be not be checked with empty value', () => {
+        setup();
+        controller.validateHeight(DEFAULT_ATTRIBUTE.height);
+        expect(loggerSpyReferences.methodSpies.warn).not.toHaveBeenCalled();
+      });
+
+      it('should throw a console.warn when height is not an integer value', () => {
+        setup();
+        controller.validateHeight(Math.abs(Math.random() * 999));
+        const expected = 'The height attribute value must be an integer';
+        expect(loggerSpyReferences.methodSpies.warn).toHaveBeenCalledWith(expected);
+      });
+
+      it('should throw a console.warn when height is not a positive value', () => {
+        setup();
+        controller.validateHeight(-Math.abs(Math.floor(Math.random() * 999)));
+        const expected = 'The height attribute must have a positive value';
+        expect(loggerSpyReferences.methodSpies.warn).toHaveBeenCalledWith(expected);
+      });
+    });
+
+    describe('methods:validateWidth', () => {
+      it('should be not be checked with empty value', () => {
+        setup();
+        controller.validateWidth(DEFAULT_ATTRIBUTE.width);
+        expect(loggerSpyReferences.methodSpies.warn).not.toHaveBeenCalled();
+      });
+
+      it('should throw a console.warn when width is not an integer value', () => {
+        setup();
+        controller.validateWidth(Math.abs(Math.random() * 999));
+        const expected = 'The width attribute value must be an integer';
+        expect(loggerSpyReferences.methodSpies.warn).toHaveBeenCalledWith(expected);
+      });
+
+      it('should throw a console.warn when width is not a positive value', () => {
+        setup();
+        controller.validateWidth(-Math.abs(Math.floor(Math.random() * 999)));
+        const expected = 'The width attribute must have a positive value';
+        expect(loggerSpyReferences.methodSpies.warn).toHaveBeenCalledWith(expected);
+      });
+    });
+  });
+});