Skip to content

Commit 0eb1a84

Browse files
bipozabipoza
authored
Merge pull request #18 from codesyntax/develop
Develop
2 parents 5c8a839 + e256941 commit 0eb1a84

File tree

7 files changed

+61
-64
lines changed

7 files changed

+61
-64
lines changed

‎.github/workflows/release.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ jobs:
2222
- run: echo "//registry.npmjs.org/:_authToken=${{secrets.NPM_TOKEN}}" > .npmrc
2323
- run: npm run release -- minor --ci
2424
# Deploy storybook to Github pages
25-
# - run: npm run deploy-storybook
25+
- run: npm run deploy-storybook
2626
env:
2727
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
2828
NPM_TOKEN: ${{ secrets.NPM_TOKEN}}

‎.storybook/manager.js‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { addons } from '@storybook/addons';
2+
import { create } from "@storybook/theming";
3+
4+
const theme = create({
5+
base: "dark",
6+
brandTitle: "Ionic React Photo Viewer",
7+
brandUrl: "https://github.com/codesyntax/ionic-react-photo-viewer"
8+
});
9+
10+
addons.setConfig({
11+
theme
12+
});

‎.storybook/preview.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,5 +53,5 @@ export const parameters = {
5353
...INITIAL_VIEWPORTS,
5454
},
5555
defaultViewport: "iphonex",
56-
}
56+
},
5757
};

‎package-lock.json‎

Lines changed: 2 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,8 +41,10 @@
4141
"@storybook/addon-essentials": "^6.4.22",
4242
"@storybook/addon-interactions": "^6.4.22",
4343
"@storybook/addon-links": "^6.4.22",
44+
"@storybook/addons": "^6.4.22",
4445
"@storybook/react": "^6.4.22",
4546
"@storybook/testing-library": "^0.0.11",
47+
"@storybook/theming": "^6.4.22",
4648
"@types/react": "^16.14.3",
4749
"@types/react-dom": "^16.9.10",
4850
"babel-loader": "^8.2.5",

‎src/IonPhotoViewer/IonPhotoViewer.stories.tsx‎

Lines changed: 42 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -1,73 +1,54 @@
11
import React from "react";
2-
import { ComponentStory, ComponentMeta } from "@storybook/react";
2+
import { ComponentMeta, ComponentStory, Story } from "@storybook/react";
33

44
import IonPhotoViewer from "./IonPhotoViewer";
55
import { IonAvatar, IonItem, IonLabel, IonThumbnail } from "@ionic/react";
6+
import { IonPhotoViewerProps } from "./IonPhotoViewer.types";
67

78
// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
89
export default {
9-
title: "Example/IonPhotoViewer",
10+
title: "Demo/IonPhotoViewer",
1011
component: IonPhotoViewer,
11-
// More on argTypes: https://storybook.js.org/docs/react/api/argtypes
12-
// argTypes: {
13-
// backgroundColor: { control: 'color' },
14-
// },
1512
} as ComponentMeta<typeof IonPhotoViewer>;
1613

17-
export const IonAvatarItemExample = () => {
18-
return (
19-
<>
20-
<h2>For development</h2>
14+
const Template: Story<IonPhotoViewerProps> = (args: IonPhotoViewerProps) => (
15+
<IonPhotoViewer {...args}>{args.children}</IonPhotoViewer>
16+
);
2117

22-
<h3>Ionic avatar</h3>
23-
<IonItem button lines="none" detail={false}>
24-
<IonAvatar slot="start">
25-
<IonPhotoViewer
26-
title="Martin arrantzalea"
27-
src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/9d/Alcedo_Atthis.jpg/1280px-Alcedo_Atthis.jpg"
28-
>
29-
<img
30-
src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/9d/Alcedo_Atthis.jpg/1280px-Alcedo_Atthis.jpg"
31-
alt="Martin arrantzalea"
32-
/>
33-
</IonPhotoViewer>
34-
</IonAvatar>
35-
<IonLabel>Martin arrantzalea</IonLabel>
36-
</IonItem>
37-
<IonItem button lines="none" detail={false}>
38-
<IonAvatar slot="start">
39-
<img
40-
src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/9d/Alcedo_Atthis.jpg/1280px-Alcedo_Atthis.jpg"
41-
alt="Martin arrantzalea"
42-
/>
43-
</IonAvatar>
44-
<IonLabel>Default IonAvatar without photo viewer</IonLabel>
45-
</IonItem>
46-
47-
<h3>Ionic thumbnail</h3>
48-
<IonItem button lines="none" detail={false}>
49-
<IonThumbnail slot="start">
50-
<IonPhotoViewer
51-
title="Martin arrantzalea"
52-
src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/9d/Alcedo_Atthis.jpg/1280px-Alcedo_Atthis.jpg"
53-
>
54-
<img
55-
src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/9d/Alcedo_Atthis.jpg/1280px-Alcedo_Atthis.jpg"
56-
alt="Martin arrantzalea"
57-
/>
58-
</IonPhotoViewer>
59-
</IonThumbnail>
60-
<IonLabel>Martin arrantzalea</IonLabel>
61-
</IonItem>
62-
<IonItem button lines="none" detail={false}>
63-
<IonThumbnail slot="start">
64-
<img
65-
src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/9d/Alcedo_Atthis.jpg/1280px-Alcedo_Atthis.jpg"
66-
alt="Martin arrantzalea"
67-
/>
68-
</IonThumbnail>
69-
<IonLabel>Default IonThumbnail without photo viewer</IonLabel>
70-
</IonItem>
71-
</>
72-
);
18+
const imageUrl =
19+
"https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/June_odd-eyed-cat_cropped.jpg/712px-June_odd-eyed-cat_cropped.jpg";
20+
export const Default = Template.bind({});
21+
Default.args = {
22+
title: "Image title",
23+
src: imageUrl,
24+
children: <img src={imageUrl} alt="Image alt" />,
7325
};
26+
27+
export const IonAvatarExample: Story = () => (
28+
<IonItem button lines="none" detail={false}>
29+
<IonAvatar slot="start">
30+
<IonPhotoViewer title="User name" src={imageUrl}>
31+
<img src={imageUrl} alt="Image alt" />
32+
</IonPhotoViewer>
33+
</IonAvatar>
34+
<IonLabel>IonAvatar example</IonLabel>
35+
</IonItem>
36+
);
37+
38+
export const IonThumbnailExample: Story = () => (
39+
<IonItem button lines="none" detail={false}>
40+
<IonThumbnail slot="start">
41+
<IonPhotoViewer
42+
title="User name"
43+
src={imageUrl}
44+
>
45+
<img
46+
src={imageUrl}
47+
alt="Image alt"
48+
/>
49+
</IonPhotoViewer>
50+
</IonThumbnail>
51+
<IonLabel>IonThumbnail example</IonLabel>
52+
</IonItem>
53+
);
54+

‎src/IonPhotoViewer/IonPhotoViewer.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ const IonPhotoViewer: React.FC<IonPhotoViewerProps> = ({
2020

2121
const uiElements: GalleryProps['uiElements'] = [
2222
{
23-
name: 'bulletsIndicator',
23+
name: 'IonHeaderComponent',
2424
order: 9,
2525
isButton: false,
2626
appendTo: 'wrapper',

0 commit comments

Comments
 (0)