From 73db4c10b8a89ce91b7a8b5dee47e93715f2cb1d Mon Sep 17 00:00:00 2001 From: Sven van de Scheur Date: Tue, 9 Jan 2024 13:11:44 +0100 Subject: [PATCH 1/2] :sparkles: #3 - feat: add logo component --- src/components/index.ts | 1 + src/components/logo/index.ts | 1 + src/components/logo/logo.css | 29 ++++++++++ src/components/logo/logo.stories.tsx | 31 +++++++++++ src/components/logo/logo.tsx | 83 ++++++++++++++++++++++++++++ 5 files changed, 145 insertions(+) create mode 100644 src/components/logo/index.ts create mode 100644 src/components/logo/logo.css create mode 100644 src/components/logo/logo.stories.tsx create mode 100644 src/components/logo/logo.tsx diff --git a/src/components/index.ts b/src/components/index.ts index 84181537..d00b875d 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -1,2 +1,3 @@ // Auto-generated file. Do not modify manually. +export * from "./logo"; export * from "./test"; diff --git a/src/components/logo/index.ts b/src/components/logo/index.ts new file mode 100644 index 00000000..4671724f --- /dev/null +++ b/src/components/logo/index.ts @@ -0,0 +1 @@ +export * from "./logo"; diff --git a/src/components/logo/logo.css b/src/components/logo/logo.css new file mode 100644 index 00000000..ecb9c56d --- /dev/null +++ b/src/components/logo/logo.css @@ -0,0 +1,29 @@ +.logo .logo__image { + width: 100%; + object-fit: contain; + max-width: 155px; + overflow: visible; +} + +.logo .logo__handle { + transition: transform .1s ease-in-out; +} + +.logo[href]:hover .logo__handle--left, +.logo[href]:focus .logo__handle--left { + transform: translateX(-2px); +} + + +.logo[href]:active .logo__handle--left { + transform: translateX(2px); +} + +.logo[href]:hover .logo__handle--right, +.logo[href]:focus .logo__handle--right { + transform: translateX(2px); +} + +.logo[href]:active .logo__handle--right { + transform: translateX(-2px); +} diff --git a/src/components/logo/logo.stories.tsx b/src/components/logo/logo.stories.tsx new file mode 100644 index 00000000..a1c3a7cd --- /dev/null +++ b/src/components/logo/logo.stories.tsx @@ -0,0 +1,31 @@ +import type { Meta, StoryObj } from "@storybook/react"; +import { userEvent } from "@storybook/test"; + +import { Logo } from "./logo"; + +const meta = { + title: "Components/Logo", + component: Logo, +} satisfies Meta; + +export default meta; +type Story = StoryObj; + +export const LogoComponent: Story = { + args: { + href: "/?path=/story/components-logo--logo-component", + hrefLabel: "Navigate to logo component page.", + label: "Maykin logo", + }, +}; + +export const LogoAnimatesOnHoverAndClick: Story = { + args: { + href: "#", + hrefLabel: "Navigate to logo component page.", + label: "Maykin logo", + }, + play: async () => { + await userEvent.tab({ delay: 10 }); + }, +}; diff --git a/src/components/logo/logo.tsx b/src/components/logo/logo.tsx new file mode 100644 index 00000000..089a7062 --- /dev/null +++ b/src/components/logo/logo.tsx @@ -0,0 +1,83 @@ +import React from "react"; + +import "./logo.css"; + +export type LogoProps = { + /** The aria-label to set on the SVG element. */ + label: string; + + /** If set, provide a link. */ + href?: string; + + /** An aria-label describing the link action. */ + hrefLabel?: string; + + [index: string]: unknown; +}; + +/** + * The Maykin Media logo + * @param children + * @param props + * @constructor + */ +export const Logo: React.FC = ({ + label, + href, + hrefLabel, + ...props +}) => { + const Tag = href ? "a" : "span"; + + return ( + + + + + + + + + + + + + ); +}; From 6a20cff0939f1cde67fa3177c039147539fd1cbd Mon Sep 17 00:00:00 2001 From: Sven van de Scheur Date: Tue, 9 Jan 2024 13:12:46 +0100 Subject: [PATCH 2/2] :wastebasket: #3 - refactor: remove test component --- src/components/index.ts | 1 - src/components/test/index.ts | 1 - src/components/test/test.css | 3 --- src/components/test/test.stories.tsx | 17 ----------------- src/components/test/test.tsx | 19 ------------------- 5 files changed, 41 deletions(-) delete mode 100644 src/components/test/index.ts delete mode 100644 src/components/test/test.css delete mode 100644 src/components/test/test.stories.tsx delete mode 100644 src/components/test/test.tsx diff --git a/src/components/index.ts b/src/components/index.ts index d00b875d..6c09c00a 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -1,3 +1,2 @@ // Auto-generated file. Do not modify manually. export * from "./logo"; -export * from "./test"; diff --git a/src/components/test/index.ts b/src/components/test/index.ts deleted file mode 100644 index 481fabad..00000000 --- a/src/components/test/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from "./test"; diff --git a/src/components/test/test.css b/src/components/test/test.css deleted file mode 100644 index 3ea879c1..00000000 --- a/src/components/test/test.css +++ /dev/null @@ -1,3 +0,0 @@ -.test { - /* Rules here. */ -} diff --git a/src/components/test/test.stories.tsx b/src/components/test/test.stories.tsx deleted file mode 100644 index 8d4f230b..00000000 --- a/src/components/test/test.stories.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import type { Meta, StoryObj } from "@storybook/react"; - -import { Test } from "./test"; - -const meta = { - title: "Components/Test", - component: Test, -} satisfies Meta; - -export default meta; -type Story = StoryObj; - -export const TestComponent: Story = { - args: { - children: "The quick brown fox jumps over the lazy dog.", - }, -}; diff --git a/src/components/test/test.tsx b/src/components/test/test.tsx deleted file mode 100644 index 6e0b6157..00000000 --- a/src/components/test/test.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import React from "react"; - -import "./test.css"; - -export type TestProps = React.PropsWithChildren<{ - // Props here. -}>; - -/** - * Test component - * @param children - * @param props - * @constructor - */ -export const Test: React.FC = ({ children, ...props }) => ( -
- {children} -
-);