Skip to content

Commit

Permalink
Finish migration templates to typescript
Browse files Browse the repository at this point in the history
  • Loading branch information
Pierre-Eric Garcia committed Aug 11, 2023
1 parent 639aa43 commit 7f3a02a
Show file tree
Hide file tree
Showing 8 changed files with 322 additions and 101 deletions.
272 changes: 237 additions & 35 deletions frontend/src/components/atoms/icons/fr-fi-icons.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ export type IconProps = {
small?: boolean;
type?: string;
size?: number;
title?: string;
};

const FrFiIcon: React.FC<IconProps> = ({
Expand All @@ -37,134 +38,335 @@ const FrFiIcon: React.FC<IconProps> = ({
};

// Icons - Business
export const MailIcon: React.FC<IconProps> = ({ color, large, small }) => (
<FrFiIcon type="mail-line" color={color} large={large} small={small} />
export const MailIcon: React.FC<IconProps> = ({
color,
large,
small,
title,
}) => (
<FrFiIcon
type="mail-line"
color={color}
large={large}
small={small}
title={title}
/>
);

export const MailIconFill: React.FC<IconProps> = ({ color, large, small }) => (
<FrFiIcon type="mail-fill" color={color} large={large} small={small} />
export const MailIconFill: React.FC<IconProps> = ({
color,
large,
small,
title,
}) => (
<FrFiIcon
type="mail-fill"
color={color}
large={large}
small={small}
title={title}
/>
);

export const MailOpenIcon: React.FC<IconProps> = ({ color, large, small }) => (
<FrFiIcon type="mail-open-line" color={color} large={large} small={small} />
export const MailOpenIcon: React.FC<IconProps> = ({
color,
large,
small,
title,
}) => (
<FrFiIcon
type="mail-open-line"
color={color}
large={large}
small={small}
title={title}
/>
);

export const MailOpenIconFill: React.FC<IconProps> = ({
color,
large,
small,
title,
}) => (
<FrFiIcon type="mail-open-fill" color={color} large={large} small={small} />
<FrFiIcon
type="mail-open-fill"
color={color}
large={large}
small={small}
title={title}
/>
);

// Icons - Media
export const NotificationIcon: React.FC<IconProps> = ({
color,
large,
small,
title,
}) => (
<FrFiIcon
type="notification-3-line"
color={color}
large={large}
small={small}
title={title}
/>
);

// Icons - System DSFR
export const InfoFillIcon: React.FC<IconProps> = ({ color, large, small }) => (
<FrFiIcon type="info-fill" color={color} large={large} small={small} />
export const InfoFillIcon: React.FC<IconProps> = ({
color,
large,
small,
title,
}) => (
<FrFiIcon
type="info-fill"
color={color}
large={large}
small={small}
title={title}
/>
);

export const InfoIcon: React.FC<IconProps> = ({ color, large, small }) => (
<FrFiIcon type="info-line" color={color} large={large} small={small} />
export const InfoIcon: React.FC<IconProps> = ({
color,
large,
small,
title,
}) => (
<FrFiIcon
type="info-line"
color={color}
large={large}
small={small}
title={title}
/>
);

export const WarningIcon: React.FC<IconProps> = ({ color, large, small }) => (
<FrFiIcon type="warning-fill" color={color} large={large} small={small} />
export const WarningIcon: React.FC<IconProps> = ({
color,
large,
small,
title,
}) => (
<FrFiIcon
type="warning-fill"
color={color}
large={large}
small={small}
title={title}
/>
);

// RemixIcon
export const AddCircleIcon: React.FC<IconProps> = ({ color, large, small }) => (
<FrFiIcon type="add-circle-line" color={color} large={large} small={small} />
export const AddCircleIcon: React.FC<IconProps> = ({
color,
large,
small,
title,
}) => (
<FrFiIcon
type="add-circle-line"
color={color}
large={large}
small={small}
title={title}
/>
);

export const ArrowUpIcon: React.FC<IconProps> = ({ color, large, small }) => (
<FrFiIcon type="arrow-up-s-line" color={color} large={large} small={small} />
export const ArrowUpIcon: React.FC<IconProps> = ({
color,
large,
small,
title,
}) => (
<FrFiIcon
type="arrow-up-s-line"
color={color}
large={large}
small={small}
title={title}
/>
);

export const ArrowDownIcon: React.FC<IconProps> = ({ color, large, small }) => (
export const ArrowDownIcon: React.FC<IconProps> = ({
color,
large,
small,
title,
}) => (
<FrFiIcon
type="arrow-down-s-line"
color={color}
large={large}
small={small}
title={title}
/>
);

export const ArrowRightIcon: React.FC<IconProps> = ({
color,
large,
small,
title,
}) => (
<FrFiIcon
type="arrow-right-s-line"
color={color}
large={large}
small={small}
title={title}
/>
);

export const CheckCircleIcon: React.FC<IconProps> = ({
color,
large,
small,
title,
}) => (
<FrFiIcon
type="checkbox-circle-fill"
color={color}
large={large}
small={small}
title={title}
/>
);

export const ErrorIcon: React.FC<IconProps> = ({ color, large, small }) => (
export const ErrorIcon: React.FC<IconProps> = ({
color,
large,
small,
title,
}) => (
<FrFiIcon
type="error-warning-fill"
color={color}
large={large}
small={small}
title={title}
/>
);

export const HelpIcon: React.FC<IconProps> = ({ color, large, small }) => (
<FrFiIcon type="question-fill" color={color} large={large} small={small} />
export const HelpIcon: React.FC<IconProps> = ({
color,
large,
small,
title,
}) => (
<FrFiIcon
type="question-fill"
color={color}
large={large}
small={small}
title={title}
/>
);

export const RefreshIcon: React.FC<IconProps> = ({ color, large, small }) => (
<FrFiIcon type="refresh-line" color={color} large={large} small={small} />
export const RefreshIcon: React.FC<IconProps> = ({
color,
large,
small,
title,
}) => (
<FrFiIcon
type="refresh-line"
color={color}
large={large}
small={small}
title={title}
/>
);

export const ScheduleIcon: React.FC<IconProps> = ({ color, large, small }) => (
<FrFiIcon type="time-line" color={color} large={large} small={small} />
export const ScheduleIcon: React.FC<IconProps> = ({
color,
large,
small,
title,
}) => (
<FrFiIcon
type="time-line"
color={color}
large={large}
small={small}
title={title}
/>
);

export const EyeIcon: React.FC<IconProps> = ({ color, large, small }) => (
<FrFiIcon type="eye-line" color={color} large={large} small={small} />
export const EyeIcon: React.FC<IconProps> = ({
color,
large,
small,
title,
}) => (
<FrFiIcon
type="eye-line"
color={color}
large={large}
small={small}
title={title}
/>
);

export const EditIcon: React.FC<IconProps> = ({ color, large, small }) => (
<FrFiIcon type="edit-line" color={color} large={large} small={small} />
export const EditIcon: React.FC<IconProps> = ({
color,
large,
small,
title,
}) => (
<FrFiIcon
type="edit-line"
color={color}
large={large}
small={small}
title={title}
/>
);

export const FilterIcon: React.FC<IconProps> = ({ color, large, small }) => (
<FrFiIcon type="filter-line" color={color} large={large} small={small} />
export const FilterIcon: React.FC<IconProps> = ({
color,
large,
small,
title,
}) => (
<FrFiIcon
type="filter-line"
color={color}
large={large}
small={small}
title={title}
/>
);

export const ArchiveIcon: React.FC<IconProps> = ({ color, large, small }) => (
<FrFiIcon type="archive-line" color={color} large={large} small={small} />
export const ArchiveIcon: React.FC<IconProps> = ({
color,
large,
small,
title,
}) => (
<FrFiIcon
type="archive-line"
color={color}
large={large}
small={small}
title={title}
/>
);

export const RecycleIcon: React.FC<IconProps> = ({ color, large, small }) => (
<FrFiIcon type="recycle-fill" color={color} large={large} small={small} />
export const RecycleIcon: React.FC<IconProps> = ({
color,
large,
small,
title,
}) => (
<FrFiIcon
type="recycle-fill"
color={color}
large={large}
small={small}
title={title}
/>
);
1 change: 0 additions & 1 deletion ...src/components/templates/Accessibilite.js → ...rc/components/templates/Accessibilite.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import React from 'react';
import Button from '../atoms/hyperTexts/Button';

const Accessibilite = () => (
Expand Down
Loading

0 comments on commit 7f3a02a

Please sign in to comment.