Add some props to PlanCard

.changeset/nice-beers-press.md

@@ -0,0 +1,5 @@
+---
+"@web3uikit/core": patch
+---
+
+Add new props to PlanCard component

packages/core/src/lib/PlanCard/PlanCard.stories.tsx

@@ -1,7 +1,10 @@
-
 import { ComponentStory, ComponentMeta } from '@storybook/react';
 import data from './mock';
 import PlanCard from './PlanCard';
+import { color } from '@web3uikit/styles';
+import { Checkmark } from '@web3uikit/icons';
+import { Button } from '../Button';
+import { Typography } from '../Typography';
 
 export default {
     title: 'Ui/PlanCard',
@@ -29,3 +32,37 @@ PlanCardStory.args = data.success;
 
 export const CurrentPlanStory = Template.bind({});
 CurrentPlanStory.args = { ...data.success, isCurrentPlan: true };
+
+export const PlanCardWithHorizonLine = Template.bind({});
+PlanCardWithHorizonLine.args = {
+    ...data.success,
+    horizontalLine: true,
+    borderColor: color.navy20,
+    backgroundColor: 'transparent',
+    isActive: false,
+};
+
+export const IconCustomPlanStory = Template.bind({});
+IconCustomPlanStory.args = {
+    description: [
+        'Unlimited ideas',
+        'Unlimited Plugins',
+        'Community Support',
+        'IPFS Gateway',
+    ],
+    footer: <Button text="Talk to Sales" theme="outline" isFullWidth={true} />,
+    subTitle: (
+        <Typography variant="h4" color={color.blue70} weight="600">
+            Enterprise
+        </Typography>
+    ),
+    descriptionTitle: (
+        <Typography color={color.blue70} weight="550" variant="caption14">
+            Everything in pro, plus
+        </Typography>
+    ),
+    horizontalLine: true,
+    borderColor: color.navy20,
+    backgroundColor: 'transparent',
+    icon: <Checkmark fill={color.mint40} />,
+};

packages/core/src/lib/PlanCard/PlanCard.styles.tsx

@@ -2,23 +2,33 @@ import styled from 'styled-components';
 import { color } from '@web3uikit/styles';
 import { IPlanCardProps } from './types';
 
-type TDivStyle = Pick<IPlanCardProps, 'isActive'>;
+type TDivStyle = Pick<
+    IPlanCardProps,
+    | 'isActive'
+    | 'borderColor'
+    | 'backgroundColor'
+    | 'height'
+    | 'width'
+    | 'maxWidth'
+>;
+type THrStyled = Pick<IPlanCardProps, 'borderColor'>;
 
 const DivStyled = styled.div<TDivStyle>`
-    background: #ffffff;
+    background: ${(props) => props.backgroundColor};
     border-radius: 20px;
-    border: 2px solid #c1d8e7;
+    border: 2px solid ${(props) => props.borderColor};
     box-sizing: border-box;
     display: flex;
     flex-direction: column;
-    height: 448px;
-    max-width: 386.67px;
+    height: ${(props) => (props.height ? props.height : '448px')};
+    max-width: ${(props) => (props.maxWidth ? props.maxWidth : '386.67px')};
     padding: 32px;
-    ${(props) =>
-        props.isActive &&
-        `
+    width: ${(props) => (props.width ? props.width : 'auto')}
+        ${(props) =>
+            props.isActive &&
+            `
       border-color: ${color.mint40};
-    `}
+    `};
 `;
 DivStyled.displayName = 'DivStyled';
 
@@ -29,17 +39,32 @@ const DivStyledFeatures = styled.div`
     overflow-y: auto;
     row-gap: 8px;
     & > div {
+        align-items: flex-start;
+        appearance: none;
         display: flex;
-        align-items: center;
+        gap: 5px;
+        svg {
+            flex: none;
+            margin-top: 5px;
+        }
     }
 `;
 
 const DivStyledCardFooter = styled.div`
+    display: flex;
+    flex-direction: column;
+    align-items: center;
     margin-top: auto;
 `;
 
+const HrStyled = styled.hr<THrStyled>`
+    border-top: 1px solid ${(props) => props.borderColor};
+    margin: 16px 0px;
+`;
+
 export default {
     DivStyled,
     DivStyledFeatures,
     DivStyledCardFooter,
+    HrStyled,
 };

packages/core/src/lib/PlanCard/PlanCard.test.tsx

@@ -6,41 +6,41 @@ import { test, expect, describe } from 'vitest';
 const { PlanCardStory, CurrentPlanStory } = composeStories(stories);
 
 describe('PlanCard', () => {
-    it('should render the render', () => {
+    test('should render the render', () => {
         const { container } = render(<PlanCardStory />);
         expect(container).toBeDefined();
     });
-    it('should render plan description', () => {
+    test('should render plan description', () => {
         const { getByText } = render(<PlanCardStory />);
         PlanCardStory.args?.description?.forEach((feature) => {
             expect(getByText(feature, { exact: false })).toBeDefined();
         });
     });
-    it('should render description title', () => {
+    test('should render description title', () => {
         const { getByText } = render(<PlanCardStory />);
         expect(
-            getByText(`${PlanCardStory.args?.descriptionTitle}`, {
-                exact: false,
-            }),
+            within(
+                PlanCardStory.args?.descriptionTitle as unknown as HTMLElement,
+            ),
         ).toBeDefined();
     });
-    it('should render footer', () => {
+    test('should render footer', () => {
         render(<PlanCardStory />);
         if (PlanCardStory?.args?.footer) {
             expect(
                 within(PlanCardStory?.args?.footer as unknown as HTMLElement),
             ).toBeDefined();
         }
     });
-    it('should render title', () => {
+    test('should render title', () => {
         render(<PlanCardStory />);
         if (PlanCardStory?.args?.title) {
             expect(
                 within(PlanCardStory?.args?.title as unknown as HTMLElement),
             ).toBeDefined();
         }
     });
-    it('should render your plan', () => {
+    test('should render your plan', () => {
         const { getByText } = render(<CurrentPlanStory />);
         expect(getByText('Your Plan', { exact: false })).toBeDefined();
     });

packages/core/src/lib/PlanCard/PlanCard.tsx

@@ -5,47 +5,60 @@ import { color } from '@web3uikit/styles';
 import { Check } from '@web3uikit/icons';
 import YourPlanButton from './Components/YourPlanButton';
 
-const { DivStyled, DivStyledFeatures, DivStyledCardFooter } = styles;
+const { DivStyled, DivStyledFeatures, DivStyledCardFooter, HrStyled } = styles;
 
 const PlanCard: React.FC<IPlanCardProps> = ({
+    backgroundColor = color.white,
+    borderColor = color.navy40,
     description,
-    footer,
-    subTitle,
     descriptionTitle,
-    title,
+    footer,
+    height,
+    width,
+    maxWidth,
+    horizontalLine = false,
+    icon,
     isActive,
     isCurrentPlan,
+    subTitle,
+    title,
     ...props
 }) => {
     return (
         <DivStyled
             className="PlanCard"
             data-testid="test-plan-card"
             isActive={isActive}
+            borderColor={borderColor}
+            backgroundColor={backgroundColor}
+            height={height}
+            width={width}
+            maxWidth={maxWidth}
             {...props}
         >
-            <Typography variant="subtitle1" weight="600" color={color.blue70}>
-                {subTitle}
+            <Typography>{subTitle}</Typography>
+            {horizontalLine ? (
+                <HrStyled borderColor={borderColor} />
+            ) : (
+                <Typography>{title}</Typography>
+            )}
+            <Typography style={{ marginBottom: '16px' }}>
+                {descriptionTitle}
             </Typography>
-            <Typography>{title}</Typography>
             <DivStyledFeatures>
-                <Typography
-                    variant="caption14"
-                    weight="semibold"
-                    color={color.blue70}
-                >
-                    {descriptionTitle}
-                </Typography>
                 {description.map((feature, index) => (
                     <div key={index}>
-                        <Check
-                            title="check icon"
-                            titleId="plan-card check icon"
-                            fill={color.mint40}
-                        />
+                        {icon ? (
+                            <>{icon}</>
+                        ) : (
+                            <Check
+                                title="check icon"
+                                titleId="plan-card check icon"
+                                fill={color.mint40}
+                            />
+                        )}
                         <Typography
                             variant="caption14"
-                            weight="semibold"
                             color={color.blueGray50}
                         >
                             {feature}
@@ -54,6 +67,7 @@ const PlanCard: React.FC<IPlanCardProps> = ({
                 ))}
             </DivStyledFeatures>
             <DivStyledCardFooter>
+                {horizontalLine && <Typography>{title}</Typography>}
                 {isCurrentPlan ? <YourPlanButton /> : footer}
             </DivStyledCardFooter>
         </DivStyled>

packages/core/src/lib/PlanCard/mock.tsx

@@ -1,5 +1,6 @@
 import { color } from '@web3uikit/styles';
 import { Button } from '../Button';
+import { Typography } from '../Typography';
 import { IPlanCardProps } from './types';
 
 export default {
@@ -18,8 +19,20 @@ export default {
                 <strong>FREE</strong>
             </h1>
         ),
-        subTitle: 'Starter Plan',
+        subTitle: (
+            <Typography variant="subtitle1" weight="600" color={color.blue70}>
+                Starter Plan
+            </Typography>
+        ),
         isActive: true,
-        descriptionTitle: 'Free Access To',
+        descriptionTitle: (
+            <Typography
+                variant="caption14"
+                weight="semibold"
+                color={color.blue70}
+            >
+                Free Access To
+            </Typography>
+        ),
     } as IPlanCardProps,
 };

packages/core/src/lib/PlanCard/types.ts

@@ -1,3 +1,4 @@
+import { color } from '@web3uikit/styles';
 export interface IPlanCardProps {
     /**
      * the description/features of the current plan
@@ -22,15 +23,54 @@ export interface IPlanCardProps {
     /**
      * the title component of the Card
      */
-    title: JSX.Element;
+    title?: JSX.Element;
 
     /**
      * the subtitle component of the Card
      */
-    subTitle: string;
+    subTitle: JSX.Element;
 
     /**
      * the description title component of the Card
      */
-    descriptionTitle: string;
+    descriptionTitle: JSX.Element;
+
+    /**
+     * a horizontal line on the top
+     */
+    horizontalLine: boolean;
+
+    /**
+     * border color
+     */
+    borderColor: typeof color | string;
+
+    /**
+     * Card background color
+     */
+    backgroundColor?: typeof color | string;
+
+    /**
+     * Custom icon for description list
+     */
+
+    icon?: JSX.Element;
+
+    /**
+     * set custom height
+     */
+
+    height?: string;
+
+    /**
+     *  set custom width
+     */
+
+    width?: string;
+
+    /**
+     * set custom  max width
+     */
+
+    maxWidth?: string;
 }