@cucumber/react-components 23.0.0 → 23.1.0

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 (25) hide show
  1. package/dist/src/components/app/CopyButton.module.scss +2 -2
  2. package/dist/src/components/app/ExecutionSummary.module.scss +2 -2
  3. package/dist/src/components/app/GherkinDocumentList.module.scss +6 -6
  4. package/dist/src/components/app/Header.module.scss +4 -4
  5. package/dist/src/components/app/HealthChart.module.scss +2 -2
  6. package/dist/src/components/app/NavigationButton.module.scss +2 -2
  7. package/dist/src/components/app/SearchBar.module.scss +5 -4
  8. package/dist/src/components/app/StatusesSummary.module.scss +2 -2
  9. package/dist/src/components/gherkin/Anchor.module.scss +2 -2
  10. package/dist/src/components/gherkin/Children.module.scss +1 -1
  11. package/dist/src/components/gherkin/DataTable.module.scss +2 -2
  12. package/dist/src/components/gherkin/Description.module.scss +2 -2
  13. package/dist/src/components/gherkin/DocString.module.scss +2 -2
  14. package/dist/src/components/gherkin/ErrorMessage.module.scss +3 -3
  15. package/dist/src/components/gherkin/ExampleDetail.module.scss +1 -1
  16. package/dist/src/components/gherkin/ExamplesTable.module.scss +3 -3
  17. package/dist/src/components/gherkin/Keyword.module.scss +2 -2
  18. package/dist/src/components/gherkin/Parameter.module.scss +2 -2
  19. package/dist/src/components/gherkin/StatusIcon.module.scss +4 -11
  20. package/dist/src/components/gherkin/Tags.module.scss +2 -2
  21. package/dist/src/components/gherkin/attachment/Attachment.module.scss +5 -5
  22. package/dist/src/styles/statuses.scss +13 -7
  23. package/dist/src/styles/tables.scss +3 -3
  24. package/dist/src/styles/theming.scss +15 -12
  25. package/package.json +2 -2
package/dist/src/components/app/CopyButton.module.scss CHANGED
@@ -1,11 +1,11 @@
1
- @import '../../styles/theming';
1
+ @use '../../styles/theming';
2
2
 
