Skip to content

Commit 8094dc3

Browse files
JialeclJialecl
authored
Merge pull request #2210 from dxc-technology/gomezivann/image-redesign
Image redesign
2 parents 7891e7e + 335a7fb commit 8094dc3

File tree

9 files changed

+190
-193
lines changed

9 files changed

+190
-193
lines changed

‎apps/website/pages/components/image/code.tsx‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import Head from "next/head";
2+
import type { ReactElement } from "react";
3+
import ImageCodePage from "screens/components/image/code/ImageCodePage";
4+
import ImagePageLayout from "screens/components/image/ImagePageLayout";
5+
6+
const Code = () => (
7+
<>
8+
<Head>
9+
<title>Image code — Halstack Design System</title>
10+
</Head>
11+
<ImageCodePage />
12+
</>
13+
);
14+
15+
Code.getLayout = (page: ReactElement) => <ImagePageLayout>{page}</ImagePageLayout>;
16+
17+
export default Code;

‎apps/website/pages/components/image/index.tsx‎

Lines changed: 10 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,17 @@
11
import Head from "next/head";
22
import type { ReactElement } from "react";
33
import ImagePageLayout from "screens/components/image/ImagePageLayout";
4-
import ImageCodePage from "screens/components/image/code/ImageCodePage";
4+
import ImageOverviewPage from "screens/components/image/overview/ImageOverviewPage";
55

6-
const Index = () => {
7-
return (
8-
<>
9-
<Head>
10-
<title>Image — Halstack Design System</title>
11-
</Head>
12-
<ImageCodePage></ImageCodePage>
13-
</>
14-
);
15-
};
6+
const Index = () => (
7+
<>
8+
<Head>
9+
<title>Image — Halstack Design System</title>
10+
</Head>
11+
<ImageOverviewPage />
12+
</>
13+
);
1614

17-
Index.getLayout = function getLayout(page: ReactElement) {
18-
return <ImagePageLayout>{page}</ImagePageLayout>;
19-
};
15+
Index.getLayout = (page: ReactElement) => <ImagePageLayout>{page}</ImagePageLayout>;
2016

2117
export default Index;

‎apps/website/pages/components/image/usage.tsx‎

Lines changed: 0 additions & 21 deletions
This file was deleted.

‎apps/website/screens/components/image/ImagePageLayout.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,17 +6,17 @@ import { ReactNode } from "react";
66

