chore(demo): add checkbox/chip/dropdown/list/select demo

demo/app.js

@@ -52,6 +52,56 @@ function AppDefaultConfig($locationProvider, $stateProvider, markedProvider) {
                     template: require('./components/button/demo.html'),
                 },
             },
+        })
+        .state('app.components.checkbox', {
+            url: 'checkbox',
+            views: {
+                'main@': {
+                    controller: 'DemoCheckboxController',
+                    controllerAs: 'vm',
+                    template: require('./components/checkbox/demo.html'),
+                },
+            },
+        })
+        .state('app.components.chip', {
+            url: 'chip',
+            views: {
+                'main@': {
+                    controller: 'DemoChipController',
+                    controllerAs: 'vm',
+                    template: require('./components/chip/demo.html'),
+                },
+            },
+        })
+        .state('app.components.dropdown', {
+            url: 'dropdown',
+            views: {
+                'main@': {
+                    controller: 'DemoDropdownController',
+                    controllerAs: 'vm',
+                    template: require('./components/dropdown/demo.html'),
+                },
+            },
+        })
+        .state('app.components.list', {
+            url: 'list',
+            views: {
+                'main@': {
+                    controller: 'DemoListController',
+                    controllerAs: 'vm',
+                    template: require('./components/list/demo.html'),
+                },
+            },
+        })
+        .state('app.components.select', {
+            url: 'select',
+            views: {
+                'main@': {
+                    controller: 'DemoSelectController',
+                    controllerAs: 'vm',
+                    template: require('./components/select/demo.html'),
+                },
+            },
         });
 }
 

demo/components/checkbox/controller.js

@@ -0,0 +1,34 @@
+function DemoCheckboxController() {
+    'ngInject';
+
+    const vm = this;
+
+    /////////////////////////////
+    //                         //
+    //    Public attributes    //
+    //                         //
+    /////////////////////////////
+
+    /**
+     * The various type of checkboxes states and status.
+     *
+     * @type {Object}
+     */
+    vm.checkboxes = {
+        model: {
+            checked: true,
+            unchecked: false,
+        },
+        states: {
+            disabled: true,
+        },
+    };
+}
+
+/////////////////////////////
+
+angular.module('lumx-demo').controller('DemoCheckboxController', DemoCheckboxController);
+
+/////////////////////////////
+
+export { DemoCheckboxController };

demo/components/checkbox/demo.html

@@ -0,0 +1,2 @@
+<main-header></main-header>
+<main-content component="checkbox"></main-content>

demo/components/checkbox/doc.md

@@ -0,0 +1,5 @@
+# Checkbox
+
+**Checkboxes allow users to select none, one, or more items.**
+
+<demo-block component="checkbox" partial="default"></demo-block>

demo/components/checkbox/partials/default.html

@@ -0,0 +1,31 @@
+<div class="lumx-spacing-margin-bottom-big">
+    <lx-checkbox lx-theme="{{ demoBlock.theme }}" ng-model="vm.checkboxes.model.checked">
+        <lx-checkbox-label>Checkbox</lx-checkbox-label>
+    </lx-checkbox>
+</div>
+
+<div class="lumx-spacing-margin-bottom-big">
+    <lx-checkbox lx-theme="{{ demoBlock.theme }}" ng-model="vm.checkboxes.model.unchecked">
+        <lx-checkbox-label>
+            Checkbox with help
+        </lx-checkbox-label>
+
+        <lx-checkbox-help>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere faucibus efficitur.
+        </lx-checkbox-help>
+    </lx-checkbox>
+</div>
+
+<lx-checkbox
+    lx-theme="{{ demoBlock.theme }}"
+    ng-disabled="vm.checkboxes.states.disabled"
+    ng-model="vm.checkboxes.model.unchecked"
+>
+    <lx-checkbox-label>
+        Disable checkbox with help
+    </lx-checkbox-label>
+
+    <lx-checkbox-help>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere faucibus efficitur.
+    </lx-checkbox-help>
+</lx-checkbox>

