diff --git a/src/components/Attribution.tsx b/src/components/Attribution.tsx
index dfc35d3..afb9bdb 100644
--- a/src/components/Attribution.tsx
+++ b/src/components/Attribution.tsx
@@ -49,6 +49,22 @@ const Attribution: React.FC = () => {
+
+
);
};
diff --git a/src/index.css b/src/index.css
index 44c32c9..f65acb9 100644
--- a/src/index.css
+++ b/src/index.css
@@ -318,6 +318,45 @@ input:focus {
background-color: rgba(59, 130, 246, 0.1);
}
+/* Repository section styles */
+.repository-section {
+ margin-top: 0.75rem;
+ padding-top: 0.75rem;
+ border-top: 1px solid var(--soft-gray);
+}
+
+.repository-text {
+ font-weight: 500;
+ line-height: 1.2;
+ margin-bottom: 0.5rem;
+ color: var(--secondary-color);
+ font-size: 0.75rem;
+}
+
+.repository-link {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 0.25rem;
+ color: var(--primary-color);
+ text-decoration: none;
+ font-size: 0.75rem;
+ font-weight: 500;
+ padding: 0.25rem 0.5rem;
+ border-radius: 6px;
+ transition: all 0.2s ease;
+}
+
+.repository-link:hover {
+ color: #2563eb;
+ background-color: rgba(59, 130, 246, 0.1);
+ transform: translateY(-1px);
+}
+
+.repository-link svg {
+ font-size: 0.875rem;
+}
+
@media (max-width: 768px) {
.attribution-container {
bottom: 1rem;
@@ -335,6 +374,25 @@ input:focus {
height: 1.25rem;
font-size: 0.9rem;
}
+
+ .repository-section {
+ margin-top: 0.5rem;
+ padding-top: 0.5rem;
+ }
+
+ .repository-text {
+ font-size: 0.7rem;
+ }
+
+ .repository-link {
+ font-size: 0.7rem;
+ gap: 0.2rem;
+ padding: 0.2rem 0.4rem;
+ }
+
+ .repository-link svg {
+ font-size: 0.8rem;
+ }
}
@media (prefers-color-scheme: light) {
diff --git a/tests/components/Attribution.test.tsx b/tests/components/Attribution.test.tsx
index e691f86..5ccb511 100644
--- a/tests/components/Attribution.test.tsx
+++ b/tests/components/Attribution.test.tsx
@@ -53,6 +53,30 @@ describe('Attribution Component', () => {
expect(linksContainer).toHaveClass('attribution-links');
expect(firstLink).toHaveClass('attribution-link');
});
+
+ it('should display the repository section', () => {
+ render();
+
+ expect(screen.getByText('Open Source Project')).toBeInTheDocument();
+ expect(screen.getByText('View on GitHub')).toBeInTheDocument();
+
+ const repoLink = screen.getByLabelText('View source code on GitHub');
+ expect(repoLink).toBeInTheDocument();
+ expect(repoLink).toHaveAttribute('href', 'https://github.com/DeDuckProject/epp-demo');
+ expect(repoLink).toHaveClass('repository-link');
+ });
+
+ it('should style the repository section correctly', () => {
+ render();
+
+ const repoSection = screen.getByText('Open Source Project').closest('.repository-section');
+ const repoText = screen.getByText('Open Source Project');
+ const repoLink = screen.getByLabelText('View source code on GitHub');
+
+ expect(repoSection).toHaveClass('repository-section');
+ expect(repoText).toHaveClass('repository-text');
+ expect(repoLink).toHaveClass('repository-link');
+ });
});
describe('when users interact with the attribution', () => {
@@ -74,6 +98,7 @@ describe('Attribution Component', () => {
expect(screen.getByLabelText('LinkedIn profile')).toBeInTheDocument();
expect(screen.getByLabelText('X (Twitter) profile')).toBeInTheDocument();
expect(screen.getByLabelText('Bluesky profile')).toBeInTheDocument();
+ expect(screen.getByLabelText('View source code on GitHub')).toBeInTheDocument();
});
});
@@ -90,13 +115,20 @@ describe('Attribution Component', () => {
// The story continues: They want to connect with the creator
const socialLinks = screen.getAllByRole('link');
- expect(socialLinks).toHaveLength(4);
+ expect(socialLinks).toHaveLength(5); // Updated to include repository link
- // The story concludes: They can easily access the creator's profiles
+ // The story concludes: They can easily access the creator's profiles and the source code
socialLinks.forEach(link => {
expect(link).toBeVisible();
expect(link.getAttribute('href')).toMatch(/^https:\/\//);
});
+
+ // And they can find the open source repository
+ const repoText = screen.getByText('Open Source Project');
+ const repoLink = screen.getByLabelText('View source code on GitHub');
+ expect(repoText).toBeVisible();
+ expect(repoLink).toBeVisible();
+ expect(repoLink.getAttribute('href')).toBe('https://github.com/DeDuckProject/epp-demo');
});
});
});
\ No newline at end of file