Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Problems with Buttons in sistent #5705

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
+119 −40
Open

Problems with Buttons in sistent #5705

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
5ce6086
linked input text with modal using next button
mannika763 Jul 20, 2024
4e2dc76
switching tabs using buttons
mannika763 Jul 25, 2024
48881ab
button styling
mannika763 Jul 26, 2024
7fc22a3
adding padding and font size according to docs
mannika763 Jul 31, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
83 changes: 48 additions & 35 deletions src/components/SistentNavigation/content.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,46 +1,59 @@
export const content = [
{ id: 0, link: "/projects/sistent/about", text: "About Sistent" },
{ id: 1, link: "/projects/sistent/identity/color", text: "Colors" },
{ id: 2, link: "/projects/sistent/identity/color/guidance", text: "Colors" },
{ id: 3, link: "/projects/sistent/identity/color/code", text: "Colors" },
{ id: 4, link: "/projects/sistent/identity/spacing", text: "Spacing" },
// { id: 2, link: "/projects/sistent/identity/color/guidance", text: "Colors" },
// { id: 3, link: "/projects/sistent/identity/color/code", text: "Colors" },
{ id: 2, link: "/projects/sistent/identity/spacing", text: "Spacing" },
// {
// id: 5,
// link: "/projects/sistent/identity/spacing/guidance",
// text: "Spacing",
// },
// { id: 6, link: "/projects/sistent/identity/spacing/code", text: "Spacing" },
{ id: 3, link: "/projects/sistent/identity/typography", text: "Typography" },
// {
// id: 8,
// link: "/projects/sistent/identity/typography/guidance",
// text: "Typography",
// },
// {
// id: 9,
// link: "/projects/sistent/identity/typography/code",
// text: "Typography",
// },
{ id: 4, link: "/projects/sistent/components/button", text: "Button" },
// {
// id: 10,
// link: "/projects/sistent/components/button/guidance",
// text: "Button",
// },
// { id: 10, link: "/projects/sistent/components/button/code", text: "Button" },
{
id: 5,
link: "/projects/sistent/identity/spacing/guidance",
text: "Spacing",
},
{ id: 6, link: "/projects/sistent/identity/spacing/code", text: "Spacing" },
{ id: 7, link: "/projects/sistent/identity/typography", text: "Typography" },
{
id: 8,
link: "/projects/sistent/identity/typography/guidance",
text: "Typography",
},
{
id: 9,
link: "/projects/sistent/identity/typography/code",
text: "Typography",
},
{ id: 10, link: "/projects/sistent/components/button", text: "Button" },
{
id: 10,
link: "/projects/sistent/components/button/guidance",
text: "Button",
},
{ id: 11, link: "/projects/sistent/components/button/code", text: "Button" },
{
id: 12,
link: "/projects/sistent/components/text-input",
text: "Text Input",
},
// {
// id: 13,
// link: "/projects/sistent/components/text-input/guidance",
// text: "Text Input",
// },
// {
// id: 11,
// link: "/projects/sistent/components/text-input/code",
// text: "Text Input",
// },
{
id: 13,
link: "/projects/sistent/components/text-input/guidance",
text: "Text Input",
},
{
id: 14,
link: "/projects/sistent/components/text-input/code",
text: "Text Input",
id: 6,
link: "/projects/sistent/components/modal",
text: "Modal",
},

// {
// id: 15,
// link: "/projects/sistent/components/modal/code",
// text: "Modal",
// },


];
16 changes: 11 additions & 5 deletions src/components/SistentNavigation/pagination.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
import React, { useEffect, useState } from "react";

import { HiOutlineChevronLeft } from "@react-icons/all-files/hi/HiOutlineChevronLeft";
import { HiOutlineChevronRight } from "@react-icons/all-files/hi/HiOutlineChevronRight";
import { content } from "./content";
import Button from "../../reusecore/Button";
import PaginationWrapper from "./pagination.style";
import { colors } from "@mui/material";

const SistentPagination = () => {
const [currentPage, setCurrentPage] = useState(0);
Expand All @@ -16,14 +18,18 @@ const SistentPagination = () => {
return (
<PaginationWrapper>
{currentPage > 0 ? (
<Button secondary url={content[currentPage - 1]?.link}>
&larr; Previous
<Button className='prev-btn' secondary url={content[currentPage - 1]?.link}>
<div className="btn-content">
<div className="previous-text">Previous</div>
<div className="where-to-go-prev"><HiOutlineChevronLeft className="left-icon" style={{color: "white"}}/>{content[currentPage - 1]?.text}</div></div>
</Button>
) : null}

{currentPage < content.length - 1 ? (
<Button primary url={content[currentPage + 1]?.link}>
Next &rarr;
<Button className='next-btn' primary url={content[currentPage + 1]?.link}>
<div className="btn-content">
<div className="next-text">Next</div>
<div className="where-to-go">{content[currentPage + 1]?.text}<HiOutlineChevronRight className="right-icon" style={{color: "black"}}/></div></div>
</Button>
) : null}
</PaginationWrapper>
Expand Down
60 changes: 60 additions & 0 deletions src/components/SistentNavigation/pagination.style.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,66 @@ const TocPaginationWrapper = styled.div`
justify-content: center;
margin: 3rem 2rem 4rem 2rem;

.prev-btn{
padding: 8px 22px;
}
.next-btn{
padding: 8px 22px;
}
.btn-content{
display: block;
width:100%;
}
.right-icon{
margin-top:5px;
font-size: 1rem;
font-weight: 500;

}
.left-icon{
margin-top:5px;
font-size: 1rem;
font-weight: 500;
}


.previous-text{
display: flex;
color: white;
font-size: 1rem;
font-weight: 500;
line-height: 1.75rem;
margin: auto;
opacity:0.9;
}
.next-text{
display: flex;
color: black;
font-size: 1rem;
font-weight: 500;
line-height: 1.75rem;
justify-content:end;
opacity:0.9;
}
.where-to-go-prev{
display: flex;
font-family: "Open Sans", sans-serif;
font-size: 1rem;
font-weight: 500;
line-height: 1.75rem;
color: white;
}
.where-to-go{
display: flex;
font-family: "Open Sans", sans-serif;
color: black;
font-size: 1rem;
font-weight: 500;
justify-content:end;
line-height: 1.75rem;
}


@media screen and (max-width: 540px) {
margin: 0 0 2rem 0;
flex-flow: row wrap;
Expand Down
Loading