Revision control
Copy as Markdown
Other Tools
/* 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
import { html } from "lit";
import "mail/themes/shared/mail/variables.css";
import "mail/themes/shared/mail/accountHub.css";
export default {
title: "Widgets/Account Hub/Protocol Select Card",
tags: ["autodocs"],
};
const ProtocolSelectCard = ({
body,
checked = false,
recommended = false,
title,
value,
}) => {
const className = [
"account-hub-protocol-select-card",
recommended ? "recommended" : "",
]
.filter(Boolean)
.join(" ");
return html`
<label class=${className}>
<input
type="radio"
name="protocol-select"
value=${value}
${checked ? 'checked="checked"' : ""}
/>
<span class="account-hub-protocol-select-card-content">
<span
class="account-hub-protocol-select-card-badge"
data-l10n-id="account-hub-result-recommended-label"
>Recommended</span
>
<span class="account-hub-protocol-select-card-header">
<img
class="account-hub-protocol-select-card-icon"
alt=""
/>
<span>${title}</span>
</span>
<span
class="account-hub-protocol-select-card-body"
data-l10n-id="account-hub-protocol-${value}"
>${body}</span
>
</span>
</label>
`;
};
const ProtocolSelectCards = ({ title, body }) => html`
<form class="account-hub-protocol-select-card-story">
<div class="hub-body protocol-select-select-body">
<fieldset class="account-hub-protocol-select-list">
${ProtocolSelectCard({
body,
checked: true,
recommended: true,
title,
value: "imap",
})}
${ProtocolSelectCard({
body: html`Exchange<br />or<br />Microsoft 365`,
title: "Microsoft",
value: "microsoft",
})}
${ProtocolSelectCard({
body: "Download to device",
title: "POP3",
value: "pop3",
})}
</fieldset>
</div>
</form>
`;
export const Default = ProtocolSelectCards.bind({});
Default.args = {
title: "IMAP",
body: "Sync across devices",
};