refactor(widget): migrate several widgets to v2 system

components/auto_inline_icon/commons/auto_inline_icon.lua

@@ -7,7 +7,7 @@
 
 local Class = require('Module:Class')
 local Lua = require('Module:Lua')
-local InlineIconAndText = require('Module:Widget/InlineIconAndText')
+local InlineIconAndText = require('Module:Widget/Misc/InlineIconAndText')
 local ManualData = Lua.requireIfExists('Module:InlineIcon/ManualData', {loadData = true})
 
 local AutoInlineIcon = {}
@@ -58,14 +58,14 @@ end
 ---@return IconWidget
 function AutoInlineIcon._iconCreator(data)
 	if data.iconType == 'image' then
-		local IconImage = require('Module:Widget/Icon/Image')
+		local IconImage = require('Module:Widget/Image/Icon/Image')
 		return IconImage{
 			imageLight = data.iconLight,
 			imageDark = data.iconDark,
 			link = data.link,
 		}
 	elseif data.iconType == 'fa' then
-		local IconFa = require('Module:Widget/Icon/Fontawesome')
+		local IconFa = require('Module:Widget/Image/Icon/Fontawesome')
 		return IconFa{
 			iconName = data.icon,
 			link = data.link,

components/widget/basic/widget_basic_button.lua

@@ -0,0 +1,73 @@
+---
+-- @Liquipedia
+-- wiki=commons
+-- page=Module:Widget/Basic/Button
+--
+-- Please see https://github.com/Liquipedia/Lua-Modules to contribute
+--
+
+local Class = require('Module:Class')
+local Lua = require('Module:Lua')
+
+local Widget = Lua.import('Module:Widget')
+local HtmlWidgets = Lua.import('Module:Widget/Html/All')
+local Link = Lua.import('Module:Widget/Basic/Link')
+local Div = HtmlWidgets.Div
+
+---@class ButtonWidgetParameters
+---@field title string?
+---@field link string?
+---@field linktype 'internal'|'external'|nil
+---@field variant 'primary'|'secondary'|'ghost'|nil
+---@field size 'sm'|'md'|'lg'|nil
+
+---@class ButtonWidget: Widget
+---@operator call(ButtonWidgetParameters): ButtonWidget
+
+local Button = Class.new(Widget)
+
+---@return Widget
+function Button:render()
+	--- MW Parser does not allowed the <button> tag, so we use a DIV for now instead
+	local cssClasses = {
+		'btn',
+		'btn-new',
+	}
+	if self.props.variant == 'primary' or self.props.variant == nil then
+		table.insert(cssClasses, 'btn-primary')
+	elseif self.props.variant == 'secondary' then
+		table.insert(cssClasses, 'btn-secondary')
+	end
+
+	if self.props.size == 'sm' then
+		table.insert(cssClasses, 'btn-small')
+	elseif self.props.size == 'lg' then
+		table.insert(cssClasses, 'btn-large')
+	end
+
+	local button = Div{
+		classes = cssClasses,
+		attributes = {
+			title = self.props.title,
+			['aria-label'] = self.props.title,
+			role = 'button',
+			tabindex = '0',
+		},
+		children = self.props.children,
+	}
+
+	if not self.props.link then
+		return button
+	end
+
+	-- Have to wrap it in an extra div to prevent the mediawiki parser from messing it up
+	return Div{children = {
+		Link{
+			link = self.props.link,
+			linktype = self.props.linktype,
+			children = {button},
+		}
+	}}
+end
+
+return Button

components/widget/widget_data_table.lua → components/widget/basic/widget_basic_data_table.lua

@@ -1,7 +1,7 @@
 ---
 -- @Liquipedia
 -- wiki=commons
--- page=Module:Widget/DataTable
+-- page=Module:Widget/Basic/DataTable
 --
 -- Please see https://github.com/Liquipedia/Lua-Modules to contribute
 --

components/widget/basic/widget_basic_link.lua

@@ -0,0 +1,51 @@
+---
+-- @Liquipedia
+-- wiki=commons
+-- page=Module:Widget/Basic/Link
+--
+-- Please see https://github.com/Liquipedia/Lua-Modules to contribute
+--
+
+local Class = require('Module:Class')
+local Lua = require('Module:Lua')
+
+local HtmlWidgets = Lua.import('Module:Widget/Html/All')
+local Fragment = HtmlWidgets.Fragment
+local Widget = Lua.import('Module:Widget')
+local WidgetUtil = Lua.import('Module:Widget/Util')
+
+---@class LinkWidgetParameters
+---@field children (Widget|Html|string|number)[]
+---@field link string
+---@field linktype 'internal'|'external'|nil
+
+---@class LinkWidget: Widget
+---@operator call(LinkWidgetParameters): LinkWidget
+local Link = Class.new(Widget)
+
+---@return Widget
+function Link:render()
+	if self.props.linktype == 'external' then
+		return Fragment{
+			children = WidgetUtil.collect(
+				'[',
+				self.props.link,
+				' ',
+				unpack(self.props.children),
+				']'
+			)
+		}
+	end
+
+	return Fragment{
+		children = WidgetUtil.collect(
+			'[[',
+			self.props.link,
+			'|',
+			unpack(self.props.children),
+			']]'
+		)
+	}
+end
+
+return Link

components/widget/widget_icon.lua → components/widget/image/widget_image_icon.lua

@@ -1,7 +1,7 @@
 ---
 -- @Liquipedia
 -- wiki=commons
--- page=Module:Widget/Icon
+-- page=Module:Widget/Image/Icon
 --
 -- Please see https://github.com/Liquipedia/Lua-Modules to contribute
 --
@@ -12,17 +12,12 @@ local Lua = require('Module:Lua')
 local Widget = Lua.import('Module:Widget')
 
 ---@class IconWidget: Widget
----@operator call(WidgetParameters): IconWidget
-local Icon = Class.new(
-	Widget,
-	function(self, input)
-	end
-)
+---@operator call(table): IconWidget
+local Icon = Class.new(Widget)
 
----@param children string[]
 ---@return string?
-function Icon:make(children)
-	error('Widget/Icon is an interface and should not be instantiated directly')
+function Icon:render()
+	error('Widget/Image/Icon is an interface and should not be instantiated directly')
 end
 
 return Icon

components/widget/widget_icon_fontawesome.lua → components/widget/image/widget_image_icon_fontawesome.lua

@@ -1,7 +1,7 @@
 ---
 -- @Liquipedia
 -- wiki=commons
--- page=Module:Widget/Icon/Fontawesome
+-- page=Module:Widget/Image/Icon/Fontawesome
 --
 -- Please see https://github.com/Liquipedia/Lua-Modules to contribute
 --
@@ -10,21 +10,15 @@ local Class = require('Module:Class')
 local Icon = require('Module:Icon')
 local Lua = require('Module:Lua')
 
-local WidgetIcon = Lua.import('Module:Widget/Icon')
+local WidgetIcon = Lua.import('Module:Widget/Image/Icon')
 
 ---@class IconFontawesomeWidget: IconWidget
 ---@operator call(IconProps): IconFontawesomeWidget
 ---@field props IconProps
-local FontawesomeIcon = Class.new(
-	WidgetIcon,
-	function(self, input)
-		self.props = input
-	end
-)
+local FontawesomeIcon = Class.new(WidgetIcon)
 
----@param children string[]
 ---@return string?
-function FontawesomeIcon:make(children)
+function FontawesomeIcon:render()
 	return Icon.makeIcon(self.props)
 end
 

components/widget/widget_icon_image.lua → components/widget/image/widget_image_icon_image.lua

@@ -1,7 +1,7 @@
 ---
 -- @Liquipedia
 -- wiki=commons
--- page=Module:Widget/Icon/Image
+-- page=Module:Widget/Image/Icon/Image
 --
 -- Please see https://github.com/Liquipedia/Lua-Modules to contribute
 --
@@ -10,26 +10,20 @@ local Class = require('Module:Class')
 local Image = require('Module:Image')
 local Lua = require('Module:Lua')
 
-local WidgetIcon = Lua.import('Module:Widget/Icon')
+local WidgetIcon = Lua.import('Module:Widget/Image/Icon')
 
----@class IconImageWidgetParameters: WidgetParameters
+---@class IconImageWidgetParameters
 ---@field imageLight string?
 ---@field imageDark string?
 ---@field link string?
 
 ---@class IconImageWidget: IconWidget
 ---@operator call(IconImageWidgetParameters): IconImageWidget
 ---@field props IconImageWidgetParameters
-local Icon = Class.new(
-	WidgetIcon,
-	function(self, input)
-		self.props = input
-	end
-)
+local Icon = Class.new(WidgetIcon)
 
----@param children string[]
 ---@return string?
-function Icon:make(children)
+function Icon:render()
 	return Image.display(
 		self.props.imageLight,
 		self.props.imageDark,

components/widget/misc/widget_misc_inline_icon_and_text.lua

@@ -0,0 +1,44 @@
+---
+-- @Liquipedia
+-- wiki=commons
+-- page=Module:Widget/Misc/InlineIconAndText
+--
+-- Please see https://github.com/Liquipedia/Lua-Modules to contribute
+--
+
+local Class = require('Module:Class')
+local Lua = require('Module:Lua')
+
+local Widget = Lua.import('Module:Widget')
+local HtmlWidgets = Lua.import('Module:Widget/Html/All')
+
+local Link = Lua.import('Module:Widget/Basic/Link')
+local Span = HtmlWidgets.Span
+
+---@class InlineIconAndTextWidgetParameters
+---@field icon IconWidget
+---@field text string?
+---@field link string?
+
+---@class InlineIconAndTextWidget: Widget
+---@operator call(InlineIconAndTextWidgetParameters): InlineIconAndTextWidget
+
+local InlineIconAndText = Class.new(Widget)
+
+---@return Widget
+function InlineIconAndText:render()
+	return Span{
+		classes = {'image-link'},
+		children = {
+			self.props.icon,
+			' ',
+			Link{
+				link = self.props.link,
+				linktype = 'internal',
+				children = {self.props.text}
+			}
+		},
+	}
+end
+
+return InlineIconAndText

components/widget/widget_all.lua

@@ -30,7 +30,7 @@ Widgets.TableRow = Lua.import('Module:Widget/Table/Row')
 Widgets.TableCell = Lua.import('Module:Widget/Table/Cell')
 
 --- Data Table Widgets (html-table)
-Widgets.DataTable = Lua.import('Module:Widget/DataTable')
+Widgets.DataTable = Lua.import('Module:Widget/Basic/DataTable')
 
 --- Base Html Widgets
 Widgets.Div = Lua.import('Module:Widget/Html/Div')