Skip to content

Commit

Permalink
Add Card alignment changes
Browse files Browse the repository at this point in the history
  • Loading branch information
vineethasok committed Sep 28, 2023
1 parent 7b19eff commit 6afc7f2
Show file tree
Hide file tree
Showing 3 changed files with 64 additions and 20 deletions.
46 changes: 38 additions & 8 deletions src/App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ import {
Switch,
Tabs,
WarningAlert,
CardPrimary,
} from "@/components";

const App = () => {
Expand Down Expand Up @@ -128,15 +129,44 @@ const App = () => {
state={"disabled"}
></Badge>
</div>
<CardSecondary
title="Card title"
icon="building"
description="This is a card description"
badgeText="experiment"
infoText="Read More"
infoUrl="#"
/>
<div style={{ display: "flex", padding: "1rem" }}>
<CardSecondary
title="Card title"
icon="building"
description="This is a card description"
badgeText="experiment"
infoText="Read More"
infoUrl="#"
/>

<CardSecondary
title="Card title"
icon="building"
description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut sagittis neque. Quisque ut nunc tortor. Donec ut faucibus neque. In vel suscipit nunc. Praesent odio velit, sollicitudin ac tempor a, varius vitae turpis. Donec mauris risus, dapibus a justo eu, ultricies ullamcorper lacus. Sed ligula purus, sodales quis arcu sit amet, tempor dignissim velit. In ullamcorper lectus non rutrum bibendum. Etiam velit dolor, hendrerit vitae tristique a, semper vitae est. Vivamus elit justo, pellentesque eu auctor feugiat, ultrices vitae diam. Donec accumsan tortor nec vestibulum lobortis. Proin mattis quam nisl, sed malesuada diam volutpat a."
badgeText="experiment"
infoText="Read More"
infoUrl="#"
/>
</div>
<div style={{ display: "flex", padding: "1rem" }}>
<CardPrimary
title="Card title"
icon="building"
description="This is a card description"
infoText="Read More"
infoUrl="#"
style={{ display: "flex", width: "100%" }}
/>

<CardPrimary
title="Card title"
icon="building"
description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut sagittis neque. Quisque ut nunc tortor. Donec ut faucibus neque. In vel suscipit nunc. Praesent odio velit, sollicitudin ac tempor a, varius vitae turpis. Donec mauris risus, dapibus a justo eu, ultricies ullamcorper lacus. Sed ligula purus, sodales quis arcu sit amet, tempor dignissim velit. In ullamcorper lectus non rutrum bibendum. Etiam velit dolor, hendrerit vitae tristique a, semper vitae est. Vivamus elit justo, pellentesque eu auctor feugiat, ultrices vitae diam. Donec accumsan tortor nec vestibulum lobortis. Proin mattis quam nisl, sed malesuada diam volutpat a."
infoText="Read More"
infoUrl="#"
style={{ display: "flex", width: "100%" }}
/>
</div>
<ButtonGroup
labels={["Left center", "Center", "Center", "Center", "Right end"]}
activeIndex={selectedButton}
Expand Down
37 changes: 25 additions & 12 deletions src/components/CardPrimary/CardPrimary.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -99,6 +99,17 @@ const Content = styled.div<{ $size?: "sm" | "md" }>`
flex-direction: column;
align-self: center;
gap: ${({ $size = "md", theme }) => theme.click.card.primary.space[$size].gap};
flex: 1;
`;

const ContentContainer = styled.div<{ $size?: "sm" | "md" }>`
display: flex;
flex-direction: column;
align-self: center;
justify-content: space-between;
width: 100%;
height: 100%;
gap: ${({ $size = "md", theme }) => theme.click.card.primary.space[$size].gap};
`;

export const CardPrimary = ({
Expand Down Expand Up @@ -141,20 +152,22 @@ export const CardPrimary = ({
<Title type="h3">{title}</Title>
</Header>

<Content $size={size}>
<Text color="muted">{description}</Text>
</Content>
<ContentContainer>
<Content $size={size}>
<Text color="muted">{description}</Text>
</Content>

{size == "sm" && <Spacer size="sm" />}
{size == "sm" && <Spacer size="sm" />}

{infoText && (
<Component
onClick={handleClick}
disabled={disabled}
>
{infoText}
</Component>
)}
{infoText && (
<Component
onClick={handleClick}
disabled={disabled}
>
{infoText}
</Component>
)}
</ContentContainer>
</Wrapper>
);
};
1 change: 1 addition & 0 deletions src/components/CardSecondary/CardSecondary.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,7 @@ const HeaderLeft = styled.div<{ $disabled?: boolean }>`
const Content = styled.div`
display: flex;
flex-direction: column;
flex: 1;
`;

const InfoLink = styled.a`
Expand Down

0 comments on commit 6afc7f2

Please sign in to comment.