Add "become a sustainer" button and view to badge dialog
Co-authored-by: Evan Hahn <69474926+EvanHahn-Signal@users.noreply.github.com>
This commit is contained in:
parent
749bd6beda
commit
8f27d29415
|
@ -5272,6 +5272,30 @@
|
||||||
"message": "next",
|
"message": "next",
|
||||||
"description": "Generic next label"
|
"description": "Generic next label"
|
||||||
},
|
},
|
||||||
|
"BadgeDialog__become-a-sustainer-button": {
|
||||||
|
"message": "Become a Sustainer",
|
||||||
|
"description": "In the badge dialog. This button is shown under sustainer badges, taking users to some instructions"
|
||||||
|
},
|
||||||
|
"BadgeSustainerInstructions__header": {
|
||||||
|
"message": "Become a Sustainer",
|
||||||
|
"description": "In the instructions for becoming a sustainer. The heading."
|
||||||
|
},
|
||||||
|
"BadgeSustainerInstructions__subheader": {
|
||||||
|
"message": "Signal is powered by people like you. Contribute and receive a badge.",
|
||||||
|
"description": "In the instructions for becoming a sustainer. The subheading."
|
||||||
|
},
|
||||||
|
"BadgeSustainerInstructions__instructions__1": {
|
||||||
|
"message": "Open Signal on your phone",
|
||||||
|
"description": "In the instructions for becoming a sustainer. First instruction."
|
||||||
|
},
|
||||||
|
"BadgeSustainerInstructions__instructions__2": {
|
||||||
|
"message": "Tap on your profile photo in the top left to open Settings",
|
||||||
|
"description": "In the instructions for becoming a sustainer. Second instruction."
|
||||||
|
},
|
||||||
|
"BadgeSustainerInstructions__instructions__3": {
|
||||||
|
"message": "Tap on \"Become a Sustainer\" and subscribe",
|
||||||
|
"description": "In the instructions for becoming a sustainer. Third instruction."
|
||||||
|
},
|
||||||
"CompositionArea--expand": {
|
"CompositionArea--expand": {
|
||||||
"message": "Expand",
|
"message": "Expand",
|
||||||
"description": "Aria label for expanding composition area"
|
"description": "Aria label for expanding composition area"
|
||||||
|
|
|
@ -0,0 +1 @@
|
||||||
|
<svg height="320" viewBox="0 0 292 320" width="292" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><linearGradient id="a" gradientTransform="matrix(1 0 0 -1 0 -4326)" gradientUnits="userSpaceOnUse" x1="146" x2="146" y1="-4571.26" y2="-4645.78"><stop offset="0" stop-opacity="0"/><stop offset="1" stop-color="#2e2e2e"/></linearGradient><path d="m292 319.78v-267.29a52 52 0 0 0 -51.87-52.13l-187.44-.58a52 52 0 0 0 -52.19 51.94l-.5 268.06z" fill="#5e5e5e" fill-rule="evenodd"/><path d="m279.37 319.78.68-273.17a34.7 34.7 0 0 0 -34.61-34.78l-26.36-.06-143.51-.35-27.17-.07a34.67 34.67 0 0 0 -34.77 34.65l-.63 273.78z" fill="#121212" fill-rule="evenodd"/><path d="m34.51 115.67a22.33 22.33 0 1 1 22.33 22.33 22.32 22.32 0 0 1 -22.33-22.33zm21.74-40.39a13 13 0 1 0 -13-13 13 13 0 0 0 13 13zm151.3 33.65a2.93 2.93 0 0 0 -3-3h-105.07a3 3 0 1 0 0 5.92h105.17a2.88 2.88 0 0 0 2.9-2.92zm-43.88 13.78a2.93 2.93 0 0 0 -3-3h-61.19a3 3 0 1 0 0 5.92h61.29a2.88 2.88 0 0 0 2.9-2.92zm-106.83 77.54a22.3 22.3 0 1 0 -22.33-22.25 22.3 22.3 0 0 0 22.33 22.25zm150.71-29a2.93 2.93 0 0 0 -3-3h-105.07a3 3 0 1 0 0 5.92h105.17a2.88 2.88 0 0 0 2.9-2.96zm-43.88 13.84a2.93 2.93 0 0 0 -3-3h-61.19a3 3 0 1 0 0 5.91h61.29a2.88 2.88 0 0 0 2.9-2.95zm-106.83 77.51a22.3 22.3 0 1 0 -22.33-22.3 22.31 22.31 0 0 0 22.33 22.3zm150.71-29.05a2.93 2.93 0 0 0 -3-3h-105.07a3 3 0 1 0 0 5.91h105.17a2.88 2.88 0 0 0 2.9-2.91zm-43.88 13.79a2.93 2.93 0 0 0 -3-3h-61.19a3 3 0 1 0 0 5.91h61.29a2.88 2.88 0 0 0 2.9-2.91zm43.88 48.5a2.93 2.93 0 0 0 -3-3h-105.07a3 3 0 1 0 0 5.92h105.17a2.88 2.88 0 0 0 2.9-2.92zm-43.88 13.78a2.93 2.93 0 0 0 -3-3h-61.19a3 3 0 1 0 0 5.92h61.29a2.88 2.88 0 0 0 2.9-2.92zm-121 10.16h28.38a22.33 22.33 0 1 0 -28.42 0z" fill="#5e5e5e"/><path d="m0 245.26h292v74.52h-292z" fill="url(#a)"/><path d="m56.25 94.87a33.37 33.37 0 1 1 33.36-33.37 33.41 33.41 0 0 1 -33.36 33.37zm0-60.73a27.37 27.37 0 1 0 27.36 27.36 27.4 27.4 0 0 0 -27.36-27.36z" fill="#6191f3"/></svg>
|
After Width: | Height: | Size: 1.9 KiB |
|
@ -0,0 +1 @@
|
||||||
|
<svg height="320" viewBox="0 0 292 320" width="292" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><clipPath id="a"><path d="m.34.31h291.66v318.95h-291.66z"/></clipPath><linearGradient id="b" gradientTransform="matrix(1 0 0 -1 0 -4326)" gradientUnits="userSpaceOnUse" x1="145.79" x2="145.79" y1="-4571.48" y2="-4645.26"><stop offset="0" stop-color="#fff" stop-opacity="0"/><stop offset="1" stop-color="#fff"/></linearGradient><linearGradient id="c" x1="146" x2="146" xlink:href="#b" y1="-4571.48" y2="-4646"/><g clip-path="url(#a)"><path d="m.5 51.93a52 52 0 0 1 52.19-51.93l187.44.58a52 52 0 0 1 51.87 52.12l-.93 497.55a52 52 0 0 1 -52.19 51.93l-187.44-.57a52 52 0 0 1 -51.87-52.13z" fill="#dedede" fill-rule="evenodd"/><path d="m48.4 11.57a34.67 34.67 0 0 0 -34.77 34.6l-1.25 507.29a34.69 34.69 0 0 0 34.62 34.77l197 .48a34.69 34.69 0 0 0 34.78-34.6l1.25-507.28a34.7 34.7 0 0 0 -34.61-34.78z" fill="#fff" fill-rule="evenodd"/><g fill="#dbdbdb"><path d="m204.65 111.36h-105.17a3 3 0 1 1 0-5.91h105.11a2.93 2.93 0 0 1 3 3 2.88 2.88 0 0 1 -2.94 2.91z" fill-rule="evenodd"/><path d="m160.77 125.14h-61.29a3 3 0 1 1 0-5.91h61.23a2.93 2.93 0 0 1 3 3 2.88 2.88 0 0 1 -2.94 2.91z" fill-rule="evenodd"/><path d="m204.65 173.65h-105.17a3 3 0 1 1 0-5.92h105.11a2.93 2.93 0 0 1 3 3 2.88 2.88 0 0 1 -2.94 2.92z" fill-rule="evenodd"/><path d="m160.77 187.49h-61.29a3 3 0 1 1 0-5.92h61.23a2.93 2.93 0 0 1 3 3 2.88 2.88 0 0 1 -2.94 2.92z" fill-rule="evenodd"/><path d="m204.65 236h-105.17a3 3 0 1 1 0-5.92h105.11a2.93 2.93 0 0 1 3 3 2.88 2.88 0 0 1 -2.94 2.92z" fill-rule="evenodd"/><path d="m160.77 249.77h-61.29a3 3 0 1 1 0-5.91h61.23a2.93 2.93 0 0 1 3 2.95 2.88 2.88 0 0 1 -2.94 2.96z" fill-rule="evenodd"/><path d="m204.65 298.27h-105.17a3 3 0 1 1 0-5.91h105.11a2.93 2.93 0 0 1 3 2.95 2.88 2.88 0 0 1 -2.94 2.96z" fill-rule="evenodd"/><path d="m34.51 115.15a22.33 22.33 0 1 1 22.33 22.3 22.31 22.31 0 0 1 -22.33-22.3z"/><path d="m56.84 199.73a22.3 22.3 0 1 0 -22.33-22.3 22.31 22.31 0 0 0 22.33 22.3z"/><path d="m56.84 262.07a22.3 22.3 0 1 0 -22.33-22.3 22.31 22.31 0 0 0 22.33 22.3z"/><path d="m56.84 324.42a22.3 22.3 0 1 0 -22.33-22.3 22.31 22.31 0 0 0 22.33 22.3z"/><path d="m163.67 309.1a2.93 2.93 0 0 0 -3-3h-61.19a3 3 0 1 0 0 5.91h61.29a2.88 2.88 0 0 0 2.9-2.91z"/></g><path d="m.24 245.48h291.09v73.78h-291.09z" fill="url(#b)"/><path d="m56.25 74.76a13 13 0 1 0 -13-13 13 13 0 0 0 13 13z" fill="#dbdbdb"/></g><path d="m292 320v-267.3a52 52 0 0 0 -51.87-52.12l-187.44-.58a52 52 0 0 0 -52.19 51.93l-.5 268.07z" fill="#dedede" fill-rule="evenodd"/><path d="m279.37 320 .68-273.17a34.7 34.7 0 0 0 -34.61-34.78l-26.36-.05-143.51-.37-27.17-.06a34.67 34.67 0 0 0 -34.77 34.6l-.63 273.83z" fill="#fff" fill-rule="evenodd"/><path d="m34.51 115.89a22.33 22.33 0 1 1 22.33 22.3 22.32 22.32 0 0 1 -22.33-22.3zm21.74-40.39a13 13 0 1 0 -13-13 13 13 0 0 0 13 13zm151.3 33.65a2.93 2.93 0 0 0 -3-3h-105.07a3 3 0 1 0 0 5.92h105.17a2.88 2.88 0 0 0 2.9-2.92zm-43.88 13.78a2.93 2.93 0 0 0 -3-3h-61.19a3 3 0 1 0 0 5.92h61.29a2.88 2.88 0 0 0 2.9-2.92zm-106.83 77.54a22.3 22.3 0 1 0 -22.33-22.29 22.3 22.3 0 0 0 22.33 22.29zm150.71-29a2.93 2.93 0 0 0 -3-3h-105.07a3 3 0 1 0 0 5.92h105.17a2.88 2.88 0 0 0 2.9-2.96zm-43.88 13.84a2.93 2.93 0 0 0 -3-3h-61.19a3 3 0 1 0 0 5.92h61.29a2.88 2.88 0 0 0 2.9-2.96zm-106.83 77.51a22.3 22.3 0 1 0 -22.33-22.3 22.31 22.31 0 0 0 22.33 22.3zm150.71-29a2.93 2.93 0 0 0 -3-3h-105.07a3 3 0 1 0 0 5.91h105.17a2.88 2.88 0 0 0 2.9-2.96zm-43.88 13.79a2.93 2.93 0 0 0 -3-3h-61.19a3 3 0 1 0 0 5.91h61.29a2.88 2.88 0 0 0 2.9-2.96zm43.88 48.5a2.93 2.93 0 0 0 -3-3h-105.07a3 3 0 1 0 0 5.92h105.17a2.88 2.88 0 0 0 2.9-2.97zm-43.88 13.78a2.93 2.93 0 0 0 -3-3h-61.19a3 3 0 1 0 0 5.92h61.29a2.88 2.88 0 0 0 2.9-2.97zm-121.04 10.11h28.42a22.33 22.33 0 1 0 -28.42 0z" fill="#dbdbdb"/><path d="m0 245.48h292v74.52h-292z" fill="url(#c)"/><path d="m56.25 95.08a33.36 33.36 0 1 1 33.36-33.36 33.4 33.4 0 0 1 -33.36 33.36zm0-60.72a27.36 27.36 0 1 0 27.36 27.36 27.4 27.4 0 0 0 -27.36-27.36z" fill="#2c6bed"/></svg>
|
After Width: | Height: | Size: 3.9 KiB |
|
@ -14,7 +14,7 @@
|
||||||
max-width: 420px;
|
max-width: 420px;
|
||||||
}
|
}
|
||||||
|
|
||||||
&__body {
|
&__contents {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
@ -110,5 +110,17 @@
|
||||||
&__description {
|
&__description {
|
||||||
@include font-body-1;
|
@include font-body-1;
|
||||||
@include fixed-height(5.5em);
|
@include fixed-height(5.5em);
|
||||||
|
margin-bottom: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__instructions-button {
|
||||||
|
width: 100%;
|
||||||
|
&--hidden {
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.BadgeCarouselIndex {
|
||||||
|
margin-top: 24px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -0,0 +1,52 @@
|
||||||
|
// Copyright 2021 Signal Messenger, LLC
|
||||||
|
// SPDX-License-Identifier: AGPL-3.0-only
|
||||||
|
|
||||||
|
.BadgeSustainerInstructionsDialog {
|
||||||
|
user-select: none;
|
||||||
|
|
||||||
|
// We use this selector for specificity.
|
||||||
|
&.module-Modal {
|
||||||
|
max-width: 420px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__header {
|
||||||
|
@include font-title-2;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__subheader {
|
||||||
|
@include font-body-1;
|
||||||
|
font-weight: normal;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__instructions {
|
||||||
|
@include font-body-2;
|
||||||
|
padding: 0;
|
||||||
|
list-style-position: inside;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
background-size: contain;
|
||||||
|
content: '';
|
||||||
|
display: block;
|
||||||
|
height: 160px;
|
||||||
|
margin: 24px auto;
|
||||||
|
width: 146px;
|
||||||
|
|
||||||
|
@include light-theme {
|
||||||
|
background-image: url('../images/mobile-settings-light.svg');
|
||||||
|
}
|
||||||
|
@include dark-theme {
|
||||||
|
background-image: url('../images/mobile-settings-dark.svg');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
> li {
|
||||||
|
margin-top: 1em;
|
||||||
|
|
||||||
|
&:first-child {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
|
@ -35,6 +35,11 @@
|
||||||
cursor: not-allowed;
|
cursor: not-allowed;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&--large {
|
||||||
|
@include font-title-2;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
&--medium {
|
&--medium {
|
||||||
@include font-body-1-bold;
|
@include font-body-1-bold;
|
||||||
}
|
}
|
||||||
|
|
|
@ -34,6 +34,7 @@
|
||||||
@import './components/AvatarTextEditor.scss';
|
@import './components/AvatarTextEditor.scss';
|
||||||
@import './components/BadgeCarouselIndex.scss';
|
@import './components/BadgeCarouselIndex.scss';
|
||||||
@import './components/BadgeDialog.scss';
|
@import './components/BadgeDialog.scss';
|
||||||
|
@import './components/BadgeSustainerInstructionsDialog.scss';
|
||||||
@import './components/BetterAvatarBubble.scss';
|
@import './components/BetterAvatarBubble.scss';
|
||||||
@import './components/Button.scss';
|
@import './components/Button.scss';
|
||||||
@import './components/CallingLobby.scss';
|
@import './components/CallingLobby.scss';
|
||||||
|
|
|
@ -2,14 +2,18 @@
|
||||||
// SPDX-License-Identifier: AGPL-3.0-only
|
// SPDX-License-Identifier: AGPL-3.0-only
|
||||||
|
|
||||||
import React, { useEffect, useState } from 'react';
|
import React, { useEffect, useState } from 'react';
|
||||||
|
import classNames from 'classnames';
|
||||||
|
|
||||||
import { strictAssert } from '../util/assert';
|
import { strictAssert } from '../util/assert';
|
||||||
import type { LocalizerType } from '../types/Util';
|
import type { LocalizerType } from '../types/Util';
|
||||||
import type { BadgeType } from '../badges/types';
|
import type { BadgeType } from '../badges/types';
|
||||||
|
import { BadgeCategory } from '../badges/BadgeCategory';
|
||||||
import { Modal } from './Modal';
|
import { Modal } from './Modal';
|
||||||
|
import { Button, ButtonSize } from './Button';
|
||||||
import { BadgeDescription } from './BadgeDescription';
|
import { BadgeDescription } from './BadgeDescription';
|
||||||
import { BadgeImage } from './BadgeImage';
|
import { BadgeImage } from './BadgeImage';
|
||||||
import { BadgeCarouselIndex } from './BadgeCarouselIndex';
|
import { BadgeCarouselIndex } from './BadgeCarouselIndex';
|
||||||
|
import { BadgeSustainerInstructionsDialog } from './BadgeSustainerInstructionsDialog';
|
||||||
|
|
||||||
type PropsType = Readonly<{
|
type PropsType = Readonly<{
|
||||||
badges: ReadonlyArray<BadgeType>;
|
badges: ReadonlyArray<BadgeType>;
|
||||||
|
@ -20,16 +24,32 @@ type PropsType = Readonly<{
|
||||||
}>;
|
}>;
|
||||||
|
|
||||||
export function BadgeDialog(props: PropsType): null | JSX.Element {
|
export function BadgeDialog(props: PropsType): null | JSX.Element {
|
||||||
const { badges, onClose } = props;
|
const { badges, i18n, onClose } = props;
|
||||||
|
|
||||||
|
const [isShowingInstructions, setIsShowingInstructions] = useState(false);
|
||||||
|
|
||||||
const hasBadges = badges.length > 0;
|
const hasBadges = badges.length > 0;
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (!hasBadges) {
|
if (!hasBadges && !isShowingInstructions) {
|
||||||
onClose();
|
onClose();
|
||||||
}
|
}
|
||||||
}, [hasBadges, onClose]);
|
}, [hasBadges, isShowingInstructions, onClose]);
|
||||||
|
|
||||||
return hasBadges ? <BadgeDialogWithBadges {...props} /> : null;
|
if (isShowingInstructions) {
|
||||||
|
return (
|
||||||
|
<BadgeSustainerInstructionsDialog
|
||||||
|
i18n={i18n}
|
||||||
|
onClose={() => setIsShowingInstructions(false)}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return hasBadges ? (
|
||||||
|
<BadgeDialogWithBadges
|
||||||
|
{...props}
|
||||||
|
onShowInstructions={() => setIsShowingInstructions(true)}
|
||||||
|
/>
|
||||||
|
) : null;
|
||||||
}
|
}
|
||||||
|
|
||||||
function BadgeDialogWithBadges({
|
function BadgeDialogWithBadges({
|
||||||
|
@ -37,8 +57,9 @@ function BadgeDialogWithBadges({
|
||||||
firstName,
|
firstName,
|
||||||
i18n,
|
i18n,
|
||||||
onClose,
|
onClose,
|
||||||
|
onShowInstructions,
|
||||||
title,
|
title,
|
||||||
}: PropsType): JSX.Element {
|
}: PropsType & { onShowInstructions: () => unknown }): JSX.Element {
|
||||||
const firstBadge = badges[0];
|
const firstBadge = badges[0];
|
||||||
strictAssert(
|
strictAssert(
|
||||||
firstBadge,
|
firstBadge,
|
||||||
|
@ -75,35 +96,48 @@ function BadgeDialogWithBadges({
|
||||||
i18n={i18n}
|
i18n={i18n}
|
||||||
onClose={onClose}
|
onClose={onClose}
|
||||||
>
|
>
|
||||||
<button
|
<div className="BadgeDialog__contents">
|
||||||
aria-label={i18n('previous')}
|
<button
|
||||||
className="BadgeDialog__nav BadgeDialog__nav--previous"
|
aria-label={i18n('previous')}
|
||||||
disabled={currentBadgeIndex === 0}
|
className="BadgeDialog__nav BadgeDialog__nav--previous"
|
||||||
onClick={() => navigate(-1)}
|
disabled={currentBadgeIndex === 0}
|
||||||
type="button"
|
onClick={() => navigate(-1)}
|
||||||
/>
|
type="button"
|
||||||
<div className="BadgeDialog__main">
|
/>
|
||||||
<BadgeImage badge={currentBadge} size={160} />
|
<div className="BadgeDialog__main">
|
||||||
<div className="BadgeDialog__name">{currentBadge.name}</div>
|
<BadgeImage badge={currentBadge} size={160} />
|
||||||
<div className="BadgeDialog__description">
|
<div className="BadgeDialog__name">{currentBadge.name}</div>
|
||||||
<BadgeDescription
|
<div className="BadgeDialog__description">
|
||||||
firstName={firstName}
|
<BadgeDescription
|
||||||
template={currentBadge.descriptionTemplate}
|
firstName={firstName}
|
||||||
title={title}
|
template={currentBadge.descriptionTemplate}
|
||||||
|
title={title}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<Button
|
||||||
|
className={classNames(
|
||||||
|
'BadgeDialog__instructions-button',
|
||||||
|
currentBadge.category !== BadgeCategory.Donor &&
|
||||||
|
'BadgeDialog__instructions-button--hidden'
|
||||||
|
)}
|
||||||
|
onClick={onShowInstructions}
|
||||||
|
size={ButtonSize.Large}
|
||||||
|
>
|
||||||
|
{i18n('BadgeDialog__become-a-sustainer-button')}
|
||||||
|
</Button>
|
||||||
|
<BadgeCarouselIndex
|
||||||
|
currentIndex={currentBadgeIndex}
|
||||||
|
totalCount={badges.length}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<BadgeCarouselIndex
|
<button
|
||||||
currentIndex={currentBadgeIndex}
|
aria-label={i18n('next')}
|
||||||
totalCount={badges.length}
|
className="BadgeDialog__nav BadgeDialog__nav--next"
|
||||||
|
disabled={currentBadgeIndex === badges.length - 1}
|
||||||
|
onClick={() => navigate(1)}
|
||||||
|
type="button"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<button
|
|
||||||
aria-label={i18n('next')}
|
|
||||||
className="BadgeDialog__nav BadgeDialog__nav--next"
|
|
||||||
disabled={currentBadgeIndex === badges.length - 1}
|
|
||||||
onClick={() => navigate(1)}
|
|
||||||
type="button"
|
|
||||||
/>
|
|
||||||
</Modal>
|
</Modal>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -0,0 +1,33 @@
|
||||||
|
// Copyright 2021 Signal Messenger, LLC
|
||||||
|
// SPDX-License-Identifier: AGPL-3.0-only
|
||||||
|
|
||||||
|
import type { ReactElement } from 'react';
|
||||||
|
import React from 'react';
|
||||||
|
import type { LocalizerType } from '../types/Util';
|
||||||
|
import { Modal } from './Modal';
|
||||||
|
|
||||||
|
export function BadgeSustainerInstructionsDialog({
|
||||||
|
i18n,
|
||||||
|
onClose,
|
||||||
|
}: Readonly<{ i18n: LocalizerType; onClose: () => unknown }>): ReactElement {
|
||||||
|
return (
|
||||||
|
<Modal
|
||||||
|
hasXButton
|
||||||
|
moduleClassName="BadgeSustainerInstructionsDialog"
|
||||||
|
i18n={i18n}
|
||||||
|
onClose={onClose}
|
||||||
|
>
|
||||||
|
<h1 className="BadgeSustainerInstructionsDialog__header">
|
||||||
|
{i18n('BadgeSustainerInstructions__header')}
|
||||||
|
</h1>
|
||||||
|
<h2 className="BadgeSustainerInstructionsDialog__subheader">
|
||||||
|
{i18n('BadgeSustainerInstructions__subheader')}
|
||||||
|
</h2>
|
||||||
|
<ol className="BadgeSustainerInstructionsDialog__instructions">
|
||||||
|
<li>{i18n('BadgeSustainerInstructions__instructions__1')}</li>
|
||||||
|
<li>{i18n('BadgeSustainerInstructions__instructions__2')}</li>
|
||||||
|
<li>{i18n('BadgeSustainerInstructions__instructions__3')}</li>
|
||||||
|
</ol>
|
||||||
|
</Modal>
|
||||||
|
);
|
||||||
|
}
|
|
@ -13,7 +13,7 @@ story.add('Kitchen sink', () => (
|
||||||
<>
|
<>
|
||||||
{Object.values(ButtonVariant).map(variant => (
|
{Object.values(ButtonVariant).map(variant => (
|
||||||
<React.Fragment key={variant}>
|
<React.Fragment key={variant}>
|
||||||
{[ButtonSize.Medium, ButtonSize.Small].map(size => (
|
{[ButtonSize.Large, ButtonSize.Medium, ButtonSize.Small].map(size => (
|
||||||
<React.Fragment key={size}>
|
<React.Fragment key={size}>
|
||||||
<p>
|
<p>
|
||||||
<Button onClick={action('onClick')} size={size} variant={variant}>
|
<Button onClick={action('onClick')} size={size} variant={variant}>
|
||||||
|
|
|
@ -8,6 +8,7 @@ import classNames from 'classnames';
|
||||||
import { assert } from '../util/assert';
|
import { assert } from '../util/assert';
|
||||||
|
|
||||||
export enum ButtonSize {
|
export enum ButtonSize {
|
||||||
|
Large,
|
||||||
Medium,
|
Medium,
|
||||||
Small,
|
Small,
|
||||||
}
|
}
|
||||||
|
@ -65,6 +66,7 @@ type PropsType = {
|
||||||
);
|
);
|
||||||
|
|
||||||
const SIZE_CLASS_NAMES = new Map<ButtonSize, string>([
|
const SIZE_CLASS_NAMES = new Map<ButtonSize, string>([
|
||||||
|
[ButtonSize.Large, 'module-Button--large'],
|
||||||
[ButtonSize.Medium, 'module-Button--medium'],
|
[ButtonSize.Medium, 'module-Button--medium'],
|
||||||
[ButtonSize.Small, 'module-Button--small'],
|
[ButtonSize.Small, 'module-Button--small'],
|
||||||
]);
|
]);
|
||||||
|
|
Loading…
Reference in New Issue