3
3
  .button {
4
4
  background-color: transparent;
5
5
  font-size: inherit;
6
6
  padding: 0;
7
7
  border: none;
8
- color: $anchorColor;
8
+ color: theming.$anchorColor;
9
9
  cursor: pointer;
10
10
 
11
11
  &:disabled {
package/dist/src/components/app/ExecutionSummary.module.scss CHANGED
@@ -1,5 +1,5 @@
1
- @import '../../styles/theming';
1
+ @use '../../styles/theming';
2
2
 
3
3
  .conjunction {
4
- color: $codeTextColor;
4
+ color: theming.$codeTextColor;
5
5
  }
package/dist/src/components/app/GherkinDocumentList.module.scss CHANGED
@@ -1,4 +1,4 @@
1
- @import '../../styles/theming';
1
+ @use '../../styles/theming';
2
2
 
3
3
  .icon {
4
4
  padding-top: 0.35em;
@@ -7,12 +7,12 @@
7
7
  }
8
8
 
9
9
  .accordion {
10
- border: 1px solid $panelAccentColor;
10
+ border: 1px solid theming.$panelAccentColor;
11
11
  border-radius: 2px;
12
12
  }
13
13
 
14
14
  .accordionItem + .accordionItem {
15
- border-top: 1px solid $panelAccentColor;
15
+ border-top: 1px solid theming.$panelAccentColor;
16
16
  }
17
17
 
18
18
  .accordionButton {
@@ -20,13 +20,13 @@
20
20
  width: 100%;
21
21
  padding: 0.75em 1em;
22
22
  border: none;
23
- background-color: $panelBackgroundColor;
24
- color: $panelTextColor;
23
+ background-color: theming.$panelBackgroundColor;
24
+ color: theming.$panelTextColor;
25
25
  cursor: pointer;
26
26
  text-align: left;
27
27
 
28
28
  &:hover {
29
- background-color: $panelAccentColor;
29
+ background-color: theming.$panelAccentColor;
30
30
  }
31
31
  }
32
32
 
package/dist/src/components/app/Header.module.scss CHANGED
@@ -1,11 +1,11 @@
1
- @import '../../styles/theming';
1
+ @use '../../styles/theming';
2
2
 
3
3
  .section {
4
4
  display: flex;
5
5
  align-items: stretch;
6
6
  justify-content: flex-start;
7
7
  width: 100%;
8
- border: 1px solid $panelAccentColor;
8
+ border: 1px solid theming.$panelAccentColor;
9
9
  margin: 0;
10
10
 
11
11
  & + & {
@@ -21,7 +21,7 @@
21
21
  padding: 1rem;
22
22
 
23
23
  & + & {
24
- border-left: 1px solid $panelAccentColor;
24
+ border-left: 1px solid theming.$panelAccentColor;
25
25
  }
26
26
 
27
27
  > svg {
@@ -29,7 +29,7 @@
29
29
  }
30
30
 
31
31
  a {
32
- color: $anchorColor;
32
+ color: theming.$anchorColor;
33
33
  }
34
34
  }
35
35
 
package/dist/src/components/app/HealthChart.module.scss CHANGED
@@ -1,7 +1,7 @@
1
- @import '../../styles/statuses';
1
+ @use '../../styles/statuses';
2
2
 
3
3
  .segment {
4
- @each $name, $color in $statusColors {
4
+ @each $name, $color in statuses.$statusColors {
5
5
  &[data-status='#{$name}'] {
6
6
  stroke: $color;
7
7
  }
package/dist/src/components/app/NavigationButton.module.scss CHANGED
@@ -1,11 +1,11 @@
1
- @import '../../styles/theming';
1
+ @use '../../styles/theming';
2
2
 
3
3
  .navigationButton {
4
4
  display: flex;
5
5
  align-items: center;
6
6
  gap: 4px;
7
7
  background-color: transparent;
8
- color: $anchorColor;
8
+ color: theming.$anchorColor;
9
9
  font-family: inherit;
10
10
  font-size: inherit;
11
11
  padding: 0;
package/dist/src/components/app/SearchBar.module.scss CHANGED
@@ -1,5 +1,6 @@
1
- @import '../../styles/theming';
2
- @import '../../styles/statuses';
1
+ @use 'sass:color';
2
+ @use '../../styles/theming';
3
+ @use '../../styles/statuses';
3
4
 
4
5
  .field {
5
6
  box-sizing: border-box;
@@ -49,9 +50,9 @@
49
50
  white-space: nowrap;
50
51
  cursor: pointer;
51
52
 
52
- @each $name, $color in $statusColors {
53
+ @each $name, $color in statuses.$statusColors {
53
54
  &[data-status='#{$name}'] {
54
- background-color: fade-out($color, 0.666);
55
+ background-color: color.adjust($color, $alpha: -0.666);
55
56
 
56
57
  svg {
57
58
  color: $color;
package/dist/src/components/app/StatusesSummary.module.scss CHANGED
@@ -1,4 +1,4 @@
1
- @import '../../styles/statuses';
1
+ @use '../../styles/statuses';
2
2
 
3
3
  .statusesList {
4
4
  list-style: none;
@@ -19,7 +19,7 @@
19
19
  text-align: center;
20
20
  text-transform: uppercase;
21
21
 
22
- @each $name, $color in $statusColors {
22
+ @each $name, $color in statuses.$statusColors {
23
23
  &[data-status='#{$name}'] {
24
24
  background-color: $color;
25
25
  }
package/dist/src/components/gherkin/Anchor.module.scss CHANGED
@@ -1,4 +1,4 @@
1
- @import '../../styles/theming';
1
+ @use '../../styles/theming';
2
2
 
3
3
  .wrapper {
4
4
  position: relative;
@@ -7,7 +7,7 @@
7
7
  }
8
8
 
9
9
  .anchor {
10
- color: $anchorColor;
10
+ color: theming.$anchorColor;
11
11
  opacity: 0;
12
12
  transition: all 0.35s ease-in-out;
13
13
  position: absolute;
package/dist/src/components/gherkin/Children.module.scss CHANGED
@@ -1,4 +1,4 @@
1
- @import '../../styles/theming';
1
+ @use '../../styles/theming';
2
2
 
3
3
  .children {
4
4
  padding: 0;
package/dist/src/components/gherkin/DataTable.module.scss CHANGED
@@ -1,5 +1,5 @@
1
- @import '../../styles/tables';
1
+ @use '../../styles/tables';
2
2
 
3
3
  .table {
4
- @include cucumber-table-style;
4
+ @include tables.cucumber-table-style;
5
5
  }
package/dist/src/components/gherkin/Description.module.scss CHANGED
@@ -1,10 +1,10 @@
1
- @import '../../styles/theming';
1
+ @use '../../styles/theming';
2
2
 
3
3
  .content {
4
4
  padding: 0;
5
5
  margin: 1em;
6
6
 
7
7
  a {
8
- color: $anchorColor;
8
+ color: theming.$anchorColor;
9
9
  }
10
10
  }
package/dist/src/components/gherkin/DocString.module.scss CHANGED
@@ -1,7 +1,7 @@
1
- @import '../../styles/theming';
1
+ @use '../../styles/theming';
2
2
 
3
3
  .docString {
4
- color: $docstringColor;
4
+ color: theming.$docstringColor;
5
5
  padding-bottom: 0.25em;
6
6
  margin: 0;
7
7
  overflow-x: auto;
package/dist/src/components/gherkin/ErrorMessage.module.scss CHANGED
@@ -1,4 +1,4 @@
1
- @import '../../styles/theming';
1
+ @use '../../styles/theming';
2
2
 
3
3
  .message {
4
4
  white-space: pre-wrap;
@@ -7,6 +7,6 @@
7
7
  border-radius: 0.25em;
8
8
  margin: 0;
9
9
  overflow-x: auto;
10
- background-color: $errorBackgroundColor;
11
- color: $errorTextColor;
10
+ background-color: theming.$errorBackgroundColor;
11
+ color: theming.$errorTextColor;
12
12
  }
package/dist/src/components/gherkin/ExampleDetail.module.scss CHANGED
@@ -1,4 +1,4 @@
1
- @import '../../styles/theming';
1
+ @use '../../styles/theming';
2
2
 
3
3
  .backIcon {
4
4
  transform: rotate(45deg);
package/dist/src/components/gherkin/ExamplesTable.module.scss CHANGED
@@ -1,8 +1,8 @@
1
- @import '../../styles/theming';
2
- @import '../../styles/tables';
1
+ @use '../../styles/theming';
2
+ @use '../../styles/tables';
3
3
 
4
4
  .examplesTable {
5
- @include cucumber-table-style;
5
+ @include tables.cucumber-table-style;
6
6
 
7
7
  th:first-child,
8
8
  td:first-child {
package/dist/src/components/gherkin/Keyword.module.scss CHANGED
@@ -1,7 +1,7 @@
1
- @import '../../styles/theming';
1
+ @use '../../styles/theming';
2
2
 
3
3
  .keyword {
4
4
  font-weight: bold;
5
- color: $keywordColor;
5
+ color: theming.$keywordColor;
6
6
  margin-right: 0.25em;
7
7
  }
package/dist/src/components/gherkin/Parameter.module.scss CHANGED
@@ -1,6 +1,6 @@
1
- @import '../../styles/theming';
1
+ @use '../../styles/theming';
2
2
 
3
3
  .parameter {
4
4
  font-weight: normal; // TODO should we need this if parent can always be normal?
5
- color: $parameterColor;
5
+ color: theming.$parameterColor;
6
6
  }
package/dist/src/components/gherkin/StatusIcon.module.scss CHANGED
@@ -1,16 +1,9 @@
1
- $statusColors:
2
- 'PASSED' #2cb14a,
3
- 'SKIPPED' #00a0cc,
4
- 'PENDING' #ffad33,
5
- 'UNDEFINED' #ffad33,
6
- 'AMBIGUOUS' #f4ebfd,
7
- 'FAILED' #bb0000,
8
- 'UNKNOWN' #b6becb;
9
-
1
+ @use 'sass:color';
2
+ @use '../../styles/statuses';
10
3
  .icon {
11
- @each $name, $color in $statusColors {
4
+ @each $name, $color in statuses.$statusColors {
12
5
  &[data-status='#{$name}'] {
13
- color: fade-out($color, 0.333);
6
+ color: color.adjust($color, $alpha: -0.25);
14
7
  }
15
8
  }
16
9
  }
package/dist/src/components/gherkin/Tags.module.scss CHANGED
@@ -1,4 +1,4 @@
1
- @import '../../styles/theming';
1
+ @use '../../styles/theming';
2
2
 
3
3
  .tags {
4
4
  padding: 0;
@@ -9,7 +9,7 @@
9
9
  display: inline;
10
10
  list-style-type: none;
11
11
  padding: 8px 0;
12
- color: $tagColor;
12
+ color: theming.$tagColor;
13
13
 
14
14
  &:not(:last-child) {
15
15
  margin-right: 10px;
package/dist/src/components/gherkin/attachment/Attachment.module.scss CHANGED
@@ -1,4 +1,4 @@
1
- @import '../../../styles/theming';
1
+ @use '../../../styles/theming';
2
2
 
3
3
  .text {
4
4
  position: relative;
@@ -8,8 +8,8 @@
8
8
  border-radius: 0.25em;
9
9
  margin: 0;
10
10
  overflow-x: auto;
11
- background-color: $codeBackgroundColor;
12
- color: $codeTextColor;
11
+ background-color: theming.$codeBackgroundColor;
12
+ color: theming.$codeTextColor;
13
13
  }
14
14
 
15
15
  .log {
@@ -22,7 +22,7 @@
22
22
  left: 0.75em;
23
23
  text-transform: uppercase;
24
24
  font-weight: bold;
25
- color: $parameterColor;
25
+ color: theming.$parameterColor;
26
26
  opacity: 0.75;
27
27
  }
28
28
  }
@@ -47,7 +47,7 @@
47
47
 
48
48
  a {
49
49
  text-decoration: none;
50
- color: $anchorColor;
50
+ color: theming.$anchorColor;
51
51
  }
52
52
 
53
53
  svg {
package/dist/src/styles/statuses.scss CHANGED
@@ -1,8 +1,14 @@
1
1
  $statusColors:
2
- 'PASSED' #2cb14a,
3
- 'SKIPPED' #00a0cc,
4
- 'PENDING' #ffad33,
5
- 'UNDEFINED' #ffad33,
6
- 'AMBIGUOUS' #f4ebfd,
7
- 'FAILED' #bb0000,
8
- 'UNKNOWN' #b6becb;
2
+ 'PASSED' oklch(72.3% 0.219 149.579),
3
+ // green-500
4
+ 'SKIPPED' oklch(62.3% 0.214 259.815),
5
+ // blue-500
6
+ 'PENDING' oklch(79.5% 0.184 86.047),
7
+ // yellow-500
8
+ 'UNDEFINED' oklch(79.5% 0.184 86.047),
9
+ // yellow-500
10
+ 'AMBIGUOUS' oklch(55.4% 0.046 257.417),
11
+ // slate-500
12
+ 'FAILED' oklch(63.7% 0.237 25.331),
13
+ // red-500
14
+ 'UNKNOWN' oklch(55.4% 0.046 257.417); // slate-500;
package/dist/src/styles/tables.scss CHANGED
@@ -1,4 +1,4 @@
1
- @import './theming';
1
+ @use 'theming';
2
2
 
3
3
  @mixin cucumber-table-style {
4
4
  border-collapse: collapse;
@@ -19,7 +19,7 @@
19
19
  border-style: solid;
20
20
  border-top: none;
21
21
  border-bottom: none;
22
- border-color: $keywordColor;
23
- color: $parameterColor;
22
+ border-color: theming.$keywordColor;
23
+ color: theming.$parameterColor;
24
24
  }
25
25
  }
package/dist/src/styles/theming.scss CHANGED
@@ -1,12 +1,15 @@
1
- $anchorColor: var(--cucumber-anchor-color, #297bde);
2
- $keywordColor: var(--cucumber-keyword-color, #000080);
3
- $parameterColor: var(--cucumber-parameter-color, #297bde);
4
- $tagColor: var(--cucumber-tag-color, #808000);
5
- $docstringColor: var(--cucumber-docstring-color, #008080);
6
- $errorBackgroundColor: var(--cucumber-error-background-color, #fff0f0);
7
- $errorTextColor: var(--cucumber-error-text-color, #bd0a2b);
8
- $codeBackgroundColor: var(--cucumber-code-background-color, #f6f8fa);
9
- $codeTextColor: var(--cucumber-code-text-color, #666);
10
- $panelBackgroundColor: var(--cucumber-panel-background-color, #f4f4f4);
11
- $panelAccentColor: var(--cucumber-panel-accent-color, #e8e8e8);
12
- $panelTextColor: var(--cucumber-panel-text-color, #444);
1
+ $anchorColor: var(--cucumber-anchor-color, oklch(62.3% 0.214 259.815)); // blue-500
2
+ $keywordColor: var(--cucumber-keyword-color, oklch(37.9% 0.146 265.522)); // blue-900
3
+ $parameterColor: var(--cucumber-parameter-color, oklch(62.3% 0.214 259.815)); // blue-500
4
+ $tagColor: var(--cucumber-tag-color, oklch(68.1% 0.162 75.834)); // yellow-600
5
+ $docstringColor: var(--cucumber-docstring-color, oklch(51.1% 0.096 186.391)); // teal-700
6
+ $errorBackgroundColor: var(--cucumber-error-background-color, oklch(97.1% 0.013 17.38)); // red-50
7
+ $errorTextColor: var(--cucumber-error-text-color, oklch(44.4% 0.177 26.899)); // red-800
8
+ $codeBackgroundColor: var(--cucumber-code-background-color, oklch(98.4% 0.003 247.858)); // slate-50
9
+ $codeTextColor: var(--cucumber-code-text-color, oklch(27.9% 0.041 260.031)); // slate-800
10
+ $panelBackgroundColor: var(
11
+ --cucumber-panel-background-color,
12
+ oklch(96.8% 0.007 247.896)
13
+ ); // slate-100
14
+ $panelAccentColor: var(--cucumber-panel-accent-color, oklch(92.9% 0.013 255.508)); // slate-200
15
+ $panelTextColor: var(--cucumber-panel-text-color, oklch(27.9% 0.041 260.031)); // slate-800
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cucumber/react-components",
3
- "version": "23.0.0",
3
+ "version": "23.1.0",
4
4
  "description": "React components for Cucumber",
5
5
  "type": "module",
6
6
  "main": "dist/src/index.js",
@@ -101,7 +101,7 @@
101
101
  "react": "18.2.0",
102
102
  "react-dom": "18.2.0",
103
103
  "react-is": "18.2.0",
104
- "sass": "1.57.1",
104
+ "sass": "^1.89.2",
105
105
  "sinon": "^17.0.1",
106
106
  "sinon-chai": "^3.7.0",
107
107
  "ts-node": "^10.9.1",