Merge pull request #184 from oaknational/feat/optionality-item-component

PUPIL-709 Feat/optionality item component
oaknational · May 20, 2024 · 4bd62ce · 4bd62ce
2 parents 5d9650c + 73b6bca
commit 4bd62ce
Show file tree

Hide file tree

Showing 18 changed files with 1,486 additions and 3 deletions.
diff --git a/src/components/molecules/OakCardWithHandDrawnBorder/OakCardWithHandDrawnBorder.stories.tsx b/src/components/molecules/OakCardWithHandDrawnBorder/OakCardWithHandDrawnBorder.stories.tsx
@@ -0,0 +1,48 @@
+import React from "react";
+import { Meta, StoryObj } from "@storybook/react";
+
+import { OakCardWithHandDrawnBorder } from "./OakCardWithHandDrawnBorder";
+
+import { OakSpan } from "@/components/atoms";
+import { spacingArgTypes } from "@/storybook-helpers/spacingStyleHelpers";
+import { drawingArgTypes } from "@/storybook-helpers/drawingStyleHelpers";
+import { colorArgTypes } from "@/storybook-helpers/colorStyleHelpers";
+
+const meta: Meta<typeof OakCardWithHandDrawnBorder> = {
+  component: OakCardWithHandDrawnBorder,
+  tags: ["autodocs"],
+  title: "components/molecules/OakCardWithHandDrawnBorder",
+  argTypes: {
+    fill: drawingArgTypes["$fill"],
+    stroke: drawingArgTypes["$stroke"],
+    children: { type: "string" },
+    ...spacingArgTypes,
+    ...colorArgTypes,
+  },
+  parameters: {
+    controls: {
+      include: [
+        "children",
+        "fill",
+        "stroke",
+        ...Object.keys(colorArgTypes),
+        ...Object.keys(spacingArgTypes),
+      ],
+      sort: "none",
+    },
+  },
+  args: {
+    children: "Card content goes here",
+  },
+};
+export default meta;
+
+type Story = StoryObj<typeof OakCardWithHandDrawnBorder>;
+
+export const Default: Story = {
+  render: (args) => (
+    <OakCardWithHandDrawnBorder {...args}>
+      <OakSpan $font="heading-5">Keep going, you're doing great!</OakSpan>
+    </OakCardWithHandDrawnBorder>
+  ),
+};
diff --git a/src/components/molecules/OakCardWithHandDrawnBorder/OakCardWithHandDrawnBorder.test.tsx b/src/components/molecules/OakCardWithHandDrawnBorder/OakCardWithHandDrawnBorder.test.tsx
@@ -0,0 +1,22 @@
+import React from "react";
+import "@testing-library/jest-dom";
+import { create } from "react-test-renderer";
+import { ThemeProvider } from "styled-components";
+
+import { OakCardWithHandDrawnBorder } from "./OakCardWithHandDrawnBorder";
+
+import { oakDefaultTheme } from "@/styles";
+
+describe(OakCardWithHandDrawnBorder, () => {
+  it("matches snapshot", () => {
+    const tree = create(
+      <ThemeProvider theme={oakDefaultTheme}>
+        <OakCardWithHandDrawnBorder>
+          Content goes here
+        </OakCardWithHandDrawnBorder>
+      </ThemeProvider>,
+    ).toJSON();
+
+    expect(tree).toMatchSnapshot();
+  });
+});
diff --git a/src/components/molecules/OakCardWithHandDrawnBorder/OakCardWithHandDrawnBorder.tsx b/src/components/molecules/OakCardWithHandDrawnBorder/OakCardWithHandDrawnBorder.tsx
@@ -0,0 +1,51 @@
+import React from "react";
+
+import {
+  InternalCardWithBackgroundElement,
+  InternalCardWithBackgroundElementProps,
+} from "@/components/atoms/InternalCardWithBackgroundElement/InternalCardWithBackgroundElement";
+import {
+  InternalStyledSvg,
+  InternalStyledSvgProps,
+} from "@/components/atoms/InternalStyledSvg";
+
+export type OakCardWithHandDrawnBorderProps = Omit<
+  InternalCardWithBackgroundElementProps,
+  "backgroundElement"
+> & {
+  fill?: InternalStyledSvgProps["$fill"];
+  stroke?: InternalStyledSvgProps["$stroke"];
+  strokeWidth?: InternalStyledSvgProps["$strokeWidth"];
+};
+
+/**
+ * A flexed card with a hand-drawn border
+ *
+ * An optional `stroke` and `fill` can be applied to change the color of the border
+ */
+export const OakCardWithHandDrawnBorder = ({
+  $pa = "inner-padding-xl",
+  fill = "black",
+  stroke,
+  $width = "fit-content",
+  ...props
+}: OakCardWithHandDrawnBorderProps) => {
+  return (
+    <InternalCardWithBackgroundElement
+      $pa={$pa}
+      $width={$width}
+      backgroundElement={
+        <InternalStyledSvg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 1280 130"
+          preserveAspectRatio="none"
+          $fill={fill}
+          $stroke={stroke}
+        >
+          <path d="M1279.41 10.776C1279 10.0177 1279.5 7.99963 1277.5 8.65073C1277 8.65073 1275.53 8.70062 1276 9.41902C1276.56 23.5974 1276.34 113.092 1276.5 127.5C1279.56 128.617 0.908149 127.396 3.00021 126.907C0.314877 122.776 4.03063 33.3856 3.00021 28.4965C1.50142 21.2426 3.15634 15.9345 3.00021 9.88797C2.50062 2.40466 5.02719 2.69402 30.132 3.02328C65.2287 3.02328 92.6753 2.94346 121.902 3.02328C179.387 2.95344 224.944 3.04324 265.786 3.02328C337.634 3.14302 398.835 2.90355 455.258 3.04324C613.381 2.74391 948.86 2.91353 1106.55 2.8836C1140.74 2.77384 1210.34 2.98337 1265.54 2.8836C1265.92 2.77384 1272.26 3.18293 1271.91 2.48449C1272.69 2.02551 1272.54 1.09758 1272.79 0.508892C1269.63 -0.269372 1265.04 0.199582 1262.14 0.169649C1031.33 0.329293 652.911 0.109783 455.508 0.459004C362.396 0.508892 273.03 0.478959 185.725 0.488937C140.918 0.488937 80.5913 0.488937 37.501 0.468981C16.0808 -0.488882 9.05519 0.399137 2.62287 0.369204C0.249785 0.359226 1.74858 2.66408 1.34265 3.45233C-1.40389 6.89465 0.178862 11.9996 0.000150621 17.1218C-0.343323 26.9699 0.312234 116.849 0.0936605 129.88C5.37066 130.16 24.0119 129.88 25.1984 129.94C172.236 130.1 523.859 129.87 669.117 129.91C885.755 129.86 1045.25 129.79 1261.02 129.79C1260.7 129.332 1284.53 130.898 1279.22 128.723C1279.09 113.178 1279.09 26.7005 1279.41 10.776ZM1268.85 2.47451C1268.6 2.4346 1268.45 2.30489 1268.73 2.13526C1269.2 2.00555 1269.54 2.69402 1268.85 2.47451ZM1263.73 0.73838C1264.98 0.73838 1265.39 1.28716 1263.92 0.927957C1263.14 0.808225 1262.95 0.73838 1263.73 0.73838ZM1260.83 1.96564C1261.39 1.78604 1264.54 1.58649 1262.64 1.96564C1261.17 2.23504 1259.3 2.99335 1260.83 1.96564ZM1277 12.8015C1276.59 11.9633 1277 8.56953 1277.5 10.4996C1277.75 12.6349 1278.5 13.4996 1277 12.8015ZM1266.1 2.255C1269.04 2.46453 1264.57 2.54435 1265.64 2.29491C1265.64 2.17518 1265.64 2.13526 1266.1 2.255ZM1266.35 0.698469C1266.35 0.698469 1266.64 0.748358 1266.64 0.848136C1266.98 1.25722 1265.04 0.688492 1266.35 0.698469ZM1278.5 9.63853C1278.5 9.63853 1278.78 10.0376 1278.78 10.8359C1279.12 14.1285 1278 9.63853 1278.5 9.63853ZM1269.48 1.46676C1270.04 1.7162 1269.23 1.76609 1269.2 1.5366C1269.2 1.42684 1269.32 1.38693 1269.48 1.46676ZM1255.58 0.129738C1256.67 0.0598939 1257.77 0.019983 1258.02 0.059894C1259.83 0.159671 1251.05 0.309338 1255.58 0.129738ZM1197.41 2.32484C1198.75 2.29491 1198.72 2.62417 1197.41 2.62417C1196.1 2.62417 1196.07 2.30489 1197.41 2.32484ZM1168.5 2.10533C1168.84 2.01553 1171.77 1.91575 1172.09 2.10533C1172.52 2.14524 1167.81 2.30489 1168.5 2.10533ZM1112.35 0.20956C1116.57 0.269427 1110.51 0.239493 1110.32 0.20956C1110.6 0.20956 1111.54 0.20956 1112.35 0.20956ZM1109.76 0.878069C1111.1 0.878069 1111.07 1.03771 1109.76 1.03771C1108.45 1.03771 1108.42 0.888047 1109.76 0.878069ZM1088.5 1.04769C1089.34 0.688492 1094.59 0.498915 1091.15 0.967869C1087.72 1.34702 1086.72 1.41687 1088.5 1.04769ZM1084.38 0.139716C1086.91 0.179627 1086.28 0.179627 1083.91 0.159671C1081.47 0.139716 1081.82 0.11976 1084.38 0.139716ZM1071.92 2.67406C1071.45 2.69402 1071.17 2.69402 1070.45 2.67406C1067.51 2.59424 1073.54 2.6142 1071.92 2.67406ZM1069.67 2.31486C1070.2 2.28493 1073.32 2.24502 1071.79 2.37473C1071.45 2.4346 1067.26 2.38471 1069.67 2.31486ZM1063.42 1.19736C1064.14 1.0876 1065.49 1.52662 1063.71 1.58649C1061.99 1.76609 1060.02 1.24725 1063.42 1.19736ZM1046.69 0.73838C1046.84 0.658558 1047.56 0.528848 1048.22 0.528848C1052.09 0.379182 1045.59 1.13749 1046.69 0.73838ZM1026.52 2.58426C1027.27 2.55433 1028.51 2.58426 1029.33 2.6142C1032.2 2.67406 1025.39 2.64413 1026.52 2.58426ZM1010.84 2.56431C1013.71 2.58426 1009.62 2.63415 1009.28 2.58426C1009.28 2.57428 1009.84 2.56431 1010.84 2.56431ZM991.514 0.788269C992.7 0.908002 994.012 0.478959 995.323 0.927957C994.98 1.45678 985.799 0.708447 991.514 0.788269ZM968.001 2.10533C970.031 1.8958 970 2.10533 968.001 2.255C966.034 2.46453 966.034 2.255 968.001 2.10533ZM964.254 1.40689C966.378 1.81598 961.756 1.85589 961.069 1.90578C961.788 1.66631 963.88 1.60644 964.254 1.40689ZM958.009 2.22506C958.977 2.1652 959.508 2.1652 960.476 2.22506C963.224 2.30489 955.293 2.30489 958.009 2.22506ZM955.761 0.059894C958.852 0.0299607 954.106 0.159671 954.075 0.0798494C954.075 0.0698717 954.824 0.059894 955.761 0.059894ZM950.984 2.27495C951.452 2.30489 952.888 2.27495 953.451 2.49446C954.169 2.73393 946.737 2.6142 950.984 2.27495ZM937.744 2.60422C938.494 2.59424 939.68 2.60422 940.43 2.6142C944.364 2.64413 935.621 2.64413 937.744 2.60422ZM896.965 1.99558C899.713 2.15522 897.964 2.10533 896.965 2.28493C898.214 2.82373 893.124 1.96564 896.965 1.99558ZM872.984 1.94569C873.765 1.87584 874.67 1.806 875.045 1.87584C876.512 2.18515 868.644 2.51442 872.984 1.94569ZM864.741 2.4346H867.208C869.83 2.68404 859.932 2.42462 864.741 2.4346ZM850.471 2.5244C850.471 2.5244 853.999 2.31486 853.562 2.5244C853.562 2.55433 850.034 2.64413 850.471 2.5244ZM845.225 2.59424C845.225 2.66408 843.601 2.59424 843.445 2.59424H845.225ZM826.147 0.0798494C827.646 0.0598939 828.239 0.0598939 828.707 0.0798494C828.926 0.149694 820.62 0.159671 826.147 0.0798494ZM821.432 2.57429H823.93C825.647 2.6142 816.842 2.58426 821.432 2.57429ZM786.554 0.82818C786.804 0.82818 791.05 0.778291 791.113 0.848136C791.113 0.898024 786.429 0.848135 786.554 0.82818ZM703.558 2.56431C704.058 2.54435 707.555 2.50444 705.619 2.56431C705.119 2.57429 701.622 2.60422 703.558 2.56431ZM698.625 0.189605C700.529 0.149694 701.497 0.159671 701.497 0.20956C701.903 0.29936 695.127 0.239493 698.625 0.189605ZM531.322 2.69402H535.194C541.47 2.75388 527.294 2.72395 531.322 2.69402ZM520.862 2.71397C521.642 2.71397 522.829 2.71397 523.547 2.71397C525.67 2.74391 515.335 2.74391 520.862 2.71397ZM514.336 0.638603C517.052 0.60867 513.399 0.778291 513.336 0.688492C513.336 0.668536 513.805 0.648581 514.336 0.638603ZM486.702 2.62417C488.513 2.65411 485.921 2.66408 485.484 2.64413C484.297 2.6142 485.172 2.59424 486.702 2.62417ZM448.326 0.419093C448.514 0.419093 448.732 0.409115 448.951 0.409115C453.291 0.409115 444.517 0.488937 448.326 0.419093ZM447.265 2.75388C448.482 2.74391 449.482 2.74391 449.856 2.75388C449.482 2.77384 442.113 2.86364 447.265 2.75388ZM414.322 1.0876C415.009 1.0876 416.04 1.06765 416.633 1.0876C417.726 1.10756 411.481 1.15745 414.322 1.0876ZM403.925 2.67406C404.83 2.67406 406.079 2.72395 406.079 2.75388C405.954 2.77384 400.833 2.76386 403.925 2.67406ZM396.274 2.13526C396.274 2.13526 399.709 2.11531 399.397 2.13526C399.397 2.13526 395.869 2.17518 396.274 2.13526ZM394.214 1.58649C396.15 1.58649 396.306 1.64636 394.214 1.6264C392.246 1.59647 392.246 1.59647 394.214 1.58649ZM389.186 1.52662C389.686 1.50667 390.342 1.49669 390.841 1.49669C393.183 1.50667 388.343 1.57651 389.186 1.52662ZM381.536 2.75388C383.41 2.72395 384.315 2.72395 383.691 2.76386C383.285 2.81375 378.164 2.81375 381.536 2.75388ZM363.301 0.688492C367.329 0.758336 361.99 0.798247 361.833 0.688492C361.771 0.668536 362.052 0.668536 363.301 0.688492ZM322.584 1.84591C323.926 1.81598 323.895 1.92573 322.584 1.8958C321.272 1.88582 321.241 1.85589 322.584 1.84591ZM312.436 0.967869C312.436 0.967869 315.496 0.908002 315.152 0.967869C315.215 0.967869 312.061 1.02773 312.436 0.967869ZM301.132 1.84591C301.601 1.79602 304.348 1.79602 304.848 1.83593C305.223 1.83593 300.726 1.87584 301.132 1.84591ZM276.34 1.59647C276.496 1.57651 281.18 1.55656 281.336 1.59647C280.836 1.59647 276.402 1.65633 276.34 1.59647ZM275.903 2.73393C278.557 2.73393 279.431 2.76386 277.37 2.78382C275.028 2.82373 274.466 2.78382 275.903 2.73393ZM263.6 0.548803C266.91 0.528848 262.663 0.618647 261.976 0.578736C262.195 0.558781 262.913 0.548803 263.6 0.548803ZM224.507 0.468981C225.037 0.468981 225.662 0.468981 226.037 0.468981C226.567 0.508892 221.415 0.548803 224.507 0.468981ZM210.018 2.704C211.736 2.69402 211.642 2.78382 209.644 2.75388C207.864 2.75388 208.082 2.71397 210.018 2.704ZM196.311 1.10756C197.122 1.0876 198.059 1.07762 198.371 1.0876C197.56 1.14747 192.158 1.20733 196.311 1.10756ZM182.353 1.32707C183.696 1.30711 183.665 1.36698 182.353 1.37696C181.042 1.39691 181.01 1.32707 182.353 1.32707ZM175.39 0.349248C180.167 0.339271 172.018 0.409115 173.079 0.359226C173.079 0.359226 174.11 0.339271 175.39 0.349248ZM171.674 0.439048C172.018 0.42907 172.705 0.419093 173.204 0.419093C176.358 0.449026 170.925 0.508892 171.674 0.439048ZM167.771 1.76609C169.114 1.76609 169.988 1.78604 169.364 1.806C168.458 1.82595 165.46 1.76609 167.771 1.76609ZM160.933 0.868091C161.589 0.868091 162.307 0.888046 162.525 0.898024C162.525 0.947913 157.529 0.848136 160.933 0.868091ZM145.164 0.379182C148.724 0.449026 143.822 0.409115 143.322 0.379182C141.854 0.329293 142.698 0.329293 145.164 0.379182ZM131.363 2.72395C133.955 2.73393 129.895 2.83371 129.739 2.77384C128.802 2.73393 129.427 2.71397 131.363 2.72395ZM124.119 2.71397C125.867 2.71397 126.492 2.78382 124.119 2.75388C122.12 2.71397 122.12 2.72395 124.119 2.71397ZM104.01 1.59647C105.509 1.51664 105.103 1.64636 104.01 1.64636C102.792 1.65633 102.792 1.64636 104.01 1.59647ZM95.0484 2.13526C102.293 2.00555 89.5528 2.90355 91.0516 2.39469C91.0516 2.26498 92.8315 2.13526 95.0484 2.13526ZM64.573 2.63415C71.7235 2.63415 62.356 2.83371 60.8884 2.71397C61.1694 2.65411 62.8868 2.63415 64.573 2.63415ZM63.6987 2.40466C62.7619 2.53437 52.7075 2.81375 53.8316 2.40466H63.6987ZM42.1535 1.95567C46.9621 1.95567 53.9565 2.22506 51.2087 2.28493C46.0566 2.46453 34.8157 2.20511 42.1535 1.95567ZM31.9742 2.69402C40.3112 2.62417 35.003 2.86364 30.7252 2.85366C24.0743 2.85366 24.855 2.73393 31.9742 2.69402ZM1.68613 118.526C1.2802 119.084 1.2802 124.083 0.999181 121.379C-1.42455e-05 119.942 2.49797 114.096 1.68613 118.526ZM1.62492 13.5099C1.31267 20.2648 1.15655 8.76049 1.50002 7.77269C1.7186 5.96672 1.84349 8.94009 1.62492 13.5099ZM2.50021 33.0762C-0.715945 42.3655 1.00021 30.9996 2.50021 29.5985C1.25122 29.8778 2.87491 31.839 2.50021 33.0762ZM36.5955 127.585C32.2865 127.625 29.7885 127.635 29.1328 127.615C27.8213 127.436 53.4257 127.326 36.5955 127.585ZM58.89 129.651C56.9541 129.312 55.4241 129.501 53.4257 129.222C51.1463 128.952 64.5417 129.691 58.89 129.651ZM84.3695 127.346C92.7066 127.336 89.6153 127.555 83.5889 127.555C76.2511 127.555 77.0317 127.406 84.3695 127.346ZM94.7362 127.745C88.3975 127.745 88.4912 127.446 94.7362 127.386C100.856 127.446 100.95 127.735 94.7362 127.745ZM115.032 128.344C104.978 128.174 104.978 127.915 115.032 127.745C125.087 127.915 125.087 128.174 115.032 128.344ZM140.855 128.443C127.803 128.443 139.637 128.174 144.04 128.274C151.534 128.384 150.41 128.443 140.855 128.443ZM156.842 129.451C156.28 129.491 154.438 129.571 152.658 129.571C143.947 129.641 156.874 129.242 156.842 129.451ZM172.736 129.371C169.676 129.371 166.335 129.312 165.304 129.202C168.833 128.972 187.974 129.461 172.736 129.371ZM174.266 127.526C172.642 127.446 184.601 127.156 184.508 127.186C186.256 127.306 174.172 127.555 174.266 127.526ZM189.847 128.922C187.849 128.982 185.101 128.982 183.946 128.982C177.513 128.703 197.029 128.703 189.847 128.922ZM196.498 127.346C195.249 127.376 191.689 127.426 188.473 127.466C174.547 127.546 206.677 127.007 196.498 127.346ZM234.748 129.012C228.566 129.361 230.908 129.022 236.934 128.753C242.898 128.443 241.399 128.633 234.748 129.012ZM273.904 128.753C271.5 128.753 268.659 128.713 267.659 128.673C266.504 128.483 287.893 128.683 273.904 128.753ZM310 128.683C307.596 128.683 303.287 128.643 300.445 128.593C285.426 128.364 315.589 128.533 310 128.683ZM344.878 128.883C334.855 128.613 345.315 128.434 349.5 128.703C355.901 129.072 353.715 129.132 344.878 128.883ZM366.892 129.062C359.71 129.162 367.641 128.843 369.14 128.982C369.14 128.982 368.141 129.062 366.892 129.062ZM373.824 127.645C371.107 127.516 372.731 127.446 374.386 127.526C376.79 127.605 376.322 127.725 373.824 127.645ZM382.91 128.094C382.473 127.915 384.284 127.875 384.721 127.975C385.564 128.054 384.034 128.174 382.91 128.094ZM396.774 129.711C393.121 129.691 397.086 129.561 397.898 129.591C399.647 129.671 399.241 129.711 396.774 129.711ZM466.062 129.621C464.751 129.621 464.719 129.431 466.062 129.441C467.405 129.421 467.373 129.621 466.062 129.621ZM475.679 129.381C464.407 129.351 474.618 128.982 478.677 129.032C486.077 129.172 484.204 129.381 475.679 129.381ZM478.958 127.805C478.365 127.835 475.336 128.134 476.085 127.895C476.959 127.735 481.799 127.516 478.958 127.805ZM483.392 127.775C481.706 127.775 481.425 127.735 482.268 127.705C483.642 127.565 488.107 127.795 483.392 127.775ZM497.88 129.691C497.068 129.731 496.319 129.731 496.1 129.691C494.82 129.451 500.628 129.611 497.88 129.691ZM537.255 129.621C534.444 129.621 532.04 129.511 532.04 129.511C532.196 129.172 550.775 129.551 537.255 129.621ZM678.703 129.102C675.987 129.102 672.271 129.032 670.585 128.992C667.587 128.753 695.034 128.972 678.703 129.102ZM732.285 129.561C721.762 129.551 733.472 129.312 737.843 129.561H732.285ZM734.783 128.992C716.235 128.902 734.408 128.773 739.779 128.912C747.71 128.972 741.184 128.932 734.783 128.992ZM831.268 129.092H815.53C799.418 128.354 861.587 129.132 831.268 129.092ZM929.064 129.252C926.285 129.351 923.006 129.441 921.039 129.351C918.198 128.922 945.176 128.473 929.064 129.252ZM931.343 128.384C928.408 128.384 929.876 128.284 934.778 128.094C951.764 127.685 962.318 128.334 931.343 128.384Z" />
+        </InternalStyledSvg>
+      }
+      {...props}
+    />
+  );
+};