@bgord/design 0.27.39 → 0.27.41

package/README.md

@@ -83,14 +83,17 @@ Breakpoints
 | ---------- | --------------- |
 | data-main  | justify-content |
 | data-cross | align-items     |
-
-| Key      |     Value     |
-| -------- | :-----------: |
-| start    |  flex-start   |
-| end      |   flex-end    |
-| between  | space-between |
-| center   |    center     |
-| baseline |   baseline    |
+| data-self  | align-items     |
+
+| Key      |     Value     | Available for data-self |
+| -------- | :-----------: | :---------------------: |
+| start    |  flex-start   |           yes           |
+| end      |   flex-end    |           yes           |
+| around   | space-around  |           no            |
+| between  | space-between |           no            |
+| evenly   | space-evenly  |           no            |
+| center   |    center     |           yes           |
+| baseline |   baseline    |           yes           |
 
 ## Positions
 
@@ -437,3 +440,16 @@ Orange
 | orange-600 | hsl(25, 88%, 37.5%) |
 | orange-700 | hsl(25, 88%, 27.5%) |
 | orange-800 |  hsl(25, 88%, 20%)  |
+
+## Cursors
+
+| Definition  | Value  |
+| ----------- | ------ |
+| data-cursor | cursor |
+
+| Key         |    Value    |
+| ----------- | :---------: |
+| wait        |    wait     |
+| auto        |    auto     |
+| pointer     |   pointer   |
+| not-allowed | not-allowed |

package/dist/cursors-generator.d.ts

@@ -0,0 +1,7 @@
+import { AbstractGenerator, GeneratorConfigType } from './generator';
+export declare class CursorsGenerator extends AbstractGenerator {
+    cursors: GeneratorConfigType['cursors'];
+    breakpoints: GeneratorConfigType['breakpoints'];
+    constructor(config: GeneratorConfigType);
+    generateCss(): string;
+}

package/dist/design.cjs.development.js

@@ -1,6 +1,9 @@
 'use strict';
 
+function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
+
 var fs = require('fs');
+var pick = _interopDefault(require('lodash.pick'));
 
 function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
   try {
@@ -1302,26 +1305,41 @@ var AxisPlacementsGenerator = /*#__PURE__*/function (_AbstractGenerator) {
           _key = _Object$entries2$_i[0],
           _value = _Object$entries2$_i[1];
       output += "*[data-cross='" + _key + "'] {\n  align-items: " + _value + ";\n}\n";
-    }
+    } // Self placement alongside the cross axis: data-self="*"
+
 
