@comicrelief/component-library 8.83.0 → 8.84.0

package/src/components/Organisms/FilterCard/__snapshots__/FilterCard.test.js.snap

@@ -0,0 +1,1006 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders standard FilterCard correctly 1`] = `
+.c2 {
+  font-family: 'Anton',Impact,sans-serif;
+  font-weight: 400;
+  text-transform: uppercase;
+  letter-spacing: 0;
+  font-size: 2rem;
+  line-height: 2rem;
+}
+
+.c2 span {
+  font-size: inherit;
+  line-height: inherit;
+}
+
+.c5 {
+  font-family: 'Montserrat',Helvetica,Arial,sans-serif;
+  font-weight: 400;
+  text-transform: inherit;
+  letter-spacing: 0;
+  font-size: 1rem;
+  line-height: 1.25rem;
+}
+
+.c5 span {
+  font-size: inherit;
+  line-height: inherit;
+}
+
+.c0 {
+  width: 100%;
+  height: auto;
+  display: flex;
+  position: relative;
+  flex-direction: column;
+  background: #F4F3F5;
+  justify-content: center;
+  padding: 2rem 1rem 2rem;
+}
+
+.c1 {
+  background: #FFFFFF;
+  border-radius: 1rem;
+  padding: 2rem;
+  position: relative;
+  box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem;
+}
+
+.c1:after {
+  --size: 3rem;
+  position: absolute;
+  content: "";
+  width: var(--size);
+  height: var(--size);
+  bottom: calc((var(--size) * -0.5));
+  left: calc(50% - (var(--size) / 2));
+  background: center/contain no-repeat url("mock.asset");
+  filter: drop-shadow(0px 6px 3px rgba(0,0,0,0.05));
+}
+
+.c4 {
+  margin-bottom: 40px;
+}
+
+@media (min-width: 740px) {
+  .c2 {
+    font-size: 2.5rem;
+    line-height: 2.5rem;
+  }
+}
+
+@media (min-width: 1024px) {
+  .c2 {
+    font-size: 3rem;
+    line-height: 3rem;
+  }
+}
+
+@media (min-width: 740px) {
+  .c5 {
+    font-size: 1rem;
+    line-height: 1.25rem;
+  }
+}
+
+@media (min-width: 1024px) {
+  .c5 {
+    font-size: 1.125rem;
+    line-height: 1.375rem;
+  }
+}
+
+@media (min-width: 1024px) {
+  .c3 {
+    margin-bottom: 2rem;
+  }
+}
+
+@media (min-width: 740px) {
+  .c0 {
+    padding-inline: 2rem;
+  }
+}
+
+@media (min-width: 740px) {
+  .c1:after {
+    left: 3rem;
+  }
+}
+
+@media (min-width: 1024px) {
+  .c1 {
+    padding: 4rem;
+  }
+
+  .c1:after {
+    left: 4rem;
+  }
+}
+
+<div
+  className="c0"
+  data-testid="FilterCard"
+  id="filtercard--standard"
+>
+  <div
+    className=""
+  >
+    <div
+      className="c1"
+    >
+      <h1
+        className="c2 c3"
+      >
+        Your fundraising resources: STANDARD
+      </h1>
+      <div
+        className="c4"
+      >
+        <span
+          className="c5"
+        >
+          From fundraising packs to bunting, certificates, cake labels and more, find everything you need to take yourself funny for money this Red Nose Day. Select a resource type to filters the results.
+        </span>
+      </div>
+      <span
+        style={
+          {
+            "display": "block",
+            "textAlign": "center",
+          }
+        }
+      >
+        <span
+          style={
+            {
+              "animation": "react-spinners-PulseLoader-pulse 0.75s 0.12s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08)",
+              "animationFillMode": "both",
+              "backgroundColor": "black",
+              "borderRadius": "100%",
+              "display": "inline-block",
+              "height": "15px",
+              "margin": "2px",
+              "width": "15px",
+            }
+          }
+        />
+        <span
+          style={
+            {
+              "animation": "react-spinners-PulseLoader-pulse 0.75s 0.24s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08)",
+              "animationFillMode": "both",
+              "backgroundColor": "black",
+              "borderRadius": "100%",
+              "display": "inline-block",
+              "height": "15px",
+              "margin": "2px",
+              "width": "15px",
+            }
+          }
+        />
+        <span
+          style={
+            {
+              "animation": "react-spinners-PulseLoader-pulse 0.75s 0.36s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08)",
+              "animationFillMode": "both",
+              "backgroundColor": "black",
+              "borderRadius": "100%",
+              "display": "inline-block",
+              "height": "15px",
+              "margin": "2px",
+              "width": "15px",
+            }
+          }
+        />
+      </span>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`renders standard FilterCard w/expanded content + loader 1`] = `
+.c2 {
+  font-family: 'Anton',Impact,sans-serif;
+  font-weight: 400;
+  text-transform: uppercase;
+  letter-spacing: 0;
+  font-size: 2rem;
+  line-height: 2rem;
+}
+
+.c2 span {
+  font-size: inherit;
+  line-height: inherit;
+}
+
+.c5 {
+  font-family: 'Montserrat',Helvetica,Arial,sans-serif;
+  font-weight: 400;
+  text-transform: inherit;
+  letter-spacing: 0;
+  font-size: 1rem;
+  line-height: 1.25rem;
+}
+
+.c5 span {
+  font-size: inherit;
+  line-height: inherit;
+}
+
+.c0 {
+  width: 100%;
+  height: auto;
+  display: flex;
+  position: relative;
+  flex-direction: column;
+  background: #F4F3F5;
+  justify-content: center;
+  padding: 2rem 1rem 2rem;
+}
+
+.c1 {
+  background: #FFFFFF;
+  border-radius: 1rem;
+  padding: 2rem;
+  position: relative;
+  box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem;
+}
+
+.c1:after {
+  --size: 3rem;
+  position: absolute;
+  content: "";
+  width: var(--size);
+  height: var(--size);
+  bottom: calc((var(--size) * -0.5));
+  left: calc(50% - (var(--size) / 2));
+  background: center/contain no-repeat url("mock.asset");
+  filter: drop-shadow(0px 6px 3px rgba(0,0,0,0.05));
+}
+
+.c4 {
+  margin-bottom: 40px;
+}
+
+@media (min-width: 740px) {
+  .c2 {
+    font-size: 2.5rem;
+    line-height: 2.5rem;
+  }
+}
+
+@media (min-width: 1024px) {
+  .c2 {
+    font-size: 3rem;
+    line-height: 3rem;
+  }
+}
+
+@media (min-width: 740px) {
+  .c5 {
+    font-size: 1rem;
+    line-height: 1.25rem;
+  }
+}
+
+@media (min-width: 1024px) {
+  .c5 {
+    font-size: 1.125rem;
+    line-height: 1.375rem;
+  }
+}
+
+@media (min-width: 1024px) {
+  .c3 {
+    margin-bottom: 2rem;
+  }
+}
+
+@media (min-width: 740px) {
+  .c0 {
+    padding-inline: 2rem;
+  }
+}
+
+@media (min-width: 740px) {
+  .c1:after {
+    left: 3rem;
+  }
+}
+
+@media (min-width: 1024px) {
+  .c1 {
+    padding: 4rem;
+  }
+
+  .c1:after {
+    left: 4rem;
+  }
+}
+
+<div
+  className="c0"
+  data-testid="FilterCard"
+  id="filtercard--expanded-loader"
+>
+  <div
+    className=""
+  >
+    <div
+      className="c1"
+    >
+      <h1
+        className="c2 c3"
+      >
+        Your fundraising resources: EXPANDED + LOADER
+      </h1>
+      <div
+        className="c4"
+      >
+        <span
+          className="c5"
+        >
+          From fundraising packs to bunting, certificates, cake labels and more, find everything you need to take yourself funny for money this Red Nose Day. Select a resource type to filters the results.
+        </span>
+      </div>
+      <span
+        style={
+          {
+            "display": "block",
+            "textAlign": "center",
+          }
+        }
+      >
+        <span
+          style={
+            {
+              "animation": "react-spinners-PulseLoader-pulse 0.75s 0.12s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08)",
+              "animationFillMode": "both",
+              "backgroundColor": "black",
+              "borderRadius": "100%",
+              "display": "inline-block",
+              "height": "15px",
+              "margin": "2px",
+              "width": "15px",
+            }
+          }
+        />
+        <span
+          style={
+            {
+              "animation": "react-spinners-PulseLoader-pulse 0.75s 0.24s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08)",
+              "animationFillMode": "both",
+              "backgroundColor": "black",
+              "borderRadius": "100%",
+              "display": "inline-block",
+              "height": "15px",
+              "margin": "2px",
+              "width": "15px",
+            }
+          }
+        />
+        <span
+          style={
+            {
+              "animation": "react-spinners-PulseLoader-pulse 0.75s 0.36s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08)",
+              "animationFillMode": "both",
+              "backgroundColor": "black",
+              "borderRadius": "100%",
+              "display": "inline-block",
+              "height": "15px",
+              "margin": "2px",
+              "width": "15px",
+            }
+          }
+        />
+      </span>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`renders standard FilterCard w/expanded content 1`] = `
+.c2 {
+  font-family: 'Anton',Impact,sans-serif;
+  font-weight: 400;
+  text-transform: uppercase;
+  letter-spacing: 0;
+  font-size: 2rem;
+  line-height: 2rem;
+}
+
+.c2 span {
+  font-size: inherit;
+  line-height: inherit;
+}
+
+.c5 {
+  font-family: 'Montserrat',Helvetica,Arial,sans-serif;
+  font-weight: 400;
+  text-transform: inherit;
+  letter-spacing: 0;
+  font-size: 1rem;
+  line-height: 1.25rem;
+}
+
+.c5 span {
+  font-size: inherit;
+  line-height: inherit;
+}
+
+.c0 {
+  width: 100%;
+  height: auto;
+  display: flex;
+  position: relative;
+  flex-direction: column;
+  background: #F4F3F5;
+  justify-content: center;
+  padding: 2rem 1rem 2rem;
+}
+
+.c1 {
+  background: #FFFFFF;
+  border-radius: 1rem;
+  padding: 2rem;
+  position: relative;
+  box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem;
+}
+
+.c1:after {
+  --size: 3rem;
+  position: absolute;
+  content: "";
+  width: var(--size);
+  height: var(--size);
+  bottom: calc((var(--size) * -0.5));
+  left: calc(50% - (var(--size) / 2));
+  background: center/contain no-repeat url("mock.asset");
+  filter: drop-shadow(0px 6px 3px rgba(0,0,0,0.05));
+}
+
+.c4 {
+  margin-bottom: 40px;
+}
+
+@media (min-width: 740px) {
+  .c2 {
+    font-size: 2.5rem;
+    line-height: 2.5rem;
+  }
+}
+
+@media (min-width: 1024px) {
+  .c2 {
+    font-size: 3rem;
+    line-height: 3rem;
+  }
+}
+
+@media (min-width: 740px) {
+  .c5 {
+    font-size: 1rem;
+    line-height: 1.25rem;
+  }
+}
+
+@media (min-width: 1024px) {
+  .c5 {
+    font-size: 1.125rem;
+    line-height: 1.375rem;
+  }
+}
+
+@media (min-width: 1024px) {
+  .c3 {
+    margin-bottom: 2rem;
+  }
+}
+
+@media (min-width: 740px) {
+  .c0 {
+    padding-inline: 2rem;
+  }
+}
+
+@media (min-width: 740px) {
+  .c1:after {
+    left: 3rem;
+  }
+}
+
+@media (min-width: 1024px) {
+  .c1 {
+    padding: 4rem;
+  }
+
+  .c1:after {
+    left: 4rem;
+  }
+}
+
+<div
+  className="c0"
+  data-testid="FilterCard"
+  id="filtercard--expanded"
+>
+  <div
+    className=""
+  >
+    <div
+      className="c1"
+    >
+      <h1
+        className="c2 c3"
+      >
+        Your fundraising resources: EXPANDED
+      </h1>
+      <div
+        className="c4"
+      >
+        <span
+          className="c5"
+        >
+          From fundraising packs to bunting, certificates, cake labels and more, find everything you need to take yourself funny for money this Red Nose Day. Select a resource type to filters the results.
+        </span>
+      </div>
+      <span
+        style={
+          {
+            "display": "block",
+            "textAlign": "center",
+          }
+        }
+      >
+        <span
+          style={
+            {
+              "animation": "react-spinners-PulseLoader-pulse 0.75s 0.12s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08)",
+              "animationFillMode": "both",
+              "backgroundColor": "black",
+              "borderRadius": "100%",
+              "display": "inline-block",
+              "height": "15px",
+              "margin": "2px",
+              "width": "15px",
+            }
+          }
+        />
+        <span
+          style={
+            {
+              "animation": "react-spinners-PulseLoader-pulse 0.75s 0.24s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08)",
+              "animationFillMode": "both",
+              "backgroundColor": "black",
+              "borderRadius": "100%",
+              "display": "inline-block",
+              "height": "15px",
+              "margin": "2px",
+              "width": "15px",
+            }
+          }
+        />
+        <span
+          style={
+            {
+              "animation": "react-spinners-PulseLoader-pulse 0.75s 0.36s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08)",
+              "animationFillMode": "both",
+              "backgroundColor": "black",
+              "borderRadius": "100%",
+              "display": "inline-block",
+              "height": "15px",
+              "margin": "2px",
+              "width": "15px",
+            }
+          }
+        />
+      </span>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`renders standard FilterCard w/expanded content, loader + hero 1`] = `
+.c2 {
+  font-family: 'Anton',Impact,sans-serif;
+  font-weight: 400;
+  text-transform: uppercase;
+  letter-spacing: 0;
+  font-size: 2rem;
+  line-height: 2rem;
+}
+
+.c2 span {
+  font-size: inherit;
+  line-height: inherit;
+}
+
+.c5 {
+  font-family: 'Montserrat',Helvetica,Arial,sans-serif;
+  font-weight: 400;
+  text-transform: inherit;
+  letter-spacing: 0;
+  font-size: 1rem;
+  line-height: 1.25rem;
+}
+
+.c5 span {
+  font-size: inherit;
+  line-height: inherit;
+}
+
+.c0 {
+  width: 100%;
+  height: auto;
+  display: flex;
+  position: relative;
+  flex-direction: column;
+  background: #F4F3F5;
+  justify-content: center;
+  padding: 2rem 1rem 2rem;
+}
+
+.c1 {
+  background: #FFFFFF;
+  border-radius: 1rem;
+  padding: 2rem;
+  position: relative;
+  box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem;
+}
+
+.c1:after {
+  --size: 3rem;
+  position: absolute;
+  content: "";
+  width: var(--size);
+  height: var(--size);
+  bottom: calc((var(--size) * -0.5));
+  left: calc(50% - (var(--size) / 2));
+  background: center/contain no-repeat url("mock.asset");
+  filter: drop-shadow(0px 6px 3px rgba(0,0,0,0.05));
+}
+
+.c4 {
+  margin-bottom: 40px;
+}
+
+@media (min-width: 740px) {
+  .c2 {
+    font-size: 2.5rem;
+    line-height: 2.5rem;
+  }
+}
+
+@media (min-width: 1024px) {
+  .c2 {
+    font-size: 3rem;
+    line-height: 3rem;
+  }
+}
+
+@media (min-width: 740px) {
+  .c5 {
+    font-size: 1rem;
+    line-height: 1.25rem;
+  }
+}
+
+@media (min-width: 1024px) {
+  .c5 {
+    font-size: 1.125rem;
+    line-height: 1.375rem;
+  }
+}
+
+@media (min-width: 1024px) {
+  .c3 {
+    margin-bottom: 2rem;
+  }
+}
+
+@media (min-width: 740px) {
+  .c0 {
+    padding-inline: 2rem;
+  }
+}
+
+@media (min-width: 740px) {
+  .c1:after {
+    left: 3rem;
+  }
+}
+
+@media (min-width: 1024px) {
+  .c1 {
+    padding: 4rem;
+  }
+
+  .c1:after {
+    left: 4rem;
+  }
+}
+
+<div
+  className="c0"
+  data-testid="FilterCard"
+  id="filtercard--expanded-loader-hero"
+>
+  <div
+    className=""
+  >
+    <div
+      className="c1"
+    >
+      <h1
+        className="c2 c3"
+      >
+        Your fundraising resources: EXPANDED + LOADER + HERO
+      </h1>
+      <div
+        className="c4"
+      >
+        <span
+          className="c5"
+        >
+          From fundraising packs to bunting, certificates, cake labels and more, find everything you need to take yourself funny for money this Red Nose Day. Select a resource type to filters the results.
+        </span>
+      </div>
+      <span
+        style={
+          {
+            "display": "block",
+            "textAlign": "center",
+          }
+        }
+      >
+        <span
+          style={
+            {
+              "animation": "react-spinners-PulseLoader-pulse 0.75s 0.12s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08)",
+              "animationFillMode": "both",
+              "backgroundColor": "black",
+              "borderRadius": "100%",
+              "display": "inline-block",
+              "height": "15px",
+              "margin": "2px",
+              "width": "15px",
+            }
+          }
+        />
+        <span
+          style={
+            {
+              "animation": "react-spinners-PulseLoader-pulse 0.75s 0.24s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08)",
+              "animationFillMode": "both",
+              "backgroundColor": "black",
+              "borderRadius": "100%",
+              "display": "inline-block",
+              "height": "15px",
+              "margin": "2px",
+              "width": "15px",
+            }
+          }
+        />
+        <span
+          style={
+            {
+              "animation": "react-spinners-PulseLoader-pulse 0.75s 0.36s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08)",
+              "animationFillMode": "both",
+              "backgroundColor": "black",
+              "borderRadius": "100%",
+              "display": "inline-block",
+              "height": "15px",
+              "margin": "2px",
+              "width": "15px",
+            }
+          }
+        />
+      </span>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`renders standard FilterCard w/hero correctly 1`] = `
+.c2 {
+  font-family: 'Anton',Impact,sans-serif;
+  font-weight: 400;
+  text-transform: uppercase;
+  letter-spacing: 0;
+  font-size: 2rem;
+  line-height: 2rem;
+}
+
+.c2 span {
+  font-size: inherit;
+  line-height: inherit;
+}
+
+.c5 {
+  font-family: 'Montserrat',Helvetica,Arial,sans-serif;
+  font-weight: 400;
+  text-transform: inherit;
+  letter-spacing: 0;
+  font-size: 1rem;
+  line-height: 1.25rem;
+}
+
+.c5 span {
+  font-size: inherit;
+  line-height: inherit;
+}
+
+.c0 {
+  width: 100%;
+  height: auto;
+  display: flex;
+  position: relative;
+  flex-direction: column;
+  background: #F4F3F5;
+  justify-content: center;
+  padding: 2rem 1rem 2rem;
+}
+
+.c1 {
+  background: #FFFFFF;
+  border-radius: 1rem;
+  padding: 2rem;
+  position: relative;
+  box-shadow: rgba(0,0,0,0.15) 0px 0px 1rem;
+}
+
+.c1:after {
+  --size: 3rem;
+  position: absolute;
+  content: "";
+  width: var(--size);
+  height: var(--size);
+  bottom: calc((var(--size) * -0.5));
+  left: calc(50% - (var(--size) / 2));
+  background: center/contain no-repeat url("mock.asset");
+  filter: drop-shadow(0px 6px 3px rgba(0,0,0,0.05));
+}
+
+.c4 {
+  margin-bottom: 40px;
+}
+
+@media (min-width: 740px) {
+  .c2 {
+    font-size: 2.5rem;
+    line-height: 2.5rem;
+  }
+}
+
+@media (min-width: 1024px) {
+  .c2 {
+    font-size: 3rem;
+    line-height: 3rem;
+  }
+}
+
+@media (min-width: 740px) {
+  .c5 {
+    font-size: 1rem;
+    line-height: 1.25rem;
+  }
+}
+
+@media (min-width: 1024px) {
+  .c5 {
+    font-size: 1.125rem;
+    line-height: 1.375rem;
+  }
+}
+
+@media (min-width: 1024px) {
+  .c3 {
+    margin-bottom: 2rem;
+  }
+}
+
+@media (min-width: 740px) {
+  .c0 {
+    padding-inline: 2rem;
+  }
+}
+
+@media (min-width: 740px) {
+  .c1:after {
+    left: 3rem;
+  }
+}
+
+@media (min-width: 1024px) {
+  .c1 {
+    padding: 4rem;
+  }
+
+  .c1:after {
+    left: 4rem;
+  }
+}
+
+<div
+  className="c0"
+  data-testid="FilterCard"
+  id="filtercard--hero"
+>
+  <div
+    className=""
+  >
+    <div
+      className="c1"
+    >
+      <h1
+        className="c2 c3"
+      >
+        Your fundraising resources: HERO
+      </h1>
+      <div
+        className="c4"
+      >
+        <span
+          className="c5"
+        >
+          From fundraising packs to bunting, certificates, cake labels and more, find everything you need to take yourself funny for money this Red Nose Day. Select a resource type to filters the results.
+        </span>
+      </div>
+      <span
+        style={
+          {
+            "display": "block",
+            "textAlign": "center",
+          }
+        }
+      >
+        <span
+          style={
+            {
+              "animation": "react-spinners-PulseLoader-pulse 0.75s 0.12s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08)",
+              "animationFillMode": "both",
+              "backgroundColor": "black",
+              "borderRadius": "100%",
+              "display": "inline-block",
+              "height": "15px",
+              "margin": "2px",
+              "width": "15px",
+            }
+          }
+        />
+        <span
+          style={
+            {
+              "animation": "react-spinners-PulseLoader-pulse 0.75s 0.24s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08)",
+              "animationFillMode": "both",
+              "backgroundColor": "black",
+              "borderRadius": "100%",
+              "display": "inline-block",
+              "height": "15px",
+              "margin": "2px",
+              "width": "15px",
+            }
+          }
+        />
+        <span
+          style={
+            {
+              "animation": "react-spinners-PulseLoader-pulse 0.75s 0.36s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08)",
+              "animationFillMode": "both",
+              "backgroundColor": "black",
+              "borderRadius": "100%",
+              "display": "inline-block",
+              "height": "15px",
+              "margin": "2px",
+              "width": "15px",
+            }
+          }
+        />
+      </span>
+    </div>
+  </div>
+</div>
+`;