@spectrum-web-components/card 0.12.0 → 0.12.2
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 +3 -3
- package/sp-card.dev.js +1 -0
- package/sp-card.dev.js.map +1 -1
- package/sp-card.js +1 -1
- package/sp-card.js.map +2 -2
- package/src/Card.dev.js +28 -16
- package/src/Card.dev.js.map +1 -1
- package/src/Card.js +4 -4
- package/src/Card.js.map +2 -2
- package/src/card.css.dev.js +1 -0
- package/src/card.css.dev.js.map +1 -1
- package/src/card.css.js +1 -1
- package/src/card.css.js.map +2 -2
- package/src/index.dev.js +1 -0
- package/src/index.dev.js.map +1 -1
- package/src/index.js +1 -1
- package/src/index.js.map +1 -1
- package/src/spectrum-card.css.dev.js +1 -0
- package/src/spectrum-card.css.dev.js.map +1 -1
- package/src/spectrum-card.css.js +1 -1
- package/src/spectrum-card.css.js.map +2 -2
- package/stories/card.stories.js +163 -54
- package/stories/card.stories.js.map +1 -1
- package/stories/images.js +3 -1
- package/stories/images.js.map +1 -1
- package/test/benchmark/test-basic.js +5 -1
- package/test/benchmark/test-basic.js.map +1 -1
- package/test/card.test-vrt.js +4 -1
- package/test/card.test-vrt.js.map +1 -1
- package/test/card.test.js +279 -10
- package/test/card.test.js.map +2 -2
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["spectrum-card.css.ts"],
|
|
4
4
|
"sourcesContent": ["/*\nCopyright 2022 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 { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host([size=s]){--spectrum-card-quiet-body-header-margin-top:var(\n--spectrum-card-s-quiet-body-header-margin-top,var(--spectrum-global-dimension-size-175)\n);--spectrum-card-quiet-body-header-height:var(\n--spectrum-card-s-quiet-body-header-height,var(--spectrum-global-dimension-size-150)\n);--spectrum-card-quiet-preview-padding:var(\n--spectrum-card-s-quiet-preview-padding,var(--spectrum-global-dimension-size-150)\n);--spectrum-card-quiet-min-width:var(\n--spectrum-card-s-quiet-min-width,var(--spectrum-global-dimension-size-1200)\n);--spectrum-card-quiet-min-height:var(\n--spectrum-card-s-quiet-min-height,var(--spectrum-global-dimension-size-900)\n);--spectrum-card-quiet-border-radius:var(\n--spectrum-card-s-quiet-border-radius,var(--spectrum-alias-border-radius-regular)\n);--spectrum-card-quiet-border-size:var(\n--spectrum-card-s-quiet-border-size,var(--spectrum-alias-border-size-thin)\n);--spectrum-card-body-header-height:var(\n--spectrum-card-s-body-header-height,var(--spectrum-global-dimension-size-150)\n);--spectrum-card-body-content-min-height:var(\n--spectrum-card-s-body-content-min-height,var(--spectrum-global-dimension-size-175)\n);--spectrum-card-body-content-margin-top:var(\n--spectrum-card-s-body-content-margin-top,var(--spectrum-global-dimension-size-75)\n);--spectrum-card-body-padding-top:var(\n--spectrum-card-s-body-padding-top,var(--spectrum-global-dimension-size-250)\n);--spectrum-card-body-padding-bottom:var(\n--spectrum-card-s-body-padding-bottom,var(--spectrum-global-dimension-size-250)\n);--spectrum-card-body-padding-left:var(\n--spectrum-card-s-body-padding-left,var(--spectrum-global-dimension-size-300)\n);--spectrum-card-body-padding-right:var(\n--spectrum-card-s-body-padding-right,var(--spectrum-global-dimension-size-300)\n);--spectrum-card-coverphoto-height:var(\n--spectrum-card-s-coverphoto-height,var(--spectrum-global-dimension-size-1700)\n);--spectrum-card-coverphoto-border-bottom-size:var(\n--spectrum-card-s-coverphoto-border-bottom-size,var(--spectrum-alias-border-size-thin)\n);--spectrum-card-checkbox-margin:var(\n--spectrum-card-s-checkbox-margin,var(--spectrum-global-dimension-size-125)\n);--spectrum-card-title-padding-right:var(\n--spectrum-card-s-title-padding-right,var(--spectrum-global-dimension-size-100)\n);--spectrum-card-subtitle-text-size:var(\n--spectrum-card-s-subtitle-text-size,var(--spectrum-global-dimension-font-size-50)\n);--spectrum-card-subtitle-padding-right:var(\n--spectrum-card-s-subtitle-padding-right,var(--spectrum-global-dimension-size-100)\n);--spectrum-card-actions-margin:var(\n--spectrum-card-s-actions-margin,var(--spectrum-global-dimension-size-125)\n);--spectrum-card-footer-padding-top:var(\n--spectrum-card-s-footer-padding-top,var(--spectrum-global-dimension-size-175)\n);--spectrum-card-footer-border-top-size:var(\n--spectrum-card-s-footer-border-top-size,var(--spectrum-global-dimension-size-10)\n);--spectrum-card-min-width:var(\n--spectrum-card-s-min-width,var(--spectrum-global-dimension-size-1250)\n);--spectrum-card-border-radius:var(\n--spectrum-card-s-border-radius,var(--spectrum-alias-border-radius-regular)\n);--spectrum-card-border-size:var(\n--spectrum-card-s-border-size,var(--spectrum-alias-border-size-thin)\n)}:host([size=m]){--spectrum-card-quiet-body-header-margin-top:var(\n--spectrum-card-m-quiet-body-header-margin-top,var(--spectrum-global-dimension-size-175)\n);--spectrum-card-quiet-body-header-height:var(\n--spectrum-card-m-quiet-body-header-height,var(--spectrum-global-dimension-size-225)\n);--spectrum-card-quiet-preview-padding:var(\n--spectrum-card-m-quiet-preview-padding,var(--spectrum-global-dimension-size-250)\n);--spectrum-card-quiet-min-width:var(\n--spectrum-card-m-quiet-min-width,var(--spectrum-global-dimension-size-2500)\n);--spectrum-card-quiet-min-height:var(\n--spectrum-card-m-quiet-min-height,var(--spectrum-global-dimension-size-1700)\n);--spectrum-card-quiet-border-radius:var(\n--spectrum-card-m-quiet-border-radius,var(--spectrum-alias-border-radius-regular)\n);--spectrum-card-quiet-border-size:var(\n--spectrum-card-m-quiet-border-size,var(--spectrum-alias-border-size-thin)\n);--spectrum-card-body-header-height:var(\n--spectrum-card-m-body-header-height,var(--spectrum-global-dimension-size-225)\n);--spectrum-card-body-content-min-height:var(\n--spectrum-card-m-body-content-min-height,var(--spectrum-global-dimension-size-175)\n);--spectrum-card-body-content-margin-top:var(\n--spectrum-card-m-body-content-margin-top,var(--spectrum-global-dimension-size-75)\n);--spectrum-card-body-padding-top:var(\n--spectrum-card-m-body-padding-top,var(--spectrum-global-dimension-size-250)\n);--spectrum-card-body-padding-bottom:var(\n--spectrum-card-m-body-padding-bottom,var(--spectrum-global-dimension-size-250)\n);--spectrum-card-body-padding-left:var(\n--spectrum-card-m-body-padding-left,var(--spectrum-global-dimension-size-300)\n);--spectrum-card-body-padding-right:var(\n--spectrum-card-m-body-padding-right,var(--spectrum-global-dimension-size-300)\n);--spectrum-card-coverphoto-height:var(\n--spectrum-card-m-coverphoto-height,var(--spectrum-global-dimension-size-1700)\n);--spectrum-card-coverphoto-border-bottom-size:var(\n--spectrum-card-m-coverphoto-border-bottom-size,var(--spectrum-alias-border-size-thin)\n);--spectrum-card-checkbox-margin:var(\n--spectrum-card-m-checkbox-margin,var(--spectrum-global-dimension-size-200)\n);--spectrum-card-title-padding-right:var(\n--spectrum-card-m-title-padding-right,var(--spectrum-global-dimension-size-100)\n);--spectrum-card-subtitle-text-size:var(\n--spectrum-card-m-subtitle-text-size,var(--spectrum-global-dimension-font-size-50)\n);--spectrum-card-subtitle-padding-right:var(\n--spectrum-card-m-subtitle-padding-right,var(--spectrum-global-dimension-size-100)\n);--spectrum-card-actions-margin:var(\n--spectrum-card-m-actions-margin,var(--spectrum-global-dimension-size-125)\n);--spectrum-card-footer-padding-top:var(\n--spectrum-card-m-footer-padding-top,var(--spectrum-global-dimension-size-175)\n);--spectrum-card-footer-border-top-size:var(\n--spectrum-card-m-footer-border-top-size,var(--spectrum-global-dimension-size-10)\n);--spectrum-card-min-width:var(\n--spectrum-card-m-min-width,var(--spectrum-global-dimension-size-2500)\n);--spectrum-card-border-radius:var(\n--spectrum-card-m-border-radius,var(--spectrum-alias-border-radius-regular)\n);--spectrum-card-border-size:var(\n--spectrum-card-m-border-size,var(--spectrum-alias-border-size-thin)\n)}:host{border:var(--spectrum-card-border-size) solid transparent;border-radius:var(--spectrum-card-border-radius);box-sizing:border-box;display:inline-flex;flex-direction:column;min-width:var(--spectrum-card-min-width);position:relative;text-decoration:none}:host(:focus){outline:none}:host(:focus) .actions,:host(:focus) .quick-actions,:host(:hover) .actions,:host(:hover) .quick-actions,:host([focused]) .actions,:host([focused]) .quick-actions,:host([selected]) .actions,:host([selected]) .quick-actions{opacity:1;pointer-events:all;visibility:visible}:host([dir=ltr]) .actions{right:var(\n--spectrum-card-actions-margin\n)}:host([dir=rtl]) .actions{left:var(\n--spectrum-card-actions-margin\n)}.actions{height:var(\n--spectrum-quickactions-height,var(--spectrum-global-dimension-size-500)\n);position:absolute;top:var(--spectrum-card-actions-margin);visibility:hidden}:host([dir=ltr]) .quick-actions{left:var(\n--spectrum-card-checkbox-margin\n)}:host([dir=rtl]) .quick-actions{right:var(\n--spectrum-card-checkbox-margin\n)}.quick-actions{height:var(\n--spectrum-quickactions-height,var(--spectrum-global-dimension-size-500)\n);position:absolute;top:var(--spectrum-card-checkbox-margin);visibility:hidden;width:var(\n--spectrum-quickactions-height,var(--spectrum-global-dimension-size-500)\n)}:host([dir=ltr]) .quick-actions .checkbox,:host([dir=rtl]) .quick-actions .checkbox{margin:0}#cover-photo{align-items:center;background-position:50%;background-size:cover;border-bottom:var(--spectrum-card-coverphoto-border-bottom-size) solid transparent;border-bottom-left-radius:0;border-bottom-right-radius:0;border-top-left-radius:calc(var(--spectrum-card-border-radius) - 1px);border-top-right-radius:calc(var(--spectrum-card-border-radius) - 1px);box-sizing:border-box;display:flex;height:var(\n--spectrum-card-coverphoto-height\n);justify-content:center}:host([dir=ltr]) .body{padding-right:var(\n--spectrum-card-body-padding-right\n)}:host([dir=rtl]) .body{padding-left:var(\n--spectrum-card-body-padding-right\n)}:host([dir=ltr]) .body{padding-left:var(\n--spectrum-card-body-padding-left\n)}:host([dir=rtl]) .body{padding-right:var(\n--spectrum-card-body-padding-left\n)}.body{padding-bottom:var(--spectrum-card-body-padding-bottom);padding-top:var(\n--spectrum-card-body-padding-top\n)}.body:last-child{border-bottom-left-radius:var(--spectrum-card-border-radius);border-bottom-right-radius:var(--spectrum-card-border-radius);border-top-left-radius:0;border-top-right-radius:0}#preview{border-bottom-left-radius:0;border-bottom-right-radius:0;border-top-left-radius:calc(var(--spectrum-card-border-radius) - 1px);border-top-right-radius:calc(var(--spectrum-card-border-radius) - 1px);overflow:hidden}.header{height:var(--spectrum-card-body-header-height)}.content{display:flex;height:var(--spectrum-card-body-content-min-height);margin-top:var(--spectrum-card-body-content-margin-top)}:host([dir=ltr]) .title{padding-right:var(\n--spectrum-card-title-padding-right\n)}:host([dir=rtl]) .title{padding-left:var(\n--spectrum-card-title-padding-right\n)}.title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host([dir=ltr]) .subtitle{padding-right:var(\n--spectrum-card-subtitle-padding-right\n)}:host([dir=rtl]) .subtitle{padding-left:var(\n--spectrum-card-subtitle-padding-right\n)}::slotted([slot=description]){font-size:var(\n--spectrum-card-subtitle-text-size\n)}:host([dir=ltr]) .subtitle+::slotted([slot=description]):before{padding-right:var(\n--spectrum-card-subtitle-padding-right\n)}:host([dir=rtl]) .subtitle+::slotted([slot=description]):before{padding-left:var(\n--spectrum-card-subtitle-padding-right\n)}.subtitle+::slotted([slot=description]):before{content:\"\u2022\"}:host([dir=ltr]) ::slotted([slot=footer]){margin-right:var(\n--spectrum-card-body-padding-right\n)}:host([dir=rtl]) ::slotted([slot=footer]){margin-left:var(\n--spectrum-card-body-padding-right\n)}:host([dir=ltr]) ::slotted([slot=footer]){margin-left:var(\n--spectrum-card-body-padding-left\n)}:host([dir=rtl]) ::slotted([slot=footer]){margin-right:var(\n--spectrum-card-body-padding-left\n)}::slotted([slot=footer]){border-top:var(--spectrum-card-footer-border-top-size) solid;padding-bottom:var(--spectrum-card-body-padding-bottom);padding-top:var(\n--spectrum-card-footer-padding-top\n)}.header{align-items:baseline;display:flex}.action-button{align-self:center;display:flex;flex:1;justify-content:flex-end}:host([variant=quiet]) #preview{min-height:var(\n--spectrum-card-quiet-min-height\n)}:host([variant=gallery]),:host([variant=quiet]){border-radius:0;border-width:0;height:100%;min-width:var(--spectrum-card-quiet-min-width);overflow:visible}:host([variant=gallery]) #preview,:host([variant=quiet]) #preview{border-radius:var(--spectrum-card-quiet-border-radius);box-sizing:border-box;flex:1;margin:0 auto;overflow:visible;padding:var(--spectrum-card-quiet-preview-padding);position:relative;transition:background-color var(--spectrum-global-animation-duration-100,.13s);width:100%}:host([dir=ltr][variant=gallery]) #preview:before,:host([dir=ltr][variant=quiet]) #preview:before{left:0}:host([dir=rtl][variant=gallery]) #preview:before,:host([dir=rtl][variant=quiet]) #preview:before{right:0}:host([variant=gallery]) #preview:before,:host([variant=quiet]) #preview:before{border:var(--spectrum-card-quiet-border-size) solid transparent;border-radius:inherit;box-sizing:border-box;content:\"\";height:100%;position:absolute;top:0;width:100%}:host([variant=gallery][drop-target]) #preview,:host([variant=quiet][drop-target]) #preview{transition:none}:host([variant=gallery]) .header,:host([variant=quiet]) .header{height:var(\n--spectrum-card-quiet-body-header-height\n);margin-top:var(--spectrum-card-quiet-body-header-margin-top)}:host([variant=gallery]) .body,:host([variant=quiet]) .body{padding:0}:host([horizontal]){flex-direction:row}:host([dir=ltr][horizontal]) #preview{border-top-left-radius:var(\n--spectrum-card-quiet-border-radius\n)}:host([dir=rtl][horizontal]) #preview{border-top-right-radius:var(\n--spectrum-card-quiet-border-radius\n)}:host([dir=ltr][horizontal]) #preview{border-top-right-radius:0}:host([dir=rtl][horizontal]) #preview{border-top-left-radius:0}:host([dir=ltr][horizontal]) #preview{border-bottom-left-radius:var(\n--spectrum-card-quiet-border-radius\n)}:host([dir=rtl][horizontal]) #preview{border-bottom-right-radius:var(\n--spectrum-card-quiet-border-radius\n)}:host([dir=ltr][horizontal]) #preview{border-bottom-right-radius:0}:host([dir=rtl][horizontal]) #preview{border-bottom-left-radius:0}:host([dir=ltr][horizontal]) #preview{border-right:var(--spectrum-card-border-size) solid transparent}:host([dir=rtl][horizontal]) #preview{border-left:var(--spectrum-card-border-size) solid transparent}:host([horizontal]) #preview{align-items:center;display:flex;flex-shrink:0;justify-content:center;min-height:0;padding:var(--spectrum-global-dimension-size-175)}:host([horizontal]) .content,:host([horizontal]) .header{height:auto;margin-top:0}:host([dir=ltr][horizontal]) .title{padding-right:0}:host([dir=rtl][horizontal]) .title{padding-left:0}:host([horizontal]) .body{display:flex;flex-direction:column;flex-shrink:0;justify-content:center;padding-bottom:0;padding-left:var(--spectrum-global-dimension-size-200);padding-right:var(--spectrum-global-dimension-size-200);padding-top:0}:host([variant=gallery]){min-width:0}:host([variant=gallery]) #preview{border-radius:0;padding:0}:host{background-color:var(\n--spectrum-card-m-background-color,var(--spectrum-global-color-gray-50)\n);border-color:var(\n--spectrum-card-m-border-color,var(--spectrum-global-color-gray-200)\n)}:host(:hover){border-color:var(\n--spectrum-card-m-border-color-hover,var(--spectrum-global-color-gray-400)\n)}:host(.focus-visible),:host([selected]){border-color:var(\n--spectrum-card-m-border-color-key-focus,var(--spectrum-alias-border-color-key-focus)\n);box-shadow:0 0 0 1px var(\n--spectrum-card-m-border-color-key-focus,var(--spectrum-alias-border-color-key-focus)\n)}:host(:focus-visible),:host([selected]){border-color:var(\n--spectrum-card-m-border-color-key-focus,var(--spectrum-alias-border-color-key-focus)\n);box-shadow:0 0 0 1px var(\n--spectrum-card-m-border-color-key-focus,var(--spectrum-alias-border-color-key-focus)\n)}:host([drop-target]){background-color:var(--spectrum-alias-highlight-selected);border-color:var(\n--spectrum-card-m-border-color-key-focus,var(--spectrum-alias-border-color-key-focus)\n);box-shadow:0 0 0 1px var(\n--spectrum-card-m-border-color-key-focus,var(--spectrum-alias-border-color-key-focus)\n)}.subtitle{color:var(\n--spectrum-card-m-description-text-color,var(--spectrum-global-color-gray-700)\n)}::slotted([slot=description]){color:var(\n--spectrum-card-m-description-text-color,var(--spectrum-global-color-gray-700)\n)}#cover-photo{background-color:var(\n--spectrum-card-m-coverphoto-background-color,var(--spectrum-global-color-gray-200)\n);border-bottom-color:var(\n--spectrum-card-m-coverphoto-border-color,var(--spectrum-global-color-gray-200)\n)}::slotted([slot=footer]){border-color:var(\n--spectrum-card-m-border-color,var(--spectrum-global-color-gray-200)\n)}:host([variant=gallery]),:host([variant=quiet]){background-color:transparent;border-color:transparent}:host([variant=gallery]) #preview,:host([variant=quiet]) #preview{background-color:var(\n--spectrum-card-m-quiet-preview-background-color,var(--spectrum-global-color-gray-200)\n)}:host([variant=gallery]:hover),:host([variant=quiet]:hover){border-color:transparent}:host([variant=gallery]:hover) #preview,:host([variant=quiet]:hover) #preview{background-color:var(\n--spectrum-card-m-quiet-preview-background-color-hover,var(--spectrum-global-color-gray-300)\n)}:host([variant=gallery].focus-visible),:host([variant=gallery][selected]),:host([variant=quiet].focus-visible),:host([variant=quiet][selected]){border-color:transparent;box-shadow:none}:host([variant=gallery]:focus-visible),:host([variant=gallery][selected]),:host([variant=quiet]:focus-visible),:host([variant=quiet][selected]){border-color:transparent;box-shadow:none}:host([variant=gallery].focus-visible) #preview,:host([variant=gallery][selected]) #preview,:host([variant=quiet].focus-visible) #preview,:host([variant=quiet][selected]) #preview{background-color:var(\n--spectrum-card-m-quiet-preview-background-color,var(--spectrum-global-color-gray-200)\n)}:host([variant=gallery]:focus-visible) #preview,:host([variant=gallery][selected]) #preview,:host([variant=quiet]:focus-visible) #preview,:host([variant=quiet][selected]) #preview{background-color:var(\n--spectrum-card-m-quiet-preview-background-color,var(--spectrum-global-color-gray-200)\n)}:host([variant=gallery].focus-visible) #preview:before,:host([variant=gallery][selected]) #preview:before,:host([variant=quiet].focus-visible) #preview:before,:host([variant=quiet][selected]) #preview:before{border-color:var(\n--spectrum-card-m-quiet-border-color-selected,var(--spectrum-global-color-blue-500)\n);box-shadow:0 0 0 1px var(\n--spectrum-card-m-quiet-border-color-selected,var(--spectrum-global-color-blue-500)\n)}:host([variant=gallery]:focus-visible) #preview:before,:host([variant=gallery][selected]) #preview:before,:host([variant=quiet]:focus-visible) #preview:before,:host([variant=quiet][selected]) #preview:before{border-color:var(\n--spectrum-card-m-quiet-border-color-selected,var(--spectrum-global-color-blue-500)\n);box-shadow:0 0 0 1px var(\n--spectrum-card-m-quiet-border-color-selected,var(--spectrum-global-color-blue-500)\n)}:host([variant=gallery][drop-target]),:host([variant=quiet][drop-target]){background-color:transparent;border-color:transparent;box-shadow:none}:host([variant=gallery][drop-target]) #preview,:host([variant=quiet][drop-target]) #preview{background-color:var(\n--spectrum-alias-highlight-selected\n)}:host([variant=gallery][drop-target]) #preview:before,:host([variant=quiet][drop-target]) #preview:before{border-color:var(\n--spectrum-card-m-quiet-border-color-selected,var(--spectrum-global-color-blue-500)\n);box-shadow:0 0 0 1px var(\n--spectrum-card-m-quiet-border-color-selected,var(--spectrum-global-color-blue-500)\n)}:host([variant=gallery][drop-target]) .spectrum-Asset-fileBackground,:host([variant=gallery][drop-target]) .spectrum-Asset-folderBackground,:host([variant=quiet][drop-target]) .spectrum-Asset-fileBackground,:host([variant=quiet][drop-target]) .spectrum-Asset-folderBackground{fill:var(\n--spectrum-alias-highlight-selected\n)}:host([variant=gallery][drop-target]) .spectrum-Asset-fileOutline,:host([variant=gallery][drop-target]) .spectrum-Asset-folderOutline,:host([variant=quiet][drop-target]) .spectrum-Asset-fileOutline,:host([variant=quiet][drop-target]) .spectrum-Asset-folderOutline{fill:var(\n--spectrum-card-m-quiet-border-color-selected,var(--spectrum-global-color-blue-500)\n)}:host([variant=gallery]) .title,:host([variant=quiet]) .title{color:var(\n--spectrum-card-m-quiet-title-text-color,var(--spectrum-global-color-gray-800)\n)}:host([variant=gallery]) .subtitle,:host([variant=quiet]) .subtitle{color:var(\n--spectrum-card-m-quiet-subtitle-text-color,var(--spectrum-global-color-gray-700)\n)}:host([horizontal]:hover) #preview{border-color:var(\n--spectrum-card-m-border-color-hover,var(--spectrum-global-color-gray-400)\n)}:host([horizontal]) #preview{background-color:var(\n--spectrum-card-m-quiet-preview-background-color,var(--spectrum-global-color-gray-200)\n);border-color:var(\n--spectrum-card-m-border-color,var(--spectrum-global-color-gray-200)\n)}\n`;\nexport default styles;"],
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": []
|
|
5
|
+
"mappings": "aAWA,OAAS,OAAAA,MAAW,gCACpB,MAAMC,EAASD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAyOf,eAAeC",
|
|
6
|
+
"names": ["css", "styles"]
|
|
7
7
|
}
|
package/stories/card.stories.js
CHANGED
|
@@ -1,22 +1,76 @@
|
|
|
1
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
import { html } from "@spectrum-web-components/base";
|
|
3
|
+
import "@spectrum-web-components/card/sp-card.js";
|
|
4
|
+
import { landscape, portrait } from "./images";
|
|
5
|
+
import "@spectrum-web-components/icons-workflow/icons/sp-icon-file-txt.js";
|
|
6
|
+
import "@spectrum-web-components/textfield/sp-textfield.js";
|
|
7
|
+
import "@spectrum-web-components/action-menu/sp-action-menu.js";
|
|
8
|
+
import "@spectrum-web-components/menu/sp-menu.js";
|
|
9
|
+
import "@spectrum-web-components/menu/sp-menu-item.js";
|
|
10
|
+
import "@spectrum-web-components/menu/sp-menu-divider.js";
|
|
11
|
+
import "@spectrum-web-components/link/sp-link.js";
|
|
12
|
+
export default {
|
|
13
|
+
component: "sp-card",
|
|
14
|
+
title: "Card",
|
|
15
|
+
args: {
|
|
16
|
+
size: "m",
|
|
17
|
+
horizontal: false
|
|
18
|
+
},
|
|
19
|
+
argTypes: {
|
|
20
|
+
horizontal: {
|
|
21
|
+
name: "horizontal",
|
|
22
|
+
type: { name: "boolean", required: false },
|
|
23
|
+
table: {
|
|
24
|
+
type: { summary: "boolean" },
|
|
25
|
+
defaultValue: { summary: false }
|
|
26
|
+
},
|
|
27
|
+
control: {
|
|
28
|
+
type: "boolean"
|
|
29
|
+
}
|
|
30
|
+
},
|
|
31
|
+
size: {
|
|
32
|
+
name: "size",
|
|
33
|
+
type: { name: "string", required: false },
|
|
34
|
+
table: {
|
|
35
|
+
type: { summary: '"s" | "m"' },
|
|
36
|
+
defaultValue: { summary: "m" }
|
|
37
|
+
},
|
|
38
|
+
control: { type: "text" }
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
};
|
|
42
|
+
export const Default = (args) => {
|
|
43
|
+
return html`
|
|
2
44
|
<sp-card
|
|
3
45
|
heading="Card Heading"
|
|
4
46
|
subheading="JPG"
|
|
5
|
-
size=${
|
|
6
|
-
?horizontal=${
|
|
47
|
+
size=${args.size}
|
|
48
|
+
?horizontal=${args.horizontal}
|
|
7
49
|
>
|
|
8
|
-
<img slot="cover-photo" src=${
|
|
50
|
+
<img slot="cover-photo" src=${portrait} alt="Demo Graphic" />
|
|
9
51
|
<div slot="footer">Footer</div>
|
|
10
52
|
</sp-card>
|
|
11
|
-
`;
|
|
53
|
+
`;
|
|
54
|
+
};
|
|
55
|
+
Default.args = {};
|
|
56
|
+
export const href = (args) => {
|
|
57
|
+
const { onClick } = args;
|
|
58
|
+
return html`
|
|
12
59
|
<sp-card
|
|
13
60
|
heading="Card Heading"
|
|
14
61
|
subheading="JPG"
|
|
15
|
-
.size=${
|
|
62
|
+
.size=${args.size}
|
|
16
63
|
toggles
|
|
17
|
-
?horizontal=${
|
|
64
|
+
?horizontal=${args.horizontal}
|
|
18
65
|
href="https://opensource.adobe.com/spectrum-web-components"
|
|
19
|
-
@click=${
|
|
66
|
+
@click=${(event) => {
|
|
67
|
+
const composedTarget = event.composedPath()[0];
|
|
68
|
+
if (composedTarget.id !== "like-anchor")
|
|
69
|
+
return;
|
|
70
|
+
event.stopPropagation();
|
|
71
|
+
event.preventDefault();
|
|
72
|
+
onClick && onClick(event);
|
|
73
|
+
}}
|
|
20
74
|
>
|
|
21
75
|
<div slot="footer">
|
|
22
76
|
Footer with a
|
|
@@ -31,16 +85,22 @@ import{html as t}from"@spectrum-web-components/base";import"@spectrum-web-compon
|
|
|
31
85
|
<sp-menu-item>Save Selection</sp-menu-item>
|
|
32
86
|
<sp-menu-item disabled>Make Work Path</sp-menu-item>
|
|
33
87
|
</sp-action-menu>
|
|
34
|
-
<img slot="cover-photo" src=${
|
|
88
|
+
<img slot="cover-photo" src=${portrait} alt="Demo Graphic" />
|
|
35
89
|
</sp-card>
|
|
36
|
-
|
|
90
|
+
`;
|
|
91
|
+
};
|
|
92
|
+
href.argTypes = {
|
|
93
|
+
onClick: { action: "link click" }
|
|
94
|
+
};
|
|
95
|
+
export const actions = (args) => {
|
|
96
|
+
return html`
|
|
37
97
|
<sp-card
|
|
38
98
|
heading="Card Heading"
|
|
39
99
|
subheading="JPG"
|
|
40
|
-
size=${
|
|
41
|
-
?horizontal=${
|
|
100
|
+
size=${args.size}
|
|
101
|
+
?horizontal=${args.horizontal}
|
|
42
102
|
>
|
|
43
|
-
<img slot="cover-photo" src=${
|
|
103
|
+
<img slot="cover-photo" src=${portrait} alt="Demo Graphic" />
|
|
44
104
|
<div slot="footer">Footer</div>
|
|
45
105
|
<sp-action-menu slot="actions" placement="bottom-end">
|
|
46
106
|
<sp-menu-item>Deselect</sp-menu-item>
|
|
@@ -52,82 +112,100 @@ import{html as t}from"@spectrum-web-components/base";import"@spectrum-web-compon
|
|
|
52
112
|
<sp-menu-item disabled>Make Work Path</sp-menu-item>
|
|
53
113
|
</sp-action-menu>
|
|
54
114
|
</sp-card>
|
|
55
|
-
|
|
115
|
+
`;
|
|
116
|
+
};
|
|
117
|
+
export const Gallery = (args) => {
|
|
118
|
+
return html`
|
|
56
119
|
<sp-card
|
|
57
120
|
variant="gallery"
|
|
58
121
|
heading="Card Heading"
|
|
59
122
|
subheading="JPG"
|
|
60
|
-
size=${
|
|
61
|
-
?horizontal=${
|
|
123
|
+
size=${args.size}
|
|
124
|
+
?horizontal=${args.horizontal}
|
|
62
125
|
>
|
|
63
126
|
<img
|
|
64
127
|
slot="preview"
|
|
65
|
-
src=${
|
|
128
|
+
src=${landscape}
|
|
66
129
|
style="object-fit: cover"
|
|
67
130
|
alt="Demo Graphic"
|
|
68
131
|
/>
|
|
69
132
|
<div slot="description">10/15/18</div>
|
|
70
133
|
</sp-card>
|
|
71
|
-
|
|
134
|
+
`;
|
|
135
|
+
};
|
|
136
|
+
export const noPreviewImage = (args) => {
|
|
137
|
+
return html`
|
|
72
138
|
<sp-card
|
|
73
139
|
heading="Card Heading"
|
|
74
140
|
subheading="No preview image"
|
|
75
|
-
size=${
|
|
76
|
-
?horizontal=${
|
|
141
|
+
size=${args.size}
|
|
142
|
+
?horizontal=${args.horizontal}
|
|
77
143
|
>
|
|
78
144
|
<div slot="footer">Footer</div>
|
|
79
145
|
</sp-card>
|
|
80
|
-
|
|
146
|
+
`;
|
|
147
|
+
};
|
|
148
|
+
export const Quiet = (args) => {
|
|
149
|
+
return html`
|
|
81
150
|
<div style="width: 208px; height: 264px">
|
|
82
151
|
<sp-card
|
|
83
152
|
variant="quiet"
|
|
84
153
|
heading="Card Heading"
|
|
85
154
|
subheading="JPG"
|
|
86
|
-
size=${
|
|
87
|
-
?horizontal=${
|
|
155
|
+
size=${args.size}
|
|
156
|
+
?horizontal=${args.horizontal}
|
|
88
157
|
>
|
|
89
|
-
<img src=${
|
|
158
|
+
<img src=${portrait} alt="Demo Graphic" slot="preview" />
|
|
90
159
|
<div slot="description">10/15/18</div>
|
|
91
160
|
</sp-card>
|
|
92
161
|
</div>
|
|
93
|
-
|
|
162
|
+
`;
|
|
163
|
+
};
|
|
164
|
+
export const quietFile = (args) => {
|
|
165
|
+
return html`
|
|
94
166
|
<div style="width: 208px; height: 264px">
|
|
95
167
|
<sp-card
|
|
96
168
|
variant="quiet"
|
|
97
169
|
subheading="JPG"
|
|
98
170
|
asset="file"
|
|
99
|
-
size=${
|
|
100
|
-
?horizontal=${
|
|
171
|
+
size=${args.size}
|
|
172
|
+
?horizontal=${args.horizontal}
|
|
101
173
|
>
|
|
102
|
-
<img src=${
|
|
174
|
+
<img src=${portrait} alt="Demo Graphic" slot="preview" />
|
|
103
175
|
<div slot="heading">File Name</div>
|
|
104
176
|
<div slot="description">10/15/18</div>
|
|
105
177
|
</sp-card>
|
|
106
178
|
</div>
|
|
107
|
-
|
|
179
|
+
`;
|
|
180
|
+
};
|
|
181
|
+
export const quietFolder = (args) => {
|
|
182
|
+
return html`
|
|
108
183
|
<div style="width: 208px; height: 264px">
|
|
109
184
|
<sp-card
|
|
110
185
|
variant="quiet"
|
|
111
186
|
subheading="JPG"
|
|
112
187
|
asset="folder"
|
|
113
|
-
size=${
|
|
114
|
-
?horizontal=${
|
|
188
|
+
size=${args.size}
|
|
189
|
+
?horizontal=${args.horizontal}
|
|
115
190
|
>
|
|
116
|
-
<img src=${
|
|
191
|
+
<img src=${portrait} alt="Demo Graphic" slot="preview" />
|
|
117
192
|
<div slot="heading">Folder Name</div>
|
|
118
193
|
<div slot="description">10/15/18</div>
|
|
119
194
|
</sp-card>
|
|
120
195
|
</div>
|
|
121
|
-
|
|
196
|
+
`;
|
|
197
|
+
};
|
|
198
|
+
export const quietActions = (args) => {
|
|
199
|
+
return html`
|
|
122
200
|
<div style="width: 208px; height: 264px">
|
|
123
201
|
<sp-card
|
|
124
202
|
variant="quiet"
|
|
125
203
|
heading="Card Heading"
|
|
126
204
|
subheading="JPG"
|
|
127
|
-
size=${
|
|
128
|
-
?horizontal=${
|
|
205
|
+
size=${args.size}
|
|
206
|
+
?horizontal=${args.horizontal}
|
|
129
207
|
>
|
|
130
|
-
<img src=${
|
|
208
|
+
<img src=${portrait} alt="Demo Graphic" slot="preview" />
|
|
131
209
|
<div slot="description">10/15/18</div>
|
|
132
210
|
<sp-action-menu slot="actions" placement="bottom-end">
|
|
133
211
|
<sp-menu-item>Deselect</sp-menu-item>
|
|
@@ -140,26 +218,36 @@ import{html as t}from"@spectrum-web-components/base";import"@spectrum-web-compon
|
|
|
140
218
|
</sp-action-menu>
|
|
141
219
|
</sp-card>
|
|
142
220
|
</div>
|
|
143
|
-
`;
|
|
221
|
+
`;
|
|
222
|
+
};
|
|
223
|
+
quietActions.storyName = "Quiet w/ Actions";
|
|
224
|
+
export const small = (args) => {
|
|
225
|
+
return html`
|
|
144
226
|
<sp-card
|
|
145
227
|
style="--spectrum-card-title-padding-right: 0; --spectrum-card-title-padding-left: 0;"
|
|
146
|
-
size=${
|
|
147
|
-
?horizontal=${
|
|
228
|
+
size=${args.size}
|
|
229
|
+
?horizontal=${args.horizontal}
|
|
148
230
|
heading="Card Heading"
|
|
149
231
|
subheading="JPG"
|
|
150
232
|
>
|
|
151
233
|
<img
|
|
152
234
|
slot="cover-photo"
|
|
153
|
-
src=${
|
|
235
|
+
src=${portrait}
|
|
154
236
|
alt="Demo Graphic"
|
|
155
237
|
style="width: 140px"
|
|
156
238
|
/>
|
|
157
239
|
<div slot="footer">Footer</div>
|
|
158
240
|
</sp-card>
|
|
159
|
-
`;
|
|
241
|
+
`;
|
|
242
|
+
};
|
|
243
|
+
small.args = {
|
|
244
|
+
size: "s"
|
|
245
|
+
};
|
|
246
|
+
export const smallHorizontal = (args) => {
|
|
247
|
+
return html`
|
|
160
248
|
<sp-card
|
|
161
|
-
size=${
|
|
162
|
-
?horizontal=${
|
|
249
|
+
size=${args.size}
|
|
250
|
+
?horizontal=${args.horizontal}
|
|
163
251
|
heading="Card Heading"
|
|
164
252
|
subheading="JPG"
|
|
165
253
|
>
|
|
@@ -168,10 +256,17 @@ import{html as t}from"@spectrum-web-components/base";import"@spectrum-web-compon
|
|
|
168
256
|
style="width: 36px; height: 36px;"
|
|
169
257
|
></sp-icon-file-txt>
|
|
170
258
|
</sp-card>
|
|
171
|
-
`;
|
|
259
|
+
`;
|
|
260
|
+
};
|
|
261
|
+
smallHorizontal.args = {
|
|
262
|
+
horizontal: true,
|
|
263
|
+
size: "s"
|
|
264
|
+
};
|
|
265
|
+
export const smallHorizontalWithHREF = (args) => {
|
|
266
|
+
return html`
|
|
172
267
|
<sp-card
|
|
173
|
-
.size=${
|
|
174
|
-
?horizontal=${
|
|
268
|
+
.size=${args.size}
|
|
269
|
+
?horizontal=${args.horizontal}
|
|
175
270
|
heading="Card Heading"
|
|
176
271
|
subheading="JPG"
|
|
177
272
|
href="https://opensource.adobe.com/spectrum-web-components"
|
|
@@ -182,16 +277,23 @@ import{html as t}from"@spectrum-web-components/base";import"@spectrum-web-compon
|
|
|
182
277
|
style="width: 36px; height: 36px;"
|
|
183
278
|
></sp-icon-file-txt>
|
|
184
279
|
</sp-card>
|
|
185
|
-
`;
|
|
280
|
+
`;
|
|
281
|
+
};
|
|
282
|
+
smallHorizontalWithHREF.args = {
|
|
283
|
+
horizontal: true,
|
|
284
|
+
size: "s"
|
|
285
|
+
};
|
|
286
|
+
export const smallQuiet = (args) => {
|
|
287
|
+
return html`
|
|
186
288
|
<div style="width: 115px">
|
|
187
289
|
<sp-card
|
|
188
|
-
size=${
|
|
189
|
-
?horizontal=${
|
|
290
|
+
size=${args.size}
|
|
291
|
+
?horizontal=${args.horizontal}
|
|
190
292
|
heading="Card Heading"
|
|
191
293
|
subheading="JPG"
|
|
192
294
|
variant="quiet"
|
|
193
295
|
>
|
|
194
|
-
<img src=${
|
|
296
|
+
<img src=${portrait} alt="Demo Graphic" slot="preview" />
|
|
195
297
|
<div slot="footer">Footer</div>
|
|
196
298
|
<sp-action-menu slot="actions" placement="bottom-end">
|
|
197
299
|
<sp-menu-item>Deselect</sp-menu-item>
|
|
@@ -204,7 +306,13 @@ import{html as t}from"@spectrum-web-components/base";import"@spectrum-web-compon
|
|
|
204
306
|
</sp-action-menu>
|
|
205
307
|
</sp-card>
|
|
206
308
|
</div>
|
|
207
|
-
`;
|
|
309
|
+
`;
|
|
310
|
+
};
|
|
311
|
+
smallQuiet.args = {
|
|
312
|
+
size: "s"
|
|
313
|
+
};
|
|
314
|
+
export const SlottedHeading = (args) => {
|
|
315
|
+
return html`
|
|
208
316
|
<style>
|
|
209
317
|
.slotted-textfield-heading {
|
|
210
318
|
width: 100%;
|
|
@@ -218,10 +326,10 @@ import{html as t}from"@spectrum-web-components/base";import"@spectrum-web-compon
|
|
|
218
326
|
--spectrum-card-body-header-height: auto;
|
|
219
327
|
--spectrum-alias-single-line-width: 100%;
|
|
220
328
|
"
|
|
221
|
-
size=${
|
|
222
|
-
?horizontal=${
|
|
329
|
+
size=${args.size}
|
|
330
|
+
?horizontal=${args.horizontal}
|
|
223
331
|
>
|
|
224
|
-
<img slot="cover-photo" src=${
|
|
332
|
+
<img slot="cover-photo" src=${portrait} alt="Demo Graphic" />
|
|
225
333
|
<sp-textfield
|
|
226
334
|
class="slotted-textfield-heading"
|
|
227
335
|
slot="heading"
|
|
@@ -240,4 +348,5 @@ import{html as t}from"@spectrum-web-components/base";import"@spectrum-web-compon
|
|
|
240
348
|
</sp-action-menu>
|
|
241
349
|
</sp-card>
|
|
242
350
|
`;
|
|
351
|
+
};
|
|
243
352
|
//# sourceMappingURL=card.stories.js.map
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["card.stories.ts"],
|
|
4
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 { html, TemplateResult } from '@spectrum-web-components/base';\n\nimport '@spectrum-web-components/card/sp-card.js';\nimport { landscape, portrait } from './images';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-file-txt.js';\nimport '@spectrum-web-components/textfield/sp-textfield.js';\nimport '@spectrum-web-components/action-menu/sp-action-menu.js';\nimport '@spectrum-web-components/menu/sp-menu.js';\nimport '@spectrum-web-components/menu/sp-menu-item.js';\nimport '@spectrum-web-components/menu/sp-menu-divider.js';\nimport '@spectrum-web-components/link/sp-link.js';\n\nexport default {\n component: 'sp-card',\n title: 'Card',\n args: {\n size: 'm',\n horizontal: false,\n },\n argTypes: {\n horizontal: {\n name: 'horizontal',\n type: { name: 'boolean', required: false },\n table: {\n type: { summary: 'boolean' },\n defaultValue: { summary: false },\n },\n control: {\n type: 'boolean',\n },\n },\n size: {\n name: 'size',\n type: { name: 'string', required: false },\n table: {\n type: { summary: '\"s\" | \"m\"' },\n defaultValue: { summary: 'm' },\n },\n control: { type: 'text' },\n },\n },\n};\n\nexport interface StoryArgs {\n horizontal?: boolean;\n size?: 's' | 'm';\n onClick?: ((event: Event) => void) | undefined;\n}\n\nexport const Default = (args: StoryArgs): TemplateResult => {\n return html`\n <sp-card\n heading=\"Card Heading\"\n subheading=\"JPG\"\n size=${args.size}\n ?horizontal=${args.horizontal}\n >\n <img slot=\"cover-photo\" src=${portrait} alt=\"Demo Graphic\" />\n <div slot=\"footer\">Footer</div>\n </sp-card>\n `;\n};\nDefault.args = {};\n\nexport const href = (args: StoryArgs): TemplateResult => {\n const { onClick } = args;\n return html`\n <sp-card\n heading=\"Card Heading\"\n subheading=\"JPG\"\n .size=${args.size}\n toggles\n ?horizontal=${args.horizontal}\n href=\"https://opensource.adobe.com/spectrum-web-components\"\n @click=${(event: Event) => {\n const composedTarget = event.composedPath()[0] as HTMLElement;\n if (composedTarget.id !== 'like-anchor') return;\n event.stopPropagation();\n event.preventDefault();\n onClick && onClick(event);\n }}\n >\n <div slot=\"footer\">\n Footer with a\n <sp-link href=\"https://google.com\">link to Google</sp-link>\n </div>\n <sp-action-menu slot=\"actions\" placement=\"bottom-end\">\n <sp-menu-item>Deselect</sp-menu-item>\n <sp-menu-item>Select Inverse</sp-menu-item>\n <sp-menu-item>Feather...</sp-menu-item>\n <sp-menu-item>Select and Mask...</sp-menu-item>\n <sp-menu-divider></sp-menu-divider>\n <sp-menu-item>Save Selection</sp-menu-item>\n <sp-menu-item disabled>Make Work Path</sp-menu-item>\n </sp-action-menu>\n <img slot=\"cover-photo\" src=${portrait} alt=\"Demo Graphic\" />\n </sp-card>\n `;\n};\nhref.argTypes = {\n onClick: { action: 'link click' },\n};\n\nexport const actions = (args: StoryArgs): TemplateResult => {\n return html`\n <sp-card\n heading=\"Card Heading\"\n subheading=\"JPG\"\n size=${args.size}\n ?horizontal=${args.horizontal}\n >\n <img slot=\"cover-photo\" src=${portrait} alt=\"Demo Graphic\" />\n <div slot=\"footer\">Footer</div>\n <sp-action-menu slot=\"actions\" placement=\"bottom-end\">\n <sp-menu-item>Deselect</sp-menu-item>\n <sp-menu-item>Select Inverse</sp-menu-item>\n <sp-menu-item>Feather...</sp-menu-item>\n <sp-menu-item>Select and Mask...</sp-menu-item>\n <sp-menu-divider></sp-menu-divider>\n <sp-menu-item>Save Selection</sp-menu-item>\n <sp-menu-item disabled>Make Work Path</sp-menu-item>\n </sp-action-menu>\n </sp-card>\n `;\n};\n\nexport const Gallery = (args: StoryArgs): TemplateResult => {\n return html`\n <sp-card\n variant=\"gallery\"\n heading=\"Card Heading\"\n subheading=\"JPG\"\n size=${args.size}\n ?horizontal=${args.horizontal}\n >\n <img\n slot=\"preview\"\n src=${landscape}\n style=\"object-fit: cover\"\n alt=\"Demo Graphic\"\n />\n <div slot=\"description\">10/15/18</div>\n </sp-card>\n `;\n};\n\nexport const noPreviewImage = (args: StoryArgs): TemplateResult => {\n return html`\n <sp-card\n heading=\"Card Heading\"\n subheading=\"No preview image\"\n size=${args.size}\n ?horizontal=${args.horizontal}\n >\n <div slot=\"footer\">Footer</div>\n </sp-card>\n `;\n};\n\nexport const Quiet = (args: StoryArgs): TemplateResult => {\n return html`\n <div style=\"width: 208px; height: 264px\">\n <sp-card\n variant=\"quiet\"\n heading=\"Card Heading\"\n subheading=\"JPG\"\n size=${args.size}\n ?horizontal=${args.horizontal}\n >\n <img src=${portrait} alt=\"Demo Graphic\" slot=\"preview\" />\n <div slot=\"description\">10/15/18</div>\n </sp-card>\n </div>\n `;\n};\n\nexport const quietFile = (args: StoryArgs): TemplateResult => {\n return html`\n <div style=\"width: 208px; height: 264px\">\n <sp-card\n variant=\"quiet\"\n subheading=\"JPG\"\n asset=\"file\"\n size=${args.size}\n ?horizontal=${args.horizontal}\n >\n <img src=${portrait} alt=\"Demo Graphic\" slot=\"preview\" />\n <div slot=\"heading\">File Name</div>\n <div slot=\"description\">10/15/18</div>\n </sp-card>\n </div>\n `;\n};\n\nexport const quietFolder = (args: StoryArgs): TemplateResult => {\n return html`\n <div style=\"width: 208px; height: 264px\">\n <sp-card\n variant=\"quiet\"\n subheading=\"JPG\"\n asset=\"folder\"\n size=${args.size}\n ?horizontal=${args.horizontal}\n >\n <img src=${portrait} alt=\"Demo Graphic\" slot=\"preview\" />\n <div slot=\"heading\">Folder Name</div>\n <div slot=\"description\">10/15/18</div>\n </sp-card>\n </div>\n `;\n};\n\nexport const quietActions = (args: StoryArgs): TemplateResult => {\n return html`\n <div style=\"width: 208px; height: 264px\">\n <sp-card\n variant=\"quiet\"\n heading=\"Card Heading\"\n subheading=\"JPG\"\n size=${args.size}\n ?horizontal=${args.horizontal}\n >\n <img src=${portrait} alt=\"Demo Graphic\" slot=\"preview\" />\n <div slot=\"description\">10/15/18</div>\n <sp-action-menu slot=\"actions\" placement=\"bottom-end\">\n <sp-menu-item>Deselect</sp-menu-item>\n <sp-menu-item>Select Inverse</sp-menu-item>\n <sp-menu-item>Feather...</sp-menu-item>\n <sp-menu-item>Select and Mask...</sp-menu-item>\n <sp-menu-divider></sp-menu-divider>\n <sp-menu-item>Save Selection</sp-menu-item>\n <sp-menu-item disabled>Make Work Path</sp-menu-item>\n </sp-action-menu>\n </sp-card>\n </div>\n `;\n};\n\nquietActions.storyName = 'Quiet w/ Actions';\n\nexport const small = (args: StoryArgs): TemplateResult => {\n return html`\n <sp-card\n style=\"--spectrum-card-title-padding-right: 0; --spectrum-card-title-padding-left: 0;\"\n size=${args.size}\n ?horizontal=${args.horizontal}\n heading=\"Card Heading\"\n subheading=\"JPG\"\n >\n <img\n slot=\"cover-photo\"\n src=${portrait}\n alt=\"Demo Graphic\"\n style=\"width: 140px\"\n />\n <div slot=\"footer\">Footer</div>\n </sp-card>\n `;\n};\nsmall.args = {\n size: 's',\n};\n\nexport const smallHorizontal = (args: StoryArgs): TemplateResult => {\n return html`\n <sp-card\n size=${args.size}\n ?horizontal=${args.horizontal}\n heading=\"Card Heading\"\n subheading=\"JPG\"\n >\n <sp-icon-file-txt\n slot=\"preview\"\n style=\"width: 36px; height: 36px;\"\n ></sp-icon-file-txt>\n </sp-card>\n `;\n};\nsmallHorizontal.args = {\n horizontal: true,\n size: 's',\n};\n\nexport const smallHorizontalWithHREF = (args: StoryArgs): TemplateResult => {\n return html`\n <sp-card\n .size=${args.size}\n ?horizontal=${args.horizontal}\n heading=\"Card Heading\"\n subheading=\"JPG\"\n href=\"https://opensource.adobe.com/spectrum-web-components\"\n target=\"_blank\"\n >\n <sp-icon-file-txt\n slot=\"preview\"\n style=\"width: 36px; height: 36px;\"\n ></sp-icon-file-txt>\n </sp-card>\n `;\n};\nsmallHorizontalWithHREF.args = {\n horizontal: true,\n size: 's',\n};\n\nexport const smallQuiet = (args: StoryArgs): TemplateResult => {\n return html`\n <div style=\"width: 115px\">\n <sp-card\n size=${args.size}\n ?horizontal=${args.horizontal}\n heading=\"Card Heading\"\n subheading=\"JPG\"\n variant=\"quiet\"\n >\n <img src=${portrait} alt=\"Demo Graphic\" slot=\"preview\" />\n <div slot=\"footer\">Footer</div>\n <sp-action-menu slot=\"actions\" placement=\"bottom-end\">\n <sp-menu-item>Deselect</sp-menu-item>\n <sp-menu-item>Select Inverse</sp-menu-item>\n <sp-menu-item>Feather...</sp-menu-item>\n <sp-menu-item>Select and Mask...</sp-menu-item>\n <sp-menu-divider></sp-menu-divider>\n <sp-menu-item>Save Selection</sp-menu-item>\n <sp-menu-item disabled>Make Work Path</sp-menu-item>\n </sp-action-menu>\n </sp-card>\n </div>\n `;\n};\nsmallQuiet.args = {\n size: 's',\n};\n\nexport const SlottedHeading = (args: StoryArgs): TemplateResult => {\n return html`\n <style>\n .slotted-textfield-heading {\n width: 100%;\n }\n </style>\n <sp-card\n style=\"\n --spectrum-card-title-width: 100%;\n --spectrum-card-title-padding-right: 0;\n --spectrum-card-title-padding-left: 0;\n --spectrum-card-body-header-height: auto;\n --spectrum-alias-single-line-width: 100%;\n \"\n size=${args.size}\n ?horizontal=${args.horizontal}\n >\n <img slot=\"cover-photo\" src=${portrait} alt=\"Demo Graphic\" />\n <sp-textfield\n class=\"slotted-textfield-heading\"\n slot=\"heading\"\n value=\"Apr 23 Project\"\n quiet\n ></sp-textfield>\n <div slot=\"subheading\">Last modified on 6/17/2020, 3:37 PM</div>\n <sp-action-menu slot=\"actions\" placement=\"bottom-end\">\n <sp-menu-item>Deselect</sp-menu-item>\n <sp-menu-item>Select Inverse</sp-menu-item>\n <sp-menu-item>Feather...</sp-menu-item>\n <sp-menu-item>Select and Mask...</sp-menu-item>\n <sp-menu-divider></sp-menu-divider>\n <sp-menu-item>Save Selection</sp-menu-item>\n <sp-menu-item disabled>Make Work Path</sp-menu-item>\n </sp-action-menu>\n </sp-card>\n `;\n};\n"],
|
|
5
|
-
"mappings": "AAWA,
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|