-    for (var _i3 = 0, _Object$entries3 = Object.entries(this.breakpoints); _i3 < _Object$entries3.length; _i3++) {
+    for (var _i3 = 0, _Object$entries3 = Object.entries(pick(this.axisPlacements, ['start', 'end', 'center', 'baseline'])); _i3 < _Object$entries3.length; _i3++) {
       var _Object$entries3$_i = _Object$entries3[_i3],
-          name = _Object$entries3$_i[0],
+          _key2 = _Object$entries3$_i[0],
           _value2 = _Object$entries3$_i[1];
-      output += "@media (max-width: " + _value2 + "px) {\n";
+      output += "*[data-self='" + _key2 + "'] {\n  align-self: " + _value2 + ";\n}\n";
+    }
 
-      for (var _i4 = 0, _Object$entries4 = Object.entries(this.axisPlacements); _i4 < _Object$entries4.length; _i4++) {
-        var _Object$entries4$_i = _Object$entries4[_i4],
-            _key2 = _Object$entries4$_i[0],
-            _value3 = _Object$entries4$_i[1];
-        output += "  *[data-" + name + "-main='" + _key2 + "'] {\n    justify-content: " + _value3 + ";\n  }\n";
-      }
+    for (var _i4 = 0, _Object$entries4 = Object.entries(this.breakpoints); _i4 < _Object$entries4.length; _i4++) {
+      var _Object$entries4$_i = _Object$entries4[_i4],
+          name = _Object$entries4$_i[0],
+          _value3 = _Object$entries4$_i[1];
+      output += "@media (max-width: " + _value3 + "px) {\n";
 
       for (var _i5 = 0, _Object$entries5 = Object.entries(this.axisPlacements); _i5 < _Object$entries5.length; _i5++) {
         var _Object$entries5$_i = _Object$entries5[_i5],
             _key3 = _Object$entries5$_i[0],
             _value4 = _Object$entries5$_i[1];
-        output += "  *[data-" + name + "-cross='" + _key3 + "'] {\n    align-items: " + _value4 + ";\n  }\n";
+        output += "  *[data-" + name + "-main='" + _key3 + "'] {\n    justify-content: " + _value4 + ";\n  }\n";
+      }
+
+      for (var _i6 = 0, _Object$entries6 = Object.entries(this.axisPlacements); _i6 < _Object$entries6.length; _i6++) {
+        var _Object$entries6$_i = _Object$entries6[_i6],
+            _key4 = _Object$entries6$_i[0],
+            _value5 = _Object$entries6$_i[1];
+        output += "  *[data-" + name + "-cross='" + _key4 + "'] {\n    align-items: " + _value5 + ";\n  }\n";
+      }
+
+      for (var _i7 = 0, _Object$entries7 = Object.entries(pick(this.axisPlacements, ['start', 'end', 'center', 'baseline'])); _i7 < _Object$entries7.length; _i7++) {
+        var _Object$entries7$_i = _Object$entries7[_i7],
+            _key5 = _Object$entries7$_i[0],
+            _value6 = _Object$entries7$_i[1];
+        output += "  *[data-" + name + "-self='" + _key5 + "'] {\n    align-self: " + _value6 + ";\n  }\n";
       }
 
       output += "}\n";
@@ -2179,6 +2197,52 @@ var GapGenerator = /*#__PURE__*/function (_AbstractGenerator) {
   return GapGenerator;
 }(AbstractGenerator);
 
+var CursorsGenerator = /*#__PURE__*/function (_AbstractGenerator) {
+  _inheritsLoose(CursorsGenerator, _AbstractGenerator);
+
+  function CursorsGenerator(config) {
+    var _this;
+
+    _this = _AbstractGenerator.call(this, 'Cursors') || this;
+    _this.cursors = config.cursors;
+    _this.breakpoints = config.breakpoints;
+    return _this;
+  }
+
+  var _proto = CursorsGenerator.prototype;
+
+  _proto.generateCss = function generateCss() {
+    var output = ''; // Regular display: data-cursor="*"
+
+    for (var _i = 0, _Object$entries = Object.entries(this.cursors); _i < _Object$entries.length; _i++) {
+      var _Object$entries$_i = _Object$entries[_i],
+          key = _Object$entries$_i[0],
+          value = _Object$entries$_i[1];
+      output += "*[data-cursor='" + key + "'] {\n  cursor: " + value + ";\n}\n";
+    }
+
+    for (var _i2 = 0, _Object$entries2 = Object.entries(this.breakpoints); _i2 < _Object$entries2.length; _i2++) {
+      var _Object$entries2$_i = _Object$entries2[_i2],
+          name = _Object$entries2$_i[0],
+          _value = _Object$entries2$_i[1];
+      output += "@media (max-width: " + _value + "px) {\n";
+
+      for (var _i3 = 0, _Object$entries3 = Object.entries(this.cursors); _i3 < _Object$entries3.length; _i3++) {
+        var _Object$entries3$_i = _Object$entries3[_i3],
+            _key = _Object$entries3$_i[0],
+            _value2 = _Object$entries3$_i[1];
+        output += "  *[data-" + name + "-cursor='" + _key + "'] {\n    cursor: " + _value2 + ";\n  }\n";
+      }
+
+      output += "}\n";
+    }
+
+    return output;
+  };
+
+  return CursorsGenerator;
+}(AbstractGenerator);
+
 var Spacing = {
   '0': '0',
   '3': '3px',
@@ -2364,6 +2428,12 @@ var Overflows = {
   scroll: 'scroll',
   hidden: 'hidden'
 };
+var Cursors = {
+  wait: 'wait',
+  auto: 'auto',
+  pointer: 'pointer',
+  'not-allowed': 'not-allowed'
+};
 
 var GeneratorProcessor = /*#__PURE__*/function () {
   function GeneratorProcessor() {}
@@ -2504,10 +2574,11 @@ function _main() {
               maxWidths: MaxWidths,
               transforms: Transforms,
               overflows: Overflows,
-              heights: Heights
+              heights: Heights,
+              cursors: Cursors
             };
             _context2.next = 3;
-            return new GeneratorProcessor().process([new Margins(config), new Paddings(config), new DisplaysGenerator(config), new AxisPlacementsGenerator(config), new FlexWrapGenerator(config), new FlexDirectionsGenerator(config), new FlexGrowsGenerator(config), new GapGenerator(config), new WidthsGenerator(config), new PositionsGenerator(config), new ZIndexGenerator(config), new FontSizeGenerator(config), new FontWeightGenerator(config), new FontColorsGenerator(config), new LineHeightsGenerator(config), new LetterSpacingsGenerator(config), new BackgroundsGenerator(config), new BorderWidthsGenerator(config), new BorderColorsGenerator(config), new BorderRadiusesGenerator(config), new MaxWidthsGenerator(config), new TransformsGenerator(config), new OverflowsGenerator(config), new PositionersGenerator(), new HeightsGenerator(config)]);
+            return new GeneratorProcessor().process([new Margins(config), new Paddings(config), new DisplaysGenerator(config), new AxisPlacementsGenerator(config), new FlexWrapGenerator(config), new FlexDirectionsGenerator(config), new FlexGrowsGenerator(config), new GapGenerator(config), new WidthsGenerator(config), new PositionsGenerator(config), new ZIndexGenerator(config), new FontSizeGenerator(config), new FontWeightGenerator(config), new FontColorsGenerator(config), new LineHeightsGenerator(config), new LetterSpacingsGenerator(config), new BackgroundsGenerator(config), new BorderWidthsGenerator(config), new BorderColorsGenerator(config), new BorderRadiusesGenerator(config), new MaxWidthsGenerator(config), new TransformsGenerator(config), new OverflowsGenerator(config), new PositionersGenerator(), new HeightsGenerator(config), new CursorsGenerator(config)]);
 
           case 3:
           case "end":