uikit-react-public 0.14.21 → 0.21.8

package/lib/components/Icon/svgImports.ts

@@ -1,298 +1,5 @@
-import Activity from './svgs/ActivitySvg';
-import Airplay from './svgs/AirplaySvg';
-import AlertCircle from './svgs/AlertCircleSvg';
-import AlertOctagon from './svgs/AlertOctagonSvg';
-import AlertTriangle from './svgs/AlertTriangleSvg';
-import AlignCenter from './svgs/AlignCenterSvg';
-import AlignJustify from './svgs/AlignJustifySvg';
-import AlignLeft from './svgs/AlignLeftSvg';
-import AlignRight from './svgs/AlignRightSvg';
-import Anchor from './svgs/AnchorSvg';
-import Aperture from './svgs/ApertureSvg';
-import Archive from './svgs/ArchiveSvg';
-import ArrowDownCircle from './svgs/ArrowDownCircleSvg';
-import ArrowDownLeft from './svgs/ArrowDownLeftSvg';
-import ArrowDownRight from './svgs/ArrowDownRightSvg';
-import ArrowDown from './svgs/ArrowDownSvg';
-import ArrowLeftCircle from './svgs/ArrowLeftCircleSvg';
-import ArrowLeft from './svgs/ArrowLeftSvg';
-import ArrowRightCircle from './svgs/ArrowRightCircleSvg';
-import ArrowRight from './svgs/ArrowRightSvg';
-import ArrowUpCircle from './svgs/ArrowUpCircleSvg';
-import ArrowUpLeft from './svgs/ArrowUpLeftSvg';
-import ArrowUpRight from './svgs/ArrowUpRightSvg';
-import ArrowUp from './svgs/ArrowUpSvg';
-import AtSign from './svgs/AtSignSvg';
-import Award from './svgs/AwardSvg';
-import BarChart2 from './svgs/BarChart2Svg';
-import BarChart from './svgs/BarChartSvg';
-import BatteryCharging from './svgs/BatteryChargingSvg';
-import Battery from './svgs/BatterySvg';
-import BellOff from './svgs/BellOffSvg';
-import Bell from './svgs/BellSvg';
-import Bluetooth from './svgs/BluetoothSvg';
-import Bold from './svgs/BoldSvg';
-import BookOpen from './svgs/BookOpenSvg';
-import Book from './svgs/BookSvg';
-import Bookmark from './svgs/BookmarkSvg';
-import Box from './svgs/BoxSvg';
-import Briefcase from './svgs/BriefcaseSvg';
-import Calendar from './svgs/CalendarSvg';
-import CameraOff from './svgs/CameraOffSvg';
-import Camera from './svgs/CameraSvg';
-import Cast from './svgs/CastSvg';
-import CheckCircle from './svgs/CheckCircleSvg';
-import CheckSquare from './svgs/CheckSquareSvg';
-import Check from './svgs/CheckSvg';
-import ChevronDown from './svgs/ChevronDownSvg';
-import ChevronLeft from './svgs/ChevronLeftSvg';
-import ChevronRight from './svgs/ChevronRightSvg';
-import ChevronUp from './svgs/ChevronUpSvg';
-import ChevronsDown from './svgs/ChevronsDownSvg';
-import ChevronsLeft from './svgs/ChevronsLeftSvg';
-import ChevronsRight from './svgs/ChevronsRightSvg';
-import ChevronsUp from './svgs/ChevronsUpSvg';
-import Chrome from './svgs/ChromeSvg';
-import Circle from './svgs/CircleSvg';
-import Clipboard from './svgs/ClipboardSvg';
-import Clock from './svgs/ClockSvg';
-import CloudDrizzle from './svgs/CloudDrizzleSvg';
-import CloudLightning from './svgs/CloudLightningSvg';
-import CloudOff from './svgs/CloudOffSvg';
-import CloudRain from './svgs/CloudRainSvg';
-import CloudSnow from './svgs/CloudSnowSvg';
-import Cloud from './svgs/CloudSvg';
-import Code from './svgs/CodeSvg';
-import Codepen from './svgs/CodepenSvg';
-import Codesandbox from './svgs/CodesandboxSvg';
-import Coffee from './svgs/CoffeeSvg';
-import Columns from './svgs/ColumnsSvg';
-import Command from './svgs/CommandSvg';
-import Compass from './svgs/CompassSvg';
-import Copy from './svgs/CopySvg';
-import CornerDownLeft from './svgs/CornerDownLeftSvg';
-import CornerDownRight from './svgs/CornerDownRightSvg';
-import CornerLeftDown from './svgs/CornerLeftDownSvg';
-import CornerLeftUp from './svgs/CornerLeftUpSvg';
-import CornerRightDown from './svgs/CornerRightDownSvg';
-import CornerRightUp from './svgs/CornerRightUpSvg';
-import CornerUpLeft from './svgs/CornerUpLeftSvg';
-import CornerUpRight from './svgs/CornerUpRightSvg';
-import Cpu from './svgs/CpuSvg';
-import CreditCard from './svgs/CreditCardSvg';
-import Crop from './svgs/CropSvg';
-import Crosshair from './svgs/CrosshairSvg';
-import Database from './svgs/DatabaseSvg';
-import Delete from './svgs/DeleteSvg';
-import Disc from './svgs/DiscSvg';
-import DivideCircle from './svgs/DivideCircleSvg';
-import DivideSquare from './svgs/DivideSquareSvg';
-import Divide from './svgs/DivideSvg';
-import DollarSign from './svgs/DollarSignSvg';
-import DownloadCloud from './svgs/DownloadCloudSvg';
-import Download from './svgs/DownloadSvg';
-import Dribbble from './svgs/DribbbleSvg';
-import Droplet from './svgs/DropletSvg';
-import Edit2 from './svgs/Edit2Svg';
-import Edit3 from './svgs/Edit3Svg';
-import Edit from './svgs/EditSvg';
-import ExternalLink from './svgs/ExternalLinkSvg';
-import EyeOff from './svgs/EyeOffSvg';
-import Eye from './svgs/EyeSvg';
-
-import FastForward from './svgs/FastForwardSvg';
-import Feather from './svgs/FeatherSvg';
-import Figma from './svgs/FigmaSvg';
-import FileMinus from './svgs/FileMinusSvg';
-import FilePlus from './svgs/FilePlusSvg';
-import FileText from './svgs/FileTextSvg';
-import File from './svgs/FileSvg';
-import Film from './svgs/FilmSvg';
-import Filter from './svgs/FilterSvg';
-import Flag from './svgs/FlagSvg';
-import FolderMinus from './svgs/FolderMinusSvg';
-import FolderPlus from './svgs/FolderPlusSvg';
-import Folder from './svgs/FolderSvg';
-import Framer from './svgs/FramerSvg';
-import Frown from './svgs/FrownSvg';
-import Gift from './svgs/GiftSvg';
-import GitBranch from './svgs/GitBranchSvg';
-import GitCommit from './svgs/GitCommitSvg';
-import GitMerge from './svgs/GitMergeSvg';
-import GitPullRequest from './svgs/GitPullRequestSvg';
-import Github from './svgs/GithubSvg';
-import Gitlab from './svgs/GitlabSvg';
-import Globe from './svgs/GlobeSvg';
-import Grid from './svgs/GridSvg';
-import HardDrive from './svgs/HardDriveSvg';
-import Hash from './svgs/HashSvg';
-import Headphones from './svgs/HeadphonesSvg';
-import Heart from './svgs/HeartSvg';
-import HelpCircle from './svgs/HelpCircleSvg';
-import Hexagon from './svgs/HexagonSvg';
-import Home from './svgs/HomeSvg';
-import Image from './svgs/ImageSvg';
-import Inbox from './svgs/InboxSvg';
-import Info from './svgs/InfoSvg';
-
-import Italic from './svgs/ItalicSvg';
-import Key from './svgs/KeySvg';
-import Layers from './svgs/LayersSvg';
-import Layout from './svgs/LayoutSvg';
-import LifeBuoy from './svgs/LifeBuoySvg';
-import Link2 from './svgs/Link2Svg';
-import Link from './svgs/LinkSvg';
-import Linkedin from './svgs/LinkedinSvg';
-import List from './svgs/ListSvg';
-import Loader from './svgs/LoaderSvg';
-import Lock from './svgs/LockSvg';
-import LogIn from './svgs/LogInSvg';
-import LogOut from './svgs/LogOutSvg';
-import Mail from './svgs/MailSvg';
-import MapPin from './svgs/MapPinSvg';
-import Map from './svgs/MapSvg';
-import Maximize2 from './svgs/Maximize2Svg';
-import Maximize from './svgs/MaximizeSvg';
-import Meh from './svgs/MehSvg';
-import Menu from './svgs/MenuSvg';
-import MessageCircle from './svgs/MessageCircleSvg';
-import MessageSquare from './svgs/MessageSquareSvg';
-import MicOff from './svgs/MicOffSvg';
-import Mic from './svgs/MicSvg';
-import Minimize2 from './svgs/Minimize2Svg';
-import Minimize from './svgs/MinimizeSvg';
-import MinusCircle from './svgs/MinusCircleSvg';
-import MinusSquare from './svgs/MinusSquareSvg';
-import Minus from './svgs/MinusSvg';
-import Monitor from './svgs/MonitorSvg';
-import Moon from './svgs/MoonSvg';
-import MoreHorizontal from './svgs/MoreHorizontalSvg';
-import MoreVertical from './svgs/MoreVerticalSvg';
-import MousePointer from './svgs/MousePointerSvg';
-import Move from './svgs/MoveSvg';
-import Music from './svgs/MusicSvg';
-import Navigation2 from './svgs/Navigation2Svg';
-import Navigation from './svgs/NavigationSvg';
-import Octagon from './svgs/OctagonSvg';
-import Package from './svgs/PackageSvg';
-import Paperclip from './svgs/PaperclipSvg';
-import PauseCircle from './svgs/PauseCircleSvg';
-import Pause from './svgs/PauseSvg';
-import PenTool from './svgs/PenToolSvg';
-import Percent from './svgs/PercentSvg';
-import PhoneCall from './svgs/PhoneCallSvg';
-import PhoneForwarded from './svgs/PhoneForwardedSvg';
-import PhoneIncoming from './svgs/PhoneIncomingSvg';
-import PhoneMissed from './svgs/PhoneMissedSvg';
-import PhoneOff from './svgs/PhoneOffSvg';
-import PhoneOutgoing from './svgs/PhoneOutgoingSvg';
-import Phone from './svgs/PhoneSvg';
-import PieChart from './svgs/PieChartSvg';
-import PlayCircle from './svgs/PlayCircleSvg';
-import Play from './svgs/PlaySvg';
-import PlusCircle from './svgs/PlusCircleSvg';
-import PlusSquare from './svgs/PlusSquareSvg';
-import Plus from './svgs/PlusSvg';
-import Pocket from './svgs/PocketSvg';
-import Power from './svgs/PowerSvg';
-import Printer from './svgs/PrinterSvg';
-import Radio from './svgs/RadioSvg';
-import RefreshCcw from './svgs/RefreshCcwSvg';
-import RefreshCw from './svgs/RefreshCwSvg';
-import Repeat from './svgs/RepeatSvg';
-import Rewind from './svgs/RewindSvg';
-import RotateCcw from './svgs/RotateCcwSvg';
-import RotateCw from './svgs/RotateCwSvg';
-import Rss from './svgs/RssSvg';
-import Save from './svgs/SaveSvg';
-import Scissors from './svgs/ScissorsSvg';
-import Search from './svgs/SearchSvg';
-import Send from './svgs/SendSvg';
-import Server from './svgs/ServerSvg';
-import Settings from './svgs/SettingsSvg';
-import Share2 from './svgs/Share2Svg';
-import Share from './svgs/ShareSvg';
-import ShieldOff from './svgs/ShieldOffSvg';
-import Shield from './svgs/ShieldSvg';
-import ShoppingBag from './svgs/ShoppingBagSvg';
-import ShoppingCart from './svgs/ShoppingCartSvg';
-import Shuffle from './svgs/ShuffleSvg';
-import Sidebar from './svgs/SidebarSvg';
-import SkipBack from './svgs/SkipBackSvg';
-import SkipForward from './svgs/SkipForwardSvg';
-import Slack from './svgs/SlackSvg';
-import Slash from './svgs/SlashSvg';
-import Sliders from './svgs/SlidersSvg';
-import Smartphone from './svgs/SmartphoneSvg';
-import Smile from './svgs/SmileSvg';
-import Speaker from './svgs/SpeakerSvg';
-import Square from './svgs/SquareSvg';
-import Star from './svgs/StarSvg';
-import StopCircle from './svgs/StopCircleSvg';
-import Sun from './svgs/SunSvg';
-import Sunrise from './svgs/SunriseSvg';
-import Sunset from './svgs/SunsetSvg';
-import Table from './svgs/TableSvg';
-import Tablet from './svgs/TabletSvg';
-import Tag from './svgs/TagSvg';
-import Target from './svgs/TargetSvg';
-import Terminal from './svgs/TerminalSvg';
-import Thermometer from './svgs/ThermometerSvg';
-import ThumbsDown from './svgs/ThumbsDownSvg';
-import ThumbsUp from './svgs/ThumbsUpSvg';
-import ToggleLeft from './svgs/ToggleLeftSvg';
-import ToggleRight from './svgs/ToggleRightSvg';
-import Tool from './svgs/ToolSvg';
-import Trash2 from './svgs/Trash2Svg';
-import Trash from './svgs/TrashSvg';
-import Trello from './svgs/TrelloSvg';
-import TrendingDown from './svgs/TrendingDownSvg';
-import TrendingUp from './svgs/TrendingUpSvg';
-import Triangle from './svgs/TriangleSvg';
-import Truck from './svgs/TruckSvg';
-import Tv from './svgs/TvSvg';
-import Twitch from './svgs/TwitchSvg';
-import Twitter from './svgs/TwitterSvg';
-import Type from './svgs/TypeSvg';
-import Umbrella from './svgs/UmbrellaSvg';
-import Underline from './svgs/UnderlineSvg';
-import Unlock from './svgs/UnlockSvg';
-import UploadCloud from './svgs/UploadCloudSvg';
-import Upload from './svgs/UploadSvg';
-import UserCheck from './svgs/UserCheckSvg';
-import UserMinus from './svgs/UserMinusSvg';
-import UserPlus from './svgs/UserPlusSvg';
-import UserX from './svgs/UserXSvg';
-import User from './svgs/UserSvg';
-import Users from './svgs/UsersSvg';
-import VideoOff from './svgs/VideoOffSvg';
-import Video from './svgs/VideoSvg';
-import Voicemail from './svgs/VoicemailSvg';
-import Volume1 from './svgs/Volume1Svg';
-import Volume2 from './svgs/Volume2Svg';
-import VolumeX from './svgs/VolumeXSvg';
-import Volume from './svgs/VolumeSvg';
-import Watch from './svgs/WatchSvg';
-import WifiOff from './svgs/WifiOffSvg';
-import Wifi from './svgs/WifiSvg';
-import Wind from './svgs/WindSvg';
-import XCircle from './svgs/XCircleSvg';
-import XOctagon from './svgs/XOctagonSvg';
-import XSquare from './svgs/XSquareSvg';
-import X from './svgs/XSvg';
-import ZapOff from './svgs/ZapOffSvg';
-import Zap from './svgs/ZapSvg';
-import ZoomIn from './svgs/ZoomInSvg';
-import ZoomOut from './svgs/ZoomOutSvg';
-
-// Additional social media icons not from Feather Icons
-import Facebook from './svgs/social/FacebookSvg';
-import Flickr from './svgs/social/FlickrSvg';
-import Instagram from './svgs/social/InstagramSvg';
-import Soundcloud from './svgs/social/SoundcloudSvg';
-import Tiktok from './svgs/social/TiktokSvg';
-import Youtube from './svgs/social/YoutubeSvg';
-import XSocial from './svgs/social/XSvg';
+import type { ReactNode, SVGProps } from 'react';
+import { ts } from 'design-system-foundations-public';
 
 // Custom icons -- not from Feather Icons
 import Avatar from './svgs/AvatarSvg';
