Card component

.storybook/preview.js

@@ -85,6 +85,8 @@ export const parameters = {
             ['Documentation', 'Live', 'Without style', 'Class based'],
             'Table',
             ['Documentation', 'Live', 'Without style', 'Class based'],
+            'Card',
+            ['Documentation', 'Live', 'Without style', 'Class based'],
           ],
           'Typography',
           [

example/src/components/CardDemo.tsx

@@ -0,0 +1,136 @@
+import {
+  Card,
+  CardHeader,
+  CardContent,
+  CardActions,
+  CardImage,
+  Heading,
+  List,
+  TYPE_LIST,
+  Button,
+  BUTTON_TYPE,
+  ListItem,
+  Paragraph,
+} from '@capgeminiuk/dcx-react-library';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faAngleRight } from '@fortawesome/free-solid-svg-icons';
+import './cardDemo.scss';
+
+export const CardDemo = () => {
+  return (
+    <div className="demo-cards-container">
+      <h1>Horizontal card example</h1>
+      <Card layout="horizontal">
+        <CardImage src="https://placehold.co/200" alt="card demo image" />
+        <div className="text-wrapper">
+          <CardHeader>
+            <Heading
+              className="card-heading-text"
+              level="h4"
+              label="Order ID"
+            />
+          </CardHeader>
+          <CardContent>
+            <List type={TYPE_LIST.UNORDERED} className="card-content-list">
+              {lisItems.map((i) => (
+                <ListItem key={i.id}>{i.name}</ListItem>
+              ))}
+            </List>
+          </CardContent>
+          <CardActions>
+            <Button type={BUTTON_TYPE.BUTTON}>
+              <FontAwesomeIcon icon={faAngleRight} />
+            </Button>
+          </CardActions>
+        </div>
+      </Card>
+      <h1>Vertical card example</h1>
+      <Card layout="vertical">
+        <CardImage src="https://placehold.co/200" alt="card demo image" />
+        <div className="text-wrapper">
+          <CardHeader>
+            <Heading className="heading-text" level="h4" label="Order ID" />
+          </CardHeader>
+          <CardContent>
+            <List type={TYPE_LIST.UNORDERED} className="content-list">
+              {lisItems.map((i) => (
+                <ListItem key={i.id}>{i.name}</ListItem>
+              ))}
+            </List>
+          </CardContent>
+          <CardActions>
+            <Button type={BUTTON_TYPE.BUTTON}>
+              <FontAwesomeIcon icon={faAngleRight} />
+            </Button>
+          </CardActions>
+        </div>
+      </Card>
+      <h1>Vertical card example, social-like post</h1>
+      <Card layout="vertical" className="social-card-demo">
+        <CardHeader className="card-user-info">
+          <CardImage
+            className="card-user_image"
+            src="https://placehold.co/40"
+            alt="card demo image"
+          />
+          <div className="card-user_heading">
+            <Heading level="h4" label="Shiba Inu" />
+            <Heading level="h6" label="Dog breed" />
+          </div>
+        </CardHeader>
+        <CardImage
+          className="post-image"
+          src="https://placehold.co/200x160"
+          alt="post image"
+        />
+        <CardContent className="social-card_content">
+          <Paragraph>
+            Nullam sodales semper ipsum, et luctus lacus sodales in. Nulla nibh
+            nisl, egestas et elit et, interdum cursus massa. Morbi luctus
+            consequat felis, eget sagittis nisi vestibulum sed.
+          </Paragraph>
+        </CardContent>
+        <CardActions className="social-card_actions">
+          <Button type={BUTTON_TYPE.BUTTON} label="LIKE"></Button>
+          <Button type={BUTTON_TYPE.BUTTON} label="SHARE"></Button>
+        </CardActions>
+      </Card>
+      <h1>Interactive card variant</h1>
+      <Card variant="interact">
+        <CardHeader>
+          <Heading className="heading-text" level="h4" label="Article title" />
+        </CardHeader>
+        <CardImage src="https://placehold.co/200" alt="card demo image" />
+        <CardContent>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet quam
+            placeat in...
+          </p>
+        </CardContent>
+      </Card>
+    </div>
+  );
+};
+
+const lisItems = [
+  {
+    id: 1,
+    name: 'Customer Number',
+  },
+  {
+    id: 2,
+    name: 'Dates of Sales',
+  },
+  {
+    id: 3,
+    name: 'Department',
+  },
+  {
+    id: 4,
+    name: 'Sale Cost (£)',
+  },
+  {
+    id: 5,
+    name: 'Status',
+  },
+];

