Merge pull request #129 from PrestaShop/develop

Release 1.2.1

.github/workflows/cd.yml

@@ -0,0 +1,36 @@
+name: CD Storybook
+
+on:
+  push:
+    branches:
+      - master
+
+jobs:
+  cd:
+    runs-on: ${{ matrix.os }}
+
+    strategy:
+      matrix:
+        os: [ubuntu-latest]
+        node: [14]
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@master
+
+      - name: Setup node env
+        uses: actions/setup-node@v2.1.2
+        with:
+          node-version: ${{ matrix.node }}
+
+      - name: Install dependencies
+        run: yarn
+
+      - name: Generate
+        run: yarn run build-storybook
+
+      - name: Deploy
+        uses: peaceiris/actions-gh-pages@v3
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: ./storybook-static

.github/workflows/chromatic.yml

@@ -0,0 +1,16 @@
+name: 'Chromatic'
+on:
+  push:
+    branches:
+      - master
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v1
+      - run: yarn
+      - uses: chromaui/action@v1
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}

.gitignore

@@ -10,3 +10,6 @@ node_modules/*
 .projectile
 .tern-port
 TAGS
+
+# Storybook
+storybook-static/*

.storybook/main.js

@@ -0,0 +1,17 @@
+const path = require('path');
+
+module.exports = {
+  stories: ['../stories/**/*.stories.mdx', '../stories/**/*.stories.js'],
+  addons: [
+    '@storybook/addon-a11y',
+    {
+      name: '@storybook/addon-essentials',
+    },
+  ],
+  webpackFinal: (config) => {
+    config.resolve.alias['core-js/modules'] = '@storybook/core/node_modules/core-js/modules';
+    config.module.rules[3].use = 'html-loader?minimize=false';
+
+    return config;
+  },
+};

.storybook/preview.js

@@ -0,0 +1,3 @@
+import '../dist/css/bootstrap-prestashop-ui-kit.css';
+import '../dist/js/prestashop-ui-kit.js';
+import './style.css';

.storybook/style.css

@@ -0,0 +1,7 @@
+.sbdocs-preview > div:last-of-type code {
+  color: white;
+}
+
+body {
+  background-color: transparent;
+}

README.md

@@ -15,6 +15,7 @@ npm install --save-dev prestakit
 ```
 
 Or use it directly through our CDN:
+
 ```
 [...]
 <link href="https://ui-kit.prestashop.com/backoffice/latest/css/bootstrap-prestashop-ui-kit.css" rel="stylesheet">
@@ -53,9 +54,9 @@ Open up `admin-dev/themes/new-theme/package.json` of your PrestaShop install, an
 ```js
 {
   // ...
-  prestakit: "1.0.0"
+  prestakit: "1.2.0"
   // ...
-} 
+}
 ```
 
 Change the version so it looks like this:

index.html

@@ -816,9 +816,9 @@ <h2>Breadcrumb</h2>
             </nav>
         </article>
 
-        <article id="toolbar">
-            <h2>Toolbar</h2>
-            <h3>Buttons</h3>
+        <article id="floating">
+            <h2>Floating</h2>
+            <h3>Button</h3>
             <div class="toolbar">
                 <a class="toolbar-button" href="#">
                     <i class="material-icons">assessment</i>
@@ -835,6 +835,23 @@ <h3>Buttons</h3>
             </div>
         </article>
 
+        <article id="toolbar">
+            <h2>Toolbar</h2>
+            <h3>Buttons</h3>
+            <div class="floating-buttons">
+              <div class="btn-floating">
+                <button class="btn btn-primary collapsed" data-toggle="collapse" data-target=".btn-floating-container">
+                  <i class="material-icons">add</i>
+                </button>
+                <div class="btn-floating-container collapse">
+                  <div class="btn-floating-menu">
+                    <a class="btn btn-floating-item" href="#">Upload a module <i class="material-icons">download</i></a>
+                  </div>
+                </div>
+              </div>
+            </div>
+        </article>
+
         <article id="buttons">
             <h2>Buttons</h2>
             <button type="button" class="btn btn-primary">Primary</button>