Skip to content

Commit

Permalink
fix(story):image should be displayed on login page
Browse files Browse the repository at this point in the history
  • Loading branch information
yeshamavani committed Oct 11, 2023
1 parent 8a64944 commit 35869df
Show file tree
Hide file tree
Showing 6 changed files with 174 additions and 228 deletions.
5 changes: 1 addition & 4 deletions projects/arc-lib/.storybook/main.ts
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ const config: StorybookConfig = {
'@storybook/addon-essentials',
'@storybook/addon-interactions',
],

staticDirs: ['../src/lib/assets'],
framework: {
name: '@storybook/angular',
options: {},
Expand All @@ -17,6 +17,3 @@ const config: StorybookConfig = {
},
};
export default config;



260 changes: 92 additions & 168 deletions projects/arc-lib/documentation.json

Large diffs are not rendered by default.

4 changes: 1 addition & 3 deletions projects/arc-lib/src/lib/components/auth/auth.module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -11,11 +11,9 @@ import {ThemeModule} from '@project-lib/theme/theme.module';
import {AuthRoutingModule} from './auth-routing.module';
import {AuthComponent} from './auth.component';
import {LoginComponent} from './login/login.component';
import { HomePageComponent } from './home-page/home-page.component';
import { LoginPageComponent } from './login-page/login-page.component';

@NgModule({
declarations: [LoginComponent, AuthComponent, HomePageComponent, LoginPageComponent],
declarations: [LoginComponent, AuthComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
imports: [
CommonModule,
Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<nb-card class="h-100">
<nb-card-body>
<div class="align-center logo">
<img width="20%" src= "{{image}}" alt="logo" draggable="false"
<img width="20%" [src]= "imageUrl" [alt]="altText" draggable="false"
height="126px" width="120px" />

<!-- src="baseHref + 'images/auth/angular.png'" -->
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,8 @@ import {ActivatedRoute} from '@angular/router';
import {AuthService} from '@project-lib/core/auth';
import {RouteComponentBaseDirective} from '@project-lib/core/route-component-base';

// import { APP_BASE_HREF } from '@angular/common';

@Component({
selector: 'login',
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.scss'],
})
Expand All @@ -16,14 +14,11 @@ export class LoginComponent extends RouteComponentBaseDirective {
override readonly route: ActivatedRoute,
override readonly location: Location,
private readonly authService: AuthService,
// @Inject(APP_BASE_HREF)
// private baseHref: string
) {
super(route, location);
}
image="../../../assets/images/auth/angular.png"
// ""
// projects/arc-lib/src/lib/assets/images/auth/angular.png
imageUrl = '../../../assets/images/auth/angular.png';
altText = 'logo';
loginViaGoogle() {
this.authService.loginViaGoogle();
}
Expand Down
120 changes: 76 additions & 44 deletions projects/arc-lib/src/stories/components/LoginPage.stories.ts
Original file line number Diff line number Diff line change
@@ -1,47 +1,79 @@
import { moduleMetadata } from '@storybook/angular';

import { AuthService } from '@project-lib/core/auth';
import { LoginComponent } from '@project-lib/components/index';
import { ActivatedRoute } from '@angular/router';
import { ThemeModule } from '@project-lib/theme/theme.module';
import { NbThemeModule } from '@nebular/theme';


export default {
title: 'Components/Login',
component: LoginComponent,
decorators: [
moduleMetadata({
imports:[ThemeModule,
NbThemeModule.forRoot()],
providers: [
{
provide: ActivatedRoute,
useValue: {
/* Mock ActivatedRoute data here if needed */
},
import {Meta, StoryObj, moduleMetadata} from '@storybook/angular';
import {AuthService} from '@project-lib/core/auth';
import {LoginComponent} from '@project-lib/components/index';
import {ActivatedRoute} from '@angular/router';
import {ThemeModule} from '@project-lib/theme/theme.module';
import {NbThemeModule} from '@nebular/theme';

const meta = {
title: 'Components/Login',
component: LoginComponent,
decorators: [
moduleMetadata({
imports: [ThemeModule, NbThemeModule.forRoot()],
providers: [
{
provide: ActivatedRoute,
useValue: {
/* Mock ActivatedRoute data here if needed */
},
{
provide: Location,
useValue: {
/* Mock Location methods here if needed */
},
},
{
provide: Location,
useValue: {
/* Mock Location methods here if needed */
},
{
provide: AuthService,
useValue: {
/* Mock AuthService methods here if needed */
},
},
{
provide: AuthService,
useValue: {
/* Mock AuthService methods here if needed */
},
],
}),
],
};

const Template = (args: LoginComponent) => ({
component: LoginComponent,
props: args,
});

export const Default = Template.bind({});
Default.args = {};
},
],
}),
],
} as Meta;
export default meta;

// // const Template: Story<LoginComponent> = (args: LoginComponent) => ({
// // component: LoginComponent,
// // props: args,
// // // template: `<app-login [image]="${image}"></app-login>`,
// // });

// // export const Default = Template.bind({});
// // Default.args = {
// // image: '../../lib/assets/images/auth/angular.png',
// // //image: '../assets/angular.png',
// // };

// const meta: Meta<LoginComponent> = {
// component: LoginComponent,
// };

// export default meta;
// type Story = StoryObj<typeof meta>;

// // Assume image.png is located in the "public" directory.
// export const WithAnImage: Story = {
// render: () => ({
// props: {
// src: '/images/auth/angular.png',
// alt: 'my image',
// },
// }),
// };

/// from official docs
type Story = StoryObj<typeof meta>;

//append the path of image relative to the staticdir in main.ts
export const WithAnImage: Story = {
render: () => ({
props: {
imageUrl: '/images/auth/angular.png',
altText: 'my image',
},
}),
};

0 comments on commit 35869df

Please sign in to comment.