@@ -300,7 +7,320 @@ import Avatar from './svgs/AvatarSvg';
 // Internal utility -- used by <Checkbox />
 import Empty from './svgs/internal/EmptySvg';
 
-const iconSvgs = {
+// icon components come from upstream library
+const {
+  icons: {
+    system: {
+      Activity,
+      Airplay,
+      AlertCircle,
+      AlertOctagon,
+      AlertTriangle,
+      AlignCenter,
+      AlignJustify,
+      AlignLeft,
+      AlignRight,
+      Anchor,
+      Aperture,
+      Archive,
+      ArrowDownCircle,
+      ArrowDownLeft,
+      ArrowDownRight,
+      ArrowDown,
+      ArrowLeftCircle,
+      ArrowLeft,
+      ArrowRightCircle,
+      ArrowRight,
+      ArrowUpCircle,
+      ArrowUpLeft,
+      ArrowUpRight,
+      ArrowUp,
+      AtSign,
+      Award,
+      BarChart2,
+      BarChart,
+      BatteryCharging,
+      Battery,
+      BellOff,
+      Bell,
+      Bluetooth,
+      Bold,
+      BookOpen,
+      Book,
+      Bookmark,
+      Box,
+      Briefcase,
+      Calendar,
+      CameraOff,
+      Camera,
+      Cast,
+      CheckCircle,
+      CheckSquare,
+      Check,
+      ChevronDown,
+      ChevronLeft,
+      ChevronRight,
+      ChevronUp,
+      ChevronsDown,
+      ChevronsLeft,
+      ChevronsRight,
+      ChevronsUp,
+      Chrome,
+      Circle,
+      Clipboard,
+      Clock,
+      CloudDrizzle,
+      CloudLightning,
+      CloudOff,
+      CloudRain,
+      CloudSnow,
+      Cloud,
+      Code,
+      Codepen,
+      Codesandbox,
+      Coffee,
+      Columns,
+      Command,
+      Compass,
+      Copy,
+      CornerDownLeft,
+      CornerDownRight,
+      CornerLeftDown,
+      CornerLeftUp,
+      CornerRightDown,
+      CornerRightUp,
+      CornerUpLeft,
+      CornerUpRight,
+      Cpu,
+      CreditCard,
+      Crop,
+      Crosshair,
+      Database,
+      Delete,
+      Disc,
+      DivideCircle,
+      DivideSquare,
+      Divide,
+      DollarSign,
+      DownloadCloud,
+      Download,
+      Dribbble,
+      Droplet,
+      Edit2,
+      Edit3,
+      Edit,
+      ExternalLink,
+      EyeOff,
+      Eye,
+      FastForward,
+      Feather,
+      Figma,
+      FileMinus,
+      FilePlus,
+      FileText,
+      File,
+      Film,
+      Filter,
+      Flag,
+      FolderMinus,
+      FolderPlus,
+      Folder,
+      Framer,
+      Frown,
+      Gift,
+      GitBranch,
+      GitCommit,
+      GitMerge,
+      GitPullRequest,
+      Github,
+      Gitlab,
+      Globe,
+      Grid,
+      HardDrive,
+      Hash,
+      Headphones,
+      Heart,
+      HelpCircle,
+      Hexagon,
+      Home,
+      Image,
+      Inbox,
+      Info,
+      Italic,
+      Key,
+      Layers,
+      Layout,
+      LifeBuoy,
+      Link2,
+      Link,
+      List,
+      Loader,
+      Lock,
+      LogIn,
+      LogOut,
+      Mail,
+      MapPin,
+      Map,
+      Maximize2,
+      Maximize,
+      Meh,
+      Menu,
+      MessageCircle,
+      MessageSquare,
+      MicOff,
+      Mic,
+      Minimize2,
+      Minimize,
+      MinusCircle,
+      MinusSquare,
+      Minus,
+      Monitor,
+      Moon,
+      MoreHorizontal,
+      MoreVertical,
+      MousePointer,
+      Move,
+      Music,
+      Navigation2,
+      Navigation,
+      Octagon,
+      Package,
+      Paperclip,
+      PauseCircle,
+      Pause,
+      PenTool,
+      Percent,
+      PhoneCall,
+      PhoneForwarded,
+      PhoneIncoming,
+      PhoneMissed,
+      PhoneOff,
+      PhoneOutgoing,
+      Phone,
+      PieChart,
+      PlayCircle,
+      Play,
+      PlusCircle,
+      PlusSquare,
+      Plus,
+      Pocket,
+      Power,
+      Printer,
+      Radio,
+      RefreshCcw,
+      RefreshCw,
+      Repeat,
+      Rewind,
+      RotateCcw,
+      RotateCw,
+      Rss,
+      Save,
+      Scissors,
+      Search,
+      Send,
+      Server,
+      Settings,
+      Share2,
+      Share,
+      ShieldOff,
+      Shield,
+      ShoppingBag,
+      ShoppingCart,
+      Shuffle,
+      Sidebar,
+      SkipBack,
+      SkipForward,
+      Slack,
+      Slash,
+      Sliders,
+      Smartphone,
+      Smile,
+      Speaker,
+      Square,
+      Star,
+      StopCircle,
+      Sun,
+      Sunrise,
+      Sunset,
+      Table,
+      Tablet,
+      Tag,
+      Target,
+      Terminal,
+      Thermometer,
+      ThumbsDown,
+      ThumbsUp,
+      ToggleLeft,
+      ToggleRight,
+      Tool,
+      Trash2,
+      Trash,
+      Trello,
+      TrendingDown,
+      TrendingUp,
+      Triangle,
+      Truck,
+      Tv,
+      Twitch,
+      Twitter,
+      Type,
+      Umbrella,
+      Underline,
+      Unlock,
+      UploadCloud,
+      Upload,
+      UserCheck,
+      UserMinus,
+      UserPlus,
+      UserX,
+      User,
+      Users,
+      VideoOff,
+      Video,
+      Voicemail,
+      Volume1,
+      Volume2,
+      VolumeX,
+      Volume,
+      Watch,
+      WifiOff,
+      Wifi,
+      Wind,
+      XCircle,
+      XOctagon,
+      XSquare,
+      X,
+      ZapOff,
+      Zap,
+      ZoomIn,
+      ZoomOut,
+    },
+    social: {
+      Bluesky,
+      Facebook,
+      Flickr,
+      Instagram,
+      Linkedin,
+      Soundcloud,
+      Tiktok,
+      Threads,
+      X: XSocial,
+      Youtube,
+    },
+  },
+} = ts;
+
+// Explicit type avoids TS4023: upstream SVGRProps is not exported, so TypeScript
+// cannot name it in generated .d.ts files. Declaring it locally keeps the public
+// API fully expressible without depending on upstream internals.
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+}
+
+type IconComponent = (props: SVGProps<SVGSVGElement> & SVGRProps) => ReactNode;
+
+const iconSvgs: Record<string, IconComponent> = {
   Activity,
   Airplay,
   AlertCircle,
@@ -335,6 +355,7 @@ const iconSvgs = {
   BellOff,
   Bell,
   Bluetooth,
+  Bluesky,
   Bold,
   BookOpen,
   Book,
@@ -545,6 +566,7 @@ const iconSvgs = {
   Target,
   Terminal,
   Thermometer,
+  Threads,
   ThumbsDown,
   ThumbsUp,
   Tiktok,

package/lib/components/IconButton/IconButton.stories.tsx

@@ -4,7 +4,7 @@ import IconButton from './IconButton';
 import Icon from '../Icon/Icon';
 
 const meta: Meta = {
-  title: 'Components/Ready to use/IconButton',
+  title: 'Components/IconButton',
   component: IconButton,
   argTypes: {
     icon: {

package/lib/components/IconButton/IconButton.tsx

@@ -5,8 +5,7 @@ import marginsStyle, { MarginProps } from '../common/marginsStyle';
 
 export const NAME = 'ucl-uikit-icon-button';
 
-export interface IconButtonBaseProps
-  extends ButtonHTMLAttributes<HTMLButtonElement> {
+export interface IconButtonBaseProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   testId?: string;
 }
 
@@ -30,7 +29,7 @@ const IconButton = forwardRef<Ref, IconButtonProps>(
 
     const hoverStyle = css`
       &:hover {
-        color: ${theme.color.interaction.blue80};
+        color: ${theme.colour.icon.brandHover};
       }
     `;
 
@@ -41,7 +40,7 @@ const IconButton = forwardRef<Ref, IconButtonProps>(
     `;
 
     const disabledStyle = css`
-      color: ${theme.color.text.disabled};
+      color: ${theme.colour.icon.disabled};
       cursor: not-allowed;
     `;