Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@cubist/cubist

Package Overview
Dependencies
Maintainers
1
Versions
8
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@cubist/cubist - npm Package Compare versions

Comparing version 0.0.0-rc2 to 0.0.0-rc3

lib/__snapshots__/Box.test.js.snap

4

lib/Box.d.ts
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 @@ },

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc