richie-education 2.24.0 → 2.25.0-b2.dev101

package/js/utils/test/wrappers/RouterWrapper.tsx

@@ -0,0 +1,29 @@
+import { PropsWithChildren } from 'react';
+import { RouteObject, RouterProvider, createMemoryRouter } from 'react-router-dom';
+import { Maybe } from 'types/utils';
+
+export interface RouterWrapperProps extends PropsWithChildren {
+  routes?: RouteObject[];
+  path?: string;
+  initialEntries?: Maybe<string[]>;
+}
+
+export const RouterWrapper = ({
+  children,
+  routes = [],
+  path = '/',
+  initialEntries,
+}: RouterWrapperProps) => {
+  const router = createMemoryRouter(
+    routes.length > 0
+      ? routes
+      : [
+          {
+            path,
+            element: children,
+          },
+        ],
+    { initialEntries: initialEntries || [path] },
+  );
+  return <RouterProvider router={router} />;
+};

package/js/utils/test/wrappers/types.ts

@@ -0,0 +1,26 @@
+import { PropsWithChildren } from 'react';
+import { QueryClient } from '@tanstack/query-core';
+import { RenderOptions as TestingLibraryRenderOptions } from '@testing-library/react';
+import { Nullable } from 'types/utils';
+import { IntlWrapperProps } from './IntlWrapper';
+import { RouterWrapperProps } from './RouterWrapper';
+
+interface QueryOptions {
+  client: QueryClient;
+}
+
+/**
+ * Options to configure the render of a component for a test
+ *
+ * @property testingLibraryOptions options provided by react-testing-library to the render method
+ * @property intlOptions options to configure i18n context
+ * @property routerOptions options to configure router and routes in the test
+ * @property queryOptions options to configure a custom client used by react-query for a test
+ */
+export interface AppWrapperProps {
+  wrapper?: Nullable<(props: PropsWithChildren<{ options?: AppWrapperProps }>) => JSX.Element>;
+  intlOptions?: IntlWrapperProps;
+  queryOptions?: QueryOptions;
+  routerOptions?: RouterWrapperProps;
+  testingLibraryOptions?: TestingLibraryRenderOptions;
+}

package/js/widgets/Dashboard/components/DashboardAvatar/_styles.scss

