@popsure/dirty-swan 0.33.5 → 0.34.0

package/src/lib/components/cards/cardWithTopIcon/index.stories.tsx

@@ -0,0 +1,85 @@
+import { CardWithTopIcon, CardWithTopIconProps } from '.';
+import { images } from '../../../util/images';
+
+const story = {
+  title: 'JSX/Cards/CardWithTopIcon',
+  component: CardWithTopIcon,
+  argTypes: {
+    title: {
+      defaultValue: 'Lorem Ipsum',
+      description: 'Title text that needs to be displayed',
+    },
+    children: {
+      type: 'text',
+      defaultValue: 'Mountain or rock climbing, Bouldering, Martial arts, Extreme sports, Scuba diving, Sky diving, Bungee jumping, Mountain or rock climbing, Bouldering, Martial arts,',
+      description: 'Content that is displayed inside the card',
+    },
+    state: {
+      defaultValue: 'actionable',
+      description: 'State that describe the interation with the card',
+    },
+    topIcon: {
+      defaultValue: {
+        src: images.mortgage,
+        alt: 'Image alt'
+      },
+      description: 'Icon displayed on the top of the card.',
+    },
+    topIconSize: {
+      defaultValue: {
+        width: 48,
+        height: 48
+      },
+      description: 'Size of the top icon',
+    },
+    rightIcon: {
+      defaultValue: 'arrow',
+      description: 'Icon displayed on the top right corner of the card',
+    },
+    cardSize: {
+      control: { type: 'select' },
+      defaultValue: 'medium',
+      description: 'Size of the card'
+    },
+    dropshadow: {
+      defaultValue: true,
+      description: 'If the card should have a box-shadow or not',
+    },
+    className: {
+      defaultValue: 'ws6',
+      type: 'text',
+      description: 'Class name for most top parent element',
+    },
+  },
+};
+
+export const CardWithTopIconStory = ({
+  title,
+  dropshadow,
+  cardSize,
+  children,
+  className,
+  topIcon,
+  topIconSize,
+  rightIcon,
+  state,
+}: CardWithTopIconProps) => (
+  <CardWithTopIcon
+    cardSize={cardSize}
+    className={className}
+    dropshadow={dropshadow}
+    state={state}
+    topIcon={topIcon}
+    topIconSize={topIconSize}
+    rightIcon={rightIcon}
+    title={title}
+  >
+    <p className="p-p mt16 tc-grey-600">
+      {children}
+    </p>
+  </CardWithTopIcon>
+);
+
+CardWithTopIconStory.storyName = "CardWithTopIcon";
+
+export default story;

package/src/lib/components/cards/cardWithTopIcon/index.tsx

@@ -3,7 +3,14 @@ import { Icon, arrowRight, IconSize } from '../icons';
 
 import styles from './style.module.scss';
 
