Merge pull request #78 from topcoder-platform/PROD-1111_cards

PROD-1111 card component - PROD-1069_re-style

Author: testflyjets

src/lib/styles/_cards.scss renamed to src/lib/card/Card.module.scss

@@ -1,10 +1,9 @@
-@import './palette';
-@import './typography';
+@import '../styles';
 
 .card {
-    padding: 16px 16px 32px 16px;
-    border: solid 1px $black-10;
-    border-radius: 8px;
+    padding: $pad-lg $pad-lg $pad-xxxxl $pad-lg;
+    border: solid $border-xs $black-10;
+    border-radius: $pad-sm;
 
     .card-title {
         @include font-weight-semi-bold;

src/lib/button/Buttons.test.tsx renamed to src/lib/card/Card.test.tsx

@@ -1,6 +1,6 @@
 import '@testing-library/jest-dom'
 
-describe('<Button />', () => {
+describe('<Card />', () => {
 
     test('it should render the content', () => { })
 })

src/lib/card/Card.tsx

@@ -0,0 +1,31 @@
+import { FC, ReactNode, SVGProps } from 'react'
+
+import styles from './Card.module.scss'
+
+export interface CardProps {
+    children: ReactNode
+    icon?: FC<SVGProps<SVGSVGElement>>
+    title: string
+}
+
+const Card: FC<CardProps> = (props: CardProps) => {
+
+    const Icon: FC<SVGProps<SVGSVGElement>> | undefined = props.icon
+
+    return (
+        <div className={styles.card}>
+
+            <div className={styles['card-title']}>
+                <div>
+                    {props.title}
+                </div>
+                {!!Icon && <Icon />}
+            </div>
+
+            {props.children}
+
+        </div>
+    )
+}
+
+export default Card

src/lib/card/index.ts

@@ -0,0 +1 @@
+export { default as Card } from './Card'

src/lib/content-layout/ContentLayout.module.scss

@@ -7,10 +7,6 @@
     grid-template-columns: 1fr;
     justify-content: center;
 
-    @include xxl {
-        padding: 0;
-    }
-
     @include md {
         padding: 0 $pad-xxl;
     }

src/lib/form/form-input/form-field-wrapper/FormFieldWrapper.module.scss

@@ -1,7 +1,6 @@
 @import '../../../styles';
 
 $form-pad-top: calc($pad-md - $border);
-$border-xs: 1px;
 $error-line-height: 14px;
 
 .form-field-wrapper {

src/lib/index.ts

@@ -1,5 +1,6 @@
 export * from './avatar'
 export * from './button'
+export * from './card'
 export * from './content-layout'
 export * from './form'
 export * from './global-config.model'

src/lib/styles/_layout.scss

@@ -8,6 +8,7 @@ $left-col-width-xl: calc(1.3 * $header-height);
 /* TODO: determine which UI library to use and replace below */
 
 /* Padding */
+$border-xs: 1px;
 $border: 2px;
 $pad-xs: calc(2 * $border); // 4
 $pad-sm: calc(2 * $pad-xs); // 8

src/lib/styles/index.scss

@@ -2,7 +2,6 @@
 
 @import 'breakpoints';
 @import 'buttons';
-@import 'cards';
 @import 'fonts';
 @import 'icons';
 @import 'layout';

src/utils/settings/Settings.tsx

@@ -8,6 +8,7 @@ import {
     authUrlLogin,
     Avatar,
     Button,
+    Card,
     ContentLayout,
     IconOutline,
     profileContext,
@@ -74,52 +75,38 @@ const Settings: FC<{}> = () => {
 
                 <div className={styles['page-content']}>
 
-                    <div className='card'>
-
-                        <div className='card-title'>
-                            <div>
-                                Basic Information
-                            </div>
-                            <IconOutline.UserIcon />
-                        </div>
-
+                    <Card
+                        icon={IconOutline.UserIcon}
+                        title='Basic Information'
+                    >
                         <Button
                             label='edit'
                             onClick={toggleEditProfile}
                             tabIndex={1}
                             buttonStyle='link'
                         />
-
-                    </div>
+                    </Card>
 
                     <Modal
-                        center
                         open={editProfileOpen}
                         onClose={toggleEditProfile}
                     >
                         <ProfileUpdate onClose={toggleEditProfile} />
                     </Modal>
 
-                    <div className='card'>
-
-                        <div className='card-title'>
-                            <div>
-                                Reset Password
-                            </div>
-                            <IconOutline.LockClosedIcon />
-                        </div>
-
+                    <Card
+                        icon={IconOutline.LockClosedIcon}
+                        title='Reset Password'
+                    >
                         <Button
                             label='edit'
                             onClick={toggleResetPassword}
                             tabIndex={2}
                             buttonStyle='link'
                         />
-
-                    </div>
+                    </Card>
 
                     <Modal
-                        center
                         open={resetPasswordOpen}
                         onClose={toggleResetPassword}
                     >