OPHJOD-287: Use Tailwind CSS rules and fix href

Opetushallitus · Apr 8, 2024 · f44a3f9 · f44a3f9
1 parent 2cd9b0c
commit f44a3f9
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 12 deletions.
diff --git a/lib/components/HeroCard/HeroCard.stories.tsx b/lib/components/HeroCard/HeroCard.stories.tsx
@@ -15,6 +15,7 @@ type Story = StoryObj<typeof meta>;
 const secondaryCardArgs = {
   title: 'Tunnista osaamistasi ja tutki mahdollisuuksia',
   backgroundColor: '#00A8B3F2',
+  href: '/',
 };
 
 export const Primary: Story = {
@@ -38,6 +39,7 @@ export const Primary: Story = {
       'Elämä on jatkuvaa muutosta ja uudistumista. Olipa kyse uran vaihdosta, uuden osaamisen oppimisesta tai henkilökohtaisen elämäntilanteen parantamisesta, me tarjoamme sinulle tiedon ja inspiraation joita tarvitset.',
     backgroundColor: '#006DB3F2',
     actionContent: 'Kokeile palvelua',
+    href: '/',
   },
   decorators: [
     (Story) => (
@@ -62,6 +64,7 @@ export const Secondary: Story = {
   },
   args: {
     title: secondaryCardArgs.title,
+    href: secondaryCardArgs.href,
   },
   decorators: [
     (Story) => (
@@ -90,9 +93,13 @@ export const MultipleSecondary: Story = {
       <div className="grid grid-flow-row auto-rows-max grid-cols-3 gap-[32px] lg:container">
         <Story />
         <Story
-          args={{ title: 'Tutustu miten käytät palvelua ja luot oman tulevaisuutesi', backgroundColor: '#EE7C45F2' }}
+          args={{
+            title: 'Tutustu miten käytät palvelua ja luot oman tulevaisuutesi',
+            backgroundColor: '#EE7C45F2',
+            href: '/',
+          }}
         />
-        <Story args={{ title: 'Luo oma profiili ja suunnittele polkusi', backgroundColor: '#CD4EB3F2' }} />
+        <Story args={{ title: 'Luo oma profiili ja suunnittele polkusi', backgroundColor: '#CD4EB3F2', href: '/' }} />
       </div>
     ),
   ],
@@ -120,6 +127,7 @@ export const Hero: Story = {
       'Elämä on jatkuvaa muutosta ja uudistumista. Olipa kyse uran vaihdosta, uuden osaamisen oppimisesta tai henkilökohtaisen elämäntilanteen parantamisesta, me tarjoamme sinulle tiedon ja inspiraation joita tarvitset.',
     backgroundColor: '#006DB3F2',
     actionContent: 'Kokeile palvelua',
+    href: '/',
   },
   decorators: [
     (Story) => (
@@ -130,9 +138,13 @@ export const Hero: Story = {
         <div className="grid grid-flow-row auto-rows-max grid-cols-3 gap-[32px] lg:container">
           <Story args={secondaryCardArgs} />
           <Story
-            args={{ title: 'Tutustu miten käytät palvelua ja luot oman tulevaisuutesi', backgroundColor: '#EE7C45F2' }}
+            args={{
+              title: 'Tutustu miten käytät palvelua ja luot oman tulevaisuutesi',
+              backgroundColor: '#EE7C45F2',
+              href: '/',
+            }}
           />
-          <Story args={{ title: 'Luo oma profiili ja suunnittele polkusi', backgroundColor: '#CD4EB3F2' }} />
+          <Story args={{ title: 'Luo oma profiili ja suunnittele polkusi', backgroundColor: '#CD4EB3F2', href: '/' }} />
         </div>
       </div>
     ),

diff --git a/lib/components/HeroCard/HeroCard.test.tsx b/lib/components/HeroCard/HeroCard.test.tsx
@@ -16,7 +16,13 @@ describe('HeroCard', () => {
 
   it('renders HeroCard with actionContent', () => {
     render(
-      <HeroCard title={title} content={content} actionContent={actionContent} backgroundColor={backgroundColor} />,
+      <HeroCard
+        title={title}
+        content={content}
+        actionContent={actionContent}
+        backgroundColor={backgroundColor}
+        href="/"
+      />,
     );
 
     // Assert title, content, and actionContent are rendered
@@ -42,7 +48,7 @@ describe('HeroCard', () => {
   });
 
   it('renders HeroCard without actionContent', () => {
-    render(<HeroCard title={title} content={content} backgroundColor={backgroundColor} />);
+    render(<HeroCard title={title} content={content} backgroundColor={backgroundColor} href="/" />);
 
     // Assert title and content are rendered
     expect(screen.getByText(title)).toBeInTheDocument();

diff --git a/lib/components/HeroCard/HeroCard.tsx b/lib/components/HeroCard/HeroCard.tsx
@@ -8,7 +8,7 @@ export interface HeroCardProps {
   /** Background color of the card */
   backgroundColor?: string;
   /** Link to page */
-  href?: string;
+  href: string;
 }
 
 export const HeroCard = ({ title, content, actionContent, backgroundColor = '#444BACF2', href }: HeroCardProps) => (
@@ -23,7 +23,7 @@ export const HeroCard = ({ title, content, actionContent, backgroundColor = '#44
       />
     ) : (
       <a href={href} className="flex rounded-[28px] outline-none transition-transform hover:scale-105 focus:scale-105">
-        <BaseCard title={title} content={content} backgroundColor={backgroundColor} />
+        <BaseCard title={title} content={content} backgroundColor={backgroundColor} href={href} />
       </a>
     )}
   </>
@@ -33,26 +33,26 @@ const BaseCard = ({ title, content, actionContent, backgroundColor, href }: Hero
   const Heading = actionContent ? 'h1' : 'h2';
   return (
     <div
-      className={`relative flex flex-col gap-[24px] rounded-[28px] px-[32px] pb-[64px] pt-[32px] text-white`}
+      className={`relative flex flex-col gap-6 rounded-[28px] px-7 pb-11 pt-7 text-white`}
       style={{ backgroundColor }}
     >
       <Heading className="overflow hyphens-auto text-pretty text-[28px] font-bold leading-[34px]">{title}</Heading>
       {content && <p>{content}</p>}
       {actionContent ? (
         <a
           href={href}
-          className="absolute bottom-0 right-[32px] translate-y-2/4 rounded-[40px] outline-none transition-transform hover:scale-105 focus:scale-105"
+          className="absolute bottom-0 right-7 translate-y-2/4 rounded-[40px] outline-none transition-transform hover:scale-105 focus:scale-105"
         >
           <div
-            className="flex select-none gap-4 rounded-[40px] bg-white px-[40px] py-[20px] text-[28px] font-bold leading-[38px]"
+            className="flex select-none gap-4 rounded-[40px] bg-white px-8 py-[20px] text-[28px] font-bold leading-[40px]"
             style={{ color: backgroundColor }}
           >
             {actionContent}
             <i aria-hidden>→</i>
           </div>
         </a>
       ) : (
-        <i className="absolute bottom-[14px] right-[32px] select-none text-[28px] font-bold leading-[32px]" aria-hidden>
+        <i className="absolute bottom-5 right-7 select-none text-[28px] font-bold leading-[32px]" aria-hidden>
           →
         </i>
       )}