demo/components/chip/controller.js

@@ -0,0 +1,115 @@
+import { mdiCheck, mdiClose, mdiCloseCircle, mdiEmail, mdiFilterVariant } from '@lumx/icons';
+
+/////////////////////////////
+
+function DemoChipController(LxNotificationService) {
+    'ngInject';
+
+    const vm = this;
+
+    /////////////////////////////
+    //                         //
+    //    Public attributes    //
+    //                         //
+    /////////////////////////////
+
+    /**
+     * The icons to use in the template.
+     *
+     * @type {Object}
+     * @constant
+     * @readonly
+     */
+    vm.icons = {
+        mdiCheck,
+        mdiClose,
+        mdiCloseCircle,
+        mdiEmail,
+        mdiFilterVariant,
+    };
+
+    /**
+     * Indicates if the chip is active or not.
+     *
+     * @type {Object}
+     */
+    vm.isSelected = {
+        filter: [false],
+        multiple: [false, false, false, false, false, false],
+        unique: [false, false, false, false, false, false],
+    };
+
+    /////////////////////////////
+    //                         //
+    //     Public functions    //
+    //                         //
+    /////////////////////////////
+
+    /**
+     * When the chip has been clicked, display a notification.
+     */
+    function clickCallback() {
+        LxNotificationService.success('Callback');
+    }
+
+    /**
+     * Toggle chip selected state.
+     *
+     * @param {string} kind  The chip kind.
+     * @param {number} index The chip index.
+     */
+    function toggleSelected(kind, index) {
+        vm.isSelected[kind][index] = !vm.isSelected[kind][index];
+
+        if (kind === 'unique') {
+            for (let i = 0, len = vm.isSelected.unique.length; i < len; i++) {
+                if (i !== index) {
+                    vm.isSelected.unique[i] = false;
+                }
+            }
+        }
+    }
+
+    /**
+     * Select chip.
+     *
+     * @param {string} kind  The chip kind.
+     * @param {number} index The chip index.
+     */
+    function select(kind, index) {
+        if (vm.isSelected[kind][index]) {
+            return;
+        }
+
+        vm.isSelected[kind][index] = true;
+    }
+
+    /**
+     * Unselect chip.
+     *
+     * @param {string} kind  The chip kind.
+     * @param {number} index The chip index.
+     */
+    function unselect(kind, index) {
+        if (!vm.isSelected[kind][index]) {
+            return;
+        }
+
+        vm.isSelected[kind][index] = false;
+    }
+
+    /////////////////////////////
+
+    vm.clickCallback = clickCallback;
+    vm.toggleSelected = toggleSelected;
+    vm.select = select;
+    vm.unselect = unselect;
+}
+
+/////////////////////////////
+
+angular.module('lumx-demo').controller('DemoChipController', DemoChipController);
+
+/////////////////////////////
+
+export { DemoChipController };

demo/components/chip/demo.html

@@ -0,0 +1,2 @@
+<main-header></main-header>
+<main-content component="chip"></main-content>

demo/components/chip/doc.md

@@ -0,0 +1,34 @@
+# Chip
+
+**Chips display distinct inputs, attributes, or actions.**
+Use chips to display choices, as inputs or to filter content.
+
+## Default
+
+Use default to display distinct attributes such as tags on a blog post.
+
+<demo-block component="chip" partial="default"></demo-block>
+
+## Dismissible
+
+Use dismissible when chips can be removed by users.
+
+<demo-block component="chip" partial="dismissible"></demo-block>
+
+## Choice
+
+Use choice when users makes an exclusive choice between values. When space is not a constraint, use this chip instead of a select component.
+
+<demo-block component="chip" partial="choice"></demo-block>
+
+## Filter
+
+Use Filter as an entry point to one or several choices. When it is active, it can have a clear button.
+
+<demo-block component="chip" partial="filter"></demo-block>
+
+## Small
+
+Use small when space is a constraint, as in areas like text fields, selects, dropdown menus and metadata.
+
+<demo-block component="chip" partial="small"></demo-block>