77
const ImagePageHeading = ({ children }: { children: ReactNode }) => {
88
const tabs = [
9-
{ label: "Code", path: "/components/image" },
10-
{ label: "Usage", path: "/components/image/usage" },
9+
{ label: "Overview", path: "/components/image" },
10+
{ label: "Code", path: "/components/image/code" },
1111
];
1212

1313
return (
1414
<DxcFlex direction="column" gap="3rem">
1515
<PageHeading>
1616
<DxcFlex direction="column" gap="2rem">
1717
<ComponentHeading name="Image" />
18-
<DxcParagraph>The Image component is used to embed images in Halstack-based user interfaces.</DxcParagraph>
19-
<TabsPageHeading tabs={tabs}></TabsPageHeading>
18+
<DxcParagraph>The image component is used to embed images in Halstack-based user interfaces.</DxcParagraph>
19+
<TabsPageHeading tabs={tabs} />
2020
</DxcFlex>
2121
</PageHeading>
2222
{children}

‎apps/website/screens/components/image/code/ImageCodePage.tsx‎

Lines changed: 59 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,14 @@ const sections = [
5353
</td>
5454
<td>-</td>
5555
</tr>
56+
<tr>
57+
<td>height</td>
58+
<td>
59+
<TableCode>string</TableCode>
60+
</td>
61+
<td>Sets the rendered height of the image.</td>
62+
<td>-</td>
63+
</tr>
5664
<tr>
5765
<td>lazyLoading</td>
5866
<td>
@@ -67,110 +75,102 @@ const sections = [
6775
</td>
6876
</tr>
6977
<tr>
78+
<td>objectFit</td>
7079
<td>
71-
<DxcFlex direction="column" gap="0.25rem" alignItems="baseline">
72-
<StatusBadge status="required" />
73-
src
74-
</DxcFlex>
75-
</td>
76-
<td>
77-
<TableCode>string</TableCode>
78-
</td>
79-
<td>URL of the image.</td>
80-
<td>-</td>
81-
</tr>
82-
<tr>
83-
<td>srcSet</td>
84-
<td>
85-
<TableCode>string</TableCode>
80+
<TableCode>'contain' | 'cover' | 'fill' | 'none' | 'scale-down'</TableCode>
8681
</td>
8782
<td>
88-
List of one or more strings separated by commas indicating a set of possible images for the user agent to
89-
use. See{" "}
90-
<DxcLink newWindow href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/srcset">
83+
Sets the <Code>object-fit</Code> CSS property. See{" "}
84+
<DxcLink newWindow href="https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit">
9185
MDN
9286
</DxcLink>{" "}
9387
for further information.
9488
</td>
95-
<td>-</td>
89+
<td>
90+
<TableCode>'fill'</TableCode>
91+
</td>
9692
</tr>
9793
<tr>
98-
<td>sizes</td>
94+
<td>objectPosition</td>
9995
<td>
10096
<TableCode>string</TableCode>
10197
</td>
10298
<td>
103-
One or more strings separated by commas, indicating a set of source sizes. If the <Code>srcSet</Code>{" "}
104-
attribute is absent or contains no values with a width descriptor, then this attribute has no effect. See{" "}
105-
<DxcLink newWindow href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/sizes">
99+
Sets the <Code>object-position</Code> CSS property. See{" "}
100+
<DxcLink newWindow href="https://developer.mozilla.org/en-US/docs/Web/CSS/object-position">
106101
MDN
107102
</DxcLink>{" "}
108103
for further information.
109104
</td>
110-
<td>-</td>
105+
<td>
106+
<TableCode>'50% 50%'</TableCode>
107+
</td>
111108
</tr>
112109
<tr>
113-
<td>width</td>
110+
<td>onError</td>
114111
<td>
115-
<TableCode>string</TableCode>
112+
<TableCode>{"React.ReactEventHandler <HTMLImageElement>"}</TableCode>
116113
</td>
117-
<td>Sets the rendered width of the image.</td>
114+
<td>This function will be called when the image fails to load.</td>
118115
<td>-</td>
119116
</tr>
120117
<tr>
121-
<td>height</td>
118+
<td>onLoad</td>
122119
<td>
123-
<TableCode>string</TableCode>
120+
<TableCode>{"React.ReactEventHandler <HTMLImageElement>"}</TableCode>
124121
</td>
125-
<td>Sets the rendered height of the image.</td>
122+
<td>This function will be called when the image is loaded.</td>
126123
<td>-</td>
127124
</tr>
128125
<tr>
129-
<td>objectFit</td>
126+
<td>sizes</td>
130127
<td>
131-
<TableCode>'contain' | 'cover' | 'fill' | 'none' | 'scale-down'</TableCode>
128+
<TableCode>string</TableCode>
132129
</td>
133130
<td>
134-
Sets the <Code>object-fit</Code> CSS property. See{" "}
135-
<DxcLink newWindow href="https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit">
131+
One or more strings separated by commas, indicating a set of source sizes. If the <Code>srcSet</Code>{" "}
132+
attribute is absent or contains no values with a width descriptor, then this attribute has no effect. See{" "}
133+
<DxcLink newWindow href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/sizes">
136134
MDN
137135
</DxcLink>{" "}
138136
for further information.
139137
</td>
138+
<td>-</td>
139+
</tr>
140+
<tr>
140141
<td>
141-
<TableCode>'fill'</TableCode>
142+
<DxcFlex direction="column" gap="0.25rem" alignItems="baseline">
143+
<StatusBadge status="required" />
144+
src
145+
</DxcFlex>
146+
</td>
147+
<td>
148+
<TableCode>string</TableCode>
142149
</td>
150+
<td>URL of the image.</td>
151+
<td>-</td>
143152
</tr>
144153
<tr>
145-
<td>objectPosition</td>
154+
<td>srcSet</td>
146155
<td>
147156
<TableCode>string</TableCode>
148157
</td>
149158
<td>
150-
Sets the <Code>object-position</Code> CSS property. See{" "}
151-
<DxcLink newWindow href="https://developer.mozilla.org/en-US/docs/Web/CSS/object-position">
159+
List of one or more strings separated by commas indicating a set of possible images for the user agent to
160+
use. See{" "}
161+
<DxcLink newWindow href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/srcset">
152162
MDN
153163
</DxcLink>{" "}
154164
for further information.
155165
</td>
156-
<td>
157-
<TableCode>'50% 50%'</TableCode>
158-
</td>
159-
</tr>
160-
<tr>
161-
<td>onLoad</td>
162-
<td>
163-
<TableCode>{"React.ReactEventHandler <HTMLImageElement>"}</TableCode>
164-
</td>
165-
<td>This function will be called when the image is loaded.</td>
166166
<td>-</td>
167167
</tr>
168168
<tr>
169-
<td>onError</td>
169+
<td>width</td>
170170
<td>
171-
<TableCode>{"React.ReactEventHandler <HTMLImageElement>"}</TableCode>
171+
<TableCode>string</TableCode>
172172
</td>
173-
<td>This function will be called when the image fails to load.</td>
173+
<td>Sets the rendered width of the image.</td>
174174
<td>-</td>
175175
</tr>
176176
</DxcTable>
@@ -187,15 +187,13 @@ const sections = [
187187
},
188188
];
189189

190-
const ImageCodePage = () => {
191-
return (
192-
<DxcFlex direction="column" gap="4rem">
193-
<QuickNavContainerLayout>
194-
<QuickNavContainer sections={sections} startHeadingLevel={2}></QuickNavContainer>
195-
</QuickNavContainerLayout>
196-
<DocFooter githubLink="https://github.com/dxc-technology/halstack-react/blob/master/apps/website/screens/components/image/code/ImageCodePage.tsx" />
197-
</DxcFlex>
198-
);
199-
};
190+
const ImageCodePage = () => (
191+
<DxcFlex direction="column" gap="4rem">
192+
<QuickNavContainerLayout>
193+
<QuickNavContainer sections={sections} startHeadingLevel={2} />
194+
</QuickNavContainerLayout>
195+
<DocFooter githubLink="https://github.com/dxc-technology/halstack-react/blob/master/apps/website/screens/components/image/code/ImageCodePage.tsx" />
196+
</DxcFlex>
197+
);
200198

201199
export default ImageCodePage;

0 commit comments

Comments
 (0)