MOBILE-3371 core: Implement dimmed empty box

Also improved storybook set up to test the new feature

.storybook/main.js

@@ -1,5 +1,11 @@
 module.exports = {
     framework: '@storybook/angular',
-    addons: ['@storybook/addon-controls'],
+    addons: [
+        '@storybook/addon-controls',
+        '@storybook/addon-viewport',
+        'storybook-addon-designs',
+        'storybook-addon-rtl-direction',
+        'storybook-dark-mode',
+    ],
     stories: ['../src/**/*.stories.ts'],
 }

.storybook/preview.js

@@ -3,4 +3,9 @@ import '!style-loader!css-loader!sass-loader!./styles.scss';
 
 export const parameters = {
     layout: 'centered',
+    darkMode: {
+        darkClass: 'dark',
+        classTarget: 'html',
+        stylePreview: true,
+    },
 };

.storybook/styles.scss

@@ -1,3 +1,7 @@
+storybook-dynamic-app-root {
+    color: var(--ion-text-color);
+}
+
 .core-error-info {
     max-width: 300px;
 }

package.json

@@ -149,9 +149,11 @@
     "@ionic/angular-toolkit": "^2.3.3",
     "@ionic/cli": "^6.19.0",
     "@storybook/addon-controls": "~6.1.21",
+    "@storybook/addon-viewport": "~6.1.21",
     "@storybook/angular": "~6.1.21",
     "@types/faker": "^5.1.3",
     "@types/jest": "^26.0.24",
+    "@types/marked": "^4.3.1",
     "@types/node": "^12.12.64",
     "@types/resize-observer-browser": "^0.1.5",
     "@types/webpack-env": "^1.16.0",
@@ -183,9 +185,13 @@
     "jest-preset-angular": "^8.3.1",
     "jest-raw-loader": "^1.0.1",
     "jsonc-parser": "^2.3.1",
+    "marked": "^4.3.0",
     "minimatch": "^5.1.0",
     "native-run": "^1.4.0",
     "patch-package": "^6.5.0",
+    "storybook-addon-designs": "~6.1.0",
+    "storybook-addon-rtl-direction": "0.0.19",
+    "storybook-dark-mode": "^3.0.0",
     "terser-webpack-plugin": "^4.2.3",
     "ts-jest": "^26.4.1",
     "ts-node": "~8.3.0",

src/core/components/empty-box/empty-box.scss

