@transferwise/components 0.0.0-experimental-edd6df1 → 0.0.0-experimental-e9e8871

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.
Files changed (17) hide show
  1. package/build/main.css +14 -8
  2. package/build/prompt/InlinePrompt/InlinePrompt.js +2 -1
  3. package/build/prompt/InlinePrompt/InlinePrompt.js.map +1 -1
  4. package/build/prompt/InlinePrompt/InlinePrompt.mjs +2 -1
  5. package/build/prompt/InlinePrompt/InlinePrompt.mjs.map +1 -1
  6. package/build/styles/iconButton/IconButton.css +8 -8
  7. package/build/styles/main.css +14 -8
  8. package/build/styles/prompt/InlinePrompt/InlinePrompt.css +6 -0
  9. package/build/types/prompt/InlinePrompt/InlinePrompt.d.ts.map +1 -1
  10. package/package.json +3 -3
  11. package/src/iconButton/IconButton.css +8 -8
  12. package/src/iconButton/IconButton.less +4 -35
  13. package/src/iconButton/IconButton.story.tsx +3 -72
  14. package/src/main.css +14 -8
  15. package/src/prompt/InlinePrompt/InlinePrompt.css +6 -0
  16. package/src/prompt/InlinePrompt/InlinePrompt.less +5 -0
  17. package/src/prompt/InlinePrompt/InlinePrompt.tsx +7 -1
package/build/main.css CHANGED
@@ -925,6 +925,12 @@
925
925
  .wds-inline-prompt__media-wrapper .tw-icon-confetti {
926
926
  color: var(--color-sentiment-content-primary);
927
927
  }
928
+ .wds-inline-prompt .wds-inline-prompt-process-indicator {
929
+ width: 16px;
930
+ width: var(--size-16);
931
+ height: 16px;
932
+ height: var(--size-16);
933
+ }
928
934
  .np-dot {
929
935
  --np-dot-size: 14px;
930
936
  position: relative;
@@ -1026,17 +1032,17 @@
1026
1032
  background-color: var(--color-background-neutral-active);
1027
1033
  }
1028
1034
  .np-icon-button-primary-default {
1029
- color: var(--color-sentiment-interactive-control, var(--color-interactive-control));
1035
+ color: var(--color-interactive-control);
1030
1036
  background-color: #00a2dd;
1031
- background-color: var(--color-sentiment-interactive-primary, var(--color-interactive-accent));
1037
+ background-color: var(--color-interactive-accent);
1032
1038
  }
1033
1039
  .np-icon-button-primary-default:not(.disabled):not(:disabled):hover {
1034
1040
  background-color: #008fc9;
1035
- background-color: var(--color-sentiment-interactive-primary-hover, var(--color-interactive-accent-hover));
1041
+ background-color: var(--color-interactive-accent-hover);
1036
1042
  }
1037
1043
  .np-icon-button-primary-default:not(.disabled):not(:disabled):active {
1038
1044
  background-color: #0081ba;
1039
- background-color: var(--color-sentiment-interactive-primary-active, var(--color-interactive-accent-active));
1045
+ background-color: var(--color-interactive-accent-active);
1040
1046
  }
1041
1047
  .np-icon-button-primary-negative {
1042
1048
  color: var(--color-contrast-overlay);
@@ -1064,14 +1070,14 @@
1064
1070
  background-color: var(--color-background-screen-active);
1065
1071
  }
1066
1072
  .np-icon-button-secondary-default {
1067
- color: var(--color-sentiment-content-primary, var(--color-interactive-primary));
1068
- background-color: var(--color-sentiment-interactive-secondary-neutral, var(--color-interactive-neutral));
1073
+ color: var(--color-interactive-primary);
1074
+ background-color: var(--color-interactive-neutral);
1069
1075
  }
1070
1076
  .np-icon-button-secondary-default:not(.disabled):not(:disabled):hover {
1071
- background-color: var(--color-sentiment-interactive-secondary-neutral-hover, var(--color-interactive-neutral-hover));
1077
+ background-color: var(--color-interactive-neutral-hover);
1072
1078
  }
1073
1079
  .np-icon-button-secondary-default:not(.disabled):not(:disabled):active {
1074
- background-color: var(--color-sentiment-interactive-secondary-neutral-active, var(--color-interactive-neutral-active));
1080
+ background-color: var(--color-interactive-neutral-active);
1075
1081
  }
1076
1082
  .np-theme-personal--bright-green .np-icon-button-secondary-default,
