linkedunion-design-kit 1.4.7 → 1.4.8
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/README.md +20 -8
- package/dist/app/layout.d.ts +2 -2
- package/dist/app/layout.js +5 -5
- package/dist/app/page.js +2 -2
- package/dist/components/Avatar/Avatar.d.ts +1 -1
- package/dist/components/Avatar/Avatar.js +2 -5
- package/dist/components/Avatar/Avatar.stories.js +15 -6
- package/dist/components/Border/BorderRadius/BorderRadius.stories.js +8 -2
- package/dist/components/Border/BorderRadius/BorderRadiusTable.js +1 -1
- package/dist/components/Border/BorderRadius/BorderRadiusView.js +1 -1
- package/dist/components/Border/BorderWidth/BorderWidth.stories.js +8 -2
- package/dist/components/Border/BorderWidth/BorderWidthTable.js +1 -1
- package/dist/components/Border/BorderWidth/ViewBorderWidth.js +1 -1
- package/dist/components/Button/Button.d.ts +1 -1
- package/dist/components/Button/Button.js +8 -2
- package/dist/components/Button/Button.stories.js +56 -22
- package/dist/components/Color/BackgroundColor/Color.js +1 -1
- package/dist/components/Color/BackgroundColor/Color.stories.js +18 -6
- package/dist/components/Color/BackgroundColor/index.js +8 -1
- package/dist/components/Color/TextColor.d.ts +1 -1
- package/dist/components/Color/TextColor.js +2 -2
- package/dist/components/Color/TextColor.stories.js +4 -1
- package/dist/components/Icons/IconView.stories.js +1 -1
- package/dist/components/Icons/LUIcon.js +1 -1
- package/dist/components/Icons/LUIcon.stories.js +16 -7
- package/dist/components/Images/LuImage.d.ts +1 -1
- package/dist/components/Images/LuImage.js +2 -2
- package/dist/components/Images/LuImage.stories.js +7 -9
- package/dist/components/MediaCard/Card.d.ts +1 -1
- package/dist/components/MediaCard/Card.js +17 -6
- package/dist/components/MediaCard/Card.stories.js +11 -8
- package/dist/components/MediaCard/ContactProfile/ContactProfile.js +3 -3
- package/dist/components/MediaCard/ContactProfile/ContactProfileTheme1.js +2 -1
- package/dist/components/MediaCard/ContactProfile/ContactProfileTheme2.js +2 -1
- package/dist/components/MediaCard/PostByCategory/PostByCategory.js +3 -3
- package/dist/components/MediaCard/PostByCategory/PostByCategoryTheme1.js +2 -1
- package/dist/components/MediaCard/PostByCategory/PostByCategoryTheme2.js +2 -1
- package/dist/components/MediaCard/card.module.css +52 -0
- package/dist/components/Size/MinWidthHeight.d.ts +1 -1
- package/dist/components/Size/MinWidthHeight.stories.js +11 -5
- package/dist/components/Size/Size.stories.js +5 -2
- package/dist/components/Size/WidthHeight.stories.js +10 -4
- package/dist/components/Spacing/Margin/Margin.js +1 -1
- package/dist/components/Spacing/Margin/MarginBottom.js +1 -1
- package/dist/components/Spacing/Margin/MarginLeft.js +1 -1
- package/dist/components/Spacing/Margin/MarginRight.js +1 -1
- package/dist/components/Spacing/Margin/MarginTop.js +1 -1
- package/dist/components/Spacing/Margin/MarginX.js +1 -1
- package/dist/components/Spacing/Margin/MarginY.js +1 -1
- package/dist/components/Spacing/Padding/Padding.js +1 -1
- package/dist/components/Spacing/Padding/PaddingBottom.js +1 -1
- package/dist/components/Spacing/Padding/PaddingLeft.js +1 -1
- package/dist/components/Spacing/Padding/PaddingRight.js +1 -1
- package/dist/components/Spacing/Padding/PaddingTop.js +1 -1
- package/dist/components/Spacing/Padding/PaddingX.js +1 -1
- package/dist/components/Spacing/Padding/PaddingY.js +1 -1
- package/dist/components/Title/Title.d.ts +6 -0
- package/dist/components/Title/Title.js +7 -0
- package/dist/components/Title/Title.module.css +56 -0
- package/dist/components/Title/Title.stories.d.ts +5 -0
- package/dist/components/Title/Title.stories.js +49 -0
- package/dist/components/Title/Title.test.d.ts +1 -0
- package/dist/components/Title/Title.test.js +24 -0
- package/dist/components/Typography/Body/Body.stories.js +11 -11
- package/dist/components/Typography/Body/body.test.d.ts +1 -1
- package/dist/components/Typography/Body/body.test.js +18 -18
- package/dist/components/Typography/Display/Display.js +1 -1
- package/dist/components/Typography/Display/Display.stories.js +16 -12
- package/dist/components/Typography/Display/Display.test.d.ts +1 -1
- package/dist/components/Typography/Display/Display.test.js +20 -20
- package/dist/components/Typography/Headings/Heading.test.d.ts +1 -1
- package/dist/components/Typography/Headings/Heading.test.js +20 -20
- package/dist/components/Typography/Headings/Headings.js +1 -1
- package/dist/components/Typography/Headings/Headings.stories.js +12 -8
- package/dist/components/Typography/Typography.css +3002 -0
- package/dist/components/Typography/Typography.d.ts +1 -1
- package/dist/components/Typography/Typography.js +1 -1
- package/dist/components/Typography/Typography.stories.js +36 -15
- package/dist/index.d.ts +1 -1
- package/dist/index.js +1 -1
- package/dist/styles/global.css +95 -157
- package/dist/tailwind.config.js +4 -2
- package/dist/utils/colors.js +5 -5
- package/dist/utils/constants.d.ts +1 -0
- package/dist/utils/constants.js +1 -0
- package/dist/utils/iconList.js +479 -479
- package/dist/utils/index.d.ts +379 -379
- package/dist/utils/index.js +1383 -1362
- package/package.json +5 -2
- package/dist/app/layout.jsx +0 -13
- package/dist/app/page.jsx +0 -71
- package/dist/components/Avatar/Avatar.jsx +0 -15
- package/dist/components/Avatar/Avatar.stories.jsx +0 -25
- package/dist/components/Border/BorderRadius/BorderRadius.jsx +0 -12
- package/dist/components/Border/BorderRadius/BorderRadius.stories.jsx +0 -17
- package/dist/components/Border/BorderRadius/BorderRadiusTable.jsx +0 -61
- package/dist/components/Border/BorderRadius/BorderRadiusView.jsx +0 -8
- package/dist/components/Border/BorderWidth/BorderWidth.jsx +0 -12
- package/dist/components/Border/BorderWidth/BorderWidth.stories.jsx +0 -17
- package/dist/components/Border/BorderWidth/BorderWidthTable.jsx +0 -36
- package/dist/components/Border/BorderWidth/ViewBorderWidth.jsx +0 -8
- package/dist/components/Button/Button.jsx +0 -16
- package/dist/components/Button/Button.stories.jsx +0 -110
- package/dist/components/Color/BackgroundColor/Color.jsx +0 -16
- package/dist/components/Color/BackgroundColor/Color.stories.jsx +0 -76
- package/dist/components/Color/Color.d.ts +0 -2
- package/dist/components/Color/Color.js +0 -5
- package/dist/components/Color/Color.stories.d.ts +0 -10
- package/dist/components/Color/Color.stories.js +0 -88
- package/dist/components/Color/TextColor.jsx +0 -6
- package/dist/components/Color/TextColor.stories.jsx +0 -17
- package/dist/components/Icons/IconView.jsx +0 -23
- package/dist/components/Icons/IconView.stories.jsx +0 -8
- package/dist/components/Icons/LUIcon.jsx +0 -20
- package/dist/components/Icons/LUIcon.stories.jsx +0 -29
- package/dist/components/Images/LuImage.jsx +0 -7
- package/dist/components/Images/LuImage.stories.jsx +0 -39
- package/dist/components/MediaCard/Card.jsx +0 -33
- package/dist/components/MediaCard/Card.stories.jsx +0 -35
- package/dist/components/MediaCard/ContactProfile.d.ts +0 -2
- package/dist/components/MediaCard/ContactProfile.js +0 -10
- package/dist/components/MediaCard/ContactProfile.jsx +0 -39
- package/dist/components/MediaCard/PostByCategory.d.ts +0 -2
- package/dist/components/MediaCard/PostByCategory.js +0 -23
- package/dist/components/MediaCard/PostByCategory.jsx +0 -46
- package/dist/components/MediaCard/PostByCategoryTheme1.d.ts +0 -2
- package/dist/components/MediaCard/PostByCategoryTheme1.js +0 -8
- package/dist/components/MediaCard/PostByCategoryTheme2.d.ts +0 -2
- package/dist/components/MediaCard/PostByCategoryTheme2.js +0 -8
- package/dist/components/Navigation/TopNavigation/TopNavigation.d.ts +0 -2
- package/dist/components/Navigation/TopNavigation/TopNavigation.js +0 -8
- package/dist/components/Navigation/TopNavigation/TopNavigation.jsx +0 -45
- package/dist/components/Navigation/TopNavigation/TopNavigation.stories.d.ts +0 -4
- package/dist/components/Navigation/TopNavigation/TopNavigation.stories.js +0 -52
- package/dist/components/Navigation/TopNavigation/TopNavigation.stories.jsx +0 -40
- package/dist/components/Size/MinWidthHeight.jsx +0 -8
- package/dist/components/Size/MinWidthHeight.stories.jsx +0 -22
- package/dist/components/Size/Size.jsx +0 -6
- package/dist/components/Size/Size.stories.jsx +0 -22
- package/dist/components/Size/WidthHeight.jsx +0 -8
- package/dist/components/Size/WidthHeight.stories.jsx +0 -22
- package/dist/components/Spacing/Margin/Margin.jsx +0 -86
- package/dist/components/Spacing/Margin/MarginBottom.jsx +0 -86
- package/dist/components/Spacing/Margin/MarginLeft.jsx +0 -86
- package/dist/components/Spacing/Margin/MarginRight.jsx +0 -86
- package/dist/components/Spacing/Margin/MarginToken.jsx +0 -27
- package/dist/components/Spacing/Margin/MarginToken.stories.jsx +0 -7
- package/dist/components/Spacing/Margin/MarginTop.jsx +0 -87
- package/dist/components/Spacing/Padding/Padding.jsx +0 -87
- package/dist/components/Spacing/Padding/PaddingBottom.jsx +0 -86
- package/dist/components/Spacing/Padding/PaddingLeft.jsx +0 -86
- package/dist/components/Spacing/Padding/PaddingRight.jsx +0 -87
- package/dist/components/Spacing/Padding/PaddingToken.jsx +0 -27
- package/dist/components/Spacing/Padding/PaddingToken.stories.jsx +0 -7
- package/dist/components/Spacing/Padding/PaddingTop.jsx +0 -87
- package/dist/components/Typography/Headings/Headings.jsx +0 -6
- package/dist/components/Typography/Headings/Headings.stories.jsx +0 -19
- package/dist/components/Typography/Typography.jsx +0 -8
- package/dist/components/Typography/Typography.stories.jsx +0 -51
|
@@ -1,17 +1,17 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import { render, screen } from
|
|
3
|
-
import
|
|
4
|
-
import { Dummy_Para } from
|
|
5
|
-
import { Display } from
|
|
6
|
-
import { Display_Classes } from
|
|
7
|
-
describe(
|
|
8
|
-
it(
|
|
2
|
+
import { render, screen } from "@testing-library/react";
|
|
3
|
+
import "@testing-library/jest-dom";
|
|
4
|
+
import { Dummy_Para } from "../../../utils/constants";
|
|
5
|
+
import { Display } from "./Display";
|
|
6
|
+
import { Display_Classes } from "./";
|
|
7
|
+
describe("Body Component", function () {
|
|
8
|
+
it("renders with default props", function () {
|
|
9
9
|
render(_jsx(Display, {}));
|
|
10
10
|
var divElement = screen.getByText(Dummy_Para);
|
|
11
11
|
expect(divElement).toBeInTheDocument();
|
|
12
|
-
expect(divElement).toHaveClass(Display_Classes[
|
|
12
|
+
expect(divElement).toHaveClass(Display_Classes["lu-display-1"]);
|
|
13
13
|
});
|
|
14
|
-
describe(
|
|
14
|
+
describe("Body Component with different body classes", function () {
|
|
15
15
|
Object.values(Display_Classes).forEach(function (displayClass) {
|
|
16
16
|
it("applies the correct class \"".concat(displayClass, "\""), function () {
|
|
17
17
|
render(_jsx(Display, { display: displayClass }));
|
|
@@ -20,25 +20,25 @@ describe('Body Component', function () {
|
|
|
20
20
|
});
|
|
21
21
|
});
|
|
22
22
|
});
|
|
23
|
-
it(
|
|
24
|
-
var customClass =
|
|
23
|
+
it("applies additional class names from className prop", function () {
|
|
24
|
+
var customClass = "custom-class another-class";
|
|
25
25
|
render(_jsx(Display, { className: customClass }));
|
|
26
26
|
var divElement = screen.getByText(Dummy_Para);
|
|
27
|
-
expect(divElement).toHaveClass(Display_Classes[
|
|
28
|
-
expect(divElement).toHaveClass(
|
|
29
|
-
expect(divElement).toHaveClass(
|
|
27
|
+
expect(divElement).toHaveClass(Display_Classes["lu-display-1"]);
|
|
28
|
+
expect(divElement).toHaveClass("custom-class");
|
|
29
|
+
expect(divElement).toHaveClass("another-class");
|
|
30
30
|
});
|
|
31
|
-
it(
|
|
32
|
-
var customLabel =
|
|
31
|
+
it("renders custom label when provided", function () {
|
|
32
|
+
var customLabel = "Custom Label Text";
|
|
33
33
|
render(_jsx(Display, { label: customLabel }));
|
|
34
34
|
var divElement = screen.getByText(customLabel);
|
|
35
35
|
expect(divElement).toBeInTheDocument();
|
|
36
36
|
});
|
|
37
|
-
it(
|
|
38
|
-
var testId =
|
|
39
|
-
var ariaLabel =
|
|
37
|
+
it("passes additional props to the root div", function () {
|
|
38
|
+
var testId = "body-component";
|
|
39
|
+
var ariaLabel = "Body Component";
|
|
40
40
|
render(_jsx(Display, { "data-testid": testId, "aria-label": ariaLabel }));
|
|
41
41
|
var divElement = screen.getByTestId(testId);
|
|
42
|
-
expect(divElement).toHaveAttribute(
|
|
42
|
+
expect(divElement).toHaveAttribute("aria-label", ariaLabel);
|
|
43
43
|
});
|
|
44
44
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import
|
|
1
|
+
import "@testing-library/jest-dom";
|
|
@@ -1,17 +1,17 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import { render, screen } from
|
|
3
|
-
import
|
|
4
|
-
import { Dummy_Para } from
|
|
5
|
-
import { Heading } from
|
|
6
|
-
import { Heading_Classes } from
|
|
7
|
-
describe(
|
|
8
|
-
it(
|
|
2
|
+
import { render, screen } from "@testing-library/react";
|
|
3
|
+
import "@testing-library/jest-dom";
|
|
4
|
+
import { Dummy_Para } from "../../../utils/constants";
|
|
5
|
+
import { Heading } from "./Headings";
|
|
6
|
+
import { Heading_Classes } from "./";
|
|
7
|
+
describe("Heading Component", function () {
|
|
8
|
+
it("renders with default props", function () {
|
|
9
9
|
render(_jsx(Heading, {}));
|
|
10
10
|
var divElement = screen.getByText(Dummy_Para);
|
|
11
11
|
expect(divElement).toBeInTheDocument();
|
|
12
|
-
expect(divElement).toHaveClass(Heading_Classes[
|
|
12
|
+
expect(divElement).toHaveClass(Heading_Classes["lu-heading-h1"]);
|
|
13
13
|
});
|
|
14
|
-
describe(
|
|
14
|
+
describe("Heading Component with different body classes", function () {
|
|
15
15
|
Object.values(Heading_Classes).forEach(function (headingClass) {
|
|
16
16
|
it("applies the correct class \"".concat(headingClass, "\""), function () {
|
|
17
17
|
render(_jsx(Heading, { heading: headingClass }));
|
|
@@ -20,25 +20,25 @@ describe('Heading Component', function () {
|
|
|
20
20
|
});
|
|
21
21
|
});
|
|
22
22
|
});
|
|
23
|
-
it(
|
|
24
|
-
var customClass =
|
|
23
|
+
it("applies additional class names from className prop", function () {
|
|
24
|
+
var customClass = "custom-class another-class";
|
|
25
25
|
render(_jsx(Heading, { className: customClass }));
|
|
26
26
|
var divElement = screen.getByText(Dummy_Para);
|
|
27
|
-
expect(divElement).toHaveClass(Heading_Classes[
|
|
28
|
-
expect(divElement).toHaveClass(
|
|
29
|
-
expect(divElement).toHaveClass(
|
|
27
|
+
expect(divElement).toHaveClass(Heading_Classes["lu-heading-h1"]);
|
|
28
|
+
expect(divElement).toHaveClass("custom-class");
|
|
29
|
+
expect(divElement).toHaveClass("another-class");
|
|
30
30
|
});
|
|
31
|
-
it(
|
|
32
|
-
var customLabel =
|
|
31
|
+
it("renders custom label when provided", function () {
|
|
32
|
+
var customLabel = "Custom Label Text";
|
|
33
33
|
render(_jsx(Heading, { label: customLabel }));
|
|
34
34
|
var divElement = screen.getByText(customLabel);
|
|
35
35
|
expect(divElement).toBeInTheDocument();
|
|
36
36
|
});
|
|
37
|
-
it(
|
|
38
|
-
var testId =
|
|
39
|
-
var ariaLabel =
|
|
37
|
+
it("passes additional props to the root div", function () {
|
|
38
|
+
var testId = "body-component";
|
|
39
|
+
var ariaLabel = "Body Component";
|
|
40
40
|
render(_jsx(Heading, { "data-testid": testId, "aria-label": ariaLabel }));
|
|
41
41
|
var divElement = screen.getByTestId(testId);
|
|
42
|
-
expect(divElement).toHaveAttribute(
|
|
42
|
+
expect(divElement).toHaveAttribute("aria-label", ariaLabel);
|
|
43
43
|
});
|
|
44
44
|
});
|
|
@@ -24,6 +24,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
|
|
|
24
24
|
import { Dummy_Para } from "../../../utils/constants";
|
|
25
25
|
import { Heading_Classes } from "./";
|
|
26
26
|
export var Heading = function (_a) {
|
|
27
|
-
var _b = _a.heading, heading = _b === void 0 ? Heading_Classes["lu-heading-h1"] : _b, _c = _a.label, label = _c === void 0 ? Dummy_Para : _c, _d = _a.className, className = _d === void 0 ?
|
|
27
|
+
var _b = _a.heading, heading = _b === void 0 ? Heading_Classes["lu-heading-h1"] : _b, _c = _a.label, label = _c === void 0 ? Dummy_Para : _c, _d = _a.className, className = _d === void 0 ? "" : _d, props = __rest(_a, ["heading", "label", "className"]);
|
|
28
28
|
return (_jsx("h1", __assign({}, props, { className: "".concat(heading, " ").concat(className), children: label })));
|
|
29
29
|
};
|
|
@@ -34,25 +34,29 @@ _Heading.argTypes = {
|
|
|
34
34
|
},
|
|
35
35
|
options: headingsList.map(function (heading) { return heading.key; }),
|
|
36
36
|
table: {
|
|
37
|
-
type: {
|
|
38
|
-
|
|
39
|
-
|
|
37
|
+
type: {
|
|
38
|
+
summary: Object.values(Heading_Classes)
|
|
39
|
+
.map(function (item) { return item; })
|
|
40
|
+
.join(" | "),
|
|
41
|
+
},
|
|
42
|
+
defaultValue: { summary: Heading_Classes["lu-heading-h1"] },
|
|
43
|
+
},
|
|
40
44
|
},
|
|
41
45
|
label: {
|
|
42
46
|
description: "Text content",
|
|
43
47
|
control: "text",
|
|
44
48
|
table: {
|
|
45
49
|
type: { summary: "string" },
|
|
46
|
-
defaultValue: { summary: Dummy_Para }
|
|
47
|
-
}
|
|
50
|
+
defaultValue: { summary: Dummy_Para },
|
|
51
|
+
},
|
|
48
52
|
},
|
|
49
53
|
className: {
|
|
50
54
|
description: "Additional CSS classes",
|
|
51
55
|
control: "text",
|
|
52
56
|
table: {
|
|
53
57
|
type: { summary: "string" },
|
|
54
|
-
defaultValue: { summary: "" }
|
|
55
|
-
}
|
|
56
|
-
}
|
|
58
|
+
defaultValue: { summary: "" },
|
|
59
|
+
},
|
|
60
|
+
},
|
|
57
61
|
};
|
|
58
62
|
export var HeadingTokens = function () { return (_jsx(Table, { tableClassName: "lu-mb-500", headers: headingTableHeaders, rows: headingTableRows, "aria-label": "Heading text variants comparison" })); };
|