Skip to content

Commit 5fdaf73

Browse files
authored
fix: merged js logos and fixed svgs (#5930)
1 parent 4cdac87 commit 5fdaf73

18 files changed

+231
-331
lines changed

components/__design__/color.stories.tsx renamed to components/__design__/colors.stories.tsx

+5-6
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
11
import type { Meta as MetaObj, StoryObj } from '@storybook/react';
22
import type { CSSProperties } from 'react';
33

4-
export const Default: StoryObj = {};
5-
64
const containerStyle = {
75
display: 'flex',
86
flexDirection: 'row',
@@ -24,9 +22,8 @@ const gridEntryStyle = {
2422
gap: '1rem',
2523
} satisfies CSSProperties;
2624

27-
export default {
28-
title: 'Design System/Colors',
29-
component: () => (
25+
export const Colors: StoryObj = {
26+
render: () => (
3027
<div style={containerStyle}>
3128
<div style={containerColorsStyle}>
3229
<div style={gridEntryStyle}>
@@ -102,4 +99,6 @@ export default {
10299
</div>
103100
</div>
104101
),
105-
} as MetaObj;
102+
};
103+
104+
export default { title: 'Design System' } as MetaObj;

components/__design__/text.stories.tsx renamed to components/__design__/font-family.stories.tsx

+5-6
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
11
import type { Meta as MetaObj, StoryObj } from '@storybook/react';
22
import type { CSSProperties } from 'react';
33

4-
export const Default: StoryObj = {};
5-
64
const textStyles = {
75
alignItems: 'center',
86
display: 'flex',
@@ -14,9 +12,8 @@ const textStyles = {
1412
width: '100%',
1513
} satisfies CSSProperties;
1614

17-
export default {
18-
title: 'Design System/Text',
19-
component: () => (
15+
export const FontFamily: StoryObj = {
16+
render: () => (
2017
<div style={textStyles}>
2118
<div>
2219
<p className="text-xs font-regular">Text XS/Regular</p>
@@ -86,4 +83,6 @@ export default {
8683
</div>
8784
</div>
8885
),
89-
} as MetaObj;
86+
};
87+
88+
export default { title: 'Design System' } as MetaObj;

components/__design__/hex-logos.stories.tsx

-38
This file was deleted.

components/__design__/horizontal-logos.stories.tsx

-27
This file was deleted.

components/__design__/js-logos.stories.tsx

-30
This file was deleted.
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
1+
import type { Meta as MetaObj, StoryObj } from '@storybook/react';
2+
import Image from 'next/image';
3+
4+
export const HorizontalLogos: StoryObj = {
5+
render: () => (
6+
<div>
7+
<div>
8+
<Image
9+
src={`/static/images/logos/horizontal-light.svg`}
10+
className="bg-black"
11+
alt="Node.js"
12+
width={267}
13+
height={80}
14+
/>
15+
</div>
16+
<div>
17+
<Image
18+
src={`/static/images/logos/horizontal-dark.svg`}
19+
alt="Node.js"
20+
width={267}
21+
height={80}
22+
/>
23+
</div>
24+
</div>
25+
),
26+
};
27+
28+
export const StackedLogos: StoryObj = {
29+
render: () => (
30+
<div>
31+
<div>
32+
<Image
33+
src={`/static/images/logos/stacked-dark.svg`}
34+
alt="Node.js"
35+
width={267}
36+
height={80}
37+
/>
38+
</div>
39+
<div>
40+
<Image
41+
src={`/static/images/logos/stacked-black.svg`}
42+
alt="Node.js"
43+
width={267}
44+
height={80}
45+
/>
46+
</div>
47+
<div>
48+
<Image
49+
src={`/static/images/logos/stacked-white.svg`}
50+
alt="Node.js"
51+
width={267}
52+
height={80}
53+
/>
54+
</div>
55+
<div>
56+
<Image
57+
src={`/static/images/logos/stacked-light.svg`}
58+
alt="Node.js"
59+
width={267}
60+
height={80}
61+
/>
62+
</div>
63+
</div>
64+
),
65+
};
66+
67+
export const JSSymbols: StoryObj = {
68+
render: () => (
69+
<div>
70+
<div>
71+
<Image
72+
src={`/static/images/logos/js-white.svg`}
73+
alt="Node.js"
74+
width={30}
75+
height={30}
76+
/>
77+
</div>
78+
<div>
79+
<Image
80+
src={`/static/images/logos/js-green.svg`}
81+
alt="Node.js"
82+
width={30}
83+
height={30}
84+
/>
85+
</div>
86+
</div>
87+
),
88+
};
89+
90+
export const HexSymbols: StoryObj = {
91+
render: () => (
92+
<div>
93+
<div>
94+
<Image
95+
src={`/static/images/logos/hex-white.svg`}
96+
alt="Node.js"
97+
width={64}
98+
height={64}
99+
/>
100+
</div>
101+
<div>
102+
<Image
103+
src={`/static/images/logos/hex-black.svg`}
104+
alt="Node.js"
105+
width={64}
106+
height={64}
107+
/>
108+
</div>
109+
<div>
110+
<Image
111+
src={`/static/images/logos/hex-green.svg`}
112+
alt="Node.js"
113+
width={64}
114+
height={64}
115+
/>
116+
</div>
117+
</div>
118+
),
119+
};
120+
121+
export default { title: 'Design System/Node.js Logos' } as MetaObj;
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,51 @@
11
import type { Meta as MetaObj, StoryObj } from '@storybook/react';
22
import Image from 'next/image';
33

4-
export const PlatformLogos: StoryObj = {};
5-
6-
export default {
7-
title: 'Design System/Platform Logos',
8-
component: () => {
9-
return (
4+
export const PlatformLogos: StoryObj = {
5+
render: () => (
6+
<div>
7+
<div>
8+
<Image
9+
src="/static/images/logos/platform-linux.svg"
10+
alt="Ubuntu Logo"
11+
width={64}
12+
height={64}
13+
/>
14+
</div>
15+
<div>
16+
<Image
17+
src="/static/images/logos/platform-apple.svg"
18+
alt="Apple Logo"
19+
width={64}
20+
height={64}
21+
/>
22+
</div>
1023
<div>
11-
<div>
12-
<Image
13-
src="/static/images/logos/platform-apple.svg"
14-
alt="Apple Logo"
15-
width={64}
16-
height={64}
17-
/>
18-
</div>
19-
<div>
20-
<Image
21-
src="/static/images/logos/platform-microsoft.svg"
22-
alt="Microsoft Logo"
23-
width={64}
24-
height={64}
25-
/>
26-
</div>
27-
<div>
28-
<Image
29-
src="/static/images/logos/platform-homebrew.svg"
30-
alt="Homebrew Logo"
31-
width={64}
32-
height={64}
33-
/>
34-
</div>
35-
<div>
36-
<Image
37-
src="/static/images/logos/platform-placeholder.svg"
38-
alt="Placeholder Logo"
39-
width={64}
40-
height={64}
41-
/>
42-
</div>
24+
<Image
25+
src="/static/images/logos/platform-microsoft.svg"
26+
alt="Microsoft Logo"
27+
width={64}
28+
height={64}
29+
/>
4330
</div>
44-
);
45-
},
46-
} as MetaObj;
31+
<div>
32+
<Image
33+
src="/static/images/logos/platform-homebrew.svg"
34+
alt="Homebrew Logo"
35+
width={64}
36+
height={64}
37+
/>
38+
</div>
39+
<div>
40+
<Image
41+
src="/static/images/logos/platform-placeholder.svg"
42+
alt="Placeholder Logo"
43+
width={64}
44+
height={64}
45+
/>
46+
</div>
47+
</div>
48+
),
49+
};
50+
51+
export default { title: 'Design System' } as MetaObj;

0 commit comments

Comments
 (0)