From f2fea5da9aa222ec32cf263e92ce48d4f7d78b2e Mon Sep 17 00:00:00 2001
From: Jon McClure <jon.r.mcclure@gmail.com>
Date: Sun, 30 Jul 2023 10:35:58 +0100
Subject: [PATCH] object-cover

---
 src/components/PhotoPack/PhotoPack.svelte     |  5 +-
 .../styles/tokens/layout/main.stories.mdx     | 22 ++++++++
 src/scss/tokens/layout/_main.scss             |  2 +
 src/scss/tokens/layout/_object-fit.scss       | 30 +++++++++++
 src/scss/tokens/layout/_object-position.scss  | 54 +++++++++++++++++++
 5 files changed, 109 insertions(+), 4 deletions(-)
 create mode 100644 src/scss/tokens/layout/_object-fit.scss
 create mode 100644 src/scss/tokens/layout/_object-position.scss

diff --git a/src/components/PhotoPack/PhotoPack.svelte b/src/components/PhotoPack/PhotoPack.svelte
index 70a4d363..50ebe903 100644
--- a/src/components/PhotoPack/PhotoPack.svelte
+++ b/src/components/PhotoPack/PhotoPack.svelte
@@ -106,7 +106,7 @@
             aria-labelledby="{id}-figure-{ri}-{i}"
           >
             <img
-              class="m-0 w-full h-full"
+              class="m-0 w-full h-full object-cover"
               src="{img.src}"
               alt="{img.altText}"
               style:max-height="{img.maxHeight ? img.maxHeight + 'px' : ''}"
@@ -142,9 +142,6 @@
   div.photopack-container {
     div.photopack-row {
       figure {
-        img {
-          object-fit: cover;
-        }
         div.alt-warning {
           background-color: red;
           color: white;
diff --git a/src/docs/styles/tokens/layout/main.stories.mdx b/src/docs/styles/tokens/layout/main.stories.mdx
index fce5982c..53b32a64 100644
--- a/src/docs/styles/tokens/layout/main.stories.mdx
+++ b/src/docs/styles/tokens/layout/main.stories.mdx
@@ -12,6 +12,12 @@ import display from '$lib/scss/tokens/layout/\_display.scss?raw';
 {/* @ts-ignore */}
 import floats from '$lib/scss/tokens/layout/\_floats.scss?raw';
 
+{/* @ts-ignore */}
+import objectFit from '$lib/scss/tokens/layout/\_object-fit.scss?raw';
+
+{/* @ts-ignore */}
+import objectPosition from '$lib/scss/tokens/layout/\_object-position.scss?raw';
+
 {/* @ts-ignore */}
 import position from '$lib/scss/tokens/layout/\_position.scss?raw';
 
@@ -52,3 +58,19 @@ import position from '$lib/scss/tokens/layout/\_position.scss?raw';
   body={cssStringToTableArray(boxSizing)}
   copyable={[true, false]}
 />
+
+<CopyTable
+  title="Object fit"
+  mdnLink="object-fit"
+  header={['Class', 'Properties']}
+  body={cssStringToTableArray(objectFit)}
+  copyable={[true, false]}
+/>
+
+<CopyTable
+  title="Object position"
+  mdnLink="object-position"
+  header={['Class', 'Properties']}
+  body={cssStringToTableArray(objectPosition)}
+  copyable={[true, false]}
+/>
diff --git a/src/scss/tokens/layout/_main.scss b/src/scss/tokens/layout/_main.scss
index f2d99b7d..7717c0b1 100644
--- a/src/scss/tokens/layout/_main.scss
+++ b/src/scss/tokens/layout/_main.scss
@@ -2,4 +2,6 @@
 @forward 'box-sizing';
 @forward 'display';
 @forward 'floats';
+@forward 'object-fit';
+@forward 'object-position';
 @forward 'position';
diff --git a/src/scss/tokens/layout/_object-fit.scss b/src/scss/tokens/layout/_object-fit.scss
new file mode 100644
index 00000000..31c1cd32
--- /dev/null
+++ b/src/scss/tokens/layout/_object-fit.scss
@@ -0,0 +1,30 @@
+.object-contain {
+  object-fit: contain;
+}
+.object-cover {
+  object-fit: cover;
+}
+.object-fill {
+  object-fit: fill;
+}
+.object-none {
+  object-fit: none;
+}
+.object-scale-down {
+  object-fit: scale-down;
+}
+.\!object-contain {
+  object-fit: contain !important;
+}
+.\!object-cover {
+  object-fit: cover !important;
+}
+.\!object-fill {
+  object-fit: fill !important;
+}
+.\!object-none {
+  object-fit: none !important;
+}
+.\!object-scale-down {
+  object-fit: scale-down !important;
+}
diff --git a/src/scss/tokens/layout/_object-position.scss b/src/scss/tokens/layout/_object-position.scss
new file mode 100644
index 00000000..1bec8af1
--- /dev/null
+++ b/src/scss/tokens/layout/_object-position.scss
@@ -0,0 +1,54 @@
+.object-bottom {
+  object-position: bottom;
+}
+.object-center {
+  object-position: center;
+}
+.object-left {
+  object-position: left;
+}
+.object-left-bottom {
+  object-position: left bottom;
+}
+.object-left-top {
+  object-position: left top;
+}
+.object-right {
+  object-position: right;
+}
+.object-right-bottom {
+  object-position: right bottom;
+}
+.object-right-top {
+  object-position: right top;
+}
+.object-top {
+  object-position: top;
+}
+.\!object-bottom {
+  object-position: bottom !important;
+}
+.\!object-center {
+  object-position: center !important;
+}
+.\!object-left {
+  object-position: left !important;
+}
+.\!object-left-bottom {
+  object-position: left bottom !important;
+}
+.\!object-left-top {
+  object-position: left top !important;
+}
+.\!object-right {
+  object-position: right !important;
+}
+.\!object-right-bottom {
+  object-position: right bottom !important;
+}
+.\!object-right-top {
+  object-position: right top !important;
+}
+.\!object-top {
+  object-position: top !important;
+}