@orangesk/orange-design-system 2.0.0-beta.43 → 2.0.0-beta.44

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.
Files changed (53) hide show
  1. package/build/components/BodyBanner/style.css +1 -1
  2. package/build/components/BodyBanner/style.css.map +1 -1
  3. package/build/components/Breadcrumbs/style.css +1 -1
  4. package/build/components/Breadcrumbs/style.css.map +1 -1
  5. package/build/components/Carousel/style.css +1 -1
  6. package/build/components/Carousel/style.css.map +1 -1
  7. package/build/components/Expander/style.css +1 -1
  8. package/build/components/Expander/style.css.map +1 -1
  9. package/build/components/Footer/style.css +1 -1
  10. package/build/components/Footer/style.css.map +1 -1
  11. package/build/components/Grid/style.css +1 -1
  12. package/build/components/Grid/style.css.map +1 -1
  13. package/build/components/Megamenu/style.css +1 -1
  14. package/build/components/Megamenu/style.css.map +1 -1
  15. package/build/components/Tag/style.css +1 -1
  16. package/build/components/Tag/style.css.map +1 -1
  17. package/build/components/index.js +1 -1
  18. package/build/components/index.js.map +1 -1
  19. package/build/components/tsconfig.tsbuildinfo +1 -1
  20. package/build/components/types/index.d.ts +4 -2
  21. package/build/components/types/src/components/Carousel/Carousel.static.d.ts +7 -0
  22. package/build/components/types/src/components/Expander/Expander.d.ts +2 -0
  23. package/build/components/types/src/components/Grid/Grid.d.ts +2 -2
  24. package/build/lib/base.css +1 -1
  25. package/build/lib/base.css.map +1 -1
  26. package/build/lib/components.css +1 -1
  27. package/build/lib/components.css.map +1 -1
  28. package/build/lib/footer.css +1 -1
  29. package/build/lib/footer.css.map +1 -1
  30. package/build/lib/megamenu.css +1 -1
  31. package/build/lib/megamenu.css.map +1 -1
  32. package/build/lib/scripts.js +1 -1
  33. package/build/lib/scripts.js.map +1 -1
  34. package/build/lib/style.css +1 -1
  35. package/build/lib/style.css.map +1 -1
  36. package/build/search-index.json +2 -2
  37. package/package.json +6 -6
  38. package/src/components/BodyBanner/styles/mixins.scss +2 -12
  39. package/src/components/Carousel/Carousel.static.ts +109 -57
  40. package/src/components/Carousel/styles/mixins.scss +1 -1
  41. package/src/components/Carousel/tests/Carousel.static.test.jsx +91 -5
  42. package/src/components/Expander/Expander.tsx +4 -0
  43. package/src/components/Expander/styles/style.scss +12 -0
  44. package/src/components/Expander/tests/Expander.conformance.test.jsx +4 -0
  45. package/src/components/Expander/tests/Expander.unit.test.jsx +9 -0
  46. package/src/components/Grid/Grid.tsx +5 -2
  47. package/src/components/Grid/styles/config.scss +3 -2
  48. package/src/components/Grid/tests/Grid.unit.test.jsx +40 -10
  49. package/src/components/Tag/styles/config.scss +5 -1
  50. package/src/components/Tag/styles/mixins.scss +2 -1
  51. package/src/styles/base/globals.scss +1 -0
  52. package/src/styles/export/base.js +1 -1
  53. package/src/styles/tokens/base.scss +1 -1
package/src/components/Grid/tests/Grid.unit.test.jsx CHANGED
@@ -52,16 +52,20 @@ describe("Grid", () => {
52
52
  expect(getByTestId("test-id")).toHaveClass("grid--justify-height");
53
53
  });
54
54
 
