@genesislcap/rapid-design-system 14.167.3-alpha-69ba23f.0 → 14.169.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.
|
@@ -10055,7 +10055,7 @@
|
|
|
10055
10055
|
"type": {
|
|
10056
10056
|
"text": "StoryObj"
|
|
10057
10057
|
},
|
|
10058
|
-
"default": "{\n args: {\n dialogMaxWidth: '557px',\n dialogTitle: 'Dialog Title',\n dialogInitialText: 'Some text in a Rapid Dialog',\n dialogMainText: `Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis similique iste ab sed\n voluptatem ut suscipit tenetur distinctio? Quo est debitis pariatur qui quisquam repudiandae\n at atque et quibusdam rerum, reprehenderit sed laborum officiis distinctio dolorum\n temporibus aperiam dolor consequatur perferendis aspernatur fugit repellendus asperiores,\n voluptas illo? Voluptatum, atque quidem?`,\n dialogCloseButtonText: 'Close this dialog',\n },\n render: ({\n dialogMaxWidth,\n dialogTitle,\n dialogInitialText,\n dialogMainText,\n dialogCloseButtonText,\n }) => html`\n <rapid-button @click=\"${showDialog}\">Show Rapid Dialog</rapid-button>\n <rapid-dialog style=\"--dialog-max-width: ${dialogMaxWidth};\">\n <div slot=\"top\">${dialogTitle}</div>\n <p>${dialogInitialText}</p>\n <p>${dialogMainText}</p>\n <rapid-button @click=\"${closeDialog}\" slot=\"bottom\">${dialogCloseButtonText}</rapid-button>\n </rapid-dialog>\n `,\n}"
|
|
10058
|
+
"default": "{\n argTypes: {\n dialogType: {\n control: 'select',\n options: ['default', 'error', 'success'],\n },\n },\n args: {\n dialogMaxWidth: '557px',\n dialogTitle: 'Dialog Title',\n dialogInitialText: 'Some text in a Rapid Dialog',\n dialogMainText: `Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis similique iste ab sed\n voluptatem ut suscipit tenetur distinctio? Quo est debitis pariatur qui quisquam repudiandae\n at atque et quibusdam rerum, reprehenderit sed laborum officiis distinctio dolorum\n temporibus aperiam dolor consequatur perferendis aspernatur fugit repellendus asperiores,\n voluptas illo? Voluptatum, atque quidem?`,\n dialogCloseButtonText: 'Close this dialog',\n dialogType: 'default',\n },\n render: ({\n dialogMaxWidth,\n dialogTitle,\n dialogInitialText,\n dialogMainText,\n dialogCloseButtonText,\n dialogType,\n }) => html`\n <rapid-button @click=\"${showDialog}\">Show Rapid Dialog</rapid-button>\n <rapid-dialog style=\"--dialog-max-width: ${dialogMaxWidth};\" type=${dialogType}>\n <div slot=\"top\">${dialogTitle}</div>\n <p>${dialogInitialText}</p>\n <p>${dialogMainText}</p>\n <rapid-button @click=\"${closeDialog}\" slot=\"bottom\">${dialogCloseButtonText}</rapid-button>\n </rapid-dialog>\n `,\n}"
|
|
10059
10059
|
}
|
|
10060
10060
|
],
|
|
10061
10061
|
"exports": [
|
|
@@ -10084,7 +10084,7 @@
|
|
|
10084
10084
|
{
|
|
10085
10085
|
"kind": "variable",
|
|
10086
10086
|
"name": "rapidDialogStyles",
|
|
10087
|
-
"default": "css`\n ${foundationDialogStyles}\n :host {\n --dialog-background: ${neutralLayer2};\n\n font-family: var(--body-font);\n font-size: var(--type-ramp-base-font-size);\n line-height: var(--type-ramp-base-line-height);\n }\n\n dialog {\n position: fixed;\n top: 0;\n bottom: 0;\n border-radius: calc(var(--control-corner-radius) * 1px);\n border: calc(var(--stroke-width) * 1px) solid var(--neutral-stroke-rest);\n text-align: left;\n line-height: normal;\n box-shadow: 0 2px 15px 0 rgb(0 0 0 / 35%);\n }\n\n .top {\n display: flex;\n align-items: center;\n justify-content: space-between;\n color: var(--neutral-foreground-rest);\n margin-bottom: calc(var(--design-unit) * 2px);\n font-weight: 500;\n }\n\n .bottom {\n display: flex;\n flex-wrap: wrap;\n justify-content: flex-end;\n color: var(--neutral-foreground-rest);\n }\n\n :host slot:first-of-type {\n color: ${neutralForegroundRest};\n }\n\n ::slotted(rapid-button) {\n margin-top: calc(var(--design-unit) * 4px - 1px);\n }\n\n .content-wrapper {\n min-width: var(--dialog-min-width);\n min-height: var(--dialog-min-height);\n height: fit-content;\n width: fit-content;\n max-width: var(--dialog-max-width);\n max-height: var(--dialog-max-height);\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n align-items: stretch;\n }\n\n .close-icon:hover svg {\n background-color: color-mix(in srgb, var(--neutral-foreground-rest), transparent 95%);\n }\n\n .close-icon svg g path {\n fill: color-mix(in srgb, var(--neutral-foreground-rest), transparent 50%);\n }\n\n .close-icon:hover svg g path {\n fill: var(--neutral-foreground-rest);\n }\n\n .close-icon:active svg {\n background-color: var(--neutral-layer-4);\n }\n\n .close-icon:active svg g path {\n fill: color-mix(in srgb, var(--neutral-foreground-rest), transparent 67%);\n }\n`"
|
|
10087
|
+
"default": "css`\n ${foundationDialogStyles}\n :host {\n --color-error: ${ColorHEX.error};\n --color-success: ${ColorHEX.success};\n --dialog-background: ${neutralLayer2};\n\n font-family: var(--body-font);\n font-size: var(--type-ramp-base-font-size);\n line-height: var(--type-ramp-base-line-height);\n }\n\n dialog {\n position: fixed;\n top: 0;\n bottom: 0;\n border-radius: calc(var(--control-corner-radius) * 1px);\n border: calc(var(--stroke-width) * 1px) solid var(--neutral-stroke-rest);\n text-align: left;\n line-height: normal;\n box-shadow: 0 2px 15px 0 rgb(0 0 0 / 35%);\n }\n\n .top {\n display: flex;\n align-items: center;\n justify-content: space-between;\n color: var(--neutral-foreground-rest);\n margin-bottom: calc(var(--design-unit) * 2px);\n font-weight: 500;\n }\n\n .bottom {\n display: flex;\n flex-wrap: wrap;\n justify-content: flex-end;\n color: var(--neutral-foreground-rest);\n }\n\n :host slot:first-of-type {\n color: ${neutralForegroundRest};\n }\n\n ::slotted(rapid-button) {\n margin-top: calc(var(--design-unit) * 4px - 1px);\n }\n\n .content-wrapper {\n min-width: var(--dialog-min-width);\n min-height: var(--dialog-min-height);\n height: fit-content;\n width: fit-content;\n max-width: var(--dialog-max-width);\n max-height: var(--dialog-max-height);\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n align-items: stretch;\n }\n\n .close-icon:hover svg {\n background-color: color-mix(in srgb, var(--neutral-foreground-rest), transparent 95%);\n }\n\n .close-icon svg g path {\n fill: color-mix(in srgb, var(--neutral-foreground-rest), transparent 50%);\n }\n\n .close-icon:hover svg g path {\n fill: var(--neutral-foreground-rest);\n }\n\n .close-icon:active svg {\n background-color: var(--neutral-layer-4);\n }\n\n .close-icon:active svg g path {\n fill: color-mix(in srgb, var(--neutral-foreground-rest), transparent 67%);\n }\n`"
|
|
10088
10088
|
}
|
|
10089
10089
|
],
|
|
10090
10090
|
"exports": [
|
|
@@ -10128,12 +10128,24 @@
|
|
|
10128
10128
|
"tagName": "%%prefix%%-dialog",
|
|
10129
10129
|
"customElement": true,
|
|
10130
10130
|
"attributes": [
|
|
10131
|
+
{
|
|
10132
|
+
"name": "type",
|
|
10133
|
+
"type": {
|
|
10134
|
+
"text": "DialogType"
|
|
10135
|
+
},
|
|
10136
|
+
"default": "'default'",
|
|
10137
|
+
"fieldName": "type",
|
|
10138
|
+
"inheritedFrom": {
|
|
10139
|
+
"name": "DialogElement",
|
|
10140
|
+
"module": "src/dialog/dialog.ts"
|
|
10141
|
+
}
|
|
10142
|
+
},
|
|
10131
10143
|
{
|
|
10132
10144
|
"name": "position",
|
|
10133
10145
|
"type": {
|
|
10134
|
-
"text": "
|
|
10146
|
+
"text": "DialogPosition"
|
|
10135
10147
|
},
|
|
10136
|
-
"default": "'
|
|
10148
|
+
"default": "'center'",
|
|
10137
10149
|
"fieldName": "position",
|
|
10138
10150
|
"inheritedFrom": {
|
|
10139
10151
|
"name": "DialogElement",
|
|
@@ -10200,13 +10212,25 @@
|
|
|
10200
10212
|
"module": "src/dialog/dialog.ts"
|
|
10201
10213
|
}
|
|
10202
10214
|
},
|
|
10215
|
+
{
|
|
10216
|
+
"kind": "field",
|
|
10217
|
+
"name": "type",
|
|
10218
|
+
"type": {
|
|
10219
|
+
"text": "DialogType"
|
|
10220
|
+
},
|
|
10221
|
+
"default": "'default'",
|
|
10222
|
+
"inheritedFrom": {
|
|
10223
|
+
"name": "DialogElement",
|
|
10224
|
+
"module": "src/dialog/dialog.ts"
|
|
10225
|
+
}
|
|
10226
|
+
},
|
|
10203
10227
|
{
|
|
10204
10228
|
"kind": "field",
|
|
10205
10229
|
"name": "position",
|
|
10206
10230
|
"type": {
|
|
10207
|
-
"text": "
|
|
10231
|
+
"text": "DialogPosition"
|
|
10208
10232
|
},
|
|
10209
|
-
"default": "'
|
|
10233
|
+
"default": "'center'",
|
|
10210
10234
|
"inheritedFrom": {
|
|
10211
10235
|
"name": "DialogElement",
|
|
10212
10236
|
"module": "src/dialog/dialog.ts"
|
|
@@ -17969,12 +17993,24 @@
|
|
|
17969
17993
|
"tagName": "%%prefix%%-modal",
|
|
17970
17994
|
"customElement": true,
|
|
17971
17995
|
"attributes": [
|
|
17996
|
+
{
|
|
17997
|
+
"name": "type",
|
|
17998
|
+
"type": {
|
|
17999
|
+
"text": "DialogType"
|
|
18000
|
+
},
|
|
18001
|
+
"default": "'default'",
|
|
18002
|
+
"fieldName": "type",
|
|
18003
|
+
"inheritedFrom": {
|
|
18004
|
+
"name": "DialogElement",
|
|
18005
|
+
"module": "src/dialog/dialog.ts"
|
|
18006
|
+
}
|
|
18007
|
+
},
|
|
17972
18008
|
{
|
|
17973
18009
|
"name": "position",
|
|
17974
18010
|
"type": {
|
|
17975
|
-
"text": "
|
|
18011
|
+
"text": "DialogPosition"
|
|
17976
18012
|
},
|
|
17977
|
-
"default": "'
|
|
18013
|
+
"default": "'center'",
|
|
17978
18014
|
"fieldName": "position",
|
|
17979
18015
|
"inheritedFrom": {
|
|
17980
18016
|
"name": "DialogElement",
|
|
@@ -18041,13 +18077,25 @@
|
|
|
18041
18077
|
"module": "src/dialog/dialog.ts"
|
|
18042
18078
|
}
|
|
18043
18079
|
},
|
|
18080
|
+
{
|
|
18081
|
+
"kind": "field",
|
|
18082
|
+
"name": "type",
|
|
18083
|
+
"type": {
|
|
18084
|
+
"text": "DialogType"
|
|
18085
|
+
},
|
|
18086
|
+
"default": "'default'",
|
|
18087
|
+
"inheritedFrom": {
|
|
18088
|
+
"name": "DialogElement",
|
|
18089
|
+
"module": "src/dialog/dialog.ts"
|
|
18090
|
+
}
|
|
18091
|
+
},
|
|
18044
18092
|
{
|
|
18045
18093
|
"kind": "field",
|
|
18046
18094
|
"name": "position",
|
|
18047
18095
|
"type": {
|
|
18048
|
-
"text": "
|
|
18096
|
+
"text": "DialogPosition"
|
|
18049
18097
|
},
|
|
18050
|
-
"default": "'
|
|
18098
|
+
"default": "'center'",
|
|
18051
18099
|
"inheritedFrom": {
|
|
18052
18100
|
"name": "DialogElement",
|
|
18053
18101
|
"module": "src/dialog/dialog.ts"
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dialog.stories.d.ts","sourceRoot":"","sources":["../../../src/dialog/dialog.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAIhE,QAAA,MAAM,IAAI,EAAE,IAGX,CAAC;AACF,eAAe,IAAI,CAAC;AAYpB,eAAO,MAAM,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"dialog.stories.d.ts","sourceRoot":"","sources":["../../../src/dialog/dialog.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAIhE,QAAA,MAAM,IAAI,EAAE,IAGX,CAAC;AACF,eAAe,IAAI,CAAC;AAYpB,eAAO,MAAM,OAAO,EAAE,QAmCrB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dialog.styles.d.ts","sourceRoot":"","sources":["../../../src/dialog/dialog.styles.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"dialog.styles.d.ts","sourceRoot":"","sources":["../../../src/dialog/dialog.styles.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,iBAAiB,iDA+E7B,CAAC"}
|
|
@@ -13,6 +13,12 @@ const closeDialog = (e) => {
|
|
|
13
13
|
dialog.close();
|
|
14
14
|
};
|
|
15
15
|
export const Primary = {
|
|
16
|
+
argTypes: {
|
|
17
|
+
dialogType: {
|
|
18
|
+
control: 'select',
|
|
19
|
+
options: ['default', 'error', 'success'],
|
|
20
|
+
},
|
|
21
|
+
},
|
|
16
22
|
args: {
|
|
17
23
|
dialogMaxWidth: '557px',
|
|
18
24
|
dialogTitle: 'Dialog Title',
|
|
@@ -23,10 +29,11 @@ export const Primary = {
|
|
|
23
29
|
temporibus aperiam dolor consequatur perferendis aspernatur fugit repellendus asperiores,
|
|
24
30
|
voluptas illo? Voluptatum, atque quidem?`,
|
|
25
31
|
dialogCloseButtonText: 'Close this dialog',
|
|
32
|
+
dialogType: 'default',
|
|
26
33
|
},
|
|
27
|
-
render: ({ dialogMaxWidth, dialogTitle, dialogInitialText, dialogMainText, dialogCloseButtonText, }) => html `
|
|
34
|
+
render: ({ dialogMaxWidth, dialogTitle, dialogInitialText, dialogMainText, dialogCloseButtonText, dialogType, }) => html `
|
|
28
35
|
<rapid-button @click="${showDialog}">Show Rapid Dialog</rapid-button>
|
|
29
|
-
<rapid-dialog style="--dialog-max-width: ${dialogMaxWidth};">
|
|
36
|
+
<rapid-dialog style="--dialog-max-width: ${dialogMaxWidth};" type=${dialogType}>
|
|
30
37
|
<div slot="top">${dialogTitle}</div>
|
|
31
38
|
<p>${dialogInitialText}</p>
|
|
32
39
|
<p>${dialogMainText}</p>
|
|
@@ -1,9 +1,12 @@
|
|
|
1
1
|
import { foundationDialogStyles } from '@genesislcap/foundation-ui';
|
|
2
2
|
import { neutralForegroundRest, neutralLayer2 } from '@microsoft/fast-components';
|
|
3
3
|
import { css } from '@microsoft/fast-element';
|
|
4
|
+
import { ColorHEX } from '../_common';
|
|
4
5
|
export const rapidDialogStyles = css `
|
|
5
6
|
${foundationDialogStyles}
|
|
6
7
|
:host {
|
|
8
|
+
--color-error: ${ColorHEX.error};
|
|
9
|
+
--color-success: ${ColorHEX.success};
|
|
7
10
|
--dialog-background: ${neutralLayer2};
|
|
8
11
|
|
|
9
12
|
font-family: var(--body-font);
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@genesislcap/rapid-design-system",
|
|
3
3
|
"description": "Rapid Design System",
|
|
4
|
-
"version": "14.
|
|
4
|
+
"version": "14.169.0",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"license": "SEE LICENSE IN license.txt",
|
|
7
7
|
"main": "dist/esm/index.js",
|
|
@@ -29,12 +29,12 @@
|
|
|
29
29
|
},
|
|
30
30
|
"devDependencies": {
|
|
31
31
|
"@genesiscommunitysuccess/analyzer-import-alias-plugin": "^4.0.0",
|
|
32
|
-
"@genesislcap/genx": "14.
|
|
33
|
-
"@genesislcap/rollup-builder": "14.
|
|
34
|
-
"@genesislcap/ts-builder": "14.
|
|
35
|
-
"@genesislcap/uvu-playwright-builder": "14.
|
|
36
|
-
"@genesislcap/vite-builder": "14.
|
|
37
|
-
"@genesislcap/webpack-builder": "14.
|
|
32
|
+
"@genesislcap/genx": "14.169.0",
|
|
33
|
+
"@genesislcap/rollup-builder": "14.169.0",
|
|
34
|
+
"@genesislcap/ts-builder": "14.169.0",
|
|
35
|
+
"@genesislcap/uvu-playwright-builder": "14.169.0",
|
|
36
|
+
"@genesislcap/vite-builder": "14.169.0",
|
|
37
|
+
"@genesislcap/webpack-builder": "14.169.0",
|
|
38
38
|
"@storybook/addon-coverage": "^1.0.1",
|
|
39
39
|
"@storybook/addon-essentials": "^8.0.0",
|
|
40
40
|
"@storybook/addon-links": "^8.0.0",
|
|
@@ -51,8 +51,8 @@
|
|
|
51
51
|
"storybook": "^8.0.0"
|
|
52
52
|
},
|
|
53
53
|
"dependencies": {
|
|
54
|
-
"@genesislcap/foundation-logger": "14.
|
|
55
|
-
"@genesislcap/foundation-ui": "14.
|
|
54
|
+
"@genesislcap/foundation-logger": "14.169.0",
|
|
55
|
+
"@genesislcap/foundation-ui": "14.169.0",
|
|
56
56
|
"@microsoft/fast-colors": "^5.3.1",
|
|
57
57
|
"@microsoft/fast-components": "^2.30.6",
|
|
58
58
|
"@microsoft/fast-element": "^1.12.0",
|
|
@@ -70,5 +70,5 @@
|
|
|
70
70
|
"access": "public"
|
|
71
71
|
},
|
|
72
72
|
"customElements": "dist/custom-elements.json",
|
|
73
|
-
"gitHead": "
|
|
73
|
+
"gitHead": "59695045bb3be9f8f42679be27fc88cd911e5136"
|
|
74
74
|
}
|