Merge pull request #58 from Synthetixio/card-fix

fix(card): fixed card border
Synthetixio · Apr 26, 2022 · 587cccf · 587cccf
2 parents 1b2bb9f + c086e55
commit 587cccf
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 12 deletions.
diff --git a/src/components/Card.tsx b/src/components/Card.tsx
@@ -1,10 +1,14 @@
-import React, { PropsWithChildren } from 'react';
+import React, { HTMLAttributes, PropsWithChildren } from 'react';
 import styled from 'styled-components';
 import colors from '../styles/colors';
 import { Colors } from '../types';
 
-interface CardProps {
-	withBorderColor?: { color: Colors; withGlow: boolean };
+interface CardProps extends HTMLAttributes<HTMLDivElement> {
+	withBorderColor?: {
+		color?: Colors;
+		gradient?: keyof typeof colors.gradients;
+		withGlow?: boolean;
+	};
 	withBackgroundColor?: Colors;
 }
 
@@ -17,6 +21,7 @@ export default function Card({
 	if (withBorderColor) {
 		return (
 			<StyledGradientWrapper
+				withBorderGradient={withBorderColor.gradient}
 				withBorderColor={withBorderColor.color}
 				withGlow={!!withBorderColor.withGlow}
 				{...rest}
@@ -27,7 +32,7 @@ export default function Card({
 	}
 	if (withBackgroundColor) {
 		return (
-			<StyledBackgroundWrapper color={withBackgroundColor} {...rest}>
+			<StyledBackgroundWrapper backgroundColor={withBackgroundColor} {...rest}>
 				<StyledCard className="darker-40" isWithBackground={!!withBackgroundColor}>
 					{children}
 				</StyledCard>
@@ -37,20 +42,25 @@ export default function Card({
 	return <StyledCard>{children}</StyledCard>;
 }
 
-const StyledGradientWrapper = styled.div<{ withBorderColor?: Colors; withGlow: boolean }>`
+const StyledGradientWrapper = styled.div<{
+	withBorderColor?: Colors;
+	withGlow?: boolean;
+	withBorderGradient?: keyof typeof colors.gradients;
+}>`
 	width: 100%;
 	height: 100%;
-	background: ${({ withBorderColor }) => withBorderColor};
+	background: ${({ withBorderColor, withBorderGradient }) =>
+		withBorderColor ? withBorderColor : withBorderGradient && colors.gradients[withBorderGradient]};
 	box-shadow: ${({ withBorderColor, withGlow }) => withGlow && `0 0 10px ${withBorderColor}`};
 	padding: 1px;
 	border-radius: 4px;
 `;
 
-const StyledBackgroundWrapper = styled.div<{ color: Colors }>`
+const StyledBackgroundWrapper = styled.div<{ backgroundColor: Colors }>`
 	width: 100%;
 	height: 100%;
 	border-radius: 5px;
-	background: ${({ color }) => colors[color]};
+	background: ${({ backgroundColor }) => colors[backgroundColor]};
 	padding: 1px;
 	border-radius: 4px;
 `;

diff --git a/stories/Card.stories.tsx b/stories/Card.stories.tsx
@@ -12,19 +12,32 @@ export default {
 export const Template: ComponentStory<typeof Card> = (args) => (
 	<div style={{ display: 'flex', justifyContent: 'center' }}>
 		<Card {...args} />
-		<Card {...args} />
+	</div>
+);
+
+export const WithBorderColor: ComponentStory<typeof Card> = (args) => (
+	<div style={{ display: 'flex', justifyContent: 'center' }}>
 		<Card {...args} />
 	</div>
 );
 
 Template.args = {
+	withBorderColor: { gradient: 'rainbow', withGlow: true },
+	children: [
+		<div style={{ color: 'white' }}>
+			<div style={{ color: 'white' }}>hello</div>,<div style={{ color: 'white' }}>world</div>,
+		</div>,
+		,
+	],
+};
+
+WithBorderColor.args = {
+	withBackgroundColor: 'lightBlue',
 	children: [
 		<div style={{ color: 'white' }}>
-			{' '}
 			<div style={{ color: 'white' }}>hello</div>,<div style={{ color: 'white' }}>world</div>,
 		</div>,
-		<div style={{ color: 'white' }}>hello</div>,
-		<div style={{ color: 'white' }}>world</div>,
+		,
 	],
 };