Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

OPHJOD-1194: Add NavigationBar and logos #211

Merged
merged 1 commit into from
Jan 20, 2025
Merged

OPHJOD-1194: Add NavigationBar and logos #211

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion lib/components/Footer/Footer.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/react';
import { Footer, type FooterProps } from './Footer';

const meta = {
title: 'Footer',
title: 'Layout/Footer',
component: Footer,
tags: ['autodocs'],
} satisfies Meta<typeof Footer>;
Expand Down
41 changes: 41 additions & 0 deletions lib/components/Logo/LogoArrow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
import { LogoProps } from './types';

interface LogoArrowProps extends LogoProps {
fill: string;
}

const Arrow = ({ size, fill }: LogoArrowProps) => (
<svg height={size} viewBox="0 0 56 64" version="1.1" xmlns="http://www.w3.org/2000/svg">
<g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
<g transform="translate(-36.000000, -32.000000)" fill={fill} fillRule="nonzero">
<g transform="translate(36.570318, 32.000000)">
<path d="M13.0631425,22.6308563 L29.2973317,31.998485 L13.0631425,41.3721764 L13.0631425,22.6308563 Z M0,0 L0,64 L55.4296823,31.998485 L0,0 Z"></path>
</g>
</g>
</g>
</svg>
);

export const LogoArrowBlack = ({ size }: LogoArrowProps) => {
return <Arrow fill="#000" size={size} />;
};

export const LogoArrowOrange = ({ size }: LogoArrowProps) => {
return <Arrow fill="#EE7C45" size={size} />;
};

export const LogoArrowPink = ({ size }: LogoArrowProps) => {
return <Arrow fill="#CD4EB3" size={size} />;
};

export const LogoArrowBlue = ({ size }: LogoArrowProps) => {
return <Arrow fill="#339DDF" size={size} />;
};

export const LogoArrowTurquoise = ({ size }: LogoArrowProps) => {
return <Arrow fill="#00A8B3" size={size} />;
};

export const LogoArrowWhite = ({ size }: LogoArrowProps) => {
return <Arrow fill="#fff" size={size} />;
};
94 changes: 94 additions & 0 deletions lib/components/Logo/LogoEn.tsx
View file
Open in desktop

Large diffs are not rendered by default.

148 changes: 148 additions & 0 deletions lib/components/Logo/LogoFi.tsx
View file
Open in desktop

Large diffs are not rendered by default.

76 changes: 76 additions & 0 deletions lib/components/Logo/LogoIcon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,76 @@
import { LogoProps } from './types';

