@openeuropa/bcl-subscription 0.20.0 → 0.21.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 (5) hide show
  1. package/__snapshots__/subscription.test.js.snap +185 -145
  2. package/data/{data_modal.js → data--modal.js} +0 -0
  3. package/package.json +3 -3
  4. package/subscription.story.js +14 -11
  5. package/subscription.test.js +7 -6
package/__snapshots__/subscription.test.js.snap CHANGED
@@ -620,101 +620,97 @@ exports[`OE - Subscription renders correctly 1`] = `
620
620
  class="container"
621
621
  >
622
622
  <div
623
- class="row"
623
+ class="bg-transparent border-0 card"
624
624
  >
625
625
  <div
626
- class="bg-transparent border-0 card"
626
+ class="row"
627
627
  >
628
628
  <div
629
- class="row"
629
+ class="col-8 col-md-4 col-lg-3 offset-2 offset-md-0"
630
+ >
631
+ <img
632
+ alt="alt img"
633
+ class="card-img-top rounded-1"
634
+ src="https://picsum.photos/255/255?random=6"
635
+ />
636
+ </div>
637
+ <div
638
+ class="col-md-8 col-lg-9 col-xxl-8"
630
639
  >
631
640
  <div
632
- class="col-md-4 col-lg-3"
633
- >
634
- <img
635
- alt="alt img"
636
- class="card-img-top rounded-1"
637
- src="https://picsum.photos/255/255?random=6"
638
- />
639
- </div>
640
- <div
641
- class="col-md-8 col-lg-9 col-xxl-8"
641
+ class="card-body pt-4 pt-md-0 px-0 px-md-3 pb-0"
642
642
  >
643
+ <h2
644
+ class="fw-bold card-title"
645
+ >
646
+ This is the title of this page
647
+ </h2>
643
648
  <div
644
- class="card-body pt-md-0 px-0 px-md-3 pb-0"
649
+ class="mb-4 mt-4"
645
650
  >
646
- <h2
647
- class="fw-bold card-title"
651
+ <span
652
+ class="text-muted me-3"
648
653
  >
649
- This is the title of this page
650
- </h2>
651
- <div
652
- class="mb-4 mt-4"
653
- >
654
- <span
655
- class="text-muted me-3"
656
- >
657
- 8 hours ago
658
- </span>
659
- </div>
660
- <p>
661
-
654
+ 8 hours ago
655
+ </span>
656
+ </div>
657
+ <p>
658
+
662
659
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse volutpat ultricies massa, a dapibus libero porta nec.
663
660
  Sed facilisis dictum vestibulum. Fusce commodo hendrerit diam, pretium tempus leo varius sit amet.
664
661
  Etiam interdum, orci at sagittis luctus, lorem libero tempus mauris, a fermentum libero orci semper lacus.
665
662
  Duis tristique fringilla magna, eu egestas dolor molestie non.
666
663
 
667
- </p>
668
- <div
669
- class="mt-2-5"
664
+ </p>
665
+ <div
666
+ class="mt-2-5"
667
+ >
668
+ <span
669
+ class="mb-2 me-2 badge rounded-pill badge-outline-primary"
670
670
  >
671
- <span
672
- class="mb-2 me-2 badge rounded-pill badge-outline-primary"
673
- >
674
- Category 1
675
- </span>
676
- <span
677
- class="mb-2 badge rounded-pill badge-outline-primary"
678
- >
679
- Category 2
680
- </span>
681
- </div>
671
+ Category 1
672
+ </span>
673
+ <span
674
+ class="mb-2 badge rounded-pill badge-outline-primary"
675
+ >
676
+ Category 2
677
+ </span>
682
678
  </div>
683
679
  </div>
684
680
  </div>
685
681
  </div>
686
- <div
687
- class="d-flex justify-content-end"
682
+ </div>
683
+ <div
684
+ class="d-flex justify-content-end mt-2 align-items-center"
685
+ >
686
+ <button
687
+ class="me-3 btn btn-outline-primary btn-md"
688
+ type="button"
688
689
  >
689
- <button
690
- class="me-3 btn btn-outline-primary btn-md"
691
- type="button"
690
+ <svg
691
+ class="me-2-5 bi icon--fluid"
692
692
  >
693
- <svg
694
- class="me-2-5 bi icon--fluid"
695
- >
696
- <use
697
- xlink:href="/icons.svg#printer-fill"
698
- />
699
- </svg>
700
- Print
701
- </button>
702
- <button
703
- class="btn btn-outline-primary btn-md"
704
- data-bs-target="#subscribeModal"
705
- data-bs-toggle="modal"
706
- type="button"
693
+ <use
694
+ xlink:href="/icons.svg#printer-fill"
695
+ />
696
+ </svg>
697
+ Print
698
+ </button>
699
+ <button
700
+ class="btn btn-outline-primary btn-md"
701
+ data-bs-target="#subscribeModal"
702
+ data-bs-toggle="modal"
703
+ type="button"
704
+ >
705
+ <svg
706
+ class="me-2-5 bi icon--fluid"
707
707
  >
708
- <svg
709
- class="me-2-5 bi icon--fluid"
710
- >
711
- <use
712
- xlink:href="/icons.svg#envelope-fill"
713
- />
714
- </svg>
715
- Subscribe
716
- </button>
717
- </div>
708
+ <use
709
+ xlink:href="/icons.svg#envelope-fill"
710
+ />
711
+ </svg>
712
+ Subscribe
713
+ </button>
718
714
  </div>
719
715
  </div>
720
716
  </div>
@@ -1088,45 +1084,57 @@ exports[`OE - Subscription renders correctly 1`] = `
1088
1084
  >
