@spectrum-web-components/tooltip 1.1.0-beta.53 → 1.1.0-beta.55

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": "@spectrum-web-components/tooltip",
3
- "version": "1.1.0-beta.53",
3
+ "version": "1.1.0-beta.55",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -62,10 +62,10 @@
62
62
  "lit-html"
63
63
  ],
64
64
  "dependencies": {
65
- "@spectrum-web-components/base": "^1.1.0-beta.53",
66
- "@spectrum-web-components/overlay": "^1.1.0-beta.53",
67
- "@spectrum-web-components/reactive-controllers": "^1.1.0-beta.53",
68
- "@spectrum-web-components/shared": "^1.1.0-beta.53"
65
+ "@spectrum-web-components/base": "^1.1.0-beta.55",
66
+ "@spectrum-web-components/overlay": "^1.1.0-beta.55",
67
+ "@spectrum-web-components/reactive-controllers": "^1.1.0-beta.55",
68
+ "@spectrum-web-components/shared": "^1.1.0-beta.55"
69
69
  },
70
70
  "devDependencies": {
71
71
  "@spectrum-css/tooltip": "^7.0.0-s2-foundations.15"
@@ -76,5 +76,5 @@
76
76
  "./sp-*.js",
77
77
  "./**/*.dev.js"
78
78
  ],
79
- "gitHead": "b12f38dbbedf3ea2231630f71cc2bb2b86382e8a"
79
+ "gitHead": "6527b5ddba17f0b56cf4947de00126dbafad4c62"
80
80
  }
