Merge pull request #326 from mollie/feature/implements-mollie-components

Feature/implements mollie components
mollie · Dec 2, 2019 · d336d04 · d336d04
2 parents a5650bc + 602d3db
commit d336d04
Show file tree

Hide file tree

Showing 55 changed files with 11,288 additions and 395 deletions.
diff --git a/.babelrc b/.babelrc
@@ -0,0 +1,16 @@
+{
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "useBuiltIns": "entry",
+        "targets": {
+          "browsers": [
+            "latest 2 versions",
+            "ie 10"
+          ]
+        }
+      }
+    ]
+  ]
+}
diff --git a/.gitattributes b/.gitattributes
@@ -18,3 +18,5 @@ docker-sync.yml export-ignore
 Makefile export-ignore
 phpunit.xml.dist export-ignore
 traefik.yml export-ignore
+node_modules export-ignore
+*.map export-ignore
diff --git a/.gitignore b/.gitignore
@@ -3,12 +3,14 @@
 /nbproject
 /vendor/
 /coverage/
+/node_modules/
 /.idea
 /.idea.example/dictionaries/
 /.idea.example/workspace.xml
 /.idea.example/tasks.xml
 /.idea.example/deployment.xml
 /.idea.example/vagrant.xml
 /.idea.example/codeStyles/