example/src/components/cardDemo.scss

@@ -0,0 +1,177 @@
+.demo-cards-container {
+  display: flex;
+  flex-direction: column;
+  margin: 0 0 30px 30px;
+
+  h1:not(:first-child) {
+    margin-top: 100px;
+  }
+}
+
+.dcx-card-horizontal {
+  display: flex;
+  justify-content: space-between;
+  width: 550px;
+  max-height: 300px;
+  padding: 15px;
+  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
+
+  .text-wrapper {
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+
+    .dcx-card-horizontal {
+      .card-heading-text {
+        font-weight: 600;
+      }
+    }
+
+    .dcx-card-content-horizontal {
+      .card-content-list {
+        margin: 0;
+        padding: 0;
+        list-style: none;
+
+        li:not(:first-child) {
+          padding-top: 10px;
+        }
+      }
+    }
+  }
+
+  .dcx-card-image-horizontal {
+    max-width: 100%;
+    max-height: 100%;
+    margin-right: 50px;
+  }
+
+  .dcx-card-actions-horizontal {
+    align-self: flex-end;
+
+    button {
+      border: none;
+      background: none;
+    }
+  }
+}
+
+.dcx-card-vertical {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  width: 300px;
+  max-height: 550px;
+  padding: 25px;
+  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
+
+  .text-wrapper {
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+    margin-top: 30px;
+
+    .dcx-card-header-vertical {
+      .heading-text {
+        font-weight: 600;
+      }
+    }
+
+    .dcx-card-content-vertical {
+      .content-list {
+        margin: 0;
+        padding: 0;
+        list-style: none;
+
+        li:not(:first-child) {
+          padding-top: 10px;
+        }
+      }
+    }
+  }
+
+  .dcx-card-image-vertical {
+    max-width: 100%;
+    max-height: 100%;
+  }
+
+  .dcx-card-actions-vertical {
+    align-self: flex-end;
+
+    button {
+      border: none;
+      background: none;
+    }
+  }
+}
+
+.social-card-demo {
+  width: 300px;
+  max-height: 550px;
+  padding: 15px 0;
+  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
+
+  &.dcx-card-vertical {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+  }
+
+  .card-user-info {
+    padding: 0 15px;
+    display: flex;
+    align-items: center;
+
+    .card-user_heading {
+      margin-left: 20px;
+      flex-grow: 3;
+      h4 {
+        font-weight: 600;
+        margin: 0;
+      }
+      h6 {
+        margin-bottom: 0;
+        margin-top: 5px;
+      }
+    }
+
+    .card-user_image {
+      border-radius: 50%;
+    }
+  }
+
+  .post-image {
+    margin-top: 20px;
+    max-width: 100%;
+    max-height: 100%;
+  }
+
+  .social-card_content {
+    padding: 0 15px;
+    margin-top: 20px;
+    font-size: 12px;
+  }
+
+  .social-card_actions {
+    padding: 0 15px;
+    button {
+      border: none;
+      background: none;
+      font-weight: 600;
+    }
+  }
+}
+
+.dcx-card-interact {
+  &:hover {
+    box-shadow: rgba(0, 0, 255, 0.24) 0px 6px 12px;
+  }
+
+  .heading-text {
+    font-weight: 600;
+  }
+
+  .dcx-card-content {
+    margin-top: 15px;
+  }
+}

example/src/components/index.ts

@@ -25,3 +25,4 @@ export { BreadcrumbDemo } from './BreadcrumbDemo';
 export { AccordionDemo } from './AccordionDemo';
 export * from './library-candidates';
 export { ButtonGroupDemo } from './ButtonGroupDemo';
+export { CardDemo } from './CardDemo';

example/src/index.tsx

@@ -26,6 +26,7 @@ import {
   ListDemo,
   AccordionDemo,
   ButtonGroupDemo,
+  CardDemo,
 } from './components';
 import './global-styles.scss';
 import { Login } from './pages/Login';
@@ -74,6 +75,7 @@ const App = () => (
         <Route path="/breadcrumb" element={<BreadcrumbDemo />} />
         <Route path="/accordion" element={<AccordionDemo />} />
         <Route path="/buttonGroup" element={<ButtonGroupDemo />} />
+        <Route path="/card" element={<CardDemo />} />
       </Routes>
     </BrowserRouter>
   </div>