@popsure/dirty-swan 0.41.0-alpha → 0.41.0-alpha.2

package/src/lib/components/downloadButton/index.tsx

@@ -1,7 +1,6 @@
-import Button from '../button';
+import { Button } from '../button';
 import { DownloadStatus } from '../../models/download';
-import downloadIcon from './icons/download.svg';
-import { CheckIcon } from '../icon/icons';
+import { CheckIcon, DownloadIcon } from '../icon/icons';
 import styles from './style.module.scss';
 
 export interface DownloadButtonProps {
@@ -14,20 +13,22 @@ export interface DownloadButtonProps {
 const InitialButton = ({ onDownload }: { onDownload: () => void }) => (
   <Button
     className={`w100 ${styles.button}`}
-    buttonTitle="Download"
-    leftIcon={{ src: downloadIcon, alt: 'download arrow icon' }}
+    leftIcon={<DownloadIcon />}
     onClick={onDownload}
     data-cy="download-documents-button"
-  />
+  >
+    Download
+  </Button>
 );
 
 // TODO: Allow setting loading to true to display text
 const GeneratingButton = () => (
   <Button
     className={`w100 ${styles.button}`}
-    buttonTitle="Generating"
     loading={true}
-  />
+  >
+    Generating
+  </Button>
 );
 
 const CompletedChip = () => (

package/src/lib/components/icon/icons.stories.tsx

@@ -1,7 +1,7 @@
 import { ChangeEvent, useState } from 'react';
 import { Input } from '../input';
 import * as icons from './icons';
-import Button from '../button';
+import { Button } from '../button';
 import classNames from 'classnames';
 import styles from './style.module.scss';
 
@@ -45,7 +45,9 @@ export const IconsList = () => {
           placeholder='Search icon'
           value={value} 
         />
-        <Button className='w30' disabled={!value} buttonTitle='Clear search' onClick={clearSearch} />
+        <Button className='w30' disabled={!value} onClick={clearSearch}>
+          Clear search
+        </Button>
         </div>
       </div>
 

package/src/lib/components/toast/index.stories.tsx

@@ -1,6 +1,6 @@
 import classNames from 'classnames';
 import { Toast, ToastProps, ToastType, Toaster, toast } from '.';
-import Button from '../button';
+import { Button } from '../button';
 import styles from './style.module.scss';
 
 const toastTypes: ToastType[] = ['success', 'warning', 'error', 'information'];
@@ -87,10 +87,7 @@ export const ToastStory = ({ title, description, action, type, duration }: Toast
       </div>
       <Toaster />
 
-      <Button
-        buttonTitle='Click here to trigger toast'
-        onClick={showToast}
-      />
+      <Button onClick={showToast}>Click here to trigger toast</Button>
     </>
   );
 };

package/src/lib/index.tsx

@@ -28,7 +28,7 @@ import {
   InfoCard,
   CardButton,
 } from './components/cards';
-import Button from './components/button';
+import { Button } from './components/button';
 import { AutoSuggestMultiSelect } from './components/input/autoSuggestMultiSelect';
 import Chip from './components/chip';
 import { AutoSuggestInput } from './components/input/autoSuggestInput';

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

@@ -12,13 +12,14 @@
 }
 
 .p-btn {
-  display: inline-block;
-
+  display: inline-flex;
+  align-items: center;
+  
   position: relative;
   cursor: pointer;
 
   height: 48px;
-  padding: 12px 24px;
+  padding: 0 24px;
 
   line-height: 24px;
 
@@ -37,6 +38,12 @@
   &[disabled] {
     cursor: default;
     opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  &--icon-only {
+    width: 48px;
+    padding: 0;
   }
 
   &--primary {
@@ -95,6 +102,20 @@
       @extend .p-btn--secondary;
       background-color: $ds-primary-50;
     }
+
+    &-white {
+      @extend .p-btn--secondary;
+      background-color: $ds-white;
+    }
+
+    &-inverted {
+      @extend .p-btn--secondary;
+      color: $ds-white;
+
+      &:hover, &:focus {
+        background-color: $ds-primary-700;
+      }
+    }
   }
 
   &--danger {
@@ -122,30 +143,28 @@
     }
   }
 
-  &--loading {
-    color: transparent;
-    cursor: default;
-
-    opacity: 1 !important;
-
-    &::before {
-      content: '';
-
-      $size: 26px;
-
-      position: absolute;
+  &--success {
+    @extend .p-btn;
+    background-color: $ds-green-500;
+    color: white;
 
-      width: $size;
-      height: $size;
+    &:hover {
+      background-color: $ds-green-700;
 
-      left: calc(50% - 13px);
-      top: calc(50% - 13px);
+      @include p-size-mobile {
+        background-color: $ds-green-500;
+      }
+    }
 
-      border-radius: 50%;
-      border: 2px solid rgba($color: #ffffff, $alpha: 0.5);
-      border-left-color: white;
+    &[disabled] {
+      background-color: $ds-green-300;
+      opacity: 1;
+    }
 
-      animation: spinner-rotate 0.9s infinite;
+    &:focus {
+      outline: none;
+      box-shadow: 0 0 0 1px white,
+        0 0 0 3px rgba($color: $ds-primary-500, $alpha: 0.5);
     }
   }
 
@@ -155,7 +174,7 @@
     color: $ds-primary-500;
     background-color: transparent;
 
-    border: 1px dashed $ds-primary-300;
+    border: 1px solid $ds-primary-300;
 
     &:hover {
       color: $ds-primary-700;
@@ -170,7 +189,33 @@
 
     &:focus {
       color: $ds-primary-700;
-      border-color: $ds-primary-700;
+      outline: none;
+      box-shadow: 0 0 0 1px white,
+        0 0 0 3px rgba($color: $ds-primary-500, $alpha: 0.5);
+    }
+
+    &-white {
+      @extend .p-btn;
+
+      color: $ds-white;
+      border: 1px solid $ds-white;
+      background-color: transparent;
+
+      &:hover {
+        background-color: $ds-primary-700;
+        border-color: $ds-primary-700;
+      }
+
+      &[disabled] {
+        background-color: transparent;
+        opacity: 0.5;
+      }
+
+      &:focus {
+        outline: none;
+        box-shadow: 0 0 0 1px white,
+          0 0 0 3px rgba($color: $ds-primary-500, $alpha: 0.5);
+      }
     }
 
     &-grey {
@@ -179,7 +224,7 @@
       color: $ds-grey-500;
       background-color: transparent;
 
-      border: 1px dashed $ds-grey-400;
+      border: 1px solid $ds-grey-400;
 
       &:hover {
         color: $ds-grey-600;
@@ -198,4 +243,40 @@
       }
     }
   }
+
+  &--loading {
+    color: transparent;
+    cursor: default;
+
+    opacity: 1 !important;
+
+    &::before {
+      content: '';
+
+      $size: 26px;
+
+      position: absolute;
+
+      width: $size;
+      height: $size;
+
+      left: calc(50% - 13px);
+      top: calc(50% - 13px);
+
+      border-radius: 50%;
+      border: 2px solid rgba($color: #ffffff, $alpha: 0.5);
+      border-left-color: white;
+
+      animation: spinner-rotate 0.9s infinite;
+    }
+
+    &.p-btn--secondary-grey,
+    &.p-btn--secondary-white {
+      &::before {
+      border-color: rgba($color: $ds-primary-500, $alpha: 0.5);
+      border-left-color: $ds-primary-500;
+      }
+    }
+  }
+
 }

package/dist/cjs/lib/components/button/icons/index.d.ts

@@ -1,9 +0,0 @@
-declare const purpleSend: {
-    src: string;
-    alt: string;
-};
-declare const whiteSend: {
-    src: string;
-    alt: string;
-};
-export { purpleSend, whiteSend };

package/dist/esm/lib/components/button/icons/index.d.ts

@@ -1,9 +0,0 @@
-declare const purpleSend: {
-    src: string;
-    alt: string;
-};
-declare const whiteSend: {
-    src: string;
-    alt: string;
-};
-export { purpleSend, whiteSend };

package/src/lib/components/button/icons/index.ts

@@ -1,14 +0,0 @@
-import purpleSendImage from './send-purple.svg';
-import whiteSendImage from './send-white.svg';
-
-const purpleSend = {
-  src: purpleSendImage,
-  alt: 'Paper plane',
-};
-
-const whiteSend = {
-  src: whiteSendImage,
-  alt: 'Paper plane',
-};
-
-export { purpleSend, whiteSend };

package/src/lib/components/button/icons/send-purple.svg

@@ -1,4 +0,0 @@
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M18.3334 1.66667L9.16675 10.8333" stroke="#8E8CEE" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
-<path d="M18.3334 1.66667L12.5001 18.3333L9.16675 10.8333L1.66675 7.5L18.3334 1.66667Z" stroke="#8E8CEE" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
-</svg>

package/src/lib/components/button/icons/send-white.svg

@@ -1,4 +0,0 @@
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M18.3334 1.66667L9.16675 10.8333" stroke="#FFFFFF" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
-<path d="M18.3334 1.66667L12.5001 18.3333L9.16675 10.8333L1.66675 7.5L18.3334 1.66667Z" stroke="#FFFFFF" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
-</svg>

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

@@ -1,142 +0,0 @@
-import { Meta, Preview } from '@storybook/addon-docs/blocks';
-
-import Button from '.';
-import { purpleSend, whiteSend } from './icons';
-
-<Meta title="JSX/Button" />
-
-# Button
-
-Buttons allow users to take actions, and make choices, with a single tap. Buttons communicate actions that users can take.
-
-You are looking at the JSX definition of the Button component, if you want you can use the [css alternative](?path=/story/css-components-button--page)
-
-<Preview>
-  <iframe
-    width="100%"
-    height="450"
-    src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FMKs4cbojdVOBKUxv7okb93%2FDirty-Swan-Pattern-Library%3Fnode-id%3D251%253A26"
-    allowFullScreen
-  ></iframe>
-</Preview>
-
-| attribute   | unit                                       | description                                             | default value | required |
-| ----------- | ------------------------------------------ | ------------------------------------------------------- | ------------- | -------- |
-| buttonTitle | string                                     | The title text that needs to be displayed               | n/a           | true     |
-| buttonType  | 'primary' 'secondary'                      | Button type will influence the look of the button       | 'primary'     | false    |
-| leftIcon    | [Icon](?path=/story/jsx-button--page#icon) | Icon displayed left side of the button (w:20px, h:20px) | n/a           | false    |
-| loading     | boolean                                    | Wether the button should display a loading spinner      | false         | false    |
-
-<Preview>
-  <>
-    <h1 className="p-h1">Primary button</h1>
-    <h4 className="p-h4 mt24">Default</h4>
-    <Button className="wmn3 mt8" buttonTitle="Click me" />
-    <h4 className="p-h4 mt24">Loading</h4>
-    <Button className="wmn3 mt8" buttonTitle="Click me" loading={true} />
-    <h4 className="p-h4 mt24">Disabled</h4>
-    <Button className="wmn3 mt8" buttonTitle="Click me" disabled={true} />
-    <h4 className="p-h4 mt24">With left icon</h4>
-    <Button className="wmn3 mt8" buttonTitle="Click me" leftIcon={whiteSend} />
-    <h1 className="p-h1 mt32">Secondary button</h1>
-    <h4 className="p-h4 mt24">Default</h4>
-    <Button
-      className="wmn3 mt8"
-      buttonTitle="Click me"
-      buttonType="secondary"
-    />
-    <h4 className="p-h4 mt24">Loading</h4>
-    <Button
-      className="wmn3 mt8"
-      buttonTitle="Click me"
-      buttonType="secondary"
-      loading={true}
-    />
-    <h4 className="p-h4 mt24">Disabled</h4>
-    <Button
-      className="wmn3 mt8"
-      buttonTitle="Click me"
-      buttonType="secondary"
-      disabled={true}
-    />
-    <h4 className="p-h4 mt24">With left icon</h4>
-    <Button
-      className="wmn3 mt8"
-      buttonTitle="Click me"
-      buttonType="secondary"
-      leftIcon={purpleSend}
-    />
-    <h1 className="p-h1 mt32">Secondary grey button</h1>
-    <h4 className="p-h4 mt24">Default</h4>
-    <Button
-      className="wmn3 mt8"
-      buttonTitle="Click me"
-      buttonType="secondaryGrey"
-    />
-    <h4 className="p-h4 mt24">Disabled</h4>
-    <Button
-      className="wmn3 mt8"
-      buttonTitle="Click me"
-      buttonType="secondaryGrey"
-      disabled={true}
-    />
-    <h4 className="p-h4 mt24">With left icon</h4>
-    <Button
-      className="wmn3 mt8"
-      buttonTitle="Click me"
-      buttonType="secondaryGrey"
-      leftIcon={purpleSend}
-    />
-    <h1 className="p-h1 mt32">Outline button</h1>
-    <h4 className="p-h4 mt24">Default</h4>
-    <Button className="wmn3 mt8" buttonTitle="Click me" buttonType="outline" />
-    <h4 className="p-h4 mt24">Disabled</h4>
-    <Button
-      className="wmn3 mt8"
-      buttonTitle="Click me"
-      buttonType="outline"
-      disabled={true}
-    />
-    <h4 className="p-h4 mt24">With left icon</h4>
-    <Button
-      className="wmn3 mt8"
-      buttonTitle="Click me"
-      buttonType="outline"
-      leftIcon={purpleSend}
-    />
-    <h1 className="p-h1 mt32">Outline Grey button</h1>
-    <h4 className="p-h4 mt24">Default</h4>
-    <Button
-      className="wmn3 mt8"
-      buttonTitle="Click me"
-      buttonType="outlineGrey"
-    />
-    <h4 className="p-h4 mt24">Disabled</h4>
-    <Button
-      className="wmn3 mt8"
-      buttonTitle="Click me"
-      buttonType="outlineGrey"
-      disabled={true}
-    />
-    <h4 className="p-h4 mt24">With left icon</h4>
-    <Button
-      className="wmn3 mt8"
-      buttonTitle="Click me"
-      buttonType="outlineGrey"
-      leftIcon={purpleSend}
-    />
-  </>
-</Preview>
-
-# Models
-
-## Icon
-
-The icon object is defined with the following poperties
-
-```typescript
-export interface Icon {
-  src: string; // source of the image
-  alt: string; // alternate text if the image can't be displayed
-}
-```

package/src/lib/components/button/styles.module.scss

@@ -1,5 +0,0 @@
-.content-container {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}

package/src/lib/components/downloadButton/icons/download.svg

@@ -1,5 +0,0 @@
-<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 12.5V15.8333C18 16.2754 17.8244 16.6993 17.5118 17.0118C17.1993 17.3244 16.7754 17.5 16.3333 17.5H4.66667C4.22464 17.5 3.80072 17.3244 3.48816 17.0118C3.17559 16.6993 3 16.2754 3 15.8333V12.5" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M6.33325 8.33301L10.4999 12.4997L14.6666 8.33301" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M10.5 12.5V2.5" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>