@digigov/react-core 1.0.0-002c630d → 1.0.0-6b93ebf2

package/src/CircularProgress/__snapshots__/index.test.tsx.snap

@@ -5,13 +5,13 @@ exports[`renders the CircularProgress 1`] = `
   <ForwardRef(Base)
     aria-hidden="true"
     as="svg"
-    className="govgr-loader--medium govgr-loader"
+    className="govgr-circular-progress--md govgr-circular-progress"
     focusable="false"
     viewBox="0 0 200 200"
   >
     <svg
       aria-hidden="true"
-      className="govgr-loader--medium govgr-loader"
+      className="govgr-circular-progress--md govgr-circular-progress"
       focusable="false"
       viewBox="0 0 200 200"
     >
@@ -28,21 +28,21 @@ exports[`renders the CircularProgress 1`] = `
 </ForwardRef(CircularProgress)>
 `;
 
-exports[`renders the CircularProgress with inverse and size l props 1`] = `
+exports[`renders the CircularProgress with color=secondary and size lg props 1`] = `
 <ForwardRef(CircularProgress)
-  inverse={true}
+  color="secondary"
   size="lg"
 >
   <ForwardRef(Base)
     aria-hidden="true"
     as="svg"
-    className="govgr-loader--inverse govgr-loader--large govgr-loader"
+    className="govgr-circular-progress--secondary govgr-circular-progress--lg govgr-circular-progress"
     focusable="false"
     viewBox="0 0 200 200"
   >
     <svg
       aria-hidden="true"
-      className="govgr-loader--inverse govgr-loader--large govgr-loader"
+      className="govgr-circular-progress--secondary govgr-circular-progress--lg govgr-circular-progress"
       focusable="false"
       viewBox="0 0 200 200"
     >
@@ -59,21 +59,21 @@ exports[`renders the CircularProgress with inverse and size l props 1`] = `
 </ForwardRef(CircularProgress)>
 `;
 
-exports[`renders the CircularProgress with inverse and size s props 1`] = `
+exports[`renders the CircularProgress with color=secondary and size sm props 1`] = `
 <ForwardRef(CircularProgress)
-  inverse={true}
+  color="secondary"
   size="sm"
 >
   <ForwardRef(Base)
     aria-hidden="true"
     as="svg"
-    className="govgr-loader--inverse govgr-loader--small govgr-loader"
+    className="govgr-circular-progress--secondary govgr-circular-progress--sm govgr-circular-progress"
     focusable="false"
     viewBox="0 0 200 200"
   >
     <svg
       aria-hidden="true"
-      className="govgr-loader--inverse govgr-loader--small govgr-loader"
+      className="govgr-circular-progress--secondary govgr-circular-progress--sm govgr-circular-progress"
       focusable="false"
       viewBox="0 0 200 200"
     >
@@ -90,20 +90,20 @@ exports[`renders the CircularProgress with inverse and size s props 1`] = `
 </ForwardRef(CircularProgress)>
 `;
 
-exports[`renders the CircularProgress with inverse prop 1`] = `
+exports[`renders the CircularProgress with color=secondary prop 1`] = `
 <ForwardRef(CircularProgress)
-  inverse={true}
+  color="secondary"
 >
   <ForwardRef(Base)
     aria-hidden="true"
     as="svg"
-    className="govgr-loader--inverse govgr-loader--medium govgr-loader"
+    className="govgr-circular-progress--secondary govgr-circular-progress--md govgr-circular-progress"
     focusable="false"
     viewBox="0 0 200 200"
   >
     <svg
       aria-hidden="true"
-      className="govgr-loader--inverse govgr-loader--medium govgr-loader"
+      className="govgr-circular-progress--secondary govgr-circular-progress--md govgr-circular-progress"
       focusable="false"
       viewBox="0 0 200 200"
     >
@@ -120,20 +120,20 @@ exports[`renders the CircularProgress with inverse prop 1`] = `
 </ForwardRef(CircularProgress)>
 `;
 
-exports[`renders the CircularProgress with size l 1`] = `
+exports[`renders the CircularProgress with size lg 1`] = `
 <ForwardRef(CircularProgress)
   size="lg"
 >
   <ForwardRef(Base)
     aria-hidden="true"
     as="svg"
-    className="govgr-loader--large govgr-loader"
+    className="govgr-circular-progress--lg govgr-circular-progress"
     focusable="false"
     viewBox="0 0 200 200"
   >
     <svg
       aria-hidden="true"
-      className="govgr-loader--large govgr-loader"
+      className="govgr-circular-progress--lg govgr-circular-progress"
       focusable="false"
       viewBox="0 0 200 200"
     >
@@ -150,20 +150,20 @@ exports[`renders the CircularProgress with size l 1`] = `
 </ForwardRef(CircularProgress)>
 `;
 
-exports[`renders the CircularProgress with size s 1`] = `
+exports[`renders the CircularProgress with size sm 1`] = `
 <ForwardRef(CircularProgress)
   size="sm"
 >
   <ForwardRef(Base)
     aria-hidden="true"
     as="svg"
-    className="govgr-loader--small govgr-loader"
+    className="govgr-circular-progress--sm govgr-circular-progress"
     focusable="false"
     viewBox="0 0 200 200"
   >
     <svg
       aria-hidden="true"
-      className="govgr-loader--small govgr-loader"
+      className="govgr-circular-progress--sm govgr-circular-progress"
       focusable="false"
       viewBox="0 0 200 200"
     >

package/src/CircularProgress/index.test.tsx

@@ -7,22 +7,22 @@ it('renders the CircularProgress', () => {
   expect(mount(<CircularProgress />)).toMatchSnapshot();
 });
 
-it('renders the CircularProgress with size s', () => {
+it('renders the CircularProgress with size sm', () => {
   expect(mount(<CircularProgress size="sm" />)).toMatchSnapshot();
 });
 
-it('renders the CircularProgress with size l', () => {
+it('renders the CircularProgress with size lg', () => {
   expect(mount(<CircularProgress size="lg" />)).toMatchSnapshot();
 });
 
-it('renders the CircularProgress with inverse prop', () => {
-  expect(mount(<CircularProgress inverse />)).toMatchSnapshot();
+it('renders the CircularProgress with color=secondary prop', () => {
+  expect(mount(<CircularProgress color={'secondary'} />)).toMatchSnapshot();
 });
 
-it('renders the CircularProgress with inverse and size s props', () => {
-  expect(mount(<CircularProgress inverse size="sm" />)).toMatchSnapshot();
+it('renders the CircularProgress with color=secondary and size sm props', () => {
+  expect(mount(<CircularProgress color={'secondary'} size="sm" />)).toMatchSnapshot();
 });
 
-it('renders the CircularProgress with inverse and size l props', () => {
-  expect(mount(<CircularProgress inverse size="lg" />)).toMatchSnapshot();
+it('renders the CircularProgress with color=secondary and size lg props', () => {
+  expect(mount(<CircularProgress color={'secondary'} size="lg" />)).toMatchSnapshot();
 });

package/src/CircularProgress/index.tsx

@@ -4,18 +4,21 @@ import Base, { BaseProps } from '@digigov/react-core/Base';
 
 export interface CircularProgressProps extends BaseProps<'svg'> {
   /**
-   * inverse prop is optional.
-   * inverse prop is used to invert the color of the loader.
-   * recommended for dark backgrounds.
-   * inverse prop is false by default.
-   */
-
-  inverse?: boolean;
+   * color prop is optional.
+   * color prop is used to change the color of the loader.
+   * @value 'primary' is the default color.
+   * @value 'secondary' recommended for dark backgrounds.
+   * @default 'primary'
+  */
+  color?: 'primary' | 'secondary';
   /**
-   * size prop is optional.
-   * size prop is used to change the size of the loader.
-   */
-
+  * size prop is optional.
+  * size prop is used to change the size of the loader.
+  * @value 'sm'
+  * @value 'md'
+  * @value 'lg'
+  * @default 'md'
+  */
   size?: 'sm' | 'md' | 'lg';
 }
 /**
@@ -26,7 +29,7 @@ export const CircularProgress = React.forwardRef<
   SVGSVGElement,
   CircularProgressProps
 >(function CircularProgress(
-  { inverse = false, size = 'md', className, ...props },
+  { color = 'primary', size = 'md', className, ...props },
   ref
 ) {
   return (
@@ -34,11 +37,11 @@ export const CircularProgress = React.forwardRef<
       as="svg"
       ref={ref}
       className={clsx(className, {
-        'govgr-loader': true,
-        'govgr-loader--inverse': inverse,
-        'govgr-loader--sm': size === 'sm',
-        'govgr-loader--md': size === 'md',
-        'govgr-loader--lg': size === 'lg',
+        'govgr-circular-progress': true,
+        'govgr-circular-progress--secondary': color === 'secondary',
+        'govgr-circular-progress--sm': size === 'sm',
+        'govgr-circular-progress--md': size === 'md',
+        'govgr-circular-progress--lg': size === 'lg',
       })}
       focusable="false"
       viewBox="0 0 200 200"

package/src/Container/__snapshots__/index.test.tsx.snap

@@ -7,10 +7,10 @@ exports[`renders the Container with cols={false} prop 1`] = `
 >
   <ForwardRef(Base)
     as="div"
