update for initial release

.gitignore

@@ -1 +1,2 @@
+/.idea
 .DS_Store

CHANGELOG.md

@@ -0,0 +1,5 @@
+# Customizable Radio Buttons Field Changelog
+
+## 1.0.0 - 2019-04-06
+### Added
+- Initial release

LICENSE.md

@@ -0,0 +1,16 @@
+The MIT License (MIT)
+
+Copyright (c) 2018 Codemonauts
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
+documentation files (the "Software"), to deal in the Software without restriction, including without limitation the
+rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit
+persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the
+Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE
+WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR
+OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

README.md

@@ -0,0 +1,60 @@
+# Customizable Radio Buttons Field for Craft CMS 3.x
+
+![Icon](resources/buttons.png)
+
+A field type that add customizable radio buttons to Craft CMS.
+
+## Background
+
+Pictures say more than many words. With this plugin you can add radio buttons as fields, which can be images, icons, CSS classes, texts or a combination of them.
+
+## Requirements
+
+ * Craft CMS >= 3.0.0
+
+## Installation
+
+Open your terminal and go to your Craft project:
+
+``` shell
+cd /path/to/project
+composer require codemonauts/craft-customizable-radio-buttons-field
+```
+
+In the control panel, go to Settings → Plugins and click the “install” button for *Customizable radio buttons field*.
+
+## Configuration
+
+Copy the ```config.php``` to your config folder as ```buttons.php```. Then add button groups like this:
+
+``` php
+<?php
+
+return [
+  'cssFile' => '@config/path/to/my.css', // optional path to a local CSS file. This will be automatically published.
+  'cssUrl' => 'https://example.com/awesome.css' // Optional URL to an external CSS.
+  'buttonGroups' => [
+    'myhandle' => [
+      'name' => 'My awesome buttons', // The name in the field's configuration dialog.
+      'buttons' => [
+        'handle-button-1' => [
+          'image' => '@buttonsAssets/myimage.jpg', // Optional Image, overwrites 'label'.
+          'title' => 'My button 1', // Title and Alt Attributes.
+          'value' => 'myvalue', // The value to store (string)
+          'class' => 'myclass', // Optional class(es) to add to the button.
+          'label' => 'abc', // The button's text, will be overwritten when an image is set.
+        ],
+        'handle-button-2' => [
+          // ...
+        ],
+        // ...
+      ],
+      // ...
+    ],
+  ],
+];
+``` 
+
+You can have multiple button groups. They all share the same CSS file or CSS URL you can configure. See the [examples](examples/README.md).
+
+With ❤ by [codemonauts](https://codemonauts.com)

composer.json

@@ -1,42 +1,42 @@
 {
   "name": "codemonauts/craft-customizable-radio-buttons-field",
-  "description": "Radio buttons field customizable with CSS classes, icons, images and text",
+  "description": "Craft CMS plugin to add a radio buttons field, customizable with CSS classes, icons, images and text.",
   "version": "1.0.0",
   "type": "craft-plugin",
-  "minimum-stability": "dev",
   "keywords": [
     "craft",
     "cms",
     "craftcms",
-    "craft-plugin"
+    "craft-plugin",
+    "field",
+    "buttons"
   ],
-  "autoload": {
-    "psr-4": {
-      "codemonauts\\buttons\\": "src/"
-    }
-  },
+  "license": "MIT",
   "authors": [
     {
       "name": "codemonauts",
-      "homepage": "https://www.codemonauts.com"
+      "homepage": "https://codemonauts.com"
     }
   ],
-  "require": {
-    "craftcms/cms": "^3.0.0"
-  },
   "support": {
+    "source": "https://github.com/codemonauts/craft-customizable-radio-buttons-field",
     "docs": "https://github.com/codemonauts/craft-customizable-radio-buttons-field/blob/master/README.md",
     "issues": "https://github.com/codemonauts/craft-customizable-radio-buttons-field/issues"
   },
-  "license": "MIT",
+  "require": {
+    "craftcms/cms": "^3.0.0"
+  },
+  "autoload": {
+    "psr-4": {
+      "codemonauts\\buttons\\": "src/"
+    }
+  },
   "extra": {
     "handle": "buttons",
-    "name": "Customizable radio buttons field",
-    "developer": "codemonauts",
-    "developerUrl": "https://www.codemonauts.com",
-    "schemaVersion": "1.0.0",
+    "class": "codemonauts\\buttons\\Buttons",
+    "name": "Customizable Radio Buttons Field",
+    "description": "Radio buttons field, customizable with CSS classes, icons, images and text.",
     "hasCpSection": false,
-    "hasSettings": false,
-    "class": "codemonauts\\buttons\\Buttons"
+    "hasSettings": false
   }
 }

examples/README.md

@@ -0,0 +1,27 @@
+# Examples
+
+## Colorset
+
+![Screenshot Colorset](../resources/colorset.png)
+
+This example shows the usage of CSS classes and labels to let the user switch between preconfigured back- and foreground colors. So the user can see, how the color will look like.
+
+To run this example, copy the [```colorset/buttons.php```](colorset/buttons.php) to your Craft config folder and the [```colorset/colorset.css```](colorset/colorset.css) to a subfolder called ```buttons```.
+
+## Positions
+
+![Screenshot Positions](../resources/positions.png)
+
+This example uses images as buttons to switch between different positions. 
+
+To run this example, copy the [```positions/buttons.php```](positions/buttons.php) to your Craft config folder and the folder [```positions/images```](positions/images) to a subfolder called ```buttons```.
+
+## Transport
+
+![Screenshot Transport](../resources/transport.png)
+
+In this example we use the Font Awesome Icons with our radio buttons. We add the Font Awesome CSS URL and the corresponding CSS classes to the buttons.
+
+To run this example, just copy the [```transport/buttons.php```](transport/buttons.php) to your Craft config folder.
+
+

examples/colorset/buttons.php

@@ -1,10 +1,10 @@
 <?php
 
 return [
+    'cssFile' => '@config/buttons/colorset.css',
     'buttonGroups' => [
         'colorset' => [
             'name' => 'Colorset',
-            'cssFile' => '@config/buttons/colorset.css',
             'buttons' => [
                 'white' => [
                     'label' => 'T',

examples/positions/buttons.php

@@ -0,0 +1,56 @@
+<?php
+
+return [
+    'buttonGroups' => [
+        'position' => [
+            'name' => 'Position',
+            'buttons' => [
+                'left-top' => [
+                    'image' => '@config/buttons/images/left-top.svg',
+                    'title' => 'Top left',
+                    'value' => 'left-top',
+                ],
+                'center-top' => [
+                    'image' => '@config/buttons/images/center-top.svg',
+                    'title' => 'Top center',
+                    'value' => 'center-top',
+                ],
+                'right-top' => [
+                    'image' => '@config/buttons/images/right-top.svg',
+                    'title' => 'Top right',
+                    'value' => 'right-top',
+                ],
+                'left-middle' => [
+                    'image' => '@config/buttons/images/left-middle.svg',
+                    'title' => 'Middle left',
+                    'value' => 'left-middle',
+                ],
+                'center-middle' => [
+                    'image' => '@config/buttons/images/center-middle.svg',
+                    'title' => 'Middle center',
+                    'value' => 'center-middle',
+                ],
+                'right-middle' => [
+                    'image' => '@config/buttons/images/right-middle.svg',
+                    'title' => 'Middle right',
+                    'value' => 'right-middle',
+                ],
+                'left-bottom' => [
+                    'image' => '@config/buttons/images/left-bottom.svg',
+                    'title' => 'Bottom left',
+                    'value' => 'left-bottom',
+                ],
+                'center-bottom' => [
+                    'image' => '@config/buttons/images/center-bottom.svg',
+                    'title' => 'Bottom center',
+                    'value' => 'center-bottom',
+                ],
+                'right-bottom' => [
+                    'image' => '@config/buttons/images/right-bottom.svg',
+                    'title' => 'Bottom right',
+                    'value' => 'right-bottom',
+                ],
+            ],
+        ],
+    ],
+];

examples/icons/buttons.php → examples/transport/buttons.php

@@ -1,9 +1,9 @@
 <?php
 
 return [
-    'cssFile' => '@config/buttons/fontawesome.css',
+    'cssUrl' => 'https://use.fontawesome.com/releases/v5.8.1/css/all.css',
     'buttonGroups' => [
-        'icons' => [
+        'transport' => [
             'name' => 'Transport',
             'buttons' => [
                 'bicycle' => [

src/config.php

@@ -1,56 +1,43 @@
 <?php
 
 return [
-    'buttonGroups' => [
-        'position' => [
-            'name' => 'Position',
-            'buttons' => [
-                'left-top' => [
-                    'image' => '@codemonauts/buttons/resources/images/left-top.svg',
-                    'title' => 'Top left',
-                    'value' => 'left-top',
-                ],
-                'center-top' => [
-                    'image' => '@codemonauts/buttons/resources/images/center-top.svg',
-                    'title' => 'Top center',
-                    'value' => 'center-top',
-                ],
-                'right-top' => [
-                    'image' => '@codemonauts/buttons/resources/images/right-top.svg',
-                    'title' => 'Top right',
-                    'value' => 'right-top',
-                ],
-                'left-middle' => [
-                    'image' => '@codemonauts/buttons/resources/images/left-middle.svg',
-                    'title' => 'Middle left',
-                    'value' => 'left-middle',
-                ],
-                'center-middle' => [
-                    'image' => '@codemonauts/buttons/resources/images/center-middle.svg',
-                    'title' => 'Middle center',
-                    'value' => 'center-middle',
-                ],
-                'right-middle' => [
-                    'image' => '@codemonauts/buttons/resources/images/right-middle.svg',
-                    'title' => 'Middle right',
-                    'value' => 'right-middle',
-                ],
-                'left-bottom' => [
-                    'image' => '@codemonauts/buttons/resources/images/left-bottom.svg',
-                    'title' => 'Bottom left',
-                    'value' => 'left-bottom',
-                ],
-                'center-bottom' => [
-                    'image' => '@codemonauts/buttons/resources/images/center-bottom.svg',
-                    'title' => 'Bottom center',
-                    'value' => 'center-bottom',
-                ],
-                'right-bottom' => [
-                    'image' => '@codemonauts/buttons/resources/images/right-bottom.svg',
-                    'title' => 'Bottom right',
-                    'value' => 'right-bottom',
-                ],
-            ],
-        ],
-    ],
+    /*
+     * An optional CSS file, that will be bundled and published for the control panel, when a button group is used.
+     * There can only be one CSS file for all button groups.
+     *
+     * You would normaly use something like '@config/buttons/style.css'.
+     */
+    'cssFile' => '',
+
+    /*
+     * In addition to a local file, you can set an URL for an external CSS (e.g. Fontawesome)
+     */
+    'cssUrl' => '',
+
+    /*
+     * This array sets the config for all button groups. The array key is the button group's handle.
+     * See the examples in the repository.
+     *
+     * E.g.:
+     *
+     * 'buttonGroups' => [
+     *   'myhandle' => [
+     *     'name' => 'My awesome buttons', // The name in the field's configuration dialog
+     *     'buttons' => [
+     *       'handle-button-1' => [
+     *         'image' => '@buttonsAssets/myimage.jpg', // Optional Image, overwrites 'label'
+     *         'title' => 'My button 1', // Title and Alt Attributes
+     *         'value' => 'myvalue', // The value to store (string)
+     *         'class' => 'myclass', // Optional class to add to the button
+     *         'label' => 'Abc', // The button's text, will be overwritten when an image is set
+     *       ],
+     *       'handle-button-2' => [
+     *        ...
+     *       ],
+     *       ...
+     *     ],
+     *   ],
+     * ],
+     */
+    'buttonGroups' => [],
 ];