@ndla/ui 50.8.0 → 50.8.2

package/src/Layout/LayoutItem.tsx

@@ -6,7 +6,7 @@
  *
  */
 
-import { HTMLAttributes, ReactNode } from 'react';
+import { HTMLAttributes, ReactNode } from "react";
 
 interface Props extends HTMLAttributes<HTMLElement> {
   children?: ReactNode;
@@ -15,17 +15,17 @@ interface Props extends HTMLAttributes<HTMLElement> {
 
 export const LayoutItem = ({ children, layout, ...rest }: Props) => {
   switch (layout) {
-    case 'extend': {
+    case "extend": {
       return (
         <section className="u-10/12@desktop u-push-1/12@desktop u-10/12@tablet u-push-1/12@tablet">{children}</section>
       );
     }
-    case 'center': {
+    case "center": {
       return (
         <section className="u-4/6@desktop u-push-1/6@desktop u-10/12@tablet u-push-1/12@tablet">{children}</section>
       );
     }
-    case 'full': {
+    case "full": {
       return <section className="u-1/1@desktop">{children}</section>;
     }
     default: {

package/src/Layout/OneColumn.tsx

@@ -6,12 +6,12 @@
  *
  */
 
-import { HTMLAttributes, ReactNode } from 'react';
-import BEMHelper from 'react-bem-helper';
+import { HTMLAttributes, ReactNode } from "react";
+import BEMHelper from "react-bem-helper";
 
 const classes = BEMHelper({
-  prefix: 'o-',
-  name: 'wrapper',
+  prefix: "o-",
+  name: "wrapper",
   outputIsString: true,
 });
 
@@ -32,19 +32,19 @@ export const OneColumn = ({ children, className, cssModifier, wide, noPadding, e
   }
 
   if (wide) {
-    modifiers.push('wide');
+    modifiers.push("wide");
   }
 
   if (noPadding) {
-    modifiers.push('no-padding');
+    modifiers.push("no-padding");
   }
 
   if (extraPadding) {
-    modifiers.push('extra-padding');
+    modifiers.push("extra-padding");
   }
 
   return (
-    <div className={`${classes('', modifiers, className)}`} {...rest}>
+    <div className={`${classes("", modifiers, className)}`} {...rest}>
       {children}
     </div>
   );

package/src/Layout/PageContainer.tsx

@@ -6,12 +6,12 @@
  *
  */
 
-import { HTMLAttributes, ReactNode } from 'react';
-import BEMHelper from 'react-bem-helper';
+import { HTMLAttributes, ReactNode } from "react";
+import BEMHelper from "react-bem-helper";
 
 const classes = new BEMHelper({
-  name: 'container',
-  prefix: 'o-',
+  name: "container",
+  prefix: "o-",
 });
 
 interface Props extends HTMLAttributes<HTMLDivElement> {
@@ -30,7 +30,7 @@ export const PageContainer = ({
   learningPath = false,
   ...rest
 }: Props) => (
-  <div {...classes('', { background, backgroundWide, ndlaFilm, learningPath })} {...rest}>
+  <div {...classes("", { background, backgroundWide, ndlaFilm, learningPath })} {...rest}>
     {children}
   </div>
 );

package/src/Layout/index.ts

@@ -6,10 +6,10 @@
  *
  */
 
-import LayoutItem from './LayoutItem';
+import LayoutItem from "./LayoutItem";
 
-export { default as OneColumn } from './OneColumn';
-export { default as PageContainer } from './PageContainer';
-export { default as Content } from './Content';
+export { default as OneColumn } from "./OneColumn";
+export { default as PageContainer } from "./PageContainer";
+export { default as Content } from "./Content";
 
 export default LayoutItem;

package/src/LearningPaths/LearningPathContent.tsx

@@ -6,9 +6,9 @@
  *
  */
 
-import { ReactNode } from 'react';
-import styled from '@emotion/styled';
-import { mq, breakpoints, colors, spacing, spacingUnit } from '@ndla/core';
+import { ReactNode } from "react";
+import styled from "@emotion/styled";
+import { mq, breakpoints, colors, spacing, spacingUnit } from "@ndla/core";
 
 const StyledContent = styled.div`
   ${mq.range({ from: breakpoints.tablet })} {

package/src/LearningPaths/LearningPathInformation.tsx

@@ -6,11 +6,11 @@
  *
  */
 
-import styled from '@emotion/styled';
-import { spacing, spacingUnit, breakpoints, mq, colors } from '@ndla/core';
-import { getLicenseByAbbreviation } from '@ndla/licenses';
-import { LicenseByline } from '@ndla/notion';
-import { Heading } from '@ndla/typography';
+import styled from "@emotion/styled";
+import { spacing, spacingUnit, breakpoints, mq, colors } from "@ndla/core";
+import { getLicenseByAbbreviation } from "@ndla/licenses";
+import { LicenseByline } from "@ndla/notion";
+import { Heading } from "@ndla/typography";
 
 type StyledWrapperProps = {
   invertedStyle?: boolean;
@@ -64,7 +64,7 @@ interface Props {
 }
 
 export const LearningPathInformation = ({ description, title, license, invertedStyle, id }: Props) => {
-  const { rights } = getLicenseByAbbreviation(license?.license || '', 'nb');
+  const { rights } = getLicenseByAbbreviation(license?.license || "", "nb");
   return (
     <section className="o-wrapper">
       <StyledWrapper invertedStyle={invertedStyle} className="c-article">

package/src/LearningPaths/LearningPathLastStepNavigation.tsx

@@ -6,13 +6,13 @@
  *
  */
 
-import { ReactNode } from 'react';
-import { useTranslation } from 'react-i18next';
-import { css } from '@emotion/react';
-import styled from '@emotion/styled';
-import { fonts, spacing } from '@ndla/core';
-import SafeLink from '@ndla/safelink';
-import { OneColumn, LayoutItem } from '../index';
+import { ReactNode } from "react";
+import { useTranslation } from "react-i18next";
+import { css } from "@emotion/react";
+import styled from "@emotion/styled";
+import { fonts, spacing } from "@ndla/core";
+import SafeLink from "@ndla/safelink";
+import { OneColumn, LayoutItem } from "../index";
 
 const TextWrapper = styled.div`
   display: flex;
@@ -61,22 +61,22 @@ const LearningPathLastStepNavigation = ({ subject, topic, learningPathName, chil
     <OneColumn css={OneColumnCss}>
       <LayoutItem layout="center">
         <TextWrapper>
-          <h1>{t('learningPath.lastStep.heading')}</h1>
+          <h1>{t("learningPath.lastStep.heading")}</h1>
           <StyledSmallText>
-            {t('learningPath.lastStep.headingSmall', {
+            {t("learningPath.lastStep.headingSmall", {
               learningPathName,
             })}
           </StyledSmallText>
         </TextWrapper>
         {subject && (
           <StyledLinkWrapper>
-            {t('learningPath.lastStep.subjectHeading')}
+            {t("learningPath.lastStep.subjectHeading")}
             <SafeLink to={subject.url}>{subject.name}</SafeLink>
           </StyledLinkWrapper>
         )}
         {topic && (
           <StyledLinkWrapper>
-            {t('learningPath.lastStep.topicHeading')}
+            {t("learningPath.lastStep.topicHeading")}
             <SafeLink to={topic.url}>{topic.name}</SafeLink>
           </StyledLinkWrapper>
         )}

package/src/LearningPaths/LearningPathMenu.stories.tsx

@@ -6,55 +6,55 @@
  *
  */
 
-import { Meta, StoryFn } from '@storybook/react';
-import LearningPathMenu from './LearningPathMenu';
-import { defaultParameters } from '../../../../stories/defaults';
-import { contentTypes } from '../model/ContentType';
+import { Meta, StoryFn } from "@storybook/react";
+import LearningPathMenu from "./LearningPathMenu";
+import { defaultParameters } from "../../../../stories/defaults";
+import { contentTypes } from "../model/ContentType";
 const args = {
-  name: 'Læringssti',
+  name: "Læringssti",
   LearningPathId: 1,
-  lastUpdated: '2023-06-01',
+  lastUpdated: "2023-06-01",
   copyright: {
     contributors: [
       {
-        type: 'originator',
-        name: 'NDLA',
+        type: "originator",
+        name: "NDLA",
       },
     ],
     license: {
-      license: 'CC-BY-SA-4.0',
+      license: "CC-BY-SA-4.0",
     },
   },
-  learningPathUrl: 'https://stier.ndla.no',
+  learningPathUrl: "https://stier.ndla.no",
   currentIndex: 1,
   cookies: {},
   learningsteps: [
     {
       id: 1,
-      title: 'Introduksjon',
+      title: "Introduksjon",
       type: contentTypes.LEARNING_PATH,
     },
     {
       id: 2,
-      title: 'Steg 1',
+      title: "Steg 1",
       type: contentTypes.SUBJECT_MATERIAL,
     },
     {
       id: 3,
-      title: 'Steg 2',
+      title: "Steg 2",
       type: contentTypes.TASKS_AND_ACTIVITIES,
     },
   ],
-  toLearningPathUrl: (pathId: number, stepId: number) => '',
+  toLearningPathUrl: (pathId: number, stepId: number) => "",
 };
 
 export default {
-  title: 'Patterns/Learning path menu',
+  title: "Patterns/Learning path menu",
   component: LearningPathMenu,
-  tags: ['autodocs'],
+  tags: ["autodocs"],
   parameters: {
     ...defaultParameters,
-    layout: 'centered',
+    layout: "centered",
   },
   args: args,
 } as Meta<typeof LearningPathMenu>;
@@ -64,4 +64,4 @@ export const LearningPathMenuStory: StoryFn<typeof LearningPathMenu> = ({ ...arg
 };
 
 LearningPathMenuStory.args = args;
-LearningPathMenuStory.storyName = 'Learning path menu';
+LearningPathMenuStory.storyName = "Learning path menu";

package/src/LearningPaths/LearningPathMenu.tsx

@@ -6,20 +6,20 @@
  *
  */
 
-import { ReactNode, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { css } from '@emotion/react';
-import styled from '@emotion/styled';
-import { colors, spacing, misc, mq, breakpoints } from '@ndla/core';
-import { useWindowSize } from '@ndla/hooks';
-import { ArrowExpandRight, ArrowExpandLeft } from '@ndla/icons/action';
-import Tooltip from '@ndla/tooltip';
-import LearningPathMenuAside from './LearningPathMenuAside';
-import LearningPathMenuContent from './LearningPathMenuContent';
-import LearningPathMenuIntro from './LearningPathMenuIntro';
-import LearningPathMenuModalWrapper from './LearningPathMenuModalWrapper';
+import { ReactNode, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { css } from "@emotion/react";
+import styled from "@emotion/styled";
+import { colors, spacing, misc, mq, breakpoints } from "@ndla/core";
+import { useWindowSize } from "@ndla/hooks";
+import { ArrowExpandRight, ArrowExpandLeft } from "@ndla/icons/action";
+import Tooltip from "@ndla/tooltip";
+import LearningPathMenuAside from "./LearningPathMenuAside";
+import LearningPathMenuContent from "./LearningPathMenuContent";
+import LearningPathMenuIntro from "./LearningPathMenuIntro";
+import LearningPathMenuModalWrapper from "./LearningPathMenuModalWrapper";
 
-const SIDE_NAV_WIDTH = '372px';
+const SIDE_NAV_WIDTH = "372px";
 
 type StyledMenuProps = {
   isOpen?: boolean;
@@ -126,7 +126,7 @@ const LearningPathMenu = ({
                 padding-left: ${spacing.small};
               `}
             >
-              <Tooltip tooltip={t('learningPath.openMenuTooltip')}>
+              <Tooltip tooltip={t("learningPath.openMenuTooltip")}>
                 <StyledToggleMenubutton type="button" onClick={() => toggleOpenState(!isOpen)}>
                   {!isOpen ? <ArrowExpandRight /> : <ArrowExpandLeft />}
                 </StyledToggleMenubutton>

package/src/LearningPaths/LearningPathMenuAside.tsx

@@ -6,13 +6,13 @@
  *
  */
 
-import { useTranslation } from 'react-i18next';
-import { css } from '@emotion/react';
-import styled from '@emotion/styled';
-import { colors, spacing, spacingUnit, fonts, mq, breakpoints, animations } from '@ndla/core';
-import { Time } from '@ndla/icons/common';
-import { SafeLinkButton } from '@ndla/safelink';
-import LearningPathMenuAsideCopyright from './LearningPathMenuAsideCopyright';
+import { useTranslation } from "react-i18next";
+import { css } from "@emotion/react";
+import styled from "@emotion/styled";
+import { colors, spacing, spacingUnit, fonts, mq, breakpoints, animations } from "@ndla/core";
+import { Time } from "@ndla/icons/common";
+import { SafeLinkButton } from "@ndla/safelink";
+import LearningPathMenuAsideCopyright from "./LearningPathMenuAsideCopyright";
 
 const infoTextCSS = css`
   ${fonts.sizes(18, 1.3)};
@@ -98,11 +98,11 @@ const LearningPathMenuAside = ({ lastUpdated, learningPathURL, copyright, isOpen
       <div css={learningPathDetailsCSS}>
         <Time />
         <p>
-          {t('learningPath.lastUpdated')}: {lastUpdated}
+          {t("learningPath.lastUpdated")}: {lastUpdated}
         </p>
       </div>
       {copyright.contributors && <LearningPathMenuAsideCopyright copyright={copyright} />}
-      <p css={infoTextCSS}>{t('learningPath.createLearningPathText')}</p>
+      <p css={infoTextCSS}>{t("learningPath.createLearningPathText")}</p>
       <SafeLinkButton
         to={learningPathURL}
         target="_blank"
@@ -110,7 +110,7 @@ const LearningPathMenuAside = ({ lastUpdated, learningPathURL, copyright, isOpen
         variant="outline"
         inverted={invertedStyle}
       >
-        {t('learningPath.createLearningPathButtonText')}
+        {t("learningPath.createLearningPathButtonText")}
       </SafeLinkButton>
     </StyledAside>
   );

package/src/LearningPaths/LearningPathMenuAsideCopyright.tsx

@@ -6,11 +6,11 @@
  *
  */
 
-import styled from '@emotion/styled';
-import { spacing, fonts, colors } from '@ndla/core';
-import { User } from '@ndla/icons/common';
-import { getLicenseByAbbreviation } from '@ndla/licenses';
-import { LicenseByline } from '@ndla/notion';
+import styled from "@emotion/styled";
+import { spacing, fonts, colors } from "@ndla/core";
+import { User } from "@ndla/icons/common";
+import { getLicenseByAbbreviation } from "@ndla/licenses";
+import { LicenseByline } from "@ndla/notion";
 
 const StyledLearningPathDetails = styled.div`
   ${fonts.sizes(14, 1.1)};
@@ -39,7 +39,7 @@ type Props = {
 };
 
 const LearningPathMenuAsideCopyright = ({ copyright }: Props) => {
-  const { rights } = getLicenseByAbbreviation(copyright.license.license || '', 'nb');
+  const { rights } = getLicenseByAbbreviation(copyright.license.license || "", "nb");
   return (
     <StyledLearningPathDetails>
       <UserLine>

package/src/LearningPaths/LearningPathMenuContent.tsx

@@ -6,16 +6,16 @@
  *
  */
 
-import { css } from '@emotion/react';
-import styled from '@emotion/styled';
-import { colors, spacing, spacingUnit, fonts, mq, breakpoints, animations, utils } from '@ndla/core';
-import { LearningPathRead } from '@ndla/icons/contentType';
-import SafeLink from '@ndla/safelink';
-import { StepProps } from './LearningPathMenu';
-import ContentTypeBadge from '../ContentTypeBadge';
-import constants from '../model';
+import { css } from "@emotion/react";
+import styled from "@emotion/styled";
+import { colors, spacing, spacingUnit, fonts, mq, breakpoints, animations, utils } from "@ndla/core";
+import { LearningPathRead } from "@ndla/icons/contentType";
+import SafeLink from "@ndla/safelink";
+import { StepProps } from "./LearningPathMenu";
+import ContentTypeBadge from "../ContentTypeBadge";
+import constants from "../model";
 
-const SIDE_NAV_WIDTH = '372px';
+const SIDE_NAV_WIDTH = "372px";
 
 type StyledMenuItemProps = {
   current?: boolean;
@@ -39,7 +39,7 @@ const StyledMenuItem = styled.li<StyledMenuItemProps>`
       ${fonts.sizes(14, 1.2)};
       color: ${colors.brand.primary};
       ${mq.range({ from: breakpoints.tablet })} {
-        color: ${({ invertedStyle }) => (invertedStyle ? '#fff' : colors.brand.primary)};
+        color: ${({ invertedStyle }) => (invertedStyle ? "#fff" : colors.brand.primary)};
         font-weight: ${fonts.weight.semibold};
       }
     }
@@ -93,7 +93,7 @@ const StyledMenuItem = styled.li<StyledMenuItemProps>`
       background: #fff;
   `}
   &:after {
-    content: '';
+    content: "";
     display: block;
     height: ${spacing.large};
     width: 2px;

package/src/LearningPaths/LearningPathMenuIntro.tsx

@@ -6,11 +6,11 @@
  *
  */
 
-import { ReactNode } from 'react';
-import { useTranslation } from 'react-i18next';
-import { css } from '@emotion/react';
-import styled from '@emotion/styled';
-import { colors, spacing, spacingUnit, fonts, typography, mq, breakpoints, animations } from '@ndla/core';
+import { ReactNode } from "react";
+import { useTranslation } from "react-i18next";
+import { css } from "@emotion/react";
+import styled from "@emotion/styled";
+import { colors, spacing, spacingUnit, fonts, typography, mq, breakpoints, animations } from "@ndla/core";
 
 const StyledInfoHeader = styled.p`
   ${typography.smallHeading}
@@ -36,7 +36,7 @@ const StyledMenuIntro = styled.div<StyledMenuIntroProps>`
   }
   border-left: ${BORDER_WIDTH}px solid ${colors.text.light};
   &:before {
-    content: '';
+    content: "";
     display: block;
     background: ${colors.text.light};
     border-radius: 100%;
@@ -114,7 +114,7 @@ const LearningPathMenuIntro = ({ isOpen, name, invertedStyle, heartButton }: Pro
     <StyledMenuIntro isOpen={isOpen} invertedStyle={invertedStyle}>
       <div>
         <StyledRow>
-          <StyledInfoHeader>{t('learningPath.youAreInALearningPath')}</StyledInfoHeader>
+          <StyledInfoHeader>{t("learningPath.youAreInALearningPath")}</StyledInfoHeader>
           {heartButton}
         </StyledRow>
         <StyledIntroHeader>{name}</StyledIntroHeader>

package/src/LearningPaths/LearningPathMenuModalWrapper.tsx

@@ -6,14 +6,14 @@
  *
  */
 
-import { ReactNode, useCallback, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { css } from '@emotion/react';
-import styled from '@emotion/styled';
-import { ButtonV2 } from '@ndla/button';
-import { spacing, mq, breakpoints, colors } from '@ndla/core';
-import { LearningPath } from '@ndla/icons/contentType';
-import { ModalHeader, ModalBody, ModalTrigger, ModalCloseButton, Modal, ModalContent } from '@ndla/modal';
+import { ReactNode, useCallback, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { css } from "@emotion/react";
+import styled from "@emotion/styled";
+import { ButtonV2 } from "@ndla/button";
+import { spacing, mq, breakpoints, colors } from "@ndla/core";
+import { LearningPath } from "@ndla/icons/contentType";
+import { ModalHeader, ModalBody, ModalTrigger, ModalCloseButton, Modal, ModalContent } from "@ndla/modal";
 
 const buttonToggleCss = css`
   ${mq.range({ from: breakpoints.tablet })} {
@@ -53,7 +53,7 @@ const ModalWrapperComponent = ({ innerWidth, children }: ModalWrapperProps) => {
         <ModalTrigger>
           <ButtonV2 css={buttonToggleCss}>
             <LearningPath />
-            <span>{t('learningPath.openMenuTooltip')}</span>
+            <span>{t("learningPath.openMenuTooltip")}</span>
           </ButtonV2>
         </ModalTrigger>
         <StyledModalContent animationDuration={200} size="full">

package/src/LearningPaths/LearningPathMobileHeader.tsx

@@ -6,10 +6,10 @@
  *
  */
 
-import { useTranslation } from 'react-i18next';
-import styled from '@emotion/styled';
-import { colors, fonts, spacing } from '@ndla/core';
-import { LearningPathBadge } from '../ContentTypeBadge';
+import { useTranslation } from "react-i18next";
+import styled from "@emotion/styled";
+import { colors, fonts, spacing } from "@ndla/core";
+import { LearningPathBadge } from "../ContentTypeBadge";
 
 const StyledWrapper = styled.div`
   display: flex;
@@ -29,7 +29,7 @@ const LearningPathMobileHeader = () => {
   return (
     <StyledWrapper>
       <LearningPathBadge size="xx-small" background />
-      <StyledMiniHeader>{t('learningPath.youAreInALearningPath')}</StyledMiniHeader>
+      <StyledMiniHeader>{t("learningPath.youAreInALearningPath")}</StyledMiniHeader>
     </StyledWrapper>
   );
 };

package/src/LearningPaths/LearningPathMobileStepInfo.tsx

@@ -6,9 +6,9 @@
  *
  */
 
-import { useTranslation } from 'react-i18next';
-import styled from '@emotion/styled';
-import { mq, breakpoints, typography } from '@ndla/core';
+import { useTranslation } from "react-i18next";
+import styled from "@emotion/styled";
+import { mq, breakpoints, typography } from "@ndla/core";
 
 const StyledInfo = styled.div`
   ${typography.smallHeading}
@@ -27,7 +27,7 @@ const LearningPathMobileStepInfo = ({ total, current }: Props) => {
   const { t } = useTranslation();
   return (
     <StyledInfo>
-      {t('learningPath.mobileStepInfo', {
+      {t("learningPath.mobileStepInfo", {
         totalPages: total,
         currentPage: current,
       })}

package/src/LearningPaths/LearningPathSticky.tsx

@@ -6,15 +6,15 @@
  *
  */
 
-import { ReactNode } from 'react';
-import { useTranslation } from 'react-i18next';
-import { css } from '@emotion/react';
-import styled from '@emotion/styled';
-import { colors, spacing, animations, mq, breakpoints } from '@ndla/core';
-import { Back, Forward } from '@ndla/icons/common';
-import SafeLink from '@ndla/safelink';
+import { ReactNode } from "react";
+import { useTranslation } from "react-i18next";
+import { css } from "@emotion/react";
+import styled from "@emotion/styled";
+import { colors, spacing, animations, mq, breakpoints } from "@ndla/core";
+import { Back, Forward } from "@ndla/icons/common";
+import SafeLink from "@ndla/safelink";
 
-const FOOTER_HEIGHT = '78px';
+const FOOTER_HEIGHT = "78px";
 const FOOTER_HEIGHT_MOBILE = spacing.large;
 const SAFELINK_SIZE_MOBILE = spacing.large;
 
@@ -97,7 +97,7 @@ const StyledTitle = styled.span`
 type PropsSiblings = {
   title: string;
   toLearningPathUrl(pathId: number, stepId: number): string;
-  arrow?: 'left' | 'right';
+  arrow?: "left" | "right";
   pathId: number;
   stepId: number;
 };
@@ -108,13 +108,13 @@ export const LearningPathStickySibling = ({ title, toLearningPathUrl, pathId, st
     <SafeLink
       to={toLearningPathUrl(pathId, stepId)}
       css={SafeLinkCSS}
-      aria-label={arrow === 'left' ? t('learningPath.previousArrow') : t('learningPath.nextArrow')}
+      aria-label={arrow === "left" ? t("learningPath.previousArrow") : t("learningPath.nextArrow")}
     >
-      {arrow === 'left' && <Back size="normal" />}
+      {arrow === "left" && <Back size="normal" />}
       <div>
         <StyledTitle>{title}</StyledTitle>
       </div>
-      {arrow === 'right' && <Forward size="normal" />}
+      {arrow === "right" && <Forward size="normal" />}
     </SafeLink>
   );
 };

package/src/LearningPaths/LearningPathWrapper.tsx

@@ -6,9 +6,9 @@
  *
  */
 
-import { ReactNode } from 'react';
-import styled from '@emotion/styled';
-import { spacing, spacingUnit, breakpoints, mq } from '@ndla/core';
+import { ReactNode } from "react";
+import styled from "@emotion/styled";
+import { spacing, spacingUnit, breakpoints, mq } from "@ndla/core";
 
 const StyledWrapper = styled.section`
   max-width: ${1402 + spacingUnit}px;
@@ -19,7 +19,7 @@ const StyledWrapper = styled.section`
     padding-left: 0;
   }
 
-  &[data-inverted='true'] {
+  &[data-inverted="true"] {
     ${mq.range({ until: breakpoints.tablet })} {
       background: #fff;
     }