1077
1083
  .np-theme-personal--forest-green .np-icon-button-secondary-default {
package/build/prompt/InlinePrompt/InlinePrompt.js CHANGED
@@ -57,7 +57,8 @@ const InlinePrompt = ({
57
57
  if (loading) {
58
58
  return /*#__PURE__*/jsxRuntime.jsx(ProcessIndicator.default, {
59
59
  "data-testid": "InlinePrompt_ProcessIndicator",
60
- size: "xxs"
60
+ size: "xxs",
61
+ className: "wds-inline-prompt-process-indicator"
61
62
  });
62
63
  }
63
64
  return /*#__PURE__*/jsxRuntime.jsx(StatusIcon.default, {
package/build/prompt/InlinePrompt/InlinePrompt.js.map CHANGED
@@ -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.\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 (media && ['proposition', 'positive'].includes(sentiment)) {\n return media;\n }\n if (sentiment === 'proposition') {\n return <GiftBox />;\n }\n if (muted) {\n return <BackslashCircle size={16} data-testid=\"InlinePrompt_Muted\" />;\n }\n if (loading) {\n return <ProcessIndicator data-testid=\"InlinePrompt_ProcessIndicator\" size=\"xxs\" />;\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","includes","_jsx","GiftBox","BackslashCircle","size","ProcessIndicator","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,IAAIJ,KAAK,IAAI,CAAC,aAAa,EAAE,UAAU,CAAC,CAACK,QAAQ,CAACZ,WAAS,CAAC,EAAE;AAC5D,MAAA,OAAOO,KAAK;AACd,IAAA;IACA,IAAIP,WAAS,KAAK,aAAa,EAAE;AAC/B,MAAA,oBAAOa,cAAA,CAACC,aAAO,EAAA,GAAG;AACpB,IAAA;AACA,IAAA,IAAIX,KAAK,EAAE;MACT,oBAAOU,cAAA,CAACE,qBAAe,EAAA;AAACC,QAAAA,IAAI,EAAE,EAAG;QAAC,aAAA,EAAY;AAAoB,QAAG;AACvE,IAAA;AACA,IAAA,IAAIZ,OAAO,EAAE;MACX,oBAAOS,cAAA,CAACI,wBAAgB,EAAA;AAAC,QAAA,aAAA,EAAY,+BAA+B;AAACD,QAAAA,IAAI,EAAC;AAAK,OAAA,CAAG;AACpF,IAAA;IACA,oBAAOH,cAAA,CAACK,kBAAU,EAAA;AAACF,MAAAA,IAAI,EAAE,EAAG;AAAChB,MAAAA,SAAS,EAAEA;AAAU,MAAG;EACvD,CAAC;EAED,oBACEmB,eAAA,CAACC,wBAAgB,EAAA;AACfpB,IAAAA,SAAS,EAAEU,gBAAiB;AAC5B,IAAA,aAAA,EAAaF,UAAW;IACxBH,SAAS,EAAEgB,SAAI,CACb,mBAAmB,EACnB,CAAA,mBAAA,EAAsBrB,WAAS,EAAE,EACjC;AACE,MAAA,0BAA0B,EAAEG,KAAK;AACjC,MAAA,4BAA4B,EAAEC;KAC/B,EACDC,SAAS,CACT;AAAA,IAAA,GACEI,IAAI;AAAAH,IAAAA,QAAA,gBAERO,cAAA,CAAA,KAAA,EAAA;AAAKR,MAAAA,SAAS,EAAC,kCAAkC;MAAAC,QAAA,EAAEK,WAAW;AAAE,KAAM,CACtE,eAAAE,cAAA,CAACS,YAAI,EAAA;AAAAhB,MAAAA,QAAA,EAAEA;AAAQ,KAAO,CACxB;AAAA,GAAkB,CAAC;AAEvB;;;;"}
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 (media && ['proposition', 'positive'].includes(sentiment)) {\n return media;\n }\n if (sentiment === 'proposition') {\n return <GiftBox />;\n }\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 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","includes","_jsx","GiftBox","BackslashCircle","size","ProcessIndicator","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,IAAIJ,KAAK,IAAI,CAAC,aAAa,EAAE,UAAU,CAAC,CAACK,QAAQ,CAACZ,WAAS,CAAC,EAAE;AAC5D,MAAA,OAAOO,KAAK;AACd,IAAA;IACA,IAAIP,WAAS,KAAK,aAAa,EAAE;AAC/B,MAAA,oBAAOa,cAAA,CAACC,aAAO,EAAA,GAAG;AACpB,IAAA;AACA,IAAA,IAAIX,KAAK,EAAE;MACT,oBAAOU,cAAA,CAACE,qBAAe,EAAA;AAACC,QAAAA,IAAI,EAAE,EAAG;QAAC,aAAA,EAAY;AAAoB,QAAG;AACvE,IAAA;AACA,IAAA,IAAIZ,OAAO,EAAE;MACX,oBACES,cAAA,CAACI,wBAAgB,EAAA;AACf,QAAA,aAAA,EAAY,+BAA+B;AAC3CD,QAAAA,IAAI,EAAC,KAAK;AACVX,QAAAA,SAAS,EAAC;AAAqC,OAAA,CAC/C;AAEN,IAAA;IACA,oBAAOQ,cAAA,CAACK,kBAAU,EAAA;AAACF,MAAAA,IAAI,EAAE,EAAG;AAAChB,MAAAA,SAAS,EAAEA;AAAU,MAAG;EACvD,CAAC;EAED,oBACEmB,eAAA,CAACC,wBAAgB,EAAA;AACfpB,IAAAA,SAAS,EAAEU,gBAAiB;AAC5B,IAAA,aAAA,EAAaF,UAAW;IACxBH,SAAS,EAAEgB,SAAI,CACb,mBAAmB,EACnB,CAAA,mBAAA,EAAsBrB,WAAS,EAAE,EACjC;AACE,MAAA,0BAA0B,EAAEG,KAAK;AACjC,MAAA,4BAA4B,EAAEC;KAC/B,EACDC,SAAS,CACT;AAAA,IAAA,GACEI,IAAI;AAAAH,IAAAA,QAAA,gBAERO,cAAA,CAAA,KAAA,EAAA;AAAKR,MAAAA,SAAS,EAAC,kCAAkC;MAAAC,QAAA,EAAEK,WAAW;AAAE,KAAM,CACtE,eAAAE,cAAA,CAACS,YAAI,EAAA;AAAAhB,MAAAA,QAAA,EAAEA;AAAQ,KAAO,CACxB;AAAA,GAAkB,CAAC;AAEvB;;;;"}
package/build/prompt/InlinePrompt/InlinePrompt.mjs CHANGED
@@ -55,7 +55,8 @@ const InlinePrompt = ({
55
55
  if (loading) {
56
56
  return /*#__PURE__*/jsx(ProcessIndicator, {
57
57
  "data-testid": "InlinePrompt_ProcessIndicator",
58
- size: "xxs"
58
+ size: "xxs",
59
+ className: "wds-inline-prompt-process-indicator"
59
60
  });
60
61
  }
61
62
  return /*#__PURE__*/jsx(StatusIcon, {
package/build/prompt/InlinePrompt/InlinePrompt.mjs.map CHANGED
@@ -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.\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 (media && ['proposition', 'positive'].includes(sentiment)) {\n return media;\n }\n if (sentiment === 'proposition') {\n return <GiftBox />;\n }\n if (muted) {\n return <BackslashCircle size={16} data-testid=\"InlinePrompt_Muted\" />;\n }\n if (loading) {\n return <ProcessIndicator data-testid=\"InlinePrompt_ProcessIndicator\" size=\"xxs\" />;\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","includes","_jsx","GiftBox","BackslashCircle","size","ProcessIndicator","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,IAAIJ,KAAK,IAAI,CAAC,aAAa,EAAE,UAAU,CAAC,CAACK,QAAQ,CAACZ,SAAS,CAAC,EAAE;AAC5D,MAAA,OAAOO,KAAK;AACd,IAAA;IACA,IAAIP,SAAS,KAAK,aAAa,EAAE;AAC/B,MAAA,oBAAOa,GAAA,CAACC,OAAO,EAAA,GAAG;AACpB,IAAA;AACA,IAAA,IAAIX,KAAK,EAAE;MACT,oBAAOU,GAAA,CAACE,eAAe,EAAA;AAACC,QAAAA,IAAI,EAAE,EAAG;QAAC,aAAA,EAAY;AAAoB,QAAG;AACvE,IAAA;AACA,IAAA,IAAIZ,OAAO,EAAE;MACX,oBAAOS,GAAA,CAACI,gBAAgB,EAAA;AAAC,QAAA,aAAA,EAAY,+BAA+B;AAACD,QAAAA,IAAI,EAAC;AAAK,OAAA,CAAG;AACpF,IAAA;IACA,oBAAOH,GAAA,CAACK,UAAU,EAAA;AAACF,MAAAA,IAAI,EAAE,EAAG;AAAChB,MAAAA,SAAS,EAAEA;AAAU,MAAG;EACvD,CAAC;EAED,oBACEmB,IAAA,CAACC,gBAAgB,EAAA;AACfpB,IAAAA,SAAS,EAAEU,gBAAiB;AAC5B,IAAA,aAAA,EAAaF,UAAW;IACxBH,SAAS,EAAEgB,IAAI,CACb,mBAAmB,EACnB,CAAA,mBAAA,EAAsBrB,SAAS,EAAE,EACjC;AACE,MAAA,0BAA0B,EAAEG,KAAK;AACjC,MAAA,4BAA4B,EAAEC;KAC/B,EACDC,SAAS,CACT;AAAA,IAAA,GACEI,IAAI;AAAAH,IAAAA,QAAA,gBAERO,GAAA,CAAA,KAAA,EAAA;AAAKR,MAAAA,SAAS,EAAC,kCAAkC;MAAAC,QAAA,EAAEK,WAAW;AAAE,KAAM,CACtE,eAAAE,GAAA,CAACS,IAAI,EAAA;AAAAhB,MAAAA,QAAA,EAAEA;AAAQ,KAAO,CACxB;AAAA,GAAkB,CAAC;AAEvB;;;;"}
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 (media && ['proposition', 'positive'].includes(sentiment)) {\n return media;\n }\n if (sentiment === 'proposition') {\n return <GiftBox />;\n }\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 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","includes","_jsx","GiftBox","BackslashCircle","size","ProcessIndicator","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,IAAIJ,KAAK,IAAI,CAAC,aAAa,EAAE,UAAU,CAAC,CAACK,QAAQ,CAACZ,SAAS,CAAC,EAAE;AAC5D,MAAA,OAAOO,KAAK;AACd,IAAA;IACA,IAAIP,SAAS,KAAK,aAAa,EAAE;AAC/B,MAAA,oBAAOa,GAAA,CAACC,OAAO,EAAA,GAAG;AACpB,IAAA;AACA,IAAA,IAAIX,KAAK,EAAE;MACT,oBAAOU,GAAA,CAACE,eAAe,EAAA;AAACC,QAAAA,IAAI,EAAE,EAAG;QAAC,aAAA,EAAY;AAAoB,QAAG;AACvE,IAAA;AACA,IAAA,IAAIZ,OAAO,EAAE;MACX,oBACES,GAAA,CAACI,gBAAgB,EAAA;AACf,QAAA,aAAA,EAAY,+BAA+B;AAC3CD,QAAAA,IAAI,EAAC,KAAK;AACVX,QAAAA,SAAS,EAAC;AAAqC,OAAA,CAC/C;AAEN,IAAA;IACA,oBAAOQ,GAAA,CAACK,UAAU,EAAA;AAACF,MAAAA,IAAI,EAAE,EAAG;AAAChB,MAAAA,SAAS,EAAEA;AAAU,MAAG;EACvD,CAAC;EAED,oBACEmB,IAAA,CAACC,gBAAgB,EAAA;AACfpB,IAAAA,SAAS,EAAEU,gBAAiB;AAC5B,IAAA,aAAA,EAAaF,UAAW;IACxBH,SAAS,EAAEgB,IAAI,CACb,mBAAmB,EACnB,CAAA,mBAAA,EAAsBrB,SAAS,EAAE,EACjC;AACE,MAAA,0BAA0B,EAAEG,KAAK;AACjC,MAAA,4BAA4B,EAAEC;KAC/B,EACDC,SAAS,CACT;AAAA,IAAA,GACEI,IAAI;AAAAH,IAAAA,QAAA,gBAERO,GAAA,CAAA,KAAA,EAAA;AAAKR,MAAAA,SAAS,EAAC,kCAAkC;MAAAC,QAAA,EAAEK,WAAW;AAAE,KAAM,CACtE,eAAAE,GAAA,CAACS,IAAI,EAAA;AAAAhB,MAAAA,QAAA,EAAEA;AAAQ,KAAO,CACxB;AAAA,GAAkB,CAAC;AAEvB;;;;"}
package/build/styles/iconButton/IconButton.css CHANGED
@@ -13,17 +13,17 @@
13
13
  background-color: var(--color-background-neutral-active);
14
14
  }
15
15
  .np-icon-button-primary-default {
16
- color: var(--color-sentiment-interactive-control, var(--color-interactive-control));
16
+ color: var(--color-interactive-control);
17
17
  background-color: #00a2dd;
18
- background-color: var(--color-sentiment-interactive-primary, var(--color-interactive-accent));
18
+ background-color: var(--color-interactive-accent);
19
19
  }
20
20
  .np-icon-button-primary-default:not(.disabled):not(:disabled):hover {
21
21
  background-color: #008fc9;
22
- background-color: var(--color-sentiment-interactive-primary-hover, var(--color-interactive-accent-hover));
22
+ background-color: var(--color-interactive-accent-hover);
23
23
  }
24
24
  .np-icon-button-primary-default:not(.disabled):not(:disabled):active {
25
25
  background-color: #0081ba;
26
- background-color: var(--color-sentiment-interactive-primary-active, var(--color-interactive-accent-active));
26
+ background-color: var(--color-interactive-accent-active);
27
27
  }
28
28
  .np-icon-button-primary-negative {
29
29
  color: var(--color-contrast-overlay);
@@ -51,14 +51,14 @@
51
51
  background-color: var(--color-background-screen-active);
52
52
  }
53
53
  .np-icon-button-secondary-default {
54
- color: var(--color-sentiment-content-primary, var(--color-interactive-primary));
55
- background-color: var(--color-sentiment-interactive-secondary-neutral, var(--color-interactive-neutral));
54
+ color: var(--color-interactive-primary);
55
+ background-color: var(--color-interactive-neutral);
56
56
  }
57
57
  .np-icon-button-secondary-default:not(.disabled):not(:disabled):hover {
58
- background-color: var(--color-sentiment-interactive-secondary-neutral-hover, var(--color-interactive-neutral-hover));
58
+ background-color: var(--color-interactive-neutral-hover);
59
59
  }
60
60
  .np-icon-button-secondary-default:not(.disabled):not(:disabled):active {
61
- background-color: var(--color-sentiment-interactive-secondary-neutral-active, var(--color-interactive-neutral-active));
61
+ background-color: var(--color-interactive-neutral-active);
62
62
  }
63
63
  .np-theme-personal--bright-green .np-icon-button-secondary-default,
64
64
  .np-theme-personal--forest-green .np-icon-button-secondary-default {
package/build/styles/main.css CHANGED
@@ -925,6 +925,12 @@
925
925
  .wds-inline-prompt__media-wrapper .tw-icon-confetti {
926
926
  color: var(--color-sentiment-content-primary);
927
927
  }
928
+ .wds-inline-prompt .wds-inline-prompt-process-indicator {
929
+ width: 16px;
930
+ width: var(--size-16);
931
+ height: 16px;
932
+ height: var(--size-16);
933
+ }
928
934
  .np-dot {
929
935
  --np-dot-size: 14px;
930
936
  position: relative;
@@ -1026,17 +1032,17 @@
1026
1032
  background-color: var(--color-background-neutral-active);
1027
1033
  }
1028
1034
  .np-icon-button-primary-default {
1029
- color: var(--color-sentiment-interactive-control, var(--color-interactive-control));
1035
+ color: var(--color-interactive-control);
1030
1036
  background-color: #00a2dd;
1031
- background-color: var(--color-sentiment-interactive-primary, var(--color-interactive-accent));
1037
+ background-color: var(--color-interactive-accent);
1032
1038
  }
1033
1039
  .np-icon-button-primary-default:not(.disabled):not(:disabled):hover {
1034
1040
  background-color: #008fc9;
1035
- background-color: var(--color-sentiment-interactive-primary-hover, var(--color-interactive-accent-hover));
1041
+ background-color: var(--color-interactive-accent-hover);
1036
1042
  }
1037
1043
  .np-icon-button-primary-default:not(.disabled):not(:disabled):active {
1038
1044
  background-color: #0081ba;
1039
- background-color: var(--color-sentiment-interactive-primary-active, var(--color-interactive-accent-active));
1045
+ background-color: var(--color-interactive-accent-active);
1040
1046
  }
1041
1047
  .np-icon-button-primary-negative {
1042
1048
  color: var(--color-contrast-overlay);
@@ -1064,14 +1070,14 @@
1064
1070
  background-color: var(--color-background-screen-active);
1065
1071
  }
1066
1072
  .np-icon-button-secondary-default {
1067
- color: var(--color-sentiment-content-primary, var(--color-interactive-primary));
1068
- background-color: var(--color-sentiment-interactive-secondary-neutral, var(--color-interactive-neutral));
1073
+ color: var(--color-interactive-primary);
1074
+ background-color: var(--color-interactive-neutral);
1069
1075
  }
1070
1076
  .np-icon-button-secondary-default:not(.disabled):not(:disabled):hover {
1071
- background-color: var(--color-sentiment-interactive-secondary-neutral-hover, var(--color-interactive-neutral-hover));
1077
+ background-color: var(--color-interactive-neutral-hover);
1072
1078
  }
1073
1079
  .np-icon-button-secondary-default:not(.disabled):not(:disabled):active {
1074
- background-color: var(--color-sentiment-interactive-secondary-neutral-active, var(--color-interactive-neutral-active));
1080
+ background-color: var(--color-interactive-neutral-active);
1075
1081
  }
1076
1082
  .np-theme-personal--bright-green .np-icon-button-secondary-default,
1077
1083
  .np-theme-personal--forest-green .np-icon-button-secondary-default {
package/build/styles/prompt/InlinePrompt/InlinePrompt.css CHANGED
@@ -63,3 +63,9 @@
63
63
  .wds-inline-prompt__media-wrapper .tw-icon-confetti {
64
64
  color: var(--color-sentiment-content-primary);
65
65
  }
66
+ .wds-inline-prompt .wds-inline-prompt-process-indicator {
67
+ width: 16px;
68
+ width: var(--size-16);
69
+ height: 16px;
70
+ height: var(--size-16);
71
+ }
package/build/types/prompt/InlinePrompt/InlinePrompt.d.ts.map CHANGED
@@ -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;;;GAGG;AACH,eAAO,MAAM,YAAY,GAAI,+FAS1B,iBAAiB,gCAsCnB,CAAC"}
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,gCA4CnB,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@transferwise/components",
3
- "version": "0.0.0-experimental-edd6df1",
3
+ "version": "0.0.0-experimental-e9e8871",
4
4
  "description": "Neptune React components",
5
5
  "license": "Apache-2.0",
6
6
  "repository": {
@@ -83,14 +83,14 @@
83
83
  "storybook": "^9.1.3",
84
84
  "storybook-addon-tag-badges": "^2.0.2",
85
85
  "storybook-addon-test-codegen": "^2.0.1",
86
+ "@transferwise/neptune-css": "0.0.0-experimental-e9e8871",
86
87
  "@transferwise/less-config": "3.1.2",
87
- "@transferwise/neptune-css": "0.0.0-experimental-edd6df1",
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-edd6df1",
93
+ "@transferwise/neptune-css": "0.0.0-experimental-e9e8871",
94
94
  "@wise/art": "^2.24.4",
95
95
  "@wise/components-theming": "^1.6.2",
96
96
  "react": ">=18",
package/src/iconButton/IconButton.css CHANGED
@@ -13,17 +13,17 @@
13
13
  background-color: var(--color-background-neutral-active);
14
14
  }
15
15
  .np-icon-button-primary-default {
16
- color: var(--color-sentiment-interactive-control, var(--color-interactive-control));
16
+ color: var(--color-interactive-control);
17
17
  background-color: #00a2dd;
18
- background-color: var(--color-sentiment-interactive-primary, var(--color-interactive-accent));
18
+ background-color: var(--color-interactive-accent);
19
19
  }
20
20
  .np-icon-button-primary-default:not(.disabled):not(:disabled):hover {
21
21
  background-color: #008fc9;
22
- background-color: var(--color-sentiment-interactive-primary-hover, var(--color-interactive-accent-hover));
22
+ background-color: var(--color-interactive-accent-hover);
23
23
  }
24
24
  .np-icon-button-primary-default:not(.disabled):not(:disabled):active {
25
25
  background-color: #0081ba;
26
- background-color: var(--color-sentiment-interactive-primary-active, var(--color-interactive-accent-active));
26
+ background-color: var(--color-interactive-accent-active);
27
27
  }
28
28
  .np-icon-button-primary-negative {
29
29
  color: var(--color-contrast-overlay);
@@ -51,14 +51,14 @@
51
51
  background-color: var(--color-background-screen-active);
52
52
  }
53
53
  .np-icon-button-secondary-default {
54
- color: var(--color-sentiment-content-primary, var(--color-interactive-primary));
55
- background-color: var(--color-sentiment-interactive-secondary-neutral, var(--color-interactive-neutral));
54
+ color: var(--color-interactive-primary);
55
+ background-color: var(--color-interactive-neutral);
56
56
  }
57
57
  .np-icon-button-secondary-default:not(.disabled):not(:disabled):hover {
58
- background-color: var(--color-sentiment-interactive-secondary-neutral-hover, var(--color-interactive-neutral-hover));
58
+ background-color: var(--color-interactive-neutral-hover);
59
59
  }
60
60
  .np-icon-button-secondary-default:not(.disabled):not(:disabled):active {
61
- background-color: var(--color-sentiment-interactive-secondary-neutral-active, var(--color-interactive-neutral-active));
61
+ background-color: var(--color-interactive-neutral-active);
62
62
  }
63
63
  .np-theme-personal--bright-green .np-icon-button-secondary-default,
64
64
  .np-theme-personal--forest-green .np-icon-button-secondary-default {
package/src/iconButton/IconButton.less CHANGED
@@ -5,21 +5,7 @@
5
5
  }
6
6
 
7
7
  &-primary-default {
8
- color: var(--color-sentiment-interactive-control, var(--color-interactive-control));
9
- background-color: var(--color-sentiment-interactive-primary, var(--color-interactive-accent));
10
-
11
- &:not(.disabled, :disabled):hover {
12
- background-color: var(
13
- --color-sentiment-interactive-primary-hover,
14
- var(--color-interactive-accent-hover)
15
- );
16
- }
17
- &:not(.disabled, :disabled):active {
18
- background-color: var(
19
- --color-sentiment-interactive-primary-active,
20
- var(--color-interactive-accent-active)
21
- );
22
- }
8
+ .colors(--color-interactive-control, --color-interactive-accent);
23
9
  }
24
10
 
25
11
  &-primary-negative {
@@ -36,24 +22,7 @@
36
22
  }
37
23
 
38
24
  &-secondary-default {
39
- color: var(--color-sentiment-content-primary, var(--color-interactive-primary));
40
- background-color: var(
41
- --color-sentiment-interactive-secondary-neutral,
42
- var(--color-interactive-neutral)
43
- );
44
-
45
- &:not(.disabled, :disabled):hover {
46
- background-color: var(
47
- --color-sentiment-interactive-secondary-neutral-hover,
48
- var(--color-interactive-neutral-hover)
49
- );
50
- }
51
- &:not(.disabled, :disabled):active {
52
- background-color: var(
53
- --color-sentiment-interactive-secondary-neutral-active,
54
- var(--color-interactive-neutral-active)
55
- );
56
- }
25
+ .colors(--color-interactive-primary, --color-interactive-neutral);
57
26
 
58
27
  .np-theme-personal--bright-green &,
59
28
  .np-theme-personal--forest-green & {
@@ -77,10 +46,10 @@
77
46
  background-color: var(@bg-color);
78
47
 
79
48
  &:not(.disabled, :disabled):hover {
80
- background-color: ~"var(@{bg-color}-hover)";
49
+ background-color:~"var(@{bg-color}-hover)";
81
50
  }
82
51
  &:not(.disabled, :disabled):active {
83
- background-color: ~"var(@{bg-color}-active)";
52
+ background-color:~"var(@{bg-color}-active)";
84
53
  }
85
54
  }
86
55
  }
package/src/iconButton/IconButton.story.tsx CHANGED
@@ -1,9 +1,9 @@
1
+ /* eslint-disable react/jsx-key */
1
2
  import { Meta, StoryObj } from '@storybook/react-webpack5';
2
3
  import { ArrowLeft, Cross, Defrost, Edit, Menu, Plus } from '@transferwise/icons';
3
4
  import IconButton, { Props } from './IconButton';
4
5
  import { action } from 'storybook/actions';
5
6
  import Body from '../body';
6
- import SentimentSurface from '../sentimentSurface';
7
7
 
8
8
  export default {
9
9
  title: 'Actions/IconButton',
@@ -94,83 +94,14 @@ export const Basic: Story = {
94
94
  >
95
95
  {['Primary', 'Secondary', 'Tertiary', 'Minimal', 'Neg primary', 'Neg secondary'].map(
96
96
  (variant) => (
97
- <Body key={variant} type="body-default-bold">
98
- {variant}
99
- </Body>
97
+ <Body type="body-default-bold">{variant}</Body>
100
98
  ),
101
99
  )}
102
100
  {sizes.map((size) => (
103
- <Template key={size} size={size} />
101
+ <Template size={size} />
104
102
  ))}
105
103
  <Template size={72} disabled />
106
104
  </div>
107
105
  );
108
106
  },
109
107
  };
110
-
111
- /**
112
- * `IconButton` is sentiment-aware and will automatically adjust its
113
- * colours if wrapped inside the [SentimentSurface](/?path=/docs/content-sentimentsurface--docs) component
114
- */
115
- export const SentimentAwareness: Story = {
116
- render: () => {
117
- return (
118
- <>
119
- {(['success', 'warning', 'negative', 'neutral', 'proposition'] as const).map(
120
- (sentiment) => (
121
- <SentimentSurface
122
- key={sentiment}
123
- sentiment={sentiment}
124
- className="p-a-1 d-flex align-items-center"
125
- style={{ gap: 'var(--size-8)' }}
126
- >
127
- <IconButton
128
- size={32}
129
- aria-label="Primary action"
130
- priority="primary"
131
- type="default"
132
- onClick={action('button click')}
133
- >
134
- <Plus />
135
- </IconButton>
136
- <IconButton
137
- size={32}
138
- aria-label="Secondary action"
139
- priority="secondary"
140
- type="default"
141
- onClick={action('button click')}
142
- >
143
- <Defrost />
144
- </IconButton>
145
- <IconButton
146
- size={32}
147
- aria-label="Disabled action"
148
- priority="primary"
149
- type="default"
150
- disabled
151
- onClick={action('button click')}
152
- >
153
- <Menu />
154
- </IconButton>
155
- </SentimentSurface>
156
- ),
157
- )}
158
- </>
159
- );
160
- },
161
- parameters: {
162
- docs: {
163
- source: { type: 'dynamic' },
164
- canvas: {
165
- sourceState: 'hidden',
166
- },
167
- },
168
- },
169
- decorators: [
170
- (Story) => (
171
- <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
172
- <Story />
173
- </div>
174
- ),
175
- ],
176
- };
package/src/main.css CHANGED
@@ -925,6 +925,12 @@
925
925
  .wds-inline-prompt__media-wrapper .tw-icon-confetti {
926
926
  color: var(--color-sentiment-content-primary);
927
927
  }
928
+ .wds-inline-prompt .wds-inline-prompt-process-indicator {
929
+ width: 16px;
930
+ width: var(--size-16);
931
+ height: 16px;
932
+ height: var(--size-16);
933
+ }
928
934
  .np-dot {
929
935
  --np-dot-size: 14px;
930
936
  position: relative;
@@ -1026,17 +1032,17 @@
1026
1032
  background-color: var(--color-background-neutral-active);
1027
1033
  }
1028
1034
  .np-icon-button-primary-default {
1029
- color: var(--color-sentiment-interactive-control, var(--color-interactive-control));
1035
+ color: var(--color-interactive-control);
1030
1036
  background-color: #00a2dd;
1031
- background-color: var(--color-sentiment-interactive-primary, var(--color-interactive-accent));
1037
+ background-color: var(--color-interactive-accent);
1032
1038
  }
1033
1039
  .np-icon-button-primary-default:not(.disabled):not(:disabled):hover {
1034
1040
  background-color: #008fc9;
1035
- background-color: var(--color-sentiment-interactive-primary-hover, var(--color-interactive-accent-hover));
1041
+ background-color: var(--color-interactive-accent-hover);
1036
1042
  }
1037
1043
  .np-icon-button-primary-default:not(.disabled):not(:disabled):active {
1038
1044
  background-color: #0081ba;
1039
- background-color: var(--color-sentiment-interactive-primary-active, var(--color-interactive-accent-active));
1045
+ background-color: var(--color-interactive-accent-active);
1040
1046
  }
1041
1047
  .np-icon-button-primary-negative {
1042
1048
  color: var(--color-contrast-overlay);
@@ -1064,14 +1070,14 @@
1064
1070
  background-color: var(--color-background-screen-active);
1065
1071
  }
1066
1072
  .np-icon-button-secondary-default {
1067
- color: var(--color-sentiment-content-primary, var(--color-interactive-primary));
1068
- background-color: var(--color-sentiment-interactive-secondary-neutral, var(--color-interactive-neutral));
1073
+ color: var(--color-interactive-primary);
1074
+ background-color: var(--color-interactive-neutral);
1069
1075
  }
1070
1076
  .np-icon-button-secondary-default:not(.disabled):not(:disabled):hover {
1071
- background-color: var(--color-sentiment-interactive-secondary-neutral-hover, var(--color-interactive-neutral-hover));
1077
+ background-color: var(--color-interactive-neutral-hover);
1072
1078
  }
1073
1079
  .np-icon-button-secondary-default:not(.disabled):not(:disabled):active {
1074
- background-color: var(--color-sentiment-interactive-secondary-neutral-active, var(--color-interactive-neutral-active));
1080
+ background-color: var(--color-interactive-neutral-active);
1075
1081
  }
1076
1082
  .np-theme-personal--bright-green .np-icon-button-secondary-default,
1077
1083
  .np-theme-personal--forest-green .np-icon-button-secondary-default {
package/src/prompt/InlinePrompt/InlinePrompt.css CHANGED
@@ -63,3 +63,9 @@
63
63
  .wds-inline-prompt__media-wrapper .tw-icon-confetti {
64
64
  color: var(--color-sentiment-content-primary);
65
65
  }
66
+ .wds-inline-prompt .wds-inline-prompt-process-indicator {
67
+ width: 16px;
68
+ width: var(--size-16);
69
+ height: 16px;
70
+ height: var(--size-16);
71
+ }
package/src/prompt/InlinePrompt/InlinePrompt.less CHANGED
@@ -60,4 +60,9 @@
60
60
  color: var(--color-sentiment-content-primary);
61
61
  }
62
62
  }
63
+
64
+ .wds-inline-prompt-process-indicator {
65
+ width: var(--size-16);
66
+ height: var(--size-16);
67
+ }
63
68
  }
package/src/prompt/InlinePrompt/InlinePrompt.tsx CHANGED
@@ -61,7 +61,13 @@ export const InlinePrompt = ({
61
61
  return <BackslashCircle size={16} data-testid="InlinePrompt_Muted" />;
62
62
  }
63
63
  if (loading) {
64
- return <ProcessIndicator data-testid="InlinePrompt_ProcessIndicator" size="xxs" />;
64
+ return (
65
+ <ProcessIndicator
66
+ data-testid="InlinePrompt_ProcessIndicator"
67
+ size="xxs"
68
+ className="wds-inline-prompt-process-indicator"
69
+ />
70
+ );
65
71
  }
66
72
  return <StatusIcon size={16} sentiment={sentiment} />;
67
73
  };