From 88dfb152177075c44c8ddb888d681077e32fd004 Mon Sep 17 00:00:00 2001 From: Narinder788 <85366812+Narinder788@users.noreply.github.com> Date: Sun, 6 Oct 2024 16:53:30 +0530 Subject: [PATCH 1/4] GitHub action to automatically run eslint --fix on PRs and commit the changes (#35) --- .github/workflows/pr-checks.yaml | 19 +++++++++++++++++-- 1 file changed, 17 insertions(+), 2 deletions(-) diff --git a/.github/workflows/pr-checks.yaml b/.github/workflows/pr-checks.yaml index 93bc636..50f5507 100644 --- a/.github/workflows/pr-checks.yaml +++ b/.github/workflows/pr-checks.yaml @@ -10,8 +10,10 @@ jobs: runs-on: ubuntu-latest steps: - - name: Checkout - uses: actions/checkout@v3 + - name: Checkout + uses: actions/checkout@v3 + with: + ref: ${{ github.head_ref }} - name: Set up Node.js uses: actions/setup-node@v3 @@ -32,3 +34,16 @@ jobs: - name: Build run: npm run build + + - name: Auto-fix ESLint Issues + run: npx eslint . --fix + + - name: Commit changes if any + run: | + git config --global user.name "github-actions[bot]" + git config --global user.email "github-actions[bot]@users.noreply.github.com" + git add . + git diff --quiet || git commit -m "ESLint auto-fix applied by GitHub Actions" || exit 0 + git push + env: + GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} # GitHub token for authentication \ No newline at end of file From a46fb40818c736a2bdfbac6f6c1a7e1e5ff9baf1 Mon Sep 17 00:00:00 2001 From: Leesa Ward Date: Sun, 6 Oct 2024 22:26:26 +1100 Subject: [PATCH 2/4] Revert "GitHub action to automatically run eslint --fix on PRs and commit the changes (#35)" This reverts commit 88dfb152177075c44c8ddb888d681077e32fd004. --- .github/workflows/pr-checks.yaml | 19 ++----------------- 1 file changed, 2 insertions(+), 17 deletions(-) diff --git a/.github/workflows/pr-checks.yaml b/.github/workflows/pr-checks.yaml index 50f5507..93bc636 100644 --- a/.github/workflows/pr-checks.yaml +++ b/.github/workflows/pr-checks.yaml @@ -10,10 +10,8 @@ jobs: runs-on: ubuntu-latest steps: - - name: Checkout - uses: actions/checkout@v3 - with: - ref: ${{ github.head_ref }} + - name: Checkout + uses: actions/checkout@v3 - name: Set up Node.js uses: actions/setup-node@v3 @@ -34,16 +32,3 @@ jobs: - name: Build run: npm run build - - - name: Auto-fix ESLint Issues - run: npx eslint . --fix - - - name: Commit changes if any - run: | - git config --global user.name "github-actions[bot]" - git config --global user.email "github-actions[bot]@users.noreply.github.com" - git add . - git diff --quiet || git commit -m "ESLint auto-fix applied by GitHub Actions" || exit 0 - git push - env: - GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} # GitHub token for authentication \ No newline at end of file From be6942924ad1e488a89540fa32c64318a793aed1 Mon Sep 17 00:00:00 2001 From: Daniel Andrews Date: Mon, 28 Oct 2024 17:53:33 +1100 Subject: [PATCH 3/4] added the menu bar component (#31) Co-authored-by: Leesa Ward Co-authored-by: ben-AI-cybersec <142491786+ben-AI-cybersec@users.noreply.github.com> --- src/components/MenuBar/MenuBar.stories.ts | 44 +++++++++++++++++++ src/components/MenuBar/MenuBar.style.ts | 52 +++++++++++++++++++++++ src/components/MenuBar/MenuBar.test.tsx | 28 ++++++++++++ src/components/MenuBar/MenuBar.tsx | 38 +++++++++++++++++ 4 files changed, 162 insertions(+) create mode 100644 src/components/MenuBar/MenuBar.stories.ts create mode 100644 src/components/MenuBar/MenuBar.style.ts create mode 100644 src/components/MenuBar/MenuBar.test.tsx create mode 100644 src/components/MenuBar/MenuBar.tsx diff --git a/src/components/MenuBar/MenuBar.stories.ts b/src/components/MenuBar/MenuBar.stories.ts new file mode 100644 index 0000000..13902a6 --- /dev/null +++ b/src/components/MenuBar/MenuBar.stories.ts @@ -0,0 +1,44 @@ +import { MenuBar } from './MenuBar'; +import { action } from '@storybook/addon-actions'; // Use 'action' instead of 'fn' +import type { Meta, StoryObj } from '@storybook/react'; +import { themeColorSubset } from '../../types'; + +const meta: Meta = { + title: 'Components/MenuBar', + component: MenuBar, + argTypes: { + color: { control: 'select', options: Object.keys(themeColorSubset) }, + }, + args: { + color: 'primary', + items: [ + { label: 'Home', link: '/', onClick: action('Home clicked') }, + { label: 'About', link: '/about', onClick: action('About clicked') }, + { label: 'Contact', link: '/contact', onClick: action('Contact clicked') }, + ], + }, +}; + +export default meta; +type Story = StoryObj; + +export const Default: Story = { + args: { + color: 'primary', + }, +}; + +export const Secondary: Story = { + args: { + color: 'secondary', + }, +}; + +export const WithCustomItems: Story = { + args: { + items: [ + { label: 'Services', link: '/services', onClick: action('Services clicked') }, + { label: 'Blog', link: '/blog', onClick: action('Blog clicked') }, + ], + }, +}; diff --git a/src/components/MenuBar/MenuBar.style.ts b/src/components/MenuBar/MenuBar.style.ts new file mode 100644 index 0000000..9144238 --- /dev/null +++ b/src/components/MenuBar/MenuBar.style.ts @@ -0,0 +1,52 @@ +import styled from 'styled-components'; +import { ThemeColor } from '../../types'; + +type StyledMenuBarProps = { + $color: ThemeColor; +}; + +export const StyledMenuBar = styled.div` + display: flex; + align-items: center; + background-color: ${(props) => props.theme.colors[props.$color]}; + padding: ${(props) => props.theme.spacing.md}; + border-bottom: 1px solid ${(props) => props.theme.colors.subtle}; + justify-content: space-between; +`; + +export const MenuItem = styled.a` + color: ${(props) => props.theme.colors.dark}; + margin: 0 ${(props) => props.theme.spacing.sm}; + text-decoration: none; + font-size: ${(props) => props.theme.fontSizes.default}; + + &:hover { + text-decoration: underline; + } + + @media (max-width: 768px) { + font-size: ${(props) => props.theme.fontSizes.sm}; + } +`; + +export const HamburgerIcon = styled.div` + cursor: pointer; + font-size: 1.5rem; + display: none; + + @media (max-width: 768px) { + display: block; + } +`; + +export const IconImage = styled.img` + width: 40px; + height: 40px; + margin-right: ${(props) => props.theme.spacing.md}; + cursor: pointer; + + @media (max-width: 768px) { + width: 30px; + height: 30px; + } +`; diff --git a/src/components/MenuBar/MenuBar.test.tsx b/src/components/MenuBar/MenuBar.test.tsx new file mode 100644 index 0000000..3560d0b --- /dev/null +++ b/src/components/MenuBar/MenuBar.test.tsx @@ -0,0 +1,28 @@ +import { screen, fireEvent } from '@testing-library/react'; +import { renderWithDeps } from '../../../jest.utils'; +import { MenuBar } from './MenuBar'; + +const mockClick = jest.fn(); + +describe('', () => { + const menuItems = [ + { label: 'Home', link: '/', onClick: mockClick }, + { label: 'About', link: '/about', onClick: mockClick }, + { label: 'Contact', link: '/contact', onClick: mockClick }, + ]; + + it('renders the menu items', () => { + renderWithDeps(); + + expect(screen.getByText('Home')).toBeVisible(); + expect(screen.getByText('About')).toBeVisible(); + expect(screen.getByText('Contact')).toBeVisible(); + }); + + it('calls onClick when a menu item is clicked', () => { + renderWithDeps(); + + fireEvent.click(screen.getByText('Home')); + expect(mockClick).toHaveBeenCalledTimes(1); + }); +}); diff --git a/src/components/MenuBar/MenuBar.tsx b/src/components/MenuBar/MenuBar.tsx new file mode 100644 index 0000000..163c0a1 --- /dev/null +++ b/src/components/MenuBar/MenuBar.tsx @@ -0,0 +1,38 @@ +import { FC } from 'react'; +import { StyledMenuBar, MenuItem, HamburgerIcon, IconImage } from './MenuBar.style'; +import { ThemeColor } from '../../types'; + +type MenuBarItem = { + label: string; + link: string; + onClick?: () => void; +}; + +type MenuBarProps = { + items: MenuBarItem[]; + color?: ThemeColor; // Added color prop like in the Button component +}; + +export const MenuBar: FC = ({ items, color = 'primary' }) => { + return ( + + + + ☰ + + + + ); +}; + +export default MenuBar; From b6a6592605ea4b97d4f97b255a59cab5b990dd93 Mon Sep 17 00:00:00 2001 From: Renurose <139512121+Renurose@users.noreply.github.com> Date: Mon, 28 Oct 2024 17:56:53 +1100 Subject: [PATCH 4/4] Added tooltip components (#24) Co-authored-by: Renurose Co-authored-by: ben-AI-cybersec <142491786+ben-AI-cybersec@users.noreply.github.com> --- src/components/Tooltip/Tooltip.stories.ts | 15 +++++++++++++ src/components/Tooltip/Tooltip.style.ts | 27 +++++++++++++++++++++++ src/components/Tooltip/Tooltip.test.tsx | 17 ++++++++++++++ src/components/Tooltip/Tooltip.tsx | 11 +++++++++ 4 files changed, 70 insertions(+) create mode 100644 src/components/Tooltip/Tooltip.stories.ts create mode 100644 src/components/Tooltip/Tooltip.style.ts create mode 100644 src/components/Tooltip/Tooltip.test.tsx create mode 100644 src/components/Tooltip/Tooltip.tsx diff --git a/src/components/Tooltip/Tooltip.stories.ts b/src/components/Tooltip/Tooltip.stories.ts new file mode 100644 index 0000000..1de1d5e --- /dev/null +++ b/src/components/Tooltip/Tooltip.stories.ts @@ -0,0 +1,15 @@ +import { Meta, StoryObj } from '@storybook/react'; +import { Tooltip } from './Tooltip'; + +const meta: Meta = { title: 'Components/Tooltip', component: Tooltip, +}; + +export default meta; +type Story = StoryObj; + +const defaultProps = { text: 'Hover over me', tooltip: 'This is a tooltip', +}; + +export const Default: Story = { args: { ...defaultProps, }, +}; + \ No newline at end of file diff --git a/src/components/Tooltip/Tooltip.style.ts b/src/components/Tooltip/Tooltip.style.ts new file mode 100644 index 0000000..78c3011 --- /dev/null +++ b/src/components/Tooltip/Tooltip.style.ts @@ -0,0 +1,27 @@ +import styled from 'styled-components'; + +export const TooltipContainer = styled.div` + position: relative; + display: inline-block; +`; + +export const TooltipText = styled.div` + visibility: hidden; + width: 120px; + background-color: ${({ theme }) => theme?.colors?.tooltipBg || '#555'}; + color: ${({ theme }) => theme?.colors?.tooltipText || '#fff'}; + text-align: center; + padding: ${({ theme }) => theme?.spacing?.xs || '5px'}; + border-radius: ${({ theme }) => theme?.borderRadius?.sm || '6px'}; + position: absolute; + z-index: 1; + bottom: 20%; + left: 50%; + margin-left: -60px; + opacity: 0; + transition: opacity 0.3s; + ${TooltipContainer}:hover & { + visibility: visible; + opacity: 1; + } +`; \ No newline at end of file diff --git a/src/components/Tooltip/Tooltip.test.tsx b/src/components/Tooltip/Tooltip.test.tsx new file mode 100644 index 0000000..21efd48 --- /dev/null +++ b/src/components/Tooltip/Tooltip.test.tsx @@ -0,0 +1,17 @@ +import { render } from '@testing-library/react'; +import { Tooltip } from './Tooltip'; +import { axe } from 'jest-axe'; + +describe('', () => { + it('renders the tooltip component', () => { + const { getByText } = render(); + expect(getByText('Hover over me')).toBeInTheDocument(); + }); + + it('has no accessibility violations', async () => { + const { container } = render(); + const results = await axe(container); + + expect(results).toHaveNoViolations(); + }); +}); diff --git a/src/components/Tooltip/Tooltip.tsx b/src/components/Tooltip/Tooltip.tsx new file mode 100644 index 0000000..32b5816 --- /dev/null +++ b/src/components/Tooltip/Tooltip.tsx @@ -0,0 +1,11 @@ +import { FC } from 'react'; +import { TooltipContainer, TooltipText } from './Tooltip.style'; + +type TooltipProps = { + text: string; + tooltip: string; +}; + +export const Tooltip: FC = ({ text, tooltip }) => ( {text} {tooltip} +); + \ No newline at end of file