-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #155 from oaknational/feat/pupil-672/oak-pupil-yea…
…r-browse-button feat: added OakPupilJourneyYearButton
- Loading branch information
Showing
8 changed files
with
397 additions
and
7 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
36 changes: 36 additions & 0 deletions
36
...omponents/organisms/pupil/OakPupilJourneyYearButton/OakPupilJourneyYearButton.stories.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,36 @@ | ||
import React from "react"; | ||
import { StoryObj, Meta } from "@storybook/react"; | ||
|
||
import { OakPupilJourneyYearButton } from "./OakPupilJourneyYearButton"; | ||
|
||
const meta: Meta<typeof OakPupilJourneyYearButton> = { | ||
component: OakPupilJourneyYearButton, | ||
tags: ["autodocs"], | ||
argTypes: { | ||
phase: { control: { type: "radio" }, options: ["primary", "secondary"] }, | ||
disabled: { control: { type: "boolean" } }, | ||
}, | ||
parameters: { | ||
controls: { | ||
include: ["phase", "disabled"], | ||
}, | ||
}, | ||
}; | ||
|
||
export default meta; | ||
|
||
type Story = StoryObj<typeof OakPupilJourneyYearButton>; | ||
|
||
export const Default: Story = { | ||
render: (args) => ( | ||
<OakPupilJourneyYearButton {...args}>Year 1</OakPupilJourneyYearButton> | ||
), | ||
args: { phase: "primary", disabled: false }, | ||
}; | ||
|
||
export const Disabled: Story = { | ||
render: (args) => ( | ||
<OakPupilJourneyYearButton {...args}>Year 1</OakPupilJourneyYearButton> | ||
), | ||
args: { disabled: true }, | ||
}; |
31 changes: 31 additions & 0 deletions
31
src/components/organisms/pupil/OakPupilJourneyYearButton/OakPupilJourneyYearButton.test.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,31 @@ | ||
import React from "react"; | ||
import "@testing-library/jest-dom"; | ||
import { create } from "react-test-renderer"; | ||
|
||
import { OakPupilJourneyYearButton } from "./OakPupilJourneyYearButton"; | ||
|
||
import renderWithTheme from "@/test-helpers/renderWithTheme"; | ||
import { OakThemeProvider } from "@/components/atoms"; | ||
import { oakDefaultTheme } from "@/styles"; | ||
|
||
describe("OakPupilJourneyYearButton", () => { | ||
it("renders", () => { | ||
const { getByRole } = renderWithTheme( | ||
<OakPupilJourneyYearButton phase="primary"> | ||
Year 1 | ||
</OakPupilJourneyYearButton>, | ||
); | ||
expect(getByRole("button", { name: "Year 1" })).toBeInTheDocument(); | ||
}); | ||
|
||
it("matches snapshot", () => { | ||
const tree = create( | ||
<OakThemeProvider theme={oakDefaultTheme}> | ||
<OakPupilJourneyYearButton phase="primary"> | ||
Year 1 | ||
</OakPupilJourneyYearButton> | ||
</OakThemeProvider>, | ||
).toJSON(); | ||
expect(tree).toMatchSnapshot(); | ||
}); | ||
}); |
76 changes: 76 additions & 0 deletions
76
src/components/organisms/pupil/OakPupilJourneyYearButton/OakPupilJourneyYearButton.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,76 @@ | ||
import React, { ElementType } from "react"; | ||
|
||
import { | ||
InternalShadowRectButton, | ||
InternalShadowRectButtonProps, | ||
} from "@/components/molecules/InternalShadowRectButton"; | ||
import { PolymorphicPropsWithoutRef } from "@/components/polymorphic"; | ||
|
||
export type OakPupilJourneyYearButtonProps = { | ||
phase: "primary" | "secondary"; | ||
} & Omit< | ||
InternalShadowRectButtonProps, | ||
| "defaultBorderColor" | ||
| "defaultBackground" | ||
| "defaultTextColor" | ||
| "hoverBackground" | ||
| "hoverBorderColor" | ||
| "hoverTextColor" | ||
| "disabledBackground" | ||
| "disabledBorderColor" | ||
| "disabledTextColor" | ||
| "pv" | ||
| "ph" | ||
| "font" | ||
>; | ||
|
||
/** | ||
* | ||
* A specific implementation of InternalRectButton | ||
* | ||
* Changes colour according to the phase prop. Can be used as a link or a button. | ||
* The following callbacks are available for tracking focus events: | ||
* | ||
* ### onClick | ||
* `onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;` | ||
* | ||
* ### onHovered | ||
* `onHovered?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>, duration: number) => void;`<br> | ||
* called after a mouseEnter and mouseLeave event has happened | ||
*/ | ||
|
||
export const OakPupilJourneyYearButton = <C extends ElementType = "button">({ | ||
phase, | ||
element, | ||
...rest | ||
}: OakPupilJourneyYearButtonProps & PolymorphicPropsWithoutRef<C>) => { | ||
const defaultBackground = | ||
phase === "primary" | ||
? "bg-decorative4-very-subdued" | ||
: "bg-decorative3-very-subdued"; | ||
const hoverBackground = | ||
phase === "primary" ? "bg-decorative4-main" : "bg-decorative3-main"; | ||
const borderColor = | ||
phase === "primary" | ||
? "border-decorative4-stronger" | ||
: "border-decorative3-stronger"; | ||
|
||
return ( | ||
<InternalShadowRectButton | ||
element={element ?? "button"} | ||
pv={"inner-padding-xl"} | ||
ph={"inner-padding-xl"} | ||
font={"heading-6"} | ||
defaultBorderColor={borderColor} | ||
defaultBackground={defaultBackground} | ||
defaultTextColor="text-primary" | ||
hoverBackground={hoverBackground} | ||
hoverBorderColor={borderColor} | ||
hoverTextColor="text-primary" | ||
disabledBackground="bg-btn-secondary-disabled" | ||
disabledBorderColor="border-neutral-lighter" | ||
disabledTextColor="text-subdued" | ||
{...rest} | ||
/> | ||
); | ||
}; |
Oops, something went wrong.