@openedx/frontend-app-learner-dashboard 1.0.0-alpha.4 → 1.0.0-alpha.6

package/src/__snapshots__/index.test.jsx.snap

@@ -1,43 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`app registry subscribe: APP_INIT_ERROR.  snapshot: displays an ErrorPage to root element 1`] = `
-<UNDEFINED>
-  <ErrorPage
-    message="test-error-message"
-  />
-</UNDEFINED>
-`;
-
-exports[`app registry subscribe: APP_READY.  links App to root element 1`] = `
-<UNDEFINED>
-  <SiteProvider
-    store={
-      {
-        "redux": "store",
-      }
-    }
-  >
-    <NoticesWrapper>
-      <Routes>
-        <Route
-          element={
-            <PageWrap>
-              <App />
-            </PageWrap>
-          }
-          path="/"
-        />
-        <Route
-          element={
-            <Navigate
-              replace={true}
-              to="/"
-            />
-          }
-          path="*"
-        />
-      </Routes>
-    </NoticesWrapper>
-  </SiteProvider>
-</UNDEFINED>
-`;

package/src/app.scss

@@ -1,41 +0,0 @@
-@import "~@edx/brand/paragon/fonts";
-@import "~@edx/brand/paragon/variables";
-@import "~@openedx/paragon/scss/core/core";
-@import "~@edx/brand/paragon/overrides";
-
-$fa-font-path: "~font-awesome/fonts";
-@import "~font-awesome/scss/font-awesome";
-
-$input-focus-box-shadow: $input-box-shadow; // hack to get upgrade to paragon 4.0.0 to work
-
-#learnerDashboardRoot {
-  main {
-    flex-grow: 1;
-  }
-
-  // Removing a odd 1.5 scaling on checkboxes.:
-  input[type=checkbox] {
-    transform: none;
-  }
-
-  .text-ellipsis {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  .alert.alert-info .alert-icon {
-    color: black;
-  }
-
-  #paragon-portal-root {
-    .pgn__modal-layer {
-      .pgn__modal-close-container {
-        right: 1rem !important;
-      }
-    }
-    .confirm-modal .pgn__modal-body {
-      overflow: hidden;
-    }
-  }
-}

package/src/app.ts

@@ -1,23 +0,0 @@
-import { App } from '@openedx/frontend-base';
-import { appId } from './constants';
-import routes from './routes';
-import providers from './providers';
-import messages from './i18n';
-import slots from './slots';
-
-const app: App = {
-  appId,
-  routes,
-  providers,
-  messages,
-  slots,
-  config: {
-    LEARNING_BASE_URL: 'http://apps.local.openedx.io:2000',
-    ENABLE_PROGRAMS: false,
-    ECOMMERCE_BASE_URL: '',
-    ORDER_HISTORY_URL: '',
-    SUPPORT_URL: '',
-  }
-};
-
-export default app;

package/src/components/Banner.jsx

@@ -1,26 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import { Alert } from '@openedx/paragon';
-import { Info } from '@openedx/paragon/icons';
-
-export const Banner = ({
-  children, variant, icon, className,
-}) => (
-  <Alert variant={variant} className={className} icon={icon}>
-    {children}
-  </Alert>
-);
-Banner.defaultProps = {
-  icon: Info,
-  variant: 'info',
-  className: 'mb-0',
-};
-Banner.propTypes = {
-  variant: PropTypes.string,
-  icon: PropTypes.func,
-  children: PropTypes.node.isRequired,
-  className: PropTypes.string,
-};
-
-export default Banner;

package/src/components/Banner.test.jsx

@@ -1,27 +0,0 @@
-import { shallow } from '@edx/react-unit-test-utils';
-
-import { Alert } from '@openedx/paragon';
-
-import Banner from './Banner';
-
-describe('Banner', () => {
-  const props = {
-    children: 'Hello, world!',
-  };
-  describe('snapshot', () => {
-    test('renders default banner', () => {
-      const wrapper = shallow(<Banner {...props} />);
-      expect(wrapper.snapshot).toMatchSnapshot();
-    });
-    test('renders with variants', () => {
-      const wrapper = shallow(<Banner {...props} variant="success" />);
-      expect(wrapper.snapshot).toMatchSnapshot();
-
-      expect(wrapper.instance.findByType(Alert)[0].props.variant).toEqual('success');
-    });
-    test('renders with custom class', () => {
-      const wrapper = shallow(<Banner {...props} className="custom-class" />);
-      expect(wrapper.snapshot).toMatchSnapshot();
-    });
-  });
-});

package/src/components/__snapshots__/Banner.test.jsx.snap

