Skip to content

Commit b38624c

Browse files
eugenebeloveugenebelov
authored
Merge pull request #4 from make-software/add-redundunt-to-warning-message
found a redundunt component that duplicates existing Alert
2 parents e725aa9 + 9fa843a commit b38624c

File tree

5 files changed

+109
-83
lines changed

5 files changed

+109
-83
lines changed

‎src/lib/components/account-info-row/account-info-row.tsx‎

Lines changed: 64 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -4,15 +4,15 @@ import Big from 'big.js';
44
import { BodyText } from '../body-text/body-text';
55
import { FlexColumn } from '../flex-column/flex-column';
66
import { FlexRow } from '../flex-row/flex-row';
7-
import {DEFAULT_PRECISION, formatHash} from '../../utils/formatters';
7+
import { DEFAULT_PRECISION, formatHash } from '../../utils/formatters';
88
import { Tooltip } from '../tooltip/tooltip';
99
import { useMatchMedia } from '../../utils/match-media';
1010
import { CopyHash } from '../copy-hash/copy-hash';
1111
import { Cspr } from '../cspr/cspr';
1212

1313
import { PrecisionCase } from '../../utils/currency';
1414
import { HashLength } from '../../utils/formatters';
15-
import CEP18Token from "../cep18-token/cep18-token";
15+
import CEP18Token from '../cep18-token/cep18-token';
1616

1717
export const ValuesRow = styled(FlexRow)(({ theme }) => ({
1818
height: 36,
@@ -27,7 +27,7 @@ const StyledFlexColumn = styled(FlexColumn)<{ disabled?: boolean }>(
2727
...(disabled && {
2828
opacity: 0.5,
2929
}),
30-
})
30+
}),
3131
);
3232

