@linzjs/lui 21.35.1-0 → 21.36.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.
@@ -51,7 +51,6 @@
51
51
  @forward './Components/MenuV2/menu-v2.scss';
52
52
  @forward './Components/Messaging/messaging.scss';
53
53
  @forward './Components/Modal/modal.scss';
54
- @forward './Components/Modal/modal-v2.scss';
55
54
  @forward './Components/LuiUpdateSplashModal/splashModal.scss';
56
55
  @forward './Components/NavDrawer/nav-drawer.scss';
57
56
  @forward './Components/Notifications/notifications.scss';
package/package.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "version": "21.35.1-0",
2
+ "version": "21.36.0",
3
3
  "license": "MIT",
4
4
  "repository": {
5
5
  "type": "git",
@@ -1,7 +0,0 @@
1
- import { FC, PropsWithChildren } from 'react';
2
- import { LuiModalV2Props } from './LuiModalV2';
3
- export declare type LuiAlertModalLevel = 'success' | 'info' | 'warning' | 'error';
4
- export declare type LuiAlertModalV2Props = Omit<LuiModalV2Props, 'headingIcon'> & {
5
- level: LuiAlertModalLevel;
6
- };
7
- export declare const LuiAlertModalV2: FC<PropsWithChildren<LuiAlertModalV2Props>>;
@@ -1,33 +0,0 @@
1
- import React, { PropsWithChildren } from 'react';
2
- import { LuiIconProps } from '../LuiIcon/LuiIcon';
3
- export declare type LuiModalV2Props = {
4
- key?: string;
5
- /** Default `true` */
6
- shouldCloseOnOverlayClick?: boolean;
7
- /** Default `true` */
8
- shouldCloseOnEsc?: boolean | 'use-keyup';
9
- onClose?: () => void | Promise<void>;
10
- showCloseButton?: boolean;
11
- className?: string;
12
- /** If set to true, the modal will take the full screen width. Default `false` */
13
- maxWidth?: boolean;
14
- headingText?: string;
15
- headingIcon?: LuiIconProps;
16
- helpLink?: string | (() => void | Promise<void>);
17
- isLoading?: boolean;
18
- /** Sets the overlay to white. This is only to be used for situations when the user is working in a component and there is benefit to hiding the surrounding page. An example is editing types of instruments in the Dealings flow in LOL. */
19
- lowContrast?: boolean;
20
- /** By default, the modal autofocuses the first `input` or `button` inside it. Set this prop to `true` to disable that behaviour. Default `false`. This is kept from LuiModal "V1" for backwards compatibility. */
21
- preventAutoFocus?: boolean;
22
- /** By default, the modal portal will be appended to the document's body, but we might need to append it to another element. This is passed the React Modal `parentSelector` prop. */
23
- appendToElement?: () => HTMLElement;
24
- };
25
- export declare const LuiModalV2: {
26
- (props: PropsWithChildren<LuiModalV2Props>): JSX.Element;
27
- Buttons: React.FC<React.PropsWithChildren<{
28
- className?: string | undefined;
29
- }>>;
30
- HeaderTitle: React.FC<React.PropsWithChildren<{
31
- className?: string | undefined;
32
- }>>;
33
- };
@@ -1,121 +0,0 @@
1
- @use '../../Foundation/Variables/ColorVars.scss' as colors;
2
- @use '../../Foundation/Variables/FontVars.scss' as fonts;
3
- @use '../../Foundation/Variables/SpacingVars.scss' as spacing;
4
- @use '../../Foundation/Utilities' as *;
5
-
6
- .lui-modal-v2 {
7
- position: relative;
8
- max-height: 90vh;
9
- min-width: 288px;
10
- overflow: auto;
11
-
12
- @include border-radius();
13
- padding: spacing.$unit-md;
14
-
15
- background: colors.$white;
16
-
17
- display: grid;
18
- grid-template-columns: min-content 1fr min-content min-content;
19
- grid-template-rows: min-content 1fr;
20
-
21
- &:not(.lui-max-width) {
22
- width: 480px;
23
- }
24
-
25
- &-alert {
26
- border-width: 0;
27
- border-left-width: spacing.$unit-xs;
28
- border-style: solid;
29
- padding-left: spacing.$unit-rg;
30
- }
31
-
32
- &-success {
33
- border-color: colors.$success;
34
- }
35
-
36
- &-info {
37
- border-color: colors.$info;
38
- }
39
-
40
- &-warning {
41
- border-color: colors.$warning;
42
- }
43
-
44
- &-error {
45
- border-color: colors.$error;
46
- }
47
-
48
- &-header {
49
- grid-column: 1 / -1;
50
- grid-row: 1;
51
- display: grid;
52
- grid-template-columns: subgrid;
53
- grid-auto-flow: column;
54
- align-items: start;
55
- padding-bottom: spacing.$unit-rg;
56
-
57
- &:not(:has(:first-child)) {
58
- display: none;
59
- }
60
-
61
- &-spinner,
62
- &-icon {
63
- grid-column: 1;
64
- margin-right: spacing.$unit-xs;
65
- margin-top: spacing.$unit-xxs;
66
- display: inline-flex;
67
- fill: colors.$gray;
68
- }
69
-
70
- &-title {
71
- color: inherit;
72
- grid-column: 2;
73
- font-size: 1.25rem;
74
- font-weight: 400;
75
- margin: 0;
76
- padding: 0;
77
- }
78
-
79
- &-buttons {
80
- display: contents;
81
- margin-left: spacing.$unit-xs;
82
-
83
- > button {
84
- fill: colors.$gray;
85
- background-color: transparent;
86
- padding: spacing.$unit-xs;
87
- margin-top: -1 * spacing.$unit-xxs;
88
- margin-bottom: -1 * spacing.$unit-xs;
89
- display: inline-flex;
90
- align-items: center;
91
- }
92
- }
93
-
94
- &-help-btn {
95
- grid-column: 3;
96
- }
97
-
98
- &-close-btn {
99
- grid-column: 4;
100
- }
101
- }
102
-
103
- &-contents {
104
- grid-column: 1 / -1;
105
-
106
- > p:first-child {
107
- // this is a bit of a hacky "reset" due to 1) our <p>s having a very opinionated margin-top and 2) <p> being a very common first child of <LuiModalV2>... ideally we'd fix 1 or the consumers would do this reset themselves but I reckong having this reset in the modal css is the least painful option at the moment
108
- margin-top: 0;
109
- }
110
- }
111
-
112
- &-btn-row {
113
- margin-top: spacing.$unit-md;
114
- display: flex;
115
-
116
- > button {
117
- flex-grow: 1;
118
- flex-basis: 0;
119
- }
120
- }
121
- }