Harmony: Footer

src/harmony/Footer/Footer.module.css

@@ -0,0 +1,15 @@
+.Footer {
+    display: grid;
+    grid-template-columns: 1fr 6fr 0fr;
+    align-items: center;
+    padding: 20px 40px;
+    color: var(--text-secondary);
+}
+
+.FooterMenu {
+    display: flex;
+}
+
+.FooterItem {
+    padding: 0px var(--gap-s);
+}

src/harmony/Footer/Footer.stories.tsx

@@ -0,0 +1,28 @@
+import type { Meta, StoryFn } from '@storybook/react';
+import React from 'react';
+
+import { SheepLogo } from '../SheepLogo/SheepLogo';
+
+import { Footer, FooterCopyright, FooterMenu, FooterItem } from './Footer';
+
+const meta: Meta<typeof Footer> = {
+    title: '@harmony/Footer',
+    component: Footer,
+};
+
+export default meta;
+
+export const Default: StoryFn<typeof Footer> = () => {
+    return (
+        <Footer>
+            <FooterCopyright />
+            <FooterMenu>
+                <FooterItem>Apple</FooterItem>
+                <FooterItem>Tomato</FooterItem>
+                <FooterItem>Banana</FooterItem>
+                <FooterItem>About us</FooterItem>
+            </FooterMenu>
+            <SheepLogo />
+        </Footer>
+    );
+};

src/harmony/Footer/Footer.tsx

@@ -0,0 +1,28 @@
+import React, { FC, HTMLAttributes } from 'react';
+import cn from 'classnames';
+
+import { Text } from '../Text/Text';
+
+import s from './Footer.module.css';
+
+export const Footer: FC<HTMLAttributes<HTMLDivElement>> = ({ className, children, ...props }) => (
+    <footer className={cn(s.Footer, className)} {...props}>
+        {children}
+    </footer>
+);
+
+export const FooterCopyright: FC<HTMLAttributes<HTMLDivElement>> = ({ className, ...props }) => (
+    <Text className={className} {...props}>{`© ${new Date().getFullYear()} Taskany, Inc.`}</Text>
+);
+
+export const FooterMenu: FC<HTMLAttributes<HTMLDivElement>> = ({ className, children, ...props }) => (
+    <div className={cn(s.FooterMenu, className)} {...props}>
+        {children}
+    </div>
+);
+
+export const FooterItem: FC<HTMLAttributes<HTMLDivElement>> = ({ className, children, ...props }) => (
+    <div className={cn(s.FooterItem, className)} {...props}>
+        {children}
+    </div>
+);

src/harmony/SheepLogo/SheepLogo.stories.ts

@@ -0,0 +1,15 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { SheepLogo } from './SheepLogo';
+
+const meta: Meta<typeof SheepLogo> = {
+    title: '@harmony/SheepLogo',
+    component: SheepLogo,
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    args: {},
+};

src/harmony/SheepLogo/SheepLogo.tsx

