diff --git a/.gitignore b/.gitignore index 32a85901..cc636999 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,4 @@ +.DS_Store coverage dist node_modules diff --git a/README.rst b/README.rst index 5800ab41..80d4ab24 100644 --- a/README.rst +++ b/README.rst @@ -5,9 +5,7 @@ frontend-component-footer |semantic-release| frontend-component-footer is a library containing a site footer -component for use when building edX frontend applications. - -At this time, this component is hard-coded to match the legacy LMS site footer, including all of its links. As implemented, this component should probably be called the ``frontend-component-lms-footer``. +component for use when building Open edX frontend applications. Usage ----- @@ -36,6 +34,11 @@ Component Usage:: - onLanguageSelected (optional) - supportedLanguages (optional) +Styles (project.scss):: + + @import '@edx/frontend-component-footer/src/footer.scss'; + + Requirements ------------ diff --git a/example/index.scss b/example/index.scss index 90ce2ed1..22ac0a83 100644 --- a/example/index.scss +++ b/example/index.scss @@ -1,3 +1,2 @@ -@import "~@edx/paragon/scss/edx/theme.scss"; -@import "~@edx/paragon/scss/edx/fonts.scss"; -@import '../src/footer.scss'; +@import "~@edx/paragon/scss/core/core.scss"; +@import "../src/footer"; diff --git a/openedx.yaml b/openedx.yaml new file mode 100644 index 00000000..26f244d5 --- /dev/null +++ b/openedx.yaml @@ -0,0 +1,8 @@ +# openedx.yaml + +--- +owner: edx/fedx-team +tags: + - library + - component + - react diff --git a/package.json b/package.json index 6e46f803..6c94acfb 100644 --- a/package.json +++ b/package.json @@ -46,8 +46,7 @@ "react": "^16.4.2", "react-dom": "^16.2.0", "react-test-renderer": "^16.6.0", - "reactifex": "^1.1.1", - "watch": "^1.0.2" + "reactifex": "^1.1.1" }, "dependencies": { "@fortawesome/fontawesome-svg-core": "^1.2.17", diff --git a/public/index.html b/public/index.html index 69f0bf5c..d2238ca6 100755 --- a/public/index.html +++ b/public/index.html @@ -1,11 +1,9 @@ - Learner Profile | edX + Footer - -
diff --git a/src/_footer.scss b/src/_footer.scss index 5acbf81a..2d2e859f 100644 --- a/src/_footer.scss +++ b/src/_footer.scss @@ -1,165 +1,5 @@ -.max-width-222 { - max-width: 222px; -} - -.max-width-264 { - max-width: 264px; -} - -.max-width-1180 { - max-width: 1180px; -} - -.max-height-39 { - max-height: 39px; -} - -.d-grid { - display: grid; -} - -$gray-footer: #fcfcfc; -$border-1: 1px solid $gray-200; +$gray-footer: #fcfcfc !default; .footer { background-color: $gray-footer; - - .area-1 { - grid-column: 1; - grid-row: 1; - border-bottom: $border-1; - padding-bottom: 1rem; - } - - .area-2 { - grid-column: 1; - grid-row: 2; - border-bottom: $border-1; - padding: 1rem 0; - } - - .area-3 { - grid-column: 1; - grid-row: 3; - border-bottom: $border-1; - padding: 1rem 0; - } - - .area-4 { - grid-column: 1; - grid-row: 4; - border-bottom: $border-1; - padding: 1rem 0; - } - - .area-5 { - grid-column: 1; - grid-row: 5; - padding: 1rem 0; - } - - @media only screen and (min-width: 717px) { - .area-1 { - grid-column: 1 / span 2; - grid-row: 1; - border-bottom: none; - padding: 1rem 0; - } - - .area-2 { - grid-column: 1; - grid-row: 2; - } - - .area-3 { - grid-column: 1; - grid-row: 3; - } - - .area-4 { - grid-column: 1; - grid-row: 4; - border-bottom: none; - } - - .area-5 { - grid-column: 2; - grid-row: 2 / span 3; - border-left: $border-1; - padding-left: 1rem; - margin-left: 1rem; - } - } - - @media only screen and (min-width: 870px) { - .area-1 { - grid-column: 1; - grid-row: 1 / span 3; - border-right: $border-1; - padding-right: 1rem; - margin-right: 1rem; - } - - .area-2 { - grid-column: 2; - grid-row: 1; - border-bottom: none; - border-right: $border-1; - padding-right: 1rem; - margin-right: 1rem; - } - - .area-3 { - grid-column: 3; - grid-row: 1; - border-bottom: none; - border-right: $border-1; - padding-right: 1rem; - margin-right: 1rem; - } - - .area-4 { - grid-column: 4; - grid-row: 1; - } - - .area-5 { - grid-column: 2 / span 3; - grid-row: 2; - border: none; - margin-left: 0; - padding-left: 0; - } - } - - @media only screen and (min-width: 1188px) { - .area-1 { - grid-column: 1 / span 1; - grid-row: 1; - } - - .area-2 { - grid-column: 2; - grid-row: 1; - } - - .area-3 { - grid-column: 3; - grid-row: 1; - } - - .area-4 { - grid-column: 4; - grid-row: 1; - border-right: $border-1; - padding-right: 1rem; - margin-right: 1rem; - } - - .area-5 { - grid-column: 5 / span 1; - grid-row: 1; - max-width: 372px; - } - } } diff --git a/src/components/AppleAppStoreButton.jsx b/src/components/AppleAppStoreButton.jsx deleted file mode 100644 index 4f7db859..00000000 --- a/src/components/AppleAppStoreButton.jsx +++ /dev/null @@ -1,24 +0,0 @@ -import React from 'react'; -import { injectIntl, intlShape } from '@edx/frontend-i18n'; -import messages from './Footer.messages'; - -const AppleAppStoreButton = ({ intl, ...props }) => ( - - {intl.formatMessage(messages['footer.mobileApp.apple'])} - -); - -AppleAppStoreButton.propTypes = { - intl: intlShape.isRequired, -}; - -export default injectIntl(AppleAppStoreButton); diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx index 78d168ad..8308e399 100644 --- a/src/components/Footer.jsx +++ b/src/components/Footer.jsx @@ -1,39 +1,19 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-i18n'; +import { injectIntl, intlShape } from '@edx/frontend-i18n'; -import LinkList from './LinkList'; -import AppleAppStoreButton from './AppleAppStoreButton'; -import GooglePlayStoreButton from './GooglePlayStoreButton'; -import SocialIconLinks from './SocialIconLinks'; import messages from './Footer.messages'; -import FooterLogo from '../edx-footer.png'; +import FooterLogo from '../edx-openedx-logo-tag.png'; import LanguageSelector from './LanguageSelector'; const EVENT_NAMES = { FOOTER_LINK: 'edx.bi.footer.link', }; -const MARKETING_BASE_URL = 'https://edx.org'; - class SiteFooter extends React.Component { constructor(props) { super(props); this.externalLinkClickHandler = this.externalLinkClickHandler.bind(this); - - this.state = { - // Used for constructing the enterprise market link. - utmSource: 'edx.org', - }; - } - - componentDidMount() { - // eslint-disable-next-line react/no-did-mount-set-state - this.setState({ - // Wait until component mount to get the hostname to preserve - // gatsby compatibility. - utmSource: global.location.hostname, - }); } getLocalePrefix(locale) { @@ -62,146 +42,32 @@ class SiteFooter extends React.Component { intl, } = this.props; const showLanguageSelector = supportedLanguages.length > 0 && onLanguageSelected; - const localePrefix = this.getLocalePrefix(intl.locale); return ( ); diff --git a/src/components/Footer.messages.js b/src/components/Footer.messages.js index 43d72b58..2bee50dd 100644 --- a/src/components/Footer.messages.js +++ b/src/components/Footer.messages.js @@ -138,7 +138,7 @@ const messages = defineMessages({ }, 'footer.logo.altText': { id: 'footer.logo.altText', - defaultMessage: 'edX Logo', + defaultMessage: 'Powered by Open edX', description: 'alt text for the footer logo.', }, 'footer.logo.ariaLabel': { diff --git a/src/components/Footer.test.jsx b/src/components/Footer.test.jsx index 2258fc91..6e0f7f04 100644 --- a/src/components/Footer.test.jsx +++ b/src/components/Footer.test.jsx @@ -3,7 +3,7 @@ import renderer from 'react-test-renderer'; import { mount } from 'enzyme'; import { IntlProvider } from '@edx/frontend-i18n'; -import Footer, { EVENT_NAMES } from './Footer'; +import Footer from './Footer'; describe('