@sats-group/ui-lib 79.0.1 → 79.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sats-group/ui-lib",
3
- "version": "79.0.1",
3
+ "version": "79.1.0",
4
4
  "description": "SATS web user interface library",
5
5
  "engines": {
6
6
  "node": "^18 || ^20",
@@ -20,6 +20,7 @@ const Confirmation: React.FC<React.PropsWithChildren<Props>> = ({
20
20
  text,
21
21
  title,
22
22
  ariaLabel,
23
+ actionButtonType = 'primary',
23
24
  }) => {
24
25
  useEscape(onClose);
25
26
 
@@ -53,7 +54,11 @@ const Confirmation: React.FC<React.PropsWithChildren<Props>> = ({
53
54
  {confirmationButton ? (
54
55
  <Button
55
56
  className="confirmation__button"
56
- variant={Button.variants.primary}
57
+ variant={
58
+ actionButtonType === 'primary'
59
+ ? Button.variants.primary
60
+ : Button.variants.primaryDestructive
61
+ }
57
62
  {...confirmationButton}
58
63
  onClick={onConfirm}
59
64
  />
@@ -7,6 +7,7 @@ type ConfirmationBase = {
7
7
  title?: string;
8
8
  text?: string;
9
9
  ariaLabel: string;
10
+ actionButtonType?: 'primary' | 'destructive';
10
11
  };
11
12
 
12
13
  type ConfirmationRedirect = ConfirmationBase & {
@@ -15,6 +15,7 @@
15
15
 
16
16
  &--label-position-stacked {
17
17
  flex-direction: column;
18
+ gap: spacing.$xxs;
18
19
  }
19
20
 
20
21
  // NOTE: Specificity hack
@@ -54,7 +55,7 @@
54
55
  position: relative;
55
56
  width: 100%;
56
57
  border-radius: corner-radius.$s;
57
- padding-right: spacing.$l;
58
+ padding-right: 36px; // NOTE: custom spacing to offset chevron overlap
58
59
 
59
60
  &--variant-small {
60
61
  padding-top: spacing.$xs;
@@ -41,7 +41,7 @@
41
41
  &__input {
42
42
  width: 100%;
43
43
  border: 0.5px solid light.$ge-border-default;
44
- border-radius: corner-radius.$xs;
44
+ border-radius: corner-radius.$s;
45
45
 
46
46
  font-family: font-names.$brand, sans-serif;
47
47
  font-size: 16px;
@@ -1,7 +1,9 @@
1
1
  import cn from 'classnames';
2
2
  import * as React from 'react';
3
3
 
4
+ import Text from '../text';
4
5
  import useInputValidation from '../use-input-validation';
6
+
5
7
  import { Toggle as Props } from './toggle.types';
6
8
 
7
9
  const Toggle = React.forwardRef<
@@ -38,7 +40,7 @@ const Toggle = React.forwardRef<
38
40
  >
39
41
  {isLabelVisible && labelPosition === 'left' && (
40
42
  <div className="toggle__label">
41
- {label}
43
+ <Text>{label}</Text>
42
44
  {children}
43
45
  </div>
44
46
  )}
@@ -70,7 +72,7 @@ const Toggle = React.forwardRef<
70
72
 
71
73
  {isLabelVisible && labelPosition === 'right' && (
72
74
  <div className="toggle__label">
73
- {label}
75
+ <Text>{label}</Text>
74
76
  {children}
75
77
  </div>
76
78
  )}