@@ -1,31 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Banner snapshot renders default banner 1`] = `
-<Alert
-  className="mb-0"
-  icon={[MockFunction icons.Info]}
-  variant="info"
->
-  Hello, world!
-</Alert>
-`;
-
-exports[`Banner snapshot renders with custom class 1`] = `
-<Alert
-  className="custom-class"
-  icon={[MockFunction icons.Info]}
-  variant="info"
->
-  Hello, world!
-</Alert>
-`;
-
-exports[`Banner snapshot renders with variants 1`] = `
-<Alert
-  className="mb-0"
-  icon={[MockFunction icons.Info]}
-  variant="success"
->
-  Hello, world!
-</Alert>
-`;

package/src/constants.ts

@@ -1 +0,0 @@
-export const appId = 'org.openedx.frontend.app.learnerDashboard';

package/src/containers/CourseCard/CourseCard.scss

@@ -1,75 +0,0 @@
-@import "@openedx/paragon/scss/core/core";
-
-.course-card {
-  .card {
-    .pgn__card-wrapper-image-cap.vertical {
-      display: flex;
-      min-height: $card-image-vertical-max-height;
-    }
-    .pgn__card-image-cap {
-      border-bottom-left-radius: 0 !important;
-    }
-    .overflow-visible {
-      overflow: visible;
-    }
-    .pgn__card-header-content {
-      margin-top: 1.5rem;
-    }
-    .pgn__card-footer {
-      flex-wrap: nowrap;
-
-      &.vertical {
-        flex-direction: column;
-      }
-
-      .pgn__action-row {
-        align-self: flex-end;
-        white-space: nowrap;
-      }
-    }
-
-    .course-card-verify-ribbon-container {
-      width: 100%;
-      position: absolute;
-      bottom: 0;
-      left: 0;
-      text-align: center;
-
-      .badge {
-        border-radius: 0;
-      }
-
-      > img {
-        width: 40px;
-        z-index: 1000;
-        position: absolute;
-        top: 0;
-        right: 0;
-      }
-    }
-  }
-
-  .course-card-banners {
-    > .alert {
-      border-radius: 0;
-      box-shadow: none;
-      padding: map-get($spacers, 3) map-get($spacers, 4);
-
-      &:last-of-type {
-        border-bottom-left-radius: $alert-border-radius;
-        border-bottom-right-radius: $alert-border-radius;
-      }
-    }
-
-    .related-programs-banner {
-      .related-programs-list-container {
-        list-style: none;
-        display: inline;
-
-        > li {
-          line-height: 1rem;
-        }
-      }
-    }
-  }
-}

package/src/containers/CourseCard/__snapshots__/index.test.jsx.snap

@@ -1,111 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CourseCard component snapshot: collapsed 1`] = `
-<div
-  className="mb-4.5 course-card"
-  data-testid="CourseCard"
-  id="test-card-id"
->
-  <Card
-    orientation="vertical"
-  >
-    <div
-      className="d-flex flex-column w-100"
-    >
-      <div>
-        <CourseCardImage
-          cardId="test-card-id"
-          orientation="horizontal"
-        />
-        <Card.Body>
-          <Card.Header
-            actions={
-              <CourseCardMenu
-                cardId="test-card-id"
-              />
-            }
-            title={
-              <CourseCardTitle
-                cardId="test-card-id"
-              />
-            }
-          />
-          <Card.Section
-            className="pt-0"
-          >
-            <CourseCardDetails
-              cardId="test-card-id"
-            />
-          </Card.Section>
-          <Card.Footer
-            orientation="vertical"
-          >
-            <CourseCardActions
-              cardId="test-card-id"
-            />
-          </Card.Footer>
-        </Card.Body>
-      </div>
-      <CourseCardBanners
-        cardId="test-card-id"
-      />
-    </div>
-  </Card>
-</div>
-`;
-
-exports[`CourseCard component snapshot: not collapsed 1`] = `
-<div
-  className="mb-4.5 course-card"
-  data-testid="CourseCard"
-  id="test-card-id"
->
-  <Card
-    orientation="horizontal"
-  >
-    <div
-      className="d-flex flex-column w-100"
-    >
-      <div
-        className="d-flex"
-      >
-        <CourseCardImage
-          cardId="test-card-id"
-          orientation="horizontal"
-        />
-        <Card.Body>
-          <Card.Header
-            actions={
-              <CourseCardMenu
-                cardId="test-card-id"
-              />
-            }
-            title={
-              <CourseCardTitle
-                cardId="test-card-id"
-              />
-            }
-          />
-          <Card.Section
-            className="pt-0"
-          >
-            <CourseCardDetails
-              cardId="test-card-id"
-            />
-          </Card.Section>
-          <Card.Footer
-            orientation="horizontal"
-          >
-            <CourseCardActions
-              cardId="test-card-id"
-            />
-          </Card.Footer>
-        </Card.Body>
-      </div>
-      <CourseCardBanners
-        cardId="test-card-id"
-      />
-    </div>
-  </Card>
-</div>
-`;