@@ -22,8 +22,8 @@ export const Default = ({
22
22
  <sp-button
23
23
  ${tooltip(
24
24
  () => html`
25
- ${text || "Tooltip"}
26
- `,
25
+ ${text || "Tooltip"}
26
+ `,
27
27
  {
28
28
  open,
29
29
  overlayOptions: { placement },
@@ -110,4 +110,8 @@ Default.argTypes = {
110
110
  Default.swc_vrt = {
111
111
  skip: true
112
112
  };
113
+ Default.parameters = {
114
+ // Disables Chromatic's snapshotting on a global level
115
+ chromatic: { disableSnapshot: true }
116
+ };
113
117
  //# sourceMappingURL=tooltip-directive.stories.js.map
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["tooltip-directive.stories.ts"],
4
- "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { tooltip } from '@spectrum-web-components/tooltip/src/tooltip-directive.js';\nimport { html, TemplateResult } from '@spectrum-web-components/base';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-alert.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-checkmark.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-info.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-edit.js';\nimport '@spectrum-web-components/button/sp-button.js';\nimport '@spectrum-web-components/action-button/sp-action-button.js';\nimport { Placement } from '@spectrum-web-components/overlay';\nimport '@spectrum-web-components/overlay/overlay-trigger.js';\n\nexport default {\n component: 'sp-tooltip',\n title: 'Tooltip Directive',\n};\n\ninterface Properties {\n open?: boolean;\n placement?: Placement;\n text?: string;\n variant?: string;\n offset?: number;\n delayed?: boolean;\n}\n\nexport const Default = ({\n open,\n placement,\n text,\n variant,\n}: Properties): TemplateResult => {\n return html`\n <sp-button\n ${tooltip(\n () =>\n html`\n ${text || 'Tooltip'}\n `,\n {\n open,\n overlayOptions: { placement },\n variant,\n }\n )}\n >\n Hover me\n </sp-button>\n `;\n};\nDefault.args = {\n open: true,\n placement: 'top',\n variant: '',\n text: 'Tooltip',\n};\nDefault.argTypes = {\n open: {\n name: 'open',\n type: { name: 'boolean', required: false },\n description: 'Whether the tooltip is open.',\n table: {\n type: { summary: 'boolean' },\n defaultValue: { summary: false },\n },\n control: {\n type: 'boolean',\n },\n },\n placement: {\n name: 'placement',\n type: { name: 'string', required: false },\n description: 'The placement of the tooltip in relation to its parent',\n table: {\n type: { summary: 'string' },\n defaultValue: { summary: 'top' },\n },\n control: {\n type: 'inline-radio',\n options: [\n 'auto',\n 'auto-start',\n 'auto-end',\n 'top',\n 'bottom',\n 'right',\n 'left',\n 'top-start',\n 'top-end',\n 'bottom-start',\n 'bottom-end',\n 'right-start',\n 'right-end',\n 'left-start',\n 'left-end',\n 'none',\n ],\n },\n },\n text: {\n name: 'text',\n type: { name: 'string', required: false },\n table: {\n type: { summary: 'string' },\n defaultValue: { summary: '' },\n },\n control: 'text',\n },\n variant: {\n name: 'variant',\n type: { name: 'string', required: false },\n description: 'The style of the tooltip.',\n table: {\n type: { summary: 'string' },\n defaultValue: { summary: '' },\n },\n control: {\n type: 'inline-radio',\n options: ['info', 'positive', 'negative', ''],\n },\n },\n};\nDefault.swc_vrt = {\n skip: true,\n};\n"],
5
- "mappings": ";AAWA,SAAS,eAAe;AACxB,SAAS,YAA4B;AACrC,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AAEP,OAAO;AAEP,eAAe;AAAA,EACX,WAAW;AAAA,EACX,OAAO;AACX;AAWO,aAAM,UAAU,CAAC;AAAA,EACpB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACJ,MAAkC;AAC9B,SAAO;AAAA;AAAA,cAEG;AAAA,IACE,MACI;AAAA,0BACM,QAAQ,SAAS;AAAA;AAAA,IAE3B;AAAA,MACI;AAAA,MACA,gBAAgB,EAAE,UAAU;AAAA,MAC5B;AAAA,IACJ;AAAA,EACJ,CAAC;AAAA;AAAA;AAAA;AAAA;AAKb;AACA,QAAQ,OAAO;AAAA,EACX,MAAM;AAAA,EACN,WAAW;AAAA,EACX,SAAS;AAAA,EACT,MAAM;AACV;AACA,QAAQ,WAAW;AAAA,EACf,MAAM;AAAA,IACF,MAAM;AAAA,IACN,MAAM,EAAE,MAAM,WAAW,UAAU,MAAM;AAAA,IACzC,aAAa;AAAA,IACb,OAAO;AAAA,MACH,MAAM,EAAE,SAAS,UAAU;AAAA,MAC3B,cAAc,EAAE,SAAS,MAAM;AAAA,IACnC;AAAA,IACA,SAAS;AAAA,MACL,MAAM;AAAA,IACV;AAAA,EACJ;AAAA,EACA,WAAW;AAAA,IACP,MAAM;AAAA,IACN,MAAM,EAAE,MAAM,UAAU,UAAU,MAAM;AAAA,IACxC,aAAa;AAAA,IACb,OAAO;AAAA,MACH,MAAM,EAAE,SAAS,SAAS;AAAA,MAC1B,cAAc,EAAE,SAAS,MAAM;AAAA,IACnC;AAAA,IACA,SAAS;AAAA,MACL,MAAM;AAAA,MACN,SAAS;AAAA,QACL;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACJ;AAAA,IACJ;AAAA,EACJ;AAAA,EACA,MAAM;AAAA,IACF,MAAM;AAAA,IACN,MAAM,EAAE,MAAM,UAAU,UAAU,MAAM;AAAA,IACxC,OAAO;AAAA,MACH,MAAM,EAAE,SAAS,SAAS;AAAA,MAC1B,cAAc,EAAE,SAAS,GAAG;AAAA,IAChC;AAAA,IACA,SAAS;AAAA,EACb;AAAA,EACA,SAAS;AAAA,IACL,MAAM;AAAA,IACN,MAAM,EAAE,MAAM,UAAU,UAAU,MAAM;AAAA,IACxC,aAAa;AAAA,IACb,OAAO;AAAA,MACH,MAAM,EAAE,SAAS,SAAS;AAAA,MAC1B,cAAc,EAAE,SAAS,GAAG;AAAA,IAChC;AAAA,IACA,SAAS;AAAA,MACL,MAAM;AAAA,MACN,SAAS,CAAC,QAAQ,YAAY,YAAY,EAAE;AAAA,IAChD;AAAA,EACJ;AACJ;AACA,QAAQ,UAAU;AAAA,EACd,MAAM;AACV;",
4
+ "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { tooltip } from '@spectrum-web-components/tooltip/src/tooltip-directive.js';\nimport { html, TemplateResult } from '@spectrum-web-components/base';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-alert.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-checkmark.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-info.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-edit.js';\nimport '@spectrum-web-components/button/sp-button.js';\nimport '@spectrum-web-components/action-button/sp-action-button.js';\nimport { Placement } from '@spectrum-web-components/overlay';\nimport '@spectrum-web-components/overlay/overlay-trigger.js';\n\nexport default {\n component: 'sp-tooltip',\n title: 'Tooltip Directive',\n};\n\ninterface Properties {\n open?: boolean;\n placement?: Placement;\n text?: string;\n variant?: string;\n offset?: number;\n delayed?: boolean;\n}\n\nexport const Default = ({\n open,\n placement,\n text,\n variant,\n}: Properties): TemplateResult => {\n return html`\n <sp-button\n ${tooltip(\n () => html`\n ${text || 'Tooltip'}\n `,\n {\n open,\n overlayOptions: { placement },\n variant,\n }\n )}\n >\n Hover me\n </sp-button>\n `;\n};\nDefault.args = {\n open: true,\n placement: 'top',\n variant: '',\n text: 'Tooltip',\n};\nDefault.argTypes = {\n open: {\n name: 'open',\n type: { name: 'boolean', required: false },\n description: 'Whether the tooltip is open.',\n table: {\n type: { summary: 'boolean' },\n defaultValue: { summary: false },\n },\n control: {\n type: 'boolean',\n },\n },\n placement: {\n name: 'placement',\n type: { name: 'string', required: false },\n description: 'The placement of the tooltip in relation to its parent',\n table: {\n type: { summary: 'string' },\n defaultValue: { summary: 'top' },\n },\n control: {\n type: 'inline-radio',\n options: [\n 'auto',\n 'auto-start',\n 'auto-end',\n 'top',\n 'bottom',\n 'right',\n 'left',\n 'top-start',\n 'top-end',\n 'bottom-start',\n 'bottom-end',\n 'right-start',\n 'right-end',\n 'left-start',\n 'left-end',\n 'none',\n ],\n },\n },\n text: {\n name: 'text',\n type: { name: 'string', required: false },\n table: {\n type: { summary: 'string' },\n defaultValue: { summary: '' },\n },\n control: 'text',\n },\n variant: {\n name: 'variant',\n type: { name: 'string', required: false },\n description: 'The style of the tooltip.',\n table: {\n type: { summary: 'string' },\n defaultValue: { summary: '' },\n },\n control: {\n type: 'inline-radio',\n options: ['info', 'positive', 'negative', ''],\n },\n },\n};\nDefault.swc_vrt = {\n skip: true,\n};\n\nDefault.parameters = {\n // Disables Chromatic's snapshotting on a global level\n chromatic: { disableSnapshot: true },\n};\n"],
5
+ "mappings": ";AAWA,SAAS,eAAe;AACxB,SAAS,YAA4B;AACrC,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AAEP,OAAO;AAEP,eAAe;AAAA,EACX,WAAW;AAAA,EACX,OAAO;AACX;AAWO,aAAM,UAAU,CAAC;AAAA,EACpB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACJ,MAAkC;AAC9B,SAAO;AAAA;AAAA,cAEG;AAAA,IACE,MAAM;AAAA,sBACA,QAAQ,SAAS;AAAA;AAAA,IAEvB;AAAA,MACI;AAAA,MACA,gBAAgB,EAAE,UAAU;AAAA,MAC5B;AAAA,IACJ;AAAA,EACJ,CAAC;AAAA;AAAA;AAAA;AAAA;AAKb;AACA,QAAQ,OAAO;AAAA,EACX,MAAM;AAAA,EACN,WAAW;AAAA,EACX,SAAS;AAAA,EACT,MAAM;AACV;AACA,QAAQ,WAAW;AAAA,EACf,MAAM;AAAA,IACF,MAAM;AAAA,IACN,MAAM,EAAE,MAAM,WAAW,UAAU,MAAM;AAAA,IACzC,aAAa;AAAA,IACb,OAAO;AAAA,MACH,MAAM,EAAE,SAAS,UAAU;AAAA,MAC3B,cAAc,EAAE,SAAS,MAAM;AAAA,IACnC;AAAA,IACA,SAAS;AAAA,MACL,MAAM;AAAA,IACV;AAAA,EACJ;AAAA,EACA,WAAW;AAAA,IACP,MAAM;AAAA,IACN,MAAM,EAAE,MAAM,UAAU,UAAU,MAAM;AAAA,IACxC,aAAa;AAAA,IACb,OAAO;AAAA,MACH,MAAM,EAAE,SAAS,SAAS;AAAA,MAC1B,cAAc,EAAE,SAAS,MAAM;AAAA,IACnC;AAAA,IACA,SAAS;AAAA,MACL,MAAM;AAAA,MACN,SAAS;AAAA,QACL;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACJ;AAAA,IACJ;AAAA,EACJ;AAAA,EACA,MAAM;AAAA,IACF,MAAM;AAAA,IACN,MAAM,EAAE,MAAM,UAAU,UAAU,MAAM;AAAA,IACxC,OAAO;AAAA,MACH,MAAM,EAAE,SAAS,SAAS;AAAA,MAC1B,cAAc,EAAE,SAAS,GAAG;AAAA,IAChC;AAAA,IACA,SAAS;AAAA,EACb;AAAA,EACA,SAAS;AAAA,IACL,MAAM;AAAA,IACN,MAAM,EAAE,MAAM,UAAU,UAAU,MAAM;AAAA,IACxC,aAAa;AAAA,IACb,OAAO;AAAA,MACH,MAAM,EAAE,SAAS,SAAS;AAAA,MAC1B,cAAc,EAAE,SAAS,GAAG;AAAA,IAChC;AAAA,IACA,SAAS;AAAA,MACL,MAAM;AAAA,MACN,SAAS,CAAC,QAAQ,YAAY,YAAY,EAAE;AAAA,IAChD;AAAA,EACJ;AACJ;AACA,QAAQ,UAAU;AAAA,EACd,MAAM;AACV;AAEA,QAAQ,aAAa;AAAA;AAAA,EAEjB,WAAW,EAAE,iBAAiB,KAAK;AACvC;",
6
6
  "names": []
7
7
  }
@@ -14,14 +14,14 @@ import "@spectrum-web-components/overlay/sp-overlay.js";
14
14
  const iconOptions = {
15
15
  "": () => html``,
16
16
  negative: () => html`
17
- <sp-icon-alert slot="icon"></sp-icon-alert>
18
- `,
17
+ <sp-icon-alert slot="icon"></sp-icon-alert>
18
+ `,
19
19
  positive: () => html`
20
- <sp-icon-checkmark slot="icon"></sp-icon-checkmark>
21
- `,
20
+ <sp-icon-checkmark slot="icon"></sp-icon-checkmark>
21
+ `,
22
22
  info: () => html`
23
- <sp-icon-info slot="icon"></sp-icon-info>
24
- `
23
+ <sp-icon-info slot="icon"></sp-icon-info>
24
+ `
25
25
  };
26
26
  export default {
27
27
  component: "sp-tooltip",
@@ -402,4 +402,8 @@ export const draggable = () => {
402
402
  draggable.swc_vrt = {
403
403
  skip: true
404
404
  };
405
+ draggable.parameters = {
406
+ // Disables Chromatic's snapshotting on a global level
407
+ chromatic: { disableSnapshot: true }
408
+ };
405
409
  //# sourceMappingURL=tooltip.stories.js.map
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["tooltip.stories.ts"],
4
- "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport '@spectrum-web-components/tooltip/sp-tooltip.js';\nimport { html, nothing, TemplateResult } from '@spectrum-web-components/base';\nimport { ifDefined } from '@spectrum-web-components/base/src/directives.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-alert.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-checkmark.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-info.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-edit.js';\nimport '@spectrum-web-components/button/sp-button.js';\nimport '@spectrum-web-components/field-label/sp-field-label.js';\nimport '@spectrum-web-components/textfield/sp-textfield.js';\nimport '@spectrum-web-components/action-button/sp-action-button.js';\nimport { Placement } from '@spectrum-web-components/overlay';\nimport '@spectrum-web-components/overlay/sp-overlay.js';\n\nconst iconOptions: {\n [key: string]: ({\n width,\n height,\n hidden,\n title,\n }?: {\n width?: number;\n height?: number;\n hidden?: boolean;\n title?: string;\n }) => TemplateResult | string;\n} = {\n '': () => html``,\n negative: () =>\n html`\n <sp-icon-alert slot=\"icon\"></sp-icon-alert>\n `,\n positive: () =>\n html`\n <sp-icon-checkmark slot=\"icon\"></sp-icon-checkmark>\n `,\n info: () =>\n html`\n <sp-icon-info slot=\"icon\"></sp-icon-info>\n `,\n};\n\nexport default {\n component: 'sp-tooltip',\n title: 'Tooltip',\n};\n\ninterface Properties {\n delayed?: boolean;\n disabled?: boolean;\n open?: boolean;\n placement?: Placement;\n variant?: string;\n text?: string;\n offset?: number;\n}\n\nexport const Default = ({\n open,\n placement,\n variant,\n text,\n}: Properties): TemplateResult => {\n return html`\n <sp-tooltip ?open=${open} placement=${placement} variant=${variant}>\n ${text}\n </sp-tooltip>\n `;\n};\nDefault.args = {\n open: true,\n placement: 'top',\n variant: '',\n text: 'Tooltip',\n};\nDefault.argTypes = {\n open: {\n name: 'open',\n type: { name: 'boolean', required: false },\n description: 'Whether the tooltip is open.',\n table: {\n type: { summary: 'boolean' },\n defaultValue: { summary: false },\n },\n control: {\n type: 'boolean',\n },\n },\n placement: {\n name: 'placement',\n type: { name: 'string', required: false },\n description: 'The placement of the tooltip in relation to its parent',\n table: {\n type: { summary: 'string' },\n defaultValue: { summary: 'top' },\n },\n control: {\n type: 'inline-radio',\n options: [\n 'auto',\n 'auto-start',\n 'auto-end',\n 'top',\n 'bottom',\n 'right',\n 'left',\n 'top-start',\n 'top-end',\n 'bottom-start',\n 'bottom-end',\n 'right-start',\n 'right-end',\n 'left-start',\n 'left-end',\n 'none',\n ],\n },\n },\n text: {\n name: 'text',\n type: { name: 'string', required: false },\n table: {\n type: { summary: 'string' },\n defaultValue: { summary: '' },\n },\n control: 'text',\n },\n variant: {\n name: 'variant',\n type: { name: 'string', required: false },\n description: 'The style of the tooltip.',\n table: {\n type: { summary: 'string' },\n defaultValue: { summary: '' },\n },\n control: {\n type: 'inline-radio',\n options: ['info', 'positive', 'negative', ''],\n },\n },\n};\n\nexport const wIcon = ({\n open,\n placement,\n variant,\n text,\n}: Properties): TemplateResult => {\n return html`\n <sp-tooltip ?open=${open} placement=${placement} variant=${variant}>\n ${!!variant ? iconOptions[variant]() : nothing} ${text}\n </sp-tooltip>\n `;\n};\nwIcon.args = {\n open: true,\n placement: 'top',\n text: 'Tooltip',\n variant: 'negative',\n};\nwIcon.argTypes = {\n open: {\n name: 'open',\n type: { name: 'boolean', required: false },\n description: 'Whether the tooltip is open.',\n table: {\n type: { summary: 'boolean' },\n defaultValue: { summary: false },\n },\n control: {\n type: 'boolean',\n },\n },\n placement: {\n name: 'placement',\n type: { name: 'string', required: false },\n description: 'The placement of the tooltip in relation to its parent',\n table: {\n type: { summary: 'string' },\n defaultValue: { summary: 'top' },\n },\n control: {\n type: 'inline-radio',\n options: [\n 'auto',\n 'auto-start',\n 'auto-end',\n 'top',\n 'bottom',\n 'right',\n 'left',\n 'top-start',\n 'top-end',\n 'bottom-start',\n 'bottom-end',\n 'right-start',\n 'right-end',\n 'left-start',\n 'left-end',\n 'none',\n ],\n },\n },\n text: {\n name: 'text',\n type: { name: 'string', required: false },\n table: {\n type: { summary: 'string' },\n defaultValue: { summary: '' },\n },\n control: 'text',\n },\n variant: {\n name: 'variant',\n type: { name: 'string', required: false },\n table: {\n type: { summary: 'string' },\n defaultValue: { summary: '' },\n },\n control: {\n type: 'inline-radio',\n options: ['info', 'positive', 'negative', ''],\n },\n },\n};\n\nconst overlayStyles = html`\n <style>\n html,\n body,\n #root,\n #root-inner,\n sp-story-decorator {\n height: 100%;\n margin: 0;\n }\n\n sp-story-decorator > div {\n display: contents;\n }\n\n sp-story-decorator::part(container) {\n display: flex;\n flex-direction: column;\n width: 100%;\n height: 100%;\n align-items: center;\n justify-content: center;\n gap: 24px;\n }\n\n sp-button:nth-of-type(1) {\n margin-top: 24px;\n }\n </style>\n`;\n\nconst overlaid = (openPlacement: Placement): TemplateResult => {\n return html`\n ${overlayStyles}\n ${(\n [\n ['bottom', ''],\n ['left', 'negative'],\n ['right', 'positive'],\n ['top', 'info'],\n ['top-start', ''],\n ] as [Placement, string][]\n ).map(([placement, variant]) => {\n return html`\n <sp-button id=\"trigger-${placement}\" label=\"${placement} test\">\n Hover for ${variant ? variant : 'tooltip'} on the\n ${placement}\n </sp-button>\n <sp-overlay\n trigger=\"trigger-${placement}@hover\"\n type=\"hint\"\n placement=${placement}\n open=${ifDefined(\n openPlacement === placement ? 'hover' : undefined\n )}\n >\n <sp-tooltip variant=${variant} placement=${placement}>\n ${placement}\n </sp-tooltip>\n </sp-overlay>\n `;\n })}\n `;\n};\n\nexport const overlaidTop = (): TemplateResult => overlaid('top');\nexport const overlaidRight = (): TemplateResult => overlaid('right');\nexport const overlaidBottom = (): TemplateResult => overlaid('bottom');\nexport const overlaidLeft = (): TemplateResult => overlaid('left');\nexport const overlaidTopStart = (): TemplateResult => overlaid('top-start');\n\nexport const selfManaged = ({\n placement,\n open,\n offset,\n delayed,\n disabled,\n}: Properties): TemplateResult => html`\n ${overlayStyles}\n <sp-action-button class=\"self-managed\">\n This is a button.\n <sp-tooltip\n self-managed\n placement=${placement}\n offset=${offset}\n ?delayed=${delayed}\n ?disabled=${disabled}\n ?open=${open}\n >\n Add paragraph text by dragging the Text tool on the canvas to use\n this feature\n </sp-tooltip>\n </sp-action-button>\n`;\nselfManaged.args = {\n placement: 'top',\n open: true,\n offset: 6,\n delayed: false,\n disabled: false,\n};\nselfManaged.argTypes = {\n delayed: {\n name: 'delayed',\n type: { name: 'boolean', required: false },\n description: 'Whether to manage the tooltip with the warmup timer',\n },\n disabled: {\n name: 'disabled',\n type: { name: 'boolean', required: false },\n description: 'Whether the Tooltip is active and can be displayed',\n },\n offset: {\n name: 'offset',\n type: { name: 'number', required: false },\n description:\n 'The pixel distance from the parent element to place the tooltip',\n },\n open: {\n name: 'open',\n type: { name: 'boolean', required: false },\n description: 'Whether the tooltip is open.',\n table: {\n type: { summary: 'boolean' },\n defaultValue: { summary: false },\n },\n control: {\n type: 'boolean',\n },\n },\n placement: {\n name: 'placement',\n type: { name: 'string', required: false },\n description: 'The placement of the tooltip in relation to its parent',\n table: {\n type: { summary: 'string' },\n defaultValue: { summary: 'top' },\n },\n control: {\n type: 'inline-radio',\n options: [\n 'auto',\n 'auto-start',\n 'auto-end',\n 'top',\n 'bottom',\n 'right',\n 'left',\n 'top-start',\n 'top-end',\n 'bottom-start',\n 'bottom-end',\n 'right-start',\n 'right-end',\n 'left-start',\n 'left-end',\n 'none',\n ],\n },\n },\n};\n\nexport const selfManagedIconOnly = (): TemplateResult => html`\n ${overlayStyles}\n <sp-action-button class=\"self-managed\">\n <sp-icon-edit slot=\"icon\"></sp-icon-edit>\n <sp-tooltip self-managed>This is a tooltip.</sp-tooltip>\n </sp-action-button>\n <hr />\n\n <sp-action-button class=\"self-managed\">\n <sp-icon-edit slot=\"icon\"></sp-icon-edit>\n </sp-action-button>\n`;\n\nexport const selfManagedFieldLabel = (): TemplateResult => html`\n <div style=\"display: inline-flex; flex-direction: column;\">\n <sp-field-label for=\"input\">\n <sp-icon-edit></sp-icon-edit>\n <sp-tooltip self-managed>Edit</sp-tooltip>\n </sp-field-label>\n <sp-textfield id=\"input\"></sp-textfield>\n </div>\n`;\n\nexport const draggable = (): TemplateResult => {\n const handleDragStart = (event: DragEvent): void => {\n event.dataTransfer?.setDragImage(\n event.target as HTMLElement,\n event.offsetX,\n event.offsetY\n );\n };\n return html`\n <sp-button>\n A simple button that should not be included in the DragImage\n </sp-button>\n <div\n draggable=\"true\"\n id=\"draggableElement\"\n @dragstart=${handleDragStart}\n style=\"margin-top: 16px; cursor: move; padding: 24px; border: red 1px solid;\"\n >\n <p>Click and drag me to show DragImage</p>\n <sp-action-button>\n Action Button with self managed tooltip\n <sp-tooltip self-managed placement=\"bottom\">\n My Tooltip\n </sp-tooltip>\n </sp-action-button>\n </div>\n `;\n};\n\ndraggable.swc_vrt = {\n skip: true,\n};\n"],
5
- "mappings": "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",
4
+ "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport '@spectrum-web-components/tooltip/sp-tooltip.js';\nimport { html, nothing, TemplateResult } from '@spectrum-web-components/base';\nimport { ifDefined } from '@spectrum-web-components/base/src/directives.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-alert.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-checkmark.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-info.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-edit.js';\nimport '@spectrum-web-components/button/sp-button.js';\nimport '@spectrum-web-components/field-label/sp-field-label.js';\nimport '@spectrum-web-components/textfield/sp-textfield.js';\nimport '@spectrum-web-components/action-button/sp-action-button.js';\nimport { Placement } from '@spectrum-web-components/overlay';\nimport '@spectrum-web-components/overlay/sp-overlay.js';\n\nconst iconOptions: {\n [key: string]: ({\n width,\n height,\n hidden,\n title,\n }?: {\n width?: number;\n height?: number;\n hidden?: boolean;\n title?: string;\n }) => TemplateResult | string;\n} = {\n '': () => html``,\n negative: () => html`\n <sp-icon-alert slot=\"icon\"></sp-icon-alert>\n `,\n positive: () => html`\n <sp-icon-checkmark slot=\"icon\"></sp-icon-checkmark>\n `,\n info: () => html`\n <sp-icon-info slot=\"icon\"></sp-icon-info>\n `,\n};\n\nexport default {\n component: 'sp-tooltip',\n title: 'Tooltip',\n};\n\ninterface Properties {\n delayed?: boolean;\n disabled?: boolean;\n open?: boolean;\n placement?: Placement;\n variant?: string;\n text?: string;\n offset?: number;\n}\n\nexport const Default = ({\n open,\n placement,\n variant,\n text,\n}: Properties): TemplateResult => {\n return html`\n <sp-tooltip ?open=${open} placement=${placement} variant=${variant}>\n ${text}\n </sp-tooltip>\n `;\n};\nDefault.args = {\n open: true,\n placement: 'top',\n variant: '',\n text: 'Tooltip',\n};\nDefault.argTypes = {\n open: {\n name: 'open',\n type: { name: 'boolean', required: false },\n description: 'Whether the tooltip is open.',\n table: {\n type: { summary: 'boolean' },\n defaultValue: { summary: false },\n },\n control: {\n type: 'boolean',\n },\n },\n placement: {\n name: 'placement',\n type: { name: 'string', required: false },\n description: 'The placement of the tooltip in relation to its parent',\n table: {\n type: { summary: 'string' },\n defaultValue: { summary: 'top' },\n },\n control: {\n type: 'inline-radio',\n options: [\n 'auto',\n 'auto-start',\n 'auto-end',\n 'top',\n 'bottom',\n 'right',\n 'left',\n 'top-start',\n 'top-end',\n 'bottom-start',\n 'bottom-end',\n 'right-start',\n 'right-end',\n 'left-start',\n 'left-end',\n 'none',\n ],\n },\n },\n text: {\n name: 'text',\n type: { name: 'string', required: false },\n table: {\n type: { summary: 'string' },\n defaultValue: { summary: '' },\n },\n control: 'text',\n },\n variant: {\n name: 'variant',\n type: { name: 'string', required: false },\n description: 'The style of the tooltip.',\n table: {\n type: { summary: 'string' },\n defaultValue: { summary: '' },\n },\n control: {\n type: 'inline-radio',\n options: ['info', 'positive', 'negative', ''],\n },\n },\n};\n\nexport const wIcon = ({\n open,\n placement,\n variant,\n text,\n}: Properties): TemplateResult => {\n return html`\n <sp-tooltip ?open=${open} placement=${placement} variant=${variant}>\n ${!!variant ? iconOptions[variant]() : nothing} ${text}\n </sp-tooltip>\n `;\n};\nwIcon.args = {\n open: true,\n placement: 'top',\n text: 'Tooltip',\n variant: 'negative',\n};\nwIcon.argTypes = {\n open: {\n name: 'open',\n type: { name: 'boolean', required: false },\n description: 'Whether the tooltip is open.',\n table: {\n type: { summary: 'boolean' },\n defaultValue: { summary: false },\n },\n control: {\n type: 'boolean',\n },\n },\n placement: {\n name: 'placement',\n type: { name: 'string', required: false },\n description: 'The placement of the tooltip in relation to its parent',\n table: {\n type: { summary: 'string' },\n defaultValue: { summary: 'top' },\n },\n control: {\n type: 'inline-radio',\n options: [\n 'auto',\n 'auto-start',\n 'auto-end',\n 'top',\n 'bottom',\n 'right',\n 'left',\n 'top-start',\n 'top-end',\n 'bottom-start',\n 'bottom-end',\n 'right-start',\n 'right-end',\n 'left-start',\n 'left-end',\n 'none',\n ],\n },\n },\n text: {\n name: 'text',\n type: { name: 'string', required: false },\n table: {\n type: { summary: 'string' },\n defaultValue: { summary: '' },\n },\n control: 'text',\n },\n variant: {\n name: 'variant',\n type: { name: 'string', required: false },\n table: {\n type: { summary: 'string' },\n defaultValue: { summary: '' },\n },\n control: {\n type: 'inline-radio',\n options: ['info', 'positive', 'negative', ''],\n },\n },\n};\n\nconst overlayStyles = html`\n <style>\n html,\n body,\n #root,\n #root-inner,\n sp-story-decorator {\n height: 100%;\n margin: 0;\n }\n\n sp-story-decorator > div {\n display: contents;\n }\n\n sp-story-decorator::part(container) {\n display: flex;\n flex-direction: column;\n width: 100%;\n height: 100%;\n align-items: center;\n justify-content: center;\n gap: 24px;\n }\n\n sp-button:nth-of-type(1) {\n margin-top: 24px;\n }\n </style>\n`;\n\nconst overlaid = (openPlacement: Placement): TemplateResult => {\n return html`\n ${overlayStyles}\n ${(\n [\n ['bottom', ''],\n ['left', 'negative'],\n ['right', 'positive'],\n ['top', 'info'],\n ['top-start', ''],\n ] as [Placement, string][]\n ).map(([placement, variant]) => {\n return html`\n <sp-button id=\"trigger-${placement}\" label=\"${placement} test\">\n Hover for ${variant ? variant : 'tooltip'} on the\n ${placement}\n </sp-button>\n <sp-overlay\n trigger=\"trigger-${placement}@hover\"\n type=\"hint\"\n placement=${placement}\n open=${ifDefined(\n openPlacement === placement ? 'hover' : undefined\n )}\n >\n <sp-tooltip variant=${variant} placement=${placement}>\n ${placement}\n </sp-tooltip>\n </sp-overlay>\n `;\n })}\n `;\n};\n\nexport const overlaidTop = (): TemplateResult => overlaid('top');\nexport const overlaidRight = (): TemplateResult => overlaid('right');\nexport const overlaidBottom = (): TemplateResult => overlaid('bottom');\nexport const overlaidLeft = (): TemplateResult => overlaid('left');\nexport const overlaidTopStart = (): TemplateResult => overlaid('top-start');\n\nexport const selfManaged = ({\n placement,\n open,\n offset,\n delayed,\n disabled,\n}: Properties): TemplateResult => html`\n ${overlayStyles}\n <sp-action-button class=\"self-managed\">\n This is a button.\n <sp-tooltip\n self-managed\n placement=${placement}\n offset=${offset}\n ?delayed=${delayed}\n ?disabled=${disabled}\n ?open=${open}\n >\n Add paragraph text by dragging the Text tool on the canvas to use\n this feature\n </sp-tooltip>\n </sp-action-button>\n`;\nselfManaged.args = {\n placement: 'top',\n open: true,\n offset: 6,\n delayed: false,\n disabled: false,\n};\nselfManaged.argTypes = {\n delayed: {\n name: 'delayed',\n type: { name: 'boolean', required: false },\n description: 'Whether to manage the tooltip with the warmup timer',\n },\n disabled: {\n name: 'disabled',\n type: { name: 'boolean', required: false },\n description: 'Whether the Tooltip is active and can be displayed',\n },\n offset: {\n name: 'offset',\n type: { name: 'number', required: false },\n description:\n 'The pixel distance from the parent element to place the tooltip',\n },\n open: {\n name: 'open',\n type: { name: 'boolean', required: false },\n description: 'Whether the tooltip is open.',\n table: {\n type: { summary: 'boolean' },\n defaultValue: { summary: false },\n },\n control: {\n type: 'boolean',\n },\n },\n placement: {\n name: 'placement',\n type: { name: 'string', required: false },\n description: 'The placement of the tooltip in relation to its parent',\n table: {\n type: { summary: 'string' },\n defaultValue: { summary: 'top' },\n },\n control: {\n type: 'inline-radio',\n options: [\n 'auto',\n 'auto-start',\n 'auto-end',\n 'top',\n 'bottom',\n 'right',\n 'left',\n 'top-start',\n 'top-end',\n 'bottom-start',\n 'bottom-end',\n 'right-start',\n 'right-end',\n 'left-start',\n 'left-end',\n 'none',\n ],\n },\n },\n};\n\nexport const selfManagedIconOnly = (): TemplateResult => html`\n ${overlayStyles}\n <sp-action-button class=\"self-managed\">\n <sp-icon-edit slot=\"icon\"></sp-icon-edit>\n <sp-tooltip self-managed>This is a tooltip.</sp-tooltip>\n </sp-action-button>\n <hr />\n\n <sp-action-button class=\"self-managed\">\n <sp-icon-edit slot=\"icon\"></sp-icon-edit>\n </sp-action-button>\n`;\n\nexport const selfManagedFieldLabel = (): TemplateResult => html`\n <div style=\"display: inline-flex; flex-direction: column;\">\n <sp-field-label for=\"input\">\n <sp-icon-edit></sp-icon-edit>\n <sp-tooltip self-managed>Edit</sp-tooltip>\n </sp-field-label>\n <sp-textfield id=\"input\"></sp-textfield>\n </div>\n`;\n\nexport const draggable = (): TemplateResult => {\n const handleDragStart = (event: DragEvent): void => {\n event.dataTransfer?.setDragImage(\n event.target as HTMLElement,\n event.offsetX,\n event.offsetY\n );\n };\n return html`\n <sp-button>\n A simple button that should not be included in the DragImage\n </sp-button>\n <div\n draggable=\"true\"\n id=\"draggableElement\"\n @dragstart=${handleDragStart}\n style=\"margin-top: 16px; cursor: move; padding: 24px; border: red 1px solid;\"\n >\n <p>Click and drag me to show DragImage</p>\n <sp-action-button>\n Action Button with self managed tooltip\n <sp-tooltip self-managed placement=\"bottom\">\n My Tooltip\n </sp-tooltip>\n </sp-action-button>\n </div>\n `;\n};\n\ndraggable.swc_vrt = {\n skip: true,\n};\n\ndraggable.parameters = {\n // Disables Chromatic's snapshotting on a global level\n chromatic: { disableSnapshot: true },\n};\n"],
5
+ "mappings": "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",
6
6
  "names": []
7
7
  }