fix: adjusting margins and sizing

oaknational · May 2, 2024 · ec7fddf · ec7fddf
1 parent 969168b
commit ec7fddf
Show file tree

Hide file tree

Showing 14 changed files with 243 additions and 13 deletions.
diff --git a/src/components/molecules/InternalShadowRectButton/InternalShadowRectButton.tsx b/src/components/molecules/InternalShadowRectButton/InternalShadowRectButton.tsx
@@ -26,6 +26,8 @@ export type InternalShadowRectButtonProps = Omit<
   | "$pa"
   | "$ph"
   | "$pv"
+  | "$pt"
+  | "$pb"
   | "$ba"
   | "$borderRadius"
   | "$borderColor"
@@ -61,6 +63,8 @@ export type InternalShadowRectButtonProps = Omit<
   pv?: SpacingStyleProps["$pv"];
   ph?: SpacingStyleProps["$ph"];
   font?: TypographyStyleProps["$font"];
+  innerWidth?: SizeStyleProps["$width"];
+  textAlign?: TypographyStyleProps["$textAlign"];
 } & PositionStyleProps;
 
 const StyledInternalButton = styled(InternalButton)<
@@ -151,6 +155,7 @@ export const InternalShadowRectButton = <C extends ElementType = "button">(
     disabled,
     width = "max-content",
     maxWidth,
+    innerWidth,
     defaultBackground,
     defaultBorderColor,
     defaultTextColor,
@@ -164,10 +169,13 @@ export const InternalShadowRectButton = <C extends ElementType = "button">(
     hoverShadow = "drop-shadow-lemon",
     pv = "inner-padding-s",
     ph = "inner-padding-m",
+    pt,
+    pb,
     iconLayout = "row",
     iconGap = "space-between-ssx",
     iconOverride,
     font = "heading-7",
+    textAlign = "left",
     ...rest
   } = props;
 
@@ -227,6 +235,8 @@ export const InternalShadowRectButton = <C extends ElementType = "button">(
         $color={defaultTextColor}
         $pv={pv}
         $ph={ph}
+        $pt={pt}
+        $pb={pb}
         $borderRadius={"border-radius-s"}
         $position={"relative"}
         disabled={disabled || isLoading}
@@ -248,9 +258,12 @@ export const InternalShadowRectButton = <C extends ElementType = "button">(
           $alignItems={"center"}
           $gap={iconGap}
           $justifyContent="center"
+          $width={innerWidth}
         >
           {!isTrailingIcon && iconLogic}
-          <OakSpan $font={font}>{children}</OakSpan>
+          <OakSpan $font={font} $textAlign={textAlign}>
+            {children}
+          </OakSpan>
           {isTrailingIcon && iconLogic}
         </OakFlex>
       </StyledInternalButton>

diff --git a/...s/molecules/InternalShadowRectButton/__snapshots__/InternalShadowRectButton.test.tsx.snap b/...s/molecules/InternalShadowRectButton/__snapshots__/InternalShadowRectButton.test.tsx.snap
@@ -59,6 +59,7 @@ exports[`InternalShadowRectButton matches snapshot 1`] = `
   -moz-letter-spacing: 0.0115rem;
   -ms-letter-spacing: 0.0115rem;
   letter-spacing: 0.0115rem;
+  text-align: left;
 }
 
 .c8 {

diff --git a/src/components/molecules/OakPrimaryButton/__snapshots__/OakPrimaryButton.test.tsx.snap b/src/components/molecules/OakPrimaryButton/__snapshots__/OakPrimaryButton.test.tsx.snap
@@ -59,6 +59,7 @@ exports[`OakPrimaryButton matches snapshot 1`] = `
   -moz-letter-spacing: 0.0115rem;
   -ms-letter-spacing: 0.0115rem;
   letter-spacing: 0.0115rem;
+  text-align: left;
 }
 
 .c8 {

diff --git a/...s/molecules/OakPrimaryInvertedButton/__snapshots__/OakPrimaryInvertedButton.test.tsx.snap b/...s/molecules/OakPrimaryInvertedButton/__snapshots__/OakPrimaryInvertedButton.test.tsx.snap
@@ -59,6 +59,7 @@ exports[`OakPrimaryInvertedButton matches snapshot 1`] = `
   -moz-letter-spacing: 0.0115rem;
   -ms-letter-spacing: 0.0115rem;
   letter-spacing: 0.0115rem;
+  text-align: left;
 }
 
 .c8 {

diff --git a/src/components/molecules/OakSecondaryButton/__snapshots__/OakSecondaryButton.test.tsx.snap b/src/components/molecules/OakSecondaryButton/__snapshots__/OakSecondaryButton.test.tsx.snap
@@ -59,6 +59,7 @@ exports[`OakSecondaryButton matches snapshot 1`] = `
   -moz-letter-spacing: 0.0115rem;
   -ms-letter-spacing: 0.0115rem;
   letter-spacing: 0.0115rem;
+  text-align: left;
 }
 
 .c8 {

diff --git a/src/components/organisms/OakCookieBanner/__snapshots__/OakCookieBanner.test.tsx.snap b/src/components/organisms/OakCookieBanner/__snapshots__/OakCookieBanner.test.tsx.snap
@@ -158,6 +158,7 @@ exports[`OakCookieBanner matches snapshot 1`] = `
   -moz-letter-spacing: 0.0115rem;
   -ms-letter-spacing: 0.0115rem;
   letter-spacing: 0.0115rem;
+  text-align: left;
 }
 
 .c15 {

diff --git a/src/components/organisms/OakCookieConsent/__snapshots__/OakCookieConsent.test.tsx.snap b/src/components/organisms/OakCookieConsent/__snapshots__/OakCookieConsent.test.tsx.snap
@@ -158,6 +158,7 @@ exports[`OakCookieConsent matches snapshot 1`] = `
   -moz-letter-spacing: 0.0115rem;
   -ms-letter-spacing: 0.0115rem;
   letter-spacing: 0.0115rem;
+  text-align: left;
 }
 
 .c15 {

diff --git a/src/components/organisms/OakPrimaryNav/__snapshots__/OakPrimaryNav.test.tsx.snap b/src/components/organisms/OakPrimaryNav/__snapshots__/OakPrimaryNav.test.tsx.snap
@@ -71,6 +71,7 @@ exports[`OakPrimaryNav matches snapshot 1`] = `
   -moz-letter-spacing: 0.0115rem;
   -ms-letter-spacing: 0.0115rem;
   letter-spacing: 0.0115rem;
+  text-align: left;
 }
 
 .c2 {

diff --git a/src/components/organisms/OakPrimaryNavItem/__snapshots__/OakPrimaryNavItem.test.tsx.snap b/src/components/organisms/OakPrimaryNavItem/__snapshots__/OakPrimaryNavItem.test.tsx.snap
@@ -50,6 +50,7 @@ exports[`OakPrimaryNavItem matches snapshot 1`] = `
   -moz-letter-spacing: 0.0115rem;
   -ms-letter-spacing: 0.0115rem;
   letter-spacing: 0.0115rem;
+  text-align: left;
 }
 
 .c3 {

diff --git a/...nts/organisms/pupil/OakPupilJourneySubjectButton/OakPupilJourneySubjectButton.stories.tsx b/...nts/organisms/pupil/OakPupilJourneySubjectButton/OakPupilJourneySubjectButton.stories.tsx
@@ -10,10 +10,11 @@ const meta: Meta<typeof OakPupilJourneySubjectButton> = {
     phase: { control: { type: "radio" }, options: ["primary", "secondary"] },
     subjectIconName: { control: { type: "text" } },
     disabled: { control: { type: "boolean" } },
+    subjectText: { control: { type: "text" } },
   },
   parameters: {
     controls: {
-      include: ["phase", "subjectIconName", "disabled"],
+      include: ["phase", "subjectIconName", "disabled", "subjectText"],
     },
   },
 };
@@ -25,25 +26,27 @@ type Story = StoryObj<typeof OakPupilJourneySubjectButton>;
 export const Default: Story = {
   render: (args) => (
     <OakPupilJourneySubjectButton {...args}>
-      Subject
+      {args.subjectText}
     </OakPupilJourneySubjectButton>
   ),
   args: {
     phase: "primary",
     subjectIconName: "subject-english",
     disabled: false,
+    subjectText: "English",
   },
 };
 
 export const Disabled: Story = {
   render: (args) => (
     <OakPupilJourneySubjectButton {...args}>
-      Subject
+      {args.subjectText}
     </OakPupilJourneySubjectButton>
   ),
   args: {
     disabled: true,
     subjectIconName: "subject-english",
     phase: "primary",
+    subjectText: "English",
   },
 };
diff --git a/...onents/organisms/pupil/OakPupilJourneySubjectButton/OakPupilJourneySubjectButton.test.tsx b/...onents/organisms/pupil/OakPupilJourneySubjectButton/OakPupilJourneySubjectButton.test.tsx
@@ -15,10 +15,10 @@ describe("OakPupilJourneySubjectButton", () => {
         phase="primary"
         subjectIconName="subject-english"
       >
-        Year 1
+        English
       </OakPupilJourneySubjectButton>,
     );
-    expect(getByRole("button", { name: "Year 1" })).toBeInTheDocument();
+    expect(getByRole("button", { name: /English/ })).toBeInTheDocument();
   });
 
   it("matches snapshot", () => {
@@ -28,7 +28,7 @@ describe("OakPupilJourneySubjectButton", () => {
           phase="primary"
           subjectIconName="subject-english"
         >
-          Year 1
+          English
         </OakPupilJourneySubjectButton>
       </OakThemeProvider>,
     ).toJSON();

diff --git a/src/components/organisms/pupil/OakPupilJourneySubjectButton/OakPupilJourneySubjectButton.tsx b/src/components/organisms/pupil/OakPupilJourneySubjectButton/OakPupilJourneySubjectButton.tsx
@@ -61,8 +61,8 @@ export const OakPupilJourneySubjectButton = <C extends ElementType = "button">({
   const iconOverride = (
     <OakIcon
       iconName={subjectIconName}
-      $minWidth={"all-spacing-11"}
-      $minHeight={"all-spacing-11"}
+      $minWidth={"all-spacing-12"}
+      $minHeight={"all-spacing-12"}
     />
   );
 
@@ -72,8 +72,10 @@ export const OakPupilJourneySubjectButton = <C extends ElementType = "button">({
       iconOverride={iconOverride}
       iconLayout="column"
       iconGap={"space-between-sssx"}
-      pv={"inner-padding-xl"}
-      ph={"inner-padding-xl"}
+      pv={null}
+      pt={"inner-padding-s"}
+      pb={"inner-padding-xl"}
+      ph={"inner-padding-s"}
       font={"heading-7"}
       defaultBorderColor={borderColor}
       defaultBackground={defaultBackground}
@@ -84,8 +86,8 @@ export const OakPupilJourneySubjectButton = <C extends ElementType = "button">({
       disabledBackground="bg-btn-secondary-disabled"
       disabledBorderColor="border-neutral-lighter"
       disabledTextColor="text-subdued"
-      width={"all-spacing-16"}
-      height={"all-spacing-16"}
+      textAlign={"center"}
+      innerWidth={"all-spacing-16"}
       {...rest}
     />
   );