@equinor/amplify-component-lib 8.4.7 → 8.4.9
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/dist/atoms/style/colors.d.ts +2 -0
- package/dist/atoms/style/colors.js +1 -1
- package/dist/atoms/types/variants.d.ts +1 -0
- package/dist/molecules/ApplicationIcon/ApplicationIcon.d.ts +1 -1
- package/dist/molecules/ApplicationIcon/ApplicationIcon.js +1 -1
- package/dist/molecules/InfoElement/InfoElement.d.ts +4 -4
- package/dist/molecules/Select/Select.styles.d.ts +1 -2
- package/dist/molecules/Select/Select.styles.js +55 -33
- package/dist/molecules/Select/Select.types.d.ts +1 -1
- package/dist/molecules/Sieve/Sieve.styles.js +20 -16
- package/dist/molecules/TextField/TextField.d.ts +7 -2
- package/dist/molecules/TextField/TextField.js +51 -3
- package/dist/organisms/FieldSelector/FieldSelector.js +5 -6
- package/dist/organisms/FieldSelector/SelectorCard/SelectorCard.js +15 -26
- package/package.json +1 -1
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { Variants } from '../types/variants';
|
|
1
2
|
export declare const colors: {
|
|
2
3
|
readonly dataviz: {
|
|
3
4
|
readonly darkblue: {
|
|
@@ -447,3 +448,4 @@ export declare const colors: {
|
|
|
447
448
|
};
|
|
448
449
|
};
|
|
449
450
|
};
|
|
451
|
+
export declare const VARIANT_COLORS: Record<Variants, string>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{tokens as a}from"../../node_modules/@equinor/eds-tokens/dist/esm/base/index.js";const{colors:r}=a,
|
|
1
|
+
import{tokens as a}from"../../node_modules/@equinor/eds-tokens/dist/esm/base/index.js";const{colors:r}=a,i={...r,dataviz:{darkblue:{default:"var(--amplify_dataviz_darkblue_default, rgba(0, 71, 153, 1))",darker:"var(--amplify_dataviz_darkblue_darker, rgba(4, 48, 98, 1))",lighter:"var(--amplify_dataviz_darkblue_lighter, rgba(191, 220, 252, 1))"},lightblue:{default:"var(--amplify_dataviz_lightblue_default, rgba(133, 208, 250, 1))",darker:"var(--amplify_dataviz_lightblue_darker, rgba(35, 170, 246, 1))",lighter:"var(--amplify_dataviz_lightblue_lighter, rgba(211, 238, 253, 1))"},lightgreen:{default:"var(--amplify_dataviz_lightgreen_default, rgba(10, 194, 154, 1))",darker:"var(--amplify_dataviz_lightgreen_darker, rgba(8, 145, 115, 1))",lighter:"var(--amplify_dataviz_lightgreen_lighter, rgba(220, 241, 236, 1))"},darkgreen:{default:"var(--amplify_dataviz_darkgreen_default, rgba(0, 102, 76, 1))",darker:"var(--amplify_dataviz_darkgreen_darker, rgba(0, 61, 46, 1))",lighter:"var(--amplify_dataviz_darkgreen_lighter, rgba(200, 237, 227, 1))"},darkpink:{default:"var(--amplify_dataviz_darkpink_default, rgba(169, 30, 88, 1))",darker:"var(--amplify_dataviz_darkpink_darker, rgba(135, 18, 67, 1))",lighter:"var(--amplify_dataviz_darkpink_lighter, rgba(252, 212, 229, 1))"},lightpink:{default:"var(--amplify_dataviz_lightpink_default, rgba(255, 128, 138, 1))",darker:"var(--amplify_dataviz_lightpink_darker, rgba(225, 81, 93, 1))",lighter:"var(--amplify_dataviz_lightpink_lighter, rgba(255, 219, 222, 1))"},darkyellow:{default:"var(--amplify_dataviz_darkyellow_default, rgba(160, 112, 28, 1))",darker:"var(--amplify_dataviz_darkyellow_darker, rgba(121, 85, 21, 1))",lighter:"var(--amplify_dataviz_darkyellow_lighter, rgba(244, 226, 195, 1))"},lightyellow:{default:"var(--amplify_dataviz_lightyellow_default, rgba(253, 203, 53, 1))",darker:"var(--amplify_dataviz_lightyellow_darker, rgba(227, 171, 2, 1))",lighter:"var(--amplify_dataviz_lightyellow_lighter, rgba(255, 240, 194, 1))"},darkpurple:{default:"var(--amplify_dataviz_darkpurple_default, rgba(147, 20, 219, 1))",darker:"var(--amplify_dataviz_darkpurple_darker, rgba(97, 1, 152, 1))",lighter:"var(--amplify_dataviz_darkpurple_lighter, rgba(232, 209, 246, 1))"},lightpurple:{default:"var(--amplify_dataviz_lightpurple_default, rgba(186, 153, 255, 1))",darker:"var(--amplify_dataviz_lightpurple_darker, rgba(155, 89, 242, 1))",lighter:"var(--amplify_dataviz_lightpurple_lighter, rgba(234, 224, 255, 1))"},darkgray:{default:"var(--amplify_dataviz_darkgray_default, rgba(122, 122, 122,1))",darker:"var(--amplify-dataviz_darkgray_darker, rgba(86, 86, 86,1))",lighter:"var(--amplify-dataviz_darkgray_lighter, rgba(173, 173, 173, 1))"},lightgray:{default:"var(--amplify_dataviz_lightgray_default, rgba(144, 155, 162, 1))",darker:"var(--amplify_dataviz_lightgray_darker, rgba(91, 102, 108, 1))",lighter:"var(--amplify_dataviz_lightgray_lighter, rgba(194, 200, 204, 1))"}}},l={warning:i.interactive.warning__resting.rgba,error:i.interactive.danger__resting.rgba,success:i.interactive.success__resting.rgba,dirty:i.infographic.substitute__blue_ocean.rgba};export{l as VARIANT_COLORS,i as colors};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export type Variants = 'error' | 'warning' | 'success' | 'dirty';
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { FC } from 'react';
|
|
2
2
|
export type ApplicationName = 'amplify' | 'bravos' | 'embark' | 'premo' | 'inpress' | 'dasha' | 'orca' | 'acquire' | 'pwex' | 'ltg' | 'equinor' | 'recap';
|
|
3
3
|
export interface ApplicationIconProps {
|
|
4
|
-
name
|
|
4
|
+
name?: ApplicationName | string;
|
|
5
5
|
size?: number;
|
|
6
6
|
animationState?: 'none' | 'hoverable' | 'animated' | 'loading';
|
|
7
7
|
iconOnly?: boolean;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as a}from"react/jsx-runtime";import{amplify as o,bravos as t,embark as r,premo as n,dasha as i,acquire as e,orca as p,pwex as c,ltg as l,recap as g,inpress as m,equinor as s,fallback as v}from"./ApplicationIconData/ApplicationIconCollection.js";import{ApplicationIconBase as S}from"./ApplicationIconBase.js";const h={amplify:{appName:"amplify",iconSvg:o.svgPathData,rotationVariant:1,color:"blue"},bravos:{appName:"bravos",iconSvg:t.svgPathData,rotationVariant:2,color:"blue"},embark:{appName:"embark",iconSvg:r.svgPathData,rotationVariant:2,color:"green"},premo:{appName:"premo",iconSvg:n.svgPathData,rotationVariant:3,color:"purple"},dasha:{appName:"dasha",iconSvg:i.svgPathData,rotationVariant:0,color:"red"},acquire:{appName:"acquire",iconSvg:e.svgPathData,rotationVariant:1,color:"yellow"},orca:{appName:"orca",iconSvg:p.svgPathData,rotationVariant:2,color:"magenta"},pwex:{appName:"pwex",iconSvg:c.svgPathData,rotationVariant:3,color:"blue"},ltg:{appName:"ltg",iconSvg:l.svgPathData,rotationVariant:0,color:"green"},recap:{appName:"recap",iconSvg:g.svgPathData,rotationVariant:2,color:"red"},inpress:{appName:"inpress",iconSvg:m.svgPathData,rotationVariant:1,color:"green"},equinor:{appName:"equinor",iconSvg:s.svgPathData,rotationVariant:1,color:"purple"}},D={appName:"fallback",iconSvg:v.svgPathData,rotationVariant:2,color:"blue"},V=({name:o="amplify",size:t=64,animationState:r="none",iconOnly:n=!1})=>{let i=h[o];i||(i=D);const{iconSvg:e}=i;return a(S,{size:t,color:i.color,rotationVariant:i.rotationVariant,animationState:r,appIconData:e,iconOnly:n})};V.displayName="ApplicationIcon";export{V as ApplicationIcon};
|
|
1
|
+
import{jsx as a}from"react/jsx-runtime";import{amplify as o,bravos as t,embark as r,premo as n,dasha as i,acquire as e,orca as p,pwex as c,ltg as l,recap as g,inpress as m,equinor as s,fallback as v}from"./ApplicationIconData/ApplicationIconCollection.js";import{ApplicationIconBase as S}from"./ApplicationIconBase.js";const h={amplify:{appName:"amplify",iconSvg:o.svgPathData,rotationVariant:1,color:"blue"},bravos:{appName:"bravos",iconSvg:t.svgPathData,rotationVariant:2,color:"blue"},embark:{appName:"embark",iconSvg:r.svgPathData,rotationVariant:2,color:"green"},premo:{appName:"premo",iconSvg:n.svgPathData,rotationVariant:3,color:"purple"},dasha:{appName:"dasha",iconSvg:i.svgPathData,rotationVariant:0,color:"red"},acquire:{appName:"acquire",iconSvg:e.svgPathData,rotationVariant:1,color:"yellow"},orca:{appName:"orca",iconSvg:p.svgPathData,rotationVariant:2,color:"magenta"},pwex:{appName:"pwex",iconSvg:c.svgPathData,rotationVariant:3,color:"blue"},ltg:{appName:"ltg",iconSvg:l.svgPathData,rotationVariant:0,color:"green"},recap:{appName:"recap",iconSvg:g.svgPathData,rotationVariant:2,color:"red"},inpress:{appName:"inpress",iconSvg:m.svgPathData,rotationVariant:1,color:"green"},equinor:{appName:"equinor",iconSvg:s.svgPathData,rotationVariant:1,color:"purple"}},D={appName:"fallback",iconSvg:v.svgPathData,rotationVariant:2,color:"blue"},V=({name:o="amplify",size:t=64,animationState:r="none",iconOnly:n=!1})=>{let i=h[o.toLowerCase()];i||(i=D);const{iconSvg:e}=i;return a(S,{size:t,color:i.color,rotationVariant:i.rotationVariant,animationState:r,appIconData:e,iconOnly:n})};V.displayName="ApplicationIcon";export{V as ApplicationIcon};
|
|
@@ -9,13 +9,13 @@ export interface InfoElementProps {
|
|
|
9
9
|
*/
|
|
10
10
|
interface TextInfoElementProps extends InfoElementProps {
|
|
11
11
|
content: string;
|
|
12
|
-
copyableContent?:
|
|
13
|
-
capitalizeContent?:
|
|
12
|
+
copyableContent?: boolean;
|
|
13
|
+
capitalizeContent?: boolean;
|
|
14
14
|
}
|
|
15
15
|
interface CustomInfoElementProps extends InfoElementProps {
|
|
16
16
|
content: ReactElement;
|
|
17
|
-
copyableContent?:
|
|
18
|
-
capitalizeContent?:
|
|
17
|
+
copyableContent?: false;
|
|
18
|
+
capitalizeContent?: false;
|
|
19
19
|
}
|
|
20
20
|
export declare const InfoElement: React.ForwardRefExoticComponent<(TextInfoElementProps | CustomInfoElementProps) & React.RefAttributes<HTMLDivElement>>;
|
|
21
21
|
export {};
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import { Button } from '@equinor/eds-core-react';
|
|
2
|
-
import { Variants } from '
|
|
3
|
-
export declare const VARIANT_COLORS: Record<Variants, string>;
|
|
2
|
+
import { Variants } from '../../atoms/types/variants';
|
|
4
3
|
interface ContainerProps {
|
|
5
4
|
$lightBackground?: boolean;
|
|
6
5
|
$variant?: Variants;
|
|
@@ -1,19 +1,41 @@
|
|
|
1
|
-
import{Button as
|
|
1
|
+
import{Button as t,Menu as e,Typography as r}from"@equinor/eds-core-react";export{Button}from"@equinor/eds-core-react";import{colors as o,VARIANT_COLORS as a}from"../../atoms/style/colors.js";import{spacings as i}from"../../atoms/style/spacings.js";import{Chip as n}from"../Chip/Chip.js";import s,{css as l}from"styled-components";const d=s.div`
|
|
2
2
|
position: relative;
|
|
3
3
|
display: grid;
|
|
4
4
|
grid-template-columns: 1fr auto;
|
|
5
5
|
align-items: center;
|
|
6
6
|
padding: 6px 8px;
|
|
7
|
+
&:hover:not(:has(input:disabled)) {
|
|
8
|
+
cursor: pointer;
|
|
9
|
+
}
|
|
7
10
|
|
|
8
|
-
${({$variant:
|
|
11
|
+
${({$variant:t})=>t?"dirty"===t?l`
|
|
12
|
+
box-shadow: inset 0 -2px 0 0 ${a[t]};
|
|
13
|
+
&:hover {
|
|
14
|
+
box-shadow: inset 0 -2px 0 0 ${a[t]};
|
|
15
|
+
}
|
|
16
|
+
`:l`
|
|
17
|
+
outline: 1px solid ${a[t]};
|
|
18
|
+
&:hover {
|
|
19
|
+
box-shadow: inset 0 -1px 0 0 ${a[t]};
|
|
20
|
+
}
|
|
21
|
+
`:l`
|
|
22
|
+
box-shadow: inset 0 -1px 0 0 ${o.text.static_icons__tertiary.rgba};
|
|
23
|
+
&:hover {
|
|
24
|
+
box-shadow: inset 0 -2px 0 0 ${o.text.static_icons__tertiary.rgba};
|
|
25
|
+
}
|
|
26
|
+
`}
|
|
9
27
|
|
|
10
|
-
${({$lightBackground:
|
|
28
|
+
${({$lightBackground:t})=>t?`background-color: ${o.ui.background__default.rgba}`:`background-color: ${o.ui.background__light.rgba}`};
|
|
11
29
|
|
|
12
30
|
&[aria-expanded='true'] {
|
|
13
|
-
box-shadow: inset 0 -2px 0 0 ${
|
|
31
|
+
box-shadow: inset 0 -2px 0 0 ${o.interactive.primary__resting.rgba};
|
|
32
|
+
}
|
|
33
|
+
&:has(input:disabled) {
|
|
34
|
+
outline: none;
|
|
35
|
+
box-shadow: none;
|
|
14
36
|
}
|
|
15
37
|
|
|
16
|
-
${({$shouldShowTopMargin:
|
|
38
|
+
${({$shouldShowTopMargin:t})=>t&&"margin-top: 1rem;"};
|
|
17
39
|
|
|
18
40
|
> label {
|
|
19
41
|
left: 0;
|
|
@@ -28,7 +50,7 @@ import{Button as r,Menu as e,Typography as t}from"@equinor/eds-core-react";expor
|
|
|
28
50
|
> svg:not([role='progressbar']) {
|
|
29
51
|
cursor: pointer;
|
|
30
52
|
&:hover {
|
|
31
|
-
background: ${
|
|
53
|
+
background: ${o.interactive.primary__hover_alt.rgba};
|
|
32
54
|
border-radius: 50%;
|
|
33
55
|
}
|
|
34
56
|
}
|
|
@@ -38,16 +60,16 @@ import{Button as r,Menu as e,Typography as t}from"@equinor/eds-core-react";expor
|
|
|
38
60
|
box-shadow: none;
|
|
39
61
|
> svg:not([role='progressbar']) {
|
|
40
62
|
cursor: not-allowed;
|
|
41
|
-
fill: ${
|
|
63
|
+
fill: ${o.interactive.disabled__text.rgba};
|
|
42
64
|
&:hover {
|
|
43
65
|
background: transparent;
|
|
44
66
|
}
|
|
45
67
|
}
|
|
46
68
|
> label {
|
|
47
|
-
color: ${
|
|
69
|
+
color: ${o.interactive.disabled__text.rgba};
|
|
48
70
|
}
|
|
49
71
|
}
|
|
50
|
-
`,c=
|
|
72
|
+
`,c=s.section`
|
|
51
73
|
position: relative;
|
|
52
74
|
display: flex;
|
|
53
75
|
flex-wrap: wrap;
|
|
@@ -59,7 +81,7 @@ import{Button as r,Menu as e,Typography as t}from"@equinor/eds-core-react";expor
|
|
|
59
81
|
flex-grow: 1;
|
|
60
82
|
padding: 0;
|
|
61
83
|
font-family: 'Equinor', sans-serif;
|
|
62
|
-
color: ${
|
|
84
|
+
color: ${o.text.static_icons__default.rgba};
|
|
63
85
|
outline: none;
|
|
64
86
|
border: none;
|
|
65
87
|
}
|
|
@@ -74,14 +96,14 @@ import{Button as r,Menu as e,Typography as t}from"@equinor/eds-core-react";expor
|
|
|
74
96
|
}
|
|
75
97
|
&:has(input:disabled) {
|
|
76
98
|
> p {
|
|
77
|
-
color: ${
|
|
99
|
+
color: ${o.interactive.disabled__text.rgba};
|
|
78
100
|
}
|
|
79
101
|
> .amplify-combo-box-chip {
|
|
80
102
|
cursor: not-allowed;
|
|
81
|
-
background: ${
|
|
82
|
-
color: ${
|
|
103
|
+
background: ${o.interactive.disabled__fill.rgba};
|
|
104
|
+
color: ${o.interactive.disabled__text.rgba};
|
|
83
105
|
> svg {
|
|
84
|
-
fill: ${
|
|
106
|
+
fill: ${o.interactive.disabled__text.rgba};
|
|
85
107
|
&:hover {
|
|
86
108
|
cursor: not-allowed;
|
|
87
109
|
background: none;
|
|
@@ -89,27 +111,27 @@ import{Button as r,Menu as e,Typography as t}from"@equinor/eds-core-react";expor
|
|
|
89
111
|
}
|
|
90
112
|
}
|
|
91
113
|
}
|
|
92
|
-
`,
|
|
114
|
+
`,p=s(t)`
|
|
93
115
|
position: absolute;
|
|
94
116
|
top: 50%;
|
|
95
117
|
transform: translate(0, -50%);
|
|
96
|
-
right:
|
|
118
|
+
right: 32px;
|
|
97
119
|
width: 24px;
|
|
98
120
|
height: 24px;
|
|
99
121
|
svg {
|
|
100
|
-
fill: ${
|
|
122
|
+
fill: ${o.text.static_icons__secondary.rgba};
|
|
101
123
|
}
|
|
102
124
|
&:after {
|
|
103
125
|
width: 24px;
|
|
104
126
|
height: 24px;
|
|
105
127
|
left: 0;
|
|
106
128
|
}
|
|
107
|
-
`,g=n
|
|
108
|
-
background: ${({$tryingToRemove:
|
|
109
|
-
`,
|
|
129
|
+
`,g=s(n)`
|
|
130
|
+
background: ${({$tryingToRemove:t,$lightBackground:e})=>t?o.interactive.primary__hover_alt.rgba:e?o.ui.background__light.rgba:o.ui.background__default.rgba} !important;
|
|
131
|
+
`,b=s(e.Item)`
|
|
110
132
|
flex-grow: 1;
|
|
111
133
|
border-radius: 2px;
|
|
112
|
-
${({$paddedLeft:
|
|
134
|
+
${({$paddedLeft:t})=>t&&"margin-left: 36px"};
|
|
113
135
|
padding-left: 10px;
|
|
114
136
|
|
|
115
137
|
&:hover {
|
|
@@ -118,33 +140,33 @@ import{Button as r,Menu as e,Typography as t}from"@equinor/eds-core-react";expor
|
|
|
118
140
|
|
|
119
141
|
&:focus {
|
|
120
142
|
outline: none;
|
|
121
|
-
background: ${
|
|
143
|
+
background: ${o.interactive.primary__hover_alt.rgba};
|
|
122
144
|
}
|
|
123
145
|
|
|
124
146
|
&:focus-visible {
|
|
125
|
-
background: ${
|
|
147
|
+
background: ${o.interactive.primary__hover_alt.rgba};
|
|
126
148
|
}
|
|
127
|
-
`,
|
|
149
|
+
`,u=s.hr`
|
|
128
150
|
height: calc(100% + ${i.medium} * 2);
|
|
129
151
|
justify-self: center;
|
|
130
152
|
width: ${i.x_large};
|
|
131
|
-
`,
|
|
153
|
+
`,h=s(r)`
|
|
132
154
|
position: absolute;
|
|
133
|
-
color: ${
|
|
155
|
+
color: ${o.text.static_icons__tertiary.rgba};
|
|
134
156
|
top: calc(50%);
|
|
135
157
|
transform: translate(0, -50%);
|
|
136
|
-
`,_=
|
|
137
|
-
color: ${
|
|
138
|
-
`,
|
|
158
|
+
`,_=s(h)`
|
|
159
|
+
color: ${o.text.static_icons__default.rgba};
|
|
160
|
+
`,x=s(r)`
|
|
139
161
|
margin-left: ${i.medium};
|
|
140
|
-
`,m=
|
|
162
|
+
`,m=s(e)`
|
|
141
163
|
max-height: 20rem;
|
|
142
164
|
overflow: auto;
|
|
143
|
-
`,
|
|
165
|
+
`,f=s.div`
|
|
144
166
|
display: flex;
|
|
145
167
|
align-items: center;
|
|
146
168
|
padding: 0 ${i.small};
|
|
147
|
-
|
|
169
|
+
`,$=s(t)`
|
|
148
170
|
width: 36px;
|
|
149
171
|
height: 36px;
|
|
150
|
-
`;export{
|
|
172
|
+
`;export{p as ClearButton,d as Container,u as MenuItemSpacer,f as MenuItemWrapper,x as NoItemsFoundText,h as PlaceholderText,c as Section,$ as SmallButton,g as StyledChip,m as StyledMenu,b as StyledMenuItem,_ as ValueText};
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { KeyboardEvent, MutableRefObject } from 'react';
|
|
2
|
+
import { Variants } from '../../atoms/types/variants';
|
|
2
3
|
export interface SelectOptionRequired {
|
|
3
4
|
value: string;
|
|
4
5
|
label: string;
|
|
@@ -51,7 +52,6 @@ export type MultiSelectMenuItemProps<T extends SelectOptionRequired> = {
|
|
|
51
52
|
multiselect: true;
|
|
52
53
|
values: SelectOption<T>[];
|
|
53
54
|
} & Omit<SelectMenuProps<T>, 'search'> & SelectMenuItemProps<T>;
|
|
54
|
-
export type Variants = 'error' | 'warning' | 'success' | 'dirty';
|
|
55
55
|
export declare const VARIANT_OPTIONS: Variants[];
|
|
56
56
|
export interface CommonSelectProps {
|
|
57
57
|
id?: string;
|
|
@@ -1,32 +1,36 @@
|
|
|
1
|
-
import{Chip as
|
|
1
|
+
import{Chip as t,Search as o,Menu as i}from"@equinor/eds-core-react";import{colors as a}from"../../atoms/style/colors.js";import{spacings as e}from"../../atoms/style/spacings.js";import r from"styled-components";const n=r.div`
|
|
2
2
|
display: flex;
|
|
3
3
|
flex-direction: column;
|
|
4
|
-
gap: ${
|
|
4
|
+
gap: ${e.medium};
|
|
5
5
|
`,s=r.div`
|
|
6
6
|
display: flex;
|
|
7
|
-
gap: ${
|
|
7
|
+
gap: ${e.medium};
|
|
8
8
|
align-items: center;
|
|
9
|
-
`,
|
|
10
|
-
color: ${
|
|
11
|
-
background: ${
|
|
12
|
-
border: 1px solid ${
|
|
9
|
+
`,c=r(t)`
|
|
10
|
+
color: ${a.text.static_icons__default.rgba};
|
|
11
|
+
background: ${a.ui.background__light.rgba};
|
|
12
|
+
border: 1px solid ${a.ui.background__medium.rgba};
|
|
13
13
|
line-height: normal;
|
|
14
14
|
transition: background 0.15s ease-in;
|
|
15
15
|
|
|
16
16
|
svg {
|
|
17
17
|
z-index: auto;
|
|
18
|
-
fill: ${
|
|
18
|
+
fill: ${a.text.static_icons__default.rgba};
|
|
19
19
|
}
|
|
20
|
-
`,
|
|
20
|
+
`,d=r(o)`
|
|
21
21
|
> div {
|
|
22
22
|
box-shadow: none;
|
|
23
23
|
outline: none !important;
|
|
24
|
-
background: ${
|
|
24
|
+
background: ${a.ui.background__default.rgba};
|
|
25
25
|
> input {
|
|
26
|
-
color: ${
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
26
|
+
color: ${a.text.static_icons__default.rgba};
|
|
27
|
+
box-shadow: inset 0 -1px 0 0 ${a.text.static_icons__tertiary.rgba};
|
|
28
|
+
&:hover {
|
|
29
|
+
box-shadow: inset 0 -2px 0 0 ${a.text.static_icons__tertiary.rgba};
|
|
30
|
+
}
|
|
31
|
+
&:focus {
|
|
32
|
+
box-shadow: inset 0 -2px 0 0 ${a.interactive.primary__resting.rgba};
|
|
33
|
+
}
|
|
30
34
|
}
|
|
31
35
|
}
|
|
32
36
|
`,l=r(i.Item)`
|
|
@@ -34,6 +38,6 @@ import{Chip as o,Search as t,Menu as i}from"@equinor/eds-core-react";import{colo
|
|
|
34
38
|
> div {
|
|
35
39
|
grid-template-columns: 1fr auto;
|
|
36
40
|
}
|
|
37
|
-
`,
|
|
41
|
+
`,m=r(t)`
|
|
38
42
|
background: none;
|
|
39
|
-
`;export{
|
|
43
|
+
`;export{m as Chip,s as Container,c as FilterChip,l as MenuItem,d as Search,n as Wrapper};
|
|
@@ -1,3 +1,8 @@
|
|
|
1
|
-
import { FC } from 'react';
|
|
2
|
-
import { TextFieldProps } from '@equinor/eds-core-react';
|
|
1
|
+
import { FC, InputHTMLAttributes, TextareaHTMLAttributes } from 'react';
|
|
2
|
+
import { TextFieldProps as BaseProps } from '@equinor/eds-core-react';
|
|
3
|
+
import { Variants } from '../../atoms/types/variants';
|
|
4
|
+
type TextFieldProps = Omit<BaseProps, 'variant'> & {
|
|
5
|
+
variant?: Variants;
|
|
6
|
+
} & (TextareaHTMLAttributes<HTMLTextAreaElement> | InputHTMLAttributes<HTMLInputElement>);
|
|
3
7
|
export declare const TextField: FC<TextFieldProps>;
|
|
8
|
+
export {};
|
|
@@ -1,3 +1,51 @@
|
|
|
1
|
-
import{jsx as t}from"react/jsx-runtime";import{TextField as
|
|
2
|
-
|
|
3
|
-
|
|
1
|
+
import{jsx as t}from"react/jsx-runtime";import{TextField as i}from"@equinor/eds-core-react";import{colors as e,VARIANT_COLORS as r}from"../../atoms/style/colors.js";import o,{css as a}from"styled-components";const n=o.div`
|
|
2
|
+
input,
|
|
3
|
+
textarea {
|
|
4
|
+
color: ${e.text.static_icons__default.rgba};
|
|
5
|
+
}
|
|
6
|
+
div:focus-within {
|
|
7
|
+
outline: none !important;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
${({$variant:t,$disabled:i})=>i?a`
|
|
11
|
+
div {
|
|
12
|
+
outline: none !important;
|
|
13
|
+
}
|
|
14
|
+
p {
|
|
15
|
+
color: ${e.interactive.disabled__text.rgba} !important;
|
|
16
|
+
}
|
|
17
|
+
`:void 0===t?a`
|
|
18
|
+
input:hover,
|
|
19
|
+
textarea:hover {
|
|
20
|
+
box-shadow: inset 0 -2px 0 0 ${e.text.static_icons__tertiary.rgba};
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
div:focus-within {
|
|
24
|
+
input,
|
|
25
|
+
textarea {
|
|
26
|
+
box-shadow: inset 0 -2px 0 0 ${e.interactive.primary__resting.rgba};
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
`:a`
|
|
30
|
+
${"dirty"===t&&a`
|
|
31
|
+
input,
|
|
32
|
+
textarea {
|
|
33
|
+
box-shadow: inset 0 -2px 0 0 ${r[t]};
|
|
34
|
+
}
|
|
35
|
+
`}
|
|
36
|
+
|
|
37
|
+
input:hover,
|
|
38
|
+
textarea:hover {
|
|
39
|
+
box-shadow: inset 0 -${"dirty"===t?2:1}px 0 0 ${r[t]};
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
div:focus-within {
|
|
43
|
+
outline: none !important;
|
|
44
|
+
|
|
45
|
+
input,
|
|
46
|
+
textarea {
|
|
47
|
+
box-shadow: inset 0 -2px 0 0 ${r[t]};
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
`}
|
|
51
|
+
`,s=e=>{const r={...e,variant:"dirty"!==e.variant?e.variant:void 0};return t(n,{$variant:e.variant,$disabled:e.disabled,children:t(i,{...r})})};export{s as TextField};
|
|
@@ -1,15 +1,14 @@
|
|
|
1
|
-
import{jsx as e,jsxs as o}from"react/jsx-runtime";import{useState as i,useRef as r}from"react";import{tokens as n}from"../../node_modules/@equinor/eds-tokens/dist/esm/base/index.js";import{SelectorCard as t}from"./SelectorCard/SelectorCard.js";import{SelectorSkeleton as d}from"./SelectorCard/Skeleton.js";import{ChangingField as s}from"./ChangingField.js";import{Waves as
|
|
2
|
-
margin-top: auto;
|
|
1
|
+
import{jsx as e,jsxs as o}from"react/jsx-runtime";import{useState as i,useRef as r}from"react";import{tokens as n}from"../../node_modules/@equinor/eds-tokens/dist/esm/base/index.js";import{SelectorCard as t}from"./SelectorCard/SelectorCard.js";import{SelectorSkeleton as d}from"./SelectorCard/Skeleton.js";import{ChangingField as s}from"./ChangingField.js";import{Waves as c}from"../../molecules/Waves/Waves.js";import l from"styled-components";const{colors:a}=n,m=l.div`
|
|
3
2
|
> svg {
|
|
4
3
|
margin-bottom: -10px;
|
|
5
|
-
background-color: ${
|
|
4
|
+
background-color: ${a.ui.background__light.rgba};
|
|
6
5
|
}
|
|
7
|
-
`,u=
|
|
8
|
-
background-color: ${
|
|
6
|
+
`,u=l.div`
|
|
7
|
+
background-color: ${a.ui.background__light.rgba};
|
|
9
8
|
overflow: hidden;
|
|
10
9
|
display: flex;
|
|
11
10
|
flex-direction: column;
|
|
12
11
|
height: calc(100vh - 64px);
|
|
13
12
|
max-height: calc(100vh - 64px);
|
|
14
13
|
width: 100vw;
|
|
15
|
-
`,h=({setField:n,fields:
|
|
14
|
+
`,h=({setField:n,fields:l,isLoading:a,onChangedField:h,finishedText:g,showAccessITLink:f=!0})=>{const[p,x]=i(!1),v=r("");return p?e(s,{fieldName:v.current,onChangedField:h,finishedText:g}):o(u,{className:"select-field",children:[e(m,{children:e(c,{})}),a?e(d,{}):e(t,{availableFields:l,onSelect:e=>{e.name&&e.uuid&&(n({uuid:e.uuid,name:e.name,country:e.country??""}),v.current=e.name,x(!0))},showAccessITLink:f})]})};export{h as FieldSelector};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{jsxs as e,jsx as
|
|
1
|
+
import{jsxs as e,jsx as o}from"react/jsx-runtime";import{useState as i,useMemo as t}from"react";import{Card as r,Typography as s,Button as l,Icon as n}from"@equinor/eds-core-react";import{arrow_forward as a}from"@equinor/eds-icons";import{tokens as m}from"../../../node_modules/@equinor/eds-tokens/dist/esm/base/index.js";import"../../../atoms/style/colors.js";import{spacings as c}from"../../../atoms/style/spacings.js";import"../../../molecules/AnimatedCheckmark/AnimatedCheckmark.styles.js";import"../../../molecules/ApplicationIcon/ApplicationIcon.js";import"../../../molecules/Badge/Badge.styles.js";import"../../../molecules/Banner/Banner.styles.js";import"../../../molecules/Chip/Chip.js";import"../../../molecules/ContentMenu/ContentMenu.js";import"../../../molecules/EquinorLogo/EquinorLogo.js";import"../../../molecules/FileProgress/CompactFileProgress.styles.js";import"../../../molecules/RichTextEditor/custom-extensions/AmplifyKit.js";import"../../../molecules/RichTextEditor/RichTextEditor.types.js";import"../../../node_modules/lodash/lodash.js";import"@equinor/subsurface-app-management";import"@tanstack/react-query";import"../../../atoms/utils/auth_environment.js";import"@microsoft/signalr";import"../../../atoms/enums/Environment.js";import"../../TopBar/Notifications/NotificationProvider.js";import"../../../providers/AuthProvider/AuthProvider.js";import"../../../providers/SideBarProvider.js";import"../../../providers/SnackbarProvider.js";import"../../../providers/TableOfContentsProvider.js";import"../../../providers/TutorialStepsProvider.js";import"../../../atoms/enums/Errors.js";import"../../ErrorPage/illustrations/GlitchAnimation.js";import"../../ErrorPage/illustrations/QuestioningAnimation.js";import"proj4";import"html2canvas";import"../../../molecules/FileProgress/RegularFileProgress.styles.js";import"../../../molecules/FileUploadArea/FileUploadArea.js";import"../../../molecules/FullPageSpinner/FullPageSpinner.js";import"../../../molecules/InfoElement/InfoElement.js";import"../../../molecules/OptionalTooltip/OptionalTooltip.js";import"../../../molecules/ProfileAvatar/ProfileAvatar.js";import"@tiptap/react";import"../../../molecules/RichTextEditor/MenuBar/MenuBar.js";import"../../../molecules/RichTextEditor/RichTextEditor.styles.js";import"../../../molecules/RichTextEditor/MenuBar/MenuBar.styles.js";import"../../../molecules/RichTextEditor/MenuBar/MenuButton.js";import"../../../molecules/Search/Search.js";import"react-router-dom";import"../../../molecules/Sieve/Sieve.styles.js";import"../../../molecules/SingleFilterMenu/SingleFilterMenu.js";import"../../../molecules/Skeleton/SkeletonBase/SkeletonBase.js";import"../../../molecules/Stepper/Stepper.js";import"../../../molecules/OptionDrawer/OptionDrawer.js";import"../../../molecules/Select/Select.styles.js";import{SingleSelect as p}from"../../../molecules/Select/SingleSelect/SingleSelect.js";import"../../../molecules/ListItem/ListItem.js";import"../../../molecules/SelectionControls/Checkbox/Checkbox.js";import"../../../molecules/SelectionControls/Radio/Radio.js";import"../../../molecules/SelectionControls/Switch/Switch.js";import d from"styled-components";const{elevation:u,colors:h,shape:g}=m,j=d(r)`
|
|
2
2
|
position: absolute;
|
|
3
3
|
left: 50%;
|
|
4
4
|
top: 50%;
|
|
@@ -7,46 +7,35 @@ import{jsxs as e,jsx as i}from"react/jsx-runtime";import{useState as t,useMemo a
|
|
|
7
7
|
transform: translate(-50%, -50%);
|
|
8
8
|
width: 25rem;
|
|
9
9
|
height: auto;
|
|
10
|
-
padding: ${
|
|
11
|
-
box-shadow: ${
|
|
10
|
+
padding: ${c.large};
|
|
11
|
+
box-shadow: ${u.above_scrim};
|
|
12
12
|
border-radius: ${g.corners.borderRadius};
|
|
13
13
|
display: flex;
|
|
14
14
|
flex-direction: column;
|
|
15
|
-
gap: ${
|
|
15
|
+
gap: ${c.large};
|
|
16
16
|
> h3 {
|
|
17
|
-
color: ${
|
|
17
|
+
color: ${h.text.static_icons__default.rgba};
|
|
18
18
|
}
|
|
19
19
|
> div {
|
|
20
20
|
display: flex;
|
|
21
21
|
flex-direction: column;
|
|
22
|
-
gap: ${
|
|
22
|
+
gap: ${c.large};
|
|
23
23
|
section {
|
|
24
24
|
display: grid;
|
|
25
25
|
grid-template-columns: 1fr auto;
|
|
26
26
|
align-items: flex-end;
|
|
27
|
-
grid-gap: ${
|
|
27
|
+
grid-gap: ${c.medium};
|
|
28
28
|
}
|
|
29
29
|
}
|
|
30
|
-
`,
|
|
31
|
-
* {
|
|
32
|
-
background: none !important;
|
|
33
|
-
color: ${u.text.static_icons__default.rgba};
|
|
34
|
-
}
|
|
35
|
-
*:focus-within {
|
|
36
|
-
outline: none !important;
|
|
37
|
-
}
|
|
38
|
-
input:focus {
|
|
39
|
-
box-shadow: inset 0 -2px ${u.interactive.primary__resting.rgba};
|
|
40
|
-
}
|
|
41
|
-
`,x=p.div`
|
|
30
|
+
`,v=d.div`
|
|
42
31
|
display: flex;
|
|
43
32
|
flex-direction: column;
|
|
44
|
-
gap: ${
|
|
33
|
+
gap: ${c.small};
|
|
45
34
|
> h6 {
|
|
46
35
|
text-transform: capitalize;
|
|
47
36
|
}
|
|
48
|
-
`,
|
|
49
|
-
padding: ${
|
|
37
|
+
`,f=d.a`
|
|
38
|
+
padding: ${c.small} ${c.medium};
|
|
50
39
|
transition: background-color 200ms ease;
|
|
51
40
|
font-size: 14px;
|
|
52
41
|
line-height: 16px;
|
|
@@ -57,14 +46,14 @@ import{jsxs as e,jsx as i}from"react/jsx-runtime";import{useState as t,useMemo a
|
|
|
57
46
|
color: inherit;
|
|
58
47
|
}
|
|
59
48
|
&:focus-within {
|
|
60
|
-
outline: ${
|
|
49
|
+
outline: ${h.interactive.primary__resting.rgba} dashed 2px;
|
|
61
50
|
}
|
|
62
51
|
&:active {
|
|
63
52
|
outline: 0;
|
|
64
|
-
background-color: ${
|
|
53
|
+
background-color: ${h.interactive.primary__selected_highlight.rgba};
|
|
65
54
|
}
|
|
66
55
|
&:hover {
|
|
67
|
-
background-color: ${
|
|
56
|
+
background-color: ${h.interactive.primary__hover_alt.rgba};
|
|
68
57
|
cursor: pointer;
|
|
69
58
|
}
|
|
70
|
-
`,
|
|
59
|
+
`,x=({availableFields:r,onSelect:m,showAccessITLink:c=!0})=>{const[d,u]=i(),h=t((()=>{const e=[];for(const o of r)o.name?e.push({label:o.name,value:o.name,...o}):console.error("Field with no name found!:",o);return e}),[r]);return e(j,{children:[o(s,{variant:"h3",children:"Please select a field"}),e("div",{children:[e("section",{children:[o(p,{lightBackground:!0,value:d,items:h,placeholder:"Select a field",onSelect:e=>{u(e)}}),o(l,{"data-testid":"nextButton",variant:"contained_icon",disabled:void 0===d,onClick:()=>{void 0!==d&&m({name:d.name,uuid:d.uuid,country:d.country})},children:o(n,{data:a})})]}),c&&e(v,{children:[o(s,{variant:"overline",children:"Missing a field?"}),o(f,{tabIndex:0,"data-testid":"missing-access",href:"https://accessit.equinor.com/#",target:"_blank",children:"Go to AccessIT"})]})]})]})};export{x as SelectorCard};
|