Skip to content

Commit

Permalink
Refactor CardTitle, CardSubTitle, and CardDescription components
Browse files Browse the repository at this point in the history
  • Loading branch information
@TobiTRy
TobiTRy committed Dec 29, 2023
1 parent 5477234 commit 455e911
Show file tree
Hide file tree
Showing 5 changed files with 46 additions and 49 deletions.
60 changes: 32 additions & 28 deletions src/Routes/ExperimentalRoute/ExperimentalRoute.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,7 @@ export default function ExperimentalRoute() {
<FancyContentCard.FlexBox direction="column" justify="center" align="center">
<FancyContentCard.Image className="card_image" src={'http://ilovepixel.eu/images/shibi.png'} size="sm" />
</FancyContentCard.FlexBox>
<FancyContentCard.SpacingCard padding={[0, 'md', 'lg', 'md']}>
<FancyContentCard.SpacingBox padding={[0, 'md', 'lg', 'md']}>
<FancyContentCard.SubTitle layer={5} className="card_subtitle" addLineHeight>
{'Grow steadily and pizza. Grow steadily and pizza. Grow steadily and pizza.Grow steadily and pizza.'}
</FancyContentCard.SubTitle>
Expand All @@ -91,17 +91,17 @@ export default function ExperimentalRoute() {
text={{ showMore: 'Expand' }}
/>
</FancyContentCard.Descritpion>
</FancyContentCard.SpacingCard>
</FancyContentCard.SpacingBox>
</FancyContentCard.FlexBox>
<FancyContentCard.SpacingCard padding={['sm']}>
<FancyContentCard.SpacingBox padding={['sm']}>
<FancyButton
label="Click me"
wide
themeType="secondary"
textColor="primary"
borderRadius="complete"
></FancyButton>
</FancyContentCard.SpacingCard>
</FancyContentCard.SpacingBox>
</FancyContentCard>
{/* CARD 2 */}
{/* CARD 2 */}
Expand All @@ -111,33 +111,37 @@ export default function ExperimentalRoute() {
{/* CARD 2 */}
<FancyContentCard>
<FancyContentCard.FlexBox direction="column">
<FancyContentCard.Image src={'http://ilovepixel.eu/images/shibi.png'} />
<FancyContentCard.SpacingCard padding={[0, 'md', 'lg', 'md']}>
<FancyContentCard.SubTitle layer={5} addLineHeight>
{'Grow steadily and pizza. Grow steadily and pizza. Grow steadily and pizza.Grow steadily and pizza.'}
</FancyContentCard.SubTitle>
<FancyContentCard.Image size="xl" src={'https://placehold.co/600x400'} />
<FancyContentCard.SpacingBox padding={[0, 'md', 'md', 'md']}>
<FancyContentCard.Box margin={['xs', 0]}>
<FancyContentCard.SubTitle layer={5} addLineHeight>
{'Grow steadily and pizza. Grow steadily and pizza. Grow steadily and pizza.Grow steadily and pizza.'}
</FancyContentCard.SubTitle>
</FancyContentCard.Box>
<FancyContentCard.Title weight="bold" addLineHeight>
{'Corporate'}
</FancyContentCard.Title>

<FancyContentCard.Descritpion layer={3} addLineHeight>
<DescriptionPreview
description={
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet ligula id libero tristique cursus. Mauris at volutpat leo. Vivamus in arcu non leo elementum cursus nec sit amet quam. Nullam eget nunc eget leo elementum sodales. Suspendisse potenti. Sed et sapien nec sapien convallis ullamcorper. Nulla facilisi. Curabitur at justo ac nisl auctor gravida non eget nibh.Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut vitae lacus non felis suscipit faucibus. Nulla facilisi. Duis dignissim nisl ut elit suscipit, et commodo leo cursus. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit.'
}
/>
</FancyContentCard.Descritpion>
</FancyContentCard.SpacingCard>
<FancyContentCard.Box margin={['xs', 0]}>
<FancyContentCard.Descritpion layer={3} addLineHeight>
<DescriptionPreview
description={
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet ligula id libero tristique cursus. Mauris at volutpat leo. Vivamus in arcu non leo elementum cursus nec sit amet quam. Nullam eget nunc eget leo elementum sodales. Suspendisse potenti. Sed et sapien nec sapien convallis ullamcorper. Nulla facilisi. Curabitur at justo ac nisl auctor gravida non eget nibh.Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut vitae lacus non felis suscipit faucibus. Nulla facilisi. Duis dignissim nisl ut elit suscipit, et commodo leo cursus. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit.'
}
/>
</FancyContentCard.Descritpion>
</FancyContentCard.Box>
</FancyContentCard.SpacingBox>
</FancyContentCard.FlexBox>
<FancyContentCard.SpacingCard padding={[0, 'sm', 'sm', 'sm']}>

<FancyContentCard.SpacingBox padding={[0, 'sm', 'sm', 'sm']}>
<FancyButton
label="Click me"
wide
themeType="secondary"
textColor="primary"
borderRadius="complete"
></FancyButton>
</FancyContentCard.SpacingCard>
</FancyContentCard.SpacingBox>
</FancyContentCard>
</div>
{/* LINEEE */}
Expand All @@ -150,7 +154,7 @@ export default function ExperimentalRoute() {
<FancyContentCard>
<FancyContentCard.FlexBox direction="column">
<FancyContentCard.Image className="card_image" src={'http://ilovepixel.eu/images/shibi.png'} />
<FancyContentCard.SpacingCard padding={[0, 'md', 'lg', 'md']}>
<FancyContentCard.SpacingBox padding={[0, 'md', 'lg', 'md']}>
<FancyContentCard.SubTitle layer={5} className="card_subtitle" addLineHeight>
{'Grow steadily and pizza. Grow steadily and pizza. Grow steadily and pizza.Grow steadily and pizza.'}
</FancyContentCard.SubTitle>
Expand All @@ -167,17 +171,17 @@ export default function ExperimentalRoute() {
text={{ showMore: 'Expand' }}
/>
</FancyContentCard.Descritpion>
</FancyContentCard.SpacingCard>
</FancyContentCard.SpacingBox>
</FancyContentCard.FlexBox>
<FancyContentCard.SpacingCard padding={['sm']}>
<FancyContentCard.SpacingBox padding={['sm']}>
<FancyButton
label="Click me"
wide
themeType="secondary"
textColor="primary"
borderRadius="complete"
></FancyButton>
</FancyContentCard.SpacingCard>
</FancyContentCard.SpacingBox>
</FancyContentCard>

{/* CARD 2222 */}
Expand All @@ -189,7 +193,7 @@ export default function ExperimentalRoute() {
<FancyContentCard>
<FancyContentCard.FlexBox direction="column">
<FancyContentCard.Image className="card_image" src={'http://ilovepixel.eu/images/shibi.png'} />
<FancyContentCard.SpacingCard padding={[0, 'md', 'lg', 'md']}>
<FancyContentCard.SpacingBox padding={[0, 'md', 'lg', 'md']}>
<FancyContentCard.SubTitle layer={5} className="card_subtitle" addLineHeight>
{'Grow steadily and pizza. Grow steadily and pizza. Grow steadily and pizza.Grow steadily and pizza.'}
</FancyContentCard.SubTitle>
Expand All @@ -206,17 +210,17 @@ export default function ExperimentalRoute() {
text={{ showMore: 'Expand' }}
/>
</FancyContentCard.Descritpion>
</FancyContentCard.SpacingCard>
</FancyContentCard.SpacingBox>
</FancyContentCard.FlexBox>
<FancyContentCard.SpacingCard padding={['sm']}>
<FancyContentCard.SpacingBox padding={['sm']}>
<FancyButton
label="Click me"
wide
themeType="secondary"
textColor="primary"
borderRadius="complete"
></FancyButton>
</FancyContentCard.SpacingCard>
</FancyContentCard.SpacingBox>
</FancyContentCard>
</div>
<DesignWrapper>
Expand Down
10 changes: 3 additions & 7 deletions src/components/templates/FancyMiniContentCard/Components/CardDescription.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,14 +6,10 @@ type TCardSubTitleProps = {
children: React.ReactNode;
} & React.ComponentProps<typeof Typography>;
export default function CardDescription(props: TCardSubTitleProps) {
const { children, className, type, variant, ...typoProps } = props;
const { children, type, variant, ...typoProps } = props;

return (
<Typography
className={`card_description ${className ?? ''}`}
type={type ?? 'content'}
variant={variant ?? 'inlineElement'}
{...typoProps}
>
<Typography type={type ?? 'content'} variant={variant ?? 'inlineElement'} {...typoProps}>
{children}
</Typography>
);
Expand Down
9 changes: 2 additions & 7 deletions src/components/templates/FancyMiniContentCard/Components/CardSubTitle.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,14 +6,9 @@ type TCardSubTitleProps = {
children: React.ReactNode;
} & React.ComponentProps<typeof Typography>;
export default function CardSubTitle(props: TCardSubTitleProps) {
const { children, type, variant, className, ...typoProps } = props;
const { children, type, variant, ...typoProps } = props;
return (
<Typography
className={`card_subtitle ${className ?? ''}`}
type={type ?? 'content'}
variant={variant ?? 'verysmText'}
{...typoProps}
>
<Typography type={type ?? 'content'} variant={variant ?? 'verysmText'} {...typoProps}>
{children}
</Typography>
);
Expand Down
4 changes: 2 additions & 2 deletions src/components/templates/FancyMiniContentCard/Components/CardTitle.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,9 @@ type TCardTitleProps = {
children: React.ReactNode;
} & React.ComponentProps<typeof Typography>;
export default function CardTitle(props: TCardTitleProps) {
const { children, type, className, ...typoProps } = props;
const { children, type, ...typoProps } = props;
return (
<Typography className={`card_title ${className ?? ''}`} type={type ?? 'h4'} weight={'normal'} {...typoProps}>
<Typography type={type ?? 'h4'} weight={'normal'} {...typoProps}>
{children}
</Typography>
);
Expand Down
12 changes: 7 additions & 5 deletions src/components/templates/FancyMiniContentCard/FancyMiniContentCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,12 +7,12 @@ import { TComponentSizes } from '@/interface/TComponentSizes';
import { FancyBox } from '@/components/atoms/FancyBox';
import { FancyFlexBox } from '@/components/templates/FancyFlexBox';
import { generateFancyMiniContentCardStyle } from '@/components/templates/FancyMiniContentCard/FancyMiniContentCard.style';

import CardImage from '@/components/templates/FancyMiniContentCard/Components/CardImage';
import CardTitle from '@/components/templates/FancyMiniContentCard/Components/CardTitle';
import CardSubTitle from '@/components/templates/FancyMiniContentCard/Components/CardSubTitle';
import CardSpacing from '@/components/templates/FancyMiniContentCard/Components/CardSpacing';
import CardDescription from '@/components/templates/FancyMiniContentCard/Components/CardDescription';
import { FancyAlignBox } from '@/components/templates/FancyAlignBox';
import { FancyImage } from '@/components/atoms/FancyImage';

export type TFancyMiniContentCardProps = {
symbol?: React.ReactNode;
Expand Down Expand Up @@ -41,11 +41,13 @@ function FancyContentCard(props: TFancyMiniContentCardProps) {
);
}

FancyContentCard.Image = CardImage;
FancyContentCard.Image = FancyImage;
FancyContentCard.Title = CardTitle;
FancyContentCard.FlexBox = FancyFlexBox;
FancyContentCard.SubTitle = CardSubTitle;
FancyContentCard.Descritpion = CardDescription;
FancyContentCard.SpacingCard = CardSpacing;

FancyContentCard.FlexBox = FancyFlexBox;
FancyContentCard.SpacingBox = CardSpacing;
FancyContentCard.Box = FancyAlignBox;

export default FancyContentCard;

0 comments on commit 455e911

Please sign in to comment.