@ndla/ui 47.0.0 → 47.1.1

package/lib/locale/messages-en.d.ts

@@ -125,6 +125,7 @@ declare const messages: {
             folders: string;
             tags: string;
             subjects: string;
+            more: string;
         };
         tagList: string;
         tags: string;
@@ -221,6 +222,18 @@ declare const messages: {
                 text: string;
             };
         };
+        myProfile: {
+            title: string;
+            disclaimerTitle: string;
+            disclaimerText: string;
+            preferenceTitle: string;
+            preferenceText: string;
+            editButtonText: string;
+            radioButtonText: {
+                option1: string;
+                option2: string;
+            };
+        };
         resource: {
             add: string;
             remove: string;
@@ -253,6 +266,9 @@ declare const messages: {
             noFavorites: string;
             goToAllSubjects: string;
         };
+        tools: string;
+        simpleList: string;
+        detailedList: string;
     };
     snackbar: {
         close: string;

package/lib/locale/messages-en.js

@@ -1130,7 +1130,8 @@ var messages = _objectSpread(_objectSpread({
     iconMenu: {
       folders: 'Folders',
       tags: 'Tags',
-      subjects: 'Favourite subjects'
+      subjects: 'Favourite subjects',
+      more: 'More'
     },
     tagList: 'Tags',
     tags: '{{count}} tag',
@@ -1227,6 +1228,18 @@ var messages = _objectSpread(_objectSpread({
         text: 'When you save a resource, you will have the option to tag it with a keyword. This tag can be used to find the resource across folders. By selecting <strong>My tags</strong> on the menu to the left, you will see all the tags your have used. You can also see which resources are tagget with which keyword.'
       }
     },
+    myProfile: {
+      title: 'My Profile',
+      disclaimerTitle: 'Where is my picture and name used?',
+      disclaimerText: 'Your picture and name are displayed when you participate in discussions in the arena.',
+      preferenceTitle: 'Choose whether you want to display name when sharing a folder',
+      preferenceText: 'Here you can choose whether you want to display your name when you share a folder. The selected option applies to all your folders and can be changed later. If you later change the option, your name will appear on all your shared folders.',
+      editButtonText: 'Change profile picture',
+      radioButtonText: {
+        option1: 'Show my name when I share a folder',
+        option2: 'Do not show my name when I share a folder'
+      }
+    },
     resource: {
       add: 'Add folder/tag',
       remove: 'Remove',
@@ -1258,7 +1271,10 @@ var messages = _objectSpread(_objectSpread({
       subjects_plural: '{{count}} subjects',
       noFavorites: 'You do not have any favorite subjects!',
       goToAllSubjects: 'Go to all subjects'
-    }
+    },
+    tools: 'Tools',
+    simpleList: 'Simple list',
+    detailedList: 'With preamble'
   },
   snackbar: {
     close: 'Close notification'

package/lib/locale/messages-nb.d.ts

@@ -125,6 +125,7 @@ declare const messages: {
             folders: string;
             tags: string;
             subjects: string;
+            more: string;
         };
         tagList: string;
         tags: string;
@@ -221,6 +222,18 @@ declare const messages: {
                 text: string;
             };
         };
+        myProfile: {
+            title: string;
+            disclaimerTitle: string;
+            disclaimerText: string;
+            preferenceTitle: string;
+            preferenceText: string;
+            editButtonText: string;
+            radioButtonText: {
+                option1: string;
+                option2: string;
+            };
+        };
         resource: {
             add: string;
             remove: string;
@@ -253,6 +266,9 @@ declare const messages: {
             noFavorites: string;
             goToAllSubjects: string;
         };
+        tools: string;
+        simpleList: string;
+        detailedList: string;
     };
     snackbar: {
         close: string;

package/lib/locale/messages-nb.js

@@ -1128,7 +1128,8 @@ var messages = _objectSpread(_objectSpread({
     iconMenu: {
       folders: 'Mapper',
       tags: 'Knagger',
-      subjects: 'Favorittfag'
+      subjects: 'Favorittfag',
+      more: 'Mer'
     },
     tagList: 'Emneknagger',
     tags: '{{count}} emneknagg',
@@ -1225,6 +1226,18 @@ var messages = _objectSpread(_objectSpread({
         text: 'Når du lagrer en ressurs, får du mulighet til å markere ressursen med en emneknagg. Emneknaggen er et nøkkelord du kan bruke til å finne tilbake til ressurser på tvers av mapper. Du finner alle emneknaggene du har brukt, ved å velge <strong>Mine emneknagger</strong> i venstremenyen. Her kan du også se hvilke ressurser du har markert med hvilken emneknagg.'
       }
     },
+    myProfile: {
+      title: 'Min Profil',
+      disclaimerTitle: 'Hvor brukes bildet og navnet mitt?',
+      disclaimerText: 'Bilde og navn vises når du deltar i diskusjoner i arenaen.',
+      preferenceTitle: 'Velg om du vil vise navn når du deler en mappe',
+      preferenceText: 'Her kan du selv velge om du vil vise navnet ditt når du deler en mappe. Valget gjelder for alle mappene dine og kan endres senere. Dersom du endrer vil navnet ditt vises på alle dine delte mapper.',
+      editButtonText: 'Endre profilbilde',
+      radioButtonText: {
+        option1: 'Vis navnet mitt når jeg deler en mappe',
+        option2: 'Ikke vis navnet mitt når jeg deler mappe'
+      }
+    },
     resource: {
       add: 'Legg til mappe/emneknagg',
       remove: 'Fjern',
@@ -1256,7 +1269,10 @@ var messages = _objectSpread(_objectSpread({
       subjects_plural: '{{count}} fag',
       noFavorites: 'Du har ingen favorittfag!',
       goToAllSubjects: 'Gå til alle fag'
-    }
+    },
+    tools: 'Verktøy',
+    simpleList: 'Enkel liste',
+    detailedList: 'Med ingress'
   },
   snackbar: {
     close: 'Lukk melding'

package/lib/locale/messages-nn.d.ts

@@ -125,6 +125,7 @@ declare const messages: {
             folders: string;
             tags: string;
             subjects: string;
+            more: string;
         };
         tagList: string;
         tags: string;
@@ -221,6 +222,18 @@ declare const messages: {
                 text: string;
             };
         };
+        myProfile: {
+            title: string;
+            disclaimerTitle: string;
+            disclaimerText: string;
+            preferenceTitle: string;
+            preferenceText: string;
+            editButtonText: string;
+            radioButtonText: {
+                option1: string;
+                option2: string;
+            };
+        };
         resource: {
             add: string;
             remove: string;
@@ -253,6 +266,9 @@ declare const messages: {
             noFavorites: string;
             goToAllSubjects: string;
         };
+        tools: string;
+        simpleList: string;
+        detailedList: string;
     };
     snackbar: {
         close: string;

package/lib/locale/messages-nn.js

@@ -1128,7 +1128,8 @@ var messages = _objectSpread(_objectSpread({
     iconMenu: {
       folders: 'Mappar',
       tags: 'Knaggar',
-      subjects: 'Favorittfag'
+      subjects: 'Favorittfag',
+      more: 'Meire'
     },
     tagList: 'Emneknaggar',
     tags: '{{count}} emneknagg',
@@ -1225,6 +1226,18 @@ var messages = _objectSpread(_objectSpread({
         text: 'Når du lagrar ein ressurs, får du høve til å markere ressursen med ein emneknagg. Emneknaggen er eit nøkkelord du kan bruke til å finne tilbake til ressursar på tvers av mapper. Du finn alle emneknaggane du har brukt, ved å velje <strong>Mine emneknaggar</strong> i venstremenyen. Her kan du også sjå kva for ressursar du har merkt med kva knagg.'
       }
     },
+    myProfile: {
+      title: 'Min Profil',
+      disclaimerTitle: 'Kvar blir biletet og namnet mitt brukt?',
+      disclaimerText: 'Bilete og namn vert vist når du deltek i diskusjonar i arenaen.',
+      preferenceTitle: 'Vel om du vil vise namn når du deler ei mappe',
+      preferenceText: 'Her kan du sjølv velje om du vil vise namnet ditt når du deler ei mappe. Valet gjeld for alle mappene dine og kan endrast seinare. Dersom du endrar vil namnet ditt visast på alle dine delte mapper.',
+      editButtonText: 'Endre profilbilete',
+      radioButtonText: {
+        option1: 'Vis namnet mitt når eg deler ei mappe',
+        option2: 'Ikkje vis namnet mitt når eg deler mappe'
+      }
+    },
     resource: {
       add: 'Legg til mappe/emneknagg',
       remove: 'Fjern',
@@ -1256,7 +1269,10 @@ var messages = _objectSpread(_objectSpread({
       subjects_plural: '{{count}} fag',
       noFavorites: 'Du har ingen favorittfag!',
       goToAllSubjects: 'Gå til alle fag'
-    }
+    },
+    tools: 'Verktøy',
+    simpleList: 'Enkel liste',
+    detailedList: 'Med ingress'
   },
   snackbar: {
     close: 'Lukk melding'

package/lib/locale/messages-se.d.ts

@@ -125,6 +125,7 @@ declare const messages: {
             folders: string;
             tags: string;
             subjects: string;
+            more: string;
         };
         tagList: string;
         tags: string;
@@ -221,6 +222,18 @@ declare const messages: {
                 text: string;
             };
         };
+        myProfile: {
+            title: string;
+            disclaimerTitle: string;
+            disclaimerText: string;
+            preferenceTitle: string;
+            preferenceText: string;
+            editButtonText: string;
+            radioButtonText: {
+                option1: string;
+                option2: string;
+            };
+        };
         resource: {
             add: string;
             remove: string;
@@ -253,6 +266,9 @@ declare const messages: {
             noFavorites: string;
             goToAllSubjects: string;
         };
+        tools: string;
+        simpleList: string;
+        detailedList: string;
     };
     snackbar: {
         close: string;

package/lib/locale/messages-se.js

@@ -1128,7 +1128,8 @@ var messages = _objectSpread(_objectSpread({
     iconMenu: {
       folders: 'Mapper',
       tags: 'Knagger',
-      subjects: 'Favorittfag'
+      subjects: 'Favorittfag',
+      more: 'Mer'
     },
     tagList: 'Fáddágilkor',
     tags: '{{count}} fáddágilkor',
@@ -1225,6 +1226,18 @@ var messages = _objectSpread(_objectSpread({
         text: 'Go vurket muhtin resurssa de lea vejolaš merket resurssa fáddágilkoriin. Fáddágilkor lea čoavddasátni man sáhtát geavahit gávdnan dihte ruovttoluotta resurssaide máhpaid rastá. Gávnnat buot fáddágilkoriid maid leat geavahan go válljet mu fáddágilkoriid gurut bealde fálus. Das oainnát maiddái maid resurssaid don leat merken juohke fáddágilkoriin.'
       }
     },
+    myProfile: {
+      title: 'Mu profiila',
+      disclaimerTitle: 'Gos geavahit mu gova ja mu nama?',
+      disclaimerText: 'Govva ja namma čájehuvvojit go searvat digaštallamii arenain.',
+      preferenceTitle: 'Vállje jos namma čájehuvvo máhpa juohkkedettiin',
+      preferenceText: 'Dás válljet jos iežat namma čájehuvvo juohkkedettiin máhpa. Dát molssaeaktu guoská buot máhpaide ja sáhttá rievdaduvvot maŋŋil. Jos rievdadat dán, de čájehuvvo du namma buot juogaduvvon máhpain.',
+      editButtonText: 'Rievdat profiilagova',
+      radioButtonText: {
+        option1: 'Čájet mu nama máhpa juohkkedettiin',
+        option2: 'Ale čájet mu nama máhpa juohkkedettiin'
+      }
+    },
     resource: {
       add: 'Lasit máhpa/fáddágilkora',
       remove: 'Sihko',
@@ -1256,7 +1269,10 @@ var messages = _objectSpread(_objectSpread({
       subjects_plural: '{{count}} fága',
       noFavorites: 'Dus ii leat oktage favorihttafága!',
       goToAllSubjects: 'Mana buot fágaide'
-    }
+    },
+    tools: 'Verktøy',
+    simpleList: 'Enkel liste',
+    detailedList: 'Med ingress'
   },
   snackbar: {
     close: 'Govčča dieđu'

package/lib/locale/messages-sma.d.ts

@@ -125,6 +125,7 @@ declare const messages: {
             folders: string;
             tags: string;
             subjects: string;
+            more: string;
         };
         tagList: string;
         tags: string;
@@ -221,6 +222,18 @@ declare const messages: {
                 text: string;
             };
         };
+        myProfile: {
+            title: string;
+            disclaimerTitle: string;
+            disclaimerText: string;
+            preferenceTitle: string;
+            preferenceText: string;
+            editButtonText: string;
+            radioButtonText: {
+                option1: string;
+                option2: string;
+            };
+        };
         resource: {
             add: string;
             remove: string;
@@ -253,6 +266,9 @@ declare const messages: {
             noFavorites: string;
             goToAllSubjects: string;
         };
+        tools: string;
+        simpleList: string;
+        detailedList: string;
     };
     snackbar: {
         close: string;

package/lib/locale/messages-sma.js

@@ -1128,7 +1128,8 @@ var messages = _objectSpread(_objectSpread({
     iconMenu: {
       folders: 'Mapper',
       tags: 'Knagger',
-      subjects: 'Favorittfag'
+      subjects: 'Favorittfag',
+      more: 'Mer'
     },
     tagList: 'Emneknagg',
     tags: '{{count}} emneknagg',
@@ -1225,6 +1226,18 @@ var messages = _objectSpread(_objectSpread({
         text: 'Når du lagrar ein ressurs, får du høve til å markere ressursen med ein emneknagg. Emneknaggen er eit nøkkelord du kan bruke til å finne tilbake til ressursar på tvers av mapper. Du finn alle emneknaggane du har brukt, ved å velje <strong>Mine emneknaggar</strong> i venstremenyen. Her kan du også sjå kva for ressursar du har merkt med kva knagg.'
       }
     },
+    myProfile: {
+      title: 'Mov Profijle',
+      disclaimerTitle: 'Gusnie guvvie jïh nomme åtnasuvvieh?',
+      disclaimerText: 'Guvvie jïh nomme våajnoes sjidtieh gosse meatan digkiedimmesne sijjesne.',
+      preferenceTitle: 'Sjïehtedh jis edtja nommem vuesiehtidh gosse maabpam juekedh',
+      preferenceText: 'Daesnie jïjtje veeljh mejtie sïjhth dov nommem vuesiehtidh gosse maabpam juekedh . Daate veeljeme lea gaajhkine dov maabpojne, jïh maahta dam mænngan jarkelidh. Jis jeatjahdahtah , dov nomme sæjhta våajnoes årrodh gaajhkine dov joekedamme maabpojne.',
+      editButtonText: 'Naemhtie profijleguvviem jarkelidh',
+      radioButtonText: {
+        option1: 'Vuesehth mov nommem gosse maabpam juekieh',
+        option2: 'Aellieh mov nommem vuesehth gosse maabpam juekieh'
+      }
+    },
     resource: {
       add: 'Legg til mappe/emneknagg',
       remove: 'Fjern',
@@ -1256,7 +1269,10 @@ var messages = _objectSpread(_objectSpread({
       subjects_plural: '{{count}} fag',
       noFavorites: 'Du har ingen favorittfag!',
       goToAllSubjects: 'Gå til alle fag'
-    }
+    },
+    tools: 'Verktøy',
+    simpleList: 'Enkel liste',
+    detailedList: 'Med ingress'
   },
   snackbar: {
     close: 'Lukk melding'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "47.0.0",
+  "version": "47.1.1",
   "description": "UI component library for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -31,23 +31,23 @@
     "types"
   ],
   "dependencies": {
-    "@ndla/accordion": "^2.2.26",
-    "@ndla/button": "^12.0.0",
-    "@ndla/carousel": "^4.0.3",
-    "@ndla/core": "^4.1.9",
-    "@ndla/dropdown-menu": "^1.0.8",
-    "@ndla/forms": "^5.0.1",
+    "@ndla/accordion": "^2.2.28",
+    "@ndla/button": "^12.0.2",
+    "@ndla/carousel": "^4.0.5",
+    "@ndla/core": "^4.2.0",
+    "@ndla/dropdown-menu": "^1.0.9",
+    "@ndla/forms": "^5.0.3",
     "@ndla/hooks": "^2.1.1",
-    "@ndla/icons": "^4.0.9",
+    "@ndla/icons": "^4.1.0",
     "@ndla/licenses": "^7.1.4",
-    "@ndla/modal": "^5.0.0",
-    "@ndla/notion": "^6.0.1",
-    "@ndla/safelink": "^4.1.25",
-    "@ndla/select": "^3.0.0",
-    "@ndla/switch": "^1.1.14",
-    "@ndla/tabs": "^3.0.10",
-    "@ndla/tooltip": "^5.0.0",
-    "@ndla/typography": "^0.2.1",
+    "@ndla/modal": "^5.0.2",
+    "@ndla/notion": "^6.0.3",
+    "@ndla/safelink": "^4.1.27",
+    "@ndla/select": "^3.1.0",
+    "@ndla/switch": "^1.1.15",
+    "@ndla/tabs": "^3.0.11",
+    "@ndla/tooltip": "^5.0.2",
+    "@ndla/typography": "^0.2.2",
     "@ndla/util": "^4.0.0",
     "@radix-ui/react-popover": "^1.0.7",
     "@radix-ui/react-radio-group": "^1.1.3",
@@ -80,5 +80,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "7b9ab5e858be896e97c8360f92b2385adceabf7a"
+  "gitHead": "95e3bd37d05958082f70ef0b3e8f2ded5ab47904"
 }

package/src/Article/Article.tsx

@@ -13,7 +13,7 @@ import styled from '@emotion/styled';
 import { useIntersectionObserver } from '@ndla/hooks';
 import { resizeObserver } from '@ndla/util';
 import { spacing, spacingUnit, mq, breakpoints } from '@ndla/core';
-import { Heading } from '@ndla/typography';
+import { Heading, Text } from '@ndla/typography';
 import { Article as ArticleType } from '../types';
 import ArticleByline from './ArticleByline';
 import LayoutItem from '../Layout';
@@ -77,9 +77,9 @@ type ArticleIntroductionProps = {
 export const ArticleIntroduction = ({ children, lang }: ArticleIntroductionProps) => {
   if (children) {
     return (
-      <div className="article_introduction" lang={lang}>
+      <Text textStyle="ingress" element="div" lang={lang}>
         {children}
-      </div>
+      </Text>
     );
   }
   return null;

package/src/Article/component.article.scss

@@ -26,7 +26,7 @@
   }
 
   @include mq(tablet) {
-    @include font-size(20px, 35px);
+    @include font-size(18px, 29px);
 
     > section > p {
       &:not([class]) {
@@ -120,14 +120,14 @@
     }
   }
 
-  padding: 0 0 $spacing--small 0;
+  padding: 0 0 $spacing 0;
 
   @include mq(tablet) {
-    padding: 0 0 $spacing 0;
+    padding: 0 0 $spacing--medium 0;
   }
 
   p {
-    @include font-size(16px, 20px);
+    @include font-size(18px, 24px);
     color: $text-light-color;
     text-transform: uppercase;
     margin-bottom: 0;

package/src/FrontpageArticle/FrontpageArticle.tsx

@@ -7,9 +7,9 @@
  */
 
 import { CSSProperties, ReactNode, useMemo } from 'react';
-import { breakpoints, fonts, mq, spacing, spacingUnit } from '@ndla/core';
+import { spacing, spacingUnit } from '@ndla/core';
 import styled from '@emotion/styled';
-import { Heading } from '@ndla/typography';
+import { Heading, Text } from '@ndla/typography';
 import { Article } from '../types';
 import { ArticleByline } from '../Article';
 import { useMastheadHeight } from '../Masthead';
@@ -56,18 +56,6 @@ const StyledArticle = styled.article`
   }
 `;
 
-const StyledIntroduction = styled.div`
-  font-weight: ${fonts.weight.light};
-  font-family: ${fonts.sans};
-  margin-top: ${spacing.small};
-  ${fonts.sizes('22px', '30px')};
-
-  ${mq.range({ from: breakpoints.tablet })} {
-    margin-top: ${spacing.mediumlarge};
-    ${fonts.sizes('26px', '36px')};
-  }
-`;
-
 export const FrontpageArticle = ({ article, id, isWide, licenseBox }: Props) => {
   const { height = 0 } = useMastheadHeight();
   const cssVars = useMemo(() => ({ '--masthead-height': `${height}px` } as unknown as CSSProperties), [height]);
@@ -83,10 +71,12 @@ export const FrontpageArticle = ({ article, id, isWide, licenseBox }: Props) =>
 
   return (
     <StyledArticle style={cssVars}>
-      <Heading id={id} headingStyle="h1" element="h1" margin="normal" tabIndex={-1}>
+      <Heading id={id} headingStyle="h1-resource" element="h1" margin="normal" tabIndex={-1}>
         {title}
       </Heading>
-      <StyledIntroduction>{introduction}</StyledIntroduction>
+      <Text textStyle="ingress" element="div">
+        {introduction}
+      </Text>
       {content}
       <ArticleByline accordionHeaderVariant={'white'} licenseBox={licenseBox} displayByline={false} />
     </StyledArticle>

package/src/MyNdla/Resource/Folder.tsx

@@ -21,6 +21,9 @@ const FolderWrapper = styled.div`
   position: relative;
   align-items: center;
   justify-content: space-between;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  word-break: break-word;
 
   ${mq.range({ until: breakpoints.mobileWide })} {
     &:not([data-type='list']) {
@@ -87,7 +90,6 @@ const FolderTitle = styled.h2`
 `;
 
 const MenuWrapper = styled.div`
-  overflow: hidden;
   display: flex;
   z-index: 1;
   flex-direction: row;
@@ -102,6 +104,12 @@ const CountContainer = styled.div`
   min-height: 44px;
   gap: ${spacing.small};
   margin: 0 ${spacing.small} 0 ${spacing.nsmall};
+
+  ${mq.range({ until: breakpoints.tablet })} {
+    &[data-type='list'] {
+      display: none;
+    }
+  }
 `;
 
 const IconTextWrapper = styled.div`
@@ -115,11 +123,6 @@ const IconTextWrapper = styled.div`
     height: 13px;
   }
   ${fonts.sizes(16)};
-  ${mq.range({ until: breakpoints.mobileWide })} {
-    &[data-type='list'] {
-      display: none;
-    }
-  }
 `;
 
 interface IconCountProps {
@@ -172,10 +175,10 @@ const Folder = ({ id, link, title, subFolders, subResources, type = 'list', menu
         </ResourceTitleLink>
       </TitleWrapper>
       <MenuWrapper>
-        <CountContainer>
+        <CountContainer data-type={type}>
           {isShared && (
             // Information regarding the shared status of a folder is read previously, ignore this
-            <IconTextWrapper data-type={type} aria-hidden>
+            <IconTextWrapper aria-hidden>
               <Share />
               <span>{t('myNdla.folder.sharing.shared')}</span>
             </IconTextWrapper>

package/src/ToolboxPage/ToolboxInfo.tsx

@@ -7,27 +7,11 @@
  */
 
 import { MouseEvent } from 'react';
-import styled from '@emotion/styled';
-import { breakpoints, fonts, mq } from '@ndla/core';
 import { useTranslation } from 'react-i18next';
-import { Heading } from '@ndla/typography';
+import { Heading, Text } from '@ndla/typography';
 import { ItemProps } from '../Navigation/NavigationBox';
 import { NavigationBox } from '../Navigation';
 
-const Introduction = styled.p`
-  max-width: 800px;
-  font-weight: ${fonts.weight.light};
-  ${fonts.sizes('18px', '28px')};
-
-  ${mq.range({ from: breakpoints.tablet })} {
-    ${fonts.sizes('22px', '32px')};
-  }
-
-  ${mq.range({ from: breakpoints.desktop })} {
-    ${fonts.sizes('26px', '36px')};
-  }
-`;
-
 interface Props {
   id?: string;
   title: string;
@@ -40,10 +24,10 @@ const ToolboxInfo = ({ title, introduction, topics, onSelectTopic, id }: Props)
   const { t } = useTranslation();
   return (
     <>
-      <Heading element="h1" headingStyle="h1" id={id} tabIndex={-1}>
+      <Heading element="h1" headingStyle="h1-resource" id={id} tabIndex={-1}>
         {title}
       </Heading>
-      <Introduction>{introduction}</Introduction>
+      <Text textStyle="ingress">{introduction}</Text>
       <NavigationBox
         items={topics}
         listDirection="floating"