-export default ({
+export type CardWithTopIconProps = CardProps & {
+  topIcon: Icon;
+  topIconSize: IconSize;
+  cardSize?: 'small' | 'medium' | 'big';
+  rightIcon?: 'arrow' | Icon;
+};
+
+export const CardWithTopIcon = ({
   className,
   title,
   cardSize = 'medium',
@@ -14,12 +21,7 @@ export default ({
   state = 'actionable',
   dropshadow = true,
   ...props
-}: CardProps & {
-  topIcon: Icon;
-  topIconSize: IconSize;
-  cardSize?: 'small' | 'medium' | 'big';
-  rightIcon?: 'arrow' | Icon;
-}) => {
+}: CardWithTopIconProps) => {
   const cardStyle = `d-flex fd-column ai-center ${className} ${associatedClassForCardState(
     state,
     dropshadow

package/src/lib/components/cards/cardWithTopLeftIcon/index.stories.tsx

@@ -0,0 +1,73 @@
+import { CardWithTopLeftIcon, CardWithTopLeftIconProps } from '.';
+import { images } from '../../../util/images';
+
+const story = {
+  title: 'JSX/Cards/CardWithTopLeftIcon',
+  component: CardWithTopLeftIcon,
+  argTypes: {
+    title: {
+      defaultValue: 'Lorem Ipsum',
+      description: 'Title text that needs to be displayed',
+    },
+    children: {
+      type: 'text',
+      defaultValue: 'Mountain or rock climbing, Bouldering, Martial arts, Extreme sports, Scuba diving, Sky diving, Bungee jumping, Mountain or rock climbing, Bouldering, Martial arts,',
+      description: 'Content that is displayed inside the card',
+    },
+    state: {
+      defaultValue: 'actionable',
+      description: 'State that describe the interation with the card',
+    },
+    leftIcon: {
+      defaultValue: 'logo',
+      description: 'Icon displayed on the left of the card.',
+    },
+    rightIcon: {
+      defaultValue: 'arrow',
+      description: 'Icon displayed on the top right corner of the card',
+    },
+    cardSize: {
+      control: { type: 'select' },
+      defaultValue: 'medium',
+      description: 'Size of the card'
+    },
+    dropshadow: {
+      defaultValue: true,
+      description: 'If the card should have a box-shadow or not',
+    },
+    className: {
+      defaultValue: '',
+      type: 'text',
+      description: 'Class name for most top parent element',
+    },
+  },
+};
+
+export const CardWithTopLeftIconStory = ({
+  title,
+  dropshadow,
+  children,
+  className,
+  cardSize,
+  leftIcon,
+  rightIcon,
+  state,
+}: CardWithTopLeftIconProps) => {
+  return (
+    <CardWithTopLeftIcon
+      cardSize={cardSize}
+      className={className}
+      dropshadow={dropshadow}
+      state={state}
+      leftIcon={leftIcon}
+      rightIcon={rightIcon}
+      title={title}
+    >
+      {children}
+    </CardWithTopLeftIcon>
+  );
+}
+
+CardWithTopLeftIconStory.storyName = "CardWithTopLeftIcon";
+
+export default story;

package/src/lib/components/cards/cardWithTopLeftIcon/index.tsx

@@ -18,7 +18,13 @@ const containerStyleFromTitleSize = (
   }
 };
 
-export default ({
+export type CardWithTopLeftIconProps = CardProps & {
+  cardSize?: 'xsmall' | 'small' | 'medium' | 'big';
+  leftIcon?: 'logo' | Icon;
+  rightIcon?: 'arrow' | Icon;
+};
+
+export const CardWithTopLeftIcon = ({
   className,
   title,
   cardSize = 'medium',
@@ -28,11 +34,7 @@ export default ({
   state = 'actionable',
   dropshadow = true,
   ...props
-}: CardProps & {
-  cardSize?: 'xsmall' | 'small' | 'medium' | 'big';
-  leftIcon?: 'logo' | Icon;
-  rightIcon?: 'arrow' | Icon;
-}) => {
+}: CardWithTopLeftIconProps) => {
   const cardStyle = `${className} ${associatedClassForCardState(
     state,
     dropshadow

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

@@ -1,8 +1,8 @@
-import CardWithTopLeftIcon from './cardWithTopLeftIcon';
-import CardWithLeftIcon from './cardWithLeftIcon';
-import CardWithTopIcon from './cardWithTopIcon';
-import InfoCard from './infoCard';
-import CardButton from './cardButton';
+import { CardWithTopLeftIcon } from './cardWithTopLeftIcon';
+import { CardWithLeftIcon } from './cardWithLeftIcon';
+import { CardWithTopIcon } from './cardWithTopIcon';
+import { InfoCard } from './infoCard';
+import { CardButton } from './cardButton';
 
 type CardState = 'actionable' | 'static' | 'muted';
 

package/src/lib/components/cards/infoCard/index.stories.tsx

@@ -0,0 +1,71 @@
+import { InfoCard, InfoCardProps } from '.';
+import { images } from '../../../util/images';
+
+const story = {
+  title: 'JSX/Cards/InfoCard',
+  component: InfoCard,
+  argTypes: {
+    title: {
+      defaultValue: 'Lorem Ipsum',
+      description: 'Title text that needs to be displayed',
+    },
+    children: {
+      type: 'text',
+      defaultValue: 'Mountain or rock climbing, Bouldering, Martial arts, Extreme sports, Scuba diving, Sky diving, Bungee jumping, Mountain or rock climbing, Bouldering, Martial arts,',
+      description: 'Content that is displayed inside the card',
+    },
+    state: {
+      defaultValue: 'actionable',
+      description: 'State that describe the interation with the card',
+    },
+    topIcon: {
+      defaultValue: {
+        src: images.mortgage,
+        alt: 'Image alt'
+      },
+      description: 'Icon displayed on the top of the card, inside the purple circle',
+    },
+    rightIcon: {
+      defaultValue: {
+        src: images.washingMachine,
+        alt: 'Icon alt'
+      },
+      description: 'Icon displayed on the top right corner of the card',
+    },
+    dropshadow: {
+      defaultValue: true,
+      description: 'If the card should have a box-shadow or not',
+    },
+    className: {
+      defaultValue: '',
+      description: 'Class name for most top parent element',
+    },
+  },
+};
+
+export const InfoCardStory = ({
+  title,
+  dropshadow,
+  children,
+  className,
+  rightIcon,
+  state,
+  topIcon
+}: InfoCardProps) => {
+  return (
+    <InfoCard
+      className={className}
+      dropshadow={dropshadow}
+      state={state}
+      rightIcon={rightIcon}
+      title={title}
+      topIcon={topIcon}
+    >
+      {children}
+    </InfoCard>
+  );
+}
+
+InfoCardStory.storyName = "InfoCard";
+
+export default story;

package/src/lib/components/cards/infoCard/index.tsx

@@ -3,7 +3,12 @@ import { Icon, info } from '../icons';
 
 import styles from './style.module.scss';
 
-export default ({
+export type InfoCardProps = CardProps & {
+  topIcon: Icon;
+  rightIcon?: 'info' | Icon;
+};
+
+export const InfoCard = ({
   className,
   title,
   children,
@@ -12,10 +17,7 @@ export default ({
   state = 'actionable',
   dropshadow = true,
   ...props
-}: CardProps & {
-  topIcon: Icon;
-  rightIcon?: 'info' | Icon;
-}) => (
+}: InfoCardProps) => (
   <div className={`${styles['root-container']} ${className ?? ''}`} {...props}>
     <img
       src={topIcon.src}

package/src/lib/components/input/a.stories.mdx

@@ -1,6 +1,6 @@
 import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
 
-import Input from '.';
+import { Input } from '.';
 
 <Meta title="JSX/Inputs/Intro" />
 
@@ -10,7 +10,7 @@ Input elements are used to gather information from users.
 
 We have defined a few different input components according to the use case:
 
-- A default [Input](?path=/story/jsx-inputs-input--page) component
+- A default [Input](?path=/story/jsx-inputs-input--input-story) component
 - A [Currency Input](?path=/story/jsx-inputs-currency-input--page) component that is meant to be used for entering amount in Euro
 - An [Iban Input](?path=/story/jsx-inputs-iban-input--page) that is meant to be used when entering banking informations.
 - A [AutoSuggestInput]() component allows quick search via the input field to find an option for selection.

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

@@ -3,7 +3,7 @@ import Autosuggest, { RenderInputComponentProps } from 'react-autosuggest';
 
 import styles from './style.module.scss';
 import { Option } from '../../../models/autoSuggestInput';
-import Input, { InputProps } from '../index';
+import { Input, InputProps } from '../index';
 
 export default ({
   currentOption,

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

@@ -1,7 +1,7 @@
 import { useEffect, useRef, useState } from 'react';
 
 import { formatInput, reverseFormatInput } from './format';
-import Input, { InputProps } from '..';
+import { Input, InputProps } from '..';
 
 const CurrencyInput = ({
   value,

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

@@ -1,4 +1,4 @@
-import Input, { InputProps } from '..';
+import { Input, InputProps } from '..';
 
 import { formatIban } from './formatIban';
 

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

@@ -5,16 +5,16 @@ import generateId from '../../util/generateId';
 import styles from './style.module.scss';
 
 // Something weird is going on with enterKeyHint that makes it a required field under certain circumstances. The & Omit<…> and & Pick<…> is a hacky way to go around that.
-export type InputProps = {
+export type InputProps =  Omit<JSX.IntrinsicElements['input'], 'enterKeyHint'> &
+ Partial<Pick<JSX.IntrinsicElements['input'], 'enterKeyHint'>> & {
   error?: string;
   prefix?: string;
   label?: string;
   id?: string;
   hideLabel?: boolean;
-} & Omit<JSX.IntrinsicElements['input'], 'enterKeyHint'> &
-  Partial<Pick<JSX.IntrinsicElements['input'], 'enterKeyHint'>>;
+};
 
-export default React.forwardRef(
+export const Input = React.forwardRef(
   (
     {
       className,

package/src/lib/components/input/input.stories.tsx

@@ -0,0 +1,48 @@
+
+import { ChangeEvent, useState } from 'react';
+import { Input, InputProps } from '.';
+import sharedConfig from './stories/config';
+
+const story = {
+  title: 'JSX/Inputs/Input',
+  component: Input,
+  argTypes: sharedConfig,
+  parameters: {
+    componentSubtitle: 'The default input component is used to gather informations from the user.'
+  }
+};
+
+export const InputStory = ({ 
+  onChange,
+  className,
+  placeholder,
+  value,
+  label,
+  hideLabel,
+  prefix,
+  error
+}: InputProps) => {
+  const [newValue, setValue] = useState(value);
+
+  const handleOnChange = (event: ChangeEvent<HTMLInputElement>) => {
+    setValue(event.target.value)
+    onChange?.(event);
+  }
+
+  return (
+    <Input 
+      onChange={handleOnChange}
+      value={newValue}
+      className={className}
+      placeholder={placeholder}
+      label={label}
+      hideLabel={hideLabel}
+      prefix={prefix}
+      error={error}
+    />
+  );
+};
+
+InputStory.storyName = 'Input';
+
+export default story;

package/src/lib/components/input/stories/config.ts

@@ -0,0 +1,56 @@
+const sharedConfig = {
+  value: {
+    defaultValue: '',
+    description: 'Current input value.',
+    control: { type: 'text' }
+  },
+  className: {
+    description: 'Wrapper classNames for custom styling',
+    defaultValue: '',
+    control: { type: 'text' }
+  },
+  placeholder: {
+    description: 'Placeholder for DirtySwan Input component',
+    defaultValue: 'Placeholder',
+    control: { type: 'text' }
+  },
+  label: {
+    description: 'Label of the Input component',
+    defaultValue: 'Input Label',
+    control: { type: 'text' }
+  },
+  hideLabel: {
+    description: 'Whether or not a label should be hidden.. This is needed for accessibility purposes and a label should always be provided',
+    defaultValue: false,
+    control: { type: 'boolean' }
+  },
+  prefix: {
+    description: 'A prefix that can be displayed on the left of the input. Specially useful for currencies.',
+    defaultValue: '£',
+    control: { type: 'text' }
+  },
+  id: {
+    description: 'Unique ID identifier of the input. Relevant for accessibility.',
+    defaultValue: '1234567890',
+    control: { type: 'text' }
+  },
+  error: {
+    description: 'Error message that will also make input show on error state.',
+    defaultValue: '',
+    control: { type: 'text' },
+    table: {
+      type: { 
+        summary: 'string | boolean'
+      },
+    },
+  },
+  onChange: {
+    description: 'Function that is called when value of current input changes',
+    action: true,
+    table: {
+      category: "Callbacks",
+    },
+  },
+} 
+
+export default sharedConfig;

package/src/lib/index.tsx

@@ -1,7 +1,7 @@
 import { DateSelector } from './components/dateSelector';
 import { SignaturePad } from './components/signaturePad';
 import { AutocompleteAddress } from './components/autocompleteAddress';
-import Input from './components/input';
+import { Input } from './components/input';
 import { 
   MultiDropzone,
   FileType,

package/src/lib/scss/public/colors/default.scss

@@ -1,7 +1,7 @@
 // TODO: Reference colors
 $ds-primary-25: #fcfcff !default;
 $ds-primary-50: #f7f7ff !default;
-$ds-primary-100: #e6e5ff !default;
+$ds-primary-100: #ebebff !default;
 $ds-primary-300: #b1b0f5 !default;
 $ds-primary-500: #8e8cee !default;
 $ds-primary-700: #6160a2 !default;
@@ -9,7 +9,7 @@ $ds-primary-900: #2e2e4c !default;
 
 $ds-purple-25: #fcfcff;
 $ds-purple-50: #f7f7ff;
-$ds-purple-100: #e6e5ff;
+$ds-purple-100: #ebebff;
 $ds-purple-300: #b1b0f5;
 $ds-purple-500: #8e8cee;
 $ds-purple-700: #6160a2;

package/src/lib/scss/public/demo.tsx

@@ -24,7 +24,7 @@ const colors = [
   {
     name: 'Primary 100',
     code: 'primary-100',
-    hex: '#e6e5ff',
+    hex: '#ebebff',
   },
   {
     name: 'Primary 300',

package/src/lib/components/cards/cardButton/index.stories.mdx

@@ -1,47 +0,0 @@
-import { Meta, Preview } from '@storybook/addon-docs/blocks';
-
-import CardButton from '.';
-
-<Meta title="JSX/Cards/Card Button" />
-
-# Card Button
-
-| attribute   | unit                     | description                                    | default value | required                            |
-| ----------- | ------------------------ | ---------------------------------------------- | ------------- | ----------------------------------- |
-| title       | string                   | Title text that needs to be displayed          | n/a           | true                                |
-| description | string / ReactNode (JSX) | Description text that is displayed under title | n/a           | true                                |
-| disabled    | boolean                  | Disabled state of the button                   | false         | false                               |
-| className   | string                   | Class name for most top parent element         | n/a           | false                               |
-| onClick     | function                 | Function that runs on click of the button      | n/a           | true (false if href prop exists)    |
-| href        | string                   | Redirect URL on click of the button            | n/a           | true (false if onClick prop exists) |
-
-<Preview>
-  <>
-    <h4 className="p-h4">Normal state</h4>
-    <br />
-    <CardButton
-      title="Name"
-      description="Seungha Kong"
-      onClick={() => console.log('This is a button component')}
-    />
-    <br />
-    <br />
-    <h4 className="p-h4">Long description</h4>
-    <br />
-    <CardButton
-      title="Risky Sports"
-      description="Mountain or rock climbing, Bouldering, Martial arts, Extreme sports, Scuba diving, Sky diving, Bungee jumping, Mountain or rock climbing, Bouldering, Martial arts,"
-      onClick={() => console.log('This is a button component')}
-    />
-    <br />
-    <br />
-    <h4 className="p-h4">Disabled state</h4>
-    <br />
-    <CardButton
-      title="Address"
-      description="Lohmühlenstraße 65 10557 Berlin"
-      onClick={() => console.log('This is a button component')}
-      disabled
-    />
-  </>
-</Preview>