@@ -0,0 +1,71 @@
+import React from 'react';
+
+export const SheepLogo: React.FC = () => {
+    return (
+        <svg width="32" height="32" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M25.407 19.633h-3.714v7.815h3.714v-7.815Z" fill="#EAB67D" />
+            <path d="M24.914 20.126v6.828h-2.727v-6.828h2.727Zm.987-.987H21.2v8.802h4.701v-8.802Z" fill="#1A1A1A" />
+            <path d="M26.96 19.633h-3.715v7.815h3.714v-7.815Z" fill="#F7D5A9" />
+            <path d="M26.466 20.126v6.828H23.74v-6.828h2.727Zm.987-.987h-4.701v8.802h4.701v-8.802Z" fill="#1A1A1A" />
+            <path d="M14.543 19.633h-3.715v7.815h3.715v-7.815Z" fill="#EAB67D" />
+            <path d="M14.05 20.126v6.828h-2.728v-6.828h2.727Zm.986-.987h-4.701v8.802h4.701v-8.802Z" fill="#1A1A1A" />
+            <path d="M16.095 19.633h-3.714v7.815h3.714v-7.815Z" fill="#F7D5A9" />
+            <path d="M15.601 20.126v6.828h-2.727v-6.828H15.6Zm.987-.987h-4.701v8.802h4.701v-8.802Z" fill="#1A1A1A" />
+            <path
+                d="M21.466 24.86a4.08 4.08 0 0 1-2.595-.938 4.083 4.083 0 0 1-2.587.932 4.072 4.072 0 0 1-3.772-2.564 4.076 4.076 0 0 1-3.708-2.026 4.06 4.06 0 0 1-.012-4.042 4.062 4.062 0 0 1-1.365-3.796 4.082 4.082 0 0 1 2.634-3.12 4.057 4.057 0 0 1 5.329-2.93 4.062 4.062 0 0 1 7.009.008 4.063 4.063 0 0 1 5.322 2.944 4.085 4.085 0 0 1 2.62 3.115 4.061 4.061 0 0 1-1.372 3.802 4.061 4.061 0 0 1-3.735 6.059 4.075 4.075 0 0 1-3.768 2.556Z"
+                fill="#fff"
+            />
+            <path
+                d="M18.892 4.866c1.467 0 2.727.885 3.275 2.15a3.576 3.576 0 0 1 3.884.462 3.554 3.554 0 0 1 1.238 2.23 3.567 3.567 0 0 1 1.017 6.419 3.567 3.567 0 0 1-3.41 5.647 3.562 3.562 0 0 1-3.43 2.592 3.578 3.578 0 0 1-2.594-1.117 3.58 3.58 0 0 1-2.588 1.112 3.562 3.562 0 0 1-3.432-2.6 3.565 3.565 0 0 1-3.621-1.744 3.568 3.568 0 0 1 .225-3.912 3.568 3.568 0 0 1 1.036-6.418 3.557 3.557 0 0 1 1.237-2.221 3.553 3.553 0 0 1 2.29-.835c.552 0 1.102.128 1.602.378a3.568 3.568 0 0 1 3.27-2.143Zm0-.987c-1.494 0-2.87.73-3.713 1.916a4.558 4.558 0 0 0-5.534 3.143 4.575 4.575 0 0 0-1.558 1.093 4.554 4.554 0 0 0 .095 6.296 4.554 4.554 0 0 0 4.01 6.457 4.57 4.57 0 0 0 2.535 2.287 4.534 4.534 0 0 0 1.557.275 4.58 4.58 0 0 0 2.587-.807 4.576 4.576 0 0 0 2.595.813c.53 0 1.055-.092 1.557-.275a4.572 4.572 0 0 0 2.531-2.276 4.554 4.554 0 0 0 4.026-6.448 4.553 4.553 0 0 0-1.441-7.392 4.558 4.558 0 0 0-5.527-3.158 4.557 4.557 0 0 0-3.72-1.924Z"
+                fill="#1A1A1A"
+            />
+            <path
+                d="M3.01 14.95c-.847 0-1.228-.351-1.399-.647-.169-.292-.345-.923.36-1.87.438-.587 1.124-1.167 1.93-1.632.968-.56 1.981-.88 2.78-.88.847 0 1.228.352 1.399.648.169.292.346.923-.36 1.87-.438.587-1.123 1.166-1.93 1.632-.969.559-1.982.88-2.78.88Z"
+                fill="#EAB67D"
+            />
+            <path
+                d="M6.681 10.415c.465 0 .815.13.972.4.385.668-.56 1.934-2.11 2.829-.922.532-1.85.813-2.533.813-.465 0-.815-.13-.971-.4-.385-.667.56-1.933 2.11-2.828.922-.533 1.85-.814 2.532-.814Zm0-.987c-.882 0-1.985.344-3.026.946-.863.498-1.601 1.125-2.078 1.764-.876 1.174-.622 2.015-.393 2.412.193.334.687.894 1.826.894.883 0 1.986-.344 3.026-.945.863-.498 1.602-1.125 2.078-1.765.876-1.173.622-2.015.393-2.412-.193-.334-.686-.894-1.826-.894Z"
+                fill="#1A1A1A"
+            />
+            <path
+                d="M16.77 14.95c-.798 0-1.812-.32-2.78-.879-.806-.465-1.492-1.045-1.93-1.632-.706-.947-.529-1.578-.36-1.87.17-.296.552-.648 1.399-.648.798 0 1.812.32 2.78.88.806.465 1.492 1.045 1.93 1.631.706.948.528 1.58.36 1.871-.17.296-.552.648-1.399.648Z"
+                fill="#EAB67D"
+            />
+            <path
+                d="M13.099 10.415c.682 0 1.611.281 2.533.814 1.55.895 2.495 2.161 2.11 2.828-.157.27-.507.4-.972.4-.683 0-1.611-.28-2.533-.813-1.55-.895-2.495-2.162-2.11-2.828.157-.271.507-.401.972-.401Zm0-.987c-1.14 0-1.633.56-1.826.894-.23.397-.483 1.239.393 2.412.476.64 1.215 1.266 2.078 1.765 1.041.601 2.143.945 3.026.945 1.14 0 1.633-.56 1.826-.894.229-.397.483-1.238-.393-2.412-.477-.64-1.215-1.265-2.078-1.764-1.04-.602-2.144-.946-3.026-.946Z"
+                fill="#1A1A1A"
+            />
+            <path
+                opacity=".2"
+                d="M16.619 9.52c-.94-.544-1.931-.902-2.83-1.027a6.226 6.226 0 0 0-1.928-1.13c-.044.034-.09.067-.133.104a3.555 3.555 0 0 0-1.237 2.221 3.569 3.569 0 0 0-1.035 6.418 3.568 3.568 0 0 0 1.593 5.46c2.4-.498 4.374-2.513 5.052-5.182.23.031.454.047.67.047 1.696 0 2.438-.97 2.679-1.387.283-.489.803-1.808-.456-3.496-.555-.744-1.399-1.465-2.375-2.029Z"
+                fill="#1A1A1A"
+            />
+            <path
+                d="M9.89 20.206c2.752 0 4.983-2.622 4.983-5.856s-2.23-5.856-4.983-5.856c-2.752 0-4.983 2.622-4.983 5.856s2.23 5.856 4.983 5.856Z"
+                fill="#F7D5A9"
+            />
+            <path
+                d="M9.89 8.987c2.48 0 4.49 2.402 4.49 5.364 0 2.961-2.01 5.363-4.49 5.363-2.48 0-4.49-2.402-4.49-5.364 0-2.962 2.01-5.363 4.49-5.363Zm0-.986c-1.496 0-2.892.683-3.931 1.924-.996 1.19-1.545 2.762-1.545 4.426 0 1.663.549 3.235 1.545 4.425 1.039 1.24 2.435 1.925 3.931 1.925s2.893-.684 3.931-1.925c.997-1.19 1.545-2.762 1.545-4.425 0-1.664-.548-3.236-1.545-4.426-1.038-1.241-2.435-1.924-3.931-1.924Z"
+                fill="#1A1A1A"
+            />
+            <path
+                opacity=".2"
+                d="M15.24 8.486a3.4 3.4 0 0 0-2.828-.733 3.397 3.397 0 0 0-5.284-.006 3.402 3.402 0 0 0-4.037 3.038c-.08.904.198 1.785.781 2.48a3.393 3.393 0 0 0 2.605 1.214 3.403 3.403 0 0 0 2.638-1.256 3.422 3.422 0 0 0 1.297.002 3.403 3.403 0 0 0 2.643 1.262 3.393 3.393 0 0 0 2.604-1.214 3.401 3.401 0 0 0-.418-4.787Z"
+                fill="#1A1A1A"
+            />
+            <path
+                d="M13.055 13.007a2.903 2.903 0 0 1-2.438-1.328 2.885 2.885 0 0 1-.849.127c-.294 0-.58-.043-.855-.128a2.909 2.909 0 0 1-4.661.284 2.886 2.886 0 0 1-.669-2.12A2.905 2.905 0 0 1 7.332 7.32a2.905 2.905 0 0 1 4.876.005 2.905 2.905 0 1 1 .847 5.682Z"
+                fill="#fff"
+            />
+            <path
+                d="M9.767 6.49c.992 0 1.844.598 2.214 1.454a2.42 2.42 0 0 1 2.626.311 2.412 2.412 0 1 1-3.763 2.804 2.404 2.404 0 0 1-2.156-.002 2.4 2.4 0 0 1-.662.885 2.408 2.408 0 0 1-3.397-.297 2.411 2.411 0 0 1 2.927-3.706 2.413 2.413 0 0 1 2.211-1.45Zm0-.987a3.4 3.4 0 0 0-2.639 1.258 3.402 3.402 0 0 0-2.836.731 3.402 3.402 0 0 0-.419 4.787 3.393 3.393 0 0 0 2.604 1.214 3.403 3.403 0 0 0 2.639-1.256 3.422 3.422 0 0 0 1.297.002 3.403 3.403 0 0 0 2.643 1.262 3.393 3.393 0 0 0 2.604-1.214 3.402 3.402 0 0 0-.419-4.788 3.4 3.4 0 0 0-2.829-.733 3.399 3.399 0 0 0-2.645-1.263ZM7.957 15.338a.493.493 0 1 0 0-.986.493.493 0 0 0 0 .986ZM11.575 15.338a.493.493 0 1 0 0-.986.493.493 0 0 0 0 .986Z"
+                fill="#1A1A1A"
+            />
+            <path
+                opacity=".2"
+                d="M15.602 25.967h-4.28v.987h4.28v-.987ZM26.456 25.967h-4.28v.987h4.28v-.987Z"
+                fill="#1A1A1A"
+            />
+        </svg>
+    );
+};

src/harmony/index.ts

@@ -14,6 +14,7 @@ export * from './Dot/Dot';
 export * from './Dropdown/Dropdown';
 export * from './Fieldset/Fieldset';
 export * from './FlatProgressBar/FlatProgressBar';
+export * from './Footer/Footer';
 export * from './FormControl/FormControl';
 export * from './FormEditor/FormEditor';
 export * from './GlobalSearch/GlobalSearch';
@@ -28,6 +29,7 @@ export * from './OfflineBanner/OfflineBanner';
 export * from './Popup/Popup';
 export * from './Radio/Radio';
 export * from './RadioGroup/RadioGroup';
+export * from './SheepLogo/SheepLogo';
 export * from './Spinner/Spinner';
 export * from './State/State';
 export * from './StateGroup/StateGroup';