Add Material Design components and update Sass string functions

README.md

@@ -35,21 +35,21 @@ The status of [Material Design Web components (v2)](https://m2.material.io/compo
 - [x] Checkbox
 - [x] Chip
 - [x] Data table
-- [ ] Dialog
+- [x] Dialog
 - [x] Icon
-- [ ] Image list
+- [x] Image list
 - [x] List
-- [ ] Menu
-- [ ] Navigation drawer
+- [x] Menu
+- [x] Navigation drawer
 - [x] Progress indicator
     - [x] Linear Progress
     - [x] Circular Progress
-- [ ] Radio button
-- [ ] Slider
+- [x] Radio button
+- [x] Slider
 - [x] Snackbar
 - [x] Switch
 - [x] Tab Bar
-- [ ] Text field
+- [x] Text field
 - [x] Tooltip
 - [x] Typography
 

src/Components/Dialog.php

@@ -0,0 +1,74 @@
+<?php
+
+declare(strict_types=1);
+
+namespace MaterialBlade\Components;
+
+use Illuminate\View\Component;
+use Illuminate\View\ComponentAttributeBag;
+use InvalidArgumentException;
+
+/**
+ * Material Design Dialog Component
+ *
+ * @see https://m2.material.io/components/dialogs/web
+ * @see https://github.com/material-components/material-components-web/tree/master/packages/mdc-dialog
+ */
+class Dialog extends Component
+{
+    /**
+     * Create a new component instance.
+     *
+     * @param  bool  $open  Whether the dialog is open by default
+     * @param  bool  $fullscreen  Whether to render as fullscreen dialog
+     * @param  bool  $scrollable  Whether the dialog content is scrollable
+     * @param  string|null  $title  Dialog title
+     * @return void
+     */
+    public function __construct(
+        public bool $open = false,
+        public bool $fullscreen = false,
+        public bool $scrollable = false,
+        public ?string $title = null,
+    ) {
+        //
+    }
+
+    /**
+     * Get the view / contents that represent the component.
+     *
+     * @return \Illuminate\Contracts\View\View|\Closure|string
+     */
+    public function render()
+    {
+        return function (array $data): string {
+            throw_if(
+                $data['slot']->isEmpty(),
+                new InvalidArgumentException('<mbc::dialog /> component requires content in the slot')
+            );
+
+            return 'mbv::dialog';
+        };
+    }
+
+    /**
+     * Preprocess attributes for the dialog container
+     *
+     * @return ComponentAttributeBag
+     */
+    public function attributesPreprocess(ComponentAttributeBag $attributes)
+    {
+        return $attributes->merge([
+            'data-mdc-auto-init' => 'MDCDialog',
+            'role' => 'alertdialog',
+            'aria-modal' => 'true',
+            'aria-labelledby' => $this->title ? 'dialog-title' : null,
+            'aria-describedby' => 'dialog-content',
+        ])->class([
+            'mdc-dialog',
+            'mdc-dialog--open' => $this->open,
+            'mdc-dialog--fullscreen' => $this->fullscreen,
+            'mdc-dialog--scrollable' => $this->scrollable,
+        ]);
+    }
+}

src/Components/Drawer.php

@@ -1,5 +1,7 @@
 <?php
 
+declare(strict_types=1);
+
 namespace MaterialBlade\Components;
 
 use Illuminate\View\Component;
@@ -58,4 +60,9 @@ public function attributesPreprocess(ComponentAttributeBag $attributes): Compone
             'mdc-drawer--dismissible' => $this->variant === Variant::DISMISSIBLE,
         ]);
     }
+
+    public function isModal(): bool
+    {
+        return $this->variant === Variant::MODAL;
+    }
 }

src/Components/ImageList.php

@@ -0,0 +1,58 @@
+<?php
+
+declare(strict_types=1);
+
+namespace MaterialBlade\Components;
+
+use Illuminate\View\Component;
+use Illuminate\View\ComponentAttributeBag;
+use MaterialBlade\Components\ImageList\Properties\Variant;
+
+/**
+ * Material Design Image List Component
+ *
+ * @see https://m2.material.io/components/image-lists/web
+ * @see https://github.com/material-components/material-components-web/tree/master/packages/mdc-image-list
+ */
+class ImageList extends Component
+{
+    private Variant $variant;
+
+    /**
+     * Create a new component instance.
+     *
+     * @param  string  $variant  The variant of the image list (standard, masonry)
+     * @param  bool  $withTextProtection  Whether to add text protection scrim for labels
+     * @return void
+     */
+    public function __construct(
+        string $variant = 'standard',
+        public bool $withTextProtection = false,
+    ) {
+        $this->variant = Variant::fromString($variant);
+    }
+
+    /**
+     * Get the view / contents that represent the component.
+     *
+     * @return \Illuminate\Contracts\View\View|\Closure|string
+     */
+    public function render()
+    {
+        return 'mbv::image-list';
+    }
+
+    /**
+     * Preprocess attributes for the image list container
+     *
+     * @return ComponentAttributeBag
+     */
+    public function attributesPreprocess(ComponentAttributeBag $attributes)
+    {
+        return $attributes->class([
+            'mdc-image-list',
+            'mdc-image-list--masonry' => $this->variant === Variant::MASONRY,
+            'mdc-image-list--with-text-protection' => $this->withTextProtection,
+        ]);
+    }
+}

src/Components/ImageList/Properties/Variant.php

