Skip to content

Commit 7c5478f

Browse files
citizen-drorcitizen-dror
committed
move SmallCard to common
1 parent 9899316 commit 7c5478f

File tree

13 files changed

+72
-33
lines changed

13 files changed

+72
-33
lines changed

‎src/components/chart/CardChartByGroup1.tsx‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { toJS } from 'mobx';
44
// import Button from 'react-bootstrap/Button';
55
import { useStore } from '../../stores/storeConfig';
66
import SelectGroupBy from '../groupby/SelectGroupBy';
7-
import SmallCard2 from '../atoms/SmallCard2';
7+
import { SmallCard } from '../common';
88
import ChartBar from './ChartBar';
99
import ConfigChart from './ConfigChart';
1010
import ConfigModal from '../organisms/ConfigModal';
@@ -56,7 +56,8 @@ const CardChartByGroup1: React.FC<{}> = observer(() => {
5656
);
5757
// const memoSettingsIcon = <SvgIconSettings color={'var(--onprimary-color)'} />;
5858
return (
59-
<SmallCard2 style={{marginBottom: '0.5rem'}}>
59+
<>
60+
<SmallCard style={{marginBottom: '0.5rem'}}>
6061
<div style={styles.divConfig}>
6162
<SelectGroupBy id="Graphs.Main.SelectGroupby" />
6263
<SelectSortBy id="Graphs.Main.SelectSort"/>
@@ -70,7 +71,9 @@ const CardChartByGroup1: React.FC<{}> = observer(() => {
7071
{chart}
7172
</div>
7273
</div>
73-
</SmallCard2>
74+
</SmallCard>
75+
76+
</>
7477
);
7578
});
7679

‎src/components/chart/CardChartGrpBy2.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { useStore } from '../../stores/storeConfig';
55
import GroupBy2 from '../../stores/filter/GroupBy2';
66
import SelectGroupBy from '../groupby/SelectGroupBy';
77
import SelectGroupBy2 from '../groupby/SelectGroupBy2';
8-
import SmallCard2 from '../atoms/SmallCard2';
8+
import { SmallCard } from '../common';
99
import ChartBar from './ChartBar';
1010
import { RootState } from '../../stores/store';
1111
import { useSelector } from 'react-redux';
@@ -39,7 +39,7 @@ const CardChartGrpBy2: FC<IProps> = observer(() => {
3939
<div>
4040
{show
4141
&& (
42-
<SmallCard2>
42+
<SmallCard>
4343
<div style={divConstolsRow}>
4444
<SelectGroupBy id="Graphs.Grp2" labelText="" />
4545
{' '}
@@ -51,7 +51,7 @@ const CardChartGrpBy2: FC<IProps> = observer(() => {
5151
<div style={styles.divChart}>
5252
<ChartBar data={reactDataGrp2} metaData={metaDAta} chartType={chartType} dir={direction} />
5353
</div>
54-
</SmallCard2>
54+
</SmallCard>
5555
)}
5656
</div>
5757
);

‎src/components/chart/CardChartYears.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { observer } from 'mobx-react';
44
import { useSelector } from 'react-redux';
55
import { toJS } from 'mobx';
66
import { useStore } from '../../stores/storeConfig';
7-
import SmallCard2 from '../atoms/SmallCard2';
7+
import { SmallCard } from '../common';
88
import ChartBar from './ChartBar';
99
import { RootState } from '../../stores/store';
1010

@@ -21,11 +21,11 @@ const CardChartYears: React.FC<{}> = observer(() => {
2121
},
2222
};
2323
return (
24-
<SmallCard2 styleType={2} header={`${t(casualtiesNames)} ${t('by-years')}`}>
24+
<SmallCard styleType={2} header={`${t(casualtiesNames)} ${t('by-years')}`}>
2525
<div style={styles.divChart}>
2626
<ChartBar data={reactData2} fill="#FE9772" dir={direction} />
2727
</div>
28-
</SmallCard2>
28+
</SmallCard>
2929
);
3030
});
3131

‎src/components/common/SmallCard/SmallCard.test.tsx‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import React from 'react';
2+
import { render, screen } from '@testing-library/react';
3+
import SmallCard from './SmallCard';
4+
import '@testing-library/jest-dom';
5+
6+
describe('SmallCard component', () => {
7+
it('renders children content', () => {
8+
render(<SmallCard>Test content</SmallCard>);
9+
expect(screen.getByText('Test content')).toBeInTheDocument();
10+
});
11+
12+
it('renders a header if provided', () => {
13+
render(<SmallCard header="Card Header">Body</SmallCard>);
14+
expect(screen.getByText('Card Header')).toBeInTheDocument();
15+
expect(screen.getByText('Body')).toBeInTheDocument();
16+
});
17+
18+
it('does not render header elements when header prop is not passed', () => {
19+
const { container } = render(<SmallCard>Only Body</SmallCard>);
20+
expect(container.querySelector('h6')).toBeNull();
21+
expect(container.querySelector('hr')).toBeNull();
22+
});
23+
24+
it('applies custom className when provided', () => {
25+
const { container } = render(
26+
<SmallCard className="custom-class">Styled</SmallCard>
27+
);
28+
expect(container.firstChild).toHaveClass('custom-class');
29+
});
30+
31+
it('applies default className when custom className is not provided', () => {
32+
const { container } = render(<SmallCard>Default Style</SmallCard>);
33+
expect(container.firstChild).toHaveClass('p-3', 'bg-white', 'rounded', 'shadow');
34+
});
35+
36+
});

‎src/components/common/SmallCard/SmallCard.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
import React, { PropsWithChildren } from 'react';
22

3-
interface SmallCard2Props extends PropsWithChildren<any> {
3+
interface SmallCardProps extends PropsWithChildren<any> {
44
header?: string;
55
style?: React.CSSProperties;
66
className?: string;
77
}
88

9-
const SmallCard2: React.FC<SmallCard2Props> = ({ children, header, style, className }) => {
9+
const SmallCard: React.FC<SmallCardProps> = ({ children, header, style, className }) => {
1010
const cardHeader = header ? (
1111
<>
1212
<h6>{header}</h6>
@@ -27,4 +27,4 @@ const SmallCard2: React.FC<SmallCard2Props> = ({ children, header, style, classN
2727
);
2828
};
2929

30-
export default SmallCard2;
30+
export default SmallCard;

‎src/components/common/SmallCard/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export {default as SmallCard} from './SmallCard';

‎src/components/common/index.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,4 +3,5 @@ export {ButtonToggle} from './ButtonToggle';
33
export {Checkbox} from './CheckBox';
44
export {ErrorBoundary} from './ErrorBoundary';
55
export {Loader} from './Loader';
6-
export {Select} from './Select';
6+
export {Select} from './Select';
7+
export {SmallCard} from './SmallCard';

‎src/components/groupTable/CardGroupTable.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { observer } from 'mobx-react';
33
import { toJS } from 'mobx';
44
import { useStore } from '../../stores/storeConfig';
55
import GroupByTable from './GroupByTable';
6-
import SmallCard2 from '../atoms/SmallCard2';
6+
import { SmallCard } from '../common';
77
import SelectGroupBy from '../groupby/SelectGroupBy';
88

99
const CardGroupTable: FC<{}> = observer(() => {
@@ -17,13 +17,13 @@ const CardGroupTable: FC<{}> = observer(() => {
1717

1818
if (reactData.length > 0) {
1919
return (
20-
<SmallCard2 style={{marginBottom: '0.5rem'}}>
20+
<SmallCard style={{marginBottom: '0.5rem'}}>
2121
<div style={divStyle}>
2222
<SelectGroupBy id="Tables.Main" />
2323
</div>
2424
<hr />
2525
<GroupByTable data={reactData} dataName={groupByDict.groupBy.text} />
26-
</SmallCard2>
26+
</SmallCard>
2727
);
2828
}
2929
return null;

‎src/components/groupTable/CardGroupTables2.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { toJS } from 'mobx';
55
import { useStore } from '../../stores/storeConfig';
66
import GroupBy2 from '../../stores/filter/GroupBy2';
77
import GroupByTable from './GroupByTable';
8-
import SmallCard2 from '../atoms/SmallCard2';
8+
import { SmallCard } from '../common';
99
import SelectGroupBy from '../groupby/SelectGroupBy';
1010
import SelectGroupBy2 from '../groupby/SelectGroupBy2';
1111

@@ -32,7 +32,7 @@ const CardGroupTables2: FC<{}> = observer(() => {
3232
<>
3333
{ show
3434
&& (
35-
<SmallCard2>
35+
<SmallCard>
3636
<div style={divStyle}>
3737
{/* <span style={styleLable}>
3838
{' '}
@@ -52,7 +52,7 @@ const CardGroupTables2: FC<{}> = observer(() => {
5252
dataName={groupByDict.groupBy.text}
5353
columns={columnsGrp2}
5454
/>
55-
</SmallCard2>
55+
</SmallCard>
5656
)}
5757
</>
5858
);

‎src/components/groupTable/CardGroupTablesYears.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { useTranslation } from 'react-i18next';
33
import { observer } from 'mobx-react';
44
import { useStore } from '../../stores/storeConfig';
55
import GroupByTable from './GroupByTable';
6-
import SmallCard2 from '../atoms/SmallCard2';
6+
import { SmallCard } from '../common';
77

88
//total casualties grouped by years, filterd by severty and region
99
const CardGroupTablesYears: FC<{}> = observer(() => {
@@ -12,9 +12,9 @@ const CardGroupTablesYears: FC<{}> = observer(() => {
1212
const { dataByYears, casualtiesNames } = filterStore;
1313
if (dataByYears.length > 0) {
1414
return (
15-
<SmallCard2 header={`${t('total')} ${t(casualtiesNames)} ${t('in-region')} ${t('by-years')}`}>
15+
<SmallCard header={`${t('total')} ${t(casualtiesNames)} ${t('in-region')} ${t('by-years')}`}>
1616
<GroupByTable data={dataByYears} />
17-
</SmallCard2>
17+
</SmallCard>
1818
);
1919
}
2020
return null;

0 commit comments

Comments
 (0)