@beequip/hexagon 0.15.1 → 0.16.0-0

package/dist/components/Heading/index.d.ts

@@ -1,9 +1,32 @@
 import * as React from 'react';
+import { fontSizes } from '../../theme';
 import { Spacing } from '../../theme/types';
 export interface HeadingProps extends React.HTMLAttributes<HTMLHeadingElement> {
+    /**
+     * The level determines how the element should be rendered (h1 - h6).
+     */
+    level?: '1' | '2' | '3' | '4' | '5' | '6';
+    /**
+     * The default size of each heading level can be overwritten with a size corresponding with the theme sizes.
+     *
+     * `xs: 12`
+     *
+     * `s: 14`
+     *
+     * `m: 16`
+     *
+     * `l: 20`
+     *
+     * `xl: 24`
+     *
+     * `xxl: 28`
+     *
+     * `xxxl: 32`
+     */
+    size?: keyof typeof fontSizes;
+    margin?: Spacing;
     align?: 'inherit' | 'left' | 'center' | 'right' | 'justify';
     weight?: '400' | '500' | '800' | '900';
-    size?: 1 | 2 | 3 | 4 | 5 | 6;
-    margin?: Spacing;
+    children: React.ReactNode;
 }
 export declare const Heading: React.FC<HeadingProps>;

package/dist/components/Heading/index.js

@@ -4,14 +4,18 @@ exports.Heading = void 0;
 var tslib_1 = require("tslib");
 var React = require("react");
 var styles_1 = require("./styles");
