@pingux/astro 1.24.0-alpha.1 → 1.24.0-alpha.4
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.
- package/lib/cjs/components/Bracket/Bracket.stories.js +3 -1
- package/lib/cjs/styles/ContainerSizes.stories.js +95 -0
- package/lib/cjs/styles/variants/boxes.js +1 -0
- package/lib/components/Bracket/Bracket.stories.js +3 -1
- package/lib/styles/ContainerSizes.stories.js +76 -0
- package/lib/styles/variants/boxes.js +1 -0
- package/package.json +1 -1
|
@@ -47,7 +47,8 @@ var Default = function Default() {
|
|
|
47
47
|
ml: "sm",
|
|
48
48
|
bg: "background"
|
|
49
49
|
}, (0, _react2.jsx)(_index.Box, {
|
|
50
|
-
isRow: true
|
|
50
|
+
isRow: true,
|
|
51
|
+
mb: "xs"
|
|
51
52
|
}, (0, _react2.jsx)(_index.Chip, {
|
|
52
53
|
label: "Any",
|
|
53
54
|
bg: "neutral.20",
|
|
@@ -62,6 +63,7 @@ var Default = function Default() {
|
|
|
62
63
|
isLast: index === anyConditions.length - 1
|
|
63
64
|
}), (0, _react2.jsx)(_index.Box, {
|
|
64
65
|
mt: "md",
|
|
66
|
+
ml: "xs",
|
|
65
67
|
variant: "forms.input.container",
|
|
66
68
|
bg: "white",
|
|
67
69
|
isRow: true,
|
|
@@ -0,0 +1,95 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
|
|
4
|
+
|
|
5
|
+
var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
|
|
6
|
+
|
|
7
|
+
_Object$defineProperty(exports, "__esModule", {
|
|
8
|
+
value: true
|
|
9
|
+
});
|
|
10
|
+
|
|
11
|
+
exports["default"] = exports.ContainerSizes = void 0;
|
|
12
|
+
|
|
13
|
+
var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
|
|
14
|
+
|
|
15
|
+
var _react = _interopRequireDefault(require("react"));
|
|
16
|
+
|
|
17
|
+
var _index = require("../index");
|
|
18
|
+
|
|
19
|
+
var _react2 = require("@emotion/react");
|
|
20
|
+
|
|
21
|
+
var _default = {
|
|
22
|
+
title: 'Design/Container Sizes'
|
|
23
|
+
};
|
|
24
|
+
exports["default"] = _default;
|
|
25
|
+
var containerArray = [{
|
|
26
|
+
key: 'xs',
|
|
27
|
+
size: 'container.xs',
|
|
28
|
+
bg: 'black',
|
|
29
|
+
codeString: '<Box size="container.xs" />',
|
|
30
|
+
widthString: '400px width'
|
|
31
|
+
}, {
|
|
32
|
+
key: 'sm',
|
|
33
|
+
size: 'container.sm',
|
|
34
|
+
bg: 'neutral.10',
|
|
35
|
+
codeString: '<Box size="container.sm" />',
|
|
36
|
+
widthString: '550px width'
|
|
37
|
+
}, {
|
|
38
|
+
key: 'md',
|
|
39
|
+
size: 'container.md',
|
|
40
|
+
bg: 'neutral.20',
|
|
41
|
+
codeString: '<Box size="container.md" />',
|
|
42
|
+
widthString: '800px width'
|
|
43
|
+
}, {
|
|
44
|
+
key: 'lg',
|
|
45
|
+
size: 'container.lg',
|
|
46
|
+
bg: 'neutral.30',
|
|
47
|
+
codeString: '<Box size="container.lg" />',
|
|
48
|
+
widthString: '1200px width'
|
|
49
|
+
}, {
|
|
50
|
+
key: 'full',
|
|
51
|
+
size: 'container.full',
|
|
52
|
+
bg: 'neutral.40',
|
|
53
|
+
codeString: '<Box size="container.full" />',
|
|
54
|
+
widthString: '100% width'
|
|
55
|
+
}];
|
|
56
|
+
|
|
57
|
+
var Container = function Container(props) {
|
|
58
|
+
var bg = props.bg,
|
|
59
|
+
codeString = props.codeString,
|
|
60
|
+
size = props.size,
|
|
61
|
+
widthString = props.widthString;
|
|
62
|
+
return (0, _react2.jsx)(_index.Box, {
|
|
63
|
+
size: size,
|
|
64
|
+
maxHeight: "250px",
|
|
65
|
+
bg: bg,
|
|
66
|
+
p: "md"
|
|
67
|
+
}, (0, _react2.jsx)(_index.Text, {
|
|
68
|
+
color: "white",
|
|
69
|
+
fontWeight: 1,
|
|
70
|
+
fontSize: "xx"
|
|
71
|
+
}, size), (0, _react2.jsx)(_index.Text, {
|
|
72
|
+
color: "white",
|
|
73
|
+
fontWeight: 0,
|
|
74
|
+
fontSize: "lg"
|
|
75
|
+
}, widthString), (0, _react2.jsx)("br", null), (0, _react2.jsx)(_index.Text, {
|
|
76
|
+
color: "white",
|
|
77
|
+
fontWeight: 0,
|
|
78
|
+
fontSize: "lg"
|
|
79
|
+
}, codeString));
|
|
80
|
+
};
|
|
81
|
+
|
|
82
|
+
var ContainerSizes = function ContainerSizes() {
|
|
83
|
+
return (0, _react2.jsx)(_index.Box, {
|
|
84
|
+
height: "1250px",
|
|
85
|
+
width: "1600px"
|
|
86
|
+
}, (0, _react2.jsx)(_index.Text, {
|
|
87
|
+
fontSize: "lg",
|
|
88
|
+
fontWeight: "0",
|
|
89
|
+
width: "800px"
|
|
90
|
+
}, "For cards, panels, and popup modals, these are our standard widths. They should be max widths, and these elements should shrink based on the amount of space available. (Popup modals should never be LG or Full, and probably never MD as well.)"), (0, _react2.jsx)("br", null), (0, _map["default"])(containerArray).call(containerArray, function (item) {
|
|
91
|
+
return (0, _react2.jsx)(Container, item);
|
|
92
|
+
}));
|
|
93
|
+
};
|
|
94
|
+
|
|
95
|
+
exports.ContainerSizes = ContainerSizes;
|
|
@@ -29,7 +29,8 @@ export var Default = function Default() {
|
|
|
29
29
|
ml: "sm",
|
|
30
30
|
bg: "background"
|
|
31
31
|
}, ___EmotionJSX(Box, {
|
|
32
|
-
isRow: true
|
|
32
|
+
isRow: true,
|
|
33
|
+
mb: "xs"
|
|
33
34
|
}, ___EmotionJSX(Chip, {
|
|
34
35
|
label: "Any",
|
|
35
36
|
bg: "neutral.20",
|
|
@@ -44,6 +45,7 @@ export var Default = function Default() {
|
|
|
44
45
|
isLast: index === anyConditions.length - 1
|
|
45
46
|
}), ___EmotionJSX(Box, {
|
|
46
47
|
mt: "md",
|
|
48
|
+
ml: "xs",
|
|
47
49
|
variant: "forms.input.container",
|
|
48
50
|
bg: "white",
|
|
49
51
|
isRow: true,
|
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import { Box, Text } from '../index';
|
|
4
|
+
import { jsx as ___EmotionJSX } from "@emotion/react";
|
|
5
|
+
export default {
|
|
6
|
+
title: 'Design/Container Sizes'
|
|
7
|
+
};
|
|
8
|
+
var containerArray = [{
|
|
9
|
+
key: 'xs',
|
|
10
|
+
size: 'container.xs',
|
|
11
|
+
bg: 'black',
|
|
12
|
+
codeString: '<Box size="container.xs" />',
|
|
13
|
+
widthString: '400px width'
|
|
14
|
+
}, {
|
|
15
|
+
key: 'sm',
|
|
16
|
+
size: 'container.sm',
|
|
17
|
+
bg: 'neutral.10',
|
|
18
|
+
codeString: '<Box size="container.sm" />',
|
|
19
|
+
widthString: '550px width'
|
|
20
|
+
}, {
|
|
21
|
+
key: 'md',
|
|
22
|
+
size: 'container.md',
|
|
23
|
+
bg: 'neutral.20',
|
|
24
|
+
codeString: '<Box size="container.md" />',
|
|
25
|
+
widthString: '800px width'
|
|
26
|
+
}, {
|
|
27
|
+
key: 'lg',
|
|
28
|
+
size: 'container.lg',
|
|
29
|
+
bg: 'neutral.30',
|
|
30
|
+
codeString: '<Box size="container.lg" />',
|
|
31
|
+
widthString: '1200px width'
|
|
32
|
+
}, {
|
|
33
|
+
key: 'full',
|
|
34
|
+
size: 'container.full',
|
|
35
|
+
bg: 'neutral.40',
|
|
36
|
+
codeString: '<Box size="container.full" />',
|
|
37
|
+
widthString: '100% width'
|
|
38
|
+
}];
|
|
39
|
+
|
|
40
|
+
var Container = function Container(props) {
|
|
41
|
+
var bg = props.bg,
|
|
42
|
+
codeString = props.codeString,
|
|
43
|
+
size = props.size,
|
|
44
|
+
widthString = props.widthString;
|
|
45
|
+
return ___EmotionJSX(Box, {
|
|
46
|
+
size: size,
|
|
47
|
+
maxHeight: "250px",
|
|
48
|
+
bg: bg,
|
|
49
|
+
p: "md"
|
|
50
|
+
}, ___EmotionJSX(Text, {
|
|
51
|
+
color: "white",
|
|
52
|
+
fontWeight: 1,
|
|
53
|
+
fontSize: "xx"
|
|
54
|
+
}, size), ___EmotionJSX(Text, {
|
|
55
|
+
color: "white",
|
|
56
|
+
fontWeight: 0,
|
|
57
|
+
fontSize: "lg"
|
|
58
|
+
}, widthString), ___EmotionJSX("br", null), ___EmotionJSX(Text, {
|
|
59
|
+
color: "white",
|
|
60
|
+
fontWeight: 0,
|
|
61
|
+
fontSize: "lg"
|
|
62
|
+
}, codeString));
|
|
63
|
+
};
|
|
64
|
+
|
|
65
|
+
export var ContainerSizes = function ContainerSizes() {
|
|
66
|
+
return ___EmotionJSX(Box, {
|
|
67
|
+
height: "1250px",
|
|
68
|
+
width: "1600px"
|
|
69
|
+
}, ___EmotionJSX(Text, {
|
|
70
|
+
fontSize: "lg",
|
|
71
|
+
fontWeight: "0",
|
|
72
|
+
width: "800px"
|
|
73
|
+
}, "For cards, panels, and popup modals, these are our standard widths. They should be max widths, and these elements should shrink based on the amount of space available. (Popup modals should never be LG or Full, and probably never MD as well.)"), ___EmotionJSX("br", null), _mapInstanceProperty(containerArray).call(containerArray, function (item) {
|
|
74
|
+
return ___EmotionJSX(Container, item);
|
|
75
|
+
}));
|
|
76
|
+
};
|