From 45e9081c4f8cb6fb50c20f43ec792a3fb56425a1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adrian=20R=C3=B8stg=C3=A5rd=20Flatner?=
 <42931448+adrianflatner@users.noreply.github.com>
Date: Thu, 5 Oct 2023 16:25:18 +0200
Subject: [PATCH] KOMP-257-aspectRatio (#473)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Legger til dokumentasjon for aspectRatio

* Legger til navn til frame

* Sjekker om iframes lager problemer

* Fjerner iframes helt

* npm install

* Ci in build

* Disabling a11y

* Update AspectRatio.stories.tsx

Fjernet mellomrom fra title i story.

* Update AspectRatio.stories.tsx

* Update AspectRatio.stories.tsx

* Oppdaterer aspectRatio

* upps

* Create ApectRatio.mdx

* Delete apps/storybook/stories/components/layout/AspectRatio/AspectRatio.mdx

* Legger til gitconfig for å løse casingproblemer

---------

Co-authored-by: Bente Lien Nilsen <bente.lien.nilsen@kartverket.no>
---
 .../Layout/AspectRatio/ApectRatio.mdx         | 27 ++++++++
 .../AspectRatio/AspectRatio.stories.tsx       | 65 +++++++++++++++++++
 .../layout/AspectRatio/AspectRatio.mdx        | 13 ----
 config                                        |  1 +
 package-lock.json                             |  1 +
 5 files changed, 94 insertions(+), 13 deletions(-)
 create mode 100644 apps/storybook/stories/components/Layout/AspectRatio/ApectRatio.mdx
 create mode 100644 apps/storybook/stories/components/Layout/AspectRatio/AspectRatio.stories.tsx
 delete mode 100644 apps/storybook/stories/components/layout/AspectRatio/AspectRatio.mdx
 create mode 100644 config

diff --git a/apps/storybook/stories/components/Layout/AspectRatio/ApectRatio.mdx b/apps/storybook/stories/components/Layout/AspectRatio/ApectRatio.mdx
new file mode 100644
index 0000000000..b9a99275e1
--- /dev/null
+++ b/apps/storybook/stories/components/Layout/AspectRatio/ApectRatio.mdx
@@ -0,0 +1,27 @@
+import { Meta, Canvas, Story, Controls } from "@storybook/blocks";
+import * as AspectRatioStories from "./AspectRatio.stories";
+
+<Meta of={AspectRatioStories} />
+
+# Aspect Ratio
+
+AspectRatio brukes to å legge inn responsive bilder, videoer, kart, osv.
+
+## Ta i bruk
+
+```jsx
+import { AspectRatio } from "@kvib/react";
+```
+
+## Props
+
+<Canvas of={AspectRatioStories.AspectRatio} />
+<Controls of={AspectRatioStories.AspectRatio} />
+
+## Kart 16 / 9 ratio
+
+<Canvas of={AspectRatioStories.AspectRatioMap} />
+
+## Video med maxWidth
+
+<Canvas of={AspectRatioStories.AspectRatioVideo} />
diff --git a/apps/storybook/stories/components/Layout/AspectRatio/AspectRatio.stories.tsx b/apps/storybook/stories/components/Layout/AspectRatio/AspectRatio.stories.tsx
new file mode 100644
index 0000000000..61f491a72c
--- /dev/null
+++ b/apps/storybook/stories/components/Layout/AspectRatio/AspectRatio.stories.tsx
@@ -0,0 +1,65 @@
+import { AspectRatio as KvibAspectRatio } from "@kvib/react/src/layout";
+import { Image } from "@kvib/react/src/";
+
+import { Meta, StoryObj } from "@storybook/react";
+
+const meta: Meta<typeof KvibAspectRatio> = {
+  title: "Komponenter/Layout/Aspect Ratio",
+  component: KvibAspectRatio,
+  parameters: {
+    docs: {
+      story: { inline: true },
+      canvas: { sourceState: "shown" },
+    },
+    a11y: {
+      disable: true,
+    },
+  },
+  argTypes: {
+    ratio: {
+      description: "The aspect ratio of the Box. Common values are: `21/9`, `16/9`, `9/16`, `4/3`, `1.85/1`",
+      table: { type: { summary: "ResponsiveValue<number>" } },
+      control: "number",
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof KvibAspectRatio>;
+
+export const AspectRatio: Story = {
+  args: { ratio: 4 / 3 },
+  render: (args) => (
+    <KvibAspectRatio {...args}>
+      <Image
+        alt="trees"
+        src="https://images.unsplash.com/photo-1477768663691-75454fd8e870?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=3087&q=80"
+      />
+    </KvibAspectRatio>
+  ),
+};
+
+export const AspectRatioMap: Story = {
+  args: { ratio: 16 / 9 },
+  render: (args) => (
+    <KvibAspectRatio {...args}>
+      <iframe
+        title="hønefoss kart"
+        src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d15878.224555781148!2d10.234854769824661!3d60.16785279531992!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4641075a4a064e7d%3A0x32d7e65bc9c0d372!2zSMO4bmVmb3Nz!5e0!3m2!1sno!2sno!4v1694593115187!5m2!1sno!2sno"
+      ></iframe>
+    </KvibAspectRatio>
+  ),
+};
+
+export const AspectRatioVideo: Story = {
+  args: { maxW: "560px", ratio: 1 },
+  render: (args) => (
+    <KvibAspectRatio {...args}>
+      <iframe
+        title="kart og kompass"
+        src="https://www.youtube.com/embed/6V8Ua_4HOaQ?si=4V8GX80XXhWc_Jtr"
+        allowFullScreen
+      />
+    </KvibAspectRatio>
+  ),
+};
diff --git a/apps/storybook/stories/components/layout/AspectRatio/AspectRatio.mdx b/apps/storybook/stories/components/layout/AspectRatio/AspectRatio.mdx
deleted file mode 100644
index a48ede7a66..0000000000
--- a/apps/storybook/stories/components/layout/AspectRatio/AspectRatio.mdx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { Meta } from "@storybook/blocks";
-
-<Meta title="Komponenter/Layout/Aspect Ratio" />
-
-# Aspect Ratio
-
-Se [https://chakra-ui.com/docs/components/aspect-ratio](https://chakra-ui.com/docs/components/aspect-ratio) for eksempler og dokumentasjon.
-
-## Ta i bruk
-
-```jsx
-import { AspectRatio } from "@kvib/react";
-```
diff --git a/config b/config
new file mode 100644
index 0000000000..a087b904c5
--- /dev/null
+++ b/config
@@ -0,0 +1 @@
+core.ignorecase=false
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index ccf4135f24..2405abdcc5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -18,6 +18,7 @@
         "eslint-config-custom": "*",
         "husky": "^8.0.3",
         "prettier": "^3.0.3",
+        "pretty-quick": "^3.1.3",
         "turbo": "*"
       },
       "engines": {