1089
1085
  Follow us on social media
1090
1086
  </p>
1091
- <a
1092
- class="d-block standalone mb-1"
1093
- href="#"
1087
+ <div
1088
+ class="mb-1"
1094
1089
  >
1095
- <svg
1096
- class="me-2 me-2-5 bi icon--xs"
1090
+ <a
1091
+ class="standalone"
1092
+ href="#"
1097
1093
  >
1098
- <use
1099
- xlink:href="/icons.svg#facebook"
1100
- />
1101
- </svg>
1102
- Facebook
1103
- </a>
1104
- <a
1105
- class="d-block standalone mb-1"
1106
- href="#"
1094
+ <svg
1095
+ class="me-2-5 bi icon--xs"
1096
+ >
1097
+ <use
1098
+ xlink:href="/icons.svg#facebook"
1099
+ />
1100
+ </svg>
1101
+ Facebook
1102
+ </a>
1103
+ </div>
1104
+ <div
1105
+ class="mb-1"
1107
1106
  >
1108
- <svg
1109
- class="me-2 me-2-5 bi icon--xs"
1107
+ <a
1108
+ class="standalone"
1109
+ href="#"
1110
1110
  >
1111
- <use
1112
- xlink:href="/icons.svg#twitter"
1113
- />
1114
- </svg>
1115
- Twitter
1116
- </a>
1117
- <a
1118
- class="d-block standalone mb-1"
1119
- href="#"
1111
+ <svg
1112
+ class="me-2-5 bi icon--xs"
1113
+ >
1114
+ <use
1115
+ xlink:href="/icons.svg#twitter"
1116
+ />
1117
+ </svg>
1118
+ Twitter
1119
+ </a>
1120
+ </div>
1121
+ <div
1122
+ class="mb-1"
1120
1123
  >
1121
- <svg
1122
- class="me-2 me-2-5 bi icon--xs"
1124
+ <a
1125
+ class="standalone"
1126
+ href="#"
1123
1127
  >
1124
- <use
1125
- xlink:href="/icons.svg#linkedin"
1126
- />
1127
- </svg>
1128
- Linkedin
1129
- </a>
1128
+ <svg
1129
+ class="me-2-5 bi icon--xs"
1130
+ >
1131
+ <use
1132
+ xlink:href="/icons.svg#linkedin"
1133
+ />
1134
+ </svg>
1135
+ Linkedin
1136
+ </a>
1137
+ </div>
1130
1138
  </div>
1131
1139
  <div
1132
1140
  class="col-12 col-lg-4"
