@@ -1643,36 +1416,57 @@ exports[`Calendar Component should render properly with with error state 1`] = `
>
S
M
T
W
T
F
S
@@ -1683,6 +1477,8 @@ exports[`Calendar Component should render properly with with error state 1`] = `
>
29
@@ -1694,6 +1490,8 @@ exports[`Calendar Component should render properly with with error state 1`] = `
>
30
@@ -1705,6 +1503,8 @@ exports[`Calendar Component should render properly with with error state 1`] = `
>
31
@@ -1716,6 +1516,8 @@ exports[`Calendar Component should render properly with with error state 1`] = `
>
1
@@ -1727,6 +1529,8 @@ exports[`Calendar Component should render properly with with error state 1`] = `
>
2
@@ -1738,6 +1542,8 @@ exports[`Calendar Component should render properly with with error state 1`] = `
>
3
@@ -1749,6 +1555,8 @@ exports[`Calendar Component should render properly with with error state 1`] = `
>
4
@@ -1760,6 +1568,8 @@ exports[`Calendar Component should render properly with with error state 1`] = `
>
5
@@ -1771,6 +1581,8 @@ exports[`Calendar Component should render properly with with error state 1`] = `
>
6
@@ -1782,6 +1594,8 @@ exports[`Calendar Component should render properly with with error state 1`] = `
>
7
@@ -1793,6 +1607,8 @@ exports[`Calendar Component should render properly with with error state 1`] = `
>
8
@@ -1804,6 +1620,8 @@ exports[`Calendar Component should render properly with with error state 1`] = `
>
9
@@ -1815,6 +1633,8 @@ exports[`Calendar Component should render properly with with error state 1`] = `
>
10
@@ -1826,6 +1646,8 @@ exports[`Calendar Component should render properly with with error state 1`] = `
>
11
@@ -1837,6 +1659,8 @@ exports[`Calendar Component should render properly with with error state 1`] = `
>
12
@@ -1848,6 +1672,8 @@ exports[`Calendar Component should render properly with with error state 1`] = `
>
13
@@ -1859,6 +1685,8 @@ exports[`Calendar Component should render properly with with error state 1`] = `
>
14
@@ -1870,6 +1698,8 @@ exports[`Calendar Component should render properly with with error state 1`] = `
>
15
@@ -1881,6 +1711,8 @@ exports[`Calendar Component should render properly with with error state 1`] = `
>
16
@@ -1892,6 +1724,8 @@ exports[`Calendar Component should render properly with with error state 1`] = `
>
17
@@ -1903,6 +1737,8 @@ exports[`Calendar Component should render properly with with error state 1`] = `
>
18
@@ -1914,6 +1750,8 @@ exports[`Calendar Component should render properly with with error state 1`] = `
>
19
@@ -1925,6 +1763,8 @@ exports[`Calendar Component should render properly with with error state 1`] = `
>
20
@@ -1936,6 +1776,8 @@ exports[`Calendar Component should render properly with with error state 1`] = `
>
21
@@ -1947,6 +1789,8 @@ exports[`Calendar Component should render properly with with error state 1`] = `
>
22
@@ -1958,6 +1802,8 @@ exports[`Calendar Component should render properly with with error state 1`] = `
>
23
@@ -1969,6 +1815,8 @@ exports[`Calendar Component should render properly with with error state 1`] = `
>
24
@@ -1980,6 +1828,8 @@ exports[`Calendar Component should render properly with with error state 1`] = `
>
25
@@ -1991,6 +1841,8 @@ exports[`Calendar Component should render properly with with error state 1`] = `
>
26
@@ -2002,6 +1854,8 @@ exports[`Calendar Component should render properly with with error state 1`] = `
>
27
@@ -2013,6 +1867,8 @@ exports[`Calendar Component should render properly with with error state 1`] = `
>
28
@@ -2024,6 +1880,8 @@ exports[`Calendar Component should render properly with with error state 1`] = `
>
29
@@ -2035,6 +1893,8 @@ exports[`Calendar Component should render properly with with error state 1`] = `
>
30
@@ -2046,6 +1906,8 @@ exports[`Calendar Component should render properly with with error state 1`] = `
>
31
@@ -2057,6 +1919,8 @@ exports[`Calendar Component should render properly with with error state 1`] = `
>
1
diff --git a/packages/core/src/components/Card/Card.stories.tsx b/packages/core/src/components/Card/Card.stories.tsx
index b19113a25..9ffbc319d 100644
--- a/packages/core/src/components/Card/Card.stories.tsx
+++ b/packages/core/src/components/Card/Card.stories.tsx
@@ -1,13 +1,13 @@
import { CardTheme, defaultTheme } from '@medly-components/theme';
+import type { FCC } from 'react';
import { CardProps } from './types';
-import type { FC } from 'react';
export const variants: CardProps['variant'][] = ['solid', 'flat'];
export const display: CardProps['display'][] = ['block', 'flex'];
export const itemsPosition: CardProps['alignItems'][] = ['top', 'bottom', 'left', 'right', 'center'];
export const flowDirection: CardProps['flowDirection'][] = ['vertical', 'horizontal'];
-export const ThemeInterface: FC
= () => null;
+export const ThemeInterface: FCC = () => null;
ThemeInterface.defaultProps = {
...defaultTheme.card
};
diff --git a/packages/core/src/components/Card/Card.styled.tsx b/packages/core/src/components/Card/Card.styled.tsx
index eccdc0088..a5e8a099e 100644
--- a/packages/core/src/components/Card/Card.styled.tsx
+++ b/packages/core/src/components/Card/Card.styled.tsx
@@ -1,4 +1,4 @@
-import { BreakpointsTheme, CardTheme } from '@medly-components/theme';
+import { BreakpointsTheme } from '@medly-components/theme';
import { WithThemeProp } from '@medly-components/utils';
import { rgba } from 'polished';
import styled, { css } from 'styled-components';
@@ -21,21 +21,21 @@ const borderTop = (separatorColor: string) => css`
borderLeft = (separatorColor: string) => css`
border-left: 1px solid ${separatorColor};
`,
- applyBorder = ({ flowDirection, separatorColor }: CardProps & CardTheme & WithThemeProp) => css`
+ applyBorder = ({ flowDirection, theme }: CardProps & WithThemeProp) => css`
> div + div {
- ${flowDirection === 'vertical' ? borderTop(separatorColor!) : borderLeft(separatorColor!)}
+ ${flowDirection === 'vertical' ? borderTop(theme.card.separatorColor!) : borderLeft(theme.card.separatorColor!)}
}
`;
-const solid = ({ backgroundColor, shadowColor, onClick }: CardTheme & CardProps & WithThemeProp) => css`
- background-color: ${backgroundColor};
- border-radius: ${({ theme }) => theme.card.borderRadius};
- box-shadow: 0 0.2rem 0.8rem ${rgba(shadowColor, 0.2)};
+const solid = ({ theme, onClick }: CardProps & WithThemeProp) => css`
+ background-color: ${theme.card.backgroundColor};
+ border-radius: ${theme.card.borderRadius};
+ box-shadow: 0 0.2rem 0.8rem ${rgba(theme.card.shadowColor, 0.2)};
&:hover {
- box-shadow: ${onClick && `0 0.4rem 0.8rem ${rgba(shadowColor, 0.6)}`};
+ box-shadow: ${onClick && `0 0.4rem 0.8rem ${rgba(theme.card.shadowColor, 0.6)}`};
}
`,
- flat = () => css`
+ flat = css`
border-radius: 0;
margin: 0;
border: none;
@@ -55,7 +55,7 @@ const media = ({ theme, breakpoint }: CardProps & { breakpoint: keyof Breakpoint
${media({ theme, breakpoint: 'XL' })}
`;
-export const Card = styled('div').attrs(({ theme: { card } }) => ({ ...card }))`
+export const Card = styled('div')`
overflow: auto;
box-sizing: border-box;
flex: ${({ flex }) => flex};
diff --git a/packages/core/src/components/Card/Card.tsx b/packages/core/src/components/Card/Card.tsx
index 0a8d1cbb9..79f2ac60d 100644
--- a/packages/core/src/components/Card/Card.tsx
+++ b/packages/core/src/components/Card/Card.tsx
@@ -1,10 +1,10 @@
import { WithStyle } from '@medly-components/utils';
-import { memo, forwardRef } from 'react';
+import type { FCC } from 'react';
+import { forwardRef, memo } from 'react';
import * as Styled from './Card.styled';
import { CardProps } from './types';
-import type { FC } from 'react';
-const Component: FC = memo(forwardRef((props, ref) => ));
+const Component: FCC = memo(forwardRef((props, ref) => ));
Component.defaultProps = {
display: 'block',
variant: 'solid',
@@ -17,4 +17,4 @@ Component.defaultProps = {
fullHeight: false
};
Component.displayName = 'Card';
-export const Card: FC & WithStyle = Object.assign(Component, { Style: Styled.Card });
+export const Card: FCC & WithStyle = Object.assign(Component, { Style: Styled.Card });
diff --git a/packages/core/src/components/Card/__snapshots__/Card.test.tsx.snap b/packages/core/src/components/Card/__snapshots__/Card.test.tsx.snap
index bbe6e048a..b54eb8f9c 100644
--- a/packages/core/src/components/Card/__snapshots__/Card.test.tsx.snap
+++ b/packages/core/src/components/Card/__snapshots__/Card.test.tsx.snap
@@ -6,9 +6,6 @@ exports[`Card component should render correctly with all the default props 1`] =
color: inherit;
font-size: 1.4rem;
font-weight: 400;
- -webkit-letter-spacing: 0rem;
- -moz-letter-spacing: 0rem;
- -ms-letter-spacing: 0rem;
letter-spacing: 0rem;
line-height: 2.2rem;
text-align: initial;
@@ -18,25 +15,14 @@ exports[`Card component should render correctly with all the default props 1`] =
.c0 {
overflow: auto;
box-sizing: border-box;
- -webkit-flex: 1;
- -ms-flex: 1;
flex: 1;
display: inline-block;
- -webkit-transition: all 100ms ease-out;
transition: all 100ms ease-out;
background-color: #ffffff;
border-radius: 0.8rem;
box-shadow: 0 0.2rem 0.8rem rgba(176,188,200,0.2);
- -webkit-flex-direction: column;
- -ms-flex-direction: column;
flex-direction: column;
- -webkit-box-pack: center;
- -webkit-justify-content: center;
- -ms-flex-pack: center;
justify-content: center;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
align-items: center;
}
@@ -66,11 +52,17 @@ exports[`Card component should render correctly with all the default props 1`] =
Dummy Text
@@ -84,9 +76,6 @@ exports[`Card component should render properly when flow direction is horizontal
color: inherit;
font-size: 1.4rem;
font-weight: 400;
- -webkit-letter-spacing: 0rem;
- -moz-letter-spacing: 0rem;
- -ms-letter-spacing: 0rem;
letter-spacing: 0rem;
line-height: 2.2rem;
text-align: initial;
@@ -96,145 +85,90 @@ exports[`Card component should render properly when flow direction is horizontal
.c0 {
overflow: auto;
box-sizing: border-box;
- -webkit-flex: 1;
- -ms-flex: 1;
flex: 1;
display: inline-block;
- -webkit-transition: all 100ms ease-out;
transition: all 100ms ease-out;
background-color: #ffffff;
border-radius: 0.8rem;
box-shadow: 0 0.2rem 0.8rem rgba(176,188,200,0.2);
- -webkit-flex-direction: row;
- -ms-flex-direction: row;
flex-direction: row;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
align-items: center;
- -webkit-box-pack: center;
- -webkit-justify-content: center;
- -ms-flex-pack: center;
justify-content: center;
}
-.c0 > div + div {
+.c0 >div+div {
border-left: 1px solid #98A7B7;
}
.c1 {
overflow: auto;
box-sizing: border-box;
- -webkit-flex: 1;
- -ms-flex: 1;
flex: 1;
display: inline-block;
- -webkit-transition: all 100ms ease-out;
transition: all 100ms ease-out;
background-color: #ffffff;
border-radius: 0.8rem;
box-shadow: 0 0.2rem 0.8rem rgba(176,188,200,0.2);
- -webkit-flex-direction: row;
- -ms-flex-direction: row;
flex-direction: row;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
align-items: center;
- -webkit-box-pack: start;
- -webkit-justify-content: flex-start;
- -ms-flex-pack: start;
justify-content: flex-start;
}
-.c1 > div + div {
+.c1 >div+div {
border-left: 1px solid #98A7B7;
}
.c3 {
overflow: auto;
box-sizing: border-box;
- -webkit-flex: 1;
- -ms-flex: 1;
flex: 1;
display: inline-block;
- -webkit-transition: all 100ms ease-out;
transition: all 100ms ease-out;
background-color: #ffffff;
border-radius: 0.8rem;
box-shadow: 0 0.2rem 0.8rem rgba(176,188,200,0.2);
- -webkit-flex-direction: row;
- -ms-flex-direction: row;
flex-direction: row;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
align-items: center;
- -webkit-box-pack: end;
- -webkit-justify-content: flex-end;
- -ms-flex-pack: end;
justify-content: flex-end;
}
-.c3 > div + div {
+.c3 >div+div {
border-left: 1px solid #98A7B7;
}
.c4 {
overflow: auto;
box-sizing: border-box;
- -webkit-flex: 1;
- -ms-flex: 1;
flex: 1;
display: inline-block;
- -webkit-transition: all 100ms ease-out;
transition: all 100ms ease-out;
background-color: #ffffff;
border-radius: 0.8rem;
box-shadow: 0 0.2rem 0.8rem rgba(176,188,200,0.2);
- -webkit-flex-direction: row;
- -ms-flex-direction: row;
flex-direction: row;
- -webkit-align-items: flex-start;
- -webkit-box-align: flex-start;
- -ms-flex-align: flex-start;
align-items: flex-start;
- -webkit-box-pack: center;
- -webkit-justify-content: center;
- -ms-flex-pack: center;
justify-content: center;
}
-.c4 > div + div {
+.c4 >div+div {
border-left: 1px solid #98A7B7;
}
.c5 {
overflow: auto;
box-sizing: border-box;
- -webkit-flex: 1;
- -ms-flex: 1;
flex: 1;
display: inline-block;
- -webkit-transition: all 100ms ease-out;
transition: all 100ms ease-out;
background-color: #ffffff;
border-radius: 0.8rem;
box-shadow: 0 0.2rem 0.8rem rgba(176,188,200,0.2);
- -webkit-flex-direction: row;
- -ms-flex-direction: row;
flex-direction: row;
- -webkit-align-items: flex-end;
- -webkit-box-align: flex-end;
- -ms-flex-align: flex-end;
align-items: flex-end;
- -webkit-box-pack: center;
- -webkit-justify-content: center;
- -ms-flex-pack: center;
justify-content: center;
}
-.c5 > div + div {
+.c5 >div+div {
border-left: 1px solid #98A7B7;
}
@@ -360,55 +294,89 @@ exports[`Card component should render properly when flow direction is horizontal
Dummy Text
Dummy Text
Dummy Text
Dummy Text
Dummy Text
@@ -423,9 +391,6 @@ exports[`Card component should render properly when fullWidth and fullHeight is
color: inherit;
font-size: 1.4rem;
font-weight: 400;
- -webkit-letter-spacing: 0rem;
- -moz-letter-spacing: 0rem;
- -ms-letter-spacing: 0rem;
letter-spacing: 0rem;
line-height: 2.2rem;
text-align: initial;
@@ -435,27 +400,16 @@ exports[`Card component should render properly when fullWidth and fullHeight is
.c0 {
overflow: auto;
box-sizing: border-box;
- -webkit-flex: 1;
- -ms-flex: 1;
flex: 1;
display: block;
width: 100%;
height: 100%;
- -webkit-transition: all 100ms ease-out;
transition: all 100ms ease-out;
background-color: #ffffff;
border-radius: 0.8rem;
box-shadow: 0 0.2rem 0.8rem rgba(176,188,200,0.2);
- -webkit-flex-direction: column;
- -ms-flex-direction: column;
flex-direction: column;
- -webkit-box-pack: center;
- -webkit-justify-content: center;
- -ms-flex-pack: center;
justify-content: center;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
align-items: center;
}
@@ -485,11 +439,17 @@ exports[`Card component should render properly when fullWidth and fullHeight is
Dummy Text
@@ -503,9 +463,6 @@ exports[`Card component should render properly when it is clickable 1`] = `
color: inherit;
font-size: 1.4rem;
font-weight: 400;
- -webkit-letter-spacing: 0rem;
- -moz-letter-spacing: 0rem;
- -ms-letter-spacing: 0rem;
letter-spacing: 0rem;
line-height: 2.2rem;
text-align: initial;
@@ -515,25 +472,14 @@ exports[`Card component should render properly when it is clickable 1`] = `
.c0 {
overflow: auto;
box-sizing: border-box;
- -webkit-flex: 1;
- -ms-flex: 1;
flex: 1;
display: inline-block;
- -webkit-transition: all 100ms ease-out;
transition: all 100ms ease-out;
background-color: #ffffff;
border-radius: 0.8rem;
box-shadow: 0 0.2rem 0.8rem rgba(176,188,200,0.2);
- -webkit-flex-direction: column;
- -ms-flex-direction: column;
flex-direction: column;
- -webkit-box-pack: center;
- -webkit-justify-content: center;
- -ms-flex-pack: center;
justify-content: center;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
align-items: center;
}
@@ -572,11 +518,17 @@ exports[`Card component should render properly when it is clickable 1`] = `
Dummy Text
@@ -590,9 +542,6 @@ exports[`Card component should render properly when separator is set true flow d
color: inherit;
font-size: 1.4rem;
font-weight: 400;
- -webkit-letter-spacing: 0rem;
- -moz-letter-spacing: 0rem;
- -ms-letter-spacing: 0rem;
letter-spacing: 0rem;
line-height: 2.2rem;
text-align: initial;
@@ -602,137 +551,82 @@ exports[`Card component should render properly when separator is set true flow d
.c0 {
overflow: auto;
box-sizing: border-box;
- -webkit-flex: 1;
- -ms-flex: 1;
flex: 1;
display: inline-block;
- -webkit-transition: all 100ms ease-out;
transition: all 100ms ease-out;
background-color: #ffffff;
border-radius: 0.8rem;
box-shadow: 0 0.2rem 0.8rem rgba(176,188,200,0.2);
- -webkit-flex-direction: column;
- -ms-flex-direction: column;
flex-direction: column;
- -webkit-box-pack: center;
- -webkit-justify-content: center;
- -ms-flex-pack: center;
justify-content: center;
- -webkit-align-items: flex-start;
- -webkit-box-align: flex-start;
- -ms-flex-align: flex-start;
align-items: flex-start;
}
-.c0 > div + div {
+.c0 >div+div {
border-top: 1px solid #98A7B7;
}
.c1 {
overflow: auto;
box-sizing: border-box;
- -webkit-flex: 1;
- -ms-flex: 1;
flex: 1;
display: inline-block;
- -webkit-transition: all 100ms ease-out;
transition: all 100ms ease-out;
border-radius: 0;
margin: 0;
border: none;
box-shadow: none;
background-color: transparent;
- -webkit-flex-direction: column;
- -ms-flex-direction: column;
flex-direction: column;
- -webkit-box-pack: center;
- -webkit-justify-content: center;
- -ms-flex-pack: center;
justify-content: center;
- -webkit-align-items: flex-start;
- -webkit-box-align: flex-start;
- -ms-flex-align: flex-start;
align-items: flex-start;
}
.c3 {
overflow: auto;
box-sizing: border-box;
- -webkit-flex: 6;
- -ms-flex: 6;
flex: 6;
display: inline-block;
- -webkit-transition: all 100ms ease-out;
transition: all 100ms ease-out;
border-radius: 0;
margin: 0;
border: none;
box-shadow: none;
background-color: transparent;
- -webkit-flex-direction: column;
- -ms-flex-direction: column;
flex-direction: column;
- -webkit-box-pack: center;
- -webkit-justify-content: center;
- -ms-flex-pack: center;
justify-content: center;
- -webkit-align-items: flex-end;
- -webkit-box-align: flex-end;
- -ms-flex-align: flex-end;
align-items: flex-end;
}
.c4 {
overflow: auto;
box-sizing: border-box;
- -webkit-flex: 6;
- -ms-flex: 6;
flex: 6;
display: inline-block;
- -webkit-transition: all 100ms ease-out;
transition: all 100ms ease-out;
border-radius: 0;
margin: 0;
border: none;
box-shadow: none;
background-color: transparent;
- -webkit-flex-direction: column;
- -ms-flex-direction: column;
flex-direction: column;
- -webkit-box-pack: start;
- -webkit-justify-content: flex-start;
- -ms-flex-pack: start;
justify-content: flex-start;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
align-items: center;
}
.c5 {
overflow: auto;
box-sizing: border-box;
- -webkit-flex: 6;
- -ms-flex: 6;
flex: 6;
display: inline-block;
- -webkit-transition: all 100ms ease-out;
transition: all 100ms ease-out;
border-radius: 0;
margin: 0;
border: none;
box-shadow: none;
background-color: transparent;
- -webkit-flex-direction: column;
- -ms-flex-direction: column;
flex-direction: column;
- -webkit-box-pack: end;
- -webkit-justify-content: flex-end;
- -ms-flex-pack: end;
justify-content: flex-end;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
align-items: center;
}
@@ -834,45 +728,73 @@ exports[`Card component should render properly when separator is set true flow d
Marks
Dummy Text
Dummy Text
Dummy Text
@@ -887,9 +809,6 @@ exports[`Card component should render properly with "flat" variant 1`] = `
color: inherit;
font-size: 1.4rem;
font-weight: 400;
- -webkit-letter-spacing: 0rem;
- -moz-letter-spacing: 0rem;
- -ms-letter-spacing: 0rem;
letter-spacing: 0rem;
line-height: 2.2rem;
text-align: initial;
@@ -899,27 +818,16 @@ exports[`Card component should render properly with "flat" variant 1`] = `
.c0 {
overflow: auto;
box-sizing: border-box;
- -webkit-flex: 1;
- -ms-flex: 1;
flex: 1;
display: inline-block;
- -webkit-transition: all 100ms ease-out;
transition: all 100ms ease-out;
border-radius: 0;
margin: 0;
border: none;
box-shadow: none;
background-color: transparent;
- -webkit-flex-direction: column;
- -ms-flex-direction: column;
flex-direction: column;
- -webkit-box-pack: center;
- -webkit-justify-content: center;
- -ms-flex-pack: center;
justify-content: center;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
align-items: center;
}
@@ -949,11 +857,17 @@ exports[`Card component should render properly with "flat" variant 1`] = `
Dummy Text
@@ -967,9 +881,6 @@ exports[`Card component should render properly with "solid" variant 1`] = `
color: inherit;
font-size: 1.4rem;
font-weight: 400;
- -webkit-letter-spacing: 0rem;
- -moz-letter-spacing: 0rem;
- -ms-letter-spacing: 0rem;
letter-spacing: 0rem;
line-height: 2.2rem;
text-align: initial;
@@ -979,25 +890,14 @@ exports[`Card component should render properly with "solid" variant 1`] = `
.c0 {
overflow: auto;
box-sizing: border-box;
- -webkit-flex: 1;
- -ms-flex: 1;
flex: 1;
display: inline-block;
- -webkit-transition: all 100ms ease-out;
transition: all 100ms ease-out;
background-color: #ffffff;
border-radius: 0.8rem;
box-shadow: 0 0.2rem 0.8rem rgba(176,188,200,0.2);
- -webkit-flex-direction: column;
- -ms-flex-direction: column;
flex-direction: column;
- -webkit-box-pack: center;
- -webkit-justify-content: center;
- -ms-flex-pack: center;
justify-content: center;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
align-items: center;
}
@@ -1027,11 +927,17 @@ exports[`Card component should render properly with "solid" variant 1`] = `
Dummy Text
@@ -1045,9 +951,6 @@ exports[`Card component should render properly with display "block" 1`] = `
color: inherit;
font-size: 1.4rem;
font-weight: 400;
- -webkit-letter-spacing: 0rem;
- -moz-letter-spacing: 0rem;
- -ms-letter-spacing: 0rem;
letter-spacing: 0rem;
line-height: 2.2rem;
text-align: initial;
@@ -1057,25 +960,14 @@ exports[`Card component should render properly with display "block" 1`] = `
.c0 {
overflow: auto;
box-sizing: border-box;
- -webkit-flex: 1;
- -ms-flex: 1;
flex: 1;
display: inline-block;
- -webkit-transition: all 100ms ease-out;
transition: all 100ms ease-out;
background-color: #ffffff;
border-radius: 0.8rem;
box-shadow: 0 0.2rem 0.8rem rgba(176,188,200,0.2);
- -webkit-flex-direction: column;
- -ms-flex-direction: column;
flex-direction: column;
- -webkit-box-pack: center;
- -webkit-justify-content: center;
- -ms-flex-pack: center;
justify-content: center;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
align-items: center;
}
@@ -1105,11 +997,17 @@ exports[`Card component should render properly with display "block" 1`] = `
Dummy Text
@@ -1123,9 +1021,6 @@ exports[`Card component should render properly with display "flex" 1`] = `
color: inherit;
font-size: 1.4rem;
font-weight: 400;
- -webkit-letter-spacing: 0rem;
- -moz-letter-spacing: 0rem;
- -ms-letter-spacing: 0rem;
letter-spacing: 0rem;
line-height: 2.2rem;
text-align: initial;
@@ -1135,28 +1030,14 @@ exports[`Card component should render properly with display "flex" 1`] = `
.c0 {
overflow: auto;
box-sizing: border-box;
- -webkit-flex: 1;
- -ms-flex: 1;
flex: 1;
- display: -webkit-inline-box;
- display: -webkit-inline-flex;
- display: -ms-inline-flexbox;
display: inline-flex;
- -webkit-transition: all 100ms ease-out;
transition: all 100ms ease-out;
background-color: #ffffff;
border-radius: 0.8rem;
box-shadow: 0 0.2rem 0.8rem rgba(176,188,200,0.2);
- -webkit-flex-direction: column;
- -ms-flex-direction: column;
flex-direction: column;
- -webkit-box-pack: center;
- -webkit-justify-content: center;
- -ms-flex-pack: center;
justify-content: center;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
align-items: center;
}
@@ -1186,11 +1067,17 @@ exports[`Card component should render properly with display "flex" 1`] = `
Dummy Text
diff --git a/packages/core/src/components/CardTable/Body/Body.tsx b/packages/core/src/components/CardTable/Body/Body.tsx
index 8f8b3535a..9b8ba22cc 100644
--- a/packages/core/src/components/CardTable/Body/Body.tsx
+++ b/packages/core/src/components/CardTable/Body/Body.tsx
@@ -1,12 +1,12 @@
+import type { FCC } from 'react';
import { memo, useCallback, useMemo } from 'react';
import Text from '../../Text';
import Cell from './Cell';
import Row from './Row';
import { NoResult } from './Row/Row.styled';
import { Props } from './types';
-import type { FC } from 'react';
-export const Body: FC
= memo(props => {
+export const Body: FCC = memo(props => {
const { data, columns, onRowClick, rowClickDisableKey, uniqueKeyName, withWhiteBackground } = props;
const gridTemplateColumns = useMemo(() => columns.reduce((acc, curr) => acc.concat(`${curr.fraction || 1}fr `), ''), [columns]),
diff --git a/packages/core/src/components/CardTable/Body/Cell/Cell.tsx b/packages/core/src/components/CardTable/Body/Cell/Cell.tsx
index f2a592762..94a8156b0 100644
--- a/packages/core/src/components/CardTable/Body/Cell/Cell.tsx
+++ b/packages/core/src/components/CardTable/Body/Cell/Cell.tsx
@@ -1,10 +1,10 @@
-import { useMemo, memo } from 'react';
+import type { FCC } from 'react';
+import { memo, useMemo } from 'react';
import Text from '../../../Text';
import * as Style from './Cell.styled';
import { Props } from './types';
-import type { FC } from 'react';
-export const Cell: FC = memo(props => {
+export const Cell: FCC = memo(props => {
const { data, rowId, column, isRowClickDisabled, rowData } = props,
{ component: Component, align, wrapText } = column;
diff --git a/packages/core/src/components/CardTable/Body/Cell/__snapshots__/Cell.test.tsx.snap b/packages/core/src/components/CardTable/Body/Cell/__snapshots__/Cell.test.tsx.snap
index 45582fd1a..eb287f919 100644
--- a/packages/core/src/components/CardTable/Body/Cell/__snapshots__/Cell.test.tsx.snap
+++ b/packages/core/src/components/CardTable/Body/Cell/__snapshots__/Cell.test.tsx.snap
@@ -6,9 +6,6 @@ exports[`CardTable Cell should be able to "center" align 1`] = `
color: inherit;
font-size: 1.4rem;
font-weight: 400;
- -webkit-letter-spacing: 0rem;
- -moz-letter-spacing: 0rem;
- -ms-letter-spacing: 0rem;
letter-spacing: 0rem;
line-height: 2.2rem;
text-align: initial;
@@ -18,20 +15,9 @@ exports[`CardTable Cell should be able to "center" align 1`] = `
.c0 {
padding: 0;
padding: 1.5rem 2.4rem;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
display: flex;
- -webkit-flex-direction: row;
- -ms-flex-direction: row;
flex-direction: row;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
align-items: center;
- -webkit-box-pack: center;
- -webkit-justify-content: center;
- -ms-flex-pack: center;
justify-content: center;
overflow: hidden;
}
@@ -47,10 +33,13 @@ exports[`CardTable Cell should be able to "center" align 1`] = `
text
@@ -68,9 +57,6 @@ exports[`CardTable Cell should be able to "left" align 1`] = `
color: inherit;
font-size: 1.4rem;
font-weight: 400;
- -webkit-letter-spacing: 0rem;
- -moz-letter-spacing: 0rem;
- -ms-letter-spacing: 0rem;
letter-spacing: 0rem;
line-height: 2.2rem;
text-align: initial;
@@ -80,20 +66,9 @@ exports[`CardTable Cell should be able to "left" align 1`] = `
.c0 {
padding: 0;
padding: 1.5rem 2.4rem;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
display: flex;
- -webkit-flex-direction: row;
- -ms-flex-direction: row;
flex-direction: row;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
align-items: center;
- -webkit-box-pack: start;
- -webkit-justify-content: flex-start;
- -ms-flex-pack: start;
justify-content: flex-start;
overflow: hidden;
}
@@ -109,10 +84,13 @@ exports[`CardTable Cell should be able to "left" align 1`] = `
text
@@ -130,9 +108,6 @@ exports[`CardTable Cell should be able to "right" align 1`] = `
color: inherit;
font-size: 1.4rem;
font-weight: 400;
- -webkit-letter-spacing: 0rem;
- -moz-letter-spacing: 0rem;
- -ms-letter-spacing: 0rem;
letter-spacing: 0rem;
line-height: 2.2rem;
text-align: initial;
@@ -142,20 +117,9 @@ exports[`CardTable Cell should be able to "right" align 1`] = `
.c0 {
padding: 0;
padding: 1.5rem 2.4rem;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
display: flex;
- -webkit-flex-direction: row;
- -ms-flex-direction: row;
flex-direction: row;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
align-items: center;
- -webkit-box-pack: end;
- -webkit-justify-content: flex-end;
- -ms-flex-pack: end;
justify-content: flex-end;
overflow: hidden;
}
@@ -171,10 +135,13 @@ exports[`CardTable Cell should be able to "right" align 1`] = `
text
@@ -192,9 +159,6 @@ exports[`CardTable Cell should render cell with text component with wrap text as
color: inherit;
font-size: 1.4rem;
font-weight: 400;
- -webkit-letter-spacing: 0rem;
- -moz-letter-spacing: 0rem;
- -ms-letter-spacing: 0rem;
letter-spacing: 0rem;
line-height: 2.2rem;
text-align: initial;
@@ -204,20 +168,9 @@ exports[`CardTable Cell should render cell with text component with wrap text as
.c0 {
padding: 0;
padding: 1.5rem 2.4rem;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
display: flex;
- -webkit-flex-direction: row;
- -ms-flex-direction: row;
flex-direction: row;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
align-items: center;
- -webkit-box-pack: start;
- -webkit-justify-content: flex-start;
- -ms-flex-pack: start;
justify-content: flex-start;
overflow: hidden;
}
@@ -227,11 +180,16 @@ exports[`CardTable Cell should render cell with text component with wrap text as
|
|
@@ -246,9 +204,6 @@ exports[`CardTable Cell should render cell with text component with wrap text as
color: inherit;
font-size: 1.4rem;
font-weight: 400;
- -webkit-letter-spacing: 0rem;
- -moz-letter-spacing: 0rem;
- -ms-letter-spacing: 0rem;
letter-spacing: 0rem;
line-height: 2.2rem;
text-align: initial;
@@ -258,20 +213,9 @@ exports[`CardTable Cell should render cell with text component with wrap text as
.c0 {
padding: 0;
padding: 1.5rem 2.4rem;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
display: flex;
- -webkit-flex-direction: row;
- -ms-flex-direction: row;
flex-direction: row;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
align-items: center;
- -webkit-box-pack: start;
- -webkit-justify-content: flex-start;
- -ms-flex-pack: start;
justify-content: flex-start;
overflow: hidden;
}
@@ -287,11 +231,16 @@ exports[`CardTable Cell should render cell with text component with wrap text as
|
|
@@ -306,9 +255,6 @@ exports[`CardTable Cell should render cell with text properly 1`] = `
color: inherit;
font-size: 1.4rem;
font-weight: 400;
- -webkit-letter-spacing: 0rem;
- -moz-letter-spacing: 0rem;
- -ms-letter-spacing: 0rem;
letter-spacing: 0rem;
line-height: 2.2rem;
text-align: initial;
@@ -318,20 +264,9 @@ exports[`CardTable Cell should render cell with text properly 1`] = `
.c0 {
padding: 0;
padding: 1.5rem 2.4rem;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
display: flex;
- -webkit-flex-direction: row;
- -ms-flex-direction: row;
flex-direction: row;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
align-items: center;
- -webkit-box-pack: start;
- -webkit-justify-content: flex-start;
- -ms-flex-pack: start;
justify-content: flex-start;
overflow: hidden;
}
@@ -347,10 +282,13 @@ exports[`CardTable Cell should render cell with text properly 1`] = `
text
diff --git a/packages/core/src/components/CardTable/Body/Row/Row.styled.tsx b/packages/core/src/components/CardTable/Body/Row/Row.styled.tsx
index 7443c25db..e143f92bd 100644
--- a/packages/core/src/components/CardTable/Body/Row/Row.styled.tsx
+++ b/packages/core/src/components/CardTable/Body/Row/Row.styled.tsx
@@ -1,10 +1,28 @@
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
import { Props } from './types';
-export const Row = styled('tr').attrs(({ withWhiteBackground, theme: { cardTable } }: Props) => ({
- bgTheme: withWhiteBackground ? 'lightBackground' : 'darkBackground',
- cardTable
-}))`
+const getStyle = ({ withWhiteBackground, isRowClickDisabled }: Props) => {
+ const bgTheme = withWhiteBackground ? 'lightBackground' : 'darkBackground';
+ return css`
+ border: 0.1rem solid ${({ theme }) => theme.cardTable[bgTheme].borderColor};
+ box-shadow: ${({ theme }) => theme.cardTable[bgTheme].boxShadow};
+
+ &:hover {
+ box-shadow: ${({ theme }) => theme.cardTable[bgTheme].hoverBoxShadow};
+ }
+
+ :nth-child(odd) {
+ background: ${({ theme }) =>
+ !isRowClickDisabled ? theme.cardTable[bgTheme].oddRowBgColor : theme.cardTable.disabledRowBgColor};
+ }
+ :nth-child(even) {
+ background: ${({ theme }) =>
+ !isRowClickDisabled ? theme.cardTable[bgTheme].evenRowBgColor : theme.cardTable.disabledRowBgColor};
+ }
+ `;
+};
+
+export const Row = styled('tr')`
display: grid;
grid-template-columns: ${({ gridTemplateColumns }) => gridTemplateColumns};
cursor: ${({ onClick, isRowClickDisabled }) => (onClick && !isRowClickDisabled ? 'pointer' : 'inherit')};
@@ -13,21 +31,7 @@ export const Row = styled('tr').attrs(({ withWhiteBackground, theme: { cardTable
margin-bottom: 0.8rem;
background-color: white;
transition: box-shadow 100ms ease-out;
- border: 0.1rem solid ${({ bgTheme, cardTable }) => cardTable[bgTheme].borderColor};
- box-shadow: ${({ bgTheme, cardTable }) => cardTable[bgTheme].boxShadow};
-
- &:hover {
- box-shadow: ${({ bgTheme, cardTable }) => cardTable[bgTheme].hoverBoxShadow};
- }
-
- :nth-child(odd) {
- background: ${({ bgTheme, cardTable, isRowClickDisabled }) =>
- !isRowClickDisabled ? cardTable[bgTheme].oddRowBgColor : cardTable.disabledRowBgColor};
- }
- :nth-child(even) {
- background: ${({ bgTheme, cardTable, isRowClickDisabled }) =>
- !isRowClickDisabled ? cardTable[bgTheme].evenRowBgColor : cardTable.disabledRowBgColor};
- }
+ ${getStyle}
`;
export const NoResult = styled(Row)`
diff --git a/packages/core/src/components/CardTable/Body/Row/__snapshots__/Row.test.tsx.snap b/packages/core/src/components/CardTable/Body/Row/__snapshots__/Row.test.tsx.snap
index 7603fdb3e..aa92538d2 100644
--- a/packages/core/src/components/CardTable/Body/Row/__snapshots__/Row.test.tsx.snap
+++ b/packages/core/src/components/CardTable/Body/Row/__snapshots__/Row.test.tsx.snap
@@ -9,21 +9,20 @@ exports[`CardTable Row should render properly with dark theme 1`] = `
border-radius: 0.8rem;
margin-bottom: 0.8rem;
background-color: white;
- -webkit-transition: box-shadow 100ms ease-out;
transition: box-shadow 100ms ease-out;
border: 0.1rem solid #ffffff;
box-shadow: 0 0.2rem 0.8rem rgba(176,188,200,0.2);
}
.c0:hover {
- box-shadow: 0 0.4rem 0.8rem rgba(176,188,200,0.6);
+ box-shadow: 0 0.4rem 0.8rem rgba(176, 188, 200, 0.6);
}
-.c0:nth-child(odd) {
+.c0 :nth-child(odd) {
background: #ffffff;
}
-.c0:nth-child(even) {
+.c0 :nth-child(even) {
background: #ffffff;
}
@@ -32,6 +31,7 @@ exports[`CardTable Row should render properly with dark theme 1`] = `
| | | |