Skip to content

Commit d09e4f1

Browse files
AugustinMauroyAugustinMauroy
authored
feat(pride logo): introduce (#6734)
* feat(pride logo): introduce * feat(logo): update logic to allow variant * update
1 parent f09d3d7 commit d09e4f1

File tree

14 files changed

+373
-18
lines changed

14 files changed

+373
-18
lines changed

‎components/Common/NodejsLogo/index.module.css‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
.nodejsLogoDark {
2+
@apply h-6
3+
w-20
4+
dark:hidden;
5+
}
6+
7+
.nodejsLogoLight {
8+
@apply hidden
9+
h-6
10+
w-20
11+
dark:block;
12+
}

‎components/Common/NodejsLogo/index.stories.tsx‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import type { Meta as MetaObj, StoryObj } from '@storybook/react';
2+
3+
import NodejsLogo from '@/components/Common/NodejsLogo';
4+
5+
type Story = StoryObj<typeof NodejsLogo>;
6+
type Meta = MetaObj<typeof NodejsLogo>;
7+
8+
export const Default: Story = {};
9+
10+
export const WithPride: Story = {
11+
args: { variant: 'pride' },
12+
};
13+
14+
export default { component: NodejsLogo } as Meta;

‎components/Common/NodejsLogo/index.tsx‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import type { FC } from 'react';
2+
3+
import NodejsDark from '@/components/Icons/Logos/NodejsDark';
4+
import NodejsDarkPride from '@/components/Icons/Logos/NodejsDarkPride';
5+
import NodejsLight from '@/components/Icons/Logos/NodejsLight';
6+
import NodejsLightPride from '@/components/Icons/Logos/NodejsLightPride';
7+
import type { LogoVariant } from '@/types';
8+
9+
import style from './index.module.css';
10+
11+
type NodejsLogoProps = {
12+
variant?: LogoVariant;
13+
};
14+
15+
const NodejsLogo: FC<NodejsLogoProps> = ({ variant = 'default' }) => (
16+
<>
17+
{variant === 'pride' && (
18+
<>
19+
<NodejsDarkPride className={style.nodejsLogoDark} />
20+
<NodejsLightPride className={style.nodejsLogoLight} />
21+
</>
22+
)}
23+
{variant === 'default' && (
24+
<>
25+
<NodejsDark className={style.nodejsLogoDark} />
26+
<NodejsLight className={style.nodejsLogoLight} />
27+
</>
28+
)}
29+
</>
30+
);
31+
32+
export default NodejsLogo;

‎components/Containers/NavBar/index.module.css‎

Lines changed: 0 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -33,19 +33,6 @@
3333
flex-1;
3434
}
3535

36-
.nodejsLogoDark {
37-
@apply h-6
38-
w-20
39-
dark:hidden;
40-
}
41-
42-
.nodejsLogoLight {
43-
@apply hidden
44-
h-6
45-
w-20
46-
dark:block;
47-
}
48-
4936
.navInteractionIcon {
5037
@apply size-6;
5138
}

‎components/Containers/NavBar/index.tsx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,9 @@ import LanguageDropdown from '@/components/Common/LanguageDropDown';
1010
import { SearchButton } from '@/components/Common/Search';
1111
import ThemeToggle from '@/components/Common/ThemeToggle';
1212
import NavItem from '@/components/Containers/NavBar/NavItem';
13-
import NodejsDark from '@/components/Icons/Logos/NodejsDark';
14-
import NodejsLight from '@/components/Icons/Logos/NodejsLight';
1513
import GitHub from '@/components/Icons/Social/GitHub';
1614
import Link from '@/components/Link';
15+
import WithNodejsLogo from '@/components/withNodejsLogo';
1716
import type { FormattedMessage } from '@/types';
1817

