@flodesk/grain 2.10.0 → 2.11.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/es/components/arrange.js +169 -3
  2. package/es/types.js +3 -1
  3. package/package.json +1 -1
package/es/components/arrange.js CHANGED
@@ -23,18 +23,31 @@ var _styled = _interopRequireDefault(require("@emotion/styled"));
23
23
 
24
24
  var _types = require("../types");
25
25
 
26
- var _excluded = ["children", "gap", "columns", "autoFlow"];
26
+ var _box = require("./box");
27
+
28
+ var _excluded = ["children", "gap", "columns", "autoFlow", "justifyItems", "alignItems", "justifyContent", "alignContent", "placeItems", "placeContent"];
27
29
 
28
30
  var _templateObject;
29
31
 
30
32
  var __jsx = _react.default.createElement;
31
-
32
- var Wrapper = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n display: grid;\n grid-auto-flow: ", ";\n justify-content: start;\n align-items: center;\n gap: ", ";\n grid-template-columns: ", ";\n"])), function (p) {
33
+ var Wrapper = (0, _styled.default)(_box.Box)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n display: grid;\n grid-auto-flow: ", ";\n justify-content: start;\n align-items: center;\n gap: ", ";\n grid-template-columns: ", ";\n justify-items: ", ";\n align-items: ", ";\n justify-content: ", ";\n align-content: ", ";\n place-items: ", ";\n place-content: ", ";\n"])), function (p) {
33
34
  return p.autoFlow;
34
35
  }, function (p) {
35
36
  return (0, _utilities.getSpace)(p.gap);
36
37
  }, function (p) {
37
38
  return (0, _utilities.getGridColumns)(p.columns);
39
+ }, function (p) {
40
+ return p.justifyItems;
41
+ }, function (p) {
42
+ return p.alignItems;
43
+ }, function (p) {
44
+ return p.justifyContent;
45
+ }, function (p) {
46
+ return p.alignContent;
47
+ }, function (p) {
48
+ return p.placeItems;
49
+ }, function (p) {
50
+ return p.placeContent;
38
51
  });
39
52
 