@@ -1,18 +1,30 @@
-$avatar-size: 100px;
+// when parent em-value is 40px, $avatar-size is 100px
+$avatar-size: 2.5em;
 
 .dashboard {
   &__avatar {
     box-shadow: r-theme-val(dashboard-sidebar, base-shadow);
     background-color: r-theme-val(dashboard-avatar, background-color);
     border-radius: 100%;
-    width: $avatar-size;
     height: $avatar-size;
+    width: $avatar-size;
     display: flex;
     justify-content: center;
     align-items: center;
     color: r-theme-val(dashboard-avatar, base-color);
-    font-size: 3rem;
-    font-weight: bold;
+    padding: rem-calc(3px);
+
+    &__letter {
+      font-size: 1em;
+      font-family: $r-font-family-montserrat;
+      font-weight: $font-weight-boldest;
+      line-height: 1;
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      text-transform: uppercase;
+    }
 
     &--square {
       border-radius: rem-calc(8px);
@@ -20,7 +32,7 @@ $avatar-size: 100px;
       border: 1px solid r-theme-val(dashboard-avatar, background-color);
       color: r-theme-val(dashboard-avatar, background-color);
 
-      img {
+      .dashboard__avatar__image {
         border-radius: rem-calc(6px);
       }
     }

package/js/widgets/Dashboard/components/DashboardAvatar/index.spec.tsx

@@ -1,4 +1,5 @@
 import { render, screen } from '@testing-library/react';
+import { JoanieFileFactory } from 'utils/test/factories/joanie';
 import { DashboardAvatar, DashboardAvatarVariantEnum } from '.';
 
 describe('<DashboardAvatar/>', () => {
@@ -13,8 +14,14 @@ describe('<DashboardAvatar/>', () => {
   });
 
   it('should display an image if given', () => {
-    render(<DashboardAvatar title="Bob" imageUrl="http://my.awesome.image" />);
-    expect(screen.getByAltText('Bob')).toHaveAttribute('src', 'http://my.awesome.image');
+    const image = JoanieFileFactory({
+      src: 'http://my.awesome.image',
+      srcset: '200w http://my.awesome.image/200',
+    }).one();
+    render(<DashboardAvatar title="Bob" image={image} />);
+    const img = screen.getByAltText('Bob');
+    expect(img).toHaveAttribute('src', 'http://my.awesome.image');
+    expect(img).toHaveAttribute('srcset', '200w http://my.awesome.image/200');
   });
 
   it('should contain the variant class for SQUARE', () => {

package/js/widgets/Dashboard/components/DashboardAvatar/index.tsx

@@ -1,22 +1,24 @@
 import c from 'classnames';
+import { JoanieFile } from 'types/Joanie';
+import { StringHelper } from 'utils/StringHelper';
+import { Nullable } from 'types/utils';
 
 export enum DashboardAvatarVariantEnum {
   DEFAULT = 'default',
   SQUARE = 'square',
 }
 
-interface DashboardAvatarProps {
+export interface DashboardAvatarProps {
   title: string;
-  imageUrl?: string;
+  image?: Nullable<JoanieFile>;
   variant?: DashboardAvatarVariantEnum;
 }
 
 export const DashboardAvatar = ({
   title,
-  imageUrl,
+  image,
   variant = DashboardAvatarVariantEnum.DEFAULT,
 }: DashboardAvatarProps) => {
-  const letter = title.charAt(0).toUpperCase();
   return (
     <div
       data-testid="dashboard-avatar"
@@ -24,7 +26,16 @@ export const DashboardAvatar = ({
         'dashboard__avatar--square': variant === DashboardAvatarVariantEnum.SQUARE,
       })}
     >
-      {imageUrl ? <img src={imageUrl} alt={title} /> : letter}
+      {image ? (
+        <img
+          className="dashboard__avatar__image"
+          src={image.src}
+          srcSet={image.srcset}
+          alt={title}
+        />
+      ) : (
+        <span className="dashboard__avatar__letter">{StringHelper.abbreviate(title, 3)}</span>
+      )}
     </div>
   );
 };

package/js/widgets/Dashboard/components/DashboardBox/index.stories.tsx

@@ -1,5 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { Button } from 'components/Button';
+import { Button } from '@openfun/cunningham-react';
 import { DashboardBox } from './index';
 
 export default {

package/js/widgets/Dashboard/components/DashboardBreadcrumbs/_styles.scss

@@ -19,6 +19,7 @@
   li {
     margin-right: 1rem;
     padding-right: 0.5rem;
+    display: flex;
   }
 
   li:not(:last-child) {

package/js/widgets/Dashboard/components/DashboardBreadcrumbs/index.tsx

@@ -2,7 +2,6 @@ import { useContext, useMemo } from 'react';
 import { useMatches } from 'react-router-dom';
 import { defineMessages, FormattedMessage, MessageDescriptor, useIntl } from 'react-intl';
 import { IntlHelper } from 'utils/IntlHelper';
-import { Icon, IconTypeEnum } from 'components/Icon';
 import { DashboardBreadcrumbsContext } from 'widgets/Dashboard/contexts/DashboardBreadcrumbsContext';
 import { RouterButton } from '../RouterButton';
 
@@ -58,15 +57,19 @@ export const DashboardBreadcrumbs = () => {
   return (
     <ul className="dashboard-breadcrumbs" data-testid="dashboard-breadcrumbs">
       <li>
-        <RouterButton href={backPath} size="tiny">
-          <Icon name={IconTypeEnum.CHEVRON_LEFT_OUTLINE} className="button__icon" />
+        <RouterButton
+          href={backPath}
+          size="nano"
+          color="tertiary"
+          icon={<span className="material-icons">chevron_left</span>}
+        >
           <FormattedMessage {...messages.back} />
         </RouterButton>
       </li>
 
       {breadcrumbs.map((breadcrumb) => (
         <li key={breadcrumb.pathname}>
-          <RouterButton href={breadcrumb.pathname} size="tiny">
+          <RouterButton href={breadcrumb.pathname} size="nano" color="tertiary">
             {breadcrumb.name}
           </RouterButton>
         </li>

package/js/widgets/Dashboard/components/DashboardCard/index.spec.tsx

@@ -1,5 +1,5 @@
 import { fireEvent, render, screen } from '@testing-library/react';
-import { Button } from 'components/Button';
+import { Button } from '@openfun/cunningham-react';
 import { DashboardCard } from '.';
 
 describe('<DashboardCard/>', () => {

package/js/widgets/Dashboard/components/DashboardCard/index.stories.tsx

@@ -1,6 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { Button } from 'components/Button';
-import { TextField } from 'components/Form';
+import { Button } from '@openfun/cunningham-react';
+import Input from 'components/Form/Input';
 import { DashboardBox } from '../DashboardBox';
 import { DashboardCard } from './index';
 
@@ -18,7 +18,7 @@ type Story = StoryObj<typeof DashboardCard>;
 export const Default: Story = {
   args: {
     header: 'Billing Addresses',
-    children: <TextField id="default" label="Country" />,
+    children: <Input name="default" label="Country" />,
     footer: <Button color="primary">Update</Button>,
   },
 };

package/js/widgets/Dashboard/components/DashboardCard/index.tsx

@@ -1,6 +1,6 @@
 import { PropsWithChildren, ReactNode, useMemo, useRef, useState } from 'react';
 import c from 'classnames';
-import { Button } from 'components/Button';
+import { Button } from '@openfun/cunningham-react';
 import { Icon, IconTypeEnum } from 'components/Icon';
 
 interface Props {
@@ -62,7 +62,7 @@ export const DashboardCard = ({
       <header className="dashboard-card__header">
         <div>{header}</div>
         {expandable && (
-          <Button onClick={toggle} size="nano">
+          <Button onClick={toggle} color="tertiary" size="small">
             <Icon
               name={IconTypeEnum.CHEVRON_DOWN_OUTLINE}
               data-testid="dashboard-card__header__toggle"

package/js/widgets/Dashboard/components/DashboardItem/Certificate/index.spec.tsx

@@ -5,12 +5,17 @@ import { IntlProvider } from 'react-intl';
 import userEvent from '@testing-library/user-event';
 import fetchMock from 'fetch-mock';
 import { RichieContextFactory as mockRichieContextFactory } from 'utils/test/factories/richie';
-import { Certificate, CourseLight } from 'types/Joanie';
+import { Certificate, ProductType } from 'types/Joanie';
 import { createTestQueryClient } from 'utils/test/createTestQueryClient';
 import { SessionProvider } from 'contexts/SessionContext';
 import { DashboardItemCertificate } from 'widgets/Dashboard/components/DashboardItem/Certificate/index';
 import { DEFAULT_DATE_FORMAT } from 'hooks/useDateFormat';
-import { CertificateFactory } from 'utils/test/factories/joanie';
+import {
+  CertificateFactory,
+  NestedCertificateOrderFactory,
+  NestedCredentialOrderFactory,
+} from 'utils/test/factories/joanie';
+import { HttpStatusCode } from 'utils/errors/HttpError';
 
 jest.mock('utils/context', () => ({
   __esModule: true,
@@ -20,7 +25,16 @@ jest.mock('utils/context', () => ({
   }).one(),
 }));
 
-describe('<DashboardCertificate/>', () => {
+describe.each([
+  {
+    label: 'link to a credential order',
+    OrderFactory: NestedCredentialOrderFactory,
+  },
+  {
+    label: 'link to a certificate order',
+    OrderFactory: NestedCertificateOrderFactory,
+  },
+])('<DashboardCertificate/> $label', ({ label, OrderFactory }) => {
   const Wrapper = ({ children }: PropsWithChildren) => {
     return (
       <QueryClientProvider client={createTestQueryClient({ user: true })}>
@@ -34,9 +48,13 @@ describe('<DashboardCertificate/>', () => {
   beforeAll(() => {
     // eslint-disable-next-line compat/compat
     URL.createObjectURL = jest.fn();
+    // eslint-disable-next-line compat/compat
+    URL.revokeObjectURL = jest.fn();
+    HTMLAnchorElement.prototype.click = jest.fn();
   });
 
   beforeEach(() => {
+    // SessionProvider queries
     fetchMock.get('https://joanie.test/api/v1.0/orders/', []);
     fetchMock.get('https://joanie.test/api/v1.0/addresses/', []);
     fetchMock.get('https://joanie.test/api/v1.0/credit-cards/', []);
@@ -48,11 +66,21 @@ describe('<DashboardCertificate/>', () => {
   });
 
   it('displays a certificate', async () => {
-    const certificate: Certificate = CertificateFactory().one();
-    render(<DashboardItemCertificate certificate={certificate} />, { wrapper: Wrapper });
+    const certificate: Certificate = CertificateFactory({
+      order: OrderFactory().one(),
+    }).one();
+    render(
+      <DashboardItemCertificate certificate={certificate} productType={ProductType.CREDENTIAL} />,
+      { wrapper: Wrapper },
+    );
 
     await waitFor(() => screen.getByText(certificate.certificate_definition.title));
-    screen.getByText((certificate.order.course as CourseLight).title);
+    const orderCourse =
+      label === 'link to a credential order'
+        ? certificate.order.course!
+        : certificate.order.enrollment!.course_run.course;
+
+    screen.getByText(orderCourse.title);
     screen.getByText(
       'Issued on ' +
         new Intl.DateTimeFormat('en', DEFAULT_DATE_FORMAT).format(new Date(certificate.issued_on)),
@@ -60,11 +88,23 @@ describe('<DashboardCertificate/>', () => {
   });
 
   it('downloads the certificate', async () => {
-    const certificate: Certificate = CertificateFactory().one();
+    const certificate: Certificate = CertificateFactory({
+      order: OrderFactory().one(),
+    }).one();
 
-    fetchMock.get(`https://joanie.test/api/v1.0/certificates/${certificate.id}/download/`, 200);
+    fetchMock.get(`https://joanie.test/api/v1.0/certificates/${certificate.id}/download/`, () => ({
+      status: HttpStatusCode.OK,
+      body: new Blob(['test']),
+      headers: {
+        'Content-Disposition': 'attachment; filename="test.pdf";',
+        'Content-Type': 'application/pdf',
+      },
+    }));
 
-    render(<DashboardItemCertificate certificate={certificate} />, { wrapper: Wrapper });
+    render(
+      <DashboardItemCertificate certificate={certificate} productType={ProductType.CREDENTIAL} />,
+      { wrapper: Wrapper },
+    );
 
     await waitFor(() => screen.getByText(certificate.certificate_definition.title));
 

package/js/widgets/Dashboard/components/DashboardItem/Certificate/index.tsx

@@ -1,50 +1,25 @@
-import { defineMessages, FormattedMessage } from 'react-intl';
-import { Button } from 'components/Button';
 import { Icon, IconTypeEnum } from 'components/Icon';
-import { Certificate, CertificateDefinition, CourseLight } from 'types/Joanie';
-import { useDownloadCertificate } from 'hooks/useDownloadCertificate';
-import { Spinner } from 'components/Spinner';
-import useDateFormat from 'hooks/useDateFormat';
-import { DashboardItem } from 'widgets/Dashboard/components/DashboardItem/index';
+import { Certificate, CertificateDefinition, CourseLight, ProductType } from 'types/Joanie';
+import {
+  DashboardItem,
+  DashboardItemProps,
+} from 'widgets/Dashboard/components/DashboardItem/index';
 import { Maybe } from 'types/utils';
+import DownloadCertificateButton from 'components/DownloadCertificateButton';
+import CertificateStatus from '../CertificateStatus';
 
-const messages = defineMessages({
-  download: {
-    defaultMessage: 'Download',
-    description: 'Label for the download button of a certificate',
-    id: 'components.DashboardCertificate.download',
-  },
-  details: {
-    defaultMessage: 'Details',
-    description: 'Label for the details button of a certificate',
-    id: 'components.DashboardCertificate.details',
-  },
-  issuedOn: {
-    defaultMessage: 'Issued on {date}',
-    description: 'Label for the date of issue of a certificate',
-    id: 'components.DashboardCertificate.issuedOn',
-  },
-  noCertificate: {
-    defaultMessage:
-      'When all your courses will be passed, you will be able to download your certificate here.',
-    description: 'Label displayed when no certificate is available',
-    id: 'components.DashboardCertificate.noCertificate',
-  },
-  generatingCertificate: {
-    defaultMessage: 'Certificate is being generated...',
-    description:
-      'Accessible label displayed while certificate is being generated on the dashboard.',
-    id: 'components.DashboardCertificate.generatingCertificate',
-  },
-});
-
+interface DashboardItemCertificateProps {
+  certificate?: Certificate;
+  certificateDefinition?: CertificateDefinition;
+  productType?: ProductType;
+  mode?: DashboardItemProps['mode'];
+}
 export const DashboardItemCertificate = ({
   certificate,
   certificateDefinition,
-}: {
-  certificate?: Certificate;
-  certificateDefinition?: CertificateDefinition;
-}) => {
+  productType,
+  mode,
+}: DashboardItemCertificateProps) => {
   if (certificate) {
     if (certificateDefinition) {
       throw new Error('certificate and certificateDefinition are mutually exclusive');
@@ -58,22 +33,22 @@ export const DashboardItemCertificate = ({
     throw new Error('certificate or certificateDefinition is required');
   }
 
-  const course = certificate?.order.course as Maybe<CourseLight>;
-  const { download, loading } = useDownloadCertificate();
-  const formatDate = useDateFormat();
-
-  const onDownloadClick = async () => {
-    if (!certificate) {
-      return;
+  let course: Maybe<CourseLight>;
+  if (certificate) {
+    if (certificate.order?.course) {
+      course = certificate.order.course;
+    } else {
+      course = certificate.order.enrollment.course_run.course;
     }
-    await download(certificate.id);
-  };
+  }
 
   return (
     <DashboardItem
+      mode={mode}
       title={course?.title ?? ''}
       code={'Ref. ' + (course?.code ?? '')}
       imageUrl="https://d29emq8to944i.cloudfront.net/cba69447-b9f7-b4d7-c0d5-4d98b5280a4e/thumbnails/1659356729_1080.jpg"
+      imageFile={course?.cover}
       footer={
         <>
           <div className="dashboard-certificate__body">
@@ -82,30 +57,9 @@ export const DashboardItemCertificate = ({
           </div>
           <div className="dashboard-certificate__footer">
             <span>
-              {certificate ? (
-                <FormattedMessage
-                  {...messages.issuedOn}
-                  values={{ date: formatDate(certificate!.issued_on) }}
-                />
-              ) : (
-                <FormattedMessage {...messages.noCertificate} />
-              )}
+              <CertificateStatus certificate={certificate} productType={productType} />
             </span>
-            <div>
-              {certificate && (
-                <Button color="outline-primary" disabled={loading} onClick={onDownloadClick}>
-                  {loading ? (
-                    <Spinner theme="primary" aria-labelledby="generating-certificate">
-                      <span id="generating-certificate">
-                        <FormattedMessage {...messages.generatingCertificate} />
-                      </span>
-                    </Spinner>
-                  ) : (
-                    <FormattedMessage {...messages.download} />
-                  )}
-                </Button>
-              )}
-            </div>
+            <div>{certificate && <DownloadCertificateButton certificateId={certificate.id} />}</div>
           </div>
         </>
       }

package/js/widgets/Dashboard/components/DashboardItem/CertificateStatus/index.spec.tsx

@@ -0,0 +1,65 @@
+import { IntlProvider } from 'react-intl';
+import { render, screen } from '@testing-library/react';
+import { ProductType } from 'types/Joanie';
+import { CertificateFactory } from 'utils/test/factories/joanie';
+import CertificateStatus, { CertificateStatusProps } from '.';
+
+describe('<CertificateStatus/>', () => {
+  const Wrapper = ({ certificate, productType }: CertificateStatusProps) => (
+    <IntlProvider locale="en">
+      <CertificateStatus certificate={certificate} productType={productType} />
+    </IntlProvider>
+  );
+
+  it('should display message for issued certificate.', () => {
+    const certificate = CertificateFactory({
+      issued_on: new Date('01/01/2021').toISOString(),
+    }).one();
+    render(<Wrapper certificate={certificate} productType={ProductType.CERTIFICATE} />);
+    expect(screen.getByText('Issued on Jan 01, 2021')).toBeInTheDocument();
+
+    expect(
+      screen.queryByText(
+        'When you pass your exam, you will be able to download your certificate here.',
+      ),
+    ).not.toBeInTheDocument();
+    expect(
+      screen.queryByText(
+        'When all your courses have been passed, you will be able to download your certificate here.',
+      ),
+    ).not.toBeInTheDocument();
+  });
+
+  it('should display message for no certificate of product type certificate.', () => {
+    render(<Wrapper productType={ProductType.CERTIFICATE} />);
+
+    expect(
+      screen.getByText(
+        'When you pass your exam, you will be able to download your certificate here.',
+      ),
+    ).toBeInTheDocument();
+
+    expect(screen.queryByText('Issued on', { exact: false })).not.toBeInTheDocument();
+    expect(
+      screen.queryByText(
+        'When all your courses have been passed, you will be able to download your certificate here.',
+      ),
+    ).not.toBeInTheDocument();
+  });
+
+  it('should display message for no certificate of product type credential.', () => {
+    render(<Wrapper productType={ProductType.CREDENTIAL} />);
+    expect(
+      screen.getByText(
+        'When all your courses have been passed, you will be able to download your certificate here.',
+      ),
+    ).toBeInTheDocument();
+
+    expect(screen.queryByText('Issued on', { exact: false })).not.toBeInTheDocument();
+    expect(
+      screen.queryByText(
+        'When you pass your exam, you will be able to download your certificate here.',
+      ),
+    ).not.toBeInTheDocument();
+  });
+});

package/js/widgets/Dashboard/components/DashboardItem/CertificateStatus/index.tsx

@@ -0,0 +1,59 @@
+import { FormattedMessage, MessageDescriptor, defineMessages } from 'react-intl';
+import useDateFormat from 'hooks/useDateFormat';
+import { Certificate, ProductType } from 'types/Joanie';
+
+const messages = defineMessages({
+  issuedOn: {
+    defaultMessage: 'Issued on {date}',
+    description: 'Label for the date of issue of a certificate',
+    id: 'components.DashboardCertificate.issuedOn',
+  },
+  noCertificateCredential: {
+    defaultMessage:
+      'When all your courses have been passed, you will be able to download your certificate here.',
+    description: 'Label displayed when no certificate credential is available',
+    id: 'components.DashboardCertificate.noCertificateCredential',
+  },
+  noCertificateCertificate: {
+    defaultMessage: 'When you pass your exam, you will be able to download your certificate here.',
+    description: 'Label displayed when no certificate certificate is available',
+    id: 'components.DashboardCertificate.noCertificateCertificate',
+  },
+  noCertificateUnknown: {
+    defaultMessage:
+      'When all requirements are met, you will be able to download your certificate here.',
+    description:
+      'Label displayed when we dont have the product type and no certificate is available',
+    id: 'components.DashboardCertificate.noCertificateUnknown',
+  },
+});
+
+export interface CertificateStatusProps {
+  certificate?: Certificate;
+  productType?: ProductType;
+}
+const CertificateStatus = ({ certificate, productType }: CertificateStatusProps) => {
+  const getMessage = () => {
+    const messagesByProductType: Record<ProductType, MessageDescriptor> = {
+      [ProductType.CREDENTIAL]: messages.noCertificateCredential,
+      [ProductType.CERTIFICATE]: messages.noCertificateCertificate,
+    };
+
+    if (!productType) {
+      return messages.noCertificateUnknown;
+    }
+
+    return messagesByProductType[productType!];
+  };
+  const formatDate = useDateFormat();
+  return certificate ? (
+    <FormattedMessage
+      {...messages.issuedOn}
+      values={{ date: formatDate(certificate!.issued_on) }}
+    />
+  ) : (
+    <FormattedMessage {...getMessage()} />
+  );
+};
+
+export default CertificateStatus;

package/js/widgets/Dashboard/components/DashboardItem/Contract/_styles.scss

@@ -0,0 +1,29 @@
+.dashboard-contract {
+  &__body {
+    padding: 1rem;
+    border-bottom: $onepixel solid r-theme-val(dashboard-item, base-border);
+    display: flex;
+    align-items: center;
+
+    font-size: 1rem;
+    font-weight: 800;
+    font-family: $r-font-family-montserrat;
+
+    gap: 0.5rem;
+  }
+
+  &__footer {
+    padding: 0.5rem 1rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    &__status {
+      line-height: rem-calc(32px);
+    }
+
+    span {
+      font-size: 0.875rem;
+    }
+  }
+}