Merge pull request #6 from maykinmedia/feature/#4-navbar

Feature/#4 navbar

bin/create_component.sh

@@ -118,4 +118,4 @@ create_component_file $component_name_lowercase $component_dir
 # Update components/index.ts file
 update_index_file
 
-echo "Component '$component_name' created successfully."
+echo "Component '$component_name_lowercase' created successfully."

package.json

@@ -61,6 +61,7 @@
     "http-server": "^14.1.1",
     "husky": "^8.0.3",
     "lint-staged": "^15.2.0",
+    "postcss-url": "^10.1.3",
     "prettier": "^3.1.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
@@ -83,6 +84,7 @@
   "readme": "ERROR: No README data found!",
   "_id": "[email protected]",
   "dependencies": {
+    "@heroicons/react": "^2.1.1",
     "clsx": "^2.1.0"
   }
 }

rollup.config.mjs

@@ -4,6 +4,7 @@ import terser from "@rollup/plugin-terser";
 import typescript from "@rollup/plugin-typescript";
 import peerDepsExternal from "rollup-plugin-peer-deps-external";
 import postcss from "rollup-plugin-postcss";
+import postcss_url from "postcss-url";
 
 export default [
   {
@@ -24,6 +25,12 @@ export default [
         extract: true,
         minimize: true,
         sourceMap: true,
+        plugins: [
+          postcss_url({
+            basePath: process.cwd(),
+            url: 'inline'
+          }),
+        ],
       }),
       terser(),
     ],

src/components/button/button.scss

@@ -0,0 +1,57 @@
+@use '../../settings/style';
+
+.mykn-button {
+  --mykn-button-color-background: var(--theme-color-primary-800);
+  --mykn-button-color-shadow: var(--theme-shade-1000);
+  --mykn-button-color-text: var(--theme-shade-0);
+  --mykn-button-offset: 0px;
+
+  appearance: none;
+  margin: 0;
+  padding: var(--spacing-v-s) var(--spacing-h-s);
+  background-color: var(--mykn-button-color-background);
+  border: 1px solid var(--mykn-button-color-border);
+  border-radius: 4px;
+  box-shadow: 0 calc(var(--mykn-button-offset) * -1) var(--mykn-button-color-shadow);
+  box-sizing: border-box;
+  color: var(--mykn-button-color-text);
+  cursor: pointer;
+  display: inline-block;
+  font-family: Inter, sans-serif;
+  font-size: var(--typography-font-size-body-s);
+  line-height: var(--typography-line-height-body-s);
+  text-align: center;
+  text-decoration: none;
+  transition: all var(--animation-duration) var(--animation-timing-function);
+  transform: translateY(var(--mykn-button-offset));
+
+
+  &--variant-primary {
+    &:focus,
+    &:hover {
+      --mykn-button-color-background: var(--theme-color-primary-700);
+      --mykn-button-offset: -2px;
+    }
+
+    &:active {
+      --mykn-button-color-background: var(--theme-color-primary-800);
+      --mykn-button-offset: 0px;
+    }
+  }
+
+  &--variant-transparent {
+    --mykn-button-color-background: transparent;
+    --mykn-button-color-shadow: currentColor;
+    --mykn-button-color-text: var(--theme-shade-700);
+
+    &:focus,
+    &:hover {
+      --mykn-button-color-background: var(--theme-color-primary-200);
+      --mykn-button-offset: -2px;
+    }
+
+    &:active {
+      --mykn-button-offset: 0px;
+    }
+  }
+}

src/components/button/button.stories.tsx

@@ -0,0 +1,66 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { userEvent } from "@storybook/test";
+import React from "react";
+
+import { Button, ButtonLink } from "./button";
+
+const meta = {
+  title: "Controls/Button",
+  component: Button,
+} satisfies Meta<typeof Button>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const ButtonComponent: Story = {
+  args: {
+    children: "The quick brown fox jumps over the lazy dog.",
+  },
+};
+
+export const TransparentButton: Story = {
+  args: {
+    children: "The quick brown fox jumps over the lazy dog.",
+    variant: "transparent",
+  },
+};
+
+export const ButtonAnimatesOnHoverAndClick: Story = {
+  args: {
+    children: "The quick brown fox jumps over the lazy dog.",
+  },
+  play: async () => {
+    await userEvent.tab({ delay: 10 });
+  },
+};
+
+export const ButtonLinkComponent: StoryObj<typeof ButtonLink> = {
+  args: {
+    children: "The quick brown fox jumps over the lazy dog.",
+    href: "https://www.example.com",
+    target: "_blank",
+  },
+  render: (args) => <ButtonLink {...args} />,
+};
+
+export const TransparentButtonLink: StoryObj<typeof ButtonLink> = {
+  args: {
+    children: "The quick brown fox jumps over the lazy dog.",
+    href: "https://www.example.com",
+    target: "_blank",
+    variant: "transparent",
+  },
+  render: (args) => <ButtonLink {...args} />,
+};
+
+export const ButtonLinkAnimatesOnHoverAndClick: StoryObj<typeof ButtonLink> = {
+  args: {
+    children: "The quick brown fox jumps over the lazy dog.",
+    href: "https://www.example.com",
+    target: "_blank",
+  },
+  play: async () => {
+    await userEvent.tab({ delay: 10 });
+  },
+  render: (args) => <ButtonLink {...args} />,
+};

src/components/button/button.tsx

@@ -0,0 +1,73 @@
+import clsx from "clsx";
+import React from "react";
+
+import "./button.scss";
+
+export type ButtonProps = React.PropsWithChildren<{
+  variant?: "primary" | "transparent";
+}>;
+
+/**
+ * Higher-order component (HOC) applying button logic to WrappedComponent
+ * @param WrappedComponent
+ * @private
+ */
+const withButtonBehavior = <P extends ButtonProps>(
+  WrappedComponent: React.ComponentType<P>,
+) => {
+  // Define the enhanced component
+  const EnhancedButton: React.FC<P> = ({
+    children,
+    variant = "primary",
+    ...props
+  }) => {
+    return (
+      <WrappedComponent
+        className={clsx("mykn-button", `mykn-button--variant-${variant}`)}
+        {...(props as P)}
+      >
+        {children}
+      </WrappedComponent>
+    );
+  };
+
+  return EnhancedButton;
+};
+
+/**
+ * Base template for Button component
+ * @private
+ */
+const BaseButton: React.FC<
+  ButtonProps & React.ButtonHTMLAttributes<HTMLButtonElement>
+> = (props) => {
+  return <button {...props}>{props.children}</button>;
+};
+
+/**
+ * Base template for ButtonLink component
+ * @private
+ */
+const BaseButtonLink: React.FC<
+  ButtonProps & React.AnchorHTMLAttributes<HTMLAnchorElement>
+> = (props) => {
+  return <a {...props}>{props.children}</a>;
+};
+
+/**
+ * Button component
+ * @param children
+ * @param type
+ * @param props
+ * @constructor
+ */
+export const Button = withButtonBehavior(BaseButton);
+
+/**
+ * Anchor (<a>) version of button component
+ * @param children
+ * @param type
+ * @param props
+ * @constructor
+ */
+export const ButtonLink = withButtonBehavior(BaseButtonLink);

src/components/button/index.ts

@@ -0,0 +1 @@
+export * from "./button";