@popsure/dirty-swan 0.28.10 → 0.29.0

package/src/lib/components/comparisonTable/index.stories.mdx

@@ -75,6 +75,11 @@ export const ComparisonTableWithData = () => {
           id: 1,
           key: 'name',
           label: 'Films',
+          render: (value) => (
+            <TableButton onClick={() => {}}>
+              {value}
+            </TableButton>
+          ),
         },
         {
           id: 2,
@@ -316,6 +321,11 @@ export const ComparisonTableWithData = () => {
           id: 1,
           key: 'name',
           label: 'Films',
+          render: (value) => (
+            <TableButton onClick={() => {}}>
+              {value}
+            </TableButton>
+          ),
         },
         {
           id: 2,

package/src/lib/components/input/currency/index.test.tsx

@@ -53,4 +53,56 @@ describe('Currency input component', () => {
     await user.type(input, '1234567..34.4');
     expect(input.value).toBe('1 234 567.34');
   });
+
+  it('Should have correct selection start when no spaces are added', async () => {
+    const { input, user } = setup();
+
+    await user.type(input, '123');
+    // Should be: 123|
+    expect(input.selectionStart).toBe(3);
+  });
+
+  it('Should have correct selection start when spaces are added', async () => {
+    const { input, user } = setup();
+
+    await user.type(input, '1234');
+    // Should be: 123 4|
+    expect(input.selectionStart).toBe(5);
+  });
+
+  it('Should have correct selection start when typing in middle of input', async () => {
+    const { input, user } = setup();
+
+    await user.type(input, '123{arrowleft}4');
+
+    // Should be: 1 24|3
+    expect(input.selectionStart).toBe(4);
+  });
+
+  it('Should have correct selection start when typing in beginning of input', async () => {
+    const { input, user } = setup();
+
+    await user.type(input, '123{arrowleft}{arrowleft}{arrowleft}4');
+
+    // Should be: 4 |123
+    expect(input.selectionStart).toBe(2);
+  });
+
+  it('Should have correct selection start when typing in input and has currency values', async () => {
+    const { input, user } = setup();
+
+    await user.type(input, '123.2{arrowleft}{arrowleft}{arrowleft}24');
+
+    // Should be: 12 24|3.2
+    expect(input.selectionStart).toBe(5);
+  });
+
+  it('Should have correct selection start when deleting', async () => {
+    const { input, user } = setup();
+
+    await user.type(input, '12345{arrowleft}{backspace}67');
+
+    // Should be: 123 67|5
+    expect(input.selectionStart).toBe(6);
+  });
 });

package/src/lib/components/input/currency/index.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 
 import { formatInput, reverseFormatInput } from './format';
 import Input, { InputProps } from '..';
@@ -13,6 +13,8 @@ const CurrencyInput = ({
   placeholder?: string;
   onChange?: (value: number) => void;
 } & Omit<InputProps, 'onChange' | 'value' | 'ref'>) => {
+  const inputRef = useRef<HTMLInputElement | null>(null);
+  const [cursor, setCursor] = useState<number | null>(null);
   const [shadowValue, setShadowValue] = useState('');
 
   const formattedShadowValue = formatInput(
@@ -37,12 +39,26 @@ const CurrencyInput = ({
     // eslint-disable-next-line
   }, [shadowValue]);
 
+  useEffect(() => {
+    if (!inputRef.current || !cursor) {
+      return;
+    }
+
+    const cursorDiff =  String(formattedShadowValue).length - String(shadowValue).length;
+    const newCursor = cursorDiff + cursor;
+
+    inputRef.current.selectionStart = newCursor;
+    inputRef.current.selectionEnd = newCursor;
+  },[cursor, formattedShadowValue, shadowValue])
+
   return (
     <Input
       prefix="€"
+      ref={inputRef}
       type="string"
       value={formattedShadowValue}
       onChange={(e) => {
+        setCursor(e.target.selectionStart);
         setShadowValue(e.target.value);
       }}
       {...props}

package/src/lib/components/modal/bottomModal/index.tsx

@@ -5,6 +5,7 @@ import styles from './style.module.scss';
 
 import imageClose from './img/close.svg';
 import useOnClose from '../hooks/useOnClose';
+import classNames from 'classnames';
 
 export default ({
   title,
@@ -54,7 +55,10 @@ export default ({
         style={{ top: `${containerXOffset}px` }}
         onClick={handleContainerClick}
       >
-        <div className={styles.header}>
+        <div className={classNames(styles.header, {
+          'jc-between': !!title,
+          'jc-end': !title
+        })}>
           <div className={`p-h4 ${styles.title}`}>{title}</div>
           {dismissible && (
             <button

package/src/lib/components/modal/bottomModal/style.module.scss

@@ -97,7 +97,6 @@
   height: 60px;
 
   display: flex;
-  justify-content: space-between;
   align-items: center;
 
   padding: 0 16px;

package/src/lib/components/modal/index.ts

@@ -3,7 +3,7 @@ import RegularModal from './regularModal';
 import BottomOrRegularModal from './bottomOrRegularModal';
 
 export interface Props {
-  title: string;
+  title?: string;
   isOpen: boolean;
   children: React.ReactNode;
   onClose: () => void;

package/src/lib/components/modal/regularModal/index.tsx

@@ -6,6 +6,7 @@ import useOnClose from '../hooks/useOnClose';
 import styles from './style.module.scss';
 
 import imageClose from './img/close.svg';
+import classNames from 'classnames';
 
 export default ({
   title,
@@ -44,8 +45,11 @@ export default ({
           className={styles.body}
           onClick={handleContainerClick}
         >
-          <div className={styles.header}>
-            <div className={`p-h2 ${styles.title}`}>{title}</div>
+          <div className={classNames(styles.header, {
+            'jc-between': !!title,
+            'jc-end': !title
+          })}>
+            {title && <div className={`p-h2 ${styles.title}`}>{title}</div>}
             {dismissible && (
               <button
                 type="button"

package/src/lib/components/modal/regularModal/style.module.scss

@@ -102,7 +102,6 @@
 
 .header {
   display: flex;
-  justify-content: space-between;
   align-items: center;
 
   padding: 24px 24px 0 24px;

package/src/lib/scss/private/components/_buttons.scss

@@ -88,6 +88,11 @@
       outline: none;
       box-shadow: 0 0 0 2px rgba($color: $ds-primary-500, $alpha: 0.5);
     }
+
+    &-grey {
+      @extend .p-btn--secondary;
+      background-color: $ds-primary-50;
+    }
   }
 
   &--danger {

package/src/lib/scss/private/components/button.stories.mdx

@@ -52,6 +52,22 @@ You are looking at the css definition of the Button component, if you want you c
   <button className="p-btn--secondary p-btn--loading">Secondary button</button>
 </Preview>
 
+## Secondary grey button
+
+### Default
+
+<Preview>
+  <button className="p-btn--secondary-grey">Secondary grey button</button>
+</Preview>
+
+### Disabled
+
+<Preview>
+  <button className="p-btn--secondary-grey" disabled={true}>
+    Secondary grey button
+  </button>
+</Preview>
+
 ## Danger button
 
 ### Default