Andal.LND/frontend-app-authoring
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: license styling (#154)

Browse Source
This commit is contained in:
Kristin Aoki
2022-12-01 15:14:44 -05:00
committed by GitHub
parent 35b58a42b5
commit f824ef0551
23 changed files with 483 additions and 345 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/editors/containers/VideoEditor/components/VideoSettingsModal/components/CollapsibleFormWidget.jsx
View File

@@ -19,11 +19,12 @@ export const CollapsibleFormWidget = ({
isError,
subtitle,
title,
fontSize,
// injected
intl,
}) => (
<Collapsible.Advanced
className="collapsible-card rounded mx-4 my-3 px-3 py-2 text-primary-500 x-small"
className="collapsible-card rounded mx-4 my-3 px-3 py-2 text-primary-500"
defaultOpen
open={isError || undefined}
>
@@ -33,8 +34,8 @@ export const CollapsibleFormWidget = ({
>
<Collapsible.Visible whenClosed>
<div className="d-flex flex-column flex-grow-1">
<div className="d-flex flex-grow-1 w-75">{title}</div>
{subtitle}
<div className="d-flex flex-grow-1 w-75 x-small">{title}</div>
<div className={`${fontSize}`}>{subtitle}</div>
</div>
<div className="d-flex flex-row align-self-start">
{isError && <Icon className="alert-icon" src={Info} />}
@@ -42,13 +43,13 @@ export const CollapsibleFormWidget = ({
</div>
</Collapsible.Visible>
<Collapsible.Visible whenOpen>
<div className="d-flex flex-grow-1 w-75">{title}</div>
<div className="d-flex flex-grow-1 w-75 x-small">{title}</div>
<div className="align-self-start">
<IconButton alt={intl.formatMessage(messages.collapseAltText)} src={ExpandLess} iconAs={Icon} variant="dark" />
</div>
</Collapsible.Visible>
</Collapsible.Trigger>
<Collapsible.Body className="collapsible-body rounded px-0">
<Collapsible.Body className={`collapsible-body rounded px-0 ${fontSize}`}>
{children}
</Collapsible.Body>
</Collapsible.Advanced>
@@ -56,6 +57,7 @@ export const CollapsibleFormWidget = ({
CollapsibleFormWidget.defaultProps = {
subtitle: null,
fontSize: '',
};
CollapsibleFormWidget.propTypes = {
@@ -63,6 +65,7 @@ CollapsibleFormWidget.propTypes = {
isError: PropTypes.bool.isRequired,
subtitle: PropTypes.node,
title: PropTypes.node.isRequired,
fontSize: PropTypes.string,
// injected
intl: intlShape.isRequired,
};

1
src/editors/containers/VideoEditor/components/VideoSettingsModal/components/DurationWidget.jsx
View File

@@ -41,6 +41,7 @@ export const DurationWidget = ({
return (
<CollapsibleFormWidget
fontSize="x-small"
title={intl.formatMessage(messages.durationTitle)}
subtitle={getTotalLabel(duration.formValue.startTime, duration.formValue.stopTime, true)}
>

2
src/editors/containers/VideoEditor/components/VideoSettingsModal/components/HandoutWidget/__snapshots__/index.test.jsx.snap
View File

@@ -2,6 +2,7 @@
exports[`HandoutWidget snapshots snapshots: renders as expected with default props 1`] = `
<injectIntl(ShimmedIntlComponent)
fontSize="x-small"
isError={true}
subtitle="None"
title="Handout"
@@ -64,6 +65,7 @@ exports[`HandoutWidget snapshots snapshots: renders as expected with default pro
exports[`HandoutWidget snapshots snapshots: renders as expected with handout 1`] = `
<injectIntl(ShimmedIntlComponent)
fontSize="x-small"
isError={true}
subtitle="sOMeUrl "
title="Handout"

1
src/editors/containers/VideoEditor/components/VideoSettingsModal/components/HandoutWidget/index.jsx
View File

@@ -47,6 +47,7 @@ export const HandoutWidget = ({
return (!isLibrary ? (
<CollapsibleFormWidget
fontSize="x-small"
isError={Object.keys(error).length !== 0}
title={intl.formatMessage(messages.titleLabel)}
subtitle={handoutName}

19
src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/LicenseBlurb.jsx
View File

@@ -21,18 +21,19 @@ export const LicenseBlurb = ({
license,
details,
}) => (
<div className="d-flex flex-row flex-row">
{license === LicenseTypes.allRightsReserved ? <Icon src={Copyright} /> : null}
{license === LicenseTypes.creativeCommons ? <Icon src={Cc} /> : null}
{details.attribution ? <Icon src={Attribution} /> : null}
{details.noncommercial ? <Icon src={Nc} /> : null}
{details.noDerivatives ? <Icon src={Nd} /> : null}
{details.shareAlike ? <Icon src={Sa} /> : null}
<div className="d-flex flex-row align-items-center mt-2">
{/* not sure how to handle the edge cases when some of the icons are not displayed */}
{license === LicenseTypes.allRightsReserved ? <Icon src={Copyright} className="mr-1" style={{ height: '18px', width: '18px' }} /> : null}
{license === LicenseTypes.creativeCommons ? <Icon src={Cc} className="mr-1" style={{ height: '18px', width: '18px' }} /> : null}
{details.attribution ? <Icon src={Attribution} className="mr-1 text-primary-300" style={{ height: '18px', width: '18px' }} /> : null}
{details.noncommercial ? <Icon src={Nc} className="mr-1" style={{ height: '18px', width: '18px' }} /> : null}
{details.noDerivatives ? <Icon src={Nd} className="mr-1" style={{ height: '18px', width: '18px' }} /> : null}
{details.shareAlike ? <Icon src={Sa} className="mr-1" style={{ height: '18px', width: '18px' }} /> : null}
{license === LicenseTypes.allRightsReserved
? <div><FormattedMessage {...messages.allRightsReservedIconsLabel} /></div>
? <div className="small mx-1.5"><FormattedMessage {...messages.allRightsReservedIconsLabel} /></div>
: null}
{license === LicenseTypes.creativeCommons
? <div><FormattedMessage {...messages.creativeCommonsIconsLabel} /></div>
? <div className="small mx-1.5"><FormattedMessage {...messages.creativeCommonsIconsLabel} /></div>
: null}
</div>
);

153
src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/LicenseDetails.jsx
View File

@@ -6,7 +6,8 @@ import {
injectIntl,
} from '@edx/frontend-platform/i18n';
import {
Card,
ActionRow,
CheckboxControl,
Form,
Icon,
Stack,
@@ -30,15 +31,15 @@ export const LicenseDetails = ({
updateField,
}) => (
level !== LicenseLevel.course && details && license !== 'select' ? (
<div className="border-primary-100 border-top pb-3">
<div className="x-small border-primary-100 border-bottom m-0">
<Form.Group>
<div className="mt-3">
<div>
<FormattedMessage {...messages.detailsSubsectionTitle} />
</div>
{license === LicenseTypes.allRightsReserved
? (
<div>
<div className="mt-2">
<FormattedMessage {...messages.allRightsReservedSectionMessage} />
</div>
)
@@ -47,39 +48,34 @@ export const LicenseDetails = ({
{license === LicenseTypes.creativeCommons
? (
<Stack gap={3}>
<Card>
<Card.Header
title={(
<div className="d-flex flex-row flex-nowrap">
<Icon src={Attribution} />
<div className="border-primary-100 border-bottom py-3">
<Form.Group>
<ActionRow>
<Icon className="text-primary-500" src={Attribution} />
<Form.Label className="my-0 text-primary-500">
<FormattedMessage {...messages.attributionCheckboxLabel} />
</div>
)}
actions={<Form.Checkbox checked disabled />}
/>
<Card.Section>
</Form.Label>
<ActionRow.Spacer />
<CheckboxControl
disabled
checked
aria-label="Checkbox"
/>
</ActionRow>
</Form.Group>
<div>
<FormattedMessage {...messages.attributionSectionDescription} />
</Card.Section>
</Card>
<Card
isClickable
onClick={() => updateField({
licenseDetails: {
...details,
noncommercial: !details.noncommercial,
},
})}
>
<Card.Header
title={(
<div className="d-flex flex-row flex-row">
<Icon src={Nc} />
</div>
</div>
<div className="border-primary-100 border-bottom py-3">
<Form.Group>
<ActionRow>
<Icon src={Nc} />
<Form.Label className="my-0 text-primary-500">
<FormattedMessage {...messages.noncommercialCheckboxLabel} />
</div>
)}
actions={(
<Form.Checkbox
</Form.Label>
<ActionRow.Spacer />
<CheckboxControl
checked={details.noncommercial}
disabled={level === LicenseLevel.course}
onChange={(e) => updateField({
@@ -88,33 +84,23 @@ export const LicenseDetails = ({
noncommercial: e.target.checked,
},
})}
aria-label="Checkbox"
/>
)}
/>
<Card.Section>
</ActionRow>
</Form.Group>
<div>
<FormattedMessage {...messages.noncommercialSectionDescription} />
</Card.Section>
</Card>
<Card
isClickable
onClick={() => updateField({
licenseDetails: {
...details,
noDerivatives: !details.noDerivatives,
shareAlike: !details.noDerivatives ? false : details.shareAlike,
},
})}
>
<Card.Header
title={(
<div className="d-flex flex-row flex-row">
<Icon src={Nd} />
</div>
</div>
<div className="border-primary-100 border-bottom py-3">
<Form.Group>
<ActionRow>
<Icon src={Nd} />
<Form.Label className="my-0 text-primary-500">
<FormattedMessage {...messages.noDerivativesCheckboxLabel} />
</div>
)}
actions={(
<Form.Checkbox
</Form.Label>
<ActionRow.Spacer />
<CheckboxControl
checked={details.noDerivatives}
disabled={level === LicenseLevel.course}
onChange={(e) => updateField({
@@ -124,34 +110,24 @@ export const LicenseDetails = ({
shareAlike: e.target.checked ? false : details.shareAlike,
},
})}
aria-label="Checkbox"
/>
)}
/>
<Card.Section>
</ActionRow>
</Form.Group>
<div>
<FormattedMessage {...messages.noDerivativesSectionDescription} />
</Card.Section>
</Card>
<Card
isClickable
onClick={() => updateField({
licenseDetails: {
...details,
shareAlike: !details.shareAlike,
noDerivatives: !details.shareAlike ? false : details.noDerivatives,
},
})}
>
<Card.Header
title={(
<div className="d-flex flex-row flex-row">
<Icon src={Sa} />
</div>
</div>
<div>
<Form.Group>
<ActionRow>
<Icon src={Sa} />
<Form.Label className="my-0 text-primary-500">
<FormattedMessage {...messages.shareAlikeCheckboxLabel} />
</div>
)}
actions={(
<Form.Checkbox
checked={details.shareAlike}
</Form.Label>
<ActionRow.Spacer />
<CheckboxControl
cchecked={details.shareAlike}
disabled={level === LicenseLevel.course}
onChange={(e) => updateField({
licenseDetails: {
@@ -160,13 +136,14 @@ export const LicenseDetails = ({
noDerivatives: e.target.checked ? false : details.noDerivatives,
},
})}
aria-label="Checkbox"
/>
)}
/>
<Card.Section>
</ActionRow>
</Form.Group>
<div>
<FormattedMessage {...messages.shareAlikeSectionDescription} />
</Card.Section>
</Card>
</div>
</div>
</Stack>
)
: null}

16
src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/LicenseDisplay.jsx
View File

@@ -6,7 +6,6 @@ import {
injectIntl,
} from '@edx/frontend-platform/i18n';
import {
Card,
Stack,
Hyperlink,
} from '@edx/paragon';
@@ -24,16 +23,15 @@ export const LicenseDisplay = ({
}) => {
if (license !== LicenseTypes.select) {
return (
<Stack gap={3} className="border-primary-100 border-top">
<FormattedMessage {...messages.displaySubsectionTitle} />
<Card className="mb-3">
<Card.Header title={<LicenseBlurb license={license} details={details} />} />
<Card.Section>{licenseDescription}</Card.Section>
</Card>
<Stack gap={3}>
<div className="x-small"><FormattedMessage {...messages.displaySubsectionTitle} /></div>
<div className="small border border-gray-300 rounded pt-2 px-3 pb-3">
<LicenseBlurb license={license} details={details} />
<div className="x-small">{licenseDescription}</div>
</div>
{level !== LicenseLevel.course ? (
<Hyperlink
className="text-primary-500"
size="sm"
className="text-primary-500 x-small"
destination="https://creativecommons.org/about"
target="_blank"
>

7
src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/LicenseSelector.jsx
View File

@@ -31,8 +31,8 @@ export const LicenseSelector = ({
const onLicenseChange = hooks.onSelectLicense({ dispatch: useDispatch() });
const ref = React.useRef();
return (
<Form.Group className="mt-2 mx-2">
<Form.Row className="mt-4.5">
<Form.Group className="mx-2 my-0">
<Form.Row>
<Form.Control
as="select"
ref={ref}
@@ -60,7 +60,8 @@ export const LicenseSelector = ({
/>
) : null }
</Form.Row>
<div>{levelDescription}</div>
<div className="x-small mt-2">{levelDescription}</div>
{license === LicenseTypes.select ? null : <div className="border-primary-100 mt-3 border-bottom" />}
</Form.Group>
);
};

166
src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/__snapshots__/LicenseBlurb.test.jsx.snap
View File

@@ -2,12 +2,38 @@
exports[`LicenseBlurb snapshots snapshots: renders as expected when details.attribution and details.noDerivatives equal true 1`] = `
<div
className="d-flex flex-row flex-row"
className="d-flex flex-row align-items-center mt-2"
>
<Icon />
<Icon />
<Icon />
<div>
<Icon
className="mr-1"
style={
Object {
"height": "18px",
"width": "18px",
}
}
/>
<Icon
className="mr-1 text-primary-300"
style={
Object {
"height": "18px",
"width": "18px",
}
}
/>
<Icon
className="mr-1"
style={
Object {
"height": "18px",
"width": "18px",
}
}
/>
<div
className="small mx-1.5"
>
<FormattedMessage
defaultMessage="Some Rights Reserved"
description="Label for row of creative common icons"
@@ -19,12 +45,38 @@ exports[`LicenseBlurb snapshots snapshots: renders as expected when details.attr
exports[`LicenseBlurb snapshots snapshots: renders as expected when details.attribution and details.noncommercial equal true 1`] = `
<div
className="d-flex flex-row flex-row"
className="d-flex flex-row align-items-center mt-2"
>
<Icon />
<Icon />
<Icon />
<div>
<Icon
className="mr-1"
style={
Object {
"height": "18px",
"width": "18px",
}
}
/>
<Icon
className="mr-1 text-primary-300"
style={
Object {
"height": "18px",
"width": "18px",
}
}
/>
<Icon
className="mr-1"
style={
Object {
"height": "18px",
"width": "18px",
}
}
/>
<div
className="small mx-1.5"
>
<FormattedMessage
defaultMessage="Some Rights Reserved"
description="Label for row of creative common icons"
@@ -36,12 +88,38 @@ exports[`LicenseBlurb snapshots snapshots: renders as expected when details.attr
exports[`LicenseBlurb snapshots snapshots: renders as expected when details.attribution and details.shareAlike equal true 1`] = `
<div
className="d-flex flex-row flex-row"
className="d-flex flex-row align-items-center mt-2"
>
<Icon />
<Icon />
<Icon />
<div>
<Icon
className="mr-1"
style={
Object {
"height": "18px",
"width": "18px",
}
}
/>
<Icon
className="mr-1 text-primary-300"
style={
Object {
"height": "18px",
"width": "18px",
}
}
/>
<Icon
className="mr-1"
style={
Object {
"height": "18px",
"width": "18px",
}
}
/>
<div
className="small mx-1.5"
>
<FormattedMessage
defaultMessage="Some Rights Reserved"
description="Label for row of creative common icons"
@@ -53,11 +131,29 @@ exports[`LicenseBlurb snapshots snapshots: renders as expected when details.attr
exports[`LicenseBlurb snapshots snapshots: renders as expected when details.attribution equal true 1`] = `
<div
className="d-flex flex-row flex-row"
className="d-flex flex-row align-items-center mt-2"
>
<Icon />
<Icon />
<div>
<Icon
className="mr-1"
style={
Object {
"height": "18px",
"width": "18px",
}
}
/>
<Icon
className="mr-1 text-primary-300"
style={
Object {
"height": "18px",
"width": "18px",
}
}
/>
<div
className="small mx-1.5"
>
<FormattedMessage
defaultMessage="Some Rights Reserved"
description="Label for row of creative common icons"
@@ -69,10 +165,20 @@ exports[`LicenseBlurb snapshots snapshots: renders as expected when details.attr
exports[`LicenseBlurb snapshots snapshots: renders as expected with default props 1`] = `
<div
className="d-flex flex-row flex-row"
className="d-flex flex-row align-items-center mt-2"
>
<Icon />
<div>
<Icon
className="mr-1"
style={
Object {
"height": "18px",
"width": "18px",
}
}
/>
<div
className="small mx-1.5"
>
<FormattedMessage
defaultMessage="All Rights Reserved"
description="Label for row of all rights reserved icons"
@@ -84,10 +190,20 @@ exports[`LicenseBlurb snapshots snapshots: renders as expected with default prop
exports[`LicenseBlurb snapshots snapshots: renders as expected with license equal to Creative Commons 1`] = `
<div
className="d-flex flex-row flex-row"
className="d-flex flex-row align-items-center mt-2"
>
<Icon />
<div>
<Icon
className="mr-1"
style={
Object {
"height": "18px",
"width": "18px",
}
}
/>
<div
className="small mx-1.5"
>
<FormattedMessage
defaultMessage="Some Rights Reserved"
description="Label for row of creative common icons"

177
src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/__snapshots__/LicenseDetails.test.jsx.snap
View File

@@ -4,12 +4,10 @@ exports[`LicenseDetails snapshots snapshots: renders as expected with default pr
exports[`LicenseDetails snapshots snapshots: renders as expected with level set to block and license set to Creative Commons 1`] = `
<div
className="border-primary-100 border-top pb-3"
className="x-small border-primary-100 border-bottom m-0"
>
<Form.Group>
<div
className="mt-3"
>
<div>
<FormattedMessage
defaultMessage="License Details"
description="Title for license detatils subsection"
@@ -19,131 +17,130 @@ exports[`LicenseDetails snapshots snapshots: renders as expected with level set
<Stack
gap={3}
>
<Card>
<Card.Header
actions={
<Form.Checkbox
checked={true}
disabled={true}
<div
className="border-primary-100 border-bottom py-3"
>
<Form.Group>
<ActionRow>
<Icon
className="text-primary-500"
/>
}
title={
<div
className="d-flex flex-row flex-nowrap"
<Form.Label
className="my-0 text-primary-500"
>
<Icon />
<FormattedMessage
defaultMessage="Attribution"
description="Label for attribution checkbox"
id="authoring.videoeditor.license.attributionCheckboxLabel"
/>
</div>
}
/>
<Card.Section>
</Form.Label>
<ActionRow.Spacer />
<Component
aria-label="Checkbox"
checked={true}
disabled={true}
/>
</ActionRow>
</Form.Group>
<div>
<FormattedMessage
defaultMessage="Allow others to copy, distribute, display and perform your copyrighted work but only if they give credit the way you request. Currently, this option is required."
description="Attribution card section defining attribution license"
id="authoring.videoeditor.license.attributionSectionDescription"
/>
</Card.Section>
</Card>
<Card
isClickable={true}
onClick={[Function]}
</div>
</div>
<div
className="border-primary-100 border-bottom py-3"
>
<Card.Header
actions={
<Form.Checkbox
disabled={false}
onChange={[Function]}
/>
}
title={
<div
className="d-flex flex-row flex-row"
<Form.Group>
<ActionRow>
<Icon />
<Form.Label
className="my-0 text-primary-500"
>
<Icon />
<FormattedMessage
defaultMessage="Noncommercial"
description="Label for noncommercial checkbox"
id="authoring.videoeditor.license.noncommercialCheckboxLabel"
/>
</div>
}
/>
<Card.Section>
</Form.Label>
<ActionRow.Spacer />
<Component
aria-label="Checkbox"
disabled={false}
onChange={[Function]}
/>
</ActionRow>
</Form.Group>
<div>
<FormattedMessage
defaultMessage="Allow others to copy, distribute, display and perform your work - and derivative works based upon it - but for noncommercial purposes only."
description="Noncommercial card section defining noncommercial license"
id="authoring.videoeditor.license.noncommercialSectionDescription"
/>
</Card.Section>
</Card>
<Card
isClickable={true}
onClick={[Function]}
</div>
</div>
<div
className="border-primary-100 border-bottom py-3"
>
<Card.Header
actions={
<Form.Checkbox
disabled={false}
onChange={[Function]}
/>
}
title={
<div
className="d-flex flex-row flex-row"
<Form.Group>
<ActionRow>
<Icon />
<Form.Label
className="my-0 text-primary-500"
>
<Icon />
<FormattedMessage
defaultMessage="No Derivatives"
description="Label for No Derivatives checkbox"
id="authoring.videoeditor.license.noDerivativesCheckboxLabel"
/>
</div>
}
/>
<Card.Section>
</Form.Label>
<ActionRow.Spacer />
<Component
aria-label="Checkbox"
disabled={false}
onChange={[Function]}
/>
</ActionRow>
</Form.Group>
<div>
<FormattedMessage
defaultMessage="Allow others to copy, distribute, display and perform only verbatim copies of your work, not derivative works based upon it. This option is incompatible with \\"Share Alike\\"."
description="No Derivatives card section defining no derivatives license"
id="authoring.videoeditor.license.noDerivativesSectionDescription"
/>
</Card.Section>
</Card>
<Card
isClickable={true}
onClick={[Function]}
>
<Card.Header
actions={
<Form.Checkbox
disabled={false}
onChange={[Function]}
/>
}
title={
<div
className="d-flex flex-row flex-row"
</div>
</div>
<div>
<Form.Group>
<ActionRow>
<Icon />
<Form.Label
className="my-0 text-primary-500"
>
<Icon />
<FormattedMessage
defaultMessage="Share Alike"
description="Label for Share Alike checkbox"
id="authoring.videoeditor.license.shareAlikeCheckboxLabel"
/>
</div>
}
/>
<Card.Section>
</Form.Label>
<ActionRow.Spacer />
<Component
aria-label="Checkbox"
disabled={false}
onChange={[Function]}
/>
</ActionRow>
</Form.Group>
<div>
<FormattedMessage
defaultMessage="Allow others to distribute derivative works only under a license identical to the license that governs your work. This option is incompatible with \\"No Derivatives\\"."
description="Share Alike card section defining no derivatives license"
id="authoring.videoeditor.license.shareAlikeSectionDescription"
/>
</Card.Section>
</Card>
</div>
</div>
</Stack>
</Form.Group>
</div>
@@ -151,19 +148,19 @@ exports[`LicenseDetails snapshots snapshots: renders as expected with level set
exports[`LicenseDetails snapshots snapshots: renders as expected with level set to block and license set to all rights reserved 1`] = `
<div
className="border-primary-100 border-top pb-3"
className="x-small border-primary-100 border-bottom m-0"
>
<Form.Group>
<div
className="mt-3"
>
<div>
<FormattedMessage
defaultMessage="License Details"
description="Title for license detatils subsection"
id="authoring.videoeditor.license.detailsSubsection.title"
/>
</div>
<div>
<div
className="mt-2"
>
<FormattedMessage
defaultMessage="You reserve all rights for your work."
description="All Rights Reserved section message"
@@ -178,12 +175,10 @@ exports[`LicenseDetails snapshots snapshots: renders as expected with level set
exports[`LicenseDetails snapshots snapshots: renders as expected with level set to library 1`] = `
<div
className="border-primary-100 border-top pb-3"
className="x-small border-primary-100 border-bottom m-0"
>
<Form.Group>
<div
className="mt-3"
>
<div>
<FormattedMessage
defaultMessage="License Details"
description="Title for license detatils subsection"

157
src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/__snapshots__/LicenseDisplay.test.jsx.snap
View File

@@ -2,61 +2,62 @@
exports[`LicenseDisplay snapshots snapshots: renders as expected with default props 1`] = `
<Stack
className="border-primary-100 border-top"
gap={3}
>
<FormattedMessage
defaultMessage="License Display"
description="Title for license display subsection"
id="authoring.videoeditor.license.displaySubsection.title"
/>
<Card
className="mb-3"
<div
className="x-small"
>
<Card.Header
title={
<injectIntl(ShimmedIntlComponent)
details={Object {}}
license="all-rights-reserved"
/>
}
<FormattedMessage
defaultMessage="License Display"
description="Title for license display subsection"
id="authoring.videoeditor.license.displaySubsection.title"
/>
<Card.Section>
</div>
<div
className="small border border-gray-300 rounded pt-2 px-3 pb-3"
>
<injectIntl(ShimmedIntlComponent)
details={Object {}}
license="all-rights-reserved"
/>
<div
className="x-small"
>
FormattedMessage component with license description
</Card.Section>
</Card>
</div>
</div>
</Stack>
`;
exports[`LicenseDisplay snapshots snapshots: renders as expected with level set to block 1`] = `
<Stack
className="border-primary-100 border-top"
gap={3}
>
<FormattedMessage
defaultMessage="License Display"
description="Title for license display subsection"
id="authoring.videoeditor.license.displaySubsection.title"
/>
<Card
className="mb-3"
<div
className="x-small"
>
<Card.Header
title={
<injectIntl(ShimmedIntlComponent)
details={Object {}}
license="all-rights-reserved"
/>
}
<FormattedMessage
defaultMessage="License Display"
description="Title for license display subsection"
id="authoring.videoeditor.license.displaySubsection.title"
/>
<Card.Section>
</div>
<div
className="small border border-gray-300 rounded pt-2 px-3 pb-3"
>
<injectIntl(ShimmedIntlComponent)
details={Object {}}
license="all-rights-reserved"
/>
<div
className="x-small"
>
FormattedMessage component with license description
</Card.Section>
</Card>
</div>
</div>
<Hyperlink
className="text-primary-500"
className="text-primary-500 x-small"
destination="https://creativecommons.org/about"
size="sm"
target="_blank"
>
<FormattedMessage
@@ -70,33 +71,33 @@ exports[`LicenseDisplay snapshots snapshots: renders as expected with level set
exports[`LicenseDisplay snapshots snapshots: renders as expected with level set to block and license set to Creative Commons 1`] = `
<Stack
className="border-primary-100 border-top"
gap={3}
>
<FormattedMessage
defaultMessage="License Display"
description="Title for license display subsection"
id="authoring.videoeditor.license.displaySubsection.title"
/>
<Card
className="mb-3"
<div
className="x-small"
>
<Card.Header
title={
<injectIntl(ShimmedIntlComponent)
details={Object {}}
license="creative-commons"
/>
}
<FormattedMessage
defaultMessage="License Display"
description="Title for license display subsection"
id="authoring.videoeditor.license.displaySubsection.title"
/>
<Card.Section>
</div>
<div
className="small border border-gray-300 rounded pt-2 px-3 pb-3"
>
<injectIntl(ShimmedIntlComponent)
details={Object {}}
license="creative-commons"
/>
<div
className="x-small"
>
FormattedMessage component with license description
</Card.Section>
</Card>
</div>
</div>
<Hyperlink
className="text-primary-500"
className="text-primary-500 x-small"
destination="https://creativecommons.org/about"
size="sm"
target="_blank"
>
<FormattedMessage
@@ -112,33 +113,33 @@ exports[`LicenseDisplay snapshots snapshots: renders as expected with level set
exports[`LicenseDisplay snapshots snapshots: renders as expected with level set to library 1`] = `
<Stack
className="border-primary-100 border-top"
gap={3}
>
<FormattedMessage
defaultMessage="License Display"
description="Title for license display subsection"
id="authoring.videoeditor.license.displaySubsection.title"
/>
<Card
className="mb-3"
<div
className="x-small"
>
<Card.Header
title={
<injectIntl(ShimmedIntlComponent)
details={Object {}}
license="all-rights-reserved"
/>
}
<FormattedMessage
defaultMessage="License Display"
description="Title for license display subsection"
id="authoring.videoeditor.license.displaySubsection.title"
/>
<Card.Section>
</div>
<div
className="small border border-gray-300 rounded pt-2 px-3 pb-3"
>
<injectIntl(ShimmedIntlComponent)
details={Object {}}
license="all-rights-reserved"
/>
<div
className="x-small"
>
FormattedMessage component with license description
</Card.Section>
</Card>
</div>
</div>
<Hyperlink
className="text-primary-500"
className="text-primary-500 x-small"
destination="https://creativecommons.org/about"
size="sm"
target="_blank"
>
<FormattedMessage

56
src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/__snapshots__/LicenseSelector.test.jsx.snap
View File

@@ -2,11 +2,9 @@
exports[`LicenseSelector snapshots snapshots: renders as expected with block level 1`] = `
<Form.Group
className="mt-2 mx-2"
className="mx-2 my-0"
>
<Form.Row
className="mt-4.5"
>
<Form.Row>
<Form.Control
as="select"
defaultValue="all-rights-reserved"
@@ -35,7 +33,7 @@ exports[`LicenseSelector snapshots snapshots: renders as expected with block lev
onClick={[Function]}
tooltipContent={
<FormattedMessage
defaultMessage="Delete"
defaultMessage="Clear and apply the course-level license"
description="Message presented to user for action to delete license selection"
id="authoring.videoeditor.license.deleteLicenseSelection"
/>
@@ -43,23 +41,26 @@ exports[`LicenseSelector snapshots snapshots: renders as expected with block lev
tooltipPlacement="top"
/>
</Form.Row>
<div>
<div
className="x-small mt-2"
>
<FormattedMessage
defaultMessage="This license is set specifically for this video"
description="Helper text for license type when choosing for a spcific video"
id="authoring.videoeditor.license.defaultLevelDescription.helperText"
/>
</div>
<div
className="border-primary-100 mt-3 border-bottom"
/>
</Form.Group>
`;
exports[`LicenseSelector snapshots snapshots: renders as expected with default props 1`] = `
<Form.Group
className="mt-2 mx-2"
className="mx-2 my-0"
>
<Form.Row
className="mt-4.5"
>
<Form.Row>
<Form.Control
as="select"
defaultValue="all-rights-reserved"
@@ -84,23 +85,26 @@ exports[`LicenseSelector snapshots snapshots: renders as expected with default p
</option>
</Form.Control>
</Form.Row>
<div>
<div
className="x-small mt-2"
>
<FormattedMessage
defaultMessage="This license currently set at the course level"
description="Helper text for license type when using course license"
id="authoring.videoeditor.license.courseLevelDescription.helperText"
/>
</div>
<div
className="border-primary-100 mt-3 border-bottom"
/>
</Form.Group>
`;
exports[`LicenseSelector snapshots snapshots: renders as expected with library level 1`] = `
<Form.Group
className="mt-2 mx-2"
className="mx-2 my-0"
>
<Form.Row
className="mt-4.5"
>
<Form.Row>
<Form.Control
as="select"
defaultValue="all-rights-reserved"
@@ -129,7 +133,7 @@ exports[`LicenseSelector snapshots snapshots: renders as expected with library l
onClick={[Function]}
tooltipContent={
<FormattedMessage
defaultMessage="Delete"
defaultMessage="Clear and apply the course-level license"
description="Message presented to user for action to delete license selection"
id="authoring.videoeditor.license.deleteLicenseSelection"
/>
@@ -137,23 +141,26 @@ exports[`LicenseSelector snapshots snapshots: renders as expected with library l
tooltipPlacement="top"
/>
</Form.Row>
<div>
<div
className="x-small mt-2"
>
<FormattedMessage
defaultMessage="This license currently set at the library level"
description="Helper text for license type when using library license"
id="authoring.videoeditor.license.libraryLevelDescription.helperText"
/>
</div>
<div
className="border-primary-100 mt-3 border-bottom"
/>
</Form.Group>
`;
exports[`LicenseSelector snapshots snapshots: renders as expected with no license 1`] = `
<Form.Group
className="mt-2 mx-2"
className="mx-2 my-0"
>
<Form.Row
className="mt-4.5"
>
<Form.Row>
<Form.Control
as="select"
defaultValue=""
@@ -178,12 +185,17 @@ exports[`LicenseSelector snapshots snapshots: renders as expected with no licens
</option>
</Form.Control>
</Form.Row>
<div>
<div
className="x-small mt-2"
>
<FormattedMessage
defaultMessage="This license currently set at the course level"
description="Helper text for license type when using course license"
id="authoring.videoeditor.license.courseLevelDescription.helperText"
/>
</div>
<div
className="border-primary-100 mt-3 border-bottom"
/>
</Form.Group>
`;

12
src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/__snapshots__/index.test.jsx.snap
View File

@@ -8,7 +8,9 @@ exports[`LicenseWidget snapshots snapshots: renders as expected with default pro
details={Object {}}
license="all-rights-reserved"
/>
<div>
<div
className="x-small mt-2"
>
<FormattedMessage
defaultMessage="This license currently set at the course level"
description="Helper text for license type when using course license"
@@ -70,7 +72,9 @@ exports[`LicenseWidget snapshots snapshots: renders as expected with isLibrary t
details={Object {}}
license="all-rights-reserved"
/>
<div>
<div
className="x-small mt-2"
>
<FormattedMessage
defaultMessage="This license currently set at the library level"
description="Helper text for license type when using library license"
@@ -117,7 +121,9 @@ exports[`LicenseWidget snapshots snapshots: renders as expected with licenseType
details={Object {}}
license="all-rights-reserved"
/>
<div>
<div
className="x-small mt-2"
>
<FormattedMessage
defaultMessage="This license is set specifically for this video"
description="Helper text for license type when choosing for a spcific video"

2
src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/index.jsx
View File

@@ -48,7 +48,7 @@ export const LicenseWidget = ({
subtitle={(
<div>
<LicenseBlurb license={license} details={details} />
<div>{levelDescription}</div>
<div className="x-small mt-2">{levelDescription}</div>
</div>
)}
title={intl.formatMessage(messages.title)}

2
src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/messages.js
View File

@@ -26,7 +26,7 @@ export const messages = {
},
deleteLicenseSelection: {
id: 'authoring.videoeditor.license.deleteLicenseSelection',
defaultMessage: 'Delete',
defaultMessage: 'Clear and apply the course-level license',
description: 'Message presented to user for action to delete license selection',
},
allRightsReservedIconsLabel: {

5
src/editors/containers/VideoEditor/components/VideoSettingsModal/components/ThumbnailWidget/__snapshots__/index.test.jsx.snap
View File

@@ -2,6 +2,7 @@
exports[`ThumbnailWidget snapshots snapshots: renders as expected where thumbnail uploads are allowed 1`] = `
<injectIntl(ShimmedIntlComponent)
fontSize="x-small"
isError={true}
subtitle="Unavailable"
title="Thumbnail"
@@ -43,6 +44,7 @@ exports[`ThumbnailWidget snapshots snapshots: renders as expected where thumbnai
exports[`ThumbnailWidget snapshots snapshots: renders as expected where videoType equals edxVideo 1`] = `
<injectIntl(ShimmedIntlComponent)
fontSize="x-small"
isError={true}
subtitle="Yes"
title="Thumbnail"
@@ -81,6 +83,7 @@ exports[`ThumbnailWidget snapshots snapshots: renders as expected where videoTyp
exports[`ThumbnailWidget snapshots snapshots: renders as expected where videoType equals edxVideo and no thumbnail 1`] = `
<injectIntl(ShimmedIntlComponent)
fontSize="x-small"
isError={true}
subtitle="None"
title="Thumbnail"
@@ -150,6 +153,7 @@ exports[`ThumbnailWidget snapshots snapshots: renders as expected where videoTyp
exports[`ThumbnailWidget snapshots snapshots: renders as expected with a thumbnail provided 1`] = `
<injectIntl(ShimmedIntlComponent)
fontSize="x-small"
isError={true}
subtitle="Yes"
title="Thumbnail"
@@ -182,6 +186,7 @@ exports[`ThumbnailWidget snapshots snapshots: renders as expected with a thumbna
exports[`ThumbnailWidget snapshots snapshots: renders as expected with default props 1`] = `
<injectIntl(ShimmedIntlComponent)
fontSize="x-small"
isError={true}
subtitle="Unavailable"
title="Thumbnail"

1
src/editors/containers/VideoEditor/components/VideoSettingsModal/components/ThumbnailWidget/index.jsx
View File

@@ -61,6 +61,7 @@ export const ThumbnailWidget = ({
return (!isLibrary ? (
<CollapsibleFormWidget
fontSize="x-small"
isError={Object.keys(error).length !== 0}
title={intl.formatMessage(messages.title)}
subtitle={getSubtitle()}

6
src/editors/containers/VideoEditor/components/VideoSettingsModal/components/TranscriptWidget/__snapshots__/index.test.jsx.snap
View File

@@ -2,6 +2,7 @@
exports[`TranscriptWidget component snapshots snapshot: renders ErrorAlert with delete error message 1`] = `
<CollapsibleFormWidget
fontSize="x-small"
isError={true}
subtitle="English"
title="Transcripts"
@@ -121,6 +122,7 @@ exports[`TranscriptWidget component snapshots snapshot: renders ErrorAlert with
exports[`TranscriptWidget component snapshots snapshot: renders ErrorAlert with upload error message 1`] = `
<CollapsibleFormWidget
fontSize="x-small"
isError={true}
subtitle="English, French"
title="Transcripts"
@@ -244,6 +246,7 @@ exports[`TranscriptWidget component snapshots snapshot: renders ErrorAlert with
exports[`TranscriptWidget component snapshots snapshots: renders as expected with allowTranscriptDownloads true 1`] = `
<CollapsibleFormWidget
fontSize="x-small"
isError={true}
subtitle="English"
title="Transcripts"
@@ -363,6 +366,7 @@ exports[`TranscriptWidget component snapshots snapshots: renders as expected wit
exports[`TranscriptWidget component snapshots snapshots: renders as expected with default props 1`] = `
<CollapsibleFormWidget
fontSize="x-small"
isError={true}
subtitle="None"
title="Transcripts"
@@ -429,6 +433,7 @@ exports[`TranscriptWidget component snapshots snapshots: renders as expected wit
exports[`TranscriptWidget component snapshots snapshots: renders as expected with showTranscriptByDefault true 1`] = `
<CollapsibleFormWidget
fontSize="x-small"
isError={true}
subtitle="English"
title="Transcripts"
@@ -548,6 +553,7 @@ exports[`TranscriptWidget component snapshots snapshots: renders as expected wit
exports[`TranscriptWidget component snapshots snapshots: renders as expected with transcripts 1`] = `
<CollapsibleFormWidget
fontSize="x-small"
isError={true}
subtitle="English"
title="Transcripts"

1
src/editors/containers/VideoEditor/components/VideoSettingsModal/components/TranscriptWidget/index.jsx
View File

@@ -91,6 +91,7 @@ export const TranscriptWidget = ({
const hasTranscripts = module.hooks.hasTranscripts(transcripts);
return (
<CollapsibleFormWidget
fontSize="x-small"
isError={Object.keys(error).length !== 0}
subtitle={fullTextLanguages}
title={intl.formatMessage(messages.title)}

1
src/editors/containers/VideoEditor/components/VideoSettingsModal/components/VideoSourceWidget/__snapshots__/index.test.jsx.snap
View File

@@ -2,6 +2,7 @@
exports[`VideoSourceWidget snapshots snapshots: renders as expected with default props 1`] = `
<injectIntl(ShimmedIntlComponent)
fontSize="x-small"
title="Video source"
>
<Form.Group>

1
src/editors/containers/VideoEditor/components/VideoSettingsModal/components/VideoSourceWidget/index.jsx
View File

@@ -52,6 +52,7 @@ export const VideoSourceWidget = ({
return (
<CollapsibleFormWidget
fontSize="x-small"
title={intl.formatMessage(messages.titleLabel)}
>
<Form.Group>

28
src/editors/containers/VideoEditor/components/VideoSettingsModal/components/__snapshots__/CollapsibleFormWidget.test.jsx.snap
View File

@@ -2,7 +2,7 @@
exports[`CollapsibleFormWidget render snapshots: renders as expected with default props 1`] = `
<Advanced
className="collapsible-card rounded mx-4 my-3 px-3 py-2 text-primary-500 x-small"
className="collapsible-card rounded mx-4 my-3 px-3 py-2 text-primary-500"
defaultOpen={true}
>
<Trigger
@@ -20,11 +20,15 @@ exports[`CollapsibleFormWidget render snapshots: renders as expected with defaul
className="d-flex flex-column flex-grow-1"
>
<div
className="d-flex flex-grow-1 w-75"
className="d-flex flex-grow-1 w-75 x-small"
>
tiTLE
</div>
SuBTItle
<div
className=""
>
SuBTItle
</div>
</div>
<div
className="d-flex flex-row align-self-start"
@@ -40,7 +44,7 @@ exports[`CollapsibleFormWidget render snapshots: renders as expected with defaul
whenOpen={true}
>
<div
className="d-flex flex-grow-1 w-75"
className="d-flex flex-grow-1 w-75 x-small"
>
tiTLE
</div>
@@ -56,7 +60,7 @@ exports[`CollapsibleFormWidget render snapshots: renders as expected with defaul
</Visible>
</Trigger>
<Body
className="collapsible-body rounded px-0"
className="collapsible-body rounded px-0 "
>
<p>
Some test string
@@ -67,7 +71,7 @@ exports[`CollapsibleFormWidget render snapshots: renders as expected with defaul
exports[`CollapsibleFormWidget render snapshots: renders with open={true} when there is error 1`] = `
<Advanced
className="collapsible-card rounded mx-4 my-3 px-3 py-2 text-primary-500 x-small"
className="collapsible-card rounded mx-4 my-3 px-3 py-2 text-primary-500"
defaultOpen={true}
open={true}
>
@@ -86,11 +90,15 @@ exports[`CollapsibleFormWidget render snapshots: renders with open={true} when t
className="d-flex flex-column flex-grow-1"
>
<div
className="d-flex flex-grow-1 w-75"
className="d-flex flex-grow-1 w-75 x-small"
>
tiTLE
</div>
SuBTItle
<div
className=""
>
SuBTItle
</div>
</div>
<div
className="d-flex flex-row align-self-start"
@@ -109,7 +117,7 @@ exports[`CollapsibleFormWidget render snapshots: renders with open={true} when t
whenOpen={true}
>
<div
className="d-flex flex-grow-1 w-75"
className="d-flex flex-grow-1 w-75 x-small"
>
tiTLE
</div>
@@ -125,7 +133,7 @@ exports[`CollapsibleFormWidget render snapshots: renders with open={true} when t
</Visible>
</Trigger>
<Body
className="collapsible-body rounded px-0"
className="collapsible-body rounded px-0 "
>
<p>
Some test string

1
src/editors/containers/VideoEditor/components/VideoSettingsModal/components/__snapshots__/DurationWidget.test.jsx.snap
View File

@@ -2,6 +2,7 @@
exports[`DurationWidget render snapshots: renders as expected with default props 1`] = `
<injectIntl(ShimmedIntlComponent)
fontSize="x-small"
subtitle="Full video length"
title="Duration"
>