40
53
  var Arrange = function Arrange(_ref) {
@@ -43,6 +56,12 @@ var Arrange = function Arrange(_ref) {
43
56
  columns = _ref.columns,
44
57
  _ref$autoFlow = _ref.autoFlow,
45
58
  autoFlow = _ref$autoFlow === void 0 ? 'column' : _ref$autoFlow,
59
+ justifyItems = _ref.justifyItems,
60
+ alignItems = _ref.alignItems,
61
+ justifyContent = _ref.justifyContent,
62
+ alignContent = _ref.alignContent,
63
+ placeItems = _ref.placeItems,
64
+ placeContent = _ref.placeContent,
46
65
  props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
47
66
  return __jsx(Wrapper, (0, _extends2.default)({
48
67
  gap: gap,
@@ -119,6 +138,153 @@ Arrange.__docgenInfo = {
119
138
  },
120
139
  "required": false,
121
140
  "description": ""
141
+ },
142
+ "justifyItems": {
143
+ "type": {
144
+ "name": "enum",
145
+ "value": [{
146
+ "value": "\"start\"",
147
+ "computed": false
148
+ }, {
149
+ "value": "\"end\"",
150
+ "computed": false
151
+ }, {
152
+ "value": "\"center\"",
153
+ "computed": false
154
+ }, {
155
+ "value": "\"stretch\"",
156
+ "computed": false
157
+ }]
158
+ },
159
+ "required": false,
160
+ "description": ""
161
+ },
162
+ "alignItems": {
163
+ "type": {
164
+ "name": "enum",
165
+ "value": [{
166
+ "value": "\"start\"",
167
+ "computed": false
168
+ }, {
169
+ "value": "\"end\"",
170
+ "computed": false
171
+ }, {
172
+ "value": "\"center\"",
173
+ "computed": false
174
+ }, {
175
+ "value": "\"stretch\"",
176
+ "computed": false
177
+ }]
178
+ },
179
+ "required": false,
180
+ "description": ""
181
+ },
182
+ "justifyContent": {
183
+ "type": {
184
+ "name": "enum",
185
+ "value": [{
186
+ "value": "\"start\"",
187
+ "computed": false
188
+ }, {
189
+ "value": "\"end\"",
190
+ "computed": false
191
+ }, {
192
+ "value": "\"center\"",
193
+ "computed": false
194
+ }, {
195
+ "value": "\"stretch\"",
196
+ "computed": false
197
+ }, {
198
+ "value": "\"space-around\"",
199
+ "computed": false
200
+ }, {
201
+ "value": "\"space-between\"",
202
+ "computed": false
203
+ }, {
204
+ "value": "\"space-evenly\"",
205
+ "computed": false
206
+ }]
207
+ },
208
+ "required": false,
209
+ "description": ""
210
+ },
211
+ "alignContent": {
212
+ "type": {
213
+ "name": "enum",
214
+ "value": [{
215
+ "value": "\"start\"",
216
+ "computed": false
217
+ }, {
218
+ "value": "\"end\"",
219
+ "computed": false
220
+ }, {
221
+ "value": "\"center\"",
222
+ "computed": false
223
+ }, {
224
+ "value": "\"stretch\"",
225
+ "computed": false
226
+ }, {
227
+ "value": "\"space-around\"",
228
+ "computed": false
229
+ }, {
230
+ "value": "\"space-between\"",
231
+ "computed": false
232
+ }, {
233
+ "value": "\"space-evenly\"",
234
+ "computed": false
235
+ }]
236
+ },
237
+ "required": false,
238
+ "description": ""
239
+ },
240
+ "placeItems": {
241
+ "type": {
242
+ "name": "enum",
243
+ "value": [{
244
+ "value": "\"start\"",
245
+ "computed": false
246
+ }, {
247
+ "value": "\"end\"",
248
+ "computed": false
249
+ }, {
250
+ "value": "\"center\"",
251
+ "computed": false
252
+ }, {
253
+ "value": "\"stretch\"",
254
+ "computed": false
255
+ }]
256
+ },
257
+ "required": false,
258
+ "description": ""
259
+ },
260
+ "placeContent": {
261
+ "type": {
262
+ "name": "enum",
263
+ "value": [{
264
+ "value": "\"start\"",
265
+ "computed": false
266
+ }, {
267
+ "value": "\"end\"",
268
+ "computed": false
269
+ }, {
270
+ "value": "\"center\"",
271
+ "computed": false
272
+ }, {
273
+ "value": "\"stretch\"",
274
+ "computed": false
275
+ }, {
276
+ "value": "\"space-around\"",
277
+ "computed": false
278
+ }, {
279
+ "value": "\"space-between\"",
280
+ "computed": false
281
+ }, {
282
+ "value": "\"space-evenly\"",
283
+ "computed": false
284
+ }]
285
+ },
286
+ "required": false,
287
+ "description": ""
122
288
  }
123
289
  }
124
290
  };
package/es/types.js CHANGED
@@ -29,6 +29,8 @@ var types = {
29
29
  overflow: _propTypes.default.oneOf(["visible", "hidden", "scroll", "auto"]),
30
30
  fieldSize: _propTypes.default.oneOf(["s", "m"]),
31
31
  columns: _propTypes.default.oneOfType([_propTypes.default.array, _propTypes.default.string]),
32
- autoFlow: _propTypes.default.oneOf(["column", "row"])
32
+ autoFlow: _propTypes.default.oneOf(["column", "row"]),
33
+ gridItemsAlignments: _propTypes.default.oneOf(["start", "end", "center", "stretch"]),
34
+ gridContentPositions: _propTypes.default.oneOf(["start", "end", "center", "stretch", "space-around", "space-between", "space-evenly"])
33
35
  };
34
36
  exports.types = types;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@flodesk/grain",
3
- "version": "2.10.0",
3
+ "version": "2.11.0",
4
4
  "description": "Flodesk design system",
5
5
  "module": "es/index.js",
6
6
  "author": "Flodesk",