@universal-tennis/ui-shared 0.1.82 → 0.1.86

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

@@ -1,275 +1,330 @@
-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 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 RightChevronIcon from './RightChevronIcon';
-import SessionIcon from './SessionIcon';
-import SinglePersonIcon from './SinglePersonIcon';
-import SwapIcon from './SwapIcon';
-import SwapNoBorderIcon from './SwapNoBorderIcon';
-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 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 RightChevronIconTemplate(args: IconProps) {
-  return <RightChevronIcon {...args} />;  
-}
-
-function SessionIconTemplate(args: IconProps) {
-  return <SessionIcon {...args} />;  
-}
-
-function SinglePersonIconTemplate(args: IconProps) {
-  return <SinglePersonIcon {...args} />;  
-}
-
-function SwapIconTemplate(args: IconProps) {
-  return <SwapIcon {...args} />;  
-}
-
-function SwapNoBorderIconTemplate(args: IconProps) {
-  return <SwapNoBorderIcon {...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 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 Swap = SwapIconTemplate.bind({});
-Swap.args = {
-  size: 150,
-  color: 'blue'
-};
-
-export const SwapNoBorder = SwapNoBorderIconTemplate.bind({});
-SwapNoBorder.args = {
-  size: 150,
-  color: 'blue'
-};
-
-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 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 RightChevronIcon from './RightChevronIcon';
+import SessionIcon from './SessionIcon';
+import SinglePersonIcon from './SinglePersonIcon';
+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 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 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 RightChevronIconTemplate(args: IconProps) {
+  return <RightChevronIcon {...args} />;  
+}
+
+function SessionIconTemplate(args: IconProps) {
+  return <SessionIcon {...args} />;  
+}
+
+function SinglePersonIconTemplate(args: IconProps) {
+  return <SinglePersonIcon {...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 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 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 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 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
+};

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

@@ -1,13 +1,13 @@
-/* eslint-disable max-len */
-import React from "react";
-import { IconProps } from "./sharedTypes";
-
-export default function LeftChevronIcon({ size, color }: IconProps) {
-  return (
-      <svg width={size} height={size} viewBox="0 0 8 16" fill={color} xmlns="http://www.w3.org/2000/svg">
-          <path
-              d="M7.84116 0.134474C7.66171 -0.0330075 7.39178 -0.0429963 7.20168 0.0986352L7.13447 0.158843L0.13447 7.65884C-0.0224142 7.82693 -0.0420246 8.07619 0.0756388 8.26457L0.13447 8.34116L7.13447 15.8412C7.32289 16.043 7.63928 16.0539 7.84116 15.8655C8.0206 15.698 8.04916 15.4294 7.92096 15.23L7.86553 15.1588L1.185 7.999L7.86553 0.841161C8.03301 0.661716 8.043 0.391787 7.90136 0.201687L7.84116 0.134474Z"
-          />
-      </svg>
-  );
-}
+/* eslint-disable max-len */
+import React from "react";
+import { IconProps } from "./sharedTypes";
+
+export default function LeftChevronIcon({ size, color }: IconProps) {
+  return (
+      <svg width={size} height={size} viewBox="0 0 8 16" fill={color} xmlns="http://www.w3.org/2000/svg">
+          <path
+              d="M7.84116 0.134474C7.66171 -0.0330075 7.39178 -0.0429963 7.20168 0.0986352L7.13447 0.158843L0.13447 7.65884C-0.0224142 7.82693 -0.0420246 8.07619 0.0756388 8.26457L0.13447 8.34116L7.13447 15.8412C7.32289 16.043 7.63928 16.0539 7.84116 15.8655C8.0206 15.698 8.04916 15.4294 7.92096 15.23L7.86553 15.1588L1.185 7.999L7.86553 0.841161C8.03301 0.661716 8.043 0.391787 7.90136 0.201687L7.84116 0.134474Z"
+          />
+      </svg>
+  );
+}

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

@@ -1,12 +1,12 @@
-/* eslint-disable max-len */
-import React from 'react';
-import { IconProps } from './sharedTypes';
-
-export default function LineIcon({ width, height, color }: IconProps) {
-  return (  
-      <svg width={width} height={height} viewBox="0 0 83 1" fill="none" xmlns="http://www.w3.org/2000/svg">
-          <line x1="83" y1="0.5" x2="4.37114e-08" y2="0.500007" stroke={color} />
-      </svg>
-
-  );
-}
+/* eslint-disable max-len */
+import React from 'react';
+import { IconProps } from './sharedTypes';
+
+export default function LineIcon({ width, height, color }: IconProps) {
+  return (  
+      <svg width={width} height={height} viewBox="0 0 83 1" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <line x1="83" y1="0.5" x2="4.37114e-08" y2="0.500007" stroke={color} />
+      </svg>
+
+  );
+}