export const LogoIconBlack = ({ size }: LogoProps) => (
<svg height={size} viewBox="0 0 57 64" version="1.1" xmlns="http://www.w3.org/2000/svg">
<g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
<g transform="translate(-95.000000, -12.000000)" fill="#000000" fillRule="nonzero">
<g transform="translate(95.000000, 12.000000)">
<path d="M39.2650408,46.0628643 L39.2650408,41.0985226 C39.2650408,39.371174 39.042547,37.6936942 38.5809365,36.0835796 C36.6883165,37.2736129 35.3182765,39.1828559 34.8141789,41.3865784 L34.8141789,46.0673158 L34.8141789,46.0673158 C34.8167427,54.38256 41.5824474,61.1469123 49.8982268,61.1469123 L49.8982268,56.6960785 C44.0353168,56.6960785 39.2650409,51.9257743 39.2650409,46.0628643 L39.2650408,46.0628643 Z"></path>
<path d="M10.7212313,34.7504763 C11.9540616,34.080262 13.3286095,33.724982 14.7581821,33.724982 C15.446907,33.724982 16.1153181,33.8094772 16.7569635,33.9650284 C17.1543926,32.511423 17.6833965,31.1127296 18.3296625,29.7795982 C17.1945694,29.4527743 15.9971544,29.2741482 14.7581821,29.2741482 C12.1395623,29.2741482 9.63921888,30.0548345 7.49077466,31.5193153 L3.81200587,27.8397295 L0.0494180377,41.8814629 L14.0893202,38.1193259 L10.7212313,34.7504763 L10.7212313,34.7504763 Z M4.24592092,37.6849601 L5.34824708,33.5724735 L8.35747773,36.5831129 L4.24592092,37.6849601 Z"></path>
<path d="M11.9812781,23.0316153 L16.8438254,23.9325222 L16.8383314,23.9611474 C23.8866823,25.3132121 28.7252813,28.4512282 31.5964853,32.1570445 C32.6397296,31.0833436 33.865319,30.1887197 35.225667,29.5263097 C31.5417986,24.7691631 25.5558224,21.2064168 18.1335681,19.6869676 L18.1411471,19.6460864 L12.7925056,18.6551058 L13.7024283,13.7460142 L-3.27994004e-15,18.5980243 L11.0532392,28.038416 L11.9812781,23.0316153 L11.9812781,23.0316153 Z M9.07155966,22.4441494 L5.83521461,19.6795576 L9.84799175,18.2587191 L9.07155971,22.4441494 L9.07155966,22.4441494 Z"></path>
<path d="M26.4642238,16.973597 C26.4642238,18.1807322 26.2744969,19.3642853 25.9139764,20.4901653 C27.9902939,21.3865925 29.8824351,22.474606 31.5603938,23.7246509 C34.5409428,21.9571818 38.0131364,20.936139 41.723038,20.9360827 L41.723038,25.5336209 L54.3120675,18.2655655 L41.723038,10.9975101 L41.723038,16.4847699 C37.7883323,16.4847699 34.0710209,17.4241631 30.7742697,19.0813291 C30.8661185,18.386603 30.9155083,17.6831147 30.9155083,16.973597 C30.9155083,14.8161087 30.4886651,12.727338 29.6552924,10.75721 L34.3832221,8.75076509 L22.7732554,1.63997002e-15 L21.0020673,14.4294987 L25.5588371,12.4956876 C26.1575728,13.913117 26.4642237,15.4177182 26.4642237,16.973597 L26.4642238,16.973597 Z M44.6902605,16.1370687 L48.3771435,18.2655655 L44.6902605,20.394034 L44.6902605,16.1370687 L44.6902605,16.1370687 Z M25.0928596,5.46407227 L28.4926166,8.02693482 L24.5739985,9.69013014 L25.0928595,5.46407227 L25.0928596,5.46407227 Z"></path>
<path d="M25.826213,28.8199193 C24.6241773,28.0614908 23.2813538,27.3792178 21.8014335,26.788371 C18.9463735,30.7877652 17.2573422,35.672514 17.2573422,40.9501276 L17.2577648,40.9501276 L17.2577648,46.0628643 L17.2575676,46.0628643 C17.2575676,51.9257743 12.4872916,56.6960785 6.6243816,56.6960785 L6.6243816,61.1469123 C14.9401892,61.1469123 21.7058939,54.3825882 21.7083169,46.067344 L21.7085986,46.067344 L21.7085986,40.9499304 L21.7082042,40.9499304 C21.7082606,36.3902023 23.2481644,32.1882336 25.826213,28.8199193 L25.826213,28.8199193 Z"></path>
<path d="M27.6924616,41.881463 L27.6848827,41.881463 C27.6096005,38.8730775 26.5008787,36.1197274 24.7018824,33.9571678 C23.7684904,36.1932346 23.2311751,38.6282132 23.176263,41.1753825 C23.2173414,41.5142087 23.2413461,41.8581063 23.2413461,42.2075542 L23.2416278,42.2075542 L23.2416278,50.0995051 L23.2417405,50.0995051 C23.2416278,54.1449083 21.7331103,58.0106992 18.9944672,60.9847681 L22.2691296,64 C25.7667647,60.201856 27.6926024,55.264928 27.6926024,50.0990543 L27.6924615,50.0990543 L27.6924615,41.8814629 L27.6924616,41.881463 Z"></path>
<path d="M49.1800596,31.5195407 C47.0313054,30.0550881 44.5313847,29.2744299 41.912793,29.2744299 C34.8899118,29.2744299 29.1610841,34.90028 28.9867404,41.8814629 L28.9782881,41.8814629 L28.9782881,42.2056102 C28.9782881,42.2063427 28.9782881,42.2071035 28.9782881,42.207836 L28.9782881,42.207836 L28.9782881,50.0990544 L28.9782881,50.0990544 C28.9782881,55.2649281 30.9045766,60.201856 34.4017328,64 L37.6763951,60.9847682 C34.9377802,58.0106992 33.4292346,54.1449084 33.4291218,50.0995052 L33.4293472,50.0995052 L33.4293472,42.2072725 C33.429629,37.530085 37.235042,33.7252637 41.912793,33.7252637 C43.3422811,33.7252637 44.7167445,34.0802338 45.9495466,34.7504763 L42.5815141,38.1189597 L56.6218669,41.8815475 L52.8592791,27.8398141 L49.1800596,31.5195408 L49.1800596,31.5195407 Z M48.3133565,36.5831975 L51.3235169,33.5725581 L52.4253641,37.6850447 L48.3133565,36.5831975 L48.3133565,36.5831975 Z"></path>
</g>
</g>
</g>
</svg>
);

