Merge pull request #23 from code0-tech/card

Card component and general changes

.storybook/test-runner.ts

@@ -38,13 +38,16 @@ const executeVisualTest = async (page, context) => {
   });
 }
 
+const sleep = (time) => new Promise(resolve => setTimeout(resolve, time));
+
 const config: TestRunnerConfig = {
   setup() {
     expect.extend({ toMatchImageSnapshot });
   },
   async postVisit(page, context) {
     await waitForPageReady(page);
     await prepareA11y(page);
+    await sleep(2000);
     await executeA11y(page, context);
     await executeVisualTest(page, context);
   },

src/components/button-group/ButtonGroup.style.scss

@@ -6,9 +6,8 @@
   border: none;
   width: fit-content;
   position: relative;
-  margin-bottom: 1rem !important;
+  margin-bottom: 1rem;
   display: flex;
-  flex-flow: row wrap;
 
   * {
     margin-bottom: 0;
@@ -17,11 +16,11 @@
   .button {
     margin-bottom: 0;
     border-radius: 0;
-    display: flex;
+    display: inline-flex;
   }
 
   > div, .dropdown__trigger, .dropdown {
-    display: flex;
+    display: inline-flex;
     margin-bottom: 0 !important;
   }
 

src/components/card/Card.stories.tsx

@@ -0,0 +1,51 @@
+import {Meta} from "@storybook/react";
+import React from "react";
+import Card from "./Card";
+import ListGroup from "../list-group/ListGroup";
+import {CardFooter} from "./CardFooter";
+import ButtonGroup from "../button-group/ButtonGroup";
+import Button from "../button/Button";
+import Dropdown from "../dropdown/Dropdown";
+
+const meta: Meta = {
+    title: "Card",
+    component: Card
+}
+
+export default meta
+
+export const Test = () => {
+    return <Card variant={"secondary"}>
+        <Card.Image alt={"Nico Sammito"} src={"https://event.gls-west.de/Nico_Sammito.jpg"}/>
+        <Card.Header>
+            <Card.Title>Nico Sammito</Card.Title>
+            <Card.Subtitle>Co-Founder</Card.Subtitle>
+        </Card.Header>
+        <ListGroup>
+            <Dropdown position={"right"}>
+                <Dropdown.Trigger>
+                    <ListGroup.Item>
+                        Test
+                    </ListGroup.Item>
+                </Dropdown.Trigger>
+                <Dropdown.Menu>
+                    <Dropdown.Header>
+                        test
+                    </Dropdown.Header>
+                    Test
+                </Dropdown.Menu>
+            </Dropdown>
+
+        </ListGroup>
+        <CardFooter>
+            <ButtonGroup>
+                <Button>
+                    Button
+                </Button>
+                <Button>
+                    Button
+                </Button>
+            </ButtonGroup>
+        </CardFooter>
+    </Card>
+}

src/components/card/Card.style.scss

@@ -0,0 +1,81 @@
+@import "../../styles/helpers";
+
+.card {
+  @include box(false);
+
+  --padding: .5rem;
+
+  padding: 0 var(--padding);
+  width: 200px;
+
+  > * {
+    &:first-child {
+      border-top-left-radius: $borderRadius;
+      border-top-right-radius: $borderRadius;
+    }
+
+    &:last-child {
+      border-bottom-left-radius: $borderRadius;
+      border-bottom-right-radius: $borderRadius;
+    }
+  }
+
+  &__img, &__header, &__footer {
+    border-bottom: 1px solid borderColor();
+    padding: var(--padding);
+    margin: 0 calc(-1 * var(--padding));
+
+    &:last-child {
+      border-bottom: 0;
+    }
+
+    > * {
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+  }
+
+  &__img {
+    object-fit: cover;
+    padding: 0;
+    width: calc(100% + (var(--padding) * 2));
+  }
+
+  &__img + * {
+    position: relative;
+    margin-top: -4px !important;
+  }
+
+  &__title {
+    padding: 0;
+    font-size: $primaryFontSize;
+    color: rgba($white, 1);
+    font-weight: 500;
+    margin: 0 0 .5rem;
+  }
+
+  &__sub-title {
+    padding: 0;
+    font-size: $secondaryFontSize;
+    color: rgba($white, .75);
+    font-weight: 500;
+    margin: 0 0 .5rem;
+  }
+
+  &__title + &__sub-title {
+    margin-top: -.25rem;
+  }
+}
+
+@each $name, $color in $variants {
+  .card--#{$name} {
+    @include box(false, $color);
+
+    .list-group__item {
+      @include hoverAndActiveContent {
+        background: rgba(if($color == $primary, $white, $color), .1) !important;
+      }
+    }
+  }
+}

src/components/card/Card.tsx

@@ -0,0 +1,32 @@
+import React, {ReactElement} from "react";
+import "./Card.style.scss"
+import {CardImg, CardImgStyle} from "./CardImg";
+import {CardHeader, CardHeaderType} from "./CardHeader";
+import {CardTitle, CardTitleType} from "./CardTitle";
+import {CardSubTitle, CardSubTitleType} from "./CardSubTitle";
+import {CardFooter, CardFooterType} from "./CardFooter";
+
+export type CardChildType = CardHeaderType | CardImgStyle | CardTitleType | CardSubTitleType | CardFooterType | any
+
+export interface CardType {
+    children: ReactElement<CardChildType> | ReactElement<CardChildType>[]
+    //defaults to secondary
+    variant?: "primary" | "secondary" | "info" | "success" | "warning" | "error",
+}
+
+const Card: React.FC<CardType> = (props) => {
+
+    const {children, variant = "secondary", ...args} = props
+
+    return <div {...args} className={`card card--${variant}`}>
+        {children}
+    </div>
+}
+
+export default Object.assign(Card, {
+    Image: CardImg,
+    Header: CardHeader,
+    Footer: CardFooter,
+    Title: CardTitle,
+    Subtitle: CardSubTitle
+})

src/components/card/CardFooter.tsx

@@ -0,0 +1,22 @@
+import React, {ReactNode} from "react";
+import "./Card.style.scss"
+
+export interface CardFooterType {
+    children: ReactNode
+}
+
+/**
+ * Component creates a separate footer with border bottom
+ * for further separation
+ *
+ * @author Nico Sammito
+ * @since 0.1.0
+ */
+export const CardFooter: React.FC<CardFooterType> = (props) => {
+
+    const {children, ...args} = props
+
+    return <div {...args} className={"card__footer"}>
+        {children}
+    </div>
+}

src/components/card/CardHeader.tsx

@@ -0,0 +1,22 @@
+import React, {ReactNode} from "react";
+import "./Card.style.scss"
+
+export interface CardHeaderType {
+    children: ReactNode
+}
+
+/**
+ * Component creates a separate header with border bottom
+ * for further separation
+ *
+ * @author Nico Sammito
+ * @since 0.1.0
+ */
+export const CardHeader: React.FC<CardHeaderType> = (props) => {
+
+    const {children, ...args} = props
+
+    return <div {...args} className={"card__header"}>
+        {children}
+    </div>
+}

src/components/card/CardImg.tsx

@@ -0,0 +1,20 @@
+import React, {DetailedHTMLProps, ImgHTMLAttributes} from "react";
+import "./Card.style.scss"
+
+export interface CardImgStyle extends DetailedHTMLProps<ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement> {
+  //empty
+}
+
+/**
+ * Image component for cards. Image will be shown without padding to card
+ * and with the desired high.
+ *
+ * @author Nico Sammito
+ * @since 0.1.0
+ */
+export const CardImg: React.FC<CardImgStyle> = (props) => {
+
+    const {...args} = props
+
+    return <img {...args} className={"card__img"}/>
+}

src/components/card/CardSubTitle.tsx

@@ -0,0 +1,21 @@
+import React, {ReactNode} from "react";
+import "./Card.style.scss"
+
+export interface CardSubTitleType {
+    children: string
+}
+
+/**
+ * Component creates a sub title for card component
+ *
+ * @author Nico Sammito
+ * @since 0.1.0
+ */
+export const CardSubTitle: React.FC<CardSubTitleType> = (props) => {
+
+    const {children, ...args} = props
+
+    return <h5 {...args} className={"card__sub-title"}>
+        {children}
+    </h5>
+}

src/components/card/CardTitle.tsx

@@ -0,0 +1,21 @@
+import React, {ReactNode} from "react";
+import "./Card.style.scss"
+
+export interface CardTitleType {
+    children: string
+}
+
+/**
+ * Component creates a title for card component
+ *
+ * @author Nico Sammito
+ * @since 0.1.0
+ */
+export const CardTitle: React.FC<CardTitleType> = (props) => {
+
+    const {children, ...args} = props
+
+    return <h4 {...args} className={"card__title"}>
+        {children}
+    </h4>
+}

src/components/dropdown/Dropdown.style.scss

@@ -5,7 +5,6 @@
   $color: $secondary;
 
   position: relative;
-  margin-bottom: 1rem !important;
   width: fit-content;
 
   &__trigger {
@@ -103,7 +102,7 @@
     }
 
     &[data-position="bottom"] {
-      top: calc(100% + .5rem);
+      top: calc(100% + 1rem);
     }
 
     &[data-position="top"] {

src/components/list-group/ListGroup.style.scss

@@ -0,0 +1,41 @@
+@import "../../styles/helpers";
+
+.list-group {
+
+  border-bottom: 1px solid borderColor();
+  margin: 0 calc(-1 * var(--padding));
+  padding: 0 var(--padding);
+
+  &:last-of-type {
+    border-bottom: 0;
+  }
+
+  &__item {
+
+    margin: 0 calc(-1 * var(--padding));
+    padding: var(--padding);
+    cursor: pointer;
+
+    border-bottom: 1px solid borderColor();
+
+    @include hoverAndActiveContent {
+      background: rgba($white, .1);
+    }
+
+    &:last-of-type {
+      border-bottom: 0;
+    }
+  }
+
+  //enable to put the item as a dropdown__trigger
+  .dropdown__trigger {
+    display: block;
+    width: 100%;
+  }
+
+  .dropdown {
+    width: calc(100% + (var(--padding) * 2)) !important;
+    margin: 0 calc(-1 * var(--padding));
+  }
+
+}