+/assets/js/*.map
 
 .env
diff --git a/assets/css/mollie-components.css b/assets/css/mollie-components.css
@@ -0,0 +1,61 @@
+.mollie-components {
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.mollie-components .mollie-component-label {
+    font-weight: 400;
+}
+
+.mollie-components .mollie-component {
+    width: 100%;
+    min-height: 34px;
+    background-color: #FFF;
+    border-radius: 6px;
+    color: #222;
+    transition: all .05s ease;
+    box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.1),
+    0px 1px 3px 0px rgba(0, 0, 0, 0.1),
+    0px 0px 0px 1px rgba(0, 0, 0, 0.05);
+    border: 2px solid transparent;
+}
+
+.mollie-components .mollie-component iframe {
+    border-radius: 6px;
+}
+
+.mollie-components div {
+    flex-grow: 1;
+    width: 100%;
+}
+
+.mollie-components div + div {
+    display: block;
+    margin-top: .63em;
+}
+
+.mollie-components #expiryDate,
+.mollie-components #verificationCode {
+    max-width: 50%;
+}
+
+.mollie-components #expiryDate {
+    padding-right: 5%;
+}
+
+.mollie-components #verificationCode {
+    padding-left: 5%;
+}
+
+.mollie-components .mollie-component.is-invalid {
+    box-shadow: 0px 1px 1px 0px rgba(255, 51, 68, 0.1),
+    0px 1px 3px 0px rgba(255, 51, 68, 0.1);
+    border-color: #fff0f0;
+}
+
+.mollie-components .mollie-component.has-focus {
+    box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.1),
+    0px 2px 6px 0px rgba(0, 0, 0, 0.1),
+    0px 0px 0px 1px rgba(0, 0, 0, 0.05);
+    border-color: #07f;
+}
diff --git a/assets/images/lock-icon.svg b/assets/images/lock-icon.svg
diff --git a/assets/images/mollie-logo.svg b/assets/images/mollie-logo.svg
diff --git a/assets/js/applepay.min.js b/assets/js/applepay.min.js
diff --git a/assets/js/babel-polyfill.min.js b/assets/js/babel-polyfill.min.js
diff --git a/assets/js/mollie-components.min.js b/assets/js/mollie-components.min.js
diff --git a/assets/js/settings.min.js b/assets/js/settings.min.js
diff --git a/composer.json b/composer.json
@@ -27,16 +27,13 @@
   "autoload": {
     "psr-0": {
       "Mollie_WC_": "./src"
-    },
-    "psr-4": {
-      "Mollie\\": "./src/Mollie"
     }
   },
   "autoload-dev": {
     "psr-4": {
-      "MollieTests\\": "tests/php",
-      "MollieTests\\Unit\\": "tests/php/Unit",
-      "MollieTests\\Functional\\": "tests/php/Functional"
+      "Mollie\\WooCommerceTests\\": "tests/php",
+      "Mollie\\WooCommerceTests\\Unit\\": "tests/php/Unit",
+      "Mollie\\WooCommerceTests\\Functional\\": "tests/php/Functional"
     }
   },
   "repositories": [

diff --git a/inc/functions.php b/inc/functions.php
@@ -0,0 +1,4 @@
+<?php
+
+require_once __DIR__ . '/utils.php';
+require_once __DIR__ . '/woocommerce.php';
diff --git a/inc/settings/mollie_components.php b/inc/settings/mollie_components.php
@@ -0,0 +1,168 @@
+<?php
+
+return [
+    [
+        'type' => 'title',
+        'id' => 'mollie_components_styles',
+        'title' => _x(
+            'Base Styles',
+            'Mollie Components Settings',
+            'mollie-payments-for-woocommerce'
+        ),
+    ],
+    Mollie_WC_Components_StylesPropertiesDictionary::BACKGROUND_COLOR => [
+        'type' => 'color',
+        'id' => 'mollie_components_' . Mollie_WC_Components_StylesPropertiesDictionary::BACKGROUND_COLOR,
+        'title' => _x('Background Color', 'Mollie Components Settings', 'mollie-payments-for-woocommerce'),
+        'default' => '#ffffff',
+    ],
+    Mollie_WC_Components_StylesPropertiesDictionary::TEXT_COLOR => [
+        'type' => 'color',
+        'id' => 'mollie_components_' . Mollie_WC_Components_StylesPropertiesDictionary::TEXT_COLOR,
+        'title' => _x('Text Color', 'Mollie Components Settings', 'mollie-payments-for-woocommerce'),
+        'default' => '#000000',
+    ],
+    Mollie_WC_Components_StylesPropertiesDictionary::INPUT_PLACEHOLDER => [
+        'type' => 'color',
+        'id' => 'mollie_components_' . Mollie_WC_Components_StylesPropertiesDictionary::INPUT_PLACEHOLDER,
+        'title' => _x('Placeholder Color', 'Mollie Components Settings', 'mollie-payments-for-woocommerce'),
+        'default' => '#cccccc',
+    ],
+    Mollie_WC_Components_StylesPropertiesDictionary::FONT_SIZE => [
+        'type' => 'text',
+        'id' => 'mollie_components_' . Mollie_WC_Components_StylesPropertiesDictionary::FONT_SIZE,
+        'title' => _x('Font Size', 'Mollie Components Settings', 'mollie-payments-for-woocommerce'),
+        'desc_tip' => _x(
+            'Font size define the size for the font in the components. `em`, `px`, `rem` units are allowed.',
+            'Mollie Components Settings',
+            'mollie-payments-for-woocommerce'
+        ),
+        'default' => '16px',
+    ],
+    Mollie_WC_Components_StylesPropertiesDictionary::FONT_WEIGHT => [
+        'type' => 'select',
+        'id' => 'mollie_components_' . Mollie_WC_Components_StylesPropertiesDictionary::FONT_WEIGHT,
+        'title' => _x('Font Weight', 'Mollie Components Settings', 'mollie-payments-for-woocommerce'),
+        'default' => 'normal',
+        'options' => [
+            'lighter' => _x('Lighter', 'Mollie Components Settings', 'mollie-payments-for-woocommerce'),
+            'normal' => _x('Normal', 'Mollie Components Settings', 'mollie-payments-for-woocommerce'),
+            'bolder' => _x('Bold', 'Mollie Components Settings', 'mollie-payments-for-woocommerce'),
+        ],
+    ],
+    Mollie_WC_Components_StylesPropertiesDictionary::LETTER_SPACING => [
+        'type' => 'number',
+        'id' => 'mollie_components_' . Mollie_WC_Components_StylesPropertiesDictionary::LETTER_SPACING,
+        'title' => _x('Letter Spacing', 'Mollie Components Settings', 'mollie-payments-for-woocommerce'),
+        'default' => '0',
+    ],
+    Mollie_WC_Components_StylesPropertiesDictionary::LINE_HEIGHT => [
+        'type' => 'number',
+        'id' => 'mollie_components_' . Mollie_WC_Components_StylesPropertiesDictionary::LINE_HEIGHT,
+        'title' => _x('Line Height', 'Mollie Components Settings', 'mollie-payments-for-woocommerce'),
+        'default' => '1.2',
+        'custom_attributes' => [
+            'step' => '.1',
+        ],
+    ],
+    Mollie_WC_Components_StylesPropertiesDictionary::PADDING => [
+        'type' => 'text',
+        'id' => 'mollie_components_' . Mollie_WC_Components_StylesPropertiesDictionary::PADDING,
+        'title' => _x('Padding', 'Mollie Components Settings', 'mollie-payments-for-woocommerce'),
+        'desc_tip' => _x(
+            'Add padding to the components. Eg. `16px 16px 16px 16px` and `em`, `px`, `rem` units are allowed.',
+            'Mollie Components Settings',
+            'mollie-payments-for-woocommerce'
+        ),
+        'default' => '.63em',
+    ],
+    Mollie_WC_Components_StylesPropertiesDictionary::TEXT_ALIGN => [
+        'type' => 'select',
+        'id' => 'mollie_components_' . Mollie_WC_Components_StylesPropertiesDictionary::TEXT_ALIGN,
+        'title' => _x('Text Align', 'Mollie Components Settings', 'mollie-payments-for-woocommerce'),
+        'default' => 'left',
+        'options' => [
+            'left' => _x('Left', 'Mollie Components Settings', 'mollie-payments-for-woocommerce'),
+            'right' => _x('Right', 'Mollie Components Settings', 'mollie-payments-for-woocommerce'),
+            'center' => _x('Center', 'Mollie Components Settings', 'mollie-payments-for-woocommerce'),
+            'justify' => _x('Justify', 'Mollie Components Settings', 'mollie-payments-for-woocommerce'),
+        ],
+    ],
+    Mollie_WC_Components_StylesPropertiesDictionary::TEXT_TRANSFORM => [
+        'type' => 'select',
+        'id' => 'mollie_components_' . Mollie_WC_Components_StylesPropertiesDictionary::TEXT_TRANSFORM,
+        'title' => _x('Text Transform', 'Mollie Components Settings', 'mollie-payments-for-woocommerce'),
+        'default' => 'none',
+        'options' => [
+            'none' => _x(
+                'None',
+                'Mollie Components Settings',
+                'mollie-payments-for-woocommerce'
+            ),
+            'capitalize' => _x(
+                'Capitalize',
+                'Mollie Components Settings',
+                'mollie-payments-for-woocommerce'
+            ),
+            'uppercase' => _x(
+                'Uppercase',
+                'Mollie Components Settings',
+                'mollie-payments-for-woocommerce'
+            ),
+            'lowercase' => _x(
+                'Lowercase',
+                'Mollie Components Settings',
+                'mollie-payments-for-woocommerce'
+            ),
+            'full-width' => _x(
+                'Full Width',
+                'Mollie Components Settings',
+                'mollie-payments-for-woocommerce'
+            ),
+            'full-size-kana' => _x(
+                'Full Size Kana',
+                'Mollie Components Settings',
+                'mollie-payments-for-woocommerce'
+            ),
+        ],
+    ],
+    [
+        'type' => 'sectionend',
+        'id' => 'mollie_components_styles',
+    ],
+    [
+        'type' => 'title',
+        'id' => 'mollie_components_invalid_styles',
+        'title' => _x(
+            'Invalid Status Styles',
+            'Mollie Components Settings',
+            'mollie-payments-for-woocommerce'
+        ),
+    ],
+    Mollie_WC_Components_StylesPropertiesDictionary::INVALID_TEXT_COLOR => [
+        'type' => 'color',
+        'id' => 'mollie_components_' . Mollie_WC_Components_StylesPropertiesDictionary::INVALID_TEXT_COLOR,
+        'title' => _x('Text Color', 'Mollie Components Settings', 'mollie-payments-for-woocommerce'),
+        'desc_tip' => _x(
+            'Text Color for invalid input.',
+            'Mollie Components Settings',
+            'mollie-payments-for-woocommerce'
+        ),
+        'default' => '#000000',
+    ],
+    Mollie_WC_Components_StylesPropertiesDictionary::INVALID_BACKGROUND_COLOR => [
+        'type' => 'color',
+        'id' => 'mollie_components_' . Mollie_WC_Components_StylesPropertiesDictionary::INVALID_BACKGROUND_COLOR,
+        'title' => _x('Background Color', 'Mollie Components Settings', 'mollie-payments-for-woocommerce'),
+        'desc_tip' => _x(
+            'Background Color for invalid input.',
+            'Mollie Components Settings',
+            'mollie-payments-for-woocommerce'
+        ),
+        'default' => '#FFF0F0',
+    ],
+    [
+        'type' => 'sectionend',
+        'id' => 'mollie_components_invalid_styles',
+    ],
+];
diff --git a/inc/settings/mollie_components_enabler.php b/inc/settings/mollie_components_enabler.php
@@ -0,0 +1,13 @@
+<?php
+
+return [
+    'mollie_components_enabled' => [
+        'type' => 'checkbox',
+        'title' => __('Enable Mollie Components', 'mollie-payments-for-woocommerce'),
+        'description' => __(
+            'Enable the Mollie Components for this Gateway',
+            'mollie-payments-for-woocommerce'
+        ),
+        'default' => 'no',
+    ],
+];