package/src/containers/CourseCard/components/CourseCardActions/ActionButton/__snapshots__/index.test.jsx.snap

@@ -1,14 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`ActionButton snapshot is collapsed 1`] = `
-<Button
-  arbitary="props"
-  size="sm"
-/>
-`;
-
-exports[`ActionButton snapshot is not collapsed 1`] = `
-<Button
-  arbitary="props"
-/>
-`;

package/src/containers/CourseCard/components/CourseCardActions/ActionButton/hooks.js

@@ -1,8 +0,0 @@
-import { useWindowSize, breakpoints } from '@openedx/paragon';
-
-export const useIsCollapsed = () => {
-  const { width } = useWindowSize();
-  return width < breakpoints.medium.maxWidth && width > breakpoints.small.maxWidth;
-};
-
-export default useIsCollapsed;

package/src/containers/CourseCard/components/CourseCardActions/ActionButton/hooks.test.js

@@ -1,21 +0,0 @@
-import { useWindowSize, breakpoints } from '@openedx/paragon';
-import useIsCollapsed from './hooks';
-
-describe('useIsCollapsed', () => {
-  it('returns true only when it is between medium and small', () => {
-    // make sure all three breakpoints gap is large enough for test
-    expect(
-      (breakpoints.large.maxWidth - 1)
-      > (breakpoints.medium.maxWidth - 1)
-      && (breakpoints.medium.maxWidth - 1)
-      > (breakpoints.small.maxWidth - 1),
-    ).toBe(true);
-
-    useWindowSize.mockReturnValue({ width: breakpoints.large.maxWidth - 1 });
-    expect(useIsCollapsed()).toEqual(false);
-    useWindowSize.mockReturnValue({ width: breakpoints.medium.maxWidth - 1 });
-    expect(useIsCollapsed()).toEqual(true);
-    useWindowSize.mockReturnValue({ width: breakpoints.small.maxWidth - 1 });
-    expect(useIsCollapsed()).toEqual(false);
-  });
-});

package/src/containers/CourseCard/components/CourseCardActions/ActionButton/index.jsx

@@ -1,16 +0,0 @@
-import React from 'react';
-import { Button } from '@openedx/paragon';
-
-import useIsCollapsed from './hooks';
-
-export const ActionButton = (props) => {
-  const isSmall = useIsCollapsed();
-  return (
-    <Button
-      {...props}
-      {...isSmall && { size: 'sm' }}
-    />
-  );
-};
-
-export default ActionButton;

package/src/containers/CourseCard/components/CourseCardActions/ActionButton/index.test.jsx

@@ -1,25 +0,0 @@
-import { shallow } from '@edx/react-unit-test-utils';
-
-import ActionButton from '.';
-
-import useIsCollapsed from './hooks';
-
-jest.mock('./hooks', () => jest.fn());
-
-describe('ActionButton', () => {
-  const props = {
-    arbitary: 'props',
-  };
-  describe('snapshot', () => {
-    test('is collapsed', () => {
-      useIsCollapsed.mockReturnValueOnce(true);
-      const wrapper = shallow(<ActionButton {...props} />);
-      expect(wrapper.snapshot).toMatchSnapshot();
-    });
-    test('is not collapsed', () => {
-      useIsCollapsed.mockReturnValueOnce(false);
-      const wrapper = shallow(<ActionButton {...props} />);
-      expect(wrapper.snapshot).toMatchSnapshot();
-    });
-  });
-});

package/src/containers/CourseCard/components/CourseCardActions/BeginCourseButton.jsx

@@ -1,38 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import { useIntl } from '@openedx/frontend-base';
-
-import track from '../../../../tracking';
-import { reduxHooks } from '../../../../hooks';
-
-import useActionDisabledState from '../hooks';
-import ActionButton from './ActionButton';
-import messages from './messages';
-
-export const BeginCourseButton = ({ cardId }) => {
-  const { formatMessage } = useIntl();
-  const { homeUrl } = reduxHooks.useCardCourseRunData(cardId);
-  const execEdTrackingParam = reduxHooks.useCardExecEdTrackingParam(cardId);
-  const { disableBeginCourse } = useActionDisabledState(cardId);
-
-  const handleClick = reduxHooks.useTrackCourseEvent(
-    track.course.enterCourseClicked,
-    cardId,
-    homeUrl + execEdTrackingParam,
-  );
-  return (
-    <ActionButton
-      disabled={disableBeginCourse}
-      as="a"
-      href="#"
-      onClick={handleClick}
-    >
-      {formatMessage(messages.beginCourse)}
-    </ActionButton>
-  );
-};
-BeginCourseButton.propTypes = {
-  cardId: PropTypes.string.isRequired,
-};
-export default BeginCourseButton;