55
- ["medium", "large", "xlarge"].forEach((rowGapSize) => {
56
- it(`applies grid-row-gap--${rowGapSize} class when rowGapSize is ${rowGapSize}`, () => {
57
- const { getByTestId } = render(
58
- <Grid data-testid="test-id" rowGapSize={rowGapSize} />,
59
- );
60
- expect(getByTestId("test-id")).toHaveClass(`grid-row-gap--${rowGapSize}`);
61
- });
62
- });
63
-
64
- ["small", "large", "none"].forEach((columnGapSize) => {
55
+ ["none", "xsmall", "small", "medium", "large", "xlarge"].forEach(
56
+ (rowGapSize) => {
57
+ it(`applies grid-row-gap--${rowGapSize} class when rowGapSize is ${rowGapSize}`, () => {
58
+ const { getByTestId } = render(
59
+ <Grid data-testid="test-id" rowGapSize={rowGapSize} />,
60
+ );
61
+ expect(getByTestId("test-id")).toHaveClass(
62
+ `grid-row-gap--${rowGapSize}`,
63
+ );
64
+ });
65
+ },
66
+ );
67
+
68
+ ["small", "large", "xlarge", "none"].forEach((columnGapSize) => {
65
69
  it(`applies grid-column-gap--${columnGapSize} class when columnGapSize is ${columnGapSize}`, () => {
66
70
  const { getByTestId } = render(
67
71
  <Grid data-testid="test-id" columnGapSize={columnGapSize} />,
@@ -72,6 +76,32 @@ describe("Grid", () => {
72
76
  });
73
77
  });
74
78
 
79
+ it("applies responsive row gap classes when rowGapSize is object", () => {
80
+ const { getByTestId } = render(
81
+ <Grid
82
+ data-testid="test-id"
83
+ rowGapSize={{ xs: "medium", md: "xlarge" }}
84
+ />,
85
+ );
86
+ expect(getByTestId("test-id")).toHaveClass(
87
+ "grid-row-gap--medium",
88
+ "grid-row-gap--md-xlarge",
89
+ );
90
+ });
91
+
92
+ it("applies responsive column gap classes when columnGapSize is object", () => {
93
+ const { getByTestId } = render(
94
+ <Grid
95
+ data-testid="test-id"
96
+ columnGapSize={{ xs: "small", lg: "xlarge" }}
97
+ />,
98
+ );
99
+ expect(getByTestId("test-id")).toHaveClass(
100
+ "grid-column-gap--small",
101
+ "grid-column-gap--lg-xlarge",
102
+ );
103
+ });
104
+
75
105
  it("merges additional className", () => {
76
106
  const { getByTestId } = render(
77
107
  <Grid data-testid="test-id" className="test-class" />,
package/src/components/Tag/styles/config.scss CHANGED
@@ -15,18 +15,21 @@ $sizes: (
15
15
  font-size: convert.to-rem(14px) "!important",
16
16
  line-height: 1rem "!important",
17
17
  font-weight: 700,
18
+ border-width: 1px,
18
19
  ),
19
20
  small: (
20
21
  padding: convert.to-rem(2px) convert.to-rem(8px),
21
22
  font-size: convert.to-rem(12px) "!important",
22
23
  line-height: convert.to-rem(14px) "!important",
23
24
  font-weight: 400,
25
+ border-width: 2px,
24
26
  ),
25
27
  large: (
26
28
  padding: convert.to-rem(11px) convert.to-rem(15px),
27
29
  font-size: convert.to-rem(16px) "!important",
28
30
  line-height: convert.to-rem(18px) "!important",
29
31
  font-weight: 700,
32
+ border-width: 2px,
30
33
  ),
31
34
  );
32
35
 
@@ -83,7 +86,8 @@ $colors: (
83
86
  "transparent": (
84
87
  background-color: transparent,
85
88
  color: var(--color-text-default),
86
- border: 1px solid var(--color-border-strong),
89
+ border-color: var(--color-border-strong),
90
+ border-style: solid,
87
91
  ),
88
92
  );
89
93
 
package/src/components/Tag/styles/mixins.scss CHANGED
@@ -19,7 +19,8 @@
19
19
  }
20
20
 
21
21
  @mixin color-transparent() {
22
- border: 1px solid var(--color-border-strong);
22
+ border-color: var(--color-border-strong);
23
+ border-style: solid;
23
24
  }
24
25
 
25
26
  @mixin buttton-disabled($is-icon: false) {
package/src/styles/base/globals.scss CHANGED
@@ -31,6 +31,7 @@ html,
31
31
  body {
32
32
  padding: 0;
33
33
  margin: 0;
34
+ -webkit-text-size-adjust: 100%;
34
35
  text-size-adjust: 100%;
35
36
  }
36
37
 
package/src/styles/export/base.js CHANGED
@@ -2,7 +2,7 @@
2
2
  // Do not edit this file directly - edit the SCSS source instead
3
3
 
4
4
  export const exports = {
5
- "font-family": "OrangeSK Neue, Arial, Helvetica Neue, sans-serif",
5
+ "font-family": "OrangeSK Neue, Helvetica Neue, Helvetica, Arial, sans-serif",
6
6
  "font-size": "16px",
7
7
  "line-height": "1.25",
8
8
  "background": "var(--color-background-primary)",
package/src/styles/tokens/base.scss CHANGED
@@ -1,7 +1,7 @@
1
1
  @use "sass:color" as sasscolor;
2
2
  @use "./color";
3
3
 
4
- $font-family: "OrangeSK Neue", Arial, "Helvetica Neue", sans-serif;
4
+ $font-family: "OrangeSK Neue", "Helvetica Neue", Helvetica, Arial, sans-serif;
5
5
  $font-size: 16px;
6
6
  $line-height: 1.25;
7
7