@transferwise/components 0.0.0-experimental-3be0416 → 0.0.0-experimental-05765a5

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 (20) hide show
  1. package/build/button/Button.resolver.js +4 -4
  2. package/build/button/Button.resolver.js.map +1 -1
  3. package/build/button/Button.resolver.mjs +4 -4
  4. package/build/button/Button.resolver.mjs.map +1 -1
  5. package/build/main.css +24 -24
  6. package/build/styles/button/Button.css +24 -24
  7. package/build/styles/button/Button.vars.css +8 -8
  8. package/build/styles/main.css +24 -24
  9. package/build/types/button/Button.types.d.ts +1 -1
  10. package/build/types/button/Button.types.d.ts.map +1 -1
  11. package/package.json +4 -4
  12. package/src/button/Button.css +24 -24
  13. package/src/button/Button.less +13 -13
  14. package/src/button/Button.resolver.tsx +4 -4
  15. package/src/button/Button.story.tsx +5 -5
  16. package/src/button/Button.tests.story.tsx +3 -3
  17. package/src/button/Button.types.ts +1 -1
  18. package/src/button/Button.vars.css +8 -8
  19. package/src/button/Button.vars.less +9 -9
  20. package/src/main.css +24 -24
package/build/button/Button.resolver.js CHANGED
@@ -15,13 +15,13 @@ const mapProps = props => {
15
15
  const priorityMapping = {
16
16
  accent: {
17
17
  primary: 'primary',
18
- secondary: 'tertiary',
19
- tertiary: 'minimal'
18
+ secondary: 'secondary-neutral',
19
+ tertiary: 'tertiary'
20
20
  },
21
21
  positive: {
22
22
  primary: 'primary',
23
- secondary: 'tertiary',
24
- tertiary: 'tertiary'
23
+ secondary: 'secondary-neutral',
24
+ tertiary: 'secondary-neutral'
25
25
  },
26
26
  negative: {
27
27
  primary: 'primary',
package/build/button/Button.resolver.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Button.resolver.js","sources":["../../src/button/Button.resolver.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport LegacyButton, { LegacyButtonProps } from './LegacyButton';\nimport { ButtonReferenceType, ButtonProps as NewButtonProps } from './Button.types';\nimport NewButton from './Button';\n\nexport type ButtonProps = LegacyButtonProps | NewButtonProps;\n\nconst mapProps = (props: LegacyButtonProps): NewButtonProps => {\n const { priority, size, type, ...newProps } = props;\n\n const priorityMapping: Record<string, Record<string, NewButtonProps['priority']>> = {\n accent: {\n primary: 'primary',\n secondary: 'tertiary',\n tertiary: 'minimal',\n },\n positive: {\n primary: 'primary',\n secondary: 'tertiary',\n tertiary: 'tertiary',\n },\n negative: {\n primary: 'primary',\n secondary: 'secondary',\n tertiary: 'secondary',\n },\n };\n\n const mappedPriority =\n type && priority ? priorityMapping[type]?.[priority] || priority : priority || undefined;\n const mappedSentiment = type === 'negative' ? 'negative' : undefined;\n\n const legacyButtonTypes: LegacyButtonProps['type'][] = [\n 'accent',\n 'negative',\n 'positive',\n 'primary',\n 'pay',\n 'secondary',\n 'danger',\n 'link',\n ];\n\n const resolveSize = () => {\n if (size) {\n return { xs: 'sm', sm: 'sm', md: 'md', lg: 'lg' }[size] || size;\n }\n\n return size;\n };\n\n return {\n ...newProps,\n size: resolveSize(),\n priority: mappedPriority,\n sentiment: mappedSentiment || ('sentiment' in props ? props.sentiment : null),\n type: type && !legacyButtonTypes.includes(type) ? type : props.htmlType || null,\n v2: true,\n } as NewButtonProps;\n};\n\nconst Button = forwardRef<ButtonReferenceType, ButtonProps>(({ v2 = false, ...props }, ref) => {\n if (v2) {\n const mappedProps = mapProps(props as LegacyButtonProps);\n return <NewButton {...mappedProps} ref={ref} />;\n }\n\n return <LegacyButton {...(props as LegacyButtonProps)} ref={ref} />;\n});\n\nButton.displayName = 'Button';\n\nexport default Button;\n"],"names":["mapProps","props","priority","size","type","newProps","priorityMapping","accent","primary","secondary","tertiary","positive","negative","mappedPriority","undefined","mappedSentiment","legacyButtonTypes","resolveSize","xs","sm","md","lg","sentiment","includes","htmlType","v2","Button","forwardRef","ref","mappedProps","_jsx","NewButton","LegacyButton","displayName"],"mappings":";;;;;;;AAOA,MAAMA,QAAQ,GAAIC,KAAwB,IAAoB;EAC5D,MAAM;IAAEC,QAAQ;IAAEC,IAAI;IAAEC,IAAI;IAAE,GAAGC,QAAAA;AAAQ,GAAE,GAAGJ,KAAK,CAAA;AAEnD,EAAA,MAAMK,eAAe,GAA+D;AAClFC,IAAAA,MAAM,EAAE;AACNC,MAAAA,OAAO,EAAE,SAAS;AAClBC,MAAAA,SAAS,EAAE,UAAU;AACrBC,MAAAA,QAAQ,EAAE,SAAA;KACX;AACDC,IAAAA,QAAQ,EAAE;AACRH,MAAAA,OAAO,EAAE,SAAS;AAClBC,MAAAA,SAAS,EAAE,UAAU;AACrBC,MAAAA,QAAQ,EAAE,UAAA;KACX;AACDE,IAAAA,QAAQ,EAAE;AACRJ,MAAAA,OAAO,EAAE,SAAS;AAClBC,MAAAA,SAAS,EAAE,WAAW;AACtBC,MAAAA,QAAQ,EAAE,WAAA;AACX,KAAA;GACF,CAAA;AAED,EAAA,MAAMG,cAAc,GAClBT,IAAI,IAAIF,QAAQ,GAAGI,eAAe,CAACF,IAAI,CAAC,GAAGF,QAAQ,CAAC,IAAIA,QAAQ,GAAGA,QAAQ,IAAIY,SAAS,CAAA;EAC1F,MAAMC,eAAe,GAAGX,IAAI,KAAK,UAAU,GAAG,UAAU,GAAGU,SAAS,CAAA;AAEpE,EAAA,MAAME,iBAAiB,GAAgC,CACrD,QAAQ,EACR,UAAU,EACV,UAAU,EACV,SAAS,EACT,KAAK,EACL,WAAW,EACX,QAAQ,EACR,MAAM,CACP,CAAA;EAED,MAAMC,WAAW,GAAGA,MAAK;AACvB,IAAA,IAAId,IAAI,EAAE;MACR,OAAO;AAAEe,QAAAA,EAAE,EAAE,IAAI;AAAEC,QAAAA,EAAE,EAAE,IAAI;AAAEC,QAAAA,EAAE,EAAE,IAAI;AAAEC,QAAAA,EAAE,EAAE,IAAA;AAAI,OAAE,CAAClB,IAAI,CAAC,IAAIA,IAAI,CAAA;AACjE,KAAA;AAEA,IAAA,OAAOA,IAAI,CAAA;GACZ,CAAA;EAED,OAAO;AACL,IAAA,GAAGE,QAAQ;IACXF,IAAI,EAAEc,WAAW,EAAE;AACnBf,IAAAA,QAAQ,EAAEW,cAAc;AACxBS,IAAAA,SAAS,EAAEP,eAAe,KAAK,WAAW,IAAId,KAAK,GAAGA,KAAK,CAACqB,SAAS,GAAG,IAAI,CAAC;AAC7ElB,IAAAA,IAAI,EAAEA,IAAI,IAAI,CAACY,iBAAiB,CAACO,QAAQ,CAACnB,IAAI,CAAC,GAAGA,IAAI,GAAGH,KAAK,CAACuB,QAAQ,IAAI,IAAI;AAC/EC,IAAAA,EAAE,EAAE,IAAA;GACa,CAAA;AACrB,CAAC,CAAA;AAED,MAAMC,MAAM,gBAAGC,gBAAU,CAAmC,CAAC;AAAEF,EAAAA,EAAE,GAAG,KAAK;EAAE,GAAGxB,KAAAA;AAAK,CAAE,EAAE2B,GAAG,KAAI;AAC5F,EAAA,IAAIH,EAAE,EAAE;AACN,IAAA,MAAMI,WAAW,GAAG7B,QAAQ,CAACC,KAA0B,CAAC,CAAA;IACxD,oBAAO6B,cAAA,CAACC,QAAS,EAAA;AAAA,MAAA,GAAKF,WAAW;AAAED,MAAAA,GAAG,EAAEA,GAAAA;AAAI,MAAG,CAAA;AACjD,GAAA;EAEA,oBAAOE,cAAA,CAACE,YAAY,EAAA;AAAA,IAAA,GAAM/B,KAA2B;AAAE2B,IAAAA,GAAG,EAAEA,GAAAA;AAAI,IAAG,CAAA;AACrE,CAAC,EAAC;AAEFF,MAAM,CAACO,WAAW,GAAG,QAAQ;;;;"}
1
+ {"version":3,"file":"Button.resolver.js","sources":["../../src/button/Button.resolver.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport LegacyButton, { LegacyButtonProps } from './LegacyButton';\nimport { ButtonReferenceType, ButtonProps as NewButtonProps } from './Button.types';\nimport NewButton from './Button';\n\nexport type ButtonProps = LegacyButtonProps | NewButtonProps;\n\nconst mapProps = (props: LegacyButtonProps): NewButtonProps => {\n const { priority, size, type, ...newProps } = props;\n\n const priorityMapping: Record<string, Record<string, NewButtonProps['priority']>> = {\n accent: {\n primary: 'primary',\n secondary: 'secondary-neutral',\n tertiary: 'tertiary',\n },\n positive: {\n primary: 'primary',\n secondary: 'secondary-neutral',\n tertiary: 'secondary-neutral',\n },\n negative: {\n primary: 'primary',\n secondary: 'secondary',\n tertiary: 'secondary',\n },\n };\n\n const mappedPriority =\n type && priority ? priorityMapping[type]?.[priority] || priority : priority || undefined;\n const mappedSentiment = type === 'negative' ? 'negative' : undefined;\n\n const legacyButtonTypes: LegacyButtonProps['type'][] = [\n 'accent',\n 'negative',\n 'positive',\n 'primary',\n 'pay',\n 'secondary',\n 'danger',\n 'link',\n ];\n\n const resolveSize = () => {\n if (size) {\n return { xs: 'sm', sm: 'sm', md: 'md', lg: 'lg' }[size] || size;\n }\n\n return size;\n };\n\n return {\n ...newProps,\n size: resolveSize(),\n priority: mappedPriority,\n sentiment: mappedSentiment || ('sentiment' in props ? props.sentiment : null),\n type: type && !legacyButtonTypes.includes(type) ? type : props.htmlType || null,\n v2: true,\n } as NewButtonProps;\n};\n\nconst Button = forwardRef<ButtonReferenceType, ButtonProps>(({ v2 = false, ...props }, ref) => {\n if (v2) {\n const mappedProps = mapProps(props as LegacyButtonProps);\n return <NewButton {...mappedProps} ref={ref} />;\n }\n\n return <LegacyButton {...(props as LegacyButtonProps)} ref={ref} />;\n});\n\nButton.displayName = 'Button';\n\nexport default Button;\n"],"names":["mapProps","props","priority","size","type","newProps","priorityMapping","accent","primary","secondary","tertiary","positive","negative","mappedPriority","undefined","mappedSentiment","legacyButtonTypes","resolveSize","xs","sm","md","lg","sentiment","includes","htmlType","v2","Button","forwardRef","ref","mappedProps","_jsx","NewButton","LegacyButton","displayName"],"mappings":";;;;;;;AAOA,MAAMA,QAAQ,GAAIC,KAAwB,IAAoB;EAC5D,MAAM;IAAEC,QAAQ;IAAEC,IAAI;IAAEC,IAAI;IAAE,GAAGC,QAAAA;AAAQ,GAAE,GAAGJ,KAAK,CAAA;AAEnD,EAAA,MAAMK,eAAe,GAA+D;AAClFC,IAAAA,MAAM,EAAE;AACNC,MAAAA,OAAO,EAAE,SAAS;AAClBC,MAAAA,SAAS,EAAE,mBAAmB;AAC9BC,MAAAA,QAAQ,EAAE,UAAA;KACX;AACDC,IAAAA,QAAQ,EAAE;AACRH,MAAAA,OAAO,EAAE,SAAS;AAClBC,MAAAA,SAAS,EAAE,mBAAmB;AAC9BC,MAAAA,QAAQ,EAAE,mBAAA;KACX;AACDE,IAAAA,QAAQ,EAAE;AACRJ,MAAAA,OAAO,EAAE,SAAS;AAClBC,MAAAA,SAAS,EAAE,WAAW;AACtBC,MAAAA,QAAQ,EAAE,WAAA;AACX,KAAA;GACF,CAAA;AAED,EAAA,MAAMG,cAAc,GAClBT,IAAI,IAAIF,QAAQ,GAAGI,eAAe,CAACF,IAAI,CAAC,GAAGF,QAAQ,CAAC,IAAIA,QAAQ,GAAGA,QAAQ,IAAIY,SAAS,CAAA;EAC1F,MAAMC,eAAe,GAAGX,IAAI,KAAK,UAAU,GAAG,UAAU,GAAGU,SAAS,CAAA;AAEpE,EAAA,MAAME,iBAAiB,GAAgC,CACrD,QAAQ,EACR,UAAU,EACV,UAAU,EACV,SAAS,EACT,KAAK,EACL,WAAW,EACX,QAAQ,EACR,MAAM,CACP,CAAA;EAED,MAAMC,WAAW,GAAGA,MAAK;AACvB,IAAA,IAAId,IAAI,EAAE;MACR,OAAO;AAAEe,QAAAA,EAAE,EAAE,IAAI;AAAEC,QAAAA,EAAE,EAAE,IAAI;AAAEC,QAAAA,EAAE,EAAE,IAAI;AAAEC,QAAAA,EAAE,EAAE,IAAA;AAAI,OAAE,CAAClB,IAAI,CAAC,IAAIA,IAAI,CAAA;AACjE,KAAA;AAEA,IAAA,OAAOA,IAAI,CAAA;GACZ,CAAA;EAED,OAAO;AACL,IAAA,GAAGE,QAAQ;IACXF,IAAI,EAAEc,WAAW,EAAE;AACnBf,IAAAA,QAAQ,EAAEW,cAAc;AACxBS,IAAAA,SAAS,EAAEP,eAAe,KAAK,WAAW,IAAId,KAAK,GAAGA,KAAK,CAACqB,SAAS,GAAG,IAAI,CAAC;AAC7ElB,IAAAA,IAAI,EAAEA,IAAI,IAAI,CAACY,iBAAiB,CAACO,QAAQ,CAACnB,IAAI,CAAC,GAAGA,IAAI,GAAGH,KAAK,CAACuB,QAAQ,IAAI,IAAI;AAC/EC,IAAAA,EAAE,EAAE,IAAA;GACa,CAAA;AACrB,CAAC,CAAA;AAED,MAAMC,MAAM,gBAAGC,gBAAU,CAAmC,CAAC;AAAEF,EAAAA,EAAE,GAAG,KAAK;EAAE,GAAGxB,KAAAA;AAAK,CAAE,EAAE2B,GAAG,KAAI;AAC5F,EAAA,IAAIH,EAAE,EAAE;AACN,IAAA,MAAMI,WAAW,GAAG7B,QAAQ,CAACC,KAA0B,CAAC,CAAA;IACxD,oBAAO6B,cAAA,CAACC,QAAS,EAAA;AAAA,MAAA,GAAKF,WAAW;AAAED,MAAAA,GAAG,EAAEA,GAAAA;AAAI,MAAG,CAAA;AACjD,GAAA;EAEA,oBAAOE,cAAA,CAACE,YAAY,EAAA;AAAA,IAAA,GAAM/B,KAA2B;AAAE2B,IAAAA,GAAG,EAAEA,GAAAA;AAAI,IAAG,CAAA;AACrE,CAAC,EAAC;AAEFF,MAAM,CAACO,WAAW,GAAG,QAAQ;;;;"}
package/build/button/Button.resolver.mjs CHANGED
@@ -13,13 +13,13 @@ const mapProps = props => {
13
13
  const priorityMapping = {
14
14
  accent: {
15
15
  primary: 'primary',
16
- secondary: 'tertiary',
17
- tertiary: 'minimal'
16
+ secondary: 'secondary-neutral',
17
+ tertiary: 'tertiary'
18
18
  },
19
19
  positive: {
20
20
  primary: 'primary',
21
- secondary: 'tertiary',
22
- tertiary: 'tertiary'
21
+ secondary: 'secondary-neutral',
22
+ tertiary: 'secondary-neutral'
23
23
  },
24
24
  negative: {
25
25
  primary: 'primary',
package/build/button/Button.resolver.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Button.resolver.mjs","sources":["../../src/button/Button.resolver.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport LegacyButton, { LegacyButtonProps } from './LegacyButton';\nimport { ButtonReferenceType, ButtonProps as NewButtonProps } from './Button.types';\nimport NewButton from './Button';\n\nexport type ButtonProps = LegacyButtonProps | NewButtonProps;\n\nconst mapProps = (props: LegacyButtonProps): NewButtonProps => {\n const { priority, size, type, ...newProps } = props;\n\n const priorityMapping: Record<string, Record<string, NewButtonProps['priority']>> = {\n accent: {\n primary: 'primary',\n secondary: 'tertiary',\n tertiary: 'minimal',\n },\n positive: {\n primary: 'primary',\n secondary: 'tertiary',\n tertiary: 'tertiary',\n },\n negative: {\n primary: 'primary',\n secondary: 'secondary',\n tertiary: 'secondary',\n },\n };\n\n const mappedPriority =\n type && priority ? priorityMapping[type]?.[priority] || priority : priority || undefined;\n const mappedSentiment = type === 'negative' ? 'negative' : undefined;\n\n const legacyButtonTypes: LegacyButtonProps['type'][] = [\n 'accent',\n 'negative',\n 'positive',\n 'primary',\n 'pay',\n 'secondary',\n 'danger',\n 'link',\n ];\n\n const resolveSize = () => {\n if (size) {\n return { xs: 'sm', sm: 'sm', md: 'md', lg: 'lg' }[size] || size;\n }\n\n return size;\n };\n\n return {\n ...newProps,\n size: resolveSize(),\n priority: mappedPriority,\n sentiment: mappedSentiment || ('sentiment' in props ? props.sentiment : null),\n type: type && !legacyButtonTypes.includes(type) ? type : props.htmlType || null,\n v2: true,\n } as NewButtonProps;\n};\n\nconst Button = forwardRef<ButtonReferenceType, ButtonProps>(({ v2 = false, ...props }, ref) => {\n if (v2) {\n const mappedProps = mapProps(props as LegacyButtonProps);\n return <NewButton {...mappedProps} ref={ref} />;\n }\n\n return <LegacyButton {...(props as LegacyButtonProps)} ref={ref} />;\n});\n\nButton.displayName = 'Button';\n\nexport default Button;\n"],"names":["mapProps","props","priority","size","type","newProps","priorityMapping","accent","primary","secondary","tertiary","positive","negative","mappedPriority","undefined","mappedSentiment","legacyButtonTypes","resolveSize","xs","sm","md","lg","sentiment","includes","htmlType","v2","Button","forwardRef","ref","mappedProps","_jsx","NewButton","LegacyButton","displayName"],"mappings":";;;;;AAOA,MAAMA,QAAQ,GAAIC,KAAwB,IAAoB;EAC5D,MAAM;IAAEC,QAAQ;IAAEC,IAAI;IAAEC,IAAI;IAAE,GAAGC,QAAAA;AAAQ,GAAE,GAAGJ,KAAK,CAAA;AAEnD,EAAA,MAAMK,eAAe,GAA+D;AAClFC,IAAAA,MAAM,EAAE;AACNC,MAAAA,OAAO,EAAE,SAAS;AAClBC,MAAAA,SAAS,EAAE,UAAU;AACrBC,MAAAA,QAAQ,EAAE,SAAA;KACX;AACDC,IAAAA,QAAQ,EAAE;AACRH,MAAAA,OAAO,EAAE,SAAS;AAClBC,MAAAA,SAAS,EAAE,UAAU;AACrBC,MAAAA,QAAQ,EAAE,UAAA;KACX;AACDE,IAAAA,QAAQ,EAAE;AACRJ,MAAAA,OAAO,EAAE,SAAS;AAClBC,MAAAA,SAAS,EAAE,WAAW;AACtBC,MAAAA,QAAQ,EAAE,WAAA;AACX,KAAA;GACF,CAAA;AAED,EAAA,MAAMG,cAAc,GAClBT,IAAI,IAAIF,QAAQ,GAAGI,eAAe,CAACF,IAAI,CAAC,GAAGF,QAAQ,CAAC,IAAIA,QAAQ,GAAGA,QAAQ,IAAIY,SAAS,CAAA;EAC1F,MAAMC,eAAe,GAAGX,IAAI,KAAK,UAAU,GAAG,UAAU,GAAGU,SAAS,CAAA;AAEpE,EAAA,MAAME,iBAAiB,GAAgC,CACrD,QAAQ,EACR,UAAU,EACV,UAAU,EACV,SAAS,EACT,KAAK,EACL,WAAW,EACX,QAAQ,EACR,MAAM,CACP,CAAA;EAED,MAAMC,WAAW,GAAGA,MAAK;AACvB,IAAA,IAAId,IAAI,EAAE;MACR,OAAO;AAAEe,QAAAA,EAAE,EAAE,IAAI;AAAEC,QAAAA,EAAE,EAAE,IAAI;AAAEC,QAAAA,EAAE,EAAE,IAAI;AAAEC,QAAAA,EAAE,EAAE,IAAA;AAAI,OAAE,CAAClB,IAAI,CAAC,IAAIA,IAAI,CAAA;AACjE,KAAA;AAEA,IAAA,OAAOA,IAAI,CAAA;GACZ,CAAA;EAED,OAAO;AACL,IAAA,GAAGE,QAAQ;IACXF,IAAI,EAAEc,WAAW,EAAE;AACnBf,IAAAA,QAAQ,EAAEW,cAAc;AACxBS,IAAAA,SAAS,EAAEP,eAAe,KAAK,WAAW,IAAId,KAAK,GAAGA,KAAK,CAACqB,SAAS,GAAG,IAAI,CAAC;AAC7ElB,IAAAA,IAAI,EAAEA,IAAI,IAAI,CAACY,iBAAiB,CAACO,QAAQ,CAACnB,IAAI,CAAC,GAAGA,IAAI,GAAGH,KAAK,CAACuB,QAAQ,IAAI,IAAI;AAC/EC,IAAAA,EAAE,EAAE,IAAA;GACa,CAAA;AACrB,CAAC,CAAA;AAED,MAAMC,MAAM,gBAAGC,UAAU,CAAmC,CAAC;AAAEF,EAAAA,EAAE,GAAG,KAAK;EAAE,GAAGxB,KAAAA;AAAK,CAAE,EAAE2B,GAAG,KAAI;AAC5F,EAAA,IAAIH,EAAE,EAAE;AACN,IAAA,MAAMI,WAAW,GAAG7B,QAAQ,CAACC,KAA0B,CAAC,CAAA;IACxD,oBAAO6B,GAAA,CAACC,QAAS,EAAA;AAAA,MAAA,GAAKF,WAAW;AAAED,MAAAA,GAAG,EAAEA,GAAAA;AAAI,MAAG,CAAA;AACjD,GAAA;EAEA,oBAAOE,GAAA,CAACE,YAAY,EAAA;AAAA,IAAA,GAAM/B,KAA2B;AAAE2B,IAAAA,GAAG,EAAEA,GAAAA;AAAI,IAAG,CAAA;AACrE,CAAC,EAAC;AAEFF,MAAM,CAACO,WAAW,GAAG,QAAQ;;;;"}
1
+ {"version":3,"file":"Button.resolver.mjs","sources":["../../src/button/Button.resolver.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport LegacyButton, { LegacyButtonProps } from './LegacyButton';\nimport { ButtonReferenceType, ButtonProps as NewButtonProps } from './Button.types';\nimport NewButton from './Button';\n\nexport type ButtonProps = LegacyButtonProps | NewButtonProps;\n\nconst mapProps = (props: LegacyButtonProps): NewButtonProps => {\n const { priority, size, type, ...newProps } = props;\n\n const priorityMapping: Record<string, Record<string, NewButtonProps['priority']>> = {\n accent: {\n primary: 'primary',\n secondary: 'secondary-neutral',\n tertiary: 'tertiary',\n },\n positive: {\n primary: 'primary',\n secondary: 'secondary-neutral',\n tertiary: 'secondary-neutral',\n },\n negative: {\n primary: 'primary',\n secondary: 'secondary',\n tertiary: 'secondary',\n },\n };\n\n const mappedPriority =\n type && priority ? priorityMapping[type]?.[priority] || priority : priority || undefined;\n const mappedSentiment = type === 'negative' ? 'negative' : undefined;\n\n const legacyButtonTypes: LegacyButtonProps['type'][] = [\n 'accent',\n 'negative',\n 'positive',\n 'primary',\n 'pay',\n 'secondary',\n 'danger',\n 'link',\n ];\n\n const resolveSize = () => {\n if (size) {\n return { xs: 'sm', sm: 'sm', md: 'md', lg: 'lg' }[size] || size;\n }\n\n return size;\n };\n\n return {\n ...newProps,\n size: resolveSize(),\n priority: mappedPriority,\n sentiment: mappedSentiment || ('sentiment' in props ? props.sentiment : null),\n type: type && !legacyButtonTypes.includes(type) ? type : props.htmlType || null,\n v2: true,\n } as NewButtonProps;\n};\n\nconst Button = forwardRef<ButtonReferenceType, ButtonProps>(({ v2 = false, ...props }, ref) => {\n if (v2) {\n const mappedProps = mapProps(props as LegacyButtonProps);\n return <NewButton {...mappedProps} ref={ref} />;\n }\n\n return <LegacyButton {...(props as LegacyButtonProps)} ref={ref} />;\n});\n\nButton.displayName = 'Button';\n\nexport default Button;\n"],"names":["mapProps","props","priority","size","type","newProps","priorityMapping","accent","primary","secondary","tertiary","positive","negative","mappedPriority","undefined","mappedSentiment","legacyButtonTypes","resolveSize","xs","sm","md","lg","sentiment","includes","htmlType","v2","Button","forwardRef","ref","mappedProps","_jsx","NewButton","LegacyButton","displayName"],"mappings":";;;;;AAOA,MAAMA,QAAQ,GAAIC,KAAwB,IAAoB;EAC5D,MAAM;IAAEC,QAAQ;IAAEC,IAAI;IAAEC,IAAI;IAAE,GAAGC,QAAAA;AAAQ,GAAE,GAAGJ,KAAK,CAAA;AAEnD,EAAA,MAAMK,eAAe,GAA+D;AAClFC,IAAAA,MAAM,EAAE;AACNC,MAAAA,OAAO,EAAE,SAAS;AAClBC,MAAAA,SAAS,EAAE,mBAAmB;AAC9BC,MAAAA,QAAQ,EAAE,UAAA;KACX;AACDC,IAAAA,QAAQ,EAAE;AACRH,MAAAA,OAAO,EAAE,SAAS;AAClBC,MAAAA,SAAS,EAAE,mBAAmB;AAC9BC,MAAAA,QAAQ,EAAE,mBAAA;KACX;AACDE,IAAAA,QAAQ,EAAE;AACRJ,MAAAA,OAAO,EAAE,SAAS;AAClBC,MAAAA,SAAS,EAAE,WAAW;AACtBC,MAAAA,QAAQ,EAAE,WAAA;AACX,KAAA;GACF,CAAA;AAED,EAAA,MAAMG,cAAc,GAClBT,IAAI,IAAIF,QAAQ,GAAGI,eAAe,CAACF,IAAI,CAAC,GAAGF,QAAQ,CAAC,IAAIA,QAAQ,GAAGA,QAAQ,IAAIY,SAAS,CAAA;EAC1F,MAAMC,eAAe,GAAGX,IAAI,KAAK,UAAU,GAAG,UAAU,GAAGU,SAAS,CAAA;AAEpE,EAAA,MAAME,iBAAiB,GAAgC,CACrD,QAAQ,EACR,UAAU,EACV,UAAU,EACV,SAAS,EACT,KAAK,EACL,WAAW,EACX,QAAQ,EACR,MAAM,CACP,CAAA;EAED,MAAMC,WAAW,GAAGA,MAAK;AACvB,IAAA,IAAId,IAAI,EAAE;MACR,OAAO;AAAEe,QAAAA,EAAE,EAAE,IAAI;AAAEC,QAAAA,EAAE,EAAE,IAAI;AAAEC,QAAAA,EAAE,EAAE,IAAI;AAAEC,QAAAA,EAAE,EAAE,IAAA;AAAI,OAAE,CAAClB,IAAI,CAAC,IAAIA,IAAI,CAAA;AACjE,KAAA;AAEA,IAAA,OAAOA,IAAI,CAAA;GACZ,CAAA;EAED,OAAO;AACL,IAAA,GAAGE,QAAQ;IACXF,IAAI,EAAEc,WAAW,EAAE;AACnBf,IAAAA,QAAQ,EAAEW,cAAc;AACxBS,IAAAA,SAAS,EAAEP,eAAe,KAAK,WAAW,IAAId,KAAK,GAAGA,KAAK,CAACqB,SAAS,GAAG,IAAI,CAAC;AAC7ElB,IAAAA,IAAI,EAAEA,IAAI,IAAI,CAACY,iBAAiB,CAACO,QAAQ,CAACnB,IAAI,CAAC,GAAGA,IAAI,GAAGH,KAAK,CAACuB,QAAQ,IAAI,IAAI;AAC/EC,IAAAA,EAAE,EAAE,IAAA;GACa,CAAA;AACrB,CAAC,CAAA;AAED,MAAMC,MAAM,gBAAGC,UAAU,CAAmC,CAAC;AAAEF,EAAAA,EAAE,GAAG,KAAK;EAAE,GAAGxB,KAAAA;AAAK,CAAE,EAAE2B,GAAG,KAAI;AAC5F,EAAA,IAAIH,EAAE,EAAE;AACN,IAAA,MAAMI,WAAW,GAAG7B,QAAQ,CAACC,KAA0B,CAAC,CAAA;IACxD,oBAAO6B,GAAA,CAACC,QAAS,EAAA;AAAA,MAAA,GAAKF,WAAW;AAAED,MAAAA,GAAG,EAAEA,GAAAA;AAAI,MAAG,CAAA;AACjD,GAAA;EAEA,oBAAOE,GAAA,CAACE,YAAY,EAAA;AAAA,IAAA,GAAM/B,KAA2B;AAAE2B,IAAAA,GAAG,EAAEA,GAAAA;AAAI,IAAG,CAAA;AACrE,CAAC,EAAC;AAEFF,MAAM,CAACO,WAAW,GAAG,QAAQ;;;;"}
package/build/main.css CHANGED
@@ -734,14 +734,14 @@ div.critical-comms .critical-comms-body {
734
734
  --Button-secondary-background-hover: var(--color-interactive-neutral-hover);
735
735
  --Button-secondary-background-active: var(--color-interactive-neutral-active);
736
736
  --Button-secondary-color: var(--color-interactive-primary);
737
- --Button-tertiary-background: var(--color-background-neutral);
738
- --Button-tertiary-background-hover: var(--color-background-neutral-hover);
739
- --Button-tertiary-background-active: var(--color-background-neutral-active);
740
- --Button-tertiary-color: var(--color-content-primary);
741
- --Button-minimal-background: transparent;
742
- --Button-minimal-background-hover: var(--color-background-screen-hover);
743
- --Button-minimal-background-active: var(--color-background-screen-active);
744
- --Button-minimal-color: var(--color-interactive-primary);
737
+ --Button-secondary-neutral-background: var(--color-background-neutral);
738
+ --Button-secondary-neutral-background-hover: var(--color-background-neutral-hover);
739
+ --Button-secondary-neutral-background-active: var(--color-background-neutral-active);
740
+ --Button-secondary-neutral-color: var(--color-content-primary);
741
+ --Button-tertiary-background: transparent;
742
+ --Button-tertiary-background-hover: var(--color-background-screen-hover);
743
+ --Button-tertiary-background-active: var(--color-background-screen-active);
744
+ --Button-tertiary-color: var(--color-interactive-primary);
745
745
  --Button-primary-negative-background: var(--color-sentiment-negative-primary);
746
746
  --Button-primary-negative-background-hover: var(--color-sentiment-negative-primary-hover);
747
747
  --Button-primary-negative-background-active: var(--color-sentiment-negative-primary-active);
@@ -818,25 +818,25 @@ div.critical-comms .critical-comms-body {
818
818
  --Button-background-active: var(--Button-secondary-background-active);
819
819
  --Button-color: var(--Button-secondary-color);
820
820
  }
821
+ .wds-Button--secondary-neutral {
822
+ --Button-background: var(--Button-secondary-neutral-background);
823
+ --Button-background-hover: var(--Button-secondary-neutral-background-hover);
824
+ --Button-background-active: var(--Button-secondary-neutral-background-active);
825
+ --Button-color: var(--Button-secondary-neutral-color);
826
+ }
827
+ .wds-Button--secondary-neutral .wds-Button-icon--end {
828
+ color: var(--color-interactive-primary);
829
+ }
821
830
  .wds-Button--tertiary {
822
831
  --Button-background: var(--Button-tertiary-background);
823
832
  --Button-background-hover: var(--Button-tertiary-background-hover);
824
833
  --Button-background-active: var(--Button-tertiary-background-active);
825
834
  --Button-color: var(--Button-tertiary-color);
826
835
  }
827
- .wds-Button--tertiary .wds-Button-icon--end {
828
- color: var(--color-interactive-primary);
829
- }
830
- .wds-Button--minimal {
831
- --Button-background: var(--Button-minimal-background);
832
- --Button-background-hover: var(--Button-minimal-background-hover);
833
- --Button-background-active: var(--Button-minimal-background-active);
834
- --Button-color: var(--Button-minimal-color);
835
- }
836
- .wds-Button--minimal,
837
- .wds-Button--minimal:hover,
838
- .wds-Button--minimal:active,
839
- .wds-Button--minimal:focus {
836
+ .wds-Button--tertiary,
837
+ .wds-Button--tertiary:hover,
838
+ .wds-Button--tertiary:active,
839
+ .wds-Button--tertiary:focus {
840
840
  -webkit-text-decoration: underline;
841
841
  text-decoration: underline;
842
842
  text-underline-offset: 3px;
@@ -935,8 +935,8 @@ div.critical-comms .critical-comms-body {
935
935
  }
936
936
  .np-theme-personal:not(.np-theme-personal--dark):not(.np-theme-personal--forest-green):not(.np-theme-personal--bright-green) .wds-Button--secondary.wds-Button--negative .wds-Button-avatars .np-circle,
937
937
  .np-theme-personal:not(.np-theme-personal--dark):not(.np-theme-personal--forest-green):not(.np-theme-personal--bright-green) .wds-Button--secondary .wds-Button-avatars .np-circle,
938
- .np-theme-personal:not(.np-theme-personal--dark):not(.np-theme-personal--forest-green):not(.np-theme-personal--bright-green) .wds-Button--tertiary .wds-Button-avatars .np-circle,
939
- .np-theme-personal:not(.np-theme-personal--dark):not(.np-theme-personal--forest-green):not(.np-theme-personal--bright-green) .wds-Button--minimal .wds-Button-avatars .np-circle {
938
+ .np-theme-personal:not(.np-theme-personal--dark):not(.np-theme-personal--forest-green):not(.np-theme-personal--bright-green) .wds-Button--secondary-neutral .wds-Button-avatars .np-circle,
939
+ .np-theme-personal:not(.np-theme-personal--dark):not(.np-theme-personal--forest-green):not(.np-theme-personal--bright-green) .wds-Button--tertiary .wds-Button-avatars .np-circle {
940
940
  --circle-border-color: color-mix(in srgb, var(--Button-color) 12%, transparent);
941
941
  }
942
942
  .np-theme-personal--dark .wds-Button--primary .wds-Button-avatars .np-circle,
@@ -946,7 +946,7 @@ div.critical-comms .critical-comms-body {
946
946
  --circle-border-color: color-mix(in srgb, var(--Button-color) 12%, transparent);
947
947
  }
948
948
  .np-theme-personal--bright-green .wds-Button--tertiary .wds-Button-avatars .np-circle,
949
- .np-theme-personal--bright-green .wds-Button--minimal .wds-Button-avatars .np-circle {
949
+ .np-theme-personal--bright-green .wds-Button--secondary-neutral .wds-Button-avatars .np-circle {
950
950
  --circle-border-color: color-mix(in srgb, var(--Button-color) 12%, transparent);
951
951
  }
952
952
  [dir="rtl"] .wds-Button .tw-icon-chevron-right,[dir="rtl"] .wds-Button .tw-icon-arrow-right,[dir="rtl"] .wds-Button .tw-icon-chevron-left,[dir="rtl"] .wds-Button .tw-icon-arrow-left,[dir="rtl"] .wds-Button .tw-icon-arrow-diagonal-down,[dir="rtl"] .wds-Button .tw-icon-arrow-diagonal-up,[dir="rtl"] .wds-Button .tw-icon-list,[dir="rtl"] .wds-Button .tw-icon-activity {
package/build/styles/button/Button.css CHANGED
@@ -15,14 +15,14 @@
15
15
  --Button-secondary-background-hover: var(--color-interactive-neutral-hover);
16
16
  --Button-secondary-background-active: var(--color-interactive-neutral-active);
17
17
  --Button-secondary-color: var(--color-interactive-primary);
18
- --Button-tertiary-background: var(--color-background-neutral);
19
- --Button-tertiary-background-hover: var(--color-background-neutral-hover);
20
- --Button-tertiary-background-active: var(--color-background-neutral-active);
21
- --Button-tertiary-color: var(--color-content-primary);
22
- --Button-minimal-background: transparent;
23
- --Button-minimal-background-hover: var(--color-background-screen-hover);
24
- --Button-minimal-background-active: var(--color-background-screen-active);
25
- --Button-minimal-color: var(--color-interactive-primary);
18
+ --Button-secondary-neutral-background: var(--color-background-neutral);
19
+ --Button-secondary-neutral-background-hover: var(--color-background-neutral-hover);
20
+ --Button-secondary-neutral-background-active: var(--color-background-neutral-active);
21
+ --Button-secondary-neutral-color: var(--color-content-primary);
22
+ --Button-tertiary-background: transparent;
23
+ --Button-tertiary-background-hover: var(--color-background-screen-hover);
24
+ --Button-tertiary-background-active: var(--color-background-screen-active);
25
+ --Button-tertiary-color: var(--color-interactive-primary);
26
26
  --Button-primary-negative-background: var(--color-sentiment-negative-primary);
27
27
  --Button-primary-negative-background-hover: var(--color-sentiment-negative-primary-hover);
28
28
  --Button-primary-negative-background-active: var(--color-sentiment-negative-primary-active);
@@ -99,25 +99,25 @@
99
99
  --Button-background-active: var(--Button-secondary-background-active);
100
100
  --Button-color: var(--Button-secondary-color);
101
101
  }
102
+ .wds-Button--secondary-neutral {
103
+ --Button-background: var(--Button-secondary-neutral-background);
104
+ --Button-background-hover: var(--Button-secondary-neutral-background-hover);
105
+ --Button-background-active: var(--Button-secondary-neutral-background-active);
106
+ --Button-color: var(--Button-secondary-neutral-color);
107
+ }
108
+ .wds-Button--secondary-neutral .wds-Button-icon--end {
109
+ color: var(--color-interactive-primary);
110
+ }
102
111
  .wds-Button--tertiary {
103
112
  --Button-background: var(--Button-tertiary-background);
104
113
  --Button-background-hover: var(--Button-tertiary-background-hover);
105
114
  --Button-background-active: var(--Button-tertiary-background-active);
106
115
  --Button-color: var(--Button-tertiary-color);
107
116
  }
108
- .wds-Button--tertiary .wds-Button-icon--end {
109
- color: var(--color-interactive-primary);
110
- }
111
- .wds-Button--minimal {
112
- --Button-background: var(--Button-minimal-background);
113
- --Button-background-hover: var(--Button-minimal-background-hover);
114
- --Button-background-active: var(--Button-minimal-background-active);
115
- --Button-color: var(--Button-minimal-color);
116
- }
117
- .wds-Button--minimal,
118
- .wds-Button--minimal:hover,
119
- .wds-Button--minimal:active,
120
- .wds-Button--minimal:focus {
117
+ .wds-Button--tertiary,
118
+ .wds-Button--tertiary:hover,
119
+ .wds-Button--tertiary:active,
120
+ .wds-Button--tertiary:focus {
121
121
  -webkit-text-decoration: underline;
122
122
  text-decoration: underline;
123
123
  text-underline-offset: 3px;
@@ -216,8 +216,8 @@
216
216
  }
217
217
  .np-theme-personal:not(.np-theme-personal--dark):not(.np-theme-personal--forest-green):not(.np-theme-personal--bright-green) .wds-Button--secondary.wds-Button--negative .wds-Button-avatars .np-circle,
218
218
  .np-theme-personal:not(.np-theme-personal--dark):not(.np-theme-personal--forest-green):not(.np-theme-personal--bright-green) .wds-Button--secondary .wds-Button-avatars .np-circle,
219
- .np-theme-personal:not(.np-theme-personal--dark):not(.np-theme-personal--forest-green):not(.np-theme-personal--bright-green) .wds-Button--tertiary .wds-Button-avatars .np-circle,
220
- .np-theme-personal:not(.np-theme-personal--dark):not(.np-theme-personal--forest-green):not(.np-theme-personal--bright-green) .wds-Button--minimal .wds-Button-avatars .np-circle {
219
+ .np-theme-personal:not(.np-theme-personal--dark):not(.np-theme-personal--forest-green):not(.np-theme-personal--bright-green) .wds-Button--secondary-neutral .wds-Button-avatars .np-circle,
220
+ .np-theme-personal:not(.np-theme-personal--dark):not(.np-theme-personal--forest-green):not(.np-theme-personal--bright-green) .wds-Button--tertiary .wds-Button-avatars .np-circle {
221
221
  --circle-border-color: color-mix(in srgb, var(--Button-color) 12%, transparent);
222
222
  }
223
223
  .np-theme-personal--dark .wds-Button--primary .wds-Button-avatars .np-circle,
@@ -227,7 +227,7 @@
227
227
  --circle-border-color: color-mix(in srgb, var(--Button-color) 12%, transparent);
228
228
  }
229
229
  .np-theme-personal--bright-green .wds-Button--tertiary .wds-Button-avatars .np-circle,
230
- .np-theme-personal--bright-green .wds-Button--minimal .wds-Button-avatars .np-circle {
230
+ .np-theme-personal--bright-green .wds-Button--secondary-neutral .wds-Button-avatars .np-circle {
231
231
  --circle-border-color: color-mix(in srgb, var(--Button-color) 12%, transparent);
232
232
  }
233
233
  [dir="rtl"] .wds-Button .tw-icon-chevron-right,[dir="rtl"] .wds-Button .tw-icon-arrow-right,[dir="rtl"] .wds-Button .tw-icon-chevron-left,[dir="rtl"] .wds-Button .tw-icon-arrow-left,[dir="rtl"] .wds-Button .tw-icon-arrow-diagonal-down,[dir="rtl"] .wds-Button .tw-icon-arrow-diagonal-up,[dir="rtl"] .wds-Button .tw-icon-list,[dir="rtl"] .wds-Button .tw-icon-activity {
package/build/styles/button/Button.vars.css CHANGED
@@ -15,14 +15,14 @@
15
15
  --Button-secondary-background-hover: var(--color-interactive-neutral-hover);
16
16
  --Button-secondary-background-active: var(--color-interactive-neutral-active);
17
17
  --Button-secondary-color: var(--color-interactive-primary);
18
- --Button-tertiary-background: var(--color-background-neutral);
19
- --Button-tertiary-background-hover: var(--color-background-neutral-hover);
20
- --Button-tertiary-background-active: var(--color-background-neutral-active);
21
- --Button-tertiary-color: var(--color-content-primary);
22
- --Button-minimal-background: transparent;
23
- --Button-minimal-background-hover: var(--color-background-screen-hover);
24
- --Button-minimal-background-active: var(--color-background-screen-active);
25
- --Button-minimal-color: var(--color-interactive-primary);
18
+ --Button-secondary-neutral-background: var(--color-background-neutral);
19
+ --Button-secondary-neutral-background-hover: var(--color-background-neutral-hover);
20
+ --Button-secondary-neutral-background-active: var(--color-background-neutral-active);
21
+ --Button-secondary-neutral-color: var(--color-content-primary);
22
+ --Button-tertiary-background: transparent;
23
+ --Button-tertiary-background-hover: var(--color-background-screen-hover);
24
+ --Button-tertiary-background-active: var(--color-background-screen-active);
25
+ --Button-tertiary-color: var(--color-interactive-primary);
26
26
  --Button-primary-negative-background: var(--color-sentiment-negative-primary);
27
27
  --Button-primary-negative-background-hover: var(--color-sentiment-negative-primary-hover);
28
28
  --Button-primary-negative-background-active: var(--color-sentiment-negative-primary-active);
package/build/styles/main.css CHANGED
@@ -734,14 +734,14 @@ div.critical-comms .critical-comms-body {
734
734
  --Button-secondary-background-hover: var(--color-interactive-neutral-hover);
735
735
  --Button-secondary-background-active: var(--color-interactive-neutral-active);
736
736
  --Button-secondary-color: var(--color-interactive-primary);
737
- --Button-tertiary-background: var(--color-background-neutral);
738
- --Button-tertiary-background-hover: var(--color-background-neutral-hover);
739
- --Button-tertiary-background-active: var(--color-background-neutral-active);
740
- --Button-tertiary-color: var(--color-content-primary);
741
- --Button-minimal-background: transparent;
742
- --Button-minimal-background-hover: var(--color-background-screen-hover);
743
- --Button-minimal-background-active: var(--color-background-screen-active);
744
- --Button-minimal-color: var(--color-interactive-primary);
737
+ --Button-secondary-neutral-background: var(--color-background-neutral);
738
+ --Button-secondary-neutral-background-hover: var(--color-background-neutral-hover);
739
+ --Button-secondary-neutral-background-active: var(--color-background-neutral-active);
740
+ --Button-secondary-neutral-color: var(--color-content-primary);
741
+ --Button-tertiary-background: transparent;
742
+ --Button-tertiary-background-hover: var(--color-background-screen-hover);
743
+ --Button-tertiary-background-active: var(--color-background-screen-active);
744
+ --Button-tertiary-color: var(--color-interactive-primary);
745
745
  --Button-primary-negative-background: var(--color-sentiment-negative-primary);
746
746
  --Button-primary-negative-background-hover: var(--color-sentiment-negative-primary-hover);
747
747
  --Button-primary-negative-background-active: var(--color-sentiment-negative-primary-active);
@@ -818,25 +818,25 @@ div.critical-comms .critical-comms-body {
818
818
  --Button-background-active: var(--Button-secondary-background-active);
819
819
  --Button-color: var(--Button-secondary-color);
820
820
  }
821
+ .wds-Button--secondary-neutral {
822
+ --Button-background: var(--Button-secondary-neutral-background);
823
+ --Button-background-hover: var(--Button-secondary-neutral-background-hover);
824
+ --Button-background-active: var(--Button-secondary-neutral-background-active);
825
+ --Button-color: var(--Button-secondary-neutral-color);
826
+ }
827
+ .wds-Button--secondary-neutral .wds-Button-icon--end {
828
+ color: var(--color-interactive-primary);
829
+ }
821
830
  .wds-Button--tertiary {
822
831
  --Button-background: var(--Button-tertiary-background);
823
832
  --Button-background-hover: var(--Button-tertiary-background-hover);
824
833
  --Button-background-active: var(--Button-tertiary-background-active);
825
834
  --Button-color: var(--Button-tertiary-color);
826
835
  }
827
- .wds-Button--tertiary .wds-Button-icon--end {
828
- color: var(--color-interactive-primary);
829
- }
830
- .wds-Button--minimal {
831
- --Button-background: var(--Button-minimal-background);
832
- --Button-background-hover: var(--Button-minimal-background-hover);
833
- --Button-background-active: var(--Button-minimal-background-active);
834
- --Button-color: var(--Button-minimal-color);
835
- }
836
- .wds-Button--minimal,
837
- .wds-Button--minimal:hover,
838
- .wds-Button--minimal:active,
839
- .wds-Button--minimal:focus {
836
+ .wds-Button--tertiary,
837
+ .wds-Button--tertiary:hover,
838
+ .wds-Button--tertiary:active,
839
+ .wds-Button--tertiary:focus {
840
840
  -webkit-text-decoration: underline;
841
841
  text-decoration: underline;
842
842
  text-underline-offset: 3px;
@@ -935,8 +935,8 @@ div.critical-comms .critical-comms-body {
935
935
  }
936
936
  .np-theme-personal:not(.np-theme-personal--dark):not(.np-theme-personal--forest-green):not(.np-theme-personal--bright-green) .wds-Button--secondary.wds-Button--negative .wds-Button-avatars .np-circle,
937
937
  .np-theme-personal:not(.np-theme-personal--dark):not(.np-theme-personal--forest-green):not(.np-theme-personal--bright-green) .wds-Button--secondary .wds-Button-avatars .np-circle,
938
- .np-theme-personal:not(.np-theme-personal--dark):not(.np-theme-personal--forest-green):not(.np-theme-personal--bright-green) .wds-Button--tertiary .wds-Button-avatars .np-circle,
939
- .np-theme-personal:not(.np-theme-personal--dark):not(.np-theme-personal--forest-green):not(.np-theme-personal--bright-green) .wds-Button--minimal .wds-Button-avatars .np-circle {
938
+ .np-theme-personal:not(.np-theme-personal--dark):not(.np-theme-personal--forest-green):not(.np-theme-personal--bright-green) .wds-Button--secondary-neutral .wds-Button-avatars .np-circle,
939
+ .np-theme-personal:not(.np-theme-personal--dark):not(.np-theme-personal--forest-green):not(.np-theme-personal--bright-green) .wds-Button--tertiary .wds-Button-avatars .np-circle {
940
940
  --circle-border-color: color-mix(in srgb, var(--Button-color) 12%, transparent);
941
941
  }
942
942
  .np-theme-personal--dark .wds-Button--primary .wds-Button-avatars .np-circle,
@@ -946,7 +946,7 @@ div.critical-comms .critical-comms-body {
946
946
  --circle-border-color: color-mix(in srgb, var(--Button-color) 12%, transparent);
947
947
  }
948
948
  .np-theme-personal--bright-green .wds-Button--tertiary .wds-Button-avatars .np-circle,
949
- .np-theme-personal--bright-green .wds-Button--minimal .wds-Button-avatars .np-circle {
949
+ .np-theme-personal--bright-green .wds-Button--secondary-neutral .wds-Button-avatars .np-circle {
950
950
  --circle-border-color: color-mix(in srgb, var(--Button-color) 12%, transparent);
951
951
  }
952
952
  [dir="rtl"] .wds-Button .tw-icon-chevron-right,[dir="rtl"] .wds-Button .tw-icon-arrow-right,[dir="rtl"] .wds-Button .tw-icon-chevron-left,[dir="rtl"] .wds-Button .tw-icon-arrow-left,[dir="rtl"] .wds-Button .tw-icon-arrow-diagonal-down,[dir="rtl"] .wds-Button .tw-icon-arrow-diagonal-up,[dir="rtl"] .wds-Button .tw-icon-list,[dir="rtl"] .wds-Button .tw-icon-activity {
package/build/types/button/Button.types.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import { AnchorHTMLAttributes, ButtonHTMLAttributes, ReactNode } from 'react';
2
2
  import type { AvatarLayoutProps } from '../avatarLayout';
3
3
  export type ButtonSentiment = 'default' | 'negative';
4
- export type ButtonPriority = 'primary' | 'secondary' | 'tertiary' | 'minimal';
4
+ export type ButtonPriority = 'primary' | 'secondary' | 'secondary-neutral' | 'tertiary';
5
5
  export type ButtonSize = 'sm' | 'md' | 'lg';
6
6
  export type ButtonReferenceType = HTMLButtonElement | HTMLAnchorElement;
7
7
  type ButtonAddonIcon = {
package/build/types/button/Button.types.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Button.types.d.ts","sourceRoot":"","sources":["../../../src/button/Button.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC9E,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAEzD,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG,UAAU,CAAC;AACrD,MAAM,MAAM,cAAc,GAAG,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,SAAS,CAAC;AAC9E,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC5C,MAAM,MAAM,mBAAmB,GAAG,iBAAiB,GAAG,iBAAiB,CAAC;AACxE,KAAK,eAAe,GAAG;IACrB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,SAAS,CAAC;CAClB,CAAC;AACF,KAAK,iBAAiB,GAAG;IACvB,IAAI,EAAE,QAAQ,CAAC;IACf,KAAK,EAAE,iBAAiB,CAAC,SAAS,CAAC,CAAC;CACrC,CAAC;AACF,KAAK,gBAAgB,GAAG,eAAe,GAAG,iBAAiB,CAAC;AAC5D,KAAK,cAAc,GAAG,eAAe,CAAC;AAEtC;;GAEG;AACH,MAAM,WAAW,WAAW;IAC1B;;;SAGK;IACL,EAAE,EAAE,IAAI,CAAC;IAET;;;QAGI;IACJ,EAAE,CAAC,EAAE,QAAQ,GAAG,GAAG,CAAC;IAEpB,sBAAsB;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,2DAA2D;IAC3D,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,qBAAqB;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,+DAA+D;IAC/D,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB;;;SAGK;IACL,IAAI,CAAC,EAAE,UAAU,CAAC;IAElB;;;OAGG;IACH,QAAQ,CAAC,EAAE,cAAc,CAAC;IAE1B;;;OAGG;IACH,SAAS,CAAC,EAAE,eAAe,CAAC;IAE5B,iDAAiD;IACjD,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAE9B,gDAAgD;IAChD,QAAQ,CAAC,EAAE,cAAc,CAAC;IAE1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,MAAM,MAAM,kBAAkB,GAAG,IAAI,CACnC,oBAAoB,CAAC,iBAAiB,CAAC,EACvC,UAAU,GAAG,WAAW,CACzB,GACC,WAAW,CAAC;AACd,MAAM,MAAM,kBAAkB,GAAG,IAAI,CACnC,oBAAoB,CAAC,iBAAiB,CAAC,EACvC,MAAM,GAAG,UAAU,GAAG,MAAM,GAAG,WAAW,CAC3C,GACC,WAAW,CAAC;AAEd,MAAM,MAAM,WAAW,GAAG,kBAAkB,GAAG,kBAAkB,CAAC"}
1
+ {"version":3,"file":"Button.types.d.ts","sourceRoot":"","sources":["../../../src/button/Button.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC9E,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAEzD,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG,UAAU,CAAC;AACrD,MAAM,MAAM,cAAc,GAAG,SAAS,GAAG,WAAW,GAAG,mBAAmB,GAAG,UAAU,CAAC;AACxF,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC5C,MAAM,MAAM,mBAAmB,GAAG,iBAAiB,GAAG,iBAAiB,CAAC;AACxE,KAAK,eAAe,GAAG;IACrB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,SAAS,CAAC;CAClB,CAAC;AACF,KAAK,iBAAiB,GAAG;IACvB,IAAI,EAAE,QAAQ,CAAC;IACf,KAAK,EAAE,iBAAiB,CAAC,SAAS,CAAC,CAAC;CACrC,CAAC;AACF,KAAK,gBAAgB,GAAG,eAAe,GAAG,iBAAiB,CAAC;AAC5D,KAAK,cAAc,GAAG,eAAe,CAAC;AAEtC;;GAEG;AACH,MAAM,WAAW,WAAW;IAC1B;;;SAGK;IACL,EAAE,EAAE,IAAI,CAAC;IAET;;;QAGI;IACJ,EAAE,CAAC,EAAE,QAAQ,GAAG,GAAG,CAAC;IAEpB,sBAAsB;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,2DAA2D;IAC3D,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,qBAAqB;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,+DAA+D;IAC/D,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB;;;SAGK;IACL,IAAI,CAAC,EAAE,UAAU,CAAC;IAElB;;;OAGG;IACH,QAAQ,CAAC,EAAE,cAAc,CAAC;IAE1B;;;OAGG;IACH,SAAS,CAAC,EAAE,eAAe,CAAC;IAE5B,iDAAiD;IACjD,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAE9B,gDAAgD;IAChD,QAAQ,CAAC,EAAE,cAAc,CAAC;IAE1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,MAAM,MAAM,kBAAkB,GAAG,IAAI,CACnC,oBAAoB,CAAC,iBAAiB,CAAC,EACvC,UAAU,GAAG,WAAW,CACzB,GACC,WAAW,CAAC;AACd,MAAM,MAAM,kBAAkB,GAAG,IAAI,CACnC,oBAAoB,CAAC,iBAAiB,CAAC,EACvC,MAAM,GAAG,UAAU,GAAG,MAAM,GAAG,WAAW,CAC3C,GACC,WAAW,CAAC;AAEd,MAAM,MAAM,WAAW,GAAG,kBAAkB,GAAG,kBAAkB,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@transferwise/components",
3
- "version": "0.0.0-experimental-3be0416",
3
+ "version": "0.0.0-experimental-05765a5",
4
4
  "description": "Neptune React components",
5
5
  "license": "Apache-2.0",
6
6
  "repository": {
@@ -92,12 +92,12 @@
92
92
  "rollup-preserve-directives": "^1.1.1",
93
93
  "storybook": "^8.2.2",
94
94
  "@transferwise/less-config": "3.1.0",
95
- "@wise/components-theming": "1.6.1",
96
- "@transferwise/neptune-css": "0.0.0-experimental-3be0416"
95
+ "@transferwise/neptune-css": "0.0.0-experimental-05765a5",
96
+ "@wise/components-theming": "1.6.1"
97
97
  },
98
98
  "peerDependencies": {
99
99
  "@transferwise/icons": "^3.13.1",
100
- "@transferwise/neptune-css": "0.0.0-experimental-3be0416",
100
+ "@transferwise/neptune-css": "0.0.0-experimental-05765a5",
101
101
  "@wise/art": "^2.16",
102
102
  "@wise/components-theming": "^1.0.0",
103
103
  "react": ">=18",
package/src/button/Button.css CHANGED
@@ -15,14 +15,14 @@
15
15
  --Button-secondary-background-hover: var(--color-interactive-neutral-hover);
16
16
  --Button-secondary-background-active: var(--color-interactive-neutral-active);
17
17
  --Button-secondary-color: var(--color-interactive-primary);
18
- --Button-tertiary-background: var(--color-background-neutral);
19
- --Button-tertiary-background-hover: var(--color-background-neutral-hover);
20
- --Button-tertiary-background-active: var(--color-background-neutral-active);
21
- --Button-tertiary-color: var(--color-content-primary);
22
- --Button-minimal-background: transparent;
23
- --Button-minimal-background-hover: var(--color-background-screen-hover);
24
- --Button-minimal-background-active: var(--color-background-screen-active);
25
- --Button-minimal-color: var(--color-interactive-primary);
18
+ --Button-secondary-neutral-background: var(--color-background-neutral);
19
+ --Button-secondary-neutral-background-hover: var(--color-background-neutral-hover);
20
+ --Button-secondary-neutral-background-active: var(--color-background-neutral-active);
21
+ --Button-secondary-neutral-color: var(--color-content-primary);
22
+ --Button-tertiary-background: transparent;
23
+ --Button-tertiary-background-hover: var(--color-background-screen-hover);
24
+ --Button-tertiary-background-active: var(--color-background-screen-active);
25
+ --Button-tertiary-color: var(--color-interactive-primary);
26
26
  --Button-primary-negative-background: var(--color-sentiment-negative-primary);
27
27
  --Button-primary-negative-background-hover: var(--color-sentiment-negative-primary-hover);
28
28
  --Button-primary-negative-background-active: var(--color-sentiment-negative-primary-active);
@@ -99,25 +99,25 @@
99
99
  --Button-background-active: var(--Button-secondary-background-active);
100
100
  --Button-color: var(--Button-secondary-color);
101
101
  }
102
+ .wds-Button--secondary-neutral {
103
+ --Button-background: var(--Button-secondary-neutral-background);
104
+ --Button-background-hover: var(--Button-secondary-neutral-background-hover);
105
+ --Button-background-active: var(--Button-secondary-neutral-background-active);
106
+ --Button-color: var(--Button-secondary-neutral-color);
107
+ }
108
+ .wds-Button--secondary-neutral .wds-Button-icon--end {
109
+ color: var(--color-interactive-primary);
110
+ }
102
111
  .wds-Button--tertiary {
103
112
  --Button-background: var(--Button-tertiary-background);
104
113
  --Button-background-hover: var(--Button-tertiary-background-hover);
105
114
  --Button-background-active: var(--Button-tertiary-background-active);
106
115
  --Button-color: var(--Button-tertiary-color);
107
116
  }
108
- .wds-Button--tertiary .wds-Button-icon--end {
109
- color: var(--color-interactive-primary);
110
- }
111
- .wds-Button--minimal {
112
- --Button-background: var(--Button-minimal-background);
113
- --Button-background-hover: var(--Button-minimal-background-hover);
114
- --Button-background-active: var(--Button-minimal-background-active);
115
- --Button-color: var(--Button-minimal-color);
116
- }
117
- .wds-Button--minimal,
118
- .wds-Button--minimal:hover,
119
- .wds-Button--minimal:active,
120
- .wds-Button--minimal:focus {
117
+ .wds-Button--tertiary,
118
+ .wds-Button--tertiary:hover,
119
+ .wds-Button--tertiary:active,
120
+ .wds-Button--tertiary:focus {
121
121
  -webkit-text-decoration: underline;
122
122
  text-decoration: underline;
123
123
  text-underline-offset: 3px;
@@ -216,8 +216,8 @@
216
216
  }
217
217
  .np-theme-personal:not(.np-theme-personal--dark):not(.np-theme-personal--forest-green):not(.np-theme-personal--bright-green) .wds-Button--secondary.wds-Button--negative .wds-Button-avatars .np-circle,
218
218
  .np-theme-personal:not(.np-theme-personal--dark):not(.np-theme-personal--forest-green):not(.np-theme-personal--bright-green) .wds-Button--secondary .wds-Button-avatars .np-circle,
219
- .np-theme-personal:not(.np-theme-personal--dark):not(.np-theme-personal--forest-green):not(.np-theme-personal--bright-green) .wds-Button--tertiary .wds-Button-avatars .np-circle,
220
- .np-theme-personal:not(.np-theme-personal--dark):not(.np-theme-personal--forest-green):not(.np-theme-personal--bright-green) .wds-Button--minimal .wds-Button-avatars .np-circle {
219
+ .np-theme-personal:not(.np-theme-personal--dark):not(.np-theme-personal--forest-green):not(.np-theme-personal--bright-green) .wds-Button--secondary-neutral .wds-Button-avatars .np-circle,
220
+ .np-theme-personal:not(.np-theme-personal--dark):not(.np-theme-personal--forest-green):not(.np-theme-personal--bright-green) .wds-Button--tertiary .wds-Button-avatars .np-circle {
221
221
  --circle-border-color: color-mix(in srgb, var(--Button-color) 12%, transparent);
222
222
  }
223
223
  .np-theme-personal--dark .wds-Button--primary .wds-Button-avatars .np-circle,
@@ -227,7 +227,7 @@
227
227
  --circle-border-color: color-mix(in srgb, var(--Button-color) 12%, transparent);
228
228
  }
229
229
  .np-theme-personal--bright-green .wds-Button--tertiary .wds-Button-avatars .np-circle,
230
- .np-theme-personal--bright-green .wds-Button--minimal .wds-Button-avatars .np-circle {
230
+ .np-theme-personal--bright-green .wds-Button--secondary-neutral .wds-Button-avatars .np-circle {
231
231
  --circle-border-color: color-mix(in srgb, var(--Button-color) 12%, transparent);
232
232
  }
233
233
  [dir="rtl"] .wds-Button .tw-icon-chevron-right,[dir="rtl"] .wds-Button .tw-icon-arrow-right,[dir="rtl"] .wds-Button .tw-icon-chevron-left,[dir="rtl"] .wds-Button .tw-icon-arrow-left,[dir="rtl"] .wds-Button .tw-icon-arrow-diagonal-down,[dir="rtl"] .wds-Button .tw-icon-arrow-diagonal-up,[dir="rtl"] .wds-Button .tw-icon-list,[dir="rtl"] .wds-Button .tw-icon-activity {
package/src/button/Button.less CHANGED
@@ -60,22 +60,22 @@
60
60
  --Button-color: var(--Button-secondary-color);
61
61
  }
62
62
 
63
- &--tertiary {
64
- --Button-background: var(--Button-tertiary-background);
65
- --Button-background-hover: var(--Button-tertiary-background-hover);
66
- --Button-background-active: var(--Button-tertiary-background-active);
67
- --Button-color: var(--Button-tertiary-color);
63
+ &--secondary-neutral {
64
+ --Button-background: var(--Button-secondary-neutral-background);
65
+ --Button-background-hover: var(--Button-secondary-neutral-background-hover);
66
+ --Button-background-active: var(--Button-secondary-neutral-background-active);
67
+ --Button-color: var(--Button-secondary-neutral-color);
68
68
 
69
69
  .wds-Button-icon--end {
70
70
  color: var(--color-interactive-primary);
71
71
  }
72
72
  }
73
73
 
74
- &--minimal {
75
- --Button-background: var(--Button-minimal-background);
76
- --Button-background-hover: var(--Button-minimal-background-hover);
77
- --Button-background-active: var(--Button-minimal-background-active);
78
- --Button-color: var(--Button-minimal-color);
74
+ &--tertiary {
75
+ --Button-background: var(--Button-tertiary-background);
76
+ --Button-background-hover: var(--Button-tertiary-background-hover);
77
+ --Button-background-active: var(--Button-tertiary-background-active);
78
+ --Button-color: var(--Button-tertiary-color);
79
79
 
80
80
  &,
81
81
  &:hover,
@@ -210,8 +210,8 @@
210
210
 
211
211
  .wds-Button--secondary.wds-Button--negative &,
212
212
  .wds-Button--secondary &,
213
- .wds-Button--tertiary &,
214
- .wds-Button--minimal & {
213
+ .wds-Button--secondary-neutral &,
214
+ .wds-Button--tertiary & {
215
215
  .np-theme-personal:not(.np-theme-personal--dark, .np-theme-personal--forest-green, .np-theme-personal--bright-green) & {
216
216
  --circle-border-color: color-mix(in srgb, var(--Button-color) 12%, transparent);
217
217
  }
@@ -224,7 +224,7 @@
224
224
  }
225
225
  }
226
226
  .wds-Button--tertiary &,
227
- .wds-Button--minimal & {
227
+ .wds-Button--secondary-neutral & {
228
228
  .np-theme-personal--bright-green & {
229
229
  --circle-border-color: color-mix(in srgb, var(--Button-color) 12%, transparent);
230
230
  }
package/src/button/Button.resolver.tsx CHANGED
@@ -11,13 +11,13 @@ const mapProps = (props: LegacyButtonProps): NewButtonProps => {
11
11
  const priorityMapping: Record<string, Record<string, NewButtonProps['priority']>> = {
12
12
  accent: {
13
13
  primary: 'primary',
14
- secondary: 'tertiary',
15
- tertiary: 'minimal',
14
+ secondary: 'secondary-neutral',
15
+ tertiary: 'tertiary',
16
16
  },
17
17
  positive: {
18
18
  primary: 'primary',
19
- secondary: 'tertiary',
20
- tertiary: 'tertiary',
19
+ secondary: 'secondary-neutral',
20
+ tertiary: 'secondary-neutral',
21
21
  },
22
22
  negative: {
23
23
  primary: 'primary',
package/src/button/Button.story.tsx CHANGED
@@ -173,7 +173,7 @@ const meta: Meta<typeof Button> = {
173
173
  priority: {
174
174
  type: {
175
175
  name: 'enum',
176
- value: ['primary', 'secondary', 'tertiary', 'minimal'],
176
+ value: ['primary', 'secondary', 'secondary-neutral', 'tertiary'],
177
177
  },
178
178
  table: {
179
179
  type: {
@@ -358,12 +358,12 @@ export const Priority: StoryObj<PreviewStoryArgs> = {
358
358
  <Button {...props} {...previewProps} v2 priority="secondary">
359
359
  Secondary Priority
360
360
  </Button>
361
+ <Button {...props} {...previewProps} v2 priority="secondary-neutral">
362
+ Secondary neutral Priority
363
+ </Button>
361
364
  <Button {...props} {...previewProps} v2 priority="tertiary">
362
365
  Tertiary Priority
363
366
  </Button>
364
- <Button {...props} {...previewProps} v2 priority="minimal">
365
- Minimal Priority
366
- </Button>
367
367
  </>
368
368
  );
369
369
  },
@@ -661,7 +661,7 @@ export const WithAvatars: StoryObj<PreviewStoryArgs> = {
661
661
  decorators: [withComponentGrid()],
662
662
  };
663
663
 
664
- const buttonPriorities = ['primary', 'secondary', 'tertiary', 'minimal'] as const;
664
+ const buttonPriorities = ['primary', 'secondary', 'secondary-neutral', 'tertiary'] as const;
665
665
  const buttonSizes = ['sm', 'md', 'lg'] as const;
666
666
 
667
667
  export const AllVariants = storyConfig(
package/src/button/Button.tests.story.tsx CHANGED
@@ -9,17 +9,17 @@ const meta: Meta<typeof Button> = {
9
9
  };
10
10
  export default meta;
11
11
 
12
- export const FocusMinimal = storyConfig(
12
+ export const FocusTertiary = storyConfig(
13
13
  {
14
14
  render: () => (
15
- <Button v2 priority="minimal">
15
+ <Button v2 priority="tertiary">
16
16
  Focus has underline
17
17
  </Button>
18
18
  ),
19
19
  },
20
20
  {},
21
21
  );
22
- FocusMinimal.play = async ({ canvasElement }) => {
22
+ FocusTertiary.play = async ({ canvasElement }) => {
23
23
  await userEvent.tab();
24
24
  const canvas = within(canvasElement);
25
25
  const buttonElement: HTMLButtonElement = canvas.getByRole('button');
package/src/button/Button.types.ts CHANGED
@@ -2,7 +2,7 @@ import { AnchorHTMLAttributes, ButtonHTMLAttributes, ReactNode } from 'react';
2
2
  import type { AvatarLayoutProps } from '../avatarLayout';
3
3
 
4
4
  export type ButtonSentiment = 'default' | 'negative';
5
- export type ButtonPriority = 'primary' | 'secondary' | 'tertiary' | 'minimal';
5
+ export type ButtonPriority = 'primary' | 'secondary' | 'secondary-neutral' | 'tertiary';
6
6
  export type ButtonSize = 'sm' | 'md' | 'lg';
7
7
  export type ButtonReferenceType = HTMLButtonElement | HTMLAnchorElement;
8
8
  type ButtonAddonIcon = {
package/src/button/Button.vars.css CHANGED
@@ -15,14 +15,14 @@
15
15
  --Button-secondary-background-hover: var(--color-interactive-neutral-hover);
16
16
  --Button-secondary-background-active: var(--color-interactive-neutral-active);
17
17
  --Button-secondary-color: var(--color-interactive-primary);
18
- --Button-tertiary-background: var(--color-background-neutral);
19
- --Button-tertiary-background-hover: var(--color-background-neutral-hover);
20
- --Button-tertiary-background-active: var(--color-background-neutral-active);
21
- --Button-tertiary-color: var(--color-content-primary);
22
- --Button-minimal-background: transparent;
23
- --Button-minimal-background-hover: var(--color-background-screen-hover);
24
- --Button-minimal-background-active: var(--color-background-screen-active);
25
- --Button-minimal-color: var(--color-interactive-primary);
18
+ --Button-secondary-neutral-background: var(--color-background-neutral);
19
+ --Button-secondary-neutral-background-hover: var(--color-background-neutral-hover);
20
+ --Button-secondary-neutral-background-active: var(--color-background-neutral-active);
21
+ --Button-secondary-neutral-color: var(--color-content-primary);
22
+ --Button-tertiary-background: transparent;
23
+ --Button-tertiary-background-hover: var(--color-background-screen-hover);
24
+ --Button-tertiary-background-active: var(--color-background-screen-active);
25
+ --Button-tertiary-color: var(--color-interactive-primary);
26
26
  --Button-primary-negative-background: var(--color-sentiment-negative-primary);
27
27
  --Button-primary-negative-background-hover: var(--color-sentiment-negative-primary-hover);
28
28
  --Button-primary-negative-background-active: var(--color-sentiment-negative-primary-active);
package/src/button/Button.vars.less CHANGED
@@ -19,15 +19,15 @@
19
19
  --Button-secondary-background-active: var(--color-interactive-neutral-active);
20
20
  --Button-secondary-color: var(--color-interactive-primary);
21
21
 
22
- --Button-tertiary-background: var(--color-background-neutral);
23
- --Button-tertiary-background-hover: var(--color-background-neutral-hover);
24
- --Button-tertiary-background-active: var(--color-background-neutral-active);
25
- --Button-tertiary-color: var(--color-content-primary);
26
-
27
- --Button-minimal-background: transparent;
28
- --Button-minimal-background-hover: var(--color-background-screen-hover);
29
- --Button-minimal-background-active: var(--color-background-screen-active);
30
- --Button-minimal-color: var(--color-interactive-primary);
22
+ --Button-secondary-neutral-background: var(--color-background-neutral);
23
+ --Button-secondary-neutral-background-hover: var(--color-background-neutral-hover);
24
+ --Button-secondary-neutral-background-active: var(--color-background-neutral-active);
25
+ --Button-secondary-neutral-color: var(--color-content-primary);
26
+
27
+ --Button-tertiary-background: transparent;
28
+ --Button-tertiary-background-hover: var(--color-background-screen-hover);
29
+ --Button-tertiary-background-active: var(--color-background-screen-active);
30
+ --Button-tertiary-color: var(--color-interactive-primary);
31
31
 
32
32
  --Button-primary-negative-background: var(--color-sentiment-negative-primary);
33
33
  --Button-primary-negative-background-hover: var(--color-sentiment-negative-primary-hover);
package/src/main.css CHANGED
@@ -734,14 +734,14 @@ div.critical-comms .critical-comms-body {
734
734
  --Button-secondary-background-hover: var(--color-interactive-neutral-hover);
735
735
  --Button-secondary-background-active: var(--color-interactive-neutral-active);
736
736
  --Button-secondary-color: var(--color-interactive-primary);
737
- --Button-tertiary-background: var(--color-background-neutral);
738
- --Button-tertiary-background-hover: var(--color-background-neutral-hover);
739
- --Button-tertiary-background-active: var(--color-background-neutral-active);
740
- --Button-tertiary-color: var(--color-content-primary);
741
- --Button-minimal-background: transparent;
742
- --Button-minimal-background-hover: var(--color-background-screen-hover);
743
- --Button-minimal-background-active: var(--color-background-screen-active);
744
- --Button-minimal-color: var(--color-interactive-primary);
737
+ --Button-secondary-neutral-background: var(--color-background-neutral);
738
+ --Button-secondary-neutral-background-hover: var(--color-background-neutral-hover);
739
+ --Button-secondary-neutral-background-active: var(--color-background-neutral-active);
740
+ --Button-secondary-neutral-color: var(--color-content-primary);
741
+ --Button-tertiary-background: transparent;
742
+ --Button-tertiary-background-hover: var(--color-background-screen-hover);
743
+ --Button-tertiary-background-active: var(--color-background-screen-active);
744
+ --Button-tertiary-color: var(--color-interactive-primary);
745
745
  --Button-primary-negative-background: var(--color-sentiment-negative-primary);
746
746
  --Button-primary-negative-background-hover: var(--color-sentiment-negative-primary-hover);
747
747
  --Button-primary-negative-background-active: var(--color-sentiment-negative-primary-active);
@@ -818,25 +818,25 @@ div.critical-comms .critical-comms-body {
818
818
  --Button-background-active: var(--Button-secondary-background-active);
819
819
  --Button-color: var(--Button-secondary-color);
820
820
  }
821
+ .wds-Button--secondary-neutral {
822
+ --Button-background: var(--Button-secondary-neutral-background);
823
+ --Button-background-hover: var(--Button-secondary-neutral-background-hover);
824
+ --Button-background-active: var(--Button-secondary-neutral-background-active);
825
+ --Button-color: var(--Button-secondary-neutral-color);
826
+ }
827
+ .wds-Button--secondary-neutral .wds-Button-icon--end {
828
+ color: var(--color-interactive-primary);
829
+ }
821
830
  .wds-Button--tertiary {
822
831
  --Button-background: var(--Button-tertiary-background);
823
832
  --Button-background-hover: var(--Button-tertiary-background-hover);
824
833
  --Button-background-active: var(--Button-tertiary-background-active);
825
834
  --Button-color: var(--Button-tertiary-color);
826
835
  }
827
- .wds-Button--tertiary .wds-Button-icon--end {
828
- color: var(--color-interactive-primary);
829
- }
830
- .wds-Button--minimal {
831
- --Button-background: var(--Button-minimal-background);
832
- --Button-background-hover: var(--Button-minimal-background-hover);
833
- --Button-background-active: var(--Button-minimal-background-active);
834
- --Button-color: var(--Button-minimal-color);
835
- }
836
- .wds-Button--minimal,
837
- .wds-Button--minimal:hover,
838
- .wds-Button--minimal:active,
839
- .wds-Button--minimal:focus {
836
+ .wds-Button--tertiary,
837
+ .wds-Button--tertiary:hover,
838
+ .wds-Button--tertiary:active,
839
+ .wds-Button--tertiary:focus {
840
840
  -webkit-text-decoration: underline;
841
841
  text-decoration: underline;
842
842
  text-underline-offset: 3px;
@@ -935,8 +935,8 @@ div.critical-comms .critical-comms-body {
935
935
  }
936
936
  .np-theme-personal:not(.np-theme-personal--dark):not(.np-theme-personal--forest-green):not(.np-theme-personal--bright-green) .wds-Button--secondary.wds-Button--negative .wds-Button-avatars .np-circle,
937
937
  .np-theme-personal:not(.np-theme-personal--dark):not(.np-theme-personal--forest-green):not(.np-theme-personal--bright-green) .wds-Button--secondary .wds-Button-avatars .np-circle,
938
- .np-theme-personal:not(.np-theme-personal--dark):not(.np-theme-personal--forest-green):not(.np-theme-personal--bright-green) .wds-Button--tertiary .wds-Button-avatars .np-circle,
939
- .np-theme-personal:not(.np-theme-personal--dark):not(.np-theme-personal--forest-green):not(.np-theme-personal--bright-green) .wds-Button--minimal .wds-Button-avatars .np-circle {
938
+ .np-theme-personal:not(.np-theme-personal--dark):not(.np-theme-personal--forest-green):not(.np-theme-personal--bright-green) .wds-Button--secondary-neutral .wds-Button-avatars .np-circle,
939
+ .np-theme-personal:not(.np-theme-personal--dark):not(.np-theme-personal--forest-green):not(.np-theme-personal--bright-green) .wds-Button--tertiary .wds-Button-avatars .np-circle {
940
940
  --circle-border-color: color-mix(in srgb, var(--Button-color) 12%, transparent);
941
941
  }
942
942
  .np-theme-personal--dark .wds-Button--primary .wds-Button-avatars .np-circle,
@@ -946,7 +946,7 @@ div.critical-comms .critical-comms-body {
946
946
  --circle-border-color: color-mix(in srgb, var(--Button-color) 12%, transparent);
947
947
  }
948
948
  .np-theme-personal--bright-green .wds-Button--tertiary .wds-Button-avatars .np-circle,
949
- .np-theme-personal--bright-green .wds-Button--minimal .wds-Button-avatars .np-circle {
949
+ .np-theme-personal--bright-green .wds-Button--secondary-neutral .wds-Button-avatars .np-circle {
950
950
  --circle-border-color: color-mix(in srgb, var(--Button-color) 12%, transparent);
951
951
  }
952
952
  [dir="rtl"] .wds-Button .tw-icon-chevron-right,[dir="rtl"] .wds-Button .tw-icon-arrow-right,[dir="rtl"] .wds-Button .tw-icon-chevron-left,[dir="rtl"] .wds-Button .tw-icon-arrow-left,[dir="rtl"] .wds-Button .tw-icon-arrow-diagonal-down,[dir="rtl"] .wds-Button .tw-icon-arrow-diagonal-up,[dir="rtl"] .wds-Button .tw-icon-list,[dir="rtl"] .wds-Button .tw-icon-activity {