PUPIL-459 feat(copy-paste-this): create template component folder and files

src/components/CopyPasteThisComponent/CopyPasteThisComponent.stories.tsx

@@ -0,0 +1,49 @@
+import React from "react";
+import { StoryObj, Meta } from "@storybook/react";
+
+import { CopyPasteThisComponent } from "./CopyPasteThisComponent";
+
+const meta: Meta<typeof CopyPasteThisComponent> = {
+  //  "title" is the title of the story and where to look for compoent in the storybook
+  title: "Components/CopyPasteThisComponent",
+  component: CopyPasteThisComponent,
+  tags: ["autodocs"],
+  argTypes: {
+    // Define your component's props and their types here
+    // For example:
+    // text: { control: "text" },
+    // size: { control: 'select', options: ['small', 'medium', 'large'] },
+    //
+    // can also use the storybook-helpers to add the argTypes
+    // ...colorArgTypes,
+    // ...spacingArgTypes,
+    // ...borderArgTypes,
+  },
+  parameters: {
+    controls: {
+      include: [
+        // include the argTypes from the storybook-helpers
+        // ...Object.keys(colorArgTypes),
+        // ...Object.keys(spacingArgTypes),
+        // ...Object.keys(borderArgTypes),
+        "type",
+      ],
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof CopyPasteThisComponent>;
+
+export const Default: Story = {
+  render: (args) => <CopyPasteThisComponent {...args} />,
+  args: {
+    // Define your component's default props here
+    //   $background: "bg-btn-primary",
+    //   $color: "white",
+    //   $ba: "border-solid-s",
+    //   $pa: "inner-padding-s",
+    //   $borderRadius: "border-radius-m",
+  },
+};

src/components/CopyPasteThisComponent/CopyPasteThisComponent.test.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+import "@testing-library/jest-dom";
+import { create } from "react-test-renderer";
+
+import { CopyPasteThisComponent } from "./CopyPasteThisComponent";
+
+import renderWithTheme from "@/test-helpers/renderWithTheme";
+
+describe("CopyPasteThisComponent", () => {
+  it("renders", () => {
+    const { getByTestId } = renderWithTheme(
+      <CopyPasteThisComponent data-testid="test" />,
+    );
+    expect(getByTestId("test")).toBeInTheDocument();
+  });
+
+  it("matches snapshot", () => {
+    const tree = create(
+      <CopyPasteThisComponent>Click Me</CopyPasteThisComponent>,
+    ).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});

src/components/CopyPasteThisComponent/CopyPasteThisComponent.tsx

@@ -0,0 +1,86 @@
+import React from "react";
+import styled, { css } from "styled-components";
+
+import { OakFlex } from "../atoms";
+
+import { parseSpacing } from "@/styles/helpers/parseSpacing";
+
+const StyledOakFlex = styled(OakFlex)`
+  width: ${parseSpacing("all-spacing-6")};
+`;
+// For example you could restyle the OakFlex component by adding the styles to the css template literal below
+
+export type CopyPasteThisComponentProps = {
+  /**
+   * Define the props for your component here
+   * add styleprops from "@/styles/utils/*Style" to the component props type definition where necessary in order to use
+   * the oak design kit which accept specific tokens to add style and also keep the components style consistent
+   *  & TypographyStyleProps &
+   *   SpacingStyleProps &
+   *   ColorStyleProps &
+   *   DisplayStyleProps &
+   *   BorderStyleProps &
+   *   ColorFilterStyleProps &
+   *   DropShadowStyleProps &
+   *   FlexStyleProps &
+   *   ListStyleProps &
+   *   OpacityStyleProps &
+   *   PositionStyleProps &
+   *   SizeStyleProps &
+   *   TransformStyleProps &
+   *   TransitionStyleProps &
+   *   ZIndexStyleProps;
+   */
+};
+
+// By adding the style css utils to this components css your component will be able to accept corresponding props and prop values.
+// you can also add custom styles to the component by adding the styles to the css template literal below
+
+const CopyPasteThisComponentCss = css<CopyPasteThisComponentProps>``;
+
+/**
+ *
+ * add default and custom styles to the component by adding the styles to the css template literal below
+ *
+ * ${typographyStyle}
+ * ${colorStyle}
+ * ${spacingStyle}
+ * ${displayStyle}
+ * ${borderStyle}
+ * ${dropShadowStyle}
+ * ${colorFilterStyle}
+ *
+ */
+
+const UnstyledComponent = (props: CopyPasteThisComponentProps) => {
+  /**
+   * Add your component logic here
+   *
+   */
+
+  return (
+    /**
+     *  Return your component JSX here
+     * for example you could
+     *
+     */
+
+    <StyledOakFlex {...props}>
+      {/** Add your component content here */}
+    </StyledOakFlex>
+  );
+};
+
+/**
+ *
+ * Add the description of the component here and it will appear on the story for the component
+ * The following callbacks are available for tracking focus events:
+ *
+ * ### Callbacks
+ * make sure to add descriptions and types for any callbacks for the component
+ *
+ * NB. We must export a styled component for it to be inheritable
+ */
+export const CopyPasteThisComponent = styled(UnstyledComponent)`
+  ${CopyPasteThisComponentCss}
+`;

src/components/CopyPasteThisComponent/__snapshots__/CopyPasteThisComponent.test.tsx.snap

@@ -0,0 +1,24 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CopyPasteThisComponent matches snapshot 1`] = `
+.c0 {
+  font-family: Lexend,sans-serif;
+}
+
+.c1 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.c2 {
+  width: 1.5rem;
+}
+
+<div
+  className="c0 c1 c2 "
+>
+  Click Me
+</div>
+`;

src/components/CopyPasteThisComponent/index.ts

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