npm - @digigov/react-core - Versions diffs - 2.0.0-60d81ed8 → 2.0.0-6452adf3 - Mend

@digigov/react-core 2.0.0-60d81ed8 → 2.0.0-6452adf3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (317) hide show

package/src/FilterContainer/index.tsx CHANGED Viewed

@@ -22,13 +22,15 @@ export interface FilterContainerProps extends BaseProps<'div'> {
   border?: boolean;
   /**
-   * Use visible prop to make the filter section have position relative in the page.
+   * positionRelative is optional.
+   * Use positionRelative prop to make the filter section to be visible and have position relative in the page.
+   * If not relative, the filter section will be a drawer.
    * The default value is md.
-   * @value 'always'
-   * @value 'sm'
-   * @value 'md'
-   * @value 'lg'
-   * @value 'never'
+   * @value 'always' The filter section will always visible
+   * @value 'sm' The filter section will be visible at small screens and up
+   * @value 'md' The filter section will be visible at medium screens and up
+   * @value 'lg' The filter section will be visible at large screens and up
+   * @value 'never' The filter section will never have relative position in the page
    * @default 'md'
    */
   positionRelative?: 'always' | 'sm' | 'md' | 'lg' | 'never';
@@ -57,18 +59,29 @@ export const FilterContainer = React.forwardRef<
     <Base
       as="div"
       ref={ref}
-      className={clsx(className, {
-        'ds-filter': true,
-        'ds-filter--closed ': !open,
-        'ds-filter--border ': border,
-        'ds-filter--position-relative-always': positionRelative === 'always',
-        'ds-filter--position-relative-sm': positionRelative === 'sm',
-        'ds-filter--position-relative-md': positionRelative === 'md',
-        'ds-filter--position-relative-lg': positionRelative === 'lg',
+      className={clsx({
+        'ds-filter-container': true,
+        'ds-filter-container--position-relative-always': positionRelative === 'always',
+        'ds-filter-container--position-relative-sm': positionRelative === 'sm',
+        'ds-filter-container--position-relative-md': positionRelative === 'md',
+        'ds-filter-container--position-relative-lg': positionRelative === 'lg',
+        'ds-filter-container--closed': !open,
       })}
-      {...props}
     >
-      {children}
+      <Base
+        as="div"
+        className={clsx(className, {
+          'ds-filter': true,
+          'ds-filter--border ': border,
+          'ds-filter--position-relative-always': positionRelative === 'always',
+          'ds-filter--position-relative-sm': positionRelative === 'sm',
+          'ds-filter--position-relative-md': positionRelative === 'md',
+          'ds-filter--position-relative-lg': positionRelative === 'lg',
+        })}
+        {...props}
+      >
+        {children}
+      </Base>
     </Base>
   );
 });

package/src/FilterContent/__snapshots__/index.test.tsx.snap CHANGED Viewed

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 exports[`renders the FilterContent with no props 1`] = `
 <body>

package/src/FilterHeadingContainer/__snapshots__/index.test.tsx.snap CHANGED Viewed

@@ -1,4 +1,16 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+exports[`renders the FilterHeadingContainer with closeLabel="Απόρριψη 1`] = `
+<body>
+  <div>
+    <div
+      class="ds-filter__heading"
+    >
+      hello
+    </div>
+  </div>
+</body>
+`;
 exports[`renders the FilterHeadingContainer with no props 1`] = `
 <body>

package/src/FilterHeadingContainer/index.test.tsx CHANGED Viewed

@@ -8,3 +8,13 @@ it('renders the FilterHeadingContainer with no props', () => {
     render(<FilterHeadingContainer>hello</FilterHeadingContainer>).baseElement
   ).toMatchSnapshot();
 });
+it('renders the FilterHeadingContainer with closeLabel="Απόρριψη', () => {
+  expect(
+    render(
+      <FilterHeadingContainer closeLabel="Απόρριψη">
+        hello
+      </FilterHeadingContainer>
+    ).baseElement
+  ).toMatchSnapshot();
+});

package/src/FilterHeadingContainer/index.tsx CHANGED Viewed

@@ -1,8 +1,23 @@
 import React from 'react';
 import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