@@ -1144,30 +1152,46 @@ exports[`OE - Subscription renders correctly 1`] = `
1144
1152
  >
1145
1153
  Optional links
1146
1154
  </p>
1147
- <a
1148
- class="d-block standalone mb-1"
1149
- href="#"
1155
+ <div
1156
+ class="mb-1"
1150
1157
  >
1151
- Link
1152
- </a>
1153
- <a
1154
- class="d-block standalone mb-1"
1155
- href="#"
1158
+ <a
1159
+ class="standalone"
1160
+ href="#"
1161
+ >
1162
+ Link
1163
+ </a>
1164
+ </div>
1165
+ <div
1166
+ class="mb-1"
1156
1167
  >
1157
- Link
1158
- </a>
1159
- <a
1160
- class="d-block standalone mb-1"
1161
- href="#"
1168
+ <a
1169
+ class="standalone"
1170
+ href="#"
1171
+ >
1172
+ Link
1173
+ </a>
1174
+ </div>
1175
+ <div
1176
+ class="mb-1"
1162
1177
  >
1163
- Link
1164
- </a>
1165
- <a
1166
- class="d-block standalone mb-1"
1167
- href="#"
1178
+ <a
1179
+ class="standalone"
1180
+ href="#"
1181
+ >
1182
+ Link
1183
+ </a>
1184
+ </div>
1185
+ <div
1186
+ class="mb-1"
1168
1187
  >
1169
- Link
1170
- </a>
1188
+ <a
1189
+ class="standalone"
1190
+ href="#"
1191
+ >
1192
+ Link
1193
+ </a>
1194
+ </div>
1171
1195
  </div>
1172
1196
  </div>
1173
1197
  <div
@@ -1181,30 +1205,46 @@ exports[`OE - Subscription renders correctly 1`] = `
1181
1205
  >
1182
1206
  More information on:
1183
1207
  </p>
1184
- <a
1185
- class="d-block standalone mb-1"
1186
- href="#"
1208
+ <div
1209
+ class="mb-1"
1187
1210
  >
1188
- Link
1189
- </a>
1190
- <a
1191
- class="d-block standalone mb-1"
1192
- href="#"
1211
+ <a
1212
+ class="standalone"
1213
+ href="#"
1214
+ >
1215
+ Link
1216
+ </a>
1217
+ </div>
1218
+ <div
1219
+ class="mb-1"
1193
1220
  >
1194
- Link
1195
- </a>
1196
- <a
1197
- class="d-block standalone mb-1"
1198
- href="#"
1221
+ <a
1222
+ class="standalone"
1223
+ href="#"
1224
+ >
1225
+ Link
1226
+ </a>
1227
+ </div>
1228
+ <div
1229
+ class="mb-1"
1199
1230
  >
1200
- Link
1201
- </a>
1202
- <a
1203
- class="d-block standalone mb-1"
1204
- href="#"
1231
+ <a
1232
+ class="standalone"
1233
+ href="#"
1234
+ >
1235
+ Link
1236
+ </a>
1237
+ </div>
1238
+ <div
1239
+ class="mb-1"
1205
1240
  >
1206
- Link
1207
- </a>
1241
+ <a
1242
+ class="standalone"
1243
+ href="#"
1244
+ >
1245
+ Link
1246
+ </a>
1247
+ </div>
1208
1248
  </div>
1209
1249
  </div>
1210
1250
  </div>
package/data/{data_modal.js → data--modal.js} RENAMED
File without changes
package/package.json CHANGED
@@ -2,13 +2,13 @@
2
2
  "name": "@openeuropa/bcl-subscription",
3
3
  "author": "European Commission",
4
4
  "license": "EUPL-1.2",
5
- "version": "0.20.0",
5
+ "version": "0.21.0",
6
6
  "publishConfig": {
7
7
  "access": "public"
8
8
  },
9
9
  "description": "OE - BCL subscription",
10
10
  "dependencies": {
11
- "@openeuropa/bcl-subscription": "^0.20.0"
11
+ "@openeuropa/bcl-subscription-block": "^0.21.0"
12
12
  },
13
13
  "repository": {
14
14
  "type": "git",
@@ -24,5 +24,5 @@
24
24
  "design-system",
25
25
  "twig"
26
26
  ],
27
- "gitHead": "ea13560489a089d0c198f781e75951a9160d2554"
27
+ "gitHead": "18c01b34ca76780f480c692c566dfe507d961ccf"
28
28
  }
