fix: outline and added option to change borderColor and gradient separately

src/components/card/Card.stories.tsx

@@ -1,12 +1,13 @@
 import {Meta, StoryObj} from "@storybook/react";
 import React, {useState} from "react";
-import Card, {CardType} from "./Card";
+import Card from "./Card";
 import Badge from "../badge/Badge";
 import Text from "../Text/Text";
 import {Colors} from "../../utils/types";
 import ButtonGroup from "../button-group/ButtonGroup";
 import Button from "../button/Button";
-import {IconHeart, IconHeartFilled, IconShare, IconStar, IconStarFilled} from "@tabler/icons-react";
+import {IconHeart, IconHeartFilled, IconShare} from "@tabler/icons-react";
+import CardSection from "./CardSection";
 
 const meta: Meta = {
     title: "Card",
@@ -23,10 +24,6 @@ const meta: Meta = {
         gradient: {
             type: "boolean"
         },
-        gradientPosition: {
-            options: ["top-left", "top-right", "bottom-right", "bottom-left"],
-            control: {type: 'radio'},
-        },
         outline: {
             type: "boolean"
         }
@@ -42,18 +39,18 @@ export const CardNews: CardStory = {
 
         const [heart, setHeart] = useState(false)
 
-        return <Card outline={props.outline} variant={props.variant} gradientPosition={props.gradientPosition} gradient={props.gradient}
+        return <Card outline={props.outline} variant={props.variant} gradient={props.gradient}
                      color={props.color} style={{
             width: "50vw",
             maxWidth: "350px"
         }}>
 
 
-            <Card.Section image border>
+            <CardSection image border>
                 <img alt={""} width={"100%"}
                      src={"https://repository-images.githubusercontent.com/725262039/8250ad12-4a52-4c89-9b16-6d4186dbb325"}></img>
-            </Card.Section>
-            <Card.Section>
+            </CardSection>
+            <CardSection>
                 <div style={{
                     display: "flex",
                     justifyContent: "space-between",
@@ -79,20 +76,20 @@ export const CardNews: CardStory = {
                         </Button>
                     </ButtonGroup>
                 </div>
-            </Card.Section>
-            <Card.Section border>
+            </CardSection>
+            <CardSection border>
                 <Text hierarchy={"tertiary"} size={"md"}>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
                     diam
                     nonumy eirmod tempor invidunt ut</Text>
-            </Card.Section>
+            </CardSection>
 
         </Card>
     }
     ,
     args: {
-        variant: "none",
+        variant: "normal",
         color: "secondary",
-        outline: true,
+        outline: false,
         gradient: true,
         gradientPosition: "top-right"
     }

src/components/card/Card.style.scss

@@ -1,14 +1,17 @@
 @import "../../styles/helpers";
 
+$padding: $xs;
+
 .card {
-  padding: .5rem;
+
+  display: block;
+  padding: $padding;
   position: relative;
-  overflow: hidden;
 
   * {
 
     &.card__section > img {
-      border-radius: .5rem;
+      border-radius: $borderRadius / 2;
     }
 
     &:first-child.card__section {
@@ -20,6 +23,7 @@
       }
 
     }
+
     &:last-child.card__section {
       margin-bottom: 0;
 
@@ -30,21 +34,15 @@
     }
   }
 
-  &--outline {
-    outline: 1px solid borderColor();
-    outline-offset: .5rem;
-    margin: .5rem;
-  }
-
   &__section {
-    margin-bottom: .5rem;
-    margin-top: .5rem;
+    margin-bottom: $padding;
+    margin-top: $padding;
     position: relative;
 
     &--border {
-      margin-right: -.5rem;
-      margin-left: -.5rem;
-      padding: .5rem;
+      margin-right: -1 * $padding;
+      margin-left: -1 * $padding;
+      padding: $padding;
 
       border-top: 1px solid borderColor();
       border-bottom: 1px solid borderColor();
@@ -58,14 +56,12 @@
 
 }
 
-@function getMixedColor($color) {
-  @return mix($bodyBg, if($color == $primary, $white, $color), if($color == $primary, 90%, 80%));
-}
-
 @each $name, $color in $colors {
   .card--#{$name} {
     @include box(false, $color);
 
+    //variants
+
     &.card--none {
       background: transparent;
       border-color: transparent;
@@ -75,42 +71,36 @@
       border-color: transparent;
     }
 
+    &.card--outline {
+      outline: 1px solid borderColor();
+      outline-offset: $padding;
+      margin: $padding;
+    }
+
     &.card--outlined {
       background: transparent;
     }
 
+    //gradient
 
     &.card--gradient {
 
-      &:before {
-        position: absolute;
-        width: 100%;
-        height: 100%;
-        top: 0;
-        left: 0;
-        opacity: 75%;
-        content: "";
-      }
-
+      @each $firstGradientName, $firstGradientColor in $colors {
 
-      &.card--gradient-top-left:before {
-        background: linear-gradient(135deg, backgroundColor($color) 0%, transparent 50%);
-      }
-
-      &.card--gradient-bottom-left:before {
-        background: linear-gradient(45deg, backgroundColor($color) 0%, transparent 50%);
-      }
+        @each $secondGradientName, $secondGradientColor in $colors {
 
-      &.card--gradient-top-right:before {
-        background: linear-gradient(225deg, backgroundColor($color) 0%, transparent 50%);
-      }
+          &--#{$firstGradientName}-#{$secondGradientName} {
+            box-shadow: inset $padding $padding $padding (-1 * $padding) backgroundColor($firstGradientColor),
+                        inset (-1 * $padding) (-1 * $padding) $padding (-1 * $padding) backgroundColor($secondGradientColor);
+          }
 
-      &.card--gradient-bottom-right:before {
-        background: linear-gradient(315deg, backgroundColor($color) 0%, transparent 50%);
+        }
       }
-
-
     }
 
   }
+
+  .card--border-#{$name} {
+    border-color: borderColor($color);
+  }
 }

src/components/card/Card.tsx

@@ -9,61 +9,46 @@ export interface CardType extends Code0Component<HTMLDivElement> {
     //defaults to secondary
     color?: Color,
     //defaults to normal
-    variant?: "none" | "normal" | "outlined" | "filled",
+    variant?: "none" | "normal" | "outlined" | "filled"
     //defaults to false
     gradient?: boolean,
-    //defaults to top-right
-    gradientPosition?: "top-left" | "top-right" | "bottom-right" | "bottom-left"
+    firstGradientColor?: Color
+    secondGradientColor?: Color
+    borderColor?: Color
     //defaults to false
     outline?: boolean
 }
 
 
-export interface SectionType extends Code0Component<HTMLDivElement> {
-    children: ReactNode | ReactNode[]
-    //defaults to false
-    image?: boolean,
-    //defaults to false
-    border?: boolean
-}
-
-
 const Card: React.FC<CardType> = (props) => {
 
     const {
         children,
         color = "secondary",
         variant = "normal",
         gradient = false,
-        gradientPosition = "top-right",
+        firstGradientColor = "info",
+        secondGradientColor = "secondary",
+        borderColor = "info",
         outline = false,
         ...args
     } = props
 
     return <>
-        <div {...mergeCode0Props(`card ${outline ? "card--outline" : ""} ${gradient ? "card--gradient" : ""} ${gradient ? `card--gradient-${gradientPosition}` : ""} card--${color} card--${variant}`, args)}>
-            {children}
-        </div>
-    </>
-}
-
-const CardSection: React.FC<SectionType> = (props) => {
-
-    const {
-        image = false,
-        border = false,
-        children,
-        ...args
-    } = props;
-
-    return <>
-        <div {...mergeCode0Props(`card__section ${border ? "card__section--border" : ""} ${image ? "card__section--image" : ""}`, args)}>
+        <div {...mergeCode0Props(
+            `
+                    card 
+                    card--${color} card--${variant}
+                    ${outline ? "card--outline" : ""} 
+                    ${gradient ? "card--gradient" : ""} 
+                    ${borderColor ? `card--border-${borderColor}` : ""} 
+                    ${gradient ? `card--gradient--${firstGradientColor}-${secondGradientColor}` : ""} 
+               `
+            , args)}>
             {children}
         </div>
     </>
 }
 
 
-export default Object.assign(Card, {
-    Section: CardSection,
-})
+export default Card

src/components/card/CardSection.tsx

@@ -0,0 +1,29 @@
+import {Code0Component} from "../../utils/types";
+import React, {ReactNode} from "react";
+import {mergeCode0Props} from "../../utils/utils";
+
+export interface SectionType extends Code0Component<HTMLDivElement> {
+    children: ReactNode | ReactNode[]
+    //defaults to false
+    image?: boolean,
+    //defaults to false
+    border?: boolean
+}
+
+const CardSection: React.FC<SectionType> = (props) => {
+
+    const {
+        image = false,
+        border = false,
+        children,
+        ...args
+    } = props;
+
+    return <>
+        <div {...mergeCode0Props(`card__section ${border ? "card__section--border" : ""} ${image ? "card__section--image" : ""}`, args)}>
+            {children}
+        </div>
+    </>
+}
+
+export default CardSection

src/components/container/Container.stories.tsx

@@ -9,6 +9,7 @@ import {IconHeart, IconShare} from "@tabler/icons-react";
 import React from "react";
 import Row from "../row/Row";
 import Col from "../col/Col";
+import CardSection from "../card/CardSection";
 
 const meta: Meta = {
     title: "Container",
@@ -26,11 +27,11 @@ export const ContainerWithNews = () => {
         }}>
 
 
-            <Card.Section image border>
+            <CardSection image border>
                 <img alt={""} width={"100%"}
                      src={"https://repository-images.githubusercontent.com/725262039/8250ad12-4a52-4c89-9b16-6d4186dbb325"}></img>
-            </Card.Section>
-            <Card.Section>
+            </CardSection>
+            <CardSection>
                 <div style={{
                     display: "flex",
                     justifyContent: "space-between",
@@ -50,12 +51,12 @@ export const ContainerWithNews = () => {
                         </Button>
                     </ButtonGroup>
                 </div>
-            </Card.Section>
-            <Card.Section border>
+            </CardSection>
+            <CardSection border>
                 <Text hierarchy={"tertiary"} size={"md"}>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
                     diam
                     nonumy eirmod tempor invidunt ut</Text>
-            </Card.Section>
+            </CardSection>
 
         </Card>
     </Container>

src/components/quote/Quote.stories.tsx

@@ -18,10 +18,6 @@ const meta: Meta = {
         gradient: {
             type: "boolean"
         },
-        gradientPosition: {
-            options: ["top-left", "top-right", "bottom-right", "bottom-left"],
-            control: {type: 'radio'},
-        },
         outline: {
             type: "boolean"
         },
@@ -53,6 +49,8 @@ export const QuoteWithLogo: QuoteStory = {
         color: "secondary",
         outline: false,
         gradient: true,
+        borderColor: "secondary",
+        firstGradientColor: "secondary",
         gradientPosition: "bottom-left",
         inlineBorder: true
     }
@@ -73,6 +71,8 @@ export const QuoteWithoutLogo: QuoteStory = {
         variant: "outlined",
         color: "secondary",
         outline: false,
+        borderColor: "secondary",
+        firstGradientColor: "secondary",
         gradient: true,
         gradientPosition: "bottom-left",
         inlineBorder: true