Footer redesigned

packages/core/scss/core.scss

@@ -39,8 +39,6 @@ $inuit-wrapper-width: 1024px;
 @import 'global/elements/elements.lists';
 @import 'global/elements/elements.details';
 @import 'global/elements/elements.links';
-// @import "global/elements/elements.aside";
-@import 'global/elements/elements.footer';
 @import 'global/elements/elements.iframe';
 @import 'global/elements/elements.audio';
 @import 'global/elements/elements.input';

packages/core/src/animations.ts

@@ -55,6 +55,19 @@ export default {
               opacity: 1;
             }
           }`,
+  fadeInTop: (duration?: string, distance?: string) => `
+  animation-duration: ${duration || DURATION_DEFAULT};
+    animation-name: fadeInTop;
+        @keyframes fadeInTop {
+            0% {
+              transform: translateY(-${distance || spacing.small});
+              opacity: 0;
+            }
+            100% {
+              transform: translateY(0);
+              opacity: 1;
+            }
+          }`,
   fadeInScaled: (duration?: string) => `
   animation-duration: ${duration || DURATION_DEFAULT};
     animation-name: fadeInScaled;

packages/designmanual/dummydata/index.js

@@ -47,6 +47,7 @@ import {
 } from './mockFilm';
 
 import { mockTypeahead } from './mockTypeahead';
+import { mockFooterLinks } from './mockFooter';
 
 export {
   topicMenu,
@@ -83,4 +84,5 @@ export {
   mockMovieTopics,
   mockMovieResourceTypes,
   mockTypeahead,
+  mockFooterLinks,
 };

packages/designmanual/dummydata/mockFooter.js

@@ -0,0 +1,32 @@
+/**
+ * Copyright (c) 2019-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import { EmailOutline, Facebook, Twitter, Share } from '@ndla/icons/common';
+import React from 'react';
+
+export const mockFooterLinks = [
+  {
+    to: 'https://www.facebook.com/ndla.no',
+    text: 'NDLA på Facebook',
+    icon: <Facebook />,
+  },
+  {
+    to: 'https://twitter.com/ndla_no',
+    text: 'NDLA på Twitter',
+    icon: <Twitter />,
+  },
+  {
+    to: 'https://om.ndla.no/nyhetsbrev/',
+    text: 'Meld deg på vårt nyhetsbrev',
+    icon: <EmailOutline />,
+  },
+  {
+    to: '#',
+    text: 'Del denne siden',
+    icon: <Share />,
+  },
+];

packages/designmanual/stories/collated-components.jsx

@@ -25,14 +25,17 @@ import {
   TranslationLine,
   ArticleByline,
   RadioButtonGroup,
+  EditorName,
+  FooterText,
+  LanguageSelector,
 } from '@ndla/ui';
 import Pager from '@ndla/pager';
 
 import { StoryIntro, StoryBody } from './wrappers';
 import { Center } from './helpers';
 import ArticleLoader from './article/ArticleLoader';
 import { FigureImage } from './article/FigureImage';
-import { topicList } from '../dummydata/index';
+import { topicList, mockFooterLinks } from '../dummydata/index';
 import MastheadWithTopicMenu, { MastheadWithLogo } from './molecules/mastheads';
 import Tabs, { TabsControlled } from './molecules/tabs';
 import Resources from './molecules/resources';
@@ -44,7 +47,7 @@ import RelatedArticleListExample, {
   RelatedArticleMixedList,
   RelatedArticleExternal,
 } from './article/RelatedArticleListExample';
-import { LanguageSelector } from './LanguageWrapper';
+import { LanguageSelector as LanguageSelectorStory } from './LanguageWrapper';
 import FileListExample from './molecules/FileListExample';
 import TranslationBoxExample from './organisms/TranslationBoxExample';
 import ModalExample from './molecules/ModalExample';
@@ -67,7 +70,7 @@ storiesOf('Sammensatte moduler', module)
         </p>
       </StoryIntro>
       <StoryBody layout="extend">
-        <LanguageSelector />
+        <LanguageSelectorStory />
         <h2 className="u-heading">Linje artikkel enkel variant</h2>
         <ArticleByline
           authors={[
@@ -220,7 +223,7 @@ storiesOf('Sammensatte moduler', module)
         </p>
       </StoryIntro>
       <StoryBody>
-        <LanguageSelector />
+        <LanguageSelectorStory />
         <TopicIntroductionList
           toTopic={() => '#'}
           topics={topicList}
@@ -509,30 +512,36 @@ storiesOf('Sammensatte moduler', module)
   ))
   .add('Sidefot', () => (
     <Center>
-      <Footer>
-        <div className="footer_form">
-          {/* eslint-disable jsx-a11y/label-has-associated-control  */}
-          <label
-            htmlFor="language-select"
-            className="footer_label footer--bold">
-            Velg språk
-          </label>
-          <select id="language-select" className="footer_language-select">
-            <option value="Norsk">Norsk</option>
-            <option value="English">English</option>
-          </select>
-        </div>
-        <Footer.Ruler />
-        <Footer.Text>
-          <Footer.Editor
-            title="Ansvarlig redaktør:"
-            name="Christer Gundersen"
+      <Footer
+        links={mockFooterLinks}
+        languageSelector={
+          <LanguageSelector
+            center
+            outline
+            alwaysVisible
+            options={{
+              nb: {
+                name: 'Bokmål',
+                url: '#',
+              },
+              nn: {
+                name: 'Nynorsk',
+                url: '#',
+              },
+              en: {
+                name: 'English',
+                url: '#',
+              },
+            }}
+            currentLanguage="nb"
           />
-          <Footer.Editor title="Utgaveansvarlig:" name="Pål Frønsdal" />
-        </Footer.Text>
-        <Footer.Text>
+        }>
+        <FooterText>
+          <EditorName title="Ansvarlig redaktør:" name="Sigurd Trageton" />
+        </FooterText>
+        <FooterText>
           Nettstedet er utarbeidet av NDLA med åpen kildekode.
