Add fullwidth property to tile

miljodir · Sep 11, 2024 · 4fc0565 · 4fc0565
1 parent f3c8ea2
commit 4fc0565
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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,