@transferwise/components 0.0.0-experimental-6bb93de → 0.0.0-experimental-7208d89
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/index.js +0 -4
- package/build/index.js.map +1 -1
- package/build/index.mjs +0 -2
- package/build/index.mjs.map +1 -1
- package/build/main.css +1 -1
- package/build/prompt/InlinePrompt/InlinePrompt.js.map +1 -1
- package/build/prompt/InlinePrompt/InlinePrompt.mjs.map +1 -1
- package/build/styles/button/Button.css +1 -1
- package/build/styles/main.css +1 -1
- package/build/types/index.d.ts +0 -4
- package/build/types/index.d.ts.map +1 -1
- package/build/types/prompt/InlinePrompt/InlinePrompt.d.ts +1 -3
- package/build/types/prompt/InlinePrompt/InlinePrompt.d.ts.map +1 -1
- package/package.json +3 -3
- package/src/button/Button.css +1 -1
- package/src/button/Button.less +1 -1
- package/src/button/Button.story.tsx +29 -114
- package/src/button/Button.tests.story.tsx +189 -0
- package/src/index.ts +0 -4
- package/src/main.css +1 -1
- package/src/neptune-css/NeptuneCSS.story.tsx +2 -3
- package/src/prompt/InlinePrompt/InlinePrompt.story.tsx +1 -2
- package/src/prompt/InlinePrompt/InlinePrompt.tsx +1 -3
- package/src/provider/theme/ThemeProvider.story.tsx +1 -1
- package/src/sentimentSurface/SentimentSurface.story.tsx +30 -90
- package/src/sentimentSurface/SentimentSurface.tests.story.tsx +2 -2
package/build/index.js
CHANGED
|
@@ -51,7 +51,6 @@ var Header = require('./header/Header.js');
|
|
|
51
51
|
var infoPresentations = require('./info/infoPresentations.js');
|
|
52
52
|
var Info = require('./info/Info.js');
|
|
53
53
|
var InlineAlert = require('./inlineAlert/InlineAlert.js');
|
|
54
|
-
var InlinePrompt = require('./prompt/InlinePrompt/InlinePrompt.js');
|
|
55
54
|
var InputWithDisplayFormat = require('./inputWithDisplayFormat/InputWithDisplayFormat.js');
|
|
56
55
|
var Input = require('./inputs/Input.js');
|
|
57
56
|
var InputGroup = require('./inputs/InputGroup.js');
|
|
@@ -91,7 +90,6 @@ var ResponsivePanel = require('./common/responsivePanel/ResponsivePanel.js');
|
|
|
91
90
|
var Section = require('./section/Section.js');
|
|
92
91
|
var SegmentedControl = require('./segmentedControl/SegmentedControl.js');
|
|
93
92
|
var Select = require('./select/Select.js');
|
|
94
|
-
var SentimentSurface = require('./sentimentSurface/SentimentSurface.js');
|
|
95
93
|
var SlidingPanel = require('./slidingPanel/SlidingPanel.js');
|
|
96
94
|
var Snackbar = require('./snackbar/Snackbar.js');
|
|
97
95
|
var SnackbarContext = require('./snackbar/SnackbarContext.js');
|
|
@@ -210,7 +208,6 @@ Object.defineProperty(exports, "InfoPresentation", {
|
|
|
210
208
|
});
|
|
211
209
|
exports.Info = Info.default;
|
|
212
210
|
exports.InlineAlert = InlineAlert.default;
|
|
213
|
-
exports.InlinePrompt = InlinePrompt.InlinePrompt;
|
|
214
211
|
exports.InputWithDisplayFormat = InputWithDisplayFormat.default;
|
|
215
212
|
exports.Input = Input.Input;
|
|
216
213
|
exports.InputGroup = InputGroup.InputGroup;
|
|
@@ -256,7 +253,6 @@ exports.ResponsivePanel = ResponsivePanel.default;
|
|
|
256
253
|
exports.Section = Section.default;
|
|
257
254
|
exports.SegmentedControl = SegmentedControl.default;
|
|
258
255
|
exports.Select = Select.default;
|
|
259
|
-
exports.SentimentSurface = SentimentSurface.default;
|
|
260
256
|
exports.SlidingPanel = SlidingPanel.default;
|
|
261
257
|
exports.SnackbarPortal = Snackbar.default;
|
|
262
258
|
exports.SnackbarConsumer = SnackbarContext.SnackbarConsumer;
|
package/build/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/build/index.mjs
CHANGED
|
@@ -49,7 +49,6 @@ export { default as Header } from './header/Header.mjs';
|
|
|
49
49
|
export { InfoPresentation } from './info/infoPresentations.mjs';
|
|
50
50
|
export { default as Info } from './info/Info.mjs';
|
|
51
51
|
export { default as InlineAlert } from './inlineAlert/InlineAlert.mjs';
|
|
52
|
-
export { InlinePrompt } from './prompt/InlinePrompt/InlinePrompt.mjs';
|
|
53
52
|
export { default as InputWithDisplayFormat } from './inputWithDisplayFormat/InputWithDisplayFormat.mjs';
|
|
54
53
|
export { Input } from './inputs/Input.mjs';
|
|
55
54
|
export { InputGroup } from './inputs/InputGroup.mjs';
|
|
@@ -89,7 +88,6 @@ export { default as ResponsivePanel } from './common/responsivePanel/ResponsiveP
|
|
|
89
88
|
export { default as Section } from './section/Section.mjs';
|
|
90
89
|
export { default as SegmentedControl } from './segmentedControl/SegmentedControl.mjs';
|
|
91
90
|
export { default as Select } from './select/Select.mjs';
|
|
92
|
-
export { default as SentimentSurface } from './sentimentSurface/SentimentSurface.mjs';
|
|
93
91
|
export { default as SlidingPanel } from './slidingPanel/SlidingPanel.mjs';
|
|
94
92
|
export { default as SnackbarPortal } from './snackbar/Snackbar.mjs';
|
|
95
93
|
export { SnackbarConsumer, SnackbarContext } from './snackbar/SnackbarContext.mjs';
|
package/build/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/build/main.css
CHANGED
|
@@ -1308,7 +1308,7 @@
|
|
|
1308
1308
|
--Button-color-active: var(--Button-secondary-neutral-color);
|
|
1309
1309
|
}
|
|
1310
1310
|
.wds-Button--secondary-neutral .wds-Button-icon--end {
|
|
1311
|
-
color: var(--
|
|
1311
|
+
color: var(--Button-secondary-color);
|
|
1312
1312
|
}
|
|
1313
1313
|
.wds-Button--tertiary {
|
|
1314
1314
|
--Button-background: var(--Button-tertiary-background);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InlinePrompt.js","sources":["../../../src/prompt/InlinePrompt/InlinePrompt.tsx"],"sourcesContent":["import { Sentiment } from '../../common';\nimport { BackslashCircle, GiftBox } from '@transferwise/icons';\nimport ProcessIndicator from '../../processIndicator';\nimport StatusIcon from '../../statusIcon';\nimport { clsx } from 'clsx';\nimport Body from '../../body';\nimport SentimentSurface from '../../sentimentSurface';\n\nexport type InlinePromptProps = {\n /**\n * The sentiment determines the colour scheme\n */\n sentiment?:\n | `${Sentiment.POSITIVE | Sentiment.NEGATIVE | Sentiment.NEUTRAL | Sentiment.WARNING}`\n | 'proposition';\n /**\n * Replaces the icon with a spinner while waiting for the short-lived action to finish.\n * @default false\n */\n loading?: boolean;\n /**\n * While prompts cannot be fully (visually and functionally) disabled, this prop should be enabled\n * they are associated with actually disabled component (e.g. a disabled list item or input).\n * @default false\n */\n muted?: boolean;\n /**\n * Icon override for `proposition` and `positive` sentiments. Unsupported for remaining ones.\n */\n media?: React.ReactNode;\n id?: string;\n className?: string;\n 'data-testid'?: string;\n children: React.ReactNode;\n};\n\n/**\n * Inline prompts appear alongside a specific component on the screen. They help the user stay\n * informed, fix something, or get more out of what they're doing
|
|
1
|
+
{"version":3,"file":"InlinePrompt.js","sources":["../../../src/prompt/InlinePrompt/InlinePrompt.tsx"],"sourcesContent":["import { Sentiment } from '../../common';\nimport { BackslashCircle, GiftBox } from '@transferwise/icons';\nimport ProcessIndicator from '../../processIndicator';\nimport StatusIcon from '../../statusIcon';\nimport { clsx } from 'clsx';\nimport Body from '../../body';\nimport SentimentSurface from '../../sentimentSurface';\n\nexport type InlinePromptProps = {\n /**\n * The sentiment determines the colour scheme\n */\n sentiment?:\n | `${Sentiment.POSITIVE | Sentiment.NEGATIVE | Sentiment.NEUTRAL | Sentiment.WARNING}`\n | 'proposition';\n /**\n * Replaces the icon with a spinner while waiting for the short-lived action to finish.\n * @default false\n */\n loading?: boolean;\n /**\n * While prompts cannot be fully (visually and functionally) disabled, this prop should be enabled\n * they are associated with actually disabled component (e.g. a disabled list item or input).\n * @default false\n */\n muted?: boolean;\n /**\n * Icon override for `proposition` and `positive` sentiments. Unsupported for remaining ones.\n */\n media?: React.ReactNode;\n id?: string;\n className?: string;\n 'data-testid'?: string;\n children: React.ReactNode;\n};\n\n/**\n * Inline prompts appear alongside a specific component on the screen. They help the user stay\n * informed, fix something, or get more out of what they're doing.\n */\nexport const InlinePrompt = ({\n sentiment = Sentiment.POSITIVE,\n muted = false,\n loading = false,\n className,\n children,\n media = null,\n 'data-testid': dataTestId,\n ...rest\n}: InlinePromptProps) => {\n const surfaceSentiment = sentiment === Sentiment.POSITIVE ? 'success' : sentiment;\n\n const renderMedia = () => {\n if (muted) {\n return <BackslashCircle size={16} data-testid=\"InlinePrompt_Muted\" />;\n }\n if (loading) {\n return (\n <ProcessIndicator\n data-testid=\"InlinePrompt_ProcessIndicator\"\n size=\"xxs\"\n className=\"wds-inline-prompt-process-indicator\"\n />\n );\n }\n\n if (sentiment === 'positive' && media) {\n return media;\n }\n\n if (sentiment === 'proposition') {\n return media || <GiftBox />;\n }\n\n return <StatusIcon size={16} sentiment={sentiment} />;\n };\n\n return (\n <SentimentSurface\n sentiment={surfaceSentiment}\n data-testid={dataTestId}\n className={clsx(\n 'wds-inline-prompt',\n `wds-inline-prompt--${sentiment}`,\n {\n 'wds-inline-prompt--muted': muted,\n 'wds-inline-prompt--loading': loading,\n },\n className,\n )}\n {...rest}\n >\n <div className=\"wds-inline-prompt__media-wrapper\">{renderMedia()}</div>\n <Body>{children}</Body>\n </SentimentSurface>\n );\n};\n"],"names":["InlinePrompt","sentiment","Sentiment","POSITIVE","muted","loading","className","children","media","dataTestId","rest","surfaceSentiment","renderMedia","_jsx","BackslashCircle","size","ProcessIndicator","GiftBox","StatusIcon","_jsxs","SentimentSurface","clsx","Body"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwCO,MAAMA,YAAY,GAAGA,CAAC;aAC3BC,WAAS,GAAGC,mBAAS,CAACC,QAAQ;AAC9BC,EAAAA,KAAK,GAAG,KAAK;AACbC,EAAAA,OAAO,GAAG,KAAK;EACfC,SAAS;EACTC,QAAQ;AACRC,EAAAA,KAAK,GAAG,IAAI;AACZ,EAAA,aAAa,EAAEC,UAAU;EACzB,GAAGC;AAAI,CACW,KAAI;EACtB,MAAMC,gBAAgB,GAAGV,WAAS,KAAKC,mBAAS,CAACC,QAAQ,GAAG,SAAS,GAAGF,WAAS;EAEjF,MAAMW,WAAW,GAAGA,MAAK;AACvB,IAAA,IAAIR,KAAK,EAAE;MACT,oBAAOS,cAAA,CAACC,qBAAe,EAAA;AAACC,QAAAA,IAAI,EAAE,EAAG;QAAC,aAAA,EAAY;AAAoB,QAAG;AACvE,IAAA;AACA,IAAA,IAAIV,OAAO,EAAE;MACX,oBACEQ,cAAA,CAACG,wBAAgB,EAAA;AACf,QAAA,aAAA,EAAY,+BAA+B;AAC3CD,QAAAA,IAAI,EAAC,KAAK;AACVT,QAAAA,SAAS,EAAC;AAAqC,OAAA,CAC/C;AAEN,IAAA;AAEA,IAAA,IAAIL,WAAS,KAAK,UAAU,IAAIO,KAAK,EAAE;AACrC,MAAA,OAAOA,KAAK;AACd,IAAA;IAEA,IAAIP,WAAS,KAAK,aAAa,EAAE;AAC/B,MAAA,OAAOO,KAAK,iBAAIK,cAAA,CAACI,aAAO,KAAG;AAC7B,IAAA;IAEA,oBAAOJ,cAAA,CAACK,kBAAU,EAAA;AAACH,MAAAA,IAAI,EAAE,EAAG;AAACd,MAAAA,SAAS,EAAEA;AAAU,MAAG;EACvD,CAAC;EAED,oBACEkB,eAAA,CAACC,wBAAgB,EAAA;AACfnB,IAAAA,SAAS,EAAEU,gBAAiB;AAC5B,IAAA,aAAA,EAAaF,UAAW;IACxBH,SAAS,EAAEe,SAAI,CACb,mBAAmB,EACnB,CAAA,mBAAA,EAAsBpB,WAAS,EAAE,EACjC;AACE,MAAA,0BAA0B,EAAEG,KAAK;AACjC,MAAA,4BAA4B,EAAEC;KAC/B,EACDC,SAAS,CACT;AAAA,IAAA,GACEI,IAAI;AAAAH,IAAAA,QAAA,gBAERM,cAAA,CAAA,KAAA,EAAA;AAAKP,MAAAA,SAAS,EAAC,kCAAkC;MAAAC,QAAA,EAAEK,WAAW;AAAE,KAAM,CACtE,eAAAC,cAAA,CAACS,YAAI,EAAA;AAAAf,MAAAA,QAAA,EAAEA;AAAQ,KAAO,CACxB;AAAA,GAAkB,CAAC;AAEvB;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InlinePrompt.mjs","sources":["../../../src/prompt/InlinePrompt/InlinePrompt.tsx"],"sourcesContent":["import { Sentiment } from '../../common';\nimport { BackslashCircle, GiftBox } from '@transferwise/icons';\nimport ProcessIndicator from '../../processIndicator';\nimport StatusIcon from '../../statusIcon';\nimport { clsx } from 'clsx';\nimport Body from '../../body';\nimport SentimentSurface from '../../sentimentSurface';\n\nexport type InlinePromptProps = {\n /**\n * The sentiment determines the colour scheme\n */\n sentiment?:\n | `${Sentiment.POSITIVE | Sentiment.NEGATIVE | Sentiment.NEUTRAL | Sentiment.WARNING}`\n | 'proposition';\n /**\n * Replaces the icon with a spinner while waiting for the short-lived action to finish.\n * @default false\n */\n loading?: boolean;\n /**\n * While prompts cannot be fully (visually and functionally) disabled, this prop should be enabled\n * they are associated with actually disabled component (e.g. a disabled list item or input).\n * @default false\n */\n muted?: boolean;\n /**\n * Icon override for `proposition` and `positive` sentiments. Unsupported for remaining ones.\n */\n media?: React.ReactNode;\n id?: string;\n className?: string;\n 'data-testid'?: string;\n children: React.ReactNode;\n};\n\n/**\n * Inline prompts appear alongside a specific component on the screen. They help the user stay\n * informed, fix something, or get more out of what they're doing
|
|
1
|
+
{"version":3,"file":"InlinePrompt.mjs","sources":["../../../src/prompt/InlinePrompt/InlinePrompt.tsx"],"sourcesContent":["import { Sentiment } from '../../common';\nimport { BackslashCircle, GiftBox } from '@transferwise/icons';\nimport ProcessIndicator from '../../processIndicator';\nimport StatusIcon from '../../statusIcon';\nimport { clsx } from 'clsx';\nimport Body from '../../body';\nimport SentimentSurface from '../../sentimentSurface';\n\nexport type InlinePromptProps = {\n /**\n * The sentiment determines the colour scheme\n */\n sentiment?:\n | `${Sentiment.POSITIVE | Sentiment.NEGATIVE | Sentiment.NEUTRAL | Sentiment.WARNING}`\n | 'proposition';\n /**\n * Replaces the icon with a spinner while waiting for the short-lived action to finish.\n * @default false\n */\n loading?: boolean;\n /**\n * While prompts cannot be fully (visually and functionally) disabled, this prop should be enabled\n * they are associated with actually disabled component (e.g. a disabled list item or input).\n * @default false\n */\n muted?: boolean;\n /**\n * Icon override for `proposition` and `positive` sentiments. Unsupported for remaining ones.\n */\n media?: React.ReactNode;\n id?: string;\n className?: string;\n 'data-testid'?: string;\n children: React.ReactNode;\n};\n\n/**\n * Inline prompts appear alongside a specific component on the screen. They help the user stay\n * informed, fix something, or get more out of what they're doing.\n */\nexport const InlinePrompt = ({\n sentiment = Sentiment.POSITIVE,\n muted = false,\n loading = false,\n className,\n children,\n media = null,\n 'data-testid': dataTestId,\n ...rest\n}: InlinePromptProps) => {\n const surfaceSentiment = sentiment === Sentiment.POSITIVE ? 'success' : sentiment;\n\n const renderMedia = () => {\n if (muted) {\n return <BackslashCircle size={16} data-testid=\"InlinePrompt_Muted\" />;\n }\n if (loading) {\n return (\n <ProcessIndicator\n data-testid=\"InlinePrompt_ProcessIndicator\"\n size=\"xxs\"\n className=\"wds-inline-prompt-process-indicator\"\n />\n );\n }\n\n if (sentiment === 'positive' && media) {\n return media;\n }\n\n if (sentiment === 'proposition') {\n return media || <GiftBox />;\n }\n\n return <StatusIcon size={16} sentiment={sentiment} />;\n };\n\n return (\n <SentimentSurface\n sentiment={surfaceSentiment}\n data-testid={dataTestId}\n className={clsx(\n 'wds-inline-prompt',\n `wds-inline-prompt--${sentiment}`,\n {\n 'wds-inline-prompt--muted': muted,\n 'wds-inline-prompt--loading': loading,\n },\n className,\n )}\n {...rest}\n >\n <div className=\"wds-inline-prompt__media-wrapper\">{renderMedia()}</div>\n <Body>{children}</Body>\n </SentimentSurface>\n );\n};\n"],"names":["InlinePrompt","sentiment","Sentiment","POSITIVE","muted","loading","className","children","media","dataTestId","rest","surfaceSentiment","renderMedia","_jsx","BackslashCircle","size","ProcessIndicator","GiftBox","StatusIcon","_jsxs","SentimentSurface","clsx","Body"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwCO,MAAMA,YAAY,GAAGA,CAAC;EAC3BC,SAAS,GAAGC,SAAS,CAACC,QAAQ;AAC9BC,EAAAA,KAAK,GAAG,KAAK;AACbC,EAAAA,OAAO,GAAG,KAAK;EACfC,SAAS;EACTC,QAAQ;AACRC,EAAAA,KAAK,GAAG,IAAI;AACZ,EAAA,aAAa,EAAEC,UAAU;EACzB,GAAGC;AAAI,CACW,KAAI;EACtB,MAAMC,gBAAgB,GAAGV,SAAS,KAAKC,SAAS,CAACC,QAAQ,GAAG,SAAS,GAAGF,SAAS;EAEjF,MAAMW,WAAW,GAAGA,MAAK;AACvB,IAAA,IAAIR,KAAK,EAAE;MACT,oBAAOS,GAAA,CAACC,eAAe,EAAA;AAACC,QAAAA,IAAI,EAAE,EAAG;QAAC,aAAA,EAAY;AAAoB,QAAG;AACvE,IAAA;AACA,IAAA,IAAIV,OAAO,EAAE;MACX,oBACEQ,GAAA,CAACG,gBAAgB,EAAA;AACf,QAAA,aAAA,EAAY,+BAA+B;AAC3CD,QAAAA,IAAI,EAAC,KAAK;AACVT,QAAAA,SAAS,EAAC;AAAqC,OAAA,CAC/C;AAEN,IAAA;AAEA,IAAA,IAAIL,SAAS,KAAK,UAAU,IAAIO,KAAK,EAAE;AACrC,MAAA,OAAOA,KAAK;AACd,IAAA;IAEA,IAAIP,SAAS,KAAK,aAAa,EAAE;AAC/B,MAAA,OAAOO,KAAK,iBAAIK,GAAA,CAACI,OAAO,KAAG;AAC7B,IAAA;IAEA,oBAAOJ,GAAA,CAACK,UAAU,EAAA;AAACH,MAAAA,IAAI,EAAE,EAAG;AAACd,MAAAA,SAAS,EAAEA;AAAU,MAAG;EACvD,CAAC;EAED,oBACEkB,IAAA,CAACC,gBAAgB,EAAA;AACfnB,IAAAA,SAAS,EAAEU,gBAAiB;AAC5B,IAAA,aAAA,EAAaF,UAAW;IACxBH,SAAS,EAAEe,IAAI,CACb,mBAAmB,EACnB,CAAA,mBAAA,EAAsBpB,SAAS,EAAE,EACjC;AACE,MAAA,0BAA0B,EAAEG,KAAK;AACjC,MAAA,4BAA4B,EAAEC;KAC/B,EACDC,SAAS,CACT;AAAA,IAAA,GACEI,IAAI;AAAAH,IAAAA,QAAA,gBAERM,GAAA,CAAA,KAAA,EAAA;AAAKP,MAAAA,SAAS,EAAC,kCAAkC;MAAAC,QAAA,EAAEK,WAAW;AAAE,KAAM,CACtE,eAAAC,GAAA,CAACS,IAAI,EAAA;AAAAf,MAAAA,QAAA,EAAEA;AAAQ,KAAO,CACxB;AAAA,GAAkB,CAAC;AAEvB;;;;"}
|
|
@@ -113,7 +113,7 @@
|
|
|
113
113
|
--Button-color-active: var(--Button-secondary-neutral-color);
|
|
114
114
|
}
|
|
115
115
|
.wds-Button--secondary-neutral .wds-Button-icon--end {
|
|
116
|
-
color: var(--
|
|
116
|
+
color: var(--Button-secondary-color);
|
|
117
117
|
}
|
|
118
118
|
.wds-Button--tertiary {
|
|
119
119
|
--Button-background: var(--Button-tertiary-background);
|
package/build/styles/main.css
CHANGED
|
@@ -1308,7 +1308,7 @@
|
|
|
1308
1308
|
--Button-color-active: var(--Button-secondary-neutral-color);
|
|
1309
1309
|
}
|
|
1310
1310
|
.wds-Button--secondary-neutral .wds-Button-icon--end {
|
|
1311
|
-
color: var(--
|
|
1311
|
+
color: var(--Button-secondary-color);
|
|
1312
1312
|
}
|
|
1313
1313
|
.wds-Button--tertiary {
|
|
1314
1314
|
--Button-background: var(--Button-tertiary-background);
|
package/build/types/index.d.ts
CHANGED
|
@@ -26,7 +26,6 @@ export type { HeaderProps } from './header';
|
|
|
26
26
|
export type { EmphasisProps } from './emphasis';
|
|
27
27
|
export type { FieldProps } from './field/Field';
|
|
28
28
|
export type { InfoProps } from './info';
|
|
29
|
-
export type { InlinePromptProps } from './prompt';
|
|
30
29
|
export type { InputWithDisplayFormatProps } from './inputWithDisplayFormat';
|
|
31
30
|
export type { InputProps } from './inputs/Input';
|
|
32
31
|
export type { InputGroupProps } from './inputs/InputGroup';
|
|
@@ -63,7 +62,6 @@ export type { SnackbarContextType } from './snackbar/SnackbarContext';
|
|
|
63
62
|
export type { StatusIconProps } from './statusIcon';
|
|
64
63
|
export type { StickyProps } from './sticky';
|
|
65
64
|
export type { SummaryProps } from './summary';
|
|
66
|
-
export type { SentimentSurfaceProps } from './sentimentSurface';
|
|
67
65
|
export type { SwitchProps } from './switch';
|
|
68
66
|
export type { SwitchOptionProps } from './switchOption';
|
|
69
67
|
export type { TabItem, TabsProps } from './tabs';
|
|
@@ -120,7 +118,6 @@ export { default as Header } from './header';
|
|
|
120
118
|
export { default as Image } from './image';
|
|
121
119
|
export { default as Info } from './info';
|
|
122
120
|
export { default as InlineAlert } from './inlineAlert';
|
|
123
|
-
export { InlinePrompt } from './prompt';
|
|
124
121
|
export { default as InputWithDisplayFormat } from './inputWithDisplayFormat';
|
|
125
122
|
export { Input } from './inputs/Input';
|
|
126
123
|
export { InputGroup } from './inputs/InputGroup';
|
|
@@ -157,7 +154,6 @@ export { default as ResponsivePanel } from './common/responsivePanel';
|
|
|
157
154
|
export { default as Section } from './section';
|
|
158
155
|
export { default as SegmentedControl } from './segmentedControl';
|
|
159
156
|
export { default as Select } from './select';
|
|
160
|
-
export { default as SentimentSurface } from './sentimentSurface';
|
|
161
157
|
export { default as SlidingPanel } from './slidingPanel';
|
|
162
158
|
export { default as SnackbarPortal } from './snackbar/Snackbar';
|
|
163
159
|
export { SnackbarConsumer, SnackbarContext } from './snackbar/SnackbarContext';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAEA;;GAEG;AACH,YAAY,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AACjE,YAAY,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACxD,YAAY,EAAE,WAAW,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAClE,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC5C,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AACpD,YAAY,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACxD,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAC1C,YAAY,EAAE,cAAc,IAAI,WAAW,EAAE,MAAM,UAAU,CAAC;AAC9D,YAAY,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AACxC,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAChD,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAChD,YAAY,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAC5D,YAAY,EACV,SAAS,EACT,YAAY,EACZ,eAAe,EACf,SAAS,EACT,UAAU,EACV,eAAe,GAChB,MAAM,UAAU,CAAC;AAClB,YAAY,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAC7D,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAClD,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AACpD,YAAY,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACzD,YAAY,EAAE,mBAAmB,EAAE,wBAAwB,EAAE,MAAM,kBAAkB,CAAC;AACtF,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC5C,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC5C,YAAY,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAC9C,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC5C,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAChD,YAAY,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAChD,YAAY,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AACxC,YAAY,EAAE,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"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"}
|
|
@@ -26,9 +26,7 @@ export type InlinePromptProps = {
|
|
|
26
26
|
};
|
|
27
27
|
/**
|
|
28
28
|
* Inline prompts appear alongside a specific component on the screen. They help the user stay
|
|
29
|
-
* informed, fix something, or get more out of what they're doing.
|
|
30
|
-
*
|
|
31
|
-
* **NB:** It should be used in favour of `InlineAlert` which will be soon deprecated.
|
|
29
|
+
* informed, fix something, or get more out of what they're doing.
|
|
32
30
|
*/
|
|
33
31
|
export declare const InlinePrompt: ({ sentiment, muted, loading, className, children, media, "data-testid": dataTestId, ...rest }: InlinePromptProps) => import("react").JSX.Element;
|
|
34
32
|
//# sourceMappingURL=InlinePrompt.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InlinePrompt.d.ts","sourceRoot":"","sources":["../../../../src/prompt/InlinePrompt/InlinePrompt.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAQzC,MAAM,MAAM,iBAAiB,GAAG;IAC9B;;OAEG;IACH,SAAS,CAAC,EACN,GAAG,SAAS,CAAC,QAAQ,GAAG,SAAS,CAAC,QAAQ,GAAG,SAAS,CAAC,OAAO,GAAG,SAAS,CAAC,OAAO,EAAE,GACpF,aAAa,CAAC;IAClB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAEF
|
|
1
|
+
{"version":3,"file":"InlinePrompt.d.ts","sourceRoot":"","sources":["../../../../src/prompt/InlinePrompt/InlinePrompt.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAQzC,MAAM,MAAM,iBAAiB,GAAG;IAC9B;;OAEG;IACH,SAAS,CAAC,EACN,GAAG,SAAS,CAAC,QAAQ,GAAG,SAAS,CAAC,QAAQ,GAAG,SAAS,CAAC,OAAO,GAAG,SAAS,CAAC,OAAO,EAAE,GACpF,aAAa,CAAC;IAClB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,YAAY,GAAI,+FAS1B,iBAAiB,gCA+CnB,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@transferwise/components",
|
|
3
|
-
"version": "0.0.0-experimental-
|
|
3
|
+
"version": "0.0.0-experimental-7208d89",
|
|
4
4
|
"description": "Neptune React components",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"repository": {
|
|
@@ -84,13 +84,13 @@
|
|
|
84
84
|
"storybook-addon-tag-badges": "^2.0.2",
|
|
85
85
|
"storybook-addon-test-codegen": "^2.0.1",
|
|
86
86
|
"@transferwise/less-config": "3.1.2",
|
|
87
|
-
"@transferwise/neptune-css": "0.0.0-experimental-
|
|
87
|
+
"@transferwise/neptune-css": "0.0.0-experimental-7208d89",
|
|
88
88
|
"@wise/components-theming": "1.9.1",
|
|
89
89
|
"@wise/wds-configs": "0.0.0"
|
|
90
90
|
},
|
|
91
91
|
"peerDependencies": {
|
|
92
92
|
"@transferwise/icons": "^3 || ^4",
|
|
93
|
-
"@transferwise/neptune-css": "0.0.0-experimental-
|
|
93
|
+
"@transferwise/neptune-css": "0.0.0-experimental-7208d89",
|
|
94
94
|
"@wise/art": "^2.24.4",
|
|
95
95
|
"@wise/components-theming": "^1.6.2",
|
|
96
96
|
"react": ">=18",
|
package/src/button/Button.css
CHANGED
|
@@ -113,7 +113,7 @@
|
|
|
113
113
|
--Button-color-active: var(--Button-secondary-neutral-color);
|
|
114
114
|
}
|
|
115
115
|
.wds-Button--secondary-neutral .wds-Button-icon--end {
|
|
116
|
-
color: var(--
|
|
116
|
+
color: var(--Button-secondary-color);
|
|
117
117
|
}
|
|
118
118
|
.wds-Button--tertiary {
|
|
119
119
|
--Button-background: var(--Button-tertiary-background);
|
package/src/button/Button.less
CHANGED
|
@@ -696,116 +696,6 @@ export const WithAvatars: StoryObj<PreviewStoryArgs> = {
|
|
|
696
696
|
decorators: [withComponentGrid()],
|
|
697
697
|
};
|
|
698
698
|
|
|
699
|
-
const buttonPriorities = ['primary', 'secondary', 'secondary-neutral', 'tertiary'] as const;
|
|
700
|
-
const buttonSizes = ['sm', 'md', 'lg'] as const;
|
|
701
|
-
|
|
702
|
-
export const AllVariants = storyConfig(
|
|
703
|
-
{
|
|
704
|
-
tags: ['!autodocs'],
|
|
705
|
-
parameters: {
|
|
706
|
-
padding: '0',
|
|
707
|
-
},
|
|
708
|
-
render: () => (
|
|
709
|
-
<div
|
|
710
|
-
className="button-variants"
|
|
711
|
-
style={{ display: 'flex', flexWrap: 'wrap', gap: '16px', maxWidth: '1200px' }}
|
|
712
|
-
>
|
|
713
|
-
{buttonPriorities.map((priority) =>
|
|
714
|
-
buttonSizes.map((size) => (
|
|
715
|
-
<div
|
|
716
|
-
key={`${priority}-default-${size}`}
|
|
717
|
-
style={{ flex: '1 0 30%', marginBottom: '16px', justifyContent: 'space-between' }}
|
|
718
|
-
>
|
|
719
|
-
<Button
|
|
720
|
-
v2
|
|
721
|
-
priority={priority as ButtonPriority}
|
|
722
|
-
size={size}
|
|
723
|
-
addonStart={{ type: 'avatar', value: [{ asset: <Freeze /> }] }}
|
|
724
|
-
addonEnd={{ type: 'icon', value: <ArrowRight /> }}
|
|
725
|
-
block
|
|
726
|
-
>
|
|
727
|
-
{`${priority} default ${size}`}
|
|
728
|
-
</Button>
|
|
729
|
-
<Button
|
|
730
|
-
className="m-t-1 m-b-1"
|
|
731
|
-
v2
|
|
732
|
-
priority={priority as ButtonPriority}
|
|
733
|
-
size={size}
|
|
734
|
-
addonStart={{
|
|
735
|
-
type: 'avatar',
|
|
736
|
-
value: [{ asset: <Freeze /> }, { asset: <Freeze /> }],
|
|
737
|
-
}}
|
|
738
|
-
addonEnd={{ type: 'icon', value: <ArrowRight /> }}
|
|
739
|
-
block
|
|
740
|
-
disabled
|
|
741
|
-
>
|
|
742
|
-
{`${priority} default ${size} Disabled`}
|
|
743
|
-
</Button>
|
|
744
|
-
<Button
|
|
745
|
-
v2
|
|
746
|
-
priority={priority as ButtonPriority}
|
|
747
|
-
size={size}
|
|
748
|
-
addonStart={{ type: 'avatar', value: [{ asset: <Freeze /> }] }}
|
|
749
|
-
addonEnd={{ type: 'icon', value: <ArrowRight /> }}
|
|
750
|
-
block
|
|
751
|
-
loading
|
|
752
|
-
>
|
|
753
|
-
{`${priority} default ${size} Loading`}
|
|
754
|
-
</Button>
|
|
755
|
-
</div>
|
|
756
|
-
)),
|
|
757
|
-
)}
|
|
758
|
-
{['primary', 'secondary'].map((priority) =>
|
|
759
|
-
buttonSizes.map((size) => (
|
|
760
|
-
<div
|
|
761
|
-
key={`${priority}-negative-${size}`}
|
|
762
|
-
style={{ flex: '1 0 30%', marginBottom: '16px', justifyContent: 'space-between' }}
|
|
763
|
-
>
|
|
764
|
-
<Button
|
|
765
|
-
v2
|
|
766
|
-
sentiment="negative"
|
|
767
|
-
priority={priority as ButtonPriority}
|
|
768
|
-
size={size}
|
|
769
|
-
addonEnd={{ type: 'icon', value: <ChevronRight /> }}
|
|
770
|
-
addonStart={{ type: 'avatar', value: [{ asset: <Freeze /> }] }}
|
|
771
|
-
block
|
|
772
|
-
>
|
|
773
|
-
{`${priority} negative ${size}`}
|
|
774
|
-
</Button>
|
|
775
|
-
<Button
|
|
776
|
-
className="m-t-1 m-b-1"
|
|
777
|
-
v2
|
|
778
|
-
sentiment="negative"
|
|
779
|
-
priority={priority as ButtonPriority}
|
|
780
|
-
size={size}
|
|
781
|
-
addonEnd={{ type: 'icon', value: <ChevronRight /> }}
|
|
782
|
-
addonStart={{ type: 'avatar', value: [{ asset: <Freeze /> }] }}
|
|
783
|
-
block
|
|
784
|
-
disabled
|
|
785
|
-
>
|
|
786
|
-
{`${priority} negative ${size} Disabled`}
|
|
787
|
-
</Button>
|
|
788
|
-
<Button
|
|
789
|
-
v2
|
|
790
|
-
sentiment="negative"
|
|
791
|
-
priority={priority as ButtonPriority}
|
|
792
|
-
size={size}
|
|
793
|
-
addonEnd={{ type: 'icon', value: <ChevronRight /> }}
|
|
794
|
-
addonStart={{ type: 'avatar', value: [{ asset: <Freeze /> }] }}
|
|
795
|
-
block
|
|
796
|
-
loading
|
|
797
|
-
>
|
|
798
|
-
{`${priority} negative ${size} Loading`}
|
|
799
|
-
</Button>
|
|
800
|
-
</div>
|
|
801
|
-
)),
|
|
802
|
-
)}
|
|
803
|
-
</div>
|
|
804
|
-
),
|
|
805
|
-
},
|
|
806
|
-
{ variants: ['default', 'dark', 'bright-green', 'forest-green', 'rtl'] },
|
|
807
|
-
);
|
|
808
|
-
|
|
809
699
|
/**
|
|
810
700
|
* **NB:** The button doesn't know how long its label is, how many words it consists of and
|
|
811
701
|
* how zoomed in it is. That is likely to lead to scenarios in which the text will overflow
|
|
@@ -926,14 +816,39 @@ export const SentimentAwareness: Story = {
|
|
|
926
816
|
className="p-a-1 d-flex align-items-center"
|
|
927
817
|
style={{ gap: 'var(--size-8)' }}
|
|
928
818
|
>
|
|
929
|
-
<Button
|
|
930
|
-
|
|
819
|
+
<Button
|
|
820
|
+
v2
|
|
821
|
+
size="md"
|
|
822
|
+
addonEnd={{ type: 'icon', value: <ChevronRight /> }}
|
|
823
|
+
addonStart={{ type: 'avatar', value: [{ asset: <Freeze /> }] }}
|
|
824
|
+
>
|
|
825
|
+
Primary
|
|
826
|
+
</Button>
|
|
827
|
+
<Button
|
|
828
|
+
v2
|
|
829
|
+
size="md"
|
|
830
|
+
priority="secondary"
|
|
831
|
+
addonEnd={{ type: 'icon', value: <ChevronRight /> }}
|
|
832
|
+
addonStart={{ type: 'avatar', value: [{ asset: <Freeze /> }] }}
|
|
833
|
+
>
|
|
931
834
|
Secondary
|
|
932
835
|
</Button>
|
|
933
|
-
<Button
|
|
836
|
+
<Button
|
|
837
|
+
v2
|
|
838
|
+
size="md"
|
|
839
|
+
priority="secondary-neutral"
|
|
840
|
+
addonEnd={{ type: 'icon', value: <ChevronRight /> }}
|
|
841
|
+
addonStart={{ type: 'avatar', value: [{ asset: <Freeze /> }] }}
|
|
842
|
+
>
|
|
934
843
|
Secondary Neutral
|
|
935
844
|
</Button>
|
|
936
|
-
<Button
|
|
845
|
+
<Button
|
|
846
|
+
v2
|
|
847
|
+
size="md"
|
|
848
|
+
disabled
|
|
849
|
+
addonEnd={{ type: 'icon', value: <ChevronRight /> }}
|
|
850
|
+
addonStart={{ type: 'avatar', value: [{ asset: <Freeze /> }] }}
|
|
851
|
+
>
|
|
937
852
|
Disabled
|
|
938
853
|
</Button>
|
|
939
854
|
</SentimentSurface>
|
|
@@ -2,6 +2,10 @@ import { Meta } from '@storybook/react-webpack5';
|
|
|
2
2
|
import Button from './Button.resolver';
|
|
3
3
|
import { expect, userEvent, within } from 'storybook/test';
|
|
4
4
|
import { storyConfig } from '../test-utils';
|
|
5
|
+
import { ButtonPriority } from './Button.types';
|
|
6
|
+
import { ArrowRight, ChevronRight, Freeze } from '@transferwise/icons';
|
|
7
|
+
import SentimentSurface from '../sentimentSurface';
|
|
8
|
+
import { Flag } from '@wise/art';
|
|
5
9
|
|
|
6
10
|
const meta: Meta<typeof Button> = {
|
|
7
11
|
component: Button,
|
|
@@ -25,3 +29,188 @@ FocusTertiary.play = async ({ canvasElement }) => {
|
|
|
25
29
|
const buttonElement: HTMLButtonElement = canvas.getByRole('button');
|
|
26
30
|
await expect(buttonElement).toHaveFocus();
|
|
27
31
|
};
|
|
32
|
+
|
|
33
|
+
const buttonPriorities = ['primary', 'secondary', 'secondary-neutral', 'tertiary'] as const;
|
|
34
|
+
const buttonSizes = ['sm', 'md', 'lg'] as const;
|
|
35
|
+
export const AllVariants = storyConfig(
|
|
36
|
+
{
|
|
37
|
+
tags: ['!autodocs'],
|
|
38
|
+
parameters: {
|
|
39
|
+
padding: '0',
|
|
40
|
+
},
|
|
41
|
+
render: () => (
|
|
42
|
+
<div
|
|
43
|
+
className="button-variants"
|
|
44
|
+
style={{ display: 'flex', flexWrap: 'wrap', gap: '16px', maxWidth: '1200px' }}
|
|
45
|
+
>
|
|
46
|
+
{buttonPriorities.map((priority) =>
|
|
47
|
+
buttonSizes.map((size) => (
|
|
48
|
+
<div
|
|
49
|
+
key={`${priority}-default-${size}`}
|
|
50
|
+
style={{ flex: '1 0 30%', marginBottom: '16px', justifyContent: 'space-between' }}
|
|
51
|
+
>
|
|
52
|
+
<Button
|
|
53
|
+
v2
|
|
54
|
+
priority={priority as ButtonPriority}
|
|
55
|
+
size={size}
|
|
56
|
+
addonStart={{ type: 'avatar', value: [{ asset: <Freeze /> }] }}
|
|
57
|
+
addonEnd={{ type: 'icon', value: <ArrowRight /> }}
|
|
58
|
+
block
|
|
59
|
+
>
|
|
60
|
+
{`${priority} default ${size}`}
|
|
61
|
+
</Button>
|
|
62
|
+
<Button
|
|
63
|
+
className="m-t-1 m-b-1"
|
|
64
|
+
v2
|
|
65
|
+
priority={priority as ButtonPriority}
|
|
66
|
+
size={size}
|
|
67
|
+
addonStart={{
|
|
68
|
+
type: 'avatar',
|
|
69
|
+
value: [{ asset: <Freeze /> }, { asset: <Freeze /> }],
|
|
70
|
+
}}
|
|
71
|
+
addonEnd={{ type: 'icon', value: <ArrowRight /> }}
|
|
72
|
+
block
|
|
73
|
+
disabled
|
|
74
|
+
>
|
|
75
|
+
{`${priority} default ${size} Disabled`}
|
|
76
|
+
</Button>
|
|
77
|
+
<Button
|
|
78
|
+
v2
|
|
79
|
+
priority={priority as ButtonPriority}
|
|
80
|
+
size={size}
|
|
81
|
+
addonStart={{ type: 'avatar', value: [{ asset: <Freeze /> }] }}
|
|
82
|
+
addonEnd={{ type: 'icon', value: <ArrowRight /> }}
|
|
83
|
+
block
|
|
84
|
+
loading
|
|
85
|
+
>
|
|
86
|
+
{`${priority} default ${size} Loading`}
|
|
87
|
+
</Button>
|
|
88
|
+
</div>
|
|
89
|
+
)),
|
|
90
|
+
)}
|
|
91
|
+
{['primary', 'secondary'].map((priority) =>
|
|
92
|
+
buttonSizes.map((size) => (
|
|
93
|
+
<div
|
|
94
|
+
key={`${priority}-negative-${size}`}
|
|
95
|
+
style={{ flex: '1 0 30%', marginBottom: '16px', justifyContent: 'space-between' }}
|
|
96
|
+
>
|
|
97
|
+
<Button
|
|
98
|
+
v2
|
|
99
|
+
sentiment="negative"
|
|
100
|
+
priority={priority as ButtonPriority}
|
|
101
|
+
size={size}
|
|
102
|
+
addonEnd={{ type: 'icon', value: <ChevronRight /> }}
|
|
103
|
+
addonStart={{ type: 'avatar', value: [{ asset: <Freeze /> }] }}
|
|
104
|
+
block
|
|
105
|
+
>
|
|
106
|
+
{`${priority} negative ${size}`}
|
|
107
|
+
</Button>
|
|
108
|
+
<Button
|
|
109
|
+
className="m-t-1 m-b-1"
|
|
110
|
+
v2
|
|
111
|
+
sentiment="negative"
|
|
112
|
+
priority={priority as ButtonPriority}
|
|
113
|
+
size={size}
|
|
114
|
+
addonEnd={{ type: 'icon', value: <ChevronRight /> }}
|
|
115
|
+
addonStart={{ type: 'avatar', value: [{ asset: <Freeze /> }] }}
|
|
116
|
+
block
|
|
117
|
+
disabled
|
|
118
|
+
>
|
|
119
|
+
{`${priority} negative ${size} Disabled`}
|
|
120
|
+
</Button>
|
|
121
|
+
<Button
|
|
122
|
+
v2
|
|
123
|
+
sentiment="negative"
|
|
124
|
+
priority={priority as ButtonPriority}
|
|
125
|
+
size={size}
|
|
126
|
+
addonEnd={{ type: 'icon', value: <ChevronRight /> }}
|
|
127
|
+
addonStart={{ type: 'avatar', value: [{ asset: <Freeze /> }] }}
|
|
128
|
+
block
|
|
129
|
+
loading
|
|
130
|
+
>
|
|
131
|
+
{`${priority} negative ${size} Loading`}
|
|
132
|
+
</Button>
|
|
133
|
+
</div>
|
|
134
|
+
)),
|
|
135
|
+
)}
|
|
136
|
+
</div>
|
|
137
|
+
),
|
|
138
|
+
},
|
|
139
|
+
{ variants: ['default', 'dark', 'bright-green', 'forest-green', 'rtl'] },
|
|
140
|
+
);
|
|
141
|
+
|
|
142
|
+
export const SentimentAwareness = storyConfig(
|
|
143
|
+
{
|
|
144
|
+
render: () => {
|
|
145
|
+
const PERMUTATIONS = {
|
|
146
|
+
emphasis: ['base', 'elevated'] as const,
|
|
147
|
+
sentiment: ['success', 'warning', 'negative', 'neutral', 'proposition'] as const,
|
|
148
|
+
disabled: [false, true] as const,
|
|
149
|
+
others: [
|
|
150
|
+
{
|
|
151
|
+
addonStart: { type: 'avatar' as const, value: [{ asset: <Freeze /> }] },
|
|
152
|
+
addonEnd: { type: 'icon' as const, value: <ChevronRight /> },
|
|
153
|
+
},
|
|
154
|
+
{
|
|
155
|
+
addonStart: { type: 'avatar' as const, value: [{ profileName: 'John Doe' }] },
|
|
156
|
+
},
|
|
157
|
+
{
|
|
158
|
+
addonStart: {
|
|
159
|
+
type: 'avatar' as const,
|
|
160
|
+
value: [
|
|
161
|
+
{
|
|
162
|
+
asset: <Flag code="gb" />,
|
|
163
|
+
},
|
|
164
|
+
{ asset: <Freeze /> },
|
|
165
|
+
],
|
|
166
|
+
},
|
|
167
|
+
},
|
|
168
|
+
{
|
|
169
|
+
loading: true,
|
|
170
|
+
},
|
|
171
|
+
],
|
|
172
|
+
priority: ['primary', 'secondary', 'secondary-neutral'] as const,
|
|
173
|
+
};
|
|
174
|
+
|
|
175
|
+
return (
|
|
176
|
+
<>
|
|
177
|
+
{PERMUTATIONS.emphasis.map((emphasis) =>
|
|
178
|
+
PERMUTATIONS.sentiment.map((sentiment) => (
|
|
179
|
+
<SentimentSurface
|
|
180
|
+
key={`${emphasis}-${sentiment}`}
|
|
181
|
+
sentiment={sentiment}
|
|
182
|
+
emphasis={emphasis}
|
|
183
|
+
style={{
|
|
184
|
+
padding: 'var(--size-8)',
|
|
185
|
+
display: 'grid',
|
|
186
|
+
gridTemplateColumns: 'repeat(3, min-content)',
|
|
187
|
+
gap: 'var(--size-8)',
|
|
188
|
+
}}
|
|
189
|
+
>
|
|
190
|
+
{PERMUTATIONS.disabled.map((disabled) =>
|
|
191
|
+
PERMUTATIONS.others.map((media, mediaVariant) =>
|
|
192
|
+
PERMUTATIONS.priority.map((priority) => (
|
|
193
|
+
<div key={`${emphasis}-${sentiment}-${disabled}-${priority}-${mediaVariant}`}>
|
|
194
|
+
<Button v2 size="md" disabled={disabled} priority={priority} {...media}>
|
|
195
|
+
{priority}
|
|
196
|
+
</Button>
|
|
197
|
+
</div>
|
|
198
|
+
)),
|
|
199
|
+
),
|
|
200
|
+
)}
|
|
201
|
+
</SentimentSurface>
|
|
202
|
+
)),
|
|
203
|
+
)}
|
|
204
|
+
</>
|
|
205
|
+
);
|
|
206
|
+
},
|
|
207
|
+
decorators: [
|
|
208
|
+
(Story: React.ComponentType) => (
|
|
209
|
+
<div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
|
|
210
|
+
<Story />
|
|
211
|
+
</div>
|
|
212
|
+
),
|
|
213
|
+
],
|
|
214
|
+
},
|
|
215
|
+
{},
|
|
216
|
+
);
|
package/src/index.ts
CHANGED
|
@@ -35,7 +35,6 @@ export type { HeaderProps } from './header';
|
|
|
35
35
|
export type { EmphasisProps } from './emphasis';
|
|
36
36
|
export type { FieldProps } from './field/Field';
|
|
37
37
|
export type { InfoProps } from './info';
|
|
38
|
-
export type { InlinePromptProps } from './prompt';
|
|
39
38
|
export type { InputWithDisplayFormatProps } from './inputWithDisplayFormat';
|
|
40
39
|
export type { InputProps } from './inputs/Input';
|
|
41
40
|
export type { InputGroupProps } from './inputs/InputGroup';
|
|
@@ -90,7 +89,6 @@ export type { SnackbarContextType } from './snackbar/SnackbarContext';
|
|
|
90
89
|
export type { StatusIconProps } from './statusIcon';
|
|
91
90
|
export type { StickyProps } from './sticky';
|
|
92
91
|
export type { SummaryProps } from './summary';
|
|
93
|
-
export type { SentimentSurfaceProps } from './sentimentSurface';
|
|
94
92
|
export type { SwitchProps } from './switch';
|
|
95
93
|
export type { SwitchOptionProps } from './switchOption';
|
|
96
94
|
export type { TabItem, TabsProps } from './tabs';
|
|
@@ -171,7 +169,6 @@ export { default as Header } from './header';
|
|
|
171
169
|
export { default as Image } from './image';
|
|
172
170
|
export { default as Info } from './info';
|
|
173
171
|
export { default as InlineAlert } from './inlineAlert';
|
|
174
|
-
export { InlinePrompt } from './prompt';
|
|
175
172
|
export { default as InputWithDisplayFormat } from './inputWithDisplayFormat';
|
|
176
173
|
export { Input } from './inputs/Input';
|
|
177
174
|
export { InputGroup } from './inputs/InputGroup';
|
|
@@ -212,7 +209,6 @@ export { default as ResponsivePanel } from './common/responsivePanel';
|
|
|
212
209
|
export { default as Section } from './section';
|
|
213
210
|
export { default as SegmentedControl } from './segmentedControl';
|
|
214
211
|
export { default as Select } from './select';
|
|
215
|
-
export { default as SentimentSurface } from './sentimentSurface';
|
|
216
212
|
export { default as SlidingPanel } from './slidingPanel';
|
|
217
213
|
export { default as SnackbarPortal } from './snackbar/Snackbar';
|
|
218
214
|
export { SnackbarConsumer, SnackbarContext } from './snackbar/SnackbarContext';
|
package/src/main.css
CHANGED
|
@@ -1308,7 +1308,7 @@
|
|
|
1308
1308
|
--Button-color-active: var(--Button-secondary-neutral-color);
|
|
1309
1309
|
}
|
|
1310
1310
|
.wds-Button--secondary-neutral .wds-Button-icon--end {
|
|
1311
|
-
color: var(--
|
|
1311
|
+
color: var(--Button-secondary-color);
|
|
1312
1312
|
}
|
|
1313
1313
|
.wds-Button--tertiary {
|
|
1314
1314
|
--Button-background: var(--Button-tertiary-background);
|
|
@@ -7,8 +7,8 @@ import IconButton from '../iconButton';
|
|
|
7
7
|
import Body from '../body';
|
|
8
8
|
|
|
9
9
|
const meta: Meta = {
|
|
10
|
-
title: '
|
|
11
|
-
|
|
10
|
+
title: 'NeptuneCSS',
|
|
11
|
+
component: () => <div>NeptuneCSS Example</div>,
|
|
12
12
|
};
|
|
13
13
|
|
|
14
14
|
export default meta;
|
|
@@ -16,7 +16,6 @@ export default meta;
|
|
|
16
16
|
type Story = StoryObj;
|
|
17
17
|
|
|
18
18
|
export const Colors: Story = {
|
|
19
|
-
name: 'colours',
|
|
20
19
|
render: () => {
|
|
21
20
|
return (
|
|
22
21
|
<Body>
|
|
@@ -36,9 +36,7 @@ export type InlinePromptProps = {
|
|
|
36
36
|
|
|
37
37
|
/**
|
|
38
38
|
* Inline prompts appear alongside a specific component on the screen. They help the user stay
|
|
39
|
-
* informed, fix something, or get more out of what they're doing.
|
|
40
|
-
*
|
|
41
|
-
* **NB:** It should be used in favour of `InlineAlert` which will be soon deprecated.
|
|
39
|
+
* informed, fix something, or get more out of what they're doing.
|
|
42
40
|
*/
|
|
43
41
|
export const InlinePrompt = ({
|
|
44
42
|
sentiment = Sentiment.POSITIVE,
|
|
@@ -22,7 +22,7 @@ function ThemeProvider(props: ThemeProviderProps) {
|
|
|
22
22
|
|
|
23
23
|
export default {
|
|
24
24
|
component: ThemeProvider,
|
|
25
|
-
title: '
|
|
25
|
+
title: 'Other/ThemeProvider',
|
|
26
26
|
} satisfies Meta<typeof ThemeProvider>;
|
|
27
27
|
|
|
28
28
|
type Story = StoryObj<typeof ThemeProvider>;
|
|
@@ -1,12 +1,11 @@
|
|
|
1
1
|
import { Meta, StoryObj } from '@storybook/react-webpack5';
|
|
2
|
-
import {
|
|
2
|
+
import { Defrost } from '@transferwise/icons';
|
|
3
3
|
import Body from '../body';
|
|
4
4
|
import Button from '../button';
|
|
5
5
|
import Header from '../header';
|
|
6
6
|
import Link from '../link';
|
|
7
7
|
import IconButton from '../iconButton';
|
|
8
8
|
import StatusIcon from '../statusIcon';
|
|
9
|
-
import AvatarView from '../avatarView';
|
|
10
9
|
import SentimentSurface from './SentimentSurface';
|
|
11
10
|
import type { Sentiment, Emphasis } from './SentimentSurface.types';
|
|
12
11
|
|
|
@@ -31,7 +30,7 @@ const withComponentGrid = (Story: () => JSX.Element) => (
|
|
|
31
30
|
*/
|
|
32
31
|
const meta: Meta<typeof SentimentSurface> = {
|
|
33
32
|
component: SentimentSurface,
|
|
34
|
-
title: '
|
|
33
|
+
title: 'Content/SentimentSurface',
|
|
35
34
|
argTypes: {
|
|
36
35
|
sentiment: {
|
|
37
36
|
control: 'select',
|
|
@@ -136,7 +135,7 @@ const sentiments: Sentiment[] = ['negative', 'warning', 'neutral', 'success', 'p
|
|
|
136
135
|
const emphasisLevels: Emphasis[] = ['base', 'elevated'];
|
|
137
136
|
const tokenCategories = [
|
|
138
137
|
{
|
|
139
|
-
name: '
|
|
138
|
+
name: 'Content',
|
|
140
139
|
tokens: [
|
|
141
140
|
'--color-sentiment-content-primary',
|
|
142
141
|
'--color-sentiment-content-primary-hover',
|
|
@@ -229,12 +228,12 @@ export const EmphasisLevels: Story = {
|
|
|
229
228
|
|
|
230
229
|
/**
|
|
231
230
|
* By default, `SentimentSurface` exposes the tokens as CSS custom properties and also applies
|
|
232
|
-
* the base styles for `background-color` and `color`.
|
|
233
|
-
*
|
|
234
|
-
* This is useful when you want to create custom components that adapt to the
|
|
235
|
-
* without applying default styles.
|
|
231
|
+
* the base styles for `background-color` and `color`.
|
|
232
|
+
* However, you can choose to only expose the CSS custom properties by setting the `hasBaseStyles`
|
|
233
|
+
* prop to `false`. This is useful when you want to create custom components that adapt to the
|
|
234
|
+
* sentiment context without applying default styles.
|
|
236
235
|
*/
|
|
237
|
-
export const
|
|
236
|
+
export const BaseStyles: Story = {
|
|
238
237
|
render: (args) => (
|
|
239
238
|
<>
|
|
240
239
|
<SentimentSurface
|
|
@@ -244,8 +243,8 @@ export const RenderingBaseStyles: Story = {
|
|
|
244
243
|
<div className="p-a-2">This example exposes and applies the tokens.</div>
|
|
245
244
|
</SentimentSurface>
|
|
246
245
|
<SentimentSurface
|
|
247
|
-
sentiment="success"
|
|
248
246
|
hasBaseStyles={false}
|
|
247
|
+
sentiment="success"
|
|
249
248
|
style={{ border: `1px dashed var(--color-sentiment-content-primary)` }}
|
|
250
249
|
>
|
|
251
250
|
<div className="p-a-2">This example only exposes the tokens without applying them.</div>
|
|
@@ -263,21 +262,6 @@ export const RenderingBaseStyles: Story = {
|
|
|
263
262
|
),
|
|
264
263
|
parameters: {
|
|
265
264
|
controls: { disable: true },
|
|
266
|
-
docs: {
|
|
267
|
-
source: {
|
|
268
|
-
// Storybook strips out props that are set to false, so we need to hack it back in :/
|
|
269
|
-
transform: async (source: string) => {
|
|
270
|
-
if (source.includes('hasBaseStyles')) {
|
|
271
|
-
return source;
|
|
272
|
-
}
|
|
273
|
-
|
|
274
|
-
return source.replace(
|
|
275
|
-
/(<\/SentimentSurface>\s+<SentimentSurface(\s+)sentiment="success")/g,
|
|
276
|
-
'$1$2hasBaseStyles={false}',
|
|
277
|
-
);
|
|
278
|
-
},
|
|
279
|
-
},
|
|
280
|
-
},
|
|
281
265
|
},
|
|
282
266
|
decorators: [withComponentGrid],
|
|
283
267
|
};
|
|
@@ -364,12 +348,6 @@ export const NestingSurfaces: Story = {
|
|
|
364
348
|
parameters: {
|
|
365
349
|
controls: { disable: true },
|
|
366
350
|
},
|
|
367
|
-
/**
|
|
368
|
-
* As agreed with the design team, this story is temporarily hidden from the public view until we
|
|
369
|
-
* have proper discussion and documentation around when and how to use nested SentimentSurfaces.
|
|
370
|
-
* This is to prevent misuse and confusion among consumers.
|
|
371
|
-
*/
|
|
372
|
-
tags: ['!dev', '!autodocs'],
|
|
373
351
|
render: (args) => {
|
|
374
352
|
return (
|
|
375
353
|
<SentimentSurface sentiment="success" emphasis="base" className="p-a-1">
|
|
@@ -386,7 +364,7 @@ export const NestingSurfaces: Story = {
|
|
|
386
364
|
};
|
|
387
365
|
|
|
388
366
|
/**
|
|
389
|
-
* Some DS components (namely `Button`, `
|
|
367
|
+
* Some DS components (namely `Button`, `StatusIcon`, and `IconButton`) automatically adapt to the sentiment context when used within a `SentimentSurface`.
|
|
390
368
|
*/
|
|
391
369
|
export const SentimentAwareComponents: Story = {
|
|
392
370
|
name: 'Sentiment-aware Components',
|
|
@@ -399,72 +377,34 @@ export const SentimentAwareComponents: Story = {
|
|
|
399
377
|
},
|
|
400
378
|
},
|
|
401
379
|
render: function Render(args) {
|
|
402
|
-
const
|
|
403
|
-
<
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
<
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
</AvatarView>,
|
|
419
|
-
<AvatarView key="avatar-initials" size={32} profileName="John Doe" />,
|
|
420
|
-
];
|
|
421
|
-
const STATUS_SUCCESS = <StatusIcon size={32} sentiment="success" />;
|
|
422
|
-
const STATUS_NEGATIVE = <StatusIcon size={32} sentiment="negative" />;
|
|
423
|
-
const AVATAR_SUCCESS = (
|
|
424
|
-
<AvatarView
|
|
425
|
-
size={32}
|
|
426
|
-
imgSrc="../avatar-rectangle-fox.webp"
|
|
427
|
-
badge={{ status: 'success' }}
|
|
428
|
-
interactive
|
|
429
|
-
/>
|
|
430
|
-
);
|
|
431
|
-
const AVATAR_NEGATIVE = (
|
|
432
|
-
<AvatarView
|
|
433
|
-
size={32}
|
|
434
|
-
imgSrc="../avatar-rectangle-fox.webp"
|
|
435
|
-
badge={{ status: 'negative' }}
|
|
436
|
-
interactive
|
|
437
|
-
/>
|
|
380
|
+
const inner = (
|
|
381
|
+
<div className="p-a-2 m-b-2 sentimentAwareComponent">
|
|
382
|
+
<Body>
|
|
383
|
+
This text and its <Link href="#">inline links</Link> should use sentiment-matched colour.
|
|
384
|
+
</Body>
|
|
385
|
+
<IconButton size={32}>
|
|
386
|
+
<Defrost />
|
|
387
|
+
</IconButton>
|
|
388
|
+
<StatusIcon size={32} sentiment="positive" />
|
|
389
|
+
<Button v2 priority="primary" size="sm">
|
|
390
|
+
Primary
|
|
391
|
+
</Button>
|
|
392
|
+
<Button v2 priority="secondary" size="sm">
|
|
393
|
+
Secondary
|
|
394
|
+
</Button>
|
|
395
|
+
</div>
|
|
438
396
|
);
|
|
439
397
|
|
|
440
398
|
return (
|
|
441
399
|
<>
|
|
442
|
-
<Header level="group" title="
|
|
443
|
-
|
|
444
|
-
{BODY}
|
|
445
|
-
{AVATAR_SUCCESS}
|
|
446
|
-
{AVATAR_NEGATIVE}
|
|
447
|
-
{STATUS_SUCCESS}
|
|
448
|
-
{STATUS_NEGATIVE}
|
|
449
|
-
</div>
|
|
400
|
+
<Header level="group" title="No sentiment surface" />
|
|
401
|
+
{inner}
|
|
450
402
|
|
|
451
403
|
<Header level="group" title="Success sentiment surface" />
|
|
452
|
-
<SentimentSurface sentiment="success">
|
|
453
|
-
<div className="p-a-2 m-b-2 sentimentAwareComponent">
|
|
454
|
-
{BODY}
|
|
455
|
-
{AVATAR_SUCCESS}
|
|
456
|
-
{STATUS_SUCCESS}
|
|
457
|
-
</div>
|
|
458
|
-
</SentimentSurface>
|
|
404
|
+
<SentimentSurface sentiment="success">{inner}</SentimentSurface>
|
|
459
405
|
|
|
460
406
|
<Header level="group" title="Negative sentiment surface" />
|
|
461
|
-
<SentimentSurface sentiment="negative">
|
|
462
|
-
<div className="p-a-2 m-b-2 sentimentAwareComponent">
|
|
463
|
-
{BODY}
|
|
464
|
-
{AVATAR_NEGATIVE}
|
|
465
|
-
{STATUS_NEGATIVE}
|
|
466
|
-
</div>
|
|
467
|
-
</SentimentSurface>
|
|
407
|
+
<SentimentSurface sentiment="negative">{inner}</SentimentSurface>
|
|
468
408
|
</>
|
|
469
409
|
);
|
|
470
410
|
},
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { Meta, StoryObj } from '@storybook/react-webpack5';
|
|
2
2
|
import { ThemeProvider, type Theming } from '@wise/components-theming';
|
|
3
|
-
import Button from '../button';
|
|
4
3
|
import SentimentSurface from './SentimentSurface';
|
|
4
|
+
import Button from '../button';
|
|
5
5
|
import type { Sentiment, Emphasis } from './SentimentSurface.types';
|
|
6
6
|
|
|
7
7
|
const sentiments: Sentiment[] = ['negative', 'success', 'proposition', 'warning', 'neutral'];
|
|
@@ -21,7 +21,7 @@ const screenModes: Theming['screenMode'][] = ['light', 'dark'];
|
|
|
21
21
|
|
|
22
22
|
export default {
|
|
23
23
|
component: SentimentSurface,
|
|
24
|
-
title: '
|
|
24
|
+
title: 'Content/SentimentSurface/Tests',
|
|
25
25
|
tags: ['!autodocs'],
|
|
26
26
|
} satisfies Meta<typeof SentimentSurface>;
|
|
27
27
|
|