-        </Footer.Text>
+        </FooterText>
       </Footer>
     </Center>
   ))

packages/designmanual/stories/molecules/footers.jsx

@@ -1,38 +1,51 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { Footer } from '@ndla/ui';
+import { Footer, FooterText, EditorName, LanguageSelector } from '@ndla/ui';
 import ZendeskButton from '@ndla/zendesk';
-import { Trans } from '@ndla/i18n';
+import { injectT } from '@ndla/i18n';
+import { mockFooterLinks } from '../../dummydata';
 
-const FooterExample = ({ inverted }) => (
-  <Footer inverted={inverted}>
-    <div className="footer_form">
-      {/* eslint-disable jsx-a11y/label-has-associated-control  */}
-      <label htmlFor="language-select" className="footer_label footer--bold">
-        Velg språk
-        <select id="language-select" className="footer_language-select">
-          <option value="Norsk">Norsk</option>
-          <option value="English">English</option>
-        </select>
-      </label>
-    </div>
-    <Footer.Ruler />
-    <Footer.Text>
-      <Footer.Editor title="Ansvarlig redaktør:" name="Christer Gundersen" />
-      <Footer.Editor title="Utgaveansvarlig:" name="Pål Frønsdal" />
-    </Footer.Text>
-    <Footer.Text>
-      Nettstedet er utarbeidet av NDLA med åpen kildekode.
-    </Footer.Text>
-    <ZendeskButton locale="nb" widgetKey="7401e616-d86d-42f9-b52f-5bad09d03058">
-      <Trans>{({ t }) => t('askNDLA')}</Trans>
-    </ZendeskButton>
+const FooterExample = ({ inverted, t }) => (
+  <Footer
+    links={mockFooterLinks}
+    languageSelector={
+      <LanguageSelector
+        alwaysVisible
+        outline
+        center
+        inverted={inverted}
+        options={{
+          nb: {
+            name: 'Bokmål',
+            url: '#',
+          },
+          nn: {
+            name: 'Nynorsk',
+            url: '#',
+          },
+          en: {
+            name: 'English',
+            url: '#',
+          },
+        }}
+        currentLanguage="nb"
+      />
+    }>
+    <FooterText>
+      <EditorName title="Utgaveansvarlig:" name="Sigurd Trageton" />
+      <span>Nettstedet er utarbeidet av NDLA med åpen kildekode.</span>
+      <ZendeskButton
+        locale="nb"
+        widgetKey="7401e616-d86d-42f9-b52f-5bad09d03058">
+        {t('askNDLA')}
+      </ZendeskButton>
+    </FooterText>
   </Footer>
 );
 
 FooterExample.propTypes = {
   inverted: PropTypes.bool,
 };
 
-export default FooterExample;
+export default injectT(FooterExample);

packages/designmanual/stories/molecules/mastheads.jsx

@@ -14,7 +14,7 @@ import { injectT } from '@ndla/i18n';
 import {
   Masthead,
   MastheadItem,
-  MastheadLanguageSelector,
+  LanguageSelector,
   Logo,
   TopicMenu,
   DisplayOnPageYOffset,
@@ -288,8 +288,8 @@ class MastheadWithTopicMenu extends Component {
         </MastheadItem>
         <MastheadItem right>
           <DisplayOnPageYOffset yOffsetMin={0} yOffsetMax={150}>
-            <MastheadLanguageSelector
-              ndlaFilm={this.props.ndlaFilm}
+            <LanguageSelector
+              inverted={this.props.ndlaFilm}
               options={{
                 nb: {
                   name: 'Bokmål',

packages/designmanual/stories/simple-components.jsx

@@ -92,7 +92,6 @@ storiesOf('Enkle komponenter', module)
           fullversjonen av bildet.
         </p>
       </StoryIntro>
-
       <StoryBody>
         <h2>Fullbredde</h2>
         <p>