package/src/containers/CourseCard/components/CourseCardActions/BeginCourseButton.test.jsx

@@ -1,86 +0,0 @@
-import { shallow } from '@edx/react-unit-test-utils';
-
-import { reduxHooks } from 'hooks';
-import track from 'tracking';
-import useActionDisabledState from '../hooks';
-import BeginCourseButton from './BeginCourseButton';
-
-jest.mock('tracking', () => ({
-  course: {
-    enterCourseClicked: jest.fn().mockName('segment.enterCourseClicked'),
-  },
-}));
-
-jest.mock('hooks', () => ({
-  reduxHooks: {
-    useCardCourseRunData: jest.fn(),
-    useCardExecEdTrackingParam: jest.fn(),
-    useTrackCourseEvent: jest.fn(),
-  },
-}));
-jest.mock('../hooks', () => jest.fn(() => ({ disableBeginCourse: false })));
-jest.mock('./ActionButton', () => 'ActionButton');
-
-let wrapper;
-const homeUrl = 'home-url';
-reduxHooks.useCardCourseRunData.mockReturnValue({ homeUrl });
-const execEdPath = (cardId) => `exec-ed-tracking-path=${cardId}`;
-reduxHooks.useCardExecEdTrackingParam.mockImplementation(execEdPath);
-reduxHooks.useTrackCourseEvent.mockImplementation(
-  (eventName, cardId, url) => ({ trackCourseEvent: { eventName, cardId, url } }),
-);
-
-describe('BeginCourseButton', () => {
-  const props = {
-    cardId: 'cardId',
-  };
-  beforeEach(() => {
-    jest.clearAllMocks();
-  });
-  describe('behavior', () => {
-    it('initializes course run data with cardId', () => {
-      wrapper = shallow(<BeginCourseButton {...props} />);
-      expect(reduxHooks.useCardCourseRunData).toHaveBeenCalledWith(props.cardId);
-    });
-    it('loads exec education path param', () => {
-      wrapper = shallow(<BeginCourseButton {...props} />);
-      expect(reduxHooks.useCardExecEdTrackingParam).toHaveBeenCalledWith(props.cardId);
-    });
-    it('loads disabled states for begin action from action hooks', () => {
-      wrapper = shallow(<BeginCourseButton {...props} />);
-      expect(useActionDisabledState).toHaveBeenCalledWith(props.cardId);
-    });
-  });
-  describe('snapshot', () => {
-    describe('disabled', () => {
-      beforeEach(() => {
-        useActionDisabledState.mockReturnValueOnce({ disableBeginCourse: true });
-        wrapper = shallow(<BeginCourseButton {...props} />);
-      });
-      test('snapshot', () => {
-        expect(wrapper.snapshot).toMatchSnapshot();
-      });
-      it('should be disabled', () => {
-        expect(wrapper.instance.props.disabled).toEqual(true);
-      });
-    });
-    describe('enabled', () => {
-      beforeEach(() => {
-        wrapper = shallow(<BeginCourseButton {...props} />);
-      });
-      test('snapshot', () => {
-        expect(wrapper.snapshot).toMatchSnapshot();
-      });
-      it('should be enabled', () => {
-        expect(wrapper.instance.props.disabled).toEqual(false);
-      });
-      it('should track enter course clicked event on click, with exec ed param', () => {
-        expect(wrapper.instance.props.onClick).toEqual(reduxHooks.useTrackCourseEvent(
-          track.course.enterCourseClicked,
-          props.cardId,
-          homeUrl + execEdPath(props.cardId),
-        ));
-      });
-    });
-  });
-});

package/src/containers/CourseCard/components/CourseCardActions/ResumeButton.jsx

@@ -1,38 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import { useIntl } from '@openedx/frontend-base';
-
-import track from '../../../../tracking';
-import { reduxHooks } from '../../../../hooks';
-
-import useActionDisabledState from '../hooks';
-import ActionButton from './ActionButton';
-import messages from './messages';
-
-export const ResumeButton = ({ cardId }) => {
-  const { formatMessage } = useIntl();
-  const { resumeUrl } = reduxHooks.useCardCourseRunData(cardId);
-  const execEdTrackingParam = reduxHooks.useCardExecEdTrackingParam(cardId);
-  const { disableResumeCourse } = useActionDisabledState(cardId);
-
-  const handleClick = reduxHooks.useTrackCourseEvent(
-    track.course.enterCourseClicked,
-    cardId,
-    resumeUrl + execEdTrackingParam,
-  );
-  return (
-    <ActionButton
-      disabled={disableResumeCourse}
-      as="a"
-      href="#"
-      onClick={handleClick}
-    >
-      {formatMessage(messages.resume)}
-    </ActionButton>
-  );
-};
-ResumeButton.propTypes = {
-  cardId: PropTypes.string.isRequired,
-};
-export default ResumeButton;