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

Add table clickable rows #18

Merged
merged 3 commits into from
Nov 28, 2023
Merged

Add table clickable rows #18

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
5643921
Updated text color of tooltip
belousovjr Nov 28, 2023
c111ea8
Changed loading button
belousovjr Nov 28, 2023
1db4eeb
Updated button test
belousovjr Nov 28, 2023
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
226 changes: 97 additions & 129 deletions src/__tests__/components/button.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,135 +16,103 @@ describe("Button", () => {
const buttonElement = getByText(label);
expect(buttonElement).toBeInTheDocument();
expect(asFragment()).toMatchInlineSnapshot(`
<DocumentFragment>
.c4 {
height: 16px;
width: 16px;
stroke: #5d93b2;
}

.c5 {
fill: none !important;
-webkit-animation: 0.4s fvtopB linear infinite;
animation: 0.4s fvtopB linear infinite;
}

.c0 {
width: 100%;
background: linear-gradient(90deg,#7da0c1 3.46%,#34627d 100%);
outline: none;
color: #f7f8f2;
box-shadow: 0 5px 13px -4px rgba(169,182,191,0.08);
padding: 12px 16px;
font-size: 16px;
border-radius: 16px;
position: relative;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
box-sizing: border-box;
border: none;
cursor: pointer;
-webkit-text-decoration: none;
text-decoration: none;
}

.c0:hover:not(:disabled),
.c0:focus {
background: linear-gradient(90deg,#91B9de 3.46%,#40708b 100%);
}

.c0 svg {
fill: #f7f8f2;
stroke: #f7f8f2;
}

.c0:disabled {
box-shadow: none;
}

.c0:disabled {
cursor: default;
opacity: 0.5;
}

.c1 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
opacity: 1;
-webkit-transition: opacity 0.15s;
transition: opacity 0.15s;
}

.c3 {
position: absolute;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
opacity: 0;
pointer-events: none;
-webkit-transition: opacity 0.15s;
transition: opacity 0.15s;
}

.c2 {
margin: 0 8px;
}

<button
class="c0"
color="primary"
scale="default"
width="100%"
>
<span
class="c1"
>
<span
class="c2"
>
${label}
</span>
</span>
<span
class="c3"
>
<svg
class="c4 c5"
fill="none"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 9.27455 20.9097 6.80375"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2.5"
/>
</svg>
</span>
</button>
</DocumentFragment>
<DocumentFragment>
.c0 {
width: 100%;
background: linear-gradient(90deg,#7da0c1 3.46%,#34627d 100%);
outline: none;
color: #f7f8f2;
box-shadow: 0 5px 13px -4px rgba(169,182,191,0.08);
padding: 12px 16px;
font-size: 16px;
border-radius: 16px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
box-sizing: border-box;
border: none;
cursor: pointer;
-webkit-text-decoration: none;
text-decoration: none;
}

.c0:hover:not(:disabled),
.c0:focus {
background: linear-gradient(90deg,#91B9de 3.46%,#40708b 100%);
}

.c0 svg {
fill: #f7f8f2;
stroke: #f7f8f2;
}

.c0:disabled {
box-shadow: none;
}

.c0:disabled {
cursor: default;
opacity: 0.5;
}

.c1 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-transition: opacity 0.15s;
transition: opacity 0.15s;
}

.c2 {
position: relative;
margin: 0 12px;
}

.c2:after {
display: none;
content: ".";
position: absolute;
left: 100%;
bottom: 0;
-webkit-animation: hfLTkO 0.6s infinite;
animation: hfLTkO 0.6s infinite;
}

<button
class="c0"
color="primary"
scale="default"
width="100%"
>
<span
class="c1"
>
<span
class="c2"
>
Some Button
</span>
</span>
</button>
</DocumentFragment>
`);
});

Expand Down
10 changes: 3 additions & 7 deletions src/components/Button/Button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import { ButtonProps } from "./types";
import LoadingSpinner from "../Loaders/LoadingSpinner";
import { ButtonContainer, ButtonContent, ButtonLoader, ButtonWrapper } from "./styles";
import { ButtonContainer, ButtonContent, ButtonWrapper } from "./styles";

ButtonWrapper.defaultProps = {
variant: "default",
Expand All @@ -25,14 +24,11 @@ export default function ({
else if (onClick) onClick(e);
}}
>
<ButtonContainer isLoading={loading}>
<ButtonContainer>
{props.startIcon}
<ButtonContent>{props.children}</ButtonContent>
<ButtonContent loading={loading}>{props.children}</ButtonContent>
{props.endIcon}
</ButtonContainer>
<ButtonLoader isLoading={loading}>
<LoadingSpinner duration={"0.4s"} />
</ButtonLoader>
</ButtonWrapper>
);
}
44 changes: 30 additions & 14 deletions src/components/Button/styles.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import styled from "styled-components";
import { ButtonProps } from './types';
import styled, { keyframes } from "styled-components";
import { ButtonProps } from "./types";
import { layout, space, variant } from "styled-system";
import { variantVariants, scaleVariants } from "./theme";

Expand All @@ -17,7 +17,6 @@ export const ButtonWrapper = styled.button<ButtonProps>`
variants: scaleVariants,
})}

position: relative;
display: flex;
justify-content: center;
align-items: center;
Expand All @@ -32,21 +31,38 @@ export const ButtonWrapper = styled.button<ButtonProps>`
}
`;

export const ButtonContainer = styled.span<{ isLoading?: boolean }>`
export const ButtonContainer = styled.span`
display: flex;
align-items: center;
justify-content: center;
opacity: ${({ isLoading }) => (isLoading ? 0.3 : 1)};
transition: opacity 0.15s;
`;
export const ButtonLoader = styled.span<{ isLoading?: boolean }>`
position: absolute;
display: flex;
opacity: ${({ isLoading }) => (isLoading ? 1 : 0)};
pointer-events: none;
transition: opacity 0.15s;

export const loadingDotsAnimation = keyframes`
0% {
content: ".";
}
33% {
content: "..";
}
66% {
content: "...";
}
100% {
content: ".";
}
`;

export const ButtonContent = styled.span`
margin: 0 8px;
`;
export const ButtonContent = styled.span<{ loading?: boolean }>`
position: relative;
margin: 0 12px;

&:after {
display: ${({ loading }) => (loading ? "block" : "none")};
content: ".";
position: absolute;
left: 100%;
bottom: 0;
animation: ${loadingDotsAnimation} 0.6s infinite;
}
`;
2 changes: 1 addition & 1 deletion src/components/Tooltip/styles.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ export const TooltipContainer = styled.div<{ show: boolean }>`
max-width: 256px;
cursor: default;
padding: 6px 8px;
color: ${({ theme }) => theme.colors.darkGray};
color: ${({ theme }) => theme.colors.textGray};

font-size: 14px;
font-weight: 300;
Expand Down
Loading