feat: add empty component

Co-authored-by: Cyrille Bourgois <cyrille.bourgois@corp.ovh.com>

Author: 2 people

packages/manager/modules/pci/src/components/project/empty/empty.component.js

@@ -0,0 +1,13 @@
+import controller from './empty.controller';
+import template from './empty.html';
+
+export default {
+  controller,
+  template,
+  transclude: true,
+  bindings: {
+    imageAlt: '<',
+    imageSource: '<',
+    guides: '<?',
+  },
+};

packages/manager/modules/pci/src/components/project/empty/empty.controller.js

@@ -0,0 +1,7 @@
+import placeholder from './placeholder.svg';
+
+export default class {
+  constructor() {
+    this.placeholder = placeholder;
+  }
+}

packages/manager/modules/pci/src/components/project/empty/empty.html

@@ -0,0 +1,36 @@
+<div class="container-fluid px-0 pci-project-empty">
+    <div class="row">
+        <div class="col-md-3">
+            <div class="p-5" data-ng-class="{ 'placeholder' : !$ctrl.imageSource }">
+                <img
+                    data-ng-src="{{:: $ctrl.imageSource || $ctrl.placeholder }}"
+                    data-ng-attr-alt="{{:: $ctrl.imageAlt }}"
+                    alt=""
+                    class="w-100">
+            </div>
+        </div>
+        <div class="col-md-9" data-ng-transclude></div>
+    </div>
+
+    <aside class="row pt-5">
+        <div class="col-sm-6 col-md-4 mb-4" data-ng-repeat="guide in $ctrl.guides track by $index">
+            <div class="py-2 oui-tile d-flex align-items-start">
+                <span class="d-block oui-icon oui-icon-guides" aria-hidden="true"></span>
+                <div class="ml-2">
+                    <h2 class="oui-tile__title oui-heading_4"  data-ng-bind=":: guide.title"></h2>
+                    <div class="oui-tile__body mt-3">
+                        <p class="oui-tile__description" data-ng-bind=":: guide.description"></p>
+                        <a class="oui-link_icon"
+                            data-ng-href="{{:: guide.link }}"
+                            target="_blank"
+                            rel="noopener">
+                            <span data-translate="pci_project_empty_more"></span>
+                            <span class="oui-icon oui-icon-external_link" aria-hidden="true"></span>
+                            <span class="sr-only" data-translate="pci_project_empty_new_tab"></span>
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </aside>
+</div>

packages/manager/modules/pci/src/components/project/empty/index.js

@@ -0,0 +1,16 @@
+import angular from 'angular';
+import 'angular-translate';
+
+import component from './empty.component';
+
+import './index.less';
+
+const moduleName = 'ovhManagerPciComponentsProjectEmpty';
+
+angular
+  .module(moduleName, [
+    'pascalprecht.translate',
+  ])
+  .component('pciProjectEmpty', component);
+
+export default moduleName;

packages/manager/modules/pci/src/components/project/empty/index.less

@@ -0,0 +1,7 @@
+.pci-project-empty {
+  @import '~ovh-ui-kit/packages/oui-color/_variables.less';
+
+  .placeholder {
+    background-color: @oui-color-mischka;
+  }
+}

packages/manager/modules/pci/src/components/project/empty/placeholder.svg

@@ -0,0 +1,4 @@
+{
+  "pci_project_empty_more": "En savoir plus",
+  "pci_project_empty_new_tab": "Nouvel onglet"
+}

packages/manager/modules/pci/src/components/project/empty/translations/Messages_fr_FR.json

@@ -5,6 +5,7 @@ import 'ovh-api-services';
 import add from './add';
 import billing from './billing';
 import compute from './compute';
+import empty from './empty';
 import rights from './rights';
 
 import factory from './factory';
@@ -17,6 +18,7 @@ angular
     add,
     billing,
     compute,
+    empty,
     'ovh-api-services',
     rights,
   ])