e04e8a5a61
* feat: Implement edX forums advanced setting editor This change implements the UX for the advanced settings editor for the internal edX forums. * Stepper now intelligently shows/hides drop shadows on the header and footer Also organized the component into a more Paragon-like organization with the sub-components hanging off the main one. * Organizing full screen modal in a more Paragon-like way. Also fixing a few minor styling issues. * Massaging SettingsEditor into LegacyConfigForm - Reorganizing into apps/legacy directory from settings/base-forum - Using Formik and Yup for managing form data - Refactoring FormSwitchGroup a little and adding data-related properties - Also moving FormSwitchGroup into ‘generic’ - Some initial attempts at error validation in LegacyConfigForm (a blackout dates regex which doesn’t seem to work yet) - Sub-sections of config now fold and animate when their parent is toggled. * Minor naming and refactoring of Discussions component - Event handlers should be named handle*, not on*. Oops. Got over-zealous. - Organizing paths into some variables at the top of the component. The pages and resources path should probably be passed in. * Hooking up and organizing LTI and Legacy forms - The LTI form moves into app/lti - Adds in rendering of the legacy discussions form. - Splits up the messages file a bit (app/lti/messages.js exists now) - Removing unnecessary h1 in the LtiConfigForm. * Removing ‘info’ blue coloring from the pages & resources view. Co-authored-by: Kshitij Sobti <kshitij@sobti.in>
41 lines
844 B
JavaScript
41 lines
844 B
JavaScript
import React from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import classNames from 'classnames';
|
|
import Icon from './Icon';
|
|
import Line from './Line';
|
|
import Body from './Body';
|
|
import Footer from './Footer';
|
|
import Header from './Header';
|
|
import { StepperContextProvider } from './StepperContext';
|
|
|
|
export default function Stepper({ children, className }) {
|
|
return (
|
|
<div
|
|
className={classNames(
|
|
'd-flex',
|
|
'flex-column',
|
|
className,
|
|
)}
|
|
>
|
|
<StepperContextProvider>
|
|
{children}
|
|
</StepperContextProvider>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
Stepper.propTypes = {
|
|
className: PropTypes.string,
|
|
children: PropTypes.node.isRequired,
|
|
};
|
|
|
|
Stepper.defaultProps = {
|
|
className: null,
|
|
};
|
|
|
|
Stepper.Icon = Icon;
|
|
Stepper.Line = Line;
|
|
Stepper.Body = Body;
|
|
Stepper.Footer = Footer;
|
|
Stepper.Header = Header;
|