@digigov/react-core 2.0.0-rc.5 → 2.0.0-rc.7

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@digigov/react-core",
-  "version": "2.0.0-rc.5",
+  "version": "2.0.0-rc.7",
   "description": "@digigov react core components",
   "author": "GRNET Developers <devs@lists.grnet.gr>",
   "license": "BSD-2-Clause",
   "main": "./cjs/index.js",
   "module": "./index.js",
   "peerDependencies": {
-    "@digigov/css": "2.0.0-rc.5",
-    "@digigov/react-icons": "2.0.0-rc.5",
+    "@digigov/css": "2.0.0-rc.7",
+    "@digigov/react-icons": "2.0.0-rc.7",
     "clsx": "1.1.1",
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0"

package/registry/index.js

@@ -13,13 +13,15 @@ import * as _digigov_react_core_AdminMain from '@digigov/react-core/AdminMain';
 import * as _digigov_react_core_AdminTopSection from '@digigov/react-core/AdminTopSection';
 import * as _digigov_react_core_Aside from '@digigov/react-core/Aside';
 import * as _digigov_react_core_AutoCompleteAssistiveHint from '@digigov/react-core/AutoCompleteAssistiveHint';
+import * as _digigov_react_core_AutoCompleteContainer from '@digigov/react-core/AutoCompleteContainer';
 import * as _digigov_react_core_AutoCompleteInput from '@digigov/react-core/AutoCompleteInput';
 import * as _digigov_react_core_AutoCompleteInputTypeahead from '@digigov/react-core/AutoCompleteInputTypeahead';
+import * as _digigov_react_core_AutoCompleteMultipleInput from '@digigov/react-core/AutoCompleteMultipleInput';
+import * as _digigov_react_core_AutoCompleteMultipleInputContainer from '@digigov/react-core/AutoCompleteMultipleInputContainer';
 import * as _digigov_react_core_AutoCompleteResultList from '@digigov/react-core/AutoCompleteResultList';
 import * as _digigov_react_core_AutoCompleteResultListItem from '@digigov/react-core/AutoCompleteResultListItem';
 import * as _digigov_react_core_AutoCompleteStatus from '@digigov/react-core/AutoCompleteStatus';
-import * as _digigov_react_core_AutoCompleteStatusWrapper from '@digigov/react-core/AutoCompleteStatusWrapper';
-import * as _digigov_react_core_AutoCompleteWrapper from '@digigov/react-core/AutoCompleteWrapper';
+import * as _digigov_react_core_AutoCompleteStatusContainer from '@digigov/react-core/AutoCompleteStatusContainer';
 import * as _digigov_react_core_BackLink from '@digigov/react-core/BackLink';
 import * as _digigov_react_core_BackToTopContainer from '@digigov/react-core/BackToTopContainer';
 import * as _digigov_react_core_BackToTopLimit from '@digigov/react-core/BackToTopLimit';
@@ -271,13 +273,15 @@ export default {
   '@digigov/react-core/AdminTopSection': lazyImport(_digigov_react_core_AdminTopSection),
   '@digigov/react-core/Aside': lazyImport(_digigov_react_core_Aside),
   '@digigov/react-core/AutoCompleteAssistiveHint': lazyImport(_digigov_react_core_AutoCompleteAssistiveHint),
+  '@digigov/react-core/AutoCompleteContainer': lazyImport(_digigov_react_core_AutoCompleteContainer),
   '@digigov/react-core/AutoCompleteInput': lazyImport(_digigov_react_core_AutoCompleteInput),
   '@digigov/react-core/AutoCompleteInputTypeahead': lazyImport(_digigov_react_core_AutoCompleteInputTypeahead),
+  '@digigov/react-core/AutoCompleteMultipleInput': lazyImport(_digigov_react_core_AutoCompleteMultipleInput),
+  '@digigov/react-core/AutoCompleteMultipleInputContainer': lazyImport(_digigov_react_core_AutoCompleteMultipleInputContainer),
   '@digigov/react-core/AutoCompleteResultList': lazyImport(_digigov_react_core_AutoCompleteResultList),
   '@digigov/react-core/AutoCompleteResultListItem': lazyImport(_digigov_react_core_AutoCompleteResultListItem),
   '@digigov/react-core/AutoCompleteStatus': lazyImport(_digigov_react_core_AutoCompleteStatus),
-  '@digigov/react-core/AutoCompleteStatusWrapper': lazyImport(_digigov_react_core_AutoCompleteStatusWrapper),
-  '@digigov/react-core/AutoCompleteWrapper': lazyImport(_digigov_react_core_AutoCompleteWrapper),
+  '@digigov/react-core/AutoCompleteStatusContainer': lazyImport(_digigov_react_core_AutoCompleteStatusContainer),
   '@digigov/react-core/BackLink': lazyImport(_digigov_react_core_BackLink),
   '@digigov/react-core/BackToTopContainer': lazyImport(_digigov_react_core_BackToTopContainer),
   '@digigov/react-core/BackToTopLimit': lazyImport(_digigov_react_core_BackToTopLimit),

package/registry.d.ts

@@ -14,13 +14,15 @@ declare const _default: {
     '@digigov/react-core/AdminTopSection': {};
     '@digigov/react-core/Aside': {};
     '@digigov/react-core/AutoCompleteAssistiveHint': {};
+    '@digigov/react-core/AutoCompleteContainer': {};
     '@digigov/react-core/AutoCompleteInput': {};
     '@digigov/react-core/AutoCompleteInputTypeahead': {};
+    '@digigov/react-core/AutoCompleteMultipleInput': {};
+    '@digigov/react-core/AutoCompleteMultipleInputContainer': {};
     '@digigov/react-core/AutoCompleteResultList': {};
     '@digigov/react-core/AutoCompleteResultListItem': {};
     '@digigov/react-core/AutoCompleteStatus': {};
-    '@digigov/react-core/AutoCompleteStatusWrapper': {};
-    '@digigov/react-core/AutoCompleteWrapper': {};
+    '@digigov/react-core/AutoCompleteStatusContainer': {};
     '@digigov/react-core/BackLink': {};
     '@digigov/react-core/BackToTopContainer': {};
     '@digigov/react-core/BackToTopLimit': {};

package/{cjs/AutoCompleteWrapper → src/AutoCompleteContainer}/__snapshots__/index.test.tsx.snap

@@ -1,16 +1,16 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders the AdminContainer with no props 1`] = `
-<ForwardRef(AutoCompleteWrapper)>
+<ForwardRef(AutoCompleteContainer)>
   <ForwardRef(Base)
     as="div"
-    className="ds-autocomplete__wrapper"
+    className="ds-autocomplete__container"
   >
     <div
-      className="ds-autocomplete__wrapper"
+      className="ds-autocomplete__container"
     >
       hello
     </div>
   </ForwardRef(Base)>
-</ForwardRef(AutoCompleteWrapper)>
+</ForwardRef(AutoCompleteContainer)>
 `;

package/src/{AutoCompleteWrapper → AutoCompleteContainer}/index.test.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 import { mount } from 'enzyme';
 
-import AutoCompleteWrapper from '@digigov/react-core/AutoCompleteWrapper';
+import AutoCompleteContainer from '@digigov/react-core/AutoCompleteContainer';
 
 it('renders the AdminContainer with no props', () => {
   expect(
-    mount(<AutoCompleteWrapper>hello</AutoCompleteWrapper>)
+    mount(<AutoCompleteContainer>hello</AutoCompleteContainer>)
   ).toMatchSnapshot();
 });

package/src/{AutoCompleteWrapper → AutoCompleteContainer}/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
 
-export interface AutoCompleteWrapperProps extends BaseProps<'div'> {
+export interface AutoCompleteContainerProps extends BaseProps<'div'> {
   /**
    * width is optional.
    * Use width prop to define a custom width in your component.
@@ -17,19 +17,19 @@ export interface AutoCompleteWrapperProps extends BaseProps<'div'> {
   width?: '25%' | '33.3%' | '50%' | '66.6%' | '75%' | '100%' | 'full';
 }
 /**
- * AutoCompleteWrapper is a wrapper for autocomplete element.
- * Use AutoCompleteWrapper to wrap autocomplete elements.
+ * AutoCompleteContainer is a wrapper for autocomplete element.
+ * Use AutoCompleteContainer to wrap autocomplete elements.
  */
-export const AutoCompleteWrapper = React.forwardRef<
+export const AutoCompleteContainer = React.forwardRef<
   HTMLDivElement,
-  AutoCompleteWrapperProps
->(function AutoCompleteWrapper({ className, width, children, ...props }, ref) {
+  AutoCompleteContainerProps
+>(function AutoCompleteContainer({ className, width, children, ...props }, ref) {
   return (
     <Base
       as="div"
       ref={ref}
       className={clsx(className, {
-        'ds-autocomplete__wrapper': true,
+        'ds-autocomplete__container': true,
         'ds-!-width-one-quarter': width === '25%',
         'ds-!-width-one-third': width === '33.3%',
         'ds-!-width-one-half': width === '50%',
@@ -44,4 +44,4 @@ export const AutoCompleteWrapper = React.forwardRef<
   );
 });
 
-export default AutoCompleteWrapper;
+export default AutoCompleteContainer;

package/src/AutoCompleteInput/index.test.tsx

@@ -7,22 +7,14 @@ it('renders the AutoCompleteInput with no props', () => {
   expect(mount(<AutoCompleteInput />)).toMatchSnapshot();
 });
 
-it('renders the AutoCompleteInput with showAllValues', () => {
-  expect(mount(<AutoCompleteInput showAllValues />)).toMatchSnapshot();
-});
-
-it('renders the AutoCompleteInput with showAllValues', () => {
-  expect(mount(<AutoCompleteInput showAllValues />)).toMatchSnapshot();
-});
-
-it('renders the AutoCompleteInput with showAllValues isFocused', () => {
+it('renders the AutoCompleteInput with isFocused', () => {
   expect(
-    mount(<AutoCompleteInput isFocused showAllValues />)
+    mount(<AutoCompleteInput isFocused />)
   ).toMatchSnapshot();
 });
 
-it('renders the AutoCompleteInput with showAllValues isFocused name props', () => {
+it('renders the AutoCompleteInput with isFocused and name props', () => {
   expect(
-    mount(<AutoCompleteInput name="some-name" isFocused showAllValues />)
+    mount(<AutoCompleteInput name="some-name" isFocused />)
   ).toMatchSnapshot();
 });

package/src/AutoCompleteInput/index.tsx

@@ -9,14 +9,7 @@ export interface AutoCompleteInputProps extends BaseProps<'input'> {
    * @value false
    */
   isFocused?: boolean;
-  /**
-   * showAllValues is optional. The default value is false.
-   * showAllValues prop is used to change the css input.
-   * @value true
-   * @value false
-   * @default false
-   */
-  showAllValues?: boolean;
+
 }
 /**
  * AutoCompleteInput component is used to display the value that the user is typing.
@@ -26,7 +19,7 @@ export const AutoCompleteInput = React.forwardRef<
   HTMLInputElement,
   AutoCompleteInputProps
 >(function AutoCompleteInput(
-  { name, isFocused, showAllValues = false, className, ...props },
+  { name, isFocused, className, ...props },
   ref
 ) {
   return (
@@ -37,8 +30,6 @@ export const AutoCompleteInput = React.forwardRef<
       ref={ref}
       className={clsx(className, {
         'ds-autocomplete__input': true,
-        'ds-autocomplete__input--default': showAllValues === false,
-        'ds-autocomplete__input--show-all-values': showAllValues,
         'ds-autocomplete__input--focused': isFocused,
       })}
       {...props}

package/src/AutoCompleteMultipleInput/index.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import clsx from 'clsx';
+import Base, { BaseProps } from '@digigov/react-core/Base';
+
+export interface AutoCompleteMultipleInputProps extends BaseProps<'input'> {}
+/**
+ * AutoCompleteMultipleInput is used inside AutoCompleteMultipleInputContainer for multiple values input.
+ */
+export const AutoCompleteMultipleInput = React.forwardRef<
+  HTMLInputElement,
+  AutoCompleteMultipleInputProps
+>(function AutoCompleteMultipleInput({ children, className, ...props }, ref) {
+  return (
+    <Base
+      as="input"
+      type="text"
+      ref={ref}
+      className={clsx(className, {
+        'ds-autocomplete__multi-input': true,
+      })}
+      {...props}
+    >
+      {children}
+    </Base>
+  );
+});
+
+export default AutoCompleteMultipleInput;

package/src/AutoCompleteMultipleInputContainer/index.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import clsx from 'clsx';
+import Base, { BaseProps } from '@digigov/react-core/Base';
+
+export interface AutoCompleteMultipleInputContainerProps
+  extends BaseProps<'div'> {
+  open?: boolean;
+  isFocused?: boolean;
+  numberOfSelected?: 1 | 2 | 3 | 'all';  
+}
+/**
+ * Use AutoCompleteMultipleInputContainer to accept multiple values input.
+ */
+export const AutoCompleteMultipleInputContainer = React.forwardRef<
+  HTMLDivElement,
+  AutoCompleteMultipleInputContainerProps
+>(function AutoCompleteMultipleInputContainer(
+  { numberOfSelected = 'all', open, children, isFocused, className, ...props },
+  ref
+) {
+  return (
+    <Base
+      as="div"
+      ref={ref}
+      className={clsx(className, {
+        'ds-autocomplete__multi-input-container': true,
+        'ds-autocomplete__multi-input-container--focused': isFocused,
+        [`ds-autocomplete__multi-input-container--${numberOfSelected}`]: typeof(numberOfSelected) === 'number' 
+        
+      })}
+      {...props}
+    >
+      {children}
+    </Base>
+  );
+});
+
+export default AutoCompleteMultipleInputContainer;

package/src/AutoCompleteResultList/index.test.tsx

@@ -14,23 +14,3 @@ it('renders the AutoCompleteResultList with isVisible props', () => {
     mount(<AutoCompleteResultList isVisible>Hello</AutoCompleteResultList>)
   ).toMatchSnapshot();
 });
-
-it('renders the AutoCompleteResultList with isVisible  displayMenu="inline props', () => {
-  expect(
-    mount(
-      <AutoCompleteResultList isVisible displayMenu="inline">
-        Hello
-      </AutoCompleteResultList>
-    )
-  ).toMatchSnapshot();
-});
-
-it('renders the AutoCompleteResultList with isVisible displayMenu="overlay props', () => {
-  expect(
-    mount(
-      <AutoCompleteResultList isVisible displayMenu="overlay">
-        Hello
-      </AutoCompleteResultList>
-    )
-  ).toMatchSnapshot();
-});

package/src/AutoCompleteResultList/index.tsx

@@ -13,15 +13,6 @@ export interface AutoCompleteResultListProps extends BaseProps<'ul'> {
    * @default false
    */
   isVisible?: boolean;
-  /**
-   * displayMenu is optional.
-   * Use displayMenu to choose the display of the manue
-   * default value is inline.
-   *
-   * @value 'inline'
-   * @value 'overlay'
-   */
-  displayMenu?: 'inline' | 'overlay';
 }
 /**
  * AutoCompleteResultList component is used for listing items.
@@ -31,7 +22,7 @@ export const AutoCompleteResultList = React.forwardRef<
   HTMLUListElement,
   AutoCompleteResultListProps
 >(function List(
-  { isVisible = false, displayMenu, className, children, ...props },
+  { isVisible = false, className, children, ...props },
   ref
 ) {
   return (
@@ -40,9 +31,6 @@ export const AutoCompleteResultList = React.forwardRef<
       ref={ref}
       className={clsx(className, {
         'ds-autocomplete__menu': true,
-        'ds-autocomplete__menu--inline': displayMenu === 'inline',
-        'ds-autocomplete__menu--overlay': displayMenu === 'overlay',
-        'ds-autocomplete__menu--visible': isVisible,
         'ds-autocomplete__menu--hidden': isVisible === false,
       })}
       {...props}

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

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders the AdminContainer with no props 1`] = `
-<ForwardRef(AutoCompleteStatusWrapper)>
+<ForwardRef(AutoCompleteStatusContainer)>
   <ForwardRef(Base)
     aria-atomic="true"
     aria-live="polite"
@@ -18,5 +18,5 @@ exports[`renders the AdminContainer with no props 1`] = `
       hello
     </div>
   </ForwardRef(Base)>
-</ForwardRef(AutoCompleteStatusWrapper)>
+</ForwardRef(AutoCompleteStatusContainer)>
 `;

package/src/AutoCompleteStatus/index.tsx

@@ -5,12 +5,12 @@ import Base, { BaseProps } from '@digigov/react-core/Base';
 export interface AutoCompleteStatusProps extends BaseProps<'div'> { }
 /**
  * AutoCompleteStatus is a div element for displaying the autocomplete status.
- * Use AutoCompleteStatus inside AutoCompleteStatusWrapper wrapper.
+ * Use AutoCompleteStatus inside AutoCompleteStatusContainer wrapper.
  */
 export const AutoCompleteStatus = React.forwardRef<
   HTMLDivElement,
   AutoCompleteStatusProps
->(function AutoCompleteStatusWrapper({ className, children, ...props }, ref) {
+>(function AutoCompleteStatusContainer({ className, children, ...props }, ref) {
   return (
     <Base
       as="div"

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

@@ -0,0 +1,16 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders the AdminContainer with no props 1`] = `
+<ForwardRef(AutoCompleteStatusContainer)>
+  <ForwardRef(Base)
+    as="div"
+    className="ds-autocomplete__status__container"
+  >
+    <div
+      className="ds-autocomplete__status__container"
+    >
+      hello
+    </div>
+  </ForwardRef(Base)>
+</ForwardRef(AutoCompleteStatusContainer)>
+`;

package/src/AutoCompleteStatusContainer/index.test.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { mount } from 'enzyme';
+
+import AutoCompleteStatusContainer from '@digigov/react-core/AutoCompleteStatusContainer';
+
+it('renders the AdminContainer with no props', () => {
+  expect(
+    mount(<AutoCompleteStatusContainer>hello</AutoCompleteStatusContainer>)
+  ).toMatchSnapshot();
+});

package/src/AutoCompleteStatusContainer/index.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import clsx from 'clsx';
+import Base, { BaseProps } from '@digigov/react-core/Base';
+
+export interface AutoCompleteStatusContainerProps extends BaseProps<'div'> {}
+/**
+ * AutoCompleteStatusContainer is a wrapper for autocomplete element.
+ * Use AutoCompleteStatusContainer to wrap autocomplete elements.
+ */
+export const AutoCompleteStatusContainer = React.forwardRef<
+  HTMLDivElement,
+  AutoCompleteStatusContainerProps
+>(function AutoCompleteStatusContainer({ className, children, ...props }, ref) {
+  return (
+    <Base
+      as="div"
+      ref={ref}
+      className={clsx(className, {
+        'ds-autocomplete__status__container': true,
+      })}
+      {...props}
+    >
+      {children}
+    </Base>
+  );
+});
+
+export default AutoCompleteStatusContainer;

package/src/Base/index.tsx

@@ -235,11 +235,11 @@ export const Base: BaseComponent = React.forwardRef(function Base<
         'ds-print-visible-block': printVisible === 'block',
         'ds-print-visible-inline': printVisible === 'inline',
         'ds-hidden': !!hidden,
-        'ds-hidden-xs--up': !!xsUpHidden,
-        'ds-hidden-sm--up': !!smUpHidden,
-        'ds-hidden-md--up': !!mdUpHidden,
-        'ds-hidden-lg--up': !!lgUpHidden,
-        'ds-hidden-xl--up': !!xlUpHidden,
+        'ds-hidden-xs-up': !!xsUpHidden,
+        'ds-hidden-sm-up': !!smUpHidden,
+        'ds-hidden-md-up': !!mdUpHidden,
+        'ds-hidden-lg-up': !!lgUpHidden,
+        'ds-hidden-xl-up': !!xlUpHidden,
         'ds-hidden-xs': !!xsHidden,
         'ds-hidden-sm': !!smHidden,
         'ds-hidden-md': !!mdHidden,

package/src/DropdownContent/index.tsx

@@ -11,6 +11,14 @@ export interface DropdownContentProps extends BaseProps<'div'> {
    * @default true
    */
   fullWidth?: boolean;
+  /**
+   * scrollable prop is optional.
+   * If true, the dropdown content will have limited scrollable height.
+   * @value true
+   * @value false
+   * @default false
+   */
+  scrollable?: boolean;
 }
 /**
  * You should use DropdownContent component inside Dropdown component.
@@ -19,7 +27,7 @@ export const DropdownContent = React.forwardRef<
   HTMLDivElement,
   DropdownContentProps
 >(function DropdownContent(
-  { className, children, fullWidth = true, ...props },
+  {fullWidth = true, scrollable, className, children, ...props },
   ref
 ) {
   return (
@@ -29,6 +37,7 @@ export const DropdownContent = React.forwardRef<
       className={clsx(className, {
         'ds-dropdown__content': true,
         'ds-dropdown__content--full-width': fullWidth,
+        'ds-dropdown__content--scrollable': scrollable,
       })}
       {...props}
     >

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

@@ -4,10 +4,10 @@ exports[`renders the FooterContentLogos with no props 1`] = `
 <ForwardRef(FooterContentLogos)>
   <ForwardRef(Base)
     as="div"
-    className="ds-footer__content--logos"
+    className="ds-footer__content__logos"
   >
     <div
-      className="ds-footer__content--logos"
+      className="ds-footer__content__logos"
     >
       hello
     </div>

package/src/FooterContentLogos/index.tsx

@@ -17,7 +17,7 @@ export const FooterContentLogos = React.forwardRef<
       as="div"
       ref={ref}
       className={clsx(className, {
-        'ds-footer__content--logos': true,
+        'ds-footer__content__logos': true,
       })}
       {...props}
     >

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

@@ -10,7 +10,7 @@ exports[`renders the Hidden with \`lgUp\` props 1`] = `
     xsUpHidden={false}
   >
     <div
-      className="ds-hidden-lg--up"
+      className="ds-hidden-lg-up"
     >
       <div>
         hello
@@ -30,7 +30,7 @@ exports[`renders the Hidden with \`mdUp\` props 1`] = `
     xsUpHidden={false}
   >
     <div
-      className="ds-hidden-md--up"
+      className="ds-hidden-md-up"
     >
       <div>
         hello
@@ -50,7 +50,7 @@ exports[`renders the Hidden with \`smUp\` props 1`] = `
     xsUpHidden={false}
   >
     <div
-      className="ds-hidden-sm--up"
+      className="ds-hidden-sm-up"
     >
       <div>
         hello
@@ -70,7 +70,7 @@ exports[`renders the Hidden with \`xlUp\` props 1`] = `
     xsUpHidden={false}
   >
     <div
-      className="ds-hidden-xl--up"
+      className="ds-hidden-xl-up"
     >
       <div>
         hello
@@ -89,7 +89,7 @@ exports[`renders the Hidden with \`xsUp\` props 1`] = `
     xsUpHidden={true}
   >
     <div
-      className="ds-hidden-xs--up"
+      className="ds-hidden-xs-up"
     >
       <div>
         hello

package/src/Hint/index.tsx

@@ -29,8 +29,8 @@ export const Hint = React.forwardRef<HTMLParagraphElement, HintProps>(
         className={clsx(className, {
           'ds-hint': true,
           'ds-hint--break-words': breakWords,
-          'ds-hint-lg': size === 'lg',
-          'ds-hint-sm': size === 'sm',
+          'ds-hint--lg': size === 'lg',
+          'ds-hint--sm': size === 'sm',
         })}
         {...props}
       >

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

@@ -7,12 +7,12 @@ exports[`renders the Hint with  variant and src props 1`] = `
 >
   <ForwardRef(Base)
     as="img"
-    className="ds-image-logo--dark"
+    className="ds-image-logo-dark"
     printHidden={true}
     src="logo.png"
   >
     <img
-      className="ds-image-logo--dark ds-print-hidden"
+      className="ds-image-logo-dark ds-print-hidden"
       src="logo.png"
     />
   </ForwardRef(Base)>

package/src/ImageLogo/index.tsx

@@ -23,7 +23,6 @@ export const ImageLogo = React.forwardRef<HTMLImageElement, ImageLogoProps>(
     { lang, src, variant, className, children, ...props },
     ref
   ) {
-    console.log('src is', src);
     return (
       <>
         <Base
@@ -33,7 +32,7 @@ export const ImageLogo = React.forwardRef<HTMLImageElement, ImageLogoProps>(
           printHidden
           className={clsx(className, {
             'ds-image-logo': variant === undefined,
-            [`ds-image-logo--${variant}`]: variant !== undefined,
+            [`ds-image-logo-${variant}`]: variant !== undefined,
           })}
           {...props}
         />