-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Bug 1839965 - Create default shopping card. r=shopping-reviewers,flue…
…nt-reviewers,flod,kpatenio,jhirsch Differential Revision: https://phabricator.services.mozilla.com/D182250 UltraBlame original commit: 0ad42d8961e77a5704876c869b2c501869810f61
- Loading branch information
Showing
8 changed files
with
253 additions
and
31 deletions.
There are no files selected for viewing
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,80 @@ | ||
| /* This Source Code Form is subject to the terms of the Mozilla Public | ||
| * License, v. 2.0. If a copy of the MPL was not distributed with this | ||
| * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ | ||
|
|
||
| @import url("chrome://global/skin/in-content/common.css"); | ||
|
|
||
| :host { | ||
| display: block; | ||
| width: 288px; | ||
| border: 1px solid var(--in-content-box-border-color); | ||
| border-radius: 8px; | ||
| background-color: var(--in-content-page-background); | ||
| box-shadow: var(--shadow-10); | ||
| } | ||
|
|
||
| .shopping-card { | ||
| display: flex; | ||
| flex-direction: column; | ||
| align-items: flex-start; | ||
| gap: 8px; | ||
| padding: 12px; | ||
| } | ||
|
|
||
| button { | ||
| margin: 0; | ||
| } | ||
|
|
||
| #shopping-details { | ||
| width: 100%; | ||
| } | ||
|
|
||
| #label-wrapper { | ||
| display: flex; | ||
| justify-content: space-between; | ||
| align-self: stretch; | ||
| } | ||
|
|
||
| :host([type="accordion"]) #label-wrapper { | ||
| cursor: pointer; | ||
| } | ||
|
|
||
| #header { | ||
| color: var(--in-content-text-color); | ||
| font-size: 1em; | ||
| font-weight: 600; | ||
| } | ||
|
|
||
| #footer { | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| padding: 8px 0; | ||
| border-top: 1px solid var(--in-content-box-border-color); | ||
| } | ||
|
|
||
| details > summary { | ||
| list-style: none; | ||
| } | ||
|
|
||
| details > summary:focus-visible { | ||
| outline: var(--in-content-focus-outline); | ||
| } | ||
|
|
||
| .chevron-icon { | ||
| background-image: url("chrome://global/skin/icons/arrow-down.svg"); | ||
| background-position: center; | ||
| background-repeat: no-repeat; | ||
| -moz-context-properties: fill; | ||
| fill: currentColor; | ||
| width: 24px; | ||
| height: 24px; | ||
| min-width: 24px; | ||
| min-height: 24px; | ||
| padding: 0; | ||
| flex-shrink: 0; | ||
| } | ||
|
|
||
| details[open] .chevron-icon { | ||
| background-image: url("chrome://global/skin/icons/arrow-up.svg"); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,93 @@ | ||
| /* -*- indent-tabs-mode: nil; js-indent-level: 2 -*- | ||
| * This Source Code Form is subject to the terms of the Mozilla Public | ||
| * License, v. 2.0. If a copy of the MPL was not distributed with this | ||
| * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ | ||
|
|
||
| import { html, ifDefined } from "chrome://global/content/vendor/lit.all.mjs"; | ||
| import { MozLitElement } from "chrome://global/content/lit-utils.mjs"; | ||
|
|
||
| window.MozXULElement.insertFTLIfNeeded("preview/shopping.ftl"); | ||
|
|
||
| /** | ||
| * A card container to be used in the shopping sidebar. There are three card types. | ||
| * The default type where no type attribute is required and the card will have no extra functionality. | ||
| * The "accordion" type will initially not show any content. The card will contain a arrow to expand the | ||
| * card so all of the content is visible. | ||
| * | ||
| * @property {string} label - The label text that will be used for the card header | ||
| * @property {string} type - (optional) The type of card. No type specified | ||
| * will be the default card. The other available type is "accordion". | ||
| */ | ||
| class ShoppingCard extends MozLitElement { | ||
| static properties = { | ||
| label: { type: String }, | ||
| type: { type: String }, | ||
| }; | ||
|
|
||
| static get queries() { | ||
| return { | ||
| detailsEl: "#shopping-details", | ||
| }; | ||
| } | ||
|
|
||
| labelTemplate() { | ||
| if (this.label) { | ||
| if (this.type === "accordion") { | ||
| return html` | ||
| <div id="label-wrapper"> | ||
| <span id="header">${this.label}</span> | ||
| <button | ||
| tabindex="-1" | ||
| class="icon chevron-icon ghost-button" | ||
| @click=${this.handleChevronButtonClick} | ||
| ></button> | ||
| </div> | ||
| `; | ||
| } | ||
| return html` | ||
| <div id="label-wrapper"> | ||
| <span id="header">${this.label}</span><slot name="rating"></slot> | ||
| </div> | ||
| `; | ||
| } | ||
| return ""; | ||
| } | ||
|
|
||
| cardTemplate() { | ||
| if (this.type === "accordion") { | ||
| return html` | ||
| <details id="shopping-details"> | ||
| <summary>${this.labelTemplate()}</summary> | ||
| <div id="content"><slot name="content"></slot></div> | ||
| </details> | ||
| `; | ||
| } | ||
| return html` | ||
| ${this.labelTemplate()} | ||
| <div id="content" aria-describedby="content"> | ||
| <slot name="content"></slot> | ||
| </div> | ||
| `; | ||
| } | ||
|
|
||
| handleChevronButtonClick() { | ||
| this.detailsEl.open = !this.detailsEl.open; | ||
| } | ||
|
|
||
| render() { | ||
| return html` | ||
| <link | ||
| rel="stylesheet" | ||
| href="chrome://browser/content/shopping/shopping-card.css" | ||
| /> | ||
| <article | ||
| class="shopping-card" | ||
| aria-labelledby="header" | ||
| aria-label=${ifDefined(this.label)} | ||
| > | ||
| ${this.cardTemplate()} | ||
| </article> | ||
| `; | ||
| } | ||
| } | ||
| customElements.define("shopping-card", ShoppingCard); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
65 changes: 65 additions & 0 deletions
65
browser/components/storybook/stories/shopping-card.stories.mjs
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,65 @@ | ||
| /* This Source Code Form is subject to the terms of the Mozilla Public | ||
| * License, v. 2.0. If a copy of the MPL was not distributed with this | ||
| * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ | ||
|
|
||
| // eslint-disable-next-line import/no-unresolved | ||
| import { html, ifDefined } from "lit.all.mjs"; | ||
| // eslint-disable-next-line import/no-unassigned-import | ||
| import "browser/components/shopping/content/shopping-card.mjs"; | ||
|
|
||
| // window.MozXULElement.insertFTLIfNeeded("preview/shopping.ftl"); | ||
|
|
||
| export default { | ||
| title: "Domain-specific UI Widgets/Shopping/Shopping Card", | ||
| component: "shopping-card", | ||
| parameters: { | ||
| status: "in-development", | ||
| fluent: ` | ||
| shopping-card-label = | ||
| .label = This the label | ||
| shopping-show-more-button = Show more | ||
| shopping-show-less-button = Show less | ||
| `, | ||
| }, | ||
| }; | ||
|
|
||
| const Template = ({ l10nId, rating, content, type }) => html` | ||
| <main style="max-width: 400px"> | ||
| <shopping-card | ||
| type=${ifDefined(type)} | ||
| data-l10n-id=${ifDefined(l10nId)} | ||
| data-l10n-attrs="label" | ||
| > | ||
| <div slot="rating"> | ||
| ${rating ? html`<moz-five-star rating="${rating}" />` : ""} | ||
| </div> | ||
| <div slot="content">${ifDefined(content)}</div> | ||
| </shopping-card> | ||
| </main> | ||
| `; | ||
|
|
||
| export const DefaultCard = Template.bind({}); | ||
| DefaultCard.args = { | ||
| l10nId: "shopping-card-label", | ||
| content: "This is the content", | ||
| }; | ||
|
|
||
| export const CardWithRating = Template.bind({}); | ||
| CardWithRating.args = { | ||
| ...DefaultCard.args, | ||
| rating: 3, | ||
| }; | ||
|
|
||
| export const CardOnlyContent = Template.bind({}); | ||
| CardOnlyContent.args = { | ||
| content: "This card only contains content", | ||
| }; | ||
|
|
||
| export const CardTypeAccordion = Template.bind({}); | ||
| CardTypeAccordion.args = { | ||
| ...DefaultCard.args, | ||
| content: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. | ||
| Nunc velit turpis, mollis a ultricies vitae, accumsan ut augue. | ||
| In a eros ac dolor hendrerit varius et at mauris.`, | ||
| type: "accordion", | ||
| }; |