1918
import style from './index.module.css';
@@ -44,8 +43,7 @@ const NavBar: FC<NavbarProps> = ({
4443
<nav className={`${style.container}`}>
4544
<div className={style.nodeIconAndMobileItemsToggler}>
4645
<Link className={style.nodeIconWrapper} href="/" aria-label="Home">
47-
<NodejsDark className={style.nodejsLogoDark} />
48-
<NodejsLight className={style.nodejsLogoLight} />
46+
<WithNodejsLogo />
4947
</Link>
5048

5149
<Label.Root

‎components/Icons/Logos/NodejsDarkPride.tsx‎

Lines changed: 111 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
1+
import type { FC, SVGProps } from 'react';
2+
3+
const NodejsDarkPride: FC<SVGProps<SVGSVGElement>> = props => (
4+
<svg
5+
width="267"
6+
height="80"
7+
viewBox="0 0 267 80"
8+
fill="none"
9+
xmlns="http://www.w3.org/2000/svg"
10+
{...props}
11+
>
12+
<g clip-path="url(#clip0_12_17)">
13+
<mask
14+
id="mask0_12_17"
15+
style={{ maskType: 'luminance' }}
16+
maskUnits="userSpaceOnUse"
17+
x="0"
18+
y="0"
19+
width="267"
20+
height="80"
21+
>
22+
<path d="M266.96 0H0V79.988H266.96V0Z" fill="white" />
23+
</mask>
24+
<g mask="url(#mask0_12_17)">
25+
<path
26+
d="M234.948 78.743C234.257 78.743 233.613 78.5578 233.015 78.2336L226.895 74.576C225.974 74.0666 226.435 73.8814 226.711 73.7888C227.953 73.372 228.183 73.2794 229.471 72.5388C229.61 72.4461 229.794 72.4925 229.931 72.5851L234.625 75.4094C234.809 75.502 235.038 75.502 235.177 75.4094L253.537 64.7139C253.72 64.6213 253.814 64.4361 253.814 64.2048V42.8602C253.814 42.6288 253.72 42.4437 253.537 42.351L235.177 31.7021C234.993 31.6094 234.762 31.6094 234.625 31.7021L216.265 42.351C216.081 42.4437 215.989 42.675 215.989 42.8602V64.2048C215.989 64.39 216.081 64.6213 216.265 64.7139L221.28 67.6309C223.995 69.0198 225.698 67.3994 225.698 65.7788V44.7123C225.698 44.4346 225.928 44.1568 226.251 44.1568H228.598C228.874 44.1568 229.15 44.3882 229.15 44.7123V65.7788C229.15 69.4367 227.171 71.5664 223.719 71.5664C222.662 71.5664 221.834 71.5664 219.486 70.4091L214.655 67.6309C213.459 66.9364 212.722 65.64 212.722 64.2509V42.9066C212.722 41.5175 213.459 40.2212 214.655 39.5266L233.015 28.8314C234.165 28.1832 235.729 28.1832 236.88 28.8314L255.239 39.5266C256.435 40.2212 257.171 41.5175 257.171 42.9066V64.2509C257.171 65.64 256.435 66.9364 255.239 67.6309L236.88 78.3261C236.328 78.5578 235.637 78.743 234.948 78.743Z"
27+
fill="#5FA04E"
28+
/>
29+
<path
30+
d="M240.653 64.0652C232.6 64.0652 230.943 60.3612 230.943 57.2128C230.943 56.935 231.173 56.6572 231.495 56.6572H233.888C234.165 56.6572 234.394 56.8425 234.394 57.1202C234.762 59.574 235.821 60.778 240.699 60.778C244.564 60.778 246.221 59.8983 246.221 57.8148C246.221 56.611 245.759 55.7313 239.732 55.1293C234.717 54.6199 231.587 53.5087 231.587 49.4805C231.587 45.7304 234.717 43.5078 239.962 43.5078C245.853 43.5078 248.751 45.5451 249.119 49.99C249.119 50.129 249.074 50.2678 248.983 50.4067C248.888 50.4993 248.751 50.5919 248.611 50.5919H246.173C245.945 50.5919 245.714 50.4067 245.668 50.1751C245.115 47.6286 243.688 46.7953 239.916 46.7953C235.682 46.7953 235.177 48.2769 235.177 49.388C235.177 50.7306 235.774 51.1475 241.48 51.8883C247.14 52.629 249.81 53.6939 249.81 57.6757C249.81 61.7501 246.45 64.0652 240.653 64.0652Z"
31+
fill="#5FA04E"
32+
/>
33+
<path
34+
d="M267.16 41.6557C267.16 43.6005 265.548 45.221 263.615 45.221C261.683 45.221 260.072 43.6466 260.072 41.6557C260.072 39.6187 261.729 38.0908 263.615 38.0908C265.503 38.0908 267.16 39.6648 267.16 41.6557ZM260.625 41.6557C260.625 43.3227 261.96 44.6654 263.569 44.6654C265.227 44.6654 266.561 43.2763 266.561 41.6557C266.561 39.989 265.227 38.6927 263.569 38.6927C262.006 38.6927 260.625 39.989 260.625 41.6557ZM262.282 39.6648H263.663C264.123 39.6648 265.044 39.6648 265.044 40.7298C265.044 41.4706 264.581 41.6096 264.304 41.7021C264.859 41.7484 264.904 42.119 264.949 42.6281C264.996 42.9523 265.044 43.5078 265.135 43.693H264.304C264.304 43.5078 264.168 42.4894 264.168 42.443C264.123 42.2116 264.031 42.119 263.755 42.119H263.064V43.7393H262.282V39.6648ZM263.017 41.4244H263.615C264.123 41.4244 264.213 41.0541 264.213 40.8688C264.213 40.3133 263.845 40.3133 263.615 40.3133H262.973V41.4244H263.017Z"
35+
fill="#5FA04E"
36+
/>
37+
<path
38+
fill-rule="evenodd"
39+
clip-rule="evenodd"
40+
d="M43.6671 41.9478C43.6671 41.1144 43.2071 40.3275 42.4709 39.9107L23.007 28.5671C22.6849 28.3819 22.3167 28.2893 21.9486 28.2432C21.9026 28.2432 21.7647 28.2432 21.7647 28.2432C21.3965 28.2432 21.0284 28.3819 20.7063 28.5671L1.19636 39.8643C0.46014 40.2811 0 41.0684 0 41.9478L0.046014 72.3209C0.046014 72.7377 0.276084 73.1542 0.644196 73.3394C1.0123 73.5711 1.47245 73.5711 1.79455 73.3394L13.3901 66.6722C14.1263 66.2556 14.5864 65.4685 14.5864 64.6351V50.4208C14.5864 49.5875 15.0465 48.8002 15.7828 48.3837L20.7063 45.5131C21.0744 45.2814 21.4885 45.1888 21.9026 45.1888C22.3167 45.1888 22.7309 45.2814 23.053 45.5131L27.9764 48.3837C28.7126 48.8002 29.1729 49.5875 29.1729 50.4208V64.6351C29.1729 65.4685 29.6331 66.2556 30.3692 66.6722L41.8728 73.3394C42.2408 73.5711 42.7009 73.5711 43.0691 73.3394C43.4373 73.1542 43.6671 72.7377 43.6671 72.3209V41.9478Z"
41+
fill="#333333"
42+
/>
43+
<path
44+
fill-rule="evenodd"
45+
clip-rule="evenodd"
46+
d="M137.444 0.138901C137.076 -0.0463003 136.616 -0.0463003 136.293 0.138901C135.925 0.370401 135.696 0.740804 135.696 1.15751V31.2526C135.696 31.5304 135.557 31.8081 135.281 31.9936C135.005 32.1324 134.729 32.1324 134.453 31.9936L129.576 29.1691C128.84 28.7526 127.965 28.7526 127.229 29.1691L107.719 40.5127C106.983 40.9295 106.523 41.7165 106.523 42.5498V65.1906C106.523 66.0243 106.983 66.8112 107.719 67.228L127.229 78.5716C127.965 78.9882 128.84 78.9882 129.576 78.5716L149.086 67.228C149.822 66.8112 150.282 66.0243 150.282 65.1906V8.75077C150.282 7.87104 149.822 7.08394 149.086 6.66724L137.444 0.138901ZM135.65 57.7365C135.65 57.9678 135.557 58.153 135.374 58.2457L128.701 62.1351C128.517 62.2277 128.287 62.2277 128.103 62.1351L121.431 58.2457C121.247 58.153 121.155 57.9216 121.155 57.7365V49.9581C121.155 49.7265 121.247 49.5413 121.431 49.4487L128.103 45.5595C128.287 45.4669 128.517 45.4669 128.701 45.5595L135.374 49.4487C135.557 49.5413 135.65 49.7729 135.65 49.9581V57.7365Z"
47+
fill="#333333"
48+
/>
49+
<path
50+
fill-rule="evenodd"
51+
clip-rule="evenodd"
52+
d="M202.367 49.7725C203.105 49.3557 203.518 48.5688 203.518 47.7352V42.2255C203.518 41.3922 203.059 40.605 202.367 40.1885L182.996 28.8912C182.26 28.4744 181.386 28.4744 180.649 28.8912L161.14 40.2346C160.403 40.6514 159.943 41.4385 159.943 42.2719V64.9128C159.943 65.7461 160.403 66.5333 161.14 66.9498L180.511 78.0619C181.248 78.4786 182.122 78.4786 182.812 78.0619L194.546 71.4875C194.914 71.3023 195.144 70.8855 195.144 70.4686C195.144 70.0521 194.914 69.6354 194.546 69.4501L174.944 58.1064C174.576 57.8751 174.346 57.5048 174.346 57.088V50.0041C174.346 49.5873 174.576 49.1705 174.944 48.9853L181.064 45.4666C181.432 45.2352 181.892 45.2352 182.26 45.4666L188.38 48.9853C188.748 49.217 188.977 49.5873 188.977 50.0041V55.56C188.977 55.9768 189.208 56.3933 189.577 56.5786C189.944 56.8102 190.404 56.8102 190.772 56.5786L202.367 49.7725Z"
53+
fill="#333333"
54+
/>
55+
<path
56+
fill-rule="evenodd"
57+
clip-rule="evenodd"
58+
d="M181.524 48.7082C181.661 48.6155 181.846 48.6155 181.985 48.7082L185.711 50.8843C185.849 50.9768 185.941 51.1158 185.941 51.301V55.6532C185.941 55.8384 185.849 55.9774 185.711 56.07L181.985 58.2461C181.846 58.3387 181.661 58.3387 181.524 58.2461L177.797 56.07C177.659 55.9774 177.567 55.8384 177.567 55.6532V51.301C177.567 51.1158 177.659 50.9768 177.797 50.8843L181.524 48.7082Z"
59+
fill="#5FA04E"
60+
/>
61+
<mask
62+
id="mask1_12_17"
63+
style={{ maskType: 'alpha' }}
64+
maskUnits="userSpaceOnUse"
65+
x="53"
66+
y="28"
67+
width="44"
68+
height="51"
69+
>
70+
<path
71+
d="M76.2211 28.9482C75.4847 28.5316 74.6105 28.5316 73.8743 28.9482L54.5024 40.1993C53.7662 40.616 53.3521 41.4029 53.3521 42.2366V64.7846C53.3521 65.6181 53.8122 66.405 54.5024 66.8219L73.8743 78.0729C74.6105 78.4894 75.4847 78.4894 76.2211 78.0729L95.5929 66.8219C96.3288 66.405 96.7431 65.6181 96.7431 64.7846V42.2366C96.7431 41.4029 96.2832 40.616 95.5929 40.1993L76.2211 28.9482Z"
72+
fill="white"
73+
/>
74+
</mask>
75+
<g mask="url(#mask1_12_17)">
76+
<path
77+
d="M103.17 53.5459H53.4209V61.8043H103.17V53.5459Z"
78+
fill="#008026"
79+
/>
80+
<path
81+
d="M103.17 61.8042H53.4209V70.1621H103.17V61.8042Z"
82+
fill="#004DFF"
83+
/>
84+
<path
85+
d="M103.17 37.0293H53.4209V45.2877H103.17V37.0293Z"
86+
fill="#FF8C00"
87+
/>
88+
<path
89+
d="M103.17 45.2876H53.4209V53.546H103.17V45.2876Z"
90+
fill="#FFED00"
91+
/>
92+
<path
93+
d="M103.17 28.6714H53.4209V37.0293H103.17V28.6714Z"
94+
fill="#E40303"
95+
/>
96+
<path
97+
d="M103.17 70.1626H53.4209V78.421H103.17V70.1626Z"
98+
fill="#750787"
99+
/>
100+
</g>
101+
</g>
102+
</g>
103+
<defs>
104+
<clipPath id="clip0_12_17">
105+
<rect width="267" height="79.988" fill="white" />
106+
</clipPath>
107+
</defs>
108+
</svg>
109+
);
110+
111+
export default NodejsDarkPride;

0 commit comments

Comments
 (0)