+import CloseButton from '@digigov/react-core/CloseButton';
-export interface FilterHeadingContainerProps extends BaseProps<'div'> { }
+export interface FilterHeadingContainerProps extends BaseProps<'div'> {
+  /**
+   * closeLabel is optional.
+   * This declares the label of the close icon.
+   * @default 'Κλείσιμο'
+   */
+  closeLabel?: string;
+  /**
+   * onClick is optional.
+   * This declares the click event of the close icon.
+   * @default undefined
+   */
+  onClick?: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void;
+}
 /**
  * Use FilterHeadingContainer component inside FilterContainer
  * for filters heading title and close icon(for mobiles).
@@ -12,7 +27,10 @@ export interface FilterHeadingContainerProps extends BaseProps<'div'> { }
 export const FilterHeadingContainer = React.forwardRef<
   HTMLDivElement,
   FilterHeadingContainerProps
->(function FilterHeadingContainer({ className, children, ...props }, ref) {
+>(function FilterHeadingContainer(
+  { onClick, closeLabel = 'Κλείσιμο', className, children, ...props },
+  ref
+) {
   return (
     <Base
       as="div"
@@ -23,6 +41,15 @@ export const FilterHeadingContainer = React.forwardRef<
       {...props}
     >
       {children}
+      {onClick && (
+        <CloseButton
+          onClick={(e) => {
+            onClick(e);
+          }}
+        >
+          {closeLabel}
+        </CloseButton>
+      )}
     </Base>
   );
 });

package/src/FilterOptionsSection/__snapshots__/index.spec.tsx.snap CHANGED Viewed

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 exports[`renders the FilterOptionsSection with no props 1`] = `
 <body>

package/src/FilterSelectedHeading/__snapshots__/index.spec.tsx.snap CHANGED Viewed

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 exports[`renders the FilterSelectedHeading with no props 1`] = `
 <body>

package/src/FilterSelectedSection/__snapshots__/index.test.tsx.snap CHANGED Viewed

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 exports[`renders the FilterSelectedSection with no props 1`] = `
 <body>

package/src/Footer/__snapshots__/index.test.tsx.snap CHANGED Viewed

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 exports[`renders the Footer with no props 1`] = `
 <body>

package/src/FooterContainer/__snapshots__/index.test.tsx.snap CHANGED Viewed

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 exports[`renders the FooterContainer with no props 1`] = `
 <body>

package/src/FooterContent/__snapshots__/index.test.tsx.snap CHANGED Viewed

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 exports[`renders the FooterContent with no props 1`] = `
 <body>

package/src/FooterContentLogos/__snapshots__/index.test.tsx.snap CHANGED Viewed

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 exports[`renders the FooterContentLogos with no props 1`] = `
 <body>

package/src/FooterHeading/__snapshots__/index.test.tsx.snap CHANGED Viewed

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 exports[`renders the FooterHeading with no props 1`] = `
 <body>

package/src/FooterImage/__snapshots__/index.test.tsx.snap CHANGED Viewed

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 exports[`renders the FooterImage with no props 1`] = `
 <body>

package/src/FooterInfo/__snapshots__/index.test.tsx.snap CHANGED Viewed

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 exports[`renders the FooterInfo with no props 1`] = `
 <body>

package/src/FooterInfoSection/__snapshots__/index.test.tsx.snap CHANGED Viewed

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 exports[`renders the FooterInfoSection with grow=false 1`] = `
 <body>

package/src/FooterLink/__snapshots__/index.test.tsx.snap CHANGED Viewed

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 exports[`renders the FooterLink with href prop 1`] = `
 <body>

package/src/FooterList/__snapshots__/index.test.tsx.snap CHANGED Viewed

@@ -1,10 +1,10 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 exports[`renders the FooterList with columns=2 1`] = `
 <body>
   <div>
     <ul
-      class="ds-footer__list--columns-2 ds-footer__list"
+      class="ds-footer__list ds-footer__list--columns-2"
     >
       hello
     </ul>

package/src/FooterListItem/__snapshots__/index.test.tsx.snap CHANGED Viewed

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 exports[`renders the FooterListItem with no props 1`] = `
 <body>

package/src/FooterNavigation/__snapshots__/index.test.tsx.snap CHANGED Viewed

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 exports[`renders the FooterNavigation with no props 1`] = `
 <body>

package/src/FooterNavigationSection/__snapshots__/index.test.tsx.snap CHANGED Viewed

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 exports[`renders the FooterNavigationSection with no props 1`] = `
 <body>

package/src/Form/__snapshots__/index.test.tsx.snap CHANGED Viewed

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 exports[`renders the Form with grid props 1`] = `
 <body>

package/src/FullPageBackground/__snapshots__/index.test.tsx.snap CHANGED Viewed

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 exports[`renders the FullPageBackground with no props 1`] = `
 <body>

package/src/GovGRLogo/__snapshots__/index.test.tsx.snap CHANGED Viewed

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 exports[`renders the GovGRLogo with no props 1`] = `
 <body>

package/src/Grid/__snapshots__/index.test.tsx.snap CHANGED Viewed

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 exports[`renders the Grid with \`container\` props 1`] = `
 <body>

package/src/Header/__snapshots__/index.test.tsx.snap CHANGED Viewed

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 exports[`renders the Header with no props 1`] = `
 <body>

package/src/HeaderContent/__snapshots__/index.test.tsx.snap CHANGED Viewed

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 exports[`renders the HeaderContent with no props 1`] = `
 <body>

package/src/HeaderLogo/__snapshots__/index.test.tsx.snap CHANGED Viewed

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 exports[`renders the HeaderLogo with no props 1`] = `
 <body>

package/src/HeaderNavMenuContent/__snapshots__/index.test.tsx.snap CHANGED Viewed

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 exports[`renders the HeaderNavMenuContent with no props 1`] = `
 <body>

package/src/HeaderSecondaryLogo/__snapshots__/index.test.tsx.snap CHANGED Viewed

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 exports[`renders the HeaderSecondaryLogo with src and alt 1`] = `
 <body>

package/src/HeaderSection/__snapshots__/index.test.tsx.snap CHANGED Viewed

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 exports[`renders the HeaderSection with no props 1`] = `
 <body>

package/src/HeaderTitle/__snapshots__/index.test.tsx.snap CHANGED Viewed

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 exports[`renders the HeaderTitle with href 1`] = `
 <body>

package/src/Heading/__snapshots__/index.test.tsx.snap CHANGED Viewed

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 exports[`renders the Heading with no props 1`] = `
 <body>

package/src/HeadingCaption/__snapshots__/index.test.tsx.snap CHANGED Viewed

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 exports[`renders the HeadingCaption with no props 1`] = `
 <body>

package/src/HellenicRepublicLogo/__snapshots__/index.test.tsx.snap CHANGED Viewed

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 exports[`renders the HellenicRepublicLogo with no props 1`] = `
 <body>

package/src/Hidden/__snapshots__/index.test.tsx.snap CHANGED Viewed

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 exports[`renders the Hidden with \`lgUp\` props 1`] = `
 <body>

package/src/Hint/__snapshots__/index.test.tsx.snap CHANGED Viewed

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 exports[`renders the Hint with fontSize=14 1`] = `
 <body>

package/src/ImageLogo/__snapshots__/index.test.tsx.snap CHANGED Viewed

@@ -1,10 +1,10 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 exports[`renders the Hint with  variant and src props 1`] = `
 <body>
   <div>
     <img
-      class="ds-image-logo-dark ds-print-hidden"
+      class="ds-print-hidden ds-image-logo-dark"
       src="logo.png"
     />
   </div>
@@ -15,7 +15,7 @@ exports[`renders the Hint with src prop 1`] = `
 <body>
   <div>
     <img
-      class="ds-image-logo ds-print-hidden"
+      class="ds-print-hidden ds-image-logo"
       src="logo.png"
     />
   </div>

package/src/ImageLogoSet/__snapshots__/index.test.tsx.snap CHANGED Viewed

@@ -1,14 +1,14 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 exports[`renders the Hint with  variants=[light, dark] and src props 1`] = `
 <body>
   <div>
     <img
-      class="ds-image-logo-light ds-print-hidden"
+      class="ds-print-hidden ds-image-logo-light"
       src="logo--light.png"
     />
     <img
-      class="ds-image-logo-dark ds-print-hidden"
+      class="ds-print-hidden ds-image-logo-dark"
       src="logo--dark.png"
     />
   </div>
@@ -19,7 +19,7 @@ exports[`renders the Hint with  variants=[light] and src props 1`] = `
 <body>
   <div>
     <img
-      class="ds-image-logo-light ds-print-hidden"
+      class="ds-print-hidden ds-image-logo-light"
       src="logo--light.png"
     />
   </div>
@@ -30,11 +30,11 @@ exports[`renders the Hint with src prop 1`] = `
 <body>
   <div>
     <img
-      class="ds-image-logo-dark ds-print-hidden"
+      class="ds-print-hidden ds-image-logo-dark"
       src="logo--dark.png"
     />
     <img
-      class="ds-image-logo-light ds-print-hidden"
+      class="ds-print-hidden ds-image-logo-light"
       src="logo--light.png"
     />
   </div>

package/src/LabelContainer/__snapshots__/index.test.tsx.snap CHANGED Viewed

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 exports[`renders the Label with no props 1`] = `
 <body>

package/src/LabelTitle/__snapshots__/index.test.tsx.snap CHANGED Viewed

@@ -1,11 +1,11 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 exports[`renders the Label with heading  and size l props 1`] = `
 <body>
   <div>
     <span
       aria-level="1"
-      class="ds-heading-lg"
+      class="ds-label__title ds-label__title--lg"
       role="heading"
     >
       hello
@@ -19,7 +19,7 @@ exports[`renders the Label with heading  and size m props 1`] = `
   <div>
     <span
       aria-level="1"
-      class="ds-heading-md"
+      class="ds-label__title ds-label__title--md"
       role="heading"
     >
       hello
@@ -33,7 +33,7 @@ exports[`renders the Label with heading  and size xl props 1`] = `
   <div>
     <span
       aria-level="1"
-      class="ds-heading-xl"
+      class="ds-label__title ds-label__title--xl"
       role="heading"
     >
       hello
@@ -47,7 +47,7 @@ exports[`renders the Label with heading and size s props 1`] = `
   <div>
     <span
       aria-level="1"
-      class="ds-heading-sm"
+      class="ds-label__title ds-label__title--sm"
       role="heading"
     >
       hello
@@ -61,7 +61,7 @@ exports[`renders the Label with heading prop 1`] = `
   <div>
     <span
       aria-level="1"
-      class=""
+      class="ds-label__title"
       role="heading"
     >
       hello
@@ -74,7 +74,7 @@ exports[`renders the Label with size l prop 1`] = `
 <body>
   <div>
     <span
-      class="ds-heading-lg"
+      class="ds-label__title ds-label__title--lg"
     >
       hello
     </span>
@@ -86,7 +86,7 @@ exports[`renders the Label with size m prop 1`] = `
 <body>
   <div>
     <span
-      class="ds-heading-md"
+      class="ds-label__title ds-label__title--md"
     >
       hello
     </span>
@@ -98,7 +98,7 @@ exports[`renders the Label with size s prop 1`] = `
 <body>
   <div>
     <span
-      class="ds-heading-sm"
+      class="ds-label__title ds-label__title--sm"
     >
       hello
     </span>
@@ -110,7 +110,7 @@ exports[`renders the Label with size xl prop 1`] = `
 <body>
   <div>
     <span
-      class="ds-heading-xl"
+      class="ds-label__title ds-label__title--xl"
     >
       hello
     </span>
@@ -122,7 +122,7 @@ exports[`renders the LabelTitle with no props 1`] = `
 <body>
   <div>
     <span
-      class=""
+      class="ds-label__title"
     >
       hello
     </span>

package/src/LabeledText/__snapshots__/index.test.tsx.snap CHANGED Viewed

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 exports[`renders the LabeledText with active false 1`] = `
 <body>
@@ -16,7 +16,7 @@ exports[`renders the LabeledText with active true 1`] = `
 <body>
   <div>
     <span
-      class="ds-labeled-text--active ds-labeled-text"
+      class="ds-labeled-text ds-labeled-text--active"
     >
       hello
     </span>

package/src/Layout/__snapshots__/index.test.tsx.snap CHANGED Viewed

@@ -1,10 +1,10 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 exports[`renders the Layout with no props 1`] = `
 <body>
   <div>
     <div
-      class="ds-layout--full-height ds-layout"
+      class="ds-layout ds-layout--full-height"
     >
       hello
     </div>

package/src/LinkBase/__snapshots__/index.test.tsx.snap CHANGED Viewed

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 exports[`renders the Link with no props 1`] = `
 <body>
@@ -16,7 +16,7 @@ exports[`renders the LinkBase with underline=false 1`] = `
 <body>
   <div>
     <a
-      class="ds-link--no-underline ds-link"
+      class="ds-link ds-link--no-underline"
     >
       hello
     </a>

package/src/LinkBase/index.tsx CHANGED Viewed

@@ -10,18 +10,26 @@ export interface LinkBaseProps extends BaseProps<'a'> {
    * @value false
    */
   underline?: boolean;
+  /**
+   * defaultStyle is optional. The default value is 'true'.
+   * Make it 'false' only if you need to use a link with different style, and the default style clashes over with your
+   * custom styles. For example, BreadcrumbsListItem is a link but it has a different styling.
+   * @value true
+   * @value false
+   */
+  defaultStyle?: boolean;
 }
 /**
  * This component defines a hyperlink, which is used to link from one page to another.
  */
 export const LinkBase = React.forwardRef<HTMLAnchorElement, LinkBaseProps>(
-  function LinkBase({ underline = true, className, children, ...props }, ref) {
+  function LinkBase({ underline = true, defaultStyle = true, className, children, ...props }, ref) {
     return (
       <Base
         as="a"
         ref={ref}
         className={clsx(className, {
-          'ds-link': true,
+          'ds-link': defaultStyle,
           'ds-link--no-underline': !underline,
         })}
         {...props}