export const LogoIconRgb = ({ size }: LogoProps) => (
<svg height={size} viewBox="0 0 57 64" version="1.1" xmlns="http://www.w3.org/2000/svg">
<g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
<g transform="translate(-100.000000, -96.000000)" fillRule="nonzero">
<g transform="translate(100.000000, 96.000000)">
<path
d="M39.2650408,46.0628643 L39.2650408,41.0985226 C39.2650408,39.371174 39.042547,37.6936942 38.5809365,36.0835796 C36.6883165,37.2736129 35.3182765,39.1828559 34.8141789,41.3865784 L34.8141789,46.0673158 L34.8141789,46.0673158 C34.8167427,54.38256 41.5824474,61.1469123 49.8982268,61.1469123 L49.8982268,56.6960785 C44.0353168,56.6960785 39.2650409,51.9257743 39.2650409,46.0628643 L39.2650408,46.0628643 Z"
fill="#ED7D45"
></path>
<path
d="M10.7212313,34.7504763 C11.9540616,34.080262 13.3286095,33.724982 14.7581821,33.724982 C15.446907,33.724982 16.1153181,33.8094772 16.7569635,33.9650284 C17.1543926,32.511423 17.6833965,31.1127296 18.3296625,29.7795982 C17.1945694,29.4527743 15.9971544,29.2741482 14.7581821,29.2741482 C12.1395623,29.2741482 9.63921888,30.0548345 7.49077466,31.5193153 L3.81200587,27.8397295 L0.0494180377,41.8814629 L14.0893202,38.1193259 L10.7212313,34.7504763 L10.7212313,34.7504763 Z M4.24592092,37.6849601 L5.34824708,33.5724735 L8.35747773,36.5831129 L4.24592092,37.6849601 Z"
fill="#00A8B3"
></path>
<path
d="M11.9812781,23.0316153 L16.8438254,23.9325222 L16.8383314,23.9611474 C23.8866823,25.3132121 28.7252813,28.4512282 31.5964853,32.1570445 C32.6397296,31.0833436 33.865319,30.1887197 35.225667,29.5263097 C31.5417986,24.7691631 25.5558224,21.2064168 18.1335681,19.6869676 L18.1411471,19.6460864 L12.7925056,18.6551058 L13.7024283,13.7460142 L-3.27994004e-15,18.5980243 L11.0532392,28.038416 L11.9812781,23.0316153 L11.9812781,23.0316153 Z M9.07155966,22.4441494 L5.83521461,19.6795576 L9.84799175,18.2587191 L9.07155971,22.4441494 L9.07155966,22.4441494 Z"
fill="#ED7D45"
></path>
<path
d="M26.4642238,16.973597 C26.4642238,18.1807322 26.2744969,19.3642853 25.9139764,20.4901653 C27.9902939,21.3865925 29.8824351,22.474606 31.5603938,23.7246509 C34.5409428,21.9571818 38.0131364,20.936139 41.723038,20.9360827 L41.723038,25.5336209 L54.3120675,18.2655655 L41.723038,10.9975101 L41.723038,16.4847699 C37.7883323,16.4847699 34.0710209,17.4241631 30.7742697,19.0813291 C30.8661185,18.386603 30.9155083,17.6831147 30.9155083,16.973597 C30.9155083,14.8161087 30.4886651,12.727338 29.6552924,10.75721 L34.3832221,8.75076509 L22.7732554,1.63997002e-15 L21.0020673,14.4294987 L25.5588371,12.4956876 C26.1575728,13.913117 26.4642237,15.4177182 26.4642237,16.973597 L26.4642238,16.973597 Z M44.6902605,16.1370687 L48.3771435,18.2655655 L44.6902605,20.394034 L44.6902605,16.1370687 L44.6902605,16.1370687 Z M25.0928596,5.46407227 L28.4926166,8.02693482 L24.5739985,9.69013014 L25.0928595,5.46407227 L25.0928596,5.46407227 Z"
fill="#CD4EB3"
></path>
<path
d="M25.826213,28.8199193 C24.6241773,28.0614908 23.2813538,27.3792178 21.8014335,26.788371 C18.9463735,30.7877652 17.2573422,35.672514 17.2573422,40.9501276 L17.2577648,40.9501276 L17.2577648,46.0628643 L17.2575676,46.0628643 C17.2575676,51.9257743 12.4872916,56.6960785 6.6243816,56.6960785 L6.6243816,61.1469123 C14.9401892,61.1469123 21.7058939,54.3825882 21.7083169,46.067344 L21.7085986,46.067344 L21.7085986,40.9499304 L21.7082042,40.9499304 C21.7082606,36.3902023 23.2481644,32.1882336 25.826213,28.8199193 L25.826213,28.8199193 Z"
fill="#CD4EB3"
></path>
<path
d="M27.6924616,41.881463 L27.6848827,41.881463 C27.6096005,38.8730775 26.5008787,36.1197274 24.7018824,33.9571678 C23.7684904,36.1932346 23.2311751,38.6282132 23.176263,41.1753825 C23.2173414,41.5142087 23.2413461,41.8581063 23.2413461,42.2075542 L23.2416278,42.2075542 L23.2416278,50.0995051 L23.2417405,50.0995051 C23.2416278,54.1449083 21.7331103,58.0106992 18.9944672,60.9847681 L22.2691296,64 C25.7667647,60.201856 27.6926024,55.264928 27.6926024,50.0990543 L27.6924615,50.0990543 L27.6924615,41.8814629 L27.6924616,41.881463 Z"
fill="#00A8B3"
></path>
<path
d="M49.1800596,31.5195407 C47.0313054,30.0550881 44.5313847,29.2744299 41.912793,29.2744299 C34.8899118,29.2744299 29.1610841,34.90028 28.9867404,41.8814629 L28.9782881,41.8814629 L28.9782881,42.2056102 C28.9782881,42.2063427 28.9782881,42.2071035 28.9782881,42.207836 L28.9782881,42.207836 L28.9782881,50.0990544 L28.9782881,50.0990544 C28.9782881,55.2649281 30.9045766,60.201856 34.4017328,64 L37.6763951,60.9847682 C34.9377802,58.0106992 33.4292346,54.1449084 33.4291218,50.0995052 L33.4293472,50.0995052 L33.4293472,42.2072725 C33.429629,37.530085 37.235042,33.7252637 41.912793,33.7252637 C43.3422811,33.7252637 44.7167445,34.0802338 45.9495466,34.7504763 L42.5815141,38.1189597 L56.6218669,41.8815475 L52.8592791,27.8398141 L49.1800596,31.5195408 L49.1800596,31.5195407 Z M48.3133565,36.5831975 L51.3235169,33.5725581 L52.4253641,37.6850447 L48.3133565,36.5831975 L48.3133565,36.5831975 Z"
fill="#339DDF"
></path>
</g>
</g>
</g>
</svg>
);

