@popsure/dirty-swan 0.33.4 → 0.34.0

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/dateSelector/index.stories.tsx

@@ -0,0 +1,104 @@
+import { DateSelector, DateSelectorProps } from '.';
+import de from 'dayjs/locale/de';
+
+const story = {
+  title: 'JSX/DateSelector',
+  component: DateSelector,
+  decorators: [
+    (Story: any) => (
+      <div style={{ minHeight: '320px', paddingTop: '80px' }}>
+        <Story />
+      </div>
+    ),
+  ],
+  argTypes: {
+    yearBoundaries: {
+      description: 'Object containing the min and max year boundaries to show.',
+      defaultValue: {
+        min: 1920, 
+        max: 2001
+      }
+    },
+    displayCalendar: {
+      description: 'Whether the calendar icon/button trigger should show',
+      defaultValue: false
+    },
+    onChange: {
+      description: 'Called when the value is changed. Must be a valid date to be triggered',
+      action: true,
+      table: {
+        category: 'Callbacks',
+        type: { 
+          summary: '(date: YYYY-MM-DD) => void'
+        },
+      },
+    },
+    value: {
+      defaultValue: '2000-12-12',
+      description: 'Value of the input',
+      table: {
+        type: { 
+          summary: 'YYYY-MM-DD'
+        },
+      },
+    },
+    dayjsLocale: {
+      description: `Property used to localize the calendar of the DateSelector. If no dayjsLocale is supplied, the default locale 'en' will be used. Additional locales can be imported from dayjs like import de from 'dayjs/locale/de'; and then passed on to the component.`
+    },
+    placeholders: {
+      description: 'Properties used to localize the calendar of the DateSelector. `placeholders` object can be used to change the text of the different dropdowns.'
+    },
+    firstDayOfWeek: {
+      description: `Index of the first day of the week (0 = Sunday, 1 = Monday, etc.)`
+    }
+  },
+  parameters: {
+    componentSubtitle: 'Date selector are user interface elements which allow user to select a date in the `YYYY-MM-DD` format.',
+    design: {
+      url: 'https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FMKs4cbojdVOBKUxv7okb93%2FDirty-Swan-Design-System%3Fnode-id%3D293%253A169',
+      type: 'figma'
+    },
+    docs: {
+      source: {
+        excludeDecorators: true,
+      },
+    },
+  },
+};
+
+export const DateSelectorStory = ({
+  displayCalendar,
+  onChange,
+  yearBoundaries,
+  value
+}: DateSelectorProps) => (
+  <DateSelector
+    onChange={onChange}
+    displayCalendar={displayCalendar}
+    yearBoundaries={yearBoundaries}
+    value={value}
+  />
+);
+
+DateSelectorStory.storyName = "DateSelector";
+
+export const DateSelectorLocalisation = ({ onChange, value, yearBoundaries }: DateSelectorProps) => (
+  <>
+    {/** import de from 'dayjs/locale/de'; */}
+    <DateSelector
+      value={value}
+      yearBoundaries={yearBoundaries}
+      onChange={onChange}
+      displayCalendar={true}
+      placeholders={{
+        day: 'Tag',
+        month: 'Monat',
+        year: 'Jahr',
+      }}
+      dayjsLocale={de}
+      firstDayOfWeek={2}
+    />
+  </>
+);
+
+export default story;

package/src/lib/components/dateSelector/index.test.tsx

@@ -1,6 +1,6 @@
-import { render, fireEvent } from '../../util/testUtils';
+import { render } from '../../util/testUtils';
 
-import DateSelector from '.';
+import { DateSelector } from '.';
 
 const setup = (date: string, onChange: (date: string) => void = () => {}) => {
   return render(

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

@@ -51,27 +51,29 @@ export const daysInMonthOfYear = ({
   return dayjs(`${year}-${month}`).daysInMonth();
 };
 
-const DateSelector = ({
-  value,
-  onChange,
-  yearBoundaries,
-  displayCalendar,
-  placeholders,
-  dayjsLocale,
-  firstDayOfWeek = 0,
-}: {
+export interface DateSelectorProps {
   value?: string;
   onChange: (date: string) => void;
   yearBoundaries: { min: number; max: number };
   displayCalendar?: boolean;
+  dayjsLocale?: ILocale;
   placeholders?: {
     day?: string;
     month?: string;
     year?: string;
   };
-  dayjsLocale?: ILocale;
   firstDayOfWeek?: number;
-}) => {
+}
+
+export const DateSelector = ({
+  value,
+  onChange,
+  yearBoundaries,
+  displayCalendar,
+  placeholders,
+  dayjsLocale,
+  firstDayOfWeek = 0,
+}: DateSelectorProps) => {
   const calendarDateValue = value ? isoStringtoCalendarDate(value) : undefined;
   const daysInSelectedDate = calendarDateValue
     ? daysInMonthOfYear({
@@ -277,6 +279,4 @@ const DateSelector = ({
       )}
     </div>
   );
-};
-
-export default DateSelector;
+};

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;