diff --git a/packages/card/README.md b/packages/card/README.md index 90221a78904..9d3465dc978 100644 --- a/packages/card/README.md +++ b/packages/card/README.md @@ -31,18 +31,14 @@ import { Card } from '@spectrum-web-components/card'; ```html demo - Demo Image + Demo Image
Footer
 ``` ```html demo - Demo Image + Demo Image
Footer
 ``` @@ -57,7 +53,7 @@ By default, the heading for an `` is applied via the `heading` attribut style="--spectrum-card-body-header-height: auto;" >

Card Heading

- +
Footer
 ``` @@ -74,7 +70,7 @@ An `` can be provided with an `href` attribute in order for it to act a href="https://opensource.adobe.com/spectrum-web-components" target="_blank" > - Demo Image + Demo Image ``` @@ -89,7 +85,7 @@ Normal cards can contain a heading, a subheading, a cover photo, and a footer. ```html - + JPG photo
Footer
 @@ -101,11 +97,7 @@ Cards can be supplied an `actions` via a names slot. ```html - Demo Image + Demo Image
Footer
- +
10/15/18
Footer
 @@ -158,7 +150,7 @@ When leveraging the `asset` attribute, a card can be declared as representing a subheading="JPG Photo" asset="file" > - +
File Name
10/15/18
Footer
@@ -171,7 +163,7 @@ Or a `folder`: ```html
- +
Folder Name
10/15/18
Footer
@@ -184,7 +176,7 @@ Quiet cards will also accept `actions` via a named slot. ```html
- +
10/15/18
- +
10/15/18
Footer
 @@ -225,11 +217,7 @@ Gallery cards can contain a heading, a subheading, an image preview, a descripti ```html demo
- Demo Image + Demo Image
Footer
@@ -240,7 +228,7 @@ A `horizontal` card: ```html demo
- + - Demo Image + Demo Image
Footer
- - - ${this.variant !== 'quiet' && !this.horizontal - ? html` - - ` - : nothing} - `; - } + protected renderImage(): TemplateResult { + const hasPreview = + this.variant === 'gallery' || + this.variant === 'quiet' || + this.horizontal; - protected get renderCoverImage(): TemplateResult { return html` - - + + ${this.variant !== 'quiet' && !this.horizontal ? html` @@ -244,24 +236,7 @@ export class Card extends LikeAnchor( `; } - protected get images(): TemplateResult[] { - const images: TemplateResult[] = []; - if (this.hasPreview) images.push(this.renderPreviewImage); - if (this.hasCoverPhoto) images.push(this.renderCoverImage); - return images; - } - - private renderImage(): TemplateResult[] { - if (this.horizontal) { - return this.images; - } - if (this.variant !== 'standard') { - return [this.renderPreviewImage]; - } - return this.images; - } - - private get renderSubtitleAndDescription(): TemplateResult { + protected renderSubtitleAndDescription(): TemplateResult { return html`
${this.subheading} @@ -272,12 +247,16 @@ export class Card extends LikeAnchor( protected override render(): TemplateResult { return html` - ${this.renderImage()} + ${when( + this.hasImage(), + () => this.renderImage(), + () => nothing + )}
- ${this.renderHeading} + ${this.renderHeading()} ${this.variant === 'gallery' - ? this.renderSubtitleAndDescription + ? this.renderSubtitleAndDescription() : nothing} ${this.variant !== 'quiet' || this.size !== 's' ? html` @@ -293,7 +272,7 @@ export class Card extends LikeAnchor( ${this.variant !== 'gallery' ? html`
- ${this.renderSubtitleAndDescription} + ${this.renderSubtitleAndDescription()}
` : nothing} diff --git a/packages/card/src/card.css b/packages/card/src/card.css index 6eb3084ae94..c1c68f3c1dc 100644 --- a/packages/card/src/card.css +++ b/packages/card/src/card.css @@ -25,14 +25,7 @@ governing permissions and limitations under the License. .action-button { flex-grow: 0; -} - -:host([dir='ltr']) .action-button { - margin-left: auto; -} - -:host([dir='rtl']) .action-button { - margin-right: auto; + margin-inline-start: auto; } /* The description slot has a psuedo-element that also needs to receive the font styling. @@ -44,19 +37,15 @@ slot[name='description'] { ); } -#preview + #cover-photo { - display: none; -} - #cover-photo ::slotted(*), -:host(:not([variant='quiet'])) #preview ::slotted(*) { - width: 100%; +#preview ::slotted(*) { + inline-size: 100%; display: block; /* Since we're using tags instead of background-image for the cover photo, we need an additional object-fit property to preserve the aspect ratio of the image In spectrum-css, background-size is used */ - object-fit: cover; + object-fit: var(--mod-card-image-object-fit, cover); } :host(:not([variant='gallery'])) #preview ::slotted(*) { @@ -88,11 +77,6 @@ sp-popover { width: var(--spectrum-card-title-width); } -.subtitle { - /* Override until https://github.com/adobe/spectrum-css/issues/1054 is fixed */ - text-transform: none; -} - :host:before, :host:after { pointer-events: none; diff --git a/packages/card/stories/card.stories.ts b/packages/card/stories/card.stories.ts index 4e5251530df..7f5869978ae 100644 --- a/packages/card/stories/card.stories.ts +++ b/packages/card/stories/card.stories.ts @@ -9,17 +9,17 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ +import '@spectrum-web-components/action-menu/sp-action-menu.js'; import { html, TemplateResult } from '@spectrum-web-components/base'; - +import { ifDefined } from '@spectrum-web-components/base/src/directives.js'; import '@spectrum-web-components/card/sp-card.js'; -import { landscape, portrait } from './images'; import '@spectrum-web-components/icons-workflow/icons/sp-icon-file-txt.js'; -import '@spectrum-web-components/textfield/sp-textfield.js'; -import '@spectrum-web-components/action-menu/sp-action-menu.js'; -import '@spectrum-web-components/menu/sp-menu.js'; -import '@spectrum-web-components/menu/sp-menu-item.js'; -import '@spectrum-web-components/menu/sp-menu-divider.js'; import '@spectrum-web-components/link/sp-link.js'; +import '@spectrum-web-components/menu/sp-menu-divider.js'; +import '@spectrum-web-components/menu/sp-menu-item.js'; +import '@spectrum-web-components/menu/sp-menu.js'; +import '@spectrum-web-components/textfield/sp-textfield.js'; +import { landscape, portrait } from './images'; export default { component: 'sp-card', @@ -56,7 +56,7 @@ export const Default = (args: StoryArgs): TemplateResult => { ?horizontal=${args.horizontal} style="width: 200px;" > - Demo Graphic + Demo Graphic
Footer
`; @@ -102,7 +102,7 @@ export const SmallQuiet = (args: StoryArgs): TemplateResult => { Save Selection Make Work Path - Demo Graphic + Demo Graphic `; }; @@ -146,7 +146,7 @@ export const href = (args: StoryArgs): TemplateResult => { Save Selection Make Work Path - Demo Graphic + Demo Graphic `; }; @@ -162,7 +162,7 @@ export const actions = (args: StoryArgs): TemplateResult => { ?horizontal=${args.horizontal} style="width: 200px;" > - Demo Graphic + Demo Graphic
Footer
{ ?horizontal=${args.horizontal} > Demo Graphic { ?horizontal=${args.horizontal} style="width: 208px; height: 264px" > - Demo Graphic + Demo Graphic +
10/15/18
+ +
+ `; +}; + +export const quietContained = (args: StoryArgs): TemplateResult => { + return html` +
+ + Demo Graphic
10/15/18
@@ -241,7 +263,7 @@ export const quietFile = (args: StoryArgs): TemplateResult => { ?horizontal=${args.horizontal} style="width: 208px; height: 264px" > - Demo Graphic + Demo Graphic
File Name
10/15/18
@@ -259,7 +281,7 @@ export const quietFolder = (args: StoryArgs): TemplateResult => { ?horizontal=${args.horizontal} style="width: 208px; height: 264px" > - Demo Graphic + Demo Graphic
Folder Name
10/15/18
@@ -277,7 +299,7 @@ export const quietActions = (args: StoryArgs): TemplateResult => { ?horizontal=${args.horizontal} style="width: 208px; height: 264px" > - Demo Graphic + Demo Graphic
10/15/18
{ subheading="JPG" > @@ -328,7 +350,7 @@ export const horizontalWithHREF = (args: StoryArgs): TemplateResult => { target="_blank" > @@ -342,14 +364,14 @@ export const smallQuiet = (args: StoryArgs): TemplateResult => { return html`
- Demo Graphic + Demo Graphic
Footer
{ " ?horizontal=${args.horizontal} > - Demo Graphic + Demo Graphic Demo Graphic diff --git a/packages/card/test/card.test.ts b/packages/card/test/card.test.ts index 83af9f45dda..51eea61896c 100644 --- a/packages/card/test/card.test.ts +++ b/packages/card/test/card.test.ts @@ -10,78 +10,69 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -import '@spectrum-web-components/card/sp-card.js'; -import { Card } from '@spectrum-web-components/card'; +import { elementUpdated, expect, fixture, html } from '@open-wc/testing'; import '@spectrum-web-components/action-menu/sp-action-menu.js'; -import '@spectrum-web-components/menu/sp-menu.js'; -import '@spectrum-web-components/menu/sp-menu-item.js'; +import { Card } from '@spectrum-web-components/card'; +import '@spectrum-web-components/card/sp-card.js'; +import { Checkbox } from '@spectrum-web-components/checkbox/src/Checkbox.js'; import '@spectrum-web-components/menu/sp-menu-divider.js'; -import { elementUpdated, expect, fixture, html } from '@open-wc/testing'; - +import '@spectrum-web-components/menu/sp-menu-item.js'; +import '@spectrum-web-components/menu/sp-menu.js'; +import { spy } from 'sinon'; +import { sendMouse } from '../../../test/plugins/browser.js'; +import { + spaceEvent, + testForLitDevWarnings, +} from '../../../test/testing-helpers.js'; import { Default, Horizontal, href, StoryArgs, } from '../stories/card.stories.js'; -import { Checkbox } from '@spectrum-web-components/checkbox/src/Checkbox'; -import { spy } from 'sinon'; -import { spaceEvent } from '../../../test/testing-helpers.js'; -import { sendMouse } from '../../../test/plugins/browser.js'; -import { testForLitDevWarnings } from '../../../test/testing-helpers.js'; describe('card', () => { testForLitDevWarnings( async () => - await fixture( - html` - - Slotted Preview -
Footer
- - ` - ) - ); - it('loads', async () => { - const el = await fixture( - html` + await fixture(html` Slotted Preview
Footer
 - ` - ); + `) + ); + it('loads', async () => { + const el = await fixture(html` + + Slotted Preview +
Footer
+ + `); await elementUpdated(el); await expect(el).to.be.accessible(); }); it('loads - [quiet]', async () => { - const el = await fixture( - html` - - Slotted Preview -
10/15/18
-
Footer
- - ` - ); + const el = await fixture(html` + + Slotted Preview +
10/15/18
+
Footer
+ + `); await elementUpdated(el); @@ -89,63 +80,55 @@ describe('card', () => { }); it('loads - [quiet][small]', async () => { - const el = await fixture( - html` - (html` + + Demo Graphic +
Footer
+ - Demo Graphic -
Footer
- - - Deselect - Select Inverse - Feather... - Select and Mask... - - Save Selection - Make Work Path - - - - ` - ); + + Deselect + Select Inverse + Feather... + Select and Mask... + + Save Selection + Make Work Path + + + + `); await elementUpdated(el); await expect(el).to.be.accessible(); }); it('loads - [gallery]', async () => { - const el = await fixture( - html` - - Slotted Preview -
10/15/18
-
Footer
- - ` - ); + const el = await fixture(html` + + Slotted Preview +
10/15/18
+
Footer
+ + `); await elementUpdated(el); @@ -367,18 +350,16 @@ describe('card', () => { }); it('displays the `heading` attribute as `.title`', async () => { const testHeading = 'This is a test heading'; - const el = await fixture( - html` - - Slotted Preview -
Footer
- - ` - ); + const el = await fixture(html` + + Slotted Preview +
Footer
+ + `); await elementUpdated(el); @@ -393,19 +374,17 @@ describe('card', () => { }); it('displays the slotted content as `.title`', async () => { const testHeading = 'This is a test heading'; - const el = await fixture( - html` - -

${testHeading}

- Slotted Preview -
Footer
- - ` - ); + const el = await fixture(html` + +

${testHeading}

+ Slotted Preview +
Footer
+ + `); await elementUpdated(el); diff --git a/tools/grid/stories/grid.stories.ts b/tools/grid/stories/grid.stories.ts index 5f972d8f480..fc0eccf5a34 100644 --- a/tools/grid/stories/grid.stories.ts +++ b/tools/grid/stories/grid.stories.ts @@ -68,7 +68,7 @@ const renderItem = ( >