From f8b31ea897081eac47a8a60a2b3eea5effbd9e03 Mon Sep 17 00:00:00 2001
From: Aurora Scharff <66901228+aurorascharff@users.noreply.github.com>
Date: Wed, 11 Sep 2024 13:57:21 +0200
Subject: [PATCH] Add fullwidth property to tile (#167)

---
 packages/css/src/tile/README.md     |  2 +-
 packages/css/src/tile/tile.css      |  8 ++++++++
 packages/react/src/tiles/MdTile.tsx |  3 +++
 stories/Button.stories.tsx          |  2 +-
 stories/Tile.stories.tsx            | 12 ++++++++++++
 5 files changed, 25 insertions(+), 2 deletions(-)

diff --git a/packages/css/src/tile/README.md b/packages/css/src/tile/README.md
index 35faa61e..3bf28862 100644
--- a/packages/css/src/tile/README.md
+++ b/packages/css/src/tile/README.md
@@ -9,7 +9,7 @@ See [Storybook](https://miljodir.github.io/md-components) for examples and more
 ## Tile horizontal
 
 ```html
-<a className="md-tile [md-tile--secondary, md-tile--small, md-tile--medium]" href="{href}" onClick="{handleClick}">
+<a className="md-tile [md-tile--secondary, md-tile--small, md-tile--medium, md-tile--fullWidth]" href="{href}" onClick="{handleClick}">
   <div className="md-tile__content">
     <div className="md-tile__content-icon">{icon}</div>
     <div className="md-tile__content-text">
diff --git a/packages/css/src/tile/tile.css b/packages/css/src/tile/tile.css
index d68a9cff..752eb3b5 100644
--- a/packages/css/src/tile/tile.css
+++ b/packages/css/src/tile/tile.css
@@ -13,20 +13,28 @@
   gap: 1.5em;
   text-align: start;
   width: 440px;
+  min-width: 440px;
   max-width: 100%;
   transition: all 0.15s ease-in-out;
 }
 
 .md-tile--medium {
   width: 424px;
+  min-width: 424px;
 }
 
 .md-tile--small {
   width: 320px;
+  min-width: 320px;
   gap: 1em;
   padding: 16px;
 }
 
+.md-tile--fullWidth {
+  width: 100%;
+  min-width: 100%;
+}
+
 .md-tile--secondary {
   background-color: var(--mdSecondaryColor40);
 }
diff --git a/packages/react/src/tiles/MdTile.tsx b/packages/react/src/tiles/MdTile.tsx
index 5c3feb36..84d0593b 100644
--- a/packages/react/src/tiles/MdTile.tsx
+++ b/packages/react/src/tiles/MdTile.tsx
@@ -7,6 +7,7 @@ export type MdTileProps = {
   description?: string;
   href?: string;
   theme?: 'primary' | 'secondary';
+  fullWidth?: boolean;
   disabled?: boolean;
   mode?: 'large' | 'medium' | 'small';
   icon?: React.ReactNode;
@@ -20,6 +21,7 @@ const MdTile: React.FC<MdTileProps> = ({
   description,
   href,
   theme = 'primary',
+  fullWidth = false,
   mode = 'large',
   disabled = false,
   icon = null,
@@ -34,6 +36,7 @@ const MdTile: React.FC<MdTileProps> = ({
       'md-tile--secondary': theme && theme === 'secondary',
       'md-tile--medium': mode === 'medium',
       'md-tile--small': mode === 'small',
+      'md-tile--fullWidth': !!fullWidth,
     },
     otherProps.className,
   );
diff --git a/stories/Button.stories.tsx b/stories/Button.stories.tsx
index 55ac5be3..2e4767fa 100644
--- a/stories/Button.stories.tsx
+++ b/stories/Button.stories.tsx
@@ -98,7 +98,7 @@ export default {
 interface ButtonArgs {
   label: string;
   disabled: boolean;
-  theme: string;
+  theme: 'primary' | 'secondary' | 'danger' | 'tertiary';
   small: boolean;
 }
 
diff --git a/stories/Tile.stories.tsx b/stories/Tile.stories.tsx
index d0868f09..c8966fab 100644
--- a/stories/Tile.stories.tsx
+++ b/stories/Tile.stories.tsx
@@ -51,6 +51,16 @@ export default {
       },
       control: { type: 'boolean' },
     },
+    fullWidth: {
+      description: 'Make tile full width.',
+      table: {
+        defaultValue: { summary: 'false' },
+        type: {
+          summary: 'boolean',
+        },
+      },
+      control: { type: 'boolean' },
+    },
     theme: {
       type: { name: 'string' },
       description: 'Color theme for tile.',
@@ -115,6 +125,7 @@ const Template = (args: Args) => {
       description="Oversikt over dine målestasjoner"
       href={args.href}
       mode={args.mode}
+      fullWidth={args.fullWidth}
       theme={args.theme}
       disabled={args.disabled}
       preventDefault={args.preventDefault}
@@ -127,6 +138,7 @@ export const Tile = Template.bind({});
 Tile.args = {
   href: '#',
   theme: 'primary',
+  fullWidth: false,
   mode: 'large',
   disabled: false,
   preventDefault: true,