@@ -1,22 +1,23 @@
 @import "~theme/globals";
 
 :host {
+    --image-size: 120px;
+    --icon-color: var(--text-color);
+
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     flex-grow: 1;
-
     color: var(--text-color);
     margin: 0 auto;
     text-align: center;
     padding: 16px;
-    --image-size: 120px;
-
     height: 100%;
 
     ion-icon {
         font-size: var(--image-size);
+        color: var(--icon-color);
     }
     img {
         height: var(--image-size);
@@ -28,6 +29,20 @@
     &.core-empty-box-clickable {
         z-index: 0;
     }
+
+    &.dimmed {
+        --icon-color: var(--gray-400);
+        --text-color: var(--gray-700);
+    }
+
+}
+
+:host-context(html.dark) {
+
+    &.dimmed {
+        --text-color: var(--gray-300);
+    }
+
 }
 
 @include media-breakpoint-down(sm) {

src/core/components/empty-box/empty-box.ts

@@ -12,7 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { Component, Input } from '@angular/core';
+import { Component, HostBinding, Input } from '@angular/core';
 
 /**
  * Component to show an empty box message. It will show an optional icon or image and a text centered on page.
@@ -30,6 +30,7 @@ import { Component, Input } from '@angular/core';
 export class CoreEmptyBoxComponent {
 
     @Input() message = ''; // Message to display.
+    @Input() dimmed = false; // Wether the box is dimmed or not.
     @Input() icon?: string; // Name of the icon to use.
     @Input() image?: string; // Image source. If an icon is provided, image won't be used.
     @Input() flipIconRtl = false; // Whether to flip the icon in RTL. Defaults to false.
@@ -39,4 +40,9 @@ export class CoreEmptyBoxComponent {
      */
     @Input() inline = false;
 
+    @HostBinding('class.dimmed')
+    get isDimmed(): boolean {
+        return this.dimmed;
+    }
+
 }

src/core/components/stories/components/components.module.ts

@@ -0,0 +1,35 @@
+// (C) Copyright 2015 Moodle Pty Ltd.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import { NgModule } from '@angular/core';
+import { CoreEmptyBoxPageComponent } from './empty-box-page/empty-box-page';
+import { CoreEmptyBoxWrapperComponent } from './empty-box-wrapper/empty-box-wrapper';
+import { StorybookModule } from '@/storybook/storybook.module';
+import { CoreSearchComponentsModule } from '@features/search/components/components.module';
+import { CoreComponentsModule } from '@components/components.module';
+import { CommonModule } from '@angular/common';
+
+@NgModule({
+    declarations: [
+        CoreEmptyBoxPageComponent,
+        CoreEmptyBoxWrapperComponent,
+    ],
+    imports: [
+        CommonModule,
+        StorybookModule,
+        CoreComponentsModule,
+        CoreSearchComponentsModule,
+    ],
+})
+export class CoreComponentsStorybookModule {}

src/core/components/stories/components/empty-box-page/empty-box-page.html

@@ -0,0 +1,16 @@
+<ion-app>
+    <ion-header>
+        <ion-toolbar>
+            <ion-title>
+                <h1>Search</h1>
+            </ion-title>
+        </ion-toolbar>
+    </ion-header>
+    <ion-content>
+        <div class="core-flex-fill">
+            <core-search-box></core-search-box>
+            <core-empty-box-wrapper [icon]="icon" [content]="content" [dimmed]="dimmed" class="core-flex-fill">
+            </core-empty-box-wrapper>
+        </div>
+    </ion-content>
+</ion-app>

src/core/components/stories/components/empty-box-page/empty-box-page.ts

@@ -0,0 +1,27 @@
+// (C) Copyright 2015 Moodle Pty Ltd.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import { Component, Input } from '@angular/core';
+
+@Component({
+    selector: 'core-empty-box-page',
+    templateUrl: 'empty-box-page.html',
+})
+export class CoreEmptyBoxPageComponent {
+
+    @Input() icon!: string;
+    @Input() content!: string;
+    @Input() dimmed!: boolean;
+
+}

src/core/components/stories/components/empty-box-wrapper/empty-box-wrapper.html

@@ -0,0 +1,3 @@
+<core-empty-box [icon]="icon" [dimmed]="dimmed">
+    <div [innerHTML]="html"></div>
+</core-empty-box>

src/core/components/stories/components/empty-box-wrapper/empty-box-wrapper.ts

@@ -0,0 +1,38 @@
+// (C) Copyright 2015 Moodle Pty Ltd.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import { Component, Input, OnChanges } from '@angular/core';
+import { DomSanitizer } from '@singletons';
+import { SafeHtml } from '@angular/platform-browser';
+
+@Component({
+    selector: 'core-empty-box-wrapper',
+    templateUrl: 'empty-box-wrapper.html',
+})
+export class CoreEmptyBoxWrapperComponent implements OnChanges {
+
+    @Input() icon!: string;
+    @Input() content!: string;
+    @Input() dimmed!: boolean;
+
+    html?: SafeHtml;
+
+    /**
+     * @inheritdoc
+     */
+    ngOnChanges(): void {
+        this.html = DomSanitizer.bypassSecurityTrustHtml(this.content);
+    }
+
+}

src/core/components/stories/empty-box.stories.ts

@@ -0,0 +1,79 @@
+// (C) Copyright 2015 Moodle Pty Ltd.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import { Meta, moduleMetadata } from '@storybook/angular';
+import { marked } from 'marked';
+
+import { story } from '@/storybook/utils/helpers';
+
+import { CoreEmptyBoxComponent } from '@components/empty-box/empty-box';
+import { CoreEmptyBoxWrapperComponent } from './components/empty-box-wrapper/empty-box-wrapper';
+import { CoreEmptyBoxPageComponent } from './components/empty-box-page/empty-box-page';
+import { CoreComponentsStorybookModule } from './components/components.module';
+
+interface Args {
+    icon: string;
+    content: string;
+    dimmed: boolean;
+}
+
+export default <Meta<Args>> {
+    title: 'Core/Empty Box',
+    component: CoreEmptyBoxComponent,
+    decorators: [
+        moduleMetadata({ imports: [CoreComponentsStorybookModule] }),
+    ],
+    argTypes: {
+        icon: {
+            control: {
+                type: 'select',
+                options: ['fas-magnifying-glass', 'fas-user', 'fas-check'],
+            },
+        },
+    },
+    args: {
+        icon: 'fas-user',
+        content: 'No users',
+        dimmed: false,
+    },
+};
+
+const WrapperTemplate = story<Args>((args) => ({
+    component: CoreEmptyBoxWrapperComponent,
+    props: {
+        ...args,
+        content: marked(args.content),
+    },
+}));
+
+const PageTemplate = story<Args>((args) => ({
+    component: CoreEmptyBoxPageComponent,
+    props: {
+        ...args,
+        content: marked(args.content),
+    },
+}));
+
+export const Primary = story<Args>(WrapperTemplate);
+
+export const Example = story<Args>(PageTemplate, {
+    icon: 'fas-magnifying-glass',
+    content: '**No results for "Test Search"**\n\n<small>Check for typos or try using different keywords</small>',
+});
+
+export const DimmedExample = story<Args>(PageTemplate, {
+    icon: 'fas-magnifying-glass',
+    content: 'What are you searching for?',
+    dimmed: true,
+});