diff --git a/src/harmony/Footer/Footer.module.css b/src/harmony/Footer/Footer.module.css new file mode 100644 index 00000000..ba45ca49 --- /dev/null +++ b/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); +} \ No newline at end of file diff --git a/src/harmony/Footer/Footer.stories.tsx b/src/harmony/Footer/Footer.stories.tsx new file mode 100644 index 00000000..999cb9c1 --- /dev/null +++ b/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 = { + title: '@harmony/Footer', + component: Footer, +}; + +export default meta; + +export const Default: StoryFn = () => { + return ( +
+ + + Apple + Tomato + Banana + About us + + +
+ ); +}; diff --git a/src/harmony/Footer/Footer.tsx b/src/harmony/Footer/Footer.tsx new file mode 100644 index 00000000..a524cf03 --- /dev/null +++ b/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> = ({ className, children, ...props }) => ( +
+ {children} +
+); + +export const FooterCopyright: FC> = ({ className, ...props }) => ( + {`© ${new Date().getFullYear()} Taskany, Inc.`} +); + +export const FooterMenu: FC> = ({ className, children, ...props }) => ( +
+ {children} +
+); + +export const FooterItem: FC> = ({ className, children, ...props }) => ( +
+ {children} +
+); diff --git a/src/harmony/SheepLogo/SheepLogo.stories.ts b/src/harmony/SheepLogo/SheepLogo.stories.ts new file mode 100644 index 00000000..032886d0 --- /dev/null +++ b/src/harmony/SheepLogo/SheepLogo.stories.ts @@ -0,0 +1,15 @@ +import type { Meta, StoryObj } from '@storybook/react'; + +import { SheepLogo } from './SheepLogo'; + +const meta: Meta = { + title: '@harmony/SheepLogo', + component: SheepLogo, +}; + +export default meta; +type Story = StoryObj; + +export const Default: Story = { + args: {}, +}; diff --git a/src/harmony/SheepLogo/SheepLogo.tsx b/src/harmony/SheepLogo/SheepLogo.tsx new file mode 100644 index 00000000..121c9e5a --- /dev/null +++ b/src/harmony/SheepLogo/SheepLogo.tsx @@ -0,0 +1,71 @@ +import React from 'react'; + +export const SheepLogo: React.FC = () => { + return ( + + + + + + + + + + + + + + + + + + + + + + + + ); +}; diff --git a/src/harmony/index.ts b/src/harmony/index.ts index 44e5a733..81633bb6 100644 --- a/src/harmony/index.ts +++ b/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';