-var Heading = function (_a) {
-    var children = _a.children, props = tslib_1.__rest(_a, ["children"]);
-    return (React.createElement(styles_1.StyledHeading, tslib_1.__assign({}, props), children));
+var Heading = function (props) {
+    var children = props.children, level = props.level, size = props.size;
+    return (React.createElement(styles_1.StyledHeading, tslib_1.__assign({ as: level
+            ? "h" + level
+            : typeof size === 'number'
+                ? "h" + size
+                : undefined, role: "heading", "aria-level": level ? parseInt(level) : undefined }, props), children));
 };
 exports.Heading = Heading;
 exports.Heading.defaultProps = {
     align: 'inherit',
-    size: 2,
+    level: '2',
     margin: 2,
 };
 //# sourceMappingURL=index.js.map

package/dist/components/Heading/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Heading/index.tsx"],"names":[],"mappings":";;;;AAAA,6BAA8B;AAE9B,mCAAwC;AASjC,IAAM,OAAO,GAA2B,UAAC,EAAsB;IAApB,IAAA,QAAQ,cAAA,EAAK,KAAK,sBAApB,YAAsB,CAAF;IAAO,OAAA,CACvE,oBAAC,sBAAa,uBAAK,KAAK,GAAG,QAAQ,CAAiB,CACvD,CAAA;CAAA,CAAA;AAFY,QAAA,OAAO,WAEnB;AAED,eAAO,CAAC,YAAY,GAAG;IACnB,KAAK,EAAE,SAAS;IAChB,IAAI,EAAE,CAAC;IACP,MAAM,EAAE,CAAC;CACa,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Heading/index.tsx"],"names":[],"mappings":";;;;AAAA,6BAA8B;AAG9B,mCAAwC;AA8BjC,IAAM,OAAO,GAA2B,UAAA,KAAK;IACxC,IAAA,QAAQ,GAAkB,KAAK,SAAvB,EAAE,KAAK,GAAW,KAAK,MAAhB,EAAE,IAAI,GAAK,KAAK,KAAV,CAAU;IACvC,OAAO,CACH,oBAAC,sBAAa,qBACV,EAAE,EACE,KAAK;YACD,CAAC,CAAC,MAAI,KAAO;YACb,CAAC,CAAC,OAAO,IAAI,KAAK,QAAQ;gBAC1B,CAAC,CAAC,MAAI,IAAM;gBACZ,CAAC,CAAC,SAAS,EAEnB,IAAI,EAAC,SAAS,gBACF,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,IAC3C,KAAK,GAER,QAAQ,CACG,CACnB,CAAA;AACL,CAAC,CAAA;AAlBY,QAAA,OAAO,WAkBnB;AAED,eAAO,CAAC,YAAY,GAAG;IACnB,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,GAAG;IACV,MAAM,EAAE,CAAC;CACa,CAAA"}

package/dist/components/Heading/index.stories.d.ts

@@ -2,5 +2,6 @@ import { Meta, Story } from '@storybook/react/types-6-0';
 import { HeadingProps } from '.';
 declare const _default: Meta<import("@storybook/react/types-6-0").Args>;
 export default _default;
-export declare const All: Story<HeadingProps>;
 export declare const Default: Story<HeadingProps>;
+export declare const HeadingWithText: Story<HeadingProps>;
+export declare const AllHeadings: Story<HeadingProps>;

package/dist/components/Heading/index.stories.js

@@ -1,9 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Default = exports.All = void 0;
+exports.AllHeadings = exports.HeadingWithText = exports.Default = void 0;
 var tslib_1 = require("tslib");
 var react_1 = require("react");
 var _1 = require(".");
+var Text_1 = require("../Text");
 exports.default = {
     title: 'Hexagon/Heading',
     component: _1.Heading,
@@ -11,18 +12,26 @@ exports.default = {
 };
 var Template = function (_a) {
     var args = tslib_1.__rest(_a, []);
-    return (react_1.default.createElement(_1.Heading, tslib_1.__assign({}, args), "Heading"));
+    return (react_1.default.createElement(_1.Heading, tslib_1.__assign({}, args), args.children || 'Heading'));
 };
-var All = function () { return (react_1.default.createElement(react_1.default.Fragment, null,
-    react_1.default.createElement(_1.Heading, { size: 1 }, "Heading 1"),
-    react_1.default.createElement(_1.Heading, { size: 2 }, "Heading 2"),
-    react_1.default.createElement(_1.Heading, { size: 3 }, "Heading 3"),
-    react_1.default.createElement(_1.Heading, { size: 4 }, "Heading 4"),
-    react_1.default.createElement(_1.Heading, { size: 5 }, "Heading 5"),
-    react_1.default.createElement(_1.Heading, { size: 6 }, "Heading 6"))); };
-exports.All = All;
-exports.All.parameters = {
+exports.Default = Template.bind({});
+var HeadingWithText = function (_a) {
+    var args = tslib_1.__rest(_a, []);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(Template, tslib_1.__assign({}, args), "Level " + (args.level ||
+            '(?)') + " and size " + (args.size || '(?)') + " "),
+        react_1.default.createElement(Text_1.Text, null, "Cras placerat neque eget dolor fermentum egestas. Donec in tortor sed arcu rutrum posuere. Quisque ultrices ipsum eu scelerisque sodales. Maecenas fermentum quam quis libero vestibulum, eu blandit dolor scelerisque. Aenean vel dapibus erat. Nullam at orci vestibulum.")));
+};
+exports.HeadingWithText = HeadingWithText;
+var AllHeadings = function () { return (react_1.default.createElement(react_1.default.Fragment, null,
+    react_1.default.createElement(_1.Heading, { level: "1" }, "Heading 1 / 32px"),
+    react_1.default.createElement(_1.Heading, { level: "2" }, "Heading 2 / 28px"),
+    react_1.default.createElement(_1.Heading, { level: "3" }, "Heading 3 / 24px"),
+    react_1.default.createElement(_1.Heading, { level: "4" }, "Heading 4 / 20px"),
+    react_1.default.createElement(_1.Heading, { level: "5" }, "Heading 5 / 16px"),
+    react_1.default.createElement(_1.Heading, { level: "6" }, "Heading 6 / 14px"))); };
+exports.AllHeadings = AllHeadings;
+exports.AllHeadings.parameters = {
     controls: { hideNoControlsWarning: true },
 };
-exports.Default = Template.bind({});
 //# sourceMappingURL=index.stories.js.map