package/subscription.story.js CHANGED
@@ -1,18 +1,20 @@
1
1
  import { withDesign } from "storybook-addon-designs";
2
- import { screen, userEvent } from "@storybook/testing-library";
2
+ import { within, userEvent } from "@storybook/testing-library";
3
3
  import isChromatic from "chromatic/isChromatic";
4
4
  import { correctPaths, initScrollspy } from "@openeuropa/bcl-story-utils";
5
5
  import header from "@openeuropa/bcl-data-header/data--simple";
6
6
  import footer from "@openeuropa/bcl-data-footer/data";
7
- import content from "@openeuropa/bcl-news/data/data_content.js";
8
- import banner from "@openeuropa/bcl-content-banner/data/data.js";
9
- import subscriptionPage from "@openeuropa/bcl-subscription/subscription.html.twig";
10
- import subscriptionPageData from "@openeuropa/bcl-subscription/data/data.js";
11
- import modalData from "@openeuropa/bcl-subscription/data/data_modal.js";
12
- import blockData from "@openeuropa/bcl-subscription-block/data/data.js";
13
- import sidebar from "@openeuropa/bcl-inpage-navigation/data--simple";
7
+ import content from "@openeuropa/bcl-news/data/data--content";
8
+ import banner from "@openeuropa/bcl-content-banner/data/data";
9
+ import sidebar from "@openeuropa/bcl-inpage-navigation/data/data--simple";
10
+ import blockData from "@openeuropa/bcl-subscription-block/data";
14
11
  import drupalAttribute from "drupal-attribute";
15
12
 
13
+ import subscriptionPage from "@openeuropa/bcl-subscription/subscription.html.twig";
14
+ import subscriptionPageData from "@openeuropa/bcl-subscription/data/data";
15
+ import modalData from "@openeuropa/bcl-subscription/data/data--modal";
16
+ const chromatic = process.env.STORYBOOK_ENV;
17
+
16
18
  if (isChromatic()) {
17
19
  banner.image.classes = banner.image.classes
18
20
  ? `${banner.image.classes} chromatic-ignore`
@@ -137,9 +139,10 @@ export default {
137
139
  export const Default = () => subscriptionPage(correctPaths(demoData));
138
140
  Default.decorators = [clientValidation];
139
141
 
140
- if (isChromatic()) {
141
- Default.play = async () => {
142
- const button = screen.getAllByText("Subscribe", {
142
+ if (isChromatic() || chromatic) {
143
+ Default.play = async ({ canvasElement }) => {
144
+ const canvas = within(canvasElement);
145
+ const button = canvas.getAllByText("Subscribe", {
143
146
  selector: "button",
144
147
  });
145
148
  await userEvent.click(button[0]);
package/subscription.test.js CHANGED
@@ -1,14 +1,15 @@
1
1
  import { renderTwigFileAsNode } from "@openeuropa/bcl-test-utils";
2
2
  import header from "@openeuropa/bcl-data-header/data--simple";
3
3
  import footer from "@openeuropa/bcl-data-footer/data";
4
- import content from "@openeuropa/bcl-news/data/data_content.js";
5
- import banner from "@openeuropa/bcl-content-banner/data/data.js";
6
- import subscriptionPageData from "@openeuropa/bcl-subscription/data/data.js";
7
- import modalData from "@openeuropa/bcl-subscription/data/data_modal.js";
8
- import blockData from "@openeuropa/bcl-subscription-block/data/data.js";
9
- import sidebar from "@openeuropa/bcl-inpage-navigation/data--simple";
4
+ import content from "@openeuropa/bcl-news/data/data--content";
5
+ import banner from "@openeuropa/bcl-content-banner/data/data";
6
+ import sidebar from "@openeuropa/bcl-inpage-navigation/data/data--simple";
7
+ import blockData from "@openeuropa/bcl-subscription-block/data";
10
8
  import drupalAttribute from "drupal-attribute";
11
9
 
10
+ import subscriptionPageData from "@openeuropa/bcl-subscription/data/data";
11
+ import modalData from "@openeuropa/bcl-subscription/data/data--modal";
12
+
12
13
  const demoData = {
13
14
  content_type: "subscription",
14
15
  page_title: "Subscription",