@universal-tennis/ui-shared 0.1.96 → 0.2.0

package/src/stories/atoms/Icons/Icons.stories.tsx

@@ -1,372 +1,372 @@
-import React from 'react';
-
-import AddIcon from './AddIcon';
-import AvailabilityMaybeIcon from './AvailabilityMaybeIcon';
-import AvailabilityNoIcon from './AvailabilityNoIcon';
-import AvailabilityYesIcon from './AvailabilityYesIcon';
-import AvailabilityNotSetIcon from './AvailabilityNotSetIcon';
-import BallInMotionIcon from './BallInMotionIcon';
-import CalendarIcon from './CalendarIcon';
-import ClockIcon from './ClockIcon';
-import CloseIcon from './CloseIcon';
-import DeleteIcon from './DeleteIcon';
-import DoublePersonIcon from './DoublePersonIcon';
-import EditIcon from './EditIcon';
-import LeftChevronIcon from './LeftChevronIcon';
-import LocationIcon from './LocationIcon';
-import LineIcon from './LineIcon';
-import MessageIcon from './MessageIcon';
-import PickleballBallIcon from './PickleballBallIcon';
-import RightChevronIcon from './RightChevronIcon';
-import SessionIcon from './SessionIcon';
-import SinglePersonIcon from './SinglePersonIcon';
-import SinglePersonV2Icon from './SinglePersonV2Icon';
-import SocialMediaFacebookIcon from './SocialMediaFacebookIcon';
-import SocialMediaInstagramIcon from './SocialMediaInstagramIcon';
-import SocialMediaTikTokIcon from './SocialMediaTikTokIcon';
-import SocialMediaXIcon from './SocialMediaXIcon';
-import SocialMediaYoutubeIcon from './SocialMediaYoutubeIcon';
-import SwapIcon from './SwapIcon';
-import SwapNoBorderIcon from './SwapNoBorderIcon';
-import TennisBallIcon from './TennisBallIcon';
-import VerifiedIcon from './VerifiedIcon';
-import VisibilityIcon from './VisibilityIcon';
-import VisibilityOffIcon from './VisibilityOffIcon';
-import WinnerIndicatorIcon from './WinnerIndicatorIcon';
-import { IconProps, WinnerIndicatorIconProps } from './sharedTypes';
-
-// Default
-export default {
-  title: 'Atoms/Icons',
-};
-
-// Templates
-function AddIconTemplate(args: IconProps) {
-  return <AddIcon {...args} />;  
-}
-
-function AvailabilityMaybeIconTemplate(args: IconProps) {
-  return <AvailabilityMaybeIcon {...args} />;  
-}
-
-function AvailabilityNoIconTemplate(args: IconProps) {
-  return <AvailabilityNoIcon {...args} />;  
-}
-
-function AvailabilityYesIconTemplate(args: IconProps) {
-  return <AvailabilityYesIcon {...args} />;  
-}
-
-function AvailabilityNotSetIconTemplate(args: IconProps) {
-  return <AvailabilityNotSetIcon {...args} />;  
-}
-
-function BallInMotionIconTemplate(args: IconProps) {
-  return <BallInMotionIcon {...args} />;  
-}
-
-function CalendarIconTemplate(args: IconProps) {
-  return <CalendarIcon {...args} />;  
-}
-
-function ClockIconTemplate(args: IconProps) {
-  return <ClockIcon {...args} />;  
-}
-
-function CloseIconTemplate(args: IconProps) {
-  return <CloseIcon {...args} />;  
-}
-
-function DeleteIconTemplate(args: IconProps) {
-  return <DeleteIcon {...args} />;  
-}
-
-function DoublePersonIconTemplate(args: IconProps) {
-  return <DoublePersonIcon {...args} />;  
-}
-
-function EditIconTemplate(args: IconProps) {
-  return <EditIcon {...args} />;  
-}
-
-function LeftChevronIconTemplate(args: IconProps) {
-  return <LeftChevronIcon {...args} />;  
-}
-
-function LocationIconTemplate(args: IconProps) {
-  return <LocationIcon {...args} />;  
-}
-
-function LineIconTemplate(args: IconProps) {
-  return <LineIcon {...args} />;  
-}
-
-function MessageIconTemplate(args: IconProps) {
-  return <MessageIcon {...args} />;  
-}
-
-function PickleballBallIconTemplate(args: IconProps) {
-  return <PickleballBallIcon {...args} />;  
-}
-
-function RightChevronIconTemplate(args: IconProps) {
-  return <RightChevronIcon {...args} />;  
-}
-
-function SessionIconTemplate(args: IconProps) {
-  return <SessionIcon {...args} />;  
-}
-
-function SinglePersonIconTemplate(args: IconProps) {
-  return <SinglePersonIcon {...args} />;  
-}
-
-function SinglePersonV2IconTemplate(args: IconProps) {
-  return <SinglePersonV2Icon {...args} />;  
-}
-
-function SocialMediaFacebookIconTemplate(args: IconProps) {
-  return <SocialMediaFacebookIcon {...args} />;  
-}
-
-function SocialMediaInstagramIconTemplate(args: IconProps) {
-  return <SocialMediaInstagramIcon {...args} />;  
-}
-
-function SocialMediaTikTokIconTemplate(args: IconProps) {
-  return <SocialMediaTikTokIcon {...args} />;  
-}
-
-function SocialMediaXIconTemplate(args: IconProps) {
-  return <SocialMediaXIcon {...args} />;  
-}
-
-function SocialMediaYoutubeIconTemplate(args: IconProps) {
-  return <SocialMediaYoutubeIcon {...args} />;  
-}
-
-function SwapIconTemplate(args: IconProps) {
-  return <SwapIcon {...args} />;  
-}
-
-function SwapNoBorderIconTemplate(args: IconProps) {
-  return <SwapNoBorderIcon {...args} />;  
-}
-
-function TennisBallIconTemplate(args: IconProps) {
-  return <TennisBallIcon {...args} />;  
-}
-
-function VerifiedIconTemplate(args: IconProps) {
-  return <VerifiedIcon {...args} />;  
-}
-
-function VisibilityIconTemplate(args: IconProps) {
-  return <VisibilityIcon {...args} />;  
-}
-
-function VisibilityOffIconTemplate(args: IconProps) {
-  return <VisibilityOffIcon {...args} />;  
-}
-
-function WinnerIndicatorIconTemplate(args: WinnerIndicatorIconProps) {
-  return <WinnerIndicatorIcon {...args} />;  
-}
-
-// Stories
-export const Add = AddIconTemplate.bind({});
-Add.args = {
-  size: 150,
-  color: 'navy'
-};
-
-export const AvailabilityMaybe = AvailabilityMaybeIconTemplate.bind({});
-AvailabilityMaybe.args = {
-  size: 150,
-  color: 'orange'
-};
-
-export const AvailabilityNo = AvailabilityNoIconTemplate.bind({});
-AvailabilityNo.args = {
-  size: 150,
-  color: 'red'
-};
-
-export const AvailabilityYes = AvailabilityYesIconTemplate.bind({});
-AvailabilityYes.args = {
-  size: 150,
-  color: 'green'
-};
-
-export const AvailabilityNotSet = AvailabilityNotSetIconTemplate.bind({});
-AvailabilityNotSet.args = {
-  size: 150,
-  color: 'green'
-};
-
-export const BallInMotion = BallInMotionIconTemplate.bind({});
-BallInMotion.args = {
-  size: 150,
-  color: 'green'
-};
-
-export const Calendar = CalendarIconTemplate.bind({});
-Calendar.args = {
-  size: 150,
-  color: 'green'
-};
-
-export const Clock = ClockIconTemplate.bind({});
-Clock.args = {
-  size: 150,
-  color: 'maroon'
-};
-
-export const Close = CloseIconTemplate.bind({});
-Close.args = {
-  size: 150,
-  color: 'purple'
-};
-
-export const Delete = DeleteIconTemplate.bind({});
-Delete.args = {
-  size: 150,
-  color: 'orange'
-};
-
-export const DoublePerson = DoublePersonIconTemplate.bind({});
-DoublePerson.args = {
-  height: 150,
-  width: 200,
-  color: 'red'
-};
-
-export const Edit = EditIconTemplate.bind({});
-Edit.args = {
-  size: 150,
-  color: 'green'
-};
-
-export const LeftChevron = LeftChevronIconTemplate.bind({});
-LeftChevron.args = {
-  size: 150,
-  color: 'grey'
-};
-
-export const RightChevron = RightChevronIconTemplate.bind({});
-RightChevron.args = {
-  size: 150,
-  color: 'grey'
-};
-
-export const Location = LocationIconTemplate.bind({});
-Location.args = {
-  size: 150,
-  color: 'grey'
-};
-
-export const Line = LineIconTemplate.bind({});
-Line.args = {
-  width: 80,
-  height: 2,
-  color: 'grey'
-};
-
-export const Message = MessageIconTemplate.bind({});
-Message.args = {
-  size: 150,
-  color: 'teal'
-};
-
-export const Session = SessionIconTemplate.bind({});
-Session.args = {
-  size: 150,
-  color: 'red'
-};
-
-export const SinglePerson = SinglePersonIconTemplate.bind({});
-SinglePerson.args = {
-  size: 150,
-  color: 'red'
-};
-
-export const SinglePersonV2 = SinglePersonV2IconTemplate.bind({});
-SinglePersonV2.args = {
-  size: 150,
-  color: 'red'
-};
-
-export const FacebookIcon = SocialMediaFacebookIconTemplate.bind({});
-FacebookIcon.args = {
-  size: 150,
-  color: 'blue'
-};
-
-export const InstagramIcon = SocialMediaInstagramIconTemplate.bind({});
-InstagramIcon.args = {
-  size: 150,
-  color: 'green'
-};
-
-export const TikTokIcon = SocialMediaTikTokIconTemplate.bind({});
-TikTokIcon.args = {
-  size: 150,
-  color: 'pink'
-};
-
-export const XIcon = SocialMediaXIconTemplate.bind({});
-XIcon.args = {
-  size: 150,
-  color: 'black'
-};
-
-export const YoutubeIcon = SocialMediaYoutubeIconTemplate.bind({});
-YoutubeIcon.args = {
-  size: 150,
-  color: 'brown'
-};
-
-export const Swap = SwapIconTemplate.bind({});
-Swap.args = {
-  size: 150,
-  color: 'blue'
-};
-
-export const SwapNoBorder = SwapNoBorderIconTemplate.bind({});
-SwapNoBorder.args = {
-  size: 150,
-  color: 'blue'
-};
-
-export const TennisBall = TennisBallIconTemplate.bind({});
-TennisBall.args = {
-  size: 150
-};
-
-export const PickleballBall = PickleballBallIconTemplate.bind({});
-PickleballBall.args = {
-  size: 150
-};
-
-export const Verified = VerifiedIconTemplate.bind({});
-Verified.args = {
-  size: 150,
-  color: 'black'
-};
-
-export const Visibility = VisibilityIconTemplate.bind({});
-Visibility.args = {
-  size: 150,
-  color: 'black'
-};
-
-export const VisibilityOff = VisibilityOffIconTemplate.bind({});
-VisibilityOff.args = {
-  size: 150,
-  color: 'black'
-};
-
-export const WinnerIndicator = WinnerIndicatorIconTemplate.bind({});
-WinnerIndicator.args = {
-  isBlack: true
-};
+import React from 'react';
+
+import AddIcon from './AddIcon';
+import AvailabilityMaybeIcon from './AvailabilityMaybeIcon';
+import AvailabilityNoIcon from './AvailabilityNoIcon';
+import AvailabilityYesIcon from './AvailabilityYesIcon';
+import AvailabilityNotSetIcon from './AvailabilityNotSetIcon';
+import BallInMotionIcon from './BallInMotionIcon';
+import CalendarIcon from './CalendarIcon';
+import ClockIcon from './ClockIcon';
+import CloseIcon from './CloseIcon';
+import DeleteIcon from './DeleteIcon';
+import DoublePersonIcon from './DoublePersonIcon';
+import EditIcon from './EditIcon';
+import LeftChevronIcon from './LeftChevronIcon';
+import LocationIcon from './LocationIcon';
+import LineIcon from './LineIcon';
+import MessageIcon from './MessageIcon';
+import PickleballBallIcon from './PickleballBallIcon';
+import RightChevronIcon from './RightChevronIcon';
+import SessionIcon from './SessionIcon';
+import SinglePersonIcon from './SinglePersonIcon';
+import SinglePersonV2Icon from './SinglePersonV2Icon';
+import SocialMediaFacebookIcon from './SocialMediaFacebookIcon';
+import SocialMediaInstagramIcon from './SocialMediaInstagramIcon';
+import SocialMediaTikTokIcon from './SocialMediaTikTokIcon';
+import SocialMediaXIcon from './SocialMediaXIcon';
+import SocialMediaYoutubeIcon from './SocialMediaYoutubeIcon';
+import SwapIcon from './SwapIcon';
+import SwapNoBorderIcon from './SwapNoBorderIcon';
+import TennisBallIcon from './TennisBallIcon';
+import VerifiedIcon from './VerifiedIcon';
+import VisibilityIcon from './VisibilityIcon';
+import VisibilityOffIcon from './VisibilityOffIcon';
+import WinnerIndicatorIcon from './WinnerIndicatorIcon';
+import { IconProps, WinnerIndicatorIconProps } from './sharedTypes';
+
+// Default
+export default {
+  title: 'Atoms/Icons',
+};
+
+// Templates
+function AddIconTemplate(args: IconProps) {
+  return <AddIcon {...args} />;  
+}
+
+function AvailabilityMaybeIconTemplate(args: IconProps) {
+  return <AvailabilityMaybeIcon {...args} />;  
+}
+
+function AvailabilityNoIconTemplate(args: IconProps) {
+  return <AvailabilityNoIcon {...args} />;  
+}
+
+function AvailabilityYesIconTemplate(args: IconProps) {
+  return <AvailabilityYesIcon {...args} />;  
+}
+
+function AvailabilityNotSetIconTemplate(args: IconProps) {
+  return <AvailabilityNotSetIcon {...args} />;  
+}
+
+function BallInMotionIconTemplate(args: IconProps) {
+  return <BallInMotionIcon {...args} />;  
+}
+
+function CalendarIconTemplate(args: IconProps) {
+  return <CalendarIcon {...args} />;  
+}
+
+function ClockIconTemplate(args: IconProps) {
+  return <ClockIcon {...args} />;  
+}
+
+function CloseIconTemplate(args: IconProps) {
+  return <CloseIcon {...args} />;  
+}
+
+function DeleteIconTemplate(args: IconProps) {
+  return <DeleteIcon {...args} />;  
+}
+
+function DoublePersonIconTemplate(args: IconProps) {
+  return <DoublePersonIcon {...args} />;  
+}
+
+function EditIconTemplate(args: IconProps) {
+  return <EditIcon {...args} />;  
+}
+
+function LeftChevronIconTemplate(args: IconProps) {
+  return <LeftChevronIcon {...args} />;  
+}
+
+function LocationIconTemplate(args: IconProps) {
+  return <LocationIcon {...args} />;  
+}
+
+function LineIconTemplate(args: IconProps) {
+  return <LineIcon {...args} />;  
+}
+
+function MessageIconTemplate(args: IconProps) {
+  return <MessageIcon {...args} />;  
+}
+
+function PickleballBallIconTemplate(args: IconProps) {
+  return <PickleballBallIcon {...args} />;  
+}
+
+function RightChevronIconTemplate(args: IconProps) {
+  return <RightChevronIcon {...args} />;  
+}
+
+function SessionIconTemplate(args: IconProps) {
+  return <SessionIcon {...args} />;  
+}
+
+function SinglePersonIconTemplate(args: IconProps) {
+  return <SinglePersonIcon {...args} />;  
+}
+
+function SinglePersonV2IconTemplate(args: IconProps) {
+  return <SinglePersonV2Icon {...args} />;  
+}
+
+function SocialMediaFacebookIconTemplate(args: IconProps) {
+  return <SocialMediaFacebookIcon {...args} />;  
+}
+
+function SocialMediaInstagramIconTemplate(args: IconProps) {
+  return <SocialMediaInstagramIcon {...args} />;  
+}
+
+function SocialMediaTikTokIconTemplate(args: IconProps) {
+  return <SocialMediaTikTokIcon {...args} />;  
+}
+
+function SocialMediaXIconTemplate(args: IconProps) {
+  return <SocialMediaXIcon {...args} />;  
+}
+
+function SocialMediaYoutubeIconTemplate(args: IconProps) {
+  return <SocialMediaYoutubeIcon {...args} />;  
+}
+
+function SwapIconTemplate(args: IconProps) {
+  return <SwapIcon {...args} />;  
+}
+
+function SwapNoBorderIconTemplate(args: IconProps) {
+  return <SwapNoBorderIcon {...args} />;  
+}
+
+function TennisBallIconTemplate(args: IconProps) {
+  return <TennisBallIcon {...args} />;  
+}
+
+function VerifiedIconTemplate(args: IconProps) {
+  return <VerifiedIcon {...args} />;  
+}
+
+function VisibilityIconTemplate(args: IconProps) {
+  return <VisibilityIcon {...args} />;  
+}
+
+function VisibilityOffIconTemplate(args: IconProps) {
+  return <VisibilityOffIcon {...args} />;  
+}
+
+function WinnerIndicatorIconTemplate(args: WinnerIndicatorIconProps) {
+  return <WinnerIndicatorIcon {...args} />;  
+}
+
+// Stories
+export const Add = AddIconTemplate.bind({});
+Add.args = {
+  size: 150,
+  color: 'navy'
+};
+
+export const AvailabilityMaybe = AvailabilityMaybeIconTemplate.bind({});
+AvailabilityMaybe.args = {
+  size: 150,
+  color: 'orange'
+};
+
+export const AvailabilityNo = AvailabilityNoIconTemplate.bind({});
+AvailabilityNo.args = {
+  size: 150,
+  color: 'red'
+};
+
+export const AvailabilityYes = AvailabilityYesIconTemplate.bind({});
+AvailabilityYes.args = {
+  size: 150,
+  color: 'green'
+};
+
+export const AvailabilityNotSet = AvailabilityNotSetIconTemplate.bind({});
+AvailabilityNotSet.args = {
+  size: 150,
+  color: 'green'
+};
+
+export const BallInMotion = BallInMotionIconTemplate.bind({});
+BallInMotion.args = {
+  size: 150,
+  color: 'green'
+};
+
+export const Calendar = CalendarIconTemplate.bind({});
+Calendar.args = {
+  size: 150,
+  color: 'green'
+};
+
+export const Clock = ClockIconTemplate.bind({});
+Clock.args = {
+  size: 150,
+  color: 'maroon'
+};
+
+export const Close = CloseIconTemplate.bind({});
+Close.args = {
+  size: 150,
+  color: 'purple'
+};
+
+export const Delete = DeleteIconTemplate.bind({});
+Delete.args = {
+  size: 150,
+  color: 'orange'
+};
+
+export const DoublePerson = DoublePersonIconTemplate.bind({});
+DoublePerson.args = {
+  height: 150,
+  width: 200,
+  color: 'red'
+};
+
+export const Edit = EditIconTemplate.bind({});
+Edit.args = {
+  size: 150,
+  color: 'green'
+};
+
+export const LeftChevron = LeftChevronIconTemplate.bind({});
+LeftChevron.args = {
+  size: 150,
+  color: 'grey'
+};
+
+export const RightChevron = RightChevronIconTemplate.bind({});
+RightChevron.args = {
+  size: 150,
+  color: 'grey'
+};
+
+export const Location = LocationIconTemplate.bind({});
+Location.args = {
+  size: 150,
+  color: 'grey'
+};
+
+export const Line = LineIconTemplate.bind({});
+Line.args = {
+  width: 80,
+  height: 2,
+  color: 'grey'
+};
+
+export const Message = MessageIconTemplate.bind({});
+Message.args = {
+  size: 150,
+  color: 'teal'
+};
+
+export const Session = SessionIconTemplate.bind({});
+Session.args = {
+  size: 150,
+  color: 'red'
+};
+
+export const SinglePerson = SinglePersonIconTemplate.bind({});
+SinglePerson.args = {
+  size: 150,
+  color: 'red'
+};
+
+export const SinglePersonV2 = SinglePersonV2IconTemplate.bind({});
+SinglePersonV2.args = {
+  size: 150,
+  color: 'red'
+};
+
+export const FacebookIcon = SocialMediaFacebookIconTemplate.bind({});
+FacebookIcon.args = {
+  size: 150,
+  color: 'blue'
+};
+
+export const InstagramIcon = SocialMediaInstagramIconTemplate.bind({});
+InstagramIcon.args = {
+  size: 150,
+  color: 'green'
+};
+
+export const TikTokIcon = SocialMediaTikTokIconTemplate.bind({});
+TikTokIcon.args = {
+  size: 150,
+  color: 'pink'
+};
+
+export const XIcon = SocialMediaXIconTemplate.bind({});
+XIcon.args = {
+  size: 150,
+  color: 'black'
+};
+
+export const YoutubeIcon = SocialMediaYoutubeIconTemplate.bind({});
+YoutubeIcon.args = {
+  size: 150,
+  color: 'brown'
+};
+
+export const Swap = SwapIconTemplate.bind({});
+Swap.args = {
+  size: 150,
+  color: 'blue'
+};
+
+export const SwapNoBorder = SwapNoBorderIconTemplate.bind({});
+SwapNoBorder.args = {
+  size: 150,
+  color: 'blue'
+};
+
+export const TennisBall = TennisBallIconTemplate.bind({});
+TennisBall.args = {
+  size: 150
+};
+
+export const PickleballBall = PickleballBallIconTemplate.bind({});
+PickleballBall.args = {
+  size: 150
+};
+
+export const Verified = VerifiedIconTemplate.bind({});
+Verified.args = {
+  size: 150,
+  color: 'black'
+};
+
+export const Visibility = VisibilityIconTemplate.bind({});
+Visibility.args = {
+  size: 150,
+  color: 'black'
+};
+
+export const VisibilityOff = VisibilityOffIconTemplate.bind({});
+VisibilityOff.args = {
+  size: 150,
+  color: 'black'
+};
+
+export const WinnerIndicator = WinnerIndicatorIconTemplate.bind({});
+WinnerIndicator.args = {
+  isBlack: true
+};