demo/components/chip/partials/choice.html

@@ -0,0 +1,49 @@
+<demo-grid>
+    <lx-chip
+        lx-is-selected="vm.isSelected.unique[0]"
+        lx-on-click="vm.toggleSelected('unique', 0)"
+        lx-theme="{{ demoBlock.theme }}"
+    >
+        <lx-chip-label>Am</lx-chip-label>
+    </lx-chip>
+
+    <lx-chip
+        lx-is-selected="vm.isSelected.unique[1]"
+        lx-on-click="vm.toggleSelected('unique', 1)"
+        lx-theme="{{ demoBlock.theme }}"
+    >
+        <lx-chip-label>Stram</lx-chip-label>
+    </lx-chip>
+
+    <lx-chip
+        lx-is-selected="vm.isSelected.unique[2]"
+        lx-on-click="vm.toggleSelected('unique', 2)"
+        lx-theme="{{ demoBlock.theme }}"
+    >
+        <lx-chip-label>Gram</lx-chip-label>
+    </lx-chip>
+
+    <lx-chip
+        lx-is-selected="vm.isSelected.unique[3]"
+        lx-on-click="vm.toggleSelected('unique', 3)"
+        lx-theme="{{ demoBlock.theme }}"
+    >
+        <lx-chip-label>Pic</lx-chip-label>
+    </lx-chip>
+
+    <lx-chip
+        lx-is-selected="vm.isSelected.unique[4]"
+        lx-on-click="vm.toggleSelected('unique', 4)"
+        lx-theme="{{ demoBlock.theme }}"
+    >
+        <lx-chip-label>Pic</lx-chip-label>
+    </lx-chip>
+
+    <lx-chip
+        lx-is-selected="vm.isSelected.unique[5]"
+        lx-on-click="vm.toggleSelected('unique', 5)"
+        lx-theme="{{ demoBlock.theme }}"
+    >
+        <lx-chip-label>Colegram</lx-chip-label>
+    </lx-chip>
+</demo-grid>

demo/components/chip/partials/default.html

@@ -0,0 +1,15 @@
+<demo-grid>
+    <lx-chip lx-theme="{{ demoBlock.theme }}">
+        <lx-chip-label>Default</lx-chip-label>
+    </lx-chip>
+
+    <lx-chip lx-theme="{{ demoBlock.theme }}">
+        <lx-chip-before>
+            <lx-icon lx-path="{{ vm.icons.mdiEmail }}" lx-size="xs"></lx-icon>
+        </lx-chip-before>
+
+        <lx-chip-label>
+            Rich
+        </lx-chip-label>
+    </lx-chip>
+</demo-grid>

demo/components/chip/partials/dismissible.html

@@ -0,0 +1,25 @@
+<demo-grid>
+    <lx-chip lx-theme="{{ demoBlock.theme }}" lx-on-click="vm.clickCallback()">
+        <lx-chip-label>
+            Dismissible
+        </lx-chip-label>
+
+        <lx-chip-after>
+            <lx-icon lx-path="{{ vm.icons.mdiClose }}" lx-size="xs"></lx-icon>
+        </lx-chip-after>
+    </lx-chip>
+
+    <lx-chip lx-theme="{{ demoBlock.theme }}" lx-on-click="vm.clickCallback()">
+        <lx-chip-before>
+            <lx-icon lx-path="{{ vm.icons.mdiEmail }}" lx-size="xs"></lx-icon>
+        </lx-chip-before>
+
+        <lx-chip-label>
+            Dismissible rich
+        </lx-chip-label>
+
+        <lx-chip-after>
+            <lx-icon lx-path="{{ vm.icons.mdiClose }}" lx-size="xs"></lx-icon>
+        </lx-chip-after>
+    </lx-chip>
+</demo-grid>