-    className="govgr-full-width-container"
+    className="govgr-container--full-width"
   >
     <div
-      className="govgr-full-width-container"
+      className="govgr-container--full-width"
     >
       <ForwardRef(Base)
         as="div"
@@ -33,10 +33,10 @@ exports[`renders the Container with fullWidth prop 1`] = `
 >
   <ForwardRef(Base)
     as="div"
-    className="govgr-full-width-container"
+    className="govgr-container--full-width"
   >
     <div
-      className="govgr-full-width-container"
+      className="govgr-container--full-width"
     >
       <ForwardRef(Base)
         as="div"
@@ -57,10 +57,10 @@ exports[`renders the Container with no props 1`] = `
 <ForwardRef(Container)>
   <ForwardRef(Base)
     as="div"
-    className="govgr-width-container"
+    className="govgr-container"
   >
     <div
-      className="govgr-width-container"
+      className="govgr-container"
     >
       <ForwardRef(Base)
         as="div"

package/src/Container/index.test.tsx

@@ -12,7 +12,7 @@ it('renders the Container with fullWidth prop', () => {
 it('renders the Container with cols={false} prop', () => {
   expect(
     mount(
-      <Container fullWidth cols={false}>
+      <Container fullWidth grid={false}>
         hello
       </Container>
     )

package/src/Container/index.tsx

@@ -4,20 +4,26 @@ import Base, { BaseProps } from '@digigov/react-core/Base';
 
 export interface ContainerProps extends BaseProps<'div'> {
   /**
-   * cols is optional. Set to false if you don't need 3 columns layout.
+   * grid is optional. Set to false if you don't need 3 columns layout.
+  * @value true
+  * @value false
+  * @default true
    */
-  cols?: true | false;
+  grid?: boolean;
   /**
-   * fullWidth is optional. Set to true if you need a full width layout.
-   */
-  fullWidth?: true | false;
+  * fullWidth is optional. Set to true if you need a full width layout.
+  * @value true
+  * @value false
+  * @default false
+  */
+  fullWidth?: boolean;
 }
 /**
  * Use Container as a wrapper.
  */
 export const Container = React.forwardRef<HTMLDivElement, ContainerProps>(
   function Container(
-    { cols = true, fullWidth = false, className, children, ...props },
+    { grid = true, fullWidth = false, className, children, ...props },
     ref
   ) {
     return (
@@ -25,15 +31,15 @@ export const Container = React.forwardRef<HTMLDivElement, ContainerProps>(
         as="div"
         ref={ref}
         className={clsx(className, {
-          'govgr-width-container': !fullWidth,
-          'govgr-full-width-container': fullWidth,
+          'govgr-container': true,
+          'govgr-container--full-width': fullWidth,
         })}
         {...props}
       >
         <Base
           as="div"
           className={clsx({
-            'govgr-main-wrapper': cols,
+            'govgr-main-wrapper': grid,
           })}
         >
           {children}

package/src/CopyToClipboardContainer/__snapshots__/index.spec.tsx.snap

@@ -4,13 +4,13 @@ exports[`renders the CopyToClipboardContainer with no props 1`] = `
 <ForwardRef(CopyToClipboardContainer)>
   <ForwardRef(Base)
     as="div"
-    className="govgr-copy-to-clipboard--root"
+    className="govgr-copy-to-clipboard"
   >
     <div
-      className="govgr-copy-to-clipboard--root"
+      className="govgr-copy-to-clipboard"
     >
       <div
-        className=""
+        className="govgr-copy-to-clipboard__tooltip--right govgr-copy-to-clipboard__tooltip"
       >
         Text copied!
       </div>
@@ -25,13 +25,13 @@ exports[`renders the CopyToClipboardContainer with variant=banner 1`] = `
 >
   <ForwardRef(Base)
     as="div"
-    className="govgr-copy-to-clipboard--root"
+    className="govgr-copy-to-clipboard"
   >
     <div
-      className="govgr-copy-to-clipboard--root"
+      className="govgr-copy-to-clipboard"
     >
       <div
-        className=""
+        className="govgr-copy-to-clipboard__banner"
       >
         Text copied!
       </div>
@@ -42,17 +42,18 @@ exports[`renders the CopyToClipboardContainer with variant=banner 1`] = `
 
 exports[`renders the CopyToClipboardContainer with variant=tooltip 1`] = `
 <ForwardRef(CopyToClipboardContainer)
-  variant="tooltip-right"
+  tooltipAlign="right"
+  variant="tooltip"
 >
   <ForwardRef(Base)
     as="div"
-    className="govgr-copy-to-clipboard--root"
+    className="govgr-copy-to-clipboard"
   >
     <div
-      className="govgr-copy-to-clipboard--root"
+      className="govgr-copy-to-clipboard"
     >
       <div
-        className="govgr-copy-to-clipboard--container"
+        className="govgr-copy-to-clipboard__tooltip--right govgr-copy-to-clipboard__tooltip"
       >
         Text copied!
       </div>

package/src/CopyToClipboardContainer/index.spec.tsx

@@ -11,7 +11,8 @@ it('renders the CopyToClipboardContainer with no props', () => {
 it('renders the CopyToClipboardContainer with variant=tooltip', () => {
   expect(
     mount(
-      <CopyToClipboardContainer variant="tooltip-right">
+      <CopyToClipboardContainer variant="tooltip"
+        tooltipAlign="right">
         Text copied!
       </CopyToClipboardContainer>
     )

package/src/CopyToClipboardContainer/index.tsx

@@ -4,11 +4,19 @@ import Base, { BaseProps } from '@digigov/react-core/Base';
 
 export interface CopyToClipboardContainerProps extends BaseProps<'div'> {
   /**
-   * 'tooltip' is used when you want to show the message inside a tooltip.
-   * 'banner' is used when you want to show the message inside a banner.
+   * @value 'tooltip' is used when you want to show the message inside a tooltip.
+   * @value 'banner' is used when you want to show the message inside a banner.
+   * @default 'tooltip'
    */
-
-  variant?: 'tooltip-right' | 'tooltip-left' | 'banner';
+  variant?: 'tooltip' | 'banner';
+  /**
+   * tooltipAlign is optional.
+   * tooltipAlign prop adds tooltip right or left and is used only if variant is tooltip.
+   * @value 'right'
+   * @value 'left'
+   * @default 'right'
+   */
+  tooltipAlign?: 'right' | 'left';
 }
 /**
  * CopyToClipboardContainer is a wrapper component for CopyToClipboardMessage
@@ -17,7 +25,7 @@ export const CopyToClipboardContainer = React.forwardRef<
   HTMLDivElement,
   CopyToClipboardContainerProps
 >(function CopyToClipboardContainer(
-  { variant, className, children, ...props },
+  { variant = 'tooltip', tooltipAlign = 'right', className, children, ...props },
   ref
 ) {
   return (
@@ -26,14 +34,16 @@ export const CopyToClipboardContainer = React.forwardRef<
       ref={ref}
       {...props}
       className={clsx(className, {
-        'govgr-copy-to-clipboard-root': true,
+        'govgr-copy-to-clipboard': true,
       })}
       {...props}
     >
       <div
         className={clsx(className, {
-          'govgr-copy-to-clipboard-container':
-            variant === 'tooltip-left' || variant === 'tooltip-right',
+          'govgr-copy-to-clipboard__tooltip': variant === 'tooltip',
+          'govgr-copy-to-clipboard__tooltip--left': variant === 'tooltip' && tooltipAlign === 'left',
+          'govgr-copy-to-clipboard__tooltip--right': variant === 'tooltip' && tooltipAlign === 'right',
+          'govgr-copy-to-clipboard__banner': variant === 'banner',
         })}
       >
         {children}

package/src/CopyToClipboardMessage/__snapshots__/index.test.tsx.snap

@@ -3,14 +3,13 @@
 exports[`renders the CopyToClipboardMessage with banner copied prop 1`] = `
 <ForwardRef(CopyToClipboardMessage)
   enabled={true}
-  variant="banner"
 >
   <ForwardRef(Base)
     as="div"
-    className="govgr-copy-to-clipboard--banner"
+    className="govgr-copy-to-clipboard__message"
   >
     <div
-      className="govgr-copy-to-clipboard--banner"
+      className="govgr-copy-to-clipboard__message"
     >
       Text copied!
     </div>
@@ -19,15 +18,13 @@ exports[`renders the CopyToClipboardMessage with banner copied prop 1`] = `
 `;
 
 exports[`renders the CopyToClipboardMessage with banner prop 1`] = `
-<ForwardRef(CopyToClipboardMessage)
-  variant="banner"
->
+<ForwardRef(CopyToClipboardMessage)>
   <ForwardRef(Base)
     as="div"
-    className="govgr-copy-to-clipboard--banner govgr-copy-to-clipboard--hidden"
+    className="govgr-copy-to-clipboard--hidden govgr-copy-to-clipboard__message"
   >
     <div
-      className="govgr-copy-to-clipboard--banner govgr-copy-to-clipboard--hidden"
+      className="govgr-copy-to-clipboard--hidden govgr-copy-to-clipboard__message"
     >
       Text copied!
     </div>
@@ -41,10 +38,10 @@ exports[`renders the CopyToClipboardMessage with copied prop 1`] = `
 >
   <ForwardRef(Base)
     as="div"
-    className=""
+    className="govgr-copy-to-clipboard__message"
   >
     <div
-      className=""
+      className="govgr-copy-to-clipboard__message"
     >
       Text copied!
     </div>
@@ -56,10 +53,10 @@ exports[`renders the CopyToClipboardMessage with no props 1`] = `
 <ForwardRef(CopyToClipboardMessage)>
   <ForwardRef(Base)
     as="div"
-    className="govgr-copy-to-clipboard--hidden"
+    className="govgr-copy-to-clipboard--hidden govgr-copy-to-clipboard__message"
   >
     <div
-      className="govgr-copy-to-clipboard--hidden"
+      className="govgr-copy-to-clipboard--hidden govgr-copy-to-clipboard__message"
     >
       Text copied!
     </div>
@@ -70,14 +67,13 @@ exports[`renders the CopyToClipboardMessage with no props 1`] = `
 exports[`renders the CopyToClipboardMessage with tooltip and copied prop 1`] = `
 <ForwardRef(CopyToClipboardMessage)
   enabled={true}
-  variant="tooltip-right"
 >
   <ForwardRef(Base)
     as="div"
-    className="govgr-copy-to-clipboard--tooltip govgr-copy-to-clipboard--tooltip-right"
+    className="govgr-copy-to-clipboard__message"
   >
     <div
-      className="govgr-copy-to-clipboard--tooltip govgr-copy-to-clipboard--tooltip-right"
+      className="govgr-copy-to-clipboard__message"
     >
       Text copied!
     </div>
@@ -86,15 +82,13 @@ exports[`renders the CopyToClipboardMessage with tooltip and copied prop 1`] = `
 `;
 
 exports[`renders the CopyToClipboardMessage with tooltip prop 1`] = `
-<ForwardRef(CopyToClipboardMessage)
-  variant="tooltip-right"
->
+<ForwardRef(CopyToClipboardMessage)>
   <ForwardRef(Base)
     as="div"
-    className="govgr-copy-to-clipboard--tooltip govgr-copy-to-clipboard--tooltip-right govgr-copy-to-clipboard--hidden"
+    className="govgr-copy-to-clipboard--hidden govgr-copy-to-clipboard__message"
   >
     <div
-      className="govgr-copy-to-clipboard--tooltip govgr-copy-to-clipboard--tooltip-right govgr-copy-to-clipboard--hidden"
+      className="govgr-copy-to-clipboard--hidden govgr-copy-to-clipboard__message"
     >
       Text copied!
     </div>

package/src/CopyToClipboardMessage/index.test.tsx

@@ -12,7 +12,7 @@ it('renders the CopyToClipboardMessage with no props', () => {
 it('renders the CopyToClipboardMessage with banner prop', () => {
   expect(
     mount(
-      <CopyToClipboardMessage variant="banner">
+      <CopyToClipboardMessage>
         Text copied!
       </CopyToClipboardMessage>
     )
@@ -22,7 +22,7 @@ it('renders the CopyToClipboardMessage with banner prop', () => {
 it('renders the CopyToClipboardMessage with tooltip prop', () => {
   expect(
     mount(
-      <CopyToClipboardMessage variant="tooltip-right">
+      <CopyToClipboardMessage>
         Text copied!
       </CopyToClipboardMessage>
     )
@@ -42,7 +42,7 @@ it('renders the CopyToClipboardMessage with copied prop', () => {
 it('renders the CopyToClipboardMessage with tooltip and copied prop', () => {
   expect(
     mount(
-      <CopyToClipboardMessage variant="tooltip-right" enabled={true}>
+      <CopyToClipboardMessage enabled={true}>
         Text copied!
       </CopyToClipboardMessage>
     )
@@ -52,7 +52,7 @@ it('renders the CopyToClipboardMessage with tooltip and copied prop', () => {
 it('renders the CopyToClipboardMessage with banner copied prop', () => {
   expect(
     mount(
-      <CopyToClipboardMessage variant="banner" enabled={true}>
+      <CopyToClipboardMessage enabled={true}>
         Text copied!
       </CopyToClipboardMessage>
     )

package/src/CopyToClipboardMessage/index.tsx

@@ -4,18 +4,12 @@ import Base, { BaseProps } from '@digigov/react-core/Base';
 
 export interface CopyToClipboardMessageProps extends BaseProps<'div'> {
   /**
-   * 'tooltip' is used when you want to show the message inside a tooltip.
-   * 'banner' is used when you want to show the message inside a banner.
-   */
-
-  variant?: 'tooltip-right' | 'tooltip-left' | 'banner';
-
-  /**
-   * enabled is a boolean prop passed from the CopyToClipboard component.
-   * When it's true it shows the CopyToClipboardMessage component and it activates the animation that hides the component after 3s.
-   * When it's false it resets the animations of the CopyToClipboardMessage.
-   */
-
+  * enabled is a boolean prop passed from the CopyToClipboard component.
+  * When it's true it shows the CopyToClipboardMessage component and it activates the animation that hides the component after 3s.
+  * When it's false it resets the animations of the CopyToClipboardMessage.
+  * @value true
+  * @value false
+  */
   enabled?: boolean;
 }
 /**
@@ -26,7 +20,7 @@ export const CopyToClipboardMessage = React.forwardRef<
   HTMLDivElement,
   CopyToClipboardMessageProps
 >(function CopyToClipboardMessage(
-  { variant, enabled, className, children, ...props },
+  { enabled, className, children, ...props },
   ref
 ) {
   return (
@@ -34,11 +28,7 @@ export const CopyToClipboardMessage = React.forwardRef<
       as="div"
       ref={ref}
       className={clsx(className, {
-        'govgr-copy-to-clipboard--banner': variant === 'banner',
-        'govgr-copy-to-clipboard--tooltip':
-          variant === 'tooltip-left' || variant === 'tooltip-right',
-        'govgr-copy-to-clipboard--tooltip-right': variant === 'tooltip-right',
-        'govgr-copy-to-clipboard--tooltip-left': variant === 'tooltip-left',
+        'govgr-copy-to-clipboard__message': true,
         'govgr-copy-to-clipboard--hidden': !enabled,
       })}
       {...props}

package/src/CopyrightContainer/__snapshots__/index.test.tsx.snap

@@ -4,10 +4,10 @@ exports[`renders the CopyrightContainer with no props 1`] = `
 <ForwardRef(CopyrightContainer)>
   <ForwardRef(Base)
     as="p"
-    className="govgr-footer__licence-description"
+    className="govgr-footer__copyright"
   >
     <p
-      className="govgr-footer__licence-description"
+      className="govgr-footer__copyright"
     >
       hello
     </p>

package/src/CopyrightContainer/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
 
-export interface CopyrightContainerProps extends BaseProps<'p'> {}
+export interface CopyrightContainerProps extends BaseProps<'p'> { }
 /**
  * CopyrightContainer is used inside the Footer component.
  * CopyrightContainer has no props.
@@ -16,7 +16,7 @@ export const CopyrightContainer = React.forwardRef<
       as="p"
       ref={ref}
       className={clsx(className, {
-        'govgr-footer__licence-description': true,
+        'govgr-footer__copyright': true,
       })}
       {...props}
     >