Skip to content

Commit

Permalink
fix(*): update ancor button
Browse files Browse the repository at this point in the history
  • Loading branch information
HoseaCodes committed Feb 24, 2024
1 parent 4eee630 commit e55d3b9
Show file tree
Hide file tree
Showing 4 changed files with 91 additions and 9 deletions.
60 changes: 60 additions & 0 deletions src/Components/Button/AncorButton.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
import React from "react";
import PropTypes from "prop-types";
import { StyledButtonATag } from "../../Layout/Button/styledButton";

export const AncorButton = ({
href,
target,
primary,
backgroundColor,
size,
shape,
label,
icon,
...props
}) => {
const mode = primary ? "button--primary" : "button--secondary";
return (
<StyledButtonATag
href={href}
target={target}
rel="noopener noreferrer"
className={[`button--${size}`, `button--${shape}`, mode].join(" ")}
style={backgroundColor && { backgroundColor }}
{...props}
>
{label && icon ? (
<>
{icon} {label}
</>
) : label ? (
label
) : (
icon
)}
</StyledButtonATag>
);
};

AncorButton.propTypes = {
primary: PropTypes.bool,
backgroundColor: PropTypes.string,
size: PropTypes.oneOf(["small", "medium", "large"]),
label: PropTypes.string.isRequired,
onClick: PropTypes.func,
icon: PropTypes.element,
shape: PropTypes.oneOf(["round", "oval"]),
href: PropTypes.string.isRequired,
target: PropTypes.string.isRequired,
};

AncorButton.defaultProps = {
backgroundColor: null,
primary: false,
size: "medium",
onClick: undefined,
icon: null,
shape: "oval",
href: "google.com",
target: "_blank",
};
5 changes: 3 additions & 2 deletions src/Components/Project/projectHighlight.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,8 @@ import {projectData} from '../../Pages/Projects/ProjectsData';
import AOS from 'aos';
import 'aos/dist/aos.css';
import './projectHighlight.css'
import { StyledButtonATag, StyledButtonH2, StyledDivButton } from '../../Layout/Button/styledButton';
import { StyledButtonH2, StyledDivButton } from '../../Layout/Button/styledButton';
import { AncorButton } from '../Button/AncorButton';

function ProjectHighlight() {
const highlights = projectData;
Expand All @@ -26,7 +27,7 @@ function ProjectHighlight() {
)})}
<StyledDivButton>
<StyledButtonH2>Visit my portfolio for more</StyledButtonH2>
<StyledButtonATag href="http://www.dominiquehosea.com" rel="noopener noreferrer" target="_blank">My Portfolio</StyledButtonATag>
<AncorButton primary href="http://www.dominiquehosea.com" target="_blank" label="My Portfolio"/>
</StyledDivButton>
</div>
)
Expand Down
14 changes: 7 additions & 7 deletions src/Pages/Home/Home.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import { MdEmail } from "react-icons/md";
import ProjectHighlight from "../../Components/Project/projectHighlight";
import Hero from "../../Components/Hero/hero";
import { StyledHr } from "../../Layout/Hr/styledHr";
import { StyledButtonATag } from "../../Layout/Button/styledButton";
import { AncorButton } from "../../Components/Button/AncorButton";

const Home = () => {
return (
Expand Down Expand Up @@ -81,17 +81,17 @@ const Home = () => {
</div>
<StyledHr Primary />
<br />
<div>
<StyledButtonATag
Primary
<div style={{display: 'flex', justifyContent: 'center', alignItems: 'center', flexDirection: 'column'}}>
<AncorButton
primary
href="#top"
target="_self"
label="Back to Top"
data-aos="fade-right"
data-aos-offset="200"
data-aos-duration="3000"
data-aos-easing="ease-in"
>
Back to the top
</StyledButtonATag>
/>
</div>
</div>
</section>
Expand Down
21 changes: 21 additions & 0 deletions src/stories/AncorButton.stories.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
import { AncorButton } from '../Components/Button/AncorButton';

export default {
title: "Main/Button/AncorTag",
component: AncorButton,
parameters: {
layout: "centered",
backgrounds: { default: "dark" },
},
tags: ["autodocs"],
};

export const Primary = {
args: {
href: "http://www.dominiquehosea.com",
primary: true,
target: "_blank",
label: 'Back to Top',
},
};

0 comments on commit e55d3b9

Please sign in to comment.