Merge pull request #234 from oaknational/feat/oak-jaunty-angle-label

PUPIL-873 feat(angle-label): add oak jaunty angle label component to storybook

src/components/molecules/OakJauntyAngleLabel/OakJauntyAngleLabel.stories.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+import { Meta, StoryObj } from "@storybook/react";
+
+import { OakJauntyAngleLabel } from "./OakJauntyAngleLabel";
+
+import { OakFlex } from "@/components/atoms";
+
+const meta: Meta<typeof OakJauntyAngleLabel> = {
+  component: OakJauntyAngleLabel,
+  tags: ["autodocs"],
+  title: "components/molecules/OakJauntyAngleLabel",
+  args: { label: "Select one answer" },
+  decorators: [
+    (Story) => (
+      <OakFlex $pa={"inner-padding-xl"} $flexDirection={"row"}>
+        <Story />
+      </OakFlex>
+    ),
+  ],
+};
+export default meta;
+
+type Story = StoryObj<typeof OakJauntyAngleLabel>;
+
+export const Default: Story = {
+  render: (args) => <OakJauntyAngleLabel {...args} />,
+  args: { $background: "bg-decorative1-main" },
+};

src/components/molecules/OakJauntyAngleLabel/OakJauntyAngleLabel.test.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import "@testing-library/jest-dom";
+import { create } from "react-test-renderer";
+import { ThemeProvider } from "styled-components";
+
+import { OakJauntyAngleLabel } from "./OakJauntyAngleLabel";
+
+import { oakDefaultTheme } from "@/styles";
+
+describe("OakjauntyAngleLabel", () => {
+  it("matches snapshot", () => {
+    const tree = create(
+      <ThemeProvider theme={oakDefaultTheme}>
+        <OakJauntyAngleLabel label="Select one answer" />
+      </ThemeProvider>,
+    ).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});

src/components/molecules/OakJauntyAngleLabel/OakJauntyAngleLabel.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+
+import { OakBox, OakBoxProps } from "@/components/atoms";
+
+export type OakJauntyAngleLabelProps = {
+  label: string;
+} & Omit<OakBoxProps, "onClick" | "label">;
+export const OakJauntyAngleLabel = (props: OakJauntyAngleLabelProps) => {
+  const { label, ...oakBoxProps } = props;
+  return (
+    <OakBox
+      $borderRadius={"border-radius-m"}
+      $ph={"inner-padding-xs"}
+      $pv={"inner-padding-ssx"}
+      $font={["heading-7", "heading-6"]}
+      $transform={"rotate(-1.5deg)"}
+      {...oakBoxProps}
+    >
+      {label}
+    </OakBox>
+  );
+};

src/components/molecules/OakJauntyAngleLabel/__snapshots__/OakJauntyAngleLabel.test.tsx.snap

@@ -0,0 +1,55 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`OakjauntyAngleLabel matches snapshot 1`] = `
+.c0 {
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+  border-radius: 0.375rem;
+  -webkit-transform: rotate(-1.5deg);
+  -ms-transform: rotate(-1.5deg);
+  transform: rotate(-1.5deg);
+  font-family: Lexend,sans-serif;
+  font-weight: 600;
+  font-size: 1rem;
+  line-height: 1.25rem;
+  -webkit-letter-spacing: 0.0115rem;
+  -moz-letter-spacing: 0.0115rem;
+  -ms-letter-spacing: 0.0115rem;
+  letter-spacing: 0.0115rem;
+}
+
+@media (min-width:750px) {
+  .c0 {
+    font-weight: 600;
+  }
+}
+
+@media (min-width:750px) {
+  .c0 {
+    font-size: 1.25rem;
+  }
+}
+
+@media (min-width:750px) {
+  .c0 {
+    line-height: 1.5rem;
+  }
+}
+
+@media (min-width:750px) {
+  .c0 {
+    -webkit-letter-spacing: 0.0115rem;
+    -moz-letter-spacing: 0.0115rem;
+    -ms-letter-spacing: 0.0115rem;
+    letter-spacing: 0.0115rem;
+  }
+}
+
+<div
+  className="c0"
+>
+  Select one answer
+</div>
+`;

src/components/molecules/OakJauntyAngleLabel/index.ts

@@ -0,0 +1 @@
+export * from "./OakJauntyAngleLabel";