diff --git a/2nd-gen/packages/core/components/asset/Asset.base.ts b/2nd-gen/packages/core/components/asset/Asset.base.ts index de8d51a9bb7..f152e05fa57 100644 --- a/2nd-gen/packages/core/components/asset/Asset.base.ts +++ b/2nd-gen/packages/core/components/asset/Asset.base.ts @@ -10,14 +10,64 @@ * governing permissions and limitations under the License. */ +import { PropertyValues } from 'lit'; import { property } from 'lit/decorators.js'; import { SpectrumElement } from '@spectrum-web-components/core/shared/base/index.js'; +import { ASSET_VARIANTS, type AssetVariant } from './Asset.types.js'; + export abstract class AssetBase extends SpectrumElement { + // ───────────────────────── + // API TO OVERRIDE + // ───────────────────────── + + /** + * @internal + * + * A readonly array of all valid variants for the asset. + * + * This is an actual internal property, intended not for customer use + */ + static readonly VARIANTS: readonly AssetVariant[] = ASSET_VARIANTS; + + // ───────────────── + // SHARED API + // ───────────────── + + /** + * The variant of the asset. When not provided, slot content is rendered (e.g., an image). + */ @property({ type: String, reflect: true }) - public variant: 'file' | 'folder' | undefined; + public variant: AssetVariant | undefined; + /** + * Accessible label for the asset’s file or folder variant. + */ @property() public label = ''; + + // ────────────────────── + // IMPLEMENTATION + // ────────────────────── + + protected override updated(changes: PropertyValues): void { + super.updated(changes); + if (window.__swc?.DEBUG) { + const constructor = this.constructor as typeof AssetBase; + if ( + typeof this.variant !== 'undefined' && + !constructor.VARIANTS.includes(this.variant) + ) { + window.__swc.warn( + this, + `<${this.localName}> element expects the "variant" attribute to be one of the following:`, + 'https://opensource.adobe.com/spectrum-web-components/components/asset/', + { + issues: [...constructor.VARIANTS], + } + ); + } + } + } } diff --git a/2nd-gen/packages/core/components/asset/Asset.types.ts b/2nd-gen/packages/core/components/asset/Asset.types.ts new file mode 100644 index 00000000000..a0609d4a4f8 --- /dev/null +++ b/2nd-gen/packages/core/components/asset/Asset.types.ts @@ -0,0 +1,15 @@ +/** + * Copyright 2025 Adobe. All rights reserved. + * This file is licensed to you under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. You may obtain a copy + * of the License at http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software distributed under + * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS + * OF ANY KIND, either express or implied. See the License for the specific language + * governing permissions and limitations under the License. + */ + +export const ASSET_VARIANTS = ['file', 'folder'] as const; + +export type AssetVariant = (typeof ASSET_VARIANTS)[number]; diff --git a/2nd-gen/packages/core/components/asset/index.ts b/2nd-gen/packages/core/components/asset/index.ts index 6e056c33d49..abc233ce7a3 100644 --- a/2nd-gen/packages/core/components/asset/index.ts +++ b/2nd-gen/packages/core/components/asset/index.ts @@ -10,3 +10,4 @@ * governing permissions and limitations under the License. */ export * from './Asset.base.js'; +export * from './Asset.types.js'; diff --git a/2nd-gen/packages/swc/components/asset/Asset.ts b/2nd-gen/packages/swc/components/asset/Asset.ts index 8115e7c992c..0e46c78355b 100644 --- a/2nd-gen/packages/swc/components/asset/Asset.ts +++ b/2nd-gen/packages/swc/components/asset/Asset.ts @@ -11,6 +11,7 @@ */ import { CSSResultArray, html, TemplateResult } from 'lit'; +import { classMap } from 'lit/directives/class-map.js'; import { AssetBase } from '@spectrum-web-components/core/components/asset'; @@ -18,17 +19,17 @@ import styles from './asset.css'; const file = (label: string): TemplateResult => html` @@ -36,17 +37,17 @@ const file = (label: string): TemplateResult => html` const folder = (label: string): TemplateResult => html` @@ -54,19 +55,41 @@ const folder = (label: string): TemplateResult => html` /** * @element swc-asset - * @slot - content to be displayed in the asset when an acceptable value for `file` is not present + * @slot - content to be displayed when no `variant` is set (typically an `` element) + * + * @example + * + * Example image + * + * + * @example + * + * + * @example + * */ export class Asset extends AssetBase { + // ────────────────────────────── + // RENDERING & STYLING + // ────────────────────────────── + public static override get styles(): CSSResultArray { return [styles]; } protected override render(): TemplateResult { - if (this.variant === 'file') { - return file(this.label); - } else if (this.variant === 'folder') { - return folder(this.label); - } - return html` `; + return html` +
+ ${this.variant === 'file' + ? file(this.label) + : this.variant === 'folder' + ? folder(this.label) + : html` `} +
+ `; } } diff --git a/2nd-gen/packages/swc/components/asset/asset.css b/2nd-gen/packages/swc/components/asset/asset.css index 5c757d6ff36..72704c57fc4 100644 --- a/2nd-gen/packages/swc/components/asset/asset.css +++ b/2nd-gen/packages/swc/components/asset/asset.css @@ -1,8 +1,9 @@ -/** +/*! * Copyright 2025 Adobe. All rights reserved. + * * This file is licensed to you under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at http://www.apache.org/licenses/LICENSE-2.0 + * of the License at * * Unless required by applicable law or agreed to in writing, software distributed under * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS @@ -11,81 +12,42 @@ */ :host { - --spectrum-asset-folder-background: var( - --highcontrast-asset-icon-background-color, - var( - --mod-asset-folder-background-color, - var(--spectrum-asset-folder-background-color) - ) - ); - --spectrum-asset-file-background: var( - --highcontrast-asset-icon-background-color, - var( - --mod-asset-file-background-color, - var(--spectrum-asset-file-background-color) - ) - ); - --spectrum-asset-folder-outline: var( - --mod-asset-icon-outline-color, - var(--spectrum-asset-icon-outline-color) - ); - --spectrum-asset-file-outline: var( - --mod-asset-icon-outline-color, - var(--spectrum-asset-icon-outline-color) - ); + display: flex; +} +.spectrum-Asset { + display: flex; + align-items: center; + justify-content: center; inline-size: 100%; block-size: 100%; - justify-content: center; - align-items: center; - display: flex; - - --spectrum-asset-folder-background-color: var( - --system-asset-folder-background-color - ); - --spectrum-asset-file-background-color: var( - --system-asset-file-background-color - ); - --spectrum-asset-icon-outline-color: var(--system-asset-icon-outline-color); } -::slotted(*) { +.spectrum-Asset-image { max-inline-size: 100%; max-block-size: 100%; object-fit: contain; - transition: opacity var(--spectrum-animation-duration-100); } -.file, -.folder { - inline-size: max(48px, min(100%, 80px)); - inline-size: max( - var(--mod-asset-icon-min-width, 48px), - min(100%, var(--mod-asset-icon-max-width, 80px)) - ); +.spectrum-Asset-folder, +.spectrum-Asset-file { + inline-size: clamp(48px, 100%, 80px); block-size: 100%; margin: 20px; - margin: var(--mod-asset-icon-margin, 20px); -} - -.folderBackground { - fill: var(--spectrum-asset-folder-background); } -.fileBackground { - fill: var(--spectrum-asset-file-background); +.spectrum-Asset-folderBackground { + fill: var(--spectrum-gray-200); } -.folderOutline { - fill: var(--spectrum-asset-folder-outline); +.spectrum-Asset-fileBackground { + fill: var(--spectrum-gray-25); } -.fileOutline { - fill: var(--spectrum-asset-file-outline); +.spectrum-Asset-folderOutline { + fill: var(--spectrum-gray-500); } -@media (forced-colors: active) { - :host { - --highcontrast-asset-icon-background-color: currentcolor; - } +.spectrum-Asset-fileOutline { + fill: var(--spectrum-gray-500); } diff --git a/2nd-gen/packages/swc/components/asset/stories/asset.stories.ts b/2nd-gen/packages/swc/components/asset/stories/asset.stories.ts index 0f5b9ce294a..375dc5eb870 100644 --- a/2nd-gen/packages/swc/components/asset/stories/asset.stories.ts +++ b/2nd-gen/packages/swc/components/asset/stories/asset.stories.ts @@ -10,35 +10,76 @@ * governing permissions and limitations under the License. */ -import { html } from 'lit'; -import type { Meta, StoryObj } from '@storybook/web-components'; +import type { Meta, StoryObj as Story } from '@storybook/web-components'; +import { getStorybookHelpers } from '@wc-toolkit/storybook-helpers'; + +import { Asset } from '@adobe/swc/asset'; import '@adobe/swc/asset'; +// ──────────────── +// METADATA +// ──────────────── + +const { events, args, argTypes, template } = getStorybookHelpers('swc-asset'); + +argTypes.variant = { + ...argTypes.variant, + control: { type: 'select' }, + options: [undefined, ...Asset.VARIANTS], +}; + +/** + * Use an asset element to visually represent a file, folder, or image. + * File and folder representations center themselves within the available space. + * Images are contained to the element’s size and centered. + */ const meta: Meta = { title: 'Asset', component: 'swc-asset', - argTypes: { - variant: { - control: { type: 'select' }, - options: ['file', 'folder', undefined], + args, + argTypes, + parameters: { + actions: { + handles: events, }, }, + tags: ['migrated'], + render: (args) => template(args), }; export default meta; -type Story = StoryObj; -// export const Default: Story = { -// render: (args) => html` `, -// }; +// ─────────────── +// STORIES +// ─────────────── + +args['default-slot'] = IMAGE_PLACEHOLDER_STRING(); export const Default: Story = { - render: (args) => html` `, + args: { + variant: undefined, + }, +}; + +export const File: Story = { + args: { + variant: 'file', + }, + tags: ['!dev'], +}; - // render: () => html` - // - // Demo Graphic - // - // `, +export const Folder: Story = { + args: { + variant: 'folder', + }, + tags: ['!dev'], }; + +// ──────────────────────── +// HELPER FUNCTIONS +// ──────────────────────── + +function IMAGE_PLACEHOLDER_STRING(): string { + return `Example image`; +}