export const LogoIconWhite = ({ size }: LogoProps) => (
<svg height={size} viewBox="0 0 57 64" version="1.1" xmlns="http://www.w3.org/2000/svg">
<g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
<g transform="translate(-100.000000, -180.000000)" fill="#FFFFFF" fillRule="nonzero">
<g transform="translate(100.000000, 180.000000)">
<path d="M39.2650408,46.0628643 L39.2650408,41.0985226 C39.2650408,39.371174 39.042547,37.6936942 38.5809365,36.0835796 C36.6883165,37.2736129 35.3182765,39.1828559 34.8141789,41.3865784 L34.8141789,46.0673158 L34.8141789,46.0673158 C34.8167427,54.38256 41.5824474,61.1469123 49.8982268,61.1469123 L49.8982268,56.6960785 C44.0353168,56.6960785 39.2650409,51.9257743 39.2650409,46.0628643 L39.2650408,46.0628643 Z"></path>
<path d="M10.7212313,34.7504763 C11.9540616,34.080262 13.3286095,33.724982 14.7581821,33.724982 C15.446907,33.724982 16.1153181,33.8094772 16.7569635,33.9650284 C17.1543926,32.511423 17.6833965,31.1127296 18.3296625,29.7795982 C17.1945694,29.4527743 15.9971544,29.2741482 14.7581821,29.2741482 C12.1395623,29.2741482 9.63921888,30.0548345 7.49077466,31.5193153 L3.81200587,27.8397295 L0.0494180377,41.8814629 L14.0893202,38.1193259 L10.7212313,34.7504763 L10.7212313,34.7504763 Z M4.24592092,37.6849601 L5.34824708,33.5724735 L8.35747773,36.5831129 L4.24592092,37.6849601 Z"></path>
<path d="M11.9812781,23.0316153 L16.8438254,23.9325222 L16.8383314,23.9611474 C23.8866823,25.3132121 28.7252813,28.4512282 31.5964853,32.1570445 C32.6397296,31.0833436 33.865319,30.1887197 35.225667,29.5263097 C31.5417986,24.7691631 25.5558224,21.2064168 18.1335681,19.6869676 L18.1411471,19.6460864 L12.7925056,18.6551058 L13.7024283,13.7460142 L-3.27994004e-15,18.5980243 L11.0532392,28.038416 L11.9812781,23.0316153 L11.9812781,23.0316153 Z M9.07155966,22.4441494 L5.83521461,19.6795576 L9.84799175,18.2587191 L9.07155971,22.4441494 L9.07155966,22.4441494 Z"></path>
<path d="M26.4642238,16.973597 C26.4642238,18.1807322 26.2744969,19.3642853 25.9139764,20.4901653 C27.9902939,21.3865925 29.8824351,22.474606 31.5603938,23.7246509 C34.5409428,21.9571818 38.0131364,20.936139 41.723038,20.9360827 L41.723038,25.5336209 L54.3120675,18.2655655 L41.723038,10.9975101 L41.723038,16.4847699 C37.7883323,16.4847699 34.0710209,17.4241631 30.7742697,19.0813291 C30.8661185,18.386603 30.9155083,17.6831147 30.9155083,16.973597 C30.9155083,14.8161087 30.4886651,12.727338 29.6552924,10.75721 L34.3832221,8.75076509 L22.7732554,1.63997002e-15 L21.0020673,14.4294987 L25.5588371,12.4956876 C26.1575728,13.913117 26.4642237,15.4177182 26.4642237,16.973597 L26.4642238,16.973597 Z M44.6902605,16.1370687 L48.3771435,18.2655655 L44.6902605,20.394034 L44.6902605,16.1370687 L44.6902605,16.1370687 Z M25.0928596,5.46407227 L28.4926166,8.02693482 L24.5739985,9.69013014 L25.0928595,5.46407227 L25.0928596,5.46407227 Z"></path>
<path d="M25.826213,28.8199193 C24.6241773,28.0614908 23.2813538,27.3792178 21.8014335,26.788371 C18.9463735,30.7877652 17.2573422,35.672514 17.2573422,40.9501276 L17.2577648,40.9501276 L17.2577648,46.0628643 L17.2575676,46.0628643 C17.2575676,51.9257743 12.4872916,56.6960785 6.6243816,56.6960785 L6.6243816,61.1469123 C14.9401892,61.1469123 21.7058939,54.3825882 21.7083169,46.067344 L21.7085986,46.067344 L21.7085986,40.9499304 L21.7082042,40.9499304 C21.7082606,36.3902023 23.2481644,32.1882336 25.826213,28.8199193 L25.826213,28.8199193 Z"></path>
<path d="M27.6924616,41.881463 L27.6848827,41.881463 C27.6096005,38.8730775 26.5008787,36.1197274 24.7018824,33.9571678 C23.7684904,36.1932346 23.2311751,38.6282132 23.176263,41.1753825 C23.2173414,41.5142087 23.2413461,41.8581063 23.2413461,42.2075542 L23.2416278,42.2075542 L23.2416278,50.0995051 L23.2417405,50.0995051 C23.2416278,54.1449083 21.7331103,58.0106992 18.9944672,60.9847681 L22.2691296,64 C25.7667647,60.201856 27.6926024,55.264928 27.6926024,50.0990543 L27.6924615,50.0990543 L27.6924615,41.8814629 L27.6924616,41.881463 Z"></path>
<path d="M49.1800596,31.5195407 C47.0313054,30.0550881 44.5313847,29.2744299 41.912793,29.2744299 C34.8899118,29.2744299 29.1610841,34.90028 28.9867404,41.8814629 L28.9782881,41.8814629 L28.9782881,42.2056102 C28.9782881,42.2063427 28.9782881,42.2071035 28.9782881,42.207836 L28.9782881,42.207836 L28.9782881,50.0990544 L28.9782881,50.0990544 C28.9782881,55.2649281 30.9045766,60.201856 34.4017328,64 L37.6763951,60.9847682 C34.9377802,58.0106992 33.4292346,54.1449084 33.4291218,50.0995052 L33.4293472,50.0995052 L33.4293472,42.2072725 C33.429629,37.530085 37.235042,33.7252637 41.912793,33.7252637 C43.3422811,33.7252637 44.7167445,34.0802338 45.9495466,34.7504763 L42.5815141,38.1189597 L56.6218669,41.8815475 L52.8592791,27.8398141 L49.1800596,31.5195408 L49.1800596,31.5195407 Z M48.3133565,36.5831975 L51.3235169,33.5725581 L52.4253641,37.6850447 L48.3133565,36.5831975 L48.3133565,36.5831975 Z"></path>
</g>
</g>
</g>
</svg>
);
Loading
Loading