@@ -0,0 +1,15 @@
+<?php
+
+declare(strict_types=1);
+
+namespace MaterialBlade\Components\ImageList\Properties;
+
+use MaterialBlade\Traits\PropertyEnum;
+
+enum Variant: string
+{
+    use PropertyEnum;
+
+    case STANDARD = 'standard';
+    case MASONRY = 'masonry';
+}

src/Components/ImageListItem.php

@@ -0,0 +1,65 @@
+<?php
+
+declare(strict_types=1);
+
+namespace MaterialBlade\Components;
+
+use Illuminate\View\Component;
+use Illuminate\View\ComponentAttributeBag;
+
+/**
+ * Material Design Image List Item Component
+ *
+ * @see https://m2.material.io/components/image-lists/web
+ * @see https://github.com/material-components/material-components-web/tree/master/packages/mdc-image-list
+ */
+class ImageListItem extends Component
+{
+    /**
+     * Create a new component instance.
+     *
+     * @param  string|null  $src  The image source URL
+     * @param  string|null  $alt  The image alt text
+     * @param  string|null  $label  The image label/caption
+     * @param  string|null  $href  Optional link href for clickable items
+     * @return void
+     */
+    public function __construct(
+        public ?string $src = null,
+        public ?string $alt = null,
+        public ?string $label = null,
+        public ?string $href = null,
+    ) {
+        //
+    }
+
+    /**
+     * Get the view / contents that represent the component.
+     *
+     * @return \Illuminate\Contracts\View\View|\Closure|string
+     */
+    public function render()
+    {
+        return 'mbv::image-list-item';
+    }
+
+    /**
+     * Preprocess attributes for the image list item
+     *
+     * @return ComponentAttributeBag
+     */
+    public function attributesPreprocess(ComponentAttributeBag $attributes)
+    {
+        return $attributes->class([
+            'mdc-image-list__item',
+        ]);
+    }
+
+    /**
+     * Get the HTML tag for the wrapper element
+     */
+    public function getWrapperTag(): string
+    {
+        return $this->href ? 'a' : 'div';
+    }
+}

src/Components/Menu.php

@@ -0,0 +1,60 @@
+<?php
+
+declare(strict_types=1);
+
+namespace MaterialBlade\Components;
+
+use Illuminate\View\Component;
+use Illuminate\View\ComponentAttributeBag;
+
+/**
+ * Material Design Menu Component
+ *
+ * @see https://m2.material.io/components/menus/web
+ * @see https://github.com/material-components/material-components-web/tree/master/packages/mdc-menu
+ */
+class Menu extends Component
+{
+    /**
+     * Create a new component instance.
+     *
+     * @param  bool  $open  Whether the menu is open by default
+     * @param  string|null  $anchorCorner  Corner of the anchor to align the menu (TOP_LEFT, TOP_RIGHT, BOTTOM_LEFT, BOTTOM_RIGHT)
+     * @param  bool  $fixed  Whether the menu is in a fixed position
+     * @return void
+     */
+    public function __construct(
+        public bool $open = false,
+        public ?string $anchorCorner = null,
+        public bool $fixed = false,
+    ) {
+        //
+    }
+
+    /**
+     * Get the view / contents that represent the component.
+     *
+     * @return \Illuminate\Contracts\View\View|\Closure|string
+     */
+    public function render()
+    {
+        return 'mbv::menu';
+    }
+
+    /**
+     * Preprocess attributes for the menu container
+     *
+     * @return ComponentAttributeBag
+     */
+    public function attributesPreprocess(ComponentAttributeBag $attributes)
+    {
+        return $attributes->merge([
+            'data-mdc-auto-init' => 'MDCMenu',
+        ])->class([
+            'mdc-menu',
+            'mdc-menu-surface',
+            'mdc-menu--open' => $this->open,
+            'mdc-menu-surface--fixed' => $this->fixed,
+        ]);
+    }
+}

src/Components/Radio.php

@@ -0,0 +1,57 @@
+<?php
+
+declare(strict_types=1);
+
+namespace MaterialBlade\Components;
+
+use Illuminate\View\Component;
+use Illuminate\View\ComponentAttributeBag;
+
+/**
+ * Material Design Radio Button Component
+ *
+ * @see https://m2.material.io/components/radio-buttons/web
+ * @see https://github.com/material-components/material-components-web/tree/master/packages/mdc-radio
+ */
+class Radio extends Component
+{
+    /**
+     * Create a new component instance.
+     *
+     * @param  string  $color  The color theme (primary, secondary, etc.)
+     * @param  string|null  $label  The label text for the radio button
+     * @param  bool  $touch  Whether to add touch target wrapper for 48x48 touch target
+     * @return void
+     */
+    public function __construct(
+        public string $color = 'secondary',
+        public ?string $label = null,
+        public bool $touch = false,
+    ) {
+        //
+    }
+
+    /**
+     * Get the view / contents that represent the component.
+     *
+     * @return \Illuminate\Contracts\View\View|\Closure|string
+     */
+    public function render()
+    {
+        return 'mbv::radio';
+    }
+
+    /**
+     * Preprocess attributes for the radio input
+     *
+     * @return ComponentAttributeBag
+     */
+    public function attributesPreprocess(ComponentAttributeBag $attributes)
+    {
+        return $attributes->merge([
+            'type' => 'radio',
+        ])->class([
+            'mdc-radio__native-control',
+        ]);
+    }
+}