diff --git a/__snapshots__/card--card-news-chromium.png b/__snapshots__/card--card-news-chromium.png index 0fe2a72d..602181ae 100644 Binary files a/__snapshots__/card--card-news-chromium.png and b/__snapshots__/card--card-news-chromium.png differ diff --git a/__snapshots__/card--card-news-firefox.png b/__snapshots__/card--card-news-firefox.png index aa46121c..2206ee16 100644 Binary files a/__snapshots__/card--card-news-firefox.png and b/__snapshots__/card--card-news-firefox.png differ diff --git a/__snapshots__/card--card-news-webkit.png b/__snapshots__/card--card-news-webkit.png index c9d621e6..20f78a01 100644 Binary files a/__snapshots__/card--card-news-webkit.png and b/__snapshots__/card--card-news-webkit.png differ diff --git a/__snapshots__/container--container-row-col-chromium.png b/__snapshots__/container--container-row-col-chromium.png index 42f61d9e..b82d2ee4 100644 Binary files a/__snapshots__/container--container-row-col-chromium.png and b/__snapshots__/container--container-row-col-chromium.png differ diff --git a/__snapshots__/container--container-row-col-firefox.png b/__snapshots__/container--container-row-col-firefox.png index 3bc24977..08f26a05 100644 Binary files a/__snapshots__/container--container-row-col-firefox.png and b/__snapshots__/container--container-row-col-firefox.png differ diff --git a/__snapshots__/container--container-row-col-webkit.png b/__snapshots__/container--container-row-col-webkit.png index 357798db..c99d2d1d 100644 Binary files a/__snapshots__/container--container-row-col-webkit.png and b/__snapshots__/container--container-row-col-webkit.png differ diff --git a/__snapshots__/container--container-with-news-chromium.png b/__snapshots__/container--container-with-news-chromium.png index 5c8c8661..9a21192e 100644 Binary files a/__snapshots__/container--container-with-news-chromium.png and b/__snapshots__/container--container-with-news-chromium.png differ diff --git a/__snapshots__/container--container-with-news-firefox.png b/__snapshots__/container--container-with-news-firefox.png index 8e1f7e96..f35768c5 100644 Binary files a/__snapshots__/container--container-with-news-firefox.png and b/__snapshots__/container--container-with-news-firefox.png differ diff --git a/__snapshots__/container--container-with-news-webkit.png b/__snapshots__/container--container-with-news-webkit.png index b9a58772..5a28853a 100644 Binary files a/__snapshots__/container--container-with-news-webkit.png and b/__snapshots__/container--container-with-news-webkit.png differ diff --git a/__snapshots__/quote--quote-with-logo-chromium.png b/__snapshots__/quote--quote-with-logo-chromium.png index d9b89f36..18d6ac42 100644 Binary files a/__snapshots__/quote--quote-with-logo-chromium.png and b/__snapshots__/quote--quote-with-logo-chromium.png differ diff --git a/__snapshots__/quote--quote-with-logo-firefox.png b/__snapshots__/quote--quote-with-logo-firefox.png index ee595351..19cade95 100644 Binary files a/__snapshots__/quote--quote-with-logo-firefox.png and b/__snapshots__/quote--quote-with-logo-firefox.png differ diff --git a/__snapshots__/quote--quote-with-logo-webkit.png b/__snapshots__/quote--quote-with-logo-webkit.png index 130dcb38..9408e0e1 100644 Binary files a/__snapshots__/quote--quote-with-logo-webkit.png and b/__snapshots__/quote--quote-with-logo-webkit.png differ diff --git a/__snapshots__/quote--quote-without-logo-chromium.png b/__snapshots__/quote--quote-without-logo-chromium.png index 5971c0cb..27aa29ee 100644 Binary files a/__snapshots__/quote--quote-without-logo-chromium.png and b/__snapshots__/quote--quote-without-logo-chromium.png differ diff --git a/__snapshots__/quote--quote-without-logo-firefox.png b/__snapshots__/quote--quote-without-logo-firefox.png index 58b01c11..54677c00 100644 Binary files a/__snapshots__/quote--quote-without-logo-firefox.png and b/__snapshots__/quote--quote-without-logo-firefox.png differ diff --git a/__snapshots__/quote--quote-without-logo-webkit.png b/__snapshots__/quote--quote-without-logo-webkit.png index e2b94fa6..6f7036f0 100644 Binary files a/__snapshots__/quote--quote-without-logo-webkit.png and b/__snapshots__/quote--quote-without-logo-webkit.png differ diff --git a/src/components/card/Card.stories.tsx b/src/components/card/Card.stories.tsx index 02c4e584..1d15bff2 100644 --- a/src/components/card/Card.stories.tsx +++ b/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 - + {""} - - + +
- - + + Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut - + } , args: { - variant: "none", + variant: "normal", color: "secondary", - outline: true, + outline: false, gradient: true, gradientPosition: "top-right" } diff --git a/src/components/card/Card.style.scss b/src/components/card/Card.style.scss index cffed75b..bb2ec6b4 100644 --- a/src/components/card/Card.style.scss +++ b/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); + } } \ No newline at end of file diff --git a/src/components/card/Card.tsx b/src/components/card/Card.tsx index e40a9122..27d242ff 100644 --- a/src/components/card/Card.tsx +++ b/src/components/card/Card.tsx @@ -9,25 +9,17 @@ export interface CardType extends Code0Component { //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 { - children: ReactNode | ReactNode[] - //defaults to false - image?: boolean, - //defaults to false - border?: boolean -} - - const Card: React.FC = (props) => { const { @@ -35,35 +27,28 @@ const Card: React.FC = (props) => { color = "secondary", variant = "normal", gradient = false, - gradientPosition = "top-right", + firstGradientColor = "info", + secondGradientColor = "secondary", + borderColor = "info", outline = false, ...args } = props return <> -
- {children} -
- -} - -const CardSection: React.FC = (props) => { - - const { - image = false, - border = false, - children, - ...args - } = props; - - return <> -
+
{children}
} -export default Object.assign(Card, { - Section: CardSection, -}) \ No newline at end of file +export default Card \ No newline at end of file diff --git a/src/components/card/CardSection.tsx b/src/components/card/CardSection.tsx new file mode 100644 index 00000000..f8c37664 --- /dev/null +++ b/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 { + children: ReactNode | ReactNode[] + //defaults to false + image?: boolean, + //defaults to false + border?: boolean +} + +const CardSection: React.FC = (props) => { + + const { + image = false, + border = false, + children, + ...args + } = props; + + return <> +
+ {children} +
+ +} + +export default CardSection \ No newline at end of file diff --git a/src/components/container/Container.stories.tsx b/src/components/container/Container.stories.tsx index 072a15af..e03349ed 100644 --- a/src/components/container/Container.stories.tsx +++ b/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 = () => { }}> - + {""} - - + +
{
- - + + Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut - + diff --git a/src/components/quote/Quote.stories.tsx b/src/components/quote/Quote.stories.tsx index 021d1b68..d3c6a0a0 100644 --- a/src/components/quote/Quote.stories.tsx +++ b/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 diff --git a/src/components/quote/Quote.tsx b/src/components/quote/Quote.tsx index 844db034..15555527 100644 --- a/src/components/quote/Quote.tsx +++ b/src/components/quote/Quote.tsx @@ -2,6 +2,7 @@ import React from "react"; import Card, {CardType} from "../card/Card"; import "./Quote.style.scss" import Text from "../Text/Text"; +import CardSection from "../card/CardSection"; export interface QuoteType extends Omit { children: string @@ -16,12 +17,12 @@ const Quote: React.FC = (props) => { const {logo, name, position, inlineBorder = true, children, ...args} = props; return
- +
{children}
- - + + { !!logo ?
{"logo @@ -31,7 +32,7 @@ const Quote: React.FC = (props) => { {name} {position}
- +
}