3333
const BalanceText = styled(BodyText)(({}) => ({
@@ -51,14 +51,18 @@ interface TickerProps {
5151
cep18Config?: CEP18Config;
5252
}
5353

54-
const Ticker = ({ticker, cep18Config, ...props }: TickerProps) => {
55-
return ticker === 'CSPR' ?
56-
<Cspr {...props}/> :
57-
<CEP18Token ticker={ticker}
58-
motes={props.motes}
59-
decimals={cep18Config?.decimals || DEFAULT_PRECISION}
60-
precision={cep18Config?.precision || DEFAULT_PRECISION} />;
61-
}
54+
const Ticker = ({ ticker, cep18Config, ...props }: TickerProps) => {
55+
return ticker === 'CSPR' ? (
56+
<Cspr {...props} />
57+
) : (
58+
<CEP18Token
59+
ticker={ticker}
60+
motes={props.motes}
61+
decimals={cep18Config?.decimals || DEFAULT_PRECISION}
62+
precision={cep18Config?.precision || DEFAULT_PRECISION}
63+
/>
64+
);
65+
};
6266

6367
interface AccountInfoBalanceProps {
6468
accountBalance: string | null;
@@ -69,26 +73,38 @@ interface AccountInfoBalanceProps {
6973
cep18Config?: CEP18Config;
7074
}
7175

72-
const AccountInfoBalance = ({accountBalance, emptyBalance, loading, error, cep18Config, ticker = 'CSPR'}: AccountInfoBalanceProps) => {
76+
const AccountInfoBalance = ({
77+
accountBalance,
78+
emptyBalance,
79+
loading,
80+
error,
81+
cep18Config,
82+
ticker = 'CSPR',
83+
}: AccountInfoBalanceProps) => {
7384
return (
74-
<BalanceText size={3} monotype>
75-
{emptyBalance ? (
76-
<Ticker ticker={ticker} motes={'0'} precisionCase={PrecisionCase.deployCost} cep18Config={cep18Config} />
77-
) : loading ? (
78-
'Loading...'
79-
) : error != null ? (
80-
error
81-
) : (
82-
<Ticker
83-
ticker={ticker}
84-
motes={accountBalance}
85-
precisionCase={PrecisionCase.deployCost}
86-
cep18Config={cep18Config}
87-
/>
88-
)}
89-
</BalanceText>
90-
)
91-
}
85+
<BalanceText size={3} variation={'black'} monotype>
86+
{emptyBalance ? (
87+
<Ticker
88+
ticker={ticker}
89+
motes={'0'}
90+
precisionCase={PrecisionCase.deployCost}
91+
cep18Config={cep18Config}
92+
/>
93+
) : loading ? (
94+
'Loading...'
95+
) : error != null ? (
96+
error
97+
) : (
98+
<Ticker
99+
ticker={ticker}
100+
motes={accountBalance}
101+
precisionCase={PrecisionCase.deployCost}
102+
cep18Config={cep18Config}
103+
/>
104+
)}
105+
</BalanceText>
106+
);
107+
};
92108

93109
export interface AccountInfoRowProps {
94110
publicKey: string;
@@ -99,7 +115,7 @@ export interface AccountInfoRowProps {
99115
error: string | null;
100116
accountEmpty: boolean;
101117
disabled?: boolean;
102-
ticker?:string;
118+
ticker?: string;
103119
cep18Config?: CEP18Config;
104120
}
105121

@@ -116,9 +132,9 @@ export function AccountInfoRow(props: AccountInfoRowProps) {
116132
cep18Config,
117133
} = props;
118134

119-
const responsiveHashSize = useMatchMedia(
135+
const responsiveHashSize = useMatchMedia<HashLength>(
120136
[HashLength.TINY, HashLength.SMALL, HashLength.SMALL, HashLength.SMALL],
121-
[]
137+
[],
122138
);
123139

124140
const emptyBalance =
@@ -128,23 +144,34 @@ export function AccountInfoRow(props: AccountInfoRowProps) {
128144
return (
129145
<StyledFlexColumn disabled={props.disabled} gap={4}>
130146
<FlexRow justify="space-between">
131-
<BodyText size={1}>{label}</BodyText>
132-
<BodyText size={1}>{rightLabel}</BodyText>
147+
<BodyText size={1} variation={'black'}>
148+
{label}
149+
</BodyText>
150+
<BodyText size={1} variation={'black'}>
151+
{rightLabel}
152+
</BodyText>
133153
</FlexRow>
134154
<ValuesRow justify="space-between" align="center">
135155
{publicKey && (
136156
<>
137157
<FlexRow align="center">
138158
<Tooltip title={publicKey}>
139-
<BodyText size={3} monotype>
159+
<BodyText size={3} variation={'black'} monotype>
140160
{formatHash(publicKey, responsiveHashSize)}
141161
</BodyText>
142162
</Tooltip>
143163
<StyledIconContainer>
144164
<CopyHash value={publicKey} minified variation="gray" />
145165
</StyledIconContainer>
146166
</FlexRow>
147-
<AccountInfoBalance accountBalance={accountBalance} emptyBalance={emptyBalance} error={error} loading={loading} ticker={ticker} cep18Config={cep18Config}/>
167+
<AccountInfoBalance
168+
accountBalance={accountBalance}
169+
emptyBalance={emptyBalance}
170+
error={error}
171+
loading={loading}
172+
ticker={ticker}
173+
cep18Config={cep18Config}
174+
/>
148175
</>
149176
)}
150177
</ValuesRow>

‎src/lib/components/alert/alert.stories.tsx‎

Lines changed: 17 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
1-
import React from 'react';
2-
import { Meta, StoryFn } from '@storybook/react';
1+
import { Meta } from '@storybook/react';
32

43
import Alert, { AlertStatus } from './alert';
4+
import { LockedIcon } from '../../icons-index';
5+
import { StoryObj } from '@storybook/react-vite';
56

67
// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
7-
export default {
8+
const meta = {
89
title: 'Messaging/Alert',
910
component: Alert,
1011
// More on argTypes: https://storybook.js.org/docs/react/api/argtypes
@@ -28,14 +29,20 @@ export default {
2829
description: 'The message to display in the alert',
2930
},
3031
},
31-
} as Meta<typeof Alert>;
32+
} satisfies Meta<typeof Alert>;
33+
34+
export default meta;
35+
36+
type Story = StoryObj<typeof meta>;
3237

3338
// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
34-
const Template: StoryFn<typeof Alert> = (args) => <Alert {...args} />;
39+
// const Template: StoryFn<typeof Alert> = (args) => <Alert {...args} />;
3540

36-
export const AlertMessage = Template.bind({});
37-
// More on args: https://storybook.js.org/docs/react/writing-stories/args
38-
AlertMessage.args = {
39-
status: AlertStatus.Success,
40-
message: 'Success',
41+
export const Primary = {};
42+
export const WithCustomIcon = {
43+
args: {
44+
iconSrc: LockedIcon,
45+
title: 'Custom Icon Alert',
46+
message: 'This alert has a custom icon.',
47+
},
4148
};

‎src/lib/components/alert/alert.tsx‎

Lines changed: 24 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -63,19 +63,27 @@ export interface StatusMessageProps {
6363
status: AlertStatus;
6464
scale?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
6565
lineHeight?: 'xs' | 'sm';
66+
/** Able to provide any existing icon or a path to it.
67+
*
68+
* NOTE: default status icons will not work in that case */
69+
iconSrc?: string;
6670
}
6771

6872
export const Alert = (props: StatusMessageProps) => {
6973
const { message, title, status, scale = 'sm', lineHeight = 'sm' } = props;
7074

71-
const iconPath = Icons[status];
75+
const iconPath = props.iconSrc ? props.iconSrc : Icons[status];
76+
const statusAlert = props.iconSrc ? '' : status;
7277

7378
if (title) {
7479
return (
75-
<Container status={status} itemsSpacing={8}>
80+
<Container status={statusAlert} itemsSpacing={8}>
7681
<FlexColumn itemsSpacing={8}>
7782
<FlexRow align={'center'} itemsSpacing={8}>
78-
<SvgIcon src={iconPath} alt={`Alert icon with ${status} status`} />
83+
<SvgIcon
84+
src={iconPath}
85+
alt={`Alert icon with ${statusAlert} status`}
86+
/>
7987
<BodyText
8088
size={1}
8189
lineHeight={lineHeight}
@@ -86,7 +94,12 @@ export const Alert = (props: StatusMessageProps) => {
8694
</BodyText>
8795
</FlexRow>
8896

89-
<BodyText size={3} lineHeight={lineHeight} scale={scale}>
97+
<BodyText
98+
variation={'black'}
99+
size={3}
100+
lineHeight={lineHeight}
101+
scale={scale}
102+
>
90103
{message}
91104
</BodyText>
92105
</FlexColumn>
@@ -95,9 +108,14 @@ export const Alert = (props: StatusMessageProps) => {
95108
}
96109

97110
return (
98-
<Container status={status} align="center" itemsSpacing={8}>
111+
<Container status={statusAlert} align="center" itemsSpacing={8}>
99112
<SvgIcon src={iconPath} />
100-
<BodyText size={3} lineHeight={lineHeight} scale={scale}>
113+
<BodyText
114+
size={3}
115+
lineHeight={lineHeight}
116+
scale={scale}
117+
variation={'black'}
118+
>
101119
{message}
102120
</BodyText>
103121
</Container>

‎src/lib/components/warning-message/warning-message.stories.tsx‎

Lines changed: 0 additions & 27 deletions
This file was deleted.

‎src/lib/components/warning-message/warning-message.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -21,22 +21,23 @@ const StyledWarningMessage = styled.div<{ margin?: string }>(
2121
backgroundColor: theme.styleguideColors.fillSecondary,
2222
borderRadius: '4px',
2323
margin: margin ? margin : '0 0 24px 0',
24-
})
24+
}),
2525
);
2626

2727
const StyledHeaderRow = styled(FlexRow)(({ theme }) =>
2828
theme.withMedia({
2929
marginBottom: '8px',
30-
})
30+
}),
3131
);
3232

3333
const StyledHeaderText = styled(BodyText)<{ margin: string }>(({ theme }) =>
3434
theme.withMedia({
3535
marginLeft: '8px',
3636
lineHeight: ['18px', '1.5rem', '1.5rem'],
37-
})
37+
}),
3838
);
3939

40+
/** @deprecated Please use <Alert /> with `iconSrc` instead of it. */
4041
export const WarningMessage = ({
4142
iconSrc,
4243
title,

0 commit comments

Comments
 (0)