@cubist/cubist
Advanced tools
Comparing version 0.0.0-rc2 to 0.0.0-rc3
import React, { ReactNode, AllHTMLAttributes } from "react"; | ||
import { Properties } from "csstype"; | ||
export interface Props<T> extends Properties { | ||
export interface BoxProps<T> extends Properties { | ||
is: T; | ||
@@ -8,2 +8,2 @@ attrs?: AllHTMLAttributes<T>; | ||
} | ||
export default function Box<T extends keyof React.ReactHTML>(props: Props<T>): JSX.Element; | ||
export declare function Box<T extends keyof React.ReactHTML>(props: BoxProps<T>): JSX.Element; |
@@ -6,3 +6,3 @@ "use strict"; | ||
}); | ||
exports["default"] = Box; | ||
exports.Box = Box; | ||
@@ -25,4 +25,4 @@ var _core = require("@emotion/core"); | ||
return (0, _core.jsx)(Is, _extends({ | ||
css: /*#__PURE__*/(0, _core.css)(rest, ";label:Box;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uL3NyYy9Cb3gudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWlCYSIsImZpbGUiOiIuLi9zcmMvQm94LnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCwgeyBSZWFjdE5vZGUsIEFsbEhUTUxBdHRyaWJ1dGVzIH0gZnJvbSBcInJlYWN0XCI7XG5pbXBvcnQgeyBQcm9wZXJ0aWVzIH0gZnJvbSBcImNzc3R5cGVcIjtcblxuLyoqIEBqc3gganN4ICovXG5pbXBvcnQgeyBjc3MsIGpzeCB9IGZyb20gXCJAZW1vdGlvbi9jb3JlXCI7XG5cbmV4cG9ydCBpbnRlcmZhY2UgUHJvcHM8VD4gZXh0ZW5kcyBQcm9wZXJ0aWVzIHtcbiAgaXM6IFQ7XG4gIGF0dHJzPzogQWxsSFRNTEF0dHJpYnV0ZXM8VD47XG4gIGNoaWxkcmVuPzogUmVhY3ROb2RlO1xufVxuXG5leHBvcnQgZGVmYXVsdCBmdW5jdGlvbiBCb3g8VCBleHRlbmRzIGtleW9mIFJlYWN0LlJlYWN0SFRNTD4ocHJvcHM6IFByb3BzPFQ+KSB7XG4gIGNvbnN0IHsgaXMsIGF0dHJzLCBjaGlsZHJlbiwgLi4ucmVzdCB9ID0gcHJvcHM7XG4gIGNvbnN0IElzID0gaXMgYXMgYW55O1xuXG4gIHJldHVybiAoXG4gICAgPElzIGNzcz17Y3NzKHJlc3QgYXMgYW55KX0gey4uLmF0dHJzfT5cbiAgICAgIHtjaGlsZHJlbn1cbiAgICA8L0lzPlxuICApO1xufVxuIl19 */")) | ||
css: /*#__PURE__*/(0, _core.css)(rest, ";label:Box;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uL3NyYy9Cb3gudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWlCYSIsImZpbGUiOiIuLi9zcmMvQm94LnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCwgeyBSZWFjdE5vZGUsIEFsbEhUTUxBdHRyaWJ1dGVzIH0gZnJvbSBcInJlYWN0XCI7XG5pbXBvcnQgeyBQcm9wZXJ0aWVzIH0gZnJvbSBcImNzc3R5cGVcIjtcblxuLyoqIEBqc3gganN4ICovXG5pbXBvcnQgeyBjc3MsIGpzeCB9IGZyb20gXCJAZW1vdGlvbi9jb3JlXCI7XG5cbmV4cG9ydCBpbnRlcmZhY2UgQm94UHJvcHM8VD4gZXh0ZW5kcyBQcm9wZXJ0aWVzIHtcbiAgaXM6IFQ7XG4gIGF0dHJzPzogQWxsSFRNTEF0dHJpYnV0ZXM8VD47XG4gIGNoaWxkcmVuPzogUmVhY3ROb2RlO1xufVxuXG5leHBvcnQgZnVuY3Rpb24gQm94PFQgZXh0ZW5kcyBrZXlvZiBSZWFjdC5SZWFjdEhUTUw+KHByb3BzOiBCb3hQcm9wczxUPikge1xuICBjb25zdCB7IGlzLCBhdHRycywgY2hpbGRyZW4sIC4uLnJlc3QgfSA9IHByb3BzO1xuICBjb25zdCBJcyA9IGlzIGFzIGFueTtcblxuICByZXR1cm4gKFxuICAgIDxJcyBjc3M9e2NzcyhyZXN0IGFzIGFueSl9IHsuLi5hdHRyc30+XG4gICAgICB7Y2hpbGRyZW59XG4gICAgPC9Jcz5cbiAgKTtcbn1cbiJdfQ== */")) | ||
}, attrs), children); | ||
} |
@@ -7,3 +7,3 @@ "use strict"; | ||
var _Box = _interopRequireDefault(require("./Box")); | ||
var _Box = require("./Box"); | ||
@@ -19,7 +19,7 @@ var _react2 = _interopRequireDefault(require("react")); | ||
(0, _react.storiesOf)("Box", module).add("h1", function () { | ||
return (0, _core.jsx)(_Box["default"], { | ||
return (0, _core.jsx)(_Box.Box, { | ||
is: "h1" | ||
}, "Hello, world!"); | ||
}).add("h1 with basic styling", function () { | ||
return (0, _core.jsx)(_Box["default"], { | ||
return (0, _core.jsx)(_Box.Box, { | ||
is: "h1", | ||
@@ -29,3 +29,3 @@ backgroundColor: "red" | ||
}).add("h1 with &:hover", function () { | ||
return (0, _core.jsx)(_Box["default"], _extends({ | ||
return (0, _core.jsx)(_Box.Box, _extends({ | ||
is: "h1" | ||
@@ -38,3 +38,3 @@ }, { | ||
}).add("h1 with onClick", function () { | ||
return (0, _core.jsx)(_Box["default"], { | ||
return (0, _core.jsx)(_Box.Box, { | ||
is: "h1", | ||
@@ -41,0 +41,0 @@ attrs: { |
@@ -5,3 +5,3 @@ "use strict"; | ||
var _Box = _interopRequireDefault(require("./Box")); | ||
var _Box = require("./Box"); | ||
@@ -16,3 +16,3 @@ var _reactTestRenderer = _interopRequireDefault(require("react-test-renderer")); | ||
it("renders a simple div", function () { | ||
expect(_reactTestRenderer["default"].create((0, _core.jsx)(_Box["default"], { | ||
expect(_reactTestRenderer["default"].create((0, _core.jsx)(_Box.Box, { | ||
is: "div" | ||
@@ -19,0 +19,0 @@ })).toJSON()).toMatchSnapshot(); |
import React from "react"; | ||
import { Props as PalletProps } from "./Pallet"; | ||
export declare type Size = "900" | "800" | "700" | "600" | "500" | "400" | "300" | "200" | "100"; | ||
export declare type Variant = "default" | "muted"; | ||
export interface Props<T> extends PalletProps<T> { | ||
import { PalletProps } from "./Pallet"; | ||
declare type Size = "900" | "800" | "700" | "600" | "500" | "400" | "300" | "200" | "100"; | ||
declare type Variant = "default" | "muted"; | ||
export interface HeadingProps<T> extends PalletProps<T> { | ||
size?: Size; | ||
variant?: Variant; | ||
} | ||
export default function Heading<T extends keyof React.ReactHTML = "h1" | "h2" | "h3" | "h4" | "h5" | "h6">({ is, size, variant, children, ...rest }: Props<T>): JSX.Element; | ||
export declare function Heading<T extends keyof React.ReactHTML = "h1" | "h2" | "h3" | "h4" | "h5" | "h6">({ is, size, variant, children, ...rest }: HeadingProps<T>): JSX.Element; | ||
export {}; |
@@ -6,7 +6,7 @@ "use strict"; | ||
}); | ||
exports["default"] = Heading; | ||
exports.Heading = Heading; | ||
var _react = _interopRequireDefault(require("react")); | ||
var _Pallet = _interopRequireDefault(require("./Pallet")); | ||
var _Pallet = require("./Pallet"); | ||
@@ -80,3 +80,3 @@ var _core = require("@emotion/core"); | ||
var fontVariant = FONT_VARIANTS[size || DEFAULT_SIZE]; | ||
return (0, _core.jsx)(_Pallet["default"], _extends({ | ||
return (0, _core.jsx)(_Pallet.Pallet, _extends({ | ||
is: is || defaultIs, | ||
@@ -83,0 +83,0 @@ fontSize: fontSize, |
@@ -7,5 +7,5 @@ "use strict"; | ||
var _Heading = _interopRequireDefault(require("./Heading")); | ||
var _Heading = require("./Heading"); | ||
var _Pallet = _interopRequireDefault(require("./Pallet")); | ||
var _Pallet = require("./Pallet"); | ||
@@ -18,59 +18,59 @@ var _core = require("@emotion/core"); | ||
(0, _react.storiesOf)("Heading", module).add("sizes", function () { | ||
return (0, _core.jsx)(_react2["default"].Fragment, null, (0, _core.jsx)(_Heading["default"], { | ||
return (0, _core.jsx)(_react2["default"].Fragment, null, (0, _core.jsx)(_Heading.Heading, { | ||
size: "900" | ||
}, "Heading 900"), (0, _core.jsx)(_Heading["default"], { | ||
}, "Heading 900"), (0, _core.jsx)(_Heading.Heading, { | ||
size: "800" | ||
}, "Heading 800"), (0, _core.jsx)(_Heading["default"], { | ||
}, "Heading 800"), (0, _core.jsx)(_Heading.Heading, { | ||
size: "700" | ||
}, "Heading 700"), (0, _core.jsx)(_Heading["default"], { | ||
}, "Heading 700"), (0, _core.jsx)(_Heading.Heading, { | ||
size: "600" | ||
}, "Heading 600"), (0, _core.jsx)(_Heading["default"], { | ||
}, "Heading 600"), (0, _core.jsx)(_Heading.Heading, { | ||
size: "500" | ||
}, "Heading 500"), (0, _core.jsx)(_Heading["default"], { | ||
}, "Heading 500"), (0, _core.jsx)(_Heading.Heading, { | ||
size: "400" | ||
}, "Heading 400"), (0, _core.jsx)(_Heading["default"], { | ||
}, "Heading 400"), (0, _core.jsx)(_Heading.Heading, { | ||
size: "300" | ||
}, "Heading 300"), (0, _core.jsx)(_Heading["default"], { | ||
}, "Heading 300"), (0, _core.jsx)(_Heading.Heading, { | ||
size: "200" | ||
}, "Heading 200"), (0, _core.jsx)(_Heading["default"], { | ||
}, "Heading 200"), (0, _core.jsx)(_Heading.Heading, { | ||
size: "100" | ||
}, "Heading 100")); | ||
}).add("wrapping", function () { | ||
return (0, _core.jsx)(_react2["default"].Fragment, null, (0, _core.jsx)(_Pallet["default"], { | ||
return (0, _core.jsx)(_react2["default"].Fragment, null, (0, _core.jsx)(_Pallet.Pallet, { | ||
width: "900px" | ||
}, (0, _core.jsx)(_Heading["default"], { | ||
}, (0, _core.jsx)(_Heading.Heading, { | ||
size: "900" | ||
}, EXAMPLE_TEXT)), (0, _core.jsx)(_Pallet["default"], { | ||
}, EXAMPLE_TEXT)), (0, _core.jsx)(_Pallet.Pallet, { | ||
width: "800px" | ||
}, (0, _core.jsx)(_Heading["default"], { | ||
}, (0, _core.jsx)(_Heading.Heading, { | ||
size: "800" | ||
}, EXAMPLE_TEXT)), (0, _core.jsx)(_Pallet["default"], { | ||
}, EXAMPLE_TEXT)), (0, _core.jsx)(_Pallet.Pallet, { | ||
width: "600px" | ||
}, (0, _core.jsx)(_Heading["default"], { | ||
}, (0, _core.jsx)(_Heading.Heading, { | ||
size: "700" | ||
}, EXAMPLE_TEXT)), (0, _core.jsx)(_Pallet["default"], { | ||
}, EXAMPLE_TEXT)), (0, _core.jsx)(_Pallet.Pallet, { | ||
width: "500px" | ||
}, (0, _core.jsx)(_Heading["default"], { | ||
}, (0, _core.jsx)(_Heading.Heading, { | ||
size: "600" | ||
}, EXAMPLE_TEXT)), (0, _core.jsx)(_Pallet["default"], { | ||
}, EXAMPLE_TEXT)), (0, _core.jsx)(_Pallet.Pallet, { | ||
width: "300px" | ||
}, (0, _core.jsx)(_Heading["default"], { | ||
}, (0, _core.jsx)(_Heading.Heading, { | ||
size: "500" | ||
}, EXAMPLE_TEXT)), (0, _core.jsx)(_Pallet["default"], { | ||
}, EXAMPLE_TEXT)), (0, _core.jsx)(_Pallet.Pallet, { | ||
width: "300px" | ||
}, (0, _core.jsx)(_Heading["default"], { | ||
}, (0, _core.jsx)(_Heading.Heading, { | ||
size: "400" | ||
}, EXAMPLE_TEXT)), (0, _core.jsx)(_Pallet["default"], { | ||
}, EXAMPLE_TEXT)), (0, _core.jsx)(_Pallet.Pallet, { | ||
width: "200px" | ||
}, (0, _core.jsx)(_Heading["default"], { | ||
}, (0, _core.jsx)(_Heading.Heading, { | ||
size: "300" | ||
}, EXAMPLE_TEXT)), (0, _core.jsx)(_Pallet["default"], { | ||
}, EXAMPLE_TEXT)), (0, _core.jsx)(_Pallet.Pallet, { | ||
width: "200px" | ||
}, (0, _core.jsx)(_Heading["default"], { | ||
}, (0, _core.jsx)(_Heading.Heading, { | ||
size: "200" | ||
}, EXAMPLE_TEXT)), (0, _core.jsx)(_Pallet["default"], { | ||
}, EXAMPLE_TEXT)), (0, _core.jsx)(_Pallet.Pallet, { | ||
width: "100px" | ||
}, (0, _core.jsx)(_Heading["default"], { | ||
}, (0, _core.jsx)(_Heading.Heading, { | ||
size: "100" | ||
}, EXAMPLE_TEXT))); | ||
}); |
@@ -1,4 +0,4 @@ | ||
export { default as Box, Props as BoxProps } from "./Box"; | ||
export { default as Pallet, Props as PalletProps } from "./Pallet"; | ||
export { default as Heading, Props as HeadingProps } from "./Heading"; | ||
export { default as Paragraph, Props as ParagraphProps } from "./Paragraph"; | ||
export * from "./Box"; | ||
export * from "./Pallet"; | ||
export * from "./Heading"; | ||
export * from "./Paragraph"; |
"use strict"; | ||
function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); } | ||
Object.defineProperty(exports, "__esModule", { | ||
value: true | ||
}); | ||
Object.defineProperty(exports, "Box", { | ||
enumerable: true, | ||
get: function get() { | ||
return _Box["default"]; | ||
} | ||
var _Box = require("./Box"); | ||
Object.keys(_Box).forEach(function (key) { | ||
if (key === "default" || key === "__esModule") return; | ||
Object.defineProperty(exports, key, { | ||
enumerable: true, | ||
get: function get() { | ||
return _Box[key]; | ||
} | ||
}); | ||
}); | ||
Object.defineProperty(exports, "BoxProps", { | ||
enumerable: true, | ||
get: function get() { | ||
return _Box.Props; | ||
} | ||
}); | ||
Object.defineProperty(exports, "Pallet", { | ||
enumerable: true, | ||
get: function get() { | ||
return _Pallet["default"]; | ||
} | ||
}); | ||
Object.defineProperty(exports, "PalletProps", { | ||
enumerable: true, | ||
get: function get() { | ||
return _Pallet.Props; | ||
} | ||
}); | ||
Object.defineProperty(exports, "Heading", { | ||
enumerable: true, | ||
get: function get() { | ||
return _Heading["default"]; | ||
} | ||
}); | ||
Object.defineProperty(exports, "HeadingProps", { | ||
enumerable: true, | ||
get: function get() { | ||
return _Heading.Props; | ||
} | ||
}); | ||
Object.defineProperty(exports, "Paragraph", { | ||
enumerable: true, | ||
get: function get() { | ||
return _Paragraph["default"]; | ||
} | ||
}); | ||
Object.defineProperty(exports, "ParagraphProps", { | ||
enumerable: true, | ||
get: function get() { | ||
return _Paragraph.Props; | ||
} | ||
}); | ||
var _Box = _interopRequireWildcard(require("./Box")); | ||
var _Pallet = require("./Pallet"); | ||
var _Pallet = _interopRequireWildcard(require("./Pallet")); | ||
Object.keys(_Pallet).forEach(function (key) { | ||
if (key === "default" || key === "__esModule") return; | ||
Object.defineProperty(exports, key, { | ||
enumerable: true, | ||
get: function get() { | ||
return _Pallet[key]; | ||
} | ||
}); | ||
}); | ||
var _Heading = _interopRequireWildcard(require("./Heading")); | ||
var _Heading = require("./Heading"); | ||
var _Paragraph = _interopRequireWildcard(require("./Paragraph")); | ||
Object.keys(_Heading).forEach(function (key) { | ||
if (key === "default" || key === "__esModule") return; | ||
Object.defineProperty(exports, key, { | ||
enumerable: true, | ||
get: function get() { | ||
return _Heading[key]; | ||
} | ||
}); | ||
}); | ||
function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; } | ||
var _Paragraph = require("./Paragraph"); | ||
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; } | ||
Object.keys(_Paragraph).forEach(function (key) { | ||
if (key === "default" || key === "__esModule") return; | ||
Object.defineProperty(exports, key, { | ||
enumerable: true, | ||
get: function get() { | ||
return _Paragraph[key]; | ||
} | ||
}); | ||
}); |
import React from "react"; | ||
import { Props as BoxProps } from "./Box"; | ||
export interface Props<T> extends Omit<BoxProps<T>, "is"> { | ||
import { BoxProps } from "./Box"; | ||
export interface PalletProps<T> extends Omit<BoxProps<T>, "is"> { | ||
is?: T; | ||
marginX?: string; | ||
marginY?: string; | ||
paddingX?: string; | ||
paddingY?: string; | ||
elevation?: "1" | "2" | "3" | "4" | "5"; | ||
} | ||
export default function Pallet<T extends keyof React.ReactHTML = "div">({ is, elevation, ...rest }: Props<T>): JSX.Element; | ||
export declare function Pallet<T extends keyof React.ReactHTML = "div">({ is, marginX, marginY, paddingX, paddingY, elevation, ...rest }: PalletProps<T>): JSX.Element; |
@@ -6,7 +6,7 @@ "use strict"; | ||
}); | ||
exports["default"] = Pallet; | ||
exports.Pallet = Pallet; | ||
var _react = _interopRequireDefault(require("react")); | ||
var _Box = _interopRequireDefault(require("./Box")); | ||
var _Box = require("./Box"); | ||
@@ -33,12 +33,24 @@ var _core = require("@emotion/core"); | ||
var is = _ref.is, | ||
marginX = _ref.marginX, | ||
marginY = _ref.marginY, | ||
paddingX = _ref.paddingX, | ||
paddingY = _ref.paddingY, | ||
elevation = _ref.elevation, | ||
rest = _objectWithoutProperties(_ref, ["is", "elevation"]); | ||
rest = _objectWithoutProperties(_ref, ["is", "marginX", "marginY", "paddingX", "paddingY", "elevation"]); | ||
var boxShadow = elevation && ELEVATION_TO_BOX_SHADOW[elevation]; | ||
return (0, _core.jsx)(_Box["default"], _extends({ | ||
return (0, _core.jsx)(_Box.Box, _extends({ | ||
is: is || "div", | ||
boxSizing: "border-box", | ||
fontFamily: "'Public Sans', sans-serif", | ||
boxShadow: boxShadow | ||
boxShadow: boxShadow, | ||
marginLeft: marginX, | ||
marginRight: marginY, | ||
marginTop: marginY, | ||
marginBottom: marginY, | ||
paddingLeft: paddingX, | ||
paddingRight: paddingX, | ||
paddingTop: paddingY, | ||
paddingBottom: paddingY | ||
}, rest)); | ||
} |
@@ -5,3 +5,3 @@ "use strict"; | ||
var _Pallet = _interopRequireDefault(require("./Pallet")); | ||
var _Pallet = require("./Pallet"); | ||
@@ -15,5 +15,5 @@ var _react2 = _interopRequireDefault(require("react")); | ||
(0, _react.storiesOf)("Pallet", module).add("simple usage", function () { | ||
return (0, _core.jsx)(_Pallet["default"], null, "hello world"); | ||
return (0, _core.jsx)(_Pallet.Pallet, null, "hello world"); | ||
}).add("nested usage with borders", function () { | ||
return (0, _core.jsx)(_Pallet["default"], { | ||
return (0, _core.jsx)(_Pallet.Pallet, { | ||
width: "500px", | ||
@@ -26,9 +26,9 @@ padding: "50px", | ||
justifyContent: "space-between" | ||
}, (0, _core.jsx)(_Pallet["default"], { | ||
}, (0, _core.jsx)(_Pallet.Pallet, { | ||
padding: "10px", | ||
border: "1px solid red" | ||
}, "child 1"), (0, _core.jsx)(_Pallet["default"], { | ||
}, "child 1"), (0, _core.jsx)(_Pallet.Pallet, { | ||
padding: "10px", | ||
border: "1px solid red" | ||
}, "child 2"), (0, _core.jsx)(_Pallet["default"], { | ||
}, "child 2"), (0, _core.jsx)(_Pallet.Pallet, { | ||
padding: "10px", | ||
@@ -38,3 +38,3 @@ border: "1px solid red" | ||
}).add("elevation", function () { | ||
return (0, _core.jsx)(_Pallet["default"], { | ||
return (0, _core.jsx)(_Pallet.Pallet, { | ||
padding: "50px", | ||
@@ -44,3 +44,3 @@ margin: "50px", | ||
justifyContent: "space-between" | ||
}, (0, _core.jsx)(_Pallet["default"], { | ||
}, (0, _core.jsx)(_Pallet.Pallet, { | ||
border: "1px solid black", | ||
@@ -50,3 +50,3 @@ width: "100px", | ||
elevation: "1" | ||
}, "Elevation 1"), (0, _core.jsx)(_Pallet["default"], { | ||
}, "Elevation 1"), (0, _core.jsx)(_Pallet.Pallet, { | ||
border: "1px solid black", | ||
@@ -56,3 +56,3 @@ width: "100px", | ||
elevation: "2" | ||
}, "Elevation 2"), (0, _core.jsx)(_Pallet["default"], { | ||
}, "Elevation 2"), (0, _core.jsx)(_Pallet.Pallet, { | ||
border: "1px solid black", | ||
@@ -62,3 +62,3 @@ width: "100px", | ||
elevation: "3" | ||
}, "Elevation 3"), (0, _core.jsx)(_Pallet["default"], { | ||
}, "Elevation 3"), (0, _core.jsx)(_Pallet.Pallet, { | ||
border: "1px solid black", | ||
@@ -68,3 +68,3 @@ width: "100px", | ||
elevation: "4" | ||
}, "Elevation 4"), (0, _core.jsx)(_Pallet["default"], { | ||
}, "Elevation 4"), (0, _core.jsx)(_Pallet.Pallet, { | ||
border: "1px solid black", | ||
@@ -71,0 +71,0 @@ width: "100px", |
import React from "react"; | ||
import { Props as PalletProps } from "./Pallet"; | ||
export declare type Size = "900" | "800" | "700" | "600" | "500" | "400" | "300" | "200" | "100"; | ||
import { PalletProps } from "./Pallet"; | ||
declare type Size = "900" | "800" | "700" | "600" | "500" | "400" | "300" | "200" | "100"; | ||
export declare type Variant = "default" | "muted"; | ||
export interface Props<T> extends PalletProps<T> { | ||
export interface ParagraphProps<T> extends PalletProps<T> { | ||
size?: Size; | ||
variant?: Variant; | ||
} | ||
export default function Paragraph<T extends keyof React.ReactHTML = "p">({ size, variant, ...rest }: Props<T>): JSX.Element; | ||
export declare function Paragraph<T extends keyof React.ReactHTML = "p">({ size, variant, ...rest }: ParagraphProps<T>): JSX.Element; | ||
export {}; |
@@ -6,7 +6,7 @@ "use strict"; | ||
}); | ||
exports["default"] = Paragraph; | ||
exports.Paragraph = Paragraph; | ||
var _react = _interopRequireDefault(require("react")); | ||
var _Pallet = _interopRequireDefault(require("./Pallet")); | ||
var _Pallet = require("./Pallet"); | ||
@@ -54,3 +54,3 @@ var _core = require("@emotion/core"); | ||
var lineHeight = LINE_HEIGHTS[size || DEFAULT_SIZE]; | ||
return (0, _core.jsx)(_Pallet["default"], _extends({ | ||
return (0, _core.jsx)(_Pallet.Pallet, _extends({ | ||
is: "p", | ||
@@ -57,0 +57,0 @@ lineHeight: lineHeight, |
@@ -7,5 +7,5 @@ "use strict"; | ||
var _Paragraph = _interopRequireDefault(require("./Paragraph")); | ||
var _Paragraph = require("./Paragraph"); | ||
var _Pallet = _interopRequireDefault(require("./Pallet")); | ||
var _Pallet = require("./Pallet"); | ||
@@ -18,59 +18,59 @@ var _core = require("@emotion/core"); | ||
(0, _react.storiesOf)("Paragraph", module).add("sizes", function () { | ||
return (0, _core.jsx)(_react2["default"].Fragment, null, (0, _core.jsx)(_Paragraph["default"], { | ||
return (0, _core.jsx)(_react2["default"].Fragment, null, (0, _core.jsx)(_Paragraph.Paragraph, { | ||
size: "900" | ||
}, "Paragraph 900"), (0, _core.jsx)(_Paragraph["default"], { | ||
}, "Paragraph 900"), (0, _core.jsx)(_Paragraph.Paragraph, { | ||
size: "800" | ||
}, "Paragraph 800"), (0, _core.jsx)(_Paragraph["default"], { | ||
}, "Paragraph 800"), (0, _core.jsx)(_Paragraph.Paragraph, { | ||
size: "700" | ||
}, "Paragraph 700"), (0, _core.jsx)(_Paragraph["default"], { | ||
}, "Paragraph 700"), (0, _core.jsx)(_Paragraph.Paragraph, { | ||
size: "600" | ||
}, "Paragraph 600"), (0, _core.jsx)(_Paragraph["default"], { | ||
}, "Paragraph 600"), (0, _core.jsx)(_Paragraph.Paragraph, { | ||
size: "500" | ||
}, "Paragraph 500"), (0, _core.jsx)(_Paragraph["default"], { | ||
}, "Paragraph 500"), (0, _core.jsx)(_Paragraph.Paragraph, { | ||
size: "400" | ||
}, "Paragraph 400"), (0, _core.jsx)(_Paragraph["default"], { | ||
}, "Paragraph 400"), (0, _core.jsx)(_Paragraph.Paragraph, { | ||
size: "300" | ||
}, "Paragraph 300"), (0, _core.jsx)(_Paragraph["default"], { | ||
}, "Paragraph 300"), (0, _core.jsx)(_Paragraph.Paragraph, { | ||
size: "200" | ||
}, "Paragraph 200"), (0, _core.jsx)(_Paragraph["default"], { | ||
}, "Paragraph 200"), (0, _core.jsx)(_Paragraph.Paragraph, { | ||
size: "100" | ||
}, "Paragraph 100")); | ||
}).add("wrapping", function () { | ||
return (0, _core.jsx)(_react2["default"].Fragment, null, (0, _core.jsx)(_Pallet["default"], { | ||
return (0, _core.jsx)(_react2["default"].Fragment, null, (0, _core.jsx)(_Pallet.Pallet, { | ||
width: "900px" | ||
}, (0, _core.jsx)(_Paragraph["default"], { | ||
}, (0, _core.jsx)(_Paragraph.Paragraph, { | ||
size: "900" | ||
}, EXAMPLE_TEXT)), (0, _core.jsx)(_Pallet["default"], { | ||
}, EXAMPLE_TEXT)), (0, _core.jsx)(_Pallet.Pallet, { | ||
width: "900px" | ||
}, (0, _core.jsx)(_Paragraph["default"], { | ||
}, (0, _core.jsx)(_Paragraph.Paragraph, { | ||
size: "800" | ||
}, EXAMPLE_TEXT)), (0, _core.jsx)(_Pallet["default"], { | ||
}, EXAMPLE_TEXT)), (0, _core.jsx)(_Pallet.Pallet, { | ||
width: "700px" | ||
}, (0, _core.jsx)(_Paragraph["default"], { | ||
}, (0, _core.jsx)(_Paragraph.Paragraph, { | ||
size: "700" | ||
}, EXAMPLE_TEXT)), (0, _core.jsx)(_Pallet["default"], { | ||
}, EXAMPLE_TEXT)), (0, _core.jsx)(_Pallet.Pallet, { | ||
width: "700px" | ||
}, (0, _core.jsx)(_Paragraph["default"], { | ||
}, (0, _core.jsx)(_Paragraph.Paragraph, { | ||
size: "600" | ||
}, EXAMPLE_TEXT)), (0, _core.jsx)(_Pallet["default"], { | ||
}, EXAMPLE_TEXT)), (0, _core.jsx)(_Pallet.Pallet, { | ||
width: "500px" | ||
}, (0, _core.jsx)(_Paragraph["default"], { | ||
}, (0, _core.jsx)(_Paragraph.Paragraph, { | ||
size: "500" | ||
}, EXAMPLE_TEXT)), (0, _core.jsx)(_Pallet["default"], { | ||
}, EXAMPLE_TEXT)), (0, _core.jsx)(_Pallet.Pallet, { | ||
width: "500px" | ||
}, (0, _core.jsx)(_Paragraph["default"], { | ||
}, (0, _core.jsx)(_Paragraph.Paragraph, { | ||
size: "400" | ||
}, EXAMPLE_TEXT)), (0, _core.jsx)(_Pallet["default"], { | ||
}, EXAMPLE_TEXT)), (0, _core.jsx)(_Pallet.Pallet, { | ||
width: "500px" | ||
}, (0, _core.jsx)(_Paragraph["default"], { | ||
}, (0, _core.jsx)(_Paragraph.Paragraph, { | ||
size: "300" | ||
}, EXAMPLE_TEXT)), (0, _core.jsx)(_Pallet["default"], { | ||
}, EXAMPLE_TEXT)), (0, _core.jsx)(_Pallet.Pallet, { | ||
width: "500px" | ||
}, (0, _core.jsx)(_Paragraph["default"], { | ||
}, (0, _core.jsx)(_Paragraph.Paragraph, { | ||
size: "200" | ||
}, EXAMPLE_TEXT)), (0, _core.jsx)(_Pallet["default"], { | ||
}, EXAMPLE_TEXT)), (0, _core.jsx)(_Pallet.Pallet, { | ||
width: "500px" | ||
}, (0, _core.jsx)(_Paragraph["default"], { | ||
}, (0, _core.jsx)(_Paragraph.Paragraph, { | ||
size: "100" | ||
}, EXAMPLE_TEXT))); | ||
}); |
{ | ||
"name": "@cubist/cubist", | ||
"version": "0.0.0-rc2", | ||
"version": "0.0.0-rc3", | ||
"main": "lib/index.js", | ||
@@ -15,3 +15,3 @@ "files": [ | ||
"doc": "typedoc --out docs src", | ||
"storybook": "start-storybook -p 6006", | ||
"storybook": "start-storybook --port 6006 --ci", | ||
"build-storybook": "build-storybook" | ||
@@ -